:root {
  --ink: #0d0a18;
  --ink-2: #191428;
  --cream: #f7efe5;
  --paper: #fff9f1;
  --rose: #d88d91;
  --rose-light: #efc0b5;
  --amber: #efb593;
  --violet: #857ab7;
  --lilac: #c7bce0;
  --muted: #817a8b;
  --line: rgba(247, 239, 229, .24);
  --dark-line: rgba(22, 15, 29, .16);
  --serif: 'Playfair Display', 'Noto Serif SC', 'Songti SC', serif;
  --mono: 'DM Mono', 'SFMono-Regular', Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans SC', sans-serif;
  --gutter: clamp(22px, 6vw, 96px);
  --ease: cubic-bezier(.21, .8, .2, 1);
  --night-opacity: 1;
  --rose-opacity: 0;
  --dawn-opacity: 0;
  --film-progress: 0;
  --page-progress: 0;
  --atmosphere-rose: .22;
  --atmosphere-violet: .28;
  --entry-progress: 0;
  --entry-duration: 2.8s;
  --cursor-x: -200px;
  --cursor-y: -200px;
  --touch-x: 50vw;
  --touch-y: 50vh;
  --touch-active: 0;
  --touch-scale: 1;
}

* { box-sizing: border-box; }
html { background: var(--ink); scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; overflow-x: hidden; color: var(--cream); background: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; touch-action: pan-y pinch-zoom; }
body.viewer-open { overflow: hidden; }
main { position: relative; z-index: 2; }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, label:focus-within { outline: 2px solid var(--amber); outline-offset: 5px; }
::selection { color: var(--ink); background: var(--rose-light); }

html.requires-entry, html.requires-entry body { overflow: hidden; }
html.entry-passed .entry-gate { display: none; }

/* Ceremonial entrance: one persistent thread and heart carry the visitor into the first scene. */
.entry-gate { position: fixed; z-index: 200; inset: 0; overflow: hidden; color: var(--cream); background: radial-gradient(70% 95% at 78% 15%, rgba(75,61,118,.58), transparent 62%), radial-gradient(58% 72% at 17% 88%, rgba(101,58,82,.46), transparent 66%), #090914; isolation: isolate; }
.entry-gate__aurora, .entry-gate__grain, .entry-gate__beams, .entry-gate__rings, .entry-gate__eclipse, .entry-gate__stars, .entry-gate__thread { position: absolute; inset: 0; pointer-events: none; }
.festival-fireworks { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.festival-fireworks::before { position: absolute; z-index: 2; inset: 0; content: ''; background: radial-gradient(ellipse at 50% 78%, rgba(43,31,76,.5), rgba(6,8,23,.94) 76%); opacity: 0; transition: opacity .35s ease; }
.festival-fireworks canvas { position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .3s ease; }
.festival-fireworks.is-playing canvas { opacity: 1; }
.festival-fireworks.is-playing::before { opacity: 1; }
.festival-fireworks.is-finishing canvas,
.festival-fireworks.is-finishing::before { opacity: 0; }
.entry-gate__aurora { z-index: 0; background: radial-gradient(36% 42% at 50% 45%, rgba(224,143,145,.22), transparent 72%), conic-gradient(from 195deg at 50% 52%, transparent, rgba(133,113,184,.12), transparent 34%, rgba(239,181,147,.1), transparent 66%); filter: blur(12px); animation: entryAurora 9s ease-in-out infinite alternate; }
.entry-gate__grain { z-index: 7; opacity: .075; 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='.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.46'/%3E%3C/svg%3E"); mix-blend-mode: screen; }
.entry-gate__beams { z-index: 1; overflow: hidden; opacity: 0; background: linear-gradient(112deg, transparent 16%, rgba(239,181,147,.13) 29%, transparent 42%), linear-gradient(292deg, transparent 34%, rgba(137,122,187,.16) 53%, transparent 69%); mix-blend-mode: screen; transform: scale(1.18); }
.entry-gate__beams::before, .entry-gate__beams::after { position: absolute; top: -28%; width: 24%; height: 160%; content: ''; background: linear-gradient(90deg, transparent, rgba(255,231,211,.23), transparent); filter: blur(18px); transform: rotate(19deg); }.entry-gate__beams::before { left: 21%; }.entry-gate__beams::after { right: 18%; opacity: .7; transform: rotate(-27deg); }
.entry-gate.is-running .entry-gate__beams { animation: entryBeams var(--entry-duration) cubic-bezier(.2,.7,.14,1) both; }
.entry-gate__rings { z-index: 1; top: 50%; left: 50%; width: min(72vw, 900px); height: min(72vw, 900px); inset: auto; transform: translate(-50%, -50%); transition: opacity 1.15s ease, transform 1.45s var(--ease); }
.entry-gate__rings i { position: absolute; border: 1px solid rgba(247,239,229,.11); border-radius: 50%; animation: entryRing 18s linear infinite; }
.entry-gate__rings i:nth-child(1) { inset: 0; border-color: rgba(199,188,224,.14); }
.entry-gate__rings i:nth-child(2) { inset: 17%; border-color: rgba(239,181,147,.17); animation-duration: 13s; animation-direction: reverse; }
.entry-gate__rings i:nth-child(3) { inset: 34%; border-color: rgba(216,141,145,.2); animation-duration: 9s; }
.entry-gate__rings i::before { position: absolute; top: 50%; left: -3px; width: 6px; height: 6px; border-radius: 50%; content: ''; background: var(--rose-light); box-shadow: 0 0 18px rgba(239,192,181,.78); }
.entry-gate__eclipse { z-index: 2; top: 50%; left: 50%; width: min(23vw, 280px); aspect-ratio: 1; inset: auto; border: 1px solid rgba(247,239,229,.24); border-radius: 50%; opacity: 0; background: radial-gradient(circle at 45% 38%, rgba(255,238,220,.76), rgba(239,181,147,.21) 16%, rgba(132,111,187,.16) 39%, transparent 68%); box-shadow: 0 0 0 14px rgba(239,181,147,.035), 0 0 95px rgba(239,181,147,.34), inset 0 0 72px rgba(255,238,220,.16); transform: translate(-50%, -50%) scale(.28); }.entry-gate__eclipse i { position: absolute; border: 1px solid rgba(247,239,229,.35); border-radius: inherit; animation: entryRing 8s linear infinite; }.entry-gate__eclipse i:nth-child(1) { inset: -26%; border-color: rgba(239,181,147,.3); }.entry-gate__eclipse i:nth-child(2) { inset: 15%; border-color: rgba(199,188,224,.42); animation-duration: 5.8s; animation-direction: reverse; }.entry-gate__eclipse i:nth-child(3) { inset: 36%; border-color: rgba(255,238,220,.48); animation-duration: 4.2s; }
.entry-gate.is-running .entry-gate__eclipse { animation: entryEclipse var(--entry-duration) cubic-bezier(.18,.77,.2,1) both; }
.entry-gate__stars { z-index: 1; }
.entry-gate__stars i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: rgba(255,249,241,.85); box-shadow: 0 0 14px rgba(255,249,241,.5); animation: twinkle 4.8s ease-in-out infinite; }
.entry-gate__stars i:nth-child(1) { top:14%; left:12%; animation-delay:-1s; }.entry-gate__stars i:nth-child(2) { top:27%; left:77%; animation-delay:-3s; }.entry-gate__stars i:nth-child(3) { top:71%; left:18%; animation-delay:-2s; }.entry-gate__stars i:nth-child(4) { top:82%; left:85%; animation-delay:-4s; }.entry-gate__stars i:nth-child(5) { top:8%; left:55%; animation-delay:-2.5s; }.entry-gate__stars i:nth-child(6) { top:59%; left:91%; animation-delay:-.8s; }.entry-gate__stars i:nth-child(7) { top:42%; left:7%; animation-delay:-3.8s; }.entry-gate__stars i:nth-child(8) { top:91%; left:51%; animation-delay:-1.7s; }
.entry-gate__thread { z-index: 3; width: 100%; height: 100%; overflow: visible; transition: filter 1.1s ease, opacity 1.1s ease; }
.entry-gate__thread > path { fill: none; stroke: rgba(239,181,147,.76); stroke-width: 1.2; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 9px rgba(216,141,145,.38)); }
.entry-gate__thread-soft { stroke: rgba(199,188,224,.19) !important; stroke-width: 5 !important; filter: blur(8px) !important; }
.entry-gate__thread circle { fill: var(--rose); opacity: .32; filter: blur(10px); }
.entry-gate__thread #entryHeart { fill: var(--rose-light); stroke: rgba(255,244,235,.9); stroke-width: 1.3; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 13px rgba(239,181,147,.86)); }
.entry-gate__story { position: absolute; z-index: 4; top: 50%; left: 50%; width: min(930px, calc(100% - 44px)); text-align: center; opacity: 0; transform: translate(-50%, -42%) scale(.96); pointer-events: none; }
.entry-gate.is-running .entry-gate__story { animation: entryStory var(--entry-duration) var(--ease) forwards; }
.entry-gate.is-running .entry-gate__story h1 { animation: entryNameCharge var(--entry-duration) cubic-bezier(.18,.82,.2,1) both; }
.entry-gate.is-running .entry-gate__story p, .entry-gate.is-running .entry-gate__story span { animation: entryStoryWhisper var(--entry-duration) var(--ease) both; }
.entry-gate__story p { margin: 0 0 30px; color: var(--amber); font: 500 10px/1 var(--mono); letter-spacing: .2em; }.entry-gate__story p i { color: var(--rose); font-style: normal; }
.entry-gate__story h1 { margin: 0; font: 500 clamp(58px, 9.4vw, 148px)/.84 var(--serif); letter-spacing: -.078em; text-shadow: 0 20px 70px rgba(0,0,0,.26); }.entry-gate__story h1 em { color: var(--rose-light); font-size: .42em; font-style: italic; vertical-align: .24em; }
.entry-gate__story span { display: block; margin-top: 38px; color: rgba(247,239,229,.68); font: italic 400 clamp(15px,1.5vw,21px)/1.6 var(--serif); letter-spacing: .03em; }
.entry-gate__festival-copy { position: absolute; z-index: 8; top: 50%; left: 50%; display: grid; width: min(920px, calc(100% - 44px)); min-height: 170px; place-items: center; text-align: center; opacity: 0; pointer-events: none; transform: translate(-50%, -50%); transition: opacity .32s ease; }
.entry-gate__festival-message { grid-area: 1 / 1; max-width: 100%; margin: 0; color: var(--cream); font: 500 72px/1.12 var(--serif); letter-spacing: 0; text-shadow: 0 8px 38px rgba(0,0,0,.34), 0 0 34px rgba(239,181,147,.24); opacity: 0; transform: translateY(18px) scale(.94); filter: blur(8px); transition: opacity .2s ease, transform .55s var(--ease), filter .55s ease; }
.entry-gate__festival-message--promise { color: var(--rose-light); font-size: 88px; text-shadow: 0 8px 38px rgba(0,0,0,.38), 0 0 28px rgba(133,122,187,.45); }
.entry-gate.is-festival-flow .entry-gate__festival-copy { opacity: 1; }
.entry-gate.is-festival-flow .entry-gate__story,
.entry-gate.is-festival-flow .entry-gate__progress,
.entry-gate.is-festival-flow .entry-gate__welcome { opacity: 0 !important; animation: none !important; }
.entry-gate.is-festival-flow .entry-gate__rings,
.entry-gate.is-festival-flow .entry-gate__eclipse,
.entry-gate.is-festival-flow .entry-gate__thread,
.entry-gate.is-festival-flow .line-puppy-art--entry { filter: brightness(.56) saturate(.8); }
.entry-gate.is-festival-question .entry-gate__festival-message--question { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); transition-delay: .08s; }
.entry-gate.is-festival-promise .entry-gate__festival-message--promise { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); transition-delay: .22s; }
.entry-gate.is-festival-finale .entry-gate__festival-message--promise { opacity: 0; transform: translateY(-15px) scale(1.04); filter: blur(7px); transition-duration: .82s; transition-delay: 0s; }
.entry-gate.is-festival-finale .entry-gate__festival-copy { opacity: .22; transition-duration: .82s; }
.entry-gate.is-festival-flow:not(.is-festival-login-ready) .entry-login { opacity: 0 !important; animation: none !important; pointer-events: none !important; transform: translate(-50%, -43%) scale(.94); filter: blur(12px); }
.entry-gate.is-festival-login-ready .entry-gate__festival-copy { opacity: 0; transition-duration: .32s; }
.entry-gate.is-festival-login-ready .entry-login { animation: festivalLoginArrive var(--festival-login-duration, 900ms) var(--ease) both !important; }
.entry-gate.is-festival-login-ready:not(.is-form-ready) .entry-login { pointer-events: none !important; }
.entry-gate.is-festival-login-ready.is-form-ready .entry-login { pointer-events: auto; }
.entry-login { position: absolute; z-index: 5; top: 50%; left: 50%; width: min(590px, calc(100% - 40px)); padding: clamp(34px,4.5vw,58px) clamp(27px,4.6vw,55px) clamp(31px,4vw,48px); border: 1px solid rgba(247,239,229,.16); color: var(--cream); background: linear-gradient(145deg, rgba(27,20,42,.78), rgba(49,29,48,.61)); box-shadow: 0 38px 130px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.05); opacity: 0; transform: translate(-50%, -40%) scale(.92); pointer-events: none; backdrop-filter: blur(24px) saturate(1.18); }
.entry-gate.is-running .entry-login { animation: entryLoginArrive var(--entry-duration) cubic-bezier(.18,.8,.2,1) forwards; }
.entry-gate.is-form-ready .entry-login { pointer-events: auto; }
.entry-login__seal { position: absolute; top: 0; left: 50%; display: flex; align-items: center; justify-content: center; gap: 3px; width: 54px; height: 54px; border: 1px solid rgba(247,239,229,.34); border-radius: 50%; color: var(--cream); background: #1b1429; font: 500 11px/1 var(--mono); transform: translate(-50%, -50%); box-shadow: 0 0 45px rgba(216,141,145,.22); }.entry-login__seal svg { width: 24px; height: 24px; fill: var(--rose); }
.entry-login__date { margin: 7px 0 21px; color: var(--amber); font: 500 9px/1 var(--mono); letter-spacing: .17em; text-align: center; }
.entry-login h2 { margin: 0; font: 500 clamp(37px,4vw,53px)/.95 var(--serif); letter-spacing: -.065em; text-align: center; }
.entry-login__lead { max-width: 390px; margin: 23px auto 31px; color: rgba(247,239,229,.64); font: 400 15px/1.78 var(--serif); text-align: center; }
.entry-login__fields { display: grid; gap: 17px; transition: opacity .35s ease, transform .5s var(--ease); }
.entry-field { display: grid; gap: 9px; }.entry-field > span:first-child { color: rgba(247,239,229,.55); font: 500 9px/1 var(--mono); letter-spacing: .12em; }
.entry-field input { width: 100%; height: 51px; padding: 0 16px; border: 0; border-bottom: 1px solid rgba(247,239,229,.32); border-radius: 0; outline: 0; color: var(--cream); background: rgba(255,255,255,.035); font: 500 14px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; transition: border-color .3s ease, background .3s ease, box-shadow .3s ease; }
.entry-field input::placeholder { color: rgba(247,239,229,.29); text-transform: none; }.entry-field input:focus { border-color: var(--amber); background: rgba(255,255,255,.065); box-shadow: 0 9px 28px rgba(0,0,0,.12); }
.entry-field__password { position: relative; display: block; }.entry-field__password input { padding-right: 52px; text-transform: none; }
.entry-field__password button { position: absolute; top: 50%; right: 9px; display: grid; width: 35px; height: 35px; padding: 0; border: 0; border-radius: 50%; color: rgba(247,239,229,.52); background: transparent; place-items: center; cursor: pointer; transform: translateY(-50%); transition: color .25s ease, background .25s ease; }.entry-field__password button:hover, .entry-field__password button:focus-visible { color: var(--amber); background: rgba(255,255,255,.06); }.entry-field__password svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.entry-login__submit { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 27px; padding: 16px 2px 13px; border: 0; border-bottom: 1px solid rgba(239,181,147,.62); color: var(--cream); background: transparent; font: 500 10px/1 var(--mono); letter-spacing: .12em; cursor: pointer; transition: color .25s ease, padding .42s var(--ease), border-color .25s ease; }.entry-login__submit svg { width: 28px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--ease); }.entry-login__submit:hover, .entry-login__submit:focus-visible { padding-right: 9px; padding-left: 9px; color: var(--amber); border-color: var(--amber); }.entry-login__submit:hover svg { transform: translateX(4px); }
.entry-login__status { min-height: 17px; margin: 14px 0 0; color: var(--rose-light); font: 500 9px/1.6 var(--mono); letter-spacing: .06em; text-align: center; }
.entry-login.is-invalid { animation: entryShake .52s ease; }.entry-login.is-validating .entry-login__submit { opacity: .6; pointer-events: none; }
.entry-gate__welcome { position: absolute; z-index: 6; top: 50%; left: 50%; display: grid; width: min(620px, calc(100% - 40px)); text-align: center; opacity: 0; pointer-events: none; transform: translate(-50%, -42%); }.entry-gate__welcome span { color: var(--amber); font: 500 9px/1 var(--mono); letter-spacing: .18em; }.entry-gate__welcome strong { margin: 24px 0 18px; font: italic 500 clamp(44px,7vw,88px)/.9 var(--serif); letter-spacing: -.065em; }.entry-gate__welcome i { color: rgba(247,239,229,.62); font: 400 16px/1.5 var(--serif); }
.entry-gate__progress { position: absolute; z-index: 6; bottom: 30px; left: 50%; display: flex; align-items: center; gap: 14px; margin: 0; color: rgba(247,239,229,.38); font: 500 8px/1 var(--mono); letter-spacing: .12em; transform: translateX(-50%); white-space: nowrap; }.entry-gate__progress span { display: block; width: 88px; height: 1px; background: linear-gradient(90deg, var(--amber) calc(var(--entry-progress) * 100%), rgba(247,239,229,.18) 0); }.entry-gate__progress i { font-style: normal; }
.entry-gate.is-approaching .entry-gate__rings { opacity: .8; transform: translate(-50%, -50%) scale(1.08); }.entry-gate.is-approaching .entry-gate__thread { filter: brightness(1.3) saturate(1.15); }.entry-gate.is-gathering .entry-gate__rings { opacity: .2; transform: translate(-50%, -50%) scale(.52); }.entry-gate.is-gathering .entry-gate__thread { filter: brightness(1.55) saturate(1.3); }
.entry-gate.is-authenticated .entry-login { opacity: 0 !important; transform: translate(-50%, -57%) scale(.97) !important; transition: opacity .42s ease, transform .7s var(--ease); animation: none; pointer-events: none; }.entry-gate.is-authenticated .entry-gate__story, .entry-gate.is-authenticated .entry-gate__progress { opacity: 0; transition: opacity .25s ease; }.entry-gate.is-authenticated .entry-gate__welcome { animation: entryWelcome 1.55s var(--ease) forwards; }.entry-gate.is-authenticated .entry-gate__rings { opacity: .28; transform: translate(-50%, -50%) scale(1.25); transition: opacity 1.3s ease, transform 1.5s var(--ease); }.entry-gate.is-authenticated .entry-gate__aurora { opacity: .26; transition: opacity 1.4s ease; }
.entry-gate.is-leaving { opacity: 0; visibility: hidden; transition: opacity .78s ease, visibility .78s step-end; }

