.forecast-timeline {
  --timeline-ink: #eef9fc;
  --timeline-muted: #a5bac5;
  --timeline-accent: #81e4f0;
  --timeline-rule: rgba(174, 212, 224, .24);
  --timeline-track-bg: #203541;
  position: absolute;
  z-index: 1700;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-rows: 72px 44px;
  gap: 0;
  width: 100%;
  min-width: 0;
  height: 116px;
  padding: 0 8px;
  border: 0;
  color: var(--timeline-ink);
  background: linear-gradient(to bottom, transparent 0 8px, rgba(11, 32, 45, .83) 8px 72px, #0b1925 72px);
  box-shadow: 0 -4px 15px rgba(3, 17, 30, .12);
}
.forecast-timeline-scroll { min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.forecast-timeline-scroll::-webkit-scrollbar { display: none; }
.forecast-timeline-ruler { position: relative; width: max-content; padding-top: 8px; }
.forecast-timeline-valid { position: absolute; z-index: 2; top: 0; left: 0; height: 28px; margin: 0; padding: 6px 12px; border-radius: 999px; color: #0b3040; background: var(--timeline-accent); box-shadow: 0 0 13px rgba(129, 228, 240, .29); font-size: .8rem; font-weight: 850; line-height: 16px; white-space: nowrap; pointer-events: none; }
.forecast-timeline-valid::after { content: ""; position: absolute; top: 100%; left: var(--timeline-marker-stem, 16px); width: 2px; height: 44px; background: var(--timeline-accent); box-shadow: 0 0 7px rgba(129, 228, 240, .5); }
.forecast-timeline-days, .forecast-timeline-track { display: grid; grid-template-columns: var(--timeline-columns); width: max-content; }
.forecast-timeline-days { height: 32px; background: rgba(255, 255, 255, .035); }
.forecast-timeline-day { display: flex; align-items: center; gap: 5px; min-width: 0; height: 32px; padding: 0 5px; overflow: hidden; border: 0; border-left: 1px solid var(--timeline-rule); color: var(--timeline-muted); background: transparent; font: inherit; text-align: left; cursor: pointer; }
.forecast-timeline-day.is-viewed { align-items: end; padding-bottom: 3px; }
.forecast-timeline-day strong { font-size: .68rem; font-weight: 800; letter-spacing: .02em; }
.forecast-timeline-day small { color: inherit; font-size: .64rem; font-weight: 650; text-transform: uppercase; }
.forecast-timeline-day.is-compact small { display: none; }
.forecast-timeline-day:hover:not(:disabled), .forecast-timeline-day.is-viewed { color: var(--timeline-ink); background: rgba(149, 209, 226, .12); }
.forecast-timeline-day:disabled { opacity: .9; cursor: not-allowed; }
.forecast-timeline-track { height: 32px; overflow: hidden; background: var(--timeline-track-bg); }
.forecast-timeline-slot { display: grid; place-items: center; min-width: 0; height: 32px; padding: 0; border: 0; border-right: 1px solid var(--timeline-rule); color: var(--timeline-ink); background: rgba(41, 136, 153, .55); font: inherit; cursor: pointer; transition: background .18s ease; }
.forecast-timeline-slot:hover:not(:disabled) { background: #317d90; }
.forecast-timeline-slot.is-pending { background: linear-gradient(90deg, #263d49 0 75%, #304a57 75%); cursor: not-allowed; }
.forecast-timeline-slot.is-pending:nth-child(2n) { background: linear-gradient(90deg, #233844 0 75%, #2b4350 75%); }
.forecast-timeline-slot.is-pending.is-near { background: repeating-linear-gradient(90deg, rgba(150, 183, 196, .26) 0 9px, rgba(17, 40, 53, .18) 9px 11px); }
.forecast-timeline-slot.is-pending.is-near:nth-child(2n) { background: repeating-linear-gradient(90deg, rgba(114, 151, 167, .22) 0 9px, rgba(17, 40, 53, .18) 9px 11px); }
.forecast-timeline-slot.is-active { color: #0b3040; background: var(--timeline-accent); box-shadow: inset 0 -2px #eafdff, 0 0 10px rgba(129, 228, 240, .42); }
.forecast-timeline-slot.is-active.is-near { background: linear-gradient(90deg, rgba(42, 74, 87, .65) 0 11px, var(--timeline-accent) 11px 21px, rgba(42, 74, 87, .65) 21px); }
.forecast-timeline-slot.is-live:not(.is-active) { box-shadow: inset 0 -2px var(--timeline-accent); }
.forecast-timeline-day:focus-visible, .forecast-timeline-slot:focus-visible, .forecast-timeline-control:focus-visible { outline: 2px solid var(--timeline-accent); outline-offset: -2px; }
.forecast-timeline-footer { display: flex; align-items: center; min-width: 0; }
.forecast-timeline-controls { display: flex; align-items: center; gap: 4px; }
.forecast-timeline-control { display: grid; place-items: center; width: 28px; height: 30px; padding: 0; border: 0; border-radius: 4px; color: var(--timeline-ink); background: transparent; font: inherit; font-size: 1.2rem; font-weight: 550; cursor: pointer; transition: color .18s ease, background .18s ease; }
.forecast-timeline-control:hover:not(:disabled) { color: var(--timeline-accent); background: rgba(129, 228, 240, .12); }
.forecast-timeline-control:disabled { opacity: .68; cursor: not-allowed; }
.forecast-timeline-play { font-size: 1rem; }
.forecast-timeline[data-visible-slot-count="0"] .forecast-timeline-track { display: none; }
html[data-ui-theme="light"] .forecast-timeline { background: linear-gradient(to bottom, transparent 0 8px, rgba(16, 48, 62, .83) 8px 72px, #0b1925 72px); }
@media (max-width: 480px) { .forecast-timeline { padding-inline: 7px; } .forecast-timeline-valid { font-size: .64rem; } }
@media (prefers-reduced-motion: reduce) { .forecast-timeline-day, .forecast-timeline-slot, .forecast-timeline-control { transition: none; } }