:root{--s-1: 8px;--s-2: 16px;--s-3: 24px;--s-4: 32px;--s-5: 48px;--s-6: 64px;--bg: #0b0d11;--panel: rgba(18, 21, 27, .62);--border: rgba(255, 255, 255, .08);--border-strong: rgba(255, 255, 255, .14);--text: #eef1f6;--muted: #9aa4b4;--faint: #6b7484;--gold: #c6a568;--gold-soft: rgba(198, 165, 104, .16);--red-live: #e5493b;--green: #43c07a;--amber: #e0a52f;--radius: 18px;--radius-sm: 12px;--shadow: 0 24px 60px -24px rgba(0, 0, 0, .75);--focus: 0 0 0 2px rgba(198, 165, 104, .9);font-family:Segoe UI,Inter,system-ui,-apple-system,sans-serif;color:var(--text);color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg)}html:before{content:"";position:fixed;inset:-4%;z-index:0;background:url(/backgrounds/default.png) center / cover no-repeat;filter:blur(0px) saturate(1.05) brightness(.72);transform:scale(1.06);pointer-events:none}body:after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 0%,#06080c59,#06080cd1 70%),linear-gradient(180deg,#080a0e8c,#080a0ee6)}#root{min-height:100vh;position:relative;z-index:1}.shell{width:100%;max-width:760px;margin:0 auto;padding:var(--s-5) var(--s-3) var(--s-6);display:flex;flex-direction:column;gap:var(--s-4)}.join-gate,.home{min-height:100vh;justify-content:center;align-items:center}.join-gate .panel,.home .panel{width:100%}.brand{display:inline-flex;align-items:center;gap:var(--s-1)}.brand-mark{width:22px;height:22px;border-radius:6px;background:linear-gradient(150deg,var(--gold),#8f6f38);box-shadow:0 0 0 1px #0000004d inset,0 4px 12px -4px #c6a568b3}.brand-text{font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.82rem;color:var(--muted)}h1{font-size:clamp(1.6rem,3vw,2.1rem);line-height:1.2;font-weight:650;letter-spacing:-.01em;margin:0}h2{font-size:1.12rem;font-weight:600;line-height:1.3;margin:0}.lead{color:var(--muted);line-height:1.6;margin:0;max-width:52ch}.hero{display:flex;flex-direction:column;gap:var(--s-2)}.panel-sub{color:var(--muted);font-size:.92rem;line-height:1.55;margin:0}.field-label{display:block;font-size:.78rem;letter-spacing:.04em;color:var(--faint);margin-bottom:6px}.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:var(--s-3);box-shadow:var(--shadow);backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);display:flex;flex-direction:column;gap:var(--s-2)}.panel-centered{text-align:center;align-items:center;max-width:440px}.panel-centered .field{text-align:left;width:100%}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2)}.home-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--s-3);align-items:stretch}.home-divider{display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:.8rem;text-transform:uppercase;letter-spacing:.14em;position:relative}.home-divider:before{content:"";position:absolute;top:0;bottom:0;width:1px;background:linear-gradient(transparent,var(--border-strong),transparent)}.home-divider span{background:#0b0d1199;padding:6px 4px;border-radius:8px}@media(max-width:680px){.home-grid{grid-template-columns:1fr}.home-divider{padding:var(--s-1) 0}.home-divider:before{inset:50% 0 auto;width:auto;height:1px;background:linear-gradient(90deg,transparent,var(--border-strong),transparent)}}.field{display:block}input[type=text]{width:100%;padding:12px 14px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:#090b0fb3;color:var(--text);font-size:.98rem;transition:border-color .15s ease,box-shadow .15s ease}input[type=text]::placeholder{color:var(--faint)}input[type=text]:focus-visible{outline:none;border-color:var(--gold);box-shadow:var(--focus)}.btn{appearance:none;border:1px solid transparent;border-radius:var(--radius-sm);padding:12px 18px;font-size:.96rem;font-weight:600;color:var(--text);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:background .15s ease,border-color .15s ease,transform .05s ease}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.5;cursor:default}.btn:focus-visible{outline:none;box-shadow:var(--focus)}.btn-block{width:100%}.btn-primary{background:linear-gradient(180deg,#d0af71,#b48c4c);color:#1a140a;border-color:#00000040}.btn-primary:hover:not(:disabled){background:linear-gradient(180deg,#dcbb7d,#bd9455)}.btn-secondary{background:#ffffff0f;border-color:var(--border-strong)}.btn-secondary:hover:not(:disabled){background:#ffffff1a}.btn-ghost{background:transparent;border-color:var(--border-strong);color:var(--muted)}.btn-ghost:hover:not(:disabled){color:var(--text);border-color:var(--gold)}.link{color:var(--gold);text-decoration:none;font-size:.9rem}.link:hover{text-decoration:underline}.desktop-download{color:var(--muted);font-size:.9rem;margin:var(--s-2) 0 0;text-align:center}.desktop-download-sub{color:var(--faint);font-size:.82rem}.desktop-fallback{display:flex;flex-direction:column;gap:var(--s-1);align-items:center;margin-top:var(--s-1)}.desktop-fallback-hint{margin:0;color:var(--muted);font-size:.82rem}.row{display:flex;gap:var(--s-1);flex-wrap:wrap}.invite-box{display:flex;flex-direction:column;gap:var(--s-2);padding-top:var(--s-1);border-top:1px solid var(--border)}.invite-url{display:block;padding:12px 14px;background:#090b0fb3;border:1px solid var(--border);border-radius:var(--radius-sm);word-break:break-all;font-size:.88rem;font-family:Cascadia Code,ui-monospace,monospace;color:var(--muted)}.error{color:#ff8478;font-size:.9rem;margin:0}.room-chip{align-self:center;font-size:.78rem;letter-spacing:.06em;color:var(--muted);background:var(--gold-soft);border:1px solid rgba(198,165,104,.3);padding:4px 12px;border-radius:999px}.room-header{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2)}.status-pill{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:500;padding:6px 12px 6px 10px;border-radius:999px;border:1px solid var(--border-strong);background:#090b0f99;color:var(--muted)}.status-dot{width:9px;height:9px;border-radius:50%;background:var(--muted)}.tone-ok .status-dot{background:var(--green);box-shadow:0 0 10px 1px #43c07a99}.tone-ok{color:#cdeede}.tone-wait .status-dot{background:var(--amber);box-shadow:0 0 10px 1px #e0a52f80;animation:pulse 1.4s ease-in-out infinite}.tone-bad .status-dot{background:var(--red-live);box-shadow:0 0 10px 1px #e5493b8c}.tone-bad{color:#ffb9b1}@keyframes pulse{0%,to{opacity:1}50%{opacity:.35}}.ptt-stage{display:flex;flex-direction:column;align-items:center;gap:var(--s-2);padding:var(--s-3) 0}.ptt{--size: clamp(220px, 42vw, 300px);--speaker-scale: 1;width:var(--size);height:var(--size);border-radius:50%;border:1px solid rgba(255,255,255,.14);background:radial-gradient(120% 120% at 50% 28%,#d24638,#9e2a20 62%,#7c2019);color:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:0 20px 50px -18px #9e2a20b3,inset 0 2px 10px #ffffff2e,inset 0 -14px 26px #00000059;transform:scale(var(--speaker-scale));transition:transform .12s ease-out,box-shadow .22s ease,background .2s ease}.ptt:focus-visible{outline:none;box-shadow:var(--focus),0 20px 50px -18px #9e2a20b3}.ptt.active{box-shadow:0 26px 70px -16px #e5493bd9,0 0 0 10px #e5493b29,inset 0 2px 12px #ffffff3d}.ptt.own{background:radial-gradient(120% 120% at 50% 28%,#ef5647,#c1352a 62%,#98261d)}.ptt-main{font-size:clamp(1.5rem,5vw,2.1rem);font-weight:750;letter-spacing:.04em;line-height:1.05;text-align:center;padding:0 12px;text-shadow:0 2px 8px rgba(0,0,0,.4)}.ptt-sub{font-size:.9rem;font-weight:500;color:#ffffffd1;letter-spacing:.02em}.ptt-hint{color:var(--muted);font-size:.85rem;margin:0}.peers-panel{gap:var(--s-2)}.room-meta{display:flex;flex-direction:column;gap:2px}.room-meta .field-label{margin:0}.room-id{font-family:Cascadia Code,ui-monospace,monospace;font-size:.95rem;color:var(--text);letter-spacing:.02em}.peer-count{font-size:.85rem;color:var(--muted);background:#090b0f99;border:1px solid var(--border);padding:4px 10px;border-radius:999px}.peer-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-1)}.peer-empty{color:var(--faint);padding:var(--s-2) 0;text-align:center;font-size:.9rem}.peer-row{display:grid;grid-template-columns:24px 1fr 140px;align-items:center;gap:var(--s-2);padding:10px 12px;border-radius:var(--radius-sm);border:1px solid transparent;background:#ffffff08;transition:border-color .2s ease,background .2s ease}.peer-row.speaking{border-color:#e5493b80;background:#e5493b1a}.mic-icon{width:18px;height:18px;background-color:var(--faint);-webkit-mask:var(--mic) center / contain no-repeat;mask:var(--mic) center / contain no-repeat;--mic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 15a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V22h2v-3.08A7 7 0 0 0 19 12z'/></svg>");transition:background-color .2s ease}.mic-icon.on{background-color:var(--red-live)}.peer-name{font-weight:550;font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.peer-reconnect{color:var(--amber);font-weight:500;font-size:.85rem}.volume{width:100%;height:4px;-webkit-appearance:none;appearance:none;background:#ffffff24;border-radius:999px;outline:none;cursor:pointer}.volume::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:var(--gold);border:2px solid #1a140a;box-shadow:0 2px 6px #00000080}.volume::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--gold);border:2px solid #1a140a}.volume:focus-visible{box-shadow:var(--focus)}@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}.diagnostics{font-size:.82rem;color:var(--muted);background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--s-2)}.diagnostics summary{cursor:pointer;font-weight:600;color:var(--text)}.diag-table{border-collapse:collapse;margin:var(--s-1) 0;width:100%}.diag-table td{padding:4px 10px 4px 0;vertical-align:top;word-break:break-all}.diag-table td:first-child{color:var(--faint);white-space:nowrap}.diag-peers{list-style:none;margin:var(--s-1) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s-1)}.diag-peers ul{list-style:none;margin:4px 0 0;padding:0 0 0 var(--s-2);color:var(--muted)}.muted{color:var(--faint)}