.cursor-glow {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 165, 161, .18), rgba(134, 113, 184, .08) 32%, transparent 70%);
  pointer-events: none;
  transform: translate3d(calc(var(--cursor-x) - 50%), calc(var(--cursor-y) - 50%), 0);
  filter: blur(2px);
  transition: opacity .35s ease;
}

/* A finger leaves a soft, short-lived light in the scene without taking control away from native scrolling. */
.touch-aura { position: fixed; z-index: 1; top: 0; left: 0; width: min(62vw, 520px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,222,201,.23), rgba(225,144,157,.11) 27%, rgba(117,97,177,.07) 47%, transparent 71%); opacity: var(--touch-active); pointer-events: none; transform: translate3d(calc(var(--touch-x) - 50%), calc(var(--touch-y) - 50%), 0) scale(var(--touch-scale)); filter: blur(2px); mix-blend-mode: screen; transition: opacity .3s ease, transform .42s var(--ease); will-change: transform, opacity; }

.ambient-petals { position: fixed; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; }
.ambient-petals i { position: absolute; display: block; width: 7px; height: 11px; border-radius: 70% 25% 70% 25%; background: linear-gradient(145deg, rgba(239,192,181,.9), rgba(216,141,145,.2)); opacity: .42; animation: driftDown 14s linear infinite; }
.ambient-petals i:nth-child(1) { top: -7%; left: 7%; animation-delay: -2s; animation-duration: 17s; }
.ambient-petals i:nth-child(2) { top: 7%; left: 22%; animation-delay: -8s; animation-duration: 19s; }
.ambient-petals i:nth-child(3) { top: -9%; left: 41%; animation-delay: -1s; }
.ambient-petals i:nth-child(4) { top: 26%; left: 58%; animation-delay: -10s; animation-duration: 18s; }
.ambient-petals i:nth-child(5) { top: -5%; left: 73%; animation-delay: -6s; animation-duration: 16s; }
.ambient-petals i:nth-child(6) { top: 12%; left: 91%; animation-delay: -13s; }
.ambient-petals i:nth-child(7) { top: 61%; left: 4%; animation-delay: -9s; animation-duration: 21s; }
.ambient-petals i:nth-child(8) { top: 53%; left: 30%; animation-delay: -4s; animation-duration: 15s; }
.ambient-petals i:nth-child(9) { top: 35%; left: 83%; animation-delay: -11s; animation-duration: 20s; }
.ambient-petals i:nth-child(10) { top: 77%; left: 65%; animation-delay: -7s; animation-duration: 18s; }
.ambient-petals i:nth-child(11) { top: 88%; left: 48%; animation-delay: -14s; }
.ambient-petals i:nth-child(12) { top: 72%; left: 96%; animation-delay: -3s; animation-duration: 22s; }

/* One continuous atmosphere sits behind the whole memory instead of resetting at each chapter. */
.memory-atmosphere { position: fixed; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; background: #120d20; }
.memory-atmosphere::before, .memory-atmosphere::after { position: absolute; inset: -18%; content: ''; transition: opacity .65s ease; }
.memory-atmosphere::before { opacity: var(--atmosphere-violet); background: radial-gradient(42% 54% at 12% 76%, rgba(108,91,170,.9), transparent 68%), radial-gradient(49% 48% at 86% 19%, rgba(115,79,144,.8), transparent 70%); filter: blur(18px); }
.memory-atmosphere::after { opacity: var(--atmosphere-rose); background: radial-gradient(43% 52% at 74% 58%, rgba(229,136,139,.92), transparent 70%), radial-gradient(35% 42% at 29% 22%, rgba(243,185,150,.68), transparent 72%); filter: blur(24px); }
.memory-thread { position: fixed; z-index: 1; inset: 0; overflow: hidden; opacity: .62; pointer-events: none; mix-blend-mode: screen; transition: opacity .45s ease; }
.memory-thread svg { display: block; width: 100%; height: 100%; overflow: visible; }
.memory-thread path { fill: none; stroke: rgba(246,185,166,.82); stroke-width: 1.45; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 8px rgba(238,150,153,.38)); }
.memory-thread__soft { stroke: rgba(199,188,224,.22) !important; stroke-width: 4.5 !important; filter: blur(7px); }
.memory-thread circle { fill: var(--rose); opacity: .34; filter: blur(10px); }
.memory-thread #memoryThreadHeart { fill: var(--rose-light); stroke: rgba(255,242,232,.9); stroke-width: 1.15; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 10px rgba(239,181,147,.75)); animation: memoryHeartBreathe 2.7s ease-in-out infinite; }

.memory-mark {
  position: fixed;
  z-index: 30;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  padding: 0 var(--gutter);
  pointer-events: none;
}
.memory-mark__seal, .motion-toggle, .memory-mark__actions { pointer-events: auto; }
.memory-mark__seal { display: inline-flex; align-items: center; justify-content: center; gap: 3px; width: 38px; height: 38px; padding: 0; border: 1px solid rgba(247,239,229,.62); border-radius: 50%; color: var(--cream); background: transparent; font: 500 10px/1 var(--mono); cursor: pointer; transition: color .3s ease, border-color .3s ease, transform .45s var(--ease); }
.memory-mark__heart { width: 18px; height: 18px; fill: currentColor; }
.memory-mark__seal i { color: var(--rose); font-style: normal; }
.memory-mark__seal:hover { color: var(--amber); border-color: var(--amber); transform: rotate(14deg); }
.memory-mark > p { position: absolute; left: 50%; margin: 0; color: rgba(247,239,229,.62); font: 500 9px/1 var(--mono); letter-spacing: .16em; transform: translateX(-50%); }
.memory-mark__actions { display: inline-flex; align-items: center; gap: 19px; }
.photo-counter { color: rgba(247,239,229,.55); font: 500 9px/1 var(--mono); letter-spacing: .08em; }
.photo-counter b { color: var(--amber); font-size: 12px; font-weight: 500; }
.photo-counter i { font-style: normal; }
.motion-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 0; border: 0; color: rgba(247,239,229,.72); background: transparent; font: 500 9px/1 var(--mono); letter-spacing: .1em; cursor: pointer; transition: color .25s ease; }
.motion-toggle:hover, .motion-toggle:focus-visible { color: var(--amber); }

.motion-toggle svg, .photo-slot__view svg, .letter-button svg, .goodnight__button svg, .memory-viewer__close svg, .memory-viewer__caption button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.35; }

/* Shared photo treatment */
.photo-slot { --slot-a: #685064; --slot-b: #d49b8b; --slot-c: #3c3d60; position: relative; display: block; overflow: hidden; margin: 0; color: var(--paper); background: linear-gradient(150deg, var(--slot-a), var(--slot-b) 46%, var(--slot-c)); box-shadow: 0 30px 82px rgba(0,0,0,.28); }
.photo-slot::before { position: absolute; z-index: 0; inset: 0; content: ''; background: radial-gradient(circle at 72% 10%, rgba(255,235,220,.2), transparent 34%); pointer-events: none; }
.photo-slot::after { position: absolute; z-index: 3; inset: 13px; border: 1px solid rgba(255,249,241,.5); content: ''; pointer-events: none; }
.photo-slot input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; clip: rect(0 0 0 0); }
.photo-slot__picker { position: absolute; z-index: 2; inset: 0; display: block; cursor: pointer; }
.photo-slot__image { position: absolute; z-index: 0; inset: 0; background-position: center; background-size: cover; opacity: 0; transform: scale(1.055); transition: opacity .55s ease, transform 1.2s var(--ease); }
.photo-slot__veil { position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgba(13,10,24,.02), rgba(13,10,24,.72)); transition: background .35s ease; }
.photo-slot__placeholder { position: absolute; z-index: 2; right: 25px; bottom: 24px; left: 25px; display: flex; flex-direction: column; transition: opacity .35s ease; }
.photo-slot__placeholder b { margin-bottom: 18px; color: var(--rose-light); font: 500 9px/1 var(--mono); letter-spacing: .16em; }
.photo-slot__placeholder strong { font: 500 clamp(22px, 2.3vw, 38px)/.97 var(--serif); letter-spacing: -.06em; }
.photo-slot__placeholder small { margin-top: 12px; color: rgba(255,249,241,.7); font: 500 8px/1 var(--mono); letter-spacing: .1em; }
.photo-slot__view { position: absolute; z-index: 5; top: 18px; right: 18px; display: grid; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(255,249,241,.5); border-radius: 50%; color: var(--cream); background: rgba(13,10,24,.22); place-items: center; opacity: 0; pointer-events: none; cursor: pointer; backdrop-filter: blur(10px); transition: opacity .25s ease, color .25s ease, transform .35s var(--ease); }
.photo-slot.has-image .photo-slot__image { opacity: 1; transform: scale(1); }
.photo-slot.has-image .photo-slot__placeholder { opacity: 0; pointer-events: none; }
.photo-slot.has-image .photo-slot__view { opacity: 1; pointer-events: auto; }
.photo-slot:hover .photo-slot__veil, .photo-slot:focus-within .photo-slot__veil { background: linear-gradient(180deg, rgba(13,10,24,.01), rgba(13,10,24,.46)); }
.photo-slot__view:hover, .photo-slot__view:focus-visible { color: var(--amber); transform: scale(1.1); }
.photo-slot.is-loading .photo-slot__placeholder small::after { margin-left: 7px; content: ' · 正在显影'; color: var(--amber); }

/* Tactile photo wall: the image plane answers to a cursor without disturbing the staged layouts. */
.photo-slot { --tilt-x: 0deg; --tilt-y: 0deg; --pan-x: 0px; --pan-y: 0px; transform-style: preserve-3d; }
.photo-slot__picker { transform: perspective(1050px) rotateX(var(--tilt-y)) rotateY(var(--tilt-x)) translateZ(0); transform-style: preserve-3d; transition: transform .62s var(--ease), filter .35s ease; will-change: transform; }
.photo-slot.is-engaged .photo-slot__picker { transition: filter .35s ease; }
.photo-slot.is-pressed .photo-slot__picker { filter: brightness(1.08) saturate(1.06); }
.photo-slot.is-peeked .photo-slot__picker { transform: perspective(1050px) rotateX(calc(var(--tilt-y) + 1.8deg)) rotateY(calc(var(--tilt-x) - 1.8deg)) translateZ(16px) scale(1.018); filter: brightness(1.1) saturate(1.08); }
.photo-slot.is-peeked::before { background: radial-gradient(circle at 50% 42%, rgba(255,237,222,.37), transparent 50%); }
.photo-slot.is-peeked::after { border-color: rgba(255,244,235,.9); box-shadow: 0 0 32px rgba(239,181,147,.34); }
.photo-slot__image { transform: scale(1.055) translate3d(var(--pan-x), var(--pan-y), 0); }
.photo-slot.has-image .photo-slot__image { transform: scale(1) translate3d(var(--pan-x), var(--pan-y), 0); }
.photo-slot.has-image.is-peeked .photo-slot__image { transform: scale(1.075) translate3d(var(--pan-x), var(--pan-y), 0); }
.photo-slot__placeholder { transform: translateZ(26px); }
.photo-slot__love { position: absolute; z-index: 5; top: 18px; right: 60px; display: grid; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(255,249,241,.46); border-radius: 50%; color: var(--cream); background: rgba(13,10,24,.22); place-items: center; opacity: 0; pointer-events: none; cursor: pointer; backdrop-filter: blur(10px); transition: opacity .25s ease, color .25s ease, background .35s ease, border-color .35s ease, transform .35s var(--ease); }
.photo-slot__love svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.35; }
.photo-slot.has-image .photo-slot__love { opacity: 1; pointer-events: auto; }
.photo-slot__love:hover, .photo-slot__love:focus-visible { color: var(--amber); transform: scale(1.1); }
.photo-slot.is-loved .photo-slot__love { border-color: var(--rose); color: #fff7f0; background: rgba(216,141,145,.9); }
.photo-slot.is-loved .photo-slot__love svg { fill: currentColor; stroke: currentColor; }
.photo-slot__ripple { position: absolute; z-index: 4; width: 18px; height: 18px; border: 1px solid rgba(255,244,235,.9); border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%) scale(.2); animation: photoRipple .72s cubic-bezier(.14,.75,.24,1) forwards; }


