:root {
  --sans-font: -apple-system, BlinkMacSystemFont, "avenir next", avenir,
    helvetica, "helvetica neue", ubuntu, roboto, noto, "segoe ui",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI",
    "Microsoft YaHei", "Noto Sans CJK SC", arial, sans-serif;
  --bg: #fff;
  --bg: light-dark(#fff, #111);
  --bg-dim: #fff;
  --bg-dim: light-dark(#fff, #191919);
  --surface: #f7f7f7;
  --surface: light-dark(#f7f7f7, #171717);
  --text: #111;
  --text: light-dark(#111, #ccc);
  --text-dim: #444;
  --text-dim: light-dark(#333, #999);
  --link-blue: blue;
  --link-blue: light-dark(blue, #b5b5ff);
  --border: #333;
  --border: light-dark(#333, #888);
  --border-dim: #e8e8e8;
  --border-dim: light-dark(#eee, #555);
  --mode-border: light-dark(#555, #eee);
  --mode-dark: #555;
  --mode-light: #fff;
  --mark-bg: #fff8c5;
  --mark-bg: light-dark(#fff8c5, #3a3212);
  --reader-left-rail: clamp(180px, 11.5vw, 220px);
  --reader-right-rail: clamp(340px, 20.5vw, 390px);
  --reader-pdf-width: 920px;
  --reader-layout-gap: 18px;
  --reader-layout-offset: var(--reader-edge);
  --reader-layout-width: calc(var(--reader-left-rail) + var(--reader-pdf-width) + var(--reader-right-rail) + var(--reader-layout-gap) + var(--reader-layout-gap));
  --reader-content-max: 920px;
  --reader-edge: clamp(18px, 2vw, 36px);
  /*
   * Viewport docks must remain above PDF pages, the practice rail and the
   * fixed question/learning cards. Keep a little room below the browser's
   * maximum signed z-index for focus rings and future top-layer affordances.
   */
  --reader-floating-window-layer: 2147483600;
  color-scheme: light dark;
}

:root[data-theme="light"] {
  --bg: #fff;
  --bg-dim: #fff;
  --surface: #f7f7f7;
  --text: #111;
  --text-dim: #333;
  --link-blue: blue;
  --border: #333;
  --border-dim: #eee;
  --mark-bg: #fff8c5;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #111;
  --bg-dim: #191919;
  --surface: #171717;
  --text: #ddd;
  --text-dim: #aaa;
  --link-blue: #b5b5ff;
  --border: #aaa;
  --border-dim: #444;
  --mark-bg: #3a3212;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

/* ------------------------------------------------------------------ *
 * 站点级导航栏：完全对照听写项目(redbook-dictation) / 博客(colaMono)
 * 的 .site-frame > .header 结构——品牌 1rem、导航 flex gap .7em 15px、
 * 主题切换绝对定位右上角、无独立背景、透明 body 透出。
 * 所有页面(index/questions/review/reader)共用同一套类，切换页面时
 * 位置、大小、颜色完全一致。
 * ------------------------------------------------------------------ */
.site-frame {
  position: relative;
  padding: 20px;
}

.site-header {
  display: block;
  max-width: 640px;
  margin: 0 auto;
  padding: 18px 0 30px;
  color: var(--text-dim);
}

.site-header h2 {
  margin: 0 0 0.25em;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
}

.site-header a {
  color: light-dark(#1c1c1e, #f5f5f7);
  text-decoration: none;
}

.site-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7em;
  align-items: baseline;
  font-size: 17px;
}

.site-header nav a {
  color: light-dark(#6e6e73, #98989d);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  margin: 0;
  padding: 0;
  text-decoration: none;
}

.site-header nav a:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site-header nav a[aria-current="page"] {
  color: light-dark(#6e6e73, #98989d);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans-font);
  font-size: 16px;
  line-height: 1.75;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.reader-layout,
.questions-layout,
.practice-panel,
.resource-dock,
.tutor-dock {
  --reader-panel-bg: color-mix(in srgb, var(--bg) 90%, transparent);
  --reader-panel-bg-strong: color-mix(in srgb, var(--bg) 96%, transparent);
  --reader-panel-border: color-mix(in srgb, var(--border-dim) 82%, transparent);
  --reader-panel-text-muted: var(--text-dim);
  color: var(--text);
}

.reader-layout {
  min-height: 100vh;
  padding-top: 88px;
  background: var(--bg);
  isolation: auto;
}

/* 阅读器：品牌导航固定在左上角，保留听写/博客同款字体与间距，
 * 但不再横跨 PDF 正上方；fixed 保证跨页、跨滚动位置不变。 */
.reader-site-frame {
  padding-top: 0;
}

.reader-site-frame .site-header {
  position: fixed;
  top: 20px;
  right: auto;
  left: 20px;
  z-index: 58;
  box-sizing: border-box;
  width: max-content;
  max-width: min(190px, calc(100vw - 112px));
  margin: 0;
  padding: 0;
  background: transparent;
}

.reader-site-frame .site-header h2,
.reader-site-frame .site-header nav {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.reader-site-frame .site-header nav {
  margin-top: 0;
}

a {
  color: var(--text);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button {
  min-height: 36px;
  font: inherit;
  color: var(--text);
  cursor: pointer;
}

button:focus-visible,
a:focus-visible,
.paragraph:focus-visible,
.pdf-hit:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--border);
  outline-offset: 2px;
}

.limiter {
  max-width: 640px;
  margin: 0 auto;
  padding: 40px 0 90px;
}

.reader-text {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 20px 80px;
}

h1 {
  margin: 0 0 1.2rem;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
}

h2 {
  margin: 1.25rem 0 0.5rem;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
}

.plain-list a {
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-dim);
}

.entry-links {
  margin: -6px 0 18px;
  color: var(--text-dim);
}

.plain-list small,
.reader-nav,
.question-count,
.answer-result {
  color: var(--text-dim);
}

.reader-nav {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.kaoyan-header-wrap {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 62;
  min-height: 76px;
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--border-dim);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(18px);
}

.kaoyan-header {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  width: min(calc(100vw - 40px), 980px);
  margin: 0 auto;
  color: var(--text-dim);
}

.kaoyan-header h2 {
  flex: 0 0 auto;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

.kaoyan-header ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 14px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.35;
}

.kaoyan-header a {
  color: var(--text-dim);
}

.kaoyan-header a[aria-current="page"] {
  color: var(--text);
}

.kaoyan-header a:hover {
  color: var(--text);
  text-decoration: underline;
}

.reader-nav span {
  color: var(--text-dim);
}

/* 阅读器：PDF 工具条 + 主题切换固定在右上角（对照听写项目 mode-container 定位） */
.reader-site-tools {
  position: fixed;
  top: 28px;
  right: 20px;
  z-index: 2;
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 12px;
}

.reader-nav-books {
  position: relative;
  display: inline-flex;
  align-items: baseline;
}

.reader-nav-caret {
  margin-left: 3px;
  font-size: 11px;
  line-height: 1;
  opacity: 0.7;
  pointer-events: none;
}

.book-switch {
  position: absolute;
  top: calc(100% + 9px);
  left: -10px;
  z-index: 32;
  display: none;
  width: max-content;
  min-width: 176px;
  max-width: 300px;
  padding: 6px;
  border: 1px solid var(--border-dim);
  border-radius: 8px;
  background: var(--bg);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
}

.reader-nav-books:hover .book-switch,
.reader-nav-books:focus-within .book-switch {
  display: block;
}

.book-switch a {
  display: block;
  width: 100%;
  padding: 6px 10px;
  border-radius: 5px;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.book-switch a:hover,
.book-switch a:focus {
  color: var(--text);
  background: var(--surface);
  text-decoration: none;
}

.book-switch a[aria-current="page"] {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.pdf-toolbar {
  position: static;
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  align-items: baseline;
  justify-content: flex-start;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
}

.pdf-toolbar-group {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.pdf-toolbar-pagination {
  gap: 4px;
}

.reader-activity-bar {
  position: fixed;
  top: 50%;
  left: 8px;
  z-index: 57;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 38px;
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--border-dim) 76%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(16px);
  transform: translateY(-50%);
}

.reader-activity-bar[hidden] {
  display: none;
}

.reader-activity-bar button {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  min-width: 28px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

.reader-activity-bar button::before {
  position: absolute;
  top: 7px;
  bottom: 7px;
  left: -4px;
  width: 2px;
  border-radius: 999px;
  background: currentColor;
  content: "";
  opacity: 0;
  transition: opacity 160ms ease;
}

.reader-activity-bar button:hover,
.reader-activity-bar button:focus-visible {
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  color: var(--text);
}

.reader-activity-bar button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--text) 54%, transparent);
  outline-offset: 1px;
}

.reader-activity-bar button.is-active {
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text);
}

.reader-activity-bar button.is-active::before {
  opacity: 1;
}

.reader-activity-bar svg {
  width: 17px;
  height: 17px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}

.question-pins-menu {
  position: fixed;
  z-index: calc(var(--reader-floating-window-layer) + 20);
  width: 210px;
  max-height: min(360px, 60vh);
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--border-dim);
  background: color-mix(in srgb, var(--bg) 97%, transparent);
  color: var(--text);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(16px);
  pointer-events: auto;
  isolation: isolate;
}

.question-pins-menu[popover] {
  inset: auto;
  margin: 0;
}

.question-pins-menu nav {
  display: grid;
  gap: 5px;
}

.question-pin-projection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--border-dim);
}

.question-pin-projection > span {
  display: inline-flex;
  gap: 9px;
}

.question-pin-new-round {
  display: inline-flex;
  gap: 4px;
}

.question-pin-new-round [data-practice-new-round] {
  color: var(--text);
}

.question-pins-menu nav > span {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 9px;
}

.question-pins-menu nav > [data-question-pin-filter-group="granularity"] {
  margin-bottom: 2px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-dim);
}

.question-pins-menu button {
  min-height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 11px;
}

.question-pins-menu button[aria-pressed="true"] {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.question-pins-hidden {
  display: grid;
  gap: 5px;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--border-dim);
}

.question-pin-spotlight-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 8px;
  padding-top: 7px !important;
  border-top: 1px solid var(--border-dim) !important;
  color: var(--text-dim);
  text-decoration: none !important;
}

.question-pin-spotlight-toggle i {
  position: relative;
  width: 26px;
  height: 15px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}

.question-pin-spotlight-toggle i::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform 160ms ease, background 160ms ease;
}

.question-pin-spotlight-toggle[aria-pressed="true"] i::after {
  background: var(--text);
  transform: translateX(11px);
}

.question-pin-spotlight-toggle small {
  margin-left: 4px;
  color: var(--text-muted);
  font-size: 9px;
}

body.reader-spotlight-active :is(
  .pdf-question-pin,
  .pdf-question-capsule,
  .pdf-learning-anchor-capsule,
  .pdf-learning-anchor-note,
  .pdf-paragraph-visualization-control,
  .pdf-paragraph-visualization-source
) {
  opacity: var(--question-pin-flashlight-opacity, 1) !important;
  transition: opacity 90ms linear !important;
}

body.reader-spotlight-active :is(
  .learning-rich-quicklook,
  .pdf-question-pin-card,
  [data-floating-window]:not(.is-hidden)
) {
  opacity: 0.13 !important;
  transition: opacity 90ms linear !important;
}

body.reader-spotlight-active :is(
  .learning-rich-quicklook,
  .pdf-question-pin-card,
  [data-floating-window]:not(.is-hidden)
):is(:hover, :focus-within) {
  opacity: 0.94 !important;
}

/* 聚光灯菜单：管理隐藏界面 / 文字聚光灯两个独立模式 */
.reader-spotlight-menu {
  position: fixed;
  z-index: calc(var(--reader-floating-window-layer) + 20);
  width: 264px;
  padding: 8px;
  border: 1px solid var(--border-dim);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg) 97%, transparent);
  color: var(--text);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(16px);
  pointer-events: auto;
  isolation: isolate;
}

.reader-spotlight-menu[popover] {
  inset: auto;
}

.reader-spotlight-menu[hidden] {
  display: none;
}

.reader-spotlight-menu-title {
  padding: 2px 6px 7px;
  border-bottom: 1px solid var(--border-dim);
  color: var(--text-dim);
  font-size: 12px;
}

.reader-spotlight-mode-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin-top: 6px;
  padding: 7px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-align: left;
}

.reader-spotlight-mode-toggle:hover,
.reader-spotlight-mode-toggle:focus-visible {
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  text-decoration: none;
}

.reader-spotlight-mode-toggle small {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 10px;
}

.reader-spotlight-mode-toggle i {
  position: relative;
  flex: 0 0 auto;
  width: 30px;
  height: 17px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  transition: background-color 160ms ease, border-color 160ms ease;
}

.reader-spotlight-mode-toggle i::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform 160ms ease, background 160ms ease;
}

.reader-spotlight-mode-toggle[aria-pressed="true"] i {
  background: color-mix(in srgb, var(--text) 22%, transparent);
  border-color: var(--text);
}

.reader-spotlight-mode-toggle[aria-pressed="true"] i::after {
  background: var(--text);
  transform: translateX(13px);
}

/* 文字聚光灯：选中文字保持清晰，其余文字变淡。
 * PDF 字形画在 canvas 上、文本层 span 是透明的，因此与朗读跟随一致，
 * 用白色 veil 盖住未选中 span 的字形区域，让 canvas 上的字形变淡。 */
body.reader-text-spotlight-active .pdf-text-layer span[data-read-text] {
  transition: background-color 120ms linear, opacity 120ms linear;
}

body.reader-text-spotlight-active.reader-text-spotlight-has-selection .pdf-text-layer span[data-read-text] {
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, var(--text-spotlight-inactive-opacity, 0.78)),
    rgba(255, 255, 255, var(--text-spotlight-inactive-opacity, 0.78))
  );
}

/* 反色夜间模式下，文字聚光灯的遮罩同步反色为黑纱，保持“未选中文字变淡”的语义 */
body.reader-pdf-night-invert.reader-text-spotlight-active.reader-text-spotlight-has-selection .pdf-text-layer span[data-read-text] {
  background-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, var(--text-spotlight-inactive-opacity, 0.78)),
    rgba(0, 0, 0, var(--text-spotlight-inactive-opacity, 0.78))
  );
}

body.reader-text-spotlight-active .pdf-text-layer span[data-read-text].is-text-spotlight-selected {
  background-image: none;
}

/* Spotlight is a reading aid, never an interaction lock.  Toolbars and
 * navigation stay visible. Pins and open cards use cursor distance, while
 * floating work panels retain the original dim-until-hover contract. */
body.reader-spotlight-active :is(
  .site-header,
  .reader-site-tools,
  #pdf-toolbar,
  #reader-activity-bar,
  .question-pins-menu,
  .selection-toolbar.is-visible,
  .practice-panel
) {
  opacity: 1 !important;
}

body.reader-spotlight-active .selection-toolbar:not(.is-visible) {
  opacity: 0 !important;
  pointer-events: none !important;
}

.pdf-learning-anchor-note.is-swipe-arrival,
.pdf-question-pin-card.is-swipe-arrival,
#practice-panel .practice-question.is-swipe-arrival {
  animation: floating-card-swipe-arrival 160ms ease-out;
}

@keyframes floating-card-swipe-arrival {
  from { transform: translateX(var(--floating-card-swipe-offset, 8px)); opacity: 0.82; }
  to { transform: translateX(0); opacity: 1; }
}

.selection-highlight-colors,
.learning-anchor-highlight-colors {
  display: flex;
  align-items: center;
  gap: 5px;
}

.selection-highlight-colors {
  padding-inline: 3px;
  border-inline: 1px solid var(--border-dim);
}

.learning-anchor-highlight-colors {
  margin-right: auto;
}

.highlight-color-swatch {
  width: 15px;
  min-width: 15px;
  height: 15px;
  min-height: 15px;
  padding: 0;
  border: 1px solid var(--highlight-swatch-line);
  border-radius: 50%;
  background: var(--highlight-swatch);
  cursor: pointer;
}

.highlight-color-swatch[aria-pressed="true"] {
  outline: 1.5px solid var(--text);
  outline-offset: 1.5px;
  text-decoration: none;
}

.question-pins-hidden > button {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.question-pins-hidden > button span,
.question-pins-hidden > small {
  color: var(--text-muted);
}

.pdf-toolbar button {
  appearance: none;
  display: inline-grid;
  place-items: center;
  width: 22px;
  min-width: 22px;
  height: 22px;
  min-height: 22px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  font: 600 1rem/1 var(--sans-font);
  cursor: pointer;
}

.pdf-toolbar button:hover {
  color: var(--text);
  border-color: var(--border-dim);
  text-decoration: none;
}

.pdf-toolbar button svg {
  width: 15px;
  height: 15px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}

.selection-capture-toggle {
  display: none;
}

.selection-capture-toggle.is-active {
  color: var(--text);
  border-color: var(--border);
  background: color-mix(in srgb, var(--text) 7%, transparent);
  text-decoration: none;
}

.pdf-toolbar button:disabled {
  color: var(--text-dim);
  cursor: default;
  opacity: 0.45;
  text-decoration: none;
}

.pdf-toolbar input {
  width: 3.4ch;
  min-height: 0;
  padding: 0 0 1px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font: inherit;
  line-height: 1.35;
  text-align: center;
  appearance: textfield;
}

.pdf-toolbar input::-webkit-outer-spin-button,
.pdf-toolbar input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}

.pdf-toolbar input:hover,
.pdf-toolbar input:focus {
  border-bottom-color: var(--border);
  outline: 0;
}

.page-jump {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-height: 0;
  color: var(--text-dim);
  line-height: 1.35;
}

