:root {
  --paper: #070d0a;
  --card: #0e1712;
  --sunk: #14211a;
  --ink: #e7f5ec;
  --ink2: #a7c9b9;
  --ink3: #6c8b7a;
  --rule: rgba(231, 245, 236, 0.12);
  --rule2: rgba(231, 245, 236, 0.24);
  --main: #e8752a;
  --mainbg: #2e1608;
  --secondary: #8fe0c4;
  --adv: #8fe0c4;
  --red: #c85a2a;
  --redd: #e8845a;
  --redbg: rgba(200, 90, 42, 0.1);
  --lightaccent: rgba(232, 117, 42, 0.14);
  --stripe: rgba(232, 117, 42, 0.045);
  --gold: #e8c34a;
  --select: #fdd563;
  --select-ink: #2a1b08;
  /* supporting indices (figs 2,3,5,6) read as one green instrument;
     only the current selection breaks to --select yellow */
  --fig: #57e09e;
  --fig-ink: #06120c;
  --ember: #ff8c3a;
  --deepember: #8a3d10;
  --mono: 'IBM Plex Mono', 'SF Mono', 'Cascadia Mono', ui-monospace, Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;

  /* THE TYPE SCALE. Every text size on the site is one of these seven and nothing
     else. More sizes read as noise, so to add text pick the nearest step; do not
     write a pixel size anywhere in this file, in the page, or in the scripts.
       t1  labels, stamps, table headers (mono capitals)
       t2  captions, data, small print
       t3  reading text
       t4  lead sentences and card titles
       t5  section headings and answers
       t6  the one big figure on a screen
       t7  the page title in the picture header */
  --t1: 11px;
  --t2: 13px;
  --t3: 15px;
  --t4: 17px;
  --t5: 24px;
  --t6: 32px;
  --t7: clamp(30px, 3.6vw, 50px);
}
/* Phones hold the screen closer and have less width: small steps grow so nothing is
   under 12px, and the large steps shrink so a heading does not take half a screen. */
@media (max-width: 600px) {
  :root {
    --t1: 12px;
    --t2: 14px;
    --t3: 16px;
    --t4: 16px;
    --t5: 21px;
    --t6: 26px;
    --t7: 30px;
  }
}
* {
  box-sizing: border-box;
}
[id] {
  scroll-margin-top: 104px;
}
html {
  color-scheme: dark;
  background: var(--paper);
  min-height: 100%;
}
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size:var(--t4);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  padding-top: 38px;
}
.mono {
  font-family: var(--mono);
}
.wrap {
  max-width: 1360px;
  margin: 0 auto;
  padding: 32px 20px 90px;
}
/* The paper texture lives on <body>, not on the column, so it runs the full
   width of the screen: on a wide monitor the gutters beside the 1360px column
   get the same black-green treatment instead of reading as flat black. The
   last two layers are a fixed wash that greens the edges only. */
body {
  /* Transparent so the fixed wash on html::before shows through; <html> paints the paper colour. */
  background-color: transparent;
  background-image:
    url(../img/paper-grain.webp), radial-gradient(rgba(232, 117, 42, 0.05) 1px, transparent 1px);
  background-size:
    160px 160px,
    26px 26px;
  background-repeat: repeat, repeat;
}
/* Edge and top-glow wash. It used to be two `background-attachment: fixed` layers on
   <body>, which forced the whole page to repaint on every scroll frame. As its own
   fixed layer it is painted once and simply composited while the page scrolls. */
html::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(87, 224, 158, 0.085),
      rgba(87, 224, 158, 0) 13%,
      rgba(87, 224, 158, 0) 87%,
      rgba(87, 224, 158, 0.085)
    ),
    radial-gradient(120% 70% at 50% 0%, rgba(143, 224, 196, 0.05), rgba(143, 224, 196, 0) 70%);
}
/* ================= CRT MONITOR CHROME ================= */
/* A persistent title bar above everything -- both the report and the sandbox
   are "just programs" running on the same terminal, per the reference art
   (Institutum Lorentz / the green multi-panel dashboard). Structure and
   chrome are adapted from those references; palette stays black+orange,
   the site's own established identity, rather than switching to green. */
#crt-titlebar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 38px;
  z-index: 700;
  background: linear-gradient(180deg, #1c1512, #100c0a);
  border-bottom: 1px solid var(--rule2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  font-family: var(--mono);
  font-size:var(--t1);
  letter-spacing: 0.08em;
  color: var(--ink2);
}
.crt-tb-left {
  display: flex;
  align-items: center;
  gap: 9px;
  overflow: hidden;
  white-space: nowrap;
}
.crt-tb-icon {
  color: var(--main);
  font-size:var(--t2);
  flex-shrink: 0;
}
.crt-tb-title {
  overflow: hidden;
  text-overflow: ellipsis;
}
.crt-tb-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.crt-tb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--rule2);
  border-radius: 3px;
  font-size:var(--t1);
  color: var(--ink3);
  cursor: default;
  transition:
    border-color 0.15s,
    color 0.15s;
}
.crt-tb-btn:hover {
  border-color: var(--main);
  color: var(--main);
}
.crt-tb-x:hover {
  border-color: var(--red);
  color: var(--redd);
}
@media (max-width: 520px) {
  .crt-tb-suffix {
    display: none;
  }
}

/* scanlines: alpha-only repeating gradient, no blend-mode (that combination
   cost ~11% of scroll frames the last time it was tried -- see
   SANDBOX_PROGRESS.md). Static, cheap, GPU-composited like the grain layer. */
/* (the scanlines are now drawn by body::after together with the vignette: one full-screen
   layer on top of the page instead of two, which the browser blends on every frame) */

/* rounded "screen" edges on the main viewing area + the sandbox, echoing the
   curved CRT corners in the reference art */
#sandbox-window {
  border-radius: 0 0 16px 16px;
}
.hero {
  position: relative;
  margin: 0 0 4px;
  border-radius: 14px;
  overflow: hidden;
  height: 210px;
  background: var(--card);
}

.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  display: block;
  opacity: 0.9;
}
.hero-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 18px 12px;
  background: linear-gradient(180deg, transparent, rgba(10, 16, 20, 0.94) 75%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.hero-badge {
  width: 20px;
  height: 20px;
  opacity: 0.9;
}
.hero-caption span {
  font-family: var(--mono);
  font-size:var(--t1);
  letter-spacing: 0.1em;
  color: var(--ink2);
}
.hero-caption b {
  font-weight: inherit;
}
.hc-abbr {
  display: none;
}
/* Phones: the caption wrapped to two lines and landed on top of the title
   printed into the artwork itself. Shorten it to one line and darken the
   scrim so the band underneath reads as a caption plate, not a collision. */
@media (max-width: 600px) {
  .hero {
    height: 150px;
  }
  .hero-caption span {
    font-size:var(--t1);
    letter-spacing: 0.1em;
    white-space: nowrap;
  }
  /* crop higher so the title printed into the artwork sits below the frame */
  .hero-img {
    object-position: center 22%;
  }
  .hero-caption {
    padding: 30px 12px 9px;
    background: linear-gradient(180deg, transparent, rgba(7, 13, 10, 0.55) 34%, rgba(7, 13, 10, 0.97) 72%);
  }
  .hc-full {
    display: none;
  }
  .hc-abbr {
    display: inline;
  }
  .hero-badge {
    width: 16px;
    height: 16px;
  }
}
.herotext {
  text-align: center;
  padding: 22px 10px 18px;
}
.hero-mark {
  width: 86px;
  height: 86px;
  color: var(--ink);
  opacity: 1;
  display: block;
  margin: 0 auto 2px;
  filter: drop-shadow(0 0 14px rgba(232, 195, 74, 0.18));
}
@media (max-width: 600px) {
  .hero-mark {
    width: 70px;
    height: 70px;
  }
}
.hero-word {
  font-family: var(--serif);
  font-size:var(--t5);
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--ink);
  margin-top: 12px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.35;
}
.hero-sub {
  font-family: var(--mono);
  font-size:var(--t1);
  letter-spacing: 0.1em;
  color: var(--main);
  margin-top: 8px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}
.hero-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 320px;
  margin: 14px auto;
}
.hero-rule span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rule2));
}
.hero-rule span:last-child {
  background: linear-gradient(90deg, var(--rule2), transparent);
}
.hero-rule i {
  font-style: normal;
  color: var(--gold);
  font-size:var(--t1);
}
.hero-tag {
  font-family: var(--serif);
  font-style: italic;
  font-size:var(--t3);
  color: var(--ink2);
}
.topline {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-family: var(--mono);
  font-size:var(--t1);
  letter-spacing: 0.1em;
  color: var(--ink3);
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 8px;
}
.stamp {
  border: 1px solid var(--rule2);
  border-radius: 6px;
  padding: 2px 9px;
}
h1 {
  font-size:var(--t5);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.h1-acd {
  font-family: var(--mono);
  color: var(--gold);
  letter-spacing: 0.1em;
  font-size:var(--t4);
}
h1 i {
  font-style: italic;
  color: var(--ink2);
  font-weight: 600;
}
.metaline {
  font-family: var(--mono);
  font-size:var(--t2);
  color: var(--ink3);
  margin-bottom: 2px;
}
.box {
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 20px;
  background: var(--card);
  position: relative;
}
.box.tight {
  padding: 12px 18px;
  margin-bottom: 12px;
}
.box.tight p {
  margin-bottom: 5px;
  font-size:var(--t2);
  line-height: 1.5;
}
.box.corners::before,
.box.corners::after,
.box.corners .c-br,
.box.corners .c-bl {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--main);
  opacity: 0.55;
}
.box.corners::before {
  top: -1px;
  left: -1px;
  border-right: none;
  border-bottom: none;
  border-radius: 6px 0 0 0;
}
.box.corners::after {
  top: -1px;
  right: -1px;
  border-left: none;
  border-bottom: none;
  border-radius: 0 6px 0 0;
}
.box.corners .c-bl {
  bottom: -1px;
  left: -1px;
  border-right: none;
  border-top: none;
  border-radius: 0 0 0 6px;
}
.box.corners .c-br {
  bottom: -1px;
  right: -1px;
  border-left: none;
  border-top: none;
  border-radius: 0 0 6px 0;
}
.box.warn {
  border-color: var(--red);
  background: var(--redbg);
}
.box h2 {
  font-size:var(--t1);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--main);
  margin: 0 0 8px;
  font-family: var(--mono);
}
.box p {
  margin: 0 0 8px;
  font-size:var(--t2);
  line-height: 1.65;
}
.box p:last-child {
  margin-bottom: 0;
}
.figtag {
  font-family: var(--mono);
  font-size:var(--t1);
  letter-spacing: 0.1em;
  color: var(--red);
  font-weight: 700;
}
.fighead {
  font-size:var(--t3);
  font-weight: 700;
  margin: 2px 0 4px;
}
.figcap {
  font-size:var(--t2);
  color: var(--ink3);
  margin-bottom: 10px;
  max-width: 60ch;
}
.panel-fig {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 14px;
}
.twocard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.tc {
  border-radius: 10px;
  padding: 12px 14px;
}
.tc-main {
  background: var(--lightaccent);
  border: 1px solid var(--main);
}
.tc-accent {
  background: var(--redbg);
  border: 1px solid var(--red);
}
.tc-label {
  font-family: var(--mono);
  font-size:var(--t1);
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}
.tc-main .tc-label {
  color: var(--main);
}
.tc-accent .tc-label {
  color: var(--redd);
}
.tc-body {
  font-size:var(--t2);
  line-height: 1.5;
}
.rulebar {
  background: var(--mainbg);
  color: var(--ink);
  border: 1px solid var(--main);
  font-family: var(--mono);
  font-size:var(--t2);
  font-weight: 600;
  text-align: center;
  border-radius: 8px;
  padding: 8px 10px;
}
#erafig {
  table-layout: fixed;
  width: 100%;
}
#erafig td,
#erafig th {
  overflow-wrap: break-word;
  word-break: break-word;
}
#erafig td:first-child {
  width: 110px;
}
#erafig td:nth-child(3),
#erafig td:nth-child(4) {
  width: 80px;
}
@media (max-width: 640px) {
  #erafig,
  #erafig thead,
  #erafig tbody,
  #erafig tr,
  #erafig td {
    display: block;
    width: auto;
  }
  #erafig thead {
    display: none;
  }
  #erafig tr {
    border-bottom: 2px solid var(--main);
    padding: 10px 0;
    margin-bottom: 4px;
  }
  #erafig td {
    border-bottom: none;
    padding: 3px 0;
  }
  #erafig td:first-child {
    font-family: var(--mono);
    font-weight: 700;
    color: var(--main);
    font-size:var(--t2);
  }
  #erafig td:nth-child(3)::before {
    content: 'Opened by ';
    color: var(--ink3);
    font-family: var(--mono);
    font-size:var(--t1);
  }
  #erafig td:nth-child(4)::before {
    content: 'Closed by ';
    color: var(--ink3);
    font-family: var(--mono);
    font-size:var(--t1);
  }
}
.termtable td:first-child {
  font-weight: 700;
  color: var(--main);
  white-space: nowrap;
  width: 1%;
}
.termscroll {
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--rule);
  border-radius: 8px;
}
.termscroll table {
  margin: 0;
}
.termscroll thead th {
  position: sticky;
  top: 0;
  background: var(--sunk);
  z-index: 1;
}
.casetable {
  margin-top: 14px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
}
.ct-head {
  background: var(--mainbg);
  color: var(--main);
  border-bottom: 1px solid var(--main);
  font-family: var(--mono);
  font-size:var(--t1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 7px 12px;
}
.ct-row {
  display: grid;
  grid-template-columns: 56px 110px 110px 1fr;
  gap: 10px;
  padding: 9px 12px;
  border-top: 1px solid var(--rule);
  align-items: center;
}
.ct-portrait {
  width: 56px;
  height: 66px;
  object-fit: cover;
  object-position: top center;
  border-radius: 6px;
  background: var(--sunk);
  border: 1px solid var(--rule2);
}
.ct-row:first-of-type {
  border-top: none;
}
.ct-name {
  font-weight: 700;
  font-size:var(--t2);
}
.ct-status {
  font-family: var(--mono);
  font-size:var(--t1);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.ct-confirmed {
  color: var(--secondary);
}
.ct-theory {
  color: var(--red);
}
.ct-body {
  font-size:var(--t2);
  line-height: 1.5;
}
@media (max-width: 640px) {
  .ct-row {
    grid-template-columns: 56px 1fr;
    grid-template-areas: 'portrait name' 'portrait status' 'portrait body';
  }
  .ct-portrait {
    grid-area: portrait;
  }
  .ct-name {
    grid-area: name;
  }
  .ct-status {
    grid-area: status;
  }
  .ct-body {
    grid-area: body;
  }
}
.toc {
  position: sticky;
  top: 38px;
  z-index: 40;
  background: var(--mainbg);
  border-bottom: 1px solid rgba(111, 160, 200, 0.25);
  margin: 0 -20px 20px;
  padding: 8px 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}
.toc-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px 2px;
  flex-wrap: wrap;
  max-width: 1360px;
  margin: 0 auto;
}
.toc-head {
  font-family: var(--mono);
  font-size:var(--t1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-right: 8px;
  white-space: nowrap;
}
.toc a {
  font-size:var(--t2);
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  padding: 6px 9px;
  border-radius: 6px;
  white-space: nowrap;
}
.toc a:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.toc a.active {
  background: rgba(253, 213, 99, 0.16);
  color: var(--select);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--select);
}
/* ---- phones: the nav was wrapping to three rows and, being sticky, parking
   ~230px of chrome on top of whatever chart you scrolled to. One swipeable
   row instead: same links, a third of the height. ---- */
@media (max-width: 700px) {
  .toc {
    padding: 5px 0;
    margin: 0 -20px 16px;
  }
  .toc-inner {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    gap: 2px;
    padding: 0 14px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
  }
  .toc-inner::-webkit-scrollbar {
    display: none;
  }
  .toc a {
    scroll-snap-align: center;
    font-size:var(--t2);
    padding: 6px 10px;
  }
}
.maingrid {
  margin-bottom: 14px;
}
.panelgrid {
  display: block;
  margin-bottom: 14px;
}
.stackgrid {
  display: block;
  margin-bottom: 0;
}
.atmo-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 14px 0 20px;
  padding: 10px;
  border: 1px solid var(--rule2);
  border-radius: 10px;
  background: var(--card);
}
.atmo-strip img {
  width: 130px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}
.atmo-strip .cap {
  font-size:var(--t1);
  color: var(--ink3);
  font-style: italic;
}
/* ---- full-width plates between sections ----
   Held to a fixed aspect so nothing reflows as they decode, and loaded lazily:
   they sit well below the fold and must never delay first paint. */
.plate {
  position: relative;
  margin: 26px 0 24px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--card);
}
.plate img {
  display: block;
  width: 100%;
  aspect-ratio: 1100/420;
  height: auto;
  object-fit: cover;
}
.plate::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 13, 10, 0.3), transparent 32%, rgba(7, 13, 10, 0.72));
  box-shadow: inset 0 0 90px rgba(7, 13, 10, 0.65);
}
.plate .pcap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 14px 16px 12px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.plate .pk {
  font-family: var(--mono);
  font-size:var(--t1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--main);
  flex-shrink: 0;
}
.plate .pt {
  font-family: var(--serif);
  font-style: italic;
  font-size:var(--t2);
  color: var(--ink2);
  line-height: 1.45;
}
@media (max-width: 600px) {
  .plate {
    margin: 18px 0 16px;
  }
  .plate img {
    aspect-ratio: 16/10;
  }
  .plate .pcap {
    padding: 10px 12px 10px;
  }
  .plate .pt {
    font-size:var(--t2);
  }
}
@media (min-width: 820px) {
  :root {
    --sidecol: minmax(150px, 190px);
  }
  .stackgrid {
    display: grid;
    grid-template-columns: var(--sidecol) minmax(0, 1fr) var(--sidecol);
    grid-template-areas: 'tl mid tr' 'bl mid br';
    gap: 14px;
    align-items: start;
  }
}
.secondrow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 820px) {
  :root {
    --sidecol: minmax(150px, 190px);
  }
  .panelgrid {
    display: grid;
    grid-template-columns: var(--sidecol) minmax(0, 1fr) var(--sidecol);
    gap: 14px;
    align-items: start;
  }
  .secondrow {
    grid-template-columns: 1fr 1fr;
  }
}
.maingrid > div {
  min-width: 0;
}
.side {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 12px;
  min-width: 0;
}
.sidehead {
  text-align: center;
  margin-bottom: 8px;
}
.sidehead.compact {
  margin-bottom: 6px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
.controlrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--sunk);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 7px 10px;
  margin-bottom: 10px;
}
.legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size:var(--t1);
  color: var(--ink2);
  font-family: var(--mono);
}
.zoombar {
  display: flex;
  align-items: center;
  gap: 5px;
}
.zbtn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--rule2);
  background: var(--card);
  cursor: pointer;
  font-size:var(--t3);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}
.zbtn:hover {
  border-color: var(--red);
  color: var(--redd);
}
.zbtn[disabled] {
  opacity: 0.34;
  cursor: default;
}
.zbtn[disabled]:hover {
  border-color: var(--rule2);
  color: var(--ink);
}
#zclear:not([disabled]) {
  border-color: rgba(232, 117, 42, 0.5);
  color: var(--main);
}
.zpct {
  font-size:var(--t1);
  color: var(--ink3);
  min-width: 34px;
  text-align: center;
  font-family: var(--mono);
}
.zfitbtn {
  width: auto;
  padding: 0 9px;
  font-size:var(--t1);
  font-family: var(--mono);
  height: 26px;
}
.chart {
  overflow: auto;
  background: var(--sunk);
  border-radius: 10px;
  max-width: 100%;
  height: 290px;
  touch-action: pan-y;
}
.chart-full {
  height: 440px;
}
/* was .chart.lg -- collided with the globe legend's .lg dot (8px circle,
   inline-block), which collapsed the whole Full-view chart to a dot */
.chart.chart-lg {
  height: min(72vh, 640px);
}
svg {
  display: block;
  max-width: none;
}
.modalbg {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  z-index: 80;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.modalcard {
  background: var(--card);
  border-radius: 14px;
  padding: 18px;
  max-width: min(1300px, 96vw);
  width: 100%;
  max-height: 92vh;
  position: relative;
}
.modalclose {
  position: absolute;
  top: 12px;
  right: 12px;
}
.hit {
  pointer-events: stroke;
  cursor: pointer;
}
.sl,
.dot,
.bar,
tr.row {
  cursor: pointer;
}
.sg {
  pointer-events: none;
}
.ts {
  fill: var(--ink3);
}
.nav {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.nav button {
  flex: 1;
}
button {
  font: inherit;
  color: var(--ink);
  background: var(--sunk);
  border: 1px solid var(--rule2);
  border-radius: 9px;
  padding: 8px 12px;
  cursor: pointer;
  font-size:var(--t2);
}
button:hover:not(:disabled) {
  border-color: var(--red);
  color: var(--redd);
}
button:disabled {
  opacity: 0.35;
  cursor: default;
}
.legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size:var(--t1);
  color: var(--ink2);
  font-family: var(--mono);
  margin-bottom: 8px;
}
.panel-outer {
  min-width: 0;
}
.ptitle {
  font-size:var(--t4);
  font-weight: 700;
  font-family: var(--mono);
}
.psub {
  font-size:var(--t2);
  color: var(--ink2);
  margin: 5px 0 14px;
  font-family: var(--mono);
}
.grp {
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
}
.ghead {
  font-size:var(--t1);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink2);
  margin: 0 0 9px 2px;
  font-family: var(--mono);
}
.cell {
  background: var(--sunk);
  border-radius: 9px;
  padding: 11px 13px;
}
.clab {
  font-size:var(--t1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink3);
  margin-bottom: 3px;
  font-family: var(--mono);
}
/* the timing qualifier on a record label: same line, quieter, so "Storm
   Syndrome" and "What the emanation did" can never be read as the same thing */
.cell-when {
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink3);
  opacity: 0.72;
  font-style: italic;
  font-family: var(--serif);
  font-size:var(--t1);
  margin-left: 5px;
}
.cell .body {
  font-size:var(--t2);
  line-height: 1.6;
}
/* ---- syndrome records, written to be caught at a glance ----
   A bold verdict line, then short scannable points, then the line worth
   quoting. Nothing in here should need reading twice. */
.syn-lead {
  display: block;
  font-size:var(--t3);
  font-weight: 700;
  color: var(--select);
  line-height: 1.35;
  margin-bottom: 7px;
}
.cell .body ul.syn {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.cell .body ul.syn li {
  position: relative;
  padding-left: 15px;
  font-size:var(--t2);
  line-height: 1.5;
}
.cell .body ul.syn li::before {
  content: '';
  position: absolute;
  left: 1px;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--fig);
  opacity: 0.85;
}
.syn-q {
  display: block;
  border-left: 2px solid var(--rule2);
  padding: 5px 0 5px 11px;
  margin-top: 8px;
  font-family: var(--serif);
  font-style: italic;
  font-size:var(--t2);
  color: var(--ink2);
}
.syn-src {
  display: block;
  font-family: var(--mono);
  font-size:var(--t1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink3);
  margin-top: 8px;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size:var(--t2);
}
thead tr {
  background: var(--lightaccent);
}
th {
  text-align: left;
  font-family: var(--mono);
  font-size:var(--t1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--main);
  padding: 8px 9px;
  border-bottom: 2px solid var(--main);
}
td {
  padding: 8px 9px;
  border-bottom: 1px solid var(--rule);
  font-size:var(--t2);
  vertical-align: top;
}
tbody tr:nth-child(even) td {
  background: var(--stripe);
}
td.mono {
  font-family: var(--mono);
}
tr.row:hover td {
  background: var(--sunk);
}
tr.row.sel td {
  background: var(--redbg);
}
.divider {
  text-align: center;
  color: var(--gold);
  font-size:var(--t1);
  opacity: 0.6;
  margin: -8px 0 8px;
}
.seal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 20px 0 4px;
  opacity: 0.55;
}
.seal-mark {
  width: 42px;
  height: 42px;
  color: var(--ink);
}
.tr-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 12px;
}
.tr-fig {
  margin: 0;
  text-align: center;
}
.tr-fig img {
  width: 100%;
  height: auto;
  max-width: 220px;
  border-radius: 8px;
  border: 1px solid var(--rule2);
}
.tr-fig figcaption {
  font-size:var(--t1);
  color: var(--ink3);
  margin-top: 6px;
  font-style: italic;
}
@media (min-width: 700px) {
  .tr-layout {
    grid-template-columns: 1fr 220px;
  }
  .tr-fig img {
    max-width: 100%;
  }
}
hr.rule {
  border: none;
  border-top: 1px dashed var(--rule2);
  margin: 30px 0;
}
.refs ol {
  margin: 0;
  padding-left: 20px;
  font-size:var(--t2);
  line-height: 1.8;
}
footer {
  font-size:var(--t2);
  color: var(--ink3);
  margin-top: 10px;
}

/* ============ SURREAL-RETRO ACADEMIC LAYER ============ */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* film grain + vignette: fixed, composited, never repaints on scroll */

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.032) 0px, rgba(0, 0, 0, 0.032) 1px, transparent 1px, transparent 3px),
    radial-gradient(ellipse at 50% 35%, transparent 45%, rgba(0, 0, 0, 0.55) 100%);
  transform: translateZ(0);
}

/* warm the cool game art into the black/orange world */
.hero-img,
.atmo-strip img,
.tr-fig img,
.ct-portrait {
  filter: sepia(0.42) saturate(1.25) hue-rotate(-14deg) contrast(1.06) brightness(0.95);
}

/* academic masthead */
.masthead {
  border-top: 2px solid var(--main);
  border-bottom: 1px solid var(--rule2);
  padding: 10px 0 8px;
  margin-bottom: 18px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size:var(--t1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink3);
}
.masthead b {
  color: var(--main);
  font-weight: 600;
}
.masthead .mh-mid {
  letter-spacing: 0.16em;
  color: var(--ink2);
}

/* running heads on section rules */
h2 {
  position: relative;
}
.box h2::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: linear-gradient(90deg, var(--main), transparent 62%);
  opacity: 0.5;
}

/* ============ SCROLL TRANSITION ENGINE — 3D WINDOWS ============ */
/* Sections pass through the viewport like windows in a hallway: tilted back
   and receded on approach, flat and near on arrival, tilted forward and
   receding again on exit. Continuously driven by scroll position (no easing
   lag) -> only transform+opacity change, so it stays GPU-composited.
   Fallback (no JS / reduced motion): plain, fully visible, no transform. */
.js .rvwin {
  opacity: 0;
}
.rvwin.in {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .js .rvwin {
    opacity: 1 !important;
    transform: none !important;
  }
}
.rvwin {
  transform-origin: 50% 50%;
}

/* stagger children */
.js .stag > * {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity 0.5s cubic-bezier(0.22, 0.7, 0.3, 1),
    transform 0.5s cubic-bezier(0.22, 0.7, 0.3, 1);
}
.stag.in > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.stag.in > *:nth-child(1) {
  transition-delay: 0.04s;
}
.stag.in > *:nth-child(2) {
  transition-delay: 0.1s;
}
.stag.in > *:nth-child(3) {
  transition-delay: 0.16s;
}
.stag.in > *:nth-child(4) {
  transition-delay: 0.22s;
}
.stag.in > *:nth-child(5) {
  transition-delay: 0.28s;
}
.stag.in > *:nth-child(6) {
  transition-delay: 0.34s;
}

/* hero becomes a parallax 3D stage */
.hero {
  perspective: 900px;
}
.hero-img {
  transform: translate3d(0, var(--py, 0px), 0) scale(1.08);
  will-change: transform;
}
.hero-caption {
  transform: translate3d(0, calc(var(--py, 0px) * -0.35), 0);
}

@media (prefers-reduced-motion: reduce) {
  .rv,
  .rv-l,
  .rv-r,
  .rv-s,
  .stag > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .tilt {
    transform: none !important;
  }
  .hero-img,
  .hero-caption {
    transform: none !important;
  }
}

/* heavy offscreen blocks: skip rendering work entirely */

/* ---- globe ---- */
.globewrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
}
@media (min-width: 880px) {
  .globewrap {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
}
.globecol {
  position: relative;
}
#globe {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  aspect-ratio: 1/1;
  display: block;
  cursor: grab;
  touch-action: pan-y;
  border-radius: 10px;
  background: transparent;
}
#globe:active {
  cursor: grabbing;
}
.globelegend {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
  font-family: var(--mono);
  font-size:var(--t1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink3);
}
.globelegend span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.lg {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.lg-trig {
  background: #7fffc4;
}
.lg-eng {
  background: #8fe0c4;
}
.lg-hint {
  margin-left: auto;
  opacity: 0.7;
}
/* the register scrolls inside its own pane so the whole block stays the
   height of the globe instead of running on down the page */
.sitelist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 420px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 2px 8px 2px 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(143, 224, 196, 0.35) transparent;
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0,
    #000 10px,
    #000 calc(100% - 14px),
    transparent 100%
  );
  mask-image: linear-gradient(180deg, transparent 0, #000 10px, #000 calc(100% - 14px), transparent 100%);
}
@media (min-width: 880px) {
  .sitelist {
    max-height: 472px;
  }
}
.sitelist::-webkit-scrollbar {
  width: 7px;
}
.sitelist::-webkit-scrollbar-track {
  background: transparent;
}
.sitelist::-webkit-scrollbar-thumb {
  background: rgba(143, 224, 196, 0.3);
  border-radius: 4px;
}
.sitelist::-webkit-scrollbar-thumb:hover {
  background: rgba(143, 224, 196, 0.5);
}
.siterow {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--sunk);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--rule2);
  border-radius: 8px;
  padding: 9px 11px;
  cursor: pointer;
  font: inherit;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease,
    background 0.2s ease;
}
.siterow:hover {
  border-left-color: var(--main);
  transform: translateX(3px);
  background: var(--card);
}
.sr-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size:var(--t1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 4px;
  margin-bottom: 5px;
}
.sr-trig {
  background: rgba(127, 255, 196, 0.16);
  color: #7fffc4;
}
.sr-eng {
  background: rgba(143, 224, 196, 0.13);
  color: var(--secondary);
}
.sr-n {
  display: block;
  font-family: var(--mono);
  font-size:var(--t1);
  color: var(--ink3);
  letter-spacing: 0.1em;
}
.sr-p {
  display: block;
  font-weight: 700;
  font-size:var(--t2);
  margin: 1px 0 3px;
}
.sr-note {
  display: block;
  font-size:var(--t1);
  color: var(--ink2);
  line-height: 1.45;
}
/* selected site -> solid selection yellow with dark ink, matching the
   highlighted menu item in the Institutum Lorentz reference terminal */
.siterow.sel {
  background: var(--select);
  color: var(--select-ink);
  border-color: var(--select);
  border-left-color: var(--select);
  box-shadow:
    0 0 0 1px rgba(253, 213, 99, 0.35),
    0 0 14px rgba(253, 213, 99, 0.18);
}
.siterow.sel:hover {
  background: var(--select);
  border-left-color: var(--select);
}
.siterow.sel .sr-n {
  color: rgba(42, 27, 8, 0.72);
}
.siterow.sel .sr-p {
  color: var(--select-ink);
}
.siterow.sel .sr-note {
  color: rgba(42, 27, 8, 0.88);
}
.siterow.sel .sr-tag {
  background: rgba(42, 27, 8, 0.16);
  color: var(--select-ink);
  font-weight: 700;
}
/* other sites belonging to the same emanation: flagged, but clearly not the
   one you picked — outline only, so the main site stays the solid yellow */
.siterow.sel-rel {
  background: rgba(253, 213, 99, 0.07);
  border-color: rgba(253, 213, 99, 0.35);
  border-left-color: var(--select);
}
.siterow.sel-rel:hover {
  border-left-color: var(--select);
  background: rgba(253, 213, 99, 0.12);
}
.siterow.sel-rel .sr-n {
  color: var(--select);
}

/* ---- de-boxed sections: let them breathe ---- */
.box.plain {
  border: none !important;
  background: none !important;
  padding: 0 2px;
  margin: 30px 0 26px;
}
.box.plain::before,
.box.plain::after {
  display: none;
}
.box.plain h2 {
  margin-bottom: 10px;
}
.box.plain.note {
  border-left: 2px solid var(--red) !important;
  padding-left: 14px;
  margin-bottom: 34px;
}
.box.plain.note h2 {
  color: var(--redd);
}
.box.plain.note p {
  font-size:var(--t2);
  color: var(--ink2);
}
.op-quip {
  font-style: italic;
  color: var(--ink2);
  margin-bottom: 18px;
  line-height: 1.5;
}
.op-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 20px;
  margin-top: 4px;
}
@media (max-width: 760px) {
  .op-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}
.op-card {
  border-left: 2px solid var(--rule2);
  padding-left: 14px;
}
.op-card-ai {
  border-left-color: var(--main);
}
.op-label {
  font-family: var(--mono);
  font-size:var(--t1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--main);
  margin-bottom: 5px;
}
.op-card p {
  font-size:var(--t2);
  color: var(--ink2);
  line-height: 1.5;
  margin: 0;
}
hr.rule {
  margin: 46px 0 24px;
}
.divider {
  margin: 26px 0 18px;
}

