/* Matrix 40's pages. The test: a printed test booklet. Wide cover (name beside an example
   grid), then a narrow column for the door, the test itself, the result and About the test.
   The stats pages (Stats, a page per puzzle): sections that each ask a question, charts in
   cards. One more colour, the live colour, is used rarely: only for what's up to date.
   Colours: "Duo black" (company repo, docs/decisions.md, 2026-10-27). Cream on near-black,
   greys between, no other colour; the puzzles in the same two colours on cream paper.
   Always dark. Square throughout. The puzzles' drawing classes are in draw.css. */
@font-face { font-family: "Archivo"; font-weight: 400 900; font-stretch: 62% 125%; font-display: swap; src: url(/fonts/archivo.woff2) format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 400 600; font-display: swap; src: url(/fonts/source-serif-4.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url(/fonts/ibm-plex-mono-400.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url(/fonts/ibm-plex-mono-500.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-display: swap; src: url(/fonts/ibm-plex-mono-600.woff2) format("woff2"); }
/* Numbers are never in IBM Plex Mono, whose zeros have a dot and whose % is cut in two: in --mono, digits,
   % and what stands between digits come from Archivo, with equal-width digits, so the tables still line up */
@font-face { font-family: "Plain numbers"; font-weight: 400 900; font-stretch: 62% 125%; font-display: swap; src: url(/fonts/archivo.woff2) format("woff2"); unicode-range: U+25, U+2C, U+2E, U+2F, U+30-3A, U+2013; }
:root {
  --ground: #131417; --panel: #1b1d21; --ink: #ecdec2; --body: #ddd0b4; --mute: #9a9281; --rule: #2e3036; --edge: #d6c9ad; --on-ink: #131417;
  --paper: #e6d9be; --paper-line: #c2b59a; --p-ink: #131417; --p-grey: #8f8979; --p-white: #f1e5cc; --p-faint: #b8ac90;
  --mid: #857f70; --dim: #3e3a30; --dim-line: #5f5b50; --wash: rgba(236, 222, 194, .13); --wash-lit: rgba(236, 222, 194, .34); --wash-dim: rgba(236, 222, 194, .07);
  --s0: #26282d; --s1: #4a463c; --s2: #6f6a60; --s3: #a59b86; --s4: #ecdec2;   /* the calendar's five steps, ground to cream */
  --live: #4cc27f; --pick: #f2b441;   /* live: only for what's live. pick: only for the piece you choose */
  --display: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --read: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono: "Plain numbers", "IBM Plex Mono", ui-monospace, Consolas, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; background: var(--ground); scrollbar-gutter: stable; }   /* no blue box on a tap (Android); no sideways shift on a PC between short and long pages */
/* Changing page: no view transition, not even without animation. The browser keeps the old page until the new
   one first shows, fully drawn, so nothing flashes; around a transition Chrome throws clicks away for up to half
   a second before the page sees them (measured 2026-11-01). */
body { margin: 0; background: var(--ground); color: var(--body); font: 17px/1.55 var(--read); }
h1, h2, h3, b, .promise, .big, .ask { color: var(--ink); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--ground); }
main { min-height: 100vh; }   /* the footer stays out of sight while a page's content is still coming */
.gut { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.wide { max-width: 1000px; margin: 0 auto; }
.narrow { max-width: 580px; margin: 0 auto; }
p { margin: 0; }
h1, h2, h3 { font-family: var(--display); margin: 0; text-wrap: balance; }
h2 { font-size: 24px; font-weight: 800; font-stretch: 112%; line-height: 1.15; }
h3 { font-size: 17px; font-weight: 700; font-stretch: 100%; }
.label { font: 500 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.kicker { color: var(--ink); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--mute); }
.small { font-size: 15px; }
a { color: inherit; -webkit-user-drag: none; }   /* a mouse still moving 2 pixels while pressing would drag the link, and the click is lost */

/* Buttons */
.btn {
  appearance: none; border: 2px solid var(--ink); background: var(--ink); color: var(--on-ink); cursor: pointer;
  font: 700 16px/1 var(--display); font-stretch: 110%; letter-spacing: .01em; padding: 14px 22px; border-radius: 0;
}
.btn.line { background: transparent; color: var(--ink); border-color: var(--edge); }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.textlink { appearance: none; border: 0; background: none; padding: 4px 0; cursor: pointer; color: var(--ink);
  font: 600 15px/1.3 var(--display); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.btn:focus-visible, .textlink:focus-visible, .opt:focus-visible, .sq:focus-visible, .chip:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.btn, .textlink, .opt, .sq, .chip { touch-action: manipulation; }   /* two quick taps don't zoom the page */
.textlink.inline { font-size: inherit; padding: 0; }
.row { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }

/* Puzzle paper */
.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: min(100%, 380px); margin: 0 auto; }
.cell { aspect-ratio: 1; max-width: 100%; background: var(--paper); border: 1px solid var(--paper-line); overflow: hidden; }
.cell.missing { background: transparent; border: 2px dashed var(--ink); display: grid; place-items: center;
  font: 800 clamp(28px, 8vw, 42px)/1 var(--display); color: var(--ink); }

/* Cover: the name, the question, the button, the band and who made it, beside the example.
   The two 40s in the band sit together, and the 0 stands apart. On a phone the example
   follows the text, with the button again under it. */
.cover { display: grid; gap: 32px; padding-block: 36px 40px; align-items: start; }
@media (min-width: 780px) { .cover { grid-template-columns: 1.15fr 1fr; gap: 48px; padding-block: 64px 56px; } }
.name { font: 900 clamp(64px, 15vw, 132px)/.86 var(--display); font-stretch: 125%; letter-spacing: -.02em; }
.name span { display: block; }
.promise { font: 700 clamp(20px, 3.2vw, 26px)/1.25 var(--display); font-stretch: 100%; margin-top: 22px; }
.lede { margin-top: 14px; max-width: 34em; }
.cover .row { margin-top: 26px; }
.example { margin: 0; display: grid; gap: 12px; }
.tab { font-variant-numeric: tabular-nums; }
.facts { border-block: 2px solid var(--edge); }
.facts b { display: block; font: 900 30px/1.05 var(--display); font-stretch: 115%; }
.facts span { display: block; font: 500 12px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.facts-in { display: grid; grid-template-columns: auto auto minmax(88px, 1fr); gap: 10px clamp(20px, 4vw, 32px); list-style: none; margin: 28px 0 0; padding: 14px 0; }
.facts-in li:last-child { margin-left: clamp(12px, 3vw, 32px); }
.byline { margin-top: 16px; max-width: 34em; font-size: 15px; line-height: 1.45; color: var(--mute); }
.again { display: none; }
@media (max-width: 779px) {
  .kicker { margin-bottom: 10px; }
  .byline { margin-top: 14px; }
  .again { display: block; }
}

/* The door */
.before { padding-block: 36px 56px; display: grid; gap: 14px; }
.before ol { margin: 0; padding-left: 1.3em; display: grid; gap: 8px; max-width: 36em; }

/* Test */
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--ground); border-bottom: 2px solid var(--edge); }
.bar .narrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 10px; }
.bar b { font: 800 16px/1.2 var(--display); font-stretch: 110%; }
.timer { font: 600 20px/1 var(--mono); font-variant-numeric: tabular-nums; padding: 6px 10px; border: 2px solid var(--edge); }
.timer.low { background: var(--ink); color: var(--on-ink); }
.test { --room: 190px; padding-block: 18px 48px; display: grid; gap: 16px; }
.first { display: grid; gap: 12px; align-content: start; }
.play { display: grid; gap: 16px; align-content: start; }
/* On a phone the numbers start just below the first screen. At the top of the page the browser always
   shows its address bar, so 100svh is enough (76px: the bar and the space above the puzzle) */
@media (max-width: 779px) { .first { min-height: calc(100svh - 76px); } }
.ask { text-align: center; font: 700 17px/1.3 var(--display); }
.test .ask { color: var(--mute); }   /* grey in the test, cream on the start page (Dagh, 2026-11-03) */
.opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: min(100%, 470px); margin: 0 auto; }
.opt { appearance: none; border: 2px solid transparent; background: transparent; padding: 3px; cursor: pointer; color: var(--ink); min-width: 0; }
.opt .tile { display: block; aspect-ratio: 1; background: var(--paper); border: 1px solid var(--paper-line); overflow: hidden; }
.opt .lt { display: block; text-align: center; font: 600 14px/1.6 var(--mono); }
.test .opt:not([aria-pressed="true"]) .lt { color: var(--mute); }   /* grey letters, as the question (Dagh, 2026-11-03) */
.test[data-ask="hide"] .ask { display: none; }   /* on trial (Dagh, 2026-11-03) */
.opt[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
/* A picked piece gets its frame, then the next puzzle's drawings appear in the same tiles (app.js, showPuzzle) */
/* The puzzle and all eight pieces fit on the first screen, even with the browser's address bar
   showing (100svh: the screen's height with the browser's bars shown). The rest of the screen
   (the bar, the question, the letters, the gaps) takes about --room; the board and the pieces
   take 1.5 times their width. Browsers without svh keep the sizes above. */
.test .board { width: min(100%, 380px, max(220px, calc((100svh - var(--room)) / 1.5))); }
.test .opts, .test .nav, .test .askrow { width: min(100%, 470px, max(220px, calc((100svh - var(--room)) / 1.5))); margin-inline: auto; }
/* Previous and Next (app.js, feel.nav). Close: buttons under the pieces, in sight on the first screen,
   with a somewhat smaller puzzle. Line, top and bottom take no extra height. */
.test[data-nav="close"] { --room: 226px; padding-top: 12px; }
.test[data-nav="close"] .play, .test[data-nav="close"] .answer { gap: 10px; }
.test .nav .btn { flex: 1; max-width: none; padding-block: 12px; }
.pgr { appearance: none; flex: none; width: 40px; height: 36px; padding: 0; display: grid; place-items: center; border: 2px solid var(--edge); background: transparent; color: var(--ink); cursor: pointer; touch-action: manipulation; }
.pgr svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: square; }
.pgr:disabled { opacity: .35; cursor: not-allowed; }
.pgr:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.test[data-nav="line"] .play, .test[data-nav="line"] .answer { gap: 4px; }
.test .askrow { width: min(100%, 470px); display: flex; align-items: center; justify-content: space-between; }
.askrow .ask { font-size: clamp(14px, 4.3vw, 16px); white-space: nowrap; }
.askrow .pgr { border: 0; width: 36px; height: 44px; }
.arrows { display: flex; gap: 6px; margin-left: auto; }
.bar.down { position: fixed; top: auto; bottom: 0; left: 0; right: 0; border-bottom: 0; border-top: 2px solid var(--edge); padding-bottom: env(safe-area-inset-bottom, 0px); }
.mid { flex: 1; display: flex; align-items: center; justify-content: center; gap: 14px; }
.bar.down b { font-size: 15px; white-space: nowrap; }
.test[data-nav="bottom"] { padding-block: calc(18px + env(safe-area-inset-top, 0px)) 90px; }
/* The first screen fills to the bar, with the pieces right above it */
@media (max-width: 779px) {
  .test[data-nav="bottom"] .first { min-height: calc(100svh - 76px - env(safe-area-inset-top, 0px)); grid-template-rows: 1fr; }
  .test[data-nav="bottom"] .play { align-content: space-between; }
}
/* On a wide screen, the grid beside the pieces, two across and four down, with the numbers in two rows
   below: all on one screen, and no wider than that (app.js, feel.pc). --b: the grid's side. 262px: what
   else takes up the screen's height. --op: a piece's width, so that four pieces are as tall as the grid. */