.pdf-toolbar span {
  min-width: auto;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.mode-container {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* 对照听写项目的右上角主题切换：绝对定位到 .site-frame 右上角 */
.site-frame .mode-container {
  position: absolute;
  top: 28px;
  right: 20px;
  z-index: 2;
  gap: 8px;
}

.reader-site-tools .mode-container {
  position: static;
  top: auto;
  right: auto;
}

.kaoyan-header-wrap .mode-container {
  position: absolute;
  top: 22px;
  right: 20px;
  z-index: 1;
}

.mode {
  display: block;
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  overflow: hidden;
  color: transparent;
  font-size: 17px;
  background: transparent;
  border: 2px solid var(--mode-border);
  border-radius: 10px;
  opacity: 0.25;
  text-indent: -10000px;
}

.mode-container:hover .mode {
  opacity: 1;
}

.mode.is-selected {
  opacity: 0.55;
}

.mode:hover {
  cursor: pointer;
}

.mode:focus-visible {
  outline: 1px solid var(--link-blue);
  outline-offset: 2px;
  opacity: 1;
}

.mode.auto {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><rect width='100%' height='100%' fill='white'/><path fill='%23777' d='M0,0L0,20L20,20L0,0'/></svg>");
}

.mode.light {
  background-color: var(--mode-light, #fff);
}

.mode.dark {
  background-color: var(--mode-dark, #555);
}

.reader-body {
  display: grid;
  grid-template-columns:
    minmax(0, var(--reader-left-rail))
    minmax(0, var(--reader-pdf-width))
    minmax(0, var(--reader-right-rail));
  column-gap: var(--reader-layout-gap);
  width: min(calc(100vw - var(--reader-edge) - var(--reader-edge)), var(--reader-layout-width));
  max-width: none;
  margin: 0 auto;
  padding: 0 0 90px;
}

.reader-content-shell {
  grid-column: 2;
  position: relative;
  width: var(--reader-pdf-width);
  max-width: 100%;
  min-width: 0;
  margin: 0 auto;
}

.reader-toc {
  position: fixed;
  top: var(--reader-toc-top, 100px);
  bottom: 24px;
  left: var(--reader-layout-offset);
  z-index: 26;
  width: calc(var(--reader-left-rail) - 8px);
  height: auto;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 180ms ease;
}

.reader-toc[hidden] {
  display: none;
}

.reader-toc-inner {
  position: relative;
  display: grid;
  justify-items: end;
  gap: 10px;
  width: 100%;
}

.reader-toc-toggle,
.writing-floating-toc-toggle,
.reader-toc-panel,
.writing-floating-toc-panel,
.toc-list button,
.writing-floating-toc-close,
.writing-floating-toc-link {
  pointer-events: auto;
}

.reader-toc-toggle,
.writing-floating-toc-toggle {
  min-width: 0;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--border-dim) 82%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  color: var(--text-dim);
  backdrop-filter: blur(12px);
  opacity: 0.56;
  transition: opacity 180ms ease, color 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.reader-toc-panel,
.writing-floating-toc-panel {
  display: grid;
  gap: 10px;
  width: 100%;
  max-height: min(72vh, calc(100vh - 176px), 620px);
  padding: 12px;
  overflow: hidden;
  border: 1px solid var(--reader-panel-border);
  border-radius: 8px;
  background: var(--reader-panel-bg);
  backdrop-filter: blur(16px);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 180ms ease, transform 180ms ease, border-color 180ms ease;
  pointer-events: none;
}

.reader-toc:hover .reader-toc-toggle,
.reader-toc:focus-within .reader-toc-toggle,
.reader-toc.is-open .reader-toc-toggle {
  color: var(--text);
  border-color: var(--border);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  opacity: 0.94;
}

.reader-toc:hover .reader-toc-panel,
.reader-toc:focus-within .reader-toc-panel,
.reader-toc.is-open .reader-toc-panel {
  opacity: 1;
  transform: translateY(0);
  border-color: var(--border);
  pointer-events: auto;
}

.reader-toc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.reader-toc-head strong,
.writing-floating-toc-head strong {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0;
}

.writing-floating-toc-close {
  display: none;
  width: 22px;
  height: 22px;
  min-height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font-size: 1rem;
  line-height: 1;
}

.toc-list {
  display: grid;
  align-content: start;
  gap: 6px;
  max-height: min(52vh, calc(100vh - 270px), 430px);
  overflow: auto;
  padding-right: 3px;
  scrollbar-width: thin;
}

.toc-list button {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 20px;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--reader-panel-text-muted);
  font-size: 0.77rem;
  line-height: 1.45;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.86;
  transition: color 180ms ease, opacity 180ms ease, transform 180ms ease;
}

.toc-list button:hover,
.toc-list button:focus-visible {
  color: var(--text);
  opacity: 1;
  transform: translateX(1px);
}

.toc-list button.is-active {
  color: var(--text);
  opacity: 1;
  transform: translateX(1px);
}

.toc-list button[data-level="1"] {
  padding-left: 10px;
  font-size: 0.74rem;
}

.pdf-reader {
  min-height: 70vh;
  min-width: 0;
  padding: 18px 0 0;
  overflow: visible;
  overflow-anchor: none;
}

.reader-status {
  max-width: 760px;
  margin: 0 auto;
  color: var(--text-dim);
}

.pdf-page-shell {
  position: relative;
  display: flex;
  justify-content: safe center;
  width: 100%;
  margin: 0 auto 18px;
  scroll-margin-top: 96px;
  overflow-anchor: none;
  -webkit-user-select: none;
  user-select: none;
}

.pdf-page-placeholder {
  display: grid;
  place-items: center;
  width: min(100%, 760px);
  box-sizing: border-box;
  height: 100%;
  min-height: 0;
  border: 1px solid var(--border-dim);
  background: var(--surface);
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.pdf-page {
  position: relative;
  flex: 0 0 auto;
  box-sizing: border-box;
  margin: 0 auto;
  overflow: visible;
  border: 1px solid var(--border-dim);
  background: #fff;
  -webkit-user-select: none;
  user-select: none;
}

.pdf-canvas,
.pdf-text-layer,
.pdf-annotation-layer,
.pdf-paragraph-visualization-layer {
  position: absolute;
  inset: 0;
}

.pdf-canvas {
  display: block;
  z-index: 0;
  -webkit-user-select: none;
  user-select: none;
}

/* PDF 夜间模式：降低亮度（图片保持原色，柔和护眼） */
body.reader-pdf-night-dim .pdf-page {
  background: #17181a;
}

body.reader-pdf-night-dim .pdf-canvas {
  filter: brightness(0.82) contrast(1.04);
}

/* PDF 夜间模式：反色（黑底白字，hue-rotate 补偿使图片色相接近原图） */
body.reader-pdf-night-invert .pdf-page {
  background: #0d0d0f;
}

body.reader-pdf-night-invert .pdf-canvas {
  filter: invert(0.92) hue-rotate(180deg);
}

.pdf-text-layer {
  overflow: hidden;
  text-align: initial;
  opacity: 1;
  line-height: 1;
  text-size-adjust: none;
  forced-color-adjust: none;
  transform-origin: 0 0;
  pointer-events: auto;
  z-index: 1;
  -webkit-user-select: text;
  user-select: text;
}

.pdf-annotation-layer {
  overflow: visible;
  pointer-events: none;
  z-index: 2;
  -webkit-user-select: none;
  user-select: none;
}

.pdf-paragraph-visualization-layer {
  z-index: 3;
  overflow: visible;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.pdf-paragraph-visualization-control {
  position: absolute;
  z-index: 4;
  min-width: 52px;
  min-height: 19px;
  padding: 2px 5px;
  border: 1px solid color-mix(in srgb, #316fa6 78%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 92%, #e7f3ff);
  box-shadow: 0 2px 8px rgba(38, 91, 136, 0.16);
  color: color-mix(in srgb, var(--text) 76%, #1f5f95);
  font: inherit;
  font-size: 9px;
  font-weight: 650;
  line-height: 1.15;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.pdf-paragraph-visualization-control-group {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  pointer-events: none;
}

.pdf-paragraph-visualization-control-group > button {
  pointer-events: auto;
}

.pdf-paragraph-visualization-control-group > .pdf-paragraph-visualization-control {
  position: static;
}

.pdf-paragraph-visualization-control-group.has-secondary {
  gap: 0;
}

.pdf-paragraph-visualization-control-group.has-secondary > .pdf-paragraph-visualization-control {
  box-sizing: border-box;
  height: 22px;
  min-height: 22px;
  padding-block: 0;
  border-color: #7caf8b;
  border-radius: 7px 0 0 7px;
  background: #eef8f0;
  box-shadow: 0 2px 8px rgba(45, 92, 57, 0.12);
  color: #28653f;
}

.pdf-paragraph-visualization-regenerate {
  box-sizing: border-box;
  display: grid;
  width: 24px;
  min-width: 24px;
  height: 22px;
  min-height: 22px;
  place-items: center;
  padding: 0;
  border: 1px solid #7caf8b;
  border-left: 0;
  border-radius: 0 7px 7px 0;
  background: #eef8f0;
  color: #28653f;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.pdf-paragraph-visualization-regenerate svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.pdf-paragraph-visualization-control-group.has-secondary > .pdf-paragraph-visualization-control:hover,
.pdf-paragraph-visualization-control-group.has-secondary > .pdf-paragraph-visualization-control:focus-visible,
.pdf-paragraph-visualization-regenerate:hover,
.pdf-paragraph-visualization-regenerate:focus-visible {
  border-color: #4f9164;
  background: #dcefe1;
  color: #1f5e37;
  outline: 0;
  transform: none;
}

.pdf-paragraph-visualization-control:hover,
.pdf-paragraph-visualization-control:focus-visible,
.pdf-paragraph-visualization-control.is-selected {
  border-color: #1f669f;
  background: #286b9e;
  color: #fff;
  transform: translateY(-1px);
}

.pdf-paragraph-visualization-control.is-queued,
.pdf-paragraph-visualization-control.is-running {
  border-color: #a66e24;
  background: #fff3dc;
  color: #7a4d13;
}

.pdf-paragraph-visualization-control.is-pinned,
.pdf-paragraph-visualization-control.is-completed {
  border-color: #39774e;
  background: #e9f7ed;
  color: #28653f;
}

.pdf-paragraph-visualization-control.is-failed {
  border-color: #a54e4e;
  background: #fff0f0;
  color: #8e3535;
}

.pdf-paragraph-visualization-source {
  position: absolute;
  z-index: 2;
  width: 14px;
  min-width: 14px;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  cursor: pointer;
  pointer-events: auto;
}

.pdf-paragraph-visualization-source::before {
  position: absolute;
  inset: 0 auto 0 6px;
  width: 1.5px;
  border-radius: 999px;
  background: color-mix(in srgb, #3279c9 70%, transparent);
  content: "";
  transition: width 130ms ease, background 130ms ease;
}

.pdf-paragraph-visualization-source.is-granular::before {
  opacity: 0.45;
}

.pdf-paragraph-visualization-source:hover::before,
.pdf-paragraph-visualization-source:focus-visible::before,
.pdf-paragraph-visualization-source.is-source-preview::before,
.pdf-paragraph-visualization-source.is-selected::before {
  width: 3px;
  background: #286b9e;
  opacity: 1;
}

.pdf-paragraph-visualization-source:focus-visible { outline: 0; }

.pdf-paragraph-visualization-source-region {
  position: absolute;
  z-index: 1;
  box-sizing: border-box;
  border-radius: 2px;
  background: transparent;
  pointer-events: none;
  transition: background 130ms ease, box-shadow 130ms ease;
}

.pdf-paragraph-visualization-source-region.is-source-preview,
.pdf-paragraph-visualization-source-region.is-focused {
  border-bottom: 1.5px solid color-mix(in srgb, #3279c9 76%, transparent);
  background: color-mix(in srgb, #b8dcfa 35%, transparent);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, #3279c9 42%, transparent);
}

.pdf-question-pin {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 154px;
  min-height: 19px;
  padding: 1px 6px;
  border: 1px solid #242424;
  border-radius: 999px;
  background: #242424;
  color: #f5f5f5;
  font: inherit;
  font-size: 10px;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: auto;
  cursor: grab;
  user-select: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(8px);
  opacity: var(--question-pin-flashlight-opacity, 1);
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease, opacity 90ms linear;
}

.pdf-question-pin::before {
  content: attr(data-mastery-label);
  flex: 0 0 auto;
  padding-right: 4px;
  border-right: 1px solid rgba(255, 255, 255, 0.36);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
}

.pdf-question-pin:active {
  cursor: grabbing;
}

.pdf-question-pin span,
.pdf-question-capsule span {
  display: grid;
  min-width: 25px;
  height: 13px;
  padding: 0 3px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--text-dim) 62%, transparent);
  border-radius: 999px;
  color: var(--text);
  font-size: 7px;
  line-height: 1;
}

.pdf-question-pin span {
  border-color: rgba(255, 255, 255, 0.46);
  color: #fff;
}

.pdf-question-pin small,
.pdf-question-capsule small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pdf-question-pin small {
  color: inherit;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.pdf-question-capsule {
  opacity: var(--question-pin-flashlight-opacity, 1);
  transition: opacity 90ms linear;
}

.pdf-question-pin:hover,
.pdf-question-pin:focus-visible {
  border-color: #000;
  color: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.22);
}

.pdf-question-pin.is-wrong {
  border-color: #762f2f;
  background: #762f2f;
  color: #fff;
}

.pdf-question-pin.is-learning {
  border-color: #315c78;
  background: #315c78;
  color: #fff;
}

.pdf-question-pin.is-mastered {
  border-color: #356447;
  background: #356447;
  color: #fff;
}

.pdf-question-pin-card {
  position: absolute;
  right: 6px;
  z-index: 7;
  width: min(390px, calc(100% - 24px));
  max-height: min(620px, 78%);
  overflow: auto;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg) 97%, transparent);
  color: var(--text);
  font-size: 11px;
  line-height: 1.5;
  pointer-events: auto;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(18px);
}

.pdf-question-pin-card.is-floating-card,
.pdf-learning-anchor-note.is-floating-card {
  position: fixed;
  inset: auto;
  margin: 0;
  z-index: 2147483000;
}

.pdf-question-pin-card[popover]::backdrop,
.pdf-learning-anchor-note[popover]::backdrop {
  background: transparent;
  pointer-events: none;
}

.pdf-question-pin-card.is-floating-card {
  width: min(390px, calc(100vw - 16px));
  max-height: calc(100vh - 16px);
  background: var(--bg);
}

.pdf-question-pin-card > header {
  position: sticky;
  top: -9px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: -9px -9px 8px;
  padding: 8px 9px;
  border-bottom: 1px solid var(--border-dim);
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  cursor: grab;
  user-select: none;
}

.pdf-question-pin-card > header:active {
  cursor: grabbing;
}

.pdf-question-pin-card > header span {
  display: inline-flex;
  gap: 8px;
}

.pdf-question-pin-card > header button {
  min-height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
}

.pdf-question-pin-card > header [data-close-inline-question] {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid var(--border-dim);
  border-radius: 999px;
  color: var(--text);
  font-size: 16px;
  line-height: 1;
}

.inline-question-pin-status {
  margin: 0 0 7px;
  color: #c87575;
  font-size: 10px;
}

.pdf-question-pin-card .practice-card {
  padding: 0;
  border: 0;
  background: transparent;
}

.pdf-question-pin-card .practice-question-title,
.pdf-question-pin-card .practice-attempt-status,
.pdf-question-pin-card .relation-badges,
.pdf-question-pin-card .question-study-tools,
.pdf-question-pin-card .practice-question-nav {
  display: none;
}

.pdf-question-pin-card .practice-stem {
  margin-top: 0;
  font-size: 12px;
}

.pdf-question-pin-card .option {
  min-height: 32px;
  padding: 5px 7px;
}

.pdf-learning-anchor-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
  -webkit-user-select: none;
  user-select: none;
}

.pdf-page-shell:has(.pdf-learning-anchor.is-expanded),
.pdf-page-shell.has-open-question-pin {
  z-index: 60;
}

.is-direct-pin-dragging {
  position: fixed !important;
  z-index: 10000;
  pointer-events: none;
  transform: none !important;
  margin: 0;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.24));
  cursor: grabbing;
  transition: none !important;
  will-change: left, top;
}

.is-direct-pin-dragging,
.is-direct-pin-dragging .pdf-learning-anchor-capsule,
.is-direct-pin-dragging .pdf-question-capsule {
  --question-pin-flashlight-opacity: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.pdf-learning-anchor.is-drag-source {
  opacity: 0.18;
}

.learning-anchor-drag-ghost {
  display: inline-flex !important;
  background: var(--bg) !important;
}

.pdf-page-shell.has-open-question-pin .pdf-learning-anchor-layer {
  z-index: 2;
}

.pdf-page-shell.has-open-question-pin .pdf-annotation-layer {
  z-index: 6;
}

.pdf-page-shell.has-open-question-pin .pdf-question-pin-card {
  z-index: 20;
}

.pdf-page-shell.has-open-learning-anchor .pdf-annotation-layer {
  z-index: 1;
}

.pdf-page-shell.has-open-learning-anchor .pdf-learning-anchor-layer {
  z-index: 21;
}

.pdf-page-shell.has-open-learning-anchor .pdf-question-pin {
  pointer-events: none;
}

.pdf-learning-anchor-source {
  position: absolute;
  z-index: 3;
  box-sizing: border-box;
  width: 14px;
  min-width: 14px;
  min-height: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
  transition: filter 140ms ease, opacity 140ms ease;
}

.pdf-learning-anchor-source::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 6px;
  width: 1.5px;
  border-radius: 999px;
  background: var(--note-highlight-line, color-mix(in srgb, #3279c9 78%, transparent));
  opacity: 0.74;
}

.pdf-learning-anchor-source:hover::before,
.pdf-learning-anchor-source:focus-visible::before,
.pdf-learning-anchor-source.is-focused::before {
  width: 3px;
  background: var(--note-highlight-line, #3279c9);
  opacity: 1;
}

.pdf-learning-anchor-source:focus-visible {
  outline: none;
}

.pdf-learning-anchor-source-region {
  position: absolute;
  z-index: 1;
  display: block;
  box-sizing: border-box;
  border: 0;
  border-radius: 2px;
  background: transparent;
  pointer-events: none;
  transition: background 140ms ease, box-shadow 140ms ease;
}

.pdf-learning-anchor-source-region.is-focused {
  border-bottom: 2px solid var(--note-highlight-line, color-mix(in srgb, #3279c9 82%, transparent));
  background: var(--note-highlight, rgba(91, 174, 255, 0.28));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--note-highlight-line, #3279c9) 18%, transparent);
  animation: source-focus-pulse 900ms ease-out 1;
}

.pdf-learning-anchor-source-region.is-compact-highlight {
  appearance: none;
  padding: 0;
  background: var(--note-highlight, rgba(255, 220, 84, 0.28));
  box-shadow: inset 0 -1px 0 var(--note-highlight-line, rgba(158, 111, 18, 0.62));
  pointer-events: auto;
  cursor: pointer;
}

.pdf-learning-anchor-source-region.is-compact-highlight:hover,
.pdf-learning-anchor-source-region.is-compact-highlight:focus-visible {
  background: color-mix(in srgb, var(--note-highlight, rgba(255, 220, 84, 0.28)) 84%, white);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--note-highlight-line, #9e6f12) 45%, transparent);
  outline: none;
}

.pdf-learning-anchor-source-region.is-image.is-focused {
  border: 1px solid var(--note-highlight-line, color-mix(in srgb, #3279c9 76%, transparent));
  background: color-mix(in srgb, var(--note-highlight, rgba(91, 174, 255, 0.2)) 72%, transparent);
}

.pdf-learning-anchor-source.is-range-editing,
.pdf-hit-band.is-range-editing {
  outline: 1px solid color-mix(in srgb, #3279c9 74%, transparent);
  outline-offset: 1px;
  opacity: 1;
}

.highlight-range-editor {
  position: absolute;
  inset: 0;
  z-index: 32;
  overflow: visible;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.highlight-range-edit-band {
  position: absolute;
  box-sizing: border-box;
  border-bottom: 1px solid color-mix(in srgb, #3279c9 78%, transparent);
  background: color-mix(in srgb, #75b7ff 23%, transparent);
  pointer-events: none;
}

.highlight-range-handle {
  position: absolute;
  width: 26px;
  min-width: 26px;
  height: 30px;
  min-height: 30px;
  margin: -4px 0 0 -13px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: ew-resize;
  pointer-events: auto;
  touch-action: none;
}

.highlight-range-handle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 11.5px;
  width: 3px;
  height: 9px;
  border-radius: 999px;
  background: #3279c9;
}

.highlight-range-handle::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 6px;
  width: 14px;
  height: 16px;
  border-radius: 7px 7px 8px 8px;
  background: #3279c9;
  box-shadow: 0 2px 6px rgba(18, 63, 112, 0.28);
}

.highlight-range-handle:focus-visible::after {
  outline: 2px solid color-mix(in srgb, #3279c9 70%, white);
  outline-offset: 2px;
}

.highlight-range-handle.is-start {
  transform: translateX(-1px);
}

.highlight-range-handle.is-end {
  transform: translateX(1px);
}

.pdf-question-pin.is-range-linked,
.pdf-learning-anchor-capsule.is-range-linked {
  z-index: 7;
  outline: 2px solid #3279c9;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, #75b7ff 20%, transparent), 0 3px 14px rgba(18, 63, 112, 0.3);
  opacity: 1 !important;
}

.pdf-learning-anchor {
  position: absolute;
  width: 0;
  height: 0;
  z-index: 2;
  pointer-events: none;
  transform: none;
}

.pdf-learning-anchor.is-expanded {
  z-index: 30;
}

.pdf-learning-anchor-capsule {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 142px;
  min-height: 19px;
  padding: 1px 6px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  color: var(--text-dim);
  cursor: grab;
  font: inherit;
  font-size: 10px;
  line-height: 1.2;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  user-select: none;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(8px);
  opacity: var(--question-pin-flashlight-opacity, 1);
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease, opacity 90ms linear;
}

.pdf-learning-anchor-capsule.is-ai {
  border-color: color-mix(in srgb, #4a78a8 72%, var(--border));
  background: color-mix(in srgb, #4a78a8 18%, var(--bg));
  color: color-mix(in srgb, #78a9dc 70%, var(--text));
}

.pdf-learning-anchor-capsule.is-user-note {
  border-color: color-mix(in srgb, #a66d2d 72%, var(--border));
  background: color-mix(in srgb, #a66d2d 18%, var(--bg));
  color: color-mix(in srgb, #d59a53 72%, var(--text));
}

.pdf-learning-anchor-capsule:active {
  cursor: grabbing;
}

.pdf-learning-anchor-capsule span {
  display: grid;
  width: 12px;
  height: 12px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--text-dim) 62%, transparent);
  border-radius: 999px;
  color: var(--text);
  font-size: 7px;
  line-height: 1;
}

.pdf-learning-anchor-capsule span svg {
  width: 9px;
  height: 9px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.35;
}

.pdf-learning-anchor-capsule span b {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.pdf-learning-anchor-capsule.pdf-question-capsule span {
  width: auto;
  min-width: 25px;
  padding: 0 3px;
}

.pdf-learning-anchor-capsule small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.pdf-learning-anchor-capsule:hover,
.pdf-learning-anchor-capsule:focus-visible {
  border-color: var(--border);
  color: var(--text);
}

.pdf-page.is-learning-anchor-drop-target::after,
.pdf-page.is-reference-drop-target::after {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: 4;
  border: 1px solid color-mix(in srgb, var(--accent) 46%, transparent);
  border-radius: 2px;
  pointer-events: none;
}

.pdf-learning-anchor-note {
  position: absolute;
  top: 23px;
  right: auto;
  left: 0;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 6px;
  width: min(360px, calc(100vw - 16px));
  max-height: 260px;
  padding: 8px;
  overflow: hidden;
  border: 1px solid var(--border-dim);
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  color: var(--text);
  font-size: 11px;
  line-height: 1.55;
  pointer-events: auto;
  /* A pin is a card carousel surface. Contain horizontal gesture ownership
     here so a two-finger card swipe cannot leak into the PDF or Safari
     history navigation; vertical reading/scrolling and pinch zoom stay on. */
  overscroll-behavior-x: none;
  touch-action: pan-y pinch-zoom;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(14px);
}

.pdf-learning-anchor-note.is-floating-card {
  background: var(--bg);
  max-width: calc(100vw - 16px);
  max-height: calc(100dvh - 16px);
}

.pdf-learning-anchor:is(.is-user-note, .is-ai) .pdf-learning-anchor-note {
  min-width: 220px;
  min-height: 180px;
  max-width: calc(100vw - 36px);
  max-height: calc(100dvh - 16px);
  resize: both;
}

.pdf-learning-anchor.is-user-note .pdf-learning-anchor-note {
  resize: both;
}

.pdf-learning-anchor.is-ai .pdf-learning-anchor-note {
  resize: both;
}

.pdf-learning-anchor.is-image-content .pdf-learning-anchor-note {
  --learning-anchor-image-visual-height: max(140px, calc(100dvh - 188px));
  width: min(680px, calc(100vw - 16px));
  height: min(760px, calc(100dvh - 16px));
  max-height: calc(100dvh - 16px);
  /* Image cards share the same whole-card gesture contract as Markdown and
     text pins; only their content sizing differs. */
}

.pdf-learning-anchor:is(.is-user-note, .is-ai) .pdf-learning-anchor-note::after {
  content: "";
  position: sticky;
  right: 0;
  bottom: 0;
  display: block;
  width: 12px;
  height: 12px;
  margin: -8px -4px -4px auto;
  border-right: 1px solid var(--text-dim);
  border-bottom: 1px solid var(--text-dim);
  opacity: 0.58;
  pointer-events: none;
}

.pdf-learning-anchor-note header {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: flex-start;
  gap: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-dim) 76%, transparent);
  cursor: grab;
  user-select: none;
}

.pdf-learning-anchor-note.is-card-dragging header {
  cursor: grabbing;
}

.pdf-learning-anchor-card-drag-handle {
  display: inline-grid;
  grid-row: 1 / span 2;
  flex: 0 0 20px;
  width: 20px;
  min-width: 20px;
  height: 24px;
  min-height: 24px !important;
  padding: 0 !important;
  place-items: center;
  border-color: transparent !important;
  color: var(--text-faint) !important;
  cursor: grab;
  touch-action: none;
}

.pdf-learning-anchor-card-drag-handle:hover,
.pdf-learning-anchor-card-drag-handle:focus-visible {
  border-color: var(--border-dim) !important;
  color: var(--text) !important;
}

.pdf-learning-anchor-note.is-card-dragging .pdf-learning-anchor-card-drag-handle {
  cursor: grabbing;
}

.pdf-learning-anchor-card-drag-handle svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
  pointer-events: none;
}

.pdf-learning-anchor-note header strong {
  min-width: 0;
  width: 100%;
  font-size: 11px;
  line-height: 1.45;
}

.pdf-learning-anchor-title-editor {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 24px;
  padding: 2px 5px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
  cursor: text;
  user-select: text;
}

.pdf-learning-anchor-title-editor:hover,
.pdf-learning-anchor-title-editor:focus-visible {
  border-color: var(--border-dim);
  outline: none;
  background: color-mix(in srgb, var(--surface) 56%, transparent);
}

.pdf-learning-anchor-note header span {
  display: flex;
  grid-column: 2;
  min-width: 0;
  max-width: 100%;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.learning-icon-button {
  display: inline-grid;
  width: 24px;
  min-width: 24px;
  min-height: 22px;
  padding: 0 !important;
  place-items: center;
  line-height: 1;
}

.learning-icon-button svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.learning-icon-button.is-danger.is-error {
  border-color: color-mix(in srgb, #d65d5d 72%, var(--border)) !important;
  background: color-mix(in srgb, #d65d5d 18%, transparent) !important;
  color: color-mix(in srgb, #ff8585 82%, var(--text)) !important;
}

.learning-icon-button.is-success {
  border-color: color-mix(in srgb, #4f9f71 62%, var(--border)) !important;
  color: color-mix(in srgb, #71c993 84%, var(--text)) !important;
}

.learning-icon-button.is-error {
  border-color: color-mix(in srgb, #d65d5d 62%, var(--border)) !important;
  color: color-mix(in srgb, #ff8585 82%, var(--text)) !important;
}

.pdf-learning-anchor-note header .learning-icon-button.is-close {
  margin-left: 2px;
}

.pdf-learning-anchor-note button {
  min-height: 20px;
  padding: 1px 5px;
  border: 1px solid var(--border-dim);
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 10px;
}

.pdf-learning-anchor-note button:hover,
.pdf-learning-anchor-note button:focus-visible {
  border-color: var(--border);
  color: var(--text);
}

.pdf-learning-anchor-note-body :is(p, ul, ol, blockquote, pre) {
  margin: 0;
}

.pdf-learning-anchor-note-body {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.pdf-learning-anchor-note-body:not(:has(.pdf-learning-anchor-editor-shell)) {
  display: block;
  overflow: auto;
}

.pdf-learning-anchor-note-body :is(ul, ol) {
  padding-left: 1.1em;
}

.pdf-learning-anchor-note-editor {
  display: block;
  width: 100%;
  min-height: 0;
  height: 100%;
  overflow: auto;
  padding: 5px 6px;
  resize: none;
  border: 1px solid var(--border-dim);
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 11px;
  line-height: 1.55;
}

.pdf-learning-anchor-editor-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border-dim) 72%, transparent);
  border-radius: 6px;
}

.pdf-learning-anchor-toolbar {
  min-height: 30px;
  padding: 1px 3px;
}

.pdf-learning-anchor-toolbar button {
  flex-basis: 25px;
  width: 25px;
  min-width: 25px;
  height: 25px;
  min-height: 25px;
}

.pdf-learning-anchor-editor-shell > [data-learning-anchor-note-visual] {
  width: 100%;
  min-height: 0;
  height: 100%;
  padding: 7px 8px 10px;
  overflow: auto;
  border: 0;
  font-family: inherit;
  font-size: 11px;
  line-height: 1.58;
}

.pdf-learning-anchor-editor-shell > [data-learning-anchor-note-visual].is-reference-drop-target {
  outline: 2px solid color-mix(in srgb, var(--accent) 58%, transparent);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.pdf-learning-anchor-editor-tabs {
  display: flex;
  gap: 4px;
}

.pdf-learning-anchor-editor-tabs button[aria-pressed="true"] {
  border-color: var(--border);
  color: var(--text);
}

.pdf-learning-anchor-editor-shell.is-preview .pdf-learning-anchor-note-editor,
.pdf-learning-anchor-editor-shell.is-edit .pdf-learning-anchor-note-preview {
  display: none;
}

.pdf-learning-anchor-note-preview {
  min-height: 0;
  height: 100%;
  overflow: auto;
  padding: 5px 6px;
  border: 1px solid color-mix(in srgb, var(--border-dim) 72%, transparent);
}

.pdf-learning-anchor.is-image-content :is(.pdf-learning-anchor-note-preview, [data-learning-anchor-note-visual]) {
  display: block;
  min-height: 0;
  max-height: var(--learning-anchor-image-visual-height);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

/* Keep the legacy preview hook explicit for old saved cards and UI guards. */
.pdf-learning-anchor.is-image-content .pdf-learning-anchor-note-preview {
  overflow: auto;
  overscroll-behavior: contain;
}

.pdf-learning-anchor.is-image-content :is(.pdf-learning-anchor-note-preview, [data-learning-anchor-note-visual]) > :is(p, figure):has(> img:only-child) {
  display: block;
  width: 100%;
  min-height: 0;
  height: auto;
  margin: 0;
  line-height: 0;
}

.pdf-learning-anchor.is-image-content :is(.pdf-learning-anchor-note-preview, [data-learning-anchor-note-visual]) > img,
.pdf-learning-anchor.is-image-content :is(.pdf-learning-anchor-note-preview, [data-learning-anchor-note-visual]) > :is(p, figure):has(> img:only-child) > img {
  display: block;
  width: var(--learning-image-display-width, 100%);
  max-width: 100%;
  height: auto;
  max-height: none;
  margin: 0 var(--learning-image-margin-right, 0) 0 var(--learning-image-margin-left, 0);
  object-fit: initial;
}

/* Image-only PDF pins use a tighter selector than ordinary Markdown cards.
   Keep that compact layout, but do not let it defeat the reversible display
   choices available from the shared image-layout menu. */
.pdf-learning-anchor.is-image-content :is(.pdf-learning-anchor-note-preview, [data-learning-anchor-note-visual]) img[data-learning-image-size="medium"] {
  --learning-image-display-width: min(72%, 880px);
}

.pdf-learning-anchor.is-image-content :is(.pdf-learning-anchor-note-preview, [data-learning-anchor-note-visual]) img[data-learning-image-size="original"] {
  --learning-image-display-width: auto;
}

.pdf-learning-anchor.is-image-content :is(.pdf-learning-anchor-note-preview, [data-learning-anchor-note-visual]) img:is([data-learning-image-size="medium"], [data-learning-image-size="original"]):not([data-learning-image-align]) {
  --learning-image-margin-left: auto;
  --learning-image-margin-right: auto;
}

.pdf-learning-anchor.is-image-content :is(.pdf-learning-anchor-note-preview, [data-learning-anchor-note-visual]) img[data-learning-image-align="left"] {
  --learning-image-margin-left: 0;
  --learning-image-margin-right: auto;
}

.pdf-learning-anchor.is-image-content :is(.pdf-learning-anchor-note-preview, [data-learning-anchor-note-visual]) img[data-learning-image-align="center"] {
  --learning-image-margin-left: auto;
  --learning-image-margin-right: auto;
}

.pdf-learning-anchor.is-image-content :is(.pdf-learning-anchor-note-preview, [data-learning-anchor-note-visual]) img[data-learning-image-align="right"] {
  --learning-image-margin-left: auto;
  --learning-image-margin-right: 0;
}

.pdf-learning-anchor-note-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  flex: none;
  margin-top: 6px;
}

.pdf-learning-anchor-note-actions > small {
  margin-right: auto;
  color: var(--text-faint);
  font-size: 9px;
  line-height: 1;
}

.pdf-learning-anchor-note-actions label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--text-dim);
  font-size: 10px;
}

.pdf-learning-anchor-note-actions input {
  width: 44px;
  min-height: 20px;
  padding: 1px 3px;
  border: 1px solid var(--border-dim);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 10px;
}

.pdf-learning-anchor-note-actions .learning-anchor-move-page {
  min-width: 34px;
  padding-inline: 7px;
  white-space: nowrap;
}

.pdf-text-layer :is(span, br) {
  position: absolute;
  color: transparent;
  white-space: pre;
  transform-origin: 0 0;
  -webkit-user-select: text;
  user-select: text;
}

.pdf-text-layer > :not(.markedContent),
.pdf-text-layer .markedContent span:not(.markedContent) {
  z-index: 1;
}

.pdf-text-layer span::selection {
  background: rgba(120, 160, 255, 0.24);
}

/*
 * The PDF canvas already contains the visible glyphs. Keep PDF.js' text layer
 * transparent for selection and fade the canvas underneath with a white veil;
 * painting the text-layer glyphs would create a second, slightly offset copy in
 * Safari.
 */
.pdf-text-layer span[data-read-text] {
  --read-progress: 0;
}

body.read-follow-enabled .pdf-text-layer span[data-read-text] {
  color: transparent;
  background-image: linear-gradient(
    90deg,
    transparent 0,
    transparent calc(var(--read-progress) * 100%),
    rgba(255, 255, 255, var(--read-unread-opacity, 0.68)) calc(var(--read-progress) * 100%),
    rgba(255, 255, 255, var(--read-unread-opacity, 0.68)) 100%
  );
  background-clip: border-box;
  -webkit-background-clip: border-box;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}

body.read-follow-enabled .pdf-text-layer span[data-read-text]::after {
  content: none;
}

body.read-follow-enabled .pdf-text-layer span[data-read-text]::selection {
  background: rgba(120, 160, 255, 0.3);
}

/*
 * Markdown pins and courseware use the CSS Custom Highlight API rather than
 * rewriting their editable DOM.  That keeps the caret, selection, image
 * layout and saved Markdown intact while giving them the exact same
 * read/remaining contrast control as the PDF text layer.
 */
::highlight(kaoyan-read-aloud-unread) {
  color: color-mix(
    in srgb,
    currentColor calc((1 - var(--read-unread-opacity, 0.68)) * 100%),
    transparent
  );
  background-color: transparent;
  text-decoration-color: transparent;
}

.pdf-page-shell::selection,
.pdf-page::selection,
.pdf-canvas::selection,
.pdf-text-layer::selection,
.pdf-annotation-layer::selection,
.pdf-learning-anchor-layer::selection {
  background: transparent;
}

.pdf-text-layer br::selection,
.pdf-text-layer .endOfContent::selection {
  background: transparent;
}

.pdf-text-layer .learning-text-anchor-focus {
  background: rgba(91, 174, 255, 0.22);
  box-shadow: inset 0 -2px rgba(36, 94, 151, 0.8);
}

.pdf-learning-anchor-layer .learning-text-anchor-focus-band {
  position: absolute;
  z-index: 1;
  display: block;
  box-sizing: border-box;
  border-radius: 2px;
  border-bottom: 2px solid rgba(36, 94, 151, 0.88);
  background: rgba(91, 174, 255, 0.28);
  box-shadow: 0 0 0 1px rgba(36, 94, 151, 0.16);
  pointer-events: none;
  animation: source-focus-pulse 900ms ease-out 1;
}

.pdf-learning-anchor-layer .selection-map-source-highlight {
  position: absolute;
  z-index: 3;
  display: block;
  box-sizing: border-box;
  width: 14px;
  min-width: 14px;
  min-height: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
  transition: filter 120ms ease, opacity 120ms ease;
}

.pdf-learning-anchor-layer .selection-map-source-highlight::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 6px;
  width: 1.5px;
  border-radius: 999px;
  background: var(--selection-map-highlight-line, rgba(32, 99, 159, 0.86));
  opacity: 0.76;
}

.pdf-learning-anchor-layer .selection-map-source-highlight.is-yellow,
.pdf-learning-anchor-layer .selection-map-source-focus-band.is-yellow { --selection-map-highlight-fill: rgba(246, 212, 91, 0.3); --selection-map-highlight-line: rgba(169, 126, 18, 0.72); }
.pdf-learning-anchor-layer .selection-map-source-highlight.is-green,
.pdf-learning-anchor-layer .selection-map-source-focus-band.is-green { --selection-map-highlight-fill: rgba(92, 190, 131, 0.26); --selection-map-highlight-line: rgba(42, 121, 72, 0.76); }
.pdf-learning-anchor-layer .selection-map-source-highlight.is-blue,
.pdf-learning-anchor-layer .selection-map-source-focus-band.is-blue { --selection-map-highlight-fill: rgba(75, 156, 235, 0.27); --selection-map-highlight-line: rgba(32, 99, 159, 0.8); }
.pdf-learning-anchor-layer .selection-map-source-highlight.is-pink,
.pdf-learning-anchor-layer .selection-map-source-focus-band.is-pink { --selection-map-highlight-fill: rgba(229, 108, 156, 0.24); --selection-map-highlight-line: rgba(157, 50, 95, 0.72); }

.pdf-learning-anchor-layer .selection-map-source-highlight:hover,
.pdf-learning-anchor-layer .selection-map-source-highlight:focus-visible {
  filter: saturate(1.12);
  outline: none;
}

.pdf-learning-anchor-layer .selection-map-source-highlight:hover::before,
.pdf-learning-anchor-layer .selection-map-source-highlight:focus-visible::before,
.pdf-learning-anchor-layer .selection-map-source-highlight.is-focused::before {
  width: 3px;
  opacity: 1;
}

.pdf-learning-anchor-layer .selection-map-source-focus-band {
  position: absolute;
  z-index: 1;
  display: block;
  box-sizing: border-box;
  border: 0;
  border-bottom: 2px solid var(--selection-map-highlight-line, rgba(32, 99, 159, 0.86));
  border-radius: 2px;
  background: var(--selection-map-highlight-fill, rgba(75, 156, 235, 0.27));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--selection-map-highlight-line, #3279c9) 16%, transparent);
  pointer-events: none;
  animation: source-focus-pulse 900ms ease-out 1;
}

.selection-map-source-menu {
  position: fixed;
  z-index: 220;
  inset: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 34px;
  box-sizing: border-box;
  margin: 0;
  padding: 4px 5px;
  border: 1px solid var(--reader-panel-border);
  border-radius: 8px;
  background: var(--reader-panel-bg);
  color: var(--text);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
}

.selection-map-source-menu-colors {
  display: inline-flex;
  gap: 3px;
  padding-right: 4px;
  border-right: 1px solid var(--reader-panel-border);
}

.selection-map-source-menu > button {
  min-height: 26px;
  padding: 2px 7px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.67rem;
}

.selection-map-source-menu > button:hover,
.selection-map-source-menu > button:focus-visible {
  background: var(--surface);
  color: var(--text);
}

.selection-map-source-menu > button.is-danger {
  color: var(--danger, #b84b4b);
}

.selection-map-source-menu > button.is-danger[data-confirming="true"] {
  background: color-mix(in srgb, var(--danger, #b84b4b) 14%, transparent);
}

@keyframes source-focus-pulse {
  from { background: rgba(91, 174, 255, 0.58); }
  to { background: rgba(91, 174, 255, 0.28); }
}

.learning-manager-panel {
  position: fixed;
  z-index: 180;
  inset: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  width: min(760px, calc(100vw - 40px));
  height: min(74dvh, 680px);
  max-width: none;
  max-height: none;
  box-sizing: border-box;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-dim);
  border-radius: 16px;
  background: var(--bg);
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.28);
  color: var(--text);
}

.learning-manager-panel::backdrop {
  background: rgba(0, 0, 0, 0.42);
}

.learning-manager-panel:not([open]) {
  display: none;
}

.learning-manager-panel > header,
.learning-manager-panel > nav,
.learning-manager-batch {
  display: flex;
  align-items: center;
}

.learning-manager-panel > header {
  justify-content: space-between;
  min-height: 52px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border-dim);
}

.learning-manager-panel > header > strong {
  font-size: 0.9rem;
  font-weight: 620;
  letter-spacing: 0.01em;
}

.learning-manager-panel > header > button {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  aspect-ratio: 1;
  box-sizing: border-box;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  line-height: 0;
  cursor: pointer;
}

.learning-manager-panel > header > button svg {
  display: block;
  width: 16px;
  height: 16px;
}

.learning-manager-panel > header > button:hover,
.learning-manager-panel > header > button:focus-visible {
  background: var(--surface);
  border-color: var(--border-dim);
  color: var(--text);
}

.learning-manager-panel > nav {
  gap: 4px;
  min-height: 44px;
  padding: 8px 14px 4px;
}

.learning-manager-panel > nav button,
.learning-manager-batch button,
.learning-manager-list article > button,
.learning-manager-load-more {
  min-height: 28px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease;
}

.learning-manager-panel > nav button {
  padding: 2px 11px;
  font: inherit;
  font-size: 0.76rem;
}

.learning-manager-panel > nav button:hover,
.learning-manager-panel > nav button:focus-visible,
.learning-manager-panel > nav button.is-active {
  background: var(--surface);
  color: var(--text);
}

.learning-manager-content {
  min-height: 160px;
  padding: 14px 16px 16px;
  overflow: auto;
  overscroll-behavior: contain;
}

.learning-manager-panel .learning-ai-settings-form {
  position: static;
  inset: auto;
  width: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.learning-manager-empty {
  margin: 20px 4px;
  color: var(--text-dim);
  font-size: 0.78rem;
  text-align: center;
}

.learning-manager-list {
  display: grid;
  gap: 6px;
}

.learning-manager-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--border-dim) 78%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface) 48%, transparent);
}

.learning-manager-list article :is(strong, small) {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learning-manager-list article strong {
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 550;
}

.learning-manager-list article small {
  margin-top: 2px;
  color: var(--text-dim);
  font-size: 0.66rem;
}

.learning-manager-list article > button:hover,
.learning-manager-list article > button:focus-visible,
.learning-manager-list article > button[data-confirming="true"] {
  background: color-mix(in srgb, #c53b3b 14%, transparent);
  color: light-dark(#9b2525, #f0a0a0);
}

.learning-manager-list article > button:disabled,
.learning-manager-batch button:disabled,
.learning-manager-load-more:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.learning-manager-batch {
  justify-content: flex-end;
  gap: 10px;
  min-height: 34px;
  color: var(--text-dim);
  font-size: 0.7rem;
}

.learning-manager-batch button {
  padding: 2px 7px;
}

.learning-manager-batch button:hover:not(:disabled),
.learning-manager-batch button:focus-visible:not(:disabled) {
  background: var(--surface);
  color: var(--text);
}

.learning-image-library article {
  grid-template-columns: auto minmax(104px, 132px) minmax(0, 1fr) auto auto;
  gap: 8px;
}

.learning-image-library .learning-image-select {
  display: grid;
  align-items: center;
  cursor: pointer;
}

.learning-image-library .learning-image-select > input {
  width: 15px;
  height: 15px;
  margin: 0;
}

.learning-image-preview {
  display: block;
  min-width: 0;
  height: 78px;
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border-dim) 72%, transparent);
  border-radius: 7px;
  background: var(--surface);
  cursor: zoom-in;
}

.learning-image-copy {
  min-width: 0;
}

.learning-map-library article {
  grid-template-columns: minmax(0, 1fr) repeat(4, auto);
  gap: 6px;
}

.learning-map-library article.is-archived {
  opacity: 0.68;
}

.learning-map-library article > label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.learning-map-library article > label > input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 0;
}

.learning-map-library article > label > span {
  min-width: 0;
}

.learning-map-library input[data-learning-map-title] {
  display: block;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 2px 3px;
  border: 1px solid transparent;
  border-radius: 5px;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 550;
}

.learning-map-library input[data-learning-map-title]:hover,
.learning-map-library input[data-learning-map-title]:focus {
  border-color: var(--border-dim);
  background: color-mix(in srgb, var(--bg) 64%, transparent);
}

.learning-map-library article > button {
  padding-inline: 7px;
  white-space: nowrap;
}

.learning-note-library article {
  grid-template-columns: auto minmax(0, 1fr) 30px 30px;
  gap: 7px;
  align-items: start;
}

.learning-note-select {
  display: grid;
  place-items: center;
  gap: 5px;
  padding-top: 4px;
  color: var(--text-dim);
}

.learning-note-select input {
  width: 15px;
  height: 15px;
  margin: 0;
}

.learning-note-select svg,
.learning-note-library .learning-icon-button svg {
  display: block;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.learning-note-fields {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.learning-note-fields > :is(input, textarea) {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 3px 4px;
  border: 1px solid transparent;
  border-radius: 5px;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.76rem;
  line-height: 1.45;
}

.learning-note-fields > input {
  font-weight: 550;
}

.learning-note-fields > textarea {
  min-height: 34px;
  max-height: 180px;
  resize: vertical;
  color: var(--text-dim);
}

.learning-note-fields > :is(input, textarea):hover,
.learning-note-fields > :is(input, textarea):focus {
  border-color: var(--border-dim);
  background: color-mix(in srgb, var(--bg) 64%, transparent);
}

.learning-note-library article > .learning-icon-button {
  display: grid;
  place-items: center;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
}

.learning-note-library article > [data-learning-locate-note]:hover,
.learning-note-library article > [data-learning-locate-note]:focus-visible {
  background: var(--surface);
  color: var(--text);
}

.learning-image-library .learning-image-preview img,
.learning-image-placeholder {
  width: 100%;
  height: 78px;
  border-radius: 6px;
  background: var(--surface);
  object-fit: cover;
}

.learning-image-library .learning-image-preview img {
  display: block;
  transition: transform 160ms ease;
}

.learning-image-library .learning-image-preview:hover img,
.learning-image-library .learning-image-preview:focus-visible img {
  transform: scale(1.035);
}

.learning-manager-status {
  margin: 0 0 6px;
  color: var(--text-dim);
  font-size: 0.7rem;
  line-height: 1.35;
}

.learning-image-placeholder {
  display: grid;
  place-items: center;
  color: var(--text-muted);
}

.learning-image-placeholder svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.learning-manager-load-more {
  display: block;
  min-width: 92px;
  margin: 10px auto 0;
  padding: 3px 10px;
  border: 1px solid var(--border-dim);
}

.learning-manager-load-more:hover:not(:disabled),
.learning-manager-load-more:focus-visible:not(:disabled) {
  border-color: var(--border);
  color: var(--text);
}

@media (max-width: 700px) {
  .learning-manager-panel {
    inset: 0;
    width: calc(100vw - 24px);
    height: min(82dvh, 720px);
    margin: auto;
  }

  .learning-manager-panel .learning-ai-settings-form label {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .learning-ai-settings-form {
    width: calc(100vw - 24px);
    max-height: min(82dvh, 620px);
  }

  .learning-ai-settings-form label {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .learning-map-library article {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .learning-note-library article {
    grid-template-columns: auto minmax(0, 1fr) 30px 30px;
  }
}

/* A player should read as a transport control, not as an empty utility panel.
   These rules intentionally override the older resizable dock geometry. */
.read-aloud-dock {
  display: block;
  width: min(448px, calc(100vw - 24px));
  min-width: min(300px, calc(100vw - 24px));
  min-height: 0;
  height: 68px;
  padding: 6px;
  overflow: visible;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 98%, transparent);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.18);
}

.read-aloud-capsule {
  display: grid;
  grid-template-columns: 30px minmax(88px, 1fr) minmax(72px, 1.35fr) auto 28px 28px;
  gap: 7px;
  align-items: center;
  min-width: 0;
  height: 56px;
  padding: 0 5px;
  border-radius: 999px;
  cursor: grab;
  touch-action: none;
}

.read-aloud-capsule :is(button, summary, select, input) { cursor: pointer; }
.read-aloud-play,
.read-aloud-close,
.read-aloud-settings > summary {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--reader-panel-border);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.75rem;
  line-height: 1;
}

.read-aloud-play:hover,
.read-aloud-close:hover,
.read-aloud-settings[open] > summary,
.read-aloud-settings > summary:hover,
.read-aloud-play:focus-visible,
.read-aloud-close:focus-visible,
.read-aloud-settings > summary:focus-visible {
  outline: 0;
  background: var(--surface);
}

.read-aloud-source {
  min-width: 0;
  padding: 3px 4px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}
.read-aloud-source:hover,
.read-aloud-source:focus-visible {
  outline: 0;
  background: color-mix(in srgb, var(--text) 7%, transparent);
}
.read-aloud-source :is(strong, small) {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.read-aloud-source strong { font-size: 0.68rem; font-weight: 650; }
.read-aloud-source small { color: var(--text-dim); font-size: 0.58rem; }
.read-aloud-capsule [data-read-aloud-progress] {
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  height: 18px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: ew-resize;
}
.read-aloud-capsule [data-read-aloud-progress]::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--text) 0 var(--read-aloud-percent, 0%), var(--border-dim) var(--read-aloud-percent, 0%) 100%);
}
.read-aloud-capsule [data-read-aloud-progress]::-moz-range-track { height: 3px; border-radius: 999px; background: var(--border-dim); }
.read-aloud-capsule [data-read-aloud-progress]::-moz-range-progress { height: 3px; border-radius: 999px; background: var(--text); }
.read-aloud-capsule [data-read-aloud-progress]::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; margin-top: -3.5px; border: 1px solid var(--reader-panel-bg); border-radius: 50%; background: var(--text); }
.read-aloud-capsule [data-read-aloud-progress]::-moz-range-thumb { width: 10px; height: 10px; border: 1px solid var(--reader-panel-bg); border-radius: 50%; background: var(--text); }
.read-aloud-percent { color: var(--text-dim); font-size: 0.62rem; font-variant-numeric: tabular-nums; }
.read-aloud-settings { position: relative; }
.read-aloud-settings > summary { list-style: none; }
.read-aloud-settings > summary::-webkit-details-marker { display: none; }
.read-aloud-settings > summary svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.read-aloud-settings-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: 12;
  display: grid;
  gap: 7px;
  width: 244px;
  padding: 10px;
  border: 1px solid var(--reader-panel-border);
  border-radius: 12px;
  background: var(--reader-panel-bg);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.2);
  backdrop-filter: none;
}
.read-aloud-settings.is-open-below > .read-aloud-settings-menu {
  top: calc(100% + 10px);
  bottom: auto;
}
.read-aloud-settings-menu label { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 8px; align-items: center; color: var(--text-dim); font-size: 0.66rem; }
.read-aloud-settings-menu select,
.read-aloud-settings-menu input { min-width: 0; color: var(--text); }
.read-aloud-settings-menu label:has([data-read-aloud-inactive-opacity]),
.read-aloud-settings-menu label:has([data-read-aloud-volume]) { grid-template-columns: 80px minmax(0, 1fr) 34px; }
.read-aloud-settings-menu output { color: var(--text-dim); font-size: 0.58rem; text-align: right; }
.read-aloud-dock.is-dragging .read-aloud-capsule { cursor: grabbing; }

@media (max-width: 760px) {
  .read-aloud-dock {
    top: auto !important;
    right: 12px !important;
    bottom: 12px !important;
    left: 12px !important;
    width: auto !important;
    min-width: 0;
    height: 64px !important;
    max-height: none;
  }
  .read-aloud-capsule { grid-template-columns: 28px minmax(64px, 1fr) minmax(60px, 1.2fr) auto 26px 26px; gap: 5px; height: 52px; }
  .read-aloud-source strong { font-size: 0.62rem; }
  .read-aloud-settings-menu { right: -2px; width: min(244px, calc(100vw - 24px)); }
}

@media (prefers-reduced-motion: reduce) {
  .pdf-learning-anchor-layer .learning-text-anchor-focus-band { animation: none; }
  .reader-activity-bar button,
  .reader-activity-bar button::before { transition: none; }
}

/* Markdown notes share the same restrained floating-tool language as the map
   and library panels, while keeping the editor itself free of card chrome. */
.markdown-note-dock {
  --reader-panel-bg: var(--bg);
  --reader-panel-border: color-mix(in srgb, var(--border-dim) 88%, transparent);
  position: fixed;
  top: 96px;
  left: 58px;
  z-index: 43;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: min(720px, calc(100vw - 48px));
  height: min(70vh, 620px);
  min-width: min(420px, calc(100vw - 24px));
  min-height: min(320px, calc(100vh - 24px));
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--reader-panel-border);
  border-radius: 11px;
  background: var(--reader-panel-bg);
  color: var(--text);
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.18);
  backdrop-filter: none;
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}

.markdown-note-dock.is-hidden {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
}

.markdown-note-dock > header,
.markdown-note-dock > nav,
.markdown-note-dock > .markdown-note-workspace,
.markdown-note-dock > .markdown-note-statusbar {
  min-width: 0;
  box-sizing: border-box;
}

.markdown-note-dock > header {
  position: relative;
  display: flex;
  gap: 7px;
  align-items: center;
  min-height: 45px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--reader-panel-border);
  cursor: grab;
  touch-action: none;
}

.markdown-note-drag-handle {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 32px;
  border-radius: 6px;
  color: var(--text-dim);
  cursor: grab;
  touch-action: none;
}

.markdown-note-drag-handle:hover {
  background: var(--surface);
  color: var(--text);
}

.markdown-note-drag-handle svg {
  width: 15px;
  height: 15px;
}

.markdown-note-dock.is-dragging .markdown-note-drag-handle {
  cursor: grabbing;
}

.markdown-note-picker,
.markdown-note-picker-empty {
  position: relative;
  flex: 1 1 160px;
  min-width: 0;
}

.markdown-note-dock > header .markdown-note-picker-trigger {
  display: flex;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  justify-content: space-between;
  gap: 8px;
  padding: 0 6px;
  color: var(--text);
  font-size: 0.76rem;
  text-align: left;
}

.markdown-note-picker-trigger span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.markdown-note-picker-trigger svg {
  flex: 0 0 13px;
}

.markdown-note-picker-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 4;
  width: min(390px, calc(100vw - 64px));
  max-height: min(62vh, 480px);
  padding: 6px;
  overflow: auto;
  border: 1px solid var(--reader-panel-border);
  border-radius: 9px;
  background: var(--reader-panel-bg);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.28);
}

.markdown-note-picker-menu section + section,
.markdown-note-picker-menu details + section,
.markdown-note-picker-menu section + details {
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid var(--reader-panel-border);
}

.markdown-note-picker-menu section > strong,
.markdown-note-picker-menu summary {
  display: flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 7px;
  color: var(--text-dim);
  font-size: 0.61rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.markdown-note-picker-menu summary {
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
}

.markdown-note-picker-menu summary::-webkit-details-marker { display: none; }

.markdown-note-picker-menu summary small {
  color: var(--text-dim);
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.markdown-note-dock > header .markdown-note-picker-menu button {
  display: flex;
  width: 100%;
  min-width: 0;
  height: 30px;
  justify-content: space-between;
  gap: 8px;
  padding: 0 7px;
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 0.68rem;
  text-align: left;
}

.markdown-note-picker-menu button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.markdown-note-picker-menu button.is-active {
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--text);
}

.markdown-note-picker-menu button svg {
  flex: 0 0 13px;
}

.markdown-note-dock > header > span {
  color: var(--text-dim);
  font-size: 0.62rem;
  white-space: nowrap;
}

.markdown-note-dock > header button,
.markdown-note-toolbar button {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.7rem;
  cursor: pointer;
}

.markdown-note-dock > header button:hover,
.markdown-note-dock > header button:focus-visible,
.markdown-note-toolbar button:hover,
.markdown-note-toolbar button:focus-visible {
  background: var(--surface);
  color: var(--text);
}

.markdown-note-dock > header button.is-confirming {
  background: color-mix(in srgb, #d74b4b 20%, transparent);
  color: #ef7777;
}

.markdown-note-dock > header button:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.markdown-note-dock > header svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.markdown-note-toolbar {
  display: flex;
  flex-wrap: nowrap;
  gap: 2px;
  align-items: center;
  height: 41px;
  min-height: 40px;
  padding: 4px 10px;
  overflow: visible;
  border-bottom: 1px solid color-mix(in srgb, var(--reader-panel-border) 70%, transparent);
}

.markdown-note-view-actions,
.markdown-note-format-actions,
.markdown-note-document-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.markdown-note-format-actions {
  flex-wrap: nowrap;
  padding-left: 4px;
  border-left: 1px solid var(--reader-panel-border);
}

.markdown-note-document-actions {
  flex: 0 0 auto;
  justify-content: flex-end;
  margin-left: auto;
}

.markdown-note-format-actions[aria-disabled="true"],
.markdown-note-more-format-actions[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.46;
}

.markdown-note-view-actions button {
  flex-basis: auto !important;
  width: auto !important;
  min-width: 42px !important;
  padding: 0 8px !important;
  color: var(--text-dim);
  font-size: 0.7rem;
  white-space: nowrap;
}

.markdown-note-view-actions button[aria-selected="true"] {
  background: var(--surface);
  color: var(--text);
}

.markdown-note-more-actions {
  position: relative;
  align-self: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
}

.markdown-note-more-actions > summary {
  position: absolute;
  inset: 0;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  box-sizing: border-box;
  border-radius: 6px;
  color: var(--text-dim);
  cursor: pointer;
  list-style: none;
}

.markdown-note-more-actions > summary::-webkit-details-marker {
  display: none;
}

.markdown-note-more-actions > summary:hover,
.markdown-note-more-actions > summary:focus-visible,
.markdown-note-more-actions[open] > summary {
  outline: 0;
  background: var(--surface);
  color: var(--text);
}

.markdown-note-more-actions > summary:focus-visible {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--link-blue) 72%, transparent);
}

.markdown-note-more-actions > summary svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}

.markdown-note-more-menu {
  position: absolute;
  top: calc(100% + 7px);
  right: -58px;
  z-index: 18;
  display: grid;
  gap: 6px;
  width: 244px;
  padding: 7px;
  border: 1px solid var(--reader-panel-border);
  border-radius: 9px;
  background: var(--reader-panel-bg);
  box-shadow: 0 15px 38px rgba(0, 0, 0, 0.3);
}

.markdown-note-more-menu section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
}

.markdown-note-more-menu section + section {
  padding-top: 6px;
  border-top: 1px solid var(--reader-panel-border);
}

.markdown-note-more-menu strong {
  grid-column: 1 / -1;
  min-height: 22px;
  padding: 3px 6px;
  color: var(--text-faint);
  font-size: 0.6rem;
  font-weight: 600;
}

.markdown-note-more-format-actions {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
}

.markdown-rich-toolbar.markdown-note-toolbar .markdown-note-more-menu button {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  justify-items: start;
  flex-basis: auto;
  width: 100% !important;
  min-width: 0 !important;
  height: 29px !important;
  min-height: 29px !important;
  column-gap: 7px;
  padding: 0 7px !important;
  color: var(--text-dim);
  font-size: 0.66rem;
  line-height: 1;
  white-space: nowrap;
}

.markdown-note-more-menu .markdown-toolbar-icon {
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  overflow: visible;
}

.markdown-note-more-menu .markdown-toolbar-icon svg {
  display: block;
  width: 14px;
  height: 14px;
  margin: 0;
}

.markdown-note-more-menu .markdown-toolbar-label {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  line-height: 1.2;
  text-overflow: ellipsis;
}

.markdown-note-dock .markdown-note-text-toggle {
  flex: 0 0 auto;
  width: auto;
  min-width: 44px;
  padding: 0 9px;
  white-space: nowrap;
}

.markdown-three-document-switch[aria-busy="true"] {
  cursor: progress;
  opacity: 0.58;
}

.markdown-note-statusbar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 28px;
  padding: 4px 10px;
  overflow: hidden;
  border-top: 1px solid var(--reader-panel-border);
  background: var(--reader-panel-bg);
  color: var(--text-dim);
  font-size: 0.58rem;
}

.markdown-note-statusbar .markdown-note-highlight-colors {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.markdown-note-statusbar .markdown-note-highlight-colors .highlight-color-swatch {
  width: 16px;
  height: 16px;
  min-width: 16px;
}

.markdown-note-statusbar > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.markdown-note-statusbar [data-markdown-note-save-status] {
  flex: 0 0 auto;
}

.markdown-note-statusbar .markdown-note-source-locate-status,
.markdown-note-statusbar .markdown-note-ai-status,
.markdown-note-statusbar .markdown-note-playback-status {
  flex: 1 1 auto;
}

.markdown-note-playback-status {
  text-align: right;
}

.markdown-rich-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  min-height: 36px;
  box-sizing: border-box;
  padding: 4px 9px;
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 1px solid color-mix(in srgb, var(--reader-panel-border) 70%, transparent);
  scrollbar-width: none;
}

.markdown-rich-toolbar::-webkit-scrollbar { display: none; }

.markdown-rich-toolbar button {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}

.markdown-rich-toolbar button:hover,
.markdown-rich-toolbar button:focus-visible {
  outline: 0;
  background: var(--surface);
  color: var(--text);
}

.markdown-rich-toolbar button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
  pointer-events: none;
}

.markdown-rich-toolbar.markdown-note-toolbar button {
  flex-basis: 32px;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
}

.markdown-rich-toolbar.markdown-note-toolbar {
  flex-wrap: nowrap;
  min-height: 40px;
  max-width: 100%;
  overflow: visible;
}

.markdown-rich-toolbar.markdown-note-toolbar .markdown-note-text-toggle {
  flex-basis: auto;
  width: auto;
  min-width: 44px;
}

.markdown-note-format-actions > button svg,
.markdown-note-document-actions > button svg,
.markdown-note-more-actions > summary svg {
  display: block;
  margin: 0;
}

.markdown-context-toolbar {
  position: fixed;
  z-index: 2147483100;
  inset: auto;
  display: flex;
  align-items: center;
  gap: 3px;
  width: max-content;
  max-width: calc(100vw - 16px);
  min-height: 36px;
  box-sizing: border-box;
  margin: 0;
  padding: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--bg) 96%, #111);
  color: var(--text);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(16px);
  scrollbar-width: none;
}

.markdown-context-toolbar[hidden] { display: none; }
.markdown-context-toolbar::-webkit-scrollbar { display: none; }

.markdown-context-toolbar button {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 28px;
  height: 28px;
  padding: 0 7px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease;
}

.markdown-context-toolbar button:hover,
.markdown-context-toolbar button:focus-visible {
  outline: 0;
  background: var(--surface);
  color: var(--text);
}

.markdown-context-toolbar button:focus-visible {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--link-blue) 72%, transparent);
}

.markdown-context-toolbar button.is-danger:hover,
.markdown-context-toolbar button.is-danger:focus-visible {
  background: color-mix(in srgb, #d74b4b 20%, transparent);
  color: #ef7777;
}

.markdown-context-toolbar button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
  pointer-events: none;
}

.markdown-context-label {
  padding: 0 5px;
  color: var(--text-faint);
  font-size: 9px;
  font-weight: 650;
  white-space: nowrap;
}

.markdown-context-group {
  display: flex;
  gap: 1px;
  align-items: center;
}

.markdown-context-separator {
  flex: 0 0 1px;
  width: 1px;
  height: 18px;
  margin: 0 2px;
  background: var(--border-dim);
}

.markdown-context-image-input {
  display: grid;
  grid-template-columns: auto minmax(150px, 240px);
  align-items: center;
  gap: 6px;
  padding-left: 5px;
  color: var(--text-faint);
  font-size: 9px;
}

.markdown-context-image-input input {
  width: min(240px, 48vw);
  min-height: 27px;
  box-sizing: border-box;
  border: 1px solid var(--border-dim);
  border-radius: 6px;
  outline: 0;
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 11px;
}

.markdown-context-image-input input:focus {
  border-color: color-mix(in srgb, var(--link-blue) 68%, var(--border));
}

.markdown-context-image-input input[aria-invalid="true"] {
  border-color: #d74b4b;
}

.markdown-context-toolbar [data-markdown-context-error] {
  color: #ef7777;
  font-size: 9px;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .markdown-context-toolbar button { transition: none; }
}

.markdown-visual-editor {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  outline: 0;
  color: var(--text);
  caret-color: var(--text);
  cursor: text;
  font-family: var(--sans-font, system-ui, sans-serif);
  line-height: 1.72;
  overflow-wrap: anywhere;
  user-select: text;
}

.markdown-visual-editor:focus {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 18%, transparent);
}

.markdown-visual-editor[contenteditable="false"],
.markdown-visual-editor[aria-disabled="true"] {
  cursor: progress;
  opacity: 0.58;
}

.markdown-visual-editor :is(h2, h3, h4, h5, h6) {
  margin: 0.8em 0 0.36em;
  color: var(--text);
  line-height: 1.35;
}

.markdown-visual-editor h2 { font-size: 1.15rem; }
.markdown-visual-editor h3 { font-size: 1rem; }
.markdown-visual-editor :is(h4, h5, h6) { font-size: 0.88rem; }
.markdown-visual-editor > :first-child { margin-top: 0; }
.markdown-visual-editor > :last-child { margin-bottom: 0; }

.markdown-visual-editor :is(ul, ol) {
  margin: 0.42em 0;
  padding-inline-start: 1.45em;
}

.markdown-visual-editor li {
  min-height: 1.72em;
  padding-inline-start: 0.12em;
}

.markdown-visual-editor li + li {
  margin-top: 0.08em;
}

.markdown-visual-editor :is(sub, sup) {
  position: relative;
  font-size: 0.72em;
  line-height: 0;
}

.markdown-visual-editor sub { vertical-align: -0.28em; }
.markdown-visual-editor sup { vertical-align: 0.5em; }

.markdown-visual-editor mark {
  padding: 0 0.08em;
  border-radius: 2px;
  background: color-mix(in srgb, #f6d75a 58%, transparent);
  color: inherit;
}

.markdown-visual-editor :is(img, svg, pre, table, .learning-mermaid, .learning-math.is-display) {
  cursor: default;
  user-select: none;
}

.markdown-visual-editor :is(img, svg, .learning-mermaid) {
  border-radius: 7px;
}

.markdown-visual-editor img[data-learning-image-selected="true"] {
  outline: 2px solid color-mix(in srgb, var(--link-blue) 72%, transparent);
  outline-offset: 3px;
}

.markdown-visual-editor .learning-image-load-failed {
  position: relative;
  display: grid;
  min-height: 112px;
  place-items: center;
  overflow: hidden;
  border: 1px dashed color-mix(in srgb, #b44 48%, var(--border-dim));
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
}

.markdown-visual-editor .learning-image-load-failed::after {
  content: "图片加载失败 · 点击重试";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  color: var(--text-dim);
  font-size: 0.75rem;
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
}

.markdown-visual-editor img.is-load-error {
  width: 1px !important;
  min-width: 1px;
  height: 1px !important;
  min-height: 1px;
  opacity: 0;
}

.markdown-visual-editor:empty::before {
  content: "开始写作…";
  color: var(--text-faint);
  pointer-events: none;
}

.markdown-note-workspace {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
}

.markdown-note-workspace > input {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  box-sizing: border-box;
  padding: 8px 14px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--reader-panel-border) 62%, transparent);
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
}

.markdown-note-workspace > textarea,
.markdown-note-workspace > .markdown-visual-editor {
  grid-area: 2 / 1;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 14px;
  overflow: auto;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: 0.8rem/1.75 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  resize: none;
  tab-size: 2;
}

.markdown-note-workspace > .markdown-visual-editor {
  font-family: inherit;
  font-size: 0.82rem;
  line-height: 1.72;
}

.markdown-note-workspace.is-reference-drop-target {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 48%, transparent);
}
.markdown-note-dock.is-dragging > header { cursor: grabbing; }
.markdown-note-dock.is-dragging,
.markdown-note-dock.is-resizing { user-select: none; transition: none; }

.learning-markdown-library article > label {
  display: flex;
  flex: 1 1 280px;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.learning-markdown-library article > label > span {
  display: grid;
  min-width: 0;
}

.learning-markdown-library article.is-archived { opacity: 0.62; }

@media (max-width: 760px) {
  .markdown-note-dock {
    top: 70px !important;
    right: 12px;
    bottom: 12px;
    left: 12px !important;
    width: calc(100vw - 24px) !important;
    min-width: 0;
    height: calc(100vh - 82px) !important;
    max-height: none;
    margin: 0 !important;
  }
}

/* v303: a compact transport bar has one geometry contract.  This late,
   scoped override wins over historical floating-window rules so Safari never
   stretches a glyph into an oval or leaves a spare grid column as a black dot. */
#read-aloud-dock.read-aloud-dock {
  display: block;
  box-sizing: border-box;
  height: 68px;
  min-height: 68px;
  max-height: 68px;
  padding: 6px;
  overflow: visible;
}

#read-aloud-dock .read-aloud-capsule {
  display: grid;
  grid-template-columns: 32px minmax(88px, 0.82fr) minmax(96px, 1.45fr) auto max-content;
  gap: 8px;
  align-items: center;
  height: 56px;
  min-height: 56px;
  padding: 0 6px;
  box-sizing: border-box;
}

