:root {
  color-scheme:light;
  --ink:#203332;
  --muted:#73827f;
  --teal:#087f79;
  --teal-dark:#08655f;
  --line:#e1e8e4;
  --cyan:#0da3bc;
  --orange:#eaa01d;
  --paper:#fff;
  --page:#f5f7f5;
  --composer-height:156px;
  font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
}

.chapter-return { color: inherit; text-decoration: none; }
.chapter-return:hover { color: var(--teal); text-decoration: underline; }

* {
  box-sizing:border-box;
}

body {
  margin:0;
  background:var(--page);
  color:var(--ink);
  font-size:15px;
  line-height:1.65;
}

button,textarea {
  font:inherit;
}

button,a {
  -webkit-tap-highlight-color:transparent;
}

button {
  cursor:pointer;
}

button:disabled {
  cursor:not-allowed;
}

button:focus-visible,a:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline:3px solid #82cfc7;
  outline-offset:4px;
}

button {
  color:inherit;
}

button svg {
  display:block;
}

button:disabled {
  opacity:.55;
}

[hidden] {
  display:none!important;
}

.math {
  font-family:"Cambria Math","STIX Two Math",Georgia,"Times New Roman",serif;
  font-size:1.14em;
}

.math i {
  font-weight:500;
}

.nowrap {
  white-space:nowrap;
}

.topbar {
  height:72px;
  background:#ffffffec;
  border-bottom:1px solid var(--line);
}

.topbar-inner {
  max-width:880px;
  height:100%;
  padding:0 28px;
  margin:auto;
  display:flex;
  align-items:center;
  gap:16px;
}

.brand {
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:750;
  font-size:20px;
  text-decoration:none;
  color:var(--ink);
  letter-spacing:.04em;
}

.brand-mark {
  display:grid;
  place-items:center;
  background:var(--teal);
  color:white;
  width:30px;
  height:32px;
  border-radius:9px;
  font-size:17px;
}

.demo-label {
  font-size:11px;
  color:var(--muted);
  border-left:1px solid var(--line);
  padding-left:16px;
  letter-spacing:.08em;
}

.reset-button {
  margin-left:auto;
  border:0;
  background:none;
  color:#687a75;
  padding:8px 0;
  font-size:13px;
}

.reset-button:hover {
  color:var(--teal);
}

.workspace {
  max-width:824px;
  padding:32px 24px calc(var(--composer-height) + 40px + env(safe-area-inset-bottom));
  margin:auto;
}

.eyebrow {
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:12px;
  letter-spacing:.05em;
  color:var(--muted);
  margin:0 3px 14px;
}

.separator {
  margin:0 8px;
  color:#c0cac5;
}

.problem-card {
  padding:23px 28px 26px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:19px;
  box-shadow:0 3px 15px #193e2c03;
}

.problem-card h1 {
  font-size:11px;
  color:var(--muted);
  font-weight:600;
  letter-spacing:.12em;
  margin:0 0 12px;
}

.problem-card p {
  font-size:19px;
  line-height:1.85;
  font-weight:500;
  margin:0;
}

.meaning-panel {
  margin:20px 0 0;
  padding:15px 18px;
  background:#f3f7f5;
  border-left:3px solid #a7c8be;
  border-radius:0 10px 10px 0;
}

.meaning-heading {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 12px;
  margin-bottom:12px;
}

.meaning-heading h2 {
  margin:0;
  font-size:12px;
  font-weight:600;
  color:#456c60;
}

.meaning-heading > span {
  font-size:11px;
  color:var(--muted);
}

.problem-meaning {
  margin:0;
  display:grid;
  gap:10px;
}

.meaning-row {
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  align-items:baseline;
  gap:14px;
}

.meaning-row dt {
  color:var(--muted);
  font-size:12px;
}

.meaning-row dd {
  display:flex;
  flex-wrap:wrap;
  column-gap:24px;
  row-gap:5px;
  margin:0;
  color:#31594f;
  font-size:18px;
  line-height:1.6;
}

.meaning-row sub {
  font-size:.7em;
}

.progress-track {
  height:3px;
  background:#e8eeea;
  border-radius:5px;
  margin:23px 8px;
}

.progress-track span {
  display:block;
  height:100%;
  width:0;
  background:var(--teal);
  border-radius:5px;
  transition:width .4s;
}

.step-card {
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:20px;
  padding:26px 28px;
  margin-bottom:20px;
  scroll-margin-top:20px;
}

.step-card.active {
  border-color:#97c8c0;
  box-shadow:0 7px 30px #2b705a06;
}

.step-heading {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:27px;
}

.step-number {
  display:grid;
  place-items:center;
  flex:none;
  width:30px;
  height:30px;
  border-radius:50%;
  background:#edf5f2;
  color:var(--teal);
  font-size:13px;
  font-weight:700;
}

.active .step-number {
  background:var(--teal);
  color:white;
}

.step-heading h2 {
  font-size:19px;
  letter-spacing:.015em;
  margin:0;
  font-weight:650;
}

.step-heading h2:focus {
  outline:none;
}

.status {
  margin-left:auto;
  font-size:11px;
  font-weight:500;
  padding:3px 9px;
  border-radius:6px;
  background:#eaf5f0;
  color:var(--teal);
}

.done .status {
  background:none;
  color:var(--muted);
}

.question {
  font-size:18px;
  font-weight:600;
  line-height:1.6;
  margin:0 0 8px;
}

.subtext {
  font-size:13px;
  color:var(--muted);
  margin:0 0 22px;
}

.method-options {
  display:grid;
  gap:10px;
  margin:22px 0;
}

.method-choice {
  display:flex;
  align-items:center;
  gap:14px;
  text-align:left;
  border:1px solid var(--line);
  border-radius:12px;
  background:white;
  padding:16px 18px;
  font-size:15px;
  transition:background .15s,border-color .15s;
}

.method-choice:hover {
  border-color:#88c5b9;
  background:#f7fbf9;
}

.method-choice[aria-pressed=true] {
  border-color:#88c5b9;
  background:#edf7f3;
  color:var(--teal);
}

.method-choice[aria-pressed=true] .radio-mark {
  border:5px solid var(--teal);
  background:white;
}

.route-comparison {
  margin-top:20px;
  padding:18px 22px;
  border-left:3px solid #a7c8be;
  color:#456c60;
  line-height:1.8;
  font-size:14px;
}

.route-comparison h3 {
  margin:0 0 8px;
  font-size:14px;
}

.route-comparison p {
  margin:6px 0;
}

.function-conversion {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:16px;
  align-items:center;
  text-align:center;
}

.function-conversion .math {
  font-size:24px;
  line-height:1.8;
}

.conversion-label {
  display:block;
  color:var(--muted);
  font-size:12px;
}

.conversion-label .math {
  font-size:15px;
}

.conversion-arrow {
  color:var(--teal);
  font-size:23px;
}

