:root {
  --ink: #112744;
  --navy: #0e2b50;
  --gold: #a47624;
  --pass: #1e6848;
  --danger: #9b353b;
  --muted: #52647b;
  --line: #c9d5df;
  --paper: #f7f9fb;
  --white: #ffffff;
  --control-line: #7f94a9;
  --radius: 12px;
  --font-sans: "Source Han Sans SC", "Noto Sans CJK SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Heiti SC", sans-serif;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  height: 100%;
  scrollbar-color: var(--line) transparent;
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: #d7e2ee;
  color: var(--ink);
}

a {
  color: var(--navy);
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.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;
}

.deck-app {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
}

.deck-main {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.stage-scaler {
  position: absolute;
  inset: 0;
}

.stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1600px;
  height: 900px;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center center;
  padding: 52px 64px 36px;
  display: flex;
  flex-direction: column;
  background: var(--paper);
}

.stage:focus {
  outline: none;
}

.stage:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -6px;
}

.stage-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
}

.stage-head h1 {
  margin: 0;
  font-size: 40px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--navy);
}

.stage-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  padding-top: 28px;
}

.col {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.col-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-height: 36px;
}

.col-head h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--navy);
}

.col-head p {
  margin: 0;
  font-size: 20px;
  line-height: 1.5;
  color: var(--muted);
}

.record-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.record {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 92px;
  padding: 0 22px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.record-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--navy);
  border-radius: 8px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  color: var(--navy);
}

.record-name {
  font-size: 24px;
  line-height: 1.4;
  color: var(--ink);
}

.page-stack {
  display: grid;
  gap: 26px;
  margin-top: 20px;
}

.page-frame {
  position: relative;
  height: 136px;
  padding: 38px 22px 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 14px;
}

.page-label {
  position: absolute;
  top: 14px;
  left: 22px;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 52px;
  border: 1px solid var(--navy);
  border-radius: 8px;
  background: var(--paper);
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  color: var(--navy);
}

.page-note {
  margin: 22px 0 0;
  font-size: 20px;
  line-height: 1.6;
  color: var(--muted);
}

.return-area {
  position: relative;
  flex: 1 1 auto;
  margin-top: 20px;
}

.return-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin-top: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease-out, visibility 0s linear 200ms;
}

.return-layer.is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity 200ms ease-out, visibility 0s;
}

.page-frame.is-missing {
  background: transparent;
  border: 2px dashed var(--gold);
  justify-content: center;
}

.missing-mark {
  font-size: 44px;
  line-height: 1;
  color: var(--muted);
}

.verdict {
  margin: 0;
  font-size: 28px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--danger);
}

.is-instant .return-layer,
.is-instant .return-layer.is-on {
  transition: none !important;
}

.deck-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 20px;
  flex-wrap: wrap;
  padding: 10px 20px;
  background: var(--white);
  border-top: 1px solid var(--line);
}

.scope {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

.status {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.deck-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--control-line);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease-out, color 160ms ease-out, border-color 160ms ease-out;
}

.btn:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.btn.primary {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.btn.primary:hover {
  background: #071a33;
  border-color: #071a33;
  color: var(--white);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--white);
  border-color: var(--line);
  color: var(--muted);
}

.btn.primary:disabled {
  background: var(--line);
  border-color: var(--line);
  color: var(--ink);
  opacity: 0.7;
}

.notes {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  width: min(440px, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-left: 1px solid var(--line);
  box-shadow: -18px 0 44px rgba(0, 0, 0, 0.1);
}

.notes-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}

.notes-head h2 {
  margin: 0;
  font-size: 19px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--navy);
}

.notes-state {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.notes-body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 22px;
  display: grid;
  gap: 26px;
  align-content: start;
  scrollbar-color: var(--line) transparent;
}

