/* Colours, type and the basic building blocks. Loaded first. */
:root{
  --bg:#FFFFFF; --rail:#FAFAFA; --surface:#FFFFFF; --raised:#F4F4F5; --hover:#F7F7F8; --segon:#FFFFFF;
  --line:#EBEBED; --line2:#DCDCE0;
  --text:#0A0A0B; --ink2:#3F3F46; --muted:#71717A; --faint:#A1A1AA;
  --brand:#4F46E5; --brandtext:#4338CA; --brandsoft:#EEF0FF;
  --good:#16A34A; --goodtext:#15803D; --goodsoft:#ECFDF3; --tok:#4ADE80;
  --warn:#D97706; --warntext:#B45309; --warnsoft:#FEF5E4;
  --pause:#D4D4D8; --btn:#0A0A0B; --btntext:#FFFFFF;
  --pop:0 0 0 1px rgba(10,10,11,.06),0 14px 36px rgba(10,10,11,.13);
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#09090B; --rail:#0B0B0D; --surface:#0F0F11; --raised:#1A1A1D; --hover:#141416; --segon:#2A2A2F;
    --line:#1F1F23; --line2:#2C2C32;
    --text:#FAFAFA; --ink2:#D4D4D8; --muted:#A1A1AA; --faint:#6B6B74;
    --brand:#8B8DFF; --brandtext:#A5A7FF; --brandsoft:#1A1B3A;
    --good:#22C55E; --goodtext:#4ADE80; --goodsoft:#0E2A19; --tok:#1F9D4D;
    --warn:#F59E0B; --warntext:#FBBF24; --warnsoft:#2C2008;
    --pause:#3A3A40; --btn:#FAFAFA; --btntext:#09090B;
    --pop:0 0 0 1px rgba(255,255,255,.08),0 18px 44px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg:#09090B; --rail:#0B0B0D; --surface:#0F0F11; --raised:#1A1A1D; --hover:#141416; --segon:#2A2A2F;
  --line:#1F1F23; --line2:#2C2C32;
  --text:#FAFAFA; --ink2:#D4D4D8; --muted:#A1A1AA; --faint:#6B6B74;
  --brand:#8B8DFF; --brandtext:#A5A7FF; --brandsoft:#1A1B3A;
  --good:#22C55E; --goodtext:#4ADE80; --goodsoft:#0E2A19; --tok:#1F9D4D;
  --warn:#F59E0B; --warntext:#FBBF24; --warnsoft:#2C2008;
  --pause:#3A3A40; --btn:#FAFAFA; --btntext:#09090B;
  --pop:0 0 0 1px rgba(255,255,255,.08),0 18px 44px rgba(0,0,0,.6);
}
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
html.lock{overflow:hidden}
html{background:var(--bg);scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font:400 13.5px/1.5 var(--sans);letter-spacing:-.006em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
button{font:inherit;letter-spacing:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
::selection{background:var(--brandsoft)}
.page{max-width:1200px;margin:0 auto;padding:0 28px 140px}
h2{font-weight:600;font-size:15px;letter-spacing:-.018em;line-height:1.3}
.sub{color:var(--muted);margin-top:2px;font-size:13.5px}
.sub a{color:var(--text);font-weight:500;text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.sub a:hover{text-decoration-color:var(--text)}
section{margin-top:36px}
section,h2{scroll-margin-top:68px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px}
.h1{font-weight:600;font-size:26px;letter-spacing:-.035em;line-height:1.15}
.vh,.chead{margin-top:28px}
