:root {
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: #18221b;
	background: #f2f5ef;
	font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; }
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background: radial-gradient(circle at 10% 5%, #d9ead7 0, transparent 32%), radial-gradient(circle at 90% 30%, #f6e5c8 0, transparent 34%);
}
main { width: min(1060px, calc(100% - 32px)); margin: 0 auto; padding: 72px 0; }
header { margin-bottom: 32px; }
.eyebrow { margin: 0 0 10px; color: #376847; font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
h1 { margin: 0; font-family: Georgia, serif; font-size: clamp(2.4rem, 6vw, 4.8rem); font-weight: 500; letter-spacing: -.045em; line-height: .98; }
.subtitle { max-width: 590px; margin: 18px 0 0; color: #5d675f; font-size: 1.05rem; line-height: 1.6; }
.refresh-controls { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.refresh-toggle { display: inline-flex; align-items: center; gap: 9px; min-height: 38px; padding: 0 14px; border: 1px solid #c7cec5; border-radius: 999px; color: #5d675f; background: rgba(255, 255, 252, .72); cursor: pointer; font: inherit; font-size: .78rem; font-weight: 750; transition: border-color .18s, background .18s, color .18s, box-shadow .18s; }
.refresh-toggle:hover { border-color: #75907b; }
.refresh-toggle:focus-visible { outline: 3px solid rgba(55, 104, 71, .22); outline-offset: 2px; }
.refresh-toggle.selected { border-color: #376847; color: #234e30; background: #e2eee0; box-shadow: inset 0 0 0 1px rgba(55, 104, 71, .08); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #a8afa9; }
.refresh-toggle.selected .status-dot { background: #3a804d; box-shadow: 0 0 0 4px rgba(58, 128, 77, .12); }
.last-updated { color: #747d76; font-size: .73rem; font-variant-numeric: tabular-nums; }
.panel { padding: clamp(22px, 4vw, 44px); border: 1px solid rgba(39, 62, 44, .14); border-radius: 24px; background: rgba(255, 255, 252, .82); box-shadow: 0 24px 70px rgba(45, 65, 48, .10); backdrop-filter: blur(12px); }
.panel + .panel { margin-top: 24px; }
.panel-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 30px; }
.panel-heading h2 { margin: 3px 0 0; font-family: Georgia, serif; font-size: 1.65rem; font-weight: 500; }
.section-kicker { margin: 0; color: #6c766e; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.legend { display: flex; justify-content: flex-end; gap: 20px; color: #657067; font-size: .8rem; font-weight: 700; }
.legend span { display: flex; align-items: center; gap: 7px; }
.swatch { width: 10px; height: 10px; border-radius: 50%; }
.chart-row + .chart-row { margin-top: 25px; }
.row-label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
.row-label strong { font-size: .92rem; }
.row-label span { color: #69736b; font-variant-numeric: tabular-nums; }
.track { display: flex; height: 38px; overflow: hidden; border-radius: 9px; background: #edf0ea; }
.bar { display: grid; min-width: 28px; place-items: center; color: white; font-size: .73rem; font-weight: 800; font-variant-numeric: tabular-nums; transition: width .5s ease; }
.t1 { background: #bd4a3b; }
.t2 { background: #d38b35; }
.t3 { background: #467553; }
.empty { align-self: center; padding-left: 13px; color: #8a928b; font-size: .78rem; }
.category-count { color: #69736b; font-size: .78rem; font-weight: 700; }
.category-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 34px; }
.category-row .row-label { font-size: .85rem; }
.category-track { height: 10px; overflow: hidden; border-radius: 999px; background: #edf0ea; }
.category-bar { height: 100%; min-width: 3px; border-radius: inherit; }
.shade-0 { background: #376847; }
.shade-1 { background: #638b63; }
.shade-2 { background: #d38b35; }
.shade-3 { background: #9b6647; }
.loading, .error { margin: 32px 0; text-align: center; }
.error { color: #a1392d; }
@media (max-width: 600px) {
	main { padding: 44px 0; }
	.refresh-controls { align-items: flex-start; flex-direction: column; }
	.panel-heading { align-items: flex-start; flex-direction: column; }
	.legend { justify-content: flex-start; }
	.panel { border-radius: 18px; }
	.category-grid { grid-template-columns: 1fr; }
}