/* ---- observatory: timeline is the instrument, indices are glanceable ---- */
.obs-detail {
  margin: 18px 0 0;
}
.obs-label {
  font-family: var(--mono);
  font-size:var(--t1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink3);
  margin: 30px 0 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.obs-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--rule2), transparent);
}
/* ============ READING PROGRESS ============
   A hairline in the title bar that fills as you move through the record.
   transform only, so it never triggers layout. */
#crt-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--main), var(--select));
  opacity: 0.9;
  pointer-events: none;
}

/* ============ INSTRUMENT POWER-UP ============
   The four indices draw themselves when you first reach them: bars sweep out
   from their axis, marks pop in along the series. Transform only -- opacity is
   left alone because the selection logic writes the opacity attribute, and a
   CSS rule here would win against it and break the dimming. */
@media (prefers-reduced-motion: no-preference) {
  .js .fig-arm .ibar,
  .js .fig-arm .bar {
    transform: scaleX(0);
    transform-box: fill-box;
    transform-origin: left center;
    transition: transform 0.66s cubic-bezier(0.2, 0.85, 0.3, 1);
  }
  .js .fig-arm.armed .ibar,
  .js .fig-arm.armed .bar {
    transform: scaleX(1);
  }
  .js .fig-arm .dot,
  .js .fig-arm .cpt {
    transform: scale(0.35);
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.5s cubic-bezier(0.3, 1.5, 0.5, 1);
  }
  .js .fig-arm.armed .dot,
  .js .fig-arm.armed .cpt {
    transform: scale(1);
  }
}

/* ============ CHAPTER PLACEMENT ============
   Our own reading of the community date research: a vertical spine of eras
   rather than the serpentine, poster-card chart it draws its dates from.
   Each era is a plate; events sit on it as dated chips. */
.evtl {
  position: relative;
  margin-top: 6px;
}
.evtl::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--rule2) 8%, var(--rule2) 92%, transparent);
}
.ev-era {
  position: relative;
  padding: 0 0 4px 44px;
  margin-bottom: 12px;
}
.ev-node {
  position: absolute;
  left: 8px;
  top: 11px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--main);
  background: var(--paper);
  box-shadow: 0 0 0 4px var(--paper);
}
.ev-era.cur .ev-node {
  background: var(--select);
  border-color: var(--select);
  box-shadow:
    0 0 0 4px var(--paper),
    0 0 12px rgba(253, 213, 99, 0.5);
}
.ev-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 7px;
}
.ev-yr {
  font-family: var(--mono);
  font-size:var(--t3);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.04em;
}
.ev-bracket {
  font-family: var(--mono);
  font-size:var(--t1);
  letter-spacing: 0.1em;
  color: var(--ink3);
}
.ev-bracket b {
  color: var(--main);
  font-weight: 700;
}
.ev-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.ev-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--sunk);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--rule2);
  border-radius: 7px;
  padding: 6px 10px;
  min-width: 0;
  max-width: 280px;
  transition:
    border-color 0.18s,
    background 0.18s;
}
.ev-chip:hover {
  border-left-color: var(--main);
  background: var(--card);
}
.ev-era.cur .ev-chip {
  border-left-color: var(--select);
}
.ev-tag {
  font-family: var(--mono);
  font-size:var(--t1);
  letter-spacing: 0.1em;
  font-weight: 700;
  text-transform: uppercase;
}
.ev-main .ev-tag {
  color: var(--main);
}
.ev-side .ev-tag {
  color: var(--secondary);
}
.ev-t {
  font-size:var(--t2);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.ev-d {
  font-family: var(--mono);
  font-size:var(--t1);
  color: var(--ink3);
}
.ev-note {
  font-size:var(--t1);
  color: var(--ink3);
  font-style: italic;
  margin-top: 5px;
  max-width: 62ch;
}
/* a chapter cut in half by the emanation that closes its era: the left edge is
   broken rather than recoloured, so it cannot be confused with the legend hues */
.ev-straddle {
  border-left: 2px dashed var(--redd) !important;
}
.ev-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size:var(--t1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink3);
  margin: 2px 0 12px 44px;
}
.ev-legend span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ev-legend i {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  display: inline-block;
  font-style: normal;
}
@media (max-width: 600px) {
  .ev-chip {
    max-width: 100%;
    width: 100%;
  }
  .ev-era {
    padding-left: 34px;
  }
  .evtl::before {
    left: 11px;
  }
  .ev-node {
    left: 4px;
  }
  .ev-legend {
    margin-left: 34px;
  }
}

/* ---- accessibility helpers ----
   .vh hides content from the screen but keeps it for screen readers: used for
   the data tables that sit behind each chart. The focus ring reuses the
   selection yellow so keyboard focus reads as "this is the live one", the
   same language the charts already speak. */
.nojs {
  border: 1px solid var(--main);
  background: var(--mainbg);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0 0 18px;
  font-size:var(--t2);
  line-height: 1.6;
  color: var(--ink);
}
.nojs b {
  display: block;
  margin-bottom: 5px;
  color: var(--main);
  font-family: var(--mono);
  font-size:var(--t2);
  letter-spacing: 0.04em;
}
.vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--select);
  outline-offset: 2px;
  border-radius: 4px;
}
tr.row:focus-visible {
  outline: 2px solid var(--select);
  outline-offset: -2px;
}
.dot,
.ibar,
.cpt {
  cursor: pointer;
}
tr.row {
  cursor: pointer;
}

.obs-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}
/* under ~600px two columns leave each chart about 165px wide -- the axis
   labels stop being readable. One per row instead. */
@media (max-width: 600px) {
  .obs-strip {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 900px) {
  .obs-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.obs-strip .side {
  margin: 0;
}

/* ================= TASKBAR / WINDOW SWITCHER ================= */
#taskbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 500;
  display: flex;
  justify-content: center;
  gap: 2px;
  padding: 8px;
  background: linear-gradient(180deg, transparent, rgba(11, 10, 9, 0.92) 30%);
  font-family: var(--mono);
  pointer-events: none;
}
#taskbar button {
  pointer-events: auto;
  background: var(--card);
  color: var(--ink2);
  border: 1px solid var(--rule2);
  border-radius: 8px 8px 0 0;
  padding: 9px 18px;
  font: inherit;
  font-size:var(--t1);
  letter-spacing: 0.1em;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  transition:
    background 0.15s,
    color 0.15s;
}
#taskbar button:hover {
  background: var(--sunk);
  color: var(--ink);
}
#taskbar button.active {
  background: var(--select);
  color: var(--select-ink);
  border-color: var(--select);
  font-weight: 700;
}
#taskbar button .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}
#taskbar button .lock {
  opacity: 0.55;
  font-size:var(--t1);
}
/* ---- phones: the labels were wrapping to two lines, so the fixed bar ate
   ~100px at the bottom of every screen. Keep them on one line. ---- */
@media (max-width: 700px) {
  #taskbar {
    padding: 5px 6px;
  }
  #taskbar button {
    padding: 7px 12px;
    font-size:var(--t1);
    letter-spacing: 0.04em;
    white-space: nowrap;
    gap: 5px;
  }
}
@media (max-width: 430px) {
  #taskbar button .dot {
    display: none;
  }
  #taskbar button {
    padding: 7px 10px;
    font-size:var(--t1);
  }
}

/* ===== SANDBOX:CSS (window, top bar, passcode gate, emblem) ===== */
#sandbox-window {
  position: fixed;
  top: 38px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 400;
  background: var(--paper);
  display: none;
  flex-direction: column;
  overflow: hidden;
}
#sandbox-window.open {
  display: flex;
}
#sb-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(180deg, #131a16, #0b110e);
  font-family: var(--mono);
  font-size:var(--t1);
  letter-spacing: 0.14em;
  color: var(--ink3);
  flex-shrink: 0;
}
#sb-topbar .unit {
  color: var(--ink);
  font-weight: 700;
}
#sb-topbar .sep {
  opacity: 0.4;
  margin: 0 8px;
}
#sb-topbar button {
  background: transparent;
  border: 1px solid var(--rule2);
  color: var(--ink3);
  border-radius: 4px;
  padding: 4px 10px;
  font: inherit;
  font-size:var(--t1);
  letter-spacing: 0.1em;
  cursor: pointer;
}
#sb-topbar button:hover {
  border-color: var(--main);
  color: var(--main);
}
.sb-emblem {
  width: 132px;
  height: 132px;
  color: var(--ink);
}
.sb-emblem .ring-o {
  animation: sb-spin 46s linear infinite;
}
.sb-emblem .ring-i {
  animation: sb-spin 29s linear infinite reverse;
}
.sb-emblem .tri {
  animation: sb-spin 21s linear infinite;
}
.sb-emblem .scan {
  animation: sb-spin 7s linear infinite;
  opacity: 0.9;
}
.sb-emblem .core-dot {
  animation: sb-pulse 3.4s ease-in-out infinite;
  transform-origin: center;
}
.sb-emblem g {
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes sb-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes sb-pulse {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.35);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sb-emblem .ring-o,
  .sb-emblem .ring-i,
  .sb-emblem .tri,
  .sb-emblem .scan,
  .sb-emblem .core-dot {
    animation: none;
  }
}
#sb-gate {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  background: radial-gradient(90% 80% at 50% 40%, #0b1512 0%, #030706 75%);
}
.gate-card {
  width: min(560px, 100%);
  margin: auto;
  padding: 28px 30px 22px;
  border: 1px solid rgba(242, 180, 90, 0.28);
  border-radius: 14px;
  background: rgba(5, 10, 9, 0.94);
  box-shadow: 0 0 60px rgba(242, 180, 90, 0.06);
  text-align: center;
}
.gate-card > img {
  width: 54px;
  margin-bottom: 12px;
}
#sb-gate .tag {
  font-family: var(--mono);
  font-size: var(--t1);
  letter-spacing: 0.18em;
  color: var(--main);
}
.gate-load {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px auto 4px;
  max-width: 320px;
  font: var(--t1) var(--mono);
  color: var(--ink3);
  font-variant-numeric: tabular-nums;
}
.gate-track {
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: rgba(238, 240, 230, 0.1);
  overflow: hidden;
}
#gate-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--main), #ffd08a);
  box-shadow: 0 0 10px var(--main);
  transform-origin: left;
  transform: scaleX(0);
}
#sb-gate h2 {
  margin: 14px 0 12px;
  font: 400 var(--t5) / 1.2 var(--serif);
  color: var(--ink);
}
.gate-waiver {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  text-align: left;
}
.gate-waiver li {
  padding: 10px 0;
  border-top: 1px solid var(--rule);
  font-size: var(--t2);
  line-height: 1.6;
  color: var(--ink2);
}
.gate-waiver li b {
  display: block;
  font-weight: 600;
  color: var(--ink);
}
.gate-pass {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
#sb-gate input {
  background: var(--sunk);
  border: 1px solid var(--rule2);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--t3);
  letter-spacing: 0.14em;
  text-align: center;
  padding: 10px 16px;
  border-radius: 8px;
  width: 200px;
}
#sb-gate input:focus {
  outline: none;
  border-color: var(--menu-yellow, #e4cc73);
}
#sb-gate input[hidden] {
  display: none;
}
#sb-gate button {
  background: var(--main);
  color: #1a0d04;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-family: var(--mono);
  font-weight: 700;
  cursor: pointer;
  font-size: var(--t1);
  letter-spacing: 0.1em;
  transition: opacity 0.3s, background 0.2s;
}
#sb-gate button:hover:not(:disabled) {
  background: #e4cc73;
}
#sb-gate button:disabled {
  opacity: 0.35;
  cursor: wait;
}
#sb-gate .err {
  margin-top: 8px;
  color: var(--redd);
  font-size: var(--t1);
  min-height: 14px;
  font-family: var(--mono);
}
.gate-fine {
  margin: 6px 0 0;
  font: var(--t1) var(--mono);
  letter-spacing: 0.06em;
  color: var(--ink3);
}
/* ===== /SANDBOX:CSS ===== */

#leyline-page[hidden] {
  display: none !important;
}
#leyline-page {
  padding-top: 26px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
#leyline-page .masthead {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  font: var(--t2) var(--mono);
  letter-spacing: 0.16em;
  margin-bottom: 18px;
}
#leyline-page .masthead span:last-child {
  justify-self: end;
}
#leyline-page .hero {
  height: 300px;
}
#leyline-page .hero-img {
  object-position: center 48%;
  filter: brightness(0.78);
}
#leyline-page .herotext {
  text-align: center;
  padding: 26px 10px 18px;
}
#leyline-page .hero-mark {
  width: 76px;
  height: 76px;
  display: block;
  margin: 0 auto 14px;
}
#leyline-page .hero-word {
  font: 600 var(--t5)/1.35 var(--serif);
  letter-spacing: 0.1em;
}
#leyline-page .hero-sub {
  font: var(--t1)/1.6 var(--mono);
  letter-spacing: 0.1em;
}
#leyline-page .dossier-title {
  font: 400 var(--t7)/1.2 var(--serif);
  letter-spacing: -0.01em;
  text-align: left;
  margin: 12px 0 8px;
  color: var(--ink);
}
#leyline-page .h1-acd {
  font-family: var(--mono);
  letter-spacing: 0.1em;
}
#leyline-page .topline,
#leyline-page .topline button {
  font: var(--t1) var(--mono);
  letter-spacing: 0.1em;
}
#leyline-page .topline button {
  padding: 5px 10px;
  min-height: 0;
  border-color: var(--rule2);
}
#leyline-page .ley-deck {
  color: var(--ink2);
  margin: 14px 0 20px;
}
.ley-status {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font: var(--t1)/1.8 var(--mono);
  color: var(--ink3);
  border-bottom: 1px dashed var(--rule2);
  padding-bottom: 18px;
}
.ley-status span:before {
  content: '◆';
  color: var(--select);
  margin-right: 8px;
  font-size:var(--t1);
}
.ley-section {
  padding: 30px 0;
  border-bottom: 1px dashed var(--rule2);
  scroll-margin-top: 105px;
  transform-origin: center;
}
.ley-section-head h2 {
  font: var(--t5)/1.3 var(--serif);
  color: var(--main);
  position: relative;
  padding-bottom: 10px;
  margin: 7px 0 16px;
}
.ley-section-head h2:after {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(90deg, var(--main), transparent);
  box-shadow: 0 0 8px var(--main);
  opacity: 0.6;
  margin-top: 12px;
}
.ley-register {
  font: var(--t1) var(--mono);
  letter-spacing: 0.16em;
  color: var(--ink3);
}
.ley-section-head p {
  color: var(--ink2);
}
.ley-dossier-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 40px;
  align-items: center;
}
.ley-researcher {
  display: flex;
  align-items: center;
  gap: 20px;
  border-left: 1px solid var(--rule2);
  padding-left: 24px;
}
.ley-researcher img {
  width: 100px;
  height: 100px;
  object-fit: contain;
}
.ley-researcher b {
  font: var(--t4) var(--serif);
  color: var(--select);
  display: block;
}
.ley-researcher span {
  font: var(--t1)/1.8 var(--mono);
  color: var(--ink3);
}
.ley-researcher p {
  font-size:var(--t2) !important;
}
.ley-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin: 24px 0;
}
.ley-columns > div {
  border-left: 2px solid var(--rule2);
  padding-left: 18px;
}
.ley-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 18px;
  padding: 16px 0;
}
.ley-controls label {
  display: grid;
  gap: 7px;
  font: var(--t2) var(--mono);
  color: var(--ink2);
  min-width: 130px;
}
.ley-controls output {
  color: var(--select);
}
#leyline-page input[type='range'] {
  max-width: none;
  width: 150px;
}
.ley-survey-grid {
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  gap: 28px;
  align-items: start;
}
.ley-viewbar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
#leyline-page canvas {
  border: 1px solid var(--rule);
  background: var(--card);
  border-radius: 0;
}
.ley-inspector {
  border-left: 1px solid var(--rule2);
  padding-left: 24px;
}
.ley-inspector dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  font: var(--t2)/1.8 var(--mono);
  gap: 12px;
  margin: 18px 0;
}
.ley-inspector dl div {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 8px;
}
.ley-inspector dt {
  color: var(--ink3);
}
.ley-inspector dd {
  margin: 0;
  color: var(--ink);
}
.ley-inference {
  border-left: 2px solid var(--select);
  padding-left: 14px;
  color: var(--ink2);
}
.ley-chart {
  min-width: 0;
  max-width: 100%;
  margin: 12px 0;
}
.ley-pair {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 32px;
  align-items: start;
}
.ley-result {
  font: var(--t2)/1.8 var(--mono) !important;
  color: var(--select);
  border-top: 1px solid var(--rule2);
  padding-top: 14px;
}
.ley-keyboard {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font: var(--t1) var(--mono);
  margin-top: 18px;
}
.ley-keyboard input {
  width: 65px;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--rule2);
  padding: 8px;
}
.ley-hypotheses {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin: 28px 0;
}
.ley-hypotheses article {
  border-left: 2px solid var(--rule2);
  padding-left: 18px;
}
.ley-hypotheses article > span {
  font: var(--t1) var(--mono);
  letter-spacing: 0.1em;
  color: var(--select);
}
.ley-falsifier {
  color: var(--ink2);
  font-size:var(--t2) !important;
}
.ley-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0;
}
#ley-references {
  padding: 28px;
  border: 1px solid var(--rule2);
  margin-top: 30px;
}
#ley-references a {
  color: var(--ink);
}
#ley-references a:hover {
  color: var(--select);
}
#leyline-page.ley-flat .ley-section,
#leyline-page.ley-flat .ley-opening {
  transform: none !important;
  opacity: 1 !important;
}
body.reading-mode #leyline-page .ley-section,
body.reading-mode #leyline-page .ley-opening {
  transform: none !important;
  opacity: 1 !important;
}
@media (max-width: 850px) {
  .ley-dossier-grid,
  .ley-survey-grid,
  .ley-pair {
    grid-template-columns: 1fr;
  }
  .ley-researcher {
    padding: 16px 0;
    border-left: 0;
    border-top: 1px solid var(--rule2);
  }
  .ley-inspector {
    padding: 0;
    border: 0;
  }
  .ley-columns,
  .ley-hypotheses {
    grid-template-columns: 1fr;
  }
  .ley-controls label {
    flex: 1;
    min-width: 140px;
  }
  #leyline-page input[type='range'] {
    width: 100%;
  }
}
@media (max-width: 700px) {
  #leyline-page .masthead {
    grid-template-columns: 1fr auto;
    font-size:var(--t1);
    letter-spacing: 0.1em;
  }
  #leyline-page .mh-mid {
    display: none;
  }
  #leyline-page .hero-word {
    font-size:var(--t5);
  }
  .ley-keyboard input {
    font-size:var(--t4);
  }
  .ley-controls select {
    max-width: 100%;
  }
}
@media (max-width: 600px) {
  #leyline-page {
    padding: 14px 14px 40px;
    overflow-x: clip;
  }
  #leyline-page .hero {
    height: 210px;
  }
  #leyline-page button,
  #leyline-page select {
    min-height: 44px;
  }
  #leyline-page .topline button {
    min-height: 44px;
  }
  .ley-toc {
    margin-inline: -14px;
  }
  .ley-controls {
    gap: 12px;
  }
  .ley-inspector dl {
    font-size:var(--t2);
  }
  .ley-status {
    gap: 6px 18px;
  }
  .ley-section {
    padding: 24px 0;
  }
  .ley-section-head h2 {
    font-size:var(--t5);
  }
  .ley-keyboard {
    gap: 6px;
  }
  #ley-references {
    padding: 20px 16px;
  }
  .ley-researcher img {
    width: 80px;
    height: 80px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #leyline-page .ley-section,
  #leyline-page .ley-opening {
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Reading progression: keep the archive's type scale and quiet borders. */
.research-route {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 24px 0;
}
.research-route a {
  display: block;
  border-left: 2px solid var(--rule2);
  padding: 4px 0 4px 16px;
  text-decoration: none;
  color: var(--ink2);
  min-width: 0;
}
.research-route b {
  display: block;
  color: var(--main);
  font-family: var(--serif);
  margin-bottom: 8px;
}
.research-route span {
  display: block;
}
.research-route a:hover,
.research-route a:focus-visible {
  border-color: var(--select);
}
.experiment-guide {
  border-left: 2px solid var(--rule2);
  padding: 4px 0 4px 16px;
  margin: 18px 0 24px;
  color: var(--ink2);
}
.experiment-guide p {
  margin: 6px 0 !important;
}
.experiment-guide b {
  color: var(--ink);
}
.ley-illustration {
  margin: 26px 0;
}
.ley-illustration img,
.ley-art-grid img {
  display: block;
  width: 100%;
  height: auto;
  filter: none !important;
}
.ley-illustration figcaption,
.ley-art-grid figcaption {
  border-left: 1px solid var(--rule2);
  padding-left: 14px;
  margin-top: 12px;
  color: var(--ink2);
  font: var(--t2)/1.8 var(--mono);
}
.ley-illustration figcaption span,
.ley-art-grid figcaption span {
  display: block;
  color: var(--main);
  margin-bottom: 4px;
}
.ley-art-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.ley-art-grid figure {
  min-width: 0;
  margin: 0;
}
.ley-art-grid figure:first-child {
  grid-column: 1/-1;
}
.ley-art-grid figure:first-child img {
  max-height: 310px;
  object-fit: cover;
}
.ley-hero .hero-img {
  filter: none !important;
  object-position: center !important;
}
@media (max-width: 700px) {
  .research-route,
  .ley-art-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .ley-art-grid figure:first-child {
    grid-column: auto;
  }
  .ley-art-grid figure:first-child img {
    max-height: none;
  }
  .experiment-guide {
    padding-left: 12px;
  }
  .ley-illustration figcaption,
  .ley-art-grid figcaption {
    font-size:var(--t2);
  }
}

.recon-toolbar,
.recon-layers {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 18px 0;
}
.recon-layout {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(220px, 1fr);
  gap: 26px;
  align-items: start;
}
.recon-figure {
  margin: 0;
  min-width: 0;
}
#recon-stage {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--rule2);
  background: #080f0d;
  min-height: 340px;
}
#recon-stage canvas {
  display: block;
  width: 100%;
  touch-action: none;
  border: 0;
}
#recon-fallback {
  display: none;
  width: 100%;
  height: auto;
}
#recon-fallback:not([hidden]) {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#recon-canvas {
  position: relative;
  z-index: 1;
}
.recon-stage-label {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 2;
  background: #080f0de6;
  color: var(--ink2);
  padding: 5px 8px;
  font: var(--t1)/1.5 var(--mono);
  pointer-events: none;
  max-width: calc(100% - 24px);
}
.recon-sliders {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 20px;
}
.recon-sliders label {
  display: grid;
  gap: 8px;
  font: var(--t2)/1.7 var(--mono);
  color: var(--ink2);
}
.recon-sliders output {
  color: var(--select);
}
#leyline-page .recon-sliders input {
  width: 100%;
}
.recon-layers label {
  font: var(--t2) var(--mono);
  display: flex;
  align-items: center;
  gap: 6px;
}
.recon-inspector {
  border-left: 1px solid var(--rule2);
  padding-left: 20px;
  min-width: 0;
}
.recon-inspector > label {
  display: block;
  margin: 15px 0 8px;
  font: var(--t2) var(--mono);
}
.recon-inspector select {
  width: 100%;
  max-width: 100%;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--rule2);
  padding: 10px;
  font: var(--t2) var(--mono);
}
.recon-inspector h3 {
  margin-top: 24px;
}
.recon-inspector dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  font: var(--t2)/1.8 var(--mono);
}
.recon-inspector dl div {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 10px;
}
.recon-inspector dt {
  color: var(--ink3);
}
.recon-inspector dd {
  margin: 0;
  color: var(--ink);
}
.recon-caution {
  border-left: 2px solid var(--rule2);
  padding-left: 12px;
}
@media (max-width: 850px) {
  .recon-layout {
    grid-template-columns: 1fr;
  }
  .recon-inspector {
    border-left: 0;
    border-top: 1px solid var(--rule2);
    padding: 20px 0 0;
  }
  .recon-toolbar button {
    flex: 1 1 auto;
  }
}
@media (max-width: 600px) {
  .recon-sliders {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .recon-stage-label {
    font-size:var(--t1);
  }
  .recon-toolbar {
    gap: 6px;
  }
  .recon-toolbar button {
    font-size:var(--t1);
  }
  .recon-inspector dl {
    grid-template-columns: 1fr 1fr;
  }
}

.model-description {
  color: var(--ink2);
  font: var(--t2)/1.8 var(--serif);
  margin: 12px 0 16px;
  max-width: 100%;
  border-left: 1px solid var(--rule2);
  padding-left: 12px;
}
.recon-sliders {
  grid-template-columns: 1fr;
}
#recon-canvas {
  touch-action: pan-y;
}

/* Archive edition: reading hierarchy, compact navigation and calmer instruments. */
:root {
  --paper: #080d10;
  --card: #10191c;
  --sunk: #172326;
  --ink: #edf0e7;
  --ink2: #bccbc4;
  --ink3: #93aaa0;
  --main: #e9a45f;
  --gold: #e6ca82;
  --rule: rgba(211, 228, 219, 0.16);
}
body {
  line-height: 1.7;
}
body::before {
  opacity: 0.35;
}
.wrap {
  max-width: 1440px;
  padding: 26px 32px 100px;
}
.hero {
  height: 260px;
  border-radius: 2px;
  border: 1px solid var(--rule2);
}
.hero-caption span {
  font-size:var(--t2);
}
.hero-img {
  object-position: center 42%;
  filter: saturate(0.65);
}
.masthead {
  padding: 12px 0;
  font-size:var(--t2);
}
h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t7);
  line-height: 1.2;
}
.box {
  border-radius: 3px;
  padding: 26px 28px;
  background: linear-gradient(120deg, #121c1f, #0d1518);
}
.box h2 {
  font-family: var(--serif);
  font-size:var(--t5);
  font-weight: 400;
}
.box p {
  max-width: 85ch;
}
.fighead {
  font-family: var(--serif);
  font-size:var(--t5);
}
.figcap,
.metaline,
.legend,
.nav,
.controlrow {
  font-size:var(--t3);
}
.toc-inner a {
  font-size:var(--t3);
  padding: 9px 12px;
}
.side,
.panel-outer {
  border-radius: 3px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}
.archive-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 20px 0 28px;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.archive-tools a,
.archive-tools button {
  font: var(--t3) var(--mono);
  text-decoration: none;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--rule2);
  padding: 10px 16px;
  cursor: pointer;
  border-radius: 2px;
}
.archive-tools a:first-child {
  background: var(--gold);
  color: #151915;
  border-color: var(--gold);
}
.archive-tools span {
  font: var(--t2) var(--mono);
  color: var(--ink3);
  margin-left: auto;
}
body.reading-mode::before {
  display: none;
}
body.reading-mode .rvwin,
body.reading-mode .rv,
body.reading-mode .tilt {
  transform: none !important;
  opacity: 1 !important;
  animation: none !important;
}
body.reading-mode .box p,
body.reading-mode .refs {
  font-size:var(--t4);
  line-height: 1.85;
}
body.reading-mode * {
  scroll-behavior: auto !important;
}
@media (max-width: 700px) {
  .wrap {
    padding: 16px 14px 100px;
  }
  .hero {
    height: 180px;
  }
  .box {
    padding: 20px 18px;
  }
  .archive-tools span {
    width: 100%;
    margin-left: 0;
  }
  .archive-tools a,
  .archive-tools button {
    padding: 10px 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .rvwin,
  .rv {
    opacity: 1 !important;
    transform: none !important;
  }
}

.analysis-lab {
  margin: 46px 0 32px;
  scroll-margin-top: 110px;
}
.lab-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 28px;
  border-top: 2px solid var(--gold);
  padding: 24px 0;
}
.lab-kicker {
  font: var(--t2) var(--mono);
  letter-spacing: 0.16em;
  color: var(--gold);
}
.lab-header h2 {
  font: var(--t7)/1.2 var(--serif);
  margin: 8px 0 12px;
}
.lab-header p {
  max-width: 70ch;
  color: var(--ink2);
  margin: 0;
}
.lab-controls {
  display: flex;
  gap: 12px;
  align-items: end;
  flex-wrap: wrap;
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--rule);
  margin-bottom: 20px;
}
.lab-controls label {
  display: grid;
  gap: 6px;
  font: var(--t3) var(--mono);
}
.lab-controls select,
.lab-controls button,
.lab-model select {
  background: var(--sunk);
  color: var(--ink);
  border: 1px solid var(--rule2);
  padding: 10px 14px;
  font: var(--t3) var(--mono);
  min-height: 42px;
}
.lab-controls button {
  cursor: pointer;
}
.lab-controls p {
  margin: 0 0 9px auto;
  font-size:var(--t3);
  color: var(--ink2);
}
.lab-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin: 20px 0 28px;
}
.lab-metric {
  background: var(--paper);
  padding: 20px;
}
.lab-metric strong {
  display: block;
  font: var(--t6)/1.2 var(--serif);
  color: var(--gold);
}
.lab-metric span {
  display: block;
  font: var(--t3) var(--mono);
  margin-top: 8px;
  color: var(--ink2);
}
.lab-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.lab-model {
  min-width: 0;
  border-top: 1px solid var(--rule2);
  padding: 20px 0 0;
}
.lab-wide {
  grid-column: 1/-1;
}
.lab-model h3 {
  font: var(--t5)/1.3 var(--serif);
  margin: 6px 0 10px;
}
.lab-model p {
  font-size:var(--t3);
  color: var(--ink2);
  margin: 8px 0 16px;
}
.lab-tag {
  font: var(--t2) var(--mono);
  letter-spacing: 0.1em;
  color: var(--secondary);
}
.lab-chart {
  width: 100%;
  overflow: auto;
}
.lab-chart svg {
  display: block;
  width: 100%;
  height: auto;
  min-width: 610px;
}
.lab-chart text {
  font: var(--t3) var(--mono);
  fill: var(--ink2);
}
.lab-chart .lab-hit {
  cursor: pointer;
  outline: none;
}
.lab-chart .lab-hit:hover,
.lab-chart .lab-hit:focus {
  filter: brightness(1.4);
}
.lab-chart .lab-hit:focus rect,
.lab-chart .lab-hit:focus circle {
  stroke: var(--gold);
  stroke-width: 3;
}
.lab-chart .lab-axis {
  stroke: var(--rule2);
  stroke-width: 1;
}
.lab-chart .lab-label {
  fill: var(--ink);
}
.lab-chart .lab-mark {
  fill: var(--gold);
}
.lab-model details,
.lab-sources {
  margin: 14px 0;
  border: 1px solid var(--rule);
  padding: 14px 16px;
  background: var(--card);
  font-size:var(--t3);
}
.lab-model summary,
.lab-sources summary {
  cursor: pointer;
  font: var(--t3) var(--mono);
  color: var(--ink);
}
.lab-table-wrap {
  overflow: auto;
}
.lab-model table {
  width: 100%;
  font-size:var(--t3);
  margin-top: 16px;
  border-collapse: collapse;
}
.lab-model th,
.lab-model td {
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.lab-model th {
  color: var(--gold);
  font-weight: 500;
}
.lab-status {
  padding: 16px;
  border-left: 2px solid var(--gold);
  background: var(--card);
  color: var(--ink);
  font-size:var(--t3);
  margin: 12px 0;
}
.lab-legend {
  font: var(--t2) var(--mono);
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  color: var(--ink2);
  margin-bottom: 12px;
}
.lab-legend b {
  color: var(--gold);
  font-weight: 400;
}
.lab-planner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.lab-planner label {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
  font-size:var(--t3);
}
.lab-planner input[type='range'] {
  width: 100%;
  accent-color: var(--gold);
}
.lab-planner output {
  font: var(--t4) var(--mono);
  color: var(--gold);
}
.lab-sources li {
  margin: 14px 0;
}
.lab-source-img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 18px;
}
.interval-register {
  display: grid;
  gap: 6px;
}
.interval-register button {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink2);
  font: var(--t2) var(--mono);
  padding: 8px;
  cursor: pointer;
  text-align: left;
}
.interval-register b {
  font-weight: 400;
  color: var(--ink);
}
.plate {
  border-radius: 2px;
}
.plate img {
  object-fit: cover;
}
.plate .pk,
.plate .pt {
  font-size:var(--t3);
}
@media (max-width: 850px) {
  .lab-grid {
    grid-template-columns: 1fr;
  }
  .lab-wide {
    grid-column: auto;
  }
  .lab-metrics {
    grid-template-columns: 1fr 1fr;
  }
  .lab-header {
    display: block;
  }
  .lab-controls p {
    margin: 0;
  }
  .lab-planner {
    grid-template-columns: 1fr;
  }
  .lab-chart svg {
    min-width: 610px;
  }
}

#lab-transitions svg {
  min-width: 1080px;
}

