:root{color-scheme:dark;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#121821;color:#eaf0f6;font-size:17px;line-height:1.55}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0}main{max-width:680px;margin:auto;padding:calc(32px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom))}header,.session{display:flex;align-items:center;gap:16px}header{margin-bottom:36px}h1{font-size:1.75rem;margin:0;letter-spacing:-.05em}h2{font-size:1.1rem;margin:0 0 8px}.eyebrow{margin:0;color:#9aaabe;font-size:.85rem}.badge{margin-left:auto;font-size:.65rem;letter-spacing:.12em;border:1px solid #435069;border-radius:6px;padding:3px 7px;color:#adc8db}section:not(.help){background:#1b2432;border:1px solid #344156;border-radius:18px;padding:24px}p{margin:8px 0 20px}label{display:block;font-size:.9rem;margin:12px 0 7px}input{display:block;width:100%;background:#111922;color:#f5f8fa;border:1px solid #687b93;border-radius:10px;padding:13px;font-size:1rem;margin-bottom:16px}button{border:0;border-radius:10px;background:#b9decd;color:#142c24;font:inherit;font-weight:650;padding:12px 20px;min-height:48px;cursor:pointer}button:hover:enabled{filter:brightness(1.08)}button:disabled{opacity:.45;cursor:default}button.secondary{background:#354258;color:#ecf2fa}button.quiet{background:transparent;color:#c0cfdf;font-size:.85rem;margin-left:auto;padding:8px}.session h2{margin:0}.controls{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 12px}.controls button:first-child{flex:1;min-width:120px}.small{font-size:.8rem;color:#aabbd0;margin:12px 0 0}#indicator{display:flex;align-items:center;gap:10px;margin-top:24px}.dot{width:11px;height:11px;border-radius:50%;background:#8fa1b8}[data-phase=connecting] .dot,[data-phase=closing] .dot{background:#e4ba71}[data-phase=live] .dot{background:#90d6ab}[data-phase=working] .dot{background:#8dc4ed}[data-phase=error] .dot{background:#ec929b}.detail{min-height:3em;color:#c7d4e5;margin-top:10px}#notice{font-size:.9rem;color:#e4ba71;margin:20px 2px}.help{color:#a8b6c8;font-size:.84rem;margin-top:32px}.help strong{color:#d4dfea}footer{border-top:1px solid #303c4d;padding-top:20px;color:#8fa1b8;font-size:.75rem}input:focus-visible,button:focus-visible{outline:3px solid #a6d0f0;outline-offset:3px}@media(max-width:400px){main{padding-left:16px;padding-right:16px}section:not(.help){padding:18px}.controls button{flex:1}}
