:root{color-scheme:dark;--bg:#080a0f;--card:#121620;--line:#252c3b;--text:#eef2ff;--muted:#929db2;--accent:#7857ff;--accent2:#a68fff;--ok:#35d07f;--warn:#ffb84a;--danger:#ff6070;font:15px/1.55 Inter,Segoe UI,sans-serif;scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 12% -8%,#2a1f5d66,transparent 32%),radial-gradient(circle at 94% 18%,#142c4950,transparent 25%),var(--bg);color:var(--text)}
main{max-width:1120px;margin:auto;padding:0 22px 70px}
header,.topline,.section-title,.room-head{display:flex;justify-content:space-between;align-items:center;gap:16px}
header{position:sticky;top:0;z-index:5;background:#080a0fe8;backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding:18px 0}
.logo{font-size:18px;font-weight:800;color:var(--text);text-decoration:none}.brand{color:var(--accent2);margin-right:7px}
nav{display:flex;gap:20px}nav a{color:var(--muted);text-decoration:none;font-size:13px;font-weight:700}nav a:hover{color:var(--text)}
.hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:36px;align-items:center;padding:88px 0 66px}.hero h1{max-width:780px}.lead{font-size:18px;color:#b7c0d2;max-width:62ch}
.card,.room,.status-card{background:linear-gradient(145deg,#151a26,#0f131c);border:1px solid var(--line);border-radius:17px;padding:28px;box-shadow:0 18px 60px #0004}.status-card{border-color:#3c345d}.status-list{padding:0;list-style:none;display:grid;gap:13px;margin:20px 0}.notice{padding:13px;border-radius:10px;background:#ffb84a12;border:1px solid #ffb84a42;color:#e9c78d;font-size:13px}
.section-block{padding:58px 0;border-top:1px solid var(--line)}
h1{font-size:clamp(42px,7vw,72px);line-height:1.02;letter-spacing:-.045em;margin:11px 0 22px}h2{font-size:clamp(28px,4vw,42px);letter-spacing:-.025em;margin:7px 0 26px}h3{margin:6px 0 9px}.eyebrow{font-size:12px;letter-spacing:.18em;color:var(--accent2);font-weight:800}.muted,.download-card p,.steps p{color:var(--muted)}
label{display:grid;gap:7px;color:#c9d0df;font-size:13px;margin:18px 0}input{width:100%;border:1px solid #313a4e;background:#090c12;border-radius:9px;color:white;padding:12px 13px;font:inherit;outline:none}input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #7857ff26}
button,.button{display:inline-flex;justify-content:center;align-items:center;border:0;border-radius:9px;background:var(--accent);color:white;padding:12px 17px;font-weight:750;cursor:pointer;text-decoration:none}button:disabled{cursor:not-allowed;background:#313746;color:#858da0}.secondary{background:#293044}.ghost{background:transparent;border:1px solid var(--line)}.actions{display:flex;gap:10px;flex-wrap:wrap}.pill,.tag{border:1px solid var(--line);border-radius:99px;padding:6px 10px;font-size:12px;color:var(--muted)}.online,.tag.ready{color:var(--ok);border-color:#35d07f55}.error{color:var(--danger);min-height:1.5em}
.download-grid,.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.download-card{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.download-card .button,.download-card button{margin:8px 0}.download-card small{color:#778195}.download-card.unavailable{border-color:#ffb84a40}
.steps{display:grid;grid-template-columns:1fr 1fr;gap:14px}.steps article{display:flex;gap:17px;padding:22px;border:1px solid var(--line);border-radius:14px;background:#0d1119}.steps b{display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:10px;background:#7857ff25;color:#b8a8ff}.steps h3,.steps p{margin-top:0}
.auth-card{max-width:680px}.grid{margin:28px 0 45px}.rooms{display:grid;gap:12px}.room{padding:20px}.code{font:700 20px ui-monospace,monospace;letter-spacing:.15em}.members{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}.member{font-size:13px;color:var(--muted)}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#4b5364;margin-right:7px}.dot.on{background:var(--ok);box-shadow:0 0 12px #35d07f99}.dot.warn{background:var(--warn)}code{color:#c7baff;background:#191527;padding:2px 5px;border-radius:5px}
footer{display:flex;justify-content:space-between;gap:15px;color:#6f788a;border-top:1px solid var(--line);padding-top:26px;font-size:12px}
@media(max-width:780px){header{flex-wrap:wrap}nav{order:3;width:100%;justify-content:space-between}.hero,.download-grid,.grid,.steps{grid-template-columns:1fr}.hero{padding:52px 0}.section-block{padding:44px 0}.card,.status-card{padding:21px}footer{flex-direction:column}}