/* Readspace components. Every color, space, radius, shadow and size comes from tokens.css;
   type comes from the generated style classes (.label, .body, .prose-h2 …) the components put on their elements. */

:root {
  --rs-ease: cubic-bezier(0.2, 0, 0, 1);
  --rs-fast: 120ms;
  --rs-base: 200ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
button, input { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }

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

:where(.rs-btn, .rs-icon-btn, .rs-chip, .rs-seg__opt, .rs-search, .rs-tree__chapter-btn, .rs-tree__lesson, .rs-toc__link,
  .rs-navcard, .rs-card, .rs-continue-row, .rs-menu__item, .rs-crumbs__link, .rs-logo, .rs-figure__frame, .rs-table-wrap,
  .rs-code__pre, .rs-lightbox__close, .rs-lightbox__tool, .rs-prose a):focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--focus-ring);
}

@keyframes rs-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rs-pop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes rs-slide-left { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes rs-slide-right { from { transform: translateX(100%); } to { transform: none; } }

/* ---------- Icon ---------- */
.rs-icon { display: inline-block; flex: none; vertical-align: middle; }

/* ---------- Logo ---------- */
.rs-logo {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin: 0 0 0 calc(-1 * var(--space-1)); padding: var(--space-1);
  border: 0; border-radius: var(--radius-sm); background: none;
  color: var(--text); text-decoration: none; cursor: pointer;
}
.rs-logo__mark { display: block; flex: none; }
.rs-logo__tile { fill: var(--primary); }
.rs-logo__page { fill: var(--on-primary); }
.rs-logo__page--right { opacity: 0.72; }
.rs-logo__word { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; line-height: 24px; }

/* ---------- Button ---------- */
.rs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--size-control-md); padding: 0 var(--space-4);
  border: 1px solid transparent; border-radius: var(--radius-md);
  background: transparent; cursor: pointer; white-space: nowrap; text-decoration: none; user-select: none;
  transition: background-color var(--rs-fast) var(--rs-ease), border-color var(--rs-fast) var(--rs-ease),
    color var(--rs-fast) var(--rs-ease), box-shadow var(--rs-fast) var(--rs-ease), transform var(--rs-fast) var(--rs-ease);
}
.rs-btn:active:not(:disabled) { transform: scale(0.98); }
.rs-btn--sm { height: var(--size-control-sm); padding: 0 var(--space-3); gap: var(--space-1); }
.rs-btn--lg { height: var(--size-control-lg); padding: 0 var(--space-5); }
.rs-btn--block { display: flex; width: 100%; }
.rs-btn--primary { background: var(--primary-strong); color: var(--on-primary); }
.rs-btn--primary:hover:not(:disabled) { background: var(--primary-strong-hover); }
.rs-btn--secondary { background: var(--surface-raised); border-color: var(--border); color: var(--text); }
.rs-btn--secondary:hover:not(:disabled) { background: var(--surface); border-color: var(--border-strong); }
.rs-btn--tonal { background: var(--primary-soft); color: var(--primary-text); }
.rs-btn--tonal:hover:not(:disabled) { border-color: var(--primary); }
.rs-btn--ghost { color: var(--text-subtle); }
.rs-btn--ghost:hover:not(:disabled) { background: var(--surface-sunken); color: var(--text); }
.rs-btn--success { background: var(--success-soft); color: var(--success-text); }
.rs-btn--success:hover:not(:disabled) { border-color: var(--success); }
.rs-btn:disabled { background: var(--surface-sunken); border-color: transparent; color: var(--text-disabled); cursor: not-allowed; }
.rs-btn__label { overflow: hidden; text-overflow: ellipsis; }

/* ---------- IconButton ---------- */
.rs-icon-btn {
  display: inline-grid; place-items: center; flex: none;
  width: var(--size-control-md); height: var(--size-control-md); padding: 0;
  border: 1px solid transparent; border-radius: var(--radius-md);
  background: transparent; color: var(--text-subtle); cursor: pointer;
  transition: background-color var(--rs-fast) var(--rs-ease), color var(--rs-fast) var(--rs-ease), transform var(--rs-fast) var(--rs-ease);
}
.rs-icon-btn--sm { width: var(--size-control-sm); height: var(--size-control-sm); }
.rs-icon-btn:hover:not(:disabled) { background: var(--surface-sunken); color: var(--text); }
.rs-icon-btn:active:not(:disabled) { transform: scale(0.94); }
.rs-icon-btn--secondary { background: var(--surface-raised); border-color: var(--border); }
.rs-icon-btn[aria-pressed="true"], .rs-icon-btn[aria-expanded="true"] { background: var(--primary-soft); color: var(--primary-text); }
.rs-icon-btn:disabled { color: var(--text-disabled); cursor: not-allowed; }

