.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.math-page { max-width:1500px; padding:0 1.5rem 1rem; color:#092252; }
.math-heading { display:flex; justify-content:space-between; align-items:stretch; gap:2rem; height:140px; margin-bottom:1rem; }
.math-heading > div { display:flex; flex-direction:column; justify-content:center; }
.math-heading h1 { margin:0; font-size:clamp(2rem,3vw,2.65rem); line-height:1.05; }
.math-heading > div > p { font-size:1.2rem; }
.math-modes { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; width:min(650px,55%); }
.math-modes a { min-height:110px; height:100%; padding:1rem; display:grid; place-content:center; text-align:center; border:1px solid #bddcf2; border-radius:20px; background:#ffffffb5; color:#0759be; text-decoration:none; }
.math-modes a[aria-current] { color:white; border-color:#0878f9; background:#0878f9; }
.math-modes strong, .math-modes span { display:block; }
.math-modes strong { font-size:1.45rem; }
.math-modes span { margin-top:.25rem; }
.math-layout { display:grid; grid-template-columns:minmax(170px,240px) minmax(500px,1fr) minmax(150px,190px); gap:1rem; padding:1rem; border:1px solid #d4eefa; border-radius:24px; background:#edfaff; }
.math-guide { display:flex; flex-direction:column; align-items:center; text-align:center; color:#0759be; }
.math-guide p { padding:1rem; border:2px solid #74b1fa; border-radius:24px; background:white; }
.math-guide img { width:min(180px,90%); height:220px; object-fit:contain; object-position:bottom; }
.math-guide h2 { margin-top:1rem; }
.operation-picker { width:100%; display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.operation-picker button { font-size:1.8rem; color:#0759be; border-color:#bddcf2; }
.operation-picker button[aria-pressed=true] { color:white; background:#0878f9; border-color:#0878f9; }
.concept-card { min-width:0; padding:1.5rem; border:1px solid #d4eefa; border-radius:22px; background:#fff; text-align:center; }
.concept-card > h2 { font-size:1.5rem; }
.object-model { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:.8rem; min-height:190px; margin:1rem 0; padding:1rem; border-radius:18px; background:#f7fbff; }
.math-object { width:82px; height:82px; padding:4px; object-fit:contain; border:3px solid transparent; border-radius:18px; background:white; }
.math-object.added { border-color:#20a9bd; background:#effcff; }
.equal-group{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;min-width:110px;min-height:110px;max-width:100%;padding:12px;border:2px solid #9dcce9;border-radius:16px;background:#f8fcff}.equal-group strong{flex-basis:100%;font-size:16px}.active-group{border-color:#188da0;background:#e5f8f7}.equal-group .math-object{width:58px;height:58px}.sharing-pool{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;width:100%;min-height:64px;border-bottom:1px dashed #9dcce9;padding-bottom:10px}.sharing-pool .math-object{width:52px;height:52px}.active-group .math-object,.shared-cookie{animation:group-arrival .4s both}.demonstration-result{background:#e5f8f7;border-radius:12px;outline:2px solid #188da0}@keyframes group-arrival{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}.reduce-motion .active-group .math-object,.reduce-motion .shared-cookie{animation:none}
.take-away{display:inline-flex;position:relative}.take-away .math-object{transition:opacity .4s}.take-away.removed .math-object{opacity:.25}.take-away.removed::after{content:"";position:absolute;inset:12%;background:linear-gradient(45deg,transparent 47%,#a43d31 48%,#a43d31 52%,transparent 53%),linear-gradient(-45deg,transparent 47%,#a43d31 48%,#a43d31 52%,transparent 53%);pointer-events:none}.reduce-motion .take-away .math-object{transition:none}
.equation { display:flex; align-items:center; justify-content:center; gap:.5em; font-size:clamp(2rem,5vw,4rem); font-weight:800; letter-spacing:.08em; }
.equation input[type=number] { width:2.2em; min-height:1.35em; margin:0; padding:.05em .1em; border:2px solid #0878f9; border-radius:12px; color:#092d67; background:#f7fbff; font:inherit; letter-spacing:0; text-align:center; }
.concept-controls { display:flex; justify-content:center; flex-wrap:wrap; gap:.6rem; margin:1rem 0; }
.number-model { display:flex; justify-content:center; align-items:center; gap:1rem; padding:1rem; border-top:1px solid #d4eefa; }
.number-model span { min-width:80px; padding:.6rem; border-radius:14px; background:#eaf6ff; font-size:1.6rem; font-weight:800; }
.number-model small { display:block; font-size:.7rem; font-weight:500; }
.concept-caption { color:#0759be; font-size:1.15rem; font-weight:650; }
.math-actions { display:flex; flex-direction:column; gap:.7rem; }
.math-actions button, .math-actions a { min-height:130px; padding:.8rem; display:grid; place-content:center; text-align:center; border:1px solid #bddcf2; border-radius:18px; background:white; color:#0759be; text-decoration:none; }
.math-actions img { width:42px; height:42px; margin:auto; filter:invert(28%) sepia(94%) saturate(2842%) hue-rotate(207deg) brightness(88%) contrast(101%); }
.math-actions strong, .math-actions span { display:block; }
.math-actions strong { font-size:1.2rem; }
.math-actions span { font-size:.78rem; font-weight:400; }
.cafeteria { min-height:300px; padding:1.5rem; display:grid; place-content:center; border-radius:20px; background:linear-gradient(#e8f7ff 0 54%,#d6ecf8 54% 58%,#dfb879 58% 78%,#c08b4f 78%); overflow:hidden; }
.people { display:grid; grid-template-columns:repeat(6,minmax(72px,1fr)); gap:.65rem; align-items:end; }
.place-setting { min-width:0; display:grid; justify-items:center; gap:.25rem; padding:.5rem .2rem; border-radius:14px; background:#ffffffbf; }
.student { width:min(82px,100%); fill:#efb47e; stroke:#123c67; stroke-width:3; stroke-linecap:round; }
.student .shirt { fill:#2f78b7; }
.sample-cup { width:38px; fill:#eaf6ff; stroke:#0878f9; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.sample-cup.missing { fill:none; stroke:#b85c19; stroke-dasharray:4 4; }
.place-setting span { font-size:.72rem; font-weight:700; color:#0759be; }
.place-setting:has(.missing) span { color:#95440f; }
.situation-copy { font-size:1.2rem; }
.answer-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; }
.answer-grid button { min-height:80px; color:#092252; border-color:#bddcf2; font-size:1.1rem; }
.answer-grid button.correct { color:white; background:#0878f9; }
.bridge { margin-top:1rem; padding:1rem; border-radius:18px; background:#eaf6ff; }
.bridge strong, .bridge > span { display:block; font-size:1.5rem; }
.need-slots { display:flex; justify-content:center; gap:.5rem; margin-bottom:.7rem; }
.need-slots span { width:42px; height:42px; display:grid; place-items:center; border:2px solid #0878f9; border-radius:8px; background:white; }
.need-slots .missing { border-style:dashed; color:#b55218; }
.math-finished { padding:2rem; border:1px solid #d4eefa; border-radius:24px; background:white; text-align:center; }
.math-finished[hidden] { display:none; }
.math-finished a, .math-finished button { margin:.5rem; }
@media(max-width:900px) { .math-heading { display:block; height:auto; min-height:0; } .math-modes { width:100%; margin-top:1rem; } .math-layout { grid-template-columns:150px minmax(0,1fr); } .math-actions { grid-column:1/-1; flex-direction:row; } .math-actions > * { flex:1; min-height:95px; } }
@media(max-width:650px) { .math-page { padding:.5rem; } .math-layout { display:flex; flex-direction:column; padding:.6rem; } .math-guide { display:grid; grid-template-columns:1fr 90px; gap:.5rem; } .math-guide p { margin:0; } .math-guide img { width:90px; height:120px; } .math-guide h2, .operation-picker { grid-column:1/-1; } .concept-card { padding:1rem; } .math-object { width:58px; height:58px; font-size:2rem; } .people { grid-template-columns:repeat(3,1fr); } .answer-grid { grid-template-columns:1fr; } .math-actions > * { min-width:0; } .math-actions span { display:none; } }
@media(prefers-reduced-motion:reduce) { * { transition:none!important; } }

.concept-controls img { width:64px; height:64px; object-fit:contain; display:block; }
.challenge-progress { color:#0759be; font-weight:650; }
.task-scene { min-height:220px; display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; justify-content:center; padding:1.25rem; border-radius:20px; background:#e8f7ff; }
.task-object { display:inline-grid; place-items:center; width:64px; height:72px; font-size:2.5rem; border:2px solid #bddcf2; border-radius:12px; background:white; }
.task-object.missing { border:2px dashed #95440f; opacity:.45; }
.task-group { padding:.7rem; border:2px solid #74b1fa; border-radius:16px; background:white; }
.task-group .task-object { width:48px; height:54px; font-size:1.8rem; }
.task-group p { margin:.3rem 0; }
.taken-away { border-style:dashed; border-color:#95440f; }
.taken-away .task-object { opacity:.5; }
.topic-operations { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.5rem; margin:.75rem 0 1rem; }
.topic-operations button { min-height:48px; padding:.5rem; font:inherit; }
.topic-operations button[aria-pressed=true] { background:#0878f9; color:white; }
@media(max-width:650px) { .topic-operations { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.time-card { display:grid; gap:.5rem; padding:1rem; border-radius:16px; background:white; color:#0759be; }
.time-card strong { font-size:2.5rem; }
.math-layout[hidden], .concept-card[hidden] { display:none; }
.answer-grid button:disabled { opacity:1; cursor:default; }
button:focus-visible, select:focus-visible { outline:3px solid #95440f; outline-offset:3px; }
.topic-explore select { max-width:100%; min-height:48px; padding:.5rem; border-radius:8px; border:1px solid #74b1fa; font:inherit; background:white; color:#092252; }
@media(max-width:650px) { .task-object { width:48px; height:56px; font-size:2rem; } }

.topic-picker { width:100%; margin-top:1rem; text-align:left; }
.topic-picker label { display:block; margin-bottom:.5rem; color:#0759be; font-weight:700; }
.topic-picker select { width:100%; min-height:50px; padding:.65rem .4rem; border:1px solid #74b1fa; border-radius:10px; background:white; color:#092252; font:inherit; }
@media(max-width:650px) { .topic-picker { grid-column:1/-1; } }

.concept-controls .quantity-control { width:64px; min-height:64px; display:inline-flex; align-items:center; justify-content:center; padding:.5rem; border:1px solid #74b1fa; border-radius:12px; background:white; color:#0759be; text-decoration:none; }
.quantity-control span { font-size:1.8rem; font-weight:700; }

.equation input[type=number] { appearance:auto; -moz-appearance:auto; width:2.6em; }
.equation input[type=number]::-webkit-inner-spin-button, .equation input[type=number]::-webkit-outer-spin-button { opacity:1; -webkit-appearance:auto; margin:0; }
@media(max-width:650px) { .equation { gap:.25em; font-size:clamp(1.5rem,7vw,2.5rem); } }

/* Math shares Living Skills' visual language; its quantity models and controllers stay intact. */
.math-area { --math-blue:#0562e9; --math-line:#bfddf6; font-family:EveryWayNunito,system-ui,sans-serif; font-weight:600; color:#103363; background:#f3f9fd; -webkit-font-smoothing:antialiased; }
.math-area a { color:var(--math-blue); }
.math-area button, .math-area input, .math-area select { color:inherit; font-family:inherit; border-color:var(--math-line); }
.math-area :focus-visible { outline:3px solid #76590b; outline-offset:4px; }
.math-skip { position:absolute; top:-80px; left:12px; z-index:20; padding:12px; background:white; border-radius:8px; }
.math-skip:focus { top:10px; }
.math-area .site-header { max-width:none; height:77px; padding:4px 34px; border-bottom:1px solid var(--math-line); flex-wrap:nowrap; }
.math-area .wordmark { width:90px; flex-basis:90px; }
.math-area .wordmark img { height:68px; object-fit:contain; }
.math-area .brand-slogan { display:none; }
.math-area .utility-nav { margin-left:auto; }
.math-area .page-breadcrumbs { max-width:none; padding:16px 28px 4px; margin:0 12.25% 0 19.5%; min-height:40px; }
.math-area .math-page { max-width:none; padding:0; }
.math-area .math-heading { height:auto; min-height:86px; margin:0 12.25% 0 19.5%; padding:8px 28px 24px; align-items:center; gap:20px; }
.math-area .math-heading > div { min-width:0; }
.math-area .math-heading h1 { font-size:clamp(26px,2.3vw,38px); line-height:1.15; font-weight:900; letter-spacing:0; }
.math-area .math-heading > div > p { font-size:17px; margin:7px 0 0; }
.math-area .math-modes { display:flex; width:330px; flex-shrink:0; gap:0; min-height:48px; border:1.5px solid var(--math-line); border-radius:26px; overflow:hidden; }
.math-area .math-modes a { display:flex; justify-content:center; align-items:center; height:auto; min-height:48px; padding:6px 20px; flex:1; border:0; border-radius:26px; background:transparent; white-space:nowrap; }
.math-area .math-modes a[aria-current] { background:#0057e7; color:white; }
.math-area .math-modes strong { font-size:17px; font-weight:850; }
.math-area .math-modes span { display:none; }
.math-area .math-layout { grid-template-columns:minmax(190px,19.5%) minmax(0,1fr) minmax(140px,12.25%); gap:0; padding:0; border:0; border-radius:0; background:transparent; min-height:calc(100vh - 220px); }
.math-area .math-guide { border-right:1px solid #d6eafa; padding:0 21px 28px; gap:16px; color:#103363; }
.math-area .math-guide p { position:relative; width:100%; margin:0; padding:14px 16px; min-height:58px; border:1.5px solid #74aaff; border-radius:20px; background:white; font-size:17px; font-weight:850; line-height:1.3; cursor:url('/icons/volume-2.svg') 12 12,pointer; }
.math-area .math-guide p::after { content:''; position:absolute; bottom:-7px; left:calc(50% - 6px); width:12px; height:12px; background:white; border-right:1px solid #74aaff; border-bottom:1px solid #74aaff; transform:rotate(45deg); }
.math-area .math-guide img { width:150px; height:195px; object-fit:contain; }
.math-area .math-guide h2 { margin:0; font-size:18px; }
.math-area .operation-picker button { min-height:54px; border-radius:14px; background:#eaf6ff; font-weight:850; }
.math-area .operation-picker button[aria-pressed=true], .math-area .topic-operations button[aria-pressed=true] { background:var(--math-blue); color:white; }
.math-area .topic-picker { margin:0; }
.math-area .topic-picker label { font-size:15px; color:#103363; }
.math-area .topic-picker select { background:#f8fcff; border-radius:14px; font-size:16px; }
.math-area .concept-card { margin:0 28px 28px; padding:24px; border:1px solid var(--math-line); border-radius:20px; background:white; align-self:start; }
.math-area .concept-card > h2 { font-size:24px; font-weight:900; margin-bottom:8px; }
.math-area .object-model, .math-area .task-scene { border:1px solid var(--math-line); background:#eaf6ff; border-radius:20px; }
.math-area .concept-caption, .math-area #feedback { color:#103363; font-size:19px; font-weight:850; }
.math-area .answer-grid button { border-radius:15px; background:#e9f5ff; font-size:20px; font-weight:850; min-height:74px; }
.math-area .answer-grid button.correct { background:var(--math-blue); color:white; }
.math-area .topic-operations button { border-radius:14px; background:#f8fcff; font-weight:800; }
.math-area .equation input[type=number] { min-height:48px; border-color:var(--math-blue); background:#f8fcff; }
.math-area .math-actions { border-left:1px solid #d6eafa; padding:0 22px 28px; gap:0; }
.math-area .math-actions button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; min-height:150px; padding:20px 0; border:0; border-bottom:1px solid var(--math-line); border-radius:0; background:transparent; }
.math-area .math-actions button:last-child { border-bottom:0; }
.math-area .math-actions .support-icon { display:flex; align-items:center; justify-content:center; width:76px; height:76px; border:1px solid var(--math-line); border-radius:50%; background:#e7f4ff; }
.math-area .math-actions img { width:36px; height:36px; filter:invert(28%) sepia(99%) saturate(3234%) hue-rotate(211deg) brightness(94%) contrast(113%); }
.math-area .math-actions #show-me .support-icon { background:#1978f5; border:2px solid white; box-shadow:0 0 0 4px #bbd8ff; }
.math-area .math-actions #show-me img { filter:invert(1); }
.math-area .math-actions strong { font-size:23px; font-weight:900; line-height:1.2; }
.math-area .math-actions span { display:none; }
.math-area .math-finished { max-width:700px; margin:24px auto; }
.math-area footer { margin:0; padding:20px; font-size:14px; color:#365b7e; }
.math-area .catalog { padding:32px; }
.math-area .catalog h1 { font-weight:900; }
.math-area .catalog .intro { color:#103363; font-size:20px; }
.math-area .area-card { max-width:440px; border-radius:20px; box-shadow:0 3px 14px #194b6910; }
.math-area .area-card h2 { font-size:24px; font-weight:900; }
.math-area .area-card > div { padding:20px; }
.math-area .card-action { font-weight:850; }
@media(max-width:1199px) {
  .math-area .math-heading { flex-wrap:wrap; gap:16px; }
  .math-area .math-modes { width:320px; }
  .math-area .concept-card { margin:0 18px 24px; padding:18px; }
  .math-area .math-actions { padding:0 12px; }
  .math-area .math-actions strong { font-size:20px; }
  .math-area .number-model { gap:.5rem; padding:.75rem 0; flex-wrap:wrap; }
}
@media(max-width:900px) {
  .math-area .math-layout { grid-template-columns:150px minmax(0,1fr); }
  .math-area .page-breadcrumbs, .math-area .math-heading { margin-left:150px; margin-right:0; padding-left:18px; padding-right:18px; }
  .math-area .math-heading { display:flex; }
  .math-area .math-guide { padding:0 12px 24px; }
  .math-area .math-guide img { width:120px; height:156px; }
  .math-area .math-guide p { padding:12px 10px; font-size:15px; }
  .math-area .math-actions { grid-column:2; border-left:0; border-top:1px solid var(--math-line); flex-direction:row; padding:12px; gap:8px; }
  .math-area .math-actions button { min-height:90px; flex:1; padding:6px; border-bottom:0; }
  .math-area .math-actions .support-icon { width:48px; height:48px; }
  .math-area .math-actions img { width:25px; height:25px; }
  .math-area .math-actions strong { font-size:17px; }
}
@media(max-width:650px) {
  .math-area .site-header { padding:4px 12px; gap:8px; }
  .math-area .wordmark { width:68px; flex-basis:68px; }
  .math-area .page-breadcrumbs, .math-area .math-heading { margin:0; padding-left:16px; padding-right:16px; }
  .math-area .math-heading { padding-bottom:20px; }
  .math-area .math-heading h1 { font-size:28px; }
  .math-area .math-heading > div > p { font-size:16px; }
  .math-area .math-modes { width:100%; margin:0; }
  .math-area .math-layout { padding:0; gap:16px; }
  .math-area .math-guide { display:grid; grid-template-columns:minmax(0,1fr) 90px; padding:0 16px 16px; border-right:0; border-bottom:1px solid var(--math-line); gap:12px; }
  .math-area .math-guide img { width:90px; height:117px; }
  .math-area .math-guide p { font-size:16px; }
  .math-area .concept-card { margin:0 12px; padding:16px 12px; }
  .math-area .concept-card > h2 { font-size:22px; }
  .math-area .math-actions { grid-column:auto; }
  .math-area .math-actions strong { font-size:16px; }
  .math-area .answer-grid { grid-template-columns:1fr; gap:10px; }
  .math-area .answer-grid button { min-height:56px; }
  .math-area .math-finished { margin:16px 12px; }
  .math-area .catalog { padding:24px 16px; }
}

/* Desktop lesson header and workspace share the Living Skills column rhythm. */
@media(min-width:1200px) {
  .math-area .page-breadcrumbs { position:absolute; top:93px; left:0; right:0; padding:0 28px; }
  .math-area .math-page { display:grid; grid-template-columns:minmax(210px,19.5%) minmax(0,1fr) minmax(144px,12.25%); grid-template-rows:auto 1fr; min-height:calc(100vh - 77px); }
  .math-area .math-heading { grid-column:2; margin:0; padding:52px 28px 20px; }
  .math-area .math-layout:not([hidden]) { display:contents; }
  .math-area .math-guide { grid-column:1; grid-row:1 / span 2; padding:32px 21px; gap:24px; }
  .math-area .math-guide p { font-size:19px; }
  .math-area .math-guide img { width:76%; height:240px; }
  .math-area .concept-card { grid-column:2; grid-row:2; padding:24px; }
  .math-area .concept-card > h2 { font-size:28px; margin-top:0; }
  .math-area .concept-card > p, .math-area .challenge-progress, .math-area .topic-explore select { font-size:19px; }
  .math-area .topic-operations button { font-size:18px; min-height:54px; }
  .math-area .task-scene { min-height:300px; padding:28px; }
  .math-area .task-object { width:76px; height:84px; }
  .math-area .math-actions { grid-column:3; grid-row:1 / span 2; padding:44px 30px; }
  .math-area .math-actions button { padding:24px 0 30px; }
  .math-area .math-actions .support-icon { width:96px; height:96px; flex-shrink:0; }
  .math-area .math-actions img { width:47px; height:47px; }
  .math-area .math-actions strong { font-size:26px; }
  .math-area .math-modes strong { font-size:18px; }
}