:root {
  color-scheme: light dark;
  --paper: #fffaf0;
  --surface: #fffdf8;
  --ink: #183c35;
  --muted: #415f56;
  --band: #eaf2e7;
  --action: #145c4c;
  --on-action: #ffffff;
  --line: #708779;
  --soft-line: #c4d3c5;
  --focus: #a14120;
  --counter: #1e6c57;
  --second: #a26a00;
  --tens: #405cad;
  --feedback: #f9e9bc;
  --feedback-ink: #4c3914;
  --error: #9b302d;
  --hero-paper: #eeeeec;
  --hero-ink: #183c35;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #142923;
    --surface: #203b32;
    --ink: #f5f3e7;
    --muted: #ccdbce;
    --band: #1b332a;
    --action: #c8e6a9;
    --on-action: #142923;
    --line: #8ba391;
    --soft-line: #536f60;
    --focus: #ffc582;
    --counter: #bfe1bd;
    --second: #e7b957;
    --tens: #b2c2ff;
    --feedback: #4a3c1d;
    --feedback-ink: #fff0ca;
    --error: #ffb4a9;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #142923;
  --surface: #203b32;
  --ink: #f5f3e7;
  --muted: #ccdbce;
  --band: #1b332a;
  --action: #c8e6a9;
  --on-action: #142923;
  --line: #8ba391;
  --soft-line: #536f60;
  --focus: #ffc582;
  --counter: #bfe1bd;
  --second: #e7b957;
  --tens: #b2c2ff;
  --feedback: #4a3c1d;
  --feedback-ink: #fff0ca;
  --error: #ffb4a9;
}
:root[data-theme="light"] { color-scheme: light; }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: 1rem; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 1.05rem/1.6 system-ui, sans-serif; }
::selection { background: var(--action); color: var(--on-action); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
a { color: inherit; text-underline-offset: .22em; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .55; }
input, textarea { caret-color: var(--ink); }
.wrap { width: min(100% - 3rem, 74rem); margin-inline: auto; }
.skip { position: absolute; top: .8rem; left: .8rem; z-index: 2; padding: .8rem; background: var(--surface); }
.skip:not(:focus), .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.masthead { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .7rem 1.5rem; border-bottom: 1px solid var(--line); padding-block: 1.1rem; }
.brand { display: inline-flex; align-items: center; min-height: 44px; gap: .75rem; text-decoration: none; font-weight: 750; line-height: 1.16; font-size: 1rem; }
nav { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; }
nav a { display: inline-flex; min-height: 44px; align-items: center; font-size: .95rem; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2 { font-family: Georgia, serif; font-weight: 500; line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
h1 { font-size: clamp(2.65rem, 4.9vw, 4.6rem); max-width: 18ch; }
h2 { font-size: clamp(2rem, 3.7vw, 3.35rem); }
h3 { font-size: 1.4rem; line-height: 1.25; }
h4 { font-size: 1.2rem; line-height: 1.3; }
p + p { margin-top: .85rem; }
.lead { font-size: 1.15rem; color: var(--muted); max-width: 56ch; margin-top: 1.2rem; }
.small { font-size: .9rem; color: var(--muted); }
.button, .quiet, .text-button, .segmented button, .skill-link {
  min-height: 46px;
  font: inherit;
  font-weight: 650;
}
.button, .quiet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  border-radius: .4rem;
  padding: .65rem 1.05rem;
  text-decoration: none;
}
.button { border: 2px solid transparent; background: var(--action); color: var(--on-action); }
.quiet { border: 1px solid var(--line); background: transparent; color: var(--ink); }
.masthead > .quiet[aria-pressed="true"] {
  background: var(--action); color: var(--on-action); border-color: var(--action);
}
.button:hover:not(:disabled), .quiet:hover:not(:disabled), .skill-link:hover { text-decoration: underline; text-underline-offset: .22em; }
.text-button { border: 0; padding: .55rem 0; background: none; color: var(--ink); text-decoration: underline; text-underline-offset: .22em; text-align: left; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem 1.1rem; margin-top: 1.25rem; }
.actions > a:not(.button) { display: inline-flex; align-items: center; min-height: 44px; }
.audience-row { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: .75rem; padding-top: 1.4rem; }
.audience-row > p { font-size: .95rem; font-weight: 650; }
.segmented { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line); padding: .2rem; border-radius: .5rem; gap: .2rem; }
.segmented button { border: 0; border-radius: .3rem; padding: .5rem 1.1rem; background: transparent; color: var(--ink); }
.segmented [aria-pressed="true"] { background: var(--action); color: var(--on-action); }
.hero { display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; gap: clamp(2rem, 6vw, 5rem); padding-block: clamp(2.5rem, 5vw, 4.8rem); }
.hero .small { margin-top: .9rem; max-width: 54ch; }
.hero-model { margin: 0; border-radius: 1rem; padding: clamp(1.3rem, 3vw, 2.4rem); background: var(--hero-paper); color: var(--hero-ink); }
.hero-model .frame { color: var(--hero-ink); }
.hero-model figcaption { margin-top: 1.1rem; font-size: 1rem; }
.hero-model figcaption strong, .hero-model figcaption span { display: block; }
.hero-model figcaption span { margin-top: .35rem; }
.model-equation { font-family: Georgia, serif; font-size: 2.4rem; line-height: 1.2; margin-top: 1rem; }
.audience-guide { display: grid; grid-template-columns: 1fr 1.5fr; gap: 1rem 3rem; border-top: 1px solid var(--line); padding-block: 1.6rem 2.7rem; }
.audience-guide h2 { font-family: inherit; font-size: 1.2rem; letter-spacing: normal; font-weight: 750; line-height: 1.3; }
.audience-guide p { color: var(--muted); max-width: 64ch; }
.learning-band { background: var(--band); padding-block: clamp(2.7rem, 5vw, 4.5rem); }
.section-heading { display: flex; align-items: start; justify-content: space-between; flex-wrap: wrap; gap: 1rem 2rem; margin-bottom: 1.7rem; }
.section-heading p { margin-top: .7rem; max-width: 64ch; color: var(--muted); }
.section-heading > a { min-height: 44px; display: inline-flex; align-items: center; }
.learning-layout { display: grid; grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr); gap: 2rem; align-items: start; }
.setup h3 { margin-bottom: 1rem; }
label, legend { font-size: .96rem; font-weight: 650; }
select, input[type="text"], textarea {
  border: 1px solid var(--line); border-radius: .4rem; background: var(--surface); color: var(--ink);
  min-height: 48px; padding: .65rem .75rem; max-width: 100%;
}
select { display: block; width: 100%; margin: .45rem 0 .85rem; font-size: .98rem; }
select:disabled { opacity: .7; }
.setup > p { margin-bottom: .8rem; }
summary { cursor: pointer; min-height: 46px; padding-block: .7rem; font-weight: 650; }
details p { max-width: 66ch; margin-bottom: .7rem; }
.setup details { font-size: .95rem; border-block: 1px solid var(--soft-line); margin-bottom: 1.2rem; }
fieldset { padding: 0; margin: 1.25rem 0; border: 0; min-width: 0; }
legend { margin-bottom: .7rem; padding: 0; }
.mode-choice { display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: .4rem; cursor: pointer; margin-bottom: .5rem; }
.mode-choice:has(input:checked) { background: var(--surface); border-color: var(--action); outline: 1px solid var(--action); }
.mode-choice > span > span { display: block; font-weight: 400; font-size: .88rem; margin-top: .12rem; color: var(--muted); }
input[type="radio"], input[type="checkbox"] { width: 1.2rem; height: 1.2rem; flex: 0 0 auto; accent-color: var(--action); margin: 0; }
.timing-choice, .reflection-check { display: flex; align-items: start; gap: .7rem; cursor: pointer; padding-block: .5rem; font-weight: 500; }
.timing-choice input, .reflection-check input { margin-top: .2rem; }
.timing-choice .small { display: block; }
.setup > .button { width: 100%; margin-top: .8rem; }
.setup > .quiet { width: 100%; margin-top: .65rem; }
.privacy-note { margin-top: 1rem; }
.work-surface { background: var(--surface); border-radius: 1rem; padding: clamp(1.2rem, 3vw, 2.2rem); min-width: 0; }
#ready-panel > p { margin-top: 1.2rem; }
.math-model { padding-block: 1.5rem; display: flex; justify-content: center; }
.model-content { width: 100%; max-width: 29rem; }
.frame { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid currentColor; max-width: 22rem; margin-inline: auto; color: var(--counter); }
.frame > span { aspect-ratio: 1; border: 1px solid currentColor; display: grid; place-items: center; }
.frame > .filled::after, .frame > .second::after, .frame > .extra::after { content: ""; width: 61%; aspect-ratio: 1; border-radius: 50%; background: currentColor; }
.frame > .second::after { background: var(--second); }
.frame > .extra::after { background: transparent; border: 2px dashed currentColor; }
.model-label { text-align: center; color: var(--muted); font-size: .9rem; margin-top: .75rem; line-height: 1.45; }
.base-blocks { display: flex; flex-wrap: wrap; align-items: end; justify-content: center; gap: 1rem; min-height: 8rem; }
.tens { display: flex; align-items: end; gap: .35rem; }
.ten-rod { display: grid; grid-template-rows: repeat(10, 1fr); width: .85rem; height: 8.5rem; background: var(--tens); border: 1px solid var(--tens); }
.ten-rod > span { border-bottom: 1px solid var(--surface); }
.ones { display: grid; grid-template-columns: repeat(5, 1rem); gap: .3rem; }
.one-block { display: block; width: 1rem; height: 1rem; background: var(--second); border: 1px solid var(--second); }
.array { display: grid; gap: .4rem; justify-content: center; }
.array-row { display: flex; gap: .4rem; }
.array-row.group-start { margin-top: .45rem; }
.array-row.removed { position: relative; opacity: .7; }
.array-row.removed::after { content: ""; position: absolute; inset: 50% -.2rem auto; border-top: 2px solid currentColor; transform: rotate(-5deg); }
.array-dot { width: 1rem; height: 1rem; border-radius: 50%; background: var(--counter); }
.array-row.second .array-dot { background: transparent; border: 2px solid var(--second); }
.array-row.removed .array-dot { background: transparent; border: 1px dashed currentColor; }
.addition-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.addition-groups .frame { width: 100%; }
.quantity-group.second .frame { color: var(--second); }
.round-top { display: flex; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; color: var(--muted); font-size: .9rem; }
.round-heading { display: flex; justify-content: space-between; align-items: start; gap: 1rem; margin-top: .8rem; }
.round-heading h3 { padding-top: .35rem; }
#round-context { margin-top: .9rem; max-width: 62ch; color: var(--muted); font-size: .98rem; }
.math-prompt { font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.3; font-weight: 700; text-align: center; font-variant-numeric: lining-nums tabular-nums; padding-block: .5rem 1rem; text-wrap: balance; }
.answer-controls { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; margin-top: .4rem; }
#answer { width: 5.5rem; font-size: 1.3rem; min-height: 50px; }
.error { color: var(--error); min-height: 1.4rem; font-size: .94rem; margin-top: .5rem; }
.feedback { background: var(--feedback); color: var(--feedback-ink); padding: 1rem; border-radius: .65rem; margin-top: .5rem; }
.feedback .actions { margin-top: .85rem; }
.feedback .quiet { color: var(--feedback-ink); border-color: var(--feedback-ink); }
#card-controls { text-align: center; }
#card-controls .actions { justify-content: center; }
#card-controls .small { margin-top: .9rem; }
.end-controls { border-top: 1px solid var(--soft-line); margin-top: 1.6rem; padding-top: .75rem; }
#pause-panel { padding-block: 2.5rem; }
#pause-panel p { margin-block: .7rem 1.2rem; }
#result-title { font-size: 1.75rem; }
.achievement { display: inline-flex; border: 1px solid var(--line); border-radius: .35rem; padding: .35rem .65rem; font-size: .9rem; font-weight: 750; margin-top: .8rem; }
#result-skill { margin-top: .8rem; color: var(--muted); }
.result-details { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; padding-block: 1rem; margin: 1rem 0; border-block: 1px solid var(--soft-line); }
.result-details dt { color: var(--muted); font-size: .9rem; }
.result-details dd { margin: .2rem 0 0; font-size: 1.45rem; font-weight: 750; }
#result-meaning { margin-block: .8rem 1rem; }
#answer-review { border-block: 1px solid var(--soft-line); margin-bottom: 1.3rem; }
#review-items { padding-inline-start: 1.5rem; max-height: 30rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: var(--line) var(--surface); }
#review-items li { padding: .7rem 0; }
#review-items p { margin-top: .4rem; }
textarea { display: block; width: 100%; margin-top: .4rem; resize: vertical; }
textarea::placeholder { color: var(--muted); opacity: 1; }
.reflection-check { margin-top: .8rem; }
#result-panel > .small { margin-top: .9rem; }
.section { padding-block: clamp(2.8rem, 5vw, 4.8rem); }
.visit-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-top: 1px solid var(--soft-line); padding-block: 1rem; }
.visit-row p { margin-top: .3rem; }
.inline-confirm { background: var(--band); padding: 1.1rem; border-radius: .65rem; margin-top: .9rem; }
.path-section { border-top: 1px solid var(--line); }
#learning-path { margin-top: 1.5rem; }
.stage { border-top: 1px solid var(--line); padding-block: .5rem; }
.stage > summary { font-size: 1.2rem; padding-block: .9rem; }
.stage > p { color: var(--muted); }
.skill-list { padding-inline-start: 1.8rem; margin-block: .3rem 1rem; }
.skill-list li { padding: .3rem .5rem .7rem; }
.skill-list li::marker { font-weight: 700; }
.skill-link { border: 0; background: transparent; color: var(--ink); padding: .4rem 0; text-align: left; }
.skill-list p { max-width: 70ch; margin-bottom: .3rem; }
.curriculum-boundary { border-top: 1px solid var(--line); margin-top: .6rem; padding-top: .5rem; }
.community-band { background: var(--band); }
.split { display: grid; grid-template-columns: 1fr 1.5fr; gap: 2rem 4rem; }
.community-band details { border-bottom: 1px solid var(--line); padding-bottom: .8rem; margin-bottom: .8rem; }
.community-band details a { display: inline-flex; min-height: 44px; align-items: center; }
.prose p { max-width: 67ch; }
.principles { margin: 1.5rem 0 0; }
.principles > div { border-top: 1px solid var(--line); padding-block: 1rem; }
.principles dt { font-weight: 750; }
.principles dd { margin: .4rem 0 0; max-width: 66ch; }
.footer { border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .7rem 1rem; padding-block: 1.4rem; font-size: .95rem; color: var(--muted); }
.footer > .small { width: 100%; margin: 0; }
.footer a { min-height: 44px; display: inline-flex; align-items: center; }

