@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600;700&family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&display=swap');

/* Syllabus and research notebook extensions preserve the reference atlas palette. */
.course-strip,.project-overview {display:flex;align-items:center;gap:26px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);flex-wrap:wrap;margin-bottom:30px;font-size:14px}
.course-strip strong {color:var(--ink)}
.editorial-note {padding:16px 20px;background:var(--surface);border-left:2px solid var(--accent);font-size:14px;margin:24px 0 32px;line-height:1.7}
.course-questions {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin:35px 0 45px}
.course-questions article {border-top:1px solid var(--line);padding-top:18px}
.course-questions span {font-family:var(--mono);font-size:11px;color:var(--accent-ink);text-transform:uppercase;letter-spacing:.04em}
.course-questions h2 {font-family:var(--serif);font-size:23px;margin:15px 0 12px}
.course-questions p {font-size:14px;color:var(--muted)}
.unit-list {display:grid;gap:14px}
.unit-card {border:1px solid var(--line);background:var(--panel);border-radius:7px;overflow:hidden}
.unit-card>summary {display:flex;gap:22px;align-items:center;list-style:none;padding:24px;cursor:pointer}
.unit-card>summary::-webkit-details-marker {display:none}
.unit-number {font-family:var(--mono);color:var(--accent-ink);font-size:21px;align-self:flex-start;padding-top:6px}
.unit-card small {font:10px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.unit-card h2 {font:25px/1.3 var(--serif);margin:6px 0}
.unit-card summary p {font-size:14px;color:var(--muted)}
.unit-toggle {margin-left:auto;color:var(--accent-ink);font-size:25px}
.unit-card[open] .unit-toggle {transform:rotate(45deg)}
.unit-body {border-top:1px solid var(--line);padding:26px 28px 28px}
.unit-question {font:italic 22px/1.5 var(--serif);margin-bottom:24px}
.unit-framework {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.unit-framework h3 {font:11px/1.6 var(--mono);color:var(--accent-ink);text-transform:uppercase;letter-spacing:.03em;margin-bottom:10px}
.unit-framework p {font-size:14px;line-height:1.8}
.artifact-note {background:var(--surface);padding:13px 16px;margin:22px 0;font-size:14px}
.unit-body>.compare-related {margin:18px 0 24px;display:flex;gap:8px;flex-wrap:wrap}
.unit-reading {border-top:1px solid var(--line);margin-top:25px;padding-top:18px;font-size:14px}
.unit-reading summary,.reading-groups summary,.current-development summary {cursor:pointer;color:var(--accent-ink);font-size:14px}
.unit-reading p {margin:12px 0}
.outcome-note {margin-top:30px}
.outcome-note ol,.source-note ul {padding-left:22px;line-height:1.9;font-size:15px}
.study-card {padding:28px 0;border-top:1px solid var(--line)}
.study-card h2 {font-family:var(--serif);font-size:27px;margin:12px 0}
.study-card>p {margin-top:12px;max-width:850px}
.project-overview {justify-content:space-between}
.project-overview h2 {font:26px/1.5 var(--serif);margin:8px 0}
.project-overview progress {flex:1;max-width:220px;min-width:100px;accent-color:var(--accent)}
.project-overview p {font-size:14px;color:var(--muted)}
.project-setup {display:grid;grid-template-columns:2fr 1fr;gap:24px}
.notebook-field {display:block;margin:22px 0}
.notebook-field>span {display:block;font-size:14px;font-weight:500;margin-bottom:9px;color:var(--ink)}
.notebook-field textarea {resize:vertical;min-height:145px;line-height:1.75;width:100%}
.notebook-field input,.notebook-field select {width:100%}
.save-status {font-size:12px;line-height:1.6;color:var(--muted);margin:14px 0 24px;min-height:20px}
.notebook-privacy {padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:6px;margin:24px 0}
.notebook-privacy h2,.lab-workbench .notebook-privacy h2 {font:22px/1.4 var(--serif);margin-bottom:10px}
.notebook-privacy p {font-size:14px;line-height:1.75}
.notebook-privacy .check-label {margin:16px 0 12px;align-items:flex-start}
.notebook-clear {font-size:13px;line-height:1.8}
.notebook-clear [hidden] {display:none}
.notebook-clear button {white-space:normal;text-align:left}
.project-stage {border-top:1px solid var(--line);padding:30px 0 26px}
.stage-heading {display:flex;gap:20px;align-items:center;margin-bottom:18px}
.stage-heading .step-number {position:static;flex-shrink:0}
.stage-heading h2 {font:27px/1.5 var(--serif);margin-top:5px}
.project-stage>p {font-size:15px;max-width:850px}
.current-development h2 {display:inline;font-family:var(--serif);font-size:24px}
.current-development>p {margin-top:20px}
.workshop-feedback {font-size:15px;line-height:1.8;margin-top:22px}
.workshop-feedback.revealed {padding:20px;background:var(--accent-soft);border-left:2px solid var(--accent)}
.reading-groups {display:grid;grid-template-columns:1fr 1fr;gap:15px}
.reading-groups .source-note {min-width:0}
.lesson-practice {background:var(--surface);padding:20px;margin:28px 0}
.lesson-practice a {display:block;font-size:14px;color:var(--accent-ink);margin-top:12px}
.lab-tabs {flex-wrap:wrap}
table caption {text-align:left;font-size:14px;color:var(--muted);padding-bottom:15px}
@media(max-width:1000px) {.unit-framework{grid-template-columns:1fr}.unit-framework section+section{padding-top:14px;border-top:1px solid var(--line)}.course-questions{gap:18px}.course-questions h2{font-size:21px}}
@media(max-width:640px) {.course-questions,.project-setup,.reading-groups{grid-template-columns:1fr}.course-questions{gap:24px}.unit-card>summary{padding:18px;gap:12px}.unit-card h2{font-size:22px}.unit-body{padding:20px}.course-strip{gap:12px 20px}.course-tabs{flex-wrap:wrap}.project-overview{gap:18px}.project-overview progress{max-width:none}.unit-number{font-size:17px}.project-stage .check-label{align-items:flex-start}}
:root {
  --paper:#f4f1e9;
  --panel:#faf8f2;
  --surface:#eeeae0;
  --ink:#303832;
  --text:#42463e;
  --muted:#706f64;
  --faint:#b8b2a3;
  --line:#dedbd0;
  --accent:#e85a00;
  --accent-ink:#bd4700;
  --accent-hover:#a83d00;
  --accent-soft:#ffe4d1;
  --positive:#506b55;
  --serif:'Libre Caslon Text','Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  --sans:'IBM Plex Sans','Avenir Next',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --display:var(--ui);
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --ui:var(--mono);
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:80px;
}

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

button,input,select,textarea {
  font:inherit;
}

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

button {
  cursor:pointer;
}

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

button {
  color:inherit;
}

button:disabled {
  cursor:default;
}

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

button {
  touch-action:manipulation;
}

::selection {
  background:var(--accent-soft);
  color:var(--ink);
}

h1,h2,h3,h4,p {
  margin:0;
}

h1,h2,h3,h4 {
  font-weight:500;
  line-height:1.2;
}

em {
  font-weight:400;
}

button,
select,
kbd,
.skip-link,
.brand small,
.sidebar-label,
.nav-item,
.progress-block,
.search-button,
.eyebrow,
.primary-button,
.text-button,
.stats-strip,
.map-topline,
.map-area-label,
.map-controls,
.topic-badge,
.micro-label,
.card-bottom,
.topic-duration,
.current-note a,
.path-bridge,
.path-note a,
.timeline-actions a,
.pill-link,
.demo-label,
.field-label,
.check-label,
.lab-metric span,
.result-count,
.source-card .source-author,
.source-card small,
.source-card a,
.source-card code,
.topic-meta,
.topic-references,
.search-hint,
.search-result small,
.search-result .result-type,
.next-topic,
.reset-area,
.toast,
footer {
  font-family:var(--ui);
  font-weight:400;
  letter-spacing:.015em;
}

h1 em, h2 em, h3 em, .page-heading em, .highlight, .takeaway strong, .lab-metric strong, .stats-strip strong {
  color:var(--accent-ink);
}

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

.skip-link {
  position:fixed;
  top:10px;
  left:260px;
  transform:translateY(-160%);
  z-index:50;
  background:var(--ink);
  color:white;
  padding:12px 20px;
}

.skip-link:focus {
  transform:translateY(0);
}

.sidebar {
  width:234px;
  position:fixed;
  inset:0 auto 0 0;
  padding:36px 23px 20px;
  border-right:1px solid var(--line);
  background:var(--paper);
  display:flex;
  flex-direction:column;
  z-index:20;
  overflow-y:auto;
}

.brand {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:10px;
  row-gap:6px;
  align-items:center;
  margin-bottom:53px;
  font-family:var(--serif);
  font-size:23px;
  font-weight:400;
  letter-spacing:-1.1px;
  line-height:1.05;
}

.brand img {
  grid-column:1;
  grid-row:1;
}

.brand-wordmark {
  grid-column:2;
  grid-row:1;
  white-space:nowrap;
}

.brand-light {
  font-weight:400;
}

.brand small {
  grid-column:2;
  grid-row:2;
  display:block;
  margin-top:0;
  font-family:var(--ui);
  font-size:7px;
  letter-spacing:1.75px;
  font-weight:600;
}

.sidebar-label {
  font-size:10px;
  letter-spacing:1.7px;
  color:var(--muted);
  margin:0 12px 14px;
}

nav {
  display:grid;
  gap:6px;
}

.nav-item {
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 12px;
  border-radius:7px;
  font-size:14px;
  color:var(--muted);
  font-weight:500;
  min-width:0;
}

.nav-item svg {
  width:17px;
  height:17px;
  flex-shrink:0;
}

.nav-item:hover {
  background:var(--surface);
  color:var(--ink);
}

.nav-item.active {
  background:var(--accent-soft);
  color:var(--accent-hover);
  font-weight:500;
}

.nav-item .nav-dot {
  margin-left:auto;
  width:5px;
  height:5px;
  background:var(--accent);
  border-radius:50%;
  flex-shrink:0;
}

.progress-block {
  margin-top:auto;
  padding:40px 10px 18px;
  font-size:11px;
}

.progress-block>div {
  display:flex;
  justify-content:space-between;
}

.progress-block small {
  color:var(--muted);
  font-size:10px;
}

.progress-block progress {
  width:100%;
  height:4px;
  border:0;
  display:block;
  margin:10px 0;
  background:var(--surface);
  border-radius:5px;
}

.progress-block progress::-webkit-progress-bar {
  background:var(--surface);
  border-radius:5px;
}

.progress-block progress::-webkit-progress-value {
  background:var(--accent);
  border-radius:5px;
}

.progress-block progress::-moz-progress-bar {
  background:var(--accent);
}

.workspace {
  margin-left:234px;
}

.topbar {
  height:66px;
  border-bottom:1px solid var(--line);
  padding:0 45px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:15px;
}

.search-button {
  display:flex;
  align-items:center;
  gap:9px;
  border:1px solid var(--surface);
  border-radius:6px;
  padding:8px 10px;
  background:transparent;
  font-size:12px;
  color:var(--muted);
  width:255px;
  text-align:left;
}

.search-symbol {
  font-size:21px;
  line-height:1;
}

.search-button kbd {
  margin-left:auto;
  border:1px solid var(--surface);
  background:var(--surface);
  border-radius:3px;
  padding:0 5px;
  font-size:10px;
}

.mobile-menu {
  display:none!important;
}

main {
  padding:0 45px 60px;
  max-width:1600px;
  margin:auto;
  min-height:calc(100vh - 160px);
}

main:focus {
  outline:none;
}

.eyebrow {
  font-size:10px;
  letter-spacing:1.7px;
  font-weight:600;
  display:flex;
  gap:8px;
  align-items:center;
  text-transform:uppercase;
  color:var(--muted);
}

.eyebrow:before {
  content:'';
  display:block;
  width:14px;
  height:1px;
  border-radius:0;
  background:var(--accent);
}

.hero {
  display:block;
  padding:48px 0 38px;
  position:relative;
}

.hero h1 {
  font-family:var(--serif);
  font-size:clamp(36px,3.8vw,60px);
  letter-spacing:-1.8px;
  line-height:1.18;
  margin:20px 0;
  font-weight:400;
  color:var(--ink);
}

.hero h1 em {
  color:var(--accent);
}

.hero-copy>p {
  font-size:16px;
  line-height:1.8;
  max-width:620px;
  color:var(--text);
}

.hero-actions {
  display:flex;
  align-items:center;
  gap:21px;
  margin-top:23px;
  flex-wrap:wrap;
}

.primary-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  background:var(--accent-ink);
  border:1px solid var(--accent-ink);
  color:var(--panel);
  border-radius:3px;
  font-size:12px;
  font-weight:500;
  padding:11px 17px;
  transition:background .2s;
}

.primary-button:hover {
  background:var(--accent-hover);
}

.text-button {
  border:0;
  background:none;
  padding:5px 0;
  font-size:12px;
  display:inline-flex;
  gap:11px;
  align-items:center;
}

.text-button:hover {
  text-decoration:underline;
}

.stats-strip {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:flex;
  gap:32px;
  padding:16px 0;
  margin-bottom:30px;
  align-items:center;
}

.stats-strip>span {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  color:var(--muted);
}

.stats-strip strong {
  font-size:15px;
  color:var(--accent-ink);
  font-weight:550;
  font-family:var(--mono);
}

.tiny-circle {
  height:6px;
  width:6px;
  border-radius:50%;
  background:var(--muted);
}

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

.section-title {
  font-family:var(--serif);
  font-size:24px;
  font-weight:400;
  letter-spacing:-.6px;
}

.section-head p {
  font-size:11px;
  color:var(--muted);
  margin-top:5px;
}

.view-switch {
  display:flex;
  border:1px solid var(--line);
  padding:3px;
  border-radius:6px;
  gap:3px;
}

.view-switch button {
  border:0;
  background:none;
  border-radius:3px;
  padding:5px 12px;
  font-size:11px;
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--muted);
  white-space:nowrap;
}

