:root {
  color-scheme: light;
  --ink: #3155c2;
  --ink-soft: #4b63ad;
  --paper: #e8eeff;
  --blue: #c5d2fb;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
  --hand: "Caveat", "Segoe Print", cursive;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100svh; display: grid; align-content: center; overflow-x: clip; color: var(--ink); background: #9bb1f3; font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(ellipse at 45% 25%, #b9c9fa 0, transparent 68%), linear-gradient(135deg, transparent 35%, #4169e14d); }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
button:focus-visible, a:focus-visible { outline: 3px solid #4169e1; outline-offset: 6px; }
button { touch-action: manipulation; }
[hidden] { display: none !important; }
.svg-library { width: 0; height: 0; position: absolute; overflow: hidden; }
.icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.handwritten { font-family: var(--hand); font-weight: 400; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ambient { position: fixed; pointer-events: none; z-index: -1; width: 480px; height: 480px; border-radius: 50%; filter: blur(60px); opacity: .26; }
.ambient-one { top: 10%; left: -350px; background: #4169e1; }
.ambient-two { right: -290px; bottom: -190px; background: #4169e1; }

main { min-width: 0; padding: 40px; }

.stage { height: clamp(460px, 66svh, 640px); max-width: 1000px; margin: 0 auto; display: flex; justify-content: center; perspective: 2400px; }
.book { position: relative; width: 100%; height: 100%; flex-shrink: 0; transform-style: preserve-3d; transition: transform 1050ms cubic-bezier(.2,.65,.2,1), width 1050ms cubic-bezier(.2,.65,.2,1); }
.book.is-closed { transform: translateX(-25%); }
.cover-holder { position: absolute; top: 0; right: 0; width: 50%; height: 100%; }
.paper { position: relative; width: 100%; height: 100%; background-color: var(--paper); }
.paper::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5; opacity: .11; filter: url(#paper-grain); mix-blend-mode: multiply; border-radius: inherit; }
.cover-paper { container-type: inline-size; border-radius: 3px 9px 9px 3px; background: var(--blue); background-image: linear-gradient(90deg, #4169e138, transparent 4%, #f8faff10 9%, transparent 85%, #4169e111); box-shadow: inset 1px 0 #f5f7fd80, inset -2px 0 3px #4169e136, 3px 3px 0 #cad5f7, 5px 5px 0 #849eec, 7px 7px 0 #d2dcf8, 9px 10px 0 #7390e9, 13px 25px 32px #4169e129, 4px 6px 6px #4169e11c; }
.cover-frame { position: absolute; inset: 20px; border: 1px solid #4169e180; border-radius: 48% 48% 3px 3px / 8% 8% 3px 3px; }
.cover-frame::after { content: ""; position: absolute; inset: 5px; border: 1px solid #4169e14d; border-radius: inherit; }
.cover-content { position: absolute; inset: 9% 10% 12%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.cover-eyebrow { font-size: 12px; font-weight: 500; letter-spacing: .22em; margin-bottom: 5%; }
.cover-heart { width: 37px; height: 37px; stroke-width: 1.4; transform: rotate(-9deg); margin-bottom: 4%; }
h1 { font: 500 clamp(39px, 12cqw, 65px)/.99 var(--serif); letter-spacing: -.035em; margin: 0; }
h1 em { display: inline-block; font-size: 1.25em; line-height: 1.05; font-weight: 500; }
.cover-squiggle { width: 34%; margin-top: 1px; }
.cover-squiggle svg { width: 100%; fill: none; stroke: #4169e1; stroke-width: 1.2; }
.cover-note { font-size: clamp(16px, 4.4cqw, 23px); margin: 6% 0 0; transform: rotate(-3deg); }
.cover-bottom { position: absolute; bottom: 7%; left: 10%; right: 10%; text-align: center; font-size: 12px; line-height: 1.5; letter-spacing: .08em; }
.cover-doodle { position: absolute; stroke-width: 1.2; opacity: .78; }
.flower-doodle { width: 51px; height: 51px; left: 8%; top: 11%; transform: rotate(-13deg); animation: flower-sway 7s ease-in-out infinite; }
.medical-doodle { width: 43px; height: 43px; right: 8%; top: 15%; transform: rotate(14deg); }
.paw-doodle { width: 35px; height: 35px; left: 10%; bottom: 19%; transform: rotate(-20deg); }
.cat-doodle { width: 43px; height: 43px; right: 10%; bottom: 18%; transform: rotate(13deg); }
.star-one { width: 20px; height: 20px; right: 13%; top: 40%; animation: star-glow 4s ease-in-out infinite; }
.star-two { width: 15px; height: 15px; left: 14%; top: 47%; animation: star-glow 4s ease-in-out 2s infinite; }
.cover-trigger { position: absolute; inset: 0; border: 0; background: transparent; border-radius: 5px; }
.cover-holder:hover .cover-paper { filter: brightness(1.015); }

.spread { position: absolute; inset: 0; display: flex; border-radius: 6px; box-shadow: 0 3px 0 #99aeef, 0 6px 0 #edf2ff, 0 8px 0 #87a0ec, 0 20px 35px #4169e12b; }
.page { width: 50%; padding: 36px 9% 28px 5%; display: flex; flex-direction: column; overflow: hidden; }
.page-left { border-radius: 6px 0 0 6px; background-image: linear-gradient(90deg, transparent 85%, #cfd9f760 95%, #7a96ea45); }
.page-right { border-radius: 0 6px 6px 0; padding-left: 6%; padding-right: 5%; background-image: linear-gradient(90deg, #5478e428, #a9bbf224 4%, transparent 13%); }
.page-eyebrow { font-size: 12px; line-height: 1.5; letter-spacing: .12em; color: var(--ink-soft); }
.message { margin: auto 0; padding: 20px 0; }
h2 { margin: 0 0 29px; font: 500 clamp(39px, 4.7vw, 62px)/1 var(--serif); letter-spacing: -.035em; }
h2 em { font-weight: 400; }
.qualities { list-style: none; margin: 0; padding: 0; font: 400 clamp(21px, 2.35vw, 31px)/1.7 var(--serif); letter-spacing: -.015em; }
.qualities strong { font-weight: 600; }
.qualities li:last-child strong { text-decoration: underline; text-decoration-color: #9bb0ef; text-decoration-thickness: 5px; text-underline-offset: 2px; text-decoration-skip-ink: none; }
.portrait-note { margin: 25px 0 0; font-size: 27px; transform: rotate(-3deg); color: #4865bb; }
.page-footer { display: flex; align-items: center; gap: 9px; color: var(--ink-soft); font-size: 12px; line-height: 1.5; letter-spacing: .04em; }
.page-footer .icon { width: 24px; height: 24px; }
.portrait-art, .joy-art { align-items: center; padding: 28px 4% 26px; }
.art-note { font-size: clamp(19px, 2.6vw, 28px); margin: 0; text-align: center; transform: rotate(-4deg); color: #4865bb; }
.illustration { margin: 5px 0 0; width: 100%; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.illustration img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.portrait-art .art-note { flex-shrink: 0; }
.portrait-art .illustration { position: relative; width: 100%; min-width: 0; margin: 12px 0 0; }
.portrait-art .illustration img { position: absolute; inset: 0; padding: 6px; object-fit: contain; }
.page-number { position: absolute; bottom: 12px; right: 15px; font: 12px var(--serif); color: #536cb7; }
.joy-art { padding-right: 4%; padding-left: 4%; }
.joy-art .art-note { font-size: clamp(18px, 2.3vw, 25px); }
.pet-footer { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 20px; margin-top: 7px; }
.pet-footer .icon { width: 25px; height: 25px; }
.reason { margin: 0; font: 400 clamp(28px, 3.4vw, 44px)/1.13 var(--serif); letter-spacing: -.025em; }
.underlined { position: relative; }
.underlined::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; border-top: 2px solid #6283e6; border-radius: 50%; transform: rotate(-2deg); }
.little-things { font-size: 16px; line-height: 1.8; margin: 25px 0 0; color: var(--ink-soft); }
.poem-page { background-color: #dce5ff; }
.poem-content { margin: auto 0; padding: 18px 0; }
.poem-page h2 { font-size: clamp(36px, 4.2vw, 52px); margin-bottom: 24px; }
.poem-verses { font: 500 clamp(19px, 2.1vw, 25px)/1.4 var(--serif); }
.poem-verses p { margin: 0 0 24px; }
.poem-verses p:last-child { margin-bottom: 0; }
.celestial-mark { display: flex; align-items: center; justify-content: center; gap: 23px; width: fit-content; margin: 0 0 26px; color: #4169e1; }
.celestial-mark > .icon { width: 16px; height: 16px; animation: star-glow 5s ease-in-out infinite; }
.celestial-mark > .icon:last-child { animation-delay: 2s; }
.celestial-mark > .moon-icon { width: 44px; height: 44px; animation: none; }
.poem-signoff { margin: 26px 0 0; font-size: 28px; line-height: 1.2; transform: rotate(-3deg); }
.wishes-page { background-color: #e3ebff; }
.wishes-content { margin: auto 0; padding: 18px 0; }
.wishes-page h2 { font-size: clamp(36px, 4.6vw, 58px); margin-bottom: 24px; }
.year-wishes { list-style: none; padding: 0; margin: 0; }
.year-wishes li { display: flex; align-items: center; gap: 15px; padding: 13px 0; font: 500 clamp(20px, 2.2vw, 27px)/1.2 var(--serif); }
.year-wishes li + li { border-top: 1px solid #4f74e333; }
.year-wishes .icon { width: 30px; height: 30px; color: #4169e1; stroke-width: 1.3; }
.wishes-note { margin: 0; font-size: 24px; line-height: 1.2; transform: rotate(-3deg); color: #4865bb; }
.wishes-keepsake { background-color: #d1ddfc; align-items: center; justify-content: center; }
.wishes-border { position: absolute; inset: 22px; border: 1px solid #456ce267; border-radius: 48% 48% 3px 3px / 12% 12% 3px 3px; pointer-events: none; }
.wishes-border::after { content: ""; position: absolute; inset: 5px; border: 1px dashed #456ce24d; border-radius: inherit; }
.wishes-blessing { position: relative; text-align: center; width: 100%; }
.wishes-emblem { display: flex; justify-content: center; align-items: center; gap: 23px; margin-bottom: 24px; color: #4169e1; }
.wish-heart { width: 58px; height: 58px; transform: rotate(-8deg); stroke-width: 1.2; }
.wish-star { width: 16px; height: 16px; }
.book:not(.is-turning) .wishes-spread:not([hidden]) .wish-star { animation: star-glow 5s ease-in-out infinite; }
.book:not(.is-turning) .wishes-spread:not([hidden]) .wish-star:last-child { animation-delay: 2.5s; }
.wishes-blessing > p { margin: 0; font: 500 clamp(30px, 3.8vw, 46px)/1.12 var(--serif); letter-spacing: -.025em; }
.wishes-blessing > p em { display: inline-block; color: #4169e1; font-size: 1.3em; padding-bottom: 6px; }
.wishes-blessing > .handwritten { display: block; margin-top: 28px; font-size: 25px; line-height: 1.15; color: #4865bb; }
.celebration-page { background-color: #c4d2fb; padding: 34px 3%; align-items: center; justify-content: center; isolation: isolate; }
.celebration-copy { position: relative; z-index: 1; width: 100%; text-align: center; }
.birthday-heading { font-size: clamp(40px, 7vw, 88px); font-weight: 600; line-height: 1.06; margin: 0 0 28px; letter-spacing: -.045em; }
.birthday-heading-es { font-size: clamp(32px, 5.4vw, 68px); line-height: 1.3; }
.jump-word { display: block; white-space: nowrap; }
.jump-letter { display: inline-block; transform-origin: center bottom; }
.birthday-message { margin: 0; font: 500 clamp(18px, 2.1vw, 25px)/1.45 var(--serif); }
.celebration-heart { width: 34px; height: 34px; margin-top: 24px; color: #4169e1; transform: rotate(-8deg); }
.fireworks { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 0; }
.firework { position: absolute; width: clamp(85px, 15vw, 170px); aspect-ratio: 1; transform: translate(-50%, -50%); color: #4169e1; }
.firework svg { width: 100%; height: 100%; opacity: 0; transform: scale(.1); }
.firework::before { content: ""; position: absolute; width: 2px; height: 45%; left: 50%; bottom: 50%; background: linear-gradient(transparent, currentColor); opacity: 0; transform: translateY(100px); }
.burst-one { left: 24%; top: 18%; --burst-delay: 0s; }
.burst-two { left: 75%; top: 82%; --burst-delay: 1.6s; color: #4f74e3; }
.burst-three { left: 90%; top: 36%; --burst-delay: 3.2s; width: clamp(70px, 11vw, 120px); color: #4169e1; }
.celebration-page[lang="es"] .burst-one { left: 75%; --burst-delay: .8s; }
.celebration-page[lang="es"] .burst-two { left: 26%; --burst-delay: 2.4s; }
.celebration-page[lang="es"] .burst-three { left: 12%; --burst-delay: 4s; }
.book:not(.is-turning) .celebration-spread:not([hidden]) .jump-letter { animation: birthday-hop 2.8s ease-in-out var(--letter-delay) infinite; }
.book:not(.is-turning) .celebration-spread:not([hidden]) .firework svg { animation: firework-bloom 4.8s ease-out var(--burst-delay) infinite; }
.book:not(.is-turning) .celebration-spread:not([hidden]) .firework::before { animation: firework-rise 4.8s ease-out var(--burst-delay) infinite; }
.book-fold { position: absolute; top: 0; bottom: 0; left: calc(50% - 14px); width: 28px; z-index: 3; background: linear-gradient(90deg, transparent, #4169e118 43%, #4169e126 50%, #f8faff52 53%, transparent); pointer-events: none; }

.turning-leaf { position: absolute; top: 0; width: 50%; height: 100%; z-index: 10; transform-style: preserve-3d; }
.turning-leaf.forward { right: 0; transform-origin: left center; }
.turning-leaf.backward { left: 0; transform-origin: right center; }
.leaf-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translateZ(.5px); }
.leaf-back { transform: rotateY(180deg) translateZ(.5px); }
.leaf-face .paper { width: 100%; box-shadow: 0 5px 20px #4169e11a; }
.leaf-face .page { padding: 36px 10% 28px; }
.leaf-face .portrait-art, .leaf-face .joy-art { padding: 28px 8% 26px; }
.leaf-face::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(90deg, #4169e100, #4169e12b 35%, #4169e100); opacity: 0; animation: fold-shadow 1050ms ease-in-out both; }
.turn-underlay { position: absolute; top: 0; width: 50%; height: 100%; z-index: 4; }
.turn-underlay.left { left: 0; }
.turn-underlay.right { right: 0; }
.turn-underlay > .paper { width: 100%; padding: 36px 10% 28px; }
.turn-underlay > .portrait-art, .turn-underlay > .joy-art { padding: 28px 8% 26px; }
.leaf-face .celebration-page, .turn-underlay > .celebration-page { padding: 34px 6%; }
.book.is-turning { pointer-events: none; }

.card-navigation { position: relative; width: fit-content; max-width: 100%; margin: 29px auto 0; display: flex; gap: 13px; align-items: center; }
.nav-button { width: 44px; height: 44px; background: #c5d2fb44; border: 1px solid #4169e1; border-radius: 50%; display: grid; place-items: center; transition: opacity 200ms, background 200ms; }
.previous .icon { transform: rotate(180deg); width: 20px; height: 20px; }
.nav-button:disabled { opacity: .28; }
.nav-button:hover:not(:disabled) { background: #c5d2fb; }
.next-button { min-width: 190px; min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 19px; border: 1px solid #4169e1; border-radius: 30px; background: #c5d2fbcc; padding: 11px 23px; font-size: 14px; transition: background 180ms, box-shadow 180ms; }
.next-button .icon { width: 20px; height: 20px; transition: transform 180ms; }
.next-button:hover:not(:disabled) { background: #dce5ff; box-shadow: 0 4px 12px #3155c20d; }
.next-button:hover:not(:disabled) .icon { transform: translateX(3px); }
.next-button:disabled { opacity: .65; }
.page-dots { display: flex; gap: 0; margin-left: 5px; }
.page-dot { position: relative; width: 28px; height: 44px; border: 0; padding: 0; background: none; }
.page-dot::after { content: ""; position: absolute; top: 19px; left: 11px; width: 6px; height: 6px; background: #4169e1; border-radius: 50%; transition: background 200ms, box-shadow 200ms; }
.page-dot.is-active::after { background: var(--ink); box-shadow: 0 0 0 4px #3155c210; }
.interaction-hint { margin: 15px 0 0; display: flex; align-items: center; justify-content: center; gap: 6px; color: #3155c2; font: 17px var(--hand); }
.interaction-hint > .icon { width: 17px; height: 17px; display: none; }
.touch-hint { display: none; }
.no-script { text-align: center; }

@keyframes flower-sway { 0%, 100% { transform: rotate(-13deg); } 50% { transform: rotate(3deg); } }
@keyframes star-glow { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes fold-shadow { 0%, 100% { opacity: 0; } 45%, 65% { opacity: 1; } }
@keyframes birthday-hop {
  0%, 42%, 100% { transform: translateY(0) scale(1); }
  10% { transform: translateY(2px) scale(1.04, .94); }
  22% { transform: translateY(-12px) rotate(-3deg) scale(.98, 1.04); }
  33% { transform: translateY(0) scale(1.04, .95); }
}
@keyframes firework-bloom {
  0%, 12% { opacity: 0; transform: scale(.06); }
  16% { opacity: .7; }
  29% { opacity: .55; transform: scale(1); }
  45%, 100% { opacity: 0; transform: scale(1.28) translateY(8px); }
}
@keyframes firework-rise {
  0% { opacity: 0; transform: translateY(100px) scaleY(.3); }
  5% { opacity: .55; }
  12% { opacity: .35; transform: translateY(0) scaleY(.65); }
  16%, 100% { opacity: 0; transform: translateY(-10px) scaleY(0); }
}

@media (min-width: 1400px) { .stage { max-width: 1060px; } }
@media (max-width: 800px) {
  main { padding: 36px 22px; }
  .stage { height: clamp(450px, 66svh, 560px); }
  .book.is-closed { width: 120%; }
  .page { padding: 27px 5% 24px; }
  .page-eyebrow { font-size: 12px; letter-spacing: .08em; }
  .portrait-note { font-size: 23px; }
  .page-footer { font-size: 12px; }
  .pet-footer { font-size: 16px; gap: 5px; }
}

@media (max-width: 560px) {
  main { padding: 28px 14px; }
  .stage { height: clamp(540px, 68svh, 600px); }
  .book.is-closed { width: calc(200% - 40px); }
  .cover-frame { inset: 16px; }
  .cover-content { inset: 8% 8% 12%; }
  h1 { font-size: clamp(37px, 12.8cqw, 57px); }
  .cover-note { font-size: clamp(16px, 5cqw, 22px); }
  .cover-bottom { font-size: 12px; }
  .flower-doodle { width: 40px; height: 40px; left: 9%; top: 11%; }
  .medical-doodle { width: 33px; height: 33px; right: 9%; }
  .cat-doodle { width: 34px; height: 34px; bottom: 20%; right: 10%; }
  .paw-doodle { width: 28px; height: 28px; bottom: 21%; }
  .cover-heart { width: 31px; height: 31px; }
  .page { padding: 23px 5% 23px; }
  .page-eyebrow { font-size: 12px; letter-spacing: .02em; line-height: 1.5; }
  .message { padding: 15px 0; }
  h2 { font-size: clamp(29px, 8.6vw, 44px); margin-bottom: 25px; }
  .qualities { font-size: 20px; line-height: 1.2; }
  .qualities li { margin-bottom: 16px; }
  .qualities strong { display: block; font-size: clamp(20px, 5.5vw, 28px); }
  .qualities li:last-child { margin-bottom: 0; }
  .portrait-note { font-size: 20px; margin-top: 18px; line-height: 1.1; }
  .page-footer { gap: 5px; }
  .page-footer span { display: none; }
  .page-footer .icon { width: 20px; height: 20px; }
  .portrait-art, .joy-art { padding: 25px 3% 30px; }
  .art-note { font-size: 21px; line-height: 1.05; }
  .illustration { margin: 10px -5px; width: calc(100% + 10px); }
  .joy-art .art-note { font-size: 20px; }
  .pet-footer { gap: 5px; flex-wrap: wrap; text-align: center; }
  .pet-footer .handwritten { flex-basis: 100%; order: 1; font-size: 18px; line-height: 1.05; }
  .pet-footer .icon { width: 20px; height: 20px; }
  .reason { font-size: clamp(26px, 7vw, 36px); line-height: 1.1; }
  .little-things { font-size: 16px; line-height: 1.65; margin-top: 24px; }
  .poem-content { padding: 0; }
  .poem-page h2 { font-size: clamp(27px, 7vw, 38px); margin-bottom: 16px; }
  .poem-verses { font-size: clamp(16px, 4.25vw, 21px); line-height: 1.3; }
  .poem-verses p { margin-bottom: 16px; }
  .celestial-mark { gap: 15px; margin-bottom: 24px; }
  .celestial-mark > .moon-icon { width: 34px; height: 34px; }
  .poem-signoff { font-size: 23px; margin-top: 24px; }
  .wishes-page h2 { font-size: clamp(29px, 7.8vw, 42px); margin-bottom: 20px; }
  .year-wishes li { gap: 8px; font-size: clamp(16px, 4.6vw, 22px); padding: 14px 0; }
  .year-wishes .icon { width: 22px; height: 22px; }
  .wishes-note { font-size: 20px; }
  .wishes-border { inset: 12px 7px; }
  .wishes-border::after { inset: 4px; }
  .wishes-emblem { gap: 10px; margin-bottom: 24px; }
  .wish-heart { width: 40px; height: 40px; }
  .wish-star { width: 12px; height: 12px; }
  .wishes-blessing > p { font-size: clamp(25px, 6.8vw, 35px); }
  .wishes-blessing > .handwritten { font-size: 20px; margin-top: 24px; }
  .page.celebration-page { padding: 30px 10px; }
  .birthday-heading { font-size: clamp(28px, 9vw, 50px); margin-bottom: 26px; }
  .birthday-heading-es { font-size: clamp(21px, 6.8vw, 38px); line-height: 1.4; }
  .birthday-message { font-size: clamp(16px, 4.5vw, 21px); line-height: 1.4; }
  .celebration-heart { width: 28px; height: 28px; }
  .leaf-face .page, .turn-underlay > .paper { padding: 23px 10% 23px; }
  .leaf-face .portrait-art, .leaf-face .joy-art, .turn-underlay > .portrait-art, .turn-underlay > .joy-art { padding: 25px 6% 30px; }
  .card-navigation { margin-top: 25px; gap: 8px; flex-wrap: wrap; justify-content: center; }
  .next-button { min-width: 156px; font-size: 14px; padding: 11px 14px; gap: 12px; }
  .page-dots { margin-left: 0; }
  .page-dot { width: 24px; }
  .page-dot::after { left: 9px; }
  .touch-hint, .interaction-hint > .icon { display: inline; }
  .desktop-hint { display: none; }
  .interaction-hint { font: 12px var(--sans); margin-top: 15px; }
}

@media (max-height: 650px) and (min-width: 700px) {
  .stage { height: 430px; max-width: 780px; }
  .card-navigation { margin-top: 22px; }
  .cover-content { inset-block: 8% 11%; }
  h1 { font-size: 45px; }
  .page { padding-top: 23px; padding-bottom: 20px; }
  h2 { font-size: 43px; margin-bottom: 20px; }
  .qualities { font-size: 25px; line-height: 1.55; }
  .portrait-note { margin-top: 15px; }
  .reason { font-size: 33px; }
  .little-things { margin-top: 15px; }
  .poem-content { padding: 8px 0; }
  .poem-page h2 { font-size: 36px; margin-bottom: 18px; }
  .poem-verses { font-size: 19px; line-height: 1.3; }
  .poem-verses p { margin-bottom: 18px; }
  .celestial-mark { margin-bottom: 18px; }
  .poem-signoff { margin-top: 18px; }
  .wishes-content { padding: 12px 0; }
  .wishes-page h2 { font-size: 38px; margin-bottom: 15px; }
  .year-wishes li { font-size: 21px; padding: 9px 0; }
  .wishes-note { font-size: 21px; }
  .wishes-blessing > p { font-size: 33px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .celebration-spread .jump-letter, .celebration-spread .firework svg, .celebration-spread .firework::before { animation: none !important; }
  .celebration-spread .firework svg { opacity: .3; transform: scale(.8); }
}