html,body.control{height:auto;min-height:100%;overflow:auto}body.control{background:radial-gradient(ellipse at 20% -10%,rgba(142,240,255,.08),transparent 50%),radial-gradient(ellipse at 90% 0%,rgba(197,139,255,.1),transparent 45%),#07070b;padding:0 16px 32px}.c-top{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:14px 0;background:linear-gradient(#07070b 70%,transparent)}.c-top .brand span{color:var(--muted);font-weight:500}.c-actions{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}.status{display:inline-flex;align-items:center;gap:8px;padding:4px 12px;border-radius:999px;border:1px solid var(--line);font-size:12px;color:var(--muted)}.status:before{content:"";width:8px;height:8px;border-radius:50%;background:#ff8a8a}.status[data-state=connected]{color:var(--text)}.status[data-state=connected]:before{background:#6dffa8;box-shadow:0 0 8px #6dffa8}.banner{margin:0 0 16px;padding:12px 16px;border-radius:var(--radius);background:#ffc85a1a;border:1px solid rgba(255,200,90,.3);color:#ffe2a8}.banner[hidden]{display:none}.c-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;align-items:start}.c-global{display:contents}#c-tabs{grid-column:1 / -1;max-width:480px;margin:0}.card{padding:16px 18px;background:var(--glass-strong);border:1px solid var(--line);border-radius:16px}.card h3{margin:0 0 12px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}.card .param select{max-width:210px}.c-stage{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:16px 24px;align-items:flex-start}.c-preview-col{flex:0 1 460px;min-width:260px;display:grid;gap:10px}.c-picker{flex:1 1 320px;display:grid;gap:12px;align-content:start}#c-layer-switch:has(>.layer-switch[hidden]){display:none}.c-preview-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.c-mode{display:inline-flex;padding:3px;border:1px solid var(--line);border-radius:999px;background:#ffffff0a}.c-mode button{border:none;background:none;padding:6px 18px;font-weight:600;color:var(--muted)}.c-mode button[aria-checked=true]{color:#0a0a10;background:var(--accent)}#c-mode-cue[aria-checked=true]{background:var(--cue)}.c-preview-switch{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);cursor:pointer}.c-preview-frame{position:relative;aspect-ratio:var(--aspect, 16 / 9);max-height:46vh;border-radius:10px;overflow:hidden;background:#000;border:1px solid var(--line)}.c-preview-frame canvas{display:block;width:100%;height:100%}.c-preview-frame.off canvas{visibility:hidden}.c-preview-tag{position:absolute;top:8px;left:8px;padding:2px 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#0a0a10;background:var(--accent)}body.cue .c-preview-tag{background:var(--cue)}.c-preview-frame.off .c-preview-tag{display:none}.c-preview-msg{position:absolute;inset:0;display:none;place-items:center;margin:0;color:var(--muted);font-size:13px;text-align:center;padding:16px}.c-preview-frame.off .c-preview-msg{display:grid}.c-golive{display:none;gap:8px;flex-wrap:wrap}body.cue .c-golive{display:flex}.c-golive .primary{background:var(--cue)}.c-golive-status{margin:0;font-size:13px;color:var(--cue);display:flex;gap:12px;align-items:baseline}.c-golive-status[hidden]{display:none}.cue-note{display:none;margin:0 0 16px;padding:10px 16px;border-radius:var(--radius);color:var(--cue);background:#ffb34714;border:1px solid rgba(255,179,71,.35)}body.cue .cue-note{display:block}body.cue .cue-scope{border-color:#ffb3478c;box-shadow:0 0 0 1px #ffb34740}#c-families,#c-variants{display:flex;flex-wrap:wrap;gap:8px}#c-families button{padding:12px 18px;font-size:15px;font-weight:600;border-radius:12px;color:var(--muted)}#c-families button kbd{margin-right:4px;opacity:.7}#c-families button[aria-selected=true]{color:#0a0a10;background:linear-gradient(135deg,var(--accent),var(--accent-2));border-color:transparent}#c-families button[aria-selected=true] kbd{border-color:#00000040;background:#0000001a}#c-variants button{padding:9px 16px;color:var(--muted)}#c-variants button[aria-selected=true]{color:var(--text);background:#ffffff29;border-color:#ffffff4d}.c-meters{margin-top:8px;font:11px ui-monospace,monospace;color:var(--muted)}.c-meters .meter{gap:10px;margin-bottom:8px}.c-meters .meter span{width:36px}.c-meters .meter i{height:6px;border-radius:3px}.c-beat{display:flex;align-items:center;gap:12px;font:15px ui-monospace,monospace}.c-beat .beat-dot{width:12px;height:12px;margin-left:4px}.c-beat .beat-count{min-width:6ch}.c-beat button{font:600 14px var(--font)}#cm-fps{margin-left:auto}.note{color:var(--muted);font-size:12px;line-height:1.7;margin:14px 0 0}.c-keys dl{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:0;font-size:13px}.c-keys dd{margin:0;color:var(--muted)}body.disconnected .c-grid{opacity:.45;pointer-events:none}.c-toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%);padding:10px 18px;border-radius:999px;background:var(--glass-strong);border:1px solid var(--line);opacity:0;transition:opacity .25s;pointer-events:none;max-width:calc(100vw - 32px)}.c-toast.show{opacity:1}