.comic-book{--comic-ink:#35494b;--comic-outline:2px solid var(--comic-ink);--header-height:99px;width:100%;height:calc(1450svh - var(--header-height));position:relative}.comic-stage{top:var(--header-height);height:calc(100svh - var(--header-height));isolation:isolate;position:sticky;overflow:clip}.comic-stage:after{content:"";height:3px;width:var(--story-progress,0%);z-index:10;pointer-events:none;background:#7c9780;position:absolute;bottom:0;left:0}.comic-scroll-track{pointer-events:none;width:1px;position:absolute;top:30svh;left:0}.comic-scroll-stop{height:150svh;scroll-margin-top:calc(var(--header-height) - 110px)}.comic-accessible-note{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.comic-frame{isolation:isolate;visibility:hidden;opacity:0;--draw:1;--drift:0px;--camera-scale:1;--speech-opacity:1;--student-opacity:0;--caption-opacity:1;background:#f7f2e7;transition:opacity .35s,visibility .35s;position:absolute;inset:0;overflow:clip}.comic-frame[data-active=true]{visibility:visible;opacity:1}.comic-frame:after{content:"";pointer-events:none;border:1px solid #35494b29;position:absolute;inset:10px}.comic-scene-1,.comic-scene-6{background:#e8f0ec}.comic-scene-2{background:#eaf0f4}.comic-scene-3{background:#f5e9dd}.comic-scene-4{background:#e9eddf}.comic-scene-5,.comic-scene-8{background:#f5efe1}.comic-scene-7{background:#f0e8df}.comic-art{z-index:-1;pointer-events:none;position:absolute;inset:0}.comic-illustration{width:100%;height:100%;transform:translateY(var(--drift)) scale(var(--camera-scale));transform-origin:55% 60%;display:block}.comic-heading{z-index:2;max-width:90%;position:absolute;top:28px;left:4%}.comic-chapter{font:10px var(--mono);letter-spacing:.03em;border:var(--comic-outline);box-shadow:3px 3px 0 var(--comic-ink);background:#fffaf0;margin-bottom:16px;padding:7px 11px;display:table;transform:rotate(-1.5deg)}.comic-heading h1,.comic-heading h2{letter-spacing:-.055em;color:var(--comic-ink);font-size:clamp(36px,3.7vw,58px);font-weight:850;line-height:1.03}.comic-heading h1{letter-spacing:-.07em;font-size:clamp(61px,6.25vw,99px)}.comic-heading h1>span{color:#9d7660}.comic-heading>p{margin-top:10px;font-size:14px;font-weight:550}.speech-bubble{z-index:3;border:var(--comic-outline);background:#fffdf5;border-radius:46% 43% 41% 38%/26% 29% 27%;padding:24px 34px 27px;position:absolute;box-shadow:3px 4px #35494b1c}.speech-bubble:after{content:"";border-right:var(--comic-outline);border-bottom:var(--comic-outline);z-index:-1;background:#fffdf5;width:27px;height:27px;position:absolute;bottom:-15px;left:61%;transform:skewY(24deg)rotate(35deg)}.primary-speech{width:29%;opacity:var(--speech-opacity);transform:rotate(-1deg);translate:0 calc((1 - var(--speech-opacity)) * 14px);top:155px;left:4%}.speech-bubble p{letter-spacing:-.02em;font-size:clamp(13px,1.13vw,17px);font-weight:550;line-height:1.6}.bubble-speaker{color:#60756e;margin-bottom:8px;font-size:9px;font-weight:650;display:block}.student-speech{max-width:260px;opacity:var(--student-opacity);transform:rotate(2deg);translate:0 calc((1 - var(--student-opacity)) * 12px);padding:13px 22px;top:53%;left:16%}.student-speech p{font-size:12px;font-weight:550}.student-speech:after{width:17px;height:17px;bottom:-9px;left:32%}.comic-caption{border:var(--comic-outline);z-index:3;width:30%;max-width:470px;opacity:var(--caption-opacity);transform:rotate(-.8deg);translate:0 calc((1 - var(--caption-opacity)) * 20px);background:#fffaf0;padding:17px 20px;position:absolute;bottom:48px;left:4%;box-shadow:4px 5px #35494b20}[data-speech-ready=false] .primary-speech,[data-caption-ready=false] .comic-caption{visibility:hidden;pointer-events:none}.comic-caption>p{color:#485e58;font-size:11px;line-height:1.7}.comic-tags{font:11px var(--mono);color:#516a61;flex-wrap:wrap;gap:7px 13px;display:flex}.comic-tags span:before{content:"· "}.comic-button{border:var(--comic-outline);box-shadow:3px 3px 0 var(--comic-ink);background:#d3e0c8;justify-content:space-between;align-items:center;gap:15px;width:100%;min-height:44px;margin-top:13px;padding:12px 16px;font-size:11px;font-weight:700;transition:transform .2s,box-shadow .2s;display:inline-flex}.comic-button svg{width:17px;height:17px}.comic-button:hover{box-shadow:1px 1px 0 var(--comic-ink);background:#c4d7b8;transform:translate(2px,2px)}.comic-next{font:10px var(--mono);z-index:3;align-items:center;gap:17px;display:flex;position:absolute;bottom:26px;left:4%}.comic-next span{font-size:24px;line-height:1}.comic-page-number{font:10px var(--mono);color:#617269;position:absolute;bottom:25px;left:4%}.comic-cover .comic-page-number{display:none}.comic-cover .comic-caption{bottom:65px}.comic-cover .primary-speech{width:30%;top:110px;left:auto;right:5%}.comic-cover .student-speech{top:52%;left:13%}.comic-scene-1 .student-speech{top:71%;left:auto;right:12%}.comic-scene-2 .primary-speech{width:31%;top:148px;left:auto;right:4%}.comic-scene-2 .student-speech{top:53%;left:48%}.comic-scene-2 .comic-caption{width:38%}.comic-scene-3 .primary-speech{width:38%;top:130px;left:auto;right:5%}.comic-scene-3 .student-speech{top:57%;left:5%}.comic-scene-4 .primary-speech{width:36%;top:126px;left:auto;right:5%}.comic-scene-4 .student-speech{top:34%;left:14%}.comic-scene-5 .student-speech{top:44%;left:68%}.comic-scene-6 .primary-speech{width:34%;top:180px}.comic-exercise{overscroll-behavior-y:contain;border:var(--comic-outline);z-index:3;background:#fffdf4;width:47%;padding-bottom:2px;position:absolute;top:145px;bottom:36px;right:5%;overflow:auto;transform:rotate(.5deg);box-shadow:6px 6px #35494b27}.comic-exercise .quest-console{box-shadow:none;background:0 0;border:0;margin:0}.comic-exercise .quest-body{min-height:0}.comic-exercise .quest-idle{padding:12px 24px 20px}.comic-exercise .console-top,.comic-exercise .console-bottom{color:var(--comic-ink);background:#e0e9d8}.comic-exercise .pixel-spark{color:#8c9f70}.comic-exercise .button{border:var(--comic-outline);box-shadow:3px 3px 0 var(--comic-ink);background:#d3e0c8;border-radius:0}.comic-exercise .quest-option{border-color:#c0cdbb;border-radius:0}.comic-exercise .quest-option.correct{background:#dce8d2}.comic-exercise .quest-option.incorrect{background:#f0ddd1}.comic-questions{overscroll-behavior-y:contain;z-index:3;width:57%;padding:3px 8px 12px 0;position:absolute;top:155px;bottom:36px;left:4%;overflow:auto}.comic-scene-7 .primary-speech{width:30%;top:168px;left:auto;right:4%}.comic-questions details{border:var(--comic-outline);background:#fffdf5;border-radius:17px 21px 18px 6px;margin:0 0 14px;padding:0 19px;box-shadow:3px 3px #35494b18}.comic-questions details:nth-child(2n){background:#f1f5e8;margin-left:18px}.comic-questions summary{cursor:pointer;align-items:center;gap:12px;min-height:60px;font-size:13px;font-weight:650;list-style:none;display:flex}.comic-questions summary::-webkit-details-marker{display:none}.question-number{font:10px var(--mono);color:#68806c}.question-plus{margin-left:auto;font-size:21px;font-weight:400}.comic-questions details[open] .question-plus{transform:rotate(45deg)}.comic-questions details>p{color:#51665d;padding:0 10px 18px 28px;font-size:12px;line-height:1.8}.comic-scene-8 .primary-speech{width:32%;top:140px;left:auto;right:5%}.comic-scene-8 .student-speech{top:53%;left:14%}.comic-caption .comic-parent-note{margin-top:10px;font-size:10px}.comic-frame .teacher-arm{transform-origin:87px 166px;transform:rotate(var(--arm-turn,0deg))}.comic-frame .teacher-mouth{transform-box:fill-box;transform-origin:50%;transform:scaleY(var(--mouth-open,1))}.comic-frame .teacher-head{transform-origin:0 100px;transform:rotate(var(--head-turn,0deg))}.comic-frame.is-in-view .teacher-eyes{transform-box:fill-box;transform-origin:50%;animation:5.3s infinite comic-blink}.comic-frame.is-in-view .comic-steam{animation:4s ease-in-out infinite comic-steam}.comic-frame .pose-game .teacher-arm{transform:translate(-65px, 68px) rotate(var(--arm-turn,0deg))}.comic-draw-line{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--draw))}.solution-step{opacity:0;transition:opacity .4s}[data-solution=working] .step-one,[data-solution=complete] .solution-step{opacity:1}@keyframes comic-blink{0%,92%,96%,to{transform:scaleY(1)}94%{transform:scaleY(.12)}}@keyframes comic-steam{0%,to{opacity:.25;transform:translateY(0)}50%{opacity:.8;transform:translateY(-9px)}}@media (width<=960px){.comic-book{--header-height:85px}}@media (width<=1100px) and (width>=761px){.comic-heading h2{font-size:39px}.comic-caption{width:35%;padding:14px}.speech-bubble{padding:22px 25px}.primary-speech{width:32%}.comic-button{padding-inline:11px;font-size:10px}}@media (width<=760px){.comic-book{--header-height:77px}.comic-heading{max-width:88%;top:20px;left:6%}.comic-heading h1{font-size:clamp(38px,10vw,64px)}.comic-heading h2{font-size:clamp(25px,7.1vw,39px)}.comic-heading>p{margin-top:5px;font-size:11px}.comic-chapter{margin-bottom:13px;padding:5px 8px;font-size:8px}.comic-frame .primary-speech{left:6%;right:auto;top:max(122px, calc(var(--heading-bottom,100px) + 18px));width:88%;padding:18px 24px}.speech-bubble p{font-size:12px;line-height:1.6}.bubble-speaker{margin-bottom:5px;font-size:8px}.comic-frame .comic-art{height:calc(100% - 365px);min-height:230px;inset:232px 0 auto}.comic-frame .student-speech{max-width:70%;padding:9px 16px;top:61%;left:7%;right:auto}.student-speech p{font-size:9px}.comic-frame .comic-caption{width:90%;max-width:none;padding:12px 15px;bottom:48px;left:5%}.comic-caption>p{font-size:12px;line-height:1.6}.comic-tags{gap:6px 10px;font-size:9px}.comic-button{min-height:42px;margin-top:10px;padding:10px 12px;font-size:10px}.comic-frame.comic-cover .comic-caption{bottom:65px}.comic-next{gap:8px;font-size:9px;bottom:22px;left:6%}.comic-next span{font-size:20px}.comic-page-number{font-size:8px;bottom:28px;left:6%}.comic-exercise{top:max(242px, calc(var(--speech-bottom,218px) + 24px));width:90%;bottom:36px;left:5%;right:auto}.comic-exercise .quest-idle{padding:8px 18px 18px}.comic-exercise .console-top,.comic-exercise .console-bottom{font-size:7px}.comic-exercise .quest-idle h3{margin-block:7px 14px;font-size:16px}.comic-exercise .quest-idle svg{max-height:82px}.comic-exercise .quest-active{padding:18px}.comic-exercise .quest-active h3{font-size:20px}.comic-questions{top:max(236px, calc(var(--speech-bottom,212px) + 24px));width:90%;bottom:36px;left:5%}.comic-questions details{margin-bottom:12px;padding-inline:12px}.comic-questions details:nth-child(2n){margin-left:8px}.comic-questions summary{gap:8px;min-height:54px;font-size:11px}.question-number{font-size:8px}.comic-questions details>p{padding-left:0;font-size:11px}.comic-caption .comic-parent-note{margin-top:8px;font-size:9px}}@media (width<=760px) and (height<=740px){.comic-heading{top:16px}.comic-chapter{margin-bottom:10px}.comic-heading h2{font-size:25px}.comic-frame .primary-speech{top:max(108px, calc(var(--heading-bottom,90px) + 18px));padding:14px 22px}.comic-frame .comic-art{height:calc(100% - 290px);min-height:210px;top:200px}.comic-frame .student-speech{top:58%}.comic-caption{padding-block:10px}.comic-exercise,.comic-questions{top:max(218px, calc(var(--speech-bottom,194px) + 24px))}}@media (height<=500px) and (width>=600px){.comic-heading{max-width:55%;top:15px;left:3%}.comic-heading h1{font-size:44px}.comic-heading h2{font-size:27px}.comic-chapter{margin-bottom:9px;padding:4px 8px;font-size:8px}.comic-heading>p{font-size:10px}.comic-frame .comic-art{height:100%;min-height:0;inset:0}.comic-frame .primary-speech{width:38%;padding:14px 20px;top:22px;left:auto;right:3%}.speech-bubble p{font-size:10px}.comic-frame .comic-caption{width:38%;padding:10px 14px;bottom:28px;left:auto;right:3%}.comic-caption>p{font-size:9px;line-height:1.4}.comic-button{min-height:34px;margin-top:8px;padding:7px 10px;font-size:9px}.student-speech{display:none}.comic-frame[data-caption-ready=true]:not(.comic-cover) .primary-speech{visibility:hidden}.comic-exercise{width:52%;inset:110px 3% 28px auto}.comic-scene-6 .primary-speech{width:35%;top:110px;left:3%;right:auto}.comic-questions{width:55%;top:110px;bottom:28px;left:3%}.comic-questions summary{min-height:44px;font-size:10px}}@media (prefers-reduced-motion:reduce){.comic-book *,.comic-book :before,.comic-book :after{transition:none!important;animation:none!important}.comic-illustration{transform:none}.solution-step{opacity:1}.comic-draw-line{stroke-dashoffset:0}}