:root{--gag-primary:var(--main-primary);--gag-primary-rgb:99, 102, 241;--gag-accent:#f43f5e;--gag-accent-rgb:244, 63, 94;--gag-text:#1e293b;--gag-text-muted:#64748b;--gag-bg:#fff;--gag-bg-secondary:#f8fafc;--gag-border:#e2e8f0;--gag-border-hover:#cbd5e1;--gag-radius:var(--main-radius);--gag-radius-lg:var(--main-radius-lg);--gag-shadow:0 1px 3px #00000014;--gag-shadow-md:0 4px 12px #0000001a}._gag-container{min-height:400px;padding-left:var(--main-space-4);padding-right:var(--main-space-4)}._gag-toolbar{justify-content:space-between;align-items:center;gap:var(--main-space-3);padding:var(--main-space-3) var(--main-space-4);background:var(--gag-bg);border-radius:var(--gag-radius-lg);box-shadow:var(--gag-shadow);margin-bottom:var(--main-space-4);border-style:solid;border-width:1px;border-color:var(--gag-border);flex-wrap:wrap;display:flex}._gag-toolbar-left,._gag-toolbar-right{align-items:center;gap:var(--main-space-2);flex-wrap:wrap;display:flex}._gag-separator{background:var(--gag-border);width:1px;height:20px;margin:0 var(--main-space-1)}._gag-layout{gap:var(--main-space-5);align-items:flex-start;display:flex}._gag-preview-area{gap:var(--main-space-2);flex-direction:column;flex:1;min-width:0;display:flex}._gag-controls{gap:var(--main-space-4);flex-direction:column;width:280px;min-width:280px;display:flex}@media (max-width:768px){._gag-container{padding-left:var(--main-space-3);padding-right:var(--main-space-3)}._gag-layout{gap:var(--main-space-4);flex-direction:column}._gag-controls{gap:var(--main-space-3);grid-template-columns:repeat(2,minmax(0,1fr));width:100%;min-width:0;display:grid}._gag-toolbar{padding:var(--main-space-2) var(--main-space-3);gap:var(--main-space-2)}._gag-toolbar-left,._gag-toolbar-right{flex:auto}._gag-toolbar-right{justify-content:flex-end}}@media (max-width:480px){._gag-container{padding-left:var(--main-space-2);padding-right:var(--main-space-2)}._gag-toolbar{justify-content:center}._gag-toolbar-left,._gag-toolbar-right{flex:0 auto;justify-content:center}._gag-controls{grid-template-columns:minmax(0,1fr)}}._gag-upload-zone{background:var(--gag-bg);border-style:dashed;border-width:2px;border-color:var(--gag-border);border-radius:var(--gag-radius-lg);padding:var(--main-space-12) var(--main-space-6);text-align:center;cursor:pointer;box-shadow:var(--gag-shadow);-webkit-tap-highlight-color:transparent;touch-action:manipulation}@media (hover:hover){._gag-upload-zone:hover{border-color:var(--gag-primary);background:rgba(var(--gag-primary-rgb), .02)}}._gag-upload-zone:active{border-color:var(--gag-primary);background:rgba(var(--gag-primary-rgb), .04)}._gag-upload-zone._gag-dragover{border-color:var(--gag-primary);background:rgba(var(--gag-primary-rgb), .05)}@media (max-width:768px){._gag-upload-zone{padding:var(--main-space-8) var(--main-space-4)}}@media (max-width:480px){._gag-upload-zone{padding:var(--main-space-6) var(--main-space-3)}._gag-upload-title{font-size:var(--main-text-sm)}}._gag-upload-content{align-items:center;gap:var(--main-space-3);color:var(--gag-text-muted);flex-direction:column;display:flex}._gag-upload-content svg{color:var(--gag-border-hover)}._gag-upload-title{font-size:var(--main-text-base);color:var(--gag-text);margin:0;font-weight:500}._gag-upload-hint{font-size:var(--main-text-xs);color:var(--gag-text-muted);margin:0}._gag-canvas-wrapper{background:var(--gag-bg-secondary);border-radius:var(--gag-radius-lg);min-height:300px;box-shadow:var(--gag-shadow);border-style:solid;border-width:1px;border-color:var(--gag-border);justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}._gag-canvas-wrapper canvas{max-width:100%;max-height:70vh;display:block}._gag-info-bar{font-size:var(--main-text-xs);color:var(--gag-text-muted);padding:0 var(--main-space-1);justify-content:space-between;align-items:center;min-height:20px;display:flex}._gag-btn-icon{border-radius:var(--gag-radius);width:34px;height:34px;color:var(--gag-text-muted);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:inline-flex}@media (hover:hover){._gag-btn-icon:hover{background:var(--gag-bg-secondary);color:var(--gag-text)}}._gag-btn-icon:active{background:var(--gag-bg-secondary);color:var(--gag-text)}._gag-btn-primary{align-items:center;gap:var(--main-space-2);border-radius:var(--gag-radius);background:var(--gag-primary);color:#fff;font-size:var(--main-text-sm);cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent;touch-action:manipulation;border:none;padding:.5rem 1rem;font-weight:500;display:inline-flex}@media (hover:hover){._gag-btn-primary:hover{opacity:.9}}._gag-btn-primary:active{opacity:.85}._gag-btn-randomize{align-items:center;gap:var(--main-space-2);border-radius:var(--gag-radius);border-style:solid;border-width:1px;border-color:var(--gag-accent);background:rgba(var(--gag-accent-rgb), .05);color:var(--gag-accent);font-size:var(--main-text-sm);cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent;touch-action:manipulation;padding:.5rem 1rem;font-weight:500;display:inline-flex}@media (hover:hover){._gag-btn-randomize:hover{background:rgba(var(--gag-accent-rgb), .1)}}._gag-btn-randomize:active{background:rgba(var(--gag-accent-rgb), .12)}._gag-card{background:var(--gag-bg);border-radius:var(--gag-radius-lg);padding:var(--main-space-4);box-shadow:var(--gag-shadow);border-style:solid;border-width:1px;border-color:var(--gag-border)}._gag-card-title{font-size:var(--main-text-sm);color:var(--gag-text);margin-bottom:var(--main-space-3);font-weight:600}._gag-slider-section{margin-bottom:var(--main-space-3)}._gag-slider-section:last-child{margin-bottom:0}._gag-slider-header{font-size:var(--main-text-xs);color:var(--gag-text-muted);margin-bottom:var(--main-space-2);justify-content:space-between;align-items:center;display:flex}._gag-slider-value{color:var(--gag-primary);font-weight:600;font-size:var(--main-text-xs)}._gag-slider{-webkit-appearance:none;appearance:none;background:var(--gag-border);touch-action:pan-y pinch-zoom;-webkit-tap-highlight-color:transparent;border-radius:3px;outline:none;width:100%;height:6px}._gag-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--gag-primary);cursor:pointer;width:18px;height:18px;box-shadow:0 1px 4px rgba(var(--gag-primary-rgb), .3);border-radius:50%}._gag-slider::-moz-range-thumb{background:var(--gag-primary);cursor:pointer;width:18px;height:18px;box-shadow:0 1px 4px rgba(var(--gag-primary-rgb), .3);border:none;border-radius:50%}._gag-output-row{gap:var(--main-space-3);flex-direction:column;display:flex}._gag-select{border-radius:var(--gag-radius);border-style:solid;border-width:1px;border-color:var(--gag-border);background:var(--gag-bg);width:100%;color:var(--gag-text);font-size:var(--main-text-sm);cursor:pointer;-webkit-tap-highlight-color:transparent;outline:none;padding:.5rem .75rem}._gag-select:focus{border-color:var(--gag-primary);box-shadow:0 0 0 2px rgba(var(--gag-primary-rgb), .15)}@media (max-width:768px){._gag-canvas-wrapper{min-height:200px}._gag-canvas-wrapper canvas{max-height:55vh}._gag-btn-icon{width:40px;height:40px}._gag-btn-primary,._gag-btn-randomize{min-height:40px;padding:.625rem 1rem}._gag-card{padding:var(--main-space-3)}._gag-slider{border-radius:4px;height:8px}._gag-slider::-webkit-slider-thumb{width:24px;height:24px}._gag-slider::-moz-range-thumb{width:24px;height:24px}._gag-slider-section{margin-bottom:var(--main-space-4)}._gag-select{min-height:40px;padding:.625rem .75rem;font-size:16px}}@media (max-width:480px){._gag-canvas-wrapper canvas{max-height:45vh}._gag-btn-primary,._gag-btn-randomize{font-size:var(--main-text-xs);flex:auto;justify-content:center;padding:.5rem .75rem}}