@layer reset, base, components, utilities, motion;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { color-scheme: light dark; scroll-behavior: smooth; }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
  ul, ol { margin: 0; padding: 0; }
  img, picture, svg, canvas { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; }
  button, [role="button"] { cursor: pointer; }
  a { color: inherit; }
  table { border-collapse: collapse; }
}

@layer base {
  :root {
    --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display: "Avenir Next", Avenir, var(--font-sans);
    --bg: #f4f8fc;
    --bg-elevated: rgba(255,255,255,.78);
    --bg-solid: #fff;
    --bg-muted: #eaf1f8;
    --ink: #0d1b2a;
    --ink-soft: #4b5f75;
    --ink-faint: #718197;
    --line: rgba(19,52,87,.14);
    --line-strong: rgba(19,52,87,.24);
    --brand: #1467d8;
    --brand-strong: #084ba7;
    --brand-soft: #dceeff;
    --cyan: #27b9cb;
    --mint: #45c89a;
    --sun: #ffbc4d;
    --amber: #ef8f2f;
    --danger: #d94357;
    --danger-soft: #ffe6eb;
    --success: #138966;
    --success-soft: #e1f6ee;
    --warning: #9b570c;
    --warning-soft: #fff0d8;
    --shadow-sm: 0 8px 24px rgba(17,44,76,.08);
    --shadow-md: 0 18px 50px rgba(18,54,95,.12);
    --shadow-lg: 0 32px 90px rgba(12,42,79,.18);
    --radius-xs: 10px;
    --radius-sm: 16px;
    --radius-md: 24px;
    --radius-lg: 34px;
    --radius-xl: 48px;
    --radius-pill: 999px;
    --container: 1240px;
    --header-height: 74px;
    --focus: 0 0 0 4px rgba(20,103,216,.22);
    --sky-a: #eef9ff;
    --sky-b: #cce9ff;
    --sky-c: #eff9f5;
    --orb-a: #fff2b3;
    --orb-b: #ffc45a;
    --orb-c: #69aaff;
  }
  :root[data-theme="dark"] {
    --bg: #07131f;
    --bg-elevated: rgba(13,28,45,.8);
    --bg-solid: #0c1b2c;
    --bg-muted: #10243a;
    --ink: #edf6ff;
    --ink-soft: #aec2d8;
    --ink-faint: #8097ad;
    --line: rgba(167,203,239,.15);
    --line-strong: rgba(167,203,239,.28);
    --brand: #71b0ff;
    --brand-strong: #a4ccff;
    --brand-soft: #17365c;
    --cyan: #63d2df;
    --mint: #68dbad;
    --sun: #ffd270;
    --amber: #ffb45a;
    --danger: #ff8291;
    --danger-soft: #42212b;
    --success: #76e3bb;
    --success-soft: #15382e;
    --warning: #ffc77a;
    --warning-soft: #3d2d16;
    --shadow-sm: 0 8px 24px rgba(0,0,0,.24);
    --shadow-md: 0 18px 50px rgba(0,0,0,.32);
    --shadow-lg: 0 32px 90px rgba(0,0,0,.42);
    --sky-a: #07131f;
    --sky-b: #102b46;
    --sky-c: #0b2331;
    --orb-a: #f8df7e;
    --orb-b: #f19d37;
    --orb-c: #315e9d;
  }
  html { background: var(--bg); }
  body {
    min-height: 100vh;
    overflow-x: hidden;
    background: radial-gradient(circle at 12% 0%, color-mix(in srgb,var(--brand-soft) 60%,transparent), transparent 34rem), linear-gradient(180deg,var(--bg),var(--bg));
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -4;
    pointer-events: none;
    background: linear-gradient(145deg,var(--sky-a),var(--sky-b) 48%,var(--sky-c));
    opacity: .44;
    transition: background 700ms ease, opacity 700ms ease;
  }
  body[data-weather="rain"]::before, body[data-weather="storm"]::before { opacity: .7; background: linear-gradient(145deg,#77899c,#445c73 45%,#1b3148); }
  body[data-weather="snow"]::before { opacity: .66; background: linear-gradient(145deg,#f7fbff,#c6dff4 50%,#e7f2fb); }
  body[data-weather="fog"]::before { opacity: .7; background: linear-gradient(145deg,#d8e2e9,#b6c6d2 55%,#eef2f4); }
  body[data-weather="night"]::before { opacity: .82; background: linear-gradient(145deg,#06101d,#142948 52%,#0f2036); }
  h1,h2,h3,h4 { font-family: var(--font-display); line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
  h1 { font-size: clamp(2.55rem,7vw,5.8rem); font-weight: 780; }
  h2 { font-size: clamp(2rem,4.2vw,3.75rem); font-weight: 750; }
  h3 { font-size: clamp(1.25rem,2.3vw,1.78rem); font-weight: 720; }
  p { text-wrap: pretty; }
  a { text-decoration-thickness: .08em; text-underline-offset: .18em; }
  :focus-visible { outline: none; box-shadow: var(--focus); border-radius: 8px; }
  ::selection { background: color-mix(in srgb,var(--brand) 28%,transparent); }
  .skip-link { position: fixed; top: 10px; left: 10px; z-index: 1000; transform: translateY(-160%); padding: .75rem 1rem; border-radius: var(--radius-pill); background: var(--ink); color: var(--bg-solid); text-decoration: none; }
  .skip-link:focus { transform: translateY(0); }
}

@layer components {
  .container { width: min(calc(100% - 2rem),var(--container)); margin-inline: auto; }
  .section { position: relative; padding-block: clamp(3.6rem,8vw,7.5rem); }
  .section--tight { padding-block: clamp(2.4rem,5vw,4.6rem); }
  .section--tinted { border-block: 1px solid var(--line); background: color-mix(in srgb,var(--bg-solid) 42%,transparent); }
  .section-heading { display: grid; gap: .8rem; max-width: 760px; margin-bottom: clamp(1.8rem,4vw,3rem); }
  .section-heading--split { max-width: none; grid-template-columns: minmax(0,1fr) auto; align-items: end; }
  .eyebrow { display: inline-flex; align-items: center; gap: .45rem; width: fit-content; color: var(--brand-strong); font-size: .78rem; font-weight: 780; letter-spacing: .14em; text-transform: uppercase; }
  .eyebrow::before { content:""; width: 1.8rem; height: 2px; border-radius: 2px; background: currentColor; }
  .lead { max-width: 65ch; color: var(--ink-soft); font-size: clamp(1.05rem,1.8vw,1.3rem); }
  .muted { color: var(--ink-soft); }
  .fineprint { color: var(--ink-faint); font-size: .82rem; }
  .visually-hidden { 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; }

  .site-header { position: sticky; top: 0; z-index: 100; height: var(--header-height); border-bottom: 1px solid transparent; transition: background .2s ease,border-color .2s ease,box-shadow .2s ease; }
  .site-header.is-scrolled { border-color: var(--line); background: color-mix(in srgb,var(--bg-solid) 78%,transparent); box-shadow: 0 6px 30px rgba(15,46,80,.08); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); }
  .header-inner { height:100%; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1.4rem; }
  .brand { display:inline-flex; align-items:center; gap:.62rem; color:var(--ink); font-family:var(--font-display); font-size:1.12rem; font-weight:820; letter-spacing:-.03em; text-decoration:none; }
  .brand svg { width:36px; height:36px; filter:drop-shadow(0 6px 12px rgba(14,78,160,.18)); }
  .brand em { color:var(--brand-strong); font-style:normal; }
  .primary-nav { justify-self:center; display:flex; align-items:center; gap:.28rem; }
  .nav-link { position:relative; padding:.68rem .86rem; border-radius:var(--radius-pill); color:var(--ink-soft); font-size:.93rem; font-weight:670; text-decoration:none; transition:color .16s ease,background .16s ease,transform .16s ease; }
  .nav-link:hover { color:var(--ink); background:color-mix(in srgb,var(--bg-solid) 64%,transparent); transform:translateY(-1px); }
  .nav-link[aria-current="page"] { color:var(--brand-strong); background:var(--brand-soft); }
  .header-actions { display:flex; align-items:center; gap:.5rem; }
  .icon-button { display:inline-grid; place-items:center; width:42px; height:42px; padding:0; border:1px solid var(--line); border-radius:50%; background:color-mix(in srgb,var(--bg-solid) 70%,transparent); color:var(--ink); box-shadow:var(--shadow-sm); transition:transform .16s ease,border-color .16s ease,background .16s ease; }
  .icon-button:hover { transform:translateY(-2px); border-color:var(--line-strong); background:var(--bg-solid); }
  .icon-button svg { width:19px; height:19px; }
  .mobile-menu-button { display:none; }

  .hero { min-height:calc(100svh - var(--header-height)); display:grid; align-items:center; position:relative; isolation:isolate; overflow-x:clip; padding-block:clamp(2rem,5vw,5rem); }
  .hero::after { content:""; position:absolute; inset:auto -10vw -18vw 35vw; height:55vw; z-index:-2; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--brand) 10%,transparent),transparent 65%); filter:blur(40px); pointer-events:none; }
  .hero-grid { display:grid; grid-template-columns:minmax(0,1.07fr) minmax(360px,.93fr); gap:clamp(2rem,6vw,6rem); align-items:center; }
  .hero-copy { display:grid; gap:1.45rem; align-content:center; }
  .hero-title { max-width:12ch; }
  .hero-title strong { color:var(--brand-strong); font-weight:inherit; }
  .hero-subtitle { max-width:59ch; color:var(--ink-soft); font-size:clamp(1.08rem,2vw,1.32rem); }
  .hero-actions { display:flex; flex-wrap:wrap; gap:.75rem; }
  .hero-trust { display:flex; flex-wrap:wrap; gap:.75rem 1.1rem; color:var(--ink-soft); font-size:.88rem; }
  .hero-trust span { display:inline-flex; align-items:center; gap:.38rem; }
  .hero-trust svg { width:16px; height:16px; color:var(--success); }

  .button { display:inline-flex; align-items:center; justify-content:center; gap:.55rem; min-height:48px; padding:.72rem 1.08rem; border:1px solid transparent; border-radius:var(--radius-pill); font-weight:750; text-decoration:none; transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease; }
  .button:hover { transform:translateY(-2px); }
  .button svg { width:19px; height:19px; }
  .button--primary { background:linear-gradient(135deg,var(--brand),var(--brand-strong)); color:#fff; box-shadow:0 14px 28px rgba(20,103,216,.24); }
  .button--primary:hover { box-shadow:0 18px 36px rgba(20,103,216,.32); }
  .button--secondary { border-color:var(--line); background:color-mix(in srgb,var(--bg-solid) 74%,transparent); color:var(--ink); }
  .button--ghost { border-color:transparent; background:transparent; color:var(--brand-strong); }
  .button--small { min-height:40px; padding:.52rem .85rem; font-size:.9rem; }
  .button[disabled], .icon-button[disabled] { opacity:.52; pointer-events:none; }

  .search-shell { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.6rem; width:min(100%,650px); }
  .search-field { position:relative; display:flex; align-items:center; min-height:58px; border:1px solid var(--line-strong); border-radius:var(--radius-pill); background:color-mix(in srgb,var(--bg-solid) 82%,transparent); box-shadow:var(--shadow-md); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
  .search-field:focus-within { border-color:var(--brand); box-shadow:var(--shadow-md),var(--focus); }
  .search-field > svg { flex:0 0 auto; width:20px; height:20px; margin-left:1rem; color:var(--ink-faint); }
  .search-input { width:100%; min-width:0; height:56px; padding:.2rem 1rem .2rem .72rem; border:0; outline:0; background:transparent; color:var(--ink); }
  .search-input::placeholder { color:var(--ink-faint); }
  .search-results { position:absolute; top:calc(100% + .55rem); left:0; right:0; z-index:120; display:none; overflow:hidden; max-height:360px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--bg-solid); box-shadow:var(--shadow-lg); }
  .search-results.is-open { display:block; }
  .search-result { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.75rem; width:100%; padding:.9rem 1rem; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink); text-align:left; }
  .search-result:last-child { border-bottom:0; }
  .search-result:hover, .search-result[aria-selected="true"] { background:var(--brand-soft); }
  .search-result__icon { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--bg-muted); color:var(--brand-strong); }
  .search-result__icon svg { width:17px; height:17px; }
  .search-result__name { font-weight:780; }
  .search-result__meta { color:var(--ink-soft); font-size:.82rem; }
  .search-result__country { color:var(--ink-faint); font-size:.78rem; }

  .weather-card { position:relative; overflow:hidden; min-height:540px; display:grid; align-content:space-between; gap:1.5rem; padding:clamp(1.25rem,3vw,2rem); border:1px solid color-mix(in srgb,var(--line) 80%,transparent); border-radius:var(--radius-xl); background:linear-gradient(150deg,color-mix(in srgb,var(--bg-solid) 86%,transparent),color-mix(in srgb,var(--brand-soft) 34%,transparent)); box-shadow:var(--shadow-lg); -webkit-backdrop-filter:blur(22px) saturate(145%); backdrop-filter:blur(22px) saturate(145%); }
  .weather-card::before { content:""; position:absolute; width:310px; height:310px; top:-120px; right:-95px; border-radius:50%; background:radial-gradient(circle,var(--orb-a),var(--orb-b) 45%,transparent 70%); opacity:.82; filter:blur(1px); }
  .weather-card__top { position:relative; z-index:1; display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
  .location-kicker { display:flex; align-items:center; gap:.45rem; color:var(--ink-soft); font-size:.86rem; font-weight:680; }
  .location-kicker svg { width:17px; height:17px; color:var(--brand-strong); }
  .location-name { margin-top:.25rem; font-size:clamp(1.6rem,3vw,2.45rem); }
  .example-badge { display:inline-flex; align-items:center; gap:.35rem; margin-top:.6rem; padding:.3rem .58rem; border:1px solid var(--line); border-radius:var(--radius-pill); background:color-mix(in srgb,var(--bg-solid) 70%,transparent); color:var(--ink-soft); font-size:.74rem; font-weight:700; }
  .status-dot { width:8px; height:8px; border-radius:50%; background:var(--success); box-shadow:0 0 0 4px color-mix(in srgb,var(--success) 14%,transparent); }
  .weather-card__main { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1rem; align-items:center; }
  .weather-answer { display:grid; gap:.35rem; }
  .weather-answer__label { color:var(--brand-strong); font-size:.82rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
  .weather-answer__headline { max-width:13ch; font-size:clamp(1.85rem,4.3vw,3.7rem); }
  .weather-answer__detail { max-width:42ch; color:var(--ink-soft); font-size:1rem; }
  .weather-orb { width:clamp(125px,16vw,190px); aspect-ratio:1; display:grid; place-items:center; border-radius:50%; background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.95),var(--orb-a) 24%,var(--orb-b) 55%,var(--orb-c)); box-shadow:inset -18px -24px 50px rgba(17,75,146,.15),0 25px 70px rgba(28,102,189,.22); }
  .weather-orb svg { width:56%; height:56%; color:#fff; filter:drop-shadow(0 8px 20px rgba(0,59,132,.2)); }
  .weather-card__bottom { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); gap:.65rem; }
  .current-stat { padding:.8rem .85rem; border:1px solid color-mix(in srgb,var(--line) 75%,transparent); border-radius:var(--radius-sm); background:color-mix(in srgb,var(--bg-solid) 66%,transparent); }
  .current-stat__value { display:flex; align-items:baseline; gap:.25rem; font-size:clamp(1.25rem,2.8vw,2rem); font-weight:800; letter-spacing:-.04em; }
  .current-stat__label { margin-top:.15rem; color:var(--ink-soft); font-size:.76rem; }
  .card-status { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-top:.25rem; color:var(--ink-faint); font-size:.78rem; }
  .status-line { display:inline-flex; align-items:center; gap:.42rem; }
  .status-line svg { width:15px; height:15px; }

  .loading-shimmer { position:relative; overflow:hidden; color:transparent!important; border-radius:6px; background:var(--bg-muted)!important; }
  .loading-shimmer::after { content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); animation:shimmer 1.3s infinite; }
  .error-panel { display:grid; gap:.65rem; padding:1rem; border:1px solid color-mix(in srgb,var(--danger) 35%,var(--line)); border-radius:var(--radius-sm); background:var(--danger-soft); color:var(--ink); }

  .quick-answer-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
  .answer-card { display:grid; gap:.75rem; min-height:180px; padding:1.2rem; border:1px solid var(--line); border-radius:var(--radius-md); background:color-mix(in srgb,var(--bg-solid) 78%,transparent); box-shadow:var(--shadow-sm); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
  .answer-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--line-strong); }
  .answer-card__top { display:flex; align-items:center; justify-content:space-between; gap:.7rem; }
  .answer-card__icon { width:44px; height:44px; display:grid; place-items:center; border-radius:15px; background:var(--brand-soft); color:var(--brand-strong); }
  .answer-card__icon svg { width:23px; height:23px; }
  .answer-card__tone { padding:.26rem .5rem; border-radius:var(--radius-pill); background:var(--bg-muted); color:var(--ink-soft); font-size:.7rem; font-weight:780; text-transform:uppercase; letter-spacing:.08em; }
  .answer-card[data-tone="good"] .answer-card__tone { color:var(--success); background:var(--success-soft); }
  .answer-card[data-tone="caution"] .answer-card__tone { color:var(--warning); background:var(--warning-soft); }
  .answer-card[data-tone="bad"] .answer-card__tone { color:var(--danger); background:var(--danger-soft); }
  .answer-card__value { font-size:1.22rem; font-weight:790; letter-spacing:-.025em; }
  .answer-card__detail { color:var(--ink-soft); font-size:.88rem; }

  .metric-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:.85rem; }
  .metric-card { min-width:0; display:grid; gap:.55rem; padding:1rem; border:1px solid var(--line); border-radius:var(--radius-sm); background:color-mix(in srgb,var(--bg-solid) 72%,transparent); }
  .metric-card__top { display:flex; align-items:center; justify-content:space-between; gap:.45rem; color:var(--ink-soft); font-size:.76rem; font-weight:700; }
  .metric-card__top svg { width:18px; height:18px; color:var(--brand-strong); }
  .metric-card__value { overflow:hidden; text-overflow:ellipsis; font-size:clamp(1.15rem,2vw,1.65rem); font-weight:800; letter-spacing:-.035em; white-space:nowrap; }
  .metric-card__sub { color:var(--ink-faint); font-size:.74rem; }

  .panel { border:1px solid var(--line); border-radius:var(--radius-lg); background:color-mix(in srgb,var(--bg-solid) 80%,transparent); box-shadow:var(--shadow-md); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
  .panel__head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:1.35rem 1.35rem 0; }
  .panel__body { padding:1.35rem; }
  .panel__title { display:grid; gap:.25rem; }
  .panel__title p { color:var(--ink-soft); font-size:.88rem; }
  .forecast-layout { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr); gap:1rem; }

  .chart-shell { position:relative; min-height:310px; overflow:hidden; }
  .hourly-chart { width:100%; min-height:300px; color:var(--brand); }
  .chart-grid-line { stroke:var(--line); stroke-width:1; }
  .chart-area { fill:url(#temperatureArea); }
  .chart-line { fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
  .chart-rain-bar { fill:color-mix(in srgb,var(--cyan) 54%,transparent); }
  .chart-dot { fill:var(--bg-solid); stroke:currentColor; stroke-width:2.5; }
  .chart-label { fill:var(--ink-soft); font:600 11px var(--font-sans); }
  .chart-value { fill:var(--ink); font:760 11px var(--font-sans); }
  .chart-legend { display:flex; flex-wrap:wrap; gap:.7rem 1rem; margin-top:.5rem; color:var(--ink-soft); font-size:.78rem; }
  .chart-legend span { display:flex; align-items:center; gap:.35rem; }
  .legend-line { width:20px; height:3px; border-radius:3px; background:var(--brand); }
  .legend-bar { width:12px; height:10px; border-radius:3px; background:color-mix(in srgb,var(--cyan) 54%,transparent); }

  .hourly-list { display:grid; gap:.55rem; max-height:385px; overflow:auto; padding-right:.2rem; scrollbar-width:thin; }
  .hour-row { display:grid; grid-template-columns:58px 34px 1fr auto; align-items:center; gap:.65rem; padding:.72rem .78rem; border:1px solid var(--line); border-radius:14px; background:color-mix(in srgb,var(--bg-solid) 60%,transparent); }
  .hour-row.is-now { border-color:color-mix(in srgb,var(--brand) 45%,var(--line)); background:var(--brand-soft); }
  .hour-row__time { font-weight:760; }
  .hour-row__icon svg { width:28px; height:28px; color:var(--brand-strong); }
  .hour-row__weather { min-width:0; color:var(--ink-soft); font-size:.82rem; }
  .hour-row__values { display:flex; align-items:center; gap:.55rem; text-align:right; }
  .hour-row__temp { font-weight:800; }
  .hour-row__rain { color:var(--cyan); font-size:.76rem; font-weight:750; }

  .daily-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:.8rem; }
  .day-card { display:grid; gap:.75rem; min-height:190px; padding:1rem; border:1px solid var(--line); border-radius:var(--radius-md); background:color-mix(in srgb,var(--bg-solid) 74%,transparent); }
  .day-card:first-child { border-color:color-mix(in srgb,var(--brand) 42%,var(--line)); background:linear-gradient(145deg,var(--brand-soft),color-mix(in srgb,var(--bg-solid) 80%,transparent)); }
  .day-card__date { color:var(--ink-soft); font-size:.78rem; font-weight:760; text-transform:capitalize; }
  .day-card__main { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
  .day-card__main svg { width:44px; height:44px; color:var(--brand-strong); }
  .day-card__temps { text-align:right; font-size:1.3rem; font-weight:820; letter-spacing:-.04em; }
  .day-card__temps small { color:var(--ink-faint); font-size:.76rem; font-weight:700; }
  .day-card__meta { display:grid; gap:.28rem; color:var(--ink-soft); font-size:.76rem; }
  .day-card__meta span { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }

  .air-layout { display:grid; grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr); gap:1rem; }
  .aqi-card { display:grid; align-content:space-between; gap:1.25rem; min-height:370px; padding:1.4rem; overflow:hidden; position:relative; }
  .aqi-score { display:flex; align-items:flex-end; gap:.55rem; }
  .aqi-score strong { font-size:clamp(3.5rem,7vw,6rem); line-height:.8; letter-spacing:-.075em; }
  .aqi-score span { color:var(--ink-soft); font-weight:700; }
  .aqi-gauge { position:relative; height:14px; border-radius:var(--radius-pill); background:linear-gradient(90deg,#43c693,#b3d656,#ffd34d,#ef9235,#dd4a54,#8b477a); }
  .aqi-gauge__marker { position:absolute; top:50%; width:22px; height:22px; border:4px solid var(--bg-solid); border-radius:50%; background:var(--ink); box-shadow:var(--shadow-sm); transform:translate(-50%,-50%); transition:left .5s ease; }
  .air-pollutants { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; }
  .pollutant { display:grid; gap:.4rem; padding:1rem; border:1px solid var(--line); border-radius:var(--radius-sm); background:color-mix(in srgb,var(--bg-solid) 67%,transparent); }
  .pollutant__name { color:var(--ink-soft); font-size:.74rem; font-weight:740; }
  .pollutant__value { font-size:1.3rem; font-weight:810; letter-spacing:-.035em; }
  .pollutant__unit { color:var(--ink-faint); font-size:.68rem; }
  .pollen-panel { grid-column:1/-1; display:grid; gap:.8rem; padding:1rem; border:1px solid var(--line); border-radius:var(--radius-sm); }
  .pollen-row { display:grid; grid-template-columns:130px 1fr auto; align-items:center; gap:.7rem; font-size:.82rem; }
  .pollen-bar { height:8px; overflow:hidden; border-radius:var(--radius-pill); background:var(--bg-muted); }
  .pollen-bar > span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--mint),var(--sun),var(--danger)); }

  .map-panel { overflow:hidden; }
  .map-toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--bg-solid) 82%,transparent); }
  .segmented-control { display:inline-flex; padding:.28rem; border:1px solid var(--line); border-radius:var(--radius-pill); background:var(--bg-muted); }
  .segment-button { display:inline-flex; align-items:center; gap:.4rem; min-height:38px; padding:.45rem .72rem; border:0; border-radius:var(--radius-pill); background:transparent; color:var(--ink-soft); font-size:.84rem; font-weight:740; }
  .segment-button svg { width:17px; height:17px; }
  .segment-button[aria-selected="true"] { background:var(--bg-solid); color:var(--brand-strong); box-shadow:var(--shadow-sm); }
  .map-status { display:flex; align-items:center; gap:.45rem; color:var(--ink-soft); font-size:.78rem; }
  .weather-map { position:relative; isolation:isolate; height:clamp(420px,58vw,650px); overflow:hidden; background:#cbd8e4; cursor:grab; touch-action:none; user-select:none; }
  .weather-map.is-dragging { cursor:grabbing; }
  .wa-map-layer { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
  .wa-map-tile { position:absolute; width:256px; height:256px; max-width:none; user-select:none; }
  .wa-map-radar { z-index:2; opacity:.72; mix-blend-mode:multiply; transition:opacity .2s ease; }
  :root[data-theme="dark"] .wa-map-base { filter:brightness(.74) saturate(.72) contrast(1.08); }
  :root[data-theme="dark"] .wa-map-radar { mix-blend-mode:screen; opacity:.76; }
  .wa-map-markers { position:absolute; inset:0; z-index:4; pointer-events:none; }
  .wa-map-marker { position:absolute; transform:translate(-50%,-100%); pointer-events:auto; }
  .wa-map-marker button { display:grid; place-items:center; padding:0; border:0; background:transparent; color:var(--brand-strong); filter:drop-shadow(0 7px 12px rgba(15,38,65,.28)); }
  .wa-map-pin { width:34px; height:42px; display:grid; place-items:center; color:var(--brand); }
  .wa-map-pin svg { width:34px; height:42px; fill:var(--bg-solid); }
  .wa-map-dot { display:block; width:var(--size,22px); height:var(--size,22px); border:3px solid var(--bg-solid); border-radius:50%; background:var(--marker-color,var(--danger)); box-shadow:0 4px 12px rgba(0,0,0,.28); }
  .wa-map-controls { position:absolute; top:1rem; right:1rem; z-index:6; display:grid; gap:.4rem; }
  .wa-map-control { width:42px; height:42px; display:grid; place-items:center; padding:0; border:1px solid rgba(14,40,70,.16); border-radius:12px; background:rgba(255,255,255,.9); color:#10243a; box-shadow:0 8px 22px rgba(0,0,0,.18); }
  .wa-map-control svg { width:18px; height:18px; }
  .wa-map-attribution { position:absolute; right:.45rem; bottom:.4rem; z-index:7; padding:.2rem .36rem; border-radius:6px; background:rgba(255,255,255,.82); color:#24364a; font-size:.62rem; }
  .wa-map-popup { position:absolute; z-index:8; width:min(300px,calc(100% - 2rem)); transform:translate(-50%,calc(-100% - 16px)); padding:1rem; border:1px solid var(--line); border-radius:16px; background:var(--bg-solid); color:var(--ink); box-shadow:var(--shadow-lg); pointer-events:auto; }
  .wa-map-popup::after { content:""; position:absolute; left:50%; bottom:-7px; width:14px; height:14px; transform:translateX(-50%) rotate(45deg); background:var(--bg-solid); border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
  .wa-map-popup__head { display:flex; justify-content:space-between; align-items:flex-start; gap:.75rem; }
  .wa-map-popup__title { font-size:1rem; }
  .wa-map-popup__body { margin-top:.4rem; color:var(--ink-soft); font-size:.78rem; }
  .wa-map-popup__link { display:inline-flex; align-items:center; gap:.3rem; margin-top:.6rem; color:var(--brand-strong); font-size:.78rem; font-weight:740; }
  .wa-map-popup__close { width:28px; height:28px; display:grid; place-items:center; flex:0 0 auto; padding:0; border:1px solid var(--line); border-radius:50%; background:var(--bg-muted); color:var(--ink); }
  .map-dock { display:grid; gap:.85rem; padding:1rem; border-top:1px solid var(--line); background:color-mix(in srgb,var(--bg-solid) 86%,transparent); }
  .radar-controls { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.75rem; }
  .range { width:100%; accent-color:var(--brand); }
  .radar-time { min-width:88px; color:var(--ink-soft); font-size:.78rem; text-align:right; }
  .map-legend { display:flex; align-items:center; flex-wrap:wrap; gap:.45rem .8rem; color:var(--ink-soft); font-size:.72rem; }
  .legend-rain { width:100px; height:8px; border-radius:var(--radius-pill); background:linear-gradient(90deg,#d6efff,#3da2ff,#2451d4,#933fba,#ed3c69); }
  .world-list { display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; max-height:220px; overflow:auto; }
  .world-event { display:grid; gap:.25rem; padding:.72rem; border:1px solid var(--line); border-radius:12px; background:var(--bg-muted); text-decoration:none; }
  .world-event:hover { border-color:var(--line-strong); background:var(--brand-soft); }
  .world-event__type { color:var(--brand-strong); font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
  .world-event__title { font-size:.82rem; font-weight:750; }
  .world-event__meta { color:var(--ink-faint); font-size:.68rem; }

  .safety-banner { display:grid; grid-template-columns:auto 1fr auto; gap:1rem; align-items:center; padding:1.1rem 1.2rem; border:1px solid color-mix(in srgb,var(--amber) 35%,var(--line)); border-radius:var(--radius-md); background:linear-gradient(120deg,var(--warning-soft),color-mix(in srgb,var(--bg-solid) 75%,transparent)); }
  .safety-banner__icon { width:48px; height:48px; display:grid; place-items:center; border-radius:16px; background:color-mix(in srgb,var(--amber) 17%,transparent); color:var(--warning); }
  .safety-banner__icon svg { width:26px; height:26px; }
  .safety-banner h3 { font-size:1.12rem; }
  .safety-banner p { margin-top:.25rem; color:var(--ink-soft); font-size:.86rem; }

  .content-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr); gap:clamp(1.2rem,4vw,4rem); align-items:start; }
  .prose { max-width:76ch; }
  .prose > * + * { margin-top:1.15em; }
  .prose h2 { margin-top:1.7em; font-size:clamp(1.7rem,3vw,2.6rem); }
  .prose h3 { margin-top:1.5em; }
  .prose p, .prose li { color:var(--ink-soft); }
  .prose ul, .prose ol { padding-left:1.25rem; }
  .prose li + li { margin-top:.45rem; }
  .prose a { color:var(--brand-strong); font-weight:650; }
  .prose-card { padding:clamp(1.2rem,3vw,2rem); border:1px solid var(--line); border-radius:var(--radius-lg); background:color-mix(in srgb,var(--bg-solid) 78%,transparent); box-shadow:var(--shadow-sm); }
  .aside-stack { display:grid; gap:1rem; position:sticky; top:calc(var(--header-height) + 1rem); }
  .info-card { display:grid; gap:.75rem; padding:1.1rem; border:1px solid var(--line); border-radius:var(--radius-md); background:color-mix(in srgb,var(--bg-solid) 74%,transparent); }
  .info-card__icon { width:40px; height:40px; display:grid; place-items:center; border-radius:13px; background:var(--brand-soft); color:var(--brand-strong); }
  .info-card__icon svg { width:21px; height:21px; }
  .info-card p { color:var(--ink-soft); font-size:.86rem; }
  .source-list { display:grid; gap:.55rem; list-style:none; }
  .source-link { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.72rem; border:1px solid var(--line); border-radius:12px; color:var(--ink-soft); text-decoration:none; }
  .source-link:hover { border-color:var(--line-strong); background:var(--brand-soft); color:var(--brand-strong); }
  .source-link svg { width:16px; height:16px; }

  .page-hero { padding-block:clamp(3rem,8vw,7rem) clamp(2.5rem,6vw,5rem); }
  .page-hero__grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr); gap:clamp(2rem,5vw,5rem); align-items:end; }
  .page-hero__copy { display:grid; gap:1rem; }
  .page-hero h1 { max-width:13ch; }
  .page-hero__summary { max-width:62ch; color:var(--ink-soft); font-size:clamp(1.05rem,1.8vw,1.28rem); }
  .page-hero__card { padding:1.25rem; border:1px solid var(--line); border-radius:var(--radius-lg); background:linear-gradient(150deg,color-mix(in srgb,var(--bg-solid) 82%,transparent),color-mix(in srgb,var(--brand-soft) 42%,transparent)); box-shadow:var(--shadow-md); }
  .page-hero__facts { display:grid; gap:.7rem; }
  .page-hero__fact { display:flex; align-items:flex-start; gap:.7rem; }
  .page-hero__fact svg { width:20px; height:20px; flex:0 0 auto; margin-top:.15rem; color:var(--brand-strong); }
  .page-hero__fact strong { display:block; }
  .page-hero__fact span { display:block; color:var(--ink-soft); font-size:.8rem; }

  .faq-list { display:grid; gap:.7rem; }
  .faq-item { overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-sm); background:color-mix(in srgb,var(--bg-solid) 72%,transparent); }
  .faq-item summary { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem; list-style:none; font-weight:760; cursor:pointer; }
  .faq-item summary::-webkit-details-marker { display:none; }
  .faq-item summary::after { content:"+"; width:28px; height:28px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; background:var(--bg-muted); color:var(--brand-strong); font-size:1.2rem; }
  .faq-item[open] summary::after { content:"−"; }
  .faq-item__body { padding:0 1rem 1rem; color:var(--ink-soft); }

  .place-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; }
  .place-card { display:flex; align-items:center; justify-content:space-between; gap:.8rem; min-height:78px; padding:.9rem 1rem; border:1px solid var(--line); border-radius:var(--radius-sm); background:color-mix(in srgb,var(--bg-solid) 72%,transparent); text-decoration:none; transition:transform .16s ease,border-color .16s ease,background .16s ease; }
  .place-card:hover { transform:translateY(-3px); border-color:var(--line-strong); background:var(--brand-soft); }
  .place-card strong { display:block; }
  .place-card span { color:var(--ink-soft); font-size:.75rem; }
  .place-card svg { width:18px; height:18px; color:var(--brand-strong); }

  .trust-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
  .trust-card { display:grid; gap:.8rem; padding:1.25rem; border:1px solid var(--line); border-radius:var(--radius-md); background:color-mix(in srgb,var(--bg-solid) 72%,transparent); }
  .trust-card svg { width:28px; height:28px; color:var(--brand-strong); }
  .trust-card p { color:var(--ink-soft); font-size:.88rem; }

  .site-footer { padding-block:clamp(3rem,7vw,5.5rem) 7rem; border-top:1px solid var(--line); background:color-mix(in srgb,var(--bg-solid) 48%,transparent); }
  .footer-grid { display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:clamp(1.5rem,4vw,4rem); }
  .footer-brand { display:grid; gap:.9rem; max-width:360px; }
  .footer-brand p { color:var(--ink-soft); font-size:.88rem; }
  .footer-heading { margin-bottom:.7rem; color:var(--ink); font-size:.78rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
  .footer-links { display:grid; gap:.55rem; list-style:none; }
  .footer-links a { color:var(--ink-soft); font-size:.88rem; text-decoration:none; }
  .footer-links a:hover { color:var(--brand-strong); text-decoration:underline; }
  .footer-bottom { display:flex; justify-content:space-between; gap:1rem; margin-top:2.5rem; padding-top:1.2rem; border-top:1px solid var(--line); color:var(--ink-faint); font-size:.76rem; }

  .mobile-bottom-nav { position:fixed; left:50%; bottom:max(.6rem,env(safe-area-inset-bottom)); z-index:90; display:none; width:min(calc(100% - 1rem),520px); transform:translateX(-50%); padding:.42rem; border:1px solid var(--line); border-radius:22px; background:color-mix(in srgb,var(--bg-solid) 86%,transparent); box-shadow:var(--shadow-lg); -webkit-backdrop-filter:blur(20px) saturate(150%); backdrop-filter:blur(20px) saturate(150%); }
  .mobile-bottom-nav a { display:grid; place-items:center; gap:.15rem; min-height:52px; border-radius:17px; color:var(--ink-soft); font-size:.64rem; font-weight:720; text-decoration:none; }
  .mobile-bottom-nav svg { width:20px; height:20px; }
  .mobile-bottom-nav a[aria-current="page"] { background:var(--brand-soft); color:var(--brand-strong); }

  .toast-stack { position:fixed; right:1rem; bottom:1rem; z-index:200; display:grid; gap:.65rem; width:min(360px,calc(100% - 2rem)); pointer-events:none; }
  .toast { display:grid; grid-template-columns:auto 1fr auto; align-items:start; gap:.7rem; padding:.9rem; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg-solid); box-shadow:var(--shadow-lg); pointer-events:auto; animation:toast-in .22s ease both; }
  .toast svg { width:20px; height:20px; color:var(--brand-strong); }
  .toast p { color:var(--ink-soft); font-size:.82rem; }
  .toast button { padding:0; border:0; background:transparent; color:var(--ink-faint); }

  .ambient-weather { position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none; }
  .particle { position:absolute; top:-10%; opacity:.55; animation-name:fall; animation-timing-function:linear; animation-iteration-count:infinite; }
  .particle--rain { width:1px; height:58px; border-radius:2px; background:linear-gradient(transparent,rgba(76,160,230,.7)); transform:rotate(10deg); }
  .particle--snow { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.85); box-shadow:0 0 8px rgba(255,255,255,.5); }
  .offline-banner { display:none; position:sticky; top:var(--header-height); z-index:80; padding:.55rem 1rem; background:var(--warning-soft); color:var(--warning); font-size:.82rem; font-weight:720; text-align:center; }
  body.is-offline .offline-banner { display:block; }

  .empty-state { display:grid; place-items:center; gap:.75rem; min-height:220px; padding:2rem; color:var(--ink-soft); text-align:center; }
  .empty-state svg { width:44px; height:44px; color:var(--brand-strong); }
  .skeleton { border-radius:8px; background:linear-gradient(90deg,var(--bg-muted),color-mix(in srgb,var(--bg-solid) 72%,var(--bg-muted)),var(--bg-muted)); background-size:200% 100%; animation:skeleton 1.35s linear infinite; }
}

