/* Questions, original teaching diagrams, and optional practice. */
.home-questions{padding:65px 0 12px}.home-questions .section-heading{margin-bottom:28px}
.question-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.question-card{display:flex;flex-direction:column;position:relative;padding:27px;border:1px solid #3b6862;border-radius:8px;text-decoration:none;background:linear-gradient(135deg,#174247,#103238);transition:border-color .15s,background .15s}
.question-card:hover{border-color:var(--accent);background:#194b4c;color:var(--ink)}
.question-index{font:10px var(--mono);color:var(--accent);margin-bottom:22px}.question-card h3{font:500 25px/1.2 var(--serif);letter-spacing:-.6px;margin-bottom:14px}.question-card p{color:var(--muted);font-size:13px;line-height:1.7;margin-bottom:24px}.question-action{display:flex;justify-content:space-between;gap:15px;margin-top:auto;color:#9ce8d5;font-size:12px;font-weight:600}.question-action b{font-size:17px;line-height:1}
.lesson-visual{margin:35px 0;padding:28px;background:linear-gradient(135deg,#17464a,#10343c);border:1px solid #48786e;border-radius:8px;overflow:hidden}
.lesson-visual>.eyebrow,.lesson-challenge>.eyebrow{color:var(--accent);font-size:10px}
.lesson-visual h2{font-size:27px;line-height:1.2;letter-spacing:-.7px;margin:10px 0 26px;font-weight:600}
.lesson-visual figcaption{font-size:13px;color:#b9d3c9;line-height:1.75;margin-top:24px}
.visual-piece-rows{display:grid;gap:22px}.visual-row-label{display:block;font-size:12px;margin-bottom:10px;color:#bfdcd1}.visual-pieces{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.visual-pieces>span{padding:10px 15px;background:#0b2c31;border:1px solid #5b8a7e;border-radius:5px;font:15px var(--mono);color:#d9f5e9}.visual-result{font-size:13px;color:var(--accent);font-weight:500;margin-left:9px}
.visual-flow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));list-style:none;gap:16px;padding:0;margin:0;counter-reset:visual-step}.visual-flow li{counter-increment:visual-step;border:1px solid #48776e;border-radius:6px;padding:17px;background:#0c3036;min-width:0}.visual-flow li:before{content:counter(visual-step,decimal-leading-zero) ' →';display:block;font:10px var(--mono);color:var(--accent);margin-bottom:14px}.visual-flow li>span{display:block;font-size:11px;color:var(--muted);margin-bottom:6px}.visual-flow strong{font-weight:500;font-size:17px;line-height:1.4;display:block;overflow-wrap:anywhere}
.visual-lanes{display:grid;grid-template-columns:1fr 1fr;gap:20px}.visual-lanes>div{background:#0c3036;border:1px solid #416e65;padding:18px;border-radius:6px}.visual-lanes h3{font-size:15px;line-height:1.45;font-weight:600;margin-bottom:18px;color:#a7efd9}.visual-lanes ol{padding:0 0 0 18px;margin:0}.lesson .visual-lanes li{font-size:13px;margin:10px 0;color:#c5ded3}
.visual-blend{display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap}.visual-blend>div{padding:15px 13px;border:1px solid #47786a;border-radius:5px;background:#103238;flex:1;min-width:125px}.visual-blend span{font-size:11px;display:block;color:var(--muted);margin-bottom:8px}.visual-blend strong{font:14px var(--mono);color:#d6f1e4}.visual-blend>b{color:var(--accent);font-size:19px}.visual-blend>.visual-mixture{border-color:#69c1a5;background:#184f45}.visual-mixture span{color:#b4e9d6}
.visual-mask{overflow-x:auto}.visual-mask table{width:100%;border-collapse:separate;border-spacing:4px;text-align:center;font-size:12px}.visual-mask caption{font-size:12px;text-align:left;margin-bottom:12px;color:var(--muted)}.visual-mask th{font-weight:500;padding:9px 5px}.visual-mask td{padding:12px 5px;border-radius:3px}.visual-mask td.allowed{background:#357666;color:#effff6;border:1px solid #67a994}.visual-mask td.blocked{background:#102e34;color:#a7bfb9;border:1px dashed #5d7d78}
.visual-score-strip{display:flex;align-items:center;gap:16px;margin-bottom:22px;flex-wrap:wrap;font-size:12px;color:var(--muted)}.visual-score-strip strong{background:#0b2c31;padding:8px 15px;border:1px solid #416c62;border-radius:4px;color:var(--ink);font:15px var(--mono)}
.visual-bars{display:grid;gap:12px}.visual-bar{display:grid;grid-template-columns:58px 1fr 49px;align-items:center;gap:10px;font-size:12px}.visual-bar-track{background:#0a2d33;height:18px;border-radius:3px;overflow:hidden}.visual-bar-track i{display:block;height:100%;background:#5dd4b7}.visual-bar strong{font:11px var(--mono);font-weight:400;text-align:right;color:#d4eee2}.visual-temperature{display:grid;grid-template-columns:1fr 1fr;gap:25px}.visual-temperature h3{font-size:14px;color:#b9ecdb;font-weight:500;margin-bottom:20px}.visual-temperature .visual-bar{grid-template-columns:48px 1fr 43px;font-size:11px;gap:7px}
.sample-intervals{display:flex;overflow:hidden;border-radius:5px;border:1px solid #6ba48d;min-height:66px}.sample-intervals span{min-width:0;display:grid;place-content:center;font-size:12px;text-align:center;line-height:1.6;background:#194750;color:#d0eae9;flex:6}.sample-intervals span:nth-child(2){flex:3;background:#51b397;color:#062d25}.sample-intervals span:nth-child(3){flex:1;background:#6f494b;color:#ffefeb;min-width:0}.sample-scale{display:flex;justify-content:space-between;font:11px var(--mono);color:var(--muted);margin-top:8px}.lesson .visual-sampling p{display:grid;gap:5px;margin:22px 0 0;text-align:center}.visual-sampling p strong{color:#a7efd8;font-weight:500;font-size:18px}.visual-sampling p span{font-size:12px;color:var(--muted)}
.visual-loss{display:grid;grid-template-columns:1fr 1fr;gap:20px}.visual-loss>div{display:grid;gap:6px;padding:20px;border:1px solid #416e65;background:#103238;border-radius:6px;text-align:center}.visual-loss span{font-size:11px;color:var(--muted)}.visual-loss strong{font:500 30px var(--serif);color:#99e7d0}.visual-loss b{font:500 19px var(--mono);color:#e3efe3}
.budget-track{display:flex;border:1px solid #729888;border-radius:5px;overflow:hidden;min-height:58px}.budget-track span{display:grid;place-items:center;background:#236064;color:#edfaf3;font:17px var(--mono)}.budget-track span:nth-child(2){background:#43796c}.budget-track span:nth-child(3){background:#94d8b9;color:#103a2d}.visual-budget ul{list-style:none;display:grid;gap:7px;margin:18px 0 0;padding:0}.lesson .visual-budget li{font-size:12px;color:var(--muted)}.visual-budget li b{display:inline-block;min-width:22px;color:#bfead7}
.visual-calculation{margin-top:22px;background:#0b2c32;padding:14px 17px}.visual-calculation summary{font-size:13px;color:#9ae4cc}.lesson .visual-calculation p{font-size:13px;line-height:1.8}
.lesson-challenge{padding:28px;border:1px solid #4d8879;border-radius:8px;background:linear-gradient(125deg,#1b4949,#11353a);margin:35px 0 0}.lesson .lesson-challenge h2{font-size:28px;margin:10px 0 12px}.lesson .challenge-intro{font-size:14px;color:#bdd9cd;margin-bottom:24px}.lesson-challenge fieldset{border:0;margin:0;padding:0;min-width:0}.lesson-challenge legend{font-size:18px;line-height:1.55;font-weight:500;padding:0;margin-bottom:19px;float:left;width:100%}.challenge-options{display:grid;gap:10px;clear:both}.challenge-options label{display:block;position:relative;cursor:pointer}.challenge-options input{position:absolute;left:16px;top:20px;width:17px;height:17px;margin:0;accent-color:var(--accent)}.challenge-options label>span{display:flex;align-items:baseline;gap:12px;padding:16px 17px 16px 44px;border:1px solid #57867b;border-radius:5px;background:#0e3036;font-size:14px;line-height:1.6;min-height:56px}.challenge-options b{font:11px var(--mono);color:var(--muted)}.challenge-options input:checked+span{border-color:var(--accent);background:#1b5048}.challenge-options input:focus-visible+span{outline:3px solid var(--accent);outline-offset:3px}.challenge-options label[data-result=correct]>span{border-color:#94e3ba;background:#245b46}.challenge-options label[data-result=retry]>span{border-color:#e2b879;background:#493f2e}.challenge-actions{display:flex;align-items:center;flex-wrap:wrap;gap:20px;margin-top:20px}.challenge-actions .text-button{color:#a9e8d5;min-height:44px}.challenge-feedback:empty{display:none}.challenge-feedback{margin-top:20px;padding:18px;border-left:3px solid #9ee7bd;background:#143d36;border-radius:3px}.challenge-feedback[data-result=retry]{border-color:#e2b879;background:#393727}.challenge-feedback>strong{font-size:15px;font-weight:600}.lesson .challenge-feedback p{font-size:14px;line-height:1.75;margin:8px 0 0;color:#deebdf}.lesson .challenge-note{font-size:11px;margin:20px 0 0;color:#a9c6bb}
@media(max-width:1000px){.question-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.question-card h3{font-size:24px}}
@media(max-width:800px){.home-questions{padding-top:48px}.lesson-visual{padding:24px}.lesson-visual h2{font-size:26px}.visual-blend{gap:8px}}
@media(max-width:520px){.question-grid{grid-template-columns:1fr;gap:12px}.question-card{padding:23px}.question-index{margin-bottom:15px}.question-card h3{font-size:25px}.question-card p{margin-bottom:17px}.home-questions{padding-top:38px}.lesson-visual,.lesson-challenge{padding:20px}.lesson-visual h2,.lesson .lesson-challenge h2{font-size:24px}.visual-flow,.visual-lanes,.visual-temperature{grid-template-columns:1fr;gap:12px}.visual-flow li{padding:15px}.visual-flow li:before{margin-bottom:9px}.visual-flow strong{font-size:17px}.visual-piece-row{min-width:0}.visual-pieces{gap:7px}.visual-pieces>span{font-size:12px;padding:9px 11px}.visual-result{font-size:12px;margin-left:3px}.visual-blend{display:grid;grid-template-columns:1fr;text-align:center}.visual-blend>div{min-width:0}.visual-blend>b{line-height:1}.visual-mask table{font-size:10px;border-spacing:2px}.visual-mask th{padding:6px 2px}.visual-mask td{padding:11px 2px}.visual-loss{gap:10px}.visual-loss>div{padding:15px 8px}.visual-loss b{font-size:15px}.visual-temperature h3{margin:6px 0 15px}.visual-temperature>div+div{padding-top:16px;border-top:1px solid #3b665c}.visual-score-strip{gap:10px}.sample-intervals span{font-size:11px}.lesson-challenge legend{font-size:16px}.challenge-options label>span{font-size:13px;padding:15px 13px 15px 40px;gap:9px}.challenge-options input{left:14px;top:19px}.challenge-actions .button{width:100%}.lesson .challenge-feedback p{font-size:13px}}
@media(prefers-reduced-motion:reduce){.question-card{transition:none}}
@media print{.lesson-visual,.lesson-challenge{break-inside:avoid;background:none;border-color:#666}.lesson-visual figcaption{color:black}.challenge-actions,.challenge-note{display:none}.question-card{background:none}}
@media(max-width:380px){.lesson-header h1{font-size:34px;overflow-wrap:anywhere}}

/* Long words and narrow reading columns must not expand the surrounding page. */
.question-grid>*,.lesson-visual,.lesson-challenge,.visual-lanes>*,.visual-temperature>*,.visual-loss>*,.challenge-options label>span{min-width:0}
.question-card,.lesson-visual,.lesson-challenge{overflow-wrap:anywhere}
.visual-pieces>span{max-width:100%;overflow-wrap:anywhere}
.challenge-options label>span{align-items:flex-start}.challenge-options label>span>b{flex-shrink:0}
.visual-calculation summary{min-height:44px}
@media(forced-colors:active){
 .question-card,.lesson-visual,.lesson-challenge,.visual-flow li,.visual-lanes>div,.visual-loss>div,.visual-calculation{background:Canvas;color:CanvasText;border-color:CanvasText;box-shadow:none}
 .visual-pieces>span,.visual-score-strip strong,.visual-blend>div{background:Canvas;color:CanvasText;border-color:CanvasText}
 .visual-mask td.allowed{background:Canvas;color:CanvasText;border:2px solid CanvasText}
 .visual-mask td.blocked{background:Canvas;color:CanvasText;border:2px dashed CanvasText}
 .visual-bar-track{background:Canvas;border:1px solid CanvasText}.visual-bar-track i{forced-color-adjust:none;background:Highlight}
 .sample-intervals span,.budget-track span{background:Canvas;color:CanvasText;border:1px solid CanvasText}
 .sample-intervals span:nth-child(2),.budget-track span:nth-child(2){border-style:dashed}
 .sample-intervals span:nth-child(3),.budget-track span:nth-child(3){border-style:double}
 .challenge-options input:checked+span{border:3px solid Highlight;background:Canvas;color:CanvasText}
 .challenge-options label[data-result=correct]>span{border:3px double Highlight}
 .challenge-options label[data-result=retry]>span{border:3px dashed CanvasText}
 .challenge-options input:focus-visible+span{outline-color:Highlight}
 .challenge-feedback,.challenge-feedback[data-result=retry]{background:Canvas;color:CanvasText;border-color:CanvasText}
}

.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}