/* Colour and shape only: brings the original lessons into the storybook look. Loaded after the lesson styles. */
html{scroll-behavior:auto}
body{font:400 17px/1.55 var(--body);color:var(--ink);background-color:var(--paper)}
main{max-width:1240px;margin-inline:auto;padding:0 var(--gutter-r) 0 var(--gutter-l)}
#nav,#chapter4-nav,#stage{display:none!important}
.note{background:var(--white)!important;border:2px solid var(--ink);border-radius:var(--r-card);box-shadow:4px 4px 0 var(--ink);padding:14px 20px;margin:0 0 34px;color:var(--ink)}

/* Math page top */
.math-hero{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:12px 30px;align-items:center;padding-block:18px 26px}
.math-hero h1{font-size:clamp(3.2rem,7.5vw,6.2rem);line-height:.92;color:var(--ink);margin:10px 0 14px}
.math-hero h1 .c{color:var(--tomato);font-style:italic;font-weight:400}
.math-hero p{margin:0 0 7px}
.math-art{position:relative;min-width:0;transform:rotate(-1deg)}
.math-art img{width:100%}
.mathematics{font:700 clamp(2.2rem,5.2vw,3.8rem)/1 var(--script);color:var(--leaf);text-align:center;margin-top:-8px}
.back{display:inline-block;font-weight:800;margin-bottom:13px}
.float{position:absolute;pointer-events:none}

