@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&family=JetBrains+Mono:wght@400;700&family=Rubik:wght@400;500;700&display=swap');

/* ============================================================
   Palette: a code theme first. Five syntax hues, distinct in
   hue, close in lightness, all >= 7:1 on the ground.
   ============================================================ */

:root {
  color-scheme: dark;

  --bg: #12161f;
  --surface: #1a202b;
  --surface-2: #232a37;
  --code-bg: #0d1118;
  --line: #38414f;

  --text: #e8edf2;   /* 15:1 */
  --dim: #9fb0c0;    /*  8:1 */

  --sky: #5ec8ff;    /* links, types, primary action */
  --amber: #ffc857;  /* highlight, hints, numbers */
  --green: #7cd992;  /* strings, correct */
  --coral: #ff7a85;  /* wrong, warnings */
  --violet: #c792ea; /* keywords */

  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --body: 'Rubik', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  --measure: 64ch;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 1.5rem; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 1.125rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--amber); color: var(--bg);
  padding: 0.6rem 1rem; font-weight: 700; z-index: 50;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 3px; }

/* ---------- shell ---------- */

.shell { max-width: 1140px; margin: 0 auto; padding: 0 1.25rem 6rem; }
.layout { display: block; }

@media (min-width: 1040px) {
  .layout { display: grid; grid-template-columns: minmax(0, 1fr) 14rem; gap: 3.5rem; align-items: start; }
  .layout > main { grid-column: 1; grid-row: 1; }
  .layout > .rail { grid-column: 2; grid-row: 1; }
}

main { max-width: var(--measure); }

.masthead {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.5rem 1.25rem; padding: 1.5rem 0; margin-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}
.masthead a.home {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--display); font-weight: 800; font-size: 1.0625rem;
  letter-spacing: -0.01em; color: var(--text); text-decoration: none;
}
.masthead a.home svg { width: 1.15rem; height: 1.15rem; color: var(--amber); flex: none; }
.masthead a.home:hover { color: var(--sky); }
.masthead a.home:hover svg { color: var(--sky); }
.masthead .where { font-family: var(--mono); font-size: 0.75rem; color: var(--dim); }

.tab {
  display: inline-block; font-family: var(--mono); font-size: 0.6875rem;
  letter-spacing: 0.06em; color: var(--bg); background: var(--sky);
  padding: 0.18rem 0.6rem; border-radius: 4px; margin-bottom: 0.5rem;
}
.tab.c { background: var(--green); }
.tab.p { background: var(--violet); }

/* ---------- headings ---------- */

h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.25rem, 7vw, 3.25rem); line-height: 1.03;
  letter-spacing: -0.03em; color: #fff; margin: 0 0 0.5rem;
}
h1::before { content: '/'; color: var(--sky); }

h2 {
  font-family: var(--display); font-weight: 800; font-size: 1.75rem;
  line-height: 1.15; letter-spacing: -0.02em; color: #fff;
  margin: 3.25rem 0 1rem; padding-top: 1.25rem; border-top: 1px solid var(--line);
}
h2::before { content: '/'; color: var(--sky); }

h3 {
  font-family: var(--display); font-weight: 600; font-size: 1.25rem;
  letter-spacing: -0.01em; color: var(--amber); margin: 2rem 0 0.5rem;
}

h4 { font-family: var(--display); font-weight: 600; font-size: 1.0625rem; color: var(--text); margin: 1.75rem 0 0.4rem; }

p { margin: 0 0 1rem; max-width: var(--measure); }
.lede { font-size: 1.25rem; line-height: 1.6; color: var(--dim); margin-bottom: 1.75rem; }

a { color: var(--sky); text-underline-offset: 3px; }
a:hover { color: var(--amber); }