.view-switch button.active {
  background:var(--accent-soft);
  color:var(--accent-hover);
}

.filters {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-bottom:18px;
}

.filter {
  display:flex;
  align-items:center;
  gap:6px;
  border:1px solid var(--surface);
  background:transparent;
  border-radius:5px;
  padding:6px 11px;
  font-size:11px;
  color:var(--muted);
  transition:all .2s;
}

.filter.active {
  background:var(--ink);
  color:var(--panel);
  border-color:var(--ink);
}

.filter-dot {
  width:5px;
  height:5px;
  background:var(--domain);
  border-radius:50%;
}

.filter.active .filter-dot {
  background:var(--accent-soft);
}

.map-shell {
  border:1px solid var(--line);
  border-radius:4px;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1fr) 250px;
  min-height:400px;
  background:var(--panel);
}

.map-region {
  position:relative;
  min-height:400px;
  background-image:radial-gradient(var(--line) .65px,transparent .65px);
  background-size:16px 16px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.map-topline {
  display:flex;
  justify-content:space-between;
  font-size:10px;
  color:var(--muted);
  padding:17px 20px;
  z-index:2;
  pointer-events:none;
}

.map-topline>span:first-child {
  display:flex;
  gap:6px;
  align-items:center;
}

.map-topline b {
  font-weight:500;
  color:var(--muted);
}

.map-canvas {
  width:100%;
  flex:1;
  position:relative;
  min-height:300px;
  display:grid;
  place-items:center;
  overflow:hidden;
}

.map-svg {
  width:100%;
  max-height:430px;
  aspect-ratio:900/580;
  display:block;
  overflow:visible;
  transition:transform .25s;
}

.map-edge {
  fill:none;
  stroke:var(--line);
  stroke-width:1.3;
}

.map-edge.related {
  stroke:var(--accent);
  stroke-width:2;
}

.map-edge.overview {
  stroke-dasharray:4 5;
  opacity:.5;
}

.graph-node {
  cursor:pointer;
  outline:none;
}

.graph-node rect {
  fill:var(--panel);
  stroke:var(--line);
  stroke-width:1;
  transition:all .15s;
}

.graph-node text {
  font-family:var(--ui);
  font-size:13px;
  fill:var(--text);
  font-weight:500;
  pointer-events:none;
}

.graph-node circle {
  fill:var(--domain);
}

.graph-node:hover rect,.graph-node:focus-visible rect {
  stroke:var(--domain);
  stroke-width:2;
  filter:drop-shadow(0 3px 3px #30383210);
}

.graph-node.selected rect {
  stroke:var(--domain);
  stroke-width:2;
  fill:var(--tint);
}

.graph-center circle {
  fill:var(--accent-soft);
  stroke:var(--accent);
  stroke-width:1;
}

.graph-center text {
  font-family:var(--serif);
  font-size:25px;
  fill:var(--ink);
  text-anchor:middle;
}

.graph-center:hover circle,.graph-center:focus-visible circle {
  stroke:var(--accent);
  stroke-width:3;
}

.map-area-label {
  font-size:10px;
  fill:var(--muted);
  letter-spacing:1.5px;
  font-weight:500;
}

.map-controls {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 17px;
  z-index:2;
}

.map-controls>span {
  font-size:10px;
  color:var(--muted);
}

.zoom-buttons {
  display:flex;
  gap:3px;
  background:var(--panel);
  border:1px solid var(--surface);
  border-radius:5px;
  padding:2px;
}

.zoom-buttons button {
  border:0;
  background:none;
  font-size:14px;
  width:27px;
  height:25px;
  display:grid;
  place-items:center;
}

.zoom-buttons button:last-child {
  border-left:1px solid var(--surface);
  font-size:14px;
}

.zoom-buttons button:hover {
  background:var(--surface);
}

.map-detail {
  border-left:1px solid var(--surface);
  padding:25px 21px 20px;
  background:var(--paper);
  display:flex;
  flex-direction:column;
}

.topic-badge {
  display:inline-flex;
  gap:6px;
  align-items:center;
  font-size:10px;
  color:var(--domain);
  text-transform:uppercase;
  letter-spacing:1.1px;
  font-weight:650;
}

.map-detail h3 {
  font-family:var(--serif);
  font-size:27px;
  letter-spacing:-.8px;
  margin:17px 0 9px;
}

.map-detail>p {
  font-size:15px;
  line-height:1.8;
  color:var(--text);
}

.detail-rule {
  height:1px;
  background:var(--surface);
  margin:19px 0;
}

.micro-label {
  font-size:10px;
  letter-spacing:1.3px;
  color:var(--muted);
  text-transform:uppercase;
}

.related-links {
  display:grid;
  gap:10px;
  margin-top:13px;
}

.related-links button {
  border:0;
  background:transparent;
  padding:0;
  text-align:left;
  font-size:12px;
  display:flex;
  gap:8px;
  align-items:flex-start;
  color:var(--muted);
}

.related-links button:before {
  content:'↳';
  color:var(--muted);
}

.related-links button:hover {
  text-decoration:underline;
}

.map-detail .primary-button {
  margin-top:auto;
  padding:9px 12px;
  font-size:12px;
  justify-content:space-between;
}

.map-detail .topic-duration {
  font-size:11px;
  color:var(--muted);
  display:flex;
  justify-content:space-between;
  margin:18px 0 10px;
}

.explore-bottom {
  display:block;
  grid-template-columns:1.2fr 1fr;
  gap:20px;
  margin-top:24px;
}

.current-note {
  border:0;
  border-radius:0;
  padding:22px 0;
  display:flex;
  gap:14px;
  align-items:center;
  border-top:1px solid var(--line);
}

.current-note .note-symbol {
  font-size:28px;
  color:#746c4e;
}

.current-note p {
  font-size:13px;
  color:var(--muted);
  margin-top:5px;
}

.current-note h3 {
  font-size:13px;
}

.current-note a {
  font-size:12px;
  text-decoration:underline;
  display:inline-block;
  margin-top:5px;
}

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

.topic-card {
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:7px;
  padding:23px;
  text-align:left;
  position:relative;
  transition:transform .2s,border-color .2s;
}

.topic-card:hover {
  transform:translateY(-3px);
  border-color:var(--domain);
}

.topic-card h3 {
  font-family:var(--serif);
  font-size:24px;
  margin:20px 0 10px;
}

.topic-card p {
  font-size:15px;
  color:var(--text);
  min-height:36px;
  line-height:1.8;
  font-family:var(--sans);
}

.card-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:20px;
  font-size:11px;
  color:var(--muted);
}

.discovered-check {
  color:var(--muted);
  font-weight:600;
}

.page-heading {
  padding:43px 0 30px;
  max-width:700px;
}

.page-heading h1 {
  font-family:var(--serif);
  font-size:48px;
  font-weight:400;
  letter-spacing:-1.7px;
  margin:16px 0;
}

.page-heading p {
  font-size:16px;
  line-height:1.8;
  color:var(--text);
  max-width:620px;
}

.page-heading em {
  color:var(--accent);
}

.path-tabs {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:15px;
  margin-bottom:30px;
}

.path-tab {
  text-align:left;
  border:1px solid var(--line);
  border-radius:8px;
  padding:23px;
  background:var(--panel);
}

.path-tab.active {
  border-color:var(--muted);
  background:var(--surface);
}

.path-tab>span {
  font-size:24px;
  color:var(--muted);
}

.path-tab>span svg {
  display:block;
  width:26px;
  height:26px;
}

.path-tab h3 {
  font-family:var(--serif);
  font-size:23px;
  margin:14px 0 8px;
}

.path-tab p {
  font-size:11px;
  color:var(--muted);
}

.path-layout {
  display:grid;
  grid-template-columns:1fr 260px;
  gap:40px;
}

.path-intro {
  font-size:16px;
  color:var(--text);
  margin-bottom:30px;
  max-width:600px;
  line-height:1.8;
}

.path-step {
  position:relative;
  padding:0 0 27px 65px;
}

.path-step:before {
  content:'';
  position:absolute;
  width:1px;
  top:34px;
  bottom:0;
  left:18px;
  background:var(--line);
}

.path-step:last-child:before {
  display:none;
}

.step-number {
  position:absolute;
  left:0;
  top:0;
  width:38px;
  height:38px;
  border-radius:50%;
  border:1px solid var(--line);
  display:grid;
  place-items:center;
  font-size:12px;
  background:var(--paper);
  color:var(--muted);
}

.step-number.complete {
  background:var(--text);
  color:var(--surface);
}

.path-step h3 {
  font-family:var(--serif);
  font-size:26px;
  margin:7px 0;
}

.path-step p {
  font-size:15px;
  color:var(--text);
  max-width:540px;
  line-height:1.8;
}

.path-step .text-button {
  color:var(--muted);
  margin-top:9px;
}

.path-bridge {
  font-size:11px;
  color:var(--muted);
  margin-top:18px;
  font-style:italic;
  display:flex;
  gap:8px;
}

.path-note {
  background:var(--surface);
  border-radius:8px;
  padding:25px;
  height:fit-content;
  position:sticky;
  top:25px;
}

.path-note h3 {
  font-family:var(--serif);
  font-size:25px;
  margin:15px 0;
}

.path-note p {
  font-size:15px;
  color:var(--text);
  margin:10px 0;
  line-height:1.8;
}

.path-note .primary-button {
  width:100%;
  margin-top:15px;
}

.path-note progress {
  width:100%;
  accent-color:var(--muted);
  height:5px;
}

.path-note a {
  font-size:12px;
  text-decoration:underline;
}

.tab-bar {
  display:flex;
  gap:24px;
  border-bottom:1px solid var(--line);
  margin-bottom:30px;
  flex-wrap:wrap;
}

.tab-bar button {
  border:0;
  background:none;
  font-size:12px;
  padding:0 0 13px;
  position:relative;
  color:var(--muted);
}

.tab-bar button.active {
  color:var(--text);
}

.tab-bar button.active:after {
  content:'';
  position:absolute;
  bottom:-1px;
  left:0;
  right:0;
  height:2px;
  background:var(--muted);
}

.timeline-intro {
  padding:17px 22px;
  background:var(--surface);
  border:1px solid var(--surface);
  border-radius:6px;
  font-size:15px;
  color:var(--text);
  margin-bottom:35px;
  line-height:1.8;
}

.timeline {
  padding-left:100px;
  max-width:900px;
}

.milestone {
  position:relative;
  border-left:1px solid var(--line);
  padding:0 0 38px 35px;
}

.milestone:before {
  content:'';
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--muted);
  position:absolute;
  left:-5px;
  top:5px;
  border:3px solid var(--paper);
  box-sizing:content-box;
}

