/* Neuron Swap. One specimen sheet of a language model.
   Built to art/ref/inky-mono-specimen.jpg: pure black, one flush left margin at 9.3% of the sheet,
   one monospaced family, one weight, colour used to tag meaning and never to decorate, and the
   reference's own three-size ratio (display : statement : label = 6.7 : 1.8 : 1).
   No bar, no window, no card, no panel, no rule, no footer.

   Scale follows his order of 2026-10-19: a dense working UI, base 14, labels 12, exactly ONE display
   element on a screen, the sheet capped at 1360 so the content column lands at 1016. */

@font-face {
  font-family: "Martian Mono";
  src: url("/fonts/MartianMono.woff2") format("woff2-variations");
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  font-display: swap;
}

:root {
  --black: #000000;
  --white: #F7F7F5;
  --dim: #8A8A84;            /* resting ink: 6.6:1 on black */
  --faint: #4A4A46;          /* structure only, never a word that has to be read */
  --green: #00FF90;          /* alive, tonight, the model's own voice */
  --pink: #EA4B83;           /* extinct, burned, skipped */
  --blue: #4DB3E3;           /* the method, the judges, how a thing is done */
  --amber: #F5A754;          /* numbers, the clock, money */

  --sheet: min(100vw, 1280px);
  --margin: 9.3%;
  --measure: 100%;           /* the content column: 1042 at the cap, inside his 1024-1120 band */
  --display-w: 63%;          /* the display's own block, so the line fills it as his does */
  --gutter: 4.2%;

  --label: 12px;
  --body: 14px;
  --mid: 22px;
  --track: 0.075em;

  --zone: 46px;
  --group: 22px;
  --row: 44px;

  --fast: 0.08s;
  --quick: 0.12s;
  --hover: 0.18s;
}

@media (max-width: 899px) {
  :root {
    --margin: 7.4%; --measure: 85.2%; --display-w: 85.2%; --gutter: 0%;
    --label: 12px; --body: 14px; --mid: 20px; --zone: 36px; --group: 18px;
  }
}

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

html { background: var(--black); }

