/* ==========================================================================
   Computer Systems & Networking for Theatre and Entertainment Arts
   ==========================================================================
   Design intent: a technical production document, not a product landing page.
   Dark by default because that is the room this gets read in (a machine room,
   a control position, a rehearsal in half light), with a full light theme for
   a bright classroom and for print.

   Accent choice is not decorative. Amber is tungsten, roughly 3200 K, the
   colour of a theatre lamp. Cyan reads as data. The two are used consistently:
   amber for the human and the interactive, cyan for the network and the number.

   The dark ground, the warm ink and the ember are the author's own palette,
   shared with mi2.dev and with the other three modules in this programme, so a
   student moving between them is visibly inside one body of work rather than
   four sites that happen to share an author. The four figure roles (energy,
   signal, safe, fault) keep their separation, because that separation is
   load-bearing in every explainer on every one of these sites.

   No web fonts, deliberately. The author's display face is named first and the
   system stack carries it when it is absent, because a class page open on a
   projector should make no third-party request before somebody presses play.

   --ease-resolve is the motion signature: a system settling into place rather
   than a thing sliding in. It is the same curve as the portfolio's.
   ========================================================================== */

:root {
  --ground: #faf8f5;
  --surface: #ffffff;
  --raised: #f3efe9;
  --line: #e0dbd2;
  --line-soft: #ece7df;
  --ink: #16191a;
  --ink-2: #4a5150;
  --muted: #6d7472;
  --amber: #9c6216;
  --amber-soft: #f6ecdc;
  --cyan: #17697e;
  --cyan-soft: #e2f0f3;
  --green: #2f7d4a;
  --red: #b33c34;
  --shadow: 0 1px 2px rgba(20, 23, 28, .06), 0 8px 24px rgba(20, 23, 28, .06);
  --radius: 10px;
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Noto Sans Mono CJK TC", monospace;
  --display: Fraunces, "Noto Serif TC", var(--sans);
  --ease-resolve: cubic-bezier(.16, 1, .3, 1);
  --dur-settle: .45s;
  --side-w: 258px;
}

:root:not([data-theme="light"]) {
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0a0e10;
    --surface: #12181a;
    --raised: #181f21;
    --line: #2a3234;
    --line-soft: #1d2427;
    --ink: #ece7dc;
    --ink-2: #b6bdb9;
    --muted: #8b9391;
    --amber: #e0a44f;
    --amber-soft: #241d13;
    --cyan: #66c3cd;
    --cyan-soft: #0e2427;
    --green: #6cc47f;
    --red: #e2685f;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .3);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0a0e10;
  --surface: #12181a;
  --raised: #181f21;
  --line: #2a3234;
  --line-soft: #1d2427;
  --ink: #ece7dc;
  --ink-2: #b6bdb9;
  --muted: #8b9391;
  --amber: #e0a44f;
  --amber-soft: #241d13;
  --cyan: #66c3cd;
  --cyan-soft: #0e2427;
  --green: #6cc47f;
  --red: #e2685f;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .3);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 16px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

.sr, .skip:not(:focus) {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip:focus {
  position: fixed; top: 8px; left: 8px; z-index: 100; padding: 10px 16px;
  background: var(--amber); color: #000; border-radius: 8px; font-weight: 600;
}

/* --- Top bar ------------------------------------------------------------ */

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  height: 58px; padding: 0 14px;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
/* A translucent sticky bar is only translucent if the blur behind it works. On
   a browser without backdrop-filter the page scrolls visibly through the
   header, which reads as the colour shifting as you scroll, so there the bar
   is solid instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar { background: var(--ground); }
}
/* And on a touch device it is solid regardless. Blurring a sticky layer during
   a momentum scroll is the expensive path and the one that bands and smears;
   an opaque bar is steady, and on a phone nothing is lost by it. */
@media (hover: none) and (pointer: coarse) {
  .topbar { background: var(--ground); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.topbar-sp { flex: 1; }

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.brand-mark {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  background: linear-gradient(150deg, var(--amber) 0%, var(--amber) 45%, var(--cyan) 46%, var(--cyan) 100%);
}
.brand-txt { display: flex; flex-direction: column; line-height: 1.15; }
.brand-txt b { font-size: 14.5px; font-weight: 650; letter-spacing: -.01em; }
.brand-txt i { font-style: normal; font-size: 11px; color: var(--muted); letter-spacing: .02em; }

.icon-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 11px;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 8px;
  font: inherit; font-size: 15px; cursor: pointer;
}
.icon-btn:hover { border-color: var(--amber); color: var(--ink); }
.icon-btn kbd {
  font: 600 10px/1 var(--mono); padding: 3px 5px; border-radius: 4px;
  background: var(--raised); border: 1px solid var(--line); color: var(--muted);
}
.menu-btn { display: none; }

/* --- Layout -------------------------------------------------------------- */

.layout { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); }

.side {
  position: sticky; top: 58px; align-self: start;
  height: calc(100vh - 58px); overflow-y: auto;
  padding: 20px 14px 40px;
  border-right: 1px solid var(--line);
}
.side-h {
  margin: 18px 0 8px; padding: 0 10px;
  font: 600 10.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.side-h:first-child { margin-top: 0; }

.nv {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin-bottom: 2px;
  border-radius: 8px; text-decoration: none; color: var(--ink-2);
  font-size: 14px; border: 1px solid transparent;
}
.nv:hover { background: var(--raised); color: var(--ink); }
.nv.on { background: var(--amber-soft); color: var(--ink); border-color: color-mix(in srgb, var(--amber) 35%, transparent); }
.nv.on .nv-n { background: var(--amber); color: #14171c; }
.nv-n {
  flex: none; width: 21px; height: 21px; border-radius: 6px;
  display: grid; place-items: center;
  background: var(--raised); border: 1px solid var(--line);
  font: 650 11px/1 var(--mono);
}
.nv-t { flex: 1; }
.nv-h { font: 500 11px/1 var(--mono); color: var(--muted); }
.nv-res { padding-left: 12px; }

.side-foot {
  margin-top: 26px; padding: 12px; border-radius: 8px;
  background: var(--raised); border: 1px solid var(--line-soft);
}
.side-foot p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); }

main { min-width: 0; padding: 0 0 100px; }

/* --- Document typography ------------------------------------------------- */

.doc { max-width: 860px; margin: 0 auto; padding: 32px 24px 0; }
.doc > * { max-width: 74ch; }
.doc > .table-wrap, .doc > .cards, .doc > .flows, .doc > .tool,
.doc > .practice, .doc > .panel, .doc > .tabs, .doc > .hero,
.doc > .page-head, .doc > .toc, .doc > .progress-strip { max-width: none; }

.hd { line-height: 1.25; letter-spacing: -.015em; scroll-margin-top: 76px; position: relative; }
.hd-2 {
  margin: 48px 0 14px; padding-bottom: 9px; font-size: 25px; font-weight: 650;
  border-bottom: 1px solid var(--line);
}
.hd-3 { margin: 32px 0 10px; font-size: 18.5px; font-weight: 650; }
.hd-4 { margin: 24px 0 8px; font-size: 15.5px; font-weight: 650; color: var(--ink-2); }

.anchor {
  position: absolute; left: -0.8em; top: 0;
  color: var(--muted); text-decoration: none; opacity: 0;
  font-weight: 400;
}
.hd:hover .anchor { opacity: .5; }
.anchor:hover { opacity: 1 !important; color: var(--amber); }

.doc p { margin: 0 0 15px; }
.doc ul, .doc ol { margin: 0 0 16px; padding-left: 22px; }
.doc li { margin-bottom: 7px; }
.doc li > ul, .doc li > ol { margin-top: 7px; }

.doc strong { font-weight: 650; color: var(--ink); }
.doc em { color: var(--ink-2); }

code {
  font: 500 .875em/1.4 var(--mono);
  background: var(--raised); border: 1px solid var(--line-soft);
  padding: .12em .38em; border-radius: 5px;
  word-break: break-word;
}
pre.code {
  margin: 0 0 18px; padding: 14px 16px; overflow-x: auto;
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius);
  font: 500 13.5px/1.6 var(--mono);
}
pre.code code { background: none; border: 0; padding: 0; font-size: inherit; }

blockquote {
  margin: 0 0 18px; padding: 14px 18px;
  border-left: 3px solid var(--amber);
  background: var(--amber-soft); border-radius: 0 var(--radius) var(--radius) 0;
}
blockquote p:last-child { margin-bottom: 0; }
blockquote p { font-size: 16.5px; }

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

/* Tables scroll inside themselves. The page never scrolls sideways. */
.table-wrap {
  margin: 0 0 20px; overflow-x: auto;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
}
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
thead th {
  position: sticky; top: 0;
  background: var(--raised); color: var(--ink);
  font-weight: 650; font-size: 12.5px; letter-spacing: .03em; text-transform: uppercase;
  padding: 10px 13px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
tbody td { padding: 10px 13px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: color-mix(in srgb, var(--amber) 5%, transparent); }
td code { white-space: nowrap; }

.tasklist { list-style: none; padding-left: 2px; }
.tasklist li { margin-bottom: 9px; }
.tasklist label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.tick { margin-top: 5px; accent-color: var(--amber); width: 15px; height: 15px; flex: none; }
.tick:checked + span { color: var(--muted); text-decoration: line-through; }

.note {
  padding: 13px 16px; border-radius: var(--radius);
  background: var(--cyan-soft); border: 1px solid color-mix(in srgb, var(--cyan) 28%, transparent);
  font-size: 14.5px;
}

/* --- Page head ----------------------------------------------------------- */

.page-head { margin-bottom: 26px; }
.eyebrow { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 14px; }
.pill {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  background: var(--amber-soft); color: var(--amber);
  border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent);
  font: 600 11.5px/1.3 var(--sans); letter-spacing: .02em;
}
.pill-q { background: var(--cyan-soft); color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 30%, transparent); }