b, strong { color: #fff; font-weight: 700; }

ul, ol { padding-left: 1.35rem; margin: 0 0 1.15rem; max-width: var(--measure); }
li { margin-bottom: 0.5rem; }
li::marker { color: var(--sky); }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

/* ---------- code ---------- */

pre {
  background: var(--code-bg); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 1rem 1.15rem; overflow-x: auto;
  font-family: var(--mono); font-variant-ligatures: none;
  font-size: 0.875rem; line-height: 1.75;
  margin: 0 0 1.25rem; tab-size: 4; max-width: var(--measure);
}

code {
  font-family: var(--mono); font-variant-ligatures: none; font-size: 0.9em;
  background: var(--surface-2); color: var(--text);
  padding: 0.08em 0.32em; border-radius: 4px;
}
pre code { background: none; padding: 0; font-size: 1em; }

/* the five syntax hues, wherever they appear */
.k { color: var(--violet); }
.t { color: var(--sky); }
.s { color: var(--green); }
.n { color: var(--amber); }
.c { color: #7a8899; font-style: italic; }

pre.run { border-left: 3px solid var(--green); color: var(--dim); }
pre.run b { color: var(--amber); font-weight: 700; }

/* ---------- callouts ---------- */

.note {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--sky); border-radius: 0 8px 8px 0;
  padding: 0.9rem 1.15rem; margin: 0 0 1.25rem; max-width: var(--measure);
}
.note p:last-child { margin-bottom: 0; }
.note.warn { border-left-color: var(--coral); }
.note.win { border-left-color: var(--amber); }
.note .h { font-family: var(--display); font-weight: 600; font-size: 0.875rem; color: var(--sky); display: block; margin-bottom: 0.15rem; }
.note.warn .h { color: var(--coral); }
.note.win .h { color: var(--amber); }

/* ---------- tables ---------- */

.scroll { overflow-x: auto; margin: 0 0 1.25rem; max-width: var(--measure); }
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
th, td { text-align: left; padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-family: var(--display); font-weight: 600; font-size: 0.8125rem; color: var(--amber); }

/* ---------- problem cards ---------- */

.problem {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 1.25rem 1.4rem 1.15rem; margin: 0 0 1.25rem; max-width: var(--measure);
}
.problem > h3 { margin: 0 0 0.5rem; }
.problem > p:last-child, .problem > details:last-child { margin-bottom: 0; }
.problem table { font-size: 0.875rem; }

.lbl {
  font-family: var(--display); font-weight: 600; font-size: 0.75rem;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--dim);
  display: block; margin: 0 0 0.35rem;
}

.usefile {
  display: inline-block; font-family: var(--mono); font-size: 0.75rem;
  background: var(--surface-2); color: var(--sky);
  border: 1px solid var(--line); border-radius: 5px;
  padding: 0.2rem 0.55rem; margin: 0 0 0.85rem;
}
.usefile { display: inline-flex; align-items: center; gap: 0.4rem; }
.usefile::before {
  content: '';
  width: 0.85rem;
  height: 0.85rem;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V7Z%22%2F%3E%3Cpath%20d%3D%22M14%202v4a2%202%200%200%200%202%202h4%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V7Z%22%2F%3E%3Cpath%20d%3D%22M14%202v4a2%202%200%200%200%202%202h4%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

.spec { margin: 0 0 1rem; font-size: 0.9375rem; }
.spec > div { display: flex; gap: 0.75rem; padding: 0.35rem 0; border-bottom: 1px solid var(--line); }
.spec > div:last-child { border-bottom: 0; }
.spec dt {
  font-family: var(--display); font-weight: 600; font-size: 0.75rem;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--dim);
  flex: 0 0 6rem; padding-top: 0.2rem;
}
.spec dd { margin: 0; flex: 1; }
.spec .bad { color: var(--coral); }
.spec .good { color: var(--green); }

/* ---------- hints ---------- */

details { margin-top: 0.5rem; }