@media (max-width: 58rem) {
  .masthead { gap: .75rem 1rem; }
  .hero { grid-template-columns: 1.15fr 1fr; gap: 2rem; }
  .learning-layout { grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr); gap: 1.2rem; }
  .answer-controls { align-items: stretch; }
  .answer-controls .quiet { flex-basis: 100%; }
}
@media (max-width: 46rem) {
  .wrap { width: calc(100% - 2rem); }
  .masthead nav { order: 3; flex-basis: 100%; gap: 1rem; }
  .masthead > .quiet { font-size: .85rem; padding-inline: .6rem; }
  .audience-row { align-items: start; gap: .7rem; }
  .segmented { width: 100%; }
  .segmented button { flex: 1; padding-inline: .8rem; }
  .hero, .audience-guide, .learning-layout, .split { grid-template-columns: 1fr; }
  h1 { max-width: 19ch; }
  .hero { padding-block: 2rem; gap: 1.8rem; }
  .hero-model { max-width: 30rem; }
  .audience-guide { gap: .7rem; padding-block: 1.4rem 2rem; }
  .learning-layout { gap: 1.7rem; }
  .mode-choice { padding: .75rem .85rem; }
  .work-surface { padding: 1.1rem; }
  .round-heading { gap: .7rem; }
  .round-heading h3 { font-size: 1.2rem; }
  .round-heading > .quiet { padding-inline: .7rem; }
  .math-prompt { font-size: 1.65rem; overflow-wrap: anywhere; }
  .answer-controls .button { flex: 1; }
  .addition-groups { gap: .65rem; }
  .visit-row { align-items: start; }
  .visit-row .quiet { font-size: .9rem; flex-shrink: 0; }
  .split { gap: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
@media (forced-colors: active) {
  .segmented [aria-pressed="true"], .masthead > .quiet[aria-pressed="true"] {
    forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight;
  }
  .frame > .filled::after, .array-dot { forced-color-adjust: none; background: CanvasText; }
  .frame > .second::after, .array-row.second .array-dot { forced-color-adjust: none; background: Canvas; border: 2px solid CanvasText; }
  .ten-rod, .one-block { forced-color-adjust: none; background: Canvas; border: 1px solid CanvasText; }
  .ten-rod > span { border-color: CanvasText; }
  .array-row.removed { opacity: 1; color: CanvasText; }
  .array-row.removed .array-dot { background: Canvas; border-color: CanvasText; }
}
@media screen {
  :root {
    --paper: #ffffff; --surface: #ffffff; --ink: #151515; --muted: #454545;
    --band: #eeeeec; --action: #151515; --on-action: #ffffff;
    --line: #646464; --soft-line: #c8c8c5; --focus: #1648bd;
    --counter: #151515; --second: #c91f1b; --tens: #151515;
    --feedback: #eeeeec; --feedback-ink: #151515; --error: #151515;
    --hero-paper: #eeeeec; --hero-ink: #151515;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --paper: #171717; --surface: #232323; --ink: #fafafa; --muted: #d0d0cd;
      --band: #242424; --action: #fafafa; --on-action: #151515;
      --line: #999999; --soft-line: #515151; --focus: #85b5ff;
      --counter: #151515; --second: #c91f1b; --tens: #151515;
      --feedback: #eeeeec; --feedback-ink: #151515; --error: #fafafa;
    }
  }
  :root[data-theme="dark"] {
    --paper: #171717; --surface: #232323; --ink: #fafafa; --muted: #d0d0cd;
    --band: #242424; --action: #fafafa; --on-action: #151515;
    --line: #999999; --soft-line: #515151; --focus: #85b5ff;
    --counter: #151515; --second: #c91f1b; --tens: #151515;
    --feedback: #eeeeec; --feedback-ink: #151515; --error: #fafafa;
  }
  :root {
    --type-display: clamp(2rem, 1.5rem + 1.25vw, 2.625rem);
    --type-section: clamp(1.5rem, 1.2rem + .8vw, 1.875rem);
    --type-title: 1.25rem;
    --type-body: 1rem;
  }
  body {font-size:var(--type-body);}
  .wrap {width:min(100% - 4rem,80rem);}
  .masthead {padding-block:1.1rem;border-bottom:1px solid var(--soft-line);}
  .brand-counters {fill:#c91f1b;}
  .brand-counters .anchor-counter {fill:#151515;}
  .masthead nav {gap:.5rem 1.4rem;}
  .masthead > .quiet {border-color:var(--soft-line);font-size:.85rem;}
  .audience-row {justify-content:flex-start;gap:1rem;padding-top:1.6rem;}
  .audience-row > p {font-weight:500;}
  .segmented {border:0;background:var(--band);border-radius:8px;padding:3px;}
  .segmented button {font-size:.95rem;min-height:44px;}
  .hero {grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);padding-block:1.6rem 2.2rem;}
  h1 {font-size:var(--type-display);line-height:1.15;max-width:24ch;}
  h2 {font-size:var(--type-section);line-height:1.2;}
  h3 {font-size:var(--type-title);line-height:1.3;}
  h4 {font-size:1.125rem;}
  #learn-title,#today-title {font-size:1.5rem;line-height:1.25;}
  #result-title {font-size:1.375rem;line-height:1.3;}
  h1 em {font-style:normal;color:#c91f1b;}
  :root[data-theme="dark"] h1 em {color:#ff7973;}
  @media(prefers-color-scheme:dark) {:root:not([data-theme="light"]) h1 em {color:#ff7973;}}
  .hero .lead {font-size:var(--type-body);max-width:48ch;}
  .hero .small {font-size:.86rem;max-width:44ch;}
  .welcome > .hero-note {margin:0 0 1.3rem;max-width:60ch;font-size:.9rem;}
  .button,.quiet {border-radius:6px;}
  .hero .button {min-height:48px;padding-inline:1.4rem;}
  .discovery {padding:1.4rem;border-radius:12px;background:#eeeeec;color:#151515;width:100%;max-width:28rem;justify-self:end;}
  .discovery > figcaption {font:500 1.125rem/1.3 Georgia,serif;margin:0 0 1rem;}
  .discovery-board {background:#ffffff;color:#151515;padding:clamp(1rem,2vw,1.8rem);}
  .discovery-frame {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:2px solid #151515;border-left:2px solid #151515;}
  .discovery-frame > span {display:grid;place-items:center;aspect-ratio:1;border-right:2px solid #151515;border-bottom:2px solid #151515;}
  .discovery-frame .counter-token {display:block;width:66%;aspect-ratio:1;border-radius:50%;border:2px solid #151515;}
  .discovery-frame > .black-counter > .counter-token {background:#151515;border-color:#151515;}
  .discovery-frame > .red-counter > .counter-token {background:#c91f1b;border-color:#c91f1b;box-shadow:0 3px 3px #00000024;}
  .discovery-frame > .empty-counter > .counter-token {background:transparent;border:0;}
  .discovery-equation {font:500 clamp(2rem,3vw,2.8rem)/1.2 Georgia,serif;text-align:center;margin-top:1rem;font-variant-numeric:tabular-nums;}
  .discovery-equation > span {color:#c91f1b;}
  #discovery-description {font-size:.9rem;line-height:1.5;margin-top:.65rem;}
  .discovery-bottom {display:flex;align-items:center;justify-content:flex-end;gap:1rem;margin-top:1rem;}
  .discovery-bottom .quiet {background:#151515;color:#ffffff;border-color:#151515;min-height:48px;font-size:.9rem;}
  .discovery-bottom .quiet:focus-visible {outline-color:#1648bd;}
  .discovery-response {min-height:2.8em;font-size:.85rem;line-height:1.4;margin-top:.8rem;}
  .audience-guide {grid-template-columns:1fr 1.8fr;padding-block:1.3rem 2rem;gap:1rem 3rem;border-top:1px solid var(--soft-line);}
  .audience-guide h2 {font-size:1.1rem;}
  .audience-guide p {font-size:.95rem;}
  .approach-band {background:#151515;color:#ffffff;}
  .approach-band > div {display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.5rem;}
  .approach-band a {display:inline-flex;align-items:center;min-height:44px;font-size:.95rem;}
  .approach-band p {font-size:1.05rem;}
  .path-introduction {display:grid;grid-template-columns:1fr 1.4fr;gap:2rem 4rem;margin-bottom:2rem;align-items:start;}
  .path-introduction .lead {margin-top:0;color:var(--ink);font-size:var(--type-body);}
  .path-introduction p + p {font-size:.95rem;color:var(--muted);}
  .path-section {border:0;}
  .stage > summary {font-family:Georgia,serif;font-size:var(--type-title);line-height:1.4;padding-block:1rem;}
  .stage-count {float:right;font:500 .85rem/1.8 system-ui,sans-serif;color:var(--muted);padding-left:1rem;}
  .stage > p {padding-bottom:.8rem;}
  .stage .skill-list {columns:2;column-gap:3rem;}
  .stage .skill-list li {break-inside:avoid;}
  .skill-link {text-decoration:underline;text-underline-offset:.22em;}
  .learning-band {border-top:1px solid var(--soft-line);}
  .setup {min-width:0;}
  .learning-layout {grid-template-columns:minmax(17rem,22rem) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);}
  .work-surface {
    --paper:#ffffff;--surface:#ffffff;--ink:#151515;--muted:#454545;
    --action:#151515;--on-action:#ffffff;--line:#646464;--soft-line:#c8c8c5;--focus:#1648bd;--band:#eeeeec;--error:#151515;
    color:var(--ink);background:#ffffff;border:1px solid var(--soft-line);border-radius:12px;
  }
  .math-model {color:#151515;min-width:0;}
  .model-content {background:#ffffff;color:#151515;padding:.4rem;min-width:0;overflow-x:auto;}
  .array {width:max-content;min-width:100%;}
  .model-content .model-label {color:#454545;}
  .frame,.quantity-group.second .frame {color:#151515;}
  .frame > .filled::after {background:#151515;border:1px solid #151515;}
  .frame > .second::after,.quantity-group.second .frame > .filled::after {background:#c91f1b;border:1px solid #c91f1b;}
  .frame > .extra::after {border-color:#686868;}
  .ten-rod {background:#151515;border-color:#151515;}
  .ten-rod > span {border-color:#ffffff;}
  .one-block {background:#c91f1b;border-color:#c91f1b;}
  .quantity-group:not(.second) .one-block {background:#151515;border-color:#151515;}
  .array-dot {background:#151515;border:1px solid #151515;}
  .array-row.second .array-dot {background:#c91f1b;border-color:#c91f1b;}
  .array-row.removed {opacity:1;color:#151515;}
  .array-row.removed .array-dot {background:#ffffff;border-color:#151515;}
  .community-band {background:#151515;color:#ffffff;}
  .community-band details {border-color:#737373;}
  .community-band p {color:#e0e0de;}
  #why h2 {max-width:20ch;}
  .principles > div {border-color:var(--soft-line);}
  .footer {border-color:var(--soft-line);}
  .resource-list {list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;}
  .resource-list li {border-top:1px solid var(--line);padding-top:1rem;}
  .resource-list a {display:inline-flex;flex-wrap:wrap;align-items:center;gap:.3rem;min-height:44px;font-weight:650;}
  .resource-list a span {font-weight:400;font-size:.85rem;}
  .resource-list p {font-size:.95rem;color:var(--muted);margin-top:.5rem;max-width:38ch;}
  .section {padding-block:clamp(2rem,4vw,3.5rem);}
  #round-context,.model-label,.mode-choice > span > span,.error,
  #discovery-description,.discovery-response,.resource-list p,
  .privacy-note,.timing-choice .small,#ready-panel .small,
  #card-controls .small,.end-controls .small,#result-panel > .small {font-size:var(--type-body);}
  .discovery-response {min-height:2.8em;}
  .visit-row {flex-wrap:wrap;}
  @media(max-width:60rem) {
    .wrap {width:calc(100% - 3rem);}
    .hero {gap:2rem;}
    .learning-layout {grid-template-columns:minmax(15rem,19rem) minmax(0,1fr);gap:1.5rem;}
    .masthead nav {gap:.3rem 1rem;}
    .masthead nav a {font-size:.88rem;}
  }
  @media(max-width:46rem) {
    .wrap {width:calc(100% - 2rem);}
    .hero,.audience-guide,.path-introduction,.learning-layout {grid-template-columns:1fr;}
    .masthead {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.35rem .6rem;padding-block:.65rem;}
    .masthead .brand {font-size:.88rem;gap:.5rem;}
    .masthead .brand svg {width:36px;height:24px;flex-shrink:0;}
    .masthead > .quiet {grid-column:2;grid-row:1;font-size:.75rem;padding:.5rem;max-width:110px;min-height:44px;}
    .masthead nav {grid-column:1/-1;grid-row:2;gap:.3rem 1rem;}
    .masthead nav a[href="#community"] {display:none;}
    .audience-row {gap:.5rem;padding-top:.8rem;}
    .audience-row > p {font-size:.8rem;}
    .segmented {width:auto;max-width:100%;}
    .segmented button {padding:.5rem .65rem;font-size:.85rem;}
    h1 {max-width:24ch;}
    .hero {padding-block:1.25rem 1.5rem;gap:1.25rem;}
    .hero .lead {font-size:var(--type-body);}
    .discovery {padding:1rem;max-width:28rem;justify-self:start;}
    .discovery-board {padding:1rem;}
    .discovery-response {min-height:2.8em;}
    .approach-band > div {display:block;}
    .approach-band a {margin-top:.5rem;}
    .path-introduction {gap:1rem;margin-bottom:1rem;}
    .stage .skill-list {columns:1;}
    .stage-count {font-size:.8rem;padding-top:.15rem;}
    .stage > summary {font-size:1.125rem;}
    .audience-guide {gap:.5rem;padding-block:1rem 1.5rem;}
    .work-surface {padding:1rem;}
    .setup > .work-surface {margin-block:1rem 1.2rem;}
    .section {padding-block:2rem;}
    .resource-list {grid-template-columns:1fr;gap:1.2rem;}
  }
  @media(max-width:18rem) {
    .array-dot {width:.7rem;height:.7rem;}
    .array,.array-row {gap:.25rem;}
    .ten-rod {width:.6rem;}
    .tens {gap:.25rem;}
    .addition-groups {grid-template-columns:minmax(0,1fr);}
    .masthead {grid-template-columns:minmax(0,1fr);}
    .masthead > .quiet {grid-column:1;grid-row:2;max-width:none;justify-self:start;}
    .masthead nav {grid-column:1;grid-row:3;}
    .stage-count {float:none;display:block;padding-left:0;}
  }
  @media(forced-colors:active) {
    .discovery {background:Canvas;color:CanvasText;border:1px solid CanvasText;}
    .discovery-board,.model-content {background:Canvas;color:CanvasText;}
    .discovery-frame,.discovery-frame > span {border-color:CanvasText;}
    .discovery-frame > .black-counter > .counter-token,.frame > .filled::after,.array-dot {forced-color-adjust:none;background:CanvasText;border-color:CanvasText;box-shadow:none;}
    .discovery-frame > .red-counter > .counter-token,.frame > .second::after,.quantity-group.second .frame > .filled::after {forced-color-adjust:none;background:Canvas;border:2px solid CanvasText;box-shadow:none;}
    .discovery-frame > .empty-counter > .counter-token {border-color:CanvasText;}
    .discovery-bottom .quiet {background:ButtonFace;color:ButtonText;border-color:ButtonText;}
    .discovery-bottom .quiet:focus-visible {outline-color:Highlight;}
    .discovery-response,#discovery-description,.model-content .model-label {color:CanvasText;}
    .ten-rod,.one-block {forced-color-adjust:none;background:Canvas;border-color:CanvasText;}
    .ten-rod > span {border-color:CanvasText;}
    .quantity-group:not(.second) .one-block {forced-color-adjust:none;background:CanvasText;border-color:CanvasText;}
    .array-row.second .array-dot,.array-row.removed .array-dot {forced-color-adjust:none;background:Canvas;border-color:CanvasText;}
    .approach-band,.community-band {background:Canvas;color:CanvasText;}
    .community-band p {color:CanvasText;}
  }
}
@media print {
  @page { size: auto; margin: 13mm; }
  :root { color-scheme: light; }
  body { background: white; color: #111; font: 12pt/1.5 system-ui, sans-serif; }
  body > *:not(#print-report) { display: none !important; }
  #print-report { display: block !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  #print-report h1 { max-width: none; font: 30pt/1.15 Georgia, serif; margin-bottom: 6mm; }
  #print-report h2 { font: 18pt/1.2 Georgia, serif; margin-block: 7mm 3mm; }
  #print-report p { max-width: 75ch; margin-block: 3mm; }
  .print-brand { font-size: 11pt; }
  .print-card-guide { font-size: 9pt; }
  .print-achievement { display: inline-block; border: 1px solid #555; padding: 2mm 4mm; font-weight: 700; }
  .printed-reflection { white-space: pre-wrap; overflow-wrap: anywhere; min-height: 15mm; }
  .print-footnote { border-top: 1px solid #777; padding-top: 4mm; margin-top: 9mm !important; font-size: 10pt; }
  .print-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4mm; }
  .print-card { border: 1px solid #555; padding: 3mm; min-height: 41mm; break-inside: avoid; }
  .card-number { display: block; font-size: 8pt; }
  .print-card .model-content { color: #111; max-width: none; }
  .print-card .frame { max-width: 32mm; color: #111; }
  .print-card .quantity-group.second .frame { color: #111; }
  .print-card .model-label { display: none; }
  .print-card .addition-groups { gap: 3mm; }
  .print-card .frame > .filled::after { background: #111; border: 1.3mm solid #111; }
  .print-card .frame > .second::after, .print-card .quantity-group.second .frame > .filled::after { background: #c91f1b; border: 1.3mm solid #c91f1b; }
  .print-card .base-blocks { min-height: 16mm; gap: 3mm; }
  .print-card .tens { gap: 1mm; }
  .print-card .ten-rod { width: 2mm; height: 18mm; border-color: #111; background: #111; }
  .print-card .ten-rod > span { border-color: white; }
  .print-card .ones { grid-template-columns: repeat(5, 2mm); gap: 1mm; }
  .print-card .one-block { width: 2mm; height: 2mm; border: 1mm solid #c91f1b; background: #c91f1b; }
  .print-card .quantity-group:not(.second) .one-block { border-color: #111; background: #111; }
  .print-card .array { gap: .6mm; }
  .print-card .array-row { gap: .6mm; }
  .print-card .array-row.group-start { margin-top: 1mm; }
  .print-card .array-dot { width: 1.6mm; height: 1.6mm; background: #111; border: .8mm solid #111; }
  .print-card .array-row.second .array-dot { background: #c91f1b; border: .8mm solid #c91f1b; }
  .print-card .array-row.removed { opacity: 1; color: #111; }
  .print-card .array-row.removed .array-dot { background: white; border: 1px dashed #111; }
  .print-card > p { font-size: 12pt; line-height: 1.2; font-weight: 700; margin-bottom: 0 !important; }
  .print-key { break-before: page; }
  .print-key li { margin-bottom: 4mm; break-inside: avoid; }
}