:root { color-scheme: dark; --serif: 'Playfair Display', Georgia, 'Times New Roman', serif; --sans: 'DM Sans', 'Avenir Next', Avenir, sans-serif; }

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; background: #20372e; }
body { margin: 0; color: #f8f5e8; font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, a { font: inherit; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.garden-stage {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
  contain: layout paint style;
  background:
    radial-gradient(ellipse at 50% 61%, rgba(238, 187, 91, .5) 0, rgba(194, 144, 70, .2) 24%, transparent 51%),
    radial-gradient(ellipse at 15% 34%, rgba(123, 151, 102, .16), transparent 34%),
    radial-gradient(ellipse at 86% 29%, rgba(98, 139, 104, .14), transparent 32%),
    linear-gradient(180deg, #193329 0%, #294638 36%, #66714e 69%, #af884c 100%);
}

.garden-stage::before {
  position: absolute;
  z-index: -1;
  right: -17vw;
  bottom: 12%;
  left: -17vw;
  height: 31%;
  border-radius: 50% 50% 0 0 / 22% 22% 0 0;
  background: linear-gradient(180deg, rgba(185, 150, 77, .16), rgba(126, 128, 66, .05));
  content: '';
}

.garden-stage::after {
  position: absolute;
  z-index: 6;
  inset: 0;
  border: 1px solid rgba(255, 241, 194, .1);
  box-shadow: inset 0 0 120px rgba(7, 24, 17, .38);
  content: '';
  pointer-events: none;
}

.scene-intro {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #f7d978;
  background: #182d25;
  animation: intro-curtain 1.65s cubic-bezier(.72, 0, .28, 1) forwards;
  pointer-events: none;
}

.scene-intro__mark { font-size: 24px; animation: intro-mark .85s ease both; }
.scene-intro__text { color: #fff8e7; font-family: var(--serif); font-size: 17px; font-style: italic; letter-spacing: .02em; animation: intro-copy .9s .12s ease both; }

.sun-halo {
  position: absolute;
  z-index: -1;
  top: 36%;
  left: 50%;
  width: clamp(180px, 23vw, 350px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 226, 143, .16);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 221, 132, .35) 0, rgba(231, 178, 85, .11) 48%, transparent 70%);
  box-shadow: 0 0 90px rgba(241, 189, 88, .18), inset 0 0 48px rgba(255, 231, 167, .1);
  transform: translate(-50%, -50%);
  animation: halo-breathe 7s ease-in-out infinite;
}

.sun-halo span { position: absolute; inset: 15%; border: 1px solid rgba(255, 232, 168, .1); border-radius: inherit; }

.light-rays {
  position: absolute;
  z-index: -1;
  top: -24%;
  left: 50%;
  width: 82vw;
  height: 105%;
  opacity: .24;
  background: repeating-conic-gradient(from 174deg at 50% 0%, rgba(255, 232, 171, .18) 0 2deg, transparent 3deg 13deg);
  transform: translateX(-50%);
  pointer-events: none;
}

