/* Waste Heroes, the series. Sits on /learn/learn.css (tokens, buttons,
   cards, quiz and bin styles) and only adds what the episode player needs. */

/* `hidden` must win over any display a class sets. */
[hidden] { display: none !important; }

.hz-kicker { font: 700 13px var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--green); }
.hz-clue { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--yellow-t); color: #8A5A00; font: 700 13px var(--display); }
.hz-small { color: var(--ink3); font-size: 14px; text-align: center; margin-top: 12px; }
.hz-foot { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.btn svg { width: 20px; height: 20px; flex: 0 0 20px; }
.btn.sm svg { width: 18px; height: 18px; flex-basis: 18px; }

/* teacher mode: extra help only a teacher sees */
.teacher-only { display: none !important; }
body.teacher .teacher-only { display: revert !important; }
body.teacher .hz-steps.teacher-only, body.teacher .hz-lnav .teacher-only { display: inline-flex !important; }
body.teacher .hz-steps.teacher-only { display: flex !important; }
.teach-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 14px; border-radius: 999px; background: var(--surface); box-shadow: var(--e1); font: 700 14px var(--display); color: var(--ink2); }
.teach-btn .sw { width: 34px; height: 20px; border-radius: 999px; background: #DADCE0; position: relative; transition: background .25s; }
.teach-btn .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .25s var(--spring); }
.teach-btn[aria-pressed="true"] { color: #0D652D; }
.teach-btn[aria-pressed="true"] .sw { background: var(--green); }
.teach-btn[aria-pressed="true"] .sw::after { transform: translateX(14px); }
.logo small { font: 700 12px var(--display); color: var(--ink3); margin-left: 2px; }

/* ── home ── */
.hz-hero { min-height: 360px; }
.hz-hero .hz-kicker { margin-bottom: 8px; }
.hz-lineup { position: relative; height: 290px; display: flex; align-items: flex-end; justify-content: center; gap: 0; }
.hz-lineup::before { content: ""; position: absolute; left: 4%; right: 4%; bottom: 6px; height: 34px; border-radius: 50%; background: rgba(30,142,62,.12); }
.hz-lu { width: 22%; max-width: 124px; aspect-ratio: 1; margin: 0 -1.5%; animation: hzbob 3.4s ease-in-out infinite; position: relative; }
.hz-lu:nth-child(2) { width: 24%; } .hz-lu:nth-child(3) { width: 27%; max-width: 140px; } .hz-lu:nth-child(4) { width: 25%; }
@keyframes hzbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.hz-eps { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.hz-ep { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-m); box-shadow: var(--e1); overflow: hidden; text-decoration: none; color: inherit; transition: transform .25s var(--spring), box-shadow .25s; }
.hz-ep:hover { transform: translateY(-4px); box-shadow: var(--e2); }
.hz-ep:active { transform: scale(.98); }
.hz-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.hz-thumb > svg { position: absolute; inset: 0; }
.hz-thumb-cast { position: absolute; left: 6%; bottom: 2%; width: 30%; aspect-ratio: 1; }
.hz-thumb .done { position: absolute; top: 10px; right: 10px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--green); color: #fff; font: 700 12px var(--display); display: flex; align-items: center; }
.hz-ep-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.hz-ep-body .n { font: 700 12px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.hz-ep-body h3 { font-size: 20px; line-height: 1.15; }

.hz-sticker { width: 70px; height: 70px; margin: 0 auto 8px; border-radius: 50%; display: grid; place-items: center; padding: 14px; box-shadow: inset 0 0 0 4px rgba(255,255,255,.7); }
.hz-sticker i { display: block; width: 100%; height: 100%; }
.hz-sticker.off { filter: grayscale(1); opacity: .35; }

.hz-cast-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.hz-person { display: flex; gap: 14px; align-items: center; background: var(--surface); border-radius: var(--r-m); box-shadow: var(--e1); padding: 14px; }
.hz-person-art { width: 96px; height: 96px; flex: 0 0 96px; border-radius: 28px; padding: 10px; }
.hz-person h3 { font-size: 20px; }
.hz-mat { font: 700 13px var(--display); }
.hz-person p { color: var(--ink2); font-size: 15px; margin-top: 2px; }

.hz-teach { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.hz-tcard { background: var(--surface); border-radius: var(--r-m); box-shadow: var(--e1); padding: 18px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.hz-tcard h3 { font-size: 19px; }
.hz-tcard p { color: var(--ink2); font-size: 15px; }
.hz-routes { display: flex; flex-wrap: wrap; gap: 6px; }
.hz-routes span { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--bg); font: 700 13px var(--display); }
.hz-routes span::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.hz-warn { color: #8A5A00 !important; background: var(--yellow-t); border-radius: 10px; padding: 6px 10px; }

/* ── episode frame ── */
.hz-steps { display: flex; gap: 6px; overflow-x: auto; margin: -6px 0 12px; padding: 2px; scrollbar-width: none; }
.hz-steps::-webkit-scrollbar { display: none; }
.hz-steps a { flex: 0 0 auto; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--surface); box-shadow: var(--e1); display: grid; place-items: center; font: 700 13px var(--display); color: var(--ink2); text-decoration: none; }
.hz-steps a.on { background: var(--green); color: #fff; }
.hz-box { min-height: 460px; }
.hz-box h2 { font-size: clamp(22px, 3.4vw, 32px); text-align: center; line-height: 1.2; margin: 6px auto 16px; max-width: 760px; }
.hz-box > div > .hz-kicker, .hz-act > .hz-kicker { text-align: center; }

/* opener */
.hz-intro { text-align: center; }
.hz-intro-art { position: relative; aspect-ratio: 16 / 7; border-radius: var(--r-m); overflow: hidden; margin: -6px -4px 18px; }
.hz-intro-art > svg { position: absolute; inset: 0; }
.hz-intro-cast { position: absolute; left: 4%; bottom: 3%; width: 60%; display: flex; gap: 2%; }
.hz-intro-cast div { width: 24%; aspect-ratio: 1; animation: pop .5s var(--spring) both; }
.hz-intro h2 { font-size: clamp(30px, 5vw, 46px); margin: 6px auto 10px; }
.hz-recap { max-width: 640px; margin: 18px auto 0; text-align: left; }
.hz-plan { max-width: 640px; margin: 16px auto 0; text-align: left; color: var(--ink2); padding-left: 22px; }
.hz-plan li { margin: 4px 0; }

/* scene */
.hz-scene > .hz-kicker { text-align: center; margin-bottom: 10px; }
.hz-stage { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-m); overflow: hidden; background: #DDEBFA; cursor: pointer; outline: none; box-shadow: inset 0 0 0 1px var(--hair), 0 18px 40px -22px rgba(11,31,51,.45); }
.hz-stage:focus-visible { box-shadow: 0 0 0 3px var(--blue); }
.hz-stage > svg { position: absolute; inset: 0; }

/* The camera: a gentle push toward whoever is speaking. The set moves less
   than the cast, which gives the scene depth. --z runs 0 (wide) to 1 (close). */
.hz-set, .hz-cast { position: absolute; inset: 0; transform-origin: var(--cx, 50%) 78%; transition: transform 1.6s cubic-bezier(.33, 0, .2, 1); will-change: transform; }
.hz-set { transform: scale(calc(1.015 + var(--z, 0) * .035)); }
.hz-set > svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: hzkb 26s ease-in-out infinite alternate; }
@keyframes hzkb { from { transform: translateX(-.6%); } to { transform: translateX(.6%); } }
.hz-cast { transform: scale(calc(1 + var(--z, 0) * .08)); }
/* Sets that carry words or figures hold still, so nothing is cropped. */
.hz-stage.still .hz-set { transform: none; }
.hz-stage.still .hz-set > svg { animation: none; }
/* Light over everything: warm sun from the upper right, a soft vignette. */
.hz-light { position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: radial-gradient(130% 95% at 50% 42%, transparent 58%, rgba(11,31,51,.26) 100%), linear-gradient(205deg, rgba(255,214,120,.2), transparent 42%); }
.hz-motes { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.hz-motes i { position: absolute; bottom: -4%; width: 5px; height: 5px; border-radius: 50%; background: rgba(255,248,220,.75); filter: blur(.6px); animation: hzmote 11s linear infinite; }
@keyframes hzmote { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translate(40px, -380%); opacity: 0; } }
/* A new scene opens like an iris. */
.hz-stage.enter { animation: hziris .9s cubic-bezier(.3, 0, .2, 1) both; }
@keyframes hziris { from { clip-path: circle(0% at 50% 55%); } to { clip-path: circle(80% at 50% 55%); } }

.hz-actor { position: absolute; bottom: 2%; width: 17%; max-width: 170px; margin-left: -8.5%; transition: transform .45s var(--spring), filter .45s; animation: hzenter .8s var(--spring) backwards; animation-delay: calc(var(--i, 0) * .14s + .3s); }
@keyframes hzenter { from { transform: translateY(40%) scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
.hz-actor::before { content: ""; position: absolute; left: 8%; right: 8%; bottom: 0; height: 22%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,240,190,.7), transparent); opacity: 0; transition: opacity .4s; }
.hz-actor.speaking::before { opacity: 1; }
.hz-body { position: relative; width: 100%; aspect-ratio: 1; animation: hzbreathe 4s ease-in-out infinite; transform-origin: 50% 95%; }
@keyframes hzbreathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.015, .975); } }
.hz-actor.speaking { transform: translateY(-5%) scale(1.1); z-index: 2; }
.hz-actor.listening { filter: saturate(.85) brightness(.97); }
.hz-actor.speaking .hz-body { animation: hzhop .55s var(--spring) both, hzbreathe 4s ease-in-out .55s infinite; }
@keyframes hzhop { 0% { transform: scale(1, 1); } 25% { transform: scale(1.06, .9); } 55% { transform: translateY(-9%) scale(.96, 1.05); } 100% { transform: none; } }
.hz-actor.mood-wow.speaking .hz-body { animation: hzjump .7s var(--spring) both, hzbreathe 4s ease-in-out .7s infinite; }
@keyframes hzjump { 0% { transform: none; } 20% { transform: scale(1.1, .86); } 50% { transform: translateY(-18%) scale(.94, 1.08); } 100% { transform: none; } }
.hz-actor.mood-worried.speaking .hz-body { animation: hzhop .55s var(--spring) both, hzshiver .18s linear .55s 6; }
@keyframes hzshiver { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(1.2%); } }
.hz-actor.mood-think.speaking .hz-body { animation: hzhop .55s var(--spring) both, hztilt 3s ease-in-out .55s infinite alternate; }
@keyframes hztilt { from { transform: rotate(0); } to { transform: rotate(-4deg); } }