/* ---------- Kbd ---------- */
.rs-kbd {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-width: 22px; height: 22px; padding: 0 var(--space-1);
  border: 1px solid var(--border); border-radius: var(--radius-xs);
  background: var(--surface-raised); color: var(--text-subtle); font-family: var(--font-sans);
}

/* ---------- SearchField ---------- */
.rs-search {
  position: relative; display: flex; align-items: center; gap: var(--space-2);
  width: 100%; height: var(--size-control-md); padding: 0 var(--space-2) 0 var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface-raised); color: var(--text-secondary); cursor: text; text-align: left;
  transition: border-color var(--rs-fast) var(--rs-ease), box-shadow var(--rs-fast) var(--rs-ease), background-color var(--rs-fast) var(--rs-ease);
}
.rs-search--sm { height: var(--size-control-sm); padding-left: var(--space-2); }
.rs-search:hover { border-color: var(--border-strong); }
.rs-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.rs-search--trigger { cursor: pointer; }
.rs-search--trigger:focus-within { box-shadow: none; }
.rs-search--trigger:focus-visible { border-color: var(--primary); }
.rs-search input {
  flex: 1; min-width: 0; height: 100%; padding: 0;
  border: 0; outline: 0; background: transparent; color: var(--text);
}
.rs-search input::placeholder { color: var(--text-secondary); opacity: 1; }
.rs-search input::-webkit-search-cancel-button, .rs-search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.rs-search__placeholder { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-search__clear {
  display: grid; place-items: center; flex: none; width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: var(--radius-full); background: var(--surface-sunken); color: var(--text-subtle); cursor: pointer;
}
.rs-search__clear:hover { color: var(--text); }

/* ---------- Segmented ---------- */
.rs-seg {
  display: inline-flex; gap: 2px; padding: var(--space-1);
  border-radius: var(--radius-md); background: var(--surface-sunken);
}
.rs-seg--block { display: flex; }
.rs-seg--block .rs-seg__opt { flex: 1; justify-content: center; }
.rs-seg__opt {
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--size-control-sm); padding: 0 var(--space-3);
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-subtle); cursor: pointer; white-space: nowrap;
  transition: background-color var(--rs-fast) var(--rs-ease), color var(--rs-fast) var(--rs-ease), box-shadow var(--rs-fast) var(--rs-ease);
}
.rs-seg__opt:hover { color: var(--text); }
.rs-seg__opt[aria-checked="true"] { background: var(--surface-raised); color: var(--text); box-shadow: var(--shadow-xs); }
.rs-seg__count { font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------- Chip ---------- */
.rs-chip {
  display: inline-flex; align-items: center; gap: var(--space-1); flex: none;
  height: var(--size-control-sm); padding: 0 var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-full);
  background: var(--surface-raised); color: var(--text-subtle); cursor: pointer; white-space: nowrap;
  transition: background-color var(--rs-fast) var(--rs-ease), border-color var(--rs-fast) var(--rs-ease), color var(--rs-fast) var(--rs-ease);
}
.rs-chip:hover { border-color: var(--border-strong); color: var(--text); }
.rs-chip[aria-pressed="true"] { border-color: var(--primary-soft); background: var(--primary-soft); color: var(--primary-text); font-weight: 600; }
.rs-chip__count { font-variant-numeric: tabular-nums; }

/* ---------- Tag ---------- */
.rs-tag {
  display: inline-flex; align-items: center; gap: var(--space-1); flex: none;
  height: 24px; padding: 0 var(--space-2);
  border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--text-subtle); white-space: nowrap;
}
.rs-tag--primary { background: var(--primary-soft); color: var(--primary-text); }
.rs-tag--success { background: var(--success-soft); color: var(--success-text); }
.rs-tag--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--border); }

