/* Compliant Language Model. A 1985 CGA examination screen: four colours, one grid, steps instead of tweens.
   System (the owner's notes 2026-11-05):
   - colours: #000 ground, #55FFFF lines and live cells (17.1:1 on black), #FF55FF alarm (8.0:1 on black), #FFF text (21:1)
   - type: 16 / 20 / 24 / 32 / 48 px (nothing under 16 on this site); the name and the one big word are display sizes
     above the scale; Jersey 15 for the name, titles, questions and values; Archivo for everything read
   - spacing: 4 / 8 / 12 / 16 / 24 / 32 / 48
   - one container (max 1440, side padding 32, 16 on a phone), one left line for everything
   - one panel style: black, ONE 4 px cyan line, padding 24 (16 on a phone)
   - every control 48 px high, with hover, active, focus-visible and disabled states */
@font-face { font-family: "Jersey 15"; src: url("/fonts/jersey15.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/fonts/archivo.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --k: #000000; --c: #55ffff; --m: #ff55ff; --w: #ffffff;
  --display: "Jersey 15", "Archivo", sans-serif;
  --text: "Archivo", system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --gut: 32px; --line: 4px; --ctl: 48px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--k); color: var(--w); }
body { margin: 0; font: 400 16px/24px var(--text); font-variant-numeric: tabular-nums; background: var(--k); -webkit-font-smoothing: antialiased; }
img, canvas { image-rendering: pixelated; }
a { color: var(--c); text-underline-offset: 4px; }
a:hover { color: var(--w); }
:focus-visible { outline: var(--line) solid var(--m); outline-offset: 4px; }
button, input { font: inherit; }
.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--gut); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- the top: the name and four nav words on one baseline ---- */
.top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 32px; flex-wrap: wrap; padding: 16px 0 12px; }
.top h1 { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }
.name { font: 400 80px/1 var(--display); color: var(--w); text-decoration: none; display: inline-block; }
.name:hover { color: var(--w); }
.page .name { font-size: 48px; }
.nav { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.nav a {
  display: inline-block; padding: 8px 16px; line-height: 24px; color: var(--w); text-decoration: none; font-weight: 600;
  font-size: 16px; border: var(--line) solid transparent;
}
.nav a:hover { border-color: var(--c); color: var(--c); }
.nav a:active { background: var(--m); border-color: var(--m); color: var(--k); }
.nav a[aria-current="page"] { background: var(--c); border-color: var(--c); color: var(--k); }

/* ---- controls ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--ctl); padding: 0 24px;
  border: var(--line) solid var(--c); background: var(--k); color: var(--c); font-weight: 700; font-size: 16px; line-height: 1;
  cursor: pointer; text-decoration: none; white-space: nowrap; border-radius: 0;
}
.btn:hover { background: var(--c); color: var(--k); }
.btn:active { background: var(--w); border-color: var(--w); color: var(--k); }
.btn.primary { background: var(--m); border-color: var(--m); color: var(--k); }
.btn.primary:hover { background: var(--w); border-color: var(--w); }
.btn.primary:active { background: var(--c); border-color: var(--c); }
.btn:disabled, .btn:disabled:hover, .btn.primary:disabled, .btn.primary:disabled:hover { cursor: not-allowed; background: var(--k); border-color: var(--c); color: var(--w); }
input.text {
  height: var(--ctl); padding: 0 16px; background: var(--k); color: var(--w); border: var(--line) solid var(--c); border-radius: 0; font-size: 16px; min-width: 0; width: 100%;
}
input.text::placeholder { color: var(--c); opacity: 1; }
input.text:hover { border-color: var(--w); }
input.text:disabled { color: var(--c); cursor: not-allowed; }
input[type="range"] { -webkit-appearance: none; appearance: none; height: var(--ctl); margin: 0; width: 100%; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 8px; background: var(--c); }
input[type="range"]::-moz-range-track { height: 8px; background: var(--c); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 32px; margin-top: -12px; background: var(--m); border: var(--line) solid var(--k); }
input[type="range"]::-moz-range-thumb { width: 24px; height: 32px; background: var(--m); border: var(--line) solid var(--k); border-radius: 0; }
input[type="range"]:hover::-webkit-slider-thumb { background: var(--w); }
input[type="range"]:active::-webkit-slider-thumb { background: var(--c); }
input[type="range"]:focus-visible { outline: var(--line) solid var(--m); outline-offset: 0; }
.note { font-size: 16px; line-height: 24px; color: var(--c); margin: 0; }
.note.err { color: var(--m); }

/* ---- the one panel ---- */
.frame { background: var(--k); border: var(--line) solid var(--c); padding: 24px; }

/* ---- a removed word: a cyan bar inside the line, as wide as the word, never taller than the text ---- */
.bar { display: inline-block; height: 0.75em; width: calc(var(--n, 4) * 0.55em); background: var(--c); vertical-align: baseline; }
.bar.new { background: var(--m); }
.silence { color: var(--c); font-style: italic; }

/* ---- the examination (home) ---- */
.exam { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 32px; }
.field { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 16px; min-width: 0; }
.field-head { display: flex; align-items: flex-start; min-height: 32px; }
.badge { display: inline-block; font-weight: 700; font-size: 16px; line-height: 24px; letter-spacing: 0.04em; color: var(--k); background: var(--m); padding: 4px 16px; }
.stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; overflow: hidden; background: url("/img/ground-a.png") repeat center; }
.brainbox { position: relative; }
.brainbox canvas { display: block; }
.seal { position: absolute; right: 0; bottom: 0; width: 30%; height: auto; pointer-events: none; }
.seal.drop { animation: stamp 300ms steps(3, end) both; }
@keyframes stamp { 0% { opacity: 0; transform: scale(1.6); } 34% { opacity: 1; transform: scale(1.25); } 67% { transform: scale(1.08); } 100% { transform: scale(1); } }
.under { display: grid; gap: 8px; }
.player { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; }
.player .end { font-size: 16px; line-height: 24px; color: var(--c); font-weight: 600; }
.player output { font: 400 24px/24px var(--display); color: var(--w); min-width: 4ch; text-align: right; }
.ask { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin: 0; }
.ask-foot { display: flex; justify-content: space-between; gap: 16px; }
.ask-foot .count { color: var(--c); font-weight: 600; white-space: nowrap; }

