/* Merged Agent. One console sheet on a night yard.
   Built to art/ref/design-reference.jpg: black field, chamfered hairline frames,
   one big object left, two readouts right, a signing band at the end.
   Every surface is a generated picture from art/site/, worn as a nine-slice.
   Colour names end in -ink, spacing names in -gap, so no name is ever both. */

@font-face { font-family: "Chakra"; src: url("/fonts/ChakraPetch-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Chakra"; src: url("/fonts/ChakraPetch-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Krypton"; src: url("/fonts/MonaspaceKrypton-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Krypton"; src: url("/fonts/MonaspaceKrypton-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Argon"; src: url("/fonts/MonaspaceArgon-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Argon"; src: url("/fonts/MonaspaceArgon-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --void-ink: #050309;
  --frame-ink: #2e1f4d;
  --purple-ink: #9028f8;
  --purple-hi-ink: #c898f8;
  --purple-lo-ink: #6a14c0;
  --cream-ink: #f8f0e0;
  --text-ink: #d9ceef;
  --dim-ink: #9a8dba;
  --plus-ink: #45d97a;
  --minus-ink: #f0444a;

  --page-gap: clamp(16px, 1.6vw, 30px);
  --band-gap: clamp(48px, 5vw, 86px);
  --box-gap: clamp(20px, 1.7vw, 32px);

  --display-size: clamp(40px, 6.6vw, 126px);
  --title-size: clamp(27px, 1.9vw, 36px);
  --body-size: clamp(16px, 1.05vw, 19px);
  --label-size: clamp(16px, 0.95vw, 18px);
  --row-size: clamp(17px, 1.15vw, 22px);
  --value-size: clamp(32px, 2.9vw, 54px);
  --figure-size: clamp(64px, 6vw, 112px);

  color-scheme: dark;
}

* { box-sizing: border-box; }

html { background: var(--void-ink); }

body {
  margin: 0;
  background: var(--void-ink);
  color: var(--text-ink);
  font-family: "Argon", ui-monospace, monospace;
  font-size: var(--body-size);
  line-height: 1.6;
  font-synthesis: none;
  overflow-x: hidden;
}

/* ---- the yard behind the glass: more of the world, blurred, on its own clock ---- */
.yard {
  position: fixed;
  inset: -8vmax;
  background: url("/img/yard.png") center / cover no-repeat;
  filter: blur(26px) saturate(0.85) brightness(0.62);
  opacity: 0.8;
  animation: drift 96s ease-in-out infinite alternate;
  z-index: 0;
  pointer-events: none;
}
@keyframes drift {
  from { transform: scale(1.04) translate3d(-1.4%, 0.8%, 0); }
  to   { transform: scale(1.12) translate3d(1.6%, -1.2%, 0); }
}
.yard-air { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* ---- the sheet ---- */
.sheet {
  position: relative;
  z-index: 1;
  margin: var(--page-gap);
  padding: clamp(14px, 1.1vw, 22px) clamp(16px, 1.8vw, 36px) clamp(26px, 2.2vw, 44px);
  border: 18px solid transparent;
  border-image: url("/img/panel.png") 36 fill / 18px / 0 stretch;
  background: rgba(5, 3, 9, 0.72);
  backdrop-filter: blur(3px);
}

/* ---- the prompt rail ---- */
.rail {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 28px;
  position: relative;
  padding: 6px 0 16px;
}
.rail::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--frame-ink); }
.rail p { margin: 0; font-family: "Krypton", ui-monospace, monospace; font-weight: 700; font-size: var(--label-size); letter-spacing: 0.2em; text-transform: uppercase; }
.rail-id { color: var(--cream-ink); }
.rail-arrow { color: var(--purple-ink); }
.rail-state { color: var(--dim-ink); display: inline-flex; align-items: center; gap: 12px; }
.lamp { width: 11px; height: 11px; background: var(--frame-ink); box-shadow: 0 0 0 1px var(--frame-ink); }
.lamp.on { background: var(--purple-ink); box-shadow: 0 0 12px 2px rgba(144, 40, 248, 0.75); animation: pulse 2.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* ---- the deck ---- */
.deck {
  display: grid;
  grid-template-columns: minmax(0, 57fr) minmax(0, 43fr);
  gap: clamp(22px, 2.4vw, 46px);
  padding-top: clamp(26px, 2.6vw, 50px);
  align-items: start;
}
.deck-main { min-width: 0; container-type: inline-size; }

.display {
  margin: 0;
  font-family: "Chakra", system-ui, sans-serif;
  font-weight: 700;
  /* sized from its own column, not the window, so it never wraps to a third line */
  font-size: var(--display-size);
  font-size: clamp(40px, 11.4cqw, 126px);
  line-height: 1.06;
  letter-spacing: -0.005em;
  color: var(--cream-ink);
  text-shadow: 0 0 44px rgba(144, 40, 248, 0.55), 0 0 12px rgba(144, 40, 248, 0.35);
  text-wrap: balance;
}
.lede {
  margin: clamp(18px, 1.5vw, 28px) 0 0;
  max-width: 54ch;
  font-size: var(--body-size);
  color: var(--text-ink);
}
.lede b, .lede strong { color: var(--cream-ink); font-weight: 500; }

/* ---- the junction: five sidings merging, one switch at a time, into one road ----
   Column one holds the keys, all cut to the width of the longest word so every
   siding leaves on the same line. Column three holds the furnace, shifted until
   the rail bed drawn in its arch sits on the middle key. Column two is the throat
   the canvas draws the switches in. */
.junction {
  --end-size: clamp(158px, 30cqw, 300px);
  --node-gap: clamp(10px, 0.8cqw, 15px);
  --throat: clamp(150px, 20cqw, 420px);
  position: relative;
  margin-top: clamp(26px, 2.6vw, 48px);
  display: grid;
  grid-template-columns: max-content minmax(var(--throat), 1fr) var(--end-size);
  column-gap: 0;
  align-items: center;
}
/* the canvas is drawn on the half scale grid of the sprites, so it must be
   blown up the way they are: on the pixel, never interpolated */
.junction-rails { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; image-rendering: pixelated; }

.junction-nodes {
  position: relative;
  z-index: 2;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--node-gap);
}
.junction-nodes li { display: flex; }
.node {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(13px, 1cqw, 19px) clamp(20px, 2cqw, 34px);
  border: 16px solid transparent;
  border-image: url("/img/key.png") 32 fill / 16px / 0 stretch;
  font-family: "Krypton", ui-monospace, monospace;
  font-weight: 700;
  font-size: var(--row-size);
  line-height: 1;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--text-ink);
  transition: color 0.14s ease, filter 0.14s ease;
}
.node:hover { color: var(--cream-ink); filter: drop-shadow(0 0 14px rgba(144, 40, 248, 0.5)); }
.node:focus-visible { outline: 2px solid var(--purple-hi-ink); outline-offset: 4px; }
.node[aria-current="page"] {
  border-image: url("/img/key-lit.png") 32 fill / 16px / 0 stretch;
  color: var(--cream-ink);
  filter: drop-shadow(0 0 18px rgba(144, 40, 248, 0.6));
}

.junction-end {
  position: relative;
  z-index: 0;
  grid-column: 3;
  align-self: center;
  justify-self: end;
  margin: 0;
  width: 100%;
  transform: translateY(var(--end-shift, 0px));
}
.junction-end img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 30px rgba(144, 40, 248, 0.4));
}
/* the caption hangs off the picture, so the figure's own box stays the picture
   and the alignment on the rail bed never has to count a line of type */
.junction-end figcaption {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 100%;
  font-family: "Krypton", ui-monospace, monospace;
  font-weight: 700;
  font-size: var(--label-size);
  line-height: 1.35;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim-ink);
  text-align: center;
  text-wrap: balance;
}

/* narrow: the keys stack full width, the road stands on end in the left gutter
   and turns once, into the furnace under them */
@container (max-width: 640px) {
  .junction {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(26px, 7cqw, 46px);
    padding-bottom: clamp(44px, 10cqw, 68px);
  }
  .junction-nodes { margin-left: 84px; }
  .junction-end {
    grid-column: 1;
    justify-self: center;
    width: min(236px, 78%);
    transform: none;
  }
  .junction-end figcaption { max-width: 24ch; }
}

/* ---- the instrument column ---- */
.column { display: grid; gap: clamp(18px, 1.6vw, 30px); min-width: 0; }

.panel {
  padding: var(--box-gap);
  border: 18px solid transparent;
  border-image: url("/img/panel.png") 36 fill / 18px / 0 stretch;
  min-width: 0;
}
.panel-lit { border-image: url("/img/panel-lit.png") 36 fill / 18px / 0 stretch; }

.panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0 0 clamp(14px, 1.2vw, 22px);
  font-family: "Krypton", ui-monospace, monospace;
  font-weight: 700;
  font-size: var(--label-size);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--purple-hi-ink);
}
.panel-head-rule { flex: 1; height: 1px; background: var(--frame-ink); }
.panel-head-tag { color: var(--dim-ink); letter-spacing: 0.14em; }