/* ---------- ProgressBar ---------- */
.rs-progress { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.rs-progress__track { position: relative; flex: 1; min-width: 40px; height: 6px; overflow: hidden; border-radius: var(--radius-full); background: var(--surface-sunken); }
.rs-progress--sm .rs-progress__track { height: 4px; }
.rs-progress__fill { height: 100%; border-radius: inherit; background: var(--primary); transition: width var(--rs-base) var(--rs-ease); }
.rs-progress--success .rs-progress__fill { background: var(--success); }
.rs-progress__label { flex: none; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Avatar ---------- */
.rs-avatar {
  display: inline-grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: var(--radius-full);
  background: var(--rs-avatar, var(--primary-strong)); color: var(--on-cover);
  font-size: 12px; font-weight: 600; letter-spacing: -0.02em; user-select: none;
}
.rs-avatar--sm { width: 24px; height: 24px; font-size: 10px; }
.rs-avatar--lg { width: 40px; height: 40px; font-size: 14px; }

/* ---------- EmptyState ---------- */
.rs-empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-12) var(--space-6); text-align: center;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-xl); background: var(--bg);
}
.rs-empty__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--space-2); border-radius: var(--radius-full); background: var(--surface-sunken); color: var(--text-subtle); }
.rs-empty__title { margin: 0; color: var(--text); }
.rs-empty__desc { margin: 0; max-width: 360px; color: var(--text-secondary); }
.rs-empty__action { margin-top: var(--space-3); }
.rs-empty--compact { padding: var(--space-8) var(--space-4); border-style: solid; }

/* ---------- BookCover ---------- */
.rs-cover {
  position: relative; flex: none; display: block; overflow: hidden;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-xs) var(--radius-sm) var(--radius-sm) var(--radius-xs);
  background: var(--cover-tone, var(--cover-blue)); color: var(--on-cover);
  box-shadow: var(--shadow-cover);
  transition: transform var(--rs-base) var(--rs-ease);
}
.rs-cover::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 7%; background: color-mix(in srgb, var(--cover-tone, var(--cover-blue)) 76%, var(--cover-ink)); }
.rs-cover::after { content: ""; position: absolute; inset: 0 auto 0 7%; width: 1px; background: color-mix(in srgb, var(--on-cover) 22%, transparent); }
.rs-cover__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rs-cover__art { position: absolute; inset: 0; width: 100%; height: 100%; }
.rs-cover__eyebrow, .rs-cover__title { position: absolute; left: 16%; right: 9%; word-break: keep-all; overflow-wrap: anywhere; }
.rs-cover__eyebrow { top: 9%; font-size: 9px; font-weight: 600; line-height: 12px; letter-spacing: 0.02em; }
.rs-cover__title { bottom: 9%; font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; }
.rs-cover--lg .rs-cover__eyebrow { font-size: 11px; line-height: 14px; }
.rs-cover--lg .rs-cover__title { font-size: 16px; }
.rs-cover--sm, .rs-cover--xs { box-shadow: var(--shadow-xs); }
.rs-cover--xs { border-radius: 2px var(--radius-xs) var(--radius-xs) 2px; }

/* ---------- BookCard ---------- */
.rs-card {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-xl);
  background: var(--surface-raised); color: var(--text); text-decoration: none; cursor: pointer;
  transition: border-color var(--rs-fast) var(--rs-ease), box-shadow var(--rs-base) var(--rs-ease), transform var(--rs-base) var(--rs-ease);
}
.rs-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.rs-card:active { transform: translateY(0) scale(0.995); }
.rs-card:hover .rs-cover { transform: translateY(-3px); }
.rs-card__shelf { display: grid; place-items: center; height: 184px; background: color-mix(in srgb, var(--cover-tone, var(--cover-blue)) 9%, var(--surface)); }
.rs-card__body { display: flex; flex: 1; flex-direction: column; gap: var(--space-2); padding: var(--space-5); }
.rs-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.rs-card__title { margin: var(--space-1) 0 0; color: var(--text); }
.rs-card__desc { display: -webkit-box; margin: 0; overflow: hidden; color: var(--text-secondary); -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rs-card__meta { margin: 0; color: var(--text-secondary); }
.rs-card__footer { display: flex; align-items: center; gap: var(--space-4); margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--border); }
.rs-card__footer .rs-progress { flex: 1; }
.rs-card__hint { flex: 1; color: var(--text-secondary); }
.rs-card__cta { display: inline-flex; align-items: center; gap: var(--space-1); margin-left: auto; color: var(--primary-text); white-space: nowrap; }
.rs-card__cta .rs-icon { transition: transform var(--rs-fast) var(--rs-ease); }
.rs-card:hover .rs-card__cta .rs-icon { transform: translateX(2px); }

