:root { color-scheme: dark; --bg:#050505; --surface:#0d0d0d; --text:#f4f4f2; --muted:#a6a6a6; --line:#2b2b2b; }
* { box-sizing:border-box; }
html { scroll-padding-top:24px; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:inherit; text-underline-offset:4px; }
a:hover { color:#fff; }
a:focus-visible,summary:focus-visible { outline:2px solid #fff; outline-offset:5px; }
.shell { width:min(1050px,calc(100% - 40px)); margin-inline:auto; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:84px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:11px; text-decoration:none; font-weight:800; }
.brand img { border-radius:50%; }
nav { display:flex; flex-wrap:wrap; gap:18px; }
.topbar nav a { font-size:14px; text-decoration:none; }
.intro { padding:58px 0 28px; }
.eyebrow { margin:0 0 12px; color:var(--muted); font-size:12px; font-weight:750; letter-spacing:.16em; text-transform:uppercase; }
h1,h2 { margin:0 0 18px; line-height:1.12; letter-spacing:-.04em; }
h1 { font-size:clamp(32px,5.2vw,58px); }
h2 { font-size:clamp(25px,3vw,34px); }
p { margin:0 0 16px; }
.lead { max-width:750px; color:var(--muted); font-size:18px; }
.devices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:28px; }
.devices a { padding:18px; border:1px solid var(--line); border-radius:14px; background:var(--surface); font-size:18px; font-weight:750; text-decoration:none; }
.devices a:hover { border-color:#888; }
.devices span { display:block; margin-top:4px; color:var(--muted); font-size:13px; font-weight:450; }
.card,.note { padding:28px; margin:18px 0; border:1px solid var(--line); border-radius:18px; background:var(--surface); overflow-wrap:anywhere; }
.note strong { display:block; margin-bottom:10px; font-size:20px; }
.card ol,.card ul { margin:0 0 18px; padding-left:24px; }
.card li { padding-left:4px; margin-bottom:12px; }
.hint { margin:18px 0 0; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:14px; }
.actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:20px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:10px 18px; border:1px solid #555; border-radius:10px; text-decoration:none; font-weight:700; }
.primary { background:var(--text); color:var(--bg); border-color:var(--text); }
.primary:hover { background:#fff; color:#000; }
details { border-bottom:1px solid var(--line); }
summary { cursor:pointer; padding:16px 0; font-weight:650; }
details p { padding-bottom:10px; color:var(--muted); }
footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; padding:30px 0 40px; color:var(--muted); font-size:12px; }
@media (max-width:600px) { .shell { width:calc(100% - 32px); } .topbar { gap:12px; min-height:76px; } .topbar nav { gap:12px; } .topbar nav a { font-size:12px; } .intro { padding-top:34px; } .lead { font-size:16px; } .devices { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .devices a { padding:16px 13px; font-size:16px; } .card,.note { padding:22px 20px; border-radius:16px; } .actions .button { width:100%; } footer nav { gap:12px; } }