/* HabloTech — dark, quiet, precise (restyled 2026-10-06 after linear.app).
   ---------------------------------------------------------------------------
   One near-black ground, one sans (Inter, at in-between weights with tight
   tracking), grey for everything secondary, hairline rules, and panels that
   are only a shade lighter than the page. Colour is rare on purpose, so the
   two accents that remain carry meaning when they appear.

   The spreadsheet ideas survive in the details rather than the palette: the
   formula bar is still the search box, the category grid still draws cell
   rules, and a hovered cell still gets the selection ring and fill handle.

   --brand-core (#6366f1) is the channel colour mirrored in the parent
   project's shared/config.yaml and remotion/src/brand.ts; it stays in the logo
   mark. --brand is its lifted form for use on the dark ground (the value the
   old dark mode already used). --ran is semantic and means one thing only:
   this formula was executed in a real spreadsheet. Never use it for
   decoration.

   Dark only. There is no light theme: the site is designed for one ground,
   and form controls are told so via color-scheme. */

:root {
  color-scheme: dark;

  --brand-core: #6366f1;
  --brand:      #8b8dff;
  --ink-indigo: #a5a6ff;
  --ran:        #3cd199;
  --ran-soft:   rgba(60, 209, 153, .08);
  --ran-line:   rgba(60, 209, 153, .28);

  --paper:  #08090a;   /* page ground */
  --cell:   #0f1011;   /* panels */
  --sunk:   #161719;   /* inputs, inline code */
  --raised: #1c1c1f;   /* hover, chips */
  --ink:    #f7f8f8;
  --soft:   #d0d6e0;   /* secondary text that still has to read as text */
  --muted:  #8a8f98;
  --faint:  #62666d;
  --rule:   #23252a;
  --rule-hi:#34363c;
  --warn:   #e2b04a;
  --danger: #ff8a8a;
  --danger-soft: rgba(255, 138, 138, .08);
  --danger-line: rgba(255, 138, 138, .3);

  --pill-bg: #e5e5e6;
  --pill-ink:#08090a;

  --radius:    8px;
  --radius-lg: 12px;
  --wrap:      72rem;

  --sans: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --serif: var(--sans);
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--paper); }
body {
  margin: 0;
  /* A faint indigo bloom behind the hero, the way the reference lights its
     first screen. It sits on the page, not on any component. */
  background:
    radial-gradient(ellipse 70rem 28rem at 50% -8rem, rgba(113, 112, 255, .10), transparent 70%),
    var(--paper);
  color: var(--ink);
  font: 400 16px/1.6 var(--sans);
  font-feature-settings: "cv11", "ss01";
  letter-spacing: -.011em;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.5rem; }
@media (max-width: 620px) { .wrap { padding: 0 1rem; } }

a { color: var(--ink-indigo); text-decoration-color: rgba(165, 166, 255, .4); text-underline-offset: .2em; }
a:hover { color: var(--ink); text-decoration-color: currentColor; }

::selection { background: rgba(113, 112, 255, .35); color: var(--ink); }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 1rem; top: 1rem; z-index: 20;
  background: var(--raised); color: var(--ink);
  padding: .55rem .8rem; border: 1px solid var(--rule); border-radius: var(--radius);
}

/* --- header / footer ------------------------------------------------------ */

.site-header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(8, 9, 10, .78);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--rule);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 64px; flex-wrap: wrap;
}
.logo {
  display: flex; align-items: center; gap: 0;
  font: 590 1.05rem/1 var(--sans); letter-spacing: -.02em;
  text-decoration: none; color: var(--ink);
}
.logo:hover { color: var(--ink); }
.logo .mark { width: 22px; height: 22px; flex: 0 0 auto; margin-right: .6rem; }
.logo span { color: var(--ink); }
.site-header nav { display: flex; align-items: center; gap: 1.6rem; }
.site-header nav a {
  text-decoration: none; font: 400 .9rem/1 var(--sans); color: var(--muted);
  transition: color .15s;
}
.site-header nav a:hover { color: var(--ink); }
.site-header nav a[aria-current="page"] { color: var(--ink); }
/* The one call to action in the chrome: a light pill, like the reference's
   "Sign up". */