/* ---------- ContinueCard ---------- */
.rs-continue {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-6);
  padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface-raised);
}
.rs-continue__info { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.rs-continue__eyebrow { display: flex; align-items: center; gap: var(--space-1); margin: 0; color: var(--text-secondary); }
.rs-continue__title { margin: 0; color: var(--text); }
.rs-continue__lesson { margin: 0; color: var(--text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-continue__lesson b { color: var(--text); font-weight: 600; }
.rs-continue__progress { margin-top: var(--space-3); max-width: 420px; }
.rs-continue-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3);
  padding: var(--space-3); border-radius: var(--radius-lg); color: var(--text); text-decoration: none; cursor: pointer;
  transition: background-color var(--rs-fast) var(--rs-ease);
}
.rs-continue-row:hover { background: var(--surface-sunken); }
.rs-continue-row__text { display: flex; flex-direction: column; min-width: 0; }
.rs-continue-row__title, .rs-continue-row__lesson { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-continue-row__lesson { color: var(--text-subtle); }
.rs-continue-row__pct { color: var(--text-subtle); font-variant-numeric: tabular-nums; }
@media (max-width: 767px) {
  .rs-continue { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4); }
  .rs-continue__action { grid-column: 1 / -1; }
  .rs-continue__action .rs-btn { width: 100%; }
}

/* ---------- AppHeader ---------- */
.rs-header {
  position: sticky; top: 0; z-index: var(--layer-header);
  display: flex; align-items: center; gap: var(--space-4);
  height: var(--size-header); padding: 0 var(--space-6);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px);
}
.rs-header__start { display: flex; flex: 1 1 0; align-items: center; gap: var(--space-2); min-width: 0; }
.rs-header__center { display: flex; flex: 0 1 440px; justify-content: center; min-width: 0; }
.rs-header__end { display: flex; flex: 1 1 0; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.rs-header:not(:has(> .rs-header__center)) .rs-header__end { flex: none; }
.rs-header__divider { flex: none; width: 1px; height: 20px; margin: 0 var(--space-1); background: var(--border); }
.rs-header__title { min-width: 0; overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 767px) {
  .rs-header { gap: var(--space-2); height: 52px; padding: 0 var(--space-3); }
}

/* ---------- Breadcrumb ---------- */
.rs-crumbs { min-width: 0; color: var(--text-secondary); }
.rs-crumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.rs-crumbs__item { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; }
.rs-crumbs__link {
  max-width: 240px; padding: 0; overflow: hidden; border: 0; border-radius: var(--radius-xs);
  background: none; color: inherit; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
}
.rs-crumbs__link:hover { color: var(--text); }
.rs-crumbs__current { color: var(--text-subtle); font-weight: 500; }
.rs-crumbs__sep { color: var(--text-disabled); }

/* ---------- TocTree ---------- */
.rs-tree { font-variant-numeric: tabular-nums; }
.rs-tree__list, .rs-tree__lessons { margin: 0; padding: 0; list-style: none; }
.rs-tree__part { padding: var(--space-4) var(--space-3) var(--space-2); color: var(--text-secondary); }
.rs-tree__chapter + .rs-tree__chapter { margin-top: 2px; }
.rs-tree__chapter-btn {
  display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: var(--size-control-md);
  padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-md);
  background: transparent; color: var(--text); text-align: left; cursor: pointer;
  transition: background-color var(--rs-fast) var(--rs-ease);
}
.rs-tree__chapter-btn:hover { background: var(--surface-sunken); }
.rs-tree__num { flex: none; width: 20px; color: var(--text-subtle); }
.rs-tree__chapter-title { flex: 1; min-width: 0; }
.rs-tree__count { flex: none; color: var(--text-subtle); }
.rs-tree__chapter-done { flex: none; color: var(--success); }
.rs-tree__chevron { flex: none; color: var(--text-subtle); transition: transform var(--rs-base) var(--rs-ease); }
.rs-tree__chapter-btn[aria-expanded="true"] .rs-tree__chevron { transform: rotate(90deg); }
.rs-tree__collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--rs-base) var(--rs-ease); }
.rs-tree__collapse[data-open="true"] { grid-template-rows: 1fr; }
.rs-tree__collapse > .rs-tree__lessons { min-height: 0; overflow: hidden; }
.rs-tree__lessons { position: relative; }
.rs-tree__lessons::before { content: ""; position: absolute; top: 4px; bottom: 6px; left: 21px; width: 1px; background: var(--border); }
.rs-tree__collapse[data-open="true"] > .rs-tree__lessons { padding: 2px 0 var(--space-2); }
.rs-tree__lesson {
  position: relative; display: flex; align-items: flex-start; gap: var(--space-2); width: 100%; min-height: 36px;
  padding: var(--space-2) var(--space-3) var(--space-2) 40px; border: 0; border-radius: var(--radius-md);
  background: transparent; color: var(--text-subtle); text-align: left; text-decoration: none; cursor: pointer;
  transition: background-color var(--rs-fast) var(--rs-ease), color var(--rs-fast) var(--rs-ease);
}
.rs-tree__lesson:hover { background: var(--surface-sunken); color: var(--text); }
.rs-tree__lesson[aria-current="page"] { background: var(--primary-soft); color: var(--primary-text); font-weight: 600; }
.rs-tree__lesson-num { flex: none; min-width: 24px; }
.rs-tree__lesson-title { flex: 1; min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }
.rs-tree__check { flex: none; margin-top: 2px; color: var(--success); }
.rs-tree__empty { padding: var(--space-6) var(--space-3); color: var(--text-secondary); text-align: center; }
.rs-mark { border-radius: 2px; background: var(--primary-soft); color: var(--primary-text); }

