/* Design tokens (colours, shadows), dark mode, reset. Change brand colours here. */
:root{
  --bg:#f6f7fb;--surface:#fff;--ink:#0f172a;--muted:#5b6478;--line:#e2e6ef;
  --brand:#4f46e5;--brand2:#0ea5e9;--ml:36%;--shadow:0 1px 2px rgba(15,23,42,.05),0 10px 30px rgba(15,23,42,.07);
  --codebg:#0f172a;--codeink:#e2e8f0;--chip:#eef1f8;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bg:#0a0f1f;--surface:#121a30;--ink:#e8ecf6;--muted:#9aa6bf;--line:#222c48;--brand:#818cf8;--brand2:#38bdf8;--ml:72%;--shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);--codebg:#070b17;--chip:#1a2340}
}
:root[data-theme="dark"]{--bg:#0a0f1f;--surface:#121a30;--ink:#e8ecf6;--muted:#9aa6bf;--line:#222c48;--brand:#818cf8;--brand2:#38bdf8;--ml:72%;--shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);--codebg:#070b17;--chip:#1a2340}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--brand)}
button{font:inherit;color:inherit;cursor:pointer}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.muted{color:var(--muted)}