.milestone .year {
  position:absolute;
  left:-100px;
  top:-4px;
  font-family:var(--serif);
  font-size:30px;
  color:var(--muted);
  letter-spacing:-1px;
}

.milestone h3 {
  font-family:var(--serif);
  font-size:28px;
  margin:8px 0 12px;
}

.milestone p {
  font-size:15px;
  color:var(--text);
  max-width:650px;
  line-height:1.8;
}

.milestone .timeline-actions {
  display:flex;
  gap:25px;
  margin-top:12px;
  align-items:center;
  font-size:11px;
}

.timeline-actions a {
  color:var(--muted);
  text-decoration:underline;
}

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

.week-card {
  display:flex;
  gap:19px;
  border:1px solid var(--line);
  padding:22px;
  border-radius:7px;
  background:var(--panel);
  align-items:flex-start;
}

.week-number {
  font-family:var(--serif);
  font-size:30px;
  color:var(--muted);
  width:42px;
  flex-shrink:0;
}

.week-card h3 {
  font-size:17px;
  margin-bottom:8px;
}

.week-card p {
  font-size:15px;
  color:var(--text);
  line-height:1.8;
}

.week-card .text-button {
  color:var(--muted);
  font-size:11px;
}

.compare-controls {
  display:flex;
  gap:15px;
  align-items:center;
  margin-bottom:25px;
}