/* Character parts (cast.js). Eyes blink, pupils look, arms sway, mouths talk. */
.wh-eyes { transform-box: fill-box; transform-origin: 50% 50%; animation: whblink 5.4s infinite; animation-delay: var(--bd, 0s); }
@keyframes whblink { 0%, 94%, 100% { transform: scaleY(1); } 96.5% { transform: scaleY(.08); } }
.wh-pupils { transform: translateX(calc(var(--look, 0) * 1.6px)); transition: transform .5s ease; }
.wh-arm { transform-box: view-box; animation: whsway 3.8s ease-in-out infinite; }
.wh-arm-r { animation-delay: -1.9s; }
@keyframes whsway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(3deg); } }
.speaking .wh-arm-r { animation: whgesture 1.3s ease-in-out infinite; }
.speaking .wh-arm-l { animation: whgesture 1.7s ease-in-out -.4s infinite reverse; }
@keyframes whgesture { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-14deg); } 65% { transform: rotate(7deg); } }
.m-talk { display: none; }
.talking .m-talk { display: inline; }
.talking .m-rest { display: none; }
.wh-mo { transform-box: fill-box; transform-origin: 50% 15%; }
.talking:not(.lipsync) .wh-mo { animation: whjaw .22s ease-in-out infinite alternate; }
@keyframes whjaw { from { transform: scaleY(.2); } to { transform: scaleY(1); } }
.lipsync .wh-mo { transform: scaleY(var(--mo, .2)); }
.hz-visual { display: none; margin: 10px 4px 0; font-size: 14px; color: var(--ink3); }
body.teacher .hz-visual { display: block; }
.hz-line { display: flex; gap: 14px; align-items: center; background: var(--blue-t); color: #041E49; border-radius: 22px; padding: 14px 18px; margin-top: 14px; min-height: 92px; }
.hz-line b { font: 800 14px var(--display); letter-spacing: .04em; text-transform: uppercase; }
.hz-line p { font: 600 clamp(18px, 2.4vw, 22px)/1.35 var(--display); margin-top: 2px; }
.hz-line.narrator { background: #EEF1F6; color: var(--ink); }
.hz-line.narrator p { font-style: italic; font-weight: 500; }
/* Karaoke captions: with a recorded voice, each word lights up as it is said. */
.hz-line p.kara .w { opacity: .38; transition: opacity .18s, color .18s; }
.hz-line p.kara .w.said { opacity: 1; }
.hz-line p.kara .w.now { opacity: 1; color: var(--c, #0B57D0); }
.hz-line.narrator p.kara .w.now { color: #1E8E3E; }
.hz-langs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--hair); }
.hz-langs button { height: 30px; padding: 0 12px; border-radius: 999px; font: 700 13px var(--display); color: var(--ink2); }
.hz-langs button[aria-pressed="true"] { background: #fff; color: #041E49; box-shadow: var(--e1); }
.hz-home-lang { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; font: 700 13px var(--display); color: var(--ink2); }
.hz-intro-lang { display: flex; justify-content: center; margin-top: 12px; }
.hz-play { min-width: 120px; }
/* Paused: the picture dims a touch and a big play button sits in the middle, like a video. */
.hz-paused { position: absolute; left: 50%; top: 50%; z-index: 6; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; display: grid; place-items: center; background: rgba(11,31,51,.62); color: #fff; box-shadow: 0 10px 30px -10px rgba(0,0,0,.5); opacity: 0; transform: scale(.8); transition: opacity .25s, transform .25s; pointer-events: none; }
.hz-paused svg { width: 38px; height: 38px; margin-left: 5px; }
.hz-stage.paused .hz-paused { opacity: 1; transform: none; }
.hz-stage.paused .hz-set, .hz-stage.paused .hz-cast { filter: saturate(.8) brightness(.92); transition: filter .25s; }
@media (max-width: 760px) { .hz-paused { width: 60px; height: 60px; margin: -30px 0 0 -30px; } .hz-paused svg { width: 28px; height: 28px; } }
.hz-play svg { width: 18px; height: 18px; }
.hz-av { width: 58px; height: 58px; flex: 0 0 58px; border-radius: 50%; display: block; padding: 5px; }
.hz-av svg { width: 100%; height: 100%; }
.hz-av-book { background: #fff; padding: 12px; box-shadow: var(--e1); }
.hz-lnav { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.hz-lnav [data-prev] { order: 0; }
.hz-dots { flex: 1; display: flex; gap: 6px; justify-content: center; }
.hz-dots i { width: 9px; height: 9px; border-radius: 50%; background: #DADCE0; transition: background .3s, transform .3s var(--spring); }
.hz-dots i.on { background: var(--green); transform: scale(1.15); }
.hz-lnav .btn[disabled] { opacity: .35; }

/* voices */
.hz-voice { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.hz-vbtn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px; background: var(--bg); font: 700 14px var(--display); color: var(--ink2); }
.hz-vbtn svg { width: 18px; height: 18px; }
.hz-vbtn[aria-pressed="true"] { background: var(--blue-t); color: #041E49; }
.hz-vol input { width: 120px; accent-color: var(--blue); vertical-align: middle; }
.hz-vsrc { font-size: 13px; color: var(--ink3); margin-left: auto; }
.hz-logit { margin: 0 0 14px; }

/* svg scene loops (reduced motion stops them via learn.css) */
.hz-tumble { animation: hztumble 5s var(--ease) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes hztumble { 0% { transform: translate(0, 0) rotate(0); } 60% { transform: translate(48px, 4px) rotate(300deg); } 100% { transform: translate(48px, 4px) rotate(300deg); } }
.hz-wiggle { animation: hzwiggle 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes hzwiggle { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg) translateX(2px); } }
.hz-rain { animation: hzrain .7s linear infinite; }
@keyframes hzrain { from { transform: translateY(-14px); } to { transform: translateY(14px); } }
.hz-drip { animation: hzdrip 1.4s ease-in infinite; transform-box: fill-box; }
@keyframes hzdrip { 0% { transform: translateY(-3px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(6px); opacity: 0; } }
.hz-pulse { animation: hzpulse 2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes hzpulse { 0%, 100% { transform: scale(.9); opacity: .6; } 50% { transform: scale(1.1); opacity: 1; } }
.hz-hover { animation: hzhover 2.4s ease-in-out infinite; }
@keyframes hzhover { 0%, 100% { transform: translate(252px, 64px) rotate(-12deg); } 50% { transform: translate(252px, 74px) rotate(-6deg); } }
.hz-rise { animation: hzrise .7s var(--spring) both; transform-box: fill-box; }
@keyframes hzrise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.hz-shrink { animation: hzshrink 5s var(--ease) infinite; transform-box: fill-box; transform-origin: bottom center; }
@keyframes hzshrink { 0%, 30% { transform: scale(1.25); } 70%, 100% { transform: scale(.55); } }
.hz-spin { animation: hzspin 14s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes hzspin { to { transform: rotate(360deg); } }
.hz-blink { animation: hzblink 1.8s steps(1) infinite; }
@keyframes hzblink { 0%, 70% { opacity: 1; } 71%, 100% { opacity: .55; } }
.hz-drift { animation: hzdrift 30s ease-in-out infinite alternate; }
@keyframes hzdrift { from { transform: translateX(-14px); } to { transform: translateX(18px); } }
.hz-sway { animation: hzsway 5s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes hzsway { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
.hz-birds { animation: hzbirds 34s linear infinite; }
@keyframes hzbirds { from { transform: translateX(-200px); } to { transform: translateX(230px); } }
.hz-flap { animation: hzflap .5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes hzflap { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(-.4); } }
.hz-grow { animation: hzgrow 1.4s var(--ease) both; transform-box: fill-box; transform-origin: bottom; }
@keyframes hzgrow { from { transform: scaleY(.2); } to { transform: none; } }

/* ── activities ── */
.hz-act .sub { text-align: center; color: var(--ink2); margin: -6px auto 14px; }
.hz-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; max-width: 820px; margin: 0 auto; }
.hz-opt { min-height: 60px; padding: 12px 16px; border-radius: var(--r-s); background: var(--bg); font: 700 17px/1.3 var(--display); text-align: left; box-shadow: inset 0 0 0 1px var(--hair); transition: transform .2s var(--spring), background .2s; }
.hz-opt:hover:not([disabled]) { background: var(--blue-t); }
.hz-opt:active:not([disabled]) { transform: scale(.97); }
.hz-opt.right { background: var(--green-t); color: #0D652D; box-shadow: none; animation: yay .5s var(--spring); }
.hz-opt.wrong { background: var(--red-t); color: #8C1D18; box-shadow: none; animation: shake .4s; }
.hz-opt[disabled]:not(.right):not(.wrong) { opacity: .5; }
.hz-act .feedback, .hz-q .feedback { text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }

.hz-spotstage { cursor: default; max-width: 860px; margin: 0 auto; }
.hz-spot { position: absolute; transform: translate(-50%, -50%); height: 40px; padding: 0 14px; border-radius: 999px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.18); font: 700 14px var(--display); white-space: nowrap; animation: hzring 2.2s ease-in-out infinite; }
.hz-spot:nth-child(odd) { animation-delay: .6s; }
@keyframes hzring { 0%, 100% { box-shadow: 0 2px 8px rgba(0,0,0,.18), 0 0 0 0 rgba(26,115,232,.35); } 50% { box-shadow: 0 2px 8px rgba(0,0,0,.18), 0 0 0 8px rgba(26,115,232,0); } }
.hz-spot.right { background: var(--green); color: #fff; animation: none; }
.hz-spot.wrong { background: var(--red-t); color: #8C1D18; animation: none; opacity: .85; }

.hz-seq { list-style: none; padding: 0; margin: 0 auto 16px; max-width: 720px; display: grid; gap: 8px; }
.hz-seq li { display: flex; align-items: center; gap: 12px; min-height: 50px; border-radius: var(--r-s); background: var(--bg); padding: 6px 14px 6px 8px; box-shadow: inset 0 0 0 1.5px var(--hair); transition: background .25s; }
.hz-seq li span { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; background: #fff; display: grid; place-items: center; font: 800 15px var(--display); color: var(--ink3); }
.hz-seq li em { font: 700 16px/1.3 var(--display); font-style: normal; }
.hz-seq li.filled { background: var(--blue-t); box-shadow: none; }
.hz-seq li.filled span { background: var(--blue); color: #fff; }
.hz-seq li.ok { background: var(--green-t); }
.hz-seq li.ok span { background: var(--green); }
.hz-seq li.bad { background: var(--red-t); }
.hz-seq li.bad span { background: var(--red); color: #fff; }

.hz-bins { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px; margin-top: 12px; }
.hz-bins .bin b { font-size: 13px; }
.hz-sorted { width: 110px; height: 110px; animation: pop .5s var(--spring) both; }

.hz-docket { max-width: 420px; margin: 0 auto 18px; background: #fff; border-radius: var(--r-m); box-shadow: var(--e2); padding: 16px 18px 12px; font-family: var(--display); }
.hz-docket-h { display: flex; justify-content: space-between; align-items: center; font: 800 15px var(--display); color: var(--green); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.hz-docket-h span { font-size: 11px; background: var(--yellow-t); color: #8A5A00; border-radius: 999px; padding: 3px 9px; letter-spacing: .02em; }
.hz-docket > div:not(.hz-docket-h) { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px dashed var(--hair); font-weight: 600; color: var(--ink2); }
.hz-docket b { color: var(--ink); }
.hz-docket b.rej { color: var(--red); }
.hz-docket .acc { background: var(--green-t); margin: 4px -10px 0; padding: 8px 10px !important; border-radius: 10px; border: 0 !important; color: #0D652D !important; }
.hz-docket .acc b { color: #0D652D; font-size: 18px; }

.hz-dcard { max-width: 780px; margin: 0 auto; }
.hz-dhead { display: flex; align-items: center; gap: 14px; justify-content: center; margin-bottom: 12px; }
.hz-dart { width: 92px; height: 92px; background: var(--bg); border-radius: 26px; padding: 10px; animation: pop .45s var(--spring) both; }
.hz-dhead .n { font: 700 12px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.hz-dhead h3 { font-size: 22px; }
.hz-tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 14px; flex-wrap: wrap; }
.hz-tabs span { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px 0 6px; border-radius: 999px; background: var(--bg); font: 700 14px var(--display); color: var(--ink3); }
.hz-tabs span em, .hz-tabs span svg { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; background: #fff; }
.hz-tabs span.on { background: var(--purple-t); color: #3D0F68; }
.hz-tabs span.done { background: var(--green-t); color: #0D652D; }
.hz-tabs span.done svg { background: var(--green); color: #fff; padding: 4px; }
.hz-dq { text-align: center; font-size: 21px; margin-bottom: 12px; }
.hz-closed { text-align: center; padding: 20px 0; }
.hz-closed svg { width: 110px; height: 110px; margin: 0 auto 8px; }
.hz-closed b { display: block; font: 800 24px var(--display); }
.hz-closed p { color: var(--ink2); }

.hz-projects { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 820px; margin: 0 auto; }
.hz-proj { background: var(--bg); border-radius: var(--r-m); padding: 16px; text-align: center; }
.hz-proj-art { width: 84px; height: 84px; margin: 0 auto 6px; }
.hz-proj h3 { font-size: 20px; margin-bottom: 10px; }
.hz-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.hz-days span { background: #fff; border-radius: 12px; padding: 6px 2px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hz-days small { font: 700 12px var(--display); color: var(--ink3); }
.hz-days i { width: 26px; height: 26px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; }
.hz-days i svg { width: 16px; height: 16px; }
.hz-days span.ok i { background: var(--green); color: #fff; animation: pop .35s var(--spring) both; }
.hz-days span.bad i { background: var(--red); color: #fff; animation: pop .35s var(--spring) both; }
.hz-reveal { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .6s var(--ease), opacity .6s; }
.hz-proj.shown .hz-reveal { max-height: 200px; opacity: 1; margin-top: 10px; }
.hz-reveal p { font-size: 15px; color: var(--ink2); }
.hz-inputs { background: #fff; border-radius: 10px; padding: 6px 10px; margin-bottom: 6px; }
.hz-after { margin-top: 22px; }
.hz-after h2 { font-size: 24px; }

.hz-rcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; max-width: 860px; margin: 0 auto; }
.hz-rcard { --t: var(--bg); text-align: left; background: var(--surface); border-radius: var(--r-s); padding: 12px 14px; box-shadow: inset 0 0 0 1.5px var(--hair); display: flex; flex-direction: column; gap: 2px; transition: transform .2s var(--spring), opacity .3s; }
.hz-rcard b { font: 800 13px var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); }
.hz-rcard span { font: 700 16px/1.3 var(--display); }
.hz-rcard:hover:not([disabled]) { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--blue); }
.hz-rcard.used { opacity: .35; transform: scale(.96); }
.hz-rcard.rejected { background: var(--red-t); box-shadow: none; animation: shake .4s; }
.hz-rcard.rejected span { text-decoration: line-through; color: #8C1D18; }
.hz-sheet { max-width: 620px; margin: 18px auto 0; background: #fff; border-radius: var(--r-m); box-shadow: var(--e2); padding: 16px; }
.hz-sheet-h { display: flex; justify-content: space-between; font: 800 16px var(--display); color: var(--green); margin-bottom: 8px; }
.hz-sheet-h span { color: var(--ink3); font-size: 14px; }
.hz-sheet-b { display: grid; gap: 8px; min-height: 40px; }
.hz-line-item { background: var(--t); border-radius: 12px; padding: 8px 12px; display: flex; gap: 10px; align-items: baseline; animation: pop .4s var(--spring) both; }
.hz-line-item b { font: 800 12px var(--display); text-transform: uppercase; letter-spacing: .06em; color: var(--ink2); min-width: 72px; }
.hz-line-item span { font-weight: 600; }

/* calm pause: a risky choice stops everything, gently */
.hz-calm { position: absolute; inset: 0; z-index: 30; background: rgba(194,231,234,.92); display: grid; place-items: center; padding: 20px; animation: screenIn .3s var(--ease) both; }
.hz-calm-in { max-width: 460px; text-align: center; background: #fff; border-radius: var(--r-l); padding: 26px 22px; box-shadow: var(--e2); }
.hz-calm-in i { display: block; width: 64px; height: 64px; margin: 0 auto 10px; }
.hz-calm-in p { font: 600 19px/1.4 var(--display); color: #004D53; margin-bottom: 16px; }

/* talk, check, missions, finish */
.hz-talk h2 { font-size: clamp(24px, 3.8vw, 36px); }
.hz-older { max-width: 640px; margin: 0 auto; background: var(--purple-t); color: #3D0F68; border-radius: var(--r-m); padding: 14px 18px; }
.hz-older b { font: 800 13px var(--display); letter-spacing: .08em; text-transform: uppercase; }
.hz-older p { font: 600 17px/1.4 var(--display); margin-top: 2px; }
.hz-fact { max-width: 640px; margin: 14px auto 0; }
.hz-q { max-width: 820px; }
.hz-q h3 { font-size: clamp(21px, 3vw, 26px); margin: 8px 0 18px; }
.hz-key { background: var(--yellow-t); color: #8A5A00; border-radius: 12px; padding: 8px 12px; margin: 14px auto 0; font-weight: 600; font-size: 15px; max-width: 720px; }
.hz-mgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 820px; margin: 0 auto; }
.hz-mission { border-radius: var(--r-m); padding: 18px; text-align: center; }
.hz-m-art { width: 72px; height: 72px; margin: 0 auto 6px; }
.hz-mission b { font: 800 20px var(--display); display: block; }
.hz-mission b small { font-size: 14px; font-weight: 600; color: var(--ink3); }
.hz-mission p { font: 600 17px/1.4 var(--display); color: var(--ink2); margin-top: 6px; }
.hz-note { max-width: 820px; margin: 16px auto 0; border-radius: var(--r-m); padding: 14px 18px; background: var(--teal-t); color: #004D53; }
.hz-note b { font: 800 13px var(--display); letter-spacing: .08em; text-transform: uppercase; }
.hz-note p { margin-top: 4px; }
.hz-done .hz-big-sticker { width: 150px; margin: 0 auto 10px; }
.hz-done .hz-sticker { width: 150px; height: 150px; padding: 30px; animation: medal 1s var(--spring); }
.hz-hook { max-width: 560px; margin: 4px auto 20px; text-align: left; }

#print { display: none; }

/* issue cards: read the comic, or play along */
.hz-ep-main { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; }
.hz-ep-play { display: flex; align-items: center; justify-content: center; height: 42px; border-top: 1px solid var(--hair); font: 700 14px var(--display); color: #0B57D0; text-decoration: none; }
.hz-ep-play:hover { background: var(--blue-t); }

/* ── the comic ── */
.cm { max-width: 900px; margin: 0 auto; }
.cm-tools { position: sticky; top: 60px; z-index: 6; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0 10px; background: rgba(246,248,252,.92); backdrop-filter: blur(10px); }
.cm-tools .back { height: 38px; }
.cm-page, .cm-part { background: #fff; border-radius: var(--r-l); box-shadow: var(--e1); padding: 22px; margin-bottom: 18px; }
.cm-page-h { font: 900 30px/1 var(--display); letter-spacing: -.01em; margin-bottom: 14px; }

/* cover */
.cm-cover { background: var(--t); text-align: center; padding: 18px 18px 22px; }
.cm-mast { display: flex; flex-direction: column; align-items: center; margin-bottom: 12px; }
.cm-mast b { font: 900 clamp(40px, 9vw, 72px)/.95 var(--display); letter-spacing: -.02em; color: #1F1F1F; -webkit-text-stroke: 0; text-shadow: 3px 3px 0 #fff; }
.cm-mast span { font: 800 13px var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); margin-top: 6px; }
.cm-cover-art { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-m); overflow: hidden; border: 4px solid #1F1F1F; }
.cm-cover-art > svg { position: absolute; inset: 0; }
.cm-cover-cast { position: absolute; left: 3%; bottom: 2%; width: 70%; display: flex; }
.cm-cover-cast div { width: 25%; aspect-ratio: 1; }
.cm-cover-sticker { position: absolute; right: 3%; top: 4%; transform: rotate(8deg); }
.cm-cover-sticker .hz-sticker { width: 86px; height: 86px; box-shadow: 0 0 0 5px #fff, 0 4px 10px rgba(0,0,0,.2); }
.cm-cover h1 { font: 900 clamp(30px, 6vw, 48px)/1.05 var(--display); margin: 16px 0 8px; }
.cm-clue { display: inline-block; background: #1F1F1F; color: #fff; border-radius: 999px; padding: 6px 14px; font: 700 14px var(--display); }
.cm-recap { max-width: 620px; margin: 14px auto 0; background: #fff; border-radius: 14px; padding: 12px 16px; text-align: left; font: 600 16px/1.4 var(--display); }
.cm-recap b { display: block; font: 800 12px var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--green); }
.cm-inside { margin-top: 12px; font: 700 13px var(--display); color: var(--ink2); }

/* story */
.cm-part { padding: 16px; }
.cm-part-h { display: flex; align-items: baseline; gap: 10px; font: 800 22px var(--display); margin: 2px 4px 12px; }
.cm-part-h span { font: 800 12px var(--display); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--green); border-radius: 999px; padding: 4px 10px; }
.cm-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cm-panel { position: relative; margin: 0; overflow: hidden; border: 3px solid #1F1F1F; border-radius: 10px; background: #DDEBFA; break-inside: avoid; page-break-inside: avoid; }
.cm-panel > svg, .cm-zoom > svg { position: absolute; inset: 0; }
.cm-panel.wide { grid-column: 1 / -1; aspect-ratio: 16 / 8; }
.cm-panel.close { aspect-ratio: 1 / 1; }
.cm-panel.close.span { grid-column: 1 / -1; aspect-ratio: 16 / 8; }
.cm-zoom { position: absolute; inset: 0; transform: scale(1.6); transform-origin: 55% 78%; filter: saturate(.85) brightness(1.03); }
.cm-dots { position: absolute; inset: 0; background-color: var(--t); background-image: radial-gradient(rgba(255,255,255,.75) 18%, transparent 20%); background-size: 16px 16px; }
.cm-actor { position: absolute; bottom: 2%; width: 17%; margin-left: -8.5%; }
.cm-actor.on { transform: translateY(-4%) scale(1.08); }
.cm-speaker, .cm-partner { position: absolute; bottom: -3%; aspect-ratio: 1; }
.cm-speaker { width: 50%; }
.cm-partner { width: 36%; bottom: -5%; filter: saturate(.8); }
.cm-panel.span .cm-speaker { width: 28%; } .cm-panel.span .cm-partner { width: 20%; }
.cm-speaker.l { left: 4%; } .cm-speaker.r { right: 4%; }
.cm-partner.l { left: 2%; } .cm-partner.r { right: 2%; }
.cm-bub, .cm-cap { position: absolute; top: 5%; margin: 0; max-width: 78%; z-index: 2; font: 600 clamp(14px, 1.9vw, 17px)/1.35 var(--display); cursor: default; }
.cm-bub { background: #fff; color: #1F1F1F; border: 2.5px solid #1F1F1F; border-radius: 22px; padding: 9px 13px 10px; box-shadow: 3px 3px 0 rgba(0,0,0,.12); }
.cm-bub b { display: block; font: 800 11px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--c); margin-bottom: 1px; }
.cm-bub.l { left: 4%; } .cm-bub.r { right: 4%; }
/* The tail: a dark triangle with a white one inside it, pointing down at the speaker. */
.cm-bub::before, .cm-bub::after { content: ""; position: absolute; width: 0; height: 0; border-style: solid; border-color: transparent; border-bottom: 0; }
.cm-bub::before { bottom: -17px; border-width: 17px 10px 0; border-top-color: #1F1F1F; }
.cm-bub::after { bottom: -12px; border-width: 13px 7px 0; border-top-color: #fff; }
.cm-bub.l::before { left: 26%; } .cm-bub.l::after { left: calc(26% + 3px); }
.cm-bub.r::before { right: 26%; } .cm-bub.r::after { right: calc(26% + 3px); }
.cm-cap { left: 3%; background: #FEEFC3; color: #3C2A00; border: 2.5px solid #1F1F1F; border-radius: 4px; padding: 8px 12px; font-style: italic; box-shadow: 3px 3px 0 rgba(0,0,0,.12); }
body:not(.teacher) .cm-bub, body:not(.teacher) .cm-cap { cursor: pointer; }
.cm-speaking { outline: 3px solid var(--blue); outline-offset: 2px; }

/* puzzle page */
.pz { border-top: 2px dashed var(--hair); padding: 14px 0 6px; break-inside: avoid; page-break-inside: avoid; }
.pz h4 { font: 800 19px/1.3 var(--display); margin: 0 0 10px; }
.pz-do { font: 700 13px var(--display); color: var(--ink3); margin-top: 8px; text-transform: uppercase; letter-spacing: .06em; }
.pz-box { display: inline-block; width: 22px; height: 22px; flex: 0 0 22px; border: 2px solid #1F1F1F; border-radius: 5px; background: #fff; vertical-align: middle; margin-right: 10px; }
.pz-ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pz-ticks li { display: flex; align-items: center; font-weight: 600; }
.pz-scene { position: relative; aspect-ratio: 16 / 9; max-width: 560px; border: 3px solid #1F1F1F; border-radius: 10px; overflow: hidden; }
.pz-scene > svg { position: absolute; inset: 0; }
.pz-dot { position: absolute; transform: translate(-50%, -50%); width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 2.5px solid #1F1F1F; display: grid; place-items: center; font: 900 16px var(--display); }
.pz-list { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-weight: 600; }
.pz-list b { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #1F1F1F; color: #fff; font: 800 13px var(--display); margin-right: 4px; }
.pz-bins { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.pz-bins span { display: flex; align-items: center; gap: 6px; background: var(--bg); border-radius: 999px; padding: 4px 12px 4px 4px; font: 700 13px var(--display); }
.pz-bins b { width: 26px; height: 26px; border-radius: 50%; background: #1F1F1F; color: #fff; display: grid; place-items: center; }
.pz-bins i { width: 26px; height: 26px; display: block; }
.pz-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.pz-items span { display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--bg); border-radius: 12px; padding: 10px 6px; font: 700 13px/1.2 var(--display); text-align: center; }
.pz-items i { width: 52px; height: 52px; display: block; }
.pz-items .pz-box { margin: 4px 0 0; }
.pz-case { display: flex; gap: 12px; align-items: flex-start; background: var(--bg); border-radius: 14px; padding: 12px; margin-bottom: 8px; }
.pz-case > i { width: 64px; height: 64px; flex: 0 0 64px; display: block; }
.pz-case > div > b { font: 800 16px var(--display); display: block; margin-bottom: 4px; }
.pz-row { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; padding: 3px 0; font-size: 15px; font-weight: 600; }
.pz-row em { font: 800 13px var(--display); font-style: normal; min-width: 88px; color: var(--ink2); }
.pz-row span { display: inline-flex; align-items: center; }
.pz-row .pz-box { width: 18px; height: 18px; flex-basis: 18px; margin-right: 6px; }
.pz-week { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.pz-week > div { background: var(--bg); border-radius: 14px; padding: 12px; text-align: center; }
.pz-week i { width: 56px; height: 56px; display: block; margin: 0 auto; }
.pz-week b { display: block; font: 800 16px var(--display); margin: 4px 0 8px; }
.pz-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 6px; }
.pz-days span { background: #fff; border-radius: 8px; padding: 4px 0; font: 700 11px/1.2 var(--display); color: var(--ink3); }
.pz-days svg { width: 16px; height: 16px; margin: 2px auto 0; display: block; }
.pz-days .ok svg { color: var(--green); } .pz-days .bad svg { color: var(--red); }
.pz-week small { color: var(--ink2); }
.pz-quiz { padding-left: 22px; margin: 0; display: grid; gap: 10px; }
.pz-quiz li { font-weight: 700; }
.pz-quiz div { display: flex; flex-wrap: wrap; gap: 4px 16px; font-weight: 500; margin-top: 4px; }
.pz-quiz b { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 2px solid #1F1F1F; border-radius: 50%; font: 800 12px var(--display); margin-right: 4px; }
.pz-answers { margin-top: 18px; transform: rotate(180deg); background: var(--bg); border-radius: 12px; padding: 10px 14px; font-size: 13px; color: var(--ink2); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.pz-answers b { font: 800 12px var(--display); text-transform: uppercase; letter-spacing: .08em; width: 100%; }
.cm-puzzles .cm-screen { margin-top: 12px; }

/* back page */
.cm-missions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cm-missions > div { border-radius: var(--r-m); padding: 16px; }
.cm-missions i { width: 56px; height: 56px; display: block; }
.cm-missions b { display: block; font: 800 19px var(--display); margin-top: 4px; }
.cm-missions small { font-weight: 600; color: var(--ink3); font-size: 13px; }
.cm-missions p { font: 600 16px/1.4 var(--display); color: var(--ink2); margin-top: 4px; }
.cm-talk { margin-top: 14px; background: var(--purple-t); color: #3D0F68; border-radius: var(--r-m); padding: 14px 16px; }
.cm-talk > b { font: 800 12px var(--display); letter-spacing: .1em; text-transform: uppercase; }
.cm-talk p { font: 600 17px/1.4 var(--display); margin-top: 2px; }
.cm-talk .cm-fact { font-size: 15px; margin-top: 8px; }
.cm-safe { margin-top: 12px; background: var(--red-t); color: #8C1D18; border-radius: 12px; padding: 10px 14px; font: 700 15px var(--display); }
.cm-next { margin-top: 14px; display: grid; grid-template-columns: 180px 1fr; gap: 14px; align-items: center; border: 3px solid #1F1F1F; border-radius: var(--r-m); padding: 12px; }
.cm-next-art { position: relative; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; }
.cm-next-art svg { position: absolute; inset: 0; }
.cm-next span { font: 800 12px var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--green); }
.cm-next b { display: block; font: 900 22px var(--display); }
.cm-next p { font-style: italic; color: var(--ink2); margin: 4px 0 8px; }
.cm-foot { margin-top: 14px; text-align: center; font-size: 12px; color: var(--ink3); }

@media (max-width: 640px) {
  .cm-strip { grid-template-columns: 1fr; }
  .cm-panel.close, .cm-panel.close.span { aspect-ratio: 1 / 1; }
  .cm-panel.close.span .cm-speaker { width: 50%; } .cm-panel.close.span .cm-partner { width: 36%; }
  .cm-panel.wide { aspect-ratio: 16 / 10; }
  .cm-bub, .cm-cap { font-size: 15px; max-width: 86%; padding: 7px 11px 8px; }
  .cm-page, .cm-part { padding: 14px; border-radius: var(--r-m); }
  .cm-missions, .pz-week { grid-template-columns: 1fr; }
  .cm-next { grid-template-columns: 1fr; }
  .cm-tools { position: static; flex-wrap: wrap; gap: 6px; }
  .cm-tools .hz-langs { order: 10; }
  .cm-tools .spacer { display: none; }
  .cm-tools .hz-vbtn span { display: none; }
  .cm-tools .back { padding-right: 10px; }
  .cm-tools .btn.sm { padding: 0 12px; height: 38px; font-size: 14px; }
  .cm-tools [data-print] { margin-left: auto; }
}

/* Print the issue as a comic: cover, story, puzzles, back page on A4. */
@media print {
  @page { size: A4; margin: 10mm; }
  body.reading main { display: block !important; max-width: none; padding: 0; }
  body.reading #print { display: none !important; }
  body.reading * { animation: none !important; transition: none !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cm-tools, .cm-screen { display: none !important; }
  .cm { max-width: none; }
  .cm-page, .cm-part { box-shadow: none; border-radius: 0; padding: 0; margin: 0 0 6mm; }
  .cm-cover { padding: 6mm; border-radius: 8px; break-after: page; page-break-after: always; }
  .cm-puzzles, .cm-back { break-before: page; page-break-before: always; }
  .cm-part { margin-bottom: 4mm; }
  .cm-part-h { break-after: avoid; font-size: 13pt; margin: 0 0 2mm; }
  .cm-part-h span { font-size: 7.5pt; padding: 2px 7px; }
  .cm-strip { gap: 2.5mm; }
  .cm-panel { border-width: 2px; border-radius: 6px; }
  .cm-panel.wide, .cm-panel.close.span { aspect-ratio: 16 / 6; }
  .cm-panel.close { aspect-ratio: 4 / 3; }
  .cm-speaker { width: 42%; } .cm-partner { width: 30%; }
  .cm-bub, .cm-cap { font-size: 9.5pt; padding: 4px 8px 5px; border-width: 1.8px; box-shadow: none; }
  .cm-bub b { font-size: 6.5pt; }
  .cm-bub::before { border-width: 11px 7px 0; bottom: -11px; } .cm-bub::after { border-width: 8px 5px 0; bottom: -7.5px; }
  .pz { padding: 3mm 0 1mm; }
  .pz h4 { font-size: 11.5pt; margin-bottom: 2mm; }
  .pz-scene { max-width: 115mm; }
  .pz-answers { break-inside: avoid; page-break-inside: avoid; }
  .cm-tools + .cm-page { margin-top: 0; }
}

@media (max-width: 760px) {
  .hz-lineup { height: 190px; }
  .hz-projects, .hz-mgrid { grid-template-columns: 1fr; }
  .hz-line { padding: 12px 14px; gap: 10px; min-height: 80px; }
  .hz-av { width: 46px; height: 46px; flex-basis: 46px; }
  .hz-actor { width: 20%; margin-left: -10%; }
  .hz-play { min-width: 0; padding: 0 12px; }
  .hz-play span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hz-spot { height: 32px; padding: 0 10px; font-size: 12px; }
  .hz-intro-art { aspect-ratio: 16 / 9; }
  .hz-person-art { width: 76px; height: 76px; flex-basis: 76px; }
  .hz-cast-grid { grid-template-columns: 1fr; }
}

@media print {
  body { background: #fff; font-size: 12pt; }
  .bar, main, footer, #confetti, .toast, .cert { display: none !important; }
  #print { display: block !important; color: #000; }
  .pr-ep { page-break-after: always; break-after: page; }
  .pr-ep:last-child { page-break-after: auto; break-after: auto; }
  .pr-k { font: 700 9pt var(--display); text-transform: uppercase; letter-spacing: .08em; color: #555; }
  #print h1 { font-size: 22pt; margin: 4pt 0 6pt; }
  #print h2 { font-size: 14pt; margin: 14pt 0 4pt; border-bottom: 1px solid #ccc; padding-bottom: 2pt; }
  #print h3 { font-size: 11.5pt; margin: 10pt 0 2pt; }
  #print p { margin: 2pt 0; }
  .pr-vis { color: #555; font-style: italic; }
  .pr-line { padding-left: 10pt; }
  .pr-ch { display: flex; gap: 14pt; flex-wrap: wrap; color: #333; }
  .pr-fact, .pr-note { border: 1px solid #bbb; border-radius: 6pt; padding: 6pt 8pt; margin-top: 8pt !important; }
  .pr-key { margin-top: 12pt; font-size: 10pt; color: #333; border-top: 1px dashed #999; padding-top: 6pt; }
}