.square-term {
  display:inline-block;
  padding:0 6px;
  border-radius:6px;
  background:#e1f0e9;
  color:var(--teal);
}

.vertex-reasoning {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:20px;
  align-items:center;
}

@media(min-width:701px) {
  .vertex-reasoning > .reasoning { border-top:0; margin-top:0; padding-top:0; }
}

.quadratic-graph {
  min-width:0;
  margin:0;
}

/* Captions may hold KaTeX, whose root signs are SVGs sized by KaTeX itself. */
.quadratic-graph svg:not(.katex *) {
  display:block;
  width:100%;
  height:auto;
}

.quadratic-graph figcaption {
  color:var(--muted);
  font-size:11px;
  text-align:center;
  line-height:1.6;
}

@media(max-width:700px) {
  .vertex-reasoning {
    grid-template-columns:minmax(0,1fr);
  }
  .function-conversion {
    grid-template-columns:minmax(0,1fr);
    gap:10px;
  }
  .function-conversion .math {
    font-size:clamp(16px,5vw,24px);
  }
  .conversion-arrow {
    transform:rotate(90deg);
  }
  .quadratic-graph {
    width:100%;
    max-width:380px;
    justify-self:center;
  }
}

.radio-mark {
  width:17px;
  height:17px;
  border:1.5px solid #c6d2ce;
  border-radius:50%;
  flex:none;
}

.option-arrow {
  margin-left:auto;
  color:#a0b2ab;
}

.selected-method {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  font-size:12px;
  color:var(--muted);
  margin:-2px 0 23px;
}

.method-pill {
  display:inline-flex;
  gap:6px;
  align-items:center;
  background:#edf7f3;
  color:var(--teal);
  padding:6px 10px;
  border-radius:7px;
  font-size:13px;
}

.method-tabs {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 24px;
}

.method-guidance {
  margin:0 0 22px;
  padding:18px 20px;
  background:#f3f7f5;
  border-left:3px solid #a7c8be;
  border-radius:0 10px 10px 0;
  color:#456c60;
}

.method-guidance h3 {
  margin:0 0 10px;
  font-size:15px;
  font-weight:600;
}

.method-guidance p {
  margin:8px 0 0;
  font-size:14px;
  line-height:1.8;
}

.method-tab {
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:40px;
  padding:8px 12px;
  border:1px solid #e0e6e3;
  border-radius:9px;
  background:#f1f3f2;
  color:#78837e;
  font-size:13px;
}

.method-tab:hover {
  border-color:#88c5b9;
}

.method-tab[aria-pressed=true] {
  border-color:#8bbfb5;
  background:#eaf6f2;
  color:var(--teal);
}

.method-tab[aria-pressed=true]::before {
  content:'✓';
}

.visual-board {
  background:linear-gradient(125deg,#f0f8f7,#fbfaf6);
  border:1px solid #e4efea;
  border-radius:15px;
  padding:26px 22px;
  margin:20px 0 12px;
}

.structure-row {
  display:grid;
  grid-template-columns:54px minmax(0,1fr) 76px;
  align-items:center;
  gap:12px;
}

.row-label {
  font-size:12px;
  color:#70857d;
}

.row-tag {
  justify-self:end;
  font-size:11px;
  background:#e8efeb;
  padding:4px 8px;
  border-radius:5px;
  color:#60756c;
  white-space:nowrap;
}

.formula {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  font-family:"Cambria Math",Georgia,"Times New Roman",serif;
  font-size:28px;
  line-height:1.3;
  white-space:nowrap;
}
.fill-formula { flex-wrap:wrap; row-gap:10px; }
.fill-group { display:inline-flex; align-items:center; gap:inherit; }
.formula.case-lines { flex-direction:column; gap:8px; font-size:24px; white-space:normal; }
.case-line { margin:0; display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; column-gap:.35em; row-gap:2px; }
.case-line > span { white-space:nowrap; }
@media(max-width:600px) { .formula.case-lines { font-size:17px; } }

.shape {
  display:inline-grid;
  place-items:center;
  vertical-align:middle;
  flex:none;
  width:58px;
  height:58px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:27px;
  line-height:1;
  font-style:italic;
  font-weight:500;
  border:2px solid var(--cyan);
  border-radius:11px;
  background:#f8fdfe;
  color:#244f54;
  padding:0;
}

.shape.circle {
  border-color:var(--orange);
  border-radius:50%;
  background:#fffcf5;
  color:#67502a;
}

button.shape {
  position:relative;
  padding-bottom:7px;
  box-shadow:0 2px 0 #d7e6e3;
  transition:box-shadow .15s,background .15s;
}

button.shape::after {
  content:'';
  position:absolute;
  bottom:7px;
  left:calc(50% - 3px);
  width:5px;
  height:5px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);
  opacity:.7;
}

button.shape:hover {
  box-shadow:0 0 0 5px #0da3bc12;
}

button.shape.circle:hover {
  box-shadow:0 0 0 5px #eaa01d18;
}

button.shape[aria-expanded=true] {
  box-shadow:0 0 0 5px #d6ece6;
}

.shape.empty {
  color:#9aaca6;
  font-size:23px;
  font-style:normal;
}

.swap-row {
  display:flex;
  justify-content:center;
  margin:14px 0;
}

.swap-button {
  display:flex;
  align-items:center;
  gap:9px;
  background:none;
  border:0;
  color:var(--muted);
  font-size:11px;
  padding:4px 9px;
}

.swap-icon {
  font-size:21px;
  color:var(--teal);
  border:1px solid #a5d1c9;
  border-radius:50%;
  height:35px;
  width:35px;
  display:grid;
  place-items:center;
  line-height:1;
}

.swap-button:hover .swap-icon {
  background:white;
  transform:rotate(180deg);
  transition:transform .25s;
}

.board-focus { margin:16px 0 0; color:var(--teal-dark); font-size:16px; font-weight:650; text-align:center; }

.board-note {
  font-size:11px;
  color:#86958f;
  margin:10px 0 0;
}

.actions {
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:22px;
}

.primary {
  padding:12px 24px;
  border-radius:10px;
  background:var(--teal);
  border:1px solid var(--teal);
  color:white;
  font-size:14px;
  font-weight:550;
  min-height:46px;
}

.primary:hover:not(:disabled) {
  background:var(--teal-dark);
}

.primary:disabled {
  background:#e8eeeb;
  border-color:#e8eeeb;
  color:#8b9a94;
  opacity:1;
}

.hint-button {
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:none;
  border:0;
  font-size:12px;
  color:#73877d;
  padding:8px 0;
}

.hint-button:hover {
  color:var(--teal);
}

.hint-button.idle-highlight {
  color:var(--teal);
  border-radius:7px;
  background:#eaf6f2;
  box-shadow:0 0 0 5px #eaf6f2;
  animation:hint-breathe 2.6s ease-in-out infinite;
}