.compare-controls label {
  font-size:12px;
}

.select-input {
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:5px;
  padding:10px 35px 10px 13px;
  max-width:100%;
  color:var(--muted);
  font-size:13px;
}

.comparison-prompt {
  background:var(--surface);
  padding:25px 30px;
  border-radius:7px;
  border:1px solid var(--line);
  margin-bottom:25px;
}

.comparison-prompt h2 {
  font-family:var(--serif);
  font-size:27px;
  margin:8px 0;
}

.comparison-prompt p {
  font-size:15px;
  color:var(--text);
  line-height:1.8;
}

.table-scroll {
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:7px;
}

table {
  border-collapse:collapse;
  width:100%;
  font-size:15px;
  background:var(--panel);
}

th,td {
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--line);
  padding:19px 23px;
  min-width:180px;
}

th {
  background:var(--surface);
  font-size:15px;
  color:var(--text);
  font-weight:550;
}

th:first-child,td:first-child {
  width:160px;
  min-width:140px;
  color:var(--muted);
  font-size:13px;
}

td {
  color:var(--text);
  line-height:1.8;
}

tr:last-child td {
  border-bottom:0;
}

.takeaway {
  border-left:3px solid var(--accent);
  padding:14px 23px;
  margin:25px 0;
  font-size:16px;
  color:var(--text);
  line-height:1.8;
}

