:root { color-scheme: light; --ink:#142b42; --muted:#4c6072; --line:#dbe4ed; --blue:#1469aa; --orange:#b05b17; --green:#08775d; --purple:#7454a8; --paper:#fff; --bg:#edf3f8; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--bg); line-height:1.55; }
.wrap { width:min(1100px,calc(100% - 32px)); margin:auto; }
.hero { background:linear-gradient(125deg,#102a45,#194e70 68%,#256e86); color:#fff; padding:54px 0 34px; }
.eyebrow { margin:0 0 14px; color:#a9dce8; font-size:.77rem; font-weight:750; letter-spacing:.1em; text-transform:uppercase; }
h1 { font-size:clamp(2.2rem,5vw,4.1rem); line-height:1.08; letter-spacing:-.045em; margin:0 0 18px; }
.lead { max-width:760px; font-size:1.17rem; color:#e2edf5; margin:0; }
nav { display:flex; flex-wrap:wrap; gap:9px; margin-top:28px; }
nav a { color:#fff; text-decoration:none; border:1px solid #81a8bd; border-radius:99px; padding:7px 12px; font-size:.88rem; }
nav a:hover, nav a:focus-visible { background:#ffffff24; outline-color:#fff; }
main { padding:28px 0 32px; }
.card { background:var(--paper); border:1px solid var(--line); box-shadow:0 9px 30px #1539570d; border-radius:19px; margin:0 0 22px; padding:clamp(22px,3vw,34px); scroll-margin-top:16px; }
.section-heading { display:flex; gap:17px; align-items:flex-start; }
.step { display:grid; place-items:center; flex:none; width:41px; height:41px; border-radius:12px; background:#e3f3fb; color:#145f92; font-size:.91rem; font-weight:800; }
h2 { margin:0 0 7px; font-size:clamp(1.4rem,2.5vw,1.9rem); line-height:1.22; letter-spacing:-.025em; }
.section-heading p { margin:0 0 18px; color:var(--muted); max-width:830px; }
.control-row { margin:15px 0 10px 58px; max-width:850px; }
label { display:block; font-weight:650; }
output { font-variant-numeric:tabular-nums; color:#095c92; font-weight:850; }
input[type=range] { width:100%; accent-color:#1469aa; height:30px; cursor:pointer; }
.presets { display:flex; gap:7px; flex-wrap:wrap; margin:6px 0 0; }
button { background:#edf6fb; border:1px solid #bad7e8; border-radius:8px; color:#154f75; padding:4px 12px; font:inherit; font-size:.86rem; font-weight:700; cursor:pointer; }
button:hover,button:focus-visible { background:#d9eef9; }
.controls-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin:12px 0 0 58px; }
.chart-wrap { margin:10px 0 3px 50px; overflow-x:auto; }
svg { display:block; width:100%; min-width:570px; height:auto; }
.two-col { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; margin:16px 0 0 58px; }
.metric { border:1px solid var(--line); border-radius:12px; padding:14px; background:#fbfdff; }
.metric-top { display:flex; align-items:center; gap:9px; line-height:1.2; }
.metric-top strong { flex:1; }
.metric-top output { font-size:1.25rem; }
.swatch { width:13px; height:13px; flex:none; border-radius:50%; background:var(--blue); }
.other .swatch { background:var(--orange); }
.other output { color:var(--orange); }
.stack { height:15px; background:#dce5ec; border-radius:99px; overflow:hidden; margin:11px 0 7px; }
.stack span { display:block; height:100%; background:var(--blue); }
.other .stack span { background:var(--orange); }
.metric small { color:var(--muted); }
.takeaway { background:#e7f2f8; border-left:4px solid var(--blue); padding:12px 15px; border-radius:0 9px 9px 0; margin:17px 0 10px 58px; font-weight:700; }
.fine { color:var(--muted); margin:10px 0 0 58px; font-size:.9rem; }
.source { background:#dcebf3; border:1px solid #b8d2e2; border-radius:13px; padding:18px 21px; }
.source a { color:#07598f; font-weight:750; }
.fine a { color:#07598f; }
footer { padding:0 0 35px; color:var(--muted); font-size:.83rem; }
code { background:#eff3f6; border-radius:4px; padding:1px 4px; }
@media(max-width:750px) { .hero { padding-top:35px; } .controls-grid,.two-col { grid-template-columns:1fr; } .control-row,.controls-grid,.chart-wrap,.two-col,.takeaway,.fine { margin-left:0; } .section-heading { gap:10px; } .step { width:35px; height:35px; } .card { padding:20px 16px; } }