:root {
  color-scheme: light;
  --paper: #f4f0e6;
  --paper-deep: #eae3d4;
  --paper-light: #fbf9f3;
  --ink: #1d201d;
  --ink-soft: #60645d;
  --rule: rgba(29, 32, 29, 0.17);
  --accent: #bd422c;
  --accent-dark: #8f2f20;
  --success: #2f6b50;
  --gold: #a07c22;
  --atlas: #171b19;
  --atlas-soft: #aeb6ae;
  --topbar: 62px;
  --atlas-width: 320px;
  --reader-scale: 1.26;
  --serif: "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", Georgia, serif;
  --sans: Inter, "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar) + 28px);
  background: var(--paper);
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 6%, rgba(189, 66, 44, 0.045), transparent 24rem),
    linear-gradient(90deg, rgba(29, 32, 29, 0.018) 1px, transparent 1px),
    var(--paper);
  background-size: auto, 28px 28px, auto;
  font-family: var(--sans);
  line-height: 1.55;
  transition: background-color .25s ease, color .25s ease;
}

button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.read-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: 3px;
  background: transparent;
}

.read-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--gold), var(--success));
  transition: width .18s linear;
}

.icon-button,
.text-button {
  border: 0;
  background: transparent;
  cursor: pointer;
}

.icon-button {
  display: inline-grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--rule);
  border-radius: 50%;
  font-weight: 700;
}

.icon-button:hover { border-color: var(--accent); color: var(--accent); }
.icon-button:disabled { opacity: .35; cursor: not-allowed; }

.atlas-open > span { display: grid; width: 16px; gap: 3px; }
.atlas-open > span i { display: block; height: 1px; background: currentColor; transition: width .2s ease, transform .2s ease; }
.atlas-open > span i:nth-child(2) { width: 11px; }
.atlas-open:hover > span i:nth-child(2) { width: 16px; }

.topbar {
  position: fixed;
  inset: 0 0 auto var(--atlas-width);
  z-index: 60;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  height: var(--topbar);
  padding: 0 28px;
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 91%, transparent);
  backdrop-filter: blur(18px);
  transition: left .32s cubic-bezier(.2,.75,.25,1);
}

body:not(.atlas-open) .topbar { left: 0; }

.topbar-wordmark {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-decoration: none;
}

