:root {
  --ink: #1d2428;
  --muted: #657077;
  --paper: #f6f4ef;
  --surface: #fffefa;
  --line: #d8d6cf;
  --nav: #182126;
  --nav-muted: #aeb9bd;
  --accent: #ca5b32;
  --accent-dark: #a83f1d;
  --code: #20292e;
  --sidebar-width: 19rem;
  --content-width: 49rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 2rem; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.75;
  text-rendering: optimizeLegibility;
}
body.nav-open { overflow: hidden; }
a { color: var(--accent-dark); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: .12em; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: .18rem solid #e89a54; outline-offset: .2rem; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: .75rem;
  left: .75rem;
  padding: .55rem .85rem;
  color: white;
  background: var(--accent-dark);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }
.reading-progress { position: fixed; z-index: 30; inset: 0 0 auto var(--sidebar-width); height: .2rem; }
.reading-progress span { display: block; width: 0; height: 100%; background: var(--accent); }

.sidebar {
  position: fixed;
  z-index: 50;
  inset: 0 auto 0 0;
  display: flex;
  width: var(--sidebar-width);
  flex-direction: column;
  color: white;
  background: var(--nav);
  border-right: 1px solid #2b373d;
}
.sidebar-brand { display: flex; align-items: center; justify-content: space-between; min-height: 4rem; padding: .75rem 1.25rem; border-bottom: 1px solid #2b373d; }
.sidebar-brand > a, .mobile-header > a { display: flex; align-items: center; color: white; text-decoration: none; }
.sidebar-brand strong { display: block; font-size: 1.05rem; line-height: 1.2; letter-spacing: .01em; }
.sidebar nav { min-height: 0; flex: 1; overflow-y: auto; padding: 1.5rem .75rem 2rem; scrollbar-color: #536167 transparent; scrollbar-width: thin; }
.nav-label { margin: 0 .65rem .85rem; color: #78878e; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.course-nav-list { margin: 0; padding: 0; list-style: none; }
.course-nav-list > li { margin-bottom: .25rem; }
.course-nav-list a { display: flex; align-items: center; color: var(--nav-muted); text-decoration: none; border-left: 2px solid transparent; }
.course-nav-list .stage-link { gap: .7rem; padding: .45rem .65rem; font-size: .85rem; font-weight: 650; line-height: 1.35; }
.stage-link span { width: 1.6rem; flex: none; color: #64747b; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; }
.course-nav-list a:hover { color: white; }
.course-nav-list a.active { color: white; border-left-color: var(--accent); }
.sidebar-footer { display: flex; justify-content: space-between; padding: .85rem 1.25rem; color: #79878d; border-top: 1px solid #2b373d; font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; }
.nav-close { display: none; }

.page-shell { margin-left: var(--sidebar-width); }
.mobile-header { display: none; }
main { overflow: clip; }
.course-hero { position: relative; min-height: 42rem; padding: 7.5rem max(2rem, calc((100% - var(--content-width)) / 2)) 5rem; overflow: hidden; color: white; background: var(--nav); }
.course-hero::after { position: absolute; right: -8rem; bottom: -13rem; width: 31rem; height: 31rem; content: ""; border: 1px solid #334148; border-radius: 50%; box-shadow: 0 0 0 5rem #1b252a, 0 0 0 calc(5rem + 1px) #334148; }
.course-hero > * { position: relative; z-index: 1; }
.course-hero h1 { max-width: 48rem; margin: 1.3rem 0 1.7rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3rem, 6vw, 5.5rem); font-weight: 400; letter-spacing: -.045em; line-height: .98; }
.hero-intro { max-width: 43rem; margin: 0; color: #cad2d4; font-size: 1.13rem; line-height: 1.7; }
.hero-actions { display: flex; align-items: center; gap: 1.5rem; margin-top: 2.25rem; color: #8f9ca1; font-size: .78rem; }
.primary-action { display: inline-flex; align-items: center; gap: 1.5rem; padding: .8rem 1rem; color: white; background: var(--accent); font-size: .78rem; font-weight: 750; letter-spacing: .04em; text-decoration: none; text-transform: uppercase; }
.primary-action:hover { background: #dc6840; }
.course-stats { display: flex; gap: 3.5rem; margin: 4.5rem 0 0; }
.course-stats div { display: grid; }
.course-stats dt { font-family: Georgia, serif; font-size: 2rem; line-height: 1; }
.course-stats dd { margin: .45rem 0 0; color: #89969b; font-size: .67rem; letter-spacing: .12em; text-transform: uppercase; }

.course-overview, .site-footer { width: min(var(--content-width), calc(100% - 4rem)); margin-inline: auto; }
.course-overview { padding-block: 6rem 4rem; }
.course-overview > p:first-child { color: #3c474c; font-family: Georgia, serif; font-size: 1.5rem; line-height: 1.55; }
.course-overview h2 { margin-top: 4rem; }
.course-overview h2#search-terms, .course-overview h2#course-map, .course-overview h2#how-to-use-this-repo { scroll-margin-top: 2rem; }
h2 { margin: 3.5rem 0 1rem; font-family: Georgia, serif; font-size: 2rem; font-weight: 400; line-height: 1.2; }
p { margin: 1rem 0; }
ul, ol { padding-left: 1.45rem; }
li { padding-left: .25rem; }
li + li { margin-top: .45rem; }
hr { margin: 4rem 0; border: 0; border-top: 1px solid var(--line); }
blockquote { margin: 1.6rem 0; padding: 1rem 1.25rem; color: #374349; background: #ece9e2; border-left: .2rem solid var(--accent); }
code { padding: .12rem .35rem; color: #98401f; background: #e9e5dd; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86em; border-radius: .15rem; }
pre { position: relative; margin: 1.6rem 0; padding: 1.3rem 1.4rem; overflow: auto; color: #dae2e4; background: var(--code); border-left: .2rem solid #53636a; line-height: 1.6; tab-size: 2; }
pre code { padding: 0; color: inherit; background: none; font-size: .78rem; border-radius: 0; }
.code-block { margin: 1.6rem 0; overflow: hidden; background: var(--code); border-left: .2rem solid #53636a; }
.code-block figcaption { padding: .5rem 1.2rem; color: #93a2a8; background: #182126; border-bottom: 1px solid #344249; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .65rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.code-block pre { margin: 0; border-left: 0; }
.syntax-keyword { color: #ff8c82; font-weight: 650; }
.syntax-type { color: #82c7ff; }
.syntax-builtin { color: #ffb86b; }
.syntax-string { color: #b5dc9a; }
.syntax-number, .syntax-constant { color: #d7a8ff; }
.syntax-comment { color: #91a0a6; font-style: italic; }
.table-wrap { margin: 1.5rem 0; overflow-x: auto; border: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; background: var(--surface); font-size: .88rem; }
th, td { padding: .7rem .8rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
th { color: #505b60; background: #eeece6; font-size: .69rem; letter-spacing: .06em; text-transform: uppercase; }
tr:last-child td { border-bottom: 0; }
details { margin: 1.5rem 0; border: 1px solid var(--line); background: var(--surface); }
summary { padding: .8rem 1rem; cursor: pointer; font-size: .8rem; font-weight: 750; }
details > p { padding: 0 1rem .9rem; }
.site-footer { display: flex; justify-content: space-between; padding: 2rem 0 4rem; color: var(--muted); border-top: 1px solid var(--line); font-size: .8rem; }

.stage-shell { width: min(var(--content-width), calc(100% - 4rem)); margin-inline: auto; padding: 4rem 0 0; }
.stage-label { display: flex; align-items: center; gap: .7rem; margin-bottom: 2.5rem; color: var(--muted); font-size: .7rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.stage-label span { padding-right: .7rem; color: var(--accent-dark); border-right: 1px solid var(--line); }
.stage-label a { color: var(--muted); text-decoration: none; }
.stage-label a:hover { color: var(--ink); }
.stage-content { padding-bottom: 1.5rem; }
.stage-content > details:last-child { margin-bottom: 0; }
.stage-content > h1:first-child { max-width: 46rem; margin: 0 0 .75rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.75rem, 6vw, 4.5rem); font-weight: 400; letter-spacing: -.04em; line-height: 1.02; }
.stage-content > blockquote:first-of-type { margin: 0 0 3.5rem; padding: 0; color: var(--muted); background: none; border: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; letter-spacing: .02em; }
.stage-content h2 { margin: 5rem 0 1.25rem; padding-bottom: .85rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 400; letter-spacing: -.025em; line-height: 1.15; border-bottom: 1px solid var(--line); }
.stage-content h3 { margin: 3rem 0 1rem; padding-bottom: .65rem; font-size: .75rem; font-weight: 800; letter-spacing: .14em; line-height: 1.3; text-transform: uppercase; border-bottom: 1px solid var(--line); }
.learning-block { margin: 2.5rem 0; padding: 1.5rem; border-left: .25rem solid; }
.learning-block.checkpoint { background: #e9f0eb; border-left-color: #397157; }
.learning-block.exercise { background: #f1ebe3; border-left-color: var(--accent); }
.learning-block > h3 { margin: 0 0 1rem; padding-bottom: .75rem; border-bottom-color: rgb(29 36 40 / 14%); }
.learning-block.checkpoint > h3 { color: #285c44; }
.learning-block.exercise > h3 { color: var(--accent-dark); }
.learning-block > :last-child { margin-bottom: 0; }
.learning-block details { background: rgb(255 254 250 / 72%); }
.stage-pagination { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; border-top: 1px solid var(--line); }
.pagination-link { display: flex; min-height: 5.5rem; flex-direction: column; justify-content: center; padding: 1rem 1.5rem; color: var(--ink); text-decoration: none; }
.pagination-link + .pagination-link { border-left: 1px solid var(--line); }
.pagination-link.next { text-align: right; }
.pagination-link span { color: var(--accent-dark); font-size: .67rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.pagination-link strong { margin-top: .35rem; font-family: Georgia, serif; font-size: 1.05rem; font-weight: 400; line-height: 1.35; }
.pagination-link:hover { background: #ece9e2; }

@media (max-width: 900px) {
  :root { --sidebar-width: 18rem; }
  .sidebar { transform: translateX(-100%); transition: transform .22s ease; }
  body.nav-open .sidebar { transform: none; }
  .nav-close { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; padding: 0; color: white; background: transparent; border: 1px solid #3c4a50; }
  .nav-close svg, .nav-open svg { width: 1.15rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; }
  .nav-scrim { position: fixed; z-index: 40; inset: 0; display: block; background: rgb(7 13 16 / 65%); }
  .nav-scrim[hidden] { display: none; }
  .page-shell { margin-left: 0; }
  .mobile-header { position: sticky; z-index: 35; top: 0; display: flex; height: 4rem; align-items: center; justify-content: space-between; padding: .7rem 1rem; color: white; background: var(--nav); border-bottom: 1px solid #344149; }
  .nav-open { display: flex; align-items: center; gap: .45rem; padding: .5rem .7rem; color: white; background: transparent; border: 1px solid #46545b; font: inherit; font-size: .75rem; }
  .reading-progress { left: 0; top: 3.85rem; }
  .course-hero { min-height: 38rem; padding-top: 5.5rem; }
  .stage-shell { padding-top: 3rem; }
}

@media (max-width: 600px) {
  body { font-size: .96rem; }
  .course-hero { min-height: calc(100vh - 4rem); padding: 4rem 1.25rem 3rem; }
  .course-hero h1 { font-size: clamp(2.8rem, 14vw, 4rem); }
  .hero-intro { font-size: 1rem; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .course-stats { gap: 2.1rem; margin-top: 3.5rem; }
  .course-overview, .site-footer { width: calc(100% - 2.5rem); }
  .stage-shell { width: calc(100% - 2.5rem); padding-top: 2.5rem; }
  .stage-content { padding-bottom: 4rem; }
  .stage-content h2 { margin-top: 4rem; }
  .learning-block { margin-inline: -.25rem; padding: 1.25rem; }
  .course-overview { padding-block: 4rem 3rem; }
  .course-overview > p:first-child { font-size: 1.25rem; }
  pre { margin-inline: -1.25rem; padding-inline: 1.25rem; border-left: 0; }
  .code-block { margin-inline: -1.25rem; border-left: 0; }
  .code-block pre { margin-inline: 0; }
  .table-wrap { margin-inline: 0; }
  .stage-pagination { grid-template-columns: 1fr; }
  .pagination-link { min-height: 6.5rem; padding-inline: .25rem; }
  .pagination-link + .pagination-link { border-top: 1px solid var(--line); border-left: 0; }
}

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