:root {
  --ink: #13212b;
  --muted: #66717a;
  --paper: #f4f3ee;
  --paper-deep: #e8e7e0;
  --white: #ffffff;
  --line: #d9d9d1;
  --orange: #e66b4f;
  --orange-soft: #f7ddd4;
  --blue: #3d6f83;
  --blue-soft: #d9e6e9;
  --yellow: #dfbd52;
  --yellow-soft: #f4eac3;
  --green: #3d7a62;
  --green-soft: #dce9df;
  --shadow: 0 16px 34px rgba(19, 33, 43, 0.07);
  --radius: 8px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }

button, a { -webkit-tap-highlight-color: transparent; }

button { font: inherit; }

.skip-link {
  position: fixed;
  left: 16px;
  top: -60px;
  z-index: 10;
  padding: 10px 14px;
  color: var(--white);
  background: var(--ink);
  border-radius: 4px;
}

.skip-link:focus { top: 16px; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 284px minmax(0, 1fr); }

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 30px 24px 22px;
  color: var(--white);
  background: var(--ink);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: #52656d transparent;
}

.brand-lockup { display: flex; align-items: center; gap: 11px; }
.brand-mark { display: grid; width: 38px; height: 38px; place-items: center; color: var(--ink); background: var(--yellow); font: 800 13px/1 system-ui, sans-serif; letter-spacing: .04em; }
.brand-eyebrow, .course-kicker, .section-kicker, .metric-label, .signal-header, .lab-badge, .lab-prompt span { letter-spacing: .13em; font-size: 11px; font-weight: 800; }
.brand-eyebrow { margin: 0 0 1px; color: #a9b2b5; }
.brand-name { margin: 0; font: 700 14px/1.2 Georgia, serif; }

.course-heading { margin: 73px 0 46px; }
.course-kicker { margin: 0 0 14px; color: var(--yellow); }
.course-heading h1 { margin: 0; color: var(--white); font-size: clamp(27px, 2.5vw, 37px); line-height: 1.2; letter-spacing: 0; }
.course-heading p:last-child { max-width: 185px; margin: 17px 0 0; color: #bdc4c5; font-size: 14px; line-height: 1.7; }

.side-nav { display: grid; flex: 0 0 auto; gap: 8px; min-height: 0; }
.nav-link { display: flex; align-items: center; gap: 12px; padding: 11px 10px; color: #aeb8ba; border-left: 2px solid transparent; font-size: 14px; transition: color .2s ease, background .2s ease, border-color .2s ease; }
.nav-link:hover, .nav-link:focus-visible, .nav-link.is-active { color: var(--white); background: rgba(255, 255, 255, .07); border-left-color: var(--yellow); outline: none; }
.nav-number { color: #718086; font: 700 11px/1 system-ui, sans-serif; }
.nav-link.is-active .nav-number { color: var(--yellow); }

.sidebar-footer { margin-top: 25px; padding-top: 17px; border-top: 1px solid #334650; color: #849298; font-size: 11px; line-height: 1.55; }
.sidebar-footer strong { display: block; color: #c3cbcc; font-size: 12px; font-weight: 600; }

.main-content { min-width: 0; padding: 0 5.5vw 34px; }
.topbar { display: flex; justify-content: space-between; align-items: center; min-height: 75px; border-bottom: 1px solid var(--line); }
.breadcrumb { display: flex; gap: 10px; align-items: center; color: var(--muted); font-size: 13px; }
.breadcrumb strong { color: var(--ink); font-weight: 700; }
.text-link { color: var(--blue); font-size: 13px; font-weight: 700; }
.text-link:hover, .text-link:focus-visible { color: var(--orange); outline: none; }

.overview-section { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: clamp(35px, 7vw, 105px); align-items: center; min-height: 395px; padding: 47px 0 44px; }
.section-kicker { margin: 0 0 13px; color: var(--orange); }
.overview-copy h2 { max-width: 600px; margin: 0; font-size: clamp(36px, 5vw, 66px); line-height: 1.12; letter-spacing: -.035em; }
.overview-copy h2 em { color: var(--orange); font-style: normal; }
.lede { max-width: 590px; margin: 24px 0 0; color: var(--muted); font-size: 17px; line-height: 1.85; }
.overview-actions { display: flex; gap: 12px; align-items: center; margin-top: 27px; }
.primary-button, .secondary-button { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border-radius: 4px; font-size: 14px; font-weight: 800; transition: transform .2s ease, background .2s ease; }
.primary-button { color: var(--white); background: var(--orange); }
.secondary-button { color: var(--ink); background: transparent; border: 1px solid var(--line); }
.primary-button:hover, .secondary-button:hover { transform: translateY(-2px); }
.primary-button:hover { background: #ce5b41; }
.secondary-button:hover { background: var(--white); }

.overview-signal { padding: 23px; background: var(--ink); color: var(--white); box-shadow: var(--shadow); }
.signal-header { display: flex; justify-content: space-between; align-items: center; color: #91a0a4; font-size: 10px; }
.signal-live { display: inline-flex; align-items: center; gap: 6px; color: #cde5d0; letter-spacing: 0; font-size: 11px; }
.signal-live i { width: 6px; height: 6px; background: #77c28c; border-radius: 50%; }
.signal-date { margin-top: 44px; font: 800 clamp(58px, 7vw, 84px)/.9 Georgia, serif; letter-spacing: -.07em; }
.signal-date span { color: var(--orange); }
.signal-caption { margin-top: 12px; color: #c5cccd; font-size: 14px; }
.signal-rule { height: 1px; margin: 36px 0 15px; background: #3a4c55; }
.signal-footer { display: flex; justify-content: space-between; gap: 8px; color: #91a0a4; font-size: 11px; }

.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.metric-card { min-height: 145px; padding: 18px 17px 15px; background: var(--white); border-top: 3px solid var(--orange); box-shadow: 0 4px 12px rgba(19, 33, 43, .03); }
.metric-card.accent-blue { border-top-color: var(--blue); }
.metric-card.accent-yellow { border-top-color: var(--yellow); }
.metric-card.accent-green { border-top-color: var(--green); }
.metric-label { display: block; color: var(--muted); font-size: 10px; }
.metric-card strong { display: block; margin-top: 8px; font: 800 36px/1 Georgia, serif; }
.metric-card strong span { margin-left: 4px; color: var(--muted); font: 700 13px/1 system-ui, sans-serif; }
.metric-card p { margin: 11px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }

.section-block { padding-top: 94px; scroll-margin-top: 20px; }
.section-heading { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 27px; }
.section-heading h2 { margin: 0; font-size: clamp(25px, 3vw, 34px); line-height: 1.25; letter-spacing: -.025em; }
.section-note { max-width: 250px; margin: 0; color: var(--muted); font-size: 13px; text-align: right; }

.map-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.map-panel { min-height: 255px; padding: 24px; border: 1px solid var(--line); }
.map-panel-before { background: var(--orange-soft); border-color: #edb9a9; }
.map-panel-after { color: var(--white); background: var(--blue); border-color: var(--blue); }
.map-panel-top { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font: 800 11px/1 system-ui, sans-serif; letter-spacing: .1em; }
.map-panel-after .map-panel-top { color: #c9dce1; }
.map-tag { padding: 4px 7px; color: var(--ink); background: var(--yellow); font: 800 10px/1 system-ui, sans-serif; letter-spacing: 0; }
.map-panel h3 { margin: 32px 0 8px; font-size: 27px; }
.map-panel p { max-width: 450px; margin: 0; color: var(--muted); font-size: 14px; }
.map-panel-after p { color: #d1e0e3; }
.question-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 23px; }
.question-list span { padding: 7px 9px; color: var(--ink); background: rgba(255, 255, 255, .66); font-size: 12px; }
.map-panel-after .question-list span { background: rgba(255, 255, 255, .13); color: var(--white); }

.schedule-section { padding-top: 105px; }
.schedule-heading { align-items: center; }
.filter-group { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.filter-button { padding: 7px 11px; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 3px; cursor: pointer; font-size: 12px; }
.filter-button:hover, .filter-button:focus-visible { color: var(--ink); background: var(--white); outline: none; }
.filter-button.is-selected { color: var(--white); background: var(--ink); border-color: var(--ink); }
.schedule-list { display: grid; gap: 8px; }
.week-card { overflow: hidden; background: var(--white); border: 1px solid var(--line); }
.week-card.is-next { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange); }
.week-summary { display: grid; grid-template-columns: 56px 100px minmax(180px, 1.1fr) minmax(220px, 1fr) 26px; gap: 17px; align-items: center; padding: 15px 17px; cursor: pointer; list-style: none; }
.week-summary::-webkit-details-marker { display: none; }
.week-summary:hover { background: #fbfbf8; }
.week-number { color: var(--orange); font: 800 14px/1 Georgia, serif; }
.week-date { color: var(--muted); font: 700 12px/1 system-ui, sans-serif; }
.week-title { font-size: 15px; font-weight: 800; }
.week-output { color: var(--muted); font-size: 13px; }
.week-chevron { color: var(--muted); font-size: 20px; transition: transform .2s ease; }
.week-card[open] .week-chevron { transform: rotate(45deg); }
.week-detail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 0 17px; padding: 17px 0 20px 73px; border-top: 1px solid var(--line); }
.detail-label { display: block; margin-bottom: 5px; color: var(--orange); font: 800 10px/1.3 system-ui, sans-serif; letter-spacing: .1em; }
.week-detail p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.empty-state { padding: 30px; color: var(--muted); background: var(--white); border: 1px dashed var(--line); text-align: center; }

.lab-section { padding-top: 110px; }
.lab-badge { display: inline-flex; padding: 7px 9px; color: var(--green); background: var(--green-soft); font-size: 10px; }
.lab-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 30px; padding: 25px; background: var(--ink); }
.lab-intro { color: var(--white); }
.lab-intro > p { max-width: 400px; margin: 0; color: #ced6d7; font-size: 17px; line-height: 1.75; }
.lab-prompt { margin-top: 35px; padding-top: 17px; border-top: 1px solid #40535c; }
.lab-prompt span { display: block; margin-bottom: 8px; color: var(--yellow); font-size: 10px; }
.lab-prompt strong { display: block; max-width: 390px; color: var(--white); font-size: 18px; line-height: 1.45; }
.lab-loop { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; align-items: stretch; }
.lab-loop > div { display: flex; flex-direction: column; min-height: 190px; padding: 14px 12px; background: #223640; border-top: 3px solid var(--orange); }
.lab-loop > div:nth-child(2) { border-top-color: var(--yellow); }
.lab-loop > div:nth-child(3) { border-top-color: var(--blue); }
.lab-loop > div:nth-child(4) { border-top-color: #d49a72; }
.lab-loop > div:nth-child(5) { border-top-color: var(--green); }
.lab-loop span { color: #95a5aa; font: 800 11px/1 system-ui, sans-serif; }
.lab-loop strong { margin-top: auto; color: var(--white); font-size: 13px; white-space: nowrap; }
.lab-loop small { margin-top: 4px; color: #aebcbf; font-size: 11px; }

.studio-start {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 30px;
  align-items: start;
  margin-top: 18px;
  padding: 25px;
  background: var(--white);
  border: 1px solid var(--line);
}

.studio-start-copy h3 {
  max-width: 520px;
  margin: 7px 0 10px;
  font-size: 24px;
  line-height: 1.3;
}

.studio-start-copy > p:last-child,
.studio-lead {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75;
}

.studio-route {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
}

.studio-route li {
  min-height: 125px;
  padding: 14px;
  border-right: 1px solid var(--line);
}

.studio-route li:last-child { border-right: 0; }
.studio-route span { display: block; color: var(--orange); font: 800 12px/1 system-ui, sans-serif; }
.studio-route strong { display: block; margin-top: 29px; font-size: 15px; line-height: 1.35; }
.studio-route small { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.5; }

.studio-guide-list { margin-top: 18px; }
.studio-guide { background: var(--white); border: 1px solid var(--line); border-bottom: 0; }
.studio-guide:last-child { border-bottom: 1px solid var(--line); }

.studio-guide > summary {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 24px;
  gap: 14px;
  align-items: center;
  min-height: 76px;
  padding: 13px 18px;
  cursor: pointer;
  list-style: none;
}

.studio-guide > summary::-webkit-details-marker { display: none; }
.studio-guide > summary:hover,
.studio-guide > summary:focus-visible { background: #faf9f5; outline: none; }
.studio-guide-number { color: var(--orange); font: 800 13px/1 system-ui, sans-serif; }
.studio-guide summary strong { display: block; font-size: 17px; line-height: 1.35; }
.studio-guide summary small { display: block; margin-top: 3px; color: var(--muted); font-size: 13px; line-height: 1.45; font-weight: 400; }
.studio-guide-toggle { color: var(--orange); font-size: 22px; line-height: 1; transition: transform .2s ease; }
.studio-guide[open] .studio-guide-toggle { transform: rotate(45deg); }

.studio-guide-body {
  padding: 4px 24px 26px 80px;
  border-top: 1px solid var(--line);
}

.studio-cycle {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 20px;
}

.studio-cycle > div { padding-top: 14px; border-top: 3px solid var(--orange); }
.studio-cycle > div:nth-child(2) { border-top-color: var(--blue); }
.studio-cycle > div:nth-child(3) { border-top-color: var(--green); }
.studio-cycle span { color: var(--muted); font-size: 12px; font-weight: 800; }
.studio-cycle strong { display: block; margin-top: 7px; font-size: 16px; }
.studio-cycle p { margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.65; }

.studio-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 26px;
  margin-top: 20px;
}

.studio-checklist label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
  border-bottom: 1px solid var(--line);
}

.studio-checklist input {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  accent-color: var(--orange);
}

.studio-rule { margin: 20px 0 0; padding: 14px 16px; color: var(--ink); background: var(--yellow-soft); font-size: 14px; line-height: 1.65; }

.studio-table-wrap { overflow-x: auto; }
.studio-table { width: 100%; min-width: 680px; border-collapse: collapse; text-align: left; }
.studio-table th,
.studio-table td { padding: 13px 14px; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.6; vertical-align: top; }
.studio-table thead th { color: var(--white); background: var(--ink); font-size: 12px; letter-spacing: .04em; }
.studio-table tbody th { width: 130px; color: var(--ink); background: #f4f3ee; }
.studio-table tbody td { color: var(--muted); }
.studio-table.compact { min-width: 430px; }
.studio-table.compact tbody th { width: 105px; }

.studio-template-header {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
}

.studio-template-header .studio-lead { max-width: 650px; }
.copy-button {
  min-height: 44px;
  padding: 0 15px;
  color: var(--white);
  background: var(--ink);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}
.copy-button:hover,
.copy-button:focus-visible { background: #2a414c; outline: 2px solid var(--orange); outline-offset: 2px; }
.copy-status { display: block; min-height: 20px; margin-top: 6px; color: var(--green); font-size: 12px; text-align: right; }

.studio-template {
  margin: 20px 0 0;
  padding: 20px;
  overflow-x: auto;
  color: var(--ink);
  background: #f4f3ee;
  border-left: 4px solid var(--orange);
  font: 14px/1.75 Consolas, "Courier New", monospace;
  white-space: pre-wrap;
}

.studio-two-column {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
  gap: 30px;
}

.studio-two-column h3 { margin: 0 0 12px; font-size: 18px; }

.studio-rubric { border-top: 1px solid var(--line); }
.studio-rubric > div {
  display: grid;
  grid-template-columns: 55px 95px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.studio-rubric strong { color: var(--orange); font-size: 19px; }
.studio-rubric span { font-size: 14px; font-weight: 800; }
.studio-rubric p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }

.studio-example { margin: 20px 0 0; }
.studio-example > div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 20px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.studio-example dt { color: var(--orange); font-size: 13px; font-weight: 800; }
.studio-example dd { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }

.flashcard-index {
  display: block;
  margin-bottom: 6px;
  color: var(--orange);
  font-size: 12px;
  line-height: 1;
  letter-spacing: .08em;
}

.assessment-section { padding-top: 110px; }
.assessment-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(220px, .55fr); gap: 25px; align-items: start; }
.assessment-table-wrap { overflow-x: auto; background: var(--white); border: 1px solid var(--line); }
.assessment-table { width: 100%; min-width: 570px; border-collapse: collapse; text-align: left; }
.assessment-table th, .assessment-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.assessment-table th { color: var(--muted); background: #f8f8f4; font-size: 11px; letter-spacing: .08em; }
.assessment-table td { font-size: 13px; }
.assessment-table td:nth-child(2) { color: var(--orange); font: 800 15px/1.4 Georgia, serif; }
.assessment-table tbody tr:last-child td { border-bottom: 0; }
.resource-list { display: grid; gap: 7px; }
.resource-list a { display: flex; justify-content: space-between; align-items: center; padding: 13px 14px; color: var(--ink); background: var(--white); border: 1px solid var(--line); font-size: 13px; font-weight: 700; }
.resource-list a:hover, .resource-list a:focus-visible { color: var(--orange); border-color: var(--orange); outline: none; }
.resource-list b { color: var(--muted); font-size: 17px; font-weight: 400; }
.site-footer { display: flex; justify-content: space-between; gap: 20px; margin-top: 105px; padding-top: 17px; color: var(--muted); border-top: 1px solid var(--line); font-size: 11px; letter-spacing: .08em; }


/* Student-facing course guide */
.topbar-label {
  color: var(--muted);
  font: 800 10px/1 system-ui, sans-serif;
  letter-spacing: .16em;
}

.nav-accordion {
  display: block;
  min-height: 0;
}

.nav-accordion > summary {
  width: 100%;
  cursor: pointer;
  list-style: none;
}

.nav-accordion > summary::-webkit-details-marker {
  display: none;
}

.nav-expand {
  margin-left: auto;
  color: #718086;
  font-size: 18px;
  line-height: 1;
  transition: transform .2s ease;
}

.nav-accordion[open] .nav-expand {
  transform: rotate(45deg);
  color: var(--yellow);
}

.week-nav-list {
  display: grid;
  gap: 2px;
  margin: 3px 0 3px 20px;
  padding-left: 11px;
  border-left: 1px solid #334650;
  height: auto;
  max-height: none;
  overflow: visible;
  background: var(--ink);
}

.week-nav-item {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  gap: 7px;
  align-items: baseline;
  padding: 6px 7px;
  color: #aeb8ba;
  border-left: 2px solid transparent;
  font-size: 12px;
  line-height: 1.35;
}

.week-nav-item:hover,
.week-nav-item:focus-visible,
.week-nav-item.is-active {
  color: var(--white);
  background: rgba(255, 255, 255, .07);
  border-left-color: var(--yellow);
  outline: none;
}

.week-nav-number {
  color: #718086;
  font: 700 10px/1 system-ui, sans-serif;
}

.week-nav-item.is-active .week-nav-number {
  color: var(--yellow);
}

.course-description {
  padding-top: 73px;
}

.course-map-figure {
  margin: 0 0 26px;
  padding: 12px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 12px 32px rgba(19, 33, 43, .08);
}

.course-map-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(19, 33, 43, .08);
}

.course-map-figure figcaption {
  margin: 11px 3px 1px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.description-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 13px;
}

.course-context {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 13px;
  margin-top: 13px;
}

.context-panel {
  min-height: 280px;
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--line);
}

.context-panel h3 {
  margin: 0 0 14px;
  font-size: 22px;
  line-height: 1.35;
}

.context-panel p {
  margin: 0 0 13px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.8;
}

.context-panel p:last-of-type {
  margin-bottom: 18px;
}

.context-ama {
  color: var(--white);
  background: var(--ink);
  border-color: var(--ink);
}

.context-ama .description-label {
  color: var(--yellow);
}

.context-ama p {
  color: #d6e3e6;
}

.context-ama .text-link {
  color: var(--yellow);
}

.context-ama .text-link:hover,
.context-ama .text-link:focus-visible {
  color: var(--white);
}

.context-method {
  background: var(--yellow-soft);
  border-color: #eadb98;
}

.context-method blockquote {
  margin: 18px 0;
  padding-left: 17px;
  color: var(--ink);
  border-left: 3px solid var(--orange);
  font: 700 18px/1.6 Georgia, serif;
}

.core-framework {
  margin-top: 58px;
}

.core-framework .section-heading {
  margin-bottom: 18px;
}

.core-framework .section-heading h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.35;
}

.core-table-wrap {
  overflow-x: auto;
  background: var(--white);
  border: 1px solid var(--line);
}

.core-table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  text-align: left;
}

.core-table th,
.core-table td {
  padding: 15px 17px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  font-size: 14px;
  line-height: 1.6;
}

.core-table thead th {
  color: var(--muted);
  background: #f8f8f4;
  font-size: 12px;
  letter-spacing: .08em;
}

.core-table tbody th {
  width: 38%;
  color: var(--ink);
  font-weight: 800;
}

.core-table tbody td {
  color: var(--muted);
}

.core-table tbody tr:last-child th,
.core-table tbody tr:last-child td {
  border-bottom: 0;
}
.description-card {
  min-height: 242px;
  padding: 22px 21px;
  background: var(--white);
  border: 1px solid var(--line);
}

.description-card.description-main {
  grid-column: span 1;
  color: var(--white);
  background: var(--blue);
  border-color: var(--blue);
}

.description-label {
  display: block;
  margin-bottom: 19px;
  color: var(--orange);
  font: 800 10px/1.3 system-ui, sans-serif;
  letter-spacing: .11em;
}

.description-main .description-label {
  color: var(--yellow);
}

.description-card h3 {
  margin: 0 0 12px;
  font-size: 22px;
  line-height: 1.3;
}

.description-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.8;
}

.description-main p {
  color: #d6e3e6;
}

.topic-list,
.goal-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.topic-list li,
.goal-list li {
  position: relative;
  padding-left: 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.topic-list li::before,
.goal-list li::before {
  position: absolute;
  left: 0;
  color: var(--orange);
  content: "→";
  font-weight: 800;
}

.week-title-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color .2s ease, text-decoration-color .2s ease;
}

.week-title-link:hover,
.week-title-link:focus-visible {
  color: var(--orange);
  text-decoration-color: currentColor;
  outline: none;
}

.week-page {
  padding: 57px 0 10px;
}

.week-page-heading {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: end;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}

.week-page-heading h1 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(32px, 5vw, 57px);
  line-height: 1.16;
  letter-spacing: -.03em;
}

.week-question {
  max-width: 670px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.75;
}

.week-chapter {
  flex: 0 0 190px;
  margin: 0;
  color: var(--blue);
  font-size: 13px;
  line-height: 1.65;
  text-align: right;
}

.week-page-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 16px;
  margin-top: 27px;
}

.mi-task-panel {
  margin-top: 16px;
  padding: 28px;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--yellow);
}
.mi-task-panel.is-paused { border-top-color: var(--orange); }
.mi-task-heading { display: flex; justify-content: space-between; gap: 28px; align-items: flex-start; }
.mi-task-heading h2 { margin: 4px 0 10px; font-size: 26px; line-height: 1.3; }
.mi-task-heading > div > p:last-child { max-width: 760px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.75; }
.mi-task-time { flex: 0 0 auto; padding: 9px 11px; color: var(--ink); background: var(--yellow); font-size: 13px; font-weight: 800; }
.mi-task-panel.is-paused .mi-task-time { color: var(--white); background: var(--orange); }
.mi-task-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 0; margin-top: 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mi-task-evidence, .mi-task-steps { padding: 22px 0; }
.mi-task-evidence { padding-right: 24px; }
.mi-task-evidence p { margin: 10px 0 0; color: var(--muted); font-size: 16px; line-height: 1.75; }
.mi-task-steps { padding-left: 24px; border-left: 1px solid var(--line); }
.mi-task-label { display: block; color: var(--orange); font: 800 11px/1.4 system-ui, sans-serif; letter-spacing: .08em; }
.mi-task-steps ol { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.mi-task-steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; }
.mi-task-steps li > span { color: var(--blue); font: 800 12px/1.6 system-ui, sans-serif; }
.mi-task-steps li p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
.mi-task-result { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding-top: 22px; }
.mi-task-result > div:last-child { padding-left: 24px; border-left: 1px solid var(--line); }
.mi-task-result strong { display: block; margin-top: 8px; font-size: 16px; line-height: 1.65; }
.mi-task-note { margin: 20px 0 0; padding: 13px 15px; color: var(--ink); background: var(--yellow-soft); border-left: 3px solid var(--yellow); font-size: 14px; font-weight: 700; line-height: 1.65; }
@media (max-width: 780px) {
  .mi-task-panel { padding: 22px 18px; }
  .mi-task-heading { display: block; }
  .mi-task-time { display: inline-block; margin-top: 16px; }
  .mi-task-grid, .mi-task-result { grid-template-columns: 1fr; }
  .mi-task-evidence, .mi-task-steps, .mi-task-result > div:last-child { padding-right: 0; padding-left: 0; border-left: 0; }
  .mi-task-steps, .mi-task-result > div:last-child { border-top: 1px solid var(--line); }
  .mi-task-result > div { padding: 18px 0; }
}
.flashcard-section {
  margin-top: 58px;
}

.flashcard-section .section-heading {
  margin-bottom: 18px;
}

.flashcard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.flashcard {
  background: var(--white);
  border: 1px solid var(--line);
}

.flashcard summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 17px 18px;
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  font-weight: 800;
}

.flashcard summary::-webkit-details-marker {
  display: none;
}

.flashcard summary:hover,
.flashcard summary:focus-visible {
  color: var(--orange);
  outline: none;
}

.flashcard-toggle {
  flex: 0 0 auto;
  color: var(--orange);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  transition: transform .2s ease;
}

.flashcard[open] .flashcard-toggle {
  transform: rotate(45deg);
}

.flashcard-answer {
  padding: 0 18px 18px;
  border-top: 1px solid var(--line);
}

.flashcard-answer p {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}
.reading-panel,
.lesson-panel,
.week-output-panel {
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--line);
}

.reading-panel {
  background: var(--yellow-soft);
  border-color: #eadb98;
}

.reading-panel h2,
.lesson-panel h2 {
  margin: 0 0 20px;
  font-size: 22px;
  line-height: 1.3;
}

.reading-panel h2::after {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  content: "READ BEFORE CLASS";
  font: 800 10px/1 system-ui, sans-serif;
  letter-spacing: .13em;
}

.reading-list {
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reading-list li {
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(19, 33, 43, .15);
  font-size: 14px;
  line-height: 1.7;
}

.reading-list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.prep-note {
  margin-top: 22px;
  padding-top: 15px;
  color: var(--muted);
  border-top: 1px solid rgba(19, 33, 43, .18);
  font-size: 13px;
  line-height: 1.65;
}

.prep-note span {
  display: block;
  margin-bottom: 4px;
  color: var(--orange);
  font: 800 10px/1.3 system-ui, sans-serif;
  letter-spacing: .1em;
}

.prep-note strong {
  color: var(--ink);
  font-weight: 700;
}

.lesson-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 16px;
  padding: 15px 0;
  border-top: 1px solid var(--line);
}

.lesson-row:first-of-type {
  border-top: 0;
}

.lesson-row > span {
  color: var(--orange);
  font: 800 10px/1.4 system-ui, sans-serif;
  letter-spacing: .1em;
}

.lesson-row p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.week-output-panel {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  margin-top: 16px;
  color: var(--white);
  background: var(--ink);
  border-color: var(--ink);
}

.week-output-panel strong {
  display: block;
  margin-top: 5px;
  font-size: 18px;
  line-height: 1.45;
}

.week-output-panel .primary-button {
  flex: 0 0 auto;
  color: var(--ink);
  background: var(--yellow);
}

.week-output-panel .primary-button:hover {
  background: #ecd06c;
}

.week-pager {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
}

.week-nav-button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 43px;
  padding: 0 14px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 700;
}

.week-nav-button:hover,
.week-nav-button:focus-visible {
  color: var(--orange);
  border-color: var(--orange);
  outline: none;
}

.week-nav-button.next {
  margin-left: auto;
}

.week-nav-button.is-disabled {
  color: #abb1b2;
  pointer-events: none;
}
@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 235px minmax(0, 1fr); }
  .sidebar { padding: 25px 18px 18px; }
  .main-content { padding: 0 4vw 30px; }
  .overview-section { gap: 35px; }
  .week-summary { grid-template-columns: 48px 75px minmax(160px, 1fr) 26px; }
  .week-output { display: none; }
}

@media (max-width: 980px) {
  .overview-section { grid-template-columns: 1fr; min-height: 0; }
  .overview-signal { width: 100%; max-width: 430px; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .lab-layout, .studio-start { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
  .app-shell { display: block; }
  .sidebar { position: relative; height: auto; min-height: 0; padding: 18px 20px 16px; }
  .course-heading { margin: 31px 0 23px; }
  .course-heading h1 { font-size: 32px; }
  .side-nav { display: block; overflow: visible; margin-bottom: 17px; }
  .side-nav > .nav-link { margin-bottom: 5px; }
  .nav-accordion { margin-bottom: 5px; }
  .nav-link { flex: 0 0 auto; padding: 8px 9px; border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; }
  .nav-link:hover, .nav-link:focus-visible, .nav-link.is-active { border-bottom-color: var(--yellow); border-left-color: transparent; }
  .sidebar-footer { display: none; }
  .topbar { min-height: 61px; }
  .breadcrumb { font-size: 12px; }
  .text-link { font-size: 12px; }
  .overview-section { padding: 42px 0 35px; }
  .overview-copy h2 { font-size: clamp(37px, 11vw, 56px); }
  .overview-signal { max-width: 430px; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .section-block, .schedule-section, .lab-section, .assessment-section { padding-top: 70px; }
  .section-heading { display: block; }
  .section-note { max-width: none; margin-top: 9px; text-align: left; }
  .filter-group { justify-content: flex-start; margin-top: 18px; }
  .map-grid, .assessment-grid, .lab-layout, .course-context, .studio-cycle, .studio-checklist, .studio-two-column { grid-template-columns: 1fr; }
  .week-summary { grid-template-columns: 43px 62px minmax(0, 1fr) 20px; gap: 9px; padding: 13px 11px; }
  .week-title { font-size: 14px; line-height: 1.45; }
  .week-date { font-size: 11px; }
  .week-detail { grid-template-columns: 1fr; gap: 13px; padding: 15px 0 17px 52px; }
  .lab-loop { grid-template-columns: repeat(5, minmax(100px, 1fr)); overflow-x: auto; padding-bottom: 5px; }
  .lab-loop > div { min-height: 150px; }
  .studio-route { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio-route li:nth-child(2) { border-right: 0; }
  .studio-route li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .studio-guide-body { padding: 18px 18px 24px; }
  .studio-template-header { display: block; }
  .studio-template-header > div { margin-top: 15px; }
  .copy-status { text-align: left; }
  .site-footer { display: block; margin-top: 70px; line-height: 2; }
  .site-footer span { display: block; }
}

@media (max-width: 460px) {
  .main-content { padding: 0 18px 25px; }
  .topbar { gap: 10px; }
  .breadcrumb span:first-child { display: none; }
  .overview-actions { align-items: stretch; flex-direction: column; }
  .primary-button, .secondary-button { justify-content: center; }
  .map-panel { min-height: 0; }
  .week-summary { grid-template-columns: 34px minmax(0, 1fr) 16px; }
  .week-date { display: none; }
  .week-detail { padding-left: 43px; }
  .studio-start, .lab-layout { padding: 18px; }
  .studio-route { grid-template-columns: 1fr; }
  .studio-route li { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .studio-route li:last-child { border-bottom: 0; }
  .studio-route strong { margin-top: 14px; }
  .studio-guide > summary { grid-template-columns: 34px minmax(0, 1fr) 20px; gap: 9px; padding: 12px; }
  .studio-example > div { grid-template-columns: 1fr; gap: 5px; }
  .studio-rubric > div { grid-template-columns: 50px minmax(0, 1fr); }
  .studio-rubric p { grid-column: 2; }
}

@media (max-width: 780px) {
  .topbar-label {
    display: none;
  }

  .nav-accordion {
    display: block;
    flex: 0 0 auto;
  }

  .nav-accordion > summary {
    display: flex;
  }

  .nav-expand {
    display: none;
  }

  .sidebar {
    overflow: visible;
  }

  .week-nav-list {
    position: static;
    z-index: auto;
    display: grid;
    min-width: 0;
    height: auto;
    max-height: none;
    margin: 3px 0 3px 20px;
    padding: 8px 8px 8px 11px;
    overflow: visible;
    background: var(--ink);
    border: 0;
    box-shadow: none;
  }

  .nav-accordion:not([open]) .week-nav-list {
    display: none;
  }

  .description-grid,
  .week-page-grid,
  .flashcard-grid {
    grid-template-columns: 1fr;
  }

  .description-card.description-main {
    grid-column: auto;
  }

  .week-page-heading {
    display: block;
  }

  .week-chapter {
    margin-top: 15px;
    text-align: left;
  }

  .week-output-panel {
    display: block;
  }

  .week-output-panel .primary-button {
    margin-top: 18px;
  }

  .week-pager {
    display: grid;
    grid-template-columns: 1fr;
  }

  .week-nav-button.next {
    margin-left: 0;
  }
}

.reading-panel-link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.reading-panel-link:hover h2,
.reading-panel-link:focus-visible h2 {
  color: var(--orange);
}

.reading-panel-link:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
}

.reading-panel-link h2 span { color: var(--orange); font-size: .7em; }
.reading-open {
  display: inline-flex;
  margin-top: 20px;
  color: var(--orange);
  font-size: 13px;
  font-weight: 800;
}

.reading-inline-link {
  display: inline-flex;
  gap: 5px;
  margin-top: 10px;
  color: var(--orange);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.reading-inline-link:hover,
.reading-inline-link:focus-visible { text-decoration: underline; }

.reading-page { padding: 57px 0 10px; }
.reading-page-heading {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: flex-start;
}

.reading-page-heading h1 {
  max-width: 800px;
  margin: 0;
  font-size: clamp(32px, 4.4vw, 58px);
  line-height: 1.16;
  letter-spacing: -.035em;
}

.reading-page-question {
  max-width: 760px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.7;
}

.reading-guide-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 16px;
  margin-top: 34px;
}

.reading-guide-primary,
.reading-guide-secondary {
  padding: 25px;
  border: 1px solid var(--line);
}

.reading-guide-primary { background: var(--yellow-soft); border-color: #eadb98; }
.reading-guide-secondary { background: var(--white); }
.reading-guide-primary h2,
.reading-guide-secondary h2 {
  margin: 0 0 15px;
  font-size: 25px;
  line-height: 1.35;
}
.reading-guide-primary > p:not(.description-label),
.reading-guide-secondary > p:not(.description-label) {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75;
}

.reading-studio-note {
  margin-top: 22px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}
.reading-studio-note span,
.concept-connection span {
  display: block;
  margin-bottom: 7px;
  color: var(--orange);
  font: 800 11px/1.3 system-ui, sans-serif;
  letter-spacing: .1em;
}
.reading-studio-note strong {
  display: block;
  font-size: 15px;
  line-height: 1.6;
}

.reading-concepts { margin-top: 72px; }
.reading-concept-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.reading-concept {
  padding: 21px 22px;
  background: var(--white);
  border: 1px solid var(--line);
}
.reading-concept-number {
  color: var(--orange);
  font: 800 11px/1.3 system-ui, sans-serif;
  letter-spacing: .1em;
}
.reading-concept h2 {
  margin: 10px 0 8px;
  font-size: 20px;
  line-height: 1.35;
}
.reading-concept > p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75;
}
.concept-connection {
  margin-top: 18px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}
.concept-connection strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.6;
  font-weight: 700;
}

.reading-check {
  margin-top: 72px;
  padding: 25px;
  background: var(--ink);
  color: var(--white);
}
.reading-check .section-kicker { color: var(--yellow); }
.reading-check h2 { color: var(--white); }
.reading-check-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 25px;
}
.reading-check-grid > div {
  padding-top: 14px;
  border-top: 3px solid var(--orange);
}
.reading-check-grid > div:nth-child(2) { border-top-color: var(--blue); }
.reading-check-grid > div:nth-child(3) { border-top-color: var(--green); }
.reading-check-grid span {
  color: #aebcbf;
  font: 800 12px/1 system-ui, sans-serif;
}
.reading-check-grid p {
  margin: 28px 0 8px;
  color: #ced6d7;
  font-size: 14px;
  line-height: 1.6;
}
.reading-check-grid strong {
  display: block;
  color: var(--white);
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 780px) {
  .reading-page-heading,
  .reading-guide-grid,
  .reading-concept-grid,
  .reading-check-grid {
    grid-template-columns: 1fr;
    display: grid;
  }

  .reading-page-heading { display: block; }
  .reading-page-heading .week-chapter { margin-top: 15px; text-align: left; }
  .reading-concepts,
  .reading-check { margin-top: 55px; }
}

@media (max-width: 460px) {
  .reading-page { padding-top: 35px; }
  .reading-guide-primary,
  .reading-guide-secondary,
  .reading-check { padding: 18px; }
  .reading-page-question { font-size: 16px; }
  .reading-guide-primary h2,
  .reading-guide-secondary h2 { font-size: 22px; }
}
/* Detailed pre-class reading layer */
.reading-path {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font: 800 11px/1.4 system-ui, sans-serif;
  letter-spacing: .08em;
}
.reading-path span:not(:last-child)::after {
  content: "→";
  margin-left: 8px;
  color: var(--orange);
}
.reading-layer-note {
  margin-top: 22px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}
.reading-layer-note span,
.reading-case > span,
.reading-resource > span {
  display: block;
  margin-bottom: 7px;
  color: var(--orange);
  font: 800 11px/1.3 system-ui, sans-serif;
  letter-spacing: .1em;
}
.reading-layer-note strong {
  display: block;
  font-size: 15px;
  line-height: 1.6;
}
.reading-depth,
.reading-explore {
  margin-top: 72px;
}
.reading-section-list {
  border-top: 1px solid var(--line);
}
.reading-section {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
.reading-section-number {
  color: var(--orange);
  font: 800 30px/1 system-ui, sans-serif;
}
.reading-section-content h3 {
  max-width: 720px;
  margin: 0 0 12px;
  font-size: 25px;
  line-height: 1.35;
}
.reading-section-content > p:not(.description-label) {
  max-width: 780px;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.85;
}
.reading-case {
  max-width: 780px;
  margin-top: 20px;
  padding: 18px 20px;
  border-left: 3px solid var(--blue);
  background: var(--white);
}
.reading-case strong {
  display: block;
  margin-bottom: 7px;
  font-size: 16px;
  line-height: 1.5;
}
.reading-case p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}
.reading-resource-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.reading-resource {
  display: block;
  padding: 22px;
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--line);
  background: var(--white);
  transition: border-color .2s ease, transform .2s ease;
}
.reading-resource:hover,
.reading-resource:focus-visible {
  border-color: var(--orange);
  transform: translateY(-2px);
}
.reading-resource strong {
  display: block;
  margin-bottom: 9px;
  font-size: 18px;
  line-height: 1.45;
}
.reading-resource p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}
.reading-empty {
  margin: 0;
  padding: 22px;
  color: var(--muted);
  border: 1px solid var(--line);
  background: var(--white);
  line-height: 1.75;
}
.reading-studio-final {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 25px;
  margin-top: 72px;
  padding: 28px;
  background: var(--ink);
  color: var(--white);
}
.reading-studio-final .section-kicker { color: var(--yellow); }
.reading-studio-final h2 {
  margin: 0 0 12px;
  color: var(--white);
  font-size: 27px;
  line-height: 1.35;
}
.reading-studio-final p:not(.section-kicker) {
  max-width: 720px;
  margin: 0;
  color: #d7dfe0;
  font-size: 15px;
  line-height: 1.75;
}
.reading-studio-final .primary-button {
  flex: 0 0 auto;
  background: var(--yellow);
  color: var(--ink);
}
.reading-studio-final .primary-button:hover,
.reading-studio-final .primary-button:focus-visible { background: var(--white); }
.reading-check .section-note { color: #aebcbf; }

@media (max-width: 780px) {
  .reading-resource-grid { grid-template-columns: 1fr; }
  .reading-section { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; }
  .reading-section-number { font-size: 23px; }
  .reading-studio-final { display: block; }
  .reading-studio-final .primary-button { display: inline-flex; margin-top: 20px; }
}

@media (max-width: 460px) {
  .reading-path { gap: 6px; font-size: 10px; }
  .reading-path span:not(:last-child)::after { margin-left: 6px; }
  .reading-section-content h3 { font-size: 21px; }
  .reading-section-content > p:not(.description-label) { font-size: 15px; }
  .reading-case,
  .reading-resource,
  .reading-studio-final { padding: 18px; }
}
.exit-ticket-panel {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-top: 28px;
  padding: 24px;
  background: var(--ink);
  color: var(--white);
}
.exit-ticket-panel .section-kicker { color: var(--yellow); }
.exit-ticket-panel h2 {
  margin: 0 0 10px;
  color: var(--white);
  font-size: 25px;
}
.exit-ticket-panel p:not(.section-kicker) {
  max-width: 720px;
  margin: 0;
  color: #d7dfe0;
  font-size: 14px;
  line-height: 1.75;
}
.exit-ticket-panel .primary-button {
  flex: 0 0 auto;
  background: var(--yellow);
  color: var(--ink);
}
.exit-ticket-panel .primary-button:hover,
.exit-ticket-panel .primary-button:focus-visible { background: var(--white); }

@media (max-width: 780px) {
  .exit-ticket-panel { display: block; }
  .exit-ticket-panel .primary-button { display: inline-flex; margin-top: 18px; }
}