:root { --bg:#0f1017; --panel:#181a25; --line:#262938; --text:#e9e9f1; --muted:#a3a5b5; --accent:#6c63ff; --accent-light:#9b93ff; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; background:var(--bg); color:var(--text); font:17px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
a { color:var(--accent-light); }
a:hover { color:#fff; }
.wrap { max-width:760px; margin:0 auto; padding:0 20px; }
.wrap.wide { max-width:1000px; }
.top { border-bottom:1px solid var(--line); position:sticky; top:0; background:rgba(15,16,23,.92); backdrop-filter:blur(8px); z-index:5; }
.top .wrap { max-width:1000px; display:flex; align-items:center; justify-content:space-between; height:60px; }
.brand { display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-weight:700; }
.brand img { border-radius:7px; }
nav a { margin-left:20px; text-decoration:none; color:var(--muted); font-size:15px; }
nav a:hover { color:#fff; }
main { padding-top:24px; padding-bottom:56px; }
h1 { font-size:44px; line-height:1.15; margin:18px 0 8px; }
h2 { font-size:25px; margin:48px 0 12px; }
h3 { font-size:18px; margin:0 0 6px; }
section { margin-bottom:8px; }
.hero { text-align:center; padding:40px 0 12px; }
.app-icon { border-radius:22px; box-shadow:0 10px 40px rgba(108,99,255,.35); }
.tag { font-size:22px; margin:0 auto 6px; max-width:620px; }
.sub { color:var(--muted); margin:0 0 22px; }
.badge-soon { display:inline-block; padding:11px 22px; border-radius:999px; background:var(--accent); color:#0b0b12; font-weight:700; }
.shots { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:36px 0 8px; }
.shots img { width:100%; height:auto; border-radius:16px; border:1px solid var(--line); display:block; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:18px; }
.card p { margin:0; color:var(--muted); font-size:15.5px; line-height:1.55; }
ul { padding-left:22px; } li { margin:6px 0; }
code { background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:1px 6px; font-size:.9em; }
hr { border:0; border-top:1px solid var(--line); margin:36px 0; }
.table-wrap { overflow-x:auto; }
table { border-collapse:collapse; width:100%; font-size:15.5px; }
th,td { text-align:left; vertical-align:top; padding:10px 12px; border-bottom:1px solid var(--line); }
th { color:var(--muted); font-weight:600; }
.doc h1 { font-size:34px; }
.doc h2 { font-size:22px; margin-top:38px; }
footer { border-top:1px solid var(--line); color:var(--muted); font-size:14.5px; padding:26px 0 40px; text-align:center; }
footer p { margin:6px 0; } .small { font-size:12.5px; opacity:.8; }
@media (max-width:820px) { .grid { grid-template-columns:repeat(2,1fr); } .shots { grid-template-columns:repeat(2,1fr); } h1 { font-size:36px; } }
@media (max-width:520px) { .grid { grid-template-columns:1fr; } nav a { margin-left:14px; } .tag { font-size:19px; } }