.story-section .panel{min-width:0;margin:0}
.story-section .frame{position:relative;aspect-ratio:1/1;overflow:hidden;background:#f3d7ce;border:1px solid #b79587;box-shadow:3px 4px 0 #ddc8bb50}
.story-section .art{position:absolute;inset:0;background-image:url('assets/comic-sheet.webp');background-size:200% 300%;background-repeat:no-repeat;transform:scale(1.002);transform-origin:center}
.story-section .p1 .art{background-position:0 0}
.story-section .p2 .art{background-position:100% 0}
.story-section .p3 .art{background-position:0 50%}
.story-section .p4 .art{background-position:100% 50%}
.story-section .p5 .art{background-position:0 100%}
.story-section .p6 .art{background-position:100% 100%}
.story-section .number{position:absolute;top:10px;left:10px;color:#866455;background:#fffaf2e6;font:italic 12px Georgia;padding:6px 9px;border-radius:50%;z-index:2}
.story-section .bubble{position:absolute;background:#fffdf6f5;border:1px solid #a78b7d;border-radius:48% 48% 43% 43%;padding:20px 22px;font-weight:600;font-size:clamp(12px,1.3vw,16px);line-height:1.8;text-align:center;box-shadow:0 2px 3px #6b483111;z-index:2;top:14px;right:12px}
.story-section .bubble:after{content:"";position:absolute;bottom:-9px;left:25%;width:14px;height:19px;background:linear-gradient(135deg,#fffdf6 50%,transparent 51%);transform:rotate(-18deg);border-left:1px solid #a78b7d}
.story-section .bubble small{font-size:11px}
.story-section .p1 .bubble{top:24px;right:14px}
.story-section .p2 .bubble{top:15px;left:16px;right:auto;padding:15px 22px}
.story-section .p3 .bubble{top:17px;right:22px}
.story-section .p4 .bubble{top:14px;left:25px;right:auto}
.story-section .p5 .bubble{top:24px;left:14px;right:auto;font-size:13px}
.story-section .p6 .bubble{top:20px;right:14px;font-size:13px}
.story-section .caption{font-size:10px;text-align:center;color:var(--muted);letter-spacing:1px;margin:13px 0 0;min-height:18px}
.story-section .sfx{position:absolute;font-size:14px;font-weight:800;color:#9b705e;opacity:0;z-index:3;pointer-events:none;text-shadow:1px 1px 0 white,-1px -1px 0 white}
.story-section .small-sfx{left:24px;bottom:22%}
.story-section .p2 .small-sfx{left:auto;right:25px;bottom:13%}
.story-section .sparkle-sfx{right:28%;bottom:30%;font-size:11px}
.story-section .scuttle-sfx{bottom:12%;left:25%;transform:rotate(-9deg)}
.story-section .glint{position:absolute;opacity:0;font-family:Georgia;pointer-events:none;z-index:3;line-height:1}
.story-section .silver{color:#fffdf1;text-shadow:0 0 6px white,0 0 13px #efe2bf;font-size:42px;left:57%;top:58%}
.story-section .p5 .silver{left:59%;top:58%;font-size:30px}
.story-section .gold{color:#f6d47e;font-size:18px;left:29%;top:73%;text-shadow:0 0 6px #e8b94a}
.story-section .panel.playing .art{animation:settle 1.15s cubic-bezier(.15,.6,.2,1) both}
.story-section .p2.playing .art{animation:cabinet 1.25s ease-out both}
.story-section .p3.playing .art{animation:look 1.3s ease-out both}
.story-section .p4.playing .art{animation:startle .75s ease-out both}
.story-section .p5.playing .art{animation:relief 1.35s ease-out both}
.story-section .p6.playing .art{animation:quiet 1.6s ease-out both}
.story-section .panel.playing .bubble{animation:ink-in .65s .15s both}
.story-section .panel.playing .sfx{animation:sfx 1s .3s both}
.story-section .p4.playing .sfx{animation:scurry .75s .2s both}
.story-section .panel.playing .silver{animation:glint 1.2s .35s both}
.story-section .panel.playing .gold{animation:gold 1.5s .8s both}
@keyframes settle{from{transform:scale(1.035) translateY(3px)}to{transform:scale(1.002)}}
@keyframes cabinet{from{transform:scale(1.025) translateX(-5px)}to{transform:scale(1.002)}}
@keyframes look{from{transform:scale(1.002)}to{transform:scale(1.025)}}
@keyframes startle{0%,100%{transform:scale(1.002)}20%{transform:scale(1.018) translateY(-4px)}40%{transform:scale(1.01) translateY(2px)}}
@keyframes relief{from{transform:scale(1.025) translateY(2px)}to{transform:scale(1.002)}}
@keyframes quiet{from{filter:brightness(1.06)}to{filter:brightness(1)}}
@keyframes ink-in{from{opacity:0;translate:0 4px}to{opacity:1;translate:0 0}}
@keyframes sfx{0%,100%{opacity:0}25%,70%{opacity:1}}
@keyframes scurry{0%{opacity:0;translate:-25px 0}30%,60%{opacity:1}100%{opacity:0;translate:45px 0}}
@keyframes glint{0%,100%{opacity:0;scale:.3;rotate:-15deg}40%{opacity:.9;scale:1;rotate:10deg}}
@keyframes gold{0%,100%{opacity:0;scale:.3}40%{opacity:.8;scale:1}}
@media(max-width:640px){.story-section .bubble{font-size:14px}
.story-section .p5 .bubble,.story-section .p6 .bubble{font-size:13px}
.story-section .caption{font-size:9px;margin-top:10px}}
.story-section .p3 .silver{left:73%;top:57%}
.story-section .p6 .gold{left:7%;top:86%;font-size:12px}
.story-section .clip-defs{position:absolute;width:0;height:0;overflow:hidden}
.story-section .scene{position:absolute;inset:0;overflow:hidden;isolation:isolate;--bx:0%;--by:0%;--fx:0%;--fy:0%}
.story-section .p1 .scene{--bx:0%;--by:0%;--fx:0%;--fy:0%}
.story-section .p2 .scene{--bx:100%;--by:0%;--fx:100%;--fy:0%}
.story-section .p3 .scene{--bx:0%;--by:50%;--fx:0%;--fy:50%}
.story-section .p4 .scene{--bx:100%;--by:50%;--fx:100%;--fy:50%}
.story-section .p5 .scene{--bx:0%;--by:100%;--fx:0%;--fy:100%}
.story-section .p6 .scene{--bx:100%;--by:100%;--fx:100%;--fy:100%}
.story-section .scene .art{background-image:url('assets/background-v2.webp');background-size:200% 300%;background-position:var(--bx) var(--by);transform:scale(1.045);transform-origin:50% 50%;z-index:0}
.story-section .subject{position:absolute;inset:0;background-image:url('assets/foreground-home.webp');background-size:200% 300%;background-position:var(--fx) var(--fy);background-repeat:no-repeat;transform:scale(1.018);transform-origin:50% 75%;z-index:1;will-change:auto}
.story-section .eye-overlay{position:absolute;inset:0;opacity:0;background-image:url('assets/blink-v2.webp');background-size:200% 300%;background-position:var(--fx) var(--fy);background-repeat:no-repeat;pointer-events:none}
.story-section .p1 .eye-overlay{clip-path:url('#blink1')}
.story-section .p2 .eye-overlay{clip-path:url('#blink2')}
.story-section .p4 .eye-overlay{clip-path:url('#blink4')}
.story-section .p3 .eye-overlay,.story-section .p5 .eye-overlay,.story-section .p6 .eye-overlay{display:none}
.story-section .panel.playing .scene .art{animation:depth-background 4.2s cubic-bezier(.16,.6,.25,1) both;will-change:transform}
.story-section .panel.playing .subject{animation:depth-subject 4.2s cubic-bezier(.16,.6,.25,1) both;will-change:transform}
.story-section .p2.playing .subject{animation:depth-crouch 4.2s cubic-bezier(.16,.6,.25,1) both}
.story-section .p3.playing .subject{animation:depth-reach 4.2s cubic-bezier(.16,.6,.25,1) both}
.story-section .p4.playing .subject{animation:depth-surprise 4.2s cubic-bezier(.16,.6,.25,1) both}
.story-section .p6.playing .subject{animation:depth-depart 4.2s cubic-bezier(.16,.6,.25,1) both}
.story-section .panel.playing .eye-overlay{animation:blink-twice 3.4s .65s step-end both}
.story-section .panel.playing .silver{animation:glint 1.5s .6s both}
.story-section .panel.playing .gold{animation:gold 1.8s 1.9s both}
.story-section .panel.playing .bubble{animation:ink-in .65s .25s both}
@keyframes depth-background{0%{transform:scale(1.075) translate(1.2%,-.65%)}65%{transform:scale(1.05) translate(-.35%,.2%)}100%{transform:scale(1.045)}}
@keyframes depth-subject{0%{transform:scale(1.045) translate(-2.7%,2.2%) rotate(-.65deg)}60%{transform:scale(1.025) translate(.6%,-.6%) rotate(.2deg)}100%{transform:scale(1.018)}}
@keyframes depth-crouch{0%{transform:scale(1.04) translate(-2.6%,1.3%) rotate(-.7deg)}65%{transform:scale(1.025) translate(.8%,-.5%) rotate(.25deg)}100%{transform:scale(1.018)}}
@keyframes depth-reach{0%{transform:scale(1.018) translate(-2.6%,1.8%)}65%{transform:scale(1.04) translate(1.4%,-.7%)}100%{transform:scale(1.018)}}
@keyframes depth-surprise{0%{transform:scale(1.018) translate(-.8%,1.5%)}18%{transform:scale(1.045) translate(1.1%,-2%) rotate(1deg)}42%{transform:scale(1.03) translate(.5%,-.6%) rotate(.3deg)}100%{transform:scale(1.018)}}
@keyframes depth-depart{0%{transform:scale(1.018) translate(-1.7%,0)}100%{transform:scale(1.018)}}
@keyframes blink-twice{0%,15%,23%,33%,42%,100%{opacity:0}18%,36%{opacity:1}}
@media(prefers-reduced-motion:reduce){.story-section .panel.playing .scene .art,.story-section .panel.playing .subject,.story-section .panel.playing .eye-overlay{animation:none!important}
.story-section .eye-overlay{opacity:0!important}}
.story-section .p6 .subject{clip-path:polygon(71.5% 0,86.5% 0,86.5% 100%,71.5% 100%)}
.story-section .gold-discovery{position:absolute;left:-3%;top:64%;width:48%;height:36%;z-index:1;pointer-events:none;isolation:isolate;transform:rotate(-3deg)}
.story-section .gold-discovery canvas{position:absolute;top:50%;left:50%;height:76%;width:auto;transform:translate(-50%,-50%) rotate(76deg);filter:drop-shadow(0 0 5px #ffb527) drop-shadow(0 0 13px #ffdc6e);opacity:.92;z-index:1}
.story-section .gold-halo{position:absolute;inset:-12%;background:radial-gradient(ellipse at center,#fffbd9b8 0%,#ffe890a1 15%,#ffd04478 30%,#ffb72530 53%,#ffb72500 72%);filter:blur(5px);mix-blend-mode:screen;opacity:.88;z-index:0}
.story-section .gold-dazzle{position:absolute;left:17%;top:33%;width:68%;height:33%;border-radius:50%;transform:rotate(-10deg);background:radial-gradient(ellipse,#fffef8fc 0%,#fff9d5e8 25%,#ffe29d9c 52%,#ffd15800 75%);filter:blur(5px);mix-blend-mode:screen;z-index:2}
.story-section .gold-ray{position:absolute;left:9%;top:43%;width:83%;height:7%;background:linear-gradient(90deg,transparent,#fff5b5a0 30%,#fffef3da 50%,#fff5b580 70%,transparent);filter:blur(3px);transform:rotate(-16deg);mix-blend-mode:screen;opacity:.6;z-index:3}
.story-section .p6.playing .gold-discovery{animation:gold-reveal 4.2s ease-out both}
.story-section .p6.playing .gold-dazzle{animation:gold-bloom 4.2s ease-out both}
.story-section .p6.playing .gold-halo{animation:gold-aura 4.2s ease-out both}
@keyframes gold-reveal{0%,20%{opacity:.22}54%{opacity:1}100%{opacity:1}}
@keyframes gold-bloom{0%,20%{opacity:.3;scale:.8}60%{opacity:1;scale:1.45}100%{opacity:1;scale:1}}
@keyframes gold-aura{0%,20%{opacity:.3;scale:.85}60%{opacity:1;scale:1.2}100%{opacity:.88;scale:1}}
@media(prefers-reduced-motion:reduce){.story-section .p6.playing .gold-discovery,.story-section .p6.playing .gold-dazzle,.story-section .p6.playing .gold-halo{animation:none!important}}
.story-section .p6 .scene .art{background-image:url('assets/background-v3.webp')}
.story-section .p3 .silver,.story-section .p5 .silver{width:30px;height:30px;display:grid;place-items:center;transform:translate(-50%,-50%);font-size:28px;line-height:1;text-shadow:0 0 4px #fff,0 0 8px #f6e7d1}
.story-section .p3 .silver{left:67%;top:50.7%}
.story-section .p5 .silver{left:68.7%;top:56.8%;font-size:24px}
.story-section .p3 .sparkle-sfx{right:19%;bottom:53%;font-size:10px}
.story-section .gold-discovery{left:-1%;top:84%;width:21%;height:15.5%}
.story-section .gold-discovery canvas{filter:drop-shadow(0 0 2px #ffb527) drop-shadow(0 0 5px #ffdc6e)}
.story-section .gold-halo{filter:blur(3px)}
.story-section .gold-dazzle{filter:blur(2px)}
.story-section .gold-ray{filter:blur(1.5px);opacity:.45}
.story-section .p3 .scene .art{background-image:url('assets/spoon-clean-v4.webp')}
.story-section .p1 .scene .art{background-image:url('assets/drawer-v5.webp')}
.story-section .p1 .scene .art{background-image:url('assets/drawer-scene-v6.webp');background-size:100% 100%;background-position:center}
.story-section .p1 .subject{background-image:url('assets/drawer-foreground-home.webp');background-size:100% 100%;background-position:center;transform:scale(1.045);transform-origin:center}
.story-section .p1 .eye-overlay{background-image:url('assets/drawer-blink-v6.webp');background-size:100% 100%;background-position:center}
.story-section .p1.playing .subject{animation:drawer-subject-v6 4.2s cubic-bezier(.16,.6,.25,1) both}
@keyframes drawer-subject-v6{0%{transform:scale(1.075) translate(1.2%,-.65%)}65%{transform:scale(1.05) translate(-.1%,.05%)}100%{transform:scale(1.045)}}
.story-section .frame[role=button]{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.story-section .frame[role=button]:focus-visible{outline:3px solid #bc7990;outline-offset:4px}