:root{--milk: #fbf7f4;--paper: #fffdfb;--ink: #5d4b5a;--muted: #a08f9c;--line: #eadde3;--pink: #f4c7d4;--rose: #e49ab2;--lilac: #d8ccf0;--butter: #f8e6ad;--sage: #cfe3cf;--peach: #f9d3c2;--f-script: "Corinthia", "Snell Roundhand", cursive;--f-display: "Italiana", "Didot", Georgia, serif;--f-body: "Jost", "Futura", system-ui, sans-serif;--f-type: "Courier Prime", "Courier New", monospace;color-scheme:light}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0}body{min-height:100vh;overflow-x:hidden;background:radial-gradient(60% 45% at 12% 8%,rgba(244,199,212,.55),transparent 70%),radial-gradient(50% 40% at 92% 30%,rgba(216,204,240,.5),transparent 70%),radial-gradient(60% 40% at 50% 100%,rgba(248,230,173,.45),transparent 70%),var(--milk);color:var(--ink);font-family:var(--f-body);font-weight:300;font-size:16px;line-height:1.65;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}.btn{font:400 .95rem/1 var(--f-body);letter-spacing:.04em;cursor:pointer;border:0;padding:14px 22px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:10px;color:var(--ink);transition:transform .25s ease,background-color .25s ease,box-shadow .25s ease}.btn svg{width:20px;height:20px;flex:none}.btn-soft{background:var(--pink);box-shadow:0 10px 24px -14px #c46e8ce6}.btn-soft:hover{background:var(--rose);transform:translateY(-2px)}.btn-line{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}.btn-line:hover{box-shadow:inset 0 0 0 1px var(--rose);transform:translateY(-2px)}.btn:focus-visible{outline:2px solid var(--rose);outline-offset:4px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes rise{0%{opacity:0;transform:translateY(16px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}@keyframes write{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}@keyframes shimmer{to{background-position:-250% 0}}@keyframes tagIn{0%{opacity:0;transform:rotate(-40deg) scale(.6)}to{opacity:1;transform:rotate(-8deg)}}@keyframes swing{0%,to{opacity:1;transform:rotate(-8deg)}50%{opacity:1;transform:rotate(-1deg)}}@keyframes bump{40%{transform:scale(1.5)}}.ticket{position:relative;width:min(100%,360px);aspect-ratio:4 / 4.6;border-radius:18px;overflow:hidden;background:var(--paper);box-shadow:0 1px 0 var(--line),0 30px 60px -34px #5d4b5a73;-webkit-mask:radial-gradient(circle 14px at 0 50%,#0000 98%,#000) left / 51% 100% no-repeat,radial-gradient(circle 14px at 100% 50%,#0000 98%,#000) right / 51% 100% no-repeat;mask:radial-gradient(circle 14px at 0 50%,#0000 98%,#000) left / 51% 100% no-repeat,radial-gradient(circle 14px at 100% 50%,#0000 98%,#000) right / 51% 100% no-repeat}.face{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;gap:6px;padding:28px;background:radial-gradient(80% 60% at 50% 40%,rgba(248,230,173,.5),transparent 70%),var(--paper)}.face .small{font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}.face .big{font-family:var(--f-display);font-size:clamp(3.4rem,16vw,4.8rem);line-height:1;color:var(--ink)}.face[data-face=voucher] .big{font-size:clamp(2.2rem,10vw,3rem);line-height:1.1;text-wrap:balance}.face .script{font-family:var(--f-script);font-size:clamp(3rem,14vw,4.2rem);line-height:1.1;color:var(--rose);margin-bottom:8px}#foil{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab;transition:opacity .8s ease}#foil.done{opacity:0;pointer-events:none}.intro{position:fixed;inset:0;z-index:40;display:grid;place-content:center;justify-items:center;gap:18px;padding:24px 20px;background:var(--milk);transition:opacity .9s ease .3s}.intro.leaving{opacity:0;pointer-events:none}.intro .ticket{width:min(calc(100vw - 40px),360px);transition:transform 1s cubic-bezier(.5,0,.2,1)}.intro.leaving .ticket{transform:translateY(-24px) scale(.94)}.meter{margin:0;font-size:.8rem;letter-spacing:.06em;color:var(--muted);font-variant-numeric:tabular-nums}@media(max-width:520px){.intro{gap:14px;padding-inline:16px}.intro .ticket{width:min(calc(100vw - 32px),400px,calc(72svh * 4 / 4.6))}}.hero{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:clamp(12px,4vw,56px);padding-block:clamp(20px,4vh,48px) 24px}.stage{position:relative;justify-self:center;width:min(100%,580px,calc(86svh * 1100 / 1260));aspect-ratio:1100 / 1260;max-width:100%;container-type:inline-size}#bouquet{display:block;width:100%;height:100%}.tag{position:absolute;left:51.8%;top:81%;width:15%;transform-origin:50% 0;opacity:0;pointer-events:none}.tag.on{animation:tagIn .9s cubic-bezier(.2,.8,.3,1.2) both,swing 4.5s ease-in-out .9s infinite}.tag i{display:block;width:1px;height:7cqw;margin:0 auto;background:var(--muted)}.tag div{background:var(--paper);color:var(--ink);text-align:center;padding:1.6cqw .8cqw 1.8cqw;border-radius:.6cqw;box-shadow:0 1.4cqw 2.6cqw #5d4b5a2e}.tag small{display:block;font-size:1.2cqw;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}.tag span{display:block;font-family:var(--f-script);font-size:3.2cqw;line-height:1.1}.copy{min-width:0;display:grid;gap:16px;justify-items:start}.kicker{margin:0;font-size:.74rem;letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}.name{margin:-.3em 0 -.42em -.4em;padding:.2em .3em .3em .4em;font-family:var(--f-script);font-weight:400;font-size:clamp(5rem,14vw,10rem);line-height:1.1;color:var(--rose);background:linear-gradient(100deg,var(--rose) 0%,#f3b9cb 22%,#c7b6ea 45%,var(--rose) 70%,#f3b9cb 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}.sub{margin:0;max-width:30ch;font-family:var(--f-display);font-size:clamp(1.4rem,2.6vw,1.9rem);line-height:1.3;text-wrap:balance}.actions{display:flex;flex-wrap:wrap;gap:10px}.hint{margin:0;font-size:.8rem;letter-spacing:.04em;color:var(--muted)}.hint b{display:inline-block;font-weight:500;color:var(--rose);font-variant-numeric:tabular-nums}.hint b.bump{animation:bump .45s ease}.pre .reveal{opacity:0}.pre .name{clip-path:inset(0 100% 0 0)}.play .reveal{animation:rise 1s cubic-bezier(.2,.7,.2,1) var(--d, 0s) both}.play .name{animation:write 2.2s cubic-bezier(.65,.05,.3,1) 1s both,shimmer 9s linear 3.4s infinite}@media(max-width:820px){.hero{grid-template-columns:minmax(0,1fr);gap:0;padding-block:0 28px}.stage{width:min(calc(100% + 40px),520px,calc(60svh * 1100 / 1260));max-width:none}.copy{justify-items:center;text-align:center;gap:10px;margin-top:-8px}.name{font-size:clamp(4.6rem,24vw,7.5rem);margin-inline:-.4em -.3em}.sub{font-size:clamp(1.3rem,5.6vw,1.6rem)}.tag{width:20%}.tag small{font-size:1.6cqw}.tag span{font-size:4.1cqw}}.letter{max-width:640px;margin:0 auto;padding-block:64px 24px;display:grid;gap:20px;justify-items:center;scroll-margin-top:24px}.label{margin:0;font-size:.74rem;letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}.env-wrap{display:grid;gap:14px;justify-items:center;width:100%}.envelope{position:relative;width:100%;max-width:460px;aspect-ratio:7 / 4.4;padding:0;border:0;background:none;cursor:pointer;perspective:1200px;margin-top:40px}.envelope:focus-visible{outline:2px solid var(--rose);outline-offset:6px}.env-back{position:absolute;inset:0;border-radius:4px;background:#efc3d0;z-index:0}.env-flap{position:absolute;left:0;right:0;top:0;height:60%;z-index:3;transform-origin:50% 0;background:linear-gradient(180deg,#fbe3ea,#f2c9d5);clip-path:polygon(0 0,100% 0,50% 100%);transition:transform .75s cubic-bezier(.5,0,.3,1),z-index 0s linear .38s}.env-paper{position:absolute;left:7%;right:7%;top:7%;height:86%;z-index:1;border-radius:2px;background:var(--paper);color:var(--rose);font-family:var(--f-script);font-size:clamp(1.8rem,7vw,2.6rem);display:flex;justify-content:center;padding-top:6%;transition:transform .8s cubic-bezier(.3,.7,.2,1) .55s}.env-front{position:absolute;inset:0;z-index:2;border-radius:4px;background:linear-gradient(160deg,#f9dbe3,#f1c4d1);clip-path:polygon(0 0,50% 57%,100% 0,100% 100%,0 100%)}.seal{position:absolute;left:50%;top:58%;z-index:4;width:clamp(54px,14%,68px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);display:grid;place-items:center;color:var(--paper);font-family:var(--f-script);font-size:2.1rem;background:radial-gradient(circle at 35% 30%,#d9c9f3,#a993d6 75%);box-shadow:0 4px 10px #785a964d,inset 0 0 0 4px #ffffff40;transition:opacity .3s ease,transform .4s ease}.envelope:not(.open):hover .env-flap{transform:rotateX(22deg)}.envelope.open .seal{opacity:0;transform:translate(-50%,-50%) scale(1.5)}.envelope.open .env-flap{transform:rotateX(180deg);z-index:0}.envelope.open .env-paper{transform:translateY(-48%)}.env-hint{margin:0;font-size:.8rem;color:var(--muted)}.letter-card{position:relative;width:100%;background:var(--paper);border-radius:2px;padding:clamp(28px,6vw,52px);box-shadow:0 1px 0 var(--line),0 30px 60px -36px #5d4b5a66}.letter-card canvas{position:absolute;top:-30px;right:-10px;width:110px;height:110px;pointer-events:none}.letter-card p{margin:0 0 1em;max-width:60ch;font-size:1.05rem;line-height:1.8}.letter-card .hello{font-family:var(--f-script);font-size:clamp(2.8rem,9vw,3.6rem);line-height:1.1;color:var(--rose);margin-bottom:.3em}.letter-card .ask{font-family:var(--f-display);font-size:1.6rem;line-height:1.3;margin-top:1.4em}.letter-card .sign-pre{margin:1.6em 0 0;font-size:.9rem;letter-spacing:.1em;color:var(--muted)}.letter-card .sign{margin:0;font-family:var(--f-script);font-size:2.4rem;line-height:1.2}.letter-card.show>*{animation:rise .9s cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * .22s) both}@media(max-width:820px){.letter{padding-block:40px 16px;gap:16px}.envelope{margin-top:56px}.letter-card{width:calc(100% + 16px);padding:36px 22px 28px}.letter-card canvas{width:88px;height:88px;top:-26px;right:-4px}.letter-card p{font-size:1.02rem;line-height:1.75}.letter-card .ask{font-size:1.4rem}}.finale{max-width:860px;margin:0 auto;padding-block:56px 72px;text-align:center;display:grid;gap:16px;justify-items:center}.finale h2{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(2.2rem,7vw,4.2rem);line-height:1.1;text-wrap:balance}.finale p{margin:0;color:var(--muted)}.finale .actions{justify-content:center}@media(max-width:820px){.finale{padding-block:40px 56px}}#fx{position:fixed;inset:0;width:100%;height:100%;z-index:44;pointer-events:none}.sound{position:fixed;z-index:45;right:14px;top:calc(14px + env(safe-area-inset-top,0px));width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;color:var(--ink);background:#fffdfbb3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px var(--line)}.sound:focus-visible{outline:2px solid var(--rose);outline-offset:3px}.sound svg{width:19px;height:19px}.sound .off,.sound[aria-pressed=false] .on{display:none}.sound[aria-pressed=false] .off{display:block}.cap{position:fixed;left:0;top:0;width:clamp(72px,11vw,104px);z-index:46;pointer-events:none;will-change:transform}.wrap{padding-inline:20px}