/* Layout: a museum-style long read. One reading column (40rem) with notes in the right margin,
   instruments (figures) set wider on their own panels, a chapter rail at the left on wide screens.
   Palette: cool file-paper and ink, Enigma lamp amber for the forward signal, cable green for the
   return signal and for bits, cryptanalyst's red pencil for contradictions. */
:root {
  --paper: #ECEEEA;
  --panel: #F6F7F4;
  --inset: #E1E4DE;
  --ink: #161B22;
  --ink-2: #4A525E;
  --ink-3: #87909A;
  --rule: #CBD0C9;
  --lamp: #E09A12;
  --lamp-ink: #8E5906;
  --lamp-glow: rgba(255, 176, 36, .55);
  --lamp-wash: rgba(224, 154, 18, .16);
  --wire: #13766A;
  --wire-wash: rgba(19, 118, 106, .13);
  --pencil: #B7392D;
  --pencil-wash: rgba(183, 57, 45, .12);
  --machine: #1B1F26;
  --machine-2: #262B34;
  --machine-fg: #E9E5DA;
  --machine-dim: #7C8390;
  --bone: #EAE4D4;
  --bone-ink: #22262C;
  --tape: #E9DFC3;
  --tape-edge: #D6C9A4;
  --hole: #2A2A28;
  /* Bletchley's colour code for the Bombe drums of rotors I to V; physical paint, the same in both themes */
  --drum-1: #C23B2E;
  --drum-2: #7E2940;
  --drum-3: #2F7E50;
  --drum-4: #E1B22F;
  --drum-5: #7C5534;
  --shadow: 0 1px 0 rgba(22, 27, 34, .04), 0 14px 34px -22px rgba(22, 27, 34, .45);

  --f-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --f-label: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;

  --measure: 40rem;
  --wide: 66rem;
  --radius: 10px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0F1217;
    --panel: #151920;
    --inset: #1D222A;
    --ink: #E6E8EB;
    --ink-2: #A5ACB6;
    --ink-3: #6A727E;
    --rule: #2A313A;
    --lamp: #FFB53A;
    --lamp-ink: #FFC45F;
    --lamp-glow: rgba(255, 181, 58, .6);
    --lamp-wash: rgba(255, 181, 58, .14);
    --wire: #46C6B7;
    --wire-wash: rgba(70, 198, 183, .14);
    --pencil: #FF7564;
    --pencil-wash: rgba(255, 117, 100, .15);
    --machine: #0B0D11;
    --machine-2: #1A1E26;
    --machine-fg: #E4E0D5;
    --machine-dim: #6F7784;
    --bone: #D9D2C0;
    --bone-ink: #1A1D22;
    --tape: #3A3629;
    --tape-edge: #4B4634;
    --hole: #0B0C0D;
    --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 16px 36px -24px rgba(0, 0, 0, .8);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0F1217;
  --panel: #151920;
  --inset: #1D222A;
  --ink: #E6E8EB;
  --ink-2: #A5ACB6;
  --ink-3: #6A727E;
  --rule: #2A313A;
  --lamp: #FFB53A;
  --lamp-ink: #FFC45F;
  --lamp-glow: rgba(255, 181, 58, .6);
  --lamp-wash: rgba(255, 181, 58, .14);
  --wire: #46C6B7;
  --wire-wash: rgba(70, 198, 183, .14);
  --pencil: #FF7564;
  --pencil-wash: rgba(255, 117, 100, .15);
  --machine: #0B0D11;
  --machine-2: #1A1E26;
  --machine-fg: #E4E0D5;
  --machine-dim: #6F7784;
  --bone: #D9D2C0;
  --bone-ink: #1A1D22;
  --tape: #3A3629;
  --tape-edge: #4B4634;
  --hole: #0B0C0D;
  --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 16px 36px -24px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-display);
  font-size: 1.1875rem;
  line-height: 1.62;
  font-optical-sizing: auto;
  padding-inline: 16px;
  text-rendering: optimizeLegibility;
}
@media (min-width: 720px) { body { padding-inline: 32px; } }
::selection { background: var(--lamp-wash); }
a { color: inherit; text-decoration-color: var(--lamp); text-underline-offset: .18em; }
em, i { font-style: italic; }
sub, sup { font-size: .68em; line-height: 0; }
:focus-visible { outline: 2px solid var(--lamp); outline-offset: 2px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

.lbl, .eyebrow {
  font-family: var(--f-label);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  line-height: 1.2;
}
.mono { font-family: var(--f-mono); font-size: .92em; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- page chrome ---------- */
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 20;
  padding-top: env(safe-area-inset-top, 0px);
  pointer-events: none;
}
.progress span { display: block; height: 2px; background: var(--lamp); transform-origin: 0 50%; transform: scaleX(0); }

.shell { max-width: 81rem; margin-inline: auto; }
.rail { display: none; }
main { min-width: 0; max-width: var(--wide); }

@media (min-width: 1280px) {
  .shell { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); column-gap: 3rem; }
  .rail {
    display: block; position: sticky; align-self: start;
    top: calc(env(safe-area-inset-top, 0px) + 2rem);
    padding-top: 5.2rem;
  }
}
.rail-title {
  display: block; text-decoration: none;
  font-family: var(--f-display); font-size: 1.15rem; line-height: 1.2; margin-bottom: 1.4rem;
}
.rail-title em { color: var(--lamp-ink); font-weight: 400; }
.rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; border-left: 1px solid var(--rule); }
.rail ol a {
  display: grid; grid-template-columns: 2.1rem 1fr; align-items: baseline;
  padding: .35rem 0 .35rem .8rem; margin-left: -1px; border-left: 2px solid transparent;
  font-family: var(--f-label); font-size: .98rem; letter-spacing: .04em; color: var(--ink-2);
  text-decoration: none; line-height: 1.2;
}
.rail ol a .rn { font-family: var(--f-display); font-style: italic; color: var(--ink-3); font-size: .95rem; }
.rail ol a:hover { color: var(--ink); }
.rail ol a.active { color: var(--ink); border-left-color: var(--lamp); }
.rail ol a.active .rn { color: var(--lamp-ink); }
.rail-foot { margin-top: 1.6rem; font-size: .85rem; color: var(--ink-3); line-height: 1.4; font-style: italic; }

/* ---------- hero ---------- */
.hero { display: grid; gap: 2.4rem; padding-block: 3.2rem 1.5rem; }
@media (min-width: 980px) {
  .hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; padding-block: 5.5rem 2.5rem; column-gap: 3.5rem; }
}
.hero h1 {
  font-weight: 300;
  font-size: clamp(3.5rem, 11vw, 7.4rem);
  line-height: .9;
  letter-spacing: -.025em;
  margin: .9rem 0 1.4rem;
  font-variation-settings: "opsz" 72;
  text-wrap: balance;
}
.hero h1 .amp { font-style: italic; color: var(--lamp-ink); font-weight: 300; padding-inline: .02em; }
.lede { font-size: 1.28rem; line-height: 1.52; color: var(--ink-2); max-width: 35rem; margin: 0; }
.route {
  display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin: 1.7rem 0 0; padding: 0; list-style: none;
  font-family: var(--f-label); font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2);
}
.route li { display: flex; align-items: baseline; gap: .45rem; }
.route li + li::before { content: "→"; color: var(--ink-3); margin-right: .45rem; }
.route b { font-family: var(--f-display); font-style: italic; font-weight: 400; text-transform: none; color: var(--lamp-ink); letter-spacing: 0; }