.answers { display: flex; flex-direction: column; gap: 24px; min-width: 0; padding-bottom: 32px; }
.panel-head { display: grid; gap: 4px; }
.panel-head .model { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--c); }
.stepno { font: 400 32px/32px var(--display); color: var(--c); }
.stepno b { color: var(--w); font-weight: 400; }
.qa { margin: 0; display: grid; gap: 16px; }
.qa > div { display: grid; gap: 4px; }
.qa dt { font: 400 24px/24px var(--display); color: var(--w); margin: 0; }
.qa dd { margin: 0; font-size: 16px; line-height: 24px; overflow-wrap: anywhere; }
.qa dt.who { font: 700 16px/24px var(--text); color: var(--m); }
.qa dt.who::before { content: "Visitor: "; color: var(--c); font-weight: 600; }

/* ---- the form row: three readings, three links, the contract; one grid, one divider thickness ---- */
.formrow {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) repeat(3, minmax(0, 0.8fr)) minmax(0, 2.6fr);
  border: var(--line) solid var(--c); background: var(--k); margin: 24px 0;
}
.formrow > section { display: contents; }
.readings > * { order: 0; }
.links > * { order: 1; }
.cell, .field-link, .ca { border-left: var(--line) solid var(--c); min-width: 0; }
.readings > :first-child { border-left: 0; }
.cell { display: grid; align-content: center; gap: 4px; padding: 12px 16px; }
.cell .lab, .ca .lab { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--c); }
.cell .val { font: 400 32px/32px var(--display); color: var(--w); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.field-link { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; color: var(--w); text-decoration: none; font-weight: 700; font-size: 16px; line-height: 24px; }
.field-link .mark { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; }
.field-link .mark img { width: 24px; height: 24px; object-fit: contain; image-rendering: auto; }
.field-link .soon { display: none; }
a.field-link:hover { background: var(--c); color: var(--k); }
a.field-link:active { background: var(--w); color: var(--k); }
span.field-link { color: var(--c); cursor: default; }
.ca { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 16px; }
.ca code { font: 500 16px/24px var(--mono); color: var(--w); overflow-wrap: anywhere; user-select: all; }
.ca .soon { color: var(--w); }
.page-links { margin-top: 48px; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 3fr); }
.page-links .links > :first-child { border-left: 0; }

