@font-face { font-family: Manrope; src: url('assets/fonts/manrope-variable.ttf') format('truetype'); font-style: normal; font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'DM Mono'; src: url('assets/fonts/dm-mono-regular.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'DM Mono'; src: url('assets/fonts/dm-mono-medium.ttf') format('truetype'); font-style: normal; font-weight: 500; font-display: swap; }

:root {
  --paper: #f5f7f2;
  --ink: #17211d;
  --muted: #67726c;
  --line: #d7ddd7;
  --line-strong: #aeb8b1;
  --card: #fbfcf9;
  --green: #184f3b;
  --mint: #bcebd0;
  --red: #e34b3f;
  --blue: #3a76b7;
  --yellow: #e8bd18;
  --sky: #85c9f4;
  --overcast: #747d78;
  --shadow: 0 18px 50px rgba(25, 50, 39, .07);
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Manrope, system-ui, sans-serif; }
button, input, select { font: inherit; }
button { color: inherit; }

.site-header { height: 78px; padding: 0 max(24px, calc((100vw - 1240px)/2)); display: flex; align-items: center; gap: 20px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; font-weight: 700; letter-spacing: -.03em; font-size: 19px; }
.brand small { color: var(--green); font-size: .62em; letter-spacing: 0; }
.brand-mark { width: 29px; height: 23px; display: flex; align-items: end; gap: 3px; }
.brand-mark i { display: block; width: 7px; background: var(--green); border-radius: 8px; transform: skew(-11deg); }
.brand-mark i:nth-child(1) { height: 12px; }.brand-mark i:nth-child(2) { height: 22px; }.brand-mark i:nth-child(3) { height: 17px; }
.live-pill { margin-left: auto; color: var(--muted); font: 500 11px DM Mono, monospace; letter-spacing: .08em; display: flex; gap: 7px; align-items: center; }
.live-pill i { width: 7px; height: 7px; background: #2aaa69; border-radius: 50%; box-shadow: 0 0 0 4px rgba(42,170,105,.12); }
.icon-button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: transparent; cursor: pointer; }
.language-button { border: 0; background: transparent; color: var(--green); cursor: pointer; font: 500 11px 'DM Mono', monospace; letter-spacing: .08em; padding: 9px 4px; }

main, footer { max-width: 1240px; margin: 0 auto; }
.hero { padding: 76px 8px 54px; max-width: 760px; }
.eyebrow, .section-label { font: 500 11px DM Mono, monospace; letter-spacing: .1em; color: var(--muted); margin: 0 0 16px; }
h1 { font-size: clamp(44px, 6vw, 75px); line-height: .98; letter-spacing: -.065em; font-weight: 500; margin: 0; }
h1 em { font-family: Georgia, serif; font-weight: 400; color: var(--green); }
.intro { max-width: 610px; color: var(--muted); font-size: 17px; line-height: 1.7; margin: 25px 0 0; }

.control-deck { display: grid; grid-template-columns: 1.55fr .85fr .52fr; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.city-area, .model-area, .period-area { padding: 26px 28px; min-width: 0; }.model-area, .period-area { border-left: 1px solid var(--line); }
.section-label { display: block; margin-bottom: 18px; }.section-label span { color: var(--green); margin-right: 10px; }
.city-chips { display: flex; flex-wrap: wrap; gap: 8px; min-height: 36px; margin-bottom: 15px; }
.chip { border: 1px solid var(--line-strong); background: transparent; padding: 8px 11px; display: inline-flex; align-items: center; gap: 9px; font-size: 13px; }
.chip b { font-weight: 600; }.chip small { color: var(--muted); }.chip button { border: 0; padding: 0; background: transparent; cursor: pointer; color: var(--muted); font-size: 17px; line-height: 1; }
.search-wrap { position: relative; display: flex; height: 48px; align-items: center; border-bottom: 1px solid var(--line-strong); gap: 11px; }
.search-wrap input { flex: 1; border: 0; background: transparent; outline: 0; min-width: 0; }.search-wrap:focus-within { border-color: var(--green); }
.key-hint { color: var(--muted); font: 400 9px DM Mono, monospace; border: 1px solid var(--line); padding: 3px 5px; }
.suggestions { position: absolute; z-index: 10; left: 0; right: 0; top: 49px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.suggestions button { display: flex; width: 100%; text-align: left; justify-content: space-between; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--line); background: transparent; cursor: pointer; }.suggestions button:hover { background: var(--paper); }.suggestions small { color: var(--muted); }
.select-wrap { position: relative; }.select-wrap select { appearance: none; width: 100%; border: 0; border-bottom: 1px solid var(--line-strong); background: transparent; padding: 11px 30px 11px 0; outline: 0; font-weight: 600; }.select-wrap span { position: absolute; right: 3px; top: 9px; }
.model-note { color: var(--muted); font-size: 11px; margin: 13px 0 0; }

.metric-tabs { display: flex; margin-top: 38px; border-bottom: 1px solid var(--line); gap: 2px; overflow-x: auto; }
.metric-tabs button { border: 0; border-bottom: 2px solid transparent; padding: 15px 20px; background: transparent; cursor: pointer; white-space: nowrap; font-size: 13px; color: var(--muted); }.metric-tabs button span { margin-right: 8px; }.metric-tabs button.active { border-bottom-color: var(--green); color: var(--green); font-weight: 700; }
.forecast-section { padding: 50px 0 70px; }
.forecast-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 26px; padding: 0 8px; }.forecast-heading .eyebrow { margin-bottom: 8px; }.forecast-heading h2 { font-size: 31px; letter-spacing: -.04em; font-weight: 500; margin: 0; }
.overview-controls { display: flex; flex-wrap: wrap; gap: 7px; margin: -10px 8px 22px; }
.overview-controls[hidden] { display: none; }
.overview-controls button { padding: 7px 10px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 11px; cursor: pointer; }
.overview-controls button[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: var(--paper); }
.overview-controls .compact-toggle { margin-left: auto; }
.legend { display: flex; align-items: center; gap: 17px; color: var(--muted); font: 400 10px DM Mono, monospace; }.legend i { display: inline-block; width: 18px; border-top: 2px solid; margin-right: 6px; vertical-align: middle; }
.legend.cloud-legend { flex-wrap: wrap; gap: 10px; }
.legend .cloud-swatch { width: 14px; height: 12px; border: 1px solid var(--line); border-top-width: 1px; margin-right: 4px; }
.status { padding: 35px; color: var(--muted); text-align: center; border: 1px dashed var(--line); }.status[hidden] { display: none; }
.charts { border-top: 1px solid var(--line); }
.chart-row { display: grid; grid-template-columns: 185px 1fr; border-bottom: 1px solid var(--line); min-height: 224px; background: rgba(255,255,255,.17); }
.city-meta { padding: 27px 20px 20px 8px; border-right: 1px solid var(--line); }.city-meta h3 { margin: 0 0 7px; font-size: 18px; }.city-meta p { margin: 0; color: var(--muted); font-size: 11px; }.city-value { margin-top: 36px; font: 500 28px DM Mono, monospace; }.city-value small { font-size: 11px; color: var(--muted); display: block; margin-top: 5px; }
.chart-box { position: relative; min-width: 0; padding: 15px 10px 7px; overflow: hidden; }.chart-box svg { display: block; width: 100%; height: 200px; overflow: visible; }.grid-line { stroke: var(--line); stroke-width: 1; }.day-line { stroke: var(--line-strong); stroke-width: 1; }.axis-text { fill: var(--muted); font: 9px DM Mono, monospace; }.date-text { fill: var(--ink); font: 10px DM Mono, monospace; font-weight: 500; }.temp-line, .secondary-line { fill: none; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }.temp-line { stroke: var(--red); stroke-width: 2.3; }.secondary-line { stroke: var(--blue); stroke-width: 1.7; }.area-fill { opacity: .16; }.bar { fill: var(--blue); opacity: .82; }.sunbar { fill: var(--yellow); }.cloud-cell { stroke: var(--card); stroke-width: .5; }.now-line { stroke: var(--green); stroke-width: 1; stroke-dasharray: 3 3; }
.cloud-day-separator { stroke: var(--ink); stroke-width: 1.6; opacity: .62; vector-effect: non-scaling-stroke; }
.chart-tooltip { position: absolute; pointer-events: none; display: none; background: var(--ink); color: var(--paper); font: 10px DM Mono, monospace; padding: 7px 9px; z-index: 3; white-space: nowrap; }
.overview-row { min-height: 0; }
.overview-row .city-meta { padding-top: 20px; padding-bottom: 16px; }
.overview-row .city-value { margin-top: 25px; }
.overview-row .chart-box { padding-top: 8px; padding-bottom: 4px; }
.overview-row .chart-box svg { height: 238px; }
.overview-label { fill: var(--muted); font: 500 9px DM Mono, monospace; letter-spacing: .05em; }
.overview-temp { fill: none; stroke: var(--red); stroke-width: 2; vector-effect: non-scaling-stroke; }
.overview-wind { fill: none; stroke: var(--green); stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.overview-gust { fill: none; stroke: var(--red); stroke-width: 1.25; opacity: .6; vector-effect: non-scaling-stroke; }
.overview-sun { fill: var(--yellow); opacity: .8; }
.overview-rain { fill: var(--blue); opacity: .82; }
.overview-value { fill: var(--ink); font: 500 8px DM Mono, monospace; paint-order: stroke; stroke: var(--card); stroke-width: 3px; stroke-linejoin: round; }
.overview-day-weather { font-size: 12px; }
.axis-text { font-size: 10.5px; }
.date-text { font-size: 11px; }
.overview-value { font-size: 10.5px; }
.supercompact-row { min-height: 138px; }
.supercompact-row .city-meta { padding-top: 19px; padding-bottom: 14px; }
.supercompact-row .city-value { margin-top: 18px; }
.compact-overview { display: grid; grid-template-columns: repeat(7, minmax(92px, 1fr)); min-width: 690px; height: auto; }
.compact-day { padding: 14px 10px 10px; border-right: 1px solid var(--line); }
.compact-overview .compact-head { display: block; }
.compact-overview .compact-weather { margin-top: 7px; min-height: 22px; }
.compact-overview .compact-values { flex-direction: column; gap: 4px; align-items: flex-start; }
.compact-day:last-child { border-right: 0; }
.compact-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.compact-date { color: var(--muted); font: 500 10px DM Mono, monospace; }
.compact-weather { display: flex; align-items: center; gap: 2px; line-height: 1; filter: saturate(.9); }
.compact-sky { font-size: 22px; }
.compact-precip { display: inline-flex; align-items: center; white-space: nowrap; }
.compact-precip.rain-light { font-size: 13px; }
.compact-precip.rain-moderate { font-size: 15px; letter-spacing: -5px; padding-right: 4px; }
.compact-precip.rain-heavy { font-size: 18px; letter-spacing: -6px; padding-right: 6px; }
.compact-precip.rain-extreme { font-size: 18px; letter-spacing: -6px; padding: 3px 8px 3px 3px; background: color-mix(in srgb, var(--blue) 18%, transparent); outline: 1px solid color-mix(in srgb, var(--blue) 45%, transparent); }
.compact-precip.snow { font-size: 17px; }
.compact-lightning { font-size: 17px; margin-left: -3px; }
.compact-temp { font: 500 16px DM Mono, monospace; margin-bottom: 8px; white-space: nowrap; }
.compact-temp b { color: var(--red); font-weight: 500; }
.compact-values { display: flex; gap: 8px; color: var(--muted); font: 400 10px DM Mono, monospace; white-space: nowrap; }
footer { border-top: 1px solid var(--line); padding: 25px 8px 45px; display: flex; justify-content: space-between; color: var(--muted); font: 400 10px DM Mono, monospace; }
footer a { color: inherit; text-underline-offset: 3px; }
.footer-links { display: flex; gap: 16px; align-items: center; }

.legal-main { max-width: 860px; min-height: calc(100vh - 180px); padding: 72px 8px 96px; }
.legal-intro { color: var(--muted); font-size: 16px; line-height: 1.7; max-width: 680px; }
.legal-notice { margin: 34px 0; padding: 18px 20px; border-left: 3px solid var(--yellow); background: var(--card); line-height: 1.6; }
.legal-content { margin-top: 48px; }
.legal-content section { padding: 24px 0; border-top: 1px solid var(--line); }
.legal-content h2 { margin: 0 0 12px; font-size: 21px; }
.legal-content p { margin: 0 0 10px; line-height: 1.7; }
.placeholder { color: var(--red); font-family: 'DM Mono', monospace; }

body.dark { --paper:#111714; --ink:#edf2ee; --muted:#a1aaa4; --line:#303a34; --line-strong:#536057; --card:#19211d; --green:#8fdbb0; --mint:#254c39; --sky:#397faa; --overcast:#68706b; --shadow:0 18px 50px rgba(0,0,0,.2); }
body.dark .chart-row { background: rgba(255,255,255,.01); }

@media (max-width: 1280px) { main, footer { margin-left: 24px; margin-right: 24px; } }
@media (max-width: 760px) {
  .site-header { height: 60px; padding: 0 14px; }.live-pill { display: none; } main, footer { margin-left: 12px; margin-right: 12px; }
  .hero { padding: 28px 2px 25px; }
  .hero .eyebrow { margin-bottom: 10px; }
  .hero h1 { font-size: 43px; }
  .intro { font-size: 14px; line-height: 1.5; margin-top: 14px; }
  .control-deck { grid-template-columns: 1fr; }
  .city-area { padding: 16px 14px; }
  .city-area .section-label { margin-bottom: 12px; }
  .city-chips { margin-bottom: 10px; }
  .search-wrap { height: 42px; }
  .suggestions { top: 43px; }
  .model-area, .period-area { display: grid; grid-template-columns: 66px minmax(0,1fr); align-items: center; gap: 8px; border-left: 0; border-top: 1px solid var(--line); padding: 8px 14px; }
  .model-area .section-label, .period-area .section-label { margin: 0; font-size: 9px; }
  .model-area .section-label span, .period-area .section-label span { margin-right: 5px; }
  .model-area .select-wrap select, .period-area .select-wrap select { padding-top: 6px; padding-bottom: 6px; font-size: 12px; }
  .model-area .select-wrap span, .period-area .select-wrap span { top: 4px; }
  .model-area .model-note, .period-area .model-note { display: none; }
  .metric-tabs { margin-top: 18px; }
  .metric-tabs button { padding: 11px 13px; }
  .forecast-section { padding-top: 24px; }
  .forecast-heading { align-items: start; flex-direction: column; gap: 10px; margin-bottom: 16px; }
  .forecast-heading .eyebrow { margin-bottom: 5px; }
  .forecast-heading h2 { font-size: 26px; }
  .overview-controls { margin-top: -5px; margin-bottom: 14px; }
  .chart-row { grid-template-columns: 1fr; }.city-meta { border-right: 0; border-bottom: 1px solid var(--line); padding: 18px 12px; display: grid; grid-template-columns: 1fr auto; }.city-value { margin: 0; text-align: right; }.city-value small { display: none; }.chart-box { overflow-x: auto; }.chart-box svg { min-width: 720px; }.overview-row .chart-box svg { min-width: 780px; }.overview-controls .compact-toggle { margin-left: 0; }
  footer { gap: 12px; flex-direction: column; }.footer-links { flex-wrap: wrap; }
  .legal-main { padding-top: 48px; }
}