:root{--black:#050505;--paper:#f6eed9;--paper-edge:#e7d8b6;--ink:#4a3526;--ink-soft:#6b513c;--gold:#c9a35b;--gold-soft:#e3c98f;--wax:#26201a;--wax-glow:#fff0d28c}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{min-height:100vh;color:var(--paper);background:var(--black);font-family:EB Garamond,Georgia,serif;overflow-x:hidden}.livebg{z-index:0;pointer-events:none;position:fixed;inset:0;overflow:hidden}.blob{filter:blur(90px);opacity:.24;mix-blend-mode:screen;will-change:transform;border-radius:50%;position:absolute}.b1{background:radial-gradient(circle,#beaa82d9,#0000 70%);width:56vw;height:56vw;animation:26s ease-in-out infinite alternate drift1;top:-20vw;left:-16vw}.b2{background:radial-gradient(circle,#2d4b82d9,#0000 70%);width:50vw;height:50vw;animation:33s ease-in-out infinite alternate drift2;bottom:-22vw;right:-18vw}.b3{background:radial-gradient(circle,#aa7837b3,#0000 70%);width:42vw;height:42vw;animation:40s ease-in-out infinite alternate drift3;top:52%;left:48%}@keyframes drift1{0%{transform:translate(0)scale(1)}to{transform:translate(7vw,5vw)scale(1.18)}}@keyframes drift2{0%{transform:translate(0)scale(1.05)}to{transform:translate(-6vw,-4vw)scale(1)}}@keyframes drift3{0%{transform:translate(-50%)scale(1)}to{transform:translate(-44%,-6vw)scale(1.12)}}.twinkle,.twinkle:after{background-image:radial-gradient(1.8px 1.8px at 18% 28%,#fff,#0000),radial-gradient(1.6px 1.6px at 72% 62%,#fff6e0f2,#0000),radial-gradient(1.4px 1.4px at 42% 82%,#ffffffe6,#0000),radial-gradient(1.6px 1.6px at 86% 22%,#fffffff2,#0000),radial-gradient(1.4px 1.4px at 55% 44%,#fff4d8e6,#0000),radial-gradient(1.3px 1.3px at 9% 68%,#ffffffd9,#0000),radial-gradient(1.3px 1.3px at 33% 15%,#ffffffd9,#0000),radial-gradient(1.2px 1.2px at 64% 9%,#fffae6cc,#0000),radial-gradient(1.2px 1.2px at 95% 78%,#fffc,#0000);background-repeat:repeat;background-size:240px 240px;animation:5s ease-in-out infinite twinkle,140s linear infinite starDriftA;position:absolute;inset:0}.twinkle:after{content:"";opacity:.7;background-size:170px 170px;animation:5s ease-in-out 2.5s infinite twinkle,100s linear infinite starDriftB}@keyframes twinkle{0%,to{opacity:.5}50%{opacity:.95}}@keyframes starDriftA{0%{background-position:0 0}to{background-position:240px 320px}}@keyframes starDriftB{0%{background-position:60px 40px}to{background-position:400px 380px}}.candle{z-index:0;pointer-events:none;opacity:0;background:radial-gradient(42% 38% at 50% 46%,#ffc47829 0%,#0000 70%),radial-gradient(70% 60%,#965a281a 0%,#0000 75%);animation:6s ease-in-out infinite candleFlicker;position:fixed;inset:0}@keyframes candleFlicker{0%,to{filter:brightness()}45%{filter:brightness(1.12)}60%{filter:brightness(.95)}}.embers{z-index:1;pointer-events:none;position:fixed;inset:0}.petals{z-index:2;pointer-events:none;position:fixed;inset:0;overflow:hidden}.petal{opacity:0;will-change:transform;filter:drop-shadow(0 2px 4px #00000059);background:radial-gradient(circle at 30% 30%,#fff,#e6e2d8 70%);border-radius:80% 0;width:18px;height:18px;animation:linear infinite petalFall;position:absolute;top:-8vh}@keyframes petalFall{0%{opacity:0;transform:translateY(0)translate(0)rotate(0)}10%{opacity:.85}90%{opacity:.7}to{opacity:0;transform:translateY(112vh)translate(12vw)rotate(420deg)}}.grain{z-index:3;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:fixed;inset:0}.vignette{z-index:4;pointer-events:none;background:radial-gradient(120% 110% at 50% 42%,#0000 45%,#000000d9 100%);position:fixed;inset:0}.gate{z-index:30;text-align:center;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);background:radial-gradient(120% 100%,#03020440 0%,#03020480 100%);justify-content:center;align-items:center;padding:8vmin 6vw;transition:opacity 1s,visibility 1s;display:flex;position:fixed;inset:0}.gate.hidden{opacity:0;visibility:hidden}.gate-inner{flex-direction:column;align-items:center;gap:.6rem;display:flex}.gate-eyebrow{letter-spacing:.4em;text-transform:uppercase;color:var(--gold-soft);opacity:.85;padding-left:.4em;font-family:EB Garamond,serif;font-size:.78rem;font-style:italic}.gate-title{color:var(--paper);text-shadow:0 2px 30px #000000b3;margin-bottom:1.6rem;font-family:Cormorant Garamond,serif;font-size:clamp(2rem,7vw,3.6rem);font-weight:500;line-height:1.1}.gate-sub{color:#f6eed999;margin-bottom:1.4rem;font-size:clamp(1rem,2.6vw,1.2rem);font-style:italic}.gate-form{gap:.6rem;width:min(420px,86vw);display:flex}.gate input{text-align:center;color:var(--paper);background:#ffffff0d;border:1px solid #ffffff80;border-radius:999px;outline:none;flex:1;padding:.8rem 1.1rem;font-family:EB Garamond,serif;font-size:1.05rem;transition:border-color .3s,box-shadow .3s}.gate input::placeholder{color:#f6eed959;font-style:italic}.gate input:focus{border-color:#fff;box-shadow:0 0 18px #ffffff59}.gate button{letter-spacing:.12em;text-transform:uppercase;color:#1a1208;cursor:pointer;background:linear-gradient(#fff,#ece6da);border:none;border-radius:999px;padding:.8rem 1.6rem;font-family:Cormorant Garamond,serif;font-size:1.05rem;transition:transform .2s,box-shadow .3s}.gate button:hover{transform:translateY(-1px);box-shadow:0 10px 28px #ffffff47}.gate-error{min-height:1.3em;color:var(--gold-soft);opacity:0;margin-top:1rem;font-size:.95rem;font-style:italic;transition:opacity .3s}.gate-error.show{opacity:1}.shake{animation:.4s shake}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-8px)}40%,80%{transform:translate(8px)}}.scene{z-index:10;filter:blur(14px)brightness(.4);opacity:0;justify-content:center;align-items:center;min-height:100svh;padding:8vmin 5vw;transition:filter 1.1s,opacity 1.1s;display:flex;position:relative}.scene.unlocked{filter:none;opacity:1}.envelope{aspect-ratio:460/300;cursor:pointer;width:min(460px,88vw);transform-style:preserve-3d;perspective:1400px;position:absolute;top:50%;left:50%;translate:-50% -50%}.envelope:focus-visible{outline:2px solid var(--gold);outline-offset:14px;border-radius:12px}.envelope:after{content:"";filter:blur(10px);z-index:0;background:radial-gradient(#0009,#0000 70%);height:16%;position:absolute;bottom:-9%;left:10%;right:10%}.env-back,.env-front{filter:drop-shadow(0 30px 50px #0000008c);width:100%;height:100%;position:absolute;inset:0}.env-back{z-index:1}.env-front{z-index:4;filter:drop-shadow(0 -4px 6px #5037142e)}.peek{z-index:2;background:linear-gradient(180deg, #fdf8ec, var(--paper-edge));border-radius:4px 4px 2px 2px;height:60%;position:absolute;top:16%;left:9%;right:9%;box-shadow:0 6px 16px #00000047,inset 0 1px #ffffffb3}.peek:before{content:"";background:repeating-linear-gradient(#0000 0 9px,#785a321a 9px 10px);height:42%;position:absolute;top:24%;left:14%;right:14%}.flap{z-index:6;transform-origin:top;backface-visibility:hidden;filter:drop-shadow(0 8px 10px #4632194d);width:100%;height:60%;position:absolute;top:0;left:0;transform:rotateX(0)}.flap svg{width:100%;height:100%;display:block}.front-label{z-index:5;text-align:center;letter-spacing:.18em;text-transform:uppercase;color:#141210d9;text-shadow:0 1px #ffffff8c;pointer-events:none;font-family:Cormorant Garamond,serif;font-size:clamp(.85rem,3vw,1.15rem);font-style:italic;position:absolute;bottom:12%;left:0;right:0}.seal{aspect-ratio:1;z-index:8;filter:drop-shadow(0 6px 10px #00000080);width:23%;position:absolute;top:46%;left:50%;overflow:visible;transform:translate(-50%,-50%)}.seal-pulse{animation:2.6s ease-in-out infinite sealPulse}@keyframes sealPulse{0%,to{filter:drop-shadow(0 6px 10px #00000080)drop-shadow(0 0 #e2505b00)}50%{filter:drop-shadow(0 6px 10px #00000080) drop-shadow(0 0 18px var(--wax-glow))}}.hint{text-align:center;letter-spacing:.05em;color:#f6eed98c;font-family:Cormorant Garamond,serif;font-size:1.05rem;font-style:italic;position:absolute;bottom:-3.4rem;left:0;right:0}.letter{z-index:12;opacity:0;pointer-events:none;background-color:var(--paper);background-image:radial-gradient(#785a320b .5px,#0000 .5px),radial-gradient(#785a320a .5px,#0000 .5px),linear-gradient(#f8f0db,#ecdcbb);background-position:0 0,3px 3px,0 0;background-size:6px 6px,10px 10px,100% 100%;border-radius:3px;width:min(620px,92vw);display:none;position:relative;overflow:hidden;box-shadow:0 40px 90px #0009,0 10px 30px #0006,inset 0 0 70px #966e3c1f}.letter.revealed{pointer-events:auto}.letter:before{content:"";pointer-events:none;z-index:3;border:1px solid #c9a35b66;border-radius:1px;position:absolute;inset:12px}.letter-sheet{max-height:min(76vh,720px);color:var(--ink);-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#c9a35b80 transparent;padding:clamp(2.4rem,6vw,4.2rem) clamp(1.8rem,5vw,3.6rem);position:relative;overflow-y:auto}.letter-sheet::-webkit-scrollbar{width:7px}.letter-sheet::-webkit-scrollbar-thumb{background:#c9a35b80;border-radius:999px}.progress{z-index:5;background:#785a321f;height:3px;position:absolute;top:0;left:0;right:0}.progress>i{background:linear-gradient(90deg, var(--gold-soft), var(--gold));width:0;height:100%;transition:width 80ms linear;display:block}.fade-top,.fade-bot{z-index:2;pointer-events:none;height:48px;position:absolute;left:0;right:0}.fade-top{background:linear-gradient(#f7efda,#f7efda00);top:0}.fade-bot{background:linear-gradient(#ecdcbb00,#ecdcbb);bottom:0}.greeting{color:var(--ink);margin-bottom:1.6rem;font-family:Cormorant Garamond,serif;font-size:clamp(2.1rem,6.5vw,3.2rem);font-style:italic;font-weight:500;line-height:1.05}.letter p{color:var(--ink-soft);text-align:justify;-webkit-hyphens:auto;hyphens:auto;margin-bottom:1.2rem;font-size:clamp(1.05rem,2.3vw,1.22rem);line-height:1.95}.letter strong{color:var(--ink);font-weight:600}.greeting+p:first-letter{float:left;color:var(--wax);padding:.05em .12em 0 0;font-family:Cormorant Garamond,serif;font-size:3.6em;font-weight:600;line-height:.72}.closing{text-align:left;color:var(--ink);margin-top:2rem;margin-bottom:0;font-family:Cormorant Garamond,serif;font-size:clamp(1.3rem,3.4vw,1.7rem);font-style:italic}.signature{text-align:left;max-width:22ch;color:var(--wax);margin-top:.3rem;font-family:Pinyon Script,cursive;font-size:clamp(1.7rem,4.6vw,2.4rem);line-height:1.25}@media (width<=600px){.gate-form{flex-direction:column}.envelope{width:90vw}.letter{width:94vw}.letter p{text-align:left}}@media (prefers-reduced-motion:reduce){.candle,.embers,.petals{display:none}.blob,.twinkle,.twinkle:after{animation:none!important}.seal-pulse{animation:none}.scene{transition:opacity .4s}}