.takeaway strong {
  color:var(--accent-ink);
}

.compare-related {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.pill-link {
  border:1px solid var(--line);
  background:var(--panel);
  padding:7px 13px;
  border-radius:20px;
  font-size:11px;
  color:var(--muted);
}

.lab-tabs {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-bottom:25px;
}

.lab-tab {
  padding:11px 20px;
  border:1px solid var(--line);
  border-radius:6px;
  background:transparent;
  font-size:12px;
}

.lab-tab.active {
  background:var(--surface);
  border-color:var(--faint);
  color:var(--text);
}

.lab-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 260px;
  gap:24px;
}

.lab-workbench {
  border:1px solid var(--line);
  border-radius:9px;
  padding:30px;
  background:var(--panel);
  min-width:0;
}

.lab-workbench h2 {
  font-family:var(--serif);
  font-size:31px;
  margin:12px 0;
}

.lab-workbench>p {
  font-size:16px;
  color:var(--text);
  margin-bottom:22px;
  line-height:1.8;
}

.lab-note {
  background:var(--surface);
  padding:25px;
  border-radius:7px;
  height:fit-content;
}

.lab-note h3 {
  font-family:var(--serif);
  font-size:23px;
  margin-bottom:12px;
}

.lab-note p {
  font-size:15px;
  color:var(--text);
  margin-bottom:15px;
  line-height:1.8;
}

.lab-note button {
  font-size:11px;
  text-decoration:underline;
  border:0;
  background:none;
  padding:0;
  color:var(--muted);
}

.demo-label {
  display:inline-block;
  font-size:9px;
  letter-spacing:1.3px;
  text-transform:uppercase;
  background:#f0eddf;
  color:#7a693e;
  border:1px solid #e7e0c7;
  border-radius:4px;
  padding:4px 7px;
}

.field-label {
  display:block;
  font-size:12px;
  color:var(--muted);
  margin:18px 0 7px;
}

.text-input {
  border:1px solid var(--line);
  border-radius:5px;
  background:var(--panel);
  padding:10px 12px;
  max-width:100%;
  color:var(--text);
  width:100%;
}

textarea.text-input {
  resize:vertical;
  min-height:90px;
}

.inline-input {
  display:flex;
  gap:10px;
  align-items:center;
}

.inline-input input {
  max-width:240px;
}

.check-label {
  font-size:13px;
  display:flex;
  gap:8px;
  align-items:center;
  margin:18px 0;
  color:var(--muted);
}

.check-label input {
  accent-color:var(--muted);
}

.lab-metrics {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:22px 0;
}

.lab-metric {
  background:var(--surface);
  border-radius:6px;
  padding:18px;
}

.lab-metric strong {
  display:block;
  font-family:var(--serif);
  font-size:30px;
  color:var(--accent-ink);
  line-height:1.15;
}

.lab-metric span {
  font-size:11px;
  color:var(--muted);
}

.bar-row {
  display:grid;
  grid-template-columns:125px 1fr 25px;
  gap:15px;
  align-items:center;
  margin:13px 0;
  font-size:11px;
  color:var(--muted);
}

.bar-track {
  height:8px;
  background:var(--surface);
  border-radius:3px;
}

.bar-track>span {
  height:8px;
  display:block;
  background:var(--faint);
  border-radius:3px;
}

.concordance-list {
  margin-top:20px;
  max-height:250px;
  overflow:auto;
}

.concordance-row {
  font-family:var(--mono);
  font-size:13px;
  border-bottom:1px solid var(--surface);
  padding:10px 0;
  color:var(--muted);
  line-height:1.9;
}

.concordance-row mark {
  background:var(--line);
  color:var(--text);
  padding:2px 4px;
  border-radius:2px;
}

.concordance-row small {
  display:block;
  font-family:var(--ui);
  font-size:9px;
  color:var(--muted);
}

.lab-explanation {
  font-size:15px;
  color:var(--text);
  margin-top:20px;
  background:var(--paper);
  padding:15px;
  border-radius:5px;
  line-height:1.8;
}

.source-paper {
  border:1px solid var(--surface);
  padding:20px;
  border-radius:6px;
  margin:20px 0;
  background:var(--panel);
}

.source-paper strong {
  font-size:14px;
  color:var(--muted);
}

.source-paper p {
  font-family:var(--serif);
  font-size:20px;
  line-height:1.6;
  color:var(--muted);
  margin-top:7px;
}

.source-paper .corpus-document{
  font-family:var(--sans);
  font-size:15px;
  line-height:1.8;
}

.source-paper small {
  font-size:10px;
  color:var(--muted);
}

.answer-claim {
  padding:20px;
  border:1px solid var(--surface);
  border-radius:6px;
  margin-top:18px;
}

.answer-claim p {
  font-family:var(--serif);
  font-size:21px;
  margin:9px 0 15px;
}

.choice-buttons {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.choice-buttons button {
  border:1px solid var(--line);
  background:var(--paper);
  padding:8px 12px;
  border-radius:5px;
  font-size:11px;
}

.choice-buttons button:hover {
  background:var(--surface);
}

.lab-feedback {
  margin-top:15px;
  font-size:15px;
  color:var(--text);
  min-height:24px;
  line-height:1.8;
}

.scene {
  width:100%;
  border:1px solid var(--line);
  border-radius:7px;
  margin-top:20px;
  overflow:hidden;
}

.scene svg {
  display:block;
  width:100%;
}

.scene-caption {
  font-family:var(--serif);
  font-size:25px;
  text-align:center;
  background:var(--surface);
  padding:19px;
}

.scene-explanation {
  font-size:15px;
  margin-top:18px;
  color:var(--text);
  line-height:1.8;
}

.glossary-toolbar {
  display:flex;
  gap:15px;
  margin-bottom:25px;
  align-items:center;
}

.glossary-toolbar input {
  max-width:450px;
}

.result-count {
  font-size:12px;
  color:var(--muted);
}

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

.glossary-entry {
  padding:23px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--panel);
}

.glossary-entry h2 {
  font-family:var(--serif);
  font-size:24px;
  margin-bottom:10px;
}

.glossary-entry p {
  font-size:15px;
  color:var(--text);
  line-height:1.8;
}

.glossary-entry button {
  font-size:12px;
  border:0;
  background:none;
  color:var(--muted);
  padding:0;
  text-decoration:underline;
  margin-top:10px;
}

