:root{color-scheme:dark;--bg: #0e1116;--bg2: #141922;--panel: #181d26;--panel2: #212834;--line: #2a3240;--text: #eef1f6;--dim: #8f99aa;--accent: #ff7a1a;--accent2: #ffa45c;--live: #2fd27a;--warn: #f0b429;--err: #ef5350;--radius: 18px;--tap: 56px;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-tap-highlight-color:transparent}*{box-sizing:border-box}html{min-height:100%;background:var(--bg)}body{margin:0;min-height:100vh;min-height:100dvh;color:var(--text);background:radial-gradient(120% 60% at 50% -10%,rgba(255,122,26,.16),transparent 60%),linear-gradient(180deg,var(--bg2),var(--bg) 40%);background-attachment:fixed}main{max-width:560px;margin:0 auto;padding:calc(20px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom))}[hidden]{display:none!important}.brand{display:flex;align-items:center;gap:12px;margin-bottom:8px}.logo{width:36px;height:36px;border-radius:10px;box-shadow:0 4px 18px #ff7a1a59}h1{font-size:1.45rem;margin:0;letter-spacing:.01em;font-weight:800;flex:1}h1 span{color:var(--accent)}.hint{color:var(--dim);margin:18px 2px;font-size:1.05rem;line-height:1.4}.label{color:var(--dim);font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;font-weight:600}.pill{display:inline-flex;align-items:center;gap:7px;font-size:.85rem;font-weight:600;padding:5px 12px 5px 10px;border-radius:999px;background:var(--panel);color:var(--dim);border:1px solid var(--line);white-space:nowrap}.pill:before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}.pill[data-state=connected],.pill[data-state=live]{color:var(--live)}.pill[data-state=loading],.pill[data-state=connecting]{color:var(--warn)}.pill[data-state=error],.pill[data-state=disconnected]{color:var(--err)}.pill[data-state=live]:before{animation:pulse 1.6s ease-in-out infinite}.pill[data-state=loading]:before,.pill[data-state=connecting]:before{animation:blink 1s steps(2) infinite}@keyframes pulse{0%,to{box-shadow:0 0 #2fd27a99}50%{box-shadow:0 0 0 6px #2fd27a00}}@keyframes blink{50%{opacity:.3}}button{font:inherit;color:inherit;border:0;border-radius:14px;cursor:pointer;touch-action:manipulation}button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--accent2);outline-offset:2px}.ico{width:1.25em;height:1.25em;fill:currentColor;flex:none}.primary,.secondary{display:flex;align-items:center;justify-content:center;gap:10px;min-height:var(--tap);padding:14px 20px;font-weight:700;width:100%}.primary{min-height:64px;font-size:1.2rem;color:#1a0d02;background:linear-gradient(180deg,var(--accent2),var(--accent));box-shadow:0 8px 24px #ff7a1a4d}.primary:active{transform:translateY(1px);filter:brightness(.95)}.secondary{background:var(--panel2);border:1px solid var(--line);font-size:1.05rem}.secondary:active{background:var(--line)}.card{background:linear-gradient(180deg,var(--panel),#151a22);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin:16px 0;display:grid;gap:16px;box-shadow:0 10px 30px #0000004d}.zone-name{display:block;font-size:clamp(2rem,10vw,3rem);line-height:1.05;font-weight:800;letter-spacing:-.01em;overflow-wrap:anywhere}.start{gap:10px}.start .primary{margin-top:10px}.zones{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:16px 0}.zones .empty{grid-column:1 / -1;color:var(--dim);text-align:center;margin:0;padding:28px 16px;border:1px dashed var(--line);border-radius:var(--radius)}.zone{position:relative;display:grid;align-content:space-between;gap:14px;text-align:left;min-height:104px;padding:16px;background:var(--panel);border:1px solid var(--line);font-size:1.3rem;font-weight:700;overflow-wrap:anywhere}.zone:active{background:var(--panel2)}.zone .zone-sub{display:flex;white-space:nowrap;align-items:center;gap:6px;font-size:.8rem;font-weight:600;color:var(--dim);text-transform:uppercase;letter-spacing:.1em}.zone .zone-sub .ico{width:1.1em;height:1.1em}.zone[aria-pressed=true]{border-color:var(--accent);background:linear-gradient(180deg,#ff7a1a38,#ff7a1a14);box-shadow:inset 0 0 0 1px var(--accent)}.zone[aria-pressed=true] .zone-sub{color:var(--accent2)}.now{display:grid;gap:8px;justify-items:start}.now .zone-name{font-size:clamp(2.4rem,13vw,3.6rem)}.status{font-size:1rem;padding:7px 14px 7px 12px}.meter{height:10px;background:#0a0d11;border-radius:6px;overflow:hidden;border:1px solid var(--line)}#meter-bar{height:100%;width:0;background:linear-gradient(90deg,var(--live),#b6f05a 70%,var(--warn));border-radius:6px}.row{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:14px;min-height:var(--tap)}.row>span{color:var(--dim);font-weight:600;min-width:6.5em}.row output{display:block;color:var(--dim);font-size:.85rem;font-weight:400}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:var(--tap);background:transparent;margin:0}input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:var(--panel2)}input[type=range]::-moz-range-track{height:8px;border-radius:4px;background:var(--panel2)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-11px;border-radius:50%;background:var(--text);border:4px solid var(--accent);box-shadow:0 2px 8px #0006}input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--text);border:4px solid var(--accent)}.icon-btn{display:grid;place-items:center;width:48px;height:48px;flex:none;background:var(--panel);border:1px solid var(--line);border-radius:14px}.icon-btn .ico{width:22px;height:22px}.icon-btn:active{background:var(--panel2)}.share{width:min(420px,calc(100vw - 32px));border:1px solid var(--line);border-radius:var(--radius);padding:22px;background:var(--panel);color:var(--text);text-align:center;box-shadow:0 20px 60px #0009}.share::backdrop{background:#000000b3}.share h2{font-size:1.25rem;margin:0 0 16px}.share .qr svg{display:block;width:100%;max-width:300px;height:auto;margin:0 auto;background:#fff;border-radius:12px}.share .scan{margin:14px 0 2px;font-weight:600}.share .url{margin:0 0 16px;font-size:.8rem;color:var(--dim);overflow-wrap:anywhere}.share .actions{display:grid;gap:10px}.diag{margin-top:24px;color:var(--dim);font-size:.85rem}.diag summary{cursor:pointer;padding:10px 2px;min-height:44px;display:flex;align-items:center}.diag dl{display:grid;grid-template-columns:max-content 1fr;gap:4px 12px;margin:4px 2px}.diag dd{margin:0;overflow-wrap:anywhere;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.kiosk .diag,.kiosk .controls,.kiosk #conn,.kiosk .hint{display:none!important}.kiosk main{max-width:none;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding-left:5vw;padding-right:5vw}.kiosk .brand{opacity:.8}.kiosk.playing .zones,.kiosk.preset .zones{display:none}.kiosk .player,.kiosk .start{flex:1;margin:0;align-content:center;justify-items:center;text-align:center;background:none;border:0;box-shadow:none;padding:0}.kiosk .now{justify-items:center;gap:3vh}.kiosk .player .zone-name,.kiosk .start .zone-name{font-size:clamp(3rem,16vw,14rem)}.kiosk .status{font-size:clamp(1.1rem,3.5vw,2.2rem);padding:.4em 1em .4em .8em}.kiosk .status:before{width:.6em;height:.6em}.kiosk .meter{width:min(70vw,900px);height:clamp(10px,1.6vh,20px)}.kiosk .start .primary{width:auto;min-width:min(80vw,420px)}@media(prefers-reduced-motion:reduce){.pill:before{animation:none!important}}