:root {
  --main: #e8752a;
  --gold: #fdd563;
  --select: #fdd563;
}
h1 .h1-acd,
h1 i {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
}
#time-rules .tr-layout {
  display: flow-root;
  margin: 0 0 14px;
}
#time-rules .tr-fig {
  float: right;
  width: 220px;
  margin: 4px 0 18px 26px;
}
#time-rules .tr-text {
  display: contents;
}
#time-rules .tr-fig figcaption {
  font-size:var(--t2);
  line-height: 1.6;
}
.storm-principles {
  padding-left: 22px;
  margin: 14px 0;
}
.storm-principles li {
  padding-left: 4px;
  margin-bottom: 14px;
}
.geo-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 36px;
}
.geo-intro h2 {
  grid-column: 1/-1;
  margin-bottom: 2px;
}
.geo-intro p {
  max-width: none;
  margin: 8px 0 0;
}
.geo-label {
  font: var(--t2) var(--mono);
  letter-spacing: 0.1em;
  color: var(--main);
}
.globewrap {
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 1fr);
  gap: 32px;
  align-items: center;
}
#globe {
  max-width: 600px;
}
.sitelist {
  max-height: 510px;
}
.analysis-lab .lab-header {
  border-top-color: var(--main);
}
.analysis-lab .lab-kicker,
.analysis-lab .lab-tag,
.analysis-lab .lab-model h3,
.analysis-lab .lab-metric strong,
.analysis-lab th,
.analysis-lab .lab-planner output {
  color: var(--main);
}
.analysis-lab .lab-status {
  border-left-color: var(--main);
}
.analysis-lab .lab-legend b {
  color: var(--main);
}
.analysis-lab .lab-model {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 22px;
}
.lab-comparison {
  min-width: 0;
}
.comparison-head {
  margin: 10px 0 18px;
}
.comparison-head h3 {
  font: var(--t5) var(--serif);
  margin: 6px 0;
  color: var(--main);
}
.obs-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 880px) {
  .globewrap {
    grid-template-columns: 1fr;
  }
  .geo-intro {
    grid-template-columns: 1fr;
  }
  .geo-intro h2 {
    grid-column: auto;
  }
  .obs-strip {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  #time-rules .tr-fig {
    float: none;
    width: 220px;
    margin: 14px auto 22px;
  }
  .obs-strip {
    grid-template-columns: 1fr;
  }
  .analysis-lab .lab-model {
    padding: 16px;
  }
}

.analysis-lab .lab-model h3,
.analysis-lab .comparison-head h3 {
  color: var(--ink);
}
.analysis-lab .lab-metric strong,
.analysis-lab th,
.analysis-lab .lab-planner output,
.analysis-lab .lab-legend b {
  color: var(--ink2);
}
.analysis-lab .lab-status {
  border-left-color: var(--rule2);
}
.accounting-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
  gap: 28px;
  align-items: center;
}
#lab-accounting svg {
  max-width: 660px;
  margin: 0 auto;
}
.accounting-ledger {
  border-left: 1px solid var(--rule2);
  padding-left: 24px;
}
.accounting-ledger > div {
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.accounting-ledger span {
  display: block;
  font: var(--t3) var(--mono);
  color: var(--ink2);
}
.accounting-ledger strong {
  display: block;
  font: var(--t5) var(--serif);
  color: var(--ink);
  margin-top: 5px;
}
.accounting-ledger p {
  font-size:var(--t3);
  margin: 14px 0 0;
}
.research-references {
  border-top: 1px solid var(--rule2);
  margin-top: 20px;
  padding-top: 16px;
}
.research-references summary {
  cursor: pointer;
  font: var(--t3) var(--mono);
}
.research-references li {
  margin: 12px 0;
}
@media (max-width: 1000px) {
  .accounting-layout {
    grid-template-columns: 1fr;
  }
  .accounting-ledger {
    border-left: 0;
    border-top: 1px solid var(--rule2);
    padding: 14px 0 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  .accounting-ledger p {
    grid-column: 1/-1;
  }
}
@media (max-width: 600px) {
  .accounting-ledger {
    grid-template-columns: 1fr;
  }
  .accounting-ledger p {
    grid-column: auto;
  }
}

/* Unified report hierarchy and navigation */
.box h2,
.analysis-lab .lab-header h2,
.fighead,
.chaos-page h2 {
  font: var(--t5)/1.3 var(--serif);
  color: var(--main);
  letter-spacing: 0;
}
.analysis-lab .lab-model h3,
.analysis-lab .comparison-head h3 {
  font: var(--t4)/1.35 var(--serif);
  color: var(--main);
}
.box p,
.lab-header p,
.figcap {
  max-width: none;
}
.lab-header > div {
  width: 100%;
}
.lab-header {
  padding: 20px 0;
}
.lab-kicker {
  font-size:var(--t1);
}
.analysis-lab p {
  font-size:var(--t3);
}
.analysis-lab .lab-metric strong {
  font-size:var(--t5);
}
#terminal-close {
  background: none;
  padding: 0;
  cursor: pointer;
  border-color: #cbd1c9;
  color: #cbd1c9;
}
#terminal-close:hover {
  border-color: #cbd1c9;
  color: #cbd1c9;
}
#menu-toggle {
  border: 0;
  background: none;
  color: var(--main);
  font-size: 20px;
  padding: 0 8px;
  cursor: pointer;
}
#nav-backdrop {
  position: fixed;
  inset: 38px 0 0;
  background: #0009;
  z-index: 799;
}
#site-drawer {
  position: fixed;
  top: 38px;
  bottom: 0;
  left: 0;
  width: min(330px, 88vw);
  background: var(--paper);
  border-right: 1px solid var(--rule2);
  padding: 28px 20px;
  z-index: 800;
  box-shadow: 12px 0 40px #0006;
}
#site-drawer[hidden],
#nav-backdrop[hidden],
#chaos-page[hidden] {
  display: none !important;
}
.drawer-label {
  font: var(--t1) var(--mono);
  color: var(--main);
  letter-spacing: 0.1em;
  margin-bottom: 26px;
}
#site-drawer button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 1px solid transparent;
  color: var(--ink2);
  padding: 16px 12px;
  font: var(--t3) var(--mono);
  cursor: pointer;
  margin: 6px 0;
}
#site-drawer button:hover,
#site-drawer button.active {
  border-color: var(--main);
  color: var(--main);
  background: var(--card);
}
#site-drawer #drawer-close {
  width: auto;
  padding: 6px 12px;
  float: right;
  margin: -10px 0 10px;
}
.chaos-page {
  max-width: 1440px;
  margin: auto;
  padding: 90px 32px 60px;
  color: var(--ink);
}
.chaos-page h1 {
  font: var(--t6) var(--serif);
  color: var(--main);
  margin: 16px 0;
}
.chaos-page h3 {
  font: var(--t4) var(--serif);
  color: var(--ink);
  margin: 14px 0;
}
.chaos-page p {
  font-size:var(--t3);
  line-height: 1.85;
  max-width: none;
}
.chaos-deck {
  font-size:var(--t4) !important;
}
.chaos-note {
  font: var(--t2)/1.7 var(--mono);
  padding: 14px 18px;
  border-left: 2px solid var(--main);
  background: var(--card);
  color: var(--ink2);
}
.chaos-index {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  padding: 24px 0;
  border-bottom: 1px solid var(--rule2);
  font: var(--t2) var(--mono);
}
.chaos-section,
.chaos-explain {
  padding: 30px 0;
  border-bottom: 1px solid var(--rule2);
  scroll-margin-top: 65px;
}
.chaos-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.chaos-pair {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 28px;
  align-items: center;
}
.chaos-page figure {
  margin: 16px 0;
  min-width: 0;
}
.chaos-page canvas {
  width: 100%;
  height: auto;
  display: block;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 4px;
  touch-action: none;
}
.chaos-page svg {
  width: 100%;
  height: auto;
  display: block;
}
.chaos-page figcaption {
  font: var(--t2)/1.7 var(--mono);
  color: var(--ink2);
  margin-top: 12px;
}
.chaos-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 0;
}
.chaos-controls label {
  font: var(--t2) var(--mono);
  display: flex;
  align-items: center;
  gap: 10px;
}
.chaos-page button,
.chaos-page select {
  font: var(--t2) var(--mono);
  border: 1px solid var(--rule2);
  background: var(--card);
  color: var(--ink);
  padding: 9px 12px;
  cursor: pointer;
}
.chaos-page button:hover {
  border-color: var(--select);
  color: var(--select);
}
.chaos-page input {
  accent-color: var(--main);
  max-width: 160px;
}
.chaos-page output {
  color: var(--select);
  font: var(--t2) var(--mono);
}
.chaos-page details {
  margin-top: 20px;
  font-size:var(--t2);
  color: var(--ink2);
}
.chaos-page summary {
  cursor: pointer;
  font: var(--t2) var(--mono);
}
.chaos-table-wrap {
  overflow-x: auto;
}
.chaos-page table {
  width: 100%;
  font-size:var(--t2);
}
.chaos-page th {
  color: var(--main);
  text-align: left;
}
.chaos-page td,
.chaos-page th {
  padding: 14px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.chaos-reading {
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--rule);
}
@media (max-width: 800px) {
  .chaos-pair,
  .chaos-columns {
    grid-template-columns: 1fr;
  }
  .chaos-page {
    padding: 72px 18px 40px;
  }
  .chaos-page h1 {
    font-size:var(--t6);
  }
  .chaos-controls label {
    flex-wrap: wrap;
  }
  .chaos-page h2 {
    font-size:var(--t5);
  }
}

/* Report running heads and compact theory instruments */
.geo-intro h2,
#timeline + .box h2 {
  text-transform: none;
}
.analysis-lab .lab-header {
  border-top: 0;
  padding-top: 0;
}
#lab-title,
.section-glow {
  position: relative;
  margin-bottom: 18px;
  text-transform: none;
}
#lab-title::after,
.section-glow::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: linear-gradient(90deg, var(--main), transparent 62%);
  opacity: 0.5;
}
.chaos-page h1 {
  border-top: 0;
}
.chaos-intro {
  border-top: 0;
}
.chaos-columns article {
  border-left: 1px solid var(--main);
  padding-left: 20px;
}
.chaos-columns article h3 {
  margin-top: 0;
}
.chaos-art {
  margin: 28px 0 !important;
  border: 1px solid var(--rule);
  background: var(--card);
  overflow: hidden;
  border-radius: 4px;
}
.chaos-art img {
  display: block;
  width: 100%;
  height: clamp(180px, 25vw, 330px);
  object-fit: cover;
  object-position: center;
}
.chaos-art figcaption {
  padding: 14px 20px;
  margin: 0;
  font: var(--t2)/1.7 var(--serif);
}
.chaos-art figcaption span {
  display: block;
  color: var(--main);
  font: var(--t1)/1.7 var(--mono);
  margin-bottom: 4px;
}
.reset-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr);
  gap: 28px;
  align-items: center;
}
#reset-chart {
  max-width: 700px;
  margin: auto;
}
.reset-reading {
  border-left: 1px solid var(--rule2);
  padding-left: 24px;
}
.reset-reading .chaos-note {
  font-size:var(--t2);
}
.reset-reading p {
  font-size:var(--t3);
}
.chaos-references {
  border-top: 1px dashed var(--rule2);
  border-bottom: 0;
  margin-top: 36px;
}
.chaos-references li {
  margin: 16px 0;
  font-size:var(--t3);
  line-height: 1.8;
}
.chaos-art-credit {
  font-size:var(--t2) !important;
  color: var(--ink2);
}
@media (max-width: 800px) {
  .reset-layout {
    grid-template-columns: 1fr;
  }
  .reset-reading {
    padding-left: 18px;
  }
  .chaos-art img {
    height: 220px;
  }
}

html {
  scroll-padding-top: 100px;
}
body {
  overflow-x: clip;
}
img {
  max-width: 100%;
}
button,
a,
input,
select {
  -webkit-tap-highlight-color: transparent;
}
button:focus-visible,
a:focus-visible,
canvas:focus-visible {
  outline: 2px solid var(--select);
  outline-offset: 3px;
}
.site-mark {
  width: 23px;
  height: 23px;
  flex-shrink: 0;
  display: block;
}
.crt-tb-left {
  gap: 6px;
}
#menu-toggle {
  min-width: 44px;
  min-height: 38px;
}
.chaos-toc {
  position: sticky;
  top: 38px;
  margin: 0 -32px 26px;
  padding: 8px 20px;
  z-index: 40;
}
.chaos-toc .toc-inner {
  justify-content: flex-start;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
}
.chaos-toc a {
  min-height: 44px;
  display: flex;
  align-items: center;
}
.table-scroll,
.chart-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-scroll table {
  min-width: 600px;
}
.hybrid-controls {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  padding: 18px 0;
}
.hybrid-controls label {
  display: flex;
  align-items: center;
  gap: 10px;
  font: var(--t2) var(--mono);
}
.hybrid-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr);
  gap: 26px;
}
.hybrid-inspector {
  border-left: 1px solid var(--rule2);
  padding-left: 24px;
}
.hybrid-inspector li {
  font-size:var(--t3);
  line-height: 1.9;
  margin: 10px 0;
}
.hybrid-inspector p {
  font-size:var(--t3);
}
.hybrid-layers {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 0;
  font: var(--t2) var(--mono);
}
.hybrid-layers label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
}
.hybrid-scrub {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 14px 0;
}
.hybrid-scrub label {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  font: var(--t2) var(--mono);
}
.hybrid-scrub input {
  max-width: none;
  flex: 1;
  min-width: 120px;
}
.hybrid-output {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr);
  gap: 28px;
}
.hybrid-events > p {
  font-size:var(--t2);
}
.hybrid-events #hybrid-ledger {
  max-height: 260px;
  overflow-y: auto;
  display: grid;
  gap: 6px;
}
.hybrid-events button {
  text-align: left;
}
.hybrid-inspector #hybrid-measures {
  font: var(--t2)/1.8 var(--mono);
  padding: 14px;
  background: var(--card);
  color: var(--select);
}
@media (max-width: 800px) {
  .hybrid-layout,
  .hybrid-output {
    grid-template-columns: 1fr;
  }
  .hybrid-inspector {
    padding-left: 18px;
  }
  .chaos-toc {
    margin-left: -18px;
    margin-right: -18px;
    padding: 4px 10px;
  }
  .chaos-toc a {
    font-size:var(--t2);
  }
  .chaos-page {
    padding-top: 52px;
  }
  .hybrid-controls label {
    flex-wrap: wrap;
    min-height: 44px;
  }
  .hybrid-scrub label {
    flex-wrap: wrap;
  }
  .hybrid-scrub input {
    min-height: 44px;
  }
}
@media (max-width: 600px) {
  .wrap,
  .chaos-page {
    max-width: 100%;
    box-sizing: border-box;
  }
  .wrap {
    padding: 14px 14px 40px;
  }
  .chaos-page {
    padding: 52px 14px 40px;
  }
  .toc {
    margin-left: -14px;
    margin-right: -14px;
  }
  .toc a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* phones: drop the two decorative window buttons, keep a thumb-sized close */
  .crt-tb-right .crt-tb-btn:not(#terminal-close) {
    display: none;
  }
  #terminal-close {
    width: 34px;
    height: 30px;
    font-size:var(--t2);
  }
  .crt-tb-title {
    font-size:var(--t1);
  }
  h1 {
    overflow-wrap: anywhere;
  }
  .box {
    padding: 18px 14px;
  }
  .geo-intro {
    gap: 18px;
  }
  .globewrap {
    min-width: 0;
  }
  #globe {
    width: 100%;
  }
  .analysis-lab .lab-grid,
  .analysis-lab .lab-comparison {
    min-width: 0;
  }
  .analysis-lab .lab-chart {
    overflow-x: auto;
    max-width: 100%;
  }
  .lab-header p {
    font-size:var(--t3);
  }
  .lab-metrics {
    gap: 10px;
  }
  .lab-metric {
    padding: 12px;
  }
  .lab-controls {
    flex-wrap: wrap;
  }
  .lab-controls label,
  .chaos-controls label {
    width: 100%;
  }
  .chaos-controls input,
  .hybrid-controls input {
    min-height: 44px;
  }
  .chaos-page button,
  .chaos-page select,
  .archive-tools button,
  .archive-tools a {
    min-height: 44px;
  }
  .chaos-page .chaos-note {
    padding: 12px;
    font-size:var(--t1);
  }
  .chaos-page .chaos-columns {
    gap: 22px;
  }
  .chaos-page .chaos-pair {
    gap: 16px;
  }
  .chaos-page #lorenz-error,
  .chaos-page #logistic-series,
  .chaos-page #storm-return,
  .chaos-page #hybrid-calendar {
    overflow-x: auto;
  }
  .chaos-page #lorenz-error svg,
  .chaos-page #logistic-series svg,
  .chaos-page #storm-return svg,
  .chaos-page #hybrid-calendar svg {
    min-width: 540px;
  }
  .chart-scroll #bifurcation-canvas {
    min-width: 760px;
  }
  .hybrid-controls label {
    width: 100%;
  }
  .hybrid-stage {
    margin-top: 4px !important;
  }
  .hybrid-scrub {
    gap: 10px;
  }
  .hybrid-scrub label {
    width: 100%;
    flex: auto;
  }
  .hybrid-layers label {
    min-height: 44px;
  }
  .chaos-table-wrap table {
    min-width: 650px;
  }
  #sb-topbar {
    flex-wrap: wrap;
    height: auto;
    min-height: 48px;
    padding: 8px;
  }
  #sandbox-window {
    top: 38px;
  }
  #sb-back,
  .sb-pane-btn {
    min-height: 40px;
  }
  .archive-tools span {
    font-size:var(--t1);
  }
  .pcap {
    flex-wrap: wrap;
  }
  .panel-outer {
    min-width: 0;
  }
  #panel {
    overflow-wrap: anywhere;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .rvwin {
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}

/* Institutum Lorentz opening and shared source treatment */
.lorentz-opening {
  position: relative;
  min-height: 580px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border: 1px solid var(--rule2);
  border-radius: 3px;
  margin-bottom: 24px;
  background: #070d0a;
  isolation: isolate;
}
.lorentz-machine {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
  z-index: -3;
}
.lorentz-opening-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 10, 7, 0.88), rgba(4, 10, 7, 0.3) 52%, transparent 84%),
    linear-gradient(0deg, rgba(4, 10, 7, 0.94), transparent 76%);
  z-index: -2;
}
.lorentz-opening-copy {
  padding: 46px;
  max-width: 700px;
  position: relative;
}
.lorentz-name {
  font: var(--t4)/1.4 var(--serif);
  color: var(--main);
  margin: 0 0 14px;
}
.chaos-page .lorentz-opening h1 {
  font: var(--t7)/1.08 var(--serif);
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  color: var(--ink);
  text-shadow: 0 3px 20px #0006;
}
.chaos-page .lorentz-opening .chaos-deck {
  font: var(--t4)/1.5 var(--serif) !important;
  color: var(--ink);
  margin: 0 0 14px;
  max-width: 500px;
}
.chaos-page .lorentz-opening-text {
  font-size:var(--t3);
  line-height: 1.85;
  max-width: 510px;
  color: var(--ink2);
  margin: 0 0 22px;
}
.lorentz-enter {
  display: inline-flex;
  gap: 24px;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid var(--main);
  font: var(--t2) var(--mono);
  color: var(--main);
  text-decoration: none;
}
.lorentz-image-note {
  position: absolute;
  right: 20px;
  bottom: 18px;
  font: var(--t1)/1.5 var(--mono);
  color: var(--ink2);
}
#chaos-references {
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 26px 28px;
  margin: 36px 0 20px;
  background: linear-gradient(120deg, #121c1f, #0d1518);
}
#chaos-references ol {
  margin: 0;
  padding-left: 20px;
  font-size:var(--t2);
  line-height: 1.8;
}
#chaos-references li {
  font-size:var(--t2);
  line-height: 1.8;
  margin: 0;
}
#chaos-references p {
  font-size: inherit;
  line-height: inherit;
}
#chaos-references a b {
  font-weight: 700;
}
@media (max-width: 700px) {
  .lorentz-opening {
    min-height: 600px;
    align-items: flex-end;
  }
  .lorentz-machine {
    object-position: 62% center;
  }
  .lorentz-opening-shade {
    background: linear-gradient(
      0deg,
      rgba(4, 10, 7, 0.98),
      rgba(4, 10, 7, 0.84) 43%,
      rgba(4, 10, 7, 0.05) 85%
    );
  }
  .lorentz-opening-copy {
    padding: 220px 22px 44px;
  }
  .lorentz-name {
    font-size:var(--t4);
  }
  .chaos-page .lorentz-opening .chaos-deck {
    font-size:var(--t4) !important;
  }
  .chaos-page .lorentz-opening-text {
    font-size:var(--t3);
  }
  .lorentz-image-note {
    font-size:var(--t1);
    left: 22px;
    right: auto;
    bottom: 12px;
  }
  #chaos-references {
    padding: 20px 18px;
  }
  .lorentz-opening h1 {
    font-size:var(--t7);
  }
}

/* Preserve the Record's archival hierarchy while tightening analytical panels. */
#chaos-page .chaos-intro {
  margin: 0 0 20px;
  border: 0;
  padding: 0;
  background: transparent;
  display: block;
  min-height: 0;
  isolation: auto;
  overflow: visible;
}
#chaos-page .chaos-intro .hero {
  height: 300px;
  margin-bottom: 0;
}
#chaos-page .chaos-intro .hero-img {
  object-position: center 43%;
}
#chaos-page .chaos-intro .hero-caption {
  color: var(--ink2);
}
#chaos-page .chaos-intro .herotext {
  padding: 26px 10px 18px;
}
#chaos-page .chaos-intro .hero-mark {
  display: block;
  margin: 0 auto 14px;
  width: 76px;
  height: 76px;
}
#chaos-page .chaos-intro .hero-word {
  color: var(--ink);
  font-size:var(--t5);
}
#chaos-page .chaos-intro h1 {
  font-size:var(--t5);
  font-family: var(--serif);
  line-height: 1.4;
  margin: 12px 0 8px;
  color: var(--ink);
  letter-spacing: 0;
}
#chaos-page .chaos-intro .chaos-deck {
  font: var(--t3)/1.85 var(--serif) !important;
  max-width: none;
  color: var(--ink2);
  margin: 0;
}
#chaos-page .chaos-intro .masthead {
  margin-bottom: 18px;
}
.chaos-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--rule2);
  flex-wrap: wrap;
  font: var(--t1) var(--mono);
  color: var(--ink3);
}
.chaos-toc a.active {
  background: rgba(253, 213, 99, 0.16);
  color: var(--select);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--select);
}
#chaos-page .chaos-section,
#chaos-page .chaos-explain,
#chaos-page .chaos-art,
#chaos-page .chaos-intro {
  transform-origin: center;
  will-change: transform;
}
#chaos-page.chaos-flat .chaos-section,
#chaos-page.chaos-flat .chaos-explain,
#chaos-page.chaos-flat .chaos-art,
#chaos-page.chaos-flat .chaos-intro {
  transform: none !important;
  opacity: 1 !important;
  will-change: auto;
}
.lorenz-viewbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 10px 0;
}
.lorenz-viewbar span {
  font: var(--t1) var(--mono);
  color: var(--ink2);
  margin-right: 8px;
}
.chaos-page button[aria-pressed='true'] {
  color: var(--select);
  border-color: var(--select);
  background: rgba(253, 213, 99, 0.09);
}
#bifurcation-canvas {
  cursor: ew-resize;
}
.chart-scroll #bifurcation-canvas {
  touch-action: pan-y;
}
.hybrid-lab .hybrid-lead {
  margin-bottom: 14px;
}
.hybrid-lab .hybrid-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 12px;
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}
.hybrid-lab .hybrid-controls label {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  font-size:var(--t1);
  align-items: center;
  width: auto;
}
.hybrid-lab .hybrid-controls input,
.hybrid-lab .hybrid-controls select {
  grid-column: 1/-1;
  width: 100%;
  max-width: none;
}
.hybrid-lab .hybrid-controls select {
  font-size:var(--t1);
}
.hybrid-compare-note {
  font: var(--t1)/1.7 var(--mono);
  color: var(--ink2);
  padding: 10px 0;
}
.hybrid-lab .hybrid-layout {
  grid-template-columns: minmax(0, 1.65fr) minmax(250px, 1fr);
  gap: 20px;
}
.hybrid-viewbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  font: var(--t1) var(--mono);
  color: var(--ink2);
}
.hybrid-viewbar > div {
  display: flex;
  gap: 4px;
}
.hybrid-viewbar button,
.lorenz-viewbar button {
  padding: 6px 10px;
  min-height: 32px;
}
.hybrid-lab .hybrid-inspector {
  padding-left: 20px;
}
.hybrid-event-nav {
  display: flex;
  gap: 6px;
  align-items: center;
}
.hybrid-event-nav select {
  min-width: 0;
  flex: 1;
}
.hybrid-event-nav button {
  padding: 8px;
  min-width: 34px;
}
.hybrid-inspector dl {
  font-size:var(--t2);
  margin: 0;
}
.hybrid-inspector dl > div {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 10px;
  border-bottom: 1px solid var(--rule);
  padding: 9px 0;
}
.hybrid-inspector dt {
  color: var(--ink3);
}
.hybrid-inspector dd {
  margin: 0;
  color: var(--ink);
  font: var(--t1)/1.7 var(--mono);
  overflow-wrap: anywhere;
}
.hybrid-lab #hybrid-measures {
  font: var(--t1)/1.7 var(--mono);
  background: none;
  padding: 10px 0;
  color: var(--ink2);
}
.hybrid-chain {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 10px 0;
  font: var(--t1) var(--mono);
  color: var(--main);
}
.hybrid-lab #hybrid-takeaway {
  font-size:var(--t2);
  line-height: 1.7;
  margin: 12px 0 0;
}
.hybrid-lab .hybrid-layers {
  padding: 7px 0;
  margin: 0;
  font-size:var(--t1);
}
.hybrid-lab .hybrid-scrub {
  padding: 10px 0;
  margin: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.hybrid-diagnostics {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 1fr;
  gap: 16px;
  margin-top: 14px;
}
.hybrid-diagnostics > figure {
  min-width: 0;
  margin: 0;
}
.hybrid-diagnostics h3 {
  font-size:var(--t4) !important;
  margin: 6px 0 !important;
  color: var(--main) !important;
}
.hybrid-diagnostics figcaption {
  font-size:var(--t1);
  line-height: 1.7;
}
.hybrid-diagnostics svg {
  min-width: 0 !important;
}
.hybrid-crossing-hit {
  cursor: pointer;
}
.hybrid-crossing-hit:focus {
  stroke: var(--select);
  outline: none;
}
.hybrid-lab .hybrid-stage {
  margin: 0;
}
.hybrid-lab details {
  font-size:var(--t2);
}
.hybrid-lab details p {
  font-size:var(--t2);
}
.hybrid-diagnostics > figure > div {
  overflow-x: auto;
}
@media (max-width: 1100px) {
  .hybrid-lab .hybrid-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  }
  .hybrid-lab .hybrid-controls button {
    grid-row: 1/3;
    grid-column: 3;
  }
  .hybrid-diagnostics {
    grid-template-columns: 1fr 1fr;
  }
  .hybrid-diagnostics figure:last-child {
    grid-column: 1/-1;
    max-width: 550px;
  }
  .hybrid-diagnostics svg {
    min-width: 420px !important;
  }
}
@media (max-width: 800px) {
  .hybrid-lab .hybrid-layout {
    grid-template-columns: 1fr;
  }
  .hybrid-lab .hybrid-inspector {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--rule);
    padding-top: 14px;
  }
  .hybrid-inspector dl > div {
    grid-template-columns: 1fr 1fr;
  }
  .hybrid-viewbar button,
  .lorenz-viewbar button {
    min-height: 44px;
  }
}
@media (max-width: 600px) {
  #chaos-page .chaos-intro .hero {
    height: 210px;
  }
  #chaos-page .chaos-intro .hero-word {
    font-size:var(--t5);
  }
  #chaos-page .chaos-intro .hero-sub {
    font-size:var(--t1);
  }
  #chaos-page .chaos-intro .masthead {
    font-size:var(--t1);
    letter-spacing: 0.1em;
  }
  #chaos-page .chaos-intro .masthead .mh-mid {
    display: none;
  }
  .hybrid-lab .hybrid-controls {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .hybrid-lab .hybrid-controls button {
    grid-row: auto;
    grid-column: 1/-1;
    justify-self: start;
  }
  .hybrid-lab .hybrid-controls select {
    font-size:var(--t2);
    max-width: 100%;
  }
  .hybrid-diagnostics {
    grid-template-columns: 1fr;
  }
  .hybrid-diagnostics figure:last-child {
    grid-column: auto;
  }
  .hybrid-diagnostics svg {
    min-width: 420px !important;
  }
  .hybrid-lab .hybrid-scrub label {
    font-size:var(--t1);
  }
  .hybrid-lab .hybrid-stage figcaption {
    font-size:var(--t1);
  }
  .hybrid-viewbar {
    flex-wrap: wrap;
  }
  .chaos-actions {
    font-size:var(--t1);
  }
  .hybrid-lab .hybrid-controls input {
    min-height: 38px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #chaos-page .chaos-section,
  #chaos-page .chaos-explain,
  #chaos-page .chaos-art,
  #chaos-page .chaos-intro {
    transform: none !important;
    opacity: 1 !important;
    will-change: auto;
  }
}

#chaos-page .chaos-intro h1 {
  text-align: center;
  width: 100%;
  margin: 12px auto 8px;
}
#chaos-page .chaos-intro .herotext {
  text-align: center;
}
#chaos-page .chaos-intro .masthead {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
#chaos-page .chaos-intro .masthead > span:nth-child(2) {
  justify-self: center;
  text-align: center;
}
#chaos-page .chaos-intro .masthead > span:last-child {
  justify-self: end;
  text-align: right;
}
.hero-badge,
.site-mark,
.seal-mark {
  object-fit: contain;
}
@media (max-width: 600px) {
  #chaos-page .chaos-intro .masthead {
    grid-template-columns: 1fr 1fr;
  }
  #chaos-page .chaos-intro h1 {
    font-size:var(--t4);
  }
}

/* Shared navigation and page mode controls */
#toc .toc-inner,
.chaos-toc .toc-inner {
  justify-content: center;
  flex-wrap: wrap;
  overflow: visible;
  margin-inline: auto;
  padding-inline: 0;
  width: 100%;
  box-sizing: border-box;
}
#toc,
.chaos-toc {
  padding-inline: 16px;
  box-sizing: border-box;
}
.page-mode-tools {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 18px 0 26px;
  padding: 0;
  border: 0;
}
#record-motion,
#chaos-motion {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: var(--t2) var(--mono);
  line-height: 1.25;
  min-height: 40px;
  min-width: 180px;
  padding: 10px 14px;
  border: 1px solid var(--rule2);
  border-radius: 2px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  margin: 0;
}
#record-motion:hover,
#chaos-motion:hover {
  border-color: var(--select);
  color: var(--select);
}
.record-flat .wrap .rvwin {
  transform: none !important;
  opacity: 1 !important;
  will-change: auto;
}
@media (max-width: 700px) {
  #toc .toc-inner,
  .chaos-toc .toc-inner {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: safe center;
    mask-image: none;
    -webkit-mask-image: none;
    padding-inline: 4px;
  }
  #toc .toc-inner a,
  .chaos-toc .toc-inner a {
    font-size:var(--t1);
    padding: 7px 9px;
    min-height: 40px;
  }
  #record-motion,
  #chaos-motion {
    min-height: 44px;
  }
  #chaos-page .chaos-intro .hero-word {
    font-size:var(--t5);
  }
}

/* Revision 10: independent ACD terminal and shared metadata controls. */
#chaos-page {
  padding-top: 26px;
}
.topline {
  justify-content: space-between;
  align-items: center;
  gap: 8px 16px;
}
.topline .stamp {
  font: inherit;
  letter-spacing: inherit;
  line-height: 1.6;
  box-sizing: border-box;
  max-width: 100%;
}
#record-motion,
#chaos-motion {
  font: var(--t1) var(--mono);
  letter-spacing: 0.1em;
  line-height: 1.6;
  min-width: 0;
  min-height: 0;
  padding: 2px 9px;
  border-radius: 6px;
  margin-left: auto;
  flex-shrink: 0;
}
#chaos-page .topline {
  font: var(--t1) var(--mono);
  letter-spacing: 0.1em;
  color: var(--ink3);
  margin: 0 0 8px;
}
@media (max-width: 800px) {
  #chaos-page {
    padding-top: 26px;
  }
}
@media (max-width: 600px) {
  #chaos-page {
    padding-top: 14px;
  }
  .topline {
    gap: 8px;
  }
  .topline .stamp {
    font-size:var(--t1);
  }
  #record-motion,
  #chaos-motion {
    font-size:var(--t1);
  }
}
@media (pointer: coarse) {
  #record-motion,
  #chaos-motion {
    min-height: 44px;
  }
}

/* Both dossier openings share one typography scale. */
.wrap > .dossier-title,
#chaos-page .chaos-intro > .dossier-title {
  font-family: var(--serif);
  font-size: var(--t7);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 12px 0 8px;
  color: var(--ink);
  text-shadow: none;
}
.wrap > .dossier-title .h1-acd,
#chaos-page .chaos-intro > .dossier-title .h1-acd {
  font-family: var(--mono);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: 0.1em;
}
.wrap > .dossier-title i,
#chaos-page .chaos-intro > .dossier-title i {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}
.wrap > .herotext .hero-word,
#chaos-page .chaos-intro .hero-word {
  font: 600 var(--t5)/1.35 var(--serif);
  letter-spacing: 0.1em;
}
.wrap > .herotext .hero-sub,
#chaos-page .chaos-intro .hero-sub {
  font: var(--t1)/1.6 var(--mono);
  letter-spacing: 0.1em;
}
.wrap > .masthead,
#chaos-page .chaos-intro .masthead {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  font-size:var(--t2);
  letter-spacing: 0.16em;
}
.wrap > .masthead > span:nth-child(2),
#chaos-page .chaos-intro .masthead > span:nth-child(2) {
  text-align: center;
  justify-self: center;
}
.wrap > .masthead > span:last-child,
#chaos-page .chaos-intro .masthead > span:last-child {
  text-align: right;
  justify-self: end;
}
.masthead-game {
  white-space: nowrap;
}
@media (max-width: 700px) {
  .wrap > .masthead,
  #chaos-page .chaos-intro .masthead {
    grid-template-columns: 1fr auto;
    font-size:var(--t1);
    letter-spacing: 0.1em;
  }
  .wrap > .masthead .mh-mid,
  #chaos-page .chaos-intro .masthead .mh-mid {
    display: none;
  }
}
@media (max-width: 600px) {
  .wrap > .herotext .hero-word,
  #chaos-page .chaos-intro .hero-word {
    font-size:var(--t5);
  }
}

