@charset "UTF-8";
:root { color: #172549; font-family: Inter, "Microsoft YaHei", sans-serif; }
      * { box-sizing: border-box; }
      body { min-width: 0; margin: 0; background: linear-gradient(135deg, #f8fbff, #f4f8ff); }
      button, textarea, input { font: inherit; }
      .app-shell { width: 100%; max-width: none; min-height: 100vh; margin: 0; padding: 16px 18px 20px; }
      .topbar { display: flex; align-items: center; gap: 26px; height: 64px; margin: -16px -18px 16px; padding: 0 24px; border-bottom: 1px solid #dce5f2; background: #fff; box-shadow: 0 2px 12px #18376608; }
      .brand { display: flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 800; letter-spacing: -.5px; white-space: nowrap; }
      .brand-mark { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 8px; background: #1670e9; box-shadow: 0 4px 10px #1670e944; }
      .brand-mark::after { content: "∫"; color: #fff; font-size: 22px; font-weight: 800; }
      .tagline { color: #66748e; font-size: 14px; }
      .top-links { display: flex; gap: 22px; margin-left: auto; color: #26375c; font-size: 14px; }
      .top-links span::before { margin-right: 7px; color: #1c4f9d; }
      .top-links span:first-child::before { content: "▣"; }
      .top-links span:last-child::before { content: "◯"; }
      .workspace { display: grid; grid-template-columns: 350px minmax(560px, 1fr) 390px; gap: 16px; align-items: start; }
      .panel, .stage-panel, .inspector { border: 1px solid #dce5f2; border-radius: 11px; background: #fff; box-shadow: 0 6px 20px #18376608; }
      .left-panel { overflow: hidden; }
      .panel-heading { display: flex; align-items: center; gap: 10px; margin: 0; padding: 16px 16px 12px; font-size: 16px; font-weight: 800; }
      .panel-heading::before { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 5px; background: #126bea; color: #fff; font-size: 13px; }
      .upload-heading::before { content: "▣"; }
      .lesson-heading::before { content: "▷"; }
      .promptbar { display: flex; flex-direction: column; }
      .upload-zone { position: relative; order: 1; display: flex; min-height: 150px; margin: 0 14px; align-items: center; justify-content: center; border: 1px dashed #bed0e8; border-radius: 9px; color: #64728a; cursor: pointer; text-align: center; }
      .upload-zone:hover, .upload-zone.is-drag-over { border-color: #2378ed; background: #f2f7ff; }
      .upload-zone input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
      .upload-icon { display: block; margin-bottom: 8px; color: #2879e8; font-size: 55px; line-height: .8; }
      .upload-icon::before { content: "▰"; }
      .upload-zone strong { display: block; color: #263656; font-size: 15px; }
      .upload-zone small { display: block; margin-top: 8px; font-size: 12px; }
      .image-actions { order: 2; display: flex; gap: 8px; margin: 8px 14px 9px; }
      .image-action { flex: 1; height: 40px; display: grid; place-items: center; border: 1px solid #0869ec; border-radius: 6px; background: #fff; color: #0869ec; font-size: 14px; font-weight: 700; cursor: pointer; }
      .image-action.camera-action { display: none; }
      .upload-action { order: 5; width: calc(100% - 28px); height: 42px; margin: 0 14px 9px; border: 0; border-radius: 6px; background: #0869ec; color: #fff; font-weight: 700; cursor: pointer; }
      .upload-action:hover, .send-question:hover { background: #f2f7ff; }
      .upload-action::before { content: "↥"; margin-right: 8px; font-size: 18px; }
      .upload-tip { order: 3; margin: -3px 0 7px; color: #8792a7; font-size: 12px; text-align: center; }
      .question-image-preview, .tutor-image-preview { order: 3; margin: 0 14px 10px; color: #1f6edb; font-size: 12px; }
      .question-image-preview button, .tutor-image-preview button { margin-left: 8px; border: 0; background: transparent; color: #70809a; cursor: pointer; }
      .problem-editor { order: 4; border-top: 1px solid #e7edf6; padding: 10px 14px; }
      .editor-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 13px; font-weight: 700; }
      .editor-title span { color: #8b96a9; font-weight: 400; }
      .editor-title button { border: 0; background: none; color: #667892; cursor: pointer; }
      .problem-input-group { display: block; }
      .problem-input-group > span, .json-input-group, .prompt-actions, .examples, .json-error { display: none; }
      #problemInput { width: 100%; height: 96px; resize: vertical; border: 1px solid #d8e2f0; border-radius: 7px; padding: 9px; color: #263656; line-height: 1.5; }
      .example-list { display: none; border-top: 1px solid #e7edf6; padding: 12px 14px 14px; }
      .example-list.has-multiple { display: block; }
      .example-list h3 { margin: 0 0 10px; font-size: 13px; }
      .example-list h3 span { color: #8b96a9; font-weight: 400; }
      .example-list button { display: flex; align-items: flex-start; gap: 9px; width: 100%; margin-top: 8px; padding: 10px 12px; border: 1px solid #dce5f1; border-radius: 7px; background: #fff; color: #3c4b66; font-size: 12px; text-align: left; cursor: pointer; }
      .example-list button.is-selected { border-color: #2378ed; box-shadow: inset 3px 0 #2378ed; }
      .example-list button:hover { background: #f6faff; }
      .recognition-item-check { display: inline-flex; flex: 0 0 18px; align-items: center; justify-content: center; width: 18px; height: 18px; margin-top: 1px; border: 1px solid #b8c8dc; border-radius: 5px; color: #fff; font-size: 12px; font-weight: 800; }
      .example-list button.is-selected .recognition-item-check { border-color: #2378ed; background: #2378ed; }
      .recognition-item-content { display: grid; gap: 3px; min-width: 0; }
      .recognition-item-content strong { color: #25466b; font-size: 11px; }
      .recognition-item-content > span { line-height: 1.55; }
      body.mobile-preview-mode .left-panel { max-height: calc(100dvh - 20px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
      body.mobile-preview-mode #recognizedQuestionItems { max-height: 42dvh; overflow-y: auto; padding-right: 2px; overscroll-behavior: contain; }
      .stage-panel { position: relative; display: flex; min-width: 0; flex-direction: column; padding: 0 14px 14px; }
      .stage-panel .panel-heading { padding-left: 0; }
      #stage { display: block; width: 100%; min-height: 440px; height: auto; aspect-ratio: 16 / 11; border: 1px solid #d8e3f1; border-radius: 9px; background: #fff; }
      .stage-loading-overlay { position: absolute; inset: 56px 14px 78px; display: grid; place-items: center; border-radius: 9px; background: #ffffffcc; }
      .loading-card { width: min(560px, calc(100% - 32px)); display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 8px 12px; padding: 18px 22px; border: 1px solid #c8daf1; border-radius: 12px; background: #fff; box-shadow: 0 12px 30px #2042722b; text-align: left; }
      .loading-spinner { width: 24px; height: 24px; margin: auto; border: 3px solid #d9e7fb; border-top-color: #2378ed; border-radius: 50%; animation: spin .7s linear infinite; }
      @keyframes spin { to { transform: rotate(360deg); } }
      .timeline { display: flex; align-items: center; gap: 10px; padding: 7px 8px 4px; color: #70809c; font-size: 12px; }
      #scrubber { flex: 1; height: 4px; accent-color: #2478e8; }
      #scrubber::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: #dce5f1; }
      #scrubber::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -5px; border: 0; border-radius: 50%; background: #2478e8; appearance: none; }
      #scrubber::-moz-range-track { height: 4px; border-radius: 2px; background: #dce5f1; }
      #scrubber::-moz-range-progress { height: 4px; border-radius: 2px; background: #2478e8; }
      #scrubber::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #2478e8; }
      .controls { order: 5; display: flex; align-items: center; justify-content: center; gap: 26px; padding: 18px 16px; }
      .controls button { height: 42px; border: 1px solid #d6e2f3; border-radius: 20px; background: #fff; color: #176de0; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease; }
      .controls button:hover { transform: translateY(-1px); box-shadow: 0 4px 12px #18376618; }
      #playPauseButton { order: 2; width: 64px; height: 64px; flex: 0 0 64px; border: 0; border-radius: 50%; background: #1e79ea; box-shadow: 0 7px 14px #1970db55; color: #fff; font-size: 0; }
      #playPauseButton::after { content: "❚❚"; font-size: 19px; letter-spacing: 2px; }
      #playPauseButton.is-paused::after { content: "▶"; font-size: 24px; letter-spacing: 0; }
      #restartButton { order: 4; font-size: 0; }
      #restartButton::after { content: "↻ 重新演示"; font-size: 13px; }
      #previousStepButton { order: 1; font-size: 0; }
      #previousStepButton::after { content: "‹  上一步"; font-size: 13px; }
      #nextStepButton { order: 3; font-size: 0; }
      #nextStepButton::after { content: "下一步  ›"; font-size: 13px; }
      .speed-control { position: absolute; top: 14px; right: 16px; display: flex; align-items: center; gap: 8px; color: #61718d; font-size: 14px; }
      .speed-options { display: flex; overflow: hidden; border: 1px solid #d6e2f3; border-radius: 6px; background: #fff; }
      .speed-options button { min-width: 42px; height: 28px; border: 0; border-left: 1px solid #d6e2f3; background: #fff; color: #61718d; cursor: pointer; }
      .speed-options button:first-child { border-left: 0; }
      .speed-options button.is-active { background: #2478e8; color: #fff; }
      .speed-control input { display: none; }
      .inspector { padding: 10px; }
      .lesson-summary-section { background: linear-gradient(135deg, #effcf5, #fff); overflow: hidden; }
      .lesson-summary-section h2, .tutor-question-section h2 { margin: 0; padding: 13px 14px; color: #168450; font-size: 16px; }
      .lesson-summary-section h2::before { content: "✿"; margin-right: 10px; }
      .lesson-summary { min-height: 96px; padding: 10px 14px; background: #fff; }
      .lesson-summary p, .lesson-summary li { color: #197747; font-weight: 700; }
      .tutor-question-section { margin-top: 8px; background: linear-gradient(135deg, #f7faff, #fff); overflow: hidden; }
      .tutor-question-section h2 { color: #176ee0; }
      .tutor-question-section h2::before { content: "▰"; margin-right: 10px; }
      .tutor-question-form { margin-top: 8px; padding: 0 10px 8px; }
      .tutor-question-tips { margin: 0 0 6px; padding: 7px 8px; border: 1px solid #d6e7fb; border-radius: 8px; background: #f8fbff; }
      .tutor-question-tips > span { display: block; margin-bottom: 5px; color: #53749c; font-size: 11px; font-weight: 700; }
      .tutor-question-tips > div { display: flex; flex-wrap: wrap; gap: 6px; }
      .tutor-question-tips button { min-height: 23px; padding: 3px 7px; border: 1px solid #c4dcf8; border-radius: 999px; background: #fff; color: #2769bd; font-size: 11px; font-weight: 650; line-height: 1.2; cursor: pointer; }
      .tutor-question-tips button:hover { border-color: #7eafe9; background: #edf6ff; color: #125db7; }
      #tutorQuestionInput { width: 100%; min-height: 72px; resize: vertical; border: 1px solid #d7e2f2; border-radius: 7px; padding: 9px 10px; }
      .tutor-question-footer { display: grid; justify-items: end; gap: 10px; margin-top: 6px; }
      .tutor-image-row { display: flex; align-items: center; gap: 7px; }
      .tutor-question-footer .tutor-image-preview { order: initial; min-width: 0; margin: 0; }
      body:not(.mobile-preview-mode) .tutor-question-actions { display: flex; gap: 8px; }
      body:not(.mobile-preview-mode) .tutor-question-actions button,
      body:not(.mobile-preview-mode) .tutor-question-actions button[type="submit"] { flex: 0 0 auto; width: auto; min-height: 36px; height: 36px; padding: 7px 10px; font-size: 12px; font-weight: 720; line-height: 1.2; white-space: nowrap; }
      .tutor-image-picker { color: #2d73d7; font-size: 12px; cursor: pointer; }
      .tutor-image-picker input { width: 1px; opacity: 0; }
      .tutor-question-actions { display: flex; gap: 8px; }
      .tutor-question-actions button { min-height: 30px; height: 30px; padding: 5px 10px; border: 1px solid #d3e0f3; border-radius: 6px; background: #fff; color: #2a5b9f; cursor: pointer; }
      .tutor-question-actions .send-question, #tutorQuestionButton { border-color: #126bea; background: #126bea; color: #fff; }
      .tutor-question-status, .flyai-lesson-status, .json-error { margin: 8px 0 0; font-size: 12px; }
      .auto-followup-sequence { position: relative; display: flex; min-width: 0; flex: 0 1 auto; align-items: center; margin: 0 0 0 auto; padding: 0; }
      .auto-followup-sequence[hidden] { display: none; }
      .auto-followup-sequence-list { display: flex; min-width: 0; max-width: 100%; flex-wrap: nowrap; gap: 4px; overflow-x: auto; scrollbar-width: thin; }
      .auto-followup-sequence-item { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; }
      .auto-followup-sequence-label { max-width: 12em; overflow: hidden; text-overflow: ellipsis; }
      .auto-followup-sequence-item:disabled { cursor: default; opacity: .72; }
      .auto-followup-sequence-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 999px; background: currentColor; opacity: .68; }
      .auto-followup-sequence-item.is-running .auto-followup-sequence-dot { animation: auto-followup-dot-pulse 1.4s ease-in-out infinite; }
      .auto-followup-sequence-item:hover .auto-followup-sequence-dot { animation-play-state: paused; opacity: .68; }
      .auto-followup-sequence-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
      .auto-followup-sequence-status.is-error { color: #b14a4a; }
      @keyframes auto-followup-dot-pulse { 0%, 100% { opacity: .38; } 50% { opacity: .82; } }
      .debug-panel { margin-top: 12px; color: #64728a; }
      .debug-panel section { margin: 10px 0; }
      .debug-panel h2 { font-size: 13px; }
      .action-list { display: flex; gap: 12px; padding: 0; list-style: none; }
      .action-list li { font-size: 12px; }
      @media (max-width: 1150px) { body { min-width: 0; } .workspace { grid-template-columns: 300px minmax(460px, 1fr); } .inspector { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .tutor-question-section { margin-top: 0; } }
      @media (max-width: 760px) { .app-shell { padding: 10px; } .topbar { height: 54px; margin: -10px -10px 10px; padding: 0 12px; } .tagline, .top-links { display: none; } .workspace { display: flex; flex-direction: column; } .left-panel { order: 2; } .stage-panel { order: 1; } .inspector { order: 3; display: block; } .image-action.camera-action { display: grid; } #stage { min-height: 0; } .controls { gap: 8px; } .speed-control { top: 10px; right: 12px; } }
      /* Override the legacy desktop grid so the header and three-column page share one flow. */
      body:not(.mobile-preview-mode) .app-shell { display: block; width: 100%; height: auto; min-height: 100vh; }
      body:not(.mobile-preview-mode) .topbar { display: flex; flex-direction: row; align-items: center; gap: 26px; width: auto; height: 64px; min-height: 64px; margin: -16px -18px 16px; padding: 0 24px; border: 0; border-bottom: 1px solid #dce5f2; overflow: visible; }
      body:not(.mobile-preview-mode) .topbar .brand { min-height: 0; align-items: center; padding: 0; border: 0; }
      body:not(.mobile-preview-mode) .topbar .tagline { display: block; margin: 0; line-height: 1.2; white-space: nowrap; }
      body:not(.mobile-preview-mode) .workspace { display: grid; width: 100%; height: auto; min-height: 0; grid-template-columns: 350px minmax(560px, 1fr) 390px; align-items: start; }
      body:not(.mobile-preview-mode) .left-panel,
      body:not(.mobile-preview-mode) .stage-panel,
      body:not(.mobile-preview-mode) .inspector { grid-column: auto; grid-row: auto; height: auto; min-height: 0; }
      body:not(.mobile-preview-mode) .left-panel { max-height: calc(100dvh - 100px); overflow-y: auto; overscroll-behavior: contain; }
      body:not(.mobile-preview-mode) .stage-panel { display: flex; grid-template-rows: none; justify-content: flex-start; gap: 0; }
      body:not(.mobile-preview-mode) .stage-panel > .controls { display: flex; grid-template-columns: none; min-width: 0; min-height: 100px; align-items: center; justify-content: center; gap: 26px; }
      body:not(.mobile-preview-mode) .stage-panel > .controls button { min-width: 0; min-height: 42px; padding: 0 20px; }
      body:not(.mobile-preview-mode) .stage-panel > .controls #playPauseButton { min-width: 64px; min-height: 64px; padding: 0; }
      body:not(.mobile-preview-mode) .stage-panel > .controls .speed-control { position: absolute; display: flex; width: auto; min-width: 0; min-height: 0; height: 28px; padding: 0; border: 0; border-radius: 0; background: transparent; grid-template-columns: none; gap: 8px; font-size: 14px; font-weight: 400; }
      body:not(.mobile-preview-mode) .stage-panel > .controls .speed-options button { min-width: 42px; min-height: 28px; height: 28px; padding: 0 8px; font-size: 14px; line-height: 1; }
      /* Keep the right panel usable when its answer is longer than the viewport. */
      body:not(.mobile-preview-mode) .inspector { height: calc(100dvh - 100px); max-height: calc(100dvh - 100px); display: flex; flex-direction: column; gap: 12px; padding: 0; overflow: hidden; }
      body:not(.mobile-preview-mode) .inspector > .lesson-summary-section { min-height: 0; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
      body:not(.mobile-preview-mode) .inspector > .tutor-question-section { flex: 0 0 auto; }
      body:not(.mobile-preview-mode) .inspector > .lesson-summary-section,
      body:not(.mobile-preview-mode) .inspector > .tutor-question-section { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
      body:not(.mobile-preview-mode) .inspector > .lesson-summary-section { padding: 0; }
      body:not(.mobile-preview-mode) .inspector > .lesson-summary-section .lesson-summary { background: transparent; }
      body:not(.mobile-preview-mode) .inspector > .tutor-question-section { border-top: 1px solid #e8edf5; padding: 12px 0 0; }
      body.mobile-preview-mode .inspector > .lesson-summary-section,
      body.mobile-preview-mode .inspector > .tutor-question-section { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
      body.mobile-preview-mode .inspector > .lesson-summary-section { padding: 0; }
      body.mobile-preview-mode .inspector > .lesson-summary-section .lesson-summary { background: transparent; }
      body.mobile-preview-mode .inspector > .tutor-question-section { margin-top: 0; border-top: 1px solid #e8edf5; padding: 12px 0 0; }
      body:not(.mobile-preview-mode) .inspector > .lesson-summary-section > h2,
      body:not(.mobile-preview-mode) .inspector > .tutor-question-section > h2,
      body.mobile-preview-mode .inspector > .lesson-summary-section > h2,
      body.mobile-preview-mode .inspector > .tutor-question-section > h2 { margin: 0; padding: 13px 14px 10px; border-bottom: 1px solid #e8edf5; }
      body:not(.mobile-preview-mode) .inspector > .tutor-question-section > h2 { padding: 9px 14px 8px; }
      body:not(.mobile-preview-mode) .inspector > .tutor-question-section { margin-top: 0; }
      body:not(.mobile-preview-mode) .stage-panel > .controls .speed-options,
      body.mobile-preview-mode .stage-panel > .controls .speed-options { gap: 4px; overflow: visible; border: 0; border-radius: 0; background: transparent; }
      body:not(.mobile-preview-mode) .stage-panel > .controls .speed-options button,
      body.mobile-preview-mode .stage-panel > .controls .speed-options button { border: 0; border-radius: 4px; background: transparent; }
      body:not(.mobile-preview-mode) .stage-panel > .controls .speed-options button:first-child,
      body.mobile-preview-mode .stage-panel > .controls .speed-options button:first-child { border-left: 0; }
      /* The active speed option must retain white text against the blue background. */
      body:not(.mobile-preview-mode) .stage-panel > .controls .speed-options button.is-active { background: #2478e8; color: #fff; }
      /* Loading blocks the whole teaching area, including playback controls. */
      body:not(.mobile-preview-mode) .stage-panel .stage-loading-overlay { inset: 0; z-index: 20; border-radius: 11px; background: rgba(255, 255, 255, .9); pointer-events: auto; }
      /* Question entry now lives in the header, keeping the teaching workspace focused. */
      .topbar { position: relative; }
      .new-question-button { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 14px; border: 1px solid #1d70df; border-radius: 7px; background: #176ee0; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 3px 8px #176ee02e; transition: background .16s ease, transform .16s ease; }
      .new-question-button:hover { background: #0d5dc9; transform: translateY(-1px); }
      .new-question-button[aria-expanded="true"] { background: #0c59bf; }
      .question-drawer { position: absolute; z-index: 40; top: calc(100% + 1px); right: 0; left: 0; width: 100%; border: 1px solid #d7e3f3; border-right: 0; border-left: 0; border-radius: 0; background: #fff; box-shadow: 0 18px 46px #1b376b2b; overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .18s ease, transform .18s ease, visibility .18s; }
      .question-drawer.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
      .question-drawer .left-panel { display: grid; grid-template-columns: minmax(380px, .9fr) minmax(0, 1.1fr); grid-template-rows: auto auto; gap: 0 24px; border: 0; border-radius: 0; box-shadow: none; overflow: visible; max-height: none; }
      body:not(.mobile-preview-mode) .question-drawer .left-panel { height: auto; max-height: none; overflow: visible; }
      .question-drawer .panel-heading { grid-column: 1 / -1; padding: 16px 20px 12px; border-bottom: 1px solid #e8eef7; }
      .question-drawer .promptbar { display: contents; }
      .question-drawer .upload-zone { grid-column: 1; grid-row: 2; min-height: 174px; margin: 18px 0 12px 24px; }
      .question-drawer .image-actions { display: none; }
      .question-drawer .question-image-preview { grid-column: 1; grid-row: 3; margin: 0 0 6px 24px; }
      .question-drawer .upload-tip { grid-column: 1; grid-row: 4; margin: 0 0 14px 24px; text-align: left; }
      .question-drawer .problem-editor { grid-column: 2; grid-row: 2 / span 3; margin: 18px 24px 14px 0; padding: 0; border: 0; }
      .question-drawer #problemInput { height: 174px; min-height: 174px; background: #fbfdff; }
      .question-drawer .upload-action { grid-column: 1; grid-row: 5; width: auto; height: 38px; margin: 0 0 20px 24px; }
      .question-drawer .example-list { grid-column: 1 / -1; grid-row: 6; margin: 0; padding: 14px 24px 20px; border-top: 1px solid #e8eef7; }
      .question-drawer .example-list.has-multiple { display: block; }
      .question-drawer .example-list h3 { color: #243b61; }
      .question-drawer #recognizedQuestionItems { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 2px; }
      .question-drawer .example-list button { flex: 0 0 230px; min-height: 66px; margin: 0; white-space: normal; }
      body:not(.mobile-preview-mode) .workspace { grid-template-columns: minmax(0, 1.55fr) minmax(350px, .85fr); gap: 16px; }
      body:not(.mobile-preview-mode) .workspace > .left-panel { display: none; }
      @media (max-width: 880px) { .question-drawer { max-height: calc(100dvh - 76px); overflow-y: auto; } .question-drawer .left-panel { display: block; } .question-drawer .panel-heading { padding: 14px; } .question-drawer .upload-zone { margin: 12px 14px; } .question-drawer .problem-editor { margin: 12px 14px; } .question-drawer #problemInput { height: 112px; min-height: 112px; } .question-drawer .upload-action { width: calc(100% - 28px); margin: 0 14px 14px; } .question-drawer .question-image-preview, .question-drawer .upload-tip { margin-left: 14px; } .question-drawer .example-list { padding: 12px 14px 16px; } }
      /* Full-width question workspace: keep the image, editor and choices on a deliberate grid. */
      .top-links { align-items: center; }
      .top-links > span { display: inline-flex; align-items: center; height: 34px; }
      .new-question-button { height: 38px; padding: 0 17px; border-color: #0c61cc; border-radius: 8px; background: #176ee0; box-shadow: 0 6px 14px #176ee052; color: #fff; font-weight: 800; line-height: 1; }
      .new-question-button::before { margin-right: 7px; content: "+"; font-size: 18px; font-weight: 500; }
      .new-question-button:hover, .new-question-button[aria-expanded="true"] { background: #0d5fc7; color: #fff; transform: translateY(-1px); }
      .question-drawer { position: fixed; top: 64px; right: 0; left: 0; width: 100vw; max-height: calc(100dvh - 64px); overflow-y: auto; }
      body:not(.mobile-preview-mode) .question-drawer .left-panel { display: block; width: 100%; height: auto; max-height: none; overflow: visible; }
      body:not(.mobile-preview-mode) .question-drawer .promptbar { position: relative; display: grid; width: 100%; grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: 198px 42px; column-gap: 24px; row-gap: 0; padding: 20px 28px 24px; }
      .question-drawer .upload-zone { grid-column: 1; grid-row: 1 / span 2; width: 240px; min-height: 0; height: 240px; aspect-ratio: 1; margin: 0; }
      .question-drawer .problem-editor { display: flex; flex-direction: column; grid-column: 2; grid-row: 1; min-width: 0; height: 198px; margin: 0; padding: 0; }
      .question-drawer .problem-editor .editor-title { flex: 0 0 24px; margin-bottom: 8px; }
      .question-drawer .problem-input-group { display: flex; flex: 1 1 auto; min-height: 0; }
      .question-drawer #problemInput { flex: 1 1 auto; height: auto !important; min-height: 0; max-height: none !important; resize: vertical; }
      .question-drawer .upload-action { grid-column: 2; grid-row: 2; justify-self: end; width: 140px; height: 42px; margin: 0; border: 1px solid #0869ec; background: #0869ec; box-shadow: 0 3px 8px #0869ec33; color: #fff; }
      .question-drawer .upload-action:hover { background: #0759c8; }
      .question-drawer .upload-tip { display: none; }
      .question-drawer .promptbar > .question-image-preview { position: absolute; top: 228px; left: 40px; width: 216px; margin: 0; overflow: hidden; color: #3f6fae; text-overflow: ellipsis; white-space: nowrap; }
      .question-drawer .upload-zone .question-image-preview { position: absolute; right: 12px; bottom: 10px; left: 12px; display: flex; height: 32px; align-items: center; justify-content: center; margin: 0; overflow: hidden; border-radius: 5px; background: #f2f4f7; color: #3f6fae; font-size: 12px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
      .question-drawer .upload-zone .question-image-preview[hidden] { display: none !important; }
      .question-drawer .example-list { display: none; width: 100%; margin: 0; padding: 18px 28px 24px; border-top: 1px solid #e8eef7; }
      .question-drawer .example-list.has-multiple { display: block; }
      .question-drawer #recognizedQuestionItems { display: flex; flex-wrap: wrap; gap: 12px; overflow: visible; }
      .question-drawer .example-list button { flex: 1 1 260px; min-width: 260px; min-height: 88px; height: auto; margin: 0; }
      @media (max-width: 760px) { .top-links { display: flex; } .top-links > span { display: none; } .question-drawer { top: 54px; max-height: calc(100dvh - 54px); } body:not(.mobile-preview-mode) .question-drawer .promptbar { display: block; padding: 14px; } .question-drawer .upload-zone, .question-drawer .upload-action { width: 100%; } .question-drawer .upload-zone { height: auto; aspect-ratio: 1; margin-bottom: 14px; } .question-drawer .problem-editor { height: auto; margin: 0 0 14px; } .question-drawer #problemInput { height: 180px; } .question-drawer .upload-action { margin-top: 14px; } .question-drawer .question-image-preview { position: static; width: auto; margin: 0 0 10px; white-space: normal; } .question-drawer .example-list { padding: 14px; } .question-drawer .example-list button { min-width: 100%; } }
      /* Animation learning flow: context, canvas, logical steps, then controls. */
      .stage-panel { padding: 18px; background: #fff; }
      .stage-panel .panel-heading { padding: 0 0 14px; }
      .lesson-context { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; align-items: center; margin: 0 0 14px; padding: 14px 16px 15px; border: 1px solid #cfe0f8; border-left: 4px solid #2378ed; border-radius: 8px; background: #f8fbff; }
      .lesson-context .step-count { padding: 5px 9px; border-radius: 999px; background: #e4efff; color: #176ee0; font-size: 12px; font-weight: 800; white-space: nowrap; }
      .lesson-context strong { min-width: 0; overflow: hidden; color: #172f57; font-size: 17px; line-height: 1.4; }
      .lesson-context p { display: -webkit-box; grid-column: 1 / -1; min-width: 0; margin: 0; overflow: hidden; color: #36577f; font-size: 15px; font-weight: 600; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
      .lesson-context p[hidden] { display: none !important; }
      #stage { border-radius: 8px; box-shadow: 0 4px 18px #1837660d; }
      body:not(.mobile-preview-mode) .stage-panel #stage { width: min(100%, 720px) !important; min-height: 0 !important; height: auto; margin-right: auto; margin-left: auto; }
      .timeline { display: none; }
      .learning-steps { margin: 16px 0 0; padding: 16px 8px 4px; border-top: 1px solid #e8eef7; }
      .learning-steps h3 { margin: 0 8px 14px; color: #344a6e; font-size: 13px; }
      .learning-steps ol { display: flex; margin: 0; padding: 0; list-style: none; }
      .learning-steps li { position: relative; flex: 1 1 0; min-width: 108px; }
      .learning-steps li:not(:last-child)::after { position: absolute; top: 14px; right: 0; left: 30px; height: 2px; background: #dce6f3; content: ""; }
      .learning-steps button { position: relative; z-index: 1; display: flex; width: 100%; flex-direction: column; gap: 7px; align-items: center; border: 0; background: transparent; color: #8491a6; cursor: pointer; }
      .learning-steps .step-dot { display: grid; width: 30px; height: 30px; place-items: center; border: 2px solid #cbd7e8; border-radius: 50%; background: #fff; font-size: 12px; font-weight: 800; }
      .learning-steps .step-label { max-width: 130px; overflow: hidden; font-size: 12px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
      .learning-steps li.is-active button, .learning-steps li.is-complete button { color: #176ee0; }
      .learning-steps li.is-active .step-dot { border-color: #176ee0; background: #176ee0; box-shadow: 0 0 0 4px #176ee01a; color: #fff; }
      .learning-steps li.is-complete .step-dot { border-color: #78a8ee; background: #eaf3ff; color: #176ee0; }
      .learning-steps li.is-complete::after { background: #78a8ee; }
      .controls { position: relative; justify-content: center; gap: 12px; margin-top: 14px; padding: 14px 16px 10px; border-top: 1px solid #e8eef7; }
      .controls button, .stage-panel > .controls button { min-height: 40px; height: 40px; padding: 0 16px; border-radius: 7px; font-size: 14px !important; }
      #previousStepButton, #nextStepButton, #restartButton { order: initial; font-size: 14px !important; }
      #previousStepButton::after, #nextStepButton::after, #restartButton::after { content: none !important; }
      #playPauseButton { order: initial; width: auto; min-width: 148px; height: 40px; flex: 0 0 auto; border-radius: 7px; box-shadow: 0 4px 10px #1970db35; }
      #playPauseButton::after { content: "暂停当前步骤"; font-size: 14px; letter-spacing: 0; }
      #playPauseButton.is-paused::after { content: "▶ 播放当前步骤"; font-size: 14px; }
      .speed-control { position: static; order: initial; margin-left: 12px; }
      .speed-options button { min-width: 46px; height: 28px; padding: 0 8px; font-size: 12px !important; }
      body:not(.mobile-preview-mode) .stage-panel > .controls { display: flex; min-height: 0; padding: 14px 16px 10px; gap: 12px; }
      body:not(.mobile-preview-mode) .stage-panel > .controls button { min-width: 0; min-height: 40px; height: 40px; padding: 0 16px; }
      body:not(.mobile-preview-mode) .stage-panel > .controls #playPauseButton { width: auto; min-width: 148px; min-height: 40px; height: 40px; padding: 0 16px; border-radius: 7px; }
      body:not(.mobile-preview-mode) .stage-panel > .controls .speed-control { position: static; width: auto; min-width: 0; min-height: 0; height: auto; margin-left: 12px; }
      body:not(.mobile-preview-mode) .stage-panel > .controls .speed-options button { min-width: 46px; min-height: 28px; height: 28px; padding: 0 8px; font-size: 12px !important; }
      @media (max-width: 900px) { .learning-steps { overflow-x: auto; } .learning-steps ol { min-width: max-content; } .learning-steps li { flex-basis: 132px; } .controls { flex-wrap: wrap; } .speed-control { width: 100%; justify-content: center; margin: 4px 0 0; } }
      /* Keep student controls close to the step timeline; use the right rail for step context. */
      .stage-panel { position: relative; }
      .stage-panel > .stage-speed { position: absolute; top: 17px; right: 18px; margin: 0; }
      .learning-steps { padding-top: 14px; }
      .learning-steps-header { display: flex; align-items: center; justify-content: space-between; margin: 0 8px 12px; }
      .learning-steps-header h3 { margin: 0; }
      .step-actions { display: flex; gap: 8px; }
      .step-actions button { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #cddced; border-radius: 6px; background: #fff; color: #176ee0; cursor: pointer; }
      .step-actions button:hover { border-color: #176ee0; background: #f1f7ff; }
      .step-actions #playPauseButton { width: 38px; min-width: 38px; height: 34px; min-height: 34px; padding: 0; border: 0; border-radius: 6px; background: #176ee0; color: #fff; box-shadow: none; font-size: 0 !important; }
      .step-actions #playPauseButton::after { content: "❚❚"; font-size: 12px; }
      .step-actions #playPauseButton.is-paused::after { content: "▶"; font-size: 13px; }
      .step-actions #restartButton { font-size: 0 !important; }
      .step-actions #restartButton::after { content: "↻" !important; font-size: 17px; }
      body:not(.mobile-preview-mode) .stage-panel > .controls { display: none; }
      .inspector > .lesson-context { flex: 0 0 auto; margin: 0; border: 0; border-bottom: 1px solid #e8edf5; border-left: 4px solid #2378ed; border-radius: 0; background: #f8fbff; }
      .inspector > .lesson-context p { white-space: normal; }
      @media (max-width: 760px) { .stage-panel > .stage-speed { top: 12px; right: 12px; } .learning-steps-header { margin-right: 0; margin-left: 0; } }
      /* Persistent step navigation: full-width, quiet, and independent from the canvas size. */
      body:not(.mobile-preview-mode) .app-shell { padding-bottom: 116px; }
      body:not(.mobile-preview-mode) .learning-steps { position: fixed; z-index: 35; right: 0; bottom: 0; left: 0; width: 100%; margin: 0; padding: 10px 28px 12px; border: 0; border-top: 1px solid #dfe7f1; border-radius: 0; background: #fff; box-shadow: 0 -6px 20px #1d376b0d; }
      body:not(.mobile-preview-mode) .learning-steps-header { max-width: 1400px; margin: 0 auto 6px; }
      body:not(.mobile-preview-mode) .learning-steps ol { max-width: 1400px; margin: 0 auto; }
      body:not(.mobile-preview-mode) .learning-steps li { min-width: 0; }
      body:not(.mobile-preview-mode) .learning-steps button { border: 0 !important; border-radius: 0; box-shadow: none; }
      body:not(.mobile-preview-mode) .learning-steps li:not(:last-child)::after { top: 13px; background: #dce5ef; }
      body:not(.mobile-preview-mode) .learning-steps .step-dot { width: 27px; height: 27px; border-color: transparent; background: #edf2f8; color: #63748c; }
      body:not(.mobile-preview-mode) .learning-steps li.is-active .step-dot { background: #176ee0; box-shadow: 0 0 0 3px #176ee014; color: #fff; }
      body:not(.mobile-preview-mode) .learning-steps li.is-complete .step-dot { border-color: transparent; background: #dcecff; color: #176ee0; }
      .stage-panel > .stage-speed { display: flex; align-items: center; gap: 8px; color: #70809a; font-size: 12px; }
      .stage-panel > .stage-speed .speed-options { gap: 2px; overflow: visible; border: 0; border-radius: 0; background: transparent; }
      .stage-panel > .stage-speed .speed-options button { min-width: 40px; height: 28px; padding: 0 5px; border: 0; border-radius: 3px; background: transparent; color: #4f6280; font-size: 12px !important; }
      .stage-panel > .stage-speed .speed-options button:hover { background: #edf4ff; }
      .stage-panel > .stage-speed .speed-options button.is-active { background: #176ee0; color: #fff; }
      .step-actions { align-items: center; }
      .step-actions button, .step-actions #restartButton { display: grid; width: 30px; min-width: 30px; height: 30px; min-height: 30px; place-items: center; padding: 0; border: 0 !important; border-radius: 50%; background: transparent; box-shadow: none; line-height: 1; }
      .step-actions #playPauseButton { width: 34px; min-width: 34px; height: 34px; min-height: 34px; border-radius: 50%; background: #176ee0; }
      .step-actions #restartButton { color: #5d6d84; font-size: 0 !important; }
      .step-actions #restartButton:hover { background: #edf3fa; color: #176ee0; }
      /* The timeline belongs to the animation column, not the whole viewport. */
      body:not(.mobile-preview-mode) .app-shell { padding-bottom: 20px; }
      body:not(.mobile-preview-mode) .stage-panel { height: calc(100dvh - 100px); min-height: 620px; padding-bottom: 108px; overflow: hidden; }
      body:not(.mobile-preview-mode) .stage-panel #stage { width: min(100%, 960px) !important; min-height: 0 !important; height: auto; margin: 10px auto auto; }
      body:not(.mobile-preview-mode) .learning-steps { position: absolute; z-index: 5; right: auto; bottom: 0; left: 50%; width: min(calc(100% - 36px), 960px); margin: 0; padding: 10px 18px 12px; border: 0; border-top: 1px solid #dfe7f1; border-radius: 0; background: #fff; box-shadow: none; transform: translateX(-50%); }
      body:not(.mobile-preview-mode) .learning-steps-header, body:not(.mobile-preview-mode) .learning-steps ol { max-width: none; }
      body:not(.mobile-preview-mode) .stage-panel .lesson-context { flex: 0 0 auto; width: min(100%, 960px); margin: 0 auto 10px; }
      .inspector > .question-context { flex: 0 0 auto; padding: 12px 16px; border-bottom: 1px solid #e8edf5; background: #f8fbff; }
      .question-context h2 { margin: 0 0 8px; color: #1f3961; font-size: 14px; }
      .question-context p { max-height: min(18vh, 150px); margin: 0; overflow-y: auto; white-space: pre-wrap; overflow-wrap: anywhere; color: #60718b; font-size: 13px; line-height: 1.55; }
      .learning-steps-header { position: relative; justify-content: flex-start; min-height: 34px; }
      .learning-steps-header .step-actions { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
      .step-actions button::after { display: block; line-height: 1; }
      body:not(.mobile-preview-mode) .stage-panel .lesson-context { width: min(100%, 960px); margin: 0 auto 10px; }
      .learning-steps .step-label { display: none; }
      .learning-steps-header .step-actions { right: 0; left: auto; transform: translateY(-50%); }
      .step-actions #playPauseButton, .step-actions #restartButton { display: inline-grid !important; place-items: center; line-height: 1; }
      .step-actions #playPauseButton { position: relative; }
      .step-actions #playPauseButton::after { position: absolute; inset: 0; width: 10px; height: 12px; margin: auto; background: linear-gradient(to right, #fff 0 3px, transparent 3px 7px, #fff 7px 10px); box-shadow: none; content: ""; transform: none; }
      .step-actions #playPauseButton.is-paused::after { inset: 0; width: 0; height: 0; margin: auto; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid #fff; background: transparent; box-shadow: none; content: ""; transform: translateX(2px); }
      .step-actions #restartButton { position: relative; }
      .step-actions #restartButton::after { position: absolute; inset: 0; display: grid; width: 17px; height: 17px; place-items: center; margin: auto; font-size: 17px; line-height: 17px; }
      @media (min-width: 761px) {
        body:not(.mobile-preview-mode) .stage-panel .lesson-context { position: relative; grid-template-columns: auto minmax(0, 1fr) 84px; padding-right: 16px; }
        body:not(.mobile-preview-mode) .stage-panel .lesson-context > p { grid-column: 1 / 3; }
        body:not(.mobile-preview-mode) .stage-panel .lesson-context .step-actions { position: static; grid-column: 3; grid-row: 1 / span 2; align-self: center; justify-self: end; transform: none; }
      }
      /* Solve steps read as one continuous, segmented progress bar. */
      .learning-steps, body:not(.mobile-preview-mode) .learning-steps { box-sizing: border-box; height: 24px; min-height: 24px; margin: 0; padding: 3px; overflow: visible; border: 1px solid var(--canvas-grid, #dce7f3); border-radius: 999px; background: var(--canvas-bg, #f4f8fc); }
      .learning-steps-header { display: none !important; }
      .learning-steps ol { display: flex; width: 100%; height: 100%; gap: 3px; align-items: stretch; overflow: hidden; border-radius: 999px; background: var(--canvas-grid, #dfe8f3); }
      .learning-steps li { display: block; min-width: 0; height: 100%; }
      .learning-steps li:not(:last-child)::after { display: none; }
      .learning-steps button { --segment-color: var(--brand, #176ee0); --segment-progress: 0; position: relative; display: block; width: 100%; height: 100%; min-height: 0; padding: 0; appearance: none; overflow: hidden; border: 0 !important; border-radius: 0 !important; background: var(--canvas-grid, #dfe8f3); color: transparent; outline-offset: 3px; }
      .learning-steps button::before { position: absolute; inset: 0; background: var(--segment-color); content: ""; transform: scaleX(var(--segment-progress)); transform-origin: left center; transition: transform .08s linear; will-change: transform; }
      .learning-steps button:hover { --segment-color: var(--brand-strong, #4b94ed); }
      .learning-steps button:focus-visible { outline: 2px solid var(--brand, #176ee0); }
      .learning-steps .step-dot, .learning-steps .step-label { display: none; }
      .learning-steps li.is-complete button { --segment-color: var(--brand-muted, #80afea); }
      .learning-steps li.is-active button { --segment-color: var(--brand, #176ee0); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #176ee0) 14%, transparent); }
      /* Keep the visible segmented progress bar in the stage's lower inset without giving the panel extra scroll height. */
      body:not(.mobile-preview-mode) .learning-steps { display: block; }
      /* Keep the animation and answer columns aligned to one desktop viewport. */
      body:not(.mobile-preview-mode) .stage-panel { height: calc(100dvh - 100px); min-height: 0; padding-bottom: 18px; overflow: hidden; }
      body:not(.mobile-preview-mode) .stage-panel .lesson-context { order: initial; width: min(100%, 1080px); margin: 12px auto 8px; }
      body:not(.mobile-preview-mode) .stage-panel .lesson-context { box-sizing: border-box; max-height: none; padding-top: 12px; padding-bottom: 12px; overflow: visible; }
      body:not(.mobile-preview-mode) .stage-panel .lesson-context strong { display: block; max-height: none; overflow: visible; color: var(--ink, #172f57); font-size: 15px; line-height: 1.38; overflow-wrap: anywhere; -webkit-line-clamp: unset; }
      body:not(.mobile-preview-mode) .stage-panel .lesson-context p { display: block; max-height: none; overflow: visible; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; -webkit-line-clamp: unset; }
      body:not(.mobile-preview-mode) .stage-panel #stage { width: min(100%, 1080px) !important; margin-top: 0; }
      body:not(.mobile-preview-mode) .learning-steps { position: absolute; z-index: 6; right: auto; bottom: 8px; left: 50%; width: min(calc(100% - 36px), 1080px); margin: 0; transform: translateX(-50%); }
      @media (max-width: 760px) { .learning-steps ol { min-width: 0; } .learning-steps { overflow: visible; } }
      /* Entry is a first-class landing section. Keep the page scrollable for sections that follow it. */
      .question-entry-workspace { display: none; width: min(1080px, calc(100% - 40px)); margin: 0 auto; }
      body.question-entry-mode:not(.mobile-preview-mode) { height: auto; min-height: 100%; overflow-x: hidden; overflow-y: auto; }
      body.question-entry-mode:not(.mobile-preview-mode) .legacy-runtime { min-height: 100vh; min-height: 100dvh; }
      body.question-entry-mode:not(.mobile-preview-mode) .app-shell { display: flex; height: auto; min-height: 100vh; min-height: 100dvh; grid-template: none; flex-direction: column; }
      body.question-entry-mode:not(.mobile-preview-mode) .topbar { display: flex; height: 64px; min-height: 64px; flex: 0 0 64px; flex-direction: row; gap: 26px; align-items: center; margin: -16px -18px 16px; padding: 0 24px; overflow: visible; border-right: 0; border-bottom: 1px solid #dce5f2; }
      body.question-entry-mode:not(.mobile-preview-mode) .workspace { display: flex; width: 100%; height: auto; min-height: 0; flex: 1 0 auto; flex-direction: column; grid-template: none; }
      body.question-entry-mode .question-entry-workspace { display: grid; min-height: 0; flex: 1 0 auto; align-items: start; align-items: safe center; padding-block: clamp(22px, 4vh, 48px); }
      body.question-entry-mode .stage-panel, body.question-entry-mode .inspector { display: none !important; }
      .question-entry-card { overflow: hidden; border: 1px solid #d8e5f4; border-radius: 18px; background: #fff; box-shadow: 0 20px 54px #17366614; }
      .question-entry-content { display: grid; grid-template-columns: minmax(310px, .88fr) minmax(0, 1.12fr); }
      .entry-story { position: relative; padding: clamp(34px, 5vw, 58px); overflow: hidden; background: #edf5ff; }
      .question-entry-content > .example-list { display: none; min-width: 0; margin: 0; padding: 28px 20px; border: 0; border-left: 1px solid #dce7f3; background: #fbfdff; }
      .question-entry-content > .example-list.has-multiple { display: block; }
      .question-entry-content > .example-list h3 { margin-bottom: 14px; color: #20395d; font-size: 14px; }
      .question-entry-content > .example-list h3 span { display: block; margin-top: 4px; color: #7185a1; font-size: 12px; font-weight: 400; }
      .question-entry-content > .example-list #recognizedQuestionItems { display: grid; gap: 18px; max-height: 430px; overflow-y: auto; padding-right: 3px; overscroll-behavior: contain; }
      .recognition-result-group { display: grid; gap: 8px; }
      .recognition-result-group h4 { margin: 0; color: #20395d; font-size: 13px; }
      .recognition-result-group > p { margin: -3px 0 2px; color: #7185a1; font-size: 11px; line-height: 1.5; }
      .recognition-result-group-items { display: grid; gap: 9px; }
      .question-entry-content > .example-list button { min-height: 0; margin: 0; padding: 10px 11px; border-color: #d4e2f2; border-radius: 8px; background: #fff; color: #385779; font-size: 12px; line-height: 1.55; }
      .question-entry-content > .example-list button.is-selected { border-color: #2378ed; background: #f5faff; box-shadow: inset 3px 0 #2378ed; }
      @media (min-width: 1181px) {
        .question-entry-workspace:has(.example-list.has-multiple) { width: min(1400px, calc(100% - 40px)); }
        .question-entry-content:has(.example-list.has-multiple) { grid-template-columns: minmax(290px, .75fr) minmax(470px, 1.12fr) minmax(270px, .56fr); }
      }
      @media (min-width: 761px) and (max-width: 1180px) {
        .question-entry-content:has(.example-list.has-multiple) { grid-template-columns: minmax(290px, .88fr) minmax(0, 1.12fr); }
        .question-entry-content > .example-list.has-multiple { grid-column: 1 / -1; border-top: 1px solid #dce7f3; border-left: 0; }
        .question-entry-content > .example-list #recognizedQuestionItems { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 240px; }
      }
      .entry-story::after { position: absolute; right: -62px; bottom: -94px; width: 230px; height: 230px; border: 32px solid #d7e9ff; border-radius: 50%; content: ""; }
      .entry-story > * { position: relative; z-index: 1; }
      .entry-story h1 { margin: 12px 0 14px; color: #17325c; font-size: clamp(28px, 3.1vw, 42px); line-height: 1.22; letter-spacing: -.055em; }
      .entry-story > p { max-width: 330px; margin: 0; color: #5f7595; font-size: 14px; line-height: 1.8; }
      .lesson-preview-list { display: grid; gap: 17px; margin: 34px 0 28px; padding: 0; list-style: none; }
      .lesson-preview-list li { display: flex; gap: 13px; align-items: center; }
      .preview-number { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border-radius: 9px; background: #fff; color: #176ee0; box-shadow: 0 5px 13px #176ee01c; font-size: 11px; font-weight: 800; }
      .lesson-preview-list strong, .lesson-preview-list small { display: block; }
      .lesson-preview-list strong { color: #22436f; font-size: 14px; }
      .lesson-preview-list small { margin-top: 3px; color: #7185a1; font-size: 12px; }
      .follow-up-highlight { margin: 0 0 18px; padding: 13px 14px; border: 1px solid #9bc8ff; border-radius: 12px; background: linear-gradient(135deg, #f8fbff, #e7f2ff); box-shadow: 0 8px 18px #4c91db14; }
      .follow-up-highlight-title { display: flex; gap: 8px; align-items: center; color: #175eaf; font-size: 14px; }
      .follow-up-highlight-title span { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 7px; background: #176ee0; color: #fff; font-size: 12px; }
      .follow-up-highlight p { margin: 7px 0 10px; color: #52739c; font-size: 12px; line-height: 1.55; }
      .follow-up-examples { display: flex; flex-wrap: wrap; gap: 6px; }
      .follow-up-examples span { padding: 4px 7px; border: 1px solid #c7def8; border-radius: 999px; background: #fff; color: #3971af; font-size: 11px; font-weight: 650; }
      .entry-promise { display: inline-flex; gap: 8px; align-items: center; padding: 9px 12px; border: 1px solid #c9e0fa; border-radius: 999px; background: #f8fbffb8; color: #3971af; font-size: 12px; font-weight: 700; }
      .entry-promise span { color: #176ee0; }
      .entry-form { display: flex; min-width: 0; flex-direction: column; background: #fff; }
      .question-entry-heading { padding: 36px 38px 10px; }
      .question-entry-kicker { color: #176ee0; font-size: 13px; font-weight: 800; letter-spacing: .04em; }
      .question-entry-heading h2 { margin: 8px 0 8px; color: #17325c; font-size: clamp(26px, 4vw, 34px); letter-spacing: -.03em; }
      .question-entry-heading p { margin: 0; color: #687993; font-size: 14px; line-height: 1.65; }
      .resume-lesson-button { display: inline-flex; align-items: center; min-height: 34px; margin-top: 14px; padding: 7px 11px; border: 1px solid #b9d6f7; border-radius: 7px; background: #f7fbff; color: #1765c8; font-size: 13px; font-weight: 750; cursor: pointer; }
      .resume-lesson-button:hover { border-color: #7aaef0; background: #edf6ff; }
      /* Keep the entry screen independent from the debug/editor layout used by the legacy runtime. */
      body.question-entry-mode .question-entry-card .promptbar { display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; gap: 0; align-items: stretch; border: 0; padding: 16px 38px 28px; }
      body.question-entry-mode .question-entry-card .problem-editor { order: initial; display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; height: auto; margin: 0; border: 0; padding: 0; }
      body.question-entry-mode .question-entry-card .json-input-group, body.question-entry-mode .question-entry-card .prompt-actions { display: none !important; }
      .question-entry-card .editor-title { margin-bottom: 9px; color: #20395d; }
      .question-entry-card .editor-title span { margin-left: 8px; }
      body.question-entry-mode .question-entry-card .problem-input-group { display: flex; min-height: 0; flex: 1 1 auto; }
      body.question-entry-mode .question-entry-card #problemInput { min-height: 0; height: auto; max-height: none; flex: 1 1 auto; border-color: #cbdcf0; border-radius: 10px; padding: 15px; background: #fbfdff; color: #1f3557; font-size: 15px; line-height: 1.65; }
      .question-entry-card #problemInput:focus { border-color: #2378ed; box-shadow: 0 0 0 3px #2378ed18; outline: 0; }
      body.question-entry-mode .question-entry-actions { order: initial; display: flex; gap: 12px; align-items: stretch; margin-top: 16px; }
      body.question-entry-mode .question-entry-card .upload-action { order: initial; width: auto; min-width: 210px; height: 54px; margin: 0; padding: 0 22px; border: 1px solid #0c61cc; border-radius: 9px; background: #176ee0; box-shadow: 0 8px 18px #176ee047; color: #fff; font-size: 15px; font-weight: 800; }
      body.question-entry-mode .question-entry-card .upload-action::before { margin-right: 8px; content: "▶"; font-size: 12px; }
      body.question-entry-mode .question-entry-card .upload-action:hover { background: #0d5fc7; transform: translateY(-1px); }
      .question-entry-card .upload-action span { margin-left: 8px; font-size: 17px; }
      .secondary-image-entry { display: flex; min-width: 0; flex: 1; gap: 10px; align-items: center; padding: 7px 12px; border: 1px solid #d8e5f3; border-radius: 9px; background: #fbfdff; color: #4b73a7; cursor: pointer; transition: border-color .16s ease, background .16s ease; }
      .secondary-image-entry:hover { border-color: #8dbbf1; background: #f4f9ff; color: #176ee0; }
      .secondary-image-entry strong, .secondary-image-entry small { display: block; }
      .secondary-image-entry strong { font-size: 13px; line-height: 1.2; }
      .secondary-image-entry small { margin-top: 3px; color: #8292a7; font-size: 11px; line-height: 1.2; }
      .image-entry-icon { display: grid; width: 27px; height: 27px; flex: 0 0 27px; place-items: center; border-radius: 7px; background: #eaf4ff; color: #287ae4; font-size: 16px; }
      .drop-acceptance { display: none; color: #176ee0; font-size: 13px; font-weight: 800; }
      .entry-form.is-image-dragging .problem-input-group { position: relative; border-radius: 10px; }
      .entry-form.is-image-dragging .problem-input-group::after { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; border: 2px dashed #176ee0; border-radius: 10px; background: #edf6ffeb; color: #176ee0; content: "松开即可上传并识别图片"; font-size: 15px; font-weight: 800; letter-spacing: .01em; pointer-events: none; }
      .entry-form.is-image-dragging .secondary-image-entry { border-color: #176ee0; background: #edf6ff; box-shadow: 0 0 0 3px #176ee01a; }
      .entry-form.is-image-dragging .secondary-image-entry > span:not(.drop-acceptance) { opacity: .34; }
      .entry-form.is-image-dragging .secondary-image-entry .drop-acceptance { position: absolute; display: block; margin-left: 38px; }
      .secondary-image-entry input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
      .question-entry-card .question-image-preview { display: flex; min-width: 0; gap: 10px; align-items: center; justify-content: flex-start; margin: 12px 0 0; border: 1px solid #d8e5f3; border-radius: 9px; padding: 10px; background: #fbfdff; color: #2769bd; }
      .question-entry-card .question-image-preview[hidden] { display: none !important; }
      .question-image-thumbnail-frame { display: grid; width: 72px; height: 72px; flex: 0 0 72px; place-items: center; overflow: hidden; border: 1px solid #d8e5f3; border-radius: 9px; background: #fff; }
      .question-image-thumbnail-frame img { display: block; width: 100%; height: 100%; object-fit: contain; }
      .question-image-preview .question-image-preview-copy { display: grid; min-width: 0; flex: 1; gap: 5px; overflow: visible; text-overflow: clip; white-space: normal; }
      .question-image-preview-copy strong, .question-image-preview-copy small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .question-image-preview-copy strong { color: #20395d; font-size: 13px; }
      .question-image-preview-copy small { color: #7185a1; font-size: 12px; font-weight: 500; }
      .question-image-preview-copy small.is-error { color: #b3261e; }
      .question-entry-card .question-image-preview button { margin-left: auto; border-color: #f0c7c3; background: #fff; color: #a52a22; }
      body.question-entry-mode .question-entry-card .flyai-lesson-status { display: block; min-height: 20px; margin: 9px 0 0; }
      body.question-entry-mode .question-entry-card .flyai-lesson-status:empty { min-height: 0; margin-top: 0; }
      body.question-entry-mode .question-entry-card .flyai-lesson-status.is-error { color: #b3261e; }
      .recognition-data-cache { display: none !important; }
      .question-entry-card .json-error { margin: 10px 0 0; }
      body.question-entry-mode .top-links > span { display: none; }
      body.question-entry-mode .new-question-button { display: none; }
      @media (max-width: 760px) { .question-entry-workspace { width: calc(100% - 24px); margin: 0 auto; padding-block: 22px; } .question-entry-content { grid-template-columns: 1fr; } .question-entry-content > .example-list.has-multiple { border-top: 1px solid #dce7f3; border-left: 0; padding: 20px; } .question-entry-content > .example-list #recognizedQuestionItems { max-height: 280px; } .entry-story { padding: 28px 24px; } .entry-story h1 { font-size: 30px; } .lesson-preview-list { gap: 13px; margin: 25px 0 20px; } .follow-up-highlight { margin-bottom: 16px; } .question-entry-heading, .question-entry-card .promptbar { padding-right: 20px; padding-left: 20px; } .question-entry-heading { padding-top: 28px; } body.question-entry-mode .question-entry-card #problemInput { min-height: 190px; height: 190px; flex: initial; font-size: 16px; } .question-entry-actions { align-items: stretch; flex-direction: column; } .question-entry-card .upload-action { width: 100%; } .secondary-image-entry { min-height: 52px; } .question-image-thumbnail-frame { width: 64px; height: 64px; flex-basis: 64px; } .question-entry-card .question-image-preview { align-items: center; } }
      /* Single-page learning workbench: overview above the canvas, detailed progress below it. */
      .canvas-shell { position: relative; width: min(100%, 1080px); margin: 0 auto; }
      .canvas-shell #stage { display: block; max-width: 100%; margin: 0 auto !important; }
      body:not(.mobile-preview-mode) .canvas-shell { display: grid; min-width: 0; min-height: 0; flex: 1 1 auto; box-sizing: border-box; place-items: center; padding-bottom: 38px; }
      body:not(.mobile-preview-mode) .canvas-shell #stage { width: auto !important; max-width: 100% !important; height: auto !important; max-height: 100% !important; }
      .step-overview { width: min(100%, 1080px); margin: 0 auto 10px; padding: 4px; overflow: hidden; border: 1px solid #dce7f3; border-radius: 8px; background: #f8fbff; }
      .step-overview-list { display: flex; width: 100%; min-width: 0; gap: 4px; margin: 0; padding: 0; overflow-x: auto; overscroll-behavior-inline: contain; list-style: none; scrollbar-width: thin; scroll-behavior: smooth; scroll-snap-type: x proximity; }
      .step-overview-list li { flex: 0 0 150px; min-width: 0; scroll-snap-align: center; transition: flex-basis .18s ease; }
      .step-overview-list li.is-active { flex-basis: min(300px, 42vw); }
      .step-overview-list button { display: block; width: 100%; overflow: hidden; border: 0; border-radius: 4px; padding: 5px 7px; background: transparent; color: #6d7c92; font-size: 11px; line-height: 1.25; text-align: center; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
      .step-overview-list button:hover, .step-overview-list li.is-active button { background: #e5f0ff; color: #176ee0; }
      .step-overview-list li.is-active button { min-height: 34px; overflow: visible; text-overflow: clip; white-space: normal; }
      .step-overview-list li.is-complete button { color: #3978c6; }
      /* Use the compact segmented progress bar rather than a second step navigator. */
      .step-overview { display: none; }
      .step-progress-tooltip { position: fixed; z-index: 60; max-width: min(320px, calc(100vw - 24px)); padding: 7px 9px; border-radius: 6px; background: #19355d; box-shadow: 0 5px 14px #1736662b; color: #fff; font-size: 12px; font-weight: 600; line-height: 1.35; pointer-events: none; }
      .step-progress-tooltip[hidden] { display: none; }
      .empty-lesson-state { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; padding: 36px; border: 1px solid #dce7f3; border-radius: 8px; background: linear-gradient(135deg, #f9fcff, #f3f8ff); text-align: center; }
      .empty-lesson-state .empty-lesson-eyebrow { color: #176ee0; font-size: 13px; font-weight: 800; }
      .empty-lesson-state h2 { max-width: 520px; margin: 10px 0 8px; color: #17325c; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.25; }
      .empty-lesson-state p { max-width: 480px; margin: 0 0 20px; color: #60718b; line-height: 1.65; }
      .empty-lesson-state button { min-height: 42px; border: 0; border-radius: 7px; padding: 0 18px; background: #176ee0; box-shadow: 0 4px 12px #176ee033; color: #fff; font-weight: 700; cursor: pointer; }
      body.lesson-rendered-mode .empty-lesson-state { display: none; }
      @media (max-width: 760px) { .step-overview-list li { flex-basis: 126px; } .step-overview-list li.is-active { flex-basis: min(244px, 64vw); } .empty-lesson-state { padding: 24px; } }
      /* Product theme tokens are declared by the Next.js shell. Keep the legacy layout in that palette. */
      body { background: linear-gradient(135deg, var(--canvas-bg, #f8fbff), var(--canvas-ground, #edf5ff)); }
      .topbar { border-color: var(--canvas-grid, #d8e3f1); }
      .brand-mark, .new-question-button, .stage-panel > .stage-speed .speed-options button.is-active { background: var(--brand, #176ee0); }
      .new-question-button { border-color: var(--brand-strong, #0d5fc7); box-shadow: 0 6px 14px color-mix(in srgb, var(--brand, #176ee0) 32%, transparent); }
      .new-question-button:hover, .new-question-button[aria-expanded="true"] { background: var(--brand-strong, #0d5fc7); }
      .panel, .stage-panel, .inspector { border-color: var(--canvas-grid, #d8e3f1); }
      .lesson-context { border-color: var(--canvas-grid, #d8e3f1); border-left-color: var(--brand, #176ee0); background: var(--canvas-bg, #f8fbff); }
      .lesson-context .step-count { background: var(--brand-soft, #e4efff); color: var(--brand, #176ee0); }
      .lesson-context strong { color: var(--ink, #172f57); }
      .lesson-context p { color: var(--muted, #60718b); }
      #stage { border-color: var(--canvas-grid, #d8e3f1); background: var(--canvas-bg, #f8fbff); }
      .stage-panel > .stage-speed .speed-options button:hover { background: var(--brand-soft, #e4efff); }
      .lesson-heading::before { background: var(--brand, #176ee0); }
      #playPauseButton { background: var(--brand, #176ee0); box-shadow: 0 7px 14px color-mix(in srgb, var(--brand, #176ee0) 34%, transparent); }
      #playPauseButton:hover { background: var(--brand-strong, #0d5fc7); }
      .step-actions #playPauseButton { background: var(--brand, #176ee0); box-shadow: none; }
      .step-actions #playPauseButton:hover { background: var(--brand-strong, #0d5fc7); }
      .speed-options button.is-active { background: var(--brand, #176ee0); }
      #scrubber { accent-color: var(--brand, #176ee0); }
      #scrubber::-webkit-slider-runnable-track, #scrubber::-moz-range-track { background: var(--brand-soft, #e4efff); }
      #scrubber::-webkit-slider-thumb, #scrubber::-moz-range-progress, #scrubber::-moz-range-thumb { background: var(--brand, #176ee0); }
      .tutor-question-section { background: linear-gradient(135deg, var(--canvas-bg, #f8fbff), #fff); }
      .tutor-question-section h2, .tutor-image-picker { color: var(--brand, #176ee0); }
      .tutor-question-tips { border-color: var(--canvas-grid, #d8e3f1); background: var(--canvas-bg, #f8fbff); }
      .tutor-question-tips button { border-color: var(--canvas-grid, #d8e3f1); color: var(--brand-strong, #0d5fc7); }
      .tutor-question-tips button:hover { border-color: var(--brand, #176ee0); background: var(--brand-soft, #e4efff); color: var(--brand-strong, #0d5fc7); }
      .tutor-question-actions .send-question, #tutorQuestionButton { border-color: var(--brand, #176ee0); background: var(--brand, #176ee0); }
      .tutor-question-actions .send-question:hover, #tutorQuestionButton:hover { border-color: var(--brand-strong, #0d5fc7); background: var(--brand-strong, #0d5fc7); }
      .lesson-summary-section h2, .lesson-summary p, .lesson-summary li { color: var(--success, #168450); }
      .step-overview { border-color: var(--canvas-grid, #d8e3f1); background: var(--canvas-bg, #f8fbff); }
      .step-overview-list button:hover, .step-overview-list li.is-active button { background: var(--brand-soft, #e4efff); color: var(--brand, #176ee0); }
      /* First-visit question entry uses the same theme tokens as the lesson workspace. */
      .question-entry-card { border-color: var(--canvas-grid, #d8e5f4); }
      .entry-story { background: var(--canvas-ground, #edf5ff); }
      .entry-story::after { border-color: var(--brand-soft, #d7e9ff); }
      .question-entry-kicker { color: var(--brand, #176ee0); }
      .entry-story h1, .question-entry-heading h2 { color: var(--ink, #17325c); }
      .entry-story > p, .question-entry-heading p { color: var(--muted, #687993); }
      .preview-number { color: var(--brand, #176ee0); box-shadow: 0 5px 13px color-mix(in srgb, var(--brand, #176ee0) 11%, transparent); }
      .lesson-preview-list strong { color: var(--ink, #22436f); }
      .lesson-preview-list small { color: var(--muted, #7185a1); }
      .follow-up-highlight { border-color: var(--brand-muted, #9bc8ff); background: linear-gradient(135deg, var(--canvas-bg, #f8fbff), var(--brand-soft, #e7f2ff)); box-shadow: 0 8px 18px color-mix(in srgb, var(--brand, #4c91db) 8%, transparent); }
      .follow-up-highlight-title, .entry-promise, .entry-promise span { color: var(--brand-strong, #175eaf); }
      .follow-up-highlight-title span { background: var(--brand, #176ee0); }
      .follow-up-examples span, .entry-promise { border-color: var(--brand-muted, #c7def8); }
      .follow-up-examples span { color: var(--brand-strong, #3971af); }
      .entry-promise { background: color-mix(in srgb, var(--canvas-bg, #f8fbff) 72%, transparent); }
      .resume-lesson-button { border-color: var(--brand-muted, #b9d6f7); background: var(--canvas-bg, #f7fbff); color: var(--brand-strong, #1765c8); }
      .resume-lesson-button:hover { border-color: var(--brand, #7aaef0); background: var(--brand-soft, #edf6ff); }
      .question-entry-card .editor-title { color: var(--ink, #20395d); }
      body.question-entry-mode .question-entry-card #problemInput { border-color: var(--canvas-grid, #cbdcf0); background: var(--canvas-bg, #fbfdff); color: var(--ink, #1f3557); }
      .question-entry-card #problemInput:focus { border-color: var(--brand, #2378ed); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #2378ed) 10%, transparent); }
      body.question-entry-mode .question-entry-card .upload-action { border-color: var(--brand-strong, #0c61cc); background: var(--brand, #176ee0); box-shadow: 0 8px 18px color-mix(in srgb, var(--brand, #176ee0) 28%, transparent); }
      body.question-entry-mode .question-entry-card .upload-action:hover { background: var(--brand-strong, #0d5fc7); }
      .secondary-image-entry { border-color: var(--canvas-grid, #d8e5f3); background: var(--canvas-bg, #fbfdff); color: var(--brand-strong, #4b73a7); }
      .secondary-image-entry:hover { border-color: var(--brand-muted, #8dbbf1); background: var(--brand-soft, #f4f9ff); color: var(--brand, #176ee0); }
      .image-entry-icon { background: var(--brand-soft, #eaf4ff); color: var(--brand, #287ae4); }
      .drop-acceptance, .question-entry-card .question-image-preview { color: var(--brand, #176ee0); }
      .entry-form.is-image-dragging .problem-input-group::after { border-color: var(--brand, #176ee0); background: color-mix(in srgb, var(--brand-soft, #edf6ff) 92%, transparent); color: var(--brand, #176ee0); }
      .entry-form.is-image-dragging .secondary-image-entry { border-color: var(--brand, #176ee0); background: var(--brand-soft, #edf6ff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #176ee0) 10%, transparent); }
      /* Teaching-beat UI: one live caption on canvas, one cumulative board, one explicit checkpoint control. */
      .lesson-summary-section[hidden], .checkpoint-continue-button[hidden], .return-to-lesson-button[hidden] { display: none !important; }
      .lesson-context p.is-teaching-beat-detail { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
      .step-actions .return-to-lesson-button { display: inline-flex !important; width: auto !important; min-width: 96px !important; height: 36px !important; min-height: 36px !important; align-items: center; justify-content: center; padding: 0 15px !important; border: 1px solid var(--brand-muted, #9bc8ff) !important; border-radius: 999px !important; background: var(--canvas-bg, #f7fbff) !important; color: var(--brand-strong, #1765c8) !important; font-size: 13px !important; font-weight: 800; line-height: 1; white-space: nowrap; }
      .step-actions .return-to-lesson-button::before { content: "←"; margin-right: 6px; font-size: 15px; }
      .step-actions .return-to-lesson-button:hover { border-color: var(--brand, #176ee0) !important; background: var(--brand-soft, #edf6ff) !important; }
      .step-actions .return-to-lesson-button[hidden] { display: none !important; }
      .step-actions .complete-answer-button { display: inline-flex !important; width: auto !important; min-width: 132px !important; height: 36px !important; min-height: 36px !important; align-items: center; justify-content: center; gap: 7px; padding: 0 17px !important; border: 1px solid var(--brand, #176ee0) !important; border-radius: 999px !important; background: linear-gradient(135deg, var(--brand, #176ee0), var(--brand-strong, #0d5fc7)) !important; box-shadow: 0 6px 16px color-mix(in srgb, var(--brand, #176ee0) 24%, transparent) !important; color: #fff !important; font-size: 13px !important; font-weight: 850; line-height: 1; white-space: nowrap; }
      .step-actions .complete-answer-button::before { content: "✓"; display: grid; width: 17px; height: 17px; place-items: center; border-radius: 50%; background: rgba(255,255,255,.2); font-size: 10px; }
      .step-actions .complete-answer-button:hover { border-color: var(--brand-strong, #0d5fc7) !important; background: var(--brand-strong, #0d5fc7) !important; transform: translateY(-1px); }
      .step-actions .complete-answer-button:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand, #176ee0) 38%, transparent); outline-offset: 2px; }
      .step-actions .complete-answer-button[hidden] { display: none !important; }
      .step-actions .checkpoint-continue-button { display: inline-flex !important; width: auto !important; min-width: 112px !important; height: 36px !important; min-height: 36px !important; align-items: center; justify-content: center; gap: 7px; padding: 0 17px !important; border: 1px solid var(--brand, #176ee0) !important; border-radius: 999px !important; background: var(--brand, #176ee0) !important; box-shadow: 0 5px 13px color-mix(in srgb, var(--brand, #176ee0) 24%, transparent) !important; color: #fff !important; font-size: 13px !important; font-weight: 800; line-height: 1; white-space: nowrap; }
      .step-actions .checkpoint-continue-button::before { content: "▶"; font-size: 10px; }
      .step-actions .checkpoint-continue-button:hover { border-color: var(--brand-strong, #0d5fc7) !important; background: var(--brand-strong, #0d5fc7) !important; }
      .step-actions .checkpoint-continue-button[hidden] { display: none !important; }
      .lesson-context.is-awaiting-checkpoint #playPauseButton { display: none !important; }
      body:not(.mobile-preview-mode) .inspector > .tutor-question-section { min-height: 0; flex: 1 1 auto; overflow-y: auto; }
      body.mobile-preview-mode .inspector > .tutor-question-section { margin-top: 0; }
      @media (min-width: 761px) {
        body:not(.mobile-preview-mode) .stage-panel .lesson-context.is-awaiting-checkpoint { grid-template-columns: auto minmax(0, 1fr) minmax(150px, auto); }
      }
      /* One teaching surface: the former right rail becomes an in-canvas, contextual follow-up layer. */
      .renderer-data-only[hidden] { display: none !important; }
      body:not(.question-entry-mode):not(.mobile-preview-mode) .workspace { display: block; }
      body:not(.question-entry-mode):not(.mobile-preview-mode) .stage-panel { display: flex; width: 100%; height: calc(100dvh - 100px); min-height: 0; flex-direction: column; padding: 14px 16px 46px; overflow: hidden; }
      body:not(.question-entry-mode):not(.mobile-preview-mode) .stage-panel .lesson-context { width: min(100%, 1080px); margin: 8px auto; }
      body:not(.question-entry-mode):not(.mobile-preview-mode) .learning-steps { width: min(calc(100% - 36px), 1080px); }
      .canvas-shell { position: relative; display: grid; width: min(100%, 1080px); min-width: 0; min-height: 0; flex: 1 1 auto; grid-template-rows: auto minmax(0, 1fr); place-items: stretch; margin: 0 auto; padding: 0 !important; overflow: hidden; border: 1px solid var(--canvas-grid, #d7e3f1); border-radius: 12px; background: var(--canvas-bg, #f8fbff); box-shadow: 0 10px 26px #1736660d; }
      body:not(.question-entry-mode):not(.mobile-preview-mode) .canvas-shell { place-items: stretch; }
      body:not(.question-entry-mode):not(.mobile-preview-mode) .canvas-shell > .question-context,
      body:not(.question-entry-mode):not(.mobile-preview-mode) .canvas-shell > .lesson-visual-layout { width: 100%; min-width: 0; min-height: 0; }
      .canvas-shell > .question-context { position: relative; z-index: 4; display: flex; min-width: 0; min-height: 44px; max-height: 132px; align-items: flex-start; gap: 10px; padding: 10px 18px; overflow-x: hidden; overflow-y: auto; border: 0; border-bottom: 1px solid var(--canvas-grid, #dce7f3); background: rgba(255, 255, 255, .9); backdrop-filter: blur(12px); }
      .canvas-shell > .question-context h2 { flex: 0 0 auto; margin: 1px 0 0; padding: 4px 8px; border-radius: 999px; background: var(--brand-soft, #e7f1ff); color: var(--brand-strong, #175eaf); font-size: 11px; font-weight: 850; }
      .canvas-shell > .question-context p { min-width: 0; flex: 1 1 auto; margin: 0; overflow: visible; color: var(--muted, #60718b); font-size: 13px; font-weight: 650; line-height: 1.5; overflow-wrap: anywhere; text-overflow: clip; white-space: pre-wrap; word-break: break-word; }
      /* One scroll surface for the full question, including long options and MathML. */
      .lesson-heading-row > .question-context { min-width: 0; max-height: min(24vh, 180px); overflow-x: hidden; overflow-y: auto; }
      .question-context #lessonQuestionText { max-height: none; overflow: visible; }
      .canvas-shell > .question-context,
      .lesson-heading-row > .question-context { scrollbar-gutter: stable; overscroll-behavior-y: contain; scrollbar-width: thin; scrollbar-color: var(--muted, #60718b) var(--brand-soft, #e7f1ff); }
      .question-context:focus-visible { outline: 2px solid var(--brand, #176ee0); outline-offset: -2px; }
      @supports selector(::-webkit-scrollbar) {
        .canvas-shell > .question-context,
        .lesson-heading-row > .question-context { scrollbar-width: auto; scrollbar-color: auto; }
        .question-context::-webkit-scrollbar { width: 10px; }
        .question-context::-webkit-scrollbar-track { border-radius: 999px; background: var(--brand-soft, #e7f1ff); }
        .question-context::-webkit-scrollbar-thumb { min-height: 28px; border: 2px solid var(--brand-soft, #e7f1ff); border-radius: 999px; background: var(--muted, #60718b); }
        .question-context::-webkit-scrollbar-thumb:hover { background: var(--brand-strong, #0d5fc7); }
      }
      .lesson-original-image-trigger { position: relative; display: grid; width: 62px; height: 52px; flex: 0 0 62px; align-self: center; place-items: center; overflow: hidden; border: 1px solid var(--canvas-grid, #d5e1ef); border-radius: 8px; padding: 3px; background: #fff; box-shadow: 0 3px 10px #17366612; cursor: zoom-in; }
      .lesson-original-image-trigger[hidden] { display: none !important; }
      .lesson-original-image-trigger img { display: block; width: 100%; height: 100%; object-fit: contain; }
      .lesson-original-image-trigger::after { content: "放大"; position: absolute; right: 3px; bottom: 3px; padding: 2px 4px; border-radius: 4px; background: rgba(17, 45, 82, .78); color: #fff; font-size: 9px; font-weight: 800; line-height: 1; }
      .lesson-original-image-trigger:hover, .lesson-original-image-trigger:focus-visible { border-color: var(--brand, #176ee0); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #176ee0) 13%, transparent); outline: none; }
      .lesson-visual-layout { position: relative; grid-row: 2; display: grid; min-width: 0; min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(250px, 31%); gap: 12px; place-items: stretch; padding: 12px; overflow: hidden; }
      .canvas-stage-panel { position: relative; display: grid; min-width: 0; min-height: 0; grid-column: 1; grid-row: 1; overflow: hidden; border-radius: 8px; background: var(--canvas-ground, #edf5ff); }
      .canvas-viewport { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; background: var(--canvas-ground, #edf5ff); }
      .canvas-zoom-surface { display: grid; width: max-content; min-width: 100%; height: max-content; min-height: 100%; place-items: center; background: var(--canvas-ground, #edf5ff); }
      .canvas-zoom-controls { position: absolute; z-index: 11; top: 12px; right: auto; bottom: auto; left: 12px; display: inline-grid; grid-template-columns: auto 34px 58px 34px; align-items: center; overflow: hidden; border: 1px solid color-mix(in srgb, var(--brand, #176ee0) 34%, #b8c5d6); border-radius: 999px; background: rgba(255, 255, 255, .97); box-shadow: 0 9px 26px rgba(23, 54, 102, .22); backdrop-filter: blur(10px); }
      .canvas-zoom-label { display: grid; min-height: 32px; place-items: center; padding: 0 11px; border-right: 1px solid rgba(91, 112, 143, .16); background: var(--brand-soft, #edf5ff); color: var(--brand-strong, #0d5fc7); font-size: 11px; font-weight: 900; letter-spacing: .04em; white-space: nowrap; }
      .canvas-zoom-controls button { display: grid; min-width: 0 !important; min-height: 32px !important; place-items: center; border: 0 !important; border-radius: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; color: #314765 !important; font-size: 18px !important; font-weight: 850; line-height: 1; cursor: pointer; }
      .canvas-zoom-controls #canvasZoomResetButton { border-right: 1px solid rgba(91, 112, 143, .16) !important; border-left: 1px solid rgba(91, 112, 143, .16) !important; font-size: 11px !important; font-variant-numeric: tabular-nums; }
      .canvas-zoom-controls button:hover:not(:disabled), .canvas-zoom-controls button:focus-visible { background: var(--brand-soft, #edf5ff) !important; color: var(--brand, #176ee0) !important; outline: none; }
      .canvas-zoom-controls button:disabled { color: #a8b3c2 !important; cursor: default; opacity: .58; }
      body:not(.lesson-rendered-mode) .canvas-zoom-controls { display: none; }
      .canvas-pause-indicator { position: absolute; z-index: 13; top: 14px; right: 14px; display: grid; width: 40px; min-width: 40px; height: 40px; min-height: 40px; place-items: center; border: 1px solid color-mix(in srgb, var(--brand, #176ee0) 20%, transparent); border-radius: 50%; padding: 0; background: color-mix(in srgb, var(--brand, #176ee0) 14%, transparent); box-shadow: 0 2px 8px rgba(23, 54, 102, .08); color: var(--brand, #176ee0); cursor: pointer; backdrop-filter: blur(6px); transition: background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease; }
      .canvas-pause-indicator[hidden] { display: none !important; }
      .canvas-pause-indicator::before { display: block; width: 12px; height: 16px; background: linear-gradient(to right, currentColor 0 4px, transparent 4px 8px, currentColor 8px 12px); content: ""; }
      .canvas-pause-indicator:hover { background: color-mix(in srgb, var(--brand, #176ee0) 20%, transparent); box-shadow: 0 3px 10px rgba(23, 54, 102, .1); transform: translateY(-1px); }
      .canvas-pause-indicator:active { transform: translateY(0) scale(.96); }
      .canvas-pause-indicator:focus-visible { outline: 2px solid color-mix(in srgb, var(--brand, #176ee0) 32%, transparent); outline-offset: 2px; }
      @media (max-width: 760px) { .canvas-pause-indicator { top: 10px; right: 10px; width: 38px; min-width: 38px; height: 38px; min-height: 38px; } }
      @media (prefers-reduced-motion: reduce) { .canvas-pause-indicator { transition: none; } }
      .teaching-board-panel { display: grid; min-width: 0; min-height: 0; align-self: stretch; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border: 1px solid var(--canvas-grid, #cbdcf0); border-radius: 10px; background: rgba(255, 255, 255, .97); box-shadow: 0 8px 20px #17366612; }
      .teaching-board-panel header { display: grid; min-height: 36px; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 7px 9px; border-bottom: 1px solid var(--canvas-grid, #e3ebf5); background: #fff; }
      .teaching-board-title { display: inline-flex; justify-content: center; align-items: center; text-align: center; line-height: 1; padding: 0 10px; min-width: 46px; height: 22px; box-sizing: border-box; border-radius: 999px; background: var(--brand, #176ee0); color: #fff; font-size: 11px; font-weight: 900; }
      .teaching-board-subtitle { min-width: 0; overflow: hidden; color: var(--muted, #72839a); font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; align-items: center; gap: 2px; }
      .teaching-board-tag-observe { color: var(--teaching-observation, #0e7490); font-weight: 700; }
      .teaching-board-tag-thought { color: var(--teaching-thought, #7e22ce); font-weight: 700; }
      .teaching-board-tag-formula { color: var(--teaching-formula, #1d4ed8); font-weight: 700; }
      .teaching-board-tag-result { color: var(--teaching-result, #15803d); font-weight: 700; }
      .teaching-board-range { color: var(--muted, #72839a); font-size: 10px; font-weight: 750; white-space: nowrap; }
      .teaching-board-range[hidden] { display: none !important; }
      .teaching-board-pager { display: none !important; gap: 4px; }
      .teaching-board-pager button { display: grid; width: 24px; height: 22px; place-items: center; border: 0; border-radius: 6px; padding: 0; background: #edf4fc; color: var(--brand, #176ee0); font-size: 12px; font-weight: 900; cursor: pointer; }
      .teaching-board-pager button:disabled { opacity: .34; cursor: default; }
      .teaching-board-list { display: grid; min-width: 0; min-height: 0; align-content: start; padding: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
      .teaching-board-item { min-width: 0; border-top: 1px solid #e7edf5; border-radius: 0; background: #fff; box-shadow: none; }
      .teaching-board-item:first-of-type { border-top: 0; }
      .teaching-board-row { position: relative; display: grid; width: 100%; min-width: 0; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 4px; border: 0 !important; border-radius: 0 !important; padding: 7px 8px; background: transparent; box-shadow: none !important; color: #637286; font-size: 12px; font-weight: 500; line-height: 1.35; text-align: left; cursor: pointer; }
      .teaching-board-row:hover { background: #f1f6fd; color: var(--brand-strong, #175eaf); }
      .teaching-board-row[hidden] { display: none !important; }
      .teaching-board-row[aria-current="step"] { background: color-mix(in srgb, var(--brand-soft, #edf5ff) 55%, #fff); color: #344a63; font-weight: 600; }
      .teaching-board-row[aria-current="step"]::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: 0; width: 3px; border-radius: 0 2px 2px 0; background: var(--brand, #176ee0); }
      .teaching-board-row[data-say-linked="true"] { background: color-mix(in srgb, var(--brand-soft, #edf5ff) 68%, #fff); box-shadow: none !important; color: #18304f; }
      .teaching-board-index { color: #8797aa; font-size: 9px; font-weight: 750; text-align: center; }
      .teaching-board-kind { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: #e9f8ef; color: #168450; font-size: 10px; font-weight: 900; }
      .teaching-board-kind[data-kind="formula"], .teaching-board-kind[data-kind="step"] { background: #e7f1ff; color: var(--brand, #176ee0); }
      .teaching-board-kind[data-kind="observation"] { background: var(--brand-soft, #e7f1ff); color: var(--brand-strong, #175eaf); }
      .canvas-stage-panel:not(:has(.lesson-analysis-stage:not([hidden]))) { grid-template-rows: minmax(0, 1fr); }
      .canvas-stage-panel > .canvas-viewport .canvas-zoom-surface > #stage { align-self: center !important; }
      .teaching-board-text { min-width: 0; overflow-wrap: anywhere; white-space: normal; }
      .math-typeset { display: inline-block; max-width: 100%; vertical-align: middle; overflow-x: auto; overflow-y: hidden; padding: .22em .06em; box-sizing: border-box; }
      .math-typeset math { font-family: "STIX Two Math", "Cambria Math", "Times New Roman", serif; font-size: 1.12em; }
      .teaching-board-item { --board-content-font-size: 14px; }
      .teaching-board-text { font-size: var(--board-content-font-size); font-weight: 500; color: #637286; line-height: 1.65; }
      .teaching-board-item.is-active .teaching-board-text { color: #52657d; }
      .teaching-board-text .math-typeset { padding-block: .32em; }
      .teaching-board-item .math-typeset math { font-size: 1em; }
      .teaching-board-item.is-active .teaching-board-hint { border-left: 0; }
      .teaching-board-hint { display: grid; grid-template-columns: 20px 20px minmax(0, 1fr); gap: 8px; position: relative; margin: 0; overflow: hidden; border: 0; border-top: 1px solid color-mix(in srgb, var(--brand, #176ee0) 18%, #dfe7f1); border-radius: 0; padding: 14px 16px; background: color-mix(in srgb, var(--brand-soft, #edf5ff) 42%, #fff); box-shadow: none; animation: none; }
      .teaching-board-hint .teaching-board-kind { margin-top: 3px; }
      .teaching-board-hint[hidden] { display: none !important; }
      .teaching-board-hint[role="button"] { cursor: pointer; }
      .teaching-board-hint[role="button"]:hover { background: var(--brand-soft, #edf5ff); }
      .teaching-board-hint[role="button"]:focus-visible { outline: 2px solid var(--brand, #176ee0); outline-offset: -3px; }
      .teaching-board-hint p { margin: 0; color: #243b53; font-size: var(--board-content-font-size); font-weight: 650; line-height: 1.8; overflow-wrap: anywhere; white-space: pre-wrap; }
      @keyframes teaching-board-hint-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
      @media (prefers-reduced-motion: reduce) { .teaching-board-hint { animation: none; } }
      .teaching-board-hint .teaching-board-index { padding-top: 3px; font-size: 12px; color: var(--brand, #176ee0); }
      .teaching-board-details { margin: 0 14px 14px 42px; padding: 6px; border-left: 2px solid #80b49b; border-radius: 6px; background: #f0f7f3; }
      .teaching-board-details[hidden] { display: none !important; }
      .teaching-board-details .teaching-board-row { background: transparent; grid-template-columns: minmax(0, 1fr); }
      .teaching-board-details .teaching-board-row { cursor: text; }
      .teaching-board-details .teaching-board-row::before { display: none; }
      .teaching-board-details .teaching-board-text { color: #296b4e; }
      .teaching-board-empty { align-self: center; margin: 0; padding: 18px; color: #8292a8; font-size: 12px; font-weight: 650; line-height: 1.6; text-align: center; }
      .teaching-board-empty[hidden] { display: none !important; }
      .lesson-original-image-dialog { width: min(92vw, 1100px); max-width: none; height: min(88vh, 760px); max-height: none; border: 0; border-radius: 14px; padding: 0; overflow: hidden; background: #fff; box-shadow: 0 28px 90px #10284a52; }
      .lesson-original-image-dialog::backdrop { background: rgba(12, 29, 54, .68); backdrop-filter: blur(3px); }
      .lesson-original-image-dialog figure { display: grid; width: 100%; height: 100%; grid-template-rows: minmax(0, 1fr) auto; margin: 0; }
      .lesson-original-image-dialog img { display: block; max-width: 100%; max-height: 100%; align-self: center; justify-self: center; object-fit: contain; }
      .lesson-original-image-dialog figcaption { padding: 10px 18px 14px; overflow: hidden; color: #60718b; font-size: 12px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
      .lesson-original-image-dialog-close { position: absolute; z-index: 2; top: 12px; right: 12px; display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid #d9e3ef; border-radius: 50%; background: rgba(255,255,255,.94); box-shadow: 0 5px 15px #1736661f; color: #243853; font-size: 24px; line-height: 1; cursor: pointer; }
      .complete-answer-dialog { position: fixed; top: 50%; right: auto; bottom: auto; left: 50%; display: none; width: min(92vw, 960px); height: auto; min-height: 240px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); margin: 0; padding: 0; transform: translate(-50%, -50%); overflow: hidden; border: 1px solid var(--line, #e2e8f0); border-radius: 14px; background: var(--paper, #fff); color: var(--ink, #0f172a); box-shadow: 0 25px 60px -12px rgba(15, 23, 42, .35), 0 0 0 1px rgba(15, 23, 42, .05); }
      .complete-answer-dialog[open] { display: flex; flex-direction: column; }
      .complete-answer-dialog::backdrop { background: rgba(12, 29, 54, .72); backdrop-filter: blur(6px); }
      .complete-answer-dialog-header { position: sticky; z-index: 2; top: 0; display: flex; min-height: 60px; flex: 0 0 60px; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 18px; border-bottom: 1px solid var(--line, #e2e8f0); background: var(--canvas-bg, #f8fbff); }
      .complete-answer-dialog-header span { color: var(--brand, #176ee0) !important; font-size: 10px; font-weight: 900; letter-spacing: .14em; }
      .complete-answer-dialog-header h2 { margin: 3px 0 0; color: var(--ink, #0f172a); font-size: 23px; font-weight: 900; }
      .complete-answer-dialog-header button { display: flex !important; width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; flex: 0 0 36px !important; align-items: center; justify-content: center; padding: 0 !important; border: 1px solid var(--line, #e2e8f0) !important; border-radius: 50% !important; background: var(--paper, #fff) !important; color: var(--muted, #64748b) !important; font-size: 0 !important; line-height: 1; cursor: pointer; }
      .complete-answer-dialog-header button:hover { border-color: var(--brand-muted, #80afea) !important; background: var(--brand-soft, #e4efff) !important; color: var(--brand-strong, #0d5fc7) !important; }
      .complete-answer-dialog-body { min-height: 180px; max-height: calc(100dvh - 92px); flex: 1 1 auto; padding: 20px 24px 26px; overflow: auto; background: color-mix(in srgb, var(--canvas, #f4f8fc) 50%, var(--paper, #fff)); }
      .complete-answer-question { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; margin-bottom: 18px; padding: 14px 16px; border: 1px solid var(--line, #e2e8f0); border-radius: 12px; background: color-mix(in srgb, var(--brand-soft, #e4efff) 42%, var(--paper, #fff)); }
      .complete-answer-question strong { color: var(--brand-strong, #0d5fc7) !important; font-size: 12px; white-space: nowrap; }
      .complete-answer-question p { margin: 0; color: var(--muted, #64748b); font-size: 13px; font-weight: 650; line-height: 1.65; white-space: pre-wrap; }
      .complete-answer-section { padding: 0 2px; }
      .complete-answer-section > h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; color: var(--ink, #0f172a); font-size: 16px; font-weight: 900; }
      .complete-answer-section > h3::before { content: ""; width: 4px; height: 18px; border-radius: 2px; background: var(--brand, #176ee0) !important; }
      .complete-answer-solution { display: grid; gap: 12px; }
      .complete-solution-lead { margin: 0; color: var(--ink, #0f172a); font-size: 15px; font-weight: 900; }
      .complete-solution-steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: written-solution-step; }
      .complete-solution-step { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; padding: 14px 16px; border: 1px solid var(--line, #e2e8f0); border-radius: 12px; background: var(--paper, #fff); counter-increment: written-solution-step; }
      .complete-solution-step::before { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: var(--brand-soft, #e4efff) !important; color: var(--brand-strong, #0d5fc7) !important; content: counter(written-solution-step); font-size: 12px; font-weight: 900; }
      .complete-solution-step h4 { align-self: center; margin: 2px 0 9px; color: var(--ink, #0f172a); font-size: 14px; font-weight: 900; }
      .complete-solution-lines { display: grid; grid-column: 2; gap: 7px; }
      .complete-solution-line { margin: 0; color: var(--muted, #64748b); font-size: 14px; font-weight: 620; line-height: 1.75; white-space: pre-wrap; }
      .complete-solution-line[data-kind="formula"] { padding: 7px 10px; border-left: 3px solid var(--brand-muted, #80afea); background: var(--brand-soft, #e4efff); color: var(--ink, #0f172a); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-weight: 720; }
      .complete-solution-line[data-kind="result"] { color: var(--brand-strong, #0d5fc7) !important; font-weight: 850; }
      .complete-solution-answer { margin: 2px 0 0; padding: 15px 17px; border: 1px solid color-mix(in srgb, var(--brand, #176ee0) 42%, var(--paper, #fff)) !important; border-radius: 12px; background: color-mix(in srgb, var(--brand-soft, #e4efff) 82%, var(--paper, #fff)) !important; color: var(--brand-strong, #0d5fc7) !important; font-size: 15px; font-weight: 900; line-height: 1.75; }
      .complete-solution-empty { margin: 0; padding: 16px; border-radius: 12px; background: var(--canvas-bg, #f8fbff); color: var(--muted, #64748b); }
      .canvas-shell #stage { min-width: 0 !important; min-height: 0 !important; align-self: center; justify-self: center; width: auto !important; max-width: none !important; height: auto !important; max-height: none !important; margin: 0 auto !important; border: 0; border-radius: 0; box-shadow: none; }
      .canvas-shell > .stage-loading-overlay { inset: 44px 0 0; border-radius: 0 0 12px 12px; }
      .canvas-shell button.canvas-followup-toggle { position: absolute; z-index: 12; top: 50%; right: calc(max(250px, 31%) + 24px); display: inline-flex; min-height: 36px; align-items: center; gap: 7px; padding: 0 12px 0 8px; touch-action: none; user-select: none; border: 1px solid color-mix(in srgb, var(--brand, #176ee0) 38%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--brand-soft, #edf5ff) 8%, transparent); box-shadow: none; color: var(--brand-strong, #0d5fc7); font-size: 12px; font-weight: 850; cursor: grab; transform: translateY(-50%); transition: opacity .18s ease, transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; }
      .canvas-shell button.canvas-followup-toggle span { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; background: var(--brand, #176ee0); color: #fff; font-size: 14px; font-weight: 900; }
      .canvas-shell button.canvas-followup-toggle:hover, .canvas-shell button.canvas-followup-toggle:focus-visible { border-color: color-mix(in srgb, var(--brand, #176ee0) 58%, #fff); background: rgba(255, 255, 255, .88); box-shadow: 0 9px 22px #176ee026; outline: none; transform: translateY(-50%) scale(1.02); backdrop-filter: blur(8px); }
      .canvas-shell button.canvas-followup-toggle.is-drag-positioned { right: auto; bottom: auto; transform: none; }
      .canvas-shell button.canvas-followup-toggle.is-drag-positioned:hover,
      .canvas-shell button.canvas-followup-toggle.is-drag-positioned:focus-visible { transform: scale(1.02); }
      .canvas-shell button.canvas-followup-toggle.is-dragging,
      .canvas-shell button.canvas-followup-toggle.is-drag-positioned.is-dragging { cursor: grabbing; transition: none; transform: none; }
      .canvas-followup-backdrop { position: absolute; z-index: 13; inset: 0; visibility: hidden; border-radius: inherit; background: rgba(15, 35, 63, .42); opacity: 0; pointer-events: none; transition: opacity .2s ease, visibility 0s linear .2s; backdrop-filter: blur(3px); }
      .canvas-shell.is-followup-open .canvas-followup-backdrop { visibility: visible; opacity: 1; pointer-events: auto; transition-delay: 0s; }
      .canvas-followup-panel { position: absolute !important; z-index: 14; top: 50%; right: auto; bottom: auto; left: 50%; display: flex; visibility: hidden; width: min(620px, calc(100% - 40px)); max-height: calc(100% - 40px); min-height: 0; flex-direction: column; margin: 0 !important; padding: 0 !important; overflow: hidden; border: 1px solid color-mix(in srgb, var(--brand, #176ee0) 26%, #dce7f3) !important; border-radius: 18px !important; background: rgba(255, 255, 255, .98) !important; box-shadow: 0 28px 72px #0f233f47 !important; opacity: 0; pointer-events: none; transform: translate(-50%, -47%) scale(.98); transition: opacity .2s ease, transform .24s ease, visibility 0s linear .24s; backdrop-filter: blur(18px); }
      .canvas-shell.is-followup-open .canvas-followup-panel { visibility: visible; opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); transition-delay: 0s; }
      .canvas-shell.is-followup-open button.canvas-followup-toggle { opacity: 0; pointer-events: none; transform: translateY(-50%) translateX(16px); }
      .canvas-shell.is-followup-open button.canvas-followup-toggle.is-drag-positioned { transform: translateX(16px); }
      .canvas-followup-header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 16px 12px; border-bottom: 1px solid var(--canvas-grid, #e2eaf4); background: linear-gradient(135deg, var(--brand-soft, #edf5ff), rgba(255,255,255,.94)); }
      .canvas-followup-header h2 { margin: 0 !important; padding: 0 !important; border: 0 !important; color: var(--ink, #17325c) !important; font-size: 17px !important; font-weight: 850; }
      .canvas-followup-header h2::before { content: none !important; }
      .canvas-followup-header p { margin: 3px 0 0; color: var(--muted, #60718b); font-size: 11px; font-weight: 650; }
      .canvas-followup-close { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.84); color: var(--muted, #60718b); font-size: 22px; line-height: 1; cursor: pointer; }
      .canvas-followup-close:hover { background: #fff; color: var(--brand, #176ee0); }
      .canvas-followup-panel .tutor-question-form { --followup-action-width: 104px; display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; gap: 10px; padding: 16px; overflow-y: auto; }
      .canvas-followup-panel button,
      .canvas-followup-panel .tutor-image-picker span { border-radius: 999px !important; }
      .canvas-followup-panel .tutor-question-tips { margin: 0; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--brand, #176ee0) 22%, var(--canvas-grid, #d8e3f1)); border-radius: 0; padding: 0 0 12px; background: transparent; }
      .canvas-followup-panel .tutor-question-tips button { font-size: 10.5px; }
      .canvas-followup-panel .tutor-question-form textarea { min-height: 224px; max-height: none; margin-top: 12px; flex: 0 0 auto; resize: vertical; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px 16px; background: #f8fafc; color: #0f172a; font-size: 14px; line-height: 1.6; outline: none !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .02); transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease; }
      .canvas-followup-panel .tutor-question-form textarea:focus,
      .canvas-followup-panel .tutor-question-form textarea:focus-visible { border-color: var(--brand, #176ee0) !important; background: #fff !important; box-shadow: 0 0 0 1px var(--brand, #176ee0), 0 1px 2px rgba(15, 23, 42, .05) !important; }
      .canvas-followup-panel .tutor-question-voice-status { width: calc(var(--followup-action-width) * 3 + 16px); max-width: 100%; min-width: 0; margin: 0 0 0 auto; color: var(--muted, #60718b); font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; text-align: left; }
      .canvas-followup-panel .tutor-question-actions { --followup-action-width: 104px; display: flex; width: 100%; min-width: 0; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: 8px; }
      .canvas-followup-panel .tutor-image-picker span,
      .canvas-followup-panel #tutorQuestionButton { display: inline-flex; width: var(--followup-action-width); min-width: var(--followup-action-width); min-height: 36px; height: 36px; box-sizing: border-box; align-items: center; justify-content: center; border-radius: 999px; padding: 0 15px; font-size: 12px; font-weight: 720; line-height: 1; white-space: nowrap; transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .12s ease; }
      .canvas-followup-panel .tutor-image-picker span { border: 1px solid #d8e1ec; background: #fff; color: var(--ink, #334155); box-shadow: 0 1px 2px #0f172a0d; }
      .canvas-followup-panel .tutor-image-picker:hover span,
      .canvas-followup-panel .tutor-image-picker:focus-within span { border-color: #b9c7d8; background: #f8fafc; color: var(--ink, #0f172a); transform: translateY(-1px); }
      .canvas-followup-panel #tutorQuestionButton { border: 1px solid transparent; background: var(--brand, #176ee0); color: #fff; box-shadow: 0 2px 6px #176ee047; }
      .canvas-followup-panel #tutorQuestionButton:hover { background: var(--brand-strong, #0d5fc7); box-shadow: 0 4px 12px #176ee059; transform: translateY(-1px); }
      .canvas-followup-panel .tutor-image-preview { position: relative; display: block; width: 96px; height: 96px; flex: 0 0 96px; overflow: hidden; border: 1px solid var(--canvas-grid, #d8e5f3); border-radius: 12px; padding: 0; background: #f8fafc; box-shadow: 0 4px 14px #0f172a14; }
      .canvas-followup-panel .tutor-image-preview[hidden] { display: none; }
      .canvas-followup-panel .tutor-image-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
      .canvas-followup-panel .tutor-image-name { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
      .canvas-followup-panel .tutor-image-preview button { position: absolute; top: 6px; right: 6px; display: grid; width: 24px; height: 24px; min-height: 24px; place-items: center; border: 1px solid #fff9; border-radius: 50%; padding: 0; background: #17243bcc; color: #fff; font-size: 16px; line-height: 1; box-shadow: 0 2px 7px #0f172a40; }
      .canvas-followup-panel .tutor-image-preview button:hover { background: #b3261e; }
      @media (max-width: 760px) {
        body:not(.question-entry-mode) .stage-panel { height: calc(100dvh - 70px); padding: 10px 10px 42px; }
        .canvas-shell { grid-template-rows: auto minmax(0, 1fr); border-radius: 10px; }
        .canvas-shell > .question-context { min-height: 40px; max-height: 128px; padding: 8px 10px; }
        .canvas-shell > .question-context p { font-size: 12px; }
        .lesson-original-image-trigger { width: 50px; height: 44px; flex-basis: 50px; }
        .lesson-visual-layout { grid-template-columns: minmax(0, 1fr) minmax(132px, 36%); gap: 8px; padding: 8px; }
        .teaching-board-panel header { grid-template-columns: auto minmax(0, 1fr); gap: 5px; padding: 6px; }
        .teaching-board-subtitle { display: none; }
        .teaching-board-row { grid-template-columns: 32px minmax(0, 1fr); gap: 2px; padding: 6px 5px; font-size: 11px; }
        .teaching-board-kind { width: 18px; height: 18px; font-size: 9px; }
        .teaching-board-hint { padding: 12px; }
        .teaching-board-item { --board-content-font-size: 13px; }
        .teaching-board-hint p { line-height: 1.75; }
        .canvas-shell button.canvas-followup-toggle { top: auto; right: calc(max(132px, 36%) + 16px); bottom: 12px; min-height: 34px; transform: none; }
        .canvas-shell button.canvas-followup-toggle:hover { transform: scale(1.02); }
        .canvas-shell.is-followup-open button.canvas-followup-toggle { transform: translateX(12px); }
        .canvas-followup-panel { top: 50%; right: auto; bottom: auto; left: 50%; width: min(620px, calc(100% - 16px)); max-height: calc(100% - 16px); }
        .canvas-zoom-controls { top: 8px; right: auto; bottom: auto; left: 8px; grid-template-columns: auto 32px 52px 32px; }
        .canvas-zoom-label { min-height: 32px; padding: 0 9px; }
        .complete-answer-dialog-body { padding: 15px 14px 20px; }
        .complete-answer-question { grid-template-columns: minmax(0, 1fr); gap: 6px; }
      }
      @media (max-width: 900px) and (orientation: portrait) {
        /* In portrait, the narrow side board would constrain the 16:11 canvas.
           Stack it underneath and let the page, rather than the board itself,
           own vertical scrolling. */
        .lesson-visual-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: clamp(220px, calc((100vw - 96px) * .6875), 440px) minmax(200px, max-content); }
        body:not(.question-entry-mode):not(.mobile-preview-mode) .stage-panel { overflow-y: auto; }
        .lesson-playback-panel { flex: 0 0 auto !important; }
        .canvas-shell { flex: 0 0 auto; }
        body:not(.question-entry-mode):not(.mobile-preview-mode) .learning-steps { position: static; flex: 0 0 24px; transform: none; margin: 12px auto 0; }
        .canvas-stage-panel { grid-column: 1; grid-row: 1; }
        .teaching-board-panel { grid-column: 1; grid-row: 2; }
        .lesson-visual-layout > .lesson-guide-rail { grid-column: 1; grid-row: 2; }
        .lesson-guide-rail > .question-context { grid-column: auto; grid-row: auto; }
        .lesson-guide-rail > .lesson-context { grid-column: auto; grid-row: auto; }
        .lesson-guide-rail > .teaching-board-panel { grid-column: auto; grid-row: auto; }
        .canvas-shell button.canvas-followup-toggle { top: 50%; right: 16px; bottom: auto; transform: translateY(-50%); }
        .canvas-shell button.canvas-followup-toggle:hover,
        .canvas-shell button.canvas-followup-toggle:focus-visible { transform: translateY(-50%) scale(1.02); }
        .canvas-shell button.canvas-followup-toggle.is-drag-positioned,
        .canvas-shell button.canvas-followup-toggle.is-drag-positioned:hover,
        .canvas-shell button.canvas-followup-toggle.is-drag-positioned:focus-visible { transform: none; }
        .canvas-followup-panel { top: 50%; right: auto; bottom: auto; left: 50%; width: min(620px, calc(100% - 16px)); max-height: calc(100% - 16px); }

        .lesson-guide-rail,
        .lesson-guide-rail > .teaching-board-panel,
        .teaching-board-panel {
          height: auto;
          min-height: 200px;
          overflow: visible;
        }
        .teaching-board-panel { grid-template-rows: auto auto auto; }
        .teaching-board-panel header { grid-template-columns: auto minmax(0, 1fr) auto; }
        .teaching-board-panel.has-swipe-navigation {
          overflow: hidden;
          position: relative;
        }
        .teaching-board-list {
          min-height: 0;
          overflow: visible;
          overscroll-behavior: auto;
          scrollbar-gutter: auto;
          touch-action: pan-y;
        }
        .teaching-board-panel.has-swipe-navigation .teaching-board-list {
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          width: 100%;
          overflow: visible;
          touch-action: pan-y;
          will-change: transform;
          transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
        }
        .teaching-board-step { display: none; min-height: 0; border: 0; }
        .teaching-board-step.is-active { display: grid; }
        .teaching-board-panel.has-swipe-navigation .teaching-board-step {
          display: block !important;
          flex: 0 0 100%;
          min-width: 100%;
          max-width: 100%;
          width: 100%;
          box-sizing: border-box;
          border: 0;
          padding-bottom: calc(52px + env(safe-area-inset-bottom, 10px));
        }
        .teaching-board-step-heading,
        .teaching-board-step-heading[aria-expanded="true"] {
          min-height: 0;
          padding: 14px 16px 10px !important;
          background: #fff !important;
          cursor: default;
          pointer-events: none;
        }
        .teaching-board-step-heading::after { content: none !important; }
        .teaching-board-step-body { gap: 8px; padding: 0 0 14px; background: #fff; }
        .teaching-board-panel.has-swipe-navigation .teaching-board-step-body {
          display: grid !important;
          gap: 8px;
          padding: 0 0 14px;
          background: #fff;
        }
        .teaching-board-step-body .teaching-board-hint {
          cursor: default;
          pointer-events: none;
        }
        .teaching-board-step-body .teaching-board-details { padding: 0 16px; }
        .teaching-board-swipe-hint {
          display: none;
          position: fixed;
          bottom: 0;
          left: 0;
          right: 0;
          z-index: 40;
          margin: 0;
          border-top: 1px solid rgba(220, 231, 243, 0.85);
          padding: 10px 16px max(10px, env(safe-area-inset-bottom, 10px));
          background: rgba(255, 255, 255, 0.94);
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          box-shadow: 0 -4px 16px rgba(15, 47, 74, 0.08);
          color: var(--muted, #64748b);
          font-size: 12px;
          font-weight: 650;
          letter-spacing: .02em;
          line-height: 1.4;
          text-align: center;
          pointer-events: none;
        }
        .teaching-board-panel.has-swipe-navigation .teaching-board-swipe-hint {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 6px;
        }
        .teaching-board-swipe-hint .swipe-hint-arrow {
          display: inline-block;
          font-size: 14px;
          opacity: 0.65;
          transform: translateY(-0.5px);
        }
        .teaching-board-range:not([hidden]) { display: block; }
      }
      @media (prefers-reduced-motion: reduce) {
        .teaching-board-panel.has-swipe-navigation .teaching-board-list { transition: none; }
      }
      /* Observation tools share the lesson frame without changing playback layout. */
      .lesson-stage-tabs { display: flex; flex: 0 0 auto; align-items: stretch; }
      .stage-panel .lesson-stage-tabs button,
      .stage-panel .auto-followup-sequence-item { min-width: 0; min-height: 44px; padding: 10px 14px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; box-shadow: none; color: var(--muted, #60718b); font: inherit; font-size: 14px; font-weight: 650; line-height: 1.4; cursor: pointer; white-space: nowrap; transform: none; }
      .stage-panel .lesson-stage-tabs button:hover:not(:disabled),
      .stage-panel .auto-followup-sequence-item:hover:not(:disabled) { background: var(--brand-soft, #edf5ff); color: var(--brand-strong, #175eaf); transform: none; }
      .stage-panel .lesson-stage-tabs button[aria-selected="true"],
      .stage-panel .auto-followup-sequence-item.is-active { border-bottom-color: var(--brand, #176ee0); background: transparent; color: var(--brand-strong, #175eaf); font-weight: 750; }
      .stage-panel .lesson-stage-tabs button:disabled { background: transparent; color: var(--muted, #60718b); opacity: .45; cursor: not-allowed; }
      .stage-panel .auto-followup-sequence-item.is-error { color: #b63b3b; }
      .stage-panel .auto-followup-sequence-item.is-error.is-active { border-bottom-color: #b63b3b; }
      .stage-panel .lesson-stage-tabs button[hidden] { display: none !important; }
      @media (max-width: 900px) {
        .stage-panel > .stage-speed { position: static; order: -1; align-self: flex-end; flex: 0 0 auto; width: auto; margin: 0 0 8px; }
        .stage-panel .lesson-stage-tabs { margin-right: 0; padding-top: 0; flex-wrap: wrap; }
      }
      .stage-panel .lesson-stage-tabs button:focus-visible, .stage-panel .auto-followup-sequence-item:focus-visible, .lesson-interaction-panel button:focus-visible, .lesson-interaction-panel input:focus-visible, .lesson-interaction-panel select:focus-visible { outline: 3px solid var(--brand-muted, #7cabeb); outline-offset: -3px; }
      .lesson-stage-mode-status { flex: 0 0 auto; margin: -2px 0 8px; color: var(--muted, #60718b); font-size: 11px; }
      .lesson-playback-panel { display: flex; min-width: 0; min-height: 0; flex: 1 1 auto; flex-direction: column; }
      #lessonPlaybackPanel[hidden], #lessonStudyPanel[hidden], #lessonInteractionPanel[hidden], #lessonStageModeStatus[hidden], .stage-panel .stage-speed[hidden], .lesson-study-panel [hidden], .lesson-interaction-panel [hidden] { display: none !important; }
      .stage-panel > .lesson-study-panel { display: flex; flex: 1 1 auto; min-width: 0; min-height: 0; width: min(100%, 1140px); margin: 0 auto; padding: 10px 0 0; overflow: auto; overscroll-behavior: contain; }
      .lesson-study-panel-card { display: flex; width: 100%; min-width: 0; max-width: 100%; min-height: 100%; flex: 1 1 auto; flex-direction: column; overflow: hidden; border: 1px solid #e0e8f2; border-radius: 22px; background: #fff; color: var(--text, #20334d); box-shadow: 0 12px 36px #10284a12; }
      .stage-panel > .lesson-interaction-panel { flex: 1 1 auto; min-width: 0; min-height: 0; width: min(100%, 1140px); margin: 0 auto; padding: 10px 0 0; overflow: auto; overscroll-behavior: contain; }
      .lesson-interaction-panel .lesson-study-section-heading h2 { margin: 0; color: var(--text, #20334d); font-size: 18px; font-weight: 750; line-height: 1.4; }
      .lesson-study-tools { display: flex; flex: 0 0 auto; min-width: 0; align-items: center; justify-content: flex-end; gap: 10px; padding: 7px 2px 1px; }
      .lesson-study-tools[hidden], .lesson-study-tools > [hidden], .lesson-study-dialog [hidden] { display: none !important; }
      .lesson-study-tools .lesson-study-open { display: inline-flex; min-height: 36px; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--canvas-grid, #d8e3f1); border-radius: 10px; padding: 6px 12px; background: #fff; color: var(--brand-strong, #175eaf); font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
      .lesson-study-tools .lesson-study-open svg { flex: 0 0 auto; }
      .lesson-study-tools .lesson-study-open:hover { border-color: var(--brand-muted, #7cabeb); background: var(--brand-soft, #edf5ff); }
      .lesson-study-tools-hint { margin: 0; color: var(--muted, #60718b); font-size: 11px; line-height: 1.5; }
      .lesson-study-dialog { width: min(1050px, calc(100vw - 32px)); max-width: none; max-height: 90vh; max-height: 90dvh; border: 1px solid #e0e8f2; border-radius: 22px; padding: 0; overflow: hidden; background: #fff; color: var(--text, #20334d); box-shadow: 0 28px 90px #10284a47; }
      .lesson-study-dialog[open] { display: flex; flex-direction: column; }
      .lesson-study-dialog::backdrop { background: rgba(17, 33, 56, .56); backdrop-filter: blur(5px); }
      .lesson-study-dialog *, .lesson-study-panel-card *, .lesson-study-tools > button { box-sizing: border-box; }
      .lesson-study-header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 16px; padding: 23px 26px 20px; border-bottom: 1px solid #e5edf6; background: linear-gradient(115deg, var(--brand-soft, #edf5ff), #fff 78%); }
      .lesson-study-eyebrow { margin: 0 0 6px; color: var(--brand-strong, #175eaf); font-size: 11px; font-weight: 650; line-height: 1.5; letter-spacing: .03em; }
      .lesson-study-header h2 { margin: 0; font-size: 24px; font-weight: 800; line-height: 1.3; letter-spacing: -.03em; }
      .lesson-study-dialog .lesson-study-close { display: grid; width: 38px; min-height: 38px; flex: 0 0 38px; place-items: center; border: 1px solid #dce5f0; border-radius: 50%; padding: 0; background: #fff; color: #526782; cursor: pointer; }
      .lesson-study-dialog .lesson-study-close:hover { background: var(--brand-soft, #edf5ff); color: var(--brand-strong, #175eaf); }
      .lesson-study-body { display: block; min-height: 0; flex: 1 1 auto; padding: 24px 26px 28px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
      .lesson-study-panel-card .lesson-study-body { display: grid; width: 100%; min-width: 0; max-width: 100%; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
      .lesson-study-panel-card .lesson-study-step-section, .lesson-study-panel-card .lesson-study-comparison { width: 100%; min-width: 0; max-width: 100%; }
      .lesson-study-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
      .lesson-study-section-heading h3 { margin: 0; color: #233750; font-size: 17px; font-weight: 800; line-height: 1.5; }
      .lesson-study-section-note { color: #75859a; font-size: 11px; line-height: 1.5; text-align: right; }
      .lesson-study-description { margin: 0 0 16px; color: #65768b; font-size: 12px; line-height: 1.75; }
      .lesson-study-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 2px 2px 5px; list-style: none; }
      .lesson-study-cards:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
      .lesson-study-cards:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .lesson-study-cards:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .lesson-study-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid #dfe7f1; border-radius: 14px; padding: 0; background: #fff; box-shadow: 0 2px 5px #1a365405; transition: border-color .16s ease, box-shadow .16s ease; }
      .lesson-study-card:hover { border-color: #a8c0dc; box-shadow: 0 5px 16px #1a365410; }
      .lesson-study-card.is-selected, .lesson-study-card[data-selected="true"] { border-color: var(--brand, #176ee0); box-shadow: 0 0 0 1px var(--brand, #176ee0); }
      .lesson-study-panel-card .lesson-study-card-preview, .lesson-study-dialog .lesson-study-card-preview { display: block; width: 100%; min-width: 0; max-width: 100%; border: 0; border-bottom: 1px solid #e9eef5; border-radius: 0; padding: 0; overflow: hidden; background: var(--canvas-bg, #f8fbff); color: inherit; cursor: pointer; }
      .lesson-study-panel-card .lesson-study-card-preview canvas, .lesson-study-panel-card canvas.lesson-study-card-preview, .lesson-study-dialog .lesson-study-card-preview canvas, .lesson-study-dialog canvas.lesson-study-card-preview { display: block; width: 100%; min-width: 0; max-width: 100%; min-height: 0; height: auto; aspect-ratio: 16 / 11; object-fit: contain; }
      .lesson-study-card-title { display: block; margin: 0; padding: 12px 13px 8px; color: #304660; font-size: 12px; font-weight: 700; line-height: 1.6; overflow-wrap: anywhere; text-align: left; }
      .lesson-study-panel-card .lesson-study-card-select, .lesson-study-dialog .lesson-study-card-select { display: inline-flex; min-height: 36px; align-items: center; justify-content: center; gap: 6px; margin: auto 12px 12px; border: 1px solid #dfe7f1; border-radius: 8px; padding: 7px 10px; background: #f7f9fc; color: #596e87; font: inherit; font-size: 11px; font-weight: 700; line-height: 1.3; cursor: pointer; }
      .lesson-study-panel-card .lesson-study-card-select:hover, .lesson-study-dialog .lesson-study-card-select:hover { border-color: var(--brand-muted, #7cabeb); color: var(--brand-strong, #175eaf); }
      .lesson-study-panel-card .lesson-study-card-select[aria-pressed="true"], .lesson-study-panel-card .lesson-study-card.is-selected .lesson-study-card-select, .lesson-study-dialog .lesson-study-card-select[aria-pressed="true"], .lesson-study-dialog .lesson-study-card.is-selected .lesson-study-card-select { border-color: var(--brand, #176ee0); background: var(--brand-soft, #edf5ff); color: var(--brand-strong, #175eaf); }
      .lesson-study-panel-card button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
      .lesson-study-dialog button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
      .lesson-study-dialog button:focus-visible, .lesson-study-dialog select:focus-visible, .lesson-study-dialog input:focus-visible, .lesson-study-tools .lesson-study-open:focus-visible { outline: 3px solid var(--brand-muted, #7cabeb); outline-offset: 3px; }
      .lesson-study-panel-card .lesson-study-card-preview:focus-visible, .lesson-study-dialog .lesson-study-card-preview:focus-visible { outline-offset: -4px !important; }
      .lesson-study-status { margin: 14px 0 0; border-left: 3px solid var(--brand-muted, #7cabeb); border-radius: 0 8px 8px 0; padding: 9px 12px; background: #f5f8fc; color: #58708a; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
      .lesson-study-status:empty { display: none; }
      .lesson-study-comparison, .lesson-interaction-panel { margin-top: 26px; border-top: 1px solid #e5edf6; padding-top: 24px; }
      .lesson-study-panel-card .lesson-study-comparison { min-width: 0; margin-top: 0; border-top: 1px solid #e5edf6; border-left: 0; padding: 24px 0 0; }
      .lesson-study-panel-card .lesson-study-clear, .lesson-study-dialog .lesson-study-clear { min-height: 36px; flex: 0 0 auto; border: 1px solid #dfe7f1; border-radius: 9px; padding: 7px 12px; background: #fff; color: #63758b; font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; }
      .lesson-study-panel-card .lesson-study-clear:hover, .lesson-study-dialog .lesson-study-clear:hover { background: #f5f8fc; color: #304660; }
      .lesson-study-compare-frames { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 15px; }
      .lesson-study-panel-card .lesson-study-compare-frames { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
      .lesson-study-compare-frame { width: 100%; min-width: 0; max-width: 100%; margin: 0; overflow: hidden; border: 1px solid #dfe7f1; border-radius: 14px; background: var(--canvas-bg, #f8fbff); }
      .lesson-study-compare-frame canvas { display: block; width: 100%; min-width: 0; max-width: 100%; min-height: 0; height: auto; aspect-ratio: 16 / 11; object-fit: contain; }
      .lesson-study-compare-frame figcaption { margin: 0; border-top: 1px solid #e5edf6; padding: 11px 14px; background: #fff; color: #3c536f; font-size: 12px; font-weight: 650; line-height: 1.65; overflow-wrap: anywhere; }
      @media (max-width: 1024px) {
        .lesson-study-panel-card .lesson-study-body { grid-template-columns: minmax(0, 1fr); gap: 20px; }
        .lesson-study-panel-card .lesson-study-cards,
        .lesson-study-panel-card .lesson-study-cards:has(> :nth-child(2):last-child),
        .lesson-study-panel-card .lesson-study-cards:has(> :nth-child(3):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .lesson-study-panel-card .lesson-study-cards:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
        .lesson-study-panel-card .lesson-study-comparison { margin-top: 0; border-top: 1px solid #e5edf6; border-left: 0; padding: 20px 0 0; }
      }
      .lesson-interaction-workspace { display: grid; grid-template-columns: minmax(180px, 230px) minmax(0, 1fr); gap: 18px; align-items: start; }
      .lesson-interaction-settings { min-width: 0; border: 1px solid #e5edf6; border-radius: 13px; padding: 16px; background: #f8fafd; }
      .lesson-interaction-choices-label { margin: 0 0 10px; color: #536b85; font-size: 12px; font-weight: 750; line-height: 1.5; }
      .lesson-interaction-choices { display: grid; gap: 8px; min-width: 0; }
      .lesson-interaction-panel .lesson-interaction-option { display: flex; align-items: flex-start; gap: 10px; width: 100%; min-width: 0; min-height: var(--control-height, 40px); margin: 0; border: 1px solid var(--line, #dce7f3); border-radius: var(--control-radius, 10px); padding: 12px; background: #fff; color: #2f4964; font: inherit; font-size: 14px; font-weight: 600; line-height: 1.6; text-align: left; white-space: normal; box-shadow: none; }
      .lesson-interaction-option-label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
      .lesson-interaction-option-mark { display: grid; flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; place-items: center; border: 1px solid var(--line, #dce7f3); border-radius: 50%; color: transparent; font-size: 12px; line-height: 1; }
      .lesson-interaction-panel button.lesson-interaction-option { cursor: pointer; }
      .lesson-interaction-panel button.lesson-interaction-option:not([aria-pressed="true"]):hover { border-color: var(--brand-muted, #7cabeb); background: var(--canvas-bg, #f8fbff); transform: none; }
      .lesson-interaction-panel .lesson-interaction-option[aria-pressed="true"] { border-color: var(--brand, #176ee0); background: var(--brand-soft, #e4efff); color: var(--brand-strong, #175eaf); }
      .lesson-interaction-option[aria-pressed="true"] .lesson-interaction-option-mark { border-color: var(--brand, #176ee0); background: var(--brand, #176ee0); color: #fff; }
      .lesson-interaction-panel p.lesson-interaction-option { border-left: 3px solid var(--brand-muted, #7cabeb); }
      .lesson-interaction-controls { display: grid; gap: 17px; margin-top: 19px; }
      .lesson-interaction-controls:empty { display: none; }
      #lessonInteractionChoice[hidden] + .lesson-interaction-controls { margin-top: 0; }
      .lesson-interaction-control { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; color: #536b85; font-size: 12px; line-height: 1.5; }
      .lesson-interaction-control label { min-width: 0; color: #425c79; font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
      .lesson-interaction-control output { color: var(--brand-strong, #175eaf); font-size: 22px; font-weight: 750; font-variant-numeric: tabular-nums; }
      .lesson-interaction-control input[type="range"] { width: 100%; min-width: 0; min-height: 32px; grid-column: 1 / -1; margin: 0; padding: 0; accent-color: var(--brand, #176ee0); cursor: pointer; }
      .lesson-interaction-control input[type="number"] { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; grid-column: 1 / -1; padding: 8px 12px; border: 1px solid #cfdced; border-radius: 9px; background: #fff; color: #244b76; font: inherit; font-size: 18px; font-variant-numeric: tabular-nums; }
      .lesson-interaction-bounds { display: flex; justify-content: space-between; grid-column: 1 / -1; margin-top: -8px; color: #63758b; font-size: 11px; }
      .lesson-interaction-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; grid-column: 1 / -1; margin-top: 6px; }
      .lesson-interaction-panel .lesson-interaction-buttons button { min-width: 0; min-height: 42px; border: 1px solid #cfdced; border-radius: 9px; padding: 8px 6px; background: #fff; color: #405b7a; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
      .lesson-interaction-panel .lesson-interaction-buttons .lesson-interaction-play { border-color: var(--brand, #176ee0); background: var(--brand, #176ee0); color: #fff; }
      .lesson-interaction-values { display: grid; gap: 9px; margin-top: 18px; border-top: 1px solid #dfe7f1; padding-top: 13px; color: var(--brand-strong, #175eaf); font-size: 16px; font-weight: 650; line-height: 1.65; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
      .lesson-interaction-values:empty { display: none; }
      .lesson-interaction-values p { margin: 0; }
      .lesson-interaction-preview { min-width: 0; overflow: hidden; border: 1px solid #dfe7f1; border-radius: 14px; background: var(--canvas-bg, #f8fbff); }
      #lessonInteractionCanvas { display: block; width: 100%; min-width: 0; min-height: 0; height: auto; aspect-ratio: 16 / 11; }
      .stage-panel > .lesson-interaction-panel { margin-top: 0; border-top: 0; padding-top: 0; }
      .stage-panel > .lesson-interaction-panel .lesson-study-eyebrow { display: none; }
      .lesson-interaction-panel .lesson-interaction-workspace { grid-template-columns: 240px minmax(0, 1fr); }
      .lesson-interaction-panel #lessonInteractionCanvas { max-height: calc(100dvh - 275px); object-fit: contain; }
      @media (max-width: 680px) {
        .lesson-stage-tabs { margin-right: 130px; gap: 2px; }
        .stage-panel .lesson-stage-tabs button { padding: 8px 9px; font-size: 13px; }
        .lesson-study-tools { justify-content: flex-start; flex-wrap: wrap; gap: 8px; padding-top: 6px; }
        .lesson-study-tools .lesson-study-open { min-height: 40px; padding: 7px 10px; }
        .lesson-study-tools-hint { font-size: 10px; }
        .lesson-study-dialog { width: calc(100vw - 16px); max-height: 90vh; max-height: 90dvh; border-radius: 17px; }
        .lesson-study-panel-card { border-radius: 17px; }
        .lesson-study-header { gap: 12px; padding: 19px 17px 16px; }
        .lesson-study-header h2 { font-size: 21px; }
        .lesson-study-dialog .lesson-study-close { width: 42px; min-height: 42px; flex-basis: 42px; }
        .lesson-study-body { padding: 18px 15px 22px; scrollbar-gutter: auto; }
        .lesson-study-section-heading h3 { font-size: 16px; }
        .lesson-study-section-note { max-width: 106px; font-size: 10px; }
        .lesson-study-dialog .lesson-study-cards { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(190px, 72%); grid-template-columns: none; gap: 12px; padding: 2px 3px 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
        .lesson-study-panel-card .lesson-study-cards,
        .lesson-study-panel-card .lesson-study-cards:has(> :only-child),
        .lesson-study-panel-card .lesson-study-cards:has(> :nth-child(2):last-child),
        .lesson-study-panel-card .lesson-study-cards:has(> :nth-child(3):last-child) { grid-template-columns: minmax(0, 1fr); }
        .lesson-study-card { scroll-snap-align: start; }
        .lesson-study-dialog .lesson-study-card-select, .lesson-study-dialog .lesson-study-clear { min-height: 40px; }
        .lesson-study-comparison, .lesson-interaction-panel { margin-top: 20px; padding-top: 20px; }
        .lesson-study-dialog .lesson-study-compare-frames { grid-template-columns: minmax(0, 1fr); gap: 12px; }
        .lesson-interaction-workspace { grid-template-columns: minmax(0, 1fr); gap: 12px; }
        .lesson-interaction-settings { padding: 14px; }
        .lesson-interaction-panel .lesson-interaction-option { min-height: 44px; }
        .lesson-interaction-control input[type="range"] { min-height: 40px; }
        .lesson-interaction-panel .lesson-interaction-workspace { grid-template-columns: minmax(0, 1fr); gap: 10px; }
        .lesson-interaction-panel .lesson-interaction-settings { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 12px; }
        .lesson-interaction-panel #lessonInteractionChoice { grid-column: 1 / -1; }
        .lesson-interaction-panel .lesson-interaction-controls { grid-column: 1; margin-top: 0; }
        .lesson-interaction-panel .lesson-interaction-values { grid-column: 2; margin: 0; border-top: 0; border-left: 1px solid #dfe7f1; padding: 0 0 0 12px; align-self: center; font-size: 14px; }
        .lesson-interaction-panel .lesson-interaction-controls:has(+ .lesson-interaction-values:empty) { grid-column: 1 / -1; }
        .lesson-interaction-panel .lesson-interaction-buttons { grid-template-columns: 1fr; }
        .lesson-interaction-panel .lesson-interaction-control output { font-size: 18px; }
        .lesson-interaction-panel #lessonInteractionCanvas { max-height: none; }
        .lesson-interaction-panel.is-process-observation .lesson-interaction-controls,
        .lesson-interaction-panel.is-process-observation .lesson-interaction-values { grid-column: 1 / -1; }
        .lesson-interaction-panel.is-process-observation .lesson-interaction-values { border-left: 0; padding: 0; }
        .lesson-interaction-panel.is-process-observation .lesson-interaction-buttons { grid-template-columns: 1fr 1fr; }
        .lesson-interaction-panel.has-task-timeline .lesson-interaction-preview { overflow-x: auto; overscroll-behavior-x: contain; }
        .lesson-interaction-panel.has-task-timeline #lessonInteractionCanvas { min-width: 800px; }
        .lesson-interaction-panel .lesson-study-status { margin-top: 10px; padding: 7px 10px; font-size: 11px; }
      }
      @media (max-width: 420px) {
        .lesson-stage-tabs { margin-right: 0; padding-top: 28px; }
      }
      @media (prefers-reduced-motion: reduce) { .lesson-study-card { transition: none; } }
      /* Match the mobile header contract after the desktop shell overrides. */
      @media (max-width: 760px) {
        body:not(.mobile-preview-mode) .topbar,
        body.question-entry-mode:not(.mobile-preview-mode) .topbar { height: 54px; min-height: 54px; flex-basis: 54px; margin: -10px -10px 10px; padding: 0 12px; gap: 10px; }
        body:not(.mobile-preview-mode) .topbar .tagline,
        body:not(.mobile-preview-mode) .topbar .top-links > span { display: none; }
        body:not(.mobile-preview-mode) .topbar .brand { min-width: 0; gap: 8px; font-size: 18px; }
        body:not(.mobile-preview-mode) .topbar .brand > span:last-child { overflow: hidden; text-overflow: ellipsis; }
        body:not(.mobile-preview-mode) .topbar .top-links { display: flex; flex: 0 0 auto; margin-left: auto; }
        body:not(.mobile-preview-mode) .topbar .new-question-button { padding-right: 12px; padding-left: 12px; }
      }
      /* Shared toolbar and conclusion-first teaching board. */
      .stage-panel .lesson-stage-toolbar { display: flex; min-width: 0; align-items: center; gap: 16px; width: min(100%, 1080px); margin: 0 auto; flex: 0 0 auto; border-bottom: 1px solid var(--canvas-grid, #d7e3f1); }
      .lesson-stage-view-tools { display: flex; min-width: 0; flex: 0 0 auto; align-items: center; gap: 8px; }
      .stage-panel .lesson-stage-tabs { margin: 0; padding: 0; gap: 4px; flex-wrap: nowrap; }
      .lesson-stage-toolbar .lesson-study-tools { padding: 0; justify-content: flex-start; }
      .lesson-stage-toolbar .lesson-study-tools-hint { display: none; }
      .lesson-explore-help { position: relative; flex: 0 0 auto; z-index: 30; }
      .lesson-explore-help summary { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--canvas-grid, #d7e3f1); border-radius: 50%; background: transparent; color: var(--muted, #60718b); cursor: pointer; list-style: none; font-size: 14px; font-weight: 650; }
      .lesson-explore-help summary:hover { background: var(--brand-soft, #edf5ff); color: var(--brand-strong, #175eaf); }
      .lesson-explore-help summary::-webkit-details-marker, .stage-speed summary::-webkit-details-marker { display: none; }
      .lesson-explore-help p { position: absolute; top: 36px; left: -180px; width: min(280px, calc(100vw - 48px)); margin: 0; padding: 14px; border: 1px solid #d8e3f1; border-radius: 10px; background: #fff; box-shadow: 0 8px 24px #17366620; color: #52657d; font-size: 13px; line-height: 1.7; }
      .stage-panel .step-actions .stage-speed { position: relative; inset: auto; display: block; flex: 0 0 36px; width: 36px; height: 36px; padding: 0; margin: 0; border: 0; background: transparent; z-index: 25; }
      .stage-speed summary { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #abc9ef; border-radius: 50%; background: #fff; color: #176ee0; cursor: pointer; list-style: none; font-size: 12px; }
      .stage-panel .step-actions .stage-speed .speed-options { position: absolute; top: 43px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 0; width: 62px; padding: 4px; border: 1px solid #c6d9f2; border-radius: 24px; background: #fff; box-shadow: 0 8px 20px #17366620; overflow: hidden; }
      .stage-panel .step-actions .stage-speed:not([open]) .speed-options { display: none; }
      .stage-panel .step-actions .speed-options button { width: 52px; min-width: 0; height: 36px; padding: 0; border: 0; border-radius: 18px; background: #fff; color: #52657d; font-size: 12px; }
      .stage-panel .step-actions .speed-options button.is-active { background: #176ee0; color: #fff; }
      .stage-panel .stage-speed input { display: none !important; }
      .stage-speed summary:focus-visible, .lesson-explore-help summary:focus-visible { outline: 3px solid #7cabeb; outline-offset: 2px; }
      .teaching-board-item .teaching-board-hint { grid-template-columns: 20px minmax(0, 1fr) 14px; align-items: start; padding: 12px; }
      .teaching-board-hint::after { content: '⌄'; color: #70809a; }
      .teaching-board-hint[aria-expanded="true"]::after { content: '⌃'; }
      .teaching-board-hint[data-replay-only="true"]::after { content: none; }
      /* Continuous seeking shares the animation clock, not step navigation. */
      .lesson-playback-panel > .learning-steps { display: none !important; }
      .lesson-playback-panel > .timeline { display: flex !important; flex: 0 0 auto; width: 100%; box-sizing: border-box; gap: 12px; padding: 8px 12px; }
      .lesson-playback-panel > .timeline #timeLabel { min-width: 68px; font-variant-numeric: tabular-nums; }
      .lesson-playback-panel > .timeline #scrubber { min-width: 0; height: 28px; cursor: pointer; }
      .lesson-playback-panel > .timeline #scrubber:focus-visible { outline: 2px solid var(--brand, #176ee0); outline-offset: 3px; }
      .teaching-board-step { min-width: 0; border-bottom: 1px solid var(--canvas-grid, #dce7f3); }
      .teaching-board-step-heading { display: grid; grid-template-columns: 26px minmax(0, 1fr) 14px; gap: 9px; align-items: start; width: 100%; padding: 15px 12px !important; border: 0 !important; border-radius: 0 !important; background: #fff !important; box-shadow: none !important; color: var(--ink, #243b53) !important; text-align: left; font: inherit; cursor: pointer; }
      .teaching-board-step-heading::after { content: '⌄'; color: var(--muted, #72839a); }
      .teaching-board-step-heading[aria-expanded="true"]::after { content: '⌃'; }
      .teaching-board-step-heading[aria-expanded="true"] { background: color-mix(in srgb, var(--brand, #176ee0) 7%, #fff) !important; box-shadow: none !important; }
      .teaching-board-step-number { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #e2e8f0; color: #475569; font-size: 12px; font-weight: 800; }
      .teaching-board-step-title { font-size: 14px; line-height: 1.6; font-weight: 600; overflow-wrap: anywhere; }
      .teaching-board-step-heading[aria-expanded="true"] .teaching-board-step-title { font-weight: 750; }
      .teaching-board-step-body[hidden], .teaching-board-details[hidden] { display: none !important; }
      .teaching-board-step-body { display: grid; gap: 6px; padding: 8px 0 10px; background: color-mix(in srgb, var(--brand, #176ee0) 3%, #fff); }
      .teaching-board-step-body .teaching-board-item { border: 0; background: transparent; }
      .teaching-board-step-body .teaching-board-hint { width: 100%; grid-template-columns: 22px minmax(0, 1fr) 14px; padding: 0 12px !important; border: 0 !important; background: transparent; text-align: left; border-radius: 0 !important; box-shadow: none !important; }
      .teaching-board-unit-label { color: var(--muted, #72839a); font-size: 12px; line-height: 1.7; }
      .teaching-board-step-body .is-active .teaching-board-unit-label { color: var(--brand, #176ee0); }
      .teaching-board-step-body .teaching-board-details { margin: 0 10px 14px 20px; padding: 0; border: 0; background: transparent; }
      .teaching-board-step-body .teaching-board-details .teaching-board-row { grid-template-columns: 24px minmax(0, 1fr); gap: 6px; align-items: start; padding: 5px 4px; }
      .teaching-board-kind[data-kind="thought"] { background: var(--brand-soft, #e7f1ff); color: var(--brand-strong, #175eaf); }
      .teaching-board-step-body .teaching-board-row:has([data-kind="thought"]) .teaching-board-text,
      .teaching-board-step-body .teaching-board-row:has([data-kind="observation"]) .teaching-board-text { color: var(--ink, #243b53); }
      .teaching-board-step-heading:focus-visible, .teaching-board-hint:focus-visible { outline: 2px solid var(--brand, #176ee0); outline-offset: -2px; }
      .teaching-board-step-body .teaching-board-hint { display: block; }
      .teaching-board-step-body .teaching-board-hint::after { content: none; }
      .teaching-board-step-body .teaching-board-details { margin: 0; }
      .teaching-board-step-body .teaching-board-hint[aria-expanded="false"] .teaching-board-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .teaching-board-step-body .teaching-board-hint[aria-expanded="false"] .math-typeset { max-width: 100%; max-height: 2em; overflow: hidden; }
      .teaching-board-row:has(.teaching-board-kind[data-kind="observation"]) .teaching-board-text { color: var(--ink, #243b53); }
      .teaching-board-conclusions { min-width: 0; }
      .teaching-board-hint .teaching-board-row { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: start; padding: 2px 0; margin: 0; background: transparent; }
      .teaching-board-hint .teaching-board-row::before { display: none; }
      .teaching-board-hint .teaching-board-text { color: #296b4e; }
      .teaching-board-item .teaching-board-details { box-sizing: border-box; width: 100%; margin: 0; padding: 12px 16px; border: 0; border-radius: 0; box-shadow: none; background: #f1f6fc; }
      .teaching-board-details p { margin: 0; font-size: var(--board-content-font-size); line-height: 1.8; color: #243b53; overflow-wrap: anywhere; }
      /* Teaching semantics stay stable across brand themes and domains. */
      :root {
        --teaching-observation: #0e7490;
        --teaching-observation-soft: #ecfeff;
        --teaching-thought: #7e22ce;
        --teaching-thought-soft: #faf5ff;
        --teaching-formula: #1d4ed8;
        --teaching-formula-soft: #eff6ff;
        --teaching-result: #15803d;
        --teaching-result-soft: #f0fdf4;
      }
      .teaching-board-row:has([data-kind="observation"]) { --teaching-role: var(--teaching-observation); --teaching-role-soft: var(--teaching-observation-soft); }
      .teaching-board-row:has([data-kind="thought"]) { --teaching-role: var(--teaching-thought); --teaching-role-soft: var(--teaching-thought-soft); }
      .teaching-board-row:has([data-kind="formula"]) { --teaching-role: var(--teaching-formula); --teaching-role-soft: var(--teaching-formula-soft); }
      .teaching-board-row:has([data-kind="result"]) { --teaching-role: var(--teaching-result); --teaching-role-soft: var(--teaching-result-soft); }
      .teaching-board-step-body .teaching-board-details { display: grid; gap: 6px; background: transparent; padding: 0; }
      .teaching-board-step-body .teaching-board-details .teaching-board-row {
        background: var(--teaching-role-soft, transparent);
        border: 0 !important;
        border-radius: 6px !important;
        padding: 9px 10px;
        margin: 0;
      }
      .teaching-board-step-body .teaching-board-row .teaching-board-kind {
        background: color-mix(in srgb, var(--teaching-role, #64748b) 12%, white);
        color: var(--teaching-role, #475569);
      }
      .teaching-board-step-body .teaching-board-row .teaching-board-text { color: var(--ink, #243b53); }
      .lesson-interaction-panel.is-empty .lesson-interaction-workspace { display: none; }
      @media (max-width: 760px) {
        .stage-panel .lesson-stage-toolbar { flex-wrap: wrap; gap: 0; }
        .lesson-stage-view-tools { width: 100%; gap: 6px; }
        .lesson-stage-toolbar .auto-followup-sequence { width: 100%; justify-content: flex-end; }
        .lesson-stage-toolbar .auto-followup-sequence-list { max-width: 100%; }
        .stage-panel .lesson-stage-tabs button, .stage-panel .auto-followup-sequence-item { padding: 10px 9px; font-size: 13px; }
        .lesson-stage-toolbar .lesson-study-tools { margin-left: auto; }
        .lesson-stage-toolbar .lesson-study-tools .lesson-study-open { min-height: 34px; padding: 6px 8px; font-size: 11px; }
      }
      @media (max-width: 380px) { .lesson-stage-view-tools { flex-wrap: wrap; } }
      /* Shared teaching-control roles: layout and mathematical time are unchanged. */
      :root {
        --control-height: 40px;
        --control-icon-size: 36px;
        --control-compact-height: 32px;
        --control-tab-height: 44px;
        --control-radius: 10px;
        --control-group-radius: 18px;
        --control-disabled-opacity: .45;
        --control-focus-width: 2px;
        --motion-feedback: 140ms;
        --motion-panel: 200ms;
        --motion-ease: cubic-bezier(.2, 0, 0, 1);
        --control-shadow: 0 4px 14px rgb(23 54 102 / 12%);
      }
      .stage-panel :is(.lesson-stage-tabs button, .auto-followup-sequence-item) {
        min-height: var(--control-tab-height);
      }
      .stage-panel :is(.lesson-study-open, .lesson-interaction-controls button, .lesson-interaction-option) {
        min-height: var(--control-height);
        border-radius: var(--control-radius);
        box-shadow: none;
      }
      .stage-panel .lesson-stage-toolbar .lesson-study-tools .lesson-study-open {
        min-height: var(--control-height);
      }
      .stage-panel .canvas-zoom-controls {
        border-radius: var(--control-group-radius);
        box-shadow: var(--control-shadow);
      }
      .stage-panel .canvas-zoom-controls button {
        min-height: var(--control-compact-height) !important;
      }
      .stage-panel .step-actions .stage-speed summary {
        width: var(--control-icon-size);
        height: var(--control-icon-size);
        border-color: var(--line, #dce7f3);
        color: var(--brand, #176ee0);
      }
      .stage-panel .step-actions .stage-speed .speed-options {
        border-radius: var(--control-group-radius);
        box-shadow: var(--control-shadow);
      }
      .stage-panel :is(.lesson-stage-tabs button, .auto-followup-sequence-item,
        .lesson-study-open, .lesson-interaction-controls button, .lesson-interaction-option,
        .step-actions button, .stage-speed summary, .canvas-zoom-controls button, .lesson-explore-help summary) {
        transition: color var(--motion-feedback) var(--motion-ease),
          background-color var(--motion-feedback) var(--motion-ease),
          border-color var(--motion-feedback) var(--motion-ease),
          box-shadow var(--motion-feedback) var(--motion-ease);
      }
      .stage-panel :is(button, select, input, summary):focus-visible {
        outline: var(--control-focus-width) solid var(--visual-focus, var(--brand, #176ee0)) !important;
        outline-offset: -3px;
      }
      .stage-panel :is(button, select, input):disabled {
        opacity: var(--control-disabled-opacity);
        cursor: not-allowed;
        transform: none;
      }
      .stage-panel :is(.lesson-interaction-controls button, .lesson-study-open):hover:not(:disabled) {
        transform: none;
        box-shadow: none;
      }
      /* On phones the document, rather than the currently selected lesson tab,
         owns vertical scrolling. This keeps a vertical swipe usable across the
         whole lesson surface instead of only in the tab's narrow scroll area. */
      @media (max-width: 760px) {
        body:is(.lesson-page-mode, .lesson-rendered-mode):not(.question-entry-mode) {
          overflow-x: hidden;
          overflow-y: auto;
          overscroll-behavior-y: auto;
          touch-action: pan-y;
        }
        body:is(.lesson-page-mode, .lesson-rendered-mode):not(.question-entry-mode) .app-shell,
        body:is(.lesson-page-mode, .lesson-rendered-mode):not(.question-entry-mode) .workspace,
        body:is(.lesson-page-mode, .lesson-rendered-mode):not(.question-entry-mode) .stage-panel {
          height: auto;
          min-height: 0;
          overflow: visible;
        }
        body:is(.lesson-page-mode, .lesson-rendered-mode):not(.question-entry-mode) .stage-panel {
          touch-action: pan-y;
        }
        body:is(.lesson-page-mode, .lesson-rendered-mode):not(.question-entry-mode) .lesson-playback-panel,
        body:is(.lesson-page-mode, .lesson-rendered-mode):not(.question-entry-mode) .stage-panel > .lesson-study-panel,
        body:is(.lesson-page-mode, .lesson-rendered-mode):not(.question-entry-mode) .stage-panel > .lesson-interaction-panel,
        body:is(.lesson-page-mode, .lesson-rendered-mode):not(.question-entry-mode) .lesson-study-panel-card,
        body:is(.lesson-page-mode, .lesson-rendered-mode):not(.question-entry-mode) .lesson-study-panel-card .lesson-study-body {
          min-height: 0;
          overflow: visible;
          overscroll-behavior: auto;
        }
        body:is(.lesson-page-mode, .lesson-rendered-mode):not(.question-entry-mode) .lesson-playback-panel,
        body:is(.lesson-page-mode, .lesson-rendered-mode):not(.question-entry-mode) .stage-panel > .lesson-study-panel,
        body:is(.lesson-page-mode, .lesson-rendered-mode):not(.question-entry-mode) .stage-panel > .lesson-interaction-panel {
          flex: 0 0 auto;
        }
      }
      @keyframes control-panel-appear { from { opacity: .85; } to { opacity: 1; } }
      .stage-panel .stage-speed[open] .speed-options,
      .stage-panel .lesson-explore-help[open] p {
        animation: control-panel-appear var(--motion-panel) var(--motion-ease);
      }
      @media (prefers-reduced-motion: reduce) {
        .stage-panel { --motion-feedback: 0ms; --motion-panel: 0ms; }
        .stage-panel :is(button, summary, select, input, .lesson-study-card,
          .canvas-followup-panel, .auto-followup-sequence-dot, .speed-options, .lesson-explore-help p) {
          animation: none !important;
          transition: none !important;
        }
        .stage-panel .learning-steps button::before { transition: none; }
      }