:root{--bg: #0a0a0f;--panel: #14141d;--panel-2: #1c1c28;--line: #2a2a3a;--ink: #e8e8f0;--dim: #8a8a9e;--glow: #ffb454;--glow-2: #ff6b9d;--ok: #4ade80;--warn: #f87171;color-scheme:dark}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}html,body{margin:0;height:100%;overscroll-behavior:none}body{background:var(--bg);color:var(--ink);font:15px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;-webkit-user-select:none;user-select:none;touch-action:manipulation}h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.02em}button{font:inherit;color:inherit;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:10px 14px;cursor:pointer;transition:background .12s,border-color .12s}button:hover:not(:disabled){background:#26263a}button:disabled{opacity:.45;cursor:default}button.primary{background:var(--glow);color:#1a1005;border-color:transparent;font-weight:650}button.primary:hover:not(:disabled){background:#ffc571}button.on{background:var(--glow);color:#1a1005;border-color:transparent;font-weight:600}a{color:var(--glow)}.mono{font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace}.dim{color:var(--dim)}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--warn);vertical-align:middle;transition:background .2s}.dot.open{background:var(--ok)}.dot.connecting{background:var(--glow)}.landing{display:grid;place-items:center;min-height:100%;padding:24px;text-align:center}.landing .inner{max-width:460px;display:grid;gap:22px}.wordmark{margin:0;line-height:0}.wordmark img{display:block;width:min(420px,78vw);height:auto;margin:0 auto;filter:drop-shadow(0 0 26px rgba(255,180,84,.45))}.code-entry{display:flex;gap:8px}.code-entry input{flex:1;min-width:0;font:600 22px/1 ui-monospace,Menlo,monospace;letter-spacing:.3em;text-align:center;text-transform:uppercase;padding:14px;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:10px}.code-entry input:focus{outline:2px solid var(--glow);outline-offset:-1px}.host{display:grid;grid-template-rows:auto 1fr auto;height:100%}.host header{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--panel)}.host header .grow{flex:1}.homelink{display:flex;align-items:center;flex:none}.homelink img{display:block;height:22px;width:auto}.roomcode{font:700 26px/1 ui-monospace,Menlo,monospace;letter-spacing:.18em;color:var(--glow)}.roomname{font:600 17px/1 inherit;color:var(--ink);background:transparent;border:1px solid transparent;border-radius:8px;padding:6px 8px;min-width:0;max-width:34ch;flex:0 1 auto}.roomname::placeholder{color:var(--dim);font-weight:400}.roomname:hover{border-color:var(--line)}.roomname:focus{outline:none;border-color:var(--glow);background:var(--panel-2)}.roomname-big{font-size:clamp(20px,6vw,30px);font-weight:650;letter-spacing:-.02em;max-width:90vw;color:var(--ink)}.seatcount{font-variant-numeric:tabular-nums;font-size:20px;font-weight:650}.host main{display:grid;grid-template-columns:300px 1fr;min-height:0}@media(max-width:820px){.host main{grid-template-columns:1fr;grid-template-rows:auto 1fr}}.sidebar{border-right:1px solid var(--line);padding:16px;display:grid;gap:18px;align-content:start;overflow-y:auto;min-width:0}.sidebar section{display:grid;gap:8px}.sidebar h3{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--dim)}.qrwrap{background:#fff;border-radius:12px;padding:10px;display:grid;place-items:center;min-width:0}.qrwrap canvas{display:block;width:100%;min-width:0;height:auto;image-rendering:pixelated}.joinurl{font-size:12px;word-break:break-all;color:var(--dim);cursor:pointer;border-radius:6px;padding:4px 6px;margin:-4px -6px;transition:background .15s,color .15s}.joinurl:hover{background:var(--panel-2);color:var(--ink)}.joinurl.copied{background:var(--glow);color:var(--bg)}.joinurl.plain{cursor:default}.joinurl.plain:hover{background:none;color:var(--dim)}.joinurl a{color:var(--glow)}.seg{display:flex;gap:6px}.seg button{flex:1}.stage{display:grid;grid-template-rows:1fr auto;min-height:0}.monitor{display:grid;place-items:center;gap:10px;padding:20px;text-align:center;min-height:0}.chord{font:700 clamp(26px,6vw,52px) / 1.1 ui-monospace,Menlo,monospace;letter-spacing:.04em;min-height:1.2em}.room{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-content:center;max-width:900px}.room.empty:after{content:"no phones yet — scan the code";color:var(--dim);font-size:13px}.handset{position:relative;width:48px;height:80px;border-radius:9px;background:var(--panel-2);border:1px solid var(--line);display:grid;place-items:center;transition:background .12s,border-color .12s,box-shadow .18s,transform .12s}.handset:before{content:"";position:absolute;top:5px;left:50%;transform:translate(-50%);width:10px;height:2px;border-radius:1px;background:var(--line)}.handset .note{font:700 10px/1 ui-monospace,Menlo,monospace;color:var(--dim)}.handset.lit{background:hsl(var(--hue) 85% 22%);border-color:hsl(var(--hue) 90% 55%);box-shadow:0 0 14px hsl(var(--hue) 90% 55% / .55),inset 0 0 18px hsl(var(--hue) 90% 50% / .3);transform:translateY(-2px)}.handset.lit .note{color:hsl(var(--hue) 95% 88%)}.room.snug{gap:10px}.room.snug .handset{width:34px;height:58px;border-radius:7px}.room.snug .handset .note{font-size:9px}.room.dense{gap:7px}.room.dense .handset{width:22px;height:38px;border-radius:5px}.room.dense .handset .note{font-size:8px}.room.tiny{gap:5px}.room.tiny .handset{width:12px;height:20px;border-radius:3px}.room.tiny .handset .note,.room.tiny .handset:before{display:none}.piano{position:relative;height:min(34vh,220px);background:var(--panel);border-top:1px solid var(--line);touch-action:none;-webkit-user-select:none;user-select:none;overflow:hidden}.piano .key{position:absolute;bottom:0;border-radius:0 0 5px 5px;transition:background .05s}.piano .key.white{background:linear-gradient(#f4f4f8,#d9d9e4);border:1px solid #23232f;top:0}.piano .key.black{background:linear-gradient(#2a2a38,#101018);border:1px solid #000;top:0;height:62%;z-index:2}.piano .key.down.white{background:linear-gradient(var(--glow),#e09030)}.piano .key.down.black{background:linear-gradient(#e09030,#a4661d)}.piano .key .label{position:absolute;bottom:5px;left:0;right:0;text-align:center;font:500 9px/1 ui-monospace,Menlo,monospace;color:#6a6a7e;pointer-events:none}.phone{display:grid;grid-template-rows:auto 1fr auto;height:100%;position:relative;isolation:isolate}.aurora{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;opacity:0;transition:opacity .45s ease-out;background:radial-gradient(120% 80% at 50% 100%,var(--glow) 0%,transparent 65%)}.phone header{display:flex;align-items:center;gap:10px;padding:12px 16px;font-size:13px}.phone .body{display:grid;place-items:center;gap:18px;padding:16px;text-align:center;min-height:0}.nownote{font:700 clamp(52px,22vw,120px) / 1 ui-monospace,Menlo,monospace;letter-spacing:.02em;transition:transform .08s ease-out,opacity .35s;opacity:.25}.nownote.active{opacity:1;color:var(--glow);transform:scale(1.06)}.gate{display:grid;place-items:center;gap:20px;padding:32px 24px;text-align:center}.gate .big{font-size:26px;font-weight:650;max-width:15ch}.tapin{width:min(74vw,280px);aspect-ratio:1;border-radius:50%;border:none;background:radial-gradient(circle at 40% 35%,var(--glow),#d97706);color:#1a1005;font-size:22px;font-weight:700;letter-spacing:.02em;box-shadow:0 0 60px -10px var(--glow);animation:breathe 2.8s ease-in-out infinite}@keyframes breathe{0%,to{transform:scale(1)}50%{transform:scale(1.035)}}.controls{padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--panel);display:grid;gap:14px}.stops{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.stops button{padding:12px 6px;display:grid;gap:3px;line-height:1.15;font-size:13px;font-weight:600;position:relative}.stops .tally{position:absolute;top:3px;right:4px;min-width:15px;padding:0 3px;border-radius:7px;background:var(--panel-2);border:1px solid var(--line);color:var(--dim);font:600 9px/15px ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums;text-align:center}.stops button.on .tally{background:#1a1005;border-color:transparent;color:var(--glow)}.stops button small{font-size:9px;font-weight:400;color:var(--dim);display:block}.stops button.on small{color:#6b4a12}.row{display:flex;align-items:center;gap:12px}input[type=range]{flex:1;accent-color:var(--glow);height:28px}.err{color:var(--warn);font-size:14px}