@import url('chart.css');
:root { --text-soft:#596367; }
body { max-width:1080px; margin:auto; padding:24px; }
h1 { font-size:clamp(25px,4vw,34px); letter-spacing:-.03em; line-height:1.12; margin:10px 0; }
h2 { font-size:18px; margin:0 0 12px; } h3 { font-size:14px; margin:0 0 10px; }
p { line-height:1.55; } .intro { max-width:800px; color:var(--text-soft); margin:0 0 22px; }
.eyebrow { font:11px var(--mono); letter-spacing:.07em; text-transform:uppercase; color:var(--text-soft); }
.toolbar, .controls, .row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.toolbar { justify-content:space-between; margin-bottom:16px; } .toolbar strong { font-size:13px; }
.controls { margin:0 0 16px; gap:12px 22px; }
.control { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; }
.control.stack { display:block; } .control.stack input { display:block; width:100%; margin-top:9px; }
input,select { accent-color:var(--blue); } input[type=range] { width:160px; max-width:100%; }
input[type=number] { width:75px; } select,input[type=number] { font:13px inherit; background:white; color:var(--ink); border:1px solid var(--border); border-radius:6px; padding:7px; }
button { cursor:pointer; } .chip { font-size:12px; padding:7px 12px; letter-spacing:0; text-transform:none; color:var(--text-soft); }
.chip.active { color:var(--blue); } button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.panel { min-width:0; border:1px solid var(--border); border-radius:10px; padding:16px; background:white; }
.panel.soft { background:#fafafa; } .step { font:11px var(--mono); color:var(--text-soft); display:block; margin-bottom:8px; }
.note { font-size:12px; color:var(--text-soft); line-height:1.5; }
/* The book's other widgets put their running commentary beside a gold rule on
   white (chart.css .hint); the takeaway follows them rather than a blue box. */
.takeaway { border-left:3px solid var(--gold); padding:4px 0 4px 12px; line-height:1.5; margin:16px 0 0; font-size:15px; }
.big { font-size:30px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.02em; } .mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }
details { margin-top:16px; } summary { cursor:pointer; font-size:13px; color:var(--text-soft); } details>div { margin-top:14px; }
.table-wrap { max-width:100%; overflow:auto; } table { width:100%; border-collapse:collapse; font:12px var(--mono); } th,td { padding:8px; text-align:right; border-bottom:1px solid var(--border); white-space:nowrap; } th:first-child,td:first-child { text-align:left; } th { font-weight:500; color:var(--text-soft); }
a { color:var(--blue); } .footer { margin-top:24px; padding-top:14px; border-top:1px solid var(--border); display:flex; gap:12px 22px; flex-wrap:wrap; font-size:13px; }
svg.plot { display:block; width:100%; height:auto; overflow:visible; } svg text { font-family:var(--mono); fill:var(--ink); font-size:12px; } svg .muted { fill:var(--text-soft); }
.bar-track { height:14px; background:#f0f2f3; border-radius:4px; overflow:hidden; } .bar-fill { height:100%; background:var(--gold); border-radius:4px; }
.metric { display:flex; justify-content:space-between; gap:12px; margin-bottom:7px; font-size:13px; }
.weight-row { margin:0 0 15px; } /* the design system's destructive token (design-system/tokens.css), a state
   colour, never a data category; the tint is the same token at 5% */
.error { color:#e40014; background:rgba(228,0,20,0.05); border-color:#e40014; }
[hidden] { display:none !important; }
#stage:fullscreen { width:100vw; height:100vh; padding:16px; background:white; display:flex; align-items:center; justify-content:center; overflow:hidden; }
#stage:fullscreen .stage-content { flex:none; transform-origin:center; }
#stage:fullscreen .secondary, #stage:fullscreen details { display:none; }
#stage:fullscreen .toolbar { margin-bottom:8px; }
#stage:fullscreen .takeaway { margin-top:8px; }
@media(max-width:700px) { body { padding:16px; } .grid,.grid.three { grid-template-columns:1fr; } .controls { gap:12px; } .panel { padding:14px; } .big { font-size:26px; } .toolbar { align-items:start; } }