:root { color-scheme: dark; --bg:#080b0e; --surface:#11171d; --line:#27323b; --line-strong:#3b4a56; --ink:#f1f5f8; --muted:#a4b1bb; --dim:#8b9ba6; --cyan:#54c6ff; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.65 Inter,"Segoe UI Variable","Segoe UI",system-ui,sans-serif; }
a { color:inherit; }
a:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; }
.shell { width:min(760px,calc(100% - 40px)); margin:0 auto; }
header { border-bottom:1px solid var(--line); }
.nav { height:72px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:inline-flex; align-items:center; gap:11px; color:var(--ink); text-decoration:none; font-weight:700; letter-spacing:-.02em; }
.brand img { width:32px; height:32px; border:1px solid var(--line-strong); border-radius:8px; }
.brand small { display:block; color:var(--dim); font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; }
.back { color:var(--cyan); font-size:13px; font-weight:700; text-decoration:none; }
main { padding:70px 0 85px; }
.eyebrow { color:var(--cyan); font-size:11px; font-weight:750; letter-spacing:.15em; text-transform:uppercase; }
h1 { margin:14px 0 15px; font-size:clamp(36px,6vw,56px); line-height:1.05; letter-spacing:-.045em; }
.lede { margin:0 0 36px; color:var(--muted); font-size:17px; }
.panel { padding:25px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
h2 { margin:0 0 10px; font-size:19px; letter-spacing:-.02em; }
h3 { margin:26px 0 7px; font-size:15px; }
p, li { color:var(--muted); }
ul { margin:8px 0 0; padding-left:20px; }
.note { margin-top:20px; padding-top:18px; border-top:1px solid var(--line); color:var(--dim); font-size:12px; }
footer { padding:22px 0 35px; border-top:1px solid var(--line); color:var(--dim); font-size:12px; }
@media (max-width:620px) { .shell { width:min(760px,calc(100% - 32px)); } .nav { height:64px; } main { padding-top:54px; } .panel { padding:19px; } }