:root {
  color-scheme: light;
  --ink: #142033;
  --muted: #556274;
  --glass-border: rgb(255 255 255 / 48%);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  font-family: 'Avenir Next', 'SF Pro Display', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html {
  min-width: 320px;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 10%, rgb(255 248 220 / 90%), transparent 26rem),
    radial-gradient(circle at 85% 20%, rgb(210 239 255 / 90%), transparent 32rem),
    linear-gradient(135deg, #dce9f3, #f3eadf 48%, #d8e6f3);
}

button, a { font: inherit; }
button { color: inherit; }

.ambient-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.ambient-orb {
  position: absolute;
  width: 32rem;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(18px);
  opacity: .38;
  animation: ambient-drift 16s ease-in-out infinite alternate;
}

.ambient-orb--one { top: -15rem; left: 35%; background: #fff8d0; }
.ambient-orb--two { right: -12rem; bottom: -18rem; background: #a7d7f2; animation-delay: -8s; }

.ambient-grain {
  position: absolute;
  inset: 0;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
}

.topbar,
main {
  width: min(100% - 40px, 1600px);
  margin-inline: auto;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 86px;
  border-bottom: 1px solid rgb(40 64 86 / 12%);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  font-size: .96rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-decoration: none;
}

.brand-mark {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 26px;
}

.brand-mark i {
  position: absolute;
  width: 25px;
  height: 18px;
  border: 1px solid rgb(255 255 255 / 82%);
  border-radius: 999px;
  background: rgb(255 255 255 / 25%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 80%), 0 5px 16px rgb(41 71 97 / 16%);
  backdrop-filter: blur(10px);
}

.brand-mark i:first-child { left: 0; top: 2px; transform: rotate(-22deg); }
.brand-mark i:last-child { right: 0; bottom: 1px; transform: rotate(22deg); }

.topbar-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .08em;
}

.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #55aa72;
  box-shadow: 0 0 0 5px rgb(85 170 114 / 12%);
  animation: pulse 2s ease-in-out infinite;
}

.divider { width: 1px; height: 12px; background: rgb(40 64 86 / 18%); }

main { padding: clamp(34px, 5vh, 72px) 0 28px; }

.intro {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
  align-items: end;
  gap: 32px;
  margin-bottom: clamp(32px, 5vh, 64px);
}

.eyebrow {
  margin: 0 0 14px;
  color: #748092;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .24em;
}

h1 {
  margin: 0;
  color: #263348;
  font-size: clamp(2.5rem, 5.8vw, 5.7rem);
  font-weight: 300;
  line-height: .94;
  letter-spacing: -.065em;
}

h1 em {
  color: #687487;
  font-style: normal;
  font-weight: 300;
}

.intro-copy {
  justify-self: end;
  max-width: 370px;
  margin: 0 0 .6rem;
  color: #657184;
  font-size: clamp(.9rem, 1.15vw, 1.06rem);
  font-weight: 300;
  line-height: 1.8;
  letter-spacing: .035em;
}

.weather-shell { position: relative; }

.weather-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(390px, 56vw, 800px);
  gap: clamp(18px, 2vw, 32px);
  overflow-x: auto;
  padding: 18px max(7vw, calc((100vw - min(100% - 40px, 1600px)) / 2)) 34px;
  margin-inline: calc(50% - 50vw);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  outline: none;
}

.weather-track:focus-visible,
.rail-button:focus-visible,
.progress-dot:focus-visible {
  outline: 3px solid rgb(34 96 152 / 66%);
  outline-offset: 5px;
}

.weather-track::-webkit-scrollbar { display: none; }

.weather-card {
  --pointer-x: 0px;
  --pointer-y: 0px;
  --glow-x: 50%;
  --glow-y: 50%;
  position: relative;
  min-height: clamp(500px, 55vw, 630px);
  overflow: hidden;
  scroll-snap-align: center;
  border: 1px solid var(--glass-border);
  border-radius: clamp(34px, 4.5vw, 58px);
  background: rgb(255 255 255 / 15%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 75%),
    inset 0 -1px 0 rgb(255 255 255 / 16%),
    0 24px 65px rgb(65 83 103 / 18%),
    0 5px 18px rgb(56 75 95 / 10%);
  opacity: .68;
  transform: scale(.965);
  transition: transform .7s var(--ease-out-quint), opacity .7s var(--ease-out-quint), box-shadow .7s var(--ease-out-quint);
  contain: layout paint;
}

