:root {
  color-scheme: dark;
  --bg: #0c1015;
  --surface: #121923;
  --text: #e8edf3;
  --muted: #99a6b5;
  --line: #2b3745;
  --blue: #68d7ff;
  --green: #8ee6a2;
  --violet: #d5a6ff;
  --amber: #f1c66d;
  --pink: #ff91b8;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--muted);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

main {
  width: min(900px, calc(100% - 2rem));
  margin-inline: auto;
  padding-block: 5rem;
}

h1, h2, h3, p, pre, figure, ul, ol, dl, dt, dd { margin: 0; }
h1, h2, h3, strong, dt, .label, .takeaway { color: var(--text); }
h1, h2 { padding-bottom: 0.75rem; }
h3 { padding-bottom: 0.4rem; }
section + section { padding-top: 2.5rem; }
p + p, p + ul, p + ol, ul + p, ol + p { padding-top: 1rem; }
p, li, details { text-wrap: pretty; }

ul, ol { padding-left: 1.25rem; }
li + li { padding-top: 0.5rem; }
li::marker { color: inherit; }

a {
  color: var(--blue);
  text-underline-offset: 0.2em;
}

a:hover, a:focus-visible { color: var(--green); }

code,
pre,
.meta,
.file-tree,
.command-output,
button {
  font-family: var(--mono);
}

code {
  padding: 0.12em 0.35em;
  border-radius: 0.3rem;
  background: var(--surface);
  color: var(--text);
}

:is(h1, h2, h3) code,
pre code {
  padding: 0;
  background: transparent;
}

.token-keyword { color: var(--pink); }
.token-function { color: var(--blue); }
.token-string { color: var(--green); }
.token-name { color: var(--violet); }
.token-number { color: var(--amber); }
.token-comment { color: var(--muted); }

pre,
.file-tree,
.command-output {
  overflow-x: auto;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--surface);
  color: var(--text);
  line-height: 1.5;
  tab-size: 2;
  white-space: pre;
}

pre + pre,
p + pre,
pre + p,
.file-tree,
.command-output {
  margin-top: 1rem;
}

.file-tree,
.command-output { white-space: pre-wrap; }
.command-output { color: var(--green); }

.course-nav,
.lesson-nav {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.course-nav { padding-bottom: 2rem; }
.course-progress { color: var(--amber); }
.lesson-nav { padding-top: 3rem; flex-wrap: wrap; }

header + section { padding-top: 3rem; }
.lede { color: var(--muted); }

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  padding-top: 1rem;
}

.boundary-flow,
.package-flow {
  display: grid;
  align-items: center;
  gap: 1.75rem;
  padding-top: 1.75rem;
}

.boundary-flow { grid-template-columns: repeat(5, auto); }
.package-flow { grid-template-columns: repeat(7, auto); }

.boundary-step {
  min-width: 0;
  padding-left: 1rem;
  border-left: 2px solid var(--blue);
  border-radius: 0.2rem;
}

.boundary-step:nth-of-type(3n + 2) { border-left-color: var(--green); }
.boundary-step:nth-of-type(3n) { border-left-color: var(--violet); }
.boundary-step strong,
.boundary-step span { display: block; }
.boundary-step span { padding-top: 0.35rem; color: var(--muted); }

.arrow {
  color: var(--amber);
  font-family: var(--mono);
  text-align: center;
}

.reference-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem;
  padding-top: 1.75rem;
}

.reference-card {
  padding-left: 1rem;
  border-left: 2px solid var(--blue);
  border-radius: 0.2rem;
}

.reference-card + .reference-card { border-left-color: var(--green); }

.definition-list { padding-top: 1.75rem; }
.definition-list .definition + .definition { padding-top: 1.75rem; }
.definition-list dd { padding-top: 0.35rem; }

.callout {
  padding: 1rem 1.1rem;
  border-left: 3px solid var(--blue);
  border-radius: 0.4rem;
  background: var(--surface);
}

.reference-grid + .callout,
.package-flow + .callout,
.boundary-flow + .callout,
.callout + .callout { margin-top: 1.75rem; }

.callout.caution { border-left-color: var(--amber); }
.callout.error { border-left-color: var(--pink); }
.callout.success { border-left-color: var(--green); }
.label { padding-bottom: 0.35rem; color: var(--violet); }

.check-list,
.source-list,
.qa-list { padding-top: 1.25rem; }
.check-list li::marker { color: var(--green); }
.qa-list > li + li { padding-top: 2rem; }

details { padding-top: 0.75rem; }
summary {
  width: fit-content;
  color: var(--blue);
  cursor: pointer;
}

details p { padding-top: 0.75rem; }

.focus-blue { color: var(--blue); }
.focus-green { color: var(--green); }
.focus-violet { color: var(--violet); }
.focus-amber { color: var(--amber); }
.focus-pink { color: var(--pink); }
.takeaway { color: var(--green); }

.lesson-list { padding-top: 1.25rem; }
.lesson-list > li + li { padding-top: 1.75rem; }
.lesson-title { display: block; color: var(--text); }
.lesson-summary { display: block; padding-top: 0.35rem; }

@media (max-width: 720px) {
  main { padding-block: 3rem; }
  .boundary-flow,
  .package-flow,
  .reference-grid,
  .quiz-options { grid-template-columns: 1fr; }
  .arrow { transform: rotate(90deg); }
}