.readout { list-style: none; margin: 0; padding: 0; }
.readout li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: clamp(6px, 0.5vw, 10px) 0;
}
.readout li { position: relative; }
.readout li + li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(46, 31, 77, 0.8); }
.readout-mark { width: 32px; height: 32px; flex: none; image-rendering: pixelated; }
.readout-name {
  font-family: "Krypton", ui-monospace, monospace;
  font-weight: 500;
  font-size: var(--row-size);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-ink);
  white-space: nowrap;
}
.readout-leader { flex: 1; min-width: 14px; height: 1px; background: repeating-linear-gradient(to right, var(--frame-ink) 0 3px, transparent 3px 7px); }
.readout-value {
  font-family: "Krypton", ui-monospace, monospace;
  font-weight: 700;
  font-size: var(--value-size);
  line-height: 1;
  color: var(--cream-ink);
  font-variant-numeric: tabular-nums;
}
.accent { color: var(--purple-hi-ink); }

.gauge { position: relative; display: flex; justify-content: center; align-items: center; min-height: clamp(110px, 9vw, 168px); }
.gauge-dial { position: absolute; width: 100%; max-width: 400px; height: auto; opacity: 0.8; image-rendering: pixelated; }
.gauge-figure {
  position: relative;
  margin: 0;
  font-family: "Chakra", system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--figure-size);
  line-height: 1;
  color: var(--cream-ink);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 30px rgba(144, 40, 248, 0.8);
}
.gauge-unit { font-size: 0.42em; color: var(--purple-hi-ink); margin-left: 0.1em; }