#read-aloud-dock .read-aloud-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: max-content;
}

#read-aloud-dock .read-aloud-control-button,
#read-aloud-dock .read-aloud-settings > summary.read-aloud-control-button {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  inline-size: 32px !important;
  block-size: 32px !important;
  min-inline-size: 32px !important;
  min-block-size: 32px !important;
  max-inline-size: 32px !important;
  max-block-size: 32px !important;
  margin: 0;
  padding: 0;
  border: 1px solid var(--reader-panel-border);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  line-height: 1;
  list-style: none;
}

#read-aloud-dock .read-aloud-control-button::-webkit-details-marker { display: none; }
#read-aloud-dock .read-aloud-control-button svg {
  display: block;
  inline-size: 15px;
  block-size: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#read-aloud-dock .read-aloud-control-button:hover,
#read-aloud-dock .read-aloud-control-button:focus-visible,
#read-aloud-dock .read-aloud-settings[open] > .read-aloud-control-button {
  outline: 0;
  border-color: color-mix(in srgb, var(--text) 48%, var(--reader-panel-border));
  background: var(--surface);
}

#read-aloud-dock .read-aloud-capsule :is(button, summary, select, input) { touch-action: manipulation; }
#read-aloud-dock .read-aloud-capsule [data-read-aloud-progress] { min-width: 72px; }

.selection-map-chapter-overview {
  min-height: 25px;
  padding: 2px 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--reader-panel-border));
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 11%, transparent);
  color: var(--text);
  font: 0.61rem/1.2 inherit;
  white-space: nowrap;
}

.selection-map-chapter-overview:hover,
.selection-map-chapter-overview:focus-visible {
  outline: 0;
  border-color: color-mix(in srgb, var(--accent) 72%, var(--reader-panel-border));
  background: color-mix(in srgb, var(--accent) 19%, transparent);
}

.selection-map-chapter-overview.is-working,
.selection-map-chapter-overview:disabled { opacity: 0.68; cursor: progress; }

.selection-map-node.is-chapter-outline {
  border-color: color-mix(in srgb, var(--accent) 44%, var(--reader-panel-border));
  background: color-mix(in srgb, var(--surface) 72%, var(--bg));
}

.selection-map-node-outline-label {
  grid-column: 1 / -1;
  color: var(--text-faint);
  font-size: 0.57rem;
  line-height: 1.25;
}

.selection-map-node-question-summary {
  grid-column: 1 / -1;
  color: var(--text-dim);
  font-size: 0.59rem;
  font-variant-numeric: tabular-nums;
}

.selection-map-node-question-summary.has-wrong { color: light-dark(#9a5720, #e4b27a); }

.selection-map-node-learning-heading {
  grid-column: 1 / -1;
  margin-top: 2px;
  color: var(--text-faint);
  font-size: 0.57rem;
  line-height: 1.25;
}

.selection-map-node-learning-items {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.selection-map-node-learning-items button {
  display: grid;
  min-width: 0;
  min-height: 19px;
  padding: 3px 5px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--reader-panel-border));
  border-radius: 5px;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  color: var(--text-dim);
  cursor: pointer;
  font: inherit;
  line-height: 1.2;
  text-align: left;
}

.selection-map-node-learning-items button b,
.selection-map-node-learning-items button small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selection-map-node-learning-items button b {
  color: var(--text);
  font-size: 0.55rem;
  font-weight: 560;
}

.selection-map-node-learning-items button small {
  color: var(--text-faint);
  font-size: 0.52rem;
}

.selection-map-node-learning-items button:hover,
.selection-map-node-learning-items button:focus-visible {
  outline: 0;
  border-color: color-mix(in srgb, var(--accent) 58%, var(--reader-panel-border));
  background: color-mix(in srgb, var(--accent) 13%, transparent);
}

.selection-map-node-learning-more {
  grid-column: 1 / -1;
  color: var(--text-faint);
  font-size: 0.53rem;
  text-align: right;
}

.selection-map-node-questions {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  gap: 4px;
}

.selection-map-node-questions button {
  max-width: 100%;
  min-height: 18px;
  padding: 1px 5px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--reader-panel-border) 90%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font: 0.56rem/1.2 inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selection-map-node-questions button:hover,
.selection-map-node-questions button:focus-visible {
  outline: 0;
  border-color: color-mix(in srgb, var(--accent) 58%, var(--reader-panel-border));
  color: var(--text);
}

/* Keep the player compact even though older floating-dock rules above were
   designed for a large resizable utility panel. This intentionally lives at
   the end of the stylesheet so desktop and mobile both get the capsule. */
.read-aloud-dock {
  display: block;
  width: min(448px, calc(100vw - 24px));
  min-width: min(300px, calc(100vw - 24px));
  min-height: 0;
  height: 68px;
  max-height: 68px;
  padding: 6px;
  overflow: visible;
  resize: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 98%, transparent);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.18);
}

.read-aloud-capsule {
  display: grid;
  grid-template-columns: 30px minmax(88px, 1fr) minmax(72px, 1.35fr) auto 28px 28px;
  gap: 7px;
  align-items: center;
  min-width: 0;
  height: 56px;
  padding: 0 5px;
  border-radius: 999px;
  cursor: grab;
  touch-action: none;
}

.read-aloud-capsule :is(button, summary, select, input) { cursor: pointer; }
.read-aloud-play,
.read-aloud-close,
.read-aloud-settings > summary {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--reader-panel-border);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.75rem;
  line-height: 1;
}

.read-aloud-play:hover,
.read-aloud-close:hover,
.read-aloud-settings[open] > summary,
.read-aloud-settings > summary:hover,
.read-aloud-play:focus-visible,
.read-aloud-close:focus-visible,
.read-aloud-settings > summary:focus-visible {
  outline: 0;
  background: var(--surface);
}

.read-aloud-source { min-width: 0; }
.read-aloud-source :is(strong, small) {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.read-aloud-source strong { font-size: 0.68rem; font-weight: 650; }
.read-aloud-source small { color: var(--text-dim); font-size: 0.58rem; }
.read-aloud-capsule [data-read-aloud-progress] {
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  height: 18px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: ew-resize;
}
.read-aloud-capsule [data-read-aloud-progress]::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--text) 0 var(--read-aloud-percent, 0%), var(--border-dim) var(--read-aloud-percent, 0%) 100%);
}
.read-aloud-capsule [data-read-aloud-progress]::-moz-range-track { height: 3px; border-radius: 999px; background: var(--border-dim); }
.read-aloud-capsule [data-read-aloud-progress]::-moz-range-progress { height: 3px; border-radius: 999px; background: var(--text); }
.read-aloud-capsule [data-read-aloud-progress]::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; margin-top: -3.5px; border: 1px solid var(--reader-panel-bg); border-radius: 50%; background: var(--text); }
.read-aloud-capsule [data-read-aloud-progress]::-moz-range-thumb { width: 10px; height: 10px; border: 1px solid var(--reader-panel-bg); border-radius: 50%; background: var(--text); }
.read-aloud-percent { color: var(--text-dim); font-size: 0.62rem; font-variant-numeric: tabular-nums; }
.read-aloud-settings { position: relative; }
.read-aloud-settings > summary { list-style: none; }
.read-aloud-settings > summary::-webkit-details-marker { display: none; }
.read-aloud-settings > summary svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.read-aloud-settings-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: 12;
  display: grid;
  gap: 7px;
  width: 244px;
  padding: 10px;
  border: 1px solid var(--reader-panel-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 98%, transparent);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(18px);
}
.read-aloud-settings-menu label { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 8px; align-items: center; color: var(--text-dim); font-size: 0.66rem; }
.read-aloud-settings-menu select,
.read-aloud-settings-menu input { min-width: 0; color: var(--text); }
.read-aloud-settings-menu label:last-child { grid-template-columns: 80px minmax(0, 1fr) 34px; }

.read-aloud-raise-hand {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--reader-panel-border)) !important;
  color: var(--accent) !important;
}

.learning-selection-context.is-markdown-tutor > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.learning-selection-context.is-markdown-tutor svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.markdown-tutor-timeline {
  height: 100%;
  min-height: 0;
  overflow: auto;
  padding: 12px 14px 16px;
  background: var(--bg);
  font-size: 0.78rem;
}

.markdown-tutor-timeline > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 0 2px 10px;
}

.markdown-tutor-timeline > header div,
.markdown-tutor-timeline > header small {
  display: block;
  min-width: 0;
}

.markdown-tutor-timeline > header strong {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
}

.markdown-tutor-timeline > header small,
.markdown-tutor-timeline > header > span {
  color: var(--text-dim);
  font-size: 0.72rem;
  line-height: 1.45;
}

.markdown-tutor-turn-list {
  border-top: 1px solid var(--reader-panel-border, var(--border-dim));
}

.markdown-tutor-exchange {
  min-width: 0;
  padding: 7px 2px 8px;
  border-bottom: 1px solid var(--reader-panel-border, var(--border-dim));
}

.markdown-tutor-turn-list article {
  min-width: 0;
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.markdown-tutor-turn-list article.is-user {
  margin-bottom: 2px;
  padding-left: 11px;
  border-left: 1px solid var(--accent, #56b4f8);
}

.markdown-tutor-turn-list article > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.markdown-tutor-turn-list article > header > small {
  color: var(--text-dim);
  font-size: 0.69rem;
}

.markdown-tutor-turn-list article > header > span {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 2px;
  min-width: 0;
  max-width: 100%;
}

.markdown-tutor-turn-list article.is-assistant > header > span {
  display: none;
}

.markdown-tutor-turn-list article > header button {
  display: grid;
  min-width: 26px;
  height: 26px;
  min-height: 26px;
  place-items: center;
  padding: 0 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.7rem;
  cursor: pointer;
}

.markdown-tutor-turn-list article > header button:hover,
.markdown-tutor-turn-list article > header button:focus-visible {
  background: var(--surface);
  color: var(--text);
}

.markdown-tutor-turn-list article > header button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 68%, transparent);
  outline-offset: 1px;
}

.markdown-tutor-turn-list article > header svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
}

.markdown-tutor-turn-list .learning-message-markdown {
  font-size: 0.76rem;
  line-height: 1.65;
}

.markdown-tutor-turn-list .learning-message-markdown :is(h1, h2, h3, h4) {
  margin: 0.65em 0 0.3em;
  font-size: 0.78rem;
  line-height: 1.5;
}

@media (max-width: 480px) {
  .markdown-tutor-timeline {
    padding-inline: 10px;
  }

  .markdown-tutor-turn-list article.is-user > header {
    grid-template-columns: minmax(0, 1fr);
  }

  .markdown-tutor-turn-list article.is-user > header > span {
    justify-content: flex-start;
  }
}

.markdown-tutor-turn-list article > header button.is-danger,
.question-attempt-turns article > header button.is-danger {
  color: var(--danger, #b64b4b);
}

.markdown-tutor-marker {
  float: right;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 28px;
  min-height: 28px;
  margin: 0 0 4px 8px;
  padding: 3px 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 52%, var(--reader-panel-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, var(--reader-panel-bg));
  color: var(--accent);
  cursor: pointer;
}

.markdown-tutor-marker svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.markdown-tutor-marker:hover,
.markdown-tutor-marker:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 48%, transparent);
  outline-offset: 1px;
}
.read-aloud-settings-menu output { color: var(--text-dim); font-size: 0.58rem; text-align: right; }
.read-aloud-dock.is-dragging .read-aloud-capsule { cursor: grabbing; }

@media (max-width: 760px) {
  .read-aloud-dock {
    top: auto !important;
    right: 12px !important;
    bottom: 12px !important;
    left: 12px !important;
    width: auto !important;
    min-width: 0;
    height: 64px !important;
    max-height: 64px;
  }
  .read-aloud-capsule { grid-template-columns: 28px minmax(64px, 1fr) minmax(60px, 1.2fr) auto 26px 26px; gap: 5px; height: 52px; }
  .read-aloud-source strong { font-size: 0.62rem; }
  .read-aloud-settings-menu { right: -2px; width: min(244px, calc(100vw - 24px)); }
}

.pdf-hit {
  cursor: pointer;
}

.pdf-annotation-layer .pdf-hit {
  position: absolute;
  min-width: 0;
  min-height: 0;
  pointer-events: auto;
  appearance: none;
  border: 0;
  padding: 0;
  color: transparent;
  background: transparent;
}

.pdf-hit-marker {
  width: 5px;
  min-height: 16px;
  border-left: 1px solid rgba(150, 126, 44, 0.2);
  opacity: 0.1;
  transition: opacity 160ms ease, border-color 160ms ease, background 160ms ease;
}

.pdf-hit-marker:hover,
.pdf-hit-marker:focus-visible,
.pdf-hit-marker.is-focused {
  border-color: rgba(116, 90, 12, 0.68);
  background: rgba(255, 226, 94, 0.035);
  opacity: 0.82;
}

.pdf-hit-band {
  position: absolute;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  opacity: 0.72;
  transition: opacity 160ms ease, background 160ms ease;
}

.pdf-hit-band::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  height: 0.75px;
  border-radius: 999px;
  background: var(--pdf-evidence-highlight-line, rgba(116, 90, 12, 0.46));
  transform: scaleY(0.72);
  transform-origin: center bottom;
  transition: background 160ms ease, height 160ms ease;
}

.pdf-hit-band:hover,
.pdf-hit-band:focus-visible {
  background: var(--pdf-evidence-highlight, rgba(255, 226, 94, 0.16));
  box-shadow: none;
  opacity: 1;
}

.pdf-hit-band:hover::after,
.pdf-hit-band:focus-visible::after {
  height: 1px;
  background: rgba(116, 90, 12, 0.64);
}

.pdf-hit-band.is-focused {
  background: var(--pdf-evidence-highlight, rgba(255, 226, 94, 0.16));
  box-shadow: none;
  opacity: 1;
}

