/* Artificial Bot Intelligence. One control room, built to his photograph of a visualisation suite.
   Every colour below was picked off that file by tools/refmeasure.mjs and then lifted until it
   measured at least 4.5:1 on the surface it is really painted on (his order of 2026-10-19 evening).
   The three bands of the page are his three bands: the chamber, the wall, the console. */

@font-face { font-family: "Doto"; src: url("/fonts/doto.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Saira"; src: url("/fonts/saira.woff2") format("woff2-variations");
  font-weight: 100 900; font-stretch: 50% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("/fonts/dmmono-300.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("/fonts/dmmono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("/fonts/dmmono-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap; }

:root {
  /* ground: 44.39% of his frame lies under luminance 24, so the page is black and stays black */
  --ground: #050506;
  --glass: #0a0d10;
  --sunk: #0d1116;

  /* the inks, each one his measured hue lifted onto the floor he set on 2026-10-19 */
  --paper: #e8ecf1;      /* his #e8ecf1, the cloud and the wireframe, 17.2:1 */
  --amber: #ffb84a;      /* his #dfc25d warmed, the label over every glass, 11.8:1 */
  --red: #ff4b2e;        /* his #c54e2b lifted, the caption under every glass, 6.1:1 */
  --green: #58e06b;      /* his value lists, 11.9:1 */
  --cyan: #52d7f0;       /* his cooler console rows, 12.0:1 */
  --blue: #7e9ae0;       /* his #5d76b6 lifted, the map screens, 7.4:1 */
  --muted: #8a8f99;      /* labels, separators, the one muted token, 6.3:1 */
  --dim: #787d87;        /* a reading that does not exist yet, 4.9:1 */

  /* lines. A rule is not text, but he reads them, so they stay visible on black. */
  --rule: #39414b;
  --rule-hot: #b1341c;
  --rule-amber: #6f4a14;

  --page: 1120px;
  --gutter: 24px;
  --gap: 18px;

  /* One type scale and nothing off it. His own 2026-10-19 order wants the page dense and the mono
     no smaller than 14 px on black; the kit's floor is 16 px on any label, so 16 is the floor here
     and the density comes from the row rhythm and the column, not from shrinking the type. */
  --t-label: 16px;
  --t-body: 16px;
  --t-value: 17px;
  --t-head: 20px;
  --t-mast: 28px;
  --t-display: 56px;

  --mono: "DM Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;
  --text: "Saira", system-ui, sans-serif;
  --dots: "Doto", "DM Mono", monospace;

  --focus: #ffb84a;
}

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--paper);
  font: 400 var(--t-body)/1.6 var(--text);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* the room: his photograph is grain and a vignette over everything, never a flat CSS field */
.room {
  position: relative;
  min-height: 100vh;
  background: var(--ground);
}
/* His picture is a photograph, so the page is never a flat CSS field: a mirrored tile of real
   35 mm grain lies over the whole of it, screened on at a low amplitude so it is a tooth in the
   black and not a pattern you can see repeating. */
.room::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.3;
  mix-blend-mode: screen;
  background: url("/img/grain.png") repeat;
  background-size: 320px 320px;
}
.room::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(130% 95% at 50% 36%, rgba(0,0,0,0) 38%, rgba(0,0,0,0.72) 100%);
  z-index: 3;
}

.page {
  position: relative;
  z-index: 1;
  width: min(100% - (var(--gutter) * 2), var(--page));
  margin-inline: auto;
  padding-block: 0 72px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* ====================================================================================
   1. THE MASTHEAD. His ceiling band: micro rows burnt over the top of the room.
   ==================================================================================== */

.mast { padding-block: 26px 0; }

/* A rule is a DRAWN LINE of its own, never a border on a block that carries text: his console is
   full of hairlines that run edge to edge under the rows, and a border on the row itself would
   press that row's first word against the line's own left end. */
.hair {
  height: 1px;
  margin: 14px 0 0;
  background: var(--rule);
}
.hair--hot { background: var(--rule-hot); }
.hair--amber { background: var(--rule-amber); }

.mast-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.mast-name {
  margin: 0;
  font: 700 var(--t-mast)/1.05 var(--dots);
  letter-spacing: 0.03em;
  color: var(--paper);
  text-shadow: 0 0 14px rgba(232, 236, 241, 0.3);
}

.mast-ident {
  margin: 0;
  font: 500 var(--t-value)/1.05 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.rule-dot { color: var(--muted); }
#clock { color: var(--muted); font-variant-numeric: tabular-nums; }

.mast-reads,
.chamber-reads {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
}
.chamber-reads { grid-template-columns: repeat(3, 1fr); }

.read { padding: 12px 20px 12px 0; min-width: 0; }
.read dt {
  margin: 0 0 4px;
  font: 400 var(--t-label)/1.3 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.read dd {
  margin: 0;
  font: 500 var(--t-value)/1.3 var(--mono);
  color: var(--paper);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.read dd.empty { color: var(--dim); }

/* ====================================================================================
   2. THE CHAMBER. His wireframe room, half the picture, rendered live.
   ==================================================================================== */

.chamber { padding-top: 22px; }

.glass-box {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #04060a;
  box-shadow: 0 0 0 1px #171d25, inset 0 0 90px rgba(0, 0, 0, 0.9);
}
#chamber {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2240 / 1000;
}
/* the curvature, the bloom and the vignette of the chamber's own glass, generated, laid over the
   raster the way his photograph's tube lies over its picture */
.glass-film {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.3;
  mix-blend-mode: screen;
  background: url("/img/glass.png") center / 100% 100% no-repeat;
}

.chamber-read {
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) 1.6fr;
  gap: 24px;
  align-items: center;
  padding-top: 16px;
}

.best { margin: 0; display: flex; align-items: baseline; gap: 18px; }
.best-figure {
  font: 700 var(--t-display)/0.98 var(--dots);
  letter-spacing: 0.01em;
  color: var(--green);
  text-shadow: 0 0 22px rgba(88, 224, 107, 0.35);
  font-variant-numeric: tabular-nums;
}
.best-figure.down { color: var(--red); text-shadow: 0 0 22px rgba(255, 75, 46, 0.3); }
.best-figure.idle { color: var(--dim); text-shadow: none; }
.best-label {
  font: 400 var(--t-label)/1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
}
.best-label b {
  display: block;
  font-weight: 500;
  font-size: var(--t-value);
  letter-spacing: 0.04em;
  color: var(--paper);
  text-transform: none;
}

/* ====================================================================================
   3. THE WALL. Seven monitors and the master monitor that carries the coin.
   ==================================================================================== */

.wall {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  margin-top: 52px;          /* his one black seam, the only band of air on the page */
  /* the tubes are their own height, never stretched to the tallest in the row: six identical
     screens beside one bigger one is his wall, six screens with a hole in the bottom half is not */
  align-items: start;
}

/* A monitor is the GLASS, not the cell: in his photograph the little amber line sits ABOVE the
   tube and the red one BELOW it, on the bare housing, so the cell itself carries no surface and
   only the screen is an object. */
.cell {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  transition: transform 0.08s ease, filter 0.18s ease;
}
a.cell:hover { filter: brightness(1.2); }
a.cell:active { transform: translateY(1px); }

.cell-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font: 400 var(--t-label)/1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber);
  min-width: 0;
}
.cell-top b { font-weight: 500; color: var(--amber); }
.cell-top i {
  margin-left: auto;
  font-style: normal;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The tube itself: a photographed monitor housing, nine-sliced on its own visible edges. The slice
   numbers are measured, not guessed: tools/assets.mjs prints `53 90 123 66` for this file, which is
   where the moulding stops and the screen begins on each side. */
.glass {
  display: block;
  position: relative;
  height: 224px;             /* five rows plus the moulding: one height for every data tube, so the
                                row is even by construction and never by stretching */
  padding: 28px 32px 38px 30px;
  background: var(--glass);
  border-image: url("/img/bezel.png") 53 90 123 66 fill / 13px 16px 22px 13px / 0 stretch;
  overflow: hidden;
}
/* the sheen and the vignette of real glass, laid over whatever the screen is showing */
.glass::after {
  content: "";
  position: absolute;
  inset: 13px 16px 22px 13px;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: screen;
  background: url("/img/glass.png") center / 100% 100% no-repeat;
}
.glass .raster { display: block; position: relative; z-index: 1; width: 100%; height: auto; aspect-ratio: 520 / 276; }

/* The rows fill the tube: a screen with its readout crowded into the top half and black below it
   is a hole, and his value monitors are full from edge to edge. */
.rows {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  height: 100%;
  font: 400 var(--t-label)/1.45 var(--mono);
  letter-spacing: 0.02em;
}
.rows .r {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  white-space: nowrap;
}
.rows .r span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.rows .r b { font-weight: 500; font-variant-numeric: tabular-nums; }
.rows .up b { color: var(--green); }
.rows .down b { color: var(--red); }
.rows .wait b { color: var(--dim); }
.rows .k { color: var(--cyan); }
.rows .none { color: var(--dim); white-space: normal; letter-spacing: 0.02em; }

/* two lines of room, always, so every monitor on a row is exactly as tall as its neighbours and a
   long caption wraps instead of running out of its own frame */
.cell-foot {
  display: block;
  min-height: calc(2 * 1.3 * var(--t-label));
  font: 400 var(--t-label)/1.3 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
}

/* ON AIR: the open screen's monitor says so in words and lights its own frame. The state is a
   WORD, never a change of opacity, and never a plate that pushes the caption against its edge. */
.cell[aria-current="page"] .glass { box-shadow: 0 0 0 1px var(--red), 0 0 30px rgba(255, 75, 46, 0.25); }
.cell[aria-current="page"] .cell-foot { color: var(--paper); }
.cell[aria-current="page"] .cell-foot::before { content: "ON AIR \00b7\00a0"; color: var(--red); }

/* ---- the master monitor ----------------------------------------------------------
   The tall tube at the end of the wall, two rows high in the last column: his own wall puts its
   biggest monitor at the bottom right, and a machine prints its address on itself. Standing it up
   is also what keeps the six data tubes exactly the same height as each other. */

.cell--master { grid-column: span 2; }

.glass--master {
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: 14px;
  height: auto;
  align-content: start;
  /* the same air on both sides, measured from the moulding and not from the border box: the frame
     paints 13 px in on the left and 16 on the right, so an even 36 leaves 23 and 20 of real glass */
  padding: 28px 36px 38px 36px;
}

.master-state { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.master-pair { display: block; min-width: 0; }
.master-pair em {
  display: block;
  font: 400 var(--t-label)/1.3 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--muted);
}
.master-pair b {
  display: block;
  font: 500 clamp(16px, 1.15vw, var(--t-value))/1.35 var(--mono);
  color: var(--paper);
  overflow-wrap: anywhere;
}
/* The state row RESERVES two lines in all three columns.
   Measured before the change at 1920: the three values ran 46, 23 and 46 px tall and their bottoms
   sat at 1290, 1267, 1290, which is the ragged edge. The columns themselves were already equal
   (150 px each) and already had min-width: 0, so the raggedness was never the grid: it was one
   value wrapping and its neighbour not. A reserved slot also means the row does not jump when
   `waiting for launch` becomes `live on pump.fun` and a price arrives. */
.master-state:not(.master-split) .master-pair b {
  min-height: calc(2 * 1.35 * var(--t-value));
}
.master-pair b.empty { color: var(--dim); }

/* label | address | Copy. The label and the key are fixed columns and the address is the only one
   that gives, so a 44 character mint wraps INSIDE its own column and can never push the key out of
   the plate. The address is never ellipsised: the full mint has to stay readable and selectable
   (RULES/01 > Public configuration), so it wraps instead. */
.mint-line {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  border-radius: 5px;
  background: var(--sunk);
  box-shadow: inset 0 0 0 1px #1b222b;
}
.mint-line em {
  font: 400 var(--t-label)/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--muted);
}
.mint-line code {
  font: 400 clamp(16px, 1.15vw, var(--t-value))/1.45 var(--mono);
  color: var(--paper);
  overflow-wrap: anywhere;
  user-select: all;
  min-width: 0;
}
.mint-line .key--copy { flex: 0 0 auto; white-space: nowrap; }
.mint-line code.empty { color: var(--dim); user-select: auto; }

.copy-say {
  display: block;
  min-height: 1.3em;
  font: 400 var(--t-label)/1.3 var(--mono);
  letter-spacing: 0.06em;
  color: var(--green);
}
.copy-say.bad { color: var(--red); }

.cell-keys {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

/* ---- keys. A console key, generated, never a CSS rounded rectangle ----------------- */

.key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 18px;
  font: 500 var(--t-label)/1.3 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--paper);
  text-decoration: none;
  cursor: pointer;
  border: 0;
  /* the plate behind every key is a photographed console button, nine-sliced on its own collar */
  background: #161b21;
  border-image: url("/img/key.png") 46 fill / 11px / 0 stretch;
  transition: transform 0.08s ease, filter 0.18s ease;
}
.key img { display: block; flex: 0 0 auto; }
.key:hover { filter: brightness(1.3); }
.key:active { transform: translateY(1px); }

