.comic-figure{width:100%;margin:0}.comic-title{text-align:center;color:#1b140f;margin:0 0 10px;font-size:1.05rem;font-weight:700}.comic-frame{width:100%;aspect-ratio:var(--ar);background:#fff;border:8px solid #fff;border-radius:16px;position:relative;overflow:hidden;box-shadow:0 18px 40px -18px #1b140f73;container-type:inline-size}.comic-panel{color:#1b140f;position:absolute;inset:0}.comic-panel-ink,.comic-panel-fill{position:absolute;left:0;right:0}.comic-panel-fill:after{content:"";background:radial-gradient(circle,#1b140f1f 1px,#0000 1.4px) 0 0/11px 11px;position:absolute;inset:0}.comic-panel-inner{padding:5cqi 5.8cqi;position:absolute;left:0;right:0}.comic-character{width:37.4cqi;height:37.4cqi;position:absolute}.comic-character--left{left:1.2cqi}.comic-character--right{right:1.2cqi}.comic-character--top{top:1.5cqi}.comic-character--bottom{bottom:1.5cqi}.comic-character-art{width:100%;height:100%;display:block}.comic-bubble{color:#1b140f;background:#fff;border:2px solid #1b140f;border-radius:3.1cqi;max-width:clamp(130px,40.4cqi,280px);padding:2.3cqi 2.7cqi;font-size:clamp(9px,3cqi,16px);font-weight:500;line-height:1.32;position:absolute}.comic-bubble--speech{max-width:clamp(150px,46cqi,300px)}.comic-bubble--top{top:2.7cqi}.comic-bubble--bottom{bottom:2.7cqi}.comic-bubble--speech.comic-bubble--top{top:5cqi}.comic-bubble--speech.comic-bubble--bottom{bottom:5cqi}.comic-bubble--left{left:2.7cqi}.comic-bubble--right{right:2.7cqi}.comic-bubble--speech:after{content:"";background:#fff;border-bottom:2px solid #1b140f;border-right:2px solid #1b140f;width:3.5cqi;height:3.5cqi;position:absolute}.comic-bubble--speech.comic-bubble--left:after{bottom:-1.7cqi;left:5.4cqi;transform:rotate(45deg)}.comic-bubble--speech.comic-bubble--right:after{bottom:-1.7cqi;right:5.4cqi;transform:rotate(45deg)}.comic-bubble--speech.comic-bubble--tail-right:after{inset:calc(50% - 1.75cqi) -1.9cqi auto auto;transform:rotate(-45deg)}.comic-bubble--speech.comic-bubble--tail-left:after{inset:calc(50% - 1.75cqi) auto auto -1.9cqi;transform:rotate(135deg)}.comic-bubble--thought{border-radius:3.8cqi}.comic-bubble--thought:before,.comic-bubble--thought:after{content:"";background:#fff;border:2px solid #1b140f;border-radius:50%;position:absolute}.comic-bubble--thought.comic-bubble--right:before{width:2.7cqi;height:2.7cqi;bottom:-3.8cqi;right:6.5cqi}.comic-bubble--thought.comic-bubble--right:after{width:1.5cqi;height:1.5cqi;bottom:-5.8cqi;right:4.2cqi}.comic-bubble--thought.comic-bubble--left:before{width:2.7cqi;height:2.7cqi;bottom:-3.8cqi;left:6.5cqi}.comic-bubble--thought.comic-bubble--left:after{width:1.5cqi;height:1.5cqi;bottom:-5.8cqi;left:4.2cqi}.comic-bubble--thought.comic-bubble--tail-right:before{inset:calc(50% - 1.35cqi) -3.2cqi auto auto}.comic-bubble--thought.comic-bubble--tail-right:after{inset:calc(50% - .75cqi) -5.5cqi auto auto}.comic-bubble--thought.comic-bubble--tail-left:before{inset:calc(50% - 1.35cqi) auto auto -3.2cqi}.comic-bubble--thought.comic-bubble--tail-left:after{inset:calc(50% - .75cqi) auto auto -5.5cqi}.comic-symbol{background:#fff;border:2px solid #1b140f;border-radius:50%;justify-content:center;align-items:center;width:5.8cqi;height:5.8cqi;display:flex;position:absolute;top:2.3cqi;right:2.3cqi}.comic-symbol svg{width:3.1cqi;height:3.1cqi}
.comic-flip-scene{perspective:1800px}.comic-flip-card{width:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.45,.05,.15,1);position:relative}.comic-flip-card.is-flipped{transform:rotateY(180deg)}.comic-flip-face{backface-visibility:hidden}.comic-flip-face--front{position:relative}.comic-flip-face--back{position:absolute;inset:0;transform:rotateY(180deg)}@media (prefers-reduced-motion:reduce){.comic-flip-card{transition:none}}