.pdf-hit-band.is-focused::after {
  height: 1px;
  background: rgba(106, 82, 12, 0.7);
}

.pdf-hit-band.is-source-focused {
  background: rgba(91, 174, 255, 0.3);
  outline: 2px solid rgba(36, 94, 151, 0.58);
  outline-offset: 1px;
  box-shadow: 0 0 0 3px rgba(91, 174, 255, 0.1);
  animation: source-focus-pulse 900ms ease-out 1;
}

.pdf-hit-band.is-source-focused::after {
  height: 2px;
  background: rgba(36, 94, 151, 0.82);
}

@media (prefers-reduced-motion: reduce) {
  .pdf-hit-band.is-source-focused { animation: none; }
}

.pdf-hit-band.is-partial-span.is-focused,
.pdf-hit-band.is-partial.is-focused {
  background: var(--pdf-evidence-highlight, rgba(255, 226, 94, 0.16));
  box-shadow: none;
}

::highlight(pdf-auto-evidence-unseen) {
  color: inherit;
  background: transparent;
  text-decoration: underline rgba(106, 82, 12, 0.68) 1px;
  text-underline-offset: 0.08em;
}

::highlight(pdf-auto-evidence-correct) {
  color: inherit;
  background: transparent;
  text-decoration: underline rgba(38, 120, 72, 0.76) 1px;
  text-underline-offset: 0.08em;
}

::highlight(pdf-auto-evidence-wrong) {
  color: inherit;
  background: transparent;
  text-decoration: underline rgba(151, 48, 48, 0.76) 1px;
  text-underline-offset: 0.08em;
}

::highlight(pdf-auto-evidence-mixed) {
  color: inherit;
  background: transparent;
  text-decoration: underline rgba(36, 94, 151, 0.76) 1px;
  text-underline-offset: 0.08em;
}

.has-native-pdf-evidence-highlights .pdf-hit-band::after {
  opacity: 0;
}

.has-native-pdf-evidence-highlights .pdf-hit-band {
  background: var(--pdf-evidence-highlight, rgba(255, 226, 94, 0.16));
}

.paragraph {
  margin: 1em 0;
}

.review-login,
.review-controls,
.review-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 14px 0;
}

.review-summary span {
  padding-right: 10px;
  color: var(--text-dim);
}

.review-band {
  font-variant-numeric: tabular-nums;
}

.review-band.high {
  color: #00843d;
}

.review-band.medium {
  color: #805c00;
}

.review-band.low {
  color: var(--text-dim);
}

.review-mapping-chip {
  color: var(--text-dim);
}

.review-mapping-chip.answer_conflict,
.review-mapping-chip.current_textbook_gap,
.review-mapping-chip.out_of_scope {
  color: #9b3a2f;
}

.review-mapping-chip.verified {
  color: #00843d;
}

.review-mapping-status {
  display: grid;
  gap: 5px;
  margin: 12px 0;
  padding: 10px 0;
  border-top: 1px solid var(--border-dim);
  border-bottom: 1px solid var(--border-dim);
}

.review-mapping-status strong {
  font-size: 0.88rem;
  font-weight: 600;
}

.review-mapping-status span,
.review-mapping-status small {
  color: var(--text-dim);
}

.review-mapping-status.answer_conflict strong,
.review-mapping-status.current_textbook_gap strong,
.review-mapping-status.out_of_scope strong {
  color: #9b3a2f;
}

.review-mapping-status.verified strong {
  color: #00843d;
}

.option-gap-review {
  display: grid;
  gap: 7px;
  margin: 12px 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-dim);
}

.option-gap-review strong {
  font-size: 0.88rem;
  font-weight: 600;
}

.option-gap-review > small,
.option-gap-review p {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.82rem;
  line-height: 1.65;
}

.option-gap-review div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.option-gap-review button {
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
  max-width: 100%;
  padding: 3px 7px;
  border: 1px dashed var(--border-dim);
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.82rem;
  text-align: left;
}

.option-gap-review button:hover,
.option-gap-review button:focus-visible {
  border-color: var(--border);
  color: var(--text);
}

.option-gap-review b {
  color: var(--text);
  font-weight: 600;
}

.coverage-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}

.coverage-pill {
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 8px;
  align-items: center;
  min-height: 30px;
  padding: 3px 8px;
  border: 1px solid var(--border-dim);
  background: transparent;
  text-align: left;
}

.coverage-pill:hover {
  border-color: var(--border);
}

.coverage-pill small {
  color: var(--text-dim);
}

.coverage-pill.verified {
  border-color: #00843d;
}

.coverage-pill.candidate {
  border-color: #805c00;
}

.coverage-pill.missing {
  border-style: dashed;
}

.review-login input,
.review-controls select {
  min-height: 36px;
  padding: 4px 8px;
  border: 1px solid var(--border-dim);
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

.question-row {
  display: grid;
  grid-template-columns: minmax(96px, 136px) 1fr;
  gap: 4px 12px;
  width: 100%;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--border-dim);
  background: transparent;
  text-align: left;
}

.question-row small {
  grid-column: 2;
  color: var(--text-dim);
}

.review-question,
.candidate,
.verified-list,
.manual-search,
.manual-result {
  margin-top: 22px;
}

.manual-search input,
.review-note {
  width: min(100%, 520px);
  min-height: 36px;
  padding: 4px 8px;
  border: 1px solid var(--border-dim);
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

.review-note {
  display: block;
  width: 100%;
  min-height: 68px;
  margin: 8px 0;
  resize: vertical;
}

.candidate-evidence-summary {
  display: grid;
  gap: 4px;
  margin: 8px 0;
  padding: 8px 10px;
  border-left: 2px solid var(--border-dim);
  background: color-mix(in srgb, var(--text) 3%, transparent);
}

.candidate-evidence-summary.is-option-gap {
  border-left-color: #805c00;
}

.candidate-evidence-summary strong {
  font-size: 0.9rem;
  font-weight: 600;
}

.candidate-evidence-summary small,
.candidate-evidence-summary p {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.78rem;
  line-height: 1.55;
}

.review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.review-options {
  padding-left: 1.5em;
}

blockquote {
  margin: 10px 0;
  padding: 0 0 0 12px;
  border-left: 2px solid var(--border-dim);
  color: var(--text);
}

.load-more {
  display: block;
  width: min(720px, calc(100% - 40px));
  margin: -48px auto 80px;
  padding: 8px 10px;
  border: 1px solid var(--border-dim);
  background: var(--bg);
}

.load-more:hover {
  border-color: var(--border);
}

.paragraph.has-questions {
  background: linear-gradient(transparent 62%, var(--mark-bg) 0);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  cursor: pointer;
}

.question-count {
  margin-left: 0.4em;
  font-size: 0.82em;
}

.practice-panel {
  position: fixed;
  top: 100px;
  right: var(--reader-layout-offset);
  bottom: 24px;
  width: calc(var(--reader-right-rail) - 10px);
  max-width: calc(100vw - 36px);
  overflow: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
  z-index: 32;
  scrollbar-width: thin;
}

.practice-panel.is-learning {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.practice-panel-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
  padding: 12px 14px 8px;
  border-bottom: 1px solid var(--border-dim);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(18px);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.practice-panel-head strong {
  font-size: 0.86rem;
  font-weight: 600;
}

.practice-panel-head small {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 400;
}

.practice-panel-head button {
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-dim);
}

.practice-panel-head span,
.question-rail-head span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.question-rail-head button {
  min-height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
}

.question-rail-head button:hover,
.practice-panel-head button:hover {
  color: var(--text);
}

.question-rail {
  display: grid;
  gap: 9px;
  padding: 0;
  border: 0;
  background: transparent;
}

.question-rail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px;
}

.question-rail-head strong {
  font-size: 0.84rem;
  font-weight: 600;
}

.question-rail-head small,
.question-rail-empty {
  color: var(--text-dim);
}

.question-rail-empty {
  margin: 2px 0;
  font-size: 0.82rem;
}

.learning-sidebar {
  display: grid;
  grid-template-rows: minmax(0, 72fr) minmax(0, 28fr);
  gap: 10px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 0 12px 12px;
}

.learning-conversation-bar {
  display: flex;
  align-items: center;
  gap: 2px;
}

.learning-header-actions svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.learning-header-actions {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
}

.learning-visualization-open {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  margin: 3px 0 5px;
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--border-dim));
  border-radius: 7px;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: var(--text-dim);
  font: inherit;
  font-size: 0.72rem;
  cursor: pointer;
}

.learning-visualization-open:hover,
.learning-visualization-open:focus-visible {
  border-color: var(--accent);
  color: var(--text);
}

.learning-visualization-open svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.learning-visualization-batch {
  display: grid;
  gap: 8px;
  max-height: min(52vh, 520px);
  margin: 0 0 7px;
  padding: 9px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border-dim));
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}

.learning-visualization-batch-head,
.learning-visualization-batch-tools,
.learning-visualization-batch-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.learning-visualization-batch-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.learning-visualization-batch-head strong {
  font-size: 0.78rem;
}

.learning-visualization-batch-head small,
.learning-visualization-batch-foot span,
.learning-visualization-batch-tools span,
.learning-visualization-unit-copy small {
  color: var(--text-muted);
  font-size: 0.66rem;
  line-height: 1.45;
}

.learning-visualization-prompt {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.68rem;
  line-height: 1.45;
}

.learning-visualization-batch-tools {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.learning-visualization-batch-tools button,
.learning-visualization-start {
  min-height: 25px;
  padding: 2px 7px;
  border: 1px solid var(--border-dim);
  border-radius: 5px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.68rem;
  cursor: pointer;
}

.learning-visualization-batch-tools button:hover:not(:disabled),
.learning-visualization-batch-tools button:focus-visible,
.learning-visualization-start:hover:not(:disabled),
.learning-visualization-start:focus-visible {
  border-color: var(--accent);
  color: var(--text);
}

.learning-visualization-batch-tools button:disabled,
.learning-visualization-start:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.learning-visualization-unit-list {
  display: grid;
  gap: 3px;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}

.learning-visualization-unit {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  min-height: 38px;
  padding: 5px 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-dim);
  cursor: pointer;
}

.learning-visualization-unit:hover,
.learning-visualization-unit.is-selected {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border-dim));
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.learning-visualization-unit.is-pinned {
  color: var(--text);
}

.learning-visualization-unit.is-failed {
  border-color: color-mix(in srgb, #b34b4b 34%, var(--border-dim));
}

.learning-visualization-unit input {
  accent-color: var(--accent);
}

.learning-visualization-unit-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.learning-visualization-unit-copy strong,
.learning-visualization-unit-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learning-visualization-unit-copy strong {
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 600;
}

.learning-visualization-unit > em {
  color: var(--text-muted);
  font-size: 0.63rem;
  font-style: normal;
  white-space: nowrap;
}

.learning-visualization-unit.is-running > em,
.learning-visualization-unit.is-queued > em {
  color: var(--accent);
}

.learning-visualization-unit.is-failed > em {
  color: light-dark(#8b1e1e, #e79a9a);
}

.learning-visualization-empty {
  margin: 8px 4px;
  color: var(--text-muted);
  font-size: 0.72rem;
}

.learning-visualization-batch-foot {
  align-items: flex-end;
}

.learning-visualization-batch-foot span {
  max-width: 66%;
}

.learning-visualization-start {
  flex: 0 0 auto;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border-dim));
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--text);
}

.learning-conversation-bar > button,
.learning-conversation-history > summary,
.learning-image-jobs > summary,
.learning-ai-settings-toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  list-style: none;
  transition: color 160ms ease, background 160ms ease;
}

.learning-conversation-bar > button:hover,
.learning-conversation-history > summary:hover,
.learning-image-jobs > summary:hover,
.learning-ai-settings-toggle:hover,
.learning-ai-settings-toggle:focus-visible {
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  color: var(--text);
}

.learning-conversation-history > summary::-webkit-details-marker,
.learning-image-jobs > summary::-webkit-details-marker {
  display: none;
}

.learning-conversation-history,
.learning-image-jobs,
.learning-ai-settings {
  margin: 0;
}

.learning-conversation-history > summary b,
.learning-image-jobs > summary b {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 13px;
  height: 13px;
  padding: 0 3px;
  border-radius: 7px;
  background: var(--text);
  color: var(--bg);
  font-size: 8px;
  font-weight: 600;
  line-height: 13px;
}

.learning-image-jobs-menu {
  position: absolute;
  z-index: 8;
  top: 36px;
  right: 62px;
  display: grid;
  gap: 2px;
  width: min(320px, calc(100vw - 64px));
  max-height: 260px;
  padding: 6px;
  overflow: auto;
  border: 1px solid var(--border-dim);
  border-radius: 8px;
  background: var(--bg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

.learning-image-jobs-menu > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 26px;
  padding: 0 5px 3px;
  color: var(--text-dim);
  font-size: 0.66rem;
}

.learning-image-jobs-menu > header button {
  min-height: 24px;
  padding: 1px 6px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}

.learning-image-jobs-menu > header button:hover,
.learning-image-jobs-menu > header button:focus-visible {
  background: var(--surface);
  color: var(--text);
}

.learning-image-jobs-menu > p {
  margin: 8px 5px;
  color: var(--text-muted);
  font-size: 0.68rem;
}

.learning-image-jobs-menu article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 7px;
  align-items: center;
  min-height: 34px;
  padding: 4px 7px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  color: var(--text-dim);
}

.learning-image-jobs-menu article:is(.is-queued, .is-running) {
  color: var(--text);
}

.learning-image-jobs-menu article.is-failed small {
  color: light-dark(#8b1e1e, #e79a9a);
}

.learning-image-jobs-menu :is(span, small) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learning-image-jobs-menu small {
  font-size: 0.66rem;
}

.learning-image-jobs-menu article > button,
.learning-selection-context button {
  min-height: 24px;
  padding: 1px 6px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.66rem;
  cursor: pointer;
}

.learning-image-jobs-menu article > button:hover,
.learning-image-jobs-menu article > button:focus-visible,
.learning-selection-context button:hover,
.learning-selection-context button:focus-visible {
  background: var(--surface);
  color: var(--text);
}

.learning-conversation-menu {
  position: absolute;
  z-index: 8;
  top: 36px;
  right: 32px;
  display: grid;
  width: min(250px, calc(100vw - 64px));
  max-height: 240px;
  padding: 6px;
  overflow: auto;
  border: 1px solid var(--border-dim);
  border-radius: 8px;
  background: var(--bg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

.learning-conversation-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  min-height: 36px;
  overflow: hidden;
  border-radius: 5px;
  color: var(--text-dim);
}

.learning-conversation-item:hover,
.learning-conversation-item.is-active {
  background: var(--surface);
  color: var(--text);
}

.learning-conversation-item > button {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.learning-conversation-item > [data-learning-conversation-id] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  min-height: 34px;
  padding: 5px 7px;
  overflow: hidden;
  text-align: left;
}

.learning-conversation-delete {
  min-width: 48px;
  padding: 0 8px;
  border-left: 1px solid var(--border-dim) !important;
  color: var(--text-dim) !important;
  font-size: 0.68rem;
}

.learning-conversation-delete:hover,
.learning-conversation-delete[data-confirming="true"] {
  background: color-mix(in srgb, #c53b3b 14%, transparent) !important;
  color: light-dark(#9b2525, #f0a0a0) !important;
}

.learning-conversation-delete:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.learning-conversation-item > [data-learning-conversation-id] span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learning-conversation-menu :is(small, p) {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.68rem;
}

.learning-teacher-box,
.learning-support-fold {
  display: grid;
  gap: 9px;
}

.learning-mainline-wrap {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 6px;
  min-height: 0;
  padding-top: 8px;
  border-top: 1px solid var(--border-dim);
}

.learning-mainline-head {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 8px;
  color: var(--text-dim);
}

.learning-mainline-head > span {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.learning-mainline-head strong {
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 600;
}

.learning-mainline-head small {
  overflow: hidden;
  font-size: 0.65rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learning-mainline-graph {
  display: grid;
  align-content: start;
  gap: 3px;
  min-height: 0;
  padding: 1px 4px 6px 1px;
  max-height: none;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.learning-graph-node {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 7px;
  width: 100%;
  min-height: 34px;
  padding: 3px 6px 3px 2px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.learning-graph-rail {
  position: relative;
  display: grid;
  justify-items: center;
  align-self: stretch;
}

.learning-graph-dot {
  width: 8px;
  height: 8px;
  margin-top: 8px;
  border: 1px solid color-mix(in srgb, var(--text-dim) 78%, transparent);
  border-radius: 999px;
  background: transparent;
}

.learning-graph-line {
  position: absolute;
  top: 16px;
  bottom: -10px;
  width: 1px;
  background: color-mix(in srgb, var(--border-dim) 84%, transparent);
}

.learning-graph-copy {
  position: relative;
  display: grid;
  gap: 1px;
  min-width: 0;
  padding-bottom: 0;
}

.learning-graph-copy strong {
  overflow: hidden;
  font-size: 0.76rem;
  font-weight: 560;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learning-graph-copy small {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 7px;
  color: var(--text-dim);
  font-size: 0.68rem;
  line-height: 1.3;
}

.learning-node-status {
  position: absolute;
  top: 5px;
  right: 0;
  width: 5px;
  height: 5px;
  border: 1px solid var(--text-dim);
  border-radius: 50%;
}

.learning-node-status:is(.is-learning, .is-reviewed, .is-done) {
  border-color: var(--text);
  background: var(--text);
}

.learning-graph-copy small span {
  white-space: nowrap;
}

.learning-graph-copy em {
  display: -webkit-box;
  margin-top: 2px;
  overflow: hidden;
  color: var(--text-dim);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.learning-branch-list {
  display: grid;
  gap: 3px;
  margin: 2px 4px 7px 27px;
  padding-left: 8px;
  border-left: 1px dashed color-mix(in srgb, var(--border-dim) 88%, transparent);
}

.learning-branch-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: start;
  gap: 4px;
  margin-left: 0;
  padding: 3px 4px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface) 18%, transparent);
}

.learning-branch-row button {
  border: 0;
  background: transparent;
  color: var(--text-dim);
  text-align: left;
}

.learning-branch-row > button:first-child {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 5px;
  min-width: 0;
  padding: 1px 0;
}

.learning-branch-mark {
  width: 6px;
  height: 6px;
  margin-top: 5px;
  border-left: 1px solid var(--border-dim);
  border-bottom: 1px solid var(--border-dim);
}

.learning-branch-row strong,
.learning-branch-row small {
  display: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learning-branch-row strong {
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 500;
}

.learning-branch-row small {
  display: block;
  color: var(--text-dim);
  font-size: 0.66rem;
}

.learning-branch-row.is-active .learning-branch-mark {
  border-color: var(--text);
}

.learning-branch-row.is-active {
  border-color: color-mix(in srgb, var(--border) 58%, transparent);
  background: color-mix(in srgb, var(--surface) 64%, transparent);
}

.learning-branch-row.is-done {
  opacity: 0.62;
}

.learning-branch-return {
  padding: 1px 2px;
  font-size: 0.76rem;
  white-space: nowrap;
}

.learning-branch-delete {
  display: grid;
  place-items: center;
  min-width: 24px;
  padding: 1px 2px;
  cursor: pointer;
}

.learning-branch-delete svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.learning-branch-delete[data-confirming="true"] {
  color: light-dark(#9b2525, #f0a0a0);
  font-size: 0.64rem;
}

.learning-graph-node.is-active .learning-graph-dot {
  border-color: var(--text);
  background: var(--text);
}

.learning-graph-node.is-active {
  border-color: transparent;
  background: color-mix(in srgb, var(--surface) 62%, transparent);
}

.learning-graph-node.is-active .learning-graph-copy strong {
  color: var(--text);
}

.learning-graph-node:hover,
.learning-branch-row:hover {
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}

.learning-sidebar-scope {
  display: grid;
  gap: 7px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-dim);
}

.learning-sidebar-scope--compact {
  padding-bottom: 0;
  border-bottom: 0;
}

.learning-sidebar-scope p {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.82rem;
  line-height: 1.55;
}

.learning-node-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.learning-node-actions button {
  min-height: 28px;
  padding: 1px 9px;
  border: 1px solid color-mix(in srgb, var(--border-dim) 78%, transparent);
  background: transparent;
  color: var(--text-dim);
  font-size: 0.78rem;
}

.learning-active-head small {
  color: var(--text-dim);
}

.learning-ai-status {
  position: relative;
  display: block;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.74rem;
  line-height: 1.55;
}

.learning-ai-feedback {
  position: absolute;
  z-index: 9;
  top: 36px;
  right: 0;
  width: 240px;
  padding: 7px 9px;
  border: 1px solid var(--border-dim);
  border-radius: 6px;
  background: var(--bg);
  margin: 0;
  color: var(--text-dim);
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.learning-ai-feedback > span {
  min-width: 0;
  flex: 1;
}

.learning-ai-feedback[hidden],
.learning-ai-error-dismiss[hidden] {
  display: none;
}

.learning-ai-error-dismiss {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1rem;
  line-height: 20px;
  cursor: pointer;
}

.learning-ai-feedback.is-error {
  color: light-dark(#8b1e1e, #e79a9a);
}

.learning-ai-settings {
  width: auto;
  min-width: 0;
}

.learning-ai-settings-portal {
  position: fixed;
  z-index: 220;
  inset: 0;
  pointer-events: none;
  isolation: isolate;
}

.learning-ai-settings-portal[hidden] {
  display: none;
}

.learning-ai-settings-backdrop {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100vw;
  height: 100vh;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.46);
  cursor: default;
  pointer-events: auto;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.learning-ai-settings-form {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: auto;
  left: 50%;
  display: grid;
  gap: 10px;
  width: min(520px, calc(100vw - 48px));
  max-width: none;
  max-height: min(78vh, 620px);
  box-sizing: border-box;
  margin: 0;
  padding: 0 18px 18px;
  overflow: auto;
  border: 1px solid var(--border-dim);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 97%, transparent);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.28);
  transform: translate(-50%, -50%);
  backdrop-filter: blur(22px);
  overscroll-behavior: contain;
  pointer-events: auto;
}

.learning-ai-settings-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
  margin: 0 -18px 2px;
  padding: 0 12px 0 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-dim) 76%, transparent);
  background: color-mix(in srgb, var(--bg) 97%, transparent);
}

.learning-ai-settings-head > span {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.learning-ai-settings-head :is(strong, small) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learning-ai-settings-head strong {
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 600;
}

.learning-ai-settings-head small {
  color: var(--text-dim);
  font-size: 0.65rem;
}

.learning-ai-settings-head > button {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
}

.learning-ai-settings-head > button:hover,
.learning-ai-settings-head > button:focus-visible {
  background: var(--surface);
  color: var(--text);
}

.learning-ai-settings-head svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.learning-ai-settings-form label {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.learning-ai-settings-form :is(input, select) {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  height: 30px;
  padding: 0 7px;
  border: 1px solid var(--border-dim);
  background: transparent;
  color: var(--text);
}

.learning-ai-settings-form p {
  margin: 0;
  color: var(--text-muted);
}

.learning-ai-settings-form p.is-error {
  color: light-dark(#8b1e1e, #e79a9a);
}

.learning-ai-settings-form > div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.learning-ai-settings-form button {
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: var(--text-dim);
}

.learning-ai-settings-version {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--border-dim) 62%, transparent);
  color: var(--text-muted);
  font-size: 0.68rem;
  line-height: 1.6;
  user-select: text;
}

.learning-ai-settings-version span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learning-message-box {
  position: relative;
  display: grid;
  gap: 0;
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--border-dim) 82%, transparent);
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  color: var(--text-dim);
  font-size: 0.78rem;
}

.learning-message-box.is-reference-drop-target {
  border-color: color-mix(in srgb, var(--accent) 72%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 16%, transparent);
}

.learning-selection-attachment {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 5px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--border-dim) 66%, transparent);
  color: var(--text-dim);
  font-size: 0.74rem;
}

.learning-selection-attachment span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learning-selection-attachment button {
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
}

.learning-selection-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding-top: 5px;
  border-top: 1px solid color-mix(in srgb, var(--border-dim) 66%, transparent);
  color: var(--text-dim);
  font-size: 0.72rem;
}

.learning-selection-context.is-cleared {
  color: var(--text);
}

.learning-selection-context span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learning-selection-context button {
  flex: 0 0 auto;
}

.learning-teacher-empty,
.learning-teacher-lead {
  margin: 0;
  color: var(--text);
  font-size: 0.83rem;
  line-height: 1.62;
}

.learning-message-box textarea {
  width: 100%;
  min-height: 36px;
  max-height: 140px;
  padding: 7px 70px 7px 10px;
  resize: none;
  overflow: auto;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  line-height: 1.5;
  field-sizing: fixed;
}

.learning-message-box textarea::placeholder {
  color: var(--text-muted);
}

.learning-message-box button {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--text);
  color: var(--bg);
  line-height: 1;
}

.learning-message-box .learning-compose-image {
  right: 38px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}

.learning-message-box .learning-compose-image:hover,
.learning-message-box .learning-compose-image:focus-visible {
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  color: var(--text);
}

.learning-message-box .learning-compose-image svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.learning-dialogue {
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 8px;
  min-height: 0;
  max-height: none;
  padding-right: 4px;
  overflow: auto;
  overflow-anchor: none;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.learning-transient-tools:empty {
  display: none;
}

.learning-transient-tools {
  display: grid;
  gap: 5px;
  min-width: 0;
  max-height: 104px;
  overflow: auto;
}

.learning-request-recovery {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 8px;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--border-dim) 82%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  font-size: 0.7rem;
}

.learning-request-recovery > span,
.learning-request-recovery > small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learning-request-recovery > small {
  grid-column: 1;
  color: var(--text-dim);
}

.learning-request-recovery > div {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  gap: 5px;
}

.learning-request-recovery button {
  min-height: 25px;
  padding: 2px 7px;
  border: 1px solid var(--border-dim);
  border-radius: 999px;
  background: transparent;
  font-size: 0.68rem;
}

.learning-dialogue-item {
  display: grid;
  align-self: start;
  gap: 4px;
  padding: 6px 8px;
  border-left: 1px solid color-mix(in srgb, var(--border-dim) 82%, transparent);
}

.learning-dialogue-item.is-returned {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.learning-dialogue-item strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-dim);
  font-size: 0.74rem;
  font-weight: 600;
}

.learning-dialogue-item > strong {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 2px 0;
  background: var(--surface);
}

.learning-message-pin {
  min-height: 18px;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-faint);
  font: inherit;
  font-size: 0.7rem;
  line-height: 1;
}

.learning-message-actions {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 6px;
  margin-left: auto;
}

.learning-message-actions button {
  min-height: 19px;
  padding: 0 5px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.7rem;
  line-height: 1;
}

.learning-message-actions .learning-icon-button {
  width: 21px;
  min-width: 21px;
  min-height: 20px;
  padding: 0;
}

.learning-message-actions .learning-icon-button svg {
  width: 13px;
  height: 13px;
}

.learning-message-actions .learning-message-action-label {
  width: auto;
  min-width: 0;
  padding-inline: 6px;
  white-space: nowrap;
}

.learning-message-actions button:hover,
.learning-message-actions button:focus-visible {
  border-color: var(--border-dim);
  color: var(--text);
}

.learning-streaming-placeholder {
  color: var(--text-dim) !important;
}

.learning-rich-stream-placeholder {
  box-sizing: border-box;
  display: grid;
  width: 100%;
  height: 132px;
  min-height: 132px;
  max-height: 132px;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border-dim) 76%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  color: var(--text-dim);
}

.learning-rich-stream-placeholder > span {
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--border-dim) 68%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  font-size: 0.74rem;
  line-height: 1.2;
}

.learning-rich-block {
  display: grid;
  min-width: 0;
  margin: 5px 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border-dim) 72%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 48%, transparent);
}

.learning-rich-block-toolbar {
  display: flex;
  min-width: 0;
  min-height: 30px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 7px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-dim) 62%, transparent);
  color: var(--text-faint);
  font-size: 0.7rem;
  line-height: 1.2;
}

.learning-rich-block-views {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.learning-rich-block-views button {
  width: auto;
  min-width: 0;
  min-height: 22px;
  padding: 2px 6px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-faint);
  font: inherit;
}

.learning-rich-block-views button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--surface-strong) 76%, transparent);
  color: var(--text);
}

.learning-rich-block-preview {
  min-width: 0;
  overflow: hidden;
}

.learning-rich-block-source {
  box-sizing: border-box;
  width: 100%;
  max-height: 240px;
  margin: 0 !important;
  overflow: auto;
  border: 0 !important;
  white-space: pre !important;
}

.learning-rich-fallback {
  display: grid;
  min-height: 54px;
  align-content: center;
  gap: 5px;
  padding: 8px;
  color: var(--text-dim);
  font-size: 0.74rem;
  line-height: 1.45;
}

.learning-rich-fallback details {
  min-width: 0;
}

.learning-rich-fallback summary {
  width: fit-content;
  cursor: pointer;
  color: var(--text-faint);
}

.learning-dialogue-item.is-assistant[data-learning-ai-message] {
  cursor: text;
  user-select: text;
}

.learning-message-pin:hover,
.learning-message-pin:focus-visible {
  border-color: var(--border-dim);
  color: var(--text);
}

.learning-provider-badge {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 400;
}

.learning-dialogue-item p,
.learning-message-markdown p {
  margin: 0;
  color: var(--text);
  font-size: 0.83rem;
  line-height: 1.62;
}

.learning-dialogue-item.is-user p {
  white-space: pre-line;
}

.learning-dialogue-item.is-user {
  justify-self: end;
  width: fit-content;
  max-width: 88%;
  padding: 7px 10px;
  border-left: 0;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.learning-dialogue-item.is-image-job:is(.is-image-job-queued, .is-image-job-running) {
  width: fit-content;
  max-width: 100%;
  padding-block: 5px;
}

.learning-image-job-message {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: var(--text-dim);
}

.learning-image-job-message > span:last-child {
  display: grid;
  gap: 1px;
}

.learning-image-job-message :is(b, small) {
  font-size: 0.72rem;
  line-height: 1.45;
}

.learning-image-job-message b {
  color: var(--text);
  font-weight: 600;
}

.learning-image-job-message small {
  color: var(--text-faint);
}

.learning-image-job-spinner {
  width: 14px;
  height: 14px;
  border: 1.5px solid color-mix(in srgb, var(--text-dim) 35%, transparent);
  border-top-color: var(--text);
  border-radius: 50%;
  animation: learning-image-job-spin 900ms linear infinite;
}

@keyframes learning-image-job-spin {
  to { transform: rotate(1turn); }
}

.learning-dialogue-item.is-user > strong {
  display: none;
}

.learning-dialogue-item.is-user .learning-message-markdown p {
  font-size: 0.81rem;
  line-height: 1.48;
}

.learning-message-markdown {
  min-width: 0;
  overflow-wrap: anywhere;
}

.learning-message-markdown :is(h3, h4, h5) {
  margin: 6px 0 3px;
  color: var(--text);
  font-size: 0.84rem;
  line-height: 1.5;
}

.learning-message-markdown hr {
  height: 1px;
  margin: 8px 0;
  border: 0;
  background: color-mix(in srgb, var(--border-dim) 72%, transparent);
}

.learning-message-markdown table {
  width: 100%;
  border-collapse: collapse;
  color: var(--text);
  font-size: 0.79rem;
  line-height: 1.5;
}

.learning-table-preview-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.learning-table-preview-scroll > table {
  width: max-content;
  min-width: 100%;
}

.learning-svg-preview-surface {
  display: grid;
  min-height: 96px;
  place-items: center;
  overflow: auto;
  padding: 8px;
  color: var(--text-dim);
  font-size: 0.74rem;
}

.learning-svg-preview-surface > svg {
  max-height: 420px;
  margin: 0;
}

.learning-html-preview-surface {
  width: 100%;
  min-height: 220px;
  overflow: hidden;
}

.learning-html-preview-frame {
  display: block;
  width: 100%;
  height: 280px;
  border: 0;
  background: #fff;
}

:root[data-theme="dark"] .learning-html-preview-frame {
  background: #121417;
}

.learning-message-markdown :is(th, td) {
  padding: 4px 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-dim) 70%, transparent);
  text-align: left;
  vertical-align: top;
}

.learning-message-markdown th {
  color: var(--text-dim);
  font-weight: 600;
}

.learning-message-markdown :is(ul, ol) {
  display: grid;
  gap: 2px;
  margin: 0;
  padding-left: 1.1rem;
  color: var(--text);
  font-size: 0.83rem;
  line-height: 1.6;
}

.learning-message-markdown blockquote {
  margin: 0;
  padding-left: 8px;
  border-left: 1px solid var(--border-dim);
  color: var(--text-dim);
  font-size: 0.82rem;
  line-height: 1.6;
}

.learning-message-markdown :is(code, pre) {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}

.learning-message-markdown code {
  padding: 0.08em 0.3em;
  border: 1px solid color-mix(in srgb, var(--border-dim) 72%, transparent);
  color: var(--text);
  font-size: 0.78em;
}

.learning-message-markdown pre {
  margin: 0;
  padding: 8px;
  overflow: auto;
  border-left: 1px solid var(--border-dim);
  color: var(--text);
  font-size: 0.76rem;
  line-height: 1.55;
  white-space: pre;
}

.learning-message-markdown a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 0.16em;
}

.learning-message-markdown :is(img, svg),
.pdf-learning-anchor-note-body :is(img, svg) {
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 8px 0;
}

:is(.learning-message-markdown, .pdf-learning-anchor-note-body) :is(p, figure):has(> img:only-child) {
  display: flow-root;
  margin: 0.7em 0;
  line-height: 0;
}

:is(.learning-message-markdown, .pdf-learning-anchor-note-body) img[data-learning-image-size="medium"] {
  width: min(72%, 880px);
}

:is(.learning-message-markdown, .pdf-learning-anchor-note-body) img[data-learning-image-size="original"] {
  width: auto;
  max-width: 100%;
}

:is(.learning-message-markdown, .pdf-learning-anchor-note-body) img:is([data-learning-image-size="medium"], [data-learning-image-size="original"]):not([data-learning-image-align]) {
  margin-left: auto;
  margin-right: auto;
}