.key--buy {
  grid-column: 1 / -1;
  color: #2a1402;                       /* the lit cap is amber: the legend on it is burnt brown */
  background: #ffb84a;
  border-image: url("/img/key-lit.png") 64 fill / 13px / 0 stretch;
  text-shadow: 0 1px 0 rgba(255, 220, 160, 0.45);
}
.key--buy img { filter: brightness(0.14); }

.key--copy { min-height: 44px; padding: 0 18px; }

/* A key with nothing behind it yet is DEAD, and says so by being unlit: the amber cap goes out
   and the legend drops to the muted ink, which is a state you can see rather than a dimmer one */
.key[aria-disabled="true"],
.key:disabled {
  opacity: 0.74;
  cursor: not-allowed;
  filter: saturate(0.55);
}
.key[aria-disabled="true"]:hover,
.key:disabled:hover { filter: saturate(0.55); }
.key--buy[aria-disabled="true"] {
  color: var(--paper);
  background: #161b21;
  text-shadow: none;
  border-image-source: url("/img/key.png");
  border-image-slice: 46;
  border-image-width: 11px;
}
.key--buy[aria-disabled="true"] img { filter: none; }

/* ====================================================================================
   4. THE CONSOLE. His densest band: groups of rows under hairlines, the hue is the group.
   ==================================================================================== */

