:root {
  color-scheme: dark;
  --ink: #0a0b10;
  --paper: #d8d8d4;
  --muted: #7c808b;
  --faint: #4d5260;
  --serif: "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", "SimSun", serif;
  --sans: "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
  --fade: 2400ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--ink); }
body { color: var(--paper); font-family: var(--serif); -webkit-font-smoothing: antialiased; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; font: inherit; cursor: pointer; }
button, a { touch-action: manipulation; }
button { border: 0; padding: 0; background: none; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible { outline: 1px solid #a9b6c9; outline-offset: 8px; }
p, h1, h2 { margin: 0; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
::selection { background: #8fa0bc40; color: #f3f3ed; }
.svg-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }

/* The document itself stays still; only the five full-screen scenes scroll. */
.corridor {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: auto;
  overscroll-behavior-y: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
  outline: none;
}
.corridor::-webkit-scrollbar { display: none; width: 0; }
/* Temporarily release snapping while JS animates a single complete page turn. */
.corridor.is-turning { scroll-snap-type: none; }
.scene {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: var(--ink);
}
.scene::after {
  content: "";
  position: absolute;
  z-index: 6;
  inset: 0;
  pointer-events: none;
  opacity: 0.13;
  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='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' opacity='.22' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}
.site-header, .site-footer { position: fixed; z-index: 20; left: 4.3%; right: 4.3%; display: flex; align-items: center; justify-content: space-between; }
.site-header { top: 36px; }
.wordmark { display: inline-flex; gap: 14px; align-items: center; }
.wordmark-symbol { position: relative; width: 20px; height: 25px; border: 1px solid #788291; border-bottom: 0; }
.wordmark-symbol::before { content: ""; position: absolute; left: 5px; top: 5px; width: 8px; height: 19px; border: 1px solid #788291; border-bottom: 0; }
.wordmark-symbol span { position: absolute; left: 9px; top: 10px; height: 14px; border-left: 1px solid #788291; }
.wordmark-name { font-size: 18px; letter-spacing: 0.22em; }
.wordmark-english { margin-left: 8px; padding-left: 21px; border-left: 1px solid #747b892e; font-family: var(--sans); font-size: 9px; font-weight: 400; letter-spacing: 0.24em; color: #7e8592; }
.sound-toggle { display: flex; align-items: center; gap: 11px; min-height: 32px; color: #8a8f9b; }
.sound-toggle svg { width: 19px; height: 19px; }
.sound-label { font-size: 11px; letter-spacing: 0.12em; }
.sound-wave { opacity: 0; transition: opacity var(--fade) ease; }
.sound-slash { opacity: 0.75; transition: opacity var(--fade) ease; }
.sound-toggle[aria-pressed="true"] .sound-wave { opacity: 1; }
.sound-toggle[aria-pressed="true"] .sound-slash { opacity: 0; }
.site-footer { bottom: 29px; color: #737987; font-family: var(--sans); font-size: 10px; letter-spacing: 0.15em; pointer-events: none; }
.page-counter { display: flex; align-items: center; gap: 13px; font-size: 10px; letter-spacing: 0.1em; }
#current-page { color: #c4c7ce; }
.counter-divider { width: 31px; height: 1px; background: #727a8b50; }
.footer-note { position: absolute; left: 50%; transform: translateX(-50%); font-family: var(--serif); font-size: 11px; letter-spacing: 0.24em; }
.footer-dedication { font-family: var(--serif); font-size: 11px; letter-spacing: 0.17em; }
.page-nav { position: fixed; z-index: 25; top: 50%; right: 3.8%; display: flex; flex-direction: column; transform: translateY(-50%); }
.page-dot { position: relative; display: flex; align-items: center; justify-content: flex-end; width: 44px; height: 30px; }
.page-dot::after { content: ""; width: 9px; height: 1px; background: #5a6377; opacity: 0.5; transition: width var(--fade) var(--ease), opacity var(--fade) ease, background-color var(--fade) ease; }
.page-dot.is-active::after { width: 24px; background: #c1ccdc; opacity: 0.9; }
.page-dot span { position: absolute; right: 39px; white-space: nowrap; font-size: 10px; letter-spacing: 0.2em; color: #a7acb7; opacity: 0; transition: opacity 2s ease; pointer-events: none; }
.page-dot:hover span, .page-dot:focus-visible span { opacity: 1; }
.eyebrow { font-family: var(--sans); font-size: 9px; font-weight: 400; letter-spacing: 0.29em; line-height: 1.8; color: #8b919e; }

/* 01 — a small light at the end of an almost invisible corridor. */
.scene-entrance { background: radial-gradient(ellipse at 50% 48%, #171e2a 0%, #10141e 26%, #0a0b10 68%); }
.scene-entrance > :not(.entrance-glow) { opacity: 0; transition: opacity var(--fade) ease; }
.scene-entrance.is-visible > :not(.entrance-glow) { opacity: 1; }
.entrance-glow { position: absolute; z-index: -1; left: 50%; top: 48%; width: min(72vw, 850px); height: min(65vw, 650px); transform: translate(-50%, -50%); background: radial-gradient(ellipse, #64738d0c, transparent 65%); }
.entrance-heading { position: absolute; top: 22%; width: 100%; text-align: center; }
.entrance-heading .eyebrow { color: #8b94a4; font-size: 9px; letter-spacing: 0.37em; }
.entrance-heading h1 { margin-top: 27px; padding-left: 0.12em; font-size: clamp(43px, 5.1vw, 70px); font-weight: 400; letter-spacing: 0.12em; line-height: 1.3; text-shadow: 0 2px 35px #b0bbd010; }
.entrance-heading h1 span { margin-left: 0.3em; }
.entrance-subtitle { margin-top: 22px; padding-left: 0.16em; font-size: 12px; font-weight: 400; letter-spacing: 0.21em; color: #8c929f; }
.corridor-lines { position: absolute; z-index: -1; inset: 0; overflow: hidden; opacity: 0.6; pointer-events: none; }
.corridor-line { position: absolute; left: 50%; top: 51%; width: 120vw; height: 1px; transform-origin: left center; background: linear-gradient(90deg, transparent 5%, #7b899313 30%, #7b899321 85%, transparent); }
.line-left-outer { transform: rotate(151deg); }
.line-left-inner { transform: rotate(164deg); }
.line-right-inner { transform: rotate(16deg); }
.line-right-outer { transform: rotate(29deg); }
.corridor-horizon { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 18%, #788ba707 18.05%, transparent 18.1%, transparent 81.9%, #788ba707 81.95%, transparent 82%); mask-image: linear-gradient(transparent 10%, #000 50%, transparent 90%); }
.memory-light { position: absolute; z-index: 3; left: 50%; top: 52%; display: grid; place-items: center; width: 112px; height: 112px; transform: translate(-50%, -50%); border-radius: 50%; }
.light-core { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #e8edf7; box-shadow: 0 0 10px 2px #d4e2fd5c, 0 0 31px 9px #a8c5fb1c, 0 0 75px 28px #7b9bcc0c; animation: breathe 5.8s ease-in-out infinite; }
.light-halo { position: absolute; width: 76px; height: 76px; border: 1px solid #b5c9ea10; border-radius: 50%; box-shadow: 0 0 26px #b2cdf706, inset 0 0 28px #b2cdf706; transition: width var(--fade) ease, height var(--fade) ease, border-color var(--fade) ease; }
.memory-light:hover .light-halo, .memory-light:focus-visible .light-halo { width: 94px; height: 94px; border-color: #b5c9ea28; }
@keyframes breathe { 0%, 100% { transform: scale(0.8); opacity: 0.55; } 50% { transform: scale(1.2); opacity: 1; } }
.entrance-caption { position: absolute; top: calc(52% + 66px); width: 100%; min-height: 28px; text-align: center; font-size: 12px; letter-spacing: 0.21em; }
.entrance-caption p { position: absolute; width: 100%; transition: opacity var(--fade) ease, transform var(--fade) var(--ease); }
.entrance-hint { color: #8b93a3; }
.entrance-memory { opacity: 0; transform: translateY(6px); color: #c3cbd9; font-size: 14px; letter-spacing: 0.2em; }
.is-awakened .entrance-hint { opacity: 0; transform: translateY(-6px); }
.is-awakened .entrance-memory { opacity: 1; transform: translateY(0); }
.is-awakened .light-halo { width: 110px; height: 110px; border-color: transparent; }
.entrance-note { position: absolute; bottom: 18.7%; width: 100%; text-align: center; color: #737c8b; font-size: 11px; letter-spacing: 0.2em; }
.next-scene { position: absolute; z-index: 8; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #7c8594; }
.entrance-next { bottom: 7.7%; gap: 17px; padding: 8px 20px; font-size: 10px; letter-spacing: 0.2em; }
.scroll-line { display: block; width: 1px; height: 28px; background: linear-gradient(#9aaac284, #9aaac20a); }

/* 02–04 — three windows, each holding a different temperature of light. */
.scene-window { --light-rgb: 155, 186, 225; --frame-rgb: 151, 178, 211; }
.scene-blue { background: radial-gradient(ellipse at 50% 58%, #111a27 0%, #0d111b 32%, #0a0b10 72%); }
.scene-warm { --light-rgb: 222, 205, 170; --frame-rgb: 209, 198, 173; background: radial-gradient(ellipse at 50% 58%, #1b1a19 0%, #101113 36%, #0a0b10 72%); }
.scene-mist { --light-rgb: 178, 189, 191; --frame-rgb: 161, 175, 179; background: radial-gradient(ellipse at 50% 58%, #171c20 0%, #101318 36%, #0a0b10 72%); }
.window-copy { position: absolute; z-index: 3; top: 19%; width: 100%; padding: 0 60px; text-align: center; }
.window-copy > * { opacity: 0; transform: translateY(12px); transition: opacity var(--fade) ease, transform var(--fade) var(--ease); }
.is-visible .window-copy > * { opacity: 1; transform: translateY(0); }
.window-copy .eyebrow { display: flex; align-items: center; justify-content: center; gap: 13px; font-family: var(--serif); font-size: 11px; letter-spacing: 0.2em; }
.chapter-number { font-family: var(--sans); font-size: 10px; letter-spacing: 0.12em; }
.eyebrow-divider { width: 19px; height: 1px; background: #7c869b60; }
.song-name { color: #717988; font-size: 10px; }
.window-copy h2 { margin-top: 27px; padding-left: 0.1em; font-size: clamp(20px, 2.05vw, 29px); font-weight: 400; line-height: 1.8; letter-spacing: 0.12em; color: #d4d8df; transition-delay: 120ms; }
.mobile-break { display: none; }
.lyric-rule { display: block; width: 25px; height: 1px; margin: 26px auto 0; background: rgba(var(--frame-rgb), 0.28); transition-delay: 240ms; }
.window-aura { position: absolute; left: 50%; top: 60%; width: min(100vw, 780px); height: 680px; transform: translate(-50%, -50%); background: radial-gradient(ellipse, rgba(var(--light-rgb), 0.045), transparent 65%); opacity: 0; transition: opacity 3s ease; }
.is-visible .window-aura { opacity: 1; }
.window-composition { position: absolute; top: 39%; left: 50%; transform: translateX(-50%); width: 254px; height: 45%; max-height: 394px; opacity: 0; transition: opacity 3s ease; }
.is-visible .window-composition { opacity: 1; }
.window-frame { position: relative; width: 100%; height: calc(100% - 30px); border: 1px solid rgba(var(--frame-rgb), 0.5); box-shadow: 0 0 10px rgba(var(--light-rgb), 0.06), 0 0 45px rgba(var(--light-rgb), 0.025), inset 0 0 25px rgba(var(--light-rgb), 0.025); }
.window-frame::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(var(--frame-rgb), 0.17); }
.window-frame::after { content: ""; position: absolute; top: -1px; left: 14%; width: 72%; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--light-rgb), 0.7), transparent); box-shadow: 0 0 12px 1px rgba(var(--light-rgb), 0.15); }
.window-glass { position: absolute; inset: 9px; background: linear-gradient(139deg, rgba(var(--light-rgb), 0.075), rgba(var(--light-rgb), 0.012) 48%, rgba(var(--light-rgb), 0.035)); }
.window-glass::after { content: ""; position: absolute; inset: 0; background: linear-gradient(145deg, transparent 24%, rgba(var(--light-rgb), 0.025) 25%, transparent 45%); }
.window-mullion { position: absolute; top: 8px; bottom: 8px; left: 50%; width: 3px; margin-left: -1px; border-left: 1px solid rgba(var(--frame-rgb), 0.26); border-right: 1px solid rgba(var(--frame-rgb), 0.14); background: #0e131c; }
.window-crossbar { position: absolute; top: 44%; left: 8px; right: 8px; height: 3px; border-top: 1px solid rgba(var(--frame-rgb), 0.24); border-bottom: 1px solid rgba(var(--frame-rgb), 0.12); background: #0e131c; }
.window-sill { position: absolute; left: -9px; right: -9px; bottom: -5px; height: 5px; border-top: 1px solid rgba(var(--frame-rgb), 0.39); border-bottom: 1px solid rgba(var(--frame-rgb), 0.12); background: #111721; box-shadow: 0 4px 17px rgba(var(--light-rgb), 0.04); }
.window-light-beam { position: absolute; z-index: -1; top: 100%; left: -55%; width: 210%; height: 200px; background: linear-gradient(rgba(var(--light-rgb), 0.028), transparent 90%); clip-path: polygon(26% 0, 74% 0, 100% 100%, 0 100%); transform: translateY(-29px); }
.window-footnote { position: absolute; left: -80px; right: -80px; top: calc(100% + 3px); text-align: center; color: #7e8592; font-size: 10px; letter-spacing: 0.18em; }
.hidden-text { position: absolute; inset: 20px; display: grid; place-items: center; text-align: center; opacity: 0; pointer-events: none; }
.window-next { bottom: 7.7%; width: 44px; height: 42px; opacity: 0.7; }
.window-next svg { width: 19px; height: 23px; }

/* 05 — let the remembered words settle before the birthday wish appears. */
.scene-ending { background: #07080c; }
.ending-glow { position: absolute; z-index: -1; left: 50%; top: 52%; width: min(100vw, 760px); height: 760px; transform: translate(-50%, -50%); background: radial-gradient(ellipse, #b0a37c09 0%, #747a7c04 34%, transparent 67%); }
.ending-content { position: absolute; top: 17.5%; width: 100%; text-align: center; }
.ending-eyebrow { font-family: var(--serif); font-size: 10px; letter-spacing: 0.25em; opacity: 0; transition: opacity var(--fade) ease; }
.is-visible .ending-eyebrow { opacity: 1; }
.remembered-words { margin-top: 35px; color: #a5a9af; font-size: 16px; line-height: 2.25; letter-spacing: 0.16em; opacity: 0; transform: translateY(9px); transition: opacity var(--fade) ease, transform var(--fade) var(--ease); }
.has-memories .remembered-words { opacity: 1; transform: translateY(0); }
.remembered-last { margin-top: 13px; color: #b8babf; font-size: 14px; }
.birthday-wish { opacity: 0; transform: translateY(10px); transition: opacity 3s ease, transform 3s var(--ease); }
.has-wish .birthday-wish { opacity: 1; transform: translateY(0); }
.wish-rule { display: block; width: 25px; height: 1px; margin: 31px auto 27px; background: #c0ba9f3b; }
.birthday-wish h2 { padding-left: 0.17em; font-size: clamp(29px, 3vw, 40px); font-weight: 400; letter-spacing: 0.17em; color: #e3e0d5; }
.birthday-wish p { margin-top: 23px; color: #b2b0aa; font-size: 15px; letter-spacing: 0.17em; line-height: 2.2; }
.little-lamp { display: block; width: 4px; height: 4px; margin: 31px auto 0; border-radius: 50%; background: #e1d8bc; box-shadow: 0 0 9px 2px #e6d9b940, 0 0 30px 12px #e6d9b90a; animation: breathe 6s ease-in-out infinite; }
.replay { position: absolute; z-index: 8; bottom: 9.5%; left: 50%; display: flex; align-items: center; gap: 12px; transform: translateX(-50%); min-height: 36px; padding: 0 14px; color: #81828a; font-size: 11px; letter-spacing: 0.15em; opacity: 0; visibility: hidden; transition: opacity var(--fade) ease, visibility var(--fade); }
.has-wish .replay { opacity: 1; visibility: visible; }
.replay svg { width: 14px; height: 14px; }
.no-script-message { position: fixed; z-index: 100; bottom: 65px; width: 100%; text-align: center; color: #b5bdcd; font-size: 13px; }

@media (min-width: 1600px) {
  .window-composition { width: 285px; }
  .entrance-heading { top: 23%; }
}

@media (max-width: 600px) {
  .site-header, .site-footer { left: 25px; right: 25px; }
  .site-header { top: max(24px, env(safe-area-inset-top)); }
  .wordmark { gap: 10px; }
  .wordmark-symbol { width: 17px; height: 22px; }
  .wordmark-symbol::before { left: 4px; top: 5px; width: 7px; height: 16px; }
  .wordmark-symbol span { left: 7px; top: 10px; height: 11px; }
  .wordmark-name { font-size: 17px; }
  .wordmark-english { display: none; }
  .sound-label { font-size: 10px; }
  .sound-toggle { gap: 8px; }
  .site-footer { bottom: max(23px, env(safe-area-inset-bottom)); }
  .footer-dedication { font-size: 9px; }
  .footer-note { display: none; }
  .page-nav { right: 15px; }
  .page-dot { width: 30px; height: 28px; }
  .page-dot::after { width: 6px; }
  .page-dot.is-active::after { width: 15px; }
  .page-dot span { display: none; }
  .entrance-heading { top: 23%; }
  .entrance-heading .eyebrow { font-size: 7px; letter-spacing: 0.25em; }
  .entrance-heading h1 { margin-top: 28px; font-size: 52px; }
  .entrance-subtitle { margin-top: 20px; font-size: 10px; letter-spacing: 0.15em; }
  .memory-light { top: 52%; }
  .entrance-caption { top: calc(52% + 64px); font-size: 11px; }
  .entrance-memory { font-size: 13px; letter-spacing: 0.12em; }
  .entrance-note { bottom: 20%; font-size: 9px; letter-spacing: 0.12em; }
  .entrance-next { bottom: 8.6%; font-size: 9px; gap: 14px; }
  .window-copy { top: 18%; padding: 0 40px; }
  .window-copy .eyebrow { gap: 10px; font-size: 10px; }
  .window-copy h2 { margin-top: 22px; font-size: clamp(17px, 4.8vw, 22px); line-height: 1.9; letter-spacing: 0.07em; }
  .mobile-break { display: initial; }
  .lyric-rule { margin-top: 19px; }
  .window-composition { top: 41%; width: 196px; height: 38%; max-height: 340px; }
  .window-footnote { top: calc(100% + 6px); font-size: 9px; letter-spacing: 0.12em; }
  .window-next { bottom: 8%; }
  .ending-content { top: 17%; padding: 0 24px; }
  .ending-eyebrow { font-size: 9px; }
  .remembered-words { margin-top: 26px; font-size: 14px; line-height: 2.15; letter-spacing: 0.1em; }
  .remembered-last { margin-top: 14px; font-size: 12px; letter-spacing: 0.09em; }
  .wish-rule { margin: 27px auto 23px; }
  .birthday-wish h2 { font-size: 31px; }
  .birthday-wish p { margin-top: 18px; font-size: 13px; letter-spacing: 0.12em; }
  .little-lamp { margin-top: 24px; }
  .replay { bottom: 9%; font-size: 10px; }
}

@media (max-height: 700px) and (min-width: 601px) {
  .site-header { top: 24px; }
  .site-footer { bottom: 22px; }
  .entrance-heading { top: 18%; }
  .entrance-heading h1 { margin-top: 19px; font-size: 49px; }
  .entrance-subtitle { margin-top: 16px; }
  .entrance-note { bottom: 17%; }
  .window-copy { top: 17%; }
  .window-copy h2 { margin-top: 15px; font-size: 23px; }
  .lyric-rule { margin-top: 15px; }
  .window-composition { top: 39%; width: 204px; height: 43%; }
  .ending-content { top: 15%; }
  .remembered-words { margin-top: 20px; font-size: 14px; line-height: 2; }
  .remembered-last { margin-top: 8px; font-size: 13px; }
  .wish-rule { margin: 22px auto 19px; }
  .birthday-wish h2 { font-size: 32px; }
  .birthday-wish p { margin-top: 16px; font-size: 13px; }
  .little-lamp { margin-top: 20px; }
}

@media (max-height: 650px) and (max-width: 600px) {
  .entrance-heading { top: 19%; }
  .entrance-heading h1 { margin-top: 17px; font-size: 43px; }
  .entrance-subtitle { margin-top: 14px; }
  .entrance-note { bottom: 17%; }
  .entrance-next { bottom: 7%; gap: 9px; }
  .scroll-line { height: 18px; }
  .window-copy { top: 16%; }
  .window-copy h2 { margin-top: 12px; font-size: 17px; }
  .lyric-rule { margin-top: 10px; }
  .window-composition { top: 41%; width: 164px; height: 38%; }
  .window-footnote { font-size: 8px; }
  .ending-content { top: 16%; }
  .remembered-words { margin-top: 15px; font-size: 12px; line-height: 2; }
  .remembered-last { margin-top: 9px; font-size: 11px; }
  .wish-rule { margin: 18px auto 17px; }
  .birthday-wish h2 { font-size: 26px; }
  .birthday-wish p { margin-top: 14px; font-size: 12px; line-height: 2; }
  .little-lamp { margin-top: 15px; }
}

@media (max-height: 500px) and (min-width: 601px) {
  .site-header { top: 18px; }
  .site-footer { bottom: 18px; }
  .entrance-heading { top: 16%; }
  .entrance-heading .eyebrow { font-size: 7px; }
  .entrance-heading h1 { margin-top: 9px; font-size: 36px; }
  .entrance-subtitle { margin-top: 8px; font-size: 10px; }
  .memory-light { top: 57%; width: 80px; height: 80px; }
  .light-halo { width: 58px; height: 58px; }
  .entrance-caption { top: calc(57% + 47px); font-size: 10px; }
  .entrance-memory { font-size: 12px; }
  .entrance-note { display: none; }
  .entrance-next { bottom: 12%; gap: 7px; font-size: 9px; }
  .scroll-line { height: 14px; }
  .window-copy { top: 18%; }
  .window-copy h2 { margin-top: 10px; font-size: 18px; }
  .lyric-rule { margin-top: 10px; }
  .window-composition { top: 43%; width: 140px; height: 38%; }
  .window-footnote { font-size: 9px; }
  .window-next { display: none; }
  .ending-content { top: 19%; left: 13%; width: 74%; display: grid; grid-template-columns: 1fr 1fr; column-gap: 38px; align-items: center; }
  .ending-eyebrow { grid-column: 1 / -1; margin-bottom: 16px; }
  .remembered-words { margin-top: 0; font-size: 13px; }
  .remembered-last { font-size: 11px; letter-spacing: 0.08em; }
  .wish-rule { display: none; }
  .birthday-wish h2 { font-size: 29px; }
  .birthday-wish p { margin-top: 14px; font-size: 12px; }
  .little-lamp { margin-top: 18px; }
  .replay { bottom: 13%; }
}

/* Keep the quiet fades, but honor a preference to avoid moving animations. */
@media (prefers-reduced-motion: reduce) {
  .light-core, .little-lamp { animation: none; }
  .window-copy > *, .entrance-caption p, .remembered-words, .birthday-wish { transform: none; }
}