.bar { display: flex; gap: 4px; height: 20px; margin: clamp(12px, 1vw, 18px) 0 clamp(14px, 1.2vw, 22px); }
.bar i { flex: 1; background: rgba(46, 31, 77, 0.9); }
.bar i.on { background: var(--purple-ink); box-shadow: 0 0 10px rgba(144, 40, 248, 0.6); }

.pair { margin: 0; display: grid; gap: 2px; }
.pair > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 9px 0; }
.pair > div { position: relative; }
.pair > div + div::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(46, 31, 77, 0.8); }
.pair dt {
  font-family: "Krypton", ui-monospace, monospace;
  font-weight: 500;
  font-size: var(--label-size);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim-ink);
}
.pair dd {
  margin: 0 0 0 auto;
  overflow-wrap: anywhere;
  font-family: "Krypton", ui-monospace, monospace;
  font-weight: 700;
  font-size: calc(var(--row-size) + 4px);
  color: var(--cream-ink);
  font-variant-numeric: tabular-nums;
}

/* ---- route bands ---- */
.band { padding-top: var(--band-gap); min-width: 0; }
.band-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin: 0 0 clamp(18px, 1.6vw, 30px);
  font-family: "Chakra", system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--title-size);
  letter-spacing: 0.01em;
  color: var(--cream-ink);
}
.band-head i { flex: 1; height: 1px; background: var(--frame-ink); }
.band-head small {
  font-family: "Krypton", ui-monospace, monospace;
  font-weight: 700;
  font-size: var(--label-size);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--purple-hi-ink);
}
.two { display: grid; grid-template-columns: minmax(0, 57fr) minmax(0, 43fr); gap: clamp(22px, 2.4vw, 46px); align-items: start; }

