:root {
    /* Light, printable palette (clean in black & white) */
    --ink: #243038;          /* body text / secondary structure */
    --ink-strong: #11181d;   /* headings / emphasis */
    --board-bg: #ffffff;
    --board-bg-2: #eef1ee;   /* board frame */
    --accent: #c2620f;       /* arrows / highlights (dark amber) */
    --line: #0f766e;         /* shapes / borders (teal) */
  }
  * { box-sizing: border-box; }
  /* Visually hidden until focused (Tab from page load) — same pattern as
     brand.css's .skip-link, duplicated here since app.html doesn't load
     brand.css (see the app.html CLAUDE.md note on why the two are kept
     separate). Lets a keyboard user jump straight past the icon-heavy
     header toolbar into the lesson content. */
  .skip-link {
    position: absolute;
    top: -48px;
    left: 8px;
    z-index: 1000;
    padding: 10px 18px;
    border-radius: 8px;
    background: var(--ink-strong);
    color: #fff;
    font: 700 13px/1 "Inter", sans-serif;
    text-decoration: none;
    transition: top 0.15s ease;
  }
  .skip-link:focus { top: 8px; }
  body {
    margin: 0;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #f8fafc;
    color: #1f2937;
    height: 100vh;
    display: flex;
    flex-direction: column;
  }
  header {
    min-height: 64px;
    padding: 10px 22px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(214, 220, 230, 0.62);
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(18px);
    box-shadow: 0 10px 34px rgba(31, 41, 55, 0.06);
    z-index: 50;
  }
  header h1 {
    display: flex;
    align-items: center;
    margin: 0 auto 0 0;
  }
  header h1 a { display: flex; align-items: center; text-decoration: none; }
  header h1 img {
    display: block;
    height: 70px;
    width: auto;
  }
  .header-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
  .lang-toggle {
    display: flex; align-items: center; gap: 2px;
    height: 30px; padding: 2px; border-radius: 999px; background: #f4f7fb;
  }
  .lang-toggle-btn {
    height: 26px; padding: 0 12px; border: none; background: none;
    border-radius: 999px; font: 700 12px/1 "Inter", sans-serif; color: #64748b;
    cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  }
  .lang-toggle-btn:hover { color: #172033; }
  .lang-toggle-btn.active {
    background: linear-gradient(135deg, #12e0c6 0%, #3e9bfd 33%, #8b5cf6 66%, #f924c2 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.35);
  }
  .header-actions .icon-btn {
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #64748b; transition: background 0.15s, color 0.15s;
  }
  .header-actions .icon-btn:hover { background: #f4f7fb; color: #172033; }
  .header-actions .icon-btn svg { width: 18px; height: 18px; }
  /* PDF notes only make sense once a lesson/whiteboard is actually up —
     hidden on the landing screen, revealed by the same .visible toggle
     lesson-session.js uses for the toolbar/quickReplies (connect/endLesson).
     ":not(.visible)" (not a plain "#notesBtn { display:none }") on purpose:
     drawer.css loads after this file and sets #notesBtn to display:flex
     unconditionally, so an equal-specificity rule here would lose to it
     regardless of load order; the extra :not() raises this selector's
     specificity so it wins. Applies at every viewport width, not just
     mobile — see the (now redundant) mobile-only version below this used
     to be. */
  #notesBtn:not(.visible) { display: none; }
  .user-menu { position: relative; }
  .user-menu-btn {
    display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 14px;
    border-radius: 999px; border: none; background: #f4f7fb; color: #172033;
    font: 700 13px/1 "Inter", sans-serif; cursor: pointer; white-space: nowrap;
    max-width: 220px; transition: background 0.15s;
  }
  .user-menu-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .user-menu-btn:hover { background: #e9eef5; }
  .user-menu-chevron { width: 14px; height: 14px; flex: none; transition: transform 0.15s ease; }
  .user-menu.open .user-menu-chevron { transform: rotate(180deg); }
  .user-menu-dropdown {
    position: absolute; top: calc(100% + 8px); right: 0; min-width: 180px;
    background: #fff; border-radius: 12px; padding: 6px;
    border: 1px solid rgba(214, 220, 230, 0.62);
    box-shadow: 0 10px 34px rgba(31, 41, 55, 0.16); z-index: 60;
  }
  .user-menu-item {
    display: block; width: 100%; box-sizing: border-box; padding: 9px 12px;
    border: none; background: none; border-radius: 8px; text-align: left;
    font: 600 13px/1.3 "Inter", sans-serif; color: #243038; text-decoration: none; cursor: pointer;
  }
  .user-menu-item:hover { background: #f4f7fb; }
  .plan-badge-link {
    display: flex; align-items: center; height: 30px; padding: 0 12px;
    border-radius: 999px; font: 700 12px/1 "Inter", sans-serif; text-decoration: none;
    white-space: nowrap;
  }
  .plan-badge-link.is-free { background: #f4f7fb; color: #64748b; }
  .plan-badge-link.is-paid {
    background: linear-gradient(135deg, #12e0c6 0%, #3e9bfd 33%, #8b5cf6 66%, #f924c2 100%);
    color: #fff;
  }

  /* points badge: header pill, mirrors plan-badge-link's sizing */
  .points-badge {
    position: relative;
    display: flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px;
    border-radius: 999px; background: rgba(253, 177, 58, 0.14); color: #b4750f;
    font: 800 13px/1 "Inter", sans-serif; text-decoration: none;
    white-space: nowrap; transition: transform 0.15s ease;
  }
  .points-badge svg { width: 15px; height: 15px; }
  .points-badge.points-bump { transform: scale(1.12); }
  .daily-quest-badge {
    position: relative; display: flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px;
    border-radius: 999px; background: rgba(18, 224, 198, 0.12); color: #0f766e;
    font: 800 12px/1 "Inter", sans-serif; text-decoration: none; white-space: nowrap;
  }
  .daily-quest-badge svg { width: 15px; height: 15px; }
  .daily-quest-badge.complete { background: #dcfce7; color: #15803d; }
  .daily-quest-badge.quest-bump { animation: quest-badge-bump 0.55s ease; }
  .voice-minutes-badge {
    position: relative; display: flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px;
    border-radius: 999px; background: rgba(62, 155, 253, 0.12); color: #1d6fd1;
    font: 800 12px/1 "Inter", sans-serif; white-space: nowrap;
  }
  .voice-minutes-badge svg { width: 14px; height: 14px; }
  .voice-minutes-badge.low { background: rgba(220, 38, 38, 0.12); color: #b91c1c; }
  .quest-toast {
    position: absolute; top: 34px; left: 50%; transform: translateX(-50%);
    width: max-content; max-width: min(220px, 70vw); padding: 8px 10px;
    border-radius: 8px; background: #0f766e; color: #fff;
    box-shadow: 0 10px 24px rgba(10, 25, 48, 0.2);
    font: 800 11px/1.3 "Inter", sans-serif; pointer-events: none;
    animation: quest-toast-in 2.4s ease forwards;
  }
  @keyframes quest-badge-bump { 45% { transform: scale(1.14); } }
  @keyframes quest-toast-in {
    0% { opacity: 0; transform: translate(-50%, -5px); }
    12%, 75% { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, -5px); }
  }
  .points-toast {
    position: absolute; top: -4px; left: 50%; transform: translateX(-50%);
    font: 800 12px/1 "Inter", sans-serif; color: #fdb13a;
    white-space: nowrap; pointer-events: none;
    animation: points-float 0.9s ease-out forwards;
  }
  @keyframes points-float {
    0% { opacity: 0; transform: translate(-50%, 4px); }
    20% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -22px); }
  }
  #statusDot {
    width: 9px; height: 9px; border-radius: 50%;
    background: #a9b0bd;
    transition: background 0.2s;
    box-shadow: 0 0 0 4px rgba(169, 176, 189, 0.14);
  }
  #statusDot.connected { background: #10b981; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.14); }
  #statusDot.listening { background: #3b82f6; box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.16); }
  #statusDot.speaking { background: #f97316; box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.16); }
  #statusText {
    font-size: 13px;
    color: #64748b;
    padding: 6px 10px;
    border-radius: 999px;
    background: #f4f7fb;
  }
  .app-defaults { display: none !important; }

  main {
    flex: 1;
    position: relative;
    overflow: hidden;
  }

  #boardWrap {
    position: absolute;
    inset: 0;
    background: var(--board-bg-2);
    padding: 24px;
    display: flex;
    flex-direction: column;
    transition: left .25s ease;
  }
  /* room for the lesson reel sidebar (controls.css) when it's open */
  #lessonReel.visible ~ #boardWrap { left: 96px; }
  #lessonReel.visible.collapsed ~ #boardWrap { left: 40px; }
  #board {
    flex: 1;
    width: 100%;
    background: var(--board-bg);
    border: 1px solid #e2e4e0;
    border-radius: 10px;
    padding: 26px 30px;
    overflow: auto; /* wide floating canvas scrolls both ways; camera follows the pencil */
    color: var(--ink);
    font-family: "Caveat", cursive;
    position: relative;
  }
  /* scrolling stays fully functional (wheel/touch/drag/D-pad); the track is
     just not drawn, since the "Follow me" pill + nav pad are the intended way
     to see where you are on the wide canvas. */
  #board { scrollbar-width: none; -ms-overflow-style: none; }
  #board::-webkit-scrollbar { display: none; }

  #learnerQuestionBar {
    position: relative;
    z-index: 12;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    margin: 0 10px -1px;
    padding: 11px 120px 12px 16px;
    border: 1px solid #d8ded9;
    border-bottom-color: rgba(15,118,110,0.38);
    border-radius: 8px 8px 0 0;
    background: rgba(250,252,250,0.96);
    box-shadow: 0 5px 16px rgba(36,48,56,0.08);
  }
  #learnerQuestionBar[hidden] { display: none; }
  #learnerQuestionLabel {
    margin-top: 3px;
    padding: 4px 8px;
    border-radius: 5px;
    background: rgba(15,118,110,0.09);
    color: #0f766e;
    font: 800 10px/1 "Inter", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }
  #learnerQuestionText {
    min-width: 0;
    margin: 0;
    color: var(--ink-strong);
    font: 700 22px/1.25 "Caveat", cursive;
    overflow-wrap: anywhere;
  }
  .learner-question-char { opacity: 0; transition: opacity 70ms linear; }
  .learner-question-char.in { opacity: 1; }

  /* A quiet eye-following cue while the pencil works on the current block. */
  .board-active-focus {
    position: relative;
    z-index: 3;
    border-radius: 6px;
    outline: 3px solid rgba(29,78,216,0.20);
    outline-offset: 6px;
    animation: boardFocusPulse 1.15s ease-in-out infinite;
  }
  @keyframes boardFocusPulse {
    0%, 100% { outline-color: rgba(29,78,216,0.14); background-color: rgba(29,78,216,0.015); }
    50% { outline-color: rgba(194,98,15,0.34); background-color: rgba(194,98,15,0.045); }
  }

  #boardTitle, .board-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--ink-strong);
    margin: 0 0 4px;
    letter-spacing: 0.3px;
    font-family: "Caveat", cursive;
  }
  #boardTitleRule, .board-title-rule { display: block; margin-bottom: 18px; height: 14px; }

  #boardCols, .board-cols {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: flex-start;
  }
  /* live board only: airy studdyai-style canvas, wider than the viewport for
     multi-column boards (--board-min-w set in buildBoard) */
  #boardCols {
    min-width: var(--board-min-w, 0px);
    gap: 56px;
  }
  .board-col {
    flex: 1 1 240px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  /* progressive reveal */
  .reveal { opacity: 0; transform: translateY(6px); transition: opacity .45s ease, transform .45s ease; }
  .reveal.in { opacity: 1; transform: none; }

  /* chalk-stroke draw-in: paths animate from hidden to fully stroked (see
     animateStrokes() in whiteboard.js, which sets stroke-dasharray/offset). */
  @keyframes roughDraw { to { stroke-dashoffset: 0; } }

  /* live handwriting (chalk pencil writer in whiteboard.js): characters are
     wrapped in .wchar spans and switched on one by one while #boardPencil
     rides the leading edge. .wword keeps words unbreakable so wrapping
     doesn't change line layout mid-write. */
  .wword { white-space: nowrap; }
  .wchar { visibility: hidden; }
  .wchar.on { visibility: visible; }

  #boardPencil {
    position: absolute;
    top: 0; left: 0;
    width: 30px; height: 30px;
    z-index: 40;
    pointer-events: none;
    opacity: 0;
    transition: opacity .22s ease, transform 60ms linear;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.18));
  }
  #boardPencil.show { opacity: 1; }
  #boardPencil svg { width: 100%; height: 100%; animation: pencilWobble 0.42s ease-in-out infinite; transform-origin: 15% 85%; }
  @keyframes pencilWobble { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-3.5deg); } }

  /* teacher circles a term on the board (circleHighlightTerm()), then the
     ring fades out on its own a few seconds later */
  .board-highlight-circle {
    position: absolute;
    pointer-events: none;
    z-index: 30;
    overflow: visible;
    transition: opacity .9s ease;
  }
  .board-highlight-circle.fade { opacity: 0; }

  /* Google-Maps-style pan control: 4 arrows around an empty center, sitting
     just above the message bar's keyboard icon. Transparent background (no
     card) — the arrows carry their own weight via the bold logo-gradient
     fill, matching header h1::before's gradient. Panning here counts as
     manual scroll, same as wheel/touch. */
  #boardNavPad {
    position: absolute;
    right: 24px;
    bottom: 78px;
    z-index: 31;
    width: 104px;
    height: 104px;
    display: none;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    background: transparent;
    padding: 4px;
    gap: 2px;
  }
  #boardNavPad.visible { display: grid; }
  .nav-arrow {
    display: grid;
    place-items: center;
    border-radius: 8px;
    transition: background 0.15s, transform 0.1s;
  }
  .nav-arrow:hover { background: rgba(59,130,246,0.12); }
  .nav-arrow:active { transform: scale(0.88); }
  .nav-arrow svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.18)); }
  .nav-up { grid-column: 2; grid-row: 1; }
  .nav-left { grid-column: 1; grid-row: 2; transform: rotate(-90deg); }
  .nav-left:active { transform: rotate(-90deg) scale(0.9); }
  .nav-right { grid-column: 3; grid-row: 2; transform: rotate(90deg); }
  .nav-right:active { transform: rotate(90deg) scale(0.9); }
  .nav-down { grid-column: 2; grid-row: 3; transform: rotate(180deg); }
  .nav-down:active { transform: rotate(180deg) scale(0.9); }

  /* re-focus a figure the student didn't understand (emphasizeFigure() in
     whiteboard.js): fade out the rest of the board, glow the target. */
  .reveal.is-dimmed { opacity: .22; filter: grayscale(65%); transition: opacity .4s ease, filter .4s ease; }
  svg.board-connections.is-dimmed { opacity: .22; filter: grayscale(65%); transition: opacity .4s ease, filter .4s ease; }
  .reveal.is-focus {
    border-radius: 10px;
    box-shadow: 0 0 0 3px rgba(234,179,8,.35), 0 0 22px rgba(234,179,8,.45);
    transition: box-shadow .4s ease;
  }

  /* dynamic glossary: tappable technical terms + their definition popover
     (highlightGlossaryTerms() / showGlossaryPopover() in whiteboard.js). */
  .glossary-term {
    border-bottom: 1.5px dotted var(--accent, #c2620f);
    cursor: pointer;
  }
  .glossary-term:hover, .glossary-term:focus-visible { background: rgba(194,98,15,0.12); outline: none; }

  .glossary-popover {
    position: fixed;
    z-index: 60;
    max-width: 260px;
    background: var(--tb-panel-strong, rgba(10,22,45,0.92));
    color: var(--tb-text, #e9edf7);
    padding: 10px 13px;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.28);
    font: 400 14px/1.4 "Inter", sans-serif;
  }
  .glossary-popover-term { font-weight: 700; margin-bottom: 3px; }
  .glossary-popover-analogy { margin-top: 5px; opacity: .8; font-style: italic; }

  /* gamified checkpoint: micro-quiz card (showQuiz()/hideQuiz() in whiteboard.js) */
  .quiz-scrim {
    position: fixed;
    inset: 0;
    background: rgba(10,14,11,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 80;
    padding: 20px;
  }
  .quiz-card {
    background: #fff;
    color: #111827;
    border-radius: 16px;
    padding: 26px 28px;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.32);
    font-family: "Inter", sans-serif;
  }
  .quiz-question { font: 700 20px/1.4 "Inter", sans-serif; margin-bottom: 16px; }
  .quiz-choices { display: flex; flex-direction: column; gap: 10px; }
  .quiz-choice {
    text-align: left;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid #e2e4e0;
    background: #f7faff;
    font: 500 15px/1.3 "Inter", sans-serif;
    cursor: pointer;
    transition: background .15s, border-color .15s;
  }
  .quiz-choice:hover:not(:disabled) { background: #eef2ff; border-color: #c7d2fe; }
  .quiz-choice:disabled { cursor: default; }
  .quiz-choice.correct { background: #dcfce7; border-color: #22c55e; }
  .quiz-choice.correct::after { content: " ✓"; color: #15803d; font-weight: 800; }
  .quiz-choice.incorrect { background: #fee2e2; border-color: #fb7185; }
  .quiz-choice.incorrect::after { content: " ✗"; color: #dc2626; font-weight: 800; }
  .quiz-feedback { margin-top: 14px; font: 600 14px/1.4 "Inter", sans-serif; min-height: 18px; }
  .quiz-feedback.correct { color: #16a34a; }
  .quiz-feedback.incorrect { color: #dc2626; }

  /* Hands-on whiteboard checkpoints: select, drag-label, and fill-answer.
     The lesson board remains visible behind the worksheet so the student can
     refer back to what the teacher just drew while solving. */
  .interaction-scrim {
    position: fixed;
    inset: 0;
    z-index: 82;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(10, 25, 48, 0.48);
    backdrop-filter: blur(3px);
  }
  .interaction-card {
    width: min(100%, 680px);
    max-height: calc(100vh - 40px);
    overflow: auto;
    padding: 26px;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    background: #fdfdfb;
    box-shadow: 0 26px 70px rgba(10, 25, 48, 0.32);
    color: #172033;
    font-family: "Inter", sans-serif;
  }
  .interaction-card.interaction-drag_label { width: min(100%, 780px); }
  .interaction-card.interaction-balance_equation { width: min(100%, 720px); }
  .interaction-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
  }
  .interaction-badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    background: #172033;
    color: #fff;
    font: 800 10px/1 "Inter", sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .interaction-attempts {
    color: #64748b;
    font: 700 12px/1 "Inter", sans-serif;
  }
  .interaction-prompt {
    margin: 0 0 20px;
    color: #111827;
    font: 800 22px/1.35 "Inter", sans-serif;
    letter-spacing: 0;
  }
  .interaction-feedback {
    min-height: 20px;
    margin-top: 16px;
    color: #64748b;
    font: 700 13px/1.45 "Inter", sans-serif;
  }
  .interaction-feedback.correct { color: #15803d; }
  .interaction-feedback.incorrect { color: #b45309; }

  /* One-page concept map modal — reuses .interaction-scrim for the backdrop,
     but needs a much wider card since it renders a full 3-column board. */
  .concept-map-card {
    width: min(100%, 1100px);
    max-height: calc(100vh - 40px);
    overflow: auto;
    padding: 20px 26px 26px;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    background: #fdfdfb;
    box-shadow: 0 26px 70px rgba(10, 25, 48, 0.32);
    color: #172033;
    font-family: "Inter", sans-serif;
  }
  .concept-map-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
  }
  .concept-map-heading {
    margin: 0;
    font: 800 18px/1 "Inter", sans-serif;
    color: #111827;
  }
  .concept-map-actions { display: flex; align-items: center; gap: 8px; }
  .concept-map-download,
  .concept-map-close {
    border: 1px solid #dbe3ef;
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    font: 700 12px/1 "Inter", sans-serif;
  }
  .concept-map-download { padding: 8px 14px; color: #172033; }
  .concept-map-download:hover { background: #f3f6fb; }
  .concept-map-close {
    width: 30px;
    height: 30px;
    padding: 0;
    color: #64748b;
    font-size: 14px;
  }
  .concept-map-close:hover { background: #f3f6fb; color: #172033; }
  .concept-map-board {
    position: relative;
    background: #ffffff;
    border: 1px solid #eef1f6;
    border-radius: 6px;
    padding: 20px;
  }

  .interaction-card.interaction-mascot_mistake { width: min(100%, 720px); }
  .mistake-mascot-intro {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: -6px 0 14px;
    color: #475569;
  }
  .mistake-mascot-avatar {
    flex: 0 0 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #172033;
    color: #fff;
    font: 800 11px/1 "Inter", sans-serif;
  }
  .mistake-mascot-intro p { margin: 0; font: 700 13px/1.45 "Inter", sans-serif; }
  .mistake-work {
    margin: 0 0 16px;
    padding: 0;
    border-top: 1px solid #dbe3ef;
    list-style: none;
  }
  .mistake-work li {
    min-height: 48px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid #dbe3ef;
    color: #253047;
    transition: background 0.18s ease, border-color 0.18s ease;
  }
  .mistake-line-number {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #eef2f7;
    color: #64748b;
    font: 800 11px/1 "Inter", sans-serif;
  }
  .mistake-line-text { font: 700 15px/1.45 "Inter", sans-serif; overflow-wrap: anywhere; }
  .mistake-work li.mistake-line-caught { background: #fff8e8; border-color: #fdb13a; }
  .mistake-line-caught .mistake-line-number { background: #fdb13a; color: #172033; }
  .mistake-correction-options { margin-top: 4px; }
  .mistake-explanation {
    margin: 14px 0 0;
    padding-left: 12px;
    border-left: 3px solid #3e9bfd;
    color: #334155;
    font: 700 13px/1.5 "Inter", sans-serif;
  }

  /* Geometry lab: draggable dimensions, coordinate points, region coloring,
     and an open drawing canvas. */
  .interaction-card.geometry-tool-card { width: min(100%, 860px); }
  .interaction-card.geometry-tool-free_draw { width: min(100%, 920px); }
  .geometry-workspace { min-width: 0; }
  .geometry-readout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -7px 0 12px;
    color: #475569;
    font: 800 12px/1.4 "Inter", sans-serif;
  }
  .geometry-readout span:last-child { color: #1d4ed8; }
  .geometry-stage {
    display: block;
    width: 100%;
    max-height: 350px;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    background: #fff;
    touch-action: none;
    user-select: none;
  }
  .geometry-grid line { stroke: #e6ebf2; stroke-width: 1; }
  .geometry-axis { stroke: #334155; stroke-width: 2; }
  .geometry-axis-label { fill: #64748b; font: 700 11px "Inter", sans-serif; }
  .geometry-active-shape {
    fill: rgba(62, 155, 253, 0.16);
    stroke: #2563eb;
    stroke-width: 3;
  }
  .geometry-graph-point {
    fill: #fdb13a;
    stroke: #172033;
    stroke-width: 2;
    pointer-events: none;
  }
  .geometry-graph-point.focused { stroke: #8b5cf6; stroke-width: 4; }
  .geometry-graph-point-hit { fill: transparent; stroke: transparent; cursor: grab; touch-action: none; outline: none; }
  .geometry-graph-point-hit:active { cursor: grabbing; }
  .geometry-handle-hit { fill: transparent; stroke: transparent; cursor: grab; touch-action: none; }
  .geometry-handle-hit:active { cursor: grabbing; }
  .geometry-handle-knob {
    fill: #fdb13a;
    stroke: #172033;
    stroke-width: 2;
    pointer-events: none;
  }
  .geometry-handle-knob.focused { stroke: #8b5cf6; stroke-width: 4; }
  .geometry-graph-point.correct { fill: #22c55e; stroke: #15803d; }
  .geometry-graph-target {
    fill: rgba(34, 197, 94, 0.16);
    stroke: #16a34a;
    stroke-width: 3;
    stroke-dasharray: 5 4;
  }
  .geometry-dimension-line { stroke: #64748b; stroke-width: 1.5; stroke-dasharray: 4 3; }
  .geometry-dimension-text,
  .geometry-point-label { fill: #172033; font: 800 13px "Inter", sans-serif; }
  .geometry-range-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
  }
  .geometry-range-control {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    color: #475569;
    font: 700 12px/1 "Inter", sans-serif;
  }
  .geometry-range-control span { white-space: nowrap; }
  .geometry-range-control strong { margin-left: 4px; color: #172033; }
  .geometry-range-control input,
  .drawing-size input { width: 100%; min-width: 0; accent-color: #2563eb; }
  .geometry-submit,
  .geometry-secondary,
  .drawing-tool {
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 0 18px;
    font: 800 13px/1 "Inter", sans-serif;
    cursor: pointer;
  }
  .geometry-submit {
    width: 100%;
    margin-top: 14px;
    background: #2563eb;
    color: #fff;
  }
  .geometry-submit:hover:not(:disabled) { background: #1d4ed8; }
  .geometry-submit:disabled,
  .geometry-secondary:disabled,
  .drawing-tool:disabled { cursor: default; opacity: 0.45; }
  .geometry-secondary { background: #fff; border-color: #cbd5e1; color: #334155; }
  .geometry-palette,
  .drawing-colors {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0 16px;
  }
  .geometry-swatch {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--swatch);
    box-shadow: 0 0 0 1px #cbd5e1;
    cursor: pointer;
  }
  .geometry-swatch.selected { box-shadow: 0 0 0 3px #172033; }
  .geometry-regions {
    display: grid;
    width: 100%;
    min-height: 160px;
    overflow: hidden;
    border: 2px solid #334155;
    border-radius: 8px;
    background: #fff;
  }
  .geometry-regions-bar { grid-template-columns: repeat(auto-fit, minmax(28px, 1fr)); }
  .geometry-regions-grid { grid-template-columns: repeat(var(--region-columns), minmax(52px, 1fr)); }
  .geometry-color-region {
    min-width: 0;
    min-height: 52px;
    border: 0;
    border-right: 1px solid #94a3b8;
    border-bottom: 1px solid #94a3b8;
    background: #f8fafc;
    cursor: pointer;
    transition: background 0.14s ease, transform 0.14s ease;
  }
  .geometry-color-region:hover:not(:disabled),
  .geometry-color-region:focus-visible { transform: scale(0.96); outline: 3px solid rgba(37, 99, 235, 0.28); outline-offset: -3px; }
  .geometry-color-region.filled { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.6); }
  .geometry-actions { display: grid; grid-template-columns: auto minmax(180px, 1fr); gap: 10px; margin-top: 12px; }
  .geometry-actions .geometry-submit { margin-top: 0; }

  .drawing-toolbar {
    display: grid;
    grid-template-columns: auto auto minmax(120px, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
  }
  .drawing-segmented {
    display: inline-grid;
    grid-template-columns: repeat(3, auto);
    padding: 3px;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    background: #eef2f7;
  }
  .drawing-tool { min-height: 36px; padding: 0 10px; background: transparent; color: #475569; }
  .drawing-tool.selected { background: #fff; border-color: #cbd5e1; color: #172033; box-shadow: 0 2px 7px rgba(10, 25, 48, 0.08); }
  .drawing-colors { flex-wrap: nowrap; gap: 7px; margin: 0; }
  .drawing-colors .geometry-swatch { width: 27px; height: 27px; }
  .drawing-size {
    min-width: 100px;
    display: grid;
    grid-template-columns: auto minmax(70px, 1fr);
    align-items: center;
    gap: 8px;
    color: #64748b;
    font: 700 11px/1 "Inter", sans-serif;
  }
  .drawing-history-actions { display: flex; gap: 6px; }
  .drawing-history-actions .geometry-secondary { min-height: 36px; padding: 0 10px; font-size: 11px; }
  .free-draw-canvas {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    border: 2px solid #cbd5e1;
    border-radius: 8px;
    background-color: #fff;
    background-image: linear-gradient(#eef2f7 1px, transparent 1px), linear-gradient(90deg, #eef2f7 1px, transparent 1px);
    background-size: 24px 24px;
    cursor: crosshair;
    touch-action: none;
  }
  .drawing-kbd-hint { margin: 6px 0 0; color: #64748b; font: 600 11px/1.4 "Inter", sans-serif; }

  /* First-party math simulations: a larger lab surface that still uses the
     checkpoint shell and its feedback/attempt states. */
  .interaction-card.math-simulation-card { width: min(100%, 880px); }
  .fraction-lab { min-width: 0; }
  .fraction-lab-status {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 18px;
    margin: -6px 0 12px;
  }
  .fraction-lab-target,
  .fraction-lab-current {
    min-width: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 9px 14px;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    background: #f8fafc;
  }
  .fraction-lab-target { border-color: #93c5fd; background: #eff6ff; }
  .fraction-lab-status span { color: #64748b; font: 800 11px/1.2 "Inter", sans-serif; text-transform: uppercase; }
  .fraction-lab-status strong {
    display: grid;
    grid-template-rows: auto 2px auto;
    place-items: center;
    min-width: 32px;
    color: #172033;
    font: 800 18px/1 "Inter", sans-serif;
  }
  .fraction-lab-status strong i { width: 100%; height: 2px; margin: 3px 0; background: currentColor; }
  .fraction-lab-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    background: #eef2f7;
  }
  .fraction-lab-tabs:has(.fraction-lab-tab:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fraction-lab-tabs:has(.fraction-lab-tab:only-child) { grid-template-columns: 1fr; }
  .fraction-lab-tab {
    min-height: 40px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    font: 800 12px/1 "Inter", sans-serif;
    cursor: pointer;
  }
  .fraction-lab-tab.selected { border-color: #bfdbfe; background: #fff; color: #1d4ed8; box-shadow: 0 2px 7px rgba(10, 25, 48, 0.08); }
  .fraction-lab-instruction { margin: 12px 0 8px; color: #475569; text-align: center; font: 700 12px/1.4 "Inter", sans-serif; }
  .fraction-lab-stage {
    min-height: 285px;
    display: grid;
    place-items: center;
    padding: 14px;
    overflow: hidden;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    background-color: #fff;
    background-image: linear-gradient(#f1f5f9 1px, transparent 1px), linear-gradient(90deg, #f1f5f9 1px, transparent 1px);
    background-size: 24px 24px;
  }
  .fraction-circle { width: min(100%, 360px); max-height: 280px; overflow: visible; }
  .fraction-circle-slice {
    fill: #f8fafc;
    stroke: #334155;
    stroke-width: 2;
    cursor: pointer;
    transition: fill 0.15s ease, transform 0.15s ease;
    transform-box: fill-box;
    transform-origin: center;
  }
  .fraction-circle-slice:hover,
  .fraction-circle-slice:focus-visible { fill: #dbeafe; outline: none; transform: scale(0.97); }
  .fraction-circle-slice.selected { fill: #3e9bfd; }
  .fraction-bar {
    width: min(100%, 680px);
    min-height: 150px;
    display: grid;
    grid-template-columns: repeat(var(--fraction-parts), minmax(28px, 1fr));
    overflow: hidden;
    border: 3px solid #334155;
    border-radius: 8px;
    background: #fff;
  }
  .fraction-bar-part { min-width: 0; border: 0; border-right: 1px solid #94a3b8; background: #f8fafc; cursor: pointer; }
  .fraction-bar-part:last-child { border-right: 0; }
  .fraction-bar-part:hover,
  .fraction-bar-part:focus-visible { background: #dbeafe; outline: 3px solid rgba(37, 99, 235, 0.28); outline-offset: -3px; }
  .fraction-bar-part.selected { background: #3e9bfd; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.45); }
  .fraction-number-line { width: min(100%, 700px); padding: 25px 12px 5px; text-align: center; }
  .fraction-number-line > strong { display: block; margin-bottom: 18px; color: #1d4ed8; font: 800 25px/1 "Inter", sans-serif; }
  .fraction-number-line input { width: calc(100% - 18px); accent-color: #2563eb; }
  .fraction-number-line-ticks { display: flex; justify-content: space-between; margin-top: 10px; color: #64748b; font: 700 10px/1 "Inter", sans-serif; }
  .fraction-number-line-ticks span { min-width: 1px; transform: translateX(0); }
  .fraction-lab-actions { display: grid; grid-template-columns: auto minmax(180px, 1fr); gap: 10px; margin-top: 12px; }
  .fraction-lab-actions .geometry-submit { margin-top: 0; }

  /* Force & Motion Lab: opposing force controls drive a deterministic cart
     experiment and report net force/acceleration to the voice teacher. */
  .interaction-card.physics-simulation-card { width: min(100%, 900px); }
  .force-lab { min-width: 0; }
  .force-lab-mission {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: -6px 0 10px;
  }
  .force-lab-mission > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 3px 12px;
    padding: 10px 12px;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    background: #f8fafc;
  }
  .force-lab-mission > div:first-child { border-color: #93c5fd; background: #eff6ff; }
  .force-lab-mission span,
  .force-lab-readout span { color: #64748b; font: 800 10px/1.2 "Inter", sans-serif; text-transform: uppercase; }
  .force-lab-mission strong { color: #172033; font: 800 17px/1.2 "Inter", sans-serif; }
  .force-lab-mission small { grid-column: 2; color: #64748b; text-align: right; font: 700 10px/1 "Inter", sans-serif; text-transform: capitalize; }
  .force-lab-readout {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    margin-bottom: 10px;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    background: #fff;
  }
  .force-lab-readout > div { display: grid; gap: 4px; padding: 9px 12px; border-right: 1px solid #dbe3ef; text-align: center; }
  .force-lab-readout > div:last-child { border-right: 0; }
  .force-lab-readout strong { color: #1e3a5f; font: 800 14px/1.2 "Inter", sans-serif; text-transform: capitalize; }
  .force-lab-stage {
    position: relative;
    min-height: 225px;
    display: grid;
    grid-template-columns: minmax(90px, 1fr) 150px minmax(90px, 1fr);
    align-items: center;
    gap: 10px;
    overflow: hidden;
    padding: 20px;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    background-color: #f8fbff;
    background-image: linear-gradient(#e8eef5 1px, transparent 1px), linear-gradient(90deg, #e8eef5 1px, transparent 1px);
    background-size: 24px 24px;
  }
  .force-track {
    position: absolute;
    right: 16px;
    bottom: 43px;
    left: 16px;
    height: 8px;
    border-top: 3px solid #475569;
    border-bottom: 1px dashed #94a3b8;
  }
  .force-track::before {
    content: "";
    position: absolute;
    inset: 8px 0 auto;
    height: 2px;
    background: repeating-linear-gradient(90deg, #cbd5e1 0 24px, transparent 24px 38px);
  }
  .force-cart-wrap { z-index: 2; display: grid; place-items: center; }
  .force-cart {
    position: relative;
    width: 126px;
    height: 92px;
    transform: translateX(0);
  }
  .force-cart-load {
    position: absolute;
    top: 3px;
    left: 34px;
    width: 58px;
    height: 42px;
    border: 3px solid #334155;
    border-radius: 5px 5px 2px 2px;
    background: #fdb13a;
    box-shadow: inset 0 -9px rgba(180, 83, 9, 0.15);
  }
  .force-cart-load::after {
    content: "m";
    display: grid;
    height: 100%;
    place-items: center;
    color: #713f12;
    font: 800 18px/1 "Inter", sans-serif;
  }
  .force-cart-body {
    position: absolute;
    right: 3px;
    bottom: 20px;
    left: 3px;
    height: 34px;
    border: 3px solid #172033;
    border-radius: 6px 6px 12px 12px;
    background: #3e9bfd;
  }
  .force-cart > i {
    position: absolute;
    bottom: 4px;
    width: 26px;
    height: 26px;
    border: 4px solid #172033;
    border-radius: 50%;
    background: #fff;
  }
  .force-cart > i:nth-of-type(1) { left: 20px; }
  .force-cart > i:nth-of-type(2) { right: 20px; }
  .force-cart.run-right { animation: forceCartRight 0.9s ease-in-out; }
  .force-cart.run-left { animation: forceCartLeft 0.9s ease-in-out; }
  .force-cart.run-balanced { animation: forceCartBalanced 0.55s ease-in-out; }
  @keyframes forceCartRight { 0% { transform: translateX(0); } 60% { transform: translateX(68px); } 100% { transform: translateX(0); } }
  @keyframes forceCartLeft { 0% { transform: translateX(0); } 60% { transform: translateX(-68px); } 100% { transform: translateX(0); } }
  @keyframes forceCartBalanced { 0%, 100% { transform: translateX(0); } 35% { transform: translateX(-3px); } 70% { transform: translateX(3px); } }
  .force-arrow {
    position: relative;
    z-index: 3;
    min-width: 0;
    height: 48px;
    display: flex;
    align-items: center;
    color: #fff;
    opacity: var(--force-opacity);
  }
  .force-arrow::before { content: ""; position: absolute; top: 19px; height: var(--force-thickness); background: currentColor; }
  .force-arrow::after { content: ""; position: absolute; top: 11px; border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
  .force-arrow span { position: relative; z-index: 2; min-width: 48px; padding: 5px 7px; border-radius: 5px; background: #172033; text-align: center; font: 800 11px/1 "Inter", sans-serif; }
  .force-arrow-left { justify-content: flex-start; color: #ee5ca8; }
  .force-arrow-left::before { right: 0; left: 8px; transform: scaleX(var(--force-scale)); transform-origin: right; }
  .force-arrow-left::after { left: 0; border-right: 18px solid currentColor; }
  .force-arrow-right { justify-content: flex-end; color: #20bca5; }
  .force-arrow-right::before { right: 8px; left: 0; transform: scaleX(var(--force-scale)); transform-origin: left; }
  .force-arrow-right::after { right: 0; border-left: 18px solid currentColor; }
  .force-arrow.force-zero { opacity: 0.2; }
  .force-lab-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
  .force-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    background: #fff;
    color: #475569;
    font: 800 12px/1 "Inter", sans-serif;
  }
  .force-control strong { color: #172033; }
  .force-control input { grid-column: 1 / -1; width: 100%; accent-color: #2563eb; }
  .force-control-left input { accent-color: #db2777; }
  .force-control-right input { accent-color: #0f9f91; }
  .force-lab-actions { display: grid; grid-template-columns: auto minmax(190px, 1fr); gap: 10px; margin-top: 12px; }
  .force-lab-actions .geometry-submit { margin-top: 0; }

  /* Reaction Particle Lab: molecule coefficients drive live, deterministic
     atom-conservation totals for a curated set of school reactions. */
  .interaction-card.chemistry-simulation-card { width: min(100%, 940px); }
  .reaction-lab { min-width: 0; }
  .reaction-lab-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -6px 0 9px;
    padding: 9px 12px;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    background: #f8fafc;
  }
  .reaction-lab-heading > div:first-child { display: grid; gap: 2px; }
  .reaction-lab-heading span { color: #64748b; font: 800 10px/1.2 "Inter", sans-serif; text-transform: uppercase; }
  .reaction-lab-heading strong { color: #172033; font: 800 15px/1.2 "Inter", sans-serif; }
  .reaction-conservation-state {
    padding: 6px 9px;
    border-radius: 6px;
    background: #fff7ed;
    color: #b45309;
    font: 800 11px/1.2 "Inter", sans-serif;
  }
  .reaction-conservation-state.balanced { background: #ecfdf3; color: #15803d; }
  .reaction-equation-live {
    min-height: 52px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    place-items: center;
    gap: 12px;
    padding: 8px 14px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
    color: #172033;
    text-align: center;
    font: 700 18px/1.35 "Inter", sans-serif;
  }
  .reaction-equation-live > strong { color: #2563eb; font-size: 24px; }
  .reaction-equation-live b { color: #1d4ed8; }
  .reaction-equation-live i { color: #64748b; font-style: normal; }
  .reaction-equation-live sub { font-size: 65%; }
  .reaction-atom-table {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 6px;
    margin: 8px 0;
  }
  .reaction-atom-row {
    display: grid;
    grid-template-columns: minmax(44px, 1fr) repeat(2, minmax(34px, 0.7fr));
    align-items: center;
    gap: 4px;
    min-height: 34px;
    padding: 5px 8px;
    border: 1px solid #dbe3ef;
    border-radius: 7px;
    background: #fff;
    color: #334155;
    text-align: center;
    font: 800 11px/1 "Inter", sans-serif;
  }
  .reaction-atom-head { color: #64748b; background: #f8fafc; font-size: 9px; text-transform: uppercase; }
  .reaction-atom-row.matches:not(.reaction-atom-head) { border-color: #86efac; background: #f0fdf4; }
  .reaction-atom-row.mismatch { border-color: #fdba74; background: #fff7ed; }
  .reaction-particle-stage {
    min-height: 190px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 62px minmax(0, 1fr);
    align-items: stretch;
    gap: 8px;
    padding: 10px;
    overflow: hidden;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    background-color: #fbfdff;
    background-image: radial-gradient(#dbe3ef 1px, transparent 1px);
    background-size: 18px 18px;
  }
  .reaction-particle-tray {
    min-width: 0;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    border: 1px dashed #94a3b8;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.88);
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.45s ease;
  }
  .reaction-stage-arrow { display: grid; align-content: center; place-items: center; color: #64748b; }
  .reaction-stage-arrow span { font: 800 9px/1 "Inter", sans-serif; text-transform: uppercase; }
  .reaction-stage-arrow strong { color: #2563eb; font: 800 34px/1 "Inter", sans-serif; }
  .reaction-molecule-group { min-width: 72px; display: grid; align-content: center; justify-items: center; gap: 5px; }
  .reaction-molecule-group > span { color: #475569; font: 800 10px/1 "Inter", sans-serif; }
  .reaction-molecule-group sub { font-size: 70%; }
  .reaction-molecule-set { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px; }
  .reaction-molecule {
    min-width: 32px;
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    padding: 2px;
    filter: drop-shadow(0 2px 2px rgba(15, 23, 42, 0.12));
  }
  .reaction-molecule i {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    margin: -2px;
    border: 2px solid rgba(15, 23, 42, 0.55);
    border-radius: 50%;
    background: var(--atom-color);
    color: #fff;
    font: 800 8px/1 "Inter", sans-serif;
    font-style: normal;
  }
  .reaction-molecule i.reaction-atom-light { color: #334155; }
  .reaction-particle-stage.reaction-running .reaction-particle-reactants { transform: translateX(12px); }
  .reaction-particle-stage.reaction-running .reaction-particle-products { transform: translateX(-12px); }
  .reaction-particle-stage.reaction-running .reaction-molecule { animation: reactionParticlePulse 0.55s ease-in-out infinite alternate; }
  .reaction-particle-stage.reaction-balanced .reaction-particle-tray { border-color: #22c55e; background: rgba(240, 253, 244, 0.94); }
  .reaction-particle-stage.reaction-unbalanced .reaction-particle-tray { border-color: #f59e0b; background: rgba(255, 251, 235, 0.94); }
  @keyframes reactionParticlePulse { from { transform: scale(1); } to { transform: scale(1.08); } }
  .reaction-coefficient-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 8px;
    margin-top: 10px;
  }
  .reaction-coefficient-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    background: #fff;
  }
  .reaction-coefficient-control > strong { color: #172033; font: 800 15px/1 "Inter", sans-serif; }
  .reaction-coefficient-control sub { font-size: 65%; }
  .reaction-stepper { display: grid; grid-template-columns: 34px 34px 34px; align-items: center; }
  .reaction-stepper-button {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #334155;
    font: 800 18px/1 "Inter", sans-serif;
    cursor: pointer;
  }
  .reaction-stepper-button:first-child { border-radius: 6px 0 0 6px; }
  .reaction-stepper-button:last-child { border-radius: 0 6px 6px 0; }
  .reaction-stepper-button:disabled { opacity: 0.38; cursor: default; }
  .reaction-stepper output { height: 34px; display: grid; place-items: center; border-block: 1px solid #cbd5e1; color: #172033; font: 800 13px/1 "Inter", sans-serif; }
  .reaction-lab-actions { display: grid; grid-template-columns: auto minmax(180px, 1fr); gap: 10px; margin-top: 10px; }
  .reaction-lab-actions .geometry-submit { margin-top: 0; }

  /* Cell Transport Lab: concentration controls drive deterministic diffusion
     or osmosis outcomes, with solute particles kept visually distinct from
     the water/solute substance named as the tracked movement. */
  .interaction-card.biology-simulation-card { width: min(100%, 920px); }
  .cell-transport-lab { min-width: 0; }
  .cell-transport-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: -6px 0 8px;
  }
  .cell-transport-summary > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 3px 10px;
    padding: 9px 11px;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    background: #f8fafc;
  }
  .cell-transport-summary > div:first-child { border-color: #a7f3d0; background: #ecfdf5; }
  .cell-transport-summary span,
  .cell-transport-readout span { color: #64748b; font: 800 9px/1.2 "Inter", sans-serif; text-transform: uppercase; }
  .cell-transport-summary strong { color: #172033; font: 800 14px/1.2 "Inter", sans-serif; text-transform: capitalize; }
  .cell-transport-summary small { grid-column: 2; color: #64748b; text-align: right; font: 700 9px/1.2 "Inter", sans-serif; }
  .cell-transport-readout {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    margin-bottom: 8px;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    background: #fff;
  }
  .cell-transport-readout > div { display: grid; gap: 3px; padding: 8px; border-right: 1px solid #dbe3ef; text-align: center; }
  .cell-transport-readout > div:last-child { border-right: 0; }
  .cell-transport-readout strong { color: #1e3a5f; font: 800 13px/1.2 "Inter", sans-serif; text-transform: capitalize; }
  .cell-transport-stage {
    position: relative;
    min-height: 245px;
    overflow: hidden;
    border: 1px solid #b7dfdb;
    border-radius: 8px;
    background-color: #eaf8f7;
    background-image: radial-gradient(rgba(15, 118, 110, 0.12) 1px, transparent 1px);
    background-size: 20px 20px;
  }
  .cell-transport-stage::before {
    content: "Outside solution";
    position: absolute;
    top: 10px;
    left: 12px;
    color: #0f766e;
    font: 800 9px/1 "Inter", sans-serif;
    text-transform: uppercase;
  }
  .transport-cell {
    position: absolute;
    top: 50%;
    left: 44%;
    width: 174px;
    height: 174px;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(1);
    transition: transform 0.65s ease, filter 0.3s ease;
  }
  .transport-membrane {
    position: absolute;
    inset: 0;
    border: 8px double #0f766e;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 8px 24px rgba(15, 118, 110, 0.12), inset 0 0 24px rgba(45, 212, 191, 0.1);
  }
  .transport-membrane::after {
    content: "Cell membrane";
    position: absolute;
    right: -28px;
    bottom: -16px;
    padding: 4px 6px;
    border-radius: 4px;
    background: #0f766e;
    color: #fff;
    white-space: nowrap;
    font: 800 8px/1 "Inter", sans-serif;
  }
  .transport-nucleus {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border: 3px solid #7c3aed;
    border-radius: 50%;
    background: #ddd6fe;
    color: #5b21b6;
    transform: translate(-50%, -50%);
    font: 800 10px/1 "Inter", sans-serif;
    text-transform: uppercase;
  }
  .cell-solute-particles { position: absolute; inset: 0; pointer-events: none; }
  .cell-solute-particles i {
    position: absolute;
    width: 15px;
    height: 15px;
    border: 2px solid #7c2d12;
    border-radius: 50%;
    background: #fb923c;
    transform: translate(-50%, -50%);
    box-shadow: 0 1px 3px rgba(124, 45, 18, 0.18);
  }
  .cell-solute-inside { z-index: 2; inset: 15px; }
  .cell-solute-inside i { width: 13px; height: 13px; }
  .cell-solute-outside { z-index: 1; }
  .cell-transport-movement {
    position: absolute;
    top: 50%;
    left: 70%;
    z-index: 4;
    width: 170px;
    display: grid;
    justify-items: center;
    gap: 5px;
    transform: translate(-50%, -50%);
    color: #1d4ed8;
  }
  .cell-transport-movement::before { content: "?"; font: 800 42px/1 "Inter", sans-serif; }
  .cell-transport-movement[data-direction="outside_to_inside"]::before { content: "←"; }
  .cell-transport-movement[data-direction="inside_to_outside"]::before { content: "→"; }
  .cell-transport-movement[data-direction="no_net"]::before { content: "↔"; color: #64748b; }
  .cell-transport-movement span { padding: 5px 8px; border-radius: 5px; background: rgba(255,255,255,0.9); color: #334155; text-align: center; font: 800 10px/1.25 "Inter", sans-serif; }
  .cell-transport-legend {
    position: absolute;
    right: 10px;
    bottom: 9px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 7px;
    border-radius: 5px;
    background: rgba(255,255,255,0.9);
    color: #475569;
    font: 700 8px/1 "Inter", sans-serif;
  }
  .cell-transport-legend i { width: 10px; height: 10px; border: 1px solid #7c2d12; border-radius: 50%; background: #fb923c; }
  .cell-transport-legend b { margin-left: 5px; color: #1d4ed8; }
  .cell-transport-stage.transport-running .cell-transport-movement::before { animation: cellTransportArrow 0.45s ease-in-out infinite alternate; }
  .cell-transport-stage.transport-running .cell-solute-particles i { animation: cellParticlePulse 0.45s ease-in-out infinite alternate; }
  .cell-transport-stage.transport-cell-swells .transport-cell { transform: translate(-50%, -50%) scale(1.14); }
  .cell-transport-stage.transport-cell-shrinks .transport-cell { transform: translate(-50%, -50%) scale(0.82); filter: saturate(0.7); }
  .cell-transport-stage.transport-cell-stable .transport-cell { transform: translate(-50%, -50%) scale(1); }
  @keyframes cellTransportArrow { from { opacity: 0.55; transform: translateX(-4px); } to { opacity: 1; transform: translateX(4px); } }
  @keyframes cellParticlePulse { from { opacity: 0.7; } to { opacity: 1; } }
  .cell-concentration-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 9px; }
  .cell-concentration-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
    padding: 8px 10px;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    background: #fff;
    color: #475569;
    font: 800 11px/1 "Inter", sans-serif;
  }
  .cell-concentration-control strong { color: #172033; }
  .cell-concentration-control input { grid-column: 1 / -1; width: 100%; accent-color: #0f9f91; }
  .cell-prediction-block { min-width: 0; margin: 9px 0 0; padding: 0; border: 0; }
  .cell-prediction-block legend { margin-bottom: 6px; color: #334155; font: 800 11px/1.3 "Inter", sans-serif; }
  .cell-prediction-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .cell-prediction-option {
    min-height: 40px;
    padding: 7px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background: #fff;
    color: #475569;
    font: 800 11px/1.2 "Inter", sans-serif;
    cursor: pointer;
  }
  .cell-prediction-option:hover:not(:disabled),
  .cell-prediction-option:focus-visible { border-color: #3b82f6; background: #eff6ff; }
  .cell-prediction-option.selected { border-color: #2563eb; background: #dbeafe; color: #1d4ed8; box-shadow: inset 0 0 0 1px #2563eb; }
  .cell-transport-actions { display: grid; grid-template-columns: auto minmax(180px, 1fr); gap: 10px; margin-top: 9px; }
  .cell-transport-actions .geometry-submit { margin-top: 0; }

  /* Sentence Workshop: app-owned tiles combine grammar choice and word order,
     with drag plus explicit keyboard-accessible move controls. */
  .interaction-card.english-simulation-card { width: min(100%, 940px); }
  .sentence-workshop { min-width: 0; }
  .sentence-workshop-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: -6px 0 9px;
  }
  .sentence-workshop-summary > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    background: #f8fafc;
  }
  .sentence-workshop-summary > div:first-child { border-color: #c4b5fd; background: #f5f3ff; }
  .sentence-workshop-summary span { color: #64748b; font: 800 9px/1.2 "Inter", sans-serif; text-transform: uppercase; }
  .sentence-workshop-summary strong { color: #172033; text-align: right; font: 800 13px/1.2 "Inter", sans-serif; }
  .sentence-build-area,
  .sentence-bank-area {
    padding: 10px;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    background: #fff;
  }
  .sentence-build-area { border-color: #bfdbfe; background: #f8fbff; }
  .sentence-bank-area { margin-top: 8px; }
  .sentence-area-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
  .sentence-area-label span { color: #334155; font: 800 11px/1.2 "Inter", sans-serif; text-transform: uppercase; }
  .sentence-area-label small { color: #64748b; text-align: right; font: 600 9px/1.2 "Inter", sans-serif; }
  .sentence-lane {
    min-height: 96px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    align-items: stretch;
    gap: 7px;
  }
  .sentence-empty-slot {
    min-height: 72px;
    display: grid;
    place-items: center;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    background: rgba(255,255,255,0.72);
    color: #94a3b8;
    font: 800 16px/1 "Inter", sans-serif;
  }
  .sentence-selected-tile {
    position: relative;
    min-width: 0;
    min-height: 72px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 30px;
    align-items: center;
    gap: 4px;
    padding: 7px 5px;
    border: 1px solid #93c5fd;
    border-radius: 8px;
    background: #dbeafe;
    color: #1e3a5f;
    transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
  }
  .sentence-selected-tile[draggable="true"] { cursor: grab; }
  .sentence-selected-tile.dragging { opacity: 0.55; transform: scale(0.97); }
  .sentence-selected-tile.drag-over { border-color: #7c3aed; background: #ede9fe; }
  .sentence-selected-tile.mismatch { border-color: #f59e0b; background: #fffbeb; animation: sentenceMismatch 0.28s ease-in-out 2 alternate; }
  @keyframes sentenceMismatch { from { transform: translateX(-2px); } to { transform: translateX(2px); } }
  .sentence-move-button {
    width: 30px;
    height: 34px;
    padding: 0;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    background: #fff;
    color: #2563eb;
    font: 800 20px/1 "Inter", sans-serif;
    cursor: pointer;
  }
  .sentence-move-button:disabled { opacity: 0.28; cursor: default; }
  .sentence-selected-word {
    min-width: 0;
    min-height: 40px;
    padding: 5px;
    overflow-wrap: anywhere;
    border: 0;
    background: transparent;
    color: #172033;
    font: 800 13px/1.25 "Inter", sans-serif;
    cursor: pointer;
  }
  .sentence-selected-word:disabled { cursor: default; }
  .sentence-role-label {
    grid-column: 1 / -1;
    justify-self: center;
    padding: 3px 6px;
    border-radius: 4px;
    background: #172033;
    color: #fff;
    font: 800 8px/1 "Inter", sans-serif;
    text-transform: uppercase;
  }
  .sentence-selected-tile[data-role="subject"] { border-color: #22c55e; background: #ecfdf3; }
  .sentence-selected-tile[data-role*="verb"] { border-color: #a78bfa; background: #f5f3ff; }
  .sentence-selected-tile[data-role="object"] { border-color: #fbbf24; background: #fffbeb; }
  .sentence-word-bank { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px; min-height: 46px; }
  .sentence-bank-token {
    min-height: 40px;
    padding: 8px 13px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background: #fff;
    color: #334155;
    font: 800 12px/1.2 "Inter", sans-serif;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
  }
  .sentence-bank-token:hover:not(:disabled),
  .sentence-bank-token:focus-visible { border-color: #2563eb; background: #eff6ff; transform: translateY(-1px); }
  .sentence-bank-token.used { opacity: 0.3; text-decoration: line-through; }
  .sentence-grammar-legend { margin-top: 8px; padding: 7px 9px; border-left: 3px solid #7c3aed; background: #f5f3ff; color: #5b21b6; font: 800 10px/1.35 "Inter", sans-serif; }
  .sentence-workshop-actions { display: grid; grid-template-columns: auto minmax(180px, 1fr); gap: 10px; margin-top: 9px; }
  .sentence-workshop-actions .geometry-submit { margin-top: 0; }

  .interaction-select-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .interaction-select-option {
    min-height: 72px;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    padding: 12px;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    background: #fff;
    color: #253047;
    text-align: left;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
  }
  .interaction-select-option:hover:not(:disabled),
  .interaction-select-option:focus-visible {
    transform: translateY(-1px);
    border-color: #3e9bfd;
    background: #f4f9ff;
  }
  .interaction-select-option > span {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #eaf3ff;
    color: #2563eb;
    font: 800 13px/1 "Inter", sans-serif;
  }
  .interaction-select-option strong { font: 700 14px/1.4 "Inter", sans-serif; }
  .interaction-select-option.correct { border-color: #22c55e; background: #ecfdf3; }
  .interaction-select-option.correct > span { background: #22c55e; color: #fff; }
  .interaction-select-option.correct::after { content: " ✓"; color: #15803d; font-weight: 800; }
  .interaction-select-option.incorrect { border-color: #f59e0b; background: #fffbeb; }
  .interaction-select-option.incorrect > span { background: #f59e0b; color: #fff; }
  .interaction-select-option.incorrect::after { content: " ✗"; color: #b45309; font-weight: 800; }

  .interaction-fill-form label {
    display: block;
    margin-bottom: 8px;
    color: #475569;
    font: 700 12px/1.3 "Inter", sans-serif;
  }
  .interaction-fill-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; }
  .interaction-fill-icon { width: 22px; text-align: center; font: 800 20px/1 "Inter", sans-serif; }
  .interaction-fill-icon.correct { color: #15803d; }
  .interaction-fill-icon.incorrect { color: #b45309; }
  .interaction-fill-row input {
    width: 100%;
    min-width: 0;
    height: 52px;
    padding: 0 15px;
    border: 2px solid #cbd5e1;
    border-radius: 8px;
    outline: none;
    background: #fff;
    color: #172033;
    font: 700 17px/1 "Inter", sans-serif;
  }
  .interaction-fill-row input:focus { border-color: #3e9bfd; box-shadow: 0 0 0 3px rgba(62, 155, 253, 0.14); }
  .interaction-fill-row input.correct { border-color: #22c55e; background: #ecfdf3; }
  .interaction-fill-row input.incorrect { border-color: #f59e0b; background: #fffbeb; }
  .interaction-fill-row button,
  .interaction-check {
    min-height: 48px;
    padding: 0 20px;
    border-radius: 8px;
    background: #2563eb;
    color: #fff;
    font: 800 14px/1 "Inter", sans-serif;
  }
  .interaction-fill-row button:disabled,
  .interaction-check:disabled { opacity: 0.45; cursor: default; }

  .interaction-balance-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 18px;
  }
  .interaction-balance-species {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 700 16px/1 "Inter", sans-serif;
    color: #172033;
  }
  .interaction-balance-species input {
    width: 46px;
    height: 40px;
    padding: 0 4px;
    border: 2px solid #cbd5e1;
    border-radius: 8px;
    outline: none;
    background: #fff;
    color: #172033;
    text-align: center;
    font: 800 16px/1 "Inter", sans-serif;
  }
  .interaction-balance-species input:focus { border-color: #3e9bfd; box-shadow: 0 0 0 3px rgba(62, 155, 253, 0.14); }
  .interaction-balance-species input.correct { border-color: #22c55e; background: #ecfdf3; }
  .interaction-balance-species input.incorrect { border-color: #f59e0b; background: #fffbeb; }
  .interaction-balance-plus, .interaction-balance-arrow { font: 800 18px/1 "Inter", sans-serif; color: #64748b; }
  .interaction-balance-arrow { color: #172033; }

  .interaction-drag-instruction {
    margin: -8px 0 10px;
    color: #64748b;
    font: 600 12px/1.45 "Inter", sans-serif;
  }
  .interaction-label-bank {
    min-height: 58px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 9px;
    border: 1px dashed #94a3b8;
    border-radius: 8px;
    background: #f8fafc;
  }
  .interaction-label-chip {
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid #93c5fd;
    border-radius: 999px;
    background: #eaf3ff;
    color: #1d4ed8;
    font: 800 13px/1.2 "Inter", sans-serif;
    cursor: grab;
    touch-action: manipulation;
  }
  .interaction-label-chip:active { cursor: grabbing; }
  .interaction-label-chip.selected { border-color: #8b5cf6; background: #f2edff; color: #6d28d9; box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.14); }
  .interaction-targets { display: grid; gap: 8px; margin-top: 12px; }
  .interaction-target {
    min-height: 66px;
    display: grid;
    grid-template-columns: minmax(160px, 1fr) minmax(150px, 0.85fr);
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    background: #fff;
    outline: none;
    transition: border-color 0.15s ease, background 0.15s ease;
  }
  .interaction-target:focus-visible,
  .interaction-target.drag-over { border-color: #8b5cf6; background: #faf8ff; }
  .interaction-target.correct { border-color: #22c55e; background: #f0fdf4; }
  .interaction-target.incorrect { border-color: #f59e0b; background: #fffbeb; }
  .interaction-target-text { color: #334155; font: 700 13px/1.4 "Inter", sans-serif; }
  .interaction-target-slot {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    border: 1px dashed #94a3b8;
    border-radius: 7px;
    color: #94a3b8;
    font: 600 12px/1.3 "Inter", sans-serif;
  }
  .interaction-target-slot .interaction-label-chip { width: 100%; cursor: pointer; }
  .interaction-check { width: 100%; margin-top: 12px; }

  @media (max-width: 640px) {
    .interaction-scrim { align-items: end; padding: 10px; }
    .interaction-card,
    .interaction-card.interaction-drag_label,
    .interaction-card.interaction-balance_equation,
    .interaction-card.interaction-mascot_mistake,
    .interaction-card.geometry-tool-card,
    .interaction-card.geometry-tool-free_draw,
    .interaction-card.math-simulation-card,
    .interaction-card.physics-simulation-card,
    .interaction-card.chemistry-simulation-card,
    .interaction-card.biology-simulation-card,
    .interaction-card.english-simulation-card {
      width: 100%;
      max-height: calc(100vh - 20px);
      padding: 20px 14px;
    }
    .interaction-prompt { font-size: 19px; margin-bottom: 16px; }
    .interaction-select-options { grid-template-columns: 1fr; }
    .interaction-select-option { min-height: 58px; }
    .mistake-work li { padding-inline: 6px; }
    .mistake-line-text { font-size: 14px; }
    .interaction-target { grid-template-columns: 1fr; gap: 7px; }
    .interaction-fill-row { grid-template-columns: 1fr; }
    .interaction-fill-row button { width: 100%; }
    .interaction-balance-row { gap: 8px; }
    .interaction-balance-species input { width: 40px; height: 36px; }
    .geometry-readout { align-items: flex-start; flex-direction: column; gap: 3px; }
    .geometry-stage { max-height: 280px; }
    .geometry-range-grid { grid-template-columns: 1fr; gap: 8px; }
    .geometry-regions { min-height: 132px; }
    .geometry-actions { grid-template-columns: 1fr; }
    .drawing-toolbar { grid-template-columns: 1fr 1fr; }
    .drawing-segmented { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
    .drawing-colors { justify-content: flex-start; }
    .fraction-lab-status { gap: 8px; }
    .fraction-lab-target,
    .fraction-lab-current { min-width: 0; flex: 1; padding: 8px; gap: 7px; }
    .fraction-lab-stage { min-height: 230px; padding: 8px; }
    .fraction-bar { min-height: 120px; }
    .fraction-number-line-ticks { font-size: 8px; }
    .fraction-lab-actions { grid-template-columns: 1fr; }
    .force-lab-mission { grid-template-columns: 1fr 1fr; gap: 7px; }
    .force-lab-mission > div { grid-template-columns: 1fr; gap: 3px; padding: 8px; text-align: center; }
    .force-lab-mission small { grid-column: 1; text-align: center; }
    .force-lab-readout span { font-size: 8px; }
    .force-lab-readout strong { font-size: 11px; }
    .force-lab-stage { min-height: 165px; grid-template-columns: minmax(60px, 1fr) 110px minmax(60px, 1fr); gap: 4px; padding: 8px; }
    .force-cart { width: 104px; transform: scale(0.82); }
    .force-cart.run-right { animation-name: forceCartRightMobile; }
    .force-cart.run-left { animation-name: forceCartLeftMobile; }
    .force-cart.run-balanced { animation-name: forceCartBalancedMobile; }
    @keyframes forceCartRightMobile { 0% { transform: scale(0.82) translateX(0); } 60% { transform: scale(0.82) translateX(35px); } 100% { transform: scale(0.82) translateX(0); } }
    @keyframes forceCartLeftMobile { 0% { transform: scale(0.82) translateX(0); } 60% { transform: scale(0.82) translateX(-35px); } 100% { transform: scale(0.82) translateX(0); } }
    @keyframes forceCartBalancedMobile { 0%, 100% { transform: scale(0.82) translateX(0); } 35% { transform: scale(0.82) translateX(-3px); } 70% { transform: scale(0.82) translateX(3px); } }
    .force-arrow span { min-width: 38px; padding: 4px; font-size: 9px; }
    .force-lab-controls { grid-template-columns: 1fr; gap: 7px; }
    .force-lab-actions { grid-template-columns: auto minmax(150px, 1fr); }
    .reaction-lab-heading { align-items: flex-start; }
    .reaction-equation-live { min-height: 46px; gap: 5px; padding: 7px; font-size: 14px; }
    .reaction-equation-live > strong { font-size: 20px; }
    .reaction-atom-table { grid-template-columns: 1fr 1fr; gap: 5px; }
    .reaction-atom-head { grid-column: 1 / -1; }
    .reaction-particle-stage { min-height: 150px; grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr); gap: 4px; padding: 6px; }
    .reaction-stage-arrow strong { font-size: 24px; }
    .reaction-particle-tray { gap: 4px; padding: 4px; }
    .reaction-molecule-group { min-width: 52px; gap: 3px; }
    .reaction-molecule i { width: 19px; height: 19px; font-size: 7px; }
    .reaction-coefficient-controls { grid-template-columns: 1fr 1fr; gap: 6px; }
    .reaction-coefficient-control { padding: 6px; }
    .reaction-stepper { grid-template-columns: 30px 30px 30px; }
    .reaction-stepper-button { width: 30px; height: 30px; }
    .reaction-stepper output { height: 30px; }
    .reaction-lab-actions { grid-template-columns: auto minmax(150px, 1fr); }
    .cell-transport-summary { gap: 6px; }
    .cell-transport-summary > div { grid-template-columns: 1fr; gap: 2px; padding: 7px; text-align: center; }
    .cell-transport-summary small { grid-column: 1; text-align: center; }
    .cell-transport-readout span { font-size: 7px; }
    .cell-transport-readout strong { font-size: 10px; }
    .cell-transport-stage { min-height: 190px; }
    .transport-cell { left: 42%; width: 138px; height: 138px; }
    .transport-nucleus { width: 43px; height: 43px; font-size: 8px; }
    .transport-membrane { border-width: 6px; }
    .transport-membrane::after { right: -18px; bottom: -11px; font-size: 7px; }
    .cell-transport-movement { left: 72%; width: 105px; }
    .cell-transport-movement::before { font-size: 31px; }
    .cell-transport-movement span { max-width: 105px; font-size: 8px; }
    .cell-transport-legend { right: 5px; bottom: 5px; }
    .cell-transport-legend b { display: none; }
    .cell-concentration-controls { gap: 6px; }
    .cell-concentration-control { padding: 7px; }
    .cell-prediction-options { gap: 5px; }
    .cell-prediction-option { min-height: 38px; padding: 5px; font-size: 9px; }
    .cell-transport-actions { grid-template-columns: auto minmax(150px, 1fr); }
    .sentence-workshop-summary { gap: 6px; }
    .sentence-workshop-summary > div { display: grid; gap: 2px; padding: 7px; text-align: center; }
    .sentence-workshop-summary strong { text-align: center; font-size: 11px; }
    .sentence-area-label { align-items: flex-start; }
    .sentence-area-label small { max-width: 170px; }
    .sentence-lane { min-height: 78px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
    .sentence-empty-slot,
    .sentence-selected-tile { min-height: 62px; }
    .sentence-selected-tile { grid-template-columns: 26px minmax(0, 1fr) 26px; padding: 5px 3px; }
    .sentence-move-button { width: 26px; height: 30px; font-size: 17px; }
    .sentence-selected-word { min-height: 34px; font-size: 11px; }
    .sentence-word-bank { gap: 5px; }
    .sentence-bank-token { min-height: 36px; padding: 6px 9px; font-size: 10px; }
    .sentence-workshop-actions { grid-template-columns: auto minmax(150px, 1fr); }
    .drawing-history-actions { justify-content: flex-end; }
    .free-draw-canvas { min-height: 220px; object-fit: contain; }
  }

  /* full-screen streak celebration (see scripts/streak.js) — sits above
     everything else on the page, including the PWA install button */
  .streak-scrim {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(10,14,11,0.6);
    display: flex; align-items: center; justify-content: center; padding: 20px;
    animation: streak-fade-in 0.2s ease-out;
  }
  @keyframes streak-fade-in { from { opacity: 0; } to { opacity: 1; } }
  .streak-card {
    background: #fff; color: #111827; border-radius: 24px;
    padding: 40px 32px 32px; max-width: 320px; width: 100%; text-align: center;
    box-shadow: 0 24px 70px rgba(0,0,0,0.35);
    font-family: "Inter", sans-serif;
    animation: streak-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  @keyframes streak-pop { from { opacity: 0; transform: scale(0.85) translateY(10px); } to { opacity: 1; transform: none; } }
  .streak-flame {
    width: 56px; height: 56px; margin: 0 auto 12px; fill: #fdb13a;
    filter: drop-shadow(0 4px 10px rgba(253, 177, 58, 0.45));
  }
  .streak-count { font: 800 44px/1 "Inter", sans-serif; letter-spacing: -0.02em; color: #172033; }
  .streak-msg { margin: 8px 0 26px; font: 600 15px/1.4 "Inter", sans-serif; color: #64748b; }
  .streak-continue {
    width: 100%; height: 48px; border: none; border-radius: 12px; cursor: pointer;
    background: linear-gradient(135deg, #12e0c6 0%, #3e9bfd 33%, #8b5cf6 66%, #f924c2 100%);
    color: #fff; font: 800 15px/1 "Inter", sans-serif;
  }

  /* Quick Practice: progress header on each quiz-card, and the completion
     screen shown after the last question (see scripts/practice.js). */
  .practice-progress {
    font: 700 11px/1 "Inter", sans-serif; text-transform: uppercase; letter-spacing: 0.06em;
    color: #8b5cf6; margin-bottom: 10px;
  }
  .practice-summary { text-align: center; max-width: 340px; }
  .practice-summary-icon { font-size: 44px; line-height: 1; margin-bottom: 8px; }
  .practice-summary-score { font: 800 40px/1 "Inter", sans-serif; color: #111827; }
  .practice-summary-label { margin: 6px 0 22px; font: 600 14px/1.4 "Inter", sans-serif; color: #64748b; }
  .practice-summary-actions { display: flex; flex-direction: column; gap: 10px; }
  .practice-summary-actions .quiz-choice { text-align: center; }
  #practiceLessonBtn {
    height: 48px; border: none; border-radius: 10px; cursor: pointer;
    background: linear-gradient(135deg, #12e0c6 0%, #3e9bfd 33%, #8b5cf6 66%, #f924c2 100%);
    color: #fff; font: 800 14px/1 "Inter", sans-serif;
  }

  .blk-heading { font-size: 26px; font-weight: 700; color: var(--ink-strong); line-height: 1.1; }
  .blk-heading svg { display: block; margin-top: 2px; height: 12px; }
  .blk-text { font: 400 17px/1.55 "Inter", sans-serif; color: var(--ink); }
  .blk-bullets { list-style: none; margin: 0; padding: 0; font: 400 16px/1.65 "Inter", sans-serif; }
  .blk-bullets li { display: flex; gap: 9px; }
  .blk-bullets li::before { content: "›"; color: var(--accent); font-weight: 700; }

  .blk-equation { font-size: 22px; color: var(--ink-strong); padding: 4px 0; }
  .blk-equation .katex { color: var(--ink-strong); }

  .blk-callout {
    position: relative;
    padding: 14px 16px;
    font-size: 22px;
    line-height: 1.3;
    color: var(--ink-strong);
  }
  .blk-callout .callout-box { position: absolute; inset: 0; z-index: 0; }
  .blk-callout .callout-body { position: relative; z-index: 1; display: flex; gap: 10px; align-items: flex-start; }

  .blk-table { width: 100%; border-collapse: collapse; font-size: 21px; }
  .blk-table th, .blk-table td { padding: 7px 12px; text-align: left; color: var(--ink); }
  .blk-table th { color: var(--ink-strong); font-weight: 700; }
  .blk-table th, .blk-table td { border-bottom: 1px solid #dfe3df; }

  .ice-equation { font-size: 22px; font-weight: 700; color: var(--ink-strong); text-align: center; margin-bottom: 14px; }

  .isothermal-process { gap: 10px; }
  .thermo-worked-solution { width: 100%; border-top: 2px solid rgba(15,118,110,0.24); }
  .thermo-worked-step { width: 100%; min-width: 0; padding: 11px 4px 12px 14px; border-bottom: 1px solid rgba(36,48,56,0.14); border-left: 3px solid rgba(15,118,110,0.48); }
  .thermo-worked-heading { display: block; margin-bottom: 7px; color: #0f766e; font: 800 13px/1.3 "Inter", sans-serif; }
  .thermo-formula, .thermo-substitution, .thermo-arithmetic { overflow-wrap: anywhere; color: var(--ink-strong); font: 650 12px/1.5 "Inter", sans-serif; }
  .thermo-formula { font-weight: 800; }
  .thermo-substitution { margin-left: 12px; color: #334155; }
  .thermo-arithmetic { margin-left: 24px; color: #475569; }
  .thermo-worked-answer { width: fit-content; max-width: 100%; margin-top: 7px; padding: 6px 9px; border: 2px solid var(--accent); border-radius: 5px; background: rgba(194,98,15,0.07); color: var(--ink-strong); font: 800 12px/1.35 "Inter", sans-serif; overflow-wrap: anywhere; }
  .thermo-sign-note { color: #475569; font: 600 11px/1.4 "Inter", sans-serif; text-align: center; }
  .ice-table .blk-table th:first-child, .ice-table .blk-table td:first-child { font-weight: 700; color: var(--ink-strong); }
  .ice-table .blk-table th:not(:first-child), .ice-table .blk-table td:not(:first-child) { text-align: center; }

  .punnett-cross-label { font-size: 22px; font-weight: 700; color: var(--ink-strong); text-align: center; margin-bottom: 14px; }
  .punnett-table { width: auto; margin: 0 auto; }
  .punnett-table th, .punnett-table td { text-align: center; border: 1px solid #dfe3df; padding: 10px 18px; font-size: 20px; }
  .punnett-table th { background: rgba(15,118,110,0.08); }
  .punnett-table td { font-weight: 700; }

  .blk-classification { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .blk-classification section {
    min-width: 0; padding: 12px; border: 1px solid rgba(159,214,176,0.65);
    border-radius: 10px; background: rgba(159,214,176,0.06);
  }
  .blk-classification h3 { margin: 0 0 6px; font: 600 15px/1.2 "Inter", sans-serif; color: var(--accent); }
  .blk-classification p { margin: 0; font: 400 14px/1.5 "Inter", sans-serif; color: var(--ink); }
  .blk-classification .blk-illcap { grid-column: 1 / -1; }

  /* Logical reasoning: sequence, elimination grid, and structured diagrams. */
  .reasoning-sequence { display: flex; flex-direction: column; gap: 12px; align-items: center; }
  .reasoning-sequence-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px; width: 100%; }
  .reasoning-sequence-cell {
    min-width: 54px; min-height: 48px; padding: 7px 10px; border: 2px solid rgba(29,78,216,0.45); border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center; background: rgba(29,78,216,0.06);
    font: 700 27px/1 "Caveat", cursive; color: var(--ink-strong);
  }
  .reasoning-sequence-cell.missing { border-color: var(--accent); border-style: dashed; background: rgba(194,98,15,0.08); }
  .reasoning-sequence-arrow { font: 700 20px/1 "Inter", sans-serif; color: var(--line); }
  .reasoning-rule { padding: 7px 12px; border-left: 3px solid var(--accent); background: rgba(194,98,15,0.06); font: 600 15px/1.35 "Inter", sans-serif; color: var(--ink); }
  .reasoning-logic-grid { display: flex; flex-direction: column; gap: 12px; }
  .reasoning-grid-scroll { max-width: 100%; overflow-x: auto; }
  .reasoning-grid-table { width: 100%; min-width: 330px; border-collapse: collapse; font: 600 13px/1.2 "Inter", sans-serif; color: var(--ink); }
  .reasoning-grid-table th, .reasoning-grid-table td { height: 42px; padding: 6px 9px; border: 1px solid rgba(100,116,139,0.28); text-align: center; }
  .reasoning-grid-table th { background: rgba(15,118,110,0.06); color: var(--ink-strong); }
  .reasoning-grid-table td.logic-yes { background: rgba(22,163,74,0.12); color: #15803d; font-weight: 800; }
  .reasoning-grid-table td.logic-no { background: rgba(220,38,38,0.07); color: #b91c1c; font-weight: 800; }
  .reasoning-grid-table td.logic-maybe { color: #64748b; }
  .reasoning-clues { margin: 0; padding-left: 24px; display: grid; gap: 5px; font: 500 14px/1.4 "Inter", sans-serif; color: var(--ink); }

  /* English grammar: parts-of-speech colour-coder (renderPosTag) */
  .blk-pos-tag { display: flex; flex-direction: column; gap: 14px; }
  .pos-sentence { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 14px; }
  .pos-word { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
  .pos-w { font: 700 30px/1 "Caveat", cursive; }
  .pos-p { font: 600 11px/1 "Inter", sans-serif; text-transform: uppercase; letter-spacing: 0.4px; opacity: 0.85; }
  .pos-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; }
  .pos-legend-item { display: inline-flex; align-items: center; gap: 5px; font: 500 13px/1.2 "Inter", sans-serif; color: var(--ink); text-transform: capitalize; }
  .pos-legend-item i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }

  /* English grammar: sentence / clause diagram (renderSentenceDiagram) */
  .blk-sentence-diagram { display: flex; flex-direction: column; gap: 12px; align-items: center; }
  .sd-row { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 10px; width: 100%; }
  .sd-chunk {
    flex: 0 1 auto; min-width: 0; padding: 10px 14px; border-radius: 12px;
    border: 2.5px solid var(--sd-color, var(--line)); background: color-mix(in srgb, var(--sd-color, #0f766e) 8%, transparent);
    display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center;
  }
  .sd-chunk.sd-dashed { border-style: dashed; }
  .sd-text { font: 700 22px/1.2 "Caveat", cursive; color: var(--ink-strong); }
  .sd-role { font: 600 11px/1 "Inter", sans-serif; text-transform: uppercase; letter-spacing: 0.4px; }
  .sd-join { align-self: center; font: 700 20px/1 "Caveat", cursive; color: var(--accent); padding: 0 2px; }
  .sd-structure {
    font: 600 15px/1.3 "Inter", sans-serif; color: var(--accent);
    padding: 5px 14px; border: 1.5px dashed var(--accent); border-radius: 999px;
  }

  /* English grammar: before→after transformation (renderTransformation) */
  .blk-transformation { display: flex; flex-direction: column; gap: 8px; }
  .xf-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .xf-label {
    flex: 0 0 auto; font: 700 12px/1 "Inter", sans-serif; text-transform: uppercase; letter-spacing: 0.5px;
    color: #fff; background: var(--ink); padding: 5px 10px; border-radius: 999px;
  }
  .xf-text { font: 500 22px/1.4 "Caveat", cursive; color: var(--ink-strong); }
  .xf-mark { font-weight: 700; }
  .xf-arrow { font: 600 14px/1.2 "Inter", sans-serif; color: var(--accent); padding-left: 6px; }

  /* English grammar: punctuation reference grid (renderPunctuation block) */
  .blk-punctuation { display: flex; flex-direction: column; gap: 12px; }
  .punc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
  .punc-card {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
    padding: 12px 10px; border-radius: 12px;
    border: 2px solid color-mix(in srgb, var(--punc-color, #0f766e) 55%, transparent);
    background: color-mix(in srgb, var(--punc-color, #0f766e) 7%, transparent);
  }
  .punc-mark { font: 700 40px/1 "Caveat", cursive; min-height: 40px; }
  .punc-name { font: 700 15px/1.1 "Inter", sans-serif; color: var(--ink-strong); }
  .punc-use { font: 400 13px/1.35 "Inter", sans-serif; color: var(--ink); }
  .punc-ex { font: 600 18px/1.2 "Caveat", cursive; color: var(--ink-strong); margin-top: 2px; }

  /* Vocabulary flashcards (renderVocabCard block) */
  .blk-vocab-card { display: flex; flex-direction: column; gap: 12px; }
  .vocab-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
  .vocab-card-item {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
    padding: 12px 10px; border-radius: 12px;
    border: 2px solid color-mix(in srgb, var(--vocab-color, #0f766e) 55%, transparent);
    background: color-mix(in srgb, var(--vocab-color, #0f766e) 7%, transparent);
  }
  .vocab-term-row { display: flex; align-items: center; gap: 6px; }
  .vocab-emoji { font-size: 22px; line-height: 1; }
  .vocab-term { font: 700 26px/1.1 "Caveat", cursive; }
  .vocab-speak-btn {
    border: none; background: none; cursor: pointer; padding: 2px 4px;
    font-size: 16px; line-height: 1; opacity: 0.75;
  }
  .vocab-speak-btn:hover { opacity: 1; }
  .vocab-pronunciation { font: 400 13px/1.3 "Inter", sans-serif; color: var(--ink); font-style: italic; }
  .vocab-definition { font: 700 13px/1.35 "Inter", sans-serif; color: var(--ink-strong); }
  .vocab-example { font: 600 17px/1.2 "Caveat", cursive; color: var(--ink); margin-top: 2px; }

  /* English grammar: conditional sentences (renderConditional block) */
  .blk-conditional { display: flex; flex-direction: column; gap: 14px; }
  .cond-item { display: flex; flex-direction: column; gap: 4px; }
  .cond-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .cond-type {
    flex: 0 0 auto; font: 700 12px/1 "Inter", sans-serif; text-transform: uppercase; letter-spacing: 0.4px;
    color: #fff; background: var(--accent); padding: 5px 10px; border-radius: 999px;
  }
  .cond-if {
    font: 600 20px/1.2 "Caveat", cursive; color: var(--ink-strong);
    padding: 4px 12px; border: 2px dashed #c2620f; border-radius: 10px;
    background: rgba(194,98,15,0.06);
  }
  .cond-arrow { font: 700 20px/1 "Inter", sans-serif; color: var(--accent); }
  .cond-result {
    font: 600 20px/1.2 "Caveat", cursive; color: var(--ink-strong);
    padding: 4px 12px; border: 2px solid #0f766e; border-radius: 10px;
    background: rgba(15,118,110,0.06);
  }
  .cond-meta { font: 500 13px/1.3 "Inter", sans-serif; color: var(--ink); padding-left: 2px; }

  .blk-diagram { width: 100%; }
  .blk-diagram svg { width: 100%; height: auto; overflow: visible; }
  .blk-diagram text,
  .blk-illustration text,
  .blk-plot text,
  .blk-numberline text,
  .blk-figure text { font-family: "Inter", sans-serif; fill: var(--ink); font-size: 17px; }
  .blk-diagram .node-label,
  .blk-illustration .node-label,
  .blk-figure .node-label,
  .blk-plot .node-label { fill: var(--ink-strong); font-weight: 700; font-size: 13px; }
  .blk-diagram .edge-label { fill: var(--accent); font-size: 15px; font-weight: 600; }

  /* multi-function plot legend (renderPlot() in whiteboard.js) */
  .plot-legend { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 6px; }
  .plot-legend-item { display: inline-flex; align-items: center; gap: 5px; font: 500 13px/1.2 "Inter", sans-serif; color: var(--ink); }
  .plot-legend-item i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
  .trend-gradient-legend { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; font: 500 12px/1.2 "Inter", sans-serif; color: var(--ink); }
  .trend-gradient-bar { width: 140px; height: 10px; border-radius: 5px; }
  .blk-illustration .force-pair-title { fill: var(--ink-strong); font-size: 16px; font-weight: 700; }
  .blk-illustration .force-label { fill: var(--accent); font-size: 15px; font-weight: 700; }
  .blk-illustration .force-label-secondary { fill: #1d4ed8; }
  .blk-illustration .force-note { fill: var(--ink); font-size: 14px; }
  .blk-illustration .column-digit { font-size: 24px; font-weight: 700; fill: var(--ink-strong); }
  .blk-illustration .result-digit { fill: var(--accent); }
  .blk-illustration .carry-mark { font-size: 13px; font-weight: 700; fill: var(--accent); }

  /* long division (renderLongDivision() in whiteboard.js) */
  .blk-long-division { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .division-headline { font: 700 19px/1.3 "Inter", sans-serif; color: var(--ink-strong); }
  .blk-long-division svg { width: 100%; max-width: 420px; height: auto; overflow: visible; display: block; }
  .blk-long-division text { font-family: "Inter", sans-serif; fill: var(--ink); }
  .blk-long-division .division-step-label { font-size: 13px; fill: var(--ink); }
  .blk-long-division .column-digit { font-size: 18px; font-weight: 700; fill: var(--ink-strong); }
  .blk-long-division .result-digit { fill: var(--accent); }
  #board[data-level="early"] .blk-text { font-size: 19px; }
  #board[data-level="early"] .blk-bullets { font-size: 18px; }
  #board[data-level="early"] .blk-classification h3 { font-size: 17px; }
  #board[data-level="early"] .blk-classification p { font-size: 16px; }
  #board[data-level="early"] .force-pair-title { font-size: 17px; }
  #board[data-level="early"] .force-label { font-size: 16px; }
  #board[data-level="early"] .force-note { font-size: 15px; }

  .blk-illustration, .blk-plot, .blk-numberline, .blk-figure, .blk-fraction, .blk-particle-states,
  .blk-process-scene, .blk-experiment-scene, .blk-template-scene {
    width: 100%; display: flex; flex-direction: column; align-items: center;
  }
  .blk-illustration svg, .blk-plot svg, .blk-numberline svg, .blk-figure svg, .blk-fraction svg,
  .blk-particle-states svg, .blk-process-scene svg, .blk-experiment-scene svg, .blk-template-scene svg {
    width: 100%; max-width: 380px; height: auto; overflow: visible; display: block;
  }
  .blk-illustration.force-pair svg { max-width: 560px; }
  .blk-illustration.periodic-table svg { max-width: 820px; }
  .blk-illustration.periodic-trend svg { max-width: 820px; }
  .blk-illustration.lewis-structure svg { max-width: 640px; }
  .blk-illustration.balanced-equation svg { max-width: 700px; }
  .blk-illustration.mole-conversion svg { max-width: 700px; }
  .blk-illustration.gas-law svg { max-width: 500px; }
  .blk-illustration.titration-curve svg { max-width: 480px; }
  .blk-illustration.galvanic-cell svg { max-width: 520px; }
  .blk-illustration.energy-diagram svg { max-width: 480px; }
  .blk-illustration.bohr-model svg { max-width: 420px; }
  .blk-illustration.electron-configuration svg { max-width: 460px; }
  .blk-illustration.crystal-lattice svg { max-width: 420px; }
  .blk-illustration.organic-structure svg { max-width: 560px; }
  .blk-illustration.reaction-pathway svg { max-width: 760px; }
  .blk-illustration.solubility-curve svg { max-width: 480px; }
  .blk-particle-states svg { max-width: 560px; }
  .blk-process-scene svg { max-width: 620px; }
  .blk-experiment-scene svg { max-width: 680px; }
  .blk-template-scene svg { max-width: 680px; }
  .blk-fraction text, .blk-particle-states text { font-family: "Inter", sans-serif; fill: var(--ink); }
  .blk-fraction .fraction-label, .blk-particle-states .state-title { fill: var(--ink-strong); font-size: 15px; font-weight: 600; }
  .blk-fraction .fraction-caption, .blk-particle-states .state-example { font-size: 13px; }
  .blk-process-scene text { font-family: "Inter", sans-serif; }
  .blk-process-scene .scene-title { fill: var(--ink-strong); font-size: 19px; font-weight: 800; }
  .blk-process-scene .scene-label { fill: var(--ink); font-size: 14px; font-weight: 800; }
  .blk-process-scene .scene-flow-label { fill: var(--accent); font-size: 13px; font-weight: 800; }
  .blk-illustration .scene-flow-label { fill: var(--accent); font-size: 11px; font-weight: 700; }
  .blk-experiment-scene text { font-family: "Inter", sans-serif; }
  .blk-experiment-scene .scene-title { fill: var(--ink-strong); font-size: 20px; font-weight: 850; }
  .blk-experiment-scene .scene-label { fill: var(--ink); font-size: 15px; font-weight: 800; }
  .blk-experiment-scene .scene-flow-label { fill: var(--accent); font-size: 13px; font-weight: 800; }
  .blk-experiment-scene .experiment-gas-label { fill: var(--ink-strong); font-size: 19px; font-weight: 850; }
  .blk-experiment-scene .experiment-water-label { fill: #1d4ed8; font-size: 22px; font-weight: 850; }
  .blk-template-scene text { font-family: "Inter", sans-serif; }
  .blk-template-scene .scene-title { fill: var(--ink-strong); font-size: 19px; font-weight: 850; }
  .blk-template-scene .scene-label { fill: var(--ink); font-size: 14px; font-weight: 800; }
  .blk-template-scene .scene-flow-label { fill: var(--accent); font-size: 14px; font-weight: 800; }
  .blk-template-scene .template-emoji { font-size: 30px; }
  .blk-template-scene .place-value-number { fill: var(--accent); font-size: 54px; font-weight: 900; }
  .blk-svg-asset img {
    display: block;
    width: min(100%, 440px);
    max-height: 520px;
    object-fit: contain;
    border: 1px solid rgba(15, 118, 110, 0.18);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
  }
  .blk-illcap { font: 400 14px/1.45 "Inter", sans-serif; color: var(--ink); text-align: center; margin-top: 4px; opacity: 0.9; }
  .unit-circle-value { font: 700 15px/1.4 "Inter", sans-serif; color: var(--accent); text-align: center; margin-top: 6px; }
  .value-readout { font: 700 15px/1.4 "Inter", sans-serif; color: var(--accent); text-align: center; margin-top: 6px; }
  .blk-generated-image {
    width: 100%; margin: 0; display: flex; flex-direction: column; align-items: center;
  }
  .generated-image-frame {
    position: relative; width: 100%; max-width: 520px; display: flex; justify-content: center;
  }
  .blk-generated-image img {
    display: block; width: 100%; max-width: 520px; max-height: 330px; object-fit: contain;
    border-radius: 16px; border: 1px solid rgba(159,214,176,0.55);
    box-shadow: 0 10px 28px rgba(0,0,0,0.2); background: rgba(255,255,255,0.04);
  }
  .generated-image-labels {
    width: min(100%, 520px); display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    margin-top: 9px;
  }
  .generated-image-labels span {
    padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(246,205,133,0.85);
    background: rgba(246,205,133,0.14); color: #ffe1a3;
    font: 700 13px/1.25 "Inter", sans-serif; letter-spacing: 0.01em;
    box-shadow: 0 4px 12px rgba(0,0,0,0.14);
  }
  .generated-image-callout {
    position: absolute; transform: translate(-50%, -50%); z-index: 2;
    max-width: 42%; padding: 5px 10px; border-radius: 999px;
    border: 1px solid rgba(246,205,133,0.95); background: rgba(31,48,39,0.86);
    color: #ffe1a3; font: 800 13px/1.2 "Inter", sans-serif; white-space: nowrap;
    box-shadow: 0 6px 14px rgba(0,0,0,0.28), 0 0 0 2px rgba(31,48,39,0.45);
    pointer-events: none;
  }
  .blk-generated-image figcaption {
    margin-top: 7px; font: 500 14px/1.4 "Inter", sans-serif; color: var(--ink); text-align: center;
  }

  /* deferred illustration: soft shimmer placeholder while the picture is
     still being generated server-side, gentle fade-in when it arrives */
  .generated-image-frame.loading {
    min-height: 150px;
    border-radius: 10px;
    background: linear-gradient(100deg, #f2efe4 40%, #faf8ef 50%, #f2efe4 60%);
    background-size: 200% 100%;
    animation: imageShimmer 1.6s ease-in-out infinite;
  }
  .generated-image-frame.loading img { opacity: 0; }
  .generated-image-frame img { transition: opacity .6s ease; }
  @keyframes imageShimmer { from { background-position: 120% 0; } to { background-position: -80% 0; } }
  /* generation failed: keep the caption/labels (still useful), drop the frame */
  .blk-generated-image.image-failed .generated-image-frame { display: none; }

  /* mobile-only drawer trigger + scrim for the lesson-chapters sidebar
     (hidden on desktop, where the sidebar is already always visible); the
     mobile media query below overrides this back to visible. Kept in this
     file (not controls.css) so the override reliably wins — controls.css
     loads after base.css, so an unconditional rule there would beat this
     file's own media-query-scoped rule regardless of viewport. */
  #mobileReelToggle, #lessonReelScrim { display: none; }

  /* covers phones and portrait tablets (iPad-class up to 1024px) — the goal
     is that the app reads as a touch-first mobile app on tablets too, not
     just phones (design.md's "Mobile Design" section, extended to tablet). */
  @media (max-width: 1024px) {
    header { min-height: 0; padding: 10px 12px; flex-wrap: wrap; gap: 8px; }
    header h1 { margin-right: auto; }
    /* tablets keep the full-size 100px logo (desktop parity); only phones
       shrink it — see the max-width:640px block below. */
    #statusText { display: none; }
    .lang-toggle-btn { padding: 0 9px; font-size: 11px; }
    #levelWrap { margin-left: 0; }
    #toneWrap span, #levelWrap span, #voiceWrap span { display: none; }
    #toneSelect, #levelSelect, #voiceModeSelect {
      max-width: 156px;
      padding: 8px 11px;
      font-size: 12px;
    }
    #chatToggle, #notesBtn { width: 34px; height: 34px; }

    /* whiteboard-first on mobile (design.md) — the reel sidebar needs more
       width than a phone screen can spare to sit permanently, so it opens
       as a slide-in drawer (mobileReelToggle/lessonReelScrim in
       lesson-session.js) instead of staying always on-screen. */
    #lessonReel { display: none !important; }
    #lessonReel.visible ~ #boardWrap, #lessonReel.visible.collapsed ~ #boardWrap { left: 0; }

    #mobileReelToggle {
      display: none;
      position: absolute;
      top: 12px;
      left: 12px;
      z-index: 40;
      width: 38px;
      height: 38px;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      background: var(--tb-panel, rgba(10,22,45,0.72));
      color: var(--tb-text, #e9edf7);
      backdrop-filter: blur(8px);
      box-shadow: 0 6px 16px rgba(0,0,0,0.2);
    }
    #mobileReelToggle.visible { display: flex; }
    #mobileReelToggle svg { width: 19px; height: 19px; }

    #lessonReelScrim {
      position: fixed;
      inset: 0;
      z-index: 65;
      background: rgba(6,13,28,0.55);
    }
    #lessonReelScrim.visible { display: block; }

    #lessonReel.mobile-open {
      display: flex !important;
      position: fixed;
      inset: 0 auto 0 0;
      width: 78vw;
      max-width: 300px;
      z-index: 70;
      background: var(--tb-panel-strong, rgba(10,22,45,0.92));
      box-shadow: 8px 0 28px rgba(0,0,0,0.35);
    }
    #lessonReel.mobile-open.collapsed { width: 78vw; max-width: 300px; }
    #lessonReel.mobile-open #reelList { display: flex; }
    #boardWrap { padding: 10px; }
    #learnerQuestionBar { margin: 40px 6px -1px; padding: 9px 68px 10px 11px; grid-template-columns: 1fr; gap: 5px; }
    #learnerQuestionLabel { width: max-content; margin-top: 0; }
    #learnerQuestionText { font-size: 19px; line-height: 1.22; }
    #board { padding: 58px 18px 100px; } /* extra top room clears the fixed mobileReelToggle button */
    #boardTitle { font-size: 27px; }
    #boardCols { flex-direction: column; gap: 22px; min-width: 0 !important; }
    #boardNavPad { right: 12px; bottom: 140px; }
    .board-col { width: 100%; }
    .blk-heading { font-size: 23px; }
    .blk-illustration svg, .blk-plot svg, .blk-numberline svg, .blk-figure svg, .blk-process-scene svg, .blk-experiment-scene svg, .blk-template-scene svg { max-width: 520px; }
  }

  /* Phones only: shrink the logo to 80px (tablets keep the 100px above). */
  @media (max-width: 640px) {
    header h1 img { height: 80px; }
    .thermo-substitution { margin-left: 6px; }
    .thermo-arithmetic { margin-left: 12px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .learner-question-char { transition: none; }
    .board-active-focus { animation: none; }
  }

  #boardEmpty {
    color: #6f8a78;
    font-size: 24px;
    text-align: center;
    margin-top: 18vh;
  }

  button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
  }