:root{color-scheme:light;--bg:#f6f7f5;--ink:#223632;--muted:#566b65;--line:#cdd7d2;--accent:#177566;--other:#a56432;--paper:#fff}*{box-sizing:border-box}body{margin:0;background:transparent;color:var(--ink);font:15px/1.6 system-ui,-apple-system,sans-serif}.dark{color-scheme:dark;--bg:#202b29;--ink:#edf2ef;--muted:#afc0b8;--line:#50625b;--accent:#79cebb;--other:#e9ad76;--paper:#293631}main{padding:20px;background:var(--bg);border-radius:12px}.toolbar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:end;margin-bottom:14px}label{display:flex;gap:8px;align-items:center;flex-wrap:wrap}select,button,input{font:inherit;accent-color:var(--accent)}button,select{min-height:42px;border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink);padding:6px 12px}button{cursor:pointer}button:disabled{opacity:.45;cursor:default}button:hover:enabled{border-color:var(--accent)}:focus-visible{outline:3px solid var(--accent);outline-offset:3px}input[type=range]{width:120px;min-height:36px}.note,.legend{font-size:13px;color:var(--muted);margin:8px 0}.result{margin:12px 0 0;font-variant-numeric:tabular-nums;min-height:28px}.accent{color:var(--accent);font-weight:650}.other{color:var(--other);font-weight:650}.chart{display:block;width:100%;height:210px;overflow:visible}.timeline{height:76px;margin:0 0 8px}.chart text{font:12px system-ui;fill:var(--muted)}.chart .bar{fill:var(--accent)}.chart .second{fill:var(--other)}.chart .grid{stroke:var(--line)}summary{cursor:pointer;padding:8px 0}details{margin-top:5px}details p{margin:5px 0;color:var(--muted);font-size:14px}output{font-variant-numeric:tabular-nums} @media(max-width:480px){main{padding:14px}.toolbar{gap:8px 12px}label{gap:6px}.chart{height:195px}button,select{padding:5px 9px}.timeline{height:72px}}

@media(max-width:480px){.counts #chart{height:170px}.counts .timeline{height:60px}.counts .toolbar{gap:6px 10px}.counts button{min-height:38px}.counts #stage{font-size:13px}.counts .result{font-size:14px}}