:root { color: #ecf3f8; background: #091522; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(circle at top right, #17304a, #091522 46rem); }
main { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: 3.5rem 0 5rem; }
header { margin-bottom: 2.5rem; }
.eyebrow, .label { color: #f6bd36; font-size: .78rem; font-weight: 750; letter-spacing: .14em; margin: 0 0 .4rem; }
h1, h2 { margin: 0; letter-spacing: -.03em; }
h1 { font-size: clamp(2.2rem, 5vw, 4rem); }
h2 { font-size: clamp(1.35rem, 3vw, 2rem); }
nav a { color: #d5e7f4; font-size: .95rem; font-weight: 700; text-decoration: none; }
nav a:hover { color: #f6bd36; }
.today, figure { background: #f8fbfd; border: 1px solid #cdd8df; border-radius: 14px; color: #142333; overflow: hidden; }
.today { padding: 1.25rem; box-shadow: 0 1.2rem 3rem #0005; }
.section-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin: .25rem .25rem 1.1rem; }
.status { background: #dff4e5; border-radius: 999px; color: #17623a; font-size: .8rem; font-weight: 700; padding: .45rem .7rem; }
.today img { display: block; width: auto; max-width: 100%; height: auto; }
figure img { display: block; width: 100%; height: auto; }
.history { margin-top: 3rem; }
.ruler { align-items: center; display: flex; gap: 1rem; height: 2rem; margin-bottom: 1.7rem; }
.ruler::before, .ruler::after { content: ''; flex: 1; height: 1px; background: #50708b; }
.ruler span { border-left: 1px solid #f6bd36; height: 1.4rem; width: 1px; }
.history .section-heading { color: #ecf3f8; margin-left: 0; }
.graph-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
figure { margin: 0; padding: .85rem; }
figcaption { color: #294257; font-size: .94rem; font-weight: 720; margin: .1rem .2rem .6rem; }
.graph-stats { display: flex; flex-wrap: wrap; gap: .8rem 1.25rem; margin: .8rem .2rem .15rem; }
.graph-stats span { color: #526a7e; font-size: .8rem; }
.graph-stats strong { color: #18344a; display: block; font-size: 1rem; }
.month-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin: 1rem .2rem .15rem; }
.month-stats span { background: #edf4f8; border-radius: 8px; color: #526a7e; font-size: .76rem; padding: .65rem; }
.month-stats strong { color: #18344a; display: block; font-size: 1rem; margin-bottom: .2rem; }
.coverage-note { color: #526a7e; font-size: .8rem; margin: .8rem .2rem 0; }
@media (max-width: 900px) { .graph-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .month-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { main { width: min(100% - 1rem, 1180px); padding-top: 2rem; } .today { padding: .65rem; } .graph-grid, .month-stats { grid-template-columns: 1fr; } }