:root{--paper:#faf6f1;--paper-2:#f2e9df;--paper-3:#fffdfa;--ink:#1f1b18;--ink-soft:#6a6058;--ink-faint:#b9aea4;--gold-ink:#9a7a3c;--blush:#e8b4b8;--rose:#e0798f;--rose-deep:#c94a5e;--gold:#c9a66b;--sage:#8a9a8b;--serif:"Cormorant Garamond", "Times New Roman", serif;--sans:"Alegreya Sans", "Gill Sans", system-ui, sans-serif;--mono:"JetBrains Mono", "Menlo", monospace;--hand:"Caveat", "Comic Sans MS", cursive;--z-content:1;--z-grain:40;--z-hearts:50;--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-silk:cubic-bezier(.45, .05, .55, .95);--env-w:min(78vw, 360px);--env-h:calc(var(--env-w) / 1.45)}@media (min-width:768px){:root{--env-w:min(40vw, 440px)}}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}body{background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;margin:0;font-size:17px;line-height:1.6;overflow-x:hidden}body.is-sealed{position:fixed;top:0;bottom:0;left:0;right:0;overflow:hidden}body.is-sealed .pages{visibility:hidden}h1,h2,p{margin:0}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;padding:0}.hearts{pointer-events:none;width:100%;height:100%;z-index:var(--z-hearts);position:fixed;top:0;bottom:0;left:0;right:0}.grain{pointer-events:none;z-index:var(--z-grain);opacity:.35;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.5 0 0 0 0 0.45 0 0 0 0.12 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");background-size:200px 200px;position:fixed;top:0;bottom:0;left:0;right:0}.hero{min-height:100svh;padding:max(24px, env(safe-area-inset-top)) 24px max(32px, env(safe-area-inset-bottom));text-align:center;background:radial-gradient(120% 80% at 50% 0%, #fffdfa 0%, transparent 60%), radial-gradient(60% 40% at 50% 100%, #e8b4b847 0%, transparent 70%), var(--paper);grid-template-rows:auto auto 1fr auto;place-items:center;display:grid;position:relative}.hero__kicker{font-family:var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);align-self:end;margin-top:8vh;font-size:12px}.hero__name{font-family:var(--serif);letter-spacing:-.01em;margin-top:6px;font-size:clamp(44px,12vw,84px);font-style:italic;font-weight:500;line-height:1}.hero__hint{color:var(--ink-soft);letter-spacing:.02em;animation:hint-breathe 2.6s var(--ease-silk) infinite;align-self:end;font-size:15px}@keyframes hint-breathe{0%,to{opacity:.55;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}.envelope-scene{z-index:var(--z-content);perspective:1200px;perspective-origin:50% 40%;width:var(--env-w);min-height:calc(var(--env-h) + 90px);place-items:center;display:grid}.envelope{cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;width:var(--env-w);height:var(--env-h);transform-style:preserve-3d;transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .6s var(--ease-out);will-change:transform;border-radius:8px;outline:none;position:relative}.envelope:focus-visible{box-shadow:0 0 0 3px var(--paper), 0 0 0 5px var(--rose)}@media (hover:hover){.envelope:not(.is-open):hover .env__shadow{opacity:.7;transform:translateZ(-2px)scale(1.04)}.envelope:not(.is-open):hover .env__seal{transform:translateZ(6px)scale(1.05)}}.env__shadow{transition:opacity .6s var(--ease-out), transform .6s var(--ease-out)}.deck:focus-visible{box-shadow:0 0 0 3px var(--paper), 0 0 0 5px var(--rose);border-radius:18px;outline:none}:where(.envelope>span){display:block;position:absolute;top:0;bottom:0;left:0;right:0}.env__shadow{filter:blur(6px);background:radial-gradient(50% 50%,#1f1b1838,#0000 70%);border-radius:50%;height:40px;top:auto;bottom:-18px;left:6%;right:6%;transform:translateZ(-2px)}.env__back{background:var(--paper-2);border-radius:8px;box-shadow:inset 0 1px #ffffffb3,0 18px 40px -20px #1f1b1859}.env__letter{background:var(--paper-3);text-align:left;border-radius:4px;padding:10% 8% 0;top:8%;bottom:6%;left:6%;right:6%;overflow:hidden;transform:translateY(0)translateZ(1px);box-shadow:0 6px 18px -10px #1f1b1859}.env__letter-title{font-family:var(--serif);color:var(--ink);margin-bottom:8px;font-size:clamp(16px,5vw,22px);font-style:italic;display:block}.env__line{background:var(--ink-faint);opacity:.5;border-radius:3px;height:3px;margin:9px 0;display:block}.env__line--1{width:84%}.env__line--2{width:68%}.env__line--3{width:76%}.env__front{clip-path:polygon(0 0,50% 56%,100% 0,100% 100%,0 100%);filter:drop-shadow(0 -1px #1f1b1814);background:linear-gradient(#1f1b180f,#0000 18%),linear-gradient(90deg,#f6efe7 0%,#f9f3ec 50%,#f4ece3 100%);border-radius:0 0 8px 8px;transform:translateZ(2px)}.env__address{font-family:var(--hand);color:var(--ink);opacity:.85;white-space:nowrap;font-size:clamp(17px,5.4vw,23px);line-height:1;position:absolute;bottom:9%;left:8%;transform:rotate(-2deg)}.env__postmark{aspect-ratio:1;width:21%;box-shadow:inset 0 0 0 3px var(--paper-2), inset 0 0 0 4px #c94a5e59;opacity:.8;border:1.5px solid #c94a5e8c;border-radius:50%;place-items:center;display:grid;position:absolute;bottom:8%;right:6%;transform:rotate(-12deg);-webkit-mask-image:radial-gradient(circle at 30% 40%,#000 55%,#0000 100%);mask-image:radial-gradient(circle at 30% 40%,#000 55%,#0000 100%)}.env__postmark-text{font-family:var(--mono);font-size:calc(var(--env-w) * .022);letter-spacing:.04em;color:var(--rose-deep);text-align:center;white-space:nowrap}.env__flap{transform-origin:50% 0;height:58%;transform-style:preserve-3d;transition:transform 1.1s var(--ease-silk);z-index:3;top:0;bottom:auto;left:0;right:0;transform:rotateX(0)translateZ(3px)}.env__flap-inner{clip-path:polygon(0 0,100% 0,50% 100%);-webkit-backface-visibility:hidden;backface-visibility:hidden;background:linear-gradient(#f1e7dc 0%,#e4d6c8 100%);border-radius:8px 8px 0 0;position:absolute;top:0;bottom:0;left:0;right:0}.env__flap:after{content:"";clip-path:polygon(0 0,100% 0,50% 100%);-webkit-backface-visibility:hidden;backface-visibility:hidden;background:#e6dacd;border-radius:8px 8px 0 0;position:absolute;top:0;bottom:0;left:0;right:0;transform:rotateX(180deg)}.env__seal{z-index:4;width:56px;height:56px;transition:transform .5s var(--ease-out), opacity .5s;background:radial-gradient(circle at 35% 30%,#e9788c 0%,#c94a5e 45%,#a7364a 100%);border-radius:50%;place-items:center;display:grid;top:calc(58% - 28px);bottom:auto;left:calc(50% - 28px);right:auto;transform:translateZ(6px);box-shadow:inset 0 2px #ffffff40,inset 0 -2px 4px #0000002e,0 6px 14px -6px #a7364ab3}.env__seal:before{content:"";border:1px solid #ffffff59;border-radius:50%;position:absolute;top:6px;bottom:6px;left:6px;right:6px}.env__seal-text{font-family:var(--serif);color:#fff3f4;letter-spacing:.02em;font-size:22px;font-weight:600}.envelope.is-open .env__flap{z-index:0;transition-delay:.15s;transform:rotateX(-180deg)translateZ(3px)}.envelope.is-open .env__seal{opacity:0;transform:translateZ(6px)scale(.6)rotate(-20deg)}.envelope.is-open .env__letter{z-index:2;animation:letter-out 1.4s var(--ease-out) .7s forwards}@keyframes letter-out{0%{transform:translateY(0)translateZ(1px)}55%{transform:translateY(-82%)translateZ(1px)}to{transform:translateY(-82%)translateZ(1px)}}.envelope.is-open{transition:transform 1.2s var(--ease-silk);transform:rotateX(0)rotateY(0)translateY(4px)}body.is-opening .hero__hint{opacity:0;transition:opacity .4s;animation:none}.pages{position:relative}section{padding:clamp(64px,12vh,140px) 24px;position:relative}.section-head{text-align:center;max-width:560px;margin:0 auto clamp(28px,6vh,48px)}.section-title{font-family:var(--serif);letter-spacing:-.01em;font-size:clamp(34px,8vw,56px);font-style:italic;font-weight:500;line-height:1.05}.section-sub{color:var(--ink-soft);max-width:34ch;margin-top:12px;margin-left:auto;margin-right:auto;font-size:17px}.letter{place-items:center;padding-top:clamp(40px,8vh,96px);display:grid}.paper{background:var(--paper-3);border-radius:6px;width:min(100%,620px);padding:clamp(32px,7vw,64px) clamp(24px,7vw,64px);position:relative;transform:rotate(-.4deg);box-shadow:inset 0 1px #fffc,0 30px 60px -40px #1f1b1866,0 2px 6px -2px #1f1b181f}.paper:before{content:"";background:linear-gradient(90deg,#0000,#1f1b180f,#0000);height:1px;position:absolute;top:33%;left:0;right:0}.paper__greeting{font-family:var(--serif);margin-bottom:1.2em;font-size:clamp(30px,7vw,42px);font-style:italic;font-weight:500;line-height:1.1}.paper__body p{font-family:var(--serif);color:var(--ink);margin:0 0 1.1em;font-size:clamp(19px,4.6vw,23px);line-height:1.55}.paper__signoff{font-family:var(--serif);color:var(--ink-soft);margin-top:2.2em;font-size:20px;font-style:italic}.paper__sign{font-family:var(--hand);color:var(--rose-deep);transform-origin:0;margin-top:6px;font-size:clamp(30px,7vw,40px);line-height:1;display:inline-block;transform:rotate(-3deg)}.paper__body .line{overflow:hidden}.reasons{background:radial-gradient(80% 50% at 50% 60%,#8a9a8b29,#0000 70%),0 0;overflow:hidden}.deck{perspective:1200px;touch-action:pan-y;-webkit-user-select:none;user-select:none;width:min(86vw,380px);height:min(118vw,500px);margin:0 auto;position:relative}.card{background:var(--paper-3);transform-origin:50% 100%;will-change:transform;cursor:grab;border-radius:18px;flex-direction:column;padding:28px 28px 32px;display:flex;position:absolute;top:0;bottom:0;left:0;right:0;box-shadow:inset 0 1px #ffffffe6,0 30px 50px -30px #1f1b1873,0 2px 4px -1px #1f1b181a}.card:active{cursor:grabbing}.card__num{font-family:var(--mono);letter-spacing:.16em;color:var(--gold-ink);font-size:12px}.card__num:before{content:"№ "}.card__text{font-family:var(--serif);letter-spacing:-.005em;margin-top:auto;margin-bottom:auto;font-size:clamp(22px,5.4vw,28px);line-height:1.32}.card__heart{width:22px;height:22px;color:var(--blush);position:absolute;top:24px;right:24px}.card__heart svg{fill:currentColor;width:100%;height:100%;display:block}.card.is-gone{pointer-events:none}.deck__hint{text-align:center;color:var(--ink-soft);margin-top:56px;font-size:15px;transition:opacity .4s}.deck__end{text-align:center;font-family:var(--serif);opacity:0;transition:opacity .8s var(--ease-out) .3s, transform .8s var(--ease-out) .3s;pointer-events:none;place-items:center;padding:24px;font-size:clamp(22px,5.6vw,28px);font-style:italic;line-height:1.3;display:grid;position:absolute;top:0;bottom:0;left:0;right:0;transform:translateY(8px)}.deck__end.is-visible{opacity:1;transform:none}.deck__progress{justify-content:center;gap:6px;margin-top:20px;display:flex}.deck__progress span{background:var(--ink-faint);border-radius:50%;width:5px;height:5px;transition:background .3s,transform .3s}.deck__progress span.is-done{background:var(--rose)}.deck__progress span.is-current{background:var(--ink);transform:scale(1.5)}.eleven{text-align:center;place-items:center;gap:10px;min-height:80svh;display:grid}.eleven__formula{font-family:var(--serif);letter-spacing:-.03em;font-variant-numeric:lining-nums;font-size:clamp(56px,18vw,140px);font-weight:400;line-height:1}.eleven__formula .num{display:inline-block}.eleven__caption{font-family:var(--serif);color:var(--ink-soft);font-size:clamp(20px,5vw,26px);font-style:italic}.eleven__counter{place-items:center;margin-top:clamp(32px,6vh,56px);display:grid}.eleven__days{font-family:var(--serif);letter-spacing:-.03em;color:var(--rose-deep);font-variant-numeric:tabular-nums lining-nums;font-size:clamp(64px,20vw,160px);line-height:.95}.eleven__label{font-family:var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);margin-top:8px;font-size:12px}.eleven__since{font-family:var(--mono);letter-spacing:.06em;color:var(--ink-soft);font-size:12px}.final{text-align:center;cursor:pointer;min-height:100svh;padding-bottom:max(64px, env(safe-area-inset-bottom));background:radial-gradient(70% 50% at 50% 55%,#e8b4b859,#0000 70%),0 0;align-content:center;place-items:center;gap:14px;display:grid}.final__line{font-family:var(--serif);letter-spacing:-.02em;font-size:clamp(48px,14vw,120px);font-style:italic;font-weight:500;line-height:1}.final__line .char{display:inline-block}.final__sub{color:var(--ink-soft);font-size:15px}.final__sign{font-family:var(--hand);color:var(--rose-deep);margin-top:28px;font-size:clamp(30px,7vw,44px);transform:rotate(-3deg)}.reveal{opacity:0;transform:translateY(18px)}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero__hint{animation:none}.envelope,.env__flap,.env__seal{transition-duration:10ms!important}.envelope.is-open .env__letter{animation-duration:10ms;animation-delay:0s}.reveal{opacity:1;transform:none}}.letter{isolation:isolate;position:relative;overflow:hidden}.sun{aspect-ratio:1;filter:blur(4px);z-index:-1;pointer-events:none;will-change:transform;background:radial-gradient(circle,#ffe2a0 0%,#ffcd8cbf 18%,#fac3a566 38%,#f5beaa26 55%,#0000 70%);border-radius:50%;width:min(130vw,760px);position:absolute;top:50%;left:50%;transform:translate(-50%,30%)}.paper__poem-lead{font-family:var(--serif);margin:0 0 1.4em;font-size:clamp(19px,4.6vw,23px);line-height:1.55}.paper__poem{font-family:var(--hand);text-align:center;color:var(--ink);margin:0 clamp(-18px,-3vw,-8px) .6em;padding:1.2em 0;font-size:clamp(21px,5.3vw,30px);line-height:1.4;position:relative}.paper__poem:before,.paper__poem:after{content:"";background:linear-gradient(90deg,#0000,#1f1b182e,#0000);height:1px;position:absolute;left:18%;right:18%}.paper__poem:before{top:0}.paper__poem:after{bottom:0}.paper__poem-line{min-height:1.4em;display:block}.paper__poem-line--gap{min-height:.8em}.paper__poem-line .word{white-space:nowrap;display:inline-block}.paper__poem-line .char{display:inline-block}.paper__poem-note{font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);text-align:center;margin-bottom:2.2em;font-size:11px}.paper__after{margin-top:0}.wishes{overflow:hidden}.jar-scene{justify-items:center;width:min(86vw,360px);margin:0 auto;padding-top:210px;display:grid;position:relative}.jar{-webkit-tap-highlight-color:transparent;transform-origin:50% 100%;width:190px;height:250px;transition:transform .4s var(--ease-out);display:block;position:relative}.jar:active{transform:scale(.98)}.jar:focus-visible{box-shadow:0 0 0 3px var(--paper), 0 0 0 5px var(--rose);border-radius:24px;outline:none}.jar>span{display:block;position:absolute}.jar__lid{z-index:3;background:linear-gradient(#d9b47a 0%,#c9a05e 55%,#b58d4c 100%);border-radius:8px 8px 4px 4px;width:132px;height:26px;top:0;left:50%;transform:translate(-50%);box-shadow:inset 0 1px #ffffff73,inset 0 -3px #00000014,0 4px 8px -4px #1f1b1866}.jar__lid:after{content:"";background:repeating-linear-gradient(90deg,#0000 0 6px,#0000000f 6px 8px);border-radius:4px;position:absolute;top:5px;bottom:5px;left:8px;right:8px}.jar__neck{z-index:2;background:#ffffff73;border:1.5px solid #ffffffe6;border-top:0;border-radius:0 0 10px 10px;width:118px;height:22px;top:22px;left:50%;transform:translate(-50%)}.jar__body{background:linear-gradient(#ffffff40,#ffffff1f);border-radius:30px 30px 38px 38px;top:40px;bottom:0;left:0;right:0;overflow:hidden;box-shadow:inset 0 0 0 1.5px #ffffffe6,0 30px 40px -30px #1f1b1880}.jar__body>span{display:block;position:absolute}.jar__glass{border-radius:inherit;pointer-events:none;z-index:2;background:linear-gradient(90deg,#ffffff8c 0%,#fff0 18% 78%,#ffffff59 100%),linear-gradient(#fff0 70%,#8a9a8b1f 100%);top:0;bottom:0;left:0;right:0}.jar__shine{z-index:3;pointer-events:none;background:linear-gradient(#ffffffe6,#fff0);border-radius:10px;width:14px;height:120px;top:14px;left:18px}.jar__papers{z-index:1;top:0;bottom:0;left:0;right:0}.jar__paper{background:var(--paper-3);width:58px;height:22px;transform:translate(var(--px), var(--py)) rotate(var(--pr));border-radius:3px;position:absolute;top:0;left:0;box-shadow:0 1px 2px #1f1b182e,0 0 0 1px #1f1b180a}.jar__paper:after{content:"";background:#1f1b181f;height:1px;position:absolute;top:50%;left:10px;right:10px}.jar__label{text-align:center;font-family:var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);animation:hint-breathe 2.6s var(--ease-silk) infinite;font-size:11px;bottom:-30px;left:0;right:0}.jar__count{font-family:var(--mono);letter-spacing:.08em;color:var(--ink-soft);margin-top:44px;font-size:12px}.wish-card{background:var(--paper-3);width:min(84vw,320px);font-family:var(--hand);text-align:center;color:var(--ink);opacity:0;pointer-events:none;border-radius:6px;padding:22px 24px;font-size:clamp(22px,6vw,28px);line-height:1.25;position:absolute;bottom:calc(100% - 186px);left:50%;transform:translate(-50%);box-shadow:inset 0 1px #ffffffe6,0 24px 40px -24px #1f1b1873}.wish-card:before{content:"";background:#1f1b1814;height:1px;position:absolute;top:50%;left:12px;right:12px}.wish-card.is-empty{font-family:var(--serif);font-size:20px;font-style:italic}.note{z-index:2;width:56px;height:40px;transition:width .45s var(--ease-out), height .45s var(--ease-out), transform .45s var(--ease-out), box-shadow .3s;text-align:left;cursor:pointer;background:#fff4c2;border-radius:2px;position:absolute;overflow:hidden;transform:rotate(-6deg);box-shadow:0 6px 12px -8px #1f1b1880,0 0 0 1px #1f1b180a}.note__tape{background:#e8b4b88c;width:46px;height:16px;position:absolute;top:-8px;left:50%;transform:translate(-50%)rotate(3deg);box-shadow:inset 0 0 0 1px #fff6}.note__text{font-family:var(--hand);color:var(--ink);opacity:0;white-space:nowrap;padding:16px 14px 12px;font-size:20px;line-height:1.2;transition:opacity .3s;display:block}.note.is-open{z-index:5;width:210px;height:auto;min-height:70px;transform:rotate(-2deg);box-shadow:0 16px 30px -18px #1f1b1899,0 0 0 1px #1f1b180d}.note.is-open .note__text{opacity:1;white-space:normal;transition-delay:.15s}.note:focus-visible{box-shadow:0 0 0 3px var(--paper), 0 0 0 5px var(--rose);outline:none}.paper .note{top:-14px;right:18px}.note--corner{bottom:24px;right:20px;transform:rotate(5deg)}.note--left{left:20px;right:auto;transform:rotate(-7deg)}.wish-card__text{display:block}.wish-card__stamp{font-family:var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--rose-deep);background:var(--paper-3);opacity:0;border:2px solid #c94a5ebf;border-radius:6px;padding:4px 10px;font-size:11px;position:absolute;bottom:-14px;right:12px;transform:rotate(-8deg);-webkit-mask-image:radial-gradient(circle at 40% 60%,#000 60%,#0000 105%);mask-image:radial-gradient(circle at 40% 60%,#000 60%,#0000 105%)}@media (prefers-reduced-motion:reduce){.sun{transform:translate(-50%,-40%)}.jar__label{animation:none}}
