:root{
  --surface-100:#FFFFFF;--surface-200:#F3F6FB;--ink:#14213D;--ink-muted:#4A5873;
  --brand-blue:#2257D9;--brand-orange:#A8480A;--on-blue:#FFFFFF;--line:#C9CDD5;
  --space-2:8px;--space-4:16px;--space-6:24px;--space-8:32px;--radius-md:8px;--gutter:24px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --surface-100:#0F1B2D;--surface-200:#172640;--ink:#F3F6FB;--ink-muted:#B5C0D4;
  --brand-blue:#7AA2FF;--brand-orange:#FA8938;--on-blue:#0F1B2D;--line:#414C5F;color-scheme:dark}}
:root[data-theme="dark"]{
  --surface-100:#0F1B2D;--surface-200:#172640;--ink:#F3F6FB;--ink-muted:#B5C0D4;
  --brand-blue:#7AA2FF;--brand-orange:#FA8938;--on-blue:#0F1B2D;--line:#414C5F;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--surface-100);color:var(--ink);font:400 16px/24px Figtree,system-ui,-apple-system,sans-serif;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
a{color:var(--brand-blue)}
:focus-visible{outline:3px solid var(--brand-blue);outline-offset:3px;border-radius:var(--radius-md)}
img{display:block;max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 var(--gutter)}
header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) 0}
header img{height:40px;width:auto}
nav{display:flex;align-items:center;gap:var(--space-6)}
.theme{background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:var(--radius-md);width:40px;height:40px;cursor:pointer;display:grid;place-items:center;padding:0}
.doc{max-width:720px;padding:32px 0 64px}
.doc h1{font-size:clamp(32px,5vw,48px);line-height:1.1;margin:0 0 var(--space-6);font-weight:700;color:var(--brand-blue);letter-spacing:-.01em}
.doc h2{font-size:24px;line-height:30px;margin:var(--space-8) 0 var(--space-2);font-weight:700;color:var(--brand-blue)}
.doc p,.doc ul,.doc ol{margin:0 0 var(--space-4)}
.doc ul,.doc ol{padding-left:24px}
.doc li{margin:0 0 6px}
.doc code{background:var(--surface-200);padding:1px 6px;border-radius:4px;font-size:.9em}
footer{border-top:1px solid var(--line);padding:var(--space-8) 0;color:var(--ink-muted);font-size:14px;line-height:20px;display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);flex-wrap:wrap}
footer img{height:28px;width:auto}
footer .links{display:flex;gap:var(--space-4);flex-wrap:wrap}
footer a{color:var(--ink-muted)}
@media (max-width:600px){:root{--gutter:16px}.doc h2{font-size:21px;line-height:28px}}