:root{color-scheme:light;--ink:#24353c;--muted:#65777e;--teal:#007f83;--line:#dce6e7;--soft:#edf5f5;--orange:#c8743e;--blue:#356ca8}
*{box-sizing:border-box}body{margin:0;background:#f7fafa;color:var(--ink);font:16px/1.6 Georgia,"Times New Roman",serif}main{max-width:1100px;margin:auto;padding:22px}p{margin:0 0 14px}h2,h3,.eyebrow,.controls,.playback,.caption,.legend,.metrics,.method{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}h2{font-size:21px;line-height:1.35;letter-spacing:-.025em;margin:0 0 12px}h3{font-size:13px;font-weight:650;line-height:1.5;margin:0 6px 8px}.eyebrow{font-size:11px;letter-spacing:.065em;text-transform:uppercase;color:var(--teal);margin-bottom:8px}.intro{max-width:900px}.controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:15px 22px;background:var(--soft);padding:16px;border-radius:6px;margin:20px 0 12px}.controls label{display:grid;grid-template-columns:1fr auto;gap:6px 8px;font-size:13px;min-width:0}.controls output{font-variant-numeric:tabular-nums;color:var(--teal);font-weight:650}input[type=range]{grid-column:1/-1;width:100%;margin:6px 0;accent-color:var(--teal);min-height:18px}.help{grid-column:1/-1;color:var(--muted);font-size:11px;line-height:1.5}input:focus-visible,button:focus-visible{outline:3px solid #dda350;outline-offset:3px}.playback{display:flex;align-items:center;flex-wrap:wrap;gap:9px 12px;margin-bottom:18px}.playback button{appearance:none;border:1px solid var(--teal);background:var(--teal);border-radius:5px;color:#fff;font:600 12px/1.5 system-ui,sans-serif;padding:7px 13px;cursor:pointer;min-height:34px}.playback button.secondary{background:#fff;color:var(--teal)}.playback p{font-size:12px;color:var(--muted);margin:0 0 0 auto;line-height:1.5;font-variant-numeric:tabular-nums}.panel{min-width:0;background:#fff;border:1px solid var(--line);border-radius:6px;padding:13px 8px 11px}.panel-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px}.legend{display:flex;gap:15px;font-size:11px;margin:0 8px 5px;color:var(--muted)}.legend span{white-space:nowrap}.legend span:before{content:"";display:inline-block;width:15px;height:2px;background:var(--marker);vertical-align:middle;margin-right:5px}.initial{--marker:#a9b4b7}.current{--marker:var(--teal)}canvas{display:block;width:100%;height:300px}.density-panel canvas{height:225px}.caption{font-size:11px;line-height:1.55;color:var(--muted);margin:2px 6px 0}.lower-plots{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.metrics{display:grid;grid-template-columns:1fr 1.4fr 1.4fr 1.2fr;gap:9px;margin:18px 0 12px}.metrics>div{min-width:0;border-top:3px solid #8cbbbd;background:#fff;padding:8px 10px}.metrics dt{font-size:11px;line-height:1.5;color:var(--muted)}.metrics dd{margin:4px 0 0;font-size:17px;line-height:1.4;font-variant-numeric:tabular-nums}.method{font-size:11px;line-height:1.65;color:var(--muted);margin-bottom:0}
@media(max-width:690px){main{padding:16px 12px}.controls{grid-template-columns:1fr 1fr;padding:12px;gap:14px}.controls label:last-child{grid-column:1/-1}.lower-plots{grid-template-columns:1fr}.metrics{grid-template-columns:1fr 1fr}.playback p{margin-left:0}h2{font-size:19px}.density-panel canvas{height:220px}canvas{height:300px}.panel-heading{align-items:flex-start}.legend{gap:10px}.panel-heading h3{max-width:58%}}
@media(max-width:400px){.controls{grid-template-columns:1fr}.controls label{grid-column:1/-1}.panel{padding:11px 4px 10px}.panel-heading{display:block}.panel-heading h3{max-width:none}.legend{margin:0 6px 4px}.density-panel canvas{height:215px}canvas{height:280px}.metrics dd{font-size:16px}.caption{margin:2px 5px 0}}
@media print{.controls,.playback{display:none}.panel{break-inside:avoid}main{padding:0}}