:root{
    --paper:#e8ebef; --card:#ffffff; --ink:#191c22; --ink2:#4a525d;
    --sign:#04663d; --sign-dk:#013d26; --sign-tx:#ffffff; --sign-sub:#bdebcf;
    --blue:#0e4c8f; --navy:#0a3768; --blue-sub:#cfe2f6;
    --warn:#8a1f2c; --watch:#b5581d;
    --line:#c6ccd3; --line2:#dde2e8; --mut:#77818d;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{background:
      radial-gradient(110% 45% at 82% -8%, rgba(14,76,143,.10), transparent 55%),
      linear-gradient(180deg,#eef1f5 0%,#e6eaf0 55%,#e1e6ec 100%);
    background-attachment:fixed;background-color:#e6eaf0;min-height:100vh;
    color:var(--ink);font-family:'Overpass',Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  .mono{font-family:'Overpass Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
  .wrap{max-width:1080px;margin:0 auto;padding:0 18px}

  .util{background:#0a2f5c;color:#cfe0f4;border-bottom:3px solid var(--sign);position:sticky;top:0;z-index:100;box-shadow:0 1px 8px rgba(0,0,0,.22)}
  .util .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;height:34px}
  .util .mono{font-size:11px;letter-spacing:.05em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .util .mono b{color:#fff}
  .util .mono a{color:#cfe0f4;font-weight:700}
  .util .mono a:hover{color:#fff;text-decoration:underline}
  .util .mono .cx{opacity:.45;margin:0 2px;font-weight:400}
  .util .lnks{display:flex;gap:16px;flex:none}
  .util a{color:#e9e7e0;font-weight:700;font-size:11px;letter-spacing:.06em}
  .util a:hover{color:var(--sign-sub)}

  /* compact masthead + search */
  .top{padding:16px 0 6px}
  .mast{background:var(--sign);border-radius:9px;color:#fff;padding:14px 18px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
    box-shadow:inset 0 0 0 3px var(--sign),inset 0 0 0 5px rgba(255,255,255,.9),0 8px 22px rgba(0,0,0,.14)}
  .mast a.word{font-weight:900;font-size:26px;line-height:.9;letter-spacing:-.02em;flex:none}
  .mast a.word .yl{color:var(--sign-sub)}
  form.ramp{display:flex;flex:1;min-width:220px;background:#fff;border:3px solid #fff;border-radius:5px;overflow:hidden}
  form.ramp input{flex:1;min-width:0;border:0;outline:0;padding:10px 13px;font-family:'Overpass',sans-serif;font-weight:700;font-size:14px;color:var(--ink)}
  form.ramp input::placeholder{color:#9b978e}
  form.ramp button{border:0;cursor:pointer;background:var(--blue);color:#fff;font-family:'Overpass',sans-serif;font-weight:900;font-size:13px;letter-spacing:.05em;padding:0 16px}
  form.ramp button:hover{background:#0b6bc4}
  .geobtn{display:inline-flex;align-items:center;gap:6px;flex:none;background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.6);
    border-radius:6px;padding:9px 13px;font-family:'Overpass',sans-serif;font-weight:800;font-size:12px;letter-spacing:.03em;cursor:pointer;color:#fff}
  .geobtn:hover{background:#fff;color:var(--sign)}.geobtn:disabled{opacity:.55;cursor:default}
  @media(max-width:560px){ .geobtn .gl{display:none} }
  /* location autocomplete */
  .acwrap{position:relative;flex:1;min-width:220px;display:flex}
  .acwrap form.ramp{flex:1;min-width:0}
  .ac{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:2px solid var(--blue);
    border-radius:9px;box-shadow:0 14px 36px rgba(0,0,0,.26);z-index:1200;max-height:min(58vh,430px);
    overflow-y:auto;display:none}
  .ac.on{display:block}
  .aci{display:flex;align-items:baseline;gap:9px;padding:10px 14px;cursor:pointer;border-top:1px solid #eef1f4}
  .aci:first-child{border-top:0}
  .aci.sel,.aci:hover{background:#eaf1fb}
  .aci .nm{font-weight:800;font-size:15px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .aci .st{font-family:'Overpass Mono',monospace;font-weight:700;font-size:12px;color:var(--blue);letter-spacing:.04em;flex:none}
  .aci .hint{margin-left:auto;font-family:'Overpass Mono',monospace;font-size:10.5px;font-weight:700;color:var(--mut);flex:none}

  /* 6-hourly precipitation distribution (NBM QMD) — amount bars over a chance heat-map */
  .pxwrap{padding:14px 16px 12px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .pxrow{display:flex;gap:4px;align-items:flex-end;min-width:min-content}
  .pxcol{flex:0 0 auto;width:46px;display:flex;flex-direction:column;align-items:center}
  .pxcol.pxnew{margin-left:12px;position:relative}
  .pxcol.pxnew::before{content:"";position:absolute;left:-7px;top:0;bottom:0;border-left:1px dashed var(--line)}
  .pxrow .pxv{font-family:'Overpass Mono',monospace;font-size:13px;font-weight:800;color:var(--blue);
    height:16px;line-height:16px;white-space:nowrap}
  .pxrow .pxv.pxup{color:#8aa0b5;font-size:11.5px}
  .pxbars{position:relative;width:34px;height:104px;display:flex;align-items:flex-end;justify-content:center}
  .pxceil{position:absolute;bottom:0;width:34px;border-radius:5px 5px 2px 2px;
    background:repeating-linear-gradient(135deg,#cfe0f2 0 4px,#e4eef8 4px 8px);
    box-shadow:inset 0 0 0 1px #a9c6e2}
  .pxfill{position:relative;width:34px;border-radius:5px 5px 2px 2px;background:#1470b8;
    box-shadow:inset 0 2px 0 rgba(255,255,255,.32)}
  .pxrow .pxt{font-family:'Overpass Mono',monospace;font-size:11.5px;font-weight:800;color:var(--ink2);margin-top:7px;white-space:nowrap}
  .pxrow .pxd{font-family:'Overpass Mono',monospace;font-size:10.5px;font-weight:800;color:var(--sign);letter-spacing:.05em;height:13px}
  .pxlbl{font-family:'Overpass Mono',monospace;font-size:10.5px;font-weight:800;letter-spacing:.1em;
    color:var(--mut);margin:12px 0 6px}
  .pxboxes .pxcol{width:46px}
  .pxboxes .popc{width:46px;height:38px;display:flex;align-items:center;justify-content:center;
    font-family:'Overpass Mono',monospace;font-weight:800;font-size:14px;border-radius:6px;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
  .pxboxes .popc.zero{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.5)}
  /* threshold-odds strip under the 7-day chart (NBM QMD) — a highlight, not a table */
  .oddsrow{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:11px 16px;
    border-top:1px solid var(--line2);background:#f5f8fb}
  .oddsrow .olbl{font-family:'Overpass Mono',monospace;font-size:10.5px;font-weight:800;
    letter-spacing:.12em;color:var(--mut);flex:none;cursor:help}
  .oddsrow .oc{display:inline-flex;align-items:baseline;gap:6px;background:#fff;border:1px solid var(--line);
    border-radius:6px;padding:5px 10px;font-size:12.5px;font-weight:700;color:var(--ink2);white-space:nowrap}
  .oddsrow .oc b{font-family:'Overpass Mono',monospace;font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--sign)}
  .oddsrow .oc i{font-style:normal;font-weight:900;font-size:15px;color:var(--ink)}
  .oddsrow.rev{background:#f7f6f2}
  .oddsrow .oc.rv i{font-family:'Overpass Mono',monospace;font-size:14px}
  .oddsrow .oc.rv.up i{color:#a8321f} .oddsrow .oc.rv.down i{color:#0e5ba8}
  .oddsrow .oc.steady{color:var(--mut);font-weight:700;background:transparent;border-style:dashed}
  @media(max-width:560px){ .oddsrow{gap:6px;padding:9px 12px} .oddsrow .oc{font-size:11.5px;padding:4px 8px} }
  section{padding:22px 0 2px}
  .rule{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}
  .rule .ln{height:3px;flex:1;background:repeating-linear-gradient(90deg,var(--sign) 0 18px,transparent 18px 34px)}
  .rule h2{margin:0;color:var(--sign);font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.12em;white-space:nowrap}
  .rule .sub{color:var(--mut);font-size:11px;font-weight:700;letter-spacing:.06em}

  .card{background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden;box-shadow:0 6px 22px rgba(0,0,0,.08)}
  .chead{background:var(--sign);color:#fff;padding:11px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
  .chead .loc{font-weight:800;font-size:22px;text-shadow:0 1px 3px rgba(0,0,0,.3)}
  .chead .loc small{display:block;font-weight:700;font-size:12px;letter-spacing:.08em;color:#d8f2e3;margin-top:3px}
  .chead .src{font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--sign-sub);text-align:right}

  /* current conditions */
  .cc{display:grid;grid-template-columns:auto 1fr;gap:20px 26px;align-items:center;padding:20px 18px}
  .cc .now{display:flex;align-items:center;gap:16px}
  .cc .now img{width:66px;height:66px;border-radius:7px;flex:none;background:#e8edf2}
  .cc .temp{font-weight:900;font-size:64px;line-height:.82}
  .cc .temp .u{font-size:24px;color:var(--mut);font-weight:800;vertical-align:top}
  .cc .desc{font-weight:800;font-size:20px}
  .cc .desc .est{font-family:'Overpass Mono',ui-monospace,monospace;font-size:11.5px;font-weight:700;color:var(--mut);vertical-align:1px}
  .cc .feels{color:var(--ink2);font-weight:700;font-size:14.5px;margin-top:3px}
  .ccgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:1px;background:var(--line2);border:1px solid var(--line2);border-radius:8px;overflow:hidden}
  .ccg{background:#f3f6f9;padding:9px 12px}
  .ccg .k{font-size:11px;font-weight:700;letter-spacing:.09em;color:var(--mut)}
  .ccg .v{font-size:18.5px;font-weight:800;margin-top:4px}
  .cc .feels .at{color:var(--mut);font-weight:600}
  .wv{display:inline-flex;align-items:center;gap:5px}
  .wv .barb{flex:none;margin:-7px -3px -7px -5px}
  .tend{font-size:13px;font-weight:800;letter-spacing:.01em;white-space:nowrap}
  .tend.up{color:#2f8f4e} .tend.down{color:#0a5ca8} .tend.steady{color:var(--mut)}
  /* 24-h bar chart (matches the share card) */
  .barrow{padding:12px 16px 14px;border-top:1px solid var(--line2);background:#f3f6f9}
  .brhd{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-family:'Overpass Mono',monospace;font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--mut)}
  .brhd b{color:var(--ink)}
  .brhd .fchilo{font-size:15.5px;letter-spacing:.02em;white-space:nowrap}
  .obars{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;height:152px;padding-top:8px}
  .obar{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
  .obar .obv{font-family:'Overpass Mono',monospace;font-size:20px;font-weight:800;line-height:1;margin-bottom:7px}
  .obar .ocol{width:100%;max-width:36px;border-radius:6px 6px 3px 3px;min-height:5px;box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 2px 5px rgba(0,0,0,.12)}
  .obar .obt{font-family:'Overpass Mono',monospace;font-size:15px;font-weight:800;color:var(--ink);margin-top:8px;white-space:nowrap}
  /* next-24-hour forecast bars (hourly, then 3-hourly tail) — scrolls horizontally when narrow */
  .hbwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .obars.h12{gap:3px;height:196px;justify-content:flex-start}
  /* fixed column width shared by the bars and the square precip boxes so they line up exactly */
  .obars.h12 .obar{flex:0 0 auto;width:42px}
  .obars.h12 .obar.tstart,.poprow .popcol.tstart{margin-left:13px}
  .obars.h12 .obar.tstart{position:relative}
  .obars.h12 .obar.tstart::before{content:"";position:absolute;left:-7px;top:22px;bottom:26px;border-left:1px dashed var(--line)}
  .obars.h12 .obar.tail .obt{color:var(--mut)}
  .obars.h12 .obv{font-size:21px;font-weight:800}
  .obars.h12 .obv.obv3{font-size:16px;letter-spacing:-.02em}   /* triple digits (100°+) — shrink to avoid collision */
  .obars.h12 .obt{font-size:16px;font-weight:800;color:var(--ink)}
  /* precipitation-chance heat-map row (light→dark green = higher chance) — square boxes + time labels */
  .poplbl{font-family:'Overpass Mono',monospace;font-size:11px;font-weight:800;letter-spacing:.09em;color:var(--mut);margin:12px 0 6px}
  .poprow{display:flex;gap:3px}
  .poprow .popcol{flex:0 0 auto;width:42px;display:flex;flex-direction:column;align-items:center}
  .poprow .popc{width:42px;height:42px;display:flex;align-items:center;justify-content:center;font-family:'Overpass Mono',monospace;font-weight:800;font-size:16px;line-height:1;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
  .poprow .popc.zero{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.72)}
  .poprow .popt{font-family:'Overpass Mono',monospace;font-size:13px;font-weight:800;color:var(--ink2);margin-top:6px;white-space:nowrap}
  .poprow .popcol.tail .popt{color:var(--mut)}
  /* share-card download chips */
  .sharerow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--line2)}
  .sharerow .shlbl{font-size:11px;font-weight:800;letter-spacing:.09em;color:var(--mut);margin-right:2px}
  .sharerow .chip{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:13.5px;letter-spacing:.02em;color:#fff;padding:8px 14px;border-radius:999px;text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,.14)}
  .sharerow .chip:hover{filter:brightness(1.08)}
  .sharerow .chip::before{content:'⤓';font-weight:900;font-size:14px}
  .sharerow .chip.g{background:#04663d}.sharerow .chip.b{background:#0e3f7e}.sharerow .chip.r{background:#4e3629}
  .ccg .rainv{color:#0a5ca8}
  .sparkrow{display:flex;align-items:center;gap:14px;padding:11px 18px;border-top:1px solid var(--line2);background:#f3f6f9}
  .sparkrow .sparkbox{flex:1;min-width:0}
  .sparkrow .spark{display:block;width:100%;height:36px}
  .sparkrow .skl{font-size:9.5px;font-weight:800;letter-spacing:.09em;color:var(--mut);white-space:nowrap}
  .sparkrow .sl{color:var(--line);font-weight:800}
  .ccfoot{padding:9px 16px;background:#eaeef2;border-top:1px solid var(--line2)}
  .ccfoot .mono{font-size:11.5px;color:var(--mut)}
  .lclim{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line2)}
  .ltile{background:#fff;padding:14px 16px;text-align:center}
  .ltile .ltl{font-family:'Overpass Mono',monospace;font-size:10.5px;font-weight:800;letter-spacing:.06em;color:var(--mut)}
  .ltile .ltv{font-weight:900;font-size:30px;line-height:1.05;letter-spacing:-.02em;margin-top:3px}
  .ltile .lts{font-family:'Overpass Mono',monospace;font-size:11px;color:var(--ink2);margin-top:3px}
  .ddline{padding:11px 16px;border-top:1px solid var(--line2);font-size:12.5px;color:var(--ink2);text-align:center}.ddline b{color:var(--ink)}
  .climlinks{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px;border-top:1px solid var(--line2)}
  .climlinks a{flex:1;min-width:150px;text-align:center;background:#eef2f6;border:1px solid var(--line);border-radius:9px;padding:9px 10px;font-weight:800;font-size:13px;color:var(--sign);text-decoration:none}
  .climlinks a:hover{background:var(--sign);color:#fff;border-color:var(--sign)}
  /* ── Exits — the interchange from this city into the rest of the atlas ── */
  .xgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:12px}
  a.xcard{display:block;background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden;
    box-shadow:0 4px 14px rgba(0,0,0,.06);text-decoration:none;color:inherit;transition:transform .12s,box-shadow .12s}
  a.xcard:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.12)}
  .xcard .xtab{background:var(--sign);color:#fff;padding:6px 11px;display:flex;align-items:center;justify-content:space-between;
    gap:9px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35);font-family:'Overpass Mono',monospace}
  .xcard .xtab .xe{font-weight:900;font-size:10.5px;letter-spacing:.08em;color:var(--sign-sub);white-space:nowrap}
  .xcard .xtab .xn{font-weight:900;font-size:10.5px;letter-spacing:.03em;text-align:right;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .xcard .xbody{padding:12px 13px 13px}
  .xcard .xv{font-weight:900;font-size:28px;line-height:1.02;letter-spacing:-.02em}
  .xcard .xv small{font-size:13px;font-weight:800;color:var(--mut);margin-left:4px;letter-spacing:0}
  .xcard .xs{margin-top:5px;font-size:12.5px;line-height:1.45;font-weight:600;color:var(--ink2)}
  .xcard .xgo{margin-top:9px;color:var(--blue);font-weight:900;font-size:11.5px;letter-spacing:.04em}
  .xall{margin-top:12px;padding:14px 16px}
  .xpills{display:flex;flex-wrap:wrap;gap:7px}
  a.xpill{display:inline-flex;align-items:center;gap:7px;background:#eef2f6;border:1px solid var(--line);border-radius:20px;
    padding:6px 12px;font-size:12.5px;font-weight:800;color:var(--ink2);text-decoration:none;white-space:nowrap}
  a.xpill b{font-family:'Overpass Mono',monospace;font-size:10px;font-weight:800;color:#fff;background:var(--sign);border-radius:9px;padding:2px 6px}
  a.xpill:hover{background:var(--sign);color:#fff;border-color:var(--sign)}
  a.xpill:hover b{background:rgba(255,255,255,.24)}
  .xnote{margin-top:10px;font-family:'Overpass Mono',monospace;font-size:11px;color:var(--mut);line-height:1.55}
  /* warming stripes */
  .stripwrap{padding:13px 16px 12px;border-top:1px solid var(--line2);position:relative}
  .stripcap{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:7px}
  .stripcap .stl{font-family:'Overpass Mono',monospace;font-size:10.5px;font-weight:800;letter-spacing:.05em;color:var(--mut)}
  .stripcap .str{font-size:12px;font-weight:800}
  .stripes{position:relative}
  .stripes svg{display:block;width:100%;height:44px;border-radius:5px;overflow:hidden}
  .stripes svg rect{shape-rendering:crispEdges}
  .stripax{display:flex;justify-content:space-between;font-family:'Overpass Mono',monospace;font-size:10px;color:var(--mut);margin-top:4px}
  .striptip{position:absolute;pointer-events:none;opacity:0;transform:translateX(-50%);background:#1f2733;color:#fff;font-size:11px;font-weight:700;padding:4px 7px;border-radius:6px;white-space:nowrap;z-index:5;transition:opacity .08s}
  .striptip.on{opacity:1}
  .striptip .ty{font-family:'Overpass Mono',monospace;opacity:.7;margin-right:5px}
  /* seasonal record/normal envelope */
  .seaswrap{padding:13px 16px 12px;border-top:1px solid var(--line2);position:relative}
  .seaswrap .stl{font-family:'Overpass Mono',monospace;font-size:10.5px;font-weight:800;letter-spacing:.05em;color:var(--mut);display:block;margin-bottom:7px}
  .seaswrap svg{display:block;width:100%;height:auto}
  .seaswrap .lgd{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--ink2);margin-top:7px}
  .seaswrap .lgd i{display:inline-block;width:11px;height:11px;border-radius:3px;vertical-align:-1px;margin-right:4px}
  .seastip{position:absolute;pointer-events:none;opacity:0;transform:translateX(-50%);background:#1f2733;color:#fff;font-size:11px;padding:5px 8px;border-radius:6px;white-space:nowrap;z-index:5;transition:opacity .08s;line-height:1.5}
  .seastip.on{opacity:1}.seastip b{font-family:'Overpass Mono',monospace}
  @media(max-width:520px){.lclim{grid-template-columns:1fr 1fr}.lclim .ltile:last-child{grid-column:1/-1}}
  /* regional map (grads3 → NDFD) */
  .mapwrap{display:block;background:#f2f4f7;line-height:0}
  .wxmap{display:block;width:100%;height:auto;max-width:100%}
  /* recent climate (F-6) */
  .clim{display:flex;flex-direction:column}
  .crow{display:grid;grid-template-columns:66px 1fr auto;gap:14px;align-items:center;padding:9px 16px;border-top:1px solid var(--line2)}
  .crow:first-child{border-top:0}.crow:nth-child(even){background:#f3f6f9}
  .crow .cd{font-weight:800;font-size:12px;line-height:1.1}
  .crow .cd small{display:block;font-family:'Overpass Mono',monospace;font-size:9.5px;font-weight:700;color:var(--mut);margin-top:1px}
  .track{position:relative;height:11px;background:#e3e8ed;border-radius:6px}
  .track .bar{position:absolute;top:0;height:11px;border-radius:6px;min-width:3px}
  .ct{text-align:right;font-family:'Overpass Mono',monospace;font-size:12px;white-space:nowrap}
  .ct .hi{font-weight:900;font-size:15px;color:#c0331a}.ct .lo{font-weight:700;color:#2f6fb8;margin-left:5px}
  .ct .pr{color:#2f86d8;font-weight:700;margin-left:7px}.ct .gu{color:#b5581d;font-weight:700;margin-left:6px}
  .ct .dep{font-weight:900;margin-left:7px;font-size:11px}

  /* nearest observations board */
  .nearobs{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:0;border-top:1px solid var(--line2)}
  .nob{display:block;padding:14px 16px;border-right:1px solid var(--line2);border-bottom:1px solid var(--line2);color:inherit}
  .nob:hover{background:#f3f6f9}
  .nob .nnm{font-weight:800;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nob .nsub{font-size:11px;color:var(--mut);margin-top:2px;letter-spacing:.02em}
  .nob .nbody{display:flex;align-items:center;gap:14px;margin-top:9px}
  .nob .ntemp{font-weight:900;font-size:33px;line-height:.9;flex:none}
  .nob .nmeta{min-width:0}
  .nob .ncond{display:block;font-weight:700;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nob .nwind{display:block;font-size:11.5px;color:var(--mut);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* alerts — compact chips, official NWS event colors (chip bg/text set inline per event) */
  details.hwo{background:linear-gradient(180deg,#fdf6d8,#f7edbf);border:1px solid #e3d488;border-left:5px solid #c9a227;border-radius:10px;margin:0 0 16px;overflow:hidden;box-shadow:0 3px 12px rgba(0,0,0,.06)}
  details.hwo>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;padding:12px 15px;font-weight:800;color:#6b5310}
  details.hwo>summary::-webkit-details-marker{display:none}
  details.hwo .hwic{font-size:18px}.details.hwo .hwt{font-size:15px}
  details.hwo .hwsub{font-family:'Overpass Mono',monospace;font-size:11.5px;font-weight:700;color:#8a7220}
  details.hwo .hwcar{margin-left:auto;transition:transform .15s}details.hwo[open] .hwcar{transform:rotate(180deg)}
  details.hwo .hwobody{padding:0 15px 14px;border-top:1px solid #e6d99a}
  details.hwo .hwobody pre{white-space:pre-wrap;word-break:break-word;font-family:'Overpass Mono',monospace;font-size:12.5px;line-height:1.5;color:#3d3419;margin:12px 0 0;max-height:440px;overflow:auto}
  details.hwo .hwsrc{margin-top:10px;font-size:11px;color:#8a7220;font-family:'Overpass Mono',monospace}details.hwo .hwsrc a{color:#0e4c8f;font-weight:700}
  .bullcard{display:flex;flex-direction:column;gap:11px}
  details.bull{border-radius:11px;overflow:hidden;box-shadow:0 5px 16px rgba(11,61,145,.18)}
  details.bull>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:11px;padding:13px 16px;font-weight:800;
    background:linear-gradient(180deg,#0d449e,#0a3585);color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
  details.bull>summary::-webkit-details-marker{display:none}
  details.bull .binfo{display:inline-flex;align-items:center;justify-content:center;width:23px;height:23px;border-radius:50%;border:2.5px solid #fff;font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:700;font-size:14px;flex:none}
  details.bull .bt{font-size:15px}
  details.bull .bsub{font-family:'Overpass Mono',monospace;font-size:11px;font-weight:700;color:#cfe0f2}
  details.bull .bcar{margin-left:auto;color:#fff;font-size:13px;transition:transform .15s}details.bull[open] .bcar{transform:rotate(180deg)}
  details.bull .bbody{background:#fff;border:1px solid var(--line);border-top:0;border-radius:0 0 11px 11px;padding:2px 15px 14px}
  details.bull .bbody pre{white-space:pre-wrap;word-break:break-word;font-family:'Overpass Mono',monospace;font-size:12.5px;line-height:1.55;color:var(--ink2);margin:12px 0 0;max-height:520px;overflow:auto}
  .alerts{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}
  .alert{border-radius:7px;overflow:hidden;border:1px solid rgba(0,0,0,.14);box-shadow:0 2px 7px rgba(0,0,0,.12)}
  .alert[open]{flex-basis:100%;box-shadow:0 5px 16px rgba(0,0,0,.12)}
  .alert>summary{list-style:none;cursor:pointer;padding:8px 12px;display:flex;align-items:center;gap:9px;font-size:12.5px;line-height:1.15;user-select:none}
  .alert>summary::-webkit-details-marker{display:none}
  .alert .ev{font-weight:900;letter-spacing:.01em}
  .alert .caret{margin-left:auto;font-size:9px;opacity:.75;transition:transform .15s ease}
  .alert[open] .caret{transform:rotate(90deg)}
  .alert .body{padding:12px 14px;background:#fff}
  .alert .when{font-family:'Overpass Mono',monospace;font-size:11px;font-weight:800;color:var(--ink);margin-bottom:7px}
  .alert .hl{font-weight:800;font-size:13.5px;margin-bottom:6px;color:var(--ink)}
  .alert .area{font-family:'Overpass Mono',monospace;font-size:11px;color:var(--ink2);margin-bottom:8px}
  .alert .desc{white-space:pre-wrap;font-size:12.5px;line-height:1.5;color:var(--ink2);max-height:230px;overflow:auto}

  /* meteogram */
  .mg{padding:14px 14px 6px}
  .mg svg{width:100%;height:auto;display:block}
  .mgfoot{padding:8px 16px 12px;display:flex;gap:18px;flex-wrap:wrap}
  .lg{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--ink2)}
  .lg i{width:14px;height:14px;border-radius:3px;display:inline-block}

  /* 7-day list */
  .fc{display:flex;flex-direction:column}
  .per{display:grid;grid-template-columns:56px 1fr auto;gap:14px;align-items:center;padding:12px 16px;border-top:1px solid var(--line2)}
  .per:first-child{border-top:0}
  .per:nth-child(even){background:#f3f6f9}
  .per img{width:48px;height:48px;border-radius:6px;background:#e8edf2}
  .per .nm{font-weight:900;font-size:13.5px;letter-spacing:.02em}
  .per .sf{font-size:12.5px;color:var(--ink2);line-height:1.45;margin-top:2px}
  .per .tp{text-align:right;font-weight:900;font-size:22px;white-space:nowrap}
  .per .tp small{display:block;font-size:9.5px;font-weight:800;letter-spacing:.08em;color:var(--mut)}
  .per .conf{display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:88px}
  .conf .cl{font-family:'Overpass Mono',monospace;font-size:9.5px;font-weight:800;letter-spacing:.06em;
    padding:1px 6px;border-radius:3px;color:#fff;line-height:1.5}
  .conf .cn{font-family:'Overpass Mono',monospace;font-size:10.5px;font-weight:700;color:var(--mut)}
  @media(max-width:560px){ .per .conf{display:none} }
  /* 7-day horizontal strip */
  .wkchart{padding:14px 14px 6px}
  .wkchart a{cursor:pointer}.wkchart a:hover rect[filter]{filter:url(#wcsh) brightness(1.04)}
  .fc7{display:flex;gap:10px;padding:15px 16px;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .fc7::-webkit-scrollbar{height:7px}.fc7::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
  .d7{flex:1 0 116px;min-width:116px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:3px;
    text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 8px 12px;
    transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
  .d7:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.14);border-color:var(--blue)}
  .d7 .dow{font-weight:900;font-size:13px;letter-spacing:.05em;color:var(--sign)}
  .d7 .dt{font-family:'Overpass Mono',monospace;font-size:10.5px;font-weight:700;color:var(--mut)}
  .d7 svg{margin:3px 0}
  .d7 .hi{font-weight:900;font-size:27px;line-height:1}
  .d7 .lo{font-weight:800;font-size:14px;color:var(--mut)}
  .d7 .pp{font-family:'Overpass Mono',monospace;font-size:11px;font-weight:800;color:#2f7ec4;min-height:15px;letter-spacing:.02em}
  .d7 .cdot{width:8px;height:8px;border-radius:50%;margin-top:3px}
  .d7 .cdot.high{background:#2f8f4e}.d7 .cdot.mod{background:#c98a1e}.d7 .cdot.low{background:#c0331a}
  .d7.today{border-color:var(--sign);box-shadow:inset 0 0 0 1px var(--sign)}
  a.fcmore{font-family:'Overpass Mono',monospace;font-size:11.5px;font-weight:800;color:var(--blue);text-decoration:none;letter-spacing:.04em;white-space:nowrap}
  a.fcmore:hover{text-decoration:underline}

  /* radar + info two-up */
  .two{display:grid;grid-template-columns:1fr;gap:16px}
  @media (min-width:820px){ .two{grid-template-columns:1.35fr 1fr} }
  .rtabs{display:flex;gap:6px;padding:9px 12px;background:#eaeef2;border-bottom:1px solid var(--line2)}
  .rtabs button{cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink2);border-radius:3px;font-family:'Overpass',sans-serif;font-weight:700;font-size:11.5px;padding:5px 11px}
  .rtabs button.on{background:var(--blue);color:#fff;border-color:#08488a}
  .rframe{background:#0a0e14;min-height:220px;display:flex;align-items:center;justify-content:center;padding:8px}
  .rframe img{max-width:100%;height:auto;display:block}
  .rcap{padding:8px 14px;background:#eaeef2;font-family:'Overpass Mono',monospace;font-size:10.5px;color:var(--mut)}

  table.info{width:100%;border-collapse:collapse;font-size:12.5px;table-layout:fixed}
  table.info td{padding:8px 14px;border-top:1px solid var(--line2);vertical-align:top;overflow-wrap:anywhere}
  table.info tr:first-child td{border-top:0}
  table.info td.k{color:var(--mut);font-family:'Overpass Mono',monospace;font-size:11px;width:40%}
  table.info td.v{font-weight:700;text-align:right}
  table.info td.v .sub2{display:block;margin-top:2px;font:600 10.5px/1.3 'Overpass Mono',monospace;color:#8a867c}
  a.hsnote{display:block;margin:2px 12px 12px;padding:9px 12px;border-radius:7px;background:#eef4fb;border:1px solid #d9e6f4;
    color:var(--ink2);text-decoration:none;font-size:12px;font-weight:600;line-height:1.45}
  a.hsnote b{color:var(--blue)}a.hsnote .go{color:var(--blue);font-weight:900;white-space:nowrap}
  a.hsnote:hover{background:#e4eef8;border-color:#c2d9ef}
  .stns{display:flex;flex-direction:column;gap:2px}
  .stns .s{display:flex;justify-content:space-between;gap:10px;font-size:11.5px}
  .stns .s .id{font-family:'Overpass Mono',monospace;font-weight:700;color:var(--navy)}
  .stns .s .nm{color:var(--ink2);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  .msg{padding:40px 20px;text-align:center;color:var(--ink2);font-weight:700}
  .msg.err{color:var(--warn)}
  .spin{display:inline-block;width:15px;height:15px;border:2px solid var(--line);border-top-color:var(--sign);border-radius:50%;animation:sp .7s linear infinite;vertical-align:-3px;margin-right:8px}
  @keyframes sp{to{transform:rotate(360deg)}}
  /* instant load skeleton (perceived performance) */
  .sk{background:linear-gradient(100deg,var(--line2) 30%,#eef1f5 50%,var(--line2) 70%);background-size:200% 100%;animation:shim 1.15s linear infinite;border-radius:8px;display:block}
  @keyframes shim{from{background-position:200% 0}to{background-position:-200% 0}}
  .skrow{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}

  footer{margin-top:30px;background:#0a2f5c;color:#cfe0f4;border-top:4px solid var(--sign);padding:20px 0}
  footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
  footer .fw{font-weight:900;font-size:19px;color:#fff}
  footer .fw .yl{color:var(--sign-sub)}
  footer .mono{font-size:10.5px;line-height:1.6;text-align:right;color:#b7b3aa}

  @media (max-width:600px){
    .cc{grid-template-columns:1fr}
    .per{grid-template-columns:44px 1fr auto;gap:10px}
    footer .mono{text-align:left}
  }
  /* ── flourish: sky band, sun/moon, almanac, on-the-map ── */
  .skyband{border-radius:12px;padding:16px 18px;color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.12);margin-bottom:12px;text-shadow:0 1px 3px rgba(0,0,0,.28)}
  .skb-ph{font-family:'Overpass Mono',ui-monospace,monospace;font-size:11px;font-weight:800;letter-spacing:.14em;opacity:.92}
  .skb-tag{font-size:clamp(16px,2.6vw,20px);font-weight:800;line-height:1.3;margin-top:6px;letter-spacing:-.01em}
  .flgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
  .flcard{background:var(--card,#fff);border:1px solid var(--line,#c6ccd3);border-radius:12px;padding:14px 16px;box-shadow:0 4px 14px rgba(0,0,0,.06)}
  .flh{font-family:'Overpass Mono',ui-monospace,monospace;font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--sign,#04663d);text-transform:uppercase;margin-bottom:10px}
  .flmsg{color:#77818d;font-family:'Overpass Mono',monospace;font-size:12px;font-weight:700;padding:8px 0}
  .moonrow{display:flex;align-items:center;gap:11px;margin-top:8px;padding-top:11px;border-top:1px solid var(--line2,#dfe3e8)}
  .moonrow .mn{font-size:30px;line-height:1}
  .moonrow b{display:block;font-size:14px;font-weight:800}
  .moonrow span span,.moonrow>div>span{display:block;font-family:'Overpass Mono',monospace;font-size:11px;font-weight:700;color:#77818d;margin-top:2px}
  .alr{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid var(--line2,#dfe3e8)}
  .alr:first-of-type{border-top:0}
  .alk{font-family:'Overpass Mono',monospace;font-size:11.5px;font-weight:700;color:var(--ink2,#3d4653)}
  .alv{font-weight:900;font-size:16px}.alv small{font-family:'Overpass Mono',monospace;font-size:10.5px;font-weight:700;color:#77818d}
  .alv .hot{color:#c0331a}.alv .cool{color:#2f6fb8}
  .flrow{display:flex;align-items:center;gap:11px;padding:9px 0;border-top:1px solid var(--line2,#dfe3e8);text-decoration:none;color:inherit}
  .flrow:first-of-type{border-top:0}.flrow:hover{opacity:.82}
  .flshield{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:32px;padding:0 8px;
    background:#003f87;color:#fff;border:2px solid #fff;border-radius:6px;box-shadow:0 0 0 1px #003f87;font-weight:900;font-size:13px;font-family:'Overpass Mono',monospace}
  .flpop{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:34px;padding:0 8px;
    background:var(--sign,#04663d);color:#fff;border-radius:8px;font-weight:900;font-size:14px;font-family:'Overpass Mono',monospace}
  .flrow .fltx{min-width:0;flex:1}.flrow .fltx b{display:block;font-size:14px;font-weight:800}
  .flrow .fltx span{display:block;font-family:'Overpass Mono',monospace;font-size:11px;font-weight:700;color:#77818d;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .flrow .flgo{color:var(--blue,#0e4c8f);font-weight:900}
  /* ── exposure strips: Sun & UV, Air Quality (shared visual language) ── */
  .uvbadge{display:inline-block;min-width:22px;padding:1px 6px;border-radius:5px;color:#fff;font-weight:900;text-align:center;font-family:'Overpass Mono',ui-monospace,monospace;line-height:1.35}
  .ccg .uvbadge{font-size:16px}
  .uvcat{font-size:12.5px;font-weight:800;margin-left:6px;white-space:nowrap}
  .uvcard{padding:14px 16px}
  .uvhead{display:flex;align-items:center;gap:15px;margin-bottom:8px}
  .exsign{width:62px;height:auto;flex:none;filter:drop-shadow(0 3px 8px rgba(0,0,0,.20))}
  .uvht b{display:block;font-size:18px;font-weight:900;line-height:1}
  .uvht span{display:block;font-family:'Overpass Mono',ui-monospace,monospace;font-size:11.5px;font-weight:700;color:#77818d;margin-top:3px}
  .uvstrip{margin:2px 0 4px}
  .uvfoot{border-top:1px solid var(--line2,#dfe3e8);padding-top:9px;margin-top:2px}
  .uvadv{display:block;font-size:12.5px;font-weight:800;color:var(--ink2,#3d4653);letter-spacing:-.005em}
  .uvsrc{display:block;font-family:'Overpass Mono',ui-monospace,monospace;font-size:12px;font-weight:700;color:#9aa6b2;margin-top:4px}
  /* AirNow AQI — one row: current dial + daily-outlook tiles (big, legible) */
  .aqrow{display:flex;align-items:flex-start;gap:14px;overflow-x:auto;padding:2px 2px 8px}
  .aqcur{flex:none;text-align:center;min-width:168px}
  .aqdial{width:168px;height:auto;display:block;margin:4px auto 0;filter:drop-shadow(0 3px 8px rgba(0,0,0,.12))}
  .aqft{flex:none;min-width:122px;border:1px solid var(--line2,#dfe3e8);border-radius:13px;padding:14px 12px 13px;text-align:center;background:#fbfcfd}
  .aqft.now{border-color:#1b1f24;box-shadow:inset 0 0 0 1px #1b1f24}
  .aqfd{font-family:'Overpass Mono',ui-monospace,monospace;font-size:15px;font-weight:800;letter-spacing:.07em;color:var(--mut,#77818d)}
  .aqft .uvbadge{display:inline-block;margin:11px 0 8px;font-size:32px;min-width:62px;padding:6px 15px;border-radius:9px}
  .aqfcat{font-size:16.5px;font-weight:800;line-height:1.15}
  .aqcur .aqfcat{margin-top:4px}
  .aqfp{font-family:'Overpass Mono',ui-monospace,monospace;font-size:13px;font-weight:700;color:#9aa6b2;margin-top:5px}
  .aqact{color:#c0331a;font-size:16px}
  /* compact dial in the Current Conditions cell */
  .aqmini{display:inline-flex;align-items:center;gap:8px}
  .aqdial-mini{width:52px;height:auto;flex:none}

  /* pre-rendered forecast table, replaced by the app once it hydrates */
  .seedfx{margin:0 0 12px;font-size:14px;line-height:1.5;max-width:70ch}
  .seedtbl{border-collapse:collapse;margin:0 0 10px;font-size:13px}
  .seedtbl th,.seedtbl td{border:1px solid var(--line);padding:4px 10px;text-align:right}
  .seedtbl th:first-child,.seedtbl td:first-child{text-align:left}
  .seedtbl thead th{background:#f2f0ea;font-family:'Overpass Mono',monospace;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}
  .seedmeta{margin:0;color:var(--mut);font-size:11.5px}

  /* pre-rendered city identity, replaced by the app once it hydrates */
  .seedh1{font-family:'Overpass',Helvetica,Arial,sans-serif;font-size:22px;font-weight:900;letter-spacing:.01em;margin:2px 0 6px}
  .seedsub{margin:0 0 12px;color:var(--mut);font-size:13.5px;line-height:1.45;max-width:64ch}