:root { color-scheme: dark; --ink:#eaf0ff; --muted:#aeb9d2; --panel:#111b31; --line:#2d3c5d; --aqua:#58e0c3; --blue:#7098ff; --orange:#ffb86c; --bg:#07101f; font-family:Inter,ui-sans-serif,system-ui,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:radial-gradient(circle at 75% 0,#162c50 0,transparent 32rem),var(--bg); color:var(--ink); line-height:1.6; }
a { color:var(--aqua); text-underline-offset:.2em; }
cite { font-style:normal; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; z-index:10; left:1rem; top:1rem; padding:.7rem 1rem; border-radius:.5rem; background:var(--aqua); color:#04120f; font-weight:800; transform:translateY(-200%); }
.skip-link:focus { transform:translateY(0); }
:focus-visible { outline:3px solid var(--orange); outline-offset:3px; }
.site-header,.page,.site-footer { width:min(1180px,calc(100% - 2rem)); margin-inline:auto; }
.site-header { display:flex; justify-content:space-between; align-items:center; padding:1rem 0; border-bottom:1px solid var(--line); }
.wordmark { font-weight:800; letter-spacing:.03em; }
nav ul { display:flex; list-style:none; gap:1rem; margin:0; padding:0; }
.hero { padding:5rem 0 2.5rem; max-width:900px; }
.eyebrow { color:var(--aqua); text-transform:uppercase; letter-spacing:.14em; font-weight:700; font-size:.8rem; }
h1 { font-size:clamp(2.6rem,6vw,4.9rem); line-height:1; letter-spacing:-.05em; margin:.4rem 0 1.4rem; }
h2 { font-size:clamp(1.8rem,4vw,3rem); line-height:1.05; letter-spacing:-.035em; margin:0 0 1rem; }
h3 { line-height:1.2; }
.lede { font-size:1.25rem; max-width:760px; color:#ced8ed; }
.fact-pack,.results,.formula-grid,.scenario-grid { display:grid; gap:1rem; }
.fact-pack { grid-template-columns:repeat(4,1fr); margin:2rem 0; }
.fact-pack div,.result-card,.formula-card,.scenario { background:color-mix(in srgb,var(--panel) 90%,transparent); border:1px solid var(--line); border-radius:1rem; padding:1rem; }
dt,.label { color:var(--muted); font-size:.82rem; text-transform:uppercase; letter-spacing:.07em; }
dd { margin:.2rem 0 0; font-weight:750; font-size:1.25rem; }
section { padding:4rem 0; border-top:1px solid var(--line); }
.tool-layout { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr); gap:2rem; align-items:start; }
form { display:grid; gap:1.2rem; background:var(--panel); border:1px solid var(--line); border-radius:1.2rem; padding:1.5rem; }
fieldset { border:0; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem; }
legend { grid-column:1/-1; font-weight:800; margin-bottom:.6rem; }
label { display:grid; gap:.35rem; color:var(--muted); }
label small { color:#b8c5df; line-height:1.35; }
input,select,button { font:inherit; }
input,select { width:100%; padding:.75rem; color:var(--ink); background:#091426; border:1px solid #405174; border-radius:.55rem; }
input::placeholder { color:#aeb9d2; opacity:1; }
.check { display:flex; align-items:center; gap:.5rem; }
.check input { width:auto; }
button { border:0; border-radius:999px; padding:.7rem 1rem; cursor:pointer; background:var(--aqua); color:#04120f; font-weight:800; }
button:disabled { cursor:not-allowed; opacity:.55; }
.secondary { background:transparent; color:var(--ink); border:1px solid var(--line); }
.actions { display:flex; flex-wrap:wrap; gap:.6rem; }
.results { grid-template-columns:1fr 1fr; position:sticky; top:1rem; }
.result-total { grid-column:1/-1; border-color:var(--aqua); }
.number { font-size:1.7rem; font-weight:850; margin:.3rem 0; }
.warning { color:#ffd29d; }
.scroll { overflow-x:auto; }
table { width:100%; border-collapse:collapse; min-width:680px; }
caption { text-align:left; color:var(--muted); margin-bottom:.75rem; }
th,td { padding:.8rem; border-bottom:1px solid var(--line); text-align:left; }
th { color:var(--aqua); }
figure { margin:2rem 0; padding:1.2rem; background:#0b1629; border:1px solid var(--line); border-radius:1rem; }
svg { width:100%; height:auto; }
figcaption { color:var(--muted); margin-top:.8rem; }
.formula-grid,.scenario-grid { grid-template-columns:repeat(2,1fr); }
.note { border-left:3px solid var(--orange); padding:.6rem 1rem; background:#231b19; }
.site-footer { padding:2rem 0 4rem; color:var(--muted); }
code { color:#b9f8ec; }
@media (max-width:760px) { .tool-layout,.formula-grid,.scenario-grid,.results { grid-template-columns:minmax(0,1fr); } .fact-pack { grid-template-columns:1fr 1fr; } .site-header { align-items:flex-start; flex-direction:column; gap:.6rem; } nav { width:100%; overflow-x:auto; } nav ul { width:max-content; } fieldset { grid-template-columns:1fr; } .results { position:static; } .result-total { grid-column:auto; } figure { overflow-x:auto; } figure svg { min-width:680px; } h1 { font-size:clamp(2.5rem,13vw,3.3rem); } }
@media (max-width:360px) { .fact-pack { grid-template-columns:1fr; } .site-header,.page,.site-footer { width:min(100% - 1.25rem,1180px); } form { padding:1rem; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

#planner-inputs { display:grid; grid-template-columns:minmax(0,1fr); gap:1.2rem; min-width:0; }
fieldset > p { grid-column:1/-1; margin:0 0 .4rem; }