/* Inter variable font — self-hosted */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --bg:#0c0d0f;
  --panel:#111214;
  --text:#f5f6f7;
  --text-dim:#9aa3b2;
  --accent:#c7d2fe;
  --accent-2:#e0e7ff;
  --border:#2a2a2a;
  --line:#1e1e1e;
}

*{box-sizing:border-box}
html,body{min-height:100%}
html{
  scrollbar-gutter:stable both-edges;
  overflow-y:scroll;
}
body{
  margin:0;
  min-height:100dvh;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.45;
  overflow-x:hidden;
}

.container{max-width:1100px;margin:0 auto;padding:1.25rem 1.5rem}
.sticky-header{
  margin:0 auto;
  padding:1rem 1.5rem;
}
.site-header{
  display:flex;
  flex-direction:column;
  gap:.65rem;
  padding-top:calc(3.2rem + env(safe-area-inset-top, 0px));
}
.topbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:10001;
  padding-top:env(safe-area-inset-top, 0px);
  background:linear-gradient(180deg, rgba(12,13,15,.96), rgba(12,13,15,.9));
  backdrop-filter:saturate(120%) blur(6px);
  border-bottom:2px solid var(--line);
}
.topbar-content{
  max-width:1100px;
  margin:0 auto;
  padding:.65rem 1.5rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.ecosystem-nav{
  display:flex;
  align-items:center;
  gap:.55rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.ecosystem-nav a,
.ecosystem-nav .active{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:.9rem;
  line-height:1;
  padding:.35rem .45rem;
  border-radius:.2rem;
  white-space:nowrap;
}
.ecosystem-nav a{
  color:var(--text-dim);
  text-decoration:none;
}
.ecosystem-nav a:hover{
  color:var(--text);
  background:rgba(255,255,255,.05);
}
.ecosystem-nav .active{
  color:#9ae6b4;
  background:rgba(72,187,120,.16);
  border:2px solid rgba(72,187,120,.35);
}
.header-controls{
  display:flex;
  gap:.5rem;
  align-items:center;
  margin-left:auto;
  flex:0 0 auto;
  position:relative;
  z-index:2;
}
.icon-btn{
  appearance:none;
  -webkit-appearance:none;
  min-height:36px;
  min-width:36px;
  border:2px solid var(--border);
  border-radius:999px;
  background:var(--panel);
  color:var(--text);
  display:grid;
  place-items:center;
  font-size:.95rem;
  cursor:pointer;
}
.icon-btn:focus-visible{
  outline:2px solid rgba(199,210,254,.7);
  outline-offset:2px;
}
.brand{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:1.5rem;
  font-weight:800;
  color:var(--accent);
  text-decoration:none;
}
.brand:hover{color:var(--accent-2)}
.utility-row{
  display:flex;
  align-items:center;
  gap:.75rem;
  margin-top:.2rem;
}
.fav-section{
  display:flex;
  align-items:center;
  gap:.5rem;
  min-width:0;
  flex-shrink:1;
  overflow-x:auto;
  scrollbar-width:none;
}
.fav-section::-webkit-scrollbar{display:none}
.search-wrap{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  flex:1;
  min-width:0;
}
.pull-bar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:0 1rem;
  background:rgba(17,18,20,.9);
  color:var(--text-dim);
  font-size:.78rem;
  z-index:10002;
  overflow:hidden;
  border-bottom:2px solid var(--line);
  transition:height .12s ease;
}
.pull-bar.active{height:40px}
.pull-bar.ready{color:var(--text)}
.theme-picker{position:relative}
.theme-toggle{
  appearance:none;
  -webkit-appearance:none;
  min-height:40px;
  min-width:40px;
  border:2px solid var(--border);
  border-radius:999px;
  background:var(--panel);
  color:var(--text);
  display:grid;
  place-items:center;
  cursor:pointer;
}
.palette-icon{
  position:relative;
  width:18px;
  height:18px;
}
.palette-icon span{
  display:block;
  position:absolute;
  width:8px;
  height:8px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.18);
}
.palette-icon span:nth-child(1){left:0;top:2px;background:#7db5ff}
.palette-icon span:nth-child(2){right:0;top:0;background:#88a69a}
.palette-icon span:nth-child(3){left:1px;bottom:0;background:#cf9f6f}
.palette-icon span:nth-child(4){right:1px;bottom:2px;background:#9fb3c9}
.theme-popover{
  position:absolute;
  bottom:calc(100% + .45rem);
  right:0;
  top:auto;
  display:none;
  gap:.45rem;
  flex-wrap:wrap;
  width:190px;
  padding:.5rem;
  border:2px solid var(--border);
  border-radius:.3rem;
  background:var(--panel);
  z-index:30;
}
.theme-popover.open{display:flex}
.theme-swatch{
  width:34px;
  height:34px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.2);
  cursor:pointer;
}
.theme-swatch.active{border-color:var(--accent)}
.sw-dark{background:#0c0d0f}
.sw-mist{background:#edf2f5}
.sw-cedar{background:#1d2a2f}
.sw-sand{background:#efe5d7}
.search-row{display:flex;align-items:stretch;gap:.55rem;flex:1;justify-content:flex-end;position:relative}
.search-refresh-btn{
  min-width:40px;
  min-height:40px;
  flex:0 0 40px;
}
.search-row input{
  width:100%;
  padding-right:2.2rem;
  background:var(--panel);
  color:var(--text);
  border:2px solid var(--border);
  border-radius:.3rem;
  padding:.5rem .9rem;
  min-height:34px;
  font-size:16px; /* Prevent iOS zoom-on-focus */
  outline:none;
}
.search-row .btn{
  min-height:34px;
}
.search-row input:focus{border-color:rgba(199,210,254,.65)}
.search-input-wrap{position:relative;width:min(36rem,100%);display:flex;align-items:stretch;}
.clear-input-btn{position:absolute;right:.4rem;top:50%;transform:translateY(-50%);background:none;border:0;padding:.2rem .32rem;color:var(--text-dim);cursor:pointer;font-size:1.15rem;line-height:1;border-radius:.3rem;display:flex;align-items:center;justify-content:center;transition:color .15s;}
.clear-input-btn:hover{color:var(--text);}
.search-hint{
  margin:0 0 .28rem;
  color:var(--text-dim);
  font-size:.76rem;
  opacity:1;
  max-height:2.2rem;
  overflow:hidden;
  transition:opacity .35s ease, max-height .35s ease, margin-top .35s ease;
}
.search-hint.hidden{
  opacity:0;
  max-height:0;
  margin-top:0;
}
.btn{
  padding:.58rem .92rem;
  min-height:44px;
  border-radius:.3rem;
  border:2px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  color:var(--text);
  font-weight:700;
  cursor:pointer;
}
.btn:hover{background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.04))}
.typeahead{
  position:absolute;
  top:calc(100% + .35rem);
  right:0;
  width:min(36rem,100%);
  margin:0;
  padding:0;
  list-style:none;
  border:2px solid var(--border);
  border-radius:.3rem;
  background:var(--panel);
  overflow:hidden;
  display:none;
  z-index:20;
}
.typeahead.open{display:block}
.typeahead li{margin:0}
.typeahead button{
  width:100%;
  text-align:left;
  border:0;
  background:transparent;
  color:var(--text);
  padding:.6rem .75rem;
  border-bottom:2px solid var(--line);
  cursor:pointer;
}
.typeahead li:last-child button{border-bottom:0}
.typeahead button:hover,.typeahead button.active{background:var(--panel)}
.suggest-main{display:block;font-weight:700}
.suggest-sub{display:block;font-size:.84rem;color:var(--text-dim);margin-top:.14rem}

.card{
  margin-top:1rem;
  border:2px solid var(--border);
  border-radius:6px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  padding:1rem;
}
.favorites-note{
  margin:0;
  font-size:.74rem;
  color:var(--text-dim);
}
.favorites-list{
  display:flex;
  align-items:center;
  gap:.45rem;
  flex-wrap:wrap;
}
.favorites-list[hidden]{display:none !important}
.favorite-chip{
  display:flex;
  align-items:center;
  overflow:hidden;
  border:2px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);
  border-radius:999px;
}
.favorite-chip-main{
  border:0;
  background:transparent;
  color:var(--text);
  padding:.42rem .62rem .42rem .72rem;
  font-size:.88rem;
  cursor:pointer;
}
.favorite-chip-remove{
  border:0;
  border-left:2px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.02);
  color:var(--text-dim);
  padding:.42rem .52rem;
  font-size:.86rem;
  cursor:pointer;
}
.favorite-chip:hover{background:rgba(255,255,255,.08)}
.favorite-chip-remove:hover{color:#ffd5d5;background:rgba(255,120,120,.12)}
.favorite-chip.active{
  border-color:rgba(199,210,254,.6);
  background:rgba(199,210,254,.18);
  color:#eef3ff;
}
.favorite-add{
  box-sizing:border-box;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.2rem;
  padding:.5rem .65rem;
  background:var(--panel);
  border:1px dashed var(--border);
  border-radius:.4rem;
  min-width:90px;
  min-height:72px;
  flex-shrink:0;
  font-size:.85rem;
  line-height:1;
  color:var(--text-dim);
  cursor:pointer;
  transition:border-color .15s, color .15s;
}
.favorite-add:hover{border-color:var(--accent);color:var(--accent)}
.fav-widget--demo{border-style:dashed;opacity:.7}
.fav-widget--demo:hover{opacity:1}
.btn:focus-visible,
.favorite-chip-main:focus-visible,
.favorite-chip-remove:focus-visible,
.typeahead button:focus-visible,
.day-tile:focus-visible,
.search-row input:focus-visible,
.hero:focus-visible{
  outline:2px solid rgba(199,210,254,.8);
  outline-offset:2px;
}

.hero{
  --hero-swipe-offset:0px;
  position:relative;
  overflow:hidden;
  text-align:center;
  min-height:23rem;
  padding:1.4rem 3.1rem 1.25rem;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  touch-action:pan-y;
  transition:transform .22s ease, box-shadow .22s ease;
  will-change:transform;
}
.hero.is-gesture-dragging{
  transform:translateX(calc(var(--hero-swipe-offset) * .16));
  transition:none;
}
.hero[data-gesture-ready="true"]{
  box-shadow:0 24px 64px rgba(7,10,18,.28);
}
.hero[data-gesture-ready="true"][data-gesture-kind="add"]{
  box-shadow:0 26px 68px rgba(88,138,229,.28);
}
.hero[data-gesture-ready="true"][data-gesture-kind="navigate"]{
  box-shadow:0 26px 68px rgba(125,155,215,.22);
}
.hero > *{
  position:relative;
  z-index:1;
}
.hero__edge-action{
  position:absolute;
  top:50%;
  z-index:2;
  width:2.55rem;
  min-height:11.25rem;
  padding:.72rem .24rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.42rem;
  border:2px solid rgba(255,255,255,.12);
  border-radius:0.35rem;
  background:linear-gradient(180deg, rgba(13,21,35,.46), rgba(8,14,24,.2));
  color:rgba(233,239,255,.78);
  box-shadow:0 14px 30px rgba(0,0,0,.22);
  backdrop-filter:blur(14px) saturate(120%);
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease, opacity .18s ease, box-shadow .18s ease;
}
.hero__edge-action--left{
  left:.52rem;
  transform:translateY(-50%) translateX(0);
}
.hero__edge-action--right{
  right:.52rem;
  transform:translateY(-50%) translateX(0);
}
.hero__edge-action[hidden]{
  display:none;
}
.hero__edge-action:hover,
.hero__edge-action:focus-visible{
  color:#fff;
  border-color:rgba(199,210,254,.48);
  box-shadow:0 18px 36px rgba(0,0,0,.28);
}
.hero__edge-action--left:hover,
.hero__edge-action--left:focus-visible,
.hero__edge-action--left[data-active="true"]{
  transform:translateY(-50%) translateX(-2px);
}
.hero__edge-action--right:hover,
.hero__edge-action--right:focus-visible,
.hero__edge-action--right[data-active="true"]{
  transform:translateY(-50%) translateX(2px);
}
.hero__edge-action[data-ready="true"]{
  color:#fff;
  border-color:rgba(255,255,255,.56);
}
.hero__edge-action[data-kind="add"]{
  background:linear-gradient(180deg, rgba(56,92,163,.56), rgba(26,45,84,.3));
  border-color:rgba(164,194,255,.34);
}
.hero__edge-action[data-kind="navigate"]{
  background:linear-gradient(180deg, rgba(21,33,55,.52), rgba(11,18,31,.24));
  border-color:rgba(199,210,254,.24);
}
.hero__edge-action[data-kind="blocked"]{
  background:linear-gradient(180deg, rgba(88,60,20,.42), rgba(40,26,8,.2));
  border-color:rgba(255,208,143,.24);
  color:#f5ddb2;
}
.hero__edge-action:focus-visible{
  outline:2px solid rgba(199,210,254,.9);
  outline-offset:2px;
}
.hero__edge-symbol{
  display:block;
  font-size:1.18rem;
  line-height:1;
  font-weight:800;
}
.hero__edge-caption{
  display:block;
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  user-select:none;
}
.hero__edge-action--left .hero__edge-caption{
  transform:rotate(180deg);
}
.hero__ambient{
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:inherit;
  pointer-events:none;
  z-index:0;
}
.hero__media{
  position:absolute;
  inset:0;
  z-index:0;
  opacity:0;
  transition:opacity .36s ease;
}
.hero__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(5,9,14,.08), rgba(4,8,13,.26) 52%, rgba(2,5,9,.52)),
    radial-gradient(90% 90% at 50% 0%, transparent, rgba(0,0,0,.18));
}
.hero__media-poster,
.hero__media-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.04);
  transition:opacity .36s ease;
}
.hero__media-poster{
  filter:saturate(1.04) contrast(1.02) brightness(.82);
}
.hero__media-video{
  filter:saturate(1.08) contrast(1.05) brightness(.74);
}
.hero__media[data-state="ready"]{
  opacity:.76;
}
.hero__media[data-mode="image"] .hero__media-poster{
  opacity:1;
}
.hero__media[data-mode="video"] .hero__media-poster{
  opacity:.28;
}
.hero__media[data-mode="video"] .hero__media-video{
  opacity:1;
}
.hero__sky,
.hero__orb,
.hero__veil,
.hero__horizon,
.hero__ambient::before,
.hero__ambient::after{
  position:absolute;
  will-change:transform,opacity,filter,background-position;
}
.hero__sky,
.hero__veil{
  inset:-12%;
}
.hero__horizon{
  inset:0;
}
.hero__orb{
  top:1.25rem;
  right:1.8rem;
  width:8.5rem;
  height:8.5rem;
  border-radius:999px;
  opacity:.65;
  filter:blur(2px);
  transform:translate3d(0,0,0);
}
.hero__ambient::before,
.hero__ambient::after{
  content:"";
  inset:-20%;
  will-change:transform,opacity,filter,background-position;
}
.hero__sky{
  background:
    radial-gradient(140% 100% at 50% 0%, rgba(255,255,255,.16), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 55%);
}
.hero__ambient::before{
  background:
    radial-gradient(52% 28% at 18% 34%, rgba(255,255,255,.18), transparent 68%),
    radial-gradient(48% 24% at 62% 28%, rgba(255,255,255,.16), transparent 70%),
    radial-gradient(56% 30% at 85% 42%, rgba(255,255,255,.14), transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 56%);
  filter:blur(26px);
  opacity:.72;
  transform:translate3d(0,0,0) scale(1.1);
}
.hero__ambient::after{
  background:
    linear-gradient(110deg, transparent 30%, rgba(255,255,255,.16) 48%, transparent 66%),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 38%, rgba(0,0,0,.1));
  filter:blur(18px);
  opacity:.55;
  transform:translate3d(0,0,0);
}
.hero__veil{
  background:
    radial-gradient(120% 75% at 50% 100%, rgba(0,0,0,.28), transparent 54%),
    linear-gradient(180deg, transparent 10%, rgba(8,14,24,.08) 60%, rgba(3,5,8,.32) 100%);
  opacity:.9;
}
.hero__horizon{
  inset:auto -8% -22% -8%;
  height:44%;
  border-radius:50% 50% 0 0;
  background:
    radial-gradient(60% 100% at 50% 22%, rgba(255,255,255,.18), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.42));
  filter:blur(18px);
  opacity:.58;
  transform:translateY(10%);
}
.hero__stars{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  mix-blend-mode:screen;
}
.hero__glass{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.12), transparent 38%, rgba(255,255,255,.03) 72%, transparent);
  mix-blend-mode:overlay;
  opacity:.3;
}
.hero__eyebrow{
  margin:0 0 .45rem;
  color:var(--text-dim);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.hero__title{margin:0;font-size:clamp(1.4rem,2.5vw,2rem)}
.hero__meta-row{
  margin-top:.7rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  flex-wrap:wrap;
}
.hero__meta{margin:0;color:var(--text-dim)}
.hero__gesture-hint{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:center;
  min-height:2rem;
  max-width:min(100%, 38rem);
  margin:0 auto .95rem;
  padding:.34rem .78rem;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.14);
  background:rgba(10,15,24,.24);
  color:var(--text-dim);
  font-size:.77rem;
  line-height:1.3;
  letter-spacing:.01em;
  backdrop-filter:blur(10px);
  transition:transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease, opacity .18s ease;
  pointer-events:none;
}
.hero__gesture-hint[hidden]{
  display:none;
}
.hero[data-gesture-ready="true"] .hero__gesture-hint{
  color:var(--text);
  transform:translateY(-1px);
}
.hero[data-gesture-kind="add"] .hero__gesture-hint{
  border-color:rgba(168,198,255,.42);
  background:rgba(61,97,173,.26);
}
.hero[data-gesture-kind="navigate"] .hero__gesture-hint{
  border-color:rgba(199,210,254,.34);
  background:rgba(34,50,77,.26);
}
.hero[data-gesture-kind="blocked"] .hero__gesture-hint{
  border-color:rgba(255,208,143,.3);
  background:rgba(89,60,17,.24);
  color:#fde7bc;
}
.at-glance-wrap{
  margin-top:.75rem;
  border-top:2px solid rgba(255,255,255,.1);
  padding-top:.7rem;
}
.at-glance-title{
  margin:0 0 .45rem;
  text-align:left;
  font-size:.9rem;
  display:inline-flex;
  align-items:center;
  padding:.28rem .55rem;
  border-radius:999px;
  background:rgba(5,12,22,.34);
  color:rgba(244,247,255,.92);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  backdrop-filter:blur(10px) saturate(118%);
}
.at-glance-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.5rem;
}
.at-glance-item{
  border:2px solid rgba(255,255,255,.12);
  border-radius:6px;
  background:rgba(255,255,255,.03);
  padding:.45rem .5rem;
}
.at-glance-k{
  display:block;
  color:var(--text-dim);
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.at-glance-v{
  display:block;
  margin-top:.1rem;
  font-weight:700;
}
body[data-experiment="hero-ambient"] .hero{
  background:
    radial-gradient(120% 130% at 50% 12%, #17253c 0%, #0a111d 54%, #04070d 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 30px 90px rgba(0,0,0,.34);
}
body[data-experiment="hero-ambient"] .hero[data-has-media="true"] .hero__glass{
  opacity:.48;
}
body[data-experiment="hero-ambient"] .hero[data-has-media="true"] .hero__sky,
body[data-experiment="hero-ambient"] .hero[data-has-media="true"] .hero__orb,
body[data-experiment="hero-ambient"] .hero[data-has-media="true"] .hero__horizon,
body[data-experiment="hero-ambient"] .hero[data-has-media="true"] .hero__stars,
body[data-experiment="hero-ambient"] .hero[data-has-media="true"] .hero__glass{
  display:none;
}
body[data-experiment="hero-ambient"] .hero[data-has-media="true"] .hero__ambient::before,
body[data-experiment="hero-ambient"] .hero[data-has-media="true"] .hero__ambient::after{
  content:none;
}
body[data-experiment="hero-ambient"] .hero[data-has-media="true"] .hero__veil{
  inset:0;
  background:
    linear-gradient(180deg, rgba(3,7,12,.18), rgba(4,7,12,.18) 26%, rgba(3,6,10,.34) 64%, rgba(2,4,8,.56) 100%);
  opacity:1;
}
body[data-experiment="hero-ambient"] .hero[data-has-media="true"][data-scene^="day-"] .hero__media-poster,
body[data-experiment="hero-ambient"] .hero[data-has-media="true"][data-scene^="day-"] .hero__media-video{
  filter:saturate(1.04) contrast(1.02) brightness(.82);
}
body[data-experiment="hero-ambient"] .hero[data-has-media="true"][data-scene^="night-"] .hero__media-poster,
body[data-experiment="hero-ambient"] .hero[data-has-media="true"][data-scene^="night-"] .hero__media-video{
  filter:saturate(.92) contrast(1.08) brightness(.56);
}
body[data-experiment="hero-ambient"] .hero[data-has-media="true"][data-scene$="fog"] .hero__media{
  opacity:.64;
}
body[data-experiment="hero-ambient"] .hero[data-has-media="true"][data-scene$="snow"] .hero__media-poster,
body[data-experiment="hero-ambient"] .hero[data-has-media="true"][data-scene$="snow"] .hero__media-video{
  filter:saturate(.82) contrast(1.02) brightness(.68);
}
body[data-experiment="hero-ambient"] .hero__eyebrow{
  color:rgba(241,246,255,.72);
}
body[data-experiment="hero-ambient"] .hero__title{
  max-width:16ch;
  margin-inline:auto;
  text-shadow:0 8px 34px rgba(0,0,0,.28);
}
body[data-experiment="hero-ambient"] .hero__meta,
body[data-experiment="hero-ambient"] .at-glance-k{
  color:rgba(234,240,255,.76);
}
body[data-experiment="hero-ambient"] .at-glance-wrap{
  border-top:2px solid rgba(255,255,255,.12);
}
body[data-experiment="hero-ambient"] .at-glance-item{
  background:rgba(9,14,24,.24);
  border-color:rgba(255,255,255,.12);
  backdrop-filter:blur(14px) saturate(118%);
}
body[data-experiment="hero-ambient"] .hero__ambient::before{
  animation:hazeDrift 13s linear infinite;
}
body[data-experiment="hero-ambient"] .hero__ambient::after{
  animation:cloudsAndSweep 9s linear infinite;
}
body[data-experiment="hero-ambient"] .hero__orb{
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.96), rgba(255,255,255,.58) 26%, rgba(255,255,255,.08) 62%, transparent 76%);
  box-shadow:0 0 80px rgba(255,255,255,.22);
}
body[data-experiment="hero-ambient"] .hero[data-scene="day-clear"]{
  background:
    radial-gradient(100% 100% at 72% 16%, rgba(255,243,179,.92), transparent 24%),
    radial-gradient(150% 140% at 50% 8%, #eff8ff 0%, #90ceff 34%, #4583d4 100%);
}
body[data-experiment="hero-ambient"] .hero[data-scene="day-clear"] .hero__sky{
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.34), transparent 52%),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 55%);
  animation:skyGlow 12s ease-in-out infinite;
}
body[data-experiment="hero-ambient"] .hero[data-scene="day-clear"] .hero__ambient::before{
  opacity:.58;
  filter:blur(34px);
}
body[data-experiment="hero-ambient"] .hero[data-scene="day-clear"] .hero__ambient::after{
  opacity:.38;
}
body[data-experiment="hero-ambient"] .hero[data-scene="day-clear"] .hero__orb{
  opacity:.98;
  box-shadow:0 0 120px rgba(255,218,99,.55);
  animation:sunPulse 8s ease-in-out infinite;
}
body[data-experiment="hero-ambient"] .hero[data-scene="day-clear"] .hero__horizon{
  background:
    radial-gradient(60% 100% at 50% 24%, rgba(255,218,126,.42), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(55,108,182,.36));
  opacity:.72;
  animation:horizonBreath 9s ease-in-out infinite;
}
body[data-experiment="hero-ambient"] .hero[data-scene="day-clouds"]{
  background:
    radial-gradient(130% 120% at 50% 10%, #edf3f7 0%, #a8bacd 34%, #5a6e86 100%);
}
body[data-experiment="hero-ambient"] .hero[data-scene="day-clouds"] .hero__sky{
  background:
    radial-gradient(36% 16% at 18% 24%, rgba(255,255,255,.58), transparent 70%),
    radial-gradient(42% 18% at 56% 20%, rgba(255,255,255,.44), transparent 72%),
    radial-gradient(34% 15% at 88% 28%, rgba(255,255,255,.34), transparent 74%),
    linear-gradient(180deg, rgba(255,255,255,.16), transparent 58%);
  animation:cloudBank 18s linear infinite;
}
body[data-experiment="hero-ambient"] .hero[data-scene="day-clouds"] .hero__ambient::before{
  opacity:.92;
  filter:blur(30px);
}
body[data-experiment="hero-ambient"] .hero[data-scene="day-clouds"] .hero__ambient::after{
  opacity:.76;
  filter:blur(20px);
}
body[data-experiment="hero-ambient"] .hero[data-scene="day-clouds"] .hero__orb{
  opacity:.35;
  transform:translate(-16%, 10%) scale(.92);
}
body[data-experiment="hero-ambient"] .hero[data-scene="night-clear"]{
  background:
    radial-gradient(100% 90% at 78% 14%, rgba(232,242,255,.2), transparent 18%),
    radial-gradient(150% 130% at 50% 10%, #24345d 0%, #0b1430 42%, #03050b 100%);
}
body[data-experiment="hero-ambient"] .hero[data-scene="night-clear"] .hero__stars{
  opacity:.72;
}
body[data-experiment="hero-ambient"] .hero[data-scene="night-clear"] .hero__orb{
  opacity:.78;
  transform:translate(-8%, 2%) scale(.74);
  background:
    radial-gradient(circle at 40% 40%, rgba(244,248,255,.95), rgba(205,218,248,.76) 36%, rgba(172,192,235,.18) 66%, transparent 78%);
  box-shadow:0 0 72px rgba(205,218,248,.28);
}
body[data-experiment="hero-ambient"] .hero[data-scene="night-clouds"]{
  background:radial-gradient(145% 130% at 50% 10%, #273449 0%, #0d121d 46%, #04060b 100%);
}
body[data-experiment="hero-ambient"] .hero[data-scene="night-clouds"] .hero__stars{
  opacity:.24;
}
body[data-experiment="hero-ambient"] .hero[data-scene="night-clouds"] .hero__sky{
  background:
    radial-gradient(34% 14% at 20% 22%, rgba(255,255,255,.18), transparent 72%),
    radial-gradient(40% 18% at 60% 18%, rgba(255,255,255,.14), transparent 72%),
    radial-gradient(36% 14% at 86% 26%, rgba(255,255,255,.12), transparent 74%),
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 62%);
  animation:cloudBank 22s linear infinite;
}
body[data-experiment="hero-ambient"] .hero[data-scene="night-clouds"] .hero__orb{
  opacity:.26;
  transform:translate(-18%, 10%) scale(.68);
}
body[data-experiment="hero-ambient"] .hero[data-scene$="rain"]{
  background:
    radial-gradient(135% 115% at 50% 6%, #879cb0 0%, #495b6f 34%, #15202d 100%);
}
body[data-experiment="hero-ambient"] .hero[data-scene$="rain"] .hero__ambient::before{
  opacity:.86;
  filter:blur(30px);
}
body[data-experiment="hero-ambient"] .hero[data-scene$="rain"] .hero__ambient::after{
  opacity:.8;
}
body[data-experiment="hero-ambient"] .hero[data-scene$="rain"] .hero__ambient{
  background-image:
    linear-gradient(118deg, transparent 0 43%, rgba(255,255,255,.2) 46%, transparent 49%, transparent 52%, rgba(255,255,255,.12) 56%, transparent 60%),
    linear-gradient(transparent, rgba(8,18,30,.28));
  background-size:180px 180px, 100% 100%;
  animation:rainDrift 1.1s linear infinite;
}
body[data-experiment="hero-ambient"] .hero[data-scene$="rain"] .hero__sky{
  background:
    radial-gradient(38% 16% at 18% 16%, rgba(255,255,255,.16), transparent 74%),
    radial-gradient(42% 18% at 56% 14%, rgba(255,255,255,.13), transparent 74%),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 60%);
  animation:cloudBank 16s linear infinite;
}
body[data-experiment="hero-ambient"] .hero[data-scene$="rain"] .hero__veil{
  background:
    linear-gradient(118deg, transparent 0 40%, rgba(255,255,255,.08) 44%, transparent 48%, transparent 52%, rgba(255,255,255,.06) 56%, transparent 60%),
    linear-gradient(180deg, rgba(16,24,38,.1), rgba(4,9,15,.34));
  background-size:240px 240px, 100% 100%;
  opacity:.72;
  animation:rainMist 3.2s linear infinite;
}
body[data-experiment="hero-ambient"] .hero[data-scene$="rain"] .hero__orb{
  opacity:.16;
  transform:translate(-10%, 2%) scale(.94);
}
body[data-experiment="hero-ambient"] .hero[data-scene$="rain"] .hero__horizon{
  opacity:.8;
  background:
    radial-gradient(60% 100% at 50% 24%, rgba(156,210,255,.15), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(4,10,16,.66));
}
body[data-experiment="hero-ambient"] .hero[data-scene$="snow"]{
  background:
    radial-gradient(130% 110% at 50% 10%, #f2f7fb 0%, #bacadc 36%, #607288 100%);
}
body[data-experiment="hero-ambient"] .hero[data-scene$="snow"] .hero__ambient{
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.98) 0 1.7px, transparent 1.9px),
    radial-gradient(circle at 42% 38%, rgba(255,255,255,.92) 0 2px, transparent 2.3px),
    radial-gradient(circle at 71% 28%, rgba(255,255,255,.88) 0 1.5px, transparent 1.8px),
    radial-gradient(circle at 84% 58%, rgba(255,255,255,.92) 0 2.2px, transparent 2.5px),
    linear-gradient(transparent, rgba(255,255,255,.05));
  background-size:190px 190px, 230px 230px, 200px 200px, 240px 240px, 100% 100%;
  animation:snowDrift 10s linear infinite;
}
body[data-experiment="hero-ambient"] .hero[data-scene$="snow"] .hero__veil{
  background:
    radial-gradient(circle at 18% 26%, rgba(255,255,255,.22) 0 2px, transparent 2.2px),
    radial-gradient(circle at 48% 12%, rgba(255,255,255,.18) 0 1.8px, transparent 2px),
    radial-gradient(circle at 84% 32%, rgba(255,255,255,.14) 0 1.6px, transparent 1.9px),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(9,14,22,.18));
  background-size:260px 260px, 220px 220px, 280px 280px, 100% 100%;
  opacity:.6;
  animation:snowSwirl 14s linear infinite;
}
body[data-experiment="hero-ambient"] .hero[data-scene$="snow"] .hero__orb{
  opacity:.34;
  transform:translate(-12%, 8%) scale(.88);
}
body[data-experiment="hero-ambient"] .hero[data-scene$="fog"]{
  background:radial-gradient(140% 120% at 50% 8%, #d6dde6 0%, #9ca7b2 34%, #5c6670 100%);
}
body[data-experiment="hero-ambient"] .hero[data-scene$="fog"] .hero__sky{
  background:
    radial-gradient(50% 18% at 20% 24%, rgba(255,255,255,.28), transparent 76%),
    radial-gradient(58% 20% at 66% 22%, rgba(255,255,255,.22), transparent 76%),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 62%);
  animation:fogRoll 18s ease-in-out infinite;
}
body[data-experiment="hero-ambient"] .hero[data-scene$="fog"] .hero__ambient::before{
  opacity:1;
  filter:blur(38px);
}
body[data-experiment="hero-ambient"] .hero[data-scene$="fog"] .hero__ambient::after{
  opacity:.9;
  filter:blur(30px);
}
body[data-experiment="hero-ambient"] .hero[data-scene$="fog"] .hero__veil{
  background:
    radial-gradient(55% 22% at 22% 44%, rgba(255,255,255,.22), transparent 76%),
    radial-gradient(58% 24% at 70% 52%, rgba(255,255,255,.18), transparent 76%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(40,48,56,.18));
  opacity:.74;
  animation:fogRoll 12s ease-in-out infinite reverse;
}
body[data-experiment="hero-ambient"] .hero[data-scene$="fog"] .hero__orb{
  opacity:.12;
}
body[data-experiment="hero-ambient"] .hero[data-scene$="storm"]{
  background:
    radial-gradient(120% 100% at 72% 8%, rgba(177,202,255,.18), transparent 18%),
    radial-gradient(145% 120% at 50% 8%, #6b7887 0%, #394452 34%, #091017 100%);
}
body[data-experiment="hero-ambient"] .hero[data-scene$="storm"] .hero__ambient{
  background-image:
    linear-gradient(118deg, transparent 0 42%, rgba(255,255,255,.22) 46%, transparent 50%, transparent 54%, rgba(255,255,255,.14) 58%, transparent 62%),
    radial-gradient(90% 110% at 50% 0%, rgba(255,255,255,.06), transparent 70%);
  background-size:180px 180px, 100% 100%;
  animation:rainDrift .92s linear infinite, stormPulse 5.8s linear infinite;
}
body[data-experiment="hero-ambient"] .hero[data-scene$="storm"] .hero__sky{
  background:
    radial-gradient(46% 18% at 20% 18%, rgba(255,255,255,.14), transparent 74%),
    radial-gradient(50% 22% at 70% 16%, rgba(170,199,255,.12), transparent 76%),
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 62%);
  animation:cloudBank 14s linear infinite, stormSkyFlash 6.2s linear infinite;
}
body[data-experiment="hero-ambient"] .hero[data-scene$="storm"] .hero__veil{
  background:
    linear-gradient(120deg, transparent 0 44%, rgba(255,255,255,.12) 48%, transparent 52%, transparent 58%, rgba(149,194,255,.08) 62%, transparent 66%),
    linear-gradient(180deg, rgba(9,16,22,.08), rgba(3,7,11,.32));
  background-size:260px 260px, 100% 100%;
  opacity:.56;
  animation:rainMist 2.2s linear infinite;
}
body[data-experiment="hero-ambient"] .hero[data-scene$="storm"] .hero__orb{
  opacity:.08;
}
body[data-experiment="hero-ambient"] .hero[data-intensity="high"] .hero__ambient{
  animation-duration:.82s, 5.2s;
}
body[data-experiment="hero-ambient"] .hero[data-intensity="high"] .hero__ambient::before{
  opacity:.96;
}
body[data-experiment="hero-ambient"] .hero[data-intensity="medium"] .hero__horizon{
  opacity:.72;
}
body[data-experiment="hero-ambient"] .hero[data-scene^="day-"] .hero__title,
body[data-experiment="hero-ambient"] .hero[data-scene^="day-"] .hero__meta,
body[data-experiment="hero-ambient"] .hero[data-scene^="day-"] .hero__eyebrow,
body[data-experiment="hero-ambient"] .hero[data-scene^="day-"] .at-glance-k{
  color:rgba(15,27,46,.78);
}
body[data-experiment="hero-ambient"] .hero[data-scene^="day-"] .at-glance-item{
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.22);
}
body[data-experiment="hero-ambient"] .hero[data-scene^="day-"] .at-glance-title{
  background:rgba(255,255,255,.46);
  color:#102133;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.34);
}
body[data-experiment="hero-ambient"] .hero[data-scene^="day-"] .at-glance-v{
  color:#102133;
}
body[data-experiment="hero-ambient"] .hero[data-scene="day-rain"],
body[data-experiment="hero-ambient"] .hero[data-scene="day-storm"],
body[data-experiment="hero-ambient"] .hero[data-scene="day-fog"]{
  color:#f5f6f7;
}
body[data-experiment="hero-ambient"] .hero[data-scene="day-rain"] .hero__title,
body[data-experiment="hero-ambient"] .hero[data-scene="day-storm"] .hero__title,
body[data-experiment="hero-ambient"] .hero[data-scene="day-fog"] .hero__title,
body[data-experiment="hero-ambient"] .hero[data-scene="day-rain"] .hero__meta,
body[data-experiment="hero-ambient"] .hero[data-scene="day-storm"] .hero__meta,
body[data-experiment="hero-ambient"] .hero[data-scene="day-fog"] .hero__meta,
body[data-experiment="hero-ambient"] .hero[data-scene="day-rain"] .hero__eyebrow,
body[data-experiment="hero-ambient"] .hero[data-scene="day-storm"] .hero__eyebrow,
body[data-experiment="hero-ambient"] .hero[data-scene="day-fog"] .hero__eyebrow,
body[data-experiment="hero-ambient"] .hero[data-scene="day-rain"] .at-glance-k,
body[data-experiment="hero-ambient"] .hero[data-scene="day-storm"] .at-glance-k,
body[data-experiment="hero-ambient"] .hero[data-scene="day-fog"] .at-glance-k{
  color:rgba(236,241,247,.82);
}
body[data-experiment="hero-ambient"] .hero[data-scene="day-rain"] .at-glance-title,
body[data-experiment="hero-ambient"] .hero[data-scene="day-storm"] .at-glance-title,
body[data-experiment="hero-ambient"] .hero[data-scene="day-fog"] .at-glance-title{
  background:rgba(8,16,26,.34);
  color:rgba(245,247,252,.96);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
body[data-experiment="hero-ambient"] .hero[data-scene="day-rain"] .at-glance-item,
body[data-experiment="hero-ambient"] .hero[data-scene="day-storm"] .at-glance-item,
body[data-experiment="hero-ambient"] .hero[data-scene="day-fog"] .at-glance-item{
  background:rgba(10,18,28,.22);
  border-color:rgba(255,255,255,.14);
}
body[data-experiment="hero-ambient"] .hero[data-has-media="true"][data-scene]{
  background:
    linear-gradient(180deg, rgba(4,7,11,.96), rgba(3,6,10,.88));
  color:#f5f6f7;
}
body[data-experiment="hero-ambient"] .hero[data-has-media="true"] .hero__ambient{
  background:none;
  animation:none;
}
body[data-experiment="hero-ambient"] .hero[data-has-media="true"] .hero__veil{
  animation:none;
  background:
    linear-gradient(180deg, rgba(5,9,14,.2), rgba(4,8,12,.18) 24%, rgba(3,6,10,.36) 66%, rgba(2,4,7,.62) 100%);
}
body[data-experiment="hero-ambient"] .hero[data-has-media="true"] .hero__title,
body[data-experiment="hero-ambient"] .hero[data-has-media="true"] .hero__meta,
body[data-experiment="hero-ambient"] .hero[data-has-media="true"] .hero__eyebrow,
body[data-experiment="hero-ambient"] .hero[data-has-media="true"] .at-glance-k,
body[data-experiment="hero-ambient"] .hero[data-has-media="true"] .at-glance-v{
  color:rgba(244,247,255,.94);
}
body[data-experiment="hero-ambient"] .hero[data-has-media="true"] .hero__title{
  text-shadow:0 8px 30px rgba(0,0,0,.34);
}
body[data-experiment="hero-ambient"] .hero[data-has-media="true"] .at-glance-title{
  background:rgba(7,14,24,.48);
  color:rgba(244,247,255,.96);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
body[data-experiment="hero-ambient"] .hero[data-has-media="true"] .at-glance-item{
  background:rgba(7,13,22,.34);
  border-color:rgba(255,255,255,.14);
  backdrop-filter:blur(14px) saturate(118%);
}
@keyframes hazeDrift{
  0%{transform:translate3d(-4%, -2%, 0) scale(1.08)}
  50%{transform:translate3d(3%, 2%, 0) scale(1.14)}
  100%{transform:translate3d(-4%, -2%, 0) scale(1.08)}
}
@keyframes sunPulse{
  0%,100%{transform:translate3d(0,0,0) scale(1);filter:blur(2px) brightness(1)}
  50%{transform:translate3d(-2%, 1%, 0) scale(1.07);filter:blur(3px) brightness(1.08)}
}
@keyframes skyGlow{
  0%,100%{opacity:.92;transform:scale(1)}
  50%{opacity:1;transform:scale(1.03)}
}
@keyframes horizonBreath{
  0%,100%{transform:translateY(10%) scaleX(1);opacity:.68}
  50%{transform:translateY(6%) scaleX(1.04);opacity:.82}
}
@keyframes cloudsAndSweep{
  0%{transform:translate3d(-4%, 0, 0);background-position:-120% 0, 0 0}
  55%{transform:translate3d(3%, 1%, 0);background-position:120% 0, 0 0}
  100%{transform:translate3d(-4%, 0, 0);background-position:-120% 0, 0 0}
}
@keyframes cloudBank{
  0%{transform:translate3d(-6%, 0, 0) scale(1.02)}
  50%{transform:translate3d(4%, 1%, 0) scale(1.06)}
  100%{transform:translate3d(-6%, 0, 0) scale(1.02)}
}
@keyframes rainDrift{
  0%{background-position:0 0, 0 0}
  100%{background-position:68px 220px, 0 0}
}
@keyframes rainMist{
  0%{background-position:0 0, 0 0;opacity:.5}
  50%{background-position:40px 90px, 0 0;opacity:.72}
  100%{background-position:80px 180px, 0 0;opacity:.5}
}
@keyframes snowDrift{
  0%{background-position:0 0, 0 0, 0 0, 0 0, 0 0}
  100%{background-position:48px 180px, -36px 130px, 30px 150px, -22px 170px, 0 0}
}
@keyframes snowSwirl{
  0%{background-position:0 0, 0 0, 0 0, 0 0}
  50%{background-position:36px 70px, -24px 54px, 22px 62px, 0 0}
  100%{background-position:72px 140px, -48px 108px, 44px 124px, 0 0}
}
@keyframes fogRoll{
  0%,100%{transform:translate3d(-4%, 0, 0) scale(1.02);opacity:.62}
  50%{transform:translate3d(3%, 1%, 0) scale(1.08);opacity:.84}
}
@keyframes stormPulse{
  0%,84%,100%{filter:none}
  85%{filter:brightness(1.32)}
  86%{filter:brightness(.96)}
  87%{filter:brightness(1.48)}
  88%{filter:brightness(1.02)}
}
@keyframes stormSkyFlash{
  0%,82%,100%{opacity:.32}
  84%{opacity:.78}
  85%{opacity:.26}
  86%{opacity:.94}
  87%{opacity:.34}
}
.refresh-btn{
  min-height:36px;
  padding:0 .65rem;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
}
.refresh-icon{
  width:16px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.section-title{margin:0 0 .7rem;font-size:1rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em}
.hourly-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.7rem;
  margin-bottom:.28rem;
}
.hourly-toggle{
  min-height:34px;
  padding:.35rem .65rem;
  font-size:.8rem;
}
.hourly-summary{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.4rem;
  margin:.35rem 0 .55rem;
}
.hourly-summary-item{
  border:2px solid rgba(255,255,255,.1);
  border-radius:6px;
  background:rgba(255,255,255,.03);
  padding:.38rem .5rem;
}
.hourly-summary-k{
  font-size:.72rem;
  color:var(--text-dim);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.hourly-summary-v{
  margin-top:.12rem;
  font-size:.86rem;
  font-weight:700;
}
.hourly-row{
  display:flex;
  gap:.55rem;
  overflow-x:auto;
  padding-bottom:.25rem;
}
.hourly-scroll-wrap{
  position:relative;
}
.hourly-scroll-hint{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  appearance:none;
  -webkit-appearance:none;
  font-size:.78rem;
  color:var(--text-dim);
  background:var(--panel);
  border:2px solid var(--border);
  border-radius:999px;
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  opacity:.9;
  transition:opacity .2s ease;
  cursor:pointer;
}
.hourly-scroll-hint.hidden{
  opacity:0;
  pointer-events:none;
}
.hourly-scroll-hint.left{left:-8px}
.hourly-scroll-hint.right{right:-8px}
.hourly-scroll-hint:focus-visible{
  outline:2px solid rgba(199,210,254,.8);
  outline-offset:2px;
}
.hourly-row.collapsed{display:none}
.hourly-row::-webkit-scrollbar{height:8px}
.hourly-row::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:999px}
.hourly-item{
  min-width:84px;
  border:2px solid rgba(255,255,255,.12);
  border-radius:6px;
  background:rgba(255,255,255,.03);
  padding:.5rem .45rem;
  text-align:center;
}
.hourly-time{font-size:.78rem;color:var(--text-dim)}
.hourly-icon img{
  width:30px;
  height:30px;
  margin:.2rem auto;
  display:block;
}
.hourly-temp{font-weight:700;font-size:.92rem}
.hourly-rain{font-size:.75rem;color:var(--text-dim)}

.moon-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.7rem;
  margin-bottom:.28rem;
}
.moon-toggle{
  min-height:34px;
  padding:.35rem .65rem;
  font-size:.8rem;
}
.moon-row{
  display:flex;
  gap:.55rem;
  overflow-x:auto;
  padding-bottom:.25rem;
}
.moon-scroll-wrap{position:relative}
.moon-row.collapsed{display:none}
.moon-row::-webkit-scrollbar{height:8px}
.moon-row::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:999px}
.moon-item{
  min-width:170px;
  border:2px solid rgba(255,255,255,.12);
  border-radius:6px;
  background:rgba(255,255,255,.03);
  padding:.55rem .55rem;
  text-align:left;
}
.moon-date{
  font-size:.83rem;
  font-weight:700;
  color:var(--accent);
  margin-bottom:.2rem;
}
.moon-art{
  width:52px;
  height:52px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);
  display:grid;
  place-items:center;
  font-size:1.45rem;
  margin:.12rem 0 .35rem;
}
.moon-k{font-size:.78rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em}
.moon-v{margin-top:.18rem;font-weight:800;font-size:1.02rem}
.moon-sub{margin-top:.15rem;font-size:.78rem;color:var(--text-dim)}
.moon-sub-strong{
  color:var(--text);
  font-size:.86rem;
  font-weight:700;
  margin-top:.08rem;
  margin-bottom:.12rem;
}