:is(.learning-message-markdown, .pdf-learning-anchor-note-body) img[data-learning-image-align="left"] {
  margin-left: 0;
  margin-right: auto;
}

:is(.learning-message-markdown, .pdf-learning-anchor-note-body) img[data-learning-image-align="center"] {
  margin-left: auto;
  margin-right: auto;
}

:is(.learning-message-markdown, .pdf-learning-anchor-note-body) img[data-learning-image-align="right"] {
  margin-left: auto;
  margin-right: 0;
}

.learning-message-markdown .learning-mermaid,
.pdf-learning-anchor-note-body .learning-mermaid {
  --learning-mermaid-bg: #f7f9fb;
  --learning-mermaid-node: #edf3f8;
  --learning-mermaid-text: #17212b;
  --learning-mermaid-line: #52687a;
  --learning-mermaid-border: #587086;
  width: 100%;
  min-height: 42px;
  overflow: auto;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--border-dim) 72%, transparent);
  background: var(--learning-mermaid-bg);
  color: var(--learning-mermaid-text);
}

.learning-mermaid-placeholder {
  display: grid;
  min-height: 96px;
  place-items: center;
  color: color-mix(in srgb, var(--learning-mermaid-text) 58%, transparent);
  font-size: 0.72rem;
}

.learning-mermaid svg {
  display: block;
  min-width: min(420px, 100%);
  max-width: none;
  height: auto;
  margin: 0 auto;
  color: var(--learning-mermaid-text, #17212b);
  background: var(--learning-mermaid-bg, #f7f9fb) !important;
}

.learning-mermaid svg text,
.learning-mermaid svg tspan {
  fill: var(--learning-mermaid-text, #17212b) !important;
  color: var(--learning-mermaid-text, #17212b) !important;
  font-family: var(--sans-font) !important;
}

.learning-mermaid svg .node .label {
  text-align: center !important;
}

.learning-mermaid svg .node :is(.label text, .label tspan, text.nodeLabel, tspan.nodeLabel) {
  text-anchor: middle !important;
}

.learning-mermaid svg .node :is(.label text, text.nodeLabel) {
  dominant-baseline: middle;
}

.learning-mermaid svg .node :is(.label, .nodeLabel) {
  justify-content: center !important;
  text-align: center !important;
}

.learning-mermaid svg :is(.node rect, .node circle, .node ellipse, .node polygon, .node path) {
  fill: var(--learning-mermaid-node, #edf3f8) !important;
  stroke: var(--learning-mermaid-border, #587086) !important;
}

.learning-mermaid svg :is(.edgePath path, .edgePaths path, path.flowchart-link, .relationshipLine) {
  fill: none !important;
  stroke: var(--learning-mermaid-line, #52687a) !important;
  stroke-width: 1.4px !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.learning-mermaid svg marker :is(path, polygon) {
  fill: var(--learning-mermaid-line, #52687a) !important;
  stroke: var(--learning-mermaid-line, #52687a) !important;
  stroke-width: 1px !important;
  stroke-dasharray: none !important;
}

.learning-mermaid svg marker.cross path {
  fill: none !important;
}

.learning-mermaid svg .edgeLabel rect {
  fill: var(--learning-mermaid-bg, #f7f9fb) !important;
  opacity: 0.96 !important;
}

.learning-mermaid[data-rich-state="rendering"] {
  cursor: progress;
}

:root[data-theme="dark"] .learning-mermaid {
  --learning-mermaid-bg: #15191e;
  --learning-mermaid-node: #222b34;
  --learning-mermaid-text: #edf3f7;
  --learning-mermaid-line: #a9bdce;
  --learning-mermaid-border: #7891a6;
}

[data-learning-stream] .learning-mermaid:not([data-rich-state]) {
  position: relative;
  min-height: 132px;
  display: grid;
  place-items: center;
}

[data-learning-stream] .learning-mermaid:not([data-rich-state]) pre {
  width: min(100%, 560px);
  max-height: 90px;
  opacity: 0.38;
}

[data-learning-stream] .learning-mermaid:not([data-rich-state])::after {
  content: "图表生成中…";
  position: absolute;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--learning-mermaid-line) 42%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--learning-mermaid-bg) 90%, transparent);
  color: var(--learning-mermaid-text);
  font-size: 0.74rem;
}

.learning-mermaid.is-render-error {
  border-color: color-mix(in srgb, #b54d4d 52%, var(--border-dim));
}

.learning-math.is-display {
  display: block;
  max-width: 100%;
  margin: 5px 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.learning-math:not(.is-display) {
  display: inline-block;
  max-width: 100%;
  margin-inline: 0.06em;
  overflow-x: auto;
  overflow-y: hidden;
  vertical-align: -0.15em;
  white-space: nowrap;
}

.learning-math.is-render-error {
  color: color-mix(in srgb, #c75b5b 72%, var(--text));
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}

[data-learning-rich-preview="true"] {
  cursor: zoom-in;
  outline: 1px solid transparent;
  outline-offset: 3px;
  transition: outline-color 140ms ease, box-shadow 140ms ease;
}

[data-learning-rich-drag="true"] {
  cursor: grab;
  -webkit-user-drag: element;
}

[data-learning-rich-drag="true"]:active {
  cursor: grabbing;
}

[data-learning-rich-preview="true"]:hover,
[data-learning-rich-preview="true"]:focus-visible {
  outline-color: color-mix(in srgb, var(--link-blue) 58%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--link-blue) 10%, transparent);
}

.learning-rich-quicklook {
  width: min(1120px, calc(100vw - 32px));
  height: min(86vh, 900px);
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.42);
}

.learning-rich-quicklook[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.learning-rich-quicklook::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.learning-rich-quicklook > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-dim);
  background: color-mix(in srgb, var(--bg) 94%, var(--surface));
}

.learning-rich-quicklook > header strong {
  min-width: 0;
  overflow: hidden;
  font-size: 0.92rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learning-rich-quicklook > header span {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 5px;
}

.learning-rich-quicklook button {
  min-height: 30px;
  padding: 3px 9px;
  border: 1px solid var(--border-dim);
  border-radius: 6px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.76rem;
}

.learning-rich-quicklook button:hover,
.learning-rich-quicklook button:focus-visible {
  border-color: var(--border);
  color: var(--text);
  outline: none;
}

.learning-rich-quicklook output {
  min-width: 42px;
  color: var(--text-dim);
  font-size: 0.74rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.learning-rich-quicklook-stage {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 20px;
  background: color-mix(in srgb, var(--surface) 42%, var(--bg));
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  contain: layout paint style;
  touch-action: none;
}

.learning-rich-quicklook-surface {
  position: relative;
  min-width: 100%;
  min-height: 100%;
}

.learning-rich-quicklook-content {
  width: max-content;
  min-width: 1px;
  min-height: 1px;
  transform-origin: 0 0;
  backface-visibility: hidden;
  contain: layout style;
}

.learning-rich-quicklook-content.is-image-preview {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.learning-rich-quicklook.is-scaling .learning-rich-quicklook-content {
  will-change: transform;
}

.learning-rich-quicklook.is-scaling .learning-rich-quicklook-document.is-image-preview {
  will-change: transform;
}

.learning-rich-quicklook-loading,
.learning-rich-quicklook-error {
  display: grid;
  min-width: min(760px, calc(100vw - 96px));
  min-height: 100%;
  place-items: center;
  color: var(--text-dim);
  font-size: 0.86rem;
}

.learning-rich-quicklook-error {
  margin: 0;
}

.learning-rich-quicklook-document {
  box-sizing: border-box;
  min-width: min(760px, calc(100vw - 96px));
  max-width: 1500px;
  min-height: 100%;
  margin: 0 auto;
  padding: 22px;
  border: 1px solid color-mix(in srgb, var(--border-dim) 70%, transparent);
  background: var(--bg);
  color: var(--text);
  font-size: 0.98rem;
  line-height: 1.65;
  contain: layout style;
}

.learning-rich-quicklook-document.is-image-preview {
  position: absolute;
  inset: 0 auto auto 0;
  min-width: 0;
  min-height: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  line-height: 0;
  transform-origin: 0 0;
  backface-visibility: hidden;
}

.learning-rich-quicklook-document.is-image-preview :is(p, figure) {
  margin: 0;
  padding: 0;
  line-height: 0;
}

.learning-rich-quicklook-document.is-image-preview img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
}

.learning-rich-quicklook-document > :first-child {
  margin-top: 0;
}

.learning-rich-quicklook-document > :last-child {
  margin-bottom: 0;
}

.learning-rich-quicklook .learning-mermaid {
  min-width: min(900px, calc(100vw - 120px));
  overflow: visible;
}

.learning-rich-quicklook .learning-mermaid svg,
.learning-rich-quicklook-document > :is(svg, img),
.learning-rich-quicklook .learning-rich-preview-svg {
  min-width: min(900px, calc(100vw - 120px));
  max-width: none;
  height: auto;
  margin-inline: auto;
}

.learning-rich-quicklook > footer {
  padding: 7px 12px;
  border-top: 1px solid var(--border-dim);
  color: var(--text-faint);
  font-size: 0.72rem;
}

.learning-message-markdown :is(details, summary),
.pdf-learning-anchor-note-body :is(details, summary) {
  color: var(--text);
}

.learning-teacher-box {
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  min-height: 0;
  overflow: hidden;
}

.learning-visualization-batch-slot {
  display: grid;
  gap: 8px;
  min-height: 0;
}

.learning-dialogue-item.is-user {
  border-left-color: color-mix(in srgb, var(--border) 72%, transparent);
}

.learning-teacher-box {
  align-content: stretch;
  min-height: 0;
  overflow: hidden;
}

.learning-active-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.learning-teacher-box .learning-active-head {
  position: relative;
  z-index: 10;
  align-items: center;
  gap: 14px;
}

.learning-teacher-box .learning-active-head strong {
  font-size: 0.9rem;
  line-height: 1.55;
}

.learning-active-head > span:first-child {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 8px;
}

.learning-active-head > span:first-child strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learning-support-fold {
  border-top: 1px solid var(--border-dim);
  padding-top: 12px;
}

.learning-support-fold summary {
  cursor: pointer;
  color: var(--text-dim);
  font-size: 0.8rem;
}

.learning-support-fold-body {
  display: grid;
  gap: 12px;
  padding-top: 10px;
}

.panel-plain-action {
  justify-self: start;
  min-height: 30px;
  padding: 2px 12px;
  border: 1px solid var(--border-dim);
  background: transparent;
  color: var(--text);
  font-size: 0.82rem;
}

.panel-plain-action:hover,
.panel-plain-action:focus-visible {
  border-color: var(--border);
}

.question-comment-list,
.practice-siblings {
  display: grid;
  gap: 7px;
}

.practice-siblings {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--border-dim) 78%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: blur(16px);
}

.question-comment {
  display: grid;
  align-content: center;
  gap: 2px;
  width: 100%;
  height: 46px;
  min-height: 46px;
  padding: 5px 0 5px 10px;
  overflow: hidden;
  border: 0;
  border-left: 1px solid color-mix(in srgb, var(--border) 28%, transparent);
  background: color-mix(in srgb, var(--bg) 34%, transparent);
  color: var(--text);
  text-align: left;
  opacity: 0.78;
  transition: opacity 180ms ease, border-color 180ms ease, background 180ms ease, padding-left 180ms ease;
}

.question-comment:hover,
.question-comment:focus-visible,
.question-comment.is-active {
  border-left-color: color-mix(in srgb, var(--border) 88%, transparent);
  background: color-mix(in srgb, var(--surface) 56%, transparent);
  opacity: 0.96;
  padding-left: 12px;
}

.question-comment.is-pending {
  border-left-color: color-mix(in srgb, var(--border) 72%, transparent);
  background: color-mix(in srgb, var(--surface) 46%, transparent);
  opacity: 0.92;
}

.question-comment span,
.question-comment small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.question-comment span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
}

.question-comment-status {
  flex: 0 0 auto;
  color: var(--text-dim);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 400;
  opacity: 0.72;
}

.question-comment-status.is-correct {
  color: #55b87a;
  font-weight: 650;
  opacity: 1;
}

.question-comment-status.is-wrong {
  color: #df6a6a;
  font-weight: 650;
  opacity: 1;
}

.question-comment small {
  color: var(--text-dim);
  font-size: 0.78rem;
  line-height: 1.35;
}

.practice-mode {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-self: start;
  justify-self: start;
  align-items: stretch;
  width: max-content;
  height: 28px;
  min-height: 28px;
  max-height: 28px;
  overflow: hidden;
  contain: layout;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--border-dim) 62%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 42%, transparent);
}

.practice-mode button {
  flex: 0 0 auto;
  align-self: stretch;
  height: 26px;
  max-height: 26px;
  min-height: 26px;
  width: auto;
  padding: 2px 9px;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font-size: 0.76rem;
}

.practice-panel.is-answering {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.practice-panel.is-answering.is-learning {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
}

.practice-panel.is-answering > .practice-mode {
  grid-row: auto;
  flex: 0 0 28px;
  align-self: flex-start;
  place-self: start;
}

.practice-mode button + button {
  border-left: 1px solid color-mix(in srgb, var(--border-dim) 62%, transparent);
}

.practice-mode button.is-active {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  color: var(--text);
}

.practice-question {
  clear: both;
  padding: 12px 14px 16px;
  border: 1px solid color-mix(in srgb, var(--border-dim) 82%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(16px);
}

.practice-question-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.practice-question-title h2 {
  margin: 0 0 6px;
  font-size: 1rem;
  line-height: 1.35;
}

.practice-question-title small {
  color: var(--text-dim);
  font-size: 0.78rem;
}

.practice-attempt-status {
  margin: -2px 0 8px;
  color: var(--text-dim);
  font-size: 0.78rem;
}

.practice-stem {
  margin: 8px 0;
  font-size: 0.95rem;
  line-height: 1.62;
}

.relation-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: -2px 0 10px;
}

.relation-badges span {
  padding: 0 6px;
  border: 1px solid var(--border-dim);
  color: var(--text-dim);
  font-size: 0.75rem;
  line-height: 1.6;
}

.practice-feedback {
  display: grid;
  gap: 7px;
  margin: 10px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--border-dim);
}

.practice-feedback[hidden] {
  display: none;
}

.study-explanation {
  display: grid;
  gap: 5px;
  padding: 8px 0;
  border-top: 1px solid color-mix(in srgb, var(--border-dim) 60%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border-dim) 60%, transparent);
}

.study-explanation p {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 8px;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.55;
}

.study-explanation strong {
  color: var(--text-dim);
  font-size: 0.76rem;
  font-weight: 500;
}

.study-explanation span {
  color: var(--text);
}

.study-principle {
  display: grid;
  gap: 4px;
}

.study-principle details {
  margin-left: 46px;
}

.study-principle summary {
  width: fit-content;
  color: var(--text-dim);
  font-size: 0.76rem;
  line-height: 1.55;
  cursor: pointer;
}

.study-principle summary:hover,
.study-principle summary:focus-visible {
  color: var(--text);
}

.study-principle details p {
  display: block;
  margin-top: 4px;
  color: var(--text-dim);
  line-height: 1.65;
}

.study-explanation .mapping-boundary-line span {
  color: var(--text-muted);
}

.question-study-tools {
  display: grid;
  gap: 7px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 0;
}

.question-study-tools.is-compact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}

.question-study-tools > button {
  justify-self: start;
  min-height: 28px;
  padding: 1px 9px;
  border: 1px solid color-mix(in srgb, var(--border-dim) 72%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font-size: 0.78rem;
}

.question-study-tools > button:hover,
.question-study-tools > button:focus-visible {
  border-color: var(--border);
  color: var(--text);
}

.question-study-tools > button.is-primary {
  border-color: color-mix(in srgb, var(--accent, #56b4f8) 44%, var(--border-dim));
  color: var(--text);
  font-weight: 620;
}

.question-study-tools > button:disabled {
  cursor: wait;
  opacity: 0.58;
}

.question-note-disclosure {
  margin: 0;
}

.question-note-disclosure summary {
  min-height: 28px;
  padding: 1px 8px;
  border: 1px solid var(--border-dim);
  color: var(--text-dim);
  font-size: 0.78rem;
  line-height: 1.6;
  cursor: pointer;
  list-style: none;
}

.question-note-disclosure summary::-webkit-details-marker {
  display: none;
}

.question-note-disclosure[open] {
  flex-basis: 100%;
}

.question-note-disclosure[open] summary {
  width: fit-content;
  border-color: var(--border);
  color: var(--text);
}

.question-study-tools label,
.question-inline-note {
  display: grid;
  gap: 4px;
}

.question-study-tools label span,
.question-inline-note span {
  color: var(--text-dim);
  font-size: 0.76rem;
}

.question-study-tools textarea,
.question-inline-note textarea,
.tutor-input-row input,
.question-filters input,
.question-filters select {
  width: 100%;
  border: 1px solid var(--border-dim);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
}

.question-study-tools textarea,
.question-inline-note textarea {
  min-height: 70px;
  padding: 7px 8px;
  resize: vertical;
  font-size: 0.82rem;
  line-height: 1.55;
}

.question-study-tools small {
  min-height: 1em;
  color: var(--text-dim);
  font-size: 0.72rem;
}

.feedback-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.feedback-line strong {
  font-size: 0.92rem;
  font-weight: 600;
}

.feedback-line small,
.option-map {
  color: var(--text-dim);
}

.key-point-pills,
.key-point-line {
  margin: -2px 0 0;
  color: var(--text-dim);
  font-size: 0.8rem;
  line-height: 1.5;
}

.key-point-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}

.key-point-pills > span {
  color: var(--text-dim);
}

.key-point-chip {
  min-height: 23px;
  padding: 1px 7px;
  border: 1px solid color-mix(in srgb, var(--border-dim) 74%, transparent);
  background: transparent;
  color: var(--text-dim);
  font-size: 0.76rem;
  line-height: 1.45;
}

.key-point-chip:hover,
.key-point-chip:focus-visible {
  border-color: var(--border);
  color: var(--text);
}

.option-map {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
}

.option-evidence-grid {
  display: grid;
  gap: 4px;
}

.option-evidence-item {
  margin-top: 0;
  border-top: 1px solid color-mix(in srgb, var(--border-dim) 68%, transparent);
}

.option-evidence-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 34px;
  padding: 5px 0;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  list-style: none;
}

.option-evidence-row::-webkit-details-marker {
  display: none;
}

.option-evidence-row strong {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-dim);
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 600;
}

.option-evidence-item.is-answer .option-evidence-row strong {
  border-color: var(--text);
}

.option-evidence-item.has-support .option-evidence-row strong {
  background: color-mix(in srgb, var(--text) 7%, transparent);
}

.option-evidence-item.has-partial .option-evidence-row strong {
  border-style: dashed;
}

.option-evidence-item.has-unsupported {
  opacity: 0.74;
}

.option-evidence-row > span {
  display: block;
  color: var(--text);
  font-size: 0.8rem;
  line-height: 1.4;
}

.option-evidence-row small {
  color: var(--text-dim);
  font-size: 0.74rem;
  line-height: 1.3;
  white-space: nowrap;
}

.option-evidence-row:hover,
.option-evidence-row:focus-visible {
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 58%, transparent);
}

.option-evidence-detail {
  display: grid;
  gap: 7px;
  padding: 2px 0 9px 32px;
}

.option-evidence-detail p {
  margin: 0;
  color: var(--text);
  font-size: 0.8rem;
  line-height: 1.55;
}

.option-evidence-detail p small {
  display: block;
  margin-bottom: 2px;
  color: var(--text-dim);
  font-size: 0.72rem;
}

.option-source-notes {
  display: grid;
  gap: 3px;
}

.option-source-notes small {
  color: var(--text-dim);
  font-size: 0.74rem;
  line-height: 1.4;
}

.media-supplements {
  font-size: 0.82rem;
}

.media-supplements summary {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  color: var(--text-dim);
  cursor: pointer;
  list-style: none;
}

.media-supplements summary::-webkit-details-marker {
  display: none;
}

.media-supplements summary::after {
  content: "";
  width: 4px;
  height: 4px;
  margin-left: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 160ms ease;
}

.media-supplements[open] summary::after {
  transform: rotate(225deg) translateY(-1px);
}

.media-supplements summary:hover,
.media-supplements summary:focus-visible {
  color: var(--text);
}

.media-supplement-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: center;
  margin-top: 4px;
  font-size: 0.82rem;
}

.media-supplements summary {
  font-size: 0.78rem;
  font-weight: 600;
}

.media-supplements button {
  padding: 1px 7px;
  border: 1px solid var(--border-dim);
  background: transparent;
  color: var(--text-dim);
  font-size: 0.78rem;
  line-height: 1.6;
}

.media-supplements button:hover,
.media-supplements button:focus-visible {
  color: var(--text);
  border-color: var(--border);
  text-decoration: none;
}

.reference-supplements {
  display: grid;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-dim);
}

.reference-supplements-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.reference-supplements-head strong,
.reference-supplement p strong {
  font-size: 0.84rem;
  font-weight: 600;
}

.reference-supplements-head small,
.reference-supplement small {
  color: var(--text-dim);
}

.reference-supplement {
  display: grid;
  gap: 3px;
}

.reference-supplement p {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
}

.reference-supplement p:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.relation-graph {
  margin: 14px 0;
  padding: 10px 0;
  border-top: 1px solid var(--border-dim);
  border-bottom: 1px solid var(--border-dim);
}

.relation-graph-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.relation-graph-head strong {
  font-size: 0.9rem;
  font-weight: 600;
}

.relation-graph-head small,
.relation-node small,
.relation-node span,
.relation-edges {
  color: var(--text-dim);
}

.relation-nodes {
  display: grid;
  gap: 8px;
}

.relation-node {
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: 0;
  padding: 6px 0;
  border: 0;
  border-top: 1px solid var(--border-dim);
  background: transparent;
  color: var(--text);
  text-align: left;
}

.relation-node:hover {
  text-decoration: none;
}

.relation-node.current {
  border-color: var(--border-dim);
}

.relation-node strong {
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.45;
}

.relation-node span {
  font-size: 0.78rem;
  line-height: 1.45;
}

.relation-node p {
  margin: 4px 0 0;
  color: var(--text);
  font-size: 0.86rem;
  line-height: 1.55;
}

.evidence-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 3px 0;
}

.evidence-notes small {
  color: var(--text-dim);
  line-height: 1.45;
}

.relation-edges {
  display: grid;
  gap: 3px;
  margin-top: 8px;
  font-size: 0.78rem;
}

.mapping-evidence,
.related-mappings {
  margin: 12px 0;
  padding: 10px 0;
  border-top: 1px solid var(--border-dim);
  border-bottom: 1px solid var(--border-dim);
}

.practice-answer,
.practice-evidence,
.related-mappings {
  color: var(--text-dim);
  font-size: 0.86rem;
}

.practice-answer[open],
.practice-evidence[open],
.related-mappings[open] {
  color: var(--text);
}

.practice-answer summary,
.practice-evidence summary,
.related-mappings summary {
  cursor: pointer;
}

.mapping-evidence p,
.related-mappings p {
  margin: 6px 0;
}

.mapping-evidence small,
.related-mappings small {
  color: var(--text-dim);
}

.practice-options {
  display: grid;
  gap: 7px;
}

.option {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  width: 100%;
  min-height: 42px;
  margin: 0;
  padding: 7px 8px;
  text-align: left;
  border: 1px solid var(--border-dim);
  background: transparent;
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.5;
  transition: border-color 160ms ease, background 160ms ease, opacity 160ms ease;
}

.option strong {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--border-dim);
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
}

.option span {
  min-width: 0;
}

.option:hover {
  border-color: var(--border);
}

.option.is-selected {
  border-color: color-mix(in srgb, var(--border) 78%, transparent);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
}

.option.is-selected strong {
  border-color: var(--border);
}

.option.is-correct {
  border-color: #168244;
  background: color-mix(in srgb, #168244 12%, transparent);
}

.option.is-correct strong {
  border-color: #168244;
}

.option.is-wrong {
  border-color: #9b3535;
  background: color-mix(in srgb, #9b3535 12%, transparent);
}

.practice-actions {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}

.submit-answer {
  min-height: 30px;
  padding: 2px 12px;
  border: 1px solid var(--border-dim);
  background: transparent;
  color: var(--text);
  font-size: 0.82rem;
}

.submit-answer:hover,
.submit-answer:focus-visible {
  border-color: var(--border);
}

[data-redo-practice] {
  min-height: 30px;
  padding: 2px 12px;
  border: 1px solid var(--border-dim);
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.82rem;
}

.practice-question-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--border-dim) 64%, transparent);
}

.practice-question-nav button {
  display: grid;
  gap: 2px;
  min-height: 34px;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--border-dim) 78%, transparent);
  background: transparent;
  color: var(--text);
  font-size: 0.78rem;
  text-align: left;
}

.practice-question-nav button:not(:disabled):hover,
.practice-question-nav button:not(:disabled):focus-visible {
  border-color: var(--border);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
}

.practice-question-nav button:disabled {
  color: var(--text-dim);
  opacity: 0.42;
}

.practice-question-nav small {
  overflow: hidden;
  color: var(--text-dim);
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-explanation {
  margin: 0;
  color: var(--text);
  font-size: 0.86rem;
  line-height: 1.55;
}

.source-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}

.source-chip {
  min-height: 24px;
  padding: 1px 7px;
  border: 1px solid var(--border-dim);
  background: transparent;
  color: var(--text-dim);
  font-size: 0.76rem;
  line-height: 1.45;
}

.source-chip.is-reference {
  border-style: dashed;
}

.source-chip.is-question-context {
  border-style: dashed;
  color: var(--text-faint);
}

.source-chip.is-located {
  border-color: color-mix(in srgb, var(--link-blue) 72%, var(--border));
  background: color-mix(in srgb, var(--link-blue) 12%, transparent);
  color: var(--text);
}

.option-source-empty {
  display: grid;
  gap: 4px;
}

.option-source-empty > small {
  color: var(--text-faint);
  font-size: 0.72rem;
}

.question-context-sources {
  margin: 2px 0 0;
}

.question-context-sources > summary {
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.74rem;
}

.source-chip:hover,
.source-chip:focus-visible {
  color: var(--text);
  border-color: var(--border);
}

.source-chip-more {
  display: inline-block;
  min-height: 24px;
  vertical-align: middle;
}

.source-chip-more summary {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 0.76rem;
  line-height: 1.45;
  list-style: none;
}

.source-chip-more summary::-webkit-details-marker {
  display: none;
}

.source-chip-more-list {
  display: none;
  flex-wrap: wrap;
  gap: 5px;
  margin-left: 5px;
  vertical-align: middle;
}

.source-chip-more[open] .source-chip-more-list {
  display: inline-flex;
}

.resource-preview {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(18px);
}

.resource-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.resource-preview-head strong {
  font-size: 0.82rem;
  font-weight: 600;
}

.resource-preview-head button {
  min-height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-dim);
}

.resource-preview p {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.8rem;
  line-height: 1.5;
}

.resource-preview iframe {
  width: 100%;
  height: min(46vh, 360px);
  border: 1px solid var(--border-dim);
  background: var(--bg);
}

.reader-floating-layer {
  position: fixed;
  inset: 0;
  z-index: var(--reader-floating-window-layer);
  overflow: visible;
  pointer-events: none;
  isolation: isolate;
}

.read-aloud-dock,
.selection-map-dock,
.library-manager-dock,
.paragraph-visualization-dock {
  --reader-panel-bg: color-mix(in srgb, var(--bg) 95%, transparent);
  --reader-panel-border: color-mix(in srgb, var(--border-dim) 88%, transparent);
  color: var(--text);
}

[data-floating-window] {
  position: fixed;
  z-index: 1;
  pointer-events: auto;
}

[data-floating-window][popover] {
  inset: auto;
  margin: 0;
}

[data-floating-window][popover]::backdrop {
  background: transparent;
  pointer-events: none;
}

.read-aloud-dock {
  position: fixed;
  top: 84px;
  right: 24px;
  z-index: 42;
  display: grid;
  gap: 9px;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(388px, calc(100vw - 32px));
  min-width: min(320px, calc(100vw - 24px));
  min-height: 148px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  padding: 10px 12px;
  overflow: hidden;
  border: 1px solid var(--reader-panel-border);
  border-radius: 10px;
  background: var(--reader-panel-bg);
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(18px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}

.section-lesson-dock {
  --reader-panel-border: color-mix(in srgb, var(--text) 28%, transparent);
  position: fixed;
  top: 84px;
  left: 58px;
  z-index: 41;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(520px, calc(100vw - 48px));
  height: min(72vh, 620px);
  min-width: min(420px, calc(100vw - 24px));
  min-height: min(360px, calc(100vh - 24px));
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  overflow: hidden;
  border: 1px solid var(--reader-panel-border);
  border-radius: 12px;
  background: var(--bg);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}

.section-lesson-dock > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 6px 10px 6px 12px;
  border-bottom: 1px solid var(--reader-panel-border);
  cursor: grab;
  touch-action: none;
}

.section-lesson-dock > header > span {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.section-lesson-dock > header :is(strong, small) {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.section-lesson-dock > header strong {
  font-size: 0.82rem;
  font-weight: 600;
}

.section-lesson-dock > header small {
  color: var(--text-dim);
  font-size: 0.62rem;
}

.section-lesson-dock > header > button {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
}

.section-lesson-dock > header > button:hover,
.section-lesson-dock > header > button:focus-visible {
  background: var(--surface);
  color: var(--text);
}

.section-lesson-dock > header svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.section-lesson-body {
  display: grid;
  grid-template-rows: minmax(120px, 1fr) auto;
  min-height: 0;
  overflow: hidden;
}

.section-lesson-empty {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.69rem;
  line-height: 1.55;
}

.section-lesson-unit-list {
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 120px;
  padding: 12px 14px;
  overflow: auto;
  overscroll-behavior: contain;
}

.section-lesson-list-tools {
  position: sticky;
  z-index: 2;
  top: -12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
  margin: -12px -14px 0;
  padding: 7px 14px;
  border-bottom: 1px solid var(--reader-panel-border);
  background: color-mix(in srgb, var(--bg) 97%, var(--surface));
  color: var(--text-dim);
  font-size: 0.62rem;
}

.section-lesson-list-tools > span:last-child {
  display: flex;
  gap: 4px;
}

.section-lesson-list-tools button {
  min-height: 24px;
  padding: 2px 7px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  cursor: pointer;
}

.section-lesson-list-tools button:hover,
.section-lesson-list-tools button:focus-visible {
  background: var(--surface);
  color: var(--text);
}

.section-lesson-unit {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  padding: 8px 9px;
  border: 1px solid color-mix(in srgb, var(--border-dim) 82%, transparent);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
}

.section-lesson-unit.is-selected {
  border-color: color-mix(in srgb, #3677ab 68%, var(--border-dim));
  background: color-mix(in srgb, #dceefd 46%, var(--bg));
}

.section-lesson-unit.is-focused {
  box-shadow: inset 2px 0 0 #3677ab;
}

.section-lesson-unit input {
  margin: 3px 0 0;
  accent-color: #286b9e;
}

.section-lesson-unit span,
.section-lesson-selection {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.section-lesson-unit strong,
.section-lesson-unit small,
.section-lesson-selection strong,
.section-lesson-selection small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.section-lesson-unit strong {
  font-size: 0.72rem;
}

.section-lesson-unit small,
.section-lesson-selection small {
  color: var(--text-dim);
  font-size: 0.62rem;
}

.section-lesson-unit-status {
  align-self: center;
  color: var(--text-dim);
  font-size: 0.58rem;
  font-style: normal;
  white-space: nowrap;
}

.section-lesson-unit-status.is-completed {
  color: #4f8b67;
}

.section-lesson-unit-status.is-failed {
  color: #b05b5b;
}

.section-lesson-selection {
  padding: 9px 10px;
  border-left: 2px solid #3b7db0;
  background: var(--surface);
}

.section-lesson-selection strong {
  font-size: 0.72rem;
}

.section-lesson-progress {
  display: grid;
  gap: 6px;
  padding: 2px 1px 1px;
  min-width: 0;
}

.section-lesson-footer {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 11px 14px 14px;
  border-top: 1px solid var(--reader-panel-border);
  background: color-mix(in srgb, var(--bg) 96%, var(--surface));
  box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.04);
}

.section-lesson-progress-copy {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.section-lesson-progress-copy strong,
.section-lesson-progress-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.section-lesson-progress-copy strong {
  color: var(--text);
  font-size: 0.68rem;
  font-weight: 600;
}

.section-lesson-progress-copy small {
  color: var(--text-dim);
  font-size: 0.6rem;
  text-align: right;
}

.section-lesson-progress-track {
  position: relative;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 12%, transparent);
}

.section-lesson-progress-track > span {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--section-lesson-progress, 0%);
  border-radius: inherit;
  background: #3479ad;
  transition: width 220ms ease;
}

.section-lesson-progress.is-indeterminate .section-lesson-progress-track > span {
  width: 34%;
  animation: section-lesson-progress-scan 1.25s ease-in-out infinite;
}

.section-lesson-progress.is-reconnecting .section-lesson-progress-track > span {
  background: color-mix(in srgb, #3479ad 64%, var(--text-dim));
}

.section-lesson-progress.is-failed .section-lesson-progress-track > span {
  background: #a94b4b;
}

@keyframes section-lesson-progress-scan {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(310%); }
}

@media (prefers-reduced-motion: reduce) {
  .section-lesson-progress-track > span {
    transition: none;
  }

  .section-lesson-progress.is-indeterminate .section-lesson-progress-track > span {
    animation: none;
    transform: translateX(92%);
  }
}

.section-lesson-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}

.section-lesson-actions button {
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid var(--border-dim);
  border-radius: 7px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.68rem;
  cursor: pointer;
}

.section-lesson-actions button.is-primary {
  border-color: #286b9e;
  background: #286b9e;
  color: #fff;
}

.section-lesson-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.section-lesson-empty.is-error {
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, #b44 42%, var(--border-dim));
  border-radius: 8px;
  background: var(--surface);
}

.section-lesson-empty.is-error p {
  margin: 0;
}

.section-lesson-empty.is-error button {
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid var(--border-dim);
  border-radius: 7px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.read-aloud-dock.is-hidden,
.selection-map-dock.is-hidden,
.library-manager-dock.is-hidden,
.paragraph-visualization-dock.is-hidden,
.section-lesson-dock.is-hidden {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
}

.read-aloud-status,
.read-aloud-controls,
.selection-map-dock > header,
.selection-map-dock > header > span,
.selection-map-dock > header nav {
  display: flex;
  align-items: center;
}

.selection-map-file-picker select {
  width: min(138px, 18vw);
  min-height: 26px;
  padding: 1px 18px 1px 5px;
  overflow: hidden;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.62rem;
  text-overflow: ellipsis;
}

.selection-map-file-picker select:hover,
.selection-map-file-picker select:focus-visible {
  background: var(--surface);
  color: var(--text);
  outline: 0;
}

.selection-map-dock > header [data-selection-map-link-mode] {
  padding-inline: 6px;
  font-size: 0.59rem;
  white-space: nowrap;
}

.read-aloud-status {
  justify-content: space-between;
  gap: 12px;
  cursor: move;
  cursor: grab;
  touch-action: none;
}

.read-aloud-status > span,
.selection-map-dock > header > span {
  min-width: 0;
}

.read-aloud-status :is(strong, small),
.selection-map-dock > header :is(strong, small) {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.read-aloud-status strong,
.selection-map-dock > header strong {
  font-size: 0.82rem;
  font-weight: 600;
}

.read-aloud-status small,
.selection-map-dock > header small {
  color: var(--text-dim);
  font-size: 0.66rem;
  line-height: 1.3;
}

.read-aloud-status > button,
.selection-map-dock > header button,
.selection-map-dock > header a {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  min-height: 26px;
  padding: 2px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-dim);
  font-size: 0.7rem;
  line-height: 1;
  text-decoration: none;
}

.read-aloud-status > button:hover,
.read-aloud-status > button:focus-visible,
.selection-map-dock > header :is(button, a):hover,
.selection-map-dock > header :is(button, a):focus-visible {
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}

.read-aloud-status svg,
.selection-map-dock > header svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

/* Export is a compact secondary menu, not two competing arrow glyphs. */
.selection-map-export {
  position: relative;
  z-index: 12;
  display: inline-grid;
  align-self: center;
  flex: 0 0 26px;
}

.selection-map-export > summary {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  box-sizing: border-box;
  padding: 0;
  border-radius: 6px;
  color: var(--text-dim);
  line-height: 1;
  cursor: pointer;
  list-style: none;
}

.selection-map-export > summary::-webkit-details-marker { display: none; }
.selection-map-export > summary::marker { content: ""; }

.selection-map-export[open] > summary,
.selection-map-export > summary:hover,
.selection-map-export > summary:focus-visible {
  outline: 0;
  background: var(--surface);
  color: var(--text);
}

.selection-map-export > div {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  display: grid;
  width: 174px;
  padding: 5px;
  overflow: hidden;
  border: 1px solid var(--reader-panel-border);
  border-radius: 9px;
  background: color-mix(in srgb, var(--reader-panel-bg) 97%, var(--bg));
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(18px);
}

.selection-map-export > div > a {
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 39px !important;
  padding: 4px 7px !important;
  border-radius: 6px !important;
  text-align: left;
}

.selection-map-export > div > a + a {
  border-top: 1px solid color-mix(in srgb, var(--reader-panel-border) 54%, transparent);
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

.selection-map-export > div > a > svg {
  width: 20px;
  height: 20px;
  padding: 3px;
  border: 1px solid color-mix(in srgb, var(--reader-panel-border) 78%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface) 46%, transparent);
}

.selection-map-export > div > a > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.selection-map-export > div > a :is(strong, small) {
  display: block;
  font-weight: 520;
  line-height: 1.2;
}

.selection-map-export > div > a strong {
  overflow: hidden;
  color: var(--text);
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selection-map-export > div > a small {
  color: var(--text-faint);
  font-size: 0.56rem;
}

.read-aloud-controls {
  display: grid;
  grid-template-columns: auto minmax(90px, 1fr) auto;
  gap: 7px 8px;
  min-height: 0;
  overflow: auto;
}

.read-aloud-controls > button,
.read-aloud-controls select {
  min-height: 27px;
  border: 1px solid var(--reader-panel-border);
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.7rem;
}

.read-aloud-controls > button {
  padding: 1px 8px;
}

.read-aloud-controls label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-dim);
  font-size: 0.68rem;
  white-space: nowrap;
}

.read-aloud-controls .read-aloud-voice-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 0.72fr) auto minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  color: var(--text-dim);
  font-size: 0.68rem;
}

