:root{
  --paper:#F5F7F8;--card:#FFFFFF;--ink:#12212E;--ink2:#3C4A56;--ink3:#6A7883;
  --line:#DFE5E8;--line2:#EDF1F2;--field:#FBFCFC;--accent:#0E7C7B;--accent-soft:#DCEDEC;
  --cost:#D9663F;--good:#2F9E68;--r:11px;--r-lg:16px;
  --mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{--paper:#0D1621;--card:#152230;--ink:#EAF0F3;--ink2:#B4C1CB;--ink3:#7E8E9A;
    --line:#25384A;--line2:#1C2C3B;--field:#101B27;--accent:#3BA7A2;--accent-soft:#123330;--cost:#E68159;--good:#54C088;}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.62;font-size:16px;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
h1,h2,h3{text-wrap:balance;letter-spacing:-.015em}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

header.site{position:sticky;top:0;z-index:10;border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:saturate(1.3) blur(9px)}
.site-in{max-width:840px;margin:0 auto;padding:0 22px;height:60px;display:flex;align-items:center;gap:10px}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:17px;color:var(--ink);text-decoration:none}
.brand svg{width:24px;height:24px;flex:0 0 auto}
.spacer{flex:1}
.site-in .home{font-size:14px;font-weight:600;white-space:nowrap}

main{max-width:840px;margin:0 auto;padding:26px 22px 10px}
.crumb{font-size:13px;color:var(--ink3);margin-bottom:12px}
.crumb a{color:var(--ink3);text-decoration:none}
.crumb a:hover{color:var(--accent)}
h1{font-size:34px;line-height:1.14;margin:.15em 0 .35em}
.lede{font-size:18px;color:var(--ink2);margin:0 0 22px;max-width:62ch}
.cta{display:inline-flex;align-items:center;gap:9px;background:var(--accent);color:#fff;text-decoration:none;
  font-weight:650;font-size:16px;padding:14px 24px;border-radius:12px;box-shadow:0 10px 26px -12px var(--accent)}
.cta:hover{filter:brightness(1.07)}
.cta-note{font-size:13px;color:var(--ink3);margin-top:9px}

h2{font-size:23px;margin:38px 0 10px}
h3{font-size:17px;margin:22px 0 4px}
main p,main li{color:var(--ink2);max-width:66ch}
main ul{padding-left:20px}
main li{margin:5px 0}
.formula{font-family:var(--mono);background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:12px 15px;font-size:14px;overflow-x:auto;color:var(--ink)}

.example{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;margin:18px 0;box-shadow:0 1px 2px rgba(18,33,46,.04)}
.example .h{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink3);font-weight:700;margin-bottom:10px}
.example table{width:100%;border-collapse:collapse;font-size:15px}
.example td{padding:7px 0;border-bottom:1px solid var(--line2);color:var(--ink2)}
.example td:last-child{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}
.example tr:last-child td{border-bottom:0}
.example tr.big td:last-child{color:var(--accent);font-size:17px}

details{border-bottom:1px solid var(--line2)}
summary{cursor:pointer;font-weight:600;color:var(--ink);padding:13px 0;list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';color:var(--accent);font-weight:700;font-size:18px}
details[open] summary::after{content:'\2013'}
details p{margin:0 0 13px;font-size:15px}

.related{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:14px 0 8px}
.related a{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:13px 16px;text-decoration:none;color:var(--ink);font-weight:650;font-size:15px}
.related a:hover{border-color:var(--accent)}
.related a span{display:block;color:var(--ink3);font-weight:400;font-size:13px;margin-top:2px}
@media (max-width:560px){ .related{grid-template-columns:1fr} h1{font-size:28px} .lede{font-size:17px} }

footer.site{border-top:1px solid var(--line);margin-top:34px}
footer.site .f-in{max-width:840px;margin:0 auto;padding:22px;color:var(--ink3);font-size:13px}
footer.site a{color:var(--ink3)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}