:root{
  --bg:#101416; --panel:#161b1d; --panel2:#1d2326; --line:#262d31;
  --ink:#e7ecec; --dim:#8b9398; --faint:#6c7478;
  --red:#ff6f61; --green:#63d29a; --mint:#7fd3a4; --amber:#e0b050;
  --sans:ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Charter,Georgia,serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
  --pad:clamp(18px,5vw,56px);
}
*{box-sizing:border-box;}
body{margin:0;}
.wrap{background:var(--bg); color:var(--ink); font-family:var(--sans); line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:clip; min-height:100vh;}
.col{max-width:1020px; margin-inline:auto; padding-inline:var(--pad);}
h1,h2{margin:0; font-weight:600; text-wrap:balance;}
:focus-visible{outline:2px solid var(--mint); outline-offset:2px; border-radius:4px;}

.eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--faint); margin:0 0 10px;}

/* hero */
.hero{padding-block:clamp(34px,6vw,62px) 26px;}
.brand{display:flex; align-items:center; gap:9px; margin-bottom:26px;}
.brand b{font-family:var(--serif); font-size:19px; font-weight:600; letter-spacing:0.01em;}
.hero h1{font-family:var(--serif); font-size:clamp(32px,5.4vw,56px); line-height:1.04; letter-spacing:-0.02em; max-width:17ch;}
.lede{margin:20px 0 0; color:var(--dim); font-size:clamp(15px,1.4vw,17.5px); max-width:66ch;}

/* chart panel */
.panel{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:clamp(18px,3vw,28px); margin-top:10px;}
.panelhead{display:flex; justify-content:space-between; align-items:flex-start; gap:18px; flex-wrap:wrap; margin-bottom:6px;}
.axisnote{margin:0; font-size:12.5px; color:var(--faint);}
.offbase[hidden]{display:none;}
.offbase{display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; letter-spacing:0.04em; color:var(--amber); background:rgba(224,176,80,0.08); border:1px solid rgba(224,176,80,0.28); border-radius:100px; padding:6px 12px;}
.offbase .dotmark{width:6px; height:6px; border-radius:50%; background:var(--amber); flex:none;}
.chartwrap{margin-top:14px;}
svg#chart{display:block; width:100%; height:auto; overflow:visible;}