summary {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--display); font-weight: 600; font-size: 0.8125rem;
  color: var(--amber); cursor: pointer; margin: 0.35rem 0;
  padding: 0.4rem 0.9rem; list-style: none;
  border: 1px solid rgba(255, 200, 87, 0.45); border-radius: 999px;
  background: rgba(255, 200, 87, 0.09);
  transition: background 120ms ease, border-color 120ms ease;
}
summary::-webkit-details-marker { display: none; }
summary::before {
  content: '';
  width: 1rem;
  height: 1rem;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%2014c.2-1%20.7-1.7%201.5-2.5%201-.9%201.5-2.2%201.5-3.5A6%206%200%200%200%206%208c0%201%20.2%202.2%201.5%203.5.7.7%201.3%201.5%201.5%202.5%22%2F%3E%3Cpath%20d%3D%22M9%2018h6%22%2F%3E%3Cpath%20d%3D%22M10%2022h4%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%2014c.2-1%20.7-1.7%201.5-2.5%201-.9%201.5-2.2%201.5-3.5A6%206%200%200%200%206%208c0%201%20.2%202.2%201.5%203.5.7.7%201.3%201.5%201.5%202.5%22%2F%3E%3Cpath%20d%3D%22M9%2018h6%22%2F%3E%3Cpath%20d%3D%22M10%2022h4%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
summary:hover { background: rgba(255, 200, 87, 0.2); border-color: var(--amber); }
details[open] > summary { background: rgba(255, 200, 87, 0.16); border-color: var(--amber); color: #fff; }

details > *:not(summary) { margin-left: 0.2rem; font-size: 1rem; }
details > p:last-child { margin-bottom: 0.75rem; }

/* ---------- checklist ---------- */

.check { list-style: none; padding: 0; }
.check li { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.5rem 0; border-bottom: 1px solid var(--line); margin: 0; }
.check input { margin-top: 0.5rem; width: 1.05rem; height: 1.05rem; accent-color: var(--green); flex: none; }
.check label { cursor: pointer; font-size: 1rem; }
.check input:checked + label { color: var(--dim); text-decoration: line-through; }

/* ---------- downloads ---------- */

.zip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 1.1rem 1.25rem; margin: 0 0 1.5rem; max-width: var(--measure);
}
.zip a::before {
  content: '';
  display: inline-block;
  width: 1rem;
  height: 1rem;
  vertical-align: -0.15em;
  margin-right: 0.45rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%22%2F%3E%3Cpolyline%20points%3D%227%2010%2012%2015%2017%2010%22%2F%3E%3Cline%20x1%3D%2212%22%20x2%3D%2212%22%20y1%3D%2215%22%20y2%3D%223%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%22%2F%3E%3Cpolyline%20points%3D%227%2010%2012%2015%2017%2010%22%2F%3E%3Cline%20x1%3D%2212%22%20x2%3D%2212%22%20y1%3D%2215%22%20y2%3D%223%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

.zip a {
  font-family: var(--display); font-weight: 600; font-size: 1rem;
  text-decoration: none; background: var(--amber); color: var(--bg);
  padding: 0.55rem 1.1rem; border-radius: 6px; white-space: nowrap;
}
.zip a:hover { background: #fff; }
.zip span { font-size: 0.9375rem; color: var(--dim); flex: 1 1 12rem; }

/* ---------- side rail ---------- */

.rail { display: none; }

@media (min-width: 1040px) {
  .rail { display: block; position: sticky; top: 1.75rem; font-family: var(--display); font-weight: 600; font-size: 0.875rem; }
  .rail ol { list-style: none; padding: 0; margin: 0; }
  .rail li { margin: 0; }
  .rail a {
    display: block; padding: 0.35rem 0 0.35rem 0.8rem;
    border-left: 2px solid var(--line); color: var(--dim); text-decoration: none;
    transition: color 120ms ease, border-color 120ms ease;
  }
  .rail a:hover { color: var(--text); border-left-color: var(--dim); }
  .rail a.now { color: var(--sky); border-left-color: var(--sky); }
}

/* ---------- week cards ---------- */

.weeks { list-style: none; padding: 0; margin: 1.5rem 0 0; max-width: none; }
.weeks li { margin: 0 0 0.7rem; }
.weeks a {
  display: block; padding: 1.1rem 1.25rem;
  border: 1px solid var(--line); border-left: 4px solid var(--sky);
  border-radius: 0 10px 10px 0; background: var(--surface);
  text-decoration: none; color: var(--text);
  transition: border-color 120ms ease, background 120ms ease;
}
.weeks a:hover { border-left-color: var(--amber); background: var(--surface-2); }
.weeks .n { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.06em; color: var(--sky); display: block; }
.weeks .t {
  font-family: var(--display); font-weight: 800; font-size: 1.375rem;
  letter-spacing: -0.02em; color: #fff; display: block; line-height: 1.2; margin-bottom: 0.15rem;
}
.weeks .d { font-size: 0.9375rem; color: var(--dim); line-height: 1.55; }

.next {
  display: block; margin-top: 3rem; padding: 1.1rem 1.25rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; text-decoration: none; max-width: var(--measure);
}
.next .n { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.06em; color: var(--dim); display: block; }
.next .t { font-family: var(--display); font-weight: 800; font-size: 1.375rem; letter-spacing: -0.02em; color: #fff; }
.next:hover { border-color: var(--sky); }
.next:hover .t { color: var(--sky); }

footer { margin-top: 4rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: 0.875rem; color: var(--dim); max-width: var(--measure); }

/* ============================================================
   Demos
   ============================================================ */

.demo {
  background: var(--code-bg); border: 1px solid var(--line); border-radius: 10px;
  padding: 1.35rem 1.5rem; margin: 0 0 1.5rem; max-width: var(--measure);
}
.demo .ctl {
  display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
  margin-bottom: 1.1rem; font-family: var(--mono); font-size: 0.8125rem; color: var(--dim);
}
.demo input[type=range] { flex: 1 1 10rem; accent-color: var(--sky); }
.demo .val { font-family: var(--mono); color: var(--amber); font-size: 1.125rem; min-width: 3.5ch; text-align: right; }
.demo button {
  font-family: var(--display); font-weight: 600; font-size: 0.875rem;
  background: var(--sky); color: var(--bg); border: 0; border-radius: 6px;
  padding: 0.45rem 1rem; cursor: pointer;
}
.demo button:hover { background: var(--amber); }

.chain { font-family: var(--mono); font-variant-ligatures: none; font-size: 0.8125rem; }
.chain .br {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0.55rem 0.75rem; border-left: 3px solid var(--line);
  border-radius: 0 6px 6px 0; margin-bottom: 0.3rem;
  color: var(--text); background: var(--surface);
}
.chain .br .st { font-family: var(--display); font-weight: 600; font-size: 0.6875rem; white-space: nowrap; color: var(--dim); }
.chain .br.hit { border-left-color: var(--amber); background: rgba(255, 200, 87, 0.14); }
.chain .br.hit .st { color: var(--amber); }
.chain .br.miss { color: var(--dim); }
.chain .br.miss .st { color: var(--coral); }
.chain .br.never { background: transparent; }
.chain .br.never .code { opacity: 0.5; }
.chain .out { margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid var(--line); color: var(--dim); }
.chain .out b { color: var(--amber); font-weight: 400; }

.boxes { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.box { flex: 1 1 7rem; border: 1px solid var(--line); border-radius: 8px; padding: 0.65rem 0.75rem; text-align: center; background: var(--surface); }
.box .bt { font-family: var(--mono); font-size: 0.6875rem; color: var(--sky); display: block; }
.box .bn { font-family: var(--mono); font-size: 0.75rem; color: var(--dim); display: block; margin-bottom: 0.35rem; }
.box .bv { font-family: var(--mono); font-size: 1rem; color: var(--amber); display: block; min-height: 1.5em; }

.divrow { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; font-family: var(--mono); font-variant-ligatures: none; font-size: 1.125rem; }
.divrow .res { color: var(--amber); }
.divrow .lost { color: var(--coral); font-size: 0.8125rem; }
.divrow .lbl2 { font-family: var(--display); font-weight: 600; font-size: 0.6875rem; color: var(--dim); flex: 0 0 4rem; }

.anat { display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; margin: 0 0 1.35rem; font-family: var(--mono); }
.anat > div { text-align: center; }
.anat .tok { display: block; font-size: 1.0625rem; padding: 0.45rem 0.7rem; background: var(--code-bg); border: 1px solid var(--line); border-radius: 6px; }
.anat .cap { display: block; font-family: var(--display); font-weight: 600; font-size: 0.6875rem; color: var(--dim); margin-top: 0.4rem; }
.anat .cap:empty { visibility: hidden; }

.quiz { margin: 0 0 0.5rem; }
.quiz .q, .ex .q { padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
.quiz .q:last-of-type, .ex .q:last-of-type { border-bottom: 0; }
.quiz .qt, .ex .qt { display: block; margin-bottom: 0.55rem; font-size: 1rem; }
.quiz .opts, .ex .opts { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.quiz button, .ex .opts button {
  font-family: var(--mono); font-size: 0.8125rem;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 0.35rem 0.7rem; cursor: pointer;
}
.quiz button:hover:not(:disabled), .ex .opts button:hover { border-color: var(--sky); color: var(--sky); }
.quiz button.right, .ex .opts button.right { background: rgba(124, 217, 146, 0.18); border-color: var(--green); color: var(--green); }
.quiz button.wrong, .ex .opts button.wrong { background: rgba(255, 122, 133, 0.16); border-color: var(--coral); color: var(--coral); }
.quiz .q.done button:not(.right):not(.wrong), .ex .q.done button:not(.right):not(.wrong) { opacity: 0.35; }
.quiz .score { margin-top: 1rem; font-family: var(--display); font-weight: 600; font-size: 0.875rem; color: var(--dim); }
.quiz .score b { color: var(--amber); font-weight: 600; }

.window {
  background: var(--code-bg); border: 1px solid var(--line); border-radius: 10px;
  padding: 1.4rem 1.5rem 1.2rem; font-family: var(--mono); font-size: 0.8125rem;
  margin-bottom: 2rem; max-width: var(--measure);
}
.window .title {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.5rem, 5vw, 2rem); letter-spacing: -0.02em;
  color: var(--amber); margin: 0 0 0.1rem; line-height: 1.05;
}
.window .sub { color: var(--dim); margin: 0 0 1.3rem; font-size: 0.8125rem; }
.fighter { margin-bottom: 1rem; }
.fighter .row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.35rem; }
.fighter .who { color: var(--text); }
.fighter .cls { font-size: 0.6875rem; padding: 0.1rem 0.45rem; border-radius: 4px; margin-left: 0.4rem; }
.cls.warrior { background: rgba(255, 200, 87, 0.18); color: var(--amber); }
.cls.mage { background: rgba(199, 146, 234, 0.22); color: var(--violet); }
.fighter .num { color: var(--dim); font-variant-numeric: tabular-nums; }
.track { height: 9px; background: var(--surface-2); border-radius: 5px; overflow: hidden; }
.bar { height: 100%; border-radius: 5px; width: 0; animation: fill 1000ms cubic-bezier(0.2, 0.75, 0.3, 1) forwards; }
.bar.warrior { background: var(--amber); animation-delay: 250ms; }
.bar.mage { background: var(--violet); animation-delay: 500ms; }
@keyframes fill { to { width: var(--pct); } }
.verdict {
  margin-top: 1.25rem; padding-top: 0.9rem; border-top: 1px solid var(--line);
  font-family: var(--display); font-weight: 800; font-size: 1.125rem;
  color: #fff; opacity: 0; animation: show 500ms ease 1400ms forwards;
}
.verdict span {
  display: inline-block;
  width: 1.05rem;
  height: 1.05rem;
  vertical-align: -0.15em;
  margin-left: 0.35rem;
  background: var(--amber);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209H4.5a2.5%202.5%200%200%201%200-5H6%22%2F%3E%3Cpath%20d%3D%22M18%209h1.5a2.5%202.5%200%200%200%200-5H18%22%2F%3E%3Cpath%20d%3D%22M4%2022h16%22%2F%3E%3Cpath%20d%3D%22M10%2014.66V17c0%20.55-.47.98-.97%201.21C7.85%2018.75%207%2020.24%207%2022%22%2F%3E%3Cpath%20d%3D%22M14%2014.66V17c0%20.55.47.98.97%201.21C16.15%2018.75%2017%2020.24%2017%2022%22%2F%3E%3Cpath%20d%3D%22M18%202H6v7a6%206%200%200%200%2012%200V2Z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209H4.5a2.5%202.5%200%200%201%200-5H6%22%2F%3E%3Cpath%20d%3D%22M18%209h1.5a2.5%202.5%200%200%200%200-5H18%22%2F%3E%3Cpath%20d%3D%22M4%2022h16%22%2F%3E%3Cpath%20d%3D%22M10%2014.66V17c0%20.55-.47.98-.97%201.21C7.85%2018.75%207%2020.24%207%2022%22%2F%3E%3Cpath%20d%3D%22M14%2014.66V17c0%20.55.47.98.97%201.21C16.15%2018.75%2017%2020.24%2017%2022%22%2F%3E%3Cpath%20d%3D%22M18%202H6v7a6%206%200%200%200%2012%200V2Z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
@keyframes show { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .bar { width: var(--pct); animation: none; }
  .verdict { opacity: 1; animation: none; }
}

/* ---------- print ---------- */

@media print {
  :root { color-scheme: light; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .rail, .zip, .masthead, .next, .demo, footer { display: none; }
  .exbtn, .exresult, .exhints, ol.order .nudge, ol.order .grip { display: none; }
  .ex { background: #fff; border-color: #999; }
  input.blank { border: 0; border-bottom: 1px solid #000; background: none; color: #000; min-width: 6ch; }
  ol.order li { background: #fff; cursor: auto; }
  h1, h2, h3, h4, b, strong, .window .title { color: #000; }
  a { color: #000; }
  pre, .note, .problem, .window { background: #f4f4f4; color: #000; border-color: #999; }
  .k, .t, .s, .n { color: #000; }
  .c { color: #555; }
  pre.run b { color: #000; text-decoration: underline; }
  summary { background: none; border-color: #999; color: #000; }
  details > * { display: block !important; }
  h2 { break-after: avoid; }
  pre, table, .note, .problem { break-inside: avoid; }
}

/* ============================================================
   Interactive exercises (quiz.js)
   ============================================================ */

.ex {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.15rem 1.3rem 1.25rem;
  margin: 0 0 1.25rem;
  max-width: var(--measure);
}
.problem .ex { background: var(--code-bg); }

.exprompt { margin: 0 0 0.85rem; font-size: 1rem; }

.exbtn {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.875rem;
  background: var(--sky);
  color: var(--bg);
  border: 0;
  border-radius: 6px;
  padding: 0.45rem 1.1rem;
  cursor: pointer;
  margin-top: 0.9rem;
}
.exbtn:hover { background: var(--amber); }

.exresult {
  margin: 0.7rem 0 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--dim);
  min-height: 1.4em;
}
.exresult.ok { color: var(--green); }
.exresult.no { color: var(--coral); }

/* fill in the blank */
input.blank {
  font-family: var(--mono);
  font-variant-ligatures: none;
  font-size: 1em;
  background: var(--surface-2);
  color: var(--amber);
  border: 1px solid var(--line);
  border-bottom: 2px solid var(--sky);
  border-radius: 4px;
  padding: 0.05em 0.4em;
  margin: 0 0.15em;
}
input.blank:focus { outline: 2px solid var(--sky); outline-offset: 1px; }
input.blank.right { border-bottom-color: var(--green); color: var(--green); }
input.blank.wrong { border-bottom-color: var(--coral); color: var(--coral); }

/* drag to order */
ol.order { list-style: none; padding: 0; margin: 0; counter-reset: o; }
ol.order li {
  counter-increment: o;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 6px;
  padding: 0.5rem 0.7rem;
  margin-bottom: 0.4rem;
  cursor: grab;
  font-family: var(--mono);
  font-variant-ligatures: none;
  font-size: 0.8125rem;
}
ol.order li::before {
  content: counter(o);
  font-family: var(--display);
  font-size: 0.75rem;
  color: var(--dim);
  min-width: 1ch;
}
ol.order li.dragging { opacity: 0.5; cursor: grabbing; }
ol.order li.right { border-left-color: var(--green); }
ol.order li.wrong { border-left-color: var(--coral); }

ol.order .grip { color: var(--dim); cursor: grab; }
ol.order .oitem { flex: 1; white-space: pre-wrap; }

ol.order .nudge { display: flex; gap: 0.2rem; }
ol.order .nudge button {
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1;
  background: transparent;
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: 4px;
  width: 1.6rem;
  height: 1.6rem;
  cursor: pointer;
}
ol.order .nudge button:hover { color: var(--sky); border-color: var(--sky); }

@media (max-width: 560px) {
  ol.order li { font-size: 0.75rem; }
}

/* method machine (week 4) */
.machine { border-left: 2px solid var(--line); padding-left: 1rem; }
.machine pre { margin: 0.6rem 0; }
.mrow { display: flex; align-items: center; gap: 0.75rem; font-family: var(--mono); font-size: 0.8125rem; }
.mlbl {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.6875rem;
  color: var(--dim);
  flex: 0 0 6rem;
}
.mval { font-size: 1.25rem; color: var(--amber); font-variant-numeric: tabular-nums; }

/* week groups on the index */
ol.weeks { list-style: none; padding: 0; }
ol.weeks > li { margin: 0 0 1.75rem; }
ol.weeks .wknum {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sky);
  padding-bottom: 0.4rem;
  margin-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
}
ol.weeks ul { list-style: none; padding: 0; margin: 0; max-width: none; }
ol.weeks ul li { margin: 0 0 0.55rem; }
ol.weeks .t em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--amber);
  border-radius: 4px;
  padding: 0.15rem 0.45rem;
  vertical-align: 0.25em;
  margin-left: 0.5rem;
}

/* targeted feedback under an exercise */
.exhints { margin-top: 0.5rem; }
.exhint {
  margin: 0 0 0.4rem;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 200, 87, 0.09);
  border-left: 3px solid var(--amber);
  border-radius: 0 6px 6px 0;
  font-size: 0.9375rem;
  color: var(--text);
}
.exhint:last-child { margin-bottom: 0; }
.ex .q .exhint { margin-top: 0.5rem; }

/* ---------- small screens ---------- */

@media (max-width: 560px) {
  body { font-size: 1.0625rem; }

  /* more characters per line before a code block has to scroll */
  pre { font-size: 0.75rem; padding: 0.85rem 0.9rem; }
  .chain { font-size: 0.75rem; }
  .chain .br { flex-wrap: wrap; gap: 0.3rem; }
  .chain .br .st { font-size: 0.625rem; }

  h1 { font-size: 2rem; }
  h2 { font-size: 1.4rem; }

  .problem, .ex, .demo { padding-left: 1rem; padding-right: 1rem; }
  .zip { padding: 0.9rem 1rem; }
  .zip a { width: 100%; text-align: center; }

  /* thumb-sized controls */
  ol.order .nudge button { width: 2.25rem; height: 2.25rem; font-size: 0.875rem; }
  ol.order li { flex-wrap: wrap; }
  .demo input[type=range] { height: 2rem; }
  summary { padding: 0.55rem 1rem; }
}

/* a comfortable grab area for the slider on every screen */
.demo input[type=range] { height: 1.75rem; }

/* JS off: exercises never render, so do not leave an empty card behind */
.ex:empty { display: none; }