/* Opening film */
.film { position: relative; height: 650vh; background: var(--ink); }
.film__sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; background: var(--ink); }
.wash, .film__grain, .film__stars, .halo, .journey-line { position: absolute; pointer-events: none; }
.wash { z-index: 0; inset: 0; transition: opacity .25s linear; will-change: opacity; }
.wash--night { opacity: var(--night-opacity); background: radial-gradient(75% 92% at 91% 15%, rgba(65,54,104,.76), transparent 57%), radial-gradient(52% 66% at 19% 86%, rgba(95,62,88,.48), transparent 62%), linear-gradient(145deg, #090914, #120d22 54%, #19152b); }
.wash--rose { opacity: var(--rose-opacity); background: radial-gradient(58% 80% at 76% 50%, rgba(221,130,134,.66), transparent 68%), radial-gradient(58% 56% at 12% 18%, rgba(107,85,145,.6), transparent 69%), linear-gradient(145deg, #1d1228, #3c2138 53%, #7e4d5e); }
.wash--dawn { opacity: var(--dawn-opacity); background: radial-gradient(62% 75% at 45% 27%, rgba(254,213,180,.75), transparent 62%), radial-gradient(49% 68% at 94% 81%, rgba(225,143,141,.67), transparent 63%), linear-gradient(145deg, #432737 0%, #80515b 46%, #d59785); }
.film__grain { z-index: 2; inset: 0; opacity: .07; mix-blend-mode: screen; 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='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); }
.film__stars { z-index: 2; inset: 0; }
.film__stars i { position: absolute; display: block; width: 3px; height: 3px; border-radius: 50%; background: var(--cream); box-shadow: 0 0 16px 3px rgba(247,239,229,.25); opacity: .55; animation: twinkle 5s ease-in-out infinite; }
.film__stars i:nth-child(1) { top: 19%; left: 25%; animation-delay: -2s; }.film__stars i:nth-child(2) { top: 77%; left: 10%; animation-delay: -.7s; }.film__stars i:nth-child(3) { top: 28%; right: 13%; animation-delay: -4s; }.film__stars i:nth-child(4) { top: 67%; right: 33%; animation-delay: -1.6s; }.film__stars i:nth-child(5) { top: 86%; right: 9%; animation-delay: -3s; }.film__stars i:nth-child(6) { top: 9%; left: 61%; animation-delay: -5s; }.film__stars i:nth-child(7) { top: 46%; left: 48%; animation-delay: -2.3s; }
.film__chapter-count { position: absolute; z-index: 9; top: 50%; right: max(34px, 4.2vw); display: flex; align-items: baseline; gap: 8px; color: rgba(247,239,229,.75); transform: rotate(90deg) translateX(50%); transform-origin: right center; }
.film__chapter-count strong { color: var(--amber); font: 500 16px/1 var(--serif); }.film__chapter-count span { font: 500 9px/1 var(--mono); letter-spacing: .08em; opacity: .74; }
.film__progress { position: absolute; z-index: 9; top: 50%; right: max(23px, 3vw); width: 1px; height: 146px; background: rgba(247,239,229,.2); transform: translateY(-50%); }.film__progress span { display: block; width: 100%; height: calc(var(--film-progress) * 100%); background: var(--amber); transform-origin: top center; }
.journey-line { z-index: 3; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: .56; }.journey-line > path { fill: none; stroke: rgba(239,181,147,.72); stroke-width: 1.25; stroke-linecap: round; stroke-dasharray: 2 15; vector-effect: non-scaling-stroke; animation: pathDrift 20s linear infinite; }.journey-line__soft { stroke: rgba(199,188,224,.22) !important; stroke-dasharray: none !important; }.journey-line circle { fill: var(--rose); opacity: .26; filter: blur(9px); }.journey-line #journeyHeart { fill: var(--rose); stroke: rgba(255,235,221,.76); stroke-width: 1.5; vector-effect: non-scaling-stroke; animation: heartBreathe 2.8s ease-in-out infinite; }
.halo { z-index: 1; border: 1px solid rgba(247,239,229,.12); border-radius: 50%; pointer-events: none; will-change: transform; }.halo--one { top: -18vw; right: -12vw; width: min(61vw, 920px); height: min(61vw, 920px); box-shadow: inset 0 0 110px rgba(157,135,201,.09); animation: haloBreathe 16s ease-in-out infinite; }.halo--two { bottom: -21vw; left: -11vw; width: min(48vw, 700px); height: min(48vw, 700px); border-color: rgba(239,181,147,.16); box-shadow: inset 0 0 95px rgba(220,133,140,.07); animation: haloBreathe 19s ease-in-out -6s infinite reverse; }
.photo-card { position: absolute; z-index: 5; top: 50%; left: 50%; width: clamp(260px, 30vw, 470px); aspect-ratio: .74; --photo-x: 20vw; --photo-y: 0vh; --photo-rotate: 7deg; --photo-scale: .86; --photo-opacity: 1; opacity: var(--photo-opacity); transform: translate3d(calc(-50% + var(--photo-x)), calc(-50% + var(--photo-y)), 0) rotate(var(--photo-rotate)) scale(var(--photo-scale)); transform-origin: center; transition: box-shadow .35s var(--ease); will-change: transform, opacity; }
.photo-card:hover { box-shadow: 0 40px 100px rgba(0,0,0,.46); }.photo-card--second { width: clamp(155px, 16vw, 250px); aspect-ratio: .82; --slot-a: #77515c; --slot-b: #c88786; --slot-c: #444260; }.photo-card--third { width: clamp(148px, 15vw, 230px); aspect-ratio: .76; --slot-a: #65475b; --slot-b: #d8a297; --slot-c: #3b385d; }.photo-card--second .photo-slot__placeholder, .photo-card--third .photo-slot__placeholder { right: 19px; bottom: 19px; left: 19px; }.photo-card--second .photo-slot__placeholder strong, .photo-card--third .photo-slot__placeholder strong { font-size: clamp(18px, 1.8vw, 28px); }
.scene-copy { position: absolute; z-index: 7; opacity: 0; pointer-events: none; transform: translate3d(0, 44px, 0); will-change: transform, opacity; }.scene-copy p { margin-top: 0; }.scene-copy__date, .scene-copy__index, .scene-copy__whisper { font: 500 10px/1.3 var(--mono); letter-spacing: .16em; }.scene-copy__date { margin-bottom: 26px; color: var(--amber); }.scene-copy__date span { color: var(--rose); }.scene-copy__index { margin-bottom: 24px; color: rgba(247,239,229,.62); }.scene-copy__index i { color: var(--rose-light); font: 400 14px/1 var(--serif); letter-spacing: 0; }.scene-copy h1, .scene-copy h2 { margin: 0; font-family: var(--serif); font-weight: 500; letter-spacing: -.075em; }.scene-copy h1 { font-size: clamp(70px, 9.4vw, 150px); line-height: .84; }.scene-copy h1 em { color: var(--amber); font-size: .38em; font-style: italic; vertical-align: .28em; letter-spacing: 0; }.scene-copy h2 { font-size: clamp(39px, 4.9vw, 76px); line-height: .98; }.scene-copy h2 i { color: var(--rose-light); font-style: italic; }.scene-copy__body { margin-top: 30px; color: var(--lilac); font: 400 clamp(15px, 1.35vw, 19px)/1.92 var(--serif); }.scene-copy__whisper { display: inline-block; margin-top: 26px; color: rgba(239,181,147,.82); }.scene-copy--opening { top: 20%; left: var(--gutter); max-width: min(52vw, 650px); }.scene-copy--encounter { top: 26%; left: var(--gutter); max-width: min(45vw, 580px); }.scene-copy--ordinary { top: 53%; right: var(--gutter); max-width: min(44vw, 560px); text-align: right; }.scene-copy--promise { top: 24%; left: 11vw; max-width: min(51vw, 690px); }.scene-copy--ending { top: 29%; right: 9vw; max-width: min(52vw, 700px); text-align: right; }.scene-copy--ending .scene-copy__body { color: var(--cream); }
.film__scroll-cue { position: absolute; z-index: 8; bottom: 32px; left: var(--gutter); display: flex; align-items: center; gap: 12px; color: rgba(247,239,229,.56); font: 500 9px/1 var(--mono); letter-spacing: .12em; }.film__scroll-cue span { display: inline-block; width: 39px; height: 1px; background: rgba(247,239,229,.48); }.film__scroll-cue p { margin: 0; }

/* Photo atlas */
.atlas { position: relative; min-height: 290vh; overflow: hidden; padding: clamp(160px, 18vw, 270px) var(--gutter) clamp(170px, 18vw, 270px); color: #f8edf0; background: radial-gradient(52% 38% at 83% 13%, rgba(205,126,147,.35), transparent 70%), radial-gradient(42% 37% at 8% 68%, rgba(132,111,187,.32), transparent 70%), linear-gradient(168deg, #1c1328 0%, #33203a 46%, #1c1629 100%); }
.atlas::before { position: absolute; top: 0; right: 0; left: 0; height: 180px; content: ''; background: linear-gradient(var(--ink), transparent); }.atlas__ambient { position: absolute; border: 1px solid rgba(247,239,229,.12); border-radius: 50%; pointer-events: none; }.atlas__ambient--one { top: 29%; right: -15vw; width: 52vw; height: 52vw; }.atlas__ambient--two { bottom: -16vw; left: -8vw; width: 46vw; height: 46vw; border-color: rgba(239,181,147,.16); }.atlas__intro { position: relative; z-index: 2; width: min(860px, 70%); }.section-index { margin: 0 0 29px; color: var(--amber); font: 500 10px/1 var(--mono); letter-spacing: .16em; }.section-index i { color: var(--rose-light); font: italic 400 17px/1 var(--serif); letter-spacing: 0; }.atlas__intro h2 { margin: 0; font: 500 clamp(49px, 6.4vw, 105px)/.91 var(--serif); letter-spacing: -.075em; }.atlas__intro h2 em { color: var(--rose-light); font-style: italic; }.atlas__intro > p:last-child { max-width: 510px; margin: 34px 0 0 10vw; color: rgba(247,239,229,.78); font: 400 clamp(16px, 1.45vw, 20px)/1.93 var(--serif); }.atlas__margin-note { position: absolute; z-index: 2; top: 15%; right: var(--gutter); margin: 0; color: rgba(247,239,229,.58); font: italic 400 clamp(15px, 1.6vw, 23px)/1.55 var(--serif); text-align: right; }.atlas__margin-note i { color: var(--amber); }.atlas__masonry { position: relative; z-index: 2; width: min(1450px, 100%); height: clamp(1380px, 132vw, 2020px); margin: clamp(130px, 16vw, 250px) auto 0; }
.atlas-photo { position: absolute; width: 23%; aspect-ratio: .76; --tilt: -5deg; opacity: 0; transform: translate3d(0, 65px, 0) rotate(var(--tilt)); transition: transform 1.05s var(--ease), opacity .9s ease, box-shadow .45s var(--ease); }.atlas-photo::after { inset: 12px; }.atlas-photo.is-visible { opacity: 1; transform: translate3d(0,0,0) rotate(var(--tilt)); }.atlas-photo.is-visible:hover { transform: translate3d(0,-12px,0) rotate(var(--tilt)) scale(1.02); box-shadow: 0 43px 100px rgba(0,0,0,.4); }.atlas-photo--one { top: 1%; left: 3%; width: 28%; aspect-ratio: .83; --tilt: -8deg; --slot-a: #67485d; --slot-b: #d79791; }.atlas-photo--two { top: 0; left: 43%; width: 18%; aspect-ratio: .69; --tilt: 7deg; --slot-a: #5d4c70; --slot-b: #c18d9d; }.atlas-photo--three { top: 7%; right: 1%; width: 25%; aspect-ratio: .74; --tilt: -4deg; --slot-a: #664d60; --slot-b: #d9a68c; }.atlas-photo--four { top: 34%; left: 11%; width: 19%; aspect-ratio: .69; --tilt: 9deg; --slot-a: #65455c; --slot-b: #c9848e; }.atlas-photo--five { top: 28%; left: 37%; width: 30%; aspect-ratio: .94; --tilt: -3deg; --slot-a: #795362; --slot-b: #d0a184; }.atlas-photo--six { top: 39%; right: 5%; width: 21%; aspect-ratio: .76; --tilt: 8deg; --slot-a: #564b6e; --slot-b: #c9828c; }.atlas-photo--seven { bottom: 5%; left: 1%; width: 27%; aspect-ratio: .77; --tilt: -8deg; --slot-a: #60455b; --slot-b: #d79786; }.atlas-photo--eight { bottom: 0; left: 38%; width: 20%; aspect-ratio: .66; --tilt: 5deg; --slot-a: #68546f; --slot-b: #d69c96; }.atlas-photo--nine { right: 4%; bottom: 8%; width: 27%; aspect-ratio: .83; --tilt: -6deg; --slot-a: #704957; --slot-b: #d4a28e; }
.atlas-photo .photo-slot__placeholder { right: 20px; bottom: 20px; left: 20px; }.atlas-photo .photo-slot__placeholder b { margin-bottom: 14px; }.atlas-photo .photo-slot__placeholder strong { font-size: clamp(19px, 1.8vw, 30px); }.atlas__little-line { position: absolute; z-index: 4; margin: 0; color: rgba(247,239,229,.78); font: italic 400 clamp(17px, 1.8vw, 28px)/1.45 var(--serif); opacity: 0; transform: translateY(25px); transition: opacity .8s ease, transform 1s var(--ease); }.atlas__little-line.is-visible { opacity: 1; transform: translateY(0); }.atlas__little-line--one { top: 28%; left: 3%; }.atlas__little-line--two { right: 4%; bottom: 26%; text-align: right; }.atlas__little-line i { color: var(--amber); }.atlas__afterword { position: relative; z-index: 2; width: min(580px, 72%); margin: 0 9% 0 auto; opacity: 0; transform: translateY(35px); transition: opacity .9s ease, transform 1s var(--ease); }.atlas__afterword.is-visible { opacity: 1; transform: translateY(0); }.atlas__afterword span { color: var(--amber); font: 500 10px/1 var(--mono); letter-spacing: .16em; }.atlas__afterword span i { color: var(--rose); font-style: normal; }.atlas__afterword p { margin: 23px 0 0; color: rgba(247,239,229,.82); font: 400 clamp(18px, 1.65vw, 24px)/1.85 var(--serif); }

/* Moving film reel */
.photo-reel { position: relative; height: 780vh; background: #100c1b; }.photo-reel__sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; }.photo-reel__sky, .photo-reel__flare, .photo-reel__noise { position: absolute; inset: 0; pointer-events: none; }.photo-reel__sky { z-index: 0; background: radial-gradient(66% 106% at 15% 102%, rgba(128,83,151,.7), transparent 60%), radial-gradient(64% 78% at 85% 0%, rgba(234,157,139,.57), transparent 58%), linear-gradient(148deg, #0d0a19, #2a1730 51%, #171228); }.photo-reel__flare { z-index: 1; background: radial-gradient(circle at 54% 50%, rgba(255,218,185,.34), transparent 18%), radial-gradient(circle at 54% 50%, rgba(239,134,142,.14), transparent 39%); mix-blend-mode: screen; animation: flarePulse 8s ease-in-out infinite; }.photo-reel__noise { z-index: 2; opacity: .13; background-image: linear-gradient(90deg, transparent 49.5%, rgba(255,255,255,.09) 50%, transparent 50.5%), repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 4px); mix-blend-mode: overlay; }.photo-reel__copy { position: absolute; z-index: 8; top: 17%; left: var(--gutter); width: min(640px, 52vw); pointer-events: none; }.photo-reel__copy > p:first-child { margin: 0 0 22px; color: rgba(247,239,229,.65); font: 500 10px/1 var(--mono); letter-spacing: .13em; }.photo-reel__copy > p:first-child span { color: var(--amber); font-size: 18px; }.photo-reel__copy > p:first-child i { color: var(--rose-light); font: italic 400 15px/1 var(--serif); letter-spacing: 0; }.photo-reel__copy h2 { margin: 0; font: 500 clamp(52px, 7.3vw, 118px)/.85 var(--serif); letter-spacing: -.08em; }.photo-reel__copy h2 em { color: var(--rose-light); font-style: italic; }.photo-reel__detail { width: min(410px, 100%); margin: 29px 0 0 10vw; color: rgba(247,239,229,.72); font: 400 clamp(16px, 1.45vw, 20px)/1.84 var(--serif); }.photo-reel__track { position: absolute; z-index: 5; top: 61%; left: 0; display: flex; align-items: center; gap: clamp(30px, 6vw, 92px); width: max-content; transform: translate3d(var(--reel-shift, 24vw), -50%, 0); will-change: transform; }.reel-frame { flex: 0 0 auto; width: clamp(250px, 25vw, 390px); aspect-ratio: .72; --slot-a: #6d4e63; --slot-b: #d49b8d; --slot-c: #34334f; transform: translateY(var(--frame-y, 0)) rotate(var(--frame-tilt, 0deg)) scale(var(--frame-scale, 1)); transition: box-shadow .35s var(--ease); }.reel-frame:hover { box-shadow: 0 45px 105px rgba(0,0,0,.46); }.reel-frame:nth-child(1) { --frame-tilt: -9deg; --frame-y: 6vh; --slot-a: #615172; }.reel-frame:nth-child(2) { --frame-tilt: 7deg; --frame-y: -8vh; --slot-a: #724c61; }.reel-frame:nth-child(3) { --frame-tilt: -5deg; --frame-y: 4vh; --slot-a: #745a6d; }.reel-frame:nth-child(4) { --frame-tilt: 9deg; --frame-y: -3vh; --slot-a: #5d4c69; }.reel-frame:nth-child(5) { --frame-tilt: -8deg; --frame-y: 8vh; --slot-a: #784e5c; }.reel-frame:nth-child(6) { --frame-tilt: 5deg; --frame-y: -7vh; --slot-a: #624a62; }.reel-frame:nth-child(7) { --frame-tilt: -6deg; --frame-y: 2vh; --slot-a: #5d526e; }.reel-frame .photo-slot__placeholder { right: 24px; bottom: 25px; left: 24px; }.reel-frame .photo-slot__placeholder strong { font-size: clamp(23px, 2vw, 33px); }.photo-reel__meter { position: absolute; z-index: 9; right: var(--gutter); bottom: 33px; display: flex; align-items: center; gap: 13px; color: rgba(247,239,229,.5); font: 500 9px/1 var(--mono); letter-spacing: .12em; }.photo-reel__meter span { display: block; width: 84px; height: 1px; background: linear-gradient(90deg, var(--amber) calc(var(--reel-progress, 0) * 100%), rgba(247,239,229,.3) 0); }.photo-reel__meter b { font-weight: 500; }

/* Constellation ending of the photo wall */
.constellation { --gaze-x: 0px; --gaze-y: 0px; --core-gaze-x: 0px; --core-gaze-y: 0px; position: relative; height: 620vh; background: #0d0a18; }.constellation__sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; }.constellation__sky { position: absolute; inset: 0; background: radial-gradient(54% 64% at 50% 49%, rgba(187,120,149,.28), transparent 55%), radial-gradient(40% 50% at 9% 93%, rgba(100,84,154,.46), transparent 62%), radial-gradient(36% 52% at 95% 11%, rgba(224,154,138,.32), transparent 57%), linear-gradient(155deg, #0c0a17, #1c132b 55%, #18162b); }.constellation__core { position: absolute; top: 50%; left: 50%; width: min(52vw, 710px); aspect-ratio: 1; border: 1px solid rgba(247,239,229,.12); border-radius: 50%; box-shadow: inset 0 0 90px rgba(213,141,159,.09), 0 0 110px rgba(134,113,184,.14); transform: translate(calc(-50% + var(--core-gaze-x)), calc(-50% + var(--core-gaze-y))); animation: coreBreathe 12s ease-in-out infinite; transition: box-shadow .45s ease; }.constellation.is-gazing .constellation__core { box-shadow: inset 0 0 112px rgba(239,181,147,.17), 0 0 142px rgba(134,113,184,.24); }.constellation__core::before, .constellation__core::after { position: absolute; border: 1px solid rgba(239,181,147,.16); border-radius: inherit; content: ''; }.constellation__core::before { inset: 14%; }.constellation__core::after { inset: 29%; border-color: rgba(199,188,224,.19); }.constellation__line { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: .7; transition: opacity .35s ease; }.constellation.is-gazing .constellation__line { opacity: .93; }.constellation__line path { fill: none; stroke: rgba(239,181,147,.68); stroke-width: 1.2; stroke-dasharray: 9 13; stroke-linecap: round; vector-effect: non-scaling-stroke; }.constellation__copy { position: absolute; z-index: 7; top: 19%; left: 50%; width: min(730px, 62vw); text-align: center; transform: translateX(-50%); pointer-events: none; }.constellation__copy > p:first-child { margin: 0 0 22px; color: rgba(247,239,229,.67); font: 500 10px/1.3 var(--mono); letter-spacing: .13em; }.constellation__copy > p:first-child i { color: var(--amber); font: italic 400 15px/1 var(--serif); letter-spacing: 0; }.constellation__copy h2 { margin: 0; font: 500 clamp(47px, 6.2vw, 102px)/.89 var(--serif); letter-spacing: -.075em; }.constellation__copy h2 em { color: var(--rose-light); font-style: italic; }.constellation__body { max-width: 500px; margin: 28px auto 0; color: rgba(247,239,229,.72); font: 400 clamp(15px, 1.45vw, 20px)/1.88 var(--serif); }.constellation__touch-note { position: absolute; z-index: 8; bottom: 12%; left: 50%; margin: 0; color: rgba(247,239,229,.48); font: 500 8px/1.4 var(--mono); letter-spacing: .13em; text-align: center; transform: translateX(-50%); transition: color .35s ease, letter-spacing .45s var(--ease); pointer-events: none; }.constellation.is-gazing .constellation__touch-note { color: var(--amber); letter-spacing: .19em; }.constellation-photo { position: absolute; z-index: 5; top: 50%; left: 50%; width: clamp(180px, 20vw, 310px); aspect-ratio: .76; --orbit-x: 0vw; --orbit-y: 0vh; --orbit-rotate: 0deg; --orbit-scale: .6; --orbit-opacity: 0; opacity: var(--orbit-opacity); transform: translate3d(calc(-50% + var(--orbit-x) + var(--gaze-x)), calc(-50% + var(--orbit-y) + var(--gaze-y)), 0) rotate(var(--orbit-rotate)) scale(var(--orbit-scale)); will-change: transform, opacity; }.constellation-photo--one { --slot-a: #695069; --slot-b: #d79991; }.constellation-photo--two { --slot-a: #584d70; --slot-b: #d4a188; }.constellation-photo--three { --slot-a: #744b5e; --slot-b: #c98a98; }.constellation-photo .photo-slot__placeholder { right: 19px; bottom: 18px; left: 19px; }.constellation-photo .photo-slot__placeholder b { margin-bottom: 13px; }.constellation-photo .photo-slot__placeholder strong { font-size: clamp(19px, 1.8vw, 29px); }.constellation__seal { position: absolute; z-index: 8; right: var(--gutter); bottom: 43px; margin: 0; color: var(--amber); font: 500 10px/1.5 var(--mono); letter-spacing: .14em; text-align: right; }.constellation__seal i { color: var(--rose); font-style: normal; }.constellation__seal span { color: rgba(247,239,229,.47); font-size: 8px; letter-spacing: .09em; }

/* Letter and final */
.letter-section { position: relative; min-height: 160svh; padding: clamp(150px, 18vw, 270px) var(--gutter) clamp(130px, 15vw, 220px); overflow: hidden; color: #211621; background: radial-gradient(42% 60% at 101% 33%, rgba(216,141,145,.28), transparent 70%), radial-gradient(45% 60% at -3% 78%, rgba(239,181,147,.42), transparent 70%), var(--cream); }.letter-section::before { position: absolute; top: 0; right: 0; left: 0; height: 180px; content: ''; background: linear-gradient(to bottom, #0d0a18, rgba(247,239,229,0)); pointer-events: none; }.letter-section__thread { position: absolute; top: 120px; right: 13vw; width: 1px; height: 74%; background: linear-gradient(var(--rose), rgba(216,141,145,0)); transform: rotate(16deg); transform-origin: top; opacity: .42; }.letter-section__inside { position: relative; width: min(790px, 100%); margin: 0 auto; padding: clamp(38px, 7vw, 92px); background: rgba(255,250,242,.74); box-shadow: 18px 24px 80px rgba(68,39,53,.12); }.letter-section__inside::before { position: absolute; top: -11px; left: 50%; width: 74px; height: 22px; content: ''; background: rgba(216,141,145,.62); transform: translateX(-50%) rotate(-2deg); }.letter-section__date { margin: 0 0 30px; color: #87707b; font: 500 10px/1.3 var(--mono); letter-spacing: .13em; }.letter-section__date span { color: var(--rose); font: 500 17px/1 var(--serif); }.letter-section h2 { margin: 0; color: #211621; font: 500 clamp(42px, 6vw, 76px)/.95 var(--serif); letter-spacing: -.07em; }.letter-section__lead { max-width: 570px; margin: 34px 0 38px; color: #6b5661; font: 400 clamp(16px, 1.45vw, 20px)/1.95 var(--serif); }.letter-section__body { padding-top: 29px; border-top: 1px solid var(--dark-line); }.letter-section__body > p, .letter-section__more p { margin: 0; color: #665661; font: 400 clamp(16px, 1.38vw, 19px)/1.97 var(--serif); }.letter-section__more { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .8s var(--ease), opacity .55s ease, margin .8s var(--ease); }.letter-section__inside.is-open .letter-section__more { max-height: 690px; margin-top: 24px; opacity: 1; }.letter-section__more p + p { margin-top: 22px; }.letter-button { display: inline-flex; align-items: center; gap: 14px; margin-top: 33px; padding: 11px 0; border: 0; border-bottom: 1px solid rgba(33,22,33,.52); color: #2b1c29; background: transparent; font: 500 10px/1 var(--mono); letter-spacing: .09em; cursor: pointer; transition: color .25s ease, gap .35s var(--ease); }.letter-button:hover, .letter-button:focus-visible { gap: 23px; color: var(--rose); }.letter-section__sign { margin: 72px 0 0; color: #7e6571; font: italic 400 14px/1.55 var(--serif); text-align: right; }.letter-section__sign b { display: block; margin-top: 8px; color: #2b1c29; font: 500 10px/1 var(--mono); letter-spacing: .09em; }.letter-section__sign i { color: var(--rose); font-style: normal; }
.goodnight { position: relative; display: grid; min-height: 100svh; place-items: center; overflow: hidden; text-align: center; background: radial-gradient(62% 75% at 50% 37%, rgba(137,116,188,.36), transparent 60%), radial-gradient(38% 48% at 51% 54%, rgba(231,150,146,.22), transparent 65%), var(--ink); }.goodnight__ring { position: absolute; width: min(69vw, 880px); aspect-ratio: 1; border: 1px solid rgba(247,239,229,.19); border-radius: 50%; box-shadow: inset 0 0 90px rgba(247,239,229,.04); }.goodnight__ring::before, .goodnight__ring::after { position: absolute; border: 1px solid rgba(239,181,147,.18); border-radius: inherit; content: ''; }.goodnight__ring::before { inset: 14%; }.goodnight__ring::after { inset: 31%; border-color: rgba(199,188,224,.25); }.goodnight__content { position: relative; z-index: 1; }.goodnight__content > span { color: var(--amber); font: 500 11px/1 var(--mono); letter-spacing: .16em; }.goodnight__content > span i { color: var(--rose); font-style: normal; }.goodnight h2 { margin: 31px 0 30px; font: 500 clamp(58px, 9vw, 142px)/.85 var(--serif); letter-spacing: -.08em; }.goodnight h2 em { color: var(--rose-light); font-style: italic; }.goodnight__content > p { margin: 0; color: rgba(199,188,224,.82); font: 500 10px/1 var(--mono); letter-spacing: .15em; }.goodnight__button { display: inline-flex; align-items: center; gap: 20px; margin-top: 38px; padding: 0 0 12px; border: 0; border-bottom: 1px solid rgba(247,239,229,.55); color: var(--cream); background: transparent; font: 500 10px/1 var(--mono); letter-spacing: .1em; cursor: pointer; transition: gap .35s var(--ease), color .25s ease; }.goodnight__button:hover, .goodnight__button:focus-visible { gap: 30px; color: var(--amber); }.goodnight__note { position: absolute; bottom: 34px; left: 50%; width: 100%; margin: 0; color: rgba(247,239,229,.45); font: 500 9px/1 var(--mono); letter-spacing: .12em; transform: translateX(-50%); }

/* Full photo viewer */
.memory-viewer { position: fixed; z-index: 100; inset: 0; display: grid; padding: 26px; visibility: hidden; place-items: center; opacity: 0; transition: opacity .35s ease, visibility .35s step-end; }.memory-viewer.is-open { visibility: visible; opacity: 1; transition: opacity .35s ease; }.memory-viewer__backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(8,6,14,.8); backdrop-filter: blur(18px); cursor: pointer; }.memory-viewer__panel { position: relative; z-index: 1; display: grid; width: min(1020px, 100%); max-height: min(760px, 92svh); grid-template-columns: minmax(0, 1.1fr) minmax(240px, .55fr); overflow: hidden; color: var(--cream); background: #171222; box-shadow: 0 36px 130px rgba(0,0,0,.55); transform: translateY(22px) scale(.98); transition: transform .45s var(--ease); }.memory-viewer.is-open .memory-viewer__panel { transform: translateY(0) scale(1); }.memory-viewer__image { min-height: min(660px, 85svh); background: #39283b center / cover no-repeat; }.memory-viewer__caption { display: flex; min-height: 100%; padding: clamp(34px, 5vw, 72px) clamp(26px, 4vw, 62px); flex-direction: column; justify-content: flex-end; background: radial-gradient(circle at 18% 12%, rgba(219,147,146,.28), transparent 34%), #21182d; }.memory-viewer__caption > span { color: var(--amber); font: 500 10px/1 var(--mono); letter-spacing: .15em; }.memory-viewer__caption h2 { margin: 20px 0 auto; font: 500 clamp(36px, 4vw, 66px)/.91 var(--serif); letter-spacing: -.07em; }.memory-viewer__caption button { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; padding: 11px 0; border: 0; border-bottom: 1px solid rgba(247,239,229,.44); color: rgba(247,239,229,.8); background: transparent; font: 500 9px/1 var(--mono); letter-spacing: .1em; cursor: pointer; }.memory-viewer__caption button:hover { color: var(--amber); }.memory-viewer__close { position: absolute; z-index: 2; top: 16px; right: 16px; display: grid; width: 38px; height: 38px; padding: 0; border: 1px solid rgba(247,239,229,.45); border-radius: 50%; color: var(--cream); background: rgba(13,10,24,.22); place-items: center; cursor: pointer; }

/* Long-take continuity: every stage overlaps the previous camera frame and shares the same fixed atmosphere. */
.film, .film__sticky { background: transparent; }
.atlas, .photo-reel, .constellation, .letter-section, .goodnight { isolation: isolate; }
.atlas { z-index: 3; margin-top: -28vh; padding-top: clamp(245px, 28vw, 410px); padding-bottom: clamp(82px, 8vw, 130px); background: radial-gradient(52% 38% at 83% 13%, rgba(205,126,147,.29), transparent 72%), radial-gradient(42% 37% at 8% 68%, rgba(132,111,187,.25), transparent 72%), linear-gradient(180deg, rgba(13,10,24,.08), rgba(51,32,58,.38) 40%, rgba(28,22,41,.12)); }
.atlas::before { height: 58vh; background: linear-gradient(180deg, rgba(13,10,24,0), rgba(18,13,31,.22) 46%, transparent 100%); }
.photo-reel { z-index: 4; margin-top: -34vh; background: transparent; }
.photo-reel__sticky { background: transparent; }
.photo-reel__sky { opacity: .88; background: radial-gradient(66% 106% at 15% 102%, rgba(128,83,151,.52), transparent 61%), radial-gradient(64% 78% at 85% 0%, rgba(234,157,139,.41), transparent 60%), linear-gradient(148deg, rgba(13,10,25,.38), rgba(42,23,48,.48) 51%, rgba(23,18,40,.27)); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 13%, #000 89%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 13%, #000 89%, transparent 100%); }
.constellation { z-index: 5; margin-top: -31vh; background: transparent; }
.constellation__sticky { background: transparent; }
.constellation__sky { opacity: .9; background: radial-gradient(54% 64% at 50% 49%, rgba(187,120,149,.23), transparent 58%), radial-gradient(40% 50% at 9% 93%, rgba(100,84,154,.36), transparent 64%), radial-gradient(36% 52% at 95% 11%, rgba(224,154,138,.24), transparent 60%), linear-gradient(155deg, rgba(12,10,23,.35), rgba(28,19,43,.42) 55%, rgba(24,22,43,.2)); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 13%, #000 90%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 13%, #000 90%, transparent 100%); }
.letter-section { z-index: 6; margin-top: -28vh; padding-top: clamp(250px, 29vw, 430px); border-radius: 0; color: #211621; background: radial-gradient(43% 58% at 101% 37%, rgba(216,141,145,.2), transparent 72%), radial-gradient(44% 56% at -4% 77%, rgba(132,111,187,.21), transparent 74%), linear-gradient(180deg, rgba(13,10,24,0), rgba(28,20,39,.58) 22%, rgba(31,22,42,.72) 76%, rgba(13,10,24,.18)); }
.letter-section::before { height: 54vh; background: linear-gradient(180deg, rgba(13,10,24,0), rgba(13,10,24,.22) 52%, transparent 100%); }
.letter-section__inside { background: linear-gradient(145deg, rgba(255,250,242,.94), rgba(247,239,229,.88)); box-shadow: 0 40px 130px rgba(0,0,0,.28), 18px 24px 80px rgba(68,39,53,.14); backdrop-filter: blur(15px); }
.goodnight { z-index: 7; margin-top: -24vh; padding-top: 24vh; border-radius: 0; background: radial-gradient(62% 75% at 50% 37%, rgba(137,116,188,.3), transparent 62%), radial-gradient(38% 48% at 51% 54%, rgba(231,150,146,.18), transparent 68%), linear-gradient(180deg, rgba(13,10,24,0), rgba(13,10,24,.72) 36%, var(--ink) 78%); }
.memory-viewer__step { position: absolute; z-index: 3; top: 50%; display: grid; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(247,239,229,.46); border-radius: 50%; color: var(--cream); background: rgba(13,10,24,.36); place-items: center; cursor: pointer; transform: translateY(-50%); backdrop-filter: blur(10px); transition: color .25s ease, background .25s ease, opacity .25s ease, transform .35s var(--ease); }
.memory-viewer__step--prev { left: 18px; }.memory-viewer__step--next { right: 18px; }.memory-viewer__step svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }.memory-viewer__step:hover:not(:disabled), .memory-viewer__step:focus-visible:not(:disabled) { color: var(--amber); background: rgba(216,141,145,.24); }.memory-viewer__step--prev:hover:not(:disabled) { transform: translate(-3px, -50%); }.memory-viewer__step--next:hover:not(:disabled) { transform: translate(3px, -50%); }.memory-viewer__step:disabled { opacity: .24; cursor: default; }

body.is-quiet .cursor-glow, body.is-quiet .touch-aura, body.is-quiet .ambient-petals, body.is-quiet .memory-thread { opacity: 0; }.is-quiet .halo, .is-quiet .film__stars, .is-quiet .journey-line, .is-quiet .photo-reel__flare, .is-quiet .constellation__core { animation-play-state: paused; }.is-quiet .journey-line > path, .is-quiet .journey-line #journeyHeart, .is-quiet .film__stars i, .is-quiet .memory-thread #memoryThreadHeart { animation-play-state: paused; }

/* One camera owns every chapter. The content stays intact; only the shared light, depth and handoffs move. */
:root {
  --camera-x: 0vw;
  --camera-y: 0vh;
  --camera-scale: 1;
  --camera-turn: 0deg;
  --rail-x: 50%;
  --rail-y: 50%;
  --rail-bloom: .2;
  --frame-light-x: 70%;
  --frame-light-y: 12%;
  --frame-glint: .76;
  --film-handoff: 0;
  --reel-flare-x: 0vw;
  --reel-flare-y: 0vh;
  --reel-flare-scale: 1;
  --constellation-focus: .9;
  --mark-veil: .28;
  --lens-x: 50%;
  --lens-y: 50%;
  --lens-scale: 1;
  --lens-opacity: .08;
  --lens-turn: 0deg;
  --lens-flare: .2;
  --story-progress: 0;
  --story-rail-opacity: 0;
}

.memory-atmosphere {
  background:
    radial-gradient(118% 92% at 50% 50%, rgba(35, 23, 54, .72), transparent 70%),
    linear-gradient(135deg, #090813 0%, #120d20 47%, #191124 100%);
}

.memory-atmosphere::before,
.memory-atmosphere::after {
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.memory-atmosphere::before {
  background:
    radial-gradient(42% 54% at 12% 76%, rgba(108, 91, 170, .96), transparent 68%),
    radial-gradient(49% 48% at 86% 19%, rgba(115, 79, 144, .88), transparent 70%);
  transform: translate3d(var(--camera-x), var(--camera-y), 0) rotate(var(--camera-turn)) scale(var(--camera-scale));
}

.memory-atmosphere::after {
  background:
    radial-gradient(43% 52% at 74% 58%, rgba(229, 136, 139, .98), transparent 70%),
    radial-gradient(35% 42% at 29% 22%, rgba(243, 185, 150, .78), transparent 72%);
  transform: translate3d(var(--camera-x), var(--camera-y), 0) rotate(var(--camera-turn)) scale(var(--camera-scale));
}

.memory-thread {
  transform: translate3d(var(--camera-x), var(--camera-y), 0) rotate(var(--camera-turn));
  transform-origin: 50% 50%;
  will-change: transform;
}

.memory-thread::after {
  position: absolute;
  top: var(--rail-y);
  left: var(--rail-x);
  width: min(34vw, 500px);
  aspect-ratio: 1;
  border-radius: 50%;
  content: '';
  opacity: var(--rail-bloom);
  background: radial-gradient(circle, rgba(255, 224, 205, .30), rgba(226, 139, 151, .12) 27%, transparent 68%);
  transform: translate3d(-50%, -50%, 0) scale(1.08);
  filter: blur(5px);
  will-change: transform, opacity;
}

.memory-thread #memoryThreadEchoNear,
.memory-thread #memoryThreadEchoFar {
  opacity: 0;
  vector-effect: non-scaling-stroke;
}

.memory-thread #memoryThreadEchoNear {
  fill: rgba(255, 224, 205, .82);
  filter: drop-shadow(0 0 9px rgba(239, 181, 147, .72));
}

.memory-thread #memoryThreadEchoFar {
  fill: rgba(199, 188, 224, .72);
  filter: drop-shadow(0 0 7px rgba(150, 133, 203, .64));
}

/* A single optical element stays mounted for the full story and blooms at every chapter handoff. */
.cinematic-lens {
  position: fixed;
  z-index: 1;
  top: var(--lens-y);
  left: var(--lens-x);
  width: min(44vw, 650px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: var(--lens-opacity);
  pointer-events: none;
  mix-blend-mode: screen;
  transform: translate3d(-50%, -50%, 0) rotate(var(--lens-turn)) scale(var(--lens-scale));
  transform-origin: 50% 50%;
  transition: opacity .32s linear;
  will-change: transform, opacity;
}

.cinematic-lens::before,
.cinematic-lens::after,
.cinematic-lens > * {
  position: absolute;
  border-radius: inherit;
  content: '';
  pointer-events: none;
}

.cinematic-lens::before {
  inset: -18%;
  opacity: var(--lens-flare);
  background: conic-gradient(from 12deg, transparent 0 9%, rgba(255, 228, 210, .24) 12%, transparent 18% 45%, rgba(171, 148, 219, .2) 50%, transparent 58% 82%, rgba(238, 155, 160, .18) 88%, transparent 96%);
  -webkit-mask-image: radial-gradient(circle, transparent 0 28%, #000 42% 61%, transparent 74%);
  mask-image: radial-gradient(circle, transparent 0 28%, #000 42% 61%, transparent 74%);
  animation: cinematicOrbit 28s linear infinite;
}

.cinematic-lens::after {
  inset: -44%;
  opacity: var(--lens-flare);
  background: radial-gradient(circle, rgba(255, 224, 205, .2), rgba(228, 143, 154, .09) 24%, rgba(137, 118, 190, .05) 44%, transparent 70%);
  filter: blur(4px);
}

.cinematic-lens__ring {
  border: 1px solid rgba(255, 242, 231, .38);
  box-shadow: inset 0 0 54px rgba(255, 232, 215, .035), 0 0 44px rgba(218, 144, 156, .055);
}

.cinematic-lens__ring--outer {
  inset: 0;
  border-right-color: rgba(239, 181, 147, .7);
  border-bottom-color: rgba(133, 122, 183, .2);
  animation: cinematicOrbit 19s linear infinite;
}

.cinematic-lens__ring--inner {
  inset: 25%;
  border-top-color: rgba(199, 188, 224, .7);
  border-left-color: rgba(216, 141, 145, .28);
  animation: cinematicOrbit 13s linear infinite reverse;
}

.cinematic-lens__aperture {
  inset: 10%;
  opacity: var(--lens-flare);
  background: repeating-conic-gradient(from 18deg, rgba(255, 239, 226, .13) 0 8deg, transparent 8deg 43deg);
  -webkit-mask-image: radial-gradient(circle, transparent 0 43%, #000 44% 47%, transparent 49%);
  mask-image: radial-gradient(circle, transparent 0 43%, #000 44% 47%, transparent 49%);
  animation: cinematicOrbit 36s linear infinite reverse;
}

.cinematic-lens__flare {
  top: 50%;
  left: -42%;
  width: 184%;
  height: 1px;
  border-radius: 0;
  opacity: var(--lens-flare);
  background: linear-gradient(90deg, transparent, rgba(255, 229, 211, .42) 43%, rgba(255, 249, 241, .82) 50%, rgba(199, 188, 224, .24) 58%, transparent);
  box-shadow: 0 0 18px rgba(255, 218, 199, .18);
}

.story-rail {
  position: fixed;
  z-index: 28;
  top: 50%;
  right: 24px;
  width: 9px;
  height: 154px;
  opacity: var(--story-rail-opacity);
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity .35s ease;
}

.story-rail::before,
.story-rail::after {
  position: absolute;
  top: 0;
  left: 4px;
  width: 1px;
  content: '';
  transform-origin: top;
}

.story-rail::before { height: 100%; background: rgba(247, 239, 229, .2); }
.story-rail::after {
  height: calc(var(--story-progress) * 100%);
  background: linear-gradient(var(--amber), var(--rose-light));
  box-shadow: 0 0 13px rgba(239, 181, 147, .48);
}

.story-rail i {
  position: absolute;
  z-index: 1;
  left: 1px;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(247, 239, 229, .5);
  border-radius: 50%;
  background: #171124;
  transform: translateY(-50%) scale(.72);
  transition: transform .45s var(--ease), background .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.story-rail i:nth-child(1) { top: 0; }
.story-rail i:nth-child(2) { top: 20%; }
.story-rail i:nth-child(3) { top: 40%; }
.story-rail i:nth-child(4) { top: 60%; }
.story-rail i:nth-child(5) { top: 80%; }
.story-rail i:nth-child(6) { top: 100%; }
.story-rail i.is-active {
  border-color: rgba(255, 238, 224, .92);
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(239, 181, 147, .1), 0 0 16px rgba(239, 181, 147, .65);
  transform: translateY(-50%) scale(1.08);
}

.memory-mark {
  isolation: isolate;
  background: linear-gradient(to bottom, rgba(10, 8, 18, var(--mark-veil)), transparent);
  backdrop-filter: blur(2px);
}

.memory-mark::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: '';
  opacity: var(--mark-veil);
  background: linear-gradient(90deg, rgba(239, 181, 147, .08), transparent 32%, transparent 68%, rgba(133, 122, 183, .10));
  pointer-events: none;
}

.memory-mark > * { position: relative; z-index: 1; }

.film__sticky,
.photo-reel__sticky,
.constellation__sticky { transform: translateZ(0); }

.film__sticky {
  opacity: var(--film-exit-opacity, 1);
  will-change: opacity, transform;
}

.film__sticky::after {
  position: absolute;
  z-index: 4;
  inset: -16%;
  content: '';
  opacity: var(--film-handoff);
  background:
    radial-gradient(52% 56% at 70% 52%, rgba(255, 213, 184, .36), transparent 69%),
    radial-gradient(48% 60% at 17% 78%, rgba(158, 124, 190, .28), transparent 70%);
  mix-blend-mode: screen;
  pointer-events: none;
  transform: scale(1.08);
}

.atlas {
  background:
    radial-gradient(52% 38% at 83% 13%, rgba(205, 126, 147, .25), transparent 72%),
    radial-gradient(42% 37% at 8% 68%, rgba(132, 111, 187, .24), transparent 72%),
    linear-gradient(180deg, rgba(20, 14, 31, .16), rgba(51, 32, 58, .34) 40%, rgba(18, 14, 29, .08));
  box-shadow: 0 -18vh 26vh rgba(23, 15, 35, .22), 0 18vh 30vh rgba(59, 33, 58, .14);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18vh, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 18vh, #000 100%);
}

.photo-reel__sky {
  opacity: .68;
  background:
    radial-gradient(66% 106% at 15% 102%, rgba(128, 83, 151, .58), transparent 61%),
    radial-gradient(64% 78% at 85% 0%, rgba(234, 157, 139, .46), transparent 60%),
    linear-gradient(148deg, rgba(13, 10, 25, .26), rgba(42, 23, 48, .42) 51%, rgba(23, 18, 40, .2));
}

.photo-reel__flare {
  transform: translate3d(var(--reel-flare-x), var(--reel-flare-y), 0) scale(var(--reel-flare-scale));
  transform-origin: 54% 50%;
  will-change: transform, opacity;
}

.photo-reel__track { perspective: 1200px; }

.reel-frame {
  opacity: var(--frame-opacity, 1);
  box-shadow: 0 36px 96px rgba(0, 0, 0, var(--frame-shadow, .28));
  transform: translate3d(0, calc(var(--frame-y, 0) + var(--frame-lift, 0vh)), 0) rotate(var(--frame-tilt, 0deg)) scale(var(--frame-scale, 1));
  transform-origin: 50% 58%;
  transition: box-shadow .28s linear, opacity .28s linear;
}

.constellation__sky {
  opacity: .70;
  background:
    radial-gradient(54% 64% at 50% 49%, rgba(187, 120, 149, .20), transparent 58%),
    radial-gradient(40% 50% at 9% 93%, rgba(100, 84, 154, .30), transparent 64%),
    radial-gradient(36% 52% at 95% 11%, rgba(224, 154, 138, .20), transparent 60%),
    linear-gradient(155deg, rgba(12, 10, 23, .26), rgba(28, 19, 43, .32) 55%, rgba(24, 22, 43, .16));
}

.constellation__core {
  filter: brightness(var(--constellation-focus)) saturate(1.12);
  transition: box-shadow .45s ease, filter .7s var(--ease);
}

.letter-section {
  background:
    radial-gradient(43% 58% at 101% 37%, rgba(216, 141, 145, .19), transparent 72%),
    radial-gradient(44% 56% at -4% 77%, rgba(132, 111, 187, .22), transparent 74%),
    linear-gradient(180deg, rgba(13, 10, 24, 0), rgba(28, 20, 39, .50) 22%, rgba(31, 22, 42, .66) 76%, rgba(13, 10, 24, .12));
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16vh, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 16vh, #000 100%);
}

.letter-section__inside {
  border: 1px solid rgba(255, 249, 241, .42);
  background:
    linear-gradient(145deg, rgba(255, 251, 245, .95), rgba(247, 239, 229, .86)),
    radial-gradient(circle at 50% 0, rgba(255, 255, 255, .84), transparent 58%);
  box-shadow: 0 52px 150px rgba(0, 0, 0, .32), inset 0 1px rgba(255, 255, 255, .84);
  transform: translate3d(0, var(--letter-rise, 48px), 0) rotate(var(--letter-turn, -1.35deg)) scale(var(--letter-scale, .965));
  transform-origin: 50% 8%;
  will-change: transform;
}

.letter-section__inside::after {
  position: absolute;
  z-index: 3;
  top: -18%;
  bottom: -18%;
  left: 50%;
  width: 34%;
  content: '';
  opacity: var(--letter-light, 0);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .46), rgba(239, 192, 181, .18), transparent);
  pointer-events: none;
  transform: translate3d(var(--letter-sweep-x, -145%), 0, 0) rotate(12deg);
  mix-blend-mode: soft-light;
}

.goodnight {
  background:
    radial-gradient(62% 75% at 50% 37%, rgba(137, 116, 188, .28), transparent 62%),
    radial-gradient(38% 48% at 51% 54%, rgba(231, 150, 146, .17), transparent 68%),
    linear-gradient(180deg, rgba(13, 10, 24, 0), rgba(13, 10, 24, .64) 36%, var(--ink) 78%);
}

.goodnight__ring {
  opacity: var(--goodnight-bloom, .36);
  border-top-color: rgba(239, 181, 147, .54);
  border-right-color: rgba(199, 188, 224, .22);
  transform: rotate(var(--goodnight-turn, -14deg)) scale(var(--goodnight-scale, 1.06));
  will-change: transform, opacity;
}

.goodnight__ring::before { border-left-color: rgba(239, 181, 147, .46); }
.goodnight__ring::after { border-bottom-color: rgba(199, 188, 224, .5); }

.scene-copy h1,
.scene-copy h2,
.atlas__intro h2,
.photo-reel__copy h2,
.constellation__copy h2,
.goodnight h2 {
  text-shadow: 0 16px 58px rgba(6, 4, 12, .24);
}

.photo-slot::before {
  opacity: var(--frame-glint);
  background:
    radial-gradient(105% 86% at var(--frame-light-x) var(--frame-light-y), rgba(255, 240, 225, .33), transparent 38%),
    linear-gradient(135deg, rgba(255, 248, 240, .10), transparent 45%, rgba(147, 119, 178, .16));
  mix-blend-mode: screen;
  transition: opacity .45s ease, background .45s ease;
}

.photo-slot::after {
  box-shadow: inset 0 0 0 1px rgba(255, 249, 241, .09), inset 0 -54px 70px rgba(9, 7, 17, .15), 0 0 0 1px rgba(255, 248, 240, .05);
}

.photo-card,
.reel-frame,
.constellation-photo { will-change: transform, opacity; }

body.is-quiet .memory-thread::after,
body.is-quiet .cinematic-lens,
body.is-quiet .story-rail { opacity: 0; }

@media (max-width: 620px) {
  .memory-thread::after { width: 56vw; }
  .cinematic-lens { width: min(92vw, 480px); }
  .story-rail { display: none; }
  .memory-mark { backdrop-filter: blur(1px); }
  .photo-slot::before { background: radial-gradient(110% 85% at var(--frame-light-x) var(--frame-light-y), rgba(255, 240, 225, .28), transparent 42%), linear-gradient(135deg, rgba(255, 248, 240, .08), transparent 48%, rgba(147, 119, 178, .13)); }
}

@media (prefers-reduced-motion: reduce) {
  .memory-atmosphere::before,
  .memory-atmosphere::after,
  .memory-thread,
  .photo-reel__flare { transform: none !important; }
  .memory-thread::after { display: none; }
  .cinematic-lens::before,
  .cinematic-lens__ring,
  .cinematic-lens__aperture { animation: none !important; }
  .reel-frame,
  .letter-section__inside,
  .goodnight__ring { transition: none !important; }
}

/* --------------------------------------------------------------------------
   Line puppy theme: a bright, hand-drawn memory book built around two pups.
   -------------------------------------------------------------------------- */
:root {
  --ink: #27313a;
  --ink-2: #354550;
  --cream: #fffaf0;
  --paper: #fffdf7;
  --rose: #ff8e71;
  --rose-light: #ffbd9d;
  --amber: #f2c64d;
  --violet: #70c2de;
  --lilac: #d9f0f6;
  --muted: #687783;
  --line: rgba(39, 49, 58, .22);
  --dark-line: rgba(39, 49, 58, .16);
  --serif: 'Noto Sans SC', 'Microsoft YaHei', 'PingFang SC', sans-serif;
  --sans: 'Noto Sans SC', 'Microsoft YaHei', 'PingFang SC', sans-serif;
  --mono: 'DM Mono', Consolas, monospace;
}

html { background: #fff9ee; }
body.line-puppy-theme {
  color: #27313a;
  background: #fff9ee;
  font-family: var(--sans);
}

body.line-puppy-theme ::selection { color: #27313a; background: #f8d35e; }
body.line-puppy-theme button:focus-visible,
body.line-puppy-theme label:focus-within { outline-color: #27313a; }

.line-puppy-theme .entry-gate {
  color: #27313a;
  background-color: #fff4c9;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(39,49,58,.035) 27px 28px),
    repeating-linear-gradient(90deg, transparent 0 27px, rgba(39,49,58,.035) 27px 28px);
}

.line-puppy-theme .entry-gate__aurora {
  opacity: .42;
  background: linear-gradient(140deg, rgba(139,218,238,.5), transparent 45%, rgba(250,210,88,.48));
  filter: none;
}

.line-puppy-theme .festival-fireworks::before {
  background:
    radial-gradient(circle at 50% 54%, rgba(41,28,64,.18), transparent 34%),
    linear-gradient(180deg, rgba(5,8,25,.96), rgba(14,15,37,.88) 70%, rgba(45,34,60,.76));
}

.line-puppy-theme .festival-fireworks.is-playing ~ .entry-gate__rings,
.line-puppy-theme .festival-fireworks.is-playing ~ .entry-gate__eclipse,
.line-puppy-theme .festival-fireworks.is-playing ~ .entry-gate__thread,
.line-puppy-theme .festival-fireworks.is-playing ~ .line-puppy-art--entry {
  filter: brightness(.82) saturate(.9);
}

.line-puppy-theme .entry-gate__grain,
.line-puppy-theme .entry-gate__beams,
.line-puppy-theme .entry-gate__stars { display: none; }

.line-puppy-theme .entry-gate__rings i { border-color: rgba(39,49,58,.18); border-style: dashed; }
.line-puppy-theme .entry-gate__rings i:nth-child(2) { border-color: rgba(255,142,113,.52); }
.line-puppy-theme .entry-gate__rings i:nth-child(3) { border-color: rgba(112,194,222,.68); }
.line-puppy-theme .entry-gate__rings i::before { background: #ff8e71; box-shadow: none; }
.line-puppy-theme .entry-gate__eclipse {
  border-color: rgba(39,49,58,.28);
  background: #fffdf7;
  box-shadow: 0 0 0 14px rgba(255,255,255,.55), 0 20px 60px rgba(39,49,58,.12);
}
.line-puppy-theme .entry-gate__eclipse i { border-color: rgba(39,49,58,.24); }
.line-puppy-theme .entry-gate__eclipse i:nth-child(1) { border-color: #f2c64d; }
.line-puppy-theme .entry-gate__eclipse i:nth-child(2) { border-color: #70c2de; }
.line-puppy-theme .entry-gate__eclipse i:nth-child(3) { border-color: #ff8e71; }
.line-puppy-theme .entry-gate__thread > path {
  stroke: #27313a;
  stroke-width: 1.5;
  stroke-dasharray: 2 11;
  filter: none;
}
.line-puppy-theme .entry-gate__thread-soft { display: none; }
.line-puppy-theme .entry-gate__thread circle { fill: #f2c64d; filter: none; }
.line-puppy-theme .entry-gate__thread #entryHeart {
  fill: #ff8e71;
  stroke: #27313a;
  filter: none;
}

.line-puppy-art { position: absolute; margin: 0; pointer-events: none; }
.line-puppy-art img,
.line-puppy-atlas,
.line-puppy-goodnight { display: block; width: 100%; height: auto; }

.line-puppy-section-art {
  position: absolute;
  z-index: 3;
  display: block;
  margin: 0;
  overflow: hidden;
  border: 2px solid #27313a;
  border-radius: 8px;
  box-shadow: 8px 8px 0 rgba(39,49,58,.15);
  pointer-events: none;
}
.line-puppy-section-art img { display: block; width: 100%; height: auto; }

.line-puppy-art--entry {
  z-index: 2;
  right: clamp(22px, 7vw, 120px);
  bottom: clamp(12px, 3vh, 44px);
  width: min(43vw, 560px);
  opacity: .92;
  transform: rotate(-4deg);
  animation: puppyBreathe 4.6s ease-in-out infinite;
}
.line-puppy-theme .entry-gate__story { z-index: 4; color: #27313a; }
.line-puppy-theme .entry-gate__story p { color: #27313a; letter-spacing: .13em; }
.line-puppy-theme .entry-gate__story p i,
.line-puppy-theme .entry-gate__story h1 em { color: #ff8e71; }
.line-puppy-theme .entry-gate__story h1 {
  font-family: var(--sans);
  font-weight: 900;
  letter-spacing: 0;
  text-shadow: none;
}
.line-puppy-theme .entry-gate__story span { color: rgba(39,49,58,.72); font-family: var(--sans); }
.line-puppy-theme .entry-gate__festival-message { color: #fffdf7; font-family: var(--sans); font-weight: 900; text-shadow: 0 5px 0 rgba(39,49,58,.28), 0 0 28px rgba(112,194,222,.56); }
.line-puppy-theme .entry-gate__festival-message--promise { color: #ffbd9d; text-shadow: 0 5px 0 rgba(39,49,58,.28), 0 0 28px rgba(255,142,113,.72), 0 0 54px rgba(112,194,222,.38); }
.line-puppy-theme .entry-login {
  border: 2px solid #27313a;
  border-radius: 8px;
  color: #27313a;
  background: #fffdf7;
  box-shadow: 10px 10px 0 #f2c64d;
  backdrop-filter: none;
}
.line-puppy-theme .entry-login__seal {
  border: 2px solid #27313a;
  color: #27313a;
  background: #fffdf7;
  box-shadow: 4px 4px 0 #ff8e71;
}
.line-puppy-theme .entry-login__seal svg { fill: #ff8e71; }
.line-puppy-theme .entry-login__date { color: #587d35; }
.line-puppy-theme .entry-login h2 { font-family: var(--sans); font-weight: 900; letter-spacing: 0; }
.line-puppy-theme .entry-login__lead { color: rgba(39,49,58,.73); font-family: var(--sans); }
.line-puppy-theme .entry-field > span:first-child { color: #52636e; }
.line-puppy-theme .entry-field input {
  border: 1px solid rgba(39,49,58,.35);
  border-radius: 6px;
  color: #27313a;
  background: #fff9e8;
  letter-spacing: .08em;
}
.line-puppy-theme .entry-field input::placeholder { color: rgba(39,49,58,.4); }
.line-puppy-theme .entry-field input:focus { border-color: #27313a; background: #fffdf7; box-shadow: 3px 3px 0 #70c2de; }
.line-puppy-theme .entry-field__password button { color: #27313a; }
.line-puppy-theme .entry-login__submit {
  margin-top: 30px;
  padding: 15px 16px;
  border: 2px solid #27313a;
  border-radius: 7px;
  color: #27313a;
  background: #f2c64d;
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: .06em;
}
.line-puppy-theme .entry-login__submit:hover,
.line-puppy-theme .entry-login__submit:focus-visible { padding: 15px 20px; color: #27313a; border-color: #27313a; background: #ffbd9d; }
.line-puppy-theme .entry-login__status { color: #d95646; }
.line-puppy-theme .entry-gate__welcome span { color: #587d35; }
.line-puppy-theme .entry-gate__welcome strong { font-family: var(--sans); font-weight: 900; letter-spacing: 0; }
.line-puppy-theme .entry-gate__welcome i { color: rgba(39,49,58,.76); font-family: var(--sans); }
.line-puppy-theme .entry-gate__progress { color: rgba(39,49,58,.62); }
.line-puppy-theme .entry-gate__progress span { background: linear-gradient(90deg, #27313a calc(var(--entry-progress) * 100%), rgba(39,49,58,.18) 0); }

.line-puppy-theme .memory-atmosphere { background: #fff9ee; }
.line-puppy-theme .memory-atmosphere::before {
  opacity: 1;
  background-color: #fff9ee;
  background-image: repeating-linear-gradient(135deg, transparent 0 28px, rgba(39,49,58,.03) 28px 30px);
  filter: none;
}
.line-puppy-theme .memory-atmosphere::after { display: none; }
.line-puppy-theme .memory-thread { opacity: .52; mix-blend-mode: normal; }
.line-puppy-theme .memory-thread path {
  stroke: #27313a;
  stroke-width: 1.35;
  stroke-dasharray: 2 13;
  filter: none;
}
.line-puppy-theme .memory-thread__soft { display: none; }
.line-puppy-theme .memory-thread circle { fill: #f2c64d; filter: none; }
.line-puppy-theme .memory-thread #memoryThreadHeart { fill: #ff8e71; stroke: #27313a; filter: none; }
.line-puppy-theme .cursor-glow,
.line-puppy-theme .touch-aura,
.line-puppy-theme .cinematic-lens { display: none; }
.line-puppy-theme .ambient-petals { opacity: .7; }
.line-puppy-theme .ambient-petals i {
  width: 8px;
  height: 8px;
  border: 2px solid #27313a;
  border-radius: 50% 50% 45% 45%;
  background: #f2c64d;
  box-shadow: 9px -2px 0 -2px #ff8e71, -9px -2px 0 -2px #70c2de;
}

.line-puppy-theme .memory-mark { height: 72px; }
.line-puppy-theme .memory-mark__seal {
  border: 2px solid #27313a;
  color: #27313a;
  background: #fffdf7;
  box-shadow: 3px 3px 0 #f2c64d;
}
.line-puppy-theme .memory-mark__seal .memory-mark__heart { fill: #ff8e71; }
.line-puppy-theme .memory-mark__seal:hover { color: #27313a; border-color: #27313a; transform: rotate(-7deg) translateY(-2px); }
.line-puppy-theme .memory-mark > p { color: #27313a; font-family: var(--sans); letter-spacing: .06em; font-weight: 800; }
.line-puppy-theme .photo-counter { color: #27313a; }
.line-puppy-theme .motion-toggle {
  border: 2px solid #27313a;
  border-radius: 7px;
  color: #27313a;
  background: #fffdf7;
  box-shadow: 3px 3px 0 #70c2de;
  font-family: var(--sans);
  font-weight: 800;
}
.line-puppy-theme .motion-toggle:hover { color: #27313a; background: #d9f0f6; }
.line-puppy-theme .story-rail i { background: #27313a; }
.line-puppy-theme .story-rail i.is-active { background: #ff8e71; }

.line-puppy-theme .film { background: #fff9ee; }
.line-puppy-theme .film__sticky { background: #fff9ee; }
.line-puppy-theme .wash { display: none; }
.line-puppy-theme .film__grain {
  opacity: .27;
  mix-blend-mode: normal;
  background-image: repeating-linear-gradient(45deg, transparent 0 17px, rgba(39,49,58,.025) 17px 18px);
}
.line-puppy-theme .film__stars { display: none; }
.line-puppy-theme .film__chapter-count,
.line-puppy-theme .film__progress { color: #27313a; }
.line-puppy-theme .film__progress { background: rgba(39,49,58,.18); }
.line-puppy-theme .film__progress span { background: #f2c64d; }
.line-puppy-theme .journey-line > path {
  stroke: #27313a;
  stroke-width: 1.35;
  stroke-dasharray: 2 12;
  filter: none;
}
.line-puppy-theme .journey-line__soft { display: none; }
.line-puppy-theme .journey-line circle { fill: #f2c64d; filter: none; }
.line-puppy-theme .journey-line #journeyHeart { fill: #ff8e71; stroke: #27313a; filter: none; }
.line-puppy-theme .halo { border: 2px dashed rgba(39,49,58,.17); background: transparent; box-shadow: none; }
.line-puppy-art--film {
  z-index: 3;
  top: max(7vh, 68px);
  right: clamp(14px, 5vw, 92px);
  width: min(47vw, 660px);
  opacity: calc(.88 - var(--film-progress) * .38);
  transform: rotate(2deg) translate3d(0, calc(var(--film-progress) * -14px), 0);
  transform-origin: 60% 66%;
  animation: puppyBreathe 5.2s ease-in-out infinite alternate;
}
.line-puppy-theme .photo-slot {
  --slot-a: #fffdf7;
  --slot-b: #fff1bd;
  --slot-c: #ccecf4;
  color: #27313a;
  background: #fffdf7;
  box-shadow: 8px 8px 0 rgba(39,49,58,.14);
}
.line-puppy-theme .photo-slot::before { background: repeating-linear-gradient(45deg, transparent 0 11px, rgba(39,49,58,.04) 11px 12px); }
.line-puppy-theme .photo-slot::after { border: 2px solid #27313a; }
.line-puppy-theme .photo-slot__veil { background: linear-gradient(180deg, rgba(255,253,247,.02), rgba(39,49,58,.12)); }
.line-puppy-theme .photo-slot__placeholder b { color: #ff8e71; }
.line-puppy-theme .photo-slot__placeholder strong { font-family: var(--sans); font-weight: 900; letter-spacing: 0; }
.line-puppy-theme .photo-slot__placeholder small { color: rgba(39,49,58,.65); }
.line-puppy-theme .photo-slot__view,
.line-puppy-theme .photo-slot__love {
  border: 2px solid #27313a;
  color: #27313a;
  background: #fffdf7;
  box-shadow: 2px 2px 0 #f2c64d;
  backdrop-filter: none;
}
.line-puppy-theme .photo-slot:hover .photo-slot__veil,
.line-puppy-theme .photo-slot:focus-within .photo-slot__veil { background: linear-gradient(180deg, rgba(255,253,247,.02), rgba(39,49,58,.04)); }
.line-puppy-theme .photo-slot.is-loved .photo-slot__love { border-color: #27313a; color: #27313a; background: #ff8e71; }
.line-puppy-theme .photo-slot.is-peeked::after { border-color: #27313a; box-shadow: 0 0 0 5px #f2c64d; }

.line-puppy-theme .scene-copy { z-index: 8; color: #27313a; }
.line-puppy-theme .scene-copy h1,
.line-puppy-theme .scene-copy h2,
.line-puppy-theme .atlas h2,
.line-puppy-theme .photo-reel h2,
.line-puppy-theme .constellation h2,
.line-puppy-theme .letter-section h2,
.line-puppy-theme .goodnight h2 {
  color: #27313a;
  font-family: var(--sans);
  font-weight: 900;
  letter-spacing: 0;
  text-shadow: none;
}
.line-puppy-theme .scene-copy h1 em,
.line-puppy-theme .scene-copy h2 i,
.line-puppy-theme .scene-copy h2 em,
.line-puppy-theme .scene-copy__index i,
.line-puppy-theme .scene-copy__whisper { color: #ff6f5a; }
.line-puppy-theme .scene-copy__date,
.line-puppy-theme .scene-copy__index { color: #587d35; letter-spacing: .08em; }
.line-puppy-theme .scene-copy__body { color: rgba(39,49,58,.78); font-family: var(--sans); }
.line-puppy-theme .film__scroll-cue { color: #27313a; }
.line-puppy-theme .film__scroll-cue span { border-color: #27313a; }
.line-puppy-theme .film__scroll-cue span::after { background: #ff8e71; }

.line-puppy-theme .atlas {
  color: #27313a;
  background-color: #ddf3e5;
  background-image: repeating-linear-gradient(90deg, transparent 0 31px, rgba(39,49,58,.035) 31px 32px);
}
.line-puppy-theme .atlas__ambient { opacity: .18; background: #f2c64d; filter: none; }
.line-puppy-atlas {
  position: absolute;
  z-index: 1;
  top: -105px;
  right: -95px;
  width: min(39vw, 510px);
  border: 2px solid #27313a;
  border-radius: 8px;
  opacity: .92;
  transform: rotate(14deg);
  box-shadow: 8px 8px 0 rgba(39,49,58,.15);
  pointer-events: none;
}
.line-puppy-theme .section-index,
.line-puppy-theme .atlas__margin-note,
.line-puppy-theme .atlas__little-line { color: #587d35; }
.line-puppy-theme .section-index i,
.line-puppy-theme .atlas h2 em,
.line-puppy-theme .atlas__margin-note i,
.line-puppy-theme .atlas__little-line i { color: #ff6f5a; }
.line-puppy-theme .atlas__intro > p,
.line-puppy-theme .atlas__afterword p { color: rgba(39,49,58,.76); }
.line-puppy-theme .atlas__afterword { border-color: #27313a; }
.line-puppy-theme .atlas__afterword span { color: #27313a; }
.line-puppy-theme .atlas__afterword span i { color: #ff6f5a; }

.line-puppy-theme .photo-reel { color: #27313a; background: #a9ddec; }
.line-puppy-theme .photo-reel__sticky { background: #a9ddec; }
.line-puppy-theme .photo-reel__sky { background: #a9ddec; }
.line-puppy-theme .photo-reel__flare { display: none; }
.line-puppy-theme .photo-reel__noise { opacity: .18; mix-blend-mode: normal; }
.line-puppy-section-art--reel {
  right: clamp(22px, 6vw, 100px);
  bottom: clamp(58px, 8vh, 110px);
  width: min(32vw, 460px);
  transform: rotate(-4deg);
}
.line-puppy-theme .photo-reel__copy > p { color: #587d35; }
.line-puppy-theme .photo-reel__copy > p i,
.line-puppy-theme .photo-reel h2 em { color: #ff6f5a; }
.line-puppy-theme .photo-reel__detail { color: rgba(39,49,58,.78); }
.line-puppy-theme .reel-frame { border-color: #27313a; background: #fffdf7; box-shadow: 7px 7px 0 rgba(39,49,58,.16); }
.line-puppy-theme .reel-frame::after { border-color: #27313a; }
.line-puppy-theme .reel-frame figcaption { color: #27313a; }
.line-puppy-theme .photo-reel__caption { color: #27313a; }

.line-puppy-theme .constellation { color: #27313a; background: #fff1b8; }
.line-puppy-theme .constellation__sticky { background: #fff1b8; }
.line-puppy-theme .constellation__sky { background: #fff1b8; }
.line-puppy-section-art--constellation {
  right: clamp(18px, 5vw, 90px);
  bottom: clamp(58px, 9vh, 120px);
  width: min(23vw, 290px);
  transform: rotate(5deg);
}
.line-puppy-theme .constellation__glow,
.line-puppy-theme .constellation__grain { display: none; }
.line-puppy-theme .constellation__path > path { stroke: #27313a; stroke-dasharray: 2 12; filter: none; }
.line-puppy-theme .constellation__path .constellation__path-soft { display: none; }
.line-puppy-theme .constellation__path circle { fill: #ff8e71; filter: none; }
.line-puppy-theme .constellation__copy > p { color: #587d35; }
.line-puppy-theme .constellation h2 em { color: #ff6f5a; }
.line-puppy-theme .constellation__copy > p:last-child { color: rgba(39,49,58,.78); }
.line-puppy-theme .constellation__seal { border-color: #27313a; color: #27313a; background: #fffdf7; }
.line-puppy-theme .constellation__seal i { color: #ff6f5a; }
.line-puppy-theme .constellation__seal span { color: #587d35; }

.line-puppy-theme .letter-section { color: #27313a; background: #f5cb55; }
.line-puppy-section-art--letter {
  z-index: 1;
  right: clamp(18px, 3vw, 54px);
  top: clamp(100px, 14vh, 180px);
  width: min(23vw, 300px);
  transform: rotate(4deg);
}
.line-puppy-theme .letter-section__thread { border-color: #27313a; border-style: dashed; }
.line-puppy-theme .letter-section__inside {
  border: 2px solid #27313a;
  border-radius: 8px;
  background: #fffdf7;
  box-shadow: 12px 12px 0 rgba(39,49,58,.14);
}
.line-puppy-theme .letter-section__date { color: #587d35; }
.line-puppy-theme .letter-section__lead,
.line-puppy-theme .letter-section__body { color: rgba(39,49,58,.8); }
.line-puppy-theme .letter-section__body p { color: rgba(39,49,58,.82); }
.line-puppy-theme .letter-button {
  border: 2px solid #27313a;
  border-radius: 7px;
  color: #27313a;
  background: #a9ddec;
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: 0;
}
.line-puppy-theme .letter-button:hover { color: #27313a; background: #ffbd9d; }
.line-puppy-theme .letter-section__sign { color: #27313a; }
.line-puppy-theme .letter-section__sign b i { color: #ff6f5a; }

.line-puppy-theme .goodnight { color: #27313a; background: #8dd0e6; }
.line-puppy-theme .goodnight__ring {
  border-color: #27313a;
  border-style: dashed;
  background: #fff9ee;
  box-shadow: 10px 10px 0 rgba(39,49,58,.14);
}
.line-puppy-goodnight {
  position: absolute;
  z-index: 2;
  bottom: 5vh;
  left: max(2vw, 20px);
  width: min(52vw, 700px);
  border: 2px solid #27313a;
  border-radius: 8px;
  transform: rotate(-3deg);
  animation: puppyBreathe 4.8s ease-in-out infinite alternate;
  box-shadow: 8px 8px 0 rgba(39,49,58,.15);
  pointer-events: none;
}
.line-puppy-theme .goodnight__content { position: relative; z-index: 3; }
.line-puppy-theme .goodnight__content > span { color: #587d35; }
.line-puppy-theme .goodnight__content > span i,
.line-puppy-theme .goodnight h2 em { color: #ff6f5a; }
.line-puppy-theme .goodnight__content > p,
.line-puppy-theme .goodnight__note { color: rgba(39,49,58,.76); }
.line-puppy-theme .goodnight__button {
  border: 2px solid #27313a;
  border-radius: 7px;
  color: #27313a;
  background: #f2c64d;
  box-shadow: 4px 4px 0 #ff8e71;
  font-family: var(--sans);
  font-weight: 900;
  letter-spacing: 0;
}
.line-puppy-theme .goodnight__button:hover { color: #27313a; background: #fffdf7; }

.line-puppy-theme .memory-viewer__backdrop { background: rgba(39,49,58,.45); }
.line-puppy-theme .memory-viewer__panel { border: 2px solid #27313a; background: #fffdf7; box-shadow: 12px 12px 0 #f2c64d; }
.line-puppy-theme .memory-viewer__caption { color: #27313a; background: #fffdf7; }
.line-puppy-theme .memory-viewer__caption h2 { font-family: var(--sans); font-weight: 900; letter-spacing: 0; }
.line-puppy-theme .memory-viewer__caption span { color: #ff6f5a; }
.line-puppy-theme .memory-viewer__caption button,
.line-puppy-theme .memory-viewer__close,
.line-puppy-theme .memory-viewer__step { border: 2px solid #27313a; color: #27313a; background: #fffdf7; box-shadow: 2px 2px 0 #f2c64d; }

@keyframes puppyBreathe {
  from { translate: 0 0; }
  to { translate: 0 -10px; }
}

body.line-puppy-theme.is-quiet .line-puppy-art--entry,
body.line-puppy-theme.is-quiet .line-puppy-art--film,
body.line-puppy-theme.is-quiet .line-puppy-goodnight { animation-play-state: paused; }
body.line-puppy-theme.is-quiet .ambient-petals { opacity: 0; }

@media (max-width: 760px) {
  .line-puppy-art--entry { right: 10px; bottom: 4vh; width: min(84vw, 430px); max-width: 100%; opacity: .48; }
  .line-puppy-art--film { top: 11vh; right: -25vw; width: min(98vw, 470px); opacity: calc(.48 - var(--film-progress) * .18); }
  .line-puppy-atlas { top: 12px; right: -36px; width: 54vw; opacity: .9; }
  .line-puppy-section-art--reel { right: -9vw; bottom: 7vh; width: 58vw; opacity: .78; }
  .line-puppy-section-art--constellation { right: 12px; bottom: 12vh; width: 48vw; opacity: .88; }
  .line-puppy-section-art--letter { top: 74px; right: 12px; bottom: auto; width: 145px; opacity: .82; }
  .line-puppy-goodnight { bottom: 3vh; left: -16vw; width: 96vw; opacity: .9; }
  .line-puppy-theme .entry-login { box-shadow: 7px 7px 0 #f2c64d; }
  .line-puppy-theme .memory-mark > p { max-width: 160px; font-size: 9px; text-align: center; }
  .line-puppy-theme .motion-toggle { width: 38px; height: 38px; padding: 0; justify-content: center; }
  .line-puppy-theme .motion-toggle span { display: none; }
  .line-puppy-theme .scene-copy h1,
  .line-puppy-theme .scene-copy h2 { max-width: min(86vw, 410px); }
  .line-puppy-theme .atlas__intro,
  .line-puppy-theme .atlas__afterword { position: relative; z-index: 2; }
  .line-puppy-theme .letter-section__inside { box-shadow: 7px 7px 0 rgba(39,49,58,.14); }
}

@media (prefers-reduced-motion: reduce) {
  .line-puppy-art--entry,
  .line-puppy-art--film,
  .line-puppy-goodnight { animation: none; }
}

@keyframes cinematicOrbit { to { transform: rotate(360deg); } }

@keyframes twinkle { 0%,100% { opacity:.24; transform:scale(.8); } 50% { opacity:.85; transform:scale(1.32); } }
@keyframes pathDrift { to { stroke-dashoffset:-70px; } }
@keyframes heartBreathe { 0%,100% { opacity:.66; } 50% { opacity:1; } }
@keyframes haloBreathe { 0%,100% { transform:scale(.97) rotate(0deg); opacity:.55; } 50% { transform:scale(1.04) rotate(8deg); opacity:.95; } }
@keyframes driftDown { 0% { transform:translate3d(0,-8vh,0) rotate(0deg); } 100% { transform:translate3d(12vw,108vh,0) rotate(300deg); } }
@keyframes flarePulse { 0%,100% { opacity:.45; transform:scale(.94); } 50% { opacity:.9; transform:scale(1.08); } }
@keyframes coreBreathe { 0%,100% { transform:translate(calc(-50% + var(--core-gaze-x)), calc(-50% + var(--core-gaze-y))) scale(.96); opacity:.65; } 50% { transform:translate(calc(-50% + var(--core-gaze-x)), calc(-50% + var(--core-gaze-y))) scale(1.05); opacity:1; } }
@keyframes memoryHeartBreathe { 0%,100% { opacity:.62; } 50% { opacity:1; } }
@keyframes photoRipple { 0% { opacity:.85; } 100% { opacity:0; transform:translate(-50%, -50%) scale(18); } }
@keyframes entryAurora { 0% { transform:scale(.94) rotate(-2deg); opacity:.66; } 100% { transform:scale(1.08) rotate(4deg); opacity:1; } }
@keyframes entryRing { to { transform:rotate(360deg); } }
@keyframes entryBeams { 0%,7% { opacity:0; transform:scale(1.28) rotate(-4deg); } 20% { opacity:.32; } 39% { opacity:.78; transform:scale(1) rotate(1deg); } 56% { opacity:.5; } 70% { opacity:.82; transform:scale(.9) rotate(-1deg); } 86%,100% { opacity:0; transform:scale(.78) rotate(3deg); } }
@keyframes entryEclipse { 0%,10% { opacity:0; transform:translate(-50%,-50%) scale(.16) rotate(-18deg); } 22% { opacity:.88; transform:translate(-50%,-50%) scale(.72) rotate(0deg); } 42% { opacity:.6; transform:translate(-50%,-50%) scale(1.16) rotate(32deg); } 58% { opacity:.94; transform:translate(-50%,-50%) scale(.84) rotate(70deg); } 70% { opacity:.28; transform:translate(-50%,-50%) scale(.36) rotate(106deg); } 81%,100% { opacity:0; transform:translate(-50%,-50%) scale(.12) rotate(128deg); } }
@keyframes entryStory { 0%,9% { opacity:0; transform:translate(-50%,-38%) scale(.91); filter:blur(12px); } 18% { opacity:.96; transform:translate(-50%,-51%) scale(1.025); filter:blur(0); } 32%,49% { opacity:1; transform:translate(-50%,-50%) scale(1); filter:blur(0); } 59% { opacity:.74; transform:translate(-50%,-47%) scale(.985); filter:blur(.8px); } 70%,100% { opacity:0; transform:translate(-50%,-40%) scale(.9); filter:blur(10px); } }
@keyframes entryNameCharge { 0%,13% { letter-spacing:-.14em; opacity:0; transform:scale(.9); } 25% { letter-spacing:-.07em; opacity:1; transform:scale(1.03); } 45% { letter-spacing:-.078em; transform:scale(1); } 61%,100% { letter-spacing:-.13em; opacity:0; transform:scale(.92); } }
@keyframes entryStoryWhisper { 0%,15% { opacity:0; transform:translateY(14px); } 27%,50% { opacity:1; transform:translateY(0); } 63%,100% { opacity:0; transform:translateY(-12px); } }
@keyframes entryLoginArrive { 0%,72% { opacity:0; transform:translate(-50%,-31%) scale(.84); filter:blur(18px); } 79% { opacity:.48; transform:translate(-50%,-54%) scale(1.035); filter:blur(5px); } 87% { opacity:1; transform:translate(-50%,-49%) scale(.992); filter:blur(0); } 93%,100% { opacity:1; transform:translate(-50%,-50%) scale(1); filter:blur(0); } }
@keyframes festivalLoginArrive { 0% { opacity:0; transform:translate(-50%,-43%) scale(.94); filter:blur(12px); } 68% { opacity:.88; transform:translate(-50%,-51%) scale(1.012); filter:blur(1px); } 100% { opacity:1; transform:translate(-50%,-50%) scale(1); filter:blur(0); } }
@keyframes entryWelcome { 0% { opacity:0; transform:translate(-50%,-34%) scale(.94); filter:blur(9px); } 32%,68% { opacity:1; transform:translate(-50%,-50%) scale(1); filter:blur(0); } 100% { opacity:0; transform:translate(-50%,-62%) scale(1.04); filter:blur(7px); } }
@keyframes entryShake { 0%,100% { margin-left:0; } 25% { margin-left:-9px; } 50% { margin-left:7px; } 75% { margin-left:-4px; } }

@media (max-width: 980px) {
  .film { height: 620vh; }.photo-card { width: clamp(230px, 34vw, 360px); }.photo-card--second { width: clamp(135px, 18vw, 190px); }.photo-card--third { width: clamp(130px, 17vw, 180px); }.scene-copy--opening { top: 22%; max-width: 55vw; }.scene-copy--encounter { max-width:52vw; }.scene-copy--ordinary { right:9vw; max-width:52vw; }.scene-copy--promise { left:9vw; max-width:58vw; }.scene-copy--ending { right:8vw; max-width:59vw; }.atlas { min-height: 270vh; }.atlas__masonry { height: clamp(1240px, 136vw, 1600px); }.atlas__margin-note { top: 13%; }.photo-reel__copy { width: 57vw; }.constellation-photo { width: clamp(160px, 23vw, 250px); }.memory-viewer__panel { width: min(830px, 100%); }
}

@media (max-width: 620px) {
  :root { --gutter: 20px; }.cursor-glow { display:none; }.ambient-petals i { opacity:.26; }.memory-mark { height:64px; }.memory-mark__seal { width:32px; height:32px; font-size:9px; }.memory-mark > p, .photo-counter { display:none; }.memory-mark__actions { gap:0; }.motion-toggle { padding:8px; }.motion-toggle span { display:none; }
  .entry-gate__rings { width:142vw; height:142vw; }.entry-gate__story { width:calc(100% - 32px); }.entry-gate__story p { margin-bottom:22px; font-size:8px; }.entry-gate__story h1 { font-size:clamp(49px,15vw,70px); line-height:.9; }.entry-gate__story span { width:78%; margin:27px auto 0; font-size:15px; }.entry-gate__festival-copy { width:calc(100% - 28px); min-height:130px; }.entry-gate__festival-message { font-size:42px; line-height:1.18; }.entry-gate__festival-message--promise { font-size:50px; }.entry-login { top:50%; width:calc(100% - 28px); max-height:calc(100svh - 34px); padding:64px 22px 24px; overflow-y:auto; }.entry-login__seal { top:10px; width:46px; height:46px; font-size:9px; transform:translate(-50%,0); }.entry-login__date { margin-bottom:17px; font-size:7px; }.entry-login h2 { font-size:clamp(35px,10vw,46px); }.entry-login__lead { margin:18px auto 23px; font-size:14px; line-height:1.62; }.entry-login__fields { gap:13px; }.entry-field input { height:47px; font-size:13px; }.entry-login__submit { margin-top:20px; padding-top:14px; }.entry-gate__progress { bottom:max(17px, env(safe-area-inset-bottom)); }.entry-gate__progress i { display:none; }.entry-gate__welcome strong { font-size:clamp(45px,14vw,64px); }.entry-gate__welcome i { font-size:15px; }
  .photo-slot::after { inset:9px; }.photo-slot__placeholder { right:16px; bottom:16px; left:16px; }.photo-slot__placeholder b { margin-bottom:14px; font-size:8px; }.photo-slot__placeholder strong { font-size:clamp(20px,5.4vw,28px); }.photo-slot__placeholder small { margin-top:9px; font-size:7px; }.photo-slot__view { top:11px; right:11px; width:30px; height:30px; }
  .film { height:650vh; }.film__chapter-count { top:auto; right:20px; bottom:24px; transform:none; }.film__progress { top:auto; right:20px; bottom:42px; width:92px; height:1px; transform:none; }.film__progress span { width:calc(var(--film-progress) * 100%); height:100%; }.journey-line { opacity:.46; }.halo--one { top:24%; right:-50vw; width:125vw; height:125vw; }.halo--two { bottom:5%; left:-58vw; width:125vw; height:125vw; }.photo-card { width:min(60vw,290px); --photo-x:13vw; --photo-y:18vh; }.photo-card--second { width:min(38vw,164px); }.photo-card--third { width:min(36vw,152px); }.photo-card--second .photo-slot__placeholder, .photo-card--third .photo-slot__placeholder { right:14px; bottom:14px; left:14px; }.photo-card--second .photo-slot__placeholder strong, .photo-card--third .photo-slot__placeholder strong { font-size:clamp(15px,4vw,19px); }.scene-copy { right:var(--gutter); left:var(--gutter); max-width:none; }.scene-copy__date, .scene-copy__index, .scene-copy__whisper { font-size:8px; letter-spacing:.1em; }.scene-copy h1 { font-size:clamp(56px,17vw,78px); }.scene-copy h2 { font-size:clamp(35px,10vw,49px); }.scene-copy__body { margin-top:20px; font-size:14px; line-height:1.78; }.scene-copy--opening { top:18%; }.scene-copy--encounter, .scene-copy--promise { top:17%; }.scene-copy--ordinary, .scene-copy--ending { top:18%; text-align:left; }.film__scroll-cue { bottom:20px; font-size:8px; }.film__scroll-cue p { display:none; }
  .atlas { min-height:auto; padding:116px 20px 112px; }.atlas::before { height:108px; }.atlas__intro { width:100%; }.section-index { margin-bottom:20px; font-size:8px; }.section-index i { font-size:14px; }.atlas__intro h2 { font-size:clamp(41px,12vw,56px); }.atlas__intro > p:last-child { margin:25px 0 0 10vw; font-size:16px; line-height:1.82; }.atlas__margin-note { position:relative; top:auto; right:auto; margin:66px 0 0 auto; font-size:18px; }.atlas__masonry { display:grid; height:auto; margin:68px 0 0; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-flow:dense; gap:18px 13px; }.atlas-photo { position:relative; top:auto !important; right:auto !important; bottom:auto !important; left:auto !important; width:auto !important; min-height:0; aspect-ratio:.76 !important; transform:translate3d(0,42px,0) rotate(var(--tilt)); }.atlas-photo:nth-child(1), .atlas-photo:nth-child(5), .atlas-photo:nth-child(9) { grid-column:span 2; aspect-ratio:1.18 !important; }.atlas-photo.is-visible { transform:translate3d(0,0,0) rotate(var(--tilt)); }.atlas-photo .photo-slot__placeholder { right:15px; bottom:15px; left:15px; }.atlas-photo .photo-slot__placeholder strong { font-size:clamp(18px,5vw,25px); }.atlas__little-line { position:relative; top:auto; right:auto; bottom:auto; left:auto; grid-column:span 2; font-size:18px; }.atlas__little-line--one { margin:14px 0 12px; }.atlas__little-line--two { margin:7px 0 10px; text-align:right; }.atlas__afterword { width:86%; margin:84px 0 0 auto; }.atlas__afterword p { font-size:18px; line-height:1.8; }
  .photo-reel { height:710vh; }.photo-reel__copy { top:15%; left:20px; width:calc(100% - 40px); }.photo-reel__copy > p:first-child { margin-bottom:17px; font-size:8px; }.photo-reel__copy > p:first-child span { font-size:15px; }.photo-reel__copy h2 { font-size:clamp(49px,14vw,64px); }.photo-reel__detail { width:79%; margin:23px 0 0 13vw; font-size:15px; }.photo-reel__track { top:64%; gap:12vw; }.reel-frame { width:58vw; aspect-ratio:.72; }.reel-frame .photo-slot__placeholder { right:17px; bottom:18px; left:17px; }.reel-frame .photo-slot__placeholder strong { font-size:clamp(20px,5.3vw,26px); }.photo-reel__meter { right:20px; bottom:26px; font-size:7px; }.photo-reel__meter span { width:64px; }
  .constellation { height:630vh; }.constellation__core { width:122vw; }.constellation__copy { top:15%; width:calc(100% - 40px); }.constellation__copy > p:first-child { margin-bottom:18px; font-size:8px; }.constellation__copy h2 { font-size:clamp(40px,11vw,53px); }.constellation__body { width:80%; margin-top:21px; font-size:15px; line-height:1.8; }.constellation-photo { width:min(43vw,180px); }.constellation-photo .photo-slot__placeholder { right:13px; bottom:13px; left:13px; }.constellation-photo .photo-slot__placeholder strong { font-size:clamp(16px,4.3vw,20px); }.constellation__seal { right:20px; bottom:28px; font-size:8px; }
  .letter-section { min-height:145svh; padding:120px 20px 96px; }.letter-section::before { height:100px; }.letter-section__thread { top:80px; right:20%; height:70%; }.letter-section__inside { width:100%; padding:37px 23px 42px; }.letter-section__inside::before { width:56px; height:17px; top:-8px; }.letter-section__date { margin-bottom:25px; font-size:8px; }.letter-section h2 { font-size:clamp(42px,13vw,56px); }.letter-section__lead { margin:28px 0 31px; font-size:16px; line-height:1.82; }.letter-section__body > p, .letter-section__more p { font-size:16px; line-height:1.86; }.letter-section__sign { margin-top:50px; }.goodnight { min-height:760px; }.goodnight__ring { width:124vw; }.goodnight h2 { font-size:clamp(59px,17vw,86px); }.goodnight__content > p { max-width:290px; margin-inline:auto; font-size:8px; line-height:1.7; }.goodnight__note { padding:0 20px; font-size:8px; }
  .atlas { margin-top:-20vh; padding-top:220px; padding-bottom:74px; }.atlas::before { height:42vh; }.photo-reel { margin-top:-24vh; }.constellation { margin-top:-22vh; }.letter-section { margin-top:-20vh; padding-top:220px; border-radius:0; }.letter-section::before { height:38vh; }.goodnight { margin-top:-18vh; padding-top:18vh; border-radius:0; }.memory-thread { opacity:.4; }.photo-slot__love { top:11px; right:49px; width:30px; height:30px; }.photo-slot__love svg { width:14px; height:14px; }
  .memory-viewer { padding:16px; }.memory-viewer__panel { max-height:94svh; grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto; }.memory-viewer__image { min-height:52svh; }.memory-viewer__caption { min-height:0; padding:26px 25px 29px; }.memory-viewer__caption h2 { margin:14px 0 32px; font-size:40px; }.memory-viewer__close { top:11px; right:11px; width:33px; height:33px; }.memory-viewer__step { top:auto; bottom:19px; width:35px; height:35px; transform:none; }.memory-viewer__step--prev { right:59px; left:auto; }.memory-viewer__step--next { right:16px; }.memory-viewer__step--prev:hover:not(:disabled), .memory-viewer__step--next:hover:not(:disabled) { transform:translateY(-2px); }
}

@media (max-width: 620px) {
  .festival-fireworks::before { background: linear-gradient(180deg, rgba(5,8,25,.97), rgba(15,16,39,.92) 72%, rgba(45,34,60,.82)); }
  .festival-fireworks canvas { z-index: 6; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

@media (max-width: 620px) and (max-height: 700px) {
  .entry-login { top:51%; padding-top:58px; padding-bottom:18px; }
  .entry-login__lead { margin:13px auto 16px; font-size:13px; }
  .entry-field input { height:43px; }
  .entry-login__submit { margin-top:15px; }
  .entry-login__status { margin-top:9px; }
}

@media (pointer: coarse) {
  .touch-aura { width: min(94vw, 500px); }
  .photo-slot { touch-action: pan-y pinch-zoom; }
  .photo-slot__view, .photo-slot__love { width: 44px; height: 44px; }
  .photo-slot__view { top: 12px; right: 12px; }
  .photo-slot__love { top: 12px; right: 64px; }
  .memory-mark__seal, .motion-toggle { min-width: 44px; min-height: 44px; }
  .motion-toggle { justify-content: center; }
  .memory-viewer__close, .memory-viewer__step { width: 48px; height: 48px; }
  .constellation__touch-note { bottom: 14%; }
}

@media (min-width: 621px) and (max-width: 1024px) and (pointer: coarse) {
  .entry-login { width: min(620px, calc(100% - 80px)); }
  .entry-field input { height: 56px; }
  .memory-mark { height: 84px; }
  .photo-reel__meter { bottom: 42px; }
}

/* Performance guardrails: preserve the composition while avoiding unnecessary
   paint work on the entry screen, during active scrolling, and on small devices. */
html.requires-entry main,
html.requires-entry .memory-atmosphere,
html.requires-entry .memory-thread,
html.requires-entry .cinematic-lens,
html.requires-entry .story-rail,
html.requires-entry .cursor-glow,
html.requires-entry .touch-aura,
html.requires-entry .ambient-petals,
html.requires-entry .memory-mark {
  visibility: hidden;
}

.photo-slot__picker { will-change: auto; }
.photo-slot.is-engaged .photo-slot__picker,
.photo-slot.is-peeked .photo-slot__picker { will-change: transform; }

body.is-scrolling .ambient-petals i,
body.is-scrolling .film__stars i,
body.is-scrolling .journey-line > path,
body.is-scrolling .journey-line #journeyHeart,
body.is-scrolling .halo,
body.is-scrolling .photo-reel__flare,
body.is-scrolling .constellation__core,
body.is-scrolling .memory-thread #memoryThreadHeart,
body.is-scrolling .cinematic-lens::before,
body.is-scrolling .cinematic-lens__ring,
body.is-scrolling .cinematic-lens__aperture {
  animation-play-state: paused;
}

html.constrained-device .entry-login,
html.constrained-device .letter-section__inside {
  backdrop-filter: blur(8px);
}

html.constrained-device .memory-atmosphere::before { filter: blur(10px); }
html.constrained-device .memory-atmosphere::after { filter: blur(12px); }
html.constrained-device .memory-thread::after { filter: blur(2px); }
html.constrained-device .memory-viewer__backdrop { backdrop-filter: blur(8px); }
html.constrained-device .memory-viewer__step,
html.constrained-device .photo-slot__view,
html.constrained-device .photo-slot__love { backdrop-filter: none; }
html.constrained-device .ambient-petals i,
html.constrained-device .film__stars i,
html.constrained-device .photo-reel__flare,
html.constrained-device .cinematic-lens::before,
html.constrained-device .cinematic-lens__ring,
html.constrained-device .cinematic-lens__aperture,
html.constrained-device .constellation__core {
  animation-duration: 24s;
}

html.constrained-device .cinematic-lens::after { filter: blur(2px); }