:root{--night: #0c0914;--plum: #2a1e3d;--cream: #f3e9dc;--muted: #b9adc4;--gold: #e8cf8a;--gold-deep: #b8913f;--pink: #f2b8c6;--red: #b0172a;--serif: "Cormorant Garamond", Georgia, serif;--body: "EB Garamond", Georgia, serif;--sans: "Inter", system-ui, sans-serif;--script: "Pinyon Script", cursive}*{margin:0;padding:0;box-sizing:border-box}html{background:var(--night)}body{background:var(--night);color:var(--cream);font-family:var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}body.locked{overflow:hidden;height:100svh}#scene{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:0}#vignette{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 50% 40%,#0c091400 55%,#0c0914a6),linear-gradient(180deg,#0c091400 60%,#0c091459)}#flood{--r: 0px;position:fixed;inset:0;z-index:30;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--x, 50%) var(--y, 50%),#fffdf6 0%,#fff1db 18%,#ffd9bf 40%,#f7c3cf 70%,#eaa6bb 100%);-webkit-mask-image:radial-gradient(circle at var(--x, 50%) var(--y, 50%),#000 0,#000 var(--r),transparent calc(var(--r) + 26vmax));mask-image:radial-gradient(circle at var(--x, 50%) var(--y, 50%),#000 0,#000 var(--r),transparent calc(var(--r) + 26vmax))}#flood-ring{position:fixed;z-index:31;pointer-events:none;width:20px;height:20px;border-radius:50%;opacity:0;transform:translate(-50%,-50%);margin:0;box-shadow:0 0 0 1.5px #fffaebd9,0 0 22px 5px #ffd6b473}.label{font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}.screen{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;background:radial-gradient(ellipse 80% 60% at 50% 40%,#241836,#120c1c 60%,#08060d)}.screen[hidden]{display:none}#gate button,.cta{font-family:var(--sans);font-weight:500;letter-spacing:.14em;text-transform:uppercase;font-size:12px;border:1px solid rgba(232,207,138,.6);color:var(--gold);background:#e8cf8a0f;padding:14px 20px;border-radius:999px;cursor:pointer}.gate-msg{margin-top:18px;font-style:italic;color:var(--pink);min-height:1.4em}.early-text{font-family:var(--serif);font-style:italic;font-size:clamp(28px,7vw,44px);margin-top:18px;line-height:1.3}#open{background:radial-gradient(ellipse 90% 70% at 50% 42%,var(--screen-a, #2a1c3e) 0%,var(--screen-b, #150f22) 55%,var(--screen-c, #07050c) 100%);overflow:hidden}.night{position:absolute;inset:0;pointer-events:none}.stars{position:absolute;inset:-50%;background-image:radial-gradient(1.2px 1.2px at 20px 30px,rgba(255,255,255,.8),transparent 60%),radial-gradient(1px 1px at 120px 80px,rgba(255,240,220,.7),transparent 60%),radial-gradient(1.4px 1.4px at 200px 160px,rgba(255,255,255,.6),transparent 60%),radial-gradient(1px 1px at 60px 190px,rgba(255,220,230,.7),transparent 60%),radial-gradient(1.1px 1.1px at 170px 20px,rgba(255,255,255,.5),transparent 60%);background-size:230px 230px;animation:twinkle 6s ease-in-out infinite;opacity:.7}.stars.s2{background-size:310px 310px;background-position:90px 40px;animation-delay:-3s;opacity:.45}@keyframes twinkle{50%{opacity:.25}}.drift{position:absolute;inset:0;pointer-events:none}.drift i{position:absolute;top:-20px;width:12px;height:8px;border-radius:70% 30%;background:linear-gradient(135deg,#ffd3df,#e88aa3);opacity:.75;animation:fall linear infinite}@keyframes fall{0%{transform:translate3d(0,-20px,0) rotate(0)}to{transform:translate3d(var(--dx, 60px),110vh,0) rotate(540deg)}}.daytag{position:relative;margin-bottom:46px;color:#e8cf8acc}.stage{position:relative;animation:float 6s ease-in-out infinite}@keyframes float{50%{transform:translateY(-8px) rotate(-.4deg)}}.envelope{position:relative;width:min(94vw,680px,105vh);aspect-ratio:3 / 2;perspective:1400px;transform:rotate(-1.5deg)}.env-shadow{position:absolute;left:8%;right:8%;bottom:-34px;height:26px;border-radius:50%;background:radial-gradient(ellipse,#0000008c,#0000 70%);filter:blur(4px)}.env-back{position:absolute;inset:0;z-index:0;border-radius:8px;overflow:hidden;background:#e9dccb;box-shadow:0 30px 70px #0009,0 0 0 1px #b8955a40}.env-back .liner{position:absolute;left:0;right:0;top:0;height:62%;background:radial-gradient(circle at 10px 10px,rgba(255,190,205,.35) 2px,transparent 2.5px) 0 0 / 22px 22px,linear-gradient(180deg,var(--liner, #7a1f33),color-mix(in srgb,var(--liner, #7a1f33) 75%,black))}.letter{position:absolute;left:7%;right:7%;top:9%;height:82%;z-index:1;flex-direction:column;gap:6px;background:#fbf6ee;border-radius:4px;display:flex;align-items:center;justify-content:flex-start;padding-top:9%;font-family:var(--script);font-size:clamp(26px,7.5vw,36px);color:#3a2a2e;box-shadow:0 -2px 8px #00000014}.env-front{position:absolute;inset:0;z-index:3;border-radius:8px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .38  0 0 0 0 .3  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>") 0 0 / 200px 200px,linear-gradient(170deg,#f5ebdc,#ead9c2);clip-path:polygon(0 0,50% 58%,100% 0,100% 100%,0 100%);box-shadow:inset 0 -24px 40px #785a3c1f}.env-front:after{content:"";position:absolute;inset:0;clip-path:inherit;background:linear-gradient(32deg,rgba(120,90,60,.1) 0 1px,transparent 1px) 0 100% / 100% 100% no-repeat}.addr{position:absolute;left:0;right:0;bottom:5%;text-align:center;font-family:var(--script);font-size:clamp(28px,7.6vw,38px);color:#4a3530;opacity:.85}.env-flap{position:absolute;left:0;right:0;top:0;height:64%;z-index:4;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .38  0 0 0 0 .3  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>") 0 0 / 200px 200px,linear-gradient(180deg,#efe2cf,#e0cfb6);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;transform-style:preserve-3d;backface-visibility:visible;filter:drop-shadow(0 6px 8px rgba(0,0,0,.18))}.env-flap .liner{position:absolute;inset:0;opacity:0;background:radial-gradient(circle at 10px 10px,rgba(255,190,205,.35) 2px,transparent 2.5px) 0 0 / 22px 22px,linear-gradient(0deg,var(--liner, #7a1f33),color-mix(in srgb,var(--liner, #7a1f33) 75%,black))}.seal{position:absolute;left:50%;top:55%;width:120px;height:120px;transform:translate(-50%,-50%);border:0;background:none;cursor:pointer;z-index:5;padding:0;filter:drop-shadow(0 8px 12px rgba(0,0,0,.45))}.seal svg{width:100%;height:100%;overflow:visible}.seal text{font-family:var(--serif);font-size:13px;font-weight:500;fill:#ffc8c8b3;letter-spacing:.1em}.seal:before{content:"";position:absolute;inset:-16px;border-radius:50%;background:radial-gradient(circle,#f2788c59,#f2788c00 65%);animation:glow 2.8s ease-in-out infinite;z-index:-1}@keyframes glow{50%{transform:scale(1.25);opacity:.35}}.hint{position:relative;margin-top:72px;font-style:italic;color:var(--muted);font-size:21px;animation:breathe 3s ease-in-out infinite}@keyframes breathe{50%{opacity:.45}}#story{position:relative;z-index:5}#story[hidden]{display:none}section{position:relative;padding:0 20px}.hero:before,.days:before,.receive:before,.close:before{content:"";position:absolute;inset:10% -10%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 60% 45% at 50% 50%,#0c09149e,#0c091400 75%)}.hero,.days,.receive,.close{isolation:isolate}.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.title{font-family:var(--serif);font-weight:400;font-style:italic;font-size:clamp(56px,16vw,150px);line-height:.95;letter-spacing:-.01em;margin:22px 0 18px;text-shadow:0 2px 40px rgba(12,9,20,.6)}.title .w{display:inline-block}.title .you{color:var(--accent, var(--pink))}.day-line{font-family:var(--serif);font-size:clamp(20px,5vw,28px);color:var(--cream)}.day-line em{color:var(--gold)}.scroll-cue{position:absolute;bottom:36px;left:0;right:0;font-style:italic;color:var(--muted);font-size:15px}.prelude{display:flex;flex-direction:column;align-items:center;gap:62vh;padding:34vh 20px 46vh;perspective:1200px}.note{position:relative;width:min(88vw,410px);padding:36px 28px 38px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .38  0 0 0 0 .3  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>") 0 0 / 200px 200px,linear-gradient(170deg,#fdf8f0,#f4eadb);color:#2b2622;border-radius:3px;transform:rotate(var(--r));box-shadow:0 2px #fff9 inset,0 40px 80px #06030c8c,0 10px 24px #06030c59}.note:nth-child(1){align-self:flex-start;margin-left:8vw}.note:nth-child(2){align-self:flex-end;margin-right:8vw}@media(max-width:640px){.note:nth-child(n){align-self:center;margin:0}}.note .no{font-family:var(--serif);font-style:italic;font-size:20px;color:#a4877a}.note .nb{font-family:var(--body);font-style:italic;font-size:clamp(20px,5.3vw,26px);line-height:1.5;margin-top:10px}.note .h{position:absolute;right:26px;bottom:22px;width:22px;height:22px;fill:var(--red)}.note .petal-press{position:absolute;top:-18px;right:22px;width:46px;height:46px;fill:#f2b3c3;transform:rotate(28deg);filter:drop-shadow(0 3px 4px rgba(0,0,0,.25));opacity:.95}.days{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;padding-top:12vh;padding-bottom:10vh}.days:before{inset:0 -10% 40%}.days h2,.receive h2{font-family:var(--serif);font-weight:400;font-style:italic;font-size:clamp(30px,8vw,54px);line-height:1.1;margin:14px 0 44px;max-width:640px}.row{list-style:none;display:grid;grid-template-columns:repeat(7,1fr);gap:6px;width:min(94vw,640px)}.row li{display:flex;flex-direction:column;align-items:center;gap:10px}.bud{width:100%;max-width:64px;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(232,207,138,.18);background:#140e1e80}.bud svg{width:64%}.row li.today .bud{border-color:#e8cf8abf;box-shadow:0 0 24px #f2b8c659,inset 0 0 18px #f2b8c626}.row li.future{opacity:.55}.row .n{font-family:var(--serif);font-size:15px;color:var(--muted)}.row li.today .n{color:var(--gold)}.row .s{font-family:var(--sans);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);min-height:1.2em}.receive{min-height:110svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-top:10vh}.cta{font-size:13px;padding:18px 30px;background:linear-gradient(180deg,#e8cf8a29,#e8cf8a0d);box-shadow:0 0 40px #e8cf8a26}.cta:active{transform:scale(.98)}.cta-note{margin-top:18px;font-style:italic;color:var(--muted)}.saved{margin-top:40px;width:min(86vw,420px)}.saved img{width:100%;border-radius:10px;box-shadow:0 30px 70px #0000008c;-webkit-touch-callout:default}.saved figcaption{margin-top:14px;font-style:italic;color:var(--muted);font-size:15px}.close{min-height:90svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:22px;padding-bottom:12vh}.tomorrow{font-family:var(--serif);font-style:italic;font-size:clamp(30px,8vw,52px);line-height:1.15;max-width:640px}.sig{font-family:var(--script);font-size:clamp(44px,12vw,64px);color:var(--gold);display:inline-flex;align-items:center;gap:10px;margin-top:18px}.sig svg{width:22px;height:22px;fill:var(--red);margin-top:12px}.heart-canvas{position:fixed;inset:0;width:100vw;height:100vh;z-index:40;pointer-events:none}@media(prefers-reduced-motion:reduce){.seal,.hint{animation:none}}.letter small{font-family:var(--sans);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:#a4877a}.letter svg{width:16px;height:16px;fill:var(--red)}.arrived{position:relative;margin-bottom:52px;font-family:var(--serif);font-style:italic;font-size:clamp(30px,8vw,40px);color:var(--cream);letter-spacing:.01em}.stage{perspective:1400px}.face,.envelope{backface-visibility:hidden;-webkit-backface-visibility:hidden}.face{position:absolute;inset:0;z-index:6;width:min(94vw,680px,105vh);aspect-ratio:3 / 2;cursor:pointer;border-radius:8px;transform:rotate(-1.5deg);background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .38  0 0 0 0 .3  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>") 0 0 / 200px 200px,linear-gradient(170deg,#f6ecdd,#ead9c2);box-shadow:0 30px 70px #0009,0 0 0 1px #b8955a40,inset 0 0 40px #785a3c1a;color:#3a2a2e;overflow:hidden}.face .from{position:absolute;left:6%;top:8%;font-family:var(--script);font-size:clamp(15px,4.2vw,19px);line-height:1.05;color:#5a4440}.face .from small{display:block;font-family:var(--sans);font-size:7px;letter-spacing:.26em;text-transform:uppercase;color:#a4877a;margin-bottom:2px}.face .stamp{position:absolute;right:6%;top:8%;width:16%;aspect-ratio:4 / 5;padding:5px;background:#fbf4ea;outline:3px dotted #ead9c2;outline-offset:-1px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 2px 4px #00000026}.face .stamp:before{content:"";position:absolute;inset:5px;border:1px solid rgba(176,23,42,.5);background:linear-gradient(160deg,#fde9ec,#f6d2d9)}.face .stamp svg{position:relative;width:52%;fill:var(--red)}.face .stamp b{position:absolute;top:7px;left:8px;font-family:var(--serif);font-size:10px;color:#8e1c2c}.face .stamp small{position:relative;font-family:var(--sans);font-size:6px;letter-spacing:.3em;text-transform:uppercase;color:#8e1c2c;margin-top:2px}.face .postmark{position:absolute;right:13%;top:14%;width:36%;transform:rotate(-12deg);opacity:.62}.face .postmark svg{width:100%;fill:none;stroke:#4a3a52;stroke-width:1.6}.face .postmark em{position:absolute;left:0;width:50%;text-align:center;font-family:var(--sans);font-style:normal;font-weight:600;font-size:7.5px;letter-spacing:.12em;color:#4a3a52;top:36%}.face .postmark em.t{top:54%;font-size:6.5px}.face .to{position:absolute;left:0;right:0;top:50%;display:flex;flex-direction:column;align-items:center;text-align:center}.face .miss{font-family:var(--script);font-size:clamp(48px,13vw,76px);line-height:1;color:#2e1f24;border-bottom:1px solid rgba(74,53,48,.2);padding:0 10px 6px}.face .line{font-family:var(--script);font-size:clamp(14px,3.9vw,18px);line-height:1.35;color:#4a3530;border-bottom:1px solid rgba(74,53,48,.18);padding:0 6px}.face .line:first-of-type{margin-top:4px}.face .byhand{position:absolute;left:6%;bottom:8%;padding:3px 7px;border:1.5px solid rgba(176,23,42,.7);border-radius:3px;transform:rotate(-6deg);font-family:var(--sans);font-weight:700;font-size:7px;line-height:1.3;letter-spacing:.24em;text-transform:uppercase;color:#b0172acc}.envelope{transform:rotateY(180deg) rotate(-1.5deg)}.music{position:fixed;top:max(16px,env(safe-area-inset-top));right:16px;z-index:60;display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:999px;border:1px solid rgba(232,207,138,.35);background:#0c091473;color:#f3e9dcd9;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer;font-family:var(--sans);font-size:10px;letter-spacing:.22em;text-transform:uppercase}.music .bars{display:flex;align-items:flex-end;gap:2px;height:12px}.music .bars i{width:2px;height:100%;border-radius:1px;background:var(--gold);transform-origin:bottom;animation:eq 1s ease-in-out infinite}.music .bars i:nth-child(2){animation-delay:-.3s}.music .bars i:nth-child(3){animation-delay:-.6s}.music .bars i:nth-child(4){animation-delay:-.15s}.music.off .bars i{animation:none;transform:scaleY(.25);opacity:.6}@keyframes eq{0%,to{transform:scaleY(.3)}50%{transform:scaleY(1)}}@media(max-width:480px){.music .lbl{display:none}}#gate,#hello{background:radial-gradient(ellipse 90% 70% at 50% 42%,#2a1c3e,#150f22 55%,#07050c);overflow:hidden}.g-wrap{position:relative;display:flex;flex-direction:column;align-items:center;width:100%}.lock{width:46px;margin-bottom:18px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5));overflow:visible}.lock .shackle{transform-box:fill-box;transform-origin:100% 100%}.g-kicker{color:#e8cf8acc}.g-q{margin:16px 0 34px;font-family:var(--serif);font-weight:400;font-size:clamp(26px,7vw,40px);line-height:1.2;color:var(--cream)}.g-q em{display:block;margin-top:6px;color:var(--pink)}.wheels{--h: 54px;position:relative;display:flex;gap:10px;height:calc(var(--h) * 5);perspective:900px}.wheel{position:relative;width:82px;height:100%;overflow:hidden;border-radius:14px;cursor:grab;touch-action:none;outline:none;background:linear-gradient(180deg,#e9dccb,#fbf6ee 20%,#fffaf2,#fbf6ee 80%,#e9dccb);box-shadow:inset 0 14px 18px -10px #3c281e73,inset 0 -14px 18px -10px #3c281e73,0 20px 40px #00000073;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%)}.wheel.wide{width:138px}.wheel:active{cursor:grabbing}.wheel:focus-visible{box-shadow:0 0 0 2px var(--gold),0 20px 40px #00000073}.wheel .track{position:absolute;left:0;right:0;top:50%;transform-style:preserve-3d}.wheel .it{position:absolute;left:0;right:0;height:var(--h);margin-top:calc(var(--h) / -2);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:30px;font-weight:500;color:#3a2a2e;backface-visibility:hidden;-webkit-user-select:none;user-select:none}.wheel.wide .it{font-size:25px;font-style:italic}.wheels .band{position:absolute;left:-8px;right:-8px;top:50%;height:var(--h);margin-top:calc(var(--h) / -2);pointer-events:none;border-top:1.5px solid rgba(232,207,138,.85);border-bottom:1.5px solid rgba(232,207,138,.85);box-shadow:0 0 24px #e8cf8a2e}.wheels.ok .it.sel{color:#a4781f;text-shadow:0 0 14px rgba(232,207,138,.8)}.w-labels{display:flex;gap:10px;margin-top:10px}.w-labels span{width:82px;text-align:center;font-family:var(--sans);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}.w-labels span.wide{width:138px}.unlock{margin-top:30px;display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border-radius:999px;cursor:pointer;border:1px solid rgba(232,207,138,.6);background:linear-gradient(180deg,#e8cf8a2e,#e8cf8a0d);color:var(--gold);font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.2em;text-transform:uppercase;box-shadow:0 0 40px #e8cf8a1f}.unlock svg{width:14px;height:14px;fill:var(--red)}.unlock:active{transform:scale(.97)}.g-msg{margin-top:18px;min-height:1.4em;font-family:var(--serif);font-style:italic;font-size:20px;color:var(--pink)}@media(max-width:380px){.wheels{--h: 48px;gap:8px}.wheel{width:72px}.wheel.wide{width:120px}.w-labels span{width:72px}.w-labels span.wide{width:120px}}.hello-h{position:relative;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(56px,15vw,120px);line-height:1;color:var(--cream);text-shadow:0 0 40px rgba(242,184,198,.25)}.hello-h .ch{display:inline-block}.hello-p{position:relative;margin-top:22px;font-family:var(--serif);font-style:italic;font-size:clamp(22px,6vw,30px);color:var(--muted)}