.extended-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.7rem;
  margin-bottom:.45rem;
}
.extended-toggle{
  min-height:34px;
  padding:.35rem .65rem;
  font-size:.8rem;
}
.extended-hint{
  margin:.15rem 0 .2rem;
  color:var(--text-dim);
  font-size:.84rem;
}
.extended-grid{
  margin-top:.25rem;
}
.extended-grid.collapsed{
  display:none;
}
.extended-day-tile{
  cursor:default;
}
.extended-day-tile:hover{
  transform:none;
}
.extended-empty{
  margin:.35rem 0 0;
  grid-column:1 / -1;
  color:var(--text-dim);
  font-size:.86rem;
}

.forecast-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.7rem;
  margin-bottom:.35rem;
}
.forecast-scroll-wrap{
  position:relative;
}
.forecast-scroll-hint{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  appearance:none;
  -webkit-appearance:none;
  font-size:.78rem;
  color:var(--text-dim);
  background:var(--panel);
  border:2px solid var(--border);
  border-radius:999px;
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  opacity:.9;
  transition:opacity .2s ease;
  cursor:pointer;
}
.forecast-scroll-hint.hidden{
  opacity:0;
  pointer-events:none;
}
.forecast-scroll-hint.left{left:-8px}
.forecast-scroll-hint.right{right:-8px}
.forecast-scroll-hint:focus-visible{
  outline:2px solid rgba(199,210,254,.8);
  outline-offset:2px;
}
.forecast-grid{
  display:flex;
  gap:.65rem;
  overflow-x:auto;
  padding-bottom:.25rem;
}
.forecast-grid::-webkit-scrollbar{height:8px}
.forecast-grid::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:999px}
.day-tile{
  flex:0 0 min(230px, calc(100vw - 4.2rem));
  appearance:none;
  text-align:left;
  color:inherit;
  font:inherit;
  border:2px solid rgba(255,255,255,.12);
  border-radius:6px;
  background:rgba(255,255,255,.03);
  padding:.7rem;
  cursor:pointer;
  transition:border-color .18s ease, background .18s ease, transform .15s ease;
}
.day-tile:hover{
  border-color:rgba(255,255,255,.26);
  background:rgba(255,255,255,.06);
  transform:translateY(-1px);
}
.day-tile.active{
  border-color:rgba(199,210,254,.6);
  background:rgba(199,210,254,.12);
}
.day-name{font-weight:700;color:var(--accent)}
.day-date{
  margin-top:.05rem;
  font-size:.78rem;
  color:var(--text-dim);
}
.day-emoji{line-height:1.1;margin:.25rem 0 .3rem}
.day-emoji img{
  width:52px;
  height:52px;
  display:block;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.35));
}
.day-temp{font-size:1.05rem;font-weight:700}
.day-detail{font-size:.86rem;color:var(--text-dim);margin-top:.2rem}