/* The console. His own console face is black and only its moulded EDGE catches the light, so the
   photographed panel is nine-sliced WITHOUT `fill`: the rails are the object, the face stays the
   page's own black, and every reading on it is measured against that black. */
.console {
  margin-top: 44px;
  padding: 34px 36px 40px;
  /* the rails are the panel's TOP and BOTTOM moulding only: the photograph's own raking light
     falls from the left, so a left rail and a right rail cut from it would never match, and a row
     of monitors that does not match on both sides is the asymmetry he reads first */
  border-image: url("/img/console.png") 40 0 110 0 / 11px 0 26px 0 / 0 stretch;
}

.console-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0;
  font: 500 var(--t-head)/1.2 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper);
}
.console-head b {
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  color: var(--red);
}
.console-head i {
  margin-left: auto;
  font-style: normal;
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  color: var(--muted);
}

.group { padding: 20px 0; }
.group > h3 {
  margin: 0 0 12px;
  font: 400 var(--t-label)/1.3 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber);
}
.group--cyan > h3 { color: var(--cyan); }
.group--green > h3 { color: var(--green); }
.group--blue > h3 { color: var(--blue); }

/* two columns where one block would leave the right half of the console empty */
.cols {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 20px 48px;
  align-items: start;
}

.sub {
  margin: 0 0 12px;
  font: 400 var(--t-label)/1.3 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber);
}
.sub--cyan { color: var(--cyan); }
.sub--blue { color: var(--blue); }
.say + .sub, .build + .sub { margin-top: 26px; }

