@import url("https://fonts.googleapis.com/css2?family=Great+Vibes&family=Parisienne&family=Quicksand:wght@300&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Montserrat:wght@400;500;600&display=swap');
:root{--bg:#080706;--text:#eee2cc;--muted:#a99b86;--orange:#d87824;--orange2:#f39a43}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}
body{font-family:"Cormorant Garamond",Georgia,serif;background:radial-gradient(circle at 50% -10%,rgba(216,120,36,.12),transparent 38%),#080706}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}



/* Floating sparkles */
.sparkle-field{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:10;opacity:.9}
.sparkle{position:absolute;width:4px;height:4px;border-radius:50%;background:#f2b16c;box-shadow:0 0 8px 2px rgba(242,177,108,.5);animation:sparkleDrift linear infinite,sparklePulse ease-in-out infinite}
.sparkle:after{content:"";position:absolute;left:50%;top:50%;width:1px;height:10px;transform:translate(-50%,-50%);background:rgba(242,177,108,.65)}
@keyframes sparkleDrift{0%{transform:translate3d(0,35px,0) rotate(0deg)}20%{transform:translate3d(var(--x1),-18vh,0) rotate(55deg)}43%{transform:translate3d(var(--x2),-43vh,0) rotate(130deg)}67%{transform:translate3d(var(--x3),-70vh,0) rotate(210deg)}84%{transform:translate3d(var(--x4),-88vh,0) rotate(280deg)}100%{transform:translate3d(var(--x5),-112vh,0) rotate(360deg)}}
@keyframes sparklePulse{0%,100%{opacity:.1;scale:.6}50%{opacity:.85;scale:1}}
.music-toggle{position:fixed;right:18px;bottom:18px;z-index:20;width:42px;height:42px;border:1px solid rgba(240,160,90,.55);border-radius:50%;background:rgba(8,7,6,.58);color:#f0a15a;font:500 14px Montserrat,sans-serif;cursor:pointer;backdrop-filter:blur(5px);transition:.3s ease}
.music-toggle:hover{transform:scale(1.06);box-shadow:0 0 20px rgba(216,120,36,.18)}
/* Cinematic page transitions */
.page-transition{
  opacity:0;
  transform:translateY(10px) scale(.992);
  filter:blur(2px);
  transition:opacity .65s cubic-bezier(.22,1,.36,1),
             transform .65s cubic-bezier(.22,1,.36,1),
             filter .65s cubic-bezier(.22,1,.36,1);
}
.page-transition.is-visible{
  opacity:1;
  transform:none;
  filter:none;
}
.page-transition .eyebrow,
.page-transition .riddle,
.page-transition .controls,
.page-transition .quote,
.page-transition .rule,
.page-transition .heart,
.page-transition .kicker,
.page-transition h1,
.page-transition h2,
.page-transition .final-note{
  animation:contentRise .75s cubic-bezier(.22,1,.36,1) both;
}
.page-transition .heart{animation-delay:.06s}
.page-transition .eyebrow{animation-delay:.10s}
.page-transition h1{animation-delay:.12s}
.page-transition .kicker{animation-delay:.16s}
.page-transition .riddle{animation-delay:.20s}
.page-transition .quote{animation-delay:.20s}
.page-transition .rule{animation-delay:.27s}
.page-transition .controls{animation-delay:.32s}
.page-transition .final-note{animation-delay:.38s}

@keyframes contentRise{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}
@keyframes softGlow{
  0%,100%{text-shadow:0 0 18px rgba(243,154,67,.25)}
  50%{text-shadow:0 0 30px rgba(243,154,67,.55)}
}
.page-transition .heart{animation-name:contentRise,softGlow;animation-duration:.75s,2.8s;animation-delay:.06s, .8s;animation-iteration-count:1,infinite}


.cover-screen{overscroll-behavior:none;padding:0!important;max-width:560px;overflow:hidden;position:relative;width:100%;height:100dvh;min-height:100dvh;max-height:100dvh;margin:0 auto}
.cover-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center center;background:#080706}
.cover-overlay{transition:opacity 1.2s ease;position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.10) 0%,rgba(0,0,0,.04) 42%,rgba(0,0,0,.72) 100%)}
.cover-content{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;text-align:center;padding:0 26px max(34px,7vh);z-index:2}
.cover-title{font:500 clamp(43px,11vw,68px)/.82 "Cormorant Garamond",Georgia,serif;letter-spacing:.10em;color:#f0dfc2;text-shadow:0 2px 18px rgba(0,0,0,.7);margin:0}
.cover-title span{display:block;font-size:.67em;letter-spacing:.20em;margin-top:13px}
.cover-kicker{font:500 10px Montserrat,sans-serif;letter-spacing:.30em;color:#f0a15a;margin:22px 0 25px;text-shadow:0 1px 8px #000}
.cover-button{backdrop-filter:blur(2px)}

.screen{width:min(100%,560px);min-height:100vh;margin:auto;padding:28px 24px 34px;display:flex;flex-direction:column;position:relative}
.top{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font:500 11px Montserrat,sans-serif;letter-spacing:.22em;text-transform:uppercase}
.back{border:0;background:none;color:var(--text);font-size:25px;cursor:pointer}.brand{font:500 11px Montserrat,sans-serif;letter-spacing:.25em;color:var(--orange2)}
.hero{flex:1;display:flex;flex-direction:column;justify-content:center;text-align:center;padding:35px 0}.heart{font-size:40px;color:var(--orange2);text-shadow:0 0 22px rgba(243,154,67,.4);margin-bottom:24px}
h1{font-size:clamp(50px,14vw,76px);line-height:.78;font-weight:400;letter-spacing:.03em;margin:0}h1 span{display:block;font-size:.68em;letter-spacing:.16em;margin-top:16px}
.kicker{font:500 11px Montserrat,sans-serif;letter-spacing:.25em;color:var(--orange2);margin:28px 0 0}.quote{font-size:19px;line-height:1.25;color:var(--muted);margin:38px auto 0;font-style:italic}.rule{height:1px;width:110px;background:linear-gradient(90deg,transparent,var(--orange),transparent);margin:28px auto}
button{cursor:pointer}.riddle-wrap{flex:1;display:flex;flex-direction:column;justify-content:center;padding:35px 0 15px}
.eyebrow{font:500 11px Montserrat,sans-serif;letter-spacing:.3em;color:var(--orange2);text-align:center;margin-bottom:28px}.riddle{white-space:pre-line;text-align:center;font-size:25px;line-height:1.18;margin:0 auto;max-width:500px}
.controls{margin-top:38px;display:flex;flex-direction:column;gap:12px}
.narration-player{width:min(100%,390px);margin:27px auto 0;padding:12px 16px 12px 12px;border:1px solid rgba(243,154,67,.42);border-radius:18px;background:linear-gradient(120deg,rgba(216,120,36,.12),rgba(255,255,255,.018));box-shadow:0 10px 34px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.035);transition:border-color .3s ease,background .3s ease,transform .3s ease,box-shadow .3s ease}
.narration-player:hover{border-color:rgba(243,154,67,.72);background:linear-gradient(120deg,rgba(216,120,36,.18),rgba(255,255,255,.025));transform:translateY(-1px);box-shadow:0 13px 38px rgba(0,0,0,.25),0 0 24px rgba(216,120,36,.07)}
.narration-control{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:14px}
.narration-play{width:42px;height:42px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--text)}
.narration-play:focus-visible{outline:1px solid var(--orange2);outline-offset:4px}
.narration-disc{width:42px;height:42px;border:1px solid rgba(243,154,67,.58);border-radius:50%;display:grid;place-items:center;color:var(--orange2);background:rgba(8,7,6,.42);font-size:13px;padding-left:2px;box-sizing:border-box}
.narration-wave{height:30px;display:flex;align-items:center;gap:3px;padding-left:5px}
.narration-wave i{display:block;width:2px;height:var(--h);border-radius:2px;background:linear-gradient(180deg,var(--orange2),rgba(216,120,36,.34));transform-origin:center;animation:narrationWave .72s ease-in-out infinite alternate;animation-play-state:paused}
.narration-wave i:nth-child(2){animation-delay:-.18s}.narration-wave i:nth-child(3){animation-delay:-.36s}.narration-wave i:nth-child(4){animation-delay:-.1s}.narration-wave i:nth-child(5){animation-delay:-.28s}
.narration-player.is-playing .narration-wave i{animation-play-state:running}.narration-player.is-playing .narration-disc{background:rgba(216,120,36,.15);box-shadow:0 0 20px rgba(243,154,67,.16)}
@keyframes narrationWave{from{transform:scaleY(.48);opacity:.55}to{transform:scaleY(1.08);opacity:1}}
.narration-track{min-width:0}
.narration-time-row{display:flex;justify-content:space-between;margin-top:5px;color:var(--muted);font:500 9px Montserrat,sans-serif;letter-spacing:.05em}
.narration-seek{width:100%;height:4px;accent-color:var(--orange2);cursor:pointer}
.narration-seek:focus-visible{outline:1px solid var(--orange2);outline-offset:4px}
.hint,.photo{margin-top:25px;padding:20px;border:1px solid #3e2a1a;background:rgba(255,255,255,.015)}.hint p{margin:0;text-align:center;font-size:20px;line-height:1.25;color:#c9bba5}
.photo img{display:block;width:100%;max-height:66vh;object-fit:contain;border:1px solid #4c3824;background:#080706}.photo-caption{text-align:center;color:var(--muted);font-size:15px;margin:12px 0 0;font-style:italic}
.success{text-align:center;padding:50px 0}.success h2{font-size:42px;font-weight:400;margin:0 0 15px}.success p{font-size:21px;line-height:1.3;color:var(--muted)}


@media(max-width:420px){.screen{padding-left:19px;padding-right:19px}.riddle{font-size:22px}}

/* Guide typography */
.guide-copy, .guide-copy * { font-family: "Cormorant Garamond", Georgia, serif; }

/* Final typography */
html, body, .screen, .screen *,
button, input, textarea {
  font-family:"Cormorant Garamond", Georgia, serif !important;
  font-weight:400 !important;
}
.riddle, .quote, .instruction-copy {
  font-family:"Cormorant Garamond", Georgia, serif !important;
  font-weight:400 !important;
}


.archive-wrap{max-width:680px;width:100%;padding-left:8px;padding-right:8px}
.archive-list{display:flex;flex-direction:column;gap:9px;margin:30px auto 8px;width:100%;max-width:560px}
.archive-item{display:flex;align-items:center;gap:18px;width:100%;padding:15px 18px;background:linear-gradient(90deg,rgba(255,255,255,.018),rgba(216,120,36,.035));border:1px solid rgba(216,120,36,.28);color:var(--text);font-family:"Cormorant Garamond",Georgia,serif;font-size:19px;text-align:left;cursor:pointer;transition:transform .3s ease,border-color .3s ease,background .3s ease,box-shadow .3s ease}
.archive-item:hover{background:rgba(216,120,36,.07);border-color:rgba(243,154,67,.58);transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.22)}
.archive-item span{font-family:Montserrat,sans-serif;font-size:9px;letter-spacing:.18em;color:var(--orange2);min-width:28px}
.archive-item strong{font-weight:400;flex:1}
.archive-item i{font-style:normal;font-family:"Cormorant Garamond",Georgia,serif;font-size:25px;line-height:1;color:var(--orange2)}
.cover-memory{display:block;margin:14px auto 0;background:none;border:0;color:var(--muted);font-family:"Cormorant Garamond",Georgia,serif;font-size:16px;letter-spacing:.06em;cursor:pointer;transition:color .25s ease}
.cover-memory:hover{color:var(--text)}
.archive-wrap .quote{margin-bottom:2px}
.archive-wrap .controls{margin-top:26px}

.brand-home{appearance:none;background:none;border:0;padding:0;margin:0;color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer}

/* Final cinematic polish */
html{scroll-behavior:smooth}
body{overflow-x:hidden}
.sparkle-field{mix-blend-mode:screen}
.sparkle{opacity:.55;filter:blur(.15px)}
.cinematic-intro{position:fixed;inset:0;background:#080706;z-index:100;display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity 1.4s ease;pointer-events:auto}
.cinematic-intro.hide{opacity:0;pointer-events:none}
.intro-inner{text-align:center;transform:translateY(8px);opacity:0;animation:introRise 1.7s cubic-bezier(.22,1,.36,1) .15s forwards}
.intro-mark{font:400 46px/1 "Cormorant Garamond",Georgia,serif;letter-spacing:.16em;color:#ead8b9}
.intro-date{margin-top:16px;font:400 13px "Cormorant Garamond",Georgia,serif;letter-spacing:.32em;color:#b99468}
.intro-line{width:90px;height:1px;margin:24px auto 0;background:linear-gradient(90deg,transparent,var(--orange),transparent)}
@keyframes introRise{to{opacity:1;transform:none}}
.qr-found{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:rgba(8,7,6,.72);backdrop-filter:blur(5px);opacity:0;pointer-events:none;transition:opacity .45s ease}
.qr-found.show{opacity:1}
.qr-found-inner{text-align:center;transform:scale(.96);transition:transform .55s cubic-bezier(.22,1,.36,1)}
.qr-found.show .qr-found-inner{transform:scale(1)}
.qr-found .found-heart{font-size:42px;color:var(--orange2);margin-bottom:12px}
.qr-found .found-label{font:400 11px Montserrat,sans-serif;letter-spacing:.3em;color:var(--orange2)}
.qr-found .found-number{font:400 54px "Cormorant Garamond",Georgia,serif;color:var(--text);margin-top:8px}
.progress-dots{
  width:100%;
  flex:0 0 18px;
  box-sizing:border-box;
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin:18px auto 0;
  padding:0 4px;
  overflow:visible;
}
.progress-dot{
  display:block;
  flex:0 0 7px;
  width:7px;
  height:7px;
  min-width:7px;
  min-height:7px;
  box-sizing:border-box;
  border-radius:50%;
  border:1px solid rgba(243,154,67,.7);
  background:transparent;
  transition:transform .4s ease,background .4s ease,box-shadow .4s ease;
}
.progress-dot.done{
  background:var(--orange2);
  box-shadow:0 0 8px rgba(243,154,67,.45);
}
.progress-dot.current{
  transform:scale(1.5);
  background:transparent;
}
.final-special{font-size:21px;line-height:1.45;color:var(--muted);max-width:420px;margin:0 auto}
.final-special strong{display:block;font-size:28px;font-weight:400;color:var(--text);margin:12px 0}
.archive-item{background:transparent!important}.archive-item:hover{background:rgba(216,120,36,.055)!important;transform:translateY(-1px);transition:.35s ease}.cover-screen .progress-dots{display:none!important}.final-special{text-align:center;text-align-last:auto;}
/* Anniversary finishing layer */
.page-transition{opacity:0;transform:translateY(10px);transition:opacity .7s ease,transform .8s cubic-bezier(.22,1,.36,1)}
.page-transition.is-visible{opacity:1;transform:none}
.qr-found{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:rgba(16,11,8,.82);backdrop-filter:blur(7px);opacity:0;pointer-events:none;transition:opacity .55s ease}
.qr-found.show{opacity:1}
.qr-found-inner{text-align:center;transform:translateY(12px) scale(.97);transition:transform .8s cubic-bezier(.22,1,.36,1)}
.qr-found.show .qr-found-inner{transform:none}
.found-heart{font:400 42px "Cormorant Garamond",serif;color:var(--orange2);margin-bottom:8px}
.found-label{font:400 11px Montserrat,sans-serif;letter-spacing:.28em;color:var(--orange2)}
.found-number{font:400 64px "Cormorant Garamond",serif;color:var(--text);margin-top:8px}
.easter-egg{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;background:transparent;backdrop-filter:none;opacity:0;pointer-events:none;transition:opacity .6s}
.easter-egg.show{opacity:1;pointer-events:auto}
.easter-inner{
  text-align:center;
  padding:32px 36px;
  max-width:360px;
  box-sizing:border-box;
  background:rgba(247,241,232,.78);
  border:1px solid rgba(151,104,58,.28);
  border-radius:18px;
  box-shadow:0 12px 45px rgba(0,0,0,.16);
}
.easter-inner .heart{font-size:44px;color:var(--orange2)}
.easter-inner p{font:400 24px/1.35 "Cormorant Garamond",Georgia,serif;color:var(--text);margin:20px 0}
.easter-close{font:400 15px "Cormorant Garamond",serif;color:var(--orange2);background:none;border:0}
.final-special{font-size:24px!important;line-height:1.5!important;max-width:430px!important}
.final-special strong{display:block;font-size:29px!important;font-weight:400!important;margin:13px 0!important}
/* Final completion sequence */
.page-transition.completion-exit{opacity:0!important;transform:scale(.985)!important;filter:blur(4px)!important;pointer-events:none}
.completion-screen{padding:0 24px!important;min-height:100dvh!important;justify-content:center;overflow:hidden}
.completion-stage{width:100%;min-height:100dvh;display:flex;align-items:center;justify-content:center;position:relative;text-align:center}
.completion-markers{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:flex-start;justify-content:center;gap:clamp(7px,2.2vw,12px);width:100%;transition:opacity .8s ease,transform .9s cubic-bezier(.22,1,.36,1),filter .8s ease}
.completion-marker{display:flex;flex-direction:column;align-items:center;gap:9px;min-width:22px;opacity:.38;transition:opacity .45s ease,transform .45s cubic-bezier(.22,1,.36,1)}
.completion-marker i{display:block;width:7px;height:7px;border-radius:50%;border:1px solid rgba(243,154,67,.72);background:transparent;transition:background .35s ease,box-shadow .35s ease,transform .35s ease}
.completion-marker b{font:400 8px Montserrat,sans-serif!important;letter-spacing:.08em;color:rgba(238,226,204,.48);transition:color .35s ease,text-shadow .35s ease}
.completion-marker.lit{opacity:1;transform:translateY(-1px)}
.completion-marker.lit i{background:var(--orange2);box-shadow:0 0 11px rgba(243,154,67,.72);transform:scale(1.15)}
.completion-marker.lit b{color:var(--text);text-shadow:0 0 12px rgba(243,154,67,.3)}
.completion-markers.all-lit{transform:translate(-50%,-50%) scale(1.025)}
.completion-markers.fade-away{opacity:0;filter:blur(3px);transform:translate(-50%,-52%) scale(.985)}
.completion-copy{width:min(100%,500px);margin:auto;text-align:center;position:relative;z-index:2}
.completion-main,.completion-anniversary{margin:0 auto;text-align:center;opacity:0;transform:translateY(10px);transition:opacity 1.15s ease,transform 1.15s cubic-bezier(.22,1,.36,1);color:var(--text)}
.completion-main{font:400 clamp(28px,7.3vw,38px)/1.23 "Cormorant Garamond",Georgia,serif!important;max-width:470px}
.completion-anniversary{font:400 clamp(22px,6vw,30px)/1.2 "Cormorant Garamond",Georgia,serif!important;margin-top:34px;color:var(--orange2);letter-spacing:.02em}
.completion-main.show,.completion-anniversary.show{opacity:1;transform:none}
@media(max-width:390px){.completion-markers{gap:5px}.completion-marker{min-width:20px}.completion-marker b{font-size:7px!important}}

.archive-title{font:400 52px "Cormorant Garamond",Georgia,serif;letter-spacing:.02em;color:var(--text);margin:4px 0}
.archive-subtitle{font:italic 20px/1.35 "Cormorant Garamond",Georgia,serif;color:var(--muted)}
.archive-timeline{display:flex;align-items:center;justify-content:center;width:100%;margin:24px 0 8px;overflow:hidden}
.archive-timeline .tl-dot{width:7px;height:7px;border-radius:50%;background:var(--orange2);flex:0 0 auto}
.archive-timeline .tl-line{height:1px;background:rgba(216,120,36,.45);width:28px;flex:0 0 28px}

.secret-heart,
.secret-heart:hover,
.secret-heart:focus,
.secret-heart:active{
  background:transparent!important;
  background-color:transparent!important;
  border:0!important;
  box-shadow:none!important;
  outline:none;
}

/* Isolated ordered-dither reveal adapted from the working test */
.cover-screen.dither-running .cover-image{opacity:0}
.cover-screen .cover-image.dither-hidden{opacity:0!important}
.cover-dither-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  display:block;
  pointer-events:none;
  background:#000;
  opacity:1;
  transition:opacity .9s ease;
}
.cover-dither-canvas.is-done{opacity:0}
.cover-screen .cover-overlay{z-index:2}
.cover-screen .cover-content{z-index:3}
.cover-screen{background:#000!important}
.cover-screen .cover-image{background:#000!important}
.cover-screen.dither-running .cover-image{opacity:0!important}
.cover-screen.dither-running .cover-overlay{opacity:0!important}

.cover-screen.dither-running{
  background:#000!important;
}
.cover-screen.dither-running .cover-image,
.cover-screen.dither-running .cover-overlay,
.cover-screen.dither-running .cover-content{
  visibility:hidden!important;
  opacity:0!important;
}
.cover-dither-canvas{
  background:#000!important;
}

/* Unified button treatment */
button{
  -webkit-appearance:none;
  appearance:none;
  border-radius:999px!important;
  font-family:"Cormorant Garamond",Georgia,serif!important;
  font-weight:400!important;
  transition:transform .22s ease,opacity .22s ease,background-color .22s ease,border-color .22s ease,box-shadow .22s ease!important;
}
button:hover{transform:translateY(-1px)}
button:active{transform:translateY(0) scale(.97)}
.back,.brand,.secret-heart,.music-toggle{
  border-radius:999px!important;
}

/* Final button consistency */
.cta,
.secondary,
.cover-button{
  box-sizing:border-box!important;
  min-height:46px!important;
  padding:11px 24px!important;
  border:1px solid rgba(216,120,36,.78)!important;
  border-radius:999px!important;
  background:#d87824!important;
  color:#fff!important;
  box-shadow:0 8px 24px rgba(0,0,0,.22)!important;
  font:500 16px "Cormorant Garamond",Georgia,serif!important;
  letter-spacing:.08em!important;
  text-transform:none!important;
  transition:transform .22s ease,background-color .22s ease,border-color .22s ease,box-shadow .22s ease!important;
}
.cta:hover,
.secondary:hover,
.cover-button:hover{
  transform:translateY(-1px)!important;
  background:#e68a37!important;
  border-color:#e68a37!important;
}
.cta:active,
.secondary:active,
.cover-button:active{
  transform:translateY(0) scale(.97)!important;
  background:#d87824!important;
  box-shadow:0 4px 12px rgba(0,0,0,.18)!important;
}
/* Archive/admin rows keep their list layout but share the same radius and interaction feel */
.archive-item{
  border-radius:18px!important;
  transition:transform .22s ease,background-color .22s ease,border-color .22s ease!important;
}
.archive-item:hover{transform:translateY(-1px)!important}
.archive-item:active{transform:scale(.985)!important}

/* Into My Arms prologue launcher — final narrator build integration */
#prologueHost{position:fixed;inset:0;z-index:100000;background:#060301;display:none;opacity:1;transition:opacity .9s ease}
#prologueHost.leaving{opacity:0;pointer-events:none}
#prologueFrame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#060301}

/* Animated Cómo funciona sequence */
.guide-sequence{flex:1;display:flex;flex-direction:column;justify-content:center;padding:20px 0 8px;text-align:center}
.guide-sequence .eyebrow{margin-bottom:25px}
.guide-steps{width:min(100%,470px);margin:0 auto;position:relative;display:flex;flex-direction:column;gap:13px;padding:0 2px}
.guide-steps:before{content:"";position:absolute;left:50%;top:20px;bottom:20px;width:1px;transform:translateX(-50%);background:linear-gradient(180deg,transparent,rgba(216,120,36,.24) 10%,rgba(216,120,36,.24) 90%,transparent);z-index:0}
.guide-step{position:relative;z-index:1;opacity:0;transform:translateY(9px);filter:blur(2px);transition:opacity .65s cubic-bezier(.22,1,.36,1),transform .65s cubic-bezier(.22,1,.36,1),filter .65s ease}
.guide-step.is-visible{opacity:1;transform:none;filter:none}
.guide-step.is-past .guide-node{background:#120d09;border-color:rgba(216,120,36,.45);box-shadow:none;color:#b7926e}
.guide-step.is-past .guide-copy{opacity:.68}
.guide-node{width:34px;height:34px;margin:0 auto 7px;border:1px solid rgba(243,154,67,.72);border-radius:50%;display:grid;place-items:center;background:#0b0806;color:#f0c090;font:400 12px/1 "Cormorant Garamond",Georgia,serif;letter-spacing:.06em;box-shadow:0 0 20px rgba(216,120,36,.12);transition:.55s ease}
.guide-title{margin:0;color:#ead8b9;font-size:17px;line-height:1.05;letter-spacing:.08em;text-transform:uppercase}
.guide-copy{margin:4px auto 0;max-width:370px;color:var(--muted);font-size:16px;line-height:1.15;transition:opacity .45s ease}
.guide-controls{margin-top:22px;min-height:48px;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);transition:opacity .65s ease,transform .65s cubic-bezier(.22,1,.36,1)}
.guide-controls.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.guide-controls .cta{width:100%}
.page-transition .guide-controls{animation:none}
@media(max-width:420px){.guide-sequence{padding-top:12px}.guide-sequence .eyebrow{margin-bottom:20px}.guide-steps{gap:10px}.guide-node{width:31px;height:31px;margin-bottom:6px}.guide-title{font-size:16px}.guide-copy{font-size:15px;line-height:1.12}.guide-controls{margin-top:18px}}
@media(prefers-reduced-motion:reduce){.guide-step,.guide-controls{transition:none!important;transform:none!important;filter:none!important}}



/* Final-clue petal CTA */
.final-petal-cta{
  position:relative;
  width:96px;height:96px;
  margin:6px auto 0;
  padding:0;border:0;background:transparent;
  display:grid;place-items:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  isolation:isolate;
}
.final-petal-cta::before{
  content:"";position:absolute;inset:17%;border-radius:50%;
  background:radial-gradient(circle,rgba(205,139,77,.25) 0%,rgba(139,76,35,.10) 44%,rgba(0,0,0,0) 72%);
  filter:blur(7px);
  animation:finalPetalAura 2.2s ease-in-out infinite;
  pointer-events:none;
}
.final-petal-cta img{
  width:78px;height:78px;object-fit:contain;
  transform:rotate(-18deg) scale(.94);
  filter:sepia(.2) saturate(.82) brightness(.82) drop-shadow(0 4px 9px rgba(0,0,0,.42));
  animation:finalPetalPulse 2.2s ease-in-out infinite;
  transform-origin:48% 55%;
  pointer-events:none;user-select:none;
}
.final-petal-cta.is-chosen::before{animation:finalPetalChosen .38s ease-out forwards}
.final-petal-cta.is-chosen img{animation:none;transform:rotate(-18deg) scale(1.035);transition:transform .38s ease,filter .3s ease}
.final-petal-cta.is-unlit::before{opacity:0;transition:opacity .22s ease}
.final-petal-cta.is-unlit img{filter:sepia(.18) saturate(.68) brightness(.70) drop-shadow(0 4px 8px rgba(0,0,0,.45))}
.final-petal-cta.is-leaving{
  pointer-events:none;
  animation:finalPetalLeave 3.2s cubic-bezier(.2,.62,.18,1) forwards;
}
.final-petal-cta.is-leaving img{animation:finalPetalTwist .55s ease-in-out infinite alternate}
@keyframes finalPetalPulse{
  0%,100%{transform:rotate(-18deg) scale(.94) translateY(0)}
  50%{transform:rotate(-16deg) scale(1.01) translateY(-2px)}
}
@keyframes finalPetalAura{
  0%,100%{opacity:.42;transform:scale(.82)}
  50%{opacity:.78;transform:scale(1.14)}
}
@keyframes finalPetalChosen{
  0%{opacity:.55;transform:scale(.9)}
  60%{opacity:1;transform:scale(1.45)}
  100%{opacity:.38;transform:scale(1.08)}
}
@keyframes finalPetalLeave{
  0%{transform:translate3d(0,0,0) rotate(0deg);opacity:1}
  18%{transform:translate3d(16px,-8px,0) rotate(18deg);opacity:1}
  42%{transform:translate3d(-34px,-54px,0) rotate(-28deg);opacity:.96}
  68%{transform:translate3d(74px,-150px,0) rotate(92deg);opacity:.82}
  100%{transform:translate3d(-145px,-380px,0) rotate(260deg);opacity:0}
}
@keyframes finalPetalTwist{
  from{filter:sepia(.18) saturate(.68) brightness(.70) drop-shadow(0 4px 8px rgba(0,0,0,.45));transform:perspective(260px) rotateX(-12deg) rotateY(-18deg) rotateZ(-20deg) scale(.96)}
  to{filter:sepia(.18) saturate(.68) brightness(.70) drop-shadow(0 4px 8px rgba(0,0,0,.45));transform:perspective(260px) rotateX(24deg) rotateY(31deg) rotateZ(16deg) scale(.9)}
}
@media (prefers-reduced-motion:reduce){
 .final-petal-cta::before,.final-petal-cta img{animation:none}
 .final-petal-cta.is-leaving{animation:finalPetalLeave .7s ease-out forwards}
}

/* v16 — final closing poem */
.closing-poem{position:relative;z-index:2;width:min(88vw,430px);margin:0 auto;text-align:center;opacity:1}
.poem-pair{display:flex;flex-direction:column;align-items:center;gap:2px;margin:0 0 13px;opacity:0;transform:translateY(15px);filter:blur(2px);transition:opacity 1.05s ease,transform 1.35s cubic-bezier(.22,1,.36,1),filter 1.05s ease}
.poem-pair.show{opacity:1;transform:translateY(0);filter:none}
.poem-pair.past{opacity:.20;transform:translateY(-5px)}
.poem-pair.assembled{opacity:.92;transform:none;filter:none}
.poem-en{font:400 clamp(10px,2.7vw,12px)/1.2 "Cormorant Garamond",Georgia,serif!important;color:rgba(244,232,211,.72);letter-spacing:.025em}
.poem-es{font:400 clamp(18px,5vw,25px)/1.08 "Cormorant Garamond",Georgia,serif!important;font-style:italic;color:rgba(218,176,125,.92);letter-spacing:.015em}
.closing-poem.scatter .poem-pair{opacity:0;filter:blur(5px);transform:translate(30px,-10px) scale(.98);transition-duration:1.4s}
.closing-poem.scatter .poem-pair:nth-child(2){transform:translate(44px,-4px) scale(.98)}
.closing-poem.scatter .poem-pair:nth-child(3){transform:translate(56px,3px) scale(.98)}
.closing-poem.scatter .poem-pair:nth-child(4){transform:translate(70px,8px) scale(.98)}
.poem-dust{position:absolute;left:50%;top:50%;width:min(78vw,360px);height:160px;transform:translate(-50%,-50%);pointer-events:none;opacity:0;background-image:radial-gradient(circle,rgba(229,164,93,.75) 0 1px,transparent 1.4px),radial-gradient(circle,rgba(247,221,180,.55) 0 1px,transparent 1.5px);background-size:31px 29px,43px 37px;background-position:2px 4px,17px 13px;mask-image:linear-gradient(90deg,transparent,#000 20%,#000 75%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 20%,#000 75%,transparent)}
.poem-dust.blow{animation:poemWind 1.65s ease-out forwards}
@keyframes poemWind{0%{opacity:0;transform:translate(-55%,-50%) scale(.85)}20%{opacity:.7}100%{opacity:0;transform:translate(5%,-57%) scale(1.18);filter:blur(2px)}}
.completion-anniversary{position:relative;z-index:3}
@media(prefers-reduced-motion:reduce){.poem-pair{transition:none}.closing-poem.scatter .poem-pair{transition:none}.poem-dust{display:none}}

/* v17 — final love beat */
.completion-love{position:absolute;z-index:4;left:50%;top:50%;margin:0;transform:translate(-50%,-50%);opacity:0;text-align:center;white-space:nowrap;font-family:"Cormorant Garamond",Georgia,serif;color:rgba(244,232,211,.96);font-size:clamp(22px,6vw,30px);font-weight:400;letter-spacing:.04em;transition:opacity .65s ease}
.completion-love.show{opacity:1}

/* v18 — exact viewport centering for final anniversary */
.completion-anniversary{
  position:fixed!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  width:auto!important;
  margin:0!important;
  transform:translate(-50%,-50%)!important;
  text-align:center!important;
  white-space:nowrap;
  z-index:5;
}

/* Final boat: an uncut portrait loop integrated into the existing atmosphere. */
.completion-copy.boat-fade-out{
  opacity:0!important;
  transition:opacity 1.35s ease!important;
  pointer-events:none;
}
.completion-stage::before{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(ellipse 64% 58% at 50% 50%,
    rgba(0,0,0,.94) 0%,rgba(0,0,0,.78) 42%,
    rgba(0,0,0,.3) 76%,transparent 100%);
  opacity:0;
  transition:opacity 2.2s ease;
}
html.boat-ending-active .completion-stage::before{opacity:1}
.boat-ending{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.boat-ending-media{
  width:min(100%,420px,calc(68dvh * .613636));
  aspect-ratio:1080 / 1760;
  max-height:68dvh;
  flex:none;
  opacity:0;
  transform:scale(.985);
  transition:opacity 2.4s ease,transform 2.4s cubic-bezier(.22,1,.36,1);
  -webkit-mask-image:radial-gradient(ellipse 76% 76% at center,#000 62%,transparent 100%);
  mask-image:radial-gradient(ellipse 76% 76% at center,#000 62%,transparent 100%);
  pointer-events:auto;
}
.boat-ending.visible .boat-ending-media{
  opacity:1;
  transform:scale(1);
}
.boat-ending-video{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  background:transparent;
}
.boat-replay{
  position:absolute;
  right:0;
  bottom:calc(18px + env(safe-area-inset-bottom,0px));
  z-index:4;
  width:42px;
  height:42px;
  padding:0;
  border:1px solid rgba(218,176,125,.4);
  border-radius:50%;
  background:rgba(8,7,6,.65);
  color:#dab07d;
  font-size:25px;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transition:opacity .7s ease!important;
}
.boat-replay.visible{opacity:.8;pointer-events:auto}
.boat-replay:focus-visible{outline:2px solid #dab07d;outline-offset:4px}
html.boat-ending-active #petal-atmosphere{
  -webkit-mask-image:linear-gradient(to right,#000 0%,#000 13%,transparent 36%,transparent 64%,#000 87%,#000 100%);
  mask-image:linear-gradient(to right,#000 0%,#000 13%,transparent 36%,transparent 64%,#000 87%,#000 100%);
}
html.boat-ending-active #petal-atmosphere::before{display:none}
@media(prefers-reduced-motion:reduce){
  .boat-ending-media,.completion-copy.boat-fade-out,.completion-stage::before{transition:none!important}
}

/* Post-poem intertitle: same restrained typography and black as the prologue bridge. */
.completion-intertitle{
  position:fixed;inset:0;z-index:100003;
  display:grid;place-items:center;padding:8vw;
  background:#060301;opacity:0;pointer-events:none;
  transition:opacity 1.2s ease;
}
.completion-intertitle.visible{opacity:1;pointer-events:auto}
.completion-intertitle-text{
  position:absolute;left:50%;top:50%;width:max-content;
  max-width:calc(100% - 48px);margin:0;text-align:center;
  color:#f3e7d3;font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(24px,5.5vw,44px);font-style:italic;font-weight:400;
  line-height:1.3;white-space:normal;
  text-shadow:0 3px 10px rgba(0,0,0,.95),0 0 30px rgba(0,0,0,.9);
  opacity:0;transform:translate(-50%,calc(-50% + 7px));
  transition:opacity .8s ease,transform .8s ease;
  pointer-events:none;
}
.completion-intertitle-text.visible{opacity:1;transform:translate(-50%,-50%)}
.completion-intertitle-text[data-ending-text="love"]{transition-duration:.65s}
.completion-intertitle-text[data-ending-text="love"].visible{transition-duration:.8s}
.completion-intertitle-text[data-ending-text="anniversary"]{transition-duration:.9s}
.completion-intertitle-text[data-ending-text="anniversary"].visible{transition-duration:.8s}
html.boat-ending-active .completion-screen{background:transparent}
html.boat-ending-active #petal-atmosphere{visibility:visible}
@media(prefers-reduced-motion:reduce){
  .completion-intertitle,.completion-intertitle-text{transition:none!important}
}

/* Final intertitle and boat share one uninterrupted black backdrop. */
.completion-intertitle{background:#000}
html.boat-ending-active body{
  background:#000!important;
  background-image:none!important;
}
html.boat-ending-active body::before{display:none}
html.boat-ending-active .completion-screen{
  background:#000!important;
  background-image:none!important;
}
html.boat-ending-active .completion-stage{background:#000}
html.boat-ending-active .completion-stage::before{
  background:none!important;
  opacity:0!important;
}
html.boat-ending-active .boat-ending-video{background:#000}


/* Shared post-prologue resting petal, anchored at the final riddle. */
#restingPetal{position:absolute;width:80px;height:80px;transform:translate(-50%,-50%);padding:0;border:0;background:none;touch-action:manipulation;cursor:pointer;z-index:3;-webkit-tap-highlight-color:transparent}
#restingPetal canvas{width:100%;height:100%;object-fit:contain;pointer-events:none;filter:sepia(.6) saturate(1.1) brightness(.85);transform-origin:35% 65%}
.petal-aura{position:absolute;width:180px;height:180px;transform:translate(-50%,-50%);background:radial-gradient(ellipse,#d995494d, #aa622719 32%,transparent 68%);pointer-events:none;z-index:2}
.petal-contact{position:absolute;width:95px;height:1px;transform:translate(-50%,-50%);background:linear-gradient(90deg,transparent,#dda767,transparent);opacity:0;pointer-events:none;z-index:2}
.petal-landed .petal-aura{animation:restGlow 3.6s ease-in-out infinite}
.petal-landed .petal-contact{animation:restLine 3.6s ease-in-out infinite}
.petal-landed #restingPetal canvas{animation:none}
.petal-chosen .petal-aura{animation:chosenGlow .38s cubic-bezier(.12,.65,.25,1) forwards}
.petal-chosen .petal-contact{animation:chosenLine .38s cubic-bezier(.12,.65,.25,1) forwards}
.petal-chosen #restingPetal canvas{filter:sepia(.6) saturate(1.1) brightness(.85)}
.petal-unlit .petal-aura,.petal-unlit .petal-contact{display:none}
.petal-unlit #restingPetal canvas{filter:sepia(.8) saturate(.8) brightness(.65)}
@keyframes restGlow{50%{transform:translate(-50%,-50%) scale(1.65);opacity:1}0%,100%{opacity:.62}}
@keyframes restLine{0%,100%{opacity:.4;transform:translate(-50%,-50%) scaleX(.7)}50%{opacity:.85;transform:translate(-50%,-50%) scaleX(1.25)}}
@keyframes restBrightness{50%{filter:sepia(1) saturate(2) brightness(.95)}}
@keyframes chosenGlow{to{transform:translate(-50%,-50%) scale(5);opacity:1}}
@keyframes chosenLine{from{opacity:.8}to{opacity:1;transform:translate(-50%,-50%) scaleX(3.5)}}
@media(prefers-reduced-motion:reduce){.petal-landed *{animation-duration:4s!important}}


.final-petal-slot{position:relative;width:100%;height:118px;margin:0 auto;overflow:visible;isolation:isolate}
.final-petal-slot #restingPetal{z-index:3}
.final-petal-slot #restingPetal:focus-visible{outline:2px solid #d8a568;outline-offset:5px}
.final-petal-slot .petal-aura,.final-petal-slot .petal-contact{pointer-events:none}
.final-petal-slot .petal-unlit .petal-aura{display:none}
/* One continuous black atmosphere after the ten-level count. */
.completion-black-curtain{position:fixed;inset:0;z-index:3;background:#000;opacity:0;pointer-events:none;transition:opacity 1.2s ease}
.completion-black-curtain.visible{opacity:1}
html.completion-ambient body{background:#000!important;background-image:none!important}
html.completion-ambient body::before{display:none}
html.completion-ambient .completion-screen,html.completion-ambient .completion-stage{background:#000!important;background-image:none!important}
html.completion-ambient .completion-stage::before{background:none!important;opacity:0!important}
html.completion-ambient .completion-intertitle{background:#000}
html.completion-ambient .boat-ending-video{background:#000}
@property --completion-center-mask{syntax:"<number>";inherits:false;initial-value:1}
#petal-atmosphere{--completion-center-mask:1;transition:--completion-center-mask 1.2s ease}
html.completion-entering #petal-atmosphere,
html.completion-ambient #petal-atmosphere{
  --completion-center-mask:0;
  z-index:100004!important;
  visibility:visible!important;
  pointer-events:none!important;
  -webkit-mask-image:linear-gradient(to right,#000 0%,#000 13%,rgba(0,0,0,var(--completion-center-mask)) 36%,rgba(0,0,0,var(--completion-center-mask)) 64%,#000 87%,#000 100%)!important;
  mask-image:linear-gradient(to right,#000 0%,#000 13%,rgba(0,0,0,var(--completion-center-mask)) 36%,rgba(0,0,0,var(--completion-center-mask)) 64%,#000 87%,#000 100%)!important;
}
html.completion-entering #petal-atmosphere::before,
html.completion-ambient #petal-atmosphere::before{display:none!important}
@media(prefers-reduced-motion:reduce){.completion-black-curtain{transition:none!important}}

/* v7: continuous, position-locked ending. */
html.completion-ambient body,html.completion-ambient #app{background:#000!important;background-image:none!important}
html.completion-ambient body::before{display:none!important}
html.completion-ambient .completion-screen,html.completion-ambient .completion-stage{background:#000!important;background-image:none!important}
html.completion-ambient .completion-stage::before{background:none!important;opacity:0!important}
html.completion-ambient .completion-intertitle{background:#000!important}
html.completion-ambient .boat-ending-video{background:#000!important}
.completion-black-curtain{position:fixed;inset:0;z-index:100001;background:#000;opacity:0;pointer-events:none;transition:opacity 1.2s ease}
.completion-black-curtain.visible{opacity:1}
.final-petal-slot.completion-flight{overflow:visible!important;isolation:auto!important;pointer-events:none!important}
.final-petal-slot.completion-flight #restingPetal{pointer-events:none!important}
html.completion-ambient #petal-atmosphere{
  z-index:100004!important;visibility:visible!important;pointer-events:none!important;
  -webkit-mask-image:linear-gradient(to right,#000 0%,#000 13%,transparent 36%,transparent 64%,#000 87%,#000 100%)!important;
  mask-image:linear-gradient(to right,#000 0%,#000 13%,transparent 36%,transparent 64%,#000 87%,#000 100%)!important;
}
html.completion-ambient #petal-atmosphere::before{display:none!important}
html.completion-ambient .completion-intertitle{z-index:100003}
@media(prefers-reduced-motion:reduce){.completion-black-curtain{transition:none!important}}

/* v9: hold the completed count on a distinctly illuminated 10. */
.completion-marker.is-complete{opacity:1}
.completion-marker.is-complete i{
  background:#ffe0a8;
  border-color:#ffe7c2;
  box-shadow:0 0 8px 2px rgba(255,225,174,.95),0 0 24px 5px rgba(243,154,67,.75),0 0 44px 9px rgba(216,120,36,.32);
  transform:scale(1.55);
  animation:completionTenGlow 2.2s ease-in-out infinite;
}
.completion-marker.is-complete b{
  color:#ffe7c2;
  text-shadow:0 0 8px rgba(255,225,174,.95),0 0 20px rgba(243,154,67,.8);
  animation:completionTenText 2.2s ease-in-out infinite;
}
@keyframes completionTenGlow{
  0%,100%{transform:scale(1.55);filter:brightness(1)}
  50%{transform:scale(1.85);filter:brightness(1.35)}
}
@keyframes completionTenText{
  0%,100%{text-shadow:0 0 8px rgba(255,225,174,.95),0 0 20px rgba(243,154,67,.8)}
  50%{text-shadow:0 0 12px rgba(255,239,209,1),0 0 28px rgba(243,154,67,1)}
}
@media(prefers-reduced-motion:reduce){
  .completion-marker.is-complete i,.completion-marker.is-complete b{animation:none!important}
}

/* Restored Bubu & Dudu video: an opaque, touch-safe modal. */
.easter-egg{
  z-index:100010!important;
  background:#000!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  box-sizing:border-box;
  padding:calc(72px + env(safe-area-inset-top,0px)) 20px calc(24px + env(safe-area-inset-bottom,0px));
  overflow:hidden;
  overscroll-behavior:contain;
  -webkit-tap-highlight-color:transparent;
}
.easter-egg.show{opacity:1;pointer-events:auto}
.easter-inner{
  position:relative;
  width:min(100%,430px);
  max-width:100%;
  max-height:100%;
  padding:0!important;
  margin:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  background:#000!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  text-align:center;
}
#easterVideo{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:calc(100dvh - 180px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  aspect-ratio:480 / 852;
  object-fit:contain;
  background:#000;
  border-radius:12px;
}
.easter-close{
  position:fixed!important;
  top:calc(16px + env(safe-area-inset-top,0px));
  right:calc(16px + env(safe-area-inset-right,0px));
  z-index:100011;
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  min-width:48px;
  min-height:48px;
  padding:0!important;
  margin:0!important;
  border:1px solid rgba(218,176,125,.38)!important;
  border-radius:50%;
  background:#17120e!important;
  color:#f3e7d3!important;
  font:400 34px/1 Georgia,serif!important;
  cursor:pointer;
  touch-action:manipulation;
}
.easter-close:focus-visible{
  outline:2px solid #dab07d;
  outline-offset:4px;
}
.secret-heart,.secret-heart *,
#restingPetal,#restingPetal *{
  -webkit-user-select:none!important;
  user-select:none!important;
  -webkit-touch-callout:none!important;
  -webkit-user-drag:none!important;
}
.secret-heart{touch-action:manipulation!important;cursor:pointer}
#restingPetal,#restingPetal *{touch-action:manipulation}