:root{--blush: #fff3f6;--pink: #f6afc5;--env: #f3a3be;--rose: #d96b91;--card: #ffe2ec;--ink: #593b4b;--white: #ffffff;--serif: "Petrona", "Iowan Old Style", Georgia, serif;--hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;--sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;--ease: cubic-bezier(.22, .8, .24, 1);--w: min(84vw, 360px, 50svh)}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;min-height:100%;overflow-x:hidden}body{color:var(--ink);font-family:var(--sans);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .23 0 0 0 0 .29 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),radial-gradient(ellipse 70% 55% at 50% 62%,#fffafb 0%,var(--blush) 60%,#fbe6ec 100%);background-attachment:fixed;-webkit-tap-highlight-color:transparent}.scene{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top)) 16px calc(76px + env(safe-area-inset-bottom));text-align:center}.intro{height:calc(var(--w) * .98);display:flex;flex-direction:column;justify-content:center;gap:.35rem;transition:opacity .6s ease,transform .8s var(--ease)}.scene:not(.scene--closed) .intro{opacity:0;transform:translateY(-14px)}.intro__kicker{margin:0;font-family:var(--hand);font-size:clamp(1.5rem,6vw,1.9rem);color:var(--rose);transform:rotate(-2deg)}.intro__title{margin:0;font-family:var(--serif);font-weight:400;font-style:italic;font-size:clamp(1.9rem,8.5vw,2.9rem);line-height:1.1;letter-spacing:-.01em}.hint{margin:1.6rem 0 0;font-family:var(--hand);font-size:1.45rem;color:var(--rose);min-height:1.6em;max-width:26ch;line-height:1.15}.subhint{margin:.1rem 0 0;font-size:.8rem;letter-spacing:.04em;opacity:.65}.envelope{position:relative;width:var(--w);height:calc(var(--w) * .66);transition:transform .6s var(--ease)}.envelope--closed:hover{transform:translateY(-4px) rotate(-.6deg)}.envelope__shadow{position:absolute;inset:auto 6% -9% 6%;height:22%;border-radius:50%;background:radial-gradient(closest-side,rgba(150,70,100,.28),transparent);filter:blur(6px)}.envelope__back{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:6px;background:linear-gradient(180deg,#e98fae,#ee9db8 60%);box-shadow:inset 0 0 0 1px #a03c5f1f}.envelope__front{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;border-radius:0 0 6px 6px;background:linear-gradient(170deg,#f7b3c9 0%,var(--env) 70%,#ee97b4 100%);clip-path:polygon(0 26%,50% 52%,100% 26%,100% 100%,0 100%);filter:drop-shadow(0 -1px 0 rgba(150,60,90,.15))}.envelope__front:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(0deg,#f9bdd0,#f5aac3);clip-path:polygon(0 100%,50% 48%,100% 100%);box-shadow:inset 0 1px #fff6}.envelope__flap{position:absolute;inset:0 0 auto 0;height:60%;z-index:4;clip-path:polygon(0 0,100% 0,50% 100%);background:linear-gradient(180deg,#f6abc3,#f29cba);transform-origin:50% 0}.envelope:not(.envelope--closed) .envelope__flap{animation:flap-open .75s cubic-bezier(.55,0,.3,1) forwards}@keyframes flap-open{0%{transform:scaleY(1)}49.9%{background:linear-gradient(180deg,#f6abc3,#f29cba)}50%{transform:scaleY(0);background:linear-gradient(180deg,#fbd3e0,#f3b1c7)}to{transform:scaleY(-.85);background:linear-gradient(180deg,#fbd3e0,#f3b1c7)}}.envelope--rising .envelope__flap,.envelope--out .envelope__flap{z-index:1}.envelope__note{position:absolute;left:7%;bottom:9%;z-index:4;font-family:var(--hand);font-size:calc(var(--w) * .065);color:#b44f76;transform:rotate(-6deg);transition:opacity .4s ease}.envelope:not(.envelope--closed) .envelope__note{opacity:0}.envelope__hit{position:absolute;top:-8px;right:-8px;bottom:-8px;left:-8px;z-index:10;border:0;border-radius:10px;background:transparent;cursor:pointer}.card{position:absolute;left:7%;bottom:5%;z-index:2;width:86%;aspect-ratio:448 / 560;padding:0;border:0;border-radius:8%/6.4%;overflow:hidden;background:var(--card);box-shadow:0 1px 2px #593b4b1f;transform-origin:50% 100%;transform:translateY(0) scale(.42);transition:transform 1s var(--ease),box-shadow .8s ease}.card img{display:block;width:100%;height:100%;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.card:disabled{cursor:default;color:inherit}.envelope--closed .card{visibility:hidden}.envelope--rising .card{transform:translateY(-76%) scale(.42)}.envelope--out .card{z-index:6;cursor:zoom-in;transform:translateY(-46%) scale(1) rotate(-1.5deg);box-shadow:0 2px 4px #593b4b14,0 18px 40px -12px #8c3c5f59;transition:transform 1.1s var(--ease),box-shadow 1.1s ease;animation:settle 1.8s var(--ease) 1.1s forwards}@keyframes settle{to{transform:translateY(-46%) scale(1) rotate(0)}}.envelope--out .card:hover{box-shadow:0 2px 4px #593b4b14,0 24px 48px -12px #8c3c5f6b}.reader{width:min(92vw,460px);max-width:none;max-height:none;padding:0;border:0;background:transparent;overflow:visible}.reader[open]{display:flex;flex-direction:column;align-items:center;gap:14px;animation:reader-in .45s var(--ease)}.reader::backdrop{background:#593b4b6b;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}@keyframes reader-in{0%{opacity:0;transform:translateY(14px) scale(.96)}}.reader__card{margin:0}.reader__card img{display:block;width:auto;height:auto;max-width:100%;max-height:calc(100svh - 120px);border-radius:8%/6.4%;box-shadow:0 24px 60px -16px #3c14288c}.reader__close{font:500 .95rem var(--sans);color:var(--ink);background:var(--white);border:1px solid rgba(217,107,145,.35);border-radius:999px;padding:10px 20px;min-height:44px;cursor:pointer}.ticket{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:20;display:flex;align-items:center;gap:10px;padding:10px 16px 10px 12px;min-height:48px;font:600 1.35rem/1 var(--hand);color:var(--ink);background:#fffaf3;border:0;border-radius:4px;cursor:pointer;transform:rotate(-4deg);box-shadow:inset 0 0 0 4px #fffaf3,inset 0 0 0 5.5px #d96b918c,0 6px 16px -6px #8c3c5f73;-webkit-mask:radial-gradient(circle 7px at 0 50%,transparent 98%,#000) left / 51% 100% no-repeat,radial-gradient(circle 7px at 100% 50%,transparent 98%,#000) right / 51% 100% no-repeat;mask:radial-gradient(circle 7px at 0 50%,transparent 98%,#000) left / 51% 100% no-repeat,radial-gradient(circle 7px at 100% 50%,transparent 98%,#000) right / 51% 100% no-repeat;animation:nudge 5s ease-in-out 3s infinite;transition:transform .25s var(--ease)}.ticket:hover{transform:rotate(-1deg) translateY(-3px) scale(1.04);animation-play-state:paused}.ticket:active{transform:rotate(-2deg) scale(.97)}.ticket__play{width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--rose)}.ticket__play svg{width:11px;margin-left:2px;fill:#fff}.ticket:before{content:"";position:absolute;top:-8px;left:50%;width:46px;height:16px;translate:-50% 0;rotate:6deg;background:#f6afc58c}.ticket-arrow{position:fixed;right:calc(max(16px,env(safe-area-inset-right)) + 122px);bottom:calc(max(18px,env(safe-area-inset-bottom)) + 22px);z-index:19;width:74px;color:var(--rose);opacity:.85;pointer-events:none}.ticket-arrow path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw .9s ease-out .6s forwards}.ticket-arrow .ticket-arrow__head{animation-duration:.25s;animation-delay:1.5s}@keyframes draw{to{stroke-dashoffset:0}}@keyframes nudge{0%,84%,to{transform:rotate(-4deg)}88%{transform:rotate(-9deg) translateY(-2px)}92%{transform:rotate(1deg) translateY(-2px)}96%{transform:rotate(-6deg)}}.reader--video{width:auto}.reader__video{display:block;height:min(78svh,calc((92vw) * 16 / 9));aspect-ratio:9 / 16;border-radius:14px;background:#e8968f;box-shadow:0 24px 60px -16px #3c14288c}:focus-visible{outline:2px dashed var(--rose);outline-offset:4px}.card:focus-visible{outline-offset:6px}@media (prefers-reduced-motion: reduce){*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-delay:0s!important}.envelope--out .card{animation:fade-in .4s ease!important}@keyframes fade-in{0%{opacity:0}}}