@layer utilities {
  .grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
  .grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
  .stack { display:grid; gap:1rem; }
  .cluster { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; }
  .text-link { display:inline-flex; align-items:center; gap:.35rem; color:var(--brand-strong); font-weight:750; text-decoration:none; }
  .text-link:hover { text-decoration:underline; }
  .text-link svg { width:17px; height:17px; }
  .nowrap { white-space:nowrap; }
  .hidden { display:none!important; }
  .status-good { color:var(--success); }
  .status-caution { color:var(--warning); }
  .status-bad { color:var(--danger); }
  .no-scroll { overflow:hidden; }
}

@layer motion {
  @keyframes shimmer { to { transform:translateX(100%); } }
  @keyframes skeleton { to { background-position:-200% 0; } }
  @keyframes fall { from { transform:translate3d(0,-15vh,0) rotate(10deg); } to { transform:translate3d(var(--drift,30px),115vh,0) rotate(10deg); } }
  @keyframes toast-in { from { opacity:0; transform:translateY(10px) scale(.98); } }
  @keyframes float { 50% { transform:translateY(-8px); } }
  .weather-orb { animation:float 6s ease-in-out infinite; }
  [data-reveal] { opacity:1; transform:translateY(18px); transition:transform .6s ease; }
  [data-reveal].is-visible { transform:none; }
}

