:root{--bg:#f7f8fa;--card:#fff;--ink:#16202c;--muted:#5b6676;--line:#dde2e9;--accent:#c2410c;--accent-ink:#fff}
@media (prefers-color-scheme:dark){:root{--bg:#10151c;--card:#18212c;--ink:#e7ecf2;--muted:#9aa6b5;--line:#2b3644;--accent:#fb923c;--accent-ink:#1a0d03;color-scheme:dark}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;padding:48px max(16px,env(safe-area-inset-right,0px)) 48px max(16px,env(safe-area-inset-left,0px))}
main{max-width:640px;margin:0 auto;display:grid;gap:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:28px;display:grid;gap:14px}
h1{font-size:1.9rem;line-height:1.2;margin:0}
h2{font-size:1.15rem;margin:8px 0 0}
p,ul{margin:0}
ul{padding-left:1.2rem;display:grid;gap:6px}
a{color:var(--accent)}
.muted{color:var(--muted);font-size:.92rem}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn{display:inline-block;padding:10px 16px;border-radius:8px;background:var(--accent);color:var(--accent-ink);text-decoration:none;font-weight:600;border:0;font:inherit;font-weight:600;cursor:pointer}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em}
pre{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:12px;overflow-x:auto;margin:0}
footer{text-align:center}