@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Inter:wght@500;600;700&display=swap');

:root {
  --bg:#071018; --panel:#0c1821; --panel-2:#10212c; --line:#203541;
  --muted:#78909f; --text:#edf5f7; --cyan:#41ddd3; --green:#47e08b;
  --blue:#63aefa; --amber:#ffc45e; --red:#ff6f70; --magenta:#e989ff;
}
* { box-sizing:border-box }
html { background:var(--bg); color-scheme:dark }
body { margin:0; min-height:100vh; color:var(--text); background:radial-gradient(circle at 15% -10%,#12394c 0,transparent 28rem),var(--bg); font-family:Inter,system-ui,sans-serif }
.app-shell { width:min(1420px,100%); margin:auto; padding:0 26px 30px }
.topbar { height:78px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line) }
.brand { display:flex; align-items:center; gap:13px }
.brand h1 { margin:2px 0 0; font-size:20px; letter-spacing:-.02em }
.eyebrow,.micro-label { margin:0; color:var(--muted); font:600 9px/1.2 'IBM Plex Mono',monospace; letter-spacing:.15em }
.scope-mark { width:34px; height:34px; border:1px solid #2b6c74; border-radius:50%; position:relative; display:grid; place-items:center }
.scope-mark:before,.scope-mark:after { content:""; position:absolute; background:#2b6c74 }
.scope-mark:before { width:44px; height:1px }.scope-mark:after { width:1px; height:44px }
.scope-mark i { width:23px; height:23px; border:1px solid #21878b; border-radius:50% }
.clock-group { display:flex; align-items:center; gap:24px }
.clock-group>div { display:flex; flex-direction:column; gap:3px }
.clock-group strong { font:600 15px 'IBM Plex Mono'; font-variant-numeric:tabular-nums }
.refresh-button { height:38px; padding:0 12px; border:1px solid var(--line); border-radius:4px; background:#0d1a23; color:var(--text); display:flex; align-items:center; gap:7px; font:600 10px 'IBM Plex Mono'; letter-spacing:.08em; text-transform:uppercase; cursor:pointer }
.refresh-button:hover { border-color:var(--cyan) }.refresh-button svg { width:16px; fill:none; stroke:currentColor; stroke-width:1.8 }.refresh-button.loading svg { animation:spin 1s linear infinite } @keyframes spin { to { transform:rotate(360deg) } }
main { display:flex; flex-direction:column; gap:22px }
.impact-rail { margin-top:16px; min-height:64px; display:grid; grid-template-columns:1.35fr 1.45fr 1fr 1fr .8fr; border:1px solid var(--line); background:linear-gradient(90deg,#10232d,#0b171f) }
.impact-rail>div { padding:12px 16px; border-right:1px solid var(--line); display:flex; flex-direction:column; justify-content:center; gap:5px; min-width:0 }
.impact-rail>div:last-child { border:0 }.impact-rail strong { font:700 13px 'IBM Plex Mono'; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.impact-lead { flex-direction:row!important; align-items:center; justify-content:flex-start!important; gap:11px!important }
.impact-lead>div { display:flex; flex-direction:column; gap:5px; min-width:0 }.pulse-dot { width:8px; height:8px; flex:none; border-radius:50%; background:var(--green); box-shadow:0 0 0 5px #47e08b15,0 0 14px #47e08b88 }
.alerts { border:1px solid #744237; background:#2b1815; padding:10px 14px; color:#ffd4ca; font-size:12px }.alert-row+.alert-row { margin-top:6px }.alert-row strong { color:#fff; margin-right:8px }
.board-section { min-width:0 }.section-heading { min-height:35px; display:flex; align-items:flex-start; justify-content:space-between; border-bottom:1px solid var(--line); margin-bottom:10px }
.section-heading>div:first-child { display:flex; align-items:baseline; gap:9px }.section-heading h2 { margin:0 0 10px; font-size:15px }.section-heading p { margin:2px 0 0; color:var(--muted); font:600 9px 'IBM Plex Mono'; letter-spacing:.06em; text-transform:uppercase }
.section-index { color:var(--cyan); font:700 9px 'IBM Plex Mono' }.source-tag { color:var(--muted); border:1px solid var(--line); border-radius:3px; padding:4px 7px; font:600 8px 'IBM Plex Mono' }
.metar-board { border:1px solid var(--line); background:var(--panel) }.metar-header,.metar-row { display:grid; grid-template-columns:1.15fr .7fr 1.35fr 1.35fr 1.1fr 1.25fr .7fr; align-items:stretch }
.metar-header { min-height:26px; color:var(--muted); background:#09141b; font:600 8px 'IBM Plex Mono'; letter-spacing:.12em }
.metar-header>span,.metar-cell { padding:7px 12px; border-right:1px solid var(--line); display:flex; align-items:center; min-width:0 }.metar-header>span:last-child,.metar-cell:last-child { border:0 }
.metar-row { min-height:55px; border-top:1px solid var(--line); position:relative }.metar-row.primary { background:linear-gradient(90deg,#102731,#0d1b24 45%) }.station-cell { gap:9px }.station-id { font:700 18px 'IBM Plex Mono' }.station-name { color:var(--muted); font-size:9px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.category { display:inline-block; min-width:48px; padding:5px 6px; border:1px solid currentColor; border-radius:3px; text-align:center; font:700 10px 'IBM Plex Mono' }.vfr { color:var(--green) }.mvfr { color:var(--blue) }.ifr { color:var(--red) }.lifr { color:var(--magenta) }.unknown { color:var(--muted) }
.impact-value { font:700 12px 'IBM Plex Mono'; white-space:nowrap }.muted-dash { color:#3f5866; font:600 13px 'IBM Plex Mono' }.weather-value { color:var(--amber) }.weather-value.precip { color:#72baff }.wind-arrow { color:var(--cyan); display:inline-block; margin-right:6px; transform:rotate(var(--wind-rotation)) }.age-cell { color:var(--muted); font:500 9px 'IBM Plex Mono' }.stale { color:var(--amber)!important }
.raw-details { grid-column:1/-1; border-top:1px solid #152832; background:#09141b; color:#6f8997; font:500 9px/1.5 'IBM Plex Mono' }.raw-details summary { cursor:pointer; padding:5px 12px; list-style:none; text-transform:uppercase; letter-spacing:.08em }.raw-details summary::-webkit-details-marker { display:none }.raw-details p { margin:0; padding:0 12px 8px; color:#a8bbc5 }
.panel { border:1px solid var(--line); background:var(--panel) }
.precip-panel { overflow:hidden }
.hourly-strip { min-height:220px }
.precip-chart { margin:0 }
.precip-chart-scroll { overflow-x:auto; scrollbar-color:#294653 #0a151d; scrollbar-width:thin }
.precip-chart svg { display:block; width:100%; min-width:760px; height:auto; background:linear-gradient(180deg,#102430 0,#0a171f 72%,#09141b 100%) }
.precip-grid line { stroke:#203541; stroke-width:1; vector-effect:non-scaling-stroke }
.precip-grid text { fill:#607b89; font:600 8px 'IBM Plex Mono',monospace }
.precip-grid.threshold line { stroke:#d69a3d; stroke-dasharray:5 5; opacity:.82 }
.precip-grid .threshold-label { fill:#dba64f; font-size:7px; letter-spacing:.08em }
.precip-area { fill:url(#precip-area-fill) }
.precip-line-halo,.precip-line { fill:none; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke }
.precip-line-halo { stroke:#071018; stroke-width:7; opacity:.72 }
.precip-line { stroke:#74c9ff; stroke-width:3 }
.precip-point circle { fill:#0b1922; stroke:#74c9ff; stroke-width:2; vector-effect:non-scaling-stroke }
.precip-point.wet circle { fill:#74c9ff; filter:drop-shadow(0 0 4px #55b8ff) }
.point-guide { stroke:#355361; stroke-width:1; stroke-dasharray:2 4; vector-effect:non-scaling-stroke }
.point-value { fill:#d9efff; font:700 9px 'IBM Plex Mono',monospace }
.point-time { fill:#9ab0bb; font:600 8px 'IBM Plex Mono',monospace }
.point-wx { fill:#8dceff; font:700 7px 'IBM Plex Mono',monospace; letter-spacing:.04em }
.precip-chart figcaption { min-height:30px; padding:7px 12px; display:flex; align-items:center; gap:18px; border-top:1px solid var(--line); background:#09141b; color:#718b98; font:600 7px 'IBM Plex Mono'; letter-spacing:.06em }
.precip-chart figcaption span { display:flex; align-items:center; gap:6px }
.precip-chart figcaption i { display:inline-block; width:17px; height:0 }
.legend-line { border-top:2px solid #74c9ff }
.legend-threshold { border-top:1px dashed #d69a3d }
.precip-chart figcaption .chart-hint { margin-left:auto; color:#526d7a }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important }
.taf-panel { overflow:hidden }
.taf-summary { min-height:38px; padding:8px 12px; display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid var(--line); background:#09141b; color:#91a8b4; font:600 9px 'IBM Plex Mono'; letter-spacing:.05em }
.taf-summary strong { color:var(--text) }
.taf-legend { display:flex; align-items:center; gap:6px; color:#718b98; font-size:8px; white-space:nowrap }
.taf-legend i { width:9px; height:9px; margin-left:7px; border-radius:2px; background:currentColor; box-shadow:0 0 8px currentColor }
.taf-legend i:first-child { margin-left:0 }
.taf-scroll { overflow-x:auto; scrollbar-color:#294653 #0a151d; scrollbar-width:thin }
.taf-timeline { width:100%; min-width:1458px; table-layout:fixed; border-collapse:collapse; background:#0a151d }
.taf-axis { height:42px; color:#8aa2ae; font:600 8px 'IBM Plex Mono' }
.taf-axis td { position:relative; height:42px; padding:6px 0 5px; vertical-align:top; border-right:1px solid #162b35; border-bottom:1px solid var(--line); text-align:center; white-space:nowrap }
.taf-axis td:nth-child(3n+1) { border-right-color:#29414d }
.taf-axis b { display:block; position:relative; z-index:1; color:#c0d0d7; font-size:9px }
.taf-axis td.current-hour { background:#17323a }.taf-axis td.current-hour:after { content:""; position:absolute; top:0; bottom:-151px; left:50%; width:1px; background:#dffcff; box-shadow:0 0 7px #fff; z-index:3 }.taf-axis td.current-hour span { position:absolute; top:2px; left:calc(50% + 5px); padding:2px 4px; border-radius:2px; background:#e9f7fa; color:#071018; font:700 7px 'IBM Plex Mono'; z-index:4 }
.taf-segments { height:150px }
.taf-segment-cell { height:150px; padding:0; vertical-align:top; border-top:4px solid currentColor; border-right:1px solid #29404b; overflow:hidden }
.taf-segment-cell:last-child { border-right:0 }
.taf-segment-cell.vfr { background:linear-gradient(180deg,#123024 0,#0d211b 55%,#0b1918 100%) }
.taf-segment-cell.mvfr { background:linear-gradient(180deg,#142d44 0,#102538 55%,#0b1923 100%) }
.taf-segment-cell.ifr { background:linear-gradient(180deg,#3a2025 0,#2c191e 55%,#17151a 100%) }
.taf-segment-cell.lifr { background:linear-gradient(180deg,#36203e 0,#291a31 55%,#17141d 100%) }
.taf-segment { height:146px; min-width:0; padding:9px 11px 12px; position:relative; overflow:hidden }
.segment-top { display:flex; align-items:center; justify-content:space-between; gap:7px; min-width:0; color:#8da3ae; font:600 8px 'IBM Plex Mono'; white-space:nowrap }
.segment-change { padding:3px 5px; border:1px solid currentColor; border-radius:2px; color:var(--amber); letter-spacing:.06em }
.segment-category { margin:11px 0 10px; display:flex; align-items:baseline; gap:8px; white-space:nowrap }
.segment-category strong { font:700 19px 'IBM Plex Mono'; letter-spacing:.03em }
.segment-category span { color:#718996; font:600 7px 'IBM Plex Mono' }
.segment-impacts { display:flex; flex-direction:column; align-items:flex-start; gap:5px }
.timeline-impact { max-width:100%; color:#d4e0e5; font:700 9px 'IBM Plex Mono'; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.timeline-impact b { display:inline-block; min-width:34px; margin-right:5px; color:#718b98; font-size:7px; letter-spacing:.08em }
.timeline-impact.wx { color:#86c9ff }.timeline-impact.wind { color:#ffd27e }.timeline-impact.quiet { color:#66808d; font-size:8px }
.taf-meta { display:flex; justify-content:space-between; gap:15px; padding:8px 12px; border-top:1px solid var(--line); color:var(--muted); background:#09141b; font:500 8px 'IBM Plex Mono' }
.taf-raw { text-align:right }.taf-raw summary { cursor:pointer; list-style:none; color:#9bb0ba }.taf-raw summary::-webkit-details-marker { display:none }.taf-raw span { display:block; max-width:900px; margin-top:8px; color:#b4c5cc; line-height:1.5; text-align:left }
.map-heading { align-items:start }.map-tabs { display:flex!important; gap:0!important }.map-tab { padding:8px 13px; border:1px solid var(--line); border-bottom:0; background:#09141b; color:var(--muted); font:600 9px 'IBM Plex Mono'; cursor:pointer }.map-tab+.map-tab { border-left:0 }.map-tab.active { color:var(--cyan); background:#10232d }.map-frame-wrap { height:430px; border:1px solid var(--line); background:#0a151d; overflow:hidden }.map-frame-wrap iframe { width:100%; height:100%; border:0; display:block }.disclaimer { margin:6px 0 0; color:#57707e; text-align:right; font:500 8px 'IBM Plex Mono' }
.skeleton { background:linear-gradient(90deg,#101d26 25%,#19303c 50%,#101d26 75%); background-size:200% 100%; animation:shimmer 1.4s infinite } @keyframes shimmer { to { background-position:-200% 0 } }.row-skeleton { height:55px; border-bottom:1px solid var(--line) }.line { height:18px; margin:20px }.error-state { padding:18px; color:var(--red); font:600 11px 'IBM Plex Mono' }
footer { margin-top:24px; padding-top:12px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:15px; color:#56707e; font:500 8px 'IBM Plex Mono'; letter-spacing:.06em; text-transform:uppercase }

@media (max-width:850px) {
  .app-shell { padding:0 12px 22px }.topbar { height:66px }.scope-mark { display:none }.brand h1 { font-size:17px }.eyebrow { font-size:7px }.clock-group { gap:12px }.clock-group>div:first-child { display:none }.clock-group strong { font-size:12px }.refresh-button { width:36px; padding:0; justify-content:center }.refresh-button span { display:none }
  main { gap:18px }.impact-rail { margin-top:10px; grid-template-columns:repeat(6,1fr); min-height:0 }.impact-rail>div { padding:8px 9px; min-height:46px }.impact-rail>div:nth-child(1),.impact-rail>div:nth-child(2) { grid-column:span 3; border-bottom:1px solid var(--line) }.impact-rail>div:nth-child(2) { border-right:0 }.impact-rail>div:nth-child(n+3) { grid-column:span 2; border-right:1px solid var(--line) }.impact-rail>div:last-child { border-right:0 }.impact-rail strong { font-size:10px }.impact-lead { padding-left:12px!important }
  .section-heading h2 { font-size:14px }.section-heading p { font-size:7px; max-width:46%; text-align:right }
  .metar-header { display:none }.metar-row { display:flex; flex-wrap:wrap; align-items:stretch; min-height:0 }.metar-cell { min-height:48px; padding:7px 8px; border-bottom:0 }.station-cell { width:68px; flex:none }.category-cell { width:62px; flex:none }.wx-cell,.wind-cell,.vis-cell,.cig-cell { flex:0 auto }.wx-cell:has(.muted-dash),.wind-cell:has(.muted-dash),.vis-cell:has(.muted-dash),.cig-cell:has(.muted-dash) { display:none }.age-cell { width:38px; flex:none; margin-left:auto; justify-content:center; border:0; padding:4px; font-size:7px }.station-name { display:none }.station-id { font-size:16px }.raw-details { display:none }.impact-value { font-size:9px }.metar-cell:before { content:attr(data-label); color:#57707e; font:600 6px 'IBM Plex Mono'; letter-spacing:.08em; margin-right:5px }.station-cell:before,.category-cell:before,.wx-cell:before { display:none }
  .precip-chart svg { min-width:700px }.precip-chart figcaption { gap:12px }.precip-chart figcaption .chart-hint { display:none }.taf-summary { align-items:flex-start; flex-direction:column; gap:7px }.taf-legend { width:100%; justify-content:flex-start }.taf-segments { min-height:142px }.taf-meta { align-items:flex-start; flex-direction:column }.taf-raw { text-align:left }.map-frame-wrap { height:350px }.map-tabs .map-tab { padding:7px 8px; font-size:8px }
  footer { flex-wrap:wrap; gap:7px }
}
@media (max-width:390px) { .brand h1 { font-size:16px }.impact-rail>div { padding-left:8px; padding-right:8px }.impact-rail strong { font-size:10px }.section-heading p { display:none }.map-frame-wrap { height:310px } }