/* Independent object cutouts. Each object has its own travel and rotation. */
.layered-scene img.scene-object,.row-visual img.scene-object{inset:auto;left:var(--ox);top:var(--oy);width:var(--ow);height:var(--oh);max-width:none;object-fit:contain;aspect-ratio:auto;transform:translate3d(calc(var(--depth,0)*var(--mx)),calc(var(--depth,0)*var(--my)),0) rotate(calc(var(--or) + var(--depth,0)*var(--tilt)));filter:drop-shadow(0 12px 10px #3c3b3222);z-index:2}.layered-scene .object-pen,.layered-scene .object-parsley,.layered-scene .object-ginkgo{z-index:4}.row-visual img.scene-object{filter:none;transform:rotate(var(--or))}.layered .reader-art img.scene-object{inset:auto;left:var(--ox);top:var(--oy);width:var(--ow);height:var(--oh)}
.worlds{overflow-x:clip;overflow-y:visible}
.loading-mark{font-size:32px;color:var(--copper)}

/* The film and the flying cards share the modal's coordinate space. */
html {scrollbar-gutter:stable}
html:has(.letter-intro[open]) {overflow:hidden}
.letter-intro {
 position:fixed;
 inset:0;
 width:100vw;
 height:100%;
 max-width:none;
 max-height:none;
 border:0;
 padding:0;
 margin:0;
 overflow:hidden;
 background:transparent;
}
.letter-intro[open] {display:grid;place-items:center}
.letter-intro::backdrop {background:transparent}
.letter-scrim {position:absolute;inset:0;background:#352b237a;transition:opacity .76s ease}
.letter-portrait {
 width:min(560px,calc(100vw - 34px),calc((100dvh - 30px)*1.3333));
 aspect-ratio:4/3;
 position:relative;
 isolation:isolate;
 animation:letter-arrive .38s cubic-bezier(.16,.76,.22,1) backwards;
}
@keyframes letter-arrive {
 from {opacity:0;transform:translateY(12px) scale(.985)}
 to {opacity:1;transform:none}
}
#letter-film {
 display:block;
 width:100%;
 height:100%;
 border:1px solid #baaa90;
 border-radius:5px;
 background:#d7d6d0;
 box-shadow:0 2px 0 #d0c3ab,0 5px 0 #97866c,0 24px 75px #19120b65;
}
.letter-dismiss {
 position:absolute;
 top:8px;
 right:8px;
 z-index:2;
 background:#f6eee1;
 border-color:#baa78e;
 color:#4d382a;
 outline-offset:1px;
}
.letter-intro.is-dealing .letter-scrim {opacity:0}
.letter-intro.is-dealing .letter-portrait {opacity:0;transition:opacity .66s .13s ease;pointer-events:none}
.card-flight-layer {position:fixed;inset:0;overflow:clip;pointer-events:none;z-index:3}
.card-flight-layer .carousel-card.card-flight {position:absolute;inset:0 auto auto 0;transform-origin:0 0;pointer-events:none}

@media(max-width:600px){.layered-scene img.scene-object{transform:translate3d(calc(var(--depth,0)*var(--mx)*.55),calc(var(--depth,0)*var(--my)*.55),0) rotate(calc(var(--or) + var(--depth,0)*var(--tilt)*.65))}}