#chaos-page .chaos-intro > .dossier-title {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

/* Phone reading layout: constrain the page; scroll wide data within its figure. */
.phone-reading-label {
  display: none;
}
.phone-recommendation {
  font: var(--t3)/1.75 var(--serif);
  color: var(--ink2);
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--rule2);
}
@media (max-width: 600px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }
  .wrap,
  #chaos-page {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .wrap * {
    box-sizing: border-box;
  }
  .wrap > .box,
  .wrap > .side,
  .wrap > .obs-detail,
  .wrap > .analysis-lab,
  .wrap > .panelgrid,
  .wrap > .secondrow {
    min-width: 0;
    max-width: 100%;
  }
  .globewrap,
  .geo-intro,
  .twocard,
  .panelgrid,
  .secondrow,
  .stackgrid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .globewrap > *,
  .geo-intro > *,
  .op-grid > *,
  .lab-grid > * {
    min-width: 0;
    max-width: 100%;
  }
  .table-scroll,
  .chart-scroll,
  .lab-chart,
  .lab-table-wrap {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
  .metaline,
  .pcap,
  .hero-sub,
  .figcap,
  #panel,
  .siterow {
    overflow-wrap: anywhere;
  }
  .wrap .toc {
    margin-inline: -14px;
  }
  .wrap .toc-inner {
    max-width: 100%;
  }
  #time-rules .tr-fig {
    float: none;
    width: min(220px, 100%);
    margin: 0 auto 18px;
  }
  .chart.chart-full,
  .chart.chart-lg {
    height: auto;
    max-height: none;
    overflow: visible;
    cursor: auto !important;
    touch-action: pan-y;
    padding: 8px;
  }
  #wrapHolder,
  #wrap {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  #fig1col .zoombar #zin,
  #fig1col .zoombar #zout,
  #fig1col .zoombar #zpct,
  #fig1col .zoombar #zfit,
  #fig1col .zoombar #zexpand {
    display: none;
  }
  .phone-era-axis {
    font: var(--t1) var(--mono);
    color: var(--ink2);
  }
  .phone-events {
    display: grid;
    gap: 4px;
  }
  .phone-event {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 10px 0 0;
    text-align: left;
    border: 0;
    border-top: 1px solid var(--rule);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    touch-action: pan-y;
  }
  .phone-event-title {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    font: var(--t2)/1.5 var(--mono);
  }
  .phone-event-title b {
    font-weight: 400;
    color: var(--ink2);
  }
  .phone-event[aria-pressed='true'] {
    color: var(--select);
    border-top-color: var(--select);
  }
  body.reading-mode .box p,
  body.reading-mode .refs {
    font-size:var(--t4);
    line-height: 1.85;
  }
  body.reading-mode .rvwin,
  body.reading-mode .rv,
  body.reading-mode .tilt,
  body.reading-mode #chaos-page .chaos-section,
  body.reading-mode #chaos-page .chaos-explain,
  body.reading-mode #chaos-page .chaos-art,
  body.reading-mode #chaos-page .chaos-intro {
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
    will-change: auto;
  }
  #record-motion,
  #chaos-motion {
    display: none;
  }
  .phone-reading-label {
    display: inline;
    font: var(--t1)/1.6 var(--mono);
    color: var(--ink3);
    margin-left: auto;
  }
  .controlrow,
  .zoombar,
  .nav {
    flex-wrap: wrap;
  }
  .nav button {
    min-width: 0;
    font-size:var(--t2);
  }
}

.phone-timeline-help {
  display: none;
}
@media (max-width: 600px) {
  .desktop-timeline-help {
    display: none;
  }
  .phone-timeline-help {
    display: block;
  }
}

#site-drawer {
  --menu-yellow: #e4cc73;
}
#site-drawer button:not(#drawer-close) {
  position: relative;
  isolation: isolate;
  color: var(--ink2);
  border: 1px solid transparent;
  background: none;
}
#site-drawer button:not(#drawer-close).active {
  color: var(--menu-yellow);
  background: #e4cc7310;
  border-color: #e4cc7340;
}
.menu-words {
  position: relative;
  background: linear-gradient(90deg, var(--menu-yellow) 50%, var(--ink2) 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  transition: background-position 0.65s ease;
}
#site-drawer button:hover .menu-words,
#site-drawer button:focus-visible .menu-words,
#site-drawer button.active .menu-words {
  background-position: 0 0;
}
.menu-border {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  pointer-events: none;
  overflow: visible;
}
@media (prefers-reduced-motion: reduce) {
  .menu-words,
  .menu-border rect {
    transition: none;
  }
}


/* =====================================================================
   REVISION — October 2026
   Yellow hover language for the terminal chrome, a softer menu, the merged
   opening section with its orientation file, and the scroll motion that
   replaced the 3D tilt. Kept together so it is easy to find and adjust.
   ===================================================================== */
:root {
  --menu-yellow: #e4cc73;
}

/* --- title bar: every control answers in yellow --- */
.crt-tb-btn:hover,
.crt-tb-x:hover {
  border-color: var(--menu-yellow);
  color: var(--menu-yellow);
}
#menu-toggle {
  transition: color 0.2s;
}
#menu-toggle:hover,
#menu-toggle:focus-visible,
#menu-toggle[aria-expanded='true'] {
  color: var(--menu-yellow);
}

/* --- menu drawer: the open page is yellow; hover keeps its trace, with soft corners --- */
#site-drawer button:not(#drawer-close) {
  border-radius: 10px;
}
#site-drawer button:not(#drawer-close).active {
  color: var(--menu-yellow);
  background: #e4cc7314;
  border-color: var(--menu-yellow);
}
#site-drawer button:not(#drawer-close):hover {
  border-color: transparent; /* the animated trace draws the outline instead */
  background: #e4cc730a;
  color: var(--ink2);
}
#site-drawer button:not(#drawer-close).active:hover {
  border-color: var(--menu-yellow);
}
.menu-border rect {
  fill: none;
  stroke: var(--menu-yellow);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.65s ease;
}
#site-drawer button:hover .menu-border rect,
#site-drawer button:focus-visible .menu-border rect {
  stroke-dashoffset: 0;
}
#site-drawer #drawer-close:hover {
  border-color: var(--menu-yellow);
  color: var(--menu-yellow);
}

/* --- opening note: one section, with the fine print and an orientation file inside --- */
.op-fine {
  margin-top: 18px !important;
  padding-top: 12px;
  border-top: 1px dashed var(--rule2);
  font-family: var(--mono);
  font-size:var(--t1) !important;
  letter-spacing: 0.04em;
  color: var(--ink3);
}
.op-fine b {
  color: var(--redd);
  font-weight: 600;
}
.orientation {
  margin-top: 18px;
  border: 1px solid var(--rule2);
  border-radius: 10px;
  background: var(--sunk);
}
.orientation summary {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
  font-family: var(--mono);
  font-size:var(--t1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--menu-yellow);
}
.orientation summary::-webkit-details-marker {
  display: none;
}
.orientation summary::before {
  content: '▸';
  transition: transform 0.2s;
}
.orientation[open] summary::before {
  transform: rotate(90deg);
}
.orientation summary span {
  font-family: var(--serif);
  font-style: italic;
  font-size:var(--t2);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink2);
}
.orientation summary:hover span {
  color: var(--ink);
}
.orientation-body {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 20px 28px;
  padding: 4px 16px 18px;
  border-top: 1px dashed var(--rule2);
}
@media (max-width: 760px) {
  .orientation-body {
    grid-template-columns: 1fr;
  }
}
.orientation-body h3 {
  margin: 14px 0 6px;
  font: 700 var(--t1) var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--main);
}
.orientation-body p,
.orientation-body li {
  font-size:var(--t2);
  line-height: 1.65;
  color: var(--ink);
}
.orientation-body ol,
.orientation-body ul {
  margin: 0;
  padding-left: 18px;
}
.orientation-body li {
  margin-bottom: 4px;
}
.orientation-body a {
  color: var(--menu-yellow);
}
.orientation-body dfn {
  font-style: normal;
  font-weight: 700;
  color: var(--secondary);
}

/* --- chart captions: one plain sentence, then the caution in a quieter voice --- */
.model-description .mind {
  display: block;
  margin-top: 2px;
  color: var(--ink3);
}

/* --- scroll motion (replaces the 3D tilt) ---
   The script moves sections with transform and opacity only. Section rules draw
   themselves as the section arrives, and the wide plates drift slightly inside
   their frames. Nothing moves once a section has arrived. */
.box.rvwin > h2::after,
.chaos-section > h2::after,
.ley-section h2::after {
  transform: scaleX(var(--arrive, 1));
  transform-origin: left center;
}
.plate img {
  transform: translate3d(0, var(--drift, 0px), 0) scale(1.07);
}
@media (prefers-reduced-motion: reduce) {
  .plate img {
    transform: none;
  }
}

/* --- Open Cases and the last page --- */
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.case-card {
  border: 1px solid var(--rule2);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--sunk);
}
.case-no {
  font: 700 var(--t1) var(--mono);
  letter-spacing: 0.1em;
  color: var(--menu-yellow);
  margin-bottom: 4px;
}
#case-form {
  display: grid;
  gap: 8px;
  max-width: 760px;
}
#case-form label {
  font: var(--t1) var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink3);
}
#case-form label span {
  text-transform: none;
  letter-spacing: 0;
}
.case-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1.4fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px 12px;
}
#case-form input,
#case-form select,
#case-form textarea {
  width: 100%;
  font: var(--t3) var(--sans);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule2);
  border-radius: 8px;
  padding: 9px 11px;
}
#case-form textarea {
  resize: vertical;
  line-height: 1.5;
}
#case-form :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--menu-yellow);
  outline-offset: 1px;
}
.case-trap {
  position: absolute;
  left: -9999px;
}
.case-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
#case-send:hover:not(:disabled),
#record-return:hover {
  border-color: var(--menu-yellow);
  color: var(--menu-yellow);
}
#case-status {
  font: var(--t2) var(--mono);
  color: var(--secondary);
}
.record-end {
  margin: 46px auto 10px;
  max-width: 620px;
  text-align: center;
}
.record-end-tag {
  font: var(--t1) var(--mono);
  letter-spacing: 0.16em;
  color: var(--main);
}
.record-end p {
  margin: 14px 0 20px;
  font-family: var(--serif);
  font-style: italic;
  font-size:var(--t4);
  line-height: 1.6;
  color: var(--ink2);
}
@media (max-width: 760px) {
  .case-grid,
  .case-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =====================================================================
   REVISION 2 — the Record reads timeline-first
   ===================================================================== */

/* --- one colour job each: yellow = you can act on it, mint = data, orange = headings --- */
.wrap a:not(.toc a),
#chaos-page a:not(.toc a),
#leyline-page a:not(.toc a) {
  color: var(--menu-yellow);
}
button:hover:not(:disabled),
.zbtn:hover:not([disabled]) {
  border-color: var(--menu-yellow);
  color: var(--menu-yellow);
}
#zclear:not([disabled]) {
  border-color: #e4cc7380;
  color: var(--menu-yellow);
}
:is(a, button, select, input, textarea, summary):focus-visible {
  outline: 2px solid var(--menu-yellow);
  outline-offset: 2px;
}
/* --- three voices: serif for titles and quotations, sans for reading, mono for labels and data --- */
.model-description,
.phone-recommendation,
.figcap {
  font-family: var(--sans);
  font-size:var(--t2);
  line-height: 1.6;
}

/* --- timeline and its record, side by side --- */
.obs-intro {
  margin-bottom: 14px !important;
}
.obs-pair {
  display: grid;
  gap: 16px;
  align-items: start;
}
.obs-pair .obs-detail {
  margin: 0;
}
@media (min-width: 1180px) {
  .obs-pair {
    grid-template-columns: minmax(0, 1.5fr) minmax(360px, 1fr);
  }
  /* the record scrolls inside its own frame so the timeline never leaves the screen */
  .obs-pair .panel-outer {
    max-height: 640px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 6px;
    scrollbar-width: thin;
  }
  .obs-pair .panel-hint {
    display: none;
  }
  .obs-pair .chart-full {
    height: 400px;
  }
}
.chapter-entry {
  display: flex;
  align-items: center;
  gap: 8px 12px;
  flex-wrap: wrap;
  margin: 14px 0 10px;
}
.chapter-entry label,
.ledger-label,
.cast-label {
  font: var(--t1) var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink3);
}
.chapter-entry select {
  max-width: min(100%, 420px);
  font: var(--t2) var(--sans);
  color: var(--ink);
  background: var(--sunk);
  border: 1px solid var(--rule2);
  border-radius: 8px;
  padding: 7px 10px;
}
#chapter-answer {
  flex-basis: 100%;
  margin: 0 !important;
  color: var(--secondary);
  font-size:var(--t2) !important;
}
#chapter-answer:empty {
  display: none;
}

/* --- the ledger: eleven marks that fill in as records are read --- */
.ledger {
  display: flex;
  align-items: center;
  gap: 8px 14px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.ledger-label b {
  color: var(--ink);
  margin-left: 6px;
}
#ledger-marks {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.ledger-mark {
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  border: 1px dashed var(--rule2);
  background: none;
  color: var(--ink3);
  font: var(--t1) var(--mono);
  transition:
    background 0.4s,
    color 0.4s,
    border-color 0.4s;
}
.ledger-mark.read {
  border: 1px solid var(--fig);
  background: rgba(87, 224, 158, 0.14);
  color: var(--fig);
}
.ledger.complete .ledger-label b {
  color: var(--menu-yellow);
}

/* --- key figures on a detail record --- */
.cast {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.cast-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 11px 3px 3px;
  border: 1px solid var(--rule2);
  border-radius: 999px;
  font-size:var(--t2);
  color: var(--ink);
}
.cast-chip img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
}
.cast-chip:not(:has(img)) {
  padding-left: 11px;
}

/* --- exercises and provenance --- */
.exercise-tag {
  display: inline-block;
  margin-right: 6px;
  padding: 0 7px;
  border: 1px solid var(--rule2);
  border-radius: 999px;
  font: var(--t1)/1.8 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink3);
  vertical-align: 1px;
}
.lab-caution,
.origin-note {
  max-width: 76ch;
  margin: 10px 0 14px !important;
  padding-left: 12px;
  border-left: 2px solid var(--menu-yellow);
  font-size:var(--t2) !important;
  line-height: 1.6;
  color: var(--ink2);
}
.origin-note {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: left;
}

/* --- phones: long reference blocks start folded --- */
.fold {
  position: relative;
  max-height: 240px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 60%, transparent);
  mask-image: linear-gradient(#000 60%, transparent);
}
.fold-open {
  display: block;
  width: 100%;
  margin: 6px 0 22px;
  padding: 12px;
  border: 1px dashed var(--rule2);
  border-radius: 10px;
  background: none;
  color: var(--menu-yellow);
  font: var(--t2) var(--mono);
  letter-spacing: 0.1em;
}

/* =====================================================================
   ACD WATCH — the private monitoring terminal (js/archive/watch.js)
   Dense by design, in the manner of a trading terminal: small mono type,
   tight panels, amber headings, mint data, yellow for whatever is selected.
   ===================================================================== */
#sb-watch {
  display: none;
}
#sandbox-window[data-mode='watch'] #sb-watch {
  flex: 1;
  min-height: 0;
  display: grid;
  gap: 5px;
  padding: 6px;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 0.95fr) auto;
  grid-template-areas:
    'tape tape tape tape'
    'helix helix board board'
    'helix helix trace dial'
    'log bars portrait stats'
    'cmd cmd cmd cmd';
  background: #050908;
  font-family: var(--mono);
}
#sandbox-window:fullscreen {
  top: 0;
}
#sb-topbar button:hover {
  border-color: var(--menu-yellow);
  color: var(--menu-yellow);
}

/* ticker tape */
.watch-tape {
  grid-area: tape;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: #0b0f0c;
  white-space: nowrap;
}
.watch-tape-run {
  display: inline-block;
  padding: 4px 0;
  animation: watch-tape 70s linear infinite;
}
.watch-tape span {
  margin-right: 26px;
  font-size:var(--t1);
  letter-spacing: 0.04em;
  color: var(--ink2);
}
.watch-tape b {
  color: var(--menu-yellow);
  font-weight: 600;
  margin-right: 4px;
}
.watch-tape .down,
.watch-board .down {
  color: var(--main);
}
.watch-tape .up,
.watch-board .up {
  color: var(--fig);
}
@keyframes watch-tape {
  to {
    transform: translateX(-50%);
  }
}

/* panels */
.watch-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  margin: 0;
  border: 1px solid var(--rule);
  background: #080d0b;
  overflow: hidden;
}
.watch-panel figcaption {
  flex-shrink: 0;
  padding: 3px 8px;
  background: #1a120a;
  border-bottom: 1px solid #3a2410;
  font-size:var(--t1);
  letter-spacing: 0.14em;
  color: var(--main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.watch-panel figcaption b {
  margin-left: 8px;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--ink3);
}
.watch-panel canvas {
  flex: 1;
  width: 100%;
  min-height: 0;
  display: block;
}
.watch-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  scrollbar-width: thin;
}

/* storm board */
.watch-board {
  width: 100%;
  border-collapse: collapse;
  font: var(--t1)/1.25 var(--mono);
  font-variant-numeric: tabular-nums;
}
.watch-board thead tr {
  background: none;
}
.watch-board th {
  position: sticky;
  top: 0;
  padding: 3px 7px;
  border-bottom: 1px solid var(--rule2);
  background: #080d0b;
  font-size:var(--t1);
  letter-spacing: 0.08em;
  color: var(--ink3);
  text-align: left;
}
.watch-board td {
  padding: 1.5px 7px;
  border-bottom: 1px solid rgba(231, 245, 236, 0.05);
  background: none !important;
  font-size:var(--t1);
  color: var(--ink2);
  white-space: nowrap;
  vertical-align: baseline;
}
.watch-board td:last-child {
  color: var(--ink3);
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 0;
  width: 40%;
}
.watch-board tbody tr {
  cursor: pointer;
}
.watch-board tbody tr:hover td {
  color: var(--ink);
}
.watch-board tr.on td {
  background: rgba(253, 213, 99, 0.13) !important;
  color: var(--select);
}
.watch-board tr.on td:first-child {
  box-shadow: inset 2px 0 0 var(--select);
}

/* statistics */
.watch-stats {
  flex: 1;
  min-height: 0;
  overflow: auto;
  margin: 0;
  padding: 4px 8px;
  display: grid;
  align-content: start;
  font-size:var(--t1);
  font-variant-numeric: tabular-nums;
  scrollbar-width: thin;
}
.watch-stats div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 0;
  border-bottom: 1px dotted rgba(231, 245, 236, 0.09);
}
.watch-stats dt {
  color: var(--ink3);
  letter-spacing: 0.06em;
}
.watch-stats dd {
  margin: 0;
  color: var(--fig);
  white-space: nowrap;
}
#watch-mode {
  color: var(--select);
}

/* field log with the unit's emblem */
#watch-log {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 6px 76px 6px 8px;
  overflow: hidden;
  white-space: pre-wrap;
  font: var(--t1)/1.5 var(--mono);
  color: var(--ink2);
}
.watch-unit {
  position: absolute;
  top: 26px;
  right: 6px;
  width: 64px;
  text-align: center;
  font-size:var(--t1);
  line-height: 1.5;
  letter-spacing: 0.12em;
  color: var(--ink3);
}
.watch-unit .sb-emblem {
  width: 60px;
  height: 60px;
  display: block;
  margin: 0 auto 2px;
  color: var(--ink2);
  transition: color 0.4s;
}
.watch-unit.busy .sb-emblem {
  color: var(--gold);
}
.watch-unit.busy .sb-emblem .scan {
  animation-duration: 1.1s;
}

/* command line */
.watch-cmd {
  grid-area: cmd;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px 8px;
  border: 1px solid #3a2410;
  background: #1a120a;
  font-size:var(--t1);
  color: var(--main);
}
#watch-input {
  width: 230px;
  border: 0;
  outline: 0;
  background: none;
  color: var(--select);
  font: var(--t1) var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#watch-input::placeholder {
  color: #7a5a35;
}
.watch-keys {
  margin-left: auto;
  color: var(--ink3);
  font-size:var(--t1);
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.watch-keys kbd {
  margin: 0 3px 0 10px;
  padding: 0 5px;
  border: 1px solid var(--rule2);
  border-radius: 3px;
  font: inherit;
  color: var(--menu-yellow);
}
#watch-clock {
  color: var(--menu-yellow);
  font-variant-numeric: tabular-nums;
}

/* the 3D helix */
.watch-thread canvas {
  cursor: grab;
  touch-action: none;
}
.watch-thread canvas:active {
  cursor: grabbing;
}
.thread-wait {
  position: absolute;
  inset: auto 0 10px;
  margin: 0;
  text-align: center;
  font-size:var(--t1);
  letter-spacing: 0.16em;
  color: var(--ink3);
  pointer-events: none;
}
.thread-card {
  position: absolute;
  top: 22px;
  left: 0;
  width: 240px;
  padding: 7px 10px 8px;
  border: 1px solid var(--menu-yellow);
  background: rgba(5, 9, 8, 0.88);
  font: var(--t1)/1.45 var(--mono);
  color: var(--ink2);
  pointer-events: none;
  transition: transform 0.3s ease-out;
}
.thread-card b {
  color: var(--menu-yellow);
  letter-spacing: 0.12em;
}
.thread-card span {
  float: right;
  color: var(--ink3);
}
.thread-card i {
  display: block;
  margin: 2px 0;
  font-style: normal;
  font-size:var(--t2);
}
.thread-card i.back {
  color: var(--main);
}
.thread-card i.forward {
  color: var(--fig);
}
.thread-card u {
  display: block;
  text-decoration: none;
  font-size:var(--t1);
  color: var(--ink3);
}
.thread-card em {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 3px;
  font-style: normal;
  font-family: var(--sans);
  font-size:var(--t1);
  color: var(--ink2);
}

@media (max-width: 1000px) {
  #sandbox-window[data-mode='watch'] #sb-watch {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 440px 300px 260px 250px 240px 230px auto 240px auto;
    grid-template-areas: 'tape' 'helix' 'board' 'trace' 'dial' 'bars' 'portrait' 'stats' 'log' 'cmd';
    overflow-y: auto;
  }
  .watch-keys,
  .sb-toplong {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .watch-tape-run {
    animation: none;
  }
}

/* =====================================================================
   TYPE — three faces, one job each (this block has the last word)
     serif  : titles only (page titles and section headings)
     sans   : everything meant to be read, and every control
     mono   : small tracked labels and data (numbers, dates, tables, readouts)
   Before this, a single section could mix two serifs, two monospace faces
   and the sans. If a new element looks out of place, give it one of the
   three jobs here rather than a font of its own.
   ===================================================================== */
h1,
h2,
h3,
.hero-word,
.fighead,
.lorentz-name {
  font-family: var(--serif) !important;
}
/* reading text and controls */
.hero-tag,
.plate .pt,
.cell-when,
.syn-q,
.model-description,
.chaos-art figcaption,
.chaos-deck,
.phone-recommendation,
.orientation summary span,
.record-end p,
.research-route b,
.ley-researcher b,
.metaline,
.rulebar,
.legend,
.ley-status,
.ley-result,
.ley-keyboard,
.chaos-page figcaption,
.ley-illustration figcaption,
.ley-art-grid figcaption,
.chaos-note,
.chaos-index,
.chaos-page summary,
.lab-model summary,
.lab-sources summary,
.research-references summary,
.lorentz-image-note,
.hybrid-compare-note,
.hybrid-chain,
.lab-legend,
#case-status,
.op-fine,
.ley-controls label,
.chaos-controls label,
.hybrid-controls label,
.hybrid-scrub label,
.hybrid-layers,
.recon-sliders label,
.recon-layers label,
.recon-inspector > label,
.lab-controls label,
.ley-inspector dt,
.recon-inspector dt,
.hybrid-inspector dt,
:is(.wrap, .chaos-page, #site-drawer) :is(button, select, input, textarea) {
  font-family: var(--sans) !important;
  letter-spacing: 0;
}
/* data */
.lab-metric strong,
.accounting-ledger strong,
.ley-inspector dd,
.recon-inspector dd,
.hybrid-inspector dd,
.chaos-page output,
.lab-planner output {
  font-family: var(--mono) !important;
}
.chaos-page figcaption,
.ley-keyboard,
.chaos-note {
  font-size:var(--t2);
  line-height: 1.55;
}


/* =====================================================================
   STAGES — one idea per screen.
   A stage is a figure with its short brief beside it, sized to fit the
   window, so nothing has to be scrolled past to be read. On narrow
   screens the brief goes on top and the figure follows.
   Used by the Bounded Century page and reused by Chaos and Leyline.
   ===================================================================== */
.stage {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.8fr);
  gap: 36px;
  align-items: center;
  min-height: calc(100vh - 120px);
  min-height: calc(100svh - 120px);
  padding: 14px 0;
  border-bottom: 1px solid var(--rule2);
  scroll-margin-top: 96px;
}
.stage-figure {
  margin: 0 !important;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.stage-figure svg {
  width: 100%;
  height: auto;
  max-height: calc(100vh - 190px);
  max-height: calc(100svh - 190px);
}
.stage-figure.watch-panel {
  height: calc(100vh - 180px);
  height: calc(100svh - 180px);
  min-height: 380px;
  justify-content: stretch;
}
.stage-figure.watch-panel canvas {
  border: 0;
  border-radius: 0;
  background: none;
  height: 100%;
}
.stage-brief {
  min-width: 0;
}
.stage-step {
  display: block;
  font: var(--t1) var(--mono);
  letter-spacing: 0.16em;
  color: var(--ink3);
}
.stage-brief h2 {
  margin: 8px 0 12px;
  font-size:var(--t6) !important;
}
.stage-brief .stage-lede {
  font-size:var(--t4);
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 14px;
}
.stage-brief ul {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.stage-brief li {
  position: relative;
  padding: 0 0 9px 18px;
  font-size:var(--t3);
  line-height: 1.6;
  color: var(--ink2);
}
.stage-brief li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 7px;
  height: 1px;
  background: var(--main);
}
.stage-brief li b {
  color: var(--ink);
  font-weight: 600;
}
.stage-take {
  margin: 0;
  padding: 12px 14px;
  border-left: 2px solid var(--fig);
  background: var(--card);
  font-size:var(--t3) !important;
  line-height: 1.6 !important;
  color: var(--ink);
}
.stage-take b {
  display: block;
  margin-bottom: 3px;
  font: 600 var(--t1) var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fig);
}
.stage-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 12px;
  font: var(--t1) var(--mono);
  color: var(--ink3);
}
.stage-brief .chaos-actions {
  margin-top: 16px;
}

/* ---- the Bounded Century page ---- */
#theory-page[hidden] {
  display: none !important;
}
.theory-toc {
  position: sticky;
  top: 38px;
  margin: 0 -32px 26px;
  padding: 8px 20px;
  z-index: 40;
}
.theory-toc .toc-inner {
  justify-content: flex-start;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
}
.theory-toc a {
  min-height: 44px;
  display: flex;
  align-items: center;
}
.theory-intro {
  padding-bottom: 30px;
  border-bottom: 1px solid var(--rule2);
  scroll-margin-top: 96px;
}
.thesis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 26px 0 20px;
  border: 1px solid var(--rule2);
  background: var(--rule2);
}
.thesis > div {
  padding: 18px 20px 20px;
  background: var(--paper);
}
.thesis span {
  display: block;
  margin-bottom: 8px;
  font: var(--t1) var(--mono);
  letter-spacing: 0.16em;
  color: var(--main);
}
.thesis > div:nth-child(2) span {
  color: var(--fig);
}
.thesis > div:nth-child(3) span {
  color: var(--select);
}
.thesis p {
  margin: 0;
  font-size:var(--t3);
  line-height: 1.65;
}
.theory-method {
  margin-top: 30px;
}
.theory-method p {
  font-size:var(--t3);
  color: var(--ink2);
}
.theory-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.theory-cell {
  padding: 10px 10px 4px;
  border: 1px solid var(--rule);
  background: var(--card);
}
.theory-grid svg {
  max-height: calc(50vh - 120px);
}

/* chart ink */
.theory-chart text {
  font-family: var(--mono);
  fill: var(--ink2);
}
.theory-chart .t-tick { font-size:var(--t1); fill: var(--ink3); }
.theory-chart .t-key { font-size:var(--t1); fill: var(--ink3); }
.theory-chart .t-head { font-size:var(--t1); letter-spacing: 0.1em; fill: var(--main); }
.theory-chart .t-sub { font-size:var(--t1); fill: var(--ink2); letter-spacing: 0; }
.theory-chart .t-num { font-size:var(--t2); fill: var(--ink); }
.theory-chart .t-pct { font-size:var(--t2); fill: var(--ink); }
.theory-chart .t-against { fill: var(--select); }
.theory-chart .t-flag { font-size:var(--t1); fill: var(--select); }
.theory-chart .t-verdict { font-size:var(--t1); letter-spacing: 0.1em; }
.theory-chart .t-ok { fill: var(--fig); }
.theory-chart .t-no { fill: var(--select); }
.theory-chart .t-real-label { font-size:var(--t1); letter-spacing: 0.1em; fill: var(--select); }
.theory-chart .t-grid { stroke: var(--rule); stroke-width: 1; }
.theory-chart .t-axis { stroke: var(--rule2); stroke-width: 1; }
.theory-chart .t-back { fill: var(--main); opacity: 0.26; }
.theory-chart .t-ahead { fill: var(--fig); opacity: 0.2; }
.theory-chart .t-throw-back { stroke: var(--main); stroke-width: 2; }
.theory-chart .t-throw-ahead { stroke: var(--fig); stroke-width: 2; }
.theory-chart .t-stand { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.theory-chart .t-land-back { fill: var(--main); }
.theory-chart .t-land-ahead { fill: var(--fig); }
.theory-chart .t-row:hover .t-back { opacity: 0.42; }
.theory-chart .t-row:hover .t-ahead { opacity: 0.34; }
.theory-chart .t-bar { fill: var(--fig); opacity: 0.38; }
.theory-chart .t-bar-tail { opacity: 0.8; }
.theory-chart .t-real { stroke: var(--select); stroke-width: 2; }
.theory-chart .t-bar-early { fill: var(--select); opacity: 0.85; }
.theory-chart .t-bar-back { fill: var(--main); opacity: 0.7; }
.theory-chart .t-bar-ahead { fill: var(--fig); opacity: 0.7; }
.theory-chart .t-mean { stroke: var(--ink3); stroke-width: 1; stroke-dasharray: 5 5; }
.theory-chart .t-band { fill: var(--select); opacity: 0.1; }
.theory-chart .t-band-solid { fill: var(--select); opacity: 0.75; }
.theory-chart .t-zone-back { fill: var(--main); opacity: 0.22; }
.theory-chart .t-zone-ahead { fill: var(--fig); opacity: 0.18; }
.theory-chart .t-big { font-size:var(--t6); }
.theory-chart .t-big-back { fill: var(--main); }
.theory-chart .t-big-ahead { fill: var(--fig); }
.theory-chart .t-zone-label { font-size:var(--t1); letter-spacing: 0.16em; fill: var(--ink2); }

@media (max-width: 760px) {
  .stage {
    grid-template-columns: 1fr;
    gap: 18px;
    min-height: 0;
    padding: 30px 0;
  }
  .stage-brief { order: -1; }
  .stage-figure.watch-panel { height: 62vh; }
  .stage-figure svg, .theory-grid svg { max-height: none; }
  .thesis { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .theory-toc { margin: 0 -16px 18px; }
  .theory-grid { grid-template-columns: 1fr; }
  .stage-brief h2 { font-size:var(--t5) !important; }
}


/* ---- stages on the Chaos and Leyline pages ---- */
.chaos-page .stage-figure > figure {
  margin: 0;
}
.chaos-page .stage-figure > figure + figure {
  margin-top: 10px;
}
.stage-figure .chaos-controls,
.stage-figure .ley-controls,
.stage-figure .hybrid-controls,
.stage-figure .recon-toolbar {
  margin: 0;
  padding: 0 0 12px;
  border: 0;
}
.stage-figure figcaption {
  margin-top: 8px !important;
  font-size:var(--t2) !important;
  line-height: 1.55 !important;
  color: var(--ink3);
}
/* A fixed-ratio instrument never grows taller than the window allows. */
.stage-figure #lorenz-canvas,
.stage-figure #hybrid-canvas {
  width: auto;
  max-width: 100%;
  max-height: calc(100vh - 310px);
  max-height: calc(100svh - 310px);
  margin: 0 auto;
}
.stage-figure #hybrid-canvas {
  max-height: calc(100svh - 370px);
}
.stage-figure #logistic-series svg {
  max-height: calc(100svh - 620px);
  min-height: 120px;
}
.stage-brief h3 {
  margin: 0 0 6px;
  font-size:var(--t4) !important;
}
.stage-brief details {
  margin-top: 12px;
}
.stage-brief details p {
  font-size:var(--t2);
  line-height: 1.65;
  color: var(--ink2);
}
.stage-mini,
.stage-brief .ley-chart {
  margin: 0 0 12px;
}
.stage-mini svg {
  max-height: 200px;
}
.stage-readout {
  display: block;
  margin: 0 0 12px;
  padding: 9px 12px;
  border: 1px solid var(--rule);
  background: var(--card);
  font: var(--t2)/1.6 var(--mono);
  color: var(--select);
}
.stage-brief .chaos-note {
  margin: 0 0 12px;
}
.stage-brief .hybrid-inspector,
.stage-brief .recon-inspector,
.stage-brief .ley-inspector {
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  background: var(--card);
  position: static;
  max-height: none;
}
.stage-brief .hybrid-compare-note {
  margin-top: 10px;
  font: var(--t1)/1.5 var(--mono);
  color: var(--ink3);
}
.chaos-explain > .stage-step,
.ley-section-head > .stage-step {
  margin-bottom: 6px;
}
.chaos-explain > h2 {
  margin: 0 0 12px;
}
.chaos-page .stage-lede {
  font-size:var(--t4);
  line-height: 1.65;
  max-width: 78ch;
}
.chaos-page .stage-take {
  max-width: 90ch;
}
.hybrid-readouts .hybrid-diagnostics {
  margin-top: 14px;
}
.chaos-page .chaos-art img,
.ley-illustration img {
  max-height: 46vh;
  object-fit: cover;
}