body {
  margin: 0 auto;
  width: var(--sheet);
  background: var(--black);
  color: var(--white);
  font-family: "Martian Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;
  font-variation-settings: "wdth" 100, "wght" 400;
  font-synthesis: none;
  font-size: var(--body);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

.skip { position: absolute; left: -9999px; top: 0; background: var(--green); color: var(--black); padding: 10px 18px; z-index: 9; }
.skip:focus { left: 0; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.noscript { padding: 32px var(--margin); max-width: var(--measure); }

/* ---- the sheet ---------------------------------------------------------- */

.sheet { padding: 38px var(--margin) 72px; min-height: 100vh; }

/* ---- the mark: the one graphic, as on his sheet ------------------------- */

.mark { position: relative; width: 64px; aspect-ratio: 1; }
.mark img { position: absolute; inset: 0; width: 100%; height: 100%; }
.mark-fire { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .mark-fire { animation: fire 6s ease-out infinite; }
}
@keyframes fire { 0%, 90% { opacity: 0; } 93% { opacity: 1; } 100% { opacity: 0; } }

/* ---- the display: the one big element on the screen --------------------- */

.display {
  width: var(--display-w);
  margin: 22px 0 0;
  font-weight: 400;
  font-size: 72px;                   /* app.js fits this to its own block */
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--white);
}
.display-ink { display: inline-block; }

/* ---- the spec row ------------------------------------------------------- */

.spec { display: grid; grid-template-columns: 100%; margin-top: var(--zone); row-gap: var(--group); }
@media (min-width: 900px) {
  .spec { grid-template-columns: 34% 1fr; column-gap: var(--gutter); width: var(--measure); }
}

.index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; }
@media (max-width: 899px) { .index { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tab {
  display: flex; align-items: center;
  min-height: var(--row);
  font-size: var(--label); letter-spacing: var(--track); text-transform: uppercase;
  color: var(--dim); text-decoration: none;
  transition: color var(--hover) ease;
}
.tab:hover { color: var(--white); }
.tab[aria-current="page"] { color: var(--green); }

.release { align-content: start; }
.rel-line { margin: 0; font-size: var(--label); line-height: 1.85; letter-spacing: var(--track); text-transform: uppercase; }
.rel-line.dim { color: var(--dim); }

.mint { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; }
.mint-label { font-size: var(--label); letter-spacing: var(--track); text-transform: uppercase; color: var(--dim); }
.mint-value {
  font-size: var(--label); letter-spacing: 0.02em; color: var(--amber);
  min-width: 0; flex: 0 1 auto; max-width: 100%; overflow-wrap: anywhere; word-break: break-all; user-select: all;
}
.mint-value.empty { color: var(--dim); text-transform: uppercase; letter-spacing: var(--track); user-select: auto; }

.keys { margin-top: 4px; display: flex; flex-wrap: wrap; column-gap: 20px; }

.key {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: var(--row); padding: 0;
  background: none; border: 0;
  font: inherit; font-size: var(--label);
  letter-spacing: var(--track); text-transform: uppercase;
  color: var(--white); cursor: pointer; text-decoration: none;
  transition: color var(--quick) ease, transform var(--fast) ease;
}
.key img { width: 13px; height: 13px; object-fit: contain; }
.key.green { color: var(--green); }
.key.amber { color: var(--amber); }
.key.blue { color: var(--blue); }
.key.pink { color: var(--pink); }
.key:hover:not([disabled]):not([aria-disabled="true"]) { text-decoration: underline; text-underline-offset: 4px; }
.key:active:not([disabled]):not([aria-disabled="true"]) { transform: translateY(1px); }
.key[disabled], .key[aria-disabled="true"] { color: var(--faint); cursor: default; text-decoration: none; }
.key[disabled] img, .key[aria-disabled="true"] img { opacity: 0.35; }

/* ---- the body of a sheet ------------------------------------------------ */

.body { margin-top: var(--zone); display: grid; grid-template-columns: 100%; row-gap: var(--zone); }
@media (min-width: 900px) {
  .body { grid-template-columns: 56% 1fr; column-gap: var(--gutter); width: var(--measure); align-items: start; }
  .body.wide { grid-template-columns: 100%; }
}
.span { grid-column: 1 / -1; min-width: 0; }
/* a group: things that belong to one another sit close, groups sit a zone apart */
.grp { display: grid; row-gap: 12px; min-width: 0; align-content: start; }
.col { display: grid; align-content: start; row-gap: var(--zone); min-width: 0; }

/* a statement: the second size, tight, the reference's lower stack */
.say { margin: 0; font-size: var(--mid); line-height: 1.15; letter-spacing: 0.005em; text-transform: uppercase; }
.say.voice { color: var(--green); }
.say.gone { color: var(--pink); }
.say.num { color: var(--amber); }
.say .lead {
  display: block; font-size: var(--label); line-height: 1.6; letter-spacing: var(--track);
  color: var(--dim); margin-bottom: 8px; text-transform: uppercase;
}
.say + .say { margin-top: var(--group); }

h2 {
  margin: 0 0 12px; font-size: var(--label); font-weight: 400;
  letter-spacing: var(--track); text-transform: uppercase; color: var(--dim);
}

/* labelled rows: a fixed label column, a fluid value column */
.rows { display: grid; row-gap: 7px; min-width: 0; }
.row { display: grid; grid-template-columns: 10em 1fr; column-gap: 14px; min-width: 0; align-items: baseline; }
.row > .k { font-size: var(--label); letter-spacing: var(--track); text-transform: uppercase; color: var(--dim); }
.row > .v { min-width: 0; overflow-wrap: anywhere; }
.row > .v.num { color: var(--amber); }
.row > .v.alive { color: var(--green); }
.row > .v.dead { color: var(--pink); }

.block { min-width: 0; }
.block p { margin: 0 0 12px; max-width: 62ch; }
.block a, .qa a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.block a:hover, .qa a:hover { color: var(--green); }
.block p:last-child { margin-bottom: 0; }

/* the specimen text: the morning interview, the face shown in use */
.qa { display: grid; row-gap: 14px; min-width: 0; }
.qa .q { font-size: var(--label); color: var(--dim); letter-spacing: var(--track); text-transform: uppercase; margin: 0 0 2px; }
.qa .a { margin: 0; overflow-wrap: anywhere; }

/* ---- the typed line: his KNOCK TWICE_BE NICE, cursor and all ------------ */

.typed { width: 100%; }
.typed textarea, .typed input {
  display: block; width: 100%;
  background: none; border: 0; padding: 0; margin: 0; resize: none;
  color: var(--white);
  font: inherit; font-size: var(--mid); line-height: 1.2;
  letter-spacing: 0.005em; text-transform: uppercase;
  caret-color: var(--green); overflow: hidden;
}
.typed textarea::placeholder, .typed input::placeholder { color: var(--faint); }
.typed textarea:focus, .typed input:focus { outline: none; }
.typed.lit { outline: 2px solid var(--green); outline-offset: 10px; }
.counter { margin: 10px 0 0; font-size: var(--label); color: var(--dim); letter-spacing: var(--track); text-transform: uppercase; }
.counter.over { color: var(--pink); }

/* ---- the night picker: his =0123456789 row ------------------------------ */

.picker { display: flex; flex-wrap: wrap; column-gap: 14px; }
.pick {
  min-height: var(--row); padding: 0; background: none; border: 0;
  font: inherit; font-size: var(--label); letter-spacing: var(--track);
  color: var(--dim); cursor: pointer; transition: color var(--quick) ease;
}
.pick:hover { color: var(--white); }
.pick[aria-pressed="true"] { color: var(--green); }

/* ---- the conversation --------------------------------------------------- */

.talk { display: grid; row-gap: 12px; }
.turn { margin: 0; overflow-wrap: anywhere; }
.turn.you { color: var(--amber); }
.turn .who { font-size: var(--label); color: var(--dim); letter-spacing: var(--track); text-transform: uppercase; margin-right: 10px; }

/* ---- the neuron field: the model's own layers, lit where it was rewritten  */

.field { width: 100%; min-width: 0; }
.field canvas { display: block; max-width: 100%; image-rendering: pixelated; }
.legend { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 5px 18px; font-size: var(--label);
          color: var(--dim); letter-spacing: var(--track); text-transform: uppercase; }
.legend .g { color: var(--green); }
.legend .p { color: var(--pink); }

/* ---- lists -------------------------------------------------------------- */

.list { display: grid; row-gap: 10px; min-width: 0; }
.item { display: grid; grid-template-columns: 4.6em 1fr; column-gap: 14px; min-width: 0;
        background: none; border: 0; padding: 0; font: inherit; text-align: left; color: inherit; }
.item .n { font-size: var(--label); color: var(--amber); letter-spacing: var(--track); }
.item .t { min-width: 0; overflow-wrap: anywhere; }
.item .meta { display: block; font-size: var(--label); color: var(--dim); letter-spacing: var(--track);
              text-transform: uppercase; margin-top: 1px; }
button.item { cursor: pointer; min-height: var(--row); transition: color var(--hover) ease; }
button.item:hover .t { color: var(--green); }
.item.gone .t { color: var(--pink); }
.item .vote { margin-top: 2px; }

/* ---- states ------------------------------------------------------------- */

.notyet { margin: 0; font-size: var(--label); color: var(--dim); letter-spacing: var(--track); text-transform: uppercase; }
.err { margin: 10px 0 0; font-size: var(--label); color: var(--pink); letter-spacing: var(--track); text-transform: uppercase; }
.ok { margin: 10px 0 0; font-size: var(--label); color: var(--green); letter-spacing: var(--track); text-transform: uppercase; }
.risk { color: var(--dim); max-width: 62ch; }

/* the sheet prints itself: the lines land in order, fast */
@media (prefers-reduced-motion: no-preference) {
  .ink-in { animation: ink 0.28s cubic-bezier(.2,.7,.3,1) backwards; }
}
@keyframes ink { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }