:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,sans-serif;background:#071015;color:#f2f5f4}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 90% 0,#12313b66,transparent 55%)}main{max-width:1260px;margin:auto;padding:30px 42px 20px}header{display:flex;justify-content:space-between;align-items:center;padding-bottom:27px;border-bottom:1px solid #233239}.brand{text-decoration:none;color:inherit;display:flex;align-items:center;gap:13px;font-weight:800;letter-spacing:.03em}.brand small{display:block;color:#7b939e;font-size:10px;margin-top:5px;letter-spacing:.22em}.mark{display:grid;place-items:center;background:#ed7146;color:#102126;width:46px;height:46px;border-radius:12px;font-size:31px;position:relative}.mark span{font-size:12px;position:absolute;right:8px}.network{font-size:12px;letter-spacing:.12em;border:1px solid #36505a;padding:9px 12px;border-radius:30px;color:#c6d9df}.heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:32px 0 24px}.eyebrow{color:#e99573;font-size:10px;letter-spacing:.2em;font-weight:700;margin:0 0 9px}h1{font-size:clamp(24px,3.2vw,38px);letter-spacing:-.04em;margin:0}.sub{color:#8ea4ae;font-size:14px;margin:9px 0 0}.status{font-size:11px;letter-spacing:.08em;white-space:nowrap;color:#b8c6cb;background:#16252d;border:1px solid #2b434d;border-radius:30px;padding:10px 13px}.status[data-state=playing]{color:#9ce2c4;border-color:#32654f;background:#122e24}.status[data-state=waiting]{color:#f6cb88;border-color:#6b5230}.screen{aspect-ratio:16/9;position:relative;border-radius:14px;overflow:hidden;background:#020507;border:1px solid #24353c;box-shadow:0 25px 70px #0004}video{width:100%;height:100%;object-fit:contain}.cover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(ellipse,#16313b,#071116 70%);padding:20px;text-align:center}.cover[hidden]{display:none}.signal{color:#e48a64;font-size:45px}.cover h2{font-size:23px;letter-spacing:.05em;margin:15px 0 0}.cover p{color:#9cb2bc;max-width:460px;font-size:14px;line-height:1.6}button{font:inherit;cursor:pointer;border:1px solid #38505b;background:#15252d;color:#dbe5e9;border-radius:8px;padding:10px 15px;font-size:13px}button:focus-visible,a:focus-visible{outline:3px solid #ffb18a;outline-offset:3px}button:hover{background:#223a45}#start{background:#f18458;color:#1b201f;border:0;font-weight:750;margin-top:8px;padding:13px 24px}.controls{display:flex;align-items:center;gap:10px;padding:16px 0}.controls span{margin-left:auto;color:#8298a3;font-size:12px}.metrics{display:grid;grid-template-columns:repeat(4,1fr);background:#0d1c24;border:1px solid #263942;border-radius:12px;margin:10px 0 25px;padding:22px 8px}.metrics div{padding:0 22px;border-right:1px solid #293c45}.metrics div:last-child{border:0}.metrics span{display:block;color:#7f98a4;letter-spacing:.08em;font-size:9px}.metrics strong{display:block;font-size:21px;margin:10px 0 6px}.metrics small{font-size:11px;color:#7e96a2}footer{border-top:1px solid #21343d;padding-top:20px;display:flex;justify-content:space-between;color:#78909c;font-size:11px}footer b{margin:0 8px;color:#e58a67}@media(max-width:700px){main{padding:20px 16px}.heading{align-items:flex-start;flex-direction:column;gap:15px;margin:24px 0 18px}.network{font-size:9px}.brand{font-size:13px}.mark{width:36px;height:36px;font-size:26px}.metrics{grid-template-columns:1fr 1fr;gap:24px}.metrics div:nth-child(2){border:0}.metrics strong{font-size:18px}.controls{flex-wrap:wrap}.controls span{flex-basis:100%;margin:4px 0 0}.cover h2{font-size:18px}.cover p{font-size:12px;margin:8px 0}.signal{display:none}#start{padding:10px 16px}.screen{border-radius:8px}}

.recording{border:1px solid #30434c;border-radius:10px;padding:15px 18px;margin:0 0 22px;background:#102029}.recording-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.recording [hidden]{display:none!important}.recording button:disabled{opacity:.5;cursor:not-allowed}#record{color:#ffc3ac;border-color:#8a5947}#record-stop{background:#702e28;border-color:#ae5a4c;color:#fff}#record-time{font-variant-numeric:tabular-nums;color:#ffbba7;font-weight:700}#record-download{color:#9cddc3;text-underline-offset:3px}.recording p{font-size:13px;line-height:1.5;margin:12px 0 0;color:#c7d6dc}.recording .record-note{font-size:12px;color:#849da9;margin-top:5px}

.header-actions{display:flex;gap:14px;align-items:center}#logout{white-space:nowrap}#session-message{color:#efb18d;font-size:14px}#session-message:empty{display:none}@media(max-width:600px){header{align-items:flex-start;gap:16px}.header-actions{flex-direction:column;align-items:flex-end;gap:9px}#logout{font-size:12px;padding:9px}}