.stage-fine {
  margin: 8px 0 0 !important;
  font: var(--t1)/1.55 var(--mono) !important;
  color: var(--ink3);
}
.stage-brief > .stage-fine {
  margin: 0 0 10px !important;
}
.stage-brief .hybrid-inspector dl,
.stage-brief .recon-inspector dl {
  margin: 4px 0;
}
.stage-brief .hybrid-inspector dt,
.stage-brief .hybrid-inspector dd {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  min-height: 0 !important;
}
.stage-brief .hybrid-inspector h3 {
  margin: 8px 0 2px;
}
.stage-brief #hybrid-measures {
  margin: 4px 0 0;
  font-size:var(--t1);
}
.stage-figure #hybrid-canvas {
  max-height: calc(100svh - 400px);
}
.stage-brief .ley-inspector dl {
  margin: 0 0 6px;
}
.stage-brief .hybrid-inspector dl > div {
  padding: 5px 0 !important;
  min-height: 0 !important;
}
.stage-figure .recon-sliders {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 8px 0 0;
  padding: 0;
}
.stage-figure .recon-sliders > label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  flex: 1 1 260px;
}
.stage-figure .recon-sliders .recon-layers {
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
}
.stage-figure .recon-layers label {
  white-space: nowrap;
}
.stage-brief #recon-explanation {
  font-size:var(--t2);
  line-height: 1.6;
  margin: 6px 0 10px;
}

.stage-brief > #ley-network-result {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ---- Geographic Register: globe and site list share one screen; the list scrolls inside ---- */
.geo-stage .globewrap {
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 1fr);
  gap: 32px;
  align-items: center;
}
.geo-stage #globe {
  max-width: min(600px, calc(100vh - 230px));
  max-width: min(600px, calc(100svh - 230px));
}
.geo-stage .globelegend {
  justify-content: center;
}
.geo-stage .lg-hint {
  margin-left: 0;
}
.geo-side h2 {
  margin: 6px 0 10px;
  color: var(--main);
}
.geo-side p {
  margin: 0 0 10px;
  max-width: none;
}
.geo-side .geo-count {
  padding: 8px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font: var(--t1)/1.6 var(--mono);
  color: var(--ink3);
}
.geo-side .geo-count b {
  color: var(--ink);
  font-weight: 500;
}
.geo-stage .sitelist {
  max-height: max(200px, calc(100vh - 470px));
  max-height: max(200px, calc(100svh - 470px));
}
@media (max-width: 879px) {
  .geo-stage .globewrap {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .geo-stage .globecol {
    order: 2;
  }
  .geo-stage #globe {
    max-width: min(520px, 100%);
  }
  .geo-stage .sitelist {
    max-height: 340px;
  }
}

/* decks on the research pages share one voice */
.chaos-page .chaos-deck,
.chaos-page .ley-deck {
  font-family: var(--sans) !important;
  font-size:var(--t4) !important;
  line-height: 1.7 !important;
  color: var(--ink) !important;
  max-width: 96ch;
}
.chaos-page .hero .hero-img {
  max-height: 34vh;
  object-fit: cover;
}


/* ---- Analysis lab: seven views, one at a time ---- */
.lab-viewer {
  scroll-margin-top: 100px;
}
.lab-top {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 28px;
  flex-wrap: wrap;
  padding: 20px 0 14px;
  border-top: 2px solid var(--main);
}
.lab-top h2 {
  margin: 6px 0 8px;
  font-size: var(--t6) !important;
  line-height: 1.2;
}
.lab-top .lab-caution {
  margin: 0;
  max-width: 78ch;
  font-size:var(--t3);
  color: var(--ink2);
}
.lab-viewer .lab-controls {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  flex-wrap: nowrap;
}
.lab-viewer .lab-controls label {
  font-size:var(--t1);
  color: var(--ink3);
  letter-spacing: 0.1em;
}
.lab-viewer .lab-controls select,
.lab-viewer .lab-controls button {
  font-size:var(--t2);
  padding: 8px 12px;
  min-height: 38px;
}
.lab-viewer .lab-controls button:hover {
  border-color: var(--menu-yellow);
  color: var(--menu-yellow);
}
.lab-viewer .lab-metrics {
  margin: 0 0 14px;
}
.lab-viewer .lab-metric {
  padding: 10px 16px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.lab-viewer .lab-metric strong {
  font: var(--t4)/1.2 var(--mono);
  color: var(--fig);
}
.lab-viewer .lab-metric span {
  margin: 0;
  font-size:var(--t1);
}
.lab-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--rule2);
}
.lab-tabs button {
  flex: 0 0 auto;
  padding: 9px 14px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  background: none;
  color: var(--ink2);
  font: var(--t2) var(--sans);
  cursor: pointer;
}
.lab-tabs button:hover {
  color: var(--menu-yellow);
}
.lab-tabs button[aria-selected='true'] {
  border-color: var(--menu-yellow);
  background: rgba(228, 204, 115, 0.08);
  color: var(--menu-yellow);
}
.lab-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.8fr);
  gap: 34px;
  align-items: center;
  padding: 18px 0 8px;
  min-height: max(320px, calc(100svh - 470px));
}
.lab-panel[hidden] {
  display: none;
}
.lab-figure {
  min-width: 0;
}
.lab-figure .lab-chart svg {
  max-height: max(300px, calc(100svh - 480px));
  min-width: 0;
}
.lab-panel .stage-brief h3 {
  margin: 8px 0 10px;
  font-size:var(--t5) !important;
  line-height: 1.25;
  color: var(--main);
}
.lab-panel .stage-step .exercise-tag {
  margin-left: 6px;
}
.lab-panel .accounting-ledger {
  margin: 0 0 12px;
}
.lab-panel .lab-planner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0 0 14px;
}
.lab-panel .lab-table-wrap {
  max-height: 220px;
  overflow: auto;
}
@media (max-width: 980px) {
  .lab-panel {
    grid-template-columns: 1fr;
    gap: 14px;
    min-height: 0;
  }
  .lab-panel .stage-brief {
    order: -1;
  }
  .lab-figure .lab-chart svg {
    max-height: none;
    min-width: 560px;
  }
  .lab-viewer .lab-metrics {
    grid-template-columns: 1fr 1fr;
  }
}
.lab-panel .stage-brief h3,
.lab-top h2 {
  font-weight: 400 !important;
}
.lab-panel .lab-planner label {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  margin: 0;
  font-size:var(--t2);
}
.lab-panel .lab-planner input[type='range'] {
  grid-column: 1 / -1;
  margin: 0;
}
.lab-panel .accounting-ledger > div {
  padding-top: 6px;
  padding-bottom: 6px;
}

/* ---- long registers scroll inside their own pane, so the page keeps its place ---- */
@media (min-width: 700px) {
  .table-scroll:has(> #erafig),
  #evtl {
    max-height: max(360px, calc(100vh - 300px));
    max-height: max(360px, calc(100svh - 300px));
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(143, 224, 196, 0.35) transparent;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }
  #evtl {
    padding: 10px 10px 10px 0;
  }
  #erafig thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #14100b;
  }
}

/* =====================================================================
   REVISION 9 — soft corners everywhere, tighter tops, centred contents bars
   ===================================================================== */
:root {
  --radius: 8px;
}
/* Every box on the reading pages gets the same soft corner. The monitor wall keeps
   its hard edges on purpose: it is meant to look like terminal hardware. */
.thesis,
.lab-viewer .lab-metrics,
.theory-cell,
.stage-readout,
.stage-figure.watch-panel,
.stage-brief .hybrid-inspector,
.stage-brief .recon-inspector,
.stage-brief .ley-inspector,
#recon-stage,
.chaos-page canvas,
.chaos-page select,
.chaos-page input[type='number'],
.lab-viewer select,
.hero,
.hero-img,
.chaos-art,
.chaos-art img,
.ley-illustration img,
.ley-art-grid img,
.box,
.plate,
.plate img,
.table-scroll,
#evtl,
.chaos-table-wrap,
.lab-table-wrap,
.case-card,
.op-card,
.ley-hypotheses article,
.chaos-columns article,
.ley-columns > div,
.accounting-ledger,
.lab-status,
.motion-card,
.motion-ledger {
  border-radius: var(--radius);
}
.thesis,
.lab-viewer .lab-metrics,
.hero,
.chaos-art,
.plate {
  overflow: hidden;
}
/* a wide table scrolls sideways inside its rounded frame instead of being cut off */
.table-scroll,
.chaos-table-wrap {
  overflow-x: auto;
  overflow-y: hidden;
}
.table-scroll:has(> #erafig) {
  overflow-x: hidden;
  overflow-y: auto;
}
/* call-outs with a rule down the left keep the rule straight and soften the far side */
.stage-take,
.chaos-note,
.origin-note,
.model-description,
.lab-caution,
.hybrid-compare-note {
  border-radius: 0 var(--radius) var(--radius) 0;
}
.recon-stage-label {
  border-radius: 4px;
}

/* research tabs: the contents bar sits directly under the title bar, centred */
.chaos-page {
  padding-top: 0;
}
.chaos-toc .toc-inner,
.ley-toc .toc-inner,
.theory-toc .toc-inner,
.motion-toc .toc-inner {
  justify-content: safe center;
}
.chaos-page > header .masthead {
  margin-top: 6px;
}

/* the note for phone readers: hard to miss on a phone, absent on a laptop */
.phone-recommendation {
  display: none;
}
@media (max-width: 900px) {
  .phone-recommendation {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0 4px;
    padding: 12px 14px;
    border: 1px solid var(--menu-yellow);
    border-radius: var(--radius);
    background: rgba(228, 204, 115, 0.08);
    color: var(--ink);
    font-size:var(--t2);
    line-height: 1.55;
  }
  .phone-recommendation svg {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    fill: none;
    stroke: var(--menu-yellow);
    stroke-width: 1.5;
    stroke-linecap: round;
  }
  .phone-recommendation b {
    display: block;
    font: 600 var(--t1) var(--mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--menu-yellow);
  }
}

@media (max-width: 1100px) and (min-width: 761px) {
  /* a narrow window (half a screen, a side panel): still side by side, just tighter */
  .stage {
    grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.8fr);
    gap: 20px;
  }
  .chaos-page .stage-brief h2 {
    font-size:var(--t5) !important;
  }
  .chaos-page .stage-brief .stage-lede {
    font-size:var(--t3);
    line-height: 1.55;
  }
  .chaos-page .stage-brief li,
  .chaos-page .stage-take {
    font-size:var(--t2) !important;
  }
  .chaos-page {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.theory-frames {
  display: grid;
  gap: 1px;
  margin: 0 0 14px;
  border: 1px solid var(--rule2);
  border-radius: var(--radius);
  background: var(--rule2);
  overflow: hidden;
}
.theory-frames > div {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 8px 12px;
  background: var(--paper);
}
.theory-frames span {
  font: var(--t1) var(--mono);
  letter-spacing: 0.1em;
  color: var(--menu-yellow);
}
.theory-frames p {
  margin: 0;
  font-size:var(--t2);
  line-height: 1.5;
  color: var(--ink);
}

/* research tabs open like the theory tab: picture, title, three cards. The division crest
   already sits in the masthead, so it is not repeated under the picture. */
.chaos-page .herotext {
  display: none;
}
.chaos-page .hero .hero-img {
  max-height: 26vh;
}
.chaos-page .hero {
  margin-bottom: 14px;
}
.ley-illustration img {
  max-height: 30vh;
}


/* ---- the front page (Somebody Stole 1999): one moving chart per stage ---- */
#motion-page[hidden] {
  display: none !important;
}
.motion-toc {
  position: sticky;
  top: 38px;
  margin: 0 -32px 26px;
  padding: 8px 20px;
  z-index: 40;
}
.motion-toc .toc-inner {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
}
.motion-toc a {
  min-height: 44px;
  display: flex;
  align-items: center;
}
.motion-card {
  border: 1px solid var(--rule);
  background: #080d0b;
  overflow: hidden;
}
.chaos-page .motion-card canvas {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  max-height: calc(100vh - 210px);
  max-height: calc(100svh - 210px);
  border: 0;
  border-radius: 0;
  background: none;
  touch-action: auto;
}
.motion-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  border-top: 1px solid var(--rule);
}
.chaos-page .motion-bar button {
  padding: 5px 10px;
  border-radius: 6px;
  font-size:var(--t1);
}
.motion-bar i {
  flex: 1;
  height: 2px;
  background: var(--rule);
  overflow: hidden;
}
.motion-bar b {
  display: block;
  height: 100%;
  background: var(--menu-yellow);
  transform: scaleX(0);
  transform-origin: left;
}
.motion-ledger {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  background: #080d0b;
  font: var(--t1)/1.75 var(--mono);
  color: var(--ink2);
  white-space: pre;
  overflow: hidden;
}
.motion-ledger div {
  display: flex;
  gap: 12px;
  min-height: 1.75em;
}
.motion-ledger i {
  flex: 0 0 12px;
  font-style: normal;
  color: var(--ink3);
  text-align: right;
}
.motion-ledger .done {
  opacity: 0.6;
}
.motion-ledger .later i {
  opacity: 0.4;
}
.motion-ledger .now {
  margin: 0 -12px;
  padding: 0 12px;
  background: rgba(228, 204, 115, 0.1);
  box-shadow: inset 2px 0 0 var(--menu-yellow);
  color: var(--menu-yellow);
}
.motion-ledger .now i {
  color: var(--menu-yellow);
}
.motion-ledger .typing span::after {
  content: '▌';
  opacity: 0.8;
}
@media (max-width: 760px) {
  .motion-toc {
    margin: 0 -14px 18px;
  }
  .motion-ledger {
    font-size:var(--t1);
  }
}
@media (max-width: 760px) {
  .chaos-page .motion-card canvas {
    aspect-ratio: 4 / 5;
    max-height: none;
  }
}

/* ---- short windows (small laptops, browser zoom): everything in a stage tightens ---- */
@media (max-height: 780px) and (min-width: 761px) {
  .stage {
    gap: 26px;
    padding: 10px 0;
  }
  .chaos-page .stage-brief h2 {
    margin: 4px 0 8px;
    font-size:var(--t5) !important;
  }
  .chaos-page .stage-brief .stage-lede {
    margin-bottom: 10px;
    font-size:var(--t3);
    line-height: 1.5;
  }
  .chaos-page .stage-brief ul {
    margin-bottom: 10px;
  }
  .chaos-page .stage-brief li {
    padding-bottom: 5px;
    font-size:var(--t2);
    line-height: 1.45;
  }
  .chaos-page .stage-take {
    padding: 8px 12px;
    font-size:var(--t2) !important;
    line-height: 1.45 !important;
  }
  .stage-mini svg {
    max-height: 130px;
  }
  .stage-brief .ley-chart svg {
    max-height: 104px;
  }
  .stage-brief .hybrid-inspector,
  .stage-brief .recon-inspector,
  .stage-brief .ley-inspector {
    padding: 8px 12px;
    margin-bottom: 8px;
  }
  .stage-brief .hybrid-inspector dl > div {
    padding: 2px 0 !important;
  }
  .stage-brief details {
    margin-top: 6px;
  }
  .stage-figure .chaos-controls,
  .stage-figure .ley-controls,
  .stage-figure .hybrid-controls,
  .stage-figure .recon-toolbar {
    padding-bottom: 6px;
  }
  .motion-ledger {
    padding: 6px 12px;
    margin-bottom: 10px;
    font-size:var(--t1);
    line-height: 1.6;
  }
  .theory-frames > div {
    padding: 5px 12px;
  }
  .theory-frames p {
    font-size:var(--t2);
  }
  .stage-figure #hybrid-canvas {
    max-height: calc(100svh - 330px);
  }
}
@media (max-height: 780px) and (min-width: 761px) {
  .stage-brief .hybrid-inspector dd,
  .stage-brief .hybrid-inspector dt {
    line-height: 1.3 !important;
  }
  .stage-brief .hybrid-inspector dl > div {
    padding: 4px 0 !important;
  }
  .stage-brief .ley-inspector dl div {
    padding: 2px 0 6px;
  }
  .stage-brief .ley-inspector h3 {
    display: none;
  }
}

/* research tabs: no gap above the contents bar, a slim picture, one deck style */
#chaos-page,
#leyline-page,
#theory-page,
#motion-page {
  padding-top: 0 !important;
}
.chaos-page .hero {
  height: min(240px, 26vh);
}
.chaos-page .hero .hero-img {
  max-height: none;
  height: 100%;
}
#chaos-page .chaos-intro .chaos-deck,
#leyline-page .ley-deck {
  font-family: var(--sans) !important;
  font-size:var(--t4) !important;
  line-height: 1.7 !important;
  color: var(--ink) !important;
}
#chaos-page .hero,
#leyline-page .hero {
  height: min(220px, 24vh) !important;
  margin-bottom: 14px;
}
#leyline-page canvas,
#chaos-page canvas {
  border-radius: var(--radius) !important;
}


/* =====================================================================
   REVISION 10 — October 2026
   The monitor wall's second screen, the Doorway Theory tab, the opening
   moved to the front page (Somebody Stole 1999), and the Record's reading aids (question
   deck, glossary browser, tabbed Detail Record).
   ===================================================================== */

/* ---- ACD WATCH: two screens, one showing at a time ---- */
#sb-watch:not([data-screen='1']) .scr1,
#sb-watch:not([data-screen='2']) .scr2,
#sb-watch:not([data-screen='3']) .scr3 {
  display: none;
}
#sandbox-window[data-mode='watch'] #sb-watch[data-screen='2'] {
  grid-template-areas:
    'tape tape tape tape'
    'sim sim matrix clocks'
    'sim sim room room'
    'feed forecast forecast shelf'
    'cmd cmd cmd cmd';
}
#sb-watch {
  position: relative;
}
#watch-feed {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 6px 8px;
  overflow: hidden;
  white-space: pre-wrap;
  font: var(--t1)/1.55 var(--mono);
  color: var(--ink2);
}
.watch-screens {
  display: flex;
  align-items: center;
  gap: 4px;
}
.watch-screens button {
  padding: 1px 8px;
  border: 1px solid #3a2410;
  border-radius: 0;
  background: none;
  color: var(--ink3);
  font: var(--t1) var(--mono);
  letter-spacing: 0.08em;
  cursor: pointer;
}
.watch-screens button:hover {
  border-color: var(--menu-yellow);
  color: var(--menu-yellow);
}
.watch-screens button.on {
  border-color: var(--select);
  background: rgba(253, 213, 99, 0.12);
  color: var(--select);
}
.watch-screens i {
  margin-left: 6px;
  font-style: normal;
  font-size:var(--t1);
  letter-spacing: 0.12em;
  color: var(--ink3);
}
/* the change of screen: one bright line sweeps down the wall */
.watch-wipe {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg, transparent 0, rgba(253, 213, 99, 0.16) 46%, rgba(253, 213, 99, 0.6) 50%, transparent 54%);
  background-size: 100% 220%;
}
#sb-watch.switching .watch-wipe {
  animation: watch-wipe 0.7s ease-out;
}
#sb-watch.switching .watch-panel {
  animation: watch-settle 0.7s ease-out;
}
@keyframes watch-wipe {
  0% {
    opacity: 1;
    background-position: 0 100%;
  }
  100% {
    opacity: 0;
    background-position: 0 0;
  }
}
@keyframes watch-settle {
  0% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@media (max-width: 1000px) {
  #sandbox-window[data-mode='watch'] #sb-watch[data-screen='2'] {
    grid-template-rows: auto 380px 300px 250px 250px 240px 230px 220px auto;
    grid-template-areas: 'tape' 'sim' 'matrix' 'clocks' 'room' 'forecast' 'shelf' 'feed' 'cmd';
  }
  .watch-screens i {
    display: none;
  }
}

/* ---- menu: grouped, so the theories sit together ---- */
#site-drawer {
  overflow-y: auto;
  padding: 22px 20px;
}
.drawer-label {
  margin-bottom: 14px;
}
.drawer-group {
  clear: both;
  margin: 16px 0 2px 12px;
  font: var(--t1) var(--mono);
  letter-spacing: 0.16em;
  color: var(--ink3);
}
#site-drawer button:not(#drawer-close) {
  padding: 11px 12px;
  margin: 3px 0;
}

/* ---- the Doorway Theory tab (js/archive/doorway.js) ---- */
#doorway-page[hidden] {
  display: none !important;
}
#doorway-page {
  padding-top: 0 !important;
}
/* its four animations sit in ordinary stages, not .motion-stage ones */
.evidence {
  border: 1px solid var(--rule2);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
}
.evidence-head,
.evidence-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px 92px;
  gap: 10px;
  align-items: center;
  padding: 8px 14px;
}
.evidence-head {
  background: #080d0b;
  border-bottom: 1px solid var(--rule2);
  font: var(--t1) var(--mono);
  letter-spacing: 0.16em;
  color: var(--ink3);
}
.evidence-head span:not(:first-child) {
  text-align: center;
}
.chaos-page .evidence-row {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  background: none;
  color: var(--ink);
  font: var(--t3)/1.35 var(--sans);
  text-align: left;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.chaos-page .evidence-row:first-of-type {
  border-top: 0;
}
.chaos-page .evidence-row:hover {
  background: rgba(228, 204, 115, 0.07);
  color: var(--menu-yellow);
}
.chaos-page .evidence-row[aria-pressed='true'] {
  background: rgba(228, 204, 115, 0.12);
  box-shadow: inset 3px 0 0 var(--menu-yellow);
  color: var(--menu-yellow);
}
.verdict {
  display: inline-block;
  min-width: 78px;
  padding: 3px 0;
  border: 1px solid currentColor;
  border-radius: 20px;
  font: 600 var(--t1) var(--mono);
  font-style: normal;
  letter-spacing: 0.1em;
  text-align: center;
}
.verdict.fits {
  color: var(--fig);
}
.verdict.strained {
  color: var(--main);
}
.verdict.open {
  color: var(--ink3);
}
.evidence-detail {
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid var(--rule2);
  border-radius: var(--radius);
  background: var(--card);
}
.evidence-detail h3 {
  margin: 0 0 4px;
  font-size:var(--t4);
  color: var(--ink);
}
.evidence-source {
  margin: 0 0 12px !important;
  font: var(--t1)/1.5 var(--mono) !important;
  color: var(--ink3);
}
.evidence-reading {
  padding: 9px 0 0;
  border-top: 1px solid var(--rule);
}
.evidence-reading + .evidence-reading {
  margin-top: 9px;
}
.evidence-reading > span {
  display: flex;
  align-items: center;
  gap: 10px;
  font: var(--t1) var(--mono);
  letter-spacing: 0.16em;
  color: var(--ink3);
}
.evidence-reading.door > span {
  color: var(--menu-yellow);
}
.evidence-reading p {
  margin: 6px 0 0 !important;
  font-size:var(--t3) !important;
  line-height: 1.55 !important;
  color: var(--ink);
}
.tests {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.tests > div {
  padding: 22px 20px 24px;
  border: 1px solid var(--rule2);
  border-top: 2px solid var(--main);
  border-radius: var(--radius);
  background: var(--card);
}
.tests > div:last-child {
  border-top-color: var(--fig);
}
.tests span {
  font: var(--t1) var(--mono);
  letter-spacing: 0.16em;
  color: var(--ink3);
}
.tests h3 {
  margin: 10px 0 10px;
  font-size:var(--t5);
  color: var(--ink);
}
.tests p {
  margin: 0;
  font-size:var(--t3);
  line-height: 1.6;
  color: var(--ink2);
}
@media (max-width: 760px) {
  .tests {
    grid-template-columns: 1fr;
  }
  .evidence-head,
  .evidence-row {
    grid-template-columns: minmax(0, 1fr) 70px 70px;
    padding: 8px 10px;
  }
  .verdict {
    min-width: 64px;
    font-size:var(--t1);
    letter-spacing: 0.1em;
  }
}
@media (max-height: 780px) and (min-width: 761px) {
  .chaos-page .evidence-row {
    padding: 5px 14px;
    font-size:var(--t2);
  }
  .evidence-detail {
    padding: 10px 14px;
    margin-bottom: 10px;
  }
  .evidence-reading p {
    font-size:var(--t2) !important;
  }
  .tests > div {
    padding: 16px 16px 18px;
  }
}

/* ---- the front page (Somebody Stole 1999) as the opening page ---- */
.chaos-deck dfn,
.thesis dfn {
  font-style: normal;
  color: var(--menu-yellow);
}
.word-keys {
  display: grid;
  grid-template-columns: auto repeat(3, minmax(0, 1fr));
  gap: 6px 22px;
  align-items: baseline;
  margin: 0 0 18px;
  padding: 12px 16px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card);
}
.word-keys-label {
  font: var(--t1) var(--mono);
  letter-spacing: 0.16em;
  color: var(--ink3);
}
.word-keys b {
  margin-right: 8px;
  font: 600 var(--t2) var(--mono);
  letter-spacing: 0.04em;
  color: var(--menu-yellow);
}
.word-keys div span {
  font-size:var(--t2);
  color: var(--ink2);
}
#motion-opening .origin-note,
#motion-opening .op-fine {
  max-width: none;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
#motion-opening .origin-note b {
  color: var(--menu-yellow);
}
@media (max-width: 900px) {
  .word-keys {
    grid-template-columns: 1fr;
  }
}
.op-grid-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ---- Record: the seven questions ---- */
.fund-lede,
.glossary-lede {
  margin: 0 0 14px !important;
  font-size:var(--t4);
  color: var(--ink);
}
.qa {
  display: grid;
  grid-template-columns: minmax(230px, 0.9fr) minmax(0, 1.5fr) 190px;
  gap: 22px;
  align-items: stretch;
  margin: 0 0 18px;
}
.qa:not(.ready) {
  display: none; /* scripting off: the plain list below is shown instead */
}
.qa-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wrap .qa-list button {
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: none;
  color: var(--ink2);
  font: var(--t3)/1.35 var(--sans);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.wrap .qa-list button:hover {
  border-color: var(--menu-yellow);
  color: var(--menu-yellow);
}
.wrap .qa-list button[aria-selected='true'] {
  border-color: var(--menu-yellow);
  background: rgba(228, 204, 115, 0.1);
  color: var(--menu-yellow);
}
.qa-answer {
  display: flex;
  flex-direction: column;
  padding: 20px 22px;
  border: 1px solid var(--rule2);
  border-radius: var(--radius);
  background: var(--sunk);
}
.qa-count {
  font: var(--t1) var(--mono);
  letter-spacing: 0.16em;
  color: var(--ink3);
}
.qa-verdict {
  margin: 10px 0 12px;
  font: var(--t6)/1.15 var(--serif);
  color: var(--main);
}
.qa-answer p {
  margin: 0 0 16px;
  max-width: none;
  font-size:var(--t3);
  line-height: 1.65;
  color: var(--ink);
}
.qa-step {
  display: flex;
  gap: 8px;
  margin-top: auto;
}
.wrap .qa-step button {
  padding: 7px 12px;
  border: 1px solid var(--rule2);
  border-radius: 6px;
  background: none;
  color: var(--ink2);
  font: var(--t2) var(--sans);
  cursor: pointer;
}
.wrap .qa-step button:hover {
  border-color: var(--menu-yellow);
  color: var(--menu-yellow);
}
#time-rules .qa .tr-fig {
  float: none;
  width: auto;
  margin: 0;
}
#time-rules .qa .tr-fig img {
  width: 100%;
  height: auto;
}
@media (max-width: 1000px) {
  .qa {
    grid-template-columns: minmax(200px, 0.9fr) minmax(0, 1.4fr);
  }
  #time-rules .qa .tr-fig {
    display: none;
  }
}
@media (max-width: 640px) {
  .qa {
    grid-template-columns: 1fr;
  }
  .qa-list {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 6px;
  }
  .wrap .qa-list button {
    flex: 0 0 68%;
  }
  .qa-verdict {
    font-size:var(--t5);
  }
}

/* ---- Record: the glossary, one word at a time ---- */
.glossary {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 18px;
  height: 320px;
}
.glossary[hidden] {
  display: none;
}
.glossary-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}
.wrap #glossary-find {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--rule2);
  border-radius: 6px;
  background: var(--sunk);
  color: var(--ink);
  font: var(--t2) var(--sans);
}
.wrap #glossary-find:focus {
  outline: none;
  border-color: var(--menu-yellow);
}
.glossary-terms {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 4px;
}
.wrap .glossary-terms button {
  padding: 6px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--ink2);
  font: var(--t2) var(--sans);
  text-align: left;
  cursor: pointer;
}
.wrap .glossary-terms button:hover {
  color: var(--menu-yellow);
}
.wrap .glossary-terms button[aria-selected='true'] {
  background: rgba(228, 204, 115, 0.12);
  box-shadow: inset 3px 0 0 var(--menu-yellow);
  color: var(--menu-yellow);
}
.glossary-card {
  padding: 22px 26px;
  border: 1px solid var(--rule2);
  border-radius: var(--radius);
  background: var(--sunk);
  overflow-y: auto;
  scrollbar-width: thin;
}
.glossary-count {
  font: var(--t1) var(--mono);
  letter-spacing: 0.16em;
  color: var(--ink3);
}
.glossary-card h3 {
  margin: 8px 0 10px;
  font-size:var(--t5);
  color: var(--main);
}
.glossary-card p {
  margin: 0;
  max-width: 68ch;
  font-size:var(--t3);
  line-height: 1.7;
  color: var(--ink);
}
@media (max-width: 700px) {
  .glossary {
    grid-template-columns: 1fr;
    height: auto;
  }
  .glossary-terms {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
  }
  .wrap .glossary-terms button {
    flex: 0 0 auto;
    border: 1px solid var(--rule);
  }
  .glossary-card {
    padding: 16px;
  }
}

/* ---- Record: notable cases, one file open at a time ---- */
.ct-head span {
  margin-left: 10px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ink3);
}
.casetable:not(.case-picker) .ct-head span {
  display: none;
}
.case-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
}
.wrap .case-tabs button {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 0;
  border-radius: 0;
  background: var(--paper);
  color: var(--ink2);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.case-tabs .ct-portrait {
  grid-row: 1 / 3;
}
.case-tabs .ct-name {
  align-self: end;
}
.case-tabs .ct-status {
  align-self: start;
}
.wrap .case-tabs button:hover {
  color: var(--menu-yellow);
}
.wrap .case-tabs button[aria-selected='true'] {
  background: rgba(228, 204, 115, 0.1);
  box-shadow: inset 0 -2px 0 var(--menu-yellow);
  color: var(--menu-yellow);
}
.case-open {
  padding: 16px 18px 18px;
  font-size:var(--t3);
  line-height: 1.65;
  color: var(--ink);
}
@media (max-width: 640px) {
  .case-tabs {
    grid-template-columns: 1fr;
  }
}

/* ---- Record: the Detail Record, one group at a time ---- */
.neighbours {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 0 0 10px;
  font: var(--t2) var(--mono);
  color: var(--ink2);
}
.neighbours i {
  margin-right: 4px;
  font-style: normal;
  font-size:var(--t1);
  letter-spacing: 0.16em;
  color: var(--ink3);
}
.ptabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 10px;
}
.wrap .ptabs button {
  padding: 7px 12px;
  border: 1px solid var(--rule);
  border-radius: 20px;
  background: none;
  color: var(--ink2);
  font: var(--t2) var(--sans);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.wrap .ptabs button:hover {
  border-color: var(--menu-yellow);
  color: var(--menu-yellow);
}
.wrap .ptabs button[aria-selected='true'] {
  border-color: var(--menu-yellow);
  background: rgba(228, 204, 115, 0.12);
  color: var(--menu-yellow);
}
.ptab-body .grp {
  margin-bottom: 0;
}
.ptab-body .cell .body {
  font-size:var(--t3);
  line-height: 1.65;
}
.ct-row[hidden],
.storm-principles[hidden],
.termscroll[hidden] {
  display: none !important;
}

/* phones: the new reading aids */
.glossary {
  grid-template-columns: 250px minmax(0, 1fr);
}
.glossary-side,
.glossary-card {
  min-width: 0;
}
@media (max-width: 700px) {
  .glossary {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 640px) {
  .case-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .wrap .case-tabs button {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    justify-items: center;
    row-gap: 6px;
    padding: 10px 6px;
    text-align: center;
  }
  .case-tabs .ct-portrait,
  .case-tabs .ct-name {
    grid-area: auto;
    grid-row: auto;
  }
  .case-tabs .ct-name {
    font-size:var(--t2);
    line-height: 1.3;
  }
  .case-tabs .ct-status {
    display: none;
  }
  .case-open {
    padding: 14px;
    font-size:var(--t3);
  }
}

/* =====================================================================
   REVISION 11 — centred titles, tab name in the title bar, simpler menu
   ===================================================================== */
/* every page title sits in the middle, with its opening line under it */
.wrap > .dossier-title,
.chaos-page .dossier-title,
#chaos-page .chaos-intro > .dossier-title,
#leyline-page .dossier-title {
  text-align: center !important;
  width: auto;
  margin: 14px auto 10px !important;
  text-wrap: balance;
}
.theory-intro > .chaos-deck,
#chaos-page .chaos-intro > .chaos-deck,
#leyline-page .ley-deck {
  max-width: 74ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
  text-wrap: balance;
}
.opening-sub {
  margin: 0 0 8px;
  text-align: center;
  font: var(--t1)/1.6 var(--mono);
  letter-spacing: 0.1em;
  color: var(--main);
}
#motion-opening .metaline {
  margin: 0 0 18px;
  text-align: center;
}

