:root{--fg:#1d1d1f;--muted:#6e6e73;--bg:#fff;--card:#f5f5f7;--line:#d2d2d7;--accent:#2563eb}
@media(prefers-color-scheme:dark){:root{--fg:#e8e8ea;--muted:#a1a1a6;--bg:#161618;--card:#222226;--line:#3a3a3f;--accent:#7aa2ff}}
*{box-sizing:border-box}
body{font:17px/1.6 -apple-system,system-ui,"Segoe UI",sans-serif;max-width:680px;margin:56px auto;padding:0 20px;color:var(--fg);background:var(--bg)}
h1{font-size:30px;line-height:1.2;margin:16px 0 8px}h2{font-size:20px;margin:32px 0 8px}
p,li{color:var(--fg)}.muted{color:var(--muted);font-size:15px}
a{color:var(--accent)}img.icon{width:64px;height:64px}
ol.steps{padding:0;list-style:none;counter-reset:s}
ol.steps li{counter-increment:s;background:var(--card);border-radius:12px;padding:16px 18px 16px 56px;margin:10px 0;position:relative}
ol.steps li::before{content:counter(s);position:absolute;left:18px;top:15px;width:26px;height:26px;border-radius:50%;background:var(--fg);color:var(--bg);font-weight:600;font-size:14px;display:grid;place-items:center}
kbd{white-space:nowrap;font:600 14px/1 ui-monospace,SFMono-Regular,Menlo,monospace;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:3px 7px;background:var(--bg)}
code{font:14px ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--card);padding:2px 6px;border-radius:5px}
.button{display:inline-block;background:var(--fg);color:var(--bg);text-decoration:none;font-weight:600;border:0;border-radius:10px;padding:11px 18px;font-size:16px;cursor:pointer}
.button.secondary{background:var(--card);color:var(--fg)}
form label{display:block;padding:9px 12px;border-radius:10px;cursor:pointer}form label:hover{background:var(--card)}
textarea{width:100%;min-height:96px;font:inherit;color:inherit;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px}
.hp{position:absolute;left:-9999px}
footer{margin-top:56px;color:var(--muted);font-size:14px}
.hero p.lead{font-size:20px;color:var(--muted);margin:8px 0 20px}
figure{margin:28px 0}figure img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line)}figcaption{color:var(--muted);font-size:15px;margin-top:6px}
details{border-bottom:1px solid var(--line);padding:12px 0}summary{font-weight:600;cursor:pointer}
nav.top{display:flex;gap:16px;font-size:15px;margin-bottom:32px}nav.top a{color:var(--muted);text-decoration:none}
article h2{margin-top:36px}article .note{background:var(--card);border-radius:12px;padding:14px 18px}
table{border-collapse:collapse;width:100%;font-size:15px}td,th{border-bottom:1px solid var(--line);padding:8px 6px;text-align:left;vertical-align:top}
.badges{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:48px;font-size:14px}.badges img{height:40px;width:auto}