/* ---------- PageToc ---------- */
.rs-toc__title { display: flex; align-items: center; gap: 6px; margin: 0 0 var(--space-3); color: var(--text-secondary); }
.rs-toc__list { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--border); }
.rs-toc__link {
  display: block; margin-left: -1px; padding: 5px 0 5px var(--space-3);
  border-left: 2px solid transparent; color: var(--text-secondary); text-decoration: none; word-break: keep-all; overflow-wrap: anywhere;
  transition: color var(--rs-fast) var(--rs-ease), border-color var(--rs-fast) var(--rs-ease);
}
.rs-toc__link:hover { color: var(--text); }
.rs-toc__link--h3 { padding-left: 26px; }
.rs-toc__link[aria-current="true"] { border-left-color: var(--primary); color: var(--primary-text); font-weight: 600; }
.rs-toc__top {
  display: inline-flex; align-items: center; gap: var(--space-1); margin-top: var(--space-4); padding: 0;
  border: 0; background: none; color: var(--text-secondary); cursor: pointer;
}
.rs-toc__top:hover { color: var(--text); }

/* ---------- LessonNav ---------- */
.rs-lesson-nav { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); }
.rs-navcard {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); min-width: 0; min-height: 88px;
  padding: var(--space-4) var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface-raised); color: var(--text); text-align: left; text-decoration: none; cursor: pointer;
  transition: border-color var(--rs-fast) var(--rs-ease), box-shadow var(--rs-base) var(--rs-ease), transform var(--rs-fast) var(--rs-ease);
}
.rs-navcard:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.rs-navcard:active { transform: scale(0.99); }
.rs-navcard--next { align-items: flex-end; text-align: right; }
.rs-navcard--empty { visibility: hidden; }
.rs-navcard__dir { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text-secondary); }
.rs-navcard__title { max-width: 100%; color: var(--text); word-break: keep-all; overflow-wrap: anywhere; }
.rs-navcard__num { margin-right: 6px; color: var(--text-secondary); }
.rs-navcard__chapter { color: var(--text-secondary); }
.rs-navcard .rs-icon { transition: transform var(--rs-fast) var(--rs-ease); }
.rs-navcard--prev:hover .rs-icon { transform: translateX(-2px); }
.rs-navcard--next:hover .rs-icon { transform: translateX(2px); }
@media (max-width: 639px) {
  .rs-lesson-nav { grid-template-columns: minmax(0, 1fr); }
  .rs-navcard--empty { display: none; }
}

/* ---------- LessonComplete ---------- */
.rs-complete {
  display: flex; align-items: center; gap: var(--space-6);
  padding: var(--space-5) var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface-raised);
  transition: border-color var(--rs-base) var(--rs-ease);
}
.rs-complete--done { border-color: color-mix(in srgb, var(--success) 45%, var(--border)); }
.rs-complete__text { display: flex; flex: 1; flex-direction: column; gap: var(--space-3); min-width: 0; }
.rs-complete__title { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--text); }
.rs-complete__title .rs-icon { color: var(--success); }
@media (max-width: 639px) {
  .rs-complete { flex-direction: column; align-items: stretch; gap: var(--space-4); padding: var(--space-5); }
  .rs-complete .rs-btn { width: 100%; height: var(--size-control-lg); }
}