.site-header nav a.nav-cta {
  color: var(--pill-ink); background: var(--pill-bg);
  font-weight: 510; font-size: .82rem; padding: .55rem .95rem; border-radius: 999px;
}
.site-header nav a.nav-cta:hover { background: #fff; color: var(--pill-ink); }
@media (max-width: 520px) { .site-header nav { gap: 1.1rem; } }

.site-footer {
  margin-top: 6rem; padding-block: 2.5rem 3rem;
  border-top: 1px solid var(--rule);
  color: var(--muted); font-size: .85rem;
}
.site-footer p { margin: .35rem 0; max-width: 60ch; }
.site-footer a { color: var(--soft); text-decoration: none; }
.site-footer a:hover { color: var(--ink); }

main.wrap { padding-top: 5.5rem; }
@media (max-width: 620px) { main.wrap { padding-top: 2.75rem; } }

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

h1 {
  font: 510 clamp(2.3rem, 1.4rem + 3.6vw, 4rem)/1.04 var(--sans);
  letter-spacing: -.035em; margin: 0 0 1.1rem; text-wrap: balance;
}
h2 {
  font: 510 clamp(1.4rem, 1.15rem + 1vw, 1.9rem)/1.15 var(--sans);
  letter-spacing: -.025em; margin: 3.5rem 0 .9rem; text-wrap: balance;
}
h3 { font: 590 1rem/1.35 var(--sans); letter-spacing: -.012em; margin: 1.9rem 0 .4rem; }
p { margin: 0 0 1rem; max-width: 66ch; }
strong, b { font-weight: 590; }
.lede { font-size: 1.15rem; line-height: 1.55; color: var(--muted); max-width: 46ch; letter-spacing: -.014em; }
.muted { color: var(--muted); }

main li { color: var(--soft); }
main p { color: var(--soft); }
main p.muted, main .lede { color: var(--muted); }

code, kbd, pre { font-family: var(--mono); font-size: .88em; letter-spacing: 0; }
code {
  background: var(--sunk); color: var(--ink);
  padding: .12em .38em; border: 1px solid var(--rule); border-radius: 5px;
}
pre {
  background: var(--cell); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: .95rem 1.1rem; overflow-x: auto;
}
pre code { background: none; border: 0; padding: 0; }

/* --- the formula bar, which is how this site does search ------------------ */

.fx {
  display: flex; align-items: center; gap: .25rem; margin: 2.2rem 0 2.4rem; max-width: 36rem;
  padding: .3rem; background: var(--cell);
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 8px 30px rgba(0, 0, 0, .35);
  transition: border-color .15s, box-shadow .15s;
}
.fx:focus-within { border-color: var(--rule-hi); box-shadow: 0 0 0 3px rgba(113, 112, 255, .25); }
.fx .fx-tag {
  display: flex; align-items: center; align-self: stretch; padding: 0 .75rem;
  font: italic 500 .9rem/1 var(--mono); color: var(--faint);
  border-right: 1px solid var(--rule);
}
.fx input {
  flex: 1; min-width: 0; padding: .6rem .75rem;
  font: 400 .92rem/1.3 var(--mono); color: var(--ink);
  background: transparent; border: 0;
}
.fx input::placeholder { color: var(--faint); }
.fx input:focus { outline: none; }
.fx button {
  padding: .62rem 1.05rem; font: 510 .84rem/1 var(--sans); cursor: pointer;
  color: var(--pill-ink); background: var(--pill-bg); border: 0; border-radius: 999px;
  transition: background .15s;
}
.fx button:hover { background: #fff; }

/* --- cells: the grid, used as layout -------------------------------------- */

/* Each cell draws its own right and bottom rule and the container draws the
   top and left, rather than a 1px gap letting a background through. A grid
   whose last row is partly empty would otherwise show a slab of rule colour
   where the missing cells are. */
.cells {
  display: grid; padding: 0; margin: 0 0 1rem; list-style: none;
  border: 1px solid var(--rule); border-width: 1px 0 0 1px;
  border-radius: var(--radius-lg); overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  background: linear-gradient(180deg, rgba(255, 255, 255, .015), transparent 60%);
}
.cell {
  padding: 1.4rem 1.4rem 1.5rem; position: relative;
  border: 0 solid var(--rule); border-right-width: 1px; border-bottom-width: 1px;
  transition: background .15s;
}
/* The selection state, borrowed from the grid itself: a ring plus the fill
   handle in the corner. */
.cell:hover, .cell:focus-within { background: rgba(255, 255, 255, .025); box-shadow: inset 0 0 0 1px var(--brand); }
.cell:hover::after, .cell:focus-within::after {
  content: ""; position: absolute; right: 5px; bottom: 5px;
  width: 6px; height: 6px; background: var(--brand); border-radius: 1px;
}
.cell > a { text-decoration: none; font: 590 1rem/1.3 var(--sans); letter-spacing: -.015em; color: var(--ink); }
.cell > a:hover { color: var(--ink); }
.cell p { margin: .45rem 0 0; color: var(--muted); font-size: .9rem; line-height: 1.55; max-width: none; }
.cell .fn-name { font-family: var(--mono); font-weight: 500; letter-spacing: -.01em; }

.chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.chip {
  display: inline-block; text-decoration: none;
  font: 500 .72rem/1 var(--mono); padding: .38rem .55rem;
  border: 1px solid var(--rule); border-radius: 6px;
  color: var(--soft); background: var(--sunk);
  transition: color .15s, border-color .15s, background .15s;
}
.chip:hover { border-color: var(--rule-hi); color: var(--ink); background: var(--raised); }

.sechead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin: 5rem 0 1.2rem; flex-wrap: wrap;
}
.sechead h2 { margin: 0; }
.sechead a { font: 400 .88rem/1 var(--sans); color: var(--muted); text-decoration: none; }
.sechead a:hover { color: var(--ink); }

/* --- provenance: the moat, as numbers ------------------------------------- */

.prov {
  display: flex; flex-wrap: wrap; margin: 0; max-width: 36rem;
}
.prov div { padding: .2rem 1.6rem .2rem 0; flex: 0 1 auto; }
.prov div + div { border-left: 1px solid var(--rule); padding-left: 1.6rem; }
.prov b {
  display: block; font: 510 1.75rem/1.1 var(--sans); letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.prov .lit b { color: var(--ran); }
.prov span {
  font: 400 .8rem/1.4 var(--sans); color: var(--muted);
}

/* --- function detail ------------------------------------------------------ */

.crumb { font: 400 .8rem/1 var(--sans); color: var(--faint); margin: 0 0 1.3rem; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--ink); }
.crumb .sep { opacity: .6; padding: 0 .4rem; }

.fn-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 17rem;
  gap: 3rem; align-items: start; margin-top: .5rem;
}
@media (max-width: 900px) { .fn-layout { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; } }