.topbar-context {
  overflow: hidden;
  color: var(--ink-soft);
  font-size: .82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-actions { display: grid; grid-auto-flow: column; grid-auto-columns: 58px; gap: 5px; align-items: center; }
.mobile-tools-toggle { display: none; }

.text-button {
  display: inline-grid;
  width: 100%;
  min-height: 38px;
  padding: 0 8px;
  place-items: center;
  border: 1px solid transparent;
  color: var(--ink-soft);
  font-size: .84rem;
}

.text-button:hover { border-color: var(--rule); color: var(--accent); background: rgba(255,255,255,.34); }

.atlas {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 80;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  width: var(--atlas-width);
  overflow: hidden;
  color: #f2f1eb;
  background:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    radial-gradient(circle at 18% 10%, rgba(189,66,44,.12), transparent 33%),
    var(--atlas);
  background-size: 32px 32px, 32px 32px, auto, auto;
  box-shadow: 20px 0 70px rgba(10,14,11,.16);
  transform: translateX(-100%);
  transition: transform .32s cubic-bezier(.2,.75,.25,1);
}

body.atlas-open .atlas { transform: translateX(0); }

.atlas-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 28px 22px 17px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.atlas-brand {
  font-family: var(--serif);
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-decoration: none;
}

.atlas-head p {
  margin: 4px 0 0;
  color: var(--atlas-soft);
  font-size: .75rem;
}

.atlas .icon-button { border-color: rgba(255,255,255,.18); color: #fff; }

.atlas-search {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  margin: 17px 18px 14px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.025);
  color: var(--atlas-soft);
  font-size: .72rem;
  letter-spacing: .08em;
}

.atlas-search input {
  min-width: 0;
  border: 0;
  outline: 0;
  color: #fff;
  background: transparent;
}

.atlas-search input::placeholder { color: #717b73; }

.book-switcher {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 0 14px 16px;
  scrollbar-width: none;
}

.book-switcher::-webkit-scrollbar { display: none; }

.book-switcher button {
  flex: 0 0 auto;
  padding: 7px 9px 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  color: #7f8a82;
  background: transparent;
  font-size: .74rem;
  cursor: pointer;
}

.book-switcher button:hover,
.book-switcher button.active { border-color: #e27762; color: #fff; text-shadow: 0 0 18px rgba(226,119,98,.4); }

.lesson-index {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 3px 12px 30px 14px;
  scrollbar-color: #3a423d transparent;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.unit-marker {
  position: relative;
  margin: 24px 10px 8px;
  padding-left: 17px;
  color: #8b958d;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.unit-marker::before { position: absolute; top: 50%; left: 0; width: 9px; height: 1px; background: #e27762; content: ""; }

.lesson-link {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: baseline;
  width: 100%;
  padding: 10px 9px 10px 12px;
  border: 0;
  border-left: 1px solid rgba(255,255,255,.08);
  text-align: left;
  color: #cbd1cb;
  background: transparent;
  cursor: pointer;
}

.lesson-link > span { color: #626d65; font: 700 .64rem var(--sans); }
.lesson-link strong { overflow: hidden; font-size: .82rem; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.lesson-link small { color: #626d65; font-size: .63rem; white-space: nowrap; }
.lesson-link:hover { border-left-color: rgba(226,119,98,.48); color: #fff; background: linear-gradient(90deg,rgba(226,119,98,.08),transparent); }
.lesson-link.active { border-left: 3px solid #e27762; padding-left: 10px; color: #fff; background: linear-gradient(90deg,rgba(226,119,98,.15),rgba(255,255,255,.035) 68%,transparent); }
.lesson-link.active > span { color: #e27762; }
.lesson-link.overview { color: #9fa8a0; }
.index-empty { padding: 22px; color: var(--atlas-soft); font-size: .82rem; }

.atlas-foot {
  display: flex;
  justify-content: space-between;
  padding: 14px 22px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255,255,255,.12);
  color: var(--atlas-soft);
  font-size: .72rem;
}

.atlas-foot strong { color: #fff; }

.atlas-scrim {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none;
  border: 0;
  background: rgba(10, 13, 11, .42);
  backdrop-filter: blur(2px);
}

.lesson-shell {
  margin-left: var(--atlas-width);
  padding-top: var(--topbar);
  transition: margin-left .32s cubic-bezier(.2,.75,.25,1);
}

body:not(.atlas-open) .lesson-shell { margin-left: 0; }

.lesson-masthead {
  position: relative;
  display: grid;
  grid-template-areas:
    "copy portrait mastery"
    "orientation portrait mastery";
  grid-template-columns: minmax(0, 1fr) minmax(190px, 25vw) minmax(210px, 248px);
  gap: 24px;
  align-items: center;
  min-height: 420px;
  overflow: hidden;
  padding: clamp(58px, 7vw, 88px) max(7vw, 42px) 46px;
  border-bottom: 1px solid var(--rule);
  background:
    linear-gradient(110deg, transparent 0 64%, rgba(189,66,44,.07) 64% 64.3%, transparent 64.3%),
    radial-gradient(circle at 78% 50%, rgba(189,66,44,.09), transparent 26rem);
}

.masthead-copy { position: relative; z-index: 2; min-width: 0; grid-area: copy; }

.masthead-path {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0 0 20px;
  color: var(--ink-soft);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
}

.masthead-path i { width: 34px; height: 1px; background: var(--accent); }
.masthead-path span:last-child { color: var(--accent-dark); }

.section-label {
  margin: 0 0 16px;
  color: var(--accent);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.lesson-masthead h1 {
  width: 100%;
  max-width: none;
  margin: 0;
  font: 800 clamp(2.8rem, 6.5vw, 6.8rem)/.98 var(--serif);
  letter-spacing: -.04em;
  white-space: nowrap;
}

.lesson-portraits {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 250px;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  grid-area: portrait;
}

.lesson-masthead .orientation {
  position: relative;
  z-index: 2;
  display: grid;
  grid-area: orientation;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 22px;
  align-items: start;
  max-width: 880px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}
.lesson-masthead .orientation .section-label { grid-column: 1; margin: 4px 0 0; white-space: nowrap; }
.lesson-masthead .orientation h2 { grid-column: 1; margin: 0; font: 760 1.35rem/1.2 var(--serif); }
.lesson-masthead #orientation-content { grid-row: 1 / span 2; grid-column: 2; min-width: 0; }
.lesson-masthead .orientation-line { max-width: none; font-size: clamp(.96rem, 1.25vw, 1.14rem); line-height: 1.8; }

.lesson-portraits::before {
  position: absolute;
  width: min(25vw, 310px);
  aspect-ratio: 1;
  border: 1px solid rgba(189,66,44,.2);
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 38px, rgba(189,66,44,.055) 39px 40px);
  content: "";
}

.lesson-portraits .portrait-choice {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: clamp(116px, 15vw, 212px);
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(189,66,44,.2);
  border-radius: 50%;
  color: #fff;
  background: #222925;
  box-shadow: 0 28px 55px rgba(31,41,37,.22);
  cursor: pointer;
  transform: translate(-50%, -50%) scale(.72);
  transition: width .35s cubic-bezier(.2,.8,.2,1), transform .35s cubic-bezier(.2,.8,.2,1), filter .3s ease;
  text-decoration: none;
}

.lesson-portraits .portrait-choice:first-child { z-index: 3; width: clamp(154px, 17vw, 230px); transform: translate(-50%, -50%); }
.lesson-portraits .portrait-choice:nth-child(2) { z-index: 2; transform: translate(-112%, -38%) scale(.72) rotate(-4deg); }
.lesson-portraits .portrait-choice:nth-child(3) { z-index: 2; transform: translate(12%, -38%) scale(.72) rotate(4deg); }
.lesson-portraits .portrait-choice:nth-child(4) { z-index: 1; transform: translate(-50%, 16%) scale(.58); }
.lesson-portraits .portrait-choice:hover { z-index: 5; filter: saturate(1.08) brightness(1.04); }
.lesson-portraits .portrait-choice:focus-visible { outline: 3px solid var(--gold); outline-offset: 5px; }
.lesson-portraits .portrait-choice > span { font: 800 5rem var(--serif); opacity: .22; }
.lesson-portraits img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: sepia(.08) contrast(1.04); }
.lesson-portraits .portrait-choice::after { position: absolute; inset: 48% 0 0; background: linear-gradient(transparent, rgba(12,15,13,.82)); content: ""; }
.lesson-portraits .portrait-choice small { position: absolute; right: 8px; bottom: 28%; left: 8px; z-index: 2; color: rgba(255,255,255,.78); font: 650 .64rem/1.25 var(--sans); letter-spacing: .06em; text-align: center; }
.lesson-portraits .portrait-choice b { position: absolute; right: 0; bottom: 12%; left: 0; z-index: 2; font: 700 .82rem var(--serif); letter-spacing: .16em; text-align: center; }
.lesson-portraits .portrait-choice.name-card img { filter: none; }
.lesson-portraits .representative-choice { cursor: pointer; }
.source-portrait {
  position: relative;
  display: block;
  width: clamp(126px, 13vw, 184px);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid rgba(189,66,44,.24);
  border-radius: 4px 14px 14px 4px;
  background: #d7d1c2;
  box-shadow: -8px 12px 0 rgba(87,71,51,.08), 0 25px 52px rgba(31,41,37,.2);
  transform: rotate(1.5deg);
}
.source-portrait::after { position: absolute; inset: 52% 0 0; background: linear-gradient(transparent, rgba(18,20,17,.86)); content: ""; }
.source-portrait img { filter: sepia(.1) contrast(1.02); }
.source-portrait b { position: absolute; right: 10px; bottom: 11px; left: 10px; z-index: 1; color: #fff; font: 700 .78rem/1.4 var(--serif); letter-spacing: .08em; text-align: center; }
.source-portrait:focus-visible { outline: 3px solid var(--gold); outline-offset: 5px; }
.portrait-constellation { position: relative; display: grid; width: 240px; height: 240px; place-items: center; border: 1px solid var(--rule); border-radius: 50%; color: var(--accent); font: 700 1rem var(--serif); }
.portrait-constellation i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 20px var(--accent); }
.portrait-constellation i:nth-child(1) { top: 17%; left: 22%; }
.portrait-constellation i:nth-child(2) { right: 12%; bottom: 37%; width: 5px; height: 5px; }
.portrait-constellation i:nth-child(3) { bottom: 12%; left: 38%; width: 3px; height: 3px; }

.lesson-lead {
  max-width: 750px;
  margin: 28px 0 0;
  color: var(--ink-soft);
  font: clamp(1.05rem, 1.6vw, 1.32rem)/1.8 var(--serif);
}

.lesson-route {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 36px;
}

.lesson-route span {
  padding: 6px 16px;
  border-left: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: .76rem;
}

.lesson-route span:first-child { padding-left: 0; border-left: 0; }

.study-layout {
  display: block;
  max-width: 1160px;
  margin: 0 auto;
  padding: 60px clamp(28px, 5vw, 76px) 140px;
}

.reading-column { min-width: 0; }

.reading-column > section {
  padding: 60px 0;
  border-bottom: 1px solid var(--rule);
}

.reading-column > section:first-child { padding-top: 42px; }

.reading-column h2 {
  margin: 0;
  font: 750 clamp(2rem, 4vw, 3.5rem)/1.08 var(--serif);
  letter-spacing: -.035em;
}

.section-head {
  display: flex;
  gap: 28px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 32px;
}

.section-head > p {
  max-width: 280px;
  margin: 0;
  color: var(--ink-soft);
  font-size: .78rem;
  text-align: right;
}

.lesson-frontmatter { max-width: 780px; font: 1.12rem/1.9 var(--serif); }
.lesson-frontmatter > :first-child { margin-top: 0; }
.lesson-frontmatter > :last-child { margin-bottom: 0; }

.orientation-line { max-width: 780px; margin: 0; font: clamp(1.08rem,1.7vw,1.36rem)/1.9 var(--serif); }
.orientation-line a { color: var(--accent-dark); text-decoration: none; border-bottom: 1px solid rgba(189,66,44,.35); }
.orientation-line a:hover { border-bottom-color: currentColor; }

.lens-line {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 46px;
  border-top: 1px solid var(--ink);
}

.lens-line div {
  display: grid;
  gap: 18px;
  padding: 18px 22px 22px 0;
  border-right: 1px solid var(--rule);
}

.lens-line div + div { padding-left: 22px; }
.lens-line div:last-child { border-right: 0; }
.lens-line span { color: var(--accent); font-size: .7rem; }
.lens-line strong { font: 700 1.05rem var(--serif); }

.text-flow {
  font: calc(1.12rem * var(--reader-scale))/2.02 var(--serif);
  letter-spacing: .025em;
}

.reader-size { display: flex; gap: 8px; align-items: center; }
.reader-size #font-down,
.reader-size #font-up,
.reader-size #font-label { display: none; }
body.focus-mode .reader-size #font-down,
body.focus-mode .reader-size #font-up,
body.focus-mode .reader-size #font-label { display: inline-grid; place-items: center; }
.reader-size #font-up { white-space: nowrap; letter-spacing: 0; font-variant-numeric: lining-nums; line-height: 1; }
.reader-size button {
  width: 38px;
  height: 34px;
  border: 1px solid var(--rule);
  color: var(--ink);
  background: transparent;
  cursor: pointer;
}
.reader-size #focus-button { width: auto; min-width: 58px; padding: 0 11px; }
.reader-size #focus-button[aria-pressed="true"] { border-color: var(--ink); color: #fff; background: var(--ink); }
.reader-size button:hover { border-color: var(--accent); color: var(--accent); }
.reader-size button:disabled { opacity: .32; cursor: default; }
.reader-size span { min-width: 44px; color: var(--ink-soft); font-size: .7rem; text-align: center; }

.primary-text > p,
.primary-text > blockquote,
.primary-text > ul,
.primary-text > ol { max-width: 760px; margin: 1.25em auto; }

.primary-text,
.extension-body { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }

.primary-text > p,
.extension-body > p { min-width: 0; overflow-wrap: anywhere; }

.primary-text a,
.extension-body a { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }

.primary-text pre,
.extension-body pre,
.primary-text table,
.extension-body table { display: block; max-width: 100%; overflow-x: auto; white-space: pre-wrap; }

.primary-text h2,
.primary-text h3 {
  max-width: 760px;
  margin: 2.6em auto 1em;
  font-size: calc(1.65rem * var(--reader-scale));
  letter-spacing: 0;
}

.primary-text blockquote {
  padding: 10px 0 10px 25px;
  border-left: 3px solid var(--accent);
  color: #4d504a;
}

.primary-text a { text-decoration-color: rgba(189,66,44,.4); text-underline-offset: 3px; }
.primary-text img,
.extension-body img {
  display: block;
  max-width: min(100%, 760px);
  max-height: 760px;
  margin: 34px auto;
  object-fit: contain;
  cursor: zoom-in;
}

.primary-text .lightbox-wrapper { display: contents; }
.primary-text s { text-decoration-color: var(--accent); }
.source-emphasis { color: var(--accent-dark); }
.footnotes-list { max-width: 760px; margin: 50px auto 0; color: var(--ink-soft); font-size: .86em; }

.reader-front-matter,
.reader-guidance,
.reader-annotations {
  max-width: 760px;
  margin: 0 auto 32px;
  padding: 18px 22px;
  border-left: 3px solid var(--rule);
  color: var(--ink-soft);
  background: rgba(255, 255, 255, .5);
  font: .9em/1.8 var(--serif);
}

.reader-guidance { border-left-color: var(--accent); }
.reader-front-matter p,
.reader-guidance p,
.reader-annotations p { margin: .45em 0; }
.reader-annotations { margin-top: 48px; border-left: 0; border-top: 1px solid var(--rule); background: transparent; }
.reader-annotations h3 { margin: 0 0 12px; font: 700 .82rem var(--sans); letter-spacing: .12em; }
.reader-annotations ol { margin: 0; padding-left: 1.7em; }
.reader-annotations li { padding: .35em 0 .55em .35em; scroll-margin-top: 96px; }
.reader-media { display: block; max-width: 760px; margin: 34px auto; }
.reader-media img { width: auto; height: auto; margin: 0; }
.reader-media-unavailable,
.reader-link-blocked { color: var(--ink-soft); text-decoration: line-through; text-decoration-thickness: 1px; }
.reader-table-wrap { max-width: 100%; overflow-x: auto; }
.reader-table-wrap table { width: 100%; border-collapse: collapse; }
.reader-table-wrap th,
.reader-table-wrap td { padding: .55em .7em; border: 1px solid var(--rule); vertical-align: top; }

.extension-reading {
  max-width: 760px;
  margin: 28px auto 0;
  border-top: 1px solid var(--rule);
}

.extension-reading summary {
  padding: 18px 0;
  color: var(--ink-soft);
  font: .84rem/1.5 var(--sans);
  cursor: pointer;
  list-style: none;
}

.extension-reading summary::-webkit-details-marker { display: none; }
.extension-reading summary span { margin-right: 16px; color: var(--accent); font-size: .68rem; }
.extension-body { padding: 8px 0 24px; }

.material-list { border-top: 1px solid var(--ink); }

.material-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 150px auto;
  gap: 18px;
  align-items: center;
  width: 100%;
  padding: 19px 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  background: transparent;
  cursor: pointer;
  transition: padding .2s ease, color .2s ease;
}

.material-row:hover { padding-left: 10px; color: var(--accent); }
.material-row > span { color: var(--ink-soft); font-size: .7rem; }
.material-row strong { overflow: hidden; font: 650 .98rem var(--serif); text-overflow: ellipsis; white-space: nowrap; }
.material-row small { color: var(--ink-soft); font-size: .72rem; }
.material-row em { color: var(--accent); font-size: .72rem; font-style: normal; }

.lesson-media-content { margin-top: 4px; }
.lesson-media-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.slide-deck-card,
.media-pending {
  border: 1px solid var(--rule);
  background: rgba(255,255,255,.3);
}
.slide-deck-card { min-width: 0; padding: 16px; background: rgba(251, 249, 243, .54); }
.slide-deck-card > header { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 12px; }
.slide-deck-card h3 { margin: 0; font: 740 clamp(1.08rem, 2vw, 1.45rem)/1.35 var(--serif); }
.media-pending h3 { margin: 8px 0 10px; font: 740 clamp(1.45rem, 3vw, 2.3rem)/1.15 var(--serif); }
.media-card-kicker { color: var(--accent-dark); font-size: .65rem; font-weight: 800; letter-spacing: .18em; }
.slide-deck-preview-frame { display: grid; width: 100%; min-height: 520px; place-items: center; overflow: hidden; border: 1px solid var(--rule); background: #fff; }
.slide-deck-preview-frame iframe { width: 100%; height: 520px; border: 0; }
.slide-deck-preview-frame img,
.slide-deck-preview-frame video { width: 100%; max-height: 520px; object-fit: contain; }
.slide-deck-preview-frame audio { width: min(92%, 680px); }
.slide-deck-preview-frame > p { padding: 18px; color: var(--ink-soft); font-size: .72rem; }
.media-provenance { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); margin: 18px 0 0; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.media-provenance div { min-width: 0; padding: 12px 14px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.media-provenance dt { color: var(--ink-soft); font-size: .62rem; letter-spacing: .1em; }
.media-provenance dd { overflow-wrap: anywhere; margin: 5px 0 0; font: 650 .74rem/1.55 var(--serif); }
.media-pending { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 18px; align-items: center; padding: 26px; }
.media-pending > span { padding: 8px 10px; color: var(--accent-dark); border: 1px solid var(--accent); font-size: .62rem; font-weight: 800; letter-spacing: .12em; }
.media-pending h3 { margin-top: 0; font-size: 1.3rem; }
.media-pending p { margin: 0; color: var(--ink-soft); line-height: 1.7; }

.empty-state {
  margin: 0;
  padding: 28px 0;
  border-top: 1px solid var(--ink);
  color: var(--ink-soft);
  font: 1rem/1.8 var(--serif);
}

.check-stage { border-top: 1px solid var(--ink); }

.check-round {
  position: relative;
  padding: 28px 0 34px;
  border-bottom: 1px solid var(--rule);
}
.check-round::before { position: absolute; top: 0; left: -18px; width: 3px; height: 0; background: var(--success); content: ""; transition: height .4s ease; }
.check-round.complete::before { height: 100%; }
.check-round.complete { background: linear-gradient(90deg, rgba(42,111,78,.045), transparent 54%); }

.check-round header {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: baseline;
}

.stage-wadang { position: relative; display: inline-grid; width: 30px; height: 30px; place-items: center; color: var(--accent); }
.stage-wadang svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.stage-wadang svg circle, .stage-wadang svg path { fill: none; stroke: currentColor; stroke-width: 1.25; opacity: .46; }
.stage-wadang svg circle:last-child { fill: color-mix(in srgb, var(--paper) 84%, transparent); opacity: .92; }
.stage-wadang > b { position: relative; z-index: 1; color: currentColor; font: 750 .66rem/1 var(--serif); }
.check-round.complete .stage-wadang { color: var(--success); }
.check-round h3 { margin: 0; font: 730 1.5rem var(--serif); }
.check-round header b { color: var(--ink-soft); font-size: .72rem; }
.check-round.complete header b { color: var(--success); }
.check-round > p { max-width: 690px; margin: 18px 0; color: var(--ink-soft); }
.check-round textarea,
.check-round input,
.check-round select {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--rule);
  border-radius: 0;
  color: var(--ink);
  background: rgba(255,255,255,.42);
  font: .92rem/1.65 var(--sans);
}
.check-round textarea { display: block; margin: 12px 0; resize: vertical; }
.check-round input:focus, .check-round textarea:focus, .check-round select:focus { border-color: var(--accent); outline: 0; }
.defense-question, .structure-focus { max-width: 760px !important; color: var(--ink) !important; font: 1.05rem/1.8 var(--serif); }
.revision-row { display: grid; grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr); gap: 8px; }
.structure-options { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin: 18px 0; }
.structure-options label { position: relative; }
.structure-options input { position: absolute; opacity: 0; pointer-events: none; }
.structure-options span { display: block; padding: 13px; border: 1px solid var(--rule); cursor: pointer; }
.structure-options input:checked + span { border-color: var(--accent); color: var(--accent-dark); background: rgba(189,66,44,.07); }
.vocabulary-step { max-width: 680px; margin: 20px 0 4px; }
.vocabulary-progress { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center; }
.vocabulary-progress > span { position: relative; height: 5px; overflow: hidden; background: linear-gradient(90deg,rgba(189,66,44,.13),rgba(212,158,53,.12),rgba(42,111,78,.12)); }
.vocabulary-progress > span::after { position: absolute; inset: 0 auto 0 0; width: var(--vocabulary-progress); background: linear-gradient(90deg,var(--accent),var(--gold),var(--success)); content: ""; transition: width .42s cubic-bezier(.2,.8,.2,1); }
.vocabulary-progress b { color: var(--ink-soft); font-size: .68rem; font-weight: 650; }
.vocabulary-evidence-mode { margin: 9px 0 0 !important; color: var(--ink-soft) !important; font-size: .68rem !important; }
.vocabulary-step > button { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 22px; align-items: center; width: 100%; margin-top: 18px; padding: 18px 0; border: 0; border-bottom: 1px solid var(--ink); text-align: left; color: var(--ink); background: transparent; cursor: pointer; }
.vocabulary-step > button > span { color: var(--accent); font-size: .66rem; letter-spacing: .12em; }
.vocabulary-step > button > strong { font: 750 1.45rem var(--serif); }
.vocabulary-step > button > em { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--rule); border-radius: 50%; color: var(--accent); font-size: .7rem; font-style: normal; }
.vocabulary-step > button:hover strong { color: var(--accent-dark); }
.vocabulary-complete,.vocabulary-empty { margin: 20px 0 0 !important; color: var(--success) !important; font: 1rem/1.7 var(--serif); }
.vocab-quiz .quiz-item { margin-top: 18px; }
.vocab-quiz .quiz-item.quiz-advancing { pointer-events: none; animation: quiz-advance .22s ease both; }
.quiz-kicker { display: flex; gap: 12px; align-items: baseline; margin: 0 0 10px !important; color: var(--ink-soft) !important; font-size: .68rem !important; letter-spacing: .1em; }
.quiz-kicker b { color: var(--accent); font-weight: 700; }
.quiz-kicker i { font-style: normal; color: var(--gold, #a07c22); letter-spacing: .2em; }
.quiz-lookup { margin-left: auto; padding: 3px 10px; border: 1px solid var(--rule); border-radius: 999px; background: transparent; color: var(--accent-dark, var(--accent)); font-size: .7rem; cursor: pointer; }
.quiz-lookup:hover { border-color: var(--accent); }
.quiz-sentence { margin: 0 0 6px !important; padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--paper-light); color: var(--ink) !important; font: 1.02rem/1.9 var(--serif) !important; }
.quiz-sentence mark { background: transparent; color: var(--accent-dark, var(--accent)); font-weight: 750; }
.quiz-question { margin: 10px 0 12px !important; color: var(--ink) !important; font: 650 1rem/1.7 var(--serif) !important; }
.quiz-options { display: grid; gap: 8px; max-width: 640px; }
.quiz-options button { padding: 11px 16px; border: 1px solid var(--rule); background: transparent; color: var(--ink); font: .95rem/1.6 var(--serif); text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.quiz-options button:hover { border-color: var(--ink); }
.quiz-options button:disabled { cursor: default; }
.quiz-options button.correct { border-color: var(--success); color: var(--success); background: rgba(47,107,80,.07); font-weight: 700; }
.quiz-options button.wrong { border-color: var(--accent); color: var(--accent); background: rgba(189,66,44,.06); text-decoration: line-through; }
.quiz-explain { max-width: 640px; margin-top: 12px; padding: 12px 14px; border: 1px dashed var(--rule); color: var(--ink-soft); font-size: .88rem; line-height: 1.8; }
.quiz-explain.good { border-color: var(--success); color: var(--ink); }
.quiz-explain small { display: block; margin-top: 6px; color: var(--ink-soft); font-size: .72rem; }
.rating-scale { display: grid; grid-template-columns: repeat(5, 1fr); max-width: 520px; margin: 18px 0; }
.rating-scale button { display: grid; gap: 3px; padding: 12px; border: 1px solid var(--rule); border-right: 0; color: var(--ink); background: transparent; cursor: pointer; }
.rating-scale button:last-child { border-right: 1px solid var(--rule); }
.rating-scale button.active { color: #fff; background: var(--accent-dark); }
.rating-scale span { min-height: 1em; font-size: .58rem; }
.three-word-check { display: grid; grid-template-columns: minmax(0,1fr) 68px; gap: 8px; max-width: 760px; align-items: center; }
.three-word-fields { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.word-creation-prompt { margin-bottom: 8px !important; color: var(--ink) !important; font: 1rem/1.7 var(--serif); }
.auto-check-status { color: var(--ink-soft); font-size: .68rem; text-align: right; }
.read-check { display: inline-flex; gap: 12px; align-items: center; margin: 14px 0; padding: 13px 18px; border: 1px solid var(--ink); cursor: pointer; font: 650 .95rem var(--serif); }
.read-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--success); }
.rating-spectrum { position: relative; display: grid; grid-template-columns: repeat(5,1fr); max-width: 660px; margin: 26px 0 18px; }
.rating-line { position: absolute; top: 17px; right: 10%; left: 10%; height: 2px; background: linear-gradient(90deg, #a6aaa4, var(--gold), var(--accent)); opacity: .5; }
.rating-spectrum button { position: relative; z-index: 1; display: grid; gap: 5px; place-items: center; padding: 0; border: 0; color: var(--ink-soft); background: transparent; cursor: pointer; }
.rating-spectrum button i { display: block; width: 13px; height: 13px; border: 3px solid var(--paper); border-radius: 50%; background: var(--rule); box-shadow: 0 0 0 1px var(--rule); transition: transform .25s ease, background .25s ease, box-shadow .25s ease; }
.rating-spectrum button strong { font: 750 1.24rem var(--serif); }
.rating-spectrum button span { font-size: .64rem; letter-spacing: .08em; }
.rating-spectrum button:hover i, .rating-spectrum button.active i { background: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 22px rgba(189,66,44,.38); transform: scale(1.35); }
.rating-spectrum button.active { color: var(--accent-dark); }
.rating-numeric { max-width: 480px; }
.auto-save-status { margin: -4px 0 0 !important; color: var(--success) !important; font-size: .68rem !important; }
.interaction-result { max-width: 760px; margin-top: 18px; padding: 18px; border-left: 3px solid var(--success); background: rgba(42,111,78,.06); }
.interaction-result header { display: flex; grid-template-columns: none; justify-content: space-between; }
.interaction-result header span { color: var(--success); }
.interaction-evidence-status { display: inline-block; margin-top: 10px; padding: 4px 8px; border: 1px solid var(--rule); color: var(--ink-soft); font-size: .68rem; font-style: normal; letter-spacing: .04em; }
.interaction-evidence-status.anonymous { border-color: color-mix(in srgb,var(--gold) 62%,var(--rule)); color: var(--accent-dark); background: color-mix(in srgb,var(--gold) 9%,transparent); }
.interaction-evidence-status.ineligible { color: var(--ink-soft); }
.interaction-evidence-status.recorded { border-color: color-mix(in srgb,var(--success) 52%,var(--rule)); color: var(--success); }
.interaction-result p { margin: 8px 0 0; font-size: .82rem; }
.interaction-transcript { display: grid; min-width: 0; gap: 12px; max-width: 760px; margin-top: 18px; overflow-wrap: anywhere; }
.interaction-transcript:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.interaction-transcript > header { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.interaction-transcript > header strong { font: 720 .9rem var(--serif); }
.interaction-transcript > header span { color: var(--ink-soft); font-size: .7rem; }
.interaction-turn { min-width: 0; padding: 15px 16px; border-left: 3px solid color-mix(in srgb,var(--success) 64%,var(--rule)); background: rgba(42,111,78,.055); overflow-wrap: anywhere; }
.interaction-turn > header { display: flex; justify-content: space-between; color: var(--success); font-size: .72rem; }
.interaction-turn p { margin: 7px 0 0; color: var(--ink-soft); font-size: .8rem; line-height: 1.65; }
.interaction-turn p strong { display: block; margin-bottom: 2px; color: var(--ink); font: 680 .72rem var(--serif); }
.interaction-turn-student { padding-bottom: 8px; border-bottom: 1px dotted var(--rule); color: var(--ink) !important; }
.anonymous-learning-notice { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; align-items: center; margin: 0; padding: 16px 18px; border-top: 3px solid var(--gold); border-bottom: 1px solid var(--rule); background: color-mix(in srgb,var(--gold) 8%,var(--paper)); }
.anonymous-learning-notice strong { font: 720 .92rem var(--serif); }
.anonymous-learning-notice span { color: var(--ink-soft); font-size: .76rem; line-height: 1.65; }
.anonymous-learning-notice a { padding: 7px 10px; border: 1px solid var(--ink); color: var(--ink); font-size: .72rem; text-decoration: none; white-space: nowrap; }
.author-dialog { max-width: 760px; margin-top: 18px; padding: 18px 18px 14px; border: 1px solid color-mix(in srgb, var(--rule) 82%, transparent); background: linear-gradient(135deg, rgba(255,255,255,.38), rgba(255,250,240,.12)); }
.author-dialog-head { display: flex; gap: 9px; align-items: center; margin-bottom: 12px; color: var(--ink-soft); }
.author-dialog-head > strong { font: 680 .78rem var(--serif); letter-spacing: .06em; }
.author-dialog-avatar { position: relative; display: grid; width: 28px; height: 28px; overflow: hidden; place-items: center; border: 1px solid var(--rule); border-radius: 50%; background: var(--paper); }
.author-dialog-avatar img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.author-dialog-avatar b { font: 700 .7rem var(--serif); }
.author-dialog-body textarea:last-child { margin-bottom: 0; }
.dialog-action-row { display: flex; justify-content: flex-end; margin-top: 10px; }

.check-round blockquote,
.evidence-chip {
  margin: 22px 0 0;
  padding: 17px 20px;
  border-left: 3px solid var(--accent);
  background: rgba(255,255,255,.34);
  font: 1.02rem/1.8 var(--serif);
}

.structure-pieces {
  display: grid;
  gap: 8px;
  margin-top: 22px;
}

.structure-pieces button {
  position: relative;
  padding: 17px 54px 17px 18px;
  border: 1px solid var(--rule);
  text-align: left;
  color: var(--ink);
  background: rgba(255,255,255,.26);
  cursor: pointer;
}

.structure-pieces button::after {
  content: attr(data-choice);
  position: absolute;
  top: 50%;
  right: 18px;
  width: 24px;
  height: 24px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  text-align: center;
  line-height: 22px;
  transform: translateY(-50%);
}

.structure-pieces button:hover { border-color: var(--accent); }
.structure-pieces button.chosen { border-color: var(--accent); color: var(--accent-dark); }
.structure-pieces button.wrong { animation: nudge .28s ease; }
.structure-pieces button:disabled { cursor: default; opacity: .72; }
.structure-answer { margin-top: 15px; color: var(--ink-soft); font-size: .78rem; }

.defense-question { color: var(--ink) !important; font: 1.08rem/1.75 var(--serif); }
.evidence-chip { color: var(--ink-soft) !important; font-size: .9rem !important; }

#insight-answer {
  width: 100%;
  margin-top: 18px;
  padding: 18px;
  resize: vertical;
  border: 1px solid var(--rule);
  border-radius: 0;
  outline: none;
  color: var(--ink);
  background: rgba(255,255,255,.42);
  font: calc(1rem * var(--reader-scale))/1.8 var(--serif);
}

#insight-answer:focus { border-color: var(--accent); }

.check-action {
  min-height: 32px;
  margin: 0;
  padding: 6px 13px;
  border: 1px solid color-mix(in srgb, var(--ink-soft) 34%, transparent);
  color: color-mix(in srgb, var(--ink) 64%, transparent);
  background: rgba(255,255,255,.18);
  font-size: .72rem;
  cursor: pointer;
}

.check-action:hover { border-color: color-mix(in srgb, var(--accent) 58%, transparent); color: var(--accent-dark); background: rgba(189,66,44,.045); }
.check-action:disabled { opacity: .4; cursor: not-allowed; }
.check-action.subtle { padding: 7px 0; border: 0; color: var(--accent); background: transparent; font-size: .74rem; }

.insight-result {
  display: none;
  margin-top: 24px;
  padding: 24px 0 4px;
  border-top: 1px solid var(--success);
}

.insight-result.show { display: block; animation: rise .35s ease both; }
.insight-result > div { display: flex; justify-content: space-between; gap: 20px; }
.insight-result > div strong { font: 700 1.15rem var(--serif); }
.insight-result > div span { color: var(--success); font-weight: 800; }
.insight-result p { margin: 12px 0; color: var(--ink-soft); }

.matrix-links { margin-top: 38px; }
.matrix-route { border-top: 1px solid var(--ink); }

.matrix-route > a {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
}

.matrix-route > a:hover strong { color: var(--accent); transform: translateX(5px); }
.matrix-route > a span,
.matrix-route > a small { color: var(--ink-soft); font-size: .72rem; }
.matrix-route > a strong { font: 650 1.02rem var(--serif); transition: color .2s ease, transform .2s ease; }
.matrix-route > a::before { width: 7px; height: 7px; border-radius: 50%; background: var(--rule); content: ""; }
.matrix-route > a { grid-template-columns: 8px 130px minmax(0,1fr) auto; }
.matrix-route > a.matrix-together::before { background: var(--success); box-shadow: 0 0 0 4px rgba(42,111,78,.1); }
.matrix-route > a.matrix-ability::before { background: var(--accent); }

.lesson-chat .section-head > a { color: var(--ink-soft); font-size: .72rem; text-decoration: none; }
.lesson-chat .section-head > a:hover { color: var(--accent); }
.lesson-chat-frame { height: min(620px, 72vh); margin-top: 28px; overflow: hidden; border: 1px solid var(--rule); background: #0a0c14; overflow-anchor: none; }
.lesson-chat-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.lesson-chat-frame iframe[hidden] { display: none; }
.lesson-chat-placeholder {
  display: grid;
  width: 100%;
  height: 100%;
  place-content: center;
  justify-items: center;
  padding: 32px;
  color: #f7f4eb;
  text-align: center;
  background:
    radial-gradient(circle at 50% 20%, rgba(189,66,44,.2), transparent 16rem),
    #151a17;
}
.lesson-chat-placeholder[hidden] { display: none; }
.lesson-chat-placeholder strong { font: 750 clamp(1.35rem, 3vw, 2.1rem)/1.2 var(--serif); }
.lesson-chat-placeholder p { max-width: 34rem; margin: 12px 0 22px; color: #bdc5be; }
.lesson-chat-placeholder button {
  min-height: 44px;
  padding: 10px 22px;
  border: 1px solid rgba(255,255,255,.5);
  color: #fff;
  background: var(--accent-dark);
  cursor: pointer;
}
.lesson-chat-placeholder button:hover { background: var(--accent); }

.exam-anchor {
  padding: 28px 0 34px;
  border-bottom: 1px solid var(--ink);
}

.exam-anchor header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
  color: var(--accent);
  font-size: .7rem;
  letter-spacing: .08em;
}

.exam-anchor p {
  max-width: 780px;
  margin: 0;
  padding: 13px 0;
  border-top: 1px solid var(--rule);
  font: .96rem/1.7 var(--serif);
}

.exam-anchor .exam-more {
  display: inline-block;
  margin-top: 18px;
  color: var(--accent);
  font-size: .76rem;
  text-decoration: none;
}

.learning-rail {
  position: relative;
  z-index: 3;
  grid-area: mastery;
  align-self: start;
  overflow: hidden;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,.08));
}

.mastery-toggle { display: grid; grid-template-columns: minmax(0,1fr) auto 24px; gap: 10px; align-items: center; width: 100%; padding: 17px 14px 15px; border: 0; color: var(--ink); background: transparent; cursor: pointer; }
.mastery-toggle > span { font: 700 .9rem var(--serif); text-align: left; }
.mastery-toggle > strong { color: var(--accent-dark); font: 750 1.55rem/1 var(--serif); }
.mastery-toggle > strong small { margin-left: 2px; color: var(--ink-soft); font: .62rem var(--sans); }
.mastery-toggle > i { color: var(--ink-soft); font-size: .62rem; font-style: normal; letter-spacing: .08em; text-align: right; }
.mastery-panel { display: block; padding: 0 14px 14px; }
.learning-rail.collapsed .mastery-panel { display: none; }
.mastery-spectrum { height: 4px; margin-bottom: 8px; overflow: hidden; background: rgba(29,32,29,.09); }
.mastery-spectrum span { display: block; width: var(--mastery); height: 100%; background: linear-gradient(90deg,var(--accent),var(--gold),var(--success)); transition: width .45s cubic-bezier(.2,.8,.2,1); }

.checkpoint-list { margin: 0; padding: 0; list-style: none; }

.checkpoint-list li { border-bottom: 1px solid var(--rule); }
.checkpoint-list li:last-child { border-bottom: 0; }
.checkpoint-list button {
  display: grid;
  grid-template-columns: 22px minmax(0,1fr) auto;
  gap: 7px;
  align-items: center;
  width: 100%;
  padding: 10px 0;
  border: 0;
  text-align: left;
  background: transparent;
  cursor: pointer;
}
.checkpoint-list button > .stage-wadang { width: 22px; height: 22px; color: var(--accent); }
.checkpoint-list button > strong { overflow: hidden; font: 620 .78rem var(--serif); text-overflow: ellipsis; white-space: nowrap; }
.checkpoint-list button > em { color: var(--ink-soft); font-size: .58rem; font-style: normal; }
.checkpoint-list li.complete button { color: var(--success); }
.checkpoint-list li.complete button > span { color: var(--success); }
.checkpoint-list li.complete button > em { color: var(--success); }

.lexicon-scrim {
  position: fixed;
  inset: 0;
  z-index: 110;
  border: 0;
  background: rgba(10,13,11,.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
body.lexicon-open .lexicon-scrim { opacity: 1; pointer-events: auto; }

.lexicon-dock {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 120;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  width: min(560px, calc(100vw - 48px));
  height: min(660px, calc(100vh - 96px));
  overflow: hidden;
  border: 1px solid #3f4741;
  color: #f7f6ef;
  background: #171b19;
  box-shadow: 0 28px 80px rgba(8,10,9,.3);
  opacity: 0;
  pointer-events: none;
  transform: translateY(32px) scale(.985);
  transition: opacity .24s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}

.lexicon-dock.open { opacity: 1; pointer-events: auto; transform: none; }

.lexicon-dock > header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}

.lexicon-dock > header span { display: block; color: #89938b; font-size: .65rem; }
.lexicon-dock > header strong { display: block; max-width: 300px; overflow: hidden; font: 700 1.22rem var(--serif); text-overflow: ellipsis; white-space: nowrap; }
.dock-actions { display: flex; gap: 9px; align-items: center; }
.dock-actions a { color: #ff9e86; font-size: .7rem; text-decoration: none; white-space: nowrap; }
.dock-actions > button { min-width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.2); color: #fff; background: transparent; cursor: pointer; }
.lexicon-dock .icon-button { border-color: rgba(255,255,255,.2); color: #fff; }

.lexicon-switch {
  display: flex;
  gap: 0;
  padding: 0 20px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}

.lexicon-switch button {
  padding: 11px 18px 9px 0;
  border: 0;
  border-bottom: 2px solid transparent;
  color: #89938b;
  background: transparent;
  cursor: pointer;
}

.lexicon-switch button.active { border-color: var(--accent); color: #fff; }
.lexicon-switch > span { margin-left: auto; align-self: center; color: #89938b; font-size: .67rem; }
.lexicon-viewport { min-height: 0; overflow: hidden; background: #fff; }
.lexicon-dock iframe { width: 100%; height: 100%; border: 0; background: #fff; transform-origin: 0 0; }

dialog {
  padding: 0;
  border: 0;
  color: inherit;
  background: var(--paper-light);
  box-shadow: 0 35px 120px rgba(7,9,8,.34);
}

dialog::backdrop { background: rgba(14,17,15,.74); backdrop-filter: blur(4px); }
dialog[open] { animation: dialog-in .28s cubic-bezier(.2,.8,.2,1) both; }

.page-dialog {
  width: min(1260px, 95vw);
  height: min(920px, 94vh);
}

.dialog-bar {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--rule);
}

.dialog-bar span { display: block; color: var(--accent); font-size: .64rem; font-weight: 800; letter-spacing: .12em; }
.dialog-bar strong { display: block; font: 650 1.02rem var(--serif); }

.page-stage {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 58px;
  align-items: center;
  height: calc(100% - 158px);
  background: #242a26;
}

.page-stage figure { display: grid; height: 100%; min-height: 0; margin: 0; place-items: center; grid-template-rows: minmax(0,1fr) auto; }
.page-stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.page-stage figcaption { width: 100%; padding: 8px; color: #cdd2cd; font-size: .7rem; text-align: center; }
.page-arrow { height: 100%; border: 0; color: #fff; background: transparent; font-size: 2rem; cursor: pointer; }
.page-arrow:hover { background: rgba(255,255,255,.05); }
.page-arrow:disabled { opacity: .2; cursor: default; }

.page-strip {
  display: flex;
  gap: 8px;
  height: 94px;
  overflow-x: auto;
  padding: 10px 16px;
}

.page-strip button { display: grid; grid-template-columns: 48px auto; gap: 8px; align-items: center; flex: 0 0 auto; padding: 5px 9px 5px 5px; border: 1px solid var(--rule); background: transparent; cursor: pointer; }
.page-strip button.active { border-color: var(--accent); }
.page-strip img { width: 48px; height: 68px; object-fit: cover; }
.page-strip span { font-size: .68rem; }

.resource-dialog { width: 96vw; height: 94vh; background: #111513; }
.resource-dialog-bar { color: #f5f4ee; border-color: rgba(255,255,255,.14); }
.resource-dialog-bar > div:last-child { display: flex; gap: 12px; align-items: center; }
.resource-dialog-bar a { color: #ff9e86; font-size: .74rem; text-decoration: none; }
.resource-dialog-bar .icon-button { border-color: rgba(255,255,255,.2); }
.resource-dialog-stage { position: relative; display: grid; width: 100%; height: calc(100% - 64px); place-items: center; overflow: auto; background: #fff; }
.resource-dialog-stage > iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.resource-dialog-stage > img,
.resource-dialog-stage > video { display: block; width: 100%; height: 100%; object-fit: contain; }
.resource-dialog-stage > audio { width: min(90%, 860px); }

.preview-host { position: relative; }
.youtube-preview-play {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  min-height: inherit;
  padding: 0;
  place-items: center;
  overflow: hidden;
  border: 0;
  color: #fff;
  background: #101311;
  cursor: pointer;
}
.youtube-preview-play img { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; object-fit: cover; filter: brightness(.72); }
.youtube-preview-play span {
  position: relative;
  z-index: 1;
  display: inline-flex;
  min-width: 88px;
  min-height: 56px;
  padding: 12px 18px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #fff;
  background: rgba(189,66,44,.94);
  box-shadow: 0 10px 32px rgba(0,0,0,.28);
  font: 800 .86rem var(--sans);
}
.youtube-preview-play span::before { margin-right: 7px; content: "▶"; }
.youtube-preview-play:hover img { filter: brightness(.86); transform: scale(1.015); }
.youtube-preview-play:focus-visible { outline: 4px solid var(--gold); outline-offset: -4px; }
.material-preview-frame[data-preview-mode="remote-app"],
.material-preview-frame[data-preview-mode="youtube"] { min-height: 420px; }
.material-preview-frame[data-preview-mode="remote-app"] iframe,
.material-preview-frame[data-preview-mode="youtube"] iframe { height: 420px; }
.matrix-preview-frame[data-preview-mode="remote-app"],
.matrix-preview-frame[data-preview-mode="youtube"] { height: 300px; }
.preview-expand {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 999px;
  color: #fff;
  background: rgba(20,25,22,.84);
  box-shadow: 0 5px 16px rgba(0,0,0,.2);
  font: 750 .68rem var(--sans);
  cursor: pointer;
}
.preview-expand:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.annotated-read-completion { display: grid; gap: 10px; margin-top: 48px; padding: 24px; border: 1px solid var(--rule); border-left: 4px solid var(--accent); background: rgba(189,66,44,.045); }
.annotated-read-completion strong { font: 760 1.18rem var(--serif); }
.annotated-read-completion p { margin: 0; color: var(--ink-soft); font-size: .82rem; }
.annotated-read-completion button { justify-self: start; min-height: 44px; padding: 10px 18px; border: 1px solid var(--accent); color: #fff; background: var(--accent); font-weight: 750; cursor: pointer; }
.annotated-read-completion.complete { border-left-color: var(--success); background: rgba(47,107,80,.055); }

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  z-index: 150;
  max-width: calc(100vw - 40px);
  padding: 11px 17px;
  color: #fff;
  background: #202521;
  font-size: .78rem;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 16px);
  transition: opacity .2s ease, transform .2s ease;
}

.toast.show { opacity: 1; transform: translate(-50%, 0); }

body.lesson-enter .lesson-masthead h1,
body.lesson-enter .lesson-portraits,
body.lesson-enter .lesson-lead,
body.lesson-enter .lesson-route { animation: rise .55s cubic-bezier(.2,.8,.2,1) both; }
body.lesson-enter .lesson-lead { animation-delay: .06s; }
body.lesson-enter .lesson-route { animation-delay: .12s; }

body.focus-mode { background: var(--paper-light); }
body.focus-mode .learning-rail,
body.focus-mode .lesson-masthead,
body.focus-mode .orientation,
body.focus-mode .classroom-materials,
body.focus-mode .lesson-media,
body.focus-mode .learning-check,
body.focus-mode .lesson-chat,
body.focus-mode .transfer-matrix { display: none; }
body.focus-mode .study-layout { display: block; max-width: 860px; padding-top: 60px; }
body.focus-mode .reading-column > section { border-bottom: 0; }
body.focus-mode .read-progress { height: 5px; background: rgba(29,32,29,.05); }
body.focus-mode .read-progress span { box-shadow: 0 0 14px rgba(212,158,53,.22); }

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes dialog-in {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to { opacity: 1; transform: none; }
}

@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  35% { transform: translateX(-5px); }
  70% { transform: translateX(4px); }
}

@keyframes note-caret { 0%, 48% { opacity: 1; } 49%, 100% { opacity: 0; } }

@keyframes quiz-advance {
  0%, 55% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  .vocab-quiz .quiz-item.quiz-advancing { animation: none; }
}

/* 自學閉環 v2：無注疏初讀、跟文註釋、直接預覽與形成性評價 */
.skip-link {
  position: fixed;
  top: 8px;
  left: 50%;
  z-index: 180;
  padding: 8px 14px;
  border-radius: 999px;
  color: #fff;
  background: var(--accent-dark);
  transform: translate(-50%, -160%);
}
.skip-link:focus { transform: translate(-50%, 0); }

.first-read-gate { margin-top: 14px; }
.first-read-heading {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ink);
}
.first-read-heading span,
.first-read-heading p { color: var(--accent-dark); font: 750 .68rem var(--sans); letter-spacing: .12em; }
.first-read-heading h3 { margin: 4px 0 0; font: 760 clamp(1.7rem, 3vw, 2.6rem) var(--serif); }
.first-read-heading p { margin: 0; color: var(--ink-soft); }
.first-read-authority { max-width: 25rem; color: var(--ink-soft); font: 600 .64rem/1.65 var(--sans); letter-spacing: .02em; text-align: right; }
.first-read-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 42px; align-items: start; }
.first-read-document { min-width: 0; }
.first-read-instruction { margin: 0 0 24px; color: var(--ink-soft); font: 650 .84rem/1.65 var(--sans); }
.first-read-text { counter-reset: first-read-paragraph; font: calc(1.12rem * var(--reader-scale))/2.15 var(--serif); letter-spacing: .055em; }
.first-read-paragraph { position: relative; margin: 0 0 1.55em; text-align: justify; text-justify: inter-ideograph; }
.first-read-paragraph::before {
  position: absolute;
  right: calc(100% + 12px);
  top: .4em;
  color: var(--ink-soft);
  content: attr(data-ordinal);
  font: 650 .58rem var(--sans);
  opacity: .55;
}
.first-read-mark {
  padding: .03em .08em;
  color: inherit;
  background: linear-gradient(transparent 56%, rgba(190, 55, 38, .26) 56%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.first-read-sidebar { position: sticky; top: calc(var(--topbar) + 22px); max-height: calc(100vh - var(--topbar) - 44px); overflow: auto; padding: 18px; border: 1px solid var(--rule); background: rgba(251, 249, 243, .82); }
.first-read-sync { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; margin: 0 0 18px; padding: 10px 12px; border-left: 3px solid var(--success); background: rgba(47, 107, 80, .07); font: .7rem/1.5 var(--sans); }
.first-read-sync b { color: var(--success); }
.first-read-sync span { grid-column: 1 / -1; color: var(--ink-soft); }
.first-read-sync a { color: var(--accent-dark); font-weight: 750; }
.first-read-sync.local { border-left-color: var(--gold); background: rgba(160, 124, 34, .08); }
.first-read-sync.local b { color: #725714; }
.first-read-counter { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); font-size: .75rem; }
.first-read-counter strong { color: var(--accent-dark); }
.first-read-empty { color: var(--ink-soft); font-size: .76rem; }
.first-read-mark-list { display: grid; gap: 10px; margin: 14px 0; }
.first-read-mark-card { padding: 10px 0; border-bottom: 1px solid var(--rule); }
.first-read-mark-card header { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.first-read-mark-card header span { color: var(--ink-soft); font-size: .62rem; }
.first-read-mark-card header strong { color: var(--accent-dark); font: 750 1rem var(--serif); overflow-wrap: anywhere; }
.first-read-mark-card header button { border: 0; color: var(--ink-soft); background: transparent; cursor: pointer; font-size: .65rem; }
.first-read-mark-card p { margin: 7px 0 0 34px; color: var(--ink-soft); font-size: .74rem; }
.first-read-guess-form { margin: 14px 0; padding: 14px; border: 1px solid rgba(189, 66, 44, .35); background: rgba(189, 66, 44, .06); }
.first-read-guess-form > span { display: block; color: var(--ink-soft); font-size: .68rem; }
.first-read-guess-form > strong { display: block; margin: 4px 0 12px; color: var(--accent-dark); font: 760 1.15rem var(--serif); }
.first-read-guess-form label,
.first-read-submit label,
.correction-card label { display: grid; gap: 6px; color: var(--ink-soft); font-size: .72rem; }
.first-read-guess-form textarea,
.first-read-submit textarea,
.correction-card textarea { width: 100%; padding: 10px; border: 1px solid var(--rule); color: var(--ink); background: var(--paper-light); resize: vertical; }
.first-read-guess-form div { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.first-read-guess-form button,
.first-read-submit button,
.correction-card button { padding: 8px 11px; border: 1px solid var(--ink); background: transparent; cursor: pointer; font-size: .72rem; }
.first-read-guess-form button[type="submit"],
.first-read-submit button,
.correction-card button { color: #fff; border-color: var(--accent-dark); background: var(--accent-dark); }
.first-read-submit { display: grid; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 2px solid var(--ink); }
.first-read-submit button:disabled { opacity: .36; cursor: not-allowed; }
.first-read-submit small { color: var(--ink-soft); font-size: .66rem; }
.first-read-round-status { padding: 16px; border-left: 3px solid var(--accent); background: rgba(189, 66, 44, .05); }
.first-read-round-status.complete { display: grid; grid-template-columns: 1fr auto; gap: 4px 18px; border-left-color: var(--success); background: rgba(47, 107, 80, .06); }
.first-read-round-status.complete p { grid-column: 1 / -1; margin: 7px 0 0; color: var(--ink-soft); }

.first-read-submitted-review {
  display: block;
  margin: 0 0 42px;
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid var(--rule);
  background: rgba(251, 249, 243, .62);
}
.first-read-submitted-heading {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
  margin-bottom: 26px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ink);
}
.first-read-submitted-heading span,
.first-read-submitted-heading > p,
.first-read-submitted-summary > span,
.first-read-submitted-marks > header span { color: var(--ink-soft); font: 750 .66rem var(--sans); letter-spacing: .1em; }
.first-read-submitted-heading h3 { margin: 4px 0 0; font: 760 clamp(1.45rem, 2.5vw, 2.1rem) var(--serif); }
.first-read-submitted-heading > p { margin: 0; color: var(--success); }
.first-read-submitted-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 30%); gap: 36px; align-items: start; }
.first-read-submitted-document { min-width: 0; }
.first-read-submitted-record { display: grid; gap: 22px; padding: 18px; border-left: 2px solid var(--rule); background: rgba(255, 255, 255, .44); }
.first-read-submitted-summary p { margin: 8px 0 0; color: var(--ink); font: .92rem/1.8 var(--serif); white-space: pre-wrap; overflow-wrap: anywhere; }
.first-read-submitted-marks > header { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.first-read-submitted-marks > header strong { color: var(--accent-dark); font-size: .74rem; }
.first-read-submitted-record .first-read-mark-list { margin-bottom: 0; }
.first-read-submitted-record .first-read-mark-card header { grid-template-columns: 26px minmax(0, 1fr); }
.first-read-submitted-record .first-read-mark-card:last-child { border-bottom: 0; }

.reader-annotation-anchor {
  display: inline-block;
  white-space: nowrap;
}
.reader-note-sup { line-height: 0; vertical-align: super; white-space: nowrap; }

.reader-note-ref {
  position: relative;
  display: inline;
  margin: 0 .06em 0 .02em;
  padding: 0 .08em;
  border: 0;
  border-radius: 0;
  appearance: none;
  color: #725714;
  background: transparent;
  font: 800 .54em/.9 var(--sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-decoration: none;
  vertical-align: super;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}
.reader-note-sup .reader-note-ref { vertical-align: baseline; }
.reader-note-ref::before { position: absolute; inset: -.58em -.46em; content: ""; }
.reader-note-ref:hover,
.reader-note-ref:focus-visible,
.reader-note-ref[aria-expanded="true"] { color: var(--accent-dark); text-decoration: underline; text-decoration-thickness: .12em; text-underline-offset: .18em; }
.reader-note-ref:focus-visible { outline: 1px solid currentColor; outline-offset: .18em; }
.reader-inline-note { display: inline; margin: 0 .16em; }
.reader-inline-note[hidden] { display: none; }
.reader-inline-note-content {
  display: inline;
  padding: .22em .45em;
  border-bottom: 1px solid rgba(160, 124, 34, .38);
  color: #675420;
  background: rgba(255, 248, 213, .72);
  font: .72em/1.72 var(--sans);
  white-space: normal;
  overflow-wrap: anywhere;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  cursor: pointer;
}
.reader-inline-note-paragraph { display: inline; }
.reader-inline-note-paragraph + .reader-inline-note-paragraph::before { content: " "; }
.reader-inline-note-media { display: inline-flex; max-width: min(100%, 26rem); vertical-align: middle; }
.reader-annotations { display: none; }

.first-read-corrections { display: grid; gap: 14px; margin-top: 28px; padding-top: 22px; border-top: 2px solid var(--ink); }
.first-read-corrections > header { display: flex; justify-content: space-between; gap: 18px; align-items: end; }
.first-read-corrections > header div { display: grid; }
.first-read-corrections > header span { color: var(--ink-soft); font-size: .68rem; letter-spacing: .1em; }
.first-read-corrections > header strong { font: 750 1.15rem var(--serif); }
.first-read-corrections > header b { color: var(--success); font-size: .78rem; }
.correction-card { display: grid; gap: 10px; padding: 15px; border: 1px solid rgba(189, 66, 44, .25); background: rgba(189, 66, 44, .035); }
.correction-card p { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 8px; margin: 0; align-items: start; }
.correction-card mark { padding: 0 .25em; color: var(--accent-dark); background: rgba(189, 66, 44, .13); font: 750 1.02rem var(--serif); }
.correction-card p span { color: var(--ink-soft); font-size: .65rem; }
.correction-card.resolved { border-color: rgba(39, 91, 139, .3); background: rgba(39, 91, 139, .045); }
.correction-card .correction-saved { color: #275b8b; }
.correction-card form { display: grid; gap: 8px; }
.correction-card button { justify-self: end; border-color: #275b8b; background: #275b8b; }

.study-guide-deck { display: grid; gap: 16px; margin-top: 28px; padding-top: 22px; border-top: 2px solid var(--ink); }
.study-guide-deck > header { display: flex; justify-content: space-between; gap: 18px; align-items: end; }
.study-guide-deck > header div { display: grid; gap: 2px; }
.study-guide-deck > header span { color: var(--ink-soft); font-size: .68rem; letter-spacing: .1em; }
.study-guide-deck > header strong { font: 750 1.15rem var(--serif); }
.study-guide-deck > header > b { color: var(--accent-dark); font-size: .78rem; }
.study-guide-card { padding: clamp(16px, 3vw, 26px); border: 1px solid var(--rule); background: rgba(251, 249, 243, .62); }
.study-guide-source { display: flex; justify-content: space-between; gap: 14px; color: var(--ink-soft); font-size: .66rem; }
.study-guide-source i { font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
.study-guide-card h4 { margin: 14px 0 18px; font: 750 clamp(1.08rem, 2vw, 1.32rem)/1.65 var(--serif); }
.study-guide-quality-notes { display: flex; gap: 8px; margin: -7px 0 16px; padding: 9px 11px; border-left: 2px solid var(--gold); color: var(--ink-soft); background: rgba(160, 124, 34, .06); font-size: .72rem; line-height: 1.55; }
.study-guide-quality-notes strong { flex: 0 0 auto; color: #725714; }
.study-guide-response { display: grid; gap: 12px; }
.study-guide-response label { display: grid; gap: 7px; color: var(--ink-soft); font-size: .72rem; }
.study-guide-response textarea { width: 100%; padding: 12px; border: 1px solid var(--rule); color: var(--ink); background: var(--paper-light); font: inherit; line-height: 1.65; resize: vertical; }
.study-guide-reveal { justify-self: start; padding: 9px 13px; border: 1px solid var(--accent-dark); color: #fff; background: var(--accent-dark); cursor: pointer; }
.study-guide-response-saved { margin-bottom: 14px; padding: 12px 14px; border-left: 3px solid #275b8b; background: rgba(39, 91, 139, .05); }
.study-guide-response-saved span { color: #275b8b; font-size: .66rem; font-weight: 750; }
.study-guide-response-saved p { margin: 5px 0 0; white-space: pre-wrap; }
.study-guide-answer { padding: 14px; border: 1px solid rgba(160, 124, 34, .32); background: rgba(255, 248, 213, .55); }
.study-guide-answer > b { display: inline-block; margin-bottom: 8px; color: #725714; font-size: .72rem; }
.study-guide-answer p { margin: 5px 0 10px; white-space: pre-wrap; }
.study-guide-answer ol { margin: 7px 0 12px; padding-left: 1.4em; }
.study-guide-answer dl { display: grid; grid-template-columns: minmax(90px, auto) minmax(0, 1fr); gap: 6px 12px; margin: 8px 0; }
.study-guide-answer dt { color: var(--ink-soft); font-size: .72rem; font-weight: 750; }
.study-guide-answer dd { margin: 0; }
.study-guide-explanation { padding-top: 10px; border-top: 1px solid rgba(160, 124, 34, .28); color: var(--ink-soft); }
.study-guide-rubric { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(160, 124, 34, .28); }
.study-guide-rubric > strong { font-size: .72rem; }
.study-guide-sync { margin: 12px 0 0; padding: 11px 13px; border-left: 3px solid var(--gold); background: rgba(160, 124, 34, .07); }
.study-guide-sync.pending { color: var(--ink-soft); }
.study-guide-assessment { display: grid; gap: 8px; margin-top: 14px; padding: 14px; border: 1px solid rgba(189, 66, 44, .28); background: rgba(189, 66, 44, .045); }
.study-guide-assessment.passed { border-color: rgba(47, 107, 80, .32); background: rgba(47, 107, 80, .055); }
.study-guide-assessment header { display: flex; justify-content: space-between; gap: 12px; }
.study-guide-assessment header strong { color: var(--accent-dark); }
.study-guide-assessment.passed header strong { color: var(--success); }
.study-guide-assessment p { margin: 0; }
.study-guide-assessment dl { display: grid; grid-template-columns: minmax(72px, auto) minmax(0, 1fr); gap: 8px 12px; margin: 0; }
.study-guide-assessment dt { color: var(--ink-soft); font-size: .68rem; font-weight: 750; }
.study-guide-assessment dd { margin: 0; }
.study-guide-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 14px; }
.study-guide-actions button { padding: 8px 11px; border: 1px solid var(--rule); color: var(--ink); background: transparent; cursor: pointer; }
.study-guide-actions button:last-child { border-color: var(--accent-dark); color: #fff; background: var(--accent-dark); }
.study-guide-actions button:disabled { opacity: .5; cursor: wait; }
.study-guide-finished { margin: 0; padding: 18px; border-left: 3px solid var(--success); background: rgba(47, 107, 80, .06); }
.study-guide-held { display: grid; gap: 8px; padding: 14px; border: 1px dashed var(--rule); color: var(--ink-soft); }
.study-guide-held > strong { color: var(--ink); font-size: .74rem; }
.study-guide-held article { display: grid; gap: 5px; padding-top: 10px; border-top: 1px solid var(--rule); }
.study-guide-held h5 { margin: 0; color: var(--ink); font: 700 .86rem/1.55 var(--serif); }
.study-guide-held small { font-size: .66rem; }
.study-guide-held-answer { margin-top: 5px; padding: 11px; border-left: 2px solid var(--gold); color: var(--ink); background: rgba(255, 248, 213, .42); }
.study-guide-held-answer > b { color: #725714; font-size: .68rem; }
.study-guide-held-answer p { margin: 5px 0; white-space: pre-wrap; }
.study-guide-held-answer ol { margin: 6px 0; padding-left: 1.35em; }

.check-round.locked { opacity: .76; background: rgba(29, 32, 29, .025); }
.round-lock { display: flex; gap: 10px; align-items: center; padding: 15px; border: 1px dashed var(--rule); }
.round-lock span { color: var(--accent-dark); font-weight: 800; }

.interest-rating { max-width: 680px; margin: 24px 0 8px; }
.interest-rating-head { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.interest-rating-head span { font: 750 1.15rem var(--serif); }
.interest-rating-head output { color: var(--accent-dark); font-weight: 750; }
.interest-rating input[type="range"] { width: 100%; height: 24px; padding: 0; border: 0; accent-color: var(--accent); background: linear-gradient(90deg, var(--rule) 0 var(--rating), rgba(29,32,29,.08) var(--rating)); cursor: grab; }
.interest-rating input[type="range"]:active { cursor: grabbing; }
.interest-rating-scale { display: flex; justify-content: space-between; color: var(--ink-soft); font-size: .66rem; }
.interest-rating .auto-save-status { display: block; margin-top: 10px; color: var(--ink-soft); font-size: .68rem; }

.extension-reading { border-top: 1px solid var(--ink); }
.extension-reading > header { display: flex; justify-content: space-between; padding: 13px 0; color: var(--ink-soft); font-size: .72rem; }
.extension-reading > header b { color: var(--success); font-weight: 700; }
.extension-body { padding-bottom: 22px; }
.material-preview-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 24px; }
.material-preview-card { min-width: 0; padding: 14px; border: 1px solid var(--rule); background: rgba(251, 249, 243, .54); }
.material-preview-card header { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; margin-bottom: 12px; align-items: baseline; }
.material-preview-card header span,
.material-preview-card header small { color: var(--ink-soft); font-size: .64rem; }
.material-preview-card header strong { overflow: hidden; font: 700 .92rem var(--serif); text-overflow: ellipsis; white-space: nowrap; }
.material-preview-frame { display: grid; min-height: 310px; place-items: center; overflow: hidden; border: 1px solid var(--rule); background: #fff; }
.material-preview-frame iframe,
.material-preview-frame img,
.material-preview-frame video { width: 100%; height: 310px; border: 0; object-fit: contain; }
.material-preview-frame audio { width: min(92%, 560px); }
.material-preview-frame p { padding: 18px; color: var(--ink-soft); font-size: .72rem; }
.preview-state-note { margin: 10px 0 0; color: var(--ink-soft); font-size: .68rem; line-height: 1.65; }
.preview-open,
.preview-no-source { display: inline-block; margin-top: 9px; font-size: .72rem; font-weight: 750; }
.preview-open { color: var(--accent-dark); text-underline-offset: 3px; }
.preview-no-source { color: var(--ink-soft); }
.preview-unavailable { max-width: 34rem; padding: 22px; text-align: center; }
.preview-unavailable strong { color: var(--accent-dark); font: 750 .88rem var(--serif); }
.preview-unavailable p { margin: 8px 0 0; padding: 0; line-height: 1.65; }
.material-preview-frame[data-preview-state="external-only"],
.material-preview-frame[data-preview-state="unavailable"],
.matrix-preview-frame[data-preview-state="external-only"],
.matrix-preview-frame[data-preview-state="unavailable"],
.slide-deck-preview-frame[data-preview-state="external-only"],
.slide-deck-preview-frame[data-preview-state="unavailable"] { min-height: 150px; height: auto; }

.matrix-route.expanded { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding-top: 20px; border-top: 1px solid var(--ink); }
.matrix-preview { min-width: 0; padding: 16px; border: 1px solid var(--rule); background: rgba(251, 249, 243, .52); }
.matrix-preview > header { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-soft); font-size: .66rem; }
.matrix-preview > strong { display: block; min-height: 3.2em; margin: 10px 0; font: 700 .98rem/1.55 var(--serif); }
.matrix-preview-frame { display: grid; height: 240px; place-items: center; overflow: hidden; border: 1px solid var(--rule); background: #fff; }
.matrix-preview-frame iframe,
.matrix-preview-frame img,
.matrix-preview-frame video { width: 100%; height: 100%; border: 0; object-fit: contain; }
.matrix-preview-frame audio { width: min(92%, 560px); }
.matrix-preview-frame p { padding: 18px; color: var(--ink-soft); font-size: .72rem; }
.matrix-locked { padding: 24px; border: 1px dashed var(--rule); background: rgba(29, 32, 29, .025); text-align: center; }
.matrix-locked span { color: var(--accent-dark); font-weight: 800; }
.matrix-locked h3 { margin: 8px 0; font: 750 1.3rem var(--serif); }
.matrix-locked p { margin: 0; color: var(--ink-soft); }

@media (max-width: 900px) {
  .first-read-layout { grid-template-columns: 1fr; gap: 26px; }
  .first-read-sidebar { position: static; max-height: none; }
  .first-read-submitted-layout { grid-template-columns: 1fr; gap: 24px; }
  .first-read-submitted-record { border-top: 2px solid var(--rule); border-left: 0; }
  .material-preview-list,
  .matrix-route.expanded { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .anonymous-learning-notice { grid-template-columns: 1fr; gap: 8px; }
  .anonymous-learning-notice a { justify-self: start; }
  .first-read-heading { display: block; }
  .first-read-heading > p { margin-top: 10px; }
  .first-read-authority { display: block; margin-top: 8px; text-align: left; }
  .first-read-paragraph::before { position: static; margin-right: 8px; content: attr(data-ordinal) " ·"; }
  .first-read-text { font-size: calc(1.04rem * var(--reader-scale)); line-height: 2; }
  .first-read-sidebar { padding: 14px; }
  .first-read-submitted-review { padding: 18px 14px; }
  .first-read-submitted-heading { display: block; }
  .first-read-submitted-heading > p { margin-top: 9px; }
  .first-read-submitted-record { padding: 14px; }
  .correction-card p { grid-template-columns: auto minmax(0, 1fr); }
  .correction-card p span { grid-column: 1 / -1; }
  .material-preview-frame,
  .material-preview-frame iframe,
  .material-preview-frame img,
  .material-preview-frame video { min-height: 260px; height: 260px; }
  .matrix-preview-frame { height: 210px; }
  .material-preview-frame[data-preview-state="external-only"],
  .material-preview-frame[data-preview-state="unavailable"],
  .matrix-preview-frame[data-preview-state="external-only"],
  .matrix-preview-frame[data-preview-state="unavailable"] { min-height: 140px; height: auto; }
}

@media (max-width: 1180px) {
  .lesson-masthead {
    grid-template-areas:
      "copy portrait"
      "orientation portrait"
      "mastery mastery";
    grid-template-columns: minmax(0, 1fr) minmax(180px, 28vw);
  }
  .learning-rail { width: min(720px, 100%); margin-top: 12px; }
  .material-row { grid-template-columns: 40px minmax(0,1fr) auto; }
  .material-row small { display: none; }
}

@media (max-width: 900px) {
  :root { --topbar: 56px; --atlas-width: min(88vw, 340px); }
  .topbar { left: 0; grid-template-columns: auto minmax(0,1fr) auto; padding: 0 12px; gap: 11px; }
  .topbar-wordmark { display: none; }
  .topbar-context { display: block; color: var(--ink); font: 650 .8rem var(--serif); }
  .mobile-tools-toggle {
    display: inline-grid;
    width: 38px;
    height: 38px;
    padding: 0;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 50%;
    color: var(--ink-soft);
    background: transparent;
    cursor: pointer;
  }
  .mobile-tools-toggle span { letter-spacing: .1em; transform: translateY(-2px); }
  .mobile-tools-toggle[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); background: var(--paper-light); }
  .topbar-actions {
    position: fixed;
    top: calc(var(--topbar) + 8px);
    right: 12px;
    z-index: 68;
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(92px, 1fr));
    width: min(244px, calc(100vw - 24px));
    padding: 10px;
    border: 1px solid var(--rule);
    background: color-mix(in srgb, var(--paper-light) 96%, transparent);
    box-shadow: 0 18px 50px rgba(29,32,29,.16);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px) scale(.98);
    transform-origin: top right;
    transition: opacity .18s ease, transform .22s cubic-bezier(.2,.8,.2,1);
  }
  body.tools-open .topbar-actions { opacity: 1; pointer-events: auto; transform: none; }
  .topbar-actions .text-button { min-height: 42px; border-bottom: 1px solid var(--rule); font-size: .78rem; }
  .topbar-actions .text-button:hover { border-color: var(--accent); }
  .atlas-scrim { display: block; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
  body.atlas-open .atlas-scrim { opacity: 1; pointer-events: auto; }
  body.atlas-open { overflow: hidden; }
  .atlas { height: 100dvh; max-height: 100dvh; }
  .lesson-shell { margin-left: 0; }
  .lesson-masthead { grid-template-columns: minmax(0,1fr) minmax(138px,26vw); min-height: 330px; padding: 62px 24px 38px; }
  .masthead-path { margin-bottom: 15px; font-size: .64rem; letter-spacing: .1em; }
  .lesson-portraits { min-height: 210px; }
  .lesson-masthead h1 { font-size: clamp(2.5rem, 13vw, 5rem); }
  .study-layout { padding: 44px 22px 104px; }
  .learning-rail { margin: 18px 0 0; border-top-width: 3px; background: rgba(255,255,255,.24); }
  .checkpoint-list { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); }
  .checkpoint-list li { border-right: 1px solid var(--rule); }
  .checkpoint-list li:nth-child(4n) { border-right: 0; }
  .checkpoint-list button { grid-template-columns: 18px minmax(0,1fr); padding: 10px 7px; }
  .checkpoint-list button > em { display: none; }
  .section-head { display: block; }
  .section-head > p { margin-top: 12px; text-align: left; }
  .lens-line { grid-template-columns: 1fr; }
  .lens-line div, .lens-line div + div { grid-template-columns: 32px 1fr; padding: 14px 0; border-right: 0; border-bottom: 1px solid var(--rule); }
  .lexicon-dock { right: 0; bottom: 0; width: 100vw; height: 72vh; border-right: 0; border-bottom: 0; border-left: 0; }
}

@media (max-width: 620px) {
  .lesson-masthead {
    grid-template-areas:
      "copy portrait"
      "orientation orientation"
      "mastery mastery";
    grid-template-columns: minmax(0,1fr) 80px;
    min-height: 285px;
    gap: 18px 6px;
  }
  .lesson-masthead .orientation { grid-template-columns: 1fr; gap: 7px; padding-top: 18px; }
  .lesson-masthead .orientation .section-label,
  .lesson-masthead .orientation h2,
  .lesson-masthead #orientation-content { grid-row: auto; grid-column: 1; }
  .lesson-masthead .orientation .section-label { margin: 0; }
  .lesson-portraits { min-height: 168px; }
  .lesson-masthead h1 {
    font-size: clamp(1.55rem, 6.8vw, 2.5rem);
    line-height: 1.05;
    white-space: normal;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }
  .lesson-portraits::before { width: 132px; }
  .lesson-portraits .portrait-choice, .lesson-portraits .portrait-choice:first-child { width: 96px; }
  .source-portrait { width: 88px; }
  .lesson-portraits .portrait-choice b { right: 8px; bottom: 8px; font-size: .68rem; }
  .lesson-lead { font-size: 1rem; line-height: 1.7; }
  .lesson-route { margin-top: 24px; }
  .lesson-route span { padding: 5px 9px; font-size: .66rem; }
  .reading-column > section { padding: 44px 0; }
  .reading-column h2 { font-size: 2rem; }
  .study-layout { padding-right: 18px; padding-left: 18px; }
  .text-flow { font-size: calc(1.04rem * var(--reader-scale)); line-height: 1.95; }
  .material-row { grid-template-columns: 32px minmax(0,1fr) auto; gap: 10px; }
  .material-row strong { font-size: .88rem; }
  .material-row em { font-size: 0; }
  .material-row em::after { content: "↗"; font-size: .86rem; }
  .lesson-media-grid { grid-template-columns: 1fr; }
  .slide-deck-preview-frame { min-height: 400px; }
  .slide-deck-preview-frame iframe { height: 400px; }
  .slide-deck-preview-frame[data-preview-state="external-only"],
  .slide-deck-preview-frame[data-preview-state="unavailable"] { min-height: 140px; height: auto; }
  .media-provenance { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .check-round header { grid-template-columns: 28px minmax(0,1fr) auto; gap: 6px; }
  .check-round h3 { font-size: 1.25rem; }
  .revision-row, .structure-options { grid-template-columns: 1fr; }
  .lexicon-dock > header { align-items: flex-start; }
  .dock-actions { flex-wrap: wrap; justify-content: flex-end; }
  .dock-actions a { width: 100%; text-align: right; }
  .transfer-matrix { min-width: 0; }
  .matrix-links { margin-top: 24px; }
  .matrix-route > a { grid-template-columns: minmax(0,1fr) auto; gap: 8px 12px; min-width: 0; padding: 18px 0; }
  .matrix-route > a::before { display: none; }
  .matrix-route > a span { grid-column: 1 / -1; }
  .matrix-route > a strong { min-width: 0; font-size: .92rem; overflow-wrap: anywhere; }
  .matrix-route > a small { text-align: right; overflow-wrap: anywhere; }
  .three-word-check { grid-template-columns: minmax(0,1fr) 48px; }
  .three-word-fields { gap: 5px; }
  .checkpoint-list { grid-template-columns: repeat(2, 1fr); }
  .checkpoint-list li { border-bottom: 1px solid var(--rule); }
  .page-dialog { width: 100vw; height: 100vh; max-width: none; max-height: none; }
  .page-stage { grid-template-columns: 40px minmax(0,1fr) 40px; }
  .resource-dialog { width: 100vw; height: 100vh; max-width: none; max-height: none; }
  .preview-expand { min-height: 40px; padding: 9px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}