/* One actual paper-kit assembly. The image canvases share identical coordinates. */
.hero-scene.hero-assembly{margin:0 0 0 24px;max-width:620px;min-width:0;transform:none;animation:none;transition:none;isolation:isolate}
.assembly-display{position:relative;height:470px;overflow:hidden;border:2px solid #153140;border-radius:36px;background:#eadcf6;box-shadow:5px 9px 0 #bfa9d4,10px 19px 0 #15314015;isolation:isolate}
.assembly-display::before{content:"";position:absolute;width:91%;height:75%;left:5%;top:18%;border-radius:50%;background:#ffe78d;box-shadow:0 9px 0 #e4c166;transform:rotate(-14deg);z-index:-1}
.assembly-display::after{content:"";position:absolute;width:36px;height:36px;right:24px;top:24px;border:3px solid #153140;border-radius:50%;box-shadow:-8px 9px 0 #f9a382;z-index:-1}
.assembly-label{position:absolute;left:20px;top:16px;z-index:2;font-size:11px;font-weight:800;letter-spacing:.03em;padding:7px 12px;border:1px solid #153140;border-radius:100px;background:#fffdf8}
.assembly-canvas{position:absolute;width:min(91%,440px);aspect-ratio:560/592;left:50%;top:53%;transform:translate(-50%,-50%)}
.assembly-fallback,.assembly-motion{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.assembly-fallback{filter:drop-shadow(0 9px 1px #15314024)}
.assembly-motion{display:none;pointer-events:none}
.assembly-motion img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 1px #15314023)}
.assembly-base-stack{position:absolute;inset:0;filter:drop-shadow(0 8px 1px #15314022)}
.assembly-motion .assembly-base{filter:none}
.assembly-base-outline{opacity:0}
.hero-assembly[data-assembly-state="ready"] .assembly-motion,.hero-assembly[data-assembly-state="playing"] .assembly-motion,.hero-assembly[data-assembly-state="finished"] .assembly-motion{display:block}
.hero-assembly[data-assembly-state="ready"] .assembly-fallback,.hero-assembly[data-assembly-state="playing"] .assembly-fallback,.hero-assembly[data-assembly-state="finished"] .assembly-fallback{visibility:hidden}
.assembly-layer{--piece-x:0%;--piece-y:0%;--piece-turn:0deg;--piece-delay:0ms}
.assembly-layer[data-part="rear-boot"]{--piece-x:-36%;--piece-y:30%;--piece-turn:-24deg;--piece-delay:2500ms}
.assembly-layer[data-part="front-boot"]{--piece-x:31%;--piece-y:36%;--piece-turn:19deg;--piece-delay:2820ms}
.assembly-layer[data-part="coat"]{--piece-x:-35%;--piece-y:-7%;--piece-turn:-16deg;--piece-delay:3190ms}
.assembly-layer[data-part="cap"]{--piece-x:20%;--piece-y:-35%;--piece-turn:18deg;--piece-delay:3560ms}
.assembly-layer[data-part="magnifier"]{--piece-x:36%;--piece-y:6%;--piece-turn:26deg;--piece-delay:3940ms}
.hero-assembly[data-assembly-state="playing"] .assembly-base-stack{animation:paper-walk-in 1500ms linear both;will-change:transform}
.hero-assembly[data-assembly-state="playing"] .assembly-base-outline{opacity:1;animation:outline-retire 200ms linear 2300ms both}
.hero-assembly[data-assembly-state="playing"] .assembly-base-colored{animation:paper-color-fill 1000ms ease-in-out 1500ms both;will-change:clip-path}
.hero-assembly[data-assembly-state="playing"] .assembly-layer{animation:paper-piece-arrive 800ms cubic-bezier(.22,.85,.28,1.05) var(--piece-delay) both;will-change:transform,opacity}
@keyframes paper-walk-in{0%{opacity:0;transform:translate(-105%,0) rotate(-6deg)}9%{opacity:1;transform:translate(-94%,-2%) rotate(1deg)}20%{transform:translate(-79%,0) rotate(-4deg)}31%{transform:translate(-64%,-3%) rotate(3deg)}42%{transform:translate(-49%,0) rotate(-3deg)}53%{transform:translate(-35%,-3%) rotate(2deg)}64%{transform:translate(-23%,0) rotate(-2deg)}76%{transform:translate(-12%,-2.5%) rotate(2deg)}87%{transform:translate(-4%,0) rotate(-1.5deg)}95%{transform:translate(0,-1%) rotate(.5deg)}100%{opacity:1;transform:translate(0,0) rotate(0)}}
@keyframes paper-color-fill{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes outline-retire{from{opacity:1}to{opacity:0}}
@keyframes paper-piece-arrive{0%{opacity:0;transform:translate(var(--piece-x),var(--piece-y)) rotate(var(--piece-turn)) scale(1.04)}18%{opacity:1}74%{transform:translate(0,-1%) rotate(-1deg) scale(1.015)}100%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}}
.hero-assembly figcaption{display:flex;align-items:center;justify-content:space-between;gap:8px 14px;flex-wrap:wrap;max-width:none;padding:0;margin-top:22px;font-size:12px;line-height:1.4;text-align:left}
.assembly-caption-copy{display:grid;gap:3px}
.assembly-caption-copy>a{width:fit-content;min-height:32px;display:inline-flex;align-items:center;font-size:12px;font-weight:750}
.assembly-replay{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;max-width:100%;padding:9px 14px;border:1.5px solid #153140;border-radius:100px;background:#fffdf85e;box-shadow:0 3px 0 #153140;color:#153140;font-size:12px;font-weight:750}
.assembly-replay:hover{background:#fffdf8}.assembly-replay:active{box-shadow:0 1px 0 #153140;translate:0 2px}
.assembly-replay[hidden]{display:none}
.assembly-replay>span[aria-hidden]{font-size:20px;line-height:1}
@media(max-width:1080px){.hero-scene.hero-assembly{margin-left:15px}.assembly-display{height:425px}.assembly-canvas{width:min(93%,400px)}.assembly-label{font-size:10px;left:15px;top:14px}}
@media(max-width:800px){.hero-scene.hero-assembly{width:100%;max-width:570px;margin:32px auto 10px}.assembly-display{height:490px}.assembly-canvas{width:min(91%,450px)}.hero-assembly figcaption{margin-top:21px}}
@media(max-width:560px){.hero-scene.hero-assembly{width:100%;margin:28px 0 8px}.assembly-display{height:380px;border-radius:27px;box-shadow:3px 6px 0 #bfa9d4,6px 12px 0 #15314015}.assembly-canvas{width:min(94%,350px);top:54%}.assembly-label{font-size:10px;left:12px;top:12px;padding:6px 10px}.assembly-display::after{width:25px;height:25px;right:17px;top:20px;border-width:2px;box-shadow:-6px 7px 0 #f9a382}.hero-assembly figcaption{font-size:11px;gap:8px;margin-top:18px}.assembly-replay{font-size:11px;padding-inline:11px}.assembly-caption-copy>a{font-size:11px}}
@media(max-width:350px){.assembly-display{height:320px}.assembly-canvas{width:94%;top:55%}.assembly-label{font-size:9px;left:10px;top:10px}.assembly-display::after{width:20px;height:20px;right:14px}.hero-assembly figcaption{align-items:flex-start}.assembly-replay{margin-top:2px}}
@media(prefers-reduced-motion:reduce){.hero-scene.hero-assembly{transform:none!important}.hero-assembly .assembly-layer,.hero-assembly .assembly-base-stack,.hero-assembly .assembly-base-colored{animation:none!important;transform:none!important;opacity:1!important;clip-path:none!important}.hero-assembly .assembly-base-outline{animation:none!important;opacity:0!important}.assembly-replay:active{translate:none}}