:root { --paper:#f7f6f2; --ink:#213b33; --muted:#65746b; --green:#087f6c; --line:#dadfd6; --mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace; font-family:Arial,Helvetica,sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; }
body { margin:0; }
a { color:inherit; text-underline-offset:3px; }
a:hover { color:var(--green); }
button { font:inherit; cursor:pointer; }
button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--green); outline-offset:4px; }
.wrap { width:min(1120px,calc(100% - 80px)); margin-inline:auto; }
header { display:flex; align-items:baseline; gap:18px; padding:36px 0 27px; border-bottom:1px solid var(--line); }
header a,h3 a { text-decoration:none; }
h3 a:hover { text-decoration:underline; }
.updated { font-size:11px; color:var(--muted); margin:0; white-space:nowrap; }
h1 { margin:0; font-size:24px; letter-spacing:2px; font-weight:650; }
.chart-section { padding:37px 0 33px; }
.chart-section+.chart-section { border-top:1px solid var(--line); }
.chart-category > h2 { font-size:16px; font-weight:600; margin:30px 0 0; }
h3 { font-size:27px; line-height:1.2; letter-spacing:-.6px; font-weight:550; margin:0; }
.description { font-size:14px; color:var(--muted); line-height:1.6; margin:10px 0 20px; }
figure { margin:0; }
.chart-tools { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:12px; margin:0 0 14px; }
.heat-key { display:flex; align-items:center; gap:7px; font:9px var(--mono); color:var(--muted); }
.heat-key i { width:105px; height:7px; background:linear-gradient(90deg,#076854,#4aab90,#c6dca5,#eee1a6,#c18d6d,#704664); }
.legend { display:flex; flex-wrap:wrap; gap:9px 15px; font-size:10px; color:var(--muted); }
.legend>span { display:flex; gap:6px; align-items:center; }
.line-key { width:18px; border-top:2px solid; }
.scenario-key { border-color:#bc7765; border-top-style:dashed; }
.segmented-key { border-color:#80649c; }
.exponential-key { border-color:#4d77ae; }
.model-toggle { display:flex; align-items:center; gap:6px; margin-left:auto; font-size:11px; color:var(--ink); cursor:pointer; min-height:32px; }
.model-toggle input { accent-color:var(--green); width:15px; height:15px; margin:0; }
.plot { position:relative; width:100%; touch-action:pan-y; }
.plot svg { display:block; width:100%; overflow:visible; }
.grid-line { stroke:#dfe4db; stroke-width:1; }
.axis-text { font:10px var(--mono); fill:var(--muted); }
.axis-title { font:9px var(--mono); fill:var(--muted); }
.endpoint { font:600 17px Arial,sans-serif; fill:var(--green); }
.annotation { font:11px Arial,sans-serif; fill:#78857b; }
.series-line { fill:none; stroke:var(--green); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.series-area { fill:var(--green); fill-opacity:.075; }
.crosshair { stroke:var(--ink); stroke-opacity:.35; stroke-dasharray:3 4; pointer-events:none; }
.horizon-guide { stroke:var(--ink); stroke-opacity:.7; stroke-width:1; stroke-dasharray:3 3; pointer-events:none; }
.current-point { fill:var(--green); stroke:var(--paper); stroke-width:3; pointer-events:none; }
.methodology { border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:18px; }
summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; padding:14px 0; font-size:12px; }
summary::-webkit-details-marker { display:none; }
summary>span { font-size:18px; line-height:1; }
details[open] summary>span { transform:rotate(45deg); }
.method-inner { max-width:850px; padding-bottom:20px; }
.method-inner h4 { font-size:13px; margin:23px 0 10px; }
.method-inner p { font-size:12px; line-height:1.85; color:#4a5e52; margin:10px 0; }
.method-inner pre { white-space:pre-wrap; overflow-wrap:anywhere; padding:15px; background:#eaf0e8; font-size:11px; line-height:1.9; }
.method-inner code { font-family:var(--mono); font-size:11px; }
.method-inner sup a { text-decoration:none; }
.sources { font-size:11px; color:var(--muted); line-height:2; padding-left:18px; margin-top:25px; }
.sources li { scroll-margin-top:20px; }
.sources a { text-decoration:none; }
.sources a:hover { text-decoration:underline; }
.downloads { margin-top:20px!important; }
.tooltip { position:fixed; z-index:10; max-width:280px; padding:12px 15px; background:#203b33; color:#f7f6f2; border-radius:4px; font-size:11px; line-height:1.8; pointer-events:none; }
.tooltip strong { display:block; font-size:13px; font-weight:500; margin-bottom:3px; }
.tip-muted { color:#b6c9bd; font-size:10px; }
.tooltip[hidden] { display:none; }
#load-error { color:#8d3b3b; padding:20px 0; }
@media(max-width:600px) {
  .wrap { width:calc(100% - 32px); }
  header { padding:25px 0 21px; gap:12px; }
  .updated { font-size:9px; }
  h1 { font-size:22px; }
  .chart-section { padding:28px 0; }
  .chart-category > h2 { margin-top:25px; }
  h3 { font-size:23px; }
  .description { font-size:12px; margin:9px 0 17px; }
  .chart-tools { gap:10px; }
  .legend { width:100%; font-size:9px; gap:9px 12px; }
  .heat-key { font-size:8px; }
  .heat-key i { width:60px; }
  .axis-text { font-size:9px; }
  .axis-title { font-size:8px; }
  .method-inner p { font-size:11px; }
  .method-inner code { font-size:10px; }
  .sources { font-size:10px; }
}