:root{--cp-bg: #0a0e12;--cp-surface: #10161d;--cp-neon-1: #22e6f2;--cp-neon-2: #ff2ea6;--cp-amber: #ffb020;--cp-text: #dfe7ea;--cp-dim: #5c6a75;--cp-grid-line: rgba(34, 230, 242, .12);--cp-danger: #ff3b3b;--cp-chamfer: 12px}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--cp-bg);color:var(--cp-text);font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;-webkit-tap-highlight-color:transparent}body{min-height:100dvh;background-image:repeating-linear-gradient(0deg,rgba(34,230,242,.025) 0px,rgba(34,230,242,.025) 1px,transparent 1px,transparent 3px)}#app{min-height:100dvh;display:flex;flex-direction:column}button{font-family:inherit;color:inherit}input{font-family:inherit}.cp-label{text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:var(--cp-dim)}.cp-mono{font-variant-numeric:tabular-nums}.cp-chamfer{clip-path:polygon(var(--cp-chamfer) 0,100% 0,100% calc(100% - var(--cp-chamfer)),calc(100% - var(--cp-chamfer)) 100%,0 100%,0 var(--cp-chamfer))}.cp-panel{background:var(--cp-surface);border:1px solid var(--cp-grid-line);padding:12px}.cp-join{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:24px;padding-top:max(24px,env(safe-area-inset-top));padding-bottom:max(24px,env(safe-area-inset-bottom))}.cp-join__title{text-transform:uppercase;letter-spacing:.3em;font-size:13px;color:var(--cp-neon-1);text-shadow:0 0 8px rgba(34,230,242,.5)}.cp-join__boxes{display:flex;gap:10px}.cp-join__box{width:56px;height:68px;background:var(--cp-surface);border:1px solid var(--cp-grid-line);color:var(--cp-neon-1);font-size:30px;text-align:center;text-transform:uppercase;caret-color:var(--cp-neon-1)}.cp-join__box:focus{outline:none;border-color:var(--cp-neon-1);box-shadow:0 0 12px #22e6f273}.cp-join__error{color:var(--cp-amber);letter-spacing:.15em;font-size:12px;text-transform:uppercase;min-height:1.4em}.cp-join--success .cp-join__title{animation:cp-glitch .32s steps(2,end)}@keyframes cp-glitch{0%{transform:translate(0);opacity:1}20%{transform:translate(-2px,1px);opacity:.6}40%{transform:translate(2px,-1px);opacity:1}60%{transform:translate(-1px);opacity:.7}to{transform:translate(0);opacity:1}}.cp-shell{min-height:100dvh;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom)}.cp-topbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid var(--cp-grid-line);flex-wrap:wrap}.cp-status{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.15em;text-transform:uppercase}.cp-status__dot{width:8px;height:8px;border-radius:50%;background:var(--cp-dim)}.cp-status--online .cp-status__dot{background:var(--cp-neon-1);box-shadow:0 0 6px var(--cp-neon-1)}.cp-status--offline .cp-status__dot{background:var(--cp-danger)}.cp-gear{background:transparent;border:1px solid var(--cp-grid-line);color:var(--cp-text);width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer}.cp-mode{display:flex;gap:0;border:1px solid var(--cp-neon-1);overflow:hidden}.cp-mode button{background:transparent;border:none;padding:8px 16px;text-transform:uppercase;letter-spacing:.2em;font-size:12px;color:var(--cp-dim);cursor:pointer}.cp-mode button.cp-mode__active{background:var(--cp-neon-1);color:#05080a;text-shadow:none}.cp-banner--offline{background:#ffb0201f;border-bottom:1px solid var(--cp-amber);color:var(--cp-amber);text-align:center;padding:8px;text-transform:uppercase;letter-spacing:.2em;font-size:12px}.cp-main{flex:1;display:flex;flex-direction:column;gap:14px;padding:12px 12px 24px;overflow-y:auto}.cp-section-title{text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:var(--cp-dim);margin:0 0 8px}.cp-meters{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-items:end}.cp-meter{display:flex;flex-direction:column;align-items:center;gap:6px}.cp-meter__bar{width:100%;height:72px;display:flex;flex-direction:column-reverse;gap:2px;background:#0000004d;border:1px solid var(--cp-grid-line);padding:2px}.cp-meter__seg{flex:1;background:#5c6a754d}.cp-meter__seg--on{background:var(--cp-neon-1);box-shadow:0 0 4px var(--cp-neon-1)}.cp-meter--level .cp-meter__seg--on{background:var(--cp-neon-2);box-shadow:0 0 4px var(--cp-neon-2)}.cp-meter__label{font-size:10px;letter-spacing:.15em;color:var(--cp-dim);text-transform:uppercase}.cp-bpm-row{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}.cp-bpm{font-size:22px;color:var(--cp-neon-1);text-shadow:0 0 6px rgba(34,230,242,.4)}.cp-bpm-conf{width:8px;height:8px;border-radius:50%;background:var(--cp-dim)}.cp-energy-badge{padding:3px 10px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--cp-grid-line)}.cp-energy-badge--chill{color:var(--cp-neon-1);border-color:var(--cp-neon-1)}.cp-energy-badge--groove{color:var(--cp-neon-2);border-color:var(--cp-neon-2)}.cp-energy-badge--peak{color:var(--cp-amber);border-color:var(--cp-amber)}.cp-feed-row{margin-top:6px}.cp-feed-label{font-size:11px;color:var(--cp-neon-2);letter-spacing:.15em;opacity:.85}.cp-beat-tick{width:10px;height:10px;background:var(--cp-dim);transition:none}.cp-beat-tick--pulse{background:var(--cp-neon-2);box-shadow:0 0 10px var(--cp-neon-2)}.cp-scenes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.cp-scene{background:var(--cp-surface);border:1px solid var(--cp-grid-line);color:var(--cp-text);padding:12px 8px;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;text-transform:uppercase;letter-spacing:.12em;font-size:11px;position:relative;overflow:hidden}.cp-scene__glyph{font-size:16px;color:var(--cp-neon-1)}.cp-scene--active{border-color:var(--cp-neon-1);box-shadow:0 0 10px #22e6f259;color:var(--cp-neon-1)}.cp-scene__thumb{position:absolute;inset:0;opacity:.5;pointer-events:none}.cp-scene__thumb svg{width:100%;height:100%}.cp-scene--active .cp-scene__thumb{opacity:.65}.cp-palettes{display:flex;flex-direction:column;gap:6px}.cp-palette{display:flex;align-items:center;gap:8px;background:var(--cp-surface);border:1px solid var(--cp-grid-line);padding:6px;cursor:pointer}.cp-palette--active{border-color:var(--cp-neon-2);box-shadow:0 0 10px #ff2ea64d}.cp-palette__swatches{display:flex;flex:1;height:22px}.cp-palette__swatch{flex:1}.cp-palette__label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;width:84px;text-align:right;color:var(--cp-dim)}.cp-palette--active .cp-palette__label{color:var(--cp-neon-2)}.cp-fader-wrap{display:flex;flex-direction:column;gap:4px;background:var(--cp-surface);border:1px solid var(--cp-grid-line);padding:12px}.cp-fader-header{display:flex;justify-content:space-between;align-items:center}.cp-fader-track{position:relative;width:100%;height:28px;background:#00000059;border:1px solid var(--cp-grid-line);touch-action:none}.cp-fader-fill{position:absolute;top:2px;bottom:2px;left:2px;background:linear-gradient(90deg,rgba(34,230,242,.3),var(--cp-neon-1))}.cp-fader-thumb{position:absolute;top:-4px;bottom:-4px;width:10px;background:var(--cp-neon-1);box-shadow:0 0 8px var(--cp-neon-1)}.cp-fader-value{font-size:13px;color:var(--cp-neon-1)}.cp-fx-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.cp-fx-btn{background:var(--cp-surface);border:1px solid var(--cp-grid-line);color:var(--cp-text);min-height:56px;text-transform:uppercase;letter-spacing:.15em;font-size:12px;cursor:pointer;user-select:none}.cp-fx-btn--held{background:var(--cp-neon-2);color:#05080a;box-shadow:0 0 16px var(--cp-neon-2)}.cp-fx-btn--blackout.cp-fx-btn--held{background:var(--cp-amber);box-shadow:0 0 16px var(--cp-amber)}.cp-fx-btn--arming{animation:cp-arm-fill .4s linear forwards}@keyframes cp-arm-fill{0%{box-shadow:inset 0 0 #ffb02080}to{box-shadow:inset 0 0 40px 10px #ffb02099}}.cp-ticker{display:flex;gap:6px}.cp-ticker input{flex:1;background:var(--cp-surface);border:1px solid var(--cp-grid-line);color:var(--cp-text);padding:10px;min-width:0}.cp-ticker input:focus{outline:none;border-color:var(--cp-neon-1)}.cp-btn{background:transparent;border:1px solid var(--cp-neon-1);color:var(--cp-neon-1);padding:0 14px;text-transform:uppercase;letter-spacing:.15em;font-size:11px;cursor:pointer;min-height:44px}.cp-btn--dim{border-color:var(--cp-grid-line);color:var(--cp-dim)}.cp-queue{display:flex;flex-direction:column;gap:6px}.cp-queue__row{display:flex;align-items:center;gap:8px;background:var(--cp-surface);border:1px solid var(--cp-grid-line);padding:8px}.cp-queue__kw{flex:1;font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cp-queue__age{font-size:10px;color:var(--cp-dim)}.cp-queue__empty{color:var(--cp-dim);font-size:12px;letter-spacing:.1em;text-align:center;padding:12px}.cp-queue__btn{border:1px solid var(--cp-grid-line);background:transparent;color:var(--cp-text);min-height:36px;padding:0 10px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}.cp-queue__btn--approve{border-color:var(--cp-neon-1);color:var(--cp-neon-1)}.cp-queue__btn--veto{border-color:var(--cp-amber);color:var(--cp-amber)}.cp-toggle-row{display:flex;align-items:center;justify-content:space-between;margin-top:10px}.cp-toggle{width:44px;height:24px;background:var(--cp-surface);border:1px solid var(--cp-grid-line);position:relative;cursor:pointer}.cp-toggle__knob{position:absolute;top:2px;left:2px;width:18px;height:18px;background:var(--cp-dim);transition:none}.cp-toggle--on{border-color:var(--cp-neon-1)}.cp-toggle--on .cp-toggle__knob{left:22px;background:var(--cp-neon-1);box-shadow:0 0 6px var(--cp-neon-1)}.cp-drawer-backdrop{position:fixed;inset:0;background:#0009;z-index:20}.cp-drawer{position:fixed;top:0;right:0;bottom:0;width:min(320px,86vw);background:var(--cp-surface);border-left:1px solid var(--cp-neon-1);z-index:21;padding:16px;padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:16px;overflow-y:auto}.cp-drawer__title{text-transform:uppercase;letter-spacing:.2em;font-size:13px;color:var(--cp-neon-1);display:flex;justify-content:space-between;align-items:center}.cp-drawer__close{background:transparent;border:1px solid var(--cp-grid-line);color:var(--cp-text);width:32px;height:32px;cursor:pointer}.cp-field{display:flex;flex-direction:column;gap:6px}.cp-field input[type=text],.cp-field input[type=password]{background:var(--cp-bg);border:1px solid var(--cp-grid-line);color:var(--cp-text);padding:10px}.cp-field input:focus{outline:none;border-color:var(--cp-neon-1)}.cp-synth-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.cp-synth-chip{background:var(--cp-surface);border:1px solid var(--cp-grid-line);color:var(--cp-dim);font:inherit;font-size:10px;letter-spacing:.12em;padding:5px 10px;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:2px;transition:border-color .15s,color .15s;touch-action:manipulation}.cp-synth-chip__label{font-size:8px;opacity:.5;letter-spacing:.2em}.cp-synth-chip__value{color:var(--cp-text);font-size:11px}.cp-synth-chip--locked{border-color:var(--cp-neon-2);color:var(--cp-neon-2)}.cp-synth-chip--locked .cp-synth-chip__value{color:var(--cp-neon-2)}.cp-synth-reroll{margin-top:10px;width:100%;letter-spacing:.3em;text-indent:.3em}.cp-col-ops{display:contents}@media(min-width:640px){.cp-shell{height:100dvh;overflow:hidden}.cp-main{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:min-content;gap:16px;align-items:start;align-content:start;overflow-y:auto}[data-panel=meters],[data-panel=fader],[data-panel=scenes],[data-panel=palettes]{grid-column:1}.cp-col-ops{display:flex;flex-direction:column;gap:16px;grid-column:2;grid-row:1;align-self:start}.cp-scenes{grid-template-columns:repeat(3,1fr)}.cp-scene{padding:8px 6px;min-height:48px;font-size:10px}.cp-scene__glyph{font-size:14px}.cp-scene:hover,.cp-palette:hover,.cp-fx-btn:hover,.cp-btn:hover{border-color:var(--cp-neon-1)}}@media(min-width:1024px){.cp-main{grid-template-columns:auto 1fr auto;grid-template-rows:auto;align-content:start;max-width:1400px;margin:0 auto}[data-panel=meters]{grid-column:1;grid-row:1}[data-panel=fader]{grid-column:1;grid-row:2}[data-panel=palettes]{grid-column:1;grid-row:3}[data-panel=scenes]{grid-column:2;grid-row:1 / 5}.cp-col-ops{grid-column:3;grid-row:1 / 5}.cp-scenes{grid-template-columns:repeat(4,1fr)}.cp-palettes{display:grid;grid-template-columns:1fr;gap:6px}}@media(min-width:1440px){.cp-main{grid-template-columns:minmax(180px,auto) 1fr minmax(220px,320px);max-width:1800px}.cp-scenes{grid-template-columns:repeat(5,1fr)}}@media(min-width:1800px){.cp-main{grid-template-columns:minmax(160px,auto) 1fr minmax(200px,280px) minmax(220px,320px);max-width:2400px}[data-panel=meters]{grid-column:1;grid-row:1}[data-panel=fader]{grid-column:1;grid-row:2}[data-panel=scenes]{grid-column:2;grid-row:1 / 5}[data-panel=palettes]{grid-column:3;grid-row:1 / 5}.cp-col-ops{grid-column:4;grid-row:1 / 5}.cp-scenes{grid-template-columns:repeat(6,1fr)}.cp-palettes{display:flex;flex-direction:column;gap:6px}}