:root{--bg:#14102a;--panel:#221b45;--panel-border:#3a3066;--muted:#a9a3c9;--stop:#dc2626;--ok:#22c55e;--accent:#7c3aed;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{background:var(--bg);color:#fff;min-height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}h1{margin:0 0 1rem;font-size:1.5rem}h2{margin:0;font-size:1.15rem}code{background:#ffffff1f;border-radius:4px;padding:.1em .35em}.muted{color:var(--muted)}button{font:inherit;color:inherit;cursor:pointer}.banner{background:var(--panel);border-radius:10px;margin:0;padding:.6rem .9rem}.banner.error{background:#7f1d1d;border:1px solid #ef4444}.center-screen{min-height:100dvh;padding:calc(1.5rem + env(safe-area-inset-top)) calc(1.5rem + env(safe-area-inset-right)) calc(1.5rem + env(safe-area-inset-bottom)) calc(1.5rem + env(safe-area-inset-left));text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:1.25rem;display:flex}.center-screen h1,.center-screen p{margin:0}.notice{background:var(--panel);border:1px solid var(--panel-border);border-radius:10px;max-width:32rem;padding:1rem}.login-button{color:#04210e;background:#1db954;border:0;border-radius:16px;min-height:72px;padding:0 2.5rem;font-size:1.4rem;font-weight:700}.board{height:100dvh;padding:calc(.6rem + env(safe-area-inset-top)) calc(.6rem + env(safe-area-inset-right)) calc(.6rem + env(safe-area-inset-bottom)) calc(.6rem + env(safe-area-inset-left));touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;flex-direction:column;gap:.6rem;display:flex;overflow:hidden}.status-strip{flex:none;align-items:center;gap:.5rem;min-height:44px;display:flex}.now-playing{white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;font-size:clamp(1rem,2.4vmin,1.5rem);font-weight:600;overflow:hidden}.device-chip,.gear{border:1px solid var(--panel-border);background:var(--panel);border-radius:999px;align-items:center;min-height:44px;font-size:.95rem;display:inline-flex}.device-chip{white-space:nowrap;text-overflow:ellipsis;gap:.5rem;max-width:55%;padding:0 .9rem;overflow:hidden}.gear{flex:none;justify-content:center;width:44px;padding:0;font-size:1.3rem}.icon{vertical-align:-.125em;flex:none}.dot{background:var(--ok);border-radius:50%;flex:none;width:.7rem;height:.7rem}.dot.missing{background:var(--stop)}.dot.pending{background:var(--muted)}.board .banner{flex:none;font-size:clamp(1rem,2.4vmin,1.4rem)}.grid{flex-direction:column;flex:1;gap:.6rem;min-height:0;display:flex}.grid-row{flex:1 1 0;gap:.6rem;min-height:0;display:flex}.grid-row>.sound-button{flex:1 1 0}.sound-button{background:var(--color);color:#fff;border:3px solid #0000;border-radius:20px;flex-direction:column;justify-content:center;align-items:center;gap:.25rem;min-width:0;min-height:0;padding:.5rem;display:flex;overflow:hidden}.sound-button:active:not(:disabled){filter:brightness(1.2)}.sound-button:disabled{opacity:.55;cursor:default}.sound-button .label{text-align:center;overflow-wrap:anywhere;font-size:clamp(1.4rem,6vmin,3.5rem);font-weight:800;line-height:1.1}.sound-button .sublabel{opacity:.85;font-size:clamp(.9rem,2.4vmin,1.4rem)}.sound-button .sublabel.playing{opacity:1;font-weight:700}.sound-button.active{box-shadow:0 0 0 3px #ffffff8c, 0 0 12px 2px var(--color);border-color:#fff;animation:1.6s ease-in-out infinite pulse}@keyframes pulse{50%{box-shadow:0 0 0 5px #ffffff4d, 0 0 16px 3px var(--color);filter:brightness(1.15)}}@media (prefers-reduced-motion:reduce){.sound-button.active{animation:none}}.stop-button{background:var(--stop);color:#fff;letter-spacing:.08em;border:0;border-radius:20px;flex:0 0 25%;width:100%;font-size:clamp(2rem,10vmin,5rem);font-weight:900}.stop-button:active{background:#ef4444}.setup{max-width:720px;padding:calc(1rem + env(safe-area-inset-top)) calc(1rem + env(safe-area-inset-right)) calc(2rem + env(safe-area-inset-bottom)) calc(1rem + env(safe-area-inset-left));margin:0 auto}.setup section{flex-direction:column;gap:.75rem;margin-bottom:2rem;display:flex}.setup p{margin:0}.setup input[type=text],.setup select,.setup button{min-height:44px;font-size:16px}.setup input[type=text],.setup select{border:1px solid var(--panel-border);color:#fff;background:#0f0c20;border-radius:10px;width:100%;padding:0 .75rem}.setup button{border:1px solid var(--panel-border);background:var(--panel);border-radius:10px;padding:0 1.1rem}.setup button.primary{background:var(--accent);border-color:var(--accent);font-weight:700}.setup button.danger{color:#fca5a5;background:0 0;border-color:#ef4444}.setup input[type=text]:disabled{opacity:.45}.setup button:disabled{opacity:.45;cursor:default}.device-list{flex-direction:column;gap:.5rem;display:flex}.device-row{border:1px solid var(--panel-border);background:var(--panel);cursor:pointer;border-radius:12px;align-items:center;gap:.75rem;min-height:44px;padding:.7rem .9rem;display:flex}.device-row.selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}.device-row input,.check input{flex:none;width:22px;height:22px}.device-text{flex-direction:column;gap:.15rem;font-size:16px;display:flex}.device-text .muted{font-size:.9rem}.card{border:1px solid var(--panel-border);background:var(--panel);border-radius:14px;flex-direction:column;gap:.75rem;padding:1rem;display:flex}.button-card{border-left:8px solid var(--color)}.setup button.remove{align-self:flex-end;padding:0 .9rem;font-size:.95rem}.field{color:var(--muted);flex-direction:column;gap:.3rem;font-size:.95rem;display:flex}.picker{position:relative}.picker-list{z-index:20;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;border:1px solid var(--panel-border);background:#0f0c20;border-radius:10px;max-height:40vh;margin:0;padding:4px;list-style:none;position:absolute;top:calc(100% + 4px);left:0;right:0;overflow-y:auto;box-shadow:0 8px 24px #00000080}.picker-option{color:#fff;cursor:pointer;overflow-wrap:anywhere;border-radius:8px;align-items:center;min-height:44px;padding:.5rem .75rem;font-size:16px;display:flex}.picker-option.none,.picker-option.empty{color:var(--muted)}.picker-option.empty{cursor:default}.picker-option.track{flex-direction:column;justify-content:center;align-items:flex-start}.picker-artists{color:var(--muted);font-size:.85rem}.picker-heading,.picker-note{color:var(--muted);padding:.5rem .75rem .25rem;font-size:.8rem}.picker-heading{text-transform:uppercase;letter-spacing:.05em}.picker-note{padding-bottom:.5rem;font-size:.95rem}.picker-option.active{background:var(--panel-border)}.picker-option[aria-selected=true]{box-shadow:inset 3px 0 0 var(--accent);font-weight:700}.check{align-items:center;gap:.75rem;min-height:44px;font-size:16px;display:flex}.setup-footer{padding:.75rem 0 calc(.25rem + env(safe-area-inset-bottom));background:linear-gradient(transparent, var(--bg) 30%);gap:.75rem;display:flex;position:sticky;bottom:0}.setup-footer .primary{flex:1}.logo{aspect-ratio:1;filter:drop-shadow(0 0 1px #fff)drop-shadow(0 0 1px #fff)drop-shadow(0 0 2px #fff);width:min(70vw,45dvh,360px)}