body { margin: 0; padding: 10px 8px 4px; background: white; font-family: Arial, sans-serif; }
#plot { width: 100%; height: clamp(980px, 94vh, 1440px); }
#controls {
  display: flex; gap: 20px; align-items: center; justify-content: center;
  padding: 7px 16px; background: #f8f8f8; border: 1px solid #ddd;
  border-radius: 6px; margin-bottom: 5px; flex-wrap: wrap; font-size: 14px;
}
.ctrl { display: flex; align-items: center; gap: 8px; }
.ctrl label { font-weight: bold; white-space: nowrap; font-size: 13px; }
.ctrl input[type=range] { width: 150px; cursor: ew-resize; accent-color: #555; }
.ctrl .val { min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; font-weight: bold; }
.ctrl.is-hidden { display: none; }
.period-1-label { color: rgba(0,110,255,1); }
.period-2-label { color: rgba(140,0,200,1); }
.period-3-label { color: rgba(0,150,90,1); }
.toggle-thirty-year { color: rgba(180,90,0,0.95); }
.toggle-overall { color: rgba(0,0,0,0.82); }
.toggle-rolling { color: rgba(0,60,180,0.9); }
.hint { font-size: 12px; color: #888; text-align: center; margin: 3px 0 1px; }
#slopes {
  display: flex; gap: 24px; justify-content: center; flex-wrap: wrap;
  padding: 5px 16px 4px; font-size: 14px; font-family: Arial, sans-serif;
  background: #fafafa; border: 1px solid #ddd; border-top: none;
  border-radius: 0 0 6px 6px; margin-bottom: 5px;
}
.slope-item { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.slope-swatch { width: 28px; height: 4px; border-radius: 2px; display: inline-block; }
.slope-val { font-weight: bold; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  #plot { height: 90vh; min-height: 820px; }
}