/* title bar: which tab is open */
.crt-tb-tab {
  flex-shrink: 1;
  min-width: 0;
  margin-left: 10px;
  padding-left: 12px;
  border-left: 1px solid var(--rule2);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 600 var(--t1) var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--menu-yellow);
}
.crt-tb-tab:empty {
  display: none;
}
.crt-tb-left {
  min-width: 0;
}
.crt-tb-title {
  flex-shrink: 0;
}

/* menu: only the theories are grouped, under a heading that can be seen */
.drawer-set {
  clear: both;
  margin: 12px 0;
  padding: 10px 0 6px 10px;
  border-left: 2px solid var(--main);
  background: rgba(232, 117, 42, 0.05);
  border-radius: 0 10px 10px 0;
}
.drawer-set .drawer-group {
  margin: 0 0 4px 12px;
  font: 600 var(--t2) var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--main);
}
#motion-opening .metaline a {
  color: var(--menu-yellow);
}

/* the strip above each title: the page name sits dead centre on every tab,
   whatever the lengths of the words either side of it */
.theory-intro .masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: baseline;
}
.theory-intro .masthead > span:nth-child(2) {
  text-align: center;
}
.theory-intro .masthead > span:last-child {
  text-align: right;
}
@media (max-width: 760px) {
  .theory-intro .masthead {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 4px;
  }
  .theory-intro .masthead > span:last-child {
    text-align: center;
  }
}

/* ---- the notice before the terminal ---- */
#notice-gate {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 20px;
  overflow-y: auto;
  background: rgba(4, 9, 7, 0.94);
}
#notice-gate[hidden] {
  display: none;
}
.notice-card {
  width: min(560px, 100%);
  padding: 30px 32px 24px;
  border: 1px solid var(--rule2);
  border-top: 2px solid var(--main);
  border-radius: var(--radius);
  background: var(--card);
  text-align: center;
}
.notice-card img {
  width: 46px;
  margin-bottom: 10px;
}
.notice-tag {
  display: block;
  font: var(--t1) var(--mono);
  letter-spacing: 0.16em;
  color: var(--main);
}
.notice-card h2 {
  margin: 8px 0 18px;
  font-size:var(--t6);
  color: var(--ink);
}
.notice-card ul {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  text-align: left;
}
.notice-card li {
  padding: 11px 0;
  border-top: 1px solid var(--rule);
  font-size:var(--t3);
  line-height: 1.6;
  color: var(--ink2);
}
.notice-card li b {
  display: block;
  color: var(--ink);
}
#notice-accept {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--menu-yellow);
  border-radius: var(--radius);
  background: rgba(228, 204, 115, 0.12);
  color: var(--menu-yellow);
  font: 600 var(--t3) var(--sans);
  cursor: pointer;
  transition: background 0.2s;
}
#notice-accept:hover,
#notice-accept:focus-visible {
  background: rgba(228, 204, 115, 0.24);
}
.notice-fine {
  margin: 10px 0 0;
  font: var(--t1) var(--mono);
  color: var(--ink3);
}
@media (max-width: 520px) {
  .notice-card {
    padding: 22px 18px 18px;
  }
  .notice-card h2 {
    font-size:var(--t5);
  }
}

/* =====================================================================
   REVISION 12 — quieter titles, matching header buttons
   ===================================================================== */
/* page titles: the name in bold, upright; "ACD" steps back */
.dossier-title .h1-name {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink);
}
.dossier-title .h1-acd {
  font-weight: 400 !important;
}
/* the "Scroll motion" switch is the same size and shape as the item stamp beside it */
.topline > button {
  font: var(--t1)/1.6 var(--mono) !important;
  letter-spacing: 0.1em !important;
  padding: 2px 9px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-radius: 6px !important;
  margin-left: auto;
  flex-shrink: 0;
}
.topline .stamp {
  font: var(--t1)/1.6 var(--mono) !important;
  letter-spacing: 0.1em !important;
  padding: 2px 9px;
}
.chaos-page .hero + .topline,
.chaos-page .herotext + .topline {
  margin-top: 12px !important;
}

/* =====================================================================
   REVISION 13 — picture-backed page headers, the Palimpsest Theory tab
   ===================================================================== */
/* Every tab opens the same way: its picture sits behind the heading, shaded so
   the words stay readable. The picture is the <img class="page-hero-img"> inside. */
.page-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: min(400px, 46vh);
  margin: 6px 0 24px;
  padding: 0 28px 34px;
  border: 1px solid var(--rule2);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  background: var(--paper);
}
.page-hero-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(7, 13, 10, 0.66) 0%, rgba(7, 13, 10, 0.46) 40%, rgba(7, 13, 10, 0.88) 100%);
}
.page-hero .masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: baseline;
  margin: 0 0 14px !important;
  padding: 12px 0 10px;
  border-top: 0;
  border-bottom: 1px solid rgba(231, 245, 236, 0.3);
  font: 600 var(--t2) var(--mono);
  font-style: normal;
  letter-spacing: 0.16em;
  color: var(--ink2);
}
.page-hero .masthead > span:nth-child(2) {
  text-align: center;
  color: var(--ink);
}
.page-hero .masthead > span:last-child {
  text-align: right;
  justify-self: end;
}
.page-hero .topline {
  margin: 0 0 auto !important;
  color: var(--ink2);
}
.page-hero .topline .stamp,
.page-hero .topline > button {
  background: rgba(7, 13, 10, 0.55);
}
.page-hero .dossier-title {
  margin: 34px auto 10px !important;
  font: 400 var(--t7) / 1.15 var(--serif);
  letter-spacing: -0.01em;
  text-align: center !important;
  color: var(--ink);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.8);
}
.page-hero .dossier-title .h1-acd {
  font-family: var(--mono);
  font-size: inherit;
  letter-spacing: 0.1em;
  color: var(--gold);
}
.page-hero .chaos-deck,
.page-hero .ley-deck,
.page-hero .hero-line {
  max-width: 70ch !important;
  margin: 6px auto 0 !important;
  font: var(--t4)/1.65 var(--sans) !important;
  text-align: center;
  text-wrap: balance;
  color: var(--ink) !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.85);
}
.page-hero .hero-line {
  font: italic var(--t4)/1.6 var(--serif) !important;
  color: var(--ink2) !important;
}
.page-hero .opening-sub,
.page-hero .metaline {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85);
}
.page-hero .metaline {
  color: var(--ink2);
}
.page-hero-cap {
  position: absolute;
  right: 12px;
  bottom: 8px;
  font: var(--t1) var(--mono);
  letter-spacing: 0.16em;
  color: rgba(231, 245, 236, 0.5);
}
.wrap > .page-hero {
  margin-top: 0;
}
@media (max-width: 760px) {
  .page-hero {
    min-height: 0;
    padding: 0 16px 30px;
  }
  .page-hero .masthead {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 4px;
    font-size:var(--t1);
  }
  .page-hero .masthead > span:last-child {
    justify-self: center;
  }
  .page-hero .dossier-title {
    margin-top: 22px !important;
  }
  .page-hero .chaos-deck,
  .page-hero .ley-deck {
    font-size:var(--t4) !important;
  }
}

/* ---- Palimpsest Theory (js/archive/palimpsest.js) ---- */
#palimpsest-page[hidden] {
  display: none !important;
}
#palimpsest-page {
  padding-top: 0 !important;
}
.pal-controls {
  gap: 8px;
}
.chaos-page .pal-controls button {
  padding: 6px 12px;
  border: 1px solid var(--rule2);
  border-radius: 6px;
  background: none;
  color: var(--ink2);
  font: var(--t2) var(--sans);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.chaos-page .pal-controls button:hover {
  border-color: var(--menu-yellow);
  color: var(--menu-yellow);
}
.chaos-page .pal-controls button[aria-pressed='true'] {
  border-color: var(--menu-yellow);
  background: rgba(228, 204, 115, 0.12);
  color: var(--menu-yellow);
}
.chaos-page .pal-numbers button {
  min-width: 34px;
  padding: 6px 0;
  font: var(--t2) var(--mono);
}
.pal-slider {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, 1.1fr);
  gap: 14px;
  align-items: center;
  padding-top: 10px;
  font: var(--t2) var(--sans);
  color: var(--ink2);
}
.pal-slider output {
  margin-left: 8px;
  font: var(--t1) var(--mono);
  color: var(--menu-yellow);
}
.pal-slider input {
  width: 100%;
  accent-color: var(--menu-yellow);
}
.pal-read {
  margin: 0 0 14px !important;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: #080d0b;
  font: var(--t2)/1.6 var(--mono) !important;
  color: var(--menu-yellow) !important;
}
#palimpsest-page .motion-card canvas[data-plot='echo'] {
  cursor: pointer;
}
@media (max-width: 760px) {
  .pal-slider {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ---- ACD WATCH: the third screen ---- */
#sandbox-window[data-mode='watch'] #sb-watch[data-screen='3'] {
  grid-template-areas:
    'tape tape tape tape'
    'scribe scribe arcs arcs'
    'scribe scribe echo ridge'
    'board evid evid tally'
    'cmd cmd cmd cmd';
}
#watch-theories,
#watch-evidence {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 6px 8px;
  overflow: hidden;
  white-space: pre-wrap;
  font: var(--t1)/1.55 var(--mono);
  color: var(--ink2);
}
@media (max-width: 1000px) {
  #sandbox-window[data-mode='watch'] #sb-watch[data-screen='3'] {
    grid-template-rows: auto 380px 240px 280px 260px 230px 260px 190px auto;
    grid-template-areas: 'tape' 'scribe' 'arcs' 'echo' 'ridge' 'board' 'evid' 'tally' 'cmd';
  }
}

/* =====================================================================
   REVISION 14 — the contents bar runs the full width of the window
   ===================================================================== */
/* Each page is a centred column, so the bar is pulled out to both window edges.
   Its links stay centred. The same rule serves every tab. */
html,
body {
  overflow-x: clip;
}
.toc,
.wrap .toc,
.chaos-toc,
.ley-toc,
.theory-toc,
.motion-toc {
  width: auto !important;
  max-width: none !important;
  margin-top: 0 !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  border-radius: 0 !important;
}
.wrap {
  padding-top: 0;
}
.wrap > .page-hero {
  margin-top: 6px;
}

/* the title block sits in the middle of the picture, not towards its foot.
   Free space is shared above the title and below the last line; the spacer at the
   end stands in for the strip and stamp row at the top, so the middle is the
   middle of the whole picture. */
.page-hero {
  padding-bottom: 0;
}
.page-hero::after {
  content: '';
  flex: none;
  height: 76px;
}
.page-hero .topline {
  margin-bottom: 0 !important;
}
.page-hero .dossier-title {
  margin-top: auto !important;
  padding-top: 18px;
}
.page-hero > :nth-last-child(2) {
  margin-bottom: auto !important;
}
@media (max-width: 760px) {
  .page-hero::after {
    height: 34px;
  }
}

/* each picture header carries one line under the name; anything longer sits just below it */
.theory-intro > .chaos-deck,
.chaos-intro > .chaos-deck,
.ley-opening > .ley-deck {
  max-width: 78ch !important;
  margin: 0 auto 20px !important;
  font: var(--t4)/1.7 var(--sans) !important;
  text-align: center;
  color: var(--ink2) !important;
}
.theory-intro > .metaline {
  margin: -8px 0 18px;
  text-align: center;
}
.page-hero .hero-line {
  font: var(--t4)/1.65 var(--sans) !important;
  font-style: normal !important;
  color: var(--ink) !important;
}
/* the same centring, stated strongly enough to beat the older per-page rules */
:is(#leyline-page, #chaos-page, #theory-page, #doorway-page, #palimpsest-page, #fracture-page, #motion-page, .wrap) .page-hero .dossier-title {
  margin-top: auto !important;
}
:is(#leyline-page, #chaos-page, #theory-page, #doorway-page, #palimpsest-page, #fracture-page, #motion-page, .wrap) .page-hero > :nth-last-child(2) {
  margin-bottom: auto !important;
}

/* phones: every tab's strip is the same two centred lines (division, then author).
   The tab's name is left out here because the title sits right below it. */
@media (max-width: 760px) {
  :is(#leyline-page, #chaos-page, #theory-page, #doorway-page, #palimpsest-page, #fracture-page, #motion-page, .wrap) .page-hero .masthead {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center;
    row-gap: 4px;
    text-align: center;
    font-size:var(--t1) !important;
    letter-spacing: 0.1em !important;
  }
  :is(#leyline-page, #chaos-page, #theory-page, #doorway-page, #palimpsest-page, #fracture-page, #motion-page, .wrap) .page-hero .masthead > span {
    justify-self: center !important;
    text-align: center !important;
  }
  :is(#leyline-page, #chaos-page, #theory-page, #doorway-page, #palimpsest-page, #fracture-page, #motion-page, .wrap) .page-hero .masthead .mh-mid {
    display: none !important;
  }
  .page-hero .topline {
    justify-content: center;
  }
}
@media (max-width: 760px) {
  /* the stamp and the switch sit centred under the strip, each on one line */
  :is(#leyline-page, #chaos-page, #theory-page, #doorway-page, #palimpsest-page, #fracture-page, #motion-page, .wrap) .page-hero .topline {
    justify-content: center !important;
    gap: 6px 8px;
  }
  .page-hero .topline .stamp {
    font-size:var(--t1) !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap;
  }
  .page-hero .topline > button,
  .page-hero .topline .phone-reading-label {
    margin-left: 0 !important;
    font-size:var(--t1) !important;
  }
}

/* The strip above each title no longer repeats the tab's name: the big title is right
   below it. The slot is kept (only hidden) so the division and the author stay at the two ends. */
.masthead .mh-mid {
  visibility: hidden !important;
}

/* ---- contents bars: the yellow marker travels to the clicked item before the page moves ---- */
.toc a {
  transition:
    background-color 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease;
}
@media (prefers-reduced-motion: reduce) {
  .toc a {
    transition: none;
  }
}

/* ---- the front page, made easier to take in at a glance ----
   1. The three opening boxes lead with one bold sentence each, so skimming only the
      bold lines is enough.
   2. Each chart sits beside a question, a key to its marks and colours, and an answer.
      The key replaces the old typed summary, which read like code.
   3. A strip before the first chart and a list after the last say plainly that all
      seven charts draw the same eleven Storms. */
.thesis.premise > div {
  padding: 16px 20px 18px;
}
.thesis.premise b {
  display: block;
  margin: 0 0 6px;
  font: 600 var(--t4)/1.25 var(--serif);
  color: var(--ink);
}
.thesis.premise p {
  font-size:var(--t3);
  line-height: 1.55;
  color: var(--ink2);
}

.motion-thread,
.motion-recap {
  margin: 0 0 26px;
  padding: 16px 20px 18px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card);
}
.motion-thread-label {
  display: block;
  font: var(--t1) var(--mono);
  letter-spacing: 0.16em;
  color: var(--menu-yellow);
}
.motion-thread > p {
  margin: 8px 0 12px;
  font-size:var(--t4);
  line-height: 1.5;
  color: var(--ink);
}
.motion-thread > p b {
  color: var(--menu-yellow);
  font-weight: 600;
}
.motion-thread ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: question;
}
.motion-thread li,
.motion-recap li {
  counter-increment: question;
  position: relative;
  padding-left: 24px;
  font-size:var(--t3);
  line-height: 1.45;
  color: var(--ink2);
}
.motion-thread li::before,
.motion-recap li::before {
  content: counter(question);
  position: absolute;
  left: 0;
  top: 0.1em;
  font: 600 var(--t2) var(--mono);
  color: var(--ink3);
}

.motion-stage .stage-step {
  color: var(--menu-yellow);
}
.motion-key {
  margin: 0 0 14px;
  padding: 12px 14px 6px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: #080d0b;
}
.motion-key-label {
  display: block;
  margin-bottom: 8px;
  font: var(--t1) var(--mono);
  letter-spacing: 0.16em;
  color: var(--ink3);
}
.motion-key p {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin: 0 0 8px;
  font-size:var(--t3) !important;
  line-height: 1.5 !important;
  color: var(--ink);
}
.motion-key p b {
  color: var(--menu-yellow);
  font-weight: 600;
}
/* the swatches repeat the marks drawn on the canvas */
.sw {
  flex: 0 0 26px;
  align-self: center;
  height: 3px;
  border-radius: 2px;
  background: var(--ink2);
}
.sw-back {
  background: #e8752a;
}
.sw-ahead {
  background: #57e09e;
}
.sw-now,
.sw-wall {
  background: #fdd563;
}
.sw-line {
  height: 1px;
  background: rgba(231, 245, 236, 0.5);
}
.sw-dash {
  height: 0;
  border-top: 2px dashed var(--ink);
  background: none;
  border-radius: 0;
}
.sw-ring,
.sw-dot,
.sw-num {
  flex-basis: 26px;
  height: 12px;
  background: none;
  position: relative;
}
.sw-ring::after,
.sw-dot::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 0;
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
}
.sw-dot::after {
  border: 0;
  background: #e8752a;
}
.sw-num::after {
  content: '01';
  position: absolute;
  left: 5px;
  top: -2px;
  font: var(--t1) var(--mono);
  color: var(--ink3);
}
.sw-band {
  height: 12px;
  background: rgba(253, 213, 99, 0.25);
  border-radius: 2px;
}
.sw-bar {
  flex-basis: 26px;
  height: 14px;
  background: linear-gradient(90deg, transparent 8px, var(--ink2) 8px 18px, transparent 18px);
  border-radius: 0;
}
.sw-inline {
  display: inline-block;
  width: 18px;
  margin: 0 6px 0 2px;
  vertical-align: middle;
}
.motion-stage .stage-take {
  font-size:var(--t4) !important;
}

.motion-recap {
  margin-top: 8px;
}
.motion-recap ol {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: question;
}
.motion-recap li {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: 4px 20px;
  padding-top: 9px;
  padding-bottom: 9px;
  border-top: 1px solid var(--rule);
}
.motion-recap li::before {
  top: 0.95em;
}
.motion-recap li b {
  color: var(--ink);
  font-weight: 600;
}
@media (max-width: 900px) {
  .motion-thread ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .motion-recap li {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .motion-thread ol {
    grid-template-columns: 1fr;
  }
}
@media (max-height: 780px) and (min-width: 761px) {
  .motion-key {
    padding: 8px 12px 3px;
    margin-bottom: 10px;
  }
  .motion-key p {
    margin-bottom: 5px;
    font-size:var(--t2) !important;
    line-height: 1.4 !important;
  }
  .motion-stage .stage-take {
    font-size:var(--t3) !important;
  }
}
/* the small labels on the opening boxes: larger and brighter (the orange was hard to see) */
.thesis.premise span {
  font-size:var(--t1);
  color: #ffa25e;
}
.thesis.premise > div:nth-child(2) span {
  color: var(--fig);
}
.thesis.premise > div:nth-child(3) span {
  color: var(--select);
}

/* ---- the front page opens on exactly one screen ----
   On a laptop or desktop window the whole introduction (picture header, creator line,
   the three boxes, the three words, the AI note and the disclaimer) fills the first
   screen and stops at its bottom edge: the picture header stretches or shrinks to take
   up whatever height is left. Smaller windows and phones keep the ordinary flow. */
.opening-notes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px 28px;
  align-items: start;
}
#motion-opening .opening-notes .origin-note,
#motion-opening .opening-notes .op-fine {
  margin: 0 !important;
  padding: 0 0 0 12px;
  border: 0;
  border-left: 2px solid var(--menu-yellow);
  font: var(--t2)/1.55 var(--sans) !important;
  letter-spacing: 0;
  color: var(--ink2);
}
#motion-opening .opening-notes .op-fine {
  border-left-color: var(--rule2);
  color: var(--ink3);
}
.opening-cue {
  display: none;
}
.hero-calendar {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 12px;
  margin: 12px auto 0 !important;
  font: var(--t1) var(--mono);
  letter-spacing: 0.16em;
  color: var(--ink2);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85);
}
.hero-calendar b {
  display: inline-block;
  min-width: 4ch;
  font: 600 var(--t5) var(--mono);
  letter-spacing: 0.04em;
  color: var(--menu-yellow);
}
.hero-calendar b.back {
  color: #ff9a55;
}
.hero-calendar b.ahead {
  color: #57e09e;
}
.hero-calendar i {
  min-width: 25ch;
  font-style: normal;
  letter-spacing: 0.1em;
  text-align: left;
  color: var(--ink3);
}
@media (min-width: 1000px) and (min-height: 640px) {
  #motion-page .motion-toc {
    margin-bottom: 0 !important;
  }
  #motion-opening {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    /* the title bar (38px) and the contents bar sit above it */
    height: calc(100vh - 38px - 62px);
    height: calc(100svh - 38px - 62px);
    min-height: 500px;
    padding: 12px 0 0;
    margin-bottom: 26px;
    border-bottom: 0;
  }
  #motion-opening > * {
    flex: none;
  }
  #motion-opening .page-hero {
    flex: 1 1 0;
    min-height: 150px;
    margin: 0 0 10px;
  }
  #motion-opening .page-hero::after {
    height: 14px;
  }
  #motion-opening .page-hero .dossier-title {
    padding-top: 4px;
    margin-bottom: 4px !important;
    font-size: var(--t7);
  }
  #motion-opening .page-hero .chaos-deck {
    max-width: none !important;
    margin-top: 2px !important;
    font-size: var(--t4) !important;
    line-height: 1.45 !important;
  }
  #motion-opening .metaline {
    margin: 0 0 10px;
  }
  #motion-opening .phone-recommendation {
    display: none;
  }
  #motion-opening .thesis.premise {
    margin: 0 0 10px;
  }
  #motion-opening .thesis.premise > div {
    padding: 11px 18px 12px;
  }
  #motion-opening .thesis.premise b {
    margin-bottom: 3px;
    font-size: var(--t4);
  }
  #motion-opening .thesis.premise span {
    margin-bottom: 4px;
  }
  #motion-opening .thesis.premise p {
    font-size:var(--t2);
    line-height: 1.45;
  }
  #motion-opening .word-keys {
    margin: 0 0 10px;
    padding: 8px 16px;
  }
  .opening-cue {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 8px 0 0 !important;
    padding-bottom: 8px;
    font: var(--t1) var(--mono);
    letter-spacing: 0.16em;
    color: var(--menu-yellow);
  }
  .opening-cue i {
    font-style: normal;
    font-size:var(--t3);
    animation: cue-nudge 1.8s ease-in-out infinite;
  }
}
@keyframes cue-nudge {
  0%,
  100% {
    transform: translateY(-2px);
    opacity: 0.55;
  }
  50% {
    transform: translateY(3px);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .opening-cue i {
    animation: none;
  }
}
@media (max-width: 999px) {
  .opening-notes {
    grid-template-columns: 1fr;
  }
  .hero-calendar {
    flex-wrap: wrap;
    gap: 4px 10px;
  }
  .hero-calendar i {
    min-width: 0;
    flex-basis: 100%;
    text-align: center;
  }
}

/* ---- for readers who only scan: the answer to each chart's question is the biggest text beside it ---- */
.stage-take .verdict {
  display: block;
  margin: 2px 0 4px;
  font: 600 var(--t6) / 1.15 var(--serif);
  letter-spacing: -0.01em;
  color: var(--ink);
}

#motion-page .stage-take .verdict {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-align: left;
}
@media (min-width: 1000px) and (min-height: 640px) {
  #motion-opening .word-keys div span {
    font-size:var(--t2);
  }
}
@media (min-width: 1000px) and (min-height: 640px) and (max-height: 720px) {
  #motion-opening .page-hero-cap {
    display: none;
  }
  #motion-opening .page-hero::after {
    height: 6px;
  }
  #motion-opening .hero-calendar {
    margin-top: 4px !important;
  }
}


/* =====================================================================
   TYPE SYSTEM (one place to change it)
   The stylesheet above grew a different size for almost every element.
   Every size in it has now been snapped to the steps below, and this
   block states what each step is for.

     11px  mono   labels and stamps (uppercase, quiet green-grey)
     13px         captions, notes, small print
     15px         supporting text, lists, table cells
     17px         reading text and ledes
     24px  serif  section headings (the only orange text besides data)
     hero  serif  the tab's name, once per tab, the same size on every tab

   Colour carries meaning, not decoration:
     white    text to read            yellow   what you can press, or where you are
     grey     labels and asides       orange / green   headings, and backward / forward in charts
   ===================================================================== */
:root {
  --gold: #e4cc73;
}
/* the tab's name stands alone and centred; the strip above it already says ACD */
.page-hero .dossier-title {
  font-size: 0 !important;
}
.page-hero .dossier-title .h1-acd {
  display: none !important;
}
:is(#leyline-page, #chaos-page, #theory-page, #doorway-page, #palimpsest-page, #fracture-page, #motion-page, .wrap) .page-hero .dossier-title .h1-name {
  font: 600 var(--t7) / 1.15 var(--serif) !important;
  letter-spacing: -0.01em;
  color: var(--ink);
}
/* labels: one voice everywhere */
.stage-step,
.motion-thread-label,
.motion-key-label,
.word-keys-label,
.drawer-label {
  font: var(--t1) var(--mono) !important;
  letter-spacing: 0.16em !important;
  color: var(--ink3) !important;
}
.thesis span {
  font-size:var(--t1) !important;
  letter-spacing: 0.16em;
}
/* words picked out inside running text are bold, not coloured */
.chaos-deck dfn,
.thesis dfn {
  color: var(--ink);
  font-weight: 600;
}
.motion-key p b,
.motion-thread > p b {
  color: var(--ink);
}

/* ---- the front page, quiet again ----
   One picture header (with the one moving thing: the calendar), the creator line,
   three boxes, and one line about AI. Nothing else on the first screen. */
#motion-opening .word-keys,
#motion-opening .opening-cue {
  display: none !important;
}
#motion-opening .opening-notes {
  grid-template-columns: 1fr;
  gap: 4px;
  margin-top: 4px;
}
#motion-opening .opening-notes .origin-note,
#motion-opening .opening-notes .op-fine {
  font-size:var(--t2) !important;
  border-left: 0;
  padding-left: 0;
  text-align: center;
  color: var(--ink3);
}
#motion-opening .opening-notes .origin-note {
  color: var(--ink2);
}
#motion-opening .opening-notes .origin-note b {
  color: var(--menu-yellow);
}
#motion-opening .opening-notes .op-fine b {
  color: var(--ink2);
}
#motion-opening .thesis.premise span,
#motion-opening .thesis.premise > div:nth-child(2) span,
#motion-opening .thesis.premise > div:nth-child(3) span {
  color: var(--ink3);
}
#motion-opening .thesis.premise p {
  font-size:var(--t3);
  line-height: 1.5;
}
.hero-calendar {
  margin-top: 18px !important;
  font-size:var(--t1);
  color: var(--ink2);
}
.hero-calendar b {
  font-size:var(--t5);
}
.hero-calendar i {
  color: var(--ink2);
}
@media (min-width: 1000px) and (min-height: 640px) {
  #motion-opening .thesis.premise {
    margin-bottom: 14px;
  }
  #motion-opening .thesis.premise > div {
    padding: 16px 20px 18px;
  }
  #motion-opening .thesis.premise b {
    margin-bottom: 6px;
    font-size:var(--t4);
  }
  #motion-opening .metaline {
    margin: 4px 0 14px;
  }
  #motion-opening {
    padding-bottom: 16px;
  }
}
/* beside each chart: question, a plain key, the answer. No inner boxes. */
.motion-key {
  padding: 0;
  border: 0;
  background: none;
}
.motion-key p {
  font-size:var(--t3) !important;
  color: var(--ink2);
}
.motion-stage .stage-take {
  font-size:var(--t3) !important;
}
#motion-page .stage-take .verdict {
  font: 600 var(--t5)/1.2 var(--serif);
  margin: 4px 0 6px;
}
.motion-thread,
.motion-recap {
  border: 0;
  background: none;
  padding-left: 0;
  padding-right: 0;
}
.motion-thread > p {
  font-size:var(--t4);
}
.motion-thread li,
.motion-recap li {
  font-size:var(--t3);
}


/* =====================================================================
   PHONES — one idea per screen
   Everything below applies to narrow screens only; a laptop never reads it.

   The rules of the phone layout:
     1. A chart section reads top to bottom as heading, one sentence, the
        picture, the answer. The picture is capped so those four fit one screen.
     2. A row of cards that sat side by side on a laptop becomes one row you
        swipe sideways, instead of a tall stack to scroll past.
     3. Wide charts keep their real size and scroll sideways; they are never
        squeezed until the labels cannot be read.
     4. Nothing you tap is smaller than a fingertip.
   ===================================================================== */
