body { margin: 0; padding: 10px 8px 4px; background: white; font-family: Arial, sans-serif; }
#plot { width: 100%; height: clamp(560px, 88vh, 1200px); }
#controls {
  display: flex; gap: 20px; align-items: center; justify-content: center;
  padding: 7px 16px; background: #f8f8f8; border: 1px solid #ddd;
  border-radius: 6px 6px 0 0; margin-bottom: 0; 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; cursor: pointer; }
.ctrl input[type=range] { width: 140px; 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; }
#info-bar {
  display: flex; gap: 24px; justify-content: center; flex-wrap: wrap;
  padding: 5px 16px 5px; font-size: 13px; font-family: Arial, sans-serif;
  background: #fafafa; border: 1px solid #ddd; border-top: none;
  border-radius: 0 0 6px 6px; margin-bottom: 6px;
}
.info-item { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.swatch { width: 28px; height: 4px; border-radius: 2px; display: inline-block; }
.swatch-hc4 { background: rgba(220,90,0,0.6); }
.swatch-hc5 { background: rgba(0,90,220,0.6); }
.swatch-rolling { background: rgba(0,120,80,0.8); }
.info-val { font-weight: bold; font-variant-numeric: tabular-nums; }
.hint { font-size: 12px; color: #888; text-align: center; margin: 3px 0 1px; }
.label-hc4-monthly { color: rgba(220,90,0,0.9); }
.label-hc5-monthly { color: rgba(0,90,220,0.9); }
.label-hc4-annual { color: rgba(200,55,0,1); }
.label-hc5-annual { color: rgba(0,55,190,1); }
.label-diff { color: rgba(100,0,180,0.9); }
.label-poly { color: rgba(190,0,0,0.9); }
.label-rolling { color: rgba(0,120,80,0.9); }
.info-hidden { display: none; }
@media (max-width: 900px) { #plot { height: 80vh; min-height: 480px; } }