/* ---- inner pages ---- */
main.page-main { padding-bottom: 48px; }
.head { margin: 48px 0 24px; }
.head h1, .head h2 { font: 400 48px/48px var(--display); margin: 0 0 8px; color: var(--w); }
.head p { margin: 0; max-width: 64ch; font-size: 20px; line-height: 32px; }
.rehearsal-line { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 0 0 24px; }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: start; }
.split.stretch { align-items: stretch; }
.split > * { min-width: 0; }
.split.stretch > .frame { display: flex; flex-direction: column; justify-content: center; }
.journal-field { display: flex; justify-content: center; padding: 16px 0; }
.journal-field canvas { max-width: 100%; }
.frame .player { grid-template-columns: auto minmax(0, 1fr) auto; margin: 0 0 24px; }
.frame .bar-head { display: grid; gap: 4px; margin-bottom: 8px; }
.chips { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; }
.chip { min-height: var(--ctl); padding: 8px 12px; border: var(--line) solid var(--c); background: var(--k); color: var(--c); font-weight: 700; font-size: 16px; line-height: 20px; cursor: pointer; }
.chip:hover { color: var(--w); border-color: var(--w); }
.chip:active { background: var(--m); border-color: var(--m); color: var(--k); }
.chip[aria-pressed="true"] { background: var(--c); border-color: var(--c); color: var(--k); }
table.ledger { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 24px; }
.ledger th { text-align: left; font-weight: 600; color: var(--c); padding: 12px 16px; border-bottom: var(--line) solid var(--c); }
.ledger td { padding: 12px 16px; border-bottom: 2px dotted var(--c); vertical-align: top; }
.ledger td.num, .ledger th.num { text-align: right; white-space: nowrap; }
.ledger tr.on td { background: var(--c); color: var(--k); }
.ledger tr.on td a { color: var(--k); }
.ledger tr.on .bar { background: var(--k); }
.ledger code { font: 500 16px/24px var(--mono); }
.ledger .w { font-weight: 700; }
.big-word { font: 400 96px/1 var(--display); color: var(--m); margin: 8px 0; white-space: nowrap; }
.frame > .lab { font-size: 16px; font-weight: 600; color: var(--c); }
.facts { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr); border: var(--line) solid var(--c); background: var(--k); }
.facts > div { display: grid; align-content: center; gap: 4px; padding: 16px 24px; border-top: var(--line) solid var(--c); }
.facts > div:first-child { border-top: 0; }
.facts .lab { font-size: 16px; font-weight: 600; color: var(--c); }
.facts .val { font: 400 48px/48px var(--display); color: var(--w); }
.certs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.cert { position: relative; aspect-ratio: 2 / 3; background: var(--k) url("/img/certificate-a.png") center / 100% 100% no-repeat; padding: 34% 14% 16%; display: flex; flex-direction: column; gap: 8px; text-align: center; }
.cert h3 { font: 400 32px/32px var(--display); margin: 0; }
.cert .no { color: var(--c); font-weight: 600; font-size: 16px; }
.cert .last { font: 400 48px/48px var(--display); color: var(--m); margin: 8px 0; overflow-wrap: anywhere; }
.cert .last.exam-on { color: var(--c); }
.cert p { margin: 0; font-size: 16px; line-height: 24px; }
.steps4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: var(--line) solid var(--c); background: var(--k); margin: 0 0 48px; }
.steps4 > div { padding: 24px; border-left: var(--line) solid var(--c); }
.steps4 > div:first-child { border-left: 0; }
.steps4 .n { font: 400 48px/48px var(--display); color: var(--m); }
.steps4 h3 { font: 400 32px/32px var(--display); margin: 8px 0; }
.steps4 p { margin: 0; }
.docs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; margin-bottom: 48px; }
.docs > * { min-width: 0; }
.docs section { background: var(--k); border: var(--line) solid var(--c); padding: 24px; }
.docs h2 { font: 400 32px/32px var(--display); margin: 0 0 16px; }
.docs p { margin: 0 0 12px; }
.docs code, .docs pre { font: 500 16px/24px var(--mono); color: var(--c); }
.docs pre { margin: 0 0 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.docs table { width: 100%; border-collapse: collapse; margin: 0 0 12px; }
.docs td { padding: 8px 16px; border-bottom: 2px dotted var(--c); }
.docs td + td { text-align: right; }
.lost { min-height: calc(100vh - 160px); display: grid; place-items: center; text-align: center; padding: 32px 0; }
.lost img { width: min(900px, 100%); height: auto; display: block; margin: 0 auto 24px; }
.lost .blocks { font: 400 48px/48px var(--display); color: var(--c); letter-spacing: 0.3em; margin: 0 0 16px; }

/* ---- short desktop windows ---- */
@media (min-width: 1024px) and (max-height: 820px) {
  .name { font-size: 72px; }
  .answers { gap: 16px; padding: 16px 24px 24px; }
  .qa { gap: 12px; }
  .qa dt { font-size: 20px; line-height: 20px; }
}
/* ---- 1024 to 1279: the form row in two rows (three readings, then three links and the contract) ---- */
@media (min-width: 1024px) and (max-width: 1279px) {
  .name { font-size: 64px; }
  .formrow { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .readings > .cell { grid-column: span 2; }
  .links > * { border-top: var(--line) solid var(--c); }
  .links > :first-child { border-left: 0; }
  .links > .ca { grid-column: span 3; }
}
/* ---- phone and tablet ---- */
@media (max-width: 1023px) {
  :root { --gut: 16px; }
  .top { align-items: flex-start; }
  .top nav { width: 100%; }
  .nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .nav a { padding: 12px 0; text-align: center; border-width: 0 0 var(--line); }
  .nav a:hover { border-color: var(--c); }
  .nav a[aria-current="page"] { background: none; color: var(--c); border-color: var(--m); }
  .name { font-size: 56px; line-height: 56px; }
  .page .name { font-size: 40px; line-height: 40px; }
  .exam { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .stage { padding: 16px 0; }
  .answers { padding: 16px 16px 24px; }
  .frame, .docs section { padding: 16px; }
  .formrow { display: block; border: 0; background: none; margin: 24px 0 0; }
  .formrow > section { display: grid; border: var(--line) solid var(--c); background: var(--k); }
  .links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .links > :first-child { border-left: 0; }
  .links > .ca { grid-column: 1 / -1; border-left: 0; border-top: var(--line) solid var(--c); }
  .readings { grid-template-columns: repeat(3, minmax(0, 1fr)); position: sticky; bottom: 0; z-index: 5; margin-top: 16px; }
  .readings .cell { padding: 8px 12px; }
  .readings .cell .val { font-size: 24px; line-height: 24px; }
  .field-link { flex-direction: column; gap: 4px; }
  .page-links { margin-top: 32px; }
  .head p { font-size: 16px; line-height: 24px; }
  .split, .docs, .certs { grid-template-columns: minmax(0, 1fr); }
  .big-word { font-size: 64px; }
  .steps4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .steps4 > div:nth-child(3) { border-left: 0; }
  .steps4 > div:nth-child(n+3) { border-top: var(--line) solid var(--c); }
  .ledger th, .ledger td { padding: 12px 8px; }
  .ledger .hide-s { display: none; }
  .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chips .chip:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .player { grid-template-columns: auto auto minmax(0, 1fr) auto; }
  .player output { display: none; }
}
@media (max-width: 480px) {
  .readings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .readings .lastword { display: none; }
  .steps4 { grid-template-columns: minmax(0, 1fr); }
  .steps4 > div { border-left: 0; }
  .steps4 > div + div { border-top: var(--line) solid var(--c); }
  .player .end { display: none; }
  .player { grid-template-columns: auto minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .seal.drop { animation: none; } }
@media (min-width: 1024px) and (max-width: 1279px) {
  .name { font-size: 52px; }
  .nav { gap: 4px; }
  .nav a { padding: 8px 12px; }
}
@media (max-width: 1023px) { .answers.frame { padding: 16px 16px 32px; } }
@media (min-width: 1280px) and (min-height: 860px) {
  .answers { gap: 32px; }
  .qa { gap: 24px; }
  .qa dt { font-size: 32px; line-height: 32px; }
  .qa dd { font-size: 20px; line-height: 32px; }
  .qa dt.who { font-size: 20px; line-height: 32px; }
}
@media (max-width: 1023px) { .nav li { display: contents; } .nav a { display: block; } }
@media (max-width: 480px) { .badge .long { display: none; } }
.recent { margin-top: auto; border-top: var(--line) solid var(--c); padding-top: 16px; display: grid; gap: 4px; }
.recent .lab { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--c); }
.recent .words { font: 400 24px/32px var(--display); color: var(--w); overflow-wrap: anywhere; }
.recent .words span + span::before { content: " · "; color: var(--c); }
.recent { display: none; }
@media (min-width: 1280px) and (min-height: 1000px) { .recent { display: grid; } }
@media (max-width: 1023px) { .recent { display: grid; margin-top: 8px; } }
.cell .lab { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- inner padding by the kit's floor: 1 em of the box's largest text at the sides (16 to 32 px) ---- */
.formrow { grid-template-columns: repeat(3, minmax(0, 1fr)) repeat(3, minmax(0, 0.8fr)) minmax(0, 3fr); }
.cell { padding: 12px 32px; }
.steps4 > div { padding: 32px; }
.facts > div { padding: 16px 32px; }
@media (min-width: 1024px) and (max-width: 1439px) {
  .formrow { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .readings > .cell { grid-column: span 2; }
  .links > * { border-top: var(--line) solid var(--c); }
  .links > :first-child { border-left: 0; }
  .links > .ca { grid-column: span 3; }
}
@media (max-width: 1023px) {
  .readings .cell { padding: 8px 24px; }
  .ledger th, .ledger td { padding: 12px 16px; }
  .steps4 > div { padding: 32px; }
}
@media (max-width: 420px) {
  .nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav a { padding: 8px 16px; }
}
.recent { border-top: 0; padding-top: 0; }
@media (min-width: 1280px) and (min-height: 860px) { .answers.frame { padding: 32px; } }
/* panels: 32 px inside on a desktop (their titles are 32 px), 24 px on a phone (titles 24 px there) */
.frame, .answers.frame, .docs section { padding: 32px; }
.badge { padding: 8px 16px; }
.field-head { min-height: 40px; }
.facts > div { padding: 20px 32px; }
@media (min-width: 1024px) and (max-height: 820px) { .answers.frame { padding: 24px 32px 32px; } }
@media (max-width: 1023px) {
  .frame, .answers.frame, .docs section { padding: 24px; }
  .stepno, .docs h2, .steps4 h3, .cert h3 { font-size: 24px; line-height: 24px; }
  .qa dt { font-size: 24px; line-height: 24px; }
  .facts .val { font-size: 32px; line-height: 32px; }
  .steps4 .n { font-size: 32px; line-height: 32px; }
}
@media (max-width: 480px) {
  .links { grid-template-columns: minmax(0, 1fr); }
  .links > * { border-left: 0; }
  .links > * + * { border-top: var(--line) solid var(--c); }
  .field-link { flex-direction: row; justify-content: flex-start; padding: 8px 24px; }
}
@media (min-width: 1440px) { .formrow { grid-template-columns: repeat(3, minmax(0, 1fr)) repeat(3, minmax(0, 0.9fr)) minmax(0, 2.8fr); } }
.field-link .mark { width: 24px; height: 24px; }
.split.stretch > .frame { padding: 32px 36px; }
.visitor { display: grid; gap: 4px; border: var(--line) solid var(--c); padding: 12px 16px; }
.visitor p { margin: 0; }
.visitor .vq { color: var(--m); font-weight: 700; }
.visitor .vq .lab { color: var(--c); font-weight: 600; }
@media (min-width: 1024px) and (max-width: 1279px) { .exam { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* 1280 and up: the form row in ONE row again (the brain keeps the height); 1024-1279 keep two rows */
@media (min-width: 1280px) {
  .formrow { grid-template-columns: repeat(3, minmax(0, 1fr)) repeat(3, minmax(0, 0.9fr)) minmax(0, 2.8fr); }
  .readings > .cell { grid-column: auto; }
  .links > * { border-top: 0; }
  .links > :first-child { border-left: var(--line) solid var(--c); }
  .links > .ca { grid-column: auto; }
}
@media (min-width: 1280px) and (max-width: 1439px) {
  .field-link { flex-direction: column; gap: 4px; padding: 12px 8px; }
}
@media (min-width: 1280px) and (max-width: 1439px) {
  .readings .cell { padding: 12px 24px; }
  .readings .cell .val { font-size: 24px; line-height: 32px; }
}