:root{--bg:#fbfaf7;--fg:#1d1b20;--mut:#5d5966;--acc:#2e7d5b;--card:#fff;--bd:#e6e1e8}
@media (prefers-color-scheme:dark){:root{--bg:#121114;--fg:#ece7ef;--mut:#b0aab6;--acc:#7fd1a8;--card:#1c1b1f;--bd:#2f2d33}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--fg)}
main,header,footer{max-width:760px;margin:0 auto;padding:0 20px}
header{display:flex;align-items:center;gap:12px;padding-top:18px;flex-wrap:wrap}
header a.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font-weight:700;font-size:1.2rem}
header img{border-radius:12px}nav.langs{margin-left:auto;font-size:.9rem}nav.langs a{margin-left:8px}
a{color:var(--acc)}h1{font-size:1.9rem;line-height:1.2;margin:.6em 0 .3em}h2{font-size:1.15rem;margin:1.6em 0 .4em;color:var(--acc)}
.lead{font-size:1.15rem;color:var(--mut)}.hero{width:100%;height:auto;border-radius:14px;margin:12px 0;border:1px solid var(--bd)}
.badge{display:inline-block;padding:10px 16px;border-radius:999px;border:1px solid var(--bd);background:var(--card);font-weight:600}
.pro{display:inline-block;margin-left:8px;font-size:.9rem;color:var(--mut)}
ul{padding-left:1.2em}li{margin:.2em 0}.card{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:16px 18px;margin:14px 0}
code,.code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85em;word-break:break-all}
.code{display:block;background:var(--card);border:1px solid var(--bd);border-radius:10px;padding:10px;user-select:all;max-height:9em;overflow:auto}
button,.btn{font:inherit;padding:10px 16px;border-radius:999px;border:0;background:var(--acc);color:var(--bg);font-weight:600;text-decoration:none;display:inline-block;cursor:pointer;margin:6px 6px 0 0}
footer{color:var(--mut);font-size:.9rem;padding:28px 20px 40px}.muted{color:var(--mut)}