.fn-head { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin: 0 0 .6rem; }
.fn-head h1 {
  font: 500 clamp(2rem, 1.4rem + 2vw, 2.8rem)/1 var(--mono);
  letter-spacing: -.04em; margin: 0;
}

/* The executed stamp. Only ever means "this ran in a real sheet". */
.stamp {
  display: inline-flex; align-items: center; gap: .4rem;
  font: 500 .72rem/1 var(--sans); letter-spacing: 0;
  color: var(--ran); background: var(--ran-soft);
  border: 1px solid var(--ran-line); border-radius: 999px; padding: .38rem .7rem;
}
.stamp svg { width: 11px; height: 11px; }

.syntax {
  display: block; font: 500 .92rem/1.55 var(--mono);
  background: var(--cell); border: 1px solid var(--rule);
  border-radius: var(--radius); box-shadow: inset 2px 0 0 var(--brand);
  padding: .85rem 1.05rem; margin: 0 0 1.6rem; overflow-x: auto; white-space: pre;
}

/* The capture, framed as evidence rather than dropped in as a screenshot:
   a window, like the product shot under the reference's hero. */
.evidence {
  margin: 0 0 1.8rem; background: var(--cell); overflow: hidden;
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 20px 60px rgba(0, 0, 0, .45);
}
.evidence-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding: .65rem .95rem;
  border-bottom: 1px solid var(--rule);
  font: 400 .74rem/1.4 var(--mono); color: var(--muted);
}
.evidence-top .ran { display: flex; align-items: center; gap: .45rem; color: var(--ran); font-weight: 500; }
.evidence-top .ran svg { width: 11px; height: 11px; }
.evidence img { display: block; width: 100%; height: auto; }
.evidence figcaption {
  padding: .7rem .95rem; font-size: .85rem; color: var(--muted);
  border-top: 1px solid var(--rule);
}