/* ---- the timeline of pull requests ---- */
.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.feed-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 16px;
  padding: var(--box-gap);
  border: 18px solid transparent;
  border-image: url("/img/panel.png") 36 fill / 18px / 0 stretch;
}
.feed-row.is-merged { border-image: url("/img/panel-lit.png") 36 fill / 18px / 0 stretch; }
.feed-mark { width: 32px; height: 32px; image-rendering: pixelated; margin-top: 4px; }
.feed-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px; }
.feed-repo {
  font-family: "Krypton", ui-monospace, monospace;
  font-weight: 700;
  font-size: var(--row-size);
  color: var(--cream-ink);
  word-break: break-word;
}
.feed-state {
  font-family: "Krypton", ui-monospace, monospace;
  font-weight: 700;
  font-size: var(--label-size);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.state-merged { color: var(--purple-hi-ink); }
.state-open { color: var(--dim-ink); }
.state-closed { color: var(--minus-ink); }
.feed-title { margin: 8px 0 0; color: var(--text-ink); }
.feed-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px; font-family: "Krypton", ui-monospace, monospace; font-weight: 500; font-size: var(--label-size); color: var(--dim-ink); letter-spacing: 0.06em; }
.diff-plus { color: var(--plus-ink); }
.diff-minus { color: var(--minus-ink); }
.quote { margin: 14px 0 0; padding: 14px 22px; border-left: 3px solid var(--frame-ink); color: var(--text-ink); }
.quote { overflow-wrap: anywhere; }
.quote cite { display: block; margin-top: 8px; font-style: normal; font-size: var(--label-size); color: var(--dim-ink); overflow-wrap: anywhere; }

/* ---- the terminal ---- */
.win {
  border: 18px solid transparent;
  border-image: url("/img/panel.png") 36 fill / 18px / 0 stretch;
  min-width: 0;
}
.win-title {
  display: flex;
  align-items: center;
  /* the title is two words in one strip; on a 320 px screen the second one takes
     its own line instead of running out through the right edge of the window */
  flex-wrap: wrap;
  gap: 2px 12px;
  min-height: 52px;
  margin: 0;
  padding: 10px 28px 10px 14px;
  border: 12px solid transparent;
  border-left-width: 36px;
  border-image: url("/img/strip.png") 24 24 24 72 fill / 12px 12px 12px 36px / 0 stretch;
  font-family: "Krypton", ui-monospace, monospace;
  font-weight: 700;
  font-size: var(--label-size);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-ink);
  min-width: 0;
}
.win-title-dim { color: var(--dim-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 320 px: the strip keeps its wide left cap, so the title gives up its letter
   spacing and most of its padding rather than run out through the right edge */
@media (max-width: 360px) {
  .win-title { padding: 10px 8px 10px 6px; letter-spacing: 0.01em; }
}
.win-body { padding: var(--box-gap); min-width: 0; }

.tty {
  margin: 0;
  padding: var(--box-gap);
  font-family: "Argon", ui-monospace, monospace;
  font-size: var(--body-size);
  line-height: 1.75;
  color: var(--text-ink);
  white-space: pre-wrap;
  word-break: break-word;
}
.tty b { color: var(--purple-hi-ink); font-weight: 500; }
.tty .ok { color: var(--plus-ink); }
.tty .bad { color: var(--minus-ink); }

/* ---- the ident band: the sheet signs itself ---- */
.ident {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(190px, 20vw, 360px);
  gap: clamp(20px, 2vw, 40px);
  align-items: stretch;
  padding-top: var(--band-gap);
}
.ident-name {
  margin: 0;
  font-family: "Chakra", system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--title-size);
  color: var(--cream-ink);
}
.ident-ticker { color: var(--purple-hi-ink); }
.ident-label {
  margin: clamp(16px, 1.3vw, 24px) 0 10px;
  font-family: "Krypton", ui-monospace, monospace;
  font-weight: 700;
  font-size: var(--label-size);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim-ink);
}
.ident-ca {
  margin: 0;
  padding: 22px 34px;
  background: rgba(5, 3, 9, 0.9);
  box-shadow: inset 0 0 0 1px var(--frame-ink), inset 0 2px 10px rgba(0, 0, 0, 0.8);
  font-family: "Krypton", ui-monospace, monospace;
  font-weight: 700;
  font-size: clamp(16px, 1.55vw, 30px);
  line-height: 1.4;
  color: var(--cream-ink);
  overflow-wrap: anywhere;
  min-width: 0;
  user-select: all;
}
.ident-ca.empty { color: var(--dim-ink); font-weight: 500; user-select: auto; }

