/* Approved hero direction: one lavender canvas, with the curve as its subject. */
.site-header {
  border: 0;
  background: #dcd6f6;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background .4s ease;
}
.site-header .wrap {
  width: calc(100% - 64px);
  max-width: 1120px;
  height: 76px;
  padding-inline: 0;
  border-radius: 999px;
  transition: max-width .55s cubic-bezier(.22,1,.36,1), background .4s,
    padding .4s, transform .4s;
}
.site-header.is-scrolled { background: transparent; }
.site-header.is-scrolled .wrap {
  max-width: 940px;
  padding-inline: 24px;
  background: #f7f4ffeb;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transform: translateY(8px);
  box-shadow: 0 8px 32px -20px #30204450;
}
.site-header .wordmark { font-size: 29px; color: #292331; }
.site-header .site-nav { color: #514960; font-size: 14px; }
.site-header .btn, .hero .btn {
  background: #292331;
  color: #fff;
  box-shadow: none;
}
.site-header .btn:hover, .hero .btn:hover {
  background: #4b3c67;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -12px #30204480;
}

.hero {
  isolation: isolate;
  padding: 38px 0 40px;
  background: linear-gradient(180deg, #dcd6f6 0%, #e3ddf7 58%, #eeeafb 100%);
}
.hero > .wrap { position: relative; z-index: 1; width: min(1120px, 100% - 64px); }
.hero > .sky {
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity 1.4s ease;
}
.hero .sky[data-sky="high"] {
  background: radial-gradient(ellipse 70% 65% at 30% 80%, #e8efd9a6, transparent 85%);
}
.hero .sky[data-sky="steady"] {
  background: radial-gradient(ellipse 70% 65% at 50% 80%, #cabcf080, transparent 85%);
}
.hero .sky[data-sky="low"] {
  background: radial-gradient(ellipse 70% 65% at 55% 80%, #f7dec999, transparent 85%);
}
.hero .sky[data-sky="rest"] {
  background: radial-gradient(ellipse 70% 65% at 80% 80%, #efd6e899, transparent 85%);
}
.hero .hero-copy { max-width: 1040px; }
.hero .eyebrow {
  color: #625476;
  font-size: 12px;
  letter-spacing: .22em;
  font-weight: 500;
}
.hero .eyebrow i { width: 5px; height: 5px; box-shadow: none; background: #82709e; }
.hero h1 {
  margin-top: 18px;
  color: #292331;
  font-family: "Songti SC", "STSong", "Noto Serif CJK SC", serif;
  font-size: clamp(38px, 4.9vw, 62px);
  line-height: 1.22;
  font-weight: 500;
  letter-spacing: -.045em;
}
.hero .hero-copy .hero-lead {
  max-width: 54em;
  margin-top: 20px;
  color: #62596f;
  font-size: 16px;
  line-height: 1.9;
}
.hero .day-card {
  width: 100%;
  margin: 24px auto 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  isolation: auto;
}
.hero .readout { padding: 0 28px; align-items: center; }
.hero .readout-time { font-size: 14px; }
.hero .readout-state { font-size: 26px; font-weight: 500; margin-top: 2px; }
.hero .readout-tip { margin-top: 2px; font-size: 13px; }
.hero .today-score {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #4c405f;
}
.hero .today-score span { font-size: 11px; opacity: 1; }
.hero .today-score b { font-size: 42px; line-height: 1.2; }
.hero .today-score em { font-size: 12px; }
.hero .chart { margin: 4px 20px 0; border-radius: 0; }
.hero .chart:focus-visible { border-radius: 12px; }
.hero .cat { width: clamp(78px, 11%, 118px); }
.hero .cat img { filter: drop-shadow(0 12px 10px #59496f18); }
.hero .chart-caption { padding: 0 28px; color: #645b72; font-size: 11px; }
.hero .legend { gap: 20px; }
.hero .legend i { border: 1px solid #51445d20; }
.hero .hero-foot { margin-top: 26px; }
.hero .hero-actions .btn { min-width: 152px; min-height: 48px; font-size: 15px; }
.hero .hero-foot .hero-note { margin-top: 12px; color: #6b617a; font-size: 11px; }

@media (prefers-reduced-motion: no-preference) {
  .hero .eyebrow { animation: hero-arrive .7s both; }
  .hero h1 { animation: hero-arrive .9s .08s both; }
  .hero .hero-lead { animation: hero-arrive .9s .16s both; }
  .hero .readout { animation: hero-arrive 1s .24s both; }
  .hero .chart svg { animation: hero-appear 1.2s .3s both; }
  .hero .chart-caption, .hero .hero-foot { animation: hero-arrive 1s .36s both; }
}
@keyframes hero-arrive {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hero-appear { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 900px) {
  .hero .hero-copy .hero-lead { font-size: 15px; }
  .site-header .site-nav { gap: 16px; }
}
@media (max-width: 600px) {
  .site-header .wrap { width: calc(100% - 40px); height: 68px; gap: 12px; }
  .site-header.is-scrolled .wrap { padding-inline: 16px; }
  .site-header .wordmark { font-size: 26px; }
  .site-header .btn { min-height: 40px; padding-inline: 18px; font-size: 13px; }
  .hero { padding: 34px 0 36px; }
  .hero > .wrap { width: calc(100% - 40px); }
  .hero .eyebrow { font-size: 11px; }
  .hero h1 { max-width: 9em; font-size: 38px; line-height: 1.35; margin-top: 16px; }
  .hero .hero-copy .hero-lead { margin-top: 18px; font-size: 14px; line-height: 1.9; }
  .hero .day-card { margin-top: 28px; }
  .hero .readout { padding: 0 4px; gap: 8px; }
  .hero .readout-time { font-size: 12px; }
  .hero .readout-state { font-size: 23px; }
  .hero .readout-tip { font-size: 12px; }
  .hero .today-score { min-width: 76px; padding: 0; }
  .hero .today-score b { font-size: 36px; }
  .hero .today-score span { font-size: 10px; }
  .hero .today-score em { font-size: 11px; }
  .hero .chart { margin: 14px 8px 0; }
  .hero .cat { width: 22%; min-width: 64px; }
  .hero .chart-caption { padding: 2px 4px 0; gap: 6px; font-size: 10px; }
  .hero .legend { gap: 14px; }
  .hero .hero-foot { margin-top: 24px; }
  .hero .hero-foot .hero-note { font-size: 10px; gap: 4px; }
}