/* A letter in the same night sky; paper stays opaque for readable prose. */
[data-ritual-state="envelope"] .opening-top-note{opacity:0}
[data-ritual-state="envelope"] .opening-scene:before,[data-ritual-state="envelope"] .opening-scene:after{opacity:0}
[data-ritual-state="envelope"] .particle-title-fallback{opacity:0}
.finale-mail{position:absolute;inset:0;z-index:5;display:grid;place-items:center;pointer-events:none;opacity:var(--envelope-reveal,0);transform:translateY(calc((1 - var(--envelope-reveal,0))*28px))}
.finale-envelope{position:relative;display:block;width:min(340px,77vw);padding:0;background:transparent;pointer-events:auto;perspective:1000px;transform:translateY(-14px);text-align:center}
.mail-body{position:relative;display:block;height:205px;background:#834362;border-radius:4px;transform-style:preserve-3d;box-shadow:0 24px 60px #0005}
.mail-note{position:absolute;left:20px;right:20px;top:-22px;height:172px;background:#34212e;color:#f8d7e8;padding:23px 12px;font-size:25px;line-height:1.6;text-align:left;border-radius:3px;transform:translateY(28px)}
.mail-note>span{display:block;font-size:12px;margin-top:9px;letter-spacing:.5px;color:#e9b8d0}
.mail-folds{position:absolute;inset:0;background:#a36383;clip-path:polygon(0 0,50% 50%,100% 0,100% 100%,0 100%);border-radius:4px;z-index:3}
.mail-folds:after{content:'';position:absolute;inset:0;background:#b57595;clip-path:polygon(0 100%,50% 44%,100% 100%)}
.mail-address{position:absolute;left:22px;bottom:18px;color:#ffe5f1;font-size:14px;letter-spacing:.7px;z-index:4}
.mail-flap{position:absolute;inset:0 0 auto;height:114px;background:#bd7a9c;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;backface-visibility:hidden;z-index:4}
.mail-seal{position:absolute;top:83px;left:calc(50% - 25px);width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:#db94b7;color:#54243d;font-size:26px;z-index:5;box-shadow:0 4px 14px #3f152944}
.mail-invitation{display:block;color:#f2c5dd;font-size:17px;letter-spacing:1px;margin-top:38px;line-height:1.7}
.mail-invitation>span{display:block;color:#cda4ba;font-size:12px;margin-top:8px;letter-spacing:.5px}
.finale-envelope:hover .mail-seal{background:#f6c5de}.finale-envelope:active{transform:translateY(-12px)}
.mail-shadow{position:absolute;inset:0;pointer-events:none}
[data-ritual-state="envelope"] .ritual-panel>span{display:none}
[data-ritual-state="envelope"] .ritual-panel>.button{background:transparent;color:#d6a6c0;font-size:11px;padding:5px 10px;min-height:38px;margin-top:3px}
.letter-backdrop-active{z-index:30}
.letter-backdrop-active>.opening-sticky{position:fixed;inset:0;height:100svh;background:#120f13;z-index:30}
.letter-backdrop-active .finale-mail,.letter-backdrop-active .ritual-panel,.letter-backdrop-active .opening-controls{visibility:hidden}
.reading-motion{display:none;position:absolute;right:65px;top:17px;min-height:40px;padding:5px 8px;font-size:12px;color:#d8b2c7;background:transparent}
dialog[data-fireworks] .reading-motion{display:block}
dialog[data-fireworks]::backdrop{background:#08050b24;backdrop-filter:none}
dialog[data-fireworks]{width:min(620px,calc(100vw - 48px));max-height:72svh;background:#231820;border-color:#75465f;padding:56px 36px 32px;overscroll-behavior:contain;scrollbar-color:#a46889 #231820;animation:none}
dialog[data-fireworks] .modal-close{top:17px;right:17px;min-width:40px;min-height:40px;font-size:25px}
dialog[data-fireworks] .modal-prose p{font-size:16px;line-height:2.05;letter-spacing:.35px;color:#f1dfe9}
dialog[data-fireworks] .modal-prose p+p{margin-top:17px}
dialog[data-fireworks] h2{font-size:29px;letter-spacing:1px;line-height:1.5;margin-bottom:24px}
dialog[data-fireworks] .modal-eyebrow{display:block;color:#cda1b8;font-size:9px;letter-spacing:1.3px;margin-bottom:14px}
dialog[data-fireworks] .modal-icon{display:none}
dialog[data-fireworks] input{font-size:16px}
dialog[data-fireworks] .letter-signature{margin-top:27px;font-size:18px}
.letter-fold{display:block;margin:27px auto 0;min-height:44px;font-size:13px}
#toast{pointer-events:none}
.ritual-static[data-ritual-state="envelope"] .particle-title-fallback{position:absolute;top:12%;left:50%;transform:translateX(-50%);width:min(82vw,390px);max-height:18svh;object-fit:contain;opacity:1}
.ritual-static[data-ritual-state="envelope"] .finale-envelope{transform:translateY(54px);width:min(280px,70vw)}
@media(max-width:720px){
 .finale-envelope{width:min(290px,77vw);transform:translateY(-6px)}.mail-body{height:178px}.mail-flap{height:99px}.mail-seal{top:71px;width:44px;height:44px;left:calc(50% - 22px);font-size:24px}
 .mail-note{left:17px;right:17px;top:-17px;height:150px;font-size:22px;padding:20px 12px}.mail-note>span{font-size:11px}.mail-invitation{font-size:15px;margin-top:30px}.mail-invitation>span{font-size:11px;margin-top:7px}
 dialog[data-fireworks]{width:calc(100vw - 36px);margin:21svh auto auto;max-height:70svh;padding:55px 23px 26px;border-radius:5px}
 #secret-dialog[data-fireworks]{margin-top:26svh;max-height:65svh}
 dialog[data-fireworks] h2{font-size:25px;margin-bottom:20px}.reading-motion{font-size:11px;right:57px;top:10px}dialog[data-fireworks] .modal-close{top:10px;right:10px}
 dialog[data-fireworks] .modal-prose p{font-size:16px;line-height:2}.letter-fold{font-size:12px}
 [data-ritual-state="envelope"] .ritual-panel>p{font-size:11px}
}
@media(max-height:640px){dialog[data-fireworks]{margin:8svh auto auto;max-height:84svh}}
@media(prefers-reduced-motion:reduce){.finale-mail{opacity:1;transform:none}.finale-envelope{transition:none}}