.grid{stroke:#232a2e; stroke-width:1;}
.gridv{stroke:#1d2327;}
.axis{stroke:#394247; stroke-width:1;}
.axlab{font-family:var(--mono); font-size:11px; fill:var(--faint);}
.area{fill:rgba(127,211,164,0.07); stroke:none;}
.curve{fill:none; stroke:var(--mint); stroke-width:2.6; stroke-linecap:round;}
.ghost{fill:none; stroke:#4a565c; stroke-width:1.6; stroke-dasharray:5 5;}
.today{stroke:#3d474c; stroke-width:1; stroke-dasharray:3 4;}
.todaylab{font-family:var(--mono); font-size:10px; fill:var(--faint); letter-spacing:0.08em;}
.dot{fill:var(--mint); stroke:var(--panel); stroke-width:2.5;}
.dot.key{fill:var(--red);}
.dotlab{font-family:var(--mono); font-size:12px; font-weight:700; fill:var(--mint);}
.dotlab.key{fill:var(--red); font-size:13px;}

/* milestone readout */
.readout{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:26px;}
@media(max-width:820px){ .readout{grid-template-columns:repeat(2,1fr);} }
@media(max-width:540px){ .readout{grid-template-columns:1fr;} }
.mcard{background:var(--panel2); border:1px solid var(--line); border-radius:11px; padding:15px 16px;}
.mcard.key{border-color:rgba(255,111,97,0.4);}
.myear{font-family:var(--mono); font-size:27px; font-weight:700; color:var(--mint); line-height:1; letter-spacing:-0.01em;}
.mcard.key .myear{color:var(--red);}
.mlabel{font-size:13.5px; color:var(--ink); margin-top:9px; line-height:1.35;}
.mnote{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:0.03em; color:var(--faint); margin-top:8px;}
.mnote.early{color:var(--green);}
.mnote.late{color:var(--amber);}

/* controls */
.controls{margin-top:clamp(36px,5vw,58px);}
.ctrlhead{display:flex; justify-content:space-between; align-items:flex-end; gap:18px; flex-wrap:wrap; margin-bottom:22px;}
.ctrlhead h2{font-family:var(--serif); font-size:clamp(21px,2.6vw,28px);}
.btn{font-family:var(--sans); font-size:13.5px; font-weight:600; cursor:pointer; border-radius:9px; padding:11px 17px; border:1px solid var(--mint); background:var(--mint); color:#0d1214;}
.btn:hover{opacity:.9;} .btn:active{transform:translateY(1px);}
.btn.ghost{background:transparent; color:var(--mint);}

.sliders{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
@media(max-width:780px){ .sliders{grid-template-columns:1fr;} }
.driver{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:17px 18px 15px;}
.dhead{display:flex; justify-content:space-between; align-items:baseline; gap:12px;}
.dname{font-size:15px; font-weight:600;}
.dval{font-family:var(--mono); font-size:11px; letter-spacing:0.04em; color:var(--faint);}
.dval.early{color:var(--green);} .dval.late{color:var(--amber);}
.dends{display:flex; justify-content:space-between; font-family:var(--mono); font-size:10px; letter-spacing:0.05em; color:var(--faint); margin-top:2px;}
.dblurb{font-size:12.8px; color:var(--dim); line-height:1.5; margin:11px 0 0;}

input[type=range]{-webkit-appearance:none; appearance:none; width:100%; background:transparent; margin:15px 0 4px; cursor:pointer;}
input[type=range]::-webkit-slider-runnable-track{height:4px; background:#2f383d; border-radius:100px;}
input[type=range]::-moz-range-track{height:4px; background:#2f383d; border-radius:100px;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:17px; height:17px; border-radius:50%; background:var(--mint); border:2px solid var(--panel); margin-top:-7px;}
input[type=range]::-moz-range-thumb{width:15px; height:15px; border-radius:50%; background:var(--mint); border:2px solid var(--panel);}

/* assumptions */
.assumptions{margin-top:clamp(44px,6vw,72px); padding-top:clamp(30px,4vw,44px); border-top:1px solid var(--line);}
.assumptions h2{font-family:var(--serif); font-size:clamp(22px,2.8vw,30px);}
.body{font-size:15px; color:var(--dim); line-height:1.65; max-width:68ch; margin:16px 0 0;}
.tbl{width:100%; border-collapse:collapse; margin-top:24px; font-size:14px;}
.tbl th{text-align:left; font-family:var(--mono); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--faint); font-weight:500; padding:0 12px 10px 0; border-bottom:1px solid var(--line);}
.tbl td{padding:12px 12px 12px 0; border-bottom:1px solid var(--line); color:var(--dim);}
.tbl td:first-child{color:var(--ink); font-weight:600;}
.tbl .num{font-family:var(--mono); font-variant-numeric:tabular-nums;}
.tbl th.num{text-align:right;} .tbl td.num{text-align:right; color:var(--mint);}
.tbl td.num.soft{font-family:var(--sans); font-size:12.5px; color:var(--faint);}
.honest{margin-top:26px; background:var(--panel2); border:1px solid var(--line); border-left:3px solid var(--amber); border-radius:0 11px 11px 0; padding:17px 19px; font-size:14px; color:var(--dim); line-height:1.6; max-width:76ch;}
.honest b{color:var(--ink);}
.srcs{margin:14px 0 0; padding-left:20px; max-width:70ch;}
.srcs li{font-size:14px; color:var(--dim); line-height:1.6; margin-bottom:8px;}
.srcs b{color:var(--ink); font-weight:600;}
.fine{font-family:var(--mono); font-size:11.5px; color:var(--faint); line-height:1.6; margin-top:18px; max-width:70ch;}
.closing{margin-top:32px;}

.foot{border-top:1px solid var(--line); margin-top:clamp(44px,6vw,70px);}
.foot .col{padding-block:34px 50px;}
.foot p{font-size:13px; color:var(--faint); line-height:1.65; max-width:78ch; margin:0;}
.foot .fb{font-family:var(--serif); color:var(--dim); font-size:15px; margin-top:14px;}