.keys { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(16px, 1.4vw, 26px); }
.key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 28px;
  border: 16px solid transparent;
  border-image: url("/img/key.png") 32 fill / 16px / 0 stretch;
  background: none;
  font-family: "Krypton", ui-monospace, monospace;
  font-weight: 700;
  font-size: var(--label-size);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-ink);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.1s ease, color 0.12s ease;
}
.key:hover:not([aria-disabled="true"]):not(:disabled) { color: var(--cream-ink); filter: drop-shadow(0 0 14px rgba(144, 40, 248, 0.55)); }
.key:active:not([aria-disabled="true"]):not(:disabled) { transform: translateY(2px); }
.key:focus-visible { outline: 2px solid var(--purple-hi-ink); outline-offset: 4px; }
.key-lit { border-image: url("/img/key-lit.png") 32 fill / 16px / 0 stretch; color: var(--cream-ink); }
.key[aria-disabled="true"], .key:disabled { color: var(--dim-ink); opacity: 0.55; cursor: not-allowed; }
.key img { width: 22px; height: 22px; object-fit: contain; flex: none; }
/* the one small line the sheet signs off with, in the last block of the docs */
.prose .fine { margin-top: clamp(18px, 1.6vw, 28px); font-size: var(--label-size); color: var(--dim-ink); }

.key-note { width: 100%; margin: 4px 0 0; font-family: "Krypton", ui-monospace, monospace; font-size: var(--label-size); color: var(--dim-ink); letter-spacing: 0.08em; }

.ident-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 1.3vw, 26px);
  border: 18px solid transparent;
  border-image: url("/img/panel.png") 36 fill / 18px / 0 stretch;
}
.ident-mark img { width: 100%; max-width: 100%; height: auto; image-rendering: pixelated; filter: drop-shadow(0 0 34px rgba(144, 40, 248, 0.55)); }
.ident-mark { align-self: stretch; }

/* ---- forms ---- */
.field { display: grid; gap: 10px; margin-bottom: clamp(16px, 1.4vw, 24px); }
.field label {
  font-family: "Krypton", ui-monospace, monospace;
  font-weight: 700;
  font-size: var(--label-size);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim-ink);
}
.field input, .field textarea {
  width: 100%;
  min-height: 56px;
  padding: 16px 22px;
  background: rgba(5, 3, 9, 0.9);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--frame-ink);
  color: var(--cream-ink);
  font-family: "Argon", ui-monospace, monospace;
  font-size: var(--body-size);
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--purple-hi-ink); outline-offset: 0; box-shadow: inset 0 0 0 1px var(--purple-ink); }
.field textarea { min-height: 128px; resize: vertical; }

.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.checks li { display: flex; align-items: baseline; gap: 14px; padding: 12px 0; font-size: var(--body-size); }
.checks li { position: relative; }
.checks li + li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(46, 31, 77, 0.8); }
.checks .mark { font-family: "Krypton", ui-monospace, monospace; font-weight: 700; flex: none; width: 2.4em; letter-spacing: 0.1em; }
.checks .pass .mark { color: var(--plus-ink); }
.checks .fail .mark { color: var(--minus-ink); }
.checks .wait .mark { color: var(--dim-ink); }

/* ---- plain blocks ---- */
.prose { max-width: 70ch; }
.prose p { margin: 0 0 1.1em; }
.prose a { color: var(--purple-hi-ink); text-underline-offset: 4px; }
.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 14px; }
.steps li {
  counter-increment: s;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  padding: var(--box-gap);
  border: 18px solid transparent;
  border-image: url("/img/panel.png") 36 fill / 18px / 0 stretch;
}
.steps li::before {
  content: counter(s, decimal-leading-zero);
  font-family: "Krypton", ui-monospace, monospace;
  font-weight: 700;
  font-size: var(--value-size);
  line-height: 1;
  color: var(--purple-ink);
}
.steps h3 { margin: 0 0 8px; font-family: "Chakra", system-ui, sans-serif; font-weight: 700; font-size: calc(var(--row-size) + 6px); color: var(--cream-ink); }
.steps p { margin: 0; color: var(--text-ink); }