.notes-block h3 {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.notes-block p {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
}

.notes-block p + p {
  margin-top: 8px;
}

.notes-foot {
  margin: 0;
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}

.mobile-doc {
  display: none;
}

@media (max-width: 900px) {
  .deck-main {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .stage-scaler {
    display: none;
  }

  .mobile-doc {
    display: block;
    max-width: 680px;
    margin: 0 auto;
    padding: 26px 20px 44px;
  }

  .mobile-doc h1 {
    margin: 6px 0 14px;
    font-size: 30px;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--navy);
  }

  .m-lede {
    margin: 0 0 30px;
    font-size: 17px;
    line-height: 1.75;
    color: var(--ink);
  }

  .m-section {
    margin: 0 0 30px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
  }

  .m-section h2 {
    margin: 0 0 14px;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 600;
    color: var(--navy);
  }

  .m-records {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
  }

  .m-records li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 17px;
    line-height: 1.5;
    color: var(--ink);
  }

  .m-records .chip {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }

  .m-pages {
    display: grid;
    gap: 12px;
  }

  .m-page {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 66px;
    padding: 12px 14px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 10px;
  }

  .m-page-label {
    margin-right: 4px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--muted);
  }

  .m-page .chip {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }

  .m-page.is-missing {
    justify-content: center;
    background: transparent;
    border: 2px dashed var(--gold);
  }

  .m-note {
    margin: 14px 0 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--muted);
  }

  .m-empty {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--muted);
  }

  .m-filled {
    display: grid;
    gap: 12px;
  }

  .m-filled .verdict {
    font-size: 22px;
  }

  .m-state {
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
  }

  .m-link {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
  }

  .deck-bar {
    padding: 10px 16px;
  }

  .scope {
    font-size: 12px;
    order: 3;
    width: 100%;
  }

  .status {
    font-size: 12px;
  }

  .btn {
    min-height: 44px;
  }

  .notes {
    width: 100vw;
  }

  .notes-body {
    padding: 20px;
  }
}


.reading-page {
  min-height: 100vh;
  background: var(--paper);
}

.reading-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
  padding: 14px 24px;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

.reading-topbar a {
  font-size: 14px;
}

.reading-main {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 24px 72px;
}

.reading-main h1 {
  margin: 0 0 12px;
  font-size: 40px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--navy);
}

.reading-meta {
  margin: 0 0 30px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

.reading-lede {
  margin: 0 0 34px;
  font-size: 20px;
  line-height: 1.75;
  color: var(--ink);
}

.reading-main h2 {
  margin: 46px 0 14px;
  font-size: 24px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--navy);
}

.reading-main p,
.reading-main li {
  font-size: 19px;
  line-height: 1.8;
  color: var(--ink);
}

.reading-main ul {
  margin: 12px 0 0;
  padding-left: 1.25em;
}

.reading-main li + li {
  margin-top: 8px;
}

.mini-flow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin: 18px 0 8px;
}

.mini-col h3 {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--muted);
}

.mini-pages {
  display: grid;
  gap: 10px;
}

.mini-page {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 58px;
  padding: 10px 12px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.mini-page .page-label {
  position: static;
  margin-right: 4px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}

.mini-page .chip {
  width: 40px;
  height: 36px;
  font-size: 16px;
}

.mini-page.is-missing {
  justify-content: center;
  background: transparent;
  border: 2px dashed var(--gold);
}

.mini-page .missing-mark {
  font-size: 28px;
  line-height: 1;
  color: var(--muted);
}

.mini-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 10px 12px;
  background: var(--white);
  border: 1px dashed var(--line);
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}

.reading-main .mini-verdict {
  margin: 12px 0 0;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--danger);
}

.boundary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin: 20px 0 0;
}

.boundary h3 {
  margin: 0 0 8px;
  font-size: 17px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--navy);
}

.boundary ul {
  margin: 0;
  padding-left: 1.2em;
}

.script {
  margin: 20px 0 0;
  padding: 16px 0 0;
  border-top: 2px solid var(--gold);
}

.script h3 {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--muted);
}

.script p {
  margin: 0;
  font-size: 19px;
  line-height: 1.9;
}

.source-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.source-list li {
  font-size: 17px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.reading-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}

@media (max-width: 680px) {
  .reading-main {
    padding: 32px 18px 56px;
  }

  .reading-main h1 {
    font-size: 30px;
  }

  .reading-lede {
    font-size: 18px;
    line-height: 1.8;
  }

  .reading-main h2 {
    margin-top: 38px;
    font-size: 21px;
  }

  .reading-main p,
  .reading-main li {
    font-size: 18px;
    line-height: 1.8;
  }

  .mini-flow,
  .boundary {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .script p {
    font-size: 18px;
  }

  .reading-topbar {
    padding: 12px 18px;
  }

  .reading-topbar a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .return-layer,
  .return-layer.is-on {
    transition: none;
  }

  .btn {
    transition: none;
  }
}

/* FINAL-SHELL-DIRECTORY-v1: shell only; no slide geometry or lesson content. */
.deck-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 16px;
}
.deck-bar .scope {
  grid-column: 1;
  min-width: 0;
  width: auto;
  order: initial;
}
.deck-bar .status {
  grid-column: 2;
  min-width: 0;
  text-align: right;
}
.deck-bar .deck-nav {
  grid-column: 1 / -1;
  justify-content: flex-end;
}
.deck-directory {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
#deck-page-select {
  max-width: 100%;
  min-width: 86px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--control-line);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
