:root{color-scheme:light dark;--fg:#1b1d21;--muted:#5b6170;--bg:#f2f4f8;--card:#fff;--line:#e2e5ec;--accent:#2f5bd3;--warn:#b3261e}
@media (prefers-color-scheme:dark){:root{--fg:#e6e8eb;--muted:#a3a9b5;--bg:#111317;--card:#1b1e24;--line:#2a2e36;--accent:#8aa8ff;--warn:#ffb4ab}}
*{box-sizing:border-box}
body{margin:0;font:17px/1.5 system-ui,sans-serif;color:var(--fg);background:var(--bg)}
main{max-width:520px;margin:0 auto;padding:32px 16px 48px}
header{margin-bottom:20px}
h1{font-size:1.75rem;margin:0 0 4px}
.lead{margin:0;color:var(--muted)}
.step{display:flex;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;margin:14px 0}
.num{flex:none;width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;font-weight:700;display:grid;place-items:center}
.body{flex:1;min-width:0}
h2{font-size:1.15rem;margin:4px 0 6px}
.body p{margin:0 0 12px}
.button{display:block;text-align:center;padding:14px 18px;border-radius:12px;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;font-size:1.05rem;margin:4px 0 12px}
.hint{font-size:.9rem;color:var(--muted)}
.warn{color:var(--warn);font-weight:600}
details{margin-top:24px;font-size:.92rem;color:var(--muted)}
summary{cursor:pointer;font-weight:600}
code{overflow-wrap:anywhere}
a{color:var(--accent)}
.button:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}