:root {
  color-scheme: dark;
  --night: #080b14;
  --night-2: #0b1020;
  --ink: #f4f1f3;
  --muted: #8e9aaf;
  --muted-2: #657188;
  --pink: #f2a4ce;
  --pink-hot: #f064b6;
  --pink-line: rgba(232, 91, 174, .66);
  --line: rgba(206, 213, 238, .16);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
  font-family: var(--sans);
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

* { box-sizing: border-box; }
html { background: var(--night); }
body { margin: 0; color: var(--ink); background: var(--night); font-family: var(--sans); font-size: 14px; font-weight: 300; overflow-x: hidden; }
button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
::selection { background: rgba(231, 110, 183, .35); }

body:not(.birthday-entered) { overflow: hidden; }
body:not(.birthday-entered) .site-header, body:not(.birthday-entered) main { opacity:0; transform:translateY(14px); }
body.birthday-entered .site-header, body.birthday-entered main { opacity:1; transform:translateY(0); transition:opacity .95s cubic-bezier(.22,.72,.24,1),transform .95s cubic-bezier(.22,.72,.24,1); }
.birthday-gate { position: fixed; z-index: 2000; inset: 0; display: grid; place-items: center; overflow: hidden; padding: 28px; background: radial-gradient(ellipse at 50% 42%,rgba(39,52,101,.7),transparent 53%),radial-gradient(ellipse at 82% 76%,rgba(99,47,103,.28),transparent 40%),linear-gradient(145deg,#050811,#0b1020 54%,#070a13); }
.birthday-gate::before { content:""; position:absolute; inset:0; opacity:.32; background-image:radial-gradient(1px 1px at 12% 23%,#f9dbe9 98%,transparent),radial-gradient(1px 1px at 79% 16%,#a9dcff 98%,transparent),radial-gradient(1.5px 1.5px at 68% 82%,#f2a4ce 98%,transparent),radial-gradient(1px 1px at 31% 76%,#ffe18a 98%,transparent); background-size:270px 230px,310px 280px,380px 330px,240px 300px; animation:gate-star-drift 28s linear infinite; pointer-events:none; }
.birthday-gate-panel { position:relative; isolation:isolate; display:flex; width:min(920px,88vw); min-height:min(690px,88dvh); flex-direction:column; align-items:center; justify-content:center; overflow:hidden; padding:clamp(30px,5vw,64px) 25px; border:1px solid rgba(230,183,222,.42); background:radial-gradient(ellipse at 50% 38%,rgba(45,57,105,.48),transparent 55%),linear-gradient(135deg,rgba(15,22,44,.91),rgba(10,13,28,.96)); box-shadow:0 32px 110px rgba(0,0,0,.48),inset 0 0 100px rgba(127,111,188,.09); animation:gate-panel-arrive 1.1s cubic-bezier(.18,.72,.22,1) both; }
.birthday-gate-panel::before { content:""; position:absolute; z-index:-1; inset:17px; border:1px solid rgba(242,164,206,.21); pointer-events:none; }
.birthday-gate-panel::after { content:""; position:absolute; z-index:-1; width:min(56vw,610px); aspect-ratio:1; border:1px solid rgba(169,220,255,.13); border-radius:50%; box-shadow:0 0 0 44px rgba(169,220,255,.025),0 0 0 90px rgba(242,164,206,.025); animation:gate-orbit-turn 36s linear infinite; pointer-events:none; }
.birthday-gate-kicker { display:flex; align-items:center; gap:17px; color:#f2a4ce; font-size:10px; font-weight:600; letter-spacing:.34em; text-align:center; }
.birthday-gate-kicker i { width:clamp(20px,5vw,58px); height:1px; background:linear-gradient(90deg,transparent,#f064b6); }
.birthday-gate-kicker i:last-child { transform:rotate(180deg); }
.birthday-gate-name { margin:clamp(25px,5vh,55px) 0 0; color:#a9dcff; font-family:var(--serif); font-size:clamp(24px,3.2vw,42px); font-style:italic; }
.birthday-gate-panel h1 { margin:4px 0 0; color:#f8f4f6; font-family:var(--serif); font-size:clamp(86px,14vw,180px); font-weight:500; letter-spacing:-.065em; line-height:.72; text-align:center; text-shadow:0 0 48px rgba(225,180,225,.12); animation:gate-title-glow 3.6s 1s ease-in-out infinite; }
.birthday-gate-panel h1 em { color:#f2a4ce; font-weight:500; font-style:italic; }
.birthday-gate-spark { margin-top:clamp(24px,5vh,48px); color:#ffdc78; font-size:28px; text-shadow:0 0 20px rgba(255,220,120,.65); animation:gate-spark-pulse 2.4s ease-in-out infinite; }
.birthday-gate-message { margin:10px 0 0; color:#c1cbe0; font:500 clamp(15px,1.7vw,20px)/1.45 var(--sans); text-align:center; animation:gate-copy-arrive .8s .35s both; }
.birthday-gate-message em { color:#f2a4ce; font-family:var(--serif); font-size:1.18em; font-weight:500; }
.birthday-gate-preview { display:flex; align-items:center; justify-content:center; gap:clamp(11px,2vw,22px); margin-top:clamp(19px,3.1vh,30px); padding:11px 18px; border:1px solid rgba(169,220,255,.15); border-radius:999px; background:rgba(5,10,24,.36); color:#aab5c9; font-family:"Manrope",var(--sans); font-size:8px; font-weight:700; letter-spacing:.14em; animation:gate-copy-arrive .8s .5s both; }
.birthday-gate-preview span { display:flex; align-items:center; gap:7px; white-space:nowrap; }
.birthday-gate-preview span i { color:#a9dcff; font-size:12px; font-style:normal; }
.birthday-gate-preview span:nth-of-type(2) i { color:#9be6be; }
.birthday-gate-preview span:nth-of-type(3) i { color:#ffdc78; }
.birthday-gate-preview > b { color:#f2a4ce; font-size:13px; }
.birthday-enter { position:relative; display:inline-flex; min-height:54px; align-items:center; justify-content:center; gap:28px; margin-top:clamp(22px,4vh,38px); padding:0 27px; border:1px solid rgba(242,164,206,.68); border-radius:999px; background:rgba(12,16,31,.72); color:#f8d5e9; font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; cursor:pointer; transition:transform .25s,background .25s,box-shadow .25s; animation:enter-glow 2.8s 1.4s ease-in-out infinite; }
.birthday-enter.is-activating::before { content:""; position:absolute; inset:-7px; border:1px solid rgba(255,220,120,.9); border-radius:inherit; pointer-events:none; animation:enter-ring .48s ease-out both; }
.birthday-enter span { color:#ffdc78; font-size:18px; transition:transform .25s; }
.birthday-enter:hover { transform:translateY(-3px); background:rgba(232,91,174,.16); box-shadow:0 0 35px rgba(232,91,174,.2); }
.birthday-enter:hover span { transform:translate(3px,-3px); }
.birthday-enter:focus-visible { outline:2px solid #ffdc78; outline-offset:5px; }
.birthday-gate-signoff { display:flex; align-items:center; gap:11px; margin:clamp(20px,3vh,30px) 0 0; color:#78869c; font:700 7px/1 "Manrope",var(--sans); letter-spacing:.24em; animation:gate-copy-arrive .8s .65s both; }
.birthday-gate-signoff i { width:20px; height:1px; background:linear-gradient(90deg,transparent,rgba(169,220,255,.55)); }
.birthday-gate-signoff i:last-child { transform:rotate(180deg); }
.birthday-gate.is-opening::before { animation:gate-star-flash .58s ease-out both; }
.birthday-gate.is-opening .birthday-gate-panel { animation:gate-panel-open .72s cubic-bezier(.2,.75,.18,1) both; }
.birthday-gate.is-opening .birthday-gate-orbit { animation-duration:2.5s; }
.birthday-gate-stars { position:absolute; inset:0; pointer-events:none; }
.birthday-gate-stars i { position:absolute; color:#ffe18a; font-size:clamp(17px,2.5vw,30px); font-style:normal; animation:gate-star-float 5s ease-in-out infinite; text-shadow:0 0 20px currentColor; }
.birthday-gate-stars i:nth-child(1) { top:19%; left:12%; color:#a9dcff; }
.birthday-gate-stars i:nth-child(2) { top:25%; right:14%; color:#f2a4ce; animation-delay:-1s; }
.birthday-gate-stars i:nth-child(3) { right:10%; bottom:18%; animation-delay:-2.4s; }
.birthday-gate-stars i:nth-child(4) { bottom:14%; left:15%; color:#9be6be; animation-delay:-3s; }
.birthday-gate-stars i:nth-child(5) { top:11%; left:48%; color:#f2a4ce; animation-delay:-.8s; }
.birthday-gate-stars i:nth-child(6) { right:34%; bottom:11%; color:#a9dcff; animation-delay:-1.8s; }
.birthday-gate-orbit { position:absolute; width:min(78vw,950px); aspect-ratio:1; border:1px solid rgba(242,164,206,.1); border-radius:50%; pointer-events:none; }
.birthday-gate-orbit::after { content:""; position:absolute; top:18%; left:18%; width:8px; height:8px; border-radius:50%; background:#f2a4ce; box-shadow:0 0 20px 5px rgba(242,164,206,.45); }
.birthday-gate-orbit.orbit-a { animation:gate-orbit-turn 19s linear infinite; }
.birthday-gate-orbit.orbit-b { width:min(56vw,690px); border-color:rgba(169,220,255,.1); transform:rotate(54deg) scaleY(.72); animation:gate-orbit-turn 25s linear infinite reverse; }
@keyframes gate-panel-arrive { from { opacity:0; transform:translateY(20px) scale(.975); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes gate-panel-open { 30% { transform:scale(1.018); border-color:rgba(255,220,120,.8); box-shadow:0 0 80px rgba(242,164,206,.23),inset 0 0 130px rgba(169,220,255,.2); } 100% { transform:scale(1.045); opacity:.72; filter:blur(1px); } }
@keyframes gate-copy-arrive { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes gate-star-flash { 35% { opacity:.78; filter:brightness(2); background-size:360px 310px,390px 340px,460px 390px,320px 380px; } 100% { opacity:.32; filter:brightness(1); } }
@keyframes gate-star-drift { to { background-position:270px 230px,-310px 280px,380px -330px,-240px 300px; } }
@keyframes gate-star-float { 0%,100% { transform:translateY(0) rotate(0); opacity:.6; } 50% { transform:translateY(-14px) rotate(18deg); opacity:1; } }
@keyframes gate-spark-pulse { 0%,100% { transform:scale(.9); opacity:.75; } 50% { transform:scale(1.16); opacity:1; } }
@keyframes gate-orbit-turn { to { rotate:360deg; } }
@keyframes gate-title-glow { 0%,100% { text-shadow:0 0 22px rgba(242,164,206,.12); } 50% { text-shadow:0 0 48px rgba(242,164,206,.38),0 0 90px rgba(169,220,255,.12); } }
@keyframes enter-glow { 0%,100% { box-shadow:0 0 0 rgba(232,91,174,0); } 50% { box-shadow:0 0 26px rgba(232,91,174,.24); } }
@keyframes enter-ring { from { opacity:.9; transform:scale(.92); } to { opacity:0; transform:scale(1.55); } }

@media (min-width:641px) and (max-height:820px) {
  .birthday-gate-panel { min-height:calc(100dvh - 44px); padding:24px 20px; }
  .birthday-gate-name { margin-top:24px; }
  .birthday-gate-panel h1 { font-size:clamp(74px,10vw,132px); }
  .birthday-gate-spark { margin-top:17px; }
  .birthday-gate-preview { margin-top:15px; }
  .birthday-enter { min-height:48px; margin-top:18px; }
  .birthday-gate-signoff { margin-top:15px; }
}

.starfield { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .68; background:
  radial-gradient(ellipse at 57% 28%, rgba(37, 52, 99, .48), transparent 44%),
  radial-gradient(ellipse at 79% 60%, rgba(37, 31, 72, .35), transparent 45%),
  radial-gradient(1px 1px at 13% 14%, rgba(246, 201, 225, .74) 98%, transparent),
  radial-gradient(1px 1px at 26% 28%, rgba(246, 201, 225, .62) 98%, transparent),
  radial-gradient(1.5px 1.5px at 38% 44%, rgba(246, 201, 225, .75) 98%, transparent),
  radial-gradient(1px 1px at 54% 60%, rgba(246, 201, 225, .62) 98%, transparent),
  radial-gradient(1px 1px at 69% 72%, rgba(246, 201, 225, .72) 98%, transparent),
  radial-gradient(1px 1px at 83% 86%, rgba(246, 201, 225, .7) 98%, transparent),
  linear-gradient(135deg, #080b14 0%, #0b1020 52%, #090b15 100%); background-size: auto, auto, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, auto; }
.starfield::after { content: ""; position: absolute; width: 1px; height: 190vh; left: 25%; top: -16vh; opacity: .23; transform: rotate(-54deg); transform-origin: top; background: repeating-linear-gradient(to bottom, transparent 0 9px, rgba(239, 161, 210, .9) 9px 11px, transparent 11px 31px); }
.ambient-blooms { position:fixed; z-index:0; inset:0; overflow:hidden; pointer-events:none; }
.ambient-blooms span { --flower:#f2a4ce; position:absolute; display:block; color:var(--flower); font-family:Georgia,serif; font-size:clamp(22px,3vw,38px); line-height:1; opacity:.3; text-shadow:0 0 18px currentColor; animation:petal-drift 15s ease-in-out infinite; }
.ambient-blooms span:nth-child(1) { --flower:#ffd96a; top:19%; left:8%; animation-duration:17s; }
.ambient-blooms span:nth-child(2) { --flower:#9be6be; top:42%; right:12%; font-size:clamp(19px,2.4vw,31px); animation-delay:-7s; animation-duration:19s; }
.ambient-blooms span:nth-child(3) { --flower:#a9dcff; bottom:18%; left:29%; animation-delay:-11s; animation-duration:21s; }
.ambient-blooms span:nth-child(4) { --flower:#f3a5d5; top:70%; right:26%; font-size:clamp(25px,3.5vw,43px); animation-delay:-4s; animation-duration:18s; }
.ambient-blooms span:nth-child(5) { --flower:#c0b1ff; top:9%; right:37%; font-size:clamp(16px,2vw,25px); animation-delay:-13s; animation-duration:22s; }
.ambient-blooms span:nth-child(6) { --flower:#8de1da; bottom:8%; right:8%; font-size:clamp(18px,2.4vw,30px); animation-delay:-9s; animation-duration:20s; }

.site-header { position: fixed; z-index: 20; inset: 0 0 auto; height: 73px; display: flex; align-items: center; gap: clamp(10px, 1.6vw, 23px); padding: 0 clamp(22px, 4.2vw, 62px); border-bottom: 1px solid rgba(255,255,255,.09); background: linear-gradient(100deg,rgba(8,11,20,.97),rgba(12,16,31,.94) 52%,rgba(8,11,20,.97)); backdrop-filter: blur(20px); box-shadow:0 8px 28px rgba(0,0,0,.13); }
.brand { flex: 0 0 auto; color: #fff8fc; font-family: var(--serif); font-size: 24px; font-weight: 600; line-height: 1; letter-spacing: .01em; white-space: nowrap; text-shadow: 0 0 7px rgba(255,238,248,.8), 0 0 19px rgba(242,164,206,.55); }
.brand span { color: var(--pink); font-family: var(--sans); font-size: 14px; }
.main-nav { display: flex; flex: 1 1 auto; align-items: center; justify-content: flex-start; gap: clamp(2px,.35vw,6px); min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width:none; scroll-behavior:smooth; scroll-snap-type:x proximity; scroll-padding-inline:12px; mask-image:linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent); }
.main-nav::-webkit-scrollbar { display:none; }
.nav-link { position:relative; display:flex; min-height:49px; flex:0 0 auto; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:4px clamp(7px,.72vw,11px); border:1px solid transparent; border-radius:12px; color:#8993a7; font-family:"Manrope",var(--sans); font-size:8px; font-weight:700; line-height:1.15; letter-spacing:.055em; text-transform:uppercase; white-space:nowrap; scroll-snap-align:center; transition:color .22s ease,transform .22s ease,background .22s ease,border-color .22s ease,box-shadow .22s ease; }
.nav-link::after { position:absolute; right:11px; bottom:3px; left:11px; height:1px; border-radius:2px; background:linear-gradient(90deg,#9de5e2,#f2a4ce,#ffd66e); content:""; opacity:0; transform:scaleX(.35); transition:opacity .22s,transform .22s; }
.nav-link:hover { color:#f1d2e5; background:rgba(255,255,255,.035); transform:translateY(-1px); }
.nav-link:focus-visible,.nav-scroll-control:focus-visible,.menu-toggle:focus-visible { outline:2px solid #ffd66e; outline-offset:3px; }
.nav-link span { color:#78849a; font-family:"Manrope",var(--sans); font-size:8px; font-weight:800; letter-spacing:.12em; transition:color .22s; }
.nav-link:hover span,.nav-link.is-active span { color:#ffd66e; }
.nav-link.is-active { border-color:rgba(242,164,206,.2); background:linear-gradient(135deg,rgba(242,164,206,.105),rgba(169,220,255,.055)); color:#ffe4f2; box-shadow:inset 0 0 18px rgba(242,164,206,.045),0 5px 18px rgba(0,0,0,.13); }
.nav-link.is-active::after { opacity:1; transform:scaleX(1); }
.nav-link.nav-make { padding-right:11px; padding-left:11px; color:#a9e5b7; }
.nav-scroll-control { display:grid; width:25px; height:25px; flex:0 0 25px; place-items:center; padding:0 0 2px; border:1px solid rgba(242,164,206,.25); border-radius:50%; background:rgba(11,15,29,.9); color:#eec7dc; font:500 18px/1 "Manrope",var(--sans); cursor:pointer; transition:color .2s,border-color .2s,background .2s,transform .2s; }
.nav-scroll-control:hover { transform:scale(1.08); border-color:#f2a4ce; background:rgba(242,164,206,.12); color:#fff; }
.nav-scroll-control:disabled { opacity:.28; cursor:default; }
.nav-scroll-control:disabled:hover { transform:none; border-color:rgba(242,164,206,.25); background:rgba(11,15,29,.9); color:#eec7dc; }
.pill { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 18px; padding: 0 20px; border: 1px solid var(--pink-line); border-radius: 999px; background: transparent; color: #eabbd5; font-size: 9px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; cursor: pointer; transition: color .2s ease, background .2s ease, transform .2s ease; }
.pill:hover { color: var(--night); background: var(--pink); transform: translateY(-2px); }
.pill:active, .daydream-next:active, .text-button:active, .quiz-navigation button:active, .play-button:active { transform: scale(.96); }
.pill span { font-size: 17px; line-height: 1; }
.header-cta { min-width: 130px; min-height: 39px; padding: 0 15px; white-space: nowrap; }
.menu-toggle { display:none; }

main, .section { position: relative; z-index: 1; }
.section { max-width: 1440px; margin: 0 auto; padding: 150px clamp(26px, 8vw, 116px); scroll-margin-top: 64px; }
.section .section-kicker, .section > .eyebrow { color: var(--section-accent, var(--pink-hot)); }
.section .section-kicker i { background: var(--section-accent, var(--pink-hot)); }
.orbit-section { --section-accent:#a8d7ff; }
.orbit-section .timeline-number { background:var(--section-accent); box-shadow:0 0 12px rgba(115,190,255,.45); }
.gallery-section { --section-accent:#ffd66e; }
.if-section { --section-accent:#a9e5b7; }
.if-section .daydream-next { border-color:rgba(146,221,165,.55); }
.if-section .daydream-card .daydream-label { color:#b8e9c2; }
.songs-section { --section-accent:#9de5e2; }
.songs-section .play-button { border-color:rgba(113,216,211,.55); color:#a3eeea; }
.songs-section .waveform { color:#78d7d1; }
.quiz-section { --section-accent:#c2b1ff; }
.quiz-section .quiz-progress i b { background:#b9a9ff; }
.quiz-section .sparkle { color:#f5d879; }
.constellation-section { --section-accent:#ffd66e; }
.months-section { --section-accent:#a8d7ff; }
.perfect-day-section { --section-accent:#a9e5b7; }
.postcard-section { --section-accent:#9ed9f0; }
.reasons-section { --section-accent:#f5b5d8; }
.reasons-section .reason-card.is-open { box-shadow:inset 0 0 0 1px rgba(245,181,216,.44),0 8px 26px rgba(193,90,146,.1); }
.letter-section { --section-accent:#acd9f2; }
.letter-section .paper-star { color:#6f9dbd; }
.wish-section { --section-accent:#ffdc78; }
.section .pink { color:var(--section-accent,var(--pink)); }
.hero-frame .frame-caption em { color:#a9dcff; }
.orbit-section .timeline-copy { color:#aabbd0; }
.orbit-section .timeline-item:nth-child(3n + 1) .eyebrow.small { color:#a8d7ff; }
.orbit-section .timeline-item:nth-child(3n + 2) .eyebrow.small { color:#ffd66e; }
.orbit-section .timeline-item:nth-child(3n) .eyebrow.small { color:#a9e5b7; }
.gallery-section .photo-card { --gallery-accent:#ffd66e; }
.gallery-section .photo-card:nth-child(4n + 2) { --gallery-accent:#9ed9f0; }
.gallery-section .photo-card:nth-child(4n + 3) { --gallery-accent:#a9e5b7; }
.gallery-section .photo-card:nth-child(4n) { --gallery-accent:#f2a4ce; }
.gallery-section .media-empty span { color:var(--gallery-accent); }
.gallery-section .media-empty span { border-color:var(--gallery-accent); }
.if-section .daydream-card { border-color:rgba(169,229,183,.46); }
.if-section .daydream-answer { color:#bdeac7; }
.songs-section .song-row { --song-accent:#d7a8ff; --song-cover-tone:14 17 27; }
.songs-section .waveform { color:var(--song-accent); }
.songs-section .song-row .play-button { border-color:var(--song-accent); color:var(--song-accent); }
.songs-section .song-row:hover, .songs-section .song-row.is-playing { border-color:var(--song-accent); }
.quiz-section .quiz-answers button:hover { border-color:var(--section-accent); background:rgba(194,177,255,.09); }
.constellation-section .constellation-card { border-color:rgba(255,214,110,.24); }
.postcard-section .postcard-label { letter-spacing:.22em; }
.reasons-section .reason-card:nth-child(5n + 1) { --reason-accent:#ffd66e; --reason-wash:rgba(255,214,110,.045); }
.reasons-section .reason-card:nth-child(5n + 2) { --reason-accent:#9ed9f0; --reason-wash:rgba(158,217,240,.045); }
.reasons-section .reason-card:nth-child(5n + 3) { --reason-accent:#a9e5b7; --reason-wash:rgba(169,229,183,.045); }
.reasons-section .reason-card:nth-child(5n + 4) { --reason-accent:#c2b1ff; --reason-wash:rgba(194,177,255,.045); }
.reasons-section .reason-card:nth-child(5n) { --reason-accent:#f5b5d8; --reason-wash:rgba(245,181,216,.045); }
.reasons-section .reason-card { background:var(--reason-wash,rgba(255,255,255,.012)); }
.reasons-section .reason-card:hover, .reasons-section .reason-card.is-open { background:var(--reason-wash); box-shadow:inset 0 0 0 1px var(--reason-accent),0 8px 26px rgba(0,0,0,.12); }
.reasons-section .reason-card > span:first-child, .reasons-section .reason-lock, .reasons-section .reason-card p { color:var(--reason-accent,#e8d0df); }
.letter-section .letter-paper .letter-signoff em { color:#608daa; }
.wish-section h2 .pink { color:#ffdc78; }
.hero { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(340px, .97fr); align-items: start; gap: clamp(38px, 7vw, 100px); padding-top: 112px; padding-bottom: 42px; overflow: hidden; }
.hero-copy { position: relative; z-index: 2; max-width: 620px; padding-top: 16px; }
.eyebrow, .section-kicker { margin: 0 0 34px; color: var(--pink-hot); font-size: 9px; font-weight: 600; line-height: 1.8; letter-spacing: .28em; text-transform: uppercase; }
.hero .eyebrow { display:inline-flex; width:max-content; max-width:100%; align-items:center; gap:11px; margin-bottom:38px; padding:9px 15px; border:1px solid rgba(242,164,206,.38); border-radius:3px; background:linear-gradient(105deg,rgba(242,164,206,.12),rgba(169,220,255,.07) 62%,rgba(255,220,120,.045)); box-shadow:inset 0 1px rgba(255,255,255,.065),0 5px 20px rgba(0,0,0,.16),0 0 22px rgba(242,164,206,.055); color:#f1bdd9; font-size:9px; font-weight:800; letter-spacing:.22em; white-space:nowrap; }
.hero-eyebrow-star { color:#ffdc78; font-size:12px; text-shadow:0 0 14px rgba(255,220,120,.55); animation:hero-chapter-shine 3.8s ease-in-out infinite; }
.hero .eyebrow i, .section-kicker i { display: inline-block; width: 34px; height: 1px; background: var(--pink-hot); }
.section-kicker { display: flex; align-items: center; gap: 18px; margin: 0 0 45px; }
.section-kicker span { color: #8e9aaf; letter-spacing: .24em; }
.section-kicker i { width: 44px; }
.section-kicker + h2 { margin-top: 0; }
.section-kicker:not(:has(span)) { gap: 12px; }
.section-kicker:not(:has(span))::first-letter { color: var(--muted); }
.section-kicker:has(+ h2) { margin-bottom: 30px; }
.section-kicker:has(+ .letter-layout) { margin-bottom: 60px; }
.section-kicker:has(+ .quiz-panel) { margin-bottom: 64px; }
.section-kicker:has(+ .postcard-layout) { margin-bottom: 0; }
.hero .section-kicker { display:flex; align-items:center; gap:12px; margin-bottom:27px; color:#c2cde0; font-size:10px; font-weight:800; letter-spacing:.22em; text-shadow:0 1px 12px rgba(169,220,255,.12); }
.hero .section-kicker span { color:#ffdc78; font-weight:900; text-shadow:0 0 13px rgba(255,220,120,.4); animation:hero-chapter-shine 4.8s ease-in-out infinite; }
.hero.section .section-kicker i { width:34px; background:linear-gradient(90deg,#ffdc78,#f2a4ce); box-shadow:0 0 10px rgba(242,164,206,.3); }
.hero .section-kicker strong { color:#c6d1e4; font-weight:800; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; }
h1 { margin-bottom: 25px; font-size: clamp(68px, 8vw, 118px); line-height: .83; letter-spacing: -.045em; }
.name-slot { display: inline-block; width: 2.65em; height: .88em; vertical-align: baseline; }
h2 { margin-bottom: 0; font-size: clamp(56px, 6.1vw, 86px); line-height: .9; letter-spacing: -.04em; }
h3 { font-size: 27px; line-height: 1.05; }
.pink { color: var(--pink); font-weight: 500; font-style: italic; }
.soft { color: #acb6ca; }
.hero-subtitle { min-height: 0; max-width: 440px; margin: 31px 0 39px; color: #b5bdcd; font-family: var(--sans); font-size: 14px; font-weight: 400; font-style: normal; line-height: 1.9; }
.hero-copy > .pill { width: 180px; min-width: 180px; justify-content: space-between; flex-wrap: nowrap; white-space: nowrap; }
.hero-copy > .pill .button-arrow { display: block; flex: 0 0 14px; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hero-frame { position: relative; z-index: 2; isolation: isolate; width: 100%; max-width: 510px; aspect-ratio: 498 / 574; justify-self: end; overflow: visible; border: 1px solid rgba(176,187,216,.24); background: #07101e url("assets/hero-galaxy-portrait.jpg") 56% center / cover no-repeat; box-shadow: 0 18px 55px rgba(0,0,0,.18); animation: frame-float 6.2s cubic-bezier(.42,0,.58,1) infinite; will-change: transform; }
.hero-frame::before { content: ""; position: absolute; z-index: 0; inset: 0; background: linear-gradient(135deg, rgba(5,10,25,.48), rgba(8,20,43,.32) 56%, rgba(5,9,22,.48)), linear-gradient(to bottom, rgba(5,8,20,.12), rgba(5,9,20,.35)); pointer-events: none; }
.hero-frame::after { content: ""; position: absolute; z-index: 1; inset: 16px; border: 1px solid rgba(218,107,177,.48); pointer-events: none; }
.frame-caption { position: absolute; z-index: 2; bottom: 34px; left: 33px; color: #f1e7ef; font-family: var(--serif); font-size: 18px; font-weight: 600; line-height: 1.08; text-shadow: 0 2px 12px rgba(3,6,15,.9); }
.frame-caption em { color: #e8b7d3; font-weight: 500; font-style: italic; }
.vertical-note { position: absolute; z-index: 2; right: -29px; top: 16%; display: flex; flex-direction: column; writing-mode: vertical-rl; color: #8290a5; font-size: 8px; letter-spacing: .34em; text-transform: uppercase; }
.vertical-note small { margin: 8px 0; font-size: 6px; letter-spacing: .2em; }
.vertical-note b { padding: 10px 0; color: var(--pink-hot); }
.orbit-ring { position: absolute; z-index: -1; width: 560px; height: 560px; border: 1px solid rgba(231, 122, 187, .14); border-radius: 50%; pointer-events: none; }
.ring-one { left: -300px; top: 12%; }.ring-two { left: 49%; top: -43%; width: 760px; height: 760px; }
.scroll-hint { position: absolute; bottom: 28px; left: 50%; color: #d990bd; font-size: 23px; animation: bob 1.8s ease-in-out infinite; }

.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 50px; margin-bottom: 70px; }
.section-note { width: min(290px, 29%); margin-bottom: 7px; color: #919db1; font-size: 13px; line-height: 1.8; }
.section-note:empty { min-height: 0; }
.section-head h2 { max-width: 760px; }
.orbit-section { min-height: 100vh; padding-top: 110px; padding-bottom: 150px; }
.timeline { position: relative; width: min(780px, 80%); margin: 0 auto; padding: 4px 0 4px 60px; }
.timeline::before { content: ""; position: absolute; top: 0; bottom: 0; left: 18px; width: 1px; background: linear-gradient(rgba(240,100,182,.56), rgba(216,214,229,.18)); }
.timeline-item { position: relative; display: flex; min-height: 128px; gap: 28px; padding: 28px 0; border-bottom: 1px solid rgba(255,255,255,.035); }
.timeline-item:hover .timeline-number { box-shadow: 0 0 0 5px rgba(240,100,182,.09), 0 0 18px rgba(240,100,182,.48); }
.timeline-number { position: absolute; left: -46px; top: 31px; display: block; width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--pink-hot); box-shadow: 0 0 10px rgba(240,100,182,.35); }
.eyebrow.small { margin: 0 0 11px; font-size: 8px; }
.timeline-item h3 { min-height: 30px; margin: 0 0 12px; color: #e7e3e8; font-size: 27px; font-weight: 600; }
.timeline-copy { max-width: 680px; margin: 0; color: #8995aa; font-size: 12px; line-height: 1.75; }
.empty-line { width: 180px; height: 8px; margin: 0; opacity: .35; background: linear-gradient(90deg, rgba(144,157,181,.22), transparent); }

.gallery-section { padding-top: 145px; padding-bottom: 170px; }
.photo-grid { --gallery-columns:4; --gallery-gap:8px; position:relative; display:block; width:100%; }
.photo-card { position:absolute; top:0; left:0; display:block; min-width:0; margin:0; padding:0; overflow:hidden; background:#080b14; cursor:zoom-in; transition:box-shadow .35s ease; }
.photo-card::after { content:""; position:absolute; z-index:1; inset:0; border:1px solid color-mix(in srgb,var(--gallery-accent,#ffd66e) 72%,transparent); opacity:0; transform:scale(.985); transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1); pointer-events:none; }
.photo-card img { display: block; width: 100%; height: auto; object-fit: contain; transition: filter .4s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.photo-card:hover, .photo-card:focus-visible { z-index:3; box-shadow:0 12px 32px color-mix(in srgb,var(--gallery-accent,#ffd66e) 16%,transparent),0 8px 20px rgba(0,0,0,.38); }
.photo-card:hover::after, .photo-card:focus-visible::after { opacity:.9; transform:scale(1); }
.photo-card:hover img, .photo-card:focus-visible img { filter: brightness(.82) saturate(1.12); transform: scale(1.035); }
.photo-card:focus-visible { z-index: 2; outline: 2px solid var(--gallery-accent,#ffd66e); outline-offset: -2px; }
.media-empty { position: absolute; inset: 0; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.09); background: linear-gradient(145deg, rgba(26,38,68,.56), rgba(8,12,24,.72)); color: rgba(228, 180, 212, .55); transition: background .4s, border-color .4s; }
.photo-card:hover .media-empty { border-color: rgba(232,91,174,.36); background: linear-gradient(145deg, rgba(40,48,83,.7), rgba(11,16,31,.82)); }
.media-empty::before, .media-empty::after { content: ""; position: absolute; width: 35%; height: 1px; background: rgba(236, 152, 207, .15); transform: rotate(-35deg); }
.media-empty::after { transform: rotate(35deg); }
.media-empty span { position: relative; z-index: 1; padding: 8px 12px; border: 1px solid rgba(236, 152, 207, .25); background: rgba(8,11,20,.65); font-size: 8px; letter-spacing: .24em; }
.photo-card figcaption { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; display: grid; gap: 5px; padding: 34px 13px 12px; background: linear-gradient(transparent,rgba(4,7,15,.82)); text-shadow: 0 1px 12px #000; opacity: 0; transform:translateY(7px); transition: opacity .3s ease,transform .4s cubic-bezier(.2,.7,.2,1); }
.photo-card:hover figcaption, .photo-card:focus-visible figcaption { opacity: 1; transform:translateY(0); }
.photo-card figcaption strong { min-height: 20px; font-family: var(--serif); font-size: 20px; font-weight: 500; }
.photo-lightbox[hidden] { display: none; }
.photo-lightbox { position: fixed; z-index: 1000; inset: 0; display: grid; grid-template-columns: minmax(48px,1fr) minmax(0, min(1100px,82vw)) minmax(48px,1fr); grid-template-rows: 1fr auto; align-items: center; padding: 42px 24px 28px; background: rgba(3,5,12,.94); backdrop-filter: blur(14px); }
.photo-lightbox:not([hidden]) { animation:gallery-overlay-in .3s ease both; }
.lightbox-figure { grid-column: 2; grid-row: 1; display: grid; justify-items: center; gap: 14px; max-width: 100%; max-height: calc(100vh - 100px); margin: 0; animation:gallery-viewer-in .48s cubic-bezier(.2,.7,.2,1) both; }
.lightbox-image { display: block; max-width: 100%; max-height: calc(100vh - 145px); width: auto; height: auto; object-fit: contain; box-shadow: 0 18px 80px rgba(0,0,0,.5); }
.lightbox-caption { color: #f3d4e7; font-family: var(--serif); font-size: 20px; text-align: center; }
.lightbox-close, .lightbox-arrow { display: grid; place-items: center; border: 1px solid rgba(242,164,206,.38); border-radius: 50%; background: rgba(13,17,31,.8); color: #f4c1dd; cursor: pointer; transition: background .2s, transform .2s; }
.lightbox-close:hover, .lightbox-arrow:hover { background: rgba(232,91,174,.2); transform: scale(1.06); }
.lightbox-close { position: absolute; top: 22px; right: 24px; width: 42px; height: 42px; font-size: 28px; }
.lightbox-arrow { grid-row: 1; width: 46px; height: 46px; font-size: 32px; }
.lightbox-previous { grid-column: 1; justify-self: center; }.lightbox-next { grid-column: 3; justify-self: center; }
body.is-lightbox-open { overflow: hidden; }
@keyframes gallery-overlay-in { from { opacity:0; backdrop-filter:blur(0); } to { opacity:1; backdrop-filter:blur(14px); } }
@keyframes gallery-viewer-in { from { opacity:0; transform:translateY(12px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }

.if-section { padding-top: 36px; padding-bottom: 155px; }
.if-section > .section-kicker { margin-bottom: 70px; }
.daydream-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, 1fr); align-items: start; gap: clamp(50px, 7vw, 96px); max-width: 1070px; margin: 0 auto; }
.daydream-intro { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; }
.daydream-intro h2 { max-width: 510px; font-size: clamp(64px, 6.1vw, 86px); }
.daydream-intro .section-note { width: 100%; max-width: 410px; margin: 7px 0 0; }
.daydream-feature { min-width: 0; }
.daydream-carousel { position: relative; padding: 0 48px; touch-action: pan-y; }
.if-section .daydream-arrow { border-color: rgba(169,229,183,.58); color: #c8f0d1; }
.if-section .daydream-arrow:hover { border-color: #a9e5b7; color: #fff; }
.daydream-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.daydream-next { display: inline-flex; min-height: 42px; align-items: center; gap: 12px; padding: 0 17px; border: 1px solid var(--pink-line); border-radius: 999px; background: rgba(12,16,31,.68); color: #eabbd5; font: inherit; font-size: 10px; font-weight: 600; cursor: pointer; transition: color .2s ease, background .2s ease, transform .2s ease; }
.daydream-next span { color: var(--pink); font-size: 16px; line-height: 1; }
.daydream-next:hover { transform: translateY(-1px); background: rgba(232,91,174,.12); color: #fff1f9; }
.daydream-next:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
.daydream-count { color: #778399; font-size: 9px; }
.daydream-count b { color: #e7c3d8; font-weight: 600; }
.daydream-card { position: relative; isolation: isolate; display: flex; min-height: 330px; flex-direction: column; justify-content: center; overflow: hidden; padding: 39px; border: 1px solid rgba(222,183,221,.3); background: radial-gradient(ellipse at 86% 22%, rgba(119,110,183,.2), transparent 38%), radial-gradient(ellipse at 12% 100%, rgba(72,100,164,.19), transparent 46%), linear-gradient(135deg, #191d39, #0b1021 76%); box-shadow: 0 22px 65px rgba(0,0,0,.24), inset 0 0 45px rgba(175,151,227,.055); transition: border-color .3s, box-shadow .3s; }
.daydream-card { touch-action: pan-y; }
.daydream-card:hover { border-color: rgba(242,164,206,.55); box-shadow: 0 25px 72px rgba(0,0,0,.29), inset 0 0 52px rgba(175,151,227,.09); }
.daydream-card::before { content: ""; position: absolute; z-index: 0; top: -76px; right: -48px; width: 230px; height: 230px; border: 1px solid rgba(241,190,226,.2); border-radius: 50%; background: radial-gradient(circle at 36% 37%, rgba(255,220,238,.16), rgba(144,132,206,.09) 31%, rgba(64,77,126,.035) 58%, transparent 72%); box-shadow: 0 0 55px rgba(184,143,222,.13), inset 0 0 36px rgba(190,167,228,.1); animation: daydream-glow-drift 7s ease-in-out infinite; pointer-events: none; }
.daydream-card::after { content: ""; position: absolute; z-index: 1; inset: 13px; border: 1px solid rgba(242,164,206,.12); pointer-events: none; }
.daydream-prompt, .daydream-answer, .daydream-footnote { position: relative; z-index: 2; }
.reason-card span { color: #e586bc; font-size: 8px; letter-spacing: .22em; }
.daydream-card .daydream-label { position: relative; z-index: 2; color: #e586bc; font-size: 8px; letter-spacing: .22em; text-transform: uppercase; }
.daydream-label b { color: #ffd64d; font-size: 16px; vertical-align: -2px; }
.daydream-prompt { margin: 29px 0 11px; color: #f7eff5; font-family: var(--serif); font-size: clamp(31px, 3.3vw, 39px); font-weight: 600; line-height: 1.04; }
.daydream-answer { max-width: 440px; margin: 0; color: #edc4dd; font-family: var(--serif); font-size: clamp(25px, 2.8vw, 32px); font-weight: 500; line-height: 1.18; }
.daydream-footnote { margin-top: auto; padding-top: 29px; color: #78839e; font-size: 8px; letter-spacing: .2em; }
.daydream-card i { position: absolute; z-index: 2; right: 24px; bottom: 17px; color: rgba(245,190,224,.88); font-size: 18px; font-style: normal; animation: daydream-star-pulse 3.2s ease-in-out infinite; }

.songs-section { padding-top: 135px; padding-bottom: 155px; }
.song-carousel { width:min(100%,1120px); margin:42px auto 0; }
.song-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px; width:100%; overflow:visible; border:0; background:none; box-shadow:none; }
.song-row,.song-row:not(.is-active) { --song-accent:#d7a8ff; --song-cover-tone:14 17 27; position:relative; display:flex; min-width:0; min-height:140px; align-items:stretch; gap:0; overflow:hidden; padding:9px; border:1px solid color-mix(in srgb,var(--song-accent) 58%,#313341); border-radius:4px; background:linear-gradient(128deg,color-mix(in srgb,rgb(var(--song-cover-tone)) 96%,#080b14),color-mix(in srgb,rgb(var(--song-cover-tone)) 84%,#080b14) 62%,color-mix(in srgb,rgb(var(--song-cover-tone)) 72%,#080b14)); box-shadow:0 12px 30px rgba(0,0,0,.3),inset 0 0 38px color-mix(in srgb,var(--song-accent) 15%,#0d1019); transition:opacity .65s ease var(--reveal-delay,0s),transform .35s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .35s,background .45s; }
.song-row.reveal:hover { z-index:2; transform:translateY(-3px); border-color:color-mix(in srgb,var(--song-accent) 70%,transparent); box-shadow:0 18px 34px rgba(0,0,0,.32),0 0 22px color-mix(in srgb,var(--song-accent) 11%,transparent); }
.songs-section .song-row:focus-within { z-index:2; border-color:color-mix(in srgb,var(--song-accent) 76%,transparent); box-shadow:0 0 22px color-mix(in srgb,var(--song-accent) 14%,transparent); }
.song-row.is-playing { border-color:color-mix(in srgb,var(--song-accent) 72%,transparent); box-shadow:0 0 26px color-mix(in srgb,var(--song-accent) 14%,transparent); }
.song-cover { position:relative; isolation:isolate; display:grid; width:clamp(100px,8.4vw,122px); min-height:0; aspect-ratio:1; flex:0 0 auto; place-items:center; overflow:hidden; border:1px solid color-mix(in srgb,var(--song-accent) 36%,transparent); background:radial-gradient(circle at 65% 30%,color-mix(in srgb,var(--song-accent) 48%,transparent),transparent 23%),radial-gradient(ellipse at 20% 80%,rgba(121,103,174,.42),transparent 50%),linear-gradient(145deg,#1c2541,#0b1020 70%); box-shadow:inset 0 0 65px rgba(0,0,0,.26); }
.album-cover-image { position:absolute; z-index:0; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .4s; }
.song-row:hover .album-cover-image { transform:scale(1.045); filter:saturate(1.12) brightness(1.05); }
.song-cover.has-custom-cover .cover-orbit,.song-cover.has-custom-cover .cover-glyph { display:none; }
.song-cover::before,.song-cover::after { content:""; position:absolute; z-index:-1; width:72%; aspect-ratio:1; border:1px solid color-mix(in srgb,var(--song-accent) 34%,transparent); border-radius:50%; animation:cover-orbit 18s linear infinite; }
.song-cover::after { width:48%; animation-duration:13s; animation-direction:reverse; }
.cover-orbit { position:absolute; width:30%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 36% 32%,#fff7e0 0 3%,var(--song-accent) 4% 12%,rgba(15,20,38,.85) 14% 28%,rgba(242,164,206,.2) 29% 31%,transparent 32%); filter:drop-shadow(0 0 22px color-mix(in srgb,var(--song-accent) 60%,transparent)); animation:cover-breathe 4s ease-in-out infinite; }
.cover-glyph { color:var(--song-accent); font-size:clamp(38px,5vw,66px); text-shadow:0 0 35px color-mix(in srgb,var(--song-accent) 72%,transparent); animation:daydream-star-pulse 3s ease-in-out infinite; }
.song-card-content { display:flex; min-width:0; min-height:0; flex:1; flex-direction:column; justify-content:space-between; padding:2px 4px 2px 15px; }
.song-card-top { display:flex; min-width:0; align-items:center; justify-content:space-between; gap:10px; }
.song-details { min-width:0; }
.song-details h3 { display:-webkit-box; min-height:0; margin:5px 0 0; overflow:hidden; color:#f7f4f5; font-family:var(--sans); font-size:clamp(14px,1.55vw,20px); font-weight:700; line-height:1.18; letter-spacing:-.035em; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.song-artist { margin:4px 0 0; overflow:hidden; color:color-mix(in srgb,var(--song-accent) 28%,#f1edf5); font:600 11px/1.3 var(--sans); text-overflow:ellipsis; white-space:nowrap; text-shadow:0 1px 4px rgba(0,0,0,.35); }
.song-card-actions { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:7px; }
.song-card-side { overflow:hidden; color:#778197; font:700 6px/1 "Manrope",var(--sans); letter-spacing:.14em; text-overflow:ellipsis; white-space:nowrap; }
.song-progress-row { display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:7px; color:#e3e2e9; font:600 8px/1 var(--sans); font-variant-numeric:tabular-nums; }
.song-progress { --song-progress:0%; width:100%; height:4px; flex:1; margin:0; appearance:none; border:0; border-radius:99px; background:linear-gradient(to right,var(--song-accent) var(--song-progress),rgba(255,255,255,.18) var(--song-progress)); cursor:pointer; }
.song-progress::-webkit-slider-thumb { width:9px; height:9px; appearance:none; border:0; border-radius:50%; background:#fff; box-shadow:0 0 0 3px color-mix(in srgb,var(--song-accent) 27%,transparent); }
.song-progress::-moz-range-thumb { width:9px; height:9px; border:0; border-radius:50%; background:#fff; box-shadow:0 0 0 3px color-mix(in srgb,var(--song-accent) 27%,transparent); }
.song-progress:disabled { opacity:1; cursor:not-allowed; background:linear-gradient(to right,color-mix(in srgb,var(--song-accent) 72%,#fff),rgba(255,255,255,.32)); }
.play-button { display:grid; width:42px; height:42px; flex:0 0 auto; place-items:center; padding:0 0 0 3px; border:0; border-radius:50%; background:var(--song-accent); color:#11131b; font-size:14px; font-weight:800; cursor:pointer; box-shadow:0 5px 18px color-mix(in srgb,var(--song-accent) 30%,transparent); transition:transform .2s,filter .2s,box-shadow .2s; }
.songs-section .song-row .play-button { border:0; color:#11131b; background:var(--song-accent); }
.play-button:not(:disabled):hover { transform:scale(1.08); filter:brightness(1.12); box-shadow:0 6px 22px color-mix(in srgb,var(--song-accent) 45%,transparent); }
.songs-section .play-button:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.song-row.is-playing .play-button { background:var(--song-accent); color:#11131b; box-shadow:0 0 19px color-mix(in srgb,var(--song-accent) 46%,transparent); animation:play-pulse 1.8s ease-in-out infinite; }
.play-button:disabled,.songs-section .song-row .play-button:disabled { background:var(--song-accent); color:#10131b; opacity:1; box-shadow:0 5px 16px color-mix(in srgb,var(--song-accent) 32%,transparent); cursor:not-allowed; }
@keyframes cover-orbit { to { rotate:360deg; } }
@keyframes cover-breathe { 0%,100% { transform:scale(.92); opacity:.72; } 50% { transform:scale(1.1); opacity:1; } }
@keyframes wave-dance { from { opacity:.55; letter-spacing:1px; } to { opacity:1; letter-spacing:2px; } }
@keyframes play-pulse { 0%,100% { box-shadow:0 0 12px rgba(30,215,96,.22); } 50% { box-shadow:0 0 22px rgba(30,215,96,.5); } }
.song-artwork-heading { width:min(100%,900px); margin:78px auto 0; text-align:left; }
.song-more { display:flex; width:min(100%,1120px); align-items:center; justify-content:center; gap:15px; margin:39px auto 0; color:#f2a4ce; font:800 clamp(24px,4vw,48px)/1 "Manrope",var(--sans); letter-spacing:.075em; text-align:center; text-shadow:0 0 22px rgba(242,164,206,.2); }
.song-more span { background:linear-gradient(100deg,#a9dcff 0%,#f2a4ce 36%,#ffd66e 68%,#a9e5b7 100%); background-clip:text; -webkit-background-clip:text; color:transparent; animation:more-glow 4.5s ease-in-out infinite; }
.song-more i { color:#ffd66e; font-size:.52em; font-style:normal; animation:daydream-star-pulse 2.8s ease-in-out infinite; }
@keyframes more-glow { 0%,100% { filter:drop-shadow(0 0 5px rgba(242,164,206,.16)); } 50% { filter:drop-shadow(0 0 17px rgba(169,220,255,.37)); } }
.song-artwork-heading .eyebrow { margin:0 0 9px; color:#f2a4ce; font-size:8px; letter-spacing:.24em; }
.song-artwork-heading h3 { margin:0; color:#f4f0f7; font-family:var(--serif); font-size:clamp(31px,3.8vw,47px); font-weight:500; }
.song-memory-pair { display:grid; width:min(100%,900px); grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; margin:32px auto 0; }
.song-memory-carousel { --memory-accent:#c2b1ff; position:relative; width:min(100%,420px); min-width:0; min-height:0; aspect-ratio:1/1; justify-self:center; overflow:hidden; border:1px solid color-mix(in srgb,var(--memory-accent) 42%,rgba(255,255,255,.13)); background:radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--memory-accent) 13%,transparent),transparent 72%),rgba(8,12,24,.44); box-shadow:0 16px 42px rgba(0,0,0,.2),0 0 24px color-mix(in srgb,var(--memory-accent) 11%,transparent); outline:none; transition:border-color .4s,background .4s,box-shadow .4s; }
.song-memory-carousel:focus-visible { outline:2px solid var(--memory-accent); outline-offset:5px; }
.song-memory-image { position:absolute; inset:10px; display:block; width:calc(100% - 20px); height:calc(100% - 20px); object-fit:contain; touch-action:pan-y; user-select:none; }
.song-memory-image[hidden] { display:none; }
.song-memory-controls { position:absolute; z-index:2; inset:auto 10px 10px; display:flex; align-items:center; justify-content:space-between; pointer-events:none; }
.song-memory-arrow { display:grid; width:38px; height:38px; place-items:center; border:1px solid rgba(255,255,255,.52); border-radius:50%; background:rgba(5,8,16,.7); color:#fff; font:400 22px/1 var(--sans); cursor:pointer; pointer-events:auto; backdrop-filter:blur(8px); transition:transform .22s,background .22s,border-color .22s; }
.song-memory-arrow:hover { transform:translateY(-2px) scale(1.06); border-color:#f2a4ce; background:rgba(40,24,42,.86); }
.song-memory-arrow:focus-visible { outline:2px solid #ffd66e; outline-offset:3px; }
@media (max-width:900px) { .song-artwork-heading { margin-top:60px; } .song-memory-pair { gap:20px; } .song-memory-carousel { width:min(100%,380px); } }
@media (max-width:640px) { .song-more { gap:9px; margin-top:30px; font-size:clamp(21px,7vw,32px); } .song-artwork-heading { margin-top:47px; } .song-memory-pair { grid-template-columns:1fr; gap:17px; margin-top:22px; } .song-memory-carousel { width:min(100%,390px); } }

.quiz-section { padding-top: 120px; padding-bottom: 155px; }
.quiz-panel { display: grid; grid-template-columns: .85fr 1.15fr; gap: 65px; min-height: 500px; padding: 64px clamp(36px, 5vw, 72px); border: 1px solid rgba(199,195,224,.17); background: linear-gradient(125deg, rgba(30,34,68,.84), rgba(19,19,42,.83)); }
.quiz-intro { display: flex; flex-direction: column; align-items: flex-start; }
.quiz-intro .eyebrow { margin-bottom: 29px; }
.sparkle { margin-bottom: 14px; color: #e5d9f2; font-size: 23px; }
.quiz-intro h2 { margin: 0 0 20px; font-size: clamp(48px, 5vw, 68px); font-weight: 600; }
.quiz-intro .section-note { width: auto; max-width: 240px; min-height: 40px; margin: 0; }
.quiz-dots { display: flex; gap: 8px; margin-top: auto; padding-top: 30px; }
.quiz-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 12px var(--pink); }
.quiz-content { padding-top: 9px; }
.quiz-rounds { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin:0 0 28px; }
.quiz-round { position:relative; display:flex; min-width:0; min-height:60px; flex-direction:column; align-items:flex-start; justify-content:center; gap:3px; padding:8px 9px; border:1px solid rgba(199,195,224,.15); border-radius:8px; background:rgba(7,10,21,.3); color:#aab4c8; text-align:left; cursor:pointer; transition:transform .22s,border-color .22s,background .22s,color .22s,box-shadow .22s; }
.quiz-round:hover { transform:translateY(-1px); border-color:rgba(194,177,255,.42); background:rgba(194,177,255,.055); }
.quiz-round > span { color:#9daac0; font:800 7px/1 "Manrope",var(--sans); letter-spacing:.15em; }
.quiz-round > b { overflow:hidden; max-width:100%; color:#e8e9f1; font:800 8px/1.2 "Manrope",var(--sans); letter-spacing:.005em; text-overflow:ellipsis; white-space:nowrap; }
.quiz-round > small { color:#77839a; font:600 6px/1.2 "Manrope",var(--sans); letter-spacing:.08em; text-transform:uppercase; }
.quiz-round:nth-child(1) { --round-accent:#a9dcff; }
.quiz-round:nth-child(2) { --round-accent:#f2a4ce; }
.quiz-round:nth-child(3) { --round-accent:#a9e5b7; }
.quiz-round:nth-child(4) { --round-accent:#ffd66e; }
.quiz-round.is-active { border-color:color-mix(in srgb,var(--round-accent) 62%,transparent); background:color-mix(in srgb,var(--round-accent) 11%,rgba(10,13,25,.75)); box-shadow:inset 0 0 18px color-mix(in srgb,var(--round-accent) 8%,transparent),0 4px 16px rgba(0,0,0,.12); }
.quiz-round.is-active > span,.quiz-round.is-active > b { color:var(--round-accent); }
.quiz-round:focus-visible { outline:2px solid var(--round-accent,#c2b1ff); outline-offset:3px; }
.quiz-progress { display: flex; align-items: center; justify-content: space-between; margin-bottom: 27px; color: #8995aa; font-size: 8px; font-weight: 600; letter-spacing: .12em; }
.quiz-progress i { width: 38%; height: 2px; background: rgba(255,255,255,.12); }
.quiz-progress i b { display: block; width: 42%; height: 100%; background: linear-gradient(90deg,#a8d7ff,var(--pink-hot),#ffd66e); box-shadow:0 0 12px rgba(240,100,182,.4); transition:width .55s cubic-bezier(.2,.7,.2,1); }
.quiz-content .eyebrow { margin-bottom: 12px; }
.quiz-question { min-height: 70px; margin: 0 0 23px; color:#fbf8fb; font-family:var(--sans); font-size:clamp(26px,2.5vw,34px); font-weight:800; letter-spacing:-.035em; line-height:1.17; }
.quiz-answers { display: grid; gap: 10px; counter-reset:quiz-option; }
.quiz-answers button[hidden] { display:none; }
.quiz-answers.is-duo { grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.quiz-answers.is-duo button { min-height:72px; justify-content:center; padding:12px; text-align:center; }
.quiz-answers.is-duo button::after { margin-left:0; }
.quiz-answers.is-duo:not(.is-this-or-that) button:nth-child(1)::before { content:"T"; }
.quiz-answers.is-duo:not(.is-this-or-that) button:nth-child(2)::before { content:"F"; }
.quiz-answers.is-this-or-that button::before { display:none; }
.quiz-answers.is-this-or-that button { min-height:82px; border-color:rgba(242,164,206,.24); background:linear-gradient(145deg,rgba(242,164,206,.07),rgba(169,220,255,.035)); color:#f4dce9; font-size:14px; }
.quiz-answers.is-this-or-that button:hover { border-color:rgba(242,164,206,.7); background:linear-gradient(145deg,rgba(242,164,206,.15),rgba(169,220,255,.075)); }
.quiz-answers button { position:relative; display:flex; min-height:54px; align-items:center; justify-content:space-between; gap:13px; padding:8px 15px; border:1px solid rgba(206,213,238,.19); border-radius:9px; background:linear-gradient(110deg,rgba(255,255,255,.035),rgba(255,255,255,.012)); color:#e8eaf1; font-family:var(--sans); font-size:13px; font-weight:750; letter-spacing:-.01em; line-height:1.4; text-align:left; cursor:pointer; transition:border-color .24s ease,background .24s ease,color .24s ease,transform .24s ease,box-shadow .24s ease; }
.quiz-answers button::before { content:counter(quiz-option,upper-alpha); counter-increment:quiz-option; display:grid; width:29px; height:29px; flex:0 0 auto; place-items:center; border:1px solid rgba(168,215,255,.26); border-radius:7px; background:rgba(168,215,255,.07); color:#a8d7ff; font-size:9px; font-weight:800; letter-spacing:.08em; transition:background .24s,border-color .24s,color .24s; }
.quiz-answers button::after { content: "›"; margin-left:auto; color:#7d8aa0; font-size:21px; transition:color .2s,transform .2s; }
.quiz-answers button:hover { transform:translateX(2px); border-color:rgba(168,215,255,.6); background:linear-gradient(110deg,rgba(168,215,255,.1),rgba(225,120,187,.045)); box-shadow:0 7px 20px rgba(0,0,0,.16); }
.quiz-answers button:hover::after { color:#d9edff; transform:translateX(3px); }
.quiz-answers button:focus-visible { outline:2px solid var(--section-accent); outline-offset:3px; }
.quiz-answers button.is-correct { border-color: rgba(71,207,128,.72); background: rgba(37,144,82,.18); color: #b4f0c6; }
.quiz-answers button.is-correct.is-selected { animation: answer-confirm .42s ease both; }
.quiz-answers button.is-wrong.is-selected { animation: answer-reject .32s ease both; }
.quiz-answers button.is-correct::after { content: "✓"; color: #7be29f; }
.quiz-answers button.is-wrong { border-color: rgba(255,91,109,.76); background: rgba(180,49,64,.2); color: #ffd1d6; }
.quiz-answers button.is-wrong::after { content: "×"; color: #ff8291; }
.quiz-answers button.is-chosen { border-color:rgba(194,177,255,.72); background:rgba(115,91,175,.2); color:#e8ddff; box-shadow:0 0 0 2px rgba(194,177,255,.08),0 8px 22px rgba(0,0,0,.18); }
.quiz-answers.is-this-or-that button.is-chosen { border-color:#f2a4ce; background:linear-gradient(135deg,rgba(242,164,206,.2),rgba(169,220,255,.11)); color:#fff0f8; }
.quiz-feedback { min-height: 38px; margin: 13px 0 0; padding:9px 12px; border-left:2px solid rgba(206,213,238,.2); border-radius:0 7px 7px 0; background:rgba(255,255,255,.025); color:#c4ccda; font-family:var(--sans); font-size:11px; font-weight:700; line-height:1.5; transition:color .25s,border-color .25s,background .25s; }
.quiz-feedback.is-correct { border-color:#69d78e; background:rgba(37,144,82,.1); color:#8ee5aa; }
.quiz-feedback.is-wrong { border-color:#ff687b; background:rgba(180,49,64,.11); color:#ff9ba5; }
.quiz-feedback.is-choice { border-color:#c2b1ff; background:rgba(115,91,175,.1); color:#d9ccff; }
.quiz-navigation { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; }
.quiz-navigation button { display: inline-flex; min-height: 42px; align-items: center; gap: 8px; padding: 0 17px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.025); color: #e5c6d8; font-family:var(--sans); font-size: 9px; font-weight: 700; letter-spacing:.04em; cursor: pointer; transition: border-color .2s, background .2s, opacity .2s,transform .2s; }
.quiz-navigation { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.quiz-navigation button { width:100%; min-width:0; justify-content:center; padding:0 12px; white-space:nowrap; }
.quiz-navigation #quiz-next .quiz-next-label { font:inherit; }
.quiz-navigation #quiz-next > span:last-child { flex:0 0 auto; font-size:17px; }
.quiz-navigation button:hover:not(:disabled) { transform:translateY(-1px); border-color: var(--pink-line); background: rgba(225,120,187,.08); }
.quiz-navigation button:focus-visible { outline:2px solid var(--section-accent); outline-offset:3px; }
.quiz-navigation #quiz-next { border-color: var(--pink-line); background: rgba(225,120,187,.09); }
.quiz-navigation button:disabled { opacity: .35; cursor: not-allowed; }
.quiz-navigation button span { font-size: 17px; line-height: 1; }

.constellation-section { padding: 130px clamp(26px, 5vw, 68px) 165px; }
.constellation-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.constellation-card { position: relative; display: flex; min-height: 250px; flex-direction: column; align-items: flex-start; padding: 48px 32px 30px; border: 1px solid rgba(176,187,216,.2); background: linear-gradient(145deg, rgba(25,35,65,.82), rgba(12,18,37,.9)); color: inherit; text-align: left; cursor: pointer; transition: border-color .25s, background .25s, transform .25s, box-shadow .25s; }
.constellation-card:hover { border-color: rgba(232,91,174,.4); background: linear-gradient(145deg, rgba(31,42,76,.9), rgba(14,21,43,.95)); }
.constellation-card.reveal:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,.18); }
.constellation-card h3 { min-height: 0; margin: auto 0 12px; color: #f4f0f4; font-size: 29px; font-weight: 600; line-height: 1.08; }

.months-section { padding-top:118px; padding-bottom:130px; }
.months-grid { display:grid; width:min(100%,1140px); grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; margin:0 auto; }
.month-card { --month-accent:#9ed9f0; position:relative; display:flex; min-width:0; min-height:140px; align-items:stretch; gap:14px; overflow:hidden; padding:12px; border:1px solid color-mix(in srgb,var(--month-accent) 28%,rgba(176,187,216,.18)); background:linear-gradient(132deg,color-mix(in srgb,var(--month-accent) 20%,#111827),color-mix(in srgb,var(--month-accent) 13%,#090e19) 72%); box-shadow:inset 0 1px rgba(255,255,255,.055),0 9px 25px rgba(0,0,0,.16); transition:transform .4s cubic-bezier(.2,.75,.2,1),border-color .35s,box-shadow .4s,filter .35s; }
.month-card:nth-child(4n + 2) { --month-accent:#c2b1ff; }
.month-card:nth-child(4n + 3) { --month-accent:#a9e5b7; }
.month-card:nth-child(4n) { --month-accent:#f2a4ce; }
.month-photo { position:relative; display:grid; width:112px; min-width:112px; aspect-ratio:1 / 1; place-items:center; align-self:center; overflow:hidden; border:1px solid color-mix(in srgb,var(--month-accent) 32%,rgba(255,255,255,.16)); background:linear-gradient(145deg,rgba(3,8,17,.82),color-mix(in srgb,var(--month-accent) 12%,#0b1020)); }
.month-photo::after { position:absolute; inset:0; border:1px solid rgba(255,255,255,.055); content:""; pointer-events:none; }
.month-photo img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .65s cubic-bezier(.2,.75,.2,1),filter .45s; }
.month-copy { display:flex; min-width:0; flex:1; flex-direction:column; justify-content:center; padding:3px 2px; }
.month-name { display:flex; align-items:center; gap:6px; margin:0 0 8px; color:color-mix(in srgb,var(--month-accent) 78%,#f6f3f8); font:900 clamp(15px,1.28vw,18px)/1.12 "Manrope",var(--sans); letter-spacing:.045em; text-transform:uppercase; text-shadow:0 1px 10px color-mix(in srgb,var(--month-accent) 12%,transparent); transition:color .3s ease,transform .35s cubic-bezier(.2,.75,.2,1),text-shadow .35s ease; }
.month-card:hover .month-name { transform:translateX(2px); color:color-mix(in srgb,var(--month-accent) 66%,white); text-shadow:0 0 15px color-mix(in srgb,var(--month-accent) 27%,transparent); }
.month-card:hover .month-name i { animation:month-star-twinkle .75s ease-in-out; }
.month-name i { color:#ffdc78; font-size:11px; font-style:normal; text-shadow:0 0 12px rgba(255,220,120,.52); }
.month-copy p { margin:0; color:#e6e5ee; font:700 clamp(12px,1.05vw,14px)/1.38 "DM Sans",var(--sans); text-wrap:balance; }
.month-card::before { position:absolute; top:-48px; right:-54px; width:130px; height:130px; border:1px solid color-mix(in srgb,var(--month-accent) 17%,transparent); border-radius:50%; background:radial-gradient(circle at 34% 40%,color-mix(in srgb,var(--month-accent) 11%,transparent),transparent 70%); content:""; opacity:.64; transition:transform .65s cubic-bezier(.2,.75,.2,1),opacity .4s; pointer-events:none; }
.month-card:hover { z-index:2; transform:translateY(-5px); border-color:color-mix(in srgb,var(--month-accent) 55%,rgba(255,255,255,.3)); box-shadow:0 16px 34px rgba(0,0,0,.27),0 0 22px color-mix(in srgb,var(--month-accent) 12%,transparent),inset 0 1px rgba(255,255,255,.1); filter:saturate(1.08); }
.month-card:hover::before { transform:translate(-8px,8px) scale(1.12); opacity:1; }
.month-card:hover .month-photo img { transform:scale(1.045); filter:saturate(1.08) brightness(1.04); }
.month-card.reveal.is-visible { animation:month-card-arrive .56s cubic-bezier(.18,.72,.24,1) var(--reveal-delay,0s) backwards; }
.month-card.month-october { --month-accent:#ffd66e; isolation:isolate; border-color:rgba(225,241,255,.68); background:linear-gradient(118deg,rgba(237,247,255,.17),rgba(104,177,225,.33) 44%,rgba(255,207,91,.23) 100%),linear-gradient(135deg,#172b47,#10263c 70%,#282644); box-shadow:0 12px 34px rgba(53,125,181,.16),0 0 24px rgba(255,211,112,.08),inset 0 1px rgba(255,255,255,.24); }
.month-card.month-october::after { position:absolute; z-index:0; inset:0; border:1px solid rgba(255,225,138,.36); background:linear-gradient(108deg,transparent 18%,rgba(255,255,255,.045) 36%,rgba(255,255,255,.2) 48%,rgba(255,214,110,.06) 59%,transparent 75%); background-size:240% 100%; content:""; opacity:.58; pointer-events:none; animation:month-october-shine 6s ease-in-out infinite; }
.month-card.month-october .month-photo { border-color:rgba(255,225,138,.52); background:linear-gradient(145deg,#18314b,#17213a 60%,#473d2b); }
.month-card.month-october .month-photo img { position:relative; z-index:1; }
.month-card.month-october .month-name { color:#fff0ae; text-shadow:0 1px 12px rgba(255,216,112,.28); }
.month-card.month-october .month-copy p { color:#edf6ff; }
.month-card.month-october:hover { border-color:#fff2bf; background:linear-gradient(118deg,rgba(245,249,255,.23),rgba(104,177,225,.42) 44%,rgba(255,207,91,.31)),linear-gradient(135deg,#172b47,#10263c 70%,#282644); box-shadow:0 18px 42px rgba(53,125,181,.23),0 0 31px rgba(255,211,112,.13),inset 0 1px rgba(255,255,255,.32); }
@keyframes month-card-arrive { from { opacity:0; transform:translateY(16px) scale(.985); filter:blur(3px); } to { opacity:1; transform:translateY(0) scale(1); filter:blur(0); } }
@keyframes month-october-shine { 0%,16% { background-position:140% 0; } 60%,100% { background-position:-140% 0; } }
@keyframes month-star-twinkle { 0% { transform:scale(.8) rotate(-18deg); } 55% { transform:scale(1.45) rotate(18deg); } 100% { transform:scale(1) rotate(0); } }

.perfect-day-section { padding-top:130px; padding-bottom:155px; }
.date-builder { width:min(100%,980px); margin:0 auto; padding:clamp(22px,4vw,48px); border:1px solid rgba(169,229,183,.3); background:radial-gradient(ellipse at 80% 0%,rgba(169,229,183,.1),transparent 43%),linear-gradient(140deg,rgba(20,29,49,.88),rgba(9,13,25,.94)); box-shadow:0 24px 70px rgba(0,0,0,.2); }
.date-plan-carousel { max-width:780px; margin:0 auto; }
.date-plan-progress { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:29px; color:#98a596; font-size:8px; font-weight:700; letter-spacing:.19em; }
.date-plan-progress i { width:min(42%,260px); height:2px; overflow:hidden; background:rgba(255,255,255,.12); }
.date-plan-progress i span { display:block; width:14.3%; height:100%; background:linear-gradient(90deg,#a9e5b7,#a8d7ff,#ffd66e); box-shadow:0 0 12px rgba(169,229,183,.45); transition:width .5s cubic-bezier(.2,.7,.2,1); }
.date-choice-stage { position:relative; touch-action:pan-y; }
.date-choice-group { min-width:0; margin:0; padding:0; border:0; }
.date-choice-group[hidden] { display:none; }
.date-choice-group:not([hidden]) { display:block; }
.date-choice-group legend { display:flex; align-items:center; gap:12px; margin-bottom:17px; color:#f4eff3; font-family:var(--serif); font-size:25px; font-weight:600; }
.date-choice-group legend span { color:#a9e5b7; font-family:var(--sans); font-size:9px; letter-spacing:.16em; }
.date-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.date-choices button { min-height:48px; padding:10px 13px; border:1px solid rgba(206,213,238,.17); background:rgba(255,255,255,.02); color:#aeb9c9; font-family:var(--sans); font-size:10px; font-weight:600; text-align:left; cursor:pointer; transition:background .2s,border-color .2s,color .2s,transform .2s; }
.date-choices button:hover { transform:translateY(-2px); border-color:rgba(169,229,183,.48); color:#effcf1; }
.date-choices button[aria-pressed="true"] { border-color:#a9e5b7; background:rgba(169,229,183,.11); color:#c8f2d1; box-shadow:inset 0 0 20px rgba(169,229,183,.045); }
.custom-choice { margin-top:14px; padding-top:12px; border-top:1px dashed rgba(169,229,183,.18); }
.custom-choice > label { color:#8da697; font-size:7px; font-weight:700; letter-spacing:.18em; }
.custom-choice > div { display:flex; gap:8px; margin-top:7px; }
.custom-choice input { min-width:0; min-height:38px; flex:1; padding:0 12px; border:1px solid rgba(206,213,238,.16); background:rgba(4,8,17,.52); color:#f2f5f2; font:500 10px var(--sans); }
.custom-choice input::placeholder { color:#748095; }
.custom-choice input:focus { outline:1px solid rgba(169,229,183,.55); border-color:#a9e5b7; }
.save-custom-choice { min-width:66px; border:1px solid rgba(169,229,183,.36); background:rgba(169,229,183,.06); color:#bee8c8; font-size:8px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:background .2s,border-color .2s; }
.save-custom-choice:hover { border-color:#a9e5b7; background:rgba(169,229,183,.13); }
.custom-choice-status { min-height:0; margin:6px 0 0; color:#bfe9cb; font-size:9px; line-height:1.5; }
.custom-choice-status:empty { display:none; }
.date-plan-navigation { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:24px; padding-top:17px; border-top:1px solid rgba(255,255,255,.08); }
.date-plan-navigation button { display:inline-flex; min-height:40px; align-items:center; gap:9px; padding:0 15px; border:1px solid rgba(169,229,183,.32); border-radius:999px; background:rgba(169,229,183,.045); color:#c9ebd1; font:700 9px var(--sans); letter-spacing:.04em; cursor:pointer; transition:transform .2s,border-color .2s,background .2s,opacity .2s; }
.date-plan-navigation button:hover:not(:disabled) { transform:translateY(-2px); border-color:#a9e5b7; background:rgba(169,229,183,.12); }
.date-plan-navigation button:disabled { opacity:.32; cursor:not-allowed; }
.date-plan-navigation button span { text-transform:uppercase; }
.date-plan-position { color:#a9e5b7; font:700 8px var(--sans); letter-spacing:.16em; }
.date-plan-swipe-hint { margin:11px 0 0; color:#708074; font:600 7px var(--sans); letter-spacing:.15em; text-align:center; }
.date-reveal-button { display:flex; min-height:46px; align-items:center; gap:14px; margin-top:4px; padding:0 19px; border:1px solid rgba(169,229,183,.58); border-radius:999px; background:rgba(169,229,183,.08); color:#c8f2d1; font-size:9px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; transition:background .2s,transform .2s; }
.date-reveal-button[hidden],.date-plan-next[hidden] { display:none; }
.date-reveal-button:hover { transform:translateY(-2px); background:rgba(169,229,183,.16); }
.date-reveal-button span { color:#ffdc78; }
.date-plan-result { margin:22px 0 0; padding:20px; border-left:2px solid #ffd66e; background:rgba(255,214,110,.055); color:#f4e7c1; font-family:var(--serif); font-size:24px; line-height:1.35; }
.date-plan-result { width:100%; border:1px solid rgba(255,214,110,.38); background:radial-gradient(ellipse at 90% 0%,rgba(255,214,110,.12),transparent 46%),linear-gradient(135deg,rgba(27,31,51,.96),rgba(10,14,25,.98)); box-shadow:0 18px 48px rgba(0,0,0,.24); }
.date-plan-result[hidden] { display:none; }
.date-plan-result.is-reminder { border-color:rgba(242,164,206,.44); color:#f2c7df; }
.date-plan-result:not([hidden]) { animation:text-arrive .4s ease both; }
.plan-card-kicker { color:#ffdc78; font:700 8px var(--sans); letter-spacing:.22em; }
.plan-card-kicker i { margin:0 7px; font-style:normal; }
.date-plan-result h3 { margin:12px 0 16px; color:#f7f2e9; font:600 clamp(25px,3vw,34px)/1.1 var(--serif); }
.date-plan-steps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 22px; margin:0; padding:0; list-style:none; }
.date-plan-steps li { display:flex; flex-direction:column; gap:5px; padding:12px 0; border-top:1px solid rgba(255,255,255,.08); }
.date-plan-steps li span { color:#a6aeac; font:700 7px var(--sans); letter-spacing:.16em; text-transform:uppercase; }
.date-plan-steps li strong { color:#e6f2e6; font:600 15px/1.3 var(--sans); }
.plan-card-signoff { margin:17px 0 0; color:#b8ccbd; font:italic 17px var(--serif); }
.date-plan-reminder { margin:0; color:#f3c8dc; font:600 15px/1.5 var(--sans); }
.date-plan-reminder[hidden],.date-plan-steps[hidden],.plan-card-signoff[hidden] { display:none; }

/* Our Day is a choose-your-route flow, with a keepsake ticket reveal. */
.perfect-day-section { --section-accent:#a8dff2; }
.date-builder { border-color:rgba(168,223,242,.3); background:radial-gradient(ellipse at 12% 0%,rgba(168,223,242,.1),transparent 38%),radial-gradient(ellipse at 90% 100%,rgba(255,214,110,.07),transparent 34%),linear-gradient(140deg,rgba(20,29,49,.9),rgba(9,13,25,.96)); }
.date-plan-progress { color:#a9bfd0; }
.date-plan-progress i span { background:linear-gradient(90deg,#a8dff2,#a9e5b7,#ffd66e); box-shadow:0 0 12px rgba(168,223,242,.42); }
.date-choice-group legend span { color:#a8dff2; }
.date-choices button { border-color:rgba(168,223,242,.2); background:linear-gradient(135deg,rgba(168,223,242,.045),rgba(255,255,255,.015)); }
.date-choices button:hover { border-color:rgba(168,223,242,.65); color:#e7f8ff; }
.date-choices button[aria-pressed="true"] { border-color:#a8dff2; background:linear-gradient(125deg,rgba(168,223,242,.17),rgba(169,229,183,.1)); color:#e6f7f5; box-shadow:inset 0 0 22px rgba(168,223,242,.06),0 0 18px rgba(168,223,242,.08); }
.date-plan-navigation button { border-color:rgba(168,223,242,.35); background:rgba(168,223,242,.055); color:#c8edf8; }
.date-plan-navigation button:hover:not(:disabled) { border-color:#a8dff2; background:rgba(168,223,242,.14); }
.date-plan-position { color:#b9e6f2; }
.date-reveal-button { border-color:rgba(255,214,110,.62); background:linear-gradient(110deg,rgba(168,223,242,.11),rgba(255,214,110,.12)); color:#e4f5f6; box-shadow:0 0 22px rgba(168,223,242,.08); }
.date-reveal-button:hover { background:linear-gradient(110deg,rgba(168,223,242,.2),rgba(255,214,110,.2)); box-shadow:0 0 28px rgba(255,214,110,.12); }
.date-reveal-button span { color:#ffd66e; }
.date-plan-result:not(.is-reminder) { position:relative; isolation:isolate; overflow:hidden; margin-top:30px; padding:clamp(22px,4vw,40px); border:1px solid #bfd0d6; border-radius:3px; background:#f8f7f1; color:#203449; box-shadow:0 24px 65px rgba(0,0,0,.3),0 0 35px rgba(168,223,242,.1); }
.date-plan-result:not(.is-reminder)::before { position:absolute; z-index:-1; inset:11px; border:1px dashed rgba(40,78,98,.24); content:""; pointer-events:none; }
.date-plan-result:not(.is-reminder)::after { position:absolute; z-index:-1; top:0; right:0; left:0; height:8px; background:linear-gradient(90deg,#a9e5d7,#9ddaf0,#f2d47a,#efb7d3); content:""; }
.date-plan-result:not(.is-reminder) .plan-card-kicker { color:#557d8d; }
.date-plan-result:not(.is-reminder) h3 { color:#182b40; }
.date-plan-result:not(.is-reminder) .date-plan-steps { grid-template-columns:1fr; gap:0; }
.date-plan-result:not(.is-reminder) .date-plan-steps li { position:relative; display:grid; grid-template-columns:minmax(130px, .28fr) 1fr; align-items:center; gap:12px; padding:11px 0 11px 16px; border-top:1px solid rgba(49,83,104,.15); }
.date-plan-result:not(.is-reminder) .date-plan-steps li::before { position:absolute; top:50%; left:0; width:6px; height:6px; border-radius:50%; background:#9acddd; content:""; transform:translateY(-50%); }
.date-plan-result:not(.is-reminder) .date-plan-steps li:nth-child(3n + 2)::before { background:#a8cba9; }
.date-plan-result:not(.is-reminder) .date-plan-steps li:nth-child(3n)::before { background:#dfc16b; }
.date-plan-result:not(.is-reminder) .date-plan-steps li span { color:#668195; }
.date-plan-result:not(.is-reminder) .date-plan-steps li strong { color:#203449; font:600 14px/1.4 var(--sans); }
.date-plan-result:not(.is-reminder) .plan-card-signoff { color:#71818d; }
.download-plan-ticket { display:inline-flex; min-height:42px; align-items:center; gap:9px; margin-top:20px; padding:0 16px; border:1px solid #406e83; border-radius:2px; background:#18364b; color:#f5f7f3; font:700 9px var(--sans); letter-spacing:.08em; text-transform:uppercase; cursor:pointer; transition:transform .22s,box-shadow .22s,background .22s; }
.download-plan-ticket:hover { transform:translateY(-2px); background:#234e66; box-shadow:0 8px 22px rgba(34,77,101,.2); }
.download-plan-ticket span { color:#a8e2df; font-size:16px; }
.download-plan-ticket small { padding:3px 5px; border:1px solid rgba(255,255,255,.28); color:#d7e8ea; font-size:7px; }
.ticket-download-status { min-height:1em; margin:9px 0 0; color:#557d8d; font:600 10px var(--sans); }
.date-plan-result[hidden],.download-plan-ticket[hidden] { display:none; }
@media (max-width:600px) {
  .date-plan-result:not(.is-reminder) .date-plan-steps li { grid-template-columns:1fr; gap:4px; }
  .date-plan-result:not(.is-reminder) { padding:23px 18px; }
}


.postcard-section { min-height: 82vh; padding-top: 105px; padding-bottom: 125px; }
.postcard-section > .eyebrow { margin: 0 0 26px; }
.postcard-layout { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(55px, 9vw, 130px); }
.postcard-intro h2 { font-size: clamp(62px, 7.3vw, 104px); }
.postcard-intro .section-kicker { margin: 0 0 26px; }
.postcard-intro .section-note { width: 100%; min-height: 30px; }
.postcard-display { position: relative; width: 100%; padding: 0 25px; }
.postcard-controls { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 22px; padding: 0 8px; }
.text-button { display: inline-flex; align-items: center; gap: 18px; border: 0; padding: 0; background: none; color: #e5b9d1; font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: color .2s, transform .2s; }
.text-button span { font-size: 20px; }
.text-button:hover { color: white; }
.postcard-count { color: #778399; font-size: 9px; }
.postcard-count b { color: #e7c3d8; font-weight: 400; }
.postcard { --card-bg: #f0e9dc; --card-ink: #33364b; --card-accent: #9d788f; position: relative; display: flex; min-height: 355px; flex-direction: column; justify-content: center; padding: clamp(32px, 5vw, 65px); transform: rotate(1.3deg); background: var(--card-bg); color: var(--card-ink); box-shadow: 0 18px 75px rgba(0,0,0,.16); transition: background-color .35s, color .35s; touch-action:pan-y; user-select:none; }
.postcard-arrow { position:absolute; z-index:4; top:calc(50% - 20px); display:grid; width:42px; height:42px; place-items:center; border:1px solid rgba(242,164,206,.48); border-radius:50%; background:rgba(8,11,20,.78); color:#f2c4df; font-family:var(--serif); font-size:29px; line-height:1; cursor:pointer; box-shadow:0 5px 20px rgba(0,0,0,.25); backdrop-filter:blur(8px); transition:transform .22s,border-color .22s,background .22s,color .22s; }
.postcard-arrow-prev { left:0; }
.postcard-arrow-next { right:0; }
.postcard-arrow:hover { transform:scale(1.09); border-color:#f2a4ce; background:#171a2b; color:white; }
.postcard-arrow:active { transform:scale(.94); }
.postcard-arrow:focus-visible { outline:2px solid #f2a4ce; outline-offset:3px; }
.postcard-section .postcard-arrow { border-color:rgba(115,182,207,.7); color:#b9e8f6; }
.postcard-section .postcard-arrow:hover { border-color:#a8e5f4; color:#fff; }
.postmark { position: absolute; top: 34px; left: 38px; color: #ad739a; font-size: 25px; }
.postcard-label { margin: 30px 0 16px; color: var(--card-accent); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; }
.postcard h3 { min-height: 100px; margin: 0; font-size: clamp(32px, 4vw, 49px); line-height: 1.03; }
.postcard-signoff { margin: 20px 0 0; color: var(--card-accent); font-family: var(--serif); font-size: 21px; }
.postmark { color: var(--card-accent); }
.postcard-theme-1 { --card-bg:#f2e8d8; --card-ink:#363443; --card-accent:#9a647f; font-family: var(--serif); }
.postcard-theme-1 h3 { font-family: var(--serif); }
.postcard-theme-2 { --card-bg:#c9e8f2; --card-ink:#263d4a; --card-accent:#477e91; transform: rotate(-1.2deg); }
.postcard-theme-2 h3 { font-family: Georgia,serif; font-style: italic; }
.postcard-theme-3 { --card-bg:#f3c2ac; --card-ink:#573a36; --card-accent:#a75f50; transform: rotate(.7deg); }
.postcard-theme-3 h3 { font-family: "Parisienne",cursive; font-size: clamp(37px,4.8vw,58px); }
.postcard-theme-4 { --card-bg:#d8d1f0; --card-ink:#37314e; --card-accent:#75669d; transform: rotate(-.8deg); }
.postcard-theme-4 .postcard-label { letter-spacing:.27em; }
.postcard-theme-4 h3 { font-family: Georgia,serif; font-weight:400; }
.postcard-theme-5 { --card-bg:#d6eccb; --card-ink:#34452f; --card-accent:#64844e; transform: rotate(1.1deg); }
.postcard-theme-5 h3 { font-family: var(--sans); font-size:clamp(27px,3.4vw,40px); font-weight:500; letter-spacing:-.04em; }
.postcard-theme-6 { --card-bg:#f4dc87; --card-ink:#52452b; --card-accent:#9b7931; transform: rotate(-1.4deg); }
.postcard-theme-6 h3 { font-family: var(--serif); font-style:italic; font-weight:600; }
.postcard-theme-7 { --card-bg:#f1c6dc; --card-ink:#503447; --card-accent:#a5577d; transform: rotate(.5deg); }
.postcard-theme-7 h3 { font-family: "Parisienne",cursive; font-size:clamp(37px,4.8vw,58px); }
.postcard-theme-8 { --card-bg:#b9e4dc; --card-ink:#2f4542; --card-accent:#4c8178; transform: rotate(-.6deg); }
.postcard-theme-8 h3 { font-family: Georgia,serif; font-weight:600; letter-spacing:-.025em; }
.postcard-theme-9 { --card-bg:#f2c4a0; --card-ink:#503a30; --card-accent:#a66b45; transform: rotate(1.4deg); }
.postcard-theme-9 h3 { font-family: var(--sans); font-weight:400; letter-spacing:-.045em; }
.postcard-theme-10 { --card-bg:#111827; --card-ink:#f1edf3; --card-accent:#9ed9f0; transform: rotate(-1deg); box-shadow:0 22px 70px rgba(0,0,0,.32),inset 0 0 0 1px rgba(158,217,240,.16); }
.postcard-theme-10 h3 { font-family: var(--serif); font-style:italic; letter-spacing:-.02em; }

.reasons-section { padding-top: 135px; padding-bottom: 160px; }
.reason-grid { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.reason-card { display: flex; min-height: 148px; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 22px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.012); text-align: center; cursor: pointer; transition: background .25s, box-shadow .25s, transform .25s; }
.reason-card:hover, .reason-card.is-open { background: rgba(225,120,187,.065); box-shadow: inset 0 0 0 1px rgba(232,91,174,.28); }
.reason-card.reveal:hover { transform: translateY(-3px); }
.reason-card > span:first-child { color: #8994aa; font-size: 9px; font-weight: 500; }
.reason-lock { display: grid; width: 16px; height: 18px; place-items: center; color: #8994aa; transition: opacity .2s, transform .2s; }
.reason-lock svg { width: 14px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.reason-card.is-open .reason-lock { display: none; }
.reason-card p { min-height: 0; margin: 0; color: #e8d0df; font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: 1.1; }
.reason-card p[hidden] { display: none; }
.reason-card.is-open p { animation: text-arrive .32s ease both; }

.letter-section { padding-top: 105px; padding-bottom: 150px; }
.letter-section > .section-kicker { margin-bottom: 52px; }
.letter-layout { display: flex; flex-direction: column; align-items: stretch; gap: 38px; }
.letter-layout h2 { width: min(100%, 790px); margin: 0 0 0 9%; font-size: clamp(62px, 7.1vw, 94px); }
.letter-paper { position: relative; width: min(100%, 630px); min-height: 420px; margin: 0 0 0 17%; padding: 58px clamp(34px, 5vw, 70px) 42px; transform: rotate(-1deg); background: #f0e9dc; color: #35364c; box-shadow: 0 24px 65px rgba(0,0,0,.18); }
.letter-paper p { min-height: 0; margin: 0 0 7px; color: #4c4b5d; font-family: var(--serif); font-size: 21px; font-weight: 600; line-height: 1.5; }
.letter-paper .letter-greeting { margin-bottom: 1px; color: #98758e; }
.letter-paper .letter-signoff { margin-top: 34px; color: #4c4b5d; }
.letter-paper .letter-signoff em { color: #98758e; font-weight: 500; }
.letter-paper .letter-footnote { margin: 18px 0 0; color: #aa9aa3; font-family: var(--sans); font-size: 7px; font-weight: 500; letter-spacing: .16em; text-align: right; }
.letter-paper { transition: box-shadow .35s, transform .35s; }
.letter-paper:hover { transform: rotate(0deg) translateY(-3px); box-shadow: 0 30px 78px rgba(0,0,0,.24); }
.paper-star { position: absolute; top: 38px; right: 38px; color: #a47c99; font-size: 16px; }

.wish-section { display: flex; min-height: 100vh; flex-direction: column; align-items: center; padding-top: 175px; padding-bottom: 55px; overflow: hidden; text-align: center; background: radial-gradient(ellipse at 50% 35%, rgba(101,47,85,.18), transparent 39%); }
.wish-section > .eyebrow { margin-bottom: 30px; line-height: 2.2; }
.wish-section h2 { font-size: clamp(58px, 7vw, 92px); }
.wish-subtitle { min-height: 48px; margin: 24px 0 18px; color: #96a1b6; font-size: 13px; line-height: 1.8; }
.cake { position: relative; width: min(280px, 82vw); height: 258px; margin: 12px auto 5px; filter: drop-shadow(0 16px 26px rgba(0,0,0,.24)); animation: cake-float 5.4s ease-in-out infinite; }
.cake-tier { position:absolute; z-index:2; border-bottom:5px solid rgba(69,44,87,.25); border-radius:12px 12px 25px 25px; }
.cake-tier::before { content:""; position:absolute; z-index:2; top:-10px; left:-2px; width:calc(100% + 4px); height:22px; border-radius:50%; background:linear-gradient(180deg,#fff4d4,#f3dfc5); box-shadow:0 3px 4px rgba(53,34,75,.14); }
.cake-upper { left:24%; bottom:112px; width:52%; height:57px; background:linear-gradient(100deg,#686db2 0%,#9385ca 48%,#626bad 100%); }
.cake-lower { left:14%; bottom:41px; width:72%; height:78px; background:linear-gradient(100deg,#a84f79 0%,#d47d99 30%,#da9a78 57%,#c96f91 78%,#95456f 100%); }
.cake-icing { position:absolute; z-index:3; top:-5px; left:0; width:100%; height:21px; }
.cake-icing i { position:absolute; top:9px; width:11px; height:13px; border-radius:0 0 8px 8px; background:#f4e3cb; }
.cake-icing i:nth-child(1) { left:17%; height:15px; }
.cake-icing i:nth-child(2) { left:48%; height:10px; }
.cake-icing i:nth-child(3) { left:76%; height:16px; }
.cake-lower .cake-icing i:nth-child(4) { left:91%; height:9px; }
.cake-pearls { position:absolute; z-index:4; top:25px; right:16%; left:16%; display:flex; justify-content:space-between; }
.cake-pearls b { width:6px; height:6px; border-radius:50%; background:#ffe08a; box-shadow:0 0 8px rgba(255,224,138,.55); }
.cake-pearls b:nth-child(even) { background:#b9e8e2; box-shadow:0 0 8px rgba(185,232,226,.45); }
.cake-piped { position:absolute; top:33px; right:0; left:0; color:#ffe08a; font-family:var(--serif); font-size:15px; text-align:center; text-shadow:0 0 8px rgba(255,224,138,.42); }
.cake-plate { position:absolute; z-index:1; bottom:27px; left:6%; width:88%; height:19px; border:1px solid rgba(217,211,236,.72); border-radius:50%; background:linear-gradient(180deg,#e7d8e8,#968db4 72%,#6d668d); box-shadow:0 9px 20px rgba(0,0,0,.3); }
.cake-plate span { position:absolute; inset:4px 12px; border-top:1px solid rgba(255,255,255,.65); border-radius:50%; }
.candles { position:absolute; z-index:5; left:34%; bottom:158px; display:flex; gap:clamp(24px,11vw,32px); }
.candles span { position:relative; display:block; width:8px; height:43px; border-radius:3px 3px 1px 1px; background:repeating-linear-gradient(135deg,#fff2d8 0 5px,#efc9dd 5px 8px); box-shadow:inset 1px 0 rgba(255,255,255,.75),2px 2px 4px rgba(0,0,0,.18); }
.candles span:nth-child(2) { background:repeating-linear-gradient(135deg,#efffff 0 5px,#9ed9f0 5px 8px); }
.candles span:nth-child(3) { background:repeating-linear-gradient(135deg,#fff8d8 0 5px,#a9e5b7 5px 8px); }
.candles i { position:absolute; top:-18px; left:-2px; width:12px; height:17px; border-radius:55% 45% 60% 40%; transform:rotate(9deg); background:radial-gradient(ellipse at 50% 68%,#fff8bd 0 18%,#ffd45f 42%,#ff9f55 76%); box-shadow:0 0 9px 3px rgba(255,211,95,.38),0 0 24px rgba(255,169,70,.4); animation:flame 1.15s ease-in-out infinite alternate; }
.candles span:nth-child(2) i { animation-delay:-.4s; }
.candles span:nth-child(3) i { animation-delay:-.75s; }
.cake-sparkles { position:absolute; z-index:4; inset:0; pointer-events:none; }
.cake-sparkles i { position:absolute; color:#ffe08a; font-size:16px; font-style:normal; opacity:.48; text-shadow:0 0 12px rgba(255,224,138,.6); animation:twinkle 3s ease-in-out infinite; }
.cake-sparkles i:nth-child(1) { top:34%; left:1%; }
.cake-sparkles i:nth-child(2) { top:17%; right:5%; color:#a9dcff; animation-delay:-1s; }
.cake-sparkles i:nth-child(3) { right:0; bottom:29%; color:#a9e5b7; animation-delay:-1.8s; }
.cake-sparkles i:nth-child(4) { top:46%; right:9%; color:#f2a4ce; font-size:24px; animation-delay:-.5s; }
.cake-sparkles i:nth-child(5) { bottom:34%; left:4%; color:#c2b1ff; animation-delay:-1.4s; }
.cake-sparkles i:nth-child(6) { top:25%; left:16%; color:#a9dcff; font-size:23px; }
.wish-section.is-blown .candles i { animation:flame-out .58s ease-out both; }
.wish-section.is-blown .cake { animation:cake-celebrate .92s cubic-bezier(.2,.7,.2,1) both; }
.wish-section.is-blown .cake-sparkles i { animation:sparkle-burst .85s ease-out both; }
.wish-section.is-blown .cake-sparkles i:nth-child(2n) { animation-delay:.12s; }
.wish-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.wish-actions .pill { min-height: 40px; }
.wish-actions .pill:disabled { opacity:.48; cursor:default; transform:none; }
.wish-actions .pill small { color: #8e9aaf; font-size: 7px; letter-spacing: .1em; }
.wish-hint { min-height: 20px; margin: 12px 0 0; color: #99a4b7; font-size: 10px; }
.closing-invite { display:inline-flex; min-height:40px; align-items:center; gap:12px; margin-top:6px; color:#ffe08a; font-size:9px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; transition:color .2s,transform .2s; }
.closing-invite:hover { color:#fff; transform:translateY(2px); }
.closing-invite span { font-size:18px; }
.closing-invite[hidden] { display:none; }
.closing-message { position:relative; width: min(920px, 100%); margin-top: 160px; padding: 78px clamp(22px,5vw,70px) 66px; border-top:1px solid rgba(255,224,138,.35); border-bottom:1px solid rgba(158,217,240,.2); scroll-margin-top:90px; }
.closing-message::before, .closing-message::after { content:""; position:absolute; top:-3px; left:50%; width:5px; height:5px; border-radius:50%; background:#ffe08a; box-shadow:0 0 14px rgba(255,224,138,.8); }
.closing-message::after { top:auto; bottom:-3px; background:#9ed9f0; box-shadow:0 0 14px rgba(158,217,240,.7); }
.closing-star { display:block; margin:0 auto 20px; color:#ffe08a; font-size:22px; text-shadow:0 0 18px rgba(255,224,138,.58); }
.closing-message .eyebrow { margin-bottom: 23px; }
.closing-message h2 { font-size: clamp(49px, 6.3vw, 78px); }
.closing-message > p:not(.eyebrow) { min-height: 48px; margin: 21px auto 26px; color: #c0c9d9; font-family: var(--serif); font-size: 21px; line-height: 1.55; }
.closing-message .closing-signature { margin:0 auto 30px; color:#ffe08a; font-size:17px; }
.closing-signature em { color:#a9dcff; font-family:var(--serif); }
.closing-message .text-button { color:#a9dcff; }
.closing-message .text-button:hover { color:#fff; }
.wish-section.is-blown .closing-message { animation:final-arrive .85s cubic-bezier(.2,.7,.2,1) both; }
.site-footer { width:100%; margin-top:auto; padding-top:35px; color:#8d99ae; font-size:8px; letter-spacing:.24em; }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .75s ease var(--reveal-delay, 0s), transform .75s cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0s), background-color .25s, border-color .25s, box-shadow .35s; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.timeline-item.reveal:hover { transform: translateX(4px); }
.quiz-answers button:active, .quiz-navigation button:active { transform: scale(.985); }
.quiz-feedback { transition: color .25s, transform .25s; }
.quiz-feedback.is-correct, .quiz-feedback.is-wrong { animation: text-arrive .28s ease both; }
@keyframes text-arrive { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes answer-confirm { 0% { box-shadow: 0 0 0 0 rgba(71,207,128,0); } 55% { box-shadow: 0 0 0 4px rgba(71,207,128,.12); } 100% { box-shadow: 0 0 0 0 rgba(71,207,128,0); } }
@keyframes answer-reject { 0%,100% { transform: translateX(0); } 30% { transform: translateX(-3px); } 65% { transform: translateX(3px); } }
@keyframes cake-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-4px); } }
@keyframes cake-celebrate { 0% { transform:translateY(0) scale(1); } 36% { transform:translateY(-15px) scale(1.045) rotate(-2deg); } 68% { transform:translateY(-3px) scale(1.015) rotate(1deg); } 100% { transform:translateY(0) scale(1); } }
@keyframes flame-out { 0% { opacity:1; transform:translateY(0) scale(1); } 40% { opacity:.8; transform:translateY(-5px) scale(.85); } 100% { opacity:0; transform:translateY(-16px) scale(.18); } }
@keyframes sparkle-burst { 0% { opacity:0; transform:scale(.25) translateY(7px); } 35% { opacity:1; transform:scale(1.3) translateY(-5px); } 100% { opacity:0; transform:scale(.65) translateY(-26px); } }
@keyframes final-arrive { 0% { opacity:.55; transform:translateY(18px); } 100% { opacity:1; transform:translateY(0); } }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
@keyframes twinkle { 0%,100% { opacity: .45; transform: scale(.82); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes frame-float { 0%,100% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(0, -17px, 0) rotate(.55deg); } }
@keyframes flame { from { transform: rotate(5deg) scale(.95); } to { transform: rotate(-8deg) scale(1.08); } }
@keyframes daydream-glow-drift { 0%,100% { transform: translate3d(0,0,0) scale(.96); opacity: .72; } 50% { transform: translate3d(-12px,10px,0) scale(1.04); opacity: 1; } }
@keyframes daydream-star-pulse { 0%,100% { opacity: .58; transform: scale(.9) rotate(0); } 50% { opacity: 1; transform: scale(1.14) rotate(12deg); } }
@keyframes petal-drift { 0%,100% { transform:translate3d(0,0,0) rotate(-8deg) scale(.94); } 50% { transform:translate3d(10px,-18px,0) rotate(12deg) scale(1.08); } }
@keyframes nav-panel-in { from { opacity:0; transform:translateY(-7px) scale(.99); } to { opacity:1; transform:translateY(0) scale(1); } }

/* Short looping memories, placed after the postcard chapter. */
.little-loops-section { --section-accent:#9de5e2; padding-top:125px; padding-bottom:150px; }
.little-loops-section .section-kicker { color:#9de5e2; }
.little-loops-section .section-kicker i { background:#9de5e2; }
.clip-carousel { display:grid; grid-template-columns:minmax(0,1.28fr) minmax(280px,.82fr); align-items:stretch; gap:clamp(28px,5vw,70px); width:100%; max-width:1220px; margin:0 auto; outline:none; }
.clip-media { position:relative; min-height:clamp(360px,41vw,540px); overflow:hidden; border:1px solid rgba(157,229,226,.38); background:radial-gradient(ellipse at 72% 25%,rgba(93,194,206,.24),transparent 37%),radial-gradient(ellipse at 25% 80%,rgba(111,91,170,.26),transparent 43%),linear-gradient(145deg,#182438,#101322 66%,#171526); box-shadow:0 22px 70px rgba(0,0,0,.24),inset 0 0 0 7px rgba(255,255,255,.018); isolation:isolate; }
.clip-media::before,.clip-media::after { position:absolute; z-index:1; border:1px solid rgba(157,229,226,.13); border-radius:50%; content:""; pointer-events:none; }
.clip-media::before { width:62%; aspect-ratio:1; top:-20%; right:-10%; animation:clip-orbit 18s linear infinite; }
.clip-media::after { width:42%; aspect-ratio:1; bottom:-22%; left:-12%; border-color:rgba(242,164,206,.14); animation:clip-orbit 22s linear infinite reverse; }
.clip-video { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:contain; background:#090d18; }
.clip-video[hidden] { display:none; }
.clip-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; color:#f6f1f5; text-align:center; }
.clip-placeholder[hidden] { display:none; }
.clip-placeholder > span { color:#9de5e2; font-size:33px; text-shadow:0 0 30px rgba(157,229,226,.6); animation:daydream-star-pulse 3s ease-in-out infinite; }
.clip-placeholder strong { font-family:var(--serif); font-size:clamp(25px,3vw,38px); font-weight:500; }
.clip-placeholder small { color:#a8b6c7; font:700 8px/1.5 "Manrope",var(--sans); letter-spacing:.22em; }
.clip-caption-panel { display:flex; min-height:100%; flex-direction:column; justify-content:center; padding:20px 0; }
.clip-counter { display:flex; align-items:center; gap:12px; margin:0 0 27px; color:#96a2b7; font:700 8px/1.5 "Manrope",var(--sans); letter-spacing:.2em; }
.clip-counter b { color:#9de5e2; font-size:9px; }
.clip-caption { min-height:2.5em; margin:0; color:#f5f0f5; font-family:var(--serif); font-size:clamp(38px,4.4vw,62px); font-weight:600; line-height:1.02; letter-spacing:-.035em; text-wrap:balance; }
.clip-navigation { display:flex; align-items:center; gap:16px; margin-top:42px; }
.clip-arrow { display:grid; width:43px; height:43px; flex:0 0 43px; place-items:center; border:1px solid rgba(157,229,226,.42); border-radius:50%; background:rgba(157,229,226,.055); color:#c4f4ef; font:400 26px/1 var(--serif); cursor:pointer; transition:transform .22s ease,background .22s ease,border-color .22s ease,box-shadow .22s ease; }
.clip-arrow:hover { transform:translateY(-2px); border-color:#9de5e2; background:rgba(157,229,226,.14); box-shadow:0 0 22px rgba(157,229,226,.14); }
.clip-dots { display:flex; align-items:center; gap:9px; }
.clip-dot { width:7px; height:7px; padding:0; border:1px solid rgba(157,229,226,.62); border-radius:50%; background:transparent; cursor:pointer; transition:width .24s ease,background .24s ease,box-shadow .24s ease; }
.clip-dot.is-active { width:23px; border-radius:999px; background:#9de5e2; box-shadow:0 0 15px rgba(157,229,226,.5); }
.clip-swipe-hint { margin-top:20px; color:#78869c; font:700 7px/1.5 "Manrope",var(--sans); letter-spacing:.2em; }
.clip-carousel:focus-visible .clip-media { outline:2px solid #9de5e2; outline-offset:5px; }
@keyframes clip-orbit { to { transform:rotate(360deg); } }

/* Give the memory timeline more room and a little more atmosphere. */
.orbit-section { position:relative; isolation:isolate; overflow:hidden; }
.orbit-section::before { position:absolute; z-index:-1; top:12%; left:50%; width:min(920px,90vw); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(78,124,193,.13),rgba(94,73,153,.075) 38%,transparent 70%); content:""; transform:translateX(-50%); pointer-events:none; animation:orbit-aura 11s ease-in-out infinite alternate; }
.orbit-section .section-head { position:relative; z-index:1; }
.orbit-section .section-head h2 { font-size:clamp(68px,8vw,108px); }
.orbit-section .section-note { width:min(340px,32%); color:#b2bfd2; font-size:15px; }
.orbit-section .timeline { width:min(960px,88%); padding:9px 0 9px 68px; }
.orbit-section .timeline::before { left:19px; width:2px; background:linear-gradient(180deg,rgba(157,229,226,.6),rgba(194,177,255,.5) 48%,rgba(242,164,206,.43)); box-shadow:0 0 15px rgba(134,173,236,.2); }
.orbit-section .timeline::after { position:absolute; top:0; bottom:0; left:16px; width:8px; border-radius:8px; background:linear-gradient(180deg,transparent,rgba(157,229,226,.24),rgba(194,177,255,.18),transparent); background-size:100% 230px; content:""; animation:orbit-line-glow 8s linear infinite; pointer-events:none; }
.orbit-section .timeline-item { min-height:0; margin:0 0 15px; padding:29px clamp(23px,3.3vw,42px); border:1px solid rgba(173,193,224,.2); background:linear-gradient(112deg,color-mix(in srgb,var(--orbit-accent,#9de5e2) 6%,rgba(21,31,53,.8)),rgba(14,19,34,.38) 72%,color-mix(in srgb,var(--orbit-accent,#9de5e2) 4%,rgba(23,20,40,.5))); box-shadow:inset 0 1px rgba(255,255,255,.035); transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s ease,background .35s ease,box-shadow .35s ease; }
.orbit-section .timeline-item:last-child { margin-bottom:0; }
.orbit-section .timeline-item::after { position:absolute; right:25px; bottom:18px; color:var(--orbit-accent,#9de5e2); font-size:14px; content:"✦"; opacity:.42; transition:opacity .3s,transform .4s; }
.orbit-section .timeline-item:nth-child(3n + 1) { --orbit-accent:#9de5e2; }
.orbit-section .timeline-item:nth-child(3n + 2) { --orbit-accent:#c2b1ff; }
.orbit-section .timeline-item:nth-child(3n) { --orbit-accent:#f2a4ce; }
.orbit-section .timeline-item:hover,.orbit-section .timeline-item:focus-within { z-index:1; transform:translateX(7px); border-color:color-mix(in srgb,var(--orbit-accent) 42%,transparent); background:linear-gradient(112deg,color-mix(in srgb,var(--orbit-accent) 11%,#151f35),rgba(14,19,34,.56) 76%); box-shadow:0 15px 34px rgba(0,0,0,.2),inset 3px 0 var(--orbit-accent); }
.orbit-section .timeline-item:hover::after { opacity:.9; transform:rotate(35deg) scale(1.22); }
.orbit-section .timeline-number { left:-55px; top:38px; width:14px; height:14px; border:3px solid #0b1020; background:var(--orbit-accent,#9de5e2); box-shadow:0 0 0 1px color-mix(in srgb,var(--orbit-accent) 70%,transparent),0 0 16px color-mix(in srgb,var(--orbit-accent) 44%,transparent); animation:orbit-node-glow 3.2s ease-in-out infinite; }
.orbit-section .timeline-item:nth-child(2n) .timeline-number { animation-delay:-1.6s; }
.orbit-section .eyebrow.small { margin-bottom:13px; color:var(--orbit-accent,#9de5e2); font-size:10px; font-weight:800; letter-spacing:.2em; }
.orbit-section .timeline-item h3 { min-height:0; margin:0 0 12px; color:#f1edf4; font-size:clamp(29px,3.2vw,39px); line-height:1.12; letter-spacing:-.025em; }
.orbit-section .timeline-copy { max-width:740px; color:#bec9d9; font-size:16px; line-height:1.8; }
.orbit-section .timeline-item.is-birthday-memory { --orbit-accent:#ffe18a; position:relative; isolation:isolate; overflow:hidden; border-color:rgba(225,241,255,.72); background:linear-gradient(118deg,rgba(245,249,255,.2) 0%,rgba(104,177,225,.42) 44%,rgba(255,207,91,.31) 100%),linear-gradient(135deg,#172b47,#10263c 70%,#282644); box-shadow:0 14px 42px rgba(53,125,181,.2),0 0 30px rgba(255,211,112,.1),inset 0 1px rgba(255,255,255,.35); }
.orbit-section .timeline-item.is-birthday-memory::before { position:absolute; z-index:0; inset:0; background:linear-gradient(108deg,transparent 18%,rgba(255,255,255,.04) 36%,rgba(255,255,255,.22) 48%,rgba(255,255,255,.045) 59%,transparent 75%); background-size:240% 100%; content:""; animation:birthday-memory-shine 6s ease-in-out infinite; pointer-events:none; }
.orbit-section .timeline-item.is-birthday-memory > div { position:relative; z-index:1; }
.orbit-section .timeline-item.is-birthday-memory::after { z-index:2; color:#fff1b5; opacity:.95; text-shadow:0 0 15px rgba(255,232,153,.85); }
.orbit-section .timeline-item.is-birthday-memory .timeline-number { border-color:#18304a; background:linear-gradient(145deg,#fff,#ffe18a); box-shadow:0 0 0 1px rgba(255,255,255,.7),0 0 22px rgba(255,221,126,.78); }
.orbit-section .timeline-item.is-birthday-memory .eyebrow.small { color:#fff0ae; text-shadow:0 1px 12px rgba(255,216,112,.28); }
.orbit-section .timeline-item.is-birthday-memory h3 { color:#fff; text-shadow:0 2px 20px rgba(14,35,55,.45); }
.orbit-section .timeline-item.is-birthday-memory .timeline-copy { color:#edf6ff; }
.orbit-section .timeline-item.is-birthday-memory:hover,.orbit-section .timeline-item.is-birthday-memory:focus-within { border-color:#fff2bf; background:linear-gradient(118deg,rgba(245,249,255,.26),rgba(104,177,225,.5) 44%,rgba(255,207,91,.39)),linear-gradient(135deg,#172b47,#10263c 70%,#282644); box-shadow:0 18px 48px rgba(53,125,181,.28),0 0 38px rgba(255,211,112,.16),inset 3px 0 #ffe18a; }
.orbit-section .timeline-item.is-visible h3 { animation:orbit-copy-arrive .65s .08s both; }
.orbit-section .timeline-item.is-visible .timeline-copy { animation:orbit-copy-arrive .68s .16s both; }
@keyframes orbit-line-glow { from { background-position:0 -230px; } to { background-position:0 100%; } }
@keyframes orbit-node-glow { 0%,100% { box-shadow:0 0 0 1px color-mix(in srgb,var(--orbit-accent) 62%,transparent),0 0 10px color-mix(in srgb,var(--orbit-accent) 28%,transparent); } 50% { box-shadow:0 0 0 5px color-mix(in srgb,var(--orbit-accent) 13%,transparent),0 0 21px color-mix(in srgb,var(--orbit-accent) 48%,transparent); } }
@keyframes orbit-aura { from { opacity:.68; transform:translateX(-50%) scale(.96); } to { opacity:1; transform:translateX(-50%) scale(1.04); } }
@keyframes orbit-copy-arrive { from { opacity:.15; transform:translateY(9px); } to { opacity:1; transform:translateY(0); } }
@keyframes birthday-memory-shine { 0%,18% { background-position:120% 0; } 62%,100% { background-position:-140% 0; } }
@media (max-width:900px) {
  .orbit-section .section-head h2 { font-size:clamp(62px,9vw,88px); }
  .orbit-section .timeline { width:94%; }
  .orbit-section .timeline-item h3 { font-size:clamp(28px,4vw,36px); }
  .orbit-section .timeline-copy { font-size:15px; }
}
@media (max-width:640px) {
  .orbit-section .section-head h2 { font-size:clamp(57px,14vw,76px); }
  .orbit-section .section-note { width:100%; font-size:14px; }
  .orbit-section .timeline { width:100%; padding:5px 0 5px 44px; }
  .orbit-section .timeline::before { left:12px; }
  .orbit-section .timeline::after { left:9px; }
  .orbit-section .timeline-item { margin-bottom:12px; padding:23px 18px; }
  .orbit-section .timeline-number { left:-39px; top:29px; width:12px; height:12px; }
  .orbit-section .eyebrow.small { font-size:8px; letter-spacing:.16em; }
  .orbit-section .timeline-item h3 { margin-bottom:10px; font-size:clamp(26px,7vw,32px); }
  .orbit-section .timeline-copy { font-size:14px; line-height:1.75; }
  .orbit-section .timeline-item::after { right:14px; bottom:12px; font-size:11px; }
  .orbit-section .timeline-item:hover,.orbit-section .timeline-item:focus-within { transform:translateX(3px); }
}
@media (prefers-reduced-motion:reduce) {
  .orbit-section::before,.orbit-section .timeline::after,.orbit-section .timeline-number { animation:none; }
  .orbit-section .timeline-item.is-visible h3,.orbit-section .timeline-item.is-visible .timeline-copy { animation:none; }
  .orbit-section .timeline-item.is-birthday-memory::before { animation:none; }
}

/* A more colorful, keepsake-like finish for the photo chapter. */
.gallery-section { position:relative; isolation:isolate; }
.gallery-section::before { position:absolute; z-index:-1; top:12%; left:50%; width:min(1250px,110vw); aspect-ratio:1.8; border-radius:50%; background:radial-gradient(ellipse at 18% 43%,rgba(255,214,110,.105),transparent 34%),radial-gradient(ellipse at 51% 55%,rgba(137,185,255,.12),transparent 38%),radial-gradient(ellipse at 82% 45%,rgba(242,164,206,.105),transparent 34%); content:""; transform:translateX(-50%); pointer-events:none; }
.gallery-section .photo-card { --gallery-accent:#ffd66e; border:1px solid color-mix(in srgb,var(--gallery-accent) 22%,rgba(255,255,255,.08)); background:linear-gradient(145deg,color-mix(in srgb,var(--gallery-accent) 14%,#141a2b),#090d18 75%); box-shadow:inset 0 1px rgba(255,255,255,.045),0 5px 16px rgba(0,0,0,.14); transition:transform .38s cubic-bezier(.2,.7,.2,1),border-color .35s ease,box-shadow .38s ease; }
.gallery-section .photo-card:nth-child(6n + 2) { --gallery-accent:#9ed9f0; }
.gallery-section .photo-card:nth-child(6n + 3) { --gallery-accent:#a9e5b7; }
.gallery-section .photo-card:nth-child(6n + 4) { --gallery-accent:#f2a4ce; }
.gallery-section .photo-card:nth-child(6n + 5) { --gallery-accent:#c2b1ff; }
.gallery-section .photo-card:nth-child(6n) { --gallery-accent:#ffb98a; }
.gallery-section .photo-card::before { position:absolute; z-index:1; inset:0; background:linear-gradient(112deg,transparent 20%,color-mix(in srgb,var(--gallery-accent) 8%,transparent) 43%,rgba(255,255,255,.15) 50%,color-mix(in srgb,var(--gallery-accent) 7%,transparent) 57%,transparent 78%); background-size:240% 100%; background-position:140% 0; content:""; opacity:0; pointer-events:none; }
.gallery-section .photo-card.reveal.is-visible { animation:gallery-card-arrive .62s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0s) both; }
.gallery-section .photo-card:hover,.gallery-section .photo-card:focus-visible { transform:translateY(-5px) rotate(var(--gallery-lift,0deg)); border-color:color-mix(in srgb,var(--gallery-accent) 78%,white); box-shadow:0 16px 35px color-mix(in srgb,var(--gallery-accent) 19%,transparent),0 10px 24px rgba(0,0,0,.34),inset 0 0 0 1px color-mix(in srgb,var(--gallery-accent) 27%,transparent); }
.gallery-section .photo-card:nth-child(3n + 1) { --gallery-lift:-.35deg; }
.gallery-section .photo-card:nth-child(3n + 2) { --gallery-lift:.35deg; }
.gallery-section .photo-card:hover::before,.gallery-section .photo-card:focus-visible::before { opacity:1; animation:gallery-card-sheen .9s ease both; }
.gallery-section .photo-card figcaption { border-top:1px solid color-mix(in srgb,var(--gallery-accent) 27%,transparent); background:linear-gradient(transparent,rgba(5,9,18,.9) 34%,rgba(5,9,18,.94)); }
.gallery-section .photo-card:focus-visible { outline-offset:2px; }
@keyframes gallery-card-arrive { from { opacity:0; transform:translateY(18px) scale(.982); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes gallery-card-sheen { from { background-position:140% 0; } to { background-position:-140% 0; } }
@media (max-width:640px) {
  .gallery-section::before { top:6%; width:145vw; }
  .gallery-section .photo-card:hover,.gallery-section .photo-card:focus-visible { transform:translateY(-2px); }
}
@media (prefers-reduced-motion:reduce) {
  .gallery-section .photo-card.reveal.is-visible { animation:none; }
  .gallery-section .photo-card:hover::before,.gallery-section .photo-card:focus-visible::before { animation:none; }
}

/* Editorial redesign for the “If You Were” chapter. */
.if-section { position:relative; isolation:isolate; overflow:hidden; }
.if-section::before { position:absolute; z-index:-1; top:4%; right:-15%; width:min(860px,82vw); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(116,186,218,.12),rgba(111,124,190,.07) 40%,transparent 70%); content:""; pointer-events:none; animation:if-section-aura 12s ease-in-out infinite alternate; }
.if-section .section-kicker { color:#a9dcff; }
.if-section .section-kicker i { background:linear-gradient(90deg,#a9dcff,#f2a4ce); box-shadow:0 0 12px rgba(169,220,255,.35); }
.if-section .daydream-layout { grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr); gap:clamp(30px,4.3vw,62px); max-width:1360px; align-items:center; }
.if-section .daydream-intro { position:relative; padding:0 0 10px 4px; }
.if-section .daydream-intro::after { content:none; }
.section-head h2::after,.daydream-intro h2::after,.quiz-intro h2::after,.postcard-intro h2::after,.letter-layout > h2::after { display:block; width:clamp(62px,8vw,96px); height:2px; margin-top:19px; background:linear-gradient(90deg,#a9dcff,#f2a4ce,var(--section-accent,#a9e5b7)); box-shadow:0 0 13px rgba(169,220,255,.2); content:""; }
.if-section .daydream-intro h2 { max-width:560px; font-size:clamp(58px,6vw,82px); line-height:.99; text-wrap:balance; }
.if-section .daydream-intro h2 em { color:#a9e5b7; text-shadow:0 0 34px rgba(169,229,183,.13); }
.if-section .daydream-intro .section-note { max-width:370px; margin-top:17px; color:#aebbd0; }
.if-section .daydream-carousel { padding:0 54px; }
.if-section .daydream-card { --dream-bg:#455c91; --dream-border:rgba(169,220,255,.68); --dream-orb:rgba(169,220,255,.42); --dream-glow:rgba(142,164,255,.27); min-height:clamp(320px,28vw,375px); padding:clamp(32px,3.7vw,50px); border:1px solid var(--dream-border); background-color:var(--dream-bg); background-image:radial-gradient(ellipse at 88% 12%,rgba(172,205,255,.42),transparent 42%),radial-gradient(ellipse at 6% 100%,rgba(101,211,190,.32),transparent 52%),radial-gradient(ellipse at 78% 78%,rgba(239,137,192,.3),transparent 49%),radial-gradient(ellipse at 40% 30%,rgba(255,213,151,.17),transparent 48%),linear-gradient(135deg,rgba(255,255,255,.09),rgba(5,8,20,.18)); background-size:100% 100%,100% 100%,100% 100%,100% 100%,180% 180%; background-position:center,center,center,center,0% 50%; box-shadow:0 24px 64px rgba(0,0,0,.32),0 0 36px var(--dream-glow),inset 0 1px rgba(255,255,255,.16),inset 0 0 58px rgba(173,170,228,.1); animation:if-card-color-drift 9s ease-in-out infinite alternate; transition:transform .42s cubic-bezier(.2,.7,.2,1),background-color .48s ease,border-color .48s ease,box-shadow .48s ease; }
.if-section .daydream-card[data-palette="0"] { --dream-bg:#455c91; --dream-border:rgba(169,220,255,.68); --dream-orb:rgba(169,220,255,.42); --dream-glow:rgba(142,164,255,.27); }
.if-section .daydream-card[data-palette="1"] { --dream-bg:#614b87; --dream-border:rgba(207,185,255,.7); --dream-orb:rgba(207,185,255,.46); --dream-glow:rgba(169,137,255,.29); }
.if-section .daydream-card[data-palette="2"] { --dream-bg:#784b72; --dream-border:rgba(246,174,211,.7); --dream-orb:rgba(246,174,211,.46); --dream-glow:rgba(232,117,188,.28); }
.if-section .daydream-card[data-palette="3"] { --dream-bg:#356d78; --dream-border:rgba(157,229,242,.7); --dream-orb:rgba(157,229,242,.46); --dream-glow:rgba(78,199,219,.28); }
.if-section .daydream-card[data-palette="4"] { --dream-bg:#4a5a87; --dream-border:rgba(190,198,255,.7); --dream-orb:rgba(190,198,255,.46); --dream-glow:rgba(142,156,255,.29); }
.if-section .daydream-card[data-palette="5"] { --dream-bg:#3d7063; --dream-border:rgba(160,235,213,.7); --dream-orb:rgba(160,235,213,.46); --dream-glow:rgba(87,216,177,.26); }
.if-section .daydream-card[data-palette="6"] { --dream-bg:#79495d; --dream-border:rgba(255,184,196,.7); --dream-orb:rgba(255,184,196,.46); --dream-glow:rgba(239,118,161,.28); }
.if-section .daydream-card[data-palette="7"] { --dream-bg:#4a6880; --dream-border:rgba(169,225,255,.7); --dream-orb:rgba(169,225,255,.46); --dream-glow:rgba(97,184,235,.28); }
.if-section .daydream-card:hover { transform:translateY(-3px); border-color:rgba(169,229,183,.62); box-shadow:0 29px 72px rgba(0,0,0,.36),0 0 40px rgba(110,184,216,.14),inset 0 1px rgba(255,255,255,.12); }
.if-section .daydream-card::before { top:-82px; right:-58px; width:245px; height:245px; border-color:var(--dream-orb); background:radial-gradient(circle at 38% 38%,rgba(255,255,255,.23),rgba(169,220,255,.16) 25%,rgba(186,159,255,.1) 54%,transparent 72%); box-shadow:0 0 68px var(--dream-glow),inset 0 0 42px rgba(169,220,255,.12); transition:border-color .48s ease,box-shadow .48s ease; }
.if-section .daydream-card::after { inset:15px; border-color:rgba(169,220,255,.22); background:linear-gradient(112deg,transparent 20%,rgba(255,255,255,.035) 39%,rgba(169,220,255,.14) 49%,rgba(242,164,206,.1) 56%,transparent 73%); background-size:230% 100%; background-position:145% 0; opacity:.58; animation:daydream-inner-glide 7s ease-in-out infinite; transition:opacity .35s ease,border-color .48s ease; }
.if-section .daydream-card:hover::after { opacity:1; animation:daydream-card-sheen 1.2s ease both; }
.if-section .daydream-card .daydream-label { display:flex; width:max-content; align-items:center; gap:8px; padding:8px 12px; border:1px solid rgba(169,229,183,.25); border-radius:999px; background:rgba(6,12,25,.38); color:#b9ead0; font-size:9px; letter-spacing:.2em; }
.if-section .daydream-label b { color:#ffe08a; text-shadow:0 0 15px rgba(255,224,138,.7); }
.if-section .daydream-prompt { position:relative; top:-34px; margin:12px 0 13px; color:#fbf8ff; font-size:clamp(31px,3.05vw,40px); font-weight:700; line-height:1.08; -webkit-text-stroke:.5px rgba(251,248,255,.58); text-shadow:0 2px 24px rgba(169,220,255,.2); transform:none; }
.if-section .daydream-answer { position:relative; top:18px; max-width:470px; color:#f0eafa; font-size:clamp(20px,2vw,25px); font-weight:600; line-height:1.22; }
.if-section .daydream-footnote:empty { display:none; }
.if-section .daydream-footnote { padding-top:32px; color:#9daec5; letter-spacing:.17em; }
.if-section .daydream-card i { right:26px; bottom:22px; color:#ffe08a; text-shadow:0 0 22px rgba(255,224,138,.7); }
.if-section .daydream-arrow { width:44px; height:44px; border-color:rgba(169,220,255,.58); background:rgba(9,17,32,.9); color:#c9efff; box-shadow:0 7px 22px rgba(0,0,0,.3),0 0 18px rgba(169,220,255,.08); }
.if-section .daydream-arrow:hover { transform:scale(1.1); border-color:#b9eaff; background:#1b2940; color:#fff; box-shadow:0 0 27px rgba(169,220,255,.22); }
.if-section .daydream-count { padding:7px 11px; border:1px solid rgba(169,220,255,.18); border-radius:999px; background:rgba(12,18,34,.55); letter-spacing:.08em; }
.if-section .daydream-count b { color:#b9eaff; }
.if-section .daydream-controls { justify-content:flex-end; margin:17px 54px 0; }
@keyframes daydream-card-sheen { from { background-position:145% 0; } to { background-position:-145% 0; } }
@keyframes daydream-inner-glide { 0%,100% { background-position:145% 0; opacity:.38; } 50% { background-position:-45% 0; opacity:.72; } }
@keyframes if-section-aura { from { opacity:.58; transform:scale(.96) translate3d(0,0,0); } to { opacity:.95; transform:scale(1.05) translate3d(-1.5%,1%,0); } }
@keyframes if-card-color-drift { from { background-position:center,center,center,0% 50%; } to { background-position:center,center,center,100% 50%; } }
@media (max-width:900px) {
  .if-section .daydream-layout { grid-template-columns:1fr; gap:29px; max-width:760px; }
  .if-section .daydream-intro h2 { max-width:680px; }
  .if-section .daydream-intro::after { margin-top:17px; }
  .if-section .daydream-feature { width:100%; }
  .if-section .daydream-card { min-height:345px; }
}
@media (max-width:640px) {
  .if-section .daydream-layout { gap:22px; }
  .if-section .daydream-intro h2 { font-size:clamp(49px,12vw,66px); }
  .if-section .daydream-carousel { padding:0 34px; }
  .if-section .daydream-card { min-height:300px; padding:31px 25px; }
  .if-section .daydream-card::after { inset:10px; }
  .if-section .daydream-prompt { margin-top:13px; font-size:28px; }
  .if-section .daydream-answer { font-size:22px; }
  .if-section .daydream-controls { margin-right:34px; margin-left:34px; }
  .if-section .daydream-card:hover { transform:translateY(-2px); }
}
@media (prefers-reduced-motion:reduce) {
  .if-section::before { animation:none; }
  .if-section .daydream-card { animation:none; }
  .if-section .daydream-card::after { animation:none; }
  .if-section .daydream-card:hover::after { animation:none; }
}

/* Keep the extra-song note distinct from the playable song tiles. */
.songs-section .song-more { position:relative; display:flex; width:max-content; max-width:100%; min-height:0; align-items:center; justify-content:center; margin:26px auto 0; padding:0; border:0; background:transparent; color:#8992a8; font:700 10px/1.5 "Manrope",var(--sans); letter-spacing:.2em; text-align:center; text-shadow:none; opacity:.8; }
.songs-section .song-more span { background:none; color:inherit; -webkit-text-fill-color:currentColor; animation:none; }
.songs-section .song-more i { display:none; }
.songs-section .song-artwork-heading { margin-top:52px; }

/* Both song-card viewers gain a soft, cover-aware frame and lively controls. */
.songs-section .song-memory-carousel { isolation:isolate; border-color:color-mix(in srgb,var(--memory-accent) 65%,rgba(255,255,255,.3)); background:radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--memory-accent) 20%,transparent),transparent 73%),linear-gradient(145deg,rgba(22,30,50,.94),rgba(8,12,24,.94)); box-shadow:0 18px 48px rgba(0,0,0,.27),0 0 30px color-mix(in srgb,var(--memory-accent) 17%,transparent),inset 0 0 45px color-mix(in srgb,var(--memory-accent) 9%,transparent); transition:transform .38s cubic-bezier(.2,.7,.2,1),border-color .4s,background .4s,box-shadow .4s; animation:song-memory-breathe 6s ease-in-out infinite; }
.songs-section .song-memory-carousel:nth-child(2) { animation-delay:-3s; }
.songs-section .song-memory-carousel::before { position:absolute; z-index:1; inset:7px; border:1px solid color-mix(in srgb,var(--memory-accent) 43%,rgba(255,255,255,.18)); background:linear-gradient(112deg,transparent 24%,color-mix(in srgb,var(--memory-accent) 8%,transparent) 48%,rgba(255,255,255,.1) 51%,transparent 76%); background-size:230% 100%; background-position:140% 0; content:""; opacity:.62; pointer-events:none; transition:opacity .3s; }
.songs-section .song-memory-carousel:hover { transform:translateY(-3px); border-color:color-mix(in srgb,var(--memory-accent) 82%,white); box-shadow:0 22px 54px rgba(0,0,0,.3),0 0 36px color-mix(in srgb,var(--memory-accent) 21%,transparent),inset 0 0 48px color-mix(in srgb,var(--memory-accent) 12%,transparent); }
.songs-section .song-memory-carousel:hover::before { opacity:1; animation:song-memory-sheen 1.15s ease both; }
.songs-section .song-memory-arrow { width:42px; height:42px; border-color:color-mix(in srgb,var(--memory-accent) 65%,white); background:color-mix(in srgb,var(--memory-accent) 22%,rgba(5,8,16,.86)); color:#fff; box-shadow:0 5px 18px rgba(0,0,0,.34),0 0 14px color-mix(in srgb,var(--memory-accent) 22%,transparent); }
.songs-section .song-memory-arrow:hover { transform:translateY(-2px) scale(1.08); border-color:#fff; background:color-mix(in srgb,var(--memory-accent) 42%,rgba(17,20,32,.9)); }
.songs-section .song-memory-arrow:focus-visible { outline-color:var(--memory-accent); }
@keyframes song-memory-breathe { 0%,100% { box-shadow:0 18px 48px rgba(0,0,0,.27),0 0 22px color-mix(in srgb,var(--memory-accent) 12%,transparent),inset 0 0 40px color-mix(in srgb,var(--memory-accent) 7%,transparent); } 50% { box-shadow:0 18px 48px rgba(0,0,0,.27),0 0 34px color-mix(in srgb,var(--memory-accent) 22%,transparent),inset 0 0 48px color-mix(in srgb,var(--memory-accent) 12%,transparent); } }
@keyframes song-memory-sheen { from { background-position:140% 0; } to { background-position:-140% 0; } }
@media (max-width:640px) {
   .songs-section .song-more { min-height:0; margin-top:22px; padding:0 8px; font-size:9px; letter-spacing:.15em; }
  .songs-section .song-artwork-heading { margin-top:40px; }
  .songs-section .song-memory-carousel:hover { transform:translateY(-2px); }
}
@media (prefers-reduced-motion:reduce) {
  .songs-section .song-memory-carousel { animation:none; }
  .songs-section .song-memory-carousel:hover::before { animation:none; }
}

/* Six smaller, color-lit stars for the constellation chapter. */
.constellation-section { position:relative; isolation:isolate; }
.constellation-section::before { position:absolute; z-index:-1; top:20%; left:50%; width:min(1100px,105vw); aspect-ratio:1.9; border-radius:50%; background:radial-gradient(ellipse at 15% 54%,rgba(255,214,110,.075),transparent 32%),radial-gradient(ellipse at 50% 50%,rgba(158,217,240,.09),transparent 36%),radial-gradient(ellipse at 84% 46%,rgba(194,177,255,.08),transparent 34%); content:""; transform:translateX(-50%); pointer-events:none; }
.constellation-section .constellation-grid { gap:13px; }
.constellation-section .constellation-card { --constellation-accent:#ffd66e; min-height:205px; padding:30px 27px 24px; overflow:hidden; isolation:isolate; border-radius:16px; border-color:color-mix(in srgb,var(--constellation-accent) 34%,rgba(176,187,216,.2)); background:radial-gradient(ellipse at 92% 8%,color-mix(in srgb,var(--constellation-accent) 16%,transparent),transparent 42%),linear-gradient(145deg,color-mix(in srgb,var(--constellation-accent) 5%,rgba(25,35,65,.92)),rgba(12,18,37,.92) 78%); box-shadow:inset 0 1px rgba(255,255,255,.08),inset 0 0 0 1px rgba(255,255,255,.035),0 14px 34px rgba(0,0,0,.2),0 0 17px color-mix(in srgb,var(--constellation-accent) 8%,transparent); transition:transform .58s cubic-bezier(.2,.72,.2,1),border-color .48s ease,background .5s ease,box-shadow .5s ease; }
.constellation-section .constellation-card:nth-of-type(2) { --constellation-accent:#9de5e2; }
.constellation-section .constellation-card:nth-of-type(3) { --constellation-accent:#9ed9f0; }
.constellation-section .constellation-card:nth-of-type(4) { --constellation-accent:#f2a4ce; }
.constellation-section .constellation-card:nth-of-type(5) { --constellation-accent:#c2b1ff; }
.constellation-section .constellation-card:nth-of-type(6) { --constellation-accent:#b8e6c2; }
.constellation-section .constellation-card::before { position:absolute; z-index:0; top:-40px; right:-39px; width:130px; height:130px; border:1px solid color-mix(in srgb,var(--constellation-accent) 22%,transparent); border-radius:50%; background:radial-gradient(circle at 38% 40%,color-mix(in srgb,var(--constellation-accent) 17%,transparent),transparent 68%); box-shadow:0 0 34px color-mix(in srgb,var(--constellation-accent) 10%,transparent),inset 0 0 28px color-mix(in srgb,var(--constellation-accent) 10%,transparent); content:""; animation:constellation-orbit-glow 8s ease-in-out infinite alternate; pointer-events:none; }
.constellation-section .constellation-card:nth-of-type(even)::before { animation-delay:-4s; }
.constellation-section .constellation-card > * { position:relative; z-index:1; }
.constellation-section .constellation-card h3 { margin-bottom:9px; font-size:clamp(25px,2.5vw,31px); transition:color .25s,text-shadow .25s; }
.constellation-section .constellation-card:hover { transform:translateY(-3px); border-color:color-mix(in srgb,var(--constellation-accent) 66%,rgba(255,255,255,.24)); background:radial-gradient(ellipse at 92% 8%,color-mix(in srgb,var(--constellation-accent) 22%,transparent),transparent 44%),linear-gradient(145deg,color-mix(in srgb,var(--constellation-accent) 9%,rgba(25,35,65,.96)),rgba(12,18,37,.96) 78%); box-shadow:0 17px 36px rgba(0,0,0,.23),0 0 27px color-mix(in srgb,var(--constellation-accent) 10%,transparent),inset 0 1px rgba(255,255,255,.08); }
@keyframes constellation-orbit-glow { from { transform:translate3d(0,0,0) scale(.92); opacity:.6; } to { transform:translate3d(-9px,8px,0) scale(1.08); opacity:1; } }
@media (max-width:900px) { .constellation-section .constellation-card { min-height:190px; padding:25px 22px 21px; } }
@media (max-width:640px) { .constellation-section .constellation-card { min-height:175px; padding:22px 20px 19px; } }
@media (prefers-reduced-motion:reduce) {
  .constellation-section .constellation-card::before { animation:none; }
}

/* The six constellation tiles float into the name RAHEEN. */
.constellation-section .constellation-grid { width:min(100%,1120px); grid-template-columns:repeat(6,minmax(0,1fr)); justify-content:center; gap:clamp(10px,1.55vw,19px); margin:0 auto; }
.constellation-section .constellation-card { aspect-ratio:1; min-height:0; padding:clamp(13px,1.4vw,20px); transform:rotate(var(--star-tilt,0deg)); translate:0 0; animation:constellation-tile-float var(--float-time,4.4s) ease-in-out var(--float-delay,0s) infinite; }
.constellation-section .constellation-card:nth-of-type(1) { --star-tilt:-4deg; --float-x:-9px; --float-y:-20px; --float-time:7.2s; --float-delay:-1.4s; }
.constellation-section .constellation-card:nth-of-type(2) { --star-tilt:3.5deg; --float-x:9px; --float-y:-23px; --float-time:7.7s; --float-delay:-3.2s; }
.constellation-section .constellation-card:nth-of-type(3) { --star-tilt:-2.8deg; --float-x:-10px; --float-y:-19px; --float-time:7.4s; --float-delay:-.6s; }
.constellation-section .constellation-card:nth-of-type(4) { --star-tilt:4.2deg; --float-x:10px; --float-y:-22px; --float-time:8s; --float-delay:-4s; }
.constellation-section .constellation-card:nth-of-type(5) { --star-tilt:-3.5deg; --float-x:-9px; --float-y:-20px; --float-time:7.5s; --float-delay:-2s; }
.constellation-section .constellation-card:nth-of-type(6) { --star-tilt:3deg; --float-x:9px; --float-y:-19px; --float-time:7.8s; --float-delay:-.9s; }
.constellation-section .constellation-card::after { position:absolute; z-index:0; top:14px; right:17px; color:color-mix(in srgb,var(--constellation-accent) 45%,transparent); content:attr(data-letter); font:500 clamp(60px,8vw,100px)/1 "Cormorant Garamond",var(--serif); opacity:.13; pointer-events:none; }
.constellation-section .constellation-card h3 { display:flex; align-items:baseline; gap:1px; margin:auto 0 9px; font-size:clamp(26px,3vw,35px); letter-spacing:-.025em; }
.constellation-section .constellation-initial { color:var(--constellation-accent); font-size:1.55em; line-height:.8; text-shadow:0 0 23px color-mix(in srgb,var(--constellation-accent) 45%,transparent); }
.constellation-section .constellation-word { color:#f6f2f7; }
.constellation-section .constellation-card { cursor:default; }
.constellation-section .constellation-card:nth-of-type(odd)::before { top:auto; right:-27px; bottom:-26px; left:auto; width:115px; height:115px; }
.constellation-section .constellation-card:hover { z-index:3; transform:rotate(0deg) scale(1.045); }
.constellation-notes { display:grid; width:min(100%,1120px); grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 15px; margin:38px auto 0; }
.constellation-note { --note-accent:#ffd66e; min-width:0; padding:16px 19px 17px; border:1px solid color-mix(in srgb,var(--note-accent) 22%,rgba(176,187,216,.12)); border-left:2px solid color-mix(in srgb,var(--note-accent) 72%,transparent); background:linear-gradient(130deg,color-mix(in srgb,var(--note-accent) 6%,rgba(17,23,42,.86)),rgba(9,14,27,.72)); box-shadow:inset 0 1px rgba(255,255,255,.035); transition:transform .28s cubic-bezier(.2,.7,.2,1),border-color .28s,box-shadow .28s,background .28s; }
.constellation-note:nth-child(2) { --note-accent:#9de5e2; }
.constellation-note:nth-child(3) { --note-accent:#9ed9f0; }
.constellation-note:nth-child(4) { --note-accent:#f2a4ce; }
.constellation-note:nth-child(5) { --note-accent:#c2b1ff; }
.constellation-note:nth-child(6) { --note-accent:#b8e6c2; }
.constellation-note:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--note-accent) 42%,rgba(255,255,255,.18)); box-shadow:0 9px 24px rgba(0,0,0,.17),0 0 20px color-mix(in srgb,var(--note-accent) 8%,transparent),inset 0 1px rgba(255,255,255,.05); }
.constellation-note h3 { margin:0 0 6px; color:var(--note-accent); font:600 19px/1.2 var(--serif); }
.constellation-note p { margin:0; color:#aeb9cc; font:500 12px/1.65 var(--sans); }
@keyframes constellation-tile-float { 0%,100% { translate:0 0; } 50% { translate:var(--float-x,0) var(--float-y,-17px); } }
@media (max-width:900px) {
  .constellation-section .constellation-grid { width:100%; grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(150px,19vw); justify-content:start; gap:17px; overflow-x:auto; overflow-y:hidden; padding:30px 12px 33px; scroll-snap-type:x proximity; scrollbar-color:rgba(169,220,255,.4) transparent; scrollbar-width:thin; }
  .constellation-section .constellation-card { min-height:0; scroll-snap-align:center; }
  .constellation-notes { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px) {
  .constellation-section .constellation-grid { grid-template-columns:none; grid-auto-columns:150px; gap:15px; padding:19px 10px 25px; }
  .constellation-section .constellation-card { min-height:0; padding:14px; }
  .constellation-section .constellation-card h3 { font-size:clamp(21px,6vw,29px); }
  .constellation-section .constellation-card::after { top:9px; right:11px; font-size:54px; }
  .constellation-notes { grid-template-columns:1fr; gap:9px; margin-top:25px; }
  .constellation-note { padding:14px 16px; }
}
@media (prefers-reduced-motion:reduce) {
  .constellation-section .constellation-card { animation:none; }
  .constellation-section .constellation-card:hover { translate:none; }
}

/* Nine little notes, each with its own soft color in the same universe. */
.months-section { position:relative; isolation:isolate; }
.months-section::before { position:absolute; z-index:-1; top:13%; left:50%; width:min(1080px,110vw); aspect-ratio:2.1; border-radius:50%; background:radial-gradient(ellipse at 17% 53%,rgba(158,217,240,.07),transparent 34%),radial-gradient(ellipse at 51% 46%,rgba(194,177,255,.055),transparent 36%),radial-gradient(ellipse at 86% 53%,rgba(169,229,183,.05),transparent 35%); content:""; transform:translateX(-50%); pointer-events:none; animation:months-aura 12s ease-in-out infinite alternate; }
.month-card > * { position:relative; z-index:1; }
.month-card.month-october > * { z-index:2; }
.month-card.month-october::before { z-index:1; border-color:rgba(255,225,138,.3); background:radial-gradient(circle at 37% 39%,rgba(255,214,110,.18),rgba(158,217,240,.1) 38%,transparent 70%); box-shadow:0 0 31px rgba(158,217,240,.12),inset 0 0 24px rgba(255,214,110,.12); opacity:.86; animation:october-orbit 7.5s ease-in-out infinite alternate; }
.month-card:focus-visible { z-index:2; outline:2px solid var(--month-accent); outline-offset:3px; }
@keyframes months-aura { from { opacity:.68; transform:translateX(-50%) scale(.97); } to { opacity:1; transform:translateX(-50%) scale(1.035); } }
@keyframes october-orbit { from { transform:translate(0,0) scale(.94); } to { transform:translate(-8px,6px) scale(1.07); } }
@media (max-width:1000px) { .months-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; } .month-card { min-height:134px; gap:11px; padding:10px; } .month-photo { width:96px; min-width:96px; } }
@media (max-width:640px) { .months-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; } .month-card { min-height:128px; gap:8px; padding:8px; } .month-photo { width:76px; min-width:76px; } .month-name { margin-bottom:6px; font-size:12.5px; letter-spacing:.025em; } .month-copy p { font-size:11px; } }
@media (prefers-reduced-motion:reduce) { .months-section::before,.month-card.reveal.is-visible,.month-card.month-october::after,.month-card.month-october::before,.month-card:hover .month-name i { animation:none; } .month-card,.month-card::before,.month-card .month-name,.month-photo img { transition:none; } }


@media (max-width:900px) {
  .clip-carousel { grid-template-columns:minmax(0,1.1fr) minmax(240px,.9fr); gap:28px; }
  .clip-media { min-height:390px; }
  .clip-caption { font-size:clamp(34px,5vw,48px); }
}
@media (max-width:640px) {
  .little-loops-section { padding-top:90px; padding-bottom:105px; }
  .clip-carousel { grid-template-columns:1fr; gap:24px; }
  .clip-media { min-height:0; aspect-ratio:4/3; }
  .clip-caption-panel { min-height:0; padding:5px 0 0; }
  .clip-counter { margin-bottom:17px; }
  .clip-caption { min-height:0; font-size:clamp(37px,10vw,52px); }
  .clip-navigation { margin-top:25px; }
  .clip-swipe-hint { margin-top:14px; }
}

@media (min-width: 901px) and (max-width: 1500px) {
  .site-header { gap:9px; padding-right:18px; padding-left:18px; }
  .main-nav { gap:2px; }
  .nav-link { padding-right:7px; padding-left:7px; font-size:7.2px; }
  .nav-link span { font-size:7.5px; }
  .nav-scroll-control { width:23px; height:23px; flex-basis:23px; }
  .header-cta { min-width:101px; padding:0 11px; }
}
@media (max-width: 1160px) {
  .site-header { gap:8px; padding-right:14px; padding-left:14px; }
  .brand { font-size:22px; }
  .main-nav { gap:1px; }
  .nav-link { padding-right:7px; padding-left:7px; font-size:7.4px; letter-spacing:.035em; }
  .nav-link span { font-size:7.4px; }
  .nav-scroll-control { width:21px; height:21px; flex-basis:21px; }
  .header-cta { min-width:97px; min-height:36px; padding:0 9px; font-size:8px; }
}
@media (max-width: 900px) {
  .photo-grid { --gallery-columns:3; }
  .song-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .site-header { height:66px; justify-content:space-between; gap:12px; }
  .menu-toggle { display:flex; width:40px; height:40px; flex:0 0 40px; flex-direction:column; justify-content:center; gap:6px; border:1px solid rgba(242,164,206,.28); border-radius:50%; background:rgba(255,255,255,.025); cursor:pointer; transition:background .2s,border-color .2s; }
  .menu-toggle:hover,.menu-toggle[aria-expanded="true"] { border-color:rgba(242,164,206,.72); background:rgba(242,164,206,.1); }
  .menu-toggle span { width:15px; height:1px; margin:0 auto; background:#f1cfe2; transition:transform .22s; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform:translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform:translateY(-3.5px) rotate(-45deg); }
  .nav-scroll-control { display:none; }
  .main-nav { position:absolute; top:65px; right:12px; left:12px; display:none; max-height:calc(100dvh - 82px); align-items:stretch; overflow-y:auto; padding:13px; border:1px solid rgba(242,164,206,.19); border-radius:16px; background:linear-gradient(145deg,rgba(15,19,36,.98),rgba(7,10,20,.98)); box-shadow:0 22px 60px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.04); backdrop-filter:blur(24px); mask-image:none; }
  .main-nav.is-open { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 8px; animation:nav-panel-in .24s cubic-bezier(.2,.7,.2,1) both; }
  .nav-link { min-height:43px; flex-direction:row; justify-content:flex-start; gap:11px; padding:0 10px; border-color:rgba(255,255,255,.04); border-radius:9px; font-size:8px; letter-spacing:.04em; }
  .nav-link::after { display:none; }
  .nav-link span { display:inline-grid; min-width:30px; height:24px; place-items:center; border:1px solid rgba(169,220,255,.16); border-radius:7px; background:rgba(169,220,255,.05); font-size:7px; }
  .nav-link.is-active span { border-color:rgba(255,214,110,.35); background:rgba(255,214,110,.08); }
  .nav-link.nav-make { min-height:38px; }
  .header-cta { margin-left: auto; }
  .section { padding-right: 7vw; padding-left: 7vw; }
  .hero { grid-template-columns: 1fr 1fr; gap: 36px; }
  .hero-frame { max-width: 390px; }
  .quiz-panel { gap: 35px; padding: 46px 34px; }
  .constellation-grid { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 32px; }
  .months-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .date-builder { width:100%; }
}
@media (max-width: 640px) {
  :root { scroll-padding-top: 68px; }
  .birthday-gate { padding: 14px; }
  .birthday-gate-panel { width:100%; min-height:min(620px,calc(100dvh - 28px)); padding:38px 18px; }
  .birthday-gate-panel::before { inset:10px; }
  .birthday-gate-kicker { gap:8px; font-size:7px; letter-spacing:.2em; }
  .birthday-gate-name { margin-top:42px; font-size:28px; }
  .birthday-gate-panel h1 { font-size:clamp(70px,18vw,112px); }
  .birthday-gate-message { font-size:14px; }
  .birthday-gate-preview { max-width:100%; flex-wrap:wrap; gap:8px 13px; margin-top:19px; padding:10px 12px; border-radius:14px; font-size:6px; letter-spacing:.1em; }
  .birthday-gate-preview > b { display:none; }
  .birthday-gate-signoff { gap:7px; margin-top:19px; font-size:6px; letter-spacing:.16em; }
  .birthday-gate-signoff i { width:13px; }
  .birthday-gate-orbit { width:115vw; }
  .birthday-gate-orbit.orbit-b { width:85vw; }
  .birthday-gate-stars i:nth-child(1) { left:7%; }
  .birthday-gate-stars i:nth-child(2) { right:7%; }
  .birthday-enter { min-height:50px; margin-top:30px; padding:0 19px; font-size:9px; }
  .site-header { padding:0 18px; gap:12px; }
  .brand { font-size: 19px; }
  .header-cta { min-width: 104px; min-height: 36px; padding: 0 10px; font-size: 8px; gap: 8px; }
  .main-nav { right:8px; left:8px; padding:10px; }
  .nav-link { min-height:41px; gap:8px; padding:0 7px; font-size:7.5px; white-space:normal; }
  .nav-link span { min-width:27px; }
  .section { padding: 105px 23px; }
  .hero { min-height: auto; grid-template-columns: 1fr; gap: 47px; padding-top: 142px; padding-bottom: 86px; }
  .hero .eyebrow { gap:8px; margin-bottom:29px; padding:7px 10px; font-size:7px; letter-spacing:.15em; }
  .hero .eyebrow i { width: 20px; }
  .hero .section-kicker { margin-bottom: 22px; }
  h1 { font-size: clamp(66px, 17vw, 94px); }
  h2 { font-size: clamp(51px, 13vw, 68px); }
  .hero-subtitle { margin: 24px 0; }
  .hero-frame { width: 88%; max-width: none; justify-self: center; aspect-ratio: 498 / 574; }
  .vertical-note { right: -23px; }
  .orbit-ring { width: 420px; height: 420px; }
  .ring-one { left: -290px; top: 10%; }.ring-two { left: 40%; top: 24%; }
  .scroll-hint { display: none; }
  .section-head { display: block; margin-bottom: 48px; }
  .section-kicker { margin-bottom: 28px; font-size: 8px; }
  .section-note { width: 100%; max-width: 310px; margin-top: 24px; }
  .orbit-section { min-height: 0; }
  .timeline { width: 100%; padding-left: 46px; }
  .timeline-number { left: -33px; }
  .timeline-item { min-height: 112px; }
  .timeline-item h3 { font-size: 24px; }
  .photo-grid { --gallery-columns:2; }
  .photo-card figcaption { padding: 28px 9px 9px; opacity: 1; transform:none; }
  .photo-card figcaption strong { min-height: 0; font-size: 16px; }
  .photo-lightbox { grid-template-columns: 42px minmax(0,1fr) 42px; padding: 58px 8px 35px; }
  .lightbox-arrow { width: 36px; height: 36px; font-size: 25px; }
  .lightbox-caption { font-size: 17px; }
  .daydream-layout { grid-template-columns: 1fr; gap: 26px; }
  .daydream-controls { flex-direction: row; align-items: center; gap: 12px; }
  .if-section > .section-kicker { margin-bottom: 46px; }
  .daydream-intro h2 { font-size: clamp(51px, 13vw, 68px); }
  .daydream-card { min-height: 265px; padding: 29px 25px; }
  .daydream-prompt { margin: 24px 0 11px; font-size: 29px; }
  .daydream-answer { font-size: 25px; }
  .daydream-footnote { padding-top: 23px; font-size: 7px; }
  .song-carousel { margin-top:34px; }
  .song-list { grid-template-columns:1fr; gap:12px; }
  .song-row { min-height:126px; padding:7px; }
  .song-cover { width:102px; }
  .song-card-content { padding-left:12px; }
  .play-button { width:38px; height:38px; }
  .quiz-panel { grid-template-columns: 1fr; gap: 36px; padding: 32px 22px; }
  .quiz-intro { min-height: 310px; }
  .quiz-dots { padding-top: 24px; }
  .quiz-rounds { gap:6px; margin-bottom:24px; }
  .quiz-round { min-height:58px; padding:7px 6px; }
  .quiz-round > b { font-size:7px; }
  .quiz-round > small { font-size:5.5px; letter-spacing:.04em; }
  .quiz-progress { margin-bottom: 25px; }
  .quiz-question { font-size: 27px; }
  .constellation-grid { grid-template-columns: 1fr; }
  .constellation-card { min-height: 190px; }
  .months-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .date-builder { padding:21px 17px; }
  .date-choice-group legend { font-size:21px; }
  .date-choices { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
  .date-choices button { min-height:46px; padding:9px; font-size:9px; }
  .custom-choice > div { gap:6px; }
  .custom-choice input { padding:0 8px; font-size:9px; }
  .save-custom-choice { min-width:55px; }
  .date-plan-result { font-size:20px; }
  .date-plan-steps { grid-template-columns:1fr; }
  .postcard-layout { grid-template-columns: 1fr; gap: 48px; }
  .letter-layout { gap: 30px; }
  .letter-section > .section-kicker { margin-bottom: 42px; }
  .letter-layout h2 { font-size: clamp(52px, 12vw, 72px); }
  .letter-layout h2, .letter-paper { margin-left: 4%; }
  .postcard-display { max-width: 620px; margin: 0 auto; }
  .postcard-section { min-height: auto; }
  .postcard { min-height: 300px; }
  .postcard h3 { min-height: 76px; }
  .reason-grid { grid-template-columns: repeat(2, 1fr); }
  .reason-card { min-height: 120px; padding: 15px; }
  .reason-card p { margin-top: 16px; font-size: 19px; }
  .letter-paper { min-height: 360px; padding: 52px 28px 36px; }
  .letter-paper p { font-size: 18px; }
  .letter-layout h2, .letter-paper { margin-left: 0; }
  .wish-section { min-height: 100vh; padding-top: 145px; }
  .wish-section h2 { font-size: clamp(55px, 14vw, 75px); }
  .cake { margin-top: 2px; margin-bottom: 0; }
  .closing-message { margin-top: 130px; padding: 50px 0; }
  .closing-message h2 { font-size: clamp(43px, 11vw, 61px); }
}
@media (max-width:420px) {
  .quiz-rounds { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .quiz-round { min-height:54px; padding:8px 10px; }
  .quiz-round > b { font-size:8px; }
  .quiz-round > small { font-size:6px; }
}
@media (max-width:640px) and (max-height:700px) {
  .birthday-gate-panel { min-height:calc(100dvh - 24px); padding-top:23px; padding-bottom:23px; }
  .birthday-gate-name { margin-top:22px; }
  .birthday-gate-panel h1 { font-size:clamp(58px,15vw,88px); }
  .birthday-gate-spark { margin-top:13px; }
  .birthday-gate-preview { margin-top:13px; }
  .birthday-enter { min-height:45px; margin-top:15px; }
  .birthday-gate-signoff { margin-top:13px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .birthday-gate-panel { animation: none; }
}

/* The last two chapters become a separate, nav-free birthday finale. */
.finale-section[hidden] { display:none !important; }
.finale-section:not([hidden]) { position:fixed; z-index:100; inset:0; display:flex; flex-direction:column; align-items:center; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; isolation:isolate; background:radial-gradient(ellipse at 50% 24%,rgba(104,57,119,.36),transparent 42%),radial-gradient(ellipse at 15% 76%,rgba(141,80,57,.15),transparent 36%),linear-gradient(150deg,#080a14 0%,#131126 48%,#090c15 100%); animation:finale-enter .72s cubic-bezier(.2,.7,.2,1) both; }
body.finale-is-open { overflow:hidden; }
body.finale-is-open .site-header,body.finale-is-open main { display:none; }
.finale-section::before { position:fixed; z-index:-1; inset:0; background-image:radial-gradient(1px 1px at 12% 22%,rgba(255,220,120,.75) 98%,transparent),radial-gradient(1px 1px at 81% 18%,rgba(169,220,255,.72) 98%,transparent),radial-gradient(1.5px 1.5px at 68% 82%,rgba(242,164,206,.8) 98%,transparent),radial-gradient(1px 1px at 31% 76%,rgba(169,229,183,.72) 98%,transparent); background-size:270px 230px,310px 280px,380px 330px,240px 300px; content:""; opacity:.42; animation:finale-stars 35s linear infinite; pointer-events:none; }
.finale-glow { position:fixed; z-index:-1; width:min(54vw,650px); aspect-ratio:1; border:1px solid rgba(245,181,216,.12); border-radius:50%; box-shadow:0 0 0 42px rgba(245,181,216,.025),0 0 0 94px rgba(255,214,110,.02); pointer-events:none; animation:finale-orbit 38s linear infinite; }
.finale-glow-one { top:-29%; left:-14%; }
.finale-glow-two { right:-20%; bottom:-36%; width:min(47vw,560px); border-color:rgba(169,229,183,.13); animation-direction:reverse; animation-duration:46s; }
.finale-confetti { position:fixed; z-index:-1; inset:0; overflow:hidden; pointer-events:none; }
.finale-confetti i { position:absolute; top:-8vh; color:#ffd66e; font-size:clamp(14px,2vw,24px); font-style:normal; text-shadow:0 0 16px currentColor; opacity:.72; animation:finale-fall 13s linear infinite; }
.finale-confetti i:nth-child(1) { left:9%; color:#a9dcff; animation-delay:-8s; }
.finale-confetti i:nth-child(2) { left:24%; color:#f2a4ce; animation-delay:-2s; animation-duration:16s; }
.finale-confetti i:nth-child(3) { left:39%; color:#a9e5b7; animation-delay:-11s; animation-duration:19s; }
.finale-confetti i:nth-child(4) { left:58%; animation-delay:-5s; animation-duration:15s; }
.finale-confetti i:nth-child(5) { left:73%; color:#c2b1ff; animation-delay:-13s; animation-duration:17s; }
.finale-confetti i:nth-child(6) { left:88%; color:#a9dcff; animation-delay:-4s; animation-duration:20s; }
.finale-confetti i:nth-child(7) { left:96%; color:#f2a4ce; animation-delay:-9s; animation-duration:18s; }
.finale-confetti i:nth-child(8) { left:49%; color:#a9e5b7; animation-delay:-1s; animation-duration:14s; }
.finale-section .wish-section { width:min(100%,1440px); min-height:100vh; flex:0 0 auto; padding:clamp(54px,9vh,100px) clamp(24px,7vw,100px) 34px; overflow:visible; background:radial-gradient(ellipse at 50% 36%,rgba(103,60,100,.19),transparent 45%); }
.finale-intro { display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:34px; }
.finale-kicker { display:flex; align-items:center; gap:13px; margin:0; color:#ffd66e; font:700 9px/1.5 "Manrope",var(--sans); letter-spacing:.3em; }
.finale-kicker i { width:34px; height:1px; background:linear-gradient(90deg,transparent,#ffd66e); }
.finale-kicker i:last-child { transform:rotate(180deg); }
.finale-chapter { color:#91a1ba; font:700 7px/1.5 "Manrope",var(--sans); letter-spacing:.24em; }
.finale-section .wish-section > .eyebrow { margin:0 0 12px; color:#f2a4ce; font:600 9px/1.9 "Manrope",var(--sans); letter-spacing:.19em; }
.finale-section .wish-section h2 { margin:0; text-shadow:0 0 44px rgba(242,164,206,.16); }
.finale-section .wish-section h2 .pink { color:#ffd66e; }
.finale-section .wish-subtitle { margin:16px 0 9px; color:#c0b9cb; }
.finale-section .cake { margin-top:6px; }
.finale-section .wish-actions .pill { border-color:rgba(255,214,110,.55); color:#ffe9b4; background:rgba(255,214,110,.055); }
.finale-section .wish-actions .pill:hover { background:#ffd66e; color:#15111c; }
.finale-section .wish-hint { color:#aaa9bc; }
.finale-section .closing-invite { margin-top:13px; color:#a9e5b7; }
.finale-section .closing-message { margin-top:clamp(55px,10vh,105px); padding:72px clamp(20px,5vw,60px) 58px; border-top-color:rgba(255,214,110,.48); border-bottom-color:rgba(169,229,183,.32); }
.finale-section .closing-message::before { background:#ffd66e; box-shadow:0 0 16px rgba(255,214,110,.9); }
.finale-section .closing-message::after { background:#a9e5b7; box-shadow:0 0 16px rgba(169,229,183,.75); }
.finale-section .closing-message h2 .pink { color:#f2a4ce; }
.finale-section .closing-message .closing-signature { color:#ffd66e; }
.finale-section .closing-message .closing-signature em { color:#a9dcff; }
.finale-section .closing-message .text-button { display:inline-flex; align-items:center; gap:10px; padding:0; border:0; background:none; color:#a9e5b7; cursor:pointer; }
.finale-section .site-footer { margin-top:38px; color:#8f8da3; }
.finale-section .site-footer span { padding-left:8px; color:#ffd66e; }

@media (max-width:760px) {
.finale-section .wish-section { padding:52px 23px 28px; }
  .finale-intro { margin-bottom:27px; }
  .finale-section .closing-message { margin-top:68px; padding:48px 0 38px; }
  .story-ending { margin:36px 0 0; padding:18px; }
  .story-ending p { font-size:17px; }
  .finale-return { margin-bottom:28px; }
}
@media (prefers-reduced-motion: reduce) {
  .finale-confetti,.finale-glow,.finale-section::before { animation:none; }
}

/* A warmer, more celebratory stage for the birthday wish. */
.finale-section .wish-section { position:relative; isolation:isolate; background:radial-gradient(ellipse at 50% 61%,rgba(255,190,95,.13),transparent 34%),radial-gradient(ellipse at 50% 20%,rgba(140,91,173,.22),transparent 48%),linear-gradient(155deg,rgba(13,17,37,.97),rgba(29,18,43,.94) 53%,rgba(11,22,34,.97)); }
.finale-section .wish-section::before { position:absolute; z-index:-1; inset:0; background:radial-gradient(ellipse at 50% 64%,rgba(255,214,110,.12),transparent 27%),radial-gradient(ellipse at 18% 53%,rgba(242,164,206,.075),transparent 25%),radial-gradient(ellipse at 82% 53%,rgba(130,220,207,.075),transparent 25%); content:""; animation:wish-stage-breathe 8s ease-in-out infinite alternate; pointer-events:none; }
.finale-section .wish-section > :not(.finale-bouquets) { position:relative; z-index:1; }
.finale-bouquets { position:absolute; z-index:0; inset:0; overflow:hidden; pointer-events:none; }
.flower-bouquet { position:absolute; top:43%; width:clamp(145px,18vw,220px); height:260px; opacity:.55; filter:drop-shadow(0 0 20px rgba(242,164,206,.18)); animation:bouquet-sway 6s ease-in-out infinite; }
.bouquet-left { left:3.5%; transform-origin:50% 88%; }
.bouquet-right { right:3.5%; transform:scaleX(-1); transform-origin:50% 88%; animation-delay:-2.7s; }
.flower-bouquet::before { position:absolute; right:15%; bottom:4px; left:16%; height:155px; background:linear-gradient(73deg,transparent 0 34%,rgba(126,202,157,.65) 35% 37%,transparent 38% 50%,rgba(126,202,157,.52) 51% 53%,transparent 54% 67%,rgba(126,202,157,.6) 68% 70%,transparent 71%),linear-gradient(105deg,transparent 0 45%,rgba(169,220,255,.4) 46% 48%,transparent 49%); content:""; }
.flower-bouquet::after { position:absolute; bottom:18px; left:41%; width:34px; height:20px; border:2px solid rgba(255,220,120,.75); border-radius:4px 4px 12px 12px; background:linear-gradient(135deg,rgba(242,164,206,.7),rgba(255,220,120,.36)); box-shadow:0 0 18px rgba(255,220,120,.25); content:""; transform:rotate(-8deg); }
.flower-bouquet i { position:absolute; z-index:1; display:grid; width:42px; height:42px; place-items:center; color:#ffcae2; font-size:39px; font-style:normal; line-height:1; text-shadow:0 0 14px currentColor; animation:bouquet-bloom 3.8s ease-in-out infinite; }
.flower-bouquet i:nth-child(1) { top:12px; left:35%; color:#ffd66e; font-size:45px; }
.flower-bouquet i:nth-child(2) { top:38px; left:9%; color:#f3a9d2; animation-delay:-.8s; }
.flower-bouquet i:nth-child(3) { top:48px; right:8%; color:#9ed9f0; font-size:36px; animation-delay:-1.5s; }
.flower-bouquet i:nth-child(4) { top:78px; left:29%; color:#c2b1ff; font-size:33px; animation-delay:-2.1s; }
.flower-bouquet i:nth-child(5) { top:88px; right:22%; color:#a9e5b7; font-size:31px; animation-delay:-.4s; }
.finale-section .cake { z-index:2; width:min(330px,84vw); height:292px; margin-top:10px; isolation:isolate; filter:drop-shadow(0 20px 35px rgba(0,0,0,.38)); }
.finale-section .cake::before { position:absolute; z-index:-1; top:10%; right:-16%; bottom:3%; left:-16%; border:1px solid rgba(255,220,120,.14); border-radius:50%; background:radial-gradient(ellipse,rgba(255,201,108,.16),rgba(242,164,206,.07) 42%,transparent 72%); box-shadow:0 0 0 22px rgba(255,220,120,.025),0 0 0 52px rgba(158,217,240,.025); content:""; animation:cake-aura 4.2s ease-in-out infinite; }
.finale-section .cake::after { position:absolute; z-index:0; right:4%; bottom:20px; left:4%; height:20px; border-radius:50%; background:radial-gradient(ellipse,rgba(255,220,120,.28),rgba(242,164,206,.12) 40%,transparent 72%); content:""; filter:blur(8px); animation:cake-floor-glow 3s ease-in-out infinite alternate; }
.finale-section .cake-upper { bottom:126px; border:1px solid rgba(199,218,255,.62); border-bottom:5px solid rgba(43,45,86,.5); background:linear-gradient(100deg,#6589c1 0%,#aaa0e2 29%,#e59fc6 55%,#8c9fe0 78%,#6178ae 100%); box-shadow:inset 0 4px 12px rgba(255,255,255,.3),inset 0 -13px 18px rgba(47,48,102,.23),0 8px 18px rgba(7,9,25,.32),0 0 22px rgba(169,220,255,.12); }
.finale-section .cake-lower { bottom:45px; border:1px solid rgba(255,226,177,.62); border-bottom:6px solid rgba(103,40,84,.65); background:linear-gradient(100deg,#a84375 0%,#e77da4 21%,#ffc58b 43%,#ed8ea8 64%,#b94d88 84%,#744e9d 100%); box-shadow:inset 0 5px 15px rgba(255,255,255,.3),inset 0 -18px 22px rgba(78,23,71,.23),0 10px 23px rgba(7,9,25,.31),0 0 26px rgba(242,164,206,.12); }
.finale-section .cake-tier::before { background:linear-gradient(180deg,#fff8e6,#ffe3f0 48%,#e8dbff); box-shadow:0 3px 8px rgba(53,34,75,.22),0 0 12px rgba(255,235,194,.32); }
.finale-section .cake-pearls b { width:7px; height:7px; background:#fff1aa; box-shadow:0 0 12px rgba(255,224,138,.85); }
.finale-section .cake-plate { bottom:29px; border-color:rgba(208,237,255,.88); background:linear-gradient(180deg,#f7f0ff,#a5bbdd 56%,#69799f); box-shadow:0 10px 25px rgba(0,0,0,.35),0 0 24px rgba(158,217,240,.24); }
.finale-section .candles { bottom:174px; }
.finale-section .candles span { height:47px; box-shadow:inset 1px 0 rgba(255,255,255,.85),2px 4px 8px rgba(0,0,0,.25),0 0 11px rgba(255,255,255,.12); }
.finale-section .candles i { width:14px; height:19px; box-shadow:0 0 12px 4px rgba(255,211,95,.55),0 0 33px rgba(255,169,70,.48); }
.finale-section .cake-sparkles i { opacity:.78; font-size:19px; }
.finale-section .wish-actions .pill { min-height:46px; border-color:rgba(255,220,120,.7); background:linear-gradient(110deg,rgba(255,214,110,.14),rgba(242,164,206,.1)); box-shadow:0 0 22px rgba(255,214,110,.08); }
.finale-section .wish-actions .pill:hover { transform:translateY(-3px) scale(1.035); box-shadow:0 9px 30px rgba(255,214,110,.2); }
.finale-section .wish-section.is-blown .cake { animation:cake-celebrate 1.1s cubic-bezier(.2,.7,.2,1) both; }
.finale-section .wish-section.is-blown::before { animation:wish-burst 1s ease-out both; }
.finale-section .closing-message { position:relative; }
.love-you-slide { position:relative; isolation:isolate; display:flex; width:100%; min-height:100vh; flex:0 0 auto; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; padding:clamp(70px,11vh,120px) 24px 38px; background:radial-gradient(ellipse at 50% 47%,rgba(176,82,144,.28),transparent 38%),radial-gradient(ellipse at 17% 76%,rgba(255,192,99,.1),transparent 35%),radial-gradient(ellipse at 84% 24%,rgba(99,194,199,.12),transparent 33%),linear-gradient(145deg,#111020,#211329 48%,#0b1721); text-align:center; }
.love-you-slide::before,.love-you-slide::after { position:absolute; z-index:-1; width:min(68vw,770px); aspect-ratio:1; border:1px solid rgba(255,220,120,.18); border-radius:50%; box-shadow:0 0 0 35px rgba(255,220,120,.025),0 0 0 80px rgba(242,164,206,.025); content:""; animation:love-you-orbit 36s linear infinite; }
.love-you-slide::after { width:min(49vw,560px); border-color:rgba(158,217,240,.18); animation-direction:reverse; animation-duration:27s; }
.love-you-orbit { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.love-you-orbit i { position:absolute; top:21%; left:19%; color:#ffd66e; font-size:21px; font-style:normal; text-shadow:0 0 22px currentColor; animation:love-you-spark 3s ease-in-out infinite; }
.love-you-orbit i:nth-child(2) { top:27%; right:20%; left:auto; color:#9ed9f0; animation-delay:-.8s; }
.love-you-orbit i:nth-child(3) { top:auto; bottom:25%; left:25%; color:#a9e5b7; animation-delay:-1.6s; }
.love-you-orbit i:nth-child(4) { top:auto; right:23%; bottom:21%; left:auto; color:#f2a4ce; animation-delay:-2.2s; }
.love-you-kicker { margin:0 0 26px; color:#ffd66e; font:700 10px/1.5 "Manrope",var(--sans); letter-spacing:.34em; animation:final-arrive .8s .15s both; }
.love-you-slide h2 { margin:0; color:#fff7f2; font:600 clamp(100px,20vw,260px)/.68 var(--serif); letter-spacing:-.075em; text-shadow:0 0 55px rgba(242,164,206,.25),0 12px 55px rgba(0,0,0,.3); animation:love-you-title 1.15s cubic-bezier(.2,.7,.2,1) both; }
.love-you-slide h2 em { display:inline-block; padding:.13em .1em .18em 0; color:#f5abd5; font-weight:500; font-style:italic; background:linear-gradient(100deg,#f5abd5,#ffe4a0 48%,#a9dcff 82%,#a9e5b7); background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 0 25px rgba(245,171,213,.2)); }
.love-you-note { max-width:460px; margin:27px 0 0; color:#d1c7d6; font:500 clamp(14px,1.5vw,18px)/1.8 var(--sans); animation:final-arrive .8s .5s both; }
.love-you-again { display:inline-flex; min-height:46px; align-items:center; gap:16px; margin-top:36px; padding:0 22px; border:1px solid rgba(242,164,206,.56); border-radius:999px; background:rgba(18,14,31,.65); color:#f5d8eb; font:700 9px "Manrope",var(--sans); letter-spacing:.13em; text-transform:uppercase; cursor:pointer; transition:transform .25s,border-color .25s,box-shadow .25s,background .25s; animation:final-arrive .8s .7s both; }
.love-you-again:hover { transform:translateY(-3px); border-color:#ffd66e; background:rgba(255,214,110,.1); box-shadow:0 0 28px rgba(255,214,110,.16); }
.love-you-again span { color:#ffd66e; font-size:16px; }
.love-you-slide .site-footer { width:min(100%,1000px); margin-top:clamp(60px,10vh,100px); color:#a5a0b2; }
@keyframes bouquet-sway { 0%,100% { rotate:-2deg; translate:0 0; } 50% { rotate:2deg; translate:0 -8px; } }
@keyframes bouquet-bloom { 0%,100% { scale:.94; filter:brightness(.9); } 50% { scale:1.08; filter:brightness(1.2); } }
@keyframes wish-stage-breathe { from { opacity:.65; scale:.98; } to { opacity:1; scale:1.02; } }
@keyframes cake-aura { 0%,100% { scale:.94; opacity:.62; rotate:-3deg; } 50% { scale:1.04; opacity:1; rotate:3deg; } }
@keyframes cake-floor-glow { from { opacity:.5; scale:.88 1; } to { opacity:1; scale:1.08 1.25; } }
@keyframes wish-burst { 0% { opacity:.45; scale:.92; } 45% { opacity:1; scale:1.04; } 100% { opacity:.7; scale:1; } }
@keyframes love-you-orbit { to { rotate:360deg; } }
@keyframes love-you-spark { 0%,100% { opacity:.5; scale:.75; translate:0 0; } 50% { opacity:1; scale:1.25; translate:0 -8px; } }
@keyframes love-you-title { from { opacity:0; transform:translateY(28px) scale(.94); filter:blur(8px); } to { opacity:1; transform:translateY(0) scale(1); filter:blur(0); } }
@media (max-width:900px) {
  .flower-bouquet { top:48%; opacity:.38; }
  .bouquet-left { left:-2%; }
  .bouquet-right { right:-2%; }
}
@media (max-width:640px) {
  .flower-bouquet { top:55%; width:125px; height:205px; opacity:.28; }
  .flower-bouquet::before { height:115px; }
  .flower-bouquet i { width:32px; height:32px; font-size:29px; }
  .flower-bouquet i:nth-child(1) { font-size:35px; }
  .bouquet-left { left:-27px; }
  .bouquet-right { right:-27px; }
  .finale-section .wish-section { padding:50px 18px 30px; }
  .finale-section .cake { width:min(300px,84vw); }
  .love-you-slide { min-height:88vh; padding:80px 20px 30px; }
  .love-you-slide h2 { font-size:clamp(92px,22vw,150px); }
  .love-you-orbit i:nth-child(1) { left:8%; }
  .love-you-orbit i:nth-child(2) { right:9%; }
}
@media (prefers-reduced-motion:reduce) {
  .flower-bouquet,.flower-bouquet i,.finale-section .wish-section::before,.finale-section .cake::before,.finale-section .cake::after,.love-you-slide::before,.love-you-slide::after,.love-you-orbit i,.love-you-kicker,.love-you-slide h2,.love-you-note,.love-you-again { animation:none; }
}

/* Make the handoff to the birthday finale impossible to miss. */
.story-ending { align-items:center; width:min(100%,870px); margin:58px auto 0; padding:30px 24px 34px; border:1px solid rgba(169,220,255,.28); border-radius:18px; background:radial-gradient(ellipse at 50% 0%,rgba(169,220,255,.14),transparent 58%),linear-gradient(120deg,rgba(169,220,255,.055),rgba(242,164,206,.075),rgba(255,220,120,.055)); box-shadow:0 18px 46px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.035); text-align:center; }
.story-ending > span { color:#a9dcff; font-size:8px; }
.story-ending p { color:#d7d2df; font-size:clamp(18px,2vw,22px); }
.story-finale-button { display:inline-flex; min-width:min(360px,100%); min-height:62px; align-items:center; justify-content:center; gap:20px; margin-top:8px; padding:0 28px; border:1px solid rgba(255,220,120,.82); border-radius:999px; background:linear-gradient(105deg,rgba(169,220,255,.2),rgba(242,164,206,.21) 52%,rgba(255,220,120,.2)); color:#fff3d1; box-shadow:0 0 0 5px rgba(255,220,120,.045),0 9px 28px rgba(0,0,0,.22),0 0 30px rgba(255,220,120,.12); font-size:11px; font-weight:800; letter-spacing:.15em; animation:finale-cta-pulse 3.2s ease-in-out infinite; }
.story-finale-button span { color:#ffdc78; font-size:19px; transition:transform .25s; }
.story-finale-button:hover:not(:disabled) { transform:translateY(-3px) scale(1.025); border-color:#fff0b7; background:linear-gradient(105deg,rgba(169,220,255,.28),rgba(242,164,206,.3) 52%,rgba(255,220,120,.3)); color:#fff; box-shadow:0 0 0 7px rgba(255,220,120,.06),0 14px 36px rgba(0,0,0,.27),0 0 40px rgba(255,220,120,.2); }
.story-finale-button:hover:not(:disabled) span { transform:translate(4px,-3px); }
.story-finale-button:focus-visible { outline:2px solid #ffdc78; outline-offset:6px; }
@keyframes finale-cta-pulse { 0%,100% { box-shadow:0 0 0 5px rgba(255,220,120,.04),0 9px 28px rgba(0,0,0,.22),0 0 24px rgba(255,220,120,.09); } 50% { box-shadow:0 0 0 8px rgba(255,220,120,.075),0 11px 32px rgba(0,0,0,.24),0 0 36px rgba(255,220,120,.17); } }
@media (max-width:700px) { .story-ending { margin-top:38px; padding:24px 17px 27px; } .story-finale-button { min-width:min(330px,100%); min-height:58px; } }
@media (prefers-reduced-motion:reduce) { .story-finale-button { animation:none; } }

/* Let the photographs stay bright; keep hover accents on the frame and caption only. */
.gallery-section .photo-card { --gallery-accent:#ffd66e; overflow:hidden; border-color:color-mix(in srgb,var(--gallery-accent) 35%,rgba(255,255,255,.12)); box-shadow:0 5px 18px rgba(0,0,0,.18); }
.gallery-section .photo-card:nth-child(6n + 2) { --gallery-accent:#9ed9f0; }
.gallery-section .photo-card:nth-child(6n + 3) { --gallery-accent:#a9e5b7; }
.gallery-section .photo-card:nth-child(6n + 4) { --gallery-accent:#f2a4ce; }
.gallery-section .photo-card:nth-child(6n + 5) { --gallery-accent:#c2b1ff; }
.gallery-section .photo-card:nth-child(6n) { --gallery-accent:#ffb98a; }
.gallery-section .photo-card img { filter:saturate(1.035) contrast(1.015); transition:filter .35s ease; }
.gallery-section .photo-card::before { display:none; }
.gallery-section .photo-card:hover,.gallery-section .photo-card:focus-visible { transform:translateY(-4px) rotate(var(--gallery-lift,0deg)); border-color:color-mix(in srgb,var(--gallery-accent) 78%,white); box-shadow:0 16px 38px color-mix(in srgb,var(--gallery-accent) 20%,transparent),0 10px 24px rgba(0,0,0,.3); }
.gallery-section .photo-card:hover img,.gallery-section .photo-card:focus-visible img { filter:saturate(1.075) contrast(1.025); transform:none; }
.gallery-section .photo-card:hover::before,.gallery-section .photo-card:focus-visible::before { animation:none; }
.gallery-section .photo-card figcaption { right:12px; bottom:12px; left:12px; gap:4px; padding:0; border:0; border-radius:0; background:none; box-shadow:none; text-shadow:0 1px 5px rgba(0,0,0,.9),0 0 12px rgba(0,0,0,.75); backdrop-filter:none; }
.gallery-section .photo-card figcaption strong { min-height:0; font-size:clamp(15px,1.55vw,19px); line-height:1.08; }
.gallery-section .photo-card.reveal.is-visible { animation:gallery-card-arrive .62s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0s) both; }
@keyframes gallery-card-arrive { from { opacity:0; translate:0 16px; scale:.985; } to { opacity:1; translate:0 0; scale:1; } }
@media (max-width:700px) {
  .gallery-section .photo-card figcaption { right:10px; bottom:10px; left:10px; padding:0; }
  .gallery-section .photo-card figcaption strong { font-size:15px; }
}

/* Final birthday postcard: keep its full bouquet visible in a framed portrait. */
.postcard-theme-19 {
  --card-bg:#102936; --card-ink:#fff8e9; --card-accent:#f4ca73;
  min-height:410px; justify-content:center; padding:56px clamp(25px,4vw,46px); padding-right:clamp(215px,43%,255px);
  overflow:hidden; border:1px solid rgba(255,222,143,.8); border-radius:7px 26px 7px 26px;
  background:radial-gradient(ellipse at 14% 8%,rgba(101,208,207,.2),transparent 38%),radial-gradient(ellipse at 43% 100%,rgba(223,112,143,.2),transparent 43%),linear-gradient(132deg,#0c1b2b 2%,#174253 58%,#41314d);
  box-shadow:0 26px 85px rgba(9,25,38,.42),0 0 35px rgba(255,215,125,.22),inset 0 0 0 1px rgba(255,255,255,.09);
  animation:birthday-postcard-glow-new 4.8s ease-in-out infinite alternate;
}
.postcard-theme-19::before { inset:10px; border:1px solid rgba(255,233,177,.55); border-radius:3px 19px 3px 19px; box-shadow:inset 0 0 0 1px rgba(130,221,219,.2); }
.postcard-theme-19::after { position:absolute; z-index:0; inset:0; background:linear-gradient(112deg,transparent 30%,rgba(255,255,255,.11) 46%,rgba(255,220,148,.06) 53%,transparent 69%); background-size:230% 100%; content:""; pointer-events:none; animation:birthday-postcard-sheen 7s ease-in-out infinite; }
.postcard-theme-19 .postcard-art { top:50%; right:21px; bottom:auto; left:auto; width:41%; height:auto; aspect-ratio:.79; padding:6px; overflow:hidden; transform:translateY(-50%) rotate(1.5deg); border:1px solid rgba(255,242,208,.9); border-radius:5px 15px 5px 15px; background:linear-gradient(150deg,#fff5db,#f5d8c7); box-shadow:0 15px 34px rgba(0,0,0,.33),0 0 0 5px rgba(255,235,190,.1); opacity:1; mix-blend-mode:normal; }
.postcard-theme-19 .postcard-art img { width:100%; height:100%; object-fit:contain; object-position:center; border-radius:2px 10px 2px 10px; background:#f4eee2; filter:saturate(1.06) contrast(1.02); transform:scale(1); }
.postcard-theme-19 .postcard-art::after { background:linear-gradient(150deg,rgba(255,222,142,.035),rgba(49,121,133,.035)); }
.postcard-theme-19 .postcard-art.is-arriving img { animation:birthday-bouquet-arrive .9s cubic-bezier(.18,.78,.24,1) both; }
.postcard-theme-19 .postmark { top:18px; right:auto; left:22px; z-index:2; width:47px; height:47px; border:1px solid rgba(255,231,158,.82); background:linear-gradient(145deg,#d07c78,#efb869); color:#142f40; font:900 12px "Manrope",var(--sans); box-shadow:0 0 20px rgba(255,216,126,.27); }
.postcard-theme-19 .postcard-label { margin:4px 0 12px; color:#8fe1dc; font:800 8px "Manrope",var(--sans); letter-spacing:.2em; }
.postcard-theme-19 h3 { min-height:0; max-width:100%; color:#fff8e9; font:700 clamp(30px,3.5vw,42px)/1.04 "Cormorant Garamond",var(--serif); text-shadow:0 2px 18px rgba(71,208,211,.18); }
.postcard-theme-19 .postcard-signoff { align-self:flex-start; margin-top:16px; color:#ffcf85; font:italic 20px "Parisienne",cursive; }
.postcard-section .postcard-theme-19:hover { border-color:#fff0bd; box-shadow:0 30px 96px rgba(9,25,38,.5),0 0 48px rgba(255,211,112,.36),inset 0 0 0 1px rgba(255,255,255,.15); }
.postcard-section .postcard-theme-19:hover .postcard-art { opacity:1; }
.postcard-section .postcard-theme-19:hover .postcard-art img { transform:scale(1); }
@keyframes birthday-postcard-glow-new { from { box-shadow:0 24px 76px rgba(9,25,38,.38),0 0 22px rgba(255,215,125,.14),inset 0 0 0 1px rgba(255,255,255,.07); } to { box-shadow:0 29px 88px rgba(9,25,38,.49),0 0 42px rgba(255,215,125,.3),inset 0 0 0 1px rgba(255,255,255,.15); } }
@keyframes birthday-postcard-sheen { 0%,20% { background-position:150% 0; } 58%,100% { background-position:-100% 0; } }
@keyframes birthday-bouquet-arrive { from { opacity:.58; transform:scale(.96) translateY(9px); filter:blur(3px) saturate(.8); } to { opacity:1; transform:scale(1); filter:blur(0) saturate(1.06); } }
@media (max-width:700px) {
  .postcard-theme-19 { min-height:575px; align-items:stretch; justify-content:flex-start; padding:62px 25px 220px; }
  .postcard-theme-19 .postcard-art { top:auto; right:50%; bottom:13px; width:min(56%,210px); transform:translateX(50%) rotate(1.5deg); }
  .postcard-theme-19 .postcard-label { margin-top:10px; }
  .postcard-theme-19 h3 { font-size:clamp(31px,8vw,39px); }
}
@media (prefers-reduced-motion:reduce) { .postcard-theme-19,.postcard-theme-19::after,.postcard-theme-19 .postcard-art.is-arriving img { animation:none; } }

/* Birthday 19 uses the supplied roses as an atmospheric full-card backdrop. */
.postcard-theme-19 {
  --card-bg:#4a1025;
  --card-ink:#fff8f3;
  --card-accent:#ffe0a0;
  border-color:rgba(255,221,167,.86);
  background:linear-gradient(120deg,#791d38 0%,#621b39 46%,#3b1730 100%);
  box-shadow:0 28px 82px rgba(0,0,0,.42),0 0 42px rgba(238,91,132,.24),inset 0 1px rgba(255,255,255,.22);
}
.postcard-theme-19::before { border-color:rgba(255,232,217,.7); box-shadow:inset 0 0 0 1px rgba(255,216,160,.3); }
.postcard-theme-19::after { background:linear-gradient(105deg,rgba(82,8,32,.67),rgba(102,18,47,.38) 48%,rgba(49,12,36,.65)),linear-gradient(125deg,rgba(240,89,117,.16),transparent 55%,rgba(255,211,130,.18)); background-size:100% 100%; animation:birthday-postcard-sheen 8s ease-in-out infinite; }
.postcard-theme-19 .postcard-art { inset:0; z-index:0; width:auto; height:auto; aspect-ratio:auto; padding:0; border:0; border-radius:inherit; background:transparent; box-shadow:none; opacity:.9; mix-blend-mode:normal; transform:none; }
.postcard-theme-19 .postcard-art img { width:100%; height:100%; object-fit:cover; object-position:center 47%; border-radius:inherit; background:transparent; filter:brightness(.55) saturate(.82) contrast(1.08); transform:scale(1.035); transition:transform 1.1s cubic-bezier(.2,.75,.2,1),filter .6s ease; }
.postcard-theme-19 .postcard-art::after { background:linear-gradient(90deg,rgba(76,11,33,.5),rgba(77,12,36,.25) 55%,rgba(49,13,36,.45)),linear-gradient(0deg,rgba(88,14,36,.43),transparent 58%,rgba(96,18,46,.28)); }
.postcard-theme-19 .postcard-art.is-arriving img { animation:birthday-bouquet-arrive .95s cubic-bezier(.18,.78,.24,1) both; }
.postcard-theme-19 .postmark,.postcard-theme-19 .postcard-label,.postcard-theme-19 h3,.postcard-theme-19 .postcard-signoff { position:relative; z-index:1; }
.postcard-theme-19 .postmark { border-color:rgba(255,239,208,.86); background:linear-gradient(145deg,#fff0db,#ffca8f); color:#751c36; box-shadow:0 0 22px rgba(255,202,143,.34); }
.postcard-theme-19 .postcard-label { color:#ffd5df; text-shadow:0 1px 10px rgba(45,0,20,.7); }
.postcard-theme-19 h3 { color:#fffaf6; text-shadow:0 2px 18px rgba(48,0,20,.72),0 0 24px rgba(255,206,151,.2); }
.postcard-theme-19 .postcard-signoff { color:#ffe0a0; text-shadow:0 1px 12px rgba(50,0,18,.75); }
.postcard-section .postcard-theme-19:hover .postcard-art { opacity:1; }
.postcard-section .postcard-theme-19:hover .postcard-art img { transform:scale(1.075); filter:brightness(.62) saturate(.92) contrast(1.08); }
@media (max-width:700px) {
  .postcard-theme-19 { min-height:575px; padding:62px 25px 40px; }
  .postcard-theme-19 .postcard-art { inset:0; width:auto; height:auto; }
}

/* The present-day birthday gets a distinct jewel-toned finale and a complete bouquet portrait. */
.postcard-theme-19 {
  --card-bg:#102936;
  --card-ink:#fff8e9;
  --card-accent:#f4ca73;
  min-height:410px;
  justify-content:center;
  padding:56px clamp(25px,4vw,46px);
  padding-right:clamp(215px,43%,255px);
  overflow:hidden;
  border:1px solid rgba(255,222,143,.8);
  border-radius:7px 26px 7px 26px;
  background:radial-gradient(ellipse at 14% 8%,rgba(101,208,207,.2),transparent 38%),radial-gradient(ellipse at 43% 100%,rgba(223,112,143,.2),transparent 43%),linear-gradient(132deg,#0c1b2b 2%,#174253 58%,#41314d);
  box-shadow:0 26px 85px rgba(9,25,38,.42),0 0 35px rgba(255,215,125,.22),inset 0 0 0 1px rgba(255,255,255,.09);
  animation:birthday-postcard-glow-new 4.8s ease-in-out infinite alternate;
}
.postcard-theme-19::before { inset:10px; border:1px solid rgba(255,233,177,.55); border-radius:3px 19px 3px 19px; box-shadow:inset 0 0 0 1px rgba(130,221,219,.2); }
.postcard-theme-19::after { position:absolute; z-index:0; inset:0; background:linear-gradient(112deg,transparent 30%,rgba(255,255,255,.11) 46%,rgba(255,220,148,.06) 53%,transparent 69%); background-size:230% 100%; content:""; pointer-events:none; animation:birthday-postcard-sheen 7s ease-in-out infinite; }
.postcard-theme-19 .postcard-art { top:50%; right:21px; bottom:auto; left:auto; width:41%; height:auto; aspect-ratio:.79; padding:6px; overflow:hidden; transform:translateY(-50%) rotate(1.5deg); border:1px solid rgba(255,242,208,.9); border-radius:5px 15px 5px 15px; background:linear-gradient(150deg,#fff5db,#f5d8c7); box-shadow:0 15px 34px rgba(0,0,0,.33),0 0 0 5px rgba(255,235,190,.1); opacity:1; mix-blend-mode:normal; }
.postcard-theme-19 .postcard-art img { width:100%; height:100%; object-fit:contain; object-position:center; border-radius:2px 10px 2px 10px; background:#f4eee2; filter:saturate(1.06) contrast(1.02); transform:scale(1); }
.postcard-theme-19 .postcard-art::after { background:linear-gradient(150deg,rgba(255,222,142,.035),rgba(49,121,133,.035)); }
.postcard-theme-19 .postcard-art.is-arriving img { animation:birthday-bouquet-arrive .9s cubic-bezier(.18,.78,.24,1) both; }
.postcard-theme-19 .postmark { top:18px; right:auto; left:22px; z-index:2; width:47px; height:47px; border:1px solid rgba(255,231,158,.82); background:linear-gradient(145deg,#d07c78,#efb869); color:#142f40; font:900 12px "Manrope",var(--sans); box-shadow:0 0 20px rgba(255,216,126,.27); }
.postcard-theme-19 .postcard-label { margin:4px 0 12px; color:#8fe1dc; font:800 8px "Manrope",var(--sans); letter-spacing:.2em; }
.postcard-theme-19 h3 { min-height:0; max-width:100%; color:#fff8e9; font:700 clamp(30px,3.5vw,42px)/1.04 "Cormorant Garamond",var(--serif); text-shadow:0 2px 18px rgba(71,208,211,.18); }
.postcard-theme-19 .postcard-signoff { align-self:flex-start; margin-top:16px; color:#ffcf85; font:italic 20px "Parisienne",cursive; }
.postcard-section .postcard-theme-19:hover { border-color:#fff0bd; box-shadow:0 30px 96px rgba(9,25,38,.5),0 0 48px rgba(255,211,112,.36),inset 0 0 0 1px rgba(255,255,255,.15); }
@keyframes birthday-postcard-glow-new { from { box-shadow:0 24px 76px rgba(9,25,38,.38),0 0 22px rgba(255,215,125,.14),inset 0 0 0 1px rgba(255,255,255,.07); } to { box-shadow:0 29px 88px rgba(9,25,38,.49),0 0 42px rgba(255,215,125,.3),inset 0 0 0 1px rgba(255,255,255,.15); } }
@keyframes birthday-postcard-sheen { 0%,20% { background-position:150% 0; } 58%,100% { background-position:-100% 0; } }
@keyframes birthday-bouquet-arrive { from { opacity:.58; transform:scale(.96) translateY(9px); filter:blur(3px) saturate(.8); } to { opacity:1; transform:scale(1); filter:blur(0) saturate(1.06); } }
@media (max-width:700px) {
  .postcard-theme-19 { min-height:575px; align-items:stretch; justify-content:flex-start; padding:62px 25px 220px; }
  .postcard-theme-19 .postcard-art { top:auto; right:50%; bottom:13px; width:min(56%,210px); transform:translateX(50%) rotate(1.5deg); }
  .postcard-theme-19 .postcard-label { margin-top:10px; }
  .postcard-theme-19 h3 { font-size:clamp(31px,8vw,39px); }
}
@media (prefers-reduced-motion:reduce) { .postcard-theme-19,.postcard-theme-19::after,.postcard-theme-19 .postcard-art.is-arriving img { animation:none; } }

/* Each birthday postcard carries its flower photograph as a soft print layer. */
.postcard-display { isolation:isolate; }
.postcard { z-index:1; }
.postcard-art { position:absolute; z-index:0; inset:0; overflow:hidden; pointer-events:none; opacity:.28; mix-blend-mode:multiply; transition:opacity .45s ease; }
.postcard-art img { display:block; width:100%; height:100%; object-fit:cover; filter:saturate(.86) contrast(.94); transform:scale(1.045); transition:transform .9s cubic-bezier(.2,.75,.2,1),filter .6s ease; }
.postcard-art::after { position:absolute; inset:0; background:linear-gradient(105deg,color-mix(in srgb,var(--card-bg) 52%,transparent),color-mix(in srgb,var(--card-bg) 28%,transparent) 58%,color-mix(in srgb,var(--card-bg) 42%,transparent)); content:""; }
.postcard-art.is-missing { display:none; }
.postcard-art.is-arriving img { animation:postcard-photo-arrive .74s cubic-bezier(.18,.78,.24,1) both; }
.postcard:hover .postcard-art { opacity:.36; }
.postcard:hover .postcard-art img { transform:scale(1.085); filter:saturate(1.02) contrast(.98); }
@keyframes postcard-photo-arrive { from { opacity:.52; transform:scale(1.12) translateX(14px); filter:blur(3px) saturate(.7); } to { opacity:1; transform:scale(1.045) translateX(0); filter:blur(0) saturate(.86); } }
.postcard-theme-2 .postcard-art img,.postcard-theme-8 .postcard-art img { object-position:50% 44%; }
.postcard-theme-3 .postcard-art img,.postcard-theme-7 .postcard-art img,.postcard-theme-14 .postcard-art img { object-position:50% 38%; }
.postcard-theme-5 .postcard-art img,.postcard-theme-11 .postcard-art img,.postcard-theme-16 .postcard-art img { object-position:50% 46%; }
.postcard-theme-10 .postcard-art { opacity:.17; mix-blend-mode:screen; }
.postcard-theme-10 .postcard-art::after { background:linear-gradient(100deg,rgba(8,12,25,.62),rgba(8,12,25,.22) 62%,rgba(8,12,25,.4)); }
.postcard-theme-10:hover .postcard-art { opacity:.23; }
.postcard-theme-19 .postcard-art { opacity:.2; mix-blend-mode:soft-light; }
.postcard-download { display:inline-flex; min-height:34px; align-items:center; justify-content:center; gap:7px; border:1px solid rgba(158,217,240,.44); border-radius:999px; padding:0 12px; background:rgba(14,27,40,.72); color:#c9eff8; font:800 8px "Manrope",var(--sans); letter-spacing:.08em; text-transform:uppercase; cursor:pointer; transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease; }
.postcard-download span { font-size:14px; }
.postcard-download:hover:not(:disabled) { transform:translateY(-2px); border-color:#a8e5f4; background:rgba(24,52,65,.92); box-shadow:0 7px 20px rgba(93,190,218,.17); }
.postcard-download:active:not(:disabled) { transform:scale(.96); }
.postcard-download:focus-visible { outline:2px solid #a8e5f4; outline-offset:3px; }
.postcard-download:disabled { cursor:wait; opacity:.75; }
.postcard-controls { flex-wrap:wrap; }
@media (max-width:700px) { .postcard-controls { justify-content:center; gap:12px 18px; } }
@media (prefers-reduced-motion:reduce) { .postcard-art.is-arriving img { animation:none; } .postcard-art,.postcard-art img,.postcard-download { transition:none; } }
@media (prefers-reduced-motion:reduce) {
  .gallery-section .photo-card.reveal.is-visible { animation:none; }
  .gallery-section .photo-card,.gallery-section .photo-card img,.gallery-section .photo-card figcaption { transition:none; }
}

/* A brighter, more playful look for the four quiz rounds. */
.quiz-section { --section-accent:#f3a8d2; }
.quiz-panel { position:relative; isolation:isolate; overflow:hidden; border-color:rgba(209,177,255,.3); background:radial-gradient(ellipse at 5% 0%,rgba(255,214,110,.11),transparent 31%),radial-gradient(ellipse at 94% 12%,rgba(242,164,206,.15),transparent 33%),radial-gradient(ellipse at 62% 100%,rgba(119,164,255,.13),transparent 38%),linear-gradient(125deg,rgba(35,31,70,.94),rgba(17,22,46,.94) 57%,rgba(29,22,52,.92)); box-shadow:0 22px 65px rgba(0,0,0,.2),inset 0 0 70px rgba(194,177,255,.045); }
.quiz-panel::before,.quiz-panel::after { position:absolute; z-index:-1; width:190px; aspect-ratio:1; border:1px solid rgba(255,214,110,.16); border-radius:50%; content:""; pointer-events:none; animation:quiz-orbit-drift 12s ease-in-out infinite; }
.quiz-panel::before { top:-115px; left:32%; box-shadow:0 0 0 20px rgba(255,214,110,.025),0 0 0 43px rgba(242,164,206,.025); }
.quiz-panel::after { right:-115px; bottom:-127px; border-color:rgba(169,220,255,.19); animation-delay:-6s; }
.quiz-intro { position:relative; }
.quiz-intro .sparkle { color:#ffe07a; text-shadow:0 0 18px rgba(255,224,122,.55); animation:quiz-spark-bop 2.8s ease-in-out infinite; }
.quiz-intro .eyebrow { color:#f4a6d2; }
.quiz-intro h2 em { color:#f5abd5; text-shadow:0 0 26px rgba(245,171,213,.14); }
.quiz-intro .section-note { color:#bec8dc; }
.quiz-dots i { width:7px; height:7px; background:#a9dcff; box-shadow:0 0 13px rgba(169,220,255,.7); animation:quiz-dot-pop 2.5s ease-in-out infinite; }
.quiz-dots i:nth-child(2) { background:#f2a4ce; box-shadow:0 0 13px rgba(242,164,206,.65); animation-delay:-.3s; }
.quiz-dots i:nth-child(3) { background:#ffd66e; box-shadow:0 0 13px rgba(255,214,110,.65); animation-delay:-.6s; }
.quiz-dots i:nth-child(4) { background:#a9e5b7; box-shadow:0 0 13px rgba(169,229,183,.65); animation-delay:-.9s; }
.quiz-dots i:nth-child(5) { background:#c2b1ff; box-shadow:0 0 13px rgba(194,177,255,.65); animation-delay:-1.2s; }
.quiz-dots i:nth-child(6) { background:#ff9b80; box-shadow:0 0 13px rgba(255,155,128,.65); animation-delay:-1.5s; }
.quiz-round { border-color:color-mix(in srgb,var(--round-accent) 28%,rgba(199,195,224,.1)); background:linear-gradient(145deg,color-mix(in srgb,var(--round-accent) 8%,rgba(9,12,25,.82)),rgba(9,12,25,.76)); }
.quiz-round > span { color:var(--round-accent); }
.quiz-round > b { color:#f0eff8; }
.quiz-round > small { color:color-mix(in srgb,var(--round-accent) 72%,#9aa4b9); }
.quiz-round:nth-child(1) { --round-accent:#8bdcff; }
.quiz-round:nth-child(2) { --round-accent:#ff9ed1; }
.quiz-round:nth-child(3) { --round-accent:#8be6ac; }
.quiz-round:nth-child(4) { --round-accent:#ffd35f; }
.quiz-round:hover { border-color:var(--round-accent); box-shadow:0 8px 22px color-mix(in srgb,var(--round-accent) 13%,transparent); }
.quiz-round.is-active { border-color:var(--round-accent); background:linear-gradient(145deg,color-mix(in srgb,var(--round-accent) 22%,rgba(12,15,30,.9)),color-mix(in srgb,var(--round-accent) 7%,rgba(12,15,30,.94))); box-shadow:inset 0 0 24px color-mix(in srgb,var(--round-accent) 12%,transparent),0 0 19px color-mix(in srgb,var(--round-accent) 17%,transparent); }
.quiz-round.is-active > span,.quiz-round.is-active > b { color:#fff; }
.quiz-round:active { transform:scale(.97); }
.quiz-content .quiz-kind-label { color:#ffd66e; }
.quiz-progress { color:#c0c8db; }
.quiz-progress i { height:4px; overflow:hidden; border-radius:9px; background:rgba(255,255,255,.12); }
.quiz-progress i b { border-radius:inherit; background:linear-gradient(90deg,#8bdcff,#c2a1ff,#ff9ed1,#ffd35f,#8be6ac); box-shadow:0 0 15px rgba(242,164,206,.56); }
.quiz-question { color:#fffafd; text-shadow:0 4px 24px rgba(194,177,255,.12); }
.quiz-answers button { border-color:rgba(191,201,231,.2); background:linear-gradient(110deg,rgba(255,255,255,.065),rgba(255,255,255,.025)); box-shadow:inset 0 1px rgba(255,255,255,.025); }
.quiz-answers button:nth-child(1):not([hidden])::before { border-color:rgba(139,220,255,.43); background:rgba(139,220,255,.13); color:#9ce3ff; }
.quiz-answers button:nth-child(2):not([hidden])::before { border-color:rgba(255,158,209,.43); background:rgba(255,158,209,.12); color:#ffadd8; }
.quiz-answers button:nth-child(3):not([hidden])::before { border-color:rgba(255,211,95,.44); background:rgba(255,211,95,.12); color:#ffdf7f; }
.quiz-answers button:nth-child(4):not([hidden])::before { border-color:rgba(139,230,172,.42); background:rgba(139,230,172,.11); color:#a5efbd; }
.quiz-answers button:hover:not(:disabled) { border-color:rgba(194,177,255,.72); background:linear-gradient(110deg,rgba(194,177,255,.15),rgba(242,164,206,.09),rgba(169,220,255,.06)); box-shadow:0 9px 24px rgba(8,8,22,.26),0 0 20px rgba(194,177,255,.08); }
.quiz-answers.is-this-or-that button { min-height:96px; border-color:rgba(255,158,209,.36); background:radial-gradient(ellipse at 95% 4%,rgba(255,211,95,.13),transparent 48%),linear-gradient(145deg,rgba(112,55,101,.42),rgba(38,38,77,.7)); color:#fff0f8; font-size:clamp(14px,1.5vw,18px); font-weight:800; box-shadow:inset 0 1px rgba(255,255,255,.06),0 9px 24px rgba(0,0,0,.13); }
.quiz-answers.is-this-or-that button:nth-child(2) { border-color:rgba(139,220,255,.35); background:radial-gradient(ellipse at 95% 4%,rgba(139,220,255,.15),transparent 48%),linear-gradient(145deg,rgba(40,75,112,.43),rgba(35,35,74,.75)); }
.quiz-answers.is-this-or-that button:hover:not(:disabled) { transform:translateY(-2px) scale(1.01); border-color:#ffb1d8; background:linear-gradient(145deg,rgba(150,67,129,.56),rgba(45,46,91,.84)); }
.quiz-answers.is-this-or-that button:nth-child(2):hover:not(:disabled) { border-color:#9ce3ff; background:linear-gradient(145deg,rgba(45,103,145,.58),rgba(45,46,91,.84)); }
.quiz-answers.is-this-or-that button.is-chosen { border-color:#ffadd8; background:radial-gradient(ellipse at 95% 4%,rgba(255,211,95,.2),transparent 48%),linear-gradient(145deg,rgba(174,69,137,.67),rgba(53,49,101,.92)); box-shadow:0 0 0 2px rgba(255,158,209,.13),0 12px 32px rgba(0,0,0,.22); }
.quiz-answers.is-this-or-that button:nth-child(2).is-chosen { border-color:#9ce3ff; background:radial-gradient(ellipse at 95% 4%,rgba(139,220,255,.22),transparent 48%),linear-gradient(145deg,rgba(54,114,151,.68),rgba(53,49,101,.92)); }
.quiz-answers button.is-chosen { border-color:#d4b9ff; background:linear-gradient(110deg,rgba(150,111,213,.23),rgba(242,164,206,.13)); color:#fff4ff; }
.quiz-feedback { border-left-color:rgba(194,177,255,.55); background:linear-gradient(100deg,rgba(194,177,255,.075),rgba(255,255,255,.025)); color:#e0dbf1; }
.quiz-feedback.is-correct { border-color:#7be29f; background:linear-gradient(100deg,rgba(71,207,128,.17),rgba(71,207,128,.045)); color:#a5f2bb; }
.quiz-feedback.is-wrong { border-color:#ff8291; background:linear-gradient(100deg,rgba(255,91,109,.16),rgba(255,91,109,.04)); color:#ffb0b7; }
.quiz-feedback.is-choice { border-color:#ffd66e; background:linear-gradient(100deg,rgba(255,214,110,.15),rgba(194,177,255,.055)); color:#ffe9a8; }
.quiz-navigation button { border-color:rgba(194,177,255,.3); background:rgba(194,177,255,.055); color:#e8dcff; }
.quiz-navigation #quiz-next { border-color:rgba(255,158,209,.5); background:linear-gradient(100deg,rgba(242,164,206,.16),rgba(194,177,255,.11)); color:#ffe2f1; }
.quiz-navigation #quiz-next:hover:not(:disabled) { border-color:#ffadd8; background:linear-gradient(100deg,rgba(242,164,206,.24),rgba(194,177,255,.18)); }
@keyframes quiz-orbit-drift { 0%,100% { transform:translateY(0) rotate(0); } 50% { transform:translateY(9px) rotate(8deg); } }
@keyframes quiz-spark-bop { 0%,100% { transform:translateY(0) rotate(0) scale(1); } 50% { transform:translateY(-4px) rotate(12deg) scale(1.12); } }
@keyframes quiz-dot-pop { 0%,100% { transform:translateY(0) scale(.9); opacity:.72; } 50% { transform:translateY(-4px) scale(1.18); opacity:1; } }
@media (prefers-reduced-motion: reduce) {
  .quiz-panel::before,.quiz-panel::after,.quiz-intro .sparkle,.quiz-dots i { animation:none; }
}

/* Each postcard gets its own print layout, lettering, and postal details. */
.postcard { isolation:isolate; overflow:hidden; border:1px solid color-mix(in srgb,var(--card-accent) 32%,transparent); transform-style:preserve-3d; }
.postcard::before { position:absolute; z-index:-1; inset:13px; border:1px solid color-mix(in srgb,var(--card-accent) 16%,transparent); content:""; pointer-events:none; }
.postmark { z-index:1; display:grid; width:43px; height:43px; place-items:center; border:1px solid color-mix(in srgb,var(--card-accent) 48%,transparent); border-radius:50%; background:color-mix(in srgb,var(--card-bg) 80%,transparent); color:var(--card-accent); font-family:var(--serif); font-size:20px; box-shadow:0 3px 12px rgba(0,0,0,.08); }
.postcard-label { position:relative; z-index:1; font-family:"Manrope",var(--sans); font-weight:700; }
.postcard h3 { position:relative; z-index:1; }
.postcard-signoff { position:relative; z-index:1; }
.postcard-theme-1 { min-height:355px; padding:clamp(38px,5vw,62px); border-radius:1px; background:linear-gradient(135deg,rgba(255,255,255,.48),transparent 43%),repeating-linear-gradient(0deg,rgba(114,92,70,.018) 0 1px,transparent 1px 4px),var(--card-bg); font-family:"Cormorant Garamond",var(--serif); }
.postcard-theme-1::before { inset:14px; border-style:double; border-width:3px; }
.postcard-theme-1 .postmark { top:27px; left:auto; right:28px; width:43px; height:52px; border-radius:3px; transform:rotate(5deg); }
.postcard-theme-1 .postcard-label { max-width:76%; font-size:8px; }
.postcard-theme-1 h3 { max-width:92%; font-size:clamp(35px,4vw,50px); }
.postcard-theme-1 .postcard-signoff { align-self:flex-end; font-style:italic; }

.postcard-theme-2 { display:grid; grid-template-columns:minmax(72px,.48fr) 1.52fr; grid-template-rows:auto 1fr auto; align-content:center; gap:10px 24px; padding:48px clamp(30px,4vw,54px); border-radius:18px 4px 18px 4px; background:radial-gradient(circle at 23% 50%,rgba(255,255,255,.42) 0 2px,transparent 3px),linear-gradient(135deg,#d6f0f7,#b8dce9 55%,#d6eaf0); background-size:21px 21px,auto; font-family:Georgia,serif; }
.postcard-theme-2::before { inset:0 auto 0 34%; border:0; border-left:1px dashed rgba(47,91,107,.38); }
.postcard-theme-2 .postmark { top:50%; left:calc(17% - 21px); transform:translateY(-50%); width:58px; height:58px; border:2px dashed #477e91; border-radius:50%; background:rgba(235,249,251,.74); font-size:25px; }
.postcard-theme-2 .postcard-label,.postcard-theme-2 h3,.postcard-theme-2 .postcard-signoff { grid-column:2; }
.postcard-theme-2 .postcard-label { margin:0; color:#477e91; font:800 8px "Manrope",var(--sans); letter-spacing:.24em; }
.postcard-theme-2 h3 { min-height:0; align-self:center; color:#263d4a; font:italic 500 clamp(31px,3.8vw,46px)/1.05 Georgia,serif; }
.postcard-theme-2 .postcard-signoff { justify-self:end; margin:2px 0 0; font:italic 19px "Parisienne",cursive; }

.postcard-theme-3 { align-items:center; justify-content:center; padding:50px clamp(28px,5vw,62px); border:0; border-radius:48% 48% 4px 4px / 9% 9% 4px 4px; background:radial-gradient(ellipse at 50% 46%,rgba(255,244,224,.55),transparent 62%),linear-gradient(155deg,#f7cdb8,#efae9d); text-align:center; }
.postcard-theme-3::before { inset:20px; border:1px solid rgba(167,95,80,.38); border-radius:47% 47% 2px 2px / 9% 9% 2px 2px; }
.postcard-theme-3 .postmark { top:25px; left:50%; transform:translateX(-50%); width:32px; height:32px; border:0; background:transparent; font-size:26px; }
.postcard-theme-3 .postcard-label { margin:48px 0 17px; color:#a75f50; font-size:7px; letter-spacing:.25em; }
.postcard-theme-3 h3 { min-height:0; max-width:100%; color:#573a36; font:400 clamp(41px,5vw,60px)/.98 "Parisienne",cursive; }
.postcard-theme-3 .postcard-signoff { margin-top:18px; font:italic 17px "Cormorant Garamond",var(--serif); }

.postcard-theme-4 { padding:clamp(38px,5vw,60px); border:2px dashed rgba(117,102,157,.55); background:linear-gradient(135deg,rgba(255,255,255,.48),transparent 52%),repeating-linear-gradient(135deg,rgba(117,102,157,.055) 0 2px,transparent 2px 9px),#d8d1f0; font-family:"Courier New",monospace; }
.postcard-theme-4::before { inset:9px; border:1px solid rgba(117,102,157,.24); }
.postcard-theme-4 .postmark { top:22px; left:auto; right:27px; border:1px dashed #75669d; border-radius:50%; background:transparent; }
.postcard-theme-4 .postcard-label { font:700 8px "Courier New",monospace; letter-spacing:.12em; }
.postcard-theme-4 h3 { min-height:0; color:#37314e; font:400 clamp(30px,3.8vw,45px)/1.1 "Courier New",monospace; }
.postcard-theme-4 .postcard-signoff { font:italic 17px "Courier New",monospace; }

.postcard-theme-5 { padding:clamp(42px,5vw,65px) clamp(38px,5.5vw,72px); border:0; border-radius:3px 25px 3px 25px; background:radial-gradient(ellipse at 100% 0%,rgba(255,255,255,.6),transparent 45%),linear-gradient(115deg,#e5f1d5,#c8e1b8); }
.postcard-theme-5::before { inset:0 auto 0 0; width:17px; border:0; background:repeating-linear-gradient(0deg,#719665 0 7px,transparent 7px 14px); opacity:.5; }
.postcard-theme-5 .postmark { top:25px; left:auto; right:30px; border:0; background:transparent; font-size:29px; }
.postcard-theme-5 .postcard-label { color:#64844e; font-size:8px; letter-spacing:.16em; }
.postcard-theme-5 h3 { min-height:0; color:#34452f; font:600 clamp(29px,3.5vw,42px)/1.06 "DM Sans",var(--sans); letter-spacing:-.055em; }
.postcard-theme-5 .postcard-signoff { font:italic 21px "Parisienne",cursive; }

.postcard-theme-6 { padding:clamp(45px,5.6vw,70px); border:1px solid rgba(155,121,49,.36); border-radius:0; background:radial-gradient(circle at 88% 20%,rgba(255,255,255,.44) 0 38px,transparent 39px),linear-gradient(150deg,#f9eaa9,#e9cc6d); }
.postcard-theme-6::before { inset:0; border:0; background:repeating-linear-gradient(90deg,transparent 0 19px,rgba(131,96,34,.045) 19px 20px); }
.postcard-theme-6 .postmark { top:18px; left:auto; right:18px; width:74px; height:74px; border:1px solid rgba(155,121,49,.48); background:rgba(255,249,218,.55); font-size:30px; }
.postcard-theme-6 .postcard-label { color:#8a692a; font-size:8px; }
.postcard-theme-6 h3 { min-height:0; color:#52452b; font:italic 600 clamp(34px,4.1vw,50px)/1 "Cormorant Garamond",var(--serif); }
.postcard-theme-6 .postcard-signoff { font:600 10px "Manrope",var(--sans); letter-spacing:.08em; text-transform:uppercase; }

.postcard-theme-7 { align-items:center; padding:clamp(45px,5vw,62px); border:1px solid rgba(165,87,125,.25); border-radius:8px; background:radial-gradient(circle at 18% 18%,rgba(255,255,255,.8) 0 3px,transparent 4px),radial-gradient(circle at 83% 77%,rgba(255,255,255,.7) 0 4px,transparent 5px),linear-gradient(140deg,#f9d7e7,#eeb4d0); background-size:49px 53px,67px 59px,auto; text-align:center; box-shadow:0 18px 75px rgba(0,0,0,.16),8px 9px 0 rgba(165,87,125,.12); }
.postcard-theme-7::before { inset:10px; border:1px solid rgba(165,87,125,.28); border-radius:4px; }
.postcard-theme-7 .postmark { top:20px; left:22px; width:34px; height:34px; border:0; background:rgba(255,248,251,.7); font-size:18px; }
.postcard-theme-7 .postcard-label { margin:29px 0 16px; color:#9c4f76; font-size:7px; }
.postcard-theme-7 h3 { min-height:0; color:#503447; font:400 clamp(40px,4.9vw,59px)/.98 "Parisienne",cursive; }
.postcard-theme-7 .postcard-signoff { font:italic 18px "Cormorant Garamond",var(--serif); }

.postcard-theme-8 { display:grid; grid-template-columns:36px 1fr; grid-template-rows:auto 1fr auto; gap:12px 22px; padding:42px clamp(30px,4vw,52px); border:0; border-radius:2px; background:linear-gradient(90deg,rgba(76,129,120,.16) 0 44px,transparent 44px),linear-gradient(135deg,#d6f2eb,#a9d8cc); }
.postcard-theme-8::before { inset:15px; border:1px solid rgba(47,69,66,.25); }
.postcard-theme-8 .postmark { top:25px; left:18px; width:32px; height:32px; border:0; background:transparent; }
.postcard-theme-8 .postcard-label { grid-column:1; grid-row:1 / 4; align-self:center; margin:0; color:#4c8178; font-size:7px; writing-mode:vertical-rl; transform:rotate(180deg); }
.postcard-theme-8 h3 { grid-column:2; grid-row:2; min-height:0; align-self:center; color:#2f4542; font:600 clamp(31px,3.8vw,44px)/1.08 Georgia,serif; }
.postcard-theme-8 .postcard-signoff { grid-column:2; grid-row:3; justify-self:end; margin:0; font:italic 18px Georgia,serif; }

.postcard-theme-9 { padding:clamp(42px,5vw,63px); border:1px solid rgba(166,107,69,.32); border-radius:2px; background:repeating-linear-gradient(180deg,#f7dcc2 0 31px,#edc8a8 32px,#f7dcc2 33px); font-family:"Courier New",monospace; }
.postcard-theme-9::before { inset:0; border:0; background:linear-gradient(90deg,transparent 0 35px,rgba(188,91,83,.23) 36px,transparent 37px); }
.postcard-theme-9 .postmark { top:18px; left:auto; right:21px; width:48px; height:48px; border:2px solid rgba(166,107,69,.55); border-radius:50%; background:rgba(250,225,202,.55); font:700 18px "Courier New",monospace; }
.postcard-theme-9 .postcard-label { margin-top:10px; color:#965c3c; font:700 8px "Courier New",monospace; letter-spacing:.08em; }
.postcard-theme-9 h3 { min-height:0; color:#503a30; font:700 clamp(25px,3.2vw,37px)/1.12 "Courier New",monospace; letter-spacing:-.06em; }
.postcard-theme-9 .postcard-signoff { align-self:flex-end; font:italic 15px "Courier New",monospace; }

.postcard-theme-10 { align-items:center; padding:clamp(45px,5vw,62px); border:1px solid rgba(158,217,240,.4); border-radius:2px; background:radial-gradient(circle at 22% 25%,#fff 0 1px,transparent 2px),radial-gradient(circle at 77% 66%,#d3e9ff 0 1px,transparent 2px),radial-gradient(ellipse at 50% 0%,rgba(130,91,174,.48),transparent 63%),linear-gradient(155deg,#17182d,#080d1b 78%); background-size:41px 37px,67px 53px,auto,auto; text-align:center; box-shadow:0 22px 70px rgba(0,0,0,.32),inset 0 0 0 1px rgba(158,217,240,.16); }
.postcard-theme-10::before { inset:13px; border:1px solid rgba(158,217,240,.19); }
.postcard-theme-10 .postmark { top:21px; left:auto; right:22px; border-color:rgba(255,214,110,.42); background:rgba(8,11,22,.66); color:#ffd66e; }
.postcard-theme-10 .postcard-label { color:#9ed9f0; font:700 8px "Manrope",var(--sans); }
.postcard-theme-10 h3 { min-height:0; color:#f1edf3; font:italic 500 clamp(36px,4.4vw,53px)/1.02 "Cormorant Garamond",var(--serif); text-shadow:0 0 20px rgba(158,217,240,.17); }
.postcard-theme-10 .postcard-signoff { font:italic 19px "Parisienne",cursive; color:#ffd66e; }

/* Birthday years 11–19 get their own keepsake treatments, still in the site palette. */
.postcard-theme-11 { --card-bg:#c9eced; --card-ink:#173b49; --card-accent:#3b8794; transform:rotate(-1.1deg); background:radial-gradient(circle at 80% 18%,rgba(255,255,255,.72) 0 2px,transparent 3px),linear-gradient(145deg,#d9f4ef,#a9d9e4); background-size:39px 43px,auto; box-shadow:0 22px 65px rgba(34,119,142,.18); }
.postcard-theme-11::before { inset:12px; border:1px solid rgba(42,112,129,.35); }
.postcard-theme-11 .postmark { width:48px; height:48px; display:grid; place-items:center; border:1px solid rgba(59,135,148,.55); border-radius:50%; background:rgba(239,252,248,.82); font:700 11px var(--sans); }
.postcard-theme-11 h3 { color:#173b49; font:600 clamp(32px,4vw,48px)/1.05 Georgia,serif; }
.postcard-theme-12 { --card-bg:#f3d4ad; --card-ink:#503c32; --card-accent:#a76743; transform:rotate(1deg); border:1px solid rgba(167,103,67,.35); background:linear-gradient(115deg,rgba(255,255,255,.43),transparent 55%),repeating-linear-gradient(0deg,rgba(152,91,55,.045) 0 1px,transparent 1px 5px),#f3d4ad; }
.postcard-theme-12::before { inset:10px; border:2px dotted rgba(167,103,67,.4); }
.postcard-theme-12 .postmark { width:54px; height:54px; display:grid; place-items:center; border:2px solid #b77952; border-radius:50%; background:#f8e5c7; font:700 11px var(--sans); }
.postcard-theme-12 h3 { color:#503c32; font:700 clamp(29px,3.7vw,44px)/1.08 var(--sans); letter-spacing:-.04em; }
.postcard-theme-13 { --card-bg:#d8d1f0; --card-ink:#37314e; --card-accent:#75669d; transform:rotate(-.7deg); background:radial-gradient(ellipse at 80% 100%,rgba(255,255,255,.46),transparent 46%),linear-gradient(145deg,#e6e3f7,#c7bce7); }
.postcard-theme-13::before { inset:16px; border:1px solid rgba(117,102,157,.42); border-radius:35px 3px; }
.postcard-theme-13 .postmark { display:grid; width:45px; height:45px; place-items:center; border-radius:50% 50% 50% 3px; background:#75669d; color:#f7f3ff; font:700 11px var(--sans); transform:rotate(-12deg); }
.postcard-theme-13 h3 { color:#37314e; font:italic 500 clamp(34px,4.2vw,50px)/1.03 "Cormorant Garamond",var(--serif); }
.postcard-theme-14 { --card-bg:#f2c9cf; --card-ink:#4d303e; --card-accent:#a95470; transform:rotate(.8deg); border-radius:4px 22px 4px 22px; background:radial-gradient(circle at 86% 22%,rgba(255,255,255,.62) 0 3px,transparent 4px),linear-gradient(135deg,#f8e0dc,#e9b0c1); background-size:47px 53px,auto; }
.postcard-theme-14::before { inset:10px; border:1px solid rgba(169,84,112,.38); border-radius:2px 16px; }
.postcard-theme-14 .postmark { display:grid; width:42px; height:42px; place-items:center; border:1px solid #a95470; border-radius:4px; background:rgba(255,247,242,.68); color:#a95470; font:700 10px var(--sans); transform:rotate(5deg); }
.postcard-theme-14 h3 { color:#4d303e; font:400 clamp(39px,4.8vw,57px)/.98 "Parisienne",cursive; }
.postcard-theme-15 { --card-bg:#d1e6f3; --card-ink:#263d58; --card-accent:#47779d; transform:rotate(-1.3deg); background:linear-gradient(90deg,rgba(59,113,157,.12) 0 16px,transparent 16px),linear-gradient(135deg,#dcecf5,#bdd8ec); }
.postcard-theme-15::before { inset:14px; border:2px solid rgba(71,119,157,.3); }
.postcard-theme-15 .postmark { display:grid; width:49px; height:49px; place-items:center; border:2px dashed #47779d; border-radius:50%; color:#315c7d; font:700 10px var(--sans); }
.postcard-theme-15 h3 { color:#263d58; font:600 clamp(31px,3.9vw,46px)/1.08 Georgia,serif; }
.postcard-theme-16 { --card-bg:#c8e8d8; --card-ink:#29483d; --card-accent:#4c8068; transform:rotate(1.2deg); background:radial-gradient(ellipse at 100% 0%,rgba(255,255,255,.63),transparent 53%),linear-gradient(140deg,#d8f0df,#add6c2); }
.postcard-theme-16::before { inset:0 auto 0 24px; border:0; border-left:1px dashed rgba(76,128,104,.52); }
.postcard-theme-16 .postmark { top:25px; right:28px; left:auto; display:grid; width:45px; height:45px; place-items:center; border-radius:50%; background:#4c8068; color:#eff9ec; font:700 10px var(--sans); }
.postcard-theme-16 h3 { color:#29483d; font:600 clamp(30px,3.8vw,44px)/1.08 var(--sans); letter-spacing:-.04em; }
.postcard-theme-17 { --card-bg:#f4dc87; --card-ink:#52452b; --card-accent:#9b7931; transform:rotate(-.6deg); background:radial-gradient(circle at 15% 14%,rgba(255,255,255,.66) 0 3px,transparent 4px),linear-gradient(150deg,#faedb5,#e9cd71); background-size:53px 47px,auto; }
.postcard-theme-17::before { inset:13px; border:1px solid rgba(155,121,49,.44); border-radius:50% 4px; }
.postcard-theme-17 .postmark { top:25px; right:30px; left:auto; display:grid; width:51px; height:51px; place-items:center; border:1px solid rgba(155,121,49,.5); border-radius:50%; background:rgba(255,250,219,.66); color:#806329; font:700 10px var(--sans); }
.postcard-theme-17 h3 { color:#52452b; font:italic 600 clamp(34px,4.2vw,50px)/1.03 "Cormorant Garamond",var(--serif); }
.postcard-theme-18 { --card-bg:#e9c4e2; --card-ink:#45344e; --card-accent:#875f91; transform:rotate(1deg); background:radial-gradient(ellipse at 10% 90%,rgba(255,255,255,.4),transparent 45%),linear-gradient(135deg,#f1d8ef,#d8b4e0 62%,#aecde9); }
.postcard-theme-18::before { inset:12px; border:1px solid rgba(135,95,145,.4); border-radius:3px; box-shadow:inset 0 0 25px rgba(255,255,255,.22); }
.postcard-theme-18 .postmark { display:grid; width:46px; height:46px; place-items:center; border:1px solid rgba(135,95,145,.45); border-radius:50% 50% 50% 4px; background:rgba(250,241,251,.7); color:#684b75; font:700 10px var(--sans); transform:rotate(-9deg); }
.postcard-theme-18 h3 { color:#45344e; font:italic 500 clamp(32px,4vw,47px)/1.04 Georgia,serif; }
.postcard-theme-19 { --card-bg:#f6e9c8; --card-ink:#23394a; --card-accent:#26728c; transform:rotate(-.5deg); border:1px solid rgba(255,222,123,.78); background:radial-gradient(circle at 10% 15%,#fff 0 2px,transparent 3px),radial-gradient(circle at 90% 75%,rgba(255,255,255,.8) 0 3px,transparent 4px),linear-gradient(135deg,#e3f4f1,#a9d9ed 48%,#f4db8e); background-size:43px 37px,61px 57px,auto; box-shadow:0 24px 80px rgba(57,128,156,.22),0 0 34px rgba(255,218,116,.2); }
.postcard-theme-19::before { inset:11px; border:2px solid rgba(255,255,255,.74); box-shadow:inset 0 0 0 1px rgba(41,100,124,.28); }
.postcard-theme-19 .postmark { display:grid; width:60px; height:60px; place-items:center; border:2px solid #fff4c7; border-radius:50%; background:linear-gradient(145deg,#183c61,#347f98); color:#ffe38c; font:800 13px var(--sans); box-shadow:0 0 22px rgba(255,224,128,.45); }
.postcard-theme-19 .postcard-label { color:#216982; font-weight:800; }
.postcard-theme-19 h3 { color:#203b52; font:600 clamp(37px,4.5vw,54px)/1.02 "Cormorant Garamond",var(--serif); text-shadow:0 2px rgba(255,255,255,.5); }
.postcard-theme-19 .postcard-signoff { color:#8b5a29; font:italic 21px "Parisienne",cursive; }
.postcard-section .postcard { transition:box-shadow .35s,filter .35s; }
.postcard-section .postcard:hover { filter:saturate(1.08); }
.postcard-section .postcard-theme-19:hover { box-shadow:0 28px 90px rgba(57,128,156,.28),0 0 45px rgba(255,218,116,.3); }
@keyframes birthday-postcard-glow { from { box-shadow:0 22px 68px rgba(57,128,156,.2),0 0 18px rgba(255,218,116,.12); } to { box-shadow:0 26px 82px rgba(57,128,156,.3),0 0 38px rgba(255,218,116,.26); } }
.postcard-theme-19 { animation:birthday-postcard-glow 3.8s ease-in-out infinite alternate; }
@media (prefers-reduced-motion:reduce) { .postcard-theme-19 { animation:none; } }

/* Section 12: make each little reason feel like a bright note in the same night sky. */
.reasons-section { position:relative; isolation:isolate; }
.reasons-section::before { position:absolute; z-index:-1; top:12%; right:8%; width:min(680px,70vw); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(194,177,255,.075),rgba(158,217,240,.04) 38%,transparent 70%); content:""; pointer-events:none; animation:reason-aura 12s ease-in-out infinite alternate; }
.reasons-section .section-head { align-items:end; }
.reasons-section .section-note { max-width:250px; color:#aeb9c9; }
.reason-grid { gap:10px; border:0; }
.reasons-section .reason-card { position:relative; isolation:isolate; overflow:hidden; min-height:168px; gap:14px; border:1px solid color-mix(in srgb,var(--reason-accent) 48%,rgba(206,213,238,.2)); background:radial-gradient(ellipse at 100% 0%,color-mix(in srgb,var(--reason-accent) 35%,transparent),transparent 68%),linear-gradient(145deg,color-mix(in srgb,var(--reason-accent) 31%,#171b29),color-mix(in srgb,var(--reason-accent) 20%,#0b1020) 72%); box-shadow:inset 0 1px rgba(255,255,255,.07),0 10px 28px rgba(0,0,0,.18); transition:transform .48s cubic-bezier(.2,.8,.2,1),background .48s,border-color .38s,box-shadow .48s,filter .38s; }
.reasons-section .reason-card::before { position:absolute; z-index:0; right:-28px; bottom:-42px; width:110px; height:110px; border:1px solid color-mix(in srgb,var(--reason-accent) 35%,transparent); border-radius:50%; background:radial-gradient(circle at 35% 35%,color-mix(in srgb,var(--reason-accent) 17%,transparent),transparent 70%); box-shadow:0 0 32px color-mix(in srgb,var(--reason-accent) 16%,transparent),inset 0 0 28px color-mix(in srgb,var(--reason-accent) 12%,transparent); content:""; transition:transform .65s cubic-bezier(.2,.8,.2,1),opacity .45s; opacity:.75; }
.reasons-section .reason-card::after { position:absolute; top:19px; right:20px; color:var(--reason-accent); content:"✦"; font-size:12px; text-shadow:0 0 13px color-mix(in srgb,var(--reason-accent) 70%,transparent); opacity:.58; transition:transform .35s,opacity .35s; }
.reasons-section .reason-card > span,.reasons-section .reason-card p { position:relative; z-index:1; }
.reasons-section .reason-card:hover,.reasons-section .reason-card:focus-visible { z-index:1; transform:translateY(-6px) scale(1.025); border-color:color-mix(in srgb,var(--reason-accent) 76%,white); background:radial-gradient(ellipse at 100% 0%,color-mix(in srgb,var(--reason-accent) 42%,transparent),transparent 67%),linear-gradient(145deg,color-mix(in srgb,var(--reason-accent) 39%,#151a29),color-mix(in srgb,var(--reason-accent) 23%,#090d18)); box-shadow:0 20px 42px rgba(0,0,0,.3),0 0 30px color-mix(in srgb,var(--reason-accent) 22%,transparent),inset 0 1px rgba(255,255,255,.12); filter:saturate(1.08); }
.reasons-section .reason-card:hover::before,.reasons-section .reason-card.is-open::before { transform:scale(1.22) translate(-7px,-5px); opacity:1; }
.reasons-section .reason-card:hover::after,.reasons-section .reason-card.is-open::after { transform:rotate(35deg) scale(1.35); opacity:1; }
.reasons-section .reason-card:focus-visible { outline:2px solid var(--reason-accent); outline-offset:3px; }
.reasons-section .reason-card > span:first-child { display:grid; min-width:31px; height:25px; place-items:center; padding:0 7px; border:1px solid color-mix(in srgb,var(--reason-accent) 48%,transparent); border-radius:999px; background:color-mix(in srgb,var(--reason-accent) 9%,transparent); color:var(--reason-accent); font:700 8px var(--sans); letter-spacing:.12em; }
.reasons-section .reason-lock { width:36px; height:36px; border:1px solid color-mix(in srgb,var(--reason-accent) 45%,transparent); border-radius:50%; background:color-mix(in srgb,var(--reason-accent) 7%,transparent); color:var(--reason-accent); transition:transform .35s,background .35s,border-color .35s; }
.reasons-section .reason-lock svg { width:15px; height:17px; stroke-width:1.6; }
.reasons-section .reason-card:hover .reason-lock { transform:translateY(-2px) rotate(-7deg); border-color:var(--reason-accent); background:color-mix(in srgb,var(--reason-accent) 14%,transparent); }
.reasons-section .reason-card.is-open { min-height:168px; transform:translateY(-3px); border-color:color-mix(in srgb,var(--reason-accent) 78%,white); background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--reason-accent) 39%,transparent),transparent 74%),linear-gradient(145deg,color-mix(in srgb,var(--reason-accent) 34%,#151a29),color-mix(in srgb,var(--reason-accent) 22%,#090d18)); box-shadow:0 16px 38px rgba(0,0,0,.26),0 0 28px color-mix(in srgb,var(--reason-accent) 18%,transparent),inset 0 0 30px color-mix(in srgb,var(--reason-accent) 8%,transparent); animation:reason-card-open .48s cubic-bezier(.18,.75,.25,1) both; }
.reasons-section .reason-card.is-open p { position:relative; z-index:1; color:color-mix(in srgb,var(--reason-accent) 24%,#fff); font-size:clamp(19px,1.8vw,23px); line-height:1.2; text-wrap:balance; }
.reasons-section .reason-card.is-open::after { animation:reason-twinkle 1.6s ease-in-out infinite alternate; }
@keyframes reason-aura { from { transform:translate3d(0,0,0) scale(.96); opacity:.7; } to { transform:translate3d(-24px,18px,0) scale(1.05); opacity:1; } }
@keyframes reason-twinkle { from { filter:brightness(.9); transform:rotate(0) scale(1); } to { filter:brightness(1.5); transform:rotate(45deg) scale(1.5); } }
@keyframes reason-card-open { 0% { transform:translateY(0) scale(.97); } 62% { transform:translateY(-6px) scale(1.025); } 100% { transform:translateY(-3px) scale(1); } }
@media (max-width:700px) { .reason-grid { gap:7px; } .reasons-section .reason-card { min-height:135px; padding:13px; } .reasons-section .reason-card.is-open { min-height:135px; } .reasons-section .reason-card.is-open p { font-size:18px; } }
@media (prefers-reduced-motion:reduce) { .reasons-section::before,.reasons-section .reason-card.is-open::after,.reasons-section .reason-card.is-open { animation:none; } .reasons-section .reason-card,.reasons-section .reason-card::before,.reasons-section .reason-card::after,.reasons-section .reason-lock { transition:none; } }

/* Opening chapter: a little more ceremony, while keeping its original layout and artwork. */
.hero { isolation:isolate; }
.hero::before { position:absolute; z-index:0; top:8%; left:35%; width:min(980px,82vw); aspect-ratio:1.7; border-radius:50%; background:radial-gradient(ellipse,rgba(91,137,203,.13),rgba(130,91,169,.07) 44%,transparent 72%); content:""; filter:blur(12px); pointer-events:none; animation:hero-aurora-breathe 9s ease-in-out infinite alternate; }
body.birthday-entered .hero-copy.reveal.is-visible .eyebrow { animation:hero-copy-arrive .75s .12s cubic-bezier(.2,.75,.25,1) both; }
body.birthday-entered .hero-copy.reveal.is-visible .section-kicker { animation:hero-copy-arrive .72s .22s cubic-bezier(.2,.75,.25,1) both; }
body.birthday-entered .hero-copy.reveal.is-visible h1 { animation:hero-title-arrive 1s .28s cubic-bezier(.18,.78,.2,1) both; }
body.birthday-entered .hero-copy.reveal.is-visible .hero-subtitle { animation:hero-copy-arrive .78s .52s cubic-bezier(.2,.75,.25,1) both; }
body.birthday-entered .hero-copy.reveal.is-visible > .pill { animation:hero-copy-arrive .78s .68s cubic-bezier(.2,.75,.25,1) both,hero-button-breathe 3.6s 1.8s ease-in-out infinite; }
.hero-copy > .pill { position:relative; box-shadow:0 0 0 rgba(242,164,206,0); transition:color .28s ease,background .28s ease,transform .28s cubic-bezier(.2,.75,.2,1),box-shadow .35s ease,border-color .28s ease; }
.hero-copy > .pill:hover { border-color:#f2a4ce; box-shadow:0 0 25px rgba(242,164,206,.2),0 8px 24px rgba(0,0,0,.2); }
.hero-frame { border-color:rgba(176,187,216,.4); box-shadow:0 22px 68px rgba(0,0,0,.28),0 0 38px rgba(158,217,240,.09); animation:frame-float 6.2s cubic-bezier(.42,0,.58,1) infinite,hero-frame-glow 7s ease-in-out infinite; transition:border-color .5s,filter .5s; }
.hero-frame:hover { border-color:rgba(169,220,255,.62); filter:saturate(1.08); }
.hero-frame::before { background:linear-gradient(135deg,rgba(5,10,25,.28),rgba(8,20,43,.16) 56%,rgba(5,9,22,.3)),linear-gradient(to bottom,rgba(5,8,20,.06),rgba(5,9,20,.25)),linear-gradient(112deg,transparent 29%,rgba(169,220,255,.05) 42%,rgba(242,164,206,.12) 50%,transparent 65%); background-size:auto,auto,230% 100%; animation:hero-frame-light 11s ease-in-out infinite; }
.hero-frame::after { border-color:rgba(218,107,177,.53); box-shadow:inset 0 0 30px rgba(169,220,255,.05); background:linear-gradient(112deg,transparent 28%,rgba(255,255,255,.14) 49%,transparent 64%); background-size:230% 100%; animation:hero-frame-light 11s 1s ease-in-out infinite; }
.hero-frame .frame-caption { transition:transform .4s ease,text-shadow .4s ease; }
.hero-frame:hover .frame-caption { transform:translateY(-3px); text-shadow:0 2px 14px rgba(3,6,15,.95),0 0 18px rgba(169,220,255,.16); }
.ring-one,.ring-two { transform-origin:center; animation:hero-ring-drift 34s ease-in-out infinite alternate; }
.ring-two { animation-delay:-17s; }
.scroll-hint { transition:color .25s ease,text-shadow .25s ease,transform .25s ease; }
.scroll-hint:hover { color:#f2a4ce; text-shadow:0 0 18px rgba(242,164,206,.5); transform:translateY(3px); }
@keyframes hero-copy-arrive { from { opacity:0; transform:translateY(19px); filter:blur(5px); } to { opacity:1; transform:translateY(0); filter:blur(0); } }
@keyframes hero-title-arrive { from { opacity:0; transform:translateY(24px) scale(.985); filter:blur(8px); } 70% { opacity:1; filter:blur(0); } to { opacity:1; transform:translateY(0) scale(1); filter:blur(0); } }
@keyframes hero-aurora-breathe { from { transform:translate3d(-2%,0,0) scale(.94); opacity:.64; } to { transform:translate3d(2%,2%,0) scale(1.04); opacity:1; } }
@keyframes hero-frame-light { 0%,18% { background-position:0 0,0 0,140% 0; } 62%,100% { background-position:0 0,0 0,-140% 0; } }
@keyframes hero-frame-glow { 0%,100% { box-shadow:0 22px 68px rgba(0,0,0,.28),0 0 27px rgba(158,217,240,.055); } 50% { box-shadow:0 26px 76px rgba(0,0,0,.31),0 0 42px rgba(158,217,240,.13),0 0 58px rgba(242,164,206,.06); } }
@keyframes hero-button-breathe { 0%,100% { box-shadow:0 0 0 rgba(242,164,206,0); } 50% { box-shadow:0 0 18px rgba(242,164,206,.13); } }
@keyframes hero-ring-drift { from { rotate:-3deg; scale:.98; opacity:.72; } to { rotate:3deg; scale:1.02; opacity:1; } }
@keyframes hero-chapter-shine { 0%,100% { opacity:.82; filter:brightness(.95); } 50% { opacity:1; filter:brightness(1.28); } }
@media (prefers-reduced-motion:reduce) {
  .hero::before,.hero-frame,.hero-frame::before,.hero-frame::after,.ring-one,.ring-two { animation:none; }
  .hero-eyebrow-star,.hero .section-kicker span { animation:none; }
  body.birthday-entered .hero-copy.reveal.is-visible .eyebrow,body.birthday-entered .hero-copy.reveal.is-visible .section-kicker,body.birthday-entered .hero-copy.reveal.is-visible h1,body.birthday-entered .hero-copy.reveal.is-visible .hero-subtitle,body.birthday-entered .hero-copy.reveal.is-visible > .pill { animation:none; }
}

/* Section 13: give the letter more room and let it carry the emotional focus. */
.letter-section { --section-accent:#a9dcff; }
.letter-section > .section-kicker { color:#a9dcff; }
.letter-section > .section-kicker i { background:linear-gradient(90deg,#a9dcff,#f2a4ce); }
.letter-layout { gap:clamp(28px,4vw,46px); }
.letter-layout h2 { width:min(100%,940px); margin:0 0 0 5%; text-shadow:0 0 38px rgba(169,220,255,.08); }
.letter-paper { isolation:isolate; width:min(100%,870px); min-height:420px; margin:0 auto; padding:clamp(48px,5.5vw,66px) clamp(36px,6.2vw,82px) 48px; border:1px solid rgba(169,220,255,.46); background:radial-gradient(ellipse at 0% 0%,rgba(169,220,255,.2),transparent 45%),radial-gradient(ellipse at 100% 100%,rgba(242,164,206,.13),transparent 46%),linear-gradient(135deg,#f3eee4,#ece5dd); box-shadow:0 27px 76px rgba(0,0,0,.27),0 0 32px rgba(169,220,255,.08),inset 0 1px rgba(255,255,255,.85); }
.letter-paper::before { position:absolute; z-index:1; top:0; right:0; left:0; height:4px; background:linear-gradient(90deg,#a9e5b7,#a9dcff,#f2a4ce,#ffdc78,#a9dcff); background-size:220% 100%; content:""; animation:letter-spectrum 9s linear infinite; }
.letter-paper::after { position:absolute; z-index:0; inset:13px; border:1px solid rgba(77,111,137,.18); content:""; pointer-events:none; }
.letter-paper p { position:relative; z-index:1; color:#43475b; font-size:clamp(19px,1.65vw,22px); line-height:1.58; }
.letter-paper .letter-greeting { color:#8c6d88; }
.letter-paper .letter-signoff em { color:#8c5f88; }
.letter-paper .letter-footnote { color:#7189a0; }
.paper-star { z-index:2; color:#8bbdd6; text-shadow:0 0 13px rgba(169,220,255,.7); animation:letter-star-glimmer 3.2s ease-in-out infinite; }
.letter-layout.is-visible .letter-paper { animation:letter-paper-arrive .95s .12s cubic-bezier(.2,.7,.2,1) both; }
.letter-paper:hover { border-color:rgba(242,164,206,.62); box-shadow:0 32px 84px rgba(0,0,0,.31),0 0 38px rgba(169,220,255,.13),0 0 24px rgba(242,164,206,.08),inset 0 1px rgba(255,255,255,.95); }
.story-ending { width:min(100%,870px); margin:46px auto 0; border-left-color:rgba(169,220,255,.62); background:linear-gradient(90deg,rgba(169,220,255,.08),rgba(242,164,206,.035) 52%,transparent 100%); }
.story-ending > span { color:#a9dcff; }
.story-finale-button { border-color:rgba(169,220,255,.5); color:#d8efff; background:linear-gradient(100deg,rgba(169,220,255,.08),rgba(255,220,120,.045)); }
.story-finale-button:hover { border-color:#ffdc78; color:#111729; background:#ffdc78; }
@keyframes letter-spectrum { to { background-position:220% 0; } }
@keyframes letter-star-glimmer { 0%,100% { opacity:.75; transform:rotate(0) scale(.94); } 50% { opacity:1; transform:rotate(18deg) scale(1.12); } }
@keyframes letter-paper-arrive { from { opacity:.65; filter:blur(3px); } to { opacity:1; filter:blur(0); } }
@media (max-width:700px) { .letter-layout h2 { margin-left:0; } .letter-paper { width:100%; min-height:360px; margin:0; padding:50px 28px 36px; } .story-ending { width:100%; margin:36px 0 0; } }
@media (prefers-reduced-motion:reduce) { .letter-paper::before,.paper-star,.letter-layout.is-visible .letter-paper { animation:none; } }

/* Our Day: keep the planner panel, plan action, ticket, and download control distinct. */
.date-builder { padding:clamp(22px,3.5vw,38px); }
.date-plan-carousel { max-width:800px; }
.custom-choice { margin-top:9px; padding-top:9px; }
.custom-choice > div { margin-top:5px; }
.save-custom-choice { min-width:58px; border-color:rgba(168,223,242,.45); background:rgba(168,223,242,.08); color:#c8edf8; }
.save-custom-choice:hover { border-color:#a8dff2; background:rgba(168,223,242,.16); }
.date-plan-navigation { min-height:54px; }
.date-plan-navigation .date-plan-position[hidden],.date-end-button[hidden],.date-plan-actions [hidden] { display:none; }
.date-end-button { display:inline-flex; min-height:40px; align-items:center; justify-content:center; gap:11px; padding:0 17px; border:1px solid rgba(255,214,110,.62); border-radius:999px; background:linear-gradient(110deg,rgba(168,223,242,.11),rgba(255,214,110,.13)); color:#f3e9c5; font:800 9px var(--sans); letter-spacing:.13em; text-transform:uppercase; cursor:pointer; transition:transform .22s,border-color .22s,background .22s,box-shadow .22s,opacity .22s; }
.date-end-button:hover:not(:disabled) { transform:translateY(-2px); border-color:#ffdc78; background:linear-gradient(110deg,rgba(168,223,242,.17),rgba(255,214,110,.22)); box-shadow:0 0 22px rgba(255,214,110,.1); }
.date-end-button b { color:#ffdc78; font-size:13px; }
.date-end-button[aria-pressed="true"] { border-color:rgba(169,229,183,.62); color:#d9f4de; }
.date-end-button[aria-pressed="true"] b { color:#a9e5b7; }
.date-end-button:disabled { cursor:default; opacity:.8; }
.date-choices button:disabled,.save-custom-choice:disabled,.custom-choice input:disabled { cursor:default; opacity:.72; }
.date-plan-actions { width:min(100%,730px); margin:0 auto; padding-top:19px; text-align:center; }
.date-plan-status { min-height:0; margin:0 auto 10px; color:#a8dff2; font:600 11px/1.5 var(--sans); }
.date-plan-status:empty { display:none; }
.date-plan-action-row { display:flex; align-items:center; justify-content:center; gap:11px; flex-wrap:wrap; }
.date-reveal-button { margin:0; border-radius:999px; background:linear-gradient(105deg,rgba(168,223,242,.16),rgba(169,229,183,.12),rgba(255,214,110,.14)); font-weight:800; }
.date-unlock-button { min-height:44px; padding:0 16px; border:1px solid rgba(242,164,206,.4); border-radius:999px; background:rgba(242,164,206,.055); color:#edc5dc; font:700 9px var(--sans); letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:transform .2s,border-color .2s,background .2s; }
.date-unlock-button:hover { transform:translateY(-2px); border-color:#f2a4ce; background:rgba(242,164,206,.12); }
.date-plan-result:not(.is-reminder) { width:100%; min-height:360px; margin:23px auto 0; padding:31px 36px 27px; border:1px solid #b8c9d0; border-radius:3px; background:radial-gradient(ellipse at 8% 0%,rgba(169,220,255,.16),transparent 43%),linear-gradient(130deg,#fffefa,#f7f7f3); color:#203449; box-shadow:0 18px 48px rgba(0,0,0,.24),0 0 28px rgba(168,223,242,.08); text-align:left; }
.date-plan-result:not(.is-reminder)::before { z-index:0; inset:9px; border:1px dashed rgba(40,71,92,.25); }
.date-plan-result:not(.is-reminder)::after { z-index:0; height:6px; }
.date-plan-result:not(.is-reminder) .plan-card-kicker,.date-plan-result:not(.is-reminder) h3,.date-plan-result:not(.is-reminder) .date-plan-steps,.date-plan-result:not(.is-reminder) .plan-card-signoff { position:relative; z-index:1; }
.date-plan-result:not(.is-reminder) .plan-card-kicker { font:800 8px Arial,Helvetica,sans-serif; letter-spacing:.19em; }
.date-plan-result:not(.is-reminder) h3 { margin:11px 0 13px; color:#182b40; font:900 clamp(23px,2.3vw,30px)/1.05 "Arial Black",Arial,Helvetica,sans-serif; letter-spacing:-.035em; text-transform:uppercase; }
.date-plan-result:not(.is-reminder) .date-plan-steps { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:minmax(54px,auto); gap:0 23px; }
.date-plan-result:not(.is-reminder) .date-plan-steps li { grid-template-columns:minmax(85px,.34fr) 1fr; gap:8px; min-height:54px; padding:13px 0 13px 13px; }
.date-plan-result:not(.is-reminder) .date-plan-steps li span { color:#59788c; font:800 7px Arial,Helvetica,sans-serif; letter-spacing:.1em; }
.date-plan-result:not(.is-reminder) .date-plan-steps li strong { color:#243a4e; font:700 12px/1.35 Arial,Helvetica,sans-serif; }
.date-plan-result:not(.is-reminder) .plan-card-signoff { margin:12px 0 0; color:#688090; font:700 10px Arial,Helvetica,sans-serif; letter-spacing:.04em; }
.download-plan-ticket { display:flex; width:max-content; margin:15px auto 0; border-color:rgba(168,223,242,.52); background:linear-gradient(105deg,#17384e,#22506a); font:800 9px Arial,Helvetica,sans-serif; letter-spacing:.12em; }
.download-plan-ticket:hover { background:linear-gradient(105deg,#24556b,#307b88); }
.ticket-download-status { color:#a9e5b7; text-align:center; }
.date-plan-result[hidden],.download-plan-ticket[hidden] { display:none; }
@media (max-width:700px) {
  .date-plan-actions { width:100%; }
  .date-builder { padding:22px 17px; }
  .date-plan-result:not(.is-reminder) { min-height:0; padding:23px 19px; }
  .date-plan-result:not(.is-reminder) .date-plan-steps { grid-template-columns:1fr; grid-auto-rows:auto; }
  .date-plan-result:not(.is-reminder) .date-plan-steps li { grid-template-columns:minmax(90px,.4fr) 1fr; min-height:49px; padding:11px 0 11px 13px; }
  .date-plan-navigation { gap:8px; }
  .date-plan-navigation button,.date-end-button { min-height:38px; padding:0 11px; font-size:8px; }
}

/* The present-day birthday is the postcard finale: vivid jewel tones, with the whole bouquet visible. */
.postcard-theme-19 {
  --card-bg:#102b3b;
  --card-ink:#fff8e8;
  --card-accent:#79d8d3;
  position:relative;
  min-height:410px;
  overflow:hidden;
  border:1px solid rgba(255,218,141,.72);
  border-radius:4px 24px 4px 24px;
  background:radial-gradient(ellipse at 82% 12%,rgba(241,173,112,.3),transparent 36%),radial-gradient(ellipse at 25% 100%,rgba(84,183,179,.24),transparent 46%),linear-gradient(125deg,#102b3b 0%,#253849 48%,#392b42 100%);
  box-shadow:0 28px 82px rgba(0,0,0,.4),0 0 38px rgba(255,203,121,.18),inset 0 1px rgba(255,255,255,.16);
}
.postcard-theme-19::before { inset:10px; border:1px solid rgba(255,233,177,.55); border-radius:3px 19px 3px 19px; box-shadow:inset 0 0 0 1px rgba(130,221,219,.2); }
.postcard-theme-19::after { position:absolute; z-index:0; inset:0; background:linear-gradient(112deg,transparent 30%,rgba(255,255,255,.11) 46%,rgba(255,220,148,.06) 53%,transparent 69%); background-size:230% 100%; content:""; pointer-events:none; animation:birthday-postcard-sheen 7s ease-in-out infinite; }
.postcard-theme-19 .postcard-art { top:50%; right:21px; bottom:auto; left:auto; width:41%; height:auto; aspect-ratio:.79; padding:6px; overflow:hidden; transform:translateY(-50%) rotate(1.5deg); border:1px solid rgba(255,242,208,.9); border-radius:5px 15px 5px 15px; background:linear-gradient(150deg,#fff5db,#f5d8c7); box-shadow:0 15px 34px rgba(0,0,0,.33),0 0 0 5px rgba(255,235,190,.1); opacity:1; mix-blend-mode:normal; }
.postcard-theme-19 .postcard-art img { width:100%; height:100%; object-fit:contain; object-position:center; border-radius:2px 10px 2px 10px; background:#f4eee2; filter:saturate(1.06) contrast(1.02); transform:scale(1); }
.postcard-theme-19 .postcard-art::after { background:linear-gradient(150deg,rgba(255,222,142,.035),rgba(49,121,133,.035)); }
.postcard-theme-19 .postcard-art.is-arriving img { animation:birthday-bouquet-arrive .9s cubic-bezier(.18,.78,.24,1) both; }
.postcard-theme-19 .postmark { top:18px; right:auto; left:22px; z-index:2; width:47px; height:47px; border:1px solid rgba(255,231,158,.82); background:linear-gradient(145deg,#d07c78,#efb869); color:#142f40; font:900 12px "Manrope",var(--sans); box-shadow:0 0 20px rgba(255,216,126,.27); }
.postcard-theme-19 .postcard-label { margin:4px 0 12px; color:#8fe1dc; font:800 8px "Manrope",var(--sans); letter-spacing:.2em; }
.postcard-theme-19 h3 { min-height:0; max-width:100%; color:#fff8e9; font:700 clamp(30px,3.5vw,42px)/1.04 "Cormorant Garamond",var(--serif); text-shadow:0 2px 18px rgba(71,208,211,.18); }
.postcard-theme-19 .postcard-signoff { align-self:flex-start; margin-top:16px; color:#ffcf85; font:italic 20px "Parisienne",cursive; }
.postcard-section .postcard-theme-19:hover { border-color:#fff0bd; box-shadow:0 30px 96px rgba(9,25,38,.5),0 0 48px rgba(255,211,112,.36),inset 0 0 0 1px rgba(255,255,255,.15); }
.postcard-section .postcard-theme-19:hover .postcard-art { opacity:1; }
.postcard-section .postcard-theme-19:hover .postcard-art img { transform:scale(1); }
@media (max-width:700px) {
  .postcard-theme-19 { min-height:575px; align-items:stretch; justify-content:flex-start; padding:62px 25px 220px; }
  .postcard-theme-19 .postcard-art { top:auto; right:50%; bottom:13px; width:min(56%,210px); transform:translateX(50%) rotate(1.5deg); }
  .postcard-theme-19 .postcard-label { margin-top:10px; }
  .postcard-theme-19 h3 { font-size:clamp(31px,8vw,39px); }
}
@media (prefers-reduced-motion:reduce) { .postcard-theme-19,.postcard-theme-19::after,.postcard-theme-19 .postcard-art.is-arriving img { animation:none; } }

/* Birthday postcard 19: edge-to-edge rose backdrop, no inset photo frame. */
.postcard-theme-19 {
  --card-bg:#64172f;
  --card-ink:#fff8f5;
  --card-accent:#ffe49e;
  isolation:isolate;
  overflow:hidden;
  border:1px solid rgba(255,225,190,.8);
  background:#64172f;
  box-shadow:0 26px 76px rgba(0,0,0,.38),0 0 36px rgba(235,91,128,.2),inset 0 1px rgba(255,255,255,.18);
}
.postcard-theme-19::before { z-index:1; inset:10px; border:1px solid rgba(255,240,232,.54); box-shadow:inset 0 0 0 1px rgba(255,215,157,.2); }
.postcard-theme-19::after { z-index:1; background:linear-gradient(100deg,rgba(83,10,33,.66),rgba(101,14,45,.35) 52%,rgba(58,9,35,.62)),linear-gradient(135deg,rgba(238,90,119,.12),transparent 58%,rgba(255,212,131,.16)); background-size:100% 100%; }
.postcard-theme-19 .postcard-art { position:absolute; z-index:0; inset:0; width:auto; height:auto; padding:0; overflow:hidden; border:0; border-radius:inherit; background:transparent; box-shadow:none; opacity:1; mix-blend-mode:normal; transform:none; }
.postcard-theme-19 .postcard-art img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 48%; border:0; border-radius:inherit; background:transparent; filter:brightness(.57) saturate(.86) contrast(1.08); transform:scale(1.025); transition:transform 1s cubic-bezier(.2,.75,.2,1),filter .6s ease; }
.postcard-theme-19 .postcard-art::after { background:linear-gradient(90deg,rgba(81,8,31,.38),rgba(81,8,31,.17) 58%,rgba(44,10,33,.4)),linear-gradient(0deg,rgba(77,9,31,.28),transparent 66%,rgba(94,11,40,.2)); }
.postcard-theme-19 .postmark,.postcard-theme-19 .postcard-label,.postcard-theme-19 h3,.postcard-theme-19 .postcard-signoff { position:relative; z-index:2; }
.postcard-theme-19 .postmark { border-color:rgba(255,241,214,.9); background:linear-gradient(145deg,#fff1e1,#ffd078); color:#771833; box-shadow:0 0 20px rgba(255,205,134,.32); }
.postcard-theme-19 .postcard-label { color:#ffd7e2; text-shadow:0 2px 10px rgba(46,0,20,.8); }
.postcard-theme-19 h3 { color:#fffaf7; text-shadow:0 2px 17px rgba(46,0,20,.86),0 0 25px rgba(255,214,170,.17); }
.postcard-theme-19 .postcard-signoff { color:#ffe49e; text-shadow:0 2px 10px rgba(46,0,20,.8); }
.postcard-section .postcard-theme-19:hover .postcard-art { opacity:1; }
.postcard-section .postcard-theme-19:hover .postcard-art img { transform:scale(1.07); filter:brightness(.62) saturate(.94) contrast(1.08); }
@media (max-width:700px) {
  .postcard-theme-19 { min-height:575px; padding:62px 25px 40px; }
  .postcard-theme-19 .postcard-art { inset:0; width:auto; height:auto; }
}

/* Final postcard sizing and centered birthday-finale composition. */
.postcard-theme-11,.postcard-theme-14 { min-height:310px; padding-block:clamp(25px,3.4vw,42px); }
.postcard-theme-19 {
  min-height:360px;
  align-items:center;
  justify-content:center;
  padding:88px 72px 48px;
  text-align:center;
  background:#571228;
}
.postcard-theme-19::after {
  background:linear-gradient(90deg,rgba(66,7,27,.58),rgba(72,8,30,.43) 50%,rgba(66,7,27,.58)),linear-gradient(0deg,rgba(71,8,29,.45),rgba(83,11,37,.16) 55%,rgba(71,8,29,.4));
}
.postcard-theme-19 .postmark {
  top:20px;
  left:50%;
  width:48px;
  height:48px;
  transform:translateX(-50%);
  font-size:11px;
}
.postcard-theme-19 .postcard-label { margin:0 0 17px; color:#ffd7e2; font-size:9px; }
.postcard-theme-19 h3 {
  width:min(100%,720px);
  min-height:0;
  margin:0;
  color:#fffaf7;
  font-size:clamp(38px,5vw,58px);
  line-height:1.06;
  text-wrap:balance;
}
.postcard-theme-19 .postcard-signoff { align-self:center; margin:19px 0 0; color:#ffe49e; font-size:22px; }
@media (max-width:700px) {
  .postcard-theme-11,.postcard-theme-14 { min-height:290px; }
  .postcard-theme-19 { min-height:430px; padding:88px 26px 42px; }
  .postcard-theme-19 h3 { font-size:clamp(36px,9vw,49px); }
}
.postcard-theme-19 .postmark { position:absolute; z-index:3; }

/* Compact postcard sizing: keep every marked card fully readable without an oversized panel. */
.postcard-layout { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,4.2vw,62px); }
.postcard-theme-11,.postcard-theme-14,.postcard-theme-15,.postcard-theme-18,.postcard-theme-19 {
  box-sizing:border-box;
  height: min(370px, calc(100svh - 210px));
  min-height:300px;
  padding:30px 38px;
  overflow:hidden;
}
.postcard-theme-11 h3,.postcard-theme-14 h3,.postcard-theme-15 h3,.postcard-theme-18 h3 {
  min-height:0;
  max-width:100%;
  font-size:clamp(30px,3.1vw,40px);
  line-height:1.04;
  overflow-wrap:anywhere;
}
.postcard-theme-11 .postcard-label,.postcard-theme-14 .postcard-label,.postcard-theme-15 .postcard-label,.postcard-theme-18 .postcard-label { margin:10px 0 12px; }
.postcard-theme-11 .postcard-signoff,.postcard-theme-14 .postcard-signoff,.postcard-theme-15 .postcard-signoff,.postcard-theme-18 .postcard-signoff { margin-top:13px; }
.postcard-theme-19 {
  height:min(390px,calc(100svh - 190px));
  min-height:310px;
  padding:76px 42px 38px;
}
.postcard-theme-19 h3 {
  width:min(100%,760px);
  font-size:clamp(31px,3vw,40px);
  line-height:1.08;
  overflow-wrap:anywhere;
}
.postcard-theme-19 .postcard-label { margin:0 0 12px; }
.postcard-theme-19 .postcard-signoff { margin-top:14px; font-size:19px; }
@media (max-width:700px) {
  .postcard-layout { grid-template-columns:1fr; gap:34px; }
  .postcard-theme-11,.postcard-theme-14,.postcard-theme-15,.postcard-theme-18 { height:300px; min-height:280px; padding:26px 25px; }
  .postcard-theme-11 h3,.postcard-theme-14 h3,.postcard-theme-15 h3,.postcard-theme-18 h3 { font-size:clamp(28px,7vw,36px); }
  .postcard-theme-19 { height:350px; min-height:330px; padding:73px 25px 31px; }
  .postcard-theme-19 h3 { font-size:clamp(29px,7.4vw,36px); }
}

/* Slide 07: six numbered portraits sit softly behind the RAHEEN constellation tiles. */
.constellation-section .constellation-card > .constellation-photo {
  position:absolute;
  z-index:0;
  inset:0;
  overflow:hidden;
  border-radius:inherit;
  pointer-events:none;
  opacity:.74;
  transition:opacity .45s ease;
}
.constellation-section .constellation-photo img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 38%;
  filter:brightness(.58) saturate(.76) contrast(1.08);
  transform:scale(1.035);
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1),filter .55s ease;
}
.constellation-section .constellation-photo::after {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(8,13,30,.37),rgba(8,13,30,.72)),linear-gradient(135deg,color-mix(in srgb,var(--constellation-accent) 20%,transparent),transparent 65%);
  content:"";
}
.constellation-section .constellation-card > *:not(.constellation-photo) { position:relative; z-index:2; }
.constellation-section .constellation-card::before { z-index:1; border-color:color-mix(in srgb,var(--constellation-accent) 38%,transparent); }
.constellation-section .constellation-card::after { z-index:1; color:color-mix(in srgb,var(--constellation-accent) 76%,white); text-shadow:0 2px 20px rgba(0,0,0,.5); }
.constellation-section .constellation-card:hover > .constellation-photo { opacity:.94; }
.constellation-section .constellation-card:hover > .constellation-photo img { transform:scale(1.095); filter:brightness(.68) saturate(.92) contrast(1.06); }
@media (prefers-reduced-motion:reduce) {
  .constellation-section .constellation-photo,.constellation-section .constellation-photo img { transition:none; }
}

/* Month cards borrow their accent directly from their assigned cover photos. */
.month-card {
  border-color:color-mix(in srgb,var(--month-accent) 46%,rgba(255,255,255,.2));
  background:radial-gradient(ellipse at 82% 8%,color-mix(in srgb,var(--month-accent) 28%,transparent),transparent 48%),linear-gradient(135deg,color-mix(in srgb,var(--month-accent) 43%,#161827),color-mix(in srgb,var(--month-accent) 24%,#0c101b) 72%,color-mix(in srgb,var(--month-accent) 19%,#090d17));
  box-shadow:inset 0 1px rgba(255,255,255,.09),0 11px 28px rgba(0,0,0,.2),0 0 20px color-mix(in srgb,var(--month-accent) 10%,transparent);
}
.month-card > * { position:relative; z-index:1; }
.month-card:not(.month-october)::after {
  position:absolute;
  z-index:0;
  inset:0;
  background:linear-gradient(112deg,transparent 22%,rgba(255,255,255,.02) 39%,color-mix(in srgb,var(--month-accent) 14%,transparent) 49%,rgba(255,255,255,.055) 53%,transparent 70%);
  background-size:230% 100%;
  content:"";
  opacity:.62;
  pointer-events:none;
  animation:month-photo-sheen 9s ease-in-out infinite;
}
.month-photo { border-color:color-mix(in srgb,var(--month-accent) 58%,rgba(255,255,255,.26)); box-shadow:0 5px 18px rgba(0,0,0,.24),0 0 18px color-mix(in srgb,var(--month-accent) 17%,transparent); }
.month-photo img { filter:saturate(.94) contrast(1.025); }
.month-name { color:color-mix(in srgb,var(--month-accent) 38%,#fff); text-shadow:0 1px 12px color-mix(in srgb,var(--month-accent) 23%,transparent); }
.month-copy p { color:rgba(250,247,252,.94); text-shadow:0 1px 9px rgba(0,0,0,.22); }
.month-card:hover { transform:translateY(-5px) scale(1.018); border-color:color-mix(in srgb,var(--month-accent) 75%,white); box-shadow:0 18px 39px rgba(0,0,0,.31),0 0 29px color-mix(in srgb,var(--month-accent) 24%,transparent),inset 0 1px rgba(255,255,255,.14); }
.month-card:hover::after { animation-duration:1.35s; opacity:1; }
.month-card:hover .month-photo img { transform:scale(1.075); filter:saturate(1.08) contrast(1.04) brightness(1.04); }
.month-card.month-october {
  border-color:color-mix(in srgb,var(--month-accent) 60%,#ffdc78);
  background:radial-gradient(ellipse at 88% 7%,rgba(255,220,120,.3),transparent 42%),linear-gradient(128deg,color-mix(in srgb,var(--month-accent) 46%,#18314a),color-mix(in srgb,var(--month-accent) 32%,#12253c) 58%,#3b3027);
  box-shadow:0 14px 38px rgba(0,0,0,.24),0 0 28px color-mix(in srgb,var(--month-accent) 22%,transparent),0 0 24px rgba(255,214,110,.12),inset 0 1px rgba(255,255,255,.2);
}
.month-card.month-october .month-name { color:#fff0ae; }
.month-card.month-october .month-photo { border-color:color-mix(in srgb,var(--month-accent) 52%,#ffdc78); }
@keyframes month-photo-sheen { 0%,20% { background-position:145% 0; } 72%,100% { background-position:-145% 0; } }
@media (prefers-reduced-motion:reduce) { .month-card:not(.month-october)::after { animation:none; } }

/* Slide 13: a quiet constellation of wishes for the chapter ahead. */
.future-section { position:relative; isolation:isolate; overflow:hidden; padding-top:clamp(112px,13vh,150px); padding-bottom:clamp(90px,12vh,138px); }
.future-section::before { position:absolute; z-index:-1; top:4%; right:8%; width:min(50vw,560px); aspect-ratio:1; border:1px solid rgba(169,220,255,.09); border-radius:50%; background:radial-gradient(circle at 48% 48%,rgba(194,177,255,.09),rgba(169,220,255,.035) 36%,transparent 70%); content:""; animation:future-nebula-drift 12s ease-in-out infinite alternate; pointer-events:none; }
.future-wishes { display:grid; width:min(100%,1080px); grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,2.2vw,25px); margin:clamp(38px,6vh,64px) auto 0; }
.future-wish-card { position:relative; display:flex; min-height:225px; flex-direction:column; align-items:flex-start; justify-content:center; gap:17px; overflow:hidden; padding:clamp(22px,3vw,34px); border:1px solid rgba(169,220,255,.2); border-radius:4px 24px 4px 24px; background:radial-gradient(ellipse at 88% 8%,rgba(194,177,255,.13),transparent 47%),linear-gradient(145deg,rgba(24,33,59,.94),rgba(10,15,30,.97)); color:#f5f1f7; text-align:left; cursor:pointer; box-shadow:inset 0 1px rgba(255,255,255,.06),0 15px 38px rgba(0,0,0,.21); transition:transform .38s cubic-bezier(.2,.75,.2,1),border-color .3s,box-shadow .38s,background .38s; }
.future-wish-card:nth-child(2) { border-color:rgba(157,229,226,.22); background:radial-gradient(ellipse at 88% 8%,rgba(157,229,226,.12),transparent 47%),linear-gradient(145deg,rgba(19,38,53,.94),rgba(10,15,30,.97)); }
.future-wish-card:nth-child(3) { border-color:rgba(242,164,206,.22); background:radial-gradient(ellipse at 88% 8%,rgba(242,164,206,.12),transparent 47%),linear-gradient(145deg,rgba(43,27,50,.94),rgba(10,15,30,.97)); }
.future-wish-card::before { position:absolute; inset:9px; border:1px solid rgba(255,255,255,.045); border-radius:2px 18px 2px 18px; content:""; pointer-events:none; }
.future-star { color:#ffdc78; font-size:28px; line-height:1; text-shadow:0 0 18px rgba(255,220,120,.55); transition:transform .45s,color .3s,text-shadow .3s; }
.future-wish-title { color:#f6f2f7; font:700 clamp(20px,2vw,27px)/1.18 "Cormorant Garamond",var(--serif); }
.future-wish-copy { max-width:36ch; color:#bfc8da; font:500 14px/1.65 "DM Sans",var(--sans); }
.future-wish-card:hover,.future-wish-card.is-open { transform:translateY(-6px); border-color:rgba(255,220,120,.56); box-shadow:0 22px 48px rgba(0,0,0,.3),0 0 28px rgba(169,220,255,.09),inset 0 1px rgba(255,255,255,.1); }
.future-wish-card:hover .future-star,.future-wish-card.is-open .future-star { transform:rotate(35deg) scale(1.17); color:#fff2bd; text-shadow:0 0 24px rgba(255,220,120,.78); }
.future-wish-card:focus-visible { outline:2px solid #ffdc78; outline-offset:4px; }
.future-closing { width:min(100%,900px); margin:clamp(40px,6vh,65px) auto 0; color:#f2c4df; font:italic clamp(30px,4.6vw,52px)/1.12 "Cormorant Garamond",var(--serif); text-align:center; text-wrap:balance; text-shadow:0 0 32px rgba(242,164,206,.19); }
.future-section .story-ending { margin-top:52px; }
@keyframes future-nebula-drift { from { transform:translate3d(0,-1.5%,0) scale(.96); opacity:.72; } to { transform:translate3d(-2%,2%,0) scale(1.04); opacity:1; } }
@media (max-width:760px) { .future-wishes { grid-template-columns:1fr; max-width:520px; margin-top:34px; } .future-wish-card { min-height:165px; padding:24px; } .future-section .story-ending { margin-top:38px; } }
@media (prefers-reduced-motion:reduce) { .future-section::before { animation:none; } .future-wish-card,.future-star { transition:none; } }

/* Finale: three intentional, screen-sized chapters instead of one long scroll. */
.finale-section:not([hidden]) {
  display:block;
  overflow-x:hidden;
  overflow-y:auto;
  scroll-behavior:smooth;
  scroll-snap-type:y mandatory;
  scrollbar-width:thin;
  scrollbar-color:rgba(242,164,206,.35) transparent;
}
.finale-section:not([hidden]) > .wish-section,
.finale-message-slide,
.finale-section:not([hidden]) > .love-you-slide {
  box-sizing:border-box;
  width:100%;
  height:100svh;
  min-height:0;
  flex:none;
  scroll-snap-align:start;
  scroll-snap-stop:always;
}
.finale-section:not([hidden]) > .wish-section {
  justify-content:center;
  gap:0;
  padding:clamp(12px,2.5vh,24px) 24px 12px;
}
.finale-section .finale-intro { margin:0 0 clamp(8px,1.7vh,16px); }
.finale-section .closing-message { scroll-margin-top:0; }
.finale-section .finale-kicker { margin:0 0 5px; }
.finale-section .finale-chapter { font-size:8px; }
.finale-section .wish-section > .eyebrow { margin:0 0 7px; font-size:8px; line-height:1.6; }
.finale-section .wish-section > h2 { margin:0; font-size:clamp(42px,5.4vw,68px); line-height:.98; }
.finale-section .wish-subtitle { min-height:0; margin:8px 0 1px; font-size:12px; line-height:1.5; }
.finale-section .cake { width:min(310px,70vw); height:clamp(180px,29vh,230px); margin:4px auto 0; }
.finale-section .cake-plate { bottom:11px; }
.finale-section .cake-lower { bottom:28px; }
.finale-section .cake-upper { bottom:100px; }
.finale-section .candles { bottom:133px; }
.finale-section .candles span { height:39px; }
.finale-section .candles i { height:15px; }
.finale-section .wish-actions { min-height:42px; margin-top:0; }
.finale-section .wish-actions .pill { min-height:40px; padding:0 23px; }
.finale-section .wish-hint { min-height:16px; margin:4px 0 0; font-size:10px; }
.finale-section .closing-invite { min-height:30px; margin:2px 0 0; }
.finale-section .wish-section.is-blown .wish-hint { color:#b8edc7; }

.finale-balloons { position:absolute; top:14%; display:flex; gap:12px; opacity:.78; animation:finale-balloon-drift 5.5s ease-in-out infinite; }
.finale-bouquets::before,.finale-bouquets::after { position:absolute; bottom:-10%; width:min(35vw,420px); height:min(43vh,380px); background:linear-gradient(145deg,rgba(15,13,31,.5),rgba(15,13,31,.24)),url("assets/postcard-flowers/19-background.jpg") center 46%/cover; content:""; opacity:.24; filter:saturate(.76) brightness(.76); mix-blend-mode:screen; mask-image:radial-gradient(ellipse at center,#000 30%,transparent 73%); animation:photo-bouquet-drift 10s ease-in-out infinite alternate; }
.finale-bouquets::before { left:-7%; }
.finale-bouquets::after { right:-7%; transform:scaleX(-1); animation-delay:-4s; }
.balloons-left { left:7%; }
.balloons-right { right:7%; animation-delay:-2.2s; }
.finale-balloons i { position:relative; display:block; width:28px; height:36px; border:1px solid rgba(255,255,255,.48); border-radius:52% 48% 48% 52%; background:linear-gradient(145deg,rgba(255,220,120,.92),rgba(235,130,172,.66)); box-shadow:inset -5px -4px 9px rgba(34,15,43,.2),0 0 19px rgba(255,220,120,.16); transform:rotate(-9deg); }
.finale-balloons i::before { position:absolute; top:34px; left:12px; width:1px; height:75px; background:linear-gradient(rgba(255,255,255,.48),transparent); content:""; }
.finale-balloons i:nth-child(2) { margin-top:17px; background:linear-gradient(145deg,rgba(169,220,255,.9),rgba(116,151,221,.66)); transform:rotate(8deg); }
.finale-balloons i:nth-child(3) { margin-top:5px; background:linear-gradient(145deg,rgba(242,164,206,.94),rgba(174,94,157,.68)); transform:rotate(13deg); }
.finale-gift { position:absolute; bottom:10%; width:46px; height:38px; border:1px solid rgba(255,220,120,.5); background:linear-gradient(145deg,rgba(174,94,157,.65),rgba(73,55,108,.75)); box-shadow:0 8px 20px rgba(0,0,0,.22),0 0 18px rgba(242,164,206,.12); animation:gift-bob 4.4s ease-in-out infinite; }
.gift-left { left:9%; rotate:-7deg; }
.gift-right { right:9%; bottom:11%; background:linear-gradient(145deg,rgba(76,137,166,.7),rgba(79,72,128,.75)); animation-delay:-1.7s; rotate:6deg; }
.finale-gift::before { position:absolute; top:-8px; left:-3px; width:calc(100% + 6px); height:9px; border:1px solid rgba(255,255,255,.5); background:rgba(255,220,120,.55); content:""; }
.finale-gift i { position:absolute; top:0; bottom:0; left:47%; width:6px; background:rgba(255,220,120,.6); }
.finale-gift b,.finale-gift b::after { position:absolute; top:-17px; left:36%; width:12px; height:10px; border:2px solid rgba(255,220,120,.7); border-radius:90% 90% 0 90%; content:""; }
.finale-gift b::after { top:-2px; left:6px; transform:scaleX(-1); }
@keyframes finale-balloon-drift { 0%,100% { translate:0 0; } 50% { translate:0 -10px; } }
@keyframes gift-bob { 0%,100% { translate:0 0; } 50% { translate:0 -5px; } }
@keyframes photo-bouquet-drift { from { translate:0 0; scale:.98; } to { translate:0 -10px; scale:1.025; } }

.finale-message-slide { display:grid; place-items:center; padding:clamp(26px,6vh,64px) 24px; background:radial-gradient(ellipse at 50% 46%,rgba(93,69,133,.21),transparent 44%),linear-gradient(150deg,rgba(12,13,27,.68),rgba(18,20,39,.78)); }
.finale-section .closing-message { width:min(920px,100%); margin:0; padding:clamp(20px,4vh,42px) clamp(22px,5vw,66px); text-align:center; }
.finale-section .closing-star { margin:0 auto 12px; }
.finale-section .closing-message .eyebrow { margin:0 0 13px; }
.finale-section .closing-message h2 { margin:0; font-size:clamp(39px,5.3vw,66px); line-height:1.02; }
.finale-section .closing-message > p:not(.eyebrow) { max-width:65ch; min-height:0; margin:16px auto 0; font-size:clamp(16px,1.7vw,20px); line-height:1.48; }
.finale-section .closing-message .closing-extra { color:#b9c7d9; }
.finale-section .closing-message .closing-signature { margin:18px auto 0; font-size:16px; }
.finale-next { display:inline-flex; min-height:36px; align-items:center; gap:12px; margin-top:20px; padding:0 18px; border:1px solid rgba(255,220,120,.42); border-radius:999px; color:#ffe7b0; font:700 8px "Manrope",var(--sans); letter-spacing:.13em; text-transform:uppercase; transition:background .25s,transform .25s,border-color .25s; }
.finale-next:hover { transform:translateY(2px); border-color:#ffe7b0; background:rgba(255,220,120,.09); }

.finale-section:not([hidden]) > .love-you-slide { min-height:100svh; padding:30px 24px 24px; }
.finale-section .love-you-kicker { margin:0 0 15px; font-size:9px; }
.finale-section .love-you-slide h2 { font-size:clamp(76px,13vw,156px); line-height:.78; letter-spacing:-.065em; }
.finale-section .love-you-slide h2 em { padding:.13em .08em .12em 0; }
.finale-section .love-you-note { max-width:460px; margin:18px 0 0; font-size:clamp(13px,1.4vw,16px); }
.finale-section .love-you-again { min-height:42px; margin-top:23px; }
.finale-section .love-you-slide .site-footer { margin-top:clamp(28px,6vh,52px); font-size:8px; }
.finale-section .finale-return { display:none; }
@keyframes finale-message-arrive { from { opacity:0; transform:translateY(18px) scale(.99); filter:blur(4px); } to { opacity:1; transform:translateY(0) scale(1); filter:blur(0); } }
.finale-section .wish-section.finale-visible .finale-intro,
.finale-section .wish-section.finale-visible > .eyebrow,
.finale-section .wish-section.finale-visible > h2,
.finale-section .wish-section.finale-visible .wish-subtitle,
.finale-section .wish-section.finale-visible .wish-actions,
.finale-section .wish-section.finale-visible .wish-hint { animation:finale-message-arrive .68s cubic-bezier(.2,.7,.2,1) both; }
.finale-section .wish-section.finale-visible > .eyebrow { animation-delay:.08s; }
.finale-section .wish-section.finale-visible > h2 { animation-delay:.14s; }
.finale-section .wish-section.finale-visible .wish-subtitle { animation-delay:.2s; }
.finale-section .wish-section.finale-visible .wish-actions { animation-delay:.26s; }
.finale-section .wish-section.finale-visible .wish-hint { animation-delay:.32s; }
.finale-section .finale-message-slide.finale-visible .closing-message { animation:finale-message-arrive .8s cubic-bezier(.2,.7,.2,1) both; }
.finale-section .love-you-slide.finale-visible .love-you-kicker { animation:finale-message-arrive .65s .06s both; }
.finale-section .love-you-slide.finale-visible h2 { animation:love-you-title 1s cubic-bezier(.2,.7,.2,1) both; }
@media (max-height:680px) {
  .finale-section:not([hidden]) > .wish-section { padding-top:8px; padding-bottom:6px; }
  .finale-section .finale-intro { margin-bottom:6px; }
  .finale-section .wish-section > h2 { font-size:clamp(38px,5vw,54px); }
  .finale-section .wish-subtitle { margin-top:4px; }
  .finale-section .cake { height:180px; }
  .finale-section .cake-plate { bottom:7px; }
  .finale-section .cake-lower { bottom:24px; }
  .finale-section .cake-upper { bottom:87px; }
  .finale-section .candles { bottom:116px; }
  .finale-section .candles span { height:34px; }
  .finale-section .wish-hint { margin-top:1px; }
  .finale-section .love-you-slide .site-footer { margin-top:20px; }
}
@media (max-width:700px) {
  .finale-section .finale-intro { margin-bottom:8px; }
  .finale-section .wish-section > .eyebrow { font-size:7px; }
  .finale-section .wish-section > h2 { font-size:clamp(40px,10vw,58px); }
  .finale-section .wish-subtitle { max-width:34ch; font-size:11px; }
  .finale-section .cake { width:min(290px,76vw); height:clamp(180px,27vh,218px); }
  .finale-section .cake-plate { bottom:10px; }
  .finale-section .cake-lower { bottom:27px; }
  .finale-section .cake-upper { bottom:96px; }
  .finale-section .candles { bottom:129px; }
  .finale-section .candles span { height:37px; }
  .finale-balloons { top:20%; scale:.72; }
  .balloons-left { left:1%; transform-origin:left top; }
  .balloons-right { right:1%; transform-origin:right top; }
  .finale-gift { scale:.75; bottom:8%; }
  .gift-left { left:2%; transform-origin:left bottom; }
  .gift-right { right:2%; transform-origin:right bottom; }
  .finale-message-slide { padding:22px 20px; }
  .finale-section .closing-message { padding:22px 4px; }
  .finale-section .closing-message h2 { font-size:clamp(37px,9vw,54px); }
  .finale-section .closing-message > p:not(.eyebrow) { font-size:15px; }
  .finale-section:not([hidden]) > .love-you-slide { padding-inline:18px; }
  .finale-section .love-you-slide h2 { font-size:clamp(68px,19vw,112px); }
  .finale-section .love-you-slide .site-footer { margin-top:32px; }
}
@media (prefers-reduced-motion:reduce) {
  .finale-balloons,.finale-gift,.finale-bouquets::before,.finale-bouquets::after { animation:none; }
  .finale-section:not([hidden]) { scroll-behavior:auto; }
  .finale-section .wish-section.finale-visible .finale-intro,
  .finale-section .wish-section.finale-visible > .eyebrow,
  .finale-section .wish-section.finale-visible > h2,
  .finale-section .wish-section.finale-visible .wish-subtitle,
  .finale-section .wish-section.finale-visible .wish-actions,
  .finale-section .wish-section.finale-visible .wish-hint,
  .finale-section .finale-message-slide.finale-visible .closing-message { animation:none; }
}

/* Let the six constellation portraits read clearly; keep only a soft text-safe fade at the bottom. */
.constellation-section .constellation-card > .constellation-photo { opacity:.96; }
.constellation-section .constellation-card > .constellation-photo { box-shadow:inset 0 0 0 1px rgba(255,255,255,.15); transition:opacity .4s ease,box-shadow .4s ease; }
.constellation-section .constellation-photo img {
  object-position:center 40%;
  filter:brightness(.9) saturate(1.02) contrast(1.035);
  transform:scale(1.015);
}
.constellation-section .constellation-photo::after {
  background:linear-gradient(180deg,rgba(8,13,30,.02) 0%,rgba(8,13,30,.04) 43%,rgba(8,13,30,.56) 100%),linear-gradient(135deg,color-mix(in srgb,var(--constellation-accent) 9%,transparent),transparent 68%),linear-gradient(105deg,transparent 39%,rgba(255,245,220,.1) 45%,rgba(255,255,255,.28) 48%,rgba(169,220,255,.12) 51%,transparent 57%);
  background-size:100% 100%,100% 100%,230% 100%;
  background-position:center,center,145% 0;
  transition:box-shadow .4s ease;
}
.constellation-section .constellation-card:hover > .constellation-photo { opacity:1; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--constellation-accent) 72%,white),inset 0 0 24px color-mix(in srgb,var(--constellation-accent) 13%,transparent); }
.constellation-section .constellation-card:hover > .constellation-photo img {
  transform:scale(1.075);
  filter:brightness(1.035) saturate(1.12) contrast(1.055);
}
.constellation-section .constellation-card:hover > .constellation-photo::after { animation:constellation-eye-glint 1.35s ease both; }
.constellation-section .constellation-photo { isolation:isolate; }
.constellation-section .constellation-photo::before {
  position:absolute;
  z-index:1;
  inset:-8%;
  background:radial-gradient(circle at 50% 39%,rgba(255,250,220,.78) 0 1px,rgba(255,240,190,.28) 2px,transparent 9px),repeating-conic-gradient(from 0deg at 50% 39%,transparent 0deg 11deg,color-mix(in srgb,var(--constellation-accent) 38%,rgba(255,255,255,.48)) 11.5deg 12.2deg,transparent 13deg 24deg);
  content:"";
  opacity:.34;
  mix-blend-mode:screen;
  mask-image:radial-gradient(ellipse at 50% 39%,#000 0%,rgba(0,0,0,.8) 22%,transparent 68%);
  pointer-events:none;
  animation:constellation-photo-rays 24s linear infinite, constellation-photo-twinkle 4.8s ease-in-out infinite alternate;
}

/* Give the constellation portraits a soft, intentional frame instead of a bare square edge. */
.constellation-section .constellation-card {
  border-radius:20px;
  border-color:color-mix(in srgb,var(--constellation-accent) 48%,rgba(210,220,245,.38));
  background:linear-gradient(145deg,color-mix(in srgb,var(--constellation-accent) 34%,rgba(23,30,49,.96)),color-mix(in srgb,var(--constellation-accent) 18%,rgba(13,19,36,.96)));
  box-shadow:inset 0 1px rgba(255,255,255,.2),0 16px 38px rgba(0,0,0,.16),0 0 25px color-mix(in srgb,var(--constellation-accent) 12%,transparent);
  animation-timing-function:cubic-bezier(.45,0,.55,1);
}
.constellation-section .constellation-card > .constellation-photo {
  inset:1px;
  border-radius:17px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}
.constellation-section .constellation-card:hover {
  border-color:color-mix(in srgb,var(--constellation-accent) 72%,white);
  background:linear-gradient(145deg,color-mix(in srgb,var(--constellation-accent) 42%,rgba(23,30,49,.96)),color-mix(in srgb,var(--constellation-accent) 24%,rgba(13,19,36,.96)));
  box-shadow:inset 0 1px rgba(255,255,255,.22),0 20px 44px rgba(0,0,0,.2),0 0 30px color-mix(in srgb,var(--constellation-accent) 18%,transparent);
}
.constellation-section .constellation-card:nth-of-type(2n) .constellation-photo::before { animation-delay:-8s,-2s; }
.constellation-section .constellation-card:nth-of-type(3n) .constellation-photo::before { animation-delay:-15s,-3.5s; }
.constellation-section .constellation-card:hover .constellation-photo::before { opacity:.58; }
.constellation-section .constellation-card:hover { box-shadow:0 18px 38px rgba(0,0,0,.27),0 0 26px color-mix(in srgb,var(--constellation-accent) 19%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--constellation-accent) 42%,transparent); }
.constellation-section .constellation-card:focus-visible { outline:2px solid color-mix(in srgb,var(--constellation-accent) 75%,white); outline-offset:4px; }
@keyframes constellation-photo-rays { to { rotate:360deg; } }
@keyframes constellation-photo-twinkle { from { filter:brightness(.82); } to { filter:brightness(1.35); } }
@keyframes constellation-eye-glint { from { background-position:center,center,145% 0; } to { background-position:center,center,-145% 0; } }
@media (prefers-reduced-motion:reduce) {
  .constellation-section .constellation-photo::before { animation:none; opacity:.3; }
}
.constellation-section .constellation-photo::before {
  inset:-24%;
  background:radial-gradient(circle at 50% 39%,rgba(255,255,245,.98) 0 2px,rgba(255,237,190,.88) 3px 7px,rgba(255,220,120,.5) 8px 19px,transparent 31px),repeating-conic-gradient(from 0deg at 50% 39%,transparent 0deg 9deg,color-mix(in srgb,var(--constellation-accent) 48%,rgba(255,245,198,.88)) 9.3deg 12.6deg,transparent 13.2deg 22deg),radial-gradient(ellipse at 50% 39%,rgba(255,220,120,.22),transparent 54%);
  opacity:.62;
  mask-image:radial-gradient(ellipse at 50% 39%,#000 0%,rgba(0,0,0,.96) 35%,rgba(0,0,0,.65) 58%,transparent 82%);
  animation:constellation-photo-rays 19s linear infinite, constellation-photo-twinkle 3.6s ease-in-out infinite alternate;
}
.constellation-section .constellation-card:nth-of-type(2n) .constellation-photo::before { animation-delay:-7s,-1.7s; }
.constellation-section .constellation-card:nth-of-type(3n) .constellation-photo::before { animation-delay:-12s,-2.8s; }
.constellation-section .constellation-card:hover .constellation-photo::before { opacity:.92; }
@media (prefers-reduced-motion:reduce) {
  .constellation-section .constellation-photo::before { animation:none; opacity:.52; }
}
/* Soft edge light beams: keep the portrait's face and eyes clear of the flare. */
.constellation-section .constellation-photo::before {
  inset:-22%;
  background:radial-gradient(circle at 50% 8%,rgba(255,250,225,.46) 0 2px,rgba(255,224,150,.22) 8px,transparent 38px),repeating-conic-gradient(from 0deg at 50% 8%,transparent 0deg 12deg,color-mix(in srgb,var(--constellation-accent) 28%,rgba(255,244,207,.45)) 13deg 27deg,transparent 29deg 48deg),radial-gradient(ellipse at 50% 8%,rgba(255,220,120,.14),transparent 68%);
  opacity:.38;
  filter:blur(9px);
  mask-image:radial-gradient(ellipse at 50% 48%,transparent 0%,transparent 28%,rgba(0,0,0,.5) 43%,#000 72%);
  animation:constellation-photo-rays 28s linear infinite, constellation-rays-breathe 5s ease-in-out infinite alternate;
}
.constellation-section .constellation-card:nth-of-type(2n) .constellation-photo::before { animation-delay:-9s,-2s; }
.constellation-section .constellation-card:nth-of-type(3n) .constellation-photo::before { animation-delay:-18s,-3.4s; }
.constellation-section .constellation-card:hover .constellation-photo::before { opacity:.52; }
@keyframes constellation-rays-breathe { from { opacity:.26; } to { opacity:.46; } }
@media (prefers-reduced-motion:reduce) {
  .constellation-section .constellation-photo::before { animation:none; opacity:.32; }
}

/* Little Loops: a smoother home for all 40 ordered 10–20 second memories. */
.little-loops-section .clip-carousel { max-width:1280px; gap:clamp(26px,4vw,56px); }
.little-loops-section .clip-media { min-height:clamp(300px,38vw,490px); border-radius:4px 26px 4px 26px; border-color:rgba(157,229,226,.46); box-shadow:0 24px 70px rgba(0,0,0,.27),0 0 34px rgba(157,229,226,.055),inset 0 0 0 6px rgba(255,255,255,.025); }
.little-loops-section .clip-video { filter:saturate(1.08) contrast(1.025) brightness(1.025); transition:filter .5s ease,opacity .5s ease; }
.little-loops-section .clip-video:hover { filter:saturate(1.12) contrast(1.04) brightness(1.045); }
.little-loops-section .clip-caption-panel { min-width:0; }
.little-loops-section .clip-caption { font-weight:700; text-shadow:0 0 34px rgba(157,229,226,.1); }
.little-loops-section .clip-navigation { width:100%; max-width:460px; gap:11px; }
.little-loops-section .clip-dots { flex:1 1 auto; min-width:0; max-width:100%; gap:7px; overflow-x:auto; padding:10px 3px; scrollbar-width:none; scroll-behavior:smooth; scroll-snap-type:x proximity; }
.little-loops-section .clip-dots::-webkit-scrollbar { display:none; }
.little-loops-section .clip-dot { flex:0 0 6px; width:6px; scroll-snap-align:center; }
.little-loops-section .clip-dot.is-active { flex-basis:19px; }
.little-loops-section .clip-dot:focus-visible,.little-loops-section .clip-arrow:focus-visible { outline:2px solid #9de5e2; outline-offset:4px; }
.little-loops-section .clip-swipe-hint { letter-spacing:.24em; }
@media (max-width:760px) {
  .little-loops-section .clip-media { min-height:clamp(250px,62vw,380px); border-radius:4px 20px 4px 20px; }
  .little-loops-section .clip-navigation { max-width:100%; }
  .little-loops-section .clip-dots { gap:6px; }
}
@media (prefers-reduced-motion:reduce) {
  .little-loops-section .clip-video,.little-loops-section .clip-dots { transition:none; scroll-behavior:auto; }
}

/* Brighter cinematic polish and an Instagram-style audio control for Little Loops. */
.little-loops-section { position:relative; isolation:isolate; }
.little-loops-section::before { position:absolute; z-index:-1; top:11%; left:50%; width:min(1000px,92vw); aspect-ratio:1.7; border-radius:50%; background:radial-gradient(ellipse at 24% 52%,rgba(157,229,226,.11),transparent 42%),radial-gradient(ellipse at 78% 45%,rgba(194,177,255,.12),transparent 42%),radial-gradient(ellipse at 51% 79%,rgba(242,164,206,.085),transparent 46%); content:""; filter:blur(12px); transform:translateX(-50%); animation:loops-aurora 12s ease-in-out infinite alternate; pointer-events:none; }
.little-loops-section .clip-media { border-color:rgba(157,229,226,.56); box-shadow:0 25px 74px rgba(0,0,0,.3),0 0 38px rgba(157,229,226,.1),inset 0 0 0 6px rgba(255,255,255,.03); transition:border-color .45s,box-shadow .55s,transform .55s; }
.little-loops-section .clip-media:hover { border-color:rgba(194,177,255,.62); box-shadow:0 29px 82px rgba(0,0,0,.34),0 0 44px rgba(157,229,226,.14),0 0 27px rgba(242,164,206,.08),inset 0 0 0 6px rgba(255,255,255,.04); }
.little-loops-section .clip-video { filter:saturate(1.14) contrast(1.045) brightness(1.035); }
.clip-color-wash { position:absolute; z-index:1; inset:0; overflow:hidden; background:radial-gradient(ellipse at 9% 88%,rgba(157,229,226,.13),transparent 42%),radial-gradient(ellipse at 93% 12%,rgba(242,164,206,.12),transparent 43%); mix-blend-mode:soft-light; opacity:.75; pointer-events:none; }
.clip-color-wash::after { position:absolute; inset:-25% -80%; background:linear-gradient(112deg,transparent 39%,rgba(255,255,255,.09) 48%,rgba(194,177,255,.08) 51%,transparent 60%); content:""; transform:translateX(-36%) rotate(-4deg); animation:clip-gloss-sweep 9s cubic-bezier(.35,.05,.6,.95) infinite; }
.clip-audio-toggle { position:absolute; z-index:4; right:17px; bottom:17px; display:grid; width:44px; height:44px; min-height:44px; place-items:center; padding:0; border:1px solid rgba(206,231,255,.54); border-radius:999px; background:rgba(8,13,27,.72); color:#f5eff8; font:800 8px "Manrope",var(--sans); letter-spacing:.12em; text-transform:uppercase; box-shadow:0 8px 24px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.1); backdrop-filter:blur(14px); cursor:pointer; transition:transform .23s,border-color .28s,background .28s,box-shadow .28s,color .28s; }
.clip-audio-toggle:hover,.clip-audio-toggle.is-sound-on { transform:translateY(-2px); border-color:#9de5e2; background:rgba(19,35,47,.86); color:#c8fbf4; box-shadow:0 10px 28px rgba(0,0,0,.3),0 0 22px rgba(157,229,226,.17); }
.clip-audio-icon { display:grid; width:24px; height:24px; place-items:center; border-radius:50%; background:rgba(157,229,226,.12); color:#9de5e2; font:700 15px/1 var(--serif); }
.clip-audio-icon svg { width:18px; height:18px; overflow:visible; fill:currentColor; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.clip-audio-icon .audio-wave { display:none; fill:none; }
.clip-audio-icon .audio-mute { fill:none; }
.clip-audio-toggle.is-sound-on .clip-audio-icon .audio-wave { display:block; }
.clip-audio-toggle.is-sound-on .clip-audio-icon .audio-mute { display:none; }
.clip-audio-toggle.is-sound-on .clip-audio-icon { animation:audio-glow 1.8s ease-in-out infinite; }
.little-loops-section .clip-caption-panel { position:relative; padding:25px 0 25px clamp(3px,1vw,16px); }
.little-loops-section .clip-caption-panel::before { position:absolute; top:14%; bottom:14%; left:0; width:1px; background:linear-gradient(transparent,rgba(157,229,226,.5),rgba(194,177,255,.4),rgba(242,164,206,.35),transparent); content:""; box-shadow:0 0 14px rgba(157,229,226,.18); }
.little-loops-section .clip-caption { color:#faf5fb; font-size:clamp(39px,4.4vw,64px); text-shadow:0 0 34px rgba(157,229,226,.12),0 7px 28px rgba(0,0,0,.22); }
.little-loops-section .clip-counter b { color:#d4c2ff; }
.little-loops-section .clip-dot.is-active { background:linear-gradient(90deg,#9de5e2,#c2b1ff,#f2a4ce); box-shadow:0 0 17px rgba(194,177,255,.55); }
@keyframes loops-aurora { from { opacity:.68; scale:.94; } to { opacity:1; scale:1.05; } }
@keyframes clip-gloss-sweep { 0%,20% { translate:-18% 0; opacity:0; } 38% { opacity:.8; } 64%,100% { translate:45% 0; opacity:0; } }
@keyframes audio-glow { 0%,100% { box-shadow:0 0 0 rgba(157,229,226,0); } 50% { box-shadow:0 0 15px rgba(157,229,226,.55); } }
@media (max-width:760px) {
  .little-loops-section .clip-caption-panel { padding:15px 0 4px 12px; }
  .little-loops-section .clip-caption-panel::before { top:6%; bottom:6%; }
  .clip-audio-toggle { right:11px; bottom:11px; width:40px; height:40px; min-height:40px; padding:0; }
}
@media (prefers-reduced-motion:reduce) {
  .little-loops-section::before,.clip-color-wash::after,.clip-audio-toggle.is-sound-on .clip-audio-icon { animation:none; }
}

/* Instagram-style tap feedback, with a persistent play affordance while paused. */
.little-loops-section .clip-media {
  border:1px solid transparent;
  background:linear-gradient(#0c1220,#0c1220) padding-box,linear-gradient(135deg,#8ce4e4,#b9a4ff 34%,#f3a0cf 68%,#ffd879) border-box;
  box-shadow:0 25px 74px rgba(0,0,0,.34),0 0 34px rgba(112,213,221,.16),0 0 31px rgba(183,146,247,.11),inset 0 0 0 5px rgba(255,255,255,.045);
  animation:clip-frame-breathe 8s ease-in-out infinite alternate;
}
.little-loops-section .clip-media:hover {
  border-color:transparent;
  box-shadow:0 29px 82px rgba(0,0,0,.38),0 0 44px rgba(112,213,221,.21),0 0 38px rgba(243,160,207,.14),inset 0 0 0 5px rgba(255,255,255,.06);
}
.little-loops-section .clip-video { filter:saturate(1.12) contrast(1.075) brightness(.97); transition:filter .5s ease,opacity .5s ease; }
.little-loops-section .clip-video:hover { filter:saturate(1.16) contrast(1.085) brightness(.99); }
.little-loops-section .clip-color-wash { opacity:.56; background:radial-gradient(ellipse at 8% 92%,rgba(82,222,209,.16),transparent 43%),radial-gradient(ellipse at 94% 10%,rgba(244,143,199,.14),transparent 44%),linear-gradient(135deg,rgba(96,135,242,.045),transparent 55%,rgba(255,209,116,.045)); }
.clip-play-toggle {
  position:absolute; z-index:5; top:50%; left:50%; display:grid; width:76px; aspect-ratio:1; place-items:center;
  padding:0; border:1px solid rgba(255,255,255,.88); border-radius:50%;
  background:rgba(13,20,37,.56); color:#fff; opacity:0; pointer-events:none;
  box-shadow:0 8px 32px rgba(0,0,0,.35),0 0 28px rgba(157,229,226,.24),inset 0 1px rgba(255,255,255,.45);
  backdrop-filter:blur(12px); transform:translate(-50%,-50%) scale(.78);
  transition:opacity .2s ease,transform .28s cubic-bezier(.2,.8,.2,1),background .25s,box-shadow .25s;
  cursor:pointer;
}
.clip-play-toggle.is-feedback,.clip-media.is-paused .clip-play-toggle,.clip-play-toggle:focus-visible {
  opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1);
}
.clip-play-toggle.is-feedback { animation:clip-playback-bloom .88s ease both; }
.clip-play-toggle:hover,.clip-play-toggle:focus-visible { background:rgba(22,35,55,.78); box-shadow:0 9px 36px rgba(0,0,0,.38),0 0 32px rgba(157,229,226,.32),inset 0 1px rgba(255,255,255,.55); }
.clip-play-toggle:focus-visible { outline:2px solid #fff; outline-offset:5px; }
.clip-play-icon { width:27px; height:27px; overflow:visible; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.clip-triangle-icon { fill:currentColor; stroke:none; }
.clip-play-icon { display:none; }
.clip-play-toggle[data-paused="false"] [data-icon="pause"],.clip-play-toggle[data-paused="true"] [data-icon="play"] { display:block; }
.clip-play-toggle.is-feedback[data-action="pause"] [data-icon="pause"] { display:block; }
.clip-play-toggle.is-feedback[data-action="pause"] [data-icon="play"] { display:none; }
.clip-play-toggle.is-feedback[data-action="play"] [data-icon="play"] { display:block; }
.clip-play-toggle.is-feedback[data-action="play"] [data-icon="pause"] { display:none; }
@keyframes clip-playback-bloom {
  0% { opacity:0; transform:translate(-50%,-50%) scale(.55); }
  28% { opacity:1; transform:translate(-50%,-50%) scale(1.08); }
  100% { opacity:0; transform:translate(-50%,-50%) scale(1); }
}
@keyframes clip-frame-breathe {
  0%,100% { box-shadow:0 25px 74px rgba(0,0,0,.34),0 0 30px rgba(112,213,221,.14),0 0 24px rgba(183,146,247,.09),inset 0 0 0 5px rgba(255,255,255,.04); }
  50% { box-shadow:0 27px 78px rgba(0,0,0,.36),0 0 39px rgba(112,213,221,.21),0 0 34px rgba(243,160,207,.14),inset 0 0 0 5px rgba(255,255,255,.055); }
}
@media (max-width:760px) { .clip-play-toggle { width:64px; } }
@media (prefers-reduced-motion:reduce) {
  .little-loops-section .clip-media,.clip-play-toggle.is-feedback { animation:none; }
  .clip-play-toggle { transition:none; }
}

/* Slide 07: an interactive glossary of the little language only we share. */
.lore-section { position:relative; isolation:isolate; overflow:hidden; }
.lore-section::before { position:absolute; z-index:-1; top:15%; right:-12%; width:min(58vw,720px); aspect-ratio:1; border:1px solid rgba(194,177,255,.08); border-radius:50%; background:radial-gradient(circle at 40% 42%,rgba(169,220,255,.09),rgba(194,177,255,.035) 46%,transparent 72%); content:""; pointer-events:none; }
.lore-grid { position:relative; display:grid; width:min(100%,1120px); grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; margin:38px auto 0; }
.lore-entry { --lore-accent:#ffd66e; position:relative; display:flex; min-width:0; min-height:228px; flex-direction:column; align-items:flex-start; overflow:hidden; padding:23px 24px 18px; border:1px solid color-mix(in srgb,var(--lore-accent) 30%,rgba(176,187,216,.15)); border-radius:4px 18px 4px 18px; background:radial-gradient(ellipse at 100% 0%,color-mix(in srgb,var(--lore-accent) 12%,transparent),transparent 53%),linear-gradient(145deg,color-mix(in srgb,var(--lore-accent) 7%,#151b30),rgba(10,15,28,.96) 78%); color:#f4f0f7; text-align:left; cursor:pointer; box-shadow:inset 0 1px rgba(255,255,255,.06),0 12px 30px rgba(0,0,0,.17); transition:transform .38s cubic-bezier(.2,.72,.2,1),border-color .34s ease,background .4s ease,box-shadow .4s ease; }
.lore-entry::before { position:absolute; top:0; right:18px; left:18px; height:1px; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--lore-accent) 68%,white),transparent); content:""; opacity:.58; transition:opacity .35s,filter .35s; }
.lore-entry::after { position:absolute; top:20px; right:21px; width:7px; height:7px; border:1px solid color-mix(in srgb,var(--lore-accent) 65%,white); border-radius:50%; background:var(--lore-accent); box-shadow:0 0 13px color-mix(in srgb,var(--lore-accent) 48%,transparent); content:""; opacity:.66; transition:transform .4s,opacity .35s,box-shadow .35s; }
.lore-entry-number { color:#9da9bf; font:800 8px/1.4 "Manrope",var(--sans); letter-spacing:.17em; }
.lore-entry-number i { padding-inline:4px; color:var(--lore-accent); font-style:normal; }
.lore-term { margin-top:23px; color:#f7f2f6; font:600 clamp(28px,3vw,39px)/1.05 "Cormorant Garamond",var(--serif); letter-spacing:-.025em; transition:color .3s,text-shadow .3s; }
.lore-pronunciation { margin-top:7px; color:color-mix(in srgb,var(--lore-accent) 76%,#d4d9e6); font:700 8px/1.4 "Manrope",var(--sans); letter-spacing:.1em; }
.lore-definition { display:block; max-height:0; margin-top:0; overflow:hidden; color:#c1cada; font:500 12px/1.65 "DM Sans",var(--sans); opacity:0; transform:translateY(-5px); transition:max-height .4s ease,margin .35s ease,opacity .3s ease,transform .35s ease; }
.lore-entry-action { display:flex; width:100%; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:19px; color:#8491aa; font:800 8px/1 "Manrope",var(--sans); letter-spacing:.16em; }
.lore-entry-action::before { position:absolute; right:47px; bottom:23px; left:24px; height:1px; background:linear-gradient(90deg,color-mix(in srgb,var(--lore-accent) 35%,transparent),transparent); content:""; transform:scaleX(.52); transform-origin:left; transition:transform .38s ease,opacity .38s; opacity:.58; }
.lore-entry-action b { display:grid; width:23px; height:23px; flex:0 0 23px; place-items:center; border:1px solid color-mix(in srgb,var(--lore-accent) 38%,rgba(255,255,255,.14)); border-radius:50%; color:var(--lore-accent); font:500 15px/1 var(--sans); transition:transform .35s ease,background .35s,border-color .35s,box-shadow .35s; }
.lore-entry:hover,.lore-entry[aria-expanded="true"] { z-index:1; transform:translateY(-4px); border-color:color-mix(in srgb,var(--lore-accent) 62%,rgba(255,255,255,.34)); background:radial-gradient(ellipse at 100% 0%,color-mix(in srgb,var(--lore-accent) 18%,transparent),transparent 55%),linear-gradient(145deg,color-mix(in srgb,var(--lore-accent) 11%,#151b30),rgba(10,15,28,.96) 78%); box-shadow:0 17px 38px rgba(0,0,0,.23),0 0 25px color-mix(in srgb,var(--lore-accent) 9%,transparent),inset 0 1px rgba(255,255,255,.08); }
.lore-entry:hover::before,.lore-entry[aria-expanded="true"]::before { opacity:.95; filter:drop-shadow(0 0 4px var(--lore-accent)); }
.lore-entry:hover::after,.lore-entry[aria-expanded="true"]::after { transform:scale(1.3); opacity:1; box-shadow:0 0 18px color-mix(in srgb,var(--lore-accent) 62%,transparent); }
.lore-entry:hover .lore-term,.lore-entry[aria-expanded="true"] .lore-term { color:color-mix(in srgb,var(--lore-accent) 60%,white); text-shadow:0 0 22px color-mix(in srgb,var(--lore-accent) 22%,transparent); }
.lore-entry[aria-expanded="true"] .lore-definition { max-height:100px; margin-top:14px; opacity:1; transform:translateY(0); }
.lore-entry[aria-expanded="true"] .lore-entry-action::before { transform:scaleX(1); opacity:.9; }
.lore-entry[aria-expanded="true"] .lore-entry-action b { transform:rotate(45deg); border-color:var(--lore-accent); background:color-mix(in srgb,var(--lore-accent) 13%,transparent); box-shadow:0 0 13px color-mix(in srgb,var(--lore-accent) 19%,transparent); }
.lore-entry:focus-visible { outline:2px solid color-mix(in srgb,var(--lore-accent) 78%,white); outline-offset:4px; }
@media (max-width:900px) { .lore-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px) { .lore-grid { grid-template-columns:1fr; gap:11px; margin-top:28px; } .lore-entry { min-height:204px; padding:20px; } .lore-entry-action::before { right:45px; bottom:20px; left:20px; } }
@media (prefers-reduced-motion:reduce) { .lore-entry,.lore-entry::before,.lore-entry::after,.lore-term,.lore-definition,.lore-entry-action b,.lore-entry-action::before { transition:none; } .lore-entry:hover,.lore-entry[aria-expanded="true"] { transform:none; } }

/* Slide 07: six lore fragments arranged like a small, connected storybook sky. */
.lore-section::before {
  top:6%; right:-18%; width:min(74vw,920px);
  border:0;
  background:radial-gradient(ellipse at 74% 34%,rgba(193,142,220,.13),transparent 42%),radial-gradient(ellipse at 26% 74%,rgba(88,190,203,.1),transparent 40%);
  filter:blur(18px);
  animation:lore-nebula-breathe 14s ease-in-out infinite alternate;
}
.lore-grid {
  width:min(100%,1080px);
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px 20px;
  margin-top:48px;
  isolation:isolate;
}
.lore-grid::before {
  position:absolute; z-index:-1; inset:-12px -14px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1080 540' fill='none'%3E%3Cpath d='M165 125 C300 30 450 35 535 132 S760 226 900 120 C1030 24 1035 286 900 405 S650 500 535 400 S300 300 165 405' stroke='%239ed9f0' stroke-opacity='.42' stroke-width='2' stroke-dasharray='1 11' stroke-linecap='round'/%3E%3Ccircle cx='165' cy='125' r='4' fill='%23ffd66e'/%3E%3Ccircle cx='535' cy='132' r='4' fill='%23f2a4ce'/%3E%3Ccircle cx='900' cy='120' r='4' fill='%239ed9f0'/%3E%3Ccircle cx='900' cy='405' r='4' fill='%23a9e5b7'/%3E%3Ccircle cx='535' cy='400' r='4' fill='%23c2b1ff'/%3E%3Ccircle cx='165' cy='405' r='4' fill='%23ffcb9a'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  opacity:.36;
  pointer-events:none;
  animation:lore-route-glimmer 8s ease-in-out infinite alternate;
}
.lore-entry {
  min-height:224px;
  padding:23px 23px 18px;
  border:0;
  border-radius:3px 18px 3px 18px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--lore-accent) 16%,rgba(25,33,55,.94)),rgba(10,16,30,.92) 76%);
  box-shadow:inset 2px 0 color-mix(in srgb,var(--lore-accent) 62%,transparent),0 14px 30px rgba(0,0,0,.2),0 0 26px color-mix(in srgb,var(--lore-accent) 9%,transparent);
  transition:transform .52s cubic-bezier(.18,.76,.22,1),background .45s ease,box-shadow .45s ease;
}
.lore-entry:nth-child(2),.lore-entry:nth-child(5) { translate:0 22px; }
.lore-entry:nth-child(3) { translate:0 44px; }
.lore-entry:nth-child(4) { translate:0 44px; }
.lore-entry:nth-child(1) { --reveal-delay:0s; }
.lore-entry:nth-child(2) { --reveal-delay:.08s; }
.lore-entry:nth-child(3) { --reveal-delay:.16s; }
.lore-entry:nth-child(4) { --reveal-delay:.24s; }
.lore-entry:nth-child(5) { --reveal-delay:.32s; }
.lore-entry:nth-child(6) { --reveal-delay:.4s; }
.lore-entry::before {
  top:0; right:0; left:0; height:2px;
  background:linear-gradient(90deg,transparent 4%,color-mix(in srgb,var(--lore-accent) 86%,white) 52%,transparent 96%);
  opacity:.68;
}
.lore-entry::after {
  top:18px; right:20px; width:auto; height:auto;
  border:0; border-radius:0; background:none; box-shadow:none;
  content:"✦"; color:var(--lore-accent); font:normal 23px/1 Georgia,serif;
  text-shadow:0 0 12px color-mix(in srgb,var(--lore-accent) 65%,transparent);
  animation:lore-sigil-drift 5s ease-in-out var(--reveal-delay,0s) infinite;
}
.lore-entry:nth-child(2)::after { content:"✿"; }
.lore-entry:nth-child(3)::after { content:"∞"; font-size:26px; }
.lore-entry:nth-child(4)::after { content:"◉"; }
.lore-entry:nth-child(5)::after { content:"✧"; }
.lore-entry:nth-child(6)::after { content:"☾"; }
.lore-entry-number { color:#b6c5d8; }
.lore-term { margin-top:26px; font-size:clamp(30px,3.1vw,42px); }
.lore-pronunciation { letter-spacing:.12em; }
.lore-definition { line-height:1.7; }
.lore-entry-action { padding-top:17px; color:#aab7cd; }
.lore-entry-action::before { right:48px; bottom:22px; left:23px; }
.lore-entry-action b { border:0; border-radius:0; font-size:20px; }
.lore-entry:hover,.lore-entry[aria-expanded="true"] {
  transform:translateY(-5px);
  border:0;
  background:linear-gradient(145deg,color-mix(in srgb,var(--lore-accent) 24%,rgba(27,35,59,.97)),rgba(12,18,33,.94) 77%);
  box-shadow:inset 2px 0 color-mix(in srgb,var(--lore-accent) 88%,white),0 19px 38px rgba(0,0,0,.26),0 0 32px color-mix(in srgb,var(--lore-accent) 16%,transparent);
}
.lore-entry:hover::after,.lore-entry[aria-expanded="true"]::after { transform:scale(1.14); }
.lore-entry:hover .lore-term,.lore-entry[aria-expanded="true"] .lore-term { text-shadow:0 0 18px color-mix(in srgb,var(--lore-accent) 18%,transparent); }
.lore-entry[aria-expanded="true"] .lore-definition { max-height:112px; filter:none; }
@keyframes lore-sigil-drift { 0%,100% { translate:0 0; rotate:-5deg; opacity:.76; } 50% { translate:0 -5px; rotate:5deg; opacity:1; } }
@keyframes lore-route-glimmer { from { opacity:.2; filter:drop-shadow(0 0 0 transparent); } to { opacity:.48; filter:drop-shadow(0 0 5px rgba(158,217,240,.32)); } }
@keyframes lore-nebula-breathe { from { transform:scale(.96); opacity:.72; } to { transform:scale(1.04); opacity:1; } }
@media (max-width:900px) {
  .lore-grid { gap:18px; }
  .lore-entry:nth-child(n) { translate:0 0; }
  .lore-grid::before { opacity:.24; }
}
@media (max-width:640px) {
  .lore-grid { width:min(100%,440px); gap:12px; margin-top:30px; padding-left:13px; }
  .lore-grid::before {
    inset:0 auto 0 0; width:35px; opacity:.24;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 900' fill='none'%3E%3Cpath d='M18 4 C3 70 31 112 18 176 S4 290 18 352 S31 472 18 532 S4 648 18 708 S31 824 18 896' stroke='%239ed9f0' stroke-opacity='.62' stroke-width='2' stroke-dasharray='1 10' stroke-linecap='round'/%3E%3C/svg%3E");
  }
  .lore-entry { min-height:194px; padding:20px 19px 17px; }
  .lore-term { margin-top:20px; font-size:clamp(30px,9vw,38px); }
  .lore-entry-action::before { right:45px; bottom:20px; left:19px; }
}
@media (prefers-reduced-motion:reduce) {
  .lore-section::before,.lore-grid::before,.lore-entry::after { animation:none; }
}

/* Compact floating chapter navigation, styled to sit with the story's jewel tones. */
@media (min-width:901px) {
  .site-header { inset:11px 0 auto; width:min(1240px,calc(100% - 32px)); height:61px; margin-inline:auto; gap:10px; padding:0 13px; border:1px solid rgba(169,220,255,.19); border-radius:17px; background:linear-gradient(105deg,rgba(8,12,24,.97),rgba(18,22,42,.95) 48%,rgba(10,15,29,.97)); box-shadow:0 12px 36px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.045); }
  .main-nav { justify-content:center; gap:1px; padding:0 5px; mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent); }
  .nav-link { min-height:45px; gap:3px; padding:4px clamp(5px,.58vw,9px); border-radius:10px; font-size:7.4px; letter-spacing:.045em; }
  .nav-link span { font-size:7.2px; }
  .nav-link::after { right:10px; bottom:3px; left:10px; height:2px; }
  .nav-link:hover { border-color:rgba(169,220,255,.16); background:linear-gradient(135deg,rgba(169,220,255,.09),rgba(194,177,255,.055)); color:#fff4fb; transform:translateY(-2px); }
  .nav-link.is-active { border-color:rgba(242,164,206,.27); background:linear-gradient(135deg,rgba(242,164,206,.14),rgba(169,220,255,.09) 55%,rgba(169,229,183,.055)); box-shadow:inset 0 0 20px rgba(169,220,255,.05),0 5px 18px rgba(0,0,0,.18); animation:chapter-link-arrive .38s cubic-bezier(.2,.75,.25,1) both; }
  .nav-link.is-active span { color:#ffe08a; text-shadow:0 0 12px rgba(255,224,138,.35); }
  .nav-scroll-control { width:25px; height:25px; flex-basis:25px; border-color:rgba(169,220,255,.26); background:rgba(10,16,31,.88); color:#c8eaff; transition:transform .25s cubic-bezier(.2,.75,.25,1),color .25s,border-color .25s,background .25s,box-shadow .25s; }
  .nav-scroll-control:hover:not(:disabled) { transform:translateY(-1px) scale(1.08); border-color:#a9dcff; background:rgba(169,220,255,.12); color:#fff; box-shadow:0 0 18px rgba(169,220,255,.15); }
  .nav-scroll-control:active:not(:disabled) { transform:scale(.92); }
}
.site-header { transition:opacity .55s ease,transform .55s cubic-bezier(.2,.75,.25,1),box-shadow .35s,border-color .35s,background .35s; }
.site-header::after { position:absolute; right:7%; bottom:-1px; left:7%; height:1px; background:linear-gradient(90deg,transparent,rgba(169,220,255,.42),rgba(242,164,206,.38),rgba(169,229,183,.3),transparent); content:""; opacity:.65; pointer-events:none; }
.nav-link { transition:color .3s ease,transform .3s cubic-bezier(.2,.75,.25,1),background .3s ease,border-color .3s ease,box-shadow .35s ease; }
.nav-scroll-control { transition:transform .25s cubic-bezier(.2,.75,.25,1),color .25s,border-color .25s,background .25s,box-shadow .25s; }
@keyframes chapter-link-arrive { from { opacity:.62; transform:translateY(4px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
@media (max-width:900px) {
  .site-header { top:8px; right:8px; left:8px; width:auto; height:62px; margin:0; padding:0 15px; border:1px solid rgba(169,220,255,.18); border-radius:16px; background:linear-gradient(105deg,rgba(8,12,24,.97),rgba(18,22,42,.95) 48%,rgba(10,15,29,.97)); box-shadow:0 10px 30px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.045); }
  .site-header::after { right:9%; left:9%; }
  .main-nav { top:61px; border-color:rgba(169,220,255,.24); background:linear-gradient(145deg,rgba(19,25,45,.99),rgba(8,12,23,.99)); }
  .nav-link { transition:color .25s,transform .25s,background .25s,border-color .25s,box-shadow .25s; }
  .main-nav.is-open .nav-link { animation:chapter-link-arrive .3s both; }
  .main-nav.is-open .nav-link:nth-child(2n) { animation-delay:.025s; }
  .menu-toggle { border-color:rgba(169,220,255,.28); transition:transform .25s,border-color .25s,background .25s; }
  .menu-toggle[aria-expanded="true"] { transform:rotate(90deg); }
}
@media (prefers-reduced-motion:reduce) {
  .site-header,.nav-link,.nav-scroll-control,.menu-toggle { transition:none !important; }
  .nav-link.is-active,.main-nav.is-open .nav-link { animation:none !important; }
}

/* Opening slide: the first impression carries its own richer visual language. */
.hero-copy { max-width:650px; }
.hero-copy h1 { font-size:clamp(74px,8.45vw,124px); }
.hero .eyebrow { position:relative; gap:10px; margin:-22px 0 25px; padding:0; border:0; border-radius:0; background:none; box-shadow:none; color:#f2bddb; font-size:9px; letter-spacing:.22em; overflow:visible; }
.hero .eyebrow::after { position:relative; display:block; width:48px; height:1px; background:linear-gradient(90deg,#ffdc78,#f2a4ce,#a9dcff); box-shadow:0 0 10px rgba(242,164,206,.24); content:""; transform:none; animation:none; }
.hero-eyebrow-star { position:relative; z-index:1; font-size:12px; }
.hero .eyebrow > span:last-child { position:relative; z-index:1; }
.hero-copy h1 { margin-bottom:15px; color:#fbf7fb; text-shadow:0 4px 28px rgba(4,7,16,.48); }
.hero-copy h1 .pink { display:inline-block; position:relative; color:#f5a6d1; font-weight:650; text-shadow:0 0 12px rgba(242,164,206,.2),0 2px 12px rgba(100,36,77,.14); }
.hero-copy h1 .soft { display:inline-block; color:#aebbd1; font-weight:500; text-shadow:0 0 6px rgba(169,220,255,.09); }
.hero-subtitle { max-width:410px; margin:0 0 27px; color:#c0cada; font-size:14px; font-weight:500; line-height:1.75; text-shadow:0 1px 12px rgba(4,7,16,.55); }
.hero-copy > .pill { position:relative; width:188px; min-width:188px; min-height:43px; padding:0 15px 0 17px; border-color:rgba(255,207,118,.6); background:linear-gradient(112deg,rgba(255,214,110,.13),rgba(242,164,206,.11) 50%,rgba(169,220,255,.09)); box-shadow:inset 0 1px rgba(255,255,255,.12),0 7px 20px rgba(0,0,0,.2),0 0 18px rgba(242,164,206,.08); color:#fff3d8; font-size:9px; font-weight:800; letter-spacing:.14em; overflow:hidden; }
.hero-copy > .pill::before { position:absolute; top:0; bottom:0; left:-35%; width:28%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent); content:""; transform:skewX(-20deg); transition:left .55s cubic-bezier(.2,.75,.25,1); }
.hero-copy > .pill::after { display:none; }
.hero-copy > .pill:hover { transform:translateY(-3px) scale(1.02); border-color:#ffe08a; background:linear-gradient(112deg,rgba(255,214,110,.26),rgba(242,164,206,.23) 50%,rgba(169,220,255,.18)); box-shadow:inset 0 1px rgba(255,255,255,.2),0 13px 30px rgba(0,0,0,.28),0 0 29px rgba(242,164,206,.2); }
.hero-copy > .pill:hover::before { left:115%; }
.hero-copy > .pill .button-arrow { width:15px; height:15px; stroke:#fff7dd; transition:transform .3s cubic-bezier(.2,.75,.25,1); }
.hero-copy > .pill:hover .button-arrow { transform:translateY(3px); }
.hero-frame-star { position:absolute; z-index:3; top:20%; left:18%; display:grid; width:31px; height:31px; place-items:center; border:1px solid rgba(255,240,185,.38); border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.92) 0 7%,rgba(255,224,138,.85) 9% 20%,rgba(255,224,138,.13) 33%,transparent 68%); color:#fff2a9; font-size:16px; line-height:1; text-shadow:0 0 15px #fff4b3,0 0 32px rgba(255,224,138,.9); box-shadow:0 0 22px rgba(255,224,138,.38),inset 0 0 10px rgba(255,255,255,.28); pointer-events:none; animation:hero-frame-star-float 5.8s ease-in-out infinite,hero-frame-star-twinkle 2.7s ease-in-out infinite; }
.hero-frame .frame-caption { bottom:31px; left:30px; color:#fff8f6; font-size:22px; font-weight:650; line-height:1.02; letter-spacing:-.015em; text-shadow:0 3px 16px rgba(3,6,15,.96),0 0 18px rgba(169,220,255,.18); }
.hero-frame .frame-caption em { color:#f4bddc; font-weight:600; text-shadow:0 0 15px rgba(242,164,206,.25); }
@keyframes hero-eyebrow-sweep { 0%,62%,100% { transform:translateX(125%); } 78% { transform:translateX(-260%); } }
@keyframes hero-name-underline { from { transform:scaleX(.25); opacity:0; } to { transform:scaleX(1); opacity:1; } }
@keyframes hero-frame-star-float { 0%,100% { transform:translate3d(0,0,0) rotate(0); } 50% { transform:translate3d(17px,-15px,0) rotate(24deg); } }
@keyframes hero-frame-star-twinkle { 0%,100% { filter:brightness(.9); opacity:.76; } 50% { filter:brightness(1.45); opacity:1; } }
@media (max-width:640px) {
  .hero .eyebrow { margin-bottom:23px; font-size:7px; }
  .hero-copy h1 { font-size:clamp(68px,17vw,96px); }
  .hero-copy h1 { margin-bottom:13px; }
  .hero-subtitle { margin-bottom:22px; }
  .hero-copy > .pill { width:181px; min-width:181px; min-height:42px; }
  .hero-frame-star { top:17%; left:15%; width:27px; height:27px; font-size:14px; }
  .hero-frame .frame-caption { bottom:25px; left:24px; font-size:19px; }
}
@media (prefers-reduced-motion:reduce) {
  .hero .eyebrow::after,.hero-copy h1 .pink::after,.hero-frame-star { animation:none; }
}

/* Keep the redesigned bar attached to the top edge of the page. */
@media (min-width:901px) {
  .site-header { top:0; right:0; left:0; width:100%; height:54px; margin:0; padding:0 25px 0 18px; gap:17px; border-top:0; border-right:0; border-left:0; border-radius:0; }
  .brand { position:relative; display:inline-flex; width:auto; height:32px; flex:0 0 auto; align-items:center; padding:0 12px 1px 0; border:0; border-right:1px solid rgba(169,220,255,.28); border-radius:0; background:transparent; box-shadow:none; color:#fff8fc; font-family:"Bodoni Moda",var(--serif); font-size:27px; font-style:italic; font-weight:700; letter-spacing:-.08em; text-align:left; text-shadow:0 0 13px rgba(242,164,206,.42); transition:color .3s,transform .3s cubic-bezier(.2,.75,.25,1),text-shadow .3s; }
  .brand::before { display:none; }
  .brand::after { position:absolute; right:5px; bottom:1px; color:#ffe08a; content:"✦"; font:700 7px/1 var(--sans); letter-spacing:0; text-shadow:0 0 9px rgba(255,224,138,.7); }
  .brand:hover { transform:translateY(-1px) skewX(-5deg); border-color:rgba(169,220,255,.55); box-shadow:none; color:#f5b7d9; text-shadow:0 0 17px rgba(242,164,206,.62); }
  .main-nav { width:auto; min-width:0; flex:1 1 auto; justify-content:space-between; gap:0; margin:0; padding:0; overflow:hidden; mask-image:none; }
  .nav-link { min-width:0; flex:1 1 0; gap:2px; padding:3px 4px; color:#aeb8ca; font-size:7.8px; font-weight:800; letter-spacing:.065em; }
  .nav-link span { display:block; min-width:0; height:auto; padding:0; border:0; border-radius:0; background:none; color:#7690ae; font-size:7px; font-weight:900; line-height:1; letter-spacing:.14em; }
  .nav-link:hover span { background:none; color:#ffd67d; }
  .nav-link.is-active span { background:none; color:#ffe08a; }
  .nav-scroll-control { display:none; }
}
@media (max-width:900px) {
  .site-header { top:0; right:0; left:0; width:100%; height:56px; margin:0; border-top:0; border-right:0; border-left:0; border-radius:0; }
  .main-nav { top:55px; right:12px; left:12px; width:auto; margin:0; }
  .brand { position:relative; display:inline-flex; width:auto; height:31px; flex:0 0 auto; align-items:center; padding:0 11px 1px 0; border:0; border-right:1px solid rgba(169,220,255,.28); border-radius:0; background:transparent; box-shadow:none; color:#fff8fc; font-family:"Bodoni Moda",var(--serif); font-size:25px; font-style:italic; font-weight:700; letter-spacing:-.08em; text-align:left; text-shadow:0 0 13px rgba(242,164,206,.42); }
  .brand::before { display:none; }
  .brand::after { position:absolute; right:5px; bottom:1px; color:#ffe08a; content:"✦"; font:700 7px/1 var(--sans); letter-spacing:0; text-shadow:0 0 9px rgba(255,224,138,.7); }
}

/* Use the reference fade on underlines, while title-side rules keep their own accents. */
.nav-link::after {
  background:linear-gradient(90deg,#9ed9f0 0%,#a9e5b7 55%,rgba(169,229,183,0) 100%);
  box-shadow:none;
}
.section-head h2::after,
.daydream-intro h2::after,
.quiz-intro h2::after,
.postcard-intro h2::after,
.letter-layout > h2::after {
  background:linear-gradient(90deg,#9ed9f0 0%,#a9e5b7 55%,rgba(169,229,183,0) 100%);
  box-shadow:none;
}
/* Keep the timeline spine's existing width and position, fading at both ends. */
.orbit-section .timeline::before {
  background:linear-gradient(180deg,rgba(158,217,240,0) 0%,#9ed9f0 14%,#a9e5b7 58%,rgba(169,229,183,0) 100%);
  box-shadow:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 88%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 88%,transparent 100%);
}
.orbit-section .timeline::after { content:none; animation:none; }
.orbit-section .timeline-item:hover,
.orbit-section .timeline-item:focus-within { transform:translateX(4px) translateY(-2px); }
@media (max-width:640px) {
  .orbit-section .timeline-item:hover,
  .orbit-section .timeline-item:focus-within { transform:translateX(3px) translateY(-1px); }
}

/* Match the Orbit heading scale to the site's other chapter titles. */
.orbit-section .section-head h2 { font-size:clamp(64px,7vw,96px); }
@media (max-width:640px) {
  .orbit-section .section-head h2 { font-size:clamp(57px,12vw,76px); }
}

/* A quiet keepsake frame for the gallery; image geometry stays untouched. */
.gallery-section .photo-card {
  border:1px solid color-mix(in srgb,var(--gallery-accent) 45%,rgba(225,235,255,.18));
  border-radius:4px;
  box-shadow:0 8px 22px rgba(0,0,0,.25),0 0 16px color-mix(in srgb,var(--gallery-accent) 9%,transparent);
}
.gallery-section .photo-card::after {
  inset:4px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:2px;
  opacity:.62;
  transform:none;
  transition:border-color .35s ease,opacity .35s ease;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 80%,rgba(0,0,0,.78) 93%,transparent 100%);
  mask-image:radial-gradient(ellipse at center,#000 80%,rgba(0,0,0,.78) 93%,transparent 100%);
}
.gallery-section .photo-card:hover::after,
.gallery-section .photo-card:focus-visible::after {
  border-color:color-mix(in srgb,var(--gallery-accent) 58%,white);
  opacity:.95;
}
.gallery-section .photo-card img { filter:saturate(1.045) contrast(1.02); transition:filter .4s ease; }
.gallery-section .photo-card:hover img,
.gallery-section .photo-card:focus-visible img { filter:saturate(1.08) contrast(1.035); }
@media (prefers-reduced-motion:reduce) {
  .gallery-section .photo-card::after { transition:none; }
}

/* Echo Little Loops' soft color wash and slow gloss, tuned for still photos. */
.gallery-section .photo-card img { filter:saturate(1.14) contrast(1.045) brightness(1.035); transition:filter .5s ease; }
.gallery-section .photo-card:hover img,
.gallery-section .photo-card:focus-visible img { filter:saturate(1.16) contrast(1.055) brightness(1.045); }
.gallery-section .photo-card::before {
  display:block;
  background:radial-gradient(ellipse at 9% 88%,rgba(157,229,226,.13),transparent 42%),radial-gradient(ellipse at 93% 12%,rgba(242,164,206,.12),transparent 43%),linear-gradient(112deg,transparent 39%,rgba(255,255,255,.1) 48%,rgba(194,177,255,.08) 51%,transparent 60%);
  background-size:100% 100%,100% 100%,230% 100%;
  background-position:center,center,140% 0;
  mix-blend-mode:soft-light;
  opacity:.28;
  transition:opacity .35s ease;
}
.gallery-section .photo-card:hover::before,
.gallery-section .photo-card:focus-visible::before { animation:gallery-photo-gloss 1.15s cubic-bezier(.35,.05,.6,.95) both; }
@keyframes gallery-photo-gloss {
  0%,20% { background-position:center,center,140% 0; opacity:.18; }
  48% { opacity:.72; }
  100% { background-position:center,center,-140% 0; opacity:.28; }
}
@media (prefers-reduced-motion:reduce) {
  .gallery-section .photo-card img { transition:none; }
  .gallery-section .photo-card:hover::before,
  .gallery-section .photo-card:focus-visible::before { animation:none; }
}

/* Constellation portraits: soften the floating tiles with a crafted, layered frame. */
.constellation-section .constellation-card {
  border-radius:20px;
  border-color:color-mix(in srgb,var(--constellation-accent) 42%,rgba(210,220,245,.34));
  box-shadow:inset 0 1px rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.045),0 15px 34px rgba(0,0,0,.24),0 0 22px color-mix(in srgb,var(--constellation-accent) 10%,transparent);
  animation-timing-function:cubic-bezier(.45,0,.55,1);
}
.constellation-section .constellation-card > .constellation-photo {
  inset:1px;
  border-radius:17px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.constellation-section .constellation-card:hover {
  border-color:color-mix(in srgb,var(--constellation-accent) 72%,white);
  box-shadow:inset 0 1px rgba(255,255,255,.2),inset 0 0 0 1px rgba(255,255,255,.06),0 20px 42px rgba(0,0,0,.29),0 0 29px color-mix(in srgb,var(--constellation-accent) 17%,transparent);
}

/* Final frame pass: tint the slim inset seam and let the shadow fade softly. */
.constellation-section .constellation-card {
  border-color:color-mix(in srgb,var(--constellation-accent) 48%,rgba(210,220,245,.38));
  background:linear-gradient(145deg,color-mix(in srgb,var(--constellation-accent) 34%,rgba(23,30,49,.96)),color-mix(in srgb,var(--constellation-accent) 18%,rgba(13,19,36,.96)));
  box-shadow:inset 0 1px rgba(255,255,255,.2),0 16px 38px rgba(0,0,0,.16),0 0 25px color-mix(in srgb,var(--constellation-accent) 12%,transparent);
}
.constellation-section .constellation-card > .constellation-photo { box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); }
.constellation-section .constellation-card:hover {
  background:linear-gradient(145deg,color-mix(in srgb,var(--constellation-accent) 42%,rgba(23,30,49,.96)),color-mix(in srgb,var(--constellation-accent) 24%,rgba(13,19,36,.96)));
  box-shadow:inset 0 1px rgba(255,255,255,.22),0 20px 44px rgba(0,0,0,.2),0 0 30px color-mix(in srgb,var(--constellation-accent) 18%,transparent);
}
.constellation-section .constellation-card,
.constellation-section .constellation-card > .constellation-photo { border-radius:0; }

/* Slide 08: make the day planner feel like a glowing route through the same little universe. */
.perfect-day-section { --section-accent:#a8dff2; position:relative; isolation:isolate; }
.perfect-day-section .section-kicker { color:#a8dff2; }
.perfect-day-section .section-kicker i { background:linear-gradient(90deg,#a8dff2,#c2b1ff 58%,transparent); }
.perfect-day-section .section-head h2 { max-width:980px; font-size:clamp(52px,7.2vw,92px); line-height:.96; letter-spacing:-.045em; text-wrap:balance; }
.perfect-day-section .section-head h2 em { color:#a8dff2; text-shadow:0 0 34px rgba(168,223,242,.15); }
.date-builder { position:relative; isolation:isolate; overflow:hidden; width:min(100%,1080px); padding:clamp(21px,4vw,46px); border:1px solid rgba(168,223,242,.32); border-radius:4px 26px 4px 26px; background:radial-gradient(ellipse at 8% 0%,rgba(168,223,242,.13),transparent 38%),radial-gradient(ellipse at 94% 7%,rgba(194,177,255,.12),transparent 33%),radial-gradient(ellipse at 93% 100%,rgba(242,164,206,.075),transparent 37%),linear-gradient(140deg,rgba(20,29,49,.94),rgba(9,13,25,.98) 72%); box-shadow:0 28px 74px rgba(0,0,0,.3),0 0 38px rgba(168,223,242,.07),inset 0 1px rgba(255,255,255,.08); }
.date-builder::before { position:absolute; z-index:-1; top:-115px; right:-75px; width:260px; aspect-ratio:1; border:1px solid rgba(168,223,242,.13); border-radius:50%; background:radial-gradient(circle at 38% 42%,rgba(168,223,242,.11),rgba(194,177,255,.045) 42%,transparent 69%); box-shadow:0 0 44px rgba(168,223,242,.07),inset 0 0 36px rgba(194,177,255,.045); content:""; animation:date-orbit-drift 13s ease-in-out infinite alternate; pointer-events:none; }
.date-builder::after { position:absolute; top:0; right:22px; left:22px; height:1px; background:linear-gradient(90deg,transparent,rgba(168,223,242,.55),rgba(194,177,255,.42),rgba(242,164,206,.35),transparent); content:""; opacity:.72; pointer-events:none; }
.date-plan-carousel { position:relative; z-index:1; max-width:850px; }
.date-plan-progress { margin-bottom:clamp(25px,4vw,40px); color:#b7c7d9; font:800 8px/1.4 "Manrope",var(--sans); letter-spacing:.2em; }
.date-plan-progress i { height:3px; border-radius:99px; background:linear-gradient(90deg,rgba(168,223,242,.12),rgba(194,177,255,.13),rgba(242,164,206,.1)); box-shadow:0 0 15px rgba(168,223,242,.08); }
.date-plan-progress i span { border-radius:99px; background:linear-gradient(90deg,#a8dff2,#c2b1ff 52%,#f2a4ce 78%,#ffd66e); box-shadow:0 0 15px rgba(168,223,242,.48),0 0 26px rgba(194,177,255,.22); transition:width .72s cubic-bezier(.22,.75,.2,1); }
.date-choice-stage { z-index:0; min-height:350px; }
.date-choice-stage::before { position:absolute; z-index:-1; top:22px; right:2%; width:min(54%,430px); height:245px; border-radius:50%; background:radial-gradient(ellipse at 48% 42%,rgba(168,223,242,.13),rgba(194,177,255,.075) 42%,rgba(242,164,206,.035) 66%,transparent 76%); content:""; filter:blur(13px); pointer-events:none; animation:date-stage-aura 8s ease-in-out infinite alternate; }
.date-choice-group:not([hidden]) { animation:date-step-arrive .54s cubic-bezier(.2,.7,.2,1) both; }
.date-choice-group legend { gap:14px; margin-bottom:23px; color:#f6f2f7; font-size:clamp(26px,3vw,34px); line-height:1.12; text-wrap:balance; }
.date-choice-group legend span { display:grid; width:33px; height:33px; flex:0 0 33px; place-items:center; border:1px solid rgba(168,223,242,.43); border-radius:50%; background:radial-gradient(circle,rgba(168,223,242,.14),rgba(194,177,255,.055)); color:#c9eff7; font:800 8px "Manrope",var(--sans); letter-spacing:.08em; box-shadow:0 0 19px rgba(168,223,242,.11); }
.date-choices { gap:11px; }
.date-choices button { --choice-accent:#a8dff2; position:relative; min-height:61px; overflow:hidden; padding:13px 35px 13px 16px; border:1px solid color-mix(in srgb,var(--choice-accent) 42%,rgba(205,216,239,.15)); border-left:2px solid color-mix(in srgb,var(--choice-accent) 58%,transparent); border-radius:3px 13px 3px 13px; background:linear-gradient(135deg,color-mix(in srgb,var(--choice-accent) 13%,rgba(20,26,45,.82)),rgba(7,12,24,.48)); color:#d2d8e6; font:600 11px/1.45 "DM Sans",var(--sans); box-shadow:inset 0 1px rgba(255,255,255,.045),0 5px 16px color-mix(in srgb,var(--choice-accent) 5%,transparent); transition:transform .3s cubic-bezier(.2,.72,.2,1),border-color .32s ease,background .35s ease,color .3s ease,box-shadow .35s ease; }
.date-choice-group:not([hidden]) .date-choices button { animation:date-option-arrive .48s cubic-bezier(.2,.7,.2,1) both; }
.date-choice-group:not([hidden]) .date-choices button:nth-child(2) { animation-delay:.045s; }
.date-choice-group:not([hidden]) .date-choices button:nth-child(3) { animation-delay:.09s; }
.date-choice-group:not([hidden]) .date-choices button:nth-child(4) { animation-delay:.135s; }
.date-choice-group:not([hidden]) .date-choices button:nth-child(5) { animation-delay:.18s; }
.date-choice-group:not([hidden]) .date-choices button:nth-child(6) { animation-delay:.225s; }
.date-choices button:nth-child(6n + 2) { --choice-accent:#f2a4ce; }
.date-choices button:nth-child(6n + 3) { --choice-accent:#c2b1ff; }
.date-choices button:nth-child(6n + 4) { --choice-accent:#a9e5b7; }
.date-choices button:nth-child(6n + 5) { --choice-accent:#ffd66e; }
.date-choices button:nth-child(6n) { --choice-accent:#ffcb9a; }
.date-choices button::after { position:absolute; top:50%; right:14px; color:var(--choice-accent); content:"✦"; font-size:11px; opacity:0; transform:translateY(-50%) scale(.65) rotate(-25deg); transition:opacity .28s,transform .34s; }
.date-choices button:hover,.date-choices button:focus-visible { z-index:1; transform:translateY(-3px); border-color:color-mix(in srgb,var(--choice-accent) 64%,white); background:linear-gradient(125deg,color-mix(in srgb,var(--choice-accent) 15%,rgba(255,255,255,.035)),rgba(10,16,31,.72)); color:#f5f3f8; box-shadow:0 10px 23px rgba(0,0,0,.19),0 0 21px color-mix(in srgb,var(--choice-accent) 12%,transparent),inset 0 1px rgba(255,255,255,.08); }
.date-choices button:hover::after,.date-choices button:focus-visible::after { opacity:.9; transform:translateY(-50%) scale(1) rotate(0); }
.date-choices button[aria-pressed="true"] { border-color:color-mix(in srgb,var(--choice-accent) 78%,white); background:linear-gradient(125deg,color-mix(in srgb,var(--choice-accent) 20%,rgba(20,29,49,.92)),color-mix(in srgb,var(--choice-accent) 8%,rgba(10,15,28,.94))); color:#fbf8fc; box-shadow:0 0 25px color-mix(in srgb,var(--choice-accent) 15%,transparent),inset 0 0 21px color-mix(in srgb,var(--choice-accent) 7%,transparent),inset 0 1px rgba(255,255,255,.1); }
.date-choices button[aria-pressed="true"]::after { opacity:1; text-shadow:0 0 12px var(--choice-accent); transform:translateY(-50%) scale(1) rotate(0); }
.custom-choice { margin-top:19px; padding-top:16px; border-top:1px solid rgba(168,223,242,.15); }
.custom-choice > label { color:#a8dff2; font:800 8px "Manrope",var(--sans); letter-spacing:.19em; }
.custom-choice > div { gap:9px; margin-top:9px; }
.custom-choice input { min-height:43px; padding:0 13px; border-color:rgba(168,223,242,.2); border-radius:3px 11px 3px 11px; background:rgba(5,9,19,.58); color:#f4f0f7; font:500 11px "DM Sans",var(--sans); transition:border-color .25s,box-shadow .25s,background .25s; }
.custom-choice input:focus { outline:none; border-color:#a8dff2; background:rgba(10,17,31,.84); box-shadow:0 0 0 3px rgba(168,223,242,.09),0 0 19px rgba(168,223,242,.08); }
.save-custom-choice { min-width:70px; border:1px solid rgba(168,223,242,.42); border-radius:999px; background:linear-gradient(110deg,rgba(168,223,242,.1),rgba(194,177,255,.08)); color:#d5f3f8; font:800 8px "Manrope",var(--sans); letter-spacing:.13em; transition:transform .25s,border-color .25s,background .25s,box-shadow .25s; }
.save-custom-choice:hover { transform:translateY(-2px); border-color:#c2b1ff; background:linear-gradient(110deg,rgba(168,223,242,.18),rgba(194,177,255,.15)); box-shadow:0 0 18px rgba(194,177,255,.1); }
.custom-choice-status { color:#a9e5b7; font:600 10px/1.55 "DM Sans",var(--sans); }
.date-plan-navigation { gap:12px; margin-top:26px; padding-top:19px; border-top:1px solid rgba(168,223,242,.16); }
.date-plan-navigation button,.date-end-button { min-height:42px; padding:0 17px; border-color:rgba(168,223,242,.36); background:linear-gradient(110deg,rgba(168,223,242,.075),rgba(194,177,255,.055)); color:#d5eff6; font:800 8px "Manrope",var(--sans); letter-spacing:.1em; box-shadow:inset 0 1px rgba(255,255,255,.04); transition:transform .28s,border-color .28s,background .3s,box-shadow .3s,opacity .2s; }
.date-plan-navigation button:hover:not(:disabled),.date-end-button:hover:not(:disabled) { transform:translateY(-2px); border-color:#c2b1ff; background:linear-gradient(110deg,rgba(168,223,242,.15),rgba(194,177,255,.13)); box-shadow:0 7px 20px rgba(0,0,0,.2),0 0 19px rgba(194,177,255,.1); }
.date-plan-navigation button:disabled { opacity:.36; }
.date-plan-position { color:#a8dff2; font:800 8px "Manrope",var(--sans); letter-spacing:.17em; }
.date-plan-swipe-hint { margin-top:14px; color:#8b98ad; font:700 7px "Manrope",var(--sans); letter-spacing:.15em; }
.date-plan-actions { width:min(100%,850px); padding-top:19px; }
.date-plan-status { color:#c2b1ff; font:600 11px/1.55 "DM Sans",var(--sans); }
.date-reveal-button { min-height:49px; margin:4px 0 0; padding:0 22px; border:1px solid rgba(255,214,110,.52); border-radius:999px; background:linear-gradient(105deg,rgba(168,223,242,.16),rgba(194,177,255,.13),rgba(242,164,206,.12),rgba(255,214,110,.13)); background-size:180% 100%; color:#f3eff8; font:800 8px "Manrope",var(--sans); letter-spacing:.16em; box-shadow:0 0 25px rgba(168,223,242,.08),inset 0 1px rgba(255,255,255,.12); transition:transform .3s,border-color .3s,background-position .7s,box-shadow .35s; }
.date-reveal-button:hover { transform:translateY(-3px); border-color:#ffd66e; background-position:100% 0; box-shadow:0 10px 26px rgba(0,0,0,.2),0 0 27px rgba(255,214,110,.14); }
.date-reveal-button span { display:inline-block; color:#ffd66e; animation:date-star-pulse 2.6s ease-in-out infinite; }
.date-unlock-button { min-height:46px; padding:0 19px; border-color:rgba(242,164,206,.38); border-radius:999px; background:rgba(242,164,206,.055); color:#f1cce0; font:800 8px "Manrope",var(--sans); letter-spacing:.13em; transition:transform .25s,border-color .25s,background .25s; }
.date-unlock-button:hover { transform:translateY(-2px); border-color:#f2a4ce; background:rgba(242,164,206,.12); }
.date-plan-result:not(.is-reminder) { min-height:0; margin:27px auto 0; padding:clamp(24px,4.2vw,42px); border:1px solid rgba(168,223,242,.38); border-radius:4px 22px 4px 22px; background:radial-gradient(ellipse at 100% 0%,rgba(194,177,255,.15),transparent 42%),radial-gradient(ellipse at 0% 100%,rgba(168,223,242,.1),transparent 42%),linear-gradient(140deg,rgba(27,33,54,.98),rgba(11,16,30,.99)); color:#f5f0f6; box-shadow:0 23px 58px rgba(0,0,0,.28),0 0 31px rgba(168,223,242,.08),inset 0 1px rgba(255,255,255,.08); }
.date-plan-result:not(.is-reminder)::before { inset:11px; border:1px solid rgba(255,255,255,.075); }
.date-plan-result:not(.is-reminder)::after { height:3px; background:linear-gradient(90deg,#a8dff2,#c2b1ff 35%,#f2a4ce 70%,#ffd66e); box-shadow:0 0 18px rgba(168,223,242,.24); }
.date-plan-result:not(.is-reminder) .plan-card-kicker { color:#a8dff2; font:800 8px "Manrope",var(--sans); letter-spacing:.2em; }
.date-plan-result:not(.is-reminder) h3 { color:#f7f2f8; font:600 clamp(30px,4vw,43px)/1.05 "Cormorant Garamond",var(--serif); letter-spacing:-.025em; text-transform:none; }
.date-plan-result:not(.is-reminder) .date-plan-steps { grid-template-columns:1fr; gap:0; }
.date-plan-result:not(.is-reminder) .date-plan-steps li { min-height:58px; grid-template-columns:minmax(130px,.34fr) 1fr; gap:14px; padding:13px 0 13px 18px; border-color:rgba(190,202,225,.12); }
.date-plan-result:not(.is-reminder) .date-plan-steps li::before { width:7px; height:7px; background:#a8dff2; box-shadow:0 0 12px rgba(168,223,242,.55); }
.date-plan-result:not(.is-reminder) .date-plan-steps li:nth-child(3n + 2)::before { background:#c2b1ff; box-shadow:0 0 12px rgba(194,177,255,.55); }
.date-plan-result:not(.is-reminder) .date-plan-steps li:nth-child(3n)::before { background:#f2a4ce; box-shadow:0 0 12px rgba(242,164,206,.5); }
.date-plan-result:not(.is-reminder) .date-plan-steps li span { color:#9fb6c7; font:800 7px "Manrope",var(--sans); letter-spacing:.17em; }
.date-plan-result:not(.is-reminder) .date-plan-steps li strong { color:#f0edf5; font:600 15px/1.4 "DM Sans",var(--sans); }
.date-plan-result:not(.is-reminder) .plan-card-signoff { color:#c5bde0; font:italic 18px "Cormorant Garamond",var(--serif); }
.date-plan-result.is-reminder { border-color:rgba(242,164,206,.5); background:radial-gradient(ellipse at 100% 0%,rgba(242,164,206,.12),transparent 50%),linear-gradient(140deg,rgba(34,25,45,.97),rgba(11,16,30,.99)); box-shadow:0 20px 55px rgba(0,0,0,.26),0 0 28px rgba(242,164,206,.08); }
.download-plan-ticket { min-height:44px; margin-top:18px; padding:0 18px; border:1px solid rgba(168,223,242,.44); border-radius:999px; background:linear-gradient(105deg,rgba(168,223,242,.13),rgba(194,177,255,.1)); color:#d9f3f7; font:800 8px "Manrope",var(--sans); letter-spacing:.13em; transition:transform .28s,border-color .28s,background .28s,box-shadow .3s; }
.download-plan-ticket:hover { transform:translateY(-2px); border-color:#a8dff2; background:linear-gradient(105deg,rgba(168,223,242,.22),rgba(194,177,255,.16)); box-shadow:0 8px 23px rgba(0,0,0,.22),0 0 20px rgba(168,223,242,.12); }
.download-plan-ticket span { color:#ffd66e; }
.download-plan-ticket small { border-color:rgba(255,255,255,.23); color:#b9c9dc; }
.ticket-download-status { color:#a9e5b7; }
@keyframes date-step-arrive { from { opacity:0; transform:translateY(12px); filter:blur(3px); } to { opacity:1; transform:translateY(0); filter:blur(0); } }
@keyframes date-option-arrive { from { opacity:0; transform:translateY(8px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes date-orbit-drift { from { transform:translate3d(0,0,0) scale(.96); opacity:.65; } to { transform:translate3d(-12px,10px,0) scale(1.04); opacity:1; } }
@keyframes date-stage-aura { from { opacity:.55; transform:translate3d(4px,0,0) scale(.96); } to { opacity:1; transform:translate3d(-8px,5px,0) scale(1.05); } }
@keyframes date-star-pulse { 0%,100% { transform:scale(.9) rotate(0); text-shadow:0 0 7px rgba(255,214,110,.25); } 50% { transform:scale(1.18) rotate(12deg); text-shadow:0 0 15px rgba(255,214,110,.7); } }
@media (max-width:700px) {
  .perfect-day-section .section-head h2 { font-size:clamp(47px,11.4vw,70px); line-height:.98; }
  .date-builder { width:100%; padding:22px 17px; border-radius:3px 19px 3px 19px; }
  .date-builder::before { top:-102px; right:-130px; width:230px; }
  .date-plan-progress { gap:11px; margin-bottom:26px; font-size:7px; letter-spacing:.14em; }
  .date-plan-progress i { width:38%; }
  .date-choice-stage { min-height:0; }
  .date-choice-group legend { margin-bottom:18px; font-size:22px; }
  .date-choices { gap:8px; }
  .date-choices button { min-height:53px; padding:10px 27px 10px 11px; font-size:9px; }
  .date-choices button::after { right:9px; font-size:9px; }
  .custom-choice { margin-top:16px; padding-top:14px; }
  .custom-choice input { font-size:9px; }
  .date-plan-navigation { margin-top:22px; gap:7px; }
  .date-plan-navigation button,.date-end-button { min-height:38px; padding:0 10px; font-size:7px; letter-spacing:.06em; }
  .date-plan-position { font-size:7px; letter-spacing:.1em; white-space:nowrap; }
  .date-plan-swipe-hint { font-size:6px; letter-spacing:.12em; }
  .date-plan-result:not(.is-reminder) { padding:24px 19px; }
  .date-plan-result:not(.is-reminder) .date-plan-steps li { grid-template-columns:1fr; gap:5px; padding-left:15px; }
  .date-plan-result:not(.is-reminder) .date-plan-steps li strong { font-size:13px; }
}
@media (prefers-reduced-motion:reduce) {
  .date-builder::before,.date-reveal-button span { animation:none; }
  .date-choice-stage::before { animation:none; }
  .date-choice-group:not([hidden]) { animation:none; }
  .date-choice-group:not([hidden]) .date-choices button { animation:none; }
  .date-plan-progress i span,.date-choices button,.date-choices button::after,.date-reveal-button,.date-plan-result:not([hidden]) { transition:none; animation:none; }
}

/* Custom ideas live in the same choice grid, and selected ideas read clearly at a glance. */
.date-custom-option { --choice-accent:#ffd66e; position:relative; display:flex; min-width:0; min-height:61px; }
.date-custom-trigger { display:flex; width:100%; min-height:61px; flex-direction:column; align-items:flex-start; justify-content:center; gap:4px; padding:10px 32px 10px 15px; border:1px dashed rgba(255,214,110,.48); border-left:2px solid rgba(255,214,110,.7); border-radius:3px 13px 3px 13px; background:linear-gradient(135deg,rgba(255,214,110,.1),rgba(194,177,255,.045) 64%,rgba(7,12,24,.48)); color:#f5e5b8; text-align:left; cursor:pointer; box-shadow:inset 0 1px rgba(255,255,255,.055); transition:transform .3s,border-color .3s,background .35s,box-shadow .35s,color .3s; }
.date-custom-mark { position:absolute; top:50%; right:12px; color:#ffd66e; font:500 17px/1 var(--sans); transform:translateY(-50%); transition:transform .3s; }
.date-custom-title { max-width:100%; overflow:hidden; color:#fff8e7; font:700 11px/1.28 "DM Sans",var(--sans); text-overflow:ellipsis; }
.date-custom-meta { color:#c7b98f; font:800 7px/1.3 "Manrope",var(--sans); letter-spacing:.12em; text-transform:uppercase; }
.date-custom-trigger:hover { transform:translateY(-3px); border-color:#ffd66e; background:linear-gradient(125deg,rgba(255,214,110,.18),rgba(194,177,255,.09) 64%,rgba(10,16,31,.72)); color:#fff9e9; box-shadow:0 10px 23px rgba(0,0,0,.2),0 0 22px rgba(255,214,110,.13),inset 0 1px rgba(255,255,255,.1); }
.date-custom-trigger:hover .date-custom-mark { transform:translateY(-50%) rotate(90deg); }
.date-custom-trigger.has-custom-value .date-custom-title { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; white-space:normal; }
.date-custom-editor,.date-custom-editor[hidden] { display:none; }
.date-custom-editor:not([hidden]) { position:absolute; z-index:4; inset:0; display:flex; flex-direction:column; justify-content:center; margin:0; padding:9px; border:1px solid rgba(255,214,110,.54); border-left:2px solid #ffd66e; border-radius:3px 13px 3px 13px; background:radial-gradient(ellipse at 0 0,rgba(255,214,110,.16),transparent 72%),linear-gradient(145deg,rgba(27,31,48,.99),rgba(9,14,27,.99)); box-shadow:0 9px 22px rgba(0,0,0,.28),0 0 24px rgba(255,214,110,.11); }
.date-custom-editor > label { margin:0 21px 8px 0; color:#ffdc78; font:800 7px "Manrope",var(--sans); letter-spacing:.14em; }
.date-custom-editor > div { display:flex; gap:5px; margin:0; }
.date-custom-editor input { min-width:0; min-height:34px; padding:0 8px; border-color:rgba(255,214,110,.26); border-radius:3px 8px 3px 8px; background:rgba(5,9,19,.72); font-size:9px; }
.date-custom-editor input:focus { border-color:#ffdc78; box-shadow:0 0 0 2px rgba(255,214,110,.1); }
.date-custom-editor .save-custom-choice { min-width:43px; min-height:34px; padding:0 7px; border-color:rgba(255,214,110,.54); background:linear-gradient(110deg,rgba(255,214,110,.19),rgba(242,164,206,.1)); color:#fff2c5; font-size:7px; }
.date-custom-editor .save-custom-choice:hover { border-color:#ffe59a; background:rgba(255,214,110,.24); box-shadow:0 0 14px rgba(255,214,110,.13); }
.date-custom-editor .cancel-custom-choice { position:absolute; top:5px; right:7px; display:grid; width:20px; height:20px; place-items:center; padding:0; border:0; background:transparent; color:#aeb8cb; font:400 16px/1 var(--sans); cursor:pointer; }
.date-custom-editor .cancel-custom-choice:hover { color:#fff; }
.date-custom-editor .save-custom-choice::after,.date-custom-editor .cancel-custom-choice::after { content:none; }
.date-choices button[aria-pressed="true"] { position:relative; transform:translateY(-2px); border-color:color-mix(in srgb,var(--choice-accent) 88%,white); background:radial-gradient(ellipse at 92% 0%,color-mix(in srgb,var(--choice-accent) 31%,transparent),transparent 68%),linear-gradient(125deg,color-mix(in srgb,var(--choice-accent) 32%,rgba(20,29,49,.9)),color-mix(in srgb,var(--choice-accent) 16%,rgba(10,15,28,.94))); color:#fff; filter:saturate(1.28) brightness(1.08); box-shadow:0 0 0 2px color-mix(in srgb,var(--choice-accent) 17%,transparent),0 0 30px color-mix(in srgb,var(--choice-accent) 26%,transparent),inset 0 0 26px color-mix(in srgb,var(--choice-accent) 15%,transparent),inset 0 1px rgba(255,255,255,.18); }
.date-choices button[aria-pressed="true"]::after { color:#fff; text-shadow:0 0 9px var(--choice-accent),0 0 20px var(--choice-accent); }
.date-custom-trigger[aria-pressed="true"] { border-style:solid; border-color:#ffe28b; background:radial-gradient(ellipse at 92% 0%,rgba(255,214,110,.3),transparent 68%),linear-gradient(125deg,rgba(255,214,110,.34),rgba(194,177,255,.17) 65%,rgba(10,15,28,.94)); color:#fffdf5; filter:saturate(1.35) brightness(1.1); box-shadow:0 0 0 2px rgba(255,214,110,.18),0 0 31px rgba(255,214,110,.27),inset 0 0 25px rgba(255,214,110,.16),inset 0 1px rgba(255,255,255,.2); }
.date-custom-trigger[aria-pressed="true"] .date-custom-meta { color:#fff0bd; }
.date-custom-trigger:focus-visible,.date-custom-editor button:focus-visible { outline:2px solid #ffdc78; outline-offset:2px; }
@media (max-width:700px) {
  .date-custom-option,.date-custom-trigger { min-height:53px; }
  .date-custom-trigger { padding:8px 25px 8px 10px; }
  .date-custom-mark { right:9px; font-size:15px; }
  .date-custom-title { font-size:9px; }
  .date-custom-meta { font-size:6px; letter-spacing:.08em; }
  .date-custom-editor:not([hidden]) { padding:7px; }
  .date-custom-editor > label { font-size:6px; }
  .date-custom-editor input { min-height:30px; padding:0 5px; font-size:8px; }
  .date-custom-editor .save-custom-choice { min-width:37px; min-height:30px; padding:0 5px; }
}
@media (prefers-reduced-motion:reduce) {
  .date-custom-trigger,.date-custom-mark { transition:none; }
}

/* Keepsake ticket: return to the crisp paper-and-stub layout from the reference. */
.date-plan-result:not(.is-reminder) {
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(170px,27%,300px);
  min-height:0;
  margin:30px auto 0;
  padding:0;
  overflow:hidden;
  border:2px solid #c7d7da;
  border-radius:0;
  background:#fffefa;
  color:#203449;
  box-shadow:0 12px 34px rgba(0,0,0,.2),0 0 24px rgba(168,223,242,.06);
  isolation:isolate;
}
.date-plan-result:not(.is-reminder)::before {
  z-index:1;
  inset:10px;
  border:1px dashed rgba(61,103,122,.32);
  pointer-events:none;
}
.date-plan-result:not(.is-reminder)::after {
  z-index:2;
  top:0;
  right:0;
  left:0;
  height:8px;
  background:linear-gradient(90deg,#a9e5d7,#9ddaf0 42%,#f2d47a 75%,#efb7d3);
  box-shadow:none;
}
.date-plan-main { position:relative; z-index:0; min-width:0; padding:clamp(28px,4vw,52px) clamp(24px,3.5vw,44px); }
.date-plan-result:not(.is-reminder) .plan-card-kicker { display:flex; justify-content:space-between; gap:16px; color:#557d8d; font:800 clamp(8px,.9vw,12px)/1.3 "Manrope",var(--sans); letter-spacing:.08em; }
.date-plan-result:not(.is-reminder) .plan-card-kicker span:last-child { text-align:right; }
.date-plan-result:not(.is-reminder) h3 { margin:22px 0 3px; color:#182b40; font:900 clamp(34px,5vw,64px)/1 "DM Sans",var(--sans); letter-spacing:-.035em; text-transform:uppercase; }
.date-plan-subtitle { margin:0 0 28px; color:#6d8494; font:600 clamp(13px,1.5vw,19px)/1.45 "DM Sans",var(--sans); }
.date-plan-result:not(.is-reminder) .date-plan-steps { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 14px; counter-reset:ticket-stop; }
.date-plan-result:not(.is-reminder) .date-plan-steps li {
  position:relative;
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  grid-template-rows:auto auto;
  align-content:start;
  align-items:center;
  gap:3px 10px;
  min-height:92px;
  padding:13px 12px;
  border:0;
  background:#edf6f3;
  counter-increment:ticket-stop;
}
.date-plan-result:not(.is-reminder) .date-plan-steps li::before {
  position:static;
  grid-column:1;
  grid-row:1 / span 2;
  display:grid;
  width:34px;
  height:34px;
  place-items:center;
  border-radius:50%;
  background:#aee5da;
  color:#203449;
  content:counter(ticket-stop,decimal-leading-zero);
  font:800 12px/1 "Manrope",var(--sans);
  box-shadow:none;
}
.date-plan-result:not(.is-reminder) .date-plan-steps li:nth-child(3n + 2) { background:#eef4fa; }
.date-plan-result:not(.is-reminder) .date-plan-steps li:nth-child(3n + 2)::before { background:#b7dff0; }
.date-plan-result:not(.is-reminder) .date-plan-steps li:nth-child(3n) { background:#fbf5e7; }
.date-plan-result:not(.is-reminder) .date-plan-steps li:nth-child(3n)::before { background:#f1d77d; }
.date-plan-result:not(.is-reminder) .date-plan-steps li span { grid-column:2; grid-row:1; align-self:end; color:#5d7d91; font:800 9px/1.25 "Manrope",var(--sans); letter-spacing:.08em; }
.date-plan-result:not(.is-reminder) .date-plan-steps li strong { grid-column:2; grid-row:2; align-self:start; color:#203449; font:700 clamp(13px,1.4vw,18px)/1.35 "DM Sans",var(--sans); }
.date-ticket-stub {
  position:relative;
  z-index:0;
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:center;
  padding:clamp(36px,5vw,62px) 24px 30px;
  border-left:2px dashed #9dc5d3;
  color:#557d8d;
  text-align:center;
}
.date-ticket-stub::before,.date-ticket-stub::after { position:absolute; left:-13px; width:24px; height:24px; border-radius:50%; background:#0b1020; content:""; }
.date-ticket-stub::before { top:-13px; }
.date-ticket-stub::after { bottom:-13px; }
.date-stub-kicker { margin:0; font:800 10px/1.45 "Manrope",var(--sans); letter-spacing:.055em; }
.date-stub-edition { display:flex; flex-direction:column; align-items:center; gap:2px; margin:44px 0 25px; color:#203449; }
.date-stub-edition strong { font:900 clamp(42px,5vw,58px)/.95 "DM Sans",var(--sans); }
.date-stub-edition span { font:800 14px/1.35 "Manrope",var(--sans); }
.date-stub-rule { width:60%; height:2px; background:#e2bd4e; }
.date-stub-admit { display:flex; flex-direction:column; gap:2px; margin:29px 0 0; color:#557d8d; font:800 11px/1.3 "Manrope",var(--sans); }
.date-stub-admit strong { color:#294257; font:900 22px/1.1 "DM Sans",var(--sans); }
.date-stub-date { margin:28px 0 0; font:800 9px/1.3 "Manrope",var(--sans); }
.date-stub-route { margin:50px 0 0; font:800 10px/1.4 "Manrope",var(--sans); }
.date-stub-star { margin:20px 0; color:#b48aa7; font-size:25px; }
.date-plan-result:not(.is-reminder) .plan-card-signoff { margin:auto 0 0; color:#71818d; font:800 9px/1.3 "Manrope",var(--sans); }
.date-stub-vertical { position:absolute; right:12px; bottom:10px; color:#718a98; font:800 8px/1 "Manrope",var(--sans); letter-spacing:.08em; writing-mode:vertical-rl; transform:rotate(180deg); }
@media (max-width:720px) {
  .date-plan-result:not(.is-reminder) { grid-template-columns:minmax(0,1fr) 130px; }
  .date-plan-main { padding:30px 18px 22px; }
  .date-plan-result:not(.is-reminder) .plan-card-kicker { font-size:7px; letter-spacing:.03em; }
  .date-plan-result:not(.is-reminder) h3 { margin-top:17px; font-size:clamp(29px,7vw,42px); }
  .date-plan-subtitle { margin-bottom:20px; font-size:12px; }
  .date-plan-result:not(.is-reminder) .date-plan-steps { gap:8px; }
  .date-plan-result:not(.is-reminder) .date-plan-steps li { grid-template-columns:27px minmax(0,1fr); gap:3px 7px; min-height:75px; padding:9px 7px; }
  .date-plan-result:not(.is-reminder) .date-plan-steps li::before { width:26px; height:26px; font-size:9px; }
  .date-plan-result:not(.is-reminder) .date-plan-steps li span { font-size:7px; }
  .date-plan-result:not(.is-reminder) .date-plan-steps li strong { font-size:11px; }
  .date-ticket-stub { padding:34px 13px 24px; }
  .date-stub-edition { margin:36px 0 20px; }
  .date-stub-route { margin-top:36px; }
  .date-stub-vertical { right:5px; font-size:6px; }
}
@media (max-width:480px) {
  .date-plan-result:not(.is-reminder) { grid-template-columns:1fr; }
  .date-plan-result:not(.is-reminder) .date-plan-steps { grid-template-columns:1fr; }
  .date-plan-result:not(.is-reminder) .date-plan-steps li { min-height:64px; }
  .date-ticket-stub { display:grid; grid-template-columns:1fr auto 1fr; gap:8px; min-height:110px; padding:18px 20px 22px; border-top:2px dashed #9dc5d3; border-left:0; }
  .date-ticket-stub::before,.date-ticket-stub::after { top:-13px; bottom:auto; left:auto; }
  .date-ticket-stub::before { left:-13px; }
  .date-ticket-stub::after { right:-13px; }
  .date-stub-kicker { grid-column:1 / -1; }
  .date-stub-edition { grid-column:1; grid-row:2 / span 2; margin:0; }
  .date-stub-edition strong { font-size:35px; }
  .date-stub-edition span { font-size:9px; }
  .date-stub-rule { display:none; }
  .date-stub-admit,.date-stub-date,.date-stub-route { margin:0; }
  .date-stub-star,.date-plan-result:not(.is-reminder) .plan-card-signoff { display:none; }
  .date-stub-vertical { display:none; }
}

/* Final ticket sizing and reveal behavior. */
.date-plan-actions { width:min(100%,1040px); }
.date-plan-result[hidden] { display:none !important; }
.date-plan-result:not(.is-reminder) { width:min(100%,920px); min-height:0; margin:20px auto 0; }
.date-plan-main { padding:30px clamp(22px,3vw,38px) 26px; }
.date-plan-result:not(.is-reminder) h3 { margin:16px 0 2px; font-size:clamp(31px,4vw,48px); }
.date-plan-subtitle { margin-bottom:18px; font-size:clamp(12px,1.25vw,16px); }
.date-plan-result:not(.is-reminder) .date-plan-steps { gap:9px 11px; }
.date-plan-result:not(.is-reminder) .date-plan-steps li { min-height:72px; padding:9px 10px; }
.date-ticket-stub { padding:32px 20px 25px; }
.date-stub-edition { margin:30px 0 18px; }
.date-stub-edition strong { font-size:clamp(38px,4vw,50px); }
.date-stub-admit { margin-top:21px; }
.date-stub-date { margin-top:19px; }
.date-stub-route { margin-top:30px; }
.date-stub-star { margin:13px 0; }
.date-plan-action-row { gap:10px; }
.date-reveal-button,.date-unlock-button {
  min-height:46px;
  padding:0 20px;
  border:1px solid rgba(168,223,242,.48);
  border-radius:3px 13px 3px 13px;
  background:linear-gradient(105deg,rgba(168,223,242,.16),rgba(169,229,183,.1) 54%,rgba(255,214,110,.12));
  color:#e6f5f2;
  font:800 9px/1 "Manrope",var(--sans);
  letter-spacing:.12em;
  text-transform:uppercase;
  box-shadow:inset 0 1px rgba(255,255,255,.08),0 5px 17px rgba(0,0,0,.15);
  transition:transform .24s,border-color .24s,background .24s,box-shadow .24s,color .24s;
}
.date-reveal-button { position:relative; gap:12px; }
.date-reveal-button:hover,.date-unlock-button:hover { transform:translateY(-2px); border-color:#a9e5d7; background:linear-gradient(105deg,rgba(168,223,242,.24),rgba(169,229,183,.17) 54%,rgba(255,214,110,.18)); color:#fff; box-shadow:0 9px 24px rgba(0,0,0,.22),0 0 20px rgba(168,223,242,.1),inset 0 1px rgba(255,255,255,.13); }
.date-reveal-button span { color:#ffdc78; }
.date-unlock-button { border-color:rgba(242,164,206,.36); background:rgba(242,164,206,.055); color:#e7c5d7; }
.date-unlock-button:hover { border-color:#f2a4ce; background:rgba(242,164,206,.13); box-shadow:0 9px 24px rgba(0,0,0,.2),0 0 19px rgba(242,164,206,.1); }
.date-reveal-button:focus-visible,.date-unlock-button:focus-visible { outline:2px solid #ffdc78; outline-offset:3px; }
@media (max-width:720px) {
  .date-plan-main { padding:26px 16px 20px; }
  .date-plan-result:not(.is-reminder) h3 { font-size:clamp(28px,6vw,38px); }
  .date-plan-result:not(.is-reminder) .date-plan-steps li { min-height:68px; }
  .date-ticket-stub { padding:29px 12px 22px; }
}
@media (max-width:480px) {
  .date-plan-result:not(.is-reminder) { margin-top:16px; }
  .date-plan-main { padding:19px 14px 14px; }
  .date-plan-result:not(.is-reminder) .date-plan-steps { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
  .date-plan-result:not(.is-reminder) .date-plan-steps li { grid-template-columns:20px minmax(0,1fr); gap:2px 4px; min-height:55px; padding:5px 4px; }
  .date-plan-result:not(.is-reminder) .date-plan-steps li::before { width:19px; height:19px; font-size:7px; }
  .date-plan-result:not(.is-reminder) .date-plan-steps li span { font-size:6px; letter-spacing:.02em; }
  .date-plan-result:not(.is-reminder) .date-plan-steps li strong { font-size:8px; line-height:1.2; }
  .date-plan-result:not(.is-reminder) h3 { margin-top:10px; font-size:25px; }
  .date-plan-subtitle { margin-bottom:10px; font-size:10px; }
  .date-ticket-stub { grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-flow:row; gap:5px 7px; min-height:0; padding:12px 12px 14px; }
  .date-reveal-button,.date-unlock-button { min-height:42px; padding:0 14px; font-size:8px; }
  .date-stub-kicker { grid-column:1 / -1; grid-row:1; font-size:8px; }
  .date-stub-edition { grid-column:1; grid-row:2; margin:0; }
  .date-stub-edition strong { font-size:30px; }
  .date-stub-edition span { font-size:8px; }
  .date-stub-admit { grid-column:2; grid-row:2; margin:0; }
  .date-stub-date { grid-column:3; grid-row:2; align-self:center; margin:0; font-size:7px; }
  .date-stub-route { grid-column:1 / span 2; grid-row:3; margin:0; font-size:8px; }
  .date-ticket-stub::before,.date-ticket-stub::after { top:-11px; width:20px; height:20px; }
  .date-ticket-stub::before { left:-11px; }
  .date-ticket-stub::after { right:-11px; }
}

/* SLIDE 09 — nineteen different postcard compositions, built from the existing artwork. */
.postcard-layout { min-width:0; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }
.postcard-intro,.postcard-display { min-width:0; }
.postcard-display { box-sizing:border-box; }
.postcard-section .postcard {
  --postcard-glow:rgba(158,217,240,.16);
  box-sizing:border-box;
  width:100%; max-width:100%; min-width:0; min-height:370px;
  overflow:hidden; isolation:isolate;
  border:1px solid color-mix(in srgb,var(--card-accent) 60%,white);
  box-shadow:0 22px 58px rgba(0,0,0,.29),0 0 20px var(--postcard-glow),inset 0 1px rgba(255,255,255,.5);
  transition:box-shadow .38s ease,border-color .38s ease,filter .38s ease;
}
.postcard-section .postcard::after { position:absolute; z-index:0; inset:0; content:""; pointer-events:none; }
.postcard-section .postcard > .postcard-label,
.postcard-section .postcard > h3,
.postcard-section .postcard > .postcard-signoff { position:relative; z-index:1; }
.postcard-section .postcard > .postmark { z-index:2; }
.postcard-section .postcard h3 { min-height:0; text-wrap:pretty; }
.postcard-section .postcard:hover { filter:saturate(1.07) brightness(1.02); border-color:color-mix(in srgb,var(--card-accent) 78%,white); box-shadow:0 27px 68px rgba(0,0,0,.34),0 0 32px var(--postcard-glow),inset 0 1px rgba(255,255,255,.7); }
.postcard-section .postcard .postmark { transition:transform .35s ease,box-shadow .35s ease; }
.postcard-section .postcard:hover .postmark { transform:translateY(-2px) rotate(-4deg); box-shadow:0 7px 18px rgba(0,0,0,.19),0 0 15px var(--postcard-glow); }
.postcard-section .postcard-art { opacity:.36; mix-blend-mode:multiply; }
.postcard-section .postcard:hover .postcard-art { opacity:.43; }

/* 01 — familiar cream keepsake; double rule, corner stamp, quiet gold edge. */
.postcard-section .postcard-theme-1 { --postcard-glow:rgba(238,175,101,.19); min-height:370px; padding:54px 58px 42px; border:1px solid #caa879; border-radius:2px; background-image:linear-gradient(135deg,rgba(255,255,255,.52),transparent 48%),linear-gradient(145deg,#fff4df,#ead8bc); }
.postcard-section .postcard-theme-1::before { inset:12px; border:3px double rgba(145,105,96,.42); }
.postcard-section .postcard-theme-1 .postmark { top:24px; right:25px; left:auto; width:45px; height:54px; border-radius:2px; background:#fff8eb; color:#a26880; }
.postcard-section .postcard-theme-1 .postcard-label { max-width:72%; margin:22px 0 15px; }
.postcard-section .postcard-theme-1 h3 { max-width:92%; font-size:clamp(34px,3.9vw,47px); }
.postcard-section .postcard-theme-1 .postcard-signoff { align-self:flex-end; font-style:italic; }

/* 02 — classic airmail: message on one side, round postal seal on the other. */
.postcard-section .postcard-theme-2 { --postcard-glow:rgba(85,191,226,.22); display:grid; grid-template-columns:88px minmax(0,1fr); grid-template-rows:auto 1fr auto; align-content:center; gap:12px 22px; min-height:370px; padding:44px 43px; border:1px solid #79b9d0; border-radius:4px 18px 4px 18px; background-image:repeating-linear-gradient(135deg,rgba(63,147,178,.17) 0 7px,transparent 7px 14px),linear-gradient(135deg,#dff4f7 0 18px,#c7e8ef 18px 36px,#e8f6f5 36px); background-size:14px 14px,auto; }
.postcard-section .postcard-theme-2::before { inset:8px; border:1px dashed rgba(54,126,153,.48); }
.postcard-section .postcard-theme-2 .postmark { top:50%; left:22px; width:64px; height:64px; transform:translateY(-50%); border:2px dashed #477e91; background:rgba(244,253,252,.86); font-size:24px; }
.postcard-section .postcard-theme-2 .postcard-label,.postcard-section .postcard-theme-2 h3,.postcard-section .postcard-theme-2 .postcard-signoff { grid-column:2; }
.postcard-section .postcard-theme-2 .postcard-label { margin:0; }
.postcard-section .postcard-theme-2 h3 { align-self:center; font-size:clamp(30px,3.7vw,43px); }
.postcard-section .postcard-theme-2 .postcard-signoff { justify-self:end; margin:0; }

/* 03 — petite watercolor note; deliberately shorter and smaller than the others. */
.postcard-section .postcard-theme-3 { --postcard-glow:rgba(255,132,105,.18); align-items:center; min-height:315px; padding:34px 42px; border:1px solid rgba(190,102,86,.58); border-radius:46% 46% 4px 4px / 12% 12% 4px 4px; background-image:radial-gradient(ellipse at 50% 47%,rgba(255,246,222,.88),transparent 64%),linear-gradient(150deg,#ffd6bd,#eea596); text-align:center; }
.postcard-section .postcard-theme-3::before { inset:15px; border:1px solid rgba(165,88,76,.42); border-radius:inherit; }
.postcard-section .postcard-theme-3 .postmark { top:15px; left:50%; width:34px; height:34px; transform:translateX(-50%); border:0; background:transparent; font-size:25px; }
.postcard-section .postcard-theme-3 .postcard-label { margin:39px 0 10px; }
.postcard-section .postcard-theme-3 h3 { font-size:clamp(33px,3.8vw,45px); line-height:1.02; }
.postcard-section .postcard-theme-3 .postcard-signoff { margin-top:12px; }

/* 04 — a short lilac typewritten note on ruled stationery. */
.postcard-section .postcard-theme-4 { --postcard-glow:rgba(163,140,233,.2); min-height:325px; padding:45px 52px; border:1px solid rgba(128,108,185,.7); border-radius:3px; background-image:linear-gradient(90deg,rgba(255,255,255,.45),transparent 58%),repeating-linear-gradient(0deg,transparent 0 33px,rgba(111,96,164,.14) 33px 34px),linear-gradient(135deg,#e9e4ff,#c8bce8); font-family:"Cormorant Garamond",var(--serif); }
.postcard-section .postcard-theme-4::before { inset:10px; border:1px solid rgba(117,101,174,.3); }
.postcard-section .postcard-theme-4 .postmark { top:20px; right:24px; left:auto; border-radius:50%; background:rgba(249,246,255,.78); }
.postcard-section .postcard-theme-4 .postcard-label { margin:14px 0 13px; font:800 8px "Manrope",var(--sans); }
.postcard-section .postcard-theme-4 h3 { font-size:clamp(30px,3.6vw,42px); line-height:1.08; }
.postcard-section .postcard-theme-4 .postcard-signoff { margin-top:14px; font-size:16px; }

/* 05 — leafy garden card with a side ribbon and more room for its longer wish. */
.postcard-section .postcard-theme-5 { --postcard-glow:rgba(132,190,99,.22); min-height:395px; padding:52px 57px 44px 70px; border:1px solid rgba(113,155,85,.64); border-radius:3px 28px 3px 28px; background-image:radial-gradient(ellipse at 92% 9%,rgba(255,255,255,.8),transparent 38%),radial-gradient(ellipse at 8% 100%,rgba(170,212,137,.48),transparent 45%),linear-gradient(135deg,#ecf4d9,#bddda9); }
.postcard-section .postcard-theme-5::before { inset:0 auto 0 0; width:18px; border:0; background:repeating-linear-gradient(0deg,#527f52 0 8px,#e8f2d3 8px 16px); opacity:.7; }
.postcard-section .postcard-theme-5 .postmark { top:20px; right:26px; left:auto; border:0; background:rgba(243,251,229,.68); color:#64844e; }
.postcard-section .postcard-theme-5 .postcard-label { margin:12px 0 14px; }
.postcard-section .postcard-theme-5 h3 { font-size:clamp(27px,3.2vw,38px); line-height:1.12; }

/* 06 — sunny birthday card with a large sun-seal and scattered tiny confetti. */
.postcard-section .postcard-theme-6 { --postcard-glow:rgba(255,198,52,.25); align-items:center; justify-content:center; min-height:370px; padding:70px 52px 42px; border:1px solid rgba(183,138,35,.7); border-radius:3px; background-image:radial-gradient(circle at 12% 26%,rgba(255,255,255,.85) 0 2px,transparent 3px),radial-gradient(circle at 88% 72%,rgba(255,255,255,.76) 0 2px,transparent 3px),radial-gradient(ellipse at 50% 4%,rgba(255,249,203,.75),transparent 48%),linear-gradient(150deg,#fff1a6,#e9c454); background-size:49px 43px,61px 57px,auto,auto; text-align:center; }
.postcard-section .postcard-theme-6::before { inset:13px; border:1px solid rgba(155,117,35,.4); border-radius:2px; }
.postcard-section .postcard-theme-6 .postmark { top:18px; left:50%; width:56px; height:56px; transform:translateX(-50%); border:1px solid #b18a37; background:#fff8d7; box-shadow:0 0 0 6px rgba(255,250,218,.3); }
.postcard-section .postcard-theme-6 .postcard-label { margin:11px 0 14px; }
.postcard-section .postcard-theme-6 h3 { max-width:94%; font-size:clamp(32px,3.8vw,45px); }
.postcard-section .postcard-theme-6 .postcard-signoff { font:800 9px "Manrope",var(--sans); letter-spacing:.1em; text-transform:uppercase; }

/* 07 — a rosy photo-album print with an inset scallop-like frame. */
.postcard-section .postcard-theme-7 { --postcard-glow:rgba(233,104,167,.22); align-items:center; min-height:370px; padding:54px 54px 44px; border:1px solid rgba(188,81,132,.58); border-radius:8px; background-image:radial-gradient(circle at 18% 20%,rgba(255,255,255,.8) 0 2px,transparent 3px),radial-gradient(circle at 82% 78%,rgba(255,255,255,.8) 0 2px,transparent 3px),linear-gradient(140deg,#ffdfeb,#e9a8ca); background-size:55px 57px,61px 63px,auto; text-align:center; box-shadow:0 22px 58px rgba(0,0,0,.27),0 8px 0 rgba(165,87,125,.11); }
.postcard-section .postcard-theme-7::before { inset:10px; border:1px solid rgba(165,87,125,.38); border-radius:4px; }
.postcard-section .postcard-theme-7 .postmark { top:18px; left:20px; width:35px; height:35px; border:0; background:#fff0f6; }
.postcard-section .postcard-theme-7 .postcard-label { margin:30px 0 14px; }
.postcard-section .postcard-theme-7 h3 { font-size:clamp(38px,4.5vw,54px); }

/* 08 — a teal music-note postcard; distinct split composition, not another garden card. */
.postcard-section .postcard-theme-8 { --postcard-glow:rgba(48,187,164,.23); display:grid; grid-template-columns:minmax(0,1fr) 76px; grid-template-rows:auto 1fr auto; gap:12px 18px; min-height:370px; padding:42px 42px 38px 48px; border:1px solid rgba(52,145,132,.66); border-radius:4px 22px 4px 22px; background-image:radial-gradient(circle at 77% 23%,rgba(255,255,255,.9) 0 1px,transparent 2px),radial-gradient(ellipse at 100% 0%,rgba(139,232,207,.78),transparent 40%),linear-gradient(140deg,#d6f3e9,#a8d9cf 62%,#c5e7dd); background-size:36px 38px,auto,auto; }
.postcard-section .postcard-theme-8::before { inset:10px; border:1px solid rgba(54,133,122,.4); border-radius:2px 16px; }
.postcard-section .postcard-theme-8 .postmark { top:50%; right:25px; left:auto; width:55px; height:55px; transform:translateY(-50%); border:1px solid rgba(55,128,119,.48); background:#e9fbf4; }
.postcard-section .postcard-theme-8 .postcard-label,.postcard-section .postcard-theme-8 h3,.postcard-section .postcard-theme-8 .postcard-signoff { grid-column:1; }
.postcard-section .postcard-theme-8 .postcard-label { margin:0; }
.postcard-section .postcard-theme-8 h3 { align-self:center; font:600 clamp(31px,3.7vw,44px)/1.06 "Cormorant Garamond",var(--serif); }
.postcard-section .postcard-theme-8 .postcard-signoff { margin:0; }

/* 09 — sunrise postcard, warm horizon band and space for the longer ninth-year note. */
.postcard-section .postcard-theme-9 { --postcard-glow:rgba(255,139,77,.22); min-height:390px; padding:48px 55px 42px; border:1px solid rgba(184,106,70,.66); border-radius:3px; background-image:radial-gradient(ellipse at 78% 5%,rgba(255,244,201,.9),transparent 40%),linear-gradient(0deg,rgba(205,103,101,.17) 0 1px,transparent 1px 28px),linear-gradient(145deg,#ffe3bd,#f2ae91 63%,#e99196); background-size:auto,100% 28px,auto; }
.postcard-section .postcard-theme-9::before { inset:12px; border:1px solid rgba(165,92,69,.43); }
.postcard-section .postcard-theme-9 .postmark { top:18px; right:23px; left:auto; background:rgba(255,244,224,.75); }
.postcard-section .postcard-theme-9 .postcard-label { margin:8px 0 14px; }
.postcard-section .postcard-theme-9 h3 { max-width:94%; font-size:clamp(30px,3.55vw,42px); line-height:1.1; }

/* 10 — midnight-blue, clean circular postmark cancellation in place of scattered dots. */
.postcard-section .postcard-theme-10 { --postcard-glow:rgba(105,190,244,.2); min-height:370px; padding:50px 54px; border:1px solid rgba(119,188,228,.65); border-radius:3px; background-image:radial-gradient(ellipse at 8% 100%,rgba(109,79,172,.38),transparent 48%),radial-gradient(circle at 90% 18%,rgba(151,214,255,.62) 0 1px,transparent 2px),linear-gradient(135deg,#19263e,#10172b 66%,#252441); }
.postcard-section .postcard-theme-10::before { inset:12px; border:1px solid rgba(150,203,238,.32); }
.postcard-section .postcard-theme-10::after { background:radial-gradient(circle at 90% 18%,transparent 0 24px,rgba(160,213,245,.34) 25px 26px,transparent 27px),radial-gradient(circle at 90% 18%,transparent 0 32px,rgba(160,213,245,.19) 33px 34px,transparent 35px); }
.postcard-section .postcard-theme-10 .postmark { top:18px; right:23px; left:auto; border-color:rgba(160,213,245,.56); background:rgba(20,35,57,.8); color:#b6e7ff; }
.postcard-section .postcard-theme-10 h3 { font-size:clamp(34px,4vw,48px); }
.postcard-section .postcard-theme-10 .postcard-signoff { color:#ffd66e; }
.postcard-section .postcard-theme-10 .postcard-art { opacity:.18; mix-blend-mode:screen; }

/* 11 — aqua first-class postcard with side perforations and a longer, airy wish. */
.postcard-section .postcard-theme-11 { --postcard-glow:rgba(49,187,203,.2); min-height:390px; padding:50px 52px 42px 64px; border:1px solid rgba(57,150,164,.65); border-radius:4px; background-image:radial-gradient(ellipse at 95% 0%,rgba(255,255,255,.85),transparent 42%),linear-gradient(135deg,#e2f8f2,#addde4 62%,#b9d4ed); }
.postcard-section .postcard-theme-11::before { inset:0 auto 0 20px; border:0; border-left:1px dashed rgba(53,132,149,.5); }
.postcard-section .postcard-theme-11 .postmark { top:20px; right:22px; left:auto; width:49px; height:49px; border:1px solid rgba(54,132,147,.55); background:#effcf7; }
.postcard-section .postcard-theme-11 .postcard-label { margin:12px 0 14px; }
.postcard-section .postcard-theme-11 h3 { font-size:clamp(30px,3.5vw,42px); line-height:1.1; }

/* 12 — apricot postcard with a ticket-like caption rail and postmark seal. */
.postcard-section .postcard-theme-12 { --postcard-glow:rgba(235,131,68,.2); min-height:370px; padding:48px 55px 44px 72px; border:1px solid rgba(179,106,59,.65); border-radius:3px 18px 3px 18px; background-image:radial-gradient(ellipse at 10% 100%,rgba(255,239,211,.68),transparent 48%),linear-gradient(135deg,#ffe9c7,#f0bf91 70%,#e9a884); }
.postcard-section .postcard-theme-12::before { inset:0 auto 0 19px; border:0; border-left:2px dotted rgba(169,103,62,.48); }
.postcard-section .postcard-theme-12 .postmark { top:19px; right:21px; left:auto; width:48px; height:48px; border:2px solid rgba(177,108,65,.56); background:rgba(255,246,225,.7); }
.postcard-section .postcard-theme-12 .postcard-label { margin:12px 0 15px; }
.postcard-section .postcard-theme-12 h3 { font-size:clamp(29px,3.6vw,43px); }

/* 13 — lilac folded-corner chapter card, more refined than the round notes. */
.postcard-section .postcard-theme-13 { --postcard-glow:rgba(148,129,227,.21); min-height:370px; padding:52px 58px; border:1px solid rgba(123,108,186,.7); border-radius:2px; background-image:linear-gradient(135deg,rgba(255,255,255,.7) 0 12%,transparent 12.2%),radial-gradient(ellipse at 88% 100%,rgba(255,255,255,.48),transparent 45%),linear-gradient(145deg,#eeebff,#c9c0ef 65%,#b5c9eb); }
.postcard-section .postcard-theme-13::before { inset:15px; border:1px solid rgba(107,94,169,.48); border-radius:24px 2px; }
.postcard-section .postcard-theme-13 .postmark { top:20px; right:24px; left:auto; border-radius:50% 50% 50% 3px; background:#7a6cba; color:#fff; }
.postcard-section .postcard-theme-13 .postcard-label { margin:10px 0 14px; }
.postcard-section .postcard-theme-13 h3 { font-size:clamp(34px,4vw,47px); }

/* 14 — larger rose-script anniversary note; more vertical room for the longer message. */
.postcard-section .postcard-theme-14 { --postcard-glow:rgba(238,111,155,.21); min-height:390px; padding:52px 50px 44px; border:1px solid rgba(184,81,116,.68); border-radius:4px 22px 4px 22px; background-image:radial-gradient(circle at 84% 17%,rgba(255,255,255,.86) 0 2px,transparent 3px),radial-gradient(ellipse at 100% 0%,rgba(255,255,255,.56),transparent 42%),linear-gradient(140deg,#ffe5e0,#efb1c1 67%,#e49db8); background-size:48px 47px,auto,auto; }
.postcard-section .postcard-theme-14::before { inset:10px; border:1px solid rgba(169,80,111,.42); border-radius:2px 16px; }
.postcard-section .postcard-theme-14 .postmark { top:19px; right:22px; left:auto; border-radius:3px; transform:rotate(5deg); }
.postcard-section .postcard-theme-14 .postcard-label { margin:18px 0 12px; }
.postcard-section .postcard-theme-14 h3 { font-size:clamp(35px,4.25vw,50px); line-height:1.06; }

/* 15 — blue ocean postcard with a broad horizon band and relaxed spacing. */
.postcard-section .postcard-theme-15 { --postcard-glow:rgba(79,165,228,.22); min-height:390px; padding:49px 58px 43px; border:1px solid rgba(72,131,179,.68); border-radius:2px 20px 2px 20px; background-image:linear-gradient(180deg,rgba(255,255,255,.52) 0 39%,transparent 39.2%),linear-gradient(0deg,rgba(68,143,189,.16) 0 1px,transparent 1px 26px),linear-gradient(135deg,#e0f3fa,#b6d9ed 64%,#a8c7e3); background-size:auto,100% 26px,auto; }
.postcard-section .postcard-theme-15::before { inset:13px; border:1px solid rgba(71,119,157,.42); }
.postcard-section .postcard-theme-15 .postmark { top:19px; left:22px; border-style:dashed; background:#eaf8fc; }
.postcard-section .postcard-theme-15 .postcard-label { margin:12px 0 14px; }
.postcard-section .postcard-theme-15 h3 { font-size:clamp(30px,3.6vw,43px); line-height:1.12; }

/* 16 — fresh green route card, with a hand-drawn path in the left margin. */
.postcard-section .postcard-theme-16 { --postcard-glow:rgba(79,183,125,.21); min-height:370px; padding:50px 56px 42px 75px; border:1px solid rgba(73,141,104,.65); border-radius:4px; background-image:radial-gradient(ellipse at 98% 0%,rgba(255,255,255,.76),transparent 48%),linear-gradient(140deg,#e4f5e8,#acd9c2 70%,#9dcab3); }
.postcard-section .postcard-theme-16::before { inset:16px auto 16px 31px; border:0; border-left:1px dashed rgba(65,133,93,.57); }
.postcard-section .postcard-theme-16 .postmark { top:19px; right:21px; left:auto; background:#4e876b; color:white; }
.postcard-section .postcard-theme-16 .postcard-label { margin:11px 0 13px; }
.postcard-section .postcard-theme-16 h3 { font-size:clamp(30px,3.7vw,44px); }

/* 17 — simple golden sunshine, retaining its gentle frame and celebration. */
.postcard-section .postcard-theme-17 { --postcard-glow:rgba(255,201,53,.22); min-height:370px; padding:52px 55px 42px; border:1px solid rgba(174,134,41,.65); border-radius:40% 4px 4px 4px; background-image:radial-gradient(circle at 14% 18%,rgba(255,255,255,.9) 0 2px,transparent 3px),radial-gradient(ellipse at 93% 8%,rgba(255,248,198,.75),transparent 44%),linear-gradient(150deg,#fff2b9,#e8ca68); background-size:51px 47px,auto,auto; }
.postcard-section .postcard-theme-17::before { inset:13px; border:1px solid rgba(151,115,43,.45); border-radius:36% 2px 2px; }
.postcard-section .postcard-theme-17 .postmark { top:19px; right:23px; left:auto; background:rgba(255,250,221,.8); }
.postcard-section .postcard-theme-17 .postcard-label { margin:14px 0; }

/* 18 — twilight lavender letter, longer wish with easy line length and height. */
.postcard-section .postcard-theme-18 { --postcard-glow:rgba(181,118,224,.22); min-height:390px; padding:52px 54px 43px; border:1px solid rgba(139,91,160,.7); border-radius:3px; background-image:radial-gradient(circle at 82% 17%,rgba(255,255,255,.78) 0 1px,transparent 2px),radial-gradient(ellipse at 96% 4%,rgba(255,255,255,.52),transparent 42%),linear-gradient(135deg,#f7e4f2,#d5b5e2 62%,#a9cce8); background-size:38px 41px,auto,auto; }
.postcard-section .postcard-theme-18::before { inset:12px; border:1px solid rgba(135,95,145,.45); }
.postcard-section .postcard-theme-18 .postmark { top:19px; right:22px; left:auto; background:#f8eff9; }
.postcard-section .postcard-theme-18 .postcard-label { margin:12px 0 14px; }
.postcard-section .postcard-theme-18 h3 { font-size:clamp(29px,3.5vw,42px); line-height:1.12; }

/* 19 — personal finale: photo full-bleed, richer rose light, four gold corner ornaments. */
.postcard-section .postcard-theme-19 { --postcard-glow:rgba(255,157,119,.28); min-height:410px; padding:72px clamp(40px,6vw,86px) 46px; border:1px solid rgba(255,231,192,.9); border-radius:4px 22px 4px 22px; box-shadow:0 28px 82px rgba(0,0,0,.42),0 0 38px rgba(235,91,128,.25),inset 0 0 0 2px rgba(255,218,141,.16); }
.postcard-section .postcard-theme-19::before { inset:12px; border:1px solid rgba(255,231,192,.78); background:radial-gradient(circle at 10px 10px,#ffe2a8 0 2px,transparent 3px),radial-gradient(circle at calc(100% - 10px) 10px,#ffe2a8 0 2px,transparent 3px),radial-gradient(circle at 10px calc(100% - 10px),#ffe2a8 0 2px,transparent 3px),radial-gradient(circle at calc(100% - 10px) calc(100% - 10px),#ffe2a8 0 2px,transparent 3px); }
.postcard-section .postcard-theme-19::after { background:linear-gradient(90deg,rgba(66,7,27,.58),rgba(72,8,30,.39) 52%,rgba(66,7,27,.58)),linear-gradient(0deg,rgba(71,8,29,.43),rgba(83,11,37,.12) 55%,rgba(71,8,29,.38)); }
.postcard-section .postcard-theme-19 h3 { width:min(100%,760px); max-width:100%; font-size:clamp(32px,3.7vw,45px); line-height:1.1; text-wrap:balance; }
.postcard-section .postcard-theme-19 .postmark { box-shadow:0 0 23px rgba(255,205,134,.43),0 0 0 5px rgba(255,225,157,.12); }

@media (max-width:700px) {
  .postcard-layout { grid-template-columns:minmax(0,1fr); }
  .postcard-intro,.postcard-display { min-width:0; }
  .postcard-display { width:min(100%,520px); margin-inline:auto; padding-inline:24px; }
  .postcard-section .postcard { width:100%; min-height:360px; }
  .postcard-section .postcard-theme-2 { grid-template-columns:65px minmax(0,1fr); gap:10px 14px; padding:40px 28px; }
  .postcard-section .postcard-theme-2 .postmark { left:10px; width:52px; height:52px; }
  .postcard-section .postcard-theme-3 { min-height:290px; padding:30px 25px; }
  .postcard-section .postcard-theme-4 { min-height:310px; }
  .postcard-section .postcard-theme-5,.postcard-section .postcard-theme-9,.postcard-section .postcard-theme-11,.postcard-section .postcard-theme-14,.postcard-section .postcard-theme-15,.postcard-section .postcard-theme-18 { min-height:380px; }
  .postcard-section .postcard-theme-8 { grid-template-columns:minmax(0,1fr) 58px; gap:10px 12px; padding:38px 27px; }
  .postcard-section .postcard-theme-8 .postmark { right:14px; width:46px; height:46px; }
  .postcard-section .postcard-theme-19 { min-height:390px; padding:70px 25px 36px; }
}
@media (prefers-reduced-motion:reduce) {
  .postcard-section .postcard,.postcard-section .postcard-art,.postcard-section .postcard .postmark { transition:none; }
}

/* One shared postcard frame for the entire carousel; the 19th varies only in artwork. */
.postcard-section .postcard {
  height:390px !important;
  min-height:0 !important;
  max-height:390px;
  aspect-ratio:auto;
  box-sizing:border-box;
}
@media (max-width:700px) {
  .postcard-section .postcard-display {
    position:relative;
    left:0;
    box-sizing:border-box;
    width:min(calc(100vw - 32px),580px);
    max-width:100%;
    margin-inline:auto;
    padding-inline:0;
    transform:none;
  }
  .postcard-section .postcard {
    height:350px !important;
    min-height:350px !important;
    max-height:350px;
  }
  .postcard-section .postcard-theme-19 h3 {
    font-size:clamp(15px,4.5vw,20px) !important;
    line-height:1.16;
  }
  /* Let the narrower phone layout wrap cleanly while retaining each card's typeface and scale. */
  .postcard-section .postcard-theme-9 h3 { font-size:clamp(16px,4.6vw,20px) !important; line-height:1.12; }
  .postcard-section .postcard-theme-11 h3 { font-size:clamp(16px,4.7vw,21px) !important; line-height:1.12; }
  .postcard-section .postcard-theme-14 h3 { font-size:clamp(18px,5vw,23px) !important; line-height:1.1; }
  .postcard-section .postcard-theme-15 h3 { font-size:clamp(16px,4.7vw,21px) !important; line-height:1.14; }
  .postcard-section .postcard-theme-17 h3 { font-size:clamp(18px,5vw,23px) !important; line-height:1.1; }
  .postcard-section .postcard-theme-18 h3 { font-size:clamp(16px,4.7vw,21px) !important; line-height:1.12; }
  .postcard-section .postcard-theme-19 { padding:58px 22px 24px; }
}
.postcard-section .postcard-theme-19 {
  padding:62px clamp(34px,4vw,54px) 32px;
}
.postcard-section .postcard-theme-19 h3 {
  font-size:clamp(28px,2.5vw,34px);
  line-height:1.08;
  text-align:left;
}
@media (max-width:700px) {
  .postcard-section .postcard-theme-19 { padding:64px 30px 30px; }
}

/* Final postcard pass: keep the seven marked cards visually distinct and let the
   19th card's rose artwork show through its own richer, lighter overlay. */
.postcard-section .postcard-theme-9 h3 { font-size:clamp(29px,3.1vw,37px); line-height:1.08; }
.postcard-section .postcard-theme-11 h3 { font-size:clamp(29px,3.15vw,38px); line-height:1.08; }
.postcard-section .postcard-theme-14 h3 { font-size:clamp(34px,3.7vw,45px); line-height:1.04; }
.postcard-section .postcard-theme-15 h3 { font-size:clamp(29px,3.1vw,37px); line-height:1.1; }
.postcard-section .postcard-theme-17 h3 { font-size:clamp(33px,3.6vw,43px); line-height:1.06; }
.postcard-section .postcard-theme-18 h3 { font-size:clamp(29px,3.1vw,38px); line-height:1.1; }
.postcard-section .postcard-theme-19 { padding:58px clamp(38px,4.8vw,64px) 34px; }
.postcard-section .postcard-theme-19::after {
  z-index:0;
  background:linear-gradient(100deg,rgba(55,8,31,.30),rgba(68,10,38,.12) 52%,rgba(48,9,34,.32)),linear-gradient(0deg,rgba(55,8,31,.23),transparent 60%,rgba(76,9,40,.20));
}
.postcard-section .postcard-theme-19 .postcard-art {
  z-index:1;
  opacity:.78;
  mix-blend-mode:normal;
}
.postcard-section .postcard-theme-19 .postcard-art img {
  filter:brightness(.74) saturate(1.08) contrast(1.05);
}
.postcard-section .postcard-theme-19 > .postcard-label,
.postcard-section .postcard-theme-19 > h3,
.postcard-section .postcard-theme-19 > .postcard-signoff { z-index:2; }
.postcard-section .postcard-theme-19 > .postmark { z-index:3; }
@media (max-width:700px) {
  .postcard-section .postcard-theme-19 { padding:58px 22px 24px; }
}

/* Marked postcard pass: match the hand-drawn target frames while retaining
   each card's own palette and stationery treatment. */
/* Give the requested revisions more confident, editorial type without
   changing any of the postcard messages or the untouched cards. */
.postcard-section .postcard-theme-4 h3 {
  color:#34294f;
  font-family:"Bodoni Moda","Cormorant Garamond",Georgia,serif;
  font-size:clamp(32px,3.45vw,42px);
  font-weight:700;
  letter-spacing:-.025em;
  line-height:1.08;
  text-shadow:0 1px 0 rgba(255,255,255,.42);
}
.postcard-section .postcard-theme-8 {
  --postcard-glow:rgba(54,220,169,.28);
  border-color:rgba(48,151,120,.82);
  background-image:radial-gradient(ellipse at 86% 8%,rgba(255,249,206,.76),transparent 36%),radial-gradient(ellipse at 10% 100%,rgba(62,183,133,.34),transparent 52%),linear-gradient(140deg,#d8f4d8,#a8ddc2 56%,#8ec8ae);
}
.postcard-section .postcard-theme-8 .postcard-label {
  grid-column:1;
  grid-row:1;
  justify-self:center;
  align-self:end;
  margin:0 0 10px;
  max-width:calc(100% - 48px);
  padding:0;
  color:#276e5c;
  font-size:8px;
  letter-spacing:.16em;
  line-height:1.4;
  text-align:center;
  writing-mode:horizontal-tb;
  transform:none;
}
.postcard-section .postcard-theme-8 h3 { align-self:start; margin-top:12px; }
.postcard-section .postcard-theme-8 h3,
.postcard-section .postcard-theme-11 h3,
.postcard-section .postcard-theme-12 h3,
.postcard-section .postcard-theme-15 h3,
.postcard-section .postcard-theme-18 h3 {
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:700;
}
.postcard-section .postcard-theme-9 h3 {
  max-width:100%;
  font-weight:700;
  line-height:1.12;
  overflow-wrap:normal;
}
.postcard-section .postcard-theme-11 h3 { font-size:clamp(27px,2.75vw,34px); line-height:1.08; }
.postcard-section .postcard-theme-12 {
  --postcard-glow:rgba(244,139,62,.27);
  background-image:radial-gradient(ellipse at 90% 0%,rgba(255,255,225,.82),transparent 40%),radial-gradient(ellipse at 0% 100%,rgba(238,130,65,.32),transparent 50%),linear-gradient(140deg,#ffedc6,#f4bd83 62%,#eaa17d);
}
.postcard-section .postcard-theme-14 h3 { font-size:clamp(32px,3.25vw,40px); line-height:1.08; }
.postcard-section .postcard-theme-15 h3 { font-size:clamp(28px,2.85vw,35px); line-height:1.1; }
.postcard-section .postcard-theme-17 {
  border-radius:4px 18px 4px 18px;
  background-image:radial-gradient(circle at 14% 18%,rgba(255,255,255,.94) 0 2px,transparent 3px),radial-gradient(ellipse at 93% 8%,rgba(255,252,209,.82),transparent 44%),linear-gradient(145deg,#fff4bd,#f1d06d 60%,#e8b957);
}
.postcard-section .postcard-theme-17::before { border-radius:2px 13px 2px 13px; }
.postcard-section .postcard-theme-18 h3 { font-size:clamp(28px,2.9vw,36px); line-height:1.1; }
.postcard-section .postcard-theme-19 {
  padding:54px clamp(32px,4vw,48px) 30px;
  justify-content:center;
  text-align:center;
}
.postcard-section .postcard-theme-19 .postcard-label {
  align-self:center;
  max-width:calc(100% - 54px);
  margin:0 auto 12px;
  text-align:center;
  text-wrap:balance;
}
.postcard-section .postcard-theme-19 h3 {
  align-self:center;
  width:min(100%,440px);
  margin-inline:auto;
  font-family:"Bodoni Moda","Cormorant Garamond",Georgia,serif;
  font-size:clamp(25px,2.35vw,31px);
  font-weight:700;
  line-height:1.08;
  text-align:center;
  text-wrap:balance;
}
.postcard-section .postcard-theme-19 .postcard-signoff { align-self:center; }
@media (max-width:700px) {
  .postcard-section .postcard-theme-1 h3 { font-size:clamp(21px,5.8vw,24px); line-height:1.1; }
  .postcard-section .postcard-theme-3 h3 { font-size:clamp(23px,6vw,27px); line-height:1.06; }
  .postcard-section .postcard-theme-4 h3 { font-size:clamp(25px,7vw,32px); }
  .postcard-section .postcard-theme-8 h3 { font-size:clamp(21px,5.8vw,24px); font-weight:700; }
  .postcard-section .postcard-theme-11 h3 { font-size:clamp(20px,5.5vw,23px) !important; }
  .postcard-section .postcard-theme-12 h3 { font-size:clamp(20px,5.6vw,23px); font-weight:700; }
  .postcard-section .postcard-theme-14 h3 { font-size:clamp(18px,5vw,22px) !important; }
  .postcard-section .postcard-theme-15 h3 { font-size:clamp(17px,4.7vw,20px) !important; }
  .postcard-section .postcard-theme-17 h3 { font-size:clamp(20px,5.6vw,23px); line-height:1.08; }
  .postcard-section .postcard-theme-18 h3 { font-size:clamp(19px,5.2vw,22px) !important; }
  .postcard-section .postcard-theme-19 { padding:58px 22px 24px; }
  .postcard-section .postcard-theme-19 h3 { font-size:clamp(15px,4.5vw,20px) !important; }
}

/* Individual dimensions traced from the white target frames in Screenshot (192). */
.postcard-section .postcard { box-sizing:border-box; margin-inline:auto; }
.postcard-section .postcard-theme-1 { width:min(100%,483px); height:461px !important; min-height:461px !important; max-height:461px; }
.postcard-section .postcard-theme-3 { width:min(100%,539px); height:455px !important; min-height:455px !important; max-height:455px; }
.postcard-section .postcard-theme-4 { width:min(100%,564px); height:461px !important; min-height:461px !important; max-height:461px; }
.postcard-section .postcard-theme-8 { width:min(100%,532px); height:459px !important; min-height:459px !important; max-height:459px; }
.postcard-section .postcard-theme-9 { width:min(100%,520px); height:537px !important; min-height:537px !important; max-height:537px; }
.postcard-section .postcard-theme-11 { width:min(100%,496px); height:498px !important; min-height:498px !important; max-height:498px; }
.postcard-section .postcard-theme-12 { width:min(100%,510px); height:473px !important; min-height:473px !important; max-height:473px; }
.postcard-section .postcard-theme-14 { width:min(100%,498px); height:411px !important; min-height:411px !important; max-height:411px; }
.postcard-section .postcard-theme-15 { width:min(100%,508px); height:510px !important; min-height:510px !important; max-height:510px; }
.postcard-section .postcard-theme-17 { width:min(100%,569px); height:404px !important; min-height:404px !important; max-height:404px; }
.postcard-section .postcard-theme-18 { width:min(100%,461px); height:411px !important; min-height:411px !important; max-height:411px; }
/* Card 19 keeps the shared original 390px desktop frame and full display width. */

/* Let marked messages use their actual copy height inside their custom frames. */
.postcard-section .postcard-theme-1 h3,
.postcard-section .postcard-theme-3 h3,
.postcard-section .postcard-theme-4 h3,
.postcard-section .postcard-theme-8 h3,
.postcard-section .postcard-theme-9 h3,
.postcard-section .postcard-theme-11 h3,
.postcard-section .postcard-theme-12 h3,
.postcard-section .postcard-theme-14 h3,
.postcard-section .postcard-theme-15 h3,
.postcard-section .postcard-theme-17 h3,
.postcard-section .postcard-theme-18 h3 { min-height:0; max-width:100%; overflow-wrap:anywhere; }
.postcard-section .postcard-theme-10 h3 { min-height:0; font-size:clamp(30px,3.15vw,38px); line-height:1.04; }
.postcard-section .postcard-theme-13 h3 { min-height:0; font-size:clamp(25px,2.8vw,34px); line-height:1.06; }
.postcard-section .postcard-theme-14 h3 { font-size:clamp(28px,2.6vw,34px); line-height:1.08; }
.postcard-section .postcard-theme-18 h3 { font-size:clamp(27px,2.5vw,32px); line-height:1.1; }

/* Keep the controls on the same left and right edges as whichever card is shown. */
.postcard-section .postcard-arrow { top:var(--postcard-arrow-top, calc(50% - 21px)); transform:none; }
.postcard-section .postcard-arrow-prev {
  left:var(--postcard-arrow-left, 0px);
  right:auto;
}
.postcard-section .postcard-arrow-next {
  right:var(--postcard-arrow-right, 0px);
  left:auto;
}
@media (max-width:700px) {
  .postcard-section .postcard { height:350px !important; min-height:350px !important; max-height:350px; }
  .postcard-section .postcard { width:100%; min-height:350px; }
  .postcard-section .postcard-theme-1 { min-height:310px; }
  .postcard-section .postcard-theme-3,.postcard-section .postcard-theme-4,
  .postcard-section .postcard-theme-9,.postcard-section .postcard-theme-12,
  .postcard-section .postcard-theme-15 { min-height:330px; }
  .postcard-section .postcard-theme-8 { min-height:320px; }
  .postcard-section .postcard-theme-11,.postcard-section .postcard-theme-18 { min-height:360px; }
  .postcard-section .postcard-theme-14 { min-height:330px; }
  .postcard-section .postcard-theme-17 { min-height:310px; }
  .postcard-section .postcard-theme-10 h3 { font-size:clamp(18px,5.1vw,21px) !important; line-height:1.08; }
  .postcard-section .postcard-theme-13 h3 { font-size:clamp(16px,4.8vw,19px) !important; line-height:1.08; }
  .postcard-section .postcard-theme-16 h3 { min-height:0; font-size:clamp(17px,4.8vw,19px) !important; line-height:1.1; }
  .postcard-section .postcard-theme-14 h3 { font-size:clamp(18px,5vw,23px) !important; line-height:1.1; }
  .postcard-section .postcard-theme-18 h3 { font-size:clamp(16px,4.7vw,21px) !important; line-height:1.12; }
  /* Compact only the narrow-screen typesetting where long wishes collided with
     the sign-off. The desktop lettering and card artwork remain untouched. */
  .postcard-section .postcard-theme-2 { grid-template-columns:minmax(0,1fr); gap:8px; padding:42px 24px 26px; }
  .postcard-section .postcard-theme-2 .postmark { top:10px; left:12px; width:38px; height:38px; }
  .postcard-section .postcard-theme-2 h3,
  .postcard-section .postcard-theme-5 h3,
  .postcard-section .postcard-theme-6 h3,
  .postcard-section .postcard-theme-7 h3,
  .postcard-section .postcard-theme-11 h3,
  .postcard-section .postcard-theme-14 h3,
  .postcard-section .postcard-theme-15 h3,
  .postcard-section .postcard-theme-17 h3,
  .postcard-section .postcard-theme-18 h3 {
    min-height:0;
    font-size:clamp(16px,5.2vw,18px) !important;
    line-height:1.12;
  }
  .postcard-section .postcard-theme-2 .postcard-signoff,
  .postcard-section .postcard-theme-5 .postcard-signoff,
  .postcard-section .postcard-theme-6 .postcard-signoff,
  .postcard-section .postcard-theme-7 .postcard-signoff,
  .postcard-section .postcard-theme-11 .postcard-signoff,
  .postcard-section .postcard-theme-14 .postcard-signoff,
  .postcard-section .postcard-theme-15 .postcard-signoff,
  .postcard-section .postcard-theme-17 .postcard-signoff,
  .postcard-section .postcard-theme-18 .postcard-signoff {
    margin-top:10px;
    font-size:15px;
    line-height:1.1;
  }
}

/* One continuous, gently animated atmosphere behind the story segment. */
.segment-art-stage {
  position:absolute; z-index:0; top:auto; right:0; bottom:0; left:0;
  overflow:hidden; isolation:isolate; padding-bottom:12vh; pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 10vh,#000 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 10vh,#000 100%);
  background:
    radial-gradient(ellipse at 14% 5%,rgba(78,124,196,.2),transparent 38%),
    radial-gradient(ellipse at 87% 18%,rgba(185,83,151,.18),transparent 40%),
    radial-gradient(ellipse at 18% 36%,rgba(39,160,158,.18),transparent 42%),
    radial-gradient(ellipse at 82% 54%,rgba(133,91,198,.19),transparent 42%),
    radial-gradient(ellipse at 15% 73%,rgba(206,119,118,.15),transparent 40%),
    radial-gradient(ellipse at 84% 92%,rgba(66,138,183,.2),transparent 42%),
    linear-gradient(165deg,#0b1020 0%,#11132a 23%,#101b29 48%,#19132a 72%,#0c1827 100%);
  background-size:100% 100%;
}
.segment-art-stage::before {
  position:absolute; z-index:0; inset:-5% -12%; content:""; pointer-events:none;
  background:
    radial-gradient(ellipse 42% 9% at 10% 8%,rgba(79,157,221,.29),transparent 100%),
    radial-gradient(ellipse 48% 10% at 92% 19%,rgba(224,102,177,.24),transparent 100%),
    radial-gradient(ellipse 43% 9% at 15% 31%,rgba(64,194,174,.22),transparent 100%),
    radial-gradient(ellipse 48% 11% at 88% 44%,rgba(153,116,231,.25),transparent 100%),
    radial-gradient(ellipse 44% 10% at 12% 58%,rgba(238,156,98,.19),transparent 100%),
    radial-gradient(ellipse 48% 11% at 86% 70%,rgba(224,104,157,.23),transparent 100%),
    radial-gradient(ellipse 42% 9% at 14% 84%,rgba(71,171,206,.23),transparent 100%),
    radial-gradient(ellipse 48% 11% at 88% 97%,rgba(174,137,232,.23),transparent 100%);
  filter:blur(22px); opacity:.96; transform:translate3d(0,0,0);
  animation:continuous-nebula-flow 42s ease-in-out infinite alternate;
}
.segment-art-stage::after {
  position:absolute; z-index:1; inset:0; content:""; pointer-events:none; opacity:.4;
  background-image:
    radial-gradient(circle,rgba(225,235,255,.88) 0 1px,transparent 1.6px),
    radial-gradient(circle,rgba(159,218,255,.75) 0 1px,transparent 1.7px),
    radial-gradient(circle,rgba(255,191,225,.72) 0 .8px,transparent 1.5px);
  background-size:137px 181px,211px 239px,307px 293px;
  background-position:17px 23px,81px 51px,139px 97px;
  animation:continuous-star-drift 95s linear infinite;
}
.segment-art-stage .strip-art {
  position:absolute; z-index:2; display:block; width:clamp(90px,13vw,190px); max-width:none; max-height:30vh;
  object-fit:contain; opacity:.32; mix-blend-mode:screen;
  filter:saturate(1.18) drop-shadow(0 0 16px rgba(138,179,255,.2));
  transform-origin:center; animation:strip-art-float 17s ease-in-out infinite alternate;
}
.segment-art-stage .art-orbit { top:1%; left:-1%; width:clamp(120px,15vw,220px); opacity:.3; animation-delay:-5s; }
.segment-art-stage .art-bow { top:7%; right:3%; width:clamp(80px,10vw,148px); opacity:.34; animation-delay:-11s; }
.segment-art-stage .art-saturn { top:15%; left:5%; width:clamp(100px,13vw,185px); opacity:.24; animation-delay:-8s; }
.segment-art-stage .art-notes { top:51.4%; right:0; width:clamp(145px,19vw,270px); opacity:.3; animation-delay:-3s; }
.segment-art-stage .art-guitar { top:58.8%; left:1%; width:clamp(100px,14vw,205px); opacity:.27; animation-delay:-13s; }
.segment-art-stage .art-quiz { top:65.4%; right:4%; width:clamp(92px,12vw,175px); opacity:.32; animation-delay:-7s; }
.segment-art-stage .art-stars { top:69.6%; left:3%; width:clamp(110px,15vw,218px); opacity:.3; animation-delay:-10s; }
.segment-art-stage .art-heart { top:73.5%; right:2%; width:clamp(92px,12vw,175px); opacity:.32; animation-delay:-4s; }
.segment-art-stage .art-sprig { top:78.8%; left:0; width:clamp(100px,13vw,188px); opacity:.29; animation-delay:-14s; }
.segment-art-stage .art-babys-breath { top:82%; right:2%; width:clamp(105px,14vw,205px); opacity:.31; animation-delay:-9s; }
.segment-art-stage .art-dried-bouquet { top:83.7%; left:3%; width:clamp(110px,14vw,205px); opacity:.32; animation-delay:-2s; }
.segment-art-stage .art-loops { top:85.5%; right:1%; width:clamp(105px,14vw,200px); opacity:.3; animation-delay:-12s; }
.segment-art-stage .art-lipstick { top:75.2%; left:2%; width:clamp(85px,11vw,160px); opacity:.3; animation-delay:-6s; }
.segment-art-stage .art-watercolor { top:88.9%; right:3%; width:clamp(100px,13vw,185px); opacity:.3; animation-delay:-15s; }
.segment-art-stage .art-shooting-star { top:93.3%; left:-1%; width:clamp(130px,17vw,245px); opacity:.3; animation-delay:-1s; }
.segment-art-stage .art-future-stars { top:96.2%; right:5%; width:clamp(90px,12vw,175px); opacity:.31; animation-delay:-8s; }
.segment-art-stage .art-future-trail { top:98.5%; left:7%; width:clamp(130px,17vw,245px); opacity:.27; animation-delay:-4s; }
@keyframes continuous-nebula-flow {
  from { transform:translate3d(-1.2%,.2%,0) scale(.98); }
  to { transform:translate3d(1.2%,-.2%,0) scale(1.035); }
}
@keyframes continuous-star-drift {
  from { background-position:17px 23px,81px 51px,139px 97px; }
  to { background-position:154px 204px,-130px 290px,446px -196px; }
}
@keyframes strip-art-float {
  from { translate:0 0; rotate:-2deg; }
  to { translate:5px -12px; rotate:2deg; }
}
@media (max-width:700px) {
  .segment-art-stage { padding-bottom:16vh; }
  .segment-art-stage .strip-art { max-height:22vh; opacity:.27; }
  .segment-art-stage .art-orbit { width:clamp(100px,32vw,150px); }
  .segment-art-stage .art-notes { width:clamp(130px,39vw,190px); }
  .segment-art-stage .art-guitar { width:clamp(85px,25vw,130px); }
  .segment-art-stage .art-shooting-star,.segment-art-stage .art-future-trail { width:clamp(110px,34vw,165px); }
}
@media (prefers-reduced-motion:reduce) {
  .segment-art-stage::before,.segment-art-stage::after,.segment-art-stage .strip-art { animation:none !important; }
}

/* A shared, low-key celestial art direction: deep ink, aurora color, and slow drift. */
.starfield {
  opacity:.82;
  background:
    radial-gradient(ellipse at 12% 18%,rgba(69,123,188,.22),transparent 38%),
    radial-gradient(ellipse at 83% 31%,rgba(148,75,157,.18),transparent 42%),
    radial-gradient(ellipse at 58% 88%,rgba(44,133,145,.12),transparent 38%),
    linear-gradient(145deg,#070a16 0%,#0d1124 47%,#100d20 74%,#080d18 100%);
}
.starfield::before {
  position:absolute; inset:-18%; content:""; opacity:.62; filter:blur(46px);
  background:radial-gradient(ellipse 30% 22% at 20% 30%,rgba(60,133,203,.22),transparent 78%),radial-gradient(ellipse 28% 23% at 76% 38%,rgba(194,91,164,.18),transparent 78%),radial-gradient(ellipse 31% 19% at 52% 78%,rgba(50,171,166,.14),transparent 78%);
  animation:global-nebula-drift 38s ease-in-out infinite alternate;
}
.starfield::after {
  width:auto; height:auto; inset:0; left:0; top:0; opacity:.34; transform:none;
  background-image:radial-gradient(circle,rgba(246,232,255,.85) 0 .8px,transparent 1.5px),radial-gradient(circle,rgba(155,214,255,.72) 0 .8px,transparent 1.6px),radial-gradient(circle,rgba(255,203,229,.72) 0 .7px,transparent 1.4px);
  background-size:131px 167px,223px 241px,307px 283px; background-position:12px 28px,77px 51px,133px 91px;
  animation:global-star-drift 110s linear infinite;
}
@keyframes global-nebula-drift { from { transform:translate3d(-1.5%,1%,0) scale(.96); } to { transform:translate3d(1.5%,-1%,0) scale(1.06); } }
@keyframes global-star-drift { to { background-position:143px 195px,-146px 292px,440px -192px; } }

.hero-cosmos-sprites { position:absolute; z-index:1; inset:0; overflow:hidden; pointer-events:none; }
.hero-cosmos-sprites img { position:absolute; display:block; width:clamp(105px,14vw,195px); height:auto; object-fit:contain; opacity:.64; mix-blend-mode:screen; filter:saturate(1.08) drop-shadow(0 0 18px rgba(132,186,255,.3)); animation:hero-art-drift 13s ease-in-out infinite alternate; }
.hero-cosmos-sprites .hero-saturn { top:13%; right:3%; width:clamp(82px,10vw,145px); opacity:.55; animation-delay:-6s; }
.hero-cosmos-sprites .hero-star-ribbon { bottom:6%; left:33%; width:clamp(110px,16vw,220px); opacity:.36; animation-delay:-3s; }
.hero-cosmos-spark { position:absolute; color:#ffe3a0; font-size:clamp(20px,2.6vw,34px); text-shadow:0 0 22px currentColor; animation:cosmos-sparkle 3.6s ease-in-out infinite; }
.hero-cosmos-sprites .spark-a { top:24%; left:47%; }
.hero-cosmos-sprites .spark-b { right:8%; bottom:28%; color:#a8e7f1; font-size:24px; animation-delay:-1.7s; }
@keyframes hero-art-drift { from { translate:0 0; rotate:-3deg; } to { translate:8px -13px; rotate:3deg; } }
@keyframes cosmos-sparkle { 0%,100% { opacity:.42; scale:.82; } 50% { opacity:1; scale:1.2; } }
.hero-frame { z-index:2; }
.hero-copy { z-index:3; }

/* Keep the story's continuous nebula, with a clearer colored glow and visible art. */
.segment-art-stage { background-image:radial-gradient(ellipse at 14% 5%,rgba(79,142,220,.24),transparent 38%),radial-gradient(ellipse at 87% 18%,rgba(200,93,169,.21),transparent 40%),radial-gradient(ellipse at 18% 36%,rgba(49,181,174,.19),transparent 42%),radial-gradient(ellipse at 82% 54%,rgba(147,107,214,.23),transparent 42%),radial-gradient(ellipse at 15% 73%,rgba(221,133,121,.17),transparent 40%),radial-gradient(ellipse at 84% 92%,rgba(70,154,198,.22),transparent 42%),linear-gradient(165deg,#0b1020 0%,#11132a 23%,#101b29 48%,#19132a 72%,#0c1827 100%); }
.segment-art-stage .strip-art { opacity:.39; filter:saturate(1.25) drop-shadow(0 0 20px rgba(138,179,255,.26)); }
.segment-art-stage .art-bow,.segment-art-stage .art-saturn,.segment-art-stage .art-notes,.segment-art-stage .art-quiz,.segment-art-stage .art-stars,.segment-art-stage .art-heart,.segment-art-stage .art-babys-breath,.segment-art-stage .art-dried-bouquet { opacity:.43; }

/* Finale keeps its flowers and cake, with constellation accents on each page. */
.finale-section:not([hidden]) { background:radial-gradient(ellipse at 16% 16%,rgba(68,124,198,.2),transparent 36%),radial-gradient(ellipse at 83% 35%,rgba(174,76,155,.21),transparent 40%),radial-gradient(ellipse at 52% 94%,rgba(52,143,149,.16),transparent 42%),linear-gradient(150deg,#080a16 0%,#151127 48%,#09131b 100%); }
.finale-section .wish-section > :not(.finale-bouquets):not(.finale-cosmos-sprites) { position:relative; z-index:2; }
.finale-cosmos-sprites { position:absolute; z-index:1; inset:0; overflow:hidden; pointer-events:none; }
.finale-cosmos-sprites img { position:absolute; width:clamp(135px,20vw,270px); height:auto; object-fit:contain; opacity:.3; mix-blend-mode:screen; filter:saturate(1.22) drop-shadow(0 0 18px rgba(151,196,255,.26)); animation:finale-art-drift 17s ease-in-out infinite alternate; }
.wish-cosmos img:first-child { top:5%; left:3%; width:clamp(150px,19vw,250px); opacity:.26; }
.wish-cosmos img:last-child { top:13%; right:5%; width:clamp(95px,12vw,155px); opacity:.36; animation-delay:-8s; }
.note-cosmos img:first-child { top:9%; left:4%; width:clamp(160px,22vw,290px); opacity:.31; }
.note-cosmos img:last-child { right:4%; bottom:8%; width:clamp(125px,17vw,225px); opacity:.35; animation-delay:-7s; }
.love-cosmos img:first-child { top:13%; left:2%; width:clamp(180px,25vw,340px); opacity:.3; }
.love-cosmos img:last-child { right:3%; bottom:9%; width:clamp(145px,21vw,280px); opacity:.27; animation-delay:-9s; }
@keyframes finale-art-drift { from { translate:0 0; rotate:-3deg; } to { translate:7px -14px; rotate:3deg; } }
.finale-section .wish-section { background:radial-gradient(ellipse at 50% 36%,rgba(103,60,100,.14),transparent 45%); }
.finale-message-slide { position:relative; isolation:isolate; }
.finale-section .closing-message { z-index:2; }
.love-you-slide { background:radial-gradient(ellipse at 50% 47%,rgba(176,82,144,.22),transparent 38%),radial-gradient(ellipse at 17% 76%,rgba(255,192,99,.07),transparent 35%),radial-gradient(ellipse at 84% 24%,rgba(99,194,199,.1),transparent 33%),linear-gradient(145deg,rgba(17,16,32,.83),rgba(33,19,41,.82) 48%,rgba(11,23,33,.85)); }
.love-you-slide > :not(.finale-cosmos-sprites) { position:relative; z-index:2; }
.finale-cosmos-sprites { z-index:1; }
@media (max-width:700px) {
  .hero-cosmos-sprites img { opacity:.38; }
  .hero-cosmos-sprites .hero-saturn { top:9%; right:3%; width:86px; }
  .hero-cosmos-sprites .hero-star-ribbon { bottom:4%; left:28%; width:130px; opacity:.25; }
  .hero-cosmos-sprites .spark-a { top:28%; left:56%; font-size:21px; }
  .segment-art-stage .strip-art { opacity:.34; }
  .finale-cosmos-sprites img { opacity:.19 !important; }
  .wish-cosmos img:last-child { right:-5%; }
  .love-cosmos img:first-child { left:-10%; }
}
@media (prefers-reduced-motion:reduce) {
  .starfield::before,.starfield::after,.hero-cosmos-sprites img,.hero-cosmos-spark,.finale-cosmos-sprites img { animation:none !important; }
}

/* Let each chapter inherit the same moving aurora, while its own colors gently take the lead. */
main > .section:not(.hero) {
  isolation:isolate;
  background-image:
    radial-gradient(ellipse 52% 34% at 12% 18%,color-mix(in srgb,var(--chapter-a,#568fd0) 29%,transparent),transparent 100%),
    radial-gradient(ellipse 48% 38% at 88% 79%,color-mix(in srgb,var(--chapter-b,#a05da8) 25%,transparent),transparent 100%);
  background-size:155% 155%; background-position:0% 30%,100% 70%; background-repeat:no-repeat;
  animation:chapter-aurora-slide 34s ease-in-out infinite alternate;
}
@keyframes chapter-aurora-slide { from { background-position:0% 30%,100% 70%; } to { background-position:100% 68%,0% 35%; } }
.orbit-section { --chapter-a:#568fd0; --chapter-b:#8264c6; }
.gallery-section { --chapter-a:#c56da3; --chapter-b:#d2a45d; }
.if-section { --chapter-a:#42a889; --chapter-b:#6274c5; }
.songs-section { --chapter-a:#34a8ba; --chapter-b:#8260c4; }
.quiz-section { --chapter-a:#8061c8; --chapter-b:#369ca7; }
.constellation-section { --chapter-a:#d2ad55; --chapter-b:#5d86c7; }
.lore-section { --chapter-a:#b75e91; --chapter-b:#459e91; }
.perfect-day-section { --chapter-a:#759f5f; --chapter-b:#cf9564; }
.postcard-section { --chapter-a:#3599bd; --chapter-b:#b65b98; }
.little-loops-section { --chapter-a:#31a6b4; --chapter-b:#7767bb; }
.reasons-section { --chapter-a:#c55a91; --chapter-b:#8069c7; }
.letter-section { --chapter-a:#4c98bd; --chapter-b:#c59864; }
.future-section { --chapter-a:#497dce; --chapter-b:#45a99d; }

/* Cleaned scrapbook stickers sit in the breathing room above each chapter's content. */
main > .section:not(.hero) > .chapter-art { position:absolute; z-index:0; inset:0; overflow:hidden; pointer-events:none; }
main > .section:not(.hero) > :not(.chapter-art) { position:relative; z-index:1; }
.chapter-art img { position:absolute; top:12px; right:clamp(20px,6vw,84px); display:block; width:clamp(86px,10vw,128px); height:76px; object-fit:contain; opacity:.86; mix-blend-mode:screen; filter:saturate(1.22) contrast(1.04) drop-shadow(0 4px 16px rgba(119,188,255,.28)); transform-origin:center; animation:chapter-sticker-drift 10s ease-in-out infinite alternate; }
.chapter-saturn { width:132px !important; height:72px !important; right:7% !important; animation-delay:-4s !important; }
.chapter-camera { width:108px !important; height:76px !important; right:7% !important; animation-delay:-2s !important; }
.chapter-music { width:204px !important; height:78px !important; right:8% !important; animation-delay:-6s !important; }
.chapter-stars { width:104px !important; height:72px !important; right:9% !important; animation-delay:-1s !important; }
.chapter-constellation { width:76px !important; height:78px !important; right:10% !important; animation-delay:-5s !important; }
.chapter-heart { width:78px !important; height:74px !important; right:10% !important; animation-delay:-3s !important; }
.chapter-flowers { width:60px !important; height:78px !important; right:11% !important; animation-delay:-7s !important; }
.chapter-envelope { width:110px !important; height:74px !important; right:9% !important; animation-delay:-2.5s !important; }
.chapter-clapper { width:104px !important; height:72px !important; right:8% !important; animation-delay:-6.5s !important; }
.chapter-books { width:94px !important; height:72px !important; right:9% !important; animation-delay:-4s !important; }
.chapter-moon { width:74px !important; height:74px !important; right:9% !important; animation-delay:-8s !important; }
@keyframes chapter-sticker-drift { from { translate:0 0; rotate:-2deg; } to { translate:5px -7px; rotate:2deg; } }

/* The continuous nebula remains visible between chapters; artwork stays bright but peripheral. */
.segment-art-stage::before { opacity:1; filter:blur(20px) saturate(1.08); }
.segment-art-stage .strip-art { opacity:.47; filter:saturate(1.3) drop-shadow(0 0 22px rgba(138,179,255,.28)); }
.segment-art-stage .art-bow,.segment-art-stage .art-saturn,.segment-art-stage .art-notes,.segment-art-stage .art-quiz,.segment-art-stage .art-stars,.segment-art-stage .art-heart,.segment-art-stage .art-babys-breath,.segment-art-stage .art-dried-bouquet { opacity:.5; }
/* These older free-floating stickers crossed live copy; chapter-specific art now fills those spots. */
.segment-art-stage .art-notes,.segment-art-stage .art-quiz,.segment-art-stage .art-dried-bouquet,.segment-art-stage .art-loops,.segment-art-stage .art-shooting-star,.segment-art-stage .art-future-trail { display:none; }
@media (max-width:700px) {
  main > .section:not(.hero) > .chapter-art img { top:10px; right:18px; width:78px; height:62px; opacity:.78; }
  .chapter-saturn,.chapter-camera,.chapter-music,.chapter-stars,.chapter-constellation,.chapter-heart,.chapter-flowers,.chapter-envelope,.chapter-clapper,.chapter-books,.chapter-moon { width:78px !important; height:62px !important; right:18px !important; }
  .chapter-music { width:176px !important; height:72px !important; right:6% !important; }
  .segment-art-stage .art-orbit,.segment-art-stage .art-bow,.segment-art-stage .art-stars,.segment-art-stage .art-heart,.segment-art-stage .art-sprig,.segment-art-stage .art-babys-breath,.segment-art-stage .art-watercolor,.segment-art-stage .art-future-stars { display:none; }
  .segment-art-stage .strip-art { opacity:.4; }
}
@media (prefers-reduced-motion:reduce) {
  main > .section:not(.hero),.chapter-art img { animation:none !important; }
}

/* Reset the busy chapter-by-chapter treatment: one shared night-sky canvas. */
.starfield {
  opacity: 1;
  background:
    radial-gradient(ellipse 76% 48% at 50% 12%, rgba(54, 92, 142, .18), transparent 100%),
    linear-gradient(180deg, #0b1220 0%, #0d1422 52%, #0b111e 100%);
}
.starfield::before {
  opacity: .38;
  filter: blur(64px);
  background:
    radial-gradient(ellipse 34% 20% at 18% 28%, rgba(62, 105, 154, .2), transparent 100%),
    radial-gradient(ellipse 30% 24% at 78% 63%, rgba(93, 65, 117, .15), transparent 100%);
}
.starfield::after {
  opacity: .18;
  background-image:
    radial-gradient(circle at 14% 27%, rgba(222, 233, 255, .8) 0 1px, transparent 1.6px),
    radial-gradient(circle at 81% 68%, rgba(187, 215, 255, .7) 0 1px, transparent 1.6px),
    radial-gradient(circle at 57% 43%, rgba(255, 219, 235, .65) 0 .8px, transparent 1.5px);
  background-size: 100% 100%;
  animation: none;
}
.ambient-blooms { display: none; }
.segment-art-stage {
  background: transparent !important;
  -webkit-mask-image: none;
  mask-image: none;
}

/* A clean, compact portrait mosaic with color in the photographs, not heavy frames. */
.gallery-section { padding-top:clamp(112px,12vh,145px);padding-bottom:clamp(112px,12vh,158px);scroll-margin-top:72px; }
.gallery-section::before {
  top:5%;width:min(1380px,118vw);
  background:radial-gradient(ellipse at 15% 40%,rgba(255,191,111,.14),transparent 34%),radial-gradient(ellipse at 48% 56%,rgba(91,173,211,.17),transparent 38%),radial-gradient(ellipse at 84% 44%,rgba(221,115,177,.14),transparent 35%);
}
.photo-grid { --gallery-columns:4;--gallery-gap:clamp(10px,.95vw,15px);contain:layout; }
.gallery-section .photo-card {
  isolation:isolate;overflow:hidden;border:0;border-radius:0;
  background:#0c1221;box-shadow:0 9px 25px rgba(0,0,0,.27),0 0 18px color-mix(in srgb,var(--gallery-accent) 8%,transparent);
  transition:transform .48s cubic-bezier(.2,.75,.2,1),box-shadow .48s ease;
}
.gallery-section .photo-card::after {
  display:none;
}
.gallery-section .photo-card::before {
  display:block;inset:0;z-index:1;pointer-events:none;opacity:.24;mix-blend-mode:screen;
  background:radial-gradient(ellipse at 5% 100%,color-mix(in srgb,var(--gallery-accent) 27%,transparent),transparent 48%),linear-gradient(112deg,transparent 37%,rgba(255,255,255,.2) 49%,transparent 60%);
  background-size:100% 100%,230% 100%;background-position:center,140% 0;
  transition:opacity .35s ease;
}
.gallery-section .photo-card img {display:block;width:100%;height:auto;filter:saturate(1.055) contrast(1.025);transition:filter .45s ease,transform .65s cubic-bezier(.2,.7,.2,1);}
.gallery-section .photo-card:hover,.gallery-section .photo-card:focus-visible {z-index:5;transform:translateY(-5px) scale(1.012);box-shadow:0 18px 42px rgba(0,0,0,.38),0 0 28px color-mix(in srgb,var(--gallery-accent) 23%,transparent);}
.gallery-section .photo-card:hover::after,.gallery-section .photo-card:focus-visible::after {border-color:color-mix(in srgb,var(--gallery-accent) 55%,white);opacity:.88;}
.gallery-section .photo-card:hover::before,.gallery-section .photo-card:focus-visible::before {opacity:.72;animation:gallery-photo-gloss 1.05s cubic-bezier(.3,.05,.6,.95) both;}
.gallery-section .photo-card:hover img,.gallery-section .photo-card:focus-visible img {filter:saturate(1.12) contrast(1.04);transform:scale(1.018);}
.gallery-section .photo-card:focus-visible {outline:2px solid var(--gallery-accent);outline-offset:3px;}
.gallery-section .photo-card figcaption {
  right:0;bottom:0;left:0;gap:4px;padding:30px 14px 11px;border:0;border-radius:0;
  background:linear-gradient(180deg,transparent,rgba(4,8,17,.34) 55%,rgba(4,8,17,.62));
  opacity:.94;transform:translateY(2px);transition:opacity .3s ease,transform .35s ease;
}
.gallery-section .photo-card:hover figcaption,.gallery-section .photo-card:focus-visible figcaption {opacity:1;transform:translateY(0);}
.gallery-section .photo-card figcaption strong {display:block;min-height:0;font-size:clamp(14px,1.3vw,18px);line-height:1.18;font-weight:600;}
@media (max-width:900px) { .photo-grid {--gallery-columns:3;--gallery-gap:12px;} }
@media (max-width:640px) {
  .gallery-section {padding-top:94px;padding-bottom:112px;}
  .gallery-section::before {top:3%;width:150vw;}
  .photo-grid {--gallery-columns:2;--gallery-gap:10px;}
  .gallery-section .photo-card {border-radius:0;}
  .gallery-section .photo-card:hover,.gallery-section .photo-card:focus-visible {transform:translateY(-2px) scale(1.006);}
  .gallery-section .photo-card figcaption {padding:27px 10px 9px;opacity:.97;background:linear-gradient(180deg,transparent,rgba(4,8,17,.38) 56%,rgba(4,8,17,.66));}
  .gallery-section .photo-card figcaption strong {font-size:clamp(12px,3.4vw,15px);line-height:1.14;}
}
@media (prefers-reduced-motion:reduce) {
  .gallery-section .photo-card,.gallery-section .photo-card img,.gallery-section .photo-card figcaption,.gallery-section .photo-card::after {transition:none!important;}
  .gallery-section .photo-card.reveal.is-visible,.gallery-section .photo-card:hover::before,.gallery-section .photo-card:focus-visible::before {animation:none!important;}
}
.segment-art-stage::before {
  inset: 0;
  opacity: .44;
  filter: blur(58px);
  background:
    radial-gradient(ellipse 42% 8% at 16% 17%, rgba(60, 113, 165, .15), transparent 100%),
    radial-gradient(ellipse 38% 9% at 84% 56%, rgba(103, 72, 130, .12), transparent 100%),
    radial-gradient(ellipse 46% 8% at 24% 86%, rgba(59, 111, 132, .12), transparent 100%);
  animation: global-nebula-drift 72s ease-in-out infinite alternate;
}
.segment-art-stage::after { display: none; }
.segment-art-stage .strip-art { display: none; }
main > .section:not(.hero) {
  background: transparent !important;
  background-image: none !important;
  animation: none !important;
}
main > .section:not(.hero)::before,
main > .section:not(.hero)::after { background-color: transparent; }
.chapter-art { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .segment-art-stage::before { animation: none !important; }
}

/* Actual celestial forms carry the atmosphere; no tiled star-dot texture. */
.starfield {
  background:
    radial-gradient(ellipse 72% 48% at 48% 15%, rgba(54, 91, 132, .2), transparent 100%),
    radial-gradient(ellipse 54% 36% at 86% 76%, rgba(76, 61, 103, .1), transparent 100%),
    linear-gradient(180deg, #0b1220 0%, #111a29 50%, #0b1220 100%);
}
.starfield::before {
  opacity: .52;
  filter: blur(70px);
  background:
    radial-gradient(ellipse 36% 22% at 18% 27%, rgba(62, 102, 145, .2), transparent 100%),
    radial-gradient(ellipse 32% 24% at 78% 61%, rgba(86, 67, 116, .14), transparent 100%),
    radial-gradient(ellipse 40% 22% at 52% 94%, rgba(50, 104, 119, .1), transparent 100%);
  animation: global-nebula-drift 76s ease-in-out infinite alternate;
}
.starfield::after { background: none !important; animation: none !important; }
.segment-art-stage::before {
  opacity: .42;
  filter: blur(64px);
  background:
    radial-gradient(ellipse 46% 10% at 18% 21%, rgba(61, 103, 146, .14), transparent 100%),
    radial-gradient(ellipse 42% 9% at 82% 57%, rgba(91, 71, 119, .1), transparent 100%),
    radial-gradient(ellipse 48% 10% at 26% 88%, rgba(49, 101, 119, .1), transparent 100%);
  animation: global-nebula-drift 84s ease-in-out infinite alternate;
}
.segment-art-stage .strip-art {
  display: block;
  z-index: 1;
  opacity: .32;
  mix-blend-mode: screen;
  filter: saturate(.7) contrast(1.08) drop-shadow(0 0 22px rgba(124, 165, 205, .18));
  animation: cosmic-form-drift 26s ease-in-out infinite alternate;
}
.segment-art-stage .art-shooting-star {
  top: 0%; right: -2%; left: auto; width: clamp(270px, 37vw, 460px);
  rotate: -13deg; opacity: .39; animation-delay: -8s;
}
.segment-art-stage .art-star-cluster {
  top: 49%; right: -1%; width: clamp(200px, 25vw, 320px);
  opacity: .34; animation-delay: -17s;
}
.segment-art-stage .art-star-trail {
  top: 95%; left: -2%; width: clamp(150px, 19vw, 230px); max-height: 460px;
  opacity: .3; animation-delay: -12s;
}
.cosmos-cross {
  position: absolute; z-index: 1; display: block; color: #d8e8ff;
  line-height: 1; text-shadow: 0 0 18px rgba(176, 211, 255, .6);
  animation: cosmic-cross-pulse 5.5s ease-in-out infinite;
}
.cross-one { top: 5%; left: 17%; font-size: 25px; }
.cross-two { top: 49%; right: 23%; color: #e5d9f4; font-size: 23px; animation-delay: -2s; }
.cross-three { top: 97%; right: 12%; font-size: 19px; animation-delay: -3.5s; }
.hero-cosmos-sprites .hero-moon {
  top: 10px; right: auto; left: clamp(22px, 3vw, 45px); width: clamp(112px, 12vw, 142px); height: auto;
  opacity: .88; mix-blend-mode: screen;
  filter: brightness(1.02) drop-shadow(0 0 24px rgba(203, 220, 255, .28));
  animation: moon-drift 16s ease-in-out infinite alternate;
}
@keyframes cosmic-form-drift {
  from { translate: 0 0; rotate: -1.2deg; }
  to { translate: 9px -16px; rotate: 1.2deg; }
}
@keyframes cosmic-cross-pulse {
  0%, 100% { opacity: .36; scale: .9; }
  50% { opacity: .92; scale: 1.12; }
}
@keyframes moon-drift {
  from { translate: 0 0; rotate: -2deg; }
  to { translate: 7px -11px; rotate: 2deg; }
}
@media (max-width: 700px) {
  .hero-cosmos-sprites .hero-moon { top: 7%; right: -2%; width: 108px; }
  .segment-art-stage .art-shooting-star { top: 0%; right: -34px; width: 285px; opacity: .34; }
  .segment-art-stage .art-star-cluster { right: -30px; width: 225px; opacity: .3; }
  .segment-art-stage .art-star-trail { left: -8px; width: 148px; opacity: .26; }
  .cross-one { left: 8%; font-size: 23px; }
  .cross-two { right: 9%; font-size: 20px; }
  .cross-three { right: 7%; }
}
@media (prefers-reduced-motion: reduce) {
  .segment-art-stage .strip-art, .cosmos-cross, .hero-cosmos-sprites .hero-moon { animation: none !important; }
}

/* Moving orbital geometry stays behind every chapter as the page scrolls. */
.starfield { overflow: hidden; }
.starfield .orbit-track,
.starfield .star-belt {
  position: absolute; display: block; pointer-events: none; border-radius: 50%;
  mix-blend-mode: screen; transform-origin: center;
}
.starfield .track-a {
  left: -18vw; top: 13vh; width: 136vw; height: 72vh;
  border: 1px solid rgba(136, 179, 222, .1);
  box-shadow: 0 0 16px rgba(73, 124, 177, .045), inset 0 0 18px rgba(100, 142, 188, .025);
  transform: rotate(-17deg);
  animation: orbit-drift-a 96s ease-in-out infinite alternate;
}
.starfield .track-b {
  left: -7vw; top: 29vh; width: 116vw; height: 48vh;
  border: 1px solid rgba(190, 162, 216, .075);
  box-shadow: 0 0 15px rgba(137, 104, 170, .035);
  transform: rotate(19deg);
  animation: orbit-drift-b 112s ease-in-out infinite alternate;
}
.starfield .star-belt {
  left: -20vw; top: 17vh; width: 140vw; height: 66vh;
  background-image: radial-gradient(circle, rgba(202, 222, 246, .82) 0 .8px, transparent 1.6px);
  background-size: 17px 17px;
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 0 56%, #000 57% 60%, transparent 61%);
  mask-image: radial-gradient(ellipse at center, transparent 0 56%, #000 57% 60%, transparent 61%);
  opacity: .26; transform: rotate(-17deg);
  filter: drop-shadow(0 0 4px rgba(111, 165, 219, .34));
  animation: star-belt-revolve 150s linear infinite;
}
@keyframes orbit-drift-a {
  from { transform: rotate(-17deg) scale(1); }
  to { transform: rotate(-14deg) scale(1.035); }
}
@keyframes orbit-drift-b {
  from { transform: rotate(19deg) scale(1.02); }
  to { transform: rotate(15deg) scale(.98); }
}
@keyframes star-belt-revolve {
  from { transform: rotate(-17deg); }
  to { transform: rotate(343deg); }
}

/* Supplied artwork gets a clear, slide-specific place to float. */
.section-photo-float {
  position: relative; z-index: 1; display: flex; min-height: 128px;
  align-items: center; justify-content: center; overflow: visible;
  margin: 8px auto 18px; pointer-events: none;
}
.section-photo-float img {
  display: block; width: auto; max-width: min(92%, 520px); height: 100%; max-height: 156px;
  object-fit: contain; opacity: .96;
  filter: saturate(.82) contrast(1.02) brightness(1.08) drop-shadow(0 8px 22px rgba(116, 153, 198, .19));
  transform-origin: center; animation: supplied-photo-float 8.5s ease-in-out infinite alternate;
}
.butterfly-art { min-height: 154px; justify-content: flex-end; margin-top: 8px; }
.butterfly-art img { max-height: 150px; max-width: 205px; animation-duration: 7s; }
.music-art { min-height: 128px; margin-top: 0; }
.music-art img { width: min(100%, 620px); max-width: 100%; max-height: 128px; filter: grayscale(.72) brightness(1.55) contrast(.9) drop-shadow(0 5px 18px rgba(141, 181, 222, .16)); }
.constellation-art { min-height: 132px; }
.constellation-art img { width: 210px; max-width: min(74vw, 250px); max-height: 132px; mix-blend-mode: screen; opacity: .82; filter: drop-shadow(0 0 16px rgba(148, 187, 225, .25)); animation-delay: -3s; }
.flowers-art { min-height: 158px; justify-content: flex-end; margin-top: 2px; }
.flowers-art img { max-height: 154px; max-width: 148px; animation-duration: 9s; filter: saturate(.76) brightness(1.1) drop-shadow(0 8px 18px rgba(180, 150, 118, .18)); }
.postcard-flowers { min-height: 148px; justify-content: flex-start; margin: 14px 0 2px; }
.postcard-flowers img { max-height: 146px; max-width: 168px; animation-duration: 10s; filter: saturate(.78) brightness(1.08) drop-shadow(0 8px 18px rgba(179, 130, 144, .2)); }
.letter-art { min-height: 134px; justify-content: flex-start; margin-top: 8px; }
.letter-art img { max-height: 132px; max-width: min(80vw, 252px); animation-duration: 9s; filter: saturate(.78) brightness(1.08) drop-shadow(0 8px 20px rgba(175, 154, 125, .2)); }
@keyframes supplied-photo-float {
  from { translate: 0 2px; rotate: -1.3deg; }
  to { translate: 0 -9px; rotate: 1.3deg; }
}
@media (max-width: 700px) {
  .starfield .track-a { left: -35vw; top: 18vh; width: 170vw; height: 63vh; }
  .starfield .track-b { left: -22vw; top: 35vh; width: 148vw; height: 43vh; }
  .starfield .star-belt { left: -35vw; top: 22vh; width: 170vw; height: 60vh; background-size: 19px 19px; opacity: .22; }
  .hero-cosmos-sprites .hero-moon { top: 64px; right: auto; left: 14px; width: 88px; }
  .music-art { min-height: 106px; }
  .music-art img { max-height: 104px; }
  .constellation-art { min-height: 116px; }
  .flowers-art { min-height: 146px; }
  .butterfly-art { min-height: 146px; }
  .butterfly-art img { max-height: 142px; max-width: min(58vw, 198px); }
  .postcard-flowers { min-height: 144px; }
  .letter-art { min-height: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .starfield .orbit-track, .starfield .star-belt, .section-photo-float img { animation: none !important; }
}
.hero-cosmos-sprites .hero-moon { top: 56px; left: -18px; right: auto; width: 104px; }
.hero-cosmos-sprites .hero-star-ribbon { left: 49%; bottom: 8%; width: clamp(86px, 10vw, 136px); max-height: 48vh; object-fit: contain; }
@media (max-width: 700px) {
  .hero-cosmos-sprites .hero-moon { top: 64px; left: 14px; right: auto; width: 88px; }
  .hero-cosmos-sprites .hero-star-ribbon { left: 28%; bottom: 4%; width: 130px; max-height: none; }
}

/* Birthday welcome: composed side illustrations keep the center clear. */
.birthday-gate {
  background:
    radial-gradient(ellipse at 16% 74%, rgba(152, 92, 130, .18), transparent 36%),
    radial-gradient(ellipse at 83% 24%, rgba(74, 126, 167, .19), transparent 34%),
    radial-gradient(ellipse at 50% 42%, rgba(39, 52, 101, .7), transparent 53%),
    radial-gradient(ellipse at 82% 76%, rgba(99, 47, 103, .28), transparent 40%),
    linear-gradient(145deg, #050811, #0b1020 54%, #070a13);
}
.birthday-gate-panel { z-index: 2; background: radial-gradient(ellipse at 50% 38%, rgba(53, 62, 111, .5), transparent 55%), linear-gradient(135deg, rgba(18, 24, 48, .94), rgba(12, 14, 31, .97)); }
.birthday-gate-panel > :not(.gate-firework) { position: relative; z-index: 1; }
.birthday-gate-decor { position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; }
.birthday-gate-decor img { position: absolute; display: block; height: auto; object-fit: contain; }
.birthday-gate-decor .gate-flower-branch-left,
.birthday-gate-decor .gate-flower-branch-right { top: 27%; z-index: 1; width: clamp(174px, 17vw, 232px); opacity: .78; filter: saturate(.92) brightness(1.1) drop-shadow(0 9px 22px rgba(228, 184, 199, .2)); animation: gate-branch-breathe 10s ease-in-out infinite alternate; }
.birthday-gate-decor .gate-flower-branch-left { left: calc(50% - 680px); transform: rotate(-10deg); }
.birthday-gate-decor .gate-flower-branch-right { right: calc(50% - 680px); transform: scaleX(-1) rotate(-10deg); animation-delay: -4s; }
.birthday-gate-decor .gate-flower { width: clamp(150px, 16vw, 218px); opacity: .77; mix-blend-mode: screen; filter: saturate(.8) brightness(1.08) drop-shadow(0 10px 24px rgba(203, 151, 175, .18)); }
.birthday-gate-decor .gate-flower-cloud-left { top: 3%; left: calc(50% - 660px); width: clamp(172px, 16vw, 220px); opacity: .73; transform: rotate(-12deg); filter: saturate(.82) brightness(1.1) drop-shadow(0 8px 21px rgba(219, 178, 190, .2)); animation: gate-branch-breathe 11s -3s ease-in-out infinite alternate; }
.birthday-gate-decor .gate-flower-cloud-right { top: 31%; right: calc(50% - 660px); width: clamp(172px, 16vw, 220px); opacity: .78; transform: rotate(8deg); filter: saturate(.88) brightness(1.08) drop-shadow(0 9px 21px rgba(204, 158, 128, .22)); animation: gate-branch-breathe 12s -6s ease-in-out infinite alternate-reverse; }
.birthday-gate-decor .gate-flower-left { left: calc(50% - 690px); bottom: 3%; transform: rotate(-14deg); animation: gate-flower-sway 9s ease-in-out infinite alternate; }
.birthday-gate-decor .gate-flower-right { right: calc(50% - 690px); top: 55%; width: clamp(108px, 11vw, 148px); transform: rotate(13deg); filter: saturate(.84) brightness(1.08) drop-shadow(0 10px 24px rgba(213, 182, 127, .2)); animation: gate-flower-sway 10s -3s ease-in-out infinite alternate-reverse; }
.gate-floral-network { position: absolute; z-index: 0; top: 5%; width: clamp(190px, 17vw, 232px); height: 92%; overflow: visible; opacity: .72; animation: gate-network-glow 7s ease-in-out infinite; }
.gate-floral-network.network-left { left: 0; }
.gate-floral-network.network-right { right: 0; transform: scaleX(-1); animation-delay: -3.5s; }
.gate-floral-network .vine, .gate-floral-network .twig { fill: none; stroke: rgba(184, 178, 155, .68); stroke-linecap: round; stroke-linejoin: round; }
.gate-floral-network .vine { stroke-width: 1.35; }
.gate-floral-network .twig { stroke: rgba(210, 177, 164, .64); stroke-width: 1; }
.gate-floral-network .leaves ellipse { fill: rgba(130, 157, 139, .7); stroke: rgba(202, 195, 160, .66); stroke-width: .7; }
.gate-floral-network .blossoms circle { fill: #edc4d5; stroke: rgba(255, 230, 232, .66); stroke-width: .8; }
.gate-floral-network .blossoms circle:nth-child(3n) { fill: #f1d9ae; }
.gate-floral-network .blossoms .heart { fill: #edcf85; stroke: none; }
.gate-decor-spark { position: absolute; color: #f7d98c; font-size: 26px; text-shadow: 0 0 18px currentColor; animation: gate-star-float 5.5s ease-in-out infinite; }
.gate-decor-spark.spark-left { top: 45%; left: calc(50% - 580px); color: #b8dfff; animation-delay: -2s; }
.gate-decor-spark.spark-right { right: calc(50% - 674px); bottom: 19%; color: #f1a8ce; animation-delay: -3.5s; }
.gate-firework { position: absolute; z-index: 0; width: 104px; aspect-ratio: 1; border-radius: 50%; opacity: 0; animation: gate-firework-burst 4.8s cubic-bezier(.18,.66,.28,1) infinite; }
.gate-firework::before { position: absolute; inset: 0; border-radius: inherit; background: repeating-conic-gradient(from 0deg, transparent 0deg 11deg, rgba(255, 226, 159, .96) 11.5deg 13deg, transparent 13.5deg 30deg); content: ""; -webkit-mask: radial-gradient(circle, transparent 0 13%, #000 17% 50%, transparent 74%); mask: radial-gradient(circle, transparent 0 13%, #000 17% 50%, transparent 74%); filter: drop-shadow(0 0 5px rgba(255, 220, 148, .85)); }
.gate-firework::after { position: absolute; top: calc(50% - 4px); left: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: #fff3cb; box-shadow: 0 0 14px 5px rgba(255, 219, 148, .65); content: ""; }
.birthday-gate-panel .gate-firework.firework-left { top: 7%; left: 4.5%; }
.birthday-gate-panel .gate-firework.firework-right { top: 7%; right: 4.5%; animation-delay: -2.3s; }
.gate-firework.firework-right::before { background: repeating-conic-gradient(from 7deg, transparent 0deg 11deg, rgba(174, 216, 255, .96) 11.5deg 13deg, transparent 13.5deg 30deg); filter: drop-shadow(0 0 5px rgba(151, 205, 255, .8)); }
.gate-firework.firework-right::after { background: #e5f3ff; box-shadow: 0 0 14px 5px rgba(151, 205, 255, .6); }
@keyframes gate-flower-sway { from { translate: 0 3px; } to { translate: 0 -8px; } }
@keyframes gate-branch-breathe { from { translate: 0 2px; } to { translate: 0 -7px; } }
@keyframes gate-network-glow { 0%, 100% { opacity: .62; } 50% { opacity: .82; } }
@keyframes gate-firework-burst { 0%, 5% { opacity: 0; transform: scale(.15) rotate(-12deg); } 11% { opacity: .98; transform: scale(.45) rotate(5deg); } 22% { opacity: .86; transform: scale(1) rotate(0); } 39%, 100% { opacity: 0; transform: scale(1.18) rotate(16deg); } }
@media (max-width: 1100px) {
  .birthday-gate-panel { width: min(780px, 74vw); }
  .birthday-gate-decor { opacity: .55; }
  .birthday-gate-decor .gate-flower-left { left: -34px; width: 150px; }
  .birthday-gate-decor .gate-flower-right { right: -25px; width: 110px; }
  .birthday-gate-decor .gate-flower-branch-left { left: -28px; width: 174px; }
  .birthday-gate-decor .gate-flower-branch-right { right: -28px; width: 174px; }
  .birthday-gate-decor .gate-flower-cloud-left { left: -30px; width: 172px; }
  .birthday-gate-decor .gate-flower-cloud-right { right: -30px; width: 172px; }
  .gate-floral-network { width: 172px; }
  .gate-firework { width: 78px; }
  .gate-decor-spark { display: none; }
}
@media (max-width: 700px) {
  .birthday-gate-decor { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .birthday-gate-decor img, .gate-floral-network, .gate-decor-spark, .gate-firework { animation: none !important; }
}

/* Welcome-screen floral frame: even-sized art, denser foliage, and a longer firework show. */
.birthday-gate::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: .82;
  background:
    radial-gradient(ellipse at 3% 22%, rgba(242, 164, 206, .24), transparent 25%),
    radial-gradient(ellipse at 7% 66%, rgba(218, 173, 139, .19), transparent 28%),
    radial-gradient(ellipse at 97% 20%, rgba(225, 164, 198, .2), transparent 26%),
    radial-gradient(ellipse at 94% 72%, rgba(172, 202, 154, .2), transparent 30%);
}
.birthday-gate {
  background:
    radial-gradient(ellipse at 4% 19%, rgba(202, 111, 158, .34), transparent 25%),
    radial-gradient(ellipse at 3% 76%, rgba(159, 128, 99, .26), transparent 29%),
    radial-gradient(ellipse at 97% 23%, rgba(151, 113, 159, .26), transparent 28%),
    radial-gradient(ellipse at 96% 78%, rgba(133, 163, 126, .28), transparent 30%),
    radial-gradient(ellipse at 50% 42%, rgba(47, 58, 108, .76), transparent 53%),
    linear-gradient(145deg, #080b16, #10172b 53%, #100d1a);
}
.birthday-gate-panel {
  background:
    radial-gradient(ellipse at 50% 38%, rgba(57, 64, 113, .58), transparent 58%),
    radial-gradient(ellipse at 3% 30%, rgba(170, 91, 140, .1), transparent 34%),
    linear-gradient(135deg, rgba(18, 24, 48, .95), rgba(13, 15, 31, .97));
}
.birthday-gate-panel > :not(.gate-firework) { position: relative; z-index: 1; }
.birthday-gate-decor img.gate-flower {
  width: clamp(194px, 16vw, 230px) !important;
  height: clamp(250px, 36vh, 300px) !important;
  object-fit: contain;
  object-position: center;
  opacity: .96;
  filter: saturate(1.13) brightness(1.2) contrast(1.07) drop-shadow(0 10px 24px rgba(218, 170, 192, .27));
}
.birthday-gate-decor .gate-flower-cloud-left { scale: 1.34; }
.birthday-gate-decor .gate-flower-cloud-right { scale: 1.08; }
.birthday-gate-decor .gate-flower-branch-left,
.birthday-gate-decor .gate-flower-branch-right { scale: 1.12; opacity: .99; }
.birthday-gate-decor .gate-flower-left { scale: 1.03; }
.birthday-gate-decor .gate-flower-right { scale: 1.38; }
.gate-floral-network { width: clamp(240px, 22vw, 310px); opacity: 1; filter: drop-shadow(0 0 9px rgba(230, 177, 196, .2)); }
.gate-floral-network .vine { stroke: rgba(197, 187, 153, .88); stroke-width: 1.8; }
.gate-floral-network .twig { stroke: rgba(225, 182, 174, .84); stroke-width: 1.35; }
.gate-floral-network .leaves ellipse { fill: rgba(137, 174, 142, .86); stroke: rgba(225, 210, 174, .9); stroke-width: .9; }
.gate-floral-network .blossoms circle { fill: #f2c3d8; stroke: rgba(255, 239, 237, .88); stroke-width: 1; }
.gate-floral-network .blossoms circle:nth-child(3n) { fill: #ffe0a5; }
.gate-floral-network .blossoms .heart { fill: #f3d273; }
.gate-firework {
  z-index: 0;
  width: 148px;
  animation: gate-firework-grand 8.6s cubic-bezier(.16, .68, .26, 1) infinite;
}
.birthday-gate-panel .gate-firework.firework-a { top: 6%; left: 3%; }
.birthday-gate-panel .gate-firework.firework-b { top: 6%; right: 3%; animation-delay: -1.45s; }
.birthday-gate-panel .gate-firework.firework-c { top: 36%; left: 4%; width: 122px; animation-delay: -2.9s; }
.birthday-gate-panel .gate-firework.firework-d { top: 36%; right: 4%; width: 122px; animation-delay: -4.35s; }
.birthday-gate-panel .gate-firework.firework-e { bottom: 8%; left: 8%; width: 106px; animation-delay: -5.8s; }
.birthday-gate-panel .gate-firework.firework-f { right: 8%; bottom: 8%; width: 106px; animation-delay: -7.25s; }
.gate-firework::before {
  background: repeating-conic-gradient(from 0deg, transparent 0deg 10deg, rgba(255, 226, 159, .98) 10.6deg 12.4deg, transparent 13deg 28deg);
  -webkit-mask: radial-gradient(circle, transparent 0 9%, #000 13% 54%, transparent 74%);
  mask: radial-gradient(circle, transparent 0 9%, #000 13% 54%, transparent 74%);
  filter: drop-shadow(0 0 8px rgba(255, 220, 148, .95));
  animation: gate-firework-ray-spin 8.6s ease-in-out infinite;
}
.gate-firework::after {
  inset: 0;
  width: auto;
  height: auto;
  background:
    radial-gradient(circle at 50% 50%, #fff8dc 0 3px, transparent 4px),
    radial-gradient(circle at 50% 4%, rgba(255, 236, 177, .98) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 18%, rgba(255, 222, 164, .95) 0 2px, transparent 3px),
    radial-gradient(circle at 96% 50%, rgba(255, 236, 177, .98) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 82%, rgba(255, 222, 164, .95) 0 2px, transparent 3px),
    radial-gradient(circle at 50% 96%, rgba(255, 236, 177, .98) 0 2px, transparent 3px),
    radial-gradient(circle at 18% 82%, rgba(255, 222, 164, .95) 0 2px, transparent 3px),
    radial-gradient(circle at 4% 50%, rgba(255, 236, 177, .98) 0 2px, transparent 3px),
    radial-gradient(circle at 18% 18%, rgba(255, 222, 164, .95) 0 2px, transparent 3px);
  box-shadow: none;
  animation: gate-firework-core 8.6s ease-in-out infinite;
}
.gate-firework.firework-b::before, .gate-firework.firework-e::before { background: repeating-conic-gradient(from 8deg, transparent 0deg 10deg, rgba(176, 219, 255, .98) 10.6deg 12.4deg, transparent 13deg 28deg); filter: drop-shadow(0 0 8px rgba(151, 205, 255, .94)); }
.gate-firework.firework-b::after, .gate-firework.firework-e::after { filter: hue-rotate(185deg) saturate(1.22); }
.gate-firework.firework-c::before, .gate-firework.firework-f::before { background: repeating-conic-gradient(from 3deg, transparent 0deg 10deg, rgba(255, 177, 219, .98) 10.6deg 12.4deg, transparent 13deg 28deg); filter: drop-shadow(0 0 8px rgba(246, 142, 198, .92)); }
.gate-firework.firework-c::after, .gate-firework.firework-f::after { filter: hue-rotate(300deg) saturate(1.18); }
.gate-firework.firework-d::before { background: repeating-conic-gradient(from 12deg, transparent 0deg 10deg, rgba(204, 238, 181, .98) 10.6deg 12.4deg, transparent 13deg 28deg); filter: drop-shadow(0 0 8px rgba(181, 227, 160, .9)); }
@keyframes gate-firework-grand {
  0%, 4%, 100% { opacity: 0; transform: scale(.08) rotate(-14deg); }
  8% { opacity: 1; transform: scale(.42) rotate(0); }
  16% { opacity: .98; transform: scale(1.06) rotate(13deg); }
  23% { opacity: .8; transform: scale(1.16) rotate(22deg); }
  31%, 49% { opacity: 0; transform: scale(1.32) rotate(32deg); }
  54% { opacity: .74; transform: scale(.36) rotate(38deg); }
  62% { opacity: .82; transform: scale(.7) rotate(52deg); }
  71%, 78% { opacity: 0; transform: scale(.94) rotate(66deg); }
}
@keyframes gate-firework-ray-spin { 0%, 100% { transform: rotate(-12deg) scale(.88); } 18% { transform: rotate(18deg) scale(1.08); } 34%, 52% { transform: rotate(40deg) scale(1.14); } 74% { transform: rotate(70deg) scale(.92); } }
@keyframes gate-firework-core { 0%, 100% { opacity: .25; filter: brightness(1); } 12%, 58% { opacity: 1; filter: brightness(1.75); } 30%, 72% { opacity: .5; filter: brightness(1.15); } }
@media (max-width: 1100px) {
  .birthday-gate-decor img.gate-flower { width: 174px !important; height: 228px !important; }
  .gate-floral-network { width: 180px; }
  .gate-firework { width: 112px; }
  .birthday-gate-panel .gate-firework.firework-c,
  .birthday-gate-panel .gate-firework.firework-d { width: 96px; }
  .birthday-gate-panel .gate-firework.firework-e,
  .birthday-gate-panel .gate-firework.firework-f { width: 82px; }
}
@media (max-width: 700px) {
  .birthday-gate::after { opacity: .5; }
  .gate-firework { width: 96px; }
  .birthday-gate-panel .gate-firework.firework-c,
  .birthday-gate-panel .gate-firework.firework-d { width: 78px; }
  .birthday-gate-panel .gate-firework.firework-e,
  .birthday-gate-panel .gate-firework.firework-f { width: 68px; }
}
@media (prefers-reduced-motion: reduce) {
  .gate-firework::before, .gate-firework::after { animation: none !important; }
}
.birthday-gate-panel {
  width: min(870px, 88vw);
  border: 1px solid transparent;
  border-radius: 24px;
  background:
    radial-gradient(ellipse at 5% 22%, rgba(212, 123, 169, .13), transparent 25%) padding-box,
    radial-gradient(ellipse at 95% 76%, rgba(159, 186, 135, .11), transparent 28%) padding-box,
    radial-gradient(ellipse at 50% 38%, rgba(57, 64, 113, .58), transparent 58%) padding-box,
    linear-gradient(135deg, rgba(18, 24, 48, .95), rgba(13, 15, 31, .97)) padding-box,
    linear-gradient(135deg, #d87cb9, #829fe0 46%, #8dd7d8 72%, #e9c176) border-box;
  box-shadow: 0 32px 110px rgba(0, 0, 0, .48), 0 0 42px rgba(184, 112, 190, .2), inset 0 0 100px rgba(127, 111, 188, .1);
}
.birthday-gate-panel::before { inset: 16px; border-radius: 15px; border-color: rgba(242, 197, 224, .27); }
.birthday-gate-panel h1 em {
  color: transparent;
  background: linear-gradient(95deg, #f4c078 2%, #f08db9 42%, #d499ee 76%, #9ddde9 110%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 24px rgba(239, 121, 181, .16);
}
.birthday-gate-name { color: #b6d9f1; text-shadow: 0 0 24px rgba(112, 197, 226, .24); }
.birthday-enter {
  overflow: hidden;
  border-color: rgba(255, 221, 238, .85);
  background: linear-gradient(105deg, #c64291, #8a56d4 58%, #6253c4);
  color: #fff8ff;
  box-shadow: 0 9px 28px rgba(141, 54, 155, .34), inset 0 1px rgba(255, 255, 255, .35), 0 0 28px rgba(228, 99, 182, .22);
  animation: gate-button-luster 4.2s ease-in-out infinite;
}
.birthday-enter::after {
  position: absolute;
  inset: -20% auto -20% -46%;
  width: 34%;
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent);
  transform: skewX(-20deg);
  animation: gate-button-sheen 5.5s ease-in-out infinite;
}
.birthday-enter span { position: relative; z-index: 1; }
.birthday-gate-kicker { color: #efa9d1; }
.birthday-gate-kicker i { background: linear-gradient(90deg, transparent, #ef9dc8 50%, #84cbd8); }
.birthday-gate-panel .gate-firework { width: 148px; }
.birthday-gate-panel .gate-firework.firework-c,
.birthday-gate-panel .gate-firework.firework-d { width: 122px; }
.birthday-gate-panel .gate-firework.firework-e,
.birthday-gate-panel .gate-firework.firework-f { width: 106px; }
.gate-floral-network .garden-bloom { filter: drop-shadow(0 0 8px rgba(255, 221, 183, .52)); animation: garden-bloom-glow 5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.gate-floral-network .garden-bloom:nth-child(2n) { animation-delay: -2.5s; }
.gate-floral-network .garden-bloom .petal { stroke: rgba(255, 246, 234, .82); stroke-width: 1.4; }
.gate-floral-network .garden-bloom .center { fill: #ffdc70; stroke: #fff0ae; stroke-width: 1.4; }
.gate-floral-network .petal-rose .petal { fill: #ef79b6; }
.gate-floral-network .petal-blue .petal { fill: #6dcde1; }
.gate-floral-network .petal-gold .petal { fill: #f0bd58; }
.gate-floral-network .petal-lilac .petal { fill: #b798ed; }
.gate-floral-network .petal-coral .petal { fill: #f18b91; }
.gate-floral-network .petal-cream .petal { fill: #f2dfb5; }
@keyframes garden-bloom-glow { from { opacity: .86; scale: .96; } to { opacity: 1; scale: 1.045; } }
@keyframes gate-button-luster { 0%, 100% { box-shadow: 0 9px 28px rgba(141, 54, 155, .3), inset 0 1px rgba(255, 255, 255, .35), 0 0 20px rgba(228, 99, 182, .16); } 50% { box-shadow: 0 12px 34px rgba(141, 54, 155, .44), inset 0 1px rgba(255, 255, 255, .44), 0 0 38px rgba(228, 99, 182, .3); } }
@keyframes gate-button-sheen { 0%, 58%, 100% { left: -46%; opacity: 0; } 64% { opacity: 1; } 83% { left: 118%; opacity: .75; } }
@media (max-width: 1100px) {
  .birthday-gate-panel { width: min(780px, 74vw); }
  .birthday-gate-decor img.gate-flower { width: 174px !important; height: 228px !important; }
}
@media (max-width: 700px) {
  .birthday-gate-panel { width: 100%; border-radius: 18px; }
  .birthday-gate-panel::before { inset: 10px; border-radius: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .gate-floral-network .garden-bloom, .birthday-enter { animation: none !important; }
  .birthday-enter::after { display: none; }
}
.birthday-gate-panel {
  background:
    radial-gradient(ellipse at 5% 22%, rgba(212, 123, 169, .12), transparent 25%),
    radial-gradient(ellipse at 95% 76%, rgba(159, 186, 135, .1), transparent 28%),
    radial-gradient(ellipse at 50% 38%, rgba(57, 64, 113, .58), transparent 58%),
    linear-gradient(135deg, rgba(18, 24, 48, .95), rgba(13, 15, 31, .97));
}
.birthday-gate-decor img.gate-flower { scale: 1 !important; }
.gate-floral-network .extra-blossoms circle { fill: #f4c7dc; stroke: rgba(255, 240, 237, .92); stroke-width: 1; }
.gate-floral-network .extra-blossoms circle:nth-child(3n) { fill: #ffe2aa; }
.gate-floral-network .extra-blossoms .heart { fill: #f5d777; stroke: none; }
.gate-floral-network .extra-blossoms { filter: drop-shadow(0 0 5px rgba(250, 191, 218, .5)); }
@media (max-width: 1100px) {
  .birthday-gate-decor { opacity: 1; }
}

/* Welcome flowers: mirrored moonlit garlands frame the panel without crowding its copy. */
.birthday-gate-decor { position:absolute; z-index:1; inset:0; display:block; overflow:hidden; pointer-events:none; }
.birthday-gate-decor svg, .birthday-gate-decor .gate-decor-spark { display:none !important; }
.birthday-gate-decor .gate-garland { position:absolute; top:50%; display:block; width:auto; height:min(112vh, 1040px); max-width:34vw; object-fit:contain; opacity:.94; mix-blend-mode:screen; filter:brightness(1.06) saturate(.82) drop-shadow(0 8px 28px rgba(164, 187, 218, .16)); animation:welcome-garland-glow 8s ease-in-out infinite alternate; }
.birthday-gate-decor .gate-garland-left { left:-14px; transform:translateY(-50%); }
.birthday-gate-decor .gate-garland-right { right:-14px; transform:translateY(-50%) scaleX(-1); animation-delay:-4s; }
@keyframes welcome-garland-glow { from { opacity:.82; filter:brightness(1) saturate(.76) drop-shadow(0 7px 22px rgba(148, 170, 210, .1)); } to { opacity:.98; filter:brightness(1.12) saturate(.9) drop-shadow(0 10px 34px rgba(184, 157, 211, .19)); } }
.birthday-gate-panel { z-index:2; background:radial-gradient(ellipse at 50% 38%, rgba(48, 60, 108, .48), transparent 56%), linear-gradient(135deg, rgba(15, 22, 44, .95), rgba(10, 13, 28, .98)); }
.birthday-gate-panel > :not(.gate-firework) { position:relative; z-index:1; }
@media (max-width:1100px) {
  .birthday-gate-decor .gate-garland { height:100vh; max-width:42vw; opacity:.86; }
}
@media (max-width:700px) {
  .birthday-gate-decor .gate-garland { height:76vh; max-width:52vw; opacity:.72; }
  .birthday-gate-decor .gate-garland-left { left:-48px; }
  .birthday-gate-decor .gate-garland-right { right:-48px; }
}
@media (prefers-reduced-motion:reduce) {
  .birthday-gate-decor .gate-garland { animation:none !important; }
}
/* Restore the birthday box to the supplied reference design. */
.birthday-gate-panel {
  width:min(920px, 88vw);
  min-height:min(690px, 88dvh);
  padding:clamp(30px, 5vw, 64px) 25px;
  border:1px solid rgba(230, 183, 222, .42);
  border-radius:0;
  background:radial-gradient(ellipse at 50% 38%, rgba(45, 57, 105, .48), transparent 55%), linear-gradient(135deg, rgba(15, 22, 44, .91), rgba(10, 13, 28, .96));
  box-shadow:0 32px 110px rgba(0, 0, 0, .48), inset 0 0 100px rgba(127, 111, 188, .09);
}
.birthday-gate-panel::before {
  inset:17px;
  border:1px solid rgba(242, 164, 206, .21);
  border-radius:0;
}
.birthday-gate-panel h1 em {
  color:#f2a4ce;
  background:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  -webkit-text-fill-color:currentColor;
  text-shadow:none;
}
.birthday-gate-name { color:#a9dcff; text-shadow:none; }
.birthday-gate-panel .birthday-enter {
  border:1px solid rgba(242, 164, 206, .68);
  border-radius:999px;
  background:rgba(12, 16, 31, .72);
  color:#f8d5e9;
  box-shadow:none;
}
.birthday-gate-panel .birthday-enter:hover {
  background:rgba(232, 91, 174, .16);
  box-shadow:0 0 35px rgba(232, 91, 174, .2);
}
.birthday-gate-kicker { color:#f2a4ce; }
.birthday-gate-kicker i { background:linear-gradient(90deg, transparent, #f064b6); }
@media (max-width:1100px) {
  .birthday-gate-panel { width:min(920px, 88vw); }
}
@media (max-width:700px) {
  .birthday-gate-panel { width:100%; border-radius:0; }
  .birthday-gate-panel::before { inset:10px; border-radius:0; }
}
/* Keep the welcome card inset from the top and bottom edges like the reference. */
.birthday-gate { padding:28px; }
.birthday-gate-panel {
  height:min(724px, calc(100dvh - 56px));
  min-height:0;
}
@media (max-width:700px) {
  .birthday-gate-panel {
    width:100%;
    height:calc(100dvh - 36px);
    min-height:0;
    padding-top:23px;
    padding-bottom:23px;
  }
}
/* Opener finish: warm the flower palette and blend the card into the surrounding cosmos. */
.birthday-gate {
  background:
    radial-gradient(ellipse at 8% 50%, rgba(174, 75, 129, .23), transparent 35%),
    radial-gradient(ellipse at 92% 48%, rgba(82, 109, 171, .24), transparent 36%),
    radial-gradient(ellipse at 50% 42%, rgba(54, 64, 118, .66), transparent 55%),
    linear-gradient(145deg, #080a16, #12152c 52%, #0a0e1b);
}
.birthday-gate-decor .gate-garland {
  height:min(112vh, 1040px);
  max-width:none;
  opacity:.99;
  mix-blend-mode:normal;
  filter:saturate(1.14) brightness(1.06) drop-shadow(0 8px 24px rgba(222, 124, 186, .16));
  animation:welcome-garland-glow 8.8s ease-in-out infinite alternate;
}
.birthday-gate-decor .gate-garland-left { transform:translateY(-50%) scaleX(1.42); transform-origin:left center; }
.birthday-gate-decor .gate-garland-right { transform:translateY(-50%) scaleX(-1.42); transform-origin:right center; animation-delay:-4.4s; }
@keyframes welcome-garland-glow {
  from { opacity:.88; filter:saturate(1.08) brightness(1.01) drop-shadow(0 7px 20px rgba(202, 119, 179, .12)); }
  to { opacity:1; filter:saturate(1.16) brightness(1.08) drop-shadow(0 10px 30px rgba(224, 145, 194, .22)); }
}
.birthday-gate-stars i { z-index:1; font-size:clamp(13px, 2vw, 25px); opacity:.82; }
.birthday-gate-stars i:nth-child(7) { top:39%; left:5%; color:#f1b3da; animation-delay:-1.1s; }
.birthday-gate-stars i:nth-child(8) { top:56%; right:6%; color:#a9dcff; animation-delay:-2.2s; }
.birthday-gate-stars i:nth-child(9) { top:72%; left:10%; color:#ffdc78; animation-delay:-3.3s; }
.birthday-gate-stars i:nth-child(10) { top:83%; right:18%; color:#d6a4ed; animation-delay:-.6s; }
.birthday-gate-stars i:nth-child(11) { top:31%; right:5%; color:#f2a4ce; animation-delay:-1.8s; }
.birthday-gate-stars i:nth-child(12) { top:66%; left:24%; color:#a9dcff; animation-delay:-4s; }
.birthday-gate-stars i:nth-child(13) { top:9%; right:27%; color:#ffdc78; animation-delay:-2.7s; }
.birthday-gate-stars i:nth-child(14) { bottom:8%; left:38%; color:#f2a4ce; animation-delay:-3.7s; }
.birthday-gate-stars i:nth-child(15) { top:46%; right:24%; color:#c8b0ff; animation-delay:-.9s; }
.birthday-gate-stars i:nth-child(16) { top:18%; left:30%; color:#a9dcff; animation-delay:-2.9s; }
.birthday-gate-stars i:nth-child(17) { top:88%; left:70%; color:#ffdc78; animation-delay:-1.5s; }
.birthday-gate-stars i:nth-child(18) { top:12%; left:7%; color:#f2a4ce; animation-delay:-4.5s; }
.birthday-gate-stars i:nth-child(19) { top:60%; right:39%; color:#b6d9f1; animation-delay:-3.1s; }
.birthday-gate-stars i:nth-child(20) { top:35%; left:17%; color:#ffd58e; animation-delay:-1.4s; }
.birthday-gate-panel {
  border:1px solid transparent;
  background:
    radial-gradient(ellipse at 2% 48%, rgba(159, 82, 140, .13), transparent 32%) padding-box,
    radial-gradient(ellipse at 98% 22%, rgba(84, 126, 182, .13), transparent 34%) padding-box,
    radial-gradient(ellipse at 50% 38%, rgba(45, 57, 105, .57), transparent 57%) padding-box,
    linear-gradient(135deg, rgba(17, 20, 42, .96), rgba(11, 14, 31, .97)) padding-box,
    linear-gradient(135deg, rgba(228, 164, 211, .72), rgba(151, 174, 228, .52) 52%, rgba(226, 167, 199, .72)) border-box;
  box-shadow:0 32px 110px rgba(0,0,0,.46), 0 0 74px rgba(121,94,168,.18), inset 0 0 82px rgba(153,119,187,.08);
}
.birthday-gate-panel::before { border-color:rgba(235, 192, 226, .27); }
.birthday-gate-panel h1 em {
  color:transparent;
  background:linear-gradient(105deg,#efa4c6 4%,#ed9dcc 48%,#c0a4e8 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 0 25px rgba(229, 142, 199, .13);
}
.birthday-gate-panel .birthday-enter {
  border-color:rgba(233, 168, 211, .74);
  background:linear-gradient(110deg,rgba(84, 42, 87, .32),rgba(27, 30, 60, .82) 60%,rgba(29, 39, 71, .76));
  box-shadow:0 0 24px rgba(155, 94, 168, .15), inset 0 1px rgba(255,255,255,.1);
}
.birthday-gate-panel > .gate-panel-star {
  position:absolute !important;
  z-index:0 !important;
  display:block;
  color:#ead3ff;
  font-size:clamp(12px,1.35vw,18px);
  line-height:1;
  opacity:.54;
  text-shadow:0 0 13px currentColor;
  animation:gate-panel-twinkle 3.6s ease-in-out infinite;
  pointer-events:none;
}
.gate-panel-star.star-one { top:9%; left:8%; color:#f3bfdc; }
.gate-panel-star.star-two { top:16%; right:11%; color:#a9dcff; animation-delay:-1.1s; }
.gate-panel-star.star-three { top:33%; left:6%; color:#ffdc78; animation-delay:-2.3s; }
.gate-panel-star.star-four { top:43%; right:7%; color:#d5b6fa; animation-delay:-.7s; }
.gate-panel-star.star-five { bottom:30%; left:9%; color:#a9dcff; animation-delay:-1.8s; }
.gate-panel-star.star-six { bottom:18%; right:9%; color:#f2a4ce; animation-delay:-2.7s; }
.gate-panel-star.star-seven { bottom:8%; left:19%; color:#ffdc78; animation-delay:-.4s; }
.gate-panel-star.star-eight { top:8%; right:24%; color:#a9dcff; animation-delay:-2s; }
@keyframes gate-panel-twinkle { 0%,100% { opacity:.28; transform:scale(.78); } 48% { opacity:.78; transform:scale(1.12); } }
/* Short, staggered bursts expand outward, then fade in place. */
.birthday-gate-panel .gate-firework {
  width:112px;
  aspect-ratio:1;
  border-radius:50%;
  opacity:0;
  animation:opener-firework 6.8s cubic-bezier(.16,.64,.24,1) infinite;
  will-change:transform,opacity;
}
.birthday-gate-panel .gate-firework.firework-a { top:12%; left:11%; animation-delay:-.3s; }
.birthday-gate-panel .gate-firework.firework-b { top:13%; right:11%; animation-delay:-1.4s; }
.birthday-gate-panel .gate-firework.firework-c { top:43%; left:11%; animation-delay:-2.5s; }
.birthday-gate-panel .gate-firework.firework-d { top:43%; right:11%; animation-delay:-3.6s; }
.birthday-gate-panel .gate-firework.firework-e { bottom:12%; left:23%; animation-delay:-4.7s; }
.birthday-gate-panel .gate-firework.firework-f { right:23%; bottom:12%; animation-delay:-5.8s; }
.birthday-gate-panel .gate-firework::before {
  inset:0;
  border-radius:50%;
  background:repeating-conic-gradient(from 0deg,transparent 0deg 9deg,rgba(255,225,174,.98) 9.7deg 11.3deg,transparent 12deg 24deg);
  -webkit-mask:radial-gradient(circle,transparent 0 9%,#000 14% 59%,transparent 76%);
  mask:radial-gradient(circle,transparent 0 9%,#000 14% 59%,transparent 76%);
  filter:drop-shadow(0 0 5px rgba(255,221,156,.88));
  transform:none;
}
.birthday-gate-panel .gate-firework::after {
  inset:0;
  width:auto;
  height:auto;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,#fff4d5 0 2px,transparent 4px),
    radial-gradient(circle at 50% 5%,#ffe2a0 0 2px,transparent 3px),
    radial-gradient(circle at 75% 12%,#f3b9dd 0 2px,transparent 3px),
    radial-gradient(circle at 93% 32%,#ffe2a0 0 2px,transparent 3px),
    radial-gradient(circle at 93% 68%,#b9ddff 0 2px,transparent 3px),
    radial-gradient(circle at 75% 88%,#ffe2a0 0 2px,transparent 3px),
    radial-gradient(circle at 50% 96%,#f3b9dd 0 2px,transparent 3px),
    radial-gradient(circle at 25% 88%,#ffe2a0 0 2px,transparent 3px),
    radial-gradient(circle at 7% 68%,#b9ddff 0 2px,transparent 3px),
    radial-gradient(circle at 7% 32%,#ffe2a0 0 2px,transparent 3px),
    radial-gradient(circle at 25% 12%,#f3b9dd 0 2px,transparent 3px);
  box-shadow:none;
}
.gate-firework.firework-b::before,.gate-firework.firework-e::before { background:repeating-conic-gradient(from 0deg,transparent 0deg 9deg,rgba(174,216,255,.98) 9.7deg 11.3deg,transparent 12deg 24deg); filter:drop-shadow(0 0 6px rgba(151,205,255,.8)); }
.gate-firework.firework-c::before,.gate-firework.firework-f::before { background:repeating-conic-gradient(from 0deg,transparent 0deg 9deg,rgba(255,177,219,.98) 9.7deg 11.3deg,transparent 12deg 24deg); filter:drop-shadow(0 0 6px rgba(246,142,198,.82)); }
.gate-firework.firework-d::before { background:repeating-conic-gradient(from 0deg,transparent 0deg 9deg,rgba(204,238,181,.98) 9.7deg 11.3deg,transparent 12deg 24deg); filter:drop-shadow(0 0 6px rgba(181,227,160,.76)); }
@keyframes opener-firework {
  0%,100% { opacity:0; transform:scale(.08); }
  7% { opacity:1; transform:scale(.34); }
  21% { opacity:.98; transform:scale(1.12); }
  34% { opacity:.62; transform:scale(1.58); }
  45% { opacity:0; transform:scale(1.92); }
  56% { opacity:0; transform:scale(1.92); }
}
@media (max-width:1100px) {
  .birthday-gate-decor .gate-garland { height:100vh; }
  .birthday-gate-decor .gate-garland-left { transform:translateY(-50%) scaleX(1.32); }
  .birthday-gate-decor .gate-garland-right { transform:translateY(-50%) scaleX(-1.32); }
  .birthday-gate-panel .gate-firework { width:90px; }
}
@media (max-width:700px) {
  .birthday-gate-decor .gate-garland { height:76vh; }
  .birthday-gate-decor .gate-garland-left { left:-48px; transform:translateY(-50%) scaleX(1.18); }
  .birthday-gate-decor .gate-garland-right { right:-48px; transform:translateY(-50%) scaleX(-1.18); }
  .birthday-gate-panel .gate-firework { width:72px; }
  .birthday-gate-panel .gate-firework.firework-c,.birthday-gate-panel .gate-firework.firework-d { top:46%; }
  .birthday-gate-panel .gate-firework.firework-e,.birthday-gate-panel .gate-firework.firework-f { bottom:8%; }
  .birthday-gate-panel > .gate-panel-star { font-size:12px; }
}
@media (prefers-reduced-motion:reduce) {
  .birthday-gate-stars i,.birthday-gate-panel > .gate-panel-star,.birthday-gate-decor .gate-garland,.birthday-gate-panel .gate-firework { animation:none !important; }
  .birthday-gate-panel .gate-firework { opacity:.3; }
}
/* Prevent inherited spin animations on the new outward-burst fireworks. */
.birthday-gate-panel .gate-firework::before,
.birthday-gate-panel .gate-firework::after { animation:none !important; transform:none; }
/* Keep the flower layer explicitly visible at every screen width. */
.birthday-gate-decor { display:block !important; visibility:visible !important; opacity:1 !important; }
.birthday-gate-decor .gate-garland { display:block !important; visibility:visible !important; }
/* The opener is now flower-free; retain its cosmic stars and celebration effects. */
.birthday-gate-decor { display:none !important; }
/* Opener backdrop: use the supplied watercolor frame and echo its cool blue palette. */
.birthday-gate {
  background-color:#dce8f7;
  background-image:linear-gradient(rgba(229,239,251,.08),rgba(210,226,246,.10)),url("assets/welcome-icy-floral-bg.jpg");
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}
.birthday-gate::after {
  opacity:.24;
  background:radial-gradient(ellipse at 50% 44%,rgba(112,143,190,.22),transparent 62%),linear-gradient(180deg,rgba(233,242,253,.08),rgba(74,104,151,.08));
}
.birthday-gate-panel {
  background:
    radial-gradient(ellipse at 2% 46%,rgba(92,133,191,.16),transparent 34%) padding-box,
    radial-gradient(ellipse at 98% 20%,rgba(125,155,203,.15),transparent 35%) padding-box,
    radial-gradient(ellipse at 50% 38%,rgba(40,58,101,.62),transparent 58%) padding-box,
    linear-gradient(135deg,rgba(13,24,47,.96),rgba(10,18,38,.97)) padding-box,
    linear-gradient(135deg,rgba(193,216,244,.9),rgba(132,163,208,.62) 52%,rgba(201,219,241,.88)) border-box;
  box-shadow:0 32px 110px rgba(23,39,66,.35),0 0 64px rgba(73,105,157,.24),inset 0 0 82px rgba(126,160,207,.1);
}
.birthday-gate-panel::before { border-color:rgba(196,215,240,.3); }
.birthday-gate-panel .birthday-enter { border-color:rgba(183,211,242,.78); }
.birthday-gate-panel .birthday-enter:hover { border-color:#d4e5fb; }
.birthday-gate-stars i { text-shadow:0 0 16px rgba(45,67,103,.42),0 0 26px currentColor; }
.birthday-gate-stars i:nth-child(1),.birthday-gate-stars i:nth-child(8),.birthday-gate-stars i:nth-child(16) { color:#49658d; }
.birthday-gate-stars i:nth-child(2),.birthday-gate-stars i:nth-child(7),.birthday-gate-stars i:nth-child(11) { color:#936087; }
.birthday-gate-stars i:nth-child(3),.birthday-gate-stars i:nth-child(9),.birthday-gate-stars i:nth-child(13) { color:#9d7b46; }
/* Use the newer blue floral frame; shade its white center into the established night palette. */
.birthday-gate {
  background-color:#0b1020;
  background-image:
    radial-gradient(ellipse at 50% 48%,rgba(8,12,27,.82) 0%,rgba(8,12,27,.68) 48%,rgba(8,12,27,.34) 100%),
    linear-gradient(135deg,rgba(10,16,34,.22),rgba(19,30,54,.28)),
    url("assets/welcome-floral-frame.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.birthday-gate::after {
  opacity:.16;
  background:radial-gradient(ellipse at 50% 46%,rgba(102,137,190,.2),transparent 62%),linear-gradient(180deg,rgba(10,16,34,.04),rgba(10,16,34,.2));
}
.birthday-gate-panel {
  background:
    radial-gradient(ellipse at 5% 20%,rgba(78,115,166,.13),transparent 28%) padding-box,
    radial-gradient(ellipse at 96% 82%,rgba(123,91,151,.12),transparent 30%) padding-box,
    radial-gradient(ellipse at 50% 38%,rgba(43,57,100,.68),transparent 58%) padding-box,
    linear-gradient(135deg,rgba(13,22,43,.95),rgba(11,17,35,.97)) padding-box,
    linear-gradient(135deg,rgba(184,209,239,.8),rgba(124,155,203,.48) 52%,rgba(190,161,215,.66)) border-box;
  box-shadow:0 32px 110px rgba(4,8,18,.42),0 0 72px rgba(81,111,165,.2),inset 0 0 86px rgba(130,161,205,.1);
}
.birthday-gate-panel::before { border-color:rgba(190,211,238,.26); }
/* Birthday opener rebuild: a luminous portal in the same multicolor cosmos as the story segment. */
.birthday-gate {
  isolation:isolate;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:clamp(20px,4vh,38px) clamp(18px,4vw,56px);
  background:
    radial-gradient(ellipse at 14% 24%,rgba(72,149,196,.22),transparent 29%),
    radial-gradient(ellipse at 85% 18%,rgba(177,100,169,.2),transparent 31%),
    radial-gradient(ellipse at 80% 84%,rgba(90,105,184,.2),transparent 34%),
    radial-gradient(ellipse at 17% 82%,rgba(48,157,148,.13),transparent 30%),
    radial-gradient(ellipse at 50% 50%,rgba(35,46,91,.48),transparent 55%),
    linear-gradient(135deg,#070a15 0%,#0d1226 48%,#090c1b 100%);
}
.birthday-gate::before {
  z-index:0;
  opacity:.58;
  background-image:
    radial-gradient(1px 1px at 8% 18%,rgba(255,224,157,.95) 99%,transparent),
    radial-gradient(1.5px 1.5px at 21% 62%,rgba(169,220,255,.9) 99%,transparent),
    radial-gradient(1px 1px at 37% 28%,rgba(242,164,206,.9) 99%,transparent),
    radial-gradient(1px 1px at 73% 14%,rgba(169,229,183,.9) 99%,transparent),
    radial-gradient(1.5px 1.5px at 89% 56%,rgba(194,177,255,.95) 99%,transparent),
    radial-gradient(1px 1px at 66% 86%,rgba(255,214,110,.9) 99%,transparent);
  background-size:260px 230px,310px 290px,360px 310px,280px 260px,390px 350px,330px 300px;
  animation:opener-star-drift 44s linear infinite;
}
.birthday-gate::after {
  position:absolute;
  z-index:0;
  inset:-25%;
  content:"";
  pointer-events:none;
  opacity:.56;
  background:conic-gradient(from 20deg at 50% 50%,transparent 0 18%,rgba(91,173,205,.1) 24%,transparent 33%,rgba(209,120,184,.09) 48%,transparent 61%,rgba(109,130,208,.1) 74%,transparent 88%);
  filter:blur(60px);
  animation:opener-nebula-turn 62s linear infinite;
}
.birthday-gate-stars { z-index:1; }
.birthday-gate-stars i {
  z-index:1;
  opacity:.72;
  animation:opener-star-float 7s ease-in-out infinite;
  text-shadow:0 0 9px currentColor,0 0 24px currentColor;
}
.birthday-gate-stars i:nth-child(7) { top:39%;left:5%;color:#f2a4ce;animation-delay:-1.1s; }
.birthday-gate-stars i:nth-child(8) { top:56%;right:6%;color:#a9dcff;animation-delay:-2.2s; }
.birthday-gate-stars i:nth-child(9) { top:72%;left:10%;color:#ffdc78;animation-delay:-3.3s; }
.birthday-gate-stars i:nth-child(10) { top:83%;right:18%;color:#c2b1ff;animation-delay:-.6s; }
.birthday-gate-stars i:nth-child(11) { top:31%;right:5%;color:#a9e5b7;animation-delay:-1.8s; }
.birthday-gate-stars i:nth-child(12) { top:66%;left:24%;color:#9de5e2;animation-delay:-4s; }
.birthday-gate-stars i:nth-child(13) { top:9%;right:27%;color:#ffd66e;animation-delay:-2.7s; }
.birthday-gate-stars i:nth-child(14) { bottom:8%;left:38%;color:#f2a4ce;animation-delay:-3.7s; }
.birthday-gate-stars i:nth-child(15) { top:46%;right:24%;color:#c2b1ff;animation-delay:-.9s; }
.birthday-gate-stars i:nth-child(16) { top:18%;left:30%;color:#a9dcff;animation-delay:-2.9s; }
.birthday-gate-stars i:nth-child(17) { top:88%;left:70%;color:#ffd66e;animation-delay:-1.5s; }
.birthday-gate-stars i:nth-child(18) { top:12%;left:7%;color:#f2a4ce;animation-delay:-4.5s; }
.birthday-gate-stars i:nth-child(19) { top:60%;right:39%;color:#a9dcff;animation-delay:-3.1s; }
.birthday-gate-stars i:nth-child(20) { top:35%;left:17%;color:#ffd66e;animation-delay:-1.4s; }
.birthday-gate-orbit {
  z-index:0;
  width:min(88vw,1040px);
  border-color:rgba(169,220,255,.11);
  box-shadow:0 0 90px rgba(83,132,197,.08),inset 0 0 50px rgba(108,149,203,.04);
}
.birthday-gate-orbit::after { background:#a9dcff;box-shadow:0 0 18px 5px rgba(169,220,255,.6); }
.birthday-gate-orbit.orbit-a { animation:opener-orbit 52s linear infinite; }
.birthday-gate-orbit.orbit-b {
  width:min(68vw,810px);
  border-color:rgba(242,164,206,.12);
  transform:rotate(56deg) scaleY(.64);
  animation:opener-orbit 68s linear infinite reverse;
}
.birthday-gate-panel {
  z-index:2;
  display:flex;
  width:min(880px,90vw);
  height:min(724px,calc(100dvh - 56px));
  min-height:0;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:visible;
  padding:clamp(28px,6vh,62px) 26px;
  border:0;
  border-radius:0;
  background:radial-gradient(ellipse at 50% 45%,rgba(40,52,99,.42),transparent 63%);
  box-shadow:none;
  animation:opener-content-arrive 1.35s cubic-bezier(.18,.72,.22,1) both;
}
.birthday-gate-panel::before {
  z-index:-1;
  inset:4% 11%;
  border:1px solid rgba(178,199,236,.13);
  border-radius:48% 52% 45% 55% / 46% 43% 57% 54%;
  box-shadow:0 0 0 18px rgba(151,180,228,.018),0 0 0 62px rgba(205,139,204,.018),inset 0 0 72px rgba(103,147,203,.045);
  transform:rotate(-7deg);
  animation:opener-portal-breathe 9s ease-in-out infinite;
}
.birthday-gate-panel::after {
  z-index:-1;
  width:min(58vw,590px);
  border-color:rgba(157,229,226,.17);
  box-shadow:0 0 0 42px rgba(157,229,226,.022),0 0 0 88px rgba(194,177,255,.018);
  animation:opener-orbit 40s linear infinite reverse;
}
.birthday-gate-kicker {
  gap:15px;
  color:#f2a4ce;
  font-size:clamp(8px,.72vw,10px);
  letter-spacing:.33em;
  text-shadow:0 0 20px rgba(242,164,206,.2);
  animation:opener-copy-arrive .8s .12s both;
}
.birthday-gate-kicker i {
  width:clamp(24px,5.2vw,65px);
  background:linear-gradient(90deg,transparent,#f2a4ce 42%,#9de5e2);
}
.birthday-gate-name {
  margin:clamp(24px,4.2vh,42px) 0 0;
  color:#a9dcff;
  font-size:clamp(26px,3.4vw,43px);
  text-shadow:0 0 28px rgba(109,190,231,.25);
  animation:opener-copy-arrive .9s .24s both;
}
.birthday-gate-panel h1 {
  margin:8px 0 0;
  color:#f7f5f8;
  font-size:clamp(84px,13.2vw,166px);
  letter-spacing:-.065em;
  line-height:.72;
  text-shadow:0 8px 38px rgba(3,5,16,.3),0 0 38px rgba(242,164,206,.1);
  animation:opener-title-arrive 1.2s .3s cubic-bezier(.18,.72,.22,1) both,opener-title-glow 6.5s 1.6s ease-in-out infinite;
}
.birthday-gate-panel h1 em {
  color:transparent;
  background:linear-gradient(100deg,#f2a4ce 4%,#c2b1ff 50%,#9de5e2 96%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:none;
}
.birthday-gate-spark {
  margin-top:clamp(20px,3vh,32px);
  color:#ffd66e;
  font-size:25px;
  text-shadow:0 0 11px rgba(255,214,110,.8),0 0 34px rgba(255,214,110,.4);
  animation:opener-spark-pulse 3s ease-in-out infinite;
}
.birthday-gate-message {
  margin:10px 0 0;
  color:#c5cee0;
  font-size:clamp(14px,1.65vw,19px);
  line-height:1.55;
  text-shadow:0 2px 16px rgba(4,7,17,.5);
  animation:opener-copy-arrive .9s .52s both;
}
.birthday-gate-message em { color:#f2a4ce; }
.birthday-gate-panel .birthday-enter {
  min-height:55px;
  margin-top:clamp(25px,4.2vh,39px);
  padding:0 29px;
  border:1px solid rgba(242,164,206,.7);
  border-radius:999px;
  background:linear-gradient(110deg,rgba(115,54,112,.45),rgba(36,51,89,.72) 54%,rgba(28,74,88,.48));
  color:#fff0f8;
  box-shadow:0 8px 26px rgba(5,8,20,.22),inset 0 1px rgba(255,255,255,.15),0 0 22px rgba(242,164,206,.13);
  animation:opener-button-arrive .9s .68s both,opener-button-breathe 4.8s 1.7s ease-in-out infinite;
  transition:transform .32s cubic-bezier(.2,.75,.2,1),border-color .32s,background .32s,box-shadow .32s;
}
.birthday-gate-panel .birthday-enter:hover {
  transform:translateY(-3px);
  border-color:#ffd66e;
  background:linear-gradient(110deg,rgba(142,69,131,.62),rgba(49,68,117,.82) 54%,rgba(35,103,111,.64));
  box-shadow:0 12px 32px rgba(5,8,20,.32),inset 0 1px rgba(255,255,255,.2),0 0 32px rgba(157,229,226,.23);
}
.birthday-gate-panel .birthday-enter span { color:#ffd66e; }
.birthday-gate-signoff {
  margin:clamp(18px,2.8vh,27px) 0 0;
  color:#91a0b8;
  animation:opener-copy-arrive .9s .82s both;
}
.birthday-gate-signoff i { background:linear-gradient(90deg,transparent,rgba(169,220,255,.6)); }
.birthday-gate-panel > .gate-panel-star {
  position:absolute !important;
  z-index:1 !important;
  display:block;
  color:#a9dcff;
  font-size:clamp(13px,1.4vw,19px);
  line-height:1;
  opacity:.62;
  text-shadow:0 0 12px currentColor,0 0 25px currentColor;
  animation:opener-star-float 5.8s ease-in-out infinite;
  pointer-events:none;
}
.gate-panel-star.star-one { top:12%;left:13%;color:#f2a4ce; }
.gate-panel-star.star-two { top:19%;right:13%;color:#9de5e2;animation-delay:-1s; }
.gate-panel-star.star-three { top:36%;left:8%;color:#ffd66e;animation-delay:-2s; }
.gate-panel-star.star-four { top:43%;right:8%;color:#c2b1ff;animation-delay:-.6s; }
.gate-panel-star.star-five { bottom:30%;left:10%;color:#a9dcff;animation-delay:-1.6s; }
.gate-panel-star.star-six { bottom:20%;right:11%;color:#f2a4ce;animation-delay:-2.5s; }
.gate-panel-star.star-seven { bottom:10%;left:24%;color:#ffd66e;animation-delay:-.4s; }
.gate-panel-star.star-eight { top:10%;right:27%;color:#a9e5b7;animation-delay:-2.2s; }
/* Firework particles bloom out from their launch point, then disappear before the next beat. */
.birthday-gate-panel .gate-firework {
  z-index:0;
  width:clamp(76px,9vw,116px);
  aspect-ratio:1;
  border-radius:50%;
  opacity:0;
  animation:opener-firework-bloom 7.2s cubic-bezier(.16,.66,.22,1) infinite;
  pointer-events:none;
}
.birthday-gate-panel .gate-firework.firework-a { top:9%;left:8%;animation-delay:-.2s; }
.birthday-gate-panel .gate-firework.firework-b { top:11%;right:8%;animation-delay:-1.4s; }
.birthday-gate-panel .gate-firework.firework-c { top:43%;left:7%;animation-delay:-2.6s; }
.birthday-gate-panel .gate-firework.firework-d { top:43%;right:7%;animation-delay:-3.8s; }
.birthday-gate-panel .gate-firework.firework-e { bottom:9%;left:22%;animation-delay:-5s; }
.birthday-gate-panel .gate-firework.firework-f { right:22%;bottom:9%;animation-delay:-6.2s; }
.birthday-gate-panel .gate-firework::before {
  inset:0;
  border-radius:50%;
  background:repeating-conic-gradient(transparent 0deg 10deg,rgba(255,220,140,.98) 10.8deg 12.1deg,transparent 13deg 25deg);
  -webkit-mask:radial-gradient(circle,transparent 0 8%,#000 13% 61%,transparent 77%);
  mask:radial-gradient(circle,transparent 0 8%,#000 13% 61%,transparent 77%);
  filter:drop-shadow(0 0 5px rgba(255,220,140,.85));
  animation:none !important;
}
.birthday-gate-panel .gate-firework::after {
  inset:0;
  width:auto;
  height:auto;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,#fff4da 0 2px,transparent 4px),
    radial-gradient(circle at 50% 4%,#ffe08a 0 2px,transparent 3px),
    radial-gradient(circle at 75% 12%,#f2a4ce 0 2px,transparent 3px),
    radial-gradient(circle at 94% 32%,#a9dcff 0 2px,transparent 3px),
    radial-gradient(circle at 94% 68%,#9de5e2 0 2px,transparent 3px),
    radial-gradient(circle at 75% 88%,#c2b1ff 0 2px,transparent 3px),
    radial-gradient(circle at 50% 96%,#ffe08a 0 2px,transparent 3px),
    radial-gradient(circle at 25% 88%,#f2a4ce 0 2px,transparent 3px),
    radial-gradient(circle at 6% 68%,#a9dcff 0 2px,transparent 3px),
    radial-gradient(circle at 6% 32%,#9de5e2 0 2px,transparent 3px),
    radial-gradient(circle at 25% 12%,#c2b1ff 0 2px,transparent 3px);
  box-shadow:none;
  animation:none !important;
}
.gate-firework.firework-b::before,.gate-firework.firework-e::before { background:repeating-conic-gradient(transparent 0deg 10deg,rgba(169,220,255,.98) 10.8deg 12.1deg,transparent 13deg 25deg); }
.gate-firework.firework-c::before,.gate-firework.firework-f::before { background:repeating-conic-gradient(transparent 0deg 10deg,rgba(242,164,206,.98) 10.8deg 12.1deg,transparent 13deg 25deg); }
.gate-firework.firework-d::before { background:repeating-conic-gradient(transparent 0deg 10deg,rgba(157,229,226,.98) 10.8deg 12.1deg,transparent 13deg 25deg); }
.birthday-gate.is-opening .birthday-gate-panel { animation:opener-portal-open .95s cubic-bezier(.18,.72,.22,1) both; }
.birthday-gate.is-opening::before { animation:opener-flash .72s ease-out both; }
@keyframes opener-star-drift { to { background-position:260px 230px,-310px 290px,360px -310px,-280px 260px,390px 350px,-330px -300px; } }
@keyframes opener-nebula-turn { to { transform:rotate(360deg) scale(1.05); } }
@keyframes opener-orbit { to { rotate:360deg; } }
@keyframes opener-portal-breathe { 0%,100% { opacity:.6;transform:rotate(-7deg) scale(.985); } 50% { opacity:1;transform:rotate(-3deg) scale(1.015); } }
@keyframes opener-star-float { 0%,100% { opacity:.35;transform:translate3d(0,0,0) scale(.86); } 50% { opacity:.9;transform:translate3d(0,-10px,0) scale(1.12); } }
@keyframes opener-copy-arrive { from { opacity:1;transform:translateY(13px);filter:blur(2px); } to { opacity:1;transform:translateY(0);filter:blur(0); } }
@keyframes opener-title-arrive { from { opacity:1;transform:translateY(24px) scale(.96);filter:blur(3px); } to { opacity:1;transform:translateY(0) scale(1);filter:blur(0); } }
@keyframes opener-title-glow { 0%,100% { text-shadow:0 8px 38px rgba(3,5,16,.3),0 0 25px rgba(242,164,206,.1); } 50% { text-shadow:0 8px 38px rgba(3,5,16,.3),0 0 44px rgba(242,164,206,.24),0 0 72px rgba(157,229,226,.12); } }
@keyframes opener-spark-pulse { 0%,100% { transform:scale(.85) rotate(-8deg);opacity:.72; } 50% { transform:scale(1.14) rotate(8deg);opacity:1; } }
@keyframes opener-button-arrive { from { opacity:1;transform:translateY(12px) scale(.97); } to { opacity:1;transform:translateY(0) scale(1); } }
@keyframes opener-button-breathe { 0%,100% { box-shadow:0 8px 26px rgba(5,8,20,.22),inset 0 1px rgba(255,255,255,.15),0 0 16px rgba(242,164,206,.1); } 50% { box-shadow:0 8px 28px rgba(5,8,20,.25),inset 0 1px rgba(255,255,255,.18),0 0 28px rgba(157,229,226,.2); } }
@keyframes opener-firework-bloom { 0%,100% { opacity:0;transform:scale(.08); } 5% { opacity:1;transform:scale(.22); } 19% { opacity:.96;transform:scale(1); } 32% { opacity:.62;transform:scale(1.65); } 45% { opacity:0;transform:scale(2.05); } 56% { opacity:0;transform:scale(2.05); } }
@keyframes opener-flash { 20% { opacity:.9;filter:brightness(1.9); } 100% { opacity:.58;filter:brightness(1); } }
@keyframes opener-content-arrive { from { opacity:1;transform:translateY(18px) scale(.985); } to { opacity:1;transform:translateY(0) scale(1); } }
@keyframes opener-portal-open { 0% { transform:scale(1);filter:brightness(1); } 28% { transform:scale(1.018);filter:brightness(1.18); } 100% { transform:scale(1.06);opacity:.55;filter:blur(2px) brightness(1.25); } }
@media (max-width:900px) {
  .birthday-gate-panel { width:min(760px,94vw); }
  .birthday-gate-panel::before { inset:5% 7%; }
  .birthday-gate-panel h1 { font-size:clamp(76px,15vw,140px); }
  .birthday-gate-panel .gate-firework { width:84px; }
}
@media (max-width:640px) {
  .birthday-gate { padding:14px; }
  .birthday-gate-panel { width:100%;height:calc(100dvh - 28px);padding:24px 14px; }
  .birthday-gate-panel::before { inset:8% 0;border-radius:48%; }
  .birthday-gate-panel::after { width:min(90vw,440px); }
  .birthday-gate-name { margin-top:clamp(20px,4vh,32px);font-size:clamp(26px,8vw,38px); }
  .birthday-gate-panel h1 { font-size:clamp(67px,17vw,105px);line-height:.78; }
  .birthday-gate-kicker { gap:8px;font-size:7px;letter-spacing:.2em; }
  .birthday-gate-kicker i { width:18px; }
  .birthday-gate-message { font-size:14px; }
  .birthday-gate-panel .birthday-enter { min-height:50px;margin-top:24px;font-size:9px; }
  .birthday-gate-signoff { font-size:6px;letter-spacing:.18em; }
  .birthday-gate-panel .gate-firework { width:60px; }
  .birthday-gate-panel .gate-firework.firework-c,.birthday-gate-panel .gate-firework.firework-d { top:46%; }
  .birthday-gate-panel .gate-firework.firework-e,.birthday-gate-panel .gate-firework.firework-f { bottom:10%; }
  .birthday-gate-stars i { font-size:14px; }
}
@media (max-height:720px) and (min-width:641px) {
  .birthday-gate-panel { height:calc(100dvh - 40px);padding-block:24px; }
  .birthday-gate-name { margin-top:20px; }
  .birthday-gate-panel h1 { font-size:clamp(72px,11vw,132px); }
  .birthday-gate-spark { margin-top:15px; }
  .birthday-gate-panel .birthday-enter { min-height:48px;margin-top:17px; }
  .birthday-gate-signoff { margin-top:14px; }
}
@media (prefers-reduced-motion:reduce) {
  .birthday-gate::before,.birthday-gate::after,.birthday-gate-orbit,.birthday-gate-panel,.birthday-gate-panel::before,.birthday-gate-panel::after,.birthday-gate-stars i,.birthday-gate-panel > .gate-panel-star,.birthday-gate-panel h1,.birthday-gate-spark,.birthday-gate-panel .birthday-enter,.birthday-gate-signoff,.birthday-gate-panel .gate-firework { animation:none !important; }
  .birthday-gate-panel .gate-firework { opacity:.24; }
}

/* Extra celestial detail and fast, polished entry transitions. */
.birthday-gate-stars { z-index:3; }
.birthday-gate-corner-stars {
  position:absolute;
  z-index:2;
  width:clamp(124px,13vw,168px);
  height:clamp(112px,12vw,154px);
  pointer-events:none;
}
.birthday-gate-corner-stars.corner-top-left { top:3.5%;left:3.5%; }
.birthday-gate-corner-stars.corner-bottom-right { right:3.5%;bottom:3.5%; }
.birthday-gate-corner-stars i {
  position:absolute;
  color:#fff;
  font-family:Georgia,serif;
  font-size:clamp(25px,3.1vw,42px);
  font-style:normal;
  line-height:1;
  opacity:.96;
  text-shadow:0 0 5px #fff,0 0 16px rgba(255,255,255,.95),0 0 34px rgba(184,221,255,.9),0 0 64px rgba(184,221,255,.55);
  animation:opener-white-star 3.8s ease-in-out infinite;
}
.corner-top-left i:first-child { top:0;left:0;font-size:clamp(62px,7vw,92px); }
.corner-top-left i:nth-child(2) { top:36px;left:79px;font-size:clamp(39px,4vw,56px);animation-delay:-1.2s; }
.corner-top-left i:nth-child(3) { top:83px;left:38px;font-size:clamp(27px,2.7vw,38px);animation-delay:-2.4s; }
.corner-bottom-right i:first-child { right:0;bottom:0;font-size:clamp(64px,7.4vw,98px); }
.corner-bottom-right i:nth-child(2) { right:84px;bottom:41px;font-size:clamp(38px,4vw,54px);animation-delay:-1.2s; }
.corner-bottom-right i:nth-child(3) { right:39px;bottom:93px;font-size:clamp(26px,2.7vw,37px);animation-delay:-2.4s; }
@keyframes opener-white-star {
  0%,100% { opacity:.72;transform:scale(.88);filter:brightness(.92); }
  48% { opacity:1;transform:scale(1.12);filter:brightness(1.35); }
}
.gate-orbit-ring {
  position:absolute;
  z-index:0;
  top:50%;left:50%;
  width:min(72vw,720px);
  aspect-ratio:1;
  border:1px solid rgba(169,220,255,.14);
  border-radius:50%;
  box-shadow:0 0 30px rgba(169,220,255,.035),inset 0 0 28px rgba(169,220,255,.025);
  pointer-events:none;
}
.birthday-gate-panel > .gate-orbit-ring { position:absolute;z-index:0;flex:none; }
.birthday-gate-panel > :not(.gate-firework):not(.gate-orbit-ring) { position:relative;z-index:1; }
.gate-orbit-ring::before {
  position:absolute;
  top:50%;left:-5px;
  width:9px;height:9px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 9px 3px #a9dcff,0 0 26px 8px rgba(169,220,255,.48);
  content:"";
}
.gate-orbit-ring.ring-c { transform:translate(-50%,-50%) rotate(-24deg) scaleY(.48);animation:opener-orbit 30s linear infinite; }
.gate-orbit-ring.ring-d { width:min(54vw,540px);border-color:rgba(255,214,110,.12);transform:translate(-50%,-50%) rotate(42deg) scaleY(.72);animation:opener-orbit 43s linear infinite reverse; }
.gate-orbit-ring.ring-d::before { background:#fff4d4;box-shadow:0 0 10px 3px #ffd66e,0 0 25px 8px rgba(255,214,110,.43); }
.birthday-gate-panel::before { box-shadow:0 0 0 18px rgba(151,180,228,.025),0 0 0 62px rgba(205,139,204,.024),0 0 0 108px rgba(157,229,226,.018),inset 0 0 90px rgba(103,147,203,.06); }
.birthday-gate-panel::after { box-shadow:0 0 0 26px rgba(157,229,226,.02),0 0 0 42px rgba(157,229,226,.035),0 0 0 70px rgba(194,177,255,.025),0 0 0 102px rgba(242,164,206,.018); }
.birthday-gate-panel .gate-firework { animation-duration:8.2s; }
.birthday-gate-panel .gate-firework.firework-a { animation-delay:-.1s; }
.birthday-gate-panel .gate-firework.firework-b { animation-delay:-1.6s; }
.birthday-gate-panel .gate-firework.firework-c { animation-delay:-3.1s; }
.birthday-gate-panel .gate-firework.firework-d { animation-delay:-4.6s; }
.birthday-gate-panel .gate-firework.firework-e { animation-delay:-6.1s; }
.birthday-gate-panel .gate-firework.firework-f { animation-delay:-7.6s; }
.birthday-gate-panel .gate-firework.firework-g { top:29%;left:24%;animation-delay:-2.3s; }
.birthday-gate-panel .gate-firework.firework-h { right:24%;bottom:29%;animation-delay:-5.3s; }
.birthday-gate-panel .gate-firework.firework-g::before { background:repeating-conic-gradient(transparent 0deg 10deg,rgba(194,177,255,.98) 10.8deg 12.1deg,transparent 13deg 25deg); }
.birthday-gate-panel .gate-firework.firework-h::before { background:repeating-conic-gradient(transparent 0deg 10deg,rgba(255,255,255,.98) 10.8deg 12.1deg,transparent 13deg 25deg); }
@keyframes opener-firework-bloom {
  0%,100% { opacity:0;transform:scale(.04);filter:brightness(1); }
  3% { opacity:.35;transform:scale(.13);filter:brightness(1.8); }
  9% { opacity:1;transform:scale(.54);filter:brightness(1.55); }
  20% { opacity:.95;transform:scale(1.14);filter:brightness(1.25); }
  34% { opacity:.54;transform:scale(1.85);filter:brightness(1); }
  46% { opacity:0;transform:scale(2.25);filter:brightness(.9); }
  58% { opacity:0;transform:scale(2.25); }
}
.orbit-section.is-arriving::before { animation:orbit-entry-flare 1.2s cubic-bezier(.16,.7,.2,1) both; }
@keyframes orbit-entry-flare {
  0% { opacity:.25;transform:translateX(-50%) scale(.78);filter:brightness(.85); }
  32% { opacity:1;transform:translateX(-50%) scale(1.08);filter:brightness(1.7); }
  100% { opacity:.72;transform:translateX(-50%) scale(1);filter:brightness(1); }
}
@media (max-width:640px) {
  .birthday-gate-corner-stars { width:112px;height:102px; }
  .birthday-gate-corner-stars.corner-top-left { top:1.5%;left:1.5%; }
  .birthday-gate-corner-stars.corner-bottom-right { right:1.5%;bottom:1.5%; }
  .corner-top-left i:nth-child(2) { top:28px;left:62px; }
  .corner-top-left i:nth-child(3) { top:67px;left:30px; }
  .corner-bottom-right i:nth-child(2) { right:64px;bottom:31px; }
  .corner-bottom-right i:nth-child(3) { right:30px;bottom:71px; }
  .gate-orbit-ring.ring-c { width:94vw; }
  .gate-orbit-ring.ring-d { width:74vw; }
}
@media (prefers-reduced-motion:reduce) {
  .birthday-gate-corner-stars i,.gate-orbit-ring,.orbit-section.is-arriving::before { animation:none !important; }
  .birthday-gate-corner-stars i { opacity:1; }
}

/* Feather the portal into the nebula instead of drawing hard circles. */
.birthday-gate { animation:opener-gate-refresh .72s cubic-bezier(.2,.72,.24,1) both; }
.birthday-gate-orbit {
  border:0;
  background:radial-gradient(ellipse at center,transparent 48%,rgba(132,190,232,.025) 51%,rgba(132,190,232,.09) 54%,rgba(194,177,255,.075) 58%,rgba(242,164,206,.045) 62%,transparent 70%);
  filter:blur(8px);
}
.birthday-gate-panel::before {
  border:0;
  background:radial-gradient(ellipse at center,transparent 45%,rgba(112,184,222,.035) 51%,rgba(169,220,255,.09) 55%,rgba(194,177,255,.085) 59%,rgba(242,164,206,.055) 64%,transparent 73%);
  box-shadow:0 0 55px rgba(129,165,223,.07),inset 0 0 60px rgba(157,229,226,.035);
  filter:blur(9px);
}
.birthday-gate-panel::before {
  border:0;
  background:radial-gradient(ellipse at center,
    transparent 46%,
    rgba(111,177,220,.035) 49%,
    rgba(111,177,220,.085) 52%,
    rgba(169,220,255,.12) 55%,
    rgba(194,177,255,.105) 58%,
    rgba(242,164,206,.07) 61%,
    rgba(157,229,226,.035) 64%,
    transparent 68%);
  box-shadow:0 0 50px rgba(129,165,223,.075),inset 0 0 44px rgba(157,229,226,.035);
  filter:blur(3px);
}
.birthday-gate-panel::after {
  border:0;
  background:radial-gradient(circle,
    transparent 46%,
    rgba(157,229,226,.03) 49%,
    rgba(157,229,226,.075) 52%,
    rgba(169,220,255,.115) 55%,
    rgba(194,177,255,.1) 58%,
    rgba(242,164,206,.065) 61%,
    rgba(157,229,226,.03) 64%,
    transparent 68%);
  box-shadow:0 0 52px rgba(169,220,255,.07);
  filter:blur(3px);
}
.birthday-gate-panel::before,
.birthday-gate-panel::after { display:none; }
.gate-orbit-ring {
  border:1px solid rgba(169,220,255,.14);
  background:none;
  box-shadow:0 0 30px rgba(169,220,255,.035),inset 0 0 28px rgba(169,220,255,.025);
  filter:none;
}
.gate-orbit-ring.ring-d {
  border-color:rgba(255,214,110,.12);
}
.birthday-gate-orbit { border:1px solid rgba(169,220,255,.11);background:none;filter:none; }
.birthday-gate-panel .gate-firework {
  animation:opener-firework-bloom 1.05s cubic-bezier(.16,.66,.22,1) 1 both;
}
.birthday-gate-panel .gate-firework.firework-a { animation-delay:0s; }
.birthday-gate-panel .gate-firework.firework-b { animation-delay:.28s; }
.birthday-gate-panel .gate-firework.firework-c { animation-delay:.56s; }
.birthday-gate-panel .gate-firework.firework-d { animation-delay:.84s; }
.birthday-gate-panel .gate-firework.firework-e { animation-delay:1.12s; }
.birthday-gate-panel .gate-firework.firework-f { animation-delay:1.4s; }
.birthday-gate-panel .gate-firework.firework-g { animation-delay:1.68s; }
.birthday-gate-panel .gate-firework.firework-h { animation-delay:1.96s; }
@keyframes opener-gate-refresh {
  from { opacity:.72;transform:scale(1.012);filter:blur(2px) brightness(.9); }
  to { opacity:1;transform:scale(1);filter:blur(0) brightness(1); }
}

/* Sparse floating star glyphs stay in the viewport throughout the middle chapters. */
.middle-starfield { display:none;position:fixed;z-index:0;inset:0;overflow:hidden;pointer-events:none; }
body.middle-segment-active .middle-starfield { display:block; }
.middle-starfield i {
  position:absolute;
  display:block;
  color:#d8e8ff;
  font:normal clamp(21px,2.4vw,29px)/1 Georgia,serif;
  opacity:.55;
  text-shadow:0 0 13px currentColor,0 0 28px color-mix(in srgb,currentColor 46%,transparent);
  animation:middle-star-float 11s ease-in-out infinite;
}
.middle-starfield i:nth-child(1) { top:18%;left:11%;color:#a9dcff;animation-delay:-2s; }
.middle-starfield i:nth-child(2) { top:31%;right:13%;color:#f2a4ce;font-size:23px;animation-delay:-7s; }
.middle-starfield i:nth-child(3) { top:52%;left:6%;color:#c2b1ff;font-size:24px;animation-delay:-4s; }
.middle-starfield i:nth-child(4) { top:68%;right:8%;color:#9de5e2;font-size:21px;animation-delay:-9s; }
.middle-starfield i:nth-child(5) { top:82%;left:21%;color:#ffd66e;font-size:21px;animation-delay:-5s; }
.middle-starfield i:nth-child(6) { top:91%;right:24%;color:#a9dcff;font-size:22px;animation-delay:-1s; }
.middle-starfield i:nth-child(7) { top:27%;left:29%;color:#f2a4ce;font-size:23px;animation-delay:-6s; }
.middle-starfield i:nth-child(8) { top:43%;right:28%;color:#ffd66e;font-size:25px;animation-delay:-3s; }
.middle-starfield i:nth-child(9) { top:63%;left:17%;color:#9de5e2;font-size:21px;animation-delay:-8s; }
.middle-starfield i:nth-child(10) { top:77%;right:16%;color:#c2b1ff;font-size:24px;animation-delay:-5s; }
.middle-starfield i:nth-child(11) { top:16%;left:45%;color:#ffd66e;font-size:22px;animation-delay:-2.5s; }
.middle-starfield i:nth-child(12) { top:37%;left:58%;color:#a9dcff;font-size:25px;animation-delay:-8.5s; }
.middle-starfield i:nth-child(13) { top:58%;left:39%;color:#f2a4ce;font-size:21px;animation-delay:-4.8s; }
.middle-starfield i:nth-child(14) { top:80%;left:57%;color:#9de5e2;font-size:24px;animation-delay:-6.7s; }
@keyframes middle-star-float {
  0%,100% { opacity:.38;transform:translate3d(0,0,0) scale(.9); }
  50% { opacity:.82;transform:translate3d(7px,-12px,0) scale(1.08); }
}
@media (prefers-reduced-motion:reduce) {
  .middle-starfield i { animation:none;opacity:.56; }
}

/* Finale rebuild — a three-part birthday coda in the same colorful little universe. */
.finale-section:not([hidden]) {
  display:block; overflow-x:hidden; overflow-y:auto; scroll-behavior:smooth; scroll-snap-type:y proximity;
  color:#f7f3ff;
  background:radial-gradient(ellipse at 11% 12%,rgba(59,133,191,.24),transparent 31%),radial-gradient(ellipse at 88% 25%,rgba(183,75,146,.22),transparent 37%),radial-gradient(ellipse at 60% 92%,rgba(44,149,145,.15),transparent 35%),linear-gradient(145deg,#08111f 0%,#14132b 47%,#21152e 76%,#0a1927 100%);
  animation:finale-enter .56s cubic-bezier(.2,.7,.2,1) both;
}
.finale-section::before { opacity:.52; background-size:230px 210px,300px 250px,360px 310px,260px 270px; }
.finale-atmosphere { position:fixed; z-index:0; inset:0; overflow:hidden; pointer-events:none; background:radial-gradient(ellipse at 52% 50%,transparent 0 35%,rgba(143,158,255,.035) 35.2% 35.35%,transparent 35.6% 45%,rgba(242,164,206,.03) 45.2% 45.35%,transparent 45.7%); }
.finale-atmosphere i { position:absolute; color:#cde5ff; font:normal clamp(15px,2vw,25px)/1 Georgia,serif; opacity:.56; text-shadow:0 0 14px currentColor; animation:finale-twinkle 4.2s ease-in-out infinite; }
.finale-atmosphere i:nth-child(1) { top:17%;left:7%;color:#9ed9f0;font-size:27px; }
.finale-atmosphere i:nth-child(2) { top:28%;left:19%;color:#ffd66e;animation-delay:-2s; }
.finale-atmosphere i:nth-child(3) { top:68%;left:9%;color:#f2a4ce;font-size:23px;animation-delay:-1.1s; }
.finale-atmosphere i:nth-child(4) { top:81%;left:25%;color:#a9e5d3;animation-delay:-3s; }
.finale-atmosphere i:nth-child(5) { top:15%;left:42%;color:#f4d985;font-size:18px;animation-delay:-1.8s; }
.finale-atmosphere i:nth-child(6) { top:38%;left:52%;color:#a9dcff;font-size:21px;animation-delay:-2.7s; }
.finale-atmosphere i:nth-child(7) { top:75%;left:47%;color:#edabd0;font-size:18px;animation-delay:-.7s; }
.finale-atmosphere i:nth-child(8) { top:89%;left:68%;color:#a9e5d3;animation-delay:-2.4s; }
.finale-atmosphere i:nth-child(9) { top:20%;left:75%;color:#ffd66e;font-size:20px;animation-delay:-3.2s; }
.finale-atmosphere i:nth-child(10) { top:42%;left:91%;color:#9ed9f0;animation-delay:-1.4s; }
.finale-atmosphere i:nth-child(11) { top:63%;left:82%;color:#d9baff;font-size:23px;animation-delay:-2.2s; }
.finale-atmosphere i:nth-child(12) { top:84%;left:94%;color:#f2a4ce;animation-delay:-.4s; }
.finale-atmosphere i:nth-child(13) { top:52%;left:28%;color:#c5d8ff;font-size:16px;animation-delay:-2.8s; }
.finale-atmosphere i:nth-child(14) { top:54%;left:69%;color:#ffd66e;font-size:17px;animation-delay:-1.6s; }
.finale-atmosphere i:nth-child(15) { top:10%;left:91%;color:#d3b8ff;font-size:18px;animation-delay:-3.5s; }
.finale-atmosphere i:nth-child(16) { top:93%;left:5%;color:#ffd66e;font-size:18px;animation-delay:-.9s; }
.finale-progress { position:fixed; z-index:8; top:0;left:50%;display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:clamp(16px,3vw,44px);width:min(100%,1440px);height:74px;margin:0;padding:0 clamp(22px,5.5vw,78px);border-bottom:1px solid rgba(195,205,244,.12);background:linear-gradient(180deg,rgba(9,14,30,.78),rgba(9,14,30,.32));backdrop-filter:blur(18px);transform:translateX(-50%); }
.finale-brand { color:#f7f2ff; font:italic 600 30px/1 "Bodoni Moda",var(--serif); }
.finale-brand span { color:#ffd66e;font:normal 10px/1 var(--sans);vertical-align:top; }
.finale-progress-label { color:#8192af;font:700 7px/1 var(--sans);letter-spacing:.2em;white-space:nowrap; }
.finale-progress ol { display:flex; justify-content:flex-end; gap:clamp(14px,3.2vw,52px); margin:0; padding:0; list-style:none; }
.finale-progress li a { position:relative; display:flex; align-items:center; gap:8px; padding:12px 0; color:#8190a8; font:700 7px/1 var(--sans); letter-spacing:.12em; transition:color .3s ease; }
.finale-progress li a::after { position:absolute; right:0; bottom:0; left:0; height:1px; background:linear-gradient(90deg,#70d7dc,#f5bd70,#e984bf); content:""; transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.2,.7,.2,1); }
.finale-progress li a[aria-current="page"] { color:#fff1cc; }
.finale-progress li a[aria-current="page"]::after { transform:scaleX(1); }
.finale-progress li a span { color:#dba7cc;font-size:8px; }
.finale-progress li a:hover { color:#fff; }
.finale-progress-rule { width:42px;height:1px;background:linear-gradient(90deg,#76cfe0,#f4a8cc 55%,#ffd66e);opacity:.72; }
.finale-section .finale-page { position:relative; z-index:1; display:flex; width:100%; min-height:100svh; flex:0 0 auto; align-items:center; justify-content:center; overflow:hidden; padding:clamp(94px,12vh,132px) clamp(24px,7vw,100px) clamp(62px,8vh,94px); scroll-snap-align:start; scroll-margin-top:0; }
.finale-section .wish-section { background:radial-gradient(ellipse at 67% 52%,rgba(247,177,99,.13),transparent 32%),radial-gradient(ellipse at 31% 42%,rgba(93,105,205,.16),transparent 42%),linear-gradient(115deg,rgba(11,22,40,.25),rgba(34,20,46,.23)); }
.wish-layout { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr); align-items:center; gap:clamp(28px,7vw,94px); width:min(1120px,100%); margin:auto; }
.wish-copy { position:relative; z-index:2; max-width:580px; }
.finale-section .finale-intro { align-items:flex-start; gap:9px; margin:0 0 clamp(34px,6vh,64px); }
.finale-section .finale-kicker { gap:10px; color:#84d9dc; font-size:8px; letter-spacing:.21em; }
.finale-section .finale-kicker i { width:22px; background:linear-gradient(90deg,transparent,#84d9dc); }
.finale-section .finale-chapter { padding-left:32px; color:#d1a1c5; font-size:7px; letter-spacing:.22em; }
.finale-section .wish-copy > .eyebrow { margin:0 0 16px; color:#f0c2dd; font:700 9px/1.6 var(--sans); letter-spacing:.18em; text-transform:uppercase; }
.finale-section .wish-copy > .eyebrow span { margin:0 5px;color:#ffd66e; }
.finale-section .wish-copy h1 { margin:0; color:#fbf4ff; font:500 clamp(64px,8.3vw,112px)/.88 "Bodoni Moda",var(--serif); letter-spacing:-.065em; text-wrap:balance; }
.finale-section .wish-copy h1 em { display:inline-block; padding:.12em .08em .16em 0; background:linear-gradient(105deg,#f7c66f 0%,#f09cc8 52%,#9dd8ed 100%); background-clip:text; -webkit-text-fill-color:transparent; font-weight:500; }
.finale-section .wish-subtitle { max-width:390px; margin:22px 0 28px; color:#b7c3da; font:400 15px/1.8 var(--sans); }
.finale-section .wish-actions { justify-content:flex-start; }
.finale-section .wish-actions .pill { display:inline-flex; min-height:48px; align-items:center; gap:13px; padding:0 21px; border:1px solid rgba(250,202,130,.68); border-radius:999px; color:#fff1d0; background:linear-gradient(105deg,rgba(239,174,99,.17),rgba(229,119,170,.13),rgba(91,188,198,.12)); box-shadow:0 8px 30px rgba(12,11,30,.2),inset 0 1px rgba(255,255,255,.1); font:700 8px/1 var(--sans); letter-spacing:.13em; transition:transform .32s cubic-bezier(.2,.7,.2,1),box-shadow .32s,border-color .32s,background .32s; }
.finale-section .wish-actions .pill > span:first-child { color:#ffd66e;font-size:15px; }
.finale-section .wish-actions .pill b { margin-left:8px;color:#9de2df;font-size:15px;font-weight:500; }
.finale-section .wish-actions .pill:hover { transform:translateY(-3px); border-color:#fff0c6; background:linear-gradient(105deg,rgba(239,174,99,.27),rgba(229,119,170,.22),rgba(91,188,198,.19)); box-shadow:0 12px 35px rgba(218,126,174,.16),inset 0 1px rgba(255,255,255,.16); }
.finale-section .wish-actions .pill:focus-visible,.finale-progress a:focus-visible,.closing-invite:focus-visible,.finale-next:focus-visible,.love-you-again:focus-visible { outline:2px solid #f5d17f;outline-offset:4px; }
.finale-section .wish-actions .pill:disabled { color:#a8d7c9; opacity:.82; }
.finale-section .wish-hint { min-height:16px; margin:13px 0 0; color:#879bb7; font:500 9px/1.5 var(--sans); letter-spacing:.035em; }
.finale-section .closing-invite { display:inline-flex; min-height:36px; align-items:center; gap:12px; margin-top:13px; color:#9de2df; font:700 8px/1 var(--sans); letter-spacing:.15em; text-transform:uppercase; }
.finale-section .closing-invite[hidden] { display:none; }
.wish-bottomline { position:absolute; right:clamp(24px,7vw,100px); bottom:27px; left:clamp(24px,7vw,100px); display:flex; align-items:center; gap:14px; width:min(1120px,calc(100% - clamp(48px,14vw,200px))); margin:auto; color:#6f829f; font:700 7px/1 var(--sans); letter-spacing:.18em; }
.wish-bottomline span:first-child { color:#eeb5d0; }
.wish-bottomline span:last-child { color:#ffd66e;font-size:12px; }
.wish-bottomline i { width:clamp(18px,5vw,58px);height:1px;background:linear-gradient(90deg,rgba(126,206,218,.55),transparent); }
.wish-bottomline i:nth-of-type(2) { flex:1; }
.wish-art { position:relative; display:grid; min-height:clamp(385px,53vw,560px); place-items:center; isolation:isolate; }
.wish-art::before { position:absolute; z-index:-1; width:min(78%,420px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(243,163,130,.2),rgba(123,105,181,.12) 39%,rgba(73,158,173,.07) 57%,transparent 72%); filter:blur(8px); content:""; animation:wish-halo-breathe 6.5s ease-in-out infinite; }
.wish-art-orbit { position:absolute; width:min(96%,530px); aspect-ratio:1; border:1px solid rgba(152,205,224,.15); border-radius:50%; transform:rotate(-21deg) scaleY(.64); animation:wish-orbit-sway 21s ease-in-out infinite alternate; }
.wish-art-orbit::before { position:absolute; top:14%; left:17%; width:7px;height:7px;border-radius:50%;background:#9ce0e4;box-shadow:0 0 14px 4px rgba(123,219,223,.58);content:""; }
.wish-art-orbit.orbit-two { width:min(78%,410px);border-color:rgba(244,180,191,.18);transform:rotate(24deg) scaleY(.72);animation-duration:27s;animation-direction:alternate-reverse; }
.wish-art-caption { position:absolute; z-index:3; color:#9ba9bf; font:700 7px/1 var(--sans); letter-spacing:.19em; }
.caption-top { top:13%;right:1%;transform:rotate(90deg) translateX(50%);transform-origin:right center; }
.caption-bottom { bottom:11%;left:1%;transform:rotate(-90deg) translateX(-50%);transform-origin:left center; }
.finale-section .cake { z-index:2; width:min(350px,78vw);height:315px;margin:0;filter:drop-shadow(0 20px 34px rgba(0,0,0,.38));animation:cake-float 5.6s ease-in-out infinite; }
.finale-section .cake::before { top:9%;right:-19%;bottom:3%;left:-19%;border:1px solid rgba(255,220,143,.22);background:radial-gradient(ellipse,rgba(255,201,108,.18),rgba(222,116,168,.08) 45%,transparent 73%);box-shadow:0 0 0 25px rgba(255,220,120,.024),0 0 0 60px rgba(126,203,220,.025);animation:cake-aura 5.3s ease-in-out infinite; }
.finale-section .cake::after { right:3%;bottom:23px;left:3%;height:24px;background:radial-gradient(ellipse,rgba(255,212,138,.36),rgba(242,164,206,.15) 44%,transparent 72%);filter:blur(9px); }
.finale-section .cake-upper { bottom:128px;background:linear-gradient(100deg,#558bb8 0%,#829bd3 30%,#c087c1 60%,#6989bd 100%); }
.finale-section .cake-lower { bottom:44px;background:linear-gradient(100deg,#ab4779 0%,#e7779f 24%,#f2b67c 49%,#da7d9f 70%,#78549f 100%); }
.finale-section .cake-tier::before { background:linear-gradient(180deg,#fff4d5,#f5d9e9 53%,#d5ddf2); }
.finale-section .cake-plate { bottom:28px; }
.finale-section .candles { bottom:177px; }
.finale-section .cake-sparkles i { opacity:.92; }
.wish-orbit-star { position:absolute;z-index:3;color:#fff5dc;text-shadow:0 0 16px currentColor,0 0 34px currentColor;animation:wish-star-float 4.8s ease-in-out infinite; }
.wish-orbit-star.star-one { top:22%;left:13%;font-size:25px; }
.wish-orbit-star.star-two { top:33%;right:10%;color:#b5e8f0;font-size:20px;animation-delay:-1.4s; }
.wish-orbit-star.star-three { right:20%;bottom:22%;color:#f4bbd7;font-size:17px;animation-delay:-3s; }
.wish-fireworks { position:absolute;z-index:2;inset:10% 3% 14%;overflow:hidden;pointer-events:none; }
.wish-fireworks i { position:absolute;top:30%;left:23%;width:1px;height:1px;border-radius:50%;opacity:0; }
.wish-fireworks i:nth-child(2) { top:24%;left:75%;color:#98dfe3; }
.wish-fireworks i:nth-child(3) { top:72%;left:54%;color:#f2a4ce; }
.wish-fireworks i::before { position:absolute;inset:-58px;border-radius:50%;background:repeating-conic-gradient(from 2deg,currentColor 0deg 1.1deg,transparent 1.7deg 18deg);-webkit-mask:radial-gradient(circle,transparent 0 19%,#000 24% 28%,transparent 33%);mask:radial-gradient(circle,transparent 0 19%,#000 24% 28%,transparent 33%);content:""; }
.wish-fireworks i::after { position:absolute;inset:-10px;border:1px solid currentColor;border-radius:50%;box-shadow:0 0 20px currentColor;content:""; }
.wish-section.is-blown .wish-fireworks i { animation:wish-firework-boom 1.15s cubic-bezier(.16,.7,.25,1) both; }
.wish-section.is-blown .wish-fireworks i:nth-child(2) { animation-delay:.22s; }
.wish-section.is-blown .wish-fireworks i:nth-child(3) { animation-delay:.43s; }
.wish-section.is-blown .wish-fireworks i::before { animation:wish-firework-rays 1.15s cubic-bezier(.16,.7,.25,1) both; }
.wish-section.is-blown .wish-fireworks i:nth-child(2)::before { animation-delay:.22s; }
.wish-section.is-blown .wish-fireworks i:nth-child(3)::before { animation-delay:.43s; }
.wish-section.is-blown .cake { animation:cake-celebrate 1.1s cubic-bezier(.2,.7,.2,1) both; }
.wish-section.is-blown .candles i { animation:flame-out .58s ease-out both; }
.wish-section.is-blown .cake-sparkles i { animation:sparkle-burst .95s ease-out both; }
.wish-section.is-blown .wish-art::before { animation:wish-halo-pop 1.2s cubic-bezier(.2,.7,.2,1) both; }
.wish-section.is-blown .wish-orbit-star { animation:wish-star-burst 1s ease-out both; }
.wish-bottomline { z-index:2; }
.wish-section.is-blown .wish-bottomline span:last-child { animation:finale-twinkle 1.2s ease-in-out infinite; }
.finale-message-slide { isolation:isolate; background:radial-gradient(ellipse at 18% 72%,rgba(66,163,166,.19),transparent 32%),radial-gradient(ellipse at 83% 24%,rgba(210,115,169,.17),transparent 37%),linear-gradient(128deg,rgba(15,25,46,.45),rgba(28,20,44,.48)); }
.note-layout { display:grid;grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr);align-items:center;gap:clamp(36px,8vw,110px);width:min(1100px,100%);margin:auto; }
.note-side { position:relative;min-height:360px;display:flex;flex-direction:column;justify-content:center;padding:35px 0 35px 36px; }
.note-number { color:#89d3df;font:700 8px/1 var(--sans);letter-spacing:.2em; }
.note-number i { color:#596d8b;font-style:normal; }
.note-constellation { position:relative;width:100%;max-width:325px;aspect-ratio:1;margin:35px 0 24px; }
.note-constellation::before,.note-constellation::after { position:absolute;top:50%;left:50%;width:88%;aspect-ratio:1;border:1px solid rgba(123,202,216,.23);border-radius:50%;content:"";transform:translate(-50%,-50%) scaleY(.67) rotate(-20deg); }
.note-constellation::after { width:64%;border-color:rgba(230,162,200,.24);transform:translate(-50%,-50%) scaleY(.67) rotate(35deg); }
.note-constellation i { position:absolute;z-index:1;color:#f4d47c;font:normal 20px/1 Georgia,serif;text-shadow:0 0 18px currentColor;animation:finale-twinkle 4s ease-in-out infinite; }
.note-constellation i:nth-child(1) { top:19%;left:25%;font-size:31px; }
.note-constellation i:nth-child(2) { top:42%;right:12%;color:#a7e0e3;animation-delay:-1.2s; }
.note-constellation i:nth-child(3) { top:55%;left:29%;color:#e7a6ce;font-size:12px;animation-delay:-2s; }
.note-constellation i:nth-child(4) { right:30%;bottom:14%;color:#c6b7ff;font-size:25px;animation-delay:-.7s; }
.note-constellation i:nth-child(5) { top:32%;left:56%;color:#fff;font-size:8px; }
.note-side > p { max-width:340px;margin:0;color:#e8e7f1;font:500 clamp(22px,2.8vw,34px)/1.25 "Cormorant Garamond",var(--serif); }
.note-side > p em { color:#eda9cf;font-weight:500; }
.note-side-caption { margin-top:17px;color:#8196ae;font:700 7px/1 var(--sans);letter-spacing:.19em; }
.finale-section .closing-message { width:100%;max-width:730px;margin:0;padding:clamp(34px,5vw,62px);border:1px solid rgba(200,187,241,.25);border-radius:4px 32px 4px 32px;background:linear-gradient(140deg,rgba(42,38,73,.8),rgba(27,35,61,.84) 54%,rgba(44,29,61,.8));box-shadow:0 30px 85px rgba(3,8,22,.32),inset 0 1px rgba(255,255,255,.08);text-align:left; }
.finale-section .closing-message::before { top:22px;left:auto;right:22px;width:7px;height:7px;background:#f3cd7a;box-shadow:0 0 16px rgba(243,205,122,.8); }
.finale-section .closing-message::after { top:auto;right:auto;bottom:22px;left:22px;width:6px;height:6px;background:#87d7de;box-shadow:0 0 16px rgba(135,215,222,.75); }
.finale-section .closing-star { margin:0 0 20px;color:#f5d17f;font-size:24px; }
.finale-section .closing-message .eyebrow { margin:0 0 16px;color:#a4dce2;font:700 8px/1.6 var(--sans);letter-spacing:.18em;text-transform:uppercase; }
.finale-section .closing-message h2 { margin:0;color:#fbf4ff;font:500 clamp(42px,5.2vw,67px)/.99 "Bodoni Moda",var(--serif);letter-spacing:-.045em; }
.finale-section .closing-message h2 .pink { color:#f0acd0;background:linear-gradient(100deg,#f2bbce,#e99ad1 65%,#b7caff);background-clip:text;-webkit-text-fill-color:transparent; }
.finale-section .closing-message > p:not(.eyebrow) { min-height:0;max-width:55ch;margin:19px 0 0;color:#c4ccdc;font:400 clamp(14px,1.3vw,17px)/1.65 var(--sans); }
.finale-section .closing-message > .closing-extra { color:#9eacc3; }
.finale-section .closing-message .closing-signature { margin:24px 0 0;color:#f4d17e;font:500 18px/1.3 "Cormorant Garamond",var(--serif); }
.finale-section .closing-message .closing-signature em { color:#9ed9f0;font-family:"Parisienne",cursive;font-size:24px; }
.finale-section .finale-next { display:inline-flex;align-items:center;gap:12px;margin-top:23px;padding:11px 0 7px;border:0;border-bottom:1px solid rgba(132,217,220,.45);border-radius:0;color:#9fe0df;font:700 8px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase; }
.finale-next:hover { color:#fff1d0;border-color:#f5d17f;transform:translateY(-2px); }
.note-edge-star { position:absolute;top:23%;right:8%;color:#eeb1d3;font-size:20px;text-shadow:0 0 15px currentColor;animation:finale-twinkle 4s ease-in-out infinite; }
.love-you-slide { isolation:isolate;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 48%,rgba(186,86,152,.28),transparent 37%),radial-gradient(ellipse at 17% 80%,rgba(255,196,110,.12),transparent 34%),radial-gradient(ellipse at 84% 22%,rgba(83,176,196,.19),transparent 35%),linear-gradient(145deg,#101027 0%,#24152f 48%,#102530 100%); }
.love-you-slide::before,.love-you-slide::after { z-index:-1;width:min(78vw,920px);border-color:rgba(245,203,126,.19);box-shadow:0 0 0 42px rgba(245,203,126,.025),0 0 0 92px rgba(133,209,220,.022);animation:love-you-orbit 58s linear infinite; }
.love-you-slide::after { width:min(59vw,680px);border-color:rgba(180,157,238,.22);animation-duration:43s; }
.love-you-content { position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center; }
.finale-section .love-you-kicker { margin:0 0 16px;color:#f3c875;font:700 9px/1.5 var(--sans);letter-spacing:.33em; }
.love-you-overline { color:#9bb5cb;font:700 7px/1.5 var(--sans);letter-spacing:.18em; }
.finale-section .love-you-slide h2 { margin:clamp(25px,4vh,45px) 0 0;color:#fff8f2;font:500 clamp(106px,17vw,205px)/.67 "Bodoni Moda",var(--serif);letter-spacing:-.075em;text-shadow:0 11px 55px rgba(8,9,28,.25); }
.finale-section .love-you-slide h2 em { display:inline-block;padding:.17em .1em .19em 0;background:linear-gradient(105deg,#f6cd78 0%,#ef9ac7 48%,#a8dce7 100%);background-clip:text;-webkit-text-fill-color:transparent;font-style:italic; }
.finale-section .love-you-note { max-width:470px;margin:30px 0 0;color:#c2cadc;font:400 clamp(14px,1.4vw,17px)/1.65 var(--sans); }
.finale-section .love-you-again { display:inline-flex;min-height:44px;align-items:center;gap:14px;margin-top:27px;padding:0 23px;border:1px solid rgba(230,178,212,.56);border-radius:999px;color:#fae7f2;background:linear-gradient(110deg,rgba(205,109,165,.13),rgba(109,153,208,.11));font:700 8px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;transition:transform .3s,background .3s,border-color .3s,box-shadow .3s; }
.finale-section .love-you-again span { color:#f3cf79;font-size:14px; }
.finale-section .love-you-again:hover { transform:translateY(-3px);border-color:#f3cf79;background:linear-gradient(110deg,rgba(205,109,165,.24),rgba(109,153,208,.2));box-shadow:0 12px 35px rgba(171,111,174,.18); }
.finale-section .love-you-slide .site-footer { width:auto;margin:clamp(38px,7vh,70px) 0 0;padding:0;color:#8592aa;font:700 7px/1.5 var(--sans);letter-spacing:.2em; }
.finale-section .love-you-slide .site-footer span { padding-left:8px;color:#f3cf79; }
.love-you-side-note { position:absolute;z-index:2;top:50%;color:rgba(197,188,224,.57);font:700 7px/1 var(--sans);letter-spacing:.25em;writing-mode:vertical-rl; }
.love-you-side-note.left { left:clamp(18px,4vw,56px);transform:rotate(180deg); }
.love-you-side-note.right { right:clamp(18px,4vw,56px); }
.finale-section .finale-visible .wish-copy,.finale-section .finale-visible .wish-art,.finale-section .finale-visible .note-side,.finale-section .finale-visible .closing-message,.finale-section .finale-visible .love-you-content { animation:finale-scene-arrive .8s cubic-bezier(.2,.7,.2,1) both; }
.finale-section .finale-visible .wish-art,.finale-section .finale-visible .closing-message,.finale-section .finale-visible .love-you-content { animation-delay:.1s; }
@keyframes finale-twinkle { 0%,100% { opacity:.42;scale:.88; } 50% { opacity:1;scale:1.16; } }
@keyframes finale-scene-arrive { from { opacity:0;translate:0 20px;filter:blur(5px); } to { opacity:1;translate:0 0;filter:blur(0); } }
@keyframes wish-halo-breathe { 0%,100% { scale:.93;opacity:.7; } 50% { scale:1.08;opacity:1; } }
@keyframes wish-halo-pop { 0% { scale:.7;opacity:.25; } 48% { scale:1.17;opacity:1; } 100% { scale:1;opacity:.85; } }
@keyframes wish-orbit-sway { from { rotate:-9deg;scale:.96 .64; } to { rotate:8deg;scale:1.02 .68; } }
@keyframes wish-star-float { 0%,100% { translate:0 0;opacity:.6;scale:.92; } 50% { translate:0 -10px;opacity:1;scale:1.12; } }
@keyframes wish-star-burst { 0% { opacity:1;scale:1; } 100% { opacity:0;translate:0 -34px;scale:.1; } }
@keyframes wish-firework-boom { 0% { opacity:0;scale:.2; } 18% { opacity:.95;scale:.7; } 42% { opacity:.85;scale:1.08; } 100% { opacity:0;scale:1.48; } }
@keyframes wish-firework-rays { 0% { opacity:0;scale:.18;rotate:-9deg; } 24% { opacity:.95; } 100% { opacity:0;scale:1.28;rotate:7deg; } }
@media (max-width:850px) {
  .finale-progress { grid-template-columns:auto 1fr auto;gap:18px;height:64px;padding-inline:22px; }
  .finale-progress-label { display:none; }
  .finale-progress ol { gap:clamp(14px,4vw,32px); }
  .finale-progress li a { font-size:6px; }
  .finale-progress-rule { width:25px; }
  .wish-layout { grid-template-columns:minmax(0,1fr) minmax(290px,.85fr);gap:25px; }
  .finale-section .wish-copy h1 { font-size:clamp(58px,9vw,88px); }
  .wish-art { min-height:400px; }
  .finale-section .cake { width:min(315px,47vw);height:290px; }
  .finale-section .cake-upper { bottom:119px; }
  .finale-section .cake-lower { bottom:41px; }
  .finale-section .candles { bottom:167px; }
  .note-layout { grid-template-columns:minmax(170px,.65fr) minmax(0,1.35fr);gap:35px; }
}
@media (max-width:620px) {
  .finale-section:not([hidden]) { scroll-snap-type:y mandatory; }
  .finale-progress { grid-template-columns:auto 1fr;height:58px;gap:10px;padding-inline:17px; }
  .finale-brand { font-size:25px; }
  .finale-progress ol { justify-content:space-between;gap:8px; }
  .finale-progress li a { flex-direction:column;align-items:flex-start;gap:4px;padding:10px 0 8px;font-size:5.5px;letter-spacing:.08em; }
  .finale-progress li a span { font-size:7px; }
  .finale-progress-rule { display:none; }
  .finale-section .finale-page { min-height:100svh;padding:84px 23px 58px; }
  .finale-section .wish-section { align-items:stretch; }
  .wish-layout { grid-template-columns:minmax(0,1fr);gap:0;width:min(100%,460px); }
  .wish-copy { max-width:100%; }
  .finale-section .finale-intro { gap:6px;margin-bottom:23px; }
  .finale-section .finale-kicker { font-size:7px;letter-spacing:.16em; }
  .finale-section .finale-chapter { padding-left:24px;font-size:6px; }
  .finale-section .wish-copy > .eyebrow { margin-bottom:9px;font-size:7px; }
  .finale-section .wish-copy h1 { font-size:clamp(54px,13.6vw,76px); }
  .finale-section .wish-subtitle { max-width:33ch;margin:13px 0 15px;font-size:12px;line-height:1.55; }
  .finale-section .wish-actions .pill { min-height:42px; }
  .finale-section .wish-hint { margin-top:8px;font-size:8px; }
  .finale-section .closing-invite { margin-top:7px; }
  .wish-art { min-height:clamp(235px,38vh,310px);margin-top:2px; }
  .finale-section .cake { width:min(270px,72vw);height:248px; }
  .finale-section .cake-upper { bottom:101px; }
  .finale-section .cake-lower { bottom:36px; }
  .finale-section .candles { bottom:142px; }
  .finale-section .cake-plate { bottom:25px; }
  .wish-art-orbit { width:min(98%,330px); }
  .wish-art-orbit.orbit-two { width:min(78%,270px); }
  .wish-art-caption { font-size:5px; }
  .caption-top { right:0; }
  .caption-bottom { left:0; }
  .wish-bottomline { bottom:19px;gap:8px;width:calc(100% - 46px);font-size:5px;letter-spacing:.1em; }
  .wish-bottomline i { width:15px; }
  .wish-fireworks { inset:5% 0 8%; }
  .note-layout { grid-template-columns:minmax(0,1fr);gap:16px;width:min(100%,480px); }
  .note-side { min-height:0;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:7px 16px;padding:0; }
  .note-number { grid-column:1/-1; }
  .note-constellation { width:82px;margin:0; }
  .note-constellation i:nth-child(1) { font-size:22px; }
  .note-side > p { font-size:19px; }
  .note-side-caption { grid-column:2;margin:0;font-size:5px; }
  .finale-section .closing-message { padding:26px 24px;border-radius:3px 22px 3px 22px; }
  .finale-section .closing-message .eyebrow { font-size:7px; }
  .finale-section .closing-message h2 { font-size:clamp(37px,9vw,51px); }
  .finale-section .closing-message > p:not(.eyebrow) { margin-top:14px;font-size:13px;line-height:1.55; }
  .finale-section .closing-message .closing-signature { margin-top:16px;font-size:16px; }
  .finale-section .closing-message .closing-signature em { font-size:21px; }
  .finale-section .finale-next { margin-top:17px; }
  .note-edge-star { top:15%;right:6%; }
  .finale-section .love-you-slide { padding-inline:22px; }
  .finale-section .love-you-kicker { font-size:7px;letter-spacing:.25em; }
  .love-you-overline { max-width:30ch;font-size:5px;line-height:1.8; }
  .finale-section .love-you-slide h2 { font-size:clamp(100px,24vw,155px); }
  .finale-section .love-you-note { max-width:34ch;margin-top:24px;font-size:13px; }
  .finale-section .love-you-again { min-height:42px;margin-top:22px;padding-inline:18px;font-size:7px; }
  .finale-section .love-you-slide .site-footer { max-width:32ch;margin-top:34px;font-size:6px;line-height:1.8; }
  .love-you-side-note { font-size:5px; }
}
@media (prefers-reduced-motion:reduce) {
  .finale-section:not([hidden]) { scroll-behavior:auto;scroll-snap-type:none; }
  .finale-atmosphere i,.wish-art::before,.wish-art-orbit,.wish-orbit-star,.wish-section.is-blown .wish-fireworks i,.wish-section.is-blown .wish-fireworks i::before,.wish-section.finale-visible .wish-copy,.wish-section.finale-visible .wish-art,.finale-message-slide.finale-visible .note-side,.finale-message-slide.finale-visible .closing-message,.love-you-slide.finale-visible .love-you-content,.finale-section .cake,.finale-section .cake::before,.note-constellation i,.note-edge-star,.love-you-slide::before,.love-you-slide::after,.love-you-orbit i { animation:none !important; }
}

/* Compact floating chapter rail replaces the full-width finale header. */
.finale-progress {
  top:50%;left:clamp(10px,2vw,28px);display:flex;width:52px;height:auto;flex-direction:column;align-items:center;gap:0;
  margin:0;padding:12px 8px;border:1px solid rgba(183,197,231,.2);border-radius:999px;
  background:linear-gradient(160deg,rgba(16,24,47,.84),rgba(23,23,46,.76));
  box-shadow:0 12px 36px rgba(3,8,22,.32),inset 0 1px rgba(255,255,255,.09);
  transform:translateY(-50%);
}
.finale-progress .finale-brand,.finale-progress-label,.finale-progress-rule { display:none; }
.finale-progress ol { position:relative;display:flex;flex-direction:column;align-items:center;gap:11px;margin:0;padding:0; }
.finale-progress ol::before { position:absolute;z-index:0;top:17px;bottom:17px;left:50%;width:1px;background:linear-gradient(180deg,rgba(114,204,218,.18),rgba(227,155,199,.42),rgba(244,204,123,.18));content:""; }
.finale-progress li { position:relative;z-index:1; }
.finale-progress li a { display:grid;width:32px;height:32px;place-items:center;padding:0;border:1px solid rgba(159,178,213,.23);border-radius:50%;color:#a8b5cb;background:rgba(11,17,34,.82);font-size:0;letter-spacing:0;transition:transform .28s,border-color .28s,background .28s,box-shadow .28s,color .28s; }
.finale-progress li a b { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap; }
.finale-progress li a span { color:inherit;font:700 8px/1 var(--sans); }
.finale-progress li a[aria-current="page"] { border-color:rgba(245,207,133,.85);color:#fff0c6;background:linear-gradient(145deg,rgba(210,139,183,.25),rgba(100,154,193,.26));box-shadow:0 0 17px rgba(221,167,203,.2),inset 0 1px rgba(255,255,255,.16);transform:scale(1.12); }
.finale-progress li a[aria-current="page"]::after { display:none; }
.finale-progress li a:hover { border-color:rgba(153,218,224,.7);color:#fff;transform:scale(1.08); }
@media (max-width:620px) {
  .finale-progress { top:50%;bottom:auto;left:7px;width:38px;flex-direction:column;padding:9px 5px;transform:translateY(-50%); }
  .finale-progress ol { flex-direction:column;gap:8px; }
  .finale-progress ol::before { top:15px;right:auto;bottom:15px;left:50%;width:1px;height:auto;background:linear-gradient(180deg,rgba(114,204,218,.18),rgba(227,155,199,.42),rgba(244,204,123,.18)); }
  .finale-progress li a { width:26px;height:26px; }
  .finale-section .finale-page { padding-left:58px; }
  .finale-section .love-you-slide h2 { font-size:clamp(68px,21vw,116px); }
}

/* Birthday wish tune-up: calmer type, jewel-toned cake, breath-triggered celebration. */
.finale-section .wish-copy h1 { font-size:clamp(52px,6.2vw,84px);line-height:.94;letter-spacing:-.055em; }
.finale-section .wish-copy > .eyebrow { color:#efc0dd; }
.finale-section .wish-subtitle { color:#c5cde1; }
.finale-section .wish-hint { position:relative;max-width:38ch;margin-top:18px;padding-left:17px;color:#9bb2ca;font-size:9px;line-height:1.65; }
.finale-section .wish-hint::before { position:absolute;top:.1em;left:0;color:#f4ce79;content:"✦";font-size:10px; }
.finale-section .wish-section:not(.is-blown) { cursor:pointer; }
.finale-section .wish-section:not(.is-blown) .wish-art { cursor:pointer; }
.finale-section .cake { width:min(332px,76vw);height:304px; }
.finale-section .cake-upper {
  border:1px solid rgba(219,236,255,.74);border-bottom:5px solid rgba(49,61,105,.7);
  background:radial-gradient(circle at 20% 68%,rgba(255,235,174,.94) 0 3px,transparent 4px),radial-gradient(circle at 80% 68%,rgba(255,235,174,.94) 0 3px,transparent 4px),linear-gradient(105deg,#4e91b9 0%,#68b7c5 26%,#9c9de0 56%,#d38dbd 76%,#6985bf 100%);
  box-shadow:inset 0 5px 16px rgba(255,255,255,.42),inset 0 -13px 18px rgba(43,50,99,.32),0 8px 18px rgba(7,9,25,.32),0 0 24px rgba(139,203,237,.21);
}
.finale-section .cake-lower {
  border:1px solid rgba(255,220,196,.78);border-bottom:6px solid rgba(105,42,88,.67);
  background:radial-gradient(circle at 11% 68%,#ffe3a5 0 4px,transparent 5px),radial-gradient(circle at 31% 68%,#fff0d0 0 3px,transparent 4px),radial-gradient(circle at 50% 68%,#ffe3a5 0 4px,transparent 5px),radial-gradient(circle at 69% 68%,#fff0d0 0 3px,transparent 4px),radial-gradient(circle at 89% 68%,#ffe3a5 0 4px,transparent 5px),linear-gradient(105deg,#9f3e78 0%,#d94e88 21%,#ef7895 43%,#f2a66f 61%,#d75c8d 80%,#7c4e9d 100%);
  box-shadow:inset 0 5px 16px rgba(255,255,255,.38),inset 0 -18px 22px rgba(78,23,71,.24),0 10px 23px rgba(7,9,25,.31),0 0 28px rgba(242,164,206,.2);
}
.finale-section .cake-tier::before { height:22px;background:linear-gradient(180deg,#fff9e6 0%,#ffe4dd 48%,#eadfff 100%);box-shadow:0 3px 8px rgba(53,34,75,.22),0 0 15px rgba(255,232,196,.44); }
.finale-section .cake-icing i { background:linear-gradient(180deg,#fff9e9,#ffdfdd 65%,#f5c9dc);box-shadow:0 2px 4px rgba(79,35,83,.15); }
.finale-section .cake-pearls b { width:8px;height:8px;background:#ffe29a;box-shadow:0 0 12px rgba(255,224,138,.9),inset 0 1px 2px rgba(255,255,255,.85); }
.finale-section .cake-pearls b:nth-child(even) { background:#a8e6e5;box-shadow:0 0 12px rgba(151,225,225,.78),inset 0 1px 2px rgba(255,255,255,.8); }
.finale-section .cake-piped { top:29px;color:#fff0bd;font-size:17px;letter-spacing:.04em;text-shadow:0 0 10px rgba(255,224,138,.7); }
.finale-section .cake-plate { border-color:rgba(210,236,255,.92);background:linear-gradient(180deg,#fff4e8,#c2d9ed 47%,#7387ad);box-shadow:0 10px 25px rgba(0,0,0,.35),0 0 28px rgba(158,217,240,.32); }
.finale-section .candles span { width:9px;border:1px solid rgba(255,255,255,.6);background:repeating-linear-gradient(135deg,#fff9df 0 5px,#f2a8c8 5px 9px);box-shadow:inset 1px 0 rgba(255,255,255,.9),2px 4px 8px rgba(0,0,0,.25),0 0 12px rgba(255,255,255,.2); }
.finale-section .candles span:nth-child(2) { background:repeating-linear-gradient(135deg,#f4ffff 0 5px,#83d5df 5px 9px); }
.finale-section .candles span:nth-child(3) { background:repeating-linear-gradient(135deg,#fff9df 0 5px,#e2ae60 5px 9px); }
.finale-section .candles i { background:radial-gradient(ellipse at 50% 70%,#fffde4 0 17%,#ffe777 34%,#ffad55 68%,#fa6e83 94%);box-shadow:0 0 12px 4px rgba(255,218,109,.62),0 0 34px rgba(255,156,91,.54); }
.finale-section .candles i::after { position:absolute;top:-2px;left:4px;width:2px;height:18px;border-radius:50%;background:linear-gradient(180deg,rgba(229,233,250,0),rgba(211,226,247,.78));content:"";opacity:0;filter:blur(1px); }
.wish-section.is-listening .candles i { animation:flame-listening .4s ease-in-out infinite alternate; }
.wish-section.is-listening .cake::before { animation:cake-aura 1.7s ease-in-out infinite; }
.wish-section.is-blown .cake { animation:cake-blow-response 1.25s cubic-bezier(.18,.72,.22,1) both; }
.wish-section.is-blown .candles span:nth-child(2) i { animation-delay:.07s; }
.wish-section.is-blown .candles span:nth-child(3) i { animation-delay:.14s; }
.wish-section.is-blown .candles span::after { position:absolute;top:-20px;left:3px;width:2px;height:20px;border-radius:50%;background:linear-gradient(180deg,rgba(210,222,242,.82),transparent);content:"";opacity:0;filter:blur(1px);animation:candle-smoke 1.25s .2s ease-out both; }
.wish-section.is-blown .candles span:nth-child(2)::after { animation-delay:.31s; }
.wish-section.is-blown .candles span:nth-child(3)::after { animation-delay:.42s; }
.wish-section.is-blown .cake-sparkles i:nth-child(2n) { animation-delay:.12s; }
.wish-section.is-blown .wish-hint { color:#b8e4dc; }
@keyframes flame-listening { from { transform:rotate(-13deg) scale(.86);filter:brightness(.9); } to { transform:rotate(14deg) scale(1.2);filter:brightness(1.3); } }
@keyframes cake-blow-response { 0% { transform:translateY(0) scale(1) rotate(0); } 15% { transform:translate(-7px,-2px) scale(.985) rotate(-2deg); } 39% { transform:translate(8px,-17px) scale(1.055) rotate(2.4deg); } 62% { transform:translate(-3px,-7px) scale(1.02) rotate(-.8deg); } 82% { transform:translate(2px,-2px) scale(1.01) rotate(.3deg); } 100% { transform:translateY(0) scale(1) rotate(0); } }
@keyframes candle-smoke { 0% { opacity:0;transform:translate(0,6px) scale(.5); } 22% { opacity:.75; } 100% { opacity:0;transform:translate(8px,-25px) scale(1.4); } }
@keyframes flame-out { 0% { opacity:1;transform:translateY(0) scale(1) rotate(0); } 22% { opacity:1;transform:translateY(-1px) scale(1.15) rotate(12deg); } 100% { opacity:0;transform:translate(8px,-21px) scale(.08) rotate(35deg); } }
@media (max-width:850px) {
  .finale-section .wish-copy h1 { font-size:clamp(50px,7.3vw,72px); }
}
@media (max-width:620px) {
  .finale-section .wish-copy h1 { font-size:clamp(43px,12vw,62px);line-height:.98; }
  .finale-section .wish-hint { max-width:34ch;margin-top:9px;font-size:8px; }
  .finale-section .cake { width:min(260px,68vw);height:238px; }
  .finale-section .cake-upper { bottom:98px; }
  .finale-section .cake-lower { bottom:34px; }
  .finale-section .candles { bottom:139px; }
  .finale-section .cake-plate { bottom:23px; }
}
@media (prefers-reduced-motion:reduce) {
  .wish-section.is-listening .candles i { animation:none; }
  .wish-section.is-blown .cake,.wish-section.is-blown .candles span::after { animation:none; }
}

/* Finale scene 02 is a free-floating poem, not a letter or a framed panel. */
.finale-message-slide { position:relative;display:grid;place-items:center;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 15% 65%,rgba(49,157,165,.22),transparent 34%),radial-gradient(ellipse at 84% 25%,rgba(188,77,147,.22),transparent 38%),radial-gradient(ellipse at 52% 96%,rgba(210,164,93,.11),transparent 31%),linear-gradient(130deg,#101b32 0%,#1d1835 50%,#182337 100%); }
.words-sky { position:absolute;z-index:-1;inset:0;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 50% 48%,rgba(178,126,187,.1),transparent 50%),linear-gradient(115deg,transparent 12%,rgba(118,199,214,.045) 45%,transparent 78%); }
.words-sky::before,.words-sky::after { position:absolute;top:50%;left:50%;width:min(100vw,1160px);height:min(48vw,490px);border-top:1px solid rgba(131,204,221,.16);border-radius:50%;content:"";transform:translate(-50%,-50%) rotate(-13deg);animation:words-orbit-drift 25s ease-in-out infinite alternate; }
.words-sky::after { width:min(78vw,900px);height:min(40vw,400px);border-color:rgba(233,157,204,.13);transform:translate(-50%,-50%) rotate(12deg);animation-duration:32s;animation-direction:alternate-reverse; }
.words-sky span { position:absolute;width:6px;height:6px;border-radius:50%;background:#a9e3e5;box-shadow:0 0 16px 4px rgba(120,214,222,.56);animation:words-star-drift 10s ease-in-out infinite; }
.words-sky span:first-of-type { top:24%;left:22%; }
.words-sky span:last-of-type { right:20%;bottom:24%;background:#f3c976;box-shadow:0 0 16px 4px rgba(243,201,118,.5);animation-delay:-5s; }
.words-sky i { position:absolute;color:#f1d17b;font:normal 18px/1 Georgia,serif;text-shadow:0 0 17px currentColor;animation:finale-twinkle 4.5s ease-in-out infinite; }
.words-sky i:nth-child(1) { top:17%;left:15%;font-size:29px; }
.words-sky i:nth-child(2) { top:26%;right:19%;color:#a7e0e4;animation-delay:-1.8s; }
.words-sky i:nth-child(3) { top:40%;left:9%;color:#fff;font-size:9px;animation-delay:-2.4s; }
.words-sky i:nth-child(4) { right:11%;bottom:34%;color:#e8a8d0;font-size:25px;animation-delay:-.9s; }
.words-sky i:nth-child(5) { bottom:17%;left:29%;color:#b7d9ff;animation-delay:-3s; }
.words-sky i:nth-child(6) { right:31%;bottom:14%;color:#fff;font-size:8px;animation-delay:-1.3s; }
.words-sky i:nth-child(7) { top:14%;left:51%;color:#d7bdff;font-size:17px;animation-delay:-2.6s; }
.finale-words-stage { position:relative;z-index:1;width:min(980px,100%);margin:auto;text-align:center; }
.words-kicker { display:flex;align-items:center;justify-content:center;gap:12px;margin:0 0 clamp(27px,5vh,49px);color:#a9c3d9;font:700 8px/1.4 var(--sans);letter-spacing:.2em; }
.words-kicker span { color:#efbd79; }
.words-kicker i { width:38px;height:1px;background:linear-gradient(90deg,transparent,rgba(169,195,217,.65)); }
.words-kicker i:last-child { transform:rotate(180deg); }
.final-words-title { display:flex;flex-direction:column;align-items:center;gap:0;margin:0;color:#f8f2fd;font-family:"Bodoni Moda","Cormorant Garamond",var(--serif);font-weight:500;line-height:.92;letter-spacing:-.045em; }
.word-line { display:block;opacity:0; }
.finale-message-slide.finale-visible .word-line { animation:words-arrive .75s cubic-bezier(.2,.72,.2,1) both; }
.finale-message-slide.finale-visible .word-one { animation-delay:.04s; }
.finale-message-slide.finale-visible .word-two { animation-delay:.18s; }
.finale-message-slide.finale-visible .word-three { animation-delay:.32s; }
.finale-message-slide.finale-visible .word-four { animation-delay:.46s; }
.word-one { font-size:clamp(47px,6.5vw,82px); }
.word-two { margin-top:.06em;color:#f2bb7c;font-size:clamp(58px,8.1vw,102px); }
.word-two em { color:#e994c6;font-family:"Cormorant Garamond",var(--serif);font-weight:500; }
.word-comma { color:#9fdce6; }
.word-three { margin-top:.1em;color:#d7c8f1;font-size:clamp(39px,5.7vw,72px); }
.word-three i { color:#a9dfe3;font-family:"Cormorant Garamond",var(--serif);font-size:1.12em;font-weight:500; }
.word-four { margin-top:.02em;color:#fff1d1;font-size:clamp(58px,9.3vw,116px); }
.word-four b { color:#f0a7d0;font-family:"Parisienne","Cormorant Garamond",var(--serif);font-size:1.14em;font-weight:400;letter-spacing:0; }
.words-afterglow { margin:clamp(22px,4vh,38px) auto 0;color:#adbad0;font:400 clamp(12px,1.35vw,15px)/1.75 var(--sans);letter-spacing:.025em;opacity:0; }
.finale-message-slide.finale-visible .words-afterglow { animation:words-arrive .72s .56s cubic-bezier(.2,.72,.2,1) both; }
.finale-section .finale-message-slide .finale-next { margin-top:22px;color:#e7bdd7;border-color:rgba(231,189,215,.32);opacity:0; }
.finale-message-slide.finale-visible .finale-next { animation:words-arrive .65s .7s cubic-bezier(.2,.72,.2,1) both; }
.finale-section .finale-message-slide .finale-next:hover { color:#fff2ce;border-color:#f3cc7b; }
@keyframes words-arrive { from { opacity:0;translate:0 22px;filter:blur(8px); } 70% { opacity:1;filter:blur(0); } to { opacity:1;translate:0 0;filter:blur(0); } }
@keyframes words-orbit-drift { from { rotate:-2deg;scale:.98 1; } to { rotate:2deg;scale:1.025 1.06; } }
@keyframes words-star-drift { 0%,100% { translate:0 0;scale:.8;opacity:.45; } 50% { translate:12px -18px;scale:1.25;opacity:1; } }
@media (max-width:620px) {
  .words-kicker { gap:8px;margin-bottom:29px;font-size:6px;letter-spacing:.14em; }
  .words-kicker i { width:20px; }
  .final-words-title { gap:.06em;line-height:1; }
  .word-one { font-size:clamp(39px,10.4vw,58px); }
  .word-two { font-size:clamp(48px,12vw,68px); }
  .word-three { font-size:clamp(31px,8.3vw,47px); }
  .word-four { font-size:clamp(58px,15vw,84px); }
  .words-afterglow { margin-top:25px;font-size:11px; }
  .words-sky::before { width:130vw;height:70vw; }
  .words-sky::after { width:108vw;height:63vw; }
}
@media (prefers-reduced-motion:reduce) {
  .words-sky::before,.words-sky::after,.words-sky span,.finale-message-slide.finale-visible .word-line,.finale-message-slide.finale-visible .words-afterglow,.finale-message-slide.finale-visible .finale-next { animation:none;opacity:1;filter:none;translate:none; }
}

/* Keep scene 02's original message, presented as modest open-air typography. */
.finale-words-stage { width:min(760px,100%);padding:0;margin:auto;background:none;border:0;border-radius:0;box-shadow:none;text-align:center; }
.finale-section .words-kicker { display:block;margin:0 0 clamp(18px,3vh,28px);color:#a9d9e1;font:italic 500 clamp(15px,1.7vw,19px)/1.4 "Cormorant Garamond",var(--serif);letter-spacing:.045em; }
.finale-section .final-words-title { display:block;margin:0;color:#fbf4ff;font:500 clamp(33px,4.5vw,55px)/1.05 "Bodoni Moda","Cormorant Garamond",var(--serif);letter-spacing:-.035em; }
.finale-section .final-words-title em { display:inline-block;margin-top:4px;padding:0 .04em .06em 0;background:linear-gradient(100deg,#f2b9c9 0%,#e79ccc 52%,#afd8eb 100%);background-clip:text;-webkit-text-fill-color:transparent;font-family:"Cormorant Garamond",var(--serif);font-size:.94em;font-weight:500; }
.finale-section .words-copy { max-width:62ch;margin:clamp(18px,3vh,25px) auto 0;color:#c2c9da;font:400 clamp(13px,1.3vw,15px)/1.65 var(--sans);letter-spacing:.01em; }
.finale-section .words-copy-soft { margin-top:12px;color:#9eabc1; }
.finale-section .words-signature { margin:clamp(18px,3vh,25px) 0 0;color:#e8c47b;font:500 17px/1.35 "Cormorant Garamond",var(--serif); }
.finale-section .words-signature em { color:#a9dce8;font:italic 500 20px/1 "Parisienne","Cormorant Garamond",var(--serif); }
.finale-section .finale-message-slide .finale-next { margin-top:16px; }
.finale-message-slide.finale-visible .words-kicker { animation:words-arrive .6s .02s cubic-bezier(.2,.72,.2,1) both; }
.finale-message-slide.finale-visible .final-words-title { animation:words-arrive .72s .12s cubic-bezier(.2,.72,.2,1) both; }
.finale-message-slide.finale-visible .words-copy { animation:words-arrive .66s .25s cubic-bezier(.2,.72,.2,1) both; }
.finale-message-slide.finale-visible .words-copy-soft { animation-delay:.36s; }
.finale-message-slide.finale-visible .words-signature { animation:words-arrive .62s .45s cubic-bezier(.2,.72,.2,1) both; }
.finale-message-slide.finale-visible .finale-next { animation:words-arrive .6s .54s cubic-bezier(.2,.72,.2,1) both; }
@media (max-width:620px) {
  .finale-section .words-kicker { margin-bottom:17px;font-size:15px; }
  .finale-section .final-words-title { font-size:clamp(29px,8.2vw,40px);line-height:1.12; }
  .finale-section .final-words-title em { font-size:.92em; }
  .finale-section .words-copy { margin-top:17px;font-size:12px;line-height:1.55; }
  .finale-section .words-copy-soft { margin-top:9px; }
  .finale-section .words-signature { margin-top:15px;font-size:16px; }
}
@media (prefers-reduced-motion:reduce) {
  .finale-message-slide.finale-visible .words-kicker,.finale-message-slide.finale-visible .final-words-title,.finale-message-slide.finale-visible .words-copy,.finale-message-slide.finale-visible .words-signature { animation:none;opacity:1;filter:none;translate:none; }
}

/* Final page: a single-line declaration with a little more life in the sky. */
.finale-section .love-you-content { width:min(100%,1000px);isolation:isolate; }
.finale-section .love-you-content::before { position:absolute;z-index:-1;top:45%;left:50%;width:min(78vw,850px);height:min(45vw,360px);border-radius:50%;background:radial-gradient(ellipse,rgba(229,130,178,.16),rgba(101,166,197,.09) 43%,transparent 72%);filter:blur(18px);content:"";transform:translate(-50%,-50%);animation:love-you-halo-breathe 8s ease-in-out infinite; }
.finale-section .love-you-slide h2 { white-space:nowrap;font-size:clamp(86px,12.5vw,154px);line-height:1;letter-spacing:-.07em; }
.finale-section .love-you-slide h2 em { margin-left:.035em;background-size:190% 100%;animation:love-title-shimmer 8s ease-in-out infinite; }
.finale-section .love-you-orbit i:nth-child(5) { top:37%;left:13%;color:#f2c877;font-size:13px;animation-delay:-2.8s; }
.finale-section .love-you-orbit i:nth-child(6) { top:72%;right:15%;left:auto;color:#9fdde7;font-size:17px;animation-delay:-1.1s; }
.finale-section .love-you-orbit i:nth-child(7) { top:17%;right:32%;left:auto;color:#fff;font-size:9px;animation-delay:-3.3s; }
.love-comet { position:absolute;top:29%;left:19%;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 12px 3px rgba(193,232,255,.78);animation:love-comet-travel 9s ease-in-out infinite; }
.love-comet::after { position:absolute;top:50%;right:2px;width:76px;height:1px;background:linear-gradient(90deg,transparent,rgba(170,223,255,.8));content:"";transform:translateY(-50%); }
.love-comet.comet-two { top:68%;right:19%;left:auto;width:4px;height:4px;background:#ffe6ab;box-shadow:0 0 12px 3px rgba(255,213,130,.7);animation-delay:-4.5s;animation-duration:11s; }
.love-comet.comet-two::after { right:auto;left:2px;background:linear-gradient(90deg,rgba(255,224,165,.78),transparent); }
@keyframes love-you-halo-breathe { 0%,100% { opacity:.63;scale:.91; } 50% { opacity:1;scale:1.08; } }
@keyframes love-title-shimmer { 0%,100% { background-position:0% 50%;filter:brightness(1); } 50% { background-position:100% 50%;filter:brightness(1.14); } }
@keyframes love-comet-travel { 0%,18%,100% { opacity:0;translate:0 0; } 25% { opacity:.9; } 58% { opacity:.64;translate:clamp(70px,18vw,220px) clamp(-32px, -3vw, -10px); } 68% { opacity:0;translate:clamp(70px,18vw,220px) clamp(-32px, -3vw, -10px); } }
@media (max-width:850px) {
  .finale-section .love-you-slide h2 { font-size:clamp(70px,11vw,110px); }
}
@media (max-width:620px) {
  .finale-section .love-you-slide h2 { font-size:clamp(31px,10.2vw,62px);letter-spacing:-.055em; }
  .finale-section .love-you-slide h2 em { margin-left:.025em; }
  .finale-section .love-you-content::before { width:115vw;height:65vw; }
  .love-comet { left:17%;top:24%; }
  .love-comet.comet-two { right:14%;top:71%; }
  .love-comet::after { width:46px; }
}
@media (prefers-reduced-motion:reduce) {
  .finale-section .love-you-content::before,.finale-section .love-you-slide h2 em,.love-comet { animation:none; }
}

/* 19-year photo reel placed directly after the cake wish. */
.age-reel-section { position:relative;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-top:108px;padding-bottom:74px;background:radial-gradient(ellipse at 24% 44%,rgba(85,146,202,.13),transparent 36%),radial-gradient(ellipse at 76% 68%,rgba(211,116,169,.12),transparent 39%); }
.age-reel-topline { position:absolute;top:clamp(92px,12vh,128px);left:50%;display:flex;align-items:center;gap:13px;width:min(1080px,calc(100% - clamp(120px,16vw,210px)));color:#9bb1ca;font:700 7px/1 var(--sans);letter-spacing:.2em;transform:translateX(-50%); }
.age-reel-topline span:first-child { color:#f0c578; }
.age-reel-topline i { width:36px;height:1px;background:linear-gradient(90deg,rgba(135,216,222,.7),transparent); }
.age-reel-layout { display:grid;grid-template-columns:44px minmax(260px,370px) minmax(280px,1fr) 44px;align-items:center;gap:clamp(16px,3vw,40px);width:min(1100px,calc(100% - 100px));margin:auto; }
.age-arrow { display:grid;width:42px;height:42px;place-items:center;border:1px solid rgba(176,197,229,.35);border-radius:50%;color:#f3d898;background:rgba(18,24,46,.54);box-shadow:0 6px 22px rgba(4,8,22,.18);cursor:pointer;transition:transform .28s,border-color .28s,background .28s,opacity .28s; }
.age-arrow span { font:400 19px/1 var(--sans); }
.age-arrow:hover:not(:disabled) { transform:scale(1.08);border-color:rgba(240,205,132,.8);background:rgba(193,125,165,.2); }
.age-arrow:focus-visible { outline:2px solid #f5d17f;outline-offset:4px; }
.age-arrow:disabled { opacity:.28;cursor:default; }
.age-photo-frame { position:relative;isolation:isolate;overflow:hidden;width:100%;aspect-ratio:4/5;border:1px solid rgba(197,213,244,.54);border-radius:5px 28px 5px 28px;background:#11182d;box-shadow:0 26px 70px rgba(3,8,21,.4),0 0 38px rgba(143,167,219,.11),inset 0 0 0 5px rgba(255,255,255,.035);touch-action:pan-y;cursor:grab; }
.age-photo-frame:active { cursor:grabbing; }
.age-photo-frame::before { position:absolute;z-index:2;inset:10px;border:1px solid rgba(238,218,174,.3);border-radius:2px 20px 2px 20px;content:"";pointer-events:none; }
.age-photo-frame::after { position:absolute;z-index:1;inset:0;background:linear-gradient(180deg,rgba(9,13,31,.03) 48%,rgba(9,13,31,.34)),radial-gradient(ellipse at 50% 0%,rgba(174,205,247,.1),transparent 58%);content:"";pointer-events:none; }
.age-photo-placeholder { position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at 29% 28%,hsla(var(--age-hue,210),68%,63%,.36),transparent 42%),radial-gradient(ellipse at 80% 73%,hsla(calc(var(--age-hue,210) + 96),61%,57%,.27),transparent 46%),linear-gradient(148deg,#11182d,#25213f 57%,#102738); }
.age-photo-placeholder::before { position:absolute;inset:-18%;border:1px solid rgba(234,225,255,.18);border-radius:50%;box-shadow:0 0 0 23px rgba(225,220,255,.025),0 0 0 61px rgba(130,210,218,.024);content:"";transform:rotate(-20deg) scaleY(.7);animation:age-placeholder-orbit 19s linear infinite; }
.age-photo-placeholder::after { position:absolute;inset:0;background:repeating-linear-gradient(118deg,transparent 0 44px,rgba(255,255,255,.018) 45px,transparent 46px 90px);content:""; }
.age-photo-watermark { position:relative;z-index:1;color:rgba(246,243,255,.16);font:500 clamp(112px,18vw,215px)/.8 "Bodoni Moda",var(--serif);letter-spacing:-.09em;transform:translateX(-.06em); }
.age-photo-placeholder-label { position:absolute;z-index:3;bottom:clamp(22px,4vw,42px);left:0;width:100%;color:rgba(248,242,255,.74);font:700 7px/1 var(--sans);letter-spacing:.22em;text-align:center; }
.age-photo-placeholder-spark { position:absolute;z-index:2;top:22%;right:22%;color:#f4d27c;font-size:20px;text-shadow:0 0 18px currentColor;animation:finale-twinkle 4s ease-in-out infinite; }
.age-photo { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center; }
.age-photo-index { position:absolute;z-index:4;top:23px;left:24px;color:#fff0cf;font:700 7px/1 var(--sans);letter-spacing:.17em;text-shadow:0 2px 10px rgba(0,0,0,.46); }
.age-photo-glint { position:absolute;z-index:3;top:-25%;left:-52%;width:29%;height:150%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);filter:blur(4px);pointer-events:none; }
.age-reel-copy { position:relative;min-width:0;padding:15px 0; }
.age-reel-kicker { margin:0 0 3px;color:#b9d8e4;font:700 8px/1.5 var(--sans);letter-spacing:.23em; }
.age-year { margin:0;color:#fcf3ff;font:500 clamp(108px,15vw,188px)/.92 "Bodoni Moda",var(--serif);letter-spacing:-.09em;text-shadow:0 9px 45px rgba(148,165,229,.17); }
.age-year span { display:inline-block;padding:.03em .12em .12em 0;background:linear-gradient(145deg,#fff4d2,#ebafd4 58%,#9ed8eb);background-clip:text;-webkit-text-fill-color:transparent; }
.age-year-note { max-width:30ch;margin:6px 0 28px;color:#b6c3d8;font:400 14px/1.65 var(--sans); }
.age-progress-meta { display:flex;justify-content:space-between;gap:12px;max-width:390px;color:#8499b5;font:700 6px/1.5 var(--sans);letter-spacing:.14em; }
.age-progress-meta span:first-child { color:#f1c97b; }
.age-progress-track { position:relative;overflow:hidden;width:min(100%,390px);height:2px;margin-top:9px;background:rgba(178,194,224,.2); }
.age-progress-track i { position:absolute;inset:0 auto 0 0;width:5.3%;background:linear-gradient(90deg,#78d0de,#e89bc9 58%,#f1ca78);box-shadow:0 0 10px rgba(220,167,204,.55);transition:width .55s cubic-bezier(.2,.7,.2,1); }
.age-swipe-hint { margin:17px 0 0;color:#8599b2;font:500 8px/1.5 var(--sans);letter-spacing:.07em; }
.age-swipe-hint span { margin-right:6px;color:#9fdde2;font-size:13px; }
.age-future-card { max-width:420px;padding-top:2px;animation:age-future-arrive .65s cubic-bezier(.2,.7,.2,1) both; }
.age-future-card[hidden] { display:none; }
.age-future-card p { margin:0;color:#f8f2ff;font:500 clamp(28px,3.4vw,42px)/1.13 "Cormorant Garamond",var(--serif); }
.age-future-card p em { color:#f2c479;font-family:"Bodoni Moda",var(--serif);font-style:italic; }
.age-future-card > span { display:block;margin-top:15px;color:#e5a9cf;font:italic 500 17px/1.35 "Cormorant Garamond",var(--serif); }
.age-future-card a { display:inline-flex;align-items:center;gap:12px;margin-top:25px;color:#a9dfe4;font:700 8px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;transition:color .25s,transform .25s; }
.age-future-card a:hover { color:#fff0c6;transform:translateY(2px); }
.age-future-card a b { font-size:17px;font-weight:400; }
.age-reel-footer { position:absolute;right:clamp(26px,7vw,100px);bottom:25px;left:clamp(70px,11vw,150px);display:flex;align-items:center;gap:12px;color:#778ba5;font:700 6px/1 var(--sans);letter-spacing:.18em; }
.age-reel-footer span:first-child,.age-reel-footer span:last-child { color:#e9c879;font-size:10px; }
.age-reel-footer i { width:clamp(16px,4vw,48px);height:1px;background:linear-gradient(90deg,rgba(126,206,218,.45),transparent); }
.age-reel-footer i:nth-of-type(2) { flex:1; }
.age-reel-status { position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap; }
.age-reel-section.is-changing .age-photo { animation:age-photo-change .55s cubic-bezier(.2,.7,.2,1) both; }
.age-reel-section.is-changing .age-photo-placeholder { animation:age-photo-change .55s cubic-bezier(.2,.7,.2,1) both; }
.age-reel-section.is-changing .age-reel-copy:not(.is-future) { animation:age-copy-change .46s cubic-bezier(.2,.7,.2,1) both; }
.age-reel-section.is-changing[data-direction="previous"] .age-photo,.age-reel-section.is-changing[data-direction="previous"] .age-photo-placeholder { animation-name:age-photo-change-back; }
.age-reel-section.is-changing[data-direction="previous"] .age-reel-copy:not(.is-future) { animation-name:age-copy-change-back; }
@keyframes age-photo-change { from { opacity:.38;transform:scale(1.045) translateX(18px);filter:blur(4px); } to { opacity:1;transform:scale(1) translateX(0);filter:blur(0); } }
@keyframes age-photo-change-back { from { opacity:.38;transform:scale(1.045) translateX(-18px);filter:blur(4px); } to { opacity:1;transform:scale(1) translateX(0);filter:blur(0); } }
@keyframes age-copy-change { from { opacity:.25;transform:translateX(18px);filter:blur(4px); } to { opacity:1;transform:translateX(0);filter:blur(0); } }
@keyframes age-copy-change-back { from { opacity:.25;transform:translateX(-18px);filter:blur(4px); } to { opacity:1;transform:translateX(0);filter:blur(0); } }
@keyframes age-placeholder-orbit { to { rotate:360deg; } }

/* Keep the hero's floating star trail crisp and present instead of washed out. */
.hero-cosmos-sprites .hero-star-ribbon {
  left: 40.5% !important;
  top: 112px !important;
  bottom: auto !important;
  width: 205px !important;
  height: 620px !important;
  max-height: none !important;
  opacity: .9 !important;
  filter: brightness(1.22) contrast(1.12) saturate(1.12) drop-shadow(0 0 12px rgba(168, 205, 255, .38));
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 82%, rgba(0, 0, 0, .72) 91%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 82%, rgba(0, 0, 0, .72) 91%, transparent 100%);
}
@media (max-width: 700px) {
  .hero-cosmos-sprites .hero-star-ribbon {
    left: 28% !important;
    top: auto !important;
    bottom: 4% !important;
    width: 130px !important;
    height: auto !important;
    max-height: none !important;
  }
}
.hero-frame-star {
  top: 25% !important;
  right: 14% !important;
  left: auto !important;
}
.hero-cosmos-sprites .spark-a {
  top: 11% !important;
  left: 3% !important;
  right: auto !important;
  font-size: clamp(24px, 3vw, 36px) !important;
}
@media (max-width: 700px) {
  .hero-cosmos-sprites .spark-a {
    top: 10% !important;
    left: 3% !important;
    right: auto !important;
    font-size: 26px !important;
  }
}
@media (min-width: 701px) {
  .hero { align-items: center; }
}

/* A touch more color and motion in the shared sky, without changing the layout. */
.starfield {
  background:
    radial-gradient(ellipse 70% 54% at 16% 24%, rgba(65, 126, 187, .15), transparent 100%),
    radial-gradient(ellipse 62% 48% at 84% 68%, rgba(143, 82, 154, .14), transparent 100%),
    radial-gradient(ellipse 52% 42% at 50% 90%, rgba(43, 139, 143, .11), transparent 100%),
    radial-gradient(ellipse 44% 34% at 22% 78%, rgba(132, 76, 126, .07), transparent 100%),
    linear-gradient(180deg, #0b1220 0%, #101827 50%, #0b1220 100%);
}
.starfield .track-a {
  border-color: rgba(144, 191, 235, .18);
  box-shadow: 0 0 20px rgba(83, 145, 202, .075), inset 0 0 20px rgba(110, 160, 210, .045);
  animation-duration: 52s;
}
.starfield .track-b {
  border-color: rgba(204, 174, 228, .14);
  box-shadow: 0 0 20px rgba(145, 105, 181, .06);
  animation-duration: 60s;
}
.starfield .star-belt {
  background-image: radial-gradient(circle, rgba(220, 234, 255, .9) 0 .85px, transparent 1.7px);
  opacity: .38;
  filter: drop-shadow(0 0 4px rgba(130, 181, 235, .38));
  animation-duration: 100s;
}
@media (max-width: 700px) {
  .starfield .star-belt { opacity: .33; }
}

/* Final intro polish: a quieter, longer frame drift and a soft border arrival. */
.hero-frame {
  animation: hero-frame-float-smooth 8.4s cubic-bezier(.42, 0, .58, 1) infinite,
    hero-frame-glow 8.4s ease-in-out infinite;
}
.hero-frame::after {
  animation: hero-frame-light 11s 1s ease-in-out infinite;
}
body.birthday-entered .hero-frame::after {
  animation: hero-frame-light 11s 1s ease-in-out infinite,
    hero-frame-edge-arrive .9s .18s cubic-bezier(.2, .72, .24, 1) both;
}
@keyframes hero-frame-float-smooth {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  50% { transform: translate3d(0, -10px, 0) rotate(.25deg); }
}
@keyframes hero-frame-edge-arrive {
  from { opacity: 0; transform: scale(.985); }
  to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-frame, .hero-frame::after { animation: none !important; }
}
@keyframes age-future-arrive { from { opacity:0;transform:translateY(14px);filter:blur(4px); } to { opacity:1;transform:translateY(0);filter:blur(0); } }
@media (max-width:850px) {
  .age-reel-layout { grid-template-columns:38px minmax(220px,300px) minmax(190px,1fr) 38px;gap:16px;width:calc(100% - 78px); }
  .age-year { font-size:clamp(100px,17vw,150px); }
  .age-year-note { font-size:12px; }
  .age-reel-topline { width:calc(100% - 100px); }
}
@media (max-width:620px) {
  .age-reel-section { min-height:100svh;justify-content:center;padding:92px 20px 68px 58px; }
  .age-reel-topline { top:75px;left:58px;width:calc(100% - 82px);gap:8px;font-size:5px;letter-spacing:.12em;transform:none; }
  .age-reel-topline i { width:18px; }
  .age-reel-layout { grid-template-columns:34px minmax(0,1fr) 34px;grid-template-rows:auto auto;align-items:center;gap:12px 7px;width:100%; }
  .age-photo-frame { grid-area:1/2/2/3;width:100%;max-width:230px;aspect-ratio:4/4.4;justify-self:center;border-radius:4px 20px 4px 20px; }
  .age-arrow { width:31px;height:31px; }
  .age-arrow span { font-size:15px; }
  .age-reel-copy { grid-area:2/1/3/4;padding:0 0 4px;text-align:center; }
  .age-reel-kicker { margin:0 0 1px;font-size:6px; }
  .age-year { font-size:clamp(82px,26vw,116px); }
  .age-year-note { max-width:30ch;margin:2px auto 14px;font-size:11px; }
  .age-progress-meta { max-width:300px;margin-inline:auto;font-size:5px; }
  .age-progress-track { max-width:300px;margin:7px auto 0; }
  .age-swipe-hint { margin-top:10px;font-size:7px; }
  .age-future-card { margin-inline:auto;text-align:center; }
  .age-future-card p { font-size:clamp(27px,8vw,38px); }
  .age-future-card > span { margin-top:9px;font-size:15px; }
  .age-future-card a { margin-top:14px;font-size:7px; }
  .age-reel-footer { right:18px;bottom:20px;left:58px;gap:7px;font-size:4.7px;letter-spacing:.1em; }
  .age-reel-footer i { width:12px; }
}
@media (prefers-reduced-motion:reduce) {
  .age-photo-placeholder::before,.age-photo-placeholder-spark,.age-reel-section.is-changing .age-photo,.age-reel-section.is-changing .age-photo-placeholder,.age-reel-section.is-changing .age-reel-copy,.age-future-card { animation:none; }
}

/* Finale scenes are discrete destinations: only the chapter rail changes scenes. */
.finale-section:not([hidden]) { overflow-x:hidden !important;overflow-y:hidden !important;scroll-snap-type:none !important; }
.age-photo-frame,.age-photo-frame:active { cursor:default;touch-action:auto; }

/* Keep the three finale moments in one continuous, freely scrolling scene. */
.finale-section:not([hidden]) { scroll-snap-type:none !important;scroll-behavior:smooth;scroll-padding-block:24px;background-attachment:fixed; }
.finale-section .finale-page { scroll-snap-align:none;scroll-margin:0; }
.finale-section .wish-section,.finale-section .finale-message-slide,.finale-section .love-you-slide { background-color:transparent; }
.finale-section .wish-section { background-image:radial-gradient(ellipse at 66% 51%,rgba(247,177,99,.085),transparent 34%),radial-gradient(ellipse at 27% 48%,rgba(93,105,205,.075),transparent 42%); }
.finale-section .finale-message-slide { background-image:radial-gradient(ellipse at 17% 68%,rgba(49,157,165,.085),transparent 35%),radial-gradient(ellipse at 84% 25%,rgba(188,77,147,.085),transparent 38%); }
.finale-section .love-you-slide { background-image:radial-gradient(ellipse at 50% 48%,rgba(186,86,152,.13),transparent 38%),radial-gradient(ellipse at 18% 80%,rgba(255,196,110,.06),transparent 34%),radial-gradient(ellipse at 84% 22%,rgba(83,176,196,.09),transparent 35%); }
.finale-section .finale-page { transition:background-color .8s ease; }
.finale-section .closing-invite { margin-top:8px; }
@media (prefers-reduced-motion:reduce) {
  .finale-section:not([hidden]) { scroll-behavior:auto; }
}

/* Keep slide copy visible after launch even if the scroll-reveal observer misses startup. */
body.birthday-entered .reveal { opacity:1;transform:none; }

/* Orbit finish: a soft color current through the dated memories. */
.orbit-section {
  --chapter-a:#4f8fc5;
  --chapter-b:#8462bd;
  background-image:
    radial-gradient(ellipse at 14% 22%,rgba(62,142,186,.14),transparent 36%),
    radial-gradient(ellipse at 88% 46%,rgba(134,83,163,.13),transparent 38%);
}
.orbit-section::before {
  background:radial-gradient(circle,rgba(79,151,204,.17),rgba(121,86,177,.105) 38%,rgba(45,117,143,.045) 56%,transparent 72%);
}
.orbit-section .timeline-item { --orbit-accent:#91d7e4; }
.orbit-section .timeline-item:nth-child(5n + 1) { --orbit-accent:#8ed9e1; }
.orbit-section .timeline-item:nth-child(5n + 2) { --orbit-accent:#c2a8f2; }
.orbit-section .timeline-item:nth-child(5n + 3) { --orbit-accent:#f0a6ca; }
.orbit-section .timeline-item:nth-child(5n + 4) { --orbit-accent:#f1c878; }
.orbit-section .timeline-item:nth-child(5n) { --orbit-accent:#8fc6f2; }
.orbit-section .timeline-item:nth-child(n) .eyebrow.small { color:var(--orbit-accent); }
.orbit-section .timeline-item:not(.is-birthday-memory) { border-radius:0;border-color:color-mix(in srgb,var(--orbit-accent) 23%,rgba(173,193,224,.18));background:linear-gradient(112deg,color-mix(in srgb,var(--orbit-accent) 8%,rgba(17,26,45,.91)),rgba(14,19,34,.54) 68%,color-mix(in srgb,var(--orbit-accent) 7%,rgba(23,20,40,.7)));box-shadow:inset 0 1px rgba(255,255,255,.07),inset 3px 0 color-mix(in srgb,var(--orbit-accent) 38%,transparent),0 12px 30px rgba(3,8,21,.12); }
.orbit-section .timeline-item .eyebrow.small { display:flex;align-items:center;gap:9px;width:max-content;max-width:100%;margin-bottom:15px;padding:0;border:0;border-radius:0;background:transparent;font-size:10px;letter-spacing:.2em;text-shadow:0 0 13px color-mix(in srgb,var(--orbit-accent) 42%,transparent); }
.orbit-section .timeline-item .eyebrow.small::before { content:"✦";color:var(--orbit-accent);font-size:10px;text-shadow:0 0 12px color-mix(in srgb,var(--orbit-accent) 82%,transparent); }
.orbit-section .timeline-item .eyebrow.small::after { content:"";display:block;width:clamp(20px,3vw,42px);height:1px;margin-left:3px;background:linear-gradient(90deg,color-mix(in srgb,var(--orbit-accent) 74%,transparent),transparent);box-shadow:0 0 8px color-mix(in srgb,var(--orbit-accent) 44%,transparent); }
.orbit-section .timeline-item:not(.is-birthday-memory)::before {
  position:absolute;z-index:0;inset:0;border-radius:inherit;content:"";pointer-events:none;opacity:0;
  background:linear-gradient(108deg,transparent 22%,color-mix(in srgb,var(--orbit-accent) 12%,transparent) 48%,transparent 74%);
  background-size:220% 100%;background-position:100% 0;
}
.orbit-section .timeline-item:not(.is-birthday-memory):hover::before,
.orbit-section .timeline-item:not(.is-birthday-memory):focus-within::before { opacity:1;animation:orbit-card-glide 1.1s ease-out both; }
.orbit-section .timeline-item > div { position:relative;z-index:1; }
.orbit-section .timeline-item.reveal { transition:opacity .62s cubic-bezier(.2,.65,.25,1),transform .72s cubic-bezier(.18,.72,.2,1),background .55s ease,border-color .55s ease,box-shadow .6s ease; }
.orbit-section .timeline-item.is-reading { border-color:color-mix(in srgb,var(--orbit-accent) 48%,rgba(173,193,224,.2));background:linear-gradient(112deg,color-mix(in srgb,var(--orbit-accent) 11%,rgba(21,31,53,.88)),rgba(14,19,34,.49) 72%,color-mix(in srgb,var(--orbit-accent) 8%,rgba(23,20,40,.58)));box-shadow:0 13px 34px rgba(3,8,21,.2),inset 3px 0 color-mix(in srgb,var(--orbit-accent) 78%,transparent); }
.orbit-section .timeline-item.is-reading .timeline-number { transform:scale(1.16);box-shadow:0 0 0 4px color-mix(in srgb,var(--orbit-accent) 16%,transparent),0 0 21px color-mix(in srgb,var(--orbit-accent) 65%,transparent); }
.orbit-section .timeline-number { transition:box-shadow .55s ease,transform .55s cubic-bezier(.2,.7,.2,1); }
.orbit-section .timeline::after {
  position:absolute;top:0;bottom:0;left:17px;width:5px;border-radius:8px;content:"";pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(139,226,231,.12) 24%,rgba(198,168,242,.58) 50%,rgba(241,190,126,.2) 72%,transparent 100%);
  background-size:100% 100%;animation:orbit-spine-breathe 4.8s ease-in-out infinite;
}
@keyframes orbit-card-glide { from { background-position:100% 0; } to { background-position:0% 0; } }
@keyframes orbit-spine-breathe { 0%,100% { opacity:.55; } 50% { opacity:.92; } }
@media (prefers-reduced-motion:reduce) {
  .orbit-section::before,.orbit-section .timeline::after,.orbit-section .timeline-item.reveal.is-visible,
  .orbit-section .timeline-item:not(.is-birthday-memory)::before,
  .orbit-section .timeline-item.is-birthday-memory::before { animation:none!important; }
  .orbit-section .timeline-item.reveal,.orbit-section .timeline-number { transition:none!important; }
}

/* Let the portrait mosaic arrive in a calm stagger without competing transforms. */
.gallery-section .section-head.reveal,
.gallery-section .photo-card.reveal {
  transition:opacity .62s cubic-bezier(.22,.7,.25,1) var(--reveal-delay,0s),
    transform .76s cubic-bezier(.18,.72,.22,1) var(--reveal-delay,0s);
}
.gallery-section .photo-card.reveal.is-visible { animation:none!important; }
.gallery-section .photo-card {
  scroll-margin-block:84px;
  transition:transform .58s cubic-bezier(.18,.72,.22,1),box-shadow .48s ease;
}
.gallery-section .photo-card img {
  transition:filter .48s ease,transform .78s cubic-bezier(.18,.72,.22,1);
}
@media (prefers-reduced-motion:reduce) {
  .gallery-section .section-head.reveal,
  .gallery-section .photo-card.reveal,
  .gallery-section .photo-card,
  .gallery-section .photo-card img { transition:none!important; }
}

/* Box-only refresh for the “If you were” carousel, following its supplied reference. */
.if-section .daydream-card {
  --dream-bg:#354d83;--dream-accent:#a9d6ff;--dream-edge:rgba(184,211,255,.72);--dream-glow:rgba(118,157,255,.23);
  position:relative;min-height:clamp(350px,29vw,440px);justify-content:flex-start;gap:0;
  padding:clamp(30px,4vw,54px);overflow:hidden;border:1px solid var(--dream-edge);border-radius:24px;
  background:radial-gradient(ellipse at 88% 9%,color-mix(in srgb,var(--dream-accent) 30%,transparent),transparent 38%),
    radial-gradient(ellipse at 9% 100%,color-mix(in srgb,var(--dream-accent) 23%,transparent),transparent 48%),
    linear-gradient(138deg,color-mix(in srgb,var(--dream-bg) 94%,white),color-mix(in srgb,var(--dream-bg) 80%,#10172a) 76%);
  box-shadow:0 24px 62px rgba(0,0,0,.3),0 0 34px var(--dream-glow),inset 0 1px rgba(255,255,255,.18);
  animation:none;transition:background .55s ease,border-color .55s ease,box-shadow .55s ease,transform .42s cubic-bezier(.2,.7,.2,1);
}
.if-section .daydream-card[data-theme="season"] {--dream-bg:#455780;--dream-accent:#a9e5b7;--dream-edge:rgba(173,210,232,.78);--dream-glow:rgba(240,185,100,.22)}
.if-section .daydream-card[data-theme="color"] {--dream-bg:#645078;--dream-accent:#ffd66e;--dream-edge:rgba(255,214,110,.7);--dream-glow:rgba(255,181,92,.26)}
.if-section .daydream-card[data-theme="place"] {--dream-bg:#665064;--dream-accent:#f5b387;--dream-edge:rgba(245,179,135,.72);--dream-glow:rgba(230,133,113,.22)}
.if-section .daydream-card[data-theme="song"] {--dream-bg:#514a7d;--dream-accent:#d4b4ff;--dream-edge:rgba(212,180,255,.74);--dream-glow:rgba(164,130,255,.26)}
.if-section .daydream-card[data-theme="flower"] {--dream-bg:#3d685f;--dream-accent:#f5d56e;--dream-edge:rgba(169,229,183,.72);--dream-glow:rgba(116,218,169,.22)}
.if-section .daydream-card[data-theme="star"] {--dream-bg:#354d83;--dream-accent:#c9e8ff;--dream-edge:rgba(169,220,255,.76);--dream-glow:rgba(142,164,255,.27)}
.if-section .daydream-card[data-theme="day"] {--dream-bg:#655064;--dream-accent:#ffd17d;--dream-edge:rgba(255,209,125,.72);--dream-glow:rgba(242,164,206,.23)}
.if-section .daydream-card[data-theme="book"] {--dream-bg:#443f70;--dream-accent:#d2baff;--dream-edge:rgba(194,177,255,.72);--dream-glow:rgba(151,130,226,.26)}
.if-section .daydream-card[data-theme="weather"] {--dream-bg:#4c5b79;--dream-accent:#ffe08a;--dream-edge:rgba(255,224,138,.74);--dream-glow:rgba(255,194,104,.25)}
.if-section .daydream-card[data-theme="number"] {--dream-bg:#624d77;--dream-accent:#ffc77c;--dream-edge:rgba(255,199,124,.74);--dream-glow:rgba(240,153,125,.23)}
.if-section .daydream-card[data-theme="dessert"] {--dream-bg:#714b69;--dream-accent:#ffd1a4;--dream-edge:rgba(255,190,193,.74);--dream-glow:rgba(240,130,170,.24)}
.if-section .daydream-card[data-theme="planet"] {--dream-bg:#35696b;--dream-accent:#9de5d5;--dream-edge:rgba(157,229,213,.74);--dream-glow:rgba(80,206,194,.24)}
.if-section .daydream-card[data-theme="cloth"] {--dream-bg:#704d68;--dream-accent:#f4b7d4;--dream-edge:rgba(244,183,212,.74);--dream-glow:rgba(225,133,183,.24)}
.if-section .daydream-card[data-theme="body"] {--dream-bg:#70485e;--dream-accent:#ffb4c4;--dream-edge:rgba(255,180,196,.74);--dream-glow:rgba(239,118,161,.26)}
.if-section .daydream-card[data-theme="wish"] {--dream-bg:#3e6376;--dream-accent:#a9e5d0;--dream-edge:rgba(169,229,208,.74);--dream-glow:rgba(97,201,195,.24)}
.if-section .daydream-card::before {content:none}
.if-section .daydream-card::after {inset:14px;border:1px solid color-mix(in srgb,var(--dream-accent) 25%,transparent);border-radius:17px;background:none;opacity:1;animation:none}
.if-section .daydream-meta {position:relative;z-index:3;display:flex;width:max-content;max-width:70%;align-items:center;gap:11px;color:var(--dream-accent);font-size:10px;font-weight:800;letter-spacing:.22em}
.if-section .daydream-number {color:#ffd66e;font-size:12px;letter-spacing:.16em}
.if-section .daydream-meta .daydream-divider {position:static;display:block;flex:0 0 34px;width:34px;min-width:34px;height:2px;align-self:center;margin:0;transform:none!important;animation:none!important;background:linear-gradient(90deg,var(--dream-accent),color-mix(in srgb,var(--dream-accent) 62%,transparent),transparent);box-shadow:0 0 8px color-mix(in srgb,var(--dream-accent) 35%,transparent)}
.if-section .daydream-category {white-space:nowrap}
.if-section .daydream-emblem {position:absolute;z-index:1;top:8%;right:10%;display:grid;width:clamp(92px,8vw,124px);aspect-ratio:1;place-items:center;border:1px solid color-mix(in srgb,var(--dream-accent) 60%,white);border-radius:50%;background:radial-gradient(circle at 38% 32%,color-mix(in srgb,var(--dream-accent) 30%,#354366),color-mix(in srgb,var(--dream-bg) 85%,#0a1020) 70%);box-shadow:inset 0 0 26px color-mix(in srgb,var(--dream-accent) 22%,transparent),0 0 24px var(--dream-glow);color:var(--dream-accent)}
.if-section .daydream-emblem::before {position:absolute;inset:-6px;border-radius:50%;background:conic-gradient(from -30deg,#ffd66e 0 14%,transparent 15% 22%,#8ee4ce 23% 39%,transparent 40% 48%,#9bcfff 49% 65%,transparent 66% 74%,#efa4d1 75% 91%,transparent 92%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));filter:drop-shadow(0 0 5px color-mix(in srgb,var(--dream-accent) 65%,transparent));content:"";animation:daydream-orbit 24s linear infinite}
.if-section .daydream-emblem::after {position:absolute;inset:10%;border:1px solid color-mix(in srgb,var(--dream-accent) 46%,transparent);border-radius:50%;content:"";box-shadow:0 0 18px var(--dream-glow)}
.if-section .daydream-symbol {position:relative;z-index:1;color:#fff3d4;font:500 clamp(40px,4vw,57px)/1 var(--serif);text-shadow:0 0 7px var(--dream-accent),0 0 21px var(--dream-glow)}

/* Each If You Were card gets a small, colorful emblem tied to its subject. */
.if-section .daydream-symbol { display:grid; width:100%; height:100%; place-items:center; color:inherit; font-size:0; text-shadow:none; }
.if-section .daydream-symbol svg { display:block; width:66%; height:66%; overflow:visible; filter:drop-shadow(0 3px 8px color-mix(in srgb,var(--dream-accent) 40%,transparent)); animation:daydream-icon-arrive .6s cubic-bezier(.2,.8,.2,1) both,daydream-icon-float 4.8s ease-in-out .6s infinite; }
.if-section .daydream-card[data-theme="scent"] {--dream-bg:#704b72;--dream-accent:#f2a3c2;--dream-edge:rgba(255,207,227,.78);--dream-glow:rgba(232,123,186,.3)}
.if-section .daydream-card[data-theme="timeofday"] {--dream-bg:#715277;--dream-accent:#ffc574;--dream-edge:rgba(255,221,159,.8);--dream-glow:rgba(255,174,97,.31)}
.if-section .daydream-card[data-theme="number"] {--dream-bg:#4b5d8c;--dream-accent:#f3d477;--dream-edge:rgba(226,232,255,.8);--dream-glow:rgba(122,170,255,.28)}
@keyframes daydream-icon-arrive { from { opacity:0; transform:translateY(7px) scale(.82) rotate(-8deg); } to { opacity:1; transform:translateY(0) scale(1) rotate(0); } }
@keyframes daydream-icon-float { 0%,100% { transform:translateY(0) rotate(0); } 50% { transform:translateY(-4px) rotate(2deg); } }

/* Content-led palettes: each card has its own color family. */
.if-section .daydream-card[data-theme="season"] {--dream-bg:#68483d;--dream-accent:#ffc078;--dream-edge:rgba(255,215,160,.8);--dream-glow:rgba(239,143,78,.28)}
.if-section .daydream-card[data-theme="color"] {--dream-bg:#75602b;--dream-accent:#ffe34f;--dream-edge:rgba(255,239,153,.86);--dream-glow:rgba(255,211,54,.34)}
.if-section .daydream-card[data-theme="scent"] {--dream-bg:#59486f;--dream-accent:#f3abd1;--dream-edge:rgba(246,212,255,.8);--dream-glow:rgba(206,144,231,.28)}
.if-section .daydream-card[data-theme="place"] {--dream-bg:#754b40;--dream-accent:#f3bd83;--dream-edge:rgba(255,222,178,.8);--dream-glow:rgba(226,139,86,.28)}
.if-section .daydream-card[data-theme="song"] {--dream-bg:#665927;--dream-accent:#ffe16b;--dream-edge:rgba(255,241,175,.85);--dream-glow:rgba(255,211,76,.32)}
.if-section .daydream-card[data-theme="flower"] {--dream-bg:#3f644b;--dream-accent:#ffd45d;--dream-edge:rgba(218,247,170,.8);--dream-glow:rgba(127,207,119,.28)}
.if-section .daydream-card[data-theme="star"] {--dream-bg:#46536d;--dream-accent:#fff;--dream-edge:rgba(235,247,255,.86);--dream-glow:rgba(203,230,255,.3)}
.if-section .daydream-card[data-theme="day"] {--dream-bg:#3c6275;--dream-accent:#a7e5ff;--dream-edge:rgba(203,243,255,.8);--dream-glow:rgba(92,190,232,.28)}
.if-section .daydream-card[data-theme="timeofday"] {--dream-bg:#202b56;--dream-accent:#aebeff;--dream-edge:rgba(196,204,255,.82);--dream-glow:rgba(106,129,255,.32)}
.if-section .daydream-card[data-theme="book"] {--dream-bg:#44466f;--dream-accent:#d0b9ff;--dream-edge:rgba(226,213,255,.8);--dream-glow:rgba(157,132,237,.28)}
.if-section .daydream-card[data-theme="weather"] {--dream-bg:#3d6978;--dream-accent:#ffe16a;--dream-edge:rgba(255,240,169,.82);--dream-glow:rgba(255,201,73,.3)}
.if-section .daydream-card[data-theme="dessert"] {--dream-bg:#754763;--dream-accent:#ffabc8;--dream-edge:rgba(255,218,232,.82);--dream-glow:rgba(246,115,172,.32)}
.if-section .daydream-card[data-theme="number"] {--dream-bg:#4b5d8c;--dream-accent:#f3d477;--dream-edge:rgba(226,232,255,.8);--dream-glow:rgba(122,170,255,.28)}
.if-section .daydream-card[data-theme="planet"] {--dream-bg:#32675d;--dream-accent:#9ce2bd;--dream-edge:rgba(207,249,223,.82);--dream-glow:rgba(70,197,157,.29)}
.if-section .daydream-card[data-theme="cloth"] {--dream-bg:#74425f;--dream-accent:#ffd17c;--dream-edge:rgba(255,218,237,.82);--dream-glow:rgba(236,119,177,.3)}
.if-section .daydream-card[data-theme="body"] {--dream-bg:#70485e;--dream-accent:#ffb4c4;--dream-edge:rgba(255,220,228,.82);--dream-glow:rgba(239,118,161,.3)}
.if-section .daydream-card[data-theme="wish"] {--dream-bg:#405b69;--dream-accent:#b2eee1;--dream-edge:rgba(218,255,246,.8);--dream-glow:rgba(98,203,189,.28)}
/* Keep the number, divider, and category locked to one stable baseline. */
.if-section .daydream-meta { display:flex; align-items:center; min-height:18px; }
.if-section .daydream-meta .daydream-divider { position:static!important; inset:auto!important; align-self:center; flex:none; transform:none!important; animation:none!important; }
/* Match the card frame and orbital accent to the active subject palette. */
.if-section .daydream-card[data-theme="season"] {--dream-border:rgba(255,215,160,.8);--dream-orb:rgba(255,192,120,.42)}
.if-section .daydream-card[data-theme="color"] {--dream-border:rgba(255,239,153,.86);--dream-orb:rgba(255,227,79,.46)}
.if-section .daydream-card[data-theme="scent"] {--dream-border:rgba(246,212,255,.8);--dream-orb:rgba(243,171,209,.42)}
.if-section .daydream-card[data-theme="place"] {--dream-border:rgba(255,222,178,.8);--dream-orb:rgba(243,189,131,.42)}
.if-section .daydream-card[data-theme="song"] {--dream-border:rgba(255,241,175,.85);--dream-orb:rgba(255,225,107,.44)}
.if-section .daydream-card[data-theme="flower"] {--dream-border:rgba(218,247,170,.8);--dream-orb:rgba(255,212,93,.42)}
.if-section .daydream-card[data-theme="star"] {--dream-border:rgba(235,247,255,.86);--dream-orb:rgba(255,255,255,.48)}
.if-section .daydream-card[data-theme="day"] {--dream-border:rgba(203,243,255,.8);--dream-orb:rgba(167,229,255,.42)}
.if-section .daydream-card[data-theme="timeofday"] {--dream-border:rgba(196,204,255,.82);--dream-orb:rgba(174,190,255,.44)}
.if-section .daydream-card[data-theme="book"] {--dream-border:rgba(226,213,255,.8);--dream-orb:rgba(208,185,255,.42)}
.if-section .daydream-card[data-theme="weather"] {--dream-border:rgba(255,240,169,.82);--dream-orb:rgba(255,225,106,.44)}
.if-section .daydream-card[data-theme="dessert"] {--dream-border:rgba(255,218,232,.82);--dream-orb:rgba(255,171,200,.44)}
.if-section .daydream-card[data-theme="number"] {--dream-border:rgba(226,232,255,.8);--dream-orb:rgba(243,212,119,.44)}
.if-section .daydream-card[data-theme="planet"] {--dream-border:rgba(207,249,223,.82);--dream-orb:rgba(156,226,189,.44)}
.if-section .daydream-card[data-theme="cloth"] {--dream-border:rgba(255,218,237,.82);--dream-orb:rgba(255,209,124,.42)}
.if-section .daydream-card[data-theme="body"] {--dream-border:rgba(255,220,228,.82);--dream-orb:rgba(255,180,196,.44)}
.if-section .daydream-card[data-theme="wish"] {--dream-border:rgba(218,255,246,.8);--dream-orb:rgba(178,238,225,.42)}
.if-section .daydream-card:focus-within { border-color:color-mix(in srgb,var(--dream-accent) 82%,white); box-shadow:0 24px 64px rgba(0,0,0,.34),0 0 40px var(--dream-glow),inset 0 1px rgba(255,255,255,.16); }
.if-section .daydream-arrow:focus-visible { outline:2px solid var(--dream-accent); outline-offset:4px; box-shadow:0 0 26px var(--dream-glow); }
.if-section .daydream-copy {position:relative;z-index:2;max-width:78%;margin:auto 0}
.if-section .daydream-prompt {top:auto;margin:38px 0 22px;color:#f7f5ff;font-size:clamp(25px,2.6vw,38px);font-style:italic;font-weight:500;line-height:1.14;-webkit-text-stroke:0;text-shadow:0 2px 20px color-mix(in srgb,var(--dream-accent) 17%,transparent)}
.if-section .daydream-answer {top:auto;display:flex;max-width:620px;flex-direction:column;align-items:flex-start;gap:7px;margin:0;color:#f3f0fa;font-size:clamp(18px,1.5vw,22px);font-weight:400;line-height:1.34}
.if-section .daydream-answer-prefix {color:#b7c6e1;font:800 9px/1.3 var(--sans);letter-spacing:.25em;text-transform:uppercase}
.if-section .daydream-answer-value {max-width:100%;color:var(--dream-accent);font:500 clamp(36px,4.5vw,62px)/1.02 var(--serif);letter-spacing:-.035em;text-wrap:balance;text-shadow:0 0 28px var(--dream-glow)}
.if-section .daydream-answer-detail {max-width:560px;color:#f0ecfa;font:italic 500 clamp(17px,1.55vw,23px)/1.4 var(--serif)}
.if-section .daydream-progress {position:absolute;z-index:3;right:clamp(30px,4vw,54px);bottom:30px;left:clamp(30px,4vw,54px);display:flex;gap:8px}
.if-section .daydream-progress span {height:4px;min-width:4px;flex:1;border-radius:4px;background:rgba(194,215,245,.28);transition:background .35s ease,box-shadow .35s ease,transform .35s ease}
.if-section .daydream-progress span.is-complete {background:color-mix(in srgb,var(--dream-accent) 58%,#8da8d2)}
.if-section .daydream-progress span.is-current {background:var(--dream-accent);box-shadow:0 0 14px color-mix(in srgb,var(--dream-accent) 70%,transparent);transform:scaleY(1.45)}
.if-section .daydream-card > i {right:clamp(30px,4vw,54px);bottom:51px;color:var(--dream-accent);text-shadow:0 0 20px var(--dream-glow)}
.if-section .daydream-card:hover {border-color:color-mix(in srgb,var(--dream-accent) 80%,white);box-shadow:0 29px 72px rgba(0,0,0,.36),0 0 40px var(--dream-glow),inset 0 1px rgba(255,255,255,.16)}
.if-section .daydream-card .daydream-footnote:empty {display:none}
.if-section .daydream-card[data-theme="cloth"] .daydream-answer-value {font-size:clamp(34px,3.65vw,50px)}
@keyframes daydream-orbit {to {transform:rotate(1turn)}}
@media(max-width:900px) {
  .if-section .daydream-card {min-height:400px}
  .if-section .daydream-copy {max-width:80%}
}
@media(max-width:640px) {
  .if-section .daydream-card {min-height:350px;padding:25px 22px;border-radius:19px}
  .if-section .daydream-card::after {inset:10px;border-radius:13px}
  .if-section .daydream-meta {max-width:74%;font-size:8px;letter-spacing:.16em;gap:8px}
  .if-section .daydream-meta .daydream-divider {flex-basis:24px;width:24px;min-width:24px}
  .if-section .daydream-emblem {top:14px;right:20px;width:72px;opacity:.92}
  .if-section .daydream-symbol {font-size:33px}
  .if-section .daydream-copy {max-width:100%;margin:auto 0}
  .if-section .daydream-prompt {margin:34px 0 18px;font-size:27px}
  .if-section .daydream-answer-value {font-size:clamp(34px,10vw,48px)}
  .if-section .daydream-answer-detail {font-size:17px}
  .if-section .daydream-progress {right:25px;bottom:26px;left:25px;gap:4px}
  .if-section .daydream-card > i {right:25px;bottom:44px}
}
@media(prefers-reduced-motion:reduce) {
  .if-section .daydream-emblem::before,.if-section .daydream-symbol svg {animation:none}
  .if-section .daydream-card {animation:none;transition:none}
  .if-section .daydream-progress span,.if-section .daydream-arrow {transition:none}
}

/* Final soundtrack finish: give the closing playlist note room and presence. */
.songs-section .song-more { width:min(100%,1120px); gap:clamp(12px,2vw,24px); margin:clamp(34px,4vw,52px) auto 0; color:#c9c2dd; font:800 clamp(17px,1.85vw,23px)/1.35 "Manrope",var(--sans); letter-spacing:.13em; opacity:1; text-shadow:none; }
.songs-section .song-more::before,.songs-section .song-more::after { width:clamp(28px,5vw,76px); height:1px; flex:0 1 76px; background:linear-gradient(90deg,transparent,#9de5e2 45%,#c2b1ff); content:""; opacity:.72; }
.songs-section .song-more::after { transform:scaleX(-1); }
.songs-section .song-more span { background:none; color:#d9d3e8; -webkit-text-fill-color:currentColor; filter:none; text-shadow:none; animation:none; }
.songs-section .song-row { transition:opacity .65s ease var(--reveal-delay,0s),transform .48s cubic-bezier(.2,.75,.22,1),border-color .4s ease,box-shadow .45s ease,background .5s ease; }
.songs-section .song-row.is-playing { box-shadow:0 0 30px color-mix(in srgb,var(--song-accent) 23%,transparent),inset 0 0 34px color-mix(in srgb,var(--song-accent) 10%,transparent); }
.songs-section .song-row.is-playing .song-cover { border-color:color-mix(in srgb,var(--song-accent) 80%,white); box-shadow:inset 0 0 42px rgba(0,0,0,.2),0 0 20px color-mix(in srgb,var(--song-accent) 26%,transparent); }
.songs-section .song-row .play-button { transition:transform .28s cubic-bezier(.2,.8,.2,1),filter .28s,box-shadow .32s; }
.songs-section .song-row .play-button:active { transform:scale(.94); }
.songs-section .play-button.is-paused { padding:0; }
.songs-section .song-pause-icon { display:block; width:16px; height:16px; fill:currentColor; }
.songs-section .song-memory-carousel { transition:transform .48s cubic-bezier(.2,.75,.22,1),border-color .5s ease,background .5s ease,box-shadow .5s ease; }
@keyframes playlist-note-glow { 0%,100% { background-position:0% center; filter:drop-shadow(0 0 8px rgba(194,177,255,.17)); } 50% { background-position:100% center; filter:drop-shadow(0 0 17px rgba(157,229,226,.34)); } }
@media (max-width:640px) {
  .songs-section .song-more { gap:0; margin-top:28px; padding:0 12px; font-size:clamp(14px,3.8vw,17px); letter-spacing:.09em; line-height:1.45; }
  .songs-section .song-more::before,.songs-section .song-more::after { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .songs-section .song-more span { animation:none; }
  .songs-section .song-row.is-playing .play-button { animation:none; }
  .songs-section .song-row,.songs-section .song-memory-carousel,.songs-section .song-row .play-button { transition:none; }
}

/* Quiz finish: borrow Our Day's soft sky, lilac, and candlelight tones. */
.quiz-section { --section-accent:#9bdcf2; }
.quiz-panel {
  border-color:rgba(155,220,242,.34);
  background:radial-gradient(ellipse at 8% 4%,rgba(96,191,220,.18),transparent 34%),radial-gradient(ellipse at 94% 10%,rgba(166,143,235,.17),transparent 35%),radial-gradient(ellipse at 64% 100%,rgba(255,202,102,.105),transparent 39%),linear-gradient(125deg,rgba(24,49,78,.96),rgba(20,27,57,.96) 56%,rgba(39,29,69,.94));
  background-size:160% 160%,160% 160%,160% 160%,100% 100%;
  box-shadow:0 24px 70px rgba(0,0,0,.22),inset 0 0 70px rgba(155,220,242,.055),0 0 38px rgba(157,229,226,.055);
  animation:quiz-aurora-shift 20s ease-in-out infinite alternate;
}
.quiz-panel::before { border-color:rgba(168,223,242,.16); box-shadow:0 0 0 20px rgba(157,229,226,.025),0 0 0 43px rgba(194,177,255,.025); }
.quiz-panel::after { border-color:rgba(255,214,110,.17); }
.quiz-intro .eyebrow { color:#9bdcf2; }
.quiz-intro h2 em { color:#9bdcf2; text-shadow:0 0 24px rgba(155,220,242,.12); }
.quiz-intro .sparkle { color:#ffd66e; text-shadow:0 0 16px rgba(255,214,110,.48); }
.quiz-round { transition:transform .32s cubic-bezier(.2,.8,.2,1),border-color .35s,background .4s,box-shadow .4s; }
.quiz-round.is-active { box-shadow:inset 0 0 25px color-mix(in srgb,var(--round-accent) 12%,transparent),0 0 22px color-mix(in srgb,var(--round-accent) 19%,transparent); }
.quiz-content .quiz-kind-label { color:#9bdcf2; }
.quiz-progress i b { transition:width .55s cubic-bezier(.22,.8,.24,1); background:linear-gradient(90deg,#9de5e2,#a8dff2,#c2b1ff,#ffd66e,#a8e5b7); box-shadow:0 0 15px rgba(157,229,226,.42); }
.quiz-question { text-shadow:0 4px 24px rgba(157,229,226,.1); }
.quiz-answers button { transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .32s,background .35s,color .3s,box-shadow .35s; }
.quiz-answers button.is-selected { box-shadow:0 0 0 1px color-mix(in srgb,var(--section-accent) 20%,transparent),0 9px 26px rgba(0,0,0,.2); }
.quiz-answers button.is-correct.is-selected { box-shadow:0 0 0 1px rgba(123,226,159,.25),0 0 24px rgba(123,226,159,.16); }
.quiz-answers button.is-wrong.is-selected { box-shadow:0 0 0 1px rgba(255,130,145,.24),0 0 22px rgba(255,130,145,.13); }
.quiz-feedback { transition:color .32s,border-color .32s,background .38s,box-shadow .38s; }
.quiz-feedback.is-correct { box-shadow:inset 0 0 22px rgba(71,207,128,.055); }
.quiz-feedback.is-wrong { box-shadow:inset 0 0 22px rgba(255,91,109,.05); }
.quiz-feedback.is-choice { border-left-color:#9de5e2; background:linear-gradient(100deg,rgba(157,229,226,.14),rgba(194,177,255,.07),rgba(255,255,255,.025)); color:#d9f5f2; box-shadow:inset 0 0 24px rgba(157,229,226,.045); }
.quiz-navigation button { transition:transform .28s cubic-bezier(.2,.8,.2,1),border-color .32s,background .35s,box-shadow .35s,color .3s; }
.quiz-navigation #quiz-next { border-color:rgba(157,229,226,.45); background:linear-gradient(105deg,rgba(157,229,226,.13),rgba(194,177,255,.13),rgba(255,214,110,.09)); color:#e5fbf8; }
.quiz-navigation #quiz-next:hover:not(:disabled) { border-color:#9de5e2; box-shadow:0 7px 24px rgba(157,229,226,.12); }
@keyframes quiz-aurora-shift { 0% { background-position:0% 0%,100% 0%,55% 100%,0 0; } 100% { background-position:48% 28%,64% 35%,18% 72%,0 0; } }
@media (prefers-reduced-motion:reduce) {
  .quiz-panel { animation:none; }
  .quiz-round,.quiz-progress i b,.quiz-answers button,.quiz-feedback,.quiz-navigation button { transition:none; }
}

/* Slide 06 rebuild: six portrait stars linked by one soft, living constellation. */
.constellation-section {
  --chapter-a:#55a9d5;
  --chapter-b:#a277cf;
  --section-accent:#9de5e2;
  position:relative;
  overflow:hidden;
  padding-top:clamp(86px,10vw,132px);
  padding-bottom:clamp(95px,11vw,150px);
}
.constellation-section .section-head { width:min(100%,1120px); margin:0 auto clamp(48px,6vw,76px); }
.constellation-section .section-kicker { color:#9de5e2; }
.constellation-section .section-kicker i { background:linear-gradient(90deg,#9de5e2,#b6a5f4 72%,transparent); }
.constellation-section .section-head h2 { max-width:690px; font-size:clamp(48px,6.5vw,82px); line-height:.98; letter-spacing:-.045em; }
.constellation-section .section-head h2 em { color:#a8dff2; text-shadow:0 0 28px rgba(168,223,242,.14); }
.constellation-section .section-note { max-width:290px; color:#c0cadd; }
.constellation-section::before {
  top:24%;
  width:min(1240px,112vw);
  background:radial-gradient(ellipse at 13% 55%,rgba(88,176,220,.12),transparent 35%),radial-gradient(ellipse at 49% 45%,rgba(145,128,221,.105),transparent 38%),radial-gradient(ellipse at 87% 48%,rgba(96,205,190,.09),transparent 34%);
  filter:blur(12px);
  animation:constellation-nebula-breathe 15s ease-in-out infinite alternate;
}
.constellation-section .constellation-grid {
  position:relative;
  z-index:0;
  width:min(100%,1240px);
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(14px,1.55vw,22px);
  padding:42px 7px 68px;
  overflow:visible;
}
.constellation-section .constellation-map {
  position:absolute;
  z-index:-1;
  top:50%;
  left:0;
  width:100%;
  height:100%;
  overflow:visible;
  transform:translateY(-50%);
  pointer-events:none;
}
.constellation-map-route,.constellation-map-trail { fill:none; stroke-linecap:round; stroke-linejoin:round; }
.constellation-map-route { stroke:rgba(173,207,245,.25); stroke-width:1.3; stroke-dasharray:2 9; }
.constellation-map-trail { stroke:url(#constellationGradient); stroke-width:2; stroke-dasharray:1 2300; filter:drop-shadow(0 0 5px rgba(157,229,226,.62)); animation:constellation-route-glide 9s ease-in-out infinite; }
.constellation-map-points circle { fill:#e9f8ff; stroke:rgba(157,229,226,.75); stroke-width:1.6; filter:drop-shadow(0 0 5px rgba(157,229,226,.82)); animation:constellation-point-glow 3.8s ease-in-out infinite alternate; }
.constellation-map-points circle:nth-child(2n) { fill:#fff2c5; stroke:#ffd66e; animation-delay:-1.8s; }
.constellation-section .constellation-card {
  --float-x:0px;
  --float-y:-12px;
  --float-time:7s;
  --star-tilt:0deg;
  position:relative;
  z-index:1;
  aspect-ratio:1 / 1;
  min-width:0;
  min-height:0;
  padding:clamp(13px,1.35vw,19px);
  overflow:hidden;
  isolation:isolate;
  border:1px solid color-mix(in srgb,var(--constellation-accent) 63%,rgba(218,230,249,.32));
  border-radius:3px 16px 3px 16px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--constellation-accent) 22%,rgba(18,28,47,.96)),rgba(10,16,30,.97) 78%);
  box-shadow:inset 0 1px rgba(255,255,255,.23),inset 0 0 0 1px rgba(255,255,255,.045),0 17px 34px rgba(0,0,0,.22),0 0 25px color-mix(in srgb,var(--constellation-accent) 17%,transparent);
  transform:rotate(var(--star-tilt));
  translate:0 0;
  will-change:translate;
  animation:constellation-card-float var(--float-time) cubic-bezier(.45,0,.55,1) var(--float-delay,0s) infinite;
  transition:translate .45s cubic-bezier(.2,.8,.2,1),border-color .42s ease,box-shadow .48s ease,background .45s ease;
}
.constellation-section .constellation-card:nth-of-type(1) { --constellation-accent:#ffd66e; --float-x:-12px; --float-back-x:12px; --float-y:-29px; --float-time:10.4s; --float-delay:-2.1s; --star-tilt:-1.6deg; }
.constellation-section .constellation-card:nth-of-type(2) { --constellation-accent:#9de5e2; --float-x:14px; --float-back-x:-14px; --float-y:-34px; --float-time:11.7s; --float-delay:-5s; --star-tilt:1.4deg; }
.constellation-section .constellation-card:nth-of-type(3) { --constellation-accent:#9ed9f0; --float-x:-13px; --float-back-x:13px; --float-y:-25px; --float-time:10.8s; --float-delay:-.8s; --star-tilt:-1.1deg; }
.constellation-section .constellation-card:nth-of-type(4) { --constellation-accent:#f2a4ce; --float-x:12px; --float-back-x:-12px; --float-y:-32px; --float-time:12.4s; --float-delay:-3.6s; --star-tilt:1.7deg; }
.constellation-section .constellation-card:nth-of-type(5) { --constellation-accent:#c2b1ff; --float-x:-14px; --float-back-x:14px; --float-y:-28px; --float-time:11.2s; --float-delay:-6.2s; --star-tilt:-1.5deg; }
.constellation-section .constellation-card:nth-of-type(6) { --constellation-accent:#b8e6c2; --float-x:13px; --float-back-x:-13px; --float-y:-33px; --float-time:12s; --float-delay:-1.5s; --star-tilt:1.2deg; }
.constellation-section .constellation-card > .constellation-photo { inset:1px; border-radius:2px 15px 2px 15px; opacity:.98; }
.constellation-section .constellation-photo img { object-position:center center; filter:brightness(.98) saturate(1.08) contrast(1.045); transform:scale(1); }
.constellation-section .constellation-photo::after {
  background:linear-gradient(180deg,rgba(7,12,26,.015) 0%,rgba(7,12,26,.035) 48%,rgba(7,12,26,.74) 100%),linear-gradient(135deg,color-mix(in srgb,var(--constellation-accent) 16%,transparent),transparent 72%);
}
.constellation-section .constellation-card::before {
  z-index:3;
  top:12px;
  right:13px;
  left:auto;
  width:auto;
  height:auto;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  content:"✦";
  color:#f7fbff;
  font:normal clamp(19px,2.1vw,27px)/1 Georgia,serif;
  text-shadow:0 0 5px #fff,0 0 15px var(--constellation-accent),0 0 26px color-mix(in srgb,var(--constellation-accent) 80%,transparent);
  animation:constellation-star-float 4.6s ease-in-out var(--float-delay,0s) infinite;
}
.constellation-section .constellation-card::after { content:none; }
.constellation-section .constellation-card > *:not(.constellation-photo) { z-index:4; }
.constellation-section .constellation-card h3 { gap:0; margin:auto 0 3px; font-size:clamp(22px,2.5vw,34px); line-height:.95; text-shadow:0 2px 15px rgba(0,0,0,.7); }
.constellation-section .constellation-initial { color:var(--constellation-accent); font-size:1.45em; text-shadow:0 0 21px color-mix(in srgb,var(--constellation-accent) 62%,transparent); }
.constellation-section .constellation-word { color:#fff; }
.constellation-section .constellation-card:hover { z-index:5; transform:rotate(0deg) scale(1.035); translate:0 -5px; border-color:color-mix(in srgb,var(--constellation-accent) 88%,white); box-shadow:inset 0 1px rgba(255,255,255,.28),0 22px 42px rgba(0,0,0,.29),0 0 32px color-mix(in srgb,var(--constellation-accent) 27%,transparent); }
.constellation-section .constellation-card:hover > .constellation-photo img { filter:brightness(1.04) saturate(1.16) contrast(1.06); }
.constellation-note-heading { display:flex; width:min(100%,1080px); align-items:center; gap:13px; margin:clamp(68px,7vw,92px) auto 15px; color:#9de5e2; }
.constellation-note-heading span { color:#ffd66e; font:normal 15px/1 Georgia,serif; text-shadow:0 0 12px rgba(255,214,110,.56); animation:constellation-star-float 4s ease-in-out infinite; }
.constellation-note-heading p { margin:0; color:#a9c4dd; font:800 8px/1.4 "Manrope",var(--sans); letter-spacing:.22em; }
.constellation-note-heading i { width:min(135px,16vw); height:1px; background:linear-gradient(90deg,rgba(157,229,226,.62),transparent); }
.constellation-section .constellation-notes { width:min(100%,1080px); grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 14px; margin:0 auto; }
.constellation-section .constellation-note {
  position:relative;
  min-height:89px;
  padding:15px 32px 15px 17px;
  border:1px solid color-mix(in srgb,var(--note-accent) 31%,rgba(176,187,216,.12));
  border-left:2px solid color-mix(in srgb,var(--note-accent) 75%,transparent);
  border-radius:2px 12px 2px 12px;
  background:linear-gradient(130deg,color-mix(in srgb,var(--note-accent) 9%,rgba(17,23,42,.9)),rgba(9,14,27,.74));
  box-shadow:inset 0 1px rgba(255,255,255,.05),0 8px 20px rgba(0,0,0,.12);
  transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .35s,box-shadow .4s,background .4s;
}
.constellation-section .constellation-note::after { position:absolute; top:15px; right:13px; color:var(--note-accent); content:"✧"; font:normal 14px/1 Georgia,serif; text-shadow:0 0 11px color-mix(in srgb,var(--note-accent) 65%,transparent); }
.constellation-section .constellation-note h3 { margin:0 0 5px; color:var(--note-accent); font-size:18px; }
.constellation-section .constellation-note p { color:#c0c9d8; font-size:11px; line-height:1.58; }
.constellation-section .constellation-note:hover { transform:translateY(-3px); border-color:color-mix(in srgb,var(--note-accent) 52%,rgba(255,255,255,.2)); box-shadow:0 12px 27px rgba(0,0,0,.18),0 0 20px color-mix(in srgb,var(--note-accent) 10%,transparent); }
@keyframes constellation-card-float { 0%,100% { translate:0 8px; } 25% { translate:var(--float-x,8px) -8px; } 50% { translate:0 var(--float-y,-28px); } 75% { translate:var(--float-back-x,-8px) -8px; } }
@keyframes constellation-star-float { 0%,100% { transform:translateY(0) scale(.93); opacity:.8; } 50% { transform:translateY(-5px) scale(1.12); opacity:1; } }
@keyframes constellation-route-glide { 0%,100% { stroke-dashoffset:0; opacity:.35; } 50% { stroke-dashoffset:-1150; opacity:.86; } }
@keyframes constellation-point-glow { from { opacity:.62; filter:drop-shadow(0 0 2px rgba(157,229,226,.38)); } to { opacity:1; filter:drop-shadow(0 0 8px rgba(157,229,226,.95)); } }
@keyframes constellation-nebula-breathe { from { opacity:.72; transform:translateX(-50%) scale(.98); } to { opacity:1; transform:translateX(-50%) scale(1.04); } }
@media (max-width:900px) {
  .constellation-section .constellation-grid { grid-auto-columns:minmax(150px,19vw); padding-top:28px; padding-bottom:36px; }
  .constellation-section .constellation-map { display:none; }
  .constellation-section .constellation-card { aspect-ratio:1 / 1; }
  .constellation-section .constellation-notes { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px) {
  .constellation-section .section-head { margin-bottom:32px; }
  .constellation-section .section-head h2 { font-size:clamp(42px,12vw,62px); }
  .constellation-section .constellation-grid { grid-auto-columns:clamp(148px,43vw,188px); gap:17px; padding:30px 14px 48px; }
  .constellation-section .constellation-card { padding:15px; }
  .constellation-section .constellation-card h3 { font-size:clamp(23px,7vw,30px); }
  .constellation-section .constellation-notes { grid-template-columns:1fr; gap:9px; }
  .constellation-section .constellation-note { min-height:0; }
}
@media (prefers-reduced-motion:reduce) {
  .constellation-section::before,.constellation-section .constellation-card,.constellation-section .constellation-card::before,.constellation-map-trail,.constellation-map-points circle,.constellation-note-heading span { animation:none !important; }
  .constellation-section .constellation-card,.constellation-section .constellation-note { transition:none; will-change:auto; }
}

/* Small balance pass: cleaner square frames, a tighter constellation, freer drift. */
.constellation-section .constellation-grid { width:min(100%,1160px); gap:clamp(8px,1vw,14px); }
.constellation-section .constellation-card {
  border-radius:3px;
  border-color:color-mix(in srgb,var(--constellation-accent) 56%,rgba(218,230,249,.5));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 14px 30px rgba(0,0,0,.23),0 0 20px color-mix(in srgb,var(--constellation-accent) 14%,transparent);
  animation-duration:var(--float-time);
  animation-timing-function:cubic-bezier(.42,0,.58,1);
}
.constellation-section .constellation-card:nth-of-type(1) { --float-x:-8px; --float-back-x:7px; --float-y:-27px; --float-down-y:22px; --float-time:7.8s; }
.constellation-section .constellation-card:nth-of-type(2) { --float-x:8px; --float-back-x:-7px; --float-y:-31px; --float-down-y:26px; --float-time:8.6s; }
.constellation-section .constellation-card:nth-of-type(3) { --float-x:-7px; --float-back-x:8px; --float-y:-24px; --float-down-y:20px; --float-time:7.5s; }
.constellation-section .constellation-card:nth-of-type(4) { --float-x:7px; --float-back-x:-8px; --float-y:-29px; --float-down-y:27px; --float-time:8.9s; }
.constellation-section .constellation-card:nth-of-type(5) { --float-x:-8px; --float-back-x:7px; --float-y:-26px; --float-down-y:23px; --float-time:8.1s; }
.constellation-section .constellation-card:nth-of-type(6) { --float-x:8px; --float-back-x:-7px; --float-y:-30px; --float-down-y:25px; --float-time:8.7s; }
.constellation-section .constellation-card > .constellation-photo { border-radius:2px; }
.constellation-section .constellation-card::after {
  position:absolute;
  z-index:3;
  inset:5px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:1px;
  content:"";
  opacity:.72;
  pointer-events:none;
}
@keyframes constellation-card-float {
  0%,100% { translate:0 0; }
  22% { translate:var(--float-x,7px) -16px; }
  48% { translate:var(--float-back-x,-7px) var(--float-y,-28px); }
  73% { translate:var(--float-x,7px) var(--float-down-y,22px); }
  88% { translate:var(--float-back-x,-7px) 8px; }
}
@media (max-width:900px) {
  .constellation-section .constellation-grid { gap:clamp(8px,1.2vw,13px); }
}
@media (max-width:640px) {
  .constellation-section .constellation-grid { grid-auto-columns:clamp(142px,40vw,176px); gap:11px; }
}

/* Make the six portraits move as one gentle wave from left to right. */
.constellation-section .constellation-card {
  --float-time:8.2s;
  --float-x:8px;
  --float-back-x:-8px;
  --star-tilt:0deg;
  animation-duration:8.2s;
  animation-timing-function:cubic-bezier(.42,0,.58,1);
}
.constellation-section .constellation-card:nth-of-type(1) { --float-x:8px; --float-back-x:-8px; --float-delay:0s; --star-tilt:0deg; }
.constellation-section .constellation-card:nth-of-type(2) { --float-x:8px; --float-back-x:-8px; --float-delay:-1.37s; --star-tilt:0deg; }
.constellation-section .constellation-card:nth-of-type(3) { --float-x:8px; --float-back-x:-8px; --float-delay:-2.73s; --star-tilt:0deg; }
.constellation-section .constellation-card:nth-of-type(4) { --float-x:8px; --float-back-x:-8px; --float-delay:-4.1s; --star-tilt:0deg; }
.constellation-section .constellation-card:nth-of-type(5) { --float-x:8px; --float-back-x:-8px; --float-delay:-5.47s; --star-tilt:0deg; }
.constellation-section .constellation-card:nth-of-type(6) { --float-x:8px; --float-back-x:-8px; --float-delay:-6.83s; --star-tilt:0deg; }
.constellation-section .constellation-card::before { animation-duration:8.2s; animation-timing-function:cubic-bezier(.42,0,.58,1); }
.constellation-map-trail { animation-duration:8.2s; animation-timing-function:cubic-bezier(.42,0,.58,1); }
.constellation-map-points circle { animation-duration:8.2s; }
.constellation-map-points circle:nth-child(1) { animation-delay:0s; }
.constellation-map-points circle:nth-child(2) { animation-delay:-1.37s; }
.constellation-map-points circle:nth-child(3) { animation-delay:-2.73s; }
.constellation-map-points circle:nth-child(4) { animation-delay:-4.1s; }
.constellation-map-points circle:nth-child(5) { animation-delay:-5.47s; }
.constellation-map-points circle:nth-child(6) { animation-delay:-6.83s; }
@keyframes constellation-card-float {
  0%,100% { translate:0 0; }
  25% { translate:var(--float-x,8px) -27px; }
  50% { translate:0 1px; }
  75% { translate:var(--float-back-x,-8px) 19px; }
}

/* Borderless portrait finish: let each image edge dissolve into its own glow. */
.constellation-section .constellation-grid { width:min(100%,1100px); gap:clamp(8px,.9vw,12px); }
.constellation-section .constellation-card {
  border:0;
  border-radius:5px;
  background:transparent;
  box-shadow:0 13px 27px rgba(0,0,0,.24),0 0 23px color-mix(in srgb,var(--constellation-accent) 20%,transparent);
}
.constellation-section .constellation-card::after { content:none; }
.constellation-section .constellation-card > .constellation-photo { inset:0; border:0; border-radius:5px; }
.constellation-section .constellation-photo::after {
  background:linear-gradient(180deg,rgba(7,12,26,.01) 0%,rgba(7,12,26,.015) 50%,rgba(7,12,26,.68) 100%),linear-gradient(112deg,color-mix(in srgb,var(--constellation-accent) 15%,transparent),transparent 34%,transparent 70%,color-mix(in srgb,var(--constellation-accent) 12%,transparent)),radial-gradient(ellipse at 0% 50%,color-mix(in srgb,var(--constellation-accent) 16%,transparent),transparent 44%),radial-gradient(ellipse at 100% 50%,color-mix(in srgb,var(--constellation-accent) 13%,transparent),transparent 44%);
}
.constellation-section .constellation-card:hover {
  border:0;
  box-shadow:0 18px 35px rgba(0,0,0,.27),0 0 32px color-mix(in srgb,var(--constellation-accent) 30%,transparent);
}
@media (max-width:900px) {
  .constellation-section .constellation-grid { grid-auto-columns:minmax(140px,17.5vw); gap:9px; }
}
@media (max-width:640px) {
  .constellation-section .constellation-grid { grid-auto-columns:clamp(136px,38.5vw,168px); gap:10px; }
}

/* Coordinated constellation paths: paired stars trace three distinct arcs. */
.constellation-section .constellation-grid { gap:clamp(12px,1.1vw,16px); }
.constellation-section .constellation-card {
  border:0;
  border-radius:0;
  box-shadow:0 14px 30px rgba(0,0,0,.2),0 0 25px color-mix(in srgb,var(--constellation-accent) 22%,transparent);
  animation:constellation-drift-a 9.6s cubic-bezier(.45,.05,.55,.95) infinite;
  transition:box-shadow .45s ease,filter .45s ease;
}
.constellation-section .constellation-card > .constellation-photo { border:0; border-radius:0; box-shadow:none; }
.constellation-section .constellation-card:nth-of-type(2),
.constellation-section .constellation-card:nth-of-type(5) { animation-name:constellation-drift-b; animation-delay:-3.2s; }
.constellation-section .constellation-card:nth-of-type(3),
.constellation-section .constellation-card:nth-of-type(6) { animation-name:constellation-drift-c; animation-delay:-6.4s; }
.constellation-section .constellation-card:nth-of-type(4) { animation-delay:-.18s; }
.constellation-section .constellation-card:nth-of-type(5) { animation-delay:-3.38s; }
.constellation-section .constellation-card:nth-of-type(6) { animation-delay:-6.58s; }
.constellation-section .constellation-card::before { animation-duration:9.6s; animation-delay:inherit; }
.constellation-section .constellation-card:hover {
  border:0;
  box-shadow:0 18px 35px rgba(0,0,0,.25),0 0 32px color-mix(in srgb,var(--constellation-accent) 32%,transparent);
}
.constellation-section .constellation-card:hover > .constellation-photo { border:0; border-radius:0; box-shadow:none; }
@keyframes constellation-drift-a {
  0%,100% { translate:0 0; }
  18% { translate:-7px -12px; }
  39% { translate:-3px -21px; }
  61% { translate:8px -12px; }
  82% { translate:5px 9px; }
}
@keyframes constellation-drift-b {
  0%,100% { translate:0 0; }
  20% { translate:8px -9px; }
  43% { translate:3px -21px; }
  66% { translate:-8px -5px; }
  84% { translate:-4px 12px; }
}
@keyframes constellation-drift-c {
  0%,100% { translate:0 0; }
  17% { translate:-6px 9px; }
  41% { translate:5px 19px; }
  64% { translate:9px -5px; }
  83% { translate:-7px -14px; }
}
@media (max-width:900px) {
  .constellation-section .constellation-grid { gap:12px; }
}
@media (max-width:640px) {
  .constellation-section .constellation-grid { gap:12px; }
}

/* Slide 06 polish: more vertical travel, edge-safe labels, richer meaning panels. */
.constellation-section .constellation-card { animation-duration:11.7s; animation-timing-function:cubic-bezier(.42,.04,.58,.96); }
.constellation-section .constellation-card:nth-of-type(1),.constellation-section .constellation-card:nth-of-type(4) { animation-name:constellation-lift-arc; }
.constellation-section .constellation-card:nth-of-type(2),.constellation-section .constellation-card:nth-of-type(5) { animation-name:constellation-sail-arc; animation-delay:-3.9s; }
.constellation-section .constellation-card:nth-of-type(3),.constellation-section .constellation-card:nth-of-type(6) { animation-name:constellation-dip-arc; animation-delay:-7.8s; }
.constellation-section .constellation-card:nth-of-type(4) { animation-delay:-.24s; }
.constellation-section .constellation-card:nth-of-type(5) { animation-delay:-4.14s; }
.constellation-section .constellation-card:nth-of-type(6) { animation-delay:-8.04s; }
@keyframes constellation-lift-arc { 0%,100%{translate:0 0} 18%{translate:-6px -24px} 37%{translate:2px -48px} 55%{translate:8px -30px} 74%{translate:5px 12px} 88%{translate:-3px 34px} }
@keyframes constellation-sail-arc { 0%,100%{translate:0 0} 17%{translate:7px 20px} 36%{translate:5px 46px} 56%{translate:-7px 32px} 75%{translate:-6px -12px} 88%{translate:2px -35px} }
@keyframes constellation-dip-arc { 0%,100%{translate:0 0} 16%{translate:-7px 17px} 35%{translate:-3px -18px} 54%{translate:7px -47px} 74%{translate:6px -16px} 89%{translate:-2px 31px} }
.constellation-section .constellation-card h3 {
  position:absolute; z-index:4; display:flex; width:max-content; max-width:calc(100% - 28px); align-items:baseline; gap:0; margin:0; padding:8px 12px 7px;
  border:0; border-radius:0; background:linear-gradient(100deg,rgba(6,13,27,.83),rgba(6,13,27,.5)); box-shadow:0 5px 17px rgba(0,0,0,.18);
  color:#fff; font-size:clamp(18px,2vw,25px); line-height:1; text-shadow:0 2px 9px rgba(0,0,0,.72); backdrop-filter:blur(5px);
}
.constellation-section .constellation-card:nth-of-type(1) h3 { bottom:14px; left:12px; }
.constellation-section .constellation-card:nth-of-type(2) h3 { right:12px; bottom:21px; }
.constellation-section .constellation-card:nth-of-type(3) h3 { bottom:17px; left:50%; translate:-50% 0; }
.constellation-section .constellation-card:nth-of-type(4) h3 { right:12px; bottom:13px; }
.constellation-section .constellation-card:nth-of-type(5) h3 { bottom:23px; left:12px; }
.constellation-section .constellation-card:nth-of-type(6) h3 { right:12px; bottom:16px; }
.constellation-section .constellation-initial { font-size:1em; text-shadow:0 0 13px color-mix(in srgb,var(--constellation-accent) 55%,transparent); }
.constellation-section .constellation-notes { gap:15px; }
.constellation-section .constellation-note {
  min-height:112px; padding:18px 23px 20px; border:0; border-left:2px solid color-mix(in srgb,var(--note-accent) 80%,white); border-radius:0;
  background:radial-gradient(ellipse at 96% 5%,color-mix(in srgb,var(--note-accent) 19%,transparent),transparent 43%),linear-gradient(135deg,color-mix(in srgb,var(--note-accent) 12%,rgba(22,31,52,.95)),rgba(10,16,30,.91) 76%);
  box-shadow:inset 1px 0 0 color-mix(in srgb,var(--note-accent) 15%,transparent),0 13px 28px rgba(0,0,0,.17); transition:transform .42s cubic-bezier(.2,.8,.2,1),box-shadow .42s ease,background .42s ease;
}
.constellation-section .constellation-note::after { top:18px; right:17px; font-size:18px; }
.constellation-section .constellation-note::before { position:absolute; right:22px; bottom:0; left:22px; height:2px; background:linear-gradient(90deg,color-mix(in srgb,var(--note-accent) 70%,transparent),transparent 86%); content:""; opacity:.58; transform:scaleX(.52); transform-origin:left; transition:transform .42s ease,opacity .42s ease; }
.constellation-section .constellation-note h3 { margin:0 0 7px; font-size:21px; text-shadow:0 0 17px color-mix(in srgb,var(--note-accent) 19%,transparent); }
.constellation-section .constellation-note p { max-width:34ch; color:#d1d8e5; font-size:12px; line-height:1.68; }
.constellation-section .constellation-note:hover { transform:translateY(-4px); border:0; border-left:2px solid color-mix(in srgb,var(--note-accent) 96%,white); background:radial-gradient(ellipse at 96% 5%,color-mix(in srgb,var(--note-accent) 25%,transparent),transparent 48%),linear-gradient(135deg,color-mix(in srgb,var(--note-accent) 17%,rgba(22,31,52,.97)),rgba(10,16,30,.93) 76%); box-shadow:inset 1px 0 0 color-mix(in srgb,var(--note-accent) 24%,transparent),0 18px 34px rgba(0,0,0,.22),0 0 23px color-mix(in srgb,var(--note-accent) 11%,transparent); }
.constellation-section .constellation-note:hover::before { transform:scaleX(1); opacity:.95; }
@media (max-width:900px) { .constellation-section .constellation-card h3 { font-size:clamp(17px,2.7vw,22px); padding:7px 10px; } .constellation-section .constellation-notes { gap:12px; } }
@media (max-width:640px) {
  .constellation-section .constellation-card:nth-of-type(3) h3 { left:12px; translate:0 0; }
  .constellation-section .constellation-card:nth-of-type(4) h3 { bottom:24px; }
  .constellation-section .constellation-card:nth-of-type(5) h3 { bottom:13px; }
  .constellation-section .constellation-card:nth-of-type(6) h3 { bottom:22px; }
  .constellation-section .constellation-note { min-height:96px; padding:15px 20px 17px; }
}
@media (prefers-reduced-motion:reduce) { .constellation-section .constellation-card { animation:none !important; } }

/* Restore the earlier editorial lettering and fit each final constellation name. */
.constellation-section .constellation-card:nth-of-type(1) { --constellation-accent:#f7cd73; }
.constellation-section .constellation-card:nth-of-type(2) { --constellation-accent:#6ebfd5; }
.constellation-section .constellation-card:nth-of-type(3) { --constellation-accent:#f2b3d0; }
.constellation-section .constellation-card:nth-of-type(4) { --constellation-accent:#b5c2ff; }
.constellation-section .constellation-card:nth-of-type(5) { --constellation-accent:#a8e1b4; }
.constellation-section .constellation-card:nth-of-type(6) { --constellation-accent:#958de5; }
.constellation-section .constellation-card h3 {
  top:auto;
  bottom:15px;
  left:13px;
  right:auto;
  width:max-content;
  max-width:calc(100% - 26px);
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  font-family:"Cormorant Garamond",var(--serif);
  font-size:clamp(21px,2.35vw,30px);
  font-weight:600;
  line-height:.95;
  letter-spacing:-.035em;
  text-shadow:0 2px 12px rgba(0,0,0,.82);
  backdrop-filter:none;
  white-space:nowrap;
}
.constellation-section .constellation-card:nth-of-type(2) h3,
.constellation-section .constellation-card:nth-of-type(3) h3,
.constellation-section .constellation-card:nth-of-type(6) h3 { right:13px; left:auto; }
.constellation-section .constellation-card:nth-of-type(4) h3 { bottom:21px; }
.constellation-section .constellation-card:nth-of-type(5) h3 { bottom:18px; }
.constellation-section .constellation-initial { font-size:1.22em; line-height:.8; text-shadow:0 0 15px color-mix(in srgb,var(--constellation-accent) 48%,transparent); }
.constellation-section .constellation-word { color:#fff; }
.constellation-section .constellation-notes .constellation-note:nth-child(1) { --note-accent:#f7cd73; }
.constellation-section .constellation-notes .constellation-note:nth-child(2) { --note-accent:#6ebfd5; }
.constellation-section .constellation-notes .constellation-note:nth-child(3) { --note-accent:#f2b3d0; }
.constellation-section .constellation-notes .constellation-note:nth-child(4) { --note-accent:#b5c2ff; }
.constellation-section .constellation-notes .constellation-note:nth-child(5) { --note-accent:#a8e1b4; }
.constellation-section .constellation-notes .constellation-note:nth-child(6) { --note-accent:#958de5; }
.constellation-section .constellation-note { min-height:142px; padding:20px 23px 23px; }
.constellation-section .constellation-note h3 { margin-bottom:8px; font-size:22px; }
.constellation-section .constellation-note p { max-width:40ch; color:#e0e4ee; font:500 16px/1.48 "Cormorant Garamond",var(--serif); }
@media (max-width:900px) {
  .constellation-section .constellation-card h3 { font-size:clamp(19px,3vw,25px); }
  .constellation-section .constellation-note { min-height:132px; }
}
@media (max-width:640px) {
  .constellation-section .constellation-card h3 { font-size:20px; }
  .constellation-section .constellation-note { min-height:0; padding:17px 20px 20px; }
  .constellation-section .constellation-note p { font-size:16px; }
}

/* Keep the names as one legible line along the bottom edge of each portrait. */
.constellation-section .constellation-card h3 {
  position:absolute;
  top:auto;
  right:auto;
  bottom:13px;
  left:13px;
  display:block;
  width:max-content;
  max-width:calc(100% - 26px);
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  color:color-mix(in srgb,var(--constellation-accent) 48%,white);
  font:700 clamp(22px,2.5vw,30px)/1 "Cormorant Garamond",var(--serif);
  letter-spacing:-.025em;
  text-align:left;
  text-shadow:0 2px 13px rgba(0,0,0,.95),0 0 1px rgba(255,255,255,.7);
  white-space:nowrap;
  backdrop-filter:none;
}
.constellation-section .constellation-card:nth-of-type(4) h3 { bottom:16px; }
.constellation-section .constellation-card:nth-of-type(5) h3 { bottom:12px; }
.constellation-section .constellation-card:nth-of-type(6) h3 { bottom:15px; }
/* One shared cycle, three interlocking paths; mostly vertical, with no row-wide wave. */
.constellation-section .constellation-card { animation-duration:13.2s; animation-timing-function:cubic-bezier(.42,.02,.58,.98); }
.constellation-section .constellation-card:nth-of-type(1),.constellation-section .constellation-card:nth-of-type(4) { animation-name:constellation-drift-lift; }
.constellation-section .constellation-card:nth-of-type(2),.constellation-section .constellation-card:nth-of-type(5) { animation-name:constellation-drift-sail; animation-delay:-4.4s; }
.constellation-section .constellation-card:nth-of-type(3),.constellation-section .constellation-card:nth-of-type(6) { animation-name:constellation-drift-turn; animation-delay:-8.8s; }
.constellation-section .constellation-card:nth-of-type(4) { animation-delay:-.18s; }
.constellation-section .constellation-card:nth-of-type(5) { animation-delay:-4.58s; }
.constellation-section .constellation-card:nth-of-type(6) { animation-delay:-8.98s; }
@keyframes constellation-drift-lift { 0%,100%{translate:0 0} 23%{translate:-4px -17px} 48%{translate:2px -34px} 70%{translate:6px -18px} 88%{translate:2px 15px} }
@keyframes constellation-drift-sail { 0%,100%{translate:0 0} 22%{translate:5px 16px} 47%{translate:1px 33px} 69%{translate:-6px 15px} 88%{translate:-2px -16px} }
@keyframes constellation-drift-turn { 0%,100%{translate:0 0} 20%{translate:-5px 12px} 43%{translate:-2px -22px} 65%{translate:5px -32px} 86%{translate:4px 18px} }
@media (max-width:640px) {
  .constellation-section .constellation-card h3 { font-size:21px; }
  .constellation-section .constellation-card { animation-duration:12s; }
}

/* Clear legacy per-card offsets: every title sits safely at the lower-left. */
.constellation-section .constellation-card:nth-of-type(1) h3,
.constellation-section .constellation-card:nth-of-type(2) h3,
.constellation-section .constellation-card:nth-of-type(3) h3,
.constellation-section .constellation-card:nth-of-type(4) h3,
.constellation-section .constellation-card:nth-of-type(5) h3,
.constellation-section .constellation-card:nth-of-type(6) h3 {
  position:absolute;
  top:auto;
  right:auto;
  bottom:12px;
  left:12px;
  translate:0 0;
  width:max-content;
  max-width:calc(100% - 24px);
  white-space:nowrap;
}
.constellation-section .constellation-card:nth-of-type(3) h3 { font-size:clamp(19px,2.15vw,26px); }

/* Let the eyes be the only stars inside each portrait; finish with a quiet edge tint. */
.constellation-section .constellation-card::before { content:none; display:none; animation:none; }
.constellation-section .constellation-card {
  box-shadow:inset 2px 0 0 color-mix(in srgb,var(--constellation-accent) 24%,transparent),inset -2px 0 0 color-mix(in srgb,var(--constellation-accent) 17%,transparent),0 14px 30px rgba(0,0,0,.2),0 0 24px color-mix(in srgb,var(--constellation-accent) 19%,transparent);
}
.constellation-section .constellation-photo::after {
  background:linear-gradient(180deg,rgba(7,12,26,.01) 0%,rgba(7,12,26,.015) 50%,rgba(7,12,26,.68) 100%),linear-gradient(90deg,color-mix(in srgb,var(--constellation-accent) 22%,transparent),transparent 12%,transparent 88%,color-mix(in srgb,var(--constellation-accent) 17%,transparent)),linear-gradient(112deg,color-mix(in srgb,var(--constellation-accent) 11%,transparent),transparent 38%,transparent 70%,color-mix(in srgb,var(--constellation-accent) 9%,transparent));
}
.constellation-section .constellation-card:hover {
  box-shadow:inset 2px 0 0 color-mix(in srgb,var(--constellation-accent) 38%,transparent),inset -2px 0 0 color-mix(in srgb,var(--constellation-accent) 31%,transparent),0 18px 35px rgba(0,0,0,.25),0 0 30px color-mix(in srgb,var(--constellation-accent) 26%,transparent);
}

/* Give every name a small signature initial, with a traceable portrait watermark. */
.constellation-section .constellation-card h3 .constellation-name-initial {
  display:inline-block;
  margin-right:.015em;
  color:color-mix(in srgb,var(--constellation-accent) 76%,#fff);
  font-size:1.22em;
  font-weight:700;
  line-height:.82;
  text-shadow:0 0 10px color-mix(in srgb,var(--constellation-accent) 42%,transparent),0 2px 13px rgba(0,0,0,.92);
  transform:translateY(.035em);
}
.constellation-section .constellation-card::after {
  position:absolute;
  z-index:2;
  top:9%;
  right:8%;
  color:color-mix(in srgb,var(--constellation-accent) 82%,white);
  content:attr(data-letter);
  font:500 clamp(76px,9vw,124px)/1 "Cormorant Garamond",var(--serif);
  opacity:.13;
  pointer-events:none;
  text-shadow:0 0 28px color-mix(in srgb,var(--constellation-accent) 50%,transparent);
  transition:opacity .6s ease,transform .8s cubic-bezier(.2,.8,.2,1);
}
.constellation-section .constellation-card:hover::after { opacity:.22; transform:translate(-3px,3px); }
.constellation-section .constellation-photo img {
  filter:brightness(1.01) saturate(1.2) contrast(1.055);
  animation:constellation-portrait-breathe 18s ease-in-out infinite alternate;
}
.constellation-section .constellation-card:nth-of-type(2) .constellation-photo img { animation-delay:-5s; }
.constellation-section .constellation-card:nth-of-type(3) .constellation-photo img { animation-delay:-10s; }
.constellation-section .constellation-card:nth-of-type(4) .constellation-photo img { animation-delay:-3s; }
.constellation-section .constellation-card:nth-of-type(5) .constellation-photo img { animation-delay:-8s; }
.constellation-section .constellation-card:nth-of-type(6) .constellation-photo img { animation-delay:-13s; }
@keyframes constellation-portrait-breathe {
  from { transform:scale(1.015); filter:brightness(.99) saturate(1.13) contrast(1.04); }
  to { transform:scale(1.065) translate3d(0,-.35%,0); filter:brightness(1.045) saturate(1.23) contrast(1.06); }
}
@media (prefers-reduced-motion:reduce) {
  .constellation-section .constellation-photo img { animation:none; }
}

/* Make each initial unmistakable and give the portraits a little more life. */
.constellation-section .constellation-card h3 .constellation-name-initial {
  color:color-mix(in srgb,var(--constellation-accent) 86%,#fff);
  font-size:1.52em;
  text-shadow:0 0 3px rgba(255,255,255,.55),0 0 15px color-mix(in srgb,var(--constellation-accent) 72%,transparent),0 3px 14px rgba(0,0,0,.95);
}
.constellation-section .constellation-card::after {
  top:7%;
  right:7%;
  font-size:clamp(88px,10vw,138px);
  opacity:.22;
  text-shadow:0 0 2px rgba(255,255,255,.25),0 0 34px color-mix(in srgb,var(--constellation-accent) 58%,transparent);
}
.constellation-section .constellation-card:nth-of-type(even)::after { right:auto; left:7%; }
.constellation-section .constellation-card:hover::after { opacity:.3; }
.constellation-section .constellation-card { rotate:-1deg; animation-duration:11.8s; }
.constellation-section .constellation-card:nth-of-type(2) { rotate:1.15deg; }
.constellation-section .constellation-card:nth-of-type(3) { rotate:-.75deg; }
.constellation-section .constellation-card:nth-of-type(4) { rotate:1deg; }
.constellation-section .constellation-card:nth-of-type(5) { rotate:-1.15deg; }
.constellation-section .constellation-card:nth-of-type(6) { rotate:.8deg; }
.constellation-section .constellation-card:hover { rotate:0deg; }
@keyframes constellation-drift-lift { 0%,100%{translate:0 0} 22%{translate:-6px -19px} 48%{translate:3px -40px} 72%{translate:8px -16px} 88%{translate:2px 17px} }
@keyframes constellation-drift-sail { 0%,100%{translate:0 0} 22%{translate:7px 17px} 47%{translate:2px 39px} 69%{translate:-8px 14px} 88%{translate:-3px -18px} }
@keyframes constellation-drift-turn { 0%,100%{translate:0 0} 20%{translate:-7px 13px} 43%{translate:-3px -25px} 65%{translate:7px -39px} 86%{translate:5px 19px} }
@media (max-width:640px) {
  .constellation-section .constellation-card::after { font-size:clamp(66px,20vw,92px); }
  .constellation-section .constellation-card h3 .constellation-name-initial { font-size:1.38em; }
  .constellation-section .constellation-card { rotate:0deg; animation-duration:12.6s; }
}

/* Final constellation finish: clear portraits, luminous names, and star-chart definitions. */
.constellation-section .constellation-card::after { content:none; display:none; }
.constellation-section .constellation-card {
  border:0;
  background:linear-gradient(155deg,color-mix(in srgb,var(--constellation-accent) 15%,rgba(10,17,34,.96)),rgba(8,14,29,.94) 78%);
  box-shadow:inset 1px 0 color-mix(in srgb,var(--constellation-accent) 44%,transparent),inset -1px 0 color-mix(in srgb,var(--constellation-accent) 25%,transparent),0 16px 38px rgba(0,0,0,.25),0 0 25px color-mix(in srgb,var(--constellation-accent) 17%,transparent);
  transition:rotate .8s cubic-bezier(.2,.8,.2,1),box-shadow .65s ease,filter .65s ease;
}
.constellation-section .constellation-card:hover {
  filter:brightness(1.08);
  box-shadow:inset 1px 0 color-mix(in srgb,var(--constellation-accent) 72%,white),inset -1px 0 color-mix(in srgb,var(--constellation-accent) 48%,white),0 22px 46px rgba(0,0,0,.32),0 0 34px color-mix(in srgb,var(--constellation-accent) 28%,transparent);
}
.constellation-section .constellation-card h3 .constellation-name-initial {
  font-size:1.48em;
  color:color-mix(in srgb,var(--constellation-accent) 78%,white);
  text-shadow:0 0 3px rgba(255,255,255,.55),0 0 16px color-mix(in srgb,var(--constellation-accent) 62%,transparent),0 3px 14px rgba(0,0,0,.95);
}
.constellation-section .constellation-photo img {
  filter:brightness(1.025) saturate(1.19) contrast(1.06);
  animation-duration:21s;
}
.constellation-section .constellation-photo::after {
  background:linear-gradient(180deg,rgba(7,12,26,.015) 0%,rgba(7,12,26,.02) 56%,rgba(7,12,26,.72) 100%),linear-gradient(125deg,color-mix(in srgb,var(--constellation-accent) 19%,transparent),transparent 47%,transparent 76%,color-mix(in srgb,var(--constellation-accent) 12%,transparent));
  animation:constellation-photo-color-breathe 10s ease-in-out infinite alternate;
}
.constellation-section .constellation-card:nth-of-type(even) .constellation-photo::after { animation-delay:-5s; }
@keyframes constellation-photo-color-breathe {
  from { opacity:.76; }
  to { opacity:1; }
}
.constellation-section .constellation-note {
  position:relative;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--note-accent) 30%,rgba(210,222,248,.13));
  border-left:2px solid color-mix(in srgb,var(--note-accent) 78%,white);
  background:radial-gradient(ellipse at 100% 0%,color-mix(in srgb,var(--note-accent) 20%,transparent),transparent 48%),linear-gradient(145deg,color-mix(in srgb,var(--note-accent) 10%,rgba(19,27,48,.96)),rgba(8,14,28,.94) 78%);
  box-shadow:inset 0 1px rgba(255,255,255,.08),0 12px 30px rgba(0,0,0,.2),0 0 18px color-mix(in srgb,var(--note-accent) 8%,transparent);
  transition:transform .55s cubic-bezier(.2,.8,.2,1),border-color .45s ease,background .55s ease,box-shadow .55s ease;
}
.constellation-section .constellation-note::after {
  top:14px;
  right:15px;
  color:color-mix(in srgb,var(--note-accent) 80%,white);
  font-size:20px;
  animation:constellation-note-star 4.8s ease-in-out infinite;
}
.constellation-section .constellation-note:nth-child(2n)::after { animation-delay:-2.4s; }
.constellation-section .constellation-note::before {
  right:18px;
  left:18px;
  height:1px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--note-accent) 82%,white),color-mix(in srgb,var(--note-accent) 30%,transparent) 48%,transparent);
  box-shadow:0 0 10px color-mix(in srgb,var(--note-accent) 42%,transparent);
}
.constellation-section .constellation-note h3 {
  color:color-mix(in srgb,var(--note-accent) 68%,white);
  text-shadow:0 0 18px color-mix(in srgb,var(--note-accent) 23%,transparent);
}
.constellation-section .constellation-note p { color:#dbe4f2; }
.constellation-section .constellation-note:hover {
  transform:translateY(-5px) scale(1.012);
  border-color:color-mix(in srgb,var(--note-accent) 68%,white);
  background:radial-gradient(ellipse at 100% 0%,color-mix(in srgb,var(--note-accent) 28%,transparent),transparent 52%),linear-gradient(145deg,color-mix(in srgb,var(--note-accent) 16%,rgba(23,32,55,.98)),rgba(9,15,30,.96) 78%);
  box-shadow:inset 0 1px rgba(255,255,255,.12),0 18px 38px rgba(0,0,0,.25),0 0 27px color-mix(in srgb,var(--note-accent) 16%,transparent);
}
.constellation-section .constellation-note:hover::before { transform:scaleX(1); opacity:1; }
@keyframes constellation-note-star {
  0%,100% { opacity:.62; transform:rotate(0) scale(.88); }
  50% { opacity:1; transform:rotate(18deg) scale(1.14); }
}
.constellation-section .constellation-map-trail { animation-duration:7.5s; filter:drop-shadow(0 0 7px rgba(157,229,226,.72)); }
.constellation-section .constellation-map-points circle { animation-duration:2.8s; }
@media (prefers-reduced-motion:reduce) {
  .constellation-section .constellation-card,.constellation-section .constellation-photo img,.constellation-section .constellation-photo::after,.constellation-section .constellation-note::after,.constellation-section .constellation-map-trail,.constellation-section .constellation-map-points circle { animation:none!important; }
  .constellation-section .constellation-card,.constellation-section .constellation-note { transition:none!important; }
}

/* 07 · a quiet, editorial interlude for lessons learned from one another. */
.learning-section { --learning-ink:#a8dff2; position:relative; isolation:isolate; }
.learning-section .section-kicker { color:#a8dff2; }
.learning-section .section-kicker i { background:linear-gradient(90deg,#a8dff2,#c2b1ff 62%,transparent); }
.learning-section .section-head h2 em { color:#a8dff2; text-shadow:0 0 30px rgba(168,223,242,.13); }
.learning-section .section-note { max-width:340px; }
.learning-list { width:min(100%,1040px); margin:clamp(34px,5vw,62px) auto 0; }
.learning-row {
  --lesson-accent:#a8dff2;
  position:relative;
  display:grid;
  grid-template-columns:58px minmax(220px,.78fr) minmax(300px,1.22fr);
  align-items:center;
  gap:clamp(18px,3vw,42px);
  min-height:102px;
  padding:18px clamp(16px,2vw,28px);
  border-bottom:1px solid color-mix(in srgb,var(--lesson-accent) 22%,rgba(205,218,242,.1));
  background:linear-gradient(90deg,color-mix(in srgb,var(--lesson-accent) 0%,transparent),color-mix(in srgb,var(--lesson-accent) 4%,transparent) 52%,transparent);
  transition:transform .55s cubic-bezier(.2,.8,.2,1),background .55s ease,border-color .45s ease;
}
.learning-row:first-child { border-top:1px solid rgba(168,223,242,.18); }
.learning-row::before {
  position:absolute;
  top:20%;
  bottom:20%;
  left:0;
  width:2px;
  background:linear-gradient(180deg,transparent,var(--lesson-accent),transparent);
  content:"";
  opacity:.45;
  transform:scaleY(.35);
  transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .4s ease;
}
.learning-index { color:color-mix(in srgb,var(--lesson-accent) 82%,white); font:700 11px/1 "Manrope",var(--sans); letter-spacing:.17em; }
.learning-row h3 { margin:0; color:#f4f2f8; font:500 clamp(23px,2.7vw,32px)/1.12 "Cormorant Garamond",var(--serif); letter-spacing:-.018em; transition:color .4s ease,text-shadow .4s ease; }
.learning-row p { max-width:54ch; margin:0; color:#bbc7d9; font:500 clamp(15px,1.4vw,18px)/1.55 "Cormorant Garamond",var(--serif); transition:color .4s ease; }
.learning-row:hover { transform:translateX(7px); border-color:color-mix(in srgb,var(--lesson-accent) 48%,rgba(205,218,242,.12)); background:linear-gradient(90deg,color-mix(in srgb,var(--lesson-accent) 8%,transparent),color-mix(in srgb,var(--lesson-accent) 5%,transparent) 60%,transparent); }
.learning-row:hover::before { opacity:.95; transform:scaleY(1); }
.learning-row:hover h3 { color:color-mix(in srgb,var(--lesson-accent) 65%,white); text-shadow:0 0 22px color-mix(in srgb,var(--lesson-accent) 21%,transparent); }
.learning-row:hover p { color:#eef2f8; }
.learning-row:nth-child(2) { margin-left:3%; }
.learning-row:nth-child(3) { margin-left:6%; }
.learning-row:nth-child(4) { margin-left:3%; }
@media (max-width:760px) {
  .learning-list { margin-top:30px; }
  .learning-row { grid-template-columns:38px minmax(0,1fr); gap:9px 15px; min-height:0; padding:19px 12px; }
  .learning-index { grid-row:1 / span 2; align-self:start; padding-top:6px; font-size:9px; }
  .learning-row h3 { font-size:25px; }
  .learning-row p { grid-column:2; }
  .learning-row:nth-child(n) { margin-left:0; }
}
@media (prefers-reduced-motion:reduce) {
  .learning-row,.learning-row::before,.learning-row h3,.learning-row p { transition:none; }
}

/* Richer jewel-tone pass for 07: bring its depth up to the surrounding chapters. */
.learning-section { --learning-ink:#a9e5f2; }
.learning-section::before {
  position:absolute;
  z-index:-1;
  top:17%;
  left:50%;
  width:min(1260px,118vw);
  height:78%;
  border-radius:50%;
  background:radial-gradient(ellipse at 16% 43%,rgba(53,127,204,.23),transparent 34%),radial-gradient(ellipse at 55% 40%,rgba(116,79,184,.22),transparent 40%),radial-gradient(ellipse at 88% 60%,rgba(195,80,145,.16),transparent 32%);
  content:"";
  filter:blur(24px);
  pointer-events:none;
  animation:learning-nebula-breathe 16s ease-in-out infinite alternate;
}
.learning-section .section-kicker { color:#f3a6d0; }
.learning-section .section-kicker i { background:linear-gradient(90deg,#f3a6d0,#a9e5f2 58%,transparent); }
.learning-section .section-head h2 em {
  color:#d2b9ff;
  background:linear-gradient(100deg,#a9e5f2 2%,#c6b2ff 47%,#f2a4ce 90%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:none;
}
.learning-section .section-note { color:#d0d9eb; }
.learning-list { display:grid; gap:11px; padding:8px 0; }
.learning-row {
  min-height:106px;
  grid-template-columns:58px minmax(220px,.78fr) minmax(300px,1.22fr);
  padding:18px clamp(19px,2.4vw,34px);
  border:1px solid color-mix(in srgb,var(--lesson-accent) 27%,rgba(190,210,245,.13));
  background:radial-gradient(ellipse at 92% 50%,color-mix(in srgb,var(--lesson-accent) 16%,transparent),transparent 42%),linear-gradient(108deg,color-mix(in srgb,var(--lesson-accent) 13%,rgba(18,25,50,.97)),rgba(14,20,42,.96) 54%,rgba(10,16,34,.96));
  box-shadow:inset 0 1px rgba(255,255,255,.075),0 12px 28px rgba(0,0,0,.19),0 0 19px color-mix(in srgb,var(--lesson-accent) 7%,transparent);
  transition:transform .55s cubic-bezier(.2,.8,.2,1),background .55s ease,border-color .45s ease,box-shadow .55s ease;
}
.learning-row:first-child { border-top:1px solid color-mix(in srgb,var(--lesson-accent) 27%,rgba(190,210,245,.13)); }
.learning-row:nth-child(n) { margin-left:0; }
.learning-row::before { top:15%; bottom:15%; width:3px; opacity:.78; filter:drop-shadow(0 0 7px var(--lesson-accent)); }
.learning-index {
  display:grid;
  width:39px;
  height:39px;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--lesson-accent) 65%,white);
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--lesson-accent) 50%,rgba(255,255,255,.08)),color-mix(in srgb,var(--lesson-accent) 17%,rgba(11,17,36,.94)) 70%);
  color:#f8f7ff;
  font-size:10px;
  letter-spacing:.08em;
  box-shadow:0 0 18px color-mix(in srgb,var(--lesson-accent) 22%,transparent),inset 0 1px rgba(255,255,255,.19);
}
.learning-row h3 { color:#fbf8ff; font-size:clamp(25px,2.8vw,34px); text-shadow:0 2px 16px rgba(0,0,0,.32); }
.learning-row p { color:#e0e7f4; font-size:clamp(16px,1.5vw,19px); }
.learning-row:hover {
  transform:translateX(8px) translateY(-2px);
  border-color:color-mix(in srgb,var(--lesson-accent) 64%,white);
  background:radial-gradient(ellipse at 91% 49%,color-mix(in srgb,var(--lesson-accent) 25%,transparent),transparent 48%),linear-gradient(108deg,color-mix(in srgb,var(--lesson-accent) 19%,rgba(20,29,57,.98)),rgba(16,22,46,.97) 55%,rgba(11,17,37,.98));
  box-shadow:inset 0 1px rgba(255,255,255,.12),0 18px 38px rgba(0,0,0,.26),0 0 28px color-mix(in srgb,var(--lesson-accent) 16%,transparent);
}
.learning-row:hover h3 { color:color-mix(in srgb,var(--lesson-accent) 62%,white); text-shadow:0 0 23px color-mix(in srgb,var(--lesson-accent) 28%,transparent); }
.learning-row:hover p { color:#fff; }
@keyframes learning-nebula-breathe {
  from { opacity:.66; transform:translate(-51%,0) scale(.97); }
  to { opacity:1; transform:translate(-49%,-1.5%) scale(1.035); }
}
@media (max-width:760px) {
  .learning-row { min-height:0; }
  .learning-row h3 { font-size:25px; }
  .learning-row p { font-size:16px; }
}
@media (prefers-reduced-motion:reduce) { .learning-section::before { animation:none; } }

/* 07 finishing pass: more color depth, a little more room, and living light. */
.learning-section::before {
  background:radial-gradient(ellipse at 12% 42%,rgba(47,133,222,.3),transparent 34%),radial-gradient(ellipse at 52% 39%,rgba(131,82,212,.27),transparent 39%),radial-gradient(ellipse at 88% 61%,rgba(220,86,165,.22),transparent 33%),radial-gradient(ellipse at 49% 92%,rgba(42,191,191,.12),transparent 36%);
  filter:blur(20px);
  animation-duration:12s;
}
.learning-list { width:min(100%,1100px); gap:15px; margin-top:clamp(42px,5vw,70px); }
.learning-row {
  min-height:128px;
  padding:23px clamp(22px,2.8vw,38px);
  background:radial-gradient(ellipse at 92% 50%,color-mix(in srgb,var(--lesson-accent) 24%,transparent),transparent 42%),linear-gradient(108deg,color-mix(in srgb,var(--lesson-accent) 17%,rgba(18,25,50,.98)),rgba(14,20,42,.97) 53%,rgba(10,16,34,.97));
  background-size:100% 100%;
  box-shadow:inset 0 1px rgba(255,255,255,.1),inset 0 -1px rgba(255,255,255,.025),0 14px 32px rgba(0,0,0,.23),0 0 24px color-mix(in srgb,var(--lesson-accent) 11%,transparent);
  animation:learning-panel-breathe 9s ease-in-out infinite alternate;
}
.learning-row:nth-child(2) { animation-delay:-2s; }
.learning-row:nth-child(3) { animation-delay:-4s; }
.learning-row:nth-child(4) { animation-delay:-6s; }
.learning-row:nth-child(5) { animation-delay:-8s; }
.learning-row::after {
  position:absolute;
  top:50%;
  right:clamp(20px,3vw,42px);
  color:color-mix(in srgb,var(--lesson-accent) 84%,white);
  content:"✦";
  font:normal 17px/1 Georgia,serif;
  opacity:.48;
  text-shadow:0 0 9px color-mix(in srgb,var(--lesson-accent) 82%,transparent),0 0 22px color-mix(in srgb,var(--lesson-accent) 48%,transparent);
  transform:translateY(-50%);
  transition:opacity .5s ease,scale .55s cubic-bezier(.2,.8,.2,1),rotate .7s ease;
  animation:learning-star-drift 5.4s ease-in-out infinite;
}
.learning-row:nth-child(2)::after { animation-delay:-1.1s; }
.learning-row:nth-child(3)::after { animation-delay:-2.2s; }
.learning-row:nth-child(4)::after { animation-delay:-3.3s; }
.learning-row:nth-child(5)::after { animation-delay:-4.4s; }
.learning-row:hover {
  background:radial-gradient(ellipse at 92% 50%,color-mix(in srgb,var(--lesson-accent) 33%,transparent),transparent 45%),linear-gradient(108deg,color-mix(in srgb,var(--lesson-accent) 25%,rgba(21,31,61,.99)),rgba(17,25,51,.98) 54%,rgba(11,18,39,.98));
  box-shadow:inset 0 1px rgba(255,255,255,.16),inset 0 0 32px color-mix(in srgb,var(--lesson-accent) 8%,transparent),0 20px 42px rgba(0,0,0,.28),0 0 34px color-mix(in srgb,var(--lesson-accent) 22%,transparent);
  animation-play-state:paused;
}
.learning-row:hover::after { opacity:1; scale:1.42; rotate:22deg; }
.learning-row:hover .learning-index { box-shadow:0 0 25px color-mix(in srgb,var(--lesson-accent) 38%,transparent),inset 0 1px rgba(255,255,255,.28); }
.learning-index { transition:box-shadow .45s ease,transform .45s ease; }
.learning-row:hover .learning-index { transform:scale(1.06); }
.learning-row h3 { color:#fffaff; }
.learning-row p { color:#e8edf8; }
@keyframes learning-panel-breathe {
  from { filter:saturate(.94) brightness(.98); }
  to { filter:saturate(1.12) brightness(1.035); }
}
@keyframes learning-star-drift {
  0%,100% { opacity:.38; transform:translateY(-50%) translateX(0) rotate(0) scale(.88); }
  50% { opacity:.82; transform:translateY(calc(-50% - 5px)) translateX(-2px) rotate(16deg) scale(1.08); }
}
@media (max-width:760px) {
  .learning-list { margin-top:34px; gap:12px; }
  .learning-row { min-height:116px; padding:20px 21px; }
  .learning-row::after { right:14px; top:20px; font-size:13px; }
  .learning-row h3,.learning-row p { padding-right:14px; }
}
@media (prefers-reduced-motion:reduce) {
  .learning-section::before,.learning-row,.learning-row::after { animation:none!important; }
}

/* 07 visual redesign: an asymmetrical jewel-box spread instead of a plain list. */
.learning-list {
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  align-items:stretch;
  gap:17px;
  width:min(100%,1120px);
  margin:clamp(42px,5.4vw,74px) auto 0;
}
.learning-row {
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  grid-template-rows:auto auto;
  align-content:center;
  gap:12px 20px;
  min-height:220px;
  padding:27px clamp(24px,3vw,42px);
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--lesson-accent) 43%,rgba(194,211,242,.16));
  border-radius:5px 20px 5px 20px;
  background:radial-gradient(ellipse at 100% 0%,color-mix(in srgb,var(--lesson-accent) 32%,transparent),transparent 48%),radial-gradient(ellipse at 0% 100%,rgba(67,97,190,.18),transparent 54%),linear-gradient(135deg,color-mix(in srgb,var(--lesson-accent) 19%,rgba(23,30,58,.98)),rgba(16,22,47,.98) 54%,rgba(11,17,38,.98));
  box-shadow:inset 0 1px rgba(255,255,255,.14),inset 0 -1px rgba(255,255,255,.04),0 18px 38px rgba(0,0,0,.28),0 0 26px color-mix(in srgb,var(--lesson-accent) 15%,transparent);
  animation:learning-panel-breathe 10s ease-in-out infinite alternate,learning-card-float 8.5s ease-in-out infinite;
  transition:transform .65s cubic-bezier(.2,.8,.2,1),border-color .5s ease,background .65s ease,box-shadow .65s ease,filter .5s ease;
}
.learning-row:nth-child(1) { grid-column:span 7; min-height:248px; }
.learning-row:nth-child(2) { grid-column:span 5; animation-delay:-1s,-2.4s; }
.learning-row:nth-child(3) { grid-column:span 5; animation-delay:-3s,-4.8s; }
.learning-row:nth-child(4) { grid-column:span 7; min-height:248px; animation-delay:-5s,-1.2s; }
.learning-row:nth-child(5) {
  grid-column:1 / -1;
  grid-template-columns:54px minmax(220px,.75fr) minmax(320px,1.25fr);
  grid-template-rows:auto;
  min-height:156px;
  background:radial-gradient(ellipse at 100% 50%,color-mix(in srgb,var(--lesson-accent) 30%,transparent),transparent 42%),linear-gradient(105deg,rgba(35,43,88,.98),color-mix(in srgb,var(--lesson-accent) 18%,rgba(27,27,64,.98)) 52%,rgba(17,22,48,.98));
  animation-delay:-7s,-3.6s;
}
.learning-row::before {
  top:16px;
  bottom:16px;
  left:0;
  width:3px;
  opacity:.9;
  filter:drop-shadow(0 0 9px var(--lesson-accent));
}
.learning-index {
  grid-column:1;
  grid-row:1 / span 2;
  align-self:start;
  width:43px;
  height:43px;
  border:1px solid color-mix(in srgb,var(--lesson-accent) 82%,white);
  background:radial-gradient(circle at 32% 27%,color-mix(in srgb,var(--lesson-accent) 76%,white),color-mix(in srgb,var(--lesson-accent) 27%,#121832) 74%);
  color:#11182c;
  font-size:10px;
  box-shadow:0 0 22px color-mix(in srgb,var(--lesson-accent) 38%,transparent),inset 0 1px rgba(255,255,255,.52);
  transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease;
}
.learning-row h3 {
  grid-column:2;
  grid-row:1;
  align-self:end;
  color:#fff;
  font-size:clamp(29px,3.15vw,40px);
  line-height:1.02;
  text-shadow:0 2px 17px rgba(0,0,0,.4),0 0 22px color-mix(in srgb,var(--lesson-accent) 17%,transparent);
}
.learning-row p {
  grid-column:2;
  grid-row:2;
  max-width:40ch;
  color:#edf1fb;
  font-size:clamp(17px,1.55vw,20px);
  line-height:1.48;
  text-shadow:0 1px 10px rgba(0,0,0,.42);
}
.learning-row:nth-child(5) .learning-index { grid-row:1; }
.learning-row:nth-child(5) h3 { grid-column:2; grid-row:1; }
.learning-row:nth-child(5) p { grid-column:3; grid-row:1; align-self:center; }
.learning-row::after {
  top:24px;
  right:27px;
  font-size:20px;
  opacity:.7;
  text-shadow:0 0 8px #fff,0 0 20px color-mix(in srgb,var(--lesson-accent) 88%,transparent),0 0 38px color-mix(in srgb,var(--lesson-accent) 54%,transparent);
}
.learning-row:hover {
  z-index:2;
  transform:translateY(-7px) scale(1.018);
  border-color:color-mix(in srgb,var(--lesson-accent) 80%,white);
  filter:saturate(1.16) brightness(1.07);
  background:radial-gradient(ellipse at 100% 0%,color-mix(in srgb,var(--lesson-accent) 43%,transparent),transparent 52%),radial-gradient(ellipse at 0% 100%,rgba(94,121,223,.24),transparent 56%),linear-gradient(135deg,color-mix(in srgb,var(--lesson-accent) 26%,rgba(26,34,68,.99)),rgba(17,25,53,.99) 54%,rgba(12,19,42,.99));
  box-shadow:inset 0 1px rgba(255,255,255,.22),inset 0 0 40px color-mix(in srgb,var(--lesson-accent) 11%,transparent),0 24px 48px rgba(0,0,0,.32),0 0 39px color-mix(in srgb,var(--lesson-accent) 28%,transparent);
  animation-play-state:paused;
}
.learning-row:hover .learning-index { transform:scale(1.12) rotate(-8deg); box-shadow:0 0 30px color-mix(in srgb,var(--lesson-accent) 58%,transparent),inset 0 1px rgba(255,255,255,.6); }
.learning-row:hover h3 { color:color-mix(in srgb,var(--lesson-accent) 60%,white); text-shadow:0 0 28px color-mix(in srgb,var(--lesson-accent) 38%,transparent); }
.learning-row:hover p { color:#fff; }
@keyframes learning-card-float {
  0%,100% { translate:0 0; }
  50% { translate:0 -5px; }
}
@media (max-width:760px) {
  .learning-list { grid-template-columns:1fr; gap:13px; margin-top:35px; }
  .learning-row,.learning-row:nth-child(1),.learning-row:nth-child(2),.learning-row:nth-child(3),.learning-row:nth-child(4),.learning-row:nth-child(5) {
    grid-column:1;
    grid-template-columns:43px minmax(0,1fr);
    grid-template-rows:auto auto;
    min-height:164px;
    padding:21px 21px 23px;
    border-radius:4px 15px 4px 15px;
  }
  .learning-row .learning-index,.learning-row:nth-child(5) .learning-index { grid-column:1; grid-row:1 / span 2; width:36px; height:36px; font-size:9px; }
  .learning-row h3,.learning-row:nth-child(5) h3 { grid-column:2; grid-row:1; padding-right:17px; font-size:29px; }
  .learning-row p,.learning-row:nth-child(5) p { grid-column:2; grid-row:2; padding-right:17px; font-size:17px; }
  .learning-row::after { top:17px; right:14px; font-size:15px; }
}
@media (prefers-reduced-motion:reduce) { .learning-row { animation:none!important; } }

/* Make the three still-too-similar postcards unmistakable at a glance. */
.postcard-section .postcard-theme-2 {
  --card-bg:#b8eaff; --card-ink:#102f61; --card-accent:#075dba;
  display:flex; align-items:flex-start; justify-content:center; gap:16px;
  padding:66px 52px 42px 78px;
  border:3px solid #f4c84e; border-radius:4px;
  background:radial-gradient(circle at 88% 15%,#fff6bd 0 4px,transparent 5px),radial-gradient(circle at 88% 15%,transparent 0 36px,rgba(255,255,255,.56) 37px 39px,transparent 40px),linear-gradient(90deg,#0a5caa 0 18px,#f9d15b 18px 23px,transparent 23px),linear-gradient(145deg,#f3fcff 0%,#91d7f4 47%,#3e9bd0 100%);
  box-shadow:0 23px 58px rgba(27,104,166,.34),inset 0 0 0 7px rgba(255,255,255,.5);
  text-align:left;
}
.postcard-section .postcard-theme-2::before { inset:13px; border:1px solid rgba(13,71,133,.56); border-right:0; }
.postcard-section .postcard-theme-2 .postmark { top:24px; right:25px; left:auto; width:54px; height:54px; border:3px double #0e5fa4; border-radius:50%; background:#fff2b3; color:#164a78; font:bold 21px "Bodoni Moda",Georgia,serif; transform:rotate(8deg); }
.postcard-section .postcard-theme-2 .postcard-label { max-width:72%; margin:0 0 13px; color:#075d9b; font-size:8px; letter-spacing:.2em; }
.postcard-section .postcard-theme-2 h3 { align-self:flex-start; max-width:90%; color:#102f61; font-family:"Bodoni Moda","Cormorant Garamond",Georgia,serif; font-size:clamp(35px,4.2vw,49px); font-style:normal; font-weight:700; line-height:1.03; text-shadow:0 2px rgba(255,255,255,.72); }
.postcard-section .postcard-theme-2 .postcard-signoff { align-self:flex-end; margin-top:13px; color:#8a3f65; font:italic 20px "Parisienne",cursive; }
.postcard-section .postcard-theme-2 .postcard-art { opacity:.15; mix-blend-mode:multiply; }

.postcard-section .postcard-theme-4 {
  --card-bg:#21183e; --card-ink:#fff4df; --card-accent:#f0c66e;
  align-items:center; justify-content:center; padding:58px 58px 45px;
  border:1px solid #d8b76a; border-radius:3px 22px 3px 22px;
  background:radial-gradient(ellipse at 50% 48%,rgba(139,92,201,.56),transparent 53%),radial-gradient(circle at 14% 22%,#fff2c3 0 1px,transparent 2px),radial-gradient(circle at 82% 78%,#c5c2ff 0 1px,transparent 2px),linear-gradient(150deg,#17132f,#38225d 56%,#17172f);
  background-size:auto,38px 41px,51px 47px,auto;
  box-shadow:0 24px 65px rgba(25,13,52,.48),inset 0 0 0 7px rgba(218,189,113,.1);
  text-align:center;
}
.postcard-section .postcard-theme-4::before { inset:15px; border:1px solid rgba(237,205,128,.58); border-radius:2px 16px 2px 16px; }
.postcard-section .postcard-theme-4 .postmark { top:24px; right:25px; left:auto; width:48px; height:48px; border:1px solid #ebca7f; border-radius:50%; background:linear-gradient(145deg,#f8e6a9,#b878b1); color:#2c1d4c; font:800 15px "Palatino Linotype",Palatino,serif; box-shadow:0 0 22px rgba(228,192,111,.36); }
.postcard-section .postcard-theme-4 .postcard-label { margin:0 0 20px; color:#f1d68f; font:800 8px "Manrope",var(--sans); letter-spacing:.25em; }
.postcard-section .postcard-theme-4 h3 { max-width:92%; min-height:0; color:#fff6e5; font:700 clamp(35px,4.2vw,49px)/1.02 "Palatino Linotype",Palatino,serif; text-shadow:0 3px 20px rgba(235,195,112,.24); }
.postcard-section .postcard-theme-4 .postcard-signoff { margin-top:20px; color:#eab9db; font:italic 20px "Parisienne",cursive; }
.postcard-section .postcard-theme-4 .postcard-art { opacity:.2; mix-blend-mode:screen; }
.postcard-section .postcard-theme-4 .postcard-art::after { background:linear-gradient(135deg,rgba(27,17,53,.62),rgba(90,48,130,.24) 52%,rgba(18,18,44,.66)); }

.postcard-section .postcard-theme-11 {
  --card-bg:#e9f5c9; --card-ink:#24482d; --card-accent:#548638;
  align-items:flex-start; justify-content:center; padding:54px 50px 42px 76px;
  border:0; border-radius:2px 34px 2px 34px;
  background:radial-gradient(circle at 89% 22%,#f7d96d 0 25px,rgba(247,217,109,.22) 26px 38px,transparent 39px),linear-gradient(90deg,#2c7048 0 10px,transparent 10px),repeating-linear-gradient(135deg,rgba(69,127,61,.055) 0 2px,transparent 2px 12px),linear-gradient(145deg,#f8f5cf 0%,#d7ecad 54%,#9ed49b 100%);
  box-shadow:0 23px 58px rgba(63,118,57,.28),inset 0 0 0 1px rgba(62,119,59,.45);
  text-align:left;
}
.postcard-section .postcard-theme-11::before { inset:13px; border:1px solid rgba(53,105,49,.54); border-left:0; border-radius:2px 25px 2px 25px; }
.postcard-section .postcard-theme-11 .postmark { top:auto; right:27px; bottom:26px; left:auto; width:58px; height:58px; border:1px solid #659449; border-radius:50% 50% 50% 4px; background:#fff8cd; color:#4f7839; font:700 17px Georgia,serif; box-shadow:0 5px 15px rgba(65,111,52,.18); transform:rotate(8deg); }
.postcard-section .postcard-theme-11 .postcard-label { max-width:75%; margin:0 0 15px; color:#39713d; font-size:8px; letter-spacing:.2em; }
.postcard-section .postcard-theme-11 h3 { max-width:86%; min-height:0; color:#24482d; font:700 clamp(33px,3.8vw,45px)/1.04 Georgia,serif; font-style:italic; }
.postcard-section .postcard-theme-11 .postcard-signoff { align-self:flex-start; margin-top:17px; color:#9b4e54; font:italic 19px "Parisienne",cursive; }
.postcard-section .postcard-theme-11 .postcard-art { opacity:.12; mix-blend-mode:multiply; }
.postcard-section .postcard-theme-2 h3 {
  min-height:0; width:100%; max-width:100%; flex:0 1 auto;
  font-size:clamp(24px,2.15vw,29px); line-height:1.12;
  overflow-wrap:break-word; text-wrap:pretty;
}
.postcard-section .postcard-theme-4 h3 {
  min-height:0; width:100%; max-width:100%; flex:0 1 auto;
  font-size:clamp(25px,2.35vw,31px); line-height:1.12;
  overflow-wrap:break-word; text-wrap:pretty;
}
.postcard-section .postcard-theme-11 h3 {
  min-height:0; width:100%; max-width:100%; flex:0 1 auto;
  font-size:clamp(20px,1.9vw,25px); line-height:1.18;
  overflow-wrap:break-word; text-wrap:pretty;
}
@media (max-width:700px) {
  .postcard-section .postcard-theme-2 { align-items:flex-start; padding:46px 20px 26px 28px; }
  .postcard-section .postcard-theme-2 h3 { font-size:clamp(18px,4.8vw,21px)!important; line-height:1.16; }
  .postcard-section .postcard-theme-4 { align-items:center; padding:56px 23px 28px; }
  .postcard-section .postcard-theme-4 h3 { font-size:clamp(20px,5.2vw,23px)!important; line-height:1.16; }
  .postcard-section .postcard-theme-11 { align-items:flex-start; padding:46px 20px 27px 32px; }
  .postcard-section .postcard-theme-11 h3 { max-width:82%; font-size:clamp(16px,4.2vw,19px)!important; line-height:1.17; }
}
@media (max-width:700px) {
  .postcard-section .postcard-theme-2 { align-items:flex-start; padding:46px 22px 28px 30px; }
  .postcard-section .postcard-theme-2 h3 { font-family:"Bodoni Moda","Cormorant Garamond",Georgia,serif!important; font-size:clamp(22px,6vw,27px)!important; }
  .postcard-section .postcard-theme-4 { align-items:center; padding:56px 24px 28px; }
  .postcard-section .postcard-theme-4 h3 { font-family:"Palatino Linotype",Palatino,serif!important; font-size:clamp(23px,6.1vw,28px)!important; }
  .postcard-section .postcard-theme-11 { align-items:flex-start; padding:46px 22px 28px 36px; }
  .postcard-section .postcard-theme-11 h3 { max-width:82%; font-family:Georgia,serif!important; font-size:clamp(22px,5.8vw,26px)!important; }
}

/* Postcard finishing pass: give the nine repetitive years their own stationery identities. */
.postcard-section .postcard-theme-2 {
  --card-bg:#d8f5fb; --card-ink:#173d57; --card-accent:#1689ae;
  border:2px solid #2c8fad;
  background:radial-gradient(circle at 92% 12%,rgba(255,255,255,.92) 0 2px,transparent 3px),radial-gradient(circle at 9% 86%,rgba(255,255,255,.8) 0 3px,transparent 4px),linear-gradient(115deg,rgba(31,130,167,.1) 0 16%,transparent 16.2%),linear-gradient(145deg,#effcff 0%,#b8e8f3 58%,#78c7dc 100%);
  box-shadow:0 20px 52px rgba(27,124,154,.2),inset 0 0 0 5px rgba(255,255,255,.55);
}
.postcard-section .postcard-theme-2::before { inset:14px; border:1px solid rgba(21,107,140,.55); border-right:0; }
.postcard-section .postcard-theme-2 .postmark { border:2px solid #148bad; background:#fff; color:#126d8a; box-shadow:0 0 0 5px rgba(255,255,255,.58),0 5px 16px rgba(18,91,120,.18); }
.postcard-section .postcard-theme-2 .postcard-label { color:#116b8b; }
.postcard-section .postcard-theme-2 h3 { color:#153b57; font-family:"Bodoni Moda","Cormorant Garamond",Georgia,serif; font-weight:700; text-shadow:0 2px 0 rgba(255,255,255,.7); }
.postcard-section .postcard-theme-2 .postcard-signoff { color:#a34467; }

.postcard-section .postcard-theme-4 {
  --card-bg:#e7e0ff; --card-ink:#332b5c; --card-accent:#7861bd;
  border:1px solid #8670c9; border-radius:5px 28px 5px 28px;
  background:radial-gradient(ellipse at 92% 5%,rgba(255,255,255,.78),transparent 36%),radial-gradient(ellipse at 0% 100%,rgba(174,154,237,.36),transparent 47%),linear-gradient(140deg,#f5f1ff,#d6cbf4 58%,#b8a9e5);
  box-shadow:0 20px 55px rgba(85,65,144,.23),inset 0 0 0 7px rgba(255,255,255,.23);
}
.postcard-section .postcard-theme-4::before { inset:14px; border:1px solid rgba(94,73,157,.5); border-radius:2px 20px 2px 20px; }
.postcard-section .postcard-theme-4 .postmark { border:1px solid #7861bd; border-radius:3px 15px 3px 15px; background:linear-gradient(145deg,#fff,#e5defb); color:#6551a2; transform:rotate(7deg); }
.postcard-section .postcard-theme-4 .postcard-label { color:#6551a2; font-family:"Manrope",var(--sans); letter-spacing:.22em; }
.postcard-section .postcard-theme-4 h3 { color:#332b5c; font-family:"Palatino Linotype",Palatino,serif; font-weight:700; }
.postcard-section .postcard-theme-4 .postcard-signoff { color:#765da9; font-family:"Parisienne",cursive; font-size:22px; }

.postcard-section .postcard-theme-8 {
  --card-bg:#e0f4cf; --card-ink:#254a36; --card-accent:#54883d;
  border:2px solid #78a94d; border-radius:28px 4px 28px 4px;
  background:radial-gradient(circle at 87% 18%,#fff2a8 0 34px,rgba(255,242,168,.28) 35px 49px,transparent 50px),radial-gradient(ellipse at 5% 100%,rgba(111,174,75,.35),transparent 50%),repeating-linear-gradient(135deg,rgba(80,130,60,.045) 0 2px,transparent 2px 11px),linear-gradient(145deg,#f0f8d8,#c4e4a8 66%,#a6d48f);
  box-shadow:0 20px 58px rgba(74,127,61,.22),inset 0 0 0 6px rgba(255,255,255,.32);
}
.postcard-section .postcard-theme-8::before { inset:13px; border:1px dashed rgba(58,112,54,.62); border-radius:20px 2px 20px 2px; }
.postcard-section .postcard-theme-8 .postmark { border:2px solid #7b9e38; border-radius:50%; background:#fff5bc; color:#647b2a; box-shadow:0 0 0 5px rgba(250,255,224,.55); }
.postcard-section .postcard-theme-8 .postcard-label { color:#426c35; }
.postcard-section .postcard-theme-8 h3 { color:#28482d; font-family:"Trebuchet MS",Arial,sans-serif; font-weight:800; letter-spacing:-.04em; }
.postcard-section .postcard-theme-8 .postcard-signoff { color:#8b5940; font-family:"Parisienne",cursive; font-size:22px; }

.postcard-section .postcard-theme-9 {
  --card-bg:#fff0d1; --card-ink:#572d38; --card-accent:#bd563d;
  border:1px solid #b7553f; border-radius:2px;
  background:radial-gradient(ellipse at 96% 0%,rgba(255,250,226,.9),transparent 38%),linear-gradient(90deg,transparent 0 42px,rgba(195,73,75,.36) 43px,transparent 44px),repeating-linear-gradient(0deg,transparent 0 29px,rgba(58,91,133,.16) 30px 31px),linear-gradient(125deg,#fff3d8,#ffd29d 72%,#efaa8c);
  box-shadow:0 20px 52px rgba(154,78,53,.22),inset 0 0 0 8px rgba(255,255,255,.2);
}
.postcard-section .postcard-theme-9::before { inset:12px; border:1px solid rgba(152,72,55,.42); }
.postcard-section .postcard-theme-9 .postmark { border:2px solid #bd563d; background:rgba(255,247,221,.86); color:#a64638; font-family:"Courier New",monospace; box-shadow:0 0 0 4px rgba(255,255,255,.35); }
.postcard-section .postcard-theme-9 .postcard-label { color:#9e4537; font-family:"Courier New",monospace; letter-spacing:.13em; }
.postcard-section .postcard-theme-9 h3 { color:#572d38; font-family:"Courier New",monospace; font-weight:700; }
.postcard-section .postcard-theme-9 .postcard-signoff { color:#a34d39; font-family:"Courier New",monospace; }

.postcard-section .postcard-theme-11 {
  --card-bg:#c9f3e7; --card-ink:#174d4c; --card-accent:#168578;
  border:1px solid #178f83; border-radius:34px 5px 34px 5px;
  background:radial-gradient(ellipse at 0% 0%,rgba(255,255,255,.92),transparent 37%),radial-gradient(ellipse at 100% 100%,rgba(31,167,147,.35),transparent 45%),linear-gradient(145deg,#e5fff3,#a8e2d0 54%,#76c8bd);
  box-shadow:0 20px 55px rgba(34,139,125,.22),inset 0 -12px 30px rgba(24,125,119,.08);
}
.postcard-section .postcard-theme-11::before { inset:15px; border:1px solid rgba(20,111,104,.52); border-radius:26px 2px 26px 2px; }
.postcard-section .postcard-theme-11 .postmark { border:2px solid #168578; background:#f0fff8; color:#146f69; box-shadow:0 6px 18px rgba(25,120,111,.16); }
.postcard-section .postcard-theme-11 .postcard-label { color:#146f69; }
.postcard-section .postcard-theme-11 h3 { color:#174d4c; font-family:Georgia,serif; font-weight:700; font-style:italic; }
.postcard-section .postcard-theme-11 .postcard-signoff { color:#b15e6c; font-family:"Parisienne",cursive; font-size:22px; }

.postcard-section .postcard-theme-12 {
  --card-bg:#fff0b8; --card-ink:#54351f; --card-accent:#c05a28;
  border:2px solid #d37a31; border-radius:5px 5px 30px 5px;
  background:radial-gradient(circle at 88% 18%,rgba(255,255,240,.94) 0 3px,transparent 4px),repeating-conic-gradient(from 2deg at 88% 18%,rgba(219,148,52,.13) 0deg 7deg,transparent 7deg 16deg),linear-gradient(150deg,#fff6cf,#ffd777 60%,#f3a96d);
  box-shadow:0 20px 54px rgba(170,93,39,.24),inset 0 0 0 6px rgba(255,255,255,.24);
}
.postcard-section .postcard-theme-12::before { inset:15px; border:1px solid rgba(171,83,34,.52); border-style:solid dashed solid solid; }
.postcard-section .postcard-theme-12 .postmark { border:0; border-radius:3px 14px 3px 14px; background:#bd542a; color:#fff1c8; transform:rotate(7deg); box-shadow:4px 4px 0 rgba(119,65,35,.16); }
.postcard-section .postcard-theme-12 .postcard-label { color:#a64a25; }
.postcard-section .postcard-theme-12 h3 { color:#54351f; font-family:"Manrope",var(--sans); font-weight:900; letter-spacing:-.045em; }
.postcard-section .postcard-theme-12 .postcard-signoff { color:#a64a25; font-family:"Cormorant Garamond",Georgia,serif; font-style:italic; font-weight:700; }

.postcard-section .postcard-theme-14 {
  --card-bg:#ffe1e7; --card-ink:#631f43; --card-accent:#c63875;
  border:2px solid #c94c7e; border-radius:42px 5px 42px 5px;
  background:radial-gradient(ellipse at 50% 115%,rgba(255,255,255,.92),transparent 52%),radial-gradient(circle at 8% 9%,rgba(255,255,255,.92) 0 3px,transparent 4px),linear-gradient(145deg,#fff0f3,#f8bfd0 52%,#e992b3);
  box-shadow:0 20px 58px rgba(177,51,103,.22),inset 0 0 0 6px rgba(255,255,255,.27);
}
.postcard-section .postcard-theme-14::before { inset:13px; border:1px solid rgba(177,43,99,.52); border-radius:34px 2px 34px 2px; }
.postcard-section .postcard-theme-14 .postmark { border:1px solid #c63875; border-radius:50% 50% 4px 50%; background:#fff6f7; color:#a62960; transform:rotate(9deg); }
.postcard-section .postcard-theme-14 .postcard-label { color:#a62960; }
.postcard-section .postcard-theme-14 h3 { color:#631f43; font-family:"Segoe Script","Brush Script MT",cursive; font-weight:600; text-shadow:0 2px 0 rgba(255,255,255,.55); }
.postcard-section .postcard-theme-14 .postcard-signoff { color:#9f3562; font-family:"Cormorant Garamond",Georgia,serif; font-style:italic; }

.postcard-section .postcard-theme-15 {
  --card-bg:#c9e7ff; --card-ink:#15385c; --card-accent:#1476b5;
  border:2px solid #3a89be; border-radius:3px;
  background:linear-gradient(90deg,rgba(18,77,127,.12) 0 18px,transparent 18px),radial-gradient(ellipse at 100% 0%,rgba(255,255,255,.95),transparent 39%),linear-gradient(140deg,#eaf7ff,#a9d6f2 62%,#77afd9);
  box-shadow:0 20px 58px rgba(26,99,152,.24),inset 0 0 0 8px rgba(255,255,255,.28);
}
.postcard-section .postcard-theme-15::before { inset:15px; border:1px solid rgba(34,104,157,.54); border-left:3px double rgba(34,104,157,.5); }
.postcard-section .postcard-theme-15 .postmark { border:2px solid #2679ad; border-radius:3px; background:#f4fbff; color:#1f6191; box-shadow:4px 4px 0 rgba(31,91,137,.12); }
.postcard-section .postcard-theme-15 .postcard-label { color:#1d679b; letter-spacing:.22em; }
.postcard-section .postcard-theme-15 h3 { color:#15385c; font-family:Arial,Helvetica,sans-serif; font-weight:800; letter-spacing:-.045em; }
.postcard-section .postcard-theme-15 .postcard-signoff { color:#246b9b; font-family:"Bodoni Moda","Cormorant Garamond",Georgia,serif; font-style:italic; }

.postcard-section .postcard-theme-18 {
  --card-bg:#f5d6e7; --card-ink:#45264e; --card-accent:#9a4e96;
  border:1px solid #a8529b; border-radius:5px 30px 5px 30px;
  background:radial-gradient(ellipse at 100% 0%,rgba(255,244,191,.88),transparent 38%),radial-gradient(ellipse at 0% 100%,rgba(143,172,238,.42),transparent 47%),linear-gradient(145deg,#fff0df,#efc1df 48%,#c6b5ef 100%);
  box-shadow:0 20px 58px rgba(119,69,146,.23),inset 0 0 0 6px rgba(255,255,255,.25);
}
.postcard-section .postcard-theme-18::before { inset:14px; border:1px dashed rgba(116,65,134,.58); border-radius:2px 23px 2px 23px; }
.postcard-section .postcard-theme-18 .postmark { border:1px solid #9a4e96; border-radius:50% 4px 50% 50%; background:#fff7ec; color:#7b3f82; transform:rotate(-8deg); box-shadow:0 5px 14px rgba(119,69,146,.16); }
.postcard-section .postcard-theme-18 .postcard-label { color:#7b3f82; }
.postcard-section .postcard-theme-18 h3 { color:#45264e; font-family:"Book Antiqua",Palatino,serif; font-weight:700; font-style:italic; }
.postcard-section .postcard-theme-18 .postcard-signoff { color:#a44e78; font-family:"Parisienne",cursive; font-size:22px; }

.postcard-section .postcard-theme-2 .postcard-art { opacity:.2; mix-blend-mode:multiply; }
.postcard-section .postcard-theme-4 .postcard-art { opacity:.17; mix-blend-mode:multiply; }
.postcard-section .postcard-theme-8 .postcard-art { opacity:.15; mix-blend-mode:multiply; }
.postcard-section .postcard-theme-9 .postcard-art { opacity:.14; mix-blend-mode:multiply; }
.postcard-section .postcard-theme-11 .postcard-art { opacity:.18; mix-blend-mode:multiply; }
.postcard-section .postcard-theme-12 .postcard-art { opacity:.13; mix-blend-mode:multiply; }
.postcard-section .postcard-theme-14 .postcard-art { opacity:.16; mix-blend-mode:multiply; }
.postcard-section .postcard-theme-15 .postcard-art { opacity:.16; mix-blend-mode:multiply; }
.postcard-section .postcard-theme-18 .postcard-art { opacity:.15; mix-blend-mode:multiply; }
.postcard-section .postcard-theme-2:hover,.postcard-section .postcard-theme-4:hover,.postcard-section .postcard-theme-8:hover,
.postcard-section .postcard-theme-9:hover,.postcard-section .postcard-theme-11:hover,.postcard-section .postcard-theme-12:hover,
.postcard-section .postcard-theme-14:hover,.postcard-section .postcard-theme-15:hover,.postcard-section .postcard-theme-18:hover {
  transform:translateY(-4px) rotate(0deg);
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease,filter .35s ease;
}
@media (max-width:700px) {
  .postcard-section .postcard-theme-2 h3 { font-family:"Bodoni Moda","Cormorant Garamond",Georgia,serif!important; }
  .postcard-section .postcard-theme-4 h3 { font-family:"Palatino Linotype",Palatino,serif!important; }
  .postcard-section .postcard-theme-8 h3 { font-family:"Trebuchet MS",Arial,sans-serif!important; }
  .postcard-section .postcard-theme-9 h3 { font-family:"Courier New",monospace!important; }
  .postcard-section .postcard-theme-11 h3 { font-family:Georgia,serif!important; }
  .postcard-section .postcard-theme-12 h3 { font-family:"Manrope",var(--sans)!important; }
  .postcard-section .postcard-theme-14 h3 { font-family:"Segoe Script","Brush Script MT",cursive!important; }
  .postcard-section .postcard-theme-15 h3 { font-family:Arial,Helvetica,sans-serif!important; }
  .postcard-section .postcard-theme-18 h3 { font-family:"Book Antiqua",Palatino,serif!important; }
}

/* Our Day keepsake: compact the paper ticket and give its stub a birthday seal. */
.date-plan-result:not(.is-reminder) {
  width:min(100%,760px);
  grid-template-columns:minmax(0,1fr) 176px;
  margin:20px auto 0;
  box-shadow:0 16px 42px rgba(0,0,0,.24),0 0 24px rgba(168,223,242,.1);
  animation:date-ticket-arrive .72s cubic-bezier(.2,.8,.2,1) both;
}
.date-plan-result:not(.is-reminder)::after {
  height:6px;
  background-size:220% 100%;
  animation:date-ticket-color-sweep 8s ease-in-out infinite alternate;
}
.date-plan-main { padding:23px 27px 21px; }
.date-plan-result:not(.is-reminder) .plan-card-kicker { font-size:clamp(7px,.78vw,10px); }
.date-plan-result:not(.is-reminder) h3 { margin:13px 0 2px; font-size:clamp(30px,3.55vw,44px); }
.date-plan-subtitle { margin-bottom:13px; font-size:clamp(11px,1.1vw,14px); }
.date-plan-result:not(.is-reminder) .date-plan-steps { gap:8px 10px; }
.date-plan-result:not(.is-reminder) .date-plan-steps li { min-height:61px; padding:8px 9px; }
.date-plan-result:not(.is-reminder) .date-plan-steps li::before { width:30px; height:30px; font-size:10px; }
.date-plan-result:not(.is-reminder) .date-plan-steps li span { font-size:8px; }
.date-plan-result:not(.is-reminder) .date-plan-steps li strong { font-size:clamp(12px,1.2vw,15px); }
.date-ticket-stub {
  justify-content:flex-start;
  padding:24px 16px 20px;
  background:linear-gradient(180deg,rgba(233,246,250,.45),rgba(255,255,255,.08) 58%,rgba(253,241,246,.35));
}
.date-stub-kicker { font-size:8px; }
.date-stub-edition { margin:19px 0 11px; }
.date-stub-edition strong { font-size:43px; }
.date-stub-edition span { font-size:11px; }
.date-stub-celebration { display:flex; justify-content:center; gap:9px; margin:0 0 13px; }
.date-stub-celebration span {
  display:grid;
  width:31px;
  height:31px;
  place-items:center;
  border:1px solid rgba(91,139,159,.16);
  border-radius:50%;
  background:linear-gradient(145deg,#f3fbff,#fff8e9 58%,#fff1f6);
  box-shadow:0 4px 11px rgba(54,92,112,.1),inset 0 1px white;
  color:#35526a;
  animation:date-stub-keepsake-float 3.8s ease-in-out infinite;
}
.date-stub-celebration svg { display:block; width:22px; height:22px; overflow:visible; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.date-stub-icon-cake { color:#d87f9d!important; background:linear-gradient(145deg,#fff1f5,#fff9ed 72%)!important; }
.date-stub-icon-cake svg path:first-child { fill:#f2c4d2; stroke:#bd7188; }
.date-stub-icon-cake svg path:nth-child(2) { stroke:#fffdf7; stroke-width:1.4; }
.date-stub-icon-cake svg path:nth-child(3) { stroke:#dcae4f; stroke-width:1.5; }
.date-stub-icon-balloon { color:#438dac!important; background:linear-gradient(145deg,#e9f8ff,#fff 72%)!important; }
.date-stub-icon-balloon svg path:first-child { fill:#8fd2e6; stroke:#4f9bb6; }
.date-stub-icon-balloon svg path:nth-child(2),.date-stub-icon-balloon svg path:nth-child(3) { stroke:#3b819c; }
.date-stub-icon-flower { color:#b47d34!important; background:linear-gradient(145deg,#fff8d9,#fff 72%)!important; }
.date-stub-icon-flower svg path { fill:#f3cf6e; stroke:#c49a3c; }
.date-stub-icon-flower svg circle { fill:#f08e9f; stroke:#be657a; }
.date-stub-celebration span:nth-child(2) { animation-delay:-1.25s; }
.date-stub-celebration span:nth-child(3) { animation-delay:-2.5s; }
.date-stub-rule { width:76%; height:1px; background:linear-gradient(90deg,transparent,#d7ae3f 18%,#f2d87a 50%,#d7ae3f 82%,transparent); }
.date-stub-admit { margin-top:14px; font-size:9px; }
.date-stub-admit strong { font-size:19px; }
.date-stub-date { margin-top:12px; font-size:8px; }
.date-stub-route { margin-top:15px; font-size:8px; }
.date-stub-star { margin:9px 0; font-size:21px; text-shadow:0 0 12px rgba(180,138,167,.32); }
.date-plan-result:not(.is-reminder) .plan-card-signoff { font-size:8px; }
.date-stub-personal { display:flex; flex-direction:column; gap:3px; margin:5px 0 0; padding-top:7px; border-top:1px solid rgba(85,125,141,.2); color:#557d8d; font:800 7px/1.2 "Manrope",var(--sans); letter-spacing:.12em; }
.date-stub-personal strong { color:#203449; font:900 10px/1.2 "DM Sans",var(--sans); letter-spacing:.12em; }
.date-stub-personal i { color:#d2ad43; font-style:normal; }
.date-stub-vertical { right:7px; font-size:7px; }
@keyframes date-ticket-arrive {
  from { opacity:0; transform:translateY(15px) scale(.985); filter:blur(2px); }
  to { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
}
@keyframes date-ticket-color-sweep { from { background-position:0% 50%; } to { background-position:100% 50%; } }
@keyframes date-stub-keepsake-float {
  0%,100% { transform:translateY(0) rotate(-2deg); }
  50% { transform:translateY(-4px) rotate(2deg); }
}
@media (max-width:720px) {
  .date-plan-result:not(.is-reminder) { grid-template-columns:minmax(0,1fr) 158px; }
  .date-plan-main { padding:23px 18px 18px; }
  .date-plan-result:not(.is-reminder) .date-plan-steps li { min-height:58px; }
  .date-ticket-stub { padding:24px 12px 18px; }
}
@media (max-width:480px) {
  .date-plan-result:not(.is-reminder) { grid-template-columns:1fr; }
  .date-plan-main { padding:19px 14px 14px; }
  .date-ticket-stub { grid-template-columns:1fr auto 1fr; gap:5px 7px; min-height:0; padding:14px 12px 15px; }
  .date-stub-kicker { grid-column:1 / -1; grid-row:1; }
  .date-stub-edition { grid-column:1; grid-row:2; margin:0; }
  .date-stub-celebration { grid-column:1 / -1; grid-row:3; margin:5px 0; }
  .date-stub-rule { display:none; }
  .date-stub-admit { grid-column:2; grid-row:2; margin:0; }
  .date-stub-date { grid-column:3; grid-row:2; margin:0; font-size:7px; }
  .date-stub-route { grid-column:1 / span 2; grid-row:4; margin:0; }
  .date-stub-star { display:none; }
  .date-plan-result:not(.is-reminder) .plan-card-signoff { display:none; }
  .date-stub-personal { grid-column:3; grid-row:4; align-self:center; margin:0; padding:0; border:0; font-size:6px; }
  .date-stub-personal strong { font-size:8px; }
  .date-stub-vertical { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .date-plan-result:not(.is-reminder),.date-plan-result:not(.is-reminder)::after,.date-stub-celebration span { animation:none!important; }
}

/* Give all eight reflections a deliberate, alternating place in the spread. */
.learning-row:nth-child(1) { grid-column:span 7; }
.learning-row:nth-child(2) { grid-column:span 5; }
.learning-row:nth-child(3) { grid-column:span 5; }
.learning-row:nth-child(4) { grid-column:span 7; }
.learning-row:nth-child(5) {
  grid-column:span 7;
  grid-template-columns:54px minmax(0,1fr);
  grid-template-rows:auto auto;
  min-height:248px;
}
.learning-row:nth-child(5) .learning-index { grid-column:1; grid-row:1 / span 2; }
.learning-row:nth-child(5) h3 { grid-column:2; grid-row:1; }
.learning-row:nth-child(5) p { grid-column:2; grid-row:2; align-self:start; }
.learning-row:nth-child(6) { grid-column:span 5; animation-delay:-2s,-6s; }
.learning-row:nth-child(7) { grid-column:span 5; animation-delay:-4s,-2s; }
.learning-row:nth-child(8) { grid-column:span 7; animation-delay:-6s,-5s; }
.learning-row:nth-child(9) { grid-column:span 5; animation-delay:-1s,-3s; }
.learning-row:nth-child(10) { grid-column:span 7; animation-delay:-3s,-6s; }
.learning-row:nth-child(11) {
  grid-column:1 / -1;
  grid-template-columns:54px minmax(220px,.75fr) minmax(320px,1.25fr);
  grid-template-rows:auto;
  min-height:156px;
  background:radial-gradient(ellipse at 100% 50%,color-mix(in srgb,var(--lesson-accent) 30%,transparent),transparent 42%),linear-gradient(105deg,rgba(35,43,88,.98),color-mix(in srgb,var(--lesson-accent) 18%,rgba(27,27,64,.98)) 52%,rgba(17,22,48,.98));
  animation-delay:-5s,-2s;
}
.learning-row:nth-child(11) .learning-index { grid-row:1; }
.learning-row:nth-child(11) h3 { grid-column:2; grid-row:1; }
.learning-row:nth-child(11) p { grid-column:3; grid-row:1; align-self:center; }
@media (max-width:760px) {
  .learning-row:nth-child(n) { grid-column:1; min-height:164px; }
  .learning-row:nth-child(11) { grid-template-columns:43px minmax(0,1fr); grid-template-rows:auto auto; }
  .learning-row:nth-child(11) .learning-index { grid-column:1; grid-row:1 / span 2; }
  .learning-row:nth-child(11) h3 { grid-column:2; grid-row:1; }
  .learning-row:nth-child(11) p { grid-column:2; grid-row:2; }
  .learning-row:nth-child(5) { grid-template-columns:43px minmax(0,1fr); grid-template-rows:auto auto; }
  .learning-row:nth-child(5) .learning-index { grid-column:1; grid-row:1 / span 2; }
  .learning-row:nth-child(5) h3 { grid-column:2; grid-row:1; }
  .learning-row:nth-child(5) p { grid-column:2; grid-row:2; }
}

/* Let each loop set the viewing frame to its own aspect ratio, so no bars,
   stretching, or cropping are needed to fill the video window. */
.little-loops-section .clip-media {
  width:min(100%, 900px);
  min-height:0;
  aspect-ratio:16 / 9;
  justify-self:center;
  align-self:center;
  background:#0c1220;
}
.little-loops-section .clip-video { object-fit:contain; background:transparent; }
@media (max-width:760px) {
  .little-loops-section .clip-media { width:min(100%, 900px); min-height:0; }
}

/* Keep the long wishes on these three postcards comfortably inside their frames. */
.postcard-section .postcard-theme-2 h3 {
  width:100%; max-width:100%; min-height:0; flex:0 1 auto;
  font-size:clamp(23px,2vw,27px); line-height:1.14;
  overflow-wrap:break-word; text-wrap:pretty;
}
.postcard-section .postcard-theme-4 h3 {
  width:100%; max-width:100%; min-height:0; flex:0 1 auto;
  font-size:clamp(23px,2vw,27px); line-height:1.14;
  overflow-wrap:break-word; text-wrap:pretty;
}
.postcard-section .postcard-theme-11 h3 {
  width:100%; max-width:100%; min-height:0; flex:0 1 auto;
  font-size:clamp(20px,1.7vw,23px); line-height:1.18;
  overflow-wrap:break-word; text-wrap:pretty;
}
@media (max-width:700px) {
  .postcard-section .postcard-theme-2 h3 { font-size:clamp(16px,4.6vw,19px)!important; line-height:1.16; }
  .postcard-section .postcard-theme-4 h3 { font-size:clamp(17px,4.8vw,20px)!important; line-height:1.16; }
  .postcard-section .postcard-theme-11 h3 { max-width:100%; font-size:clamp(15px,4vw,17px)!important; line-height:1.18; }
}

/* A little extra breathing room for the expanded reasons collection. */
.reasons-section .reason-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.reasons-section .reason-card { min-height:178px; border-radius:14px; }
.reasons-section .reason-card.is-open { min-height:190px; }
.reasons-section .reason-card.is-open p { max-width:31ch; margin-inline:auto; font-family:"Cormorant Garamond",var(--serif); font-style:italic; font-weight:600; letter-spacing:.005em; }
@media (max-width:700px) {
  .reasons-section .reason-grid { gap:9px; }
  .reasons-section .reason-card { min-height:148px; }
  .reasons-section .reason-card.is-open { min-height:164px; }
}@media (max-width:900px) {
  .reasons-section .reason-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* 08 · Our Day: a warmer celestial finish with slow ambient motion. */
.perfect-day-section::before {
  position:absolute; z-index:-1; inset:2% -5% 0; content:""; pointer-events:none;
  background:radial-gradient(ellipse at 8% 24%,rgba(66,160,204,.16),transparent 42%),radial-gradient(ellipse at 88% 37%,rgba(159,111,211,.13),transparent 39%),radial-gradient(ellipse at 55% 92%,rgba(217,143,161,.09),transparent 40%);
  filter:blur(12px); animation:our-day-aurora-drift 24s ease-in-out infinite alternate;
}
.perfect-day-section .section-kicker { color:#b6eaf3; }
.perfect-day-section .section-kicker i { background:linear-gradient(90deg,#8eddeb,#c7aaf4 55%,#f4b4ce 82%,transparent); }
.perfect-day-section .section-head h2 em {
  background:linear-gradient(100deg,#b7eaf2 4%,#cdb7ff 48%,#f4b5d0 76%,#f5d58c 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none;
}
.date-builder {
  border-color:rgba(164,218,238,.48);
  box-shadow:0 30px 78px rgba(0,0,0,.32),0 0 34px rgba(87,180,208,.13),0 0 42px rgba(170,126,216,.09),inset 0 1px rgba(255,255,255,.11);
}
.date-builder::before {
  border-color:rgba(194,177,255,.24);
  background:radial-gradient(circle at 38% 42%,rgba(133,212,231,.17),rgba(177,145,230,.09) 42%,rgba(244,177,207,.035) 61%,transparent 73%);
  box-shadow:0 0 54px rgba(115,193,220,.12),inset 0 0 42px rgba(194,177,255,.08);
  animation:date-orbit-drift 16s ease-in-out infinite alternate;
}
.date-builder::after {
  height:2px; opacity:.9; background-size:220% 100%;
  animation:our-day-rim-glide 9s ease-in-out infinite alternate;
}
.date-plan-progress { color:#d2daec; }
.date-plan-progress i { height:4px; background:linear-gradient(90deg,rgba(112,200,220,.18),rgba(194,177,255,.2),rgba(242,164,206,.16),rgba(255,214,110,.12)); }
.date-plan-progress i span { background:linear-gradient(90deg,#8de2ed,#bba9ff 43%,#f2a4ce 73%,#ffd66e); box-shadow:0 0 17px rgba(141,226,237,.55),0 0 28px rgba(194,177,255,.28); }
.date-choice-stage::before {
  background:radial-gradient(ellipse at 46% 42%,rgba(113,201,222,.18),rgba(174,142,222,.11) 38%,rgba(242,164,206,.07) 59%,rgba(255,214,110,.035) 70%,transparent 79%);
  filter:blur(15px); animation-duration:10s;
}
.date-choice-group:not([hidden]) { animation:our-day-step-arrive .62s cubic-bezier(.18,.78,.22,1) both; }
.date-choice-group legend span {
  border-color:rgba(165,222,237,.62);
  background:linear-gradient(145deg,rgba(114,203,223,.22),rgba(194,177,255,.16) 58%,rgba(242,164,206,.12));
  color:#e1f8fb; box-shadow:0 0 18px rgba(116,205,224,.2),inset 0 1px rgba(255,255,255,.12);
}
.date-choices button { backdrop-filter:blur(8px); }
.date-choices button:nth-child(6n + 1) { --choice-accent:#8de2ed; }
.date-choices button:nth-child(6n + 2) { --choice-accent:#f2a4ce; }
.date-choices button:nth-child(6n + 3) { --choice-accent:#bba9ff; }
.date-choices button:nth-child(6n + 4) { --choice-accent:#9de3b7; }
.date-choices button:nth-child(6n + 5) { --choice-accent:#ffd66e; }
.date-choices button:nth-child(6n) { --choice-accent:#ffb98f; }
.date-choices button[aria-pressed="true"] { transform:translateY(-2px); }
.date-choices button[aria-pressed="true"]::after { animation:our-day-star-glint 2.5s ease-in-out infinite; }
.date-plan-navigation button,.date-end-button,.save-custom-choice,.date-reveal-button,.date-unlock-button,.download-plan-ticket { transition-timing-function:cubic-bezier(.2,.75,.2,1); }
.date-plan-result:not(.is-reminder) { box-shadow:0 22px 58px rgba(0,0,0,.3),0 0 28px rgba(115,197,220,.13),0 0 38px rgba(191,157,235,.08); }
@keyframes our-day-aurora-drift { 0% { opacity:.72; transform:translate3d(-1%,0,0) scale(1); } 100% { opacity:1; transform:translate3d(1.5%,-1%,0) scale(1.035); } }
@keyframes our-day-rim-glide { 0% { background-position:0% 50%; opacity:.62; } 100% { background-position:100% 50%; opacity:1; } }
@keyframes our-day-step-arrive { 0% { opacity:0; transform:translate3d(18px,9px,0) scale(.985); filter:blur(5px); } 70% { opacity:1; } 100% { opacity:1; transform:translate3d(0,0,0) scale(1); filter:blur(0); } }
@keyframes our-day-star-glint { 0%,100% { filter:brightness(1); text-shadow:0 0 7px color-mix(in srgb,var(--choice-accent) 32%,transparent); } 50% { filter:brightness(1.45); text-shadow:0 0 15px color-mix(in srgb,var(--choice-accent) 72%,transparent); } }
@media (max-width:700px) {
  .perfect-day-section::before { inset:0 -15% 0; filter:blur(16px); }
  .date-builder { box-shadow:0 22px 56px rgba(0,0,0,.3),0 0 25px rgba(87,180,208,.11),0 0 28px rgba(170,126,216,.07),inset 0 1px rgba(255,255,255,.1); }
}
@media (prefers-reduced-motion:reduce) {
  .perfect-day-section::before,.date-builder::before,.date-builder::after,.date-choice-group:not([hidden]),.date-choice-group:not([hidden]) .date-choices button,.date-choices button[aria-pressed="true"]::after { animation:none!important; }
}
/* 10 · Little Loops: soften the frame, deepen the color, and polish the player controls. */
.little-loops-section::before {
  background:radial-gradient(ellipse at 18% 45%,rgba(89,207,219,.16),transparent 43%),radial-gradient(ellipse at 79% 38%,rgba(174,139,239,.15),transparent 42%),radial-gradient(ellipse at 54% 85%,rgba(242,151,196,.1),transparent 46%),radial-gradient(ellipse at 50% 10%,rgba(255,213,124,.05),transparent 38%);
  animation-duration:17s;
}
.little-loops-section .section-head h2 em {
  background:linear-gradient(100deg,#a5ece6 2%,#a9dff4 38%,#c6b2ff 69%,#f1afd0 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 24px rgba(157,229,226,.08);
}
.little-loops-section .clip-carousel { max-width:1320px; gap:clamp(30px,4.5vw,68px); }
.little-loops-section .clip-media {
  border:1px solid transparent; border-radius:28px;
  background:linear-gradient(#0b1120,#0b1120) padding-box,linear-gradient(135deg,#8de7e7 0%,#8abfe0 26%,#b7a4f5 52%,#efa6cd 77%,#f5d17e 100%) border-box;
  box-shadow:0 26px 78px rgba(0,0,0,.38),0 0 28px rgba(91,206,215,.14),0 0 35px rgba(181,144,237,.12),inset 0 1px rgba(255,255,255,.1);
  animation:loops-frame-lustre 9s ease-in-out infinite alternate;
  transition:transform .48s cubic-bezier(.2,.75,.2,1),box-shadow .5s,border-radius .5s;
}
.little-loops-section .clip-media:hover {
  transform:translateY(-4px) scale(1.004);
  box-shadow:0 32px 88px rgba(0,0,0,.42),0 0 37px rgba(91,206,215,.2),0 0 44px rgba(181,144,237,.16),inset 0 1px rgba(255,255,255,.13);
}
.little-loops-section .clip-media::before { border-color:rgba(149,225,239,.2); animation-duration:28s; }
.little-loops-section .clip-media::after { border-color:rgba(242,164,206,.22); animation-duration:34s; }
.little-loops-section .clip-video { filter:saturate(1.07) contrast(1.04) brightness(1.01); transition:filter .55s ease,opacity .55s ease; }
.little-loops-section .clip-video:hover { filter:saturate(1.1) contrast(1.05) brightness(1.025); }
.little-loops-section .clip-color-wash {
  opacity:.4;
  background:radial-gradient(ellipse at 8% 92%,rgba(87,220,211,.12),transparent 45%),radial-gradient(ellipse at 94% 10%,rgba(231,143,207,.11),transparent 45%),linear-gradient(135deg,rgba(100,150,235,.035),transparent 55%,rgba(255,209,116,.035));
}
.little-loops-section .clip-color-wash::after { animation-duration:11s; opacity:.72; }
.little-loops-section .clip-caption-panel { padding:25px 0 25px clamp(10px,1.35vw,20px); }
.little-loops-section .clip-caption-panel::before {
  left:0; width:2px; border-radius:999px;
  background:linear-gradient(180deg,transparent,rgba(123,221,229,.78) 22%,rgba(184,158,244,.8) 58%,rgba(242,164,206,.68) 82%,transparent);
  box-shadow:0 0 16px rgba(131,213,229,.24),0 0 25px rgba(184,158,244,.12);
}
.little-loops-section .clip-counter { color:#b5c0d3; letter-spacing:.18em; }
.little-loops-section .clip-counter b { color:#d6c3ff; text-shadow:0 0 14px rgba(194,177,255,.28); }
.little-loops-section .clip-caption {
  color:#fbf7fc; font-family:"Cormorant Garamond",var(--serif); font-weight:600;
  line-height:1.04; text-shadow:0 4px 30px rgba(0,0,0,.28),0 0 27px rgba(147,201,231,.1);
}
.little-loops-section .clip-navigation {
  width:100%; max-width:510px; gap:11px; padding:7px 9px;
  border:1px solid rgba(176,197,235,.18); border-radius:999px;
  background:linear-gradient(110deg,rgba(113,194,210,.075),rgba(155,126,204,.08) 58%,rgba(226,147,191,.055));
  box-shadow:inset 0 1px rgba(255,255,255,.055),0 9px 24px rgba(0,0,0,.13);
  backdrop-filter:blur(10px);
}
.little-loops-section .clip-arrow {
  width:45px; height:45px; flex-basis:45px; border-color:rgba(152,218,233,.45);
  background:linear-gradient(145deg,rgba(127,207,218,.13),rgba(152,128,211,.11)); color:#e7f7fa;
  box-shadow:inset 0 1px rgba(255,255,255,.08); transition:transform .32s cubic-bezier(.2,.75,.2,1),border-color .32s,background .32s,box-shadow .32s;
}
.little-loops-section .clip-arrow:hover { border-color:#d0bcff; background:linear-gradient(145deg,rgba(127,207,218,.2),rgba(190,156,232,.2)); box-shadow:0 0 20px rgba(152,198,231,.15),inset 0 1px rgba(255,255,255,.13); }
.little-loops-section .clip-dot { border-color:rgba(183,208,235,.56); background:rgba(205,218,241,.12); transition:width .38s cubic-bezier(.2,.75,.2,1),background .3s,border-color .3s,box-shadow .35s,transform .3s; }
.little-loops-section .clip-dot:hover { transform:scale(1.3); border-color:#f2c9e3; background:rgba(242,164,206,.7); }
.little-loops-section .clip-dot.is-active { border-color:transparent; background:linear-gradient(90deg,#8de5e5,#b9a8ff 58%,#f1a9d0); box-shadow:0 0 16px rgba(177,161,242,.48); }
.little-loops-section .clip-swipe-hint { color:#9baac0; letter-spacing:.2em; }
.little-loops-section .clip-audio-toggle {
  right:21px; bottom:21px; width:46px; height:46px; min-height:46px;
  border-color:rgba(196,226,243,.58); background:linear-gradient(145deg,rgba(14,24,43,.82),rgba(26,25,47,.78));
  box-shadow:0 9px 25px rgba(0,0,0,.38),0 0 16px rgba(114,205,219,.13),inset 0 1px rgba(255,255,255,.16);
  transition:transform .3s cubic-bezier(.2,.75,.2,1),border-color .3s,background .3s,box-shadow .35s,color .3s;
}
.little-loops-section .clip-audio-toggle:hover,.little-loops-section .clip-audio-toggle.is-sound-on {
  transform:translateY(-2px) scale(1.04); border-color:#a4edf0;
  background:linear-gradient(145deg,rgba(30,59,72,.93),rgba(48,39,72,.9));
  box-shadow:0 11px 29px rgba(0,0,0,.4),0 0 23px rgba(119,220,224,.25),inset 0 1px rgba(255,255,255,.2);
}
.little-loops-section .clip-audio-icon { width:26px; height:26px; background:transparent; color:#c9f6f4; }
.little-loops-section .clip-audio-icon svg { width:19px; height:19px; }
.little-loops-section .clip-play-toggle { border-color:rgba(255,255,255,.94); background:linear-gradient(145deg,rgba(15,28,47,.62),rgba(55,40,77,.56)); box-shadow:0 10px 34px rgba(0,0,0,.38),0 0 30px rgba(128,208,224,.22),inset 0 1px rgba(255,255,255,.42); }
.little-loops-section .clip-play-toggle:hover,.little-loops-section .clip-play-toggle:focus-visible { background:linear-gradient(145deg,rgba(32,60,75,.84),rgba(76,53,96,.78)); box-shadow:0 12px 38px rgba(0,0,0,.42),0 0 38px rgba(157,229,226,.34),inset 0 1px rgba(255,255,255,.6); }
@keyframes loops-frame-lustre { 0%,100% { box-shadow:0 26px 78px rgba(0,0,0,.38),0 0 27px rgba(91,206,215,.12),0 0 30px rgba(181,144,237,.1),inset 0 1px rgba(255,255,255,.09); } 50% { box-shadow:0 29px 82px rgba(0,0,0,.4),0 0 38px rgba(91,206,215,.2),0 0 39px rgba(181,144,237,.15),inset 0 1px rgba(255,255,255,.12); } }
@media (max-width:760px) {
  .little-loops-section .clip-media { border-radius:22px; }
  .little-loops-section .clip-navigation { max-width:100%; gap:7px; padding:6px; }
  .little-loops-section .clip-arrow { width:40px; height:40px; flex-basis:40px; }
  .little-loops-section .clip-audio-toggle { right:14px; bottom:14px; width:42px; height:42px; min-height:42px; }
  .little-loops-section .clip-caption-panel { padding-left:13px; }
}
@media (prefers-reduced-motion:reduce) {
  .little-loops-section::before,.little-loops-section .clip-media,.little-loops-section .clip-media::before,.little-loops-section .clip-media::after,.little-loops-section .clip-color-wash::after,.little-loops-section .clip-audio-icon,.little-loops-section .clip-dot.is-active { animation:none!important; }
  .little-loops-section .clip-media,.little-loops-section .clip-video,.little-loops-section .clip-arrow,.little-loops-section .clip-dot,.little-loops-section .clip-audio-toggle { transition:none!important; }
}

/* Section 07: give the reflections an orbital, editorial rhythm. */
.learning-list {
  position:relative;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:22px;
  row-gap:25px;
  perspective:1200px;
}
.learning-list::before {
  content:"";
  position:absolute;
  inset:4% 2% 3%;
  z-index:0;
  pointer-events:none;
  border:1px solid rgba(148,190,238,.1);
  border-radius:48% 52% 44% 56% / 40% 46% 54% 60%;
  transform:rotate(-3deg);
  box-shadow:0 0 45px rgba(89,156,218,.045),inset 0 0 38px rgba(119,160,233,.035);
}
.learning-row {
  position:relative;
  z-index:1;
  min-height:190px;
  padding:25px clamp(21px,2.6vw,36px);
  border:1px solid color-mix(in srgb,var(--lesson-accent) 35%,rgba(191,211,246,.16));
  border-radius:22px 7px 22px 7px;
  background:radial-gradient(ellipse at 92% 8%,color-mix(in srgb,var(--lesson-accent) 17%,transparent),transparent 50%),linear-gradient(145deg,rgba(30,40,72,.82),rgba(14,21,43,.88) 72%);
  box-shadow:inset 0 1px rgba(255,255,255,.12),0 16px 34px rgba(0,0,0,.2),0 0 28px color-mix(in srgb,var(--lesson-accent) 9%,transparent);
  backdrop-filter:blur(8px);
  animation:learning-card-float 9s ease-in-out infinite;
  transition:transform .65s cubic-bezier(.2,.8,.2,1),border-color .5s ease,background .65s ease,box-shadow .65s ease,filter .5s ease;
}
.learning-row:nth-child(1) { grid-column:span 4; min-height:205px; }
.learning-row:nth-child(2) { grid-column:span 4; min-height:178px; margin-top:23px; animation-delay:-1s,-2.4s; }
.learning-row:nth-child(3) { grid-column:span 4; min-height:196px; margin-top:8px; animation-delay:-3s,-4.8s; }
.learning-row:nth-child(4) { grid-column:span 5; min-height:200px; margin-left:2%; animation-delay:-5s,-1.2s; }
.learning-row:nth-child(5) { grid-column:span 4; min-height:178px; margin-top:18px; }
.learning-row:nth-child(6) { grid-column:span 3; min-height:200px; margin-top:4px; animation-delay:-2s,-6s; }
.learning-row:nth-child(7) { grid-column:span 7; min-height:190px; margin-left:1%; animation-delay:-4s,-2s; }
.learning-row:nth-child(8) { grid-column:span 5; min-height:190px; margin-top:19px; animation-delay:-6s,-5s; }
.learning-row:nth-child(9) { grid-column:span 4; min-height:184px; margin-top:12px; animation-delay:-1s,-3s; }
.learning-row:nth-child(10) { grid-column:span 4; min-height:208px; animation-delay:-3s,-6s; }
.learning-row:nth-child(11) {
  grid-column:span 4;
  grid-template-columns:43px minmax(0,1fr);
  grid-template-rows:auto auto;
  min-height:195px;
  margin-top:17px;
  background:radial-gradient(ellipse at 95% 0%,rgba(194,177,255,.2),transparent 53%),linear-gradient(145deg,rgba(49,42,82,.88),rgba(20,24,49,.92) 72%);
  animation-delay:-5s,-2s;
}
.learning-row:nth-child(11) .learning-index { grid-column:1; grid-row:1 / span 2; }
.learning-row:nth-child(11) h3 { grid-column:2; grid-row:1; }
.learning-row:nth-child(11) p { grid-column:2; grid-row:2; align-self:start; }
.learning-row:hover { transform:translateY(-8px) rotateX(1deg); border-radius:18px 12px 18px 12px; }
@media (max-width:760px) {
  .learning-list { grid-template-columns:1fr; row-gap:14px; column-gap:0; }
  .learning-list::before { inset:1% 3%; border-radius:35px; transform:rotate(0); }
  .learning-row,.learning-row:nth-child(n) {
    grid-column:1;
    min-height:150px;
    margin:0;
    padding:21px 20px;
    border-radius:19px 7px 19px 7px;
  }
  .learning-row:nth-child(11) { grid-template-columns:43px minmax(0,1fr); grid-template-rows:auto auto; }
  .learning-row:nth-child(11) .learning-index { grid-column:1; grid-row:1 / span 2; }
  .learning-row:nth-child(11) h3 { grid-column:2; grid-row:1; }
  .learning-row:nth-child(11) p { grid-column:2; grid-row:2; }
}

/* Section 07 compact two-up cards: consistent proportions, clearer color. */
.learning-list {
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:204px;
  gap:20px 24px;
  width:min(100%,1040px);
  margin-top:clamp(34px,4vw,54px);
}
.learning-list::before {
  inset:2% 1%;
  border-radius:42% 58% 50% 50% / 48% 42% 58% 52%;
  opacity:.8;
}
.learning-row,.learning-row:nth-child(n) {
  grid-column:span 1;
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  grid-template-rows:auto auto;
  align-content:center;
  gap:8px 15px;
  width:100%;
  height:204px;
  min-height:0;
  margin:0;
  padding:22px 25px;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--lesson-accent) 58%,rgba(225,237,255,.22));
  border-radius:20px 8px 20px 8px;
  background:radial-gradient(ellipse at 100% 0%,color-mix(in srgb,var(--lesson-accent) 26%,transparent),transparent 48%),linear-gradient(130deg,color-mix(in srgb,var(--lesson-accent) 12%,rgba(25,34,63,.94)),rgba(14,21,43,.96) 66%);
  box-shadow:inset 0 1px rgba(255,255,255,.16),inset 0 0 32px color-mix(in srgb,var(--lesson-accent) 5%,transparent),0 14px 30px rgba(0,0,0,.22),0 0 22px color-mix(in srgb,var(--lesson-accent) 11%,transparent);
  backdrop-filter:blur(8px);
  animation:learning-card-float 8s ease-in-out infinite;
}
.learning-row:nth-child(2n) { animation-delay:-3s; }
.learning-row:nth-child(11) { grid-column:1 / -1; width:calc(50% - 12px); justify-self:center; }
.learning-row .learning-index,.learning-row:nth-child(n) .learning-index {
  grid-column:1;
  grid-row:1 / span 2;
  align-self:center;
  width:36px;
  height:36px;
  border:1px solid color-mix(in srgb,var(--lesson-accent) 82%,white);
  background:radial-gradient(circle at 32% 27%,color-mix(in srgb,var(--lesson-accent) 88%,white),color-mix(in srgb,var(--lesson-accent) 36%,#111a33) 77%);
  color:#10182d;
  font-size:9px;
  box-shadow:0 0 18px color-mix(in srgb,var(--lesson-accent) 43%,transparent),inset 0 1px rgba(255,255,255,.55);
}
.learning-row h3,.learning-row:nth-child(n) h3 {
  grid-column:2;
  grid-row:1;
  align-self:end;
  padding-right:18px;
  color:#fbf8ff;
  font-size:clamp(25px,2.2vw,31px);
  line-height:1.02;
  text-shadow:0 2px 15px rgba(0,0,0,.34),0 0 20px color-mix(in srgb,var(--lesson-accent) 19%,transparent);
}
.learning-row p,.learning-row:nth-child(n) p {
  grid-column:2;
  grid-row:2;
  align-self:start;
  max-width:48ch;
  padding-right:10px;
  color:#dce5f4;
  font-size:clamp(15px,1.25vw,17px);
  line-height:1.4;
  text-shadow:0 1px 9px rgba(0,0,0,.35);
}
.learning-row::before { top:18px; bottom:18px; width:2px; opacity:.9; }
.learning-row::after { top:18px; right:20px; opacity:.78; font-size:16px; }
.learning-row:hover,.learning-row:nth-child(n):hover {
  transform:translateY(-5px) scale(1.012);
  border-color:color-mix(in srgb,var(--lesson-accent) 82%,white);
  border-radius:17px 12px 17px 12px;
  background:radial-gradient(ellipse at 100% 0%,color-mix(in srgb,var(--lesson-accent) 34%,transparent),transparent 54%),linear-gradient(130deg,color-mix(in srgb,var(--lesson-accent) 17%,rgba(28,39,73,.97)),rgba(15,23,47,.98) 66%);
  box-shadow:inset 0 1px rgba(255,255,255,.22),0 20px 38px rgba(0,0,0,.28),0 0 34px color-mix(in srgb,var(--lesson-accent) 23%,transparent);
}
@media (max-width:760px) {
  .learning-list { grid-template-columns:1fr; grid-auto-rows:194px; gap:14px; }
  .learning-row,.learning-row:nth-child(n) { grid-column:1; height:194px; padding:20px 19px; }
  .learning-row:nth-child(11) { grid-column:1; width:100%; }
  .learning-row h3,.learning-row:nth-child(n) h3 { font-size:27px; }
  .learning-row p,.learning-row:nth-child(n) p { font-size:16px; }
}
@media (max-width:420px) {
  .learning-list { grid-auto-rows:210px; }
  .learning-row,.learning-row:nth-child(n) { height:210px; padding:19px 15px; grid-template-columns:34px minmax(0,1fr); gap:7px 11px; }
  .learning-row .learning-index,.learning-row:nth-child(n) .learning-index { width:31px; height:31px; }
  .learning-row h3,.learning-row:nth-child(n) h3 { font-size:25px; }
  .learning-row p,.learning-row:nth-child(n) p { font-size:15px; }
}

/* Finale slide 01: a single invitation opens the cake gift and starts listening. */
.finale-section #wish {
  padding:clamp(64px,9vh,100px) clamp(24px,7vw,100px) 42px;
  background:radial-gradient(ellipse at 50% 64%,rgba(255,190,95,.13),transparent 34%),radial-gradient(ellipse at 18% 46%,rgba(242,164,206,.075),transparent 25%),radial-gradient(ellipse at 82% 48%,rgba(130,220,207,.075),transparent 25%),linear-gradient(155deg,rgba(13,17,37,.94),rgba(29,18,43,.92) 53%,rgba(11,22,34,.95));
}
.finale-section #wish .wish-layout { grid-template-columns:minmax(0,.9fr) minmax(390px,1.1fr); gap:clamp(32px,6vw,82px); max-width:1100px; }
.finale-section #wish .wish-copy { max-width:500px; }
.finale-section #wish .wish-copy h1 { margin:0 0 28px; color:#fff8ff; font:500 clamp(64px,7.4vw,96px)/.98 "Bodoni Moda",var(--serif); letter-spacing:-.055em; text-shadow:0 10px 38px rgba(6,10,24,.3); }
.finale-section #wish .wish-gift-open {
  display:inline-flex;
  min-height:54px;
  align-items:center;
  gap:13px;
  padding:0 22px;
  border:1px solid rgba(255,220,143,.76);
  border-radius:999px;
  color:#fff6df;
  background:linear-gradient(110deg,rgba(241,187,100,.23),rgba(227,132,178,.2) 54%,rgba(108,201,211,.18));
  box-shadow:0 10px 28px rgba(4,8,20,.3),0 0 27px rgba(248,196,119,.12),inset 0 1px rgba(255,255,255,.18);
  font:700 10px/1 var(--sans);
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform .35s cubic-bezier(.2,.75,.2,1),border-color .35s,background .35s,box-shadow .35s,opacity .45s;
}
.finale-section #wish .wish-gift-open > span { color:#ffe08a; font-size:18px; text-shadow:0 0 15px rgba(255,224,138,.65); }
.finale-section #wish .wish-gift-open > b { margin-left:7px; color:#a6e3e6; font-size:17px; font-weight:500; }
.finale-section #wish .wish-gift-open:hover { transform:translateY(-3px) scale(1.025); border-color:#fff0c6; background:linear-gradient(110deg,rgba(241,187,100,.34),rgba(227,132,178,.28) 54%,rgba(108,201,211,.26)); box-shadow:0 15px 35px rgba(4,8,20,.32),0 0 36px rgba(248,196,119,.2),inset 0 1px rgba(255,255,255,.22); }
.finale-section #wish .wish-gift-open:focus-visible { outline:2px solid #fff0c6; outline-offset:5px; }
.finale-section #wish .wish-gift-open[hidden] { display:none; }
.finale-section #wish .wish-gift-open.is-retry { margin-top:12px; }
.finale-section #wish .wish-hint { max-width:360px; min-height:22px; margin:22px 0 0; color:#d7e2f0; font:500 15px/1.55 "DM Sans",var(--sans); letter-spacing:.01em; }
.finale-section #wish .wish-hint[hidden] { display:none; }
.finale-section #wish.is-listening .wish-hint { color:#bce9dc; }
.finale-section #wish .wish-art { min-height:clamp(360px,43vw,500px); }
.finale-section #wish .cake {
  visibility:hidden;
  opacity:0;
  transform:translateY(24px) scale(.78);
  animation:none;
  transition:opacity .7s ease,transform .9s cubic-bezier(.16,.72,.2,1),visibility .7s;
}
.finale-section #wish.is-gift-open:not(.is-blown) .cake {
  visibility:visible;
  opacity:1;
  animation:wish-cake-reveal 1.12s cubic-bezier(.16,.72,.2,1) both,cake-float 5.6s 1.12s ease-in-out infinite;
}
/* Keep the revealed cake present after the candles go out; celebrate, then settle into a gentle float. */
.finale-section #wish.is-gift-open.is-blown .cake {
  visibility:visible;
  opacity:1;
  transform:translateY(0) scale(1);
  animation:wish-cake-celebration 1.65s cubic-bezier(.16,.72,.2,1) both,cake-float 5.6s 1.65s ease-in-out infinite;
}
.finale-section #wish.is-gift-open.is-blown .wish-art::after {
  position:absolute;
  z-index:1;
  top:50%;
  left:50%;
  width:min(76%,360px);
  aspect-ratio:1;
  border:1px solid rgba(255,226,153,.68);
  border-radius:50%;
  box-shadow:0 0 24px rgba(255,205,115,.23),inset 0 0 22px rgba(243,166,207,.12);
  content:"";
  pointer-events:none;
  animation:wish-cake-ring-burst 1.25s .08s cubic-bezier(.12,.68,.2,1) both;
}
.finale-section #wish .wish-gift {
  position:absolute;
  z-index:7;
  top:53%;
  left:50%;
  width:min(310px,76%);
  height:230px;
  transform:translate(-50%,-32%);
  filter:drop-shadow(0 18px 25px rgba(4,8,20,.38));
  transition:filter .5s ease;
}
.wish-gift-base {
  position:absolute;
  right:10%;
  bottom:4%;
  left:10%;
  height:64%;
  border:1px solid rgba(255,232,184,.8);
  border-radius:8px 8px 16px 16px;
  background:linear-gradient(105deg,#a84880,#e28ba7 38%,#d8a06c 70%,#7c71bd);
  box-shadow:inset 0 2px rgba(255,255,255,.3),inset 0 -12px 20px rgba(27,19,53,.22),0 0 26px rgba(242,164,206,.18);
}
.wish-gift-base i,.wish-gift-lid i {
  position:absolute;
  top:0;
  bottom:0;
  left:44%;
  width:12%;
  background:linear-gradient(90deg,#ffe7a5,#fff5cf 52%,#e9bb70);
  box-shadow:0 0 15px rgba(255,227,151,.25);
}
.wish-gift-lid {
  position:absolute;
  z-index:2;
  top:19%;
  right:6%;
  left:6%;
  height:24%;
  border:1px solid rgba(255,241,210,.9);
  border-radius:9px;
  background:linear-gradient(105deg,#e7b76b,#f8d991 45%,#bd79a6 76%,#8b83c4);
  box-shadow:inset 0 2px rgba(255,255,255,.48),0 7px 15px rgba(7,9,25,.26);
  transform-origin:13% 100%;
}
.wish-gift-lid i { left:43%; }
.wish-gift-lid b,.wish-gift-lid b::before,.wish-gift-lid b::after {
  position:absolute;
  top:-32px;
  left:42%;
  width:32px;
  height:27px;
  border:4px solid #ffe7a5;
  border-radius:90% 90% 12% 90%;
  content:"";
  filter:drop-shadow(0 0 7px rgba(255,226,143,.42));
}
.wish-gift-lid b::before { top:0; left:19px; transform:scaleX(-1); }
.wish-gift-lid b::after { top:18px; left:10px; width:13px; height:13px; border-radius:50%; background:#ffe7a5; }
.wish-gift-spark { position:absolute; top:4%; right:14%; color:#fff5cd; font-size:22px; text-shadow:0 0 19px rgba(255,236,167,.9); animation:twinkle 2.4s ease-in-out infinite; }
.finale-section #wish.is-gift-open .wish-gift { pointer-events:none; }
.finale-section #wish.is-gift-open .wish-gift-lid { animation:wish-gift-lid-open 1.05s cubic-bezier(.16,.72,.2,1) both; }
.finale-section #wish.is-gift-open .wish-gift-base { animation:wish-gift-box-away .85s .24s cubic-bezier(.2,.7,.2,1) both; }
.finale-section #wish.is-gift-open .wish-gift-spark { animation:wish-gift-spark-pop .75s ease-out both; }
.finale-section #wish.is-gift-open .wish-gift-open:not(.is-retry) { opacity:0; visibility:hidden; transform:translateY(8px) scale(.96); pointer-events:none; }
.finale-section #wish.is-listening .candles i { animation:flame-listening .48s ease-in-out infinite alternate; }
@keyframes wish-cake-reveal { 0% { opacity:0; transform:translateY(22px) scale(.72); filter:blur(9px); } 65% { opacity:1; transform:translateY(-8px) scale(1.035); filter:blur(0); } 100% { opacity:1; transform:translateY(0) scale(1); filter:blur(0); } }
@keyframes wish-cake-celebration { 0% { opacity:1; transform:translateY(0) scale(1); filter:brightness(1); } 18% { transform:translateY(-13px) scale(1.07) rotate(-2deg); filter:brightness(1.3) drop-shadow(0 0 22px rgba(255,218,132,.72)); } 38% { transform:translateY(-4px) scale(1.035) rotate(1.6deg); filter:brightness(1.18) drop-shadow(0 0 28px rgba(243,166,207,.52)); } 62% { transform:translateY(-9px) scale(1.055) rotate(-.8deg); filter:brightness(1.2) drop-shadow(0 0 26px rgba(169,220,255,.43)); } 100% { opacity:1; transform:translateY(0) scale(1); filter:brightness(1) drop-shadow(0 0 11px rgba(255,214,130,.2)); } }
@keyframes wish-cake-ring-burst { 0% { opacity:0; transform:translate(-50%,-50%) scale(.42); } 25% { opacity:.9; } 100% { opacity:0; transform:translate(-50%,-50%) scale(1.55); } }
@keyframes wish-gift-lid-open { 0% { transform:translateY(0) rotate(0); opacity:1; } 45% { transform:translateY(-55px) rotate(-12deg); opacity:1; } 100% { transform:translate(-42px,-118px) rotate(-25deg) scale(.82); opacity:0; } }
@keyframes wish-gift-box-away { to { transform:translateY(155px) scale(.82); opacity:0; filter:blur(4px); } }
@keyframes wish-gift-spark-pop { 0% { transform:scale(.5); opacity:1; } 100% { transform:translate(18px,-40px) scale(1.5); opacity:0; } }
@media (max-width:900px) {
  .finale-section #wish .wish-layout { grid-template-columns:minmax(0,.9fr) minmax(300px,1.1fr); gap:25px; }
  .finale-section #wish .wish-copy h1 { font-size:clamp(56px,7vw,78px); }
}
@media (max-width:680px) {
  .finale-section #wish { padding:72px 22px 32px; }
  .finale-section #wish .wish-layout { grid-template-columns:1fr; gap:0; width:min(100%,480px); }
  .finale-section #wish .wish-copy { max-width:none; text-align:center; }
  .finale-section #wish .wish-copy h1 { margin-bottom:18px; font-size:clamp(52px,12vw,72px); }
  .finale-section #wish .wish-hint { margin:14px auto 0; }
  .finale-section #wish .wish-art { min-height:clamp(285px,40vh,365px); }
  .finale-section #wish .cake { scale:.82; }
  .finale-section #wish .wish-gift { top:52%; width:min(270px,74%); height:205px; }
}
@media (prefers-reduced-motion:reduce) {
  .finale-section #wish .wish-gift-open,.finale-section #wish .wish-gift,.finale-section #wish .wish-gift-lid,.finale-section #wish .wish-gift-base,.finale-section #wish .wish-gift-spark,.finale-section #wish .cake { transition:none!important; animation:none!important; }
  .finale-section #wish.is-gift-open .wish-gift { opacity:0; visibility:hidden; }
  .finale-section #wish.is-gift-open .cake { visibility:visible; opacity:1; transform:none; }
}

/* Warm candlelit color returns to the opener without obscuring the cake or text. */
.finale-section #wish {
  background:
    radial-gradient(ellipse 40% 48% at 70% 54%,rgba(255,190,104,.22),transparent 100%),
    radial-gradient(ellipse 34% 48% at 77% 35%,rgba(243,133,177,.17),transparent 100%),
    radial-gradient(ellipse 43% 55% at 20% 38%,rgba(107,110,207,.19),transparent 100%),
    radial-gradient(ellipse 38% 38% at 48% 100%,rgba(76,174,175,.12),transparent 100%),
    linear-gradient(132deg,#11152d 0%,#20162f 45%,#2c1b36 68%,#101d2a 100%);
  background-size:100% 100%;
}
.finale-section #wish::after {
  position:absolute;
  z-index:0;
  inset:0;
  background:
    radial-gradient(circle,rgba(255,236,185,.7) 0 1px,transparent 1.8px) 8% 16%/91px 103px,
    radial-gradient(circle,rgba(239,164,205,.48) 0 1px,transparent 2px) 53% 67%/137px 129px,
    radial-gradient(circle,rgba(154,224,224,.42) 0 1px,transparent 2px) 80% 21%/119px 151px,
    radial-gradient(ellipse at 50% 52%,rgba(255,215,144,.09),transparent 48%);
  content:"";
  opacity:.38;
  pointer-events:none;
  animation:wish-backdrop-drift 24s ease-in-out infinite alternate;
}
.finale-section #wish .wish-layout { position:relative; z-index:3; }
.finale-section #wish .wish-fireworks { z-index:2; }
.finale-section #wish .wish-art { filter:drop-shadow(0 20px 38px rgba(6,9,22,.22)); }
@keyframes wish-backdrop-drift { from { background-position:8% 16%,53% 67%,80% 21%,50% 52%; } to { background-position:12% 23%,48% 61%,85% 28%,50% 48%; } }
@media (prefers-reduced-motion:reduce) {
  .finale-section #wish::after { animation:none; }
  .finale-section #wish.is-gift-open.is-blown .cake { animation:none!important; }
  .finale-section #wish.is-gift-open.is-blown .wish-art::after { animation:none!important; }
}

/* Gift opening becomes the celebration: color, confetti, blossoms and a cake reveal. */
.finale-section #wish .wish-intro { margin:-16px 0 22px; color:#e6cde0; font:500 clamp(14px,1.4vw,17px)/1.5 "DM Sans",var(--sans); letter-spacing:.015em; }
.finale-section #wish .wish-party { position:absolute; z-index:1; inset:0; overflow:hidden; visibility:hidden; pointer-events:none; }
.finale-section #wish.is-gift-open .wish-party { visibility:visible; }
.wish-party-confetti { position:absolute; inset:0; overflow:hidden; }
.wish-party-confetti i { --dx:0px; --dy:0px; --turn:0deg; position:absolute; top:50%; left:50%; width:7px; height:13px; border-radius:2px; background:#ffd66e; box-shadow:0 0 11px currentColor; opacity:0; transform:translate(-50%,-50%); }
.wish-party-confetti i:nth-child(6n+1) { color:#ffe28f; background:currentColor; }
.wish-party-confetti i:nth-child(6n+2) { color:#f28fba; background:currentColor; }
.wish-party-confetti i:nth-child(6n+3) { color:#81d6d3; background:currentColor; }
.wish-party-confetti i:nth-child(6n+4) { color:#b9a7ff; background:currentColor; }
.wish-party-confetti i:nth-child(6n+5) { color:#fff1d2; background:currentColor; }
.wish-party-confetti i:nth-child(1) { --dx:-47vw;--dy:-37vh;--turn:-220deg; }
.wish-party-confetti i:nth-child(2) { --dx:-39vw;--dy:31vh;--turn:180deg; }
.wish-party-confetti i:nth-child(3) { --dx:-31vw;--dy:-45vh;--turn:320deg; }
.wish-party-confetti i:nth-child(4) { --dx:-23vw;--dy:39vh;--turn:-300deg; }
.wish-party-confetti i:nth-child(5) { --dx:-15vw;--dy:-32vh;--turn:250deg; }
.wish-party-confetti i:nth-child(6) { --dx:-8vw;--dy:45vh;--turn:210deg; }
.wish-party-confetti i:nth-child(7) { --dx:0vw;--dy:-48vh;--turn:-260deg; }
.wish-party-confetti i:nth-child(8) { --dx:8vw;--dy:40vh;--turn:340deg; }
.wish-party-confetti i:nth-child(9) { --dx:16vw;--dy:-39vh;--turn:200deg; }
.wish-party-confetti i:nth-child(10) { --dx:24vw;--dy:44vh;--turn:-180deg; }
.wish-party-confetti i:nth-child(11) { --dx:32vw;--dy:-34vh;--turn:300deg; }
.wish-party-confetti i:nth-child(12) { --dx:40vw;--dy:29vh;--turn:-330deg; }
.wish-party-confetti i:nth-child(13) { --dx:48vw;--dy:-43vh;--turn:210deg; }
.wish-party-confetti i:nth-child(14) { --dx:-44vw;--dy:8vh;--turn:-250deg; }
.wish-party-confetti i:nth-child(15) { --dx:-35vw;--dy:-12vh;--turn:190deg; }
.wish-party-confetti i:nth-child(16) { --dx:-26vw;--dy:19vh;--turn:-310deg; }
.wish-party-confetti i:nth-child(17) { --dx:-17vw;--dy:-18vh;--turn:280deg; }
.wish-party-confetti i:nth-child(18) { --dx:-5vw;--dy:16vh;--turn:-240deg; }
.wish-party-confetti i:nth-child(19) { --dx:5vw;--dy:-19vh;--turn:310deg; }
.wish-party-confetti i:nth-child(20) { --dx:17vw;--dy:20vh;--turn:-210deg; }
.wish-party-confetti i:nth-child(21) { --dx:27vw;--dy:-14vh;--turn:240deg; }
.wish-party-confetti i:nth-child(22) { --dx:37vw;--dy:17vh;--turn:-280deg; }
.wish-party-confetti i:nth-child(23) { --dx:45vw;--dy:-4vh;--turn:190deg; }
.wish-party-confetti i:nth-child(24) { --dx:-48vw;--dy:-4vh;--turn:-190deg; }
.finale-section #wish.is-gift-open .wish-party-confetti i { animation:wish-confetti-launch 2.7s cubic-bezier(.12,.62,.26,1) var(--party-delay,0s) both; }
.wish-party-confetti i:nth-child(3n) { --party-delay:.08s; }
.wish-party-confetti i:nth-child(3n+1) { --party-delay:.16s; }
.wish-party-balloon { position:absolute; bottom:7%; width:46px; height:57px; border:1px solid rgba(255,255,255,.5); border-radius:51% 49% 48% 52%/43% 44% 56% 57%; color:#fff1ce; text-align:center; font-size:12px; line-height:43px; opacity:0; box-shadow:inset -8px -7px 13px rgba(24,15,48,.23),inset 7px 6px 12px rgba(255,255,255,.28),0 0 22px currentColor; }
.wish-party-balloon::before { position:absolute; right:0; bottom:-5px; left:0; width:0; height:0; margin:auto; border-right:5px solid transparent; border-bottom:0; border-left:5px solid transparent; border-top:8px solid currentColor; content:""; }
.wish-party-balloon::after { position:absolute; top:58px; left:50%; width:1px; height:92px; background:linear-gradient(currentColor,transparent); content:""; opacity:.65; }
.balloon-a { left:5%; color:#f3a5c8; background:radial-gradient(circle at 32% 26%,#fff7e8 0 3%,transparent 18%),linear-gradient(145deg,#ff9fc6,#a756a3); }
.balloon-b { left:20%; bottom:12%; color:#ffdc83; background:radial-gradient(circle at 32% 26%,#fff9da 0 3%,transparent 18%),linear-gradient(145deg,#ffe27f,#dc8e61); }
.balloon-c { left:36%; bottom:5%; color:#a1e4dc; background:radial-gradient(circle at 32% 26%,#f4ffff 0 3%,transparent 18%),linear-gradient(145deg,#9ce4d8,#477f9f); }
.balloon-d { right:5%; bottom:9%; color:#c5b3ff; background:radial-gradient(circle at 32% 26%,#fff 0 3%,transparent 18%),linear-gradient(145deg,#c5a4ff,#7058bb); }
.balloon-e { right:20%; bottom:14%; color:#f4b2c9; background:radial-gradient(circle at 32% 26%,#fff6ed 0 3%,transparent 18%),linear-gradient(145deg,#ffb1c9,#c65d88); }
.balloon-f { right:36%; bottom:5%; color:#ffdb80; background:radial-gradient(circle at 32% 26%,#fff 0 3%,transparent 18%),linear-gradient(145deg,#ffe89b,#d79248); }
.finale-section #wish.is-gift-open .wish-party-balloon { animation:wish-balloon-rise 1.7s cubic-bezier(.16,.72,.2,1) var(--float-delay,0s) both,wish-balloon-sway 4.4s ease-in-out calc(var(--float-delay,0s) + 1.7s) infinite; }
.balloon-b,.balloon-e { --float-delay:.16s; }
.balloon-c,.balloon-f { --float-delay:.32s; }
.wish-party-flower { position:absolute; color:#ffd778; font-size:clamp(29px,4vw,53px); line-height:1; opacity:0; filter:drop-shadow(0 0 12px currentColor); }
.flower-a { top:11%;left:8%;color:#f5a9cb; }
.flower-b { top:17%;right:9%;color:#ffdc83;font-size:clamp(25px,3vw,41px); }
.flower-c { top:65%;left:4%;color:#f8ce81;font-size:clamp(24px,3vw,41px); }
.flower-d { top:67%;right:5%;color:#98ddd2; }
.flower-e { top:8%;left:40%;color:#b9a8ff;font-size:clamp(22px,3vw,39px); }
.flower-f { top:12%;right:38%;color:#ee9dbf; }
.flower-g { bottom:9%;left:28%;color:#a0ded4;font-size:clamp(23px,3vw,38px); }
.flower-h { bottom:10%;right:27%;color:#ffe18b;font-size:clamp(24px,3vw,41px); }
.finale-section #wish.is-gift-open .wish-party-flower { animation:wish-flower-pop 1.1s cubic-bezier(.16,.72,.2,1) var(--bloom-delay,0s) both,wish-flower-drift 5s ease-in-out calc(var(--bloom-delay,0s) + 1.1s) infinite; }
.flower-b,.flower-d,.flower-f,.flower-h { --bloom-delay:.18s; }
.finale-section #wish.is-gift-open:not(.is-blown) .cake { animation:wish-cake-grand-reveal 1.55s cubic-bezier(.16,.72,.2,1) both,cake-float 5.6s 1.55s ease-in-out infinite; }
@keyframes wish-confetti-launch { 0% { opacity:0; transform:translate(-50%,-50%) scale(.25) rotate(0); } 12% { opacity:1; } 100% { opacity:0; transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.85) rotate(var(--turn)); } }
@keyframes wish-balloon-rise { 0% { opacity:0;translate:0 76vh;scale:.7; } 72% { opacity:.9; } 100% { opacity:.82;translate:0 0;scale:1; } }
@keyframes wish-balloon-sway { 0%,100% { transform:rotate(-5deg); } 50% { transform:rotate(5deg); } }
@keyframes wish-flower-pop { 0% { opacity:0; transform:scale(.15) rotate(-50deg); } 65% { opacity:.95; transform:scale(1.2) rotate(13deg); } 100% { opacity:.82; transform:scale(1) rotate(0); } }
@keyframes wish-flower-drift { 0%,100% { translate:0 0; rotate:-5deg; } 50% { translate:0 -13px; rotate:7deg; } }
@keyframes wish-cake-grand-reveal { 0% { opacity:0; transform:translateY(56px) scale(.46) rotate(-7deg); filter:blur(12px) brightness(1.5); } 42% { opacity:1; transform:translateY(-23px) scale(1.11) rotate(3deg); filter:blur(0) brightness(1.35) drop-shadow(0 0 34px rgba(255,211,127,.72)); } 68% { transform:translateY(8px) scale(.97) rotate(-1deg); filter:brightness(1.16) drop-shadow(0 0 23px rgba(238,157,191,.55)); } 100% { opacity:1; transform:translateY(0) scale(1) rotate(0); filter:brightness(1) drop-shadow(0 0 12px rgba(255,214,130,.22)); } }
@media (max-width:680px) {
  .finale-section #wish .wish-intro { margin:-10px 0 17px; font-size:14px; }
  .wish-party-balloon { width:34px;height:43px;font-size:10px;line-height:34px; }
  .wish-party-balloon::after { top:44px;height:55px; }
  .balloon-c,.balloon-f { display:none; }
  .wish-party-flower { font-size:29px; }
  .flower-e,.flower-f { top:5%; }
}
@media (prefers-reduced-motion:reduce) {
  .finale-section #wish.is-gift-open .wish-party-confetti i { display:none; }
  .finale-section #wish.is-gift-open .wish-party-balloon,.finale-section #wish.is-gift-open .wish-party-flower { animation:none; opacity:.78; translate:0 0; }
  .finale-section #wish.is-gift-open:not(.is-blown) .cake { animation:none!important; visibility:visible;opacity:1;transform:none; }
}

/* Make each postcard's birthday date immediately readable while keeping its own theme color. */
.postcard-section .postcard[class*="postcard-theme-"] > .postcard-label {
  display:inline-flex;
  width:max-content;
  max-width:calc(100% - 12px);
  align-items:center;
  padding:7px 11px;
  border:1px solid currentColor;
  border-radius:4px;
  background:rgba(255,255,255,.72);
  box-shadow:0 3px 10px rgba(21,27,42,.12),inset 0 1px rgba(255,255,255,.8);
  font-family:"Manrope",var(--sans);
  font-size:clamp(11px,1.05vw,14px)!important;
  font-weight:900!important;
  line-height:1.2;
  letter-spacing:.055em!important;
  text-transform:none;
  white-space:nowrap;
  writing-mode:horizontal-tb;
  transform:none;
}
@media (max-width:700px) {
  .postcard-section .postcard[class*="postcard-theme-"] > .postcard-label { font-size:11px!important; padding:6px 9px; }
}

/* Date only: remove the badge and let the card's own accent carry the emphasis. */
.postcard-section .postcard[class*="postcard-theme-"] > .postcard-label {
  display:block;
  width:auto;
  max-width:100%;
  margin:0 0 14px;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  font-size:clamp(14px,1.35vw,18px)!important;
  font-weight:900!important;
  letter-spacing:.035em!important;
  line-height:1.25;
  text-shadow:0 1px 0 rgba(255,255,255,.34),0 2px 12px rgba(31,30,48,.16);
  white-space:normal;
}
.postcard-section .postcard[class*="postcard-theme-"] > .postcard-label::before { content:"✦"; margin-right:8px; font-size:.8em; }
.postcard-section .postcard-theme-8 > .postcard-label { grid-column:1; grid-row:1 / 4; align-self:center; writing-mode:horizontal-tb; transform:none; }
.postcard-download:not(:disabled) { min-height:40px; padding-inline:16px; border-color:rgba(255,214,125,.72); color:#fff0c5; background:linear-gradient(110deg,rgba(156,78,122,.9),rgba(119,91,154,.9) 55%,rgba(48,118,132,.9)); box-shadow:0 7px 22px rgba(7,11,28,.27),0 0 18px rgba(255,214,125,.12),inset 0 1px rgba(255,255,255,.18); pointer-events:auto; }
.postcard-download:not(:disabled):hover { border-color:#fff0bd; background:linear-gradient(110deg,#a84880,#8060a6 55%,#367e88); box-shadow:0 9px 25px rgba(7,11,28,.35),0 0 22px rgba(255,214,125,.2); }
@media (max-width:700px) { .postcard-section .postcard[class*="postcard-theme-"] > .postcard-label { font-size:13px!important; } }

/* Finale chapters remain individually designed, with wheel, touch and keyboard scrolling restored. */
.finale-section:not([hidden]) { overflow-x:hidden!important;overflow-y:auto!important;scroll-behavior:smooth!important;scroll-snap-type:y mandatory!important;overscroll-behavior-y:contain; }
.finale-section:not([hidden]) > .wish-section,.finale-section:not([hidden]) > .finale-message-slide,.finale-section:not([hidden]) > .love-you-slide { scroll-snap-align:start!important;scroll-snap-stop:always; }
.finale-section:not([hidden]) > .finale-page { scroll-margin:0; }

/* Letter 12: seven compact pages keep the long message readable without a long scroll. */
.letter-carousel { width:min(100%,900px); margin:0 auto; touch-action:pan-y; }
.letter-pages { position:relative; width:100%; }
.letter-page[hidden] { display:none!important; }
.letter-page { display:flex; min-height:clamp(330px,40vw,430px); flex-direction:column; justify-content:center; gap:14px; padding-block:clamp(38px,5vw,58px); transform:rotate(-.35deg); }
.letter-page.is-active { animation:letter-page-arrive .48s cubic-bezier(.2,.72,.2,1) both; }
.letter-page-number { margin:0 0 10px!important; color:#64839a!important; font:800 9px/1.3 "Manrope",var(--sans)!important; letter-spacing:.2em; }
.letter-page-placeholder { max-width:35ch; min-height:5.2em; margin:0!important; color:#343c55!important; font:italic 600 clamp(25px,3.2vw,39px)/1.32 "Cormorant Garamond",var(--serif)!important; text-wrap:balance; }
.letter-page-greeting { margin:0 0 2px!important; color:#815d7a!important; font:italic 600 clamp(24px,2.8vw,34px)/1.2 "Cormorant Garamond",var(--serif)!important; }
.letter-page-copy { max-width:68ch; margin:0!important; color:#43475b!important; font:600 clamp(16px,1.45vw,19px)/1.48 "Cormorant Garamond",var(--serif)!important; white-space:pre-line; }
.letter-page { cursor:zoom-in; }
.letter-page-controls { display:flex; align-items:center; justify-content:center; gap:clamp(28px,5vw,52px); margin:20px auto 0; }
.letter-page-arrow { display:grid; width:44px; height:44px; place-items:center; border:1px solid rgba(169,220,255,.48); border-radius:50%; background:linear-gradient(145deg,rgba(169,220,255,.14),rgba(242,164,206,.1)); color:#eaf5ff; font:400 30px/1 "Cormorant Garamond",var(--serif); cursor:pointer; box-shadow:0 7px 20px rgba(4,8,22,.2); transition:transform .25s,border-color .25s,background .25s,box-shadow .25s; }
.letter-page-arrow:hover { transform:translateY(-2px); border-color:#ffdc78; background:rgba(255,220,120,.15); box-shadow:0 9px 24px rgba(4,8,22,.28),0 0 18px rgba(255,220,120,.13); }
.letter-page-arrow:focus-visible { outline:2px solid #ffdc78; outline-offset:4px; }
.letter-page-count { min-width:60px; color:#aebdd3; font:700 10px/1 "Manrope",var(--sans); letter-spacing:.17em; text-align:center; }
.letter-page-count b { color:#ffe08a; font-weight:800; }
.letter-lightbox { position:fixed; inset:0; width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; overflow:hidden; border:0; background:rgba(5,8,19,.94); color:inherit; }
.letter-lightbox[open] { display:block; animation:gallery-overlay-in .28s ease both; }
.letter-lightbox::backdrop { background:rgba(5,8,19,.86); backdrop-filter:blur(14px); }
.letter-lightbox-close { position:absolute; z-index:3; top:18px; right:22px; display:grid; width:44px; height:44px; place-items:center; border:1px solid rgba(169,220,255,.45); border-radius:50%; background:rgba(13,17,31,.88); color:#f7eaf4; font:300 30px/1 var(--sans); cursor:pointer; transition:transform .2s,border-color .2s,background .2s; }
.letter-lightbox-close:hover { transform:scale(1.06); border-color:#ffdc78; background:rgba(255,220,120,.14); }
.letter-lightbox-arrow { position:absolute; z-index:3; top:50%; display:grid; width:48px; height:48px; place-items:center; border:1px solid rgba(169,220,255,.58); border-radius:50%; background:rgba(12,18,34,.9); color:#f0e9fa; font:400 34px/1 "Cormorant Garamond",var(--serif); cursor:pointer; transform:translateY(-50%); transition:transform .22s,border-color .22s,background .22s,box-shadow .22s; }
.letter-lightbox-previous { left:clamp(10px,2.4vw,34px); }
.letter-lightbox-next { right:clamp(10px,2.4vw,34px); }
.letter-lightbox-arrow:hover { transform:translateY(-50%) scale(1.08); border-color:#ffdc78; background:rgba(255,220,120,.15); box-shadow:0 0 22px rgba(169,220,255,.18); }
.letter-page-expanded { position:absolute; top:50%; left:50%; display:flex; width:min(1040px,calc(100vw - 150px)); height:min(88dvh,860px); max-width:none; min-height:0!important; max-height:none; margin:0; padding:clamp(38px,5vh,62px) clamp(28px,5vw,72px); overflow:hidden; align-items:center; justify-content:center; transform:translate(-50%,-50%)!important; rotate:0deg!important; cursor:default; box-shadow:0 28px 100px rgba(0,0,0,.48),0 0 42px rgba(169,220,255,.12),inset 0 1px rgba(255,255,255,.9); }
.letter-page-expanded .letter-page-copy { max-width:82ch; max-height:none; overflow:visible; flex:none; font-size:var(--letter-expanded-copy-size,17px)!important; line-height:1.32!important; }
.letter-page-expanded .letter-page-greeting { font-size:clamp(26px,2.6vw,36px)!important; }

/* Give the future chapter and its handoff a little more depth without changing their content. */
.future-wish-card { animation:future-card-float 7s ease-in-out infinite; }
.future-wish-card:nth-child(2) { animation-delay:-2.2s; }
.future-wish-card:nth-child(3) { animation-delay:-4.4s; }
.future-wish-card::after { position:absolute; top:-45%; left:-70%; width:42%; height:190%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent); content:""; opacity:0; transform:rotate(22deg); transition:left .75s cubic-bezier(.2,.7,.2,1),opacity .35s; pointer-events:none; }
.future-wish-card:hover::after,.future-wish-card.is-open::after { left:135%; opacity:1; }
.future-section .future-closing { animation:future-closing-breathe 5.8s ease-in-out infinite; }
@keyframes letter-page-arrive { from { opacity:0; filter:blur(2px); transform:translate3d(14px,7px,0) rotate(.35deg); } to { opacity:1; filter:blur(0); transform:translate3d(0,0,0) rotate(-.35deg); } }
@keyframes future-card-float { 0%,100% { translate:0 0; } 50% { translate:0 -5px; } }
@keyframes future-closing-breathe { 0%,100% { text-shadow:0 0 22px rgba(242,164,206,.12); } 50% { text-shadow:0 0 34px rgba(242,164,206,.26),0 0 52px rgba(169,220,255,.09); } }
@media (max-width:700px) { .letter-carousel { width:100%; } .letter-page { min-height:320px; padding:42px 24px 35px; } .letter-page-placeholder { font-size:clamp(24px,7vw,32px)!important; } .letter-page-controls { margin-top:14px; } .letter-page-arrow { width:40px; height:40px; } .letter-lightbox-close { top:10px; right:12px; } .letter-lightbox-arrow { width:38px; height:38px; font-size:27px; } .letter-lightbox-previous { left:5px; } .letter-lightbox-next { right:5px; } .letter-page-expanded { width:calc(100vw - 68px); height:calc(100dvh - 36px); padding:24px 13px; } .letter-page-expanded .letter-page-copy { font-size:var(--letter-expanded-copy-size,13px)!important; line-height:1.18!important; } .letter-page-expanded .letter-page-greeting { font-size:24px!important; } }
@media (prefers-reduced-motion:reduce) { .letter-page.is-active,.future-wish-card,.future-section .future-closing { animation:none; } .letter-page-arrow,.future-section .story-finale-button { transition:none; } }

/* Final chapter-by-chapter interaction polish: soft lift, color-aware focus, and no layout shifts. */
.orbit-section .timeline-item { transition:transform .32s cubic-bezier(.2,.7,.2,1),border-color .32s,box-shadow .32s,background-color .32s; }
.orbit-section .timeline-item:hover { transform:translateX(5px); border-color:rgba(169,220,255,.5); box-shadow:0 14px 36px rgba(3,8,24,.24),0 0 24px rgba(169,220,255,.08); }
.gallery-section .photo-card img { transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .45s; }
.gallery-section .photo-card:hover img,.gallery-section .photo-card:focus-visible img { transform:scale(1.025); filter:saturate(1.08) brightness(1.035); }
.if-section .daydream-card { transition:box-shadow .35s,border-color .35s,filter .35s; }
.if-section .daydream-arrow,.songs-section .song-memory-arrow,.little-loops-section .clip-arrow { transition:transform .25s,border-color .25s,background-color .25s,box-shadow .25s; }
.if-section .daydream-arrow:hover,.songs-section .song-memory-arrow:hover,.little-loops-section .clip-arrow:hover { transform:scale(1.08); border-color:rgba(169,229,226,.8); box-shadow:0 0 22px rgba(169,229,226,.17); }
.songs-section .song-row { transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s; }
.songs-section .song-row:hover { transform:translateY(-3px); box-shadow:0 16px 36px rgba(3,8,24,.28),0 0 22px rgba(169,229,226,.1); }
.quiz-section .quiz-answers button { transition:transform .24s cubic-bezier(.2,.7,.2,1),border-color .24s,background-color .24s,box-shadow .24s; }
.quiz-section .quiz-answers button:hover { transform:translateY(-2px); border-color:rgba(255,220,120,.72); box-shadow:0 9px 24px rgba(4,8,24,.22),0 0 20px rgba(255,220,120,.11); }
.constellation-section .constellation-note { transition:transform .32s cubic-bezier(.2,.7,.2,1),border-color .32s,box-shadow .32s; }
.constellation-section .constellation-note:hover { transform:translateY(-4px); border-color:rgba(194,177,255,.58); box-shadow:0 16px 36px rgba(4,8,24,.24),0 0 24px rgba(194,177,255,.1); }
.learning-section .learning-row { transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .3s; }
.learning-section .learning-row:hover { transform:translateY(-3px); border-color:color-mix(in srgb,var(--lesson-accent) 62%,rgba(255,255,255,.15)); box-shadow:0 15px 34px rgba(3,8,24,.25),0 0 24px color-mix(in srgb,var(--lesson-accent) 13%,transparent); }
.perfect-day-section .date-choice-group { transition:border-color .3s,box-shadow .3s; }
.perfect-day-section .date-choices button { transition:transform .22s,border-color .22s,background-color .22s,box-shadow .22s; }
.perfect-day-section .date-choices button:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(8,14,30,.18); }
.postcard-section .postcard { transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s; }
.postcard-section .postcard:hover { box-shadow:0 24px 56px rgba(3,8,24,.33),0 0 28px rgba(169,220,255,.12); }
.little-loops-section .clip-frame,.little-loops-section .clip-player { transition:box-shadow .4s,border-color .4s; }
.little-loops-section .clip-frame:hover,.little-loops-section .clip-player:hover { box-shadow:0 24px 70px rgba(3,8,24,.4),0 0 30px rgba(169,229,226,.14); }
.reasons-section .reason-card { transition:transform .32s cubic-bezier(.2,.7,.2,1),border-color .32s,box-shadow .32s,background-color .32s; }
.reasons-section .reason-card:hover,.reasons-section .reason-card:focus-visible { transform:translateY(-4px); border-color:rgba(242,164,206,.62); box-shadow:0 16px 38px rgba(3,8,24,.3),0 0 24px rgba(242,164,206,.12); }
.letter-section .letter-page { transition:box-shadow .35s,border-color .35s; }
.letter-section .letter-page:hover { box-shadow:0 24px 64px rgba(3,8,24,.35),0 0 28px rgba(169,220,255,.12); }
.future-section .future-wish-card { transition:box-shadow .32s,border-color .32s; }
.future-section .future-wish-card:hover { box-shadow:0 22px 56px rgba(3,8,24,.32),0 0 28px rgba(255,220,120,.13); }
.hero .hero-frame { transition:filter .5s,box-shadow .5s; }
.hero .hero-frame:hover { filter:saturate(1.04) brightness(1.025); }
.hero .hero-copy > .pill { transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s; }
.hero .hero-copy > .pill:hover { transform:translateY(-3px); box-shadow:0 12px 32px rgba(242,164,206,.16),0 0 24px rgba(169,220,255,.11); }
.story-next-section { display:grid; min-height:min(82vh,860px); min-height:min(82svh,860px); place-items:center; padding-block:clamp(64px,10vh,130px); }
.story-next-card { position:relative; isolation:isolate; width:min(100%,760px); padding:clamp(34px,6vw,72px); overflow:hidden; text-align:center; border:1px solid rgba(169,220,255,.26); border-radius:28px; background:radial-gradient(ellipse at 18% 12%,rgba(93,153,201,.17),transparent 43%),radial-gradient(ellipse at 88% 84%,rgba(203,115,174,.13),transparent 44%),linear-gradient(145deg,rgba(20,31,57,.91),rgba(17,19,42,.92)); box-shadow:0 28px 90px rgba(2,6,19,.32),inset 0 1px rgba(255,255,255,.08),0 0 50px rgba(113,179,220,.07); }
.story-next-card::before,.story-next-card::after { position:absolute; z-index:-1; width:clamp(170px,28vw,300px); aspect-ratio:1; border:1px solid rgba(169,220,255,.13); border-radius:50%; content:""; pointer-events:none; }
.story-next-card::before { top:-42%; left:-17%; box-shadow:0 0 0 24px rgba(169,220,255,.025),0 0 0 52px rgba(242,164,206,.02); animation:next-orbit-breathe 8s ease-in-out infinite alternate; }
.story-next-card::after { right:-19%; bottom:-59%; border-color:rgba(242,164,206,.16); box-shadow:0 0 0 22px rgba(242,164,206,.025),0 0 0 48px rgba(255,220,120,.02); animation:next-orbit-breathe 9s ease-in-out -3s infinite alternate-reverse; }
.story-next-card .section-kicker { justify-content:center; }
.story-next-card h2 { position:relative; margin:clamp(20px,3vw,34px) 0; font:500 clamp(42px,7vw,76px)/.98 "Bodoni Moda",var(--serif); letter-spacing:-.045em; }
.story-next-card h2 em { font-weight:500; }
.story-next-card .story-finale-button { position:relative; margin-top:clamp(12px,2vw,24px); transition:transform .3s,box-shadow .3s,border-color .3s; }
.story-next-card .story-finale-button:hover { transform:translateY(-3px); border-color:rgba(255,220,120,.78); box-shadow:0 14px 36px rgba(5,8,22,.3),0 0 28px rgba(255,220,120,.18); }
@keyframes next-orbit-breathe { from { transform:translate3d(-5px,4px,0) scale(.96); opacity:.56; } to { transform:translate3d(8px,-7px,0) scale(1.04); opacity:1; } }
@media (prefers-reduced-motion:reduce) {
  .orbit-section .timeline-item,.gallery-section .photo-card img,.if-section .daydream-arrow,.songs-section .song-row,.songs-section .song-memory-arrow,.quiz-section .quiz-answers button,.constellation-section .constellation-note,.learning-section .learning-row,.perfect-day-section .date-choices button,.postcard-section .postcard,.little-loops-section .clip-arrow,.reasons-section .reason-card,.story-next-card .story-finale-button { transition:none!important; }
  .orbit-section .timeline-item:hover,.gallery-section .photo-card:hover img,.gallery-section .photo-card:focus-visible img,.songs-section .song-row:hover,.constellation-section .constellation-note:hover,.learning-section .learning-row:hover,.perfect-day-section .date-choices button:hover,.postcard-section .postcard:hover,.reasons-section .reason-card:hover,.reasons-section .reason-card:focus-visible,.story-next-card .story-finale-button:hover { transform:none!important; }
  .story-next-card::before,.story-next-card::after { animation:none!important; }
}

/* Segment two atmosphere: fewer, clearer stars over a gently shifting blue-violet nebula. */
.middle-starfield {
  display:block;
  background:
    radial-gradient(ellipse at 18% 24%,rgba(60,116,168,.12),transparent 40%),
    radial-gradient(ellipse at 82% 72%,rgba(122,82,151,.11),transparent 42%),
    radial-gradient(ellipse at 52% 46%,rgba(64,111,155,.055),transparent 58%);
  background-size:145% 145%;
  opacity:0; visibility:hidden;
  transition:opacity .8s ease,visibility .8s ease;
  animation:middle-nebula-breathe 24s ease-in-out infinite alternate;
}
body.middle-segment-active .middle-starfield { opacity:1; visibility:visible; }
.middle-starfield::before {
  position:absolute; inset:-18%; content:""; pointer-events:none;
  background:radial-gradient(ellipse at 32% 42%,rgba(76,152,185,.075),transparent 39%),radial-gradient(ellipse at 73% 55%,rgba(157,111,187,.075),transparent 43%);
  filter:blur(28px); animation:middle-color-drift 30s ease-in-out infinite alternate;
}
.middle-starfield i { z-index:1; opacity:.66; text-shadow:0 0 16px currentColor,0 0 34px color-mix(in srgb,currentColor 52%,transparent); }
.middle-starfield i:nth-child(1) { top:17%;left:12%; }
.middle-starfield i:nth-child(2) { top:32%;right:13%; }
.middle-starfield i:nth-child(3) { top:51%;left:7%; }
.middle-starfield i:nth-child(4) { top:67%;right:9%; }
.middle-starfield i:nth-child(5) { top:83%;left:23%; }
.middle-starfield i:nth-child(6) { top:79%;right:23%; }
.middle-starfield i:nth-child(7) { top:39%;left:58%; }
.site-header {
  border-color:rgba(157,205,231,.23);
  background:linear-gradient(105deg,rgba(8,13,27,.97),rgba(18,25,47,.96) 46%,rgba(12,18,35,.97));
  box-shadow:0 10px 34px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.07),0 0 24px rgba(105,157,196,.055);
}
.brand {
  min-width:58px; justify-content:center; padding:0 12px 1px 0;
  color:#eef5ff; font-family:"Manrope",var(--sans); font-size:15px; font-style:normal;
  font-weight:800; letter-spacing:.01em; text-shadow:0 0 15px rgba(169,220,255,.36);
}
.brand::after { content:none!important; }
.brand:hover { color:#ffe2a0; transform:translateY(-1px); text-shadow:0 0 17px rgba(255,220,120,.4); }
.nav-link { padding-inline:clamp(2px,.34vw,5px); font-size:clamp(6.1px,.57vw,7.7px); letter-spacing:.035em; }
.nav-link span { font-size:clamp(6.4px,.53vw,7.4px); }
.nav-link { white-space:normal; text-wrap:balance; }
.nav-link.is-active { border-color:rgba(169,220,255,.29); background:linear-gradient(135deg,rgba(169,220,255,.13),rgba(194,177,255,.1) 56%,rgba(255,220,120,.055)); box-shadow:inset 0 0 18px rgba(169,220,255,.075),0 6px 20px rgba(0,0,0,.2),0 0 17px rgba(169,220,255,.07); }
.nav-link.is-active::after { background:linear-gradient(90deg,#a9dcff,#c2b1ff 54%,#f2a4ce); box-shadow:0 0 12px rgba(169,220,255,.28); }
.nav-link:hover { border-color:rgba(169,220,255,.2); background:linear-gradient(135deg,rgba(169,220,255,.1),rgba(194,177,255,.065)); }
.main-nav { scroll-behavior:smooth; }
.section[data-section] { scroll-margin-top:74px; }
.section[data-section].is-nav-arriving { animation:section-nav-arrive .72s cubic-bezier(.2,.7,.2,1) both; }
@keyframes middle-nebula-breathe { from { background-position:0% 0%; opacity:.82; } to { background-position:100% 100%; opacity:1; } }
@keyframes middle-color-drift { from { transform:translate3d(-1.5%,1%,0) scale(.98); opacity:.62; } to { transform:translate3d(1.5%,-1%,0) scale(1.04); opacity:1; } }
@keyframes section-nav-arrive { from { filter:brightness(.9); } 45% { filter:brightness(1.075); } to { filter:brightness(1); } }
@media (max-width:900px) {
  .brand { min-width:57px; font-size:14px; }
  .nav-link { padding-inline:4px; font-size:8px; }
  .nav-link span { font-size:7px; }
}
@media (prefers-reduced-motion:reduce) {
  .middle-starfield,.middle-starfield::before { animation:none!important; }
  .middle-starfield { transition:none!important; }
  .section[data-section].is-nav-arriving { animation:none!important; }
  .main-nav { scroll-behavior:auto; }
}

/* Finale polish: center the wish, give the cake a little more presence, and let the pages glide. */
.finale-section:not([hidden]) { scroll-behavior:smooth!important; scroll-snap-type:y proximity!important; scroll-padding-block:0; }
.finale-section:not([hidden]) > .finale-page { scroll-snap-stop:normal!important; }
.finale-section #wish .wish-copy { max-width:510px; margin-inline:auto; text-align:center; }
.finale-section #wish .wish-copy h1 { text-align:center; text-wrap:balance; }
.finale-section #wish .wish-intro { max-width:34ch; margin:0 auto 24px; text-align:center; }
.finale-section #wish .wish-gift-open { justify-content:center; margin-inline:auto; }
.finale-section #wish .wish-hint { max-width:34ch; margin:18px auto 0; text-align:center; text-wrap:balance; }
.finale-section #wish .cake { width:min(356px,82vw); }
@media (min-width:681px) and (max-width:900px) { .finale-section #wish .cake { width:min(350px,52vw); } }
@media (max-width:680px) {
  .finale-section #wish .wish-copy { max-width:39ch; }
  .finale-section #wish .wish-intro { margin-bottom:14px; }
  .finale-section #wish .wish-hint { margin-top:13px; }
  .finale-section #wish .cake { width:min(278px,76vw); scale:.86; }
}
.finale-words-stage { width:min(910px,100%); }
.finale-section .words-kicker { display:flex; align-items:center; justify-content:center; gap:13px; margin:0 auto clamp(19px,3vh,29px); color:#a9e1e5; font:700 8px/1.4 var(--sans); letter-spacing:.22em; text-transform:uppercase; }
.finale-section .words-kicker::before,.finale-section .words-kicker::after { width:clamp(20px,4vw,48px); height:1px; background:linear-gradient(90deg,transparent,rgba(169,225,229,.7)); content:""; }
.finale-section .words-kicker::after { transform:rotate(180deg); }
.finale-section .final-words-title { max-width:22ch; margin:0 auto; color:#fff8f4; font:500 clamp(39px,5.2vw,65px)/1.07 "Bodoni Moda","Cormorant Garamond",var(--serif); letter-spacing:-.044em; text-wrap:balance; }
.finale-section .final-words-title em { margin-top:8px; padding:0 .035em .07em 0; background:linear-gradient(100deg,#f2b2cf 0%,#d9b9ef 49%,#9ee0e3 100%); background-clip:text; -webkit-text-fill-color:transparent; font:italic 500 .83em/1.14 "Cormorant Garamond",var(--serif); }
.words-copy-block { position:relative; width:min(68ch,100%); margin:clamp(21px,3.2vh,32px) auto 0; padding-inline:clamp(17px,3vw,42px); }
.words-copy-block::before { position:absolute; inset:5px auto 5px 0; width:1px; background:linear-gradient(180deg,transparent,rgba(169,220,255,.54) 22%,rgba(242,164,206,.5) 78%,transparent); content:""; }
.finale-section .words-copy-block .words-copy { max-width:none; margin:0; color:#d2d8e6; font:400 clamp(13px,1.3vw,16px)/1.72 "DM Sans",var(--sans); letter-spacing:.006em; text-align:left; }
.finale-section .words-copy-block .words-copy + .words-copy { margin-top:13px; }
.finale-message-slide.finale-visible .words-copy-block .words-copy:nth-child(2) { animation-delay:.36s; }
.finale-message-slide.finale-visible .words-copy-block .words-copy:nth-child(3) { animation-delay:.47s; }
.finale-section .words-copy-block .words-copy-soft { color:#b9c5d7; }
.finale-section .words-signature { margin:clamp(20px,3vh,29px) 0 0; color:#f5d389; font:500 18px/1.35 "Cormorant Garamond",var(--serif); }
.finale-section .words-signature strong { color:#e6ecf6; font:700 9px/1.6 "Manrope",var(--sans); letter-spacing:.18em; text-transform:uppercase; }
.finale-section .words-signature em { display:inline-block; margin-top:4px; color:#f0b6d4; font:italic 500 26px/1.2 "Parisienne","Cormorant Garamond",var(--serif); }
.finale-section .final-note-rewish,.finale-section .finale-message-slide .finale-next { opacity:0; }
.finale-message-slide.finale-visible .final-note-rewish { animation:words-arrive .62s .58s cubic-bezier(.2,.72,.2,1) both; }
.finale-section .final-note-rewish { margin-top:14px; border-color:rgba(169,220,255,.4); color:#c8eaf1; }
.finale-section .final-note-rewish:hover { color:#fff1d0; border-color:#f5d17f; }
@media (max-width:620px) {
  .finale-section .words-kicker { margin-bottom:15px; font-size:7px; }
  .finale-section .final-words-title { max-width:20ch; font-size:clamp(32px,8.5vw,43px); line-height:1.08; }
  .finale-section .final-words-title em { margin-top:5px; font-size:.82em; }
  .words-copy-block { margin-top:18px; padding-inline:14px 5px; }
  .finale-section .words-copy-block .words-copy { font-size:12px; line-height:1.55; }
  .finale-section .words-copy-block .words-copy + .words-copy { margin-top:10px; }
  .finale-section .words-signature { margin-top:17px; font-size:16px; }
  .finale-section .words-signature em { font-size:23px; }
  .finale-section .final-note-rewish { margin-top:10px; }
}
@media (prefers-reduced-motion:reduce) {
  .finale-section:not([hidden]) { scroll-behavior:auto!important; }
  .finale-message-slide.finale-visible .final-note-rewish { animation:none; opacity:1; }
}

/* Slide 10 final polish: cinematic color on the frame, with the clips untouched. */
.little-loops-section .clip-media {
  background-image:linear-gradient(#0a1020,#0a1020),linear-gradient(125deg,#79dce1 0%,#92c7ed 23%,#a99bea 47%,#ec9ec8 72%,#f3cf83 100%);
  background-size:auto,220% 220%;
  background-position:0 0,0% 50%;
  animation:loops-frame-lustre 9s ease-in-out infinite alternate,loops-rim-glide 18s ease-in-out infinite alternate;
  box-shadow:0 26px 78px rgba(0,0,0,.4),0 0 30px rgba(91,206,215,.16),0 0 34px rgba(181,144,237,.13),inset 0 1px rgba(255,255,255,.12);
  transition:transform .55s cubic-bezier(.2,.75,.2,1),box-shadow .55s,border-radius .5s,filter .45s;
}
.little-loops-section .clip-media:hover {
  filter:saturate(1.04);
  box-shadow:0 32px 88px rgba(0,0,0,.44),0 0 40px rgba(91,206,215,.22),0 0 44px rgba(181,144,237,.18),inset 0 1px rgba(255,255,255,.16);
}
.little-loops-section .clip-color-wash { opacity:.46; }
.little-loops-section .clip-color-wash::after { opacity:.84; animation-duration:14s; }
.little-loops-section .clip-media.is-paused {
  box-shadow:0 26px 78px rgba(0,0,0,.42),0 0 34px rgba(91,206,215,.2),0 0 38px rgba(242,164,206,.16),inset 0 1px rgba(255,255,255,.14);
}
.little-loops-section .clip-play-toggle {
  border-color:rgba(234,249,255,.94);
  background:linear-gradient(145deg,rgba(14,32,49,.74),rgba(58,42,83,.68));
  box-shadow:0 10px 34px rgba(0,0,0,.4),0 0 30px rgba(128,208,224,.25),inset 0 1px rgba(255,255,255,.48);
  transition:opacity .24s ease,transform .38s cubic-bezier(.18,.8,.2,1),background .3s,box-shadow .35s,border-color .3s;
}
.little-loops-section .clip-play-toggle.is-feedback { animation:clip-playback-bloom .88s cubic-bezier(.18,.75,.22,1) both; }
.little-loops-section .clip-counter b { color:#e0d2ff; }
.little-loops-section .clip-dot.is-active { animation:loops-active-dot 2.8s ease-in-out infinite; }
.little-loops-section .clip-arrow:hover { transform:translateY(-1px) scale(1.06); }
@keyframes loops-rim-glide { from { background-position:0 0,0% 50%; } to { background-position:0 0,100% 50%; } }
@keyframes loops-active-dot { 0%,100% { box-shadow:0 0 12px rgba(141,229,229,.3),0 0 16px rgba(177,161,242,.28); } 50% { box-shadow:0 0 18px rgba(141,229,229,.56),0 0 25px rgba(177,161,242,.42); } }
@media (prefers-reduced-motion:reduce) {
  .little-loops-section .clip-media,.little-loops-section .clip-dot.is-active { animation:none!important; }
}

/* Finale close: center the letter-like message and end on a quiet thank-you. */
.finale-section .finale-message-slide .finale-words-stage { width:min(820px,100%); }
.finale-section .words-copy-block { width:min(72ch,100%); padding-inline:clamp(15px,3vw,34px); }
.finale-section .words-copy-block::before { display:none; }
.finale-section .words-copy-block .words-copy { text-align:center; text-wrap:pretty; }
.finale-section .words-signature {
  display:flex; align-items:baseline; justify-content:center; flex-wrap:nowrap; gap:.62em;
  margin-top:clamp(21px,3.2vh,32px); color:#f3d48d; white-space:nowrap;
}
.finale-section .words-signature strong {
  color:rgba(234,240,250,.88); font:600 clamp(10px,.86vw,12px)/1.2 "Manrope",var(--sans);
  letter-spacing:.075em; text-transform:none;
}
.finale-section .words-signature em {
  margin:0; color:#f2c0dc; font:italic 600 clamp(19px,1.6vw,23px)/1.05 "Cormorant Garamond",var(--serif);
  letter-spacing:.015em; text-shadow:0 1px 12px rgba(242,192,220,.12);
}
.finale-section .love-you-content {
  position:absolute; inset:0; width:auto; min-height:0; margin:0; padding:0;
  display:block; transform:none; pointer-events:none;
}
.finale-section .love-you-content::after { content:none; }
.finale-section .love-you-kicker {
  position:absolute; top:clamp(96px,17vh,142px); left:50%; margin:0;
  translate:-50% 0; white-space:nowrap; text-align:center; pointer-events:auto;
}
.finale-section .love-you-overline,.finale-section .love-you-slide .site-footer { display:none; }
.finale-section .love-you-slide h2 {
  position:absolute; top:50%; left:50%; width:max-content; max-width:92vw; margin:0; text-align:center;
  translate:-50% -50%; pointer-events:auto;
  font:500 clamp(78px,10.5vw,136px)/.94 var(--serif); letter-spacing:-.065em;
}
.finale-section .love-you-slide .love-you-note {
  position:absolute; top:calc(50% + clamp(76px,9vh,104px)); left:50%; width:min(90vw,470px); margin:0;
  translate:-50% 0; text-align:center; pointer-events:auto;
}
.finale-section .love-you-slide .love-you-again {
  position:absolute; right:clamp(24px,5vw,72px); bottom:clamp(24px,5vh,48px); min-height:54px;
  margin:0; padding:0 30px; gap:18px; font-size:10px; letter-spacing:.16em; pointer-events:auto;
}
.closing-thanks-slide {
  position:relative; display:flex; min-height:100svh; flex-direction:column; align-items:center; justify-content:center; overflow:hidden;
  padding:28px; background:radial-gradient(ellipse at 50% 42%,rgba(39,52,101,.7),transparent 53%),radial-gradient(ellipse at 82% 76%,rgba(99,47,103,.28),transparent 40%),linear-gradient(145deg,#050811,#0b1020 54%,#070a13);
  scroll-snap-align:start!important; scroll-snap-stop:always;
}
#thank-you[hidden] { display:none!important; }
body.thank-you-is-open { overflow:hidden; }
body.thank-you-is-open .site-header,body.thank-you-is-open main,body.thank-you-is-open .finale-section { display:none!important; }
body.thank-you-is-open #thank-you:not([hidden]) { position:fixed; z-index:120; inset:0; display:flex; }
.closing-thanks-slide::before { position:absolute; z-index:0; inset:0; background-image:radial-gradient(1px 1px at 12% 23%,#f9dbe9 98%,transparent),radial-gradient(1px 1px at 79% 16%,#a9dcff 98%,transparent),radial-gradient(1.5px 1.5px at 68% 82%,#f2a4ce 98%,transparent),radial-gradient(1px 1px at 31% 76%,#ffe18a 98%,transparent); background-size:270px 230px,310px 280px,380px 330px,240px 300px; content:""; opacity:.38; animation:gate-star-drift 28s linear infinite; pointer-events:none; }
.closing-thanks-slide::after { content:none; }
.closing-thanks-slide .birthday-gate-orbit { z-index:0; }
.closing-thanks-slide .birthday-gate-stars { z-index:2; }
.closing-thanks-content { position:relative; z-index:4; display:flex; width:min(100%,960px); flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.closing-thanks-content .birthday-gate-kicker { animation:gate-copy-arrive .8s .12s both; }
.closing-thanks-content h2 { margin:clamp(38px,7vh,66px) 0 0; color:#f8f4f6; font:500 clamp(86px,14vw,180px)/.9 var(--serif); letter-spacing:-.065em; text-shadow:0 0 48px rgba(225,180,225,.12); animation:gate-copy-arrive .9s .2s both; }
.closing-thanks-revisit { margin-top:clamp(34px,6vh,54px); background:transparent; box-shadow:none; animation:gate-copy-arrive .8s .36s both; }
.closing-thanks-revisit:hover { transform:translateY(-2px); border-color:#fff0c6; background:transparent; box-shadow:0 0 24px rgba(169,220,255,.15); }
.closing-thanks-revisit:focus-visible { outline:2px solid #ffdc78; outline-offset:5px; }
@media (max-width:680px) {
  .finale-section .final-words-title { font-size:clamp(32px,8vw,43px); }
  .finale-section .words-copy-block { margin-top:17px; padding-inline:8px; }
  .finale-section .words-copy-block .words-copy { font-size:12px; line-height:1.55; }
  .finale-section .words-signature { gap:.48em; margin-top:17px; }
  .finale-section .love-you-slide h2 { font-size:clamp(48px,12.5vw,86px); }
  .finale-section .love-you-kicker { top:clamp(88px,15vh,116px); font-size:8px; letter-spacing:.25em; }
  .finale-section .love-you-slide .love-you-note { top:calc(50% + clamp(52px,9vh,78px)); font-size:13px; }
  .finale-section .love-you-slide .love-you-again { right:20px; bottom:22px; min-height:50px; padding-inline:24px; }
  .closing-thanks-slide { min-height:100svh; padding:16px; }
  .closing-thanks-content { padding-inline:12px; }
  .closing-thanks-content .birthday-gate-kicker { gap:8px; font-size:7px; letter-spacing:.2em; }
  .closing-thanks-content h2 { margin-top:clamp(30px,6vh,48px); font-size:clamp(62px,15vw,112px); }
  .closing-thanks-revisit { min-height:54px; margin-top:30px; padding-inline:27px; font-size:10px; }
}
@media (prefers-reduced-motion:reduce) {
  .closing-thanks-slide::before,.closing-thanks-slide::after,.closing-thanks-slide .birthday-gate-orbit,.closing-thanks-slide .birthday-gate-stars i,.closing-thanks-slide .birthday-gate-corner-stars i { animation:none!important; }
  .closing-thanks-content .birthday-gate-kicker,.closing-thanks-content h2,.closing-thanks-revisit { animation:none!important; }
  .closing-thanks-revisit { transition:none!important; }
  .closing-thanks-revisit:hover,.closing-thanks-revisit:focus-visible { transform:none!important; }
}

/* Final-segment polish: warm cosmic color, calm motion and the opener's clear controls. */
.finale-progress {
  border-bottom-color:rgba(169,220,255,.2);
  background:linear-gradient(180deg,rgba(8,13,29,.86),rgba(12,16,34,.56));
  box-shadow:0 10px 34px rgba(2,7,20,.16);
  transition:background .4s ease,border-color .4s ease;
}
.finale-progress li a { transition:color .28s ease,transform .32s cubic-bezier(.2,.75,.2,1),text-shadow .35s ease; }
.finale-progress li a[aria-current="page"] { color:#fff4d2; text-shadow:0 0 18px rgba(255,214,110,.22); }
.finale-progress li a[aria-current="page"]::after { box-shadow:0 0 13px rgba(132,217,220,.4); }
.finale-progress li a:hover { transform:translateY(-2px); }
.finale-section:not([hidden]) { scroll-behavior:smooth!important; scroll-snap-type:y mandatory!important; scroll-padding-top:0; }
.finale-section:not([hidden]) > .wish-section,.finale-section:not([hidden]) > .finale-message-slide,.finale-section:not([hidden]) > .love-you-slide { scroll-snap-align:start!important; scroll-snap-stop:always!important; }
.finale-section #wish {
  background:
    radial-gradient(ellipse 40% 48% at 70% 54%,rgba(255,190,104,.19),transparent 100%),
    radial-gradient(ellipse 34% 48% at 77% 35%,rgba(243,133,177,.14),transparent 100%),
    radial-gradient(ellipse 43% 55% at 20% 38%,rgba(107,110,207,.2),transparent 100%),
    radial-gradient(ellipse 38% 38% at 48% 100%,rgba(76,174,175,.14),transparent 100%),
    linear-gradient(132deg,#0e1930 0%,#1a1937 45%,#251a38 68%,#0e202d 100%);
}
.finale-section #wish::before {
  z-index:0;
  background:radial-gradient(ellipse at 68% 55%,rgba(255,215,144,.15),transparent 31%),radial-gradient(ellipse at 24% 42%,rgba(120,165,238,.09),transparent 37%),radial-gradient(ellipse at 82% 72%,rgba(224,126,183,.08),transparent 34%);
  animation:wish-stage-breathe 10s ease-in-out infinite alternate;
}
.finale-section #wish::after { opacity:.48; animation-duration:31s; }
.finale-section #wish .wish-art::before {
  background:radial-gradient(circle,rgba(255,211,127,.27),rgba(233,135,191,.16) 34%,rgba(123,153,220,.13) 54%,rgba(73,158,173,.08) 66%,transparent 76%);
  filter:blur(5px) saturate(1.12);
  animation:wish-halo-breathe 7.5s ease-in-out infinite;
}
.finale-section #wish .wish-art-orbit { border-color:rgba(177,219,246,.24); box-shadow:0 0 18px rgba(117,201,224,.06); }
.finale-section #wish .wish-art-orbit.orbit-two { border-color:rgba(245,185,211,.23); }
.finale-section #wish .cake { filter:drop-shadow(0 21px 34px rgba(3,9,26,.38)) drop-shadow(0 0 12px rgba(255,208,133,.12)); }
.finale-section #wish.is-gift-open .cake { filter:drop-shadow(0 20px 34px rgba(3,9,26,.35)) drop-shadow(0 0 20px rgba(255,208,133,.2)); }
.finale-section #wish.is-gift-open.is-blown .wish-art::after { animation:wish-cake-ring-burst 1.35s .04s cubic-bezier(.12,.68,.2,1) both; }
.finale-section #wish .wish-gift-open { box-shadow:0 9px 28px rgba(4,8,20,.24),0 0 24px rgba(248,196,119,.16),inset 0 1px rgba(255,255,255,.18); transition:transform .42s cubic-bezier(.2,.75,.2,1),border-color .38s,background .38s,box-shadow .42s; }
.finale-section #wish .wish-gift-open:active { transform:translateY(0) scale(.98); }
.finale-section #wish .wish-hint { transition:color .35s ease,opacity .35s ease; }
@keyframes wish-cake-ring-burst { 0% { opacity:0; transform:translate(-50%,-50%) scale(.5); } 25% { opacity:.86; } 100% { opacity:0; transform:translate(-50%,-50%) scale(1.5); } }
.finale-section .finale-message-slide {
  background:radial-gradient(ellipse at 16% 20%,rgba(64,139,195,.2),transparent 39%),radial-gradient(ellipse at 82% 77%,rgba(188,83,151,.19),transparent 42%),radial-gradient(ellipse at 52% 100%,rgba(224,176,103,.075),transparent 32%),linear-gradient(145deg,#0b1427,#17152f 54%,#101d2a);
  background-size:130% 130%,130% 130%,100% 100%,100% 100%;
  background-position:0% 0%,100% 100%,center,center;
  animation:finale-note-atmosphere 22s ease-in-out infinite alternate;
}
.finale-section .love-you-slide {
  background:radial-gradient(ellipse at 15% 22%,rgba(70,151,205,.2),transparent 38%),radial-gradient(ellipse at 82% 25%,rgba(190,82,158,.22),transparent 39%),radial-gradient(ellipse at 52% 88%,rgba(76,164,165,.13),transparent 38%),linear-gradient(145deg,#0b1427,#19142f 55%,#0c1c29);
  background-size:130% 130%,130% 130%,120% 120%,100% 100%;
  background-position:0% 0%,100% 0%,50% 100%,center;
  animation:finale-love-atmosphere 25s ease-in-out infinite alternate;
}
@keyframes finale-note-atmosphere { to { background-position:100% 70%,0% 20%,center,center; } }
@keyframes finale-love-atmosphere { to { background-position:70% 100%,20% 80%,100% 0%,center; } }
@media (prefers-reduced-motion:reduce) {
  .finale-progress li a,.finale-section #wish::before,.finale-section #wish::after,.finale-section #wish .wish-art::before { animation:none!important;transition:none!important; }
  .finale-section .finale-message-slide,.finale-section .love-you-slide { animation:none!important; }
  .finale-section:not([hidden]) { scroll-behavior:auto!important; }
}

/* Slide 11 final polish: give each reason its own jewel tone and a calm reveal. */
.reasons-section .reason-card:nth-child(1) { --reason-accent:#f3c976; }
.reasons-section .reason-card:nth-child(2) { --reason-accent:#9fd8eb; }
.reasons-section .reason-card:nth-child(3) { --reason-accent:#f0a8c8; }
.reasons-section .reason-card:nth-child(4) { --reason-accent:#b8a8f4; }
.reasons-section .reason-card:nth-child(5) { --reason-accent:#a8dfc1; }
.reasons-section .reason-card:nth-child(6) { --reason-accent:#f3b38e; }
.reasons-section .reason-card:nth-child(7) { --reason-accent:#a9c9f4; }
.reasons-section .reason-card:nth-child(8) { --reason-accent:#e5a8dc; }
.reasons-section .reason-card:nth-child(9) { --reason-accent:#9edbd7; }
.reasons-section .reason-card:nth-child(10) { --reason-accent:#f0ce8b; }
.reasons-section .reason-card {
  border-color:color-mix(in srgb,var(--reason-accent) 48%,rgba(194,205,232,.2));
  background:radial-gradient(ellipse at 94% 2%,color-mix(in srgb,var(--reason-accent) 32%,transparent),transparent 62%),linear-gradient(142deg,color-mix(in srgb,var(--reason-accent) 24%,#1b2034),color-mix(in srgb,var(--reason-accent) 12%,#0d1324) 72%);
  box-shadow:inset 0 1px rgba(255,255,255,.09),0 12px 30px rgba(0,0,0,.2);
  transition:transform .46s cubic-bezier(.2,.78,.22,1),border-color .4s,box-shadow .48s,filter .4s,background .48s;
}
.reasons-section .reason-card::before { animation:reason-orbit-breathe 7s ease-in-out infinite alternate; }
.reasons-section .reason-card:nth-child(even)::before { animation-delay:-3.5s; }
.reasons-section .reason-card:hover,.reasons-section .reason-card:focus-visible {
  transform:translateY(-5px);
  border-color:color-mix(in srgb,var(--reason-accent) 82%,white);
  background:radial-gradient(ellipse at 92% 0%,color-mix(in srgb,var(--reason-accent) 39%,transparent),transparent 64%),linear-gradient(142deg,color-mix(in srgb,var(--reason-accent) 30%,#1b2034),color-mix(in srgb,var(--reason-accent) 16%,#0d1324) 72%);
  box-shadow:inset 0 1px rgba(255,255,255,.12),0 18px 38px rgba(0,0,0,.28),0 0 24px color-mix(in srgb,var(--reason-accent) 20%,transparent);
  filter:saturate(1.08);
}
.reasons-section .reason-card.is-open {
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--reason-accent) 82%,white);
  background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--reason-accent) 35%,transparent),transparent 68%),linear-gradient(142deg,color-mix(in srgb,var(--reason-accent) 28%,#1b2034),color-mix(in srgb,var(--reason-accent) 15%,#0d1324) 72%);
  box-shadow:inset 0 1px rgba(255,255,255,.12),inset 0 0 36px color-mix(in srgb,var(--reason-accent) 8%,transparent),0 16px 36px rgba(0,0,0,.25),0 0 25px color-mix(in srgb,var(--reason-accent) 18%,transparent);
}
.reasons-section .reason-card.is-open p { color:color-mix(in srgb,var(--reason-accent) 27%,#fff); animation:reason-copy-arrive .55s .06s cubic-bezier(.2,.75,.22,1) both; }
.reasons-section .reason-card.is-open .reason-lock { background:color-mix(in srgb,var(--reason-accent) 16%,transparent); box-shadow:0 0 20px color-mix(in srgb,var(--reason-accent) 18%,transparent); }
@keyframes reason-orbit-breathe { from { transform:scale(.94) translate3d(0,0,0); opacity:.56; } to { transform:scale(1.08) translate3d(-5px,-4px,0); opacity:.9; } }
@keyframes reason-copy-arrive { from { opacity:0; transform:translateY(8px); filter:blur(2px); } to { opacity:1; transform:translateY(0); filter:blur(0); } }
@media (prefers-reduced-motion:reduce) {
  .reasons-section .reason-card::before { animation:none!important; }
  .reasons-section .reason-card.is-open p { animation:none!important; }
}