: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-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}.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-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;align-items:center;gap:8px;height:220px}.cp-fader-track{position:relative;width:56px;flex:1;background:#00000059;border:1px solid var(--cp-grid-line);touch-action:none}.cp-fader-fill{position:absolute;left:2px;right:2px;bottom:2px;background:linear-gradient(180deg,var(--cp-neon-1),rgba(34,230,242,.3))}.cp-fader-thumb{position:absolute;left:-6px;right:-6px;height: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-xy-pad{position:relative;width:100%;aspect-ratio:1;max-width:320px;background:var(--cp-surface);border:1px solid var(--cp-grid-line);touch-action:none;background-image:linear-gradient(var(--cp-grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--cp-grid-line) 1px,transparent 1px);background-size:20% 20%}.cp-xy-cross{position:absolute;width:24px;height:24px;transform:translate(-50%,-50%);pointer-events:none}.cp-xy-cross:before,.cp-xy-cross:after{content:"";position:absolute;background:var(--cp-neon-2);box-shadow:0 0 8px var(--cp-neon-2)}.cp-xy-cross:before{left:0;right:0;top:50%;height:1px}.cp-xy-cross:after{top:0;bottom:0;left:50%;width:1px}.cp-fx-row{display:grid;grid-template-columns:repeat(3,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-tap{display:flex;flex-direction:column;gap:8px;align-items:stretch}.cp-tap-btn{background:var(--cp-surface);border:1px solid var(--cp-neon-1);color:var(--cp-neon-1);min-height:56px;text-transform:uppercase;letter-spacing:.2em;font-size:13px;cursor:pointer}.cp-tap-btn:active{box-shadow:0 0 14px var(--cp-neon-1)}.cp-tap-status{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--cp-dim);letter-spacing:.1em}.cp-tap-reset{background:transparent;border:1px solid var(--cp-grid-line);color:var(--cp-dim);padding:6px 10px;font-size:10px;letter-spacing:.15em;text-transform:uppercase;cursor:pointer}.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-blackout{background:var(--cp-surface);border:2px solid var(--cp-amber);color:var(--cp-amber);min-height:84px;width:100%;text-transform:uppercase;letter-spacing:.3em;font-size:16px;cursor:pointer;position:relative;overflow:hidden}.cp-blackout--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-blackout--active{background:var(--cp-amber);color:#050505;animation:cp-glitch .32s steps(2,end);box-shadow:0 0 30px var(--cp-amber)}.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)}@media(min-width:1024px){.cp-main{display:grid;grid-template-columns:320px 1fr 340px;gap:16px;align-items:start}.cp-col{display:flex;flex-direction:column;gap:16px}.cp-col--center{display:flex;flex-direction:column;align-items:center;gap:24px}.cp-fader-wrap{height:320px}.cp-xy-pad{max-width:480px}.cp-scene:hover,.cp-palette:hover,.cp-fx-btn:hover,.cp-tap-btn:hover,.cp-btn:hover{border-color:var(--cp-neon-1)}}