:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f3f4f6;background:#0d1118;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 48% 0,#1e2a3b 0,#0d1118 55%)}
header{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,4vw,60px);border-bottom:1px solid #ffffff1c;background:#111823b8;backdrop-filter:blur(18px)}
.brand{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:750;letter-spacing:.15em}.brand small{font-size:10px;letter-spacing:.15em;color:#8993a1;font-weight:650;margin-left:12px}.mark{display:inline-grid;place-items:center;width:35px;height:35px;border:1px solid #647183;border-radius:10px;letter-spacing:0;font-size:26px;color:#dce3e9}#state{font-size:13px;color:#a8b4c4}
main{padding:clamp(18px,4vw,56px)}.setup{max-width:550px;margin:6vh auto;padding:clamp(24px,4vw,45px);border:1px solid #ffffff24;border-radius:25px;background:#26313f88;box-shadow:0 25px 70px #0005;backdrop-filter:blur(24px)}.eyebrow{letter-spacing:.22em;font-size:11px;font-weight:700;color:#aab6c6}h1{font-size:clamp(32px,5vw,52px);letter-spacing:-.045em;line-height:1.07;margin:24px 0 14px}p{color:#aab4c2;line-height:1.6}button,select{font:inherit;color:#f4f6f8;border:1px solid #8d9baa55;border-radius:12px;background:#ffffff12;padding:10px 15px}button{cursor:pointer}button:hover:not(:disabled){background:#ffffff2b}button:disabled{opacity:.45;cursor:default}#pair{background:#dce4ec;color:#10151d;border-color:transparent;font-weight:700;margin-top:15px}.code{font-size:29px;font-weight:750;letter-spacing:.16em;margin:22px 0}.hint{font-size:13px;min-height:22px}.workspace{max-width:1800px;margin:auto}.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:15px}.toolbar label{font-size:13px;color:#b8c3d0}.toolbar select{margin-left:5px}.toolbar #disconnect{margin-left:auto;color:#ff9b99}.stage{position:relative;display:grid;place-items:center;background:#07090c;border:1px solid #ffffff29;border-radius:18px;overflow:hidden;height:calc(100vh - 180px);min-height:300px}video{width:100%;height:100%;object-fit:contain;outline:none;cursor:crosshair}.waiting{position:absolute;pointer-events:none;padding:10px 17px;border-radius:12px;background:#111c2acc;color:#d4deea}.status{font-size:12px;text-align:right;margin:8px 4px}@media(max-width:600px){.brand small{display:none}.stage{height:calc(100dvh - 240px)}}