:root{--ink:#fff8f2;--muted:#d7c5c8;--wine:#7e233e;--rose:#e99aae;--gold:#d9b36c;--dark:#12070d;--panel:rgba(47,17,29,.82);--line:rgba(255,231,220,.14);--ok:#8fd3a8;--bad:#ff9aa9;--shadow:0 24px 70px rgba(0,0,0,.42)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{min-height:100%;background:var(--dark);overflow-x:hidden}
body{margin:0;min-height:100vh;min-height:100svh;color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.65;background:radial-gradient(circle at 82% 8%,rgba(126,35,62,.38),transparent 34rem),linear-gradient(145deg,#11070c,#250c17 60%,#14070d);overflow-x:hidden;scroll-padding-bottom:calc(1rem + env(safe-area-inset-bottom))}
button,input{font:inherit}
button{touch-action:manipulation}
.ambient{position:fixed;border-radius:50%;filter:blur(80px);opacity:.18;pointer-events:none}.ambient-a{width:18rem;height:18rem;background:#b9345f;left:-8rem;top:30%}.ambient-b{width:14rem;height:14rem;background:#c89b4b;right:-8rem;bottom:5%}
.mission-bar{position:sticky;z-index:10;top:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.25rem 1rem;max-width:760px;margin:auto;padding:calc(1rem + env(safe-area-inset-top)) calc(1.2rem + env(safe-area-inset-right)) .8rem calc(1.2rem + env(safe-area-inset-left));background:linear-gradient(180deg,rgba(18,7,13,.97),rgba(18,7,13,.78));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.bar-copy{display:flex;align-items:baseline;gap:.65rem}.eyebrow{color:var(--gold);font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.bar-copy>span:last-child,#percentLabel{font-size:.82rem;color:var(--muted)}.progress-track{grid-column:1/-1;height:4px;background:rgba(255,255,255,.1);overflow:hidden}.progress-track span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--wine),var(--rose),var(--gold));transition:width .5s ease}
main{width:min(100% - 1.5rem,720px);margin:clamp(1rem,5vw,3rem) auto 1rem;min-height:72vh}
.screen{animation:reveal .45s ease}.card{position:relative;padding:clamp(1.3rem,5vw,2.5rem);border:1px solid var(--line);border-radius:1.35rem;background:linear-gradient(145deg,rgba(61,22,36,.9),rgba(31,12,21,.9));box-shadow:var(--shadow);overflow:hidden}.card:before{content:"";position:absolute;inset:0;border-top:1px solid rgba(255,255,255,.12);pointer-events:none}
.kicker{display:flex;align-items:center;gap:.6rem;color:var(--gold);font-size:.72rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase}.kicker:before{content:"";width:2.2rem;height:1px;background:var(--gold)}
h1,h2,h3{font-family:Georgia,Cambria,serif;line-height:1.08;margin:.75rem 0 1rem;text-wrap:balance}h1{font-size:clamp(2.35rem,11vw,5rem);letter-spacing:-.035em}h2{font-size:clamp(2rem,8vw,3.7rem);letter-spacing:-.025em}h3{font-size:1.35rem}
p{margin:.7rem 0}.lead{font-size:clamp(1.05rem,3.5vw,1.25rem);color:#f5e8e6}.muted{color:var(--muted)}.signature{color:var(--rose);font-family:Georgia,serif;font-style:italic;font-size:1.2rem}.stack>*+*{margin-top:1rem}.prose p{white-space:pre-line}
.btn-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem}.btn{min-height:48px;border:1px solid transparent;border-radius:.75rem;padding:.78rem 1.15rem;font-weight:750;cursor:pointer;color:#251019;background:linear-gradient(135deg,#ffe4e7,#e4bd78);box-shadow:0 9px 24px rgba(0,0,0,.24);transition:transform .15s,filter .15s}.btn:hover{filter:brightness(1.07);transform:translateY(-2px)}.btn:active{transform:translateY(0)}.btn.secondary{color:var(--ink);background:rgba(255,255,255,.07);border-color:var(--line);box-shadow:none}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn:focus-visible,input:focus-visible,.reward:focus-visible,.gift-box:focus-visible,.memory-photo:focus-visible,.modal-close:focus-visible,.reset-link:focus-visible{outline:3px solid #ffd48c;outline-offset:3px}
label{display:block;font-weight:700;margin:1.2rem 0 .45rem}input{width:100%;min-height:50px;padding:.8rem 1rem;color:var(--ink);background:rgba(7,3,5,.48);border:1px solid rgba(255,255,255,.22);border-radius:.7rem;scroll-margin-top:7rem}input::placeholder{color:#af9ca0}.feedback{min-height:1.6rem;padding:.7rem 0;color:var(--muted)}.feedback.ok{color:var(--ok)}.feedback.bad{color:var(--bad)}.hint{padding:.8rem 1rem;border-left:2px solid var(--gold);background:rgba(217,179,108,.07);color:#f3dfbb}
.step-dots{display:flex;gap:.4rem;margin:1rem 0}.step-dots span{width:1.6rem;height:3px;background:rgba(255,255,255,.14)}.step-dots .active{background:var(--gold)}
.media-frame{position:relative;display:grid;place-items:center;min-height:220px;margin:1.2rem 0;border:1px dashed rgba(255,255,255,.22);border-radius:1rem;background:#0b0709;overflow:hidden}.media-frame video{display:block;width:100%;max-height:58vh}.media-placeholder{padding:2rem;text-align:center;color:var(--muted)}
.intro-0933{min-height:68vh;display:grid;place-items:center}.intro-card{text-align:center;width:100%;padding-block:clamp(2.4rem,10vw,5rem)}.intro-time{display:block;font-family:Georgia,Cambria,serif;font-size:clamp(4.6rem,23vw,8.5rem);line-height:.9;letter-spacing:-.07em;color:var(--gold);text-shadow:0 0 38px rgba(217,179,108,.2);animation:introReveal .7s ease both}.intro-line{max-width:34rem;margin:1.15rem auto 0;color:#f5e8e6;font-family:Georgia,Cambria,serif;font-size:clamp(1.05rem,4vw,1.3rem);opacity:0;animation:introReveal .65s ease forwards}.intro-delay-1{animation-delay:.45s}.intro-delay-2{animation-delay:.9s}.intro-delay-3{animation-delay:1.35s;color:var(--rose);font-size:clamp(1.25rem,5vw,1.6rem)}.intro-action{margin-top:1.8rem;opacity:0;animation:introReveal .65s 1.75s ease forwards}.video-warning{padding:1rem;border:1px solid rgba(217,179,108,.4);background:rgba(217,179,108,.07);color:#f6dfb6}.video-confirm{padding:1rem 0}.music-controls{display:flex;flex-wrap:wrap;align-items:center;gap:.65rem 1rem;margin:1rem 0;padding:.8rem;border:1px solid var(--line);border-radius:.85rem;background:rgba(255,255,255,.035)}.music-controls label{display:flex;align-items:center;gap:.55rem;margin:0;color:var(--muted);font-size:.78rem}.music-controls small{width:100%;color:var(--gold)}.volume-control{width:7rem;min-height:30px;padding:0;accent-color:var(--gold)}.message-0933{margin:1rem 0 1.5rem;padding:clamp(1rem,4vw,1.5rem);border:1px solid rgba(217,179,108,.34);border-radius:1rem;background:linear-gradient(145deg,rgba(217,179,108,.08),rgba(126,35,62,.14))}.message-0933 h3{color:var(--gold)}.message-bridge{margin:1.5rem 0 2rem;padding-left:1rem;border-left:2px solid var(--rose);font-family:Georgia,serif;font-style:italic;white-space:pre-line;color:#f2dfe3}
.clue-number{font:italic 4rem/1 Georgia;color:rgba(233,154,174,.25);position:absolute;right:1rem;top:1rem}.reward-grid{display:grid;gap:.8rem}.reward{width:100%;min-height:130px;text-align:left;padding:1.1rem;color:var(--ink);border:1px solid var(--line);border-radius:1rem;background:rgba(255,255,255,.045);cursor:pointer;transition:.25s}.reward:hover,.reward.open{border-color:rgba(217,179,108,.55);background:rgba(126,35,62,.2)}.reward p{display:none;color:var(--muted)}.reward.open p{display:block;animation:reveal .3s ease}
.math-challenge{margin:1.3rem 0;padding:1.2rem .5rem;text-align:center;white-space:nowrap;border:1px solid rgba(217,179,108,.38);background:rgba(7,3,5,.38);font:700 clamp(1.45rem,8.5vw,3.4rem)/1.1 Georgia,serif;color:var(--gold);letter-spacing:0}.date-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem;margin:1.3rem 0}.date-cards span{display:grid;place-items:center;min-height:74px;border:1px solid var(--line);background:rgba(255,255,255,.055);font:700 clamp(1.7rem,8vw,2.5rem)/1 Georgia,serif;color:var(--gold);transform:rotate(-1deg)}.date-cards span:nth-child(2){transform:rotate(1.2deg);color:var(--rose)}.date-cards span:nth-child(3){transform:rotate(-.4deg)}.available-dates{text-align:center;color:var(--muted)}
.gift-grid{display:grid;gap:.85rem;margin:1.4rem 0}.gift-box{position:relative;isolation:isolate;width:100%;min-height:150px;overflow:hidden;padding:1.25rem;color:var(--ink);border:1px solid rgba(217,179,108,.32);border-radius:1rem;background:linear-gradient(145deg,rgba(126,35,62,.46),rgba(31,12,21,.88));cursor:pointer;text-align:left;transition:transform .25s,border-color .25s,opacity .25s}.gift-box:before,.gift-box:after{content:"";position:absolute;z-index:-1;background:rgba(217,179,108,.14)}.gift-box:before{width:2.6rem;inset:0 auto 0 50%;transform:translateX(-50%)}.gift-box:after{height:2.6rem;inset:50% 0 auto;transform:translateY(-50%)}.gift-box strong,.gift-box span,.gift-box small{position:relative;z-index:1;display:block}.gift-box strong{font:700 1.25rem/1.15 Georgia,serif}.gift-box>span:not(.gift-ribbon){margin-top:.7rem;color:var(--muted)}.gift-box small{margin-top:.75rem;color:var(--gold)}.gift-box:hover:not(:disabled){transform:translateY(-3px);border-color:var(--gold)}.gift-box.chosen,.gift-box.open{border-color:rgba(217,179,108,.75);background:linear-gradient(145deg,rgba(126,35,62,.68),rgba(49,19,32,.95))}.gift-box.lost{opacity:.46;filter:saturate(.45)}.gift-box:disabled{cursor:default}.dramatic-message,.reveal-gifts{margin:1.25rem 0;padding:1rem;border-left:2px solid var(--gold);background:rgba(7,3,5,.25)}.dramatic-dots{display:block;color:var(--rose);font-size:1.5rem;letter-spacing:.3em;animation:pulse 1s ease-in-out infinite}
.waiting{width:72px;height:72px;margin:1.5rem auto;border:1px solid rgba(233,154,174,.28);border-radius:50%;position:relative}.waiting:before{content:"♥";position:absolute;color:var(--rose);font-size:1.3rem;left:50%;top:50%;transform:translate(-50%,-50%)}.waiting:after{content:"";position:absolute;inset:-1px;border:2px solid transparent;border-top-color:var(--gold);border-radius:50%;animation:spin 2.4s linear infinite}
.memory-mosaic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:clamp(.7rem,3vw,1.15rem);margin:1.8rem 0;padding:.2rem}.memory-photo{appearance:none;display:block;width:100%;min-width:0;margin:0;padding:.35rem;border:0;background:#f3e6d6;box-shadow:0 14px 28px rgba(0,0,0,.38);cursor:zoom-in;opacity:0;transform:translateY(18px) rotate(var(--rotation,-1deg));transition:opacity .5s ease,transform .5s ease,box-shadow .2s}.memory-photo.visible{opacity:1;transform:translateY(0) rotate(var(--rotation,-1deg))}.memory-photo:hover{z-index:2;box-shadow:0 18px 36px rgba(0,0,0,.48)}.photo-paper{position:relative;display:block;width:100%;aspect-ratio:4/5;overflow:hidden;background:#1b1014}.memory-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.photo-missing{display:grid;place-items:center;position:absolute;inset:0;padding:.7rem;color:var(--muted);background:#1b1014;text-align:center}.mosaic-item:nth-child(6n+1){--rotation:-1.3deg}.mosaic-item:nth-child(6n+2){--rotation:1deg;margin-top:1rem}.mosaic-item:nth-child(6n+3){--rotation:.5deg}.mosaic-item:nth-child(6n+4){--rotation:-.7deg;margin-top:-.25rem}.mosaic-item:nth-child(6n+5){--rotation:1.2deg}.mosaic-item:nth-child(6n){--rotation:-.5deg;margin-top:.8rem}.mosaic-item:nth-child(7),.mosaic-item:nth-child(14),.mosaic-item:nth-child(21){grid-column:1/-1;width:calc(100% - 1rem);justify-self:center;--rotation:.35deg}.mosaic-item:nth-child(7) .photo-paper,.mosaic-item:nth-child(14) .photo-paper,.mosaic-item:nth-child(21) .photo-paper{aspect-ratio:16/10}.mosaic-ending{opacity:0;transform:translateY(15px);transition:.45s ease;margin-top:1.5rem}.mosaic-ending.visible{opacity:1;transform:none}.photo-modal{position:fixed;z-index:50;inset:0;display:grid;place-items:center;padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));background:rgba(7,3,5,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.photo-modal-panel{position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto auto;width:min(100%,760px);height:min(92svh,850px);height:min(92dvh,850px);max-height:calc(100dvh - 2rem);overflow:auto;padding:2.8rem .8rem .8rem;border:1px solid var(--line);background:#160b10;box-shadow:var(--shadow)}.photo-modal img{display:block;width:100%;height:100%;min-height:0;object-fit:contain}.photo-modal p{margin:.7rem 0;color:var(--ink);font-family:Georgia,serif;text-align:center}.modal-close{position:absolute;top:.4rem;right:.4rem;display:grid;place-items:center;width:44px;height:44px;border:0;background:transparent;color:var(--ink);font-size:2rem;cursor:pointer}.modal-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.5rem}.modal-nav .btn:last-child{justify-self:end}.modal-nav span{color:var(--muted);font-size:.8rem;white-space:nowrap}.modal-open{overflow:hidden}
.future-block,.final-part{padding:1rem 0;font-family:Georgia,serif;font-size:clamp(1.08rem,4vw,1.35rem);white-space:pre-line}.mission-stamp{border:1px solid var(--gold);color:var(--gold);padding:.8rem;text-align:center;letter-spacing:.16em;font-weight:800;transform:rotate(-1deg);margin:2rem 0}
footer{text-align:center;padding:1rem 1rem calc(2rem + env(safe-area-inset-bottom))}.reset-link{border:0;background:none;color:#b29ba1;font-size:.72rem;text-decoration:underline;cursor:pointer;padding:.8rem}
.live-region{position:fixed;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.confetti-layer{position:fixed;inset:0;pointer-events:none;z-index:30}.confetti{position:absolute;top:-20px;width:7px;height:13px;background:var(--c);animation:fall var(--d) ease-in forwards}.heart{position:fixed;color:rgba(233,154,174,.2);bottom:-2rem;animation:float var(--d) linear infinite;pointer-events:none}
@keyframes reveal{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes fall{to{transform:translate(var(--x),105vh) rotate(720deg);opacity:.1}}@keyframes float{to{transform:translateY(-115vh) rotate(18deg);opacity:0}}@keyframes spin{to{transform:rotate(360deg)}}
@keyframes introReveal{from{opacity:0;transform:translateY(10px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}@keyframes pulse{50%{opacity:.35}}
@media(min-width:640px){.reward-grid,.gift-grid{grid-template-columns:repeat(3,1fr)}.mission-bar{padding-top:1.2rem}.card{border-radius:1.7rem}.memory-mosaic{gap:1.35rem}.memory-photo{padding:.5rem}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.heart{display:none}}