:root{--page:#f1efe8;--card:#fffdf7;--ink:#171813;--muted:#5f6157;--border:#d9d5c9;--accent:#1c7a4c;--bad:#b4432a;--radius:14px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--page:#11130f;--card:#1b1e18;--ink:#f3f0e7;--muted:#b0b3a8;--border:#363a30;--accent:#4cc182;--bad:#ff8b6b}}*{box-sizing:border-box}body{background:var(--page);color:var(--ink);margin:0;font:15px/1.55 ui-sans-serif,system-ui,-apple-system,sans-serif}.page{gap:26px;max-width:1240px;margin:0 auto;padding:32px 24px 72px;display:grid}.masthead h1{letter-spacing:-.025em;margin:0 0 6px;font-size:34px}.masthead p{color:var(--muted);max-width:62ch;margin:0}.banner{border-radius:var(--radius);background:var(--card);border:1px solid var(--border);color:var(--muted);padding:12px 16px;font-size:13px}.banner.error{background:color-mix(in srgb, var(--bad) 14%, var(--card));border:1px solid color-mix(in srgb, var(--bad) 40%, var(--border));color:var(--bad)}.layout{grid-template-columns:minmax(280px,380px) 1fr;align-items:start;gap:20px;display:grid}@media (width<=900px){.layout{grid-template-columns:1fr}}.stage,.panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px}.stage{z-index:1;justify-items:center;gap:12px;display:grid;position:sticky;top:20px}@media (width<=900px){.stage{position:static}}.preview{aspect-ratio:1;place-items:center;width:100%;display:grid;position:relative}.preview svg{width:100%;height:auto}.busy{text-align:center;color:var(--muted);font:12px ui-monospace,monospace;position:absolute;inset:auto 0 0}.stage-meta{align-items:baseline;gap:10px;display:flex}.stage-meta span{color:var(--muted);font:12px ui-monospace,monospace}.panels{align-content:start;gap:16px;display:grid}h2{text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin:0 0 10px;font-size:11px}button{border:1px solid var(--border);color:var(--ink);cursor:pointer;background:0 0;border-radius:9px;align-items:center;gap:6px;padding:6px 11px;font:12px ui-monospace,monospace;display:inline-flex}button:hover{border-color:var(--accent)}button.on{background:var(--accent);border-color:var(--accent);color:#fff}button.clips{border-color:var(--bad);color:var(--bad)}button.primary{background:var(--accent);border-color:var(--accent);color:#fff}button.wide{justify-content:center;width:100%}.row{flex-wrap:wrap;gap:8px;display:flex}.chips{flex-wrap:wrap;gap:6px;display:flex}.swatch{border-radius:4px;width:12px;height:12px;display:inline-block}.dropzone{border:1.5px dashed var(--border);border-radius:var(--radius);cursor:pointer;justify-items:center;gap:3px;margin-bottom:12px;padding:22px;transition:border-color .15s,background .15s;display:grid}.dropzone:hover,.dropzone.over{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 7%, transparent)}.dropzone span{color:var(--muted);font-size:12px}.dropzone.busy{opacity:.5}.control{gap:3px;margin-bottom:10px;display:grid}.control span{color:var(--muted);justify-content:space-between;font:12px ui-monospace,monospace;display:flex}.control input[type=range]{width:100%;accent-color:var(--accent)}.field{gap:4px;margin-bottom:12px;display:grid}.field span{color:var(--muted);font:12px ui-monospace,monospace}input,textarea,select{font:13px ui-monospace,monospace}.field input{background:var(--page);border:1px solid var(--border);color:var(--ink);border-radius:8px;padding:7px 10px;font:13px ui-monospace,monospace}.toggle{align-items:center;gap:8px;font-size:13px;display:flex}.toggle input{accent-color:var(--accent)}.stops{gap:12px;margin-top:10px;display:flex}.stops label{color:var(--muted);justify-items:center;gap:3px;font:10px ui-monospace,monospace;display:grid}.stops input[type=color]{border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:7px;width:42px;height:30px;padding:2px}.verdict{border-radius:10px;gap:2px;margin-bottom:14px;padding:9px 12px;font:12px ui-monospace,monospace;display:grid}.verdict.ok{background:color-mix(in srgb, var(--accent) 12%, transparent);color:var(--accent)}.verdict.bad{background:color-mix(in srgb, var(--bad) 12%, transparent);color:var(--bad)}.verdict em{opacity:.75;font-style:normal}.hint,.warning{color:var(--muted);margin:8px 0 0;font-size:12px}.panel>h2+.hint,.panel>.panel-head+.hint{margin-top:0}.warning{color:var(--bad)}.usage{background:var(--page);border:1px solid var(--border);color:var(--muted);border-radius:10px;margin:0 0 12px;padding:10px 12px;font:12px/1.6 ui-monospace,monospace;overflow-x:auto}.panel hr{border:none;border-top:1px solid var(--border);margin:16px 0 12px}.states{gap:22px;display:grid}.states .grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:9px;display:grid}.cell{background:var(--card);color:var(--muted);border-radius:12px;gap:2px;padding:7px;font:11px ui-monospace,monospace;display:grid}.cell svg{width:100%;height:auto}.cell.on{border-color:var(--accent);color:#fff}.cell figcaption{text-align:center}footer{color:var(--muted);border-top:1px solid var(--border);padding-top:16px;font-size:12px}.gaze-row{grid-template-columns:132px 1fr;align-items:start;gap:14px;display:grid}@media (width<=460px){.gaze-row{grid-template-columns:1fr}}.gaze-pad{aspect-ratio:1;border:1px solid var(--border);background:var(--page);cursor:crosshair;touch-action:none;border-radius:12px;position:relative}.gaze-pad:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.gaze-cross{background:linear-gradient(var(--border), var(--border)) center / 1px 100% no-repeat, linear-gradient(var(--border), var(--border)) center / 100% 1px no-repeat;opacity:.7;position:absolute;inset:0}.gaze-dot{background:var(--accent);width:15px;height:15px;box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);pointer-events:none;border-radius:50%;margin:-7.5px 0 0 -7.5px;position:absolute}.gaze-side{align-content:start;display:grid}.gaze-readout{color:var(--muted);margin:6px 0 0;font:11px ui-monospace,monospace}.preview.dark{border-radius:var(--radius);border:1px solid var(--border);background:radial-gradient(circle at 50% 42%,#23262b 0%,#101216 62%,#0a0b0d 100%)}.hint+.sliders,.hint+.row,.hint+.chips{margin-top:12px}.panel-head{justify-content:space-between;align-items:baseline;gap:10px;display:flex}.panel-head.spaced{border-top:1px solid var(--border);margin-top:18px;padding-top:14px}.panel-head h3{letter-spacing:0;text-transform:none;color:var(--ink);margin:0;font-size:12px}.count{color:var(--muted);font:11px ui-monospace,monospace}button.mini{border-radius:999px;padding:3px 9px;font-size:11px}.shape-grid{grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;margin-bottom:14px;display:grid}.shape-tile{border:1px solid var(--border);background:var(--page);color:var(--muted);cursor:pointer;border-radius:10px;justify-items:center;gap:5px;padding:9px 5px 7px;display:grid}.shape-tile svg{width:34px;height:34px;color:var(--muted)}.shape-tile span{letter-spacing:.02em;font-size:10px}.shape-tile:hover{border-color:var(--accent)}.shape-tile.on{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 12%, var(--card));color:var(--ink)}.shape-tile.on svg{color:var(--accent)}.thumb-defs{width:0;height:0;position:absolute}.thumbs{grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:6px;display:grid}.thumb{aspect-ratio:1;border:1px solid var(--border);background:var(--page);cursor:pointer;border-radius:9px;padding:0;position:relative;overflow:hidden}.thumb svg{width:100%;height:100%;display:block}.thumb em{color:var(--muted);background:color-mix(in srgb, var(--page) 78%, transparent);border-radius:3px;padding:0 2px;font:9px ui-monospace,monospace;position:absolute;bottom:2px;right:3px}.thumb:hover{border-color:var(--accent)}.thumb.on{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent)}.thumb.clips:after{content:"";border-radius:inherit;box-shadow:inset 0 0 0 2px var(--bad);pointer-events:none;position:absolute;inset:0}.thumb.auto{color:var(--muted);place-items:center;font:11px ui-monospace,monospace;display:grid}.thumb.auto.on{color:var(--ink)}.masthead{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:24px;display:flex}.masthead-links{flex-shrink:0;gap:8px;display:flex}.masthead-links a{border:1px solid var(--border);color:var(--ink);white-space:nowrap;border-radius:9px;align-items:center;gap:6px;padding:7px 12px;font:12px ui-monospace,monospace;text-decoration:none;display:inline-flex}.masthead-links a:hover{border-color:var(--accent);color:var(--accent)}.masthead-links svg{opacity:.55;width:10px;height:10px}button.mini:disabled{opacity:.4;cursor:default}button.mini:disabled:hover{border-color:var(--border)}.field-label{letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:12px;margin-bottom:6px;font:11px ui-monospace,monospace;display:block}button.danger{border-color:var(--bad);color:var(--bad)}button.danger:hover{background:color-mix(in srgb, var(--bad) 14%, var(--card));border-color:var(--bad)}.state-list{gap:6px;display:grid}.state-row{border:1px solid var(--border);border-radius:10px;align-items:stretch;gap:6px;padding:5px;display:flex}.state-row.on{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 8%, transparent)}.state-row button{border:none;padding:4px 7px}.state-play{justify-content:center;min-width:26px;font-size:11px}.state-name{text-align:left;flex:1;justify-items:start;gap:1px;display:grid!important}.state-name strong{font:12px ui-monospace,monospace}.state-name em{color:var(--muted);font-size:11px;font-style:normal}.steps{gap:8px;display:grid}.step{border:1px solid var(--border);border-radius:11px;grid-template-columns:auto 1fr auto;align-items:start;gap:9px;padding:8px;display:grid}.step-face{border-radius:9px;padding:2px;line-height:0}.step-face.clips{border-color:var(--bad)}.step-knobs{gap:6px;min-width:0;display:grid}.step-order{gap:3px;display:grid}.step-order button{justify-content:center;padding:2px 6px;font-size:11px}.step-order button:disabled,.step button:disabled{opacity:.35;cursor:not-allowed}.picker{border:1px dashed var(--border);border-radius:11px;margin-top:10px;padding:10px}.picker-grid{grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:5px;display:grid}.picker-grid button{border-radius:8px;padding:2px;line-height:0}.picker-grid button.clips{border-color:var(--bad)}.field select{background:var(--page);border:1px solid var(--border);color:var(--ink);border-radius:8px;padding:7px 10px;font:12px ui-monospace,monospace}.step-knobs .slider{max-width:190px}.suppressed{background:color-mix(in srgb, var(--accent) 10%, transparent);color:var(--accent);border-radius:10px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin:0;padding:8px 10px;font-size:12px;display:flex}.suppressed button{color:inherit;border-color:currentColor;flex:none}.offstage{pointer-events:none;width:1080px;height:1080px;position:fixed;top:0;left:-20000px}.progress{background:var(--page);border:1px solid var(--border);border-radius:999px;height:6px;margin:12px 0 8px;overflow:hidden}.progress span{background:var(--accent);height:100%;display:block}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:9px}.thumb:focus-visible,.shape-tile:focus-visible,.cell:focus-visible{outline-offset:3px}.sliders{gap:14px;display:grid}.sliders.two{grid-template-columns:1fr 1fr;gap:14px 16px}.slider{cursor:pointer;gap:6px;display:grid}.slider>span{color:var(--muted);-webkit-user-select:none;user-select:none;font-size:12px}.slider:hover>span{color:var(--ink)}.slider.disabled{cursor:default;opacity:.45}.slider input[type=range]{appearance:none;width:100%;height:18px;cursor:inherit;background:0 0;margin:0}.slider input[type=range]::-webkit-slider-runnable-track{background:var(--page);border:1px solid var(--border);border-radius:999px;height:6px}.slider input[type=range]::-moz-range-track{background:var(--page);border:1px solid var(--border);border-radius:999px;height:6px}.slider input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--accent);border:2px solid var(--card);border-radius:50%;width:16px;height:16px;margin-top:-6px;box-shadow:0 1px 3px #00000040}.slider input[type=range]::-moz-range-thumb{background:var(--accent);border:2px solid var(--card);border-radius:50%;width:16px;height:16px;box-shadow:0 1px 3px #00000040}.slider input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:999px}