.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; margin: 1.1rem 0; font-size: .9rem; }
th {
  font: 500 .76rem/1 var(--sans); color: var(--muted); text-align: left;
  padding: 0 .8rem .6rem 0; border-bottom: 1px solid var(--rule);
}
td { padding: .65rem .8rem .65rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; color: var(--soft); }
td:first-child code { font-weight: 500; }
.data-table { font-variant-numeric: tabular-nums; }

.gotchas { list-style: none; padding: 0; margin: 0; display: grid;
           border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; }
.gotchas li {
  background: var(--cell); padding: .8rem 1rem; font-size: .9rem; color: var(--soft);
  display: grid; grid-template-columns: auto 1fr; gap: .7rem;
  border-bottom: 1px solid var(--rule);
}
.gotchas li:last-child { border-bottom: 0; }
.gotchas .n { font: 500 .74rem/1.65 var(--mono); color: var(--danger); font-variant-numeric: tabular-nums; }

/* sticky rail */
.rail {
  position: sticky; top: 5.5rem; display: grid;
  background: var(--cell); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); overflow: hidden;
}
@media (max-width: 900px) { .rail { position: static; } }
.rail section { padding: 1rem 1.05rem; border-bottom: 1px solid var(--rule); }
.rail section:last-child { border-bottom: 0; }
.rail h2 {
  font: 500 .74rem/1 var(--sans); letter-spacing: 0;
  color: var(--muted); margin: 0 0 .55rem;
}
.rail .val { font: 500 .92rem/1.4 var(--mono); word-break: break-word; color: var(--ink); }
.rail .val.ok { color: var(--ran); }
.rail .chips { margin: 0; }
.rail iframe { display: block; width: 100%; aspect-ratio: 16/9; height: auto; border: 0; border-radius: 6px; }
.rail-tool {
  background: linear-gradient(160deg, rgba(113, 112, 255, .16), rgba(113, 112, 255, .04) 70%);
}
.rail-tool h2 { color: var(--ink-indigo); }
.rail-tool p { color: var(--soft); font-size: .86rem; margin: 0 0 .8rem; max-width: none; }
.rail-tool .btn {
  display: block; text-align: center; text-decoration: none;
  background: var(--pill-bg); color: var(--pill-ink);
  font: 510 .82rem/1 var(--sans); padding: .62rem; border-radius: 999px;
}
.rail-tool .btn:hover { background: #fff; color: var(--pill-ink); }

.notice {
  background: var(--cell); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); box-shadow: inset 2px 0 0 var(--brand);
  padding: 1.1rem 1.25rem;
}
.notice p:last-child { margin-bottom: 0; }

