:root {
    --sky-top: #1e63c4; --sky-mid: #4d92e0; --sky-bot: #a9d6f2;

    --ink: rgba(255,255,255,0.98);
    --ink-soft: rgba(255,255,255,0.74);
    --ink-faint: rgba(255,255,255,0.52);
    --label: rgba(255,255,255,0.58);

    --glass: rgba(12,22,43,0.30);
    --glass-2: rgba(12,22,43,0.46);
    --edge: rgba(255,255,255,0.16);
    --edge-hi: rgba(255,255,255,0.22);

    --sun: #ffd27a; --sun-deep: #ffb64d;
    --hi: #ffd9a0; --lo: #a9c7ff;

    --uv-low:#58c06a; --uv-mod:#f2c94c; --uv-high:#f2994a; --uv-vhigh:#eb5757; --uv-extreme:#a06be0;
    --good:#57e08a; --warn:#f2c94c;

    --radius: 22px;
    --gap: clamp(12px, 1.5vw, 18px);
    --pad: clamp(16px, 2vw, 24px);
    --maxw: 1180px;
    --font: "Segoe UI Variable Display", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; }
  body {
    font-family: var(--font); color: var(--ink); background: #0a1330;
    min-height: 100%; overflow-x: hidden;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  }

  #sky { position: fixed; inset: 0; z-index: -2; display: block; }
  #scrim {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(120% 80% at 50% -10%, transparent 40%, rgba(2,6,20,0.30) 100%),
      linear-gradient(180deg, rgba(4,8,22,0.10) 0%, rgba(4,8,22,0.32) 55%, rgba(4,8,22,0.58) 100%);
  }

  .wrap { max-width: var(--maxw); margin: 0 auto; padding: clamp(18px,3vw,38px) clamp(16px,3vw,30px) 56px; }

  /* glass primitive */
  .glass {
    background: var(--glass); border: 1px solid var(--edge); border-radius: var(--radius);
    backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
    box-shadow: 0 10px 40px rgba(0,6,26,0.26), inset 0 1px 0 var(--edge-hi);
  }

  /* eyebrow section label */
  .eyebrow {
    display: flex; align-items: center; gap: 12px;
    font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
    color: var(--label); margin: clamp(26px,4vh,42px) 2px 14px;
  }
  .eyebrow::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--edge), transparent); }

  /* ---- top bar ---- */
  .topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: clamp(24px,5vh,60px); }
  .brand { display: flex; align-items: baseline; gap: 10px; }
  .brand .mark { font-size: 1.05rem; font-weight: 700; }
  .brand .dot { color: var(--sun); }
  .brand .sub { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
  .chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .chip {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .74rem; letter-spacing: .04em; color: var(--ink-soft);
    padding: 7px 13px; border-radius: 999px;
    background: var(--glass); border: 1px solid var(--edge);
    backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  }
  .chip b { color: var(--ink); font-weight: 600; }
  .chip .beat { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 0 rgba(87,224,138,0.6); animation: beat 2.4s ease-out infinite; }
  .chip .swatch { width: 9px; height: 9px; border-radius: 2px; }
  @keyframes beat { 0%{box-shadow:0 0 0 0 rgba(87,224,138,0.55);} 70%{box-shadow:0 0 0 9px rgba(87,224,138,0);} 100%{box-shadow:0 0 0 0 rgba(87,224,138,0);} }

  /* ---- hero ---- */
  .hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(20px,3.5vw,52px); align-items: center; }
  .place h1 { font-size: clamp(1.15rem,2.4vw,1.55rem); font-weight: 500; margin-bottom: 8px; }
  .cond { display: inline-flex; align-items: center; gap: 9px; color: var(--ink-soft); font-size: clamp(.95rem,1.6vw,1.12rem); margin-bottom: clamp(4px,1.2vh,10px); }
  .cond svg { width: 26px; height: 26px; }
  .temp { display: flex; align-items: flex-start; line-height: .9; font-weight: 200; letter-spacing: -0.045em; font-size: clamp(5rem,16vw,10.5rem); font-variant-numeric: tabular-nums; text-shadow: 0 2px 40px rgba(0,10,40,0.35); }
  .temp .deg { font-size: .34em; font-weight: 200; margin-top: .18em; color: var(--ink-soft); letter-spacing: 0; }
  .metaline { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: clamp(6px,1.2vh,14px); color: var(--ink-soft); font-size: clamp(.92rem,1.5vw,1.06rem); }
  .metaline b { color: var(--ink); font-weight: 600; }
  .metaline .hi { color: var(--hi); } .metaline .lo { color: var(--lo); }
  .todayrange { margin-top: 10px; font-size: .85rem; color: var(--ink-faint); }
  .todayrange b { color: var(--ink-soft); font-weight: 600; }

  /* celestial panel */
  .celest { padding: var(--pad); }
  .celest .cap { display: flex; justify-content: space-between; align-items: baseline; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--label); margin-bottom: 4px; }
  .arcbox svg { width: 100%; height: auto; display: block; overflow: visible; }
  .suntimes { display: flex; justify-content: space-between; font-size: .84rem; color: var(--ink-soft); margin-top: 2px; }
  .suntimes b { color: var(--ink); font-weight: 600; }
  .daylen { text-align: center; font-size: .8rem; color: var(--ink-faint); margin-top: 6px; }
  .daydelta { text-align: center; font-size: .78rem; margin-top: 3px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
  .daydelta .up { color: #8fe0a0; } .daydelta .dn { color: #f2b48a; }
  .solstices { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--edge); }
  .solstices .sol { display: flex; flex-direction: column; gap: 2px; }
  .solstices .sol:last-child { text-align: right; }
  .solstices .lab { color: var(--label); text-transform: uppercase; letter-spacing: .08em; font-size: .62rem; }
  .solstices b { color: var(--ink-soft); font-weight: 600; font-size: .82rem; font-variant-numeric: tabular-nums; }
  .moonrow { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--edge); }
  .moonrow svg { width: 40px; height: 40px; flex: none; }
  .moonrow .mi { display: flex; flex-direction: column; gap: 2px; }
  .moonrow .mi .p { font-size: .98rem; font-weight: 500; }
  .moonrow .mi .s { font-size: .8rem; color: var(--ink-faint); }

  /* ---- instrument grid ---- */
  .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
  .card { padding: var(--pad); display: flex; flex-direction: column; gap: 11px; min-height: 158px; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
  .card:hover { transform: translateY(-3px); box-shadow: 0 16px 50px rgba(0,6,26,0.36), inset 0 1px 0 var(--edge-hi); }
  .card .k { display: flex; align-items: center; gap: 8px; font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--label); }
  .card .k svg { width: 15px; height: 15px; opacity: .8; }
  .card .v { font-size: clamp(1.6rem,2.8vw,2.05rem); font-weight: 300; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; }
  .card .v .u { font-size: .5em; color: var(--ink-faint); font-weight: 400; margin-left: 3px; }
  .card .foot { font-size: .82rem; color: var(--ink-soft); margin-top: auto; }
  .card .foot b { color: var(--ink); font-weight: 600; }
  .span2 { grid-column: span 2; }

  .compass { display: flex; align-items: center; gap: 13px; }
  .compass svg { width: 82px; height: 82px; flex: none; }
  .compass .rd { display: flex; flex-direction: column; gap: 3px; }
  .compass .rd .big { font-size: 2rem; font-weight: 300; font-variant-numeric: tabular-nums; line-height: 1; }
  .compass .rd .big .u { font-size: .46em; color: var(--ink-faint); margin-left: 3px; }
  .compass .rd .dir { font-size: .92rem; color: var(--ink-soft); }
  .compass .rd .dir b { color: var(--ink); }
  .compass .rd .gust { font-size: .82rem; color: var(--ink-faint); }

  .uvbar { height: 9px; border-radius: 999px; position: relative; margin-top: 2px;
    background: linear-gradient(90deg, var(--uv-low) 0%, var(--uv-low) 18%, var(--uv-mod) 27%, var(--uv-mod) 45%, var(--uv-high) 54%, var(--uv-high) 63%, var(--uv-vhigh) 72%, var(--uv-vhigh) 90%, var(--uv-extreme) 100%); }
  .uvbar .pin { position: absolute; top: 50%; width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 2px solid rgba(0,0,0,0.25); transform: translate(-50%,-50%); box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
  .meter { height: 9px; border-radius: 999px; background: rgba(255,255,255,0.14); overflow: hidden; margin-top: 2px; }
  .meter > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg,#6fb6ff,#8fd0ff); }
  .trend { display: inline-flex; align-items: center; gap: 5px; }
  .trend svg { width: 14px; height: 14px; }

  /* ---- 24h chart ---- */
  .chartpanel { padding: var(--pad); }
  .charthead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
  .charthead .k { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--label); }
  .segmented { display: inline-flex; gap: 3px; padding: 3px; border-radius: 999px; background: rgba(0,0,0,0.22); border: 1px solid var(--edge); }
  .segmented button { font: inherit; font-size: .78rem; color: var(--ink-faint); background: transparent; border: 0; padding: 6px 14px; border-radius: 999px; cursor: pointer; transition: .22s; }
  .segmented button:hover { color: var(--ink); }
  .segmented button.on { color: #0d1a33; background: rgba(255,255,255,0.9); font-weight: 600; }
  .segmented button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  .chartwrap { position: relative; width: 100%; }
  .chartwrap svg { width: 100%; height: auto; display: block; overflow: visible; }

  /* ---- records table ---- */
  .records { padding: clamp(6px,1.4vw,14px) var(--pad) var(--pad); overflow-x: auto; }
  table.rec { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; min-width: 460px; }
  table.rec th, table.rec td { text-align: right; padding: 12px 10px; }
  table.rec thead th { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--label); font-weight: 600; border-bottom: 1px solid var(--edge); }
  table.rec tbody th { text-align: left; font-weight: 500; color: var(--ink-soft); font-size: .9rem; }
  table.rec tbody tr + tr td, table.rec tbody tr + tr th { border-top: 1px solid rgba(255,255,255,0.07); }
  table.rec td { color: var(--ink); font-size: .98rem; }
  table.rec td .t { display: block; font-size: .72rem; color: var(--ink-faint); margin-top: 2px; font-variant-numeric: normal; }
  table.rec td.hot { color: var(--hi); } table.rec td.cold { color: var(--lo); }
  table.rec .col-now { color: var(--ink); }

  /* ---- forecast ---- */
  .fc { padding: var(--pad); }
  .fcrow { display: grid; grid-template-columns: repeat(5,1fr); gap: 6px; }
  .fcday { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 12px 6px; border-radius: 16px; transition: background .3s; }
  .fcday:hover { background: rgba(255,255,255,0.06); }
  .fcday .d { font-size: .84rem; color: var(--ink-soft); }
  .fcday.today .d { color: var(--sun); font-weight: 600; }
  .fcday svg.ic { width: 42px; height: 42px; }
  .fcday .wx { font-size: .72rem; color: var(--ink-faint); text-align: center; min-height: 2.2em; line-height: 1.1; }
  .fcday .pop { font-size: .72rem; color: #8fd0ff; display: flex; align-items: center; gap: 3px; min-height: 1em; }
  .fcday .pop svg { width: 10px; height: 10px; }
  .fctemps { display: flex; gap: 9px; font-variant-numeric: tabular-nums; font-size: .98rem; }
  .fctemps .h { color: var(--hi); font-weight: 600; } .fctemps .l { color: var(--lo); }

  /* ---- context cards ---- */
  .ctxgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--gap); }
  .ctx { padding: var(--pad); display: flex; gap: 15px; align-items: flex-start; min-height: 130px; }
  .ctx .ic { width: 46px; height: 46px; flex: none; border-radius: 13px; display: grid; place-items: center; background: rgba(255,255,255,0.08); border: 1px solid var(--edge); }
  .ctx .ic svg { width: 26px; height: 26px; }
  .ctx .body { display: flex; flex-direction: column; gap: 4px; }
  .ctx .k { font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--label); }
  .ctx .big { font-size: 1.35rem; font-weight: 400; line-height: 1.05; }
  .ctx .big small { font-size: .62em; color: var(--ink-faint); }
  .ctx .sub { font-size: .82rem; color: var(--ink-soft); }
  .ctx .sub b { color: var(--ink); font-weight: 600; }

  /* ---- sky switcher + footer ---- */
  .foot-note { margin-top: 30px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: center; color: var(--ink-faint); font-size: .8rem; }
  .foot-note a { color: var(--ink-soft); text-decoration: none; }
  .foot-note a:hover { color: var(--ink); }
  .footinfo { display: flex; flex-direction: column; gap: 4px; text-align: right; }
  .stationhealth { display: inline-flex; align-items: center; gap: 7px; justify-content: flex-end; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
  .stationhealth b { color: var(--ink); font-weight: 600; }
  .statdot { width: 8px; height: 8px; border-radius: 50%; flex: none; box-shadow: 0 0 8px 0 currentColor; }
  .skyswitch { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--glass); border: 1px solid var(--edge); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); }
  .skyswitch button { font: inherit; font-size: .74rem; letter-spacing: .05em; color: var(--ink-faint); background: transparent; border: 0; padding: 9px 15px; border-radius: 999px; cursor: pointer; transition: .25s; }
  .skyswitch button:hover { color: var(--ink); }
  .skyswitch button.on { color: #0d1a33; background: rgba(255,255,255,0.9); font-weight: 600; }
  .skyswitch button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

  /* ---- responsive ---- */
  @media (max-width: 940px) {
    .hero { grid-template-columns: 1fr; }
    .celest { max-width: 520px; }
    .grid { grid-template-columns: repeat(2,1fr); }
    .ctxgrid { grid-template-columns: 1fr; }
  }
  @media (max-width: 560px) {
    .grid { grid-template-columns: 1fr; }
    .span2 { grid-column: span 1; }
    .fcrow { gap: 3px; }
    .fcday { padding: 12px 3px 10px; gap: 7px; }
    .fcday .d { font-size: .78rem; }
    .fcday svg.ic { width: 34px; height: 34px; }
    .fcday .wx { display: none; }
    .fctemps { flex-direction: column; gap: 1px; line-height: 1.15; }
    .records { padding-left: 10px; padding-right: 10px; }
    table.rec { min-width: 0; }
    table.rec th, table.rec td { padding: 8px 5px; }
    table.rec td { font-size: .9rem; }
    table.rec td .t { font-size: .64rem; }
    table.rec thead th, table.rec tbody th { font-size: .78rem; }
    .topbar { margin-bottom: 18px; }
    .skyswitch { width: 100%; justify-content: space-between; }
    .skyswitch button { padding: 11px 8px; flex: 1; }
    .foot-note { justify-content: flex-start; }
    .footinfo { text-align: left; }
    .stationhealth { justify-content: flex-start; }
  }
  @media (prefers-reduced-motion: reduce) {
    .chip .beat { animation: none; }
    .card { transition: none; }
  }

  /* live + air-quality status, relocated from the topbar into the hero */
  .herostatus { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }

  /* cross-page navigation */
  .menu { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--glass); border: 1px solid var(--edge); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); }
  .menu a { font-size: .82rem; color: var(--ink-faint); text-decoration: none; padding: 8px 15px; border-radius: 999px; transition: color .2s, background .2s; }
  .menu a:hover { color: var(--ink); }
  .menu a.on { color: #0d1a33; background: rgba(255,255,255,0.9); font-weight: 600; }
  .menu { scrollbar-width: none; }
  .menu::-webkit-scrollbar { display: none; }
  @media (max-width: 860px) {
    .topbar { flex-wrap: wrap; }
    .menu { order: 3; width: 100%; overflow-x: auto; justify-content: flex-start; }
    .menu a { padding: 7px 10px; font-size: .8rem; }
  }