@media (max-width: 700px) {
  /* ---- 1. chart sections: heading, sentence, picture, answer ---- */
  .stage {
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
    text-align: left;
    gap: 12px !important;
    min-height: 0 !important;
    padding: 24px 0 28px !important;
  }
  .stage > .stage-brief {
    display: contents;
  }
  /* nothing in a section may be wider than the screen; wide charts scroll inside */
  .stage > *,
  .stage > .stage-brief > * {
    min-width: 0;
    max-width: 100%;
  }
  .stage > .stage-brief > * {
    order: 6;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .stage > .stage-brief > .stage-step {
    order: 1;
  }
  .stage > .stage-brief > h2,
  .stage > .stage-brief > h3 {
    order: 2;
    margin-top: -6px !important;
  }
  .stage > .stage-brief > .stage-lede {
    order: 3;
  }
  .stage > .stage-figure {
    order: 4;
  }
  /* read-outs that answer to the picture stay directly under it */
  .stage > .stage-brief > .stage-take,
  .stage > .stage-brief > .evidence-detail,
  .stage > .stage-brief > .hybrid-inspector,
  .stage > .stage-brief > .recon-inspector,
  .stage > .stage-brief > .ley-inspector,
  .stage > .stage-brief > .stage-readout,
  .stage > .stage-brief > .stage-mini,
  .stage > .stage-brief > .ley-chart,
  .stage > .stage-brief > .ley-result,
  .stage > .stage-brief > .pal-read,
  .stage > .stage-brief > .theory-frames {
    order: 5;
  }
  .stage > .stage-brief > details {
    order: 7;
  }
  /* the picture never takes more than about half the screen */
  .chaos-page .motion-card canvas {
    aspect-ratio: 1 / 1 !important;
    max-height: 44vh;
    max-height: 44svh;
  }
  #motion-page .motion-card canvas {
    aspect-ratio: 6 / 5 !important;
  }
  .stage-figure.watch-panel {
    height: 44vh !important;
    height: 44svh !important;
    min-height: 280px !important;
  }
  .stage-figure #lorenz-canvas,
  .stage-figure #hybrid-canvas {
    max-height: 40vh !important;
    max-height: 40svh !important;
  }
  /* a long list beside a chart scrolls in its own pane */
  #doorway-ledger .evidence {
    max-height: 46vh;
    max-height: 46svh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* ---- 2. rows of cards become one row to swipe ---- */
  .thesis,
  .obs-strip,
  .case-grid,
  #sitelist,
  .chaos-columns,
  .ley-columns,
  .ley-hypotheses,
  #theory-blind-chart,
  .hybrid-diagnostics,
  .ley-art-grid,
  .tests {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 10px !important;
    max-height: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .thesis::-webkit-scrollbar,
  .obs-strip::-webkit-scrollbar,
  .case-grid::-webkit-scrollbar,
  #sitelist::-webkit-scrollbar,
  .chaos-columns::-webkit-scrollbar,
  .ley-columns::-webkit-scrollbar,
  .ley-hypotheses::-webkit-scrollbar,
  #theory-blind-chart::-webkit-scrollbar,
  .hybrid-diagnostics::-webkit-scrollbar,
  .ley-art-grid::-webkit-scrollbar,
  .tests::-webkit-scrollbar {
    display: none;
  }
  .thesis > *,
  .obs-strip > *,
  .case-grid > *,
  #sitelist > *,
  .chaos-columns > *,
  .ley-columns > *,
  .ley-hypotheses > *,
  #theory-blind-chart > *,
  .hybrid-diagnostics > *,
  .ley-art-grid > *,
  .tests > * {
    flex: 0 0 86% !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    position: relative; /* hidden helper tables inside a card stay inside the row */
    scroll-snap-align: start;
    border: 1px solid var(--rule) !important;
    border-radius: var(--radius) !important;
    background-color: var(--card);
  }
  /* cards that hold a chart take the full width, so the chart is not clipped */
  .obs-strip > *,
  #theory-blind-chart > *,
  .hybrid-diagnostics > * {
    flex-basis: 100% !important;
  }
  .thesis > *,
  .case-grid > *,
  .chaos-columns > *,
  .ley-columns > *,
  .ley-hypotheses > *,
  .tests > *,
  #sitelist > * {
    padding: 14px 16px !important;
  }
  .ley-controls select,
  .hybrid-controls select,
  .chaos-controls select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .ley-controls label:has(select) {
    flex: 1 1 100% !important;
  }
  .swipe-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 8px 0 16px;
    font: var(--t1) var(--mono);
    letter-spacing: 0.16em;
    color: var(--ink3);
  }
  .swipe-hint i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--rule2);
    transition: background 0.2s, transform 0.2s;
  }
  .swipe-hint i.on {
    background: var(--ink);
    transform: scale(1.35);
  }
  .swipe-hint span {
    margin-left: 6px;
  }

  /* ---- 3. wide charts keep their size and scroll sideways ---- */
  .theory-chart:not(#theory-blind-chart) {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .theory-chart:not(#theory-blind-chart) > svg {
    min-width: 660px;
    max-height: none !important;
  }
  .stage-figure:has(> .theory-chart:not(#theory-blind-chart))::after,
  .stage-figure:has(#reset-chart)::after {
    content: 'SLIDE THE CHART SIDEWAYS  \2192';
    display: block;
    margin-top: 6px;
    text-align: center;
    font: var(--t1) var(--mono);
    letter-spacing: 0.16em;
    color: var(--ink3);
  }
  #reset-chart {
    overflow-x: auto;
  }
  #reset-chart svg {
    min-width: 540px;
  }
  .table-scroll,
  .chaos-table-wrap,
  .lab-table-wrap {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
  .table-scroll:has(> #erafig) {
    overflow-y: hidden !important;
  }
  .chaos-table-wrap table {
    min-width: 600px;
  }
  /* a four-column register fits a phone without scrolling */
  .table-scroll:has(> #idmtable) table {
    min-width: 0;
  }

  /* ---- 4. fingertip-sized controls ---- */
  .ledger-mark {
    width: 30px !important;
    height: 30px !important;
  }
  #ledger-marks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 3px;
  }
  .topline button,
  #record-motion {
    min-height: 34px;
    padding-left: 14px;
    padding-right: 14px;
  }
  input[type='checkbox'] {
    width: 20px;
    height: 20px;
  }
  input[type='range'] {
    min-height: 34px;
  }
  .chaos-page details > summary,
  .wrap details > summary {
    padding: 9px 0;
  }
  .crt-tb-x {
    min-width: 40px;
    min-height: 34px;
  }

  /* ---- the Record ---- */
  .op-grid.op-grid-two {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .plate img {
    aspect-ratio: 16 / 8 !important;
  }
  .plate {
    margin: 12px 0 !important;
  }
  .phone-event {
    padding-top: 7px !important;
    padding-bottom: 5px !important;
  }
  .phone-event svg {
    margin-top: -4px;
  }
  .geo-stage .globewrap {
    display: flex !important;
    flex-direction: column;
  }
  .geo-stage .geo-side {
    order: -1;
  }
  .geo-stage #globe {
    max-height: 34vh;
    max-height: 34svh;
    width: auto !important;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    display: block;
  }
  #sitelist > * {
    text-align: left;
  }

  .stage-step {
    letter-spacing: 0.08em !important;
  }
  .hero-calendar > span {
    font-size: var(--t1) !important;
    letter-spacing: 0.14em !important;
  }

  /* ---- the front page: hero, the two notes, then the three cards ---- */
  #motion-opening {
    display: flex !important;
    flex-direction: column;
  }
  #motion-opening > * {
    order: 5;
  }
  #motion-opening > .page-hero {
    order: 1;
  }
  #motion-opening > .phone-recommendation {
    order: 2;
  }
  #motion-opening > .opening-notes {
    order: 3;
  }
  #motion-opening > .thesis {
    order: 4;
  }
  #motion-opening > .metaline {
    order: 8;
  }
  #motion-opening > .opening-cue {
    order: 9;
  }
}


/* ---- chapter logos in the story timeline (Record > Chapter Placement) ----
   A main-story chapter shows its logo beside its title; the logo plays its short film
   while the pointer rests on it. Art: Reverse: 1999 chapter logos. */
.ev-chip.ev-logo {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  grid-template-rows: 1fr auto 1fr;
  column-gap: 12px;
  align-content: center;
  min-width: 232px;
  padding: 6px 12px 6px 6px;
}
.ev-logo .ev-art {
  grid-row: 1 / 4;
  position: relative;
  display: block;
  width: 58px;
  aspect-ratio: 310 / 510;
  overflow: hidden;
  border-radius: 6px;
  background: #17171c;
}
.ev-logo .ev-art img,
.ev-logo .ev-art video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ev-logo .ev-tag {
  align-self: end;
}
.ev-logo .ev-d {
  align-self: start;
}
@media (max-width: 700px) {
  /* each era's stories sit in one row to swipe, instead of a long stack */
  .ev-row {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .ev-row::-webkit-scrollbar {
    display: none;
  }
  .ev-row > .ev-chip {
    flex: 0 0 auto;
    width: auto !important;
    max-width: 78% !important;
    min-width: 150px;
    scroll-snap-align: start;
  }
  .ev-row > .ev-chip.ev-logo {
    min-width: 236px;
  }
  /* Chapters by Era: the stacked rows wrap instead of running off the side */
  .table-scroll:has(> #erafig) table {
    min-width: 0 !important;
    width: 100%;
  }
  #erafig td {
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  #ledger-marks .ledger-mark {
    flex: 1 1 0;
    min-width: 0;
    max-width: 30px;
    width: auto !important;
    aspect-ratio: 1 / 1;
    height: auto !important;
  }
  #ledger-marks {
    flex-wrap: nowrap !important;
    gap: 3px !important;
  }
}


/* ---- ACD WATCH: the chapter reel, a fifth column that stays up on all three screens ---- */
#sandbox-window[data-mode='watch'] #sb-watch {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(150px, 0.56fr);
  grid-template-areas:
    'tape tape tape tape tape'
    'helix helix board board reel'
    'helix helix trace dial reel'
    'log bars portrait stats reel'
    'cmd cmd cmd cmd cmd';
}
#sandbox-window[data-mode='watch'] #sb-watch[data-screen='2'] {
  grid-template-areas:
    'tape tape tape tape tape'
    'sim sim matrix clocks reel'
    'sim sim room room reel'
    'feed forecast forecast shelf reel'
    'cmd cmd cmd cmd cmd';
}
#sandbox-window[data-mode='watch'] #sb-watch[data-screen='3'] {
  grid-template-areas:
    'tape tape tape tape tape'
    'scribe scribe arcs arcs reel'
    'scribe scribe echo ridge reel'
    'board evid evid tally reel'
    'cmd cmd cmd cmd cmd';
}
.watch-reel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.reel-stage {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  margin: 6px 6px 0;
  background: #17171c;
  overflow: hidden;
}
.reel-stage img,
.reel-stage video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* the still sits under the film and only shows where no film can play */
.reel-stage video:not([hidden]) {
  background: #17171c;
}
.reel-name {
  display: grid;
  gap: 3px;
  padding: 9px 8px 6px;
  text-align: center;
}
.reel-name span {
  font: var(--t1) var(--mono);
  letter-spacing: 0.14em;
  color: var(--ink3);
}
.reel-name span:first-child {
  color: var(--main);
}
.reel-name strong {
  font: 600 var(--t3) / 1.25 var(--serif);
  color: var(--ink);
  text-wrap: balance;
}
.reel-pips {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  padding: 0 6px 6px;
}
.reel-pips button {
  padding: 3px 0;
  border: 1px solid var(--rule);
  background: none;
  color: var(--ink3);
  font: var(--t1) var(--mono);
  cursor: pointer;
}
.reel-pips button:hover {
  border-color: var(--menu-yellow);
  color: var(--menu-yellow);
}
.reel-pips button.on {
  border-color: var(--select);
  background: rgba(253, 213, 99, 0.14);
  color: var(--select);
}
@media (max-width: 1000px) {
  #sandbox-window[data-mode='watch'] #sb-watch {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 440px 300px 260px 250px 240px 230px auto 240px 420px auto;
    grid-template-areas: 'tape' 'helix' 'board' 'trace' 'dial' 'bars' 'portrait' 'stats' 'log' 'reel' 'cmd';
  }
  #sandbox-window[data-mode='watch'] #sb-watch[data-screen='2'] {
    grid-template-rows: auto 380px 300px 250px 250px 240px 230px 220px 420px auto;
    grid-template-areas: 'tape' 'sim' 'matrix' 'clocks' 'room' 'forecast' 'shelf' 'feed' 'reel' 'cmd';
  }
  #sandbox-window[data-mode='watch'] #sb-watch[data-screen='3'] {
    grid-template-rows: auto 380px 240px 280px 260px 230px 260px 190px 420px auto;
    grid-template-areas: 'tape' 'scribe' 'arcs' 'echo' 'ridge' 'board' 'evid' 'tally' 'reel' 'cmd';
  }
}


/* ---- Record: reference tables that fold away (the timeline above shows the same stories) ---- */
.record-fold {
  margin: 10px 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card);
}
.record-fold > summary {
  padding: 13px 16px;
  cursor: pointer;
  font: var(--t2) var(--mono);
  letter-spacing: 0.06em;
  color: var(--menu-yellow);
}
.record-fold > summary:hover {
  color: var(--select);
}
.record-fold[open] > summary {
  border-bottom: 1px solid var(--rule);
}
.record-fold > .figcap,
.record-fold > .table-scroll {
  margin: 12px 16px;
}
/* the picture plates are a pause between sections, not a section: a slimmer band */
@media (min-width: 701px) {
  .plate img {
    aspect-ratio: 1100 / 230;
  }
}


/* =====================================================================
   THE CENTURY LOOM — a view of its own in the sandbox (js/archive/loom.js)
   Same palette as the monitor wall. Flat 2.5D drawing on one canvas.
   ===================================================================== */
#sb-loom {
  display: none;
}
#sandbox-window[data-mode='loom'] #sb-loom {
  flex: 1;
  min-height: 0;
  display: grid;
  gap: 5px;
  padding: 6px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(250px, 0.9fr);
  grid-template-rows: minmax(0, 2.5fr) minmax(0, 1fr) auto;
  grid-template-areas:
    'loom loom loom key'
    'inv lived method diff'
    'cmd cmd cmd cmd';
  background: #050908;
  font-family: var(--mono);
}
.loom-stage canvas.free {
  cursor: grab;
  touch-action: none;
}
.loom-stage canvas.free:active {
  cursor: grabbing;
}
/* the four views, top right of the picture */
.loom-views {
  position: absolute;
  top: 28px;
  right: 8px;
  display: flex;
  gap: 4px;
}
.loom-views button {
  padding: 4px 9px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: rgba(5, 9, 8, 0.85);
  color: var(--ink3);
  font: var(--t1) var(--mono);
  letter-spacing: 0.08em;
  cursor: pointer;
}
.loom-views button:hover {
  border-color: var(--menu-yellow);
  color: var(--menu-yellow);
}
.loom-views button.on {
  border-color: var(--select);
  background: rgba(253, 213, 99, 0.12);
  color: var(--select);
}
.loom-freehint {
  position: absolute;
  top: 58px;
  right: 10px;
  margin: 0;
  font: var(--t1) var(--mono);
  color: var(--ink3);
  pointer-events: none;
}
/* the chapter logo, small, in a corner, without its name */
.loom-badge {
  position: relative;
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  margin: 4px auto 12px;
  opacity: 0.8;
  pointer-events: none;
}
.loom-badge img,
.loom-badge video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
}
/* the explanation of the part being shown, across the foot of the picture */
.loom-caption {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  margin: 0 auto;
  max-width: 760px;
  padding: 10px 14px;
  border: 1px solid var(--select);
  border-radius: 6px;
  background: rgba(5, 9, 8, 0.92);
  font: var(--t2) / 1.55 var(--mono);
  color: var(--ink2);
  pointer-events: none;
}
.loom-caption b {
  display: block;
  margin-bottom: 3px;
  color: var(--select);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* HOW TO READ */
.loom-key {
  overflow-y: auto;
  scrollbar-width: thin;
}
.loom-tour {
  margin: 8px 8px 4px;
  padding: 8px 10px;
  border: 1px solid var(--select);
  border-radius: 6px;
  background: rgba(253, 213, 99, 0.08);
  color: var(--select);
  font: var(--t1) var(--mono);
  letter-spacing: 0.12em;
  cursor: pointer;
}
.loom-tour:hover {
  background: rgba(253, 213, 99, 0.18);
}
.loom-parts {
  margin: 0;
  padding: 2px 8px;
  list-style: none;
}
.loom-parts button {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 8px;
  width: 100%;
  margin: 3px 0;
  padding: 7px 8px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: none;
  text-align: left;
  font: var(--t1) / 1.45 var(--mono);
  color: var(--ink2);
  cursor: pointer;
}
.loom-parts button:hover {
  border-color: var(--menu-yellow);
}
.loom-parts button.on {
  border-color: var(--select);
  background: rgba(253, 213, 99, 0.1);
}
.loom-parts b {
  display: block;
  font-weight: 700;
  color: var(--ink);
}
.loom-parts em {
  font-style: normal;
  color: var(--ink3);
}
.loom-parts .g {
  font-size: var(--t3);
  line-height: 1.2;
  text-align: center;
  color: var(--ink2);
}
.loom-parts .g-height {
  color: var(--main);
}
.loom-parts .g-fringe,
.loom-parts .g-old {
  color: var(--select);
}
.loom-note {
  margin: 6px 8px 10px;
  padding-top: 8px;
  border-top: 1px solid var(--rule);
  font: var(--t1) / 1.55 var(--mono);
  color: var(--ink3);
}
.loom-note b {
  font-weight: 400;
  color: var(--ink2);
}
.loom-text {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 6px 8px;
  overflow: hidden;
  white-space: pre-wrap;
  font: var(--t1) / 1.55 var(--mono);
  color: var(--ink2);
}
#loom-method {
  white-space: pre;
}
.loom-cmd #loom-input {
  width: 230px;
  border: 0;
  outline: 0;
  background: none;
  color: var(--select);
  font: var(--t1) var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.loom-cmd #loom-input::placeholder {
  color: #7a5a35;
}
#loom-mode {
  letter-spacing: 0.12em;
  color: var(--ink3);
}
#loom-clock {
  color: var(--menu-yellow);
  font-variant-numeric: tabular-nums;
}
/* the menu: the loom sits a little apart from the wall's three screens */
.drawer-apart {
  height: 1px;
  margin: 8px 12px 6px;
  background: var(--rule);
}
@media (max-width: 1000px) {
  #sandbox-window[data-mode='loom'] #sb-loom {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 460px 470px 240px 200px 250px 230px auto;
    grid-template-areas: 'loom' 'key' 'inv' 'lived' 'method' 'diff' 'cmd';
    overflow-y: auto;
  }
  .loom-caption {
    font-size: var(--t1);
  }
  .loom-cmd .watch-keys {
    display: none;
  }
  .loom-views {
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 60%;
  }
}

/* =====================================================================
   RESEARCH SANDBOX — MODELS & INSTRUMENTS (js/archive/six.js)
   Nine research terminals in the sandbox. One colour system for all of them:
   near-black teal, amber-gold for a Storm that throws the world back, ice-teal for
   one that throws it forward, menu yellow for what can be clicked. Mono throughout,
   with the site's serif for each instrument's name only. Two small sizes (--t1, --t2)
   for everything else.
   ===================================================================== */
#sb-six {
  display: none;
  --sx-line: rgba(242, 180, 90, 0.16);
  --sx-line2: rgba(143, 224, 208, 0.12);
  --sx-gold: #f2b45a;
  --sx-hot: #ffd08a;
  --sx-ice: #8fe0d0;
  --sx-panel: linear-gradient(180deg, rgba(10, 18, 16, 0.92), rgba(4, 9, 8, 0.96));
}
#sandbox-window[data-mode='six'] #sb-six {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 6px;
  padding: 6px 8px 8px;
  background: radial-gradient(120% 90% at 50% 40%, #07100e 0%, #020504 70%);
  font-family: var(--mono);
}
.sx-crumbs,
.sx-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 14px;
  border: 1px solid var(--sx-line);
  border-radius: 10px;
  background: rgba(4, 9, 8, 0.9);
  font-size: var(--t1);
  letter-spacing: 0.12em;
  color: var(--ink3);
  white-space: nowrap;
  overflow: hidden;
}
.sx-crumbs i {
  font-style: normal;
  color: var(--ink3);
}
.sx-crumbs b {
  padding: 3px 12px;
  border-radius: 12px;
  background: rgba(242, 180, 90, 0.12);
  color: var(--sx-gold);
  font-weight: 600;
}
.sx-crumbs em,
.sx-foot em {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-style: normal;
  white-space: pre;
}
.sx-foot > span + span::before {
  content: '│';
  margin-right: 12px;
  color: var(--rule2);
}
.sx-foot em span {
  margin: 0 6px;
  color: var(--rule2);
}
.sx-foot kbd {
  padding: 0 5px;
  border: 1px solid var(--rule2);
  border-radius: 4px;
  font: inherit;
  color: var(--menu-yellow);
}
.sx-foot b {
  font-weight: 400;
  color: var(--menu-yellow);
  font-variant-numeric: tabular-nums;
}
.sx-foot b.sx-live-word {
  color: var(--ink2);
}
#sx-hold {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  cursor: pointer;
}
#sx-hold:hover,
#sx-hold.on {
  color: var(--menu-yellow);
}
.sx-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sx-gold);
  box-shadow: 0 0 8px var(--sx-gold);
  animation: sx-blink 2s ease-in-out infinite;
}
.sx-dot.held {
  background: var(--ink3);
  box-shadow: none;
  animation: none;
}
@keyframes sx-blink {
  50% {
    opacity: 0.35;
  }
}

/* ---------- the grid every instrument is laid on ---------- */
.sx-grid {
  min-height: 0;
  display: grid;
  gap: 6px;
}
.sx-grid.switching > * {
  animation: sx-arrive 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.sx-grid.switching > *:nth-child(2) {
  animation-delay: 0.06s;
}
.sx-grid.switching > *:nth-child(3) {
  animation-delay: 0.12s;
}
.sx-grid.switching > *:nth-child(n + 4) {
  animation-delay: 0.18s;
}
@keyframes sx-arrive {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
.sx-panel,
.sx-card {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--sx-line);
  border-radius: 12px;
  background: var(--sx-panel);
  overflow: hidden;
}
.sx-panel > header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 14px 7px;
  font-size: var(--t1);
  letter-spacing: 0.14em;
  white-space: nowrap;
  overflow: hidden;
}
.sx-panel > header b {
  font-weight: 500;
  color: var(--ink2);
}
.sx-panel > header span {
  color: var(--ink3);
  letter-spacing: 0.06em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sx-body {
  position: relative;
  flex: 1;
  min-height: 0;
}
.sx-body > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.sx-stage {
  border-color: rgba(242, 180, 90, 0.2);
  background: #030706;
}
.sx-stage canvas {
  cursor: default;
}
.sx-side .sx-body,
.sx-scroll .sx-body {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(242, 180, 90, 0.25) transparent;
}

/* ---------- the instrument's name ---------- */
.sx-title {
  padding: 18px 18px 14px;
}
.sx-kicker {
  margin: 0 0 10px;
  font-size: var(--t1);
  letter-spacing: 0.2em;
  color: var(--sx-gold);
}
.sx-title h2 {
  margin: 0 0 12px;
  font: 400 var(--t5) / 1.1 var(--serif);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 0 24px rgba(242, 180, 90, 0.18);
}
.sx-line {
  margin: 0 0 14px;
  font-size: var(--t2);
  line-height: 1.55;
  color: var(--ink2);
}
.sx-quote {
  margin: 0 0 16px;
  padding: 10px 0 10px 14px;
  border-left: 1px solid rgba(242, 180, 90, 0.5);
  font: italic var(--t2) / 1.5 var(--serif);
  color: var(--ink2);
}
.sx-quote cite {
  display: block;
  margin-top: 6px;
  font: normal var(--t1) var(--mono);
  letter-spacing: 0.14em;
  color: var(--ink3);
}
.sx-sub {
  margin: 16px 0 8px;
  font-size: var(--t1);
  letter-spacing: 0.18em;
  color: var(--ink3);
}
.sx-rows {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 14px;
  margin: 0;
  font-size: var(--t1);
  letter-spacing: 0.08em;
}
.sx-rows dt {
  color: var(--ink3);
}
.sx-rows dd {
  margin: 0;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.sx-rows dd .g {
  color: var(--sx-gold);
}
.sx-rows dd .i {
  color: var(--sx-ice);
}
.sx-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sx-chips button {
  padding: 6px 12px;
  border: 1px solid var(--rule2);
  border-radius: 20px;
  background: transparent;
  font: var(--t1) var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink2);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.sx-chips button:hover {
  border-color: var(--menu-yellow);
  color: var(--menu-yellow);
}
.sx-chips button.on {
  border-color: var(--menu-yellow);
  background: rgba(253, 213, 99, 0.12);
  color: var(--menu-yellow);
}
.sx-core {
  width: 100%;
  height: 34px;
  display: block;
}
.sx-key {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--t1);
  line-height: 2;
  color: var(--ink3);
}
.sx-key i {
  display: inline-block;
  width: 14px;
  height: 3px;
  margin-right: 10px;
  vertical-align: middle;
  border-radius: 2px;
}
.k-gold {
  background: var(--sx-gold);
  box-shadow: 0 0 6px var(--sx-gold);
}
.k-ice {
  background: var(--sx-ice);
  box-shadow: 0 0 6px var(--sx-ice);
}
.k-beam {
  background: linear-gradient(90deg, transparent, var(--sx-hot));
}
.k-dim {
  background: var(--ink3);
}

/* ---------- the detail card (selected layer / event / node) ---------- */
.sx-card {
  padding: 14px 16px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(242, 180, 90, 0.25) transparent;
}
.sx-card > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--t1);
  letter-spacing: 0.18em;
  color: var(--ink3);
}
.sx-card > header span b,
.sx-card > header > span {
  color: var(--sx-gold);
}
.sx-card > header em {
  font-style: normal;
  color: var(--sx-gold);
}
.sx-card > header em::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  vertical-align: 1px;
}
.sx-card h3 {
  margin: 10px 0 4px;
  font: 400 var(--t5) / 1.15 var(--serif);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
}
.sx-card-sub {
  margin: 0 0 12px;
  font-size: var(--t1);
  letter-spacing: 0.1em;
  color: var(--sx-gold);
}
.sx-card p {
  margin: 0 0 10px;
  font-size: var(--t2);
  line-height: 1.55;
  color: var(--ink2);
}
.sx-card .sx-sub {
  margin: 14px 0 8px;
  padding-top: 12px;
  border-top: 1px solid var(--sx-line);
}
.sx-pic {
  flex: none;
  height: 84px;
  margin: 0 0 12px;
  border: 1px solid var(--sx-line);
  border-radius: 8px;
  background: #0b1210 center / cover no-repeat;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6);
  transition: background-image 0.4s;
}
.sx-pic.tall {
  height: 150px;
  background-size: cover;
}
.sx-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--t2);
  line-height: 1.75;
  color: var(--ink);
}
.sx-list li::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--sx-gold);
  box-shadow: 0 0 6px var(--sx-gold);
  vertical-align: 1px;
}
.sx-entries {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--t1);
}
.sx-entries li {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 8px;
  align-items: baseline;
  padding: 6px 4px;
  border-bottom: 1px solid rgba(238, 240, 230, 0.05);
  color: var(--ink2);
  letter-spacing: 0.04em;
}
.sx-entries li b {
  font-weight: 400;
  color: var(--ink3);
}
.sx-entries li em {
  font-style: normal;
  color: var(--ink3);
  font-variant-numeric: tabular-nums;
}
.sx-entries li.on {
  color: var(--ink);
}
.sx-entries li.on b,
.sx-entries li.on em {
  color: var(--sx-gold);
}
.sx-entries li.none {
  display: block;
  color: var(--ink3);
}
.sx-entries li[data-goto] {
  cursor: pointer;
}
.sx-entries li[data-goto]:hover {
  color: var(--menu-yellow);
}

/* bars (indicators) */
.sx-bars {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--t1);
}
.sx-bars li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px 54px;
  gap: 10px;
  align-items: center;
  padding: 4px 0;
  color: var(--ink2);
  letter-spacing: 0.05em;
}
.sx-bars li span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sx-bars i {
  height: 4px;
  border-radius: 2px;
  background: rgba(238, 240, 230, 0.08);
  overflow: hidden;
}
.sx-bars s {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--sx-ice);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sx-bars li.hot s {
  background: var(--sx-gold);
  box-shadow: 0 0 8px var(--sx-gold);
}
.sx-bars b {
  font-weight: 400;
  text-align: right;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.sx-bars li.hot b {
  color: var(--sx-gold);
}

/* the strip of event cards along the bottom (Chronology, Index Wheel) */
.sx-index {
  display: flex;
  gap: 8px;
  padding: 0 12px 12px;
  height: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(242, 180, 90, 0.25) transparent;
}
.sx-index button {
  position: relative;
  flex: 1 0 96px;
  min-width: 96px;
  padding: 0;
  border: 1px solid var(--sx-line2);
  border-radius: 8px;
  background: #0b1210 center / cover no-repeat;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  font: var(--t1) var(--mono);
  color: var(--ink2);
  transition: border-color 0.3s, opacity 0.3s, transform 0.3s;
}
.sx-index button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3, 7, 6, 0.15), rgba(3, 7, 6, 0.92) 78%);
}
.sx-index button span {
  position: absolute;
  z-index: 1;
  left: 8px;
  right: 6px;
  bottom: 7px;
  line-height: 1.35;
  letter-spacing: 0.03em;
}
.sx-index button span b {
  display: block;
  font-weight: 500;
  color: var(--ink);
}
.sx-index button:hover {
  border-color: var(--menu-yellow);
}
.sx-index button.on {
  border-color: var(--sx-gold);
  box-shadow: 0 0 0 1px var(--sx-gold), 0 0 18px rgba(242, 180, 90, 0.3);
}
.sx-index button.on span b {
  color: var(--sx-gold);
}
.sx-index button.dim {
  opacity: 0.3;
}
.sx-index button.ghost {
  border-style: dashed;
  cursor: default;
}

/* ---------- each instrument's layout ---------- */
.sx-strata {
  grid-template-columns: minmax(230px, 270px) minmax(0, 1fr) minmax(280px, 330px);
  grid-template-rows: minmax(0, 1fr) minmax(150px, 0.3fr);
  grid-template-areas: 'side main card' 'side main act';
}
.sx-chrono {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 330px);
  grid-template-rows: auto minmax(0, 1fr) minmax(130px, 0.26fr);
  grid-template-areas: 'head card' 'main card' 'index card';
}
.sx-relations {
  grid-template-columns: minmax(230px, 260px) minmax(0, 1fr) minmax(280px, 320px);
  grid-template-rows: minmax(0, 1fr) minmax(120px, 0.22fr);
  grid-template-areas: 'side main card' 'read dens card';
}
.sx-divergence {
  grid-template-columns: minmax(230px, 270px) minmax(0, 1fr) minmax(280px, 330px);
  grid-template-rows: auto minmax(0, 1fr) minmax(150px, 0.28fr);
  grid-template-areas: 'head head head' 'obs main card' 'b2 b1 b3';
}
.sx-signal {
  grid-template-columns: minmax(220px, 250px) minmax(0, 1fr) minmax(300px, 360px);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: 'head head head' 'side main right';
}
.sx-lattice {
  grid-template-columns: minmax(230px, 270px) minmax(0, 1fr) minmax(290px, 340px);
  grid-template-rows: minmax(0, 1fr) minmax(170px, 0.36fr);
  grid-template-areas: 'side main notes' 'side main curve';
}
.sx-memory {
  grid-template-columns: minmax(220px, 250px) minmax(0, 1fr) minmax(260px, 300px);
  grid-template-rows: minmax(0, 1fr) minmax(90px, 0.16fr);
  grid-template-areas: 'side main right' 'time time time';
}
.sx-fracture {
  grid-template-columns: minmax(250px, 290px) minmax(0, 1fr) minmax(280px, 320px);
  grid-template-rows: minmax(0, 1fr) minmax(130px, 0.22fr);
  grid-template-areas: 'side main right' 'log snaps right';
}
.sx-wheel {
  grid-template-columns: minmax(230px, 260px) minmax(0, 1fr) minmax(300px, 350px);
  grid-template-rows: minmax(0, 1fr) minmax(130px, 0.22fr);
  grid-template-areas: 'side main right' 'layers layers right';
}
.sx-contra {
  grid-template-columns: minmax(240px, 280px) minmax(0, 1fr) minmax(290px, 340px);
  grid-template-rows: minmax(0, 1fr) minmax(120px, 0.2fr);
  grid-template-areas: 'side main card' 'side load card';
}
.sx-prints {
  grid-template-columns: minmax(240px, 280px) minmax(0, 1fr) minmax(290px, 340px);
  grid-template-rows: minmax(0, 1fr) minmax(150px, 0.26fr);
  grid-template-areas: 'side main card' 'side matrix card';
}
/* Contradiction Board: the two claims, and the colour of each status */
#sb-six .cb-claim {
  margin: 8px 0;
  padding: 8px 10px;
  border: 1px solid var(--sx-line);
  border-radius: 8px;
  color: var(--ink2);
}
#sb-six .cb-claim b {
  display: block;
  margin-bottom: 4px;
  font-weight: 400;
  font-size: var(--t1);
  letter-spacing: 0.08em;
  color: var(--ink3);
}
#sb-six .cb-claim p {
  margin: 0;
}
#sb-six .cb-claim.win {
  border-color: rgba(255, 208, 138, 0.55);
  color: var(--ink);
}
#sb-six .cb-claim.lost {
  opacity: 0.5;
  text-decoration: line-through;
  text-decoration-color: rgba(238, 240, 230, 0.35);
}
#sb-six .cb-st-open {
  color: #e8752a;
}
#sb-six .cb-st-leaning {
  color: #ffd08a;
}
#sb-six .cb-st-settled {
  color: #b4c3ba;
}
#sb-six .cb-list li[data-pick],
#sb-six #cb-also li[data-pick] {
  cursor: pointer;
}
#sb-six .cb-list li[data-pick]:hover,
#sb-six #cb-also li[data-pick]:hover {
  color: var(--menu-yellow);
}
#sb-six .cb-list li.on {
  color: var(--ink);
}
.sx-isobar {
  grid-template-columns: minmax(240px, 280px) minmax(0, 1fr) minmax(290px, 340px);
  grid-template-rows: minmax(0, 1fr) minmax(130px, 0.22fr);
  grid-template-areas: 'side main card' 'side track card';
}
.sx-latent {
  grid-template-columns: minmax(240px, 280px) minmax(0, 1fr) minmax(290px, 340px);
  grid-template-rows: minmax(0, 1fr) minmax(150px, 0.26fr);
  grid-template-areas: 'side main card' 'side track card';
}
/* Latent Print: the forecast against the print taken */
#sb-six .lp-basis {
  margin: 4px 0 10px;
  color: var(--ink3);
}
#sb-six .lp-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
#sb-six .lp-table th,
#sb-six .lp-table td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--sx-line);
  text-align: left;
  font-weight: 400;
}
#sb-six .lp-table thead th {
  color: var(--ink3);
  letter-spacing: 0.08em;
}
#sb-six .lp-table tbody th {
  color: var(--ink3);
  letter-spacing: 0.06em;
}
#sb-six .lp-table td.g {
  color: #f2b45a;
}
#sb-six .lp-table td.i {
  color: #8fe0d0;
}
#sb-six .lp-table td.ok {
  color: var(--ink);
}
#sb-six .lp-table td.no {
  color: #e8752a;
}
#sb-six .lp-table tbody tr {
  transition: background-color 0.4s ease;
}
#sb-six .lp-table tbody tr.now {
  background: rgba(253, 213, 99, 0.08);
}
/* Storm Fingerprints: the print on the glass, drawn large in the card */
#sb-six canvas.fp-big {
  display: block;
  width: 100%;
  height: 190px;
}

/* a stack of sub-panels inside one grid cell */
.sx-stack {
  min-height: 0;
  display: grid;
  gap: 6px;
}
.sx-head {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 12px 18px;
  border: 1px solid var(--sx-line);
  border-radius: 12px;
  background: var(--sx-panel);
  min-width: 0;
  overflow: hidden;
}
.sx-head h2 {
  margin: 0;
  font: 400 var(--t5) / 1 var(--serif);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  text-shadow: 0 0 24px rgba(242, 180, 90, 0.18);
}
.sx-head .sx-kicker {
  margin: 0 0 6px;
}
.sx-head .sx-line {
  margin: 6px 0 0;
  font-size: var(--t1);
  letter-spacing: 0.1em;
  color: var(--ink3);
  white-space: nowrap;
}
.sx-head .sx-quote {
  margin: 0;
  padding: 2px 0 2px 14px;
  max-width: 340px;
}
.sx-head .sx-chips {
  margin-left: auto;
  flex-wrap: nowrap;
}
.sx-head .sx-rows {
  margin-left: auto;
}

