:root{--bg: #0b0c0f;--stage: #07080a;--panel: #12141a;--line: #22252e;--text: #e8e9ec;--dim: #8a8f9c;--accent: #4370ff;--accent-ink: #ffffff;--radius: 8px;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font:14px/1.4 Geist,Inter,system-ui,-apple-system,sans-serif}.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}.dim{color:var(--dim)}.layout{display:grid;grid-template-columns:1fr 340px;height:100%}.main{display:flex;flex-direction:column;min-width:0}.stage{flex:1;min-height:0;display:grid;place-items:center;background:var(--stage);padding:24px}.preview{display:block;box-shadow:0 20px 60px #0009}.transport{display:flex;gap:12px;align-items:center;padding:12px 24px;border-top:1px solid var(--line)}.scrub{flex:1}.panel{border-left:1px solid var(--line);background:var(--panel);overflow-y:auto;padding-bottom:32px}.panel-head{padding:20px 20px 8px;display:flex;justify-content:space-between;align-items:baseline}.panel-head h1{font-size:15px;font-weight:600;margin:0}.section{padding:14px 20px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}.section h3{margin:0;font-size:12px;font-weight:500;color:var(--dim);text-transform:uppercase;letter-spacing:.04em}.row{display:flex;gap:8px;align-items:center}.row>input[type=number]{flex:1;min-width:0}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--line);background:#191c24;color:var(--text);padding:8px 12px;border-radius:var(--radius);cursor:pointer;font:inherit;white-space:nowrap}.btn:hover{background:#20242e}.btn:disabled{opacity:.45;cursor:default}.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);flex:1}.btn.primary:hover:not(:disabled){filter:brightness(1.08)}.btn.ghost{background:transparent;flex:1;text-align:center}.btn.wide{width:100%}.btn:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,.swatch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}select,input[type=number]{font:inherit;color:var(--text);background:#191c24;border:1px solid var(--line);border-radius:var(--radius);padding:8px 10px}input[type=range]{width:100%;accent-color:var(--accent);margin:0}progress{flex:1;accent-color:var(--accent);height:6px}.preset-list{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.preset{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--line);background:transparent;color:var(--text);padding:6px;border-radius:var(--radius);cursor:pointer;font:inherit;font-size:12px;text-align:left;display:flex;flex-direction:column;gap:6px;position:relative}.preset:hover{border-color:#3a3f4c}.preset.active{border-color:var(--accent)}.preset.saved{padding:0}.preset-body{all:unset;display:flex;flex-direction:column;gap:6px;padding:6px;cursor:pointer;width:100%;font-size:12px}.preset .x{position:absolute;top:2px;right:2px;border:0;background:#00000080;color:#fff;width:20px;height:20px;border-radius:50%;cursor:pointer}.thumb{display:block;width:100%;aspect-ratio:16 / 9;border-radius:4px}.slider{display:flex;flex-direction:column;gap:4px}.slider-head{display:flex;justify-content:space-between;font-size:12px;color:var(--dim)}.check{display:flex;gap:8px;align-items:center;font-size:13px}.check input{accent-color:var(--accent)}.advanced{border-top:1px solid var(--line)}.advanced>summary{padding:14px 20px;cursor:pointer;font-size:12px;font-weight:500;color:var(--dim);text-transform:uppercase;letter-spacing:.04em;list-style:none}.advanced>summary::-webkit-details-marker{display:none}.advanced>summary:after{content:"+";float:right}.advanced[open]>summary:after{content:"–"}.advanced .section:first-of-type{border-top:0;padding-top:0}.stop{display:grid;grid-template-columns:56px 1fr;gap:8px;align-items:center}.stop-label{font-size:12px;color:var(--dim)}.swatch-groups{display:flex;flex-direction:column;gap:6px}.swatches{display:flex;gap:4px;flex-wrap:wrap}.swatch{width:20px;height:20px;border-radius:4px;border:2px solid transparent;cursor:pointer;padding:0}.swatch.active{border-color:#fff}.set{display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid var(--line);border-radius:var(--radius)}.set-head{display:flex;justify-content:space-between;gap:8px;font-size:12px}.segmented{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.segmented button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:transparent;color:var(--dim);padding:7px 0;font:inherit;font-size:12px;cursor:pointer}.segmented button+button{border-left:1px solid var(--line)}.segmented button.active{background:#20242e;color:var(--text)}.segmented button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.hint{margin:0;font-size:12px;color:var(--dim)}.error{margin:0;font-size:12px;color:#ff7b7b}@media (max-width: 900px){.layout{grid-template-columns:1fr;grid-template-rows:55vh 1fr}.panel{border-left:0;border-top:1px solid var(--line)}.stage{padding:16px}.transport{padding:10px 16px;flex-wrap:wrap}}