/* SYSCALL ][ FIRMWARE: the site's one stylesheet.
   The game's Cleanroom look (pinout/DESIGN.md, E13) on the web: flat plates,
   bold type, the game's own backgrounds, and the selection block. Colors come
   from the game's palette (ui/src/Style.h). Pages carry no script and no
   inline style, so every state lives here.

   Three habits run through it, as in the game:
   - A plate is cut at its first corner, standing for pin 1. A plate that can
     take focus draws its fill as a gradient with that corner left clear
     (--cut), so an outline around it is never clipped; one that cannot is
     clipped with clip-path.
   - Focus is the selection block: a chalk fill with ink words. A colored
     button that takes focus inverts and gains a chalk frame four pixels clear.
   - A heading earns a short solid bar under it. Nothing draws a colored strip
     down one side of an element. */

@font-face {
  font-family: "Firmware Sans";
  src: url("/fonts/firmware-sans.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Firmware Sans";
  src: url("/fonts/firmware-sans-bold.woff2") format("woff2");
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Firmware Narrow";
  src: url("/fonts/firmware-narrow-bold.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Firmware Display";
  src: url("/fonts/firmware-display-bold.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* The wordmark keeps Space Grotesk, as the game's logo does. */
@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/space-grotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* Registered so a plate's fill can ease between states. */
@property --plate {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}

:root {
  color-scheme: dark;
  --bg: #090b0e;
  --band: #0d0f12;
  --panel: #171b20;
  --panel-hi: #20252b;
  --code: #0c0f12;
  --glass: #07080a;
  --line: #2e343a;
  --line-hi: #4a535c;
  --text: #e8ebed;
  --body: #c9ced3;
  --dim: #a3abb3;
  --faint: #7c858e;
  --focus: #e8ebed;
  --ink: #07080a;
  --accent: #f2ec3a;
  --accent-hi: #f7f37a;
  --pin-in: #4cc3e6;
  --pin-out: #f2ec3a;
  --pin-both: #a284ff;
  --wire: #4a535c;
  --good: #3ce57f;
  --bad: #ff4b3e;
  --warn: #f2ec3a;
  --locked: #6b737c;
  --syn-op: #e9eef5;
  --syn-reg: #7fd99a;
  --syn-label: #e3a8ff;
  --syn-number: #a9c7ff;
  --signal: #52e5ff;
  --bench: #bd85ff;
  --shuffle: #ff4fb0;
  --driver: #22d6b5;
  --k: var(--accent);
  --sans: "Firmware Sans", "Segoe UI", system-ui, sans-serif;
  --narrow: "Firmware Narrow", "Arial Narrow", "Segoe UI", system-ui, sans-serif;
  --display: "Firmware Display", "Segoe UI", system-ui, sans-serif;
  --logo: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
  --gutter: 16px;
  --cut: 7px;
}

.k-signal { --k: var(--signal); }
.k-bench { --k: var(--bench); }
.k-shuffle { --k: var(--shuffle); }
.k-driver { --k: var(--driver); }

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

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 88px;
}

/* Substrate, the brushed ground under the game's boards and pages. */
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font: 400 17px/1.6 var(--sans);
  background: var(--bg) url("/img/substrate.webp") 0 0 / 512px 512px;
  overflow-x: hidden;
  overflow-wrap: break-word;
}

/* Registration crosses, the game's mark in place of a grid, fading out
   below the first screen. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("/img/cross.svg") 50% 0 / 96px 96px;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 72%);
}

img,
svg {
  max-width: 100%;
}

img {
  height: auto;
  display: block;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--accent-hi);
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}

/* An inline link takes the selection block itself. */
p a:focus-visible,
li > a:focus-visible:not([class]) {
  outline: 0;
  color: var(--ink);
  background: var(--focus);
  box-shadow: 0 0 0 3px var(--focus);
  text-decoration: none;
}

h1,
h2,
h3 {
  line-height: 1.12;
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  text-wrap: balance;
}

p {
  margin: 0 0 1em;
}

code,
pre,
.mono {
  font-family: var(--mono);
}

code {
  font-size: 0.9em;
  color: var(--syn-op);
  background: var(--panel-hi);
  padding: 0.08em 0.4em;
  overflow-wrap: anywhere;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.wrap {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 50;
  padding: 10px 16px;
  background: linear-gradient(135deg, transparent var(--cut), var(--accent) 0);
  color: var(--ink);
  font: 700 15px/1 var(--sans);
  text-decoration: none;
}

.skip:focus {
  top: 12px;
  color: var(--ink);
}

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

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(13, 15, 18, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.topbar-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.lockup {
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-template-areas: "word mark" "sub mark";
  align-items: center;
  column-gap: 8px;
  color: var(--text);
  text-decoration: none;
  line-height: 1;
  padding: 4px 2px;
}

.lockup:hover {
  color: var(--text);
}

.lockup-word {
  grid-area: word;
  font: 700 21px/1 var(--logo);
  letter-spacing: 0.04em;
}

/* As in the game's lockup: FIRMWARE's capitals are 66 percent of SYSCALL's,
   tracked to span SYSCALL's width (the negative margin drops the tracking after
   the last letter), and the mark stands from SYSCALL's cap top to FIRMWARE's
   baseline. */
.lockup-sub {
  grid-area: sub;
  font: 600 13.6px/1 var(--mono);
  letter-spacing: 0.29em;
  margin-right: -0.29em;
  color: var(--dim);
  margin-top: 2.3px;
}

.lockup .mark {
  grid-area: mark;
  width: 31px;
  height: 33px;
}

.topnav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.topnav a {
  --plate: transparent;
  position: relative;
  font: 700 15px/1 var(--sans);
  color: var(--dim);
  text-decoration: none;
  padding: 12px 16px 13px;
  background: linear-gradient(135deg, transparent var(--cut), var(--plate) 0);
}

.topnav a:hover {
  --plate: var(--panel);
  color: var(--text);
}

/* The page you are on: a lit plate with a short lemon bar under its word. */
.topnav a[aria-current="page"] {
  --plate: var(--panel-hi);
  color: var(--text);
}

.topnav a:focus-visible {
  --plate: var(--focus);
  outline: 0;
  color: var(--ink);
}

.topnav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 16px;
  bottom: 5px;
  width: 18px;
  height: 3px;
  background: var(--accent);
}

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

.foot {
  margin-top: 112px;
  background: var(--band);
}

.foot-in {
  padding-top: 36px;
  padding-bottom: 44px;
  display: grid;
  gap: 14px;
}

.foot-brand {
  margin: 0;
  color: var(--text);
  font-size: 15px;
}

.foot-brand > span:first-child {
  font-family: var(--logo);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
}

.foot-nav a {
  font: 700 15px var(--sans);
  color: var(--dim);
  text-decoration: none;
  padding: 6px 0;
}

.foot-nav a:hover {
  color: var(--text);
}

.foot-nav a:focus-visible {
  outline: 0;
  color: var(--ink);
  background: var(--focus);
  box-shadow: 0 0 0 4px var(--focus);
}

.foot-copy {
  margin: 0;
  color: var(--faint);
  font-size: 14px;
}

/* ------------------------------------------------------------ shared pieces */

.eyebrow {
  margin: 0 0 12px;
  font: 800 13.5px/1.3 var(--narrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.lede {
  font-size: 19px;
  color: var(--dim);
  max-width: 62ch;
}

.kicon {
  width: 1em;
  height: 1em;
  flex: none;
  fill: currentColor;
  vertical-align: -0.12em;
}

/* A kind of puzzle: a solid tag in its color, ink words, pin 1 cut. */
.kind {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px 5px 9px;
  background: linear-gradient(135deg, transparent 5px, var(--k) 0);
  color: var(--ink);
  font: 800 13px/1 var(--narrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px 5px;
  background: linear-gradient(135deg, transparent 5px, var(--panel-hi) 0);
  color: var(--dim);
  font: 800 13px/1 var(--narrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* A plate: opaque graphite with pin 1 cut and no outline. */
.card,
.panel {
  position: relative;
  background: var(--panel);
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px);
}

/* A plate's heading earns a short solid bar under it. */
.rule,
.block-head h2,
.split h2,
.callout h2,
.wt-head h1,
.doc-head h1,
.chapter-head h2,
.type h3,
.sec > h2,
.card-h {
  padding-bottom: 16px;
  background: linear-gradient(var(--rule, var(--accent)), var(--rule, var(--accent))) 0 100% / 40px 4px no-repeat;
}

.btn {
  --plate: var(--panel);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 13px 24px;
  border: 0;
  background: linear-gradient(135deg, transparent var(--cut), var(--plate) 0);
  color: var(--text);
  font: 700 16px/1.2 var(--sans);
  text-decoration: none;
  text-align: center;
}

.btn:hover {
  --plate: var(--panel-hi);
  color: var(--text);
}

.btn:focus-visible {
  --plate: var(--focus);
  outline: 0;
  color: var(--ink);
}

.btn-primary {
  --plate: var(--accent);
  color: var(--ink);
}

.btn-primary:hover {
  --plate: var(--accent-hi);
  color: var(--ink);
}

/* A colored button with focus inverts and takes a chalk frame. */
.btn-primary:focus-visible {
  --plate: var(--ink);
  color: var(--accent);
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}

.steam {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-height: 50px;
  margin: 0;
  padding: 8px 18px;
  background: linear-gradient(135deg, transparent var(--cut), var(--glass) 0);
  color: var(--text);
  font: 800 15px/1.2 var(--narrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.steam small {
  font: 400 13px/1.3 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--dim);
}

/* ------------------------------------------------------------ landing page */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.hero-art {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(9, 11, 14, 0.96) 0%, rgba(9, 11, 14, 0.84) 38%, rgba(9, 11, 14, 0.2) 72%, rgba(9, 11, 14, 0.5) 100%),
    linear-gradient(0deg, var(--bg) 0%, transparent 32%);
}

.hero-in {
  padding-top: 76px;
  padding-bottom: 84px;
  max-width: 1240px;
}

.hero-logo {
  margin: 0 0 28px;
  max-width: 540px;
}

.hero-logo img {
  width: 100%;
}

.tagline {
  margin: 0 0 16px;
  font: 700 clamp(25px, 3vw, 34px)/1.2 var(--sans);
  max-width: 24ch;
}

.hero-copy {
  max-width: 54ch;
  color: var(--body);
  font-size: 18px;
}

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.block {
  padding-top: 104px;
}

.block-head {
  max-width: 760px;
  margin-bottom: 38px;
}

.block-head h2 {
  font-size: clamp(30px, 3.6vw, 44px);
  margin-bottom: 18px;
}

.types {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.type {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px);
}

.type figure {
  margin: 0;
  aspect-ratio: 16 / 9;
  background: var(--code);
}

.type figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.type-body {
  padding: 24px 26px 28px;
}

.type h3 {
  --rule: var(--k);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 28px;
  color: var(--text);
}

.type h3 .kicon {
  color: var(--k);
  width: 0.8em;
  height: 0.8em;
}


.type p {
  color: var(--body);
  margin: 0;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

.split.flip > figure {
  order: 2;
}

.split figure,
.shot {
  margin: 0;
  background: var(--code);
  clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%, 0 16px);
}

.split h2 {
  font-size: clamp(28px, 3.2vw, 38px);
  margin-bottom: 20px;
}

.split p {
  color: var(--body);
}

.axes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 22px 0;
  padding: 0;
  list-style: none;
}

.axes li {
  padding: 15px 16px 14px;
  background: var(--panel);
}

.axes b {
  display: block;
  font: 800 14px/1 var(--narrow);
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 7px;
}

.axes span {
  font-size: 15px;
  color: var(--dim);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.chips li {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  padding: 8px 13px 7px;
  background: linear-gradient(135deg, transparent 5px, var(--panel) 0);
  font-size: 15px;
}


.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gallery figcaption {
  padding: 14px 18px 15px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--dim);
  background: var(--panel);
}

.callout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  padding: 36px;
}

.callout h2 {
  font-size: clamp(26px, 2.8vw, 34px);
  margin-bottom: 18px;
}

.callout p {
  margin: 0;
  color: var(--body);
}

.service {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.service .panel {
  padding: 28px 30px;
}

.service + .lede {
  margin-top: 26px;
}

.service h3 {
  font-size: 21px;
  margin-bottom: 12px;
}

.service p {
  color: var(--body);
  margin: 0;
}

/* ------------------------------------------------------------ privacy policy */

.doc {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  padding-top: 60px;
}

.doc-head {
  grid-column: 1 / -1;
  max-width: 820px;
}

.doc-head h1 {
  font-size: clamp(36px, 4.6vw, 54px);
  margin-bottom: 22px;
}

.doc-meta {
  font: 800 13.5px/1.5 var(--narrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.toc {
  position: sticky;
  top: 96px;
  padding: 22px 18px 18px;
}

.toc h2 {
  font: 800 13px/1 var(--narrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 12px;
}

.toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}

.toc li {
  counter-increment: toc;
}

.toc a {
  --plate: transparent;
  display: flex;
  gap: 10px;
  padding: 6px 8px;
  color: var(--dim);
  text-decoration: none;
  font-size: 15px;
  line-height: 1.35;
  background: linear-gradient(135deg, transparent 5px, var(--plate) 0);
}

.toc a::before {
  content: counter(toc, decimal-leading-zero);
  font: 800 13px/1.5 var(--narrow);
  color: var(--faint);
}

.toc a:hover {
  --plate: var(--panel-hi);
  color: var(--text);
}

.toc a:focus-visible {
  --plate: var(--focus);
  outline: 0;
  color: var(--ink);
}

.toc a:focus-visible::before {
  color: var(--ink);
}

.prose {
  max-width: 760px;
}

.prose section {
  padding-bottom: 12px;
}

.prose h2 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: 25px;
  margin: 40px 0 14px;
}

.prose h2 .no {
  font: 800 15px var(--narrow);
  color: var(--accent);
}

.prose h3 {
  font: 700 18px/1.3 var(--sans);
  margin: 24px 0 8px;
  color: var(--text);
}

.prose p,
.prose li {
  color: var(--body);
}

.prose ul {
  margin: 0 0 1em;
  padding-left: 1.3em;
}

.prose li {
  margin-bottom: 6px;
}

.prose li::marker {
  color: var(--accent);
}

.summary {
  padding: 26px 30px;
  margin-top: 8px;
}

.summary h2 {
  margin-top: 0;
}

.summary ul {
  margin-bottom: 0;
}

.pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 16px 0;
}

.pair .panel {
  padding: 20px 22px 8px;
}

/* What is kept and what is never kept: solid tags in pass and fault colors,
   with the words, so neither leans on its color alone. */
.pair h3 {
  display: inline-block;
  margin-top: 0;
  padding: 6px 11px 5px;
  font: 800 13.5px/1 var(--narrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}

.pair .yes h3 {
  background: linear-gradient(135deg, transparent 5px, var(--good) 0);
}

.pair .no h3 {
  background: linear-gradient(135deg, transparent 5px, var(--bad) 0);
}

/* ------------------------------------------------------------ walkthrough index */

.wt-head {
  padding-top: 60px;
  max-width: 900px;
}

.wt-head h1 {
  font-size: clamp(38px, 5.6vw, 62px);
  margin-bottom: 22px;
}

/* A caution carries its words: a lemon tag over a plain plate. */
.spoiler {
  margin-top: 26px;
  padding: 20px 24px;
  background: var(--panel);
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px);
}

.spoiler h2 {
  display: inline-block;
  margin-bottom: 10px;
  padding: 6px 11px 5px;
  background: linear-gradient(135deg, transparent 5px, var(--accent) 0);
  font: 800 13.5px/1 var(--narrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}

.spoiler p {
  margin: 0;
  color: var(--body);
}

.chapters {
  margin-top: 40px;
}

.chapters ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chapters a {
  --plate: var(--panel);
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  padding: 10px 15px 9px;
  background: linear-gradient(135deg, transparent 5px, var(--plate) 0);
  color: var(--text);
  text-decoration: none;
  font-size: 15px;
}

.chapters a:hover {
  --plate: var(--panel-hi);
}

.chapters a:focus-visible {
  --plate: var(--focus);
  outline: 0;
  color: var(--ink);
}

.chapters .cn {
  font: 800 13px var(--narrow);
  color: var(--accent);
}

.chapters a:focus-visible .cn {
  color: var(--ink);
}

.kfilter {
  position: sticky;
  top: 66px;
  z-index: 20;
  margin-top: 28px;
  padding: 10px 0;
  background: rgba(13, 15, 18, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.kfilter fieldset {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.kfilter legend {
  float: left;
  margin-right: 10px;
  font: 800 13px/38px var(--narrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

.kf {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.kf-l {
  --plate: var(--panel);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 7px 14px 6px 12px;
  background: linear-gradient(135deg, transparent 5px, var(--plate) 0);
  color: var(--text);
  font: 800 14px/1 var(--narrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.kf-l .kicon {
  color: var(--k);
}

.kf-l span {
  color: var(--dim);
}

.kf-l:hover {
  --plate: var(--panel-hi);
}

/* The kind you chose: a solid fill in its color, ink words. */
.kf:checked + .kf-l {
  --plate: var(--k);
  color: var(--ink);
}

.kf:checked + .kf-l .kicon,
.kf:checked + .kf-l span {
  color: var(--ink);
}

.kf:focus-visible + .kf-l {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}

.wt:has(#kf-signal:checked) .kgroup:not(.g-signal),
.wt:has(#kf-bench:checked) .kgroup:not(.g-bench),
.wt:has(#kf-shuffle:checked) .kgroup:not(.g-shuffle),
.wt:has(#kf-driver:checked) .kgroup:not(.g-driver),
.wt:has(#kf-signal:checked) .chapter:not(:has(.g-signal)),
.wt:has(#kf-bench:checked) .chapter:not(:has(.g-bench)),
.wt:has(#kf-shuffle:checked) .chapter:not(:has(.g-shuffle)),
.wt:has(#kf-driver:checked) .chapter:not(:has(.g-driver)) {
  display: none;
}

.chapter {
  padding-top: 60px;
}

.chapter-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 4px 18px;
  margin-bottom: 24px;
}

.chapter-head .eyebrow {
  margin: 0 0 4px;
  flex-basis: 100%;
}

.chapter-head h2 {
  font-size: clamp(28px, 3.4vw, 38px);
}

.chapter-mix {
  margin: 0 0 18px;
  color: var(--dim);
  font-size: 15px;
}

.kgroup + .kgroup {
  margin-top: 28px;
}

.kgroup-h {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
  font: 800 14px/1 var(--narrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--k);
}

.kgroup-h span {
  color: var(--dim);
}

.entries {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.entries a {
  --plate: var(--panel);
  display: flex;
  gap: 14px;
  height: 100%;
  padding: 15px 17px;
  background: linear-gradient(135deg, transparent var(--cut), var(--plate) 0);
  color: var(--text);
  text-decoration: none;
}

.entries a:hover {
  --plate: var(--panel-hi);
}

.entries a:focus-visible {
  --plate: var(--focus);
  outline: 0;
}

.entries a:focus-visible,
.entries a:focus-visible .e-num,
.entries a:focus-visible .e-brief {
  color: var(--ink);
}

.e-num {
  flex: none;
  min-width: 2.9em;
  font: 800 17px/1.3 var(--display);
  color: var(--k);
}

.e-body {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
}

.e-title {
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.e-brief {
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--dim);
}

/* ------------------------------------------------------------ puzzle page */

.crumbs {
  padding-top: 30px;
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font: 800 13.5px/1.4 var(--narrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}

.crumbs li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.crumbs li + li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 2px solid var(--faint);
  border-right: 2px solid var(--faint);
  transform: rotate(45deg);
}

.crumbs a {
  color: var(--dim);
  text-decoration: none;
  padding: 4px 0;
}

.crumbs a:hover {
  color: var(--text);
}

.crumbs a:focus-visible {
  outline: 0;
  color: var(--ink);
  background: var(--focus);
  box-shadow: 0 0 0 4px var(--focus);
}

.crumbs [aria-current] {
  color: var(--text);
}

.pz-head {
  padding: 28px 0 36px;
}

.pz-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 20px;
}

.pz-head h1 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 22px;
}

.pz-num {
  font: 800 clamp(40px, 6vw, 68px)/1 var(--display);
  color: var(--k);
}

.pz-title {
  font: 800 clamp(30px, 4.4vw, 52px)/1.1 var(--display);
  overflow-wrap: anywhere;
  min-width: 0;
}

.pz-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 40px;
  align-items: start;
}

.pz-side {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 18px;
}

.sec {
  margin-bottom: 52px;
}

.sec > h2 {
  --rule: var(--k);
  margin-bottom: 20px;
  font: 800 14px/1.2 var(--narrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  padding-bottom: 12px;
  background-size: 28px 3px;
}

.sec-note {
  color: var(--dim);
  font-size: 15px;
  margin-top: -6px;
}

.brief p,
.task-lead {
  font-size: 19px;
  line-height: 1.55;
}

.task-lead {
  font-weight: 700;
  color: var(--text);
}

.pz.k-driver .sec p {
  max-width: 70ch;
}

.board-fig {
  margin: 0;
}

/* The board's well, with the game's registration crosses on it. */
.board-scroll {
  overflow-x: auto;
  padding: 18px;
  background: url("/img/cross.svg") 50% 50% / 72px 72px, var(--code);
}

.board-fig figcaption {
  margin-top: 10px;
  font-size: 14.5px;
  color: var(--dim);
}

.scroll-note {
  display: none;
}

svg.board {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  font-family: var(--mono);
}

/* Size classes from the generator. A board never swells past 1.3 times its
   drawn size; on a narrow screen it keeps 0.8 of it, so the labels stay
   legible, and the figure scrolls sideways instead. */
svg.bw-3 { max-width: 455px; }
svg.bw-4 { max-width: 585px; }
svg.bw-5 { max-width: 715px; }
svg.bw-6 { max-width: 845px; }
svg.bw-7 { max-width: 975px; }
svg.bw-8 { max-width: 1105px; }
svg.bw-9 { max-width: 1235px; }
svg.bw-10 { max-width: 1365px; }
svg.bw-11 { max-width: 1495px; }
svg.bw-12 { max-width: 1625px; }

@media (max-width: 860px) {
  svg.bw-3 { min-width: 280px; }
  svg.bw-4 { min-width: 360px; }
  svg.bw-5 { min-width: 440px; }
  svg.bw-6 { min-width: 520px; }
  svg.bw-7 { min-width: 600px; }
  svg.bw-8 { min-width: 680px; }
  svg.bw-9 { min-width: 760px; }
  svg.bw-10 { min-width: 840px; }
  svg.bw-11 { min-width: 920px; }
  svg.bw-12 { min-width: 1000px; }
}

.board .w { fill: none; stroke: var(--wire); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.board .w-in { stroke: var(--pin-in); }
.board .w-out { stroke: var(--pin-out); }
.board .w-bi { stroke: var(--pin-both); }
.board .bus { stroke: var(--pin-both); stroke-width: 5; stroke-linecap: round; opacity: 0.85; }
.board .tap { stroke: var(--pin-both); stroke-width: 2; opacity: 0.85; }
.board .core { fill: var(--panel); stroke: var(--line-hi); stroke-width: 1.5; }
.board .core-locked { stroke: var(--locked); stroke-dasharray: 5 4; }
.board .well { fill: var(--code); stroke: none; }
.board .cid { fill: var(--text); font-size: 13px; font-weight: 700; }
.board .cmodel { fill: var(--dim); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; }
.board .lockcode { fill: var(--locked); }
.board .tab { fill: var(--bg); stroke-width: 1.5; }
.board .tab-in { stroke: var(--pin-in); }
.board .tab-out { stroke: var(--pin-out); }
.board .tab-bi { stroke: var(--pin-both); }
.board .tabt { fill: var(--text); font-size: 10px; font-weight: 600; }
.board .term-in { fill: var(--pin-in); }
.board .term-out { fill: var(--pin-out); }
.board .termt { fill: var(--ink); font-size: 13px; font-weight: 800; }
.board .chip { fill: var(--panel); stroke: var(--line-hi); stroke-width: 1.5; }
.board .chipid { fill: var(--text); font-size: 22px; font-weight: 800; letter-spacing: 0.08em; }
.board .plab { font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; }
.board .plab-in { fill: var(--pin-in); }
.board .plab-out { fill: var(--pin-out); }
.board .plab-bi { fill: var(--pin-both); }
.board .pnet { fill: var(--dim); font-size: 10.5px; }
.board .drvbox { fill: var(--panel); stroke: var(--line-hi); stroke-width: 1.5; }
.board .drvblk { fill: var(--panel-hi); stroke: none; }
.board .drvoff { opacity: 0.45; stroke: var(--line-hi); stroke-dasharray: 4 4; }
.board .drvh { fill: var(--driver); font-size: 13px; font-weight: 800; letter-spacing: 0.12em; }
.board .drvs { fill: var(--dim); font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; }
.board .drvv { fill: var(--text); font-size: 13.5px; font-weight: 700; }

.circuit {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: 6px;
  margin: 16px 0 0;
}

.circuit div {
  padding: 11px 14px 12px;
  background: var(--panel);
}

.circuit dt {
  font: 800 12.5px/1.3 var(--narrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

.circuit dd {
  margin: 4px 0 0;
  font: 500 14px/1.45 var(--mono);
}

.idea {
  padding: 24px 26px;
  background: var(--panel-hi);
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px);
}

.idea p {
  margin: 0;
  font-size: 19px;
  line-height: 1.55;
}

.idea code {
  background: var(--code);
}

.hints {
  display: grid;
  gap: 6px;
}

details > summary {
  list-style: none;
  cursor: pointer;
}

details > summary::-webkit-details-marker {
  display: none;
}

.hint {
  background: var(--panel);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut));
}

.hint > summary {
  --plate: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  background: var(--plate);
}

.hint > summary:hover {
  --plate: var(--panel-hi);
}

.hint > summary:focus-visible {
  --plate: var(--focus);
  outline: 0;
}

.hint > summary:focus-visible .hint-n {
  color: var(--ink);
}

.hint-n {
  font: 800 14px/1 var(--narrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
}

.hint-a {
  font: 700 14px/1 var(--sans);
  color: var(--ink);
  padding: 8px 13px;
  background: linear-gradient(135deg, transparent 5px, var(--accent) 0);
}

.hint[open] {
  background: var(--panel-hi);
}

.hint[open] .hint-a {
  font-size: 0;
  color: var(--text);
  background: linear-gradient(135deg, transparent 5px, var(--line) 0);
}

.hint[open] .hint-a::after {
  content: "Hide";
  font-size: 14px;
}

.hint > p {
  margin: 0;
  padding: 2px 18px 18px;
  font-size: 17px;
}

/* The full solution sits under a caution cover: lemon hatching, and words
   that say what is under it. */
.reveal {
  background:
    repeating-linear-gradient(135deg, rgba(242, 236, 58, 0.05) 0 12px, transparent 12px 24px),
    var(--band);
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px);
}

.reveal > summary {
  --plate: transparent;
  display: grid;
  gap: 8px;
  padding: 28px 30px;
  text-align: center;
  background: var(--plate);
}

.reveal > summary:hover {
  --plate: rgba(242, 236, 58, 0.06);
}

.reveal > summary:focus-visible {
  --plate: var(--focus);
  outline: 0;
}

.reveal > summary:focus-visible .reveal-t,
.reveal > summary:focus-visible .reveal-s {
  color: var(--ink);
}

.reveal-t {
  font: 800 18px/1.2 var(--display);
  color: var(--accent);
}

.reveal-s {
  font-size: 15px;
  color: var(--dim);
}

.reveal[open] {
  background: var(--panel);
}

.reveal[open] > summary {
  padding-bottom: 20px;
}

.reveal[open] .reveal-t {
  font-size: 0;
}

.reveal[open] .reveal-t::after {
  content: "Hide the Solution";
  font-size: 18px;
}

.reveal-body {
  padding: 8px 30px 30px;
}

.sol-h {
  margin: 28px 0 10px;
  font: 800 15px/1.3 var(--narrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
}

.reveal-body > p {
  color: var(--body);
}

.sol-note {
  color: var(--dim);
  font-size: 15.5px;
}

.core-block {
  margin: 14px 0;
}

.core-h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 6px;
}

.core-id {
  font: 700 14px/1 var(--mono);
  color: var(--text);
  padding: 5px 9px;
  background: linear-gradient(135deg, transparent 4px, var(--panel-hi) 0);
}

.core-model {
  font: 800 13px/1 var(--narrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}

pre.code {
  margin: 0;
  padding: 14px 16px 14px 8px;
  overflow-x: auto;
  background: var(--code);
  font-size: 14.5px;
  line-height: 1.6;
  counter-reset: ln;
  tab-size: 8;
}

pre.code code {
  font-size: inherit;
  background: none;
  padding: 0;
  color: var(--text);
  overflow-wrap: normal;
}

.ln::before {
  counter-increment: ln;
  content: counter(ln);
  display: inline-block;
  width: 2.2em;
  margin-right: 1.1em;
  text-align: right;
  color: var(--faint);
  user-select: none;
  -webkit-user-select: none;
}

.t-op { color: var(--syn-op); font-weight: 700; }
.t-reg { color: var(--syn-reg); }
.t-lab { color: var(--syn-label); }
.t-num { color: var(--syn-number); }
.t-pin-in { color: var(--pin-in); }
.t-pin-out { color: var(--pin-out); }
.t-pin-bi { color: var(--pin-both); }
.t-word { color: var(--text); }
.t-sym { color: var(--dim); }
.t-com { color: var(--faint); font-style: italic; }

/* A wrong token inverts to solid red with ink words, as the game marks one,
   so it reads without its color. */
.t-mark {
  background: var(--bad);
  color: var(--ink);
  box-shadow: 0 0 0 2px var(--bad);
}

.t-mark * {
  color: var(--ink);
}

.steps {
  margin: 0 0 1em;
  padding-left: 1.6em;
  display: grid;
  gap: 8px;
}

.steps li::marker {
  font-family: var(--narrow);
  font-weight: 800;
  color: var(--accent);
}

.par,
.scores {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.scores {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
  margin-top: 14px;
}

.par div,
.scores div {
  padding: 13px 14px 12px;
  background: var(--code);
}

.par dt,
.scores dt {
  font: 800 12px/1.2 var(--narrow);
  letter-spacing: 0.12em;
  color: var(--faint);
}

.par dd,
.scores dd {
  margin: 7px 0 0;
  font: 800 25px/1 var(--display);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.scores dd.vs {
  margin-top: 7px;
  font: 800 12px/1.2 var(--narrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}

.scores .s-better dd,
.scores .s-better dd.vs {
  color: var(--good);
}

.scores .s-worse dd.vs {
  color: var(--warn);
}

.card {
  padding: 22px 20px 20px;
}

.card-h {
  --rule: var(--k);
  margin-bottom: 16px;
  padding-bottom: 12px;
  background-size: 28px 3px;
  font: 800 13.5px/1 var(--narrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
}

.card-note {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--dim);
}

.facts {
  display: grid;
  gap: 0;
  margin: 0;
}

.facts div {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.facts div:first-child {
  border-top: 0;
  padding-top: 0;
}

.facts dt {
  overflow-wrap: normal;
  font: 800 12px/1.9 var(--narrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

.facts dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}

.facts .kind {
  font-size: 12px;
  padding: 5px 9px 4px 7px;
}

.ops {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.op {
  font: 600 12px/1 var(--mono);
  padding: 6px 8px;
  background: var(--code);
  color: var(--syn-op);
}

.op-new {
  background: var(--accent);
  color: var(--ink);
}

.new {
  display: inline-block;
  margin-left: 4px;
  padding: 3px 7px 2px;
  background: linear-gradient(135deg, transparent 4px, var(--accent) 0);
  color: var(--ink);
  font: 800 11.5px/1.3 var(--narrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: 1px;
}

.pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 28px;
}

.pager a {
  --plate: var(--panel);
  display: grid;
  gap: 8px;
  padding: 19px 21px;
  background: linear-gradient(135deg, transparent var(--cut), var(--plate) 0);
  color: var(--text);
  text-decoration: none;
}

.pager a:hover {
  --plate: var(--panel-hi);
}

.pager a:focus-visible {
  --plate: var(--focus);
  outline: 0;
}

.pager a:focus-visible,
.pager a:focus-visible .pg-dir,
.pager a:focus-visible .pg-n {
  color: var(--ink);
}

.pager .next {
  grid-column: 2;
  text-align: right;
}

.pager .next .pg-t {
  justify-content: flex-end;
}

.pg-dir {
  font: 800 13px/1 var(--narrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

.pg-t {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.pg-n {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--display);
  font-weight: 800;
  color: var(--k);
}

/* ------------------------------------------------------------ narrow screens */

@media (max-width: 1080px) {
  .pz-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pz-side {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .doc {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .toc {
    position: static;
  }
}

@media (max-width: 860px) {
  .scroll-note {
    display: inline;
  }

  .types,
  .gallery,
  .service,
  .split {
    grid-template-columns: minmax(0, 1fr);
  }

  .split {
    gap: 30px;
  }

  .split.flip > figure {
    order: 0;
  }

  .callout {
    grid-template-columns: minmax(0, 1fr);
  }

  .block {
    padding-top: 76px;
  }
}

@media (max-width: 640px) {
  html {
    scroll-padding-top: 16px;
  }

  body {
    font-size: 16px;
  }

  .topbar {
    position: static;
  }

  .topnav a {
    padding: 11px 12px 12px;
    font-size: 14.5px;
  }

  .topnav a[aria-current="page"]::after {
    left: 12px;
  }

  .pz-side {
    grid-template-columns: minmax(0, 1fr);
  }

  .pager {
    grid-template-columns: minmax(0, 1fr);
  }

  .pager .next {
    grid-column: 1;
  }

  .pair {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-in {
    padding-top: 40px;
    padding-bottom: 72px;
  }

  .hero::after {
    background:
      linear-gradient(180deg, rgba(9, 11, 14, 0.5) 0%, rgba(9, 11, 14, 0.9) 45%, var(--bg) 100%);
  }

  .reveal > summary,
  .reveal-body {
    padding-left: 16px;
    padding-right: 16px;
  }

  .callout,
  .service .panel {
    padding: 24px 20px;
  }

  .axes {
    grid-template-columns: minmax(0, 1fr);
  }

  .kfilter {
    top: 0;
    position: static;
  }

  .brief p,
  .task-lead,
  .idea p {
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .entries a,
  .pager a,
  .btn,
  .topnav a,
  .kf-l,
  .chapters a,
  .toc a,
  .hint > summary,
  .reveal > summary {
    transition: --plate 0.12s ease-out, color 0.12s ease-out;
  }
}

/* In a forced color theme every plate and tag keeps a frame, and focus is an
   outline, since fills give way to the system's colors. */
@media (forced-colors: active) {
  .kind,
  .tag,
  .kf-l,
  .hint-a,
  .btn,
  .card,
  .panel,
  .entries a,
  .pager a,
  .chapters a,
  .hint,
  .reveal,
  .pair h3,
  .spoiler h2,
  .new {
    border: 1px solid CanvasText;
  }

  :focus-visible,
  .btn:focus-visible,
  .entries a:focus-visible,
  .pager a:focus-visible,
  .chapters a:focus-visible,
  .toc a:focus-visible,
  .hint > summary:focus-visible,
  .reveal > summary:focus-visible,
  .crumbs a:focus-visible,
  .foot-nav a:focus-visible,
  p a:focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 3px;
  }
}