@keyframes hint-breathe {
  0%,100% {
    background:#eaf6f2;
    box-shadow:0 0 0 4px #eaf6f2,0 0 0 0 #07847d00;
  }
  50% {
    background:#d6eee7;
    box-shadow:0 0 0 6px #d6eee7,0 0 16px 7px #07847d18;
  }
}

.idle-invitation {
  display:inline-block;
  margin-left:12px;
  color:var(--muted);
  font-size:12px;
}

.hint-icon {
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.feedback {
  font-size:13px;
  line-height:1.7;
  padding:11px 14px;
  border-radius:8px;
  background:#fff7e9;
  color:#906529;
  margin:14px 0 0;
}

.helper-feedback {
  background:#f0f6f2;
  color:#5a7467;
}

.token-picker {
  position:fixed;
  z-index:30;
  width:max-content;
  min-width:180px;
  max-width:calc(100vw - 24px);
  border:1px solid #e0e7e3;
  border-radius:12px;
  background:white;
  padding:13px;
  box-shadow:0 8px 30px #173e2d26;
}

.picker-label {
  font-size:11px;
  color:var(--muted);
}

.picker-options {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.picker-options button {
  background:#f5f8f6;
  border:1px solid #e0e8e2;
  border-radius:8px;
  flex:1 0 auto;
  min-width:45px;
  min-height:45px;
  padding:8px 12px;
  white-space:nowrap;
  font-family:Georgia,serif;
  font-size:24px;
}

.picker-options button:hover {
  border-color:var(--teal);
  background:#eaf6ef;
}

.radical {
  display:inline-flex;
  align-items:center;
  gap:0;
  font-family:"Cambria Math",Georgia,serif;
}

.root-sign {
  font-size:1.6em;
  line-height:1;
  font-weight:400;
  transform:translateY(2px);
}

.radicand {
  border-top:1.5px solid currentColor;
  padding:7px 3px 1px;
  display:inline-flex;
  align-items:center;
  gap:10px;
}

.application-board .formula {
  gap:11px;
}

.application-board .shape {
  width:48px;
  height:48px;
  font-size:24px;
}

.board-caption {
  text-align:center;
  font-size:11px;
  color:#70857d;
  margin-bottom:23px;
}

.positive-tags {
  display:flex;
  justify-content:center;
  gap:10px;
  margin-bottom:8px;
}

.positive-tags > span {
  border:1px solid #dcebe3;
  border-radius:6px;
  padding:3px 12px;
  background:white;
  font-size:12px;
  color:#557c65;
}

.equality-board .formula {
  gap:30px;
}

.equal-sign {
  color:#b78146;
  font-size:30px;
}

.completed-visual {
  padding:20px;
}

.completed-visual .shape {
  width:43px;
  height:43px;
  font-size:22px;
}

.completed-visual .formula {
  font-size:24px;
  gap:12px;
}

.structure-summary {
  display:flex;
  justify-content:center;
  gap:24px;
  flex-wrap:wrap;
  align-items:center;
}

.structure-summary .summary-item {
  display:flex;
  align-items:center;
  gap:12px;
}

.structure-summary .summary-label {
  font-family:inherit;
  font-size:11px;
  color:#70857d;
}

.reasoning {
  border-top:1px solid #edf1ee;
  margin-top:20px;
  padding-top:16px;
}

.section-label {
  font-size:10px;
  letter-spacing:.07em;
  color:#84958c;
  display:block;
  margin-bottom:10px;
}

.reasoning p {
  font-size:14px;
  line-height:1.85;
  margin:7px 0;
  color:#496056;
}

.reason-symbol {
  font-size:12px;
  color:var(--teal);
  margin-right:10px;
}

.substitution {
  background:#fffaf1;
  border:1px solid #f0e5cf;
  border-radius:12px;
  padding:19px;
  margin:14px 0;
}

.substitution .section-label {
  color:#a4824c;
}

.substitution .formula {
  font-size:24px;
}

.sum-highlight {
  border:1px solid #d9925f;
  border-radius:16px;
  background:#fff3e7;
  padding:3px 10px;
  color:#98572e;
}

.substitution-label {
  font-size:12px;
  text-align:center;
  color:#ad7947;
  margin-top:9px;
}

.calculation-flow {
  display:grid;
  grid-template-columns:1fr 20px 1fr;
  gap:8px;
  align-items:center;
  margin-top:14px;
}

.calculation-cell {
  background:#f5f8f5;
  border:1px solid #e4ece5;
  padding:12px;
  border-radius:9px;
  text-align:center;
}

.calculation-cell small {
  display:block;
  font-size:10px;
  color:#829287;
  margin-bottom:5px;
}

.calculation-cell .math {
  font-size:21px;
}

.flow-arrow {
  text-align:center;
  color:#92a298;
}

.calculation-cell.result {
  background:#eaf5ee;
  color:#287b57;
  border-color:#d3e7d9;
}

.calculation-note {
  font-size:12px;
  color:#718678;
  text-align:center;
  margin:12px 0 0;
}

.details {
  margin-top:14px;
  color:var(--muted);
  font-size:12px;
}

.details summary {
  cursor:pointer;
  padding:4px 0;
}

.details p {
  font-size:14px;
  color:#4a6057;
  margin:7px 0;
}


.completion-card {
  text-align:center;
  border:1px solid #b9d7c6;
  background:#eef7f0;
  border-radius:17px;
  padding:24px;
  margin:22px 0;
}

.completion-card .kicker {
  font-size:11px;
  color:#628776;
  letter-spacing:.1em;
}

.completion-card h2 {
  font-size:23px;
  margin:8px 0;
  color:#235c43;
}

.completion-card p {
  font-size:13px;
  color:#61836c;
  margin:0;
}

.completion-card:focus {
  outline:none;
}

.composer {
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background:#ffffffee;
  backdrop-filter:blur(15px);
  border-top:1px solid #e0e9e2;
  padding:14px 24px calc(12px + env(safe-area-inset-bottom));
  z-index:20;
  box-shadow:0 -5px 30px #27433004;
}

.composer-inner {
  max-width:776px;
  margin:auto;
}

.composer-heading {
  font-size:11px;
  color:#648075;
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:9px;
}

.focus-dot {
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--teal);
}

.input-shell {
  display:flex;
  align-items:center;
  gap:12px;
  background:#f7f9f7;
  border:1px solid #e0e8e2;
  border-radius:13px;
  padding:8px 9px 8px 16px;
}

.input-shell textarea {
  resize:none;
  min-width:0;
  flex:1;
  background:none;
  border:0;
  line-height:1.55;
  font-size:14px;
  color:#50675b;
  padding:5px 0;
  height:34px;
  max-height:70px;
}

.input-shell textarea::placeholder {
  color:#98a89f;
}

.send-button {
  width:36px;
  height:36px;
  flex:none;
  border:0;
  border-radius:10px;
  background:#adc6ba;
  padding:8px;
  color:white;
}

.send-button svg {
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

@media(max-width:600px) {
  .topbar {
    height:59px;
  }
  .topbar-inner {
    padding:0 18px;
    gap:12px;
  }
  .brand {
    font-size:18px;
  }
  .brand-mark {
    width:27px;
    height:29px;
    font-size:15px;
  }
  .demo-label {
    padding-left:12px;
    font-size:10px;
  }
  .reset-button {
    font-size:12px;
  }
  .workspace {
    padding:23px 14px calc(var(--composer-height) + 28px + env(safe-area-inset-bottom));
  }
  .eyebrow {
    font-size:10px;
    margin-bottom:12px;
  }
  .problem-card {
    padding:17px 19px 20px;
    border-radius:15px;
  }
  .problem-card p {
    font-size:17px;
  }
  .progress-track {
    margin:18px 6px;
  }
  .step-card {
    padding:20px 17px;
    border-radius:16px;
    margin-bottom:16px;
  }
  .step-heading {
    gap:9px;
    margin-bottom:23px;
  }
  .step-heading h2 {
    font-size:17px;
  }
  .step-number {
    width:27px;
    height:27px;
    font-size:12px;
  }
  .status {
    font-size:10px;
    padding:3px 7px;
  }
  .question {
    font-size:16px;
  }
  .subtext {
    font-size:12px;
    margin-bottom:18px;
  }
  .method-choice {
    padding:14px;
    font-size:14px;
    gap:12px;
  }
  .visual-board {
    padding:21px 11px;
    margin-top:18px;
    border-radius:12px;
  }
  .structure-row {
    grid-template-columns:30px minmax(0,1fr) 60px;
    gap:6px;
  }
  .row-label {
    font-size:10px;
  }
  .row-tag {
    font-size:9px;
    padding:3px 5px;
  }
  .formula {
    gap:9px;
    font-size:24px;
  }
  .shape {
    width:45px;
    height:45px;
    border-radius:9px;
    font-size:24px;
  }
  .shape.circle {
    border-radius:50%;
  }
  .swap-row {
    margin:10px 0;
  }
  .swap-button {
    font-size:10px;
    gap:6px;
  }
  .swap-icon {
    width:31px;
    height:31px;
    font-size:19px;
  }
  .application-board {
    padding:22px 8px;
  }
  .application-board .formula {
    gap:6px;
    font-size:22px;
  }
  .application-board .shape {
    width:37px;
    height:39px;
    border-radius:8px;
    font-size:21px;
  }
  .application-board .shape.circle {
    border-radius:50%;
  }
  .application-board .radicand {
    gap:5px;
    padding:5px 1px 1px;
  }
  .application-board .root-sign {
    font-size:1.6em;
  }
  .application-board .multiply {
    font-size:17px;
  }
  .actions {
    flex-wrap:wrap;
    gap:8px 16px;
    margin-top:20px;
  }
  .primary {
    flex:1 0 auto;
    white-space:nowrap;
    padding:11px 14px;
    font-size:13px;
  }
  .hint-button {
    font-size:11px;
  }
  .board-caption {
    font-size:10px;
    margin-bottom:20px;
  }
  .selected-method {
    gap:8px;
    font-size:11px;
    margin-bottom:19px;
  }
  .method-pill {
    font-size:11px;
  }
  .completed-visual .formula {
    gap:7px;
    font-size:21px;
  }
  .completed-visual .shape {
    width:35px;
    height:35px;
    font-size:20px;
  }
  .structure-summary {
    gap:14px;
  }
  .structure-summary .summary-item {
    gap:8px;
  }
  .structure-summary .summary-label {
    font-size:10px;
  }
  .substitution {
    padding:15px 10px;
  }
  .substitution .formula {
    font-size:22px;
  }
  .substitution-label {
    font-size:11px;
  }
  .reasoning p {
    font-size:13px;
  }
  .composer {
    padding:12px 16px calc(10px + env(safe-area-inset-bottom));
  }
  .input-shell {
    padding-left:12px;
  }
  .input-shell textarea {
    font-size:13px;
  }
  .completion-card h2 {
    font-size:21px;
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important;
  }
}

@media(max-width:380px) {
  .application-board .formula {
    gap:4px;
    font-size:20px;
  }
  .application-board .shape {
    width:clamp(26px,8vw,32px);
    height:35px;
    font-size:20px;
  }
  .application-board .radicand {
    gap:3px;
  }
  .application-board .multiply {
    font-size:14px;
  }
  .application-board .root-sign {
    font-size:1.5em;
  }
}

/* Conversation belongs to its lesson node; the composer stays visible. */
.node-conversation { border-top: 1px solid #e0e9e5; margin-top: 24px; padding-top: 16px; display: grid; gap: 14px; }
.chat-message { min-width: 0; max-width: 92%; padding: 12px 16px; border-radius: 12px; background: #f1f4f3; }
.chat-message.student { justify-self: end; background: #d2ebe4; color: #234f46; }
.chat-message p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; }
.chat-message .katex { white-space: normal; }
.chat-message p > span > .katex { display: inline-block; max-width: 100%; overflow-x: auto; overflow-y: hidden; vertical-align: middle; padding: 3px 0; }
.chat-message .katex-display { margin: .6em 0; padding: 4px 0; text-align: left; }
.chat-message .katex-display > .katex { text-align: left; }
.network-feedback { display: flex; align-items: center; gap: 12px; font-size: 12px; color: #627a72; }
.network-feedback:has(#network-status:empty) { display: none; }
#request-retry { border: 0; padding: 8px; background: transparent; color: #07847d; cursor: pointer; }
.send-button:not(:disabled) { background: #07847d; cursor: pointer; }
.practice-record-status { margin:16px 0; color:var(--muted); font-size:14px; line-height:1.7; }
.practice-record-status button { margin:8px 8px 0 0; padding:8px 14px; min-height:42px; border:1px solid var(--teal); border-radius:10px; background:var(--paper); color:var(--teal); }
.practice-record-status button:disabled { opacity:.6; }

/* Problem-level types and methods, one quiet line below all steps */
.kxp-bar { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin:6px 0 0; padding:16px 2px 0; border-top:1px dashed #d6e1dd; }
.kxp-bar[hidden], .kxp-reload[hidden] { display:none; }
.kxp-bar > .kxp-associations { flex:1; min-width:0; }
.kxp-bar .kxp-status { margin:0; color:var(--muted); font-size:13px; }
.kxp-bar .kxp-status:empty { display:none; }
.kxp-reload { padding:4px 14px; border:1px solid var(--line); border-radius:999px; background:var(--paper); color:var(--teal-dark); font-size:13px; cursor:pointer; }
.kxp-reload:hover { border-color:var(--teal); }
.kxp-preview-banner { margin:0 0 16px; padding:8px 14px; border:1px dashed #9fcbc4; border-radius:12px; background:#f0f8f6; color:var(--teal-dark); font-size:13px; font-weight:600; }
.step-card[aria-busy="true"] { opacity: .9; }

.conversation-history { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 14px; }
.conversation-history > summary { cursor: pointer; color: var(--muted); font-size: 13px; padding: 4px 0; }
.conversation-history > summary:hover { color: var(--teal); }
.conversation-count { margin-left: 10px; font-size: 12px; }
.conversation-history .node-conversation { margin-top: 12px; padding-top: 0; border-top: 0; }

.attempt-history-card { padding: 18px 24px; margin-bottom: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.attempt-history-card > summary { cursor: pointer; color: var(--teal-dark); font-weight: 600; }
.attempt-status { margin-left: 12px; color: var(--muted); font-size: 12px; font-weight: 400; }
.archived-node { margin-top: 24px; padding-top: 10px; border-top: 1px solid var(--line); }
.archived-node > h3 { font-size: 16px; }
.archived-position { color: var(--muted); font-size: 13px; }
.route-actions { margin: 20px 0; display: flex; flex-wrap: wrap; gap: 12px; }

/* Expressions keep stable token values; labels may contain fractions or powers. */
.shape.expression-slot { font-style:normal; }
.shape.expression-slot .katex { font-size:.78em; white-space:nowrap; }
.picker-options button:has(.katex) { min-height:56px; }
.picker-options .katex { font-size:.9em; }
.choice-preview p { margin:16px 0; }
[data-math-text] .katex-display { overflow-x:auto; overflow-y:hidden; }
@media(max-width:600px) {
  .shape.expression-slot { height:52px; }
  .application-board .shape.expression-slot { height:48px; }
  .completed-visual .shape.expression-slot { width:43px; height:48px; }
  .application-board.completed-visual .shape.expression-slot { width:37px; }
  .completed-visual > .formula[data-math-text] { font-size:18px; }
  .reasoning p[data-math-text], .details p[data-math-text] { overflow-x:auto; padding:3px 0; }
}
@media(max-width:380px) {
  .application-board.completed-visual .shape.expression-slot { width:clamp(26px,8vw,32px); }
}

/* A term can be a compound expression. Keep it inside its outline and
   wrap AM-GM between the two sides, never within a term or a radical. */
.shape.expression-slot,
.completed-visual .shape.expression-slot,
.application-board .shape.expression-slot,
.application-board.completed-visual .shape.expression-slot {
  width: max-content;
  min-width: 1.8em;
  padding-inline: 8px;
}
/* A circle stays round for short terms and becomes a pill for wide ones. */
.shape.circle.expression-slot,
.completed-visual .shape.circle.expression-slot,
.application-board .shape.circle.expression-slot,
.application-board.completed-visual .shape.circle.expression-slot {
  width: auto;
  min-width: auto;
  aspect-ratio: 1;
  border-radius: 999px;
}
.application-board .formula { flex-wrap: wrap; row-gap: 14px; }
.amgm-side { display: inline-flex; align-items: center; justify-content: center; gap: inherit; }
.function-conversion .conversion-terms { font-size:24px; gap:8px; margin:8px 0 0; }

/* Two independent symmetry judgments and ordered substitution definitions. */
.symmetry-judgments, .substitution-definitions {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.symmetry-judgments { margin-top:20px; }
.symmetry-judgment { text-align:center; color:var(--muted); }
.judgment-options { display:flex; gap:8px; margin-top:10px; }
.judgment-options button { flex:1; min-height:44px; padding:8px 12px; border:1px solid var(--line); border-radius:10px; background:var(--paper); color:var(--ink); }
.judgment-options button[aria-pressed="true"] { border-color:var(--teal); color:var(--teal); background:#eaf6f2; }

/* Swap check: each row shows an expression, its x↔y swap and its own judgment. */
.sym-check { margin:20px 0 12px; border:1px solid #e4efea; border-radius:15px; background:linear-gradient(125deg,#f0f8f7,#fbfaf6); }
.sym-check.completed-visual { padding:0; }
.sym-row { display:grid; grid-template-columns:36px minmax(0,1fr) auto; grid-template-areas:"label exprs judge"; align-items:center; gap:16px; padding:18px 20px; }
.sym-row + .sym-row { border-top:1px solid #e4efea; }
.sym-label { grid-area:label; font-size:12px; color:#70857d; }
.sym-exprs { grid-area:exprs; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; justify-items:center; gap:14px; min-width:0; font-size:20px; }
.sym-expr { white-space:nowrap; }
.sym-arrow { display:inline-flex; align-items:center; gap:4px; padding:2px 10px; border:1px solid #e1ebe6; border-radius:999px; background:#fff; color:#9aaba5; font-size:15px; }
.sym-arrow i { font-family:KaTeX_Math,"Times New Roman",serif; font-size:15px; }
.sym-x { color:#087f79; }
.sym-y { color:#c27a0e; }
.sym-row > .judgment-options, .sym-verdict { grid-area:judge; }
.sym-check .judgment-options { gap:2px; margin:0; padding:3px; border-radius:11px; background:#e6eeeb; }
.sym-check .judgment-options button { flex:1; min-width:64px; min-height:38px; padding:6px 14px; border:0; border-radius:8px; background:transparent; color:#5f736d; font-size:14px; transition:background .15s, color .15s, box-shadow .15s; }
.sym-check .judgment-options button:hover { color:var(--ink); }
.sym-check .judgment-options button[aria-pressed="true"] { background:#fff; color:var(--teal); font-weight:600; box-shadow:0 1px 3px rgba(20,50,45,.16); }
.sym-verdict { padding:4px 12px; border-radius:999px; background:#e5f2ef; color:var(--teal); font-size:13px; font-weight:600; white-space:nowrap; }
.sym-verdict::before { content:'✓ '; }
@media(max-width:760px) {
  .sym-row { grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"label label" "exprs exprs" "judge judge"; gap:10px; padding:16px; }
  .sym-row:has(.sym-verdict) { grid-template-areas:"label judge" "exprs exprs"; }
  .sym-verdict { justify-self:end; }
}
@media(max-width:600px) {
  .symmetry-judgments, .substitution-definitions { grid-template-columns:minmax(0,1fr); }
  .sym-exprs { gap:8px; font-size:17px; }
  .sym-arrow { padding:2px 7px; }
}
@media(max-width:380px) {
  .sym-row { padding:14px 12px; }
  .sym-exprs { gap:6px; }
  .sym-arrow { padding:1px 5px; font-size:13px; }
}
@media(max-width:360px) {
  .sym-exprs { grid-template-columns:minmax(0,1fr); gap:10px; }
}

/* Identify degrees before applying a scoped, authored rewrite. */
.degree-total { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:16px 0; color:var(--teal); }

/* Degree check laid out as target × condition = product; each column is label / expression / degree. */
.deg-board { padding:22px 18px 18px; }
.deg-equation { display:flex; justify-content:center; align-items:flex-start; gap:8px 12px; }
.deg-split { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:4px 6px; margin-bottom:20px; padding-bottom:16px; border-bottom:1px dashed #cfe1dc; font-size:16px; color:var(--ink); }
.deg-split-label { font-size:12px; color:#70857d; }
.deg-factor { display:flex; flex:1 1 0; flex-direction:column; align-items:center; gap:8px; min-width:0; }
.deg-label { height:20px; font-size:12px; line-height:20px; color:#70857d; white-space:nowrap; }
.deg-target .deg-label { color:#0a8197; }
.deg-condition .deg-label { color:#b0730c; }
.deg-expr, .deg-total-value { display:flex; align-items:center; justify-content:center; height:72px; font-size:24px; white-space:nowrap; }
.deg-degree, .deg-total-sum { display:flex; align-items:center; justify-content:center; gap:8px; height:46px; white-space:nowrap; }
.deg-degree-label { font-size:12px; color:#8a9b95; }
.deg-op { display:flex; align-items:center; height:72px; margin-top:28px; color:var(--teal); font-size:22px; }
.deg-total { display:contents; }
.deg-total-value { color:var(--teal); font-size:26px; font-weight:600; }
.deg-total-value.pending { color:#a9b8b3; font-weight:400; }
.deg-total-sum { color:#5f736d; font-size:14px; }
.deg-board .shape, .deg-board .shape.expression-slot { height:44px; font-size:20px; }
.deg-board .shape:not(.expression-slot) { width:44px; }
.deg-badge { display:inline-grid; place-items:center; min-width:44px; height:36px; padding:0 10px; border:2px solid var(--cyan); border-radius:9px; background:#f8fdfe; color:#244f54; font-size:16px; font-weight:600; }
.deg-condition .deg-badge { border-color:var(--orange); border-radius:999px; background:#fffcf5; color:#67502a; }
.deg-sep { align-self:stretch; margin:0 6px; border-left:1px dashed #cfe1dc; }
.rewrite-scopes { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0; }
.rewrite-scopes button { flex:1 1 120px; padding:12px; min-height:48px; border:1px solid var(--line); border-radius:10px; background:var(--paper); color:var(--ink); }
.rewrite-scopes button[aria-pressed="true"] { border-color:var(--teal); color:var(--teal); background:#eaf6f2; }
.rewrite-equation, .rewrite-result, .rewrite-focus { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; }
.rewrite-equation { margin:18px 0; font-size:24px; }
.rewrite-focus { padding:10px; border:1px dashed #8bbfb7; border-radius:12px; }
.rewrite-equation > [data-math-text] { max-width:100%; overflow-x:auto; }
/* Pieces laid out between slots are short; tall delimiters would otherwise trigger a scrollbar. */
.rewrite-equation:has(> .shape) > [data-math-text]:not(.shape) { overflow:visible; }

/* Rewrite: the source expression is the scope picker; the chosen part is rewritten on the next line. */
.rw-board { display:flex; flex-direction:column; align-items:center; gap:12px; padding:20px 18px 22px; }
.rw-caption { font-size:12px; color:#70857d; }
.rw-source { position:relative; display:inline-flex; margin-top:10px; padding:24px 22px 18px; }
.rw-target { font:inherit; color:inherit; background:none; cursor:pointer; }
/* The whole-scope button fills the frame beneath the term buttons: clicks on the frame's gaps select the whole. */
.rw-whole { position:absolute; inset:0; z-index:0; padding:0; border:1.5px dashed #b9d3cc; border-radius:18px; transition:border-color .15s, background .15s; }
.rw-legend { position:absolute; top:0; left:50%; transform:translate(-50%,-50%); padding:2px 12px; border:1px solid #cfe1dc; border-radius:999px; background:#fff; color:#6f8680; font-size:12px; line-height:1.5; white-space:nowrap; transition:background .15s, color .15s, border-color .15s; }
.rw-whole:hover { border-color:var(--teal); background:rgba(255,255,255,.55); }
.rw-whole:hover .rw-legend { border-color:var(--teal); color:var(--teal); }
.rw-whole[aria-pressed="true"] { border-style:solid; border-color:var(--teal); background:#eaf6f2; }
.rw-whole[aria-pressed="true"] .rw-legend { border-color:var(--teal); background:var(--teal); color:#fff; font-weight:600; }
.rw-terms { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:10px; font-size:24px; pointer-events:none; }
.rw-term { padding:6px 12px; border:1.5px dashed #b9d3cc; border-radius:12px; pointer-events:auto; transition:border-color .15s, background .15s; }
.rw-term:hover { border-color:var(--teal); background:#fff; }
.rw-term[aria-pressed="true"] { border-style:solid; border-color:var(--teal); background:#eaf6f2; }
.rw-source:has(.rw-whole[aria-pressed="true"]) .rw-term:not(:hover) { border-color:transparent; }
.rw-op, .rw-eq, .rw-times { font-family:KaTeX_Main,"Times New Roman",serif; }
.rw-eq, .rw-times { color:var(--teal); }
.rw-preview-label { flex-basis:100%; text-align:center; font-size:13px; color:var(--muted); }
.rewrite-calculation { margin-top:24px; border-top:1px solid var(--line); padding-top:20px; }
.rewrite-calculation-math { padding:16px 20px; border-radius:12px; background:var(--page); }
.rewrite-calculation-math p { margin:10px 0; overflow-x:auto; padding:4px 0; }
.rewrite-calculation-feedback { margin-top:12px; color:var(--muted); font-size:15px; line-height:1.7; }
.rewrite-calculation-feedback p { margin:4px 0; }
.rw-result { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; min-height:64px; font-size:22px; }
.rw-focus { display:inline-flex; align-items:center; gap:10px; padding:6px 10px; border:1.5px dashed #8bbfb7; border-radius:12px; background:#fff; }
.rw-placeholder { padding:10px 16px; border:1.5px dashed #cfe1dc; border-radius:12px; color:#9aaba6; font-size:14px; }
/* Authored fraction, so a part inside a numerator or denominator (e.g. the 1 in 1/x) can be its own target. */
.rw-frac { display:inline-flex; flex-direction:column; align-items:center; vertical-align:middle; line-height:1.2; }
.rw-frac > :first-child { margin-bottom:3px; }
.rw-frac > :last-child { align-self:stretch; padding:3px 4px 0; border-top:1.5px solid currentColor; text-align:center; }
/* Substitution: click a part of the target to name it; the authored table below translates condition, range and target. */
.sub-board { display:flex; flex-direction:column; align-items:center; gap:12px; padding:20px 18px 22px; }
.sub-caption { font-size:12px; color:#70857d; }
.sub-source { display:inline-flex; align-items:center; gap:12px; padding:4px 12px 30px; font-family:KaTeX_Main,"Times New Roman",serif; font-size:26px; line-height:1.2; }
.sub-source var { font-family:KaTeX_Math,"Times New Roman",serif; font-style:italic; }
.sub-frac { display:inline-flex; flex-direction:column; align-items:center; }
.sub-frac > :first-child { margin-bottom:4px; }
.sub-frac > :last-child { align-self:stretch; display:flex; justify-content:center; padding:5px 2px 0; border-top:1.5px solid currentColor; }
/* The frame button lies beneath the parts it contains, so a click on its gaps selects the whole chunk. */
.sub-chunk { position:relative; display:inline-flex; padding:4px 9px; }
.sub-frame, .sub-leaf { font:inherit; color:inherit; cursor:pointer; transition:border-color .15s, background .15s; }
.sub-frame { position:absolute; inset:0; z-index:0; padding:0; border:1.5px dashed #b9d3cc; border-radius:10px; background:none; }
.sub-inner { position:relative; z-index:1; display:inline-flex; align-items:baseline; pointer-events:none; }
.sub-leaf { position:relative; padding:0 3px; border:1.5px dashed #cfdfda; border-radius:7px; background:none; pointer-events:auto; }
.sub-bin { margin:0 .22em; }
.sub-rest .sub-bin { margin:0 .16em 0 .12em; }
.sub-frame:hover, .sub-leaf:hover { border-color:var(--teal); background:rgba(255,255,255,.7); }
.sub-frame[aria-pressed="true"], .sub-leaf[aria-pressed="true"] { border-style:solid; border-color:var(--teal); background:#eaf6f2; }
.sub-chunk:has(.sub-frame[aria-pressed="true"]) .sub-leaf:not(:hover) { border-color:transparent; }
.sub-tag { position:absolute; top:calc(100% + 7px); left:50%; transform:translateX(-50%); min-width:26px; padding:0 8px; border-radius:999px; background:var(--teal); color:#fff; font:italic 17px/24px KaTeX_Math,"Times New Roman",serif; text-align:center; pointer-events:none; }
.sub-tag::before { content:''; position:absolute; bottom:100%; left:50%; width:1.5px; height:7px; background:var(--teal); }
.sub-pending { margin:0; padding:10px 16px; border:1.5px dashed #cfe1dc; border-radius:12px; color:#9aaba6; font-size:14px; }
.sub-table { display:grid; grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:10px 14px; width:100%; max-width:520px; padding:14px 18px 16px; border:1px solid #dbe9e4; border-radius:14px; background:#fff; }
.sub-head, .sub-row { display:contents; }
.sub-def { grid-column:1 / -1; justify-self:center; padding:3px 14px; border-radius:999px; background:#eaf6f2; color:var(--teal); font-size:15px; }
.sub-head > span { font-size:12px; color:#8a9b95; text-align:center; }
.sub-label { font-size:12px; color:#70857d; white-space:nowrap; }
.sub-row > [data-math-text] { font-size:19px; text-align:center; white-space:nowrap; }
.sub-arrow { color:var(--teal); font-size:22px; line-height:1; text-align:center; }
@media(max-width:600px) {
  .sub-board { padding:16px 12px 18px; }
  .sub-source { gap:8px; padding:4px 6px 28px; font-size:22px; }
  .sub-table { grid-template-columns:auto auto auto; justify-content:center; gap:4px 8px; padding:12px 10px 14px; }
  .sub-head > :first-child { display:none; }
  .sub-label { grid-column:1 / -1; margin-top:6px; padding-top:6px; border-top:1px dashed #e1ece8; font-size:11px; }
  .sub-row > [data-math-text] { font-size:16px; }
  .sub-arrow { font-size:18px; }
}
@media(max-width:380px) {
  .sub-board { padding:14px 8px 16px; }
  .sub-table { gap:4px 6px; padding:10px 6px 12px; }
  .sub-row > [data-math-text] { font-size:13px; }
}
@media(max-width:600px) {
  .deg-board { padding:16px 12px 14px; }
  .deg-equation { flex-wrap:wrap; }
  .deg-expr { height:60px; font-size:19px; }
  .deg-op { height:60px; font-size:20px; }
  .deg-op-equal { display:none; }
  .deg-result { flex:1 0 100%; flex-direction:row; flex-wrap:wrap; justify-content:center; gap:4px 12px; margin-top:6px; padding-top:12px; border-top:1px dashed #cfe1dc; }
  .deg-result .deg-label, .deg-result .deg-total-value, .deg-result .deg-total-sum { height:auto; }
  .deg-result .deg-total-value { font-size:22px; }
  .deg-sep { display:none; }
  .deg-board-terms .deg-condition { flex:1 0 100%; margin-top:6px; padding-top:12px; border-top:1px dashed #cfe1dc; }
  .rewrite-equation { font-size:18px; gap:8px; }
  .rw-board { padding:16px 12px 18px; }
  .rw-source { padding:22px 14px 14px; }
  .rw-terms { gap:8px; font-size:20px; }
  .rw-term { padding:5px 10px; }
  .rw-result { gap:8px; font-size:19px; }
  .rw-focus { gap:8px; padding:4px 8px; }
  .rewrite-focus, .rewrite-result { gap:8px; }
}

/* Shared reasoning boards: method prerequisites and graph comparisons. */
.checklist { margin:16px 0 4px; border:1px solid #d6e6e1; border-radius:16px; background:#fbfdfc; overflow:hidden; }
.checklist-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px; border-bottom:1px solid #e3ede9; background:#f1f8f5; }
.checklist-title { color:var(--teal-dark); font-size:14px; font-weight:700; letter-spacing:.04em; }
.checklist-progress { color:var(--muted); font-size:12.5px; font-variant-numeric:tabular-nums; }
.checklist-row { display:grid; grid-template-columns:28px 1fr; gap:12px; padding:16px 18px; }
.checklist-row + .checklist-row { border-top:1px dashed #dbe7e3; }
.checklist-index { display:grid; place-items:center; width:26px; height:26px; margin-top:1px; border:1.5px solid #bcd3cc; border-radius:50%; background:#fff; color:var(--muted); font-size:13px; font-weight:700; }
.checklist-row.answered .checklist-index { border-color:var(--teal); background:var(--teal); color:#fff; }
.checklist-body { min-width:0; }
.checklist-label { margin:0; font-size:16px; font-weight:650; }
.checklist-hint { margin:2px 0 0; color:var(--muted); font-size:13.5px; }
.checklist-options { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.checklist-options button { min-height:42px; padding:8px 16px; border:1px solid var(--line); border-radius:999px; background:var(--paper); color:var(--ink); font-size:14.5px; transition:border-color .15s, background .15s, color .15s; }
.checklist-options button:hover { border-color:#9fcfc5; }
.checklist-options button[aria-pressed="true"] { border-color:var(--teal); background:#eaf6f2; color:var(--teal-dark); font-weight:600; }
.checklist-note { margin:10px 0 0; padding:8px 12px; border-left:3px solid #9fcfc5; border-radius:0 8px 8px 0; background:#f3f8f6; color:#4d615c; font-size:13.5px; }
.checklist-done .checklist-row { padding:12px 18px; }
.checklist-done .checklist-label { font-size:15px; }
.checklist-verdict { position:relative; margin:0; padding:12px 18px 12px 50px; border-top:1px solid #d6e6e1; background:var(--teal); color:#fff; font-size:15px; font-weight:650; line-height:1.6; }
.checklist-verdict::before { content:"✓"; position:absolute; left:18px; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.22); font-size:13px; }
@media(max-width:600px) {
  .checklist-head, .checklist-row, .checklist-verdict { padding-left:14px; padding-right:14px; }
  .checklist-verdict { padding-left:46px; }
  .checklist-verdict::before { left:14px; }
  .checklist-row { grid-template-columns:24px 1fr; gap:10px; }
  .checklist-index { width:24px; height:24px; }
  .checklist-options button { flex:1 1 auto; padding:8px 12px; }
}
.graph-comparison { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:16px; margin:20px 0; }
.graph-comparison .quadratic-graph { width:100%; max-width:380px; justify-self:center; }
.graph-comparison .quadratic-graph figcaption { font-size:12.5px; }
.axis-explorer { display:grid; gap:6px; width:100%; max-width:440px; margin:0 auto; }
.axis-explorer svg:not(.katex *) { display:block; width:100%; height:auto; cursor:ew-resize; touch-action:pan-y; user-select:none; }
.axis-slider { justify-self:center; width:min(100%,320px); accent-color:#b6782c; }
.graph-cases { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:16px 0 0; }
.graph-case { margin:0; padding:8px 8px 10px; border:1px solid #cfe3dd; border-radius:14px; background:#fff; }
.graph-case svg:not(.katex *) { display:block; width:100%; height:auto; }
.graph-case figcaption { display:grid; justify-items:center; gap:2px; text-align:center; }
.graph-case-name { font-size:14px; font-weight:700; }
.graph-case-fact { color:var(--muted); font-size:12.5px; }
.graph-case-verdict { margin-top:4px; padding:2px 10px; border-radius:999px; background:#e3f3ee; color:var(--teal-dark); font-size:12px; font-weight:650; }
.graph-case.rejected { border-color:#ecd5ce; background:#fdf8f6; }
.graph-case.rejected svg { opacity:.72; }
.graph-case.rejected .graph-case-verdict { background:#f8e4de; color:#a8432f; }
.graph-case-delta { font-size:15px; font-weight:650; color:var(--teal-dark); }
.graph-case.excluded { border-color:#e3e8e6; background:#f6f8f7; }
.graph-case.excluded svg { opacity:.45; }
.graph-case.excluded .graph-case-name, .graph-case.excluded .graph-case-delta { color:var(--muted); }
.graph-case.excluded .graph-case-verdict { background:#eceff0; color:var(--muted); }
.graph-case.included { border-color:var(--teal); box-shadow:inset 0 0 0 1px var(--teal); }
.case-merge { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:8px; align-items:start; margin:14px 0 0; }
.case-merge-group { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; padding:6px; border:1.5px solid var(--teal); border-radius:14px; background:#eef8f5; }
.case-merge-cell { display:grid; justify-items:center; gap:2px; padding:8px 4px; border:1px solid #d6e6e1; border-radius:10px; background:#fff; }
.case-merge-name { color:var(--muted); font-size:13px; text-align:center; }
.case-merge-value { font-size:17px; font-weight:650; color:var(--teal-dark); white-space:nowrap; }
.case-merge-group:only-child { grid-column:1/-1; }
.case-merge-group:has(> .case-merge-cell:nth-child(3)) { grid-template-columns:repeat(3,minmax(0,1fr)); }
.case-merge:has(> .case-merge-cell.rejected + .case-merge-cell.rejected) { grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr)); }
.case-merge-group:has(> .case-merge-cell:first-child + .case-merge-total) { grid-template-columns:minmax(0,1fr); }
.case-merge-group:has(> .case-merge-cell:first-child + .case-merge-total) .case-merge-total { white-space:nowrap; }
.case-merge-total { grid-column:1/-1; padding:2px 0; color:var(--teal-dark); font-size:14.5px; font-weight:700; text-align:center; }
.case-merge-cell.rejected { margin-top:7px; border-color:#ecd5ce; background:#fdf8f6; }
.case-merge-cell.rejected .case-merge-value { color:#a8432f; }
.case-merge-out { color:#a8432f; font-size:12px; font-weight:650; }
.case-merge-caption { margin:14px 0 0; color:var(--muted); font-size:13px; text-align:center; }
.case-merge-caption + .case-merge { margin-top:6px; }
.graph-cases-verdict { margin:10px 0 0; padding:12px 16px; border-radius:12px; background:#eaf6f2; color:var(--teal-dark); font-size:15px; font-weight:650; text-align:center; }
@media(max-width:600px) {
  .graph-cases { gap:6px; }
  .graph-case { padding:6px 4px 8px; border-radius:10px; }
  .graph-case-name { font-size:12px; white-space:nowrap; }
  .graph-case-fact { font-size:11.5px; }
  .case-merge-total { font-size:13.5px; }
  .case-merge { grid-template-columns:minmax(0,2.4fr) minmax(0,1fr); }
  .case-merge-value { font-size:15px; }
  .graph-case-verdict { padding:1px 8px; font-size:11px; }
  .graph-cases-verdict { font-size:14px; }
  .graph-case-delta { font-size:13px; }
}

/* Knowledge tips: a chip on the step heading, a link under wrong-answer feedback, and the sheet itself. */
.step-heading .tip-chip { margin-left:auto; }
.step-heading .tip-chip + .status { margin-left:0; }
.tip-chip { display:inline-flex; flex:none; align-items:center; gap:5px; min-height:28px; padding:3px 10px 3px 8px; border:1px solid #cfe3de; border-radius:999px; background:#eef7f4; color:var(--teal-dark); font:inherit; font-size:12.5px; font-weight:600; white-space:nowrap; cursor:pointer; transition:background .15s,color .15s,border-color .15s; }
.tip-chip:hover { border-color:var(--teal); background:var(--teal); color:#fff; }
.tip-link { display:inline-block; margin:10px 0 0; padding:0; border:0; background:none; color:var(--teal-dark); font:inherit; font-size:13.5px; font-weight:600; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.tip-link:hover { color:var(--teal); }
.tip-chip:focus-visible, .tip-link:focus-visible { outline:3px solid #82cfc7; outline-offset:2px; }
@media(max-width:600px) {
  .step-heading .tip-chip { padding:3px 8px 3px 7px; font-size:12px; }
}
@media(max-width:380px) {
  .step-heading .tip-chip svg { display:none; }
}