.manga-book{background:#f1f1ed;padding:20px max(5%,calc((100% - 1180px)/2)) 45px;background-image:radial-gradient(#bbb8 .5px,transparent .8px);background-size:5px 5px}.manga-scene{position:relative;margin-bottom:42px}.manga-scene:last-child{margin-bottom:0}.scene-bridge{display:flex;gap:22px;align-items:center;padding:25px 0 22px}.scene-number{font:800 60px/1 var(--latin);color:var(--red)}.scene-bridge h3{font-size:21px;letter-spacing:-.02em}.scene-bridge p{font-size:13px;line-height:1.8;margin-top:5px;max-width:790px}.manga-spread{display:grid;grid-template-columns:1fr 1fr;gap:15px;direction:ltr;align-items:start}.manga-panel{margin:0;min-width:0;direction:ltr;position:relative}.panel-caption{font-size:12px;font-weight:800;line-height:1.6;min-height:42px;padding:7px 11px;display:flex;align-items:center;background:var(--black);color:white}.panel-frame{container-type:inline-size;aspect-ratio:4/5;border:3px solid var(--black);background:#fff;position:relative;isolation:isolate;overflow:hidden}.panel-art{position:absolute;inset:0;overflow:hidden;z-index:-1}.panel-art img{width:100%;height:100%;object-fit:cover;filter:contrast(1.025);will-change:transform}.balloon-outline{position:absolute;inset:0;width:100%;height:100%;fill:#fff;stroke:#151515;stroke-width:1.8;stroke-linejoin:round;z-index:2;overflow:visible;pointer-events:none}.balloon-outline .tail-join{stroke:white;stroke-width:5}.speech{position:absolute;z-index:3;display:flex;flex-direction:row-reverse;align-items:center;justify-content:center;gap:.28em;padding:3% 1%;font-size:clamp(12px,3.6cqw,21px);font-weight:700;line-height:1.55;letter-spacing:0;white-space:nowrap}.speech span{writing-mode:vertical-rl;text-orientation:mixed;display:block;line-height:1.35}.inner-narration{position:absolute;left:3%;bottom:4%;background:white;border:2px solid var(--black);padding:8px 12px;font-size:clamp(12px,3.1cqw,18px);font-weight:900;z-index:5;max-width:92%}.panel-p12 .inner-narration{bottom:1.5%;left:43%;max-width:55%;font-size:clamp(10px,2.6cqw,15px);padding:6px 7px}.panel-p14 .inner-narration{bottom:3%;max-width:60%}.panel-folio{position:absolute;bottom:0;right:0;font:600 11px var(--latin);background:white;border-left:1px solid black;border-top:1px solid black;padding:1px 6px;z-index:10}.scene-invitation{margin:25px 0 12px;display:flex;gap:35px;align-items:center;justify-content:center}.scene-invitation>span{writing-mode:vertical-rl;font-size:12px;font-weight:900;letter-spacing:.12em}.aspiration{position:relative;display:grid;grid-template-columns:1fr 36px;align-items:center;gap:7px 16px;background:#fff;border:2px solid var(--black);box-shadow:5px 5px 0 var(--black);padding:20px 35px;max-width:800px;transition:background .18s,transform .18s,box-shadow .18s}.aspiration:before{content:'';position:absolute;left:-17px;top:43%;width:28px;height:20px;background:linear-gradient(37deg,transparent 49%,#fff 50%);clip-path:polygon(0 0,100% 0,100% 100%);transform:skewY(12deg);filter:drop-shadow(-1px 1px 0 black)}.aspiration strong{font-size:clamp(17px,1.65vw,23px);line-height:1.6}.aspiration i{font-size:34px;font-style:normal;grid-column:2;grid-row:1/3;line-height:1}.aspiration small{font-size:11px;color:var(--red);font-weight:800}.aspiration:hover{background:var(--red);color:white;transform:translate(3px,3px);box-shadow:2px 2px 0 black}.aspiration:hover small{color:#fff}.aspiration:hover:before{background:var(--red)}@media(max-width:800px){.manga-book{padding-left:5%;padding-right:5%}.scene-bridge{gap:13px;padding:20px 0 17px}.scene-number{font-size:45px}.scene-bridge h3{font-size:18px}.scene-bridge p{font-size:12px}.scene-invitation{gap:18px;margin-top:22px}.aspiration{padding:16px 24px;gap:6px 12px}.aspiration strong{font-size:17px}.aspiration small{font-size:10px}.scene-invitation>span{font-size:11px}.manga-spread{gap:10px}.panel-caption{font-size:11px;min-height:45px}.speech{font-size:3.6cqw}}
@media(max-width:650px){.manga-book{padding:0 4% 35px}.manga-spread{display:flex;flex-direction:column;gap:14px}.manga-panel{width:100%}.scene-bridge{align-items:flex-start;padding-top:22px}.scene-bridge h3{font-size:18px}.scene-bridge p{font-size:12px}.scene-number{font-size:39px;margin-top:2px}.panel-caption{min-height:37px;padding:8px 10px;font-size:11px}.panel-frame{border-width:2px}.speech{font-size:3.8cqw}.manga-scene{margin-bottom:28px}.scene-invitation{gap:15px;margin:22px 4px 5px}.aspiration{padding:16px 19px;grid-template-columns:1fr 21px;gap:7px 8px}.aspiration strong{font-size:16px}.aspiration i{font-size:25px}.aspiration small{font-size:10px;line-height:1.6}.scene-invitation>span{font-size:10px;flex-shrink:0;letter-spacing:.06em}.balloon-outline{stroke-width:2}.story-ribbon{border-bottom:4px solid var(--red)}}
@media(max-width:300px){.scene-number{display:none}.scene-bridge h3{font-size:17px}.scene-bridge p{font-size:11px}.scene-invitation>span{display:none}.aspiration{padding:14px;font-size:14px}.aspiration strong{font-size:14px}.speech{font-size:3.8cqw}.inner-narration{font-size:9px}.panel-p12 .inner-narration{font-size:8px}.panel-caption{font-size:10px}}

/* Balloon geometry follows the actual inked faces, with compact vertical lettering. */
.speech{font-size:3.25cqw;padding:2% 1%;font-weight:700}
.speech{left:var(--bx);top:var(--by);width:var(--bw);height:var(--bh)}
.balloon-mobile{display:none}
@media(max-width:650px){
 .panel-frame{aspect-ratio:2/3}
 .panel-art{top:16.667%}
 .balloon-desktop{display:none}.balloon-mobile{display:block}
 .speech{left:var(--mbx);top:var(--mby);width:var(--mbw);height:var(--mbh);font-size:4.4cqw;padding:2% 1%}

}
.balloon-narrow{display:none}
@media(min-width:301px) and (max-width:360px){.speech{font-size:4.7cqw}}
@media(max-width:300px){
 .panel-frame{aspect-ratio:1/2}.panel-art{top:37.5%}
 .balloon-mobile{display:none}.balloon-narrow{display:block}
 .speech{font-size:12px;gap:.1em;padding:1% .5%}.speech span{line-height:1.1}
 .panel-p12 .inner-narration{max-width:95%;left:2%;bottom:1%;font-size:9px;padding:4px}
}
.panel-ending{padding:13px 15px;background:var(--black);color:white;font-size:16px;font-weight:900;text-align:center;letter-spacing:.01em}
@media(max-width:650px){.panel-ending{font-size:14px}.panel-p14 .speech{gap:.12em}.panel-p14 .speech span{line-height:1.15}}
@media(max-width:300px){.panel-p14 .speech{font-size:11.5px;gap:0}.panel-p14 .speech span{line-height:1.05}.panel-ending{font-size:12px}}
@media(min-width:651px){.panel-p14 .speech{font-size:3cqw;gap:.1em}.panel-p14 .speech span{line-height:1.2}}
.panel-layered .panel-actor{position:absolute;inset:0}

/* Entrance is brief; speech and artwork settle into their original reading positions. */
.scene-bridge>div{min-width:0}
.scene-replay{flex-shrink:0;margin-left:auto;align-self:flex-start;margin-top:6px;width:32px;height:32px;border:1px solid #aaa;border-radius:50%;background:transparent;color:#555;display:grid;place-items:center;font-size:22px;line-height:1}
.scene-replay:hover{color:white;background:var(--black);border-color:var(--black)}
.aspiration i{transition:transform .2s cubic-bezier(.16,1,.3,1)}
.aspiration:hover i,.aspiration:focus-visible i{transform:translate(4px,-4px)}
@media(max-width:650px){.scene-replay{width:28px;height:28px;font-size:20px;margin-top:0}.scene-bridge{gap:12px}}
/* Separate photographic planes: no motion is attached to dialogue or comic frames. */
.panel-background,.panel-actor-depth{position:absolute;inset:0}
.panel-actor,.panel-actor img{transform-origin:var(--actor-origin,50% 80%)}
.panel-background img,.panel-actor img{width:100%;height:100%;object-fit:cover}
/* Match the cutout edge to the foreground table after clean-plate reconstruction. */
.panel-p07 .panel-actor{top:1.7%;bottom:-1.7%}
.panel-p09 .panel-actor{top:2.8%;bottom:-2.8%}
.motion-sentinel{position:absolute;left:10%;right:10%;top:var(--actor-focus,28%);height:32%;pointer-events:none}
.motion-enabled .is-read .panel-background{transform:translateX(var(--backdrop-x,0px));will-change:transform}
.motion-enabled .is-read .panel-actor-depth{transform:translateX(var(--foreground-x,0px)) scale(var(--foreground-depth,1.008));transform-origin:var(--actor-origin,50% 80%);will-change:transform}
.motion-enabled .is-read .panel-background img{animation:scene-background 3.1s cubic-bezier(.2,.65,.3,1) var(--panel-delay,0ms) both}
.motion-enabled .is-read .panel-actor img{animation:person-approach 2.6s cubic-bezier(.2,.7,.3,1) var(--panel-delay,0ms) both;will-change:transform}
.motion-enabled .is-read[data-motion="settle"] .panel-actor img{animation-name:person-settle;animation-duration:2.7s}
.motion-enabled .is-read[data-motion="reveal"] .panel-actor img{animation-name:person-reveal;animation-duration:2.9s}
.motion-enabled .is-read[data-motion="work"] .panel-actor img{animation-name:person-work;animation-duration:2.8s}
.motion-enabled .is-read[data-motion="answer"] .panel-actor img{animation-name:person-answer;animation-duration:3s}
.motion-enabled .is-read[data-motion="step"] .panel-actor img{animation-name:person-step;animation-duration:3.2s}
.motion-off .panel-background,.motion-off .panel-actor-depth,.motion-off .panel-actor img{transform:none!important}
@keyframes scene-background{from{transform:translateX(-8px) scale(1.065)}to{transform:translateX(0) scale(1.025)}}
@keyframes person-approach{from{transform:translateY(16px) scale(1.005)}to{transform:translateY(0) scale(1.015)}}
@keyframes person-settle{from{transform:translate(10px,14px) scale(1.045)}to{transform:translate(0,0) scale(1.015)}}
@keyframes person-reveal{from{transform:translate(-12px,9px) scale(1.06)}to{transform:translate(0,0) scale(1.015)}}
@keyframes person-work{from{transform:scale(1.05)}to{transform:scale(1.012)}}
@keyframes person-answer{from{transform:translateY(14px) scale(1.025)}to{transform:translateY(0) scale(1.01)}}
@keyframes person-step{from{transform:scale(1)}to{transform:scale(1.018)}}

@media(min-width:651px){.panel-p06 .dialogue[data-speaker="ren"] .speech{font-size:3cqw}}