:root{--bg:#fff;--card:#f6f7fb;--line:#dfe1e6;--text:#323338;--muted:#676879;--accent:#6161ff;--ok:#00854a}
@media(prefers-color-scheme:dark){:root{--bg:#181b34;--card:#252a43;--line:#414763;--text:#f5f6f8;--muted:#b5b8ca;--accent:#8b8bff;--ok:#63d6a1}}
*{box-sizing:border-box}body{margin:0;padding:30px 22px 60px;background:var(--bg);color:var(--text);font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.wrap{max-width:860px;margin:auto}.top{display:flex;justify-content:flex-end}.lang-picker{padding:7px 11px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--text)}h1{font-size:2rem;line-height:1.2;margin:12px 0 8px}h2{margin:34px 0 12px;font-size:1.25rem}.sub,.muted{color:var(--muted)}.card{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:18px 20px;margin:14px 0}.step{display:flex;gap:14px}.num{flex:0 0 30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:white;font-weight:800}.demo{width:100%;border:1px solid var(--line);border-radius:12px}.links{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0}.links a{color:white;background:var(--accent);padding:10px 16px;border-radius:8px;text-decoration:none;font-weight:700}.links a.secondary{background:var(--card);border:1px solid var(--line);color:var(--text)}code{font-size:.92em;background:var(--card);border:1px solid var(--line);border-radius:5px;padding:1px 5px}li{margin:8px 0}a{color:var(--accent)}