@media (max-width:1080px) {
  .primary-nav { gap:0; }
  .nav-link { padding:.62rem .65rem; font-size:.86rem; }
  .hero-grid { grid-template-columns:1fr .86fr; gap:2rem; }
  .metric-grid { grid-template-columns:repeat(3,1fr); }
  .daily-grid { grid-template-columns:repeat(3,1fr); }
  .quick-answer-strip { grid-template-columns:repeat(2,1fr); }
  .place-grid { grid-template-columns:repeat(3,1fr); }
  .footer-grid { grid-template-columns:1.2fr repeat(3,1fr); gap:1.5rem; }
}

@media (max-width:860px) {
  :root { --header-height:68px; }
  .primary-nav { position:fixed; inset:calc(var(--header-height) + .5rem) 1rem auto; z-index:130; display:none; padding:.7rem; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--bg-solid); box-shadow:var(--shadow-lg); }
  .primary-nav.is-open { display:grid; }
  .nav-link { padding:.85rem 1rem; }
  .mobile-menu-button { display:inline-grid; }
  .hero { min-height:auto; padding-block:2rem 4rem; }
  .hero-grid, .page-hero__grid, .forecast-layout, .air-layout, .content-grid { grid-template-columns:1fr; }
  .hero-title { max-width:14ch; }
  .weather-card { min-height:500px; }
  .page-hero__card { max-width:640px; }
  .aside-stack { position:static; grid-template-columns:repeat(2,1fr); }
  .daily-grid { grid-template-columns:repeat(2,1fr); }
  .place-grid { grid-template-columns:repeat(2,1fr); }
  .trust-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:repeat(2,1fr); }
  .footer-brand { grid-column:1/-1; }
  .mobile-bottom-nav { display:grid; grid-template-columns:repeat(5,1fr); }
  .toast-stack { bottom:5.4rem; }
  .world-list { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:620px) {
  .container { width:min(calc(100% - 1.1rem),var(--container)); }
  .site-header .brand span { display:none; }
  .header-inner { grid-template-columns:auto 1fr auto; gap:.5rem; }
  .header-actions { justify-self:end; }
  .hero-copy { gap:1.15rem; }
  .hero-title { font-size:clamp(2.6rem,14vw,4rem); }
  .search-shell { grid-template-columns:1fr auto; }
  .search-shell .button span { display:none; }
  .search-shell .button { width:58px; padding:0; }
  .weather-card { min-height:520px; border-radius:30px; padding:1.1rem; }
  .weather-card__main { grid-template-columns:1fr; }
  .weather-orb { position:absolute; top:-40px; right:-25px; width:125px; opacity:.68; }
  .weather-answer { padding-top:3rem; }
  .weather-card__bottom { grid-template-columns:repeat(3,1fr); }
  .current-stat { padding:.7rem .55rem; }
  .current-stat__value { font-size:1.25rem; }
  .current-stat__label { font-size:.68rem; }
  .quick-answer-strip, .grid-2, .grid-3 { grid-template-columns:1fr; }
  .answer-card { min-height:0; }
  .metric-grid { grid-template-columns:repeat(2,1fr); }
  .metric-card:last-child:nth-child(odd) { grid-column:1/-1; }
  .panel { border-radius:24px; }
  .panel__head { flex-direction:column; }
  .daily-grid { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.4rem; }
  .day-card { min-width:210px; scroll-snap-align:start; }
  .air-pollutants { grid-template-columns:repeat(2,1fr); }
  .pollen-row { grid-template-columns:90px 1fr auto; }
  .map-toolbar { align-items:flex-start; flex-direction:column; }
  .weather-map { height:480px; }
  .world-list { grid-template-columns:1fr; }
  .radar-controls { grid-template-columns:auto 1fr; }
  .radar-time { grid-column:1/-1; text-align:left; }
  .safety-banner { grid-template-columns:auto 1fr; }
  .safety-banner .button { grid-column:1/-1; }
  .aside-stack { grid-template-columns:1fr; }
  .place-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-brand { grid-column:auto; }
  .footer-bottom { flex-direction:column; }
  .section-heading--split { grid-template-columns:1fr; }
  .page-hero h1 { font-size:clamp(2.5rem,13vw,4.2rem); }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; }
  .ambient-weather { display:none; }
}

@media (prefers-contrast:more) {
  :root { --line:rgba(10,35,63,.38); --line-strong:rgba(10,35,63,.6); }
  :root[data-theme="dark"] { --line:rgba(220,239,255,.42); --line-strong:rgba(220,239,255,.72); }
}

@media print {
  .site-header,.mobile-bottom-nav,.search-shell,.map-toolbar,.map-dock,.site-footer,.header-actions,.button,.ambient-weather,.offline-banner { display:none!important; }
  body,body::before { background:#fff!important; color:#000!important; }
  .panel,.weather-card,.answer-card,.metric-card,.day-card,.prose-card { box-shadow:none!important; background:#fff!important; break-inside:avoid; }
  .section { padding-block:1.4rem; }
}

@keyframes spin { to { transform: rotate(360deg); } }
.is-spinning { animation: spin .9s linear infinite; }