:root {
  --scene-blend: 0;
  --picnic-blend: 0;
  --rabbit-blend: 0;
  --fire-blend: 0;
  --page-inset: max(24px, env(safe-area-inset-left), env(safe-area-inset-right));
  --station-paper: color-mix(in srgb, #edf3eb calc(100% - var(--scene-blend) * 100%), #f4f2f7);
  --station-line: color-mix(in srgb, #b6cbbb calc(100% - var(--scene-blend) * 100%), #d5c8ab);
}

.topbar, .hero-content, .section-heading, .holiday-list, .source-note, .music-credit {
  width: min(1180px, calc(100% - var(--page-inset) * 2));
}
.topbar { width: min(1440px, calc(100% - var(--page-inset) * 2)); padding-top: env(safe-area-inset-top); min-height: calc(88px + env(safe-area-inset-top)); }
.music-credit { padding-bottom: env(safe-area-inset-bottom); }

.night-backdrop { position: absolute; inset: 0; opacity: var(--scene-blend); }
.desktop-moon-cleanplate, .desktop-moon { display: none; pointer-events: none; }
@media (min-width: 821px) {
  /* Sample the neighbouring plain sky to cover only the original moon, with feathered edges. */
  html[data-theme='mid-autumn'] .desktop-moon-cleanplate { display: block; position: absolute; inset: 0; mask-image: radial-gradient(ellipse 4.5% 8% at 74.22% 10.84%, #000 62%, transparent 100%); }
  .desktop-moon-cleanplate img { display: block; width: 100%; height: 100%; transform: translateX(10%); }
  html[data-theme='mid-autumn'] .desktop-moon { display: block; position: absolute; z-index: -1; left: var(--moon-left); top: var(--moon-top); width: var(--moon-size); aspect-ratio: 1; overflow: hidden; mask-image: radial-gradient(circle, #000 52%, transparent 71%); }
  .desktop-moon img { position: absolute; width: 1306.25%; max-width: none; height: auto; left: -919.53125%; top: -29.6875%; filter: brightness(.86); }
  .section-heading { align-items: center; }
  .section-heading .heading-aside { flex-direction: row-reverse; min-width: 0; gap: 20px; }
  html[data-theme='mid-autumn'] .heading-aside .route-motif { display: none; }
  .heading-aside .festival-stamp { flex-basis: 68px; height: 68px; font-size: 16px; transform: rotate(-6deg); }
}
.cook-ear-motion { display: none; position: absolute; inset: 0; pointer-events: none; }
html[data-theme='mid-autumn']:not(.motion-disabled) .cook-ear-motion[data-ready='true'] { display: block; }
.cook-ear-masks { position: absolute; }
/* Clip original ear pixels above an inpainted patch, keeping the head and body untouched. */
.cook-ear-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.cook-ear-clean { clip-path: url(#cook-ear-clean-clip); }
.cook-ear-left { clip-path: url(#cook-ear-left-clip); transform-origin: 69.4378% 78.5335%; --ear-tip: -8deg; --ear-return: 2deg; animation: cook-ear-twitch 8.4s ease-in-out infinite; animation-delay: -2.2s; }
.cook-ear-right { clip-path: url(#cook-ear-right-clip); transform-origin: 69.8565% 78.5335%; --ear-tip: -5deg; --ear-return: 1.5deg; animation: cook-ear-twitch 10.8s ease-in-out infinite; animation-delay: -3s; }
@keyframes cook-ear-twitch {
  0%, 38%, 56%, 100% { transform: rotate(0); }
  43% { transform: rotate(var(--ear-tip)); }
  48% { transform: rotate(var(--ear-return)); }
  52% { transform: rotate(-1deg); }
}
.gathering-effects { display: none; position: absolute; inset: 0; pointer-events: none; }
html[data-theme='mid-autumn']:not(.motion-disabled) .gathering-effects { display: block; }
/* Coordinates follow the coals and grate in the 1672x941 background, not the viewport. */
.gathering-embers { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: polygon(71.17% 85.65%, 73.38% 85.65%, 73.21% 86.5%, 71.41% 86.5%); filter: brightness(2.8) saturate(1.2); animation: gathering-coals 2.8s ease-in-out infinite; }
.gathering-smoke { position: absolute; left: 70.9%; top: 75.8%; width: 3.6%; height: 8.3%; overflow: visible; filter: blur(.55px); }
.gathering-wisp { fill: none; stroke: url(#smoke-fade); stroke-width: 4.5; stroke-linecap: round; opacity: 0; transform-box: view-box; transform-origin: 42% 94%; animation: gathering-smoke 3.8s linear infinite; animation-delay: -1s; }
.gathering-wisp-two { stroke-width: 3.5; animation-duration: 4.4s; animation-delay: -2.8s; }
@keyframes gathering-coals { 0%, 100% { opacity: .04; } 45% { opacity: 1; } 70% { opacity: .3; } }
@keyframes gathering-smoke {
  0% { opacity: 0; transform: translate(0, 0) scale(.65, .45); }
  25% { opacity: .72; }
  65% { opacity: .48; }
  100% { opacity: 0; transform: translate(20%, -48%) scale(1.12, 1.08); }
}
.hero[data-tone='night'] { --ink: #f5f8ff; --ink-soft: #e0e9f4; --red-dark: #ff8073; color: var(--ink); }
.hero[data-tone='night'] .hero-shade { background: rgba(3, 14, 33, .22); }
.hero[data-tone='night'] .hero-content { text-shadow: 0 1px 3px rgba(2, 12, 29, .3); }
.hero[data-tone='night'] .scroll-button { background: #19374b; }
.hero[data-tone='night'] .music-toggle img { filter: invert(1); }
.hero[data-tone='night'] .music-status { color: #123047; }
.hero[data-tone='night'] .topbar { border-color: rgba(232, 241, 255, .2); }
.cloud { filter: brightness(calc(1 - var(--scene-blend) * .3)); }
.train-lights { position: absolute; inset: 0; opacity: calc(var(--scene-blend) * .75); mix-blend-mode: screen; }
.train-lights i { position: absolute; left: 6.2%; top: 29%; width: 23%; height: 23%; background: repeating-linear-gradient(90deg, #ffdb8e 0 9.6%, transparent 9.6% 14.5%); }
.train-lights i:nth-child(2) { left: 38.3%; }
.train-lights i:nth-child(3) { left: 71.5%; width: 16.5%; background-size: 140% 100%; }

/* Keep rejected overlays out of the page until their artwork is approved again. */
.picnic-scene[hidden], .grass-field[hidden] { display: none; }
.picnic-scene { position: absolute; right: 5%; bottom: 5%; width: min(340px, 26%); aspect-ratio: 1.65; z-index: 1; pointer-events: none; }
.picnic-scene button { position: absolute; padding: 0; border: 0; border-radius: 4px; background: none; cursor: pointer; pointer-events: auto; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.picnic-scene[inert] button, .picnic-scene button:disabled { pointer-events: none; }
.picnic-scene button:focus-visible { outline: 2px dashed #ffdc8d; outline-offset: 4px; }
.grill-button { left: 0; bottom: 0; width: 61%; aspect-ratio: 1080 / 1024; opacity: var(--picnic-blend); transition: opacity .8s; }
.grill-art { position: absolute; inset: 0; overflow: hidden; filter: saturate(calc(.35 + var(--fire-blend) * .65)) brightness(calc(.8 + var(--fire-blend) * .2)); }
.grill-art > img { display: block; width: 142.223%; height: 100%; max-width: none; }
.food-turn { position: absolute; left: 30%; top: 2%; width: 34%; aspect-ratio: 450 / 1024; transform: rotate(64deg) scaleY(.5); }
.food-art { position: absolute; inset: 0; overflow: hidden; transition: transform .55s ease; }
.food-art img { position: absolute; right: 0; top: 0; width: 341.334%; height: 100%; max-width: none; }
.grill-button[aria-pressed='true'] .food-art { transform: rotateY(180deg); }
.grill-fire { position: absolute; inset: 0; opacity: var(--fire-blend); pointer-events: none; }
.ember-light { position: absolute; left: 22%; top: 35%; width: 48%; height: 12%; background: #fa762c; filter: blur(5px); mix-blend-mode: screen; animation: ember-breathe 2.8s ease-in-out infinite alternate; }
.smoke { position: absolute; left: 30%; top: 22%; width: 35%; height: auto; filter: blur(3px); opacity: 0; animation: smoke-rise 5s ease-out infinite; transform-origin: 50% 100%; }
.smoke-two { left: 50%; width: 25%; animation-delay: -2.5s; }
.rabbit-button { right: -2%; bottom: 0; width: 48%; aspect-ratio: 1086 / 1448; opacity: var(--rabbit-blend); transition: opacity .8s; }
.rabbit-idle { position: absolute; inset: 0; transform-origin: 55% 88%; animation: rabbit-breathe 4.8s ease-in-out infinite; }
.rabbit-body, .rabbit-ears { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.rabbit-body { clip-path: inset(26% 0 0); }
.rabbit-ears { clip-path: inset(0 0 72%); transform-origin: 61% 27%; animation: rabbit-ears 6.8s ease-in-out infinite; }
.rabbit-button.is-greeting .rabbit-idle { animation: rabbit-greet .7s ease-in-out; }
.grass-field { position: absolute; bottom: 0; left: 0; right: 0; height: 110px; overflow: hidden; z-index: 2; pointer-events: none; filter: brightness(calc(1 - var(--scene-blend) * .35)); }
.grass-strip { position: absolute; bottom: -16px; width: 65%; height: 100%; transform-origin: 50% 100%; animation: grass-sway 3.6s ease-in-out infinite alternate; }
.grass-one { left: -5%; }
.grass-two { right: -6%; animation-duration: 4.8s; animation-delay: -3s; }
.image-credit { z-index: 3; bottom: 12px; font-size: 11px; background: rgba(18, 48, 71, .6); }

.upcoming { background: var(--station-paper); border-top-color: var(--station-line); transition: background .8s, border-color .8s; }
.heading-aside { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 22px; min-width: 224px; min-height: 84px; }
.route-motif { position: absolute; width: 150px; height: 84px; right: 66px; top: -20px; opacity: .08; pointer-events: none; }
.festival-stamp { position: relative; flex: 0 0 76px; height: 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border: 1px solid #a17d3a; border-radius: 50%; color: #886323; font-size: 18px; font-weight: 650; transform: rotate(-9deg); opacity: var(--scene-blend); transition: opacity .8s; }
.festival-stamp::after { content: ''; position: absolute; inset: 4px; border: 1px dashed currentColor; border-radius: inherit; opacity: .38; }
html[data-theme='everyday'] .festival-stamp { visibility: hidden; }
.festival-stamp img { opacity: .7; }
.year-badge { position: relative; }
.station-dot, .station-number { background: var(--station-paper); }
.station-stop::before { background: var(--station-line); }
.station-train { position: relative; width: 24px; height: 24px; padding: 3px; background: var(--station-paper); opacity: .75; }
.station-dot { position: relative; }
.holiday-station:first-child .station-dot::after { content: ''; position: absolute; inset: -5px; border: 1px solid var(--station-color); border-radius: 50%; animation: station-signal 3.5s ease-out infinite; }
.station-details[open] .station-expanded { animation: itinerary-open .25s ease-out; }
.scene-previews { display: flex; flex-wrap: wrap; gap: 4px; width: fit-content; margin: 12px 0 18px; border-bottom: 1px solid var(--line); }
.scene-preview { min-height: 44px; display: inline-flex; align-items: center; padding: 0 12px; text-decoration: none; font-size: 13px; border-bottom: 2px solid transparent; }
.scene-preview:hover, .scene-preview[aria-current] { border-bottom-color: var(--red-dark); color: var(--red-dark); }

@keyframes grass-sway { from { transform: skewX(-7deg) translateX(6px); } to { transform: skewX(7deg) translateX(-6px); } }
@keyframes rabbit-breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.018); } }
@keyframes rabbit-ears { 0%, 55%, 100% { transform: rotate(0); } 62%, 76% { transform: rotate(-2deg); } 69% { transform: rotate(1deg); } }
@keyframes rabbit-greet { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(-4deg) translateY(-3px); } 70% { transform: rotate(1deg); } }
@keyframes ember-breathe { from { opacity: .12; } to { opacity: .32; } }
@keyframes smoke-rise { 0% { opacity: 0; transform: translate(0, 0) rotate(-45deg) scale(.5); } 25% { opacity: .28; } 100% { opacity: 0; transform: translate(18px, -65px) rotate(-65deg) scale(1.4); } }
@keyframes station-signal { 0% { opacity: .5; transform: scale(.8); } 80%, 100% { opacity: 0; transform: scale(1.9); } }
@keyframes itinerary-open { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

.scene-motion-paused .upcoming *, .scene-motion-paused .station-dot::after { animation-play-state: paused !important; }
.motion-disabled .rabbit-button.is-greeting .rabbit-idle { animation: none; filter: brightness(1.08); }
.motion-disabled .food-art, .motion-disabled .night-backdrop, .motion-disabled .festival-stamp { transition: none; }
.motion-disabled .holiday-station:first-child .station-dot::after { opacity: 0; animation: none; }

@media (max-width: 820px) {
  :root { --page-inset: max(16px, env(safe-area-inset-left), env(safe-area-inset-right)); }
  .topbar, .hero-content, .section-heading, .holiday-list, .source-note, .music-credit { max-width: 680px; }
  .picnic-scene { width: 260px; right: 4%; bottom: 24px; }
  .grass-field { height: 84px; }
  .holiday-station::before { background: var(--station-line); }
  .station-train { width: 22px; height: 22px; }
  .heading-aside { min-width: 200px; gap: 12px; }
}

@media (max-width: 520px) {
  .topbar { min-height: calc(68px + env(safe-area-inset-top)); }
  .hero[data-tone='night'] .hero-content { padding-top: 16px; }
  .picnic-scene { width: 212px; right: max(8px, env(safe-area-inset-right)); bottom: 18px; }
  .grass-field { height: 60px; }
  .grass-one { width: 112%; left: -5%; animation-duration: 4.5s; }
  .grass-two { display: none; }
  .section-heading { display: block; }
  .heading-aside { min-height: 68px; margin-top: 18px; justify-content: space-between; }
  .festival-stamp { flex-basis: 64px; height: 64px; font-size: 16px; }
  .route-motif { width: 112px; height: 64px; right: 92px; top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cook-ear-motion { display: none !important; }
  .gathering-effects { display: none !important; }
  .night-backdrop, .grill-button, .rabbit-button, .food-art, .festival-stamp, .upcoming { transition: none; }
  .grass-strip, .rabbit-idle, .rabbit-ears, .ember-light, .smoke, .station-dot::after, .station-expanded { animation: none !important; }
  .smoke, .station-dot::after { opacity: 0; }
}