/* ---------- Menu ---------- */
.rs-menu { position: relative; display: inline-flex; }
.rs-menu__panel {
  position: absolute; top: calc(100% + var(--space-2)); right: 0; z-index: var(--layer-menu);
  min-width: 240px; max-width: calc(100vw - 2 * var(--space-4)); padding: 6px;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-lg);
  transform-origin: top right; animation: rs-pop var(--rs-base) var(--rs-ease);
}
.rs-menu__panel--start { right: auto; left: 0; transform-origin: top left; }
.rs-menu__label { padding: var(--space-2) var(--space-3) var(--space-1); color: var(--text-secondary); }
.rs-menu__item {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--size-control-md);
  padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-md);
  background: transparent; color: var(--text); text-align: left; cursor: pointer;
}
.rs-menu__item:hover, .rs-menu__item:focus-visible { background: var(--surface-sunken); }
.rs-menu__item > .rs-icon:first-child { color: var(--text-subtle); }
.rs-menu__item--danger { color: var(--danger-text); }
.rs-menu__item--danger > .rs-icon:first-child { color: inherit; }
.rs-menu__text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.rs-menu__desc { color: var(--text-subtle); }
.rs-menu__check { margin-left: auto; color: var(--primary-text); }
.rs-menu__divider { height: 1px; margin: 6px var(--space-1); background: var(--border); }
.rs-menu__header { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); }
.rs-menu__header-text { display: flex; flex-direction: column; min-width: 0; }
.rs-menu__header-sub { color: var(--text-secondary); }

/* ---------- Dialog & Drawer ---------- */
.rs-scrim { position: fixed; inset: 0; background: var(--scrim); animation: rs-fade var(--rs-base) var(--rs-ease); }
.rs-dialog-scrim { z-index: var(--layer-dialog); display: flex; align-items: flex-start; justify-content: center; padding: 12vh var(--space-4) var(--space-4); }
.rs-dialog-scrim--center { align-items: center; padding-top: var(--space-4); }
.rs-dialog {
  display: flex; flex-direction: column; width: 100%; max-width: 600px; max-height: min(640px, 76vh); overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface-raised); box-shadow: var(--shadow-lg);
  outline: none; animation: rs-pop var(--rs-base) var(--rs-ease);
}
.rs-dialog--sm { max-width: 420px; }
.rs-dialog__header { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); border-bottom: 1px solid var(--border); }
.rs-dialog__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-2); }
.rs-dialog__footer { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); color: var(--text-secondary); }
.rs-dialog__footer span { display: inline-flex; align-items: center; gap: var(--space-1); }
.rs-drawer-scrim { z-index: var(--layer-drawer); }
.rs-drawer {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: var(--layer-drawer);
  display: flex; flex-direction: column; width: min(320px, 88vw);
  background: var(--bg); box-shadow: var(--shadow-lg); outline: none;
  animation: rs-slide-left var(--rs-base) var(--rs-ease);
}
.rs-drawer--right { right: 0; left: auto; animation-name: rs-slide-right; }
.rs-drawer__header { display: flex; align-items: center; gap: var(--space-2); min-height: 52px; padding: 0 var(--space-2) 0 var(--space-4); border-bottom: 1px solid var(--border); }
.rs-drawer__title { flex: 1; min-width: 0; margin: 0; overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
.rs-drawer__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

/* ---------- Lightbox ---------- */
.rs-lightbox {
  position: fixed; inset: 0; z-index: var(--layer-dialog);
  display: flex; flex-direction: column; background: var(--scrim-strong); color: var(--on-scrim);
  outline: none; animation: rs-fade var(--rs-base) var(--rs-ease);
}
.rs-lightbox__bar { display: flex; flex: none; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); }
.rs-lightbox__caption { flex: 1; min-width: 0; margin: 0; overflow: hidden; color: var(--on-scrim); text-overflow: ellipsis; white-space: nowrap; }
.rs-lightbox__tool, .rs-lightbox__close {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); flex: none;
  height: var(--size-control-md); min-width: var(--size-control-md); padding: 0 var(--space-3);
  border: 1px solid color-mix(in srgb, var(--on-scrim) 28%, transparent); border-radius: var(--radius-md);
  background: transparent; color: var(--on-scrim); cursor: pointer;
}
.rs-lightbox__close { padding: 0; }
.rs-lightbox__tool:hover, .rs-lightbox__close:hover { background: color-mix(in srgb, var(--on-scrim) 14%, transparent); }
.rs-lightbox__stage { display: grid; flex: 1; min-height: 0; place-items: center; overflow: auto; padding: 0 var(--space-4) var(--space-6); }
.rs-lightbox__img { display: block; max-width: 100%; max-height: 100%; border-radius: var(--radius-lg); background: var(--bg); object-fit: contain; cursor: zoom-in; animation: rs-pop var(--rs-base) var(--rs-ease); }
.rs-lightbox--actual .rs-lightbox__stage { place-items: start center; }
.rs-lightbox--actual .rs-lightbox__img { max-width: none; max-height: none; cursor: zoom-out; }

