:root{
  --paper:#F3F5F9; --surface:#FFFFFF; --ink:#0C1730; --muted:#4F5B73; --line:#D5DCE8; --accent:#1A4FD6; --accent-soft:#E2EAFB;
  --logo-light:block; --logo-dark:none;
  --f-display:"Outfit","Avenir Next","Century Gothic",system-ui,sans-serif;
  --f-body:"DM Sans","Avenir Next",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Outfit","Avenir Next",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --paper:#0A1020; --surface:#111A2E; --ink:#E5EBF7; --muted:#93A0BA; --line:#22304A; --accent:#5AA8FF; --accent-soft:#14254A;
  --logo-light:none; --logo-dark:block; color-scheme:dark }}
:root[data-theme="dark"]{
  --paper:#0A1020; --surface:#111A2E; --ink:#E5EBF7; --muted:#93A0BA; --line:#22304A; --accent:#5AA8FF; --accent-soft:#14254A;
  --logo-light:none; --logo-dark:block; color-scheme:dark }
*{box-sizing:border-box}
html{padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0; background:var(--paper); color:var(--ink); font:1rem/1.65 var(--f-body); padding-inline:16px}
.wrap{max-width:820px; margin-inline:auto}
header{display:flex; justify-content:space-between; align-items:center; gap:16px; padding-block:18px; border-bottom:1px solid var(--line)}
.logo{height:42px; width:auto} .logo.l{display:var(--logo-light)} .logo.d{display:var(--logo-dark)}
header nav{display:flex; gap:18px; font-size:.92rem} header nav a{color:var(--muted); text-decoration:none} header nav a[aria-current]{color:var(--accent); font-weight:600}
main{padding-block:48px 72px}
.eyebrow{font-family:var(--f-mono); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin:0}
h1{font-family:var(--f-display); font-weight:600; font-size:clamp(2.2rem,5vw,3.2rem); letter-spacing:-.025em; line-height:1.05; margin:.3em 0 .2em; text-wrap:balance}
.meta{color:var(--muted); font-size:.92rem; margin:0 0 28px}
.toc{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:18px 22px; margin-bottom:40px}
.toc ol{margin:0; padding-left:20px; columns:2; column-gap:28px; font-size:.95rem} .toc a{color:var(--ink)}
@media (max-width:600px){ .toc ol{columns:1} }
h2{font-family:var(--f-display); font-size:1.45rem; font-weight:600; letter-spacing:-.01em; margin:44px 0 12px; scroll-margin-top:20px; text-wrap:balance}
p,ul,ol{max-width:68ch} li{margin-block:4px}
a{color:var(--accent)}
.tbl{overflow-x:auto; border:1px solid var(--line); border-radius:10px; background:var(--surface); margin-block:16px}
table{border-collapse:collapse; width:100%; font-size:.93rem}
th,td{text-align:left; vertical-align:top; padding:10px 14px; border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:0}
th{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600}
td:first-child{font-weight:600}
.ph{background:var(--accent-soft); border-radius:4px; padding:0 4px}
.note{border-left:3px solid var(--accent); padding:10px 16px; background:var(--surface); color:var(--muted); font-size:.92rem; margin-top:40px}
footer{border-top:1px solid var(--line); padding-block:24px; color:var(--muted); font-size:.88rem; display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px}
footer a{color:var(--muted)}
:focus-visible{outline:3px solid var(--accent); outline-offset:3px}