:root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#dce6e8;background:#10181c;font-synthesis:none;color-scheme:dark}*{box-sizing:border-box}body{margin:0}main{max-width:1120px;margin:auto;padding:40px 28px}header{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:28px}h1{font-size:27px;letter-spacing:-.8px;margin:10px 0}p{color:#99afb8;line-height:1.6}header p{margin:0;font-size:14px}.eyebrow{font-size:11px;letter-spacing:2px;color:#66e0c2}form{display:flex;align-items:flex-end;gap:16px;background:#19242b;border:1px solid #2c3e46;padding:22px;border-radius:8px}label{display:flex;flex:1;flex-direction:column;gap:8px;font-size:12px;color:#aec0c8}input,select,button{font:inherit;border:1px solid #3b505b;border-radius:5px;min-height:39px}input,select{padding:8px 11px;background:#111c22;color:#edf4f6;min-width:0;width:100%}button{padding:8px 14px;background:#263740;color:#e1edf0;cursor:pointer;font-size:12px;white-space:nowrap}button:hover:enabled{border-color:#66e0c2}button:disabled{opacity:.45;cursor:default}.primary{background:#66e0c2;color:#0a2922;border-color:#66e0c2;font-weight:650}section{background:#152027;border:1px solid #2a3b43;border-radius:8px;margin:20px 0;padding:22px}.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}h2{font-size:12px;letter-spacing:1.3px;margin:0}h2 span{color:#9aafb9;letter-spacing:0;font-weight:400}code{color:#a0b5be;font-size:12px}.tag{font-size:10px;letter-spacing:1px;color:#94b1bc}.overview{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin:22px 0;font-size:12px;color:#9ab0ba}.overview>span{display:flex;gap:10px;align-items:center}.state{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#a6b8c0}.state i{width:6px;height:6px;border-radius:50%;background:currentColor}.good{color:#66e0c2}.bad,.error{color:#ffaaa4}.error{padding:14px;background:#392526;border-radius:5px;margin-top:16px}canvas{width:100%;height:140px;display:block;background:#10191f;border-radius:4px}.signal{display:flex;justify-content:space-between;font-size:12px;color:#99b1ba;margin:11px 0 20px}.signal strong{font-family:ui-monospace,monospace}.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.hint{font-size:12px;color:#95acb6}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:22px;padding-top:20px;border-top:1px solid #2b3d45}.metrics>div{font-size:11px;color:#97aeb9}.metrics strong{display:block;color:#e0eaee;font-size:15px;margin-top:7px;font-weight:500;font-variant-numeric:tabular-nums}.states{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;font-size:11px;color:#94abb6}.states .state{display:flex;margin-top:8px}.route{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #2b3d45;padding-top:16px;margin:18px 0;font-size:11px;color:#94abb6}.route strong{display:block;margin-top:6px;color:#dce6e8;font-family:ui-monospace,monospace;font-weight:400}.peer>.actions{margin-top:22px}.empty{text-align:center;padding:35px}.empty p{font-size:13px;max-width:590px;margin:14px auto 0}.log-lines{max-height:300px;overflow:auto;font-family:ui-monospace,monospace;font-size:11px}.log-lines>div{display:flex;gap:18px;border-top:1px solid #23343b;padding:7px 0;line-height:1.5}.log-lines time{white-space:nowrap;color:#7898a7}.log-lines span{overflow-wrap:anywhere}.recording{border-top:1px solid #2b3d45;margin-top:20px;padding-top:14px}.recording h3{font-size:13px}.recording p,.recording a{font-size:12px}.recording audio{display:block;width:100%;max-width:420px;margin:12px 0}a{color:#66e0c2}footer{text-align:center;color:#78939f;font-size:11px;margin-top:26px}:focus-visible{outline:2px solid #66e0c2;outline-offset:3px}@media(max-width:750px){main{padding:24px 14px}header,form{flex-direction:column;align-items:stretch}h1{font-size:23px}.metrics,.states{grid-template-columns:repeat(2,1fr)}.route{flex-direction:column}.section-title{flex-wrap:wrap}.overview{gap:15px}section{padding:17px}.hint{line-height:1.6}}.header-controls{display:flex;flex-direction:column;align-items:flex-end;gap:14px}.audio-controls{display:flex;gap:10px}.audio-toggle{display:flex;align-items:center;gap:8px;min-height:46px}.audio-toggle.enabled{color:#66e0c2;border-color:#66e0c2;background:#173b34}@media(max-width:750px){.header-controls{align-items:flex-start}.audio-controls{width:100%}.audio-toggle{flex:1;justify-content:center}}