html{scrollbar-gutter:stable}
.shell{position:relative}
.opening-scene{position:absolute;inset:0;display:none;perspective:1200px;pointer-events:none}
.opening .opening-scene{display:block}
.opening>.art{animation:cover-dim 2.6s ease both;clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,5.8% 44.4%,5.8% 78.9%,94.2% 78.9%,94.2% 44.4%,5.8% 44.4%,0 0)}
.opening .open{animation:button-away .25s ease both;pointer-events:none}
.opening .seal{visibility:hidden}
.envelope-rig{display:contents}
.envelope-back,.envelope-pocket{position:absolute;left:5.8%;top:44.4%;width:88.4%;height:34.5%;animation:envelope-away 2.6s ease both}
.envelope-back{background:linear-gradient(160deg,#222,#090909 55%,#171717);border:1px solid #3b3831;box-shadow:0 14px 24px #0009}
.envelope-back::after,.flap-face::after{content:"";position:absolute;inset:0;opacity:.1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h150v150H0z'/%3E%3C/svg%3E")}
.envelope-flap{position:absolute;left:5.8%;top:44.4%;width:88.4%;height:21.7%;transform-origin:50% 0;transform-style:preserve-3d;z-index:4;animation:flap-lift 2.6s cubic-bezier(.4,0,.2,1) both}
.flap-face{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,97% 20%,55% 96%,50% 100%,45% 96%,3% 20%);backface-visibility:hidden;border-top:1px solid #7b786e}
.flap-front{background:linear-gradient(170deg,#343434,#1b1b1b 43%,#101010);box-shadow:0 10px 16px #0008}
.flap-lining{transform:rotateX(180deg);background:linear-gradient(0deg,#25231e,#161616 60%,#29261f);border-top-color:#b19760}
.envelope-pocket{z-index:3;filter:drop-shadow(0 -3px 4px #0007)}
.letter-window{position:absolute;inset:0;z-index:2;clip-path:inset(0 0 21.1%);animation:letter-front 2.6s linear both}
.emerging-letter{transform-origin:50% 0;box-shadow:0 10px 40px #000c;animation:letter-emerge 2.6s cubic-bezier(.4,0,.2,1) both}
.wax-seal{position:absolute;inset:0;z-index:6;clip-path:ellipse(12.5% 7.1% at 50.1% 63.9%);animation:seal-release 2.6s ease both}
.inside.staging{visibility:hidden;animation:none}
.inside.revealed{animation:none}
.inside.revealed .toolbar,.inside.revealed .tabs{animation:arrive .4s ease both}
.page-stack{position:relative;perspective:1500px;isolation:isolate}
.page{position:relative;transform-origin:0 50%;backface-visibility:hidden}
.page.turning-out{position:absolute;inset:0;z-index:2;pointer-events:none}
.page-stack.turning::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(90deg,#0006,transparent 35%);animation:page-light .65s ease both}
@keyframes button-away{to{opacity:0;transform:translateY(8px)}}
@keyframes cover-dim{0%,35%{opacity:1}65%,100%{opacity:0}}
@keyframes seal-release{0%,5%{opacity:1;transform:translateY(0) scale(1)}18%{opacity:1;transform:translateY(-1.2%) scale(1.07)}26%,100%{opacity:0;transform:translateY(1%) scale(.92)}}
@keyframes flap-lift{0%,17%{transform:rotateX(0deg);z-index:4}42%,64%{transform:rotateX(178deg);z-index:1;opacity:1}90%,100%{transform:translateY(38%) rotateX(178deg);z-index:1;opacity:0}}
@keyframes letter-front{0%,64%{z-index:2;clip-path:inset(0 0 21.1%)}65%{z-index:5;clip-path:inset(0 0 21.1%)}100%{z-index:5;clip-path:inset(0 0 -20%)}}
@keyframes letter-emerge{0%,33%{transform:translateY(45%) scale(.68)}64%{transform:translateY(2%) scale(.68)}100%{transform:translateY(var(--letter-land-y,96px)) scale(1)}}
@keyframes envelope-away{0%,64%{opacity:1;transform:translateY(0)}90%,100%{opacity:0;transform:translateY(24%)}}
@keyframes page-light{0%,100%{opacity:0}45%{opacity:1}}
@media(prefers-reduced-motion:reduce){.opening-scene{display:none!important}}