.weather-card::before,
.weather-card::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.weather-card::before {
  z-index: 5;
  inset: 0;
  border-radius: inherit;
  border: 1px solid transparent;
  background: linear-gradient(135deg, rgb(255 255 255 / 85%), transparent 24%, transparent 68%, rgb(255 255 255 / 34%)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.weather-card::after {
  z-index: 1;
  width: 45%;
  height: 24%;
  top: -12%;
  left: 15%;
  border-radius: 50%;
  background: rgb(255 255 255 / 48%);
  filter: blur(38px);
  transform: rotate(-10deg);
}

.weather-card.is-active {
  opacity: 1;
  transform: translate3d(var(--pointer-x), var(--pointer-y), 0) scale(1);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 88%),
    0 34px 90px rgb(55 72 94 / 22%),
    0 8px 24px rgb(56 75 95 / 10%);
}

.weather-art,
.scene { position: absolute; inset: 0; }
.scene { overflow: hidden; transform: scale(1.04); transition: transform 1.2s var(--ease-out-quint); }
.is-active .scene { transform: scale(1); }

.glass-glow {
  position: absolute;
  z-index: 3;
  inset: 0;
  opacity: .65;
  background: radial-gradient(circle at var(--glow-x) var(--glow-y), rgb(255 255 255 / 25%), transparent 33%);
  pointer-events: none;
}

.card-content {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  min-height: inherit;
  padding: clamp(28px, 4.2vw, 52px);
  color: rgb(250 253 255 / 96%);
  text-shadow: 0 2px 20px rgb(22 38 57 / 24%);
}

.card-header { display: flex; align-items: flex-start; justify-content: space-between; }
.condition-index { font-size: .72rem; font-weight: 600; letter-spacing: .15em; }
.condition-english { margin: 7px 0 0; font-size: .61rem; letter-spacing: .22em; opacity: .72; }

.condition-pill {
  padding: 1px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgb(255 255 255 / 72%), rgb(255 255 255 / 12%));
  box-shadow: 0 7px 20px rgb(26 46 65 / 13%);
}

.condition-pill span {
  display: block;
  padding: 8px 13px;
  border-radius: inherit;
  background: rgb(237 246 252 / 18%);
  backdrop-filter: blur(14px) saturate(1.3);
  font-size: .67rem;
  font-weight: 500;
  letter-spacing: .1em;
}

.card-main { margin-top: auto; }
.location { margin: 0 0 12px; font-size: .76rem; font-weight: 500; letter-spacing: .15em; }

.temperature-row { display: flex; align-items: flex-end; gap: clamp(18px, 4vw, 44px); }
.temperature { font-size: clamp(5.5rem, 11vw, 9.5rem); font-weight: 300; line-height: .75; letter-spacing: -.085em; }
.condition-copy { padding-bottom: .2rem; }
.condition-copy h2 { margin: 0 0 7px; font-size: clamp(1.55rem, 3vw, 2.5rem); font-weight: 500; letter-spacing: -.035em; }
.condition-copy p, .summary { margin: 0; font-size: clamp(.72rem, 1.1vw, .9rem); letter-spacing: .04em; opacity: .8; }
.summary { margin-top: 22px; opacity: .9; }

.metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 28px 0 0;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 20px;
  background: rgb(255 255 255 / 12%);
  backdrop-filter: blur(18px) saturate(1.2);
}

.metrics div { padding: 13px 16px; background: rgb(255 255 255 / 6%); }
.metrics dt { margin-bottom: 5px; font-size: .58rem; letter-spacing: .12em; opacity: .65; }
.metrics dd { margin: 0; font-size: .78rem; font-weight: 500; }

.hourly {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 14px;
  border-top: 1px solid rgb(255 255 255 / 24%);
  padding-top: 17px;
}

.hour-item { display: grid; grid-template-columns: 1fr auto; align-items: center; row-gap: 8px; padding-right: 13px; }
.hour-item + .hour-item { padding-left: 13px; border-left: 1px solid rgb(255 255 255 / 18%); }
.hour-item > span:first-child { font-size: .58rem; letter-spacing: .08em; opacity: .68; }
.hour-item strong { font-size: .78rem; font-weight: 500; }
.mini-icon { grid-row: 1 / span 2; grid-column: 2; font-size: 1rem; opacity: .86; }

