:root{--bg:#ffe8ef;--bg-light:#fffafb;--bg-deep:#ffd6e2;--ink:#5a1f38;--ink-soft:#5a1f38c7;--ink-faint:#5a1f3894;--blush:#ffc2d1;--accent:#e8457a;--rose:#ff6f91;--rose-deep:#c2185b;--gold:#f3c26b;--paper:#fffdfd;--paper-ink:#4a2233;--font-display:"Cormorant Garamond", Georgia, serif;--font-script:"Dancing Script", cursive;--font-ui:"Manrope", system-ui, sans-serif;--ease-out:cubic-bezier(.22, 1, .36, 1)}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:radial-gradient(ellipse at 50% 35%, var(--bg-light) 0%, var(--bg) 55%, var(--bg-deep) 100%);background-color:var(--bg);color:var(--ink);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overflow:hidden}button{font:inherit}.app{width:100%;height:100dvh;position:relative;overflow:hidden}.stage{position:absolute;inset:0}.stage__canvas{touch-action:none;position:absolute;inset:0}.stage__canvas--soft{pointer-events:none;opacity:.9}@media (pointer:coarse),(width<=768px){.stage__canvas:not(.stage__canvas--soft):after{content:"";pointer-events:none;background:radial-gradient(#0000 55%,#6e183824 100%);position:absolute;inset:0}}.stage__overlay{text-align:center;pointer-events:none;flex-direction:column;justify-content:space-between;align-items:center;padding:clamp(2rem,7vh,4.5rem) 1.5rem clamp(2rem,6vh,3.5rem);display:flex;position:absolute;inset:0}.stage__overlay button{pointer-events:auto}.stage__top,.opening__copy{max-width:34rem}.stage__bottom,.opening__cta{flex-direction:column;align-items:center;gap:.75rem;display:flex}.eyebrow{letter-spacing:.28em;text-transform:uppercase;color:var(--accent);margin:0 0 .75rem;font-size:.78rem;font-weight:500}.display{font-family:var(--font-display);letter-spacing:-.01em;text-wrap:balance;text-shadow:0 2px 18px #ffffffd9;margin:0;font-size:clamp(2rem,5.2vw,3.4rem);font-weight:500;line-height:1.08}.display em{color:var(--accent);font-style:italic}.display--md{font-size:clamp(1.9rem,4.6vw,3rem)}.display--xl{font-family:var(--font-script);color:var(--accent);text-shadow:0 0 2px #fff,0 4px 30px #ff6f9173,0 0 60px #ffffffe6;font-size:clamp(3.2rem,10vw,6rem);font-weight:700;line-height:1}.lede{max-width:26rem;font-family:var(--font-display);color:var(--ink-soft);text-shadow:0 0 2px #fff,0 2px 14px #fffffff2;margin:0 auto .5rem;font-size:clamp(1.1rem,2.4vw,1.3rem);font-style:italic;line-height:1.5}.hint{color:var(--ink-faint);text-shadow:0 1px 10px #ffffffe6;margin:0;font-size:.85rem}.split{will-change:transform;display:inline-block}.bubble{background:var(--paper);color:var(--paper-ink);font-family:var(--font-ui);white-space:nowrap;pointer-events:none;-webkit-user-select:none;user-select:none;animation:bubble-in .45s var(--ease-out) both;border-radius:1rem;padding:.55rem .95rem;font-size:.85rem;font-weight:600;position:relative;box-shadow:0 10px 24px -8px #c2185b66}.bubble:after{content:"";background:var(--paper);border-radius:2px;width:12px;height:12px;position:absolute;bottom:-6px;left:50%;transform:translate(-50%)rotate(45deg)}.bubble--secret{white-space:normal;text-align:center;color:#fff;background:linear-gradient(135deg,#ff8fab,#e8457a);width:max-content;max-width:min(16rem,70vw)}.bubble--secret:after{background:#f06a92}@keyframes bubble-in{0%{opacity:0;transform:translateY(8px)scale(.6)}to{opacity:1;transform:none}}.btn{color:#fff;letter-spacing:.02em;cursor:pointer;background:linear-gradient(135deg,#ff8fab 0%,#e8457a 100%);border:1px solid #ffffffb3;border-radius:999px;padding:.95rem 2.1rem;font-size:.98rem;font-weight:600;position:relative;box-shadow:0 10px 30px -8px #e8457aa6,inset 0 1px #ffffff59}.btn:focus-visible,.link-btn:focus-visible,.music-toggle:focus-visible,.envelope:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.btn:disabled{cursor:default}.btn--ghost{color:var(--paper-ink);box-shadow:none;background:0 0;border-color:#4a22334d}.link-btn{color:#4a223399;text-underline-offset:3px;cursor:pointer;background:0 0;border:0;padding:.4rem .2rem;font-size:.85rem;text-decoration:underline}.btn--sm{white-space:nowrap;padding:.75rem 1.4rem;font-size:.92rem}.btn:disabled:not(.btn--ghost){filter:saturate(.6);opacity:.7}.link-btn--light{color:var(--ink-faint)}.stage__overlay input,.stage__overlay form{pointer-events:auto}.gate{text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:1.5rem;display:flex;position:absolute;inset:0}.gate .display{max-width:30rem}.heart-lock{filter:drop-shadow(0 10px 18px #e8457a59);width:64px;height:72px;margin-bottom:1rem;overflow:visible}.gate__form{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#fff9;border:1px solid #fffc;border-radius:1.5rem;flex-direction:column;align-items:center;gap:.9rem;margin-top:2rem;padding:1.5rem 1.75rem 1.75rem;display:flex;box-shadow:0 24px 50px -24px #c2185b73}.gate__label{color:var(--ink);font-size:.95rem;font-weight:600}.gate__digits{gap:.6rem;display:flex;position:relative}.gate__digit{width:3.1rem;height:3.7rem;font-family:var(--font-display);color:var(--rose-deep);transition:border-color .25s, box-shadow .25s, transform .25s var(--ease-out);background:#fff;border:1.5px solid #e8457a40;border-radius:.9rem;place-items:center;font-size:1.9rem;font-weight:600;display:grid}.gate__digit.is-active{border-color:var(--accent);box-shadow:0 0 0 4px #e8457a26}.gate__digits--wrong .gate__digit{border-color:#e0465f}.gate__digits--open .gate__digit{background:#fff0f4;border-color:#ff8fab;transform:translateY(-3px)}.gate__input{opacity:0;caret-color:#0000;cursor:pointer;width:100%;font-size:16px;position:absolute;inset:0}.gate__msg{min-height:1.3em;color:var(--ink-faint);margin:0;font-size:.85rem}.gate__msg.is-wrong{color:#d63858;font-weight:600}.reasons{text-align:center;flex-direction:column;justify-content:space-between;align-items:center;padding:clamp(2rem,7vh,4.5rem) 1.25rem clamp(1.5rem,5vh,3rem);display:flex;position:absolute;inset:0}.reasons__deck{place-items:center;width:min(360px,84vw);height:min(400px,48dvh);display:grid;position:relative}.reason-card{cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none;background:radial-gradient(circle at 100% 0,#ffc2d173,#0000 45%),#fffdfd;border:1px solid #ffffffe6;border-radius:1.6rem;flex-direction:column;justify-content:center;align-items:center;gap:1.1rem;padding:2rem 1.75rem;display:flex;position:absolute;inset:0;box-shadow:0 30px 60px -28px #c2185b73,inset 0 2px #fffc}.reason-card--pink{background:radial-gradient(circle at 0 100%,#ffffff8c,#0000 50%),linear-gradient(160deg,#ffe3ea 0%,#ffc9d6 100%)}.reason-card__number{font-family:var(--font-script);color:var(--accent);font-size:3.4rem;font-weight:700;line-height:1}.reason-card__text{font-family:var(--font-display);color:var(--ink);text-wrap:balance;margin:0;font-size:clamp(1.35rem,3.6vw,1.6rem);line-height:1.4}.reason-card__heart{color:var(--rose);opacity:.6;font-size:1.2rem}.reasons__end{flex-direction:column;align-items:center;gap:1.25rem;display:flex}.reasons__end .display--xl{margin:0;font-size:clamp(2.6rem,8vw,4rem)}.reasons__controls{flex-direction:column;align-items:center;gap:.6rem;display:flex}.reasons__nav{align-items:center;gap:1rem;display:flex}.round-btn{width:2.9rem;height:2.9rem;color:var(--accent);cursor:pointer;transition:transform .2s var(--ease-out);background:#fffc;border:1px solid #e8457a40;border-radius:50%;place-items:center;padding:0 0 .2rem;font-size:1.7rem;line-height:1;display:grid;box-shadow:0 8px 20px -12px #c2185b80}.round-btn:active{transform:scale(.92)}.round-btn:disabled{opacity:.4;cursor:default}.reasons__progress{min-width:7rem;color:var(--ink-soft);flex-direction:column;align-items:center;gap:.4rem;font-size:.85rem;font-weight:600;display:flex}.reasons__bar{background:#fffc;border-radius:2px;width:100%;height:4px;overflow:hidden}.reasons__bar-fill{background:linear-gradient(90deg, #ff8fab, var(--accent));transform-origin:0;height:100%}.wish{flex-direction:column;align-items:center;gap:.6rem;width:min(440px,92vw);display:flex}.wish__field{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffffc7;border:1px solid #e8457a40;border-radius:999px;gap:.5rem;width:100%;padding:.35rem;display:flex;box-shadow:0 12px 30px -14px #c2185b73}.wish__input{min-width:0;color:var(--ink);font:inherit;background:0 0;border:0;outline:none;flex:1;padding:0 .9rem;font-size:1rem}.wish__input::placeholder{color:var(--ink-faint);font-style:italic}.lantern-flight{z-index:25;pointer-events:none;flex-direction:column;align-items:center;width:64px;display:flex;position:fixed;bottom:16vh;left:calc(50% - 32px)}.lantern-flight__wish{width:max-content;max-width:70vw;color:var(--ink);font-family:var(--font-display);text-align:center;background:#ffffffd9;border-radius:.8rem;margin:0 0 .5rem;padding:.4rem .8rem;font-size:1rem;font-style:italic;position:absolute;bottom:100%}.lantern{background:radial-gradient(at 50% 72%,#fff6cf 0%,#ffc56b 38%,#ff8a5c 78%,#f0684f 100%);border-radius:42% 42% 28% 28%/34% 34% 40% 40%;width:52px;height:66px;animation:.18s ease-in-out infinite alternate lantern-flicker;position:relative;box-shadow:0 0 24px 8px #ffaf5a99,0 0 70px 26px #ff8c644d}.lantern:before{content:"";border-left:1px solid #c8502840;border-right:1px solid #c8502840;border-radius:50%;position:absolute;inset:8% 30%}.lantern:after{content:"";background:#c4573d;border-radius:3px;height:6px;position:absolute;bottom:-4px;left:22%;right:22%}@keyframes lantern-flicker{0%{filter:brightness()}to{filter:brightness(1.08)}}.flash{pointer-events:none;z-index:5;background:radial-gradient(circle,#fff 0%,#fff0f4 45%,#ffc2d1 100%);position:absolute;inset:0}.mic-panel{flex-direction:column;align-items:center;gap:.75rem;display:flex}.mic-meter{background:#ffffffbf;border-radius:999px;width:200px;height:6px;overflow:hidden;box-shadow:inset 0 0 0 1px #e8457a33}.mic-meter__fill{background:linear-gradient(90deg, #ff8fab, var(--accent));transform-origin:0;height:100%;transition:transform 80ms linear}.music-toggle{z-index:20;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;background:#ffffffb3;border:1px solid #e8457a40;border-radius:50%;place-items:center;width:3rem;height:3rem;display:grid;position:fixed;bottom:1.25rem;right:1.25rem;box-shadow:0 8px 24px -12px #c2185b73}.music-toggle__bars{align-items:flex-end;gap:3px;height:16px;display:flex}.music-toggle__bars span{background:var(--accent);width:3px;height:4px;transition:height .3s var(--ease-out);border-radius:2px}.music-toggle.is-playing .music-toggle__bars span{animation:1s ease-in-out infinite bar}.music-toggle.is-playing .music-toggle__bars span:nth-child(2){animation-delay:-.4s}.music-toggle.is-playing .music-toggle__bars span:nth-child(3){animation-delay:-.7s}.music-toggle.is-playing .music-toggle__bars span:nth-child(4){animation-delay:-.2s}@keyframes bar{0%,to{height:4px}50%{height:16px}}.letter-wrap{perspective:1200px;place-items:center;padding:1.25rem;display:grid;position:absolute;inset:0}.envelope-wrap{flex-direction:column;align-items:center;gap:2.5rem;display:flex}.envelope{aspect-ratio:3/2;cursor:pointer;perspective:900px;filter:drop-shadow(0 30px 40px #c2185b47);background:0 0;border:0;width:min(360px,82vw);padding:0;position:relative}.envelope:disabled{cursor:default}.envelope>span{display:block;position:absolute}.envelope__back{z-index:1;background:#e9b3c1;border-radius:10px;inset:0}.envelope__paper{background:var(--paper);z-index:2;border-radius:6px;flex-direction:column;gap:9px;height:86%;padding:14% 10% 0;top:6%;left:7%;right:7%;display:flex!important}.envelope__paper-line{background:#c2185b29;border-radius:3px;height:5px;display:block}.envelope__paper-line--short{width:55%}.envelope__front{clip-path:polygon(0 0,50% 56%,100% 0,100% 100%,0 100%);z-index:3;background:linear-gradient(160deg,#f9d3dc 0%,#f2bccb 100%);border-radius:10px;inset:0}.envelope__flap{clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;backface-visibility:visible;z-index:4;background:linear-gradient(#f4c2cf 0%,#e7a6b8 100%);width:100%;height:60%;top:0;left:0}.envelope__seal{background:radial-gradient(circle at 35% 30%, #e64a7f 0%, var(--rose-deep) 60%, #8e0f43 100%);z-index:5;border-radius:50%;place-items:center;width:52px;height:52px;margin:-26px 0 0 -26px;top:60%;left:50%;box-shadow:0 4px 10px #0000004d,inset 0 -3px 6px #00000040;display:grid!important}.envelope__seal svg{fill:#ffdce6d9;width:22px;height:22px}.letter{background:radial-gradient(circle at 100% 0%, #ffc2d159, transparent 40%), var(--paper);width:min(620px,100%);max-height:min(82dvh,760px);color:var(--paper-ink);transform-origin:bottom;border-radius:14px;flex-direction:column;display:flex;position:relative;box-shadow:0 40px 80px -20px #c2185b59,inset 0 0 0 1px #fff9}.letter__body{scroll-behavior:smooth;flex:1;padding:clamp(1.75rem,5vw,3.25rem) clamp(1.5rem,6vw,3.5rem) 1rem;overflow-y:auto}.letter__greeting{min-height:1.2em;font-family:var(--font-script);color:var(--rose-deep);margin:0 0 1.25rem;font-size:clamp(1.9rem,5vw,2.4rem);font-weight:700}.letter__para{font-family:var(--font-display);margin:0 0 1.1rem;font-size:clamp(1.12rem,2.6vw,1.28rem);line-height:1.65}.letter__quote{text-align:center;font-family:var(--font-display);color:var(--rose-deep);border-top:1px solid #e8457a2e;border-bottom:1px solid #e8457a2e;margin:2rem 0 0;padding:1.5rem 0;font-size:clamp(1.25rem,3.2vw,1.55rem);font-style:italic;line-height:1.5}.letter__quote:before,.letter__quote:after{content:"♡";color:var(--rose);opacity:.6;font-size:.9rem;font-style:normal;display:block}.letter__quote-line{display:block}.letter__sign{text-align:right;margin-top:1.75rem}.letter__closing{font-family:var(--font-display);color:#4a2233bf;margin:0;font-size:1.1rem;font-style:italic}.letter__signature{font-family:var(--font-script);color:var(--rose-deep);margin:.2rem 0 0;font-size:2.2rem;font-weight:700}.letter__actions{justify-content:center;align-items:center;min-height:4.5rem;padding:.75rem 1.5rem 1.5rem;display:flex}.caret{vertical-align:-.12em;background:var(--rose-deep);width:2px;height:1em;margin-left:2px;animation:.9s step-end infinite blink;display:inline-block}@keyframes blink{50%{opacity:0}}@media (prefers-reduced-motion:reduce){.music-toggle.is-playing .music-toggle__bars span,.caret{animation:none}}