/* the machine surface: always the dark lacquer of the real Enigma, in both themes */
.machine {
  background: radial-gradient(120% 90% at 30% 0%, var(--machine-2), var(--machine) 70%);
  color: var(--machine-fg);
  border-radius: 14px;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .06);
  border: 1px solid var(--rule);
}
.machine .lbl { color: var(--machine-dim); }

.hero-demo { padding: 1.4rem 1.4rem 1.2rem; display: grid; gap: 1.2rem; }
.hd-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.windows { display: flex; gap: .55rem; }
.win {
  width: 2.3rem; height: 2.7rem; border-radius: 5px; overflow: hidden; position: relative;
  background: linear-gradient(180deg, #0006, transparent 30%, transparent 70%, #0006), var(--bone);
  color: var(--bone-ink); display: grid; place-items: center;
  font-family: var(--f-label); font-weight: 600; font-size: 1.45rem;
  box-shadow: inset 0 0 0 2px #0008, 0 0 0 3px var(--machine-2);
}
.win b { display: block; font-weight: 600; }
.win.tick b { animation: tick .28s cubic-bezier(.3, .7, .3, 1); }
@keyframes tick { from { transform: translateY(80%); opacity: .2; } to { transform: none; opacity: 1; } }
.hd-grid { display: grid; grid-template-columns: auto 1fr; gap: .7rem 1rem; align-items: center; }
.hd-row { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: .3rem; }
.hd-key, .hd-lamp {
  aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--f-label); font-weight: 600; font-size: clamp(.8rem, 2.6vw, 1.05rem); max-width: 2.3rem; width: 100%;
}
.hd-key { background: #10131a; color: var(--machine-fg); box-shadow: inset 0 0 0 2px #7d838d55, 0 2px 0 #000; transition: transform .12s, background .12s; }
.hd-key.down { transform: translateY(2px); box-shadow: inset 0 0 0 2px var(--lamp), 0 0 0 #000; }
.hd-lamp { background: #2a2f38; color: #59606b; transition: background .25s, color .25s, box-shadow .25s; }
.hd-lamp.on { background: #ffd27a; color: #3b2600; box-shadow: 0 0 14px 3px var(--lamp-glow); }
.hd-lamp.was { background: #3a3326; color: #e7c98a; }
.hd-caption { margin: .2rem 0 0; font-size: .98rem; line-height: 1.45; color: var(--machine-fg); opacity: .8; font-style: italic; }
.hero-demo .hd-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.hero-demo .btn { background: transparent; color: var(--machine-fg); border-color: var(--machine-dim); }

/* ---------- chapters and prose ---------- */
.chapter { padding-top: 5.5rem; display: flow-root; } /* contains margin notes that float past the last paragraph */
.ch-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.4rem; align-items: end;
  border-top: 1px solid var(--ink); padding-top: 1.3rem; margin-bottom: 2.2rem;
}
.ch-num {
  font-style: italic; font-weight: 300; line-height: .78; color: var(--lamp-ink);
  font-size: clamp(4.2rem, 11vw, 7.5rem); font-variation-settings: "opsz" 72; min-width: 1ch;
}
.ch-title {
  margin: 0; font-weight: 400; line-height: 1; letter-spacing: -.015em;
  font-size: clamp(2.4rem, 6vw, 4rem); font-variation-settings: "opsz" 72; text-wrap: balance;
}
.ch-kicker { grid-column: 1 / -1; margin: 1rem 0 0; }
@media (min-width: 640px) { .ch-kicker { grid-column: 2; } }

.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1.15rem; }
.prose h3 {
  font-weight: 500; font-size: 1.65rem; line-height: 1.2; margin: 3rem 0 .9rem; letter-spacing: -.005em;
  font-variation-settings: "opsz" 48; text-wrap: balance;
}
.prose h3 .lbl { display: block; margin-bottom: .35rem; color: var(--lamp-ink); }
.prose ol.facts { margin: 0 0 1.2rem; padding-left: 1.4rem; display: grid; gap: .6rem; }
.prose ol.facts li::marker { font-family: var(--f-label); font-weight: 600; color: var(--lamp-ink); }
.dropcap::first-letter {
  float: left; font-size: 4.1em; line-height: .8; padding: .08em .08em 0 0; font-weight: 300;
  color: var(--lamp-ink); font-variation-settings: "opsz" 72;
}
.convention { font-family: var(--f-mono); font-size: .88em; }
.pl { font-family: var(--f-mono); font-size: .9em; letter-spacing: .02em; }
.ct { font-family: var(--f-mono); font-size: .9em; letter-spacing: .02em; }

/* margin notes */
.sidenote {
  display: block; font-size: .95rem; line-height: 1.48; color: var(--ink-2);
  border-left: 1px solid var(--lamp); padding: .1rem 0 .1rem .9rem; margin: 0 0 1.2rem;
}
.sidenote .lbl { display: block; margin-bottom: .25rem; font-size: .72rem; color: var(--lamp-ink); }
@media (min-width: 1100px) {
  .sidenote {
    float: right; clear: right; width: 15rem; margin: .3rem -18rem 1rem 0;
    font-size: .9rem; border-left: 0; padding: .55rem 0 0; border-top: 1px solid var(--rule);
  }
}

/* display mathematics */
.math {
  margin: 1.5rem 0 1.6rem; padding: .2rem 0; text-align: center;
  font-size: 1.42rem; line-height: 1.5; font-variation-settings: "opsz" 36;
  overflow-x: auto;
}
.math i, .m i { font-style: italic; }
.math .op, .m .op { font-style: normal; }
.math .note, .math small { display: block; font-size: .92rem; color: var(--ink-2); font-style: italic; margin-top: .25rem; }
.m { white-space: nowrap; }
@media (max-width: 560px) { .prose p .m, .prose li .m, figcaption .m { white-space: normal; } }
.math .sep { display: inline-block; width: 2.2em; }

/* chapter lesson */
.lesson { clear: both; max-width: var(--measure); margin: 3rem 0 0; padding: 1.1rem 0 1.2rem; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
.lesson .lbl { color: var(--pencil); }
.lesson p { margin: .45rem 0 0; font-size: 1.5rem; line-height: 1.34; font-style: italic; font-weight: 400; text-wrap: balance; }

/* ---------- figures (the instruments) ---------- */
.fig {
  margin: 2.4rem 0 2.8rem; background: var(--panel); border: 1px solid var(--rule);
  border-radius: var(--radius); box-shadow: var(--shadow); clear: both; min-width: 0;
}
.fig-head { display: flex; align-items: baseline; gap: .8rem; padding: .85rem 1.2rem .7rem; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.fig-no { font-family: var(--f-label); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; color: var(--lamp-ink); }
.fig-title { font-family: var(--f-label); font-weight: 500; letter-spacing: .07em; text-transform: uppercase; font-size: 1rem; color: var(--ink); }
.fig-body { padding: 1.2rem; min-width: 0; }
.fig figcaption { padding: .85rem 1.2rem 1rem; border-top: 1px solid var(--rule); font-size: .98rem; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 560px) {
  .fig-body { padding: .9rem; }
  .fig-head, .fig figcaption { padding-inline: .9rem; }
}
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fig svg { display: block; max-width: 100%; height: auto; }
.fig svg text { font-family: var(--f-label); }

/* controls */
.controls { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; }
.controls + .controls { margin-top: .7rem; }
.field-group { display: grid; gap: .3rem; min-width: 0; }
.btn {
  font-family: var(--f-label); font-size: .9rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink); background: var(--panel); border: 1px solid var(--ink-3); border-radius: 4px;
  padding: .42rem .8rem .38rem; cursor: pointer; line-height: 1.15; display: inline-flex; align-items: center; gap: .45rem;
  transition: border-color .15s, background .15s;
}
.btn:hover { border-color: var(--ink); }
.btn.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn.primary:hover { background: var(--ink-2); border-color: var(--ink-2); }
.btn[aria-pressed="true"] { background: var(--lamp-wash); border-color: var(--lamp-ink); }
.btn:disabled { opacity: .45; cursor: default; }
.btn .ico { font-family: var(--f-display); font-size: 1rem; line-height: 1; }
.icon-btn { width: 2rem; height: 2rem; justify-content: center; padding: 0; font-size: 1.1rem; }

.field {
  font-family: var(--f-mono); font-size: 1rem; color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 4px; padding: .42rem .6rem; width: 100%; min-width: 0;
}
.field:focus { border-color: var(--lamp-ink); outline: none; box-shadow: 0 0 0 3px var(--lamp-wash); }
textarea.field { resize: vertical; min-height: 3.2rem; line-height: 1.45; }
select.field { font-family: var(--f-label); font-size: 1rem; padding-right: 1.6rem; width: auto; }
input[type="range"] { accent-color: var(--lamp); width: 100%; min-width: 0; }
.range-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .8rem; align-items: center; }
.range-row output { font-family: var(--f-label); font-size: 1.1rem; font-weight: 600; min-width: 3.2rem; text-align: right; font-variant-numeric: tabular-nums; }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
  font-family: var(--f-mono); font-size: .84rem; padding: .2rem .6rem; border: 1px solid var(--rule);
  border-radius: 999px; background: transparent; color: var(--ink-2); cursor: pointer; line-height: 1.4;
}
.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.chip[aria-pressed="true"] { border-color: var(--lamp-ink); color: var(--ink); background: var(--lamp-wash); }

.readout { font-family: var(--f-mono); font-size: .95rem; color: var(--ink); line-height: 1.55; overflow-wrap: anywhere; }
.readout.dim { color: var(--ink-2); }
.stat { display: grid; gap: .1rem; }
.stat .lbl { white-space: nowrap; }
.stat b { font-family: var(--f-label); font-weight: 600; font-size: 1.6rem; line-height: 1; font-variant-numeric: tabular-nums; }
.stat.lamp b { color: var(--lamp-ink); }
.stat.wire b { color: var(--wire); }
.stat.pencil b { color: var(--pencil); }
.split { display: grid; gap: 1.4rem; }
@media (min-width: 820px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .split.wide-left { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .split.wide-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
}
.hint { font-size: .9rem; color: var(--ink-3); font-style: italic; margin: 0; }
.ok { color: var(--wire); }
.bad { color: var(--pencil); }
.amber { color: var(--lamp-ink); }

/* ---------- svg vocabulary ---------- */
.ax { stroke: var(--rule); stroke-width: 1; fill: none; }
.ax-strong { stroke: var(--ink-3); stroke-width: 1; fill: none; }
.t-label { fill: var(--ink-2); font-size: 11px; letter-spacing: .08em; }
.t-small { fill: var(--ink-3); font-size: 10px; letter-spacing: .06em; }
.t-ink { fill: var(--ink); }
.t-lamp { fill: var(--lamp-ink); }
.t-wire { fill: var(--wire); }
.t-pencil { fill: var(--pencil); }
.bar-ink { fill: var(--ink-2); }
.bar-soft { fill: var(--ink-3); fill-opacity: .42; }
.bar-lamp { fill: var(--lamp); }
.bar-wire { fill: var(--wire); }
.bar-pencil { fill: var(--pencil); }
.ghost { fill: none; stroke: var(--lamp); stroke-width: 1.6; }

/* ---------- Chapter I: cipher wheel ---------- */
.wheel-layout { display: grid; gap: 1.6rem; align-items: center; }
@media (min-width: 820px) { .wheel-layout { grid-template-columns: minmax(0, 23rem) minmax(0, 1fr); } }
.wheel-wrap { max-width: 23rem; width: 100%; margin-inline: auto; touch-action: none; }
#wheel-svg { cursor: grab; user-select: none; }
#wheel-svg.dragging { cursor: grabbing; }
.wh-ring-o { fill: var(--panel); stroke: var(--ink-3); stroke-width: 1; }
.wh-ring-i { fill: var(--inset); stroke: var(--ink-3); stroke-width: 1; }
.wh-core { fill: var(--panel); stroke: var(--ink-3); stroke-width: 1; }
.wh-tick { stroke: var(--rule); stroke-width: 1; }
.wh-plain { fill: var(--ink-2); font-family: var(--f-mono) !important; font-size: 15px; }
.wh-cipher { fill: var(--ink); font-size: 17px; font-weight: 600; }
.wh-hl { fill: var(--lamp-wash); stroke: var(--lamp); stroke-width: 1.5; }
.wh-k { fill: var(--lamp-ink); font-size: 40px; font-weight: 600; }
.wh-klabel { fill: var(--ink-3); font-size: 11px; letter-spacing: .16em; }
.wh-grip { fill: none; stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 5; }
.wheel-out { font-family: var(--f-mono); font-size: 1.15rem; letter-spacing: .04em; line-height: 1.6; min-height: 1.6em; overflow-wrap: anywhere; }
.wheel-out span { cursor: pointer; border-radius: 3px; }
.wheel-out span:hover, .wheel-out span.hl { background: var(--lamp-wash); }
table.arith { border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .95rem; }
table.arith th { font-family: var(--f-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: .75rem; color: var(--ink-3); text-align: left; padding: .2rem .8rem .2rem 0; white-space: nowrap; }
table.arith td { font-family: var(--f-mono); text-align: center; padding: .2rem .45rem; min-width: 2rem; border-left: 1px solid var(--rule); }
table.arith tr.plain td { color: var(--ink-2); }
table.arith tr.cipher td { font-weight: 600; color: var(--ink); }
table.arith td.hl { background: var(--lamp-wash); }
.arith-wrap { overflow-x: auto; }

/* ---------- letter cells (strips) ---------- */
.strip { display: flex; flex-wrap: wrap; gap: .5rem .1rem; }
.col3 { display: grid; grid-template-rows: repeat(3, 1.55rem); text-align: center; width: 1.6rem; border-radius: 4px; font-family: var(--f-mono); font-size: 1rem; line-height: 1.55rem; transition: background .2s; }
.col3 span:nth-child(1) { color: var(--ink-2); }
.col3 span:nth-child(2) { color: var(--lamp-ink); }
.col3 span:nth-child(3) { color: var(--ink); font-weight: 600; }
.col3.on { background: var(--lamp-wash); box-shadow: inset 0 0 0 1px var(--lamp); }
.col3.future span:nth-child(3) { color: transparent; }
.strip-legend { display: grid; grid-template-rows: repeat(3, 1.55rem); line-height: 1.55rem; margin-right: .4rem; }
.strip-wrap { display: flex; align-items: flex-start; gap: .3rem; }

/* ---------- tabula recta ---------- */
.tr-cell { font-size: 11.5px; fill: var(--ink-2); }
.tr-cell.hot { fill: var(--paper); font-weight: 700; }
.tr-head { font-size: 12px; font-weight: 600; fill: var(--ink); }
.tr-head.plain { font-family: var(--f-mono) !important; font-weight: 500; font-size: 12.5px; }
.tr-head.hot { fill: var(--lamp-ink); }
.tr-band { fill: var(--lamp-wash); }
.tr-hit { fill: var(--lamp); }
.tr-grid { stroke: var(--rule); stroke-width: .6; }
.arith-line { font-family: var(--f-mono); font-size: 1rem; color: var(--ink-2); min-height: 1.5em; }
.arith-line b { color: var(--ink); }

/* ---------- IC / Friedman ---------- */
.gauge-marker { fill: var(--lamp); }
.col-grid { display: grid; gap: 1px; font-family: var(--f-mono); font-size: .9rem; width: max-content; }
.col-grid span { width: 1.55rem; height: 1.6rem; display: grid; place-items: center; }
.col-grid .odd { background: var(--wire-wash); }
.col-grid .even { background: var(--lamp-wash); }
.col-grid .keyrow { font-family: var(--f-label); font-weight: 700; font-size: 1.05rem; background: transparent !important; border-top: 1px solid var(--ink); margin-top: 3px; height: 1.9rem; }
.col-grid .keyrow.good { color: var(--wire); }
.col-grid .keyrow.wrong { color: var(--pencil); }
.recovered { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; align-items: baseline; }
.recovered b { font-family: var(--f-mono); font-size: 1.25rem; letter-spacing: .12em; }

/* ---------- one-time pad ---------- */
.otp { display: grid; gap: .5rem; }
.otp-row { display: grid; grid-template-columns: 7.2rem repeat(6, 2.2rem) minmax(0, 1fr); align-items: center; gap: .3rem; }
.otp-row .c { height: 2.2rem; display: grid; place-items: center; font-family: var(--f-mono); font-size: 1.1rem; border-radius: 4px; }
.otp-row.cipher .c { background: var(--ink); color: var(--paper); font-weight: 600; }
.otp-row .c.k { color: var(--lamp-ink); background: var(--lamp-wash); }
.otp-row .c.p { color: var(--ink); background: var(--inset); }
.otp-row .tag { font-size: .88rem; color: var(--ink-3); font-style: italic; padding-left: .5rem; }
.otp-pair { display: grid; gap: .25rem; padding: .6rem 0; border-top: 1px dashed var(--rule); }
@media (max-width: 520px) {
  .otp-row { grid-template-columns: 5.2rem repeat(6, minmax(0, 1.9rem)); }
  .otp-row .tag { grid-column: 1 / -1; padding-left: 0; }
}

/* ---------- Enigma simulator ---------- */
.enigma-layout { display: grid; gap: 1.2rem; outline: none; }
@media (min-width: 1000px) { .enigma-layout { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; } }
.enigma-layout:focus-visible { box-shadow: inset 0 0 0 2px var(--lamp); border-radius: 0 0 var(--radius) var(--radius); }
.enigma-diagram { min-width: 0; }
.enigma-diagram svg { min-width: 520px; }
.en-box { fill: var(--inset); stroke: var(--rule); stroke-width: 1; }
.en-band { fill: var(--panel); }
.en-wires { fill: none; stroke: var(--ink-3); stroke-width: .8; opacity: .38; transition: opacity .16s; }
.en-wires.fade { opacity: .05; }
.en-plugwires { fill: none; stroke: var(--ink-3); stroke-width: .8; opacity: .45; }
.en-refl { fill: none; stroke: var(--ink-3); stroke-width: .9; opacity: .5; }
.en-letter { font-size: 10.5px; fill: var(--ink-2); font-weight: 500; }
.en-keyletter { font-size: 12.5px; fill: var(--ink); font-weight: 600; cursor: pointer; }
.en-keyhit { fill: transparent; cursor: pointer; }
.en-keyhit:hover { fill: var(--lamp-wash); }
.en-path-f { fill: none; stroke: var(--lamp); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px var(--lamp-glow)); }
.en-path-r { fill: none; stroke: var(--wire); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.en-head { font-size: 11px; letter-spacing: .14em; fill: var(--ink-2); font-weight: 600; }
.en-sub { font-size: 10px; letter-spacing: .08em; fill: var(--ink-3); }
.en-win { fill: var(--bone); stroke: var(--ink-3); stroke-width: 1; }
.en-winletter { font-size: 17px; font-weight: 700; fill: var(--bone-ink); }
.en-pill-in { fill: var(--lamp); }
.en-pill-out { fill: var(--wire); }
.en-keyletter.on { fill: var(--paper); }
.en-row0 { fill: var(--lamp-wash); }

.en-console { padding: clamp(.7rem, 3vw, 1rem); display: grid; gap: .8rem; min-width: 0; }
.board { display: grid; gap: .42rem; justify-items: center; }
.board-row { display: flex; gap: clamp(.2rem, 1vw, .38rem); justify-content: center; }
.board-row:nth-child(2) { padding-left: 1.1rem; }
.bulb, .key {
  width: clamp(1.5rem, 6.8vw, 2.2rem); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--f-label); font-weight: 600;
  font-size: clamp(.8rem, 3vw, 1rem); user-select: none;
}
.bulb { background: #2b3038; color: #5e6570; box-shadow: inset 0 1px 3px #0009; transition: background .3s, color .3s, box-shadow .3s; }
.bulb.on { background: radial-gradient(circle at 50% 40%, #fff3d0, #ffc24d 60%, #e39410); color: #3b2600; box-shadow: 0 0 16px 4px var(--lamp-glow); transition: none; }
.key {
  background: radial-gradient(circle at 50% 35%, #2b303a, #0f1217 75%); color: var(--machine-fg); cursor: pointer;
  border: 2px solid #9aa0a8; box-shadow: 0 3px 0 #05060899; transition: transform .08s, box-shadow .08s;
  appearance: none; padding: 0;
}
.key:hover { border-color: #c9ced4; }
.key.down, .key:active { transform: translateY(2px); box-shadow: 0 1px 0 #050608; border-color: var(--lamp); }
.board-sep { height: 1px; background: #ffffff14; margin: .25rem 0; }
.kb-status { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .85rem; }
.kb-status .dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--machine-dim); margin-right: .45rem; vertical-align: middle; }
.enigma-layout:focus-within .kb-status .dot, .enigma-layout.armed .kb-status .dot { background: var(--lamp); box-shadow: 0 0 8px var(--lamp-glow); }

.trace { display: flex; flex-wrap: wrap; gap: .35rem .25rem; align-items: center; min-height: 3.4rem; }
.trace .st { display: grid; justify-items: center; padding: .15rem .35rem .2rem; border-radius: 4px; border: 1px solid var(--rule); min-width: 2.1rem; }
.trace .st small { font-family: var(--f-label); font-size: .64rem; letter-spacing: .1em; color: var(--ink-3); line-height: 1.2; }
.trace .st b { font-family: var(--f-mono); font-size: 1rem; line-height: 1.2; }
.trace .st.f { border-color: var(--lamp); background: var(--lamp-wash); }
.trace .st.r { border-color: var(--wire); background: var(--wire-wash); }
.trace .ar { color: var(--ink-3); font-size: .85rem; }
.tapes { display: grid; gap: .5rem; }
.tape-line { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: .6rem; align-items: baseline; }
.tape-text { font-family: var(--f-mono); font-size: 1rem; letter-spacing: .05em; overflow-wrap: anywhere; min-height: 1.5em; }
.tape-text.out { color: var(--lamp-ink); font-weight: 600; }
.settings { border-top: 1px solid var(--rule); padding-top: .8rem; }
.settings summary { cursor: pointer; font-family: var(--f-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: .85rem; color: var(--ink-2); }
.settings summary span { font-weight: 500; color: var(--ink-3); letter-spacing: .04em; text-transform: none; font-family: var(--f-mono); font-size: .8rem; margin-left: .4rem; }
.settings-grid { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: .45rem .5rem; align-items: center; margin-top: .8rem; }
.settings-grid .lbl { font-size: .72rem; }
.settings-grid select { width: 100%; }
.settings-grid .colhead { text-align: center; }

/* ---------- double step ---------- */
.odo { display: flex; gap: 1.1rem; align-items: flex-end; flex-wrap: wrap; }
.drum { display: grid; justify-items: center; gap: .35rem; }
.drum-win { width: 3.3rem; height: 7.2rem; overflow: hidden; position: relative; border-radius: 8px; background: var(--bone); box-shadow: inset 0 0 0 2px #0007, 0 0 0 4px var(--machine-2); }
.drum-win::before, .drum-win::after { content: ""; position: absolute; left: 0; right: 0; height: 2.4rem; z-index: 2; pointer-events: none; }
.drum-win::before { top: 0; background: linear-gradient(#000a, #0000); }
.drum-win::after { bottom: 0; background: linear-gradient(#0000, #000a); }
.drum-strip { position: absolute; left: 0; right: 0; top: 0; }
.drum-strip div { height: 2.4rem; display: grid; place-items: center; font-family: var(--f-label); font-weight: 700; font-size: 1.5rem; color: var(--bone-ink); position: relative; }
.drum-strip div.notch::after { content: ""; position: absolute; right: .3rem; top: 50%; width: .42rem; height: .42rem; margin-top: -.21rem; border-radius: 50%; background: var(--pencil); }
.drum .lbl { color: var(--ink-2); }
.drum-mark { position: absolute; left: 0; right: 0; top: 2.4rem; height: 2.4rem; border-block: 1.5px solid var(--lamp); z-index: 3; pointer-events: none; }
.drum .pawl { font-family: var(--f-label); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); height: 1.2rem; }
.drum .pawl.go { color: var(--lamp-ink); font-weight: 700; }
.odo-log { font-variant-numeric: tabular-nums; border-collapse: collapse; width: 100%; font-size: .95rem; }
.odo-log th { font-family: var(--f-label); font-weight: 600; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); text-align: left; padding: .25rem .6rem .25rem 0; border-bottom: 1px solid var(--rule); }
.odo-log td { padding: .28rem .6rem .28rem 0; border-bottom: 1px solid var(--rule); font-family: var(--f-mono); }
.odo-log td.wins { letter-spacing: .25em; font-weight: 600; }
.odo-log .m { color: var(--lamp-ink); }
.odo-log tr.double td { background: var(--pencil-wash); }
.flag { font-family: var(--f-label); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--pencil); border: 1px solid var(--pencil); border-radius: 3px; padding: .05rem .3rem; margin-left: .4rem; white-space: nowrap; }
.log-wrap { max-height: 16rem; overflow-y: auto; }

/* ---------- chord diagram ---------- */
.chord { fill: none; stroke: var(--ink-3); stroke-width: 1.1; opacity: .55; }
.chord.sel { stroke: var(--lamp); stroke-width: 2.8; opacity: 1; }
.chord-dot { fill: var(--ink-3); }
.chord-dot.sel { fill: var(--lamp); }
.chord-letter { font-size: 14px; font-weight: 600; fill: var(--ink); cursor: pointer; }
.chord-letter.sel { fill: var(--lamp-ink); }
.chord-hit { fill: transparent; cursor: pointer; }
.chord-hit:hover { fill: var(--lamp-wash); }
.cycles { font-family: var(--f-mono); font-size: .95rem; line-height: 1.8; color: var(--ink-2); overflow-wrap: anywhere; }
.cycles span.sel { color: var(--ink); background: var(--lamp-wash); border-radius: 3px; box-shadow: 0 0 0 1px var(--lamp); }
.chords-g { transition: opacity .25s; }

/* ---------- key space ---------- */
.ks-rows { display: grid; gap: .1rem; }
.ks-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem; padding: .7rem 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.ks-row .what { font-size: 1.02rem; }
.ks-row .what small { display: block; color: var(--ink-3); font-size: .88rem; font-style: italic; }
.ks-row .n { font-family: var(--f-label); font-weight: 600; font-size: 1.35rem; font-variant-numeric: tabular-nums; text-align: right; }
.ks-row.total { border-bottom: 0; border-top: 2px solid var(--ink); }
.ks-row.total .n { color: var(--lamp-ink); font-size: 1.6rem; }
.ks-row .n small { display: block; font-size: .8rem; color: var(--ink-3); font-weight: 500; letter-spacing: .04em; }

/* ---------- crib dragging ---------- */
.crib-stage { position: relative; padding: .4rem 0 .6rem; }
.crib-rows { position: relative; font-family: var(--f-mono); font-size: 1.02rem; }
.crib-line { display: flex; }
.crib-line span { width: 1.45rem; flex: none; height: 1.9rem; display: grid; place-items: center; }
.crib-line.cipher span { color: var(--ink); }
.crib-line.cipher span.under { background: var(--inset); }
.crib-line.idx span { font-family: var(--f-label); font-size: .7rem; color: var(--ink-3); height: 1.1rem; }
.crib-bar { position: absolute; top: 0; left: 0; display: flex; cursor: grab; touch-action: none; transition: transform .22s cubic-bezier(.3, .7, .3, 1); }
.crib-bar.dragging { transition: none; cursor: grabbing; }
.crib-bar span { width: 1.45rem; height: 1.9rem; display: grid; place-items: center; background: var(--lamp-wash); color: var(--lamp-ink); font-weight: 600; border-top: 2px solid var(--lamp); }
.crib-bar span.clash { background: var(--pencil); color: var(--paper); border-top-color: var(--pencil); }
.crib-bar span.fit { background: var(--wire-wash); color: var(--wire); border-top-color: var(--wire); }
.crib-line.cipher span.clash { color: var(--pencil); font-weight: 700; box-shadow: inset 0 -2px 0 var(--pencil); }
.posmap { display: flex; flex-wrap: wrap; gap: 3px; }
.posmap button { width: 1.05rem; height: 1.3rem; border: 0; border-radius: 2px; padding: 0; cursor: pointer; background: var(--inset); }
.posmap button.x { background: var(--pencil); opacity: .75; }
.posmap button.ok { background: var(--wire); opacity: .8; }
.posmap button.cur { outline: 2px solid var(--ink); outline-offset: 1px; }
.crib-status { font-size: 1rem; min-height: 1.6em; }
.legend { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .88rem; color: var(--ink-2); }
.legend i { display: inline-block; width: .8rem; height: .8rem; border-radius: 2px; margin-right: .35rem; vertical-align: -.05rem; font-style: normal; }

/* ---------- menu graph ---------- */
.mg-edge { stroke: var(--ink-3); stroke-width: 1.4; fill: none; }
.mg-edge.loop { stroke: var(--lamp); stroke-width: 2.6; }
.mg-edge.self { stroke: var(--pencil); stroke-width: 2.4; }
.mg-node { fill: var(--panel); stroke: var(--ink); stroke-width: 1.4; }
.mg-node.loop { stroke: var(--lamp-ink); stroke-width: 2; fill: var(--lamp-wash); }
.mg-letter { font-size: 15px; font-weight: 700; fill: var(--ink); }
.mg-step { fill: var(--panel); stroke: var(--rule); }
.mg-steptext { font-size: 10px; fill: var(--ink-2); font-weight: 600; }

/* ---------- Lorenz: tape ---------- */
.tape-bg { fill: var(--tape); stroke: var(--tape-edge); stroke-width: 1; }
.tape-hole { fill: var(--hole); }
.tape-dot { fill: var(--tape-edge); }
.tape-feed { fill: var(--tape-edge); }
.tape-char { font-family: var(--f-mono) !important; font-size: 12px; fill: var(--ink); }
.tape-rowlbl { font-size: 10px; fill: var(--ink-3); letter-spacing: .08em; }
.tape-col.hl rect.colhl { fill: var(--lamp-wash); }
.colhl { fill: transparent; }
.ita-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.2rem, 1fr)); gap: .35rem; }
.ita {
  display: grid; grid-template-columns: auto auto; align-items: center; justify-content: center; gap: .4rem;
  padding: .35rem .3rem; border: 1px solid var(--rule); border-radius: 5px; background: var(--panel); cursor: pointer; color: var(--ink);
}
.ita:hover, .ita.hl { border-color: var(--lamp-ink); background: var(--lamp-wash); }
.ita b { font-family: var(--f-mono); font-size: 1rem; font-weight: 600; }
.ita .dots { display: grid; gap: 2px; }
.ita .dots i { width: .38rem; height: .38rem; border-radius: 50%; background: var(--rule); display: block; }
.ita .dots i.on { background: var(--ink); }
.ita .dots i.gap { height: .15rem; background: transparent; }
.ita.ctrl b { color: var(--wire); }

/* XOR */
.xor-table { display: grid; grid-template-columns: repeat(3, auto); gap: .25rem .9rem; font-family: var(--f-mono); font-size: 1.05rem; width: max-content; }
.xor-table .h { font-family: var(--f-label); font-size: .75rem; letter-spacing: .12em; color: var(--ink-3); text-transform: uppercase; }
.xor-table .hl { background: var(--lamp-wash); border-radius: 3px; }
.xor-math { font-family: var(--f-mono); font-size: .98rem; line-height: 1.7; }
.xor-math .row { display: grid; grid-template-columns: 2.4rem 1.6rem repeat(5, 1.3rem); align-items: center; }
.xor-math .row.res { border-top: 1px solid var(--ink); }
.xor-math .b1 { color: var(--ink); font-weight: 600; }
.xor-math .b0 { color: var(--ink-3); }

/* wheels */
.lz-rim { fill: var(--inset); stroke: var(--ink-3); stroke-width: 1; }
.lz-hub { fill: var(--panel); stroke: var(--rule); stroke-width: 1; }
.lz-cam1 { fill: var(--ink); }
.lz-cam0 { fill: var(--ink-3); opacity: .45; }
.lz-reader { fill: var(--lamp); }
.lz-reader.psi { fill: var(--wire); }
.lz-reader.mu { fill: var(--ink-2); }
.lz-size { font-size: 11px; fill: var(--ink-3); letter-spacing: .06em; }
.lz-bit { font-size: 22px; font-weight: 700; }
.lz-bit.chi { fill: var(--lamp-ink); }
.lz-bit.psi { fill: var(--wire); }
.lz-bit.mu { fill: var(--ink-2); }
.lz-name { font-size: 13px; fill: var(--ink); font-weight: 600; font-family: var(--f-display) !important; font-style: italic; }
.lz-sum { font-family: var(--f-mono) !important; font-size: 13px; fill: var(--ink-2); }
.lz-sum-k { font-family: var(--f-mono) !important; font-size: 15px; font-weight: 700; fill: var(--ink); }
.lz-drive { stroke: var(--rule); stroke-width: 2; fill: none; stroke-dasharray: 5 4; }
.lz-drive.on { stroke: var(--lamp); stroke-dasharray: none; }
.lz-drive-lbl { font-size: 11px; letter-spacing: .1em; fill: var(--ink-3); }
.lz-drive-lbl.on { fill: var(--lamp-ink); font-weight: 700; }
#lz-svg { min-width: 600px; }
#lz-tapes { min-width: 560px; }
.rect-note { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--ink-2); }

/* depth */
.depth-stage { font-family: var(--f-mono); font-size: 1rem; }
.depth-line { display: flex; }
.depth-line span { width: 1.4rem; flex: none; height: 1.8rem; display: grid; place-items: center; }
.depth-line.mix span { color: var(--ink-2); }
.depth-line.mix span.zero { color: var(--ink-3); }
.depth-line.guess span.g { background: var(--lamp-wash); color: var(--lamp-ink); font-weight: 600; border-top: 2px solid var(--lamp); }
.depth-line.reveal span.r { background: var(--wire-wash); color: var(--wire); font-weight: 600; border-bottom: 2px solid var(--wire); }
.depth-lbl { font-family: var(--f-label); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); height: 1.8rem; display: flex; align-items: center; white-space: nowrap; }
.gk { text-transform: none; letter-spacing: 0; }
.depth-status { margin: 0; font-size: 1.02rem; line-height: 1.5; }
.depth-status b { font-family: var(--f-mono); letter-spacing: .06em; }
.depth-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .8rem; }

/* rectangle & colossus */
.rect-canvas, .heat-canvas { display: block; max-width: 100%; image-rendering: pixelated; border-radius: 3px; }
.heat-wrap { position: relative; width: max-content; max-width: 100%; }
.big-readout { font-family: var(--f-label); font-size: 1.05rem; letter-spacing: .03em; }
.big-readout b { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* coda */
table.broke { width: 100%; border-collapse: collapse; font-size: 1rem; }
table.broke th { font-family: var(--f-label); font-weight: 600; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); text-align: left; padding: .5rem 1rem .5rem 0; border-bottom: 1px solid var(--ink); }
table.broke td { padding: .75rem 1rem .75rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; line-height: 1.45; }
table.broke td:first-child { font-weight: 500; white-space: nowrap; }
.table-wrap { overflow-x: auto; }

.colophon { margin: 5rem 0 3rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); font-size: .92rem; color: var(--ink-3); max-width: var(--measure); line-height: 1.5; }
.colophon p { margin: 0 0 .6rem; }

noscript p { background: var(--pencil-wash); padding: .8rem 1rem; border-radius: 6px; }

/* ---------- M4: fourth rotor ---------- */
[hidden] { display: none !important; }
.fig-head .model-switch { margin-left: auto; }
.en-box.greek { fill: var(--pencil-wash); stroke: var(--pencil); stroke-dasharray: 3 3; }
.en-fixed { fill: var(--pencil); }
.settings-grid.m4 { grid-template-columns: auto repeat(4, minmax(0, 1fr)); }
.m4-note { display: grid; gap: .6rem; justify-items: start; padding: .8rem .9rem; border-radius: 6px; background: var(--pencil-wash); border: 1px dashed var(--pencil); }
.m4-note p { margin: 0; font-size: .98rem; line-height: 1.45; }
.tiles { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 5px; max-width: 26rem; }
.tile { aspect-ratio: 1; border-radius: 3px; border: 1px dashed var(--rule); background: transparent; transition: background .2s, border-color .2s, box-shadow .2s; }
.tile.needed { border: 1px solid var(--ink-3); background: var(--inset); }
.tile.on { background: var(--pencil); border-color: var(--pencil); }
.tile.needed.on:first-child { background: var(--lamp); border-color: var(--lamp-ink); }

/* ---------- Fig. 7 left column ---------- */
.enigma-left { display: grid; gap: 1rem; align-content: start; min-width: 0; }

/* ---------- Fig. 13: the Bombe ---------- */
.bombe { padding: clamp(.8rem, 3vw, 1.2rem); display: grid; gap: 1rem; align-content: start; transition: box-shadow .3s; min-width: 0; }
.bombe.halted { box-shadow: var(--shadow), 0 0 0 2px var(--lamp), 0 0 28px -6px var(--lamp-glow); }
.bombe-top { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.bombe-order { font-family: var(--f-label); font-weight: 700; font-size: 1.1rem; letter-spacing: .08em; color: var(--bone); }
.scramblers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem .5rem; }
.scrambler { display: grid; justify-items: center; gap: .25rem; }
.trio { display: flex; gap: 3px; }
.drum-face {
  width: clamp(1.35rem, 5.2vw, 1.85rem); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: var(--bone); color: var(--bone-ink); font-family: var(--f-label); font-weight: 700; font-size: clamp(.7rem, 2.6vw, .95rem);
  border: 3px solid var(--machine-dim); box-shadow: 0 1px 0 #0008;
}
.drum-face[data-rotor="I"] { border-color: var(--drum-1); }
.drum-face[data-rotor="II"] { border-color: var(--drum-2); }
.drum-face[data-rotor="III"] { border-color: var(--drum-3); }
.drum-face[data-rotor="IV"] { border-color: var(--drum-4); }
.drum-face[data-rotor="V"] { border-color: var(--drum-5); }
.scrambler .edge { font-family: var(--f-label); font-size: .72rem; letter-spacing: .06em; color: var(--machine-dim); white-space: nowrap; }
.register { display: grid; gap: .45rem; }
.register .lbl b { color: var(--bone); font-size: 1rem; }
.reg-lamps { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 3px; }
.reg { aspect-ratio: 1; max-width: 1.7rem; border-radius: 4px; display: grid; place-items: center; font-family: var(--f-label); font-weight: 600; font-size: .7rem; background: #2b3038; color: #5e6570; }
.reg.on { background: #ffc24d; color: #3b2600; box-shadow: 0 0 6px var(--lamp-glow); }
.bombe-progress { height: 3px; background: var(--machine-2); border-radius: 2px; overflow: hidden; }
.bombe-progress span { display: block; height: 100%; background: var(--lamp); transform-origin: 0 50%; transform: scaleX(0); }
.bombe-status { font-size: .92rem; line-height: 1.5; color: var(--machine-fg); min-height: 3em; font-variant-numeric: tabular-nums; }
.bombe-status b { font-family: var(--f-label); font-weight: 700; letter-spacing: .06em; }
.bombe-status .amber { color: var(--lamp); }
.orders { display: grid; grid-template-columns: 1.7rem repeat(12, minmax(0, 1fr)); gap: 3px; align-items: center; margin-top: .3rem; }
.orow-lbl { font-family: var(--f-display); font-style: italic; color: var(--ink-2); font-size: .95rem; }
.ocell { height: 1.8rem; min-width: 0; padding: 0; border: 1px solid var(--rule); border-radius: 3px; background: transparent; color: var(--ink-3); font-family: var(--f-label); font-size: .64rem; letter-spacing: .02em; cursor: pointer; white-space: nowrap; overflow: hidden; }
.ocell:hover { border-color: var(--ink-3); color: var(--ink); }
.ocell.none { background: var(--inset); }
.ocell.stop { background: var(--lamp); border-color: var(--lamp); color: var(--bone-ink); font-weight: 700; }
.ocell.found { background: var(--wire); border-color: var(--wire); color: var(--paper); font-weight: 700; }
.ocell.false { background: var(--pencil); border-color: var(--pencil); color: var(--paper); }
.ocell.running { outline: 2px solid var(--lamp); outline-offset: 1px; color: var(--ink); }
@media (max-width: 560px) { .ocell { font-size: 0; height: 1.3rem; } }
.stops { display: grid; gap: .5rem; }
.stop { border: 1px solid var(--lamp); border-radius: 6px; padding: .55rem .75rem; background: var(--lamp-wash); }
.stop.found { border-color: var(--wire); background: var(--wire-wash); }
.stop.false { border-color: var(--pencil); background: var(--pencil-wash); }
.stop-head { display: flex; justify-content: space-between; align-items: center; gap: .4rem .8rem; flex-wrap: wrap; font-size: .98rem; }
.stop-head small { display: block; color: var(--ink-2); font-size: .85rem; }
.stop-check { margin: .45rem 0 0; font-size: .92rem; line-height: 1.45; }
.stop-check p { margin: .25rem 0 0; }
.dec { font-family: var(--f-mono); font-size: .88rem; letter-spacing: .04em; overflow-wrap: anywhere; color: var(--ink); }
.bombe-result { margin: 0 1.2rem 1.2rem; padding: 1rem 1.1rem; border-radius: 8px; border: 1px solid var(--wire); background: var(--wire-wash); display: grid; gap: .6rem; }
.bombe-result > .lbl { color: var(--wire); }
.key-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .6rem 1.2rem; }
.key-grid div { display: grid; gap: .15rem; }
.key-grid b { font-family: var(--f-label); font-size: 1.25rem; font-weight: 700; letter-spacing: .06em; }
.key-grid b.mono { font-family: var(--f-mono); font-size: 1rem; letter-spacing: .04em; overflow-wrap: anywhere; }
.bombe-result p { margin: 0; }
@media (max-width: 560px) { .bombe-result { margin: 0 .9rem .9rem; } }

/* ---------- figure reset button ---------- */
.reset-btn { margin-left: auto; font-size: .76rem; padding: .28rem .55rem .24rem; border-color: var(--rule); color: var(--ink-2); background: transparent; }
.reset-btn:hover { color: var(--ink); border-color: var(--ink-3); }
.reset-btn .ico { font-size: .95rem; }
.fig-head .model-switch + .reset-btn { margin-left: .5rem; }

/* ---------- Fig. 20: Colossus ---------- */
.colossus { padding: clamp(.8rem, 3vw, 1.2rem); display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; align-content: start; min-width: 0; }
.col-top { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.col-run { font-family: var(--f-label); font-weight: 700; font-size: .95rem; letter-spacing: .08em; color: var(--bone); text-transform: uppercase; }
.col-tape-wrap, .col-canvas-wrap { min-width: 0; overflow: hidden; }
.col-tape { display: block; border-radius: 3px; }
.col-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.col-formula { font-family: var(--f-display); font-style: italic; font-size: 1.08rem; color: var(--machine-fg); margin-top: .2rem; }
.col-counter { display: grid; justify-items: end; gap: .15rem; }
.col-counter b { font-family: var(--f-mono); font-weight: 600; font-size: 1.7rem; line-height: 1; color: var(--lamp); letter-spacing: .08em; text-shadow: 0 0 10px var(--lamp-glow); font-variant-numeric: tabular-nums; }
.col-view { display: grid; gap: .45rem; min-width: 0; }
.col-canvas { display: block; max-width: 100%; image-rendering: pixelated; }
.col-wheels { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.col-wheel { display: grid; justify-items: center; padding: .25rem 0 .3rem; border-radius: 4px; background: var(--machine-2); border: 1px solid #ffffff14; }
.col-wheel small { font-family: var(--f-display); font-style: italic; font-size: .8rem; color: var(--machine-dim); }
.col-wheel b { font-family: var(--f-mono); font-size: .95rem; color: var(--machine-dim); letter-spacing: .06em; }
.col-wheel.set b { color: var(--lamp); text-shadow: 0 0 8px var(--lamp-glow); }
.col-wheel.psi.set b { color: var(--wire); text-shadow: none; }
.col-wheel.mu.set b { color: var(--machine-fg); text-shadow: none; }
.col-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.col-step { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; grid-template-areas: "n what who" "n res res"; gap: 0 .6rem; align-items: center; padding: .45rem .6rem; border: 1px solid var(--rule); border-radius: 6px; }
.col-step .n { grid-area: n; font-family: var(--f-display); font-style: italic; font-size: 1.15rem; color: var(--ink-3); }
.col-step .what { grid-area: what; display: grid; min-width: 0; }
.col-step .what b { font-weight: 500; font-size: 1rem; }
.col-step .what small { color: var(--ink-3); font-size: .84rem; }
.col-step .who { grid-area: who; font-family: var(--f-label); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--rule); border-radius: 3px; padding: .05rem .35rem; }
.col-step .who.testery { border-style: dashed; }
.col-step .res { grid-area: res; font-family: var(--f-mono); font-size: .88rem; color: var(--wire); }
.col-step.running { border-color: var(--lamp); background: var(--lamp-wash); }
.col-step.running .n { color: var(--lamp-ink); }
.col-step.done { border-color: var(--wire); }
.col-step.done .n { color: var(--wire); }
.printout { font-family: var(--f-mono); font-size: .82rem; line-height: 1.55; background: var(--tape); border: 1px solid var(--tape-edge); border-radius: 4px; padding: .5rem .7rem; height: 11.5rem; overflow-y: auto; color: var(--ink); white-space: pre; }
.printout .pline.hd { margin-top: .35rem; font-weight: 600; color: var(--ink-2); }
.printout .pline.hd:first-child { margin-top: 0; }
.printout .pline.best { color: var(--wire); font-weight: 600; }
.col-result { margin: 0 1.2rem 1.2rem; padding: 1rem 1.1rem; border-radius: 8px; border: 1px solid var(--wire); background: var(--wire-wash); display: grid; gap: .6rem; }
.col-result > .lbl { color: var(--wire); }
.col-result p { margin: 0; }
.col-text { font-size: .86rem; line-height: 1.6; max-height: 9.5rem; overflow-y: auto; }
@media (max-width: 560px) { .col-result { margin: 0 .9rem .9rem; } .col-wheels { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
#col-axis { text-transform: none; letter-spacing: .04em; }

/* ---------- Chapter VI: key exchange ---------- */
.dh-grid { display: grid; gap: 1rem; }
@media (min-width: 860px) { .dh-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr); } }
.party { border: 1px solid var(--rule); border-radius: 8px; padding: .9rem 1rem 1rem; display: grid; gap: .6rem; align-content: start; background: var(--paper); min-width: 0; }
.party.line { border-style: dashed; background: transparent; }
.party-name { margin: 0 0 .1rem; font-family: var(--f-display); font-weight: 500; font-size: 1.3rem; line-height: 1.2; }
.party-name small { display: block; font-family: var(--f-label); font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .05rem .7rem; align-items: baseline; }
.kv .k { font-size: .95rem; color: var(--ink-2); line-height: 1.35; }
.kv .k sup { font-size: .7em; }
.kv b { justify-self: end; display: inline-flex; align-items: center; gap: .4rem; font-family: var(--f-mono); font-weight: 600; font-size: 1.05rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kv .tag { grid-column: 1 / -1; font-family: var(--f-label); font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); line-height: 1.3; }
.kv.secret b, .kv.secret .tag { color: var(--pencil); }
.kv.shared b, .kv.shared .tag { color: var(--wire); }
.party input[type="range"] { margin: -.2rem 0 .2rem; }
.sw { width: .8rem; height: .8rem; border-radius: 50%; display: inline-block; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.flow { display: flex; align-items: center; gap: .45rem; font-family: var(--f-mono); font-size: .95rem; }
.flow b { font-weight: 600; white-space: nowrap; }
.flow .ln { flex: 1; height: 1px; background: var(--ink-3); min-width: .8rem; }
.flow .head { color: var(--ink-3); font-size: .7rem; }
.flow.left { flex-direction: row-reverse; }
.eve-out { margin: 0; font-size: .94rem; line-height: 1.5; color: var(--ink-2); }
.dh-sym { display: grid; gap: .8rem; border-top: 1px solid var(--rule); padding-top: 1rem; }

/* ---------- Fig. 22: from the air to the commander ---------- */
.legend .lg-people { background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink-3); }
.legend .lg-machine { background: var(--lamp); }
.legend .lg-sim { background: transparent; box-shadow: inset 0 0 0 1.5px var(--wire); border-radius: 50%; }
.lane { display: grid; gap: .5rem; min-width: 0; }
.lane-head { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.lane-head b { font-family: var(--f-display); font-weight: 500; font-size: 1.25rem; }
.lane-head span { font-family: var(--f-label); font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.stages { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.stages li { position: relative; display: flex; min-width: 0; }
.stage {
  flex: 1; min-width: 0; display: grid; gap: .15rem; align-content: start; text-align: left; cursor: pointer;
  padding: .55rem .6rem .6rem; border-radius: 6px; border: 1px solid var(--ink-3); background: var(--paper); color: var(--ink);
  font: inherit; transition: background .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.stage:hover { border-color: var(--ink); }
.stage.by-machine { background: var(--lamp-wash); border-color: var(--lamp); }
.stage .st-n { font-family: var(--f-display); font-style: italic; font-size: .95rem; color: var(--ink-3); line-height: 1; }
.stage .st-t { font-family: var(--f-label); font-weight: 700; font-size: .98rem; letter-spacing: .03em; line-height: 1.15; }
.stage .st-w { font-family: var(--f-label); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); line-height: 1.2; }
.stage .st-out { font-size: .82rem; line-height: 1.3; color: var(--ink-2); border-top: 1px dashed var(--rule); padding-top: .3rem; margin-top: .2rem; }
.stage.sim .st-n::after { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-left: .35rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--wire); vertical-align: .05rem; }
.stage.done { opacity: .62; }
.stage.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); opacity: 1; }
.stage.by-machine.on { border-color: var(--lamp-ink); box-shadow: 0 0 0 2px var(--lamp), 0 0 18px -4px var(--lamp-glow); }
@media (min-width: 900px) {
  .stages { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 1.1rem; }
  .stages li + li::before { content: "→"; position: absolute; left: -1.02rem; top: 1.4rem; color: var(--ink-3); font-size: .9rem; }
}
@media (max-width: 899px) {
  .stages li { padding-left: 1.3rem; }
  .stages li::before { content: ""; position: absolute; left: .45rem; top: 0; bottom: -.55rem; border-left: 1px solid var(--ink-3); }
  .stages li:last-child::before { bottom: 50%; }
  .stages li::after { content: ""; position: absolute; left: .2rem; top: 1rem; width: .55rem; height: .55rem; border-radius: 50%; background: var(--ink-3); }
  .stage { grid-template-columns: auto minmax(0, 1fr); column-gap: .5rem; }
  .stage .st-n { grid-row: span 3; padding-top: .1rem; }
}
.pipe-detail { border-top: 1px solid var(--rule); padding-top: 1rem; display: grid; gap: .45rem; max-width: 46rem; min-height: 12.5rem; align-content: start; }
.pipe-detail h4 { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: 1.45rem; line-height: 1.2; }
.pipe-detail p { margin: 0; line-height: 1.5; }
.pd-head { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.pd-kind { font-family: var(--f-label); font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .1rem .45rem; border-radius: 3px; border: 1px solid var(--ink-3); color: var(--ink-2); }
.pd-kind.by-machine { background: var(--lamp); border-color: var(--lamp); color: var(--bone-ink); }
.pd-where { font-style: italic; color: var(--ink-2); }
.pd-out { font-size: 1.02rem; }
.pd-out .lbl { color: var(--lamp-ink); margin-right: .2rem; }
.pd-fig { font-size: .95rem; color: var(--wire); }
.pd-fig a { color: var(--wire); }
.rect-wrap { min-width: 0; } /* the rectangle always fits: columns narrow instead of scrolling */