.page-head h1, .hero h1 {
  margin: 0 0 12px; font-size: clamp(30px, 4.4vw, 42px);
  line-height: 1.12; letter-spacing: -.028em; font-weight: 680;
  /* The author's display face when the reader has it, and the same system
     stack as everything else when they do not. Nothing is fetched either way. */
  font-family: var(--display);
}
.strap { font-size: 17.5px; line-height: 1.55; color: var(--ink-2); max-width: 62ch; }

.head-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 9px; cursor: pointer;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line);
  font: 600 14px/1 var(--sans); text-decoration: none;
}
.btn:hover { border-color: var(--amber); color: var(--ink); transform: translateY(-1px); }
.btn-primary { background: var(--amber); border-color: var(--amber); color: #14171c; }
.btn-primary:hover { color: #14171c; filter: brightness(1.08); }
.btn[data-done="1"] { background: var(--green); border-color: var(--green); color: #06130a; }

/* --- Hero / home --------------------------------------------------------- */

.hero { padding: 20px 0 8px; }
.hero-sub { color: var(--muted); font-weight: 500; font-size: .62em; letter-spacing: -.01em; }
.spine { margin: 24px 0; }
.spine p { font-size: 19px; line-height: 1.5; font-weight: 500; }

.progress-strip { margin: 30px 0 0; }
.pbar {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.pbar-track { flex: 1; height: 7px; border-radius: 99px; background: var(--raised); overflow: hidden; }
.pbar-fill { height: 100%; background: linear-gradient(90deg, var(--amber), var(--cyan)); transition: width var(--dur-settle) var(--ease-resolve); }
.pbar-lbl { font: 600 12.5px/1 var(--mono); color: var(--muted); white-space: nowrap; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 14px; margin: 20px 0 26px; }
.card {
  display: block; padding: 18px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line);
  text-decoration: none; color: inherit; position: relative;
}
.card:hover { border-color: var(--amber); transform: translateY(-2px); box-shadow: var(--shadow); color: inherit; }
.card h3 { margin: 0 0 7px; padding-right: 42px; font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.card p { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.card-n {
  position: absolute; top: 16px; right: 16px;
  font: 700 30px/1 var(--mono); color: var(--line); letter-spacing: -.04em;
}
.card:hover .card-n { color: color-mix(in srgb, var(--amber) 40%, transparent); }
.card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.card-go { font: 600 13px/1 var(--sans); color: var(--amber); }
.cards-sm .card h3 { font-size: 15.5px; }

.flows { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 18px 0 20px; }
.flow { padding: 15px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); border-top-width: 3px; }
.flow h3 { margin: 0 0 5px; font-size: 15.5px; font-weight: 650; }
.flow p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.flow-control { border-top-color: var(--amber); }
.flow-media { border-top-color: var(--cyan); }
.flow-clock { border-top-color: var(--green); }
.flow-management { border-top-color: var(--red); }

/* --- TOC, tabs ----------------------------------------------------------- */

.toc {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 12px 14px; margin-bottom: 22px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.toc-h { font: 600 10.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.toc a {
  font-size: 12.5px; padding: 4px 9px; border-radius: 6px;
  background: var(--raised); text-decoration: none; color: var(--ink-2); border: 1px solid var(--line-soft);
}
.toc a:hover { border-color: var(--amber); color: var(--ink); }

.tabs {
  display: flex; gap: 4px; margin-bottom: 24px; overflow-x: auto;
  border-bottom: 1px solid var(--line); padding-bottom: 0;
}
.tab {
  flex: none; padding: 10px 15px; cursor: pointer;
  background: none; border: 0; border-bottom: 2px solid transparent;
  font: 600 14px/1 var(--sans); color: var(--muted); white-space: nowrap;
}
.tab:hover { color: var(--ink); }
.tab.on { color: var(--amber); border-bottom-color: var(--amber); }
.panel { display: none; }
.panel.on { display: block; }
.panel > .hd-2:first-child { margin-top: 8px; }

/* --- Self test ----------------------------------------------------------- */

.qa-list { list-style: none; padding: 0; margin: 18px 0; }
.qa { margin-bottom: 9px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.qa-q {
  display: flex; gap: 11px; align-items: flex-start; width: 100%;
  padding: 13px 15px; cursor: pointer; text-align: left;
  background: none; border: 0; color: var(--ink);
  font: 500 15px/1.5 var(--sans);
}
.qa-q:hover { background: var(--raised); }
.qa-n {
  flex: none; width: 21px; height: 21px; border-radius: 6px; margin-top: 1px;
  display: grid; place-items: center; background: var(--raised);
  border: 1px solid var(--line); font: 650 11px/1 var(--mono); color: var(--muted);
}
.qa-q[aria-expanded="true"] { color: var(--amber); }
.qa-q[aria-expanded="true"] .qa-n { background: var(--amber); color: #14171c; border-color: var(--amber); }
.qa-a { padding: 0 15px 14px 47px; border-top: 1px solid var(--line-soft); }
.qa-a p { margin: 12px 0 0; font-size: 14.5px; color: var(--ink-2); }

/* --- Tools and practice -------------------------------------------------- */

.lede { font-size: 16.5px; color: var(--ink-2); margin-bottom: 22px; }

.tool, .practice {
  margin: 0 0 22px; padding: 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.tool-h {
  margin: 0 0 4px; font-size: 17px; font-weight: 650; letter-spacing: -.01em;
  scroll-margin-top: 76px;
}
.tool-sub { margin: 0 0 16px; font-size: 13.5px; color: var(--muted); }

.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 16px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font: 600 11.5px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.field input, .field select {
  padding: 9px 11px; border-radius: 8px;
  background: var(--ground); color: var(--ink); border: 1px solid var(--line);
  font: 500 14.5px/1.3 var(--mono); width: 100%;
}
.field input:focus, .field select:focus { outline: 2px solid var(--amber); outline-offset: -1px; border-color: var(--amber); }
.field select { font-family: var(--sans); }

.readout {
  padding: 15px 17px; border-radius: var(--radius); margin-bottom: 12px;
  background: var(--cyan-soft); border: 1px solid color-mix(in srgb, var(--cyan) 30%, transparent);
}
.readout-big { font: 700 27px/1.15 var(--mono); letter-spacing: -.02em; color: var(--ink); }
.readout-sub { margin-top: 5px; font-size: 13.5px; color: var(--ink-2); }
.readout.pass { background: color-mix(in srgb, var(--green) 12%, transparent); border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.readout.fail { background: color-mix(in srgb, var(--red) 12%, transparent); border-color: color-mix(in srgb, var(--red) 40%, transparent); }

.working {
  margin: 0; padding: 13px 15px; border-radius: 8px; overflow-x: auto;
  background: var(--raised); border: 1px solid var(--line-soft);
  font: 500 13px/1.65 var(--mono); color: var(--ink-2);
  white-space: pre;
}
.working b { color: var(--amber); font-weight: 600; }

.rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.row-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 110px) 34px; gap: 8px; align-items: center; }
.row-item input { min-width: 0; }
.row-item input { padding: 8px 10px; border-radius: 7px; background: var(--ground); color: var(--ink); border: 1px solid var(--line); font: 500 14px/1.3 var(--mono); }
.row-item input[type="text"] { font-family: var(--sans); }
.row-del { background: none; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); cursor: pointer; height: 34px; font-size: 15px; }
.row-del:hover { border-color: var(--red); color: var(--red); }

.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.chip {
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  background: var(--raised); border: 1px solid var(--line); color: var(--ink-2);
  font: 500 12.5px/1.3 var(--sans);
}
.chip:hover { border-color: var(--amber); color: var(--ink); }
.chip.on { background: var(--amber); border-color: var(--amber); color: #14171c; font-weight: 600; }

/* Practice-specific */
.q-card { padding: 20px; border-radius: var(--radius); background: var(--raised); border: 1px solid var(--line); margin-bottom: 14px; }
.q-prompt { font: 600 19px/1.4 var(--sans); margin: 0 0 4px; }
.q-prompt code { font-size: .9em; }
.q-meta { font: 500 12px/1 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; }
.q-answer { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 15.5px; }
.q-answer code { font-size: .92em; }

.opts { display: flex; flex-direction: column; gap: 7px; margin: 12px 0; }
.opt {
  display: flex; gap: 10px; align-items: flex-start; text-align: left; width: 100%;
  padding: 11px 14px; border-radius: 9px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  font: 500 14.5px/1.45 var(--sans);
}
.opt:hover:not(:disabled) { border-color: var(--amber); }
.opt:disabled { cursor: default; }
.opt.right { border-color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); }
.opt.wrong { border-color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); }
.opt-k { flex: none; font: 650 12px/1.5 var(--mono); color: var(--muted); }

.scorebar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.score {
  padding: 5px 12px; border-radius: 999px; font: 650 12.5px/1.4 var(--mono);
  background: var(--raised); border: 1px solid var(--line); color: var(--ink-2);
}
.score.good { background: color-mix(in srgb, var(--green) 15%, transparent); border-color: var(--green); color: var(--green); }
.score.bad { background: color-mix(in srgb, var(--red) 15%, transparent); border-color: var(--red); color: var(--red); }

.sortgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 10px; margin: 14px 0; }
.sortcol { padding: 11px; border-radius: 9px; background: var(--raised); border: 1px solid var(--line); border-top-width: 3px; min-height: 60px; }
.sortcol h4 { margin: 0 0 3px; font-size: 13.5px; font-weight: 650; }
.sortcol p { margin: 0 0 8px; font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.sortcol.control { border-top-color: var(--amber); }
.sortcol.media { border-top-color: var(--cyan); }
.sortcol.clock { border-top-color: var(--green); }
.sortcol.management { border-top-color: var(--red); }
.sorted { display: block; width: 100%; text-align: left; padding: 7px 9px; margin-bottom: 5px; border-radius: 6px; font: 500 12px/1.35 var(--sans); background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); }
.sorted.right { border-color: var(--green); }
.sorted.wrong { border-color: var(--red); }

.steps { display: flex; flex-direction: column; gap: 7px; margin: 12px 0; }
.step { display: flex; gap: 10px; align-items: flex-start; text-align: left; width: 100%; padding: 10px 13px; border-radius: 8px; cursor: pointer; background: var(--surface); border: 1px solid var(--line); color: var(--ink); font: 500 14px/1.45 var(--sans); }
.step:hover:not(:disabled) { border-color: var(--cyan); }
.step:disabled { opacity: .55; cursor: default; }
.step-l { flex: none; width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; font: 650 10.5px/1 var(--mono); background: var(--raised); border: 1px solid var(--line); color: var(--muted); }
.step-res { margin: 6px 0 10px 30px; padding: 9px 13px; border-left: 2px solid var(--cyan); background: var(--cyan-soft); border-radius: 0 7px 7px 0; font-size: 13.5px; }
.step-res.dud { border-left-color: var(--red); background: color-mix(in srgb, var(--red) 8%, transparent); }

.flash { text-align: center; padding: 30px 20px; }
.flash-q { font: 650 clamp(20px, 3.4vw, 30px)/1.3 var(--sans); margin-bottom: 8px; }
.flash-zh { font-size: 18px; color: var(--cyan); margin-bottom: 14px; }
.flash-a { font: 500 clamp(16px, 2.4vw, 21px)/1.5 var(--mono); color: var(--amber); padding: 18px; background: var(--raised); border-radius: var(--radius); margin: 14px 0; }
.flash-tag { font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

.gloss-controls { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-top: 18px; }
#gloss-filter { flex: 1; min-width: 220px; padding: 10px 14px; border-radius: 9px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); font: 400 15px/1.3 var(--sans); }
#gloss-filter:focus { outline: 2px solid var(--amber); outline-offset: -1px; }
.gloss-count { font: 500 12.5px/1 var(--mono); color: var(--muted); }
/* The user-agent [hidden] rule loses to any author rule that sets display, so
   a component styled `display: grid` stays on screen while claiming to be
   hidden. This was already patched by hand for table rows once and then bit
   the teach-mode overview. One reset, for everything. */
[hidden] { display: none !important; }

/* --- Search modal -------------------------------------------------------- */

.search-modal { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); padding: 12vh 16px 16px; }
.search-box { max-width: 620px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.search-input { width: 100%; padding: 17px 20px; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); font: 400 17px/1.3 var(--sans); }
.search-input:focus { outline: none; }
.search-results { max-height: 52vh; overflow-y: auto; }
.sr-item { display: block; padding: 12px 20px; text-decoration: none; color: inherit; border-bottom: 1px solid var(--line-soft); }
.sr-item:hover, .sr-item.sel { background: var(--amber-soft); color: inherit; }
.sr-t { font: 600 14px/1.3 var(--sans); }
.sr-s { font: 500 11.5px/1 var(--mono); color: var(--amber); margin: 3px 0 4px; }
.sr-x { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.sr-none { padding: 26px 20px; text-align: center; color: var(--muted); font-size: 14px; }
.search-hint { margin: 0; padding: 9px 20px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--muted); display: flex; gap: 5px; align-items: center; }
.search-hint kbd { font: 600 10px/1 var(--mono); padding: 3px 5px; border-radius: 4px; background: var(--raised); border: 1px solid var(--line); }

/* --- Teach mode ---------------------------------------------------------- */

body.teach-mode .topbar, body.teach-mode .side { display: none; }
body.teach-mode .layout { grid-template-columns: 1fr; }
body.teach-mode main { padding: 0; }

.teach { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.teach-bar {
  display: flex; align-items: center; gap: 12px; flex: none;
  padding: 0 16px; height: 54px;
  border-bottom: 1px solid var(--line); background: var(--surface);
}
.teach-sp { flex: 1; }
.teach-exit { text-decoration: none; color: var(--muted); font-size: 19px; padding: 4px 8px; border-radius: 7px; }
.teach-exit:hover { background: var(--raised); color: var(--red); }
.teach-title { margin: 0; font: 650 14px/1 var(--sans); }
.teach-block { font: 500 12.5px/1 var(--mono); color: var(--amber); padding: 5px 10px; border-radius: 999px; background: var(--amber-soft); }
.teach-btn { padding: 7px 13px; border-radius: 8px; cursor: pointer; background: var(--raised); border: 1px solid var(--line); color: var(--ink-2); font: 600 13px/1 var(--sans); }
.teach-btn:hover { border-color: var(--amber); color: var(--ink); }
.teach-clock { font: 700 20px/1 var(--mono); letter-spacing: -.02em; min-width: 74px; text-align: right; }
.teach-clock.warn { color: var(--amber); }
.teach-clock.over { color: var(--red); }
.teach-pos { font: 500 12.5px/1 var(--mono); color: var(--muted); }

.teach-track { flex: 1; overflow-y: auto; }
.slide { display: none; padding: 40px clamp(20px, 5vw, 70px) 60px; }
.slide.on { display: block; }
.slide-inner { max-width: 1180px; margin: 0 auto; font-size: clamp(17px, 1.55vw, 23px); }
.slide-inner .hd-2 { font-size: clamp(28px, 3.6vw, 48px); border: 0; margin: 0 0 22px; padding: 0; color: var(--amber); }
.slide-inner .hd-3 { font-size: clamp(21px, 2.1vw, 29px); margin: 30px 0 12px; }
.slide-inner .hd-4 { font-size: clamp(18px, 1.7vw, 22px); }
.slide-inner table { font-size: clamp(15px, 1.25vw, 19px); }
.slide-inner thead th { font-size: clamp(12px, 1vw, 15px); }
.slide-inner pre.code { font-size: clamp(14px, 1.2vw, 19px); }
.slide-inner blockquote p { font-size: clamp(19px, 1.9vw, 27px); }
.slide-inner .anchor { display: none; }
.slide-inner li { margin-bottom: 10px; }

.teach-foot { display: flex; align-items: center; gap: 14px; flex: none; padding: 10px 16px; border-top: 1px solid var(--line); background: var(--surface); }
.teach-nav { padding: 9px 16px; border-radius: 9px; cursor: pointer; background: var(--raised); border: 1px solid var(--line); color: var(--ink); font: 600 14px/1 var(--sans); }
.teach-nav:hover:not(:disabled) { border-color: var(--amber); }
.teach-nav:disabled { opacity: .35; cursor: default; }
.teach-dots { flex: 1; display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; }
.tdot { width: 26px; height: 5px; border-radius: 99px; background: var(--line); border: 0; cursor: pointer; padding: 0; }
.tdot:hover { background: var(--muted); }
.tdot.on { background: var(--amber); }

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 900px) {
  .menu-btn { display: inline-flex; }
  .layout { grid-template-columns: 1fr; }
  .side {
    position: fixed; top: 58px; left: 0; width: 280px; z-index: 39;
    background: var(--surface); transform: translateX(-100%);
    transition: transform var(--dur-settle) var(--ease-resolve); box-shadow: var(--shadow);
  }
  .side.open { transform: none; }
  .doc { padding: 24px 16px 0; }
  .brand-txt i { display: none; }
  .row-item { grid-template-columns: 1fr 90px 34px; }
}

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

/* --- Print --------------------------------------------------------------- */

@media print {
  .topbar, .side, .toc, .tabs, .head-actions, .search-modal,
  .teach-foot, .teach-bar, .teach-loc-big, .gloss-controls, .progress-strip { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .layout { display: block; }
  .doc { max-width: none; padding: 0; }
  /* The tab you are reading is the one that prints. The Print study notes
     button widens that to the Learn tab plus this class's numbers card, which
     is the pair worth having on paper. */
  .panel { display: none !important; }
  .panel.on { display: block !important; }
  body.print-notes .panel[data-panel="content"],
  body.print-notes .panel[data-panel="numbers"] { display: block !important; }
  body.print-notes .panel:not([data-panel="content"]):not([data-panel="numbers"]) { display: none !important; }
  .print-head { display: block !important; font-size: 9.5pt; line-height: 1.5; color: #444; margin: 0 0 14pt; }
  .when { color: #000; }
  .when-h { border: 1px solid #999; background: none; color: #000; }
  .anim-fig { border: 1px solid #bbb; background: none; break-inside: avoid; }
  .anim-tag { display: none; }
  .anim-note { background: none; border-left: 2px solid #999; }
  .sched-next, .byline, .side-by { display: none !important; }
  .table-wrap { overflow: visible; border: 1px solid #999; break-inside: auto; }
  thead th { background: #eee; color: #000; position: static; }
  tr, .card, .tool, blockquote, pre.code { break-inside: avoid; }
  .hd-2 { break-after: avoid; }
  a { color: #000; text-decoration: none; }
  .pill { border: 1px solid #999; color: #000; background: none; }
}

/* --- Interactive explainers ---------------------------------------------- */

.anim { margin: 26px 0; }
.anim-fig {
  margin: 0; padding: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.anim-cap {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-bottom: 5px; font: 650 16px/1.35 var(--sans); letter-spacing: -.01em; color: var(--ink);
}
.anim-tag {
  padding: 3px 8px; border-radius: 999px; flex: none;
  background: var(--amber-soft); color: var(--amber);
  border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent);
  font: 700 9.5px/1.3 var(--sans); letter-spacing: .09em; text-transform: uppercase;
}
.anim-sub { margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; color: var(--muted); max-width: 70ch; }
.anim-stage { position: relative; }
.anim-canvas { display: block; width: 100%; border-radius: 8px; background: var(--ground); }
.anim-note {
  margin: 14px 0 0; padding: 12px 14px; border-radius: 8px;
  background: var(--raised); border-left: 3px solid var(--cyan);
  font-size: 13.5px; line-height: 1.55; color: var(--ink-2);
}
.anim-note b { color: var(--ink); }

/* Hold the note. On a projector the figure's conclusion waits for the room to
   commit; a class page never hides anything. Teach mode only, no animation on
   reveal: the answer is either up or it is not. */
.anim-note-key {
  display: none; margin: 0; padding: 3px 11px; border-radius: 999px; cursor: pointer;
  border: 1px dashed var(--line); background: transparent; color: var(--muted);
  font: 500 13px/1.6 var(--sans); text-align: left;
}
.anim-note-key kbd {
  display: inline-block; padding: 0 5px; border-radius: 4px;
  border: 1px solid var(--line); font: 600 11px/1.5 var(--mono); color: var(--ink-2);
}
.anim-note-key:hover { border-style: solid; border-color: var(--cyan); color: var(--ink-2); }
.anim-note.has-lead .anim-note-key { margin-left: 7px; }
body.teach-mode .anim-note.is-held .anim-note-held { display: none; }
body.teach-mode .anim-note.is-held .anim-note-key { display: inline-block; }
body.teach-mode.answers-shown .anim-note.is-held .anim-note-held { display: inline; }
body.teach-mode.answers-shown .anim-note.is-held .anim-note-key { display: none; }
@media print {
  .anim-note-key { display: none !important; }
  .anim-note-held { display: inline !important; }
}

.anim-controls { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-bottom: 14px; }
.ac { font: 500 12.5px/1 var(--sans); color: var(--ink-2); }
.ac-l { display: flex; align-items: baseline; gap: 6px; font: 600 10.5px/1 var(--sans);
  letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.ac-v { font: 700 12px/1 var(--mono); color: var(--amber); text-transform: none; letter-spacing: 0; }

.ac-slider { display: flex; flex-direction: column; min-width: 132px; }
.ac-slider input { width: 100%; accent-color: var(--amber); height: 18px; }

.ac-text { display: flex; flex-direction: column; min-width: 152px; }
.ac-text input {
  padding: 7px 10px; border-radius: 7px; width: 100%;
  background: var(--ground); color: var(--ink); border: 1px solid var(--line);
  font: 500 13.5px/1.2 var(--mono);
}
.ac-text input:focus { outline: 2px solid var(--amber); outline-offset: -1px; }

.ac-btn, .ac-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 8px; cursor: pointer;
  background: var(--raised); border: 1px solid var(--line); color: var(--ink-2);
  font: 600 12.5px/1 var(--sans);
}
.ac-btn:hover, .ac-toggle:hover { border-color: var(--amber); color: var(--ink); }
.ac-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); border: 1px solid var(--muted); }
.ac-toggle.on { background: var(--amber-soft); border-color: var(--amber); color: var(--ink); }
.ac-toggle.on .ac-dot { background: var(--amber); border-color: var(--amber); }

.ac-choice { display: flex; flex-direction: column; min-width: 0; max-width: 100%; }
.ac-opts { display: inline-flex; flex-wrap: wrap; max-width: 100%; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.ac-opts button {
  padding: 8px 11px; cursor: pointer; border: 0; border-right: 1px solid var(--line);
  background: var(--raised); color: var(--muted); font: 600 12px/1 var(--sans);
}
.ac-opts button:last-child { border-right: 0; }
.ac-opts button:hover { color: var(--ink); }
.ac-opts button.on { background: var(--amber); color: #14171c; }

/* Bit-level views, used by the subnet explainers */
.sb { font-family: var(--mono); }
.sb-row { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; flex-wrap: wrap; }
.sb-lbl { width: 62px; flex: none; font: 600 10.5px/1 var(--sans); letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); text-align: right; }
.sb-bits { display: flex; align-items: center; flex: 1; min-width: 0; }
.sb-b {
  flex: 1 1 0; min-width: 0; text-align: center; font-style: normal;
  font: 600 11px/1.9 var(--mono); border-radius: 2px; margin: 0 .5px;
}
.sb-b.net { background: color-mix(in srgb, var(--cyan) 26%, transparent); color: var(--ink); }
.sb-b.host { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--ink-2); }
.sb-b.mask.net { background: color-mix(in srgb, var(--cyan) 45%, transparent); }
.sb-b.res { opacity: .85; }
.sb-dot { flex: none; width: 7px; text-align: center; color: var(--muted); font-style: normal; }
.sb-net { flex: none; font: 600 12px/1 var(--mono); color: var(--cyan); min-width: 108px; text-align: right; }
.sb-axis { display: flex; margin: 4px 0 12px 72px; }
.sb-net-lbl, .sb-host-lbl { font: 600 9.5px/1.6 var(--sans); letter-spacing: .05em; text-transform: uppercase; }
.sb-net-lbl { color: var(--cyan); border-top: 2px solid var(--cyan); }
.sb-host-lbl { flex: 1; color: var(--amber); border-top: 2px solid var(--amber); text-align: right; }
.sb-out { display: grid; grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); gap: 9px; margin-top: 14px; }
.sb-out > div { padding: 9px 11px; border-radius: 7px; background: var(--raised); border: 1px solid var(--line-soft); }
.sb-out b { display: block; font: 700 14px/1.3 var(--mono); color: var(--ink); }
.sb-out span { font: 500 10px/1.4 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.sb-bad { color: var(--red); font-size: 13px; }
.sb-verdict {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  margin-top: 12px; padding: 12px 14px; border-radius: 8px;
}
.sb-verdict.ok { background: color-mix(in srgb, var(--green) 13%, transparent); border: 1px solid var(--green); }
.sb-verdict.no { background: color-mix(in srgb, var(--red) 13%, transparent); border: 1px solid var(--red); }
.sb-verdict b { font: 700 14px/1 var(--sans); }
.sb-verdict.ok b { color: var(--green); }
.sb-verdict.no b { color: var(--red); }
.sb-verdict span:last-child { font: 500 12px/1 var(--mono); color: var(--muted); }
.sb-wire { width: 34px; height: 3px; border-radius: 2px; }
.sb-verdict.ok .sb-wire { background: var(--green); }
.sb-verdict.no .sb-wire { background: repeating-linear-gradient(90deg, var(--red) 0 6px, transparent 6px 11px); }

/* Teach mode: the explainers are the visual, so give them the room */
.slide-inner .anim-fig { padding: 20px; }
.slide-inner .anim-cap { font-size: clamp(18px, 1.8vw, 25px); }
.slide-inner .anim-sub, .slide-inner .anim-note { font-size: clamp(14px, 1.15vw, 18px); }
.slide-inner .ac, .slide-inner .ac-opts button { font-size: clamp(12px, .95vw, 15px); }
.slide-inner .sb-b { font-size: clamp(10px, .85vw, 14px); }
.slide-inner .sb-out b { font-size: clamp(13px, 1.1vw, 18px); }

@media print { .anim-controls { display: none; } .anim-fig { break-inside: avoid; } }
.teach-sub { font: 500 11.5px/1 var(--mono); color: var(--muted); white-space: nowrap; }

/* --- Video --------------------------------------------------------------- */

.vid { margin: 24px 0; }
.vid-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.vid-play {
  display: flex; align-items: center; gap: 16px; width: 100%; cursor: pointer;
  padding: 22px 20px; border: 0; text-align: left;
  background: linear-gradient(135deg, color-mix(in srgb, var(--amber) 12%, var(--raised)), var(--raised));
  color: var(--ink);
}
.vid-play:hover { background: linear-gradient(135deg, color-mix(in srgb, var(--amber) 22%, var(--raised)), var(--raised)); }
.vid-tri {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; font-size: 16px;
  background: var(--amber); color: #14171c; padding-left: 3px;
}
.vid-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vid-meta b { font: 650 15.5px/1.35 var(--sans); }
.vid-meta i { font: 500 12px/1 var(--sans); font-style: normal; color: var(--muted); }
.vid-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.vid-why {
  margin: 0; padding: 11px 16px; border-top: 1px solid var(--line);
  font-size: 13px; line-height: 1.5; color: var(--muted); background: var(--surface);
}
.vid-why a { white-space: nowrap; }
@media print { .vid-play { background: none; } .vid-tri { display: none; } }

/* --- Binary bit box ------------------------------------------------------- */

.bitbox { display: flex; gap: 5px; margin-bottom: 14px; }
.bitb {
  flex: 1; min-width: 0; padding: 10px 2px; cursor: pointer;
  border-radius: 8px; background: var(--raised); border: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.bitb:hover { border-color: var(--amber); }
.bitb b { font: 700 20px/1 var(--mono); color: var(--muted); }
.bitb span { font: 500 10px/1 var(--mono); color: var(--muted); }
.bitb.on { background: color-mix(in srgb, var(--cyan) 25%, transparent); border-color: var(--cyan); }
.bitb.on b { color: var(--ink); }
.bitb.on span { color: var(--cyan); }

.bitsum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px;
  padding: 13px 15px; border-radius: 8px; background: var(--raised); border: 1px solid var(--line-soft); }
.bitsum-eq { font: 500 13px/1.4 var(--mono); color: var(--muted); }
.bitsum b { font: 700 24px/1 var(--mono); color: var(--ink); }
.bitsum-hex { font: 500 12px/1 var(--mono); color: var(--cyan); }
.bitsum-mask { font: 600 11px/1 var(--sans); padding: 4px 9px; border-radius: 999px; }
.bitsum-mask.ok { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.bitsum-mask.no { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); }

/* --- Prepare page --------------------------------------------------------- */

.prep-block {
  margin-bottom: 34px; padding: 20px 22px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.prep-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.prep-head > div { flex: 1; min-width: 180px; }
.prep-n {
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center; font: 700 18px/1 var(--mono);
  background: var(--amber); color: #14171c;
}
.prep-meta { margin: 3px 0 0; font: 500 12px/1 var(--mono); color: var(--muted); }
.prep-block .hd-3 { margin-top: 22px; }
.side-build { margin-top: 8px !important; padding-top: 8px; border-top: 1px solid var(--line);
  font: 500 10.5px/1.5 var(--mono) !important; color: var(--muted); }
.side-build code { background: none; border: 0; padding: 0; font-size: inherit; color: var(--amber); }

/* DIP switch bank: nine switches, read left to right, switch 1 first. */
.dipbank { display: flex; gap: 6px; margin: 16px 0 6px; flex-wrap: wrap; }
.dipsw {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 44px; padding: 8px 4px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--raised);
  font-variant-numeric: tabular-nums;
}
.dipsw b { font-size: 11px; color: var(--muted); font-weight: 700; }
.dipsw span { font-size: 10px; color: var(--muted); font-family: var(--mono); }
.dipsw i { font-size: 10.5px; font-style: normal; font-weight: 700; color: var(--muted); }
.dipsw.on { border-color: var(--amber); background: var(--amber-soft); }
.dipsw.on b, .dipsw.on i, .dipsw.on span { color: var(--amber); }

/* "Going deeper": material that is not on the spine of a class. Present, and
   visibly optional, so nobody mistakes breadth for the syllabus. */
.hd-ext { border-left: 3px solid var(--cyan); padding-left: 12px; }
.ext-badge {
  display: inline-block; margin-right: 9px; padding: 2px 8px;
  border-radius: 999px; background: var(--cyan-soft); color: var(--cyan);
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; vertical-align: middle;
}

/* Teach mode: an overview, and what is coming next. */
.teach-next { font-size: 12px; color: var(--muted); margin: 0 10px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.tdot.tdot-new { margin-left: 12px; position: relative; }
.tdot.tdot-new::before { content: ''; position: absolute; left: -7px; top: 50%;
  transform: translateY(-50%); width: 1px; height: 12px; background: var(--line); }
.teach-grid {
  position: fixed; inset: 0; z-index: 90; overflow: auto; padding: 24px;
  background: color-mix(in srgb, var(--ground) 96%, transparent);
  display: grid; gap: 10px; align-content: start;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.tcard { text-align: left; padding: 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); display: grid; gap: 4px; }
.tcard:hover { border-color: var(--amber); }
.tcard.on { border-color: var(--amber); background: var(--amber-soft); }
.tcard-b { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.tcard-t { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.tcard-n { font-size: 10px; color: var(--muted); font-family: var(--mono); }

/* Key hints on teach-mode buttons. */
.teach-btn kbd { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 4px;
  border: 1px solid var(--line); font: 600 10px/16px var(--mono); color: var(--muted); }

/* The locator: where the screen on show lives on a student's own device. */
.teach-loc { display: flex; align-items: center; gap: 6px; min-width: 0; }
.teach-loc-p { font: 500 12px/1 var(--mono); color: var(--muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 30ch; }
.teach-loc kbd { flex: none; padding: 0 5px; border-radius: 4px; border: 1px solid var(--line);
  font: 600 10px/16px var(--mono); color: var(--muted); }
/* The dot rail is a position indicator, not navigation, so it yields width to
   everything else and never adds a second row: a footer that grows takes the
   height off the slide. */
.teach-dots { min-width: 0; flex-wrap: nowrap; overflow: hidden;
  justify-content: safe center; }
.tdot { min-width: 3px; }
.teach-next { max-width: 170px; }
.teach-foot { position: relative; z-index: 96; flex-wrap: wrap; }

/* Teach mode is a projector view, but the footer must still not run off a
   narrow screen. Below tablet width the two labels go and the rail keeps the
   row. */
@media (max-width: 820px) {
  .teach-next, .teach-loc, .teach-block, .teach-sub { display: none; }
  .teach-foot, .teach-bar { gap: 8px; padding: 8px 10px; flex-wrap: wrap; }
  .teach-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .teach-btn { white-space: nowrap; }
}

.teach-loc-big {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  padding: 20px 24px 24px; text-align: center;
  background: var(--surface); border-top: 2px solid var(--amber);
}
.teach-loc-big .tloc-u { display: block; word-break: break-all; letter-spacing: -.01em;
  font: 700 clamp(26px, 4.4vw, 56px)/1.1 var(--mono); color: var(--ink); }
.teach-loc-big .tloc-w { display: block; margin-top: 10px;
  font: 500 clamp(14px, 1.6vw, 20px)/1.35 var(--sans); color: var(--muted); }
@media (max-width: 1100px) { .teach-loc-p { max-width: 18ch; } }

/* A continuation screen keeps its heading for orientation, at a size that
   does not spend a whole projected line on repeating itself. */
.teach .slide[data-cont] .hd { font-size: .58em; opacity: .62; margin-bottom: .6em; }
.teach .slide[data-cont] .hd .anchor { display: none; }

/* On a screen whose point is the figure, the figure is the star: the prose
   around it steps back so the whole thing fits a 720p projector without
   scrolling. Measured, not guessed: figure screens were the single largest
   cause of overflow. */
.teach .slide[data-fig] .slide-inner { font-size: clamp(15px, 1.15vw, 18px); }
.teach .slide[data-fig] .slide-inner .hd-3 { font-size: clamp(18px, 1.6vw, 23px); margin: 0 0 10px; }
.teach .slide[data-fig] .slide-inner .hd-2 { font-size: clamp(22px, 2.4vw, 32px); margin: 0 0 12px; }
.teach .slide[data-fig] .slide-inner > p { margin: 0 0 12px; }
.teach .slide[data-fig] .anim-fig { padding: 12px 14px; }
.teach .slide[data-fig] .anim-cap { font-size: 15px; margin-bottom: 4px; }
.teach .slide[data-fig] .anim-sub { font-size: 13px; margin: 0 0 8px; }
.teach .slide[data-fig] .anim-note { font-size: 14px; padding: 10px 12px; margin-top: 10px; }
.teach .slide[data-fig] .anim-controls { gap: 7px; margin-bottom: 8px; }

/* Phone: the tab strip and wide tables both scroll sideways, and neither said
   so. A student on a phone was reading "Test yourself" cut mid-word and losing
   the right-hand column of every table without knowing it was there. */
.tabs {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
}
.tabs::-webkit-scrollbar { display: none; }

.table-wrap { position: relative; }
.table-wrap::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 26px;
  pointer-events: none; opacity: 0; transition: opacity .15s;
  background: linear-gradient(to right, transparent, var(--ground));
}
.table-wrap.can-scroll::after { opacity: 1; }
.table-wrap.can-scroll { scroll-snap-type: x proximity; }
@media (max-width: 760px) {
  .table-wrap.can-scroll { box-shadow: inset -14px 0 12px -14px rgba(0, 0, 0, .28); }
}

/* --- Spaced retrieval ------------------------------------------------------ */

.rv-modes { align-items: center; margin-top: 10px; }
.rv-n {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: var(--amber); color: #fff; font: 700 11px/1.5 var(--mono);
}
.chip.on .rv-n { background: rgba(255, 255, 255, .28); }
.rv-state { font: 500 12px/1 var(--mono); color: var(--muted); margin-left: 4px; }
.rv-done { text-align: center; padding: 30px 22px; }
.rv-done h3 { margin: 0 0 10px; font-size: 20px; color: var(--green); }
.rv-done p { margin: 0 0 8px; color: var(--ink-2); }
.rv-next { color: var(--muted) !important; font-size: 14px; }

/* Where a fact is taught. A pointer, not a penalty: it appears on a second
   miss, it is one link, and it never blocks the next card. */
.rv-where { margin: 4px 0 14px; display: flex; flex-direction: column; align-items: center;
  gap: 6px; text-align: center; }
.rv-where-s { font: 400 13px/1.5 var(--sans); color: var(--muted); }
.rv-where-l { font: 500 14px/1.45 var(--sans); color: var(--amber); text-decoration: none;
  border-bottom: 1px solid transparent; max-width: 34ch; }
.rv-where-l:hover { border-bottom-color: var(--amber); }
.q-answer .rv-where-l { display: inline; }

/* The home strip: what to do next, not a score. */
.next-up {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  padding: 15px 18px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--raised); margin: 26px 0 8px;
}
.next-up-t { font: 600 15px/1.4 var(--sans); color: var(--ink); }
.next-up-s { font: 400 13.5px/1.5 var(--sans); color: var(--muted); flex: 1 1 240px; }
.next-up .btn { margin-left: auto; }

/* A goal to reach with a figure's controls. A prompt, not a score: no timer,
   no streak, and it gets out of the way once the idea has landed. */
.anim-goal {
  display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap;
  margin: 0 0 12px; padding: 9px 12px; border-radius: 8px;
  border: 1px dashed var(--line); background: var(--raised);
}
.anim-goal-tag {
  flex: none; font: 700 10px/1.6 var(--mono); letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
  padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line);
}
.anim-goal-t { font: 400 13.5px/1.5 var(--sans); color: var(--ink-2); }
.anim-goal.got { border-style: solid; border-color: var(--green); background: transparent; }
.anim-goal.got .anim-goal-tag { color: var(--green); border-color: var(--green); }
.anim-goal.got .anim-goal-t { color: var(--ink); }

/* On a projector the goal is a question the room answers out loud, so it stays
   but takes one compact line rather than eating the figure's headroom. */
.teach .slide[data-fig] .anim-goal { margin: 0 0 8px; padding: 5px 10px; gap: 7px; }
.teach .slide[data-fig] .anim-goal-t { font-size: 12.5px; }
.teach .slide[data-fig] .anim-goal-tag { font-size: 9px; padding: 0 6px; }

/* Prepare: five classes of preparation at once is four fifths noise. */
.prep-toggle { margin-left: 8px; }
.prep-block { transition: border-color var(--dur-settle) var(--ease-resolve); }
.prep-block.open > .prep-head { border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 4px; }
@media (max-width: 620px) {
  .prep-head { flex-wrap: wrap; }
  .prep-toggle { margin-left: 0; }
}

a.chip { text-decoration: none; display: inline-block; }
.rv-tip { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.rv-tip p { margin: 0 0 12px; font-size: 14px; color: var(--ink-2); }
.rv-tip .chip-row { margin: 0; justify-content: center; }
.rv-stop { margin-top: 16px !important; font-size: 14px; color: var(--muted) !important; }


/* --- Sideways strips on a touch screen ----------------------------------- */
/*
 * Tabs, tables and code blocks scroll sideways inside themselves. Without
 * this, a horizontal swipe that reaches the end of the strip chains into the
 * page, and on iOS into the browser's back gesture, which drags the whole view
 * and repaints it mid-gesture. Containing the overscroll keeps the swipe
 * inside the thing being swiped.
 */
.tabs, .table-wrap, .anim-controls, pre, .chip-row {
  overscroll-behavior-x: contain;
}
.tabs, .table-wrap, pre { -webkit-overflow-scrolling: touch; }
/* A canvas paints itself; it never needs to be part of a neighbour's repaint. */
.anim-canvas { contain: paint; }


/* --- Spot the myth ------------------------------------------------------- */
/* The claim is the whole card: big enough that you read it as a statement
   somebody made, not as a quiz item. */
.myth-claim { font: 650 clamp(19px, 2.8vw, 26px)/1.35 var(--sans); margin: 0 0 10px; }
.myth-ask { margin: 0; font-size: 14px; color: var(--muted); }
.opt.chose { border-color: var(--amber); }
.myth-verdict { margin: 0 0 8px; }
.myth-grade { margin: 14px 0 8px; font-size: 14px; color: var(--muted); }
.myth-back { margin: 0; padding-left: 18px; font-size: 15px; }
.myth-back li { margin-bottom: 4px; }


/* --- Say it before you flip it ------------------------------------------- */
/*
 * Commit to an answer before the reveal, so what gets graded is what the
 * student could produce rather than what they recognised. Never marked, never
 * compared, never stored, and never coloured: no green, no red, no verdict on
 * what they wrote. The dashed neutral border is the same idle treatment a
 * figure's goal uses for a prompt that is not a score.
 */
.flash-sayrow { text-align: left; margin: 18px 0 0; }
.flash-say {
  width: 100%; padding: 11px 14px; border-radius: 9px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); font: 400 16px/1.3 var(--sans);
}
.flash-say::placeholder { color: var(--muted); }
.flash-say:focus { outline: 2px solid var(--amber); outline-offset: -1px; }
.flash-say-note { margin: 8px 2px 0; font: 400 12.5px/1.45 var(--sans); color: var(--muted); }
.flash-said {
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; text-align: left;
  margin: 16px 0 0; padding: 10px 14px; border-radius: 9px;
  border: 1px dashed var(--line); background: transparent;
}
.flash-said-k, .flash-a-k {
  flex: none; font: 700 10px/1.6 var(--mono); letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
}
.flash-said-t { min-width: 0; overflow-wrap: anywhere; font: 400 15px/1.45 var(--sans); color: var(--ink-2); }
.flash-a-k { display: block; text-align: left; margin: 14px 0 -8px; }



/* --- The module map ------------------------------------------------------ */
/*
 * A map, not a scoreboard. There is no total, no percentage and no bar moving
 * toward a number: an outlined tile is a figure this student has not driven
 * yet, and that is all it says.
 */
.mp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
.mp-class, .mp-figs, .mp-row, .mp-dots { min-width: 0; }
.mp-class { border-top: 1px solid var(--line); padding-top: 16px; }
.mp-h { margin: 0 0 12px; font: 650 17px/1.3 var(--sans); }
.mp-h a { color: var(--ink); text-decoration: none; }
.mp-h a:hover { color: var(--amber); }
.mp-figs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.mp-fig {
  display: block; max-width: 210px; padding: 8px 11px; border-radius: 8px;
  border: 1px dashed var(--line); background: transparent; color: var(--muted);
  font: 500 12.5px/1.35 var(--sans); text-decoration: none;
}
.mp-fig span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-fig:hover { border-style: solid; border-color: var(--amber); color: var(--ink-2); }
.mp-fig.on {
  border-style: solid; border-color: color-mix(in srgb, var(--amber) 45%, transparent);
  background: var(--amber-soft); color: var(--ink);
}
.mp-rows { display: grid; gap: 8px; }
.mp-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mp-k {
  flex: none; width: 74px; font: 700 10px/1.6 var(--mono);
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
.mp-dots { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; min-width: 120px; }
.mp-dot {
  width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid var(--line); background: transparent;
}
.mp-dot.met { background: color-mix(in srgb, var(--cyan) 45%, transparent); border-color: var(--cyan); }
.mp-dot.settled { background: var(--cyan); border-color: var(--cyan); }
.mp-go { flex: none; font: 500 12.5px/1 var(--sans); color: var(--amber); text-decoration: none; }
.mp-go:hover { text-decoration: underline; }
@media (max-width: 560px) {
  .mp-fig { max-width: 100%; flex: 1 1 100%; box-sizing: border-box; }
  .mp-k { width: 100%; }
}


/* --- Fault diagnosis, optionally against a clock ------------------------- */
.flt-clockrow { align-items: center; gap: 10px; margin-top: -6px; }
.flt-clock { font: 700 17px/1 var(--mono); letter-spacing: -.02em; color: var(--ink-2); }
.flt-clock-n { font: 400 12px/1.4 var(--sans); color: var(--muted); }

/* A tool that prints its own table has no .table-wrap around it, so on a narrow
   screen the table set the width of the page instead of scrolling inside it. */
@media (max-width: 700px) {
  .tool table { display: block; width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
}


/* --- The timetable ------------------------------------------------------- */
/*
 * Seven rows, one per Saturday. The one coming next is marked; the ones gone
 * are dimmed rather than removed, because the shape of the term is part of what
 * the page is telling you.
 */
.when { margin: 0 0 10px; font-size: 15px; color: var(--ink-2); }
.when b { color: var(--ink); }
.when-h {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  background: var(--raised); color: var(--muted); font: 600 11.5px/1.5 var(--sans);
}
.sched { margin: 34px 0 30px; }
.sched-h { margin: 0 0 8px; font: 650 20px/1.3 var(--sans); letter-spacing: -.01em; }
.sched-sub { margin: 0 0 14px; max-width: 66ch; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.sched-next {
  margin: 0 0 14px; padding: 10px 14px; border-radius: 9px;
  background: var(--amber-soft); border: 1px solid color-mix(in srgb, var(--amber) 32%, transparent);
  font-size: 14.5px; color: var(--ink);
}
.sched-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.sched-row {
  display: grid; gap: 4px 14px; align-items: baseline; padding: 11px 4px;
  grid-template-columns: 74px 92px 104px minmax(0, 1fr);
  border-bottom: 1px solid var(--line);
}
.sched-wk { font: 600 11px/1.6 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.sched-dt { font: 500 14px/1.4 var(--sans); color: var(--ink-2); }
.sched-dt b { color: var(--ink); font-weight: 650; }
.sched-day { color: var(--muted); font-size: 12.5px; }
.sched-tm { font: 500 13px/1.4 var(--mono); color: var(--muted); }
.sched-ti { min-width: 0; font-size: 15px; color: var(--ink-2); }
.sched-ti a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.sched-ti a:hover { border-bottom-color: var(--amber); color: var(--amber); }
.sched-where {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: var(--cyan-soft); color: var(--cyan); font: 600 11px/1.6 var(--sans);
}
.sched-visit .sched-wk, .sched-exam .sched-wk { color: var(--cyan); }
.sched-row.is-next { background: var(--amber-soft); border-radius: 8px; }
.sched-row.is-next .sched-wk { color: var(--amber); }
.sched-row.is-past { opacity: .5; }
.sched-row.is-past .sched-ti a { border-bottom-color: transparent; }
@media (max-width: 620px) {
  .sched-row { grid-template-columns: 74px minmax(0, 1fr); }
  .sched-tm { grid-column: 2; }
  .sched-ti { grid-column: 1 / -1; }
}
@media print { .sched-next { display: none; } .sched-row.is-past { opacity: 1; } }
.teach-when { font: 500 11.5px/1 var(--mono); color: var(--muted); white-space: nowrap; }
@media (max-width: 820px) { .teach-when { display: none; } }


/* --- Who made it, and the grouped resource nav --------------------------- */
.side-g {
  margin: 16px 0 5px; padding: 0 10px;
  font: 700 10px/1.6 var(--mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.side-g:first-of-type { margin-top: 6px; }
.nv-res { display: block; }
.nv-d {
  display: block; margin-top: 1px; font-size: 11px; line-height: 1.4;
  color: var(--muted); white-space: normal;
}
.nv-res.on .nv-d { color: var(--ink-2); }
.side-by { margin-top: 10px; font-size: 11.5px; line-height: 1.6; color: var(--muted); }
.side-by a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line); }
.side-by a:hover { color: var(--amber); border-bottom-color: var(--amber); }

/* --- The programme ------------------------------------------------------
   The four modules and the index, rendered identically on every site. It is
   navigation between siblings, not a promotional strip: the row you are on is
   marked and is not a link, because a link to where you already are is noise. */

.programme { margin: 44px 0 8px; padding-top: 26px; border-top: 1px solid var(--line); }
.programme-sub { margin: 0 0 18px; color: var(--ink-2); font-size: 15px; max-width: 66ch; }
.programme-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.programme-row {
  display: grid; grid-template-columns: 92px minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 14px; align-items: baseline; padding: 13px 12px; border-radius: 8px;
  transition: background var(--dur-settle) var(--ease-resolve);
}
/* Who the course is for matters more than what it covers, because the first
   thing a student needs to know is whether it was written for their room. */
.programme-w b { color: var(--ink-2); font-weight: 620; }
.programme-w br { line-height: 1.9; }
.programme-row:hover { background: var(--raised); }
.programme-row.on { background: var(--amber-soft); }
.programme-n {
  font: 600 10.5px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}
.programme-row.on .programme-n { color: var(--amber); }
.programme-t { font-weight: 620; font-size: 15px; color: var(--ink); text-decoration: none; }
a.programme-t:hover { color: var(--amber); text-decoration: underline; }
.programme-w { font-size: 13.5px; color: var(--ink-2); }
@media (max-width: 760px) {
  .programme-row { grid-template-columns: 1fr; gap: 4px; }
}

.byline { margin: 34px 0 8px; border-top: 1px solid var(--line); padding-top: 18px; }
.byline-p { margin: 0 0 12px; max-width: 66ch; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }
.byline-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.byline-links a {
  padding: 5px 12px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--line); background: var(--surface);
  font: 600 13px/1.5 var(--sans); color: var(--ink-2);
}
.byline-links a:hover { border-color: var(--amber); color: var(--amber); }
.byline-work { margin: 0 0 14px; padding-left: 18px; font-size: 14.5px; line-height: 1.7; }
.byline-work a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.byline-work a:hover { color: var(--amber); border-bottom-color: var(--amber); }
.byline-work span { color: var(--muted); font-size: 13.5px; }

/* The mask-mismatch verdict: a third state, because two devices on one wire can
   genuinely disagree about whether they are on the same network. */
.sb-think {
  margin-left: 8px; padding: 1px 7px; border-radius: 999px;
  font: 600 10.5px/1.6 var(--sans); white-space: nowrap;
}
.sb-think.yes { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.sb-think.no { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber); }
.sb-verdict.half { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 10%, transparent); }
.sb-verdict.half b { color: var(--amber); }

/* A line that exists only on paper, so a printed class is identifiable. */
.print-head { display: none; }

/* --- The board ------------------------------------------------------------ */
/* A surface over whatever screen is up. It sits above everything including the
   overview grid, because the point of it is that nothing else is in the way. */
.wb { position: fixed; inset: 0; z-index: 400; background: var(--ground); }
.wb-c { position: absolute; inset: 0; touch-action: none; cursor: crosshair; }
.wb-bar {
  /* left:50% caps a shrink-to-fit box at half the viewport, so the bar wrapped
     with room to spare either side. max-content sizes it to its contents and
     the max-width still catches a phone. */
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  width: max-content; max-width: calc(100vw - 24px);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 26px rgb(0 0 0 / 0.28);
}
.wb-pens, .wb-sizes { display: flex; align-items: center; gap: 6px; }
.wb-pen {
  width: 24px; height: 24px; border-radius: 50%; padding: 0; cursor: pointer;
  background: var(--p); border: 2px solid transparent; outline-offset: 2px;
}
.wb-pen.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ground) inset; }
.wb-size {
  display: grid; place-items: center; width: 30px; height: 26px; padding: 0; cursor: pointer;
  border-radius: 7px; border: 1px solid var(--line); background: var(--raised);
}
.wb-size i { display: block; width: 15px; border-radius: 6px; background: var(--ink-2); }
.wb-size.on { border-color: var(--cyan); }
.wb-size.on i { background: var(--cyan); }
.wb-b {
  padding: 0 11px; height: 30px; cursor: pointer; white-space: nowrap;
  border-radius: 8px; border: 1px solid var(--line); background: var(--raised);
  color: var(--ink-2); font: 600 12.5px/1 var(--sans);
}
.wb-b:hover { border-color: var(--cyan); color: var(--ink); }
.wb-b.on { border-color: var(--amber); color: var(--amber); }
.wb-b kbd { margin-left: 6px; }
.wb-sp { width: 1px; height: 22px; background: var(--line); }
/* Nothing behind the board should scroll while it is up. */
body.wb-on { overflow: hidden; }
@media (max-width: 720px) {
  .wb-bar { gap: 7px; padding: 7px 9px; bottom: 12px; }
  .wb-b { padding: 0 8px; font-size: 11.5px; }
  .wb-close kbd { display: none; }
}
@media print { .wb { display: none !important; } }

/* The block clock sits beside the class clock, quieter, because the question
   it answers ("am I overrunning this block") is the second question. */
.teach-bclock {
  font: 600 12px/1 var(--mono); color: var(--muted); white-space: nowrap;
  padding: 3px 7px; border-radius: 6px; background: var(--raised);
}
@media (max-width: 900px) { .teach-bclock { display: none; } }

/* The author's own line, quoted rather than paraphrased, on every site in the
   programme. It is the test every figure and every class here was built to. */
.byline-line {
  margin: 0 0 18px; padding: 14px 18px; border-left: 3px solid var(--amber);
  background: var(--amber-soft); border-radius: 0 var(--radius) var(--radius) 0;
}
.byline-line p {
  margin: 0 0 6px; font-family: var(--display);
  font-size: 17px; line-height: 1.45; color: var(--ink);
}
.byline-line cite { font-style: normal; font-size: 12.5px; color: var(--muted); }
.byline-line cite a { color: var(--amber); }