.scene--sunny { background: linear-gradient(145deg, #8bbfe6 0%, #e6c493 55%, #c8845a 100%); }
.sun-orbit {
  position: absolute;
  top: 9%;
  right: 9%;
  width: 48%;
  aspect-ratio: 1;
  border: 1px solid rgb(255 245 203 / 18%);
  border-radius: 50%;
  animation: sun-float 7s ease-in-out infinite;
}
.sun-core {
  position: absolute;
  inset: 23%;
  border-radius: 50%;
  background: #fff0a8;
  box-shadow: 0 0 34px #ffe9a0, 0 0 100px 28px rgb(255 210 121 / 56%);
}
.sun-haze { position: absolute; inset: 0; background: radial-gradient(circle at 78% 24%, rgb(255 234 158 / 55%), transparent 32%); }
.land { position: absolute; left: -15%; right: -15%; bottom: -23%; height: 50%; border-radius: 50% 50% 0 0; filter: blur(1px); }
.land--one { background: #7c8760; transform: rotate(5deg); }
.land--two { bottom: -32%; left: 20%; background: #b9916c; transform: rotate(-7deg); opacity: .72; }

.scene--windy { background: linear-gradient(145deg, #789fac, #637b89 50%, #344b58); }
.wind-cloud { position: absolute; width: 55%; height: 22%; border-radius: 50%; background: rgb(223 241 238 / 28%); filter: blur(14px); animation: cloud-cross 8s linear infinite; }
.wind-cloud--one { top: 16%; left: -20%; }
.wind-cloud--two { top: 38%; left: 52%; opacity: .42; animation-delay: -4s; animation-duration: 11s; }
.wind-line { position: absolute; height: 2px; border-radius: 999px; background: linear-gradient(90deg, transparent, rgb(232 255 250 / 68%), transparent); animation: wind-sweep 3.2s ease-in-out infinite; }
.wind-line--one { top: 29%; left: 8%; width: 63%; }
.wind-line--two { top: 43%; left: 28%; width: 54%; animation-delay: -.9s; }
.wind-line--three { top: 57%; left: -5%; width: 76%; animation-delay: -1.7s; }

.scene--stormy { background: linear-gradient(150deg, #53647d, #28354c 56%, #121d31); }
.storm-cloud { position: absolute; width: 72%; height: 27%; border-radius: 50%; background: #66738b; filter: blur(17px); animation: storm-breathe 5s ease-in-out infinite; }
.storm-cloud--one { top: 5%; left: -10%; }
.storm-cloud--two { top: 19%; right: -19%; background: #353f57; animation-delay: -2.5s; }
.rain-field { position: absolute; inset: 24% -20% -10% 0; opacity: .62; transform: rotate(10deg); background: repeating-linear-gradient(90deg, transparent 0 29px, rgb(185 211 255 / 44%) 30px 31px, transparent 32px 56px); animation: rain-fall .75s linear infinite; }
.lightning { position: absolute; z-index: 2; top: 20%; left: 54%; width: 4px; height: 35%; background: #eef4ff; clip-path: polygon(38% 0, 100% 0, 66% 43%, 100% 43%, 0 100%, 29% 54%, 0 54%); filter: drop-shadow(0 0 11px #b9d0ff); opacity: 0; animation: lightning 5.4s steps(1) infinite; }

.scene--snowy { background: linear-gradient(150deg, #c4d6e8, #8097af 55%, #46596d); }
.snow-cloud { position: absolute; top: -10%; left: -10%; width: 120%; height: 44%; background: radial-gradient(ellipse, rgb(236 244 250 / 68%), transparent 67%); filter: blur(18px); }
.snow-field { position: absolute; inset: -30% 0 0; background-image: radial-gradient(circle, rgb(255 255 255 / 90%) 0 2px, transparent 2.5px), radial-gradient(circle, rgb(255 255 255 / 65%) 0 1.5px, transparent 2px); background-size: 54px 62px, 37px 45px; background-position: 0 0, 15px 19px; animation: snow-fall 6s linear infinite; }
.snow-bank { position: absolute; bottom: -28%; width: 85%; height: 49%; border-radius: 50% 50% 0 0; background: linear-gradient(#e9f2f8, #9fb5c8); box-shadow: inset 0 10px 25px rgb(255 255 255 / 40%); }
.snow-bank--one { left: -17%; transform: rotate(4deg); }
.snow-bank--two { right: -23%; bottom: -34%; transform: rotate(-9deg); opacity: .8; }

.rail-button {
  position: absolute;
  z-index: 8;
  top: 50%;
  width: 48px;
  height: 48px;
  border: 1px solid rgb(255 255 255 / 65%);
  border-radius: 50%;
  background: rgb(245 250 253 / 35%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 80%), 0 12px 28px rgb(57 79 100 / 18%);
  backdrop-filter: blur(18px) saturate(1.2);
  cursor: pointer;
  transform: translateY(-50%);
  transition: transform .25s var(--ease-out-quint), background .25s ease;
}
.rail-button:hover { background: rgb(255 255 255 / 56%); transform: translateY(-50%) scale(1.06); }
.rail-button:active { transform: translateY(-50%) scale(.96); }
.rail-button--prev { left: -16px; }
.rail-button--next { right: -16px; }

.page-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #758092; font-size: .62rem; font-weight: 500; letter-spacing: .14em; }
.progress { display: flex; align-items: center; gap: 7px; }
.progress-dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; background: #929eab; opacity: .34; cursor: pointer; transition: width .35s var(--ease-out-quint), opacity .35s ease, background .35s ease; }
.progress-dot.is-active { width: 28px; opacity: .9; background: #536274; }

@keyframes ambient-drift { to { transform: translate3d(4rem, 2rem, 0) scale(1.12); } }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgb(85 170 114 / 5%); } }
@keyframes sun-float { 50% { transform: translate3d(-8px, 10px, 0); } }
@keyframes cloud-cross { from { transform: translateX(-18%); } to { transform: translateX(145%); } }
@keyframes wind-sweep { 0%, 100% { transform: translateX(-12%) scaleX(.7); opacity: 0; } 35%, 70% { opacity: .9; } 60% { transform: translateX(25%) scaleX(1); } }
@keyframes rain-fall { to { transform: translate3d(-18px, 45px, 0) rotate(10deg); } }
@keyframes storm-breathe { 50% { transform: scale(1.08) translateX(3%); } }
@keyframes lightning { 0%, 8%, 10%, 13%, 100% { opacity: 0; } 9%, 12% { opacity: 1; } }
@keyframes snow-fall { to { background-position: 20px 124px, -10px 109px; } }

@media (min-width: 1280px) {
  .weather-track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-flow: initial;
    grid-auto-columns: initial;
    gap: 18px;
    overflow: visible;
    padding: 18px 0 34px;
    margin-inline: 0;
    scroll-snap-type: none;
  }

  .weather-card {
    min-height: 570px;
    opacity: 1;
    transform: none;
  }

  .weather-card.is-active { transform: translate3d(var(--pointer-x), var(--pointer-y), 0); }
  .card-content { padding: 30px 26px; }
  .temperature { font-size: clamp(4.5rem, 5.6vw, 6.7rem); }
  .temperature-row { gap: 18px; }
  .condition-copy h2 { font-size: clamp(1.4rem, 1.8vw, 2rem); }
  .metrics div { padding-inline: 11px; }
  .hour-item { padding-right: 8px; }
  .hour-item + .hour-item { padding-left: 8px; }
  .rail-button { display: none; }
}

@media (max-width: 780px) {
  .topbar, main { width: min(100% - 28px, 1600px); }
  .topbar { min-height: 70px; }
  .topbar-meta .divider, #current-date { display: none; }
  main { padding-top: 30px; }
  .intro { grid-template-columns: 1fr; gap: 18px; }
  .intro-copy { justify-self: start; max-width: 32rem; }
  .weather-track { grid-auto-columns: min(88vw, 620px); padding-inline: 6vw; }
  .weather-card { min-height: 570px; }
  .temperature-row { align-items: flex-end; }
  .rail-button { display: none; }
  .page-footer > span { display: none; }
  .page-footer { justify-content: center; }
}

@media (max-width: 480px) {
  h1 { font-size: clamp(2.5rem, 13vw, 4rem); }
  .weather-track { grid-auto-columns: 90vw; }
  .weather-card { min-height: 590px; border-radius: 34px; }
  .card-content { padding: 28px 24px; }
  .temperature-row { display: block; }
  .condition-copy { display: flex; align-items: baseline; gap: 12px; margin-top: 18px; }
  .condition-copy h2 { margin: 0; }
  .metrics div { padding-inline: 10px; }
  .hour-item { padding-right: 8px; }
  .hour-item + .hour-item { padding-left: 8px; }
}

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

  .lightning { display: none; }
}