/* Organoid Intelligence: one instrument, drawn to his pixel reference.
   Pixel face carries the loud things only; paragraphs take the grotesque, numbers take the mono. */

@font-face {
  font-family: "PixelOperator";
  src: url("/fonts/PixelOperator-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Sporting";
  src: url("/fonts/Sporting_Grotesque-Regular_web.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Sporting";
  src: url("/fonts/Sporting_Grotesque-Bold_web.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Sligoil";
  src: url("/fonts/Sligoil-MicroMedium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Sligoil";
  src: url("/fonts/Sligoil-MicroBold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --bg: #060208;
  --hot: #ff4cc2;      /* 6.9:1 the display line and a lit reading */
  --mag: #e42da6;      /* a SURFACE, not an ink: the title bar, the lit plate, the frames */
  --label: #ff8ad4;    /* 9.6:1 every small caps label, which is where a thin ink shows */
  --dim: #9a1a74;      /* decoration only, never a letter: one hairline token */
  --mute: #c06aa8;     /* 5.7:1 secondary sentences and disabled controls */
  --blue: #3c4fc4;     /* field fill */
  --blue-lit: #7c8ff0; /* 6.8:1 the model's line in the chart, beside its legend */
  --paper: #ffd2f0;    /* 15.4:1 values and names */
  --on-mag: #060208;   /* 5.1:1 on the magenta surface: the ink a filled plate carries */
  --px: "PixelOperator", monospace;
  --tx: "Sporting", system-ui, sans-serif;
  --mn: "Sligoil", ui-monospace, monospace;
  --blk: 4px;                 /* one art block, everywhere on the page */
  --page: 1120px;
  --gut: 24px;
  --step-1: 8px;              /* one spacing scale, nothing between the steps */
  --step-2: 12px;
  --step-3: 16px;
  --step-4: 24px;
  font-synthesis: none;
}

/* The pixel face is a bitmap: no smoothing, no shadow, whole multiples of its 16 px cell, and two cells
   of letter spacing, because it ships with no side bearing at all. */
.px-face, .rail-plate, .px-key, .titlebar-name, .ch-title, .verdict-line,
.nameplate-name, .nameplate-ticker, .steps b, .steps h3 {
  -webkit-font-smoothing: none;
  text-rendering: geometricPrecision;
  letter-spacing: 0.125em;
}

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

html { background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--paper);
  font: 400 16px/1.6 var(--tx);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- the room behind the instrument ------------------------------ */
.ground { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--bg); }
.ground-rack {
  position: absolute; inset: -6% -4%;
  background: url("/img/backdrop.png") center / cover no-repeat;
  image-rendering: pixelated;
  opacity: 0.42;
  filter: blur(3px);
  animation: drift 64s ease-in-out infinite alternate;
}
@keyframes drift { from { transform: translate3d(0, 0, 0) scale(1.02); } to { transform: translate3d(0, -2.2%, 0) scale(1.07); } }

/* ---------- the instrument ---------------------------------------------- */
.device {
  position: relative; z-index: 1;
  width: min(var(--page), 100% - var(--gut) * 2);
  margin: clamp(20px, 3vw, 44px) auto clamp(28px, 4vw, 56px);
  border: 0 solid transparent;
  border-image: url("/img/bezel.png") 7 fill / calc(var(--blk) * 7) / 0 repeat;
  padding: 42px 44px 44px;
  background: #09030c;
  display: flex; flex-direction: column; gap: 16px;
}

/* title bar ------------------------------------------------------------- */
.titlebar {
  display: flex; align-items: center; gap: 14px;
  background: var(--mag);
  padding: 12px 20px;
  min-height: 68px;
}
.titlebar-mark { width: 48px; height: 48px; image-rendering: pixelated; display: block; background: var(--bg); }
.titlebar-name {
  font: 700 32px/1 var(--px);
 
  margin: 0 auto 0 6px;
  color: var(--bg);
  text-transform: none;
  will-change: transform;
}
.titlebar-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; font: 500 16px/1 var(--mn); color: #250418; }
.lamp { display: inline-flex; align-items: center; gap: 8px; }
.lamp i { width: 12px; height: 12px; background: #250418; display: block; }
.lamp[data-state="awake"] i { background: #ffffff; animation: pulse 2.4s steps(2, end) infinite; }
.lamp[data-state="asleep"] i { background: #250418; }
@keyframes pulse { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0.35; } }
.clock { font-variant-numeric: tabular-nums; }
.titlebar > .titlebar-channels { display: none; }

/* deck: screen plus channel rail ---------------------------------------- */
.deck { display: grid; grid-template-columns: 1fr 208px; gap: var(--step-3); align-items: start; }

.screen {
  border: 0 solid transparent;
  border-image: url("/img/screen-frame.png") 7 fill / calc(var(--blk) * 7) / 0 stretch;
  padding: 36px;
  background: #050109;
  min-height: clamp(380px, 46vh, 560px);
  position: relative;
  overflow: hidden;
}
.screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255, 76, 194, 0.07) 0 1px, transparent 1px 4px);
}
.screen-field { position: relative; }

/* rail ------------------------------------------------------------------- */
.rail { display: flex; flex-direction: column; gap: var(--step-2); }
.rail-plate {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  min-height: 60px; padding: var(--step-2) var(--step-3);
  border: 0 solid transparent;
  border-image: url("/img/rail-plate.png") 4 fill / calc(var(--blk) * 4) / 0 stretch;
  color: var(--paper); text-decoration: none;
  font: 700 16px/1 var(--px);
  will-change: transform;
}
.rail-plate img { width: 32px; height: 32px; image-rendering: pixelated; flex: none; }   /* 16 blocks at exactly 2x */
.rail-plate span { line-height: 1.3; }
.rail-plate:hover { filter: brightness(1.18); transform: translateY(-1px); }
.rail-plate:active { filter: brightness(0.92); transform: translateY(1px); }
.rail-plate:focus-visible { outline: 3px solid var(--hot); outline-offset: 2px; }
/* The open channel is the LIT plate: a filled magenta face with the dark ink that face carries. */
.rail-plate[aria-current="page"] {
  border-image: url("/img/rail-plate-lit.png") 4 fill / calc(var(--blk) * 4) / 0 stretch;
  background: var(--mag);
  color: var(--on-mag);
}


/* verdict ---------------------------------------------------------------- */
.verdict {
  border: 0 solid transparent;
  border-image: url("/img/band.png") 6 fill / calc(var(--blk) * 6) / 0 repeat;
  padding: 26px 34px 28px;
  text-align: center;
}
.verdict-line {
  margin: 0; color: var(--hot);
  font: 700 48px/1.1 var(--px);
  text-shadow: 0 0 18px rgba(255, 76, 194, 0.45);
  will-change: transform;
  overflow-wrap: anywhere;
}
.verdict-sub { margin: 10px 0 0; color: var(--mute); font-size: 16px; }

/* base row: the culture and the nameplate -------------------------------- */
.base { display: grid; grid-template-columns: 272px 1fr; gap: 14px; align-items: stretch; }

.specimen {
  border: 0 solid transparent;
  border-image: url("/img/rail-plate.png") 4 fill / calc(var(--blk) * 4) / 0 stretch;
  padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 16px; align-items: center;
}
.specimen-dish { width: 100%; max-width: 168px; height: auto; image-rendering: pixelated; display: block; }
.specimen-facts { margin: 0; width: 100%; display: grid; gap: 6px; font: 500 16px/1.4 var(--mn); }
.specimen-facts > div { position: relative; display: flex; justify-content: space-between; gap: 12px; padding: 7px 0 9px; }
.specimen-facts > div::after,
.specimen-facts > div:last-child::after { display: none; }

.specimen-facts dt { color: var(--label); }
.specimen-facts dd { margin: 0; color: var(--paper); }

.nameplate {
  border: 0 solid transparent;
  border-image: url("/img/key.png") 7 fill / calc(var(--blk) * 7) / 0 stretch;
  padding: 32px 34px 34px;
  display: flex; flex-direction: column; gap: 16px; justify-content: space-between;
}
.nameplate-head { display: flex; align-items: baseline; gap: 14px; }
.nameplate-name { font: 700 16px/1 var(--px); color: var(--paper); will-change: transform; }
.nameplate-ticker { font: 700 32px/1 var(--px); color: var(--hot); will-change: transform; }
.nameplate-serial { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nameplate-label { font: 500 16px/1 var(--mn); color: var(--label); text-transform: uppercase; letter-spacing: 0.08em; }
.nameplate-ca {
  font: 500 16px/1.4 var(--mn); color: var(--paper);
  background: #1a0514; padding: 14px 18px; min-width: 0;
  overflow-wrap: anywhere; user-select: all; flex: 1 1 320px;
}
.nameplate-ca[data-empty="1"] { color: var(--mute); }
.nameplate-keys { display: flex; flex-wrap: wrap; gap: 10px; }
.nameplate-note { margin: 0; color: var(--mute); font-size: 16px; }

/* keys -------------------------------------------------------------------- */
.px-key {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px;
  border: 0 solid transparent;
  border-image: url("/img/key.png") 7 fill / calc(var(--blk) * 4) / 0 stretch;
  background: #09030c;   /* the colour the key plate paints in its middle, declared so it can be measured */
  color: var(--paper);
  font: 700 16px/1 var(--px);
  cursor: pointer; text-decoration: none; will-change: transform;
}
.px-key:hover:not([disabled]) { color: var(--hot); }
.px-key:active:not([disabled]) { transform: translateY(2px); }
.px-key:focus-visible { outline: 3px solid var(--hot); outline-offset: 2px; }
.px-key[disabled], .px-key[aria-disabled="true"] { color: var(--mute); cursor: not-allowed; opacity: 0.74; }
.px-key img { width: 20px; height: 20px; image-rendering: auto; }
.px-key.is-done { color: var(--hot); }

/* channel furniture ------------------------------------------------------- */
.ch-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 18px; }
.ch-title { margin: 0; font: 700 32px/1 var(--px); color: var(--paper); will-change: transform; }
.ch-meta { font: 500 16px/1 var(--mn); color: var(--label); letter-spacing: 0.08em; text-transform: uppercase; }
.chip {
  display: inline-flex; align-items: center; min-height: 34px; padding: 6px 16px;
  font: 500 16px/1 var(--mn); letter-spacing: 0.06em; text-transform: uppercase;
  border: 2px solid var(--mute); color: var(--mute); white-space: nowrap;
}
.chip[data-k="buy"] { border-color: var(--hot); color: var(--hot); }
.chip[data-k="wait"] { border-color: var(--mute); color: var(--mute); }
.chip[data-k="open"] { border-color: var(--hot); color: var(--hot); }
.chip[data-k="settled"] { border-color: var(--blue-lit); color: var(--blue-lit); }
.chip[data-k="slept"] { border-color: var(--mute); color: var(--mute); }

.lead { margin: 0 0 18px; font-size: 17px; color: var(--paper); max-width: 62ch; }
.note { color: var(--mute); font-size: 16px; overflow-wrap: anywhere; }

.grid2 { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 22px; align-items: start; }
.grid2 > * { min-width: 0; }
.grid2.wide { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }

.block {
  border: 0 solid transparent;
  border-image: url("/img/rail-plate.png") 4 fill / calc(var(--blk) * 4) / 0 stretch;
  padding: 24px 26px 26px;
}
.block-title { margin: 0 0 12px; font: 500 16px/1 var(--mn); letter-spacing: 0.08em; text-transform: uppercase; color: var(--label); }

.rows { width: 100%; border-collapse: collapse; font: 500 16px/1.4 var(--mn); }
.rows tr { border-bottom: 1px solid var(--dim); }
.rows tr:last-child { border-bottom: 0; }
.rows th, .rows td { padding: 11px 10px; text-align: left; overflow-wrap: anywhere; }
.rows th:first-child, .rows td:first-child { padding-left: 16px; }
.rows th:last-child, .rows td:last-child { padding-right: 20px; }
.rows th { color: var(--label); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; }
.rows td { color: var(--paper); }

.rows .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; overflow-wrap: normal; }
.rows a.link { white-space: nowrap; }
.rows .sym { color: var(--paper); font-weight: 700; white-space: nowrap; }
/* A participant colour is used ONLY where a legend explains it: the chart and its key. Everywhere
   else a name is paper, so no reader has to guess what a colour means. */
.field-legend .who-tissue { color: var(--hot); }
.field-legend .who-model { color: var(--blue-lit); }
.field-legend .who-coin { color: var(--paper); }
.who-tissue, .who-model, .who-coin { color: var(--paper); }

.field-wrap { display: flex; flex-direction: column; gap: 10px; }
canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.field-legend { display: flex; gap: 16px; flex-wrap: wrap; font: 500 16px/1 var(--mn); color: var(--mute); }
.field-legend b { color: var(--label); font-weight: 500; }

.empty { color: var(--mute); font-size: 16px; }
.steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.steps li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: start; }
.steps b { font: 700 32px/1 var(--px); color: var(--mag); will-change: transform; }
.steps p { margin: 0; }
.steps h3 { margin: 0 0 4px; font: 700 16px/1.2 var(--px); color: var(--paper); will-change: transform; }

.link { color: var(--hot); text-underline-offset: 3px; overflow-wrap: anywhere; }
.link:hover { color: var(--paper); }

.sig-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sig-row code { font: 500 16px/1.4 var(--mn); color: var(--paper); overflow-wrap: anywhere; }

/* ---------- phone -------------------------------------------------------- */
@media (max-width: 900px) {
  :root { --gut: 14px; --blk: 3px; }
  .device { padding: 30px 28px 32px; gap: 12px; }
  .deck { grid-template-columns: 1fr; }
  .titlebar { flex-wrap: wrap; row-gap: 10px; }
  .titlebar-name { font-size: 16px; margin-right: auto; }
  .titlebar > .titlebar-channels { display: inline-flex; min-height: 48px; padding: 14px 20px; color: var(--paper); }
  .titlebar-meta { width: 100%; justify-content: space-between; }
  .rail { display: none; }
  .rail.is-open { display: flex; }
  .screen { min-height: 0; padding: 26px 24px; }
  .verdict-line { font-size: 32px; }
  .base { grid-template-columns: 1fr; }
  .grid2 { grid-template-columns: 1fr; }
  .specimen { flex-direction: row; align-items: center; }
  .specimen-dish { max-width: 120px; }
}
@media (max-width: 560px) {
  .col-24h, .col-mcap { display: none; }
  .rows td, .rows th { padding: 11px 8px; }
  .rows th:first-child, .rows td:first-child { padding-left: 16px; }
  .rows th:last-child, .rows td:last-child { padding-right: 16px; }
}
@media (max-width: 520px) {
  .ch-title { font-size: 16px; }
  .nameplate-ticker { font-size: 32px; }
  .steps li { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
  .steps b { font-size: 16px; }
  .rows th, .rows td { padding: 10px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .ground-rack { animation: none; }
  .lamp[data-state="awake"] i { animation: none; }
}

@media (max-width: 420px) {
  .rows { table-layout: fixed; }
  .rows.clock .sym { white-space: normal; }
  .specimen { flex-direction: column; }
  .specimen-dish { max-width: 128px; }
  .verdict { padding: 26px 34px 28px; }
  .nameplate { padding: 32px 34px 34px; }
}

/* On a narrow phone every table with a head is drawn as a list of blocks, each cell carrying its
   own label, instead of five columns of four characters. */
@media (max-width: 560px) {
  .rows.stack, .rows.stack tbody, .rows.stack tr, .rows.stack td { display: block; width: auto; }
  .rows.stack thead { display: none; }
  .rows.stack tr { padding: 14px 16px 16px; }
  .rows.stack td { padding: 3px 0; }
  .rows.stack td:first-child { font-size: 16px; padding-bottom: 8px; }
  .rows.stack td:not(:first-child) { display: inline-flex; align-items: center; gap: 8px; margin: 0 14px 6px 0; }
  .rows.stack td:not(:first-child)::before { content: attr(data-label); color: var(--label); }
  .rows.stack td.num { text-align: left; }
}
}

/* The rail carries the nav and, under it, the only number the whole bay is about. */
.rail-score {
  margin-top: var(--step-2);
  border: 0 solid transparent;
  border-image: url("/img/rail-plate.png") 4 fill / calc(var(--blk) * 4) / 0 stretch;
  padding: 22px 20px 24px;
}
.rail-score-title { margin: 0 0 var(--step-2); font: 700 20px/1 var(--mn); letter-spacing: 0.08em; text-transform: uppercase; color: var(--label); }
.rail-score dl { margin: 0; display: grid; gap: 0; font: 500 16px/1.4 var(--mn); }
.rail-score dl > div { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: var(--step-2); padding: var(--step-1) 0; }
.rail-score dl > div::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--dim); }
.rail-score dl > div:last-child::after { display: none; }
.rail-score dt { color: var(--label); }
.rail-score dd { margin: 0; color: var(--paper); font: 700 24px/1 var(--mn); font-variant-numeric: tabular-nums; }
.rail-score-note { margin: var(--step-2) 0 0; color: var(--mute); font-size: 16px; }

/* The archive: one key per recorded day, the open one lit, a dot on the days the culture slept. */
.daystrip { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.daykey { min-height: 44px; padding: 10px 16px; font-size: 16px; }
.daykey[aria-current="page"] { color: var(--hot); }
.daykey-slept { font-style: normal; color: var(--mute); margin-left: 4px; }

/* The reference's whole frame carries an even texture, so the instrument does too: one row of ink in
   four, the same everywhere, never a generated noise. */
.device::after {
  content: "";
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(6, 2, 8, 0.22) 0 1px, transparent 1px 4px);
}
.device > * { position: relative; z-index: 1; }