.sky-glow { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.sky-glow--one { top: 22%; left: 50%; width: min(45vw, 580px); aspect-ratio: 1; background: radial-gradient(circle, rgba(243, 198, 113, .12), transparent 70%); transform: translateX(-50%); }
.sky-glow--two { top: 46%; left: 50%; width: 19vw; min-width: 180px; aspect-ratio: 1; background: radial-gradient(circle, rgba(247, 208, 120, .14), transparent 70%); transform: translate(-50%, -50%); }
.sky-specks { position: absolute; z-index: -1; inset: 0 0 34%; opacity: .48; background-image: radial-gradient(1px 1px at 12% 20%, #f5e6be 90%, transparent), radial-gradient(1px 1px at 24% 51%, #f5e6be 90%, transparent), radial-gradient(1.5px 1.5px at 77% 23%, #f5e6be 90%, transparent), radial-gradient(1px 1px at 86% 48%, #f5e6be 90%, transparent), radial-gradient(1px 1px at 67% 14%, #f5e6be 90%, transparent), radial-gradient(1px 1px at 39% 33%, #f5e6be 90%, transparent), radial-gradient(1px 1px at 92% 11%, #f5e6be 90%, transparent); }
.ambient-particles { position: absolute; z-index: 2; inset: 0; overflow: hidden; pointer-events: none; }
.ambient-particle { position: absolute; bottom: -20px; width: var(--size, 4px); height: var(--size, 4px); border-radius: 50%; background: #f7d978; box-shadow: 0 0 11px #f5cf64; opacity: 0; animation: pollen-rise var(--duration, 9s) var(--delay, 0s) linear infinite; }

.stage-topbar {
  position: absolute;
  z-index: 5;
  top: 0;
  right: clamp(22px, 5.5vw, 82px);
  left: clamp(22px, 5.5vw, 82px);
  display: grid;
  height: 83px;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  border-bottom: 1px solid rgba(248, 245, 232, .18);
}

.back-link, .stage-wordmark { color: rgba(250, 247, 235, .83); font-size: 12px; text-decoration: none; transition: color .2s ease; }
.back-link { display: inline-flex; width: fit-content; align-items: center; gap: 10px; }
.back-link span { color: #e6c369; font-size: 18px; transition: transform .2s ease; }
.back-link:hover { color: #fff; }
.back-link:hover span { transform: translateX(-4px); }
.stage-wordmark { justify-self: center; font-family: var(--serif); font-size: 17px; font-weight: 600; letter-spacing: -.04em; }
.stage-wordmark span { padding-right: 5px; color: #e6c369; font-family: var(--sans); font-size: 20px; vertical-align: -1px; }
.sound-toggle { display: inline-flex; min-height: 41px; align-items: center; justify-self: end; gap: 9px; padding: 0 15px; border: 1px solid rgba(249, 246, 233, .28); border-radius: 99px; color: #f8f5e8; background: rgba(26, 45, 37, .26); box-shadow: inset 0 1px rgba(255,255,255,.05);  cursor: pointer; font-size: 12px; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.sound-toggle:hover, .sound-toggle[aria-pressed="true"] { border-color: rgba(246, 224, 163, .65); background: rgba(242, 219, 156, .13); }
.sound-toggle:hover { transform: translateY(-1px); }
.sound-toggle:focus-visible, .back-link:focus-visible, .stage-wordmark:focus-visible, .button:focus-visible { outline: 2px solid #f1d478; outline-offset: 4px; }
.sound-toggle__icon { width: 16px; height: 16px; fill: none; stroke: #ead28f; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.sound-toggle__icon path:first-child { fill: #ead28f; stroke: none; }
.sound-wave { opacity: .35; transition: opacity .2s ease; }
.sound-toggle[aria-pressed="true"] .sound-wave { opacity: 1; }
.equalizer { display: flex; height: 14px; align-items: flex-end; gap: 2px; }
.equalizer i { display: block; width: 2px; height: 100%; transform: scaleY(.35); border-radius: 2px; background: #f1d477; transform-origin: bottom; }
.sound-toggle[aria-pressed="true"] .equalizer i { animation: equalize .8s ease-in-out infinite alternate; }
.sound-toggle[aria-pressed="true"] .equalizer i:nth-child(2) { animation-delay: -.25s; }
.sound-toggle[aria-pressed="true"] .equalizer i:nth-child(3) { animation-delay: -.48s; }

.garden-message { position: absolute; z-index: 3; top: clamp(112px, 14vh, 142px); right: 22px; left: 22px; text-align: center; animation: message-arrive 1s 1.25s cubic-bezier(.2,.75,.25,1) both; }
.garden-kicker { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 17px; color: #ead393; font-size: 11px; font-weight: 700; letter-spacing: .2em; }
.garden-kicker > span:first-child { color: #f2d16e; font-size: 14px; }
.garden-message h1 { margin: 0; color: #fff9e9; font-family: var(--serif); font-size: clamp(45px, 5.2vw, 72px); font-weight: 500; letter-spacing: -.057em; line-height: 1.07; text-shadow: 0 2px 25px rgba(28, 44, 35, .16); }
.garden-message h1 em { color: #f3d577; font-weight: 500; }
.garden-note { max-width: 590px; margin: 18px auto 0; color: rgba(250, 247, 235, .84); font-size: 14px; line-height: 1.75; }

.flower-field { position: absolute; z-index: 1; right: 0; bottom: -86px; left: 0; width: 100%; height: min(76vh, 760px); overflow: visible; pointer-events: none; }
.distant-blooms > g { --grow-delay: .32s; --distant-sway-time: 5.6s; }
.meadow-growth { opacity: 1; transform: scaleY(1); transform-origin: 0 0; transform-box: view-box; }
.meadow-sway { transform: rotate(0deg); transform-origin: 0 0; transform-box: view-box; animation: distant-sway var(--distant-sway-time) 3s ease-in-out infinite; }
.distant-blooms > g:nth-child(4n+2) { --grow-delay: .48s; --distant-sway-time: 6.8s; }
.distant-blooms > g:nth-child(4n+3) { --grow-delay: .64s; --distant-sway-time: 6.2s; }
.distant-blooms > g:nth-child(4n) { --grow-delay: .8s; --distant-sway-time: 7.1s; }
.is-growing .meadow-growth { animation: meadow-grow 1.25s var(--grow-delay) cubic-bezier(.22,.72,.25,1) both; }
.plant { --plant-shift: 0px; transform: translateY(var(--plant-shift)); animation: plant-sway var(--sway-time, 6s) ease-in-out 3.3s infinite; }
.plant--one, .plant--five { --sway-time: 7.4s; }
.plant--two, .plant--six { --sway-time: 6.2s; animation-delay: 3.7s; }
.plant--three, .plant--seven { --sway-time: 8.1s; animation-delay: 4.1s; }
.plant--four { --sway-time: 7s; animation-delay: 3.5s; }
.plant .stem-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.plant .plant-leaf { opacity: 0; }
.plant .blossom { opacity: 0; }
.is-growing .plant .stem-line { animation: stem-grow 1.8s cubic-bezier(.35,.05,.25,1) both; }
.is-growing .plant .plant-leaf { animation: leaf-open .65s ease-out both; }
.is-growing .plant .blossom { animation: flower-arrive .9s cubic-bezier(.2,.75,.25,1) both; }
.is-growing .plant--one .stem-line { animation-delay: .08s; }.is-growing .plant--one .plant-leaf { animation-delay: .62s; }.is-growing .plant--one .blossom { animation-delay: 1.34s; }
.is-growing .plant--two .stem-line { animation-delay: .18s; }.is-growing .plant--two .plant-leaf { animation-delay: .81s; }.is-growing .plant--two .blossom { animation-delay: 1.52s; }
.is-growing .plant--three .stem-line { animation-delay: .38s; }.is-growing .plant--three .plant-leaf { animation-delay: 1s; }.is-growing .plant--three .blossom { animation-delay: 1.72s; }
.is-growing .plant--four .stem-line { animation-delay: .1s; }.is-growing .plant--four .plant-leaf { animation-delay: .9s; }.is-growing .plant--four .blossom { animation-delay: 1.58s; }
.is-growing .plant--five .stem-line { animation-delay: .44s; }.is-growing .plant--five .plant-leaf { animation-delay: 1.12s; }.is-growing .plant--five .blossom { animation-delay: 1.82s; }
.is-growing .plant--six .stem-line { animation-delay: .24s; }.is-growing .plant--six .plant-leaf { animation-delay: 1.02s; }.is-growing .plant--six .blossom { animation-delay: 1.72s; }
.is-growing .plant--seven .stem-line { animation-delay: .56s; }.is-growing .plant--seven .plant-leaf { animation-delay: 1.18s; }.is-growing .plant--seven .blossom { animation-delay: 1.92s; }

@keyframes stem-grow { to { stroke-dashoffset: 0; } }
@keyframes leaf-open { from { opacity: 0; } to { opacity: 1; } }
@keyframes flower-arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes meadow-grow { from { opacity: 0; transform: scaleY(.02); } to { opacity: 1; transform: scaleY(1); } }
@keyframes distant-sway { 0%, 50%, 100% { transform: rotate(0deg); } 25% { transform: rotate(1.2deg); } 75% { transform: rotate(-1.2deg); } }

.garden-actions { position: absolute; z-index: 4; right: 20px; bottom: clamp(24px, 4vh, 44px); left: 20px; display: flex; flex-direction: column; align-items: center; gap: 13px; animation: actions-arrive .8s 2.35s ease both; }
.garden-signoff { display: flex; align-items: center; gap: 7px; margin: 0; color: rgba(247, 240, 217, .82); font-family: var(--serif); font-size: 13px; font-style: italic; }
.garden-signoff > span:first-child { color: #eed276; font-family: var(--sans); font-size: 14px; font-style: normal; }
.button { display: inline-flex; min-height: 45px; align-items: center; justify-content: center; gap: 9px; padding: 0 18px; border: 1px solid rgba(250, 246, 227, .52); border-radius: 99px; color: #fff9e8; background: rgba(32, 52, 41, .38);  cursor: pointer; font-size: 12px; font-weight: 600; transition: background .2s ease, transform .2s ease; }
.button:hover { transform: translateY(-2px); background: rgba(32, 52, 41, .66); }
.replay-icon { color: #f2d16e; font-size: 17px; }
.page-index { position: absolute; z-index: 4; bottom: 39px; left: clamp(22px, 5.5vw, 82px); color: rgba(250, 247, 235, .57); font-size: 8px; font-weight: 600; letter-spacing: .16em; }
.petal-layer { position: absolute; z-index: 3; inset: 0; overflow: hidden; pointer-events: none; }
.falling-petal { position: absolute; top: -28px; width: 11px; height: 19px; border-radius: 95% 10% 95% 10%; background: linear-gradient(145deg, #fff0a4, #e3ac36); opacity: 0; animation: petal-drift var(--fall-time, 3.2s) ease-in forwards; }
@keyframes petal-drift { 0% { opacity: 0; transform: translate3d(0,-22px,0) rotate(0); } 12% { opacity: .95; } 100% { opacity: 0; transform: translate3d(var(--drift, 24px), 110vh, 0) rotate(560deg); } }
@keyframes intro-curtain { 0%,35% { transform: translateY(0); } 100% { visibility: hidden; transform: translateY(-100%); } }
@keyframes intro-mark { from { opacity: 0; transform: scale(.4) rotate(-45deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes intro-copy { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes halo-breathe { 0%,100% { opacity: .65; transform: translate(-50%,-50%) scale(.94); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.08); } }
@keyframes ray-drift { from { transform: translateX(-50%) rotate(-2deg); opacity: .16; } to { transform: translateX(-50%) rotate(2deg); opacity: .3; } }
@keyframes pollen-rise { 0% { opacity: 0; transform: translate3d(0,0,0) scale(.5); } 12% { opacity: .75; } 65% { opacity: .55; } 100% { opacity: 0; transform: translate3d(var(--drift-x, 30px), -105vh, 0) scale(1.1); } }
@keyframes equalize { from { transform: scaleY(.28); } to { transform: scaleY(1); } }
@keyframes message-arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes actions-arrive { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes plant-sway { 0%, 50%, 100% { transform: translate(0, var(--plant-shift)); } 25% { transform: translate(2px, var(--plant-shift)); } 75% { transform: translate(-2px, var(--plant-shift)); } }

@media (min-width: 1500px) {
  .stage-topbar { right: max(82px, calc((100vw - 1440px) / 2)); left: max(82px, calc((100vw - 1440px) / 2)); }
  .page-index { left: max(82px, calc((100vw - 1440px) / 2)); }
}

@media (max-width: 680px) {
  .garden-stage { min-height: 680px; }
  .stage-topbar { right: 20px; left: 20px; height: 68px; grid-template-columns: 1fr auto; }
  .stage-wordmark { display: none; }
  .back-link { gap: 6px; font-size: 12px; }
  .sound-toggle { min-height: 38px; padding: 0 11px; font-size: 11px; }
  .garden-message { top: 123px; right: 18px; left: 18px; }
  .garden-kicker { margin-bottom: 14px; font-size: 10px; }
  .garden-message h1 { font-size: clamp(38px, 10vw, 56px); line-height: 1.07; }
  .garden-note { max-width: 360px; margin-top: 14px; font-size: 13px; line-height: 1.65; }
  .flower-field { right: auto; bottom: -1px; left: 50%; width: 100%; height: 64vh; min-height: 410px; max-height: 520px; transform: translateX(-50%); }
  .light-rays { opacity: .18; }
  .garden-actions { bottom: 18px; gap: 8px; }
  .garden-signoff { font-size: 12px; }
  .button { min-height: 42px; font-size: 12px; }
  .page-index { display: none; }
}

@media (max-width: 380px) {
  .garden-stage { min-height: 650px; }
  .garden-message { top: 116px; }
  .garden-message h1 { font-size: 37px; }
  .garden-note { max-width: 310px; font-size: 12px; }
  .flower-field { height: 59vh; min-height: 390px; }
  .sound-toggle { gap: 6px; padding: 0 8px; }
}

@media (max-height: 730px) and (min-width: 681px) {
  .garden-stage { min-height: 580px; }
  .stage-topbar { height: 67px; }
  .garden-message { top: 100px; }
  .garden-message h1 { font-size: clamp(43px, 5vw, 59px); }
  .garden-note { margin-top: 12px; font-size: 12px; }
  .flower-field { height: 73vh; }
  .plant { --plant-shift: 90px; }
  .garden-actions { bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .plant .stem-line { stroke-dashoffset: 0; }
  .plant .plant-leaf, .plant .blossom { opacity: 1; }
  .is-growing .plant .stem-line, .is-growing .plant .plant-leaf, .is-growing .plant .blossom { animation: none !important; }
  .scene-intro { display: none; }
  .plant { transform: translateY(var(--plant-shift)); animation: none !important; }
  .ambient-particle { display: none; }
  .meadow-growth, .meadow-sway { opacity: 1; transform: none; animation: none !important; }
}

.garden-stage.is-paused *, .garden-stage.is-paused *::before, .garden-stage.is-paused *::after { animation-play-state: paused !important; }