.say {
  margin: 0 0 10px;
  max-width: 68ch;
  font: 400 var(--t-body)/1.65 var(--text);
  color: var(--paper);
}
.say:last-child { margin-bottom: 0; }
.say.quiet { color: var(--muted); }

/* a console table: his rows under hairlines and nothing else. Every cell keeps a full em of air on
   both sides, because the hairline IS the cell's own border and text on a border reads as spilled;
   the table is pulled back by that same inset so column one still lines up with the group's edge */
.sheet {
  width: calc(100% + 36px);
  margin-inline: -18px;
  border-collapse: collapse;
  font: 400 var(--t-label)/1.5 var(--mono);
}
.sheet caption { text-align: left; padding: 0 18px 10px; color: var(--muted); font-size: var(--t-label); letter-spacing: 0.08em; text-transform: uppercase; }
.sheet th, .sheet td { text-align: left; padding: 12px 18px; vertical-align: top; }
.sheet th {
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.sheet td { border-bottom: 1px solid #1b2028; color: var(--paper); }
.sheet tr:last-child td { border-bottom: 0; }
.sheet .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sheet .up { color: var(--green); }
.sheet .down { color: var(--red); }
.sheet .wait { color: var(--dim); }
.sheet .place { color: var(--amber); font-weight: 500; }
.sheet tr.mine td { background: rgba(255, 184, 74, 0.09); }
.sheet .why { color: var(--muted); font: 400 var(--t-body)/1.5 var(--text); }
.sheet a { color: var(--cyan); text-decoration-color: rgba(82, 215, 240, 0.4); text-underline-offset: 3px; }
.sheet .wrap { overflow-wrap: anywhere; }

.scroller { overflow-x: auto; }

/* the steps of the manual: his numbered console groups */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.steps li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
.steps b {
  font: 700 var(--t-head)/1.1 var(--dots);
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}
.steps p { margin: 0; font: 400 var(--t-body)/1.6 var(--text); color: var(--paper); }
.steps p em { font-style: normal; color: var(--cyan); }

/* ---- the form that builds a bot --------------------------------------------------- */

.build { display: grid; gap: 18px; max-width: 760px; }
.field { display: grid; gap: 7px; }
.field label {
  font: 400 var(--t-label)/1.3 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.field .count { float: right; color: var(--dim); }
.field input {
  width: 100%;
  min-height: 48px;
  padding: 12px 18px;
  font: 400 var(--t-value)/1.4 var(--mono);
  color: var(--paper);
  background: var(--sunk);
  border: 1px solid #222a33;
  border-radius: 4px;
}
.field input::placeholder { color: var(--dim); }
.field input:focus-visible { border-color: var(--amber); outline-offset: 1px; }
.field.bad input { border-color: var(--red); }
.field .err { font: 400 var(--t-label)/1.4 var(--mono); color: var(--red); min-height: 1.4em; }

.build-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.build-say { font: 400 var(--t-label)/1.5 var(--mono); color: var(--muted); }
.build-say.good { color: var(--green); }
.build-say.bad { color: var(--red); }

/* ====================================================================================
   5. Narrow screens. The wall lies down; nothing is squeezed.
   ==================================================================================== */

@media (max-width: 1100px) {
  :root { --t-display: 48px; }
  .wall { grid-template-columns: repeat(2, 1fr); }
  .cell--master { grid-column: 1 / -1; }
  .chamber-read { grid-template-columns: 1fr; gap: 18px; align-items: start; }
  .mast-reads { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .cols { grid-template-columns: 1fr; gap: 26px; }
}

@media (max-width: 720px) {
  :root { --gutter: 16px; --gap: 14px; --t-mast: 22px; --t-display: 42px; }
  .console { padding: 26px 22px 32px; }
  .wall { grid-template-columns: 1fr; margin-top: 34px; }
  .cell--master { grid-column: 1; }
  .glass { height: auto; min-height: 168px; }
  .cell-keys { grid-template-columns: 1fr; }
  .key--buy { grid-column: 1; }
  /* stacked, so there is no row to line the bottoms up with: the reserved second line would only
     be an empty line under every one line value */
  .master-state { grid-template-columns: 1fr; gap: 14px; }
  .master-state:not(.master-split) .master-pair b { min-height: 0; }
  .mint-line { grid-template-columns: 1fr; gap: 10px; }
  .mint-line .key--copy { justify-self: start; }
  .chamber-reads { grid-template-columns: repeat(2, 1fr); }
  .mast-line { gap: 10px; }
  .glass-box { border-radius: 8px; }
  #chamber { aspect-ratio: 1100 / 760; }
  .steps li { grid-template-columns: 34px 1fr; gap: 12px; }
}

@media (max-width: 380px) {
  :root { --gutter: 12px; }
  .mast-reads, .chamber-reads { grid-template-columns: 1fr; }
  .read { padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}