:root{--bg: #140a24;--bg-2: #1e0f38;--orchid: #b06ad6;--orchid-soft: #d7a8ef;--orchid-deep: #7a3aa8;--rose: #ff9fc4;--gold: #f4d58d;--cream: #f7f0ff;--ink: #efe6ff;--muted: #b9a7d6;--glass: rgba(255, 255, 255, .06);--glass-line: rgba(255, 255, 255, .12);--shadow: 0 20px 60px rgba(0, 0, 0, .45);font-family:Nunito,system-ui,-apple-system,sans-serif;font-optical-sizing:auto}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body{min-height:100%;background:var(--bg);color:var(--ink);overflow-x:hidden;scroll-snap-type:y proximity}body{background:radial-gradient(120% 80% at 20% -10%,rgba(176,106,214,.35),transparent 60%),radial-gradient(120% 80% at 90% 0%,rgba(255,159,196,.18),transparent 55%),radial-gradient(140% 90% at 50% 120%,rgba(122,58,168,.4),transparent 60%),linear-gradient(180deg,var(--bg),var(--bg-2));background-attachment:fixed}#app{min-height:100dvh;position:relative}.stars{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0}.star{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;opacity:.6;animation:twinkle var(--d, 4s) ease-in-out infinite}@keyframes twinkle{0%,to{opacity:.15;transform:scale(.8)}50%{opacity:.9;transform:scale(1.3)}}.gate{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:32px 24px calc(32px + env(safe-area-inset-bottom));text-align:center;position:relative;z-index:2}.lock-badge{position:relative;width:92px;height:92px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff,var(--cream) 60%,var(--orchid-soft) 130%);box-shadow:var(--shadow),0 0 40px #b06ad68c;font-size:44px;animation:heartbeat 1.8s ease-in-out infinite}.lock-badge:before,.lock-badge:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;pointer-events:none;border:1.5px solid var(--orchid-soft);opacity:0;animation:ringPulse 1.8s ease-out infinite}.lock-badge:after{animation-delay:.5s}@keyframes heartbeat{0%,to{transform:scale(1)}14%{transform:scale(1.14)}28%{transform:scale(1)}42%{transform:scale(1.1)}60%{transform:scale(1)}}@keyframes ringPulse{0%{transform:scale(.9);opacity:.55}to{transform:scale(1.55);opacity:0}}.gate h1{font-family:Playfair Display,serif;font-weight:600;font-size:clamp(1.6rem,6.5vw,2.3rem);line-height:1.22;letter-spacing:-.015em;max-width:15ch;background:linear-gradient(120deg,var(--cream),var(--orchid-soft));-webkit-background-clip:text;background-clip:text;color:transparent}.gate .hint{color:var(--muted);font-size:clamp(.66rem,3.3vw,.88rem);white-space:nowrap;max-width:100%}.gate form{width:100%;max-width:340px;display:flex;flex-direction:column;gap:14px}.field{position:relative}.gate input{width:100%;padding:17px 20px;border-radius:16px;border:1px solid var(--glass-line);border-top-color:#fff3;background:var(--glass);color:var(--ink);font-size:1.05rem;text-align:center;outline:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:border-color .25s,box-shadow .25s}.gate input::placeholder{color:#b9a7d699}.gate input:focus{border-color:var(--orchid);box-shadow:0 0 0 4px #b06ad62e}.gate button{padding:16px 22px;border:none;border-top:1px solid rgba(255,255,255,.4);border-radius:16px;font-size:1.05rem;font-weight:700;font-family:inherit;color:#2a0f3d;background:linear-gradient(120deg,var(--orchid-soft),var(--rose));box-shadow:0 12px 30px #b06ad666;cursor:pointer;transition:transform .1s ease-out,box-shadow .2s,opacity .2s}.gate button:active{transform:scale(.97);transition-duration:.05s}.gate button:disabled{opacity:.6;cursor:default}.gate .err{color:var(--rose);font-size:.88rem;min-height:1.1em;opacity:0;transition:opacity .2s}.gate .err.show{opacity:1}.shake{animation:shake .4s}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-8px)}40%,80%{transform:translate(8px)}}.gate .foot{color:var(--muted);font-size:.78rem;opacity:.7}.hearts-drift{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:1;overflow:hidden}.drift{position:absolute;bottom:-40px;font-size:var(--s, 18px);opacity:0;animation:rise var(--t, 9s) linear infinite;animation-delay:var(--delay, 0s)}@keyframes rise{0%{transform:translateY(0) translate(0) rotate(0);opacity:0}10%{opacity:.8}90%{opacity:.7}to{transform:translateY(-108dvh) translate(var(--x, 20px)) rotate(40deg);opacity:0}}.reveal{position:relative;z-index:2;max-width:560px;margin:0 auto;padding:0 20px 80px;opacity:0;animation:fadeUp .9s ease forwards}@keyframes fadeUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}.hero{min-height:92dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:18px;padding-top:env(safe-area-inset-top);scroll-snap-align:center}.hero .kicker{font-family:Caveat,cursive;font-size:1.6rem;color:var(--rose);letter-spacing:.5px}.hero h1{font-family:Playfair Display,serif;font-weight:600;font-size:clamp(2.6rem,13vw,4.5rem);line-height:1.02;letter-spacing:-.03em;background:linear-gradient(120deg,#fff,var(--orchid-soft) 60%,var(--rose));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 30px rgba(176,106,214,.45))}.hero .age{display:inline-flex;align-items:center;gap:8px;margin-top:4px;padding:8px 18px;border-radius:999px;border:1px solid var(--glass-line);background:var(--glass);color:var(--orchid-soft);font-weight:700;letter-spacing:.5px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.hero .sub{color:var(--muted);font-size:1rem;max-width:24ch;line-height:1.6}.scroll-cue{margin-top:10px;color:var(--muted);font-size:.8rem;display:flex;flex-direction:column;align-items:center;gap:6px;animation:bob 2s ease-in-out infinite}@keyframes bob{0%,to{transform:translateY(0);opacity:.6}50%{transform:translateY(6px);opacity:1}}section.block{margin-top:46px;opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s ease}section.block.in{opacity:1;transform:translateY(0)}section.block.gift-section{opacity:1;transform:none;min-height:92dvh;display:flex;flex-direction:column;justify-content:center;scroll-snap-align:center;scroll-snap-stop:always}section.block.locked{display:none}.section-title{font-family:Playfair Display,serif;font-size:1.5rem;font-weight:600;letter-spacing:-.01em;margin-bottom:16px;color:var(--cream);display:flex;align-items:center;gap:10px}.section-title:before{content:"";width:26px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--orchid),transparent)}.card{background:var(--glass);border:1px solid var(--glass-line);border-top-color:#ffffff38;border-radius:22px;padding:22px;-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);box-shadow:var(--shadow)}.gift-wrap{display:flex;flex-direction:column;align-items:center;gap:14px}.gift-stage{position:relative;width:100px;height:100px;display:grid;place-items:center}.gift-target{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;transition:opacity .4s ease,transform .4s ease}.gift-target:before,.gift-target:after{content:"";position:absolute;top:8px;right:8px;bottom:8px;left:8px;border-radius:50%;pointer-events:none;border:1.5px solid var(--orchid-soft);opacity:0;animation:ringPulse 2.2s ease-out infinite}.gift-target:after{animation-delay:.75s}.gift-target.done:before,.gift-target.done:after{animation:none;opacity:0}.gift-target.gone{opacity:0;transform:scale(.55) translateY(-8px);pointer-events:none}.gift{font-size:76px;cursor:pointer;filter:drop-shadow(0 12px 24px rgba(176,106,214,.5));animation:giftPulse 2.4s ease-in-out infinite;transition:transform .1s ease-out;-webkit-user-select:none;user-select:none}.gift:active{animation-play-state:paused;transform:scale(.9);transition-duration:.05s}@keyframes giftPulse{0%,to{transform:scale(1) rotate(-2deg)}50%{transform:scale(1.08) rotate(2deg)}}.gift.shaking{animation:giftShake .5s ease-in-out}@keyframes giftShake{0%,to{transform:rotate(0) scale(1)}20%{transform:rotate(-10deg) scale(1.03)}40%{transform:rotate(9deg) scale(1.05)}60%{transform:rotate(-7deg) scale(1.07)}80%{transform:rotate(5deg) scale(1.05)}}.gift.opened{animation:pop .55s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.5) rotate(8deg)}to{transform:scale(1.15) rotate(0)}}.gift-hint{color:var(--muted);font-size:.9rem;display:flex;align-items:center;gap:6px;transition:opacity .3s}.gift-hint b{color:var(--orchid-soft)}.tap-cue{display:inline-block;animation:tapBounce 1.3s ease-in-out infinite}@keyframes tapBounce{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(5px) rotate(-10deg)}}.note-wrap{position:relative;width:100%;display:flex;flex-direction:column;align-items:center}.envelope{position:absolute;top:50%;left:50%;z-index:3;width:92px;height:62px;margin:-31px 0 0 -46px;perspective:320px;opacity:0;transform:translateY(18px) scale(.4);transition:opacity .35s ease,transform .55s cubic-bezier(.34,1.4,.6,1)}.envelope.in{opacity:1;transform:translateY(0) scale(1)}.envelope.hide{opacity:0;transform:translateY(-18px) scale(.7);transition:opacity .45s ease,transform .45s ease}.envelope-body{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:8px;background:linear-gradient(160deg,var(--orchid-soft),var(--orchid-deep));box-shadow:var(--shadow)}.envelope-body:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:8px;background:linear-gradient(140deg,rgba(255,255,255,.35),transparent 55%)}.envelope-flap{position:absolute;top:0;left:0;width:100%;height:52%;background:linear-gradient(160deg,var(--orchid),var(--orchid-deep));clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top center;transform:rotateX(0);transition:transform .55s cubic-bezier(.4,0,.2,1);border-radius:8px 8px 0 0}.envelope-seal{position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);font-size:20px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));transition:opacity .25s}.envelope.open .envelope-flap{transform:rotateX(178deg)}.envelope.open .envelope-seal{opacity:0}.letter{width:100%;max-width:440px;margin-top:-6px;display:none}.letter.show{display:block}.paper{position:relative;color:#46264f;border-radius:4px 4px 10px 10px;padding:clamp(30px,7vw,40px) clamp(22px,6vw,30px) clamp(26px,6vw,34px);min-height:300px;font-size:clamp(.92rem,3.7vw,1.05rem);line-height:1.8;transform-origin:top center;background:radial-gradient(120% 60% at 50% -10%,rgba(176,106,214,.1),transparent 60%),repeating-linear-gradient(180deg,transparent 0 33px,rgba(122,58,168,.09) 33px 34px),linear-gradient(175deg,#fffdf7,#fdf3ff 55%,#f5e7ff);box-shadow:0 30px 60px #12062680,0 2px #fffc inset,0 -14px 30px #7a3aa81f inset;opacity:0;transform:scale(.14) translateY(-30px)}.paper:before{content:"💜";position:absolute;top:12px;left:50%;transform:translate(-50%);font-size:15px;opacity:.5}.paper:after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;border-radius:0 0 10px 10px;background:linear-gradient(180deg,transparent,rgba(122,58,168,.12))}.letter.show .paper{animation:growPaper 1.1s cubic-bezier(.22,.9,.24,1) .4s forwards}@keyframes growPaper{0%{opacity:0;transform:scale(.14) translateY(-30px) rotate(-4deg)}35%{opacity:1;transform:scale(.42) translateY(-6px) rotate(2deg)}70%{opacity:1;transform:scale(1.03) translateY(3px) rotate(0)}to{opacity:1;transform:scale(1) translateY(0) rotate(0)}}.paper p{margin-bottom:15px;position:relative;min-height:1.8em}.type-caret{display:inline-block;width:2px;height:1.05em;margin-left:1px;vertical-align:-.15em;background:var(--orchid-deep);border-radius:1px;animation:caretBlink .9s steps(1) infinite}@keyframes caretBlink{0%,50%{opacity:1}50.01%,to{opacity:0}}.paper .sign{font-family:Caveat,cursive;font-size:1.75rem;color:var(--orchid-deep);text-align:right;margin-top:10px;min-height:1.4em}.paper .sign .type-caret{background:var(--orchid-deep)}@media (prefers-reduced-motion: reduce){.letter.show .paper{animation:none;opacity:1;transform:none}.type-caret{display:none}}.reasons{display:grid;gap:12px}.reason{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:18px;background:var(--glass);border:1px solid var(--glass-line);border-top-color:#fff3;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.reason .ic{font-size:1.5rem;line-height:1.4;flex-shrink:0}.reason .tx{font-size:.98rem;line-height:1.55;color:var(--ink)}.reason .tx b{color:var(--orchid-soft);font-weight:700}.reason{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}.block.in .reason{opacity:1;transform:none}.block.in .reason:nth-child(1){transition-delay:.05s}.block.in .reason:nth-child(2){transition-delay:.13s}.block.in .reason:nth-child(3){transition-delay:.21s}.block.in .reason:nth-child(4){transition-delay:.29s}.block.in .reason:nth-child(5){transition-delay:.37s}.block.in .reason:nth-child(6){transition-delay:.45s}.block.in .reason:nth-child(7){transition-delay:.53s}.block.in .reason:nth-child(8){transition-delay:.61s}.block.in .reason:nth-child(9){transition-delay:.69s}.block.in .reason:nth-child(10){transition-delay:.77s}.block.in .reason:nth-child(11){transition-delay:.85s}.block.in .reason:nth-child(12){transition-delay:.93s}.song{text-align:center}.song .lyrics{font-family:Caveat,cursive;font-size:1.45rem;line-height:1.7;color:var(--cream);white-space:pre-line}.song .verse-label{color:var(--orchid-soft);font-family:Nunito,sans-serif;font-size:.78rem;letter-spacing:2px;text-transform:uppercase;margin:18px 0 4px}.art-frame{display:flex;justify-content:center;padding:8px}.art-frame svg{width:100%;max-width:320px;height:auto}.art-cap{text-align:center;color:var(--muted);font-family:Caveat,cursive;font-size:1.2rem;margin-top:8px}.final{text-align:center;margin-top:56px}.final h2{font-family:Playfair Display,serif;font-weight:600;font-size:1.7rem;line-height:1.35;letter-spacing:-.01em;background:linear-gradient(120deg,#fff,var(--orchid-soft));-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:14px}.final p{color:var(--muted);line-height:1.7}.final .heart-btn{margin-top:22px;padding:15px 30px;border:none;border-top:1px solid rgba(255,255,255,.4);border-radius:999px;font-family:inherit;font-size:1rem;font-weight:700;color:#2a0f3d;background:linear-gradient(120deg,var(--rose),var(--orchid-soft));box-shadow:0 14px 34px #ff9fc459;cursor:pointer;transition:transform .1s ease-out}.final .heart-btn:active{transform:scale(.95);transition-duration:.05s}.tiny-note{margin-top:40px;text-align:center;color:var(--muted);font-size:.78rem;opacity:.6}.mute-btn{position:fixed;top:calc(16px + env(safe-area-inset-top));right:16px;z-index:30;width:44px;height:44px;border:1px solid var(--glass-line);border-top-color:#fff3;border-radius:50%;background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:1.15rem;color:var(--ink);cursor:pointer;display:grid;place-items:center;box-shadow:var(--shadow);transition:transform .1s ease-out}.mute-btn:active{transform:scale(.9);transition-duration:.05s}#confetti{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:40}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}section.block{opacity:1;transform:none}}@media (prefers-reduced-transparency: reduce){.card,.reason,.gate input,.hero .age,.mute-btn{-webkit-backdrop-filter:none;backdrop-filter:none;background:#1e0f38eb}}@media (prefers-contrast: more){.card,.reason,.gate input,.hero .age,.mute-btn{border-color:#fff6}.gate .hint,.hero .sub,.final p{color:var(--cream)}}