/* The lab in the module look of the start page: squared paper, Red Hat, quarter discs, a K for the menu.
   Built by the build script from three parts: this shell, the experiments' own styles, the module finish.
   Colours come as variables, so every experiment follows light and dark mode. The lab lives behind the portal
   on the start page, so it is always the blue night: site.js keeps it in dark mode, and dark here is navy. */

:root,
html.theme-light {
  --bg: #f3f3f1;
  --surface: #f3f3f1;
  --text: #141414;
  --muted: #62625d;
  --accent: #2f7bd2;
  --accent-light: #5b9cf0;
  --yellow: #f2c72e;
  --border: rgba(20, 20, 20, 0.16);
  --line: rgba(20, 20, 20, 0.08);
  --serif: "Red Hat Display", "Red Hat Text", system-ui, sans-serif;
  --sans: "Red Hat Text", system-ui, sans-serif;
  --mono: "Red Hat Mono", ui-monospace, monospace;
  --hand: "Reenie Beanie", "Bradley Hand", cursive;
  --radius: 0px;
  --radius-lg: 0px;
  --glow: none;
  --glow-strong: none;
  --cell: clamp(16px, 3.1vw, 46px);
  --head: 64px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) {
    --bg: #0d1f4a; --surface: #12285c; --text: #eef2ff; --muted: #b8c7ec; --accent: #8ab8ff; --accent-light: #b3d0ff;
    --border: rgba(238, 242, 255, 0.22); --line: rgba(238, 242, 255, 0.07); color-scheme: dark;
  }
}
html.theme-dark {
  --bg: #0d1f4a; --surface: #12285c; --text: #eef2ff; --muted: #b8c7ec; --accent: #8ab8ff; --accent-light: #b3d0ff;
  --border: rgba(238, 242, 255, 0.22); --line: rgba(238, 242, 255, 0.07); color-scheme: dark;
}
#theme-toggle[hidden] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  font: 400 16px/1.7 var(--sans);
  color: var(--text);
  background-color: var(--bg);
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--yellow); color: #141414; }
a { color: inherit; text-decoration: none; }
img, svg, canvas { max-width: 100%; }
main { max-width: 1100px; margin: auto; padding: 0 clamp(16px, 3vw, 2rem); }
section { padding: 6rem 0; }
h2 { font: 700 clamp(1.8rem, 4vw, 2.6rem)/1.15 var(--sans); letter-spacing: -0.02em; margin-bottom: 1.5rem; color: var(--text); }
h3 { font: 700 1.05rem/1.3 var(--sans); margin-bottom: 0.6rem; }
p { color: var(--muted); max-width: 60ch; margin-bottom: 1.25rem; }
p:last-child { margin-bottom: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.section-tag { font: 400 13px var(--mono); color: var(--muted); text-transform: lowercase; margin-bottom: 0.85rem; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; animation: pulse 2.5s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.82); } }
.project-tag { font: 400 0.75rem var(--mono); color: var(--text); background: transparent; border: 1px solid var(--border); padding: 0.2rem 0.55rem; transition: border-color 0.2s; }
.project-tag:hover { border-color: var(--accent); }
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); }
.reveal.from-left { transform: translateX(-30px); }
.reveal.from-right { transform: translateX(30px); }
.reveal.visible { opacity: 1; transform: none; }

/* ---------- header: the logo, the sections of the start page, language and theme, the K on phones ---------- */
header {
  position: sticky; top: 0; z-index: 100;
  background: var(--bg);
  margin-top: calc(-1 * env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(clamp(16px, 3vw, 40px), env(safe-area-inset-right)) 0 max(clamp(16px, 3vw, 40px), env(safe-area-inset-left));
  transition: box-shadow 0.3s;
}
header.scrolled { box-shadow: 0 1px 0 var(--text); }
header nav { height: var(--head); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.logo { display: flex; align-items: center; gap: 10px; font: 400 12px var(--mono); color: var(--text); white-space: nowrap; }
.logo-mark { width: 26px; height: 26px; flex: none; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.logo-mark i { background: var(--text); transition: transform 0.5s cubic-bezier(0.5, 1.6, 0.4, 1), border-radius 0.4s; }
.logo-mark i:nth-child(2) { background: var(--accent); border-bottom-left-radius: 100%; }
.logo-mark i:nth-child(3) { background: var(--yellow); border-radius: 50%; transform: scale(0.8); }
.logo-mark i:nth-child(4) { clip-path: polygon(0 100%, 0 58%, 58% 0, 100% 0, 100% 42%, 42% 100%); }
.logo:hover .logo-mark i:nth-child(2) { transform: rotate(90deg); }
.logo:hover .logo-mark i:nth-child(4) { transform: rotate(90deg); }
#nav-list { list-style: none; display: flex; gap: 22px; margin-left: auto; }
#nav-list a { font: 400 12px var(--mono); color: var(--muted); transition: color 0.2s; }
#nav-list a:hover, #nav-list a.active { color: var(--text); }
#nav-list a.active { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 6px; }
#nav-list .nl-sq { display: none; }
.nav-controls { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
#lang-toggle, #theme-toggle { background: none; border: 0; font: 400 12px var(--mono); color: var(--muted); padding: 4px 6px; cursor: pointer; display: inline-flex; align-items: center; }
#lang-toggle:hover, #theme-toggle:hover { color: var(--text); }
#theme-toggle .icon-sun { display: none; }
html.theme-dark #theme-toggle .icon-sun { display: block; }
html.theme-dark #theme-toggle .icon-moon { display: none; }

/* the K: two lines that cross into a K when the menu opens */
.kmenu { display: none; position: relative; width: 44px; height: 44px; border: 0; background: var(--text); cursor: pointer; flex: none; z-index: 102; }
.kmenu i { position: absolute; left: 11px; height: 3px; width: 22px; background: var(--bg); transform-origin: 0 50%; transition: transform 0.45s cubic-bezier(0.5, 1.6, 0.4, 1), top 0.35s, left 0.35s, width 0.35s; }
.kmenu i:nth-child(1) { top: 16px; }
.kmenu i:nth-child(2) { top: 25px; }
.kmenu i:nth-child(3) { left: 13px; top: 11px; width: 3px; height: 22px; transform: scaleY(0); transform-origin: 50% 50%; }
.kmenu[aria-expanded="true"] i:nth-child(1) { left: 15px; top: 21px; width: 17px; transform: rotate(-40deg); }
.kmenu[aria-expanded="true"] i:nth-child(2) { left: 15px; top: 21px; width: 17px; transform: rotate(40deg); }
.kmenu[aria-expanded="true"] i:nth-child(3) { transform: scaleY(1); }

@media (max-width: 860px) {
  .kmenu { display: block; }
  #nav-list {
    position: fixed; inset: 0; z-index: 101; margin: 0; flex-direction: column; justify-content: center; gap: 4px;
    padding: 80px clamp(20px, 6vw, 48px) 40px;
    background-color: var(--bg);
    background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: var(--cell) var(--cell);
    clip-path: circle(0 at calc(100% - 38px) 38px); visibility: hidden;
    transition: clip-path 0.6s cubic-bezier(0.7, 0, 0.2, 1), visibility 0s 0.6s;
  }
  nav.open #nav-list { clip-path: circle(150% at calc(100% - 38px) 38px); visibility: visible; transition: clip-path 0.6s cubic-bezier(0.7, 0, 0.2, 1); }
  #nav-list li { opacity: 0; transform: translateX(-24px); transition: opacity 0.4s, transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 1); }
  nav.open #nav-list li { opacity: 1; transform: none; }
  nav.open #nav-list li:nth-child(2) { transition-delay: 0.05s; } nav.open #nav-list li:nth-child(3) { transition-delay: 0.1s; }
  nav.open #nav-list li:nth-child(4) { transition-delay: 0.15s; } nav.open #nav-list li:nth-child(5) { transition-delay: 0.2s; }
  nav.open #nav-list li:nth-child(6) { transition-delay: 0.25s; } nav.open #nav-list li:nth-child(7) { transition-delay: 0.3s; }
  #nav-list a { display: flex; align-items: center; gap: 16px; font: 700 clamp(34px, 9vw, 64px)/1.1 var(--sans); letter-spacing: -0.03em; color: var(--text); }
  #nav-list a.active { text-decoration: none; color: var(--accent); }
  #nav-list .nl-sq { display: block; flex: none; width: 0.55em; height: 0.55em; background: var(--text); }
  #nav-list li:nth-child(4n + 2) .nl-sq { border-top-left-radius: 100%; background: var(--accent); }
  #nav-list li:nth-child(4n + 3) .nl-sq { border-radius: 50%; background: var(--yellow); }
  #nav-list li:nth-child(4n) .nl-sq { clip-path: polygon(0 100%, 0 58%, 58% 0, 100% 0, 100% 42%, 42% 100%); }
  .nav-controls { position: relative; z-index: 102; }
  html.menu-open { overflow: hidden; }
}
@media (max-width: 520px) { .logo .d-name { display: none; } }
@media (prefers-reduced-motion: reduce) { #nav-list, #nav-list li, .kmenu i { transition: none !important; } }

/* ---------- footer ---------- */
footer { padding: 2.5rem clamp(16px, 3vw, 40px); border-top: 1px solid var(--text); background: var(--bg); font-family: var(--mono); }
.footer-inner { max-width: 1100px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.footer-name { font: 700 1.1rem var(--sans); color: var(--text); }
footer p { font-size: 0.8rem; color: var(--muted); margin: 0; max-width: none; }
.footer-impressum { font: 400 0.75rem var(--mono); color: var(--muted); transition: color 0.2s; }
.footer-impressum:hover { color: var(--accent); }


/* ================= the experiments ================= */
/* ── Lab ── */
.lab-intro {
  color: var(--muted);
  margin-top: -0.5rem;
  margin-bottom: 2rem;
}

.lab-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.lab-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition:
    border-color 0.25s,
    box-shadow 0.3s;
}

.lab-card:hover {
  border-color: var(--accent);
  box-shadow: 0 12px 36px rgba(26, 167, 59, 0.08);
}

.lab-card--wide {
  grid-column: 1 / -1;
}

.lab-card-head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.lab-card-head h3 {
  margin: 0;
}

.lab-num {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--accent);
  letter-spacing: 0.06em;
}

.lab-desc {
  font-size: 0.875rem;
  color: var(--muted);
  margin: 0;
}

.lab-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--muted);
  min-height: 1.2em;
}

.lab-stats b {
  color: var(--text);
  font-weight: 400;
}

.lab-quip {
  flex-basis: 100%;
  color: var(--accent);
}

/* reaction pad */
.lab-pad {
  height: 170px;
  border-radius: var(--radius-lg);
  border: 1px dashed var(--border);
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition:
    background 0.15s,
    border-color 0.2s,
    transform 0.1s;
  font: inherit;
}

.lab-pad:active {
  transform: scale(0.985);
}

.lab-pad-main {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.7rem;
}

.lab-pad-sub {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--muted);
}

.lab-pad.is-wait {
  background: rgba(229, 72, 77, 0.12);
  border-color: rgba(229, 72, 77, 0.5);
  border-style: solid;
}

.lab-pad.is-go {
  background: #1a9d4b;
  border-color: #1a9d4b;
  color: #fff;
  border-style: solid;
}

.lab-pad.is-early {
  animation: shake 0.35s;
}

.lab-pad.is-result .lab-pad-main {
  color: var(--accent);
}

@keyframes shake {
  25% {
    transform: translateX(-6px);
  }
  50% {
    transform: translateX(5px);
  }
  75% {
    transform: translateX(-3px);
  }
}

/* stroop */
.stroop-stage {
  height: 170px;
  border-radius: var(--radius-lg);
  border: 1px dashed var(--border);
  background: var(--bg);
  display: grid;
  place-items: center;
  position: relative;
  transition: box-shadow 0.25s;
}

.stroop-stage.flash-ok {
  animation: flashOk 0.35s;
}

.stroop-stage.flash-bad {
  animation: flashBad 0.35s;
}

@keyframes flashOk {
  from {
    box-shadow: inset 0 0 0 2px var(--accent);
  }
}

@keyframes flashBad {
  from {
    box-shadow: inset 0 0 0 2px #e5484d;
  }
}

.stroop-word {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 2.6rem;
  letter-spacing: 0.02em;
}

.stroop-meta {
  position: absolute;
  right: 0.8rem;
  bottom: 0.6rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--muted);
}

.stroop-start {
  font-family: var(--mono);
  font-size: 0.8rem;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s;
}

.stroop-start:hover {
  background: var(--accent);
  color: #fff;
}

.stroop-choices {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
}

.stroop-choices button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
  cursor: pointer;
  touch-action: manipulation;
  transition:
    transform 0.15s,
    border-color 0.2s;
}

.stroop-choices button:hover {
  border-color: var(--text);
  transform: translateY(-2px);
}

.stroop-choices i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--sw);
}

.stroop-choices kbd {
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--muted);
}

/* chaos */
#chaos-canvas {
  width: 100%;
  height: 340px;
  display: block;
  border-radius: var(--radius-lg);
  background: var(--bg);
  border: 1px dashed var(--border);
  cursor: crosshair;
}

@media (max-width: 760px) {
  .lab-grid {
    grid-template-columns: 1fr;
  }
  #chaos-canvas {
    height: 280px;
  }
}

/* toast for easter eggs */
.lab-toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translate(-50%, 150%);
  opacity: 0;
  z-index: 10001;
  max-width: calc(100vw - 2rem);
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--accent);
  box-shadow: var(--glow-strong);
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--text);
  transition:
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.3s;
  pointer-events: none;
}

.lab-toast.show {
  transform: translate(-50%, 0);
  opacity: 1;
}

/* ── Lab tiles (home teaser + /lab overview) ── */
.lab-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}

.lab-tile {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition:
    border-color 0.25s,
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s;
}

a.lab-tile:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(26, 167, 59, 0.1);
}

.lab-tile--soon {
  opacity: 0.55;
}

.lab-tile-viz {
  height: 120px;
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--border);
  background: radial-gradient(
    120% 90% at 50% 100%,
    rgba(26, 167, 59, 0.07),
    transparent 70%
  );
}

.lab-tile-viz svg {
  width: 150px;
  height: 100px;
  overflow: visible;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lab-tile-body {
  padding: 1.1rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
}

.lab-tile-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lab-tile-soon {
  font-family: var(--mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
}

.lab-tile h3 {
  margin: 0;
}

.lab-tile p {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0;
}

.lab-tile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 0.5rem;
}

.lab-all {
  display: inline-block;
  margin-top: 1.75rem;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--accent);
  transition: letter-spacing 0.25s;
}

.lab-all:hover {
  letter-spacing: 0.04em;
}

/* the tile stays paper-coloured in dark mode, so the pendulums keep fixed colours */
.tv-chaos line { stroke: #141414; stroke-width: 1.6; stroke-linecap: round; }
.tv-chaos .b line { stroke: #2f7bd2; }
.tv-chaos circle { fill: #141414; }
.tv-chaos .b circle { fill: #2f7bd2; }
.tv-chaos .pivot { fill: #62625d; }
.tv-chaos .tr { fill: none; stroke: #141414; stroke-width: 0.8; opacity: 0.3; stroke-linejoin: round; }
.tv-chaos .tr.b { stroke: #2f7bd2; opacity: 0.5; }

@keyframes tvSwing {
  from {
    transform: rotate(-38deg);
  }
  to {
    transform: rotate(38deg);
  }
}

@keyframes tvSwing2 {
  from {
    transform: rotate(-70deg);
  }
  to {
    transform: rotate(80deg);
  }
}

.tv-soon {
  stroke: var(--muted) !important;
}

a.lab-tile:hover .lab-tile-viz * {
  animation-duration: 1.2s;
}

@media (prefers-reduced-motion: reduce) {
  .lab-tile-viz * {
    animation: none !important;
  }
}

/* ── Lab pages ── */
.lab-hero,
.lab-page {
  padding-top: 7rem;
}

.lab-hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 7vw, 4rem);
  margin-bottom: 1rem;
}

.lab-back {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
  transition: color 0.2s;
}

.lab-back:hover {
  color: var(--accent);
}

.lab-page .lab-card {
  max-width: 820px;
}

.lab-page .lab-card-head h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 2rem;
}

.lab-page #chaos-canvas {
  height: 440px;
}

.lab-background {
  max-width: 820px;
  margin-top: 3rem;
}

.lab-background h2 {
  font-size: 1.4rem;
  margin-bottom: 0.75rem;
}

.lab-background p {
  color: var(--muted);
}

.lab-pager {
  max-width: 820px;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 0.85rem;
}

.lab-pager a {
  color: var(--accent);
}

.lab-tile-lock {
  font-family: var(--mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fbe9e4;
  background: #8c2a1a;
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
}
.lab-tile--locked.is-open .lab-tile-lock { background: var(--accent); color: #fff; }
.tv-rk-map { transition: filter 0.3s; }
.lab-tile--locked:not(.is-open) .tv-rk-map,
.lab-tile--locked:not(.is-open) .tv-rk-route { filter: blur(0.8px); opacity: 0.75; }
.tv-rk-seal { transform-origin: 60px 40px; transition: transform 0.35s, opacity 0.35s; }
.lab-tile--locked:hover .tv-rk-seal { transform: rotate(-12deg) scale(1.08); }
.lab-tile--locked.is-open .tv-rk-seal { opacity: 0; transform: scale(0.6); }

.lab-tile-new {
  font-family: var(--mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  background: var(--accent);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
}

.tv-camera path {
  transform-origin: 60px 40px;
  transform-box: view-box;
  animation: tvAperture 5s ease-in-out infinite;
}

@keyframes tvAperture {
  0%,
  100% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(40deg) scale(0.55);
  }
}

/* ── Lab: camera calculator ── */
.lab-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 6vw, 3rem);
  margin: 0;
}

.lab-page > .lab-desc {
  margin: 0.75rem 0 1.75rem;
  font-size: 1rem;
}

.lab-page--wide .lab-card {
  max-width: none;
}

/* bird chips */
.vf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.vf-chips button {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font: 0.85rem var(--sans);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  transition:
    border-color 0.2s,
    background 0.2s,
    transform 0.2s;
}

.vf-chips button small {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--muted);
}

.vf-chips button:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.vf-chips button.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.vf-chips button.on small {
  color: rgba(255, 255, 255, 0.8);
}

/* viewfinder */
.vf {
  margin-bottom: 1.5rem;
}

.vf-body {
  position: relative;
  margin: 0 auto;
  max-width: 980px;
  padding: 22px;
  border-radius: 34px;
  background:
    radial-gradient(120% 120% at 50% 0%, #2b2b31, #0c0c0f 70%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 8px 30px rgba(0, 0, 0, 0.6),
    0 20px 50px rgba(0, 0, 0, 0.25);
}

/* rear screen instead of a viewfinder (E-PL9, XZ-2) */
.vf[data-screen="lcd"] .vf-body {
  padding: 14px 14px 30px;
  border-radius: 18px;
  background: linear-gradient(#26262b, #18181c);
}

.vf[data-screen="lcd"] .vf-body::after {
  content: "LCD · Touch AF";
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font: 0.62rem var(--mono);
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.35);
}

.vf[data-screen="evf"] .vf-body::after {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 14px;
  pointer-events: none;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.55);
}

.vf-svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  background: #3f6437;
  cursor: zoom-in;
  user-select: none;
}

.vf[data-screen="lcd"] .vf-svg {
  border-radius: 6px;
}

.vf-zoom {
  align-self: end;
  font: 0.75rem var(--mono);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s;
}

.vf-zoom:hover {
  border-color: var(--accent);
}

.vf.is-zoomed .vf-zoom {
  background: #222;
  color: #eee;
  border-color: #444;
}

.vf.is-zoomed {
  position: fixed;
  inset: 0;
  z-index: 10002;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 2vh 2vw;
  background: #08080a;
  animation: vfIn 0.25s ease;
}

.vf.is-zoomed .vf-body {
  width: min(96vw, calc((88vh - 60px) * 1.333));
  max-width: none;
}

.vf.is-zoomed .vf-svg {
  cursor: zoom-out;
}

.vf.is-zoomed .vf-under {
  width: min(96vw, 900px);
  color: #ddd;
}

@keyframes vfIn {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}

.vf-under {
  max-width: 980px;
  margin: 1rem auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr auto auto;
  gap: 1rem 1.5rem;
}

/* the shutter button, the blackout while the shutter is open, the short review and the roll of shots */
.vf-shutter {
  align-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font: 0.75rem var(--mono);
  color: var(--bg);
  background: var(--text);
  border: 1px solid var(--text);
  border-radius: 999px;
  padding: 0.45rem 1rem 0.45rem 0.55rem;
  cursor: pointer;
  white-space: nowrap;
}

.vf-shutter-dot {
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff8a7a, #d8352a 60%);
  box-shadow: 0 0 0 2px var(--bg);
  transition: transform 0.08s;
}

.vf-shutter:active .vf-shutter-dot {
  transform: scale(0.8);
}

.vf.is-zoomed .vf-shutter {
  background: #eee;
  color: #111;
  border-color: #eee;
}

.vf.vf-dark .vf-svg {
  filter: brightness(0);
}

.vf-review {
  position: absolute;
  object-fit: cover;
  border-radius: 14px;
  pointer-events: none;
  animation: vfReview 1.3s ease both;
}

@keyframes vfReview {
  0%,
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.cam-roll {
  max-width: 980px;
  margin: 1rem auto 0;
}

.cam-roll[hidden],
.vf.is-zoomed .cam-roll {
  display: none;
}

.cam-roll-head {
  font: 0.72rem var(--mono);
  color: var(--muted);
  margin: 0 0 0.5rem;
}

.cam-roll-strip {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}

.cam-shot {
  position: relative;
  flex: none;
  width: 92px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: #111;
  cursor: pointer;
  animation: vfIn 0.3s ease;
}

.cam-shot img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.cam-shot span {
  position: absolute;
  right: 4px;
  bottom: 4px;
  font: 0.7rem/1 var(--mono);
  padding: 0.15rem 0.3rem;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.65);
  color: #ffb347;
}

.cam-shot.keeper span {
  color: #7dff7a;
}

.cam-shot:hover,
.cam-shot:focus-visible {
  border-color: var(--accent);
}

.cam-photo {
  margin: auto;
  width: min(94vw, 900px);
  max-height: 94vh;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  overflow: auto;
}

.cam-photo::backdrop {
  background: rgba(0, 0, 0, 0.75);
}

.cam-photo img {
  display: block;
  width: 100%;
  max-height: 68vh;
  object-fit: contain;
  background: #000;
}

.cam-photo-info {
  padding: 1rem 1.25rem 1.25rem;
}

.cam-photo-name {
  font: 600 0.85rem var(--mono);
  margin: 0;
}

.cam-photo-exif {
  font: 0.75rem var(--mono);
  color: var(--muted);
  margin: 0.25rem 0 0.75rem;
}

.cam-photo-notes {
  margin: 0 0 1rem;
  padding-left: 1.2rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

.cam-photo-notes .bad::marker {
  content: "⚠  ";
}

.cam-photo-notes .good::marker {
  content: "✓  ";
  color: var(--accent);
}

.cam-photo-btns {
  display: flex;
  gap: 0.5rem;
}

.cam-photo-btns a,
.cam-photo-btns button {
  font: 0.75rem var(--mono);
  color: var(--text);
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  cursor: pointer;
  text-decoration: none;
}

.cam-photo-btns a:hover,
.cam-photo-btns button:hover {
  border-color: var(--accent);
}

.vf-slider,
.cam-controls label {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--muted);
}

.vf-slider output,
.cam-controls output {
  position: absolute;
  right: 0;
  top: 0;
  color: var(--text);
}

.vf.is-zoomed .vf-slider,
.vf.is-zoomed .vf-slider output {
  color: #ddd;
}

.vf-slider input,
.cam-controls input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

/* viewfinder overlay (SVG) */
.vf-hud text {
  font: 9.5px "Red Hat Mono", monospace;
  fill: #f4f4f4;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.45);
  stroke-width: 2px;
}

.vf-hud .vf-mode {
  fill: #ffd45c;
}

.vf-hud .vf-warn {
  fill: #ff6b6b;
}

.vf-hud .vf-ok {
  fill: #7dff7a;
}

.vf-hud .vf-dim {
  fill: #cfcfcf;
}

.vf-hud .vf-big {
  font-size: 22px;
}

.vf-bar {
  fill: rgba(0, 0, 0, 0.55);
}

.vf-corner {
  fill: none;
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 1.2;
}

.vf-af-dot {
  fill: none;
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 0.7;
}

.vf-af-box {
  fill: none;
  stroke: #fff;
  stroke-width: 1.6;
}

.vf-af-box.locked {
  stroke: #5dff5d;
}

.vf-af-box.flash {
  stroke-width: 3;
}

.vf-af-eye {
  fill: none;
  stroke: #5dff5d;
  stroke-width: 1.8;
}

.vf-af-subject {
  fill: none;
  stroke: rgba(93, 255, 93, 0.55);
  stroke-width: 1;
  stroke-dasharray: 5 4;
}

/* controls + camera drawing */
.cam-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 1.25rem;
  margin-bottom: 1.25rem;
  align-items: start;
}

.cam-controls {
  gap: 1.1rem;
}

.cam-controls select {
  font: 0.85rem var(--sans);
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.45rem 0.5rem;
  width: 100%;
}

.cam-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.cam-rig-card {
  gap: 0.5rem;
}

.cam-rig {
  width: 100%;
  height: 190px;
}

.rig-body {
  fill: #2c2b32;
  stroke: #55535e;
  stroke-width: 0.8;
}

.rig-rubber {
  fill: #18171b;
}

.rig-dial {
  fill: #4a4852;
}

.rig-mount {
  fill: #c3c6ce;
}

.rig-lens {
  fill: #232228;
  stroke: #4c4a55;
  stroke-width: 0.8;
}

.rig-inner {
  fill: #2f2e35;
}

.rig-groove {
  stroke: #33323a;
  stroke-width: 0.6;
}

.rig-glass {
  fill: #6c7fc0;
  opacity: 0.55;
}

.rig-dim {
  fill: none;
  stroke: var(--muted);
  stroke-width: 0.6;
}

.rig-label {
  font: 7px var(--mono);
  fill: var(--muted);
}

.cam-rig-name {
  font-family: var(--mono);
  font-size: 0.75rem;
  text-align: center;
  margin: 0 auto;
}

.cam-results {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.cam-card {
  gap: 0.6rem;
}

.cam-card h3 {
  margin: 0;
}

.cam-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 0.75rem;
  padding: 0.45rem 0;
  border-bottom: 1px dashed var(--border);
  font-size: 0.85rem;
}

.cam-row:last-child {
  border-bottom: none;
}

.cam-row span {
  color: var(--muted);
}

.cam-row b {
  font-family: var(--mono);
  font-weight: 400;
  color: var(--text);
  text-align: right;
}

#cam-specs .cam-row {
  grid-template-columns: 7.5rem 1fr;
}

#cam-specs .cam-row b {
  font-family: var(--sans);
  text-align: left;
}

.cam-row em {
  grid-column: 1 / -1;
  font-style: normal;
  font-size: 0.75rem;
  color: var(--muted);
  opacity: 0.85;
}

.cam-canvas-dof {
  width: 100%;
  height: 56px;
  display: block;
}

.cam-sensors {
  width: 100%;
  height: auto;
  max-height: 90px;
}

.cam-sensors rect {
  fill: none;
  stroke: var(--muted);
  stroke-width: 0.8;
  opacity: 0.6;
}

.cam-sensors rect.on {
  fill: rgba(26, 167, 59, 0.15);
  stroke: var(--accent);
  stroke-width: 1.4;
  opacity: 1;
}

.cam-sensors text {
  font: 5px var(--mono);
  fill: var(--muted);
}

.cam-sensors text.on {
  fill: var(--accent);
}

@media (max-width: 1000px) {
  .cam-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .cam-layout,
  .cam-results {
    grid-template-columns: 1fr;
  }
  .vf-under {
    grid-template-columns: 1fr 1fr;
  }
  .vf-under .vf-slider {
    grid-column: 1 / -1;
  }
  .vf-body {
    padding: 10px;
    border-radius: 20px;
  }
  .vf[data-screen="evf"] .vf-body::after {
    inset: 10px;
  }
}

/* ── Lab: Fourier drawing ── */
.fr-stage {
  position: relative;
  padding: 0;
  overflow: hidden;
}

.fr-canvas {
  display: block;
  width: 100%;
  height: min(62vh, 520px);
  cursor: crosshair;
  touch-action: none;
}

.fr-hint {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  max-width: none;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.6rem;
  color: var(--muted);
  pointer-events: none;
}

.fr-controls {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 1rem 2rem;
  align-items: end;
  margin: 1.25rem 0;
}

.fr-toggles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.fr-toggles label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
}

.fr-toggles input {
  accent-color: var(--accent);
}

.fr-spec-card {
  gap: 0.5rem;
}

.fr-spec-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.fr-spec-head h3 {
  margin: 0;
}

.fr-err {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--muted);
}

.fr-err b {
  color: var(--text);
  font-weight: 400;
}

.fr-spectrum {
  display: block;
  width: 100%;
  height: 110px;
}

.fr-spec-note {
  font-size: 0.78rem;
  margin: 0;
  max-width: none;
}

@media (max-width: 760px) {
  .fr-controls {
    grid-template-columns: 1fr;
  }
}

.fr-hint[hidden] {
  display: none;
}

/* ── home quicklink + camera tile preview ── */
.hero-quick {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.75rem;
  padding: 0.35rem 1rem 0.35rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text);
  opacity: 0;
  animation: fadeUp 0.7s 0.85s forwards;
  transition:
    border-color 0.2s,
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero-quick:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.hero-quick svg {
  width: 38px;
  height: 22px;
  overflow: visible;
}

.hero-quick:hover .b-head {
  transform: rotate(-14deg);
}

.hero-quick .b-head,
.tv-camera-bird .b-head {
  transform-box: view-box;
  transform-origin: 30px 30px;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tv-camera-bird {
  stroke: none !important;
}

.tv-camera-bird .tv-corners {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.4;
}

.tv-camera-bird .tv-af {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.4;
  animation: tvAf 3s infinite;
}

.tv-camera-bird .tv-branch {
  fill: none;
  stroke: #6a4e36;
  stroke-width: 2.5;
  stroke-linecap: round;
}

.tv-camera-bird .tv-bird path[stroke] {
  stroke-width: 1.6;
}

.tv-camera-bird .b-head {
  animation: logoHead 5s ease-in-out infinite;
}

@keyframes tvAf {
  0%,
  100% {
    opacity: 1;
  }
  45% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  55% {
    opacity: 1;
  }
}

/* ── camera calculator: modes, reflection ── */
.vf-modes {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  margin-bottom: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}

.vf-modes button {
  font: 0.8rem var(--mono);
  color: var(--muted);
  background: none;
  border: none;
  border-radius: 999px;
  padding: 0.35rem 1rem;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s;
}

.vf-modes button.on {
  background: var(--text);
  color: var(--bg);
}

.vf-reflection {
  opacity: 0.32;
}

.vf-ripple {
  animation: vfRipple 3s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes vfRipple {
  50% {
    transform: scaleX(1.12);
    opacity: 0.2;
  }
}

.cam-card[hidden] {
  display: none;
}

/* ── camera calculator: viewfinder with controls beside it (desktop) ── */
.cam-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  margin-bottom: 1.25rem;
  align-items: start;
}

.cam-side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cam-side .cam-rig {
  height: 140px;
}

.cam-specs-card #cam-specs .cam-row {
  grid-template-columns: 6.5rem 1fr;
}

@media (min-width: 1100px) {
  .cam-top {
    grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr);
  }
  .cam-top .vf {
    margin-bottom: 0;
  }
  .cam-top .vf-body {
    padding: 16px;
    border-radius: 26px;
  }
  .cam-top .vf[data-screen="evf"] .vf-body::after {
    inset: 16px;
  }
  .cam-top .vf[data-screen="lcd"] .vf-body {
    padding: 10px 10px 26px;
  }
  .cam-top .vf-under {
    grid-template-columns: 1fr 1fr;
  }
  .cam-top .vf-under .vf-zoom {
    justify-self: start;
  }
  .cam-top .vf-under .vf-shutter {
    justify-self: end;
  }
  .cam-side {
    position: sticky;
    top: 5rem;
  }
}

/* ── camera + lens: front and top view ── */
.rig-views {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 0.75rem;
  align-items: end;
}

.rig-views figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.cam-rig-view {
  width: 100%;
  height: 130px;
}

.rig-views figcaption {
  font: 0.65rem var(--mono);
  color: var(--muted);
  letter-spacing: 0.06em;
}

/* ── Lab: emoji drawing ── */
.em-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 1.6rem;
  margin: -0.5rem 0 1rem;
}

.em-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.em-stage {
  position: relative;
}

.em-canvas {
  height: min(60vh, 480px);
}

.em-side {
  gap: 0.75rem;
  min-height: 200px;
}

.em-big {
  font-size: 4.5rem;
  line-height: 1;
  text-align: center;
  min-height: 4.5rem;
  animation: emPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.em-big:empty {
  animation: none;
}

@keyframes emPop {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
}

.em-say {
  text-align: center;
  margin: 0 auto 0.75rem;
}

.em-bar {
  display: grid;
  grid-template-columns: 8.5rem 1fr 3rem;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  margin-bottom: 0.4rem;
}

.em-bar i {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--accent) var(--p), var(--border) var(--p));
}

.em-bar b {
  font: 400 0.75rem var(--mono);
  text-align: right;
}

.em-target {
  font-size: 1.4rem;
  text-align: center;
  margin: 0 auto;
}

.em-score {
  font: 0.75rem var(--mono);
  color: var(--muted);
  text-align: center;
  margin: 0.25rem auto 0;
}

.em-verdict {
  font: 0.9rem var(--mono);
  text-align: center;
  margin: 0 auto 0.5rem;
}

.em-verdict.ok {
  color: var(--accent);
}

.em-verdict.no {
  color: #e5484d;
}

.em-train-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.em-train-pick button {
  font-size: 1.3rem;
  display: inline-flex;
  align-items: baseline;
  gap: 0.2rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
  cursor: pointer;
}

.em-train-pick button small {
  font: 0.65rem var(--mono);
  color: var(--muted);
}

.em-train-pick button.on {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.em-train-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

@media (max-width: 860px) {
  .em-layout {
    grid-template-columns: 1fr;
  }
}

/* ── emoji page: pens + tools ── */
.em-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border);
}

.em-pens {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.em-pens button {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  background: var(--c);
  box-shadow: 0 0 0 1px var(--border);
  cursor: pointer;
  transition: transform 0.15s;
}

.em-pens button:hover {
  transform: scale(1.12);
}

.em-pens button.on {
  box-shadow: 0 0 0 2px var(--text);
  transform: scale(1.12);
}

.em-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.em-guess {
  background: var(--accent);
  color: #fff;
  font-size: 0.85rem;
}

.em-guess:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* nested: 3× and 5× the base speed in total */

/* keep the Fourier ratios intact on hover (the generic hover speed-up would break them) */

.em-colour-note {
  font-size: 0.8rem;
  text-align: center;
  margin: -0.4rem auto 0.75rem;
  color: var(--muted);
}

/* ── emoji: over/underfitting chart ── */
.em-fit {
  max-width: 820px;
  margin-top: 2.5rem;
  gap: 0.6rem;
}

.em-fit h2 {
  font-size: 1.4rem;
  margin-bottom: 0.25rem;
}

.em-fit p {
  font-size: 0.9rem;
  margin: 0;
}

.em-fit-chart {
  width: 100%;
  max-width: 560px;
  height: auto;
  margin-top: 0.5rem;
}

.fit-grid {
  stroke: var(--border);
}

.fit-tick,
.fit-axis {
  font: 10px var(--mono);
  fill: var(--muted);
}

.fit-train {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}

.fit-others {
  fill: none;
  stroke: #3e7bfa;
  stroke-width: 2;
}

.fit-kane {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
}

.fit-kane-dot {
  fill: var(--accent);
}

.fit-val {
  font: 11px var(--mono);
}

.fit-val.kane {
  fill: var(--accent);
}

.em-fit-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  font-size: 0.78rem;
  color: var(--muted);
}

.em-fit-legend i {
  display: inline-block;
  width: 16px;
  height: 3px;
  margin-right: 0.4rem;
  vertical-align: middle;
}

.lg-train {
  background: repeating-linear-gradient(90deg, var(--muted) 0 4px, transparent 4px 8px);
}

.lg-kane {
  background: var(--accent);
}

.lg-others {
  background: #3e7bfa;
}

/* ── rotary knobs (lab/knob.js) ── */
.knob {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  cursor: grab;
}

.knob > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.knob-dial {
  --turn: 0deg;
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  touch-action: none;
  background:
    radial-gradient(circle at 50% 50%, #3b3d42 0 44%, transparent 45%),
    repeating-conic-gradient(#26282c 0 4deg, #45484e 4deg 8deg);
  box-shadow:
    0 0 0 3px #1c1d20,
    0 5px 10px rgba(0, 0, 0, 0.45),
    inset 0 2px 2px rgba(255, 255, 255, 0.18);
  transform: rotate(var(--turn));
}

/* the pointer line on the cap */
.knob-dial::after {
  content: "";
  position: absolute;
  left: calc(50% - 1.5px);
  top: 7px;
  width: 3px;
  height: 17px;
  border-radius: 2px;
  background: #f2f2ee;
}

/* scale ticks around the knob, drawn on the panel (they don't turn) */
.knob::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  width: 82px;
  height: 82px;
  margin-left: -41px;
  border-radius: 50%;
  background: repeating-conic-gradient(from -135deg, #2b2c30 0 1.2deg, transparent 1.2deg 27deg);
  -webkit-mask: radial-gradient(circle, transparent 36px, #000 37px 41px, transparent 41px),
    conic-gradient(from -136deg, #000 0 272deg, transparent 272deg);
  -webkit-mask-composite: source-in;
  mask: radial-gradient(circle, transparent 36px, #000 37px 41px, transparent 41px) intersect,
    conic-gradient(from -136deg, #000 0 272deg, transparent 272deg);
  pointer-events: none;
}

.knob > input:focus-visible + .knob-dial {
  outline: 2px solid #5dff9a;
  outline-offset: 6px;
}

.knob-label {
  margin-top: 0.35rem;
  font: 600 0.62rem var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #2b2c30;
}

/* ── Lab: Fourier as an old CRT oscilloscope ── */
.osc {
  --case: #b9bcb6;
  position: relative;
  margin: 0.5rem 0 1rem;
  padding: 1.1rem 1.4rem 1.4rem;
  border-radius: 18px;
  color: #2b2c30;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #d3d5cf, var(--case) 55%, #a3a69f);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.7),
    inset 0 -3px 0 rgba(0, 0, 0, 0.18),
    0 18px 40px -18px rgba(0, 0, 0, 0.55),
    0 2px 0 #7d807a;
}

html.theme-dark .osc {
  --case: #9a9d97;
}

.osc-screw {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e9eae6, #8a8d87 70%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}

.osc-screw::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  top: 5px;
  height: 1.5px;
  background: rgba(0, 0, 0, 0.45);
  transform: rotate(35deg);
}

.osc-screw.s1 { top: 9px; left: 9px; }
.osc-screw.s2 { top: 9px; right: 9px; }
.osc-screw.s3 { bottom: 9px; left: 9px; }
.osc-screw.s4 { bottom: 9px; right: 9px; }

.osc-top {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin: 0 0.4rem 0.9rem;
  font: 0.7rem var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.osc-brand {
  font-weight: 600;
}

.osc-brand b {
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
  background: #2b2c30;
  color: var(--case);
}

.osc-model {
  opacity: 0.65;
}

.osc-power {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.osc-led {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #7dff9f;
  box-shadow: 0 0 6px 2px rgba(93, 255, 154, 0.7), inset 0 -2px 2px rgba(0, 0, 0, 0.25);
}

.osc-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 1.4rem;
}

/* dark inset frame around the tube */
.osc-bezel {
  padding: 14px 14px 8px;
  border-radius: 14px;
  background: linear-gradient(180deg, #2c2e32, #3a3c41);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.6);
}

.osc-screen,
.osc-spec-screen {
  position: relative;
  overflow: hidden;
  border-radius: 18px / 22px;
  background: radial-gradient(ellipse at 50% 45%, #0d1a12 0%, #050a07 65%, #010302 100%);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.95), inset 0 0 0 2px #000;
}

/* scanlines + curved-glass reflection + vignette */
.osc-screen::after,
.osc-spec-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 60% 35% at 30% 12%, rgba(255, 255, 255, 0.07), transparent 70%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.55) 100%);
}

.osc .fr-canvas {
  height: min(58vh, 460px);
  filter: saturate(1.1);
}

.osc .fr-hint {
  font: 1.05rem var(--mono);
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5dff9a;
  text-shadow: 0 0 8px rgba(93, 255, 154, 0.8);
  animation: oscBlink 1.1s steps(2) infinite;
}

@keyframes oscBlink {
  50% {
    opacity: 0.55;
  }
}

/* silkscreen labels printed on the case */
.osc-silk {
  display: flex;
  justify-content: space-between;
  padding: 0.45rem 0.4rem 0;
  font: 0.6rem var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c9ccc5;
}

.osc-panel {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.osc-lcd {
  display: grid;
  gap: 0.15rem;
  padding: 0.55rem 0.75rem;
  border-radius: 6px;
  background: #0b140e;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.6);
  font: 0.72rem var(--mono);
  letter-spacing: 0.08em;
  color: rgba(93, 255, 154, 0.55);
}

.osc-lcd > span {
  display: flex;
  justify-content: space-between;
}

.osc-lcd output,
.osc-lcd b {
  font-weight: 400;
  color: #5dff9a;
  text-shadow: 0 0 6px rgba(93, 255, 154, 0.6);
}

.osc-knobs {
  display: flex;
  justify-content: space-around;
  padding-top: 0.6rem;
}

.osc-switches {
  display: flex;
  justify-content: space-around;
  gap: 0.5rem;
  font-size: inherit;
  color: inherit;
}

/* little metal toggle switches */
.osc-switch {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  font: 600 0.6rem var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.osc-switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.osc-switch i {
  position: relative;
  width: 22px;
  height: 36px;
  border-radius: 11px;
  background: linear-gradient(180deg, #2a2b2f, #45474c);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.6);
}

.osc-switch i::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 19px;
  width: 16px;
  height: 14px;
  border-radius: 7px;
  background: linear-gradient(180deg, #f4f4f0, #a9aca6);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
  transition: top 0.15s;
}

.osc-switch input:checked + i::after {
  top: 3px;
}

.osc-switch input:focus-visible + i {
  outline: 2px solid #5dff9a;
  outline-offset: 3px;
}

.osc-cap {
  display: block;
  margin-bottom: 0.4rem;
  font: 600 0.6rem var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.osc-keys {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.35rem;
}

.osc-keys button {
  position: relative;
  padding: 0.5rem 0.2rem 0.35rem;
  border: 0;
  border-radius: 4px;
  font: 0.62rem var(--mono);
  letter-spacing: 0.04em;
  color: #2b2c30;
  background: linear-gradient(180deg, #f1f1ec, #cfd1ca);
  box-shadow: 0 2px 0 #85887f, 0 3px 4px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* tiny indicator lamp on each key */
.osc-keys button::before {
  content: "";
  position: absolute;
  top: 3px;
  left: calc(50% - 7px);
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background: #9a9d97;
}

.osc-keys button.on::before {
  background: #5dff9a;
  box-shadow: 0 0 4px #5dff9a;
}

.osc-keys button:active,
.osc-keys button.on {
  transform: translateY(1px);
  box-shadow: 0 1px 0 #85887f, 0 1px 2px rgba(0, 0, 0, 0.25);
}

.osc-red {
  margin-top: auto;
  padding: 0.6rem 0.8rem;
  border: 0;
  border-radius: 6px;
  font: 600 0.68rem var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(180deg, #e2463f, #b3261e);
  box-shadow: 0 3px 0 #7b1510, 0 4px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  cursor: pointer;
}

.osc-red:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #7b1510, inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.osc-spec {
  margin-top: 1.2rem;
  padding: 10px 10px 6px;
  border-radius: 12px;
  background: linear-gradient(180deg, #2c2e32, #3a3c41);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.6);
}

.osc-spec-screen {
  border-radius: 10px / 14px;
  padding: 6px 8px 2px;
}

.osc .fr-spectrum {
  height: 96px;
}

.osc-keys button:focus-visible,
.osc-red:focus-visible {
  outline: 2px solid #2b2c30;
  outline-offset: 2px;
}

@media (max-width: 860px) {
  .osc {
    padding: 0.9rem 0.8rem 1.1rem;
  }
  .osc-main {
    grid-template-columns: 1fr;
  }
  .osc-model {
    display: none;
  }
  .osc-keys {
    grid-template-columns: repeat(3, 1fr);
  }
  .osc-bezel {
    padding: 8px 8px 4px;
  }
  .osc .fr-canvas {
    height: min(52vh, 380px);
  }
}

/* ── Lab: emoji page as a red drawing toy with two knobs ── */
.eas {
  position: relative;
  padding: 0.7rem 1.4rem 1.1rem;
  border-radius: 30px;
  background:
    radial-gradient(ellipse 70% 40% at 30% 0%, rgba(255, 255, 255, 0.28), transparent 70%),
    linear-gradient(180deg, #e0302a, #c21f1a 45%, #9e1511);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.35),
    inset 0 -5px 0 rgba(0, 0, 0, 0.22),
    inset 5px 0 8px -4px rgba(255, 255, 255, 0.2),
    0 22px 40px -20px rgba(120, 10, 5, 0.7),
    0 3px 0 #6e0d0a;
}

.eas.shaking {
  animation: easShake 0.65s ease-in-out;
}

.eas.shaking canvas {
  transition: opacity 0.6s ease-in;
  opacity: 0;
}

@keyframes easShake {
  10%, 50%, 90% { transform: translate(-9px, 3px) rotate(-2deg); }
  30%, 70% { transform: translate(9px, -3px) rotate(2deg); }
}

.eas-logo {
  margin: 0 auto 0.55rem;
  max-width: none;
  text-align: center;
  font: italic 1.45rem var(--serif);
  letter-spacing: 0.02em;
  color: #f6cf55;
  text-shadow: 0 1px 0 #8c6b12, 0 2px 3px rgba(0, 0, 0, 0.35);
}

.eas-screen {
  border-radius: 16px;
  background:
    radial-gradient(ellipse at 40% 30%, rgba(255, 255, 255, 0.45), transparent 65%),
    repeating-radial-gradient(circle at 20% 20%, rgba(0, 0, 0, 0.018) 0 1px, transparent 1px 3px),
    #d9dad4;
  box-shadow:
    inset 0 4px 10px rgba(0, 0, 0, 0.35),
    inset 0 0 0 3px rgba(0, 0, 0, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.3);
}

.eas .em-canvas {
  height: min(56vh, 440px);
}

.eas .fr-hint {
  color: #8d8e89;
  font-size: 1.35rem;
}

.eas-bottom {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  margin-top: 0.9rem;
}

/* the white ridged knobs; the ridges make the turning visible */
.eas-knob {
  --turn: 0rad;
  position: relative;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  cursor: grab;
  touch-action: none;
  background: #f2f1ec;
  box-shadow:
    0 6px 0 #b9b7ae,
    0 9px 12px rgba(80, 5, 0, 0.5),
    inset 0 2px 1px #fff;
}

.eas-knob i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, #f7f6f1 0 58%, transparent 60%),
    repeating-conic-gradient(#ffffff 0 5deg, #d8d6cf 5deg 10deg);
  transform: rotate(var(--turn));
}

/* a little dimple so a turn reads at a glance */
.eas-knob i::after {
  content: "";
  position: absolute;
  top: 16%;
  left: calc(50% - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #cfcdc5, #e9e8e2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}

.eas-knob:active {
  cursor: grabbing;
}

.eas-knob:focus-visible {
  outline: 3px solid #f6cf55;
  outline-offset: 4px;
}

.eas .em-tools {
  justify-content: center;
  padding: 0;
  border-top: 0;
}

.eas .em-pens button {
  border-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.eas .em-pens button.on {
  box-shadow: 0 0 0 2px #f6cf55, 0 1px 3px rgba(0, 0, 0, 0.35);
}

.eas .em-actions {
  flex-wrap: wrap;
  justify-content: center;
}

.eas-btn {
  padding: 0.4rem 0.8rem;
  border: 0;
  border-radius: 999px;
  font: 600 0.78rem var(--sans);
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.eas-btn:hover {
  background: rgba(255, 255, 255, 0.26);
}

.eas-btn:focus-visible {
  outline: 2px solid #f6cf55;
  outline-offset: 2px;
}

.eas .em-guess {
  color: #4a2a00;
  background: linear-gradient(180deg, #ffe07a, #f2b92c);
  box-shadow: 0 2px 0 #9d6c0c, inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.eas .em-guess:disabled {
  opacity: 0.5;
}

@media (max-width: 600px) {
  .eas {
    padding: 0.6rem 0.75rem 0.9rem;
    border-radius: 22px;
  }
  .eas-bottom {
    grid-template-columns: 1fr 1fr;
  }
  #em-knob-y {
    justify-self: end;
  }
  .eas .em-tools {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .eas-knob {
    width: 54px;
    height: 54px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .eas.shaking {
    animation: none;
  }
}

/* ── Lab: transit city (control desk in the oscilloscope's family) ── */
.bs .osc-main {
  grid-template-columns: minmax(0, 1fr) 250px;
}

.bs-screen {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background:
    repeating-linear-gradient(0deg, rgba(60, 50, 20, 0.05) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(60, 50, 20, 0.05) 0 1px, transparent 1px 40px),
    radial-gradient(ellipse at 40% 35%, #faf7ee, #efe9d8);
  box-shadow: inset 0 0 0 2px #000, inset 0 0 30px rgba(80, 60, 20, 0.18);
}

.bs-map {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--sans);
  user-select: none;
  -webkit-user-select: none;
}

.bs-river {
  fill: none;
  stroke: #b8d7ea;
  stroke-width: 26;
  stroke-linecap: round;
}

.bs-river-in {
  fill: none;
  stroke: #cfe5f2;
  stroke-width: 12;
  stroke-linecap: round;
}

.bs-line {
  fill: none;
  stroke-width: calc(5.5px * var(--k, 1));
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity 0.4s;
}

.bs-line.struck {
  stroke: #a3a09a !important;
  stroke-dasharray: 3 9;
}

.bs-map.routing .bs-line {
  opacity: 0.22;
}

/* the search spreading out: a yellow marker glow underneath the lines */
.bs-explored {
  stroke: #ffd23f;
  stroke-width: calc(17px * var(--k, 1));
  stroke-linecap: round;
  opacity: 0.55;
}

.bs-map.routing .bs-explored {
  opacity: 0.35;
}

.bs-route-case,
.bs-route {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bs-route-case {
  stroke: #fff;
  stroke-width: calc(13px * var(--k, 1));
}

.bs-route {
  stroke-width: calc(8px * var(--k, 1));
}

.bs-st {
  cursor: pointer;
}

.bs-hit {
  fill: transparent;
}

.bs-dot {
  fill: #fff;
  stroke-width: calc(2.2px * var(--k, 1));
  transition: fill 0.2s;
}

.bs-inter {
  stroke-width: calc(2.6px * var(--k, 1));
}

/* search lamps: amber = in the queue, orange = looked at */
.bs-st.q .bs-dot {
  fill: #fde68a;
}

.bs-st.v .bs-dot {
  fill: #f59e0b;
}

.bs-st.r .bs-dot {
  fill: #fff;
  stroke: #1d1d1f;
}

.bs-st.start .bs-dot,
.bs-st.goal .bs-dot {
  r: calc(8px * var(--k, 1));
  stroke: #1d1d1f;
  stroke-width: calc(3px * var(--k, 1));
}

.bs-st.start .bs-dot {
  fill: #1aa73b;
}

.bs-st.goal .bs-dot {
  fill: #e5484d;
}

.bs-st:hover .bs-dot {
  stroke-width: calc(3.5px * var(--k, 1));
}

.bs-label {
  font-weight: 600;
  fill: #1d1d1f;
  stroke: #f7f3e8;
  stroke-width: 4.5;
  stroke-linejoin: round;
  paint-order: stroke;
  pointer-events: none;
}

.bs-label.hover {
  fill: #6b5a2a;
}

.bs-train {
  fill: #1d1d1f;
  stroke: #fff;
  stroke-width: calc(2.5px * var(--k, 1));
}

.bs-hint {
  position: absolute;
  top: 10px;
  left: 10px;
  margin: 0;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  font: 0.72rem var(--mono);
  letter-spacing: 0.06em;
  color: #fff;
  background: rgba(29, 29, 31, 0.82);
  pointer-events: none;
}

.bs-hint[hidden] {
  display: none;
}

.bs .osc-silk {
  text-transform: none;
}

.bs-lcd b {
  min-width: 4.5em;
  text-align: right;
}

.bs-algos {
  grid-template-columns: repeat(3, 1fr);
}

.osc-keys.bs-lines {
  grid-template-columns: repeat(4, 1fr);
}

/* line keys: the lamp shows the line's colour while it runs, red when it's on strike */
.bs-lines button::before {
  background: var(--c);
  box-shadow: 0 0 4px var(--c);
}

.bs-lines button.off {
  text-decoration: line-through;
  color: #8a8c86;
  transform: translateY(1px);
  box-shadow: 0 1px 0 #85887f, 0 1px 2px rgba(0, 0, 0, 0.25);
}

.bs-lines button.off::before {
  background: #e5484d;
  box-shadow: 0 0 4px #e5484d;
}

.bs-seed {
  display: flex;
  gap: 0.4rem;
}

.bs-seed-input {
  flex: 1;
  min-width: 0;
  padding: 0.45rem 0.6rem;
  border: 0;
  border-radius: 5px;
  font: 0.78rem var(--mono);
  letter-spacing: 0.06em;
  color: #5dff9a;
  background: #0b140e;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.6);
  text-shadow: 0 0 6px rgba(93, 255, 154, 0.5);
}

.bs-seed-input:focus-visible {
  outline: 2px solid #5dff9a;
  outline-offset: 1px;
}

.bs-dice {
  width: 2.4rem;
  border: 0;
  border-radius: 5px;
  font-size: 1.05rem;
  background: linear-gradient(180deg, #f1f1ec, #cfd1ca);
  box-shadow: 0 2px 0 #85887f, 0 3px 4px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.bs-dice:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 #85887f;
}

.bs-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 1.25rem;
  margin: 1.25rem 0 0;
}

.bs-cards h3 {
  margin: 0 0 0.5rem;
}

.bs-muted {
  color: var(--muted);
  margin: 0;
}

.bs-from {
  margin: 0 0 0.6rem;
  max-width: none;
}

.bs-legs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.bs-legs li {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.6rem;
  align-items: baseline;
}

.bs-legs small {
  grid-column: 2;
  font: 0.72rem var(--mono);
  color: var(--muted);
}

.bs-legs .bs-change {
  display: block;
  padding-left: 0.35rem;
  font: 0.75rem var(--mono);
  color: var(--muted);
}

.bs-badge {
  display: inline-block;
  min-width: 2.6rem;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font: 700 0.75rem var(--sans);
  text-align: center;
  color: #fff;
  background: var(--c);
}

.bs-table {
  width: 100%;
  border-collapse: collapse;
  font: 0.78rem var(--mono);
}

.bs-table th,
.bs-table td {
  padding: 0.35rem 0.4rem;
  text-align: right;
  border-bottom: 1px solid var(--border);
}

.bs-table thead th {
  font-weight: 400;
  font-size: 0.68rem;
  color: var(--muted);
}

.bs-table tbody th {
  text-align: left;
}

.bs-table tr.on th {
  color: var(--accent);
}

.bs-table td.best {
  color: var(--accent);
  font-weight: 600;
}

.bs-note {
  margin: 0.75rem 0 0;
  max-width: none;
  font-size: 0.85rem;
}

@media (max-width: 860px) {
  .bs .osc-main {
    grid-template-columns: 1fr;
  }
  .bs-cards {
    grid-template-columns: 1fr;
  }
  .bs .osc-silk span:last-child {
    display: none;
  }
  .bs-table {
    font-size: 0.7rem;
  }
}

/* ── transit city: slime mould mode, switch, full screen ── */
.bs [hidden],
.bs-cards [hidden] {
  display: none !important;
}

.bs-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font: 600 0.62rem var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.bs-toggle input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.bs-toggle i {
  position: relative;
  width: 44px;
  height: 22px;
  border-radius: 11px;
  background: linear-gradient(180deg, #2a2b2f, #45474c);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.6);
}

.bs-toggle i::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(180deg, #f4f4f0, #a9aca6);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
  transition: left 0.18s;
}

.bs-toggle input:checked + i::after {
  left: 25px;
  background: radial-gradient(circle at 40% 35%, #ffe27a, #e0a800);
}

.bs-toggle input:focus-visible + i {
  outline: 2px solid #5dff9a;
  outline-offset: 3px;
}

/* night: the paper goes dark, the network glows, stations are little lights */
.bs-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(40, 60, 110, 0.35), transparent 70%),
    linear-gradient(180deg, #0b1122, #060913);
  opacity: 0;
  transition: opacity 1.2s ease;
}

.bs-screen.is-night::before {
  opacity: 1;
}

.bs-screen {
  isolation: isolate; /* keeps the night sky between the paper and the map */
}

.bs-river,
.bs-river-in,
.bs-dot,
.bs-label {
  transition: stroke 1.2s, fill 1.2s, opacity 1.2s;
}

.bs-map.night .bs-river {
  stroke: #101b2e;
}

.bs-map.night .bs-river-in {
  stroke: #142340;
}

.bs-map.night .bs-l-lines {
  filter: url(#bs-glow);
}

.bs-map.night .bs-line {
  stroke: #ffd21f;
  opacity: 0.8;
}

.bs-map.night .bs-dot {
  fill: #fff4d6;
  stroke: #0b1122;
}

.bs-map.night .bs-label {
  fill: #c9d3ea;
  stroke: #0b1122;
  opacity: 0.55;
}

.bs-map.night .bs-l-explored,
.bs-map.night .bs-l-route,
.bs-map.night .bs-l-train {
  opacity: 0;
}

.bs-night-hint {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 0.8rem;
  margin: 0;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  font: 0.72rem var(--mono);
  white-space: nowrap;
  color: #dfe6f7;
  background: rgba(11, 17, 34, 0.75);
  box-shadow: 0 0 0 1px rgba(223, 230, 247, 0.18);
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s;
}

.bs-screen.is-night .bs-night-hint {
  opacity: 1;
}

/* Z z z on the display while the city sleeps */
.bs-lcd {
  position: relative;
}

.bs.is-night .bs-lcd > span {
  visibility: hidden;
}

.bs-zzz {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin: 0;
  font: 700 1.7rem var(--mono);
  color: #5dff9a;
  text-shadow: 0 0 8px rgba(93, 255, 154, 0.7);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s;
}

.bs.is-night .bs-zzz {
  opacity: 1;
}

.bs-zzz span {
  display: inline-block;
  opacity: 0;
}

.bs.is-night .bs-zzz span {
  animation: bs-zzz 3.6s ease-in-out infinite;
}

.bs-zzz span:nth-child(2) {
  font-size: 0.75em;
  animation-delay: 0.6s !important;
}

.bs-zzz span:nth-child(3) {
  font-size: 0.55em;
  animation-delay: 1.2s !important;
}

@keyframes bs-zzz {
  0% { opacity: 0; transform: translate(0, 8px); }
  25%, 60% { opacity: 1; }
  100% { opacity: 0; transform: translate(6px, -14px); }
}

@media (prefers-reduced-motion: reduce) {
  .bs.is-night .bs-zzz span {
    animation: none;
    opacity: 0.8;
  }
}

/* agar in a dish instead of map paper */
.bs-screen.is-slime {
  background: radial-gradient(ellipse at 45% 40%, #2b2719, #17150d 75%);
}

.bs-map.slime .bs-l-lines,
.bs-map.slime .bs-l-stations,
.bs-map.slime .bs-l-labels,
.bs-map.slime .bs-l-explored,
.bs-map.slime .bs-l-route,
.bs-map.slime .bs-l-train {
  display: none;
}

.bs-map.slime .bs-river {
  stroke: #1c2830;
}

.bs-map.slime .bs-river-in {
  stroke: #22323c;
}

.bs-l-slime {
  filter: drop-shadow(0 0 3px rgba(242, 194, 27, 0.55));
}

.bs-tube {
  stroke: #f2c21b;
  stroke-linecap: round;
}

.bs-oat {
  fill: #eadcbd;
  stroke: #b7a177;
  stroke-width: 1.5;
}

.bs-source {
  font-size: 0.78rem;
  color: var(--muted);
}

.lab-background h3 {
  margin-top: 1.75rem;
}

/* full screen button on the map */
.bs-full-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 0.3rem 0.65rem;
  border: 0;
  border-radius: 999px;
  font: 0.72rem var(--mono);
  color: #fff;
  background: rgba(29, 29, 31, 0.72);
  cursor: pointer;
}

.bs-full-btn:hover {
  background: rgba(29, 29, 31, 0.9);
}

.bs-rotate {
  display: none;
}

.bs-screen.is-full {
  position: fixed;
  inset: 0;
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  box-shadow: none;
  animation: vfIn 0.25s ease;
}

.bs-screen.is-full .bs-map {
  width: min(100vw, calc(100vh * 1000 / 640));
  width: min(100vw, calc(100dvh * 1000 / 640));
}

.bs-screen.is-full .bs-full-btn {
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
}

@media (orientation: portrait) and (max-width: 700px) {
  .bs-screen.is-full .bs-rotate {
    display: block;
    position: absolute;
    bottom: max(20px, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    white-space: nowrap;
    font: 0.75rem var(--mono);
    color: #fff;
    background: rgba(29, 29, 31, 0.82);
  }
  .bs-screen.is-full .bs-rotate::before {
    content: "📱↻ ";
  }
}

.bs-toggle {
  gap: 0.45rem;
}

.bs-toggle-ico {
  font-size: 1.05rem;
  letter-spacing: 0;
  opacity: 0.45;
  transition: opacity 0.2s, transform 0.2s;
}

/* the icon of the active side lights up */
.bs-toggle-ico:first-child,
.bs-toggle:has(input:checked) .bs-toggle-ico:last-child {
  opacity: 1;
  transform: scale(1.12);
}

.bs-toggle:has(input:checked) .bs-toggle-ico:first-child {
  opacity: 0.45;
  transform: none;
}

/* ── static tile previews: small drawings of each experiment's device ── */
.lab-tile-viz svg.tv-static {
  stroke: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tv-flag .tv-pole {
  stroke: var(--text);
  stroke-width: 2.2;
}

.tv-flag .tv-pole-top {
  fill: var(--text);
}

.tv-flag .tv-flag-edge {
  fill: none;
  stroke: var(--text);
  stroke-width: 0.8;
}

.tv-osc path {
  fill: none;
}

.tv-osc,
.tv-etch {
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.18));
}

/* ── lab gallery: filter + sort bar ── */
.lab-tile[hidden] {
  display: none;
}

.lab-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem 1.5rem;
  margin: 0 0 0.25rem;
}

.lab-filter {
  margin: 0;
}

.lab-sort {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}

.lab-sort-cap {
  padding: 0 0.4rem 0 0.6rem;
  font: 0.68rem var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.lab-sort button {
  padding: 0.3rem 0.75rem;
  border: 0;
  border-radius: 999px;
  font: 0.8rem var(--sans);
  color: var(--text);
  background: transparent;
  cursor: pointer;
}

.lab-sort button:hover:not(:disabled) {
  background: var(--bg);
}

.lab-sort button.on {
  color: #fff;
  background: var(--accent);
}

.lab-sort button:disabled {
  color: var(--muted);
  opacity: 0.6;
  cursor: not-allowed;
}

.lab-count {
  margin: 0.5rem 0 1rem;
  font: 0.75rem var(--mono);
  color: var(--muted);
}

@media (max-width: 600px) {
  .lab-sort {
    border-radius: var(--radius);
  }
}

/* ── Lab: Antikythera mechanism (wooden case, bronze plates) ── */
.ak {
  position: relative;
  margin: 0.5rem 0 1rem;
  padding: 1rem 1.3rem 1.3rem;
  border-radius: 14px;
  color: #3b2a12;
  background:
    repeating-linear-gradient(92deg, rgba(0, 0, 0, 0.06) 0 2px, transparent 2px 9px, rgba(255, 255, 255, 0.04) 9px 11px, transparent 11px 23px),
    linear-gradient(180deg, #8a5a32, #6e4424 55%, #5a371c);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.18),
    inset 0 -3px 0 rgba(0, 0, 0, 0.3),
    0 18px 40px -18px rgba(40, 20, 5, 0.7);
}

.ak-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0.2rem 0.9rem;
}

.ak-brand {
  font: 600 0.7rem var(--mono);
  letter-spacing: 0.14em;
  color: #f1dcb4;
}

.ak-brand b {
  margin-left: 0.3rem;
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
  font-weight: 400;
  color: #3b2a12;
  background: #d9b57a;
  text-transform: uppercase;
}

.ak-tabs,
.ak-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.ak-tabs button,
.ak-btns button,
.ak-jump button {
  padding: 0.4rem 0.75rem;
  border: 0;
  border-radius: 999px;
  font: 600 0.74rem var(--sans);
  color: #3b2a12;
  background: linear-gradient(180deg, #e3c48c, #b98e4f);
  box-shadow: 0 2px 0 #6b4a1c, inset 0 1px 0 rgba(255, 255, 255, 0.45);
  cursor: pointer;
}

.ak-tabs button.on,
.ak-btns button.on {
  color: #f6e7c8;
  background: linear-gradient(180deg, #5d3f17, #3f2a0e);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.5);
  transform: translateY(1px);
}

.ak-tabs button:focus-visible,
.ak-btns button:focus-visible,
.ak-jump button:focus-visible,
.ak-crank:focus-visible {
  outline: 2px solid #f6cf55;
  outline-offset: 2px;
}

.ak-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: 1.2rem;
  align-items: start;
}

.ak-plate {
  border-radius: 10px;
  padding: 8px;
  background: #3a2410;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.15);
}

.ak-face {
  display: block;
  width: 100%;
  height: auto;
  max-height: 72vh;
  margin: 0 auto;
}

.ak-face[hidden] {
  display: none;
}

.ak-plate-disc {
  stroke: #4a3413;
  stroke-width: 2;
}

.ak-line,
.ak-tick,
.ak-subdial {
  fill: none;
  stroke: #3f2c10;
}

.ak-line {
  stroke-width: 1.4;
}

.ak-tick {
  stroke-width: 0.7;
  opacity: 0.75;
}

.ak-groove {
  stroke-width: 1.8;
}

.ak-text {
  font-family: "DM Serif Display", Georgia, serif;
  fill: #3a2810;
  letter-spacing: 0.06em;
}

.ak-glyph {
  font-family: "DM Serif Display", Georgia, serif;
  fill: #2a1a05;
  font-weight: 700;
}

.ak-cell-on {
  fill: rgba(255, 236, 170, 0.55);
}

.ak-ptr-sun {
  stroke: #f3cf5c;
  stroke-width: 4;
  stroke-linecap: round;
}

.ak-sun-disc {
  fill: #f6d155;
  stroke: #9a6a10;
  stroke-width: 1.5;
}

.ak-ptr-moon {
  stroke: #e3e2da;
  stroke-width: 3.2;
  stroke-linecap: round;
}

.ak-ball-dark {
  fill: #1f1c16;
}

.ak-ball-lit {
  fill: #eeeadb;
}

.ak-ball-rim {
  fill: none;
  stroke: #8d8a7f;
  stroke-width: 1.2;
}

.ak-hub,
.ak-bead {
  fill: #d8b674;
  stroke: #4a3413;
  stroke-width: 1.5;
}

.ak-ptr-back {
  stroke: #2e1f08;
  stroke-width: 2.6;
  stroke-linecap: round;
}

/* gears */
.ak-gear-bg {
  fill: #2f1d0c;
}

.ak-gear-body {
  fill: #b58644;
  stroke: #5a3d14;
  stroke-width: 0.8;
}

.ak-gear--top .ak-gear-body {
  fill: #d7aa62;
}

.ak-gear-win {
  fill: #2f1d0c;
  opacity: 0.9;
}

.ak-gear-spoke {
  fill: #b58644;
}

.ak-gear--top .ak-gear-spoke {
  fill: #d7aa62;
}

.ak-gear-axle {
  fill: #6b4a1c;
}

.ak-gear-label {
  font-family: var(--mono);
  font-weight: 600;
  fill: #fff4dc;
  paint-order: stroke;
  stroke: #2f1d0c;
  stroke-width: 3px;
}

.ak-gear-out {
  font-family: var(--mono);
  fill: #f6cf55;
}

/* side: crank, engraved readout, buttons */
.ak-side {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.ak-crank-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

.ak-crank {
  width: 130px;
  height: 130px;
  cursor: grab;
  touch-action: none;
}

.ak-crank:active {
  cursor: grabbing;
}

.ak-crank-base {
  fill: #a47a3c;
  stroke: #4a3413;
  stroke-width: 2;
}

.ak-crank-bar {
  fill: #c89a55;
  stroke: #4a3413;
  stroke-width: 1.5;
}

.ak-crank-handle {
  fill: #6e3f1b;
  stroke: #3a1f08;
  stroke-width: 2;
}

.ak-cap {
  font: 0.66rem var(--mono);
  letter-spacing: 0.06em;
  color: #f1dcb4;
  text-align: center;
}

.ak-read {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem 0.7rem;
  margin: 0;
  padding: 0.8rem 0.9rem;
  border-radius: 8px;
  font-size: 0.8rem;
  background: radial-gradient(ellipse at 30% 20%, #d6b172, #a57b3d);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 0 #4a3413;
}

.ak-read dt {
  font: 600 0.66rem var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5a3d14;
  padding-top: 0.15rem;
}

.ak-read dd {
  margin: 0;
  color: #2a1a05;
  line-height: 1.35;
}

.ak-btns button {
  flex: 1 1 calc(50% - 0.35rem);
}

.ak-btns .ak-wide {
  flex-basis: 100%;
}

.ak-jump {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font: 0.7rem var(--mono);
  color: #f1dcb4;
}

.ak-jump input {
  flex: 1;
  min-width: 0;
  padding: 0.35rem 0.5rem;
  border: 0;
  border-radius: 6px;
  font: 0.8rem var(--mono);
  color: #2a1a05;
  background: #ead3a4;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.3);
}

.ak-honest {
  margin: 0 0 1rem;
  padding-left: 1.2rem;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

@media (max-width: 860px) {
  .ak {
    padding: 0.8rem 0.7rem 1rem;
  }
  .ak-main {
    grid-template-columns: 1fr;
  }
  .ak-crank {
    width: 110px;
    height: 110px;
  }
}

.tv-gears {
  filter: drop-shadow(0 3px 4px rgba(60, 35, 5, 0.3));
}

/* Antikythera v2: planets and small back dials */
.ak-pring {
  opacity: 0.45;
}

.ak-planet-bead {
  stroke: #3f2c10;
  stroke-width: 1;
}

.ak-planet-mercury .ak-planet-bead { fill: #b9b6ad; }
.ak-planet-venus .ak-planet-bead { fill: #f4ecd2; }
.ak-planet-mars .ak-planet-bead { fill: #c9523b; }
.ak-planet-jupiter .ak-planet-bead { fill: #e6c38e; }
.ak-planet-saturn .ak-planet-bead { fill: #9c8a5c; }

.ak-planet-sym {
  font: 700 8.5px system-ui, sans-serif;
  fill: #2a1a05;
  pointer-events: none;
}

.ak-planet-mars .ak-planet-sym,
.ak-planet-saturn .ak-planet-sym {
  fill: #fff4dc;
}

/* retrograde: a small ring around the marker */
.ak-planet.retro .ak-planet-bead {
  stroke: #7a1d10;
  stroke-width: 2.2;
}

.ak-ptr-small {
  stroke-width: 1.8;
}

/* back dials after Freeth et al. 2008: glyphs found on the fragments are darker */
.ak-glyph {
  fill: #6b4a1c;
  opacity: 0.75;
}

.ak-glyph.found {
  fill: #5a1506;
  opacity: 1;
}

.ak-year {
  fill: #3a2810;
  opacity: 0.85;
}

.ak-ptr-date {
  stroke: #2e1f08;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.ak-read dd small {
  opacity: 0.7;
}

/* ── Lab: dictionary in calligraphy (a writing desk: wooden frame, green leather pad, paper) ── */
.wb {
  margin: 0.5rem 0 1rem;
  padding: 1rem 1.2rem 1.2rem;
  border-radius: 14px;
  background:
    repeating-linear-gradient(88deg, rgba(0, 0, 0, 0.05) 0 2px, transparent 2px 11px),
    linear-gradient(180deg, #7b5436, #5e3d24);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.16), 0 18px 40px -18px rgba(40, 20, 5, 0.65);
}

.wb-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0.2rem 0.9rem;
}

.wb-brand {
  font: 600 0.7rem var(--mono);
  letter-spacing: 0.14em;
  color: #f1dcb4;
}

.wb-brand b {
  margin-left: 0.3rem;
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
  font-weight: 400;
  color: #3b2a12;
  background: #d9b57a;
  text-transform: uppercase;
}

.wb-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.wb-tabs button,
.wb-btn {
  padding: 0.35rem 0.7rem;
  border: 0;
  border-radius: 999px;
  font: 600 0.74rem var(--sans);
  color: #3b2a12;
  background: linear-gradient(180deg, #e3c48c, #b98e4f);
  box-shadow: 0 2px 0 #6b4a1c, inset 0 1px 0 rgba(255, 255, 255, 0.45);
  cursor: pointer;
}

.wb-tabs button.on {
  color: #f6e7c8;
  background: linear-gradient(180deg, #5d3f17, #3f2a0e);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.5);
  transform: translateY(1px);
}

.wb-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 1rem;
  padding: 0.9rem;
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.08), transparent 60%),
    #2f4a3a;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.25), inset 0 3px 10px rgba(0, 0, 0, 0.35);
}

/* the paper */
.wb-paper {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1rem 1.2rem;
  border-radius: 3px;
  color: #1d2c63;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent 40%),
    #fbf7ec;
  box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.55);
  min-height: 420px;
}

.wb-row {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 0.6rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid rgba(29, 44, 99, 0.08);
  cursor: pointer;
}

.wb-row:last-child {
  border-bottom: 0;
}

.wb-lab {
  grid-row: 1 / span 2;
  font: 600 0.72rem var(--mono);
  color: #b3372b;
}

.wb-ink {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  min-width: 0;
}

.wb-read {
  font: 0.75rem var(--mono);
  color: #6f6a5c;
}

.wb-read:empty {
  display: none;
}

/* school-notebook lines behind the cursive: baseline at 71 %, x-height at 51 % of a line */
.wb-row--latin .wb-ink {
  flex-direction: column;
  gap: 0;
}

.wb-line {
  background: linear-gradient(transparent calc(71% - 1px), rgba(29, 44, 99, 0.18) calc(71% - 1px) 71%, transparent 71%),
    linear-gradient(transparent calc(51% - 1px), rgba(29, 44, 99, 0.08) calc(51% - 1px) 51%, transparent 51%);
}

.wb-cv {
  display: block;
  max-width: 100%;
}

.wb-row[role="button"]:hover {
  background: rgba(29, 44, 99, 0.035);
}

.wb-row[role="button"]:focus-visible {
  outline: 2px dashed rgba(179, 55, 43, 0.6);
  outline-offset: 2px;
}

.wb-miss {
  padding: 0.9rem 0;
  font: italic 0.85rem var(--sans);
  color: #9a9383;
}

/* 田字格 practice boxes: red frame, dashed cross */
.wb-box {
  position: relative;
  flex: none;
  width: 62px;
  height: 62px;
  border: 1px solid #c8453a;
  background:
    linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(200, 69, 58, 0.45) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(transparent calc(50% - 0.5px), rgba(200, 69, 58, 0.45) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}

.wb-box .wb-cv {
  position: absolute;
  inset: 0;
}

.wb-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 70%;
  color: #1c1a17;
  opacity: 0.8;
}

.wb-box .wb-fallback {
  font-size: calc(100% * 2.2);
}

/* one language at a time: everything bigger (sizes come from the script) */
.wb-paper.single {
  justify-content: center;
}

.wb-paper.single .wb-read {
  font-size: 0.95rem;
}

/* side: search, words, controls */
.wb-side {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-width: 0;
}

.wb-search {
  padding: 0.45rem 0.7rem;
  border: 0;
  border-radius: 6px;
  font: 0.85rem var(--sans);
  color: #1d1d1f;
  background: #fbf7ec;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.25);
}

.wb-words {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem;
  max-height: 340px;
  overflow-y: auto;
  padding-right: 0.2rem;
}

.wb-words button {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.35rem 0.5rem;
  border: 0;
  border-radius: 5px;
  font: 0.78rem var(--sans);
  text-align: left;
  color: #f4ecd8;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.wb-words button small {
  color: #e8c98f;
  font-size: 0.8rem;
}

.wb-words button:hover {
  background: rgba(255, 255, 255, 0.16);
}

.wb-words button.on {
  color: #2a1a05;
  background: #e3c48c;
}

.wb-words button.on small {
  color: #7a1d10;
}

.wb-none {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.8rem;
  color: #e8dcc0;
}

.wb-ctrl {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: auto;
}

.wb-btn--ink {
  color: #f6e7c8;
  background: linear-gradient(180deg, #2f3f7a, #1d2c63);
  box-shadow: 0 2px 0 #0f1838, inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.wb-speed {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font: 0.7rem var(--mono);
  color: #f1dcb4;
}

.wb-speed input {
  flex: 1;
  accent-color: #e3c48c;
}

/* all at once / one by one */
.wb-order {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.35);
}

.wb-order button {
  padding: 0.3rem 0.4rem;
  border: 0;
  border-radius: 999px;
  font: 600 0.7rem var(--sans);
  color: #e8d6b0;
  background: transparent;
  cursor: pointer;
}

.wb-order button.on {
  color: #2a1a05;
  background: linear-gradient(180deg, #e3c48c, #b98e4f);
  box-shadow: 0 1px 0 #6b4a1c;
}

.wb-order button:focus-visible {
  outline: 2px solid #f6cf55;
  outline-offset: 2px;
}

/* the pen tray */
.wb-pens {
  display: grid;
  gap: 0.25rem;
  padding: 0.35rem;
  border-radius: 8px;
  background: linear-gradient(180deg, #4a321c, #5d4127);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

.wb-pens button {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.5rem;
  border: 0;
  border-radius: 5px;
  font: 600 0.7rem var(--mono);
  color: #d9c39a;
  background: transparent;
  cursor: pointer;
}

.wb-pens svg {
  width: 100%;
  height: 12px;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.45));
  transition: transform 0.2s;
}

.wb-pens button:hover {
  background: rgba(255, 255, 255, 0.06);
}

.wb-pens button.on {
  color: #2a1a05;
  background: #e3c48c;
}

.wb-pens button.on svg {
  transform: translateX(-4px) rotate(-4deg);
}

.wb-words .wb-own {
  grid-column: 1 / -1;
  justify-content: flex-start;
  color: #2a1a05;
  background: linear-gradient(180deg, #f3dfb3, #e3c48c);
  font-weight: 600;
}

.wb-words .wb-own span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wb-pens button:focus-visible,
.wb-tabs button:focus-visible,
.wb-btn:focus-visible,
.wb-words button:focus-visible,
.wb-search:focus-visible {
  outline: 2px solid #f6cf55;
  outline-offset: 2px;
}

/* the meaning: an open book with a red cloth cover, a bookmark ribbon and page edges */
.wb-book {
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Noto Serif CJK JP", serif;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 1.8rem 0 2.2rem;
  padding: 10px 10px 20px;
  border-radius: 8px 8px 12px 12px;
  font-family: var(--serif);
  color: #2b2418;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, #7a2d24, #57201a);
  box-shadow: 0 26px 44px -22px rgba(30, 10, 5, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* the stack of pages peeking out at the bottom */
.wb-book::before,
.wb-book::after {
  content: "";
  position: absolute;
  bottom: 10px;
  height: 9px;
  background: repeating-linear-gradient(180deg, #f1e8cf 0 1px, #d6c79f 1px 2px);
}

.wb-book::before {
  left: 13px;
  right: 50%;
  border-radius: 0 0 0 5px;
}

.wb-book::after {
  left: 50%;
  right: 13px;
  border-radius: 0 0 5px 0;
}

.wb-page {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 320px;
  padding: 1.5rem 1.8rem 2.6rem;
}

.wb-page--l {
  border-radius: 4px 0 0 4px;
  background: linear-gradient(90deg, #f3ebd3 0, #fbf6e8 6%, #fbf6e8 84%, #e7dcbd 100%);
}

.wb-page--r {
  border-radius: 0 4px 4px 0;
  background: linear-gradient(90deg, #e7dcbd 0, #fbf6e8 16%, #fbf6e8 94%, #f3ebd3 100%);
}

/* the fold in the middle */
.wb-page--l::after,
.wb-page--r::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 26px;
  pointer-events: none;
}

.wb-page--l::after {
  right: 0;
  background: linear-gradient(90deg, transparent, rgba(90, 65, 20, 0.22));
}

.wb-page--r::after {
  left: 0;
  background: linear-gradient(90deg, rgba(90, 65, 20, 0.28), transparent);
}

.wb-run {
  display: flex;
  justify-content: space-between;
  margin: 0 0 1.1rem;
  padding-bottom: 0.35rem;
  max-width: none;
  border-bottom: 1px solid #d9cca8;
  font: 600 0.66rem var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8a7a58;
}

.wb-head {
  margin: 0 0 0.35rem;
  font: 700 clamp(1.7rem, 4vw, 2.3rem) / 1.1 var(--serif);
  color: #2b2418;
  overflow-wrap: anywhere;
}

.wb-head small {
  font-size: 0.5em;
  font-weight: 400;
  font-style: italic;
  color: #7c6c4c;
}

.wb-gram {
  margin: 0 0 1rem;
  max-width: none;
  font-size: 0.92rem;
  color: #6b5d40;
}

.wb-ipa {
  font-family: "Charis SIL", "Doulos SIL", "Gentium Plus", var(--serif);
}

.wb-trans {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.2rem 0.8rem;
  margin: 0 0 1.1rem;
  font-size: 1rem;
}

.wb-trans dt {
  padding-top: 0.2rem;
  font: 600 0.66rem var(--mono);
  color: #b3372b;
}

.wb-trans dd {
  margin: 0;
}

.wb-trans dd small {
  font-size: 0.8em;
  color: #7c6c4c;
}

.wb-dim {
  color: #b0a483;
}

.wb-origin {
  margin: 0;
  max-width: none;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #3d3424;
}

.wb-origin b {
  font-variant: small-caps;
  letter-spacing: 0.04em;
}

.wb-senses {
  margin: 0 0 1rem;
  padding-left: 1.5rem;
  font-size: 1rem;
  line-height: 1.6;
}

.wb-senses li {
  margin-bottom: 0.35rem;
  padding-left: 0.2rem;
}

.wb-senses li::marker {
  font-weight: 700;
  color: #b3372b;
}

.wb-note {
  max-width: none;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #5b4e33;
}

.wb-book a {
  color: #8a2417;
}

.wb-def-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
}

.wb-auto {
  font: 0.8rem var(--sans);
  color: #6b5d40;
}

.wb-folio {
  position: absolute;
  bottom: 0.9rem;
  font: italic 0.8rem var(--serif);
  color: #8a7a58;
}

.wb-page--l .wb-folio {
  left: 1.8rem;
}

.wb-page--r .wb-folio {
  right: 1.8rem;
}

.wb-ribbon {
  position: absolute;
  z-index: 2;
  top: -6px;
  right: 16%;
  width: 14px;
  height: 78px;
  background: linear-gradient(90deg, #a5281d, #c83a2c 50%, #a5281d);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3));
}

.wb-src {
  margin: 0;
  max-width: none;
  font: 0.72rem var(--sans);
  color: #8a7a58;
}

@media (max-width: 700px) {
  .wb-book {
    grid-template-columns: 1fr;
  }

  .wb-book::before {
    right: 13px;
    border-radius: 0 0 5px 5px;
  }

  .wb-book::after {
    display: none;
  }

  .wb-page {
    min-height: 0;
    padding: 1.3rem 1.2rem 2.4rem;
  }

  .wb-page--l {
    border-radius: 4px 4px 0 0;
    background: #fbf6e8;
    border-bottom: 1px dashed #d9cca8;
  }

  .wb-page--r {
    border-radius: 0 0 4px 4px;
    background: #fbf6e8;
  }

  .wb-page--l::after,
  .wb-page--r::after {
    display: none;
  }

  .wb-page--l .wb-folio {
    left: 1.2rem;
  }

  .wb-page--r .wb-folio {
    right: 1.2rem;
  }
}

@media (max-width: 860px) {
  .wb {
    padding: 0.8rem 0.6rem 0.9rem;
  }
  .wb-main {
    grid-template-columns: 1fr;
    padding: 0.6rem;
  }
  .wb-paper {
    min-height: 0;
    padding: 0.7rem;
  }
  .wb-row {
    grid-template-columns: 2.6rem minmax(0, 1fr);
  }
  .wb-pens {
    grid-template-columns: repeat(3, 1fr);
  }
  .wb-pens button {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0.2rem;
  }
  .wb-words {
    grid-template-columns: 1fr 1fr 1fr;
    max-height: 200px;
  }
}

.tv-wb {
  filter: drop-shadow(0 3px 4px rgba(60, 35, 5, 0.18));
}

/* ── Lab: tomb of ciphers (sandstone, lapis, gold; a torch that follows the pointer) ── */
@font-face {
  font-family: "Macondo";
  src: url("grab/macondo.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}

@font-face {
  font-family: "Hieroglyphs";
  src: url("grab/hieroglyphs.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+13000-1345F;
}

.gr {
  --sand: #d8b47a;
  --sand-d: #b38a4f;
  --ink: #3a2412;
  --lapis: #1f4e8c;
  --red: #a8392a;
  --gold: #e2b23c;
  --tale: "Macondo", "Iowan Old Style", Georgia, serif;
  --col: 52px;
  position: relative;
  margin: 0.5rem 0 1.5rem;
  padding: 62px calc(var(--col) + 14px) 34px;
  scroll-margin-top: 90px;
  border-radius: 6px 6px 4px 4px;
  color: #f3e6c8;
  /* the temple wall behind: big sandstone blocks in staggered courses */
  background:
    linear-gradient(90deg, transparent 0 calc(100% - 2px), rgba(70, 45, 15, 0.35) 0) 0 0 / 180px 72px,
    linear-gradient(90deg, transparent 0 calc(100% - 2px), rgba(70, 45, 15, 0.35) 0) 90px 36px / 180px 72px,
    linear-gradient(180deg, transparent 0 calc(100% - 2px), rgba(70, 45, 15, 0.4) 0) 0 0 / 100% 36px,
    radial-gradient(ellipse at 50% 0%, rgba(255, 235, 190, 0.35), transparent 60%),
    linear-gradient(180deg, #c9a569, #a8854d);
  box-shadow: 0 26px 50px -24px rgba(30, 15, 5, 0.8);
}

/* the lintel: two big white limestone blocks across the columns, with carved signs */
.gr::before {
  content: "𓋹 𓊽 𓆣 𓇳 𓁹 𓋴 𓄿 𓃀 𓅱 𓁹 𓇳 𓆣 𓊽 𓋹";
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  overflow: hidden;
  font: 20px/48px "Hieroglyphs", sans-serif;
  letter-spacing: 0.4em;
  text-align: center;
  white-space: nowrap;
  color: rgba(120, 95, 60, 0.75);
  text-shadow: 0 1px 0 #fff, 0 -1px 0 rgba(90, 70, 40, 0.35);
  border-radius: 6px 6px 0 0;
  background:
    linear-gradient(90deg, transparent calc(38% - 1px), rgba(110, 90, 60, 0.45) calc(38% - 1px) 38%, transparent 38% calc(71% - 1px), rgba(110, 90, 60, 0.45) calc(71% - 1px) 71%, transparent 71%),
    repeating-linear-gradient(8deg, rgba(150, 130, 100, 0.07) 0 3px, transparent 3px 11px),
    linear-gradient(180deg, #fbf8f1, #e9e1cf 70%, #d3c7ae);
  box-shadow: 0 6px 12px -4px rgba(40, 25, 5, 0.55), inset 0 -3px 0 rgba(120, 100, 70, 0.35);
}

.gr > .gr-in {
  z-index: 1;
}

/* white columns with a papyrus-bundle look: base, fluted shaft, flared capital, abacus */
.gr-col {
  position: absolute;
  z-index: 2;
  top: 40px;
  bottom: 0;
  width: var(--col);
  display: grid;
  grid-template-rows: 18px 26px 1fr 16px;
  justify-items: center;
  filter: drop-shadow(4px 0 6px rgba(40, 25, 5, 0.45));
}

.gr-col--l {
  left: 4px;
}

.gr-col--r {
  right: 4px;
}

.gr-col::before { /* abacus: the square block right under the lintel */
  content: "";
  width: 78%;
  background: linear-gradient(180deg, #f7f3ea, #ddd3bf);
  box-shadow: inset 0 -2px 0 rgba(120, 100, 70, 0.35);
}

.gr-col i { /* capital, flaring out like a papyrus umbel */
  width: 100%;
  background:
    repeating-linear-gradient(90deg, rgba(120, 100, 70, 0.22) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #faf6ee, #e2d8c4);
  clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%);
  border-bottom: 3px solid #c9a14a;
}

.gr-col b { /* the shaft, fluted */
  width: 68%;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.7) 0 3px, rgba(160, 140, 110, 0.35) 3px 5px, transparent 5px 8px),
    linear-gradient(90deg, #d8ceb9, #fbf8f1 40%, #e6ddcb 70%, #c9bda3);
  box-shadow: inset 0 6px 0 -2px #c9a14a, inset 0 12px 0 -6px rgba(201, 161, 74, 0.6);
}

.gr-col u { /* round base */
  width: 92%;
  border-radius: 50% 50% 4px 4px / 40% 40% 4px 4px;
  background: linear-gradient(180deg, #f7f3ea, #cfc3aa);
  box-shadow: inset 0 -2px 0 rgba(120, 100, 70, 0.4);
}

.gr-tools {
  position: absolute;
  z-index: 3;
  top: 0.8rem;
  left: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.7rem;
  max-width: calc(100% - 15rem);
  font-size: 0.8rem;
  color: #f3e6c8;
}

.gr-tools[hidden] {
  display: none;
}

.gr-in:has(.gr-tools.ask) .gr-steps {
  visibility: hidden;
}

.gr-tools.ask {
  padding: 0.4rem 0.7rem;
  border-radius: 8px;
  background: rgba(20, 12, 5, 0.9);
  box-shadow: 0 0 0 1px rgba(226, 178, 60, 0.5);
}

.gr-tools .gr-btn {
  padding: 0.3rem 0.7rem;
  font-size: 0.75rem;
}

.gr-in {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: #1a120b;
  box-shadow: 0 0 0 2px rgba(70, 45, 15, 0.6), 0 0 0 4px rgba(226, 178, 60, 0.55), inset 0 4px 14px rgba(0, 0, 0, 0.6);
}

.gr-steps[hidden],
.gr-god[hidden] {
  display: none;
}

.gr-h,
.gr-ds,
.gr-hubsign,
.gr-face,
.gr-gsign,
.gr-ankh,
.gr-relief {
  font-family: "Hieroglyphs", "Noto Sans Egyptian Hieroglyphs", "Segoe UI Historic", sans-serif;
  font-style: normal;
  font-weight: 400;
}

.gr-steps {
  position: absolute;
  z-index: 3;
  top: 0.8rem;
  right: 0.9rem;
  display: flex;
  gap: 0.3rem;
}

.gr-steps span {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.25rem;
  border: 1px solid rgba(226, 178, 60, 0.5);
  border-radius: 999px;
  font: 600 0.62rem var(--mono);
  color: rgba(243, 230, 200, 0.55);
}

.gr-steps span:last-child {
  font-family: "Hieroglyphs", sans-serif;
  font-size: 0.8rem;
}

.gr-steps .done {
  color: #2a1a05;
  background: var(--gold);
  border-color: var(--gold);
}

.gr-steps .on {
  color: #f6e7c8;
  border-color: #f6e7c8;
  box-shadow: 0 0 10px rgba(226, 178, 60, 0.6);
}

.gr-scene {
  position: relative;
  min-height: 460px;
  padding: 3rem 1.4rem 1.6rem;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.05) 0 2px, transparent 2px 38px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.04) 0 2px, transparent 2px 76px),
    radial-gradient(ellipse at 50% 30%, #6d4a28, #3a2412 75%);
}

/* torchlight: darkness everywhere except around the pointer */
.gr-scene.dark::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(circle 340px at var(--lx, 50%) var(--ly, 40%), rgba(255, 190, 90, 0.08), rgba(10, 5, 2, 0.08) 45%, rgba(10, 5, 2, 0.45) 100%);
  animation: gr-flicker 3.2s ease-in-out infinite;
}

@keyframes gr-flicker {
  0%, 100% { opacity: 1; }
  40% { opacity: 0.9; }
  55% { opacity: 1; }
  70% { opacity: 0.93; }
}

.gr-scene > * {
  position: relative;
  z-index: 1;
}

.gr-place {
  margin: 0 0 0.6rem;
  font: 600 0.7rem var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.gr-lead,
.gr-story p:not(.gr-place) {
  max-width: 62ch;
  margin: 0 0 1rem;
  font: 1.08rem/1.6 var(--tale);
  color: #f3e6c8;
}

.gr-title {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin: 0 0 0.9rem;
  font: 400 1.7rem var(--tale);
  color: #f6e7c8;
}

.gr-title span {
  flex: none;
  font: 600 0.7rem var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.gr-note,
.gr-cap {
  max-width: none;
  margin: 0.8rem 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(243, 230, 200, 0.7);
}

.gr-win {
  max-width: none;
  margin: 1rem 0 0.8rem;
  font: 1.15rem var(--tale);
  color: #ffd66b;
  text-shadow: 0 0 12px rgba(226, 178, 60, 0.5);
}

.gr-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  margin-top: 0.6rem;
}

.gr-row--c {
  justify-content: center;
}

.gr-btn {
  padding: 0.45rem 0.9rem;
  border: 0;
  border-radius: 6px;
  font: 600 0.8rem var(--sans);
  color: #2a1a05;
  background: linear-gradient(180deg, #ecd3a0, #c9a063);
  box-shadow: 0 2px 0 #6b4a1c, inset 0 1px 0 rgba(255, 255, 255, 0.5);
  cursor: pointer;
  text-decoration: none;
}

.gr-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.gr-btn--gold {
  background: linear-gradient(180deg, #ffe08a, #d9a42a);
  box-shadow: 0 2px 0 #7a5410, 0 0 16px rgba(226, 178, 60, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.gr-link {
  padding: 0.2rem 0;
  border: 0;
  font: 0.78rem var(--sans);
  color: rgba(243, 230, 200, 0.75);
  background: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.gr-btn:focus-visible,
.gr-link:focus-visible,
.gr-gods button:focus-visible,
.gr-disk:focus-visible,
.gr-sub button:focus-visible,
.gr-bars button:focus-visible,
.gr-keys button:focus-visible {
  outline: 2px solid #ffd66b;
  outline-offset: 2px;
}

/* sandstone panels */
.gr-wall {
  position: relative;
  padding: 1rem;
  border-radius: 4px;
  color: var(--ink);
  background:
    repeating-linear-gradient(177deg, rgba(120, 80, 30, 0.07) 0 3px, transparent 3px 9px),
    radial-gradient(ellipse at 30% 20%, #ecd3a0, var(--sand) 60%, var(--sand-d));
  box-shadow: inset 0 0 0 1px rgba(90, 60, 20, 0.35), inset 0 -8px 20px rgba(90, 60, 20, 0.25), 0 10px 20px -10px rgba(0, 0, 0, 0.6);
}

.gr-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
}

/* intro: the museum in Tübingen */
.gr[data-step="intro"] .gr-scene {
  background: linear-gradient(180deg, #efe8dc, #d8cfc0);
  color: #2b2418;
}

.gr-museum {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 1rem 1.4rem;
}

.gr-mwall {
  position: relative;
  grid-row: 1 / span 2;
  min-height: 360px;
  border-radius: 4px;
  overflow: hidden;
  background: linear-gradient(180deg, #d9c49d, #bfa576);
  box-shadow: inset 0 0 40px rgba(80, 55, 20, 0.35);
}

.gr-relief {
  position: absolute;
  inset: 0.6rem;
  font-size: 1.9rem;
  line-height: 1.5;
  letter-spacing: 0.25em;
  word-break: break-all;
  color: rgba(90, 60, 25, 0.28);
  text-shadow: 1px 1px 0 rgba(255, 240, 210, 0.35);
}

/* a false door: nested niches */
.gr-falsedoor {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 44%;
  height: 78%;
  transform: translateX(-50%);
  background: #b3935f;
  box-shadow: inset 0 0 0 3px rgba(80, 55, 20, 0.35);
}

.gr-falsedoor i {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #a6844f;
  box-shadow: inset 0 0 0 3px rgba(80, 55, 20, 0.35), -4px 0 6px rgba(60, 40, 10, 0.2);
}

.gr-falsedoor i:nth-child(1) {
  width: 80%;
  height: 88%;
}

.gr-falsedoor i:nth-child(2) {
  width: 58%;
  height: 74%;
  background: #97773f;
}

.gr-falsedoor i:nth-child(3) {
  width: 30%;
  height: 60%;
  background: #7a5c2c;
}

.gr-fd-glow {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 30%;
  height: 60%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 70%, rgba(255, 220, 130, 0.95), rgba(255, 180, 60, 0.35) 55%, transparent 75%);
  mix-blend-mode: screen;
  animation: gr-glow 2.6s ease-in-out infinite;
}

@keyframes gr-glow {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.gr-plaque {
  display: grid;
  gap: 0.15rem;
  align-self: start;
  padding: 0.7rem 0.9rem;
  border-left: 3px solid #2b2418;
  font-size: 0.8rem;
  color: #4a4032;
  background: #f7f3ea;
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.35);
}

.gr-plaque b {
  font-size: 0.9rem;
  color: #2b2418;
}

.gr[data-step="intro"] .gr-place {
  color: #8a5a14;
}

.gr[data-step="intro"] .gr-story p:not(.gr-place) {
  color: #2b2418;
}

.gr-done-note {
  font-size: 0.8rem;
  color: #8a5a14;
}

/* the false door breaks apart */
.gr-falsedoor.cracking {
  animation: gr-shake 0.45s;
}

.gr-falsedoor.cracking .gr-fd-glow {
  width: 60%;
  height: 90%;
  opacity: 1;
  animation: none;
  transition: all 0.6s;
}

.gr-falsedoor.broken {
  background: radial-gradient(ellipse at 50% 70%, #fff3cf, #ffc75a 45%, #b0761c);
  box-shadow: 0 0 60px rgba(255, 200, 90, 0.8);
}

.gr-falsedoor.broken > i {
  visibility: hidden;
}

.gr-rubble {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.gr-rubble i {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(60, 40, 10, 0.4);
}

.gr-falsedoor:not(.broken) .gr-rubble i {
  filter: drop-shadow(0 0 0 transparent);
  outline: none;
}

.gr-rubble b {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(220, 190, 140, 0.8);
  filter: blur(3px);
  opacity: 0;
}

/* stepping through the false door */
.gr.gr-portal::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
  background: radial-gradient(circle at 30% 60%, #fff6d8, #ffd66b 40%, #b0761c);
  animation: gr-portal 1.3s ease-in forwards;
  pointer-events: none;
}

@keyframes gr-portal {
  0% { opacity: 0; clip-path: circle(0% at 30% 62%); }
  60% { opacity: 1; clip-path: circle(120% at 30% 62%); }
  100% { opacity: 1; clip-path: circle(150% at 30% 62%); }
}

/* choosing a god */
.gr-gods {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
}

.gr-gods button {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  padding: 1rem 0.6rem;
  border: 1px solid rgba(226, 178, 60, 0.35);
  border-radius: 10px;
  font: 0.8rem var(--sans);
  text-align: center;
  color: #f3e6c8;
  background: linear-gradient(180deg, rgba(255, 220, 150, 0.1), rgba(0, 0, 0, 0.2));
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.gr-gods button:hover,
.gr-gods button.on {
  transform: translateY(-3px);
  box-shadow: 0 0 22px rgba(226, 178, 60, 0.35);
  border-color: var(--gold);
}

.gr-gsign {
  font-size: 3.4rem;
  line-height: 1.1;
  color: var(--gold);
  text-shadow: 0 0 14px rgba(226, 178, 60, 0.45);
}

.gr-gods b {
  font: 1.3rem var(--tale);
}

.gr-gods small {
  color: rgba(243, 230, 200, 0.75);
}

.gr-gods em {
  font-size: 0.75rem;
  color: #ffd66b;
}

/* the god at your side */
.gr-god {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.8rem 1.1rem;
  border-top: 1px solid rgba(226, 178, 60, 0.3);
  background: linear-gradient(180deg, #2a1c10, #1a120b);
}

.gr-face {
  font-size: 2.6rem;
  line-height: 1;
  color: var(--gold);
  text-shadow: 0 0 12px rgba(226, 178, 60, 0.5);
}

.gr-bubble b {
  font: 600 0.7rem var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}

.gr-bubble p {
  max-width: none;
  margin: 0.15rem 0 0;
  color: #f3e6c8;
  font-size: 0.9rem;
  line-height: 1.5;
}

.gr-bubble p {
  font: 1.02rem/1.5 "Macondo", "Hieroglyphs", Georgia, serif;
}

.gr-godbtns {
  display: grid;
  justify-items: end;
  gap: 0.3rem;
}

/* chamber 1: sign table and cartouche */
.gr-table {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(2.6rem, 1fr));
  gap: 0.35rem;
  align-content: start;
}

.gr-table span {
  display: grid;
  justify-items: center;
  padding: 0.2rem 0 0.15rem;
  border-radius: 3px;
  font: 600 0.7rem var(--mono);
  color: var(--red);
  background: rgba(255, 240, 210, 0.35);
}

.gr-table .gr-h {
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--ink);
}

.gr-door {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.6rem;
  text-align: center;
}

.gr-door.shake {
  animation: gr-shake 0.4s;
}

@keyframes gr-shake {
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.gr-cart {
  padding: 0.6rem 1.6rem 0.6rem 1.2rem;
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 6px 0 0 -3px var(--ink);
}

.gr-cart .gr-h {
  font-size: 2.6rem;
  letter-spacing: 0.12em;
  color: var(--lapis);
}

.gr-voice {
  margin: 0;
  font: 1.1rem var(--tale);
  color: #5a3a1a;
}

.gr-say {
  display: flex;
  gap: 0.5rem;
}

.gr-say input {
  width: 9rem;
  padding: 0.45rem 0.7rem;
  border: 0;
  border-radius: 6px;
  font: 600 1rem var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  background: #f7ecd4;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.gr-msg {
  min-height: 1.2em;
  margin: 0;
  font-size: 0.85rem;
  color: var(--red);
}

.gr-door.open .gr-cart {
  box-shadow: 6px 0 0 -3px var(--ink), 0 0 26px rgba(226, 178, 60, 0.8);
}

.gr-door .gr-win {
  color: #7a4a0c;
  text-shadow: none;
}

/* chamber 2: painting and stone disk */
.gr-split--disk {
  align-items: center;
}

.gr-paint {
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  text-align: center;
}

.gr-hour {
  display: grid;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--red);
}

.gr-barque {
  position: relative;
  font-size: 4.2rem;
  line-height: 1.1;
  color: var(--lapis);
}

.gr-sun {
  position: absolute;
  top: -0.35em;
  left: 50%;
  font-size: 0.5em;
  color: var(--red);
  transform: translateX(-50%);
}

.gr-snake {
  font-size: 2.4rem;
  letter-spacing: -0.1em;
  color: #2f6b3a;
}

.gr-paint .gr-cap {
  color: #5a3a1a;
}

.gr-disk-wrap {
  display: grid;
  justify-items: center;
}

.gr-disk {
  width: min(100%, 300px);
  height: auto;
  touch-action: none;
  cursor: grab;
}

.gr-disk-out {
  fill: #c9a466;
  stroke: #6b4a1c;
  stroke-width: 2;
}

.gr-disk-in {
  fill: #b38a4f;
  stroke: #6b4a1c;
  stroke-width: 2;
}

.gr-disk-hub {
  fill: #9a7440;
  stroke: #6b4a1c;
  stroke-width: 1.5;
}

.gr-dl {
  font: 700 15px var(--mono);
  fill: var(--ink);
  text-anchor: middle;
  dominant-baseline: middle;
}

.gr-disk-rot {
  transition: transform 0.25s ease;
}

.gr-disk-rot.drag {
  transition: none;
}

.gr-ds {
  font-size: 19px;
  fill: #2a1a0a;
  text-anchor: middle;
  dominant-baseline: middle;
}

.gr-hubsign {
  font-size: 44px;
  fill: #6b2a15;
  text-anchor: middle;
}

.gr-pointer {
  fill: var(--red);
}

.gr-cipher {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin-top: 1rem;
}

.gr-cw {
  display: flex;
  gap: 0.15rem;
}

.gr-cl {
  display: grid;
  justify-items: center;
  min-width: 1.6rem;
}


.gr-cipher b {
  font-size: 1.5rem;
  line-height: 1.2;
}

.gr-cipher i {
  font: 700 0.85rem var(--mono);
  font-style: normal;
  color: var(--red);
}

.gr-cipher.lit,
.gr-sub.lit {
  box-shadow: inset 0 0 0 1px rgba(90, 60, 20, 0.35), 0 0 30px rgba(226, 178, 60, 0.7);
}

.gr-cipher.lit i {
  color: #7a4a0c;
}

/* chamber 3: substitution and frequency */
.gr-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.1rem;
}

.gr-word {
  display: flex;
  gap: 0.1rem;
}

.gr-sub button {
  display: grid;
  justify-items: center;
  min-width: 1.75rem;
  padding: 0.15rem 0.1rem;
  border: 0;
  border-radius: 4px;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
}

.gr-sub button b {
  font-size: 1.5rem;
  line-height: 1.2;
}

.gr-sub button i {
  display: block;
  width: 1.2rem;
  min-height: 1.1rem;
  border-bottom: 1.5px solid rgba(58, 36, 18, 0.5);
  font: 700 0.85rem var(--mono);
  font-style: normal;
  color: var(--red);
}

.gr-sub button.sel {
  background: rgba(31, 78, 140, 0.18);
  box-shadow: inset 0 0 0 1.5px var(--lapis);
}

.gr-sub button:disabled {
  cursor: default;
}

.gr-split--sub {
  margin-top: 1rem;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}

.gr-freq {
  padding: 0.8rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.25);
}

.gr-freq .gr-cap:first-child {
  margin: 0 0 0.5rem;
}

.gr-bars {
  display: flex;
  align-items: flex-end;
  gap: 0.15rem;
  height: 120px;
}

.gr-bars button {
  display: grid;
  grid-template-rows: 1fr auto auto;
  justify-items: center;
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  color: #f3e6c8;
  background: none;
  cursor: pointer;
}

.gr-bars i {
  align-self: end;
  width: 70%;
  height: calc(var(--h) * 100%);
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, #ffd66b, #b8801e);
}

.gr-bars b {
  font-size: 1rem;
}

.gr-bars small {
  font: 700 0.65rem var(--mono);
  color: #ffd66b;
}

.gr-bars button.sel i {
  background: linear-gradient(180deg, #8fb7ff, #1f4e8c);
}

.gr-mono {
  font-family: var(--mono);
  color: #ffd66b;
}

.gr-keys {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
  align-content: start;
}

.gr-keys button {
  padding: 0.4rem 0;
  border: 0;
  border-radius: 4px;
  font: 700 0.8rem var(--mono);
  color: #2a1a05;
  background: linear-gradient(180deg, #ecd3a0, #c9a063);
  box-shadow: 0 2px 0 #6b4a1c;
  cursor: pointer;
}

.gr-keys button.used {
  opacity: 0.5;
}

.gr-keys .gr-key-del {
  grid-column: span 2;
}

/* chamber 4: calculation and lock */
.gr-papyrus {
  color: #3a2412;
  background:
    repeating-linear-gradient(90deg, rgba(120, 90, 40, 0.06) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(0deg, rgba(120, 90, 40, 0.05) 0 2px, transparent 2px 9px),
    #ecdcaf;
}

.gr-papyrus .gr-cap {
  color: #5a3a1a;
}

.gr-calc {
  width: 100%;
  border-collapse: collapse;
}

.gr-calc td {
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid rgba(90, 60, 20, 0.2);
  font-size: 1.45rem;
  line-height: 1.1;
  color: #1c120a;
}

.gr-calc td span {
  display: inline-block;
}

.gr-calc tr.mark td {
  color: var(--red);
}

.gr-tick {
  width: 1.5rem;
  color: var(--red);
  font-family: "Hieroglyphs", sans-serif;
}

.gr-lock {
  display: grid;
  gap: 0.8rem;
  justify-items: center;
}

.gr-lock-show {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  min-height: 3.2rem;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-size: 1.9rem;
  color: #1c120a;
  background: rgba(255, 245, 220, 0.5);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.25);
}

.gr-lock.open .gr-lock-show {
  color: #7a4a0c;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.25), 0 0 24px rgba(226, 178, 60, 0.9);
}

.gr-dials {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}

.gr-dial {
  display: grid;
  justify-items: center;
  gap: 0.2rem;
}

.gr-dial .gr-h {
  font-size: 1.8rem;
  line-height: 1.1;
}

.gr-dial b {
  font: 700 0.75rem var(--mono);
  color: #5a3a1a;
}

.gr-dial .gr-btn {
  width: 2.2rem;
  padding: 0.25rem 0;
}

/* the end: sarcophagus, ankh, letter */
.gr-final {
  margin-top: 1.8rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 1.4rem;
  align-items: center;
}

.gr-sarc {
  position: relative;
  height: 240px;
  overflow: hidden;
}

.gr-sarc-box {
  position: absolute;
  inset: 30px 10% 0;
  display: grid;
  place-items: center;
  border-radius: 40% 40% 10px 10px / 30% 30% 10px 10px;
  background: radial-gradient(ellipse at 50% 40%, #3a2412, #120b05);
  box-shadow: inset 0 0 0 8px #b38a4f, inset 0 0 30px rgba(0, 0, 0, 0.8), 0 12px 24px -10px rgba(0, 0, 0, 0.8);
}

.gr-ankh {
  font-size: 5.5rem;
  color: #ffd66b;
  text-shadow: 0 0 18px rgba(255, 200, 80, 0.9), 0 0 50px rgba(255, 170, 40, 0.6);
  animation: gr-ankh 2.4s ease-in-out infinite;
}

@keyframes gr-ankh {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.gr-sarc-lid {
  position: absolute;
  inset: 20px 8% 10px;
  display: grid;
  place-items: center;
  border-radius: 40% 40% 10px 10px / 30% 30% 10px 10px;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.06) 0 2px, transparent 2px 14px),
    linear-gradient(180deg, #e3c07f, #b38a4f);
  box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.7);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.gr-sarc-lid.drag {
  cursor: grabbing;
}

.gr-sarc-lid:focus-visible {
  outline: 2px solid #ffd66b;
  outline-offset: 3px;
}

.gr-sarc.open .gr-sarc-lid {
  transform: translate(74%, 26px) rotate(11deg);
  cursor: default;
}

.gr-sarc-lid .gr-h {
  writing-mode: vertical-rl;
  font-size: 2rem;
  color: var(--lapis);
}

/* the ankh only glows once there's a gap */
.gr-sarc .gr-ankh {
  opacity: calc(0.25 + var(--open, 0) * 0.75);
}

.gr-sarc.open .gr-ankh {
  opacity: 1;
}

.gr-drag-hint {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 50%;
  margin: 0;
  font: 1rem var(--tale);
  color: #ffd66b;
  white-space: nowrap;
  transform: translateX(-50%);
  animation: gr-nudge 1.6s ease-in-out infinite;
  pointer-events: none;
}

.gr-sarc.open .gr-drag-hint {
  display: none;
}

@keyframes gr-nudge {
  0%, 100% { transform: translateX(-50%); }
  50% { transform: translateX(-42%); }
}

/* before the lid is off: only the sarcophagus, big and centred */
.gr-final.closed {
  grid-template-columns: minmax(0, 560px);
  justify-content: center;
}

.gr-final.closed .gr-sarc {
  height: 300px;
  padding-bottom: 1.6rem;
}

.gr-final.closed .gr-letter {
  display: none;
}

.gr-final:not(.closed) .gr-letter {
  animation: gr-unroll 0.8s ease-out;
}

@keyframes gr-unroll {
  from { opacity: 0; transform: translateY(12px) scaleY(0.9); }
}


.gr-letter {
  padding: 1.2rem 1.4rem;
  border-radius: 4px;
  box-shadow: 0 12px 26px -12px rgba(0, 0, 0, 0.7);
}

.gr-letter p {
  max-width: none;
  font: 1.05rem/1.6 var(--tale);
  color: #3a2412;
}

.gr-letter .gr-cap,
.gr-letter .gr-place {
  font-family: var(--mono);
  font-size: 0.72rem;
}

.gr-letter .gr-cap {
  font-family: var(--sans);
  font-size: 0.8rem;
}

.gr-letter .gr-place {
  color: #8a5a14;
}

.gr-sign {
  margin: 0;
  font: 1.5rem var(--tale) !important;
  color: #1d2c63;
}

.gr-bye {
  font-style: italic;
  color: #5a3a1a;
}

.gr-bye .gr-h {
  font-style: normal;
  font-size: 1.4rem;
  vertical-align: middle;
}

.gr-letter .gr-link {
  color: #5a3a1a;
}

@media (max-width: 760px) {
  .gr {
    --col: 20px;
    padding: 48px calc(var(--col) + 6px) 18px;
  }
  .gr::before {
    height: 38px;
    font-size: 14px;
    line-height: 38px;
  }
  .gr-col {
    top: 32px;
    grid-template-rows: 10px 14px 1fr 10px;
  }
  .gr-tools {
    max-width: calc(100% - 2rem);
  }
  .gr-cl {
    min-width: 1.2rem !important;
  }
  .gr-cipher b {
    font-size: 1.2rem !important;
  }
  .gr-cw {
    flex-wrap: wrap;
  }
  .gr-tools.ask {
    top: 0.5rem;
    left: 0.5rem;
    right: 0.5rem;
    max-width: none;
  }
  .gr-tools:not(.ask) {
    top: 0.9rem;
  }
  .gr-scene {
    min-height: 0;
    padding: 3rem 0.9rem 1.1rem;
  }
  .gr-museum,
  .gr-split,
  .gr-split--sub,
  .gr-final {
    grid-template-columns: 1fr;
  }
  .gr-mwall {
    grid-row: auto;
    min-height: 220px;
  }
  .gr-gods {
    grid-template-columns: 1fr 1fr;
  }
  .gr-god {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .gr-godbtns {
    grid-column: 1 / -1;
    grid-auto-flow: column;
    justify-content: space-between;
    align-items: center;
  }
  .gr-sarc {
    height: 200px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gr-scene.dark::after,
  .gr-fd-glow,
  .gr-ankh {
    animation: none;
  }
}

/* gallery: the golden ankh for everyone who opened the tomb */
.lab-ankh {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  font: 1.6rem "Hieroglyphs", sans-serif;
  color: #e2b23c;
  text-shadow: 0 0 10px rgba(226, 178, 60, 0.7);
}

.lab-tile-viz:has(.lab-ankh) {
  position: relative;
}

/* ── Lab: muscle map (an X-ray light box: aluminium frame, glowing panel, a film with two figures) ── */
.mk {
  margin: 0.5rem 0 1.5rem;
  padding: 0.9rem 1rem 1rem;
  border-radius: 14px;
  background: linear-gradient(180deg, #e9ecef, #c9ced4);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(0, 0, 0, 0.12), 0 18px 40px -20px rgba(20, 30, 45, 0.6);
  color: #1d2733;
}

.mk-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 0 0.2rem 0.8rem;
}

.mk-brand {
  font: 600 0.7rem var(--mono);
  letter-spacing: 0.14em;
  color: #4a5563;
}

.mk-brand b {
  margin-left: 0.3rem;
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
  font-weight: 400;
  color: #fff;
  background: #3b6ea8;
  text-transform: uppercase;
}

.mk-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
}

.mk-tabs button {
  padding: 0.3rem 0.7rem;
  border: 0;
  border-radius: 999px;
  font: 600 0.74rem var(--sans);
  color: #2b3542;
  background: linear-gradient(180deg, #fff, #dfe3e8);
  box-shadow: 0 1px 0 #9aa3ad, inset 0 1px 0 #fff;
  cursor: pointer;
}

.mk-tabs button.on {
  color: #fff;
  background: linear-gradient(180deg, #3b6ea8, #2b5486);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.3);
}

.mk-noeq {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: 0.3rem;
  font: 0.74rem var(--sans);
  color: #3a4452;
}

.mk-main {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 1rem;
}

/* the glowing panel, with the film clipped on */
.mk-panel {
  position: relative;
  align-self: start;
  padding: 1.3rem 1rem 1rem;
  border-radius: 8px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 90px),
    radial-gradient(ellipse at 50% 40%, #ffffff, #e9f3ff 55%, #cfe0f3);
  box-shadow: inset 0 0 0 3px #aab3bd, inset 0 0 40px rgba(120, 170, 230, 0.35), 0 0 24px rgba(160, 205, 255, 0.45);
}

.mk-clip {
  position: absolute;
  z-index: 2;
  top: 4px;
  width: 38px;
  height: 18px;
  border-radius: 3px;
  background: linear-gradient(180deg, #7b8490, #4a525c);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.mk-clip--l {
  left: 22%;
}

.mk-clip--r {
  right: 22%;
}

.mk-box {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  padding: 1rem 0.8rem 0.6rem;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(14, 24, 38, 0.93), rgba(20, 32, 50, 0.9));
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.mk-fig {
  margin: 0;
  display: grid;
  justify-items: center;
}

.mk-fig svg {
  width: 100%;
  max-width: 240px;
  max-height: 520px;
  height: auto;
  overflow: visible;
}

.mk-fig figcaption {
  margin-top: 0.3rem;
  font: 600 0.65rem var(--mono);
  letter-spacing: 0.2em;
  color: rgba(200, 225, 255, 0.55);
}

.mk-deco {
  fill: #2c3c50;
}

.mk-hair {
  fill: #1c2837;
}

.mk-m.mk-joint {
  fill: #2c3c50;
  cursor: default;
  pointer-events: none;
}

.mk-m {
  fill: #344860;
  cursor: pointer;
  transition: fill 0.35s, filter 0.35s, opacity 0.35s;
  outline: none;
}

.mk-m.hover,
.mk-m:focus-visible {
  filter: brightness(1.35) drop-shadow(0 0 2px rgba(255, 255, 255, 0.7));
}

.mk-m.p {
  fill: #ff7a2e !important;
  filter: drop-shadow(0 0 3px rgba(255, 140, 60, 0.8));
}

.mk-m.s {
  fill: #ffc88f !important;
}

.mk-m.on {
  fill: #7fd0ff !important;
  filter: drop-shadow(0 0 4px rgba(127, 208, 255, 0.9));
}

.mk-m.off {
  fill: #2a3a4f !important;
}

/* stretching: the same classes in cool colours */
.mk--stretch .mk-m.p {
  fill: #3fd0b4 !important;
  filter: drop-shadow(0 0 3px rgba(63, 208, 180, 0.8));
}

.mk--stretch .mk-m.s {
  fill: #b9f0de !important;
}

.mk--stretch .mk-chip.p,
.mk--stretch .mk-legend i {
  color: #06332b;
  background: #3fd0b4;
}

.mk--stretch .mk-chip.s,
.mk--stretch .mk-legend i.s {
  color: #1b4a40;
  background: #d2f5ea;
}

.mk--stretch .mk-scale i {
  background: linear-gradient(90deg, rgb(52, 72, 96), rgb(36, 104, 138), rgb(52, 178, 160), rgb(196, 246, 222));
}

.mk--stretch .mk-list button.on {
  background: #ecfbf6;
  box-shadow: inset 0 0 0 2px #2fb79c;
}

.mk--stretch .mk-list em {
  color: #1f9a82;
}

.mk-mode {
  display: flex;
  padding: 3px;
  border-radius: 999px;
  background: #b9c0c8;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
}

.mk-switches {
  display: flex;
  gap: 0.5rem;
}

.mk-body button {
  min-width: 2.4rem;
  font-size: 0.95rem;
}

.mk-body button.on,
.mk--stretch .mk-body button.on {
  background: linear-gradient(180deg, #4d7fb8, #2b5486);
}

.mk-mode button {
  padding: 0.3rem 0.8rem;
  border: 0;
  border-radius: 999px;
  font: 700 0.74rem var(--sans);
  color: #35404d;
  background: transparent;
  cursor: pointer;
}

.mk-mode button.on {
  color: #fff;
  background: linear-gradient(180deg, #ff8a45, #e0692a);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.mk--stretch .mk-mode button.on {
  background: linear-gradient(180deg, #3fd0b4, #22a58c);
}

.mk-mode button:focus-visible {
  outline: 2px solid #3b6ea8;
  outline-offset: 2px;
}

/* the magnifier and the Latin names */
.mk-lupe {
  float: right;
  width: 120px;
  height: 120px;
  margin: 0.4rem 0.2rem 0.4rem 0.8rem;
  border: 3px solid #5b646f;
  border-radius: 50%;
  background: #16202e;
  box-shadow: 0 0 0 3px #dfe3e8, 0 4px 10px rgba(0, 0, 0, 0.35);
}

.mk-lupe .o {
  fill: #33475e;
}

.mk-lupe .d {
  fill: #26354a;
}

.mk-lupe .t {
  fill: #7fd0ff;
}

.mk--stretch .mk-lupe .t {
  fill: #3fd0b4;
}

.mk-detail {
  clear: both;
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px solid #dde2e7;
}

.mk-detail summary {
  font: 600 0.7rem var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #3b6ea8;
  cursor: pointer;
}

.mk-detail ul {
  display: grid;
  gap: 0.35rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.mk-detail li {
  display: grid;
  font-size: 0.82rem;
  line-height: 1.35;
}

.mk-detail li i {
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  font-size: 0.95rem;
  color: #14202e;
}

.mk-detail li span {
  color: #5a6573;
}

.mk-goal {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border: 1px dashed #e0692a;
  border-radius: 999px;
  font: 600 0.65rem var(--sans);
  vertical-align: middle;
  color: #c2551c;
}

.mk-goaldot {
  font-weight: 400;
  color: #e0692a;
}

.mk-dose {
  font-weight: 600;
  color: #1f7a68 !important;
}

.mk-for {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem !important;
}

.mk-for span {
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  color: #2b3542;
  background: #e6eaee;
}

.mk-tip {
  position: absolute;
  z-index: 3;
  margin: 0;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font: 600 0.72rem var(--sans);
  white-space: nowrap;
  color: #0d1624;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  transform: translate(12px, -130%);
  pointer-events: none;
}

/* the side: what's selected, and the exercise list */
.mk-side {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.7rem;
  min-width: 0;
}

.mk-info {
  position: relative;
  padding: 0.9rem 1rem;
  border-radius: 8px;
  background: #fbfcfd;
  box-shadow: inset 0 0 0 1px #c3cad2, 0 3px 8px -4px rgba(0, 0, 0, 0.2);
}

.mk-info h3 {
  margin: 0.1rem 0 0.4rem;
  font-size: 1.2rem;
  color: #14202e;
}

.mk-info p {
  max-width: none;
  margin: 0 0 0.5rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: #3a4452;
}

.mk-info p:last-child {
  margin-bottom: 0;
}

.mk-kicker {
  font: 600 0.66rem var(--mono) !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #3b6ea8 !important;
}

.mk-x {
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
  border: 0;
  font-size: 1.3rem;
  line-height: 1;
  color: #6b7684;
  background: none;
  cursor: pointer;
}

.mk-lv {
  letter-spacing: 0.05em;
  color: #e0692a;
}

.mk-chips,
.mk-most {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
}

.mk-scale {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem !important;
}

.mk-scale i {
  flex: 1;
  max-width: 180px;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgb(52, 72, 96), rgb(112, 64, 140), rgb(232, 96, 52), rgb(255, 196, 110));
}

.mk-chip {
  padding: 0.2rem 0.55rem;
  border: 0;
  border-radius: 999px;
  font: 600 0.74rem var(--sans);
  cursor: pointer;
}

.mk-chip.p {
  color: #fff;
  background: #ff7a2e;
}

.mk-chip.s {
  color: #6b3a0c;
  background: #ffe0bf;
}

.mk-legend {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem !important;
}

.mk-legend i {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 3px;
  background: #ff7a2e;
}

.mk-legend i.s {
  margin-left: 0.6rem;
  background: #ffc88f;
}

.mk-list {
  display: grid;
  align-content: start;
  gap: 0.25rem;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 0.2rem;
}

.mk-list button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.45rem 0.7rem;
  border: 0;
  border-radius: 6px;
  font: 0.84rem var(--sans);
  text-align: left;
  color: #1d2733;
  background: rgba(255, 255, 255, 0.65);
  box-shadow: inset 0 0 0 1px rgba(120, 130, 145, 0.25);
  cursor: pointer;
}

.mk-list button:hover {
  background: #fff;
}

.mk-list button.on {
  background: #fff4ea;
  box-shadow: inset 0 0 0 2px #ff7a2e;
}

.mk-list small {
  font-size: 0.72rem;
  color: #6b7684;
  white-space: nowrap;
}

.mk-list em {
  font: 600 0.66rem var(--mono);
  font-style: normal;
  text-transform: uppercase;
  color: #ff7a2e;
}

.mk-list em.s {
  color: #c98a4b;
}

.mk-none {
  font-size: 0.85rem;
  color: #4a5563;
}

.mk-tabs button:focus-visible,
.mk-list button:focus-visible,
.mk-chip:focus-visible,
.mk-x:focus-visible {
  outline: 2px solid #3b6ea8;
  outline-offset: 2px;
}

@media (max-width: 800px) {
  .mk {
    padding: 0.7rem 0.6rem 0.8rem;
  }
  .mk-main {
    grid-template-columns: 1fr;
  }
  .mk-list {
    max-height: none;
  }
}

/* ── Lab exp_12: travel map ── */
@font-face {
  font-family: "IM Fell";
  src: url("reisen/fell.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "IM Fell";
  font-style: italic;
  src: url("reisen/fell-italic.woff2") format("woff2");
  font-display: swap;
}
.rk {
  --paper: #f4f6f7;
  --sea: #cfe3ee;
  --land: #e9ebe4;
  --land-v: #3aa35c;
  --border-c: #fff;
  --ink: #33505f;
  --trip: #d2462f;
  --pin: #d2462f;
  --font: var(--sans);
  --chrome: #1f2a33;
  --chrome-t: #eef3f6;
  margin: 0.5rem 0 1.5rem;
  border-radius: 14px;
  /* a green cutting mat like on a drafting table: 1 cm grid, 5 cm lines, a ruler along the top and left, angle lines in the corner */
  background-color: #1f5c47;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23f1e7a8' stroke-opacity='.35' stroke-width='1'%3E%3Cpath d='M220 220 L0 0 M220 220 L30 110 M220 220 L110 30'/%3E%3Cpath d='M220 90 A130 130 0 0 0 90 220' stroke-dasharray='2 4'/%3E%3C/g%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg, rgba(241, 231, 168, 0.75) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(90deg, rgba(241, 231, 168, 0.9) 0 1px, transparent 1px 50px),
    repeating-linear-gradient(0deg, rgba(241, 231, 168, 0.75) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(0deg, rgba(241, 231, 168, 0.9) 0 1px, transparent 1px 50px),
    linear-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.2) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 220px 220px, 100% 6px, 100% 11px, 6px 100%, 11px 100%, 50px 50px, 50px 50px, 10px 10px, 10px 10px;
  background-position: right bottom, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, repeat, repeat;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), inset 0 2px 0 rgba(255, 255, 255, 0.08), 0 18px 40px -20px rgba(20, 30, 45, 0.6);
  color: #f3f1e4;
  padding: 1rem 0.9rem 0.9rem 1.1rem;
  box-shadow: 0 18px 40px -20px rgba(20, 30, 45, 0.6);
}
.rk[data-style="middle"] {
  --paper: #efe2c2;
  --sea: #e6d6ae;
  --land: #f1e6c8;
  --land-v: #b8683a;
  --border-c: #6b4a2b;
  --ink: #4a3220;
  --trip: #8c2a1a;
  --pin: #8c2a1a;
  --font: "IM Fell", Georgia, serif;
  --chrome: #3a2a1c;
  --chrome-t: #f1e6c8;
}

.rk-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.rk-seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 2px;
  border-radius: 9px;
  background: rgba(12, 36, 27, 0.72);
}
.rk-seg button {
  border: 0;
  border-radius: 7px;
  padding: 0.35rem 0.7rem;
  background: transparent;
  color: inherit;
  font: 500 0.8rem var(--sans);
  cursor: pointer;
  opacity: 0.75;
}
.rk-seg button[aria-pressed="true"] {
  background: var(--chrome-t);
  color: var(--chrome);
  opacity: 1;
}
.rk-seg--layers button[aria-pressed="false"] {
  text-decoration: line-through;
  opacity: 0.5;
}

.rk-stage {
  position: relative;
  aspect-ratio: 2 / 1;
  min-height: 300px;
  max-height: 72vh;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: var(--sea);
  isolation: isolate;
}
.rk[data-style="middle"] .rk-stage {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.25 0 0 0 0 0.12 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(90, 60, 25, 0.28) 100%),
    var(--sea);
}

.rk[data-style="middle"] .rk-stage {
  box-shadow: inset 0 0 0 2px var(--border-c), inset 0 0 0 6px var(--paper), inset 0 0 0 7px var(--border-c);
}
.rk-map {
  /* drawn 1.6× larger than the frame (OS in reisen.js), so panning has map to show before it's redrawn */
  position: absolute;
  left: -30%;
  top: -30%;
  width: 160%;
  height: 160%;
  will-change: transform;
  transform-origin: 50% 50%;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.rk.is-moving .rk-map {
  cursor: grabbing;
}
.rk.is-picking .rk-map,
.rk.is-placing .rk-map {
  cursor: crosshair;
}
.rk-map path {
  vector-effect: non-scaling-stroke;
}
.rk-sea-bg {
  fill: transparent;
}
.rk-grat {
  fill: none;
  stroke: #fff;
  stroke-width: 0.8;
  opacity: 0.5;
}
.rk[data-style="middle"] .rk-grat {
  display: none;
}

.rk-coast path {
  fill: none;
  stroke-linejoin: round;
  display: none;
}
.rk[data-style="middle"] .rk-coast path {
  display: block;
}
.rk-ripple { stroke: var(--ink); stroke-width: 0.8; opacity: 0.35; }
.rk[data-zoom="near"] .rk-coast path,
.rk[data-zoom="close"] .rk-coast path { display: none !important; }
.rk-c {
  fill: var(--land);
  stroke: var(--border-c);
  stroke-width: 0.7;
  stroke-linejoin: round;
  transition: fill 0.4s;
}
.rk[data-style="middle"] .rk-c {
  stroke-width: 0.9;
  stroke-dasharray: 3 2;
}
.rk-c.is-v {
  fill: var(--land-v);
}
.rk[data-style="middle"] .rk-c.is-v {
  fill: color-mix(in srgb, var(--land-v) 62%, var(--land));
}
.rk.hide-countries .rk-c.is-v {
  fill: var(--land);
}
.rk-lake {
  fill: var(--sea);
  stroke: var(--border-c);
  stroke-width: 0.5;
}
.rk[data-style="modern"] .rk-lake {
  stroke: none;
}
.rk[data-style="middle"] .rk-ink {
  filter: url(#rk-rough);
}
.rk-mts {
  display: none;
}
.rk[data-style="middle"] .rk-mts {
  display: block;
}
/* the mountains have a fixed size on the map, so close up they'd be huge */
.rk[data-zoom="near"] .rk-mts,
.rk[data-zoom="close"] .rk-mts {
  display: none;
}
.rk-mt-fill {
  fill: var(--land);
}
.rk-mt-ink {
  fill: none;
  stroke: var(--ink);
  stroke-width: 0.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rk-deco {
  display: none;
}
.rk[data-style="middle"] .rk-deco {
  display: block;
}

.rk-beast path,
.rk-beast circle {
  /* strokes grow with the creature when zooming in, but only up to ~1.4× the world-view width */
  vector-effect: none;
  --lw: 1.3;
  fill: none;
  stroke: var(--ink);
  stroke-width: min(calc(var(--lw) * 1px), calc(var(--u, 3) * var(--lw) * 0.55px));
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rk-beast .rk-fill { fill: var(--paper); }
.rk-beast .rk-dark { fill: var(--ink); --lw: 0.5; }
.rk-beast .rk-hatch { --lw: 0.7; opacity: 0.85; }
.rk-beast .rk-teeth { fill: var(--paper); --lw: 0.7; }
.rk-beast .rk-water { --lw: 0.6; opacity: 0.4; stroke-dasharray: 5 3; }
.rk-beast .rk-wave { --lw: 1; fill: var(--sea); }
.rk-beast .rk-tent { --lw: 6; }
.rk-beast .rk-tent-c { stroke: var(--paper); --lw: 3.8; }
.rk-beast .rk-flag { fill: #8b1d14; --lw: 0.6; }

.rk-hic {
  font: italic 30px "IM Fell", Georgia, serif;
  fill: var(--ink);
  opacity: 0.8;
}
.rk-labels text {
  display: none;
  font: 600 calc(var(--u) * 11px) var(--font);
  fill: #fff;
  paint-order: stroke;
  stroke: rgba(20, 60, 35, 0.55);
  stroke-width: calc(var(--u) * 2.5px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
}
.rk-labels text.is-shown {
  display: block;
}
.rk[data-style="middle"] .rk-labels text {
  fill: var(--ink);
  stroke: var(--paper);
  font-weight: 400;
  font-size: calc(var(--u) * 14px);
  text-transform: none;
  letter-spacing: 0.04em;
}
.rk.hide-countries .rk-labels,
/* places off but trips on: the stops of the trips stay */
.rk.hide-places .rk-pin:not(.is-stop),
.rk.hide-places.hide-trips .rk-places,
.rk.hide-trips .rk-routes {
  display: none;
}

.rk-leg {
  fill: none;
  stroke: var(--trip);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: rk-in 0.5s calc(var(--i) * 0.12s) both;
}
.rk-leg--plane { stroke-dasharray: 7 5; stroke-width: 1.8; }
.rk-leg--train { stroke-width: 2.6; }
.rk-leg--ferry { stroke-dasharray: 1 5; stroke-width: 2.6; }
.rk-leg--bike { stroke-dasharray: 9 3 2 3; }
.rk-leg--hike { stroke-dasharray: 2 4; }
.rk-leg--row { stroke-dasharray: 5 2 1 2; stroke-width: 2.4; }
.rk-leg--bus, .rk-leg--car { stroke-width: 2; }
.rk[data-style="modern"] .rk-leg--plane { stroke: #2a6fb3; }
.rk[data-style="modern"] .rk-leg--train { stroke: #7b3fb0; }
.rk[data-style="modern"] .rk-leg--ferry,
.rk[data-style="modern"] .rk-leg--row { stroke: #127c8c; }
.rk[data-style="modern"] .rk-leg--car,
.rk[data-style="modern"] .rk-leg--bus { stroke: #c86a13; }
.rk[data-style="modern"] .rk-leg--bike,
.rk[data-style="modern"] .rk-leg--hike { stroke: #c2388a; }

@keyframes rk-in {
  from { opacity: 0; }
}
.rk-trip.is-dim {
  opacity: 0.18;
}
.rk-trip.is-sel .rk-leg {
  stroke-width: 3.2;
}
.rk-ic { cursor: pointer; display: none; }
.rk-ic.is-shown { display: block; }
/* while a trip plays, the whole route is already there, faint; each leg gets strong once travelled */
.rk-trip.is-playing .rk-leg:not(.is-done) { opacity: 0.45; animation: none; }
.rk-trip.is-playing .rk-leg, .rk-trip.no-fade .rk-leg { animation: none; }
/* animation switched off: just the lines, no vehicles on them */
.rk.hide-anim .rk-ic { display: none !important; }
.rk-trip.is-playing .rk-ic { display: none; }
.rk-anim { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.rk-ic .rk-ic-cute { fill: none; stroke: none; }
.rk[data-style="modern"] .rk-ic-ink,
.rk:not([data-style="modern"]) .rk-ic-cute { display: none; }
.rk-ic-bg {
  fill: var(--paper);
  stroke: var(--trip);
  stroke-width: 1.4;
}
.rk-ic-ink use {
  fill: var(--ink);
  stroke: var(--ink);
}
.rk-ic-hole, .rk-ic-hole-line { fill: var(--paper); stroke: none; }
.rk-ic-line { fill: none; stroke-width: 1.8; stroke-linecap: round; }
.rk-ic-hole-line { fill: none; stroke: var(--paper); stroke-width: 1.4; }

.rk-pin { cursor: pointer; }
.rk-pin-hit { fill: transparent; }
.rk-pin-dot {
  fill: var(--pin);
  stroke: #fff;
  stroke-width: 1.4;
}

.rk[data-style="middle"] .rk-pin-dot {
  fill: var(--paper);
  stroke: var(--pin);
  stroke-width: 2;
}
.rk-pin text {
  display: none;
  font: 600 12px var(--font);
  fill: var(--ink);
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: none;
}
.rk[data-style="middle"] .rk-pin text { font-weight: 400; font-size: 14px; }
.rk-pin.has-lbl text,
.rk-pin:hover text,
.rk-pin.is-pick text { display: block; }
.rk-pin.is-dim { opacity: 0.35; }
.rk-pin.is-minor .rk-pin-dot { transform: scale(0.65); }
.rk-pin.is-minor .rk[data-zoom="far"] .rk-pin.is-minor:not(.is-sel) { display: none; }
.rk-pin.is-pick .rk-pin-dot { fill: #f2c21b; }

.rk-zoom {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rk-zoom button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  color: #1f2a33;
  font: 600 1rem var(--sans);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.rk[data-style="middle"] .rk-zoom button {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--border-c);
  font-family: "IM Fell", Georgia, serif;
}
.rk-compass {
  position: absolute;
  left: 14px;
  bottom: 14px;
  width: 78px;
  display: none;
  pointer-events: none;
  opacity: 0.85;
}
.rk[data-style="middle"] .rk-compass { display: block; }
.rk-compass svg { display: block; width: 100%; }
.rk-cp-a { fill: var(--ink); }
.rk-cp-b { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
.rk-cp-ring { fill: none; stroke: var(--ink); stroke-width: 1; }
.rk-compass text { font: 16px "IM Fell", Georgia, serif; fill: var(--ink); }

.rk-title {
  position: absolute;
  top: 12px;
  left: 50%;
  translate: -50% 0;
  margin: 0;
  padding: 0.2rem 1.2rem;
  font: 1.5rem var(--font);
  color: var(--ink);
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 0 6px var(--paper), 0 0 2px var(--paper);
}
.rk-title:empty { display: none; }
.rk[data-style="middle"] .rk-title {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.rk-scale {
  position: absolute;
  right: 54px;
  bottom: 12px;
  margin: 0;
  padding-top: 2px;
  width: var(--w, 100px);
  border-top: 2px solid var(--ink);
  font: 0.7rem var(--mono);
  color: var(--ink);
  text-align: center;
  pointer-events: none;
}
.rk-tip {
  position: absolute;
  z-index: 3;
  margin: 0;
  padding: 0.25rem 0.55rem;
  border-radius: 6px;
  background: rgba(20, 28, 34, 0.9);
  color: #fff;
  font: 0.78rem var(--sans);
  pointer-events: none;
  white-space: nowrap;
}

/* the seal */
.rk.is-sealed .rk-map { filter: blur(2px) saturate(0.6); }
.rk-lock {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 1rem;
  background: radial-gradient(circle, rgba(244, 232, 205, 0.92) 0 38%, rgba(244, 232, 205, 0.55) 75%);
  color: #3b2616;
  text-align: center;
}
.rk-lock[hidden] { display: none; }
.rk-lock.is-wrong .rk-seal { animation: rk-shake 0.4s; }
@keyframes rk-shake {
  25% { translate: -6px 0; }
  50% { translate: 5px 0; }
  75% { translate: -3px 0; }
}
.rk-seal {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  border-radius: 46% 54% 50% 50% / 52% 48% 52% 48%;
  background: radial-gradient(circle at 38% 34%, #d8554a, #9c231b 55%, #6d1510);
  box-shadow: 0 3px 8px rgba(80, 10, 5, 0.45), inset 0 0 0 6px rgba(0, 0, 0, 0.12), inset 0 0 0 9px rgba(255, 255, 255, 0.07);
}
.rk-seal span {
  font: 2.2rem "IM Fell", Georgia, serif;
  color: #6d1510;
  text-shadow: 1px 1px 0 rgba(255, 180, 160, 0.45), -1px -1px 0 rgba(60, 0, 0, 0.5);
}
.rk-lock-t {
  margin: 0.2rem 0 0;
  font: 1.35rem "IM Fell", Georgia, serif;
}
.rk-lock input[type="password"] {
  width: min(240px, 80%);
  padding: 0.5rem 0.7rem;
  border: 1px solid #8a6a48;
  border-radius: 8px;
  background: #fffaf0;
  color: #3b2616;
  font: 0.95rem var(--sans);
  text-align: center;
}
.rk-remember { font: 0.8rem var(--sans); display: flex; gap: 0.35rem; align-items: center; }
.rk-lock-err { margin: 0; min-height: 1.2em; font: 0.85rem var(--sans); color: #8c2a1a; }
.rk-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 0;
  border-radius: 8px;
  padding: 0.45rem 0.9rem;
  background: #7a2a1c;
  color: #fff4e6;
  font: 600 0.85rem var(--sans);
  cursor: pointer;
}
.rk-btn.is-on { background: #d88a1c; }
.rk-btn--warn { background: #5d2a2a; }

/* numbers and trips under the map */
.rk-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 0.8rem 1.2rem;
  margin-top: 0.8rem;
  padding: 0 0.2rem;
}
.rk-nums {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}
.rk-info p,
.rk-edit p {
  color: inherit;
}
.rk-nums p {
  margin: 0;
  padding: 0.55rem 0.7rem;
  border-radius: 9px;
  background: rgba(12, 36, 27, 0.72);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.4rem;
}
.rk-nums b { font: 1.6rem var(--font); }
.rk-nums span { font: 0.8rem var(--sans); opacity: 0.8; }
.rk-nums i { flex-basis: 100%; font: normal 0.72rem var(--sans); opacity: 0.6; }
.rk-modes {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}
.rk-modes li {
  display: grid;
  grid-template-columns: 18px 5.5rem 1fr auto;
  align-items: center;
  gap: 0.5rem;
  font: 0.78rem var(--sans);
}
.rk-modes svg,
.rk-trip-m svg,
.rk-seg--modes svg { width: 16px; height: 16px; fill: currentColor; stroke: currentColor; }
.rk-modes em {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--trip) var(--w), rgba(255, 255, 255, 0.08) var(--w));
}
.rk-modes b { font: 0.75rem var(--mono); }
.rk-trips h3 { margin: 0 0 0.4rem; font: 1.1rem var(--font); }
.rk-trips ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; max-height: 320px; overflow: auto; }
.rk-trips button {
  width: 100%;
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  gap: 0.1rem 0.5rem;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 0.45rem 0.6rem;
  background: rgba(12, 36, 27, 0.72);
  color: inherit;
  font: 0.85rem var(--sans);
  cursor: pointer;
}
.rk-trips button[aria-pressed="true"] { border-color: #f1e7a8; background: rgba(12, 36, 27, 0.9); }
.rk-trip-y { font: 0.8rem var(--mono); opacity: 0.7; grid-row: span 2; }
.rk-trip-m { display: flex; gap: 0.2rem; }
.rk-trip-s { grid-column: 2 / 3; font-size: 0.75rem; opacity: 0.7; }
.rk-trip-k { font: 0.72rem var(--mono); opacity: 0.7; }
.rk-empty { margin: 0; font: 0.85rem var(--sans); opacity: 0.7; }

/* a chosen trip: everything else leaves the map */
.rk-trip.is-dim,
.rk-pin.is-dim { display: none; }
.rk-lakenames text {
  display: none;
  font: italic calc(var(--u) * 12px) var(--font);
  fill: #3f7597;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.7);
  stroke-width: calc(var(--u) * 2px);
  pointer-events: none;
}
.rk:not([data-style="modern"]) .rk-lakenames text { fill: var(--ink); stroke: var(--paper); }
.rk[data-zoom="close"] .rk-lakenames text { display: block; }
/* posters: no zoom buttons, nothing to grab */
.rk:not([data-style="modern"]) .rk-zoom,
.rk:not([data-style="modern"]) .rk-scale { display: none; }
.rk:not([data-style="modern"]) .rk-map { cursor: default; touch-action: auto; }

/* numbers and trips on sheets of paper lying on the mat */
.rk-info {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: 1.3rem 1.2rem;
  margin-top: 1.2rem;
  padding: 0 0.3rem 0.4rem;
  align-items: start;
}
/* the list lets its sheets join the grid (the SVG group is called rk-routes: Safari drops an SVG <g> with display: contents) */
.rk-info .rk-trips { display: contents; }
.rk-sheet {
  position: relative;
  margin: 0;
  padding: 1.1rem 1rem 0.9rem 2.2rem;
  color: #2a2438;
  background-color: #fbf8ef;
  border-radius: 2px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 8px 18px -8px rgba(0, 0, 0, 0.55);
  rotate: -0.5deg;
}
.rk-info > .rk-sheet:nth-child(even),
.rk-trips > .rk-sheet:nth-child(even) { rotate: 0.6deg; }
.rk-trips > .rk-sheet:nth-child(3n) { rotate: -0.9deg; }
/* a strip of tape on top */
.rk-sheet::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  width: 74px;
  height: 20px;
  translate: -50% 0;
  rotate: -3deg;
  background: rgba(238, 228, 190, 0.78);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.rk-sheet--lined {
  background-image:
    linear-gradient(90deg, transparent 1.55rem, rgba(222, 110, 110, 0.55) 1.55rem, rgba(222, 110, 110, 0.55) calc(1.55rem + 1px), transparent calc(1.55rem + 1px)),
    repeating-linear-gradient(transparent 0 23px, rgba(90, 140, 190, 0.28) 23px 24px);
  background-position: 0 0, 0 0.35rem;
}
.rk-sheet--grid {
  padding-left: 1rem;
  background-image:
    linear-gradient(rgba(90, 140, 190, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90, 140, 190, 0.2) 1px, transparent 1px);
  background-size: 12px 12px;
}
.rk-sheet h3 {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 0.35rem;
  font: 1.15rem var(--font);
  font-weight: 700;
  color: #2a2438;
}
.rk-sheet h3 small { font: 0.75rem var(--mono); opacity: 0.55; }
.rk-trips .rk-sheet ul { max-height: none; overflow: visible; gap: 0; }
.rk-trips .rk-sheet button {
  grid-template-columns: 3.3rem 1fr auto;
  min-height: 24px;
  padding: 0 0.3rem;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: #2a2438;
  line-height: 24px;
}
.rk-trips .rk-sheet button:hover { background: rgba(255, 226, 90, 0.35); }
.rk-trips .rk-sheet button[aria-pressed="true"] {
  background: linear-gradient(transparent 12%, rgba(255, 221, 60, 0.75) 12% 88%, transparent 88%);
  border: 0;
}
.rk-trips .rk-sheet .rk-trip-y { grid-row: auto; font-size: 0.75rem; }
.rk-trips .rk-sheet .rk-trip-s { grid-column: 1 / -1; line-height: 1.35; padding: 0 0 0.3rem 3.3rem; opacity: 0.75; }
.rk-sheet .rk-trip-m { color: #4b4560; }
.rk-sheet--grid .rk-nums p { background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(42, 36, 56, 0.12); color: #2a2438; }
.rk-sheet--grid .rk-modes { color: #2a2438; }
.rk-sheet--grid .rk-modes em { background: linear-gradient(90deg, var(--trip) var(--w), rgba(42, 36, 56, 0.1) var(--w)); }
@media (max-width: 720px) {
  .rk-info { grid-template-columns: 1fr; }
  .rk-sheet { rotate: 0deg !important; }
}

/* entry mode */
.rk-edit {
  margin-top: 0.9rem;
  padding: 0.8rem;
  border-radius: 10px;
  background: #fbf6ea;
  color: #2a2016;
  font: 0.85rem var(--sans);
}
.rk-edit h3 { margin: 0; font: 1.1rem var(--sans); font-weight: 700; }
.rk-edit .rk-seg { background: rgba(0, 0, 0, 0.07); }
.rk-edit .rk-seg button[aria-pressed="true"] { background: #2a2016; color: #fbf6ea; }
.rk-edit-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.rk-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-start; margin: 0.5rem 0; }
.rk-edit input:not([type="checkbox"]):not([type="file"]),
.rk-edit select {
  padding: 0.4rem 0.6rem;
  border: 1px solid #c9b99c;
  border-radius: 7px;
  background: #fff;
  color: inherit;
  font: 0.85rem var(--sans);
}
.rk-edit input[type="number"] { width: 6rem; }
.rk-hint { margin: 0.4rem 0; opacity: 0.8; }
.rk-search { position: relative; flex: 1 1 220px; }
.rk-search input { width: 100%; box-sizing: border-box; }
.rk-search ul {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: 100%;
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
.rk-search ul:empty { display: none; }
.rk-search li button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  border: 0;
  padding: 0.4rem 0.7rem;
  background: none;
  color: inherit;
  font: 0.85rem var(--sans);
  text-align: left;
  cursor: pointer;
}
.rk-search li button:hover { background: #f1e8d6; }
.rk-search li span { opacity: 0.6; }
.rk-elist, .rk-legs { margin: 0.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.25rem; max-height: 260px; overflow: auto; }
.rk-legs { list-style: decimal inside; }
.rk-elist li, .rk-legs li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.04);
}
.rk-elist b, .rk-legs span { flex: 1; }
.rk-elist span { opacity: 0.6; font-size: 0.8rem; }
.rk-elist button, .rk-legs button {
  border: 0;
  background: none;
  font-size: 1rem;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
}
.rk-seg--modes button { display: inline-flex; align-items: center; gap: 0.3rem; }
.rk-link { border: 0; background: none; padding: 0; color: #7a2a1c; text-decoration: underline; cursor: pointer; font: inherit; }

@media (max-width: 720px) {
  .rk { padding: 0.5rem; }
  .rk-stage { aspect-ratio: 4 / 3; }
  .rk-info { grid-template-columns: 1fr; }
  .rk-title { font-size: 1.05rem; top: 8px; }
  
  .rk-compass { width: 54px; left: 8px; bottom: 8px; }
  .rk-seg button { padding: 0.35rem 0.55rem; }
}

/* ── Lab: brain model on an MRI console (same device family as the oscilloscope) ── */
.br-screen {
  background: radial-gradient(ellipse at 50% 42%, #101a2a 0%, #060a12 62%, #010204 100%);
}

.br-canvas {
  display: block;
  width: 100%;
  height: min(62vh, 520px);
  cursor: grab;
  touch-action: none;
  opacity: 0;
  transition: opacity 0.6s;
}

.br-canvas.ready {
  opacity: 1;
}

.br-canvas:active {
  cursor: grabbing;
}

.br-canvas:focus-visible {
  outline: 2px solid #5dff9a;
  outline-offset: -4px;
}

.br-msg {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  font: 0.95rem var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7fc4ff;
  text-shadow: 0 0 8px rgba(127, 196, 255, 0.7);
  animation: oscBlink 1.1s steps(2) infinite;
  pointer-events: none;
}

.br-msg[hidden] {
  display: none;
}

.br-tip {
  position: absolute;
  z-index: 2;
  transform: translate(12px, -130%);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font: 0.68rem var(--mono);
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: #5dff9a;
  background: rgba(3, 8, 6, 0.85);
  box-shadow: 0 0 0 1px rgba(93, 255, 154, 0.35);
  pointer-events: none;
}

.br-modes {
  display: flex;
  gap: 2px;
  margin-left: auto;
  padding: 2px;
  border-radius: 6px;
  background: #2b2c30;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.6);
}

.br-modes button {
  padding: 0.25rem 0.6rem;
  border: 0;
  border-radius: 4px;
  font: 0.62rem var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(93, 255, 154, 0.55);
  background: transparent;
  cursor: pointer;
}

.br-modes button.on {
  color: #0b140e;
  background: #5dff9a;
  box-shadow: 0 0 8px rgba(93, 255, 154, 0.5);
}

.br .osc-power {
  margin-left: 0.6rem;
}

.br-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0.2rem 0.9rem;
}

.br-tabs button {
  padding: 0.35rem 0.75rem;
  border: 0;
  border-radius: 999px;
  font: 0.66rem var(--mono);
  letter-spacing: 0.04em;
  color: #2b2c30;
  background: linear-gradient(180deg, #f1f1ec, #cfd1ca);
  box-shadow: 0 2px 0 #85887f, 0 3px 4px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.br-tabs button.on {
  color: #5dff9a;
  background: #0b140e;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.6);
  text-shadow: 0 0 6px rgba(93, 255, 154, 0.6);
}

.br-main {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 1.2rem;
}

.br-left {
  min-width: 0;
}

.br-ctrl {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.8fr) auto;
  align-items: center;
  gap: 1rem 1.2rem;
  margin-top: 1rem;
}

.br-views,
.br-layers {
  grid-template-columns: repeat(3, 1fr);
}

.br-cuts {
  grid-template-columns: repeat(2, 1fr);
}

.br-knobs {
  gap: 0.8rem;
  padding-top: 0;
}

.br-knobs input:disabled + .knob-dial {
  opacity: 0.45;
}

.br-last {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 0.8rem;
}

.br-last .osc-red {
  margin-top: 0;
}

.br-side {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.7rem;
  min-width: 0;
  max-height: calc(min(62vh, 520px) + 330px);
}

.br-info {
  max-height: 470px;
  overflow-y: auto;
  padding: 0.9rem 1rem;
  border-radius: 8px;
  color: #22252b;
  background: #f7f8f4;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 3px 8px -4px rgba(0, 0, 0, 0.3);
}

.br-info h3 {
  margin: 0.15rem 0 0.2rem;
  font: 1.3rem var(--serif);
  color: #1b1d22;
}

.br-info p {
  margin: 0.35rem 0 0;
  max-width: none;
  font-size: 0.86rem;
  line-height: 1.5;
  color: #3d4149;
}

.br-info .br-info-alt {
  margin-top: 0;
  font-style: italic;
  color: #5d626b;
}

.br-info .br-info-group {
  margin: 0;
  font: 0.66rem var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1a7a3b;
}

.br-info .br-info-hint {
  padding: 0.45rem 0.6rem;
  border-radius: 5px;
  background: #e8efe6;
  font-size: 0.8rem;
}

.br-info .br-info-where {
  font-size: 0.82rem;
}

.br-info .br-info-where span {
  margin-right: 0.35rem;
  font: 0.62rem var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a8f97;
}

.br-info .br-info-solo {
  margin: 0 0 0.6rem;
  padding: 0.45rem 0.6rem;
  border-radius: 5px;
  font: 0.7rem var(--mono);
  color: #5dff9a;
  background: #0b140e;
}

.br-info .br-info-solo b {
  font-weight: 400;
}

.br-info-solo .br-act {
  margin-left: 0.4rem;
}

.br-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.6rem;
}

.br-act {
  padding: 0.3rem 0.6rem;
  border: 0;
  border-radius: 4px;
  font: 0.64rem var(--mono);
  letter-spacing: 0.03em;
  color: #2b2c30;
  background: linear-gradient(180deg, #f1f1ec, #cfd1ca);
  box-shadow: 0 2px 0 #85887f, 0 3px 4px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.br-act:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 #85887f;
}

.br-act:focus-visible {
  outline: 2px solid #2b2c30;
  outline-offset: 2px;
}

.br-text h4 {
  margin: 0.8rem 0 0.1rem;
  font: 600 0.62rem var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1a7a3b;
}

.br-info .br-text p {
  margin-top: 0;
}

.br-info .br-info-wiki {
  margin-top: 0.7rem;
  font: 0.66rem var(--mono);
  color: #6a6f78;
}

.br-info-wiki a {
  color: #1a7a3b;
}

.br-info .br-info-soon {
  font-size: 0.8rem;
  color: #6a6f78;
}

.br-info .br-info-src {
  font: 0.62rem var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a8f97;
}

.br-list {
  display: grid;
  align-content: start;
  gap: 0.25rem;
  min-height: 120px;
  overflow-y: auto;
  padding-right: 0.2rem;
}

.br-list button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
  padding: 0.42rem 0.7rem;
  border: 0;
  border-radius: 6px;
  font: 0.82rem var(--sans);
  text-align: left;
  color: #22252b;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.br-list button:hover {
  background: #fff;
}

.br-list button.on {
  background: #0b140e;
  color: #5dff9a;
  box-shadow: inset 0 0 0 1px rgba(93, 255, 154, 0.5);
}

.br-list i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.br-list small {
  font: 0.62rem var(--mono);
  letter-spacing: 0.04em;
  color: #6a6f78;
  white-space: nowrap;
}

.br-list button.on small {
  color: rgba(93, 255, 154, 0.7);
}

.br-tabs button:focus-visible,
.br-modes button:focus-visible,
.br-list button:focus-visible {
  outline: 2px solid #2b2c30;
  outline-offset: 2px;
}

.br-note {
  font-size: 0.78rem;
  margin: 0 0 1rem;
  max-width: none;
}

@media (max-width: 860px) {
  .br-canvas {
    height: min(78vw, 56vh, 420px);
  }
  .br-main {
    grid-template-columns: 1fr;
  }
  .br-side {
    max-height: none;
  }
  .br-info {
    max-height: none;
  }
  .br-list {
    max-height: 50vh;
  }
  .br-ctrl {
    grid-template-columns: 1fr 1fr;
  }
  .br-ctrl > .osc-group:has(.br-views),
  .br-ctrl > .osc-group:has(.br-layers) {
    grid-column: 1 / -1;
  }
  .br-list {
    align-content: start;
  }
}

/* ── Stroop v2: the intro questions inside the stage, results as a short paper ── */
.stroop-word { max-width: 100%; padding: 0 0.6rem; overflow-wrap: anywhere; text-align: center; }
.stroop-stage.is-setup { height: auto; min-height: 170px; display: block; padding: 1.4rem 1.2rem 1.2rem; }
.stroop-setup[hidden] { display: none; }
.stroop-setup { max-width: 34rem; margin: 0 auto; text-align: center; }
.sq-progress { display: flex; justify-content: center; gap: 5px; margin-bottom: 1rem; }
.sq-progress i { width: 18px; height: 3px; border-radius: 2px; background: var(--border); }
.sq-progress i.on { background: var(--accent); }
.sq-q { margin: 0; font: 1.35rem var(--serif); color: var(--text); }
.sq-sub { margin: 0.35rem 0 0; font-size: 0.85rem; color: var(--muted); }
.sq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 0.4rem; margin-top: 1rem; }
.sq-lang, .sq-level {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.5rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: 0.95rem var(--sans);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}
.sq-lang b, .sq-level b { font-weight: 500; }
.sq-lang small, .sq-level small { font-size: 0.7rem; color: var(--muted); }
.sq-lang:hover, .sq-level:hover { border-color: var(--accent); transform: translateY(-1px); }
.sq-lang[aria-pressed="true"], .sq-level[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.sq-levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 1rem; }
.sq-level { padding: 0.8rem 0.5rem; }
.sq-nav { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; margin-top: 1.1rem; }
.sq-back { border: 0; background: none; color: var(--muted); font: 0.8rem var(--mono); cursor: pointer; }
.sq-next, .sq-go {
  margin-left: auto;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: transparent;
  color: var(--accent);
  font: 0.8rem var(--mono);
  cursor: pointer;
}
.sq-go { background: var(--accent); color: #fff; }
.sq-summary { margin: 0.7rem auto 0; max-width: 30rem; font-size: 0.92rem; line-height: 1.6; color: var(--text); }
.sq-summary b { font-weight: 600; }
.sq-kane { margin-top: 0.8rem; }
.stroop-link { border: 0; padding: 0; background: none; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; }
@media (max-width: 520px) {
  .sq-levels { grid-template-columns: 1fr; }
  .sq-grid { grid-template-columns: repeat(2, 1fr); }
}

/* the results as a sheet of paper; stays white in dark mode, like a printout */
.stroop-charts { margin-top: 1.2rem; }
.stroop-charts:empty { display: none; }
.sp-paper {
  --ink: #1b1b1b;
  --ink-2: #555;
  --ink-3: #8a8a8a;
  padding: 2rem 2.2rem 1.6rem;
  background: #fffefb;
  color: var(--ink);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 12px 30px -16px rgba(0, 0, 0, 0.45);
  font-family: Georgia, "Times New Roman", serif;
}
.sp-kicker { margin: 0; font: 0.7rem var(--mono); letter-spacing: 0.04em; color: var(--ink-3); text-transform: uppercase; }
.sp-h { margin: 0.4rem 0 0.8rem; font: 700 1.3rem Georgia, "Times New Roman", serif; color: var(--ink); text-align: center; }
.sp-p { margin: 0 0 1.4rem; font-size: 0.98rem; line-height: 1.65; text-indent: 1.5em; color: var(--ink); hyphens: auto; }
.sp-fig { margin: 0 0 1.6rem; }
.sp-fig figcaption { margin-bottom: 0.5rem; color: var(--ink); }
.sp-fig figcaption b, .sp-tcap b { display: block; font-weight: 700; font-size: 0.92rem; }
.sp-fig figcaption i, .sp-tcap i { display: block; font-size: 0.92rem; }
.sp-note { margin: 0.4rem 0 0; font-size: 0.8rem; line-height: 1.5; color: var(--ink-2); }
.sp-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: "Helvetica Neue", Arial, var(--sans); }
.sp-axis { fill: none; stroke: var(--ink); stroke-width: 1; }
.sp-tick { font-size: 11px; fill: var(--ink); }
.sp-alabel { font-size: 12px; fill: var(--ink); }
.sp-row { font-size: 12px; fill: var(--ink); }
.sp-bold { font-weight: 700; }
.sp-rowsub { font-size: 10px; fill: var(--ink-3); }
.sp-rowval { font-size: 11px; fill: var(--ink); font-variant-numeric: tabular-nums; }
.sp-open { fill: #fffefb; stroke: var(--ink); stroke-width: 1.5; }
.sp-fill { fill: var(--ink); stroke: #fffefb; stroke-width: 1; }
.sp-err { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.sp-link { fill: none; stroke: var(--ink-3); stroke-width: 1; }
.sp-neutral { fill: none; stroke: var(--ink-2); stroke-width: 1.2; stroke-dasharray: 5 4; }
.sp-zero { fill: none; stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 3 3; }
.sp-sep { stroke: var(--ink-3); stroke-width: 0.8; }
.sp-grey { fill: var(--ink-3); fill-opacity: 0.55; }
.sp-line { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.sp-dashed { stroke-dasharray: 6 4; }
.sp-dens-inc { fill: none; stroke: var(--ink); stroke-width: 2; }
.sp-dens-con { fill: none; stroke: var(--ink-3); stroke-width: 2; }
.sp-dens-neu { fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 2 3; }
.sp-rug { stroke-width: 1; stroke-dasharray: none; }
.sp-dens-inc-rug { stroke: var(--ink); }
.sp-dens-con-rug { stroke: var(--ink-3); }
.sp-dens-neu-rug { stroke: var(--ink-2); }
.sp-legend { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; margin: 0 0 0.3rem; font: 0.78rem "Helvetica Neue", Arial, var(--sans); color: var(--ink); }
.sp-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.sp-key { width: 14px; height: 14px; overflow: visible; }
.sp-key--line { width: 22px; height: 10px; }
.sp-empty { font-size: 0.85rem; color: var(--ink-2); }
.sp-table { margin: 0.4rem 0 0.4rem; }
.sp-tcap { margin: 0 0 0.4rem; color: var(--ink); }
.sp-tscroll { overflow-x: auto; }
.sp-table table { width: 100%; border-collapse: collapse; font-size: 0.85rem; font-variant-numeric: tabular-nums; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
.sp-table th { font-weight: 400; padding: 0.3rem 0.5rem; text-align: center; }
.sp-table thead tr:last-child th { border-bottom: 1px solid var(--ink); }
.sp-table thead tr:first-child th[colspan] { border-bottom: 1px solid var(--ink-3); }
.sp-table td { padding: 0.28rem 0.5rem; text-align: center; white-space: nowrap; }
.sp-table td:first-child, .sp-table th:first-child { text-align: left; }
.sp-paper .stroop-link { color: #1c5cab; }
@media (max-width: 520px) {
  .sp-paper { padding: 1.3rem 1rem 1rem; }
  .sp-p { font-size: 0.92rem; }
}
.stroop-tip {
  position: absolute;
  z-index: 3;
  margin: 0;
  padding: 0.25rem 0.55rem;
  border-radius: 6px;
  background: #1b1b1b;
  color: #fff;
  font: 0.75rem var(--sans);
  white-space: nowrap;
  pointer-events: none;
}
.lab-card { position: relative; }

/* the paper gets colour: congruent blue, incongruent vermilion, neutral grey; native purple, other languages teal */
.sp-paper { --c-con: #2f6fb3; --c-inc: #d1452f; --c-neu: #8a8a8a; --c-nat: #7a4fb0; --c-oth: #1d8a6e; }
.sp-c-con { --c: var(--c-con); }
.sp-c-inc { --c: var(--c-inc); }
.sp-c-neu { --c: var(--c-neu); }
.sp-c-nat { --c: var(--c-nat); }
.sp-c-oth { --c: var(--c-oth); }
.sp-fill[class*="sp-c-"] { fill: var(--c); }
.sp-open[class*="sp-c-"], .sp-err[class*="sp-c-"], .sp-line[class*="sp-c-"] { stroke: var(--c); }
.sp-pt { fill: var(--c, var(--ink-3)); fill-opacity: 0.7; stroke: #fffefb; stroke-width: 0.8; }
.sp-open { stroke-width: 2; }
.sp-dens-con { stroke: var(--c-con); }
.sp-dens-inc { stroke: var(--c-inc); }
.sp-dens-neu { stroke: var(--c-neu); }
.sp-dens-con-area { fill: var(--c-con); fill-opacity: 0.1; }
.sp-dens-inc-area { fill: var(--c-inc); fill-opacity: 0.1; }
.sp-dens-neu-area { fill: none; }
.sp-dens-con-rug { stroke: var(--c-con); }
.sp-dens-inc-rug { stroke: var(--c-inc); }
.sp-dens-neu-rug { stroke: var(--c-neu); }
.sp-neutral { stroke: var(--c-neu); }

/* title block */
.sp-kicker { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid #e4e0d6; }
.sp-title { margin: 1.3rem 0 0.7rem; font: 700 1.55rem/1.25 Georgia, "Times New Roman", serif; color: var(--ink); text-align: center; text-wrap: balance; }
.sp-by { margin: 0; text-align: center; font-size: 1rem; color: var(--ink); }
.sp-aff { margin: 0.2rem 0 1.3rem; text-align: center; font-size: 0.8rem; font-style: italic; color: var(--ink-2); }
.sp-by sup, .sp-aff sup { font-size: 0.65em; }
.sp-abs { margin: 0 0 1.4rem; padding: 0.9rem 1.1rem; background: #f4f1e8; border-left: 3px solid var(--c-con); font-size: 0.9rem; line-height: 1.6; color: var(--ink); }
.sp-abs p { margin: 0; }
.sp-abs b { font-variant: small-caps; letter-spacing: 0.03em; margin-right: 0.3rem; }
.sp-kw { margin-top: 0.4rem !important; font-size: 0.82rem; color: var(--ink-2); }
.sp-paper .sp-h { font-size: 1.1rem; text-align: left; margin: 0 0 0.5rem; }
@media (max-width: 520px) {
  .sp-title { font-size: 1.25rem; }
  .sp-kicker { flex-direction: column; gap: 0.1rem; }
}

/* ── Stroop as it would run on the lab PC: an old window, black screen, Arial, the data file, stickers on the keys ── */
.sx {
  --w-face: #c3c3c3;
  --w-hi: #ffffff;
  --w-lt: #dfdfdf;
  --w-sh: #808080;
  --w-dk: #0a0a0a;
  --w-ink: #111;
  --w-field: #fff;
  --kb-plate: #d6d1c2;
  --kb-key: #efebe0;
  --kb-ink: #4a4740;
  font: 12px Tahoma, "Segoe UI", Arial, sans-serif;
}
html.theme-dark .sx {
  --w-face: #3b3b40; --w-hi: #6a6a72; --w-lt: #4a4a52; --w-sh: #26262a; --w-dk: #0d0d0f; --w-ink: #e8e8e8; --w-field: #1b1b1e;
  --kb-plate: #232327; --kb-key: #36363c; --kb-ink: #c9c9cf;
}
@media (prefers-color-scheme: dark) {
  html:not(.theme-light) .sx {
    --w-face: #3b3b40; --w-hi: #6a6a72; --w-lt: #4a4a52; --w-sh: #26262a; --w-dk: #0d0d0f; --w-ink: #e8e8e8; --w-field: #1b1b1e;
    --kb-plate: #232327; --kb-key: #36363c; --kb-ink: #c9c9cf;
  }
}
.sx-win {
  padding: 3px;
  background: var(--w-face);
  color: var(--w-ink);
  box-shadow: inset -1px -1px var(--w-dk), inset 1px 1px var(--w-lt), inset -2px -2px var(--w-sh), inset 2px 2px var(--w-hi);
}
.sx-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 3px 3px 3px 6px;
  background: linear-gradient(90deg, #000080, #1084d0);
  color: #fff;
  font-weight: 700;
}
.sx-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-winbtns { display: flex; gap: 2px; flex: none; }
.sx-winbtns i {
  width: 16px;
  height: 14px;
  display: grid;
  place-items: center;
  background: var(--w-face);
  color: var(--w-ink);
  font: 700 10px/1 Tahoma, Arial, sans-serif;
  font-style: normal;
  box-shadow: inset -1px -1px var(--w-dk), inset 1px 1px var(--w-hi), inset -2px -2px var(--w-sh);
}
.sx-winbtns i:last-child { margin-left: 2px; }
.sx-menu { display: flex; gap: 2px; padding: 3px 2px 4px; }
.sx-menu span { padding: 0 6px; }
.sx-sunken, .sx .stroop-stage, .sx-logbody, .sx-status span {
  box-shadow: inset 1px 1px var(--w-sh), inset -1px -1px var(--w-hi), inset 2px 2px var(--w-dk), inset -2px -2px var(--w-lt);
}
.sx-btn, .sx .sq-next, .sx .sq-go, .sx .sq-back {
  padding: 4px 14px;
  border: 0;
  border-radius: 0;
  background: var(--w-face);
  color: var(--w-ink);
  font: 12px Tahoma, "Segoe UI", Arial, sans-serif;
  cursor: pointer;
  box-shadow: inset -1px -1px var(--w-dk), inset 1px 1px var(--w-hi), inset -2px -2px var(--w-sh), inset 2px 2px var(--w-lt);
}
.sx-btn:active, .sx .sq-next:active, .sx .sq-go:active, .sx .sq-back:active {
  box-shadow: inset 1px 1px var(--w-dk), inset -1px -1px var(--w-hi), inset 2px 2px var(--w-sh);
}
.sx .sq-go:focus-visible, .sx .sq-next:focus-visible, .sx-btn:focus-visible { outline: 1px dotted var(--w-ink); outline-offset: -5px; }

/* the stimulus screen: black, Arial, nothing else */
.sx .stroop-stage {
  --text: #fff;
  --muted: #a8a8a8;
  --border: rgba(255, 255, 255, 0.55);
  --surface: transparent;
  height: 240px;
  padding: 2px;
  border: 0;
  border-radius: 0;
  background: #000;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
}
.sx .stroop-stage.is-setup { height: auto; min-height: 240px; padding: 1.1rem 1rem 1rem; }
.sx .stroop-word { font: 700 clamp(2.2rem, 7vw, 3.2rem) Arial, Helvetica, sans-serif; text-transform: uppercase; letter-spacing: 0.02em; }
.sx .stroop-word.is-fix { font-weight: 400; color: #fff; }
.sx .stroop-word.is-wrong { font-size: 1.5rem; font-weight: 400; color: #e8332f; text-transform: none; }
.sx .stroop-setup { max-width: 36rem; position: relative; }
.sx .sq-page { position: absolute; top: -0.5rem; right: -0.3rem; margin: 0; font-size: 11px; color: #8a8a8a; }
.sx .sq-q { font: 700 1.25rem Arial, Helvetica, sans-serif; color: #fff; margin-top: 0.4rem; }
.sx .sq-sub { font-size: 0.85rem; color: #bdbdbd; }
.sx .sq-lang, .sx .sq-level {
  border: 1px solid #9a9a9a;
  border-radius: 0;
  background: #000;
  color: #fff;
  font: 0.92rem Arial, Helvetica, sans-serif;
  transition: none;
}
.sx .sq-lang small, .sx .sq-level small { color: #a8a8a8; }
.sx .sq-lang:hover, .sx .sq-level:hover { transform: none; border-color: #fff; }
.sx .sq-lang[aria-pressed="true"], .sx .sq-level[aria-pressed="true"] { background: #fff; color: #000; border-color: #fff; box-shadow: none; }
.sx .sq-lang[aria-pressed="true"] small, .sx .sq-level[aria-pressed="true"] small { color: #444; }
.sx .sq-nav { gap: 0.5rem; flex-wrap: wrap; }
.sx .sq-back { margin-right: auto; }
.sx .sq-next, .sx .sq-go { margin-left: 0; }
.sx .stroop-link { color: #6ea8ff; font-size: 12px; }
.sx .sq-summary { font: 0.95rem/1.6 Arial, Helvetica, sans-serif; color: #fff; text-align: left; max-width: 34rem; }
.sq-ex {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  margin: 0.9rem auto 0;
  padding: 0.6rem 0.9rem;
  max-width: 26rem;
  border: 1px dashed #666;
  text-align: left;
}
.sq-ex-label { font-size: 11px; color: #8a8a8a; text-transform: uppercase; letter-spacing: 0.05em; }
.sq-ex-word { font: 700 1.9rem Arial, Helvetica, sans-serif; text-transform: uppercase; }
.sq-ex-ans { font-size: 0.82rem; line-height: 1.55; color: #ddd; }
.sq-ex-ans b { color: #fff; }
.sq-ex-ans s { color: #8a8a8a; }
.sx kbd { padding: 0 4px; border: 1px solid #777; border-radius: 2px; font: 11px Arial, sans-serif; }
.sq-space { margin: 0.9rem 0 0; font-size: 0.85rem; color: #bdbdbd; animation: sqBlink 1.2s steps(2, jump-none) infinite; }
@keyframes sqBlink { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .sq-space { animation: none; } }

/* the data file, written row by row */
.sx-log { margin-top: 4px; }
.sx-loghead { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 22px; padding: 1px 2px 3px; }
.sx-loghead .sx-btn { padding: 2px 10px; font-size: 11px; }
.sx-logbody {
  margin: 0;
  height: calc(5 * 1.3em + 8px);
  padding: 4px 6px;
  overflow: hidden;
  background: var(--w-field);
  color: var(--w-ink);
  font: 11px/1.3 "Courier New", Courier, monospace;
  white-space: pre;
}
.sx-status { display: grid; grid-template-columns: 1fr auto auto; gap: 2px; margin-top: 3px; }
.sx-status span { min-height: 18px; padding: 2px 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sx-status span:empty::before { content: "\00a0"; }
.sx .stroop-meta { position: static; font: inherit; color: inherit; }

/* a piece of the keyboard: keys 1 to 4 with coloured stickers, a strip of tape above */
.sx-keys {
  position: relative;
  grid-template-columns: repeat(4, minmax(0, 70px));
  justify-content: center;
  gap: 0.45rem;
  margin: 0.9rem auto 0;
  padding: 1.5rem 1rem 0.9rem;
  max-width: 26rem;
  border-radius: 8px 8px 12px 12px;
  background: var(--kb-plate);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.25), 0 6px 14px -8px rgba(0, 0, 0, 0.5);
}
.sx-keys button {
  position: relative;
  display: block;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--kb-key), color-mix(in srgb, var(--kb-key) 88%, #000));
  box-shadow: 0 4px 0 color-mix(in srgb, var(--kb-plate) 60%, #000), inset 0 -3px 0 rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform 0.06s, box-shadow 0.06s;
}
.sx-keys button:hover { transform: none; border: 0; }
.sx-keys button:active, .sx-keys button.is-down {
  transform: translateY(3px);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--kb-plate) 60%, #000), inset 0 -2px 0 rgba(0, 0, 0, 0.08);
}
.sx-keys kbd {
  position: absolute;
  top: 5px;
  left: 7px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--kb-ink);
  font: 13px Arial, Helvetica, sans-serif;
}
.sx-keys i {
  position: absolute;
  left: 50%;
  top: 55%;
  width: 46%;
  height: 46%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 55%), var(--sw);
  box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.35);
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
}
/* stuck on by hand, so not quite centred */
.sx-keys button:nth-of-type(1) i { margin: -2px 0 0 3px; }
.sx-keys button:nth-of-type(2) i { margin: 1px 0 0 -2px; width: 44%; height: 44%; }
.sx-keys button:nth-of-type(3) i { margin: -1px 0 0 1px; }
.sx-keys button:nth-of-type(4) i { margin: 2px 0 0 -3px; width: 48%; height: 48%; }
.sx-tape {
  position: absolute;
  top: -0.55rem;
  left: 1.1rem;
  padding: 0.1rem 0.7rem;
  background: rgba(238, 226, 186, 0.92);
  color: #3a3a8a;
  font: 0.9rem "Segoe Print", "Bradley Hand", "Marker Felt", "Comic Sans MS", cursive;
  transform: rotate(-3deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  clip-path: polygon(2% 0, 98% 4%, 100% 50%, 97% 100%, 1% 96%, 0 45%);
}
@media (max-width: 520px) {
  .sx .stroop-stage { height: 200px; }
  .sx-keys { grid-template-columns: repeat(4, minmax(0, 64px)); }
  .sq-ex { gap: 0.7rem; }
  .sx-status { grid-template-columns: 1fr auto; }
  .sx-status #stroop-clock { display: none; }
}

/* paper fixes: the global p max-width cut the rule and the centring, and the abstract was muted */
.sp-paper p { max-width: none; }
.sp-abs p { color: var(--ink); }
.sp-abs .sp-kw { color: var(--ink-2); }
.sp-pw1 { stroke: #7ea8dc; stroke-dasharray: 2 3; }
.sp-pw2 { stroke: #3f7fc9; stroke-dasharray: 7 3; }
.sp-pw3 { stroke: #1f4e8c; }
.sp-pwdot { fill: #fffefb; stroke-width: 2; }
.sp-pwdot.sp-pw1 { stroke-dasharray: none; }
.sp-pwdot.sp-pw2 { stroke-dasharray: none; }
.sp-paper .sp-table + .sp-h { margin-top: 2rem; }
.sx .sq-go { margin-left: auto; }
.sq-ex-ans { white-space: nowrap; }
@media (max-width: 520px) { .sq-ex-label { display: none; } .sq-ex-word { font-size: 1.6rem; } }
@media (hover: none) { .sq-space { display: none; } }
.sx-loghead .sx-btn { white-space: nowrap; flex: none; }

/* settings on the instructions page: old-school radio buttons and a checkbox, on black */
.sq-opts { margin: 0.9rem auto 0; padding: 0.5rem 0.8rem 0.6rem; max-width: 30rem; border: 1px solid #555; text-align: left; font-size: 0.85rem; color: #ddd; }
.sq-opts legend { padding: 0 0.3rem; font-size: 11px; color: #9a9a9a; text-transform: uppercase; letter-spacing: 0.05em; }
.sq-opt { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.7rem; margin: 0.25rem 0; }
.sq-optsub { color: #8a8a8a; }
.sq-radio, .sq-check { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.1rem 0; border: 0; background: none; color: #fff; font: inherit; cursor: pointer; text-align: left; }
.sq-radio::before, .sq-check::before { content: ""; flex: none; width: 11px; height: 11px; border: 1px solid #bbb; background: #000; }
.sq-radio::before { border-radius: 50%; }
.sq-radio[aria-checked="true"]::before { background: radial-gradient(circle, #fff 0 2.5px, #000 3px); }
.sq-check[aria-checked="true"]::before { content: "✓"; display: grid; place-items: center; font: 700 10px/1 Arial, sans-serif; color: #fff; }
.sq-radio:focus-visible, .sq-check:focus-visible { outline: 1px dotted #fff; outline-offset: 2px; }

/* practice feedback */
.sx .stroop-word.is-right { font-size: 1.3rem; font-weight: 400; color: #1fae4a; text-transform: none; }

/* after the last trial: the analysis, line by line, with a block progress bar */
.sq-busy { margin: 0.9rem auto 0.8rem; max-width: 26rem; text-align: left; font: 13px/1.7 "Courier New", Courier, monospace; color: #cfcfcf; }
.sq-busy p { margin: 0; }
.sq-busy b { font-weight: 400; color: #1fae4a; }
.sq-cursor { animation: sqBlink 0.8s steps(2, jump-none) infinite; }
.sq-bar { height: 16px; max-width: 26rem; margin: 0 auto; padding: 2px; border: 1px solid #888; }
.sq-bar i { display: block; height: 100%; background: repeating-linear-gradient(90deg, #1084d0 0 9px, transparent 9px 11px); transition: width 0.4s steps(6); }
.sq-center { text-align: center; }
.sx .sq-nav--center { justify-content: center; }
.sx .sq-nav--center .sq-go { margin-left: 0; }
.sp-paper.is-new { animation: spIn 0.7s ease-out; }
@keyframes spIn { from { opacity: 0; transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce) { .sp-paper.is-new, .sq-cursor { animation: none; } }
.sx .sq-summary.sq-center { text-align: center; }

/* ── Stroop intro: consent form on a desk, then the login on the lab PC ── */
.sx.is-intro > :not(.sx-intro) { display: none; }
.sx-intro { position: relative; min-height: 520px; overflow: hidden; border-radius: 10px; transition: opacity 0.5s; }
.sx-intro.is-out { opacity: 0; }
.si-skip { position: absolute; right: 0.6rem; top: 0.5rem; z-index: 5; border: 0; background: rgba(0, 0, 0, 0.35); color: #fff; font: 11px var(--mono); padding: 0.2rem 0.55rem; border-radius: 4px; cursor: pointer; }
.si-desk {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 30% 20%, rgba(255, 230, 190, 0.25), transparent 60%),
    repeating-linear-gradient(91deg, rgba(0, 0, 0, 0.05) 0 2px, transparent 2px 9px, rgba(255, 255, 255, 0.04) 9px 11px, transparent 11px 23px),
    linear-gradient(180deg, #a8764a, #8e5f37);
  transition: transform 0.6s ease-in, opacity 0.6s;
}
.si-desk.is-away { transform: translateY(-30px) scale(0.96); opacity: 0; }
.si-mug { position: absolute; right: 7%; top: 8%; width: 78px; height: 78px; border-radius: 50%; background: radial-gradient(circle, #3b2415 0 52%, #f3efe6 53% 68%, #d9d3c7 69% 72%, transparent 73%); box-shadow: 6px 8px 14px rgba(0, 0, 0, 0.35); }
.si-mug::after { content: ""; position: absolute; right: -18px; top: 28px; width: 22px; height: 20px; border: 6px solid #eae5da; border-left: 0; border-radius: 0 12px 12px 0; }
.si-note { position: absolute; left: 5%; bottom: 10%; padding: 0.6rem 0.7rem; width: 96px; background: #fff27a; color: #3a3a8a; font: 0.85rem/1.3 "Segoe Print", "Bradley Hand", "Marker Felt", "Comic Sans MS", cursive; font-style: normal; transform: rotate(-7deg); box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.3); }
.si-paper {
  position: relative;
  width: min(430px, 88%);
  margin: 1.6rem auto;
  padding: 1.4rem 1.6rem 1.2rem;
  background: #fbfaf5;
  color: #222;
  font: 0.8rem/1.5 Georgia, "Times New Roman", serif;
  transform: rotate(-1.2deg);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 4px 10px 22px rgba(0, 0, 0, 0.35);
}
.si-paper p, .si-paper li { color: #222; max-width: none; }
.si-head { margin: 0; font: 0.65rem Arial, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: #777 !important; }
.si-paper h3 { margin: 0.4rem 0 0.2rem; font: 700 1.15rem Georgia, serif; color: #111; }
.si-study { margin: 0 0 0.6rem; font-style: italic; }
.si-paper ol { margin: 0 0 0.7rem; padding-left: 1.1rem; }
.si-paper li { margin: 0.15rem 0; }
.si-check { display: flex; gap: 0.45rem; align-items: flex-start; font-weight: 700; cursor: pointer; }
.si-check input { margin-top: 0.2rem; accent-color: #1d3f8f; }
.si-sign { display: grid; grid-template-columns: 1fr 1.3fr; gap: 1rem; align-items: end; margin-top: 0.9rem; }
.si-place { border-bottom: 1px solid #333; padding-bottom: 0.15rem; font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; color: #1d3f8f; }
.si-line { border-bottom: 1px solid #333; height: 44px; }
.si-line svg { width: 100%; height: 100%; overflow: visible; }
.si-line path { fill: none; stroke: #1d3f8f; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2000; stroke-dashoffset: 2000; }
.si-caps { display: grid; grid-template-columns: 1fr 1.3fr; gap: 1rem; font: 0.62rem Arial, sans-serif; color: #777; }
.si-go { display: block; margin: 0.9rem 0 0 auto; padding: 0.4rem 1rem; border: 1px solid #1d3f8f; border-radius: 3px; background: #1d3f8f; color: #fff; font: 0.8rem Arial, sans-serif; cursor: pointer; }
.si-go:disabled { background: transparent; color: #8a8a8a; border-color: #bbb; cursor: not-allowed; }
.si-pen { position: absolute; left: 80%; top: 64%; width: 120px; transform: rotate(-24deg); transform-origin: 0 50%; filter: drop-shadow(3px 6px 4px rgba(0, 0, 0, 0.35)); pointer-events: none; transition: transform 0.6s; }
.si-pen.is-writing, .si-pen.is-used { left: 0; top: 0; transition: none; }
.si-pen.is-used { transition: transform 0.6s; }
@media (max-width: 520px) { .si-pen:not(.is-writing):not(.is-used) { opacity: 0; } .si-mug { width: 56px; height: 56px; } .si-paper { padding: 1.1rem 1rem 1rem; } }

/* the login screen: dark blue-green with light waves, a user tile, a password field */
.si-vista {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 45%, #1f6f8f 0%, #0d3b57 55%, #061b2c 100%);
  font: 13px "Segoe UI", Tahoma, Arial, sans-serif;
  color: #fff;
  animation: siIn 0.6s ease-out;
}
@keyframes siIn { from { opacity: 0; } }
.si-wave { position: absolute; left: -20%; width: 140%; height: 40%; border-radius: 50%; border-top: 2px solid rgba(160, 230, 255, 0.35); filter: blur(1px); box-shadow: 0 -12px 40px rgba(120, 220, 255, 0.18); animation: siWave 9s ease-in-out infinite alternate; }
.si-wave.w1 { top: 52%; }
.si-wave.w2 { top: 58%; opacity: 0.6; animation-duration: 12s; }
.si-wave.w3 { top: 64%; opacity: 0.35; animation-duration: 15s; }
@keyframes siWave { to { transform: translateX(6%) rotate(-2deg); } }
.si-user { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.55rem; margin-top: -2rem; }
.si-tile { width: 84px; height: 84px; padding: 5px; border-radius: 9px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.35)); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5), 0 6px 18px rgba(0, 0, 0, 0.45); }
.si-tile svg { display: block; width: 100%; height: 100%; border-radius: 5px; }
.si-user b { font-size: 1.15rem; font-weight: 400; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.si-pw { display: flex; align-items: center; gap: 0.4rem; }
.si-pw[hidden] { display: none; }
.si-field { display: inline-block; width: 170px; padding: 0.25rem 0.5rem; border: 1px solid #7aa7c7; border-radius: 2px; background: #fff; color: #8a8a8a; font-style: italic; letter-spacing: 0; }
.si-field.is-focus { color: #111; font-style: normal; letter-spacing: 0.1em; box-shadow: 0 0 0 2px rgba(120, 200, 255, 0.6); }
.si-arrow { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #8fd0ff, #1b73c9 70%); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6); font-style: normal; font-size: 13px; }
.si-welcome { display: flex; align-items: center; gap: 0.6rem; font-size: 1.3rem; }
.si-welcome[hidden] { display: none; }
.si-spin { width: 20px; height: 20px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.2); border-top-color: #7fdcff; animation: siSpin 0.9s linear infinite; }
@keyframes siSpin { to { transform: rotate(360deg); } }
.si-foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 0.6rem 5.5rem 0.6rem 1rem; max-width: none; color: rgba(255, 255, 255, 0.7); font-size: 11px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.35)); }
.si-power { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #ff8a7a, #b3261e 70%); font-style: normal; color: #fff; }
.si-cursor { position: absolute; left: 0; top: 0; z-index: 4; width: 14px; height: 22px; filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.4)); transition: opacity 0.4s; }
.si-cursor.is-click { transform-origin: 0 0; scale: 0.85; }
@media (prefers-reduced-motion: reduce) { .si-wave, .si-spin { animation: none; } }

/* ══ Brain: three looks for the same viewer (workstation, specimen jar, glass dome), plus the old console ══ */
.br-looks { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0.2rem 0 0.7rem; font: 0.72rem var(--mono); color: var(--muted); }
.br-looks button { padding: 0.3rem 0.75rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.br-looks button.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.br-deco { position: absolute; inset: 0; pointer-events: none; }
.br-deco > * { z-index: 2; }
.br:not(.br--osc) .br-canvas { position: relative; z-index: 1; }
.br:not(.br--osc) .osc-screw { display: none; }
.br:not(.br--osc) .osc-screen::after { display: none; }

/* shared overrides, fed by each look's variables */
.br:not(.br--osc) {
  color: var(--lk-fg);
  background: var(--lk-case);
  box-shadow: var(--lk-case-shadow, 0 18px 40px -18px rgba(0, 0, 0, 0.6));
}
.br:not(.br--osc) .osc-top, .br:not(.br--osc) .osc-cap, .br:not(.br--osc) .knob-label { color: var(--lk-fg); }
.br:not(.br--osc) .osc-brand b { background: var(--lk-accent); color: var(--lk-accent-ink); }
.br:not(.br--osc) .osc-led { background: var(--lk-accent); box-shadow: 0 0 6px 2px color-mix(in srgb, var(--lk-accent) 60%, transparent); }
.br:not(.br--osc) .osc-silk { color: var(--lk-muted); }
.br:not(.br--osc) .osc-keys button, .br:not(.br--osc) .br-tabs button, .br:not(.br--osc) .br-act {
  color: var(--lk-key-fg);
  background: var(--lk-key);
  box-shadow: var(--lk-key-shadow);
  text-shadow: none;
}
.br:not(.br--osc) .osc-keys button::before { background: var(--lk-lamp-off); }
.br:not(.br--osc) .osc-keys button.on::before { background: var(--lk-accent); box-shadow: 0 0 4px var(--lk-accent); }
.br:not(.br--osc) .osc-keys button.on, .br:not(.br--osc) .br-tabs button.on {
  color: var(--lk-on-fg);
  background: var(--lk-on);
  box-shadow: var(--lk-on-shadow);
  text-shadow: none;
}
.br:not(.br--osc) .br-modes { background: var(--lk-well); box-shadow: var(--lk-well-shadow); }
.br:not(.br--osc) .br-modes button { color: var(--lk-muted); }
.br:not(.br--osc) .br-modes button.on { color: var(--lk-accent-ink); background: var(--lk-accent); box-shadow: none; }
.br:not(.br--osc) .knob::before { background: repeating-conic-gradient(from -135deg, var(--lk-muted) 0 1.2deg, transparent 1.2deg 27deg); }
.br:not(.br--osc) .knob-dial { background: var(--lk-knob); box-shadow: var(--lk-knob-shadow); }
.br:not(.br--osc) .knob-dial::after { background: var(--lk-knob-mark); }
.br:not(.br--osc) .br-info { background: var(--lk-panel); color: var(--lk-panel-fg); box-shadow: var(--lk-panel-shadow); }
.br:not(.br--osc) .br-info h3 { color: var(--lk-panel-head); }
.br:not(.br--osc) .br-info p { color: var(--lk-panel-fg); }
.br:not(.br--osc) .br-info .br-info-group, .br:not(.br--osc) .br-text h4, .br:not(.br--osc) .br-info-wiki a { color: var(--lk-panel-accent); }
.br:not(.br--osc) .br-info .br-info-hint { background: var(--lk-hint); }
.br:not(.br--osc) .br-info .br-info-solo { background: var(--lk-well); color: var(--lk-accent); }
.br:not(.br--osc) .br-list button { color: var(--lk-list-fg); background: var(--lk-list); box-shadow: inset 0 0 0 1px var(--lk-line); }
.br:not(.br--osc) .br-list button:hover { background: var(--lk-list-hover); }
.br:not(.br--osc) .br-list button.on { color: var(--lk-on-fg); background: var(--lk-on); box-shadow: inset 0 0 0 1px var(--lk-accent); }
.br:not(.br--osc) .br-list small { color: var(--lk-muted); }
.br:not(.br--osc) .osc-red { color: var(--lk-red-fg); background: var(--lk-red); box-shadow: var(--lk-key-shadow); }
.br:not(.br--osc) .br-tip { color: var(--lk-accent); background: rgba(0, 0, 0, 0.8); box-shadow: 0 0 0 1px color-mix(in srgb, var(--lk-accent) 50%, transparent); }

/* ── 1: radiology workstation: dark flat UI, black viewport, text overlays in the corners ── */
.br--rad {
  --lk-case: #14171c; --lk-fg: #c9d1d9; --lk-muted: #6f7b88; --lk-accent: #35c2ff; --lk-accent-ink: #04121c;
  --lk-case-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.8), inset 0 0 0 1px #262b33;
  --lk-key: #1d2229; --lk-key-fg: #c9d1d9; --lk-key-shadow: inset 0 0 0 1px #2e353f; --lk-lamp-off: #39414b;
  --lk-on: #16303f; --lk-on-fg: #8fdcff; --lk-on-shadow: inset 0 0 0 1px #35c2ff;
  --lk-well: #0b0d10; --lk-well-shadow: inset 0 0 0 1px #262b33;
  --lk-knob: radial-gradient(circle, #232931 0 60%, #1a1f25 61%); --lk-knob-shadow: 0 0 0 1px #313944, 0 4px 8px rgba(0, 0, 0, 0.5); --lk-knob-mark: #35c2ff;
  --lk-panel: #0f1216; --lk-panel-fg: #aab4bf; --lk-panel-head: #f2f5f8; --lk-panel-accent: #35c2ff; --lk-panel-shadow: inset 0 0 0 1px #262b33; --lk-hint: #16303f;
  --lk-list: #171b21; --lk-list-hover: #1f252d; --lk-list-fg: #c9d1d9; --lk-line: #262b33;
  --lk-red: #2a1b1d; --lk-red-fg: #ff9b9b;
  border-radius: 10px;
}
.br--rad .osc-top { font: 12px system-ui, sans-serif; letter-spacing: 0; text-transform: none; padding-bottom: 0.55rem; border-bottom: 1px solid #262b33; }
.br--rad .osc-bezel { padding: 0; border-radius: 3px; background: #000; box-shadow: inset 0 0 0 1px #2e353f; }
.br--rad .osc-screen { border-radius: 2px; background: #000; box-shadow: none; }
.br--rad .osc-silk { padding: 0.35rem 0.5rem; font: 10px Consolas, "Red Hat Mono", monospace; }
.br--rad .osc-keys button, .br--rad .br-tabs button { border-radius: 3px; }
.br--rad .osc-keys button:active, .br--rad .osc-keys button.on { transform: none; }
.br--rad .br-canvas:focus-visible { outline-color: #35c2ff; }
.br-deco [class^="rd-"] { position: absolute; font: 11px/1.45 Consolas, "Lucida Console", "Red Hat Mono", monospace; color: #e6e6e6; text-shadow: 0 0 2px #000, 0 0 1px #000; }
.rd-tl { left: 10px; top: 8px; }
.rd-tr { right: 10px; top: 8px; text-align: right; }
.rd-bl { left: 10px; bottom: 8px; }
.rd-br { right: 10px; bottom: 8px; text-align: right; color: #ffd84a !important; }
.br-deco .rd-o { font-size: 14px; font-weight: 700; color: #ffd84a; }
.rd-o-t { top: 8px; left: 50%; transform: translateX(-50%); }
.rd-o-b { bottom: 8px; left: 50%; transform: translateX(-50%); }
.rd-o-l { left: 10px; top: 50%; transform: translateY(-50%); }
.rd-o-r { right: 10px; top: 50%; transform: translateY(-50%); }
.br-deco .rd-scale { right: 12px; bottom: 50px; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 10px; }
.rd-scale i { display: block; height: 6px; border: 1px solid #e6e6e6; border-top: 0; }
@media (max-width: 600px) { .rd-tr, .rd-tl { font-size: 9px !important; } .rd-bl { display: none; } }

/* ── 2: specimen in a jar of formalin, in an old anatomical collection ── */
.br--jar {
  --lk-case: linear-gradient(180deg, #4b2f1c, #3a2314 60%, #2c1a0f); --lk-fg: #efe2c2; --lk-muted: #b69f78; --lk-accent: #e5b75a; --lk-accent-ink: #2a1a08;
  --lk-case-shadow: inset 0 2px 0 rgba(255, 220, 170, 0.18), 0 18px 40px -18px rgba(0, 0, 0, 0.7);
  --lk-key: linear-gradient(180deg, #efe4c6, #d6c49a); --lk-key-fg: #3b2a14; --lk-key-shadow: 0 2px 0 #7d6536, 0 3px 5px rgba(0, 0, 0, 0.35); --lk-lamp-off: #b8a47a;
  --lk-on: linear-gradient(180deg, #d9b56a, #b98e3e); --lk-on-fg: #2a1a08; --lk-on-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
  --lk-well: #2a1a0e; --lk-well-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
  --lk-knob: radial-gradient(circle at 40% 35%, #f3d68f, #b98e3e 55%, #7a5a20); --lk-knob-shadow: 0 0 0 2px #5a3f16, 0 5px 10px rgba(0, 0, 0, 0.5); --lk-knob-mark: #3b2a14;
  --lk-panel: repeating-linear-gradient(180deg, #f4ecd6 0 23px, #d9cfb4 23px 24px); --lk-panel-fg: #4a3a22; --lk-panel-head: #2a1c0c; --lk-panel-accent: #9a3b1c; --lk-panel-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); --lk-hint: rgba(229, 183, 90, 0.25);
  --lk-list: rgba(244, 236, 214, 0.9); --lk-list-hover: #fbf5e4; --lk-list-fg: #3b2a14; --lk-line: rgba(90, 63, 22, 0.25);
  --lk-red: linear-gradient(180deg, #a8452c, #7d2c18); --lk-red-fg: #f7e6cc;
  font-family: Georgia, serif;
}
.br--jar .osc-top, .br--dome .osc-top { font: italic 0.9rem Georgia, serif; letter-spacing: 0.02em; text-transform: none; }
.br--jar .osc-bezel { padding: 10px; border-radius: 6px; background: linear-gradient(180deg, #2c1a0f, #1c1009); box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 220, 170, 0.15); }
.br--jar .osc-screen { border-radius: 3px; background: radial-gradient(ellipse 70% 60% at 50% 35%, #3b3527, #17140e 75%); box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.8); }
.br--jar .br-info { font-family: Georgia, serif; line-height: 24px; }
.br--jar .br-info h3 { font-family: Georgia, serif; }
/* ── 3: museum exhibit under a glass dome that can be lifted off ── */
.br--dome {
  --lk-case: linear-gradient(180deg, #1f2d27, #16211c); --lk-fg: #e9dfc7; --lk-muted: #9aa894; --lk-accent: #d4a94f; --lk-accent-ink: #231806;
  --lk-case-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 40px -18px rgba(0, 0, 0, 0.75);
  --lk-key: linear-gradient(180deg, #f6f0e0, #e0d6bd); --lk-key-fg: #2a2418; --lk-key-shadow: 0 0 0 1px #b8963f, 0 2px 4px rgba(0, 0, 0, 0.35); --lk-lamp-off: #cfc3a3;
  --lk-on: linear-gradient(180deg, #e2c079, #b98e3e); --lk-on-fg: #231806; --lk-on-shadow: 0 0 0 1px #7a5a20, inset 0 1px 3px rgba(0, 0, 0, 0.3);
  --lk-well: #0f1814; --lk-well-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
  --lk-knob: radial-gradient(circle at 40% 35%, #f3d68f, #b98e3e 55%, #7a5a20); --lk-knob-shadow: 0 0 0 2px #4d3a14, 0 5px 10px rgba(0, 0, 0, 0.5); --lk-knob-mark: #231806;
  --lk-panel: #f6f0e0; --lk-panel-fg: #3f3827; --lk-panel-head: #1f1a10; --lk-panel-accent: #7a5a20; --lk-panel-shadow: 0 0 0 1px #b8963f, 0 6px 14px rgba(0, 0, 0, 0.45); --lk-hint: #ece2c6;
  --lk-list: rgba(246, 240, 224, 0.92); --lk-list-hover: #fffaf0; --lk-list-fg: #2a2418; --lk-line: rgba(184, 150, 63, 0.4);
  --lk-red: linear-gradient(180deg, #8c3a2c, #6a2618); --lk-red-fg: #f6e6cc;
}
.br--dome .osc-bezel { padding: 0; border-radius: 4px; background: #111; box-shadow: 0 0 0 1px #b8963f, 0 8px 20px rgba(0, 0, 0, 0.5); }
.br--dome .osc-screen { border-radius: 3px; background: radial-gradient(ellipse 55% 75% at 50% 8%, rgba(255, 238, 200, 0.2), transparent 70%), linear-gradient(180deg, #2b3b33, #16201b 70%); box-shadow: none; }
.br--dome .br-info h3 { font-family: Georgia, serif; font-style: italic; }
.dm-toggle { position: absolute; right: 10px; bottom: 10px; z-index: 3 !important; pointer-events: auto; padding: 0.35rem 0.8rem; border: 1px solid #b8963f; border-radius: 3px; background: rgba(246, 240, 224, 0.92); color: #2a2418; font: italic 12px Georgia, serif; cursor: pointer; }


/* map switcher: regions, networks, Brodmann */
.br-maps { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0 0.2rem 0.6rem; }
.br-maps .osc-cap { margin: 0 0.3rem 0 0; }
.br-maps button { padding: 0.3rem 0.7rem; border: 0; border-radius: 4px; font: 0.66rem var(--mono); letter-spacing: 0.04em; cursor: pointer; color: #2b2c30; background: linear-gradient(180deg, #f1f1ec, #cfd1ca); box-shadow: 0 2px 0 #85887f; }
.br-maps button.on { color: #5dff9a; background: #0b140e; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.8); }
.br:not(.br--osc) .br-maps button { color: var(--lk-key-fg); background: var(--lk-key); box-shadow: var(--lk-key-shadow); }
.br:not(.br--osc) .br-maps button.on { color: var(--lk-on-fg); background: var(--lk-on); box-shadow: var(--lk-on-shadow); }
.br--map .br-tabs { display: none; }

/* ── Lab: nervous system up close ── */
.nv-toc { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0 1.6rem; }
.nv-toc a { padding: 0.3rem 0.75rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: 0.72rem var(--mono); text-decoration: none; }
.nv-toc a:hover { border-color: var(--accent); }
.nv-mod { margin: 0 0 3.2rem; padding: 0; scroll-margin-top: 5rem; }
.nv-h { display: flex; align-items: baseline; gap: 0.6rem; margin: 0 0 0.5rem; font: 1.7rem var(--serif); color: var(--text); }
.nv-h span { font: 0.8rem var(--mono); color: var(--accent); }
.nv-h b { font-weight: 400; }
.nv-lead { max-width: 70ch; margin: 0 0 1rem; line-height: 1.65; }
.nv-card { padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.nv-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem 1.4rem; margin-top: 1.1rem; }
.nv-facts h3 { margin: 0 0 0.25rem; font: 600 0.72rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.nv-facts p { margin: 0; font-size: 0.9rem; line-height: 1.6; }
.nv-note { margin: 0.9rem 0 0; font-size: 0.78rem; max-width: 80ch; }
.nv-btn { padding: 0.5rem 0.9rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); font: 0.78rem var(--mono); cursor: pointer; }
.nv-btn:hover { border-color: var(--text); }
.nv-btn--go { border-color: #e5484d; background: #e5484d; color: #fff; }
.nv-btn--go:hover { border-color: #c33338; background: #d93b40; }
.nv-switch { display: inline-flex; align-items: center; gap: 0.55rem; cursor: pointer; font: 0.8rem var(--sans); color: var(--text); }
.nv-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.nv-switch i { position: relative; width: 36px; height: 20px; border-radius: 10px; background: var(--border); transition: background 0.2s; flex: none; }
.nv-switch i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); transition: left 0.2s; }
.nv-switch input:checked + i { background: var(--accent); }
.nv-switch input:checked + i::after { left: 18px; }
.nv-switch input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
.nn-cv { display: block; width: 100%; touch-action: pan-y; border-radius: 8px; }
.nn-cv:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nn-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem; margin-top: 0.8rem; }
.nn-scopebox { padding: 8px; border-radius: 10px; background: linear-gradient(180deg, #2c2e32, #3a3c41); box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.7); }
.nn-scope { display: block; width: 100%; height: 190px; border-radius: 6px; }
.nn-ctrl { display: flex; flex-direction: column; gap: 0.8rem; }
.nn-slider { display: grid; grid-template-columns: 1fr auto; gap: 0.3rem; font: 0.8rem var(--sans); color: var(--text); }
.nn-slider output { font: 0.8rem var(--mono); }
.nn-slider input { grid-column: 1 / -1; accent-color: #e5484d; }
.nn-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.nn-speed { margin: 0; font-size: 0.82rem; }
.nn-speed b { color: var(--text); font-weight: 600; }
.nn-status { margin: 0; padding: 0.55rem 0.7rem; border-radius: 8px; background: var(--bg); font-size: 0.84rem; line-height: 1.5; color: var(--text); border-left: 3px solid var(--border); }
.nn-status.is-ok { border-left-color: #ffb020; }
.nn-status.is-bad { border-left-color: #8a8a8a; }
@media (max-width: 720px) { .nn-row { grid-template-columns: 1fr; } .nv-h { font-size: 1.35rem; } }
.sy-ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.4rem; margin: 0.8rem 0; }
/* reflex and spinal cord */
.rx-card { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 1rem; align-items: start; }
.rx-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--mono); }
.rx-svg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rx-side { display: flex; flex-direction: column; gap: 0.7rem; }
.rx-info { padding: 0.7rem 0.8rem; border-radius: 8px; background: var(--bg); }
.rx-info h3 { margin: 0 0 0.3rem; font: 1.05rem var(--serif); color: var(--text); }
.rx-info p { margin: 0; font-size: 0.86rem; line-height: 1.55; }
.rx-wm { fill: #f4efe2; stroke: #b7ab8c; stroke-width: 2; cursor: pointer; }
.rx-grey { fill: #b9a9c6; stroke: #8d7aa0; stroke-width: 1.5; pointer-events: none; }
.rx-zone { fill: transparent; cursor: pointer; }
.rx-tract { cursor: pointer; opacity: 0.32; mix-blend-mode: multiply; transition: opacity 0.2s; }
.rx-tract:hover { opacity: 0.55; }
.rx-img { pointer-events: none; }
.rx-rootzone { fill: none; stroke: transparent; stroke-width: 26; stroke-linecap: round; cursor: pointer; }
.rx-rootzone.is-sel { stroke: rgba(255, 176, 32, 0.35); }
.rx-zone.is-sel { fill: rgba(255, 176, 32, 0.3); stroke: #ffb020; stroke-width: 2; }
.rx-zone[data-part="wm"].is-sel { fill: rgba(255, 176, 32, 0.12); }
.rx-tract.is-mirror { opacity: 0.3; }
.rx-tract.is-dc { fill: #7cc6a4; }
.rx-tract.is-cst { fill: #ef8f7b; }
.rx-tract.is-stt { fill: #f2c55c; }
.rx-cc { fill: #6fb2e8; stroke: #3b7fb8; cursor: pointer; }
.rx-fissure, .rx-sulcus { stroke: #b7ab8c; stroke-width: 2.5; }
.rx-root { fill: none; stroke: #c9b37a; stroke-width: 10; stroke-linecap: round; cursor: pointer; }
.rx-root.is-mirror { opacity: 0.5; cursor: default; }
.rx-drg { fill: #e3c79f; stroke: #111; stroke-width: 2; cursor: pointer; }
.rx-drg.is-sel { fill: #ffd27a; }
.rx-skin { fill: url(#rx-gskin); stroke: #3d2a22; stroke-width: 1.8; stroke-linejoin: round; }
.rx-quad { fill: url(#rx-gquad); stroke: #7a2e27; stroke-width: 1.2; opacity: 0.9; transition: fill 0.15s, transform 0.15s; transform-origin: 700px 120px; }
.rx-quad.is-on { fill: #c0392b; filter: drop-shadow(0 0 5px rgba(255, 120, 60, 0.7)); transform: scale(1.02, 0.97); }
.rx-ham { fill: url(#rx-gham); stroke: #7a3d35; stroke-width: 1; opacity: 0.75; transition: opacity 0.2s; }
.rx-ham.is-off { opacity: 0.25; }
.rx-spindle { fill: none; stroke: #2f7bd2; stroke-width: 2.5; cursor: pointer; }
.rx-spindle.is-on { stroke: #ffb020; stroke-width: 4; }
.rx-knee { fill: #fbf1e4; stroke: #3d2a22; stroke-width: 1.8; }
.rx-lower { transform-origin: 842px 264px; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1); }
.rx-lower.is-kick { transform: rotate(-32deg); }
.rx-hammer { transform-origin: 946px 287px; transition: transform 0.12s; }
.rx-hammer.is-hit { transform: rotate(14deg); }
.rx-hammer-stick { fill: #8a6a4a; }
.rx-hammer-head { fill: #c8483e; }
.rx-hit { fill: transparent; cursor: pointer; }
.rx-path { fill: none; stroke-width: 3; stroke-linecap: round; opacity: 0.55; }
.rx-path.is-sens { stroke: #2f7bd2; }
.rx-path.is-mot { stroke: #d33b30; }
.rx-path.is-inh { stroke: #8a55b8; stroke-dasharray: 6 5; cursor: pointer; }
.rx-path.is-up { stroke: #1fae4a; stroke-dasharray: 3 5; }
.rx-arrow { fill: none; stroke: #1fae4a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.rx-mn { fill: #d33b30; stroke: #fff; stroke-width: 2; cursor: pointer; }
.rx-mn.is-on, .rx-in.is-on { filter: drop-shadow(0 0 6px #ffb020); fill: #ffb020; }
.rx-in { fill: #8a55b8; stroke: #fff; stroke-width: 1.5; cursor: pointer; }
.rx-dot { stroke: #fff; stroke-width: 2; }
.rx-dot.is-sens { fill: #2f7bd2; }
.rx-dot.is-mot { fill: #d33b30; }
.rx-dot.is-inh { fill: #8a55b8; }
.rx-dot.is-up { fill: #1fae4a; }
.rx-label { font-size: 12px; fill: var(--muted); pointer-events: none; }
.rx-label.is-dim { font-size: 10px; opacity: 0.8; }
.rx-label.is-hint { fill: #c8483e; }
.is-sel { filter: drop-shadow(0 0 5px #ffb020); }
.rx-tract.is-sel { opacity: 0.7; stroke: #ffb020; stroke-width: 2.5; }
html.theme-dark .rx-wm { fill: #3a3448; stroke: #6d6380; }
html.theme-dark .rx-grey { fill: #6f5f86; stroke: #8f7ea8; }
@media (prefers-color-scheme: dark) { html:not(.theme-light) .rx-wm { fill: #3a3448; stroke: #6d6380; } html:not(.theme-light) .rx-grey { fill: #6f5f86; stroke: #8f7ea8; } }
@media (max-width: 860px) { .rx-card { grid-template-columns: 1fr; } }
.rx-svg:focus:not(:focus-visible) { outline: none; }
/* eye */
.ey-eyes { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.6rem; }
.nv-seg { padding: 0.35rem 0.75rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--text); font: 0.74rem var(--sans); cursor: pointer; }
.nv-seg.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.ey-svg { --ey-vit-in: #fbfbff; --ey-vit-out: #e9edf7; display: block; width: 100%; height: auto; font-family: var(--mono); }
html.theme-dark .ey-svg { --ey-vit-in: #2a2d38; --ey-vit-out: #1f212a; }
@media (prefers-color-scheme: dark) { html:not(.theme-light) .ey-svg { --ey-vit-in: #2a2d38; --ey-vit-out: #1f212a; } }
.ey-sclera { fill: #f7f3ee; stroke: #bfb6aa; stroke-width: 3; }
.ey-retina { fill: none; stroke: #d9534f; stroke-width: 6; opacity: 0.75; }
.ey-nerve { fill: #f2dc9b; stroke: #c9b37a; stroke-width: 2; }
.ey-fovea { fill: #fff; stroke: #7a1030; stroke-width: 1.5; }
.ey-credit { text-anchor: end; opacity: 0.8; }
.ey-cornea { fill: url(#ey-gcor); stroke: #2f5f86; stroke-width: 1.8; }
.ey-iris { fill: #5a8f6a; }
.ey-cil { fill: #a3193f; stroke: #5e0d24; stroke-width: 1.5; transition: rx 0.2s; }
.ey-zon { fill: none; stroke: #7a2037; stroke-width: 1.5; stroke-dasharray: 2 2; }
.ey-lens { fill: url(#ey-glens); stroke: #6d3f47; stroke-width: 1.8; transition: rx 0.2s; }
.ey-glass { fill: rgba(190, 225, 250, 0.55); stroke: #2f4a60; stroke-width: 2; }
.ey-ray { fill: none; stroke: #ffb400; stroke-width: 2.4; opacity: 0.95; filter: drop-shadow(0 0 2px rgba(255, 180, 0, 0.6)); }
.ey-ray.is-ghost { stroke-dasharray: 4 4; opacity: 0.45; }
.ey-focus { fill: #f0a202; stroke: #fff; stroke-width: 1.5; }
.ey-focus.is-sharp { fill: #1fae4a; }
.ey-arrow { fill: none; stroke: var(--text); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.ey-star { fill: #f0c02b; }
.ey-label { font-size: 12px; fill: var(--muted); }
.ey-label.is-small { font-size: 11px; }
.ey-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1rem; margin-top: 0.8rem; align-items: start; }
.ey-ctrl { display: flex; flex-direction: column; gap: 0.7rem; }
.ey-viewbox { padding: 0.7rem; border-radius: 10px; background: var(--bg); text-align: center; overflow: hidden; }
.ey-cap { margin: 0 0 0.4rem; font: 0.7rem var(--mono); text-transform: uppercase; letter-spacing: 0.06em; }
.ey-view { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.8rem 0; background: #fff; color: #111; border-radius: 6px; font-family: Arial, sans-serif; transition: filter 0.25s; }
.ey-view b { font-size: 3rem; line-height: 1; }
.ey-view span { font-size: 1.9rem; letter-spacing: 0.3em; }
.ey-view span + span { font-size: 1.35rem; }
.ey-view small { font-size: 0.95rem; letter-spacing: 0.3em; }
.bs-card { margin-top: 1rem; }
.bs-h { margin: 0 0 0.3rem; font: 1.15rem var(--serif); color: var(--text); }
.bs-how { margin: 0 0 0.7rem; font-size: 0.88rem; max-width: 75ch; }
.bs-box { position: relative; height: 150px; margin: 0.4rem 0 0.8rem; border-radius: 10px; background: #fff; }
.bs-cross { position: absolute; left: 12%; top: 50%; transform: translate(-50%, -52%); font: 700 2.4rem Arial, sans-serif; color: #111; }
.bs-dot { position: absolute; left: min(12% + 330px, 90%); top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: #e5484d; }
.bs-box.has-line::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; background: #2f7bd2; }
.bs-box.has-line .bs-dot { background: #e5484d; }
@media (max-width: 720px) { .ey-row { grid-template-columns: 1fr; } .bs-dot { left: 88%; } .bs-cross { left: 10%; } }
/* senses */
.se-wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.se-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45rem; }
.se-tile { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.7rem 0.4rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); font: 0.82rem var(--sans); cursor: pointer; }
.se-tile span { font-size: 1.5rem; line-height: 1; }
.se-tile.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.se-card { padding: 0.9rem 1rem; border-radius: 10px; background: var(--bg); }
.se-card h3 { margin: 0 0 0.5rem; font: 1.3rem var(--serif); color: var(--text); }
.se-card dl { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.8rem; margin: 0 0 0.6rem; font-size: 0.86rem; }
.se-card dt { font: 0.68rem var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding-top: 0.15rem; }
.se-card dd { margin: 0; color: var(--text); }
.se-card p { margin: 0; font-size: 0.88rem; line-height: 1.6; }
.se-tests { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin-top: 1rem; }
.se-tests .nv-card { display: flex; flex-direction: column; gap: 0.6rem; }
.se-tests .bs-how { margin: 0; }
.af-box { position: relative; display: flex; flex-direction: column; height: 170px; border-radius: 6px; overflow: hidden; }
.af-box i { flex: 1; }
.af-box.is-flag i:nth-child(1) { background: #ffffff; box-shadow: inset 0 0 0 1px #ddd; }
.af-box.is-flag i:nth-child(2) { background: #22ffff; }
.af-box.is-flag i:nth-child(3) { background: #0031ff; }
.af-box.is-white i { background: #fff; }
.af-box b { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: #000; }
.hr-freq { margin: 0; font: 2rem var(--mono); color: var(--text); text-align: center; }
@media (max-width: 720px) { .se-wrap { grid-template-columns: 1fr; } }
/* meninges */
.mh-stage { position: relative; border-radius: 8px; overflow: hidden; background: #fff; touch-action: manipulation; }
.mh-stage img { display: block; width: 100%; height: auto; }
.mh-ov { position: absolute; inset: 0; width: 100%; height: 100%; }
.mh-credit { position: absolute; right: 8px; bottom: 6px; font: 10px var(--mono); color: #6b6377; opacity: 0.8; pointer-events: none; }
.mh-layers { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.mh-layers .nv-seg { font-size: 0.78rem; padding: 0.2rem 0.55rem; }
.mh-svg { display: block; width: 100%; height: auto; font-family: var(--mono); border-radius: 8px; overflow: hidden; }
.mh-layer { transition: opacity 0.4s, transform 0.4s; }
.mh-layer.is-off { opacity: 0; transform: translateY(-40px); pointer-events: none; }
.mh-skin { fill: #eac2a2; stroke: #c99f80; cursor: pointer; }
.mh-hair { fill: none; stroke: #5a4030; stroke-width: 1.2; }
.mh-bone { fill: #efe7d3; stroke: #c9bb99; cursor: pointer; }
.mh-diploe { fill: #e3d6b6; cursor: pointer; }
.mh-pore { fill: #cbb98f; pointer-events: none; }
.mh-dura { fill: #c9d4dc; stroke: #8fa3b3; cursor: pointer; }
.mh-sinus { fill: #4b5fb5; stroke: #8fa3b3; cursor: pointer; }
.mh-gran { fill: #b9dcf0; stroke: #6aa7cf; cursor: pointer; }
.mh-arach { fill: #eef3f6; stroke: #b6c4cf; cursor: pointer; }
.mh-sas { fill: #d9eefb; cursor: pointer; }
.mh-trab { stroke: #b6c4cf; stroke-width: 1; }
.mh-artery { fill: #d9534f; stroke: #fff; cursor: pointer; }
.mh-vein { fill: none; stroke: #4b5fb5; stroke-width: 4; stroke-linecap: round; cursor: pointer; }
.mh-pia { fill: none; stroke: #e39aa0; stroke-width: 2; cursor: pointer; }
.mh-grey { fill: #b8a0a8; stroke: #9a7f88; cursor: pointer; }
.mh-white { fill: #f3ece6; pointer-events: none; }
.mh-csf-dot { fill: #2f7bd2; opacity: 0.8; pointer-events: none; }
.mh-blood { fill: #9e1b1b; opacity: 0.88; pointer-events: none; }
.mh-label { font-size: 12px; fill: #3b3441; pointer-events: none; paint-order: stroke; stroke: rgba(255, 255, 255, 0.75); stroke-width: 3px; transition: opacity 0.3s; }
.mh-label.is-off { opacity: 0; }
.mh-svg .is-sel { filter: drop-shadow(0 0 4px #ffb020); }
.mh-bleeds { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.rx-info h3.is-bleed { color: #b3261e; }
.rx-info h3 + p + h3 { margin-top: 0.7rem; }
.mh-lead { fill: none; stroke: #6b6377; stroke-width: 1; opacity: 0.7; transition: opacity 0.3s; }
.mh-lead-dot { fill: #3b3441; transition: opacity 0.3s; }
.mh-labs .is-off { opacity: 0; }
html.theme-dark .mh-label { fill: #e6e0ee; stroke: rgba(0, 0, 0, 0.6); }
html.theme-dark .mh-lead { stroke: #b9b2c9; }
html.theme-dark .mh-lead-dot { fill: #e6e0ee; }
@media (prefers-color-scheme: dark) { html:not(.theme-light) .mh-label { fill: #e6e0ee; stroke: rgba(0, 0, 0, 0.6); } html:not(.theme-light) .mh-lead { stroke: #b9b2c9; } html:not(.theme-light) .mh-lead-dot { fill: #e6e0ee; } }
/* real neurons in 3D */
.n3-card { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1rem; margin-bottom: 1.4rem; background: #0e1116; border-color: #1f2530; color: #cfd5de; }
.n3-view { position: relative; }
.n3-cv { display: block; width: 100%; height: min(60vh, 460px); border-radius: 8px; background: radial-gradient(ellipse at 50% 45%, #1a2130, #0b0e13 70%); touch-action: none; cursor: grab; opacity: 0; transition: opacity 0.6s; }
.n3-cv.ready { opacity: 1; }
.n3-scale { position: absolute; left: 10px; bottom: 6px; margin: 0; font: 10px var(--mono); color: #7d8896; }
.n3-side { display: flex; flex-direction: column; gap: 0.7rem; }
.n3-kicker { margin: 0; font: 0.68rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: #7fd4ff; }
.n3-card .nv-seg { background: #151a22; color: #cfd5de; border-color: #2a3240; }
.n3-card .nv-seg.on { background: #cfd5de; color: #0e1116; }
.n3-card .nv-btn { background: #151a22; color: #cfd5de; border-color: #2a3240; }
.n3-card .nv-btn--go { background: #e5484d; border-color: #e5484d; color: #fff; }
.n3-info h3 { margin: 0; font: 1.35rem var(--serif); color: #fff; }
.n3-info p { margin: 0.3rem 0 0; font-size: 0.88rem; line-height: 1.6; color: #b5bdc8; max-width: none; }
.n3-info .n3-where { font: 0.72rem var(--mono); color: #7d8896; }
.n3-info .n3-src { font: 0.66rem var(--mono); color: #6b7582; }
.n3-card .nv-note { color: #7d8896; margin: 0; }
.nv-sub { margin: 0 0 0.6rem; font: 1.1rem var(--serif); color: var(--text); }
@media (max-width: 860px) { .n3-card { grid-template-columns: 1fr; } .n3-cv { height: 360px; } }
.e3-layers .nv-seg[aria-pressed="true"] { background: #cfd5de; color: #0e1116; }
.e3-card .nn-slider { color: #cfd5de; }
.e3-card .nv-switch { color: #cfd5de; }
.n3-view .br-tip, .mh-stage .br-tip { position: absolute; }
/* sensory cell drawings */
.se-right { display: flex; flex-direction: column; gap: 0.6rem; }
.se-right #se-stim { align-self: flex-start; }
.se-draw { padding: 0.6rem; border-radius: 10px; background: var(--bg); }
.se-svg { display: block; width: 100%; height: auto; font-family: var(--mono); overflow: visible;
  --se-mem: #5b5170; --se-cyt: #efe7fb; --se-nuc: #b9a9dc; }
html.theme-dark .se-svg { --se-mem: #c9c0dc; --se-cyt: #3a3450; --se-nuc: #7d6fa0; }
@media (prefers-color-scheme: dark) { html:not(.theme-light) .se-svg { --se-mem: #c9c0dc; --se-cyt: #3a3450; --se-nuc: #7d6fa0; } }
.se-lab { font-size: 10.5px; fill: var(--muted); }
.se-lab.is-small { font-size: 9px; }
.se-cell { fill: var(--se-cyt); stroke: var(--se-mem); stroke-width: 2; }
.se-nuc { fill: var(--se-nuc); }
.se-disc { fill: #8f7fc0; }
.se-axonl, .se-dend { stroke: var(--se-mem); stroke-width: 4; stroke-linecap: round; fill: none; }
.se-term { fill: #6c9ee0; }
.se-nerve { fill: none; stroke: #e0a93a; stroke-width: 4; stroke-linecap: round; }
.se-nervel { fill: none; stroke: #e0a93a; stroke-width: 2; }
.se-photon { fill: none; stroke: #f5c400; stroke-width: 2.5; opacity: 0; }
.se-gel { fill: rgba(150, 190, 230, 0.35); stroke: #8fb3d6; }
.se-cilia { fill: #8a55b8; }
.se-kino { fill: #5a2f86; }
.se-link { stroke: #e5484d; stroke-width: 1.5; }
.se-ion { fill: #ff7a1a; opacity: 0; }
.se-ves { fill: #2f7bd2; opacity: 0.5; }
.se-epi { fill: #f3d8c4; }
.se-derm { fill: #f7e6da; }
html.theme-dark .se-epi { fill: #6a5448; } html.theme-dark .se-derm { fill: #54443b; }
@media (prefers-color-scheme: dark) { html:not(.theme-light) .se-epi { fill: #6a5448; } html:not(.theme-light) .se-derm { fill: #54443b; } }
.se-skin { stroke: #c99f80; stroke-width: 2; fill: none; }
.se-finger { fill: #eab99a; stroke: #b98a6b; stroke-width: 2; }
.se-merkel { fill: #6c9ee0; }
.se-meiss { fill: #e9d7f5; stroke: #8a55b8; stroke-width: 1.5; }
.se-onion { fill: rgba(233, 215, 245, 0.35); stroke: #8a55b8; stroke-width: 1.2; }
.se-ruff { fill: #d8ecd8; stroke: #3f8f5a; stroke-width: 1.5; }
.se-free { fill: none; stroke: #e0a93a; stroke-width: 3; stroke-linecap: round; }
.se-free.is-cold { stroke: #2f7bd2; } .se-free.is-warm { stroke: #d9534f; } .se-free.is-slow { stroke: #b07a2a; stroke-width: 2; }
.se-myel { stroke: #f4e7bf; stroke-width: 4; }
.se-snow { stroke: #2f7bd2; stroke-width: 2; fill: none; opacity: 0; }
.se-flame { fill: #ff8a1a; opacity: 0; }
.se-pin { stroke: #777; stroke-width: 3; } .se-pinhead { fill: #d9534f; }
.se-air { fill: rgba(170, 210, 240, 0.25); }
.se-mucus { fill: rgba(200, 230, 180, 0.6); }
.se-knob { fill: var(--se-cyt); stroke: var(--se-mem); stroke-width: 2; }
.se-cilia2 { fill: none; stroke: var(--se-mem); stroke-width: 1.5; }
.se-mol { fill: #1fae4a; }
.s-odor, .s-sugar { transform: translate(var(--x), -30px); opacity: 0; }
.se-bud { fill: #f7e1ea; stroke: #c98aa0; stroke-width: 2; }
.se-tcell { fill: none; stroke: #c98aa0; stroke-width: 7; stroke-linecap: round; opacity: 0.6; }
.se-sug { fill: #f5c400; stroke: #b08a00; }
.se-muscle { fill: #e4a39a; }
.se-capsule { fill: rgba(255, 255, 255, 0.55); stroke: #b86f5e; stroke-width: 1.5; }
.se-intra { stroke: #c0392b; stroke-width: 4; }
.se-spiral { fill: none; stroke: #e0a93a; stroke-width: 2.5; }
.se-arrow { fill: #777; opacity: 0; }
/* the stimulus: 0.5 s delay, 1.5 s on, like the trace */
.is-stim .s-photon { animation: sePhoton 1.5s 0.5s both; animation-delay: calc(0.5s + var(--d, 0s)); }
@keyframes sePhoton { 0% { opacity: 0; transform: translateY(-20px); } 15%, 85% { opacity: 1; transform: translateY(18px); } 100% { opacity: 0; transform: translateY(18px); } }
.is-stim .s-dim { animation: seDim 1.5s 0.5s both; }
@keyframes seDim { 0% { opacity: 1; } 15%, 85% { opacity: 0.25; } 100% { opacity: 1; } }
.is-stim .s-disc { animation: seDisc 1.5s 0.5s both; }
@keyframes seDisc { 0% { fill: #8f7fc0; } 15%, 85% { fill: #f0b84a; } 100% { fill: #8f7fc0; } }
.is-stim .s-bundle, .is-stim .s-bundle2 { animation: seTilt 1.5s 0.5s both; }
@keyframes seTilt { 0% { transform: rotate(0); } 12%, 88% { transform: rotate(12deg); } 100% { transform: rotate(0); } }
.is-stim .s-cupula { animation: seCup 1.5s 0.5s both; }
@keyframes seCup { 0% { transform: skewX(0); } 12%, 88% { transform: skewX(14deg); } 100% { transform: skewX(0); } }
.is-stim .s-ion { animation: seIon 0.7s linear infinite; animation-delay: calc(0.6s + var(--d, 0s)); animation-iteration-count: 2; }
@keyframes seIon { 0% { opacity: 1; transform: translateY(-6px); } 100% { opacity: 0; transform: translateY(30px); } }
.is-stim .s-ves { animation: seDim 1.5s 0.5s both reverse; }
.is-stim .s-finger { animation: seFinger 1.5s 0.5s both; }
@keyframes seFinger { 0% { transform: translateY(-14px); } 10%, 90% { transform: translateY(8px); } 100% { transform: translateY(-14px); } }
.s-finger { transform: translateY(-14px); }
.is-stim .s-press { animation: sePress 1.5s 0.5s both; }
@keyframes sePress { 0%, 100% { transform: none; } 10%, 90% { transform: translateY(4px); } }
.is-stim .s-pacini { animation: sePac 1.5s 0.5s both; transform-origin: 240px 170px; }
@keyframes sePac { 0% { transform: none; } 6% { transform: scale(1.08, 0.9); } 14%, 86% { transform: none; } 94% { transform: scale(1.08, 0.9); } 100% { transform: none; } }
.is-stim .se-snow, .is-stim .se-flame { animation: seShow 1.5s 0.5s both; }
@keyframes seShow { 0% { opacity: 0; } 12%, 88% { opacity: 1; } 100% { opacity: 0; } }
.is-stim .s-pin { animation: sePin 0.4s 0.5s both; }
@keyframes sePin { 0% { transform: translateY(-20px); } 60% { transform: translateY(26px); } 100% { transform: translateY(0); } }
.is-stim .s-odor { animation: seOdor 1.5s 0.5s both; animation-delay: calc(0.5s + var(--d)); }
@keyframes seOdor { 0% { opacity: 0; transform: translate(var(--x), -30px); } 30%, 85% { opacity: 1; transform: translate(calc(var(--x) + 10px), 46px); } 100% { opacity: 0; transform: translate(calc(var(--x) + 10px), 46px); } }
.is-stim .s-sugar { animation: seSugar 1.5s 0.5s both; animation-delay: calc(0.5s + var(--d)); }
@keyframes seSugar { 0% { opacity: 0; transform: translate(var(--x), 10px); } 30%, 85% { opacity: 1; transform: translate(180px, 56px); } 100% { opacity: 0; transform: translate(180px, 56px); } }
.is-stim .s-stretch { animation: seStretch 1.5s 0.5s both; }
@keyframes seStretch { 0% { transform: scaleX(1); } 12%, 88% { transform: scaleX(1.12); } 100% { transform: scaleX(1); } }
.is-stim .s-arr { animation: seShow 1.5s 0.5s both; }
/* the spike trace */
.se-zoom { fill: rgba(255, 157, 46, 0.1); stroke: #f08a1c; stroke-width: 2.2; }
.se-zoomline { fill: none; stroke: #f08a1c; stroke-width: 1.2; stroke-dasharray: 4 4; opacity: 0.8; }
.se-zoombox { fill: none; stroke: #f08a1c; stroke-width: 1.5; opacity: 0.55; }
.se-svg.is-stim .s-zoom { animation: se-zoom 0.7s ease-in-out 0.5s 3; }
@keyframes se-zoom { 50% { fill: rgba(255, 176, 32, 0.35); stroke-width: 3.5; } }
.sx-bg { fill: #fff; }
.sx-lab { fill: #2b2433; stroke: rgba(255, 255, 255, 0.85); paint-order: stroke; font-family: var(--mono); pointer-events: none; }
.sx-lab.is-dark { fill: #fff; stroke: rgba(30, 20, 40, 0.75); }
.sx-glow { fill: rgba(255, 236, 90, 0.55); stroke: #d86a00; opacity: 0; }
.sx-photon { fill: none; stroke: #ffe04a; stroke-linecap: round; stroke-linejoin: round; }
.sx-photon-o { fill: none; stroke: #6b4a00; stroke-linecap: round; stroke-linejoin: round; }
.sx-rise, .sx-slide { opacity: 0; }
.sx-finger { fill: #f3c7a6; stroke: #4a2a1c; }
.sx-arrow { fill: none; stroke: #4a2a1c; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.sx-cold { fill: rgba(60, 150, 255, 0.35); stroke: #1d5fb0; stroke-width: 3; stroke-dasharray: 6 6; }
.sx-snow path { stroke: #0f4c9c; stroke-linecap: round; }
.sx-fade { opacity: 0; }
.sx-hi-o { fill: none; stroke: #2b1d0a; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.sx-hi { fill: none; stroke: #ffe14a; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.sx-hi.is-cold { stroke: #7cc4ff; }
.sx-hi.is-fast { stroke: #ffcf3a; }
.sx-hi.is-slow { stroke: #ff7a45; }
.sx-ring { fill: rgba(255, 230, 80, 0.25); stroke: #d86a00; opacity: 0; }
.sx-pin { stroke: #cfd3da; stroke-linecap: round; }
.sx-pin-o { stroke: #2a2c33; stroke-linecap: round; }
.sx-pinhead { fill: #d33b30; stroke: #5a120e; }
.sx-hurt { fill: rgba(230, 40, 40, 0.35); stroke: #9e1b1b; }
.sx-mol { fill: #9b59d0; stroke: #3b1760; }
.sx-sugar { fill: #fff; stroke: #7a5300; }
.sx-spk { fill: #ffb020; stroke: #3a2400; stroke-width: 2.5; }
.sx-spk.is-fast { fill: #ffe14a; }
.sx-spk.is-slow { fill: #ff6a3a; }
.se-svg.is-stim .s-glow { animation: sx-glow 1.6s ease-out var(--d, 0.5s) both; }
.se-svg.is-stim .s-ring { animation: sx-glow 1.6s ease-out var(--d, 0.5s) both; }
.se-svg.is-stim .s-hold { animation: sx-hold 1.5s linear 0.55s both; }
.se-svg.is-stim .s-onoff { animation: sx-onoff 1.8s linear 0.5s both; }
.se-svg.is-stim .s-rise { animation: sx-rise 0.9s ease-in var(--d, 0.3s) both; }
.se-svg.is-stim .s-slide { animation: sx-slide 0.9s ease-in var(--d, 0.3s) both; }
.se-svg.is-stim .s-press2 { animation: sx-press 1.5s ease-in-out 0.5s both; }
.se-svg.is-stim .s-fade { animation: sx-fade 1.5s ease-in-out 0.5s both; }
.se-svg.is-stim .s-burst { animation: sx-fade 1s ease-out 0.75s both; }
.se-svg.is-stim .s-hiline { animation: sx-glow 1.8s ease-out var(--d, 0.5s) both; }
.se-svg.is-stim[data-k="hear"] .sx-tissue { animation: sx-shake 0.12s linear 0.5s 12; }
@keyframes sx-glow { 0% { opacity: 0; } 12% { opacity: 1; } 65% { opacity: 0.8; } 100% { opacity: 0; } }
@keyframes sx-hold { 0% { opacity: 0; } 8%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sx-onoff { 0% { opacity: 0; } 5% { opacity: 1; } 18%, 78% { opacity: 0; } 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sx-rise { 0% { opacity: 0; transform: none; } 15%, 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(var(--dy)); } }
@keyframes sx-slide { 0% { opacity: 0; transform: none; } 15%, 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(var(--dx)); } }
@keyframes sx-press { 0%, 100% { transform: none; } 20%, 80% { transform: translateY(var(--dy)); } }
@keyframes sx-fade { 0%, 100% { opacity: 0; } 20%, 80% { opacity: 1; } }
@keyframes sx-shake { 25% { transform: translateY(4px); } 75% { transform: translateY(-4px); } }
.se-trace { display: block; width: 100%; height: auto; margin-top: 0.4rem; font-family: var(--mono); }
.se-stimbar { fill: var(--border); }
.is-stim .se-stimbar { animation: seBar 1.5s 0.5s both; }
@keyframes seBar { 0%, 100% { fill: var(--border); } 1%, 99% { fill: #e5484d; } }
.se-spike { stroke: var(--text); stroke-width: 1.2; }
.se-spike.is-2 { stroke: #8a55b8; }
.se-spike.s-spk { opacity: 0; animation: seSpk 0.01s both; animation-delay: var(--t); }
@keyframes seSpk { to { opacity: 1; } }
.se-axis { stroke: var(--border); }
.se-trlab { margin: 0.2rem 0 0; font: 0.7rem var(--mono); color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .se-svg *, .se-trace * { animation-duration: 0.01s !important; animation-delay: 0s !important; } }

/* ── Neuroanatomy hub: the body in 3D, panorama ── */
.nr { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 0; border-radius: 16px; overflow: hidden; background: #0c0f14; border: 1px solid #1f2530; color: #cfd5de; }
.nr-stage { position: relative; min-height: min(78vh, 720px); }
.nr-cv { display: block; width: 100%; height: min(78vh, 720px); background: radial-gradient(ellipse at 50% 40%, #1b2332 0%, #0c0f14 70%); touch-action: none; cursor: grab; opacity: 0; transition: opacity 0.8s; }
.nr-cv.ready { opacity: 1; }
.nr-load { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font: 0.9rem var(--mono); color: #7fd4ff; }
.nr-views { position: absolute; top: 12px; left: 12px; display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 10px; background: rgba(12, 15, 20, 0.7); backdrop-filter: blur(6px); }
.nr-views button { padding: 0.35rem 0.7rem; border: 0; border-radius: 7px; background: transparent; color: #aeb7c3; font: 0.72rem var(--mono); cursor: pointer; }
.nr-views button.on { background: #cfd5de; color: #0c0f14; }
.nr-layers { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; flex-wrap: wrap; gap: 5px; }
.nr-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.65rem; border: 1px solid #2a3240; border-radius: 999px; background: rgba(12, 15, 20, 0.75); color: #cfd5de; font: 0.7rem var(--sans); cursor: pointer; backdrop-filter: blur(6px); }
.nr-chip[aria-pressed="false"] { opacity: 0.45; }
.nr-dot { width: 9px; height: 9px; border-radius: 50%; background: #999; }
.nr-dot.is-skin { background: #edc7ad; } .nr-dot.is-bones { background: #ede5d1; } .nr-dot.is-brain { background: #dba8ad; } .nr-dot.is-meninges { background: #9eb8cc; }
.nr-dot.is-cranial { background: #fcd64d; } .nr-dot.is-spinal { background: #f9c740; } .nr-dot.is-auto { background: #8cd980; } .nr-dot.is-senses { background: #f2f2f7; }
.nr-side { display: flex; flex-direction: column; gap: 0.8rem; padding: 1.1rem; background: #11151c; border-left: 1px solid #1f2530; max-height: min(78vh, 720px); overflow: hidden; }
.nr-info h3 { margin: 0.15rem 0 0.4rem; font: 1.4rem var(--serif); color: #fff; }
.nr-info p { margin: 0 0 0.5rem; font-size: 0.88rem; line-height: 1.6; color: #b5bdc8; max-width: none; }
.nr-kicker { margin: 0 !important; font: 0.66rem var(--mono) !important; letter-spacing: 0.08em; text-transform: uppercase; color: #7fd4ff !important; }
.nr-link { display: inline-block; margin-top: 0.2rem; padding: 0.4rem 0.8rem; border-radius: 8px; background: #7fd4ff; color: #0c0f14; font: 0.76rem var(--mono); text-decoration: none; }
.nr-list { flex: 1; overflow-y: auto; border-top: 1px solid #1f2530; padding-top: 0.6rem; }
.nr-list details { margin-bottom: 0.3rem; }
.nr-list summary { cursor: pointer; font: 0.72rem var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: #7d8896; padding: 0.25rem 0; }
.nr-list button { display: block; width: 100%; padding: 0.3rem 0.5rem; border: 0; border-radius: 6px; background: none; color: #cfd5de; font: 0.82rem var(--sans); text-align: left; cursor: pointer; }
.nr-list button:hover { background: #1a212b; }
.nr-stage .br-tip { position: absolute; }
.nr-h2 { margin: 2.2rem 0 0.8rem; font: 1.5rem var(--serif); color: var(--text); }
.nr-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.8rem; }
.nr-more a { display: flex; flex-direction: column; gap: 0.3rem; padding: 1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); text-decoration: none; transition: border-color 0.2s, transform 0.2s; }
.nr-more a:hover { border-color: var(--accent); transform: translateY(-2px); }
.nr-more b { font: 1.1rem var(--serif); font-weight: 400; }
.nr-more span { font-size: 0.82rem; color: var(--muted); }
@media (max-width: 900px) { .nr { grid-template-columns: 1fr; } .nr-side { max-height: none; border-left: 0; border-top: 1px solid #1f2530; } .nr-cv, .nr-stage { height: 68vh; min-height: 0; } .nr-list { max-height: 300px; } }
.nr-load[hidden] { display: none; }

/* ── Lab gallery: the neuroanatomy collection above the grid ── */
.nx { margin: 0 0 2.2rem; }
.nx-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; overflow: hidden; border-radius: 18px; background: #0c0f14; color: #e6eaf0; text-decoration: none; border: 1px solid #1f2530; transition: transform 0.25s, box-shadow 0.25s; }
.nx-hero:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -26px rgba(12, 15, 20, 0.8); }
.nx-hero img { display: block; width: 100%; height: 100%; max-height: 380px; object-fit: cover; object-position: 50% 30%; }
.nx-text { padding: 1.8rem 2rem; }
.nx-kicker { margin: 0; font: 0.7rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: #7fd4ff; }
.nx-text h2 { margin: 0.3rem 0 0.6rem; font: 2.3rem var(--serif); color: #fff; }
.nx-text p { color: #aeb7c3; line-height: 1.6; }
.nx-go { display: inline-block; margin-top: 0.6rem; padding: 0.5rem 1rem; border-radius: 999px; background: #7fd4ff; color: #0c0f14; font: 0.8rem var(--mono); }
.nx-sub { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; margin-top: 0.7rem; }
.nx-sub a { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.8rem 1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); text-decoration: none; transition: border-color 0.2s, transform 0.2s; }
.nx-sub a:hover { border-color: #2f7bd2; transform: translateY(-2px); }
.nx-sub b { font: 1.05rem var(--serif); font-weight: 400; }
.nx-sub span { font-size: 0.78rem; color: var(--muted); line-height: 1.4; }
@media (max-width: 820px) { .nx-hero { grid-template-columns: 1fr; } .nx-hero img { max-height: 240px; } .nx-text { padding: 1.2rem; } .nx-text h2 { font-size: 1.8rem; } .nx-sub { grid-template-columns: repeat(2, 1fr); } }
/* senses: small chips on top, the drawing as a wide panorama */
.se-wrap { display: block; }
.se-wrap .se-grid { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.9rem; }
.se-wrap .se-tile { flex-direction: row; gap: 0.35rem; padding: 0.3rem 0.7rem; border-radius: 999px; font-size: 0.78rem; }
.se-wrap .se-tile span { font-size: 1rem; }
.se-wrap .se-tile.on { background: var(--text); color: var(--bg); border-color: var(--text); box-shadow: none; }
.se-pano { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.se-pano .se-draw { padding: 1rem 1.2rem 0.8rem; }
.se-pano .se-right { gap: 0.8rem; }
.se-pano .se-card { padding: 0; background: none; }
.se-pano .se-card h3 { font-size: 1.6rem; }
@media (max-width: 860px) { .se-pano { grid-template-columns: 1fr; } }
.rm-legend .nv-seg { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; padding: 0.25rem 0.6rem; }
.rm-legend .nv-seg i { width: 9px; height: 9px; border-radius: 50%; }
.rm-card { margin-bottom: 1.4rem; }

/* ── neuroanatomy atlas navigation (lab/atlas.js) ── */
.ax { display: none; }
.nv-group { margin: 2.6rem 0 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--border); font: 0.72rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.nv-sub { scroll-margin-top: 5rem; }
#nv-fleck, #nv-tests, #br-maps { scroll-margin-top: 6rem; }
.ax-f { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.6rem 0 0.9rem; }
.ax-f button { padding: 0.18rem 0.6rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: 0.7rem var(--mono); cursor: pointer; }
.ax-f button.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.ax-g { margin: 0.9rem 0 0.25rem; font: 0.66rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.ax-list ul { list-style: none; margin: 0; padding: 0; }
.ax-list a { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; padding: 0.3rem 0.55rem; border-left: 2px solid var(--border); color: var(--text); font-size: 0.84rem; line-height: 1.3; text-decoration: none; }
.ax-list a:hover { border-left-color: var(--accent); background: var(--surface); }
.ax-list a.on { border-left-color: var(--accent); background: var(--surface); font-weight: 600; }
.ax-list a.is-away { color: var(--muted); }
.ax-t { flex: none; padding: 0 0.35rem; border-radius: 4px; background: #1f2433; color: #8fd3ff; font: 600 0.6rem/1.5 var(--mono); font-style: normal; }
.ax-t.is-test { background: #fde7c7; color: #8a4b00; }
.ax-home { display: block; font: 1.05rem var(--serif); color: var(--text); text-decoration: none; }
/* no rail any more, on any screen: the chapters sit behind the button at the bottom, the page gets its room */
@media (min-width: 761px) {
  .ax-sheet { align-items: center; justify-content: center; }
  .ax-panel { width: min(460px, calc(100vw - 32px)); max-height: 78vh; border: 1px solid var(--text); box-shadow: 10px 10px 0 var(--text); }
}
/* phones and tablets: chapter button at the bottom, list as a sheet */
.ax-pill { position: fixed; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 90; transform: translateX(-50%); display: flex; align-items: stretch; max-width: calc(100vw - 24px); border: 1px solid var(--border); border-radius: 999px; background: var(--surface); box-shadow: 0 6px 24px rgba(20, 16, 30, 0.18); overflow: hidden; }
.ax-pill button { border: 0; background: none; color: var(--text); cursor: pointer; }
.ax-pill .ax-prev, .ax-pill .ax-next { width: 42px; font-size: 1.4rem; line-height: 1; }
.ax-pill button:disabled { opacity: 0.3; cursor: default; }
.ax-open { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; max-width: 60vw; padding: 0.35rem 0.8rem; border-left: 1px solid var(--border) !important; border-right: 1px solid var(--border) !important; font-size: 0.86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-open small { font: 0.62rem var(--mono); color: var(--muted); }
.ax-sheet { position: fixed; inset: 0; z-index: 200; background: rgba(15, 12, 22, 0.45); display: flex; align-items: flex-end; }
.ax-sheet[hidden] { display: none; }
.ax-panel { width: 100%; max-height: 80vh; overflow-y: auto; padding: 1rem 1.1rem calc(1.2rem + env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0; background: var(--bg); animation: ax-up 0.22s ease-out; }
.ax-top { display: flex; justify-content: space-between; align-items: center; font: 1.1rem var(--serif); }
.ax-close { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text); font-size: 1.2rem; cursor: pointer; }
.ax-panel .ax-list a { padding: 0.55rem 0.6rem; font-size: 0.95rem; }
body.ax-lock { overflow: hidden; }
@keyframes ax-up { from { transform: translateY(30px); opacity: 0; } }
main.ax-main { padding-bottom: 5rem; }

/* ================= module finish: squared grid, Red Hat, blue and yellow modules, a post-it here and there ================= */
html section { border-bottom: 0; }
html .lab-back { font: 400 13px var(--mono); color: var(--text); background: var(--bg); padding: 2px 0; }
html .lab-back:hover { color: var(--accent); }
html .section-tag { font: 400 13px var(--mono); color: var(--muted); text-transform: lowercase; letter-spacing: 0; }
html .lab-hero h1 {
  font: 700 clamp(36px, 6vw, 80px)/1 var(--sans); letter-spacing: -0.03em; display: flex; align-items: center; gap: 16px; overflow-wrap: anywhere;
}
html h1.lab-title { font: 700 clamp(1.7rem, 6vw, 2.8rem)/1.05 var(--sans); letter-spacing: -0.025em; overflow-wrap: anywhere; }
html .lab-hero h1::before { content: ""; flex: none; width: calc(var(--cell) * 1.2); height: calc(var(--cell) * 1.2); background: var(--accent); border-top-left-radius: 100%; }
html h2 { font-family: var(--sans); font-weight: 700; letter-spacing: -0.02em; }
html .lab-intro, html .lab-desc { background: var(--bg); }

/* overview: tiles as module cards, the neuro collection as a torn-out picture */
html .nx-hero { border-radius: 0; border: 0; box-shadow: 8px 8px 0 var(--text); }
html .nx-hero img { clip-path: polygon(0 2%, 8% 0, 17% 1.5%, 29% 0, 41% 2%, 55% 0.5%, 68% 2%, 80% 0, 92% 1.5%, 100% 0, 99% 30%, 100% 62%, 98.5% 100%, 85% 98.5%, 70% 100%, 52% 98%, 36% 100%, 20% 98.5%, 6% 100%, 0 98%, 1.2% 60%, 0 30%); }
html .nx-go { border-radius: 0; background: var(--yellow); color: #141414; font-family: var(--mono); }
html .nx-sub a { border-radius: 0; background: var(--bg); border: 1px solid var(--text); }
html .nx-sub a:hover { border-color: var(--accent); }
html .nx-sub b { font: 700 1rem var(--sans); }
html .lab-tiles { gap: 0; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); border-top: 1px solid var(--text); border-left: 1px solid var(--text); }
html .lab-tile { border: 0; border-right: 1px solid var(--text); border-bottom: 1px solid var(--text); border-radius: 0; background: var(--bg); }
html a.lab-tile:hover { transform: none; box-shadow: inset 0 0 0 3px var(--accent); border-color: var(--text); }
html .lab-tile-viz { border-bottom: 1px solid var(--line); background: none; }
html .lab-tile-viz svg { transition: transform 0.6s cubic-bezier(0.5, 1.6, 0.4, 1); }
html a.lab-tile:hover .lab-tile-viz svg { transform: rotate(-4deg) scale(1.06); }
html .lab-num { font-family: var(--mono); color: var(--accent); letter-spacing: 0; display: inline-flex; align-items: center; gap: 6px; }
html .lab-num::before { content: ""; width: 9px; height: 9px; background: var(--accent); border-top-left-radius: 100%; }
html .lab-tile:nth-child(3n + 2) .lab-num::before { border-radius: 50%; background: var(--yellow); }
html .lab-tile:nth-child(3n) .lab-num::before { border-radius: 0; background: var(--text); }
html .lab-tile h3 { font: 700 1.2rem/1.15 var(--sans); letter-spacing: -0.015em; }
html .lab-tile-new, html .lab-tile-lock { border-radius: 0; font-family: var(--mono); }
html .lab-tile-new { background: var(--yellow); color: #141414; }
html .project-tag { background: transparent; border: 1px solid var(--border); border-radius: 0; color: var(--text); font-family: var(--mono); }
html .vf-chips button, html .lab-sort button { border-radius: 0; font-family: var(--mono); background: var(--bg); border: 1px solid var(--text); color: var(--text); }
html .vf-chips button.on, html .lab-sort button.on { background: var(--text) !important; color: var(--bg) !important; border-color: var(--text) !important; }
html .lab-sort { border-radius: 0; border-color: var(--text); background: var(--bg); }
html .lab-count, html .lab-sort-cap { font-family: var(--mono); background: var(--bg); }

/* experiment pages: a hard-edged card, the background text on a post-it */
html .lab-card { border: 1px solid var(--text); border-radius: 0; background: var(--bg); box-shadow: 8px 8px 0 var(--text); }
html .lab-card:hover { border-color: var(--text); box-shadow: 8px 8px 0 var(--accent); }
html .lab-page .lab-card-head h3 { font: 700 clamp(1.5rem, 6vw, 2.6rem)/1.05 var(--sans); letter-spacing: -0.025em; overflow-wrap: anywhere; min-width: 0; }
html .lab-card-head { flex-wrap: wrap; }
@media (max-width: 700px) { html .lab-card, html .nx-hero { box-shadow: 5px 5px 0 var(--text); } }
html .lab-stats { font-family: var(--mono); }
html .lab-background { background: #f7e27a; color: #2a2a2a; padding: 20px 24px 24px; max-width: 680px; transform: rotate(-0.8deg); box-shadow: 0 14px 24px -14px rgba(0, 0, 0, 0.45); }
html .lab-background h2 { font: 400 2.1rem/1 var(--hand); color: #2a2a2a; letter-spacing: 0; }
html .lab-background p { color: #3a3a3a; }
html .lab-pager { border-top: 1px solid var(--text); font-family: var(--mono); background: var(--bg); }
html .lab-pager a { color: var(--text); border-bottom: 1px solid currentColor; }
html .lab-pager a:hover { color: var(--accent); }
html .ax a { border-radius: 0; }
html .ax { background: var(--bg); }

/* long words and wider fonts never push the page sideways on phones */
html .lab-card-head h3, html .lab-hero h1, html h1.lab-title { overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 700px) {
  html .lab-card { overflow-x: auto; }
  html .lab-background { transform: none; }
}

/* ---------- the same section heads as on the start page, taped cards ---------- */
html .lab-hero .section-tag, html .lab-page .section-tag {
  font: 700 clamp(36px, 5vw, 72px)/1 var(--sans); letter-spacing: -0.03em; text-transform: lowercase; color: var(--text);
  display: flex; align-items: center; gap: 16px; margin-bottom: 8px;
}
html .lab-hero .section-tag::before { content: ""; flex: none; width: calc(var(--cell) * 1.2); height: calc(var(--cell) * 1.2); background: var(--accent); border-top-left-radius: 100%; }
html .lab-hero h1 { font: 400 13px var(--mono); letter-spacing: 0; color: var(--muted); display: block; margin-bottom: calc(var(--cell) * 1.2); }
html .lab-hero h1::before { display: none; }
html .lab-intro { font-size: 16px; color: var(--text); max-width: 60ch; }
/* the neuro collection like on the start page: torn picture, text beside it */
html .nx-hero { background: transparent; color: var(--text); box-shadow: none; border: 0; padding-top: 0; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; }
html .nx-hero:hover { transform: none; box-shadow: none; }
html .nx-hero img { max-height: 380px; transition: transform 0.4s cubic-bezier(0.3, 1.4, 0.5, 1); }
html .nx-hero:hover img { transform: rotate(-1deg) scale(1.02); }
html .nx-text { padding: 0; }
html .nx-kicker { color: var(--muted); font: 400 12px var(--mono); text-transform: none; letter-spacing: 0; }
html .nx-text h2 { color: var(--text); font: 700 clamp(26px, 3vw, 38px)/1.1 var(--sans); letter-spacing: -0.02em; }
html .nx-text p { color: var(--text); }
html .nx-sub a { border: 0; border-top: 1px solid var(--line); background: transparent; padding-inline: 0; }
/* experiments as taped cards, like the projects */
html .lab-tiles { border: 0; gap: 44px 30px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); padding-top: 14px; }
html .lab-tile { border: 0; background: #fff; color: #141414; padding: 12px 12px 16px; box-shadow: 0 14px 26px -16px rgba(0, 0, 0, 0.45); transform: rotate(var(--r, -1.2deg)); overflow: visible; position: relative; transition: transform 0.3s; }
html .lab-tile:nth-child(3n + 2) { --r: 1.3deg; }
html .lab-tile:nth-child(3n) { --r: -0.6deg; }
html .lab-tile:nth-child(4n) { --r: 1.8deg; }
html .lab-tile::before { content: ""; position: absolute; left: 35%; top: -12px; width: 30%; height: 24px; background: rgba(242, 199, 46, 0.6); transform: rotate(-4deg); z-index: 2; }
html a.lab-tile:hover { transform: rotate(0) scale(1.03); box-shadow: 0 18px 30px -16px rgba(0, 0, 0, 0.45); }
html .lab-tile-viz { background: #eeebe3; border: 0; clip-path: polygon(0 3%, 9% 0, 21% 2.5%, 34% 0.5%, 47% 3%, 60% 0, 74% 2.5%, 87% 0.5%, 100% 2%, 98.5% 34%, 100% 66%, 99% 100%, 84% 97.5%, 68% 100%, 51% 97%, 35% 99.5%, 18% 97.5%, 3% 100%, 0 96%, 1.5% 62%, 0.5% 30%); }
html .lab-tile-body { padding: 12px 4px 0; }
html .lab-tile h3 { color: #141414; }
html .lab-tile p { color: #4a4a46; }
html .lab-tile .project-tag { color: #141414; border-color: rgba(20, 20, 20, 0.2); }
html.theme-dark .lab-tile { background: #f3f1ea; }
@media (max-width: 700px) {
  html .nx-hero { grid-template-columns: 1fr; }
  html .lab-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 14px; }
  html .lab-tile { padding: 8px 8px 12px; }
  html .lab-tile h3 { font-size: 1rem; }
}
/* filters like the project tabs on the start page: handwriting, a blue line under the active one */
html .vf-chips button, html .lab-sort button {
  font: 400 1.45rem/1 var(--hand); border: 0 !important; background: none !important; color: var(--text) !important; padding: 0.1rem 0.25rem; opacity: 0.55;
  background-image: linear-gradient(var(--accent), var(--accent)) !important; background-size: 0 2px !important; background-repeat: no-repeat !important; background-position: 0 92% !important;
  transition: background-size 0.35s, opacity 0.2s;
}
html .vf-chips button.on, html .lab-sort button.on { opacity: 1; background-size: 100% 2px !important; }
html .vf-chips button small { font: 400 11px var(--mono); opacity: 0.7; }
html .vf-chips { gap: 4px 16px; }
html .lab-sort { border: 0; background: none; padding: 0; gap: 4px 12px; }
html .lab-sort-cap { font: 400 12px var(--mono); text-transform: lowercase; letter-spacing: 0; }
html .vf-chips button.on, html .lab-sort button.on {
  background-color: transparent !important; color: var(--text) !important;
  background-image: linear-gradient(var(--accent), var(--accent)) !important; background-size: 100% 2px !important; background-repeat: no-repeat !important; background-position: 0 92% !important;
}

/* the site's own chips and switches go square like the rest of the module look
   (the controls that belong to a device, like the light box or the ink tray, keep their shape) */
.vf-modes, .vf-modes button, .vf-zoom, .br-looks button, .nv-toc a, .nv-seg, .ax-f button, .ax-pill, .ax-close,
.ak-tabs button, .ak-btns button, .ak-jump button, .eas-btn, .bs-full-btn, .bs-hint,
.vf-shutter, .cam-photo-btns a, .cam-photo-btns button { border-radius: 0; }
.vf-modes { border-color: var(--text); }
.vf-modes button.on, .br-looks button.on, .ax-f button.on, .nv-seg.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.br-looks button, .nv-toc a, .nv-seg, .ax-f button { background: var(--bg); border-color: var(--text); }
.br-looks button:hover, .nv-toc a:hover, .nv-seg:hover, .ax-f button:hover { border-color: var(--accent); color: var(--accent); }
.ax-home, .ax-top { font-family: var(--sans); font-weight: 700; letter-spacing: -0.01em; }
.ax-panel { border-radius: 0; border-top: 1px solid var(--text); }
.ax-list a.on, .ax-list a[aria-current] { border-left-color: var(--accent); }

/* the header is sticky now (it used to be fixed), so the pages need less room on top */
.lab-hero,
.lab-page { padding-top: clamp(2rem, 6vw, 4rem); }


/* the lab filters: plain mono chips you can actually read (the handwriting was too hard at this size) */
html #lab-filter { display: flex; flex-wrap: wrap; gap: 8px; }
html #lab-filter button, html .lab-sort button {
  font: 500 13px/1 var(--mono) !important; opacity: 1; padding: 9px 12px !important; border: 1px solid var(--border) !important;
  background: var(--bg) !important; color: var(--text) !important; background-image: none !important; border-radius: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; transition: border-color 0.2s, background-color 0.2s;
}
html #lab-filter button:hover, html .lab-sort button:hover { border-color: var(--text) !important; }
html #lab-filter button small { font: 500 11px var(--mono); opacity: 1; color: var(--muted); }
html #lab-filter button.on, html .lab-sort button.on { background: var(--text) !important; color: var(--bg) !important; border-color: var(--text) !important; background-image: none !important; }
html #lab-filter button.on small { color: var(--bg); opacity: 0.7; }
html .lab-sort { gap: 8px; align-items: center; margin-top: 12px; }
html .lab-sort button:disabled { opacity: 0.45; cursor: default; }
/* tags on the tiles: a bit larger, darker */
html .lab-tile .project-tag { font-size: 12px; padding: 4px 8px; color: #141414; border-color: rgba(20, 20, 20, 0.35); }

/* ---------- the neuroanatomy pages, calmer: more air, fewer frames, the controls quieter ---------- */
.nr { border-radius: 0; border: 1px solid var(--text); margin-top: 2.5rem; grid-template-columns: minmax(0, 1fr) 300px; }
.nr-stage { min-height: min(76vh, 700px); }
.nr-views { top: 18px; left: 18px; border-radius: 0; background: rgba(12, 15, 20, 0.55); }
.nr-views button { border-radius: 0; padding: 0.4rem 0.75rem; }
.nr-layers { left: 18px; right: 18px; bottom: 18px; gap: 6px; opacity: 0.75; transition: opacity 0.25s; }
.nr-stage:hover .nr-layers, .nr-layers:focus-within { opacity: 1; }
.nr-side { padding: 1.6rem 1.4rem; gap: 1.2rem; }
.nr-info h3 { font: 700 1.4rem/1.2 var(--sans); letter-spacing: -0.01em; }
.nr-info p { line-height: 1.7; }
.nr-list { padding-top: 1rem; }
.nr-list details { margin-bottom: 0.55rem; }
.nr-list button { border-radius: 0; padding: 0.4rem 0.5rem; }
.nr-h2 { margin: 5rem 0 1.4rem; font: 700 clamp(1.6rem, 3vw, 2.2rem)/1.1 var(--sans); letter-spacing: -0.02em; }
.nr-more { gap: 0; border-top: 1px solid var(--text); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.nr-more a { border: 0; border-radius: 0; border-bottom: 1px solid var(--border); background: transparent; padding: 1.4rem 1.4rem 1.6rem 0; gap: 0.5rem; }
.nr-more a:hover { transform: none; border-color: var(--accent); }
.nr-more b { font: 700 1.15rem var(--sans); }
.nr-more b::after { content: " →"; color: var(--accent); }
.lab-page--wide .lab-background, .ax-main .lab-background { margin-top: 5rem; }
/* the long page: every chapter gets a clear start and space around it */
.nv-mod { margin-top: 7rem; }
.nv-group { margin: 8rem 0 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--text); font: 500 12px var(--mono); letter-spacing: 0.08em; }
.nv-sub { margin: 3.5rem 0 1rem; font: 700 1.25rem var(--sans); }
.nv-mod p { line-height: 1.75; }
.ax-pill { border: 1px solid var(--text); box-shadow: 4px 4px 0 var(--text); background: var(--bg); }
@media (max-width: 860px) { .nr { grid-template-columns: 1fr; } .nv-mod { margin-top: 4.5rem; } .nv-group { margin-top: 5rem; } .nr-h2 { margin-top: 3.5rem; } }
.nr-layers button, .nr-layers label { border-radius: 0 !important; }

/* ---------- the background text as sticky notes: one big note for the explanation,
   a small one per point under "good to know" and per source. Dark text on every note, whatever the theme ---------- */
html .lab-background.lab-notes { background: none; box-shadow: none; transform: none; padding: 0; max-width: 1040px; margin-top: 7rem; color: #2a2a2a; }
.lab-notes-group + .lab-notes-group { margin-top: 4.5rem; }
html .lab-note { position: relative; background: var(--note, #f7e27a); color: #26241f; padding: 22px 24px 24px; box-shadow: 0 14px 24px -14px rgba(0, 0, 0, 0.45); transform: rotate(var(--r, -0.8deg)); }
html .lab-note::before { content: ""; position: absolute; left: 50%; top: -11px; width: 76px; height: 22px; margin-left: -38px; background: rgba(255, 255, 255, 0.55); transform: rotate(-3deg); }
html .lab-note--main { max-width: 680px; padding: 28px 30px 30px; --r: -0.4deg; }
html .lab-note h2 { font: 400 2.3rem/1 var(--hand); color: #26241f; letter-spacing: 0; margin: 0 0 1rem; }
html .lab-note p, html .lab-note li { color: #26241f; font-size: 0.95rem; line-height: 1.7; margin: 0; }
html .lab-note p + p { margin-top: 0.9rem; }
html .lab-note a { color: #154a8a; text-decoration: underline; text-underline-offset: 3px; }
html .lab-note i, html .lab-note em { color: inherit; }
html .lab-notes-h { font: 400 2.2rem/1 var(--hand); color: var(--text); letter-spacing: 0; margin: 0 0 1.8rem; background: var(--bg); display: inline-block; padding-right: 8px; }
.lab-notes-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 2.4rem 2rem; align-items: start; }
.lab-notes-group > .lab-note--main + .lab-notes-wall { margin-top: 3rem; }
.lab-notes-wall .lab-note { padding: 24px 22px 22px; }
.lab-notes-wall .lab-note p { font-size: 0.9rem; }
.lab-notes-wall .lab-note:nth-child(3n + 2) { --r: 1.1deg; }
.lab-notes-wall .lab-note:nth-child(3n) { --r: -0.4deg; }
.lab-notes-wall .lab-note:nth-child(4n) { --r: 1.6deg; }
/* the sources on light blue notes, so the two kinds tell apart at a glance */
@media (max-width: 700px) {
  html .lab-background.lab-notes { margin-top: 5rem; }
  html .lab-note { transform: rotate(calc(var(--r, -0.8deg) * 0.5)); }
  html .lab-note--main { padding: 24px 22px 24px; }
  .lab-notes-wall { grid-template-columns: 1fr; gap: 2rem; }
}
@media (prefers-reduced-motion: reduce) { html .lab-note { transform: none; } }

/* the overview: more room to breathe, one tile per row on small phones */
html .lab-bar { margin-top: 5rem; }
html .nx-sub span { color: var(--text); opacity: 0.72; }
@media (max-width: 560px) {
  html .lab-tiles { grid-template-columns: 1fr; gap: 3rem; padding-inline: 6px; }
  html .lab-tile { padding: 12px 12px 18px; }
  html .lab-tile h3 { font-size: 1.25rem; }
}

/* a tile whose picture is a screenshot (the web design studio) */
html .lab-tile-viz--shot { padding: 0; overflow: hidden; }
html .lab-tile-viz--shot img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(0.15); }

/* ================= exp_14 · Positiv getestet, und jetzt? (natural frequencies) ================= */
.bz-cases, .bz-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.bz-cases { margin: 1.6rem 0 2.2rem; }
.bz-cases button, .bz-btns button {
  font: 500 13px/1 var(--mono); padding: 10px 13px; border: 1px solid var(--border); border-radius: 0; background: var(--bg); color: var(--text); cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
.bz-cases button:hover, .bz-btns button:hover { border-color: var(--text); }
.bz-cases button[aria-pressed="true"], .bz-btns button[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.bz-story { max-width: 62ch; display: grid; gap: 1rem; }
.bz-tell { font: 500 1.2rem/1.5 var(--sans); color: var(--text); }
.bz-facts { font-size: 1rem; line-height: 1.7; color: var(--text); border-left: 3px solid var(--yellow); padding-left: 1rem; }
.bz-guess { margin-top: 2.6rem; display: grid; gap: 1rem; max-width: 640px; }
.bz-q { font: 700 clamp(1.25rem, 2.4vw, 1.6rem)/1.25 var(--sans); letter-spacing: -0.015em; }
.bz-guess[hidden], .bz-out[hidden] { display: none; }
.bz-grow { display: grid; grid-template-columns: minmax(0, 1fr) 7ch; gap: 18px; align-items: center; }
.bz input[type="range"] { width: 100%; accent-color: var(--accent); margin: 0; }
.bz-grow output { font: 700 1.6rem var(--mono); text-align: right; white-space: nowrap; }
.bz-go { justify-self: start; font: 500 14px var(--mono); border: 0; border-radius: 0; background: var(--text); color: var(--bg); padding: 12px 17px; cursor: pointer; margin-top: 0.4rem; }
.bz-go:hover { background: var(--accent); color: #fff; }

.bz-out { margin-top: 2.6rem; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.bz-pic { min-width: 0; }
.bz-pic canvas { display: block; max-width: 100%; }
.bz-legend { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; font: 400 13px/1.35 var(--mono); }
.bz-legend li { display: flex; gap: 8px; align-items: baseline; }
.bz-legend i { flex: none; width: 11px; height: 11px; background: var(--border); transform: translateY(1px); }
.bz-legend .tp i { background: var(--accent); }
.bz-legend .fp i { background: var(--yellow); }
.bz-legend .fn i { background: var(--accent); opacity: 0.35; }
.bz-legend b { font-weight: 700; }
.bz-side { display: grid; gap: 2rem; min-width: 0; }
.bz-result { display: grid; gap: 4px; border-top: 1px solid var(--text); padding-top: 14px; }
.bz-result span { font: 400 13px var(--mono); color: var(--muted); }
.bz-result b { font: 700 clamp(3rem, 7vw, 5.2rem)/1 var(--sans); letter-spacing: -0.04em; color: var(--accent); }
.bz-result small { font: 400 13px/1.5 var(--mono); color: var(--text); }
.bz-tree { display: grid; gap: 14px; font: 400 13px/1.3 var(--mono); }
.bz-tree b { font-weight: 700; font-size: 15px; }
.bz-t0, .bz-t1 > div, .bz-t2 > div { border: 1px solid var(--text); padding: 7px 8px; text-align: center; background: var(--bg); position: relative; }
.bz-t0 { justify-self: center; min-width: 50%; }
.bz-t1, .bz-t2 { display: grid; gap: 8px; }
.bz-t1 { grid-template-columns: 1fr 1fr; }
.bz-t2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bz-t1 > div::before, .bz-t2 > div::before { content: ""; position: absolute; left: 50%; top: -15px; height: 14px; border-left: 1px solid var(--text); }
.bz-t2 .tp { background: var(--accent); color: #fff; border-color: var(--accent); }
.bz-t2 .fp { background: var(--yellow); color: #141414; border-color: var(--yellow); }
.bz-t2 > div { padding-inline: 4px; overflow-wrap: anywhere; }
.bz-sum { font: 400 1rem/1.5 var(--sans); margin: 4px 0 0; }
.bz-sum b { font-size: inherit; }
.bz-sliders { display: grid; gap: 1.2rem; }
.bz-sl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; }
.bz-sl span { grid-column: 1 / -1; font: 400 14px/1.4 var(--sans); }
.bz-sl output { font: 500 13px var(--mono); min-width: 12ch; text-align: right; white-space: nowrap; }
.bz-note { font-size: 0.95rem; line-height: 1.6; border-left: 3px solid var(--accent); padding-left: 1rem; margin: 0; }
.bz-note:empty { display: none; }
@media (max-width: 860px) {
  .bz-out { grid-template-columns: 1fr; }
  .bz-legend { grid-template-columns: 1fr; }
  .bz-t2 { font-size: 12px; }
}

/* sticky notes: one colour per section, set by site.js as --note on the group (explanation yellow, sources blue) */
.bz-sum { color: var(--text); }

/* the consulting room: low poly 3D on a light card, the speech bubbles pop in on top */
.bz-scene { position: relative; aspect-ratio: 12 / 5; background: #f1ebdf; box-shadow: 0 14px 26px -16px rgba(0, 0, 0, 0.45); margin: 0 0 2.4rem; overflow: hidden; }
.bz-scene canvas { display: block; width: 100%; height: 100%; }
.bz-scene .bz-bubbles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
@media (max-width: 560px) { .bz-scene { aspect-ratio: 4 / 3; } }
.bz-b { opacity: 0; transform: scale(0.82); transition: opacity 0.2s, transform 0.4s cubic-bezier(0.3, 1.5, 0.5, 1); }
.bz-b.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .bz-scene * { transition: none !important; animation: none !important; } }

/* in the blue night the section heads get the yellow quarter disc, like the lab on the start page */
html .lab-hero .section-tag::before { background: #f2d03a; }

/* ================= exp_15 · k-Anonymität (generalise, suppress, attack) ================= */
.ka-story { margin-top: 1.6rem; }
.ka-controls { margin-top: 2.4rem; display: grid; gap: 1.1rem; }
.ka-qi { display: grid; gap: 1.1rem; }
.ka-qrow { display: grid; grid-template-columns: 11ch minmax(0, 1fr); gap: 8px 14px; align-items: center; }
.ka-qname { font: 500 13px var(--mono); color: var(--muted); }
.ka-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ka-chips button {
  font: 500 13px/1 var(--mono); padding: 9px 11px; border: 1px solid var(--border); border-radius: 0; background: var(--bg); color: var(--text); cursor: pointer;
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 7ch; transition: border-color 0.2s, background-color 0.2s;
}
.ka-chips button small { font-size: 10.5px; color: var(--muted); }
.ka-chips button:hover { border-color: var(--text); }
.ka-chips button[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.ka-chips button[aria-pressed="true"] small { color: inherit; opacity: 0.7; }
.ka-btns { margin-top: 0.4rem; }
.ka-btns #ka-sug { background: var(--text); color: var(--bg); border-color: var(--text); }
.ka-btns #ka-sug:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.ka-out { margin-top: 2.6rem; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(24px, 3vw, 44px); align-items: start; }
.ka-side { display: grid; gap: 1.8rem; min-width: 0; }
.ka-result b { color: var(--yellow); transition: color 0.3s; }
.ka-result.ok b { color: var(--accent); }
.ka-result b.pop { animation: ka-pop 0.45s cubic-bezier(0.5, 1.6, 0.4, 1); }
@keyframes ka-pop { from { transform: scale(0.7); } }
.ka-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; margin: 0; }
.ka-stats div { border-top: 1px solid var(--border); padding-top: 8px; min-width: 0; }
.ka-stats dt { font: 400 12px/1.35 var(--mono); color: var(--muted); }
.ka-stats dd { margin: 4px 0 0; font: 700 1.5rem/1.1 var(--sans); letter-spacing: -0.02em; }
.ka-stats .warn dd { color: #ff8a7a; }
.ka-attack h4 { font: 700 1.15rem/1.3 var(--sans); margin: 0 0 4px; }
.ka-attack > p:not(.ka-att-out) { margin: 0 0 12px; font-size: 0.95rem; color: var(--muted); }
.ka-att { display: grid; gap: 8px; }
.ka-att button {
  text-align: left; font: 400 14px/1.45 var(--sans); padding: 10px 12px; border: 1px solid var(--border); border-radius: 0; background: var(--bg); color: var(--text); cursor: pointer;
  display: grid; gap: 2px; transition: border-color 0.2s, background-color 0.2s;
}
.ka-att button b { font: 500 13px var(--mono); }
.ka-att button:hover { border-color: var(--text); }
.ka-att button[aria-pressed="true"] { border-color: var(--yellow); box-shadow: inset 3px 0 0 var(--yellow); }
.ka-att-out { margin: 12px 0 0; font-size: 0.95rem; line-height: 1.6; border-left: 3px solid var(--accent); padding-left: 1rem; }
.ka-att-out.bad { border-color: #ff8a7a; }
.ka-att-out b { display: block; }
.ka-att-out:empty { display: none; }

.ka-tablewrap { min-width: 0; }
.ka-count { font: 400 13px var(--mono); color: var(--muted); margin: 0 0 10px; }
.ka-scroll { overflow-x: auto; }
.ka-table { width: 100%; border-collapse: collapse; font: 400 13px/1.2 var(--mono); font-variant-numeric: tabular-nums; }
.ka-table th { text-align: left; font-weight: 500; color: var(--muted); padding: 6px 6px; border-bottom: 1px solid var(--text); white-space: nowrap; }
.ka-table td { padding: 4px 6px; white-space: nowrap; transition: background-color 0.25s; }
.ka-table .ka-id { color: var(--muted); width: 3ch; box-shadow: inset 3px 0 0 var(--accent); }
.ka-table .ka-dx { font-family: var(--sans); font-size: 13.5px; white-space: normal; line-height: 1.25; }
.ka-table tr.ka-g1 td { background: rgba(255, 255, 255, 0.045); }
.ka-table tr.first td { border-top: 1px solid rgba(255, 255, 255, 0.14); }
.ka-table tr.small .ka-id { box-shadow: inset 3px 0 0 var(--yellow); }
.ka-table tr.small td.ka-n span { background: var(--yellow); color: #141414; }
.ka-table tr.same .ka-dx { color: #ff8a7a; }
.ka-table tr.gone td { color: var(--muted); text-decoration: line-through; opacity: 0.55; }
.ka-table tr.gone .ka-id { box-shadow: none; }
.ka-table tr.hit td { background: var(--yellow); color: #141414; }
.ka-table tr.hit .ka-dx { color: #141414; }
.ka-table td.ka-n { vertical-align: top; padding-top: 5px; text-align: center; width: 5ch; background: transparent !important; color: var(--text) !important; text-decoration: none; }
.ka-table td.ka-n span { display: inline-block; padding: 2px 5px; background: var(--accent); color: #fff; font-weight: 700; }
.ka-table tr.gone td.ka-n span { background: transparent; color: var(--muted); }
.ka-legend li.big i { background: var(--accent); }
.ka-legend li.small i { background: var(--yellow); }
.ka-legend li.same i { background: #ff8a7a; }
.ka-legend li.hit i { background: var(--yellow); outline: 2px solid var(--text); outline-offset: -2px; }
@media (max-width: 900px) {
  .ka-out { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ka-qrow { grid-template-columns: 1fr; }
  .ka-table { font-size: 12px; }
  .ka-table td, .ka-table th { padding-inline: 4px; }
  .ka-table .ka-dx { font-size: 12.5px; hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word; }
}
@media (prefers-reduced-motion: reduce) { .ka * { transition: none !important; animation: none !important; } }

/* k-Anonymität, part 2: the crowd on plinths, the tour, a sortable table */
.ka-scene { margin: 2rem 0 0; aspect-ratio: 16 / 8; cursor: default; touch-action: pan-y; }
@media (max-width: 560px) { .ka-scene { aspect-ratio: 1 / 1; } }
.ka-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ka-lab { position: absolute; left: 0; top: 0; font: 500 11px/1 var(--mono); color: #141414; background: rgba(255, 255, 255, 0.86); padding: 3px 5px; white-space: nowrap; border-left: 3px solid #2f7bd2; }
.ka-lab.small { border-left-color: #f2c72e; }
.ka-lab.gone { opacity: 0.55; border-left-color: #b9b4a8; text-decoration: line-through; }
.ka-lab.hit { background: #f2c72e; }
.ka-lab[hidden] { display: none; }
.ka-tip { position: absolute; left: 0; top: 0; pointer-events: none; background: #fff; color: #141414; border: 2px solid #141414; padding: 7px 10px; display: grid; gap: 2px; font: 400 13px/1.35 var(--sans); z-index: 2; }
.ka-tip b { font: 500 12px var(--mono); }
.ka-tip span { font-family: var(--mono); font-size: 12px; }
.ka-tip[hidden] { display: none; }
.ka-start, .ka-tour { background: #fff; color: #141414; border: 2px solid #141414; box-shadow: 6px 6px 0 #141414; padding: 14px 16px; display: grid; gap: 10px; }
.ka-start { position: absolute; z-index: 3; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: min(430px, calc(100% - 32px)); text-align: center; justify-items: center; }
.ka-tour { margin-top: 14px; box-shadow: 6px 6px 0 var(--yellow); border-color: #fff; }
.ka-start p, .ka-tour p { color: #141414; }
.ka-start p { margin: 0; font: 600 1.05rem/1.4 var(--sans); }
.ka-start-btns { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: center; }
.ka-start .bz-go { margin: 0; background: #141414; color: #fff; }
.ka-start .bz-go:hover { background: #2f7bd2; }
.ka-link { font: 500 13px var(--mono); background: none; border: 0; color: #141414; text-decoration: underline; text-decoration-color: #2f7bd2; text-underline-offset: 4px; cursor: pointer; padding: 6px 2px; }
.ka-start[hidden], .ka-tour[hidden] { display: none; }
.ka-tour-top { display: flex; justify-content: space-between; align-items: center; font: 500 12px var(--mono); color: #62625d; }
.ka-tour-x { background: none; border: 0; font: 500 14px var(--mono); color: #141414; cursor: pointer; padding: 2px 4px; }
.ka-tour p { margin: 0; font: 500 1.05rem/1.5 var(--sans); min-height: 3em; }
.ka-tour-bar { height: 3px; background: rgba(20, 20, 20, 0.12); }
.ka-tour-bar i { display: block; height: 100%; width: 0; background: #2f7bd2; }
@keyframes ka-bar { from { width: 0; } to { width: 100%; } }
.ka-tour-btns { display: flex; justify-content: space-between; gap: 8px; }
.ka-tour-btns button { font: 500 13px/1 var(--mono); padding: 9px 12px; border: 1px solid #141414; border-radius: 0; background: #fff; color: #141414; cursor: pointer; }
.ka-tour-btns button:disabled { opacity: 0.35; cursor: default; }
#ka-tour-next { background: #141414; color: #fff; }
#ka-tour-next:hover { background: #2f7bd2; border-color: #2f7bd2; }
@media (max-width: 560px) { .ka-tour { padding: 10px 12px; gap: 8px; } .ka-tour p { font-size: 0.93rem; } }
.ka-key { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font: 400 12px/1.3 var(--mono); color: var(--muted); }
.ka-key li { display: flex; align-items: center; gap: 6px; }
.ka-key i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ka-key .ka-key-sep { margin-left: 8px; }
.ka-key i.pl { width: 16px; height: 7px; border-radius: 50%; }
.ka-key i.ok { background: #2f7bd2; } .ka-key i.small { background: #f2c72e; } .ka-key i.gone { background: #b9b4a8; }
.ka-key i.same { background: transparent; box-shadow: 0 0 0 2px #d9534a; }
.ka-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: 0; }
.ka-table th button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap; }
.ka-table th button:hover, .ka-table th button.on { color: var(--text); }
.ka-table th button span { color: var(--yellow); }
.ka-table tr.flat td.ka-n { vertical-align: middle; padding-top: 4px; }
.ka-table tr.flat td { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.ka-table tr.hov td { background: rgba(91, 156, 240, 0.28); }
.ka-btns #ka-help { border-style: dashed; }
.ka-kbadge { position: absolute; left: 12px; top: 12px; margin: 0; z-index: 2; pointer-events: none; font: 500 15px/1 var(--mono); color: #141414; background: #f2c72e; padding: 7px 10px; }
.ka-kbadge.ok { background: #2f7bd2; color: #fff; }
.ka-kbadge b { font: 700 20px/1 var(--sans); }
.ka-kbadge small { font-size: 11px; opacity: 0.75; margin-left: 4px; }
.ka-kbadge:empty { display: none; }
.ka-dxw { display: inline-flex; align-items: baseline; }
.ka-dxw .ka-dot { flex: none; transform: translateY(-1px); }

/* k-Anonymität, part 3: missions */
.ka-missions { margin-top: 2.4rem; display: grid; gap: 10px; }
.ka-missions > .ka-qname { margin: 0; }
.ka-mbar { display: flex; flex-wrap: wrap; gap: 6px; }
.ka-mbar button {
  font: 500 13px/1.1 var(--mono); padding: 8px 11px; border: 1px solid var(--border); border-radius: 0; background: var(--bg); color: var(--text); cursor: pointer;
  display: inline-grid; grid-template-columns: auto auto; gap: 3px 7px; align-items: baseline; text-align: left; transition: border-color 0.2s, background-color 0.2s;
}
.ka-mbar button b { font: 700 15px var(--sans); }
.ka-mbar button small { grid-column: 1 / -1; font-size: 11px; letter-spacing: 1px; color: var(--yellow); }
.ka-mbar button[data-m="free"] { align-items: center; }
.ka-mbar button:hover { border-color: var(--text); }
.ka-mbar button[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.ka-mbar button[aria-pressed="true"] small { color: #b8860b; }
.ka-mcard { border: 1px solid var(--text); padding: 16px 18px; display: grid; gap: 10px; max-width: 640px; box-shadow: 6px 6px 0 var(--accent); }
.ka-mcard.done { box-shadow: 6px 6px 0 var(--yellow); }
.ka-mcard[hidden] { display: none; }
.ka-mcard p { margin: 0; }
.ka-mtitle { font: 700 1.3rem/1.2 var(--sans); }
.ka-mtitle span { font: 500 12px var(--mono); color: var(--muted); display: block; margin-bottom: 4px; }
.ka-mdesc { font-size: 1rem; line-height: 1.55; }
.ka-goals { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font: 400 13.5px/1.35 var(--mono); }
.ka-goals li { display: flex; gap: 8px; color: var(--muted); }
.ka-goals li i { font-style: normal; width: 1.2em; flex: none; }
.ka-goals li.ok { color: var(--text); }
.ka-goals li.ok i { color: #7fd08a; }
.ka-muse { font: 400 13px var(--mono); color: var(--muted); }
.ka-muse b { font: 700 1.25rem var(--sans); color: var(--text); margin: 0 4px; }
.ka-mdone { border-top: 1px solid var(--border); padding-top: 12px; display: grid; gap: 8px; }
.ka-mdone b { font: 700 1.2rem var(--sans); }
.ka-stars { color: var(--yellow); font-size: 1.3rem; letter-spacing: 3px; margin-left: 6px; }
.ka-mdone .bz-go { margin: 4px 0 0; justify-self: start; }
.ka-stats dd small { font: 400 11px var(--mono); color: var(--muted); margin-left: 4px; letter-spacing: 0; }
.ka-chips button:disabled, .ka-btns button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ================= exp_16 · EKG-Monitor: a bedside patient monitor with a thermal printer ================= */
/* the step keys sit on the case under the second screen */
.ek-stepnote { margin: 0.9rem 0 0; font-size: 0.95rem; line-height: 1.55; max-width: 72ch; border-left: 3px solid #5dff9a; padding-left: 1rem; }
.ek-note { margin-top: 0.6rem !important; max-width: 72ch !important; }
.ek-info { margin-top: 2rem; border: 1px solid var(--text); padding: 18px 20px; max-width: 760px; box-shadow: 6px 6px 0 var(--accent); display: grid; gap: 12px; }
.ek-info[hidden] { display: none; }
.ek-info-name { margin: 0; font: 700 1.35rem/1.2 var(--sans); }
.ek-info dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.ek-info dt { font: 500 12px var(--mono); color: var(--muted); margin-bottom: 4px; }
.ek-info dd { margin: 0; font-size: 0.98rem; line-height: 1.55; }
.ek-quiz { margin-top: 2rem; border: 1px solid var(--text); padding: 18px 20px; max-width: 760px; box-shadow: 6px 6px 0 var(--yellow); display: grid; gap: 12px; }
.ek-quiz[hidden] { display: none; }
.ek-q { margin: 0; font: 700 1.3rem/1.25 var(--sans); }
.ek-q small { font: 400 12px var(--mono); color: var(--muted); margin-left: 8px; }
.ek-answers { display: flex; flex-wrap: wrap; gap: 6px; }
.ek-answers button { font: 500 13px/1 var(--mono); padding: 10px 12px; border: 1px solid var(--border); border-radius: 0; background: var(--bg); color: var(--text); cursor: pointer; }
.ek-answers button:hover:not(:disabled) { border-color: var(--text); }
.ek-answers button.right { background: #3f9d56; border-color: #3f9d56; color: #fff; }
.ek-answers button.wrong { background: #c8453a; border-color: #c8453a; color: #fff; }
.ek-answers button:disabled:not(.right):not(.wrong) { opacity: 0.45; }
.ek-hint { margin: 0; font-size: 0.92rem; color: var(--muted); }
.ek-verdict { display: grid; gap: 10px; border-top: 1px solid var(--border); padding-top: 12px; }
.ek-verdict p { margin: 0; line-height: 1.55; }
.ek-verdict .bz-go { margin: 0; justify-self: start; }
@media (max-width: 860px) {
  .ek-info dl { grid-template-columns: 1fr; }
}

/* the monitor: light plastic case, an alarm bar on top, a black touch screen, a speaker grille, a printer slot */
.mon { position: relative; margin-top: 1.8rem; max-width: 1080px; }
.mon-alarm { height: 10px; margin: 0 18% -4px; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, #7b8490, #5d6570); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35); position: relative; z-index: 1; }
.mon-alarm[data-level="amber"] { background: #ffb21e; box-shadow: 0 0 22px 4px rgba(255,178,30,0.65); animation: mon-blink 1.6s ease-in-out infinite; }
.mon-alarm[data-level="red"] { background: #ff3b30; box-shadow: 0 0 26px 6px rgba(255,59,48,0.7); animation: mon-blink 0.55s steps(2) infinite; }
@keyframes mon-blink { 50% { opacity: 0.35; } }
.mon-case {
  display: grid; grid-template-columns: minmax(0, 1fr) 58px; gap: 14px; padding: 16px 14px 22px 16px; border-radius: 22px;
  background: linear-gradient(180deg, #f6f7f8 0%, #e6e9ec 55%, #d6dade 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.9), inset 0 -3px 0 rgba(0,0,0,0.08), 0 22px 40px -18px rgba(0,0,0,0.6), 0 2px 0 #b9bec4;
}
.mon-screen {
  position: relative; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; border-radius: 10px; background: #040506; color: #e8ebee;
  box-shadow: 0 0 0 9px #1c1f23, 0 0 0 10px #0b0c0e, inset 0 0 0 1px #15181c; margin: 9px; font-family: var(--mono);
}
.mon-status { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 5px 10px; background: #12161b; border-bottom: 1px solid #22272e; font-size: 11.5px; color: #aab2bb; }
.mon-msg { flex: 1; text-align: center; font-weight: 700; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 3px; min-height: 1.3em; }
.mon-msg[data-level="amber"] { background: #ffb21e; color: #141414; }
.mon-msg[data-level="red"] { background: #ff3b30; color: #fff; }
.mon-clock { font-variant-numeric: tabular-nums; }
.mon-body { display: grid; grid-template-columns: minmax(0, 1fr) 190px; min-height: 0; }
.mon-waves { display: grid; grid-template-rows: auto auto; min-width: 0; }
.mon-ch { position: relative; }
.mon-ch canvas { display: block; width: 100%; height: 100%; }
.mon-ch--ecg { height: clamp(190px, 32vh, 290px); }
.mon-ch--pt { height: 104px; border-top: 1px solid #1d2227; }
.mon-lbl { position: absolute; left: 24px; top: 4px; font-size: 11px; letter-spacing: 0.05em; pointer-events: none; }
.mon-ch--ecg .mon-lbl { color: #35f27a; left: 26px; top: 14px; }
.mon-ch--pt .mon-lbl { color: #ffd84a; left: 8px; }
.mon-lbl em { font-style: normal; opacity: 0.7; margin-left: 8px; }
.mon-tiles { display: grid; grid-template-rows: 1.4fr 1fr 0.8fr; border-left: 1px solid #1d2227; }
.mon-tile { padding: 8px 12px; border-bottom: 1px solid #1d2227; display: grid; align-content: start; gap: 2px; min-width: 0; }
.mon-tile > span { font-size: 11px; letter-spacing: 0.06em; opacity: 0.85; }
.mon-tile b { font: 700 clamp(2.4rem, 5vw, 3.9rem)/1 var(--sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.mon-tile small { font-size: 11px; opacity: 0.7; }
.mon-tile--hr { color: #35f27a; }
.mon-tile--hr i { font-style: normal; opacity: 0.35; transition: opacity 0.1s; }
.mon-tile--hr i.on { opacity: 1; color: #ff5a4f; }
.mon-tile--qa { color: #35e0ff; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 10px; }
.mon-tile--qa b { font-size: 1.45rem; text-align: right; }
.mon-tile--qa b.bad { color: #ffb21e; }
.mon-tile--qa small { grid-column: 1 / -1; }
.mon-tile--rh b { font: 600 1rem/1.25 var(--sans); letter-spacing: 0; color: #fff; }
.mon-keys { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; padding: 7px; background: #0d1014; border-top: 1px solid #22272e; }
.mon-keys button, .mon-opts button {
  font: 500 11.5px/1.15 var(--mono); letter-spacing: 0.04em; color: #e8ebee; background: linear-gradient(180deg, #232931, #1a1f25); border: 1px solid #333b45;
  border-radius: 6px; padding: 9px 6px; cursor: pointer; transition: background-color 0.15s, border-color 0.15s;
}
.mon-keys button:hover, .mon-opts button:hover:not(:disabled) { border-color: #6b7684; }
.mon-keys button[aria-pressed="true"], .mon-opts button[aria-pressed="true"] { background: #2f7bd2; border-color: #5b9cf0; }
#ek-print { border-color: #7a6a3a; }
.mon-menu { position: absolute; left: 10px; bottom: 54px; z-index: 3; width: min(440px, calc(100% - 20px)); background: rgba(18, 22, 28, 0.97); border: 1px solid #3a424d; border-radius: 8px; padding: 12px 14px 14px; box-shadow: 0 14px 30px rgba(0,0,0,0.6); display: grid; gap: 10px; }
.mon-menu[hidden] { display: none; }
.mon-menu-h { margin: 0; font-size: 12px; letter-spacing: 0.06em; color: #9fb1c4; text-transform: uppercase; }
.mon-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.mon-opts button { text-align: left; padding: 9px 10px; }
.mon-opts button:disabled { opacity: 0.4; cursor: not-allowed; }
.mon-slider { display: grid; grid-template-columns: 1fr 1.2fr 4ch; gap: 10px; align-items: center; font-size: 12px; color: #e8ebee; }
.mon-slider input { width: 100%; accent-color: #35f27a; }
.mon-slider output { text-align: right; color: #9fb1c4; }
.mon-toggle { display: flex; align-items: center; gap: 10px; font-size: 12.5px; cursor: pointer; }
.mon-toggle input { position: absolute; opacity: 0; }
.mon-toggle i { width: 34px; height: 18px; border-radius: 9px; background: #39414b; position: relative; flex: none; transition: background-color 0.2s; }
.mon-toggle i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #e8ebee; transition: transform 0.2s; }
.mon-toggle input:checked + i { background: #35b86a; }
.mon-toggle input:checked + i::after { transform: translateX(16px); }
.mon-toggle input:focus-visible + i { outline: 2px solid #5b9cf0; outline-offset: 2px; }
.mon-side { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 16px 0 8px; }
.mon-brand { writing-mode: vertical-rl; font: 700 11px var(--mono); letter-spacing: 0.3em; color: #6d747c; }
.mon-model { font: 700 10px var(--mono); letter-spacing: 0.08em; color: #2f7bd2; text-align: center; }
.mon-led { width: 9px; height: 9px; border-radius: 50%; background: #35f27a; box-shadow: 0 0 8px #35f27a; }
.mon-grille { margin-top: auto; width: 34px; height: 64px; border-radius: 6px; background: radial-gradient(circle, #9aa1a8 1.3px, transparent 1.6px) 0 0 / 7px 7px; opacity: 0.8; }
/* the printer: a slot under the screen, the strip slides out below the case */
.mon-printer { position: relative; margin: -14px 7% 0; }
.mon-slot { display: block; height: 8px; border-radius: 0 0 6px 6px; background: linear-gradient(180deg, #1a1c1f, #3b3f44); }
.mon-paper { margin: 0 2%; background: #fbf8f0; box-shadow: 0 16px 24px -14px rgba(0,0,0,0.6); transform-origin: top; }
.mon-paper[hidden] { display: none; }
.mon-paper.out { animation: mon-print 1.8s steps(18) both; }
@keyframes mon-print { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.mon-paper canvas { display: block; width: 100%; height: auto; }
.mon-paper-btns { display: flex; justify-content: flex-end; gap: 16px; padding: 6px 10px 8px; font: 500 12px var(--mono); }
.mon-paper-btns a, .mon-paper-btns button { color: #26241f; background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #d65252; font: inherit; padding: 0; }
@media (prefers-reduced-motion: reduce) { .mon-alarm { animation: none !important; } .mon-paper.out { animation: none; } }
@media (max-width: 760px) {
  .mon-case { grid-template-columns: 1fr; padding: 10px 8px 16px; border-radius: 16px; }
  .mon-side { display: none; }
  .mon-screen { margin: 7px; }
  .mon-body { grid-template-columns: 1fr; }
  .mon-tiles { grid-template-rows: none; grid-template-columns: 1fr 1.2fr 1fr; border-left: 0; border-top: 1px solid #1d2227; order: -1; }
  .mon-tile { border-bottom: 0; border-right: 1px solid #1d2227; padding: 6px 8px; }
  .mon-tile b { font-size: 2rem; }
  .mon-tile--qa b { font-size: 1rem; }
  .mon-tile--rh b { font-size: 0.8rem; }
  .mon-ch--ecg { height: clamp(170px, 30vh, 230px); }
  .mon-ch--pt { height: 84px; }
  .mon-keys { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mon-menu { bottom: 96px; }
  .mon-status > span:first-child { display: none; }
  .mon-opts { grid-template-columns: 1fr; }
  .mon-slider { grid-template-columns: 1fr 1fr 4ch; }
}

/* ================= exp_07 · Stadt-Bahn-Pilz as a model railway board (metro-3d.js) ================= */
/* The table is wood, the board is a low-poly diorama rendered over the (hidden) flat plan; the panel is the layout's
   control desk. Without WebGL the plan stays visible. The old oscilloscope version lives in archiv/metro-oszi/. */
.bs-bed { fill: none; stroke: none; }
.mb.osc {
  background:
    repeating-linear-gradient(92deg, rgba(90, 55, 25, 0.10) 0 3px, transparent 3px 11px),
    repeating-linear-gradient(88deg, rgba(255, 235, 200, 0.07) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #c48c5c, #a8703f);
  box-shadow: inset 0 2px 0 rgba(255, 230, 190, 0.45), inset 0 -3px 0 rgba(60, 30, 10, 0.35), 0 26px 44px -20px rgba(0, 0, 0, 0.7);
  border-radius: 8px;
}
.mb .osc-screw { background: radial-gradient(circle at 35% 30%, #f1e2c8, #a88760 60%, #6b5234); }
.mb .osc-top { color: #fff4e2; }
.mb .osc-brand { background: #1c1e1c; color: #f2efe4; padding: 3px 10px; border-radius: 2px; letter-spacing: 0.12em; }
.mb .osc-brand b { background: #c8453a; color: #fff; }
.mb .osc-model { color: #fff1dc; opacity: 0.9; }
.mb .osc-led { background: #3ddc6a; box-shadow: 0 0 6px #3ddc6a; }
.mb .osc-bezel { background: #6e4a2c; box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 230, 190, 0.35); border-radius: 4px; display: flex; flex-direction: column; }
.mb .osc-silk { color: #fff1dc; }
/* the board: a soft studio backdrop behind the diorama, dark at night */
.mb .bs-screen { flex: 1; display: flex; align-items: center; border-radius: 3px; background: radial-gradient(ellipse at 50% 40%, #f4efe4, #d9d1c0 75%, #c9bfab); box-shadow: inset 0 0 0 2px rgba(40, 25, 10, 0.5); }
.mb .bs-screen::before { background: radial-gradient(ellipse at 50% 45%, rgba(40, 60, 110, 0.4), transparent 70%), linear-gradient(180deg, #0b1122, #060913); }
.bs-screen.is-3d .bs-map { visibility: hidden; }
.mb-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.mb-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.mb-lab { position: absolute; left: 0; top: 0; font: 600 12px/1 var(--mono); color: #1c1e1c; background: #fbf8f0; padding: 4px 7px 3px; border-radius: 2px; white-space: nowrap; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.15); }
.mb-lab::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 1px; height: 5px; background: #1c1e1c; }
.mb-lab.hover { background: #f2c72e; }
.mb-lab[hidden] { display: none; }
.bs-screen.is-3d .bs-hint, .bs-screen.is-3d .bs-full-btn, .bs-screen.is-3d .bs-night-hint, .bs-screen.is-3d .bs-rotate { z-index: 2; }
/* the control desk: dark plastic like a model railway controller */
.mb .osc-panel { background: linear-gradient(180deg, #23313f, #1a2530); border-radius: 6px; padding: 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 3px 8px rgba(0, 0, 0, 0.4); }
.mb .osc-cap, .mb .knob-label, .mb .bs-toggle { color: #d7e0ea; }
.mb .osc-lcd { background: #0d141b; color: #9fb1c4; border-radius: 4px; }
.mb .osc-lcd b { color: #ffd66b; font-family: var(--mono); text-shadow: 0 0 6px rgba(255, 214, 107, 0.5); }
.mb .osc-keys button { background: linear-gradient(180deg, #f1efe8, #d3d0c6); color: #1c1e1c; border-radius: 4px; box-shadow: 0 2px 0 #0d141b, 0 3px 5px rgba(0, 0, 0, 0.4); }
.mb .osc-keys button.on::before { background: #3ddc6a; box-shadow: 0 0 6px #3ddc6a; }
.mb .knob-dial { background: radial-gradient(circle at 38% 32%, #e0574a, #b3362c 60%, #7b2019); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.3); }
.mb .osc-red { background: linear-gradient(180deg, #2f7bd2, #1f5da6); box-shadow: 0 3px 0 #133c6d, 0 4px 8px rgba(0, 0, 0, 0.35); }
.mb .bs-seed-input { background: #f1efe8; color: #1c1e1c; }
.mb-tip { position: absolute; left: 10px; bottom: 8px; margin: 0; z-index: 2; pointer-events: none; font: 500 10.5px/1.3 var(--mono); color: #3b3226; background: rgba(251, 248, 240, 0.85); padding: 3px 7px; border-radius: 2px; }
.bs-screen.is-night .mb-tip { color: #c9d3ea; background: rgba(11, 17, 34, 0.7); }
@media (max-width: 760px) { .mb .bs-screen.is-3d { min-height: min(125vw, 560px); } }
.bs-screen.is-night .mb-tip { display: none; }

/* the sound chip on lab pages (site.js adds it where assets/sound.js is loaded) */
.lab-sound { display: inline-block; margin: 0 0 0 14px; font: 500 12px/1 var(--mono); color: var(--text); background: transparent; border: 1px solid var(--border); border-radius: 0; padding: 6px 9px; cursor: pointer; vertical-align: middle; }
.lab-sound:hover { border-color: var(--text); }
.lab-sound.asking { background: var(--yellow); color: #141414; border-color: var(--yellow); }
.mb-zoomhint { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); margin: 0; z-index: 2; pointer-events: none; font: 600 13px/1 var(--mono); color: #141414; background: #f2c72e; padding: 8px 12px; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); animation: mb-nudge 2.4s ease-in-out infinite; white-space: nowrap; }
.mb-zoomhint[hidden], .bs-screen.is-night .mb-zoomhint { display: none; }
@keyframes mb-nudge { 50% { transform: translateX(-50%) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .mb-zoomhint { animation: none; } }

/* ── Lab: sequence alignment, a lab notebook on squared paper ── */
.al-note { font-size: 0.92rem; color: var(--muted); margin: -0.25rem 0 1.25rem; max-width: 70ch; }
.al-desk { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: 1.5rem; align-items: start; margin-bottom: 1rem; }
.al-controls { gap: 0.9rem; }
.al-controls label:not(.vf-slider):not(.al-check) { display: flex; flex-direction: column; gap: 0.35rem; font: 0.72rem var(--mono); color: var(--muted); }
.al-controls input[type="text"], .al-controls select { font: 0.95rem var(--mono); letter-spacing: 0.04em; color: var(--text); background: var(--bg); border: 1px solid var(--border); padding: 0.5rem 0.6rem; width: 100%; min-width: 0; }
.al-controls select { font-family: var(--sans); letter-spacing: 0; }
.al-controls input[type="text"]:focus, .al-controls select:focus { outline: none; border-color: var(--accent); }
.al-seg { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--text); }
.al-seg button { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; padding: 0.45rem 0.3rem; font: 600 0.85rem var(--sans); color: var(--text); background: var(--bg); border: 0; cursor: pointer; }
.al-seg button + button { border-left: 1px solid var(--text); }
.al-seg button small { font: 0.62rem var(--mono); color: var(--muted); font-weight: 400; }
.al-seg button.on { background: var(--text); color: var(--bg); }
.al-seg button.on small { color: var(--bg); opacity: 0.75; }
.al-sliders { display: flex; flex-direction: column; gap: 0.9rem; }
.al-sliders[hidden] { display: none; }
.al-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.al-btn { font: 0.78rem var(--mono); color: var(--text); background: var(--bg); border: 1px solid var(--border); padding: 0.5rem 0.8rem; cursor: pointer; }
.al-btn:hover { border-color: var(--accent); }
.al-btn--main { background: #f2c72e; border-color: #f2c72e; color: #141414; font-weight: 600; }
.al-check { display: flex; gap: 0.5rem; align-items: flex-start; font: 0.75rem var(--mono); color: var(--muted); cursor: pointer; }
.al-check input { accent-color: var(--accent); margin-top: 0.1rem; }

/* the notebook: a page with a red margin line, ring holes, slightly turned */
.al-book { position: relative; padding-left: 26px; min-width: 0; }
.al-book::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 26px; background: radial-gradient(circle at 13px 50%, var(--bg) 6px, transparent 7px) 0 0 / 26px 34px repeat-y; }
.al-sheet { position: relative; background: #fbf9f1; color: #2f2f33; padding: 1rem 1.25rem 1.4rem 2.2rem; box-shadow: 0 1px 0 #e6e1d2, 0 3px 0 #efeadb, 0 4px 0 #ddd6c2, 0 18px 40px rgba(0, 0, 0, 0.35); transform: rotate(-0.4deg); min-width: 0; }
.al-sheet::before { content: ""; position: absolute; left: 1.4rem; top: 0; bottom: 0; width: 1px; background: rgba(214, 70, 60, 0.55); }
.al-pagehead { font: 26px/1.1 "Reenie Beanie", cursive; margin: 0 0 0.6rem; color: #3a3a40; }
.al-scroll { overflow-x: auto; max-width: 100%; padding-bottom: 4px; }
.al-scroll canvas { display: block; cursor: crosshair; touch-action: pan-x pan-y; }
.al-calc { font: 22px/1.15 "Reenie Beanie", cursive; color: #2f2f33; min-height: 2.5rem; margin-top: 0.8rem; }
.al-calc ul { list-style: none; margin: 0.2rem 0; padding: 0; }
.al-calc li { opacity: 0.55; }
.al-calc li.win { opacity: 1; }
.al-calc li.win b { background: linear-gradient(transparent 35%, rgba(255, 221, 0, 0.6) 35%, rgba(255, 221, 0, 0.6) 85%, transparent 85%); }
.al-calc b { display: inline-block; min-width: 1.2em; }
.al-calc small { font-size: 0.75em; color: #77746b; }
.al-calc p, .al-calc-head, .al-calc-max { margin: 0; color: #2f2f33; }
.al-calc li { color: #2f2f33; }
.al-result { margin-top: 0.8rem; border-top: 1px dashed #c9c3b2; padding-top: 0.8rem; }
.al-result pre, .al-result p { color: #2f2f33; }
.al-lines { font: 600 0.82rem/1.35 "Red Hat Mono", monospace; color: #2f2f33; margin: 0 0 0.6rem; overflow-x: auto; white-space: pre; }
.al-stats { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; margin-top: 0.4rem; }
.al-stat { display: flex; flex-direction: column; }
.al-stat span { font: 0.68rem var(--mono); color: #77746b; text-transform: uppercase; letter-spacing: 0.06em; }
.al-stat b { font: 30px/1 "Reenie Beanie", cursive; color: #1f1f24; }
.al-stat small { font: 0.7rem var(--mono); color: #77746b; }
.al-legend { font: 0.7rem var(--mono); color: #77746b; margin: 0.6rem 0 0; }
.al-empty { font: 22px "Reenie Beanie", cursive; margin: 0; }

@media (max-width: 900px) {
  .al-desk { grid-template-columns: 1fr; }
  .al-sheet { transform: none; padding: 0.9rem 0.8rem 1.2rem 1.6rem; }
  .al-sheet::before { left: 1rem; }
  .al-book { padding-left: 18px; }
  .al-book::before { width: 18px; background-size: 18px 30px; background-image: radial-gradient(circle at 9px 50%, var(--bg) 4.5px, transparent 5.5px); }
}

/* ── Lab: from gene to protein ── */
.pr-muts small { margin-left: 0.35rem; }
.pr-muts[hidden] { display: none; }
.pr-top { display: grid; grid-template-columns: minmax(280px, 400px) minmax(0, 1fr); gap: 1.25rem; margin-bottom: 1.25rem; align-items: stretch; }
.pr-suncard { align-items: center; gap: 0.6rem; }
.pr-sun { width: 100%; max-width: 360px; }
.pr-sun svg { display: block; width: 100%; height: auto; }
.pr-s { stroke: #fbf9f1; stroke-width: 0.8; opacity: 0.5; transition: opacity 0.2s; }
.pr-s.on { opacity: 1; }
.pr-s-T { fill: #d9534a; } .pr-s-C { fill: #2f7bd2; } .pr-s-A { fill: #4caf50; } .pr-s-G { fill: #f39c3d; }
.pr-aaring { stroke: #fbf9f1; stroke-width: 0.8; opacity: 0.6; transition: opacity 0.2s; }
.pr-aaring.pr-np { fill: #e7d38f; } .pr-aaring.pr-pol { fill: #9fd3b5; } .pr-aaring.pr-pos { fill: #9cc0ee; } .pr-aaring.pr-neg { fill: #f0a29a; } .pr-aaring.pr-stop { fill: #141414; }
.pr-aaring.on { opacity: 1; stroke: #141414; stroke-width: 1.6; }
.pr-sl { font-family: "Red Hat Mono", monospace; text-anchor: middle; dominant-baseline: central; fill: #141414; pointer-events: none; }
.pr-sl1 { font-size: 15px; font-weight: 700; } .pr-sl2 { font-size: 10px; font-weight: 700; } .pr-sl3 { font-size: 5.5px; }
.pr-sla { font-size: 8.5px; font-weight: 600; }
.pr-sla-stop { fill: #fff; }
.pr-pointer { fill: var(--text); }
.pr-hub { fill: var(--surface); stroke: var(--border); }
.pr-hubtxt { font: 700 16px "Red Hat Mono", monospace; text-anchor: middle; fill: var(--text); }
.pr-sun-info { margin: 0; font-size: 0.9rem; text-align: center; min-height: 2.6em; }

.pr-fold { gap: 0.6rem; min-width: 0; }
.pr-fold-head { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; justify-content: space-between; }
.pr-fold-head h3 { margin: 0; font-size: 1rem; }
.pr-colour { min-width: 220px; }
.pr-colour button { font-size: 0.78rem; padding: 0.35rem 0.6rem; }
.pr-3d { position: relative; flex: 1; min-height: 320px; border: 1px solid var(--border); background: #fff; cursor: grab; touch-action: pan-y; overflow: hidden; }
.pr-3d:active { cursor: grabbing; }
.pr-3d canvas { display: block; }
.pr-3d-tag { position: absolute; left: 0; top: 0; margin: -9px 0 0 -9px; width: 18px; height: 18px; display: grid; place-items: center; font: 700 10px "Red Hat Mono", monospace; color: #fff; background: #141414; border-radius: 50%; pointer-events: none; }
.pr-3d-legend { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; font: 0.7rem var(--mono); color: var(--muted); }
.pr-3d-legend i { display: inline-block; width: 0.7rem; height: 0.7rem; margin-right: 0.3rem; vertical-align: -1px; }
.pr-fold.is-off .pr-3d, .pr-fold.is-off .pr-3d-legend, .pr-fold.is-off .pr-colour { display: none; }
.pr-top.no-fold { grid-template-columns: 1fr; }
.pr-top.no-fold .pr-fold { display: none; }

.pr-band { gap: 0.8rem; }
.pr-bar { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: end; }
.pr-speed { min-width: 160px; flex: 1; max-width: 240px; }
.pr-edit { min-width: 270px; grid-template-columns: repeat(3, auto); }
.pr-edit button { font-size: 0.75rem; padding: 0.4rem 0.5rem; }
.pr-tape { display: flex; flex-wrap: wrap; gap: 4px; max-height: 420px; overflow-y: auto; padding: 4px; background: #fbf9f1; border: 1px solid var(--border); }
.pr-codon { display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 2px 2px 3px; border: 1px solid transparent; position: relative; }
.pr-codon small { font: 0.55rem "Red Hat Mono", monospace; color: #8a867a; text-align: center; line-height: 1; }
.pr-codon.now { border-color: #141414; background: rgba(242, 199, 46, 0.35); }
.pr-codon.after { opacity: 0.35; }
.pr-dna { display: flex; gap: 1px; }
.pr-b { width: 1.15rem; height: 1.3rem; padding: 0; border: 0; font: 700 0.72rem "Red Hat Mono", monospace; color: #fff; cursor: pointer; }
.pr-b-A { background: #4caf50; } .pr-b-C { background: #2f7bd2; } .pr-b-G { background: #f39c3d; } .pr-b-T { background: #d9534a; }
.pr-b:hover { outline: 2px solid #141414; outline-offset: -2px; }
.pr-b.mut { outline: 2px solid #141414; outline-offset: 1px; position: relative; z-index: 1; }
.pr-rna { font: 0.62rem "Red Hat Mono", monospace; color: #6d6a60; text-align: center; height: 0.9rem; letter-spacing: 0.08em; }
.pr-aa { height: 1.7rem; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 999px; color: #141414; line-height: 1; }
.pr-aa b { font: 700 0.75rem "Red Hat Mono", monospace; }
.pr-aa i { font: normal 0.5rem "Red Hat Mono", monospace; opacity: 0.75; }
.pr-np, .pr-k.pr-np { background: #e7d38f; } .pr-pol { background: #9fd3b5; } .pr-pos { background: #9cc0ee; } .pr-neg { background: #f0a29a; }
.pr-stop { background: #141414; color: #fff; }
.pr-none { background: transparent; }
.pr-aa:empty { background: transparent; }
.pr-codon.changed .pr-aa { box-shadow: 0 0 0 2px #d9534a; }
.pr-key { display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; align-items: center; font: 0.7rem var(--mono); color: var(--muted); }
.pr-k { padding: 0.15rem 0.5rem; border-radius: 999px; color: #141414; }
.pr-k.pr-stop { color: #fff; }
.pr-k-rows { margin-left: auto; }
.pr-verdict { margin: 1rem 0 1.5rem; padding: 1rem 1.25rem; border-left: 4px solid var(--accent); background: var(--surface); }
.pr-verdict p { margin: 0 0 0.4rem; }
.pr-verdict p:last-child { margin-bottom: 0; }
.pr-verdict[data-kind="silent"] { border-left-color: #4caf50; }
.pr-verdict[data-kind="missense"] { border-left-color: #f39c3d; }
.pr-verdict[data-kind="stop"], .pr-verdict[data-kind="shift"] { border-left-color: #d9534a; }
.pr-aside { color: var(--muted); font-size: 0.9rem; }

@media (max-width: 900px) {
  .pr-top { grid-template-columns: 1fr; }
  .pr-suncard { order: 0; }
  .pr-3d { min-height: 280px; }
  .pr-k-rows { margin-left: 0; }
}

/* ── the intro film at the top of the science labs (lab/intro.js) ── */
.lab-intro { margin: 0 0 1.75rem; }
.li-film[hidden], .li-open[hidden] { display: none; }
.li-stage { position: relative; background: radial-gradient(130% 120% at 30% 0%, #1b2d5c, #0d1a3d 70%); border: 1px solid var(--border); box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.03); overflow: hidden; }
.li-svg { display: block; width: 100%; height: auto; aspect-ratio: 800 / 340; }
.li-ch { position: absolute; left: 12px; top: 10px; font: 600 0.72rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 0.25rem 0.55rem; background: #f2c72e; color: #141414; }
.li-ch[data-ch="1"] { background: #8fb8ea; } .li-ch[data-ch="2"] { background: #9fd3b5; } .li-ch[data-ch="3"] { background: #f0a29a; }
.li-x { position: absolute; right: 8px; top: 8px; width: 2rem; height: 2rem; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(0, 0, 0, 0.25); color: #f4f1e6; cursor: pointer; }
.li-cap { font-size: 1.08rem; line-height: 1.55; margin: 0.8rem 0 0.6rem; min-height: 3.2em; max-width: 75ch; }
.li-bar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.li-btn { width: 2.3rem; height: 2.1rem; font: 0.85rem var(--mono); color: var(--text); background: var(--surface); border: 1px solid var(--border); cursor: pointer; }
.li-btn:hover, .li-skip:hover, .li-x:hover { border-color: var(--accent); }
.li-btn:disabled { opacity: 0.35; cursor: default; }
.li-play { background: #f2c72e; border-color: #f2c72e; color: #141414; }
.li-dots { display: flex; gap: 4px; flex: 1; min-width: 120px; }
.li-dots button { flex: 1; height: 0.4rem; padding: 0; border: 0; background: rgba(255, 255, 255, 0.18); cursor: pointer; position: relative; overflow: hidden; }
.li-dots button.done i, .li-dots button.on i { position: absolute; inset: 0; background: #f2c72e; }
.li-dots button.on i { transform-origin: left; transform: scaleX(0.04); }
.li-dots.running button.on i { animation: liFill var(--dur) linear both; }
@keyframes liFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.li-skip { font: 0.75rem var(--mono); color: var(--muted); background: none; border: 1px solid var(--border); padding: 0.45rem 0.8rem; cursor: pointer; }
.li-open { display: inline-flex; align-items: center; gap: 0.5rem; font: 0.85rem var(--mono); color: var(--text); background: var(--surface); border: 1px solid var(--border); padding: 0.55rem 0.95rem; cursor: pointer; }
.li-open span { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; background: #f2c72e; color: #141414; font-size: 0.7rem; }
.li-open small { color: var(--muted); }
.li-open:hover { border-color: var(--accent); }

/* the pieces of a scene come in one after the other: --d is the delay, --t the duration */
.ia { animation-duration: var(--t, 0.6s); animation-delay: var(--d, 0s); animation-fill-mode: both; animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
.ia-fade { animation-name: iaFade; }
.ia-up { animation-name: iaUp; }
.ia-pop { animation-name: iaPop; transform-box: fill-box; transform-origin: center; }
.ia-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation-name: iaDraw; animation-timing-function: ease-in-out; }
.ia-spin { animation-name: iaSpin; transform-box: fill-box; transform-origin: center; animation-timing-function: ease-in-out; }
@keyframes iaFade { from { opacity: 0; } }
@keyframes iaUp { from { opacity: 0; transform: translateY(16px); } }
@keyframes iaPop { from { opacity: 0; transform: scale(0.2); } 70% { transform: scale(1.08); } }
@keyframes iaDraw { to { stroke-dashoffset: 0; } }
@keyframes iaSpin { from { transform: rotate(-200deg); } }
.ia.ia-still { animation: none; stroke-dashoffset: 0; }
@media (max-width: 640px) {
  .li-svg { aspect-ratio: 800 / 340; }
  .li-cap { font-size: 1rem; min-height: 4.6em; }
  .li-skip { margin-left: auto; }
  .li-dots { order: 5; flex-basis: 100%; }
}

/* exposure program, like the mode dial: Auto / P / A / S / M */
.cam-prog-wrap { display: flex; flex-direction: column; gap: 0.4rem; }
.cam-prog-label { font: 0.72rem var(--mono); color: var(--muted); }
.cam-prog { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.cam-prog button { font: 600 0.85rem var(--mono); padding: 0.45rem 0; background: var(--bg); color: var(--text); border: 0; border-left: 1px solid var(--border); cursor: pointer; }
.cam-prog button:first-child { border-left: 0; }
.cam-prog button.on { background: var(--text); color: var(--bg); }
.cam-prog-hint { margin: 0; font-size: 0.8rem; line-height: 1.4; color: var(--muted); min-height: 2.8em; }
.cam-controls label.is-auto select { opacity: 0.75; border-style: dashed; cursor: not-allowed; }
.cam-controls label.is-auto > span::after { content: " · auto"; font-size: 0.7rem; color: var(--muted); }