:root { color-scheme: dark; font-family: "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", SimSun, serif; background: #0b1522; color: #e5e8e9; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: #0b1522; }
button { font: inherit; }
.music-controls { position: absolute; top: 1.5rem; right: 7vw; display: flex; align-items: center; gap: .65rem; z-index: 2; font: .875rem/1.5 system-ui, sans-serif; }
.music-controls button { color: #e5e8e9; background: #08111c99; border: 1px solid #c0cfdf33; border-radius: 4px; padding: .5rem .7rem; min-height: 44px; cursor: pointer; }
.music-controls input { width: 64px; accent-color: #c5d2e0; }
.music-controls button:focus-visible, .music-controls input:focus-visible { outline: 1px solid #d5e2ef; outline-offset: 3px; }
.remembrance { position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; display: flex; align-items: center; padding: 7rem 8.5vw 9rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.landscape, .shade { position: absolute; inset: 0; z-index: -4; }
.landscape { overflow: hidden; }
.scene { width: 100%; height: 100%; object-fit: cover; object-position: center 65%; }
.wildflowers { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.leaves { position: absolute; top: -4%; right: -5%; width: clamp(210px, 26vw, 430px); transform-origin: 100% 0; pointer-events: none; animation: leaves-sway 8.5s ease-in-out infinite; }
@keyframes leaves-sway { 0%, 100% { transform: rotate(-1.3deg) skewX(-.7deg); } 45% { transform: rotate(2deg) skewX(1.2deg); } 70% { transform: rotate(.4deg); } }
.grass { position: absolute; bottom: -4%; width: clamp(190px, 26vw, 410px); height: auto; transform-origin: 50% 100%; filter: brightness(.95) saturate(.8); animation: grass-sway 6.8s ease-in-out infinite; }
.grass-left { left: -7%; --lean: -2deg; --bend: 3deg; }
.grass-middle { left: 24%; width: clamp(140px, 19vw, 290px); bottom: -7%; --lean: -1deg; --bend: 2deg; animation-duration: 7.9s; animation-delay: -3s; opacity: .86; }
.grass-right { right: -7%; --lean: 1deg; --bend: -3deg; animation-duration: 6.1s; animation-delay: -1.8s; }
.shade { z-index: -3; background: linear-gradient(90deg, rgba(6,14,26,.65), rgba(7,16,29,.22) 40%, transparent 75%), linear-gradient(0deg, rgba(6,13,23,.36), transparent 28%, transparent 80%, rgba(6,13,23,.1)); }
.mist { position: absolute; z-index: -2; pointer-events: none; width: 125%; height: 22%; left: -15%; bottom: 6%; opacity: .14; filter: blur(32px); background: radial-gradient(ellipse at 45% 60%, #9db3c1, transparent 65%); animation: drift 27s ease-in-out infinite alternate; }
.mist-two { bottom: 24%; height: 13%; opacity: .09; animation-delay: -12s; animation-duration: 36s; }
.letter { width: min(100%, 42rem); padding-bottom: 3rem; }
.small-rule { height: 1px; width: 2.25rem; background: #a4b3bf; margin-bottom: 2.5rem; opacity: .65; }
.poem { margin: 0; font-size: clamp(1.125rem, 1.85vw, 1.75rem); line-height: 2.3; font-weight: 400; letter-spacing: .12em; text-shadow: 0 2px 20px #07101e; }
.line { display: block; opacity: 0; transform: translateY(9px); filter: blur(5px); animation: appear 3.4s cubic-bezier(.2,.6,.25,1) var(--delay) forwards; }
.final-line { margin-top: 1.3rem; color: #f2ece1; }
.next-page { display: inline-flex; align-items: center; justify-content: center; width: 64px; min-height: 48px; margin-top: 1.4rem; color: #e5e8e9; text-decoration: none; font: 2rem/1 system-ui, sans-serif; opacity: 0; visibility: hidden; animation: next-appear 1.8s ease 20.4s forwards; }
.next-page:hover { color: #fff; }
.next-page:focus-visible { outline: 1px solid #d5e2ef; outline-offset: 4px; }
@keyframes next-appear { from { opacity: 0; visibility: hidden; transform: translateX(-6px); } to { opacity: 1; visibility: visible; transform: translateX(0); } }
.playback { position: absolute; bottom: max(2.5rem, env(safe-area-inset-bottom)); left: 8.5vw; right: 8.5vw; display: flex; justify-content: space-between; align-items: center; gap: 2rem; }
.playback[hidden] { display: none; }
.progress { width: 7rem; height: 1px; background: #c0cfdf26; overflow: hidden; }
.progress span { display: block; height: 100%; background: #c6d1db99; transform: scaleX(0); transform-origin: left; animation: progress 20.4s linear forwards; }
.controls { display: flex; align-items: center; gap: 1rem; }
.controls button { color: #d8e0e6; background: transparent; border: 0; padding: .7rem .3rem; min-width: 4rem; min-height: 44px; font-family: system-ui, sans-serif; font-size: .875rem; cursor: pointer; letter-spacing: .12em; transition: color .2s; }
.controls button:hover { color: #fff; }
.controls button:focus-visible { outline: 1px solid #d5e2ef; outline-offset: 4px; border-radius: 2px; }
.controls button span[aria-hidden] { display: inline-block; width: 1.2em; margin-right: .25rem; }
.divider { width: 1px; height: 12px; background: #c0cfdf33; }
body.paused *, body.loading * { animation-play-state: paused !important; }
body.restarting * { animation: none !important; }
@keyframes appear { to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes grass-sway { 0%, 100% { transform: rotate(var(--lean)) skewX(-1deg); } 50% { transform: rotate(var(--bend)) skewX(2deg); } }
@keyframes drift { from { transform: translateX(-4%); } to { transform: translateX(12%); } }
@keyframes progress { to { transform: scaleX(1); } }
.back-page { position: absolute; top: 1.5rem; left: 8.5vw; display: inline-flex; align-items: center; gap: .65rem; min-height: 44px; color: #ccd5de; text-decoration: none; font: .875rem/1.5 system-ui, sans-serif; }
.back-page:hover { color: white; }
.back-page:focus-visible { outline: 1px solid #d5e2ef; outline-offset: 4px; }
.reality .remembrance { padding-top: 7rem; padding-bottom: 7rem; }
.reality .letter { width: min(44%, 40rem); margin-left: auto; padding-bottom: 0; }
.reality .poem { font-size: clamp(1.25rem, 1.8vw, 1.625rem); line-height: 2.05; }
.reflection { margin: 2rem 0 0; color: #e0d7c8; font-size: clamp(1rem, 1.25vw, 1.125rem); line-height: 2.1; letter-spacing: .065em; text-shadow: 0 2px 16px #07101e; }
.reflection .line + .line { margin-top: .55rem; }
.reality .scene { object-position: center top; }
.reality .shade { background: linear-gradient(270deg, #08111ccb, #08111c77 38%, transparent 68%), linear-gradient(0deg, #08111c88, transparent 28%); }
.reality .progress span { animation-duration: 30.4s; }
@media (max-width: 700px) {
  .remembrance { align-items: flex-start; min-height: 100svh; padding: max(6rem, env(safe-area-inset-top)) 7vw 7rem; }
  .landscape { position: fixed; inset: 0; }
  .scene { object-position: 77% center; }
  .shade { position: fixed; background: linear-gradient(180deg, #07101b55, #07101b66 45%, #07101b11 72%, #07101b66); }
  .grass-left { left: -21%; width: 220px; }
  .leaves { top: -1%; right: -18%; width: 225px; }
  .grass-right { right: -24%; width: 240px; }
  .grass-middle { left: 28%; width: 140px; bottom: -5%; }
  .letter { width: 100%; padding: 0; }
  .small-rule { margin-bottom: 1.7rem; }
  .poem { font-size: clamp(1.125rem, 4.3vw, 1.375rem); line-height: 2.25; letter-spacing: .075em; }
  .final-line { margin-top: 1rem; }
  .mobile-break { display: block; }
  .playback { left: 7vw; right: 7vw; bottom: max(1.25rem, env(safe-area-inset-bottom)); }
  .mist { bottom: 13%; }
  .back-page { left: 7vw; top: 1rem; }
  .reality .remembrance { min-height: 100svh; padding: 6rem 7vw 7rem; }
  .reality .letter { width: 75%; margin-left: auto; }
  .reality .landscape { position: fixed; inset: 0; aspect-ratio: auto; }
  .reality .scene { object-fit: cover; object-position: 48% center; }
  .reality .shade { position: fixed; background: linear-gradient(270deg, #07101bbd, #07101b88 65%, #07101b22), linear-gradient(180deg, #07101b44, transparent 80%, #07101b88); }
  .reality .poem { font-size: 1.25rem; line-height: 1.95; }
  .reality .reflection { font-size: 1rem; line-height: 1.9; margin-top: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .line { opacity: 1; transform: none; filter: none; }
  .next-page { opacity: 1; visibility: visible; }
  .progress span { transform: scaleX(1); }
  .playback { display: none; }
}