:root{--page:#f1efe8;--card:#fffdf7;--ink:#171813;--muted:#6e7067;--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:#a5a89d;--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);padding:12px 16px}.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{justify-items:center;gap:12px;display:grid;position:sticky;top:20px}.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}.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}.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:11.5px/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:10.5px ui-monospace,monospace;display:grid}.cell svg{width:100%;height:auto}.cell.on{border-color:var(--accent);color:var(--accent)}.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%)}.scrubs{gap:8px;display:grid}.scrubs.two{grid-template-columns:1fr 1fr;gap:8px 12px}.scrub{justify-content:space-between;align-items:center;gap:10px;display:flex}.scrub-label{color:var(--muted);cursor:ew-resize;-webkit-user-select:none;user-select:none;white-space:nowrap;border-bottom:1px dotted color-mix(in srgb, var(--muted) 55%, transparent);padding-bottom:1px;font-size:12px}.scrub-label:hover{color:var(--ink);border-bottom-color:var(--accent)}.scrub.disabled .scrub-label{cursor:default;opacity:.5}.scrub-field{background:var(--page);border:1px solid var(--border);border-radius:7px;align-items:center;gap:3px;min-width:76px;padding:3px 7px;display:flex}.scrub-field:focus-within{border-color:var(--accent)}.scrub-field input{width:100%;color:var(--ink);text-align:right;background:0 0;border:0;outline:none;padding:0;font:12px ui-monospace,monospace}.scrub-field em{color:var(--muted);font-size:11px;font-style:normal}.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:.09em;text-transform:uppercase;color:var(--muted);margin:0;font-size:11px}.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)}