/* Chapters and dropdowns */
.chapters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;align-items:start;margin-bottom:60px}
.chapter{min-width:0;padding:22px;border:2px solid var(--ink);border-radius:var(--r-card);box-shadow:6px 6px 0 var(--ink)}
.chapter.c3{background:#FFE3D8}.chapter.c4{background:#DCEFFF}
.chapter.c1{background:#E1F4E9}.chapter.c2{background:#FFF0C8}
.chapter-doodle{color:#5F2BD0;font:900 clamp(1.25rem,2vw,1.8rem)/1 var(--display);letter-spacing:.04em;white-space:nowrap}
.chapter-title{margin:0;font:inherit;letter-spacing:0}
button.chapter-toggle{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;width:100%;padding:0;border:0;border-radius:14px;background:none;color:var(--ink);text-align:left;font:inherit}
.chapter-text{display:flex;flex-direction:column;gap:4px;flex:1 1 200px;min-width:0}
.chapter-name{font:900 clamp(2rem,3.6vw,2.8rem)/1 var(--display);letter-spacing:-.015em}
.chapter-text .sub{font-weight:800;font-size:.95rem;line-height:1.3}
.chapter-text .count{font-weight:700;font-size:.85rem;color:var(--ink-soft)}
.chapter-toggle img{height:46px;width:auto;max-width:150px}
.chapter-toggle .arrow{flex:none;width:16px;height:16px;margin:0 8px 6px auto;border-right:4px solid var(--ink);border-bottom:4px solid var(--ink);transform:rotate(45deg)}
.chapter-toggle[aria-expanded=true] .arrow{transform:rotate(-135deg) translate(-5px,-5px)}
.chapter-toggle:hover .chapter-name{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:4px}
.lesson-list{display:grid;grid-template-columns:minmax(0,1fr);gap:9px;margin:16px 0 0;padding:0;list-style:none}
.lesson-list[hidden]{display:none}
.lesson{min-width:0;scroll-margin-top:10px}
button.lesson-toggle{display:flex;align-items:center;gap:13px;width:100%;min-height:58px;padding:7px 14px 7px 8px;border:2px solid var(--ink);border-radius:16px 22px 18px 20px;background:var(--white);color:var(--ink);text-align:left;font:800 1.02rem/1.25 var(--body);box-shadow:3px 3px 0 var(--ink);scroll-margin-top:10px;transition:transform .12s,box-shadow .12s}
button.lesson-toggle:hover{transform:translate(-1px,-2px);box-shadow:5px 5px 0 var(--ink)}
.lesson-toggle .num{flex:none;display:grid;place-items:center;width:50px;height:42px;border:2px solid var(--ink);border-radius:12px 15px 11px 14px;background:var(--c,var(--sun));color:var(--ink);font:900 1rem var(--display)}
.lesson:nth-child(6n+1){--c:var(--sun)}.lesson:nth-child(6n+2){--c:var(--aqua)}.lesson:nth-child(6n+3){--c:var(--pink)}.lesson:nth-child(6n+4){--c:#9BC4FF}.lesson:nth-child(6n+5){--c:#8DE39F}.lesson:nth-child(6n+6){--c:#C9B0FF}
.lesson-toggle .name{flex:1;min-width:0}
.lesson-toggle .arrow{flex:none;width:12px;height:12px;margin-right:4px;border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s}
.lesson.open .lesson-toggle{background:var(--ink);color:#fff}
.lesson.open .lesson-toggle .arrow{border-color:#fff;transform:rotate(225deg) translate(-2px,-2px)}
.chapters.has-open{grid-template-columns:minmax(0,1fr)}
.chapters.has-open .lesson-list{grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))}
.lesson.open{grid-column:1/-1}
.lesson-panel{margin-top:14px;padding:clamp(12px,2vw,22px);background:var(--paper);border:2px solid var(--ink);border-radius:20px 26px 22px 24px}
button.lesson-close{display:block;margin:22px auto 4px;background:var(--white);color:var(--ink);border:2px solid var(--ink);border-radius:var(--r-btn);box-shadow:3px 3px 0 var(--ink)}

/* Lesson content */
#content h2{font-family:var(--display);font-weight:900;letter-spacing:-.01em;line-height:1.08;color:var(--ink)}
#content h3{font-family:var(--body);font-weight:800;line-height:1.3;margin:7px 0 10px;color:var(--ink);letter-spacing:0}
#content .card,#content .test,#content .ch4-card,#content .ch4-quiz,#content .review-card,#content .review-quiz{border:2px solid var(--ink);border-radius:var(--r-card);box-shadow:4px 4px 0 var(--ink);background:var(--white)}
#content .grid>.card:nth-child(4n+1),#content .ch4-grid>.ch4-card:nth-child(4n+1),#content .review-grid>.review-card:nth-child(4n+1){background:#FFFBEC}#content .grid>.card:nth-child(4n+2),#content .ch4-grid>.ch4-card:nth-child(4n+2),#content .review-grid>.review-card:nth-child(4n+2){background:#F2FCF8}#content .grid>.card:nth-child(4n+3),#content .ch4-grid>.ch4-card:nth-child(4n+3),#content .review-grid>.review-card:nth-child(4n+3){background:#FFF4F8}#content .grid>.card:nth-child(4n),#content .ch4-grid>.ch4-card:nth-child(4n),#content .review-grid>.review-card:nth-child(4n){background:#F2F7FF}
#content .test{margin-top:30px}
#content button:not(.choice):not(.study31-choice):not(:disabled){background:#5F2BD0;color:#fff}
#content .status{color:var(--ink-soft)}
#content iframe{border:2px solid var(--ink);border-radius:16px;background:#fff}
#content .answer{color:var(--ink)}
/* Lesson drawings: bright, bold and readable at lesson text size. Sizes come from assets/lessons/drawing-style.js. */
#content svg{display:block;width:100%;height:auto!important;min-height:0!important;max-height:none!important;max-width:340px;margin-inline:auto;overflow:visible}
#content .review-picture svg,#content .ch4-svg{max-width:390px}
#content svg text{font-family:var(--body);font-weight:800}
#content .study-coordinate svg,#content .lab-square>svg,#content .quest-picture .lab-square>svg{max-width:280px}
#content .chip{min-width:46px;min-height:46px;padding:0 8px;border:3px solid var(--ink);background:#FFD23F;color:var(--ink);font-size:1.15rem;font-weight:800}
#content .chip.active{background:#6A2BE2;color:#fff}
#content .line{font-size:1.25rem;font-weight:800}
#content .quest-picture{min-height:0}
#content .quest-picture small,#content .lab-picture small,#content .lab-bar-row+small{font-size:15px;font-weight:700;color:var(--ink)}
#content .quest-bar{height:30px;border:3px solid var(--ink);border-radius:5px}
#content .quest-bar>span{background:#6A2BE2}
#content .quest-bar>i{border-left:2px solid var(--ink)}
#content .quest-fraction-label{font-size:1.6rem;font-weight:800;color:var(--ink)}
#content .quest-math-chips,#content .quest-decimal,#content .quest-compare{color:var(--ink);font-size:1.5rem;font-weight:800}
#content .quest-counters b{width:38px;height:38px;font-size:16px;border:3px solid var(--ink)}
#content .counter-0{background:#00796B}
#content .counter-1{background:#C4006A}
#content .quest-place-labels,#content .quest-place-track{font-size:14px;font-weight:800;color:var(--ink)}
#content .quest-place-track b{border:3px solid var(--ink);background:#FFD23F}
#content .quest-compare-signs b{min-width:44px;font-size:1.3rem;border:3px solid var(--ink);color:var(--ink);background:#FFD23F}
#content .lab-value-key>b{width:32px;height:32px;background:#6A2BE2;font-size:17px}
#content .lab-value-key:nth-child(2)>b{background:#C4006A}
#content .lab-value-key:nth-child(3)>b{background:#00796B}
#content .lab-value-key small,#content .lab-machine-in small{font-size:14px;font-weight:700;color:var(--ink)}
#content .lab-bar{height:32px;border:3px solid var(--ink)}
#content .lab-bar>i{border-left:2px solid var(--ink)}
#content .lab-bar-row{grid-template-columns:26px minmax(60px,1fr) auto}
#content .lab-bar-row>b{font-size:18px}
#content .lab-machine-in{border:3px solid var(--ink);background:#E5DBFF}
#content .lab-machine-in b{font-size:24px;color:var(--ink)}
#content .lab-digit-train>b{min-width:30px;min-height:40px;font-size:22px;font-weight:800;border:3px solid var(--ink);color:var(--ink)}
#content .lab-digit-train .lab-cycle{background:#FFD23F;border-color:var(--ink)}
#content .lab-rem{border:3px solid #FF7A00}
#content .lab-equation,#content .lab-test-picture .lab-equation{font-family:var(--body);font-size:17px;font-weight:800;color:var(--ink);border:2px solid #FF7A00}
#content .lab-caption,#content .lab-test-picture .lab-caption{font-size:16px;font-weight:700}
#content .lab-build-note,#content .lab-test-picture .lab-build-note{font-size:15px;font-weight:700}
#content .lab-square-area{font-size:16px}
#content .lab-square-area>b{font-size:22px;color:#C4006A}
#content .lab-tools button,#content .lab-explore-button{min-height:40px;font-size:15px;font-weight:800}
#content .lab-trail{font-size:14px}
#content .review-stage,#content .ch4-stage{font-size:.9rem}
#content .review-caption{font-size:1rem;font-weight:700;color:var(--ink)}
#content .review-picture{min-height:0}
#content .lab-test-picture .lab-square{display:block}
@media(max-width:700px){#content .card,#content .ch4-card,#content .review-card,#content .test,#content .ch4-quiz,#content .review-quiz{padding:12px}#content .visual,#content .review-picture,#content .quest-picture{padding:8px}#content .quest-counters{display:flex}#content .quest-math-chips>span{display:block;margin-left:0}#content .quest-place-labels,#content .quest-place-track{font-size:12px}#content .lab-test-picture .lab-machine .lab-caption,#content .lab-test-picture .lab-machine>.lab-equation,#content .lab-test-picture .lab-square .lab-equation,#content .lab-test-picture .lab-compare>.lab-equation{display:block}#content .lab-test-picture .lab-machine-in,#content .lab-test-picture .lab-digit-train{display:flex;margin-right:0}#content .lab-test-picture .lab-machine-in small{font-size:13px}#content .lab-test-picture .lab-digit-train>b{min-width:26px;min-height:36px;font-size:19px}}
@media(max-width:820px){.math-hero,.chapters{grid-template-columns:minmax(0,1fr)}.math-art{order:-1}.chapter{padding:14px 10px}.lesson-panel{padding:10px 8px}}
@media(prefers-reduced-motion:reduce){button.lesson-toggle,.lesson-toggle .arrow{transition:none}}