:root {
  font-family:
    -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
    sans-serif;
  color: #263e31;
  background: #f7f8f3;
  font-synthesis: none;
}
.learning-steps {display:flex; flex-shrink:0; justify-content:center; gap:42px; padding:12px 20px; background:#f8f9f5; border-bottom:1px solid #e0e6dc;}
.learning-steps span, .learning-steps .step-btn {display:flex; align-items:center; gap:8px; color:#7b897c; font-size:13px; padding:4px 8px; border-radius:6px;}
.learning-steps .step-btn:hover {background:#eaf0e5; color:#24644f;}
.learning-steps b {display:grid; place-items:center; width:23px; height:23px; border:1px solid #cdd6c8; border-radius:50%; font-size:11px;}
.learning-steps .current {color:#24644f; font-weight:600;}
.learning-steps .current b {background:#24644f; border-color:#24644f; color:white;}
.learning-steps .previous {color:#54735b;}
.learning-toolbar {display:flex; align-items:center; justify-content:space-between; flex-shrink:0; gap:12px; padding:10px 23px; border-bottom:1px solid #e0e6dc; background:#eff3e9; font-size:12px;}
.learning-toolbar > div {display:flex; align-items:center; flex-shrink:0; gap:6px;}
.lesson-shell {overflow-y:auto;}
.lesson-screen {width:min(1120px, 100%); margin:0 auto; padding:25px 28px;}
.lesson-intro {display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:18px;}
.lesson-eyebrow {font-size:12px; color:#6e846e; margin:0 0 8px;}
.lesson-intro h1 {font-size:27px; font-weight:600; letter-spacing:.02em; margin:0 0 10px;}
.lesson-intro p:not(.lesson-eyebrow) {font-size:13px; color:#6a7d69; margin:0; line-height:1.8;}
.lesson-source {font-size:11px; color:#6a7d69; white-space:nowrap;}
.lesson-film {height:clamp(280px, calc(100svh - 345px), 600px); background:#181c24; overflow:hidden; border-radius:8px;}
.lesson-film iframe {display:block; width:100%; height:100%; border:0;}
.lesson-unavailable {height:100%; display:grid; place-items:center; color:#d4dfd3; font-size:14px;}
.lesson-footer {display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 0 5px;}
.lesson-footer strong {font-size:14px; font-weight:500;}
.lesson-footer p {font-size:12px; color:#6a7d69; margin:7px 0 0;}
.lesson-footer-actions {display:flex; align-items:center; gap:10px; flex-shrink:0;}
.lesson-footer .secondary {background:#edf2e8; color:#24644f; padding:13px 18px; border-radius:4px; font-size:14px; white-space:nowrap;}
.lesson-footer .secondary:hover {background:#dfe9da;}
.lesson-footer .primary {padding:13px 24px; white-space:nowrap; font-size:14px;}
.mobile-lesson-note {display:none;}
@media (max-width:760px) {
  .learning-steps {gap:20px; padding:10px;}
  .learning-steps span, .learning-steps .step-btn {font-size:12px; gap:5px;}
  .learning-toolbar {padding:9px 12px; flex-wrap:wrap;}
  .learning-toolbar > div {flex-wrap:wrap;}
  .lesson-screen {padding:20px 12px;}
  .lesson-film {height:340px;}
  .mobile-lesson-note {display:block;}
  .lesson-intro {display:block;}
  .lesson-intro h1 {font-size:23px;}
  .lesson-source {display:block; margin-top:10px;}
  .lesson-footer {align-items:flex-start; flex-direction:column; gap:14px;}
  .lesson-footer-actions {width:100%; flex-direction:column;}
  .lesson-footer-actions button {width:100%;}
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
textarea {
  font: inherit;
}
button {
  cursor: pointer;
  border: 0;
  background: transparent;
  color: #355c46;
  padding: 8px 10px;
  border-radius: 5px;
  font-size: 12px;
}
button:hover {
  background: #e9efe4;
}
button:disabled {
  opacity: 0.55;
  cursor: wait;
}
button:focus-visible,
a:focus-visible,
textarea:focus-visible {
  outline: 2px solid #549272;
  outline-offset: 2px;
}
a {
  color: #24644f;
}
.app-shell {
  height: 100svh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.topbar {
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  gap: 14px;
  border-bottom: 1px solid #e0e6dc;
  background: #f8f9f5;
}
.topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.topbar .learning-steps {
  padding: 0;
  border-bottom: 0;
  background: transparent;
  gap: 24px;
}
.brand {
  font:
    700 26px Georgia,
    serif;
  letter-spacing: -1.3px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  flex-shrink: 0;
}
.brand span {
  font: 12px system-ui;
  letter-spacing: 1px;
  border-left: 1px solid #c7d0c3;
  padding-left: 14px;
  color: #6b7c68;
}
.lesson-name {
  font-size: 13px;
  color: #63715d;
  white-space: nowrap;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}
.mobile-panel-toggle {
  display: none;
  background: #e6eee2;
  color: #1f533f;
  font-weight: 600;
}
.save-status {
  font-size: 10px;
  color: #7d8975;
}
.workspace-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  position: relative;
}
.canvas-area {
  position: relative;
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.board-tools {
  min-height: 48px;
  background: #f6f8f2;
  border-bottom: 1px solid #e0e6dc;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px;
  gap: 10px;
  flex-shrink: 0;
}
.tool-cluster {
  display: flex;
  align-items: center;
  gap: 4px;
}
.tool-cluster button {
  white-space: nowrap;
}
.tool-cluster button[data-active="true"] {
  background: #dfe9da;
  color: #174b39;
  font-weight: 600;
}
.tool-cluster .help-tool {
  margin-left: 8px;
  border-left: 1px solid #d6dfd0;
  border-radius: 0 5px 5px 0;
  padding-left: 17px;
}
.board-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.board-secondary-btn {
  background: #edf2e8;
  color: #2f5640;
  padding: 7px 11px;
  font-size: 12px;
  white-space: nowrap;
}
.board-secondary-btn[data-active="true"] {
  background: #dfe9da;
  color: #174b39;
  font-weight: 600;
}
.check-answer-btn {
  padding: 8px 14px;
  font-weight: 600;
}
.board-surface {
  flex: 1;
  min-height: 0;
  position: relative;
}
.selection-context {
  font-size: 11px;
  color: #627359;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.selection-context span {
  flex: 1 1 120px;
}
.selection-context button {
  font-size: 11px;
  padding: 4px 9px;
  background: #edf2e8;
  white-space: nowrap;
}
.primary {
  background: #24644f;
  color: #fff;
  padding: 10px 15px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
}
.primary:hover {
  background: #164c36;
}
.teacher-panel {
  width: clamp(340px, 31vw, 420px);
  flex-shrink: 0;
  border-left: 1px solid #dfe5d9;
  background: #fff;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.teacher-heading {
  height: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px 0 18px;
  border-bottom: 1px solid #edf0e8;
}
.teacher-title {
  display: flex;
  align-items: center;
  min-width: 0;
}
.teacher-heading h2 {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
}
.teacher-heading h2::before {
  content: "•";
  color: #6c9772;
  margin-right: 7px;
}
.panel-mode-tabs {
  display: flex;
  align-items: stretch;
  gap: 2px;
  flex-shrink: 0;
}
.panel-mode-tabs button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 10px;
  border-radius: 4px 4px 0 0;
  font-size: 12px;
  color: #647766;
  white-space: nowrap;
}
.panel-mode-tabs button[aria-selected="true"] {
  color: #174b39;
  font-weight: 600;
}
.panel-mode-tabs button[aria-selected="true"]::after {
  content: "";
  position: absolute;
  inset: auto 4px 0;
  border-block-end: 2.5px solid #24644f;
}
.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b1beb1;
}
.live-dot.on {
  background: #1f8b4c;
  box-shadow: 0 0 0 3px #1f8b4c26;
}
.mobile-panel-close {
  display: none;
  font-size: 18px;
  line-height: 1;
  padding: 5px 8px;
}
.panel-flow {
  flex-shrink: 0;
  max-height: 44%;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #f7f9f4;
  border-bottom: 1px solid #e6ece0;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.flow-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
  font-size: 12px;
  color: #546958;
}
.flow-status-text {
  flex: 1 1 150px;
  line-height: 1.5;
}
.flow-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.flow-actions button:not(.primary) {
  background: #e9efe4;
  padding: 5px 9px;
  font-size: 11px;
}
.flow-actions button.primary {
  padding: 6px 11px;
  font-size: 11px;
}
.check-verdict {
  padding: 8px 11px;
  border-radius: 5px;
  font-size: 12px;
  line-height: 1.55;
  border-left: 3px solid #7f9484;
  background: #eef3ea;
}
.check-verdict.pass {
  border-left-color: #24644f;
  background: #e8f3ec;
  color: #1d4e3c;
}
.check-verdict.fail {
  border-left-color: #b77336;
  background: #fcf3ea;
  color: #7a4b21;
}
.check-verdict.unknown {
  border-left-color: #889282;
  background: #f2f4ef;
}
.check-verdict-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}
.check-verdict-head code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  background: #ffffffb8;
  padding: 1px 6px;
  border-radius: 3px;
}
.check-verdict p {
  margin: 0;
}
.messages {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 8px 18px 16px;
  min-height: 120px;
}
.composer-dock {
  flex-shrink: 0;
  background: #f9faf6;
  border-top: 1px solid #e6ece0;
  padding: 10px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.composer-dock form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid #cdd8c6;
  border-radius: 6px;
  background: #fff;
  padding: 8px;
}
.composer-dock textarea {
  width: 100%;
  min-width: 0;
  height: 54px;
  max-height: 130px;
  resize: vertical;
  border: 0;
  background: transparent;
  padding: 2px 4px;
  font-size: 13px;
  line-height: 1.55;
  color: #2c4434;
}
.composer-dock textarea:focus {
  outline: 0;
}
.composer-dock textarea::placeholder {
  color: #96a18d;
}
.composer-dock form button.primary {
  align-self: flex-end;
  padding: 7px 13px;
}
.live-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.live-stage-card {
  flex-shrink: 0;
  margin: 12px 14px 8px;
  padding: 12px 14px;
  background: #f3f7f0;
  border: 1px solid #dbe4d4;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.live-stage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.live-badge {
  font-size: 12px;
  font-weight: 600;
  color: #47604d;
}
.live-badge.active {
  color: #1b6543;
}
.live-stop-btn {
  background: #f7e6df;
  color: #8c3d22;
  font-size: 11px;
  padding: 5px 10px;
}
.live-guide {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: #5c705f;
}
.live-selection-tip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: #675234;
  background: #fbf4ea;
  border-radius: 4px;
  padding: 8px 10px;
}
.live-selection-tip.ready {
  color: #21573f;
  background: #e6f2ea;
}
.live-selection-tip button {
  background: #fff;
  border: 1px solid #d4c4ac;
  font-size: 11px;
  padding: 5px 9px;
  white-space: nowrap;
}
.live-start-btn {
  width: 100%;
  padding: 10px 14px;
  font-weight: 600;
}
.live-transcripts {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 6px 16px 14px;
}
.live-empty {
  font-size: 12px;
  color: #7f8d79;
  line-height: 1.7;
  margin: 12px 0;
}
.live-caption {
  margin-top: 10px;
  padding: 8px 10px;
  background: #f5f8f2;
  border-radius: 5px;
  font-size: 13px;
  line-height: 1.6;
  color: #365541;
}
.live-panel-foot {
  flex-shrink: 0;
  padding: 8px 16px 12px;
  border-top: 1px solid #edf0e8;
}
.diagram-panel-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.diagram-panel-body > .math-graph {
  height: 420px;
  min-height: 360px;
  flex-shrink: 0;
}
.diagram-caption {
  font-size: 12px;
  color: #718068;
  line-height: 1.7;
  margin: 0;
}
.message {
  font-size: 14px;
  line-height: 1.9;
  padding: 22px 0 7px;
  overflow-wrap: anywhere;
  animation: reveal 0.18s ease-out;
}
.speaker {
  font-size: 10px;
  color: #89967f;
  margin-bottom: 7px;
}
.message.user {
  border-left: 2px solid #cfdcc6;
  padding: 0 0 0 12px;
  margin: 18px 0 0;
  color: #52684a;
}
.message small {
  font-size: 10px;
  color: #a1794c;
  display: block;
  margin-top: 7px;
}
.message-action {
  display: block;
  margin-top: 12px;
  padding: 6px 0;
  font-size: 11px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.math-text {
  display: inline-block;
  max-width: 100%;
  overflow: auto;
  vertical-align: middle;
}
.teacher-bottom {
  padding: 15px 22px 20px;
  border-top: 1px solid #edf0e8;
}
.mastery {
  font-size: 10px;
  color: #7d8a70;
  display: block;
  line-height: 1.8;
}
.activity {
  font-size: 12px;
  color: #598160;
  line-height: 1.8;
}
.activity button {
  float: right;
  font-size: 11px;
}
.result {
  font-size: 12px;
  line-height: 1.8;
  margin-bottom: 9px;
}
.result.pass {
  color: #24644f;
}
.result.fail {
  color: #a06a37;
}
.error {
  background: #fff0e7;
  color: #995b36;
  font-size: 12px;
  line-height: 1.6;
  padding: 8px 12px;
  margin-top: 7px;
}
.error button {
  float: right;
  color: inherit;
  padding: 0 3px;
}
.loading {
  padding: 40px;
  font-size: 14px;
  color: #728368;
}
.math-graph {
  width: 100%;
  height: 100%;
  background: #fff;
  border: 1px solid #d6dfce;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: system-ui;
  user-select: none;
}
.graph-title {
  height: 35px;
  padding: 7px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: #64765c;
}
.graph-title button {
  font-size: 11px;
  padding: 3px 7px;
}
.math-graph .jxgbox {
  flex: 1;
  min-height: 150px;
  position: relative;
  width: 100%;
  background: #fff;
  border: 0;
  touch-action: none;
}
.graph-numbers {
  display: flex;
  gap: 15px;
  justify-content: space-around;
  flex-shrink: 0;
  padding: 12px 9px;
  border-top: 1px solid #ebefe5;
  font-size: 10px;
  color: #7b886e;
}
.graph-numbers b {
  display: block;
  font-size: 18px;
  color: #284f37;
  margin-top: 5px;
}
.graph-controls {
  display: flex;
  gap: 14px;
  padding: 5px 12px 9px;
}
.graph-controls label {
  flex: 1;
  font-size: 10px;
  color: #7b886e;
}
.graph-controls input {
  display: block;
  width: 100%;
  border: 1px solid #ccd8c3;
  border-radius: 4px;
  font-size: 18px;
  text-align: center;
  color: #34553c;
  padding: 4px;
  margin-top: 4px;
  background: #fff;
}
.graph-hint {
  font-size: 10px;
  color: #8c987f;
  padding: 4px 12px 9px;
  margin: 0;
  line-height: 1.5;
}
.graph-comparison {
  font-size: 11px;
  line-height: 1.6;
  padding: 6px 12px;
  color: #4d6442;
}
.excalidraw {
  --color-primary: #24644f;
  --color-primary-darker: #194c37;
  --color-primary-light: #e4edde;
  --island-bg-color: #fffffff5;
  --color-surface-lowest: #fff;
  --button-hover-bg: #edf1e7;
  --button-active-bg: #e2ecd9;
}
.excalidraw .App-toolbar {
  box-shadow: 0 2px 10px #314c2020;
}
.excalidraw .footer-center {
  display: none;
}
.excalidraw .zoom-actions {
  display: none;
}
.excalidraw .help-icon,
.excalidraw .layer-ui__wrapper__footer-right {
  display: none;
}
.excalidraw .sidebar-trigger {
  display: none;
}
.excalidraw .embeddable__iframe {
  background: #fff;
}
@keyframes reveal {
  from {
    opacity: 0.6;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 1100px) {
  .lesson-name {
    display: none;
  }
  .topbar .learning-steps {
    gap: 12px;
  }
  .topbar .learning-steps span {
    font-size: 12px;
  }
  .teacher-panel {
    width: 330px;
  }
  .board-tools {
    padding: 4px 10px;
    gap: 6px;
  }
  .tool-cluster button {
    padding: 7px;
    font-size: 11px;
  }
  .primary {
    padding: 8px 10px;
  }
}
@media (max-width: 900px) {
  .topbar {
    padding: 0 14px;
    height: 54px;
    gap: 8px;
  }
  .topbar .learning-steps {
    display: none;
  }
  .brand {
    font-size: 24px;
    gap: 8px;
  }
  .brand span {
    display: none;
  }
  .save-status {
    display: none;
  }
  .mobile-panel-toggle {
    display: inline-flex;
  }
  .mobile-panel-close {
    display: inline-flex;
  }
  .board-tools {
    overflow: auto;
    min-height: 44px;
  }
  .tool-cluster button {
    padding: 8px 7px;
  }
  .teacher-panel {
    display: none;
  }
  .teacher-panel.mobile-open {
    display: flex;
    position: absolute;
    inset: 0 0 0 auto;
    z-index: 15;
    width: min(390px, 100%);
    box-shadow: -8px 0 28px #1e332224;
  }
  .composer-dock textarea {
    font-size: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

.excalidraw .App-toolbar,
.excalidraw .HintViewer {
  display: none !important;
}
.excalidraw .App-menu_top,
.excalidraw .App-menu__left {
  display: none !important;
}
.excalidraw .mobile-misc-tools-container {
  display: none !important;
}
.selection-overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  cursor: crosshair;
  touch-action: none;
  background: #ffffff06;
}
.selection-tip {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: #24644f;
  color: #fff;
  font-size: 12px;
  padding: 9px 14px;
  border-radius: 4px;
  pointer-events: none;
}
.selection-box {
  position: absolute;
  border: 1.5px solid #24644f;
  background: #24644f12;
  pointer-events: none;
}

.board-tools {
  overflow-x: auto;
}

.coach-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 25px;
  font-size: 11px;
  color: #84917c;
  margin: 0 0 5px;
  flex-wrap: wrap;
}
.coach-strip button {
  font-size: 11px;
  padding: 4px 8px;
  background: #edf2e8;
}
.coach-note {
  color: #5f7756;
  flex: 1;
  min-width: 180px;
}
.diagram-panel-body .graph-hint:last-child {
  display: none;
}
/* Repair stays inside the unified right panel alongside the preserved original whiteboard. */
.panel-flow .rescue-panel {
  flex-shrink: 0;
  margin: 0;
  padding: 12px 14px;
  border-left: 3px solid #54725d;
  background: #eef3e8;
  border-radius: 4px;
  color: #24382b;
  max-height: none;
  overflow-y: visible;
}
.rescue-heading, .rescue-actions, .rescue-answer { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rescue-heading { justify-content: space-between; }
.rescue-heading span, .rescue-actions span { font-size: 11px; color: #596b5e; }
.rescue-panel p { margin: 8px 0; font-size: 13px; line-height: 1.55; }
.rescue-panel .rescue-question { font-weight: 600; }
.rescue-explanation { max-width: 100%; }
.rescue-answer { margin: 8px 0; }
.rescue-answer label { font-size: 12px; }
.rescue-answer input { flex: 1; min-width: 120px; max-width: 100%; padding: 7px 10px; border: 1px solid #a9b6a8; border-radius: 6px; background: white; font: inherit; font-size: 13px; }
.rescue-pass { color: #26603a; font-weight: 600; }

.proof-panel {flex-shrink:0; max-height:32svh; overflow:auto; background:#f5f7ef; padding:8px 16px; border-bottom:1px solid #e0e6dc;}
.proof-panel summary {cursor:pointer; font-size:14px; font-weight:600;}
.proof-panel p {font-size:12px; margin:6px 0;}
.proof-fields {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:8px 0;}
.proof-fields label {display:grid; gap:4px; font-size:12px; min-width:0;}
.proof-fields input, .proof-fields select, .rescue-answer select {width:100%; min-width:0; padding:6px 8px; font:inherit; color:inherit; border:1px solid #b8c8b7; border-radius:4px; background:#fff;}
.rescue-answer select {width:auto; min-width:90px;}
@media (max-width:760px) {
  .proof-fields {grid-template-columns:repeat(2,minmax(0,1fr));}
}

.workbook-board-panels { flex-shrink:0; max-height:38svh; overflow:auto; }
.workbook-board-panels .proof-panel { max-height:none; }
.workbook-board-panels .proof-fields { grid-template-columns:repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.workbook-question-body { display:flex; align-items:flex-start; gap:14px; margin-top:6px; }
.workbook-question-copy { flex:1; min-width:0; }
.workbook-stem { white-space:pre-line; }
.workbook-board-figure { display:block; max-width:210px; max-height:126px; object-fit:contain; flex-shrink:0; border:1px solid #dfe5da; border-radius:8px; background:#fff; padding:4px; }
@media (max-width:760px) {
  .workbook-question-body { flex-direction:column; }
  .workbook-board-figure { max-width:100%; max-height:140px; }
}
.workbook-hint { margin-top:8px; }
.workbook-hint ul { padding-left:20px; margin:6px 0; font-size:13px; }
.lesson-film .workbook-mp4 { display:block; width:100%; height:100%; background:#132922; }
.workbook-video-chapters { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.workbook-video-chapters button[aria-current="true"] { background:#d5e7d9; }