:root{--bg: #000;--glass: rgba(14, 14, 20, .62);--glass-strong: rgba(14, 14, 20, .85);--line: rgba(255, 255, 255, .1);--text: #eceef3;--muted: #9097a6;--accent: #8ef0ff;--accent-2: #c58bff;--cue: #ffb347;--radius: 12px;--font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:14px/1.4 var(--font);overflow:hidden;-webkit-font-smoothing:antialiased}#stage{position:fixed;inset:0;width:100%;height:100%;display:block}button,select,input{font:inherit;color:inherit}button{background:#ffffff0f;border:1px solid var(--line);border-radius:999px;padding:8px 16px;cursor:pointer;transition:background .15s,border-color .15s}button:hover{background:#ffffff1f}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#0a0a10;border:none;font-weight:600}button.primary:hover{filter:brightness(1.1)}button.link{background:none;border:none;padding:0;color:var(--muted);font-size:12px}button.link:hover{color:var(--text)}button.icon{width:36px;height:36px;padding:0;display:grid;place-items:center}button.icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}button[aria-pressed=true]{background:var(--accent);color:#0a0a10;border-color:transparent}kbd{font:12px ui-monospace,monospace;padding:1px 6px;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;background:#ffffff0f}.overlay{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(ellipse at center,#140a288c,#000000d9);z-index:20;padding:16px}.overlay[hidden]{display:none}.start-card{width:min(460px,100%);padding:32px;background:var(--glass-strong);border:1px solid var(--line);border-radius:20px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);text-align:center}.start-card h1{margin:0 0 4px;font-size:30px;letter-spacing:-.02em;background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}.start-card h2{margin:0 0 16px}.sub{color:var(--muted);margin:0 0 24px}.start-buttons{display:grid;gap:10px}.start-buttons button{padding:12px 16px}.hint{color:var(--muted);font-size:12px;margin:20px 0 0;line-height:1.8}.hint a{color:var(--accent)}.error{color:#ff8a8a;font-size:13px;margin:16px 0 0}.dialog{padding:16px;border:none;background:none;color:var(--text);width:min(460px,100%);max-width:none;overflow:visible}.dialog::backdrop{background:#00000073}.dialog .start-card{width:100%}.dialog .start-card p{margin:0 0 12px;white-space:pre-line}.dialog-field{display:block}.dialog-field input{width:100%;background:#ffffff0f;border:1px solid var(--line);border-radius:8px;padding:8px 10px}.dialog-buttons{display:grid;gap:8px;margin-top:20px}.help-card{text-align:left}.help-card dl{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;margin:0 0 8px}.help-card dt{white-space:nowrap}.help-card dd{margin:0;color:var(--muted)}.help-card .primary{margin-top:20px;width:100%}.chrome,.chrome-soft{transition:opacity .4s,transform .4s}body.idle .chrome{opacity:0;pointer-events:none}body.idle .chrome-soft{opacity:.35}body.idle{cursor:none}body.ui-hidden .chrome,body.ui-hidden .chrome-soft,body.ui-hidden #toast,body.pre-start .chrome,body.pre-start .chrome-soft{display:none!important}#topbar{position:fixed;top:12px;left:12px;right:12px;display:flex;align-items:center;gap:12px;padding:6px 6px 6px 16px;background:var(--glass);border:1px solid var(--line);border-radius:999px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);z-index:10}.brand{font-weight:700;letter-spacing:-.01em;white-space:nowrap}#families{display:flex;gap:4px;flex:1;justify-content:center;overflow-x:auto;scrollbar-width:none}#families button{border-color:transparent;background:none;white-space:nowrap;padding:7px 14px;color:var(--muted)}#families button:hover{color:var(--text);background:#ffffff0f}#families button[aria-selected=true]{color:var(--text);background:#ffffff1f}.actions{display:flex;gap:4px}.actions button{border-color:transparent;background:none}.actions button:hover{background:#ffffff1a}.actions button[aria-pressed=true]{background:var(--accent)}.actions button[aria-pressed=true]:hover{background:var(--accent);filter:brightness(1.1)}.layer-switch{display:inline-flex;flex-wrap:wrap;max-width:100%;padding:3px;border:1px solid var(--line);border-radius:18px;background:#ffffff0a}.layer-switch[hidden]{display:none}.layer-switch button{border:none;background:none;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap;max-width:10em;overflow:hidden;text-overflow:ellipsis}.layer-switch button:hover{color:var(--text)}.layer-switch button.off:not([aria-checked=true]){opacity:.5}.layer-switch button[aria-checked=true]{color:#0a0a10;background:var(--accent)}.layer-switch button.off[aria-checked=true]{background:var(--muted)}#layer-switch .layer-switch button{padding:5px 9px;max-width:7em}#panel .layer-switch{margin-top:8px}#panel-layer-switch{margin-bottom:12px}#panel-layer-switch:has(>.layer-switch[hidden]){display:none}#layer-switch:has(>.layer-switch[hidden]){display:none}#variants{position:fixed;left:50%;bottom:16px;transform:translate(-50%);display:flex;gap:4px;padding:5px;background:var(--glass);border:1px solid var(--line);border-radius:999px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);z-index:10;max-width:calc(100vw - 32px);overflow-x:auto;scrollbar-width:none}#variants button{border:none;background:none;padding:7px 14px;color:var(--muted);white-space:nowrap}#variants button:hover{color:var(--text)}#variants button[aria-selected=true]{background:#ffffff24;color:var(--text)}.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:8px 0 4px}.tabs button{display:grid;justify-items:center;gap:3px;padding:7px 4px 6px;border:none;background:none;border-radius:10px;font-size:11px;font-weight:600;color:var(--muted)}.tabs button:hover{color:var(--text);background:#ffffff0d}.tabs button[aria-selected=true]{color:var(--accent);background:#8ef0ff24}.tabs svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}[data-active-tab=look] [data-tab]:not([data-tab=look]),[data-active-tab=show] [data-tab]:not([data-tab=show]),[data-active-tab=presets] [data-tab]:not([data-tab=presets]),[data-active-tab=setup] [data-tab]:not([data-tab=setup]){display:none}h3>button.fold{display:flex;align-items:center;gap:6px;width:100%;padding:0;border:none;border-radius:0;background:none;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;text-align:left}h3>button.fold:hover{background:none;color:var(--text)}button.fold svg{flex:none;width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transform:rotate(90deg);transition:transform .15s}button.fold[aria-expanded=false] svg{transform:none}.fold-count{margin-left:auto;padding-left:8px;color:var(--accent);text-transform:none;letter-spacing:0;white-space:nowrap}.folded>:not(h3){display:none}section.folded>h3,#panel section.folded>h3{margin-bottom:0}#panel{position:fixed;top:72px;right:12px;bottom:72px;width:320px;max-width:calc(100vw - 24px);overflow-y:auto;padding:16px 18px;background:var(--glass-strong);border:1px solid var(--line);border-radius:16px;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);z-index:11;scrollbar-width:thin}#panel[hidden]{display:none}.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}.panel-head h2{margin:0;font-size:16px}#panel-tabs{position:sticky;top:-16px;z-index:1;margin:8px -18px 0;padding:8px 18px 6px;background:#0e0e14}#panel section{padding:12px 0;border-top:1px solid var(--line)}.section-head{display:flex;align-items:baseline;justify-content:space-between}#panel h3{margin:0 0 10px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}.param{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 10px;margin:0 0 12px}.param-name{font-size:13px}.param-sub{margin-left:12px;padding-left:10px;border-left:2px solid var(--line)}.param output{font:12px ui-monospace,monospace;color:var(--muted)}.param-range input{grid-column:1 / -1}.param select{background:#ffffff0f;border:1px solid var(--line);border-radius:8px;padding:5px 8px;max-width:170px}.param select option{background:#15151c}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:18px;background:none;margin:0}input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:#ffffff24}input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:#ffffff24}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5px;border-radius:50%;background:var(--accent);border:none}input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);border:none}input.switch{-webkit-appearance:none;appearance:none;width:34px;height:20px;border-radius:999px;background:#ffffff29;position:relative;cursor:pointer;margin:0;transition:background .15s}input.switch:after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .15s}input.switch:checked{background:var(--accent)}input.switch:checked:after{transform:translate(14px);background:#0a0a10}.filter-slots{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:8px}.filter-slot{border:1px solid var(--line);border-radius:10px;background:#ffffff08;transition:transform .15s,opacity .15s}.filter-slot.lifted{position:relative;z-index:1;transition:none;background:var(--glass-strong);border-color:var(--accent);box-shadow:0 8px 24px #00000080}.filter-slot-head{display:flex;align-items:center;gap:8px;padding:4px 4px 4px 2px}.filter-name{flex:1;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.filter-slot-head button.icon{flex:none;width:26px;height:28px;border:none;background:none;border-radius:6px;color:var(--muted)}.filter-slot-head button.icon:hover{background:#ffffff1a;color:var(--text)}.filter-slot-head button.icon:disabled{opacity:.3;cursor:default;background:none}.filter-slot-head button.icon svg{width:14px;height:14px}.filter-slot-head button.filter-grip{cursor:grab;touch-action:none}.filter-slot-head button.filter-grip svg{fill:currentColor;stroke:none}.filter-slot.lifted button.filter-grip{cursor:grabbing}.filter-slot-body{padding:2px 10px 0 12px}.filter-slot-body[hidden]{display:none}.filter-slot.off .filter-name,.filter-slot.off .filter-slot-body{opacity:.45}.filter-thumb{flex:none;height:36px;width:auto;max-width:72px;border-radius:4px;background:#000;box-shadow:0 0 0 1px var(--line)}.filter-chain:not(.thumbs-live) .filter-thumb{display:none}.filter-slot.off .filter-thumb{opacity:.6}.filter-chain .preset-empty{margin:0 0 10px}.layer-row.editing{border-color:#8ef0ff73;background:#8ef0ff0f}.filter-slot-head button.layer-name{border:none;background:none;padding:4px 6px;border-radius:6px;text-align:left;color:var(--text);font-weight:600}.filter-slot-head button.layer-name:hover{background:#ffffff14}.layer-row.editing button.layer-name{color:var(--accent)}.layer-row .filter-slot-body{padding-bottom:2px}.layer-add{width:100%;padding:7px 10px;border-radius:8px;background:#ffffff0f}.layer-note{color:var(--muted);font-size:12px;line-height:1.6;margin:10px 0 0}.layer-thumb{height:42px;max-width:76px;cursor:pointer}.layer-list:not(.thumbs-live) .layer-thumb{display:none}.layer-row.off .layer-thumb{opacity:.35;filter:grayscale(.6)}.thumbs-switch{margin-bottom:8px}select.filter-add{width:100%;background:#ffffff0f;border:1px dashed var(--line);border-radius:8px;padding:6px 8px;cursor:pointer}select.filter-add:disabled{cursor:default;opacity:.5}select.filter-add option,select.filter-add optgroup{background:#15151c}#player-slot audio{width:100%;height:36px;margin-top:4px}.source-help{margin:2px 0 8px;font-size:12px;line-height:1.6;color:var(--muted)}.source-help summary{cursor:pointer;width:fit-content}.source-help summary:hover,.source-help[open] summary{color:var(--text)}.source-help p{margin:6px 0}.source-help ul{margin:0;padding-left:18px}.source-help li{margin:3px 0}.source-help b,.source-help i{color:var(--text)}.source-help code{font:11px ui-monospace,monospace}#corner{position:fixed;left:16px;bottom:72px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;z-index:9}#hud{width:150px;padding:10px 12px;background:var(--glass);border:1px solid var(--line);border-radius:var(--radius);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font:10px ui-monospace,monospace;color:var(--muted)}#hud[hidden]{display:none}.meter{display:flex;align-items:center;gap:8px;margin-bottom:5px}.meter i{flex:1;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--accent) var(--v, 0%),rgba(255,255,255,.1) var(--v, 0%))}.hud-row{display:flex;align-items:center;gap:8px;margin-top:7px}.beat-dot{flex:none;width:8px;height:8px;border-radius:50%;background:color-mix(in srgb,var(--accent-2),#fff calc(var(--d, 0) * 75%));opacity:calc(.15 + max(var(--p, 0),var(--d, 0))*.85);box-shadow:0 0 calc(var(--p, 0) * 12px + var(--d, 0) * 18px) calc(var(--d, 0) * 4px) var(--accent-2);transform:scale(calc(1 + var(--d, 0) * .9))}.beat-row{gap:10px}.beat-count{font-variant-numeric:tabular-nums;color:color-mix(in srgb,var(--muted),var(--text) calc(var(--d, 0) * 100%))}#hud .beat-count{font-size:12px}#fps{margin-left:auto}.holding{opacity:.5;font-style:italic}#credit{display:flex;align-items:center;gap:6px;padding-left:2px;font-size:11px;color:var(--muted);white-space:nowrap}#credit a{color:var(--text);text-decoration:none}#credit a:hover{color:var(--accent);text-decoration:underline}.beta{padding:1px 6px;border:1px solid color-mix(in srgb,var(--accent-2),transparent 40%);border-radius:999px;color:var(--accent-2);font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}#toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.96);padding:14px 26px;border-radius:14px;background:var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-size:20px;font-weight:600;letter-spacing:-.01em;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:15;text-align:center;max-width:calc(100vw - 32px)}#toast small{display:block;font-size:13px;font-weight:400;color:var(--muted)}#toast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}@media(max-width:720px){.brand{display:none}#topbar{padding-left:6px}#families{justify-content:flex-start}#hud{display:none}#panel{top:64px;bottom:64px;left:12px;width:auto}}.preset-save{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-bottom:10px}.preset-save-row{display:flex;gap:8px;align-items:center}.preset-save-row[hidden]{display:none}.preset-what>span{font-size:12px;color:var(--muted)}.preset-what .layer-switch button{padding:4px 10px}.preset-save input{flex:1;min-width:0;background:#ffffff0f;border:1px solid var(--line);border-radius:8px;padding:6px 10px}.preset-save input::placeholder{color:var(--muted)}.preset-save button{padding:6px 14px;border-radius:8px;white-space:nowrap}.preset-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}.preset{position:relative;overflow:hidden;display:flex;align-items:center;gap:2px;border-radius:10px;border:1px solid transparent}.preset.playing:after{content:"";position:absolute;left:0;bottom:0;height:2px;width:calc(var(--progress, 0) * 100%);background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .1s linear}.preset:hover{background:#ffffff0a}.preset.active{border-color:#8ef0ff59;background:#8ef0ff0f}.preset-load{flex:1;min-width:0;overflow:hidden;display:flex;align-items:center;gap:6px;text-align:left;border:none;background:none;border-radius:10px;padding:7px 6px}.preset-load:hover{background:none}.preset-load kbd{flex:none;font-size:10px;padding:1px 4px;color:var(--muted)}.preset-kind{flex:none;display:inline-flex;align-items:center;gap:2px;color:var(--muted)}.preset-kind svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}.preset-kind small{font-size:10px;font-weight:600}.preset-name{flex:1;min-width:3em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.preset-badge{flex:none;font-size:9px;text-transform:uppercase;letter-spacing:.05em;padding:1px 5px;border-radius:999px;color:var(--accent);border:1px solid rgba(142,240,255,.4)}.preset.modified .preset-badge{color:#ffd98a;border-color:#ffd98a73}.preset-tools{display:flex;flex:none;opacity:.35;transition:opacity .15s}.preset:hover .preset-tools,.preset:focus-within .preset-tools,.preset.active .preset-tools{opacity:1}#panel .preset-tools{display:none}#panel .preset:hover .preset-tools,#panel .preset:focus-within .preset-tools{display:flex}#panel .preset.modified .preset-tools{display:flex}#panel .preset.modified:not(:hover,:focus-within) .preset-tools button:not(.attention){display:none}#panel .preset:is(:hover,:focus-within) .preset-badge{display:none}.preset-hold{flex:none;display:inline-flex;align-items:center;gap:3px;padding:3px 6px;border:none;border-radius:6px;background:none;color:var(--muted);font:11px ui-monospace,monospace}.preset-hold svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}.preset-hold small{font-size:9px;opacity:.7}.preset-hold:hover{background:#ffffff1a;color:var(--text)}.preset-hold.custom{color:var(--accent);background:#8ef0ff14}.preset-tools button.icon{width:24px;height:28px;border:none;background:none;border-radius:6px}.preset-tools button.icon:hover{background:#ffffff1a}.preset-tools button.icon svg{width:14px;height:14px}.preset-tools button.attention{color:#ffd98a}.preset-empty{margin:4px 0 0;color:var(--muted);font-size:12px;line-height:1.6}.preset-empty[hidden]{display:none}.preset-io{display:flex;gap:16px;margin-top:10px}.preset-io [hidden]{display:none}.fade-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px}.image-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}.image-tile{position:relative}.image-show{display:grid;gap:4px;width:100%;padding:4px;border-radius:8px;text-align:left}.image-show img{width:100%;aspect-ratio:16 / 9;object-fit:contain;background:#000;border-radius:4px;display:block}.image-name{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.image-tile.active .image-show{border-color:var(--accent);background:#8ef0ff14;color:var(--text)}button.image-delete{position:absolute;top:6px;right:6px;width:22px;height:22px;padding:0;background:#0009;opacity:0;transition:opacity .15s}button.image-delete svg{width:12px;height:12px}.image-tile:hover .image-delete,.image-delete:focus-visible{opacity:1}.image-actions{display:flex;gap:8px;margin-top:10px}.image-actions button{flex:1;padding:6px 10px;border-radius:8px;white-space:nowrap}.image-actions button:disabled{opacity:.4;cursor:default}.image-picker{margin:0 0 14px}.image-picker>.param-name{display:block;margin-bottom:6px}.image-picker .image-grid{grid-template-columns:repeat(auto-fill,minmax(76px,1fr))}.image-picker .preset-empty{margin:0}.image-picker .image-actions{margin-top:8px}.image-picker[hidden]{display:none}.backup-note{color:var(--muted);font-size:12px;margin:0 0 10px;line-height:1.5}.backup-note+.image-actions{margin-top:0}.image-actions+.backup-note{margin:10px 0 0}