:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #07131f; color: #eff6fa; }
* { box-sizing: border-box; }
body { margin: 0; }
main { width: min(1500px, calc(100% - 2rem)); margin: 0 auto; padding: 3rem 0 1.5rem; }
header { align-items: baseline; display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin-bottom: 1.5rem; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); letter-spacing: -.04em; margin: 0; }
.model-cycle { color: #9ab2c1; flex-basis: 100%; margin: .25rem 0 0; }
.model-cycle strong { color: #eff6fa; font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; margin-left: .35rem; }
.noaa-link { margin-left: auto; }
h2 { color: #eff6fa; font-size: 1rem; letter-spacing: .04em; margin: 0; padding: .85rem 1rem; text-transform: uppercase; }
.timeline { background: #102536; border: 1px solid #214155; border-radius: .8rem; margin-bottom: 1rem; padding: .85rem 1rem 1rem; }
.timeline-controls { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: space-between; }
.timeline-buttons { display: flex; gap: .4rem; }
.timeline-button { align-items: center; background: #16324a; border: 1px solid #2c5b7a; border-radius: .45rem; color: #eff6fa; cursor: pointer; display: inline-flex; justify-content: center; line-height: 1; min-height: 2.1rem; min-width: 2.6rem; padding: .4rem .7rem; }
.timeline-button svg { fill: currentColor; height: .95rem; width: .95rem; }
#timeline-toggle .icon-pause, #timeline-toggle[data-playing="true"] .icon-play { display: none; }
#timeline-toggle[data-playing="true"] .icon-pause { display: block; }
#timeline-toggle[data-playing="true"] { background: #8fddd4; border-color: #8fddd4; color: #07131f; }
.timeline-speed { align-items: center; color: #9ab2c1; display: flex; gap: .5rem; margin-right: auto; }
.timeline-speed span { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.timeline-speed strong { color: #eff6fa; font-feature-settings: "tnum" 1; font-size: .8rem; font-variant-numeric: tabular-nums; min-width: 2.2rem; }
#timeline-speed { -webkit-appearance: none; appearance: none; background: transparent; margin: 0; width: 5.5rem; }
#timeline-speed::-webkit-slider-runnable-track { background: #234a63; border-radius: 999px; height: .3rem; }
#timeline-speed::-moz-range-track { background: #234a63; border-radius: 999px; height: .3rem; }
#timeline-speed::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; background: #eff6fa; border: none; border-radius: 50%; height: .8rem; margin-top: -.25rem; width: .8rem; }
#timeline-speed::-moz-range-thumb { background: #eff6fa; border: none; border-radius: 50%; height: .8rem; width: .8rem; }
#timeline-speed:focus-visible { outline: 2px solid #8fddd4; outline-offset: .3rem; }
.timeline-button:hover { background: #1d425f; }
.timeline-button:disabled { cursor: default; opacity: .45; }
.timeline-readout { margin: 0; text-align: right; }
.timeline-readout strong { color: #8fddd4; display: block; font-feature-settings: "tnum" 1; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.timeline-track { margin-top: .75rem; position: relative; }
#timeline-slider { -webkit-appearance: none; appearance: none; background: transparent; display: block; margin: 0; width: 100%; }
#timeline-slider::-webkit-slider-runnable-track { background: #234a63; border-radius: 999px; height: .4rem; }
#timeline-slider::-moz-range-track { background: #234a63; border-radius: 999px; height: .4rem; }
#timeline-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; background: #8fddd4; border: none; border-radius: 50%; height: 1rem; margin-top: -.3rem; width: 1rem; }
#timeline-slider::-moz-range-thumb { background: #8fddd4; border: none; border-radius: 50%; height: 1rem; width: 1rem; }
#timeline-slider:focus-visible { outline: 2px solid #8fddd4; outline-offset: .4rem; }
.timeline-ticks { height: 2.6rem; margin-top: .35rem; position: relative; }
.timeline-tick { position: absolute; top: 0; transform: translateX(-50%); }
.timeline-tick i { background: #2f5b78; display: block; height: .3rem; margin: 0 auto; width: 1px; }
.timeline-tick b, .timeline-tick em { color: #9ab2c1; display: block; font-feature-settings: "tnum" 1; font-size: .62rem; font-style: normal; font-variant-numeric: tabular-nums; font-weight: 500; line-height: 1.25; text-align: center; white-space: nowrap; }
.timeline-tick em { color: #74909f; }
.timeline-tick[data-label="off"] b, .timeline-tick[data-label="off"] em { display: none; }
.timeline-tick.is-active i { background: #8fddd4; height: .5rem; }
.timeline-tick.is-active b { color: #8fddd4; font-weight: 700; }
.timeline-tick.is-active em { color: #8fddd4; }
.loops { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.loop-panel { background: #102536; border: 1px solid #214155; border-radius: .8rem; min-height: 10rem; overflow: hidden; position: relative; }
.smoke-frame:not([src]) { visibility: hidden; }
.smoke-frame { display: block; height: auto; margin: 0 auto; max-height: 1000px; max-width: 100%; min-height: 10rem; object-fit: contain; width: 100%; }
.range-extension { color: #8fddd4; display: block; font-feature-settings: "tnum" 1; font-size: .7rem; font-variant-numeric: tabular-nums; line-height: 1.35; margin-top: .35rem; min-height: 1.35em; }
.range-extension[hidden] { display: block; visibility: hidden; }
.frame-status { border-top: 1px solid #214155; color: #9ab2c1; font-size: .8rem; margin: .9rem -1rem -.4rem; padding: .6rem 1rem 0; text-align: center; }
footer { color: #9ab2c1; font-size: .85rem; line-height: 1.5; }
a { color: #8fddd4; }
@media (max-width: 700px) { main { width: min(100% - 1rem, 1500px); padding-top: 1.5rem; } header { display: block; } .noaa-link { display: inline-block; margin-top: .5rem; } .loops { grid-template-columns: 1fr; } .timeline-readout { text-align: left; } }