:root{--bg:#121214;--surface:#1c1c20;--border:#2e2e35;--text:#e8e8ec;--muted:#8a8a94;--accent:#f5c518;--danger:#e5484d;--radius:6px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}[hidden]{display:none!important}body{background:var(--bg);min-height:100dvh;color:var(--text);flex-direction:column;margin:0;font:14px/1.4 system-ui,-apple-system,sans-serif;display:flex}.toolbar{background:var(--surface);border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:flex-end;gap:.75rem 1rem;padding:.75rem 1rem;display:flex}.field{flex-direction:column;gap:.25rem;display:flex}.field.grow{flex:20rem;min-width:14rem}.field.check{cursor:pointer;-webkit-user-select:none;user-select:none;flex-direction:row;align-items:center;gap:.4rem;padding-block:.45rem}.field.check input{accent-color:var(--accent);margin:0}.label{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-size:.75rem}input[type=text]{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text);font:inherit;padding:.45rem .6rem}input[type=range]{width:9rem}input[type=color]{border:1px solid var(--border);border-radius:var(--radius);background:0 0;width:3rem;height:2rem;padding:0}button{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text);font:inherit;cursor:pointer;padding:.45rem .8rem}button:hover:not(:disabled){border-color:var(--muted)}button:disabled{opacity:.4;cursor:not-allowed}button.primary{background:var(--accent);border-color:var(--accent);color:#111;font-weight:600}button.danger{color:var(--danger)}main{flex:1;place-items:center;padding:1rem;display:grid}.frame{aspect-ratio:16/9;width:min(100%,177.778dvh - 16rem);box-shadow:0 0 0 1px var(--border);background:#000;position:relative}.frame canvas{cursor:grab;touch-action:none;width:100%;height:100%;display:block}.frame canvas.is-panning{cursor:grabbing}.overlay{pointer-events:none;position:absolute;inset:0}.panel{pointer-events:none;position:absolute}.overlay.is-swapping .panel{pointer-events:auto}.panel.drop-target{outline:3px solid var(--accent);outline-offset:-3px}.panel-tools{border-radius:var(--radius);pointer-events:auto;opacity:0;background:#000000b3;gap:2px;padding:2px;transition:opacity .15s;display:flex;position:absolute;top:.5rem;left:50%;translate:-50%}.frame:hover .panel-tools,.panel-tools:focus-within{opacity:1}.panel-tools button,.panel-tools .handle{color:#fff;background:0 0;border:0;padding:.2rem .45rem;font-size:.9rem;line-height:1}.panel-tools .handle{cursor:grab}.panel-tools .zoom-readout{color:#ffffffb3;font-variant-numeric:tabular-nums;text-align:center;min-width:3.2ch;padding:.2rem .3rem;font-size:.75rem;line-height:1.3}.panel-tools button:hover{background:#ffffff26}.empty{text-align:center;border:2px dashed var(--border);pointer-events:none;place-content:center;gap:.25rem;display:grid;position:absolute;inset:0}.empty button{pointer-events:auto;justify-self:center}.muted{color:var(--muted);margin:0}.empty p{margin:0}body.is-dragging .frame{box-shadow:0 0 0 3px var(--accent)}.notice{border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);padding:.5rem .9rem;position:fixed;bottom:1rem;left:50%;translate:-50%;box-shadow:0 4px 16px #0006}@media (prefers-reduced-motion:reduce){*{transition:none!important}}