.empty-state {
  padding:45px;
  text-align:center;
  color:var(--muted);
  border:1px dashed var(--line);
  border-radius:7px;
  grid-column:1/-1;
}

.sources-intro {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-bottom:30px;
}

.source-note {
  background:var(--surface);
  border:1px solid var(--surface);
  border-radius:7px;
  padding:24px;
}

.source-note h2 {
  font-family:var(--serif);
  font-size:25px;
  margin-bottom:10px;
}

.source-note p {
  font-size:15px;
  color:var(--text);
  line-height:1.8;
}

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

.source-card {
  border:1px solid var(--line);
  border-radius:7px;
  padding:25px;
  background:var(--panel);
}

.source-card h3 {
  font-family:var(--serif);
  font-size:23px;
  margin:13px 0 10px;
}

.source-card p {
  font-size:15px;
  color:var(--text);
  line-height:1.8;
  margin:10px 0;
}

.source-card .source-author {
  font-size:12px;
  color:var(--muted);
}

.source-card small {
  font-size:11px;
  color:var(--muted);
}

.source-card a {
  display:inline-flex;
  gap:20px;
  font-size:12px;
  color:var(--muted);
  margin-top:10px;
  text-decoration:underline;
}

.source-card code {
  display:block;
  font-size:11px;
  word-break:break-word;
  background:var(--paper);
  padding:9px;
  color:var(--muted);
}

.source-note a {
  text-decoration:underline;
}

.source-group-heading {
  font-family:var(--display);
  font-size:17px;
  margin:30px 0 18px;
}

.reset-progress {
  background:none;
  border:1px solid var(--line);
  border-radius:4px;
  padding:6px 10px;
  font-size:12px;
  color:var(--muted);
}

.reset-area {
  margin-top:30px;
  display:flex;
  gap:15px;
  align-items:center;
  font-size:12px;
  color:var(--muted);
}

dialog {
  padding:0;
  border:1px solid var(--line);
  color:var(--text);
  background:var(--panel);
  border-radius:12px;
  max-height:90dvh;
  box-shadow:0 25px 90px #30383226;
}

dialog::backdrop {
  background:#303832b3;
  backdrop-filter:blur(5px);
}

.topic-dialog {
  width:min(790px,calc(100% - 32px));
}

.dialog-toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 33px;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  background:var(--panel);
  z-index:3;
}

.icon-button {
  display:grid;
  place-items:center;
  font-size:25px;
  background:none;
  border:1px solid var(--surface);
  border-radius:5px;
  width:30px;
  height:30px;
  color:var(--muted);
  line-height:1;
}

.icon-button:hover {
  background:var(--surface);
}

.topic-article {
  padding:35px 42px;
}

.topic-article h2 {
  font-family:var(--serif);
  font-size:46px;
  letter-spacing:-1.5px;
  font-weight:400;
  margin:12px 0 13px;
}

.topic-lede {
  font-family:var(--serif);
  font-size:21px;
  color:var(--muted);
  line-height:1.55;
}

.topic-meta {
  display:flex;
  flex-wrap:wrap;
  gap:15px;
  font-size:11px;
  color:var(--muted);
  margin:20px 0 25px;
  border-bottom:1px solid var(--line);
  padding-bottom:20px;
}

.topic-article h3 {
  font-family:var(--display);
  font-size:17px;
  font-weight:600;
  margin:27px 0 10px;
}

.topic-article>p:not(.topic-lede) {
  font-size:16px;
  line-height:1.8;
  color:var(--text);
  max-width:68ch;
}

.example-block {
  background:var(--tint);
  border:1px solid color-mix(in srgb,var(--domain) 22%,transparent);
  padding:22px 25px;
  border-radius:6px;
  margin-top:22px;
}

.example-block h3 {
  margin:0 0 10px;
  color:var(--domain);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:1px;
}

.example-block p {
  font-family:var(--serif);
  font-size:19px;
  line-height:1.65;
  color:var(--muted);
}

.term-chips {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.term-chip {
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:4px;
  padding:5px 10px;
  font-size:12px;
  color:var(--muted);
}

.term-chip[aria-expanded=true] {
  background:var(--line);
  color:var(--text);
}

.term-definition {
  font-size:15px;
  color:var(--text);
  padding:13px 0;
  min-height:12px;
  line-height:1.8;
}

.connection-row {
  display:flex;
  gap:12px;
  align-items:flex-start;
  font-size:14px;
  margin:11px 0;
  color:var(--muted);
}

.connection-row button {
  border:0;
  background:none;
  text-align:left;
  padding:0;
  flex-shrink:0;
  max-width:45%;
  font-weight:550;
  color:var(--muted);
  text-decoration:underline;
}

.connection-row>span {
  color:var(--text);
  line-height:1.8;
}

.topic-references {
  display:grid;
  gap:8px;
  font-size:13px;
}

.topic-references a {
  text-decoration:underline;
  color:var(--muted);
}

.topic-references span {
  color:var(--muted);
}

.knowledge-check {
  border:1px solid var(--line);
  border-radius:7px;
  padding:23px;
  margin-top:30px;
  background:var(--paper);
}

.knowledge-check .micro-label {
  color:var(--muted);
}

.knowledge-check h3 {
  font-family:var(--serif);
  font-size:23px;
  line-height:1.4;
  margin-top:12px;
}

.quiz-answers {
  display:grid;
  gap:8px;
  margin-top:18px;
}

.quiz-answer {
  text-align:left;
  border:1px solid var(--line);
  background:#fffefa;
  border-radius:5px;
  padding:11px 14px;
  font-size:14px;
  color:var(--muted);
  display:flex;
  gap:12px;
}

.quiz-answer>span {
  border:1px solid var(--line);
  width:18px;
  height:18px;
  border-radius:50%;
  flex-shrink:0;
  font-size:10px;
  display:grid;
  place-items:center;
}

.quiz-answer.correct {
  background:var(--surface);
  border-color:var(--muted);
  color:var(--text);
}

.quiz-answer.incorrect {
  background:#f6eadd;
  border-color:#d0aa84;
  color:#8c6243;
}

.quiz-answer:hover {
  border-color:var(--muted);
}

.quiz-feedback {
  font-size:15px;
  color:var(--text);
  margin-top:13px;
  line-height:1.8;
}

.discover-button {
  width:100%;
  margin-top:25px;
  justify-content:space-between;
}

.next-topic {
  font-size:12px;
  color:var(--muted);
  text-align:center;
  margin-top:10px;
}

.search-dialog {
  width:min(650px,calc(100% - 30px));
  padding:25px;
}

.search-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
}

.search-heading h2 {
  font-family:var(--serif);
  font-size:30px;
}

.search-dialog>input {
  width:100%;
  padding:15px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:5px;
  color:var(--muted);
  font-size:14px;
}