/* --- tools ---------------------------------------------------------------- */

.tool-list { list-style: none; padding: 0; display: grid;
             border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; }
.tool-list li {
  padding: 1.3rem 1.4rem; border-bottom: 1px solid var(--rule);
  transition: background .15s;
}
.tool-list li:last-child { border-bottom: 0; }
.tool-list li:hover { background: rgba(255, 255, 255, .02); }
.tool-list h2 { margin: 0 0 .35rem; font-size: 1.1rem; font-weight: 590; letter-spacing: -.018em; }
.tool-list h2 a { color: var(--ink); text-decoration: none; }
.tool-list h2 a:hover { color: var(--ink-indigo); }
.tool-list p { margin: 0; color: var(--muted); font-size: .92rem; }

.qb-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 1.6rem; align-items: start; margin-top: 1.8rem;
}
@media (max-width: 860px) { .qb-layout { grid-template-columns: minmax(0, 1fr); } }

.qb fieldset {
  background: var(--cell); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); padding: 1rem 1.15rem 1.2rem; margin: 0 0 1rem;
}
.qb legend {
  font: 500 .78rem/1 var(--sans); letter-spacing: 0;
  color: var(--soft); padding: 0 .45rem;
}
.qb legend .opt { color: var(--faint); font-weight: 400; }
.qb label { display: block; font: 500 .8rem/1.4 var(--sans); color: var(--soft); margin: .85rem 0 .32rem; }
.qb label.check { display: inline-flex; align-items: center; gap: .45rem; font-weight: 400; margin: 0; }
.qb input[type="text"], .qb input[type="number"], .qb select, .qb textarea {
  font: 400 .86rem/1.35 var(--mono); padding: .5rem .65rem;
  color: var(--ink); background: var(--sunk);
  border: 1px solid var(--rule); border-radius: 6px; max-width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.qb input[type="text"]:focus, .qb input[type="number"]:focus, .qb select:focus, .qb textarea:focus {
  outline: none; border-color: var(--rule-hi); box-shadow: 0 0 0 3px rgba(113, 112, 255, .22);
}
.qb input::placeholder, .qb textarea::placeholder { color: var(--faint); }
.qb input[type="checkbox"], .qb input[type="radio"] { accent-color: var(--brand); }
.qb input[type="text"] { width: 100%; }
.qb textarea { width: 100%; line-height: 1.5; }
.qb input[type="number"] { width: 7rem; }
.qb .hint { color: var(--muted); font-size: .83rem; margin: .35rem 0 0; }
.qb .cols { display: flex; flex-wrap: wrap; gap: .45rem 1.15rem; margin: .45rem 0 0; }
.qb .row { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin: 0 0 .45rem; }
.qb .row label { margin: 0; }
.qb .row .join { min-width: 4.5rem; }
.qb .row input[type="text"] { width: auto; flex: 1 1 11rem; min-width: 7rem; }
.qb .row select { flex: 0 0 auto; }
.qb .row.cond { padding: .4rem .55rem; border-radius: 6px; }
.qb .row.cond:nth-child(even) { background: rgba(255, 255, 255, .02); }
.qb button[type="submit"] {
  font: 510 .85rem/1 var(--sans); padding: .68rem 1.25rem; cursor: pointer;
  color: var(--pill-ink); background: var(--pill-bg); border: 0; border-radius: 999px;
  transition: background .15s;
}
.qb button[type="submit"]:hover { background: #fff; }
@media (max-width: 620px) {
  .qb .row { gap: .35rem; }
  .qb .row input[type="text"] { flex: 1 1 100%; }
}

.qb-result { margin: 0; }
.qb-result .out-top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; padding: .65rem .95rem;
  background: var(--cell); border: 1px solid var(--rule); border-bottom: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  font: 400 .74rem/1.4 var(--mono); color: var(--muted);
}
.qb-result .out-top b { color: var(--ran); font-weight: 500; }
.qb-result .out-body {
  background: var(--cell); border: 1px solid var(--rule);
  box-shadow: inset 0 2px 0 var(--ran);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: 1rem 1.1rem 1.1rem;
}
.qb-result .formula {
  font: 500 .86rem/1.6 var(--mono);
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: .8rem .9rem; overflow-x: auto; color: var(--ink);
}
.qb-result .formula code { background: none; border: 0; padding: 0; white-space: pre-wrap; word-break: break-word; }
/* A script, unlike a formula, must keep its lines: a wrapped `getSheets()` /
   `[0]` reads as two statements. Scroll sideways instead. */
.qb-result .formula.script code { white-space: pre; word-break: normal; }
.qb-result .copy {
  font: 510 .8rem/1 var(--sans); margin: .8rem 0 0; padding: .5rem .9rem;
  cursor: pointer; color: var(--soft); background: var(--raised);
  border: 1px solid var(--rule); border-radius: 999px;
  transition: color .15s, border-color .15s;
}
.qb-result .copy:hover { border-color: var(--rule-hi); color: var(--ink); }
.qb-result .errors {
  border: 1px solid var(--danger-line); background: var(--danger-soft);
  padding: .8rem 1.05rem; border-radius: var(--radius); margin: 0 0 1rem;
}
.qb-result ul { padding-left: 0; list-style: none; margin: 0; }
.qb-result .note {
  display: grid; grid-template-columns: auto 1fr; gap: .6rem;
  font-size: .86rem; color: var(--muted);
  margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--rule);
}
.qb-result .note .w {
  font: 500 .72rem/1.6 var(--mono); text-transform: uppercase;
  letter-spacing: .05em; color: var(--warn);
}
.qb-result .explain li { margin: .3rem 0; font-size: .88rem; color: var(--muted); }

