*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--panel-bg: #0d0d0d;--panel-border: #1a1a1a;--surface: #141414;--text: #e0e0e0;--text-dim: #808080;--accent: #7c5cbf;--accent-hover: #9172d4;--danger: #c0392b;--danger-hover: #e74c3c;--radius: 6px;--panel-width: 240px}html,body{height:100%;overflow:hidden;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;color:var(--text);background:#000}body{display:flex}.panel{width:var(--panel-width);flex-shrink:0;background:var(--panel-bg);border-color:var(--panel-border);padding:20px 16px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}.panel--left{border-right:1px solid var(--panel-border)}.panel--right{border-left:1px solid var(--panel-border)}.viewport{flex:1;position:relative;background:#000}.viewport canvas{display:block;width:100%!important;height:100%!important}.viewport-toolbar{position:absolute;top:12px;right:12px;z-index:10;display:flex;gap:6px}.btn--icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:1px solid #2a2a2a;border-radius:var(--radius);background:#141414cc;color:var(--text-dim);cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:all .15s ease}.btn--icon:hover{background:#1e1e1ee6;border-color:#3a3a3a;color:var(--text)}.btn--icon.flash{background:var(--accent);border-color:var(--accent);color:#fff}h2{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-dim);margin-bottom:4px}h3{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-dim)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;border:1px solid #2a2a2a;border-radius:var(--radius);background:var(--surface);color:var(--text);font-size:12px;font-weight:500;cursor:pointer;transition:all .15s ease}.btn:hover{background:#1e1e1e;border-color:#3a3a3a}.btn--danger{border-color:var(--danger);color:var(--danger)}.btn--danger:hover{background:var(--danger);color:#fff}.btn--preset{flex:1;padding:6px 10px;font-size:11px;text-transform:uppercase;letter-spacing:.5px}.btn--preset.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}.preset-row{display:flex;gap:6px}.upload-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;border:2px dashed #2a2a2a;border-radius:var(--radius);background:var(--surface);color:var(--text-dim);font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease}.upload-btn:hover{border-color:var(--accent);color:var(--accent);background:#7c5cbf0d}.file-name{font-size:11px;color:var(--accent);word-break:break-all;min-height:0}.file-name:empty{display:none}.control--check{flex-direction:row;align-items:center;gap:8px;cursor:pointer}.control--check input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border:1px solid #3a3a3a;border-radius:3px;background:var(--surface);cursor:pointer;flex-shrink:0;position:relative}.control--check input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}.control--check input[type=checkbox]:checked:after{content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.control--check span{color:var(--text-dim);font-size:12px}.preview{display:none;width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius);border:1px solid var(--panel-border)}.control{display:flex;flex-direction:column;gap:4px}.control span{display:flex;justify-content:space-between;font-size:12px;color:var(--text-dim)}.val{font-family:SF Mono,Fira Code,monospace;color:var(--text)}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:25px;border-radius:6px;background:#1a1a1a;outline:none;padding:0 4px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:18px;border-radius:5px;background:var(--accent);cursor:pointer;border:none;transition:background .15s ease}input[type=range]::-webkit-slider-thumb:hover{background:var(--accent-hover)}input[type=range]::-moz-range-thumb{width:16px;height:18px;border-radius:5px;background:var(--accent);cursor:pointer;border:none}input[type=range]::-moz-range-thumb:hover{background:var(--accent-hover)}input[type=range]::-moz-range-track{height:25px;border-radius:6px;background:#1a1a1a}input[type=color]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:32px;border:1px solid #2a2a2a;border-radius:var(--radius);background:var(--surface);cursor:pointer;padding:2px}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:4px}select{width:100%;padding:6px 8px;border:1px solid #2a2a2a;border-radius:var(--radius);background:var(--surface);color:var(--text);font-size:12px;font-family:inherit;cursor:pointer;outline:none}select:hover{border-color:#3a3a3a}select:focus{border-color:var(--accent)}.view-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.btn--view{padding:6px 4px;font-size:10px;text-transform:uppercase;letter-spacing:.5px}.btn--view.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}.anim-presets{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}.btn--anim{padding:6px 4px;font-size:10px;text-transform:uppercase;letter-spacing:.5px}.btn--anim.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}.anim-curve-editor{display:flex;flex-direction:column;gap:8px}.curve-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.btn--curve{padding:6px 4px;font-size:10px;text-transform:uppercase;letter-spacing:.5px}.btn--curve.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}#curveCanvas{width:100%;aspect-ratio:1;border:1px solid #2a2a2a;border-radius:var(--radius);cursor:crosshair;touch-action:none}.color-presets{display:flex;gap:8px}.swatch{width:36px;height:36px;border-radius:50%;border:2px solid #2a2a2a;cursor:pointer;transition:all .15s ease;padding:0;background:none}.swatch:hover{transform:scale(1.1);border-color:#555}.swatch.active{border-color:#fff;box-shadow:0 0 0 2px #ffffff26}.swatch[data-color]{background-color:attr(data-color)}.gradient-controls{display:none;flex-direction:column;gap:10px}.gradient-controls.visible{display:flex}.vec-pad{position:relative;width:100%;aspect-ratio:1;background:var(--surface);border:1px solid #2a2a2a;border-radius:var(--radius);cursor:crosshair;touch-action:none;overflow:hidden}.vec-pad__crosshair{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.vec-pad__crosshair:before,.vec-pad__crosshair:after{content:"";position:absolute;background:#2a2a2a}.vec-pad__crosshair:before{left:50%;top:0;width:1px;height:100%}.vec-pad__crosshair:after{top:50%;left:0;height:1px;width:100%}.vec-pad__dot{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--accent);border:2px solid #000;transform:translate(-50%,-50%);left:50%;top:50%;pointer-events:none;transition:box-shadow .15s ease;box-shadow:0 0 0 2px #7c5cbf40}.collapsible{border:1px solid var(--panel-border);border-radius:var(--radius);background:var(--surface)}.collapsible__toggle{cursor:pointer;padding:10px 12px;list-style:none;display:flex;align-items:center;justify-content:space-between}.collapsible__toggle::-webkit-details-marker{display:none}.collapsible__toggle h2{margin:0}.collapsible__toggle:after{content:"";width:6px;height:6px;border-right:2px solid var(--text-dim);border-bottom:2px solid var(--text-dim);transform:rotate(-45deg);transition:transform .15s ease;flex-shrink:0}.collapsible[open]>.collapsible__toggle:after{transform:rotate(45deg)}.collapsible__body{display:flex;flex-direction:column;gap:8px;padding:0 12px 12px}.collapsible__body .control{gap:2px}.collapsible__body input[type=range]{height:16px}.collapsible__body input[type=range]::-webkit-slider-thumb{width:12px;height:14px}.collapsible__body input[type=range]::-moz-range-thumb{width:12px;height:14px}.collapsible__body input[type=range]::-moz-range-track{height:16px}.divider{height:1px;background:var(--panel-border);margin:4px 0}.panel::-webkit-scrollbar{width:4px}.panel::-webkit-scrollbar-track{background:transparent}.panel::-webkit-scrollbar-thumb{background:#2a2a2a;border-radius:2px}