:root{color-scheme:dark;--bg:#0d1424;--card:#151f32;--line:#26334c;--text:#eef3ff;--muted:#9eabc1;--blue:#70a6ff;--good:#4ed6a0;--bad:#ff7b81}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% -15%,#21335b 0,transparent 58%),var(--bg);font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text)}.shell{width:min(720px,100% - 32px);margin:0 auto;padding:26px 0 22px}.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.2px;margin:8px 0 28px}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:linear-gradient(145deg,#81b5ff,#576efa);color:#091326;font-weight:900;font-size:22px}.tag{font-size:11px;font-weight:600;color:#b4c4e4;border:1px solid #40506c;border-radius:999px;padding:2px 8px;margin-left:2px}.card{padding:clamp(22px,6vw,40px);background:linear-gradient(150deg,#18253a,#131d2f);border:1px solid var(--line);border-radius:22px;box-shadow:0 20px 70px #0003}.eyebrow{color:var(--blue);font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase}h1{font-size:clamp(28px,6vw,38px);line-height:1.16;margin:12px 0}.intro{color:var(--muted);margin:0 0 18px;max-width:560px}.feature-tags{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 8px}.feature-tag{display:flex;align-items:baseline;gap:7px;padding:8px 12px;border:1px solid #30476b;border-radius:12px;background:linear-gradient(140deg,#1a2d49,#17243a);box-shadow:inset 0 1px #ffffff08}.feature-tag strong{font-size:15px;color:#a9ccff;letter-spacing:.2px}.feature-tag small{font-size:11px;color:#a4b1c7}.spec-note{margin:0 0 24px;color:#8291aa;font-size:11px}label{display:block;font-size:13px;font-weight:650;margin-bottom:8px}input{width:100%;height:58px;padding:0 16px;border:1px solid #33415a;border-radius:13px;background:#0d1525;color:var(--text);font-size:22px;letter-spacing:4px;text-transform:uppercase;outline:none}input:focus{border-color:var(--blue);box-shadow:0 0 0 3px #70a6ff25}button{border:0;border-radius:12px;background:linear-gradient(120deg,#83b8ff,#7090ff);color:#071329;font:700 16px system-ui;min-height:52px;padding:0 20px;cursor:pointer}form button{width:100%;margin-top:14px}button:disabled{opacity:.55;cursor:wait}.status{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:14px;margin-top:20px;min-height:24px}.dot{width:9px;height:9px;border-radius:100%;background:#748198}.status[data-state=connecting] .dot{background:#ffcc68;box-shadow:0 0 0 4px #ffcc6820}.status[data-state=connected] .dot{background:var(--good);box-shadow:0 0 0 4px #4ed6a020}.status[data-state=error] .dot{background:var(--bad);box-shadow:0 0 0 4px #ff7b8120}.viewer{margin-top:18px;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#05080f}.viewer video{display:block;width:100%;max-height:72vh;min-height:200px;object-fit:contain;background:#05080f}.video-tools{display:flex;align-items:center;gap:8px;padding:10px 12px;color:var(--muted);font-size:13px}.video-tools span{margin-right:auto}.video-tools button{min-height:36px;padding:0 13px;font-size:13px}.video-tools .quiet{background:#283449;color:var(--text)}.hidden{display:none}footer{padding:18px 5px;color:#7e8ba3;font-size:12px;text-align:center}@media(max-width:480px){.shell{width:min(100% - 24px,720px);padding-top:15px}.brand{margin-bottom:18px}.video-tools{gap:6px;padding:8px}.video-tools button{padding:0 10px}}