/* A tool beats a description, so the pairing gets the accent, not a grey box. */
.tool-pair {
  margin: 2.2rem 0; padding: 1.15rem 1.3rem;
  background: linear-gradient(160deg, rgba(113, 112, 255, .10), rgba(113, 112, 255, .02) 60%), var(--cell);
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
}
.tool-pair p { margin: 0 0 .35rem; max-width: none; }
.tool-pair p:last-child { margin-bottom: 0; }
.tool-pair strong { color: var(--ink); }
.download {
  display: inline-block; text-decoration: none;
  background: var(--pill-bg); color: var(--pill-ink);
  font: 510 .88rem/1 var(--sans); padding: .75rem 1.2rem; border-radius: 999px;
  transition: background .15s;
}
.download:hover { background: #fff; color: var(--pill-ink); }
.pair { margin: 3.2rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--rule); }
/* An embed outside the reference rail needs its own sizing: with none, the
   iframe falls back to 300x150 and the YouTube player refuses to start below
   its minimum size — it reports a configuration error rather than playing.
   Capped because a 16:9 video across the full column is bigger than the point
   it is making. */
.pair iframe {
  display: block; width: 100%; max-width: 36rem; aspect-ratio: 16/9;
  height: auto; border: 1px solid var(--rule); border-radius: var(--radius-lg); margin-top: 1.1rem;
}

/* Response-validation test tables. The verdict is the content, not decoration:
   a row rejected on one side and accepted on the other is the whole lesson, so
   the two states have to be separable at a glance and without colour alone. */
.verdict {
  font: 500 .72rem/1 var(--mono); letter-spacing: .03em; text-transform: uppercase;
  padding: .3rem .55rem; border-radius: 999px; white-space: nowrap;
}
.verdict.pass { color: var(--ran); background: var(--ran-soft); border: 1px solid var(--ran-line); }
.verdict.fail { color: var(--danger); background: var(--danger-soft); border: 1px solid var(--danger-line); }
.verdict.fail::before { content: "✕ "; }
.verdict.pass::before { content: "✓ "; }