/* ---------- DocHeader ---------- */
.rs-doc-header { margin-bottom: var(--space-10); }
.rs-doc-header .rs-crumbs { margin-bottom: var(--space-6); }
.rs-doc-header__title { margin: 0; color: var(--text); word-break: keep-all; overflow-wrap: anywhere; }
.rs-doc-header__title:focus { outline: none; }
.rs-doc-header__lead { margin: var(--space-3) 0 0; color: var(--text-secondary); word-break: keep-all; }
.rs-doc-header__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-5); padding-bottom: var(--space-6); border-bottom: 1px solid var(--border); color: var(--text-secondary); }
.rs-doc-header__meta-item { display: inline-flex; align-items: center; gap: 6px; }
.rs-doc-header__meta-item--success { color: var(--success-text); }

/* ---------- Prose (Markdown document) ---------- */
.rs-prose { max-width: var(--size-prose); color: var(--text-body); word-break: keep-all; overflow-wrap: break-word; }
.rs-prose > :first-child { margin-top: 0; }
.rs-prose > :last-child { margin-bottom: 0; }
.rs-prose p { margin: 0 0 var(--space-5); }
.rs-prose h1, .rs-prose h2, .rs-prose h3, .rs-prose h4, .rs-prose h5, .rs-prose h6 { color: var(--text); scroll-margin-top: calc(var(--size-header) + var(--space-6)); }
.rs-prose h1 { margin: var(--space-16) 0 var(--space-5); }
.rs-prose h2 { margin: var(--space-16) 0 var(--space-4); }
.rs-prose h3 { margin: var(--space-10) 0 var(--space-3); }
.rs-prose h4, .rs-prose h5, .rs-prose h6 { margin: var(--space-8) 0 var(--space-2); }
.rs-prose h2 + h3 { margin-top: var(--space-6); }
.rs-prose strong { color: var(--text); font-weight: 700; }
.rs-prose em { font-style: italic; }
.rs-prose a {
  border-radius: 2px; color: var(--primary-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--primary-text) 35%, transparent);
  transition: text-decoration-color var(--rs-fast) var(--rs-ease);
}
.rs-prose a:hover { text-decoration-color: currentColor; }
.rs-prose a .rs-ext { margin: -2px 0 0 2px; }
.rs-prose ul, .rs-prose ol { margin: 0 0 var(--space-5); padding-left: 1.5em; }
.rs-prose li { margin: var(--space-1) 0; padding-left: 2px; }
.rs-prose li > ul, .rs-prose li > ol { margin: var(--space-1) 0 var(--space-2); }
.rs-prose li > p { margin: 0 0 var(--space-2); }
.rs-prose ul > li::marker { color: var(--text-secondary); }
.rs-prose ol > li::marker { color: var(--text-subtle); font-weight: 600; font-variant-numeric: tabular-nums; }
.rs-prose blockquote { margin: var(--space-6) 0; padding: 2px 0 2px var(--space-5); border-left: 3px solid var(--border-strong); color: var(--text-subtle); }
.rs-prose blockquote > :last-child { margin-bottom: 0; }
.rs-prose :not(pre) > code { padding: 0.15em 0.4em; border-radius: var(--radius-xs); background: var(--surface-sunken); color: var(--text); font-family: var(--font-mono); overflow-wrap: anywhere; }
.rs-prose hr { height: 1px; margin: var(--space-12) 0; border: 0; background: var(--border); }
.rs-prose img { max-width: 100%; height: auto; }
.rs-table-wrap { margin: var(--space-8) 0; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); -webkit-overflow-scrolling: touch; }
.rs-table-wrap table { width: 100%; min-width: 520px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rs-table-wrap th { padding: 10px var(--space-4); border-bottom: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 600; text-align: left; white-space: nowrap; }
.rs-table-wrap td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); color: var(--text-body); vertical-align: top; }
.rs-table-wrap tr:last-child td { border-bottom: 0; }
.rs-table-wrap [align="center"] { text-align: center; }
.rs-table-wrap [align="right"] { text-align: right; }

