/* Six full panels, compact dialogue, and a soft night palette. */
.comic-reader{--comic-reading:16px;padding-bottom:25px}.comic-page-heading{text-align:center;margin:35px 0 30px}.comic-page-heading .eyebrow{font-size:10px;color:var(--green);letter-spacing:1.8px}.comic-page-heading h1{font-size:clamp(30px,3.5vw,43px);letter-spacing:-1.1px;margin:12px 0;line-height:1.2}.comic-page-heading>p{font-size:12px;color:var(--muted);line-height:1.7;margin:0}.comic-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:25px;padding:0;margin:0;list-style:none;align-items:stretch}.comic-panel{min-width:0;display:flex;flex-direction:column;border:1px solid #ffffff0c;border-radius:18px;background:var(--surface);overflow:hidden;position:relative}.comic-caption{font:var(--reading)/1.65 var(--sans);letter-spacing:.02px;color:var(--ink);padding:22px 24px;margin:0;flex:1}.comic-illustration{position:relative;aspect-ratio:1;overflow:hidden;flex-shrink:0}.comic-illustration>.scene-art{width:100%;height:100%}.panel-number{position:absolute;top:13px;left:13px;width:28px;height:28px;border-radius:50%;background:#f9f0fbe8;color:#30223d;display:grid;place-items:center;font-size:12px;box-shadow:0 2px 12px #14132626}.comic-dialogue{position:absolute;left:14px;right:14px;bottom:14px;z-index:1;display:flex;flex-direction:column;pointer-events:none}.comic-balloon{position:relative;border:1px solid #4a3a5570;border-radius:16px;padding:8px 12px 11px;margin:0;width:max-content;max-width:100%;background:var(--balloon);color:var(--balloon-ink);box-shadow:0 4px 20px #191b3433;pointer-events:auto}.comic-balloon.side-left{align-self:flex-start}.comic-balloon.side-right{align-self:flex-end}.comic-balloon:before{content:'';position:absolute;top:-7px;left:24px;width:12px;height:12px;background:var(--balloon);border-left:1px solid #4a3a5570;border-top:1px solid #4a3a5570;transform:rotate(45deg)}.balloon-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:24px;position:relative;padding-right:23px}.balloon-speaker{font:700 9px/1.3 var(--sans);letter-spacing:1px;text-transform:uppercase;color:#64516e}.comic-line{font:var(--comic-reading)/1.4 var(--sans);margin:0;letter-spacing:-.1px;overflow-wrap:break-word;padding-right:14px}.line-listen{position:absolute;right:-13px;top:-10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:50%;width:44px;height:44px;color:#64516e}.line-listen svg{width:15px;height:15px}.line-listen:hover{background:#d8c7e38a;color:#30223d}.thought-balloon{border-style:dashed}.comic-balloon.speaking{outline:3px solid #d0a1e3;outline-offset:2px;background:#fff6df}.comic-balloon.speaking:before{background:#fff6df}.comic-caption.speaking{box-shadow:inset 0 0 0 3px var(--green)}.comic-pause{max-width:850px;margin:32px auto 5px;padding:24px 28px;border:1px solid var(--line);border-radius:20px;background:var(--surface)}.comic-pause h2{font-size:21px}.comic-pause .activity-response{margin-bottom:0}.large-text .comic-reader{--comic-reading:20px}.large-text .comic-caption{font-size:22px;line-height:1.7}.night .comic-balloon{box-shadow:0 3px 14px #0004}
@media(min-width:1600px){.comic-reader{max-width:1220px}.comic-panels{grid-template-columns:repeat(3,minmax(0,1fr))}.app-content:has(.comic-reader){padding-inline:45px}}
@media(max-width:1100px){.comic-panels{gap:20px}.comic-caption{font-size:17px;padding:19px 20px}.comic-page-heading h1{font-size:35px}}
@media(max-width:900px){.comic-caption{font-size:18px}.comic-page-heading{margin:28px 0}.comic-page-heading h1{font-size:37px}}
@media(max-width:650px){.comic-panels{grid-template-columns:1fr;gap:24px;max-width:540px;margin-inline:auto}.comic-page-heading{margin:25px 0}.comic-page-heading h1{font-size:33px;line-height:1.17;letter-spacing:-.8px}.comic-page-heading>p{max-width:290px;font-size:11px;margin:auto}.comic-caption{font-size:19px;padding:21px 22px;line-height:1.65}.comic-reader{--comic-reading:17px}.comic-dialogue{left:14px;right:14px;bottom:14px}.comic-pause{padding:21px;margin-top:26px}.comic-pause h2{font-size:20px}.comic-pause .activity-options.steps{gap:7px}}
@media(max-width:360px){.comic-caption{font-size:18px;padding:18px}.comic-page-heading h1{font-size:29px}.comic-pause{padding:18px}.comic-pause h2{font-size:18px}}