/* tables (Signal Observatory) */
.sx-table {
  width: 100%;
  border-collapse: collapse;
  font: var(--t1) var(--mono);
  font-variant-numeric: tabular-nums;
}
.sx-table th {
  position: sticky;
  top: 0;
  padding: 6px 8px;
  background: #060d0b;
  text-align: left;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--ink3);
}
.sx-table td {
  padding: 5px 8px;
  border-top: 1px solid rgba(238, 240, 230, 0.05);
  color: var(--ink2);
  white-space: nowrap;
}
.sx-table tr[data-goto] {
  cursor: pointer;
}
.sx-table tr[data-goto]:hover td {
  color: var(--menu-yellow);
}
.sx-table tr.on td {
  color: var(--sx-gold);
  background: rgba(242, 180, 90, 0.08);
}
.sx-table td i {
  display: inline-block;
  height: 6px;
  margin-right: 2px;
  border-radius: 1px;
  background: currentColor;
  vertical-align: 1px;
}
/* check boxes (layer controls) */
.sx-checks {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--t1);
  letter-spacing: 0.1em;
}
.sx-checks button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 5px 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
  color: var(--ink3);
  cursor: pointer;
  text-align: left;
}
.sx-checks button::before {
  content: '';
  width: 10px;
  height: 10px;
  border: 1px solid var(--rule2);
  border-radius: 3px;
}
.sx-checks button.on {
  color: var(--ink);
}
.sx-checks button.on::before {
  border-color: var(--menu-yellow);
  background: var(--menu-yellow);
  box-shadow: inset 0 0 0 2px #0b1210;
}
.sx-checks button:hover {
  color: var(--menu-yellow);
}
/* numbered list of questions / sub views (Lattice, Memory) */
.sx-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sx-steps li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 6px;
  align-items: center;
  padding: 7px 10px;
  margin-bottom: 4px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: var(--t1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink3);
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.sx-steps li b {
  font: 400 var(--t2) var(--serif);
  color: inherit;
}
.sx-steps small {
  display: block;
  margin-top: 2px;
  font-size: var(--t1);
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ink3);
}
.sx-steps li.on small {
  color: var(--ink2);
}
.sx-steps li.on {
  border-color: rgba(242, 180, 90, 0.45);
  background: rgba(242, 180, 90, 0.08);
  color: var(--sx-gold);
}
.sx-steps li[data-pick] {
  cursor: pointer;
}
.sx-steps li[data-pick]:hover {
  color: var(--menu-yellow);
}
.sx-notes {
  padding: 4px 16px 12px;
}
.sx-note {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 4px 6px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(238, 240, 230, 0.06);
}
.sx-note:last-child {
  border-bottom: 0;
}
.sx-note > span {
  font-size: var(--t1);
  color: var(--sx-gold);
  letter-spacing: 0.1em;
}
.sx-note h4 {
  margin: 0 0 4px;
  font-size: var(--t1);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.sx-note p {
  margin: 0;
  font-size: var(--t2);
  line-height: 1.5;
  color: var(--ink2);
}
.sx-note.hot h4 {
  color: var(--sx-gold);
}
.sx-note div {
  grid-column: 2;
}
/* live event log (Fracture Chamber) */
.sx-log {
  margin: 0;
  padding: 2px 14px 10px;
  list-style: none;
  font-size: var(--t1);
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--ink2);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
}
.sx-log li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: sx-log 0.5s ease-out both;
}
.sx-log li b {
  font-weight: 400;
  color: var(--ink3);
  margin-right: 12px;
}
.sx-log li.hot {
  color: var(--sx-gold);
}
.sx-log li.ice {
  color: var(--sx-ice);
}
@keyframes sx-log {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }
}

/* memory layers: four small spheres that isolate a kind of thread */
.sx-layers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.sx-layers button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px 8px;
  border: 1px solid var(--sx-line2);
  border-radius: 8px;
  background: transparent;
  font: var(--t1) var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink3);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.sx-layers canvas {
  width: 100%;
  height: 40px;
  display: block;
}
.sx-layers button:hover,
.sx-layers button.on {
  border-color: var(--menu-yellow);
  color: var(--menu-yellow);
}
.sx-layers button.on {
  background: rgba(253, 213, 99, 0.06);
}
/* the selected corridor's name (Index Wheel) */
.sx-corridor {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
  padding: 9px 12px;
  border: 1px solid rgba(242, 180, 90, 0.55);
  border-radius: 8px;
  background: rgba(242, 180, 90, 0.07);
  font-size: var(--t1);
  letter-spacing: 0.1em;
}
.sx-corridor b {
  font-weight: 500;
  color: var(--sx-gold);
}
.sx-corridor span {
  color: var(--ink);
}
/* related archive items: a picture and three lines */
.sx-items {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.sx-items li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(238, 240, 230, 0.05);
}
.sx-items i {
  width: 34px;
  height: 52px;
  background-size: cover !important;
  border: 1px solid var(--sx-line);
  border-radius: 6px;
  background: #0b1210 center / cover no-repeat;
}
.sx-items span {
  font-size: var(--t1);
  line-height: 1.45;
  color: var(--ink2);
  letter-spacing: 0.03em;
}
.sx-items b {
  display: block;
  font-weight: 500;
  color: var(--ink);
}
.sx-items em {
  display: block;
  font-style: normal;
  color: var(--ink3);
}
@media (max-width: 1000px) {
  #sandbox-window[data-mode='six'] #sb-six {
    grid-template-rows: auto max-content auto;
    overflow-y: auto;
  }
  .sx-grid > *,
  .sx-stack > * {
    min-height: auto;
  }
  .sx-grid > .sx-stack {
    grid-template-rows: none !important;
    grid-auto-rows: max-content;
  }
  .sx-stack > .sx-panel {
    min-height: 200px;
  }
  .sx-card {
    overflow: visible;
  }
  .sx-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    grid-auto-rows: max-content;
    grid-template-areas: none !important;
  }
  .sx-grid > * {
    grid-area: auto !important;
  }
  .sx-body {
    flex: none;
  }
  .sx-stage .sx-body {
    height: 480px;
  }
  .sx-panel:not(.sx-side):not(.sx-stage) .sx-body {
    min-height: 180px;
  }
  .sx-side .sx-body,
  .sx-scroll .sx-body,
  .sx-head {
    overflow: visible;
  }
  .sx-head {
    flex-wrap: wrap;
  }
  .sx-head h2,
  .sx-head .sx-line {
    white-space: normal;
  }
  .sx-crumbs em,
  .sx-foot > span,
  .sx-foot em > *:not(#sx-clock):not(.sx-dot):not(.sx-live-word) {
    display: none;
  }
}
/* the menu: models and instruments sit under their own small headings */
.drawer-sub {
  margin: 12px 0 2px 12px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  font: var(--t1) var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink2);
}
.drawer-sandbox-doors > .drawer-sub:first-child {
  margin-top: 4px;
  padding-top: 0;
  border-top: 0;
}
.drawer-six {
  display: grid;
  grid-template-columns: 1fr;
}
#site-drawer .drawer-six button:not(#drawer-close) {
  padding: 7px 12px;
  margin: 1px 0;
  font-size: var(--t2);
}
/* the sandbox's doors appear only once the passcode has been given */
.drawer-sandbox.locked .drawer-sandbox-doors,
.drawer-sandbox:not(.locked) #tb-gate {
  display: none;
}
.loom-views-sep {
  width: 1px;
  margin: 2px 4px;
  background: var(--rule2);
}
.loom-views [data-auto].on {
  border-color: var(--fig);
  background: rgba(87, 224, 158, 0.12);
  color: var(--fig);
}

/* ---- Model Room: game backgrounds behind each model's title strip, posters in tall cards ---- */
#sb-six .sx-themed {
  background-image: linear-gradient(90deg, rgba(8, 15, 13, 0.92) 0%, rgba(8, 15, 13, 0.72) 45%, rgba(8, 15, 13, 0.4) 100%), var(--head-img);
  background-size: cover;
  background-position: center;
}
#sb-six .sx-pic.tall.poster {
  position: relative;
  overflow: hidden;
}
#sb-six .sx-pic.tall.poster span {
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
}
#sb-six .sx-pic.tall.poster .pp-scene {
  inset: -14px;
  background-size: cover;
  filter: blur(2.5px) brightness(0.72) saturate(0.9);
}
#sb-six .sx-pic.tall.poster .pp-poster {
  inset: 6px;
  background-size: contain;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.7));
}
#sb-gate {
  background: linear-gradient(rgba(6, 12, 14, 0.82), rgba(6, 12, 14, 0.92)), url('../img/theme/gate.webp') center / cover;
}

/* ---- Model Room: one bar on top (the title bar names the room, group and model);
        the old second (UNIT Σ) and third (breadcrumb) bars are gone ---- */
#sb-topbar {
  display: none;
}
#sandbox-window[data-mode='six'] #sb-six {
  grid-template-rows: minmax(0, 1fr) auto;
}
.crt-tb-tab .tb-path {
  color: var(--ink3);
  font-weight: 400;
}
/* the controls, in the same order in every model: AUTO · STEP · PHASE · HOLD · FULL SCREEN */
.sx-foot {
  gap: 6px;
}
.sx-foot > span + span::before {
  content: none;
}
.sx-ctl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px;
  border: 0;
  border-radius: 6px;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  color: var(--ink2);
  cursor: pointer;
}
.sx-ctl:hover kbd,
.sx-ctl:focus-visible kbd {
  background: rgba(253, 213, 99, 0.14);
}
.sx-ctl-word {
  margin-right: 10px;
}
.sx-auto {
  padding: 4px 12px;
  margin-right: 10px;
  border: 1px solid var(--rule2);
  border-radius: 14px;
}
.sx-auto.on {
  border-color: rgba(87, 224, 158, 0.6);
  background: rgba(87, 224, 158, 0.1);
}
.sx-auto.on .sx-live-word {
  color: #57e09e !important;
}
.sx-auto.held {
  border-color: var(--menu-yellow);
  background: rgba(253, 213, 99, 0.12);
}
.sx-auto.held .sx-live-word {
  color: var(--menu-yellow) !important;
}
.sx-pick {
  display: inline-flex;
  gap: 3px;
}
.sx-ctls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.sx-pick button {
  min-width: 28px;
  padding: 3px 4px;
  border: 1px solid var(--rule2);
  border-radius: 6px;
  background: none;
  font: inherit;
  letter-spacing: 0.04em;
  color: var(--ink3);
  cursor: pointer;
}
.sx-pick button:hover {
  border-color: var(--menu-yellow);
  color: var(--menu-yellow);
}
.sx-pick button.on {
  border-color: var(--sx-gold);
  background: rgba(242, 180, 90, 0.16);
  color: var(--sx-hot);
}
.sx-foot-beat {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 10px;
}
#sx-clock {
  margin-left: 10px;
}
@media (max-width: 1300px) {
  .sx-foot-beat {
    display: none;
  }
}
@media (max-width: 1000px) {
  .sx-foot {
    flex-wrap: wrap;
    white-space: normal;
  }
  .sx-pick {
    margin-left: 0;
    flex-wrap: wrap;
  }
}

/* "how to read" lists in the Model Room: a bold name, then what it stands for */
.sx-howto {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
.sx-howto li {
  padding: 5px 0;
  border-top: 1px solid var(--sx-line2);
  font-size: var(--t1);
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--ink2);
  white-space: normal;
}
.sx-howto li:first-child {
  border-top: 0;
}
.sx-howto b {
  display: block;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sx-gold);
}
.sx-howto i {
  display: inline-block;
  width: 14px;
  height: 3px;
  margin: 0 2px 3px 6px;
  vertical-align: middle;
  border-radius: 2px;
}
.sx-howto i.k-ice { background: var(--sx-ice); }
.sx-howto i.k-gold { background: var(--sx-gold); }
.sx-hint {
  margin: 8px 0 0;
  font-size: var(--t1);
  line-height: 1.5;
  color: var(--ink3);
  white-space: normal;
}

/* game backgrounds, very dim, behind the Night Watch wall and the Century Loom */
#sandbox-window[data-mode='watch'] #sb-watch,
#sandbox-window[data-mode='loom'] #sb-loom {
  background-size: cover;
  background-position: center;
}
#sandbox-window[data-mode='watch'] #sb-watch {
  background-image: linear-gradient(rgba(5, 9, 8, 0.9), rgba(5, 9, 8, 0.94)), url('../img/theme/watch-bg.webp');
}
#sandbox-window[data-mode='loom'] #sb-loom {
  background-image: linear-gradient(rgba(5, 9, 8, 0.9), rgba(5, 9, 8, 0.94)), url('../img/theme/loom-bg.webp');
}
#sb-six .sx-body:has(> .sx-howto) {
  overflow-y: auto;
}
@media (max-width: 700px) {
  .crt-tb-tab .tb-path {
    display: none;
  }
}

/* ---- the menu: three yellow headings (The Record · Theories · Model Room). Inside the
        Model Room, each group's name runs down its side, so every button lines up. ---- */
.drawer-cluster {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 0 6px;
  margin: 6px 0 0;
}
.drawer-cluster + .drawer-cluster {
  padding-top: 6px;
  border-top: 1px solid var(--rule);
}
.drawer-side {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  justify-self: center;
  align-self: stretch;
  text-align: center;
  padding: 4px 0;
  border-left: 1px solid var(--rule2);
  font: var(--t1) var(--mono);
  letter-spacing: 0.2em;
  color: var(--ink3);
}
.drawer-cluster:has(button.active) .drawer-side,
.drawer-cluster:hover .drawer-side {
  color: var(--menu-yellow);
  border-color: var(--menu-yellow);
}

/* TAB walks through each model's own buttons: show clearly which one is reached */
#sandbox-window button:focus-visible,
#sandbox-window [data-goto]:focus-visible,
#sandbox-window [tabindex]:focus-visible {
  outline: 2px solid var(--menu-yellow);
  outline-offset: 2px;
}

/* the one AUTO switch of the Night Watch and the Century Loom, styled as in the models */
.room-auto {
  padding: 3px 12px;
  border: 1px solid var(--rule2);
  border-radius: 14px;
  background: none;
  font: inherit;
  letter-spacing: 0.12em;
  color: var(--ink2);
  cursor: pointer;
  margin-left: auto;
  white-space: nowrap;
}
.room-auto.on {
  border-color: rgba(87, 224, 158, 0.6);
  background: rgba(87, 224, 158, 0.1);
  color: #57e09e;
}
.room-auto.held {
  border-color: var(--menu-yellow);
  background: rgba(253, 213, 99, 0.12);
  color: var(--menu-yellow);
}
.watch-cmd .room-keys {
  margin-left: 4px;
}

/* ---- one type scale with the theory tabs: reading text in the models uses the same
        face and step as the theories' small text; labels and figures stay in mono ---- */
#sb-six p:not(.sx-kicker):not(.sx-sub):not(.sx-card-sub):not(.sx-line),
#sb-six .sx-howto li,
#sb-six .sx-quote,
#sb-loom .loom-note,
#sb-loom .loom-parts em {
  font-family: var(--sans);
  font-size: var(--t2);
  line-height: 1.55;
  letter-spacing: 0;
}
#sb-six .sx-howto b {
  font-family: var(--mono);
  font-size: var(--t1);
}
#sb-six .sx-quote {
  font-family: var(--serif);
  font-style: italic;
}

/* Storm Constellations: the star-chart key is a compact list */
#sb-six .sx-starkey li {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  padding: 4px 8px;
  margin: 0;
  cursor: pointer;
}
#sb-six .sx-starkey li b {
  color: var(--sx-ice);
  font-weight: 400;
}
#sb-six .sx-starkey li em {
  font-style: normal;
  color: var(--ink3);
}
#sb-six .sx-starkey li.on,
#sb-six .sx-starkey li:hover {
  color: var(--menu-yellow);
}

/* ONE style for the AUTO / HELD switch everywhere (models, Night Watch, Century Loom) */
#sb-six .sx-auto,
.room-auto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  height: 24px;
  margin: 0 8px 0 0;
  padding: 0 12px;
  border: 1px solid var(--rule2);
  border-radius: 12px;
  background: none;
  font: var(--t1) var(--mono);
  letter-spacing: 0.12em;
  color: var(--ink2);
  cursor: pointer;
  white-space: nowrap;
}
#sb-six .sx-auto .sx-dot {
  display: none;
}
#sb-six .sx-auto .sx-live-word {
  font: inherit;
  letter-spacing: inherit;
}
#sb-six .sx-auto.on,
.room-auto.on {
  border-color: rgba(87, 224, 158, 0.6);
  background: rgba(87, 224, 158, 0.1);
  color: #57e09e;
}
#sb-six .sx-auto.on .sx-live-word {
  color: #57e09e !important;
}
#sb-six .sx-auto.held,
.room-auto.held {
  border-color: var(--menu-yellow);
  background: rgba(253, 213, 99, 0.12);
  color: var(--menu-yellow);
}
#sb-six .sx-auto.held .sx-live-word {
  color: var(--menu-yellow) !important;
}
.watch-cmd .room-auto {
  margin-left: auto;
}

/* ---- Fracture Theory (js/archive/fracture.js) ---- */
#fracture-page[hidden] {
  display: none !important;
}
#fracture-page {
  padding-top: 0 !important;
}

/* menu headings fold their lists away */
#site-drawer .drawer-set > .drawer-group {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
#site-drawer .drawer-set > .drawer-group::after {
  content: '▾';
  margin-left: auto;
  margin-right: 10px;
  font-size: var(--t1);
  color: var(--ink3);
  transition: transform 0.2s;
}
#site-drawer .drawer-set.collapsed > .drawer-group::after {
  transform: rotate(-90deg);
}
#site-drawer .drawer-set > .drawer-group:hover,
#site-drawer .drawer-set > .drawer-group:focus-visible {
  color: var(--menu-yellow);
  outline: none;
}
#site-drawer .drawer-set.collapsed > :not(.drawer-group) {
  display: none !important;
}
.gate-waiver.gate-guest li b {
  margin-bottom: 4px;
}

/* performance: each chart box keeps its painting to itself, so a chart redrawing does not
   make the browser repaint the page around it */
.motion-card,
.stage-figure,
.sx-panel,
.sx-card,
.watch-panel {
  contain: paint;
}

/* guest link, before the scripts arrive: the Model Room door is the first thing on screen */
html.guest-boot .wrap,
html.guest-boot main.chaos-page {
  display: none !important;
}
html.guest-boot #sandbox-window {
  display: flex;
}

/* =====================================================================
   NAVIGATION PASS — 27 October 2026
   Title bar symbols, the menu's section symbols, one size for every menu item,
   the keyboard dot, and one background for all three sections.
   ===================================================================== */

/* --- title bar: ACD TERMINAL │ R1999-Σ │ TAB NAME --- */
.crt-tb-suffix {
  flex-shrink: 0;
  margin-left: 10px;
  padding-left: 12px;
  border-left: 1px solid var(--rule2);
  color: var(--ink2);
  letter-spacing: 0.08em;
}
.crt-sym {
  display: inline-block;
  min-width: 1.1em;
  font-style: normal;
  font-weight: 600;
  color: var(--menu-yellow);
  text-align: center;
}

/* --- menu: each section heading carries its symbol --- */
#site-drawer .drawer-set > .drawer-group .dg-sym {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-right: 2px;
  border: 1px solid currentColor;
  border-radius: 6px;
  font-size: var(--t2);
  letter-spacing: 0;
  line-height: 1;
}
#site-drawer .drawer-set:has(button.active) > .drawer-group .dg-sym {
  color: var(--menu-yellow);
  background: #e4cc7314;
}

/* --- menu: the Model Room's items are the same size as the theories' --- */
#site-drawer .drawer-six button:not(#drawer-close) {
  padding: 11px 12px;
  margin: 3px 0;
  font-size: var(--t3);
}
.drawer-side {
  font-size: var(--t2);
  font-weight: 600;
  letter-spacing: 0.22em;
}

/* --- menu: the keyboard's place is a dot; the traced outline waits a second --- */
#site-drawer button[id^='tb-']:focus,
#site-drawer button[id^='tb-']:focus-visible {
  outline: none;
}
#site-drawer button[id^='tb-']::before {
  content: '';
  position: absolute;
  left: -9px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--menu-yellow);
  box-shadow: 0 0 8px #e4cc73aa;
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 0.15s, transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}
#site-drawer button[id^='tb-']:focus-visible::before {
  opacity: 1;
  transform: none;
}
#site-drawer button[id^='tb-']:focus-visible:not(.dwell):not(:hover):not(.active) .menu-words {
  background-position: 100% 0;
}
#site-drawer button[id^='tb-']:focus-visible:not(.dwell):not(:hover) .menu-border rect {
  stroke-dashoffset: 100;
}
#site-drawer button[id^='tb-'].dwell .menu-words {
  background-position: 0 0;
}
#site-drawer button[id^='tb-'].dwell .menu-border rect {
  stroke-dashoffset: 0;
}
#site-drawer button[id^='tb-']:focus-visible:not(.dwell):not(.active) {
  color: var(--ink);
}

/* --- one background for all three sections: the Model Room now sits on the same
       paper, grain and green-edged wash as the Case File and the Theories --- */
#sandbox-window {
  background-color: var(--paper);
  background-image:
    linear-gradient(90deg, rgba(87, 224, 158, 0.085), rgba(87, 224, 158, 0) 13%, rgba(87, 224, 158, 0) 87%, rgba(87, 224, 158, 0.085)),
    radial-gradient(120% 70% at 50% 0%, rgba(143, 224, 196, 0.05), rgba(143, 224, 196, 0) 70%),
    url(../img/paper-grain.webp),
    radial-gradient(rgba(232, 117, 42, 0.05) 1px, transparent 1px);
  background-size: auto, auto, 160px 160px, 26px 26px;
}
#sandbox-window[data-mode='six'] #sb-six {
  background: none;
}
#sb-six {
  --sx-panel: linear-gradient(180deg, rgba(19, 29, 31, 0.9), rgba(13, 20, 23, 0.94));
}
#sb-six .sx-crumbs,
#sb-six .sx-foot {
  background: rgba(13, 20, 23, 0.92);
}
.sx-stage {
  background: var(--paper);
}

/* --- the three seals (Laplace · ACD · the Foundation) close every tab before its
       method or references, with one line under them --- */
.seal-block {
  margin: 34px 0 22px;
  text-align: center;
}
.seal-block .seal {
  padding: 0;
}
.seal-note {
  margin: 12px 0 0;
  font: var(--t1) var(--mono);
  letter-spacing: 0.18em;
  padding-left: 0.18em; /* letter-spacing adds space after the last letter; balance it */
  text-transform: uppercase;
  color: var(--ink3);
}
/* a model with no modes hides SHIFT · MODE */
#sb-six .sx-mode[hidden] {
  display: none !important;
}
/* phones: the section symbol stays in the bar, its R1999- prefix goes */
@media (max-width: 520px) {
  .crt-tb-suffix {
    display: inline;
    margin-left: 8px;
    padding-left: 8px;
  }
  .crt-tb-suffix .crt-code {
    display: none;
  }
}
/* the two outer seals have different shapes (round, tall): give each the same box so
   the ACD mark sits exactly in the middle, over the line below */
.seal-block .seal img {
  width: 50px;
  height: 50px !important;
  object-fit: contain;
}
.seal-block .seal .seal-mark {
  width: 42px;
  height: 42px !important;
}

/* --- the seal line is as soft as the seals above it --- */
.seal-note {
  color: var(--ink2);
  opacity: 0.55;
  filter: blur(0.35px);
  text-shadow: 0 0 6px rgba(226, 230, 223, 0.35), 0 0 14px rgba(226, 230, 223, 0.12);
}

/* --- menu: the dot sits at the right end of every item, in every section, and
       comes with the traced outline (mouse: at once · keyboard: after a second) --- */
#site-drawer button[id^='tb-']::before {
  left: auto;
  right: 14px;
}
#site-drawer button[id^='tb-'] .menu-words {
  padding-right: 18px;
}
#site-drawer button[id^='tb-']:hover::before,
#site-drawer button[id^='tb-'].dwell::before {
  opacity: 1;
  transform: none;
}

/* =====================================================================
   MAINTENANCE PASS — 28 October 2026
   The Secondary Models (Storm Fingerprints, The Storm Score, Storm Glyphs),
   their own menu section, and the GUIDE card every model can open.
   ===================================================================== */

/* --- layouts --- */
.sx-score {
  grid-template-columns: minmax(240px, 280px) minmax(0, 1fr) minmax(290px, 340px);
  grid-template-rows: minmax(0, 1fr) minmax(130px, 0.22fr);
  grid-template-areas: 'side main card' 'side melody card';
}
.sx-glyphs {
  grid-template-columns: minmax(240px, 280px) minmax(0, 1fr) minmax(290px, 340px);
  grid-template-rows: minmax(0, 1fr) minmax(150px, 0.26fr);
  grid-template-areas: 'side main card' 'side strip card';
}


#sb-six .sc-dyn {
  font: italic 700 var(--t3) / 1 var(--serif);
  color: var(--ink);
  margin-right: 4px;
}
#sb-six .sc-values li.on {
  color: var(--ink);
}
#sb-six .sc-values li.on b {
  color: var(--menu-yellow);
}


/* --- the guide card: opened with G or the GUIDE button, over the room --- */
#sb-six {
  position: relative;
}
.sx-guide {
  position: absolute;
  inset: 6px 8px 56px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(3, 7, 6, 0.62);
  animation: sx-guide-in 0.28s ease-out both;
}
.sx-guide[hidden] {
  display: none;
}
@keyframes sx-guide-in {
  from {
    opacity: 0;
  }
}
.sx-guide-card {
  width: min(620px, 92%);
  max-height: 92%;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(242, 180, 90, 0.25) transparent;
  padding: 18px 24px 16px;
  border: 1px solid rgba(253, 213, 99, 0.35);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(19, 29, 31, 0.98), rgba(10, 16, 18, 0.98));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  animation: sx-guide-card 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes sx-guide-card {
  from {
    transform: translateY(10px);
    opacity: 0;
  }
}
.sx-guide-card > header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 2px 12px;
}
.sx-guide-card > header span {
  font-size: var(--t1);
  letter-spacing: 0.2em;
  color: var(--menu-yellow);
}
.sx-guide-card > header h3 {
  grid-column: 1;
  margin: 4px 0 0;
  font: 400 var(--t5) / 1.1 var(--serif);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
}
.sx-guide-card > header button {
  grid-row: 1 / span 2;
  grid-column: 2;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--rule2);
  border-radius: 8px;
  background: none;
  font-size: 18px;
  line-height: 1;
  color: var(--ink2);
  cursor: pointer;
}
.sx-guide-card > header button:hover {
  border-color: var(--menu-yellow);
  color: var(--menu-yellow);
}
.sx-guide-what {
  margin: 12px 0 4px;
  font-size: var(--t2);
  line-height: 1.6;
  color: var(--ink);
}
.sx-guide-card .sx-sub {
  margin: 16px 0 6px;
}
.sx-guide-card .sx-howto li {
  font-size: var(--t2);
}
.sx-guide-card .sx-howto b {
  font-size: var(--t1);
}
.sx-guide-notice {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sx-guide-notice li {
  position: relative;
  padding: 4px 0 4px 18px;
  font-size: var(--t2);
  line-height: 1.55;
  color: var(--ink);
}
.sx-guide-notice li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.85em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sx-gold);
  box-shadow: 0 0 6px var(--sx-gold);
}
.sx-guide-foot {
  margin: 14px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--sx-line);
  font-size: var(--t1);
  letter-spacing: 0.06em;
  color: var(--ink3);
}
/* the GUIDE control stands out a little, so a first-time visitor finds it */
.sx-guide-btn kbd {
  border-color: rgba(253, 213, 99, 0.55) !important;
}
.sx-guide-btn.on kbd {
  background: rgba(253, 213, 99, 0.2);
}
.sx-guide-word {
  color: var(--menu-yellow);
}

/* --- the menu: the Secondary Models appear with the Model Rooms, after the passcode --- */
.drawer-secondary.locked {
  display: none;
}



/* Storm Glyphs: each part, what it means, then this Storm's value under it */
#sb-six .gl-parts .gl-here {
  display: block;
  margin-top: 2px;
  color: var(--ink);
}
#sb-six .sc-why li {
  font-size: var(--t1);
}
/* Storm Glyphs: the lexicon's parts and its check against the Record */
#sb-six .gl-parts li.on b { color: var(--menu-yellow); }
#sb-six .gl-kind { margin-left: 6px; font-weight: 400; letter-spacing: 0.1em; color: var(--ink3); }
#sb-six .gl-src { display: block; margin-top: 2px; font-size: var(--t1); color: var(--ink3); }
#sb-six .gl-src-record, #sb-six .gl-src-both { color: var(--sx-ice); }
#sb-six .gl-check li.gl-agrees b { color: var(--sx-ice); }
#sb-six .gl-check li.gl-conflict b { color: #e8752a; }
#sb-six .gl-check li.gl-caution b { color: var(--sx-hot); }

/* =====================================================================
   SCROLLBARS — 29 October 2026
   One design for every scrollbar in the terminal: the page itself (Case File,
   Theories), the menu, and the panels inside the Model Rooms. The track is a faint
   time rail, a hairline with a tick every 24 px like the site's chart axes; the thumb
   is a gold capsule with a small grip line, turning menu yellow when it can be grabbed.
   ===================================================================== */
:root {
  --sb-rail: rgba(242, 180, 90, 0.16);
  --sb-tick: rgba(242, 180, 90, 0.2);
  --sb-thumb: #8a6e3f;
  --sb-thumb-hot: #e4cc73;
  --sb-grip: rgba(8, 13, 16, 0.6);
}
/* Firefox: only colour and width can be set */
html,
#site-drawer {
  scrollbar-color: var(--sb-thumb) transparent;
}
/* Chromium, Edge and Safari draw the full design. (A colour set the standard way would
   switch these browsers back to their plain bar, so it is cleared here; bars that are
   hidden on purpose keep their own display: none.) */
@supports selector(::-webkit-scrollbar) {
  html,
  html * {
    scrollbar-width: auto !important;
    scrollbar-color: auto !important;
  }
  ::-webkit-scrollbar {
    width: 9px;
    height: 9px;
    background: transparent;
  }
  html::-webkit-scrollbar,
  body::-webkit-scrollbar {
    width: 13px;
  }
  ::-webkit-scrollbar-track {
    background:
      linear-gradient(90deg, transparent calc(50% - 0.5px), var(--sb-rail) calc(50% - 0.5px), var(--sb-rail) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
      repeating-linear-gradient(180deg, transparent 0 23px, var(--sb-tick) 23px 24px) center / 5px 100% no-repeat;
  }
  ::-webkit-scrollbar-track:horizontal {
    background:
      linear-gradient(180deg, transparent calc(50% - 0.5px), var(--sb-rail) calc(50% - 0.5px), var(--sb-rail) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
      repeating-linear-gradient(90deg, transparent 0 23px, var(--sb-tick) 23px 24px) center / 100% 5px no-repeat;
  }
  ::-webkit-scrollbar-thumb {
    min-height: 36px;
    border: 2px solid transparent;
    border-radius: 999px;
    background:
      linear-gradient(var(--sb-grip), var(--sb-grip)) center / 50% 1px no-repeat padding-box,
      var(--sb-thumb) padding-box;
    box-shadow: inset 0 0 0 1px rgba(255, 208, 138, 0.18);
  }
  html::-webkit-scrollbar-thumb,
  body::-webkit-scrollbar-thumb {
    border-width: 3px;
    background:
      linear-gradient(var(--sb-grip), var(--sb-grip)) center / 50% 1px no-repeat padding-box,
      linear-gradient(var(--sb-grip), var(--sb-grip)) center calc(50% - 4px) / 50% 1px no-repeat padding-box,
      linear-gradient(var(--sb-grip), var(--sb-grip)) center calc(50% + 4px) / 50% 1px no-repeat padding-box,
      var(--sb-thumb) padding-box;
  }
  ::-webkit-scrollbar-thumb:horizontal {
    min-width: 36px;
    background:
      linear-gradient(var(--sb-grip), var(--sb-grip)) center / 1px 50% no-repeat padding-box,
      var(--sb-thumb) padding-box;
  }
  ::-webkit-scrollbar-thumb:hover {
    background-color: var(--sb-thumb-hot);
    box-shadow: inset 0 0 0 1px rgba(255, 243, 196, 0.5), 0 0 10px rgba(228, 204, 115, 0.35);
  }
  ::-webkit-scrollbar-thumb:active {
    background-color: #fff0b8;
  }
  ::-webkit-scrollbar-button,
  ::-webkit-scrollbar-corner {
    display: none;
    background: transparent;
  }
  /* the menu's bar sits inside its edge, quieter until the menu is used */
  #site-drawer::-webkit-scrollbar {
    width: 8px;
  }
  #site-drawer::-webkit-scrollbar-thumb {
    background-color: rgba(228, 204, 115, 0.26);
  }
  #site-drawer:hover::-webkit-scrollbar-thumb {
    background-color: rgba(228, 204, 115, 0.5);
  }
  #site-drawer::-webkit-scrollbar-thumb:hover {
    background-color: var(--sb-thumb-hot);
  }
}