.narrative p,#narrativeText p{margin:.45rem 0 0;color:var(--text);font-size:1.01rem}
.narrative-block{
  padding:.55rem .6rem;
  border:2px solid rgba(255,255,255,.1);
  border-radius:6px;
  background:rgba(255,255,255,.02);
  margin-top:.55rem;
}
.narrative-block h3{
  margin:0;
  font-size:.78rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--text-dim);
}

.definitions .def-list{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  justify-content:center;
}
.definitions .def-panel{
  border:0;
}
.definitions .def-panel summary{
  cursor:pointer;
  list-style:none;
}
.definitions .def-panel summary::-webkit-details-marker{display:none}
.definitions .def-item{
  display:inline-flex;
  align-items:center;
  padding:.45rem .75rem;
  border:2px solid var(--border);
  border-radius:999px;
  background:rgba(255,255,255,.02);
  color:var(--text);
  font-size:1.03rem;
  font-weight:600;
  text-decoration:none;
}
.definitions .def-item:hover{
  color:var(--accent);
  border-color:rgba(199,210,254,.4);
  text-decoration:none;
}

.fineprint{
  margin:1rem auto 2rem;
  max-width:1100px;
  border-top:2px solid var(--line);
  padding:1rem 1.5rem 0;
  text-align:center;
  color:var(--text-dim);
  font-size:.8rem;
  position:relative;
}
.fineprint-sources{
  display:block;
  max-width:820px;
  margin:0 auto .7rem;
  line-height:1.45;
}
.hero-media-attribution{
  display:block;
  margin-top:.35rem;
  font-size:.74rem;
}
.footer-about-row{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:.6rem;
  flex-wrap:wrap;
  margin-top:.25rem;
}
.footer-refresh{
  font-size:.78rem;
  padding:.3rem .5rem;
  border:2px solid var(--line);
  border-radius:.3rem;
  background:rgba(255,255,255,.04);
}
.footer-refresh:hover{color:var(--text);border-color:var(--border)}
.footer-ascii{
  margin-left:0;
  border:0;
  background:transparent;
  color:var(--text-dim);
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:.72rem;
  letter-spacing:.04em;
  text-transform:lowercase;
  cursor:pointer;
}
.footer-ascii:hover{color:var(--text)}
.fineprint a{color:inherit;text-decoration:underline dotted}
.about-panel{
  margin:.65rem auto 0;
  max-width:560px;
  text-align:left;
  border:2px solid var(--line);
  border-radius:.3rem;
  background:rgba(255,255,255,.02);
  padding:.45rem .6rem;
}
.about-panel summary{
  cursor:pointer;
  font-weight:700;
  color:var(--text);
  list-style:none;
}
.about-panel summary::-webkit-details-marker{display:none}
.about-panel p{
  margin:.5rem 0 0;
  color:var(--text-dim);
  font-size:.76rem;
}
.footer-controls{
  display:flex;
  align-items:center;
  gap:.45rem;
  flex-wrap:wrap;
  justify-content:center;
  max-width:100%;
  margin-top:0;
}
.status-badge{
  border:2px solid var(--border);
  border-radius:999px;
  padding:.35rem .55rem;
  font-size:.72rem;
  line-height:1;
  background:var(--panel);
  color:var(--text-dim);
}
.status-ok{
  border-color:rgba(72,187,120,.45);
  color:#9ae6b4;
}
.status-degraded{
  border-color:rgba(245,158,11,.55);
  color:#fcd34d;
}
.unit-toggle{
  min-height:40px;
  min-width:54px;
  border:2px solid var(--border);
  border-radius:999px;
  background:var(--panel);
  color:var(--text);
  font-weight:700;
  cursor:pointer;
}
.unit-toggle:focus-visible{
  outline:2px solid rgba(199,210,254,.8);
  outline-offset:2px;
}
.icon-style-toggle{
  min-height:40px;
  border:2px solid var(--border);
  border-radius:999px;
  padding:.35rem .65rem;
  background:var(--panel);
  color:var(--text);
  font-size:.75rem;
  font-weight:700;
  cursor:pointer;
}
.search-refresh-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.2rem;
}
.refresh-text{
  display:none;
  font-size:.7rem;
}
.icon-style-toggle:focus-visible{
  outline:2px solid rgba(199,210,254,.8);
  outline-offset:2px;
}
.footer-theme-picker{
  position:relative;
}
body[data-icon-style="mono"] .day-emoji img,
body[data-icon-style="mono"] .hourly-icon img{
  filter:grayscale(1) contrast(1.08) brightness(1.04) drop-shadow(0 8px 18px rgba(0,0,0,.35));
}
.visually-hidden{
  position:absolute!important;
  height:1px;width:1px;
  overflow:hidden;
  clip:rect(1px,1px,1px,1px);
  white-space:nowrap;
}
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:1000;
  background:#fff;
  color:#000;
  border-radius:.2rem;
  padding:.45rem .65rem;
  text-decoration:none;
}
.skip-link:focus{
  left:.7rem;
  top:.6rem;
}

