:root { --bg:#fdfcf9; --band:#f5f2eb; --card:#fdfcf9; --ink:#23201a; --muted:#524c40; --faint:#5f594c; --rule:#e3ddd0; --accent:#1f4e79; --forecast:#3b6ea5; --actual:#b45309; --bad:#b91c1c; }
@media (prefers-color-scheme:dark) { :root { --bg:#181818; --band:#1e1e1d; --card:#212120; --ink:#e9e7e2; --muted:#b2afa8; --faint:#a19e96; --rule:#343431; --accent:#8babc8; --forecast:#7fb1e8; --actual:#e0894a; --bad:#f87171; } }
body { margin:0; background:var(--bg); color:var(--ink); font-family:-apple-system,"Segoe UI",system-ui,sans-serif; line-height:1.6; }
.shell { max-width:64rem; padding-inline:1.25rem; margin:auto; }
.hero { padding-block:2.5rem; }
h1,h2 { font-family:Georgia,serif; font-weight:600; line-height:1.2; text-wrap:balance; }
h1 { font-size:clamp(2rem,4vw,3rem); margin:.5rem 0 1rem; }
h2 { font-size:1.35rem; }
.eyebrow { color:var(--accent); font-size:.75rem; font-weight:650; text-transform:uppercase; letter-spacing:.09em; }
.lede { max-width:46rem; color:var(--muted); font-family:Georgia,serif; font-size:1.1rem; }
.stamp { color:var(--faint); font-size:.82rem; }
.formula { color:var(--muted); font-size:.87rem; margin:1.5rem 0; }
.actions { display:flex; gap:.6rem; flex-wrap:wrap; margin:1rem 0; }
button { cursor:pointer; border:1px solid var(--accent); padding:.6rem .9rem; color:var(--bg); background:var(--accent); font:inherit; font-size:.9rem; border-radius:3px; }
button.quiet,.presets button { background:transparent; color:var(--accent); }
.presets button[aria-pressed="true"] { background:var(--accent); color:var(--bg); }
.summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.summary dl { padding:1rem; margin:0; background:var(--band); border:1px solid var(--rule); border-radius:3px; }
.summary dt { font-size:.76rem; color:var(--muted); }
.summary dd { margin:.5rem 0 0; font-family:Georgia,serif; font-size:1.8rem; font-variant-numeric:tabular-nums; }
.summary dd.detail { display:block; color:var(--faint); font:inherit; font-size:.75rem; margin-top:.3rem; }
.legend { display:flex; gap:1rem; flex-wrap:wrap; font-size:.8rem; padding-block:1rem; color:var(--muted); }
.forecast-key::before,.actual-key::before { content:''; display:inline-block; width:.7rem; height:.7rem; margin-right:.4rem; background:var(--forecast); }
.actual-key::before { background:var(--actual); }
.chart-scroll,.table-scroll { overflow-x:auto; }
#chart { display:block; width:100%; min-width:550px; }
#chart text { fill:var(--muted); font:12px "Segoe UI",sans-serif; }
.panel { border:1px solid var(--rule); padding:1rem; border-radius:3px; margin:1rem 0; }
summary { color:var(--accent); cursor:pointer; font-weight:600; }
table { border-collapse:collapse; width:100%; min-width:520px; font-size:.9rem; font-variant-numeric:tabular-nums; }
th,td { text-align:right; border-bottom:1px solid var(--rule); padding:.55rem; }
th:first-child { text-align:left; }
caption { text-align:left; margin:.8rem 0; color:var(--muted); }
.inputs-section { margin-top:3rem; }
.interval-inputs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
fieldset { min-width:0; margin:0; padding:1rem; border:1px solid var(--rule); border-radius:3px; }
legend { padding-inline:.4rem; font-weight:650; color:var(--accent); }
.input-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }
label { display:block; font-size:.8rem; color:var(--muted); }
input { width:100%; min-width:0; padding:.55rem; margin-top:.3rem; border:1px solid var(--rule); border-radius:3px; background:var(--bg); color:var(--ink); font:inherit; }
input[aria-invalid="true"] { border-color:var(--bad); }
.field-error { color:var(--bad); font-size:.75rem; margin:.3rem 0 0; }
footer { margin-top:3rem!important; padding-block:2rem; color:var(--faint); font-size:.8rem; border-top:1px solid var(--rule); }
a { color:var(--accent); text-underline-offset:.2em; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media (max-width:40rem) { .summary,.interval-inputs { grid-template-columns:1fr; } .summary dl { display:grid; grid-template-columns:1fr auto; align-items:center; gap:.3rem 1rem; } .summary dd { margin:0; grid-column:2; grid-row:1 / span 2; } .summary dd.detail { grid-column:1; grid-row:2; } }
@media print { .interval-inputs { grid-template-columns:repeat(2,minmax(0,1fr)); } fieldset { break-inside:avoid; } .chart-scroll { overflow:visible; } #chart { min-width:0; } }