#deck-page-select:disabled {
  opacity: .45;
  cursor: not-allowed;
}
@media (max-width: 900px) {
  .deck-bar {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 8px 12px;
  }
  .deck-bar .status {
    grid-column: 1;
    grid-row: 1;
    text-align: left;
  }
  .deck-bar .deck-nav {
    grid-column: 1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }
  .deck-bar .scope {
    grid-column: 1;
    grid-row: 3;
    font-size: 11px;
    line-height: 1.3;
  }
  .deck-bar .btn {
    min-width: 0;
    padding: 0 6px;
    font-size: 13px;
  }
  .deck-directory, #deck-page-select {
    width: 100%;
    min-width: 0;
  }
  #deck-page-select {
    min-height: 44px;
    padding: 0 6px;
    font-size: 13px;
  }
}
/* END-FINAL-SHELL-DIRECTORY-v1 */

/* COURSE-SERIES-SHELL-v10: shared presentation only; frozen teaching modules. */
:root { --paper:#fff; --radius:6px; --course-gutter:clamp(18px,2vw,40px); }
body { background:#fff; }
:focus-visible {outline:3px solid #c79a3b;outline-offset:3px;}
.course-cover {max-width:1600px;margin:auto;padding:0 clamp(24px,5vw,96px);}
.course-masthead {min-height:88px;display:flex;align-items:center;gap:28px;border-bottom:1px solid #dce1e7;color:var(--muted);font-size:15px;}
.course-brand {font-size:20px;font-weight:700;text-decoration:none;letter-spacing:-.4px;}
.course-masthead nav {margin-left:auto;display:flex;gap:26px;}
.course-masthead nav a {text-decoration:none;}
.cover-main {padding:84px 0 78px;display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center;}
.cover-kicker {font-size:20px;margin:0 0 20px;color:var(--gold);font-weight:600;}
.cover-copy h1 {font-size:clamp(40px,4vw,68px);letter-spacing:-1.5px;font-weight:650;line-height:1.26;margin:0 0 24px;color:var(--navy);}
.cover-intro {font-size:21px;line-height:1.9;max-width:26em;color:var(--muted);margin:0 0 32px;}
.cover-actions {display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.cover-actions .btn {padding:12px 20px;}
.cover-reading {font-size:15px;padding:12px 0;}
.cover-meta {font-size:14px;color:var(--muted);margin:22px 0 0;}
.cover-visual {margin:0;padding:36px 30px;background:#f7f9fc;border-top:3px solid #b58a34;}
.cover-code-label {font-size:14px;letter-spacing:.04em;color:var(--muted);margin-bottom:28px;}
.cover-records {display:flex;gap:12px;justify-content:center;}
.cover-records span {width:54px;height:60px;display:grid;place-items:center;font:600 26px ui-monospace,monospace;background:white;border:1px solid #a5b5c8;color:var(--navy);}
.cover-flow {text-align:center;font-size:32px;line-height:2;color:#ac8231;}
.cover-pages {display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.cover-pages div {background:white;border:1px solid #bccbda;padding:16px 12px;}
.cover-pages b {display:block;font-size:13px;color:var(--muted);font-weight:500;margin-bottom:18px;}
.cover-pages span {font:600 26px ui-monospace,monospace;color:var(--navy);}
.cover-visual figcaption {text-align:center;margin-top:24px;font-size:15px;line-height:1.9;color:var(--muted);}
.cover-visual figcaption strong {font-weight:500;}
.course-path {border-top:1px solid #dce1e7;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding:34px 0 44px;}
.course-path >div>span {font-size:13px;color:var(--gold);}
.course-path h2 {font-size:23px;font-weight:600;margin:12px 0 8px;}
.course-path p {font-size:16px;color:var(--muted);margin:0 0 16px;}
.course-path a,.text-button {font:inherit;color:var(--navy);font-size:15px;text-decoration:none;background:none;border:0;padding:6px 0;cursor:pointer;}
.cover-footer {border-top:1px solid #dce1e7;display:flex;justify-content:space-between;padding:20px 0 30px;font-size:13px;color:var(--muted);}
.deck-app {background:#fff;display:grid;grid-template-rows:auto minmax(0,1fr) auto;}
.classroom-heading {padding:22px var(--course-gutter) 0;min-width:0;}
.classroom-heading h1 {font-size:clamp(32px,3vw,56px);line-height:1.22;font-weight:650;color:var(--navy);margin:0;letter-spacing:-.02em;}
#stage h1 {display:none!important;}
.deck-main {min-width:0;}
.stage-scaler {inset:0 var(--course-gutter);}
/* Keep the 1600 x 900 logical coordinate plane: fixed SVG/DOM paths stay aligned. */
.stage {background:#fff;}
.deck-bar {position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px var(--course-gutter) 6px;min-height:56px;border-top:1px solid #dce1e7;background:#fff;}
.bar-group {display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap;}
.bar-middle {margin:auto;}
.bar-left {font-size:14px;color:var(--muted);gap:12px;}
.course-home {background:none;border:0;font:inherit;color:var(--navy);padding:10px 0;min-height:44px;cursor:pointer;}
.btn,.deck-bar .btn {font-size:14px;font-weight:500;line-height:1.3;min-height:44px;padding:9px 12px;border-radius:4px;border:1px solid #a7b5c5;background:#fff;color:var(--navy);white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
.btn.primary {background:var(--navy);color:#fff;border-color:var(--navy);}
.btn:disabled {opacity:.4;cursor:default;}
.btn:hover:not(:disabled) {border-color:var(--navy);background:#edf2f7;}
.btn.primary:hover:not(:disabled) {background:#193c65;color:#fff;}
.deck-bar .status {margin:0;font-size:14px;line-height:1.4;font-variant-numeric:tabular-nums;color:var(--muted);min-width:34px;text-align:center;}
.course-progress {position:absolute;bottom:0;left:0;right:0;height:2px;background:#edf0f3;}
.course-progress span {display:block;height:100%;background:#b28631;}
.course-dialog,dialog.notes {position:fixed;inset:0;margin:auto;width:min(1000px,calc(100% - 40px));height:fit-content;max-height:86dvh;padding:0;border:1px solid #cad3dd;border-radius:6px;box-shadow:0 18px 60px #061b3633;background:#fff;color:var(--ink);overflow:auto;}
.course-dialog::backdrop {background:#13243b70;}
.course-dialog .notes-head {position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 30px;border-bottom:1px solid #dce1e7;background:#fff;}
.course-dialog h2 {font-size:25px;font-weight:650;margin:0;}
.course-dialog .notes-head p {margin:5px 0 0;font-size:15px;color:var(--muted);}
.course-dialog .notes-body {padding:14px 30px 10px;overflow:visible;font-size:18px;line-height:1.8;max-width:49em;}
.course-dialog .notes-block {margin:14px 0 24px;}
.course-dialog .notes-block h3 {font-size:15px;color:var(--gold);margin:0 0 7px;}
.course-dialog .notes-block p {font-size:18px;line-height:1.8;margin:0;}
.course-dialog .notes-foot {font-size:14px;padding:16px 30px;margin:0;border-top:1px solid #dce1e7;color:var(--muted);}
.material-list {padding:8px 30px 24px;display:grid;}
.material-list a,.material-list button {text-align:left;background:none;border:0;border-bottom:1px solid #dce1e7;color:var(--navy);padding:24px 0;font:inherit;cursor:pointer;text-decoration:none;}
.material-list strong {display:block;font-size:21px;font-weight:600;margin-bottom:6px;}
.material-list span {display:block;font-size:16px;color:var(--muted);}
.directory-jump {display:flex;gap:12px;align-items:center;margin:22px 30px;font-size:15px;}
.directory-jump select {font:inherit;color:var(--navy);padding:10px;min-height:44px;background:#fff;border:1px solid #9aaec3;border-radius:4px;}
.directory-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:0 30px 30px;}
.directory-grid button {padding:12px;min-height:48px;background:#fff;border:1px solid #c4cfda;border-radius:4px;text-align:left;color:var(--navy);font:inherit;cursor:pointer;}
.directory-grid button[aria-current="page"] {border-color:var(--gold);background:#fbf7ee;}
.reading-topbar {background:white;border-bottom:1px solid #dce1e7;}
@media(min-width:901px) and (max-width:1180px) { .deck-bar {gap:8px;padding-left:18px;padding-right:18px;} .bar-group {gap:6px;} .bar-left {gap:8px;} .deck-bar .btn {padding:9px 10px;font-size:13px;} .classroom-heading {padding-top:18px;} }
@media(max-width:900px) {
  .course-cover {padding:0 22px;}
  .course-masthead {min-height:74px;gap:10px;flex-wrap:wrap;padding:18px 0;}
  .course-masthead nav {width:100%;margin:0;font-size:14px;gap:22px;}
  .course-masthead>span {margin-left:auto;font-size:12px;}
  .cover-main {grid-template-columns:1fr;padding:42px 0;gap:32px;}
  .cover-copy h1 {font-size:44px;}
  .cover-intro {font-size:18px;}
  .cover-visual {padding:24px 18px;}
  .cover-records {gap:10px;}.cover-records span {width:44px;height:50px;font-size:23px;}
  .course-path {grid-template-columns:1fr;gap:28px;}
  .course-path>div+div {border-top:1px solid #dce1e7;padding-top:24px;}
  .cover-footer {font-size:12px;gap:12px;}
  .deck-app {height:auto;min-height:100dvh;display:flex;}
  .classroom-heading {display:none;}
  .deck-main {overflow:visible;}
  .deck-bar {display:flex;flex-wrap:wrap;gap:8px;position:sticky;bottom:0;padding:8px 12px 10px;}
  .bar-left {flex:1;gap:12px;}.bar-middle {order:3;width:100%;justify-content:center;gap:8px;}.bar-right {margin-left:auto;gap:6px;}
  .deck-bar .btn {font-size:13px;min-height:44px;padding:8px 10px;}
  .course-home {font-size:13px;}
  .course-dialog,dialog.notes {width:calc(100% - 24px);max-height:90dvh;}
  .course-dialog .notes-head {padding:16px 18px;}.course-dialog .notes-body{padding:10px 18px;}.course-dialog .notes-foot{padding:14px 18px;}
  .material-list {padding:0 18px 18px;}.material-list strong{font-size:19px;}
  .directory-grid {grid-template-columns:repeat(2,1fr);padding:0 18px 18px;}.directory-jump{margin:18px;}
}
@media(prefers-reduced-motion:reduce) {html {scroll-behavior:auto;} .course-cover * {animation:none!important;transition:none!important;}}

/* Measured page windows, not a global crop: keep the stage coordinate plane. */
.stage {left:0;top:0;transform-origin:0 0;}
.cover-kicker,.course-path>div>span,.course-dialog .notes-block h3 {color:#815d1b;}

.reading-topbar {display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding:14px var(--course-gutter);}
.reading-course-home {text-decoration:none;font-weight:600;white-space:nowrap;}
.reading-directory {display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);}
.reading-directory select {font:inherit;min-height:44px;border:1px solid #a7b5c5;border-radius:4px;background:white;color:var(--navy);padding:8px;}
#reading-scope {font-size:13px;color:var(--muted);}
#back-link {margin-left:auto;min-height:44px;display:flex;align-items:center;}
.reading-foot {display:flex;gap:20px;justify-content:space-between;align-items:center;}
@media(max-width:900px) {.reading-topbar{gap:8px 14px;padding:10px 18px;}.reading-topbar #reading-scope{display:none;}#back-link{margin-left:0;width:100%;font-size:14px;}.reading-foot{flex-wrap:wrap;}.reading-course-home{font-size:14px;}}

/* Two teaching routes share the same preserved page/state registry. */
.route-toggle {padding:6px 8px;min-height:36px;border:1px solid #9bafc3;border-radius:4px;background:#fff;color:var(--navy);font:inherit;font-size:12px;white-space:nowrap;cursor:pointer;}
.route-toggle[aria-pressed="true"] {background:#fbf7ee;border-color:#d7b65c;}
.route-toggle:focus-visible {outline:3px solid #d7b65c;outline-offset:3px;}
.directory-grid button[data-optional="true"] {color:#657487;border-style:dashed;}
.course-path a + a,.course-path button + a {display:inline-block;margin-left:14px;}
@media (min-width:901px) and (max-width:1180px) {.bar-left {gap:6px;}.bar-left #page-count {font-size:12px;}.bar-left .course-home{display:none;}.route-toggle {padding:6px;font-size:12px;}}
@media (max-width:900px) {.bar-left {flex-wrap:wrap;gap:8px;}.bar-left .course-home{display:none;}.route-toggle{min-height:36px;}}