:root { color-scheme: light; --paper:#fbfaf6; --ink:#172522; --muted:#59675f; --line:#ced5cd; --current:#b64a2c; --proposal:#087d70; --track:#e5e9e1; }
:root.dark-mode { color-scheme:dark; --paper:#111a18; --ink:#f1f1e8; --muted:#a9b8ae; --line:#394b42; --current:#ff9674; --proposal:#71d6b6; --track:#26372f; }
* { box-sizing:border-box; } body { margin:0; padding:24px; background:var(--paper); color:var(--ink); font-family:system-ui,sans-serif; }
main { max-width:800px; margin:auto; } h1 { font-size:clamp(23px,4vw,34px); line-height:1.1; margin:10px 0 14px; max-width:24ch; letter-spacing:-.04em; } p { line-height:1.5; } .eyebrow { color:var(--muted); font-size:11px; letter-spacing:.12em; font-weight:750; } .intro { max-width:65ch; font-size:15px; margin:0 0 22px; } a { color:inherit; text-underline-offset:3px; }
.legend { display:flex; gap:18px; flex-wrap:wrap; font-size:12px; margin:18px 0; } .legend span::before { content:''; display:inline-block; width:9px; height:9px; margin-right:7px; background:var(--current); } .legend .proposal::before { background:var(--proposal); }
.axis { display:flex; justify-content:space-between; margin-left:110px; margin-right:125px; color:var(--muted); font-size:11px; } .band { display:block; width:100%; text-align:left; font:inherit; color:inherit; background:transparent; border:0; border-bottom:1px solid var(--line); padding:17px 0; cursor:pointer; } .band:focus-visible { outline:2px solid var(--proposal); outline-offset:4px; } .band[aria-pressed=true] .band-title { color:var(--proposal); } .band-title { font-size:14px; font-weight:750; margin-bottom:11px; } .bar-row { display:grid; grid-template-columns:100px minmax(0,1fr) 115px; gap:10px; align-items:center; margin:8px 0; } .bar-label { font-size:11px; color:var(--muted); } .track { height:19px; background:var(--track); position:relative; border-left:1px solid var(--muted); } .track::after { content:''; position:absolute; left:50%; top:0; height:100%; border-left:1px dashed var(--line); } .fill { display:block; height:100%; background:var(--current); } .proposal .fill { background:var(--proposal); } .bar-value { font-variant-numeric:tabular-nums; font-size:13px; font-weight:750; } .bar-value small { color:var(--muted); font-weight:400; font-size:11px; }
.readout { border-left:3px solid var(--proposal); padding:10px 14px; font-size:16px; margin:20px 0; background:var(--track); } .scope { font-size:12px; color:var(--muted); line-height:1.55; } .valuation .axis { margin-left:110px; } .valuation .track { height:30px; } .valuation .fill { background:var(--proposal); }
@media(max-width:520px) { body { padding:16px; } .axis { margin-left:75px; margin-right:95px; } .bar-row { grid-template-columns:67px minmax(0,1fr) 87px; gap:8px; } .bar-label { font-size:10px; } .bar-value { font-size:12px; } .bar-value small { display:block; font-size:10px; } .intro { font-size:14px; } .valuation .axis { margin-left:75px; } }