:root {
  --ink: #17212b;
  --muted: #576574;
  --paper: #f7f5ef;
  --surface: #ffffff;
  --navy: #102a43;
  --cyan: #19a7ae;
  --yellow: #f2c94c;
  --coral: #e85d4a;
  --danger-on-dark: #ffb4ab;
  --line: #d9dee3;
  --code: #111820;
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--paper);
  --bs-body-font-family: "Aptos", "Segoe UI", sans-serif;
  --bs-body-line-height: 1.6;
  --bs-border-color: var(--line);
}

html { scroll-behavior: smooth; }
progress { width: 160px; height: 8px; accent-color: var(--yellow); }

.eyebrow { margin: 0 0 10px; color: var(--coral); font-size: .75rem; font-weight: 800; text-transform: uppercase; }
main > section { padding: 4rem 3.5rem; border-top: 1px solid var(--line); }

.hero { min-height: min(610px, calc(100vh - 110px)); padding: 48px 58px; background-color: var(--surface); background-image: linear-gradient(#eef1f2 1px, transparent 1px), linear-gradient(90deg, #eef1f2 1px, transparent 1px); background-size: 34px 34px; }
h1, h2, h3 { margin-top: 0; font-family: Georgia, "Times New Roman", serif; line-height: 1.08; overflow-wrap: anywhere; }
h1 { max-width: 760px; margin-bottom: 18px; font-size: 4.35rem; font-weight: 500; }
h2 { font-size: 3rem; font-weight: 500; }
h3 { margin-bottom: 10px; font-size: 1.3rem; }
.hero-lede { max-width: 640px; margin: 0 0 28px; color: var(--muted); font-size: 1.15rem; }
.hero-diagram { max-width: 430px; filter: drop-shadow(12px 16px 0 rgba(16, 42, 67, .12)); }

.section-heading { max-width: 720px; margin-bottom: 34px; }
.section-heading h2 { margin-bottom: 0; }

.completion-toggle[aria-pressed="true"] { color: white; background: var(--cyan); border-color: var(--cyan); }
.state-model { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 24px 0; text-align: center; font-size: .8rem; font-weight: 800; }
.state-model span { padding: 10px 5px; background: white; border: 1px solid #b8d6d5; }
.state-model strong { grid-column: 1 / -1; padding: 10px; color: white; background: var(--navy); }
.code-panel { min-width: 0; overflow: hidden; color: #dce7ee; background: var(--code); border-radius: 4px; }
.code-heading { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; color: white; background: #23313e; }
pre { margin: 0; padding: 22px; overflow-x: auto; font: .86rem/1.65 Consolas, monospace; }
code { font-family: Consolas, monospace; }
.exercise-hero { padding: 72px 58px 58px; color: white; background-color: var(--navy); background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 34px 34px; }
.exercise-hero .eyebrow { color: var(--yellow); }
.exercise-hero h1 { max-width: 700px; margin-bottom: 18px; }
.exercise-hero .hero-lede { color: #d8e2e9; }
.exercise-facts { display: grid; grid-template-columns: 1fr auto; border-top: 1px solid #557087; }
.exercise-facts span, .exercise-facts strong { padding: 10px 0; border-bottom: 1px solid #557087; }
.exercise-facts span { color: #b8c8d3; font-size: .8rem; }
.exercise-facts strong { text-align: right; }
.alert strong { display: block; }
.list-group-item.d-flex > div { min-width: 0; }
.command-panel { width: 100%; max-width: 760px; padding: 16px 18px; overflow-x: auto; color: #dce7ee; background: var(--code); border-left: 4px solid var(--cyan); }
.command-panel code { white-space: nowrap; }
.command-panel.result { color: var(--yellow); }
.text-bg-dark .text-danger,
.bg-dark .text-danger,
.code-panel .text-danger,
.command-panel .text-danger,
.exercise-hero .text-danger { color: var(--danger-on-dark) !important; }

@media (max-width: 991.98px) {
  .hero { min-height: auto; padding: 58px 28px; }
  main > section { padding: 52px 28px; }
}

@media (max-width: 575.98px) {
  h1 { font-size: 2.65rem; }
  h2 { font-size: 2.25rem; }
  .exercise-facts { grid-template-columns: 1fr; }
  .exercise-facts span { padding-bottom: 0; border-bottom: 0; }
  .exercise-facts strong { padding-top: 0; text-align: left; }
  .state-model { grid-template-columns: 1fr; }
  .state-model strong { grid-column: 1; }
}

@media (max-width: 320px) {
  h1 { font-size: 1.65rem; }
  main > section, .hero, .exercise-hero { padding-right: 16px; padding-left: 16px; }
  .exercise-hero.row { --bs-gutter-x: 1.5rem; }
}