.read-aloud-controls .read-aloud-voice-row select {
  width: 100%;
  min-width: 0;
}

.read-aloud-controls select {
  padding: 1px 3px;
}

.read-aloud-controls [data-read-aloud-progress] {
  appearance: none;
  -webkit-appearance: none;
  flex: 1 1 auto;
  min-width: 48px;
  height: 18px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: ew-resize;
}

.read-aloud-controls [data-read-aloud-progress]::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--text) 0 var(--read-aloud-percent, 0%), var(--border-dim) var(--read-aloud-percent, 0%) 100%);
}

.read-aloud-controls [data-read-aloud-progress]::-moz-range-track {
  height: 3px;
  border-radius: 999px;
  background: var(--border-dim);
}

.read-aloud-controls [data-read-aloud-progress]::-moz-range-progress {
  height: 3px;
  border-radius: 999px;
  background: var(--text);
}

.read-aloud-controls [data-read-aloud-progress]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  margin-top: -3.5px;
  border: 1px solid var(--reader-panel-bg);
  border-radius: 50%;
  background: var(--text);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 30%, transparent);
}

.read-aloud-controls [data-read-aloud-progress]::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: 1px solid var(--reader-panel-bg);
  border-radius: 50%;
  background: var(--text);
}

.read-aloud-controls [data-read-aloud-progress]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--text) 52%, transparent);
  outline-offset: 1px;
  border-radius: 999px;
}

.selection-map-dock {
  position: fixed;
  top: 104px;
  right: 24px;
  z-index: 40;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  width: min(840px, calc(100vw - 48px));
  height: min(68vh, 610px);
  min-width: min(420px, calc(100vw - 24px));
  min-height: min(300px, calc(100vh - 24px));
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  overflow: hidden;
  resize: none;
  border: 1px solid var(--reader-panel-border);
  border-radius: 11px;
  background: var(--reader-panel-bg);
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(20px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}

.paragraph-visualization-dock {
  position: fixed;
  top: 96px;
  right: 24px;
  z-index: 41;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(440px, calc(100vw - 48px));
  height: min(72vh, 640px);
  min-width: min(360px, calc(100vw - 24px));
  min-height: min(340px, calc(100vh - 24px));
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  overflow: hidden;
  border: 1px solid var(--reader-panel-border);
  border-radius: 11px;
  background: var(--reader-panel-bg);
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(20px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}

.paragraph-visualization-dock > header,
.paragraph-visualization-dock > header > span,
.paragraph-visualization-selection,
.paragraph-visualization-selection > span,
.paragraph-visualization-current > header,
.paragraph-visualization-current > header > span,
.paragraph-visualization-range > header,
.paragraph-visualization-range-inputs {
  display: flex;
  align-items: center;
}

.paragraph-visualization-dock > header {
  justify-content: space-between;
  gap: 12px;
  min-height: 47px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--reader-panel-border);
  cursor: grab;
  touch-action: none;
}

.paragraph-visualization-dock > header > span {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.paragraph-visualization-dock > header :is(strong, small) {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.paragraph-visualization-dock > header strong {
  font-size: 0.82rem;
  font-weight: 600;
}

.paragraph-visualization-dock > header small {
  color: var(--text-dim);
  font-size: 0.62rem;
}

.paragraph-visualization-dock > header > button {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
}

.paragraph-visualization-dock > header > button:hover,
.paragraph-visualization-dock > header > button:focus-visible {
  background: var(--surface);
  color: var(--text);
}

.paragraph-visualization-dock > header svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.paragraph-visualization-body {
  display: grid;
  align-content: start;
  gap: 9px;
  min-height: 0;
  padding: 10px 12px 18px;
  overflow: auto;
  overscroll-behavior: contain;
}

.paragraph-visualization-hint,
.paragraph-visualization-prompt,
.paragraph-visualization-range-preview,
.paragraph-visualization-empty {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.69rem;
  line-height: 1.5;
}

.paragraph-visualization-prompt {
  padding: 7px 8px;
  border: 1px solid color-mix(in srgb, var(--border-dim) 78%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface) 76%, transparent);
}

.paragraph-visualization-current,
.paragraph-visualization-range {
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--border-dim) 82%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 68%, transparent);
}

.paragraph-visualization-current > header,
.paragraph-visualization-selection,
.paragraph-visualization-range > header {
  justify-content: space-between;
  gap: 8px;
}

.paragraph-visualization-current > header > span,
.paragraph-visualization-range > header {
  min-width: 0;
}

.paragraph-visualization-current > header strong,
.paragraph-visualization-range > header strong {
  font-size: 0.74rem;
}

.paragraph-visualization-current > header small,
.paragraph-visualization-range > header small {
  color: var(--text-dim);
  font-size: 0.62rem;
}

.paragraph-visualization-current > header button,
.paragraph-visualization-selection button,
.paragraph-visualization-range button {
  min-height: 25px;
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--border-dim) 84%, transparent);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text-dim);
  font: inherit;
  font-size: 0.66rem;
  cursor: pointer;
}

.paragraph-visualization-current > header button:hover,
.paragraph-visualization-current > header button:focus-visible,
.paragraph-visualization-selection button:hover,
.paragraph-visualization-selection button:focus-visible,
.paragraph-visualization-range button:hover,
.paragraph-visualization-range button:focus-visible {
  border-color: color-mix(in srgb, var(--text-dim) 72%, transparent);
  color: var(--text);
}

.paragraph-visualization-current > header button:disabled,
.paragraph-visualization-selection button:disabled,
.paragraph-visualization-range button:disabled,
.paragraph-visualization-item-generate:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.paragraph-visualization-item-list {
  display: grid;
  gap: 5px;
  max-height: 236px;
  overflow: auto;
  overscroll-behavior: contain;
}

.paragraph-visualization-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-height: 37px;
  padding: 4px 5px;
  border: 1px solid transparent;
  border-radius: 6px;
}