@media (min-width: 1000px) and (min-height: 620px) {
  :root { --b: min(540px, calc(100svh - 262px)); --op: calc((var(--b) - 24px) / 4 - 23px); --pieces: calc(2 * var(--op) + 8px); }
  .side .narrow, .narrow.side { max-width: calc(var(--b) + 24px + var(--pieces)); }
  .test.side[data-nav] { position: relative; padding-top: 14px; grid-template-columns: var(--b) var(--pieces); gap: 12px 24px; justify-content: center; align-items: start; }
  .test.side .first, .test.side .play, .test.side .answer { display: contents; }
  .test.side .ask, .test.side .askrow { grid-area: 1 / 1 / 2 / 3; }
  .test.side .askrow .ask { grid-area: auto; }
  .test.side .board { grid-area: 2 / 1; width: var(--b); margin: 0; }
  .test.side .opts { grid-area: 2 / 2; width: var(--pieces); margin: 0; grid-template-columns: repeat(2, var(--op)); }
  .test.side .nav { grid-area: 3 / 1 / 4 / 3; width: 100%; justify-content: center; }
  .test.side .nav .btn { flex: 0 1 200px; }
  .test.side .map, .test.side .kbd, .test.side [data-finish], .test.side .trial { grid-column: 1 / 3; }
  .test.side .map { width: 100%; grid-template-columns: repeat(20, minmax(0, 1fr)); }
  .test.side .ask-swap { grid-area: 2 / 2 / 3 / 3; }
}
/* How a pick shows (app.js, feel.mark) */
.opts[data-mark="ring"] .opt[aria-pressed="true"] { background: transparent; color: var(--ink); border-color: var(--pick); }
.test[data-colour="cream"] { --pick: var(--ink); }
.test[data-colour="purple"] { --pick: #b794f6; }
.test[data-colour="blue"] { --pick: #6cb2ff; }
.test[data-colour="green"] { --pick: var(--live); }
.opts[data-mark="invert"] .opt[aria-pressed="true"] .tile { filter: invert(1) hue-rotate(180deg); }
.opt.press { animation: press .12s ease-out; }
@keyframes press { 40% { transform: scale(.95); } }
.opt.pulse { animation: pulse .3s ease-out; }
@keyframes pulse { 40% { transform: scale(1.1); } }
.opts.dim .opt:not([aria-pressed="true"]) { opacity: .4; }
@media (prefers-reduced-motion: reduce) { .opt.press, .opt.pulse { animation: none; } }
/* A piece under the mouse (app.js, feel.hover): the outline, and a tint inside it, the drawing's black kept.
   Not on touch screens, and not until the mouse moves on a new puzzle. */
.opt .tile { position: relative; }
@media (hover: hover) {
  .opts[data-hover="tint"]:not(.still) .opt:hover, .opts[data-hover="line"]:not(.still) .opt:hover { border-color: var(--pick); }
  .opts[data-hover="tint"]:not(.still) .opt:hover { background: color-mix(in srgb, var(--pick) 18%, transparent); color: var(--ink); }
  .opts[data-hover="tint"]:not(.still) .opt:hover .tile::after { content: ""; position: absolute; inset: 0; background: var(--pick); opacity: .35; mix-blend-mode: multiply; }
}
/* Where "Finish now?" shows, over a page that doesn't move (app.js, feel.finish) */
.answer { position: relative; display: grid; gap: 16px; }
.over { animation: over-in .15s ease-out; }
@keyframes over-in { from { opacity: 0; } }
dialog.ask-popup[open] { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0; padding: 16px;
  background: rgb(19 20 23 / .75); color: inherit; display: grid; place-items: center; }
dialog.ask-popup::backdrop { background: transparent; }
.ask-popup .confirm { width: min(100%, 440px); background: var(--panel); }
.over.ask-bar { position: fixed; z-index: 5; left: 0; right: 0; bottom: 0; background: var(--panel); border-top: 2px solid var(--edge); padding: 16px 16px max(16px, env(safe-area-inset-bottom)); animation: bar-in .2s ease-out; }
@keyframes bar-in { from { transform: translateY(100%); } }
.ask-bar .confirm { border: 0; padding: 0; width: min(100%, 560px); margin: 0 auto; }
.ask-swap { position: absolute; top: 0; left: 0; right: 0; min-height: 100%; background: var(--ground); display: grid; align-content: center; }
@media (prefers-reduced-motion: reduce) { .over, .over.ask-bar { animation: none; } }
.trial { display: grid; gap: 8px; }
.trial .chips { justify-content: center; }
.trial .chip { padding: 8px 12px; text-transform: capitalize; }.nav { display: flex; justify-content: space-between; gap: 10px; }
.nav .btn { flex: 1; max-width: 220px; }
.map { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; width: min(100%, 380px); margin: 0 auto; }
.sq { appearance: none; aspect-ratio: 1; min-width: 0; padding: 0; cursor: pointer; border: 1.5px solid var(--rule); background: transparent;
  color: var(--mute); font: 500 11px/1 var(--mono); }
.sq.done { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.sq.cur { outline: 2px solid var(--ink); outline-offset: 2px; }
.finish { text-align: center; }
.confirm { border: 2px solid var(--edge); padding: 16px; display: grid; gap: 12px; text-align: left; }
.kbd { text-align: center; font: 13px/1.4 var(--mono); color: var(--mute); }
@media (hover: none) { .kbd { display: none; } }

/* Result */
.page { padding-block: 32px 56px; display: grid; gap: 28px; }
.big { font: 900 clamp(72px, 20vw, 120px)/.9 var(--display); font-stretch: 125%; letter-spacing: -.02em; }
.big small { font-size: .38em; font-stretch: 100%; letter-spacing: 0; color: var(--mute); }
/* The two numbers side by side, on a phone too */
.hero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: 2px solid var(--edge); padding-block: 16px; }
.hero > div { display: grid; gap: 8px; align-content: start; }
.hero > div + div { border-left: 1px solid var(--rule); padding-left: 14px; }
.hero > div:first-child { padding-right: 14px; }
.hero .big { font-size: clamp(46px, 14vw, 84px); }
.hero p:not(.big) { font-size: 15.5px; line-height: 1.35; }
.hero b { font: 800 1.1em/1 var(--display); }
.hero a { color: var(--ink); text-underline-offset: 3px; }
.links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.note { font-size: 15px; color: var(--mute); border-left: 3px solid var(--edge); padding-left: 12px; }
.bands { display: grid; gap: 10px; }
.band { display: grid; grid-template-columns: 5.6em minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 15px; }
.band .boxes { display: grid; grid-template-columns: repeat(12, minmax(0, 14px)); gap: 3px; }   /* the most in one difficulty, on one line even at 360 px */
.band .boxes i { aspect-ratio: 1; border: 1.5px solid var(--edge); cursor: pointer; }
.band .boxes i.ok { background: var(--ink); border-color: var(--ink); }
.band .boxes i.lit { outline: 2px solid var(--ink); outline-offset: 1px; }
.band .n { width: 5ch; text-align: right; font: 500 14px/1 var(--mono); font-variant-numeric: tabular-nums; }
.grid40 { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; width: min(100%, 420px); }
.grid40 > * { aspect-ratio: 1; display: grid; place-content: center; font: 500 11px/1 var(--mono); border: 1.5px solid var(--edge); color: var(--ink); text-decoration: none; }
.grid40 a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.grid40 a.lit { outline: 2px solid var(--ink); outline-offset: 2px; }   /* as .sq.cur in the test */
.grid40 .ok { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.grid40 .skip { border-style: dashed; border-color: var(--mute); color: var(--mute); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--mute); }
.legend i { display: inline-block; width: 12px; height: 12px; border: 1.5px solid var(--edge); vertical-align: -1px; margin-right: 5px; }
.legend i.ok { background: var(--ink); border-color: var(--ink); }
.legend i.skip { border-style: dashed; border-color: var(--mute); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.first-note { margin-left: 8px; }
.sharebox { display: grid; gap: 6px; border: 2px solid var(--edge); padding: 12px 14px; overflow-wrap: anywhere; }
.sharebox[hidden] { display: none; }
/* The result's own link, under Share: the address may break anywhere on a narrow phone */
.keep { display: grid; gap: 6px; overflow-wrap: anywhere; }
.keep .chips { gap: 8px 14px; }
.saved { font: 600 15px/1.3 var(--display); color: var(--mute); }
.saved.ok, .saved.fail { color: var(--ink); }
.chip { appearance: none; border: 2px solid var(--edge); background: transparent; color: var(--ink); cursor: pointer; padding: 8px 18px; font: 600 15px/1 var(--display); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.numin { width: 5em; appearance: textfield; background: transparent; border: 2px solid var(--edge); border-radius: 0; color: var(--ink); padding: 6px 10px; font: 600 16px/1.2 var(--display); }
.numin::-webkit-outer-spin-button, .numin::-webkit-inner-spin-button { appearance: none; margin: 0; }
.numin:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.block { display: grid; gap: 10px; }
.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* About the test: a note, then a textbook's parts */
.how { padding-block: 32px 56px; display: grid; gap: 22px; }
.how > * { min-width: 0; }
.how .title { font-size: 34px; font-weight: 800; font-stretch: 112%; line-height: 1.15; }
.how section { display: grid; gap: 8px; scroll-margin-top: 12px; }
.how .flow { gap: 14px; }
.how h2 { margin-top: 22px; }
.how a { color: var(--ink); text-underline-offset: 3px; }
.how ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.how ol { margin: 0; padding-left: 1.3em; display: grid; gap: 10px; }
.how ol > li > span { display: block; }
.how ol > li > * + * { margin-top: 8px; }
.brief { background: var(--panel); border: 1px solid var(--rule); padding: 14px 16px; display: grid; gap: 6px; font-size: 16px; }
.eq { background: var(--panel); padding: 10px 14px; font: 650 17px/1.3 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.plain { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.35; font-variant-numeric: tabular-nums; }
.plain th { font: 650 13px/1.3 var(--display); color: var(--mute); text-align: left; padding: 0 12px 7px 0; border-bottom: 2px solid var(--edge); vertical-align: bottom; }
.plain td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.plain td:last-child, .plain th:last-child { padding-right: 0; }
.plain .n { font-family: var(--display); font-weight: 600; white-space: nowrap; }
/* Its figures, drawn at their real width by about.js */
.fig { display: grid; gap: 6px; margin: 4px 0; }
.figbox { width: 100%; touch-action: pan-y; cursor: crosshair; }
.figbox svg { display: block; width: 100%; height: auto; }
.figbox text { font: 500 12px var(--display); font-variant-numeric: tabular-nums; fill: var(--mute); }
.figbox text.ink { fill: var(--ink); font-weight: 650; }
.figbox text.on { fill: var(--on-ink); font-weight: 700; }
.figbox .c1 { fill: none; stroke: var(--ink); stroke-width: 2; }
.figbox .c2 { fill: none; stroke: var(--mute); stroke-width: 2; stroke-dasharray: 5 4; }
.figbox .area { fill: var(--wash); }
.figbox .axis { stroke: var(--dim-line); stroke-width: 1; }
.figbox .drop { stroke: var(--dim-line); stroke-width: 1; }
.figbox .mark { stroke: var(--ink); stroke-width: 1.5; }
.figbox .hair { stroke: var(--mute); stroke-width: 1; }
.figbox .tag { fill: var(--ink); }
.figread { font: 600 14px/1.35 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; min-height: 1.35em; }
.figcap { font-size: 14.5px; line-height: 1.4; color: var(--mute); }
footer { border-top: 2px solid var(--edge); }
.foot { display: grid; gap: 14px; padding-block: 16px 26px; font-size: 14px; color: var(--mute); }
.foot .who, .foot .to { display: grid; gap: 4px; }
.foot b { color: var(--ink); font-weight: 700; }
.foot .to a { padding-block: 3px; }
footer a { text-underline-offset: 3px; }
@media (min-width: 640px) { .foot { grid-template-columns: 1fr auto; align-items: start; } .foot .to { grid-auto-flow: column; gap: 22px; } .foot .to a { padding-block: 0; } }

/* The result's two populations: side by side, as the two numbers above them; stacked if picked */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pair > div { display: grid; gap: 6px; min-width: 0; align-content: end; }
.pair > div:first-child { padding-right: 14px; }
.pair > div + div { border-left: 1px solid var(--rule); padding-left: 14px; }
.gut .pair.stack { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.gut .pair.stack > div { padding: 0; border: 0; }

/* The PDF: one A4 page on white, from the browser's print dialog. Out of sight until then, but
   laid out, so its curve is drawn at this width. Its page has no margin, so a browser has nowhere to add
   its date, title and address; the sheet keeps the white itself. Any other page prints on white too. */
.sheet { position: absolute; left: -9999px; top: 0; width: 178mm; visibility: hidden; display: grid; }
.sheet h1 { font: 900 44px/1 var(--display); font-stretch: 125%; letter-spacing: -.01em; margin-bottom: 8px; }
.sheet > :first-child { padding-bottom: 24px; }
.sheet .big { font-size: 72px; }
/* A row for each number and its graph, then one for the details, each between two lines. Filling the page, the rows share what's left */
.sheet .numgraph { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 24px; align-items: center; border-top: 2px solid var(--edge); padding-block: 18px; }
.sheet .numgraph .block > div { display: grid; gap: 6px; }
.sheet .numgraph .hero p:not(.big) { text-wrap: balance; }
.hero.solo { grid-template-columns: minmax(0, 1fr); border: 0; padding: 0; }
.hero.solo > div:first-child { padding-right: 0; }
.sheet .twin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; border-top: 2px solid var(--edge); padding-block: 22px; }
.sheet .by { display: flex; justify-content: space-between; gap: 16px; border-top: 2px solid var(--edge); padding-top: 10px; text-transform: none; letter-spacing: .04em; }
.sheet .by a { color: inherit; text-decoration: none; }
@page { size: A4; margin: 16mm; }
@page sheet { size: A4; margin: 0; }
@media print {
  :root { --ground: #fff; --panel: #fff; --ink: #131417; --body: #26262a; --mute: #5a5a5a; --rule: #d6d6d6; --edge: #131417; --on-ink: #fff; --mid: #828282; --dim: #d6d6d6; --dim-line: #b0b0b0;
    --wash: rgba(19, 20, 23, .08); --wash-lit: rgba(19, 20, 23, .26); --wash-dim: rgba(19, 20, 23, .05); color-scheme: light; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #site, footer, .tip, #app > section:not(.sheet) { display: none !important; }
  main { min-height: 0; }
  .sheet { position: static; visibility: visible; page: sheet; padding-top: 16mm; margin-inline: auto; }
  .sheet.fill { height: 296mm; box-sizing: border-box; padding-bottom: 12mm; grid-template-rows: auto 1fr 1fr auto auto; }
}

/* Talking to the server: starting, scoring, and when it can't be reached */
.problem { color: var(--ink); border-left: 3px solid var(--ink); padding-left: 12px; max-width: 34em; }
.btn[aria-busy="true"] { opacity: .6; cursor: progress; }
.big.wait { color: var(--mute); }

/* Charts: drawn to the column's real width, so text stays its true size on a phone */
.cap { font: 500 12.5px/1.5 var(--mono); color: var(--mute); }
.cap a { color: var(--ink); text-underline-offset: 3px; }
.chart { position: relative; width: 100%; min-width: 0; touch-action: pan-y; }
.chart.click { cursor: pointer; }
.chart.scrolls { overflow-x: auto; touch-action: auto; }
.chart.scrolls svg { width: auto; height: auto; }
.chart text { font: 500 11px var(--mono); font-variant-numeric: tabular-nums; fill: var(--mute); }
.chart text.small { font-size: 10px; letter-spacing: .06em; }
.chart text.b10 { font-size: 10px; }
.chart text.on-ink { fill: var(--on-ink); font-weight: 600; letter-spacing: .04em; }
.chart .axis { stroke: var(--mid); stroke-width: 1; }
.chart .grid { stroke: var(--rule); stroke-width: 1; }
.chart .curve { fill: none; stroke: var(--body); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .curve.open { stroke: var(--mid); }
.chart .wash { fill: var(--wash); }
.chart .wash.lit { fill: var(--wash-lit); }
.chart .wash.dimmed { fill: var(--wash-dim); }
.chart .you { stroke: var(--ink); stroke-width: 2; }
.chart .dot { fill: var(--ink); stroke: var(--ground); stroke-width: 2; }
.chart .youbox { fill: var(--ink); }
.chart .lo { fill: var(--mid); }
.chart .me { fill: var(--ink); }
.chart .ahead { fill: var(--dim); }
.chart .h0 { fill: var(--s0); } .chart .h1 { fill: var(--s1); } .chart .h2 { fill: var(--s2); } .chart .h3 { fill: var(--s3); } .chart .h4 { fill: var(--s4); }
.chart .today { stroke: var(--ink); stroke-width: 1.5; }
.chart .hair { stroke: var(--ink); stroke-width: 1; opacity: .7; }
.tip { position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none; background: var(--ink); color: var(--on-ink); font: 500 12px/1.4 var(--mono);
  padding: 6px 9px; max-width: 260px; opacity: 0; transition: opacity .1s ease-out; will-change: transform; }
.tip.on { opacity: 1; }
.tip.slide { transition: opacity .1s ease-out, transform .1s ease-out; }   /* from one number to the next */
@media (prefers-reduced-motion: reduce) { .tip, .tip.slide { transition: none; } }
.tip.rich { background: var(--panel); color: var(--body); border: 1.5px solid var(--edge); padding: 10px; width: 196px; max-width: none; display: grid; gap: 8px; }
.tip.rich b { color: var(--ink); font-weight: 600; }
.tip.rich .hint { color: var(--mute); }
.tip .pc.q { font-size: 16px; }
.tip.pinned { pointer-events: auto; cursor: pointer; }   /* left by a finger: tapping it opens its page */

/* The live colour: a small square that beats slowly, only where something is up to date */
.live { display: inline-flex; align-items: center; gap: 8px; }
.live i { width: 8px; height: 8px; background: var(--live); flex: none; animation: beat 2.4s ease-in-out infinite; }
@keyframes beat { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .live i { animation: none; } }

/* The stats pages: a header, then sections, each a question with its cards */
.stats { padding-block: 32px 48px; display: grid; gap: 36px; }
.top .site { padding-top: 16px; }   /* the header on every page: Matrix 40, Take the test · Stats · About the test */
.site { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; border-bottom: 1px solid var(--rule); padding-bottom: 12px; }
.brand { font: 900 17px/1 var(--display); font-stretch: 125%; letter-spacing: .03em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.tabs { display: flex; align-items: center; gap: 18px; }
.tabs a { color: var(--mute); font: 650 15px/1 var(--display); text-decoration: none; padding-block: 7px 5px; border-bottom: 2px solid transparent; }
.tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.brand, .tabs a { position: relative; user-select: none; }
.brand::after, .tabs a::after { content: ""; position: absolute; inset: -10px -9px; }   /* a click counts around the word too: no dead gap between the links */
.brand:focus-visible, .tabs a:focus-visible, .stats a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.stats .title { font: 900 clamp(44px, 10vw, 72px)/.95 var(--display); font-stretch: 120%; letter-spacing: -.01em; }
.stats .lede { margin-top: 0; }
.summary { font-size: 19px; line-height: 1.5; max-width: 35em; }
.summary span { display: block; text-wrap: balance; }
.summary b { font: 600 .95em var(--mono); letter-spacing: -.02em; }
.part { display: grid; gap: 16px; border-top: 2px solid var(--edge); padding-top: 18px; min-width: 0; }
.parthead { display: grid; gap: 6px; }
.parthead p { max-width: 38em; color: var(--mute); }
.card { background: var(--panel); border: 1px solid var(--rule); padding: 16px; display: grid; gap: 14px; min-width: 0; align-content: start; }
@media (max-width: 480px) { .card { padding: 14px 12px; } }
.cardhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.sum { color: var(--mute); font-size: 15px; }
.sum b { font: 600 clamp(24px, 6vw, 30px)/1 var(--mono); letter-spacing: -.02em; margin-right: 4px; }
.swatches { display: flex; flex-wrap: wrap; gap: 6px 14px; font: 500 12px/1.3 var(--mono); color: var(--mute); align-items: center; }
.swatches i { display: inline-block; width: 12px; height: 12px; vertical-align: -2px; margin-right: 6px; }
.swatches i.s0 { background: var(--s0); } .swatches i.s1 { background: var(--s1); } .swatches i.s2 { background: var(--s2); }
.swatches i.s3 { background: var(--s3); } .swatches i.s4 { background: var(--s4); }

/* The counts: an instrument board */
.counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 2px solid var(--edge); }
@media (min-width: 640px) { .counts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.counts > div { padding: 14px 16px; display: grid; gap: 6px; align-content: start; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin: 0 -1px -1px 0; }
.counts b { font: 600 clamp(26px, 6vw, 34px)/1 var(--mono); letter-spacing: -.02em; }
.counts .upd { grid-column: 1 / -1; padding-block: 8px; }
.counts .small { font-size: 14px; line-height: 1.35; }
.counts.three > div:last-child { grid-column: 1 / -1; }
@media (min-width: 640px) { .counts.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .counts.three > div:last-child { grid-column: auto; } }

/* The last 30 days as a calendar of numbers */
.cal { width: 100%; max-width: 560px; border-collapse: collapse; table-layout: fixed; }
.cal th { font: 500 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); text-align: left; padding: 0 0 6px 7px; }
.cal td { border: 1px solid var(--rule); padding: 5px 7px 6px; vertical-align: top; }
.cal td:empty { border: 0; }
.cal td span { display: block; font: 500 10.5px/1 var(--mono); color: var(--mute); margin-bottom: 3px; white-space: nowrap; }
.cal td b { font: 500 14px/1.1 var(--mono); color: var(--body); font-variant-numeric: tabular-nums; }
.cal td.cur { background: var(--ink); }
.cal td.cur span, .cal td.cur b { color: var(--on-ink); }
.cal td.pre { border-style: dashed; }
.cal td.pre span { opacity: .6; }
@media (max-width: 480px) { .cal td { padding: 4px 4px 5px; } .cal td b { font-size: 13px; } .cal th { padding-left: 4px; } }

/* Tables */
.scroll { overflow-x: auto; }
.narrowtbl { max-width: 560px; }
.midtbl { max-width: 680px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.tbl th { font: 500 11.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); text-align: left; padding: 0 10px 8px 0; border-bottom: 2px solid var(--edge); }
.tbl td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.tbl td:first-child { white-space: normal; }
.tbl .num { text-align: right; font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums; }
.tbl th.num { font-size: 11.5px; }
.tbl .other td { color: var(--mute); }
.tbl .total td { border-top: 2px solid var(--edge); border-bottom: 0; color: var(--ink); }
.tbl .barcol { width: 30%; padding-right: 0; }
.tbl .barcol i { display: block; height: 6px; background: var(--mid); }
.tbl a { color: var(--ink); text-underline-offset: 3px; }
.tbl.tight th { font-size: 10.5px; letter-spacing: .04em; padding-right: 6px; vertical-align: bottom; }
.tbl.tight td { padding: 3px 6px 3px 0; }
.tbl.tight .num { font-size: 13.5px; }
.tbl.tight th.num { font-size: 10.5px; }
.tbl.tight tr.you td { background: var(--ink); color: var(--on-ink); }
/* Every score, every puzzle's separation: one table on a phone (the second half without its head), two side by side on a PC */
.scoretbl { display: grid; }
.scoretbl .tbl { table-layout: fixed; }
.scoretbl .tbl + .tbl thead { display: none; }
@media (min-width: 860px) { .scoretbl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: start; } .scoretbl .tbl + .tbl thead { display: table-header-group; } }
/* A column's head that sorts its table */
.sortbtn { appearance: none; border: 0; background: none; padding: 6px 0; margin: -6px 0; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--mute);
  text-decoration: underline; text-decoration-color: var(--dim-line); text-underline-offset: 3px; touch-action: manipulation; white-space: nowrap; }
.sortbtn:hover, .sortbtn.on { color: var(--ink); }
.sortbtn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* The latest tests: each a small 10 × 4 grid of what was solved; as many as fill whole rows */
.wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 12px; --sq: 6px; }
.wall .att:nth-child(n+16) { display: none; }
@media (min-width: 640px) { .wall { grid-template-columns: repeat(6, minmax(0, 1fr)); } .wall .att:nth-child(n+13) { display: none; } }
@media (min-width: 860px) { .wall { grid-template-columns: repeat(8, minmax(0, 1fr)); --sq: 7px; } .wall .att:nth-child(n+13) { display: grid; } }
.att { display: grid; gap: 6px; }
.mini { display: grid; grid-template-columns: repeat(10, var(--sq)); gap: 2px; }
.mini i { width: var(--sq); height: var(--sq); border: 1px solid var(--dim-line); }
.mini i.ok { background: var(--ink); border-color: var(--ink); }
.att p { font: 500 11.5px/1.35 var(--mono); color: var(--mute); }
.att p b { font-weight: 600; }
.att.me { outline: 2px solid var(--ink); outline-offset: 5px; }
.att.me p { color: var(--ink); }

/* Long parts fold on a phone; a PC shows them whole */
.foldbtn { display: none; }
@media (max-width: 639px) {
  .foldbtn { display: inline-block; }
  .fold:not(.opened) .foldbody, .fold:not(.opened) .later { display: none; }
}

/* A puzzle as in the test, smaller: the board, the gap, the eight to pick from */
.pzb { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.pc { aspect-ratio: 1; min-width: 0; background: var(--paper); border: 1px solid var(--paper-line); overflow: hidden; }
.pc.q { background: transparent; border: 2px dashed var(--edge); display: grid; place-items: center; font: 800 32px/1 var(--display); color: var(--ink); }
.pzo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pzo span { display: block; text-align: center; font: 600 13px/1.7 var(--mono); color: var(--ink); }

/* A video, which opens on YouTube (videos.js): a dark card shaped like a video's picture, so cream stays with the
   puzzles. The puzzle darkens toward a big red play button, and "The solution" stands on a red bar beside it (Dagh's
   pick, 2026-11-03). Red is the one colour outside the two (Dagh, 2026-11-01). Sizes follow the card's width (cqi) */
.vcard { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; container-type: inline-size;
  color: var(--ink); text-decoration: none; touch-action: manipulation; border: 1px solid var(--rule);
  background: radial-gradient(110% 95% at 24% 50%, #2b2d33, #0b0c0e 72%); }
.block > .vcard { margin-bottom: 12px; }
.vcard:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.vcard .pzb { position: absolute; left: 5%; top: 8%; height: 84%; aspect-ratio: 1; gap: 4px; box-shadow: 0 10px 30px rgba(0, 0, 0, .65); }
.vcard .pzb::after { content: ""; position: absolute; inset: -3px; pointer-events: none;
  background: radial-gradient(circle, rgba(0, 0, 0, .6), rgba(0, 0, 0, .28) 50%, rgba(0, 0, 0, .05) 85%); }
.vcard .pc.q { font-size: 18px; font-size: clamp(18px, 6cqi, 32px); }
.yt { position: absolute; left: 50%; top: 50%; z-index: 1; display: grid; place-items: center; width: 44%; height: 31.4%;
  transform: translate(-50%, -50%); background: #e2372d; box-shadow: 0 4px 18px rgba(0, 0, 0, .6); }
.yt svg { width: 40%; height: auto; fill: #fff; }
.vcard:hover .yt { background: #c7271e; }
.vwords { position: absolute; left: 56%; right: 4%; top: 50%; transform: translateY(-50%); display: grid; gap: 8px; justify-items: start; }
.vname { font: 900 28px/.92 var(--display); font-size: 8cqi; font-stretch: 125%; letter-spacing: -.02em; text-transform: uppercase; color: var(--ink); }
.vsol { padding: 4px 8px 5px; background: #e2372d; color: #fff; font: 900 13px/1 var(--display); font-size: clamp(11px, 3.8cqi, 22px);
  font-stretch: 115%; text-transform: uppercase; white-space: nowrap; }
.vtime { position: absolute; right: 8px; bottom: 8px; padding: 2px 5px; background: rgba(0, 0, 0, .85); color: #fff; font: 600 12px/1.2 var(--display); }
/* On a PC the button is a little smaller, halfway between the big one and design 3's first (Dagh, 2026-11-03) */
@media (min-width: 480px) { .vcard .yt { width: 37%; height: 26.4%; } }

/* A puzzle's own page */
.pager { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; font: 500 13px/1.3 var(--mono); }
.pager a { color: var(--ink); text-underline-offset: 3px; }
.pager > span { display: flex; gap: 16px; align-items: center; }
.pzpage { display: grid; gap: 28px; align-items: start; }
@media (min-width: 860px) { .pzpage { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 36px; } }
.pzpic { display: grid; gap: 14px; max-width: 400px; }
.pzside { display: grid; gap: 16px; min-width: 0; }
.pzside .counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hbars { display: grid; gap: 10px; }
.hbars > div { display: grid; grid-template-columns: 7.2em minmax(0, 1fr) 3em; gap: 10px; align-items: center; font: 500 13px/1.2 var(--mono); }
.hbars .tr { height: 10px; background: var(--dim); position: relative; }
.hbars .tr i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--mid); }
.hbars b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }