/* Chapter 2 · F1 variables-scope, "Predict, then see" (figures/variables-scope.js; spec docs/js-series/ch2/sim-proto/
   final-spec.md). Paper frame (fx.css), course tokens (javascript.css), chapter 1's controls (engine-sim.css) copied
   under .sc-* names.
   Your code amber (a night code panel, 9 rows of room; the running line an amber band, the others dimmed; the
   declaration under test underlined with the brand wire; a "+" test line in a dashed amber outline, squiggled when let
   stops there). Two lanes side by side at every width, let on the left, var on the right: each is named by a pill on
   the top-right edge of its checkout() box (ink "let", the dashed old-way chip "var", the table's pills) and has a
   head (the one line that differs), checkout()'s box (engine purple on its tint) with the loop's box (sky) inside it,
   rows "kw name value" in the box where each variable lives, and a night console whose status line says how the run
   ended (let "stops" in the error's red, var "goes on, no warning" in amber). Box states: not open yet (a solid
   --control line, no tint), open (its colour on its tint), closed (dashed --control on paper, "· closed"). Values: a
   solid cell; the
   value the lit line just wrote outlined amber; "not ready" and "gone" a dashed cell on paper with the word (never
   colour alone, never red). State 4: a table takes the lanes' place (same grid cell, so nothing moves).
   Layouts (container queries on the figure): stacked under 860 px (the phone fits one 390 x 844 screen); 860 to 1199
   code | lanes, then the text panel across; from 1200 code | lanes | text, the lanes in the widest column and the
   controls at the foot of the text (a deliberate difference from chapter 1, whose controls sit under a full-width
   panel: here the question sits beside the picture, and the figure stays under 620 px tall).
   Fixed geometry: the code keeps 9 rows (the test lines grow from 0 while the spare row shrinks), the variable rows
   keep 2 + 1 rows, the consoles and the text panel keep the height of their fullest frame (set by the script).
   Contrast (AA, measured on the course tokens): --ink-3 on --engine-soft 5.66 light / 6.25 dark, on --host-soft 5.78 /
   5.97; --ink-2 on the tints 8+; --control (idle and closed boxes) on paper 3.44 / 3.64; box borders on paper 3:1 or
   more; on night glass: #ff8a80 8.25, #fbbf24 11.29, --code-dim 6.3, --code-ink 15+, the dimmed lines' keywords
   (#c4b5fd at .68) 5.2+. Type floors (spec 6.1): rows 11.2 px, console and labels 10.4 px. */

.sc code { font-family: var(--font-mono); font-size: inherit; background: none; border: 0; padding: 0; border-radius: 0; color: inherit; white-space: inherit; font-variant-ligatures: none; }
/* (0,1,0) after javascript.css: beats the page's `.article :where(p)` margins and list paddings. */
.sc-wrap :where(p, ol, li, table, th, td) { margin: 0; }
.sc-wrap :where(ol) { padding: 0; list-style: none; }
.sc-wrap :where(li) { font-size: inherit; line-height: inherit; }

.fx__stage.sc {
  --code-fs: 12.8px; --row: 26px; --cell-h: 20px; --row-fs: 13px; --kw-fs: 11.2px; --con-fs: 11.5px; --head-fs: 12px; --lg: 16px;
  --tag-fs: .68rem; --pill-fs: .74rem;
  overflow: clip;
}
.sc > .fx__kicker { margin-bottom: 12px; }

/* ---------- The step strip: four numbered steps, the current one filled (chapter 1's) ---------- */
.sc-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0 0 16px; }
.sc-step {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 6px 10px 6px 7px;
  border-radius: 12px; border: 1px solid var(--rule); background: color-mix(in srgb, var(--surface) 70%, transparent);
  font: 600 .86rem/1.2 var(--font-body); color: var(--ink-2); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--fx-t-micro) ease, border-color var(--fx-t-micro) ease, color var(--fx-t-micro) ease;
}
.sc-step:hover { border-color: var(--accent); color: var(--ink); }
.sc-step:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sc-step__n {
  flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--rule-strong); background: var(--surface); font: 700 .74rem/1 var(--font-mono); color: var(--ink-3);
  transition: background-color var(--fx-t-short) ease, border-color var(--fx-t-short) ease, color var(--fx-t-short) ease;
}
.sc-step__t { min-width: 0; hyphens: manual; }
.sc-step.is-done .sc-step__n { border-color: var(--engine); color: var(--engine); }
.sc-step[aria-current="step"] { border-color: color-mix(in srgb, var(--engine) 45%, transparent); background: var(--engine-soft); color: var(--ink); }
.sc-step[aria-current="step"] .sc-step__n { background: var(--engine); border-color: var(--engine); color: var(--surface); }