.table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.table th, .table td { padding: 18px 26px; text-align: right; font-family: "Krypton", ui-monospace, monospace; font-size: var(--row-size); }
.table th:first-child, .table td:first-child { text-align: left; }
.table thead th { font-weight: 700; font-size: var(--label-size); letter-spacing: 0.16em; text-transform: uppercase; color: var(--purple-hi-ink); }
.table tbody td { color: var(--text-ink); font-weight: 500; }
/* the rule under a row is drawn, never a border: a 1 px border would make the cell
   itself the nearest visible box, and every figure in it would read as text pressed
   to the edge of a box it never belonged to */
.table th, .table td { position: relative; }
.table thead th::after, .table tbody td::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: rgba(46, 31, 77, 0.7);
}
.table thead th::after { background: var(--frame-ink); }
.table tbody tr:hover td { color: var(--cream-ink); background: rgba(144, 40, 248, 0.07); }
.table-wrap {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: var(--box-gap);
  border: 18px solid transparent;
  border-image: url("/img/panel.png") 36 fill / 18px / 0 stretch;
}
.table-wrap .table th:first-child, .table-wrap .table td:first-child { padding-left: 0; }
.table-wrap .table th:last-child, .table-wrap .table td:last-child { padding-right: 0; }

.chart { display: flex; align-items: flex-end; gap: 6px; height: clamp(150px, 15vw, 240px); padding: var(--box-gap); border: 18px solid transparent; border-image: url("/img/panel.png") 36 fill / 18px / 0 stretch; }
.chart-col { flex: 1; display: grid; align-content: end; gap: 3px; min-width: 0; }
.chart-col i { display: block; width: 100%; }
.chart-col .earn { background: var(--purple-ink); box-shadow: 0 0 12px rgba(144, 40, 248, 0.5); }
.chart-col .cost { background: var(--frame-ink); }

.filters { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: clamp(18px, 1.6vw, 28px); }

.empty-note {
  margin: 0;
  padding: var(--box-gap);
  border: 18px solid transparent;
  border-image: url("/img/panel.png") 36 fill / 18px / 0 stretch;
  color: var(--dim-ink);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 40;
  padding: 16px 30px;
  border: 16px solid transparent;
  border-image: url("/img/key-lit.png") 32 fill / 16px / 0 stretch;
  font-family: "Krypton", ui-monospace, monospace;
  font-weight: 700;
  font-size: var(--label-size);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream-ink);
}

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

/* ---- narrow ---- */
@media (max-width: 1100px) {
  .deck, .two, .ident { grid-template-columns: minmax(0, 1fr); }
  .ident-mark { max-width: 300px; }
}
@media (max-width: 560px) {
  .readout li { flex-wrap: wrap; }
  .readout-leader { min-width: 0; }
  .feed-row { grid-template-columns: minmax(0, 1fr); }
  .feed-mark { display: none; }
  .steps li { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

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

/* the day's best merge: the reference's big numeral next to its detail */
.prize {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) clamp(110px, 10vw, 180px);
  gap: clamp(20px, 2vw, 40px);
  align-items: center;
  padding: clamp(30px, 2vw, 40px);
  border: 18px solid transparent;
  border-image: url("/img/panel-lit.png") 36 fill / 18px / 0 stretch;
}
.prize-figure {
  margin: 0;
  font-family: "Chakra", system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--figure-size);
  line-height: 1;
  color: var(--cream-ink);
  text-shadow: 0 0 34px rgba(144, 40, 248, 0.8);
  font-variant-numeric: tabular-nums;
}
.prize-title { margin: 8px 0 0; font-size: var(--body-size); color: var(--text-ink); }
.prize-mark { width: 100%; height: auto; image-rendering: pixelated; filter: drop-shadow(0 0 26px rgba(144, 40, 248, 0.5)); }
@media (max-width: 860px) {
  .prize { grid-template-columns: minmax(0, 1fr); }
  .prize-mark { display: none; }
}

@media (max-width: 620px) {
  .win-title-dim { display: none; }
  .prize-figure { font-size: clamp(50px, 14vw, 72px); }
}