:root {
  color-scheme: dark;
  --ink: #09070d;
  --gold: #f2cf91;
  --gold-bright: #ffe6b8;
  --pink: #f2a8c2;
  --muted: rgba(255, 238, 222, .58);
  --line: rgba(255, 223, 184, .18);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--ink); }
body {
  min-height: 100svh; overflow-x: hidden; color: #fff7ef;
  font-family: 'DM Sans', sans-serif;
  background:
    radial-gradient(ellipse at 50% 10%, rgba(112, 50, 79, .20), transparent 42%),
    radial-gradient(ellipse at 80% 80%, rgba(135, 91, 42, .12), transparent 40%),
    #09070d;
}
button { font: inherit; }
.ambient { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.ambient canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .72; }
.orb { position: absolute; width: 34vw; height: 34vw; min-width: 220px; min-height: 220px; border-radius: 50%; filter: blur(85px); opacity: .13; animation: drift 18s ease-in-out infinite alternate; }
.orb-a { background: #b95a83; top: 4%; left: -15%; }
.orb-b { background: #bd8b45; bottom: -16%; right: -12%; animation-delay: -7s; }
.orb-c { background: #7e477c; top: 48%; left: 55%; animation-delay: -11s; }
.experience { position: relative; z-index: 1; width: min(100% - 36px, 1040px); min-height: 100svh; margin: auto; display: flex; flex-direction: column; padding: max(24px, env(safe-area-inset-top)) 0 max(18px, env(safe-area-inset-bottom)); }
.topline { display: flex; align-items: center; justify-content: space-between; letter-spacing: .18em; font-size: 10px; color: rgba(255,239,222,.56); }
.brand { display: flex; gap: 9px; align-items: center; font-weight: 700; color: #f7dfc2; }
.brand i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); }
.chapter { font-size: 9px; }
.screen { display: none; flex: 1; min-height: 0; align-items: center; justify-content: center; flex-direction: column; text-align: center; padding: 34px 0; animation: screenIn .8s cubic-bezier(.2,.8,.2,1) both; }
.screen.active { display: flex; }
.eyebrow { color: var(--gold); font-size: 9px; letter-spacing: .28em; font-weight: 700; margin-bottom: 27px; }
.cracker { border: 0; background: transparent; padding: 0; font-size: clamp(112px, 24vw, 205px); line-height: 1; cursor: pointer; filter: drop-shadow(0 0 24px rgba(255,185,120,.28)); transition: transform .18s ease, filter .2s ease; animation: crackerArrive 1.2s cubic-bezier(.16,1,.3,1) both; -webkit-tap-highlight-color: transparent; }
.cracker:hover { filter: drop-shadow(0 0 36px rgba(255,185,120,.58)); transform: scale(1.045) rotate(-3deg); }
.cracker:active { transform: scale(.9) rotate(7deg); }
.cracker.hit-a { animation: hitA .42s ease; } .cracker.hit-b { animation: hitB .42s ease; } .cracker.hit-c { animation: hitC .42s ease; }
.intro-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(25px, 5vw, 43px); font-weight: 500; margin: 27px 0 22px; letter-spacing: -.025em; }
.intro-title span { color: var(--gold-bright); font-style: italic; }
.counter-wrap { width: min(220px, 65vw); }
.counter { font-size: 13px; letter-spacing: .12em; color: var(--gold-bright); margin-bottom: 10px; }
.counter span { color: var(--muted); }
.counter-track { height: 2px; background: rgba(255,255,255,.13); overflow: hidden; border-radius: 8px; }
.counter-fill { width: 0; height: 100%; background: linear-gradient(90deg, var(--pink), var(--gold)); box-shadow: 0 0 12px var(--gold); transition: width .35s ease; }
.hint { color: var(--muted); font-size: 11px; letter-spacing: .04em; margin-top: 17px; }
.message-copy { font-family: 'Great Vibes', cursive; font-size: clamp(34px, 7vw, 67px); line-height: 1.15; color: #fff0e5; text-shadow: 0 0 30px rgba(240,177,187,.12); }
.message-copy p { margin: 0 0 5px; animation: textReveal .8s both; }
.message-copy p:nth-child(2) { animation-delay: .16s; color: #f7d4b0; }
.message-copy p:nth-child(3) { animation-delay: .32s; }
.message-copy .message-prompt { margin-top: 30px; font-family: 'Cormorant Garamond', serif; font-size: clamp(18px, 3vw, 24px); letter-spacing: .04em; color: var(--muted); animation-delay: .5s; }
.message-copy .signature { font-size: clamp(48px, 10vw, 88px); color: var(--gold-bright); text-shadow: 0 0 28px rgba(255,201,137,.34); animation-delay: .68s; }
.signature span { font-family: sans-serif; font-size: .42em; vertical-align: middle; }
.message-spark { position: absolute; color: var(--gold); font-size: 25px; opacity: .8; transform: translate(170px,-110px); animation: twinkle 2s infinite; }
.slideshow-screen { padding: 20px 0; }
.photo-stage { position: relative; width: min(100%, 760px); height: min(69svh, 690px); min-height: 300px; border-radius: 5px; overflow: hidden; background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.015)); border: 1px solid rgba(255,220,183,.22); box-shadow: 0 25px 90px rgba(0,0,0,.48), 0 0 40px rgba(219,157,126,.08); }
.photo-stage img { display: block; width: 100%; height: 100%; object-fit: contain; background: #100d13; opacity: 0; transform: scale(1.045); transition: opacity .8s ease, transform 5s linear; }
.photo-stage img.visible { opacity: 1; transform: scale(1); }
.photo-vignette { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(8,6,11,.48), transparent 28%, transparent 70%, rgba(8,6,11,.1)); }
.photo-caption { position: absolute; bottom: 23px; left: 24px; color: rgba(255,239,221,.86); font-family: 'Cormorant Garamond', serif; font-size: 18px; font-style: italic; letter-spacing: .04em; text-shadow: 0 2px 10px #000; }
.slide-index { position: absolute; top: 20px; right: 22px; font-size: 12px; letter-spacing: .16em; color: #fff0dc; text-shadow: 0 2px 8px #000; }
.slide-index span { color: rgba(255,255,255,.58); }
.slide-progress { width: min(100%, 760px); height: 2px; margin-top: 17px; background: rgba(255,255,255,.15); }
.slide-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--pink), var(--gold)); }
.final-screen { position: relative; overflow: hidden; }
.final-halo { position: absolute; width: min(80vw, 620px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(186,99,129,.17), rgba(185,133,72,.07) 40%, transparent 70%); animation: breathe 5s ease-in-out infinite; }
.final-copy { position: relative; font-family: 'Great Vibes', cursive; font-size: clamp(37px, 7vw, 70px); line-height: 1.12; text-shadow: 0 0 30px rgba(255,190,196,.2); }
.final-copy p { margin: 0; }
.final-copy .final-highlight { color: var(--gold-bright); font-size: 1.24em; text-shadow: 0 0 28px rgba(255,205,143,.4); }
.final-copy .final-emojis { font-family: sans-serif; font-size: .48em; margin-top: 18px; letter-spacing: .15em; }
.replay-wrap { margin-top: 38px; animation: screenIn .6s both; }
.replay-button { color: #21131a; border: 0; border-radius: 99px; padding: 14px 24px; background: linear-gradient(110deg, #f4c6cd, #f8dda9); font-weight: 700; font-size: 11px; letter-spacing: .08em; cursor: pointer; box-shadow: 0 8px 30px rgba(239,179,169,.18); transition: transform .2s, box-shadow .2s; }
.replay-button:hover { transform: translateY(-2px); box-shadow: 0 12px 38px rgba(239,179,169,.3); }
.replay-button span { font-size: 16px; margin-left: 8px; }
.controls { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; border-top: 1px solid var(--line); }
.control-center { display: flex; gap: 14px; }
.control-button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 0; border: 0; color: rgba(255,239,222,.72); background: transparent; cursor: pointer; font-size: 9px; letter-spacing: .15em; transition: color .2s, transform .2s; }
.control-button span { font-size: 17px; color: var(--gold); }
.control-button:hover:not(:disabled) { color: white; transform: translateY(-1px); }
.control-button:disabled { opacity: .25; cursor: default; }
.next-button { color: var(--gold-bright); }
.footer-note { text-align: center; padding-top: 17px; font-size: 8px; letter-spacing: .22em; color: rgba(255,239,222,.32); }
.footer-note span { color: var(--gold); margin-left: 4px; }
.burst-layer { position: fixed; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.particle { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--pcolor, #ffda9b); box-shadow: 0 0 10px currentColor; animation: burst var(--dur, 1.2s) ease-out forwards; }
.flash { position: fixed; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient(circle, rgba(255,225,179,.42), transparent 65%); animation: flash .65s ease-out forwards; }
[hidden] { display: none !important; }
@keyframes screenIn { from { opacity: 0; transform: translateY(14px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes crackerArrive { from { opacity: 0; transform: scale(.35) rotate(-24deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes hitA { 0%,100%{transform:rotate(0) scale(1)} 25%{transform:rotate(-13deg) scale(1.08)} 60%{transform:rotate(9deg) scale(.96)} }
@keyframes hitB { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-12px) rotate(-7deg)} 50%{transform:translateX(10px) rotate(6deg)} }
@keyframes hitC { 0%,100%{transform:scale(1)} 35%{transform:scale(1.16) rotate(8deg)} 70%{transform:scale(.94) rotate(-5deg)} }
@keyframes textReveal { from { opacity: 0; transform: translateY(18px); filter: blur(5px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes burst { 0% { opacity: 1; transform: translate(0,0) scale(1); } 100% { opacity: 0; transform: translate(var(--dx),var(--dy)) scale(.1); } }
@keyframes flash { 0%{opacity:0} 20%{opacity:1} 100%{opacity:0} }
@keyframes drift { to { transform: translate(12vw, 8vh) scale(1.2); } }
@keyframes twinkle { 50% { opacity: .2; transform: translate(170px,-110px) rotate(45deg) scale(.7); } }
@keyframes breathe { 50% { transform: scale(1.12); opacity: .7; } }
@media (max-width: 560px) {
  .experience { width: calc(100% - 34px); }
  .eyebrow { font-size: 8px; letter-spacing: .2em; margin-bottom: 22px; }
  .screen { padding: 22px 0; }
  .photo-stage { height: 62svh; min-height: 280px; }
  .photo-caption { left: 15px; bottom: 15px; }
  .control-button { gap: 5px; font-size: 8px; letter-spacing: .1em; }
  .control-center { gap: 10px; }
  .controls { padding-top: 12px; }
  .footer-note { font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}