/* Layered, locally loaded illustrations. The outer story-art still belongs to
   the scroll animation; these inner objects have their own short sequences. */
.story-scene{isolation:isolate;pointer-events:none;user-select:none;overflow:visible}
.scene-base{position:absolute;inset:0;z-index:0}
.scene-sprite{position:absolute;left:0;top:0;aspect-ratio:1;transform-origin:50% 50%;z-index:6;line-height:0}
.scene-sprite img{display:block;width:100%;height:100%;object-fit:contain}
/* One complete shaded glove image is deformed continuously at the index.
   The original image remains visible when animation is unavailable. */
.scene-hand{position:absolute;left:0;top:0;width:28%;aspect-ratio:1;z-index:6;line-height:0;transform-origin:87.64608143059537% 20.93459618378869%;filter:drop-shadow(0 3px 3px #1050531c)}
.hand-fallback,.hand-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.hand-canvas{visibility:hidden}
.scene-hand.is-hand-live .hand-canvas{visibility:visible}
.scene-hand.is-hand-live .hand-fallback{visibility:hidden}
.scene-monitor-interaction{position:absolute;inset:0;display:block;width:100%;height:100%;z-index:6;overflow:visible}
.scene-cursor{filter:drop-shadow(.3px .5px .35px #10505326)}
.scene-monitor-feedback{opacity:0}
.scene-submission .scene-hand{transform:translate3d(19.496776%,279.065404%,0) rotate(0deg)}
.scene-pen{width:47%;transform-origin:26.7% 90.9%;transform:translate3d(105.215%,77.185%,0);filter:drop-shadow(1px 4px 3px #10505321)}
.scene-plane{width:11%;transform:translate3d(404.545455%,295.454545%,0);z-index:4;filter:drop-shadow(0 3px 3px #10505315)}
.story-scene.is-scene-playing .scene-sprite,.story-scene.is-scene-playing .scene-hand,.story-scene.is-scene-playing .scene-envelope-flap,.story-scene.is-scene-playing .scene-envelope-letter{will-change:transform}
/* Upright SVG layers share one exact envelope coordinate system. */
.scene-envelope{position:absolute;left:36.5%;top:40.3%;width:27%;height:18.1636%;z-index:2;perspective:550px;filter:drop-shadow(0 4px 3px #0c4e4f22)}
.scene-envelope svg{position:absolute;display:block;overflow:visible}
.scene-envelope-back,.scene-envelope-pocket{inset:0;width:100%;height:100%}
.scene-envelope-back{z-index:1}
.scene-envelope-letter{transform-origin:0 0;left:11.3636%;top:9.4595%;width:77.2727%;height:77.027%;z-index:2;transform:translateY(0)}
.scene-envelope-pocket{z-index:3}
.scene-envelope-flap{left:2.7273%;top:4.0541%;width:94.5455%;height:60.8108%;transform-origin:50% 0;transform:rotateX(0);z-index:4;backface-visibility:visible}
.scene-cross{position:absolute;inset:0;width:100%;height:100%;z-index:2;overflow:visible}
.scene-cross-stroke{fill:none;stroke:#187e83;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;visibility:hidden;opacity:0;filter:drop-shadow(.12px .22px .18px #8fc6c0)}
@media(prefers-reduced-motion:reduce){.story-scene:not(.is-motion-requested) .hand-canvas{visibility:hidden!important}.story-scene:not(.is-motion-requested) .hand-fallback{visibility:visible!important}.story-scene .scene-sprite,.story-scene .scene-hand,.story-scene .scene-envelope-flap,.story-scene .scene-envelope-letter{will-change:auto!important}}
@media print{.hand-canvas{visibility:hidden!important}.hand-fallback{visibility:visible!important}.scene-sprite{will-change:auto!important}.scene-cross-stroke{stroke-dashoffset:0!important;visibility:visible!important;opacity:1!important}.scene-plane{opacity:1!important;transform:translate3d(404.545455%,295.454545%,0)!important}}

/* The illustration itself is the replay target, with native tap/keyboard handling. */
.scene-trigger{position:absolute;inset:0;width:100%;height:100%;z-index:10;display:block;background:transparent;border:0;border-radius:0;padding:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.scene-trigger:focus-visible{outline:3px solid #efb23c;outline-offset:4px}
@media print{.scene-trigger{display:none!important}}


/* 1.9.8: only the submission scene gains a folding envelope. */
.scene-fold-mail{width:18%;transform:translate3d(227.777778%,161.111111%,0);z-index:4;filter:drop-shadow(0 3px 3px #10505315)}
.scene-fold-mail svg{display:block;width:100%;height:100%;overflow:visible}
/* Hide the plane before JavaScript's first frame: the envelope comes first. */
.scene-submission .scene-plane{opacity:0}

@media print{.scene-fold-mail{display:none}}

/* 1.9.12: only the blank band between the upper text and first answer row.
   Keep all text/controls clear, not just the outer phone glass. */
.scene-phone-display{position:absolute;inset:0;z-index:4;clip-path:inset(33.4% 38.5% 54% 38.5%);overflow:hidden}
.scene-phone-display .scene-fold-mail{filter:none;transform:translate3d(227.777778%,170.555556%,0) scale(0.733333)}