.search-dialog #search-results {
  max-height:50dvh;
  overflow:auto;
  margin-top:15px;
}

.search-result {
  display:block;
  width:100%;
  text-align:left;
  border:0;
  border-bottom:1px solid var(--surface);
  background:none;
  padding:13px 10px;
  font-size:15px;
}

.search-result:hover {
  background:var(--surface);
}

.search-result small {
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-top:3px;
}

.search-result .result-type {
  float:right;
  font-size:9px;
  letter-spacing:1px;
  color:var(--muted);
  text-transform:uppercase;
}

.search-hint {
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-top:15px;
}

.toast {
  position:fixed;
  bottom:25px;
  left:calc(50% + 117px);
  transform:translate(-50%,15px);
  padding:12px 20px;
  border-radius:7px;
  background:var(--ink);
  color:var(--surface);
  box-shadow:0 5px 30px #30383226;
  font-size:13px;
  z-index:50;
  opacity:0;
  transition:all .2s;
  pointer-events:none;
  max-width:90vw;
}

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

footer {
  border-top:1px solid var(--line);
  padding:22px 45px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  font-size:10px;
  color:var(--muted);
}

footer>a:first-child {
  font-family:var(--display);
  font-size:15px;
  letter-spacing:-.8px;
  font-weight:750;
  color:var(--muted);
}

footer>a:first-child span {
  font-weight:400;
}

footer>a:last-child {
  color:var(--muted);
}

.noscript {
  position:fixed;
  inset:40% 20%;
  background:var(--paper);
  padding:40px;
  border:1px solid var(--faint);
  z-index:100;
}

@media(min-width:1500px) {
  .hero {
    padding-top:50px;
  }

  .map-shell {
    grid-template-columns:minmax(0,1fr) 290px;
  }
  .map-region {
    min-height:460px;
  }
  .map-detail {
    padding:30px;
  }
  .map-detail h3 {
    font-size:32px;
  }
  .map-detail>p {
    font-size:15px;
  }
  .hero-copy>p {
    font-size:16px;
    max-width:570px;
  }
  .hero-actions a,.hero-actions button {
    font-size:13px;
  }
  .map-svg {
    max-height:500px;
  }
  .map-topline {
    font-size:10px;
  }
  .graph-node text {
    font-size:13px;
    font-family:var(--ui);
  }
}

@media(max-width:1150px) {
  .sidebar {
    width:205px;
    padding:30px 18px 20px;
  }
  .workspace {
    margin-left:205px;
  }
  .brand {
    font-size:21px;
  }
  .topbar {
    padding:0 30px;
  }

  main {
    padding:0 30px 45px;
  }
  .hero {
    gap:15px;
  }

  .hero h1 {
    font-size:46px;
  }
  .hero-copy>p {
    font-size:16px;
  }
  .map-shell {
    grid-template-columns:minmax(0,1fr) 220px;
  }
  .map-detail {
    padding:20px 17px;
  }
  .map-detail h3 {
    font-size:24px;
  }
  .map-region {
    min-height:380px;
  }
  .stats-strip {
    gap:20px;
  }
  .explore-bottom {
    grid-template-columns:1fr;
  }
  .topic-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .path-layout,.lab-layout {
    grid-template-columns:minmax(0,1fr) 220px;
    gap:20px;
  }
  .search-button {
    width:255px;
    font-size:12px;
  }
  .toast {
    left:calc(50% + 102px);
  }
}

@media(max-width:900px) {
  .sidebar {
    width:184px;
    padding:27px 13px 18px;
  }
  .workspace {
    margin-left:184px;
  }
  .brand {
    gap:7px;
    font-size:19px;
  }
  .brand img {
    width:29px;
    height:29px;
  }
  .brand small {
    font-size:6px;
    letter-spacing:1.3px;
  }
  .sidebar-label {
    font-size:9px;
    margin-left:10px;
  }
  .nav-item {
    font-size:13px;
    gap:9px;
    padding:11px 10px;
    min-width:0;
  }

  .topbar {
    padding:0 24px;
  }

  .search-button {
    width:255px;
    font-size:12px;
  }
  main {
    padding:0 24px 40px;
  }
  .hero {
  }
  .hero h1 {
    font-size:43px;
    letter-spacing:-1.8px;
  }

  .stats-strip {
    gap:17px;
  }
  .stats-strip>span {
    font-size:11px;
  }
  .map-shell {
    grid-template-columns:1fr;
  }
  .map-detail {
    border-left:0;
    border-top:1px solid var(--line);
    display:grid;
    grid-template-columns:1fr auto;
    column-gap:20px;
    align-items:start;
    padding:20px;
  }
  .map-detail .topic-badge {
    grid-column:1;
  }
  .map-detail h3 {
    grid-column:1;
    margin:10px 0 7px;
    font-size:28px;
  }
  .map-detail>p {
    grid-column:1;
    font-size:15px;
  }
  .map-detail .detail-rule,.map-detail .micro-label,.map-detail .related-links {
    display:none;
  }
  .map-detail .topic-duration {
    grid-column:2;
    grid-row:2;
    gap:15px;
    margin:0;
    font-size:11px;
  }
  .map-detail .primary-button {
    grid-column:2;
    grid-row:3;
    gap:20px;
    font-size:12px;
  }
  .map-region {
    min-height:350px;
  }
  .map-svg {
    max-height:380px;
  }
  .path-layout,.lab-layout {
    grid-template-columns:1fr;
  }
  .path-note {
    position:static;
  }
  .path-tabs {
    gap:9px;
  }
  .path-tab {
    padding:17px;
  }
  .path-tab h3 {
    font-size:20px;
  }
  .page-heading h1 {
    font-size:42px;
  }
  .week-grid {
    grid-template-columns:1fr;
  }
  .sources-intro {
    grid-template-columns:1fr;
  }
  footer {
    padding:20px 24px;
  }

  .toast {
    left:calc(50% + 92px);
  }
}

