body {
  font-family: system-ui, sans-serif;
  max-width: 56rem;
  margin: 3rem auto;
  padding: 0 1rem;
  color: #123;
}
a { color: #0b62a4; }
code { background: #eef2f5; padding: 0.1rem 0.3rem; border-radius: 3px; }
.muted { color: #67788a; }
.spot-list li { margin: 0.4rem 0; }

.headline { margin: 0.2rem 0 0.1rem; }
.narration { font-style: italic; color: #345; margin-top: 0.2rem; }

.verdict { text-transform: capitalize; }
.verdict.epic { color: #b07c00; }
.verdict.good { color: #1a7f37; }
.verdict.marginal { color: #9a6700; }
.verdict.poor { color: #b13a2e; }

.chart-box { margin: 1.5rem 0; }
.chart-box svg { width: 100%; height: auto; display: block; }
.chart-box > svg[viewBox^="0 0 560"] { max-width: 34rem; }

.controls { display: flex; align-items: center; gap: 0.8rem; margin: 0.4rem 0; max-width: 34rem; }
.controls button {
  font: inherit; padding: 0.25rem 0.8rem; border: 1px solid #b9c6d2;
  border-radius: 5px; background: #f3f7fa; cursor: pointer; white-space: nowrap;
}
.controls button:hover { background: #e8eff5; }
.controls input[type="range"] { flex: 1; }
.controls span { font-size: 0.85rem; white-space: nowrap; }
.legend { display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: 0.85rem; color: #456; }
.legend .swatch {
  display: inline-block; width: 0.9rem; height: 0.9rem;
  border-radius: 2px; vertical-align: -0.12rem; margin-right: 0.35rem;
}

.outlook { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.8rem; padding: 0; }
.outlook li { list-style: none; border: 1px solid #dde5ec; border-radius: 6px; padding: 0.7rem 0.9rem; }
.outlook .day { font-weight: 600; }
.outlook .no-go { opacity: 0.66; }
.outlook ul { margin: 0.4rem 0 0; padding-left: 1.1rem; font-size: 0.85rem; color: #345; }