/* User-requested direction: the H06 year-5 activity family, on the site's white. */
:root{--paper:#fff;--ink:#232326;--red:#8b242d;--line:#232326;--muted:#56524f;--yellow:#ffe66c;--coral:#ff9197;--aqua:#75d9cf;--lilac:#bcabef;--sheet-green:#217346}
body{background:var(--paper);color:var(--ink)}
button{border:2px solid var(--ink);border-radius:7px;background:#fff;box-shadow:3px 3px 0 var(--ink);font-weight:600}
button:hover{background:#fff3b7;border-color:var(--ink)}
button:not(:disabled):active{transform:translate(3px,3px);box-shadow:none}
button:disabled{opacity:1;background:#eeeae2;color:#76716a;border-color:#aaa49a;box-shadow:2px 2px 0 #aaa49a}
button[aria-pressed=true]{color:#fff;background:var(--ink);box-shadow:4px 4px 0 var(--coral)}
.primary{background:var(--coral);color:var(--ink);border-color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.primary:hover{background:#ffadb2}
.topbar{border-bottom:2px solid var(--ink)}.topbar button{background:var(--aqua)}
.brand{letter-spacing:-.05em}.course,.eyebrow,.screen-index{font-family:monospace;font-weight:700}
.masthead>p{background:#fff;border:2px solid var(--ink);border-radius:10px 10px 0 10px;box-shadow:3px 3px 0 var(--ink);padding:10px 16px;transform:rotate(2deg);color:var(--ink)}
.masthead h1{font-weight:700;letter-spacing:-.045em;line-height:1.25}
.title-sticker{display:inline-block;background:var(--yellow);border:2px solid var(--ink);padding:0 10px;box-shadow:4px 4px 0 var(--ink);transform:rotate(-2deg);margin:3px 4px 4px}
.process{border-bottom:0;gap:8px;padding:10px 0 16px;font-size:.68em}
.process li{padding:4px 9px;border:1.5px solid var(--ink);border-radius:20px;background:#fff;color:var(--ink)}
.process li:not(:last-child)::after{content:none}
.process .done{background:#d8f2ec}.process .current{background:var(--yellow);color:var(--ink);box-shadow:2px 2px 0 var(--ink)}
main{border:2px solid var(--ink);border-radius:14px;box-shadow:6px 6px 0 var(--ink);background:#fff;padding:24px;margin-bottom:18px}
.screen-index{display:table;background:var(--coral);color:var(--ink);padding:5px 10px;border:2px solid var(--ink);border-radius:20px;font-size:.66em;margin-bottom:14px}
h2{font-weight:700;letter-spacing:-.035em}h3{font-weight:600}
.question-band{border:2px solid var(--ink);border-left:8px solid var(--ink);border-radius:5px;padding:12px 18px;background:#fff7ce;font-weight:500}
.questions{gap:14px;padding:3px 5px 6px 0}.questions button{background:#fffdf8;padding:14px 18px}
.questions button:nth-child(3n+2){background:#def4f0}.questions button:nth-child(3n+3){background:#eee7fc}
.questions button[aria-pressed=true]{background:var(--yellow);color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.questions small{font-weight:400}
.choices{gap:14px;padding-bottom:4px}
.choices button:nth-child(4n+1){background:var(--yellow)}.choices button:nth-child(4n+2){background:var(--aqua)}.choices button:nth-child(4n+3){background:var(--lilac)}.choices button:nth-child(4n+4){background:#ffc38a}
.choices button[aria-pressed=true]{color:#fff;background:var(--ink);box-shadow:4px 4px 0 var(--coral)}
input,select,textarea{border:2px solid var(--ink);border-radius:6px;box-shadow:2px 2px 0 #232326;background:#fff}
input[type=checkbox]{box-shadow:none;accent-color:var(--ink)}
.feedback{border:2px solid var(--ink);border-left:7px solid var(--ink);border-radius:7px;background:#fff3bf;box-shadow:3px 3px 0 var(--ink);color:var(--ink)}
.feedback[data-ok=true]{border-color:var(--ink);background:#d9f3eb}
.teacher{border-top:2px solid var(--ink);margin-top:0}.teacher strong{color:var(--ink)}.navigation{border-top:0}
.claim{border-bottom:2px solid var(--ink);padding:18px 0}.claim:first-of-type{padding-top:0}
.summary section{border-top:2px solid var(--ink)}.summary h3{color:var(--ink)}
.note{border:2px solid var(--ink);border-radius:7px;background:var(--yellow);padding:16px 20px;box-shadow:3px 3px 0 var(--ink)}
details{border-bottom:1px solid #23232645}summary{font-weight:600}
.filter-area{border-top:2px solid var(--ink)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* The worksheet itself follows familiar spreadsheet conventions. */
.sheet{border:1px solid #8d9591;border-radius:4px;background:#fff;color:#202421;overflow:hidden;min-width:0;font-size:.78em;box-shadow:3px 3px 0 #d3d8d5}
.sheet-titlebar{background:var(--sheet-green);color:#fff;display:flex;align-items:center;gap:10px;padding:9px 12px;font-size:1em}
.sheet-titlebar>span:last-child{margin-left:auto;font-size:.82em;white-space:nowrap}.sheet-app-mark{font-size:1.2em}
.sheet-ribbon{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:8px 12px;background:#f3f5f4;border-bottom:1px solid #cbd1ce;font-size:.85em}
.sheet-ribbon>span:first-child{font-weight:600}.sheet-ribbon>span:last-child{color:#4d5952}
.formula-bar{display:flex;min-height:42px;align-items:stretch;border-bottom:1px solid #bfc8c2;background:#fff;font-size:.9em}
.cell-address{min-width:64px;text-align:center;font-weight:600;padding:8px;border-right:1px solid #cbd1ce;white-space:nowrap}
.fx{padding:8px 12px;font-style:italic;color:#637169}.cell-content{padding:8px 12px 8px 0;align-self:center;overflow-wrap:anywhere}
.sheet-grid-scroll{overflow-x:auto}
.sheet .data-table{width:100%;font-size:1em;border-collapse:collapse;table-layout:fixed;min-width:380px}
.sheet .data-table thead{font-size:1em}
.sheet .data-table th,.sheet .data-table td{border:1px solid #d4d9d6;padding:0;text-align:left;vertical-align:middle}
.sheet .data-table tr>*:first-child{width:34px;background:#f0f2f1;text-align:center;font-weight:400;font-size:.9em}
.sheet .column-letters th{background:#eef1ef;text-align:center;font-weight:400;padding:5px}
.sheet .column-letters th:nth-child(2){width:24%}.sheet .column-letters th:nth-child(3){width:30%}
.sheet .sheet-field-names th{padding:9px 8px;background:#edf3ef;font-weight:600;font-size:.88em;line-height:1.3}
.sheet-cell{display:block;width:100%;min-height:48px;border:0!important;border-radius:0;box-shadow:none!important;padding:9px 8px;background:#fff!important;font-size:1em;font-weight:400;text-align:left;transform:none!important;color:#202421!important;line-height:1.25}
.sheet td:nth-child(3) .sheet-cell{text-align:right;font-variant-numeric:tabular-nums}
.sheet td:last-child .sheet-cell{font-size:.85em}
.sheet-cell:hover{background:#f0f7f2!important}.sheet-cell.cell-selected{outline:2px solid var(--sheet-green);outline-offset:-2px;background:#f3faf5!important;position:relative;z-index:1}
.sheet-cell.cell-selected:after{content:'';position:absolute;width:5px;height:5px;right:0;bottom:0;background:var(--sheet-green)}
.sheet-bottom{display:flex;align-items:center;gap:14px;background:#f4f6f5;border-top:1px solid #cbd1ce;min-height:35px;padding:0 10px;font-size:.8em}
.sheet-bottom>span:last-child{color:#5c675f;margin-left:auto}.sheet-tab{color:var(--sheet-green);background:#fff;font-weight:600;padding:8px 10px;border-bottom:3px solid var(--sheet-green)}
.sheet-chart-grid{padding:22px;background-color:#fff;background-image:linear-gradient(#e8ece9 1px,transparent 1px),linear-gradient(90deg,#e8ece9 1px,transparent 1px);background-size:64px 28px}
.sheet-chart-object{background:#fff;border:1px solid #a4b0a8;margin:0;padding:14px 8px 4px;position:relative}
.sheet-chart-object:before,.sheet-chart-object:after{content:'';position:absolute;width:6px;height:6px;background:#fff;border:1px solid #7d8e81;top:-4px}.sheet-chart-object:before{left:-4px}.sheet-chart-object:after{right:-4px}
.sheet-chart-object figcaption{font-weight:600;text-align:center;font-size:1.1em;margin:0 8px 6px}
.sheet .graph{color:#202421}.sheet .graph .bar{fill:#4472c4}.sheet .graph .accent{fill:#4472c4}.sheet .graph .grid{stroke:#d8dce1}.sheet .graph .axis{stroke:#9ba4ad;stroke-width:1}
.chart-block{border-bottom:0}.sheet-chart .cell-content{font-size:.85em}
@media(min-width:851px){main{padding:22px!important;margin-bottom:16px}.app{padding-bottom:12px}.split{gap:28px;grid-template-columns:minmax(380px,.9fr) minmax(0,1.1fr)}#screen:has(#chartWork) .split{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}.sheet .graph text{font-size:25px}.teacher{padding:10px 0}.masthead{padding-bottom:8px}}
@media(min-width:851px){
  /* Let the chart be the focus after it is created on the board. */
  .app:has(#chartWork:not([hidden])) .masthead{display:none}
  .sheet-chart .sheet-ribbon{display:none}.sheet-chart .formula-bar{min-height:32px}
  .sheet-chart .formula-bar>*{padding-block:5px}.sheet-chart-grid{padding:10px}
  .sheet-chart .graph{height:clamp(190px,calc(100svh - 530px),330px);max-height:none}
}
@media(max-height:800px) and (min-width:851px){.masthead h1{font-size:34px}.process{padding-top:7px;padding-bottom:12px}.screen-index{margin-bottom:10px}.sheet-ribbon{font-size:.78em}.sheet-titlebar{padding-block:7px}.sheet-chart-grid{padding:14px}h2{margin-bottom:16px}}
@media(max-width:850px){main{padding:20px 16px;margin-bottom:24px}.process{gap:6px;font-size:12px}.process li{padding:4px 7px}.split{gap:26px}.sheet{font-size:.85em}.sheet-ribbon{flex-wrap:wrap}.sheet-chart-grid{padding:14px}.teacher{align-items:flex-start}.navigation{padding-bottom:8px}.title-sticker{box-shadow:3px 3px 0 var(--ink)}}
@media print{main,.sheet{box-shadow:none}main{border:0}.title-sticker{box-shadow:none;transform:none}.sheet-cell{min-height:25px}button{box-shadow:none}}

/* Novice learner support: one action, a visible model, then a short attempt. */
.access-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.access-tools button{font-size:14px;padding:8px 12px}
.access-tools #motion{background:#fff;color:var(--ink)}.access-tools #listen{background:#def4f0}
#voiceStatus{margin:5px 0;flex-shrink:0;max-width:100%;font-size:14px}
.teaching{border-left:5px solid var(--ink);background:#fff8d9;padding:14px 18px;margin:0 0 18px;border-radius:3px}
.teaching h3{margin:2px 0 8px}.teaching p{margin:8px 0}.teaching button{margin:8px 0 4px}
.mode-label{font-size:.74em;font-family:monospace;letter-spacing:.035em;font-weight:700;color:var(--red);margin:12px 0 8px}
.method-models{display:grid;grid-template-columns:1fr 1fr;gap:20px}.method-models .teaching{margin:0 0 20px}
.graph-lessons{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.graph-lessons section{padding:12px 18px;border:2px solid var(--ink);border-radius:8px;background:#fffdf6}.graph-lessons h3{margin:4px 0}.graph-lessons p{font-size:.9em;margin:8px 0}
.graph-example{display:block;height:100px;width:100%;fill:#a7c5ee;stroke:var(--ink);stroke-width:3}.graph-example path{fill:none}.graph-example .pie-piece{fill:var(--coral)}
.substeps{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px;font-size:.8em}.substeps span{border-bottom:3px solid #ddd;padding:7px 12px}.substeps [aria-current]{border-color:var(--ink);background:var(--yellow);font-weight:600}
.sheet-cell.lesson-mark{background:var(--yellow)!important;outline:3px solid #826b00;outline-offset:-3px}
.sheet-cell.range-selected{background:#d9eee0!important;box-shadow:inset 0 0 0 1px #217346!important}
.sheet-heading{font-weight:600;font-size:inherit!important;background:#edf3ef!important}
.sheet .sheet-field-names th:has(.sheet-heading){padding:0}
.calculation-result{padding:14px;background:#e0f1e6;border-top:2px solid #217346;overflow-wrap:anywhere}.calculation-result p{margin:8px 0 0}
.mapping{border-left:5px solid #4472c4;padding:10px 15px;background:#eef4ff;min-height:58px}
.trace-mark{stroke:#131b2b;stroke-width:5;fill:#f5bd45!important}
.trace-record text{fill:var(--red);font-weight:700}
.evidence-strip{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0;font-size:.85em}.evidence-strip span{padding:8px 12px;border:1px solid #777;border-radius:5px}.evidence-strip .evidence-focus{background:var(--yellow);border:2px solid var(--ink);font-weight:600}
.code-picker button{min-width:65px}.code-picker+input[readonly]{background:#f6f6f6;width:100%;font-size:.9em}
[data-motion=on] .lesson-mark{animation:lesson-focus .45s ease-out}
[data-motion=on] .chart-reveal .bar{transform-box:fill-box;transform-origin:bottom;animation:bar-build .65s ease-out}
[data-motion=on] .trace-mark{animation:lesson-focus .45s ease-out}
@keyframes lesson-focus{from{filter:brightness(.8)}to{filter:brightness(1)}}
@keyframes bar-build{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media(min-width:851px){.app:has(#screen .sheet) .masthead{display:none}.app:has(.method-models) .masthead,.app:has(.graph-lessons) .masthead{display:none}.sheet .sheet-heading{font-size:.9em!important}}
@media(min-width:851px){
  body:not([data-screen="1"]) .masthead{display:none}
  body:not([data-screen="1"]) main{padding:18px!important}
  body:not([data-screen="1"]) .screen-index{float:right;margin:0 0 10px 18px;font-size:11px}
  body:not([data-screen="1"]) h2{padding-right:210px;margin-bottom:16px}
  .sheet:not(.sheet-chart) .sheet-ribbon{display:none}
  .sheet:not(.sheet-chart) .formula-bar{min-height:34px}
  .sheet:not(.sheet-chart) .formula-bar>*{padding-block:5px}
  .sheet .column-letters th{padding-block:3px}
  body[data-screen="4"] .question-band{font-size:.8em;padding-block:7px;margin-bottom:12px}
}
@media(max-width:1100px){.course{display:none}.topbar .brand span{display:none}}
@media(max-width:850px){.access-tools{gap:8px}.access-tools button{font-size:12px;padding:7px 9px}.topbar{flex-wrap:wrap}.graph-lessons,.method-models{grid-template-columns:1fr}.graph-example{height:115px}.teaching{padding:12px 14px}}
@media(prefers-reduced-motion:reduce){[data-motion] .lesson-mark,[data-motion] .chart-reveal .bar,[data-motion] .trace-mark{animation:none}}
[data-motion=off] *,[data-motion=off] *::before,[data-motion=off] *::after{animation:none!important;transition:none!important}