@media (prefers-reduced-motion: reduce){
  .day-tile{
    transition:none;
  }
}

@media (max-width:900px){
  .day-tile{flex-basis:min(215px, calc(100vw - 4.2rem))}
}
@media (max-width:640px){
  .container{padding:1rem .9rem}
  .site-header{align-items:stretch;padding-top:3rem}
  .topbar-content{padding:.5rem .9rem}
  .header-controls{justify-content:flex-end;width:auto}
  .ecosystem-nav{
    width:100%;
    justify-content:flex-start;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:.1rem;
    flex-wrap:nowrap;
  }
  .utility-row{align-items:stretch}
  .search-wrap{align-items:stretch;min-width:100%}
  .favorites-row{
    display:flex;
    width:100%;
  }
  .favorites-list{
    width:100%;
  }
  .favorites-note{
    width:100%;
    margin-top:0;
  }
  .hero{
    padding:1.25rem 2.65rem 1.15rem;
  }
  .hero__edge-action{
    width:2.2rem;
    min-height:9.4rem;
    padding:.58rem .18rem;
    border-radius:.35rem;
  }
  .hero__edge-action--left{
    left:.35rem;
  }
  .hero__edge-action--right{
    right:.35rem;
  }
  .hero__edge-caption{
    font-size:.53rem;
    letter-spacing:.14em;
  }
  .theme-popover{
    right:0;
    left:auto;
    width:min(220px, 92vw);
  }
  .search-row{
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:center;
    gap:.45rem;
  }
  .search-refresh-btn{
    display:flex;
    min-width:100%;
    border-radius:.3rem;
  }
  .refresh-text{
    display:inline;
  }
  .search-input-wrap{width:100%;grid-column:1 / -1;}
  .search-row input{
    width:100%;
    min-height:46px;
  }
  #searchBtn,
  #useMyLocationBtn{
    width:100%;
    min-width:0;
  }
  .at-glance-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .btn{
    width:auto;
    min-width:110px;
  }
  .theme-picker{
    justify-self:start;
  }
  .typeahead{position:static;width:100%;margin-top:.1rem}
  .favorite-add{width:auto}
  .day-tile{flex-basis:min(200px, calc(100vw - 3.2rem))}
  .day-tile{padding:.65rem}
  .hourly-summary{
    grid-template-columns:1fr;
  }
  #hourlyCard{padding-bottom:1.15rem}
  .footer-controls{
    position:static;
    margin:.35rem auto 0;
    width:100%;
    justify-content:center;
    flex-wrap:wrap;
  }
  .radar-map{height:260px !important}
  .wind-rose-content{flex-direction:column;align-items:center}
  .toggle-panel__sheet{width:100%;max-width:100%;border-radius:.75rem .75rem 0 0}
}