@media(max-width:640px) {
  body {
    font-size:16px;
  }
  .sidebar {
    transform:translateX(-100%);
    width:234px;
    transition:transform .2s;
    box-shadow:10px 0 60px #3038321a;
  }
  .sidebar.open {
    transform:translateX(0);
  }
  .sidebar .brand {
    font-size:23px;
  }
  .sidebar .brand img {
    width:36px;
    height:36px;
  }
  .sidebar .brand small {
    font-size:7px;
  }
  .sidebar .nav-item {
    font-size:14px;
  }
  .workspace {
    margin-left:0;
  }
  .topbar {
    height:66px;
    padding:0 20px;
    gap:12px;
  }
  .mobile-menu {
    display:grid!important;
    flex-shrink:0;
    font-size:17px;
    margin-right:auto;
  }

  .search-button {
    width:32px;
    height:32px;
    padding:2px;
    justify-content:center;
    background:transparent;
    border:0;
    font-size:12px;
  }
  .search-button>span:nth-child(2),.search-button kbd {
    display:none;
  }
  .search-symbol {
    font-size:27px;
  }
  main {
    padding:0 20px 35px;
  }
  .hero {
    padding:30px 0 25px;
    grid-template-columns:1fr;
    gap:0;
  }

  .eyebrow {
    font-size:9px;
  }
  .hero h1 {
    font-size:clamp(30px,7.2vw,44px);
    letter-spacing:-2px;
    margin:18px 0;
  }
  .hero-copy>p {
    font-size:16px;
    max-width:410px;
  }
  .hero-actions {
    gap:22px;
    flex-wrap:wrap;
  }
  .hero-actions .primary-button {
    font-size:12px;
  }
  .stats-strip {
    gap:20px;
    flex-wrap:wrap;
    margin-bottom:26px;
    padding:12px 0;
  }
  .stats-strip strong {
    font-size:15px;
    color:var(--accent-ink);
  }
  .stats-strip>span {
    gap:5px;
    font-size:11px;
  }
  .section-title {
    font-size:17px;
  }
  .section-head p {
    font-size:10px;
    max-width:215px;
  }
  .view-switch button {
    font-size:11px;
    padding:4px 8px;
    white-space:nowrap;
  }
  .view-switch button span {
    display:none;
  }
  .filter {
    font-size:11px;
    padding:6px 8px;
  }
  .filters {
    gap:6px;
  }
  .map-region {
    min-height:325px;
  }
  .map-canvas {
    min-height:245px;
  }
  .map-svg {
    min-width:420px;
    max-height:300px;
    aspect-ratio:900/580;
  }
  .map-topline {
    font-size:10px;
    padding:14px 12px;
  }
  .map-topline>span:last-child {
    display:none;
  }
  .map-controls {
    padding:10px 12px;
  }
  .map-controls>span {
    font-size:10px;
    max-width:190px;
  }
  .map-detail {
    padding:20px;
    display:flex;
  }
  .map-detail h3 {
    font-size:29px;
  }
  .map-detail>p {
    font-size:15px;
  }
  .map-detail .topic-duration {
    margin-top:15px;
    width:100%;
    font-size:11px;
  }
  .map-detail .primary-button {
    margin-top:10px;
    width:100%;
    padding:10px 12px;
    font-size:12px;
  }
  .topic-grid {
    grid-template-columns:1fr;
  }
  .topic-card {
    padding:22px;
  }
  .topic-card p {
    min-height:0;
    font-size:15px;
    font-family:var(--sans);
  }
  .explore-bottom {
    margin-top:17px;
    gap:14px;
  }

  .current-note {
    padding:18px;
  }
  .page-heading {
    padding:31px 0 25px;
  }
  .page-heading h1 {
    font-size:40px;
    letter-spacing:-1.3px;
  }
  .page-heading p {
    font-size:16px;
  }
  .path-tabs {
    grid-template-columns:1fr;
  }
  .path-tab {
    display:grid;
    grid-template-columns:35px 1fr;
    column-gap:10px;
    padding:14px 18px;
  }
  .path-tab>span {
    grid-row:1/3;
  }
  .path-tab h3 {
    font-size:21px;
    margin:0 0 6px;
  }
  .path-tab p {
    font-size:10px;
  }
  .path-step {
    padding-left:52px;
  }
  .path-step h3 {
    font-size:25px;
  }
  .path-step p {
    font-size:15px;
  }
  .path-bridge {
    font-size:10px;
  }
  .timeline {
    padding-left:58px;
  }
  .milestone {
    padding-left:24px;
  }
  .milestone .year {
    font-size:24px;
    left:-60px;
  }
  .milestone h3 {
    font-size:25px;
  }
  .milestone .timeline-actions {
    gap:16px;
    flex-wrap:wrap;
  }
  .tab-bar {
    gap:18px;
    flex-wrap:wrap;
  }
  .tab-bar button {
    font-size:12px;
  }
  .timeline-intro {
    font-size:15px;
    padding:15px 18px;
  }
  .week-card {
    padding:18px;
    gap:12px;
  }
  .compare-controls {
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
  }
  .compare-controls select {
    width:100%;
  }
  .comparison-prompt {
    padding:20px;
  }
  .comparison-prompt h2 {
    font-size:25px;
  }
  .table-scroll {
    margin:0 -4px;
  }
  th,td {
    padding:15px;
    min-width:180px;
  }
  .takeaway {
    padding:12px 17px;
    font-size:16px;
    border-left:3px solid var(--accent);
  }
  .lab-workbench {
    padding:20px;
  }
  .lab-workbench h2 {
    font-size:28px;
  }
  .lab-tabs {
    gap:6px;
  }
  .lab-tab {
    padding:8px 11px;
    font-size:12px;
  }
  .lab-metrics {
    gap:7px;
  }
  .lab-metric {
    padding:13px 11px;
  }
  .lab-metric strong {
    font-size:25px;
    color:var(--accent-ink);
  }
  .lab-metric span {
    font-size:11px;
  }
  .bar-row {
    grid-template-columns:98px 1fr 20px;
    gap:10px;
    font-size:10px;
  }
  .glossary-toolbar {
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
  }
  .glossary-list,.source-list {
    grid-template-columns:1fr;
  }
  .source-card {
    padding:22px;
  }
  .topic-article {
    padding:24px;
  }
  .topic-article h2 {
    font-size:35px;
    letter-spacing:-1px;
  }
  .topic-lede {
    font-size:19px;
  }
  .dialog-toolbar {
    padding:15px 23px;
  }
  .topic-article>p:not(.topic-lede) {
    font-size:16px;
    max-width:68ch;
  }
  .example-block {
    padding:19px;
  }
  .example-block p {
    font-size:18px;
  }
  .connection-row {
    flex-direction:column;
    gap:5px;
    font-size:14px;
  }
  .connection-row button {
    max-width:100%;
  }
  .knowledge-check {
    padding:18px;
  }
  .knowledge-check h3 {
    font-size:22px;
  }
  .quiz-answer {
    font-size:14px;
    padding:10px;
  }
  .topic-meta {
    gap:9px;
    font-size:11px;
  }
  .toast {
    left:50%;
    width:max-content;
    font-size:11px;
    bottom:15px;
  }
  footer {
    padding:18px 20px;
  }
  .search-dialog {
    padding:20px;
  }
  .search-heading h2 {
    font-size:26px;
  }
  .search-dialog>input {
    font-size:13px;
  }
  .search-result {
    font-size:15px;
  }
  .search-result .result-type {
    font-size:7px;
  }
  .skip-link {
    left:20px;
  }
  .reset-area {
    align-items:flex-start;
    font-size:12px;
  }
  .noscript {
    inset:25% 10%;
    padding:25px;
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important;
  }
}