.paragraph-visualization-item:hover,
.paragraph-visualization-item.is-selected {
  border-color: color-mix(in srgb, #3b7db0 52%, var(--border-dim));
  background: color-mix(in srgb, #dceefd 44%, transparent);
}

.paragraph-visualization-item-select {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--border-dim);
  border-radius: 5px;
  background: var(--bg);
  color: var(--text-dim);
  cursor: pointer;
}

.paragraph-visualization-item.is-selected .paragraph-visualization-item-select {
  border-color: #246da5;
  background: #286b9e;
  color: #fff;
}

.paragraph-visualization-item-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.paragraph-visualization-item-copy strong,
.paragraph-visualization-item-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.paragraph-visualization-item-copy strong {
  font-size: 0.67rem;
  font-weight: 560;
}

.paragraph-visualization-item-copy small {
  color: var(--text-dim);
  font-size: 0.58rem;
}

.paragraph-visualization-item-generate {
  min-width: 52px;
  min-height: 24px;
  padding: 2px 5px;
  border: 1px solid color-mix(in srgb, #3a78aa 68%, var(--border));
  border-radius: 6px;
  background: var(--bg);
  color: color-mix(in srgb, var(--text) 78%, #1f6397);
  font: inherit;
  font-size: 0.61rem;
  cursor: pointer;
}

.paragraph-visualization-item.is-pinned .paragraph-visualization-item-generate,
.paragraph-visualization-item.is-completed .paragraph-visualization-item-generate {
  border-color: #3f7d52;
  color: #2f6b43;
}

.paragraph-visualization-item.is-failed .paragraph-visualization-item-generate {
  border-color: #a54e4e;
  color: #8e3535;
}

.paragraph-visualization-selection {
  padding: 2px 0;
  color: var(--text-dim);
  font-size: 0.68rem;
}

.paragraph-visualization-selection > span:last-child {
  display: inline-flex;
  gap: 5px;
}

.paragraph-visualization-range > header {
  display: grid;
  gap: 2px;
}

.paragraph-visualization-range-inputs {
  gap: 6px;
}

.paragraph-visualization-range-inputs label {
  display: grid;
  flex: 1 1 0;
  gap: 3px;
  color: var(--text-dim);
  font-size: 0.61rem;
}

.paragraph-visualization-range-inputs input {
  min-width: 0;
  height: 27px;
  box-sizing: border-box;
  padding: 3px 6px;
  border: 1px solid var(--border-dim);
  border-radius: 5px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.68rem;
}

.paragraph-visualization-range-start {
  width: 100%;
  border-color: color-mix(in srgb, #3b7db0 72%, var(--border)) !important;
  background: #286b9e !important;
  color: #fff !important;
}

/* 图解插件只保留选择、生成和范围三个层级；说明与重复按钮不占阅读空间。 */
.paragraph-visualization-dock {
  top: 88px;
  width: min(420px, calc(100vw - 42px));
  height: min(62vh, 520px);
  min-width: min(332px, calc(100vw - 24px));
  min-height: min(270px, calc(100vh - 24px));
}

.paragraph-visualization-body {
  gap: 8px;
  padding: 8px 10px 12px;
}

.paragraph-visualization-mode {
  display: inline-flex;
  width: fit-content;
  padding: 2px;
  border: 1px solid color-mix(in srgb, var(--border-dim) 76%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface) 54%, transparent);
}

.paragraph-visualization-mode button,
.paragraph-visualization-run-controls button {
  min-height: 25px;
  padding: 2px 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.64rem;
  cursor: pointer;
}

.paragraph-visualization-mode button[aria-pressed="true"] {
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 1px 4px color-mix(in srgb, #000 18%, transparent);
}

.paragraph-visualization-current {
  gap: 3px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.paragraph-visualization-current > header {
  min-height: 25px;
  padding: 0 2px;
}

.paragraph-visualization-current > header strong {
  font-size: 0.7rem;
}

.paragraph-visualization-item-list {
  gap: 2px;
  max-height: 246px;
  padding-right: 2px;
}

.paragraph-visualization-item {
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 33px;
  padding: 3px 4px;
  cursor: pointer;
}

.paragraph-visualization-item:focus-visible {
  outline: 1px solid color-mix(in srgb, #3b7db0 76%, transparent);
  outline-offset: 1px;
}

.paragraph-visualization-item-copy strong { font-size: 0.64rem; }
.paragraph-visualization-item-copy small { font-size: 0.56rem; }

.paragraph-visualization-selection {
  min-height: 29px;
  padding: 0 2px;
}

.paragraph-visualization-selection > span:last-child { gap: 4px; }

.paragraph-visualization-selection [data-paragraph-visualization-clear-selection] {
  min-width: 25px;
  padding-inline: 0;
  font-size: 0.9rem;
}

.paragraph-visualization-selection [data-paragraph-visualization-start-selection] {
  border-color: color-mix(in srgb, #3b7db0 72%, var(--border));
  background: #286b9e;
  color: #fff;
}

.paragraph-visualization-run-controls {
  display: inline-flex;
  width: fit-content;
  gap: 4px;
}

.paragraph-visualization-run-controls [data-paragraph-visualization-stop] {
  color: #a44b4b;
}

.paragraph-visualization-range {
  gap: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.paragraph-visualization-range > summary {
  width: fit-content;
  color: var(--text-dim);
  font-size: 0.63rem;
  cursor: pointer;
}

.paragraph-visualization-range[open] > summary { margin-bottom: 2px; }
.paragraph-visualization-range-preview { font-size: 0.6rem; }

.paragraph-visualization-pptx {
  display: grid;
  gap: 6px;
  padding-top: 7px;
  border-top: 1px solid color-mix(in srgb, var(--border-dim) 78%, transparent);
}

.paragraph-visualization-pptx > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 27px;
  color: var(--text-dim);
  font-size: 0.64rem;
  cursor: pointer;
  list-style: none;
}

.paragraph-visualization-pptx > summary::-webkit-details-marker { display: none; }
.paragraph-visualization-pptx > summary::marker { content: ""; }

.paragraph-visualization-pptx > summary > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.paragraph-visualization-pptx > summary svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.paragraph-visualization-pptx > summary strong {
  color: var(--text);
  font-size: 0.68rem;
  font-weight: 600;
}

.paragraph-visualization-pptx > summary small {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.58rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.paragraph-visualization-pptx-body {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, #3b7db0 30%, var(--border-dim));
  border-radius: 7px;
  background: color-mix(in srgb, #3b7db0 7%, var(--surface));
}

.paragraph-visualization-pptx-body p {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.61rem;
  line-height: 1.5;
}

.paragraph-visualization-pptx-body .paragraph-visualization-pptx-status {
  color: var(--text-muted);
}

.paragraph-visualization-pptx-body > button {
  min-height: 28px;
  padding: 3px 9px;
  border: 1px solid color-mix(in srgb, #3b7db0 72%, var(--border));
  border-radius: 6px;
  background: #286b9e;
  color: #fff;
  font: inherit;
  font-size: 0.66rem;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}

.paragraph-visualization-pptx-body > button:hover:not(:disabled),
.paragraph-visualization-pptx-body > button:focus-visible {
  border-color: color-mix(in srgb, #8fc7ee 72%, #fff);
  background: #215d8b;
}

.paragraph-visualization-pptx-body > button:focus-visible {
  outline: 2px solid color-mix(in srgb, #61a9dd 76%, #fff);
  outline-offset: 2px;
}

.paragraph-visualization-pptx-body > button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.library-manager-dock {
  position: fixed;
  top: 92px;
  left: 58px;
  z-index: 41;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  width: min(760px, calc(100vw - 48px));
  height: min(70vh, 620px);
  min-width: min(460px, calc(100vw - 24px));
  min-height: min(320px, calc(100vh - 24px));
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  overflow: hidden;
  border: 1px solid var(--reader-panel-border);
  border-radius: 11px;
  background: var(--reader-panel-bg);
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(20px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}

.library-manager-dock > header,
.library-manager-dock > header > span,
.library-manager-dock > nav {
  display: flex;
  align-items: center;
}

.library-manager-dock > header {
  justify-content: space-between;
  gap: 14px;
  min-height: 47px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--reader-panel-border);
  cursor: grab;
  touch-action: none;
}

.library-manager-dock > header > span {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.library-manager-dock > header :is(strong, small) {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-manager-dock > header strong {
  font-size: 0.82rem;
  font-weight: 600;
}

.library-manager-dock > header small {
  color: var(--text-dim);
  font-size: 0.62rem;
}

.library-manager-dock > header > button {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
}

.library-manager-dock > header > button:hover,
.library-manager-dock > header > button:focus-visible {
  background: var(--surface);
  color: var(--text);
}

.library-manager-dock > header svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.library-manager-dock > nav {
  gap: 3px;
  min-height: 38px;
  padding: 5px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--reader-panel-border) 70%, transparent);
}

.library-manager-dock > nav button {
  min-height: 27px;
  padding: 2px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.7rem;
  cursor: pointer;
}

.library-manager-dock > nav button:hover,
.library-manager-dock > nav button:focus-visible,
.library-manager-dock > nav button.is-active {
  background: var(--surface);
  color: var(--text);
}

.library-manager-dock .learning-manager-content {
  min-height: 0;
  contain: layout paint;
}

.selection-map-dock > header {
  justify-content: space-between;
  gap: 14px;
  min-height: 47px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--reader-panel-border);
  /* The map canvas may be visually quiet, but its command bar must remain a solid toolbar. */
  background: color-mix(in srgb, var(--bg) 90%, var(--surface));
  backdrop-filter: none;
  cursor: move;
  cursor: grab;
  touch-action: none;
}

.selection-map-dock > header > span {
  display: block;
}

.selection-map-dock > header nav {
  flex: 0 0 auto;
  gap: 3px;
}

.selection-map-hint,
.selection-map-empty {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.67rem;
  line-height: 1.45;
}

.selection-map-hint {
  padding: 0;
}

.selection-map-meta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 30px;
  padding: 5px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--reader-panel-border) 70%, transparent);
  background: color-mix(in srgb, var(--bg) 94%, var(--surface));
}

.selection-map-meta > small {
  flex: 0 0 auto;
  color: var(--text-faint);
  font-size: 0.58rem;
  white-space: nowrap;
}

.selection-map-markdown-editor {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.selection-map-markdown-workspace {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.selection-map-markdown-workspace > :is(textarea, .markdown-visual-editor) {
  grid-area: 1 / 1;
  width: 100%;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 16px 18px 28px;
  overflow: auto;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  resize: none;
}

.selection-map-markdown-workspace > textarea {
  font: 0.76rem/1.72 var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  tab-size: 2;
}

.selection-map-markdown-workspace > .markdown-visual-editor {
  font-size: 0.82rem;
}

.selection-map-markdown-workspace.is-reference-drop-target {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 48%, transparent);
}

.selection-map-markdown-marker {
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.selection-map-heading {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.selection-map-heading > span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.selection-map-heading small {
  color: var(--text-dim);
  font-size: 0.59rem;
  font-weight: 400;
}

.selection-map-task-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-dim);
  font-size: 0.59rem;
  font-weight: 440;
  white-space: nowrap;
}

.selection-map-task-status > i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-faint);
}

.selection-map-task-status.is-working > i {
  background: #c18b31;
  animation: selection-map-task-pulse 1.2s ease-in-out infinite;
}

.selection-map-task-status.is-success > i { background: #39865c; }
.selection-map-task-status.is-error > i { background: #b34a4a; }
.selection-map-task-status.is-empty { display: none; }

@keyframes selection-map-task-pulse {
  50% { opacity: 0.35; }
}

.selection-map-bulk-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.selection-map-bulk-actions.is-hidden { display: none; }

.selection-map-bulk-actions b {
  min-width: 18px;
  color: var(--text-dim);
  font-size: 0.61rem;
  font-weight: 520;
  text-align: center;
}

.selection-map-bulk-actions button {
  min-height: 22px;
  padding: 1px 7px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.61rem;
}

.selection-map-bulk-actions button:hover,
.selection-map-bulk-actions button:focus-visible {
  background: var(--surface);
  color: var(--text);
}

.selection-map-empty {
  padding: 42px 16px;
  text-align: center;
}

.selection-map-viewport {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--text-dim) 20%, transparent) 0.7px, transparent 0.8px);
  background-size: 20px 20px;
  overscroll-behavior: contain;
}

.selection-map-viewport.is-reference-drop-target {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 52%, transparent);
}

.selection-capture-hint[draggable="true"] {
  cursor: grab;
}

.selection-capture-hint[draggable="true"]:active {
  cursor: grabbing;
}

.selection-map-stage {
  position: relative;
  min-width: 100%;
  min-height: 100%;
}

.selection-map-canvas {
  position: relative;
  transform-origin: 0 0;
  will-change: transform;
}

.selection-map-canvas > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.selection-map-canvas > svg path {
  fill: none;
  stroke: color-mix(in srgb, var(--text-dim) 48%, transparent);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

.selection-map-overview-root,
.selection-map-portal {
  position: absolute;
  z-index: 1;
  box-sizing: border-box;
  border: 1px solid var(--reader-panel-border);
  border-radius: 9px;
  background: color-mix(in srgb, var(--bg) 97%, transparent);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.07);
}

.selection-map-overview-root {
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 12px 14px;
  border-color: color-mix(in srgb, var(--text) 46%, var(--reader-panel-border));
  background: color-mix(in srgb, var(--surface) 72%, var(--bg));
}

.selection-map-overview-root strong,
.selection-map-overview-root small,
.selection-map-portal-main strong,
.selection-map-portal-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selection-map-overview-root strong,
.selection-map-portal-main strong {
  color: var(--text);
  font-size: 0.74rem;
  font-weight: 580;
}

.selection-map-overview-root small,
.selection-map-portal-main small {
  color: var(--text-dim);
  font-size: 0.61rem;
}

.selection-map-portal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  overflow: hidden;
  transition: border-color 130ms ease, box-shadow 130ms ease, transform 130ms ease;
}

.selection-map-portal:hover,
.selection-map-portal:focus-within {
  border-color: color-mix(in srgb, var(--text) 52%, var(--reader-panel-border));
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.selection-map-portal.is-default {
  box-shadow: inset 3px 0 color-mix(in srgb, var(--text) 62%, transparent), 0 5px 16px rgba(0, 0, 0, 0.07);
}

.selection-map-portal-main {
  display: grid;
  align-content: center;
  min-width: 0;
  gap: 4px;
  padding: 10px 11px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.selection-map-portal-actions {
  display: flex;
  align-items: center;
  gap: 1px;
  padding-right: 5px;
}

.selection-map-portal-actions button {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.7rem;
  cursor: pointer;
}

.selection-map-portal-actions button:hover,
.selection-map-portal-actions button:focus-visible {
  background: var(--surface);
  color: var(--text);
}

.selection-map-portal-actions button.is-confirming {
  background: color-mix(in srgb, #c53b3b 15%, transparent);
  color: light-dark(#9b2525, #f0a0a0);
}

.selection-map-portal-actions svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.selection-map-node {
  position: absolute;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 7px;
  align-items: center;
  width: 208px;
  min-height: 70px;
  padding: 8px 9px;
  border: 1px solid var(--reader-panel-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg) 97%, transparent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition: border-color 130ms ease, box-shadow 130ms ease, opacity 130ms ease;
}

.selection-map-node > strong {
  min-width: 0;
  overflow: hidden;
  font-size: 0.75rem;
  font-weight: 560;
  line-height: 1.38;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selection-map-node-title-button {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 560;
  line-height: 1.38;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selection-map-node-title-button:hover,
.selection-map-node-title-button:focus-visible {
  color: var(--text);
}

.selection-map-node-source {
  grid-column: 1 / -1;
  display: -webkit-box;
  min-width: 0;
  max-height: 3.9em;
  padding: 5px 6px;
  overflow: hidden;
  border: 0;
  border-radius: 5px;
  background: color-mix(in srgb, var(--surface) 58%, transparent);
  color: var(--text-dim);
  cursor: pointer;
  font: inherit;
  font-size: 0.64rem;
  line-height: 1.45;
  text-align: left;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  user-select: text;
}

.selection-map-node-source:hover,
.selection-map-node-source:focus-visible {
  background: var(--surface);
  color: var(--text);
}

.selection-map-node.is-selected .selection-map-node-source {
  max-height: 6.8em;
  -webkit-line-clamp: 5;
}

.selection-map-node-source > small {
  margin-right: 5px;
  color: var(--text-faint);
  font-size: 0.58rem;
}

.selection-map-node-form {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
}

.selection-map-node-form :is(input, textarea) {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid var(--reader-panel-border);
  border-radius: 5px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.68rem;
}

.selection-map-node-form input {
  min-height: 28px;
  padding: 3px 6px;
  font-weight: 560;
}

.selection-map-node-form textarea {
  min-height: 58px;
  padding: 5px 6px;
  line-height: 1.4;
  resize: vertical;
}

.selection-map-node-form footer {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
}

.selection-map-node-form footer button {
  min-height: 24px;
  padding: 1px 7px;
  border: 1px solid var(--reader-panel-border);
  border-radius: 5px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.62rem;
}

.selection-map-node.is-editing {
  z-index: 4;
  width: 252px;
  cursor: default;
  user-select: text;
}

.selection-map-node > small {
  color: var(--text-dim);
  font-size: 0.58rem;
}

.selection-map-node > button,
.selection-map-node-actions button {
  min-width: 24px;
  min-height: 22px;
  padding: 1px 4px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-dim);
  font-size: 0.62rem;
  line-height: 1;
}

.selection-map-node > button:hover,
.selection-map-node > button:focus-visible,
.selection-map-node-actions button:hover,
.selection-map-node-actions button:focus-visible {
  background: var(--surface);
  color: var(--text);
}

.selection-map-node-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 3px;
  padding-top: 3px;
  border-top: 1px solid color-mix(in srgb, var(--reader-panel-border) 68%, transparent);
}

.selection-map-node.is-root {
  border-color: color-mix(in srgb, var(--text) 50%, var(--reader-panel-border));
  background: color-mix(in srgb, var(--surface) 72%, var(--bg));
}

.selection-map-node.is-selected {
  border-color: var(--text);
  box-shadow: 0 0 0 1px var(--text), 0 7px 18px rgba(0, 0, 0, 0.1);
}

/* A card keeps one visual shape while its title is edited in place. */
.selection-map-node {
  display: block;
  width: var(--selection-map-node-width, 208px);
  min-height: 0;
  box-sizing: border-box;
  padding: 8px 10px 30px;
  cursor: grab;
  transition: border-color 110ms ease, box-shadow 110ms ease, opacity 110ms ease;
}

.selection-map-node-heading {
  position: relative;
  display: block;
  min-height: 16px;
  padding-right: 38px;
}

.selection-map-node-page {
  position: absolute;
  top: 1px;
  right: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-faint);
  font-size: 0.55rem;
  font-weight: 480;
  letter-spacing: 0.01em;
  cursor: pointer;
}

.selection-map-node-title {
  display: block;
  min-width: 0;
  min-height: 1.35em;
  outline: 0;
  color: var(--text);
  cursor: text;
  font-size: 0.75rem;
  font-weight: 590;
  line-height: 1.38;
  overflow-wrap: anywhere;
  touch-action: auto;
  user-select: text;
  white-space: pre-wrap;
}

.selection-map-node-title:focus {
  border-radius: 3px;
  background: color-mix(in srgb, var(--surface) 44%, transparent);
}

.selection-map-node-title:empty::before {
  content: "";
}

.selection-map-node.is-selected .selection-map-node-title:empty::before,
.selection-map-node-title:focus:empty::before {
  content: attr(data-placeholder);
  color: var(--text-faint);
  font-weight: 440;
  pointer-events: none;
}

.selection-map-node-source {
  display: -webkit-box;
  width: 100%;
  min-width: 0;
  max-height: 6.9em;
  box-sizing: border-box;
  margin-top: 5px;
  padding: 4px 0 0;
  overflow: hidden;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--reader-panel-border) 58%, transparent);
  border-radius: 0;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font: inherit;
  font-size: 0.66rem;
  line-height: 1.48;
  text-align: left;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  user-select: text;
}

.selection-map-node-body {
  display: block;
  max-height: none;
  outline: 0;
  cursor: text;
  overflow-wrap: anywhere;
  touch-action: auto;
  white-space: pre-wrap;
  -webkit-line-clamp: initial;
}

.selection-map-node-body:focus {
  color: var(--text);
}

.selection-map-node-origin {
  display: -webkit-box;
  width: 100%;
  max-height: 7.2em;
  box-sizing: border-box;
  margin-top: 5px;
  padding: 5px 0 0;
  overflow: hidden;
  border: 0;
  border-top: 1px dashed color-mix(in srgb, var(--reader-panel-border) 70%, transparent);
  border-radius: 0;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  font: inherit;
  font-size: 0.61rem;
  line-height: 1.42;
  text-align: left;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

.selection-map-node-origin:hover,
.selection-map-node-origin:focus-visible {
  color: var(--text-dim);
  outline: 0;
}

.selection-map-node-body:empty::before,
.selection-map-node-comment > span:empty::before {
  content: attr(data-placeholder);
  color: var(--text-faint);
  pointer-events: none;
}

.selection-map-node-comment {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px;
  margin-top: 5px;
  padding: 5px 3px 5px 7px;
  border-left: 2px solid color-mix(in srgb, var(--text-dim) 34%, transparent);
  border-radius: 0 5px 5px 0;
  background: color-mix(in srgb, var(--surface) 40%, transparent);
  color: var(--text-dim);
  font-size: 0.62rem;
  line-height: 1.45;
}

.selection-map-node-comment > span {
  min-height: 1.45em;
  outline: 0;
  cursor: text;
  overflow-wrap: anywhere;
  user-select: text;
  white-space: pre-wrap;
}

.selection-map-node-comment > button {
  align-self: start;
  width: 20px;
  height: 20px;
  padding: 3px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-faint);
}

.selection-map-node-comment > button svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
}

.selection-map-node-comment > button:hover,
.selection-map-node-comment > button:focus-visible {
  background: var(--surface);
  color: var(--text);
}

.selection-map-node.is-returned {
  animation: selection-map-node-returned 1.35s ease-out 1;
}

@keyframes selection-map-node-returned {
  0%, 30% { box-shadow: 0 0 0 3px color-mix(in srgb, #4f82b8 52%, transparent), 0 7px 18px rgba(0, 0, 0, 0.1); }
}

.selection-map-node-source:hover,
.selection-map-node-source:focus-visible {
  background: transparent;
  color: var(--text);
}

.selection-map-node.has-no-title .selection-map-node-source:first-of-type {
  margin-top: 1px;
  padding-top: 0;
  border-top: 0;
  color: var(--text);
  font-size: 0.7rem;
}

.selection-map-node-artifact {
  display: -webkit-box;
  width: 100%;
  box-sizing: border-box;
  margin-top: 5px;
  padding: 4px 0 0;
  overflow: hidden;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--reader-panel-border) 58%, transparent);
  border-radius: 0;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font: inherit;
  font-size: 0.66rem;
  line-height: 1.48;
  text-align: left;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

.selection-map-node-artifact.is-image {
  display: block;
  height: 126px;
  padding-top: 6px;
}

.selection-map-node-artifact.is-image img {
  display: block;
  width: 100%;
  height: 118px;
  border-radius: 5px;
  object-fit: contain;
  background: color-mix(in srgb, var(--surface) 74%, transparent);
}

.selection-map-node-artifact:hover,
.selection-map-node-artifact:focus-visible,
.selection-map-node-page:hover,
.selection-map-node-page:focus-visible {
  background: transparent;
  color: var(--text);
}

.selection-map-node-actions {
  position: absolute;
  right: 5px;
  bottom: 5px;
  z-index: 2;
  display: flex;
  gap: 1px;
  padding: 1px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  opacity: 1;
  transition: background 100ms ease;
}

.selection-map-node:hover .selection-map-node-actions,
.selection-map-node:focus-within .selection-map-node-actions,
.selection-map-node.is-selected .selection-map-node-actions {
  background: color-mix(in srgb, var(--reader-panel-bg) 92%, transparent);
}

.selection-map-node-actions button {
  min-width: 22px;
  min-height: 20px;
  padding: 1px 4px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-dim);
  font-size: 0.62rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 100ms ease;
}

.selection-map-node-actions .selection-map-node-delete {
  opacity: 0.68;
  pointer-events: auto;
}

.selection-map-node:hover .selection-map-node-actions button,
.selection-map-node:focus-within .selection-map-node-actions button,
.selection-map-node.is-selected .selection-map-node-actions button {
  opacity: 1;
  pointer-events: auto;
}

.selection-map-node-actions button svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.selection-map-node-actions .selection-map-node-delete:hover,
.selection-map-node-actions .selection-map-node-delete:focus-visible {
  color: light-dark(#9b2525, #f0a0a0);
}

.selection-map-node.is-selected {
  border-color: color-mix(in srgb, var(--text) 76%, var(--reader-panel-border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 42%, transparent), 0 7px 18px rgba(0, 0, 0, 0.08);
}

.selection-map-node.is-saving {
  border-color: color-mix(in srgb, #c18b31 55%, var(--reader-panel-border));
}

.selection-map-node.is-save-error {
  border-color: #b34a4a;
}

.selection-map-node.has-color-blue { box-shadow: inset 3px 0 #4f82b8, 0 4px 12px rgba(0, 0, 0, 0.06); }
.selection-map-node.has-color-green { box-shadow: inset 3px 0 #4f8d68, 0 4px 12px rgba(0, 0, 0, 0.06); }
.selection-map-node.has-color-amber { box-shadow: inset 3px 0 #b8893f, 0 4px 12px rgba(0, 0, 0, 0.06); }
.selection-map-node.has-color-rose { box-shadow: inset 3px 0 #ae626c, 0 4px 12px rgba(0, 0, 0, 0.06); }
.selection-map-node.has-color-violet { box-shadow: inset 3px 0 #7c69ae, 0 4px 12px rgba(0, 0, 0, 0.06); }
.selection-map-node[class*="has-color-"].is-selected {
  border-color: color-mix(in srgb, var(--text) 76%, var(--reader-panel-border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 42%, transparent), 0 7px 18px rgba(0, 0, 0, 0.08);
}

.selection-map-node.is-drag-armed,
.selection-map-node.is-dragging {
  cursor: grabbing;
}

.selection-map-marquee {
  position: absolute;
  z-index: 5;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, #3976af 78%, transparent);
  border-radius: 3px;
  background: color-mix(in srgb, #5f9fd4 13%, transparent);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .selection-map-task-status.is-working > i { animation: none; }
}

.selection-map-node.is-drop-target {
  border-color: #3976af;
  box-shadow: 0 0 0 2px rgba(57, 118, 175, 0.28);
}

.selection-map-node.is-dragging {
  z-index: 3;
  cursor: grabbing;
  opacity: 0.8;
  transition: none;
}

.selection-map-zoom {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  margin-right: 3px;
  color: var(--text-dim);
  font-size: 0.62rem;
}

.selection-map-zoom output {
  min-width: 34px;
  text-align: center;
}

.reader-panel-resize-handle {
  position: absolute;
  right: 3px;
  bottom: 3px;
  z-index: 8;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: linear-gradient(135deg, transparent 52%, color-mix(in srgb, var(--text-dim) 62%, transparent) 53% 57%, transparent 58% 67%, color-mix(in srgb, var(--text-dim) 46%, transparent) 68% 72%, transparent 73%);
  color: transparent;
  cursor: nwse-resize;
  opacity: 0.62;
  touch-action: none;
}

.reader-panel-resize-handle:hover,
.reader-panel-resize-handle:focus-visible {
  background-color: var(--surface);
  opacity: 1;
}

.read-aloud-dock.is-dragging .read-aloud-status,
.selection-map-dock.is-dragging > header,
.library-manager-dock.is-dragging > header,
.paragraph-visualization-dock.is-dragging > header,
.section-lesson-dock.is-dragging > header {
  cursor: grabbing;
}

.read-aloud-dock.is-dragging,
.read-aloud-dock.is-resizing,
.selection-map-dock.is-dragging,
.selection-map-dock.is-resizing,
.library-manager-dock.is-dragging,
.library-manager-dock.is-resizing,
.paragraph-visualization-dock.is-dragging,
.paragraph-visualization-dock.is-resizing,
.section-lesson-dock.is-dragging,
.section-lesson-dock.is-resizing {
  transition: none;
  user-select: none;
}

.resource-dock {
  position: fixed;
  top: 112px;
  left: calc(100vw - 714px);
  z-index: 34;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
  width: min(680px, calc(100vw - 48px));
  height: min(68vh, 560px);
  min-width: min(360px, calc(100vw - 24px));
  min-height: min(260px, calc(100vh - 24px));
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  padding: 12px;
  overflow: hidden;
  resize: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(18px);
  opacity: 1;
  transform: translateY(0);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
}

.resource-dock-head {
  cursor: grab;
  user-select: none;
}

.resource-dock.is-dragging,
.resource-dock.is-resizing {
  transition: none;
  user-select: none;
}

.resource-dock.is-dragging .resource-dock-head {
  cursor: grabbing;
}

.resource-dock.is-dragging iframe,
.resource-dock.is-resizing iframe {
  pointer-events: none;
}

.resource-dock.is-hidden {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px);
}

.resource-dock-frame {
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--border-dim);
  background: var(--bg);
}

.resource-dock iframe {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  background: var(--bg);
}

.resource-media {
  display: grid;
  place-items: center;
  background: #050505;
}

.resource-media img,
.resource-media video {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

.resource-source-preview {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  padding: 12px;
  overflow: auto;
}

.resource-source-preview dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.resource-source-preview dl > div {
  min-width: 0;
}

.resource-source-preview dt {
  color: var(--text-dim);
  font-size: 0.72rem;
}

.resource-source-preview dd {
  margin: 2px 0 0;
  color: var(--text);
  font-size: 0.86rem;
  line-height: 1.45;
}

.resource-source-preview p {
  margin: 0;
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.7;
}

.resource-source-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.resource-source-actions a,
.resource-source-actions button {
  min-height: 28px;
  padding: 2px 8px;
  border: 1px solid var(--border-dim);
  background: transparent;
  color: var(--text-dim);
  font-size: 0.78rem;
  line-height: 1.5;
}

.resource-source-actions a:hover,
.resource-source-actions a:focus-visible,
.resource-source-actions button:hover,
.resource-source-actions button:focus-visible {
  border-color: var(--border);
  color: var(--text);
  text-decoration: none;
}

.resource-search-preview {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 8px;
  padding: 10px;
}

.resource-search-preview p {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.8rem;
  line-height: 1.5;
}

.resource-text-action {
  margin: 10px 0 0;
}

.resource-search-actions,
.tutor-handoff {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.resource-search-actions a,
.resource-text-action a,
.resource-search-actions button,
.tutor-handoff button {
  min-height: 28px;
  padding: 2px 8px;
  border: 1px solid var(--border-dim);
  background: transparent;
  color: var(--text-dim);
  font-size: 0.78rem;
  line-height: 1.5;
}

.resource-search-actions a:hover,
.resource-text-action a:hover,
.resource-text-action a:focus-visible,
.resource-search-actions a:focus-visible,
.resource-search-actions button:hover,
.resource-search-actions button:focus-visible,
.tutor-handoff button:hover,
.tutor-handoff button:focus-visible {
  border-color: var(--border);
  color: var(--text);
  text-decoration: none;
}

.resource-dock-url {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.74rem;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tutor-dock {
  position: fixed;
  top: 120px;
  left: calc(100vw - 458px);
  z-index: 36;
  display: grid;
  grid-template-rows: auto auto auto auto auto minmax(0, 1fr);
  gap: 8px;
  width: min(390px, calc(100vw - 32px));
  height: min(620px, calc(100vh - 52px));
  min-width: min(340px, calc(100vw - 24px));
  min-height: min(320px, calc(100vh - 24px));
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  padding: 12px;
  overflow: hidden;
  resize: both;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.13);
  backdrop-filter: blur(18px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
}

.tutor-dock-head {
  cursor: grab;
  user-select: none;
}

.tutor-dock.is-dragging {
  transition: none;
}

.tutor-dock.is-dragging .tutor-dock-head {
  cursor: grabbing;
}

.tutor-dock.is-pinned {
  z-index: 120;
}

.tutor-dock.is-hidden {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px);
}

.tutor-dock-head,
.question-card-head,
.question-card-actions,
.tutor-input-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tutor-dock-head strong {
  font-size: 0.9rem;
  font-weight: 600;
}

.dock-head-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.tutor-dock-head button,
.question-card-actions button,
.question-card-review-link,
.tutor-prompts button,
.tutor-input-row button,
.question-filters button,
.load-more {
  min-height: 30px;
  padding: 2px 9px;
  border: 1px solid var(--border-dim);
  background: transparent;
  color: var(--text-dim);
  font-size: 0.8rem;
  text-decoration: none;
}

.tutor-dock-head button:hover,
.question-card-actions button:hover,
.question-card-review-link:hover,
.tutor-prompts button:hover,
.tutor-input-row button:hover,
.question-filters button:hover,
.load-more:hover {
  border-color: var(--border);
  color: var(--text);
}

.tutor-context small {
  color: var(--text-dim);
  font-size: 0.76rem;
  line-height: 1.4;
}

.tutor-context-preview {
  display: grid;
  gap: 6px;
  min-height: 0;
  max-height: 132px;
  overflow: auto;
  padding: 7px 8px;
  border: 1px solid var(--border-dim);
  color: var(--text-dim);
  font-size: 0.78rem;
  line-height: 1.5;
}

.tutor-context-preview[hidden] {
  display: none;
}

.tutor-context-preview img {
  max-width: 100%;
  max-height: 92px;
  object-fit: contain;
  background: #050505;
}

.gpt-context-preview {
  display: grid;
  gap: 6px;
  min-height: 0;
  max-height: 150px;
  overflow: auto;
  padding: 7px 8px;
  border: 1px solid var(--border-dim);
  color: var(--text-dim);
  font-size: 0.78rem;
  line-height: 1.5;
}

.gpt-context-preview[hidden] {
  display: none;
}

.gpt-context-preview img {
  max-width: 100%;
  max-height: 96px;
  object-fit: contain;
  background: #050505;
}

.gpt-context-quote {
  margin: 0;
  padding: 7px 8px;
  border-left: 2px solid color-mix(in srgb, var(--border) 72%, transparent);
  color: var(--text-dim);
  background: color-mix(in srgb, var(--surface) 46%, transparent);
}

.gpt-context-quote.is-image {
  display: grid;
  gap: 6px;
  border-left-width: 0;
}

.gpt-context-composer {
  display: grid;
  gap: 5px;
  min-height: 0;
}

.gpt-context-composer span {
  color: var(--text-dim);
  font-size: 0.76rem;
}

.gpt-context-composer textarea {
  width: 100%;
  min-height: 68px;
  max-height: 116px;
  resize: vertical;
  padding: 7px 8px;
  border: 1px solid var(--border-dim);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  line-height: 1.5;
}

.option-review-text {
  margin: 0 0 6px;
  color: var(--text);
  font-size: 0.84rem;
  line-height: 1.5;
}

.tutor-messages {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 120px;
  overflow: auto;
  padding: 4px 0;
}

.tutor-message {
  margin: 0;
  padding: 7px 8px;
  border: 1px solid var(--border-dim);
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.55;
}

.tutor-message.user {
  border-color: color-mix(in srgb, var(--border) 70%, var(--border-dim));
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.tutor-message.is-pending {
  color: var(--text-dim);
}

.question-resource-dock {
  z-index: 41;
}

.question-note-dock {
  z-index: 43;
}

.tutor-message.user {
  justify-self: end;
  max-width: 86%;
  background: color-mix(in srgb, var(--surface) 56%, transparent);
}

.tutor-message.assistant {
  justify-self: start;
}

.tutor-message.is-pending {
  color: var(--text-dim);
}

.tutor-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tutor-input-row input {
  min-width: 0;
  min-height: 32px;
  padding: 4px 8px;
}

.floating-note {
  display: grid;
  gap: 5px;
  min-height: 0;
}

.floating-note span,
.floating-note-status {
  color: var(--text-dim);
  font-size: 0.76rem;
}

.floating-note textarea {
  width: 100%;
  min-height: 160px;
  height: 100%;
  resize: none;
  padding: 8px;
  border: 1px solid var(--border-dim);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.84rem;
  line-height: 1.55;
}

.note-dock {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.selection-toolbar {
  position: fixed;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 38px;
  padding: 3px;
  border: 1px solid color-mix(in srgb, var(--border-dim) 78%, var(--text-dim));
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg) 96%, var(--surface));
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.22), 0 1px 0 color-mix(in srgb, var(--text) 7%, transparent) inset;
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
  backdrop-filter: blur(18px) saturate(1.12);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -4px);
  transition: opacity 140ms ease, transform 140ms ease;
}

.selection-toolbar.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.selection-toolbar button {
  display: inline-grid;
  place-items: center;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-dim);
  line-height: 1;
  transition: background 120ms ease, color 120ms ease, transform 120ms ease;
}

.selection-toolbar button:hover,
.selection-toolbar button:focus-visible {
  background: color-mix(in srgb, var(--text) 9%, transparent);
  color: var(--text);
}

.selection-toolbar button:active {
  transform: scale(0.94);
}

.selection-toolbar button:focus-visible {
  outline: 2px solid color-mix(in srgb, #4f91d8 76%, var(--text));
  outline-offset: 1px;
}

.selection-toolbar button svg,
.selection-capture-hint svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.selection-toolbar button.is-primary {
  background: color-mix(in srgb, #3279c9 18%, transparent);
  color: var(--text);
}

.selection-toolbar-question-action {
  margin-left: 2px;
  color: color-mix(in srgb, #6faef0 72%, var(--text)) !important;
}

.selection-toolbar [data-retry-highlight-range] {
  color: color-mix(in srgb, #d96a6a 72%, var(--text));
}

.selection-highlight-colors {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
}

.selection-toolbar .highlight-color-swatch,
.pdf-learning-anchor-note .highlight-color-swatch {
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
  padding: 0;
  border: 1px solid var(--highlight-swatch-line);
  border-radius: 50%;
  background: var(--highlight-swatch);
}

.selection-toolbar .highlight-color-swatch[aria-pressed="true"],
.pdf-learning-anchor-note .highlight-color-swatch[aria-pressed="true"] {
  outline: 1.5px solid var(--text);
  outline-offset: 1.5px;
}

.selection-capture-hint {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 30px;
  color: var(--text-dim);
  opacity: 0.72;
}

.selection-send-status {
  max-width: 132px;
  overflow: hidden;
  color: var(--text-faint);
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selection-send-status:empty {
  display: none;
}

.selection-capture-box {
  position: fixed;
  z-index: 78;
  box-sizing: border-box;
  border: 1px solid rgba(75, 139, 224, 0.82);
  background: rgba(111, 171, 239, 0.1);
  pointer-events: none;
}

.selection-capture-box.is-selected {
  position: absolute;
  z-index: 5;
  border-color: rgba(58, 132, 222, 0.9);
  background: rgba(95, 164, 238, 0.18);
  box-shadow: inset 0 0 0 1px rgba(235, 247, 255, 0.28);
}

.questions-layout {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 20px 80px;
}

.questions-head {
  max-width: 720px;
  margin-bottom: 22px;
}

.questions-head p {
  margin: 0;
  color: var(--text-dim);
  line-height: 1.65;
}

.question-stats {
  display: grid;
  gap: 0;
  margin: 18px 0;
  border-top: 1px solid var(--border-dim);
  border-bottom: 1px solid var(--border-dim);
}

.question-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.question-stats-grid button {
  display: grid;
  gap: 2px;
  padding: 12px 10px;
  border: 0;
  border-right: 1px solid var(--border-dim);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.question-stats-grid button:last-child {
  border-right: 0;
}

.question-stats-grid button:hover,
.question-stats-grid button:focus-visible {
  background: color-mix(in srgb, var(--surface) 56%, transparent);
}

.question-stats-grid strong {
  font-size: 1.1rem;
  font-weight: 600;
}

.question-stats-grid span,
.question-stats-grid small {
  color: var(--text-dim);
  font-size: 0.78rem;
}

.question-stats-grid small {
  font-size: 0.72rem;
}

.recent-attempts {
  display: grid;
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid var(--border-dim);
}

.recent-attempts-head {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
}

.recent-attempts-head::-webkit-details-marker {
  display: none;
}

.recent-attempts-head::after {
  content: "展开";
  color: var(--text-dim);
  font-size: 0.72rem;
}

.recent-attempts[open] .recent-attempts-head::after {
  content: "收起";
}

.recent-attempts-head strong {
  font-size: 0.86rem;
  font-weight: 600;
}

.recent-attempts-head small,
.recent-attempt-list p {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.76rem;
}

.recent-attempt-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 12px;
  padding-top: 8px;
}

.recent-attempt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.recent-attempt-main {
  display: grid;
  min-width: 0;
  min-height: 0;
  padding: 5px 0;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.recent-attempt-main strong {
  font-size: 0.82rem;
  font-weight: 600;
}

.recent-attempt-main span,
.recent-attempt-main small {
  overflow: hidden;
  color: var(--text-dim);
  font-size: 0.72rem;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recent-attempt.is-wrong .recent-attempt-main span {
  color: color-mix(in srgb, #a33 70%, var(--text-dim));
}

.recent-attempt-delete {
  min-height: 24px;
  padding: 1px 7px;
  border: 1px solid color-mix(in srgb, var(--border-dim) 76%, transparent);
  background: transparent;
  color: var(--text-dim);
  font-size: 0.72rem;
}

.recent-attempt-main:hover strong,
.recent-attempt-main:focus-visible strong,
.recent-attempt-delete:hover,
.recent-attempt-delete:focus-visible {
  color: var(--text);
}

.practice-entry {
  display: grid;
  gap: 12px;
  margin: 18px 0 22px;
  padding: 14px 0;
  border-top: 1px solid var(--border-dim);
  border-bottom: 1px solid var(--border-dim);
}

.practice-entry-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.practice-entry-head strong {
  font-size: 0.98rem;
  font-weight: 600;
}

.practice-entry-head small,
.practice-entry-lane p,
.practice-entry-lane button small {
  color: var(--text-dim);
  font-size: 0.72rem;
}

.practice-entry-grid,
.practice-catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.practice-catalog-grid {
  grid-template-columns: minmax(170px, 0.82fr) minmax(300px, 1.52fr) minmax(210px, 1.05fr);
  align-items: start;
}

.practice-entry-lane {
  min-width: 0;
}

.practice-entry-lane h2 {
  margin: 0 0 8px;
  color: var(--text-dim);
  font-size: 0.78rem;
  font-weight: 500;
}

.practice-entry-lane > div {
  display: grid;
  gap: 5px;
  align-content: start;
  max-height: 210px;
  overflow: auto;
  padding-right: 2px;
}

.practice-entry-lane button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 30px;
  padding: 3px 0;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border-dim) 70%, transparent);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.practice-entry-lane button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.practice-entry-lane.is-years button span {
  min-width: 4.5ch;
  overflow: visible;
  font-variant-numeric: tabular-nums;
  text-overflow: clip;
}

.practice-entry-lane button small {
  overflow: hidden;
  max-width: 9ch;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.practice-entry-lane.is-years button small {
  max-width: 6ch;
}

.practice-entry-lane button.is-weak small {
  color: var(--text);
}

.practice-entry-lane button.is-weak {
  border-bottom-color: color-mix(in srgb, var(--border) 42%, var(--border-dim));
}

.practice-entry-lane button:hover,
.practice-entry-lane button:focus-visible {
  border-bottom-color: var(--border);
  color: var(--link-blue);
}

.practice-entry-group {
  display: grid;
  gap: 4px;
  padding: 0 0 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-dim) 52%, transparent);
}

.practice-entry-group:last-child {
  border-bottom: 0;
}

.practice-entry-group-title {
  position: sticky;
  top: 0;
  z-index: 1;
  font-weight: 600;
  backdrop-filter: blur(8px);
}

.practice-entry-group-title span {
  color: var(--text);
}

.practice-entry-more {
  color: var(--text-dim);
  opacity: 0.78;
}

.practice-entry-more span {
  font-weight: 400;
}

.coverage-panel {
  display: grid;
  gap: 8px;
  margin: 16px 0 20px;
  padding: 8px 0;
  border-top: 1px solid var(--border-dim);
  border-bottom: 1px solid var(--border-dim);
}

.coverage-summary {
  display: grid;
  gap: 10px;
}

.coverage-summary summary {
  display: flex;
  gap: 14px;
  align-items: baseline;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
}

.coverage-summary summary::-webkit-details-marker {
  display: none;
}

.coverage-summary summary::after {
  content: "展开";
  color: var(--text-dim);
  font-size: 0.72rem;
}

.coverage-summary[open] summary::after {
  content: "收起";
}

.coverage-summary summary strong {
  font-size: 0.86rem;
  font-weight: 600;
}

.coverage-summary summary span,
.coverage-summary > small {
  color: var(--text-dim);
  font-size: 0.76rem;
}

.coverage-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.coverage-panel-head strong,
.coverage-queue > span,
.coverage-years > span,
.coverage-boundary > span,
.coverage-meter span {
  font-size: 0.78rem;
  font-weight: 600;
}

.coverage-panel-head small,
.coverage-panel-loading,
.coverage-meter small,
.coverage-years small,
.coverage-boundary small,
.coverage-queue small {
  color: var(--text-dim);
  font-size: 0.76rem;
}

.coverage-panel-loading {
  margin: 0;
}

.coverage-panel-grid {
  display: grid;
  grid-template-columns: 0.8fr 0.9fr minmax(160px, 1fr) minmax(220px, 1.35fr) minmax(180px, 1fr);
  gap: 14px;
}

.coverage-meter {
  display: grid;
  gap: 3px;
  align-content: start;
  min-width: 0;
}

.coverage-meter strong {
  font-size: 1.35rem;
  font-weight: 600;
}

.coverage-years,
.coverage-boundary,
.coverage-queue {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.coverage-years > div,
.coverage-boundary > div,
.coverage-queue > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.coverage-queue > div,
.coverage-boundary > div {
  display: grid;
  gap: 6px;
}

.coverage-years button,
.coverage-boundary button,
.coverage-queue button {
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--border-dim) 72%, transparent);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.coverage-years button {
  padding: 3px 7px;
  font: inherit;
}

.coverage-queue button,
.coverage-boundary button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px;
  align-items: baseline;
  padding: 4px 7px;
  font: inherit;
  text-align: left;
}

.coverage-queue button small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coverage-boundary button strong {
  font-size: 0.78rem;
  font-weight: 500;
}

.coverage-clear {
  line-height: 1.65;
}

.coverage-years button:hover,
.coverage-years button:focus-visible,
.coverage-boundary button:hover,
.coverage-boundary button:focus-visible,
.coverage-queue button:hover,
.coverage-queue button:focus-visible {
  border-color: var(--border);
  background: color-mix(in srgb, var(--surface) 48%, transparent);
  color: var(--link-blue);
}

.question-filters {
  display: grid;
  grid-template-columns: minmax(160px, 1.7fr) repeat(8, minmax(86px, 1fr)) auto;
  gap: 8px;
  align-items: end;
  margin: 20px 0 16px;
}

.question-filters label:first-child {
  grid-column: auto;
}

.question-filters label {
  display: grid;
  gap: 4px;
}

.question-filters span {
  color: var(--text-dim);
  font-size: 0.76rem;
}

.question-filters input,
.question-filters select {
  min-height: 34px;
  padding: 4px 8px;
}

.question-list-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 14px;
  min-height: 20px;
  margin: -4px 0 12px;
  color: var(--text-dim);
  font-size: 0.78rem;
  line-height: 1.55;
}

.question-list-summary small {
  color: var(--text-dim);
  font-size: 0.74rem;
}

.question-filter-progress {
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
  padding: 1px 6px;
  border: 1px solid var(--border-dim);
  color: var(--text-dim);
}

.question-filter-progress b {
  color: var(--text);
  font-weight: 500;
}

.question-list {
  display: grid;
  gap: 12px;
}

.question-card {
  display: grid;
  gap: 10px;
  padding: 14px 0;
  border-top: 1px solid var(--border-dim);
}

.question-card:last-child {
  border-bottom: 1px solid var(--border-dim);
}

.question-card-head strong {
  display: block;
  font-size: 0.96rem;
  font-weight: 600;
}

.question-card-head small,
.question-card-head > span,
.question-card-actions small,
.question-browse-meta,
.question-source-empty,
.question-list-empty {
  color: var(--text-dim);
  font-size: 0.78rem;
}

.question-browse-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: -3px;
}

.question-filter-trail {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.question-filter-trail + .question-filter-trail::before {
  content: "/";
  margin-right: 10px;
  color: color-mix(in srgb, var(--text-dim) 62%, transparent);
}

.question-card-stem {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.65;
}

.b-type-group {
  display: grid;
  gap: 7px;
  padding: 8px 0;
  border-top: 1px solid color-mix(in srgb, var(--border-dim) 72%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border-dim) 72%, transparent);
}

.b-type-group-head,
.b-type-group-list span {
  display: flex;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
}

.b-type-group-head strong {
  font-size: 0.82rem;
  font-weight: 600;
}

.b-type-group-head small,
.b-type-group-list {
  color: var(--text-dim);
}

.b-type-group-list {
  display: grid;
  gap: 5px;
  font-size: 0.78rem;
  line-height: 1.45;
}

.b-type-group-list span {
  justify-content: flex-start;
  padding-left: 8px;
  border-left: 1px solid color-mix(in srgb, var(--border-dim) 88%, transparent);
}

.b-type-group-list span.is-current {
  border-left-color: var(--border);
  color: var(--text);
}

.b-type-group-list b {
  flex: 0 0 auto;
  font-weight: 600;
}

.b-type-practice-card {
  gap: 12px;
}

.b-type-shared-options {
  display: grid;
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid color-mix(in srgb, var(--border-dim) 72%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border-dim) 72%, transparent);
}

.b-type-shared-options > strong {
  font-size: 0.82rem;
  font-weight: 600;
}

.b-type-shared-options > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(156px, 1fr));
  gap: 6px 10px;
}

.b-type-shared-options span {
  display: flex;
  gap: 7px;
  align-items: baseline;
  min-width: 0;
  color: var(--text-dim);
  font-size: 0.82rem;
  line-height: 1.45;
}

.b-type-shared-options b {
  flex: 0 0 auto;
  color: var(--text);
  font-weight: 600;
}

.b-type-question-set {
  display: grid;
  gap: 9px;
}

.b-type-question-row {
  display: grid;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border-dim) 62%, transparent);
}

.b-type-question-row:last-child {
  border-bottom: 0;
}

.b-type-question-row-head {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
}

.b-type-question-row-head strong {
  font-size: 0.92rem;
  font-weight: 650;
}

.b-type-question-row-head small,
.b-type-row-result {
  color: var(--text-dim);
  font-size: 0.78rem;
}

.b-type-question-row p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
}

.b-type-answer-options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.b-type-answer-options .option {
  min-height: 36px;
  justify-content: center;
  padding: 6px;
  text-align: center;
}

.b-type-question-row.is-correct .b-type-row-result {
  color: var(--ok);
}

.b-type-question-row.is-wrong .b-type-row-result {
  color: var(--danger);
}

.b-type-study-summary {
  margin-top: 0;
}

.b-type-group-review {
  display: grid;
  gap: 14px;
}

.b-type-review-question {
  display: grid;
  gap: 9px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--border-dim) 70%, transparent);
}

.b-type-review-head {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
}

.b-type-review-head strong {
  font-size: 0.9rem;
  font-weight: 650;
}

.b-type-review-head span {
  color: var(--text-dim);
  font-size: 0.82rem;
}

.b-type-review-question > p {
  margin: 0;
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.55;
}

.readonly-chip {
  padding: 1px 7px;
  border: 1px solid color-mix(in srgb, var(--border-dim) 74%, transparent);
  color: var(--text-dim);
  font-size: 0.76rem;
  line-height: 1.45;
}

.question-card-options {
  display: grid;
  gap: 6px;
}

.question-card-feedback {
  display: grid;
  gap: 9px;
  padding: 10px 0 0;
  border-top: 1px solid var(--border-dim);
}

.question-card-feedback[hidden] {
  display: none;
}

.option-review {
  display: grid;
  gap: 0;
  border-top: 1px solid color-mix(in srgb, var(--border-dim) 58%, transparent);
}

.option-review-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  align-items: start;
  padding: 9px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border-dim) 58%, transparent);
}

.option-review-main {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
}

.option-review-main strong {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--border-dim);
  border-radius: 50%;
  color: var(--text-dim);
  font-size: 0.76rem;
  font-weight: 600;
}

.option-review-row.is-answer .option-review-main strong {
  border-color: var(--border);
  color: var(--text);
  background: color-mix(in srgb, var(--text) 7%, transparent);
}

.option-review-main p {
  margin: 0;
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.55;
}

.option-explanation-text {
  color: var(--text-dim);
}

.option-review-line {
  display: flex;
  min-width: 0;
  gap: 7px;
  align-items: baseline;
  overflow-wrap: anywhere;
  word-break: normal;
}

.option-evidence-row > .option-review-line {
  display: flex;
}

.option-verdict {
  flex: 0 0 auto;
  min-width: 2.4em;
  color: var(--text-dim);
  font-weight: 600;
}

.option-verdict.is-answer {
  color: var(--text);
}

.option-original-text {
  min-width: 0;
  color: var(--text);
}

.option-review-main .option-review-text,
.option-review-main p:not(.option-review-text) {
  grid-column: 2;
  min-width: 0;
}

.option-review-sources {
  justify-content: start;
  max-width: none;
  padding-left: 32px;
  margin-top: 0;
}

.option-review-empty {
  color: var(--text-dim);
  font-size: 0.76rem;
  line-height: 1.8;
  white-space: nowrap;
}

.question-network {
  display: grid;
  gap: 7px;
  padding: 2px 0 4px;
}

.question-network-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--text-dim);
  cursor: pointer;
  list-style: none;
}

.question-network-head::-webkit-details-marker {
  display: none;
}

.question-network-head strong {
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
}

.question-network-head span {
  font-size: 0.74rem;
}

.question-network-list {
  display: grid;
  gap: 0;
  border-top: 1px solid color-mix(in srgb, var(--border-dim) 58%, transparent);
}

.question-network-list button {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  width: 100%;
  min-height: 34px;
  padding: 6px 0;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border-dim) 58%, transparent);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease;
}

.question-network-list button:hover,
.question-network-list button:focus-visible {
  border-bottom-color: var(--border);
  color: var(--link-blue);
}

.question-network-list span {
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}

.question-network-list small {
  color: var(--text-dim);
  font-size: 0.74rem;
  white-space: nowrap;
}

.question-network-list em {
  min-width: 0;
  overflow: hidden;
  color: var(--text-dim);
  font-size: 0.78rem;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.question-card-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-top: 2px;
}

.question-card-nav button {
  min-height: 36px;
  border: 1px solid var(--border-dim);
  background: transparent;
  color: var(--text-dim);
  font-size: 0.82rem;
  text-align: left;
}

.question-card-nav button:last-child {
  text-align: right;
}

.question-card-nav button:hover,
.question-card-nav button:focus-visible {
  border-color: var(--border);
  color: var(--text);
}

.tutor-inline-reply {
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border-dim) 60%, transparent);
  color: var(--text);
  font-size: 0.84rem;
  line-height: 1.6;
}

.load-more {
  margin: 18px 0 0;
}

details {
  margin-top: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111;
    --surface: #171717;
    --text: #ddd;
    --text-dim: #aaa;
    --link-blue: #b5b5ff;
    --border: #aaa;
    --border-dim: #444;
    --mark-bg: #3a3212;
    color-scheme: dark;
  }

  :root:not([data-theme="light"]):not([data-theme="dark"]) .learning-mermaid {
    --learning-mermaid-bg: #15191e;
    --learning-mermaid-node: #222b34;
    --learning-mermaid-text: #edf3f7;
    --learning-mermaid-line: #a9bdce;
    --learning-mermaid-border: #7891a6;
  }
}

@media (max-width: 1500px) {
  :root {
    --reader-left-rail: 150px;
    --reader-right-rail: 320px;
    --reader-edge: 18px;
  }
}

@media (max-width: 1180px) {
  :root {
    --reader-left-rail: 120px;
    --reader-right-rail: 286px;
    --reader-edge: 18px;
  }

  .practice-panel {
    width: min(330px, calc(100vw - 36px));
  }

  .reader-toc-panel {
    width: 100%;
  }

  .question-filters {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
  }

  .question-filters label:first-child {
    grid-column: span 3;
  }

  .question-list-summary {
    display: grid;
    justify-content: start;
  }

  .practice-entry-grid,
  .practice-catalog-grid {
    grid-template-columns: 1fr;
  }

  .practice-entry-lane > div {
    max-height: 180px;
  }

  .coverage-panel-grid {
    grid-template-columns: 1fr 1fr;
  }

  .coverage-years,
  .coverage-queue {
    grid-column: 1 / -1;
  }

  .option-review-row {
    grid-template-columns: 1fr;
  }

  .option-review-sources {
    justify-content: start;
    max-width: none;
    padding-left: 32px;
  }
}