/* ---------- Callout ---------- */
.rs-callout { display: flex; gap: var(--space-3); margin: var(--space-6) 0; padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--primary-soft); color: var(--text-body); }
.rs-callout__icon { display: flex; flex: none; padding-top: 1px; color: var(--primary-text); }
.rs-callout__content { flex: 1; min-width: 0; }
.rs-callout .rs-callout__title { margin: 0; color: var(--primary-text); line-height: 22px; }
.rs-callout__body { margin-top: var(--space-1); }
.rs-callout .rs-callout__body p, .rs-callout .rs-callout__body ul, .rs-callout .rs-callout__body ol { margin: 0 0 var(--space-2); }
.rs-callout .rs-callout__body > :last-child { margin-bottom: 0; }
.rs-callout--tip { background: var(--success-soft); }
.rs-callout--tip .rs-callout__icon, .rs-callout--tip .rs-callout__title { color: var(--success-text); }
.rs-callout--important { background: var(--surface-sunken); }
.rs-callout--important .rs-callout__icon, .rs-callout--important .rs-callout__title { color: var(--text); }
.rs-callout--warning { background: var(--warning-soft); }
.rs-callout--warning .rs-callout__icon, .rs-callout--warning .rs-callout__title { color: var(--warning-text); }
.rs-callout--danger { background: var(--danger-soft); }
.rs-callout--danger .rs-callout__icon, .rs-callout--danger .rs-callout__title { color: var(--danger-text); }

/* ---------- CodeBlock ---------- */
.rs-code { margin: var(--space-6) 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.rs-code__head { display: flex; align-items: center; gap: var(--space-3); min-height: 40px; padding: 0 var(--space-1) 0 var(--space-4); border-bottom: 1px solid var(--border); color: var(--text-subtle); }
.rs-code__file { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; color: var(--text); font-family: var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }
.rs-code__lang { flex: none; }
.rs-code__file + .rs-code__lang::before { content: "·"; margin-right: var(--space-3); color: var(--text-subtle); }
.rs-code__copy { margin-left: auto; }
.rs-code__pre { margin: 0; padding: var(--space-4) var(--space-5); overflow-x: auto; tab-size: 2; -webkit-overflow-scrolling: touch; }
.rs-code__pre code { display: block; width: max-content; min-width: 100%; color: var(--text-body); white-space: pre; }
.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-literal, .hljs-type, .hljs-doctag, .hljs-selector-pseudo { color: var(--syntax-keyword); }
.hljs-string, .hljs-regexp, .hljs-template-string, .hljs-addition, .hljs-symbol, .hljs-link { color: var(--syntax-string); }
.hljs-number, .hljs-variable.constant_, .hljs-selector-attr, .hljs-bullet { color: var(--syntax-number); }
.hljs-title, .hljs-title.function_, .hljs-name, .hljs-section, .hljs-selector-id, .hljs-selector-class { color: var(--syntax-function); }
.hljs-attr, .hljs-attribute, .hljs-property, .hljs-variable, .hljs-template-variable, .hljs-params { color: var(--syntax-attr); }
.hljs-comment, .hljs-meta, .hljs-quote, .hljs-deletion { color: var(--syntax-comment); }
.hljs-comment, .hljs-quote { font-style: italic; }
.hljs-tag, .hljs-punctuation, .hljs-operator { color: var(--text-subtle); }

/* ---------- Figure ---------- */
.rs-figure { margin: var(--space-8) 0; }
.rs-figure__frame {
  position: relative; display: grid; place-items: center; width: 100%; padding: 0; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); cursor: zoom-in;
}
.rs-figure__frame img { display: block; max-width: 100%; height: auto; }
.rs-figure__zoom {
  position: absolute; right: var(--space-3); bottom: var(--space-3);
  display: grid; place-items: center; width: var(--size-control-sm); height: var(--size-control-sm);
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--text-subtle); box-shadow: var(--shadow-sm);
  opacity: 0; transform: translateY(2px); transition: opacity var(--rs-fast) var(--rs-ease), transform var(--rs-fast) var(--rs-ease);
}
.rs-figure__frame:hover .rs-figure__zoom, .rs-figure__frame:focus-visible .rs-figure__zoom { opacity: 1; transform: none; }
@media (hover: none) { .rs-figure__zoom { opacity: 1; transform: none; } }
.rs-figure figcaption { margin-top: var(--space-3); color: var(--text-secondary); text-align: center; word-break: keep-all; }

/* ---------- Small screens ---------- */
@media (max-width: 767px) {
  .rs-prose.prose-body { font-size: 16px; }
  .rs-doc-header__title.prose-h1 { font-size: 28px; line-height: 38px; }
  .rs-prose .prose-h2 { font-size: 22px; line-height: 32px; }
  .rs-prose .prose-h3 { font-size: 19px; line-height: 28px; }
  .rs-prose h2 { margin-top: var(--space-12); }
  .rs-code__pre { padding: var(--space-4); }
  .rs-callout { padding: var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}