:root{--bg:#f7f3ea;--ink:#1d241f;--muted:#5a665e;--line:#d8d0bf;--line-soft:#e6dfd0;--card:#fffdf7;--accent:#b3541e;--good:#2e7d4f;--bad:#8a4b2a;--sky:#dcebf5;--focus:#1a5fb4}
@media(prefers-color-scheme:dark){html:not([data-theme]){--bg:#131a17;--ink:#eef2ec;--muted:#a8b5ab;--line:#33413a;--line-soft:#26322c;--card:#1a231f;--accent:#eda06a;--good:#7fd6a4;--bad:#d99a6c;--sky:#1c2f45;--focus:#8fc1ff}}
html[data-theme="dark"]{--bg:#131a17;--ink:#eef2ec;--muted:#a8b5ab;--line:#33413a;--line-soft:#26322c;--card:#1a231f;--accent:#eda06a;--good:#7fd6a4;--bad:#d99a6c;--sky:#1c2f45;--focus:#8fc1ff}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.65 Georgia,"Times New Roman",serif}
.topbar{position:sticky;top:0;z-index:20;display:flex;gap:1rem;align-items:center;height:44px;padding:0 .9rem;background:var(--bg);border-bottom:1px solid var(--line-soft);font:14px/1.2 system-ui,sans-serif}
.topbar a{color:var(--ink);text-decoration:none}.topbar nav{display:flex;gap:.9rem;flex-wrap:wrap}.topbar .sp{flex:1}
.topbar button{background:none;border:1px solid var(--line);border-radius:99px;color:var(--ink);width:34px;height:34px;cursor:pointer}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.wrap{max-width:44rem;margin:0 auto;padding:0 1rem}.wide{max-width:64rem;margin:0 auto;padding:0 1rem}
.kicker{font:600 13px/1.3 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:2rem 0 .4rem}
h1{font-size:clamp(1.9rem,6vw,3rem);line-height:1.08;margin:.2rem 0 .7rem}
.deck{font-size:1.15rem;color:var(--muted)}
h2{font-size:1.55rem;line-height:1.2;margin:2.6rem 0 .6rem}
figure{margin:1rem 0}figcaption{font:.95rem/1.55 Georgia,"Times New Roman",serif;color:var(--ink);opacity:.88;margin:.9rem auto 0;max-width:44rem}
.stage{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.6rem}
#scene{display:block;width:100%;aspect-ratio:2/1;max-height:40svh;border-radius:9px;background:#1a2a44}
#scene img{width:100%;height:auto;display:block}
@media(min-width:900px){figure.hero{margin-left:calc(-1*min(10rem,(100vw - 44rem)/2 - 1rem));margin-right:calc(-1*min(10rem,(100vw - 44rem)/2 - 1rem))}}
.readout{display:flex;flex-wrap:wrap;gap:.35rem .6rem;align-items:center;margin:.3rem 0 0;font:600 15px/1.4 system-ui,sans-serif}
.chips{display:flex;flex-wrap:wrap;gap:.3rem}
.chip{font:500 13px/1 system-ui,sans-serif;padding:.32rem .55rem;border-radius:99px;border:1px solid var(--line);background:var(--bg);white-space:nowrap}
.chip::before{content:"";display:inline-block;width:.6em;height:.6em;border-radius:50%;margin-right:.35em;vertical-align:baseline;background:currentColor;opacity:.75}
.c-n{color:#6b6fa0}.c-h{color:#2f6f99}.c-w{color:#4d7a63}.c-s{color:#a3781a}.c-g{color:#8a5a3c}.c-c{color:#5a5048}
html[data-theme="dark"] .c-n{color:#b4b8e8}html[data-theme="dark"] .c-h{color:#8cc4e8}html[data-theme="dark"] .c-w{color:#9fd2b6}html[data-theme="dark"] .c-s{color:#f0c96a}html[data-theme="dark"] .c-g{color:#e2ab88}html[data-theme="dark"] .c-c{color:#cfc3b8}
.controls{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;font:15px system-ui,sans-serif;margin:.8rem 0}
.controls button,.controls select{font:inherit;padding:.45rem .8rem;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);cursor:pointer;min-height:44px}
.controls button[aria-pressed="true"]{background:var(--accent);color:var(--bg);border-color:var(--accent)}
input[type=range]{flex:1;min-width:160px;accent-color:var(--accent);height:44px}
.bars{display:flex;align-items:flex-end;gap:2px;height:150px;padding-top:22px;border-bottom:2px solid var(--line);margin-top:.6rem}
.bars div{flex:1;background:var(--bad);border-radius:3px 3px 0 0;min-height:3px;position:relative}
.bars div.best{background:var(--good)}
.hourlabels{display:flex;font:11px system-ui,sans-serif;color:var(--muted)}.hourlabels span{flex:1;text-align:center}
.result{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1rem;margin:1rem 0}
.big{font-size:1.5rem;line-height:1.25}.muted{color:var(--muted)}
table{border-collapse:collapse;width:100%;font:15px/1.5 system-ui,sans-serif}
th,td{border-bottom:1px solid var(--line-soft);padding:.45rem .4rem;text-align:right}th:first-child,td:first-child{text-align:left}
.cmp{display:grid;gap:.5rem;font:15px system-ui,sans-serif}.cmp .row{display:flex;align-items:center;gap:.6rem}
.cmp .lab{width:5.5rem}.cmp .val{width:6.5rem;text-align:right;font-variant-numeric:tabular-nums}.cmp .track{flex:1;background:var(--line-soft);border-radius:6px;height:22px}.cmp .fill{height:100%;border-radius:6px;background:var(--accent)}

.share-row{display:flex;gap:.5rem;align-items:center;font:14px system-ui,sans-serif;color:var(--muted);margin:1.2rem 0}
.share-row a,.share-row button{width:40px;height:40px;border:1px solid var(--line-soft);border-radius:50%;display:grid;place-items:center;color:var(--ink);background:transparent;cursor:pointer;text-decoration:none;font-size:11px}
@media(pointer:coarse){.share-row a,.share-row button{width:44px;height:44px}}
.rail{position:fixed;right:10px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;z-index:15}
.rail a{width:11px;height:11px;border-radius:50%;border:2px solid var(--muted);position:relative}
.rail a span{position:absolute;right:18px;top:-4px;background:var(--card);border:1px solid var(--line);padding:.15rem .5rem;border-radius:6px;font:12px system-ui;white-space:nowrap;display:none;color:var(--ink)}
.rail a:hover span,.rail a:focus span{display:block}.rail a[aria-current="true"]{background:var(--accent);border-color:var(--accent)}
@media(max-width:1100px){.rail{display:none}}
footer{border-top:1px solid var(--line-soft);margin-top:3rem;padding:1.5rem 1rem 3rem;font:14px/1.6 system-ui,sans-serif;color:var(--muted)}
footer a{color:var(--ink)}

@media(max-width:700px){.topbar nav{display:none}}

@media(max-width:640px){#scene{aspect-ratio:1110/800}.stage{padding:.4rem}.controls{gap:.4rem}}
main a{color:var(--accent)}
.bars div .vl{position:absolute;left:50%;top:0;transform:translate(-50%,-115%);font:600 12px system-ui,sans-serif;color:var(--ink);white-space:nowrap;background:var(--card);padding:0 .2rem;border-radius:4px}
@media(max-width:640px){.stage .controls{display:grid;grid-template-columns:auto auto 1fr;}.stage .controls input[type=range]{grid-column:1/-1;order:5;min-width:0}}
@media(max-width:640px){.deck{font-size:1.02rem;line-height:1.5}h1{font-size:1.75rem}.kicker{margin-top:1.2rem;font-size:12px}}
@media(max-width:640px){.stage .controls{margin:.5rem 0 .2rem}.stage .controls input[type=range]{height:32px}}