@media (max-width: 860px) {
  :root {
    --reader-left-rail: 10px;
    --reader-right-rail: 10px;
    --reader-edge: 12px;
  }

  .limiter {
    padding-top: 82px;
  }

  .questions-layout {
    padding-top: 88px;
  }

  .kaoyan-header-wrap {
    min-height: 62px;
    padding: 14px 12px 11px;
  }

  .kaoyan-header {
    width: calc(100vw - 24px);
    margin: 0;
    gap: 12px;
  }

  .kaoyan-header ul {
    gap: 0 10px;
  }

  .kaoyan-header-wrap .mode-container {
    top: 16px;
    right: 12px;
    gap: 8px;
  }

  .reader-layout {
    padding-top: 82px;
  }

  .reader-activity-bar {
    left: 4px;
    width: 34px;
    padding: 3px;
  }

  .site-header {
    padding-bottom: 24px;
  }

  .site-frame .mode-container,
  .reader-site-tools {
    top: 24px;
    right: 18px;
  }

  .reader-site-frame .site-header {
    top: 18px;
    left: 18px;
    max-width: min(176px, calc(100vw - 112px));
  }

  .reader-site-tools {
    max-width: calc(100vw - 36px);
    gap: 8px;
  }

  .reader-site-tools .pdf-toolbar {
    flex-wrap: wrap;
    gap: 0 8px;
  }

  .book-switch {
    position: fixed;
    top: auto;
    left: 12px;
    z-index: 60;
    min-width: 0;
    min-height: 0;
    max-width: min(280px, calc(100vw - 24px));
    padding: 6px;
  }

  .reader-nav-books:hover .book-switch,
  .reader-nav-books:focus-within .book-switch {
    display: block;
  }

  .pdf-toolbar {
    flex: 1 1 auto;
    justify-content: flex-end;
    width: fit-content;
    gap: 0 8px;
    flex-wrap: wrap;
  }

  .pdf-toolbar button {
    min-height: 0;
  }

  .pdf-toolbar span {
    min-width: 0;
  }

  .reader-body {
    display: block;
    padding: 0 10px 80px;
  }

  .reader-toc {
    position: fixed;
    top: auto;
    right: auto;
    left: var(--reader-edge);
    bottom: 12px;
    width: auto;
  }

  body.practice-open .reader-toc {
    display: none;
  }

  .reader-toc-inner {
    justify-items: start;
  }

  .reader-toc-toggle {
    min-height: 34px;
    padding: 8px 11px;
  }

  .reader-toc-panel {
    position: absolute;
    right: auto;
    left: 0;
    bottom: calc(100% + 10px);
    width: min(82vw, 300px);
    max-height: min(60vh, 420px);
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
  }

  .reader-toc.is-open .reader-toc-panel,
  .reader-toc:hover .reader-toc-panel,
  .reader-toc:focus-within .reader-toc-panel {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .writing-floating-toc-close {
    display: block;
  }

  .toc-list {
    max-height: min(45vh, 300px);
  }

  .pdf-reader {
    padding: 12px 0 0;
  }

  .pdf-toolbar {
    gap: 8px;
  }

  .pdf-toolbar input {
    width: 3.3ch;
    min-height: 0;
  }

  .practice-panel {
    top: auto;
    right: 12px;
    bottom: 10px;
    left: 12px;
    width: auto;
    max-height: min(30vh, 240px);
    overflow: auto;
    border: 1px solid color-mix(in srgb, var(--border-dim) 78%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg) 68%, transparent);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.14);
    backdrop-filter: blur(18px);
  }

  .practice-panel.is-answering {
    max-height: min(38vh, 320px);
    padding: 0;
  }

  .practice-panel.is-learning {
    height: min(64dvh, 560px);
    max-height: none;
    overflow: hidden;
  }

  .practice-panel.is-learning .learning-sidebar {
    min-height: 0;
    grid-template-rows: minmax(0, 72fr) minmax(0, 28fr);
  }

  .practice-panel.is-learning .learning-dialogue {
    min-height: 0;
    max-height: none;
  }

  .practice-panel.is-learning .learning-message-box textarea {
    min-height: 36px;
  }

  .learning-ai-settings-form {
    top: 50%;
    max-height: min(72dvh, 560px);
  }

  .learning-conversation-bar > button,
  .learning-conversation-history > summary,
  .learning-ai-settings-toggle {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
  }

  .learning-conversation-menu,
  .learning-ai-feedback {
    top: 44px;
  }

  .practice-panel .question-rail {
    gap: 6px;
    padding: 8px 10px 10px;
  }

  .practice-panel .question-rail-head {
    padding: 0;
  }

  .practice-panel .question-comment-list {
    gap: 4px;
    max-height: 150px;
    overflow: auto;
  }

  .practice-panel .question-comment {
    height: 34px;
    min-height: 34px;
    padding: 4px 0 4px 8px;
    background: transparent;
  }

  .practice-panel .question-comment span {
    font-size: 0.78rem;
  }

  .practice-panel .question-comment small {
    font-size: 0.72rem;
  }

  .practice-panel .practice-mode {
    max-width: 240px;
  }

  .practice-panel.is-answering .practice-panel-head {
    margin: 0;
    padding: 8px 12px 7px;
    border-radius: 0;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
  }

  .practice-panel.is-answering .practice-mode {
    margin: 8px 12px 0;
  }

  .practice-panel.is-answering .practice-question {
    padding: 9px 12px 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
  }

  .practice-panel.is-answering .practice-question-title h2 {
    margin-bottom: 2px;
    font-size: 0.9rem;
  }

  .practice-panel.is-answering .relation-badges {
    margin: 0 0 5px;
  }

  .practice-panel.is-answering .relation-badges span {
    font-size: 0.68rem;
    line-height: 1.45;
  }

  .practice-panel.is-answering .practice-stem {
    display: block;
    margin: 5px 0 7px;
    overflow: visible;
    font-size: 0.86rem;
    line-height: 1.45;
  }

  .practice-panel.is-answering .practice-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  .practice-panel.is-answering .option {
    min-height: 32px;
    padding: 4px 6px;
    gap: 6px;
    font-size: 0.8rem;
    line-height: 1.35;
    background: color-mix(in srgb, var(--surface) 42%, transparent);
  }

  .practice-panel.is-answering .option strong {
    width: 19px;
    height: 19px;
    font-size: 0.7rem;
  }

  .practice-panel.is-answering .practice-actions {
    margin-top: 7px;
    gap: 8px;
  }

  .practice-panel.is-answering .submit-answer,
  .practice-panel.is-answering .question-study-tools > button {
    min-height: 26px;
    font-size: 0.74rem;
  }

  .practice-panel.is-answering .question-study-tools {
    margin-top: 7px;
    padding-top: 6px;
  }

  .practice-panel.is-answering .practice-feedback {
    max-height: 120px;
    overflow: auto;
  }

  .practice-panel.is-answering .practice-question-nav {
    gap: 6px;
    margin-top: 8px;
    padding-top: 7px;
  }

  .practice-panel.is-answering .practice-question-nav button {
    min-height: 30px;
    padding: 4px 7px;
  }

  .practice-panel.is-answering .practice-siblings {
    display: flex;
    gap: 6px;
    margin: 0 12px 10px;
    padding: 7px 0 0;
    overflow-x: auto;
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--border-dim) 58%, transparent);
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
  }

  .practice-panel.is-answering .practice-siblings .question-comment {
    flex: 0 0 150px;
    height: 36px;
    min-height: 36px;
  }

  .resource-dock {
    top: 70px !important;
    right: 12px;
    bottom: 12px;
    left: 12px !important;
    width: auto !important;
    min-width: 0;
    height: auto !important;
    resize: none;
  }

  .selection-capture-toggle {
    display: inline-grid;
    place-items: center;
  }

  body.selection-capture-armed .pdf-reader {
    cursor: crosshair;
  }

  .read-aloud-dock {
    top: 70px !important;
    right: 12px;
    bottom: 12px;
    left: 12px !important;
    width: auto !important;
    height: auto !important;
    max-height: min(48vh, 300px);
  }

  .selection-map-dock {
    top: 70px !important;
    right: 12px;
    bottom: 12px;
    left: 12px !important;
    width: auto !important;
    min-width: 0;
    height: auto !important;
    max-height: none;
    resize: none;
  }

  .paragraph-visualization-dock {
    top: 70px !important;
    right: 12px;
    bottom: 12px;
    left: 12px !important;
    width: auto !important;
    min-width: 0;
    height: auto !important;
    max-height: none;
  }

  .section-lesson-dock {
    top: 70px !important;
    right: 12px;
    bottom: 12px;
    left: 12px !important;
    width: auto !important;
    min-width: 0;
    height: auto !important;
    max-height: none;
  }

  .library-manager-dock {
    top: 70px !important;
    right: 12px;
    bottom: 12px;
    left: 12px !important;
    width: auto !important;
    min-width: 0;
    height: auto !important;
    max-height: none;
  }

  .selection-map-hint {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .reader-panel-resize-handle {
    display: none;
  }

  .tutor-dock {
    top: 70px !important;
    right: 12px;
    bottom: 12px;
    left: 12px !important;
    width: auto !important;
    height: auto !important;
    max-height: 70vh;
    resize: none;
  }

  .question-stats-grid,
  .recent-attempt-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .question-stats-grid button:nth-child(2n) {
    border-right: 0;
  }

  .practice-entry-head {
    display: grid;
    gap: 4px;
  }

  .question-filters {
    grid-template-columns: 1fr;
  }

  .question-filters label:first-child {
    grid-column: auto;
  }
}

@media (max-width: 520px) {
  .recent-attempt-list {
    grid-template-columns: 1fr;
  }

  .practice-panel.is-answering {
    max-height: min(44vh, 340px);
  }

  .practice-panel.is-learning {
    height: min(70dvh, 600px);
    max-height: none;
  }

  .practice-panel.is-learning .learning-dialogue {
    max-height: none;
  }

  .practice-panel.is-answering .practice-options {
    grid-template-columns: 1fr;
  }

}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  .pdf-question-pin,
  .pdf-learning-anchor-capsule,
  .pdf-learning-anchor-source,
  .pdf-learning-anchor-note,
  .pdf-question-pin-card,
  [data-learning-rich-preview="true"],
  .learning-dialogue-item,
  .learning-image-job-spinner,
  .learning-graph-node,
  .read-aloud-dock,
  .selection-map-dock,
  .paragraph-visualization-dock,
  .section-lesson-dock,
  .selection-map-node,
  .selection-capture-box,
  .selection-capture-persisted {
    animation: none !important;
    transition: none !important;
  }
}

/* Final override: the generic floating-window stylesheet comes before this
   mobile tail and must not turn the compact player back into a tall panel. */
.read-aloud-dock {
  display: block;
  grid-template-rows: none;
  gap: 0;
  width: min(448px, calc(100vw - 24px));
  min-width: min(300px, calc(100vw - 24px));
  min-height: 0;
  height: 68px;
  max-height: 68px;
  padding: 6px;
  overflow: visible;
  resize: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 98%, transparent);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.18);
}

@media (max-width: 760px) {
  .read-aloud-dock {
    top: auto !important;
    right: 12px !important;
    bottom: 12px !important;
    left: 12px !important;
    width: auto !important;
    min-width: 0;
    height: 64px !important;
    max-height: 64px;
  }
}

/* WebKit keeps a native list-item baseline on <summary>.  The settings control
   lives beside regular buttons, so keep its wrapper and summary in the same
   fixed 32px flex row rather than letting that baseline push the gear down. */
#read-aloud-dock .read-aloud-actions {
  display: flex;
  align-items: center;
  align-self: center;
  block-size: 32px;
}

#read-aloud-dock .read-aloud-actions > .read-aloud-settings {
  display: block;
  position: relative;
  flex: 0 0 32px;
  align-self: center;
  inline-size: 32px;
  block-size: 32px;
  min-inline-size: 32px;
  min-block-size: 32px;
  margin: 0;
  padding: 0;
}

#read-aloud-dock .read-aloud-settings > summary.read-aloud-control-button {
  display: grid !important;
  align-self: center;
  inline-size: 32px !important;
  block-size: 32px !important;
  min-inline-size: 32px !important;
  min-block-size: 32px !important;
  margin: 0;
  padding: 0;
  line-height: 0;
  vertical-align: top;
}

#read-aloud-dock .read-aloud-settings > summary.read-aloud-control-button::marker,
#read-aloud-dock .read-aloud-settings > summary.read-aloud-control-button::-webkit-details-marker {
  display: none;
  content: "";
}

/* v307: the live read-note stream is an in-editor transient block.  It never
   adds a third workspace row or changes the floating panel geometry. */
.markdown-note-workspace {
  grid-template-rows: auto minmax(0, 1fr);
}

.markdown-note-workspace > textarea,
.markdown-note-workspace > .markdown-visual-editor {
  grid-area: 2 / 1;
}

.read-aloud-ai-note-marker,
.read-aloud-ai-note-source {
  display: none !important;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.markdown-visual-editor[data-empty-placeholder]:has(> p:only-child > br:only-child)::before {
  position: absolute;
  padding: 2px 0;
  color: var(--text-dim);
  content: attr(data-empty-placeholder);
  font-size: 0.76rem;
  pointer-events: none;
  opacity: 0.72;
}

.markdown-read-note-draft {
  min-width: 0;
  margin: 16px 0 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--reader-panel-border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 7%, var(--reader-panel-bg));
  color: var(--text);
  cursor: default;
  user-select: text;
}

.markdown-read-note-draft[data-phase="thinking"] {
  display: flex;
  width: max-content;
  gap: 4px;
  align-items: center;
  padding: 8px 10px;
}

.markdown-read-note-draft[data-phase="thinking"] > span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  animation: markdown-read-note-thinking 900ms ease-in-out infinite;
}

.markdown-read-note-draft[data-phase="thinking"] > span:nth-child(2) {
  animation-delay: 120ms;
}

.markdown-read-note-draft[data-phase="thinking"] > span:nth-child(3) {
  animation-delay: 240ms;
}

@keyframes markdown-read-note-thinking {
  0%, 70%, 100% { opacity: 0.28; transform: translateY(0); }
  35% { opacity: 1; transform: translateY(-2px); }
}

.markdown-note-ai-status {
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--reader-panel-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: var(--accent) !important;
  font-size: 0.58rem !important;
  font-weight: 650;
}

.markdown-note-ai-status[data-state="paused"] {
  border-color: color-mix(in srgb, #d17b43 46%, var(--reader-panel-border));
  background: color-mix(in srgb, #d17b43 10%, transparent);
  color: #c66d35 !important;
}

#read-aloud-dock .read-aloud-settings-menu {
  width: min(284px, calc(100vw - 24px));
}

#read-aloud-dock .read-aloud-settings-menu label:has([data-read-aloud-inactive-opacity]),
#read-aloud-dock .read-aloud-settings-menu label:has([data-read-aloud-volume]) {
  grid-template-columns: 80px minmax(0, 1fr) 34px;
}

#read-aloud-dock .read-aloud-ai-notes-toggle {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}

#read-aloud-dock .read-aloud-markdown-pdf-sync-toggle {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}

#read-aloud-dock .read-aloud-markdown-pdf-sync-toggle strong {
  color: var(--text);
  font-size: 0.7rem;
  font-weight: 620;
}

#read-aloud-dock .read-aloud-markdown-pdf-sync-toggle input {
  inline-size: 32px;
  block-size: 18px;
  flex: 0 0 auto;
  accent-color: var(--accent);
}

#read-aloud-dock .read-aloud-ai-notes-toggle strong {
  color: var(--text);
  font-size: 0.7rem;
  font-weight: 620;
}

#read-aloud-dock .read-aloud-ai-notes-toggle input {
  inline-size: 32px;
  block-size: 18px;
  flex: 0 0 auto;
  accent-color: var(--accent);
}

.markdown-note-source-locate-status {
  min-width: 0;
  overflow: hidden;
  color: var(--text-dim) !important;
  font-size: 0.56rem !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.markdown-note-workspace.is-source-locate .markdown-note-toolbar,
.markdown-note-toolbar[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.46;
}

.markdown-note-workspace.is-source-locate > .markdown-visual-editor {
  cursor: default;
  user-select: text;
}

.markdown-note-workspace.is-source-locate .read-aloud-ai-managed-source {
  border-radius: 6px;
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 66%, transparent);
  cursor: pointer;
}

.markdown-note-workspace.is-source-locate .read-aloud-ai-managed-source:hover,
.markdown-note-workspace.is-source-locate .read-aloud-ai-managed-source:focus-within {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.markdown-note-workspace.is-source-locate .read-aloud-ai-source-unavailable {
  cursor: not-allowed;
  opacity: 0.72;
}

.markdown-pdf-source-region {
  position: absolute;
  z-index: 5;
  display: block;
  box-sizing: border-box;
  border-radius: 2px;
  background: transparent;
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--accent) 54%, transparent);
  pointer-events: none;
}

.pdf-hit.markdown-pdf-source-paragraph {
  background: transparent;
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--accent) 58%, transparent);
}

body.markdown-pdf-focus-active .pdf-page-shell.markdown-pdf-focus-active .pdf-text-layer span[data-read-text] {
  background-color: rgba(255, 255, 255, var(--read-unread-opacity, 0.68));
  background-image: none !important;
}

body.markdown-pdf-focus-active .pdf-page-shell.markdown-pdf-focus-active .pdf-text-layer span[data-read-text].markdown-pdf-focus-current {
  background-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .markdown-read-note-draft[data-phase="thinking"] > span { animation: none; }
}

/* v311 UI system: compact resource rows, stable circles, and one icon geometry. */
.library-manager-dock {
  border-radius: 12px;
}

.library-manager-dock > header {
  min-height: 44px;
  padding: 6px 10px 6px 12px;
}

.library-manager-dock > nav {
  min-height: 36px;
  padding: 4px 10px;
}

.library-manager-dock > nav button {
  min-height: 28px;
  padding-inline: 10px;
}

.library-manager-dock .learning-manager-content {
  padding: 0 10px 10px;
}

.library-manager-dock .learning-manager-batch {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-height: 38px;
  margin: 0 0 6px;
  padding: 4px 2px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-dim) 72%, transparent);
  background: var(--reader-panel-bg);
  backdrop-filter: blur(18px);
}

.library-manager-dock .learning-manager-batch > span {
  flex: 1 1 auto;
  min-width: 80px;
}

.library-manager-dock .learning-manager-batch button {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

.library-manager-dock .learning-manager-batch button.is-danger:hover:not(:disabled),
.library-manager-dock .learning-manager-batch button.is-danger:focus-visible:not(:disabled),
.library-manager-dock .learning-manager-batch button[data-confirming="true"] {
  background: color-mix(in srgb, #c53b3b 14%, transparent);
  color: light-dark(#9b2525, #f0a0a0);
}

.library-manager-dock .learning-manager-list {
  gap: 6px;
}

.library-manager-dock .learning-manager-list article {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  min-height: 54px;
  box-sizing: border-box;
  padding: 6px 8px;
  border-radius: 8px;
}

.library-manager-dock .learning-manager-list article.is-selected,
.library-manager-dock .learning-manager-list article:has(input[type="checkbox"]:checked) {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border-dim));
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.learning-manager-primary,
.learning-markdown-library article > label,
.learning-map-library article > label {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  cursor: pointer;
}

.learning-manager-primary > input,
.learning-markdown-library article > label > input,
.learning-map-library article > label > input[type="checkbox"] {
  inline-size: 16px;
  block-size: 16px;
  margin: 0;
}

.learning-manager-primary > span,
.learning-markdown-library article > label > span {
  min-width: 0;
}

.learning-manager-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
}

.learning-manager-actions > .learning-icon-button {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  inline-size: 32px;
  block-size: 32px;
  min-inline-size: 32px;
  min-block-size: 32px;
  aspect-ratio: 1;
  box-sizing: border-box;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}

.learning-manager-actions > .learning-icon-button:hover:not(:disabled),
.learning-manager-actions > .learning-icon-button:focus-visible:not(:disabled) {
  background: var(--surface);
  color: var(--text);
}

.learning-manager-actions > .learning-icon-button.is-danger:hover:not(:disabled),
.learning-manager-actions > .learning-icon-button.is-danger:focus-visible:not(:disabled),
.learning-manager-actions > .learning-icon-button[data-confirming="true"] {
  background: color-mix(in srgb, #c53b3b 14%, transparent);
  color: light-dark(#9b2525, #f0a0a0);
}

.learning-manager-actions > .learning-icon-button:disabled {
  cursor: not-allowed;
  opacity: 0.38;
}

.learning-manager-actions svg {
  display: block;
  inline-size: 16px;
  block-size: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.library-manager-dock .learning-image-library article {
  grid-template-columns: 16px 64px minmax(0, 1fr) auto;
  min-height: 62px;
}

.library-manager-dock .learning-image-preview,
.library-manager-dock .learning-image-preview img,
.library-manager-dock .learning-image-placeholder {
  inline-size: 64px;
  block-size: 48px;
  min-height: 48px;
  border-radius: 6px;
}

.library-manager-dock .learning-note-library article {
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: start;
}

.library-manager-dock .learning-note-select {
  align-self: start;
  padding-top: 3px;
}

.library-manager-dock .learning-note-fields > textarea {
  min-height: 30px;
}

.library-manager-dock .learning-map-library article {
  grid-template-columns: minmax(0, 1fr) auto;
}

:is(
  .library-manager-dock,
  .markdown-note-dock,
  .selection-map-dock,
  .paragraph-visualization-dock,
  .section-lesson-dock
) > header > button {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  inline-size: 32px;
  block-size: 32px;
  min-inline-size: 32px;
  min-block-size: 32px;
  aspect-ratio: 1;
  box-sizing: border-box;
  padding: 0;
  border-radius: 50%;
}

:is(
  .library-manager-dock,
  .markdown-note-dock,
  .selection-map-dock,
  .paragraph-visualization-dock,
  .section-lesson-dock
) > header > button > svg,
#read-aloud-dock .read-aloud-control-button > svg {
  display: block;
  flex: none;
}

#read-aloud-dock .read-aloud-control-button,
#read-aloud-dock .read-aloud-settings > summary.read-aloud-control-button {
  flex: 0 0 32px;
  inline-size: 32px;
  block-size: 32px;
  min-inline-size: 32px;
  min-block-size: 32px;
  aspect-ratio: 1;
  box-sizing: border-box;
}

@media (max-width: 620px) {
  .library-manager-dock .learning-manager-content {
    padding-inline: 8px;
  }

  .library-manager-dock .learning-manager-batch {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .library-manager-dock .learning-manager-batch::-webkit-scrollbar {
    display: none;
  }

  .library-manager-dock .learning-image-library article {
    grid-template-columns: 16px 48px minmax(0, 1fr) auto;
  }

  .library-manager-dock .learning-image-preview,
  .library-manager-dock .learning-image-preview img,
  .library-manager-dock .learning-image-placeholder {
    inline-size: 48px;
    block-size: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .learning-manager-actions > .learning-icon-button,
  .library-manager-dock > nav button,
  .library-manager-dock .learning-manager-batch button {
    transition: none;
  }
}
/* v316 interactive lesson checkpoints and durable question learning archive */
.interactive-checkpoint-banner,
.interactive-feedback-card,
.interactive-comprehension {
  box-sizing: border-box;
  color: var(--text);
}

.interactive-checkpoint-banner {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 8px;
  padding: 5px 0 7px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--accent, #56b4f8) 22%, var(--border, #3a3a3a));
  border-radius: 0;
  background: transparent;
}

.interactive-checkpoint-banner span {
  flex: 0 0 auto;
  padding: 2px 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #56b4f8) 16%, transparent);
  color: color-mix(in srgb, var(--accent, #56b4f8) 74%, var(--text));
  font-size: 0.66rem;
  font-weight: 650;
  line-height: 1.35;
}

.interactive-checkpoint-banner strong {
  min-width: 0;
  color: var(--text-dim);
  font-size: 0.72rem;
  font-weight: 520;
  line-height: 1.4;
}

.interactive-feedback-card {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  padding: 7px 0;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--accent, #56b4f8) 18%, var(--border, #3a3a3a));
  border-radius: 0;
  background: transparent;
}

.interactive-feedback-card > div {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.interactive-feedback-card strong {
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
}

.interactive-feedback-card small {
  color: var(--text-dim);
  font-size: 0.67rem;
  line-height: 1.4;
}

.interactive-feedback-card.is-complete {
  display: block;
  max-height: min(42vh, 420px);
  overflow: auto;
}

.interactive-feedback-card.is-complete > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}

.interactive-feedback-card.is-complete > .learning-message-markdown {
  display: block;
  font-size: 0.76rem;
  line-height: 1.65;
}

.interactive-feedback-card.is-complete > .learning-message-markdown > :first-child {
  margin-top: 0;
}

.interactive-feedback-card.is-complete > .learning-message-markdown > :last-child {
  margin-bottom: 0;
}

.interactive-feedback-card button,
.interactive-comprehension button {
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid var(--border, #3a3a3a);
  border-radius: 7px;
  background: var(--surface, #222);
  color: inherit;
  font-size: 0.7rem;
  white-space: nowrap;
}

.interactive-feedback-pulse {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--accent, #56b4f8);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent, #56b4f8) 42%, transparent);
  animation: interactive-feedback-pulse 1.35s ease-out infinite;
}

@keyframes interactive-feedback-pulse {
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.interactive-comprehension {
  position: sticky;
  z-index: 8;
  bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 8px;
  padding: 8px 9px;
  border: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
  border-radius: 8px;
  background: var(--surface, #222);
  box-shadow: 0 8px 22px rgb(0 0 0 / 20%);
}

.interactive-comprehension > div {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.interactive-comprehension strong {
  font-size: 0.74rem;
  font-weight: 620;
  line-height: 1.4;
}

.interactive-comprehension small {
  color: var(--text-dim);
  font-size: 0.67rem;
  line-height: 1.35;
}

.interactive-comprehension > span {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.interactive-comprehension button.is-primary {
  border-color: transparent;
  background: var(--accent, #56b4f8);
  color: #07131b;
  font-weight: 700;
}

.markdown-note-dock.is-question-learning {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.markdown-note-dock.is-question-learning.is-question-records {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.markdown-note-dock.is-markdown-tutor {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.markdown-note-dock.is-markdown-tutor.is-markdown-tutor-records {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.markdown-note-dock.is-markdown-tutor .markdown-note-workspace > input {
  height: 36px;
  min-height: 36px;
  padding-block: 4px;
  line-height: 1.3;
}

.question-learning-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 4px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--reader-panel-border) 70%, transparent);
}

.question-learning-tabs button {
  min-height: 28px;
  padding: 4px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.question-learning-tabs button:hover {
  color: var(--text);
}

.question-learning-tabs button[aria-selected="true"] {
  background: var(--surface);
  color: var(--text);
}

.question-learning-tabs button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 72%, transparent);
  outline-offset: 1px;
}

.question-learning-records-panel,
.question-learning-timeline {
  min-width: 0;
  min-height: 0;
}

.question-learning-records-panel {
  overflow: hidden;
}

.question-learning-timeline {
  height: 100%;
  overflow: auto;
  padding: 12px 14px 16px;
  background: var(--bg);
  font-size: 0.78rem;
}

.question-learning-timeline > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 0 2px 10px;
}

.question-learning-timeline > header > div,
.question-learning-timeline > header small {
  display: block;
  min-width: 0;
}

.question-learning-timeline > header strong {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
}

.question-learning-timeline > header small,
.question-learning-timeline > header > span {
  color: var(--text-dim);
  font-size: 0.72rem;
  line-height: 1.45;
}

.question-attempt-list {
  border-top: 1px solid var(--reader-panel-border);
}

.question-attempt-card {
  margin: 0;
  overflow: visible;
  border: 0;
  border-bottom: 1px solid var(--reader-panel-border);
  border-radius: 0;
  background: transparent;
}

.question-attempt-card summary {
  display: grid;
  grid-template-columns: 10px auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
  row-gap: 2px;
  min-width: 0;
  padding: 9px 2px;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.question-attempt-card summary::-webkit-details-marker {
  display: none;
}

.question-attempt-card summary::before {
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  color: var(--text-dim);
  content: "";
  transform: rotate(-45deg);
  transition: transform 160ms ease;
}

.question-attempt-card[open] summary::before {
  transform: rotate(45deg) translate(-1px, -1px);
}

.question-attempt-card summary:focus-visible {
  border-radius: 4px;
  outline: 2px solid color-mix(in srgb, var(--accent) 68%, transparent);
  outline-offset: -1px;
}

.question-attempt-index,
.question-attempt-result {
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
}

.question-attempt-time,
.question-attempt-answer {
  min-width: 0;
  overflow: hidden;
  color: var(--text-dim);
  font-size: 0.7rem;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.question-attempt-time {
  align-self: center;
}

.question-attempt-answer {
  grid-column: 3 / 5;
}

.question-attempt-result {
  justify-self: end;
}

.question-attempt-card.is-correct .question-attempt-result { color: #62bd87; }
.question-attempt-card.is-wrong .question-attempt-result { color: #db7772; }

.question-attempt-turns {
  display: grid;
  gap: 0;
  padding: 0 2px 10px 20px;
}

.question-attempt-turns > p {
  margin: 2px 0 4px;
  color: var(--text-dim);
  font-size: 0.75rem;
}

.question-attempt-turns article {
  min-width: 0;
  padding: 9px 0;
  border-top: 1px solid color-mix(in srgb, var(--reader-panel-border) 62%, transparent);
}

.question-attempt-turns article.is-user {
  padding-left: 9px;
  border-left: 1px solid var(--accent, #56b4f8);
}

.question-attempt-turns article > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.question-attempt-turns article > header > small {
  color: var(--text-dim);
  font-size: 0.69rem;
}

.question-attempt-turns article > header > span {
  display: flex;
  gap: 2px;
}

.question-attempt-turns article > header button {
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.7rem;
  cursor: pointer;
}

.question-attempt-turns article > header button:hover,
.question-attempt-turns article > header button:focus-visible {
  background: var(--surface);
  color: var(--text);
}

.question-attempt-turns article > header button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 68%, transparent);
  outline-offset: 1px;
}

.question-attempt-turns article > header svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
}

.question-attempt-turns .learning-message-markdown {
  font-size: 0.76rem;
  line-height: 1.65;
}

.question-attempt-turns .learning-message-markdown :is(h1, h2, h3, h4) {
  margin: 0.65em 0 0.3em;
  font-size: 0.78rem;
  line-height: 1.5;
}

.question-learning-empty {
  margin: 14px 2px;
  color: var(--text-dim);
  font-size: 0.75rem;
  line-height: 1.6;
}

@media (max-width: 720px) {
  .interactive-comprehension {
    align-items: stretch;
    flex-direction: column;
  }

  .interactive-comprehension > span {
    justify-content: flex-start;
  }

  .interactive-comprehension button {
    flex: 0 1 auto;
  }

  .question-learning-timeline {
    padding-inline: 12px;
  }

  .question-attempt-card summary {
    grid-template-columns: 10px auto minmax(0, 1fr);
  }

  .question-attempt-result {
    grid-column: 3;
  }

  .question-attempt-answer {
    grid-column: 2 / 4;
  }
}

/* v327: generated-note density is a presentation concern. Marker-only
   containers retain their hidden source metadata in the DOM/Markdown, but do
   not consume a visible line. */
.markdown-note-workspace {
  position: relative;
}

.markdown-visual-editor > .read-aloud-ai-marker-only {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}

.markdown-note-workspace[data-markdown-document-mode="teacher"] > .markdown-visual-editor {
  font-size: 0.81rem;
  line-height: 1.58;
}

.markdown-note-workspace[data-markdown-document-mode="teacher"] > .markdown-visual-editor :is(h2, h3, h4, h5, h6) {
  margin-block: 0.58em 0.24em;
}

.markdown-note-workspace[data-markdown-document-mode="teacher"] > .markdown-visual-editor > p {
  margin-block: 0 0.42em;
}

.markdown-note-workspace[data-markdown-document-mode="teacher"] > .markdown-visual-editor > :is(
  p:empty,
  p:has(> br:only-child)
) {
  display: none;
}

.markdown-note-workspace[data-markdown-document-mode="teacher"] .markdown-read-note-draft {
  margin-top: 0.5em;
  padding: 0.42em 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.markdown-note-workspace[data-markdown-document-mode="teacher"] .markdown-read-note-draft > :is(p, ul, ol, blockquote) {
  margin-block: 0 0.34em;
  line-height: 1.58;
}

.markdown-note-workspace[data-markdown-document-mode="summary"] > .markdown-visual-editor {
  font-size: 0.79rem;
  line-height: 1.46;
}

.markdown-note-workspace[data-markdown-document-mode="summary"] > .markdown-visual-editor :is(h2, h3, h4, h5, h6) {
  margin-block: 0.42em 0.18em;
}

.markdown-note-workspace[data-markdown-document-mode="summary"] > .markdown-visual-editor :is(ul, ol, blockquote) {
  margin-block: 0.28em;
}

.markdown-note-workspace[data-markdown-document-mode="summary"] > .markdown-visual-editor > p {
  margin-block: 0 0.34em;
}

.markdown-note-workspace[data-markdown-document-mode="summary"] .markdown-read-note-draft {
  margin-top: 0.32em;
  padding: 0.24em 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.markdown-note-workspace[data-markdown-document-mode="summary"] .markdown-read-note-draft > :is(p, ul, ol, blockquote) {
  margin-block: 0 0.16em;
  line-height: 1.46;
}

.markdown-note-workspace[data-markdown-document-mode="summary"] :is(
  .markdown-visual-editor,
  .markdown-read-note-draft
) > :is(p:empty, p:has(> br:only-child)) {
  display: none;
}

.markdown-read-aloud-return {
  position: absolute;
  z-index: 8;
  right: 12px;
  bottom: 12px;
  display: grid;
  inline-size: 32px;
  block-size: 32px;
  min-inline-size: 32px;
  min-block-size: 32px;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--reader-panel-border));
  border-radius: 50%;
  background: color-mix(in srgb, var(--reader-panel-bg) 94%, var(--accent) 6%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  color: var(--text);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.markdown-read-aloud-return[hidden] {
  display: none !important;
}

.markdown-read-aloud-return:hover,
.markdown-read-aloud-return:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 72%, var(--reader-panel-border));
  background: color-mix(in srgb, var(--reader-panel-bg) 84%, var(--accent) 16%);
  outline: 0;
}

.markdown-read-aloud-return:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent), 0 6px 18px rgba(0, 0, 0, 0.22);
}

.markdown-read-aloud-return svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transition: transform 160ms ease;
}

.markdown-read-aloud-return[data-direction="above"] svg {
  transform: rotate(180deg);
}

.markdown-visual-editor > .is-read-aloud-current-block {
  scroll-margin-block: 28%;
}

@media (prefers-reduced-motion: reduce) {
  .markdown-read-aloud-return,
  .markdown-read-aloud-return svg {
    transition: none;
  }
}