:root {
  color-scheme: light;
  --ink: #191516;
  --ink-soft: rgba(25, 21, 22, .68);
  --muted: rgba(25, 21, 22, .56);
  --faint: rgba(25, 21, 22, .34);
  --bg: #fff9f6;
  --bg-2: #fff3ee;
  --surface: rgba(255, 255, 255, .78);
  --surface-solid: #fffdfb;
  --paper: #fffefb;
  --paper-edge: #f0e7df;
  --paper-rule: rgba(42, 37, 36, .35);
  --paper-rule-soft: rgba(42, 37, 36, .18);
  --hairline: rgba(34, 24, 23, .12);
  --hairline-strong: rgba(34, 24, 23, .22);
  --rose: #e79ab0;
  --rose-2: #d85f87;
  --rose-deep: #95314f;
  --rose-veil: rgba(231, 154, 176, .17);
  --shadow: 0 26px 80px rgba(80, 42, 50, .18);
  --paper-shadow: 0 22px 54px rgba(64, 43, 39, .18), 0 4px 13px rgba(64, 43, 39, .08);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.2, 1.25, .2, 1);
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-hand: "Caveat", "Snell Roundhand", "Apple Chancery", cursive;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; min-height: 100%; overflow: hidden; overscroll-behavior: none; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 50% -8%, rgba(231, 154, 176, .28), transparent 30rem),
    radial-gradient(circle at 0% 90%, rgba(255, 224, 231, .32), transparent 24rem),
    linear-gradient(180deg, #fffefe 0%, var(--bg) 54%, #fff0ea 100%);
  color: var(--ink);
  font-family: var(--font-sans);
  position: fixed;
  inset: 0;
  width: 100%;
}
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 2px solid var(--rose-2); outline-offset: 4px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.global-ambient { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.glow, .grain { position: absolute; display: block; pointer-events: none; }
.glow { border-radius: 999px; filter: blur(6px); opacity: .78; }
.glow-rose { width: 40vmax; height: 40vmax; left: -18vmax; top: 4vmax; background: radial-gradient(circle, rgba(231, 154, 176, .30), transparent 65%); animation: floatGlow 22s ease-in-out infinite alternate; }
.glow-white { width: 32vmax; height: 32vmax; right: -15vmax; bottom: 4vmax; background: radial-gradient(circle, rgba(255, 255, 255, .9), transparent 66%); animation: floatGlow 28s ease-in-out infinite alternate-reverse; }
.grain { inset: -30%; opacity: .11; background-image: radial-gradient(circle, rgba(42, 37, 36, .34) 0 .45px, transparent .8px); background-size: 19px 21px; transform: rotate(7deg); animation: grainDrift 34s linear infinite; }
.app-shell {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,249,246,.72) 42%, rgba(255,245,241,.78)),
    radial-gradient(circle at 50% 10%, rgba(231,154,176,.24), transparent 34%),
    var(--bg);
  isolation: isolate;
  touch-action: manipulation;
}
.app-shell::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(circle, rgba(149,49,79,.16) 0 .65px, transparent 1px); background-size: 46px 46px; mask-image: linear-gradient(180deg, black 0%, transparent 75%); opacity: .28; }
.global-header {
  position: fixed;
  z-index: 50;
  top: max(10px, env(safe-area-inset-top));
  left: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px;
  border: 1px solid rgba(34, 24, 23, .11);
  border-radius: 999px;
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 16px 42px rgba(70, 43, 46, .12);
  backdrop-filter: blur(18px);
}
.scene-nav { display: flex; min-width: 0; gap: 3px; padding: 2px; border-radius: 999px; background: rgba(25, 21, 22, .045); }
.scene-nav-button, .music-toggle { min-height: 36px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; color: rgba(25,21,22,.56); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; transition: color .24s var(--ease-out), background .24s var(--ease-out), transform .24s var(--ease-spring), box-shadow .24s var(--ease-out); }
.scene-nav-button { padding: 0 10px; }
.scene-nav-button:hover, .music-toggle:hover { transform: translateY(-1px); color: var(--ink); }
.scene-nav-button.is-active { color: var(--ink); background: linear-gradient(135deg, #fff, #ffe2ea); box-shadow: 0 9px 24px rgba(216,95,135,.16); }
.music-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid rgba(34,24,23,.10); background: rgba(255,255,255,.58); white-space: nowrap; }
.music-dot { width: 7px; height: 7px; border-radius: 999px; background: rgba(25,21,22,.28); box-shadow: 0 0 0 0 rgba(216,95,135,0); }
.music-toggle.is-playing .music-dot { background: var(--rose-2); box-shadow: 0 0 16px rgba(216,95,135,.6); animation: dotPulse 1.4s ease-in-out infinite; }
.scene {
  position: absolute;
  inset: 0;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  transform: translateY(18px) scale(.988);
  pointer-events: none;
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out), filter .55s var(--ease-out);
  filter: blur(8px);
  padding: calc(max(78px, env(safe-area-inset-top) + 64px)) 22px max(14px, env(safe-area-inset-bottom));
}
.scene.is-active { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; filter: blur(0); }
.eyebrow { margin: 0 0 7px; color: var(--rose-deep); font-size: 11px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.scene-cover {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: center;
  justify-items: center;
  text-align: center;
  gap: 12px;
  padding-top: calc(max(78px, env(safe-area-inset-top) + 62px));
  padding-bottom: max(42px, env(safe-area-inset-bottom) + 34px);
}
.cover-copy { position: relative; z-index: 2; display: grid; justify-items: center; gap: 7px; }
.cover-copy h1 { margin: 0; max-width: min(342px, 86vw); font-family: var(--font-serif); font-size: clamp(43px, 12.2vw, 72px); line-height: .91; letter-spacing: -.055em; font-weight: 700; text-wrap: balance; color: transparent; background: linear-gradient(105deg, #191516 4%, #b24c6a 55%, #e79ab0 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 14px 34px rgba(216,95,135,.14)); }
.cover-copy h1 span { display: inline; }
.cover-dedication { margin: 0; color: rgba(25,21,22,.64); font-family: var(--font-serif); font-size: clamp(15px, 4.2vw, 20px); line-height: 1; letter-spacing: .035em; }
.cover-date, .voice-meaning, .secret-note { display: none !important; }
.single-rose { position: relative; width: min(150px, 42vw); height: min(220px, 27dvh); margin: -2px 0 -8px; display: grid; place-items: center; opacity: .99; animation: roseBreathe 5.8s ease-in-out infinite; filter: drop-shadow(0 18px 44px rgba(216,95,135,.20)); pointer-events: none; }
.single-rose img { display: block; width: 100%; height: 100%; object-fit: contain; }
.play-button { position: relative; width: 116px; height: 116px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; display: grid; place-items: center; margin-top: 4px; align-self: start; }
.play-rings, .play-rings::before, .play-rings::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.play-rings { background: conic-gradient(from 130deg, rgba(216,95,135,0), rgba(255,255,255,.96), rgba(231,154,176,.86), rgba(216,95,135,0)); animation: spin 12s linear infinite; filter: drop-shadow(0 0 24px rgba(216,95,135,.16)); }
.play-rings::before { inset: 8px; background: var(--bg); }
.play-rings::after { inset: 18px; border: 1px solid rgba(34,24,23,.10); box-shadow: inset 0 0 24px rgba(216,95,135,.06); }
.play-disc { position: relative; width: 66px; height: 66px; border-radius: inherit; border: 1px solid rgba(34,24,23,.14); background: linear-gradient(145deg, #fff, #fff0f5); box-shadow: inset 0 1px rgba(255,255,255,.75), 0 18px 42px rgba(80,42,50,.16); display: grid; place-items: center; transition: transform .35s var(--ease-spring); }
.play-button:hover .play-disc { transform: scale(1.06); }
.play-triangle { width: 0; height: 0; margin-left: 5px; border-left: 17px solid var(--rose-deep); border-top: 11px solid transparent; border-bottom: 11px solid transparent; filter: drop-shadow(0 0 14px rgba(216,95,135,.38)); }
.play-label { position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); color: rgba(25,21,22,.58); font-size: 10.5px; font-weight: 900; letter-spacing: .07em; text-transform: none; white-space: nowrap; }
/* Letter scene */
.scene-letter { display: grid; grid-template-rows: clamp(104px, 17dvh, 148px) minmax(0, 1fr) auto auto; gap: 7px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.envelope-stage { display: grid; place-items: end center; perspective: 980px; overflow: visible; min-height: 0; }
.envelope { position: relative; width: min(286px, 74vw); height: min(142px, 17.4dvh); min-height: 104px; transform-style: preserve-3d; transform: translateY(8px) rotateX(7deg); animation: envelopeArrive .7s var(--ease-out) both; }
.envelope-shadow { position: absolute; inset: auto 7% -11px; height: 23px; border-radius: 50%; background: rgba(82, 48, 45, .16); filter: blur(13px); }
.envelope-back, .envelope-front, .envelope-flap, .envelope-sheet { position: absolute; }
.envelope-back { inset: 11% 0 0; border-radius: 18px; background: linear-gradient(145deg, #fffdf9, #f3e4dd); box-shadow: 0 15px 34px rgba(90, 54, 52, .15), inset 0 1px rgba(255,255,255,.9); border: 1px solid rgba(34,24,23,.08); }
.envelope-sheet { z-index: 2; left: 9%; right: 9%; bottom: 34%; height: 82%; border-radius: 12px 12px 5px 5px; transform-origin: center bottom; transform: translateY(38px) scale(.82); opacity: .25; background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,250,245,.95)), repeating-linear-gradient(180deg, transparent 0 13px, rgba(42,37,36,.22) 14px, transparent 15px); box-shadow: 0 8px 20px rgba(80,50,47,.08); }
.envelope-front { z-index: 4; inset: 11% 0 0; border-radius: 18px; border: 1px solid rgba(34,24,23,.07); }
.envelope-front-left { clip-path: polygon(0 22%, 50% 57%, 0 100%); background: linear-gradient(135deg, #fff9f4, #ecd8d0); }
.envelope-front-right { clip-path: polygon(100% 22%, 50% 57%, 100% 100%); background: linear-gradient(225deg, #fff7f2, #ead6cf); }
.envelope-front-bottom { clip-path: polygon(0 100%, 50% 52%, 100% 100%); background: linear-gradient(180deg, #fff8f3, #e9d6cf); }
.envelope-flap { z-index: 6; left: 0; right: 0; top: 0; height: 70%; clip-path: polygon(0 14%, 100% 14%, 50% 100%); background: linear-gradient(180deg, #fffefc, #f0ddd5); transform-origin: 50% 12%; transform: rotateX(0deg); border: 1px solid rgba(34,24,23,.07); box-shadow: 0 9px 15px rgba(80,46,44,.06); transition: transform .95s var(--ease-out), filter .95s var(--ease-out); }
.wax-seal { position: absolute; z-index: 7; left: 50%; top: 49%; width: 38px; height: 38px; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 999px; background: radial-gradient(circle at 35% 30%, #f8b3c7, #95314f 70%); color: #fff7ed; font-family: var(--font-serif); font-size: 23px; font-weight: 700; box-shadow: 0 9px 18px rgba(81,18,45,.22), inset 0 1px 3px rgba(255,255,255,.34); transition: transform .7s var(--ease-spring), opacity .55s var(--ease-out); }
.scene-letter.letter-opening .envelope-flap, .scene-letter.letter-ready .envelope-flap { transform: rotateX(178deg); filter: brightness(1.02); }
.scene-letter.letter-opening .envelope-sheet { animation: sheetPullOut 1.42s .18s var(--ease-out) both; }
.scene-letter.letter-opening .letter-paper { animation: paperFromEnvelope 1.36s .26s var(--ease-out) both; }
.scene-letter.letter-opening .paper-underlay-one { animation: underlayWake 1.15s .62s var(--ease-out) both; }
.scene-letter.letter-opening .paper-underlay-two { animation: underlayWakeSoft 1.15s .74s var(--ease-out) both; }
.scene-letter.letter-ready .envelope-sheet { opacity: 0; transform: translateY(142px) scale(1.7); }
.scene-letter.letter-opening .wax-seal, .scene-letter.letter-ready .wax-seal { opacity: 0; transform: translate(-50%, -82%) scale(.65) rotate(-18deg); }
.paper-deck { position: relative; width: min(100%, 520px); height: 100%; min-height: 0; margin: 0 auto; perspective: 1750px; transform-style: preserve-3d; overflow: visible; }
.paper-underlay { position: absolute; inset: 7px 7px -7px; border-radius: 20px; background: #fbf3ed; border: 1px solid rgba(34,24,23,.06); box-shadow: 0 10px 24px rgba(80,43,39,.08); opacity: 0; transition: opacity .5s var(--ease-out), transform .55s var(--ease-out); }
.paper-underlay-one { transform: translateY(6px) scale(.985); }
.paper-underlay-two { transform: translateY(13px) scale(.965); opacity: 0; }
.scene-letter.letter-ready .paper-underlay { opacity: .88; }
.scene-letter.letter-ready .paper-underlay-two { opacity: .48; }
.paper-deck.is-turning-next .paper-underlay-one { transform: translateY(9px) translateX(-4px) scale(.978) rotate(-.4deg); }
.paper-deck.is-turning-prev .paper-underlay-one { transform: translateY(9px) translateX(4px) scale(.978) rotate(.4deg); }
.letter-paper { --line-step: clamp(27px, 4.15dvh, 32px); --line-start: 52px; --letter-font-size: clamp(22px, 5.45vw, 30px); --text-top: 18px; position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0 24px 22px 30px; border-radius: 20px; color: var(--ink); overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,253,249,.985)), var(--paper); box-shadow: var(--paper-shadow); transform: translate3d(0, -18px, 0) scale(.965) rotateX(5deg); transform-style: preserve-3d; backface-visibility: hidden; opacity: 0; transition: transform .86s var(--ease-out), opacity .86s var(--ease-out); contain: layout paint; }
.letter-paper::before, .letter-paper::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; backface-visibility: hidden; }
.letter-paper::before { z-index: 0; opacity: .18; background: url("assets_ai-letter-paper-texture.png?v=rev4") center / cover no-repeat; }
.letter-paper::after { z-index: 1; background: repeating-linear-gradient(180deg, transparent 0 calc(var(--line-step) - 1px), var(--paper-rule) calc(var(--line-step) - 1px) var(--line-step)); background-position: 0 var(--line-start); border: 1px solid rgba(34,24,23,.12); box-shadow: inset 0 0 34px rgba(76,48,42,.052); }
.scene-letter.letter-ready .letter-paper { transform: translate3d(0, 0, 0) scale(1) rotateX(0deg); opacity: 1; }
.paper-meta { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#pageCounter { padding: 0; border: 0; background: transparent; }
.handwriting { position: relative; z-index: 2; min-height: 0; margin: 0; padding-top: var(--text-top); white-space: pre-wrap; font-family: var(--font-hand); font-size: var(--letter-font-size); line-height: var(--line-step); font-weight: 600; letter-spacing: .001em; color: #1f1719; text-shadow: 0 .35px 0 rgba(255,255,255,.38); transform: translateZ(.01px); backface-visibility: hidden; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; clip-path: inset(0 0 0 0); }
.handwriting.is-writing { animation: handwritingReveal var(--write-duration, 2600ms) steps(var(--write-steps, 16), end) both; }
.handwriting.is-written { clip-path: inset(0 0 0 0); }
.letter-paper.page-ghost { z-index: 16; pointer-events: none; opacity: 1 !important; transform: translate3d(0,0,5px) rotateY(0deg) !important; transition: none; will-change: transform, opacity, box-shadow; }
.letter-paper.page-ghost .handwriting { clip-path: inset(0 0 0 0) !important; animation: none !important; }
.letter-paper.page-ghost::before { opacity: .2; }
.letter-paper.page-ghost.leave-next { transform-origin: 100% 50%; }
.letter-paper.page-ghost.leave-prev { transform-origin: 0% 50%; }
.letter-paper.page-ghost.leave-next.is-leaving { animation: pageFlipNext .94s cubic-bezier(.16,.82,.18,1) both; }
.letter-paper.page-ghost.leave-prev.is-leaving { animation: pageFlipPrev .94s cubic-bezier(.16,.82,.18,1) both; }
.letter-paper.page-enter-next, .letter-paper.page-enter-prev { z-index: 5; opacity: 1 !important; transition: none; }
.letter-paper.page-enter-next { transform: translate3d(16px, 4px, -24px) scale(.982) rotateY(5deg) !important; }
.letter-paper.page-enter-prev { transform: translate3d(-16px, 4px, -24px) scale(.982) rotateY(-5deg) !important; }
.letter-paper.page-enter-next.is-entering { animation: pageRevealNext .9s var(--ease-out) both; }
.letter-paper.page-enter-prev.is-entering { animation: pageRevealPrev .9s var(--ease-out) both; }
.letter-controls { position: relative; z-index: 45; display: flex; align-items: center; gap: 10px; margin: 4px auto 0; width: min(100%, 520px); padding: 7px; border: 1px solid rgba(34,24,23,.11); border-radius: 999px; background: rgba(255, 255, 255, .82); backdrop-filter: blur(16px); box-shadow: 0 14px 34px rgba(70,43,46,.13); }
.round-nav, .next-page { border: 1px solid rgba(34,24,23,.12); background: rgba(255,255,255,.78); min-height: 45px; cursor: pointer; box-shadow: 0 10px 23px rgba(70,43,46,.09); }
.round-nav { width: 50px; border-radius: 999px; color: var(--rose-deep); font-size: 20px; }
.round-nav:disabled { opacity: .34; cursor: default; }
.next-page { flex: 1; border-radius: 999px; padding: 0 18px 0 22px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,225,234,.86)); }
.swipe-hint { width: min(100%, 520px); margin: 0 auto; text-align: center; color: rgba(25,21,22,.42); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
/* Gallery */
.scene-gallery { display: grid; grid-template-rows: 0 auto minmax(0, 1fr) auto; gap: 10px; }
.gallery-hero { text-align: center; min-height: 0; overflow: hidden; }
.gallery-hero h2, .scene-ending h2 { margin: 0; font-family: var(--font-serif); font-size: clamp(31px, 8.6vw, 50px); line-height: .92; letter-spacing: -.035em; text-wrap: balance; }
.gallery-intro { width: min(338px, 88vw); margin: 9px auto 0; color: var(--muted); font-size: 11.5px; line-height: 1.43; text-wrap: balance; }
.category-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; width: min(100%, 520px); margin: 0 auto; }
.category-button { min-width: 0; min-height: 38px; border: 1px solid var(--hairline); border-radius: 999px; padding: 0 6px; background: rgba(255,255,255,.58); color: rgba(25,21,22,.62); font-size: 11px; font-weight: 900; letter-spacing: .01em; cursor: pointer; transition: transform .25s var(--ease-spring), background .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.category-button:hover { transform: translateY(-2px); }
.category-button[aria-selected="true"] { color: var(--ink); border-color: rgba(216,95,135,.32); background: linear-gradient(135deg, #fff, #ffdce6); box-shadow: 0 12px 28px rgba(216,95,135,.15); }
.gallery-status { margin: 0; color: var(--muted); line-height: 1.35; font-size: 12px; text-align: center; letter-spacing: .02em; }
.gallery-stage { position: relative; min-height: 0; overflow: hidden; width: min(100%, 520px); margin: 0 auto; border-radius: 30px; }
.gallery-stack { position: relative; height: 100%; min-height: 0; perspective: 1100px; transform-style: preserve-3d; overflow: hidden; }
.future-vault { position: absolute; inset: 10px 8px 12px; display: grid; place-items: center; border: 1px solid rgba(34,24,23,.10); border-radius: 30px; background: radial-gradient(circle at 50% 38%, rgba(231,154,176,.20), transparent 45%), rgba(255,255,255,.66); overflow: hidden; cursor: pointer; }
.vault-card { position: absolute; width: 142px; height: 202px; border-radius: 24px; background: linear-gradient(180deg, #fffefb, #f0e5df); box-shadow: 0 22px 42px rgba(70,43,46,.18); transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: .88; }
.vault-card::before { content: ""; position: absolute; inset: 10px 10px 54px; border-radius: 17px; background: var(--g); }
.vault-copy { position: relative; z-index: 2; width: min(250px, 70vw); text-align: center; color: var(--ink); }
.vault-copy strong { display: block; font-family: var(--font-serif); font-size: 34px; line-height: .9; letter-spacing: -.035em; }
.vault-copy span { display: block; margin-top: 10px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.gallery-card { position: absolute; left: 50%; top: 50%; width: var(--w, 150px); height: var(--h, 210px); border: 0; border-radius: 22px; padding: 8px 8px 13px; color: #181314; background: linear-gradient(180deg, #fffefb, #f0e5df); box-shadow: 0 22px 42px rgba(70,43,46,.22), inset 0 1px rgba(255,255,255,.9); cursor: pointer; transform: translate3d(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px)), var(--depth, 0px)) rotate(var(--rot, 0deg)); transform-origin: 50% 88%; animation: cardScatter .72s var(--ease-spring) both; animation-delay: var(--delay, 0ms); transition: transform .38s var(--ease-spring), filter .25s var(--ease-out), z-index .25s step-end; text-align: left; }
.gallery-card:hover, .gallery-card:focus-visible { transform: translate3d(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px) - 14px), 90px) rotate(calc(var(--rot, 0deg) * .55)) scale(1.04); z-index: 99 !important; filter: saturate(1.04) contrast(1.04); }
.photo-art { height: 100%; border-radius: 16px; background: var(--photo-bg, linear-gradient(135deg, #fff, #e79ab0)); background-size: cover; background-position: center; position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.42); }
.photo-art::before, .photo-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.photo-art::before { background: radial-gradient(circle at 22% 18%, rgba(255,255,255,.62), transparent 13%), radial-gradient(circle at 80% 74%, rgba(231,154,176,.26), transparent 18%), linear-gradient(130deg, transparent 0 40%, rgba(255,255,255,.22) 42% 46%, transparent 48% 100%); mix-blend-mode: screen; }
.photo-art::after { opacity: .18; background-image: radial-gradient(circle, rgba(255,255,255,.8) 0 .7px, transparent .9px); background-size: 13px 15px; }
.photo-copy { display: none; }
.photo-copy strong { font-family: var(--font-serif); font-size: 18px; line-height: 1; letter-spacing: -.02em; }
.photo-copy span { color: rgba(24,19,20,.58); font-size: 10px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.quiet-ending-button, .replay-button { width: min(100%, 520px); min-height: 42px; margin: 0 auto; border: 1px solid rgba(34,24,23,.12); border-radius: 999px; background: rgba(255,255,255,.72); color: rgba(25,21,22,.68); font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; box-shadow: 0 10px 25px rgba(70,43,46,.08); }
.scene-ending { display: grid; place-items: center; text-align: center; align-content: center; gap: 14px; }
.ending-mark { position: relative; width: 128px; height: 128px; border-radius: 999px; display: grid; place-items: center; background: radial-gradient(circle, rgba(231,154,176,.24), transparent 63%); animation: endingBreath 6s ease-in-out infinite; }
.ending-mark::before, .ending-mark::after, .ending-mark span { content: ""; position: absolute; border-radius: 999px; border: 1px solid rgba(149,49,79,.18); }
.ending-mark::before { inset: 9px; }
.ending-mark::after { inset: 30px; border-color: rgba(231,154,176,.45); }
.ending-mark span { width: 18px; height: 18px; background: var(--rose-2); border: 0; box-shadow: 0 0 32px rgba(216,95,135,.42); }
.scene-ending h2 { font-size: clamp(40px, 11vw, 66px); }
.ending-copy { width: min(310px, 82vw); margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; text-wrap: balance; }
.ending-signature { margin: 0; color: var(--rose-deep); font-family: var(--font-hand); font-size: clamp(30px, 8.6vw, 44px); }
.replay-button { width: auto; padding: 0 24px; margin-top: 8px; }
.photo-focus { position: absolute; inset: 0; z-index: 80; display: grid; place-items: center; padding: 18px; background: rgba(255,249,246,.74); backdrop-filter: blur(18px); }
.photo-focus[hidden] { display: none; }
.focus-card { position: relative; width: min(100%, 380px); height: min(100%, 690px); max-height: calc(100dvh - 36px); overflow: hidden; border-radius: 32px; padding: 12px 12px 18px; color: var(--ink); background: linear-gradient(180deg, #fffefb, #f0e5df); box-shadow: var(--shadow); animation: focusIn .42s var(--ease-spring) both; display: grid; grid-template-rows: minmax(0, 1fr) auto auto auto auto; }
.focus-close { position: absolute; right: 18px; top: 18px; z-index: 2; width: 42px; height: 42px; border: 0; border-radius: 999px; background: rgba(25,21,22,.76); color: #fffaf7; font-size: 26px; line-height: 1; cursor: pointer; }
.focus-art { min-height: 0; border-radius: 24px; background: linear-gradient(135deg, #fff, #e79ab0); background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.focus-category { margin: 14px 12px 4px; color: var(--rose-deep); font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.focus-card h3 { margin: 0 12px; font-family: var(--font-serif); font-size: 33px; line-height: .94; }
.focus-card p:last-child, .focus-card #focusCaption { margin: 9px 12px 0; color: rgba(29,21,23,.66); line-height: 1.42; font-size: 13px; }
.focus-prompt { display: none !important; margin: 8px 12px 0 !important; padding: 9px 10px; border-radius: 14px; background: rgba(149,49,79,.08); color: rgba(29,21,23,.56) !important; font-size: 11px !important; }
.transition-veil { position: absolute; z-index: 70; inset: 0; pointer-events: none; opacity: 0; transform: scale(.82); background: radial-gradient(circle at 50% 48%, rgba(255,255,255,.96), rgba(231,154,176,.42) 22%, transparent 60%); transition: opacity .62s var(--ease-out), transform .62s var(--ease-out); mix-blend-mode: multiply; }
.transition-veil.is-flashing { opacity: .6; transform: scale(1.25); }
.noscript { position: fixed; inset: auto 16px 16px; background: #fffaf5; color: #1d1517; padding: 14px; border-radius: 14px; z-index: 100; }
@media (min-width: 700px) {
  body { display: grid; place-items: center; padding: 24px; position: static; }
  .app-shell { position: relative; width: min(460px, 100vw); height: min(920px, calc(100dvh - 48px)); border: 1px solid rgba(34,24,23,.10); border-radius: 42px; box-shadow: 0 38px 120px rgba(80,42,50,.16); }
  .global-header { left: calc(50% - 216px); right: calc(50% - 216px); }
}
@media (max-width: 374px) {
  .global-header { left: 9px; right: 9px; gap: 6px; padding: 6px; }
  .scene-nav-button { padding: 0 8px; font-size: 10px; }
  .music-toggle { padding: 0 8px; font-size: 9px; }
  .scene { padding-left: 17px; padding-right: 17px; }
  .cover-copy h1 { font-size: clamp(42px, 14vw, 62px); }
  .voice-meaning { font-size: 11px; }
  .handwriting { font-size: clamp(23px, 6.05vw, 30px); }
  .category-button { font-size: 10px; }
}
@media (max-height: 760px) {
  .global-header { top: max(8px, env(safe-area-inset-top)); }
  .scene { padding-top: calc(max(66px, env(safe-area-inset-top) + 56px)); }
  .scene-cover {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: center;
  justify-items: center;
  text-align: center;
  gap: 12px;
  padding-top: calc(max(78px, env(safe-area-inset-top) + 62px));
  padding-bottom: max(42px, env(safe-area-inset-bottom) + 34px);
}
.cover-copy { position: relative; z-index: 2; display: grid; justify-items: center; gap: 7px; }
.cover-copy h1 { margin: 0; max-width: min(342px, 86vw); font-family: var(--font-serif); font-size: clamp(43px, 12.2vw, 72px); line-height: .91; letter-spacing: -.055em; font-weight: 700; text-wrap: balance; color: transparent; background: linear-gradient(105deg, #191516 4%, #b24c6a 55%, #e79ab0 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 14px 34px rgba(216,95,135,.14)); }
.cover-copy h1 span { display: inline; }
.cover-dedication { margin: 0; color: rgba(25,21,22,.64); font-family: var(--font-serif); font-size: clamp(15px, 4.2vw, 20px); line-height: 1; letter-spacing: .035em; }
.cover-date, .voice-meaning, .secret-note { display: none !important; }
.single-rose { position: relative; width: min(150px, 42vw); height: min(220px, 27dvh); margin: -2px 0 -8px; display: grid; place-items: center; opacity: .99; animation: roseBreathe 5.8s ease-in-out infinite; filter: drop-shadow(0 18px 44px rgba(216,95,135,.20)); pointer-events: none; }
.single-rose img { display: block; width: 100%; height: 100%; object-fit: contain; }
.play-button { position: relative; width: 116px; height: 116px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; display: grid; place-items: center; margin-top: 4px; align-self: start; }
.play-rings, .play-rings::before, .play-rings::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.play-rings { background: conic-gradient(from 130deg, rgba(216,95,135,0), rgba(255,255,255,.96), rgba(231,154,176,.86), rgba(216,95,135,0)); animation: spin 12s linear infinite; filter: drop-shadow(0 0 24px rgba(216,95,135,.16)); }
.play-rings::before { inset: 8px; background: var(--bg); }
.play-rings::after { inset: 18px; border: 1px solid rgba(34,24,23,.10); box-shadow: inset 0 0 24px rgba(216,95,135,.06); }
.play-disc { position: relative; width: 66px; height: 66px; border-radius: inherit; border: 1px solid rgba(34,24,23,.14); background: linear-gradient(145deg, #fff, #fff0f5); box-shadow: inset 0 1px rgba(255,255,255,.75), 0 18px 42px rgba(80,42,50,.16); display: grid; place-items: center; transition: transform .35s var(--ease-spring); }
.play-button:hover .play-disc { transform: scale(1.06); }
.play-triangle { width: 0; height: 0; margin-left: 5px; border-left: 17px solid var(--rose-deep); border-top: 11px solid transparent; border-bottom: 11px solid transparent; filter: drop-shadow(0 0 14px rgba(216,95,135,.38)); }
.play-label { position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); color: rgba(25,21,22,.58); font-size: 10.5px; font-weight: 900; letter-spacing: .07em; text-transform: none; white-space: nowrap; }
  .scene-letter { grid-template-rows: clamp(88px, 16dvh, 118px) minmax(0, 1fr) auto auto; gap: 6px; }
  .envelope { width: min(230px, 64vw); min-height: 92px; height: 108px; }
  .wax-seal { width: 31px; height: 31px; font-size: 19px; }
  .letter-paper { --line-step: clamp(26px, 4.2dvh, 30px); --line-start: 53px; padding-left: 28px; padding-right: 21px; border-radius: 18px; }
  .handwriting { padding-top: 20px; font-size: clamp(23px, 6vw, 31px); }
  .paper-meta { top: 8px; font-size: 9px; }
  .round-nav, .next-page { min-height: 42px; }
  .gallery-hero h2 { font-size: clamp(28px, 7.4vw, 42px); }
  .gallery-intro { display: none; }
}
@media (max-height: 640px) {
  .scene-letter { grid-template-rows: clamp(68px, 13dvh, 88px) minmax(0, 1fr) auto 0; gap: 5px; }
  .envelope { transform: translateY(4px) rotateX(7deg) scale(.82); transform-origin: center bottom; }
  .swipe-hint { opacity: 0; pointer-events: none; }
  .letter-paper { --line-step: 27px; --line-start: 47px; padding-left: 25px; padding-right: 18px; }
  .handwriting { padding-top: 17px; font-size: clamp(21px, 5.15vw, 25px); }
  .gallery-hero .eyebrow { display: none; }
  .gallery-hero h2 { font-size: clamp(25px, 7vw, 36px); }
  .category-button { min-height: 34px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; } }
@keyframes floatGlow { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(6vw,-4vh,0) scale(1.08); } }
@keyframes grainDrift { from { transform: translate3d(0,0,0) rotate(7deg); } to { transform: translate3d(-80px,56px,0) rotate(7deg); } }
@keyframes dotPulse { 0%, 100% { transform: scale(.8); opacity: .62; } 50% { transform: scale(1.28); opacity: 1; } }
@keyframes roseBreathe { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-6px) rotate(1deg); } }
@keyframes secretIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin { to { transform: rotate(1turn); } }
@keyframes envelopeArrive { from { opacity: 0; transform: translateY(28px) rotateX(20deg) scale(.92); } to { opacity: 1; transform: translateY(8px) rotateX(7deg) scale(1); } }
@keyframes sheetPullOut { 0% { opacity: .16; transform: translateY(38px) scale(.82); } 34% { opacity: 1; transform: translateY(-24px) scale(1); } 66% { opacity: .88; transform: translateY(42px) scale(1.28); } 100% { opacity: 0; transform: translateY(142px) scale(1.7); } }
@keyframes paperFromEnvelope { 0% { opacity: 0; transform: translateY(-78px) scale(.58) rotateX(12deg); filter: blur(.6px); } 38% { opacity: 0; transform: translateY(-48px) scale(.72) rotateX(10deg); } 72% { opacity: .94; transform: translateY(10px) scale(1.012) rotateX(0deg); filter: blur(0); } 100% { opacity: 1; transform: translateY(0) scale(1) rotateX(0deg); filter: blur(0); } }
@keyframes underlayWake { 0%, 45% { opacity: 0; transform: translateY(-16px) scale(.94); } 100% { opacity: .88; transform: translateY(6px) scale(.985); } }
@keyframes underlayWakeSoft { 0%, 55% { opacity: 0; transform: translateY(-11px) scale(.93); } 100% { opacity: .48; transform: translateY(13px) scale(.965); } }
@keyframes inkDraw { 0% { opacity: 0; filter: blur(1.2px); clip-path: inset(0 100% 0 0); transform: translateY(1px) skewX(-7deg); } 55% { opacity: .72; filter: blur(.45px); } 100% { opacity: 1; filter: blur(0); clip-path: inset(0 0 0 0); transform: translateY(0) skewX(0); } }
@keyframes cursorBlink { 0%, 48% { opacity: 1; } 49%, 100% { opacity: 0; } }
@keyframes sheetToBottom { 0% { opacity: 1; transform: translateY(0) scale(1) rotateX(0deg); box-shadow: var(--paper-shadow); } 48% { opacity: .92; transform: translateY(34px) scale(.985) rotateX(-5deg); } 100% { opacity: .32; transform: translateY(96px) scale(.94) rotateX(-13deg); filter: blur(.75px); box-shadow: 0 8px 20px rgba(64,43,39,.10); } }
@keyframes sheetFromTop { 0% { opacity: .45; transform: translateY(-74px) scale(.965) rotateX(12deg); filter: blur(.45px); } 58% { opacity: .96; transform: translateY(8px) scale(1.01) rotateX(0deg); filter: blur(0); } 100% { opacity: 1; transform: translateY(0) scale(1) rotateX(0deg); } }
@keyframes sheetToTop { 0% { opacity: 1; transform: translateY(0) scale(1) rotateX(0deg); box-shadow: var(--paper-shadow); } 50% { opacity: .82; transform: translateY(-30px) scale(.982) rotateX(5deg); } 100% { opacity: .24; transform: translateY(-92px) scale(.94) rotateX(13deg); filter: blur(.75px); box-shadow: 0 8px 20px rgba(64,43,39,.10); } }
@keyframes sheetFromBottom { 0% { opacity: .42; transform: translateY(92px) scale(.945) rotateX(-10deg); filter: blur(.5px); } 62% { opacity: .98; transform: translateY(-6px) scale(1.008) rotateX(0deg); filter: blur(0); } 100% { opacity: 1; transform: translateY(0) scale(1) rotateX(0deg); } }

@keyframes handwritingReveal { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pageFlipNext { 0% { opacity: 1; transform: translate3d(0,0,5px) rotateY(0deg) skewY(0deg); box-shadow: var(--paper-shadow); } 36% { opacity: 1; transform: translate3d(-10px,1px,22px) rotateY(-46deg) skewY(-1.8deg); box-shadow: -18px 24px 42px rgba(64,43,39,.22); } 70% { opacity: .9; transform: translate3d(-44px,3px,30px) rotateY(-94deg) skewY(-3deg); box-shadow: -26px 28px 52px rgba(64,43,39,.17); } 100% { opacity: 0; transform: translate3d(-76px,5px,8px) rotateY(-118deg) skewY(-3.8deg) scale(.985); box-shadow: -10px 12px 24px rgba(64,43,39,.08); } }
@keyframes pageFlipPrev { 0% { opacity: 1; transform: translate3d(0,0,5px) rotateY(0deg) skewY(0deg); box-shadow: var(--paper-shadow); } 36% { opacity: 1; transform: translate3d(10px,1px,22px) rotateY(46deg) skewY(1.8deg); box-shadow: 18px 24px 42px rgba(64,43,39,.22); } 70% { opacity: .9; transform: translate3d(44px,3px,30px) rotateY(94deg) skewY(3deg); box-shadow: 26px 28px 52px rgba(64,43,39,.17); } 100% { opacity: 0; transform: translate3d(76px,5px,8px) rotateY(118deg) skewY(3.8deg) scale(.985); box-shadow: 10px 12px 24px rgba(64,43,39,.08); } }
@keyframes pageRevealNext { from { opacity: .78; transform: translate3d(16px, 4px, -24px) scale(.982) rotateY(5deg); filter: brightness(.965); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotateY(0deg); filter: brightness(1); } }
@keyframes pageRevealPrev { from { opacity: .78; transform: translate3d(-16px, 4px, -24px) scale(.982) rotateY(-5deg); filter: brightness(.965); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotateY(0deg); filter: brightness(1); } }
@keyframes cardScatter { 0% { opacity: 0; transform: translate3d(-50%, calc(-50% + 68px), -180px) rotate(0deg) scale(.82); filter: blur(8px) saturate(.65); } 62% { opacity: 1; } 100% { opacity: 1; transform: translate3d(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px)), var(--depth, 0px)) rotate(var(--rot, 0deg)) scale(1); filter: blur(0) saturate(1); } }
@keyframes focusIn { from { opacity: 0; transform: translateY(24px) scale(.94) rotate(-1deg); } to { opacity: 1; transform: translateY(0) scale(1) rotate(0); } }
@keyframes endingBreath { 0%, 100% { transform: scale(.96); opacity: .72; } 50% { transform: scale(1.05); opacity: 1; } }