/* ---------- The board ---------- */
.sc-board { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }

/* ---------- Your code: night glass in both themes ---------- */
.sc-code {
  min-width: 0; overflow: hidden; border-radius: 14px;
  background: var(--code-bg); border: 1px solid var(--code-rule); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 18px 36px -26px rgba(12, 14, 30, .75);
}
.sc-code__h {
  padding: 7px 12px; border-bottom: 1px solid var(--code-rule); background: rgba(255, 255, 255, .025);
  font: 700 .66rem/1.3 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: #fbbf24;
}
.sc-code__h code { text-transform: none; letter-spacing: .02em; color: var(--code-dim); }
.sc-pre {
  --lh: 1.5em;
  margin: 0; padding: 8px 0 9px; overflow-x: auto; overflow-y: hidden; background: none; border: 0; border-radius: 0; box-shadow: none;
  font: 500 var(--code-fs)/var(--lh) var(--font-mono); color: var(--code-ink); white-space: pre; tab-size: 2; font-variant-ligatures: none;
}
.sc-pre:focus-visible { outline: 2px solid var(--code-focus); outline-offset: -2px; }
.sc-pre > code { display: block; min-width: max-content; white-space: pre; }
.sc-ln {
  position: relative; display: flex; height: var(--lh); padding: 0 10px 0 7px; border-left: 3px solid transparent; overflow: hidden;
  transition: background-color var(--fx-t-fade) ease, border-color var(--fx-t-fade) ease, height var(--fx-t-short) var(--fx-ease-io), opacity var(--fx-t-short) ease;
}
.sc-ln__n { flex: none; width: 1ch; margin-right: 1.3ch; text-align: right; color: var(--code-dim); user-select: none; -webkit-user-select: none; transition: color var(--fx-t-fade) ease; }
.sc-ln__c { flex: none; transition: opacity var(--fx-t-fade) ease; }
.sc-pre .kw { color: #c4b5fd; }
.sc-pre.has-on .sc-ln:not(.is-on) > .sc-ln__c { opacity: .68; }
.sc-ln.is-on { background: rgba(251, 191, 36, .13); border-left-color: #fbbf24; }
.sc-ln.is-on > .sc-ln__n { color: #fbbf24; }
/* The declaration under test: the course's brand-wire underline (mark.hl), drawn in when it moves. */
.sc-pre mark.sc-hl { padding: 0 0 1px; background: var(--wire) 0 100% / 0 2px no-repeat; transition: background-size var(--fx-t-short) var(--fx-ease-out); }
.sc-pre mark.sc-hl.is-on { background-size: 100% 2px; }
/* The test lines (+) and the spare row: 9 rows of room in every state. A test line grows from 0 while the spare row
   shrinks, so the lines under it slide and the panel never changes height. */
.sc-ln--t, .sc-ln--pad { height: 0; opacity: 0; }
.sc-pre[data-test=""] .sc-ln--pad, .sc-pre[data-test="a"] .sc-ln--t[data-ln="a"], .sc-pre[data-test="b"] .sc-ln--t[data-ln="b"] { height: var(--lh); opacity: 1; }
.sc-ln--t > .sc-ln__n { color: #fbbf24; font-weight: 800; }
.sc-ln--t::after { content: ""; position: absolute; inset: 1px 5px 1px 0; border: 1.5px dashed rgba(251, 191, 36, .72); border-radius: 5px; pointer-events: none; }
/* Where let stops: an editor's squiggle under the + line's code (night --no), drawn inside the row. */
.sc-sq { position: relative; }
.sc-sq::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 4px; opacity: 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='4' viewBox='0 0 6 4'%3E%3Cpath d='M0 3 Q1.5 0 3 2 T6 1' fill='none' stroke='%23ff8a80' stroke-width='1.3'/%3E%3C/svg%3E") repeat-x 0 0 / 6px 4px;
  transition: opacity var(--fx-t-fade) ease;
}
.sc-pre[data-sq] .sc-sq::after { opacity: 1; }

/* ---------- The two lanes (and, at state 4, the table in their place) ---------- */
.sc-stack { display: grid; min-width: 0; }
.sc-stack > * { grid-area: 1 / 1; min-width: 0; transition: opacity var(--fx-t-fade) ease, visibility var(--fx-t-fade) ease; }
.sc[data-sum] .sc-lanes, .sc:not([data-sum]) .sc-sum { opacity: 0; visibility: hidden; }
.sc-lanes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lg); align-items: start; }
.sc-lane { min-width: 0; display: grid; gap: 8px; align-content: start; }

/* The head: the one line that differs, in mono on paper (both versions stacked: the head never changes height). Its
   margin leaves room for the box's tag and pill, which straddle the box's top edge. */
.sc-head { display: grid; margin-bottom: calc(var(--pill-fs) * .65 + 1px) !important; font: 500 var(--head-fs)/1.35 var(--font-mono); color: var(--ink-2); white-space: pre-wrap; }
.sc-head > span { grid-area: 1 / 1; min-width: 0; transition: opacity var(--fx-t-fade) ease; }
.sc-head b { font-weight: 800; color: var(--ink); }
.sc-head__n { color: var(--ink-3); }
.sc-lanes[data-head="i"] .sc-head > [data-h="total"], .sc-lanes[data-head="total"] .sc-head > [data-h="i"] { opacity: 0; }

/* Boxes: not open yet (a solid --control line, no tint, nothing claimed), open (its colour on its tint), closed
   (dashed, "· closed"). */
.sc-box {
  position: relative; min-width: 0; padding: 14px 7px 7px; border-radius: 12px; border: 1.5px solid var(--control); background: var(--surface);
  transition: border-color var(--fx-t-fade) ease, background-color var(--fx-t-fade) ease;
}
.sc-box--blk { margin-top: 12px; }
.sc-box__tag {
  position: absolute; top: 0; left: 8px; transform: translateY(-50%); padding: 0 7px; border-radius: 999px;
  border: 1px solid var(--control); background: var(--surface); font: 700 var(--tag-fs)/1.5 var(--font-mono); color: var(--ink-3); white-space: nowrap;
  transition: border-color var(--fx-t-fade) ease, color var(--fx-t-fade) ease;
}
.sc-box__x { display: none; font: 600 var(--tag-fs)/1 var(--font-body); }
/* The lane's name on checkout()'s box: ink "let" on the left, the dashed old-way chip "var" on the right. */
.sc-box > .sc-box__kw { position: absolute; top: 0; right: 8px; z-index: 1; transform: translateY(-50%); padding: 0 8px; font-size: var(--pill-fs); line-height: 1.3; }
.sc-box > .sc-box__kw.sc-pill--old { background: var(--surface); }
.sc-box--fn[data-s="open"] { border-color: var(--engine); background: var(--engine-soft); }
.sc-box--fn[data-s="open"] > .sc-box__tag { border-color: var(--engine); color: var(--engine); }
.sc-box--blk[data-s="open"] { border-color: var(--host); background: var(--host-soft); }
.sc-box--blk[data-s="open"] > .sc-box__tag { border-color: var(--host); color: var(--host); }
.sc-box[data-s="closed"] { border-style: dashed; border-color: var(--control); background: var(--surface); }
.sc-box[data-s="closed"] > .sc-box__tag { border-style: dashed; border-color: var(--control); color: var(--ink-3); }
.sc-box[data-s="closed"] .sc-box__x { display: inline; }

/* Rows "kw name value": a fixed room (checkout()'s box 2 rows, the loop's 1), so the two loop boxes line up. */
.sc-rows { display: grid; gap: 3px; align-content: start; }
.sc-rows--fn { grid-template-rows: repeat(2, var(--row)); }
.sc-rows--blk { grid-template-rows: var(--row); }
.sc-row { display: flex; align-items: center; gap: .5em; min-width: 0; height: var(--row); transition: opacity var(--fx-t-fade) ease, visibility var(--fx-t-fade) ease; }
.sc-row[data-on="0"] { opacity: 0; visibility: hidden; }
.sc-row__kw { flex: none; width: 3ch; font: 600 var(--kw-fs)/1 var(--font-mono) !important; color: var(--ink-2); }
.sc-row__n { flex: none; width: 5ch; font: 700 var(--row-fs)/1 var(--font-mono) !important; color: var(--ink); text-decoration-thickness: 1.5px; }
.sc-cell {
  flex: 0 1 auto; min-width: 2.4em; height: var(--cell-h); display: inline-flex; align-items: center; justify-content: center; padding: 0 .45em;
  border-radius: 6px; border: 1px solid var(--control); background: var(--surface); box-shadow: 0 0 0 0 transparent;
  font: 600 var(--row-fs)/1 var(--font-mono); color: var(--ink); white-space: nowrap;
  transition: border-color var(--fx-t-fade) ease, background-color var(--fx-t-fade) ease, box-shadow var(--fx-t-fade) ease, color var(--fx-t-fade) ease;
}
.sc-row[data-k="undef"] .sc-cell { font-style: italic; font-weight: 500; color: var(--ink-3); }
.sc-row:is([data-k="nr"], [data-k="gone"]) .sc-cell { border-style: dashed; font: italic 600 var(--row-fs)/1 var(--font-body); color: var(--ink-3); }
/* gone: the name struck through (a thin line), the word in a dashed cell */
.sc-row[data-k="gone"] .sc-row__n { text-decoration-line: line-through; text-decoration-thickness: 1px; color: var(--ink-2); }
.sc-row[data-k="ask"] .sc-cell { font-weight: 800; color: var(--you); }
/* Just written by the lit line: 1.5 px amber on the amber tint (amber means one thing: your code, now). */
.sc-row.is-new .sc-cell { border-color: var(--you); box-shadow: 0 0 0 .5px var(--you); background: var(--you-soft); }
.sc-cell.is-bump { animation: sc-bump .2s var(--fx-ease-out); }
@keyframes sc-bump { 45% { transform: scale(1.06); } }

/* The console: night glass, "nothing printed yet", a ? at a question, the output, then one status line at its foot. */
.sc-con {
  min-width: 0; display: flex; flex-direction: column; padding: 6px 8px 7px; border-radius: 10px;
  background: var(--code-bg); border: 1px solid var(--code-rule); font: 500 var(--con-fs)/1.4 var(--font-mono); color: var(--code-ink);
}
.sc-con__k { margin-bottom: 3px !important; font: 700 .6rem/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--code-dim); }
.sc-con__out { display: flex; flex-direction: column; overflow-wrap: anywhere; }
.sc-con__l { white-space: pre-wrap; }
.sc-con__l--err { color: #ff8a80; }
.sc-con__none { font: italic 500 calc(var(--con-fs) * .95)/1.4 var(--font-body); color: var(--code-dim); }
.sc-con__ask { font-weight: 800; color: #fbbf24; }
.sc-con__st { margin-top: auto !important; padding-top: 3px; min-height: calc(1.35em + 4px); border-top: 1px solid transparent; font: 600 var(--con-fs)/1.35 var(--font-body); color: var(--code-ink); }
/* How the run ended, the payoff, under a hairline: let stops (the error's red), var goes on with no warning (amber, a
   warning that never came). */
.sc-con__st[data-st="stop"], .sc-con__st[data-st="goes"] { border-top-color: var(--code-rule); }
.sc-con__st[data-st="stop"] { color: #ff8a80; }
.sc-con__st[data-st="goes"] { color: #fbbf24; }
.sc-con__l.is-in, .sc-con__st.is-in { animation: fx-in var(--fx-t-fade) var(--fx-ease-out) both; }

/* State 4: the table, in the lanes' place. */
.sc-sum { align-self: start; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--rule); background: var(--surface); box-shadow: var(--shadow-sm); }
.sc-tab { width: 100%; border-collapse: collapse; font: 500 .9rem/1.42 var(--font-body); color: var(--ink); }
.sc-tab :is(th, td) { padding: 9px 8px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.sc-tab thead :is(th, td) { padding-top: 2px; border-bottom-color: var(--rule-strong); }
.sc-tab tbody th { width: 27%; font-weight: 600; color: var(--ink-2); }
.sc-tab tbody tr:last-child > * { border-bottom: 0; }
.sc-tab code { font-size: .92em; font-weight: 600; }
.sc-tab .sc-err { color: var(--no); }
.sc-tab .sc-q { color: var(--ink-3); }
.sc-pill { display: inline-block; padding: 1px 10px; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--ink); font: 700 .82rem/1.45 var(--font-mono); color: var(--bg); white-space: nowrap; }
.sc-pill--old { border-style: dashed; border-color: var(--ink-3); background: transparent; color: var(--ink-3); }

/* ---------- The text: one panel of fixed height (set by the script), chapter 1's; the answers inside it ---------- */
.sc-side { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.sc-panel {
  position: relative; flex: none; padding: 13px 16px 15px; overflow: hidden; border-radius: 16px;
  border: 1px solid var(--rule); background: var(--surface); box-shadow: var(--shadow-sm);
}
.sc .sc-panel__k { font: 700 .68rem/1.35 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--engine); }
.sc .sc-panel__k.is-v { font: 600 .92rem/1.35 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.sc .sc-panel__k.is-ok { color: var(--ok); }
.sc .sc-panel__k.is-no { color: var(--ink); }
.sc .sc-panel__k code { font-weight: 700; letter-spacing: 0; text-transform: none; }
.sc .sc-panel__t { margin-top: 5px; font: 600 1.18rem/1.3 var(--font-display); color: var(--ink); text-wrap: balance; }
.sc .sc-panel__t code { font-family: var(--font-mono); font-size: .84em; font-weight: 700; }
.sc .sc-panel__p { margin-top: 6px; max-width: 60ch; font: 400 1rem/1.55 var(--font-body); color: var(--ink-2); text-wrap: pretty; }
.sc .sc-panel__p code { font-size: .9em; font-weight: 600; color: var(--ink); }
.sc-ans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 34rem; margin-top: 12px; }
.sc-ans[hidden] { display: none; }
.sc-a { min-height: 46px; padding: 8px 6px; font-size: .92rem; white-space: nowrap; }
.sc-a code { font: 700 .92rem/1 var(--font-mono) !important; }
.sc-timer { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; opacity: 0; transition: opacity var(--fx-t-short) ease; }
.sc-timer i { display: block; height: 100%; background: var(--engine); transform-origin: 0 50%; transform: scaleX(0); }
.is-timing .sc-timer { opacity: .75; }
.fx--still .sc-timer { visibility: hidden; }

/* ---------- Controls (chapter 1's): Restart (icon), Previous, Play (an ink pill; neutral while a question waits), Next ---------- */
.sc-ctl { display: flex; align-items: center; gap: 8px; }
.sc-play { min-width: 7.4em; background: var(--ink); border-color: var(--ink); color: var(--bg); }
.sc-play:hover { border-color: var(--accent); }
.sc[data-ask] .sc-play { background: var(--surface); border-color: var(--control); color: var(--ink); }
.sc-play__i { display: inline-flex; }
.sc-play__i svg { width: 16px; height: 16px; }
.sc-b__t, .sc-play__t { white-space: nowrap; }
.sc-ns, .sc-b.is-short .sc-nl { display: none; }
.sc-b.is-short .sc-ns { display: inline; }
.sc-b--solo { padding-inline: 13px; }
.sc-b--solo .sc-b__t {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.sc-b[aria-disabled="true"] { opacity: .4; cursor: default; }
.sc-b[aria-disabled="true"]:hover { border-color: var(--control); }
.sc-b[aria-disabled="true"]:active { transform: none; }

/* At a reveal the verdict, the title and the text arrive together (150 ms), never a blank panel. */
.sc-panel.is-fresh > :is(.sc-panel__k, .sc-panel__t, .sc-panel__p) { animation: sc-fade .15s ease both; }
@keyframes sc-fade { from { opacity: 0; } }

.sc--snap *, .sc--snap *::before, .sc--snap *::after { transition: none !important; }

/* ---------- Widths ---------- */
/* A phone (350 px at 390): the strip shows its numbers, the code has no header, tighter type and gaps; the whole
   figure fits one 390 x 844 screen under the site header. The code size keeps line 3 (43 characters) on one line down
   to a 320 px figure (10.4 px at least; under that the code scrolls sideways). */
@container fx (max-width: 559px) {
  .fx__stage.sc {
    padding: 12px;
    --code-fs: clamp(10.4px, calc((100cqi - 41px) / 27), 11.2px); --row: 20px; --cell-h: 16px; --row-fs: 12px; --kw-fs: 10.4px;
    --con-fs: 10.4px; --head-fs: 10.4px; --lg: 12px; --tag-fs: .65rem; --pill-fs: .68rem;
  }
  .sc > .fx__kicker { display: none; }   /* the section's heading sits right above (spec 6.1, lever 2) */
  .sc-steps { margin-bottom: 9px; gap: 5px; }
  .sc-step { justify-content: center; padding: 6px; }
  .sc-step__t, .sc-b--icon .sc-b__t {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .sc-board { gap: 8px; }
  .sc-code { border-radius: 12px; }
  .sc-code__h { display: none; }
  .sc-pre { --lh: 1.42em; padding: 5px 0 6px; }
  .sc-ln { padding: 0 5px 0 4px; }
  .sc-ln__n { margin-right: 1ch; }
  .sc-ln--t::after { right: 3px; }
  .sc-lane { gap: 5px; }
  .sc-box { padding: 11px 5px 4px; border-radius: 10px; }
  .sc-box--blk { margin-top: 10px; }
  .sc-box__tag { left: 6px; padding: 0 5px; }
  .sc-box > .sc-box__kw { right: 6px; padding: 0 6px; }
  .sc-rows { gap: 2px; }
  .sc-row { gap: .4em; }
  .sc-con { padding: 4px 6px 5px; border-radius: 8px; }
  .sc-con__k { display: none; }   /* decorative: the night glass already says console */
  .sc-sum { padding: 6px 8px; border-radius: 12px; }
  .sc-tab { font-size: .76rem; line-height: 1.36; }
  .sc-tab :is(th, td) { padding: 6px 4px; }
  .sc-tab tbody th { width: 25%; }
  .sc-pill { padding: 0 7px; font-size: .74rem; }
  .sc-side { gap: 9px; }
  .sc-panel { padding: 8px 12px 10px; border-radius: 14px; }
  .sc .sc-panel__k.is-v { font-size: .86rem; }
  .sc .sc-panel__t { margin-top: 3px; font-size: 1.04rem; }
  .sc .sc-panel__p { margin-top: 3px; font-size: .9rem; line-height: 1.48; }
  .sc-ans { gap: 6px; margin-top: 8px; }
  .sc-a { padding-inline: 4px; }
  .sc-a code { font-size: .84rem !important; }
  .sc-ctl { gap: 6px; }
  .sc-ctl .sc-play, .sc-ctl .sc-b--next { flex: 1 1 0; min-width: 0; }
  .sc-b--icon { padding-inline: 13px; }
  .sc-ctl .sc-play, .sc-ctl .sc-b--next { padding-inline: 10px; gap: 6px; }
}
/* A 360 px phone and smaller: the text a little smaller, the controls tighter; the rows at their floor (11.2 px), so
   "var total undefined" fits its box. */
@container fx (max-width: 340px) {
  .fx__stage.sc { --row-fs: 11.2px; padding: 10px 10px 11px; }
  .sc-steps { margin-bottom: 7px; }
  .sc-board, .sc-side { gap: 7px; }
  .sc-pre { --lh: 1.38em; padding: 4px 0 5px; }
  .sc-lane { gap: 4px; }
  .sc-box { padding-top: 10px; padding-bottom: 3px; }
  .sc-box--blk { margin-top: 9px; }
  .sc-con { padding: 3px 6px 4px; }
  .sc-panel { padding: 7px 11px 8px; }
  .sc .sc-panel__p { line-height: 1.42; }
  .sc-ans { margin-top: 7px; }
  .sc-row { gap: .35em; }
  .sc-cell { padding-inline: .35em; }
  .sc-box { padding-inline: 4px; }
  .sc .sc-panel__t { font-size: .98rem; }
  .sc-ctl .sc-play, .sc-ctl .sc-b--next { padding-inline: 8px; }
  .sc-b--next svg { display: none; }   /* "Show me" keeps one line */
  .sc-tab { font-size: .72rem; }
}
@container fx (max-width: 299px) {
  .fx__stage.sc { padding: 10px; --row-fs: 10.4px; --kw-fs: 9.6px; --lg: 8px; }
  .sc-box__tag { left: 4px; padding: 0 4px; }
  .sc-box > .sc-box__kw { right: 4px; padding: 0 4px; }
  .sc-row { gap: .3em; }
  .sc-row[data-k="undef"] .sc-cell { letter-spacing: -.03em; }
  .sc-a code { font-size: .76rem !important; }
  .sc-a { font-size: .84rem; }
  .sc-board, .sc-side { gap: 6px; }
  .sc .sc-panel__t { font-size: .95rem; }
  .sc .sc-panel__p { line-height: 1.42; }
  /* a 320 px phone: Play as an icon too (its name is a tooltip), Next keeps its words ("Show me" at a question) */
  .sc-play__t {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .sc-ctl .sc-play { flex: none; padding-inline: 13px; }
}

/* Laptop (900 px at 1440): the code on the left, the lanes on the right; the text panel across both (the title on the
   left, the text and the answers on the right); then the controls. */
@container fx (min-width: 860px) {
  .fx__stage.sc { --row: 27px; --cell-h: 21px; --row-fs: 13.6px; --kw-fs: 11.6px; --con-fs: 12px; --head-fs: 12.5px; --lg: 16px; }
  .sc-board { grid-template-columns: max-content minmax(0, 1fr); gap: 16px 24px; }
  .sc-code { grid-column: 1; grid-row: 1; }
  .sc-stack { grid-column: 2; grid-row: 1; }
  .sc-side { grid-column: 1 / -1; grid-row: 2; }
  .sc-panel { display: grid; grid-template-columns: minmax(12rem, 19rem) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 28px; align-content: start; }
  .sc .sc-panel__k, .sc .sc-panel__t { grid-column: 1; }
  .sc .sc-panel__p { grid-column: 2; grid-row: 1 / 3; margin-top: 0; align-self: start; }
  .sc-ans { grid-column: 2; grid-row: 3; }
  .sc-steps { margin-bottom: 14px; }
}
/* Large (1312 px at 1920, the presentation slide): three columns at eye level, code | lanes | text; the question beside
   the picture it asks about, the controls at the foot of the text. From 1200 px (the presentation slide is 1216); the
   lanes' type follows the width (14.5 px rows at 1312), so "var total undefined" always fits its box. */
@container fx (min-width: 1200px) {
  .fx__stage.sc {
    --code-fs: clamp(13.4px, 1.1cqi, 14px); --row: 32px; --cell-h: 25px; --row-fs: clamp(14px, 1.2cqi, 16px); --kw-fs: clamp(11.5px, .98cqi, 13px);
    --con-fs: clamp(12.5px, 1.04cqi, 13.6px); --head-fs: clamp(12.5px, 1.04cqi, 13.6px); --lg: 18px; --tag-fs: .78rem; --pill-fs: .84rem;
  }
  .sc-board { grid-template-columns: max-content minmax(0, 1fr) clamp(300px, 26cqi, 350px); gap: 16px 24px; }
  .sc-side { grid-column: 3; grid-row: 1; align-self: stretch; }
  .sc-panel { display: block; }
  .sc .sc-panel__t { font-size: 1.24rem; }
  .sc .sc-panel__p { margin-top: 8px; font-size: 1.05rem; }
  /* the text column is narrow: Restart and Previous as icons, Play and Next share the rest (as on a phone) */
  .sc-ctl { margin-top: auto; }
  .sc-ctl .sc-play, .sc-ctl .sc-b--next { flex: 1 1 0; min-width: 0; }
  .sc-b--icon .sc-b__t {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .sc-b--icon { padding-inline: 13px; }
  .sc-code__h { padding-block: 9px; font-size: .7rem; }
  .sc-pre { --lh: 1.6em; padding: 11px 0 12px; }
  .sc-box { padding: 16px 7px 9px; }
  .sc-row { gap: .4em; }
  .sc-cell { padding-inline: .38em; }
  .sc-box--blk { margin-top: 14px; }
  .sc-con { padding: 8px 10px 9px; }
  .sc-con__k { font-size: .64rem; }
  .sc-tab { font-size: .95rem; }
  .sc-tab { table-layout: fixed; }   /* the two answer columns share the room equally: two lines a cell */
  .sc-tab thead td { width: 21%; }
}

/* Presentation: the figure takes the slide (1216 px, scaled down on a projector). The lanes, read from the back of the
   room, get larger type and a wider column (the text column gives 16 px, its text a size smaller, so the slide keeps
   its height and its scale); "var total undefined" still fits its box. */
[data-teaching="true"] [data-fx="variables-scope"] .fx__stage { padding: 14px 22px 16px; }
[data-teaching="true"] .sc-con__k { font-size: .7rem; }
@container fx (min-width: 1200px) {
  [data-teaching="true"] .fx__stage.sc {
    --row-fs: 16px; --kw-fs: 13px; --con-fs: 14px; --head-fs: 14px; --tag-fs: .85rem; --pill-fs: .9rem; --row: 34px; --cell-h: 27px; --lg: 14px;
  }
  [data-teaching="true"] .sc-board { grid-template-columns: max-content minmax(0, 1fr) 300px; }
  [data-teaching="true"] .sc-box { padding-inline: 6px; }
  [data-teaching="true"] .sc .sc-panel__t { font-size: 1.18rem; }
  [data-teaching="true"] .sc .sc-panel__p { font-size: 1rem; }
}

@media print {
  .sc-ctl, .sc-timer, .sc-ans { display: none; }
  .sc-panel, .sc-sum { box-shadow: none; }
  .sc-code, .sc-con { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* the page prints its code on paper (javascript.css): the code's colours follow */
  .sc-code { background: #f4f2ed; border-color: #ccc; box-shadow: none; }
  .sc-code__h { color: #9a5b00; }
  .sc-pre, .sc-ln { color: #16161f; }
  .sc-pre .kw { color: #6b21a8; }
  .sc-ln__n { color: #5c5c6a; }
}
@media (forced-colors: active) {
  .sc-step[aria-current="step"] .sc-step__n { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  /* <mark> text is forced to MarkText while its Mark background is cleared: keep the let under test in CanvasText */
  .sc-pre mark.sc-hl { forced-color-adjust: none; color: CanvasText; background: none; }
  .sc-pre mark.sc-hl.is-on { text-decoration: underline 2px; text-underline-offset: 3px; }
  .sc-box[data-s="open"] { forced-color-adjust: none; border-color: Highlight; background: Canvas; }
  .sc-box[data-s="open"] > * { forced-color-adjust: auto; }
  .sc-ln { forced-color-adjust: none; border-left-color: transparent; }
  .sc-ln.is-on { border-left-color: Highlight; background: Canvas; color: CanvasText; }
  .sc-ln > * { forced-color-adjust: auto; }
  .sc-ln--t::after { border-color: CanvasText; }
  .sc-row.is-new .sc-cell { outline: 2px solid Highlight; }
}