/* ===== v32826 NEW SECTION STYLES ===== */

/* --- Alerts banner --- */
.alerts-banner{
  background:rgba(180,40,40,.15);
  border:1px solid rgba(220,60,60,.4);
  border-radius:.5rem;
  padding:0;
  overflow:hidden;
}
.alerts-banner:empty{display:none}
.alert-item{
  padding:.75rem 1rem;
  border-bottom:1px solid rgba(220,60,60,.2);
}
.alert-item:last-child{border-bottom:none}
.alert-item__severity{
  display:inline-block;
  font-size:.7rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  padding:.15rem .45rem;
  border-radius:.2rem;
  margin-right:.5rem;
}
.alert-item__severity--warning{background:#b91c1c;color:#fff}
.alert-item__severity--watch{background:#d97706;color:#fff}
.alert-item__severity--advisory{background:#ca8a04;color:#1a1a1a}
.alert-item__headline{
  font-weight:600;
  font-size:.95rem;
  color:var(--text);
}
.alert-item__details{
  margin-top:.5rem;
  font-size:.85rem;
  color:var(--text-dim);
  line-height:1.5;
}
.alert-item__details[hidden]{display:none}
.alert-item__toggle{
  background:none;
  border:none;
  color:var(--accent);
  cursor:pointer;
  font-size:.8rem;
  padding:.2rem 0;
  margin-top:.25rem;
}
.alert-item__expires{
  font-size:.75rem;
  color:var(--text-dim);
  margin-top:.35rem;
}

/* --- Historical comparison --- */
.historical-content{
  display:flex;
  align-items:center;
  gap:1.5rem;
  flex-wrap:wrap;
}
.historical-stat{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.2rem;
}
.historical-stat__label{
  font-size:.75rem;
  color:var(--text-dim);
  text-transform:uppercase;
  letter-spacing:.06em;
}
.historical-stat__value{
  font-size:1.5rem;
  font-weight:700;
}
.historical-stat__diff{
  font-size:.85rem;
  font-weight:600;
}
.historical-stat__diff--above{color:#f87171}
.historical-stat__diff--below{color:#60a5fa}
.historical-stat__diff--normal{color:var(--text-dim)}

/* --- Sparkline charts --- */
.hourly-charts{
  padding:0 .5rem .5rem;
}
.sparkline-row{
  display:flex;
  align-items:center;
  gap:.5rem;
}
.sparkline-label{
  font-size:.65rem;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
  white-space:nowrap;
  width:4.5rem;
  flex-shrink:0;
  text-align:right;
}
.sparkline-canvas{
  flex:1;
  min-width:0;
  display:block;
  border-radius:.3rem;
}

/* --- Wind rose --- */
.wind-rose-content{
  display:flex;
  align-items:flex-start;
  gap:1.5rem;
}
.wind-compass{
  position:relative;
  width:140px;
  height:140px;
  flex-shrink:0;
}
.wind-compass svg{width:100%;height:100%}
.wind-info{
  display:flex;
  flex-direction:column;
  gap:.35rem;
}
.wind-info__speed{
  font-size:1.3rem;
  font-weight:700;
}
.wind-info__direction{
  font-size:.9rem;
  color:var(--text-dim);
}
.wind-info__gust{
  font-size:.85rem;
  color:var(--text-dim);
}

/* --- Suggestions --- */
.suggestions-content{
  display:flex;
  flex-direction:column;
  gap:.65rem;
}
.suggestion-item{
  display:flex;
  align-items:flex-start;
  gap:.65rem;
  padding:.55rem .65rem;
  background:rgba(255,255,255,.03);
  border-radius:.4rem;
  border:1px solid var(--border);
}
.suggestion-item__icon{
  font-size:1.3rem;
  flex-shrink:0;
  line-height:1.4;
}
.suggestion-item__text{
  font-size:.9rem;
  color:var(--text);
  line-height:1.45;
}

/* --- UV timeline --- */
.uv-timeline-content{
  padding:.25rem 0;
}
.uv-timeline-canvas{
  width:100%;
  display:block;
  border-radius:.3rem;
}
.uv-legend{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  margin-top:.5rem;
  font-size:.7rem;
  color:var(--text-dim);
}
.uv-legend__swatch{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:2px;
  margin-right:.25rem;
  vertical-align:middle;
}

/* --- Radar map --- */
.radar-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  margin-bottom:.5rem;
}
.radar-controls{
  display:flex;
  align-items:center;
  gap:.65rem;
}
.radar-opacity-slider{
  width:80px;
  accent-color:var(--accent);
}
.radar-map{
  border-radius:.4rem;
  overflow:hidden;
  background:var(--bg);
}
.radar-map .leaflet-control-zoom a{
  background:var(--panel);
  color:var(--text);
  border-color:var(--border);
}
.radar-map .leaflet-tile-pane{
  filter:brightness(.8) saturate(.7);
}

/* --- Favorites widgets --- */
.fav-widgets{
  display:flex;
  gap:.5rem;
  padding:0;
  scrollbar-width:none;
}
.fav-widgets::-webkit-scrollbar{display:none}
.fav-widget{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.2rem;
  padding:.5rem .65rem;
  min-height:72px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:.4rem;
  min-width:90px;
  flex-shrink:0;
  cursor:pointer;
}
.fav-widget:hover{border-color:var(--accent)}
.fav-widget.active{border-color:var(--accent);background:rgba(199,210,254,.08)}
.fav-widget__remove{
  position:absolute;
  top:.2rem;
  right:.25rem;
  background:none;
  border:none;
  color:rgba(255,255,255,.35);
  font-size:.9rem;
  line-height:1;
  cursor:pointer;
  padding:.1rem .2rem;
  border-radius:.2rem;
  opacity:0;
  transition:opacity .15s;
}
.fav-widget:hover .fav-widget__remove{opacity:1}
.fav-widget__remove:hover{color:#fff;background:rgba(255,255,255,.12)}
.fav-widget__name{
  font-size:.7rem;
  color:var(--text-dim);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:80px;
}
.fav-widget__temp{
  font-size:1.1rem;
  font-weight:700;
  min-height:1.4em;
  min-width:4ch;
  text-align:center;
}
.fav-widget__icon{
  width:24px;
  height:24px;
}

/* --- Sun countdown --- */
.sun-countdown{
  font-size:.8rem;
  color:var(--accent);
  font-weight:500;
  white-space:nowrap;
}

/* --- Share button in hero --- */
.hero__share-btn{
  position:absolute;
  top:.75rem;
  right:.75rem;
  z-index:5;
  background:rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.15);
  border-radius:.35rem;
  color:var(--text);
  padding:.4rem;
  cursor:pointer;
  backdrop-filter:blur(4px);
  transition:background .2s;
}
.hero__share-btn:hover{background:rgba(0,0,0,.6)}

/* --- Section toggle gear button --- */
.section-toggle-btn{
  background:none;
  border:1px solid var(--border);
  border-radius:.3rem;
  color:var(--text-dim);
  padding:.3rem .4rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  transition:color .2s, border-color .2s;
}
.section-toggle-btn:hover{
  color:var(--text);
  border-color:var(--text-dim);
}

/* --- Toggle panel overlay --- */
.toggle-panel{
  position:fixed;
  inset:0;
  z-index:10010;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.toggle-panel[hidden]{display:none}
.toggle-panel__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(3px);
}
.toggle-panel__sheet{
  position:relative;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:.75rem .75rem 0 0;
  width:min(420px, 100%);
  max-height:80vh;
  overflow-y:auto;
  padding:0;
}
.toggle-panel__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.85rem 1.1rem;
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  background:var(--panel);
  z-index:1;
}
.toggle-panel__header h2{
  margin:0;
  font-size:1rem;
  font-weight:600;
}
.toggle-panel__close{
  background:none;
  border:none;
  color:var(--text-dim);
  font-size:1.4rem;
  cursor:pointer;
  padding:.1rem .35rem;
  line-height:1;
}
.toggle-panel__close:hover{color:var(--text)}
.toggle-panel__body{
  padding:.75rem 1.1rem 1.25rem;
}
.toggle-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.55rem 0;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.toggle-row:last-child{border-bottom:none}
.toggle-row__label{
  font-size:.88rem;
  color:var(--text);
}
.toggle-switch{
  position:relative;
  width:40px;
  height:22px;
  flex-shrink:0;
}
.toggle-switch input{
  opacity:0;
  width:0;
  height:0;
  position:absolute;
}
.toggle-switch__track{
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.1);
  border-radius:11px;
  cursor:pointer;
  transition:background .2s;
}
.toggle-switch__track::after{
  content:'';
  position:absolute;
  top:2px;
  left:2px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--text-dim);
  transition:transform .2s, background .2s;
}
.toggle-switch input:checked + .toggle-switch__track{
  background:var(--accent);
}
.toggle-switch input:checked + .toggle-switch__track::after{
  transform:translateX(18px);
  background:#fff;
}

/* --- Hourly day boundary markers --- */
.hourly-day-marker{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 .35rem;
  font-size:.65rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--accent);
  border-left:2px solid var(--accent);
  min-width:36px;
  flex-shrink:0;
}