/* democracy web. One object: a television in a dark room, and the broadcast on its glass.
   Every rect the page draws on the set comes from css/set.css, which tools/art.mjs measures off the
   photograph's own pixels. Nothing here is eyeballed and nothing here is an svg. */

@font-face {
  font-family: "Screen";
  src: url("/fonts/3270-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Read";
  src: url("/fonts/Sono.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  /* the photograph's own palette, measured off his picture */
  --room: #010308;
  --glass-field: #02091c;
  --glass-deep: #010512;
  --hud: #2f8bff;
  --hud-dim: #1b4f8f;
  --ink: #d6f1ff;
  --ink-mid: #8fc9f2;
  --ink-low: #5d93bd;
  --core: #eafaff;
  --gain: #8fe6ff;
  --loss: #ff9277;
  --amber: #ffbe5c;

  --t-label: 14px;
  --t-body: 14.5px;
  --t-value: 17px;
  --t-figure: 22px;
  --t-head: 21px;

  --gap: 10px;
  --pad: 15px 22px;
  --row: 28px;
  --rule: rgba(27, 79, 143, .45);
  --trk: 0.08em;

  --set-max: 1340px;
  --set-min: 1180px;
  --set-gutter: 60px;
  /* the set is as big as the window allows, by width AND by height, and stops shrinking at the
     width where the glass can still carry a readable interface */
  --setw: min(var(--set-max), calc(100vw - var(--set-gutter) * 2), max(var(--set-min), calc((100vh - 80px) * var(--set-aspect))));
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--room);
  color: var(--ink);
  font-family: "Read", ui-monospace, monospace;
  font-size: var(--t-body);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

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

/* ---- the room ------------------------------------------------------------ */
/* The background is more of the same room, far out of focus, with the set's own light spilling
   across it. It breathes with the window, it never moves with the pointer. */
.room {
  position: fixed;
  inset: 0;
  background: #000 url("/img/room.webp") center/cover no-repeat;
  opacity: 0.5;
  filter: blur(2px) saturate(0.9);
  z-index: 0;
}
.spill {
  position: fixed;
  inset: -20%;
  background: radial-gradient(42% 42% at 50% 38%, rgba(47, 139, 255, 0.22), rgba(3, 10, 26, 0) 70%);
  z-index: 1;
  animation: breathe 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes breathe {
  0%, 100% { opacity: 0.74; }
  50% { opacity: 1; }
}

/* ---- the set ------------------------------------------------------------- */
.stage {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 34px var(--set-gutter) 56px;
}
.set {
  position: relative;
  width: var(--setw);
  aspect-ratio: var(--set-aspect);
  background: url("/img/set.webp") center top/100% auto no-repeat;
  /* the crop ends inside the plastic, so the last rows go back into the room instead of ending on
     a cut edge */
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 92%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 92%, rgba(0, 0, 0, 0) 100%);
}

/* ---- the glass ----------------------------------------------------------- */
.glass {
  position: absolute;
  left: var(--glass-left);
  top: var(--glass-top);
  width: var(--glass-width);
  height: var(--glass-height);
  overflow: hidden;
  border-radius: 4.2% / 5.4%;
  background:
    radial-gradient(120% 110% at 50% 45%, #04122c 0%, var(--glass-field) 52%, var(--glass-deep) 100%);
  box-shadow: 0 0 60px rgba(47, 139, 255, 0.32), inset 0 0 70px rgba(6, 28, 62, 0.9);
  container-type: inline-size;
}
/* the crowd: his alley, which is our chat made visible, sitting behind the readout */
.picture {
  position: absolute;
  inset: -2% -2% 24%;
  background: url("/img/crowd.webp") center 30%/cover no-repeat;
  opacity: 0.42;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.2) 0, #000 28%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.2) 0, #000 28%, rgba(0,0,0,0) 100%);
  transition: opacity .4s ease;
}
.glass[data-channel="live"] .picture { opacity: .42; }
.glass:not([data-channel="live"]) .picture { opacity: .16; }

.scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.38) 0 1px, rgba(0, 0, 0, 0) 1px 3px);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.scan::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 22%;
  background: linear-gradient(180deg, rgba(120, 190, 255, 0) 0%, rgba(120, 190, 255, 0.05) 50%, rgba(120, 190, 255, 0) 100%);
  animation: roll 9s linear infinite;
}
@keyframes roll {
  from { top: -24%; }
  to { top: 102%; }
}
.bulge {
  position: absolute;
  inset: 0;
  background: radial-gradient(130% 120% at 50% 50%, rgba(0, 0, 0, 0) 58%, rgba(1, 5, 16, 0.75) 100%);
  pointer-events: none;
}

.screen {
  position: absolute;
  inset: 0;
  /* measured off the plate: the glass covers the whole lit screen, the content keeps inside the
     part of it that is not curving away */
  padding: var(--pad-top) var(--pad-right) var(--pad-bottom) var(--pad-left);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  overflow: hidden;
}

/* ---- the channel line ---------------------------------------------------- */
.rail {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding-bottom: 7px;
  flex: 0 0 auto;
}
/* a rule belongs to the row it divides, never as a border around the words: a border would make
   the rail a box and the gate would then want an em of air inside it */
.rail::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--hud-dim);
}
.rail__ident { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.rail__ident b {
  font: 400 var(--t-label)/1 "Screen", monospace;
  letter-spacing: var(--trk);
  color: var(--ink);
  text-transform: lowercase;
  white-space: nowrap;
}
.rail__ident i {
  font: 400 var(--t-label)/1 "Screen", monospace;
  letter-spacing: var(--trk);
  color: var(--hud);
  font-style: normal;
}
.rail__clock {
  font: 400 var(--t-label)/1 "Screen", monospace;
  letter-spacing: var(--trk);
  color: var(--ink-low);
  white-space: nowrap;
}
.rail__channels { position: relative; display: flex; gap: 2px; flex-wrap: wrap; }
.chan {
  position: relative;
  appearance: none;
  border: 0;
  background: none;
  color: var(--ink-mid);
  font: 400 var(--t-label)/1 "Screen", monospace;
  letter-spacing: var(--trk);
  padding: 7px 13px;
  min-height: 30px;
  cursor: pointer;
  transition: color .18s ease;
}
.chan:hover { color: var(--ink); }
.chan.is-open { color: var(--core); }
.chan:focus-visible { outline: 2px solid var(--hud); outline-offset: -2px; }
.chan .lamp {
  position: absolute;
  top: 3px; right: 5px;
  width: 5px; height: 5px;
  background: var(--amber);
  box-shadow: 0 0 7px var(--amber);
  animation: blink 1.1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: .25; } }
/* the bar slides between the channels, which is the one thing a tuner does */
.chan__bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--hud);
  box-shadow: 0 0 10px var(--hud);
  transition: transform .28s cubic-bezier(.2, .7, .2, 1), width .28s cubic-bezier(.2, .7, .2, 1);
  width: 0;
}

/* ---- a channel ----------------------------------------------------------- */
.channel {
  display: none;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  gap: var(--gap);
}
.channel.is-open { display: flex; }
.channel > .head { flex: 0 0 auto; }
.head h1 {
  margin: 0 0 6px;
  font: 400 var(--t-head)/1.1 "Screen", monospace;
  letter-spacing: var(--trk);
  color: var(--core);
  text-shadow: 0 0 18px rgba(47, 139, 255, .45);
}
.head p {
  margin: 0;
  max-width: 68ch;
  color: var(--ink-mid);
  font-size: var(--t-body);
  line-height: 1.6;
}

/* ---- the readout --------------------------------------------------------- */
.readout {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.readout__over {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 0;
  font: 400 var(--t-label)/1 "Screen", monospace;
  letter-spacing: var(--trk);
  color: var(--ink-mid);
  text-transform: uppercase;
}
.readout__over b { font-weight: 400; color: var(--core); }
.readout__canvas {
  display: block;
  width: 100%;
  height: 88px;
}
.readout__say {
  margin: 0;
  min-height: 1.4em;
  line-height: 1.4;
  color: var(--ink-mid);
  font-size: var(--t-body);
  text-align: center;
}
.readout__say b { color: var(--ink); font-weight: 600; }
.readout__say a { color: var(--amber); text-decoration: underline; text-underline-offset: 3px; }

/* ---- the mode scale ------------------------------------------------------ */
.scale { flex: 0 0 auto; }
.scale__head, .cell__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap);
  margin-bottom: 5px;
}
.k {
  font: 400 var(--t-label)/1 "Screen", monospace;
  letter-spacing: var(--trk);
  color: var(--ink-mid);
  text-transform: uppercase;
}
.v { font-size: var(--t-body); color: var(--ink-low); }
.scale__bar {
  position: relative;
  height: 12px;
  border: 1px solid var(--hud-dim);
  background: linear-gradient(90deg, rgba(47, 139, 255, .05), rgba(47, 139, 255, .14));
}
.scale__fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: var(--hud);
  box-shadow: 0 0 14px rgba(47, 139, 255, .8);
  transition: width .5s cubic-bezier(.2, .7, .2, 1);
}
.scale__mark { position: absolute; top: -4px; bottom: -4px; width: 1px; background: var(--ink-low); }
.scale__mark--low { left: 50%; }
.scale__mark--high { left: 75%; }
.scale__feet {
  display: flex;
  justify-content: space-between;
  margin-top: 3px;
  font: 400 var(--t-label)/1 "Screen", monospace;
  letter-spacing: var(--trk);
  color: var(--ink-mid);
}

/* ---- the two cells under the readout ------------------------------------- */
.split {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 34fr 34fr 32fr;
  gap: var(--gap);
}
.cell {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  border: 1px solid var(--hud-dim);
  padding: var(--pad);
  /* the chamfered corner of his hud frame */
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.cell__head { margin-bottom: 8px; flex: 0 0 auto; flex-wrap: wrap; row-gap: 2px; }
.cell__head .v { white-space: nowrap; min-width: 0; }
.cell__head .k { white-space: nowrap; }
@media (max-width: 760px) { .cell__head .v { white-space: normal; } }

/* ---- the floor ----------------------------------------------------------- */
.floor {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 0;
}
.floor li {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  padding: 5px 0;
  font-size: var(--t-body);
  line-height: 1.45;
}
.floor li + li::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--rule);
}
.floor__who {
  font: 400 var(--t-label)/1.5 "Screen", monospace;
  letter-spacing: 0.04em;
  color: var(--ink-mid);
  white-space: nowrap;
}
.floor__said { min-width: 0; overflow-wrap: anywhere; color: var(--ink-mid); }
.floor li.is-command .floor__said { color: var(--core); font-weight: 600; }
.floor li.is-vote .floor__said { color: var(--amber); }
.floor__empty { color: var(--ink-low); grid-template-columns: 1fr !important; }
.floor--full { max-height: none; }

/* ---- the little board on the live channel -------------------------------- */
.miniboard { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.miniboard li {
  position: relative;
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: baseline;
  gap: 8px;
  padding: 2px 0;
  line-height: 1.35;
}
.miniboard li + li::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--rule);
}
.miniboard__slot { font: 400 var(--t-label)/1.35 "Screen", monospace; color: var(--hud); }
.miniboard__ticker { font-size: var(--t-body); font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.miniboard__move { font-size: var(--t-body); font-variant-numeric: tabular-nums; }
/* a coin the treasury is in wears the amber of everything the keeper has actually done */
.miniboard li.is-held .miniboard__ticker { color: var(--amber); }
.up { color: var(--gain); }
.down { color: var(--loss); }
.flat { color: var(--ink-low); }

.purse {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1px 12px;
  align-items: baseline;
  padding-top: 9px;
  margin-top: 2px;
  flex: 0 0 auto;
}
.purse::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--hud-dim);
}
.purse__k { font: 400 var(--t-label)/1.5 "Screen", monospace; letter-spacing: var(--trk); color: var(--ink-mid); text-transform: uppercase; white-space: nowrap; }
.purse__v { font-size: var(--t-value); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.purse__v--big { font-size: var(--t-figure); color: var(--core); line-height: 1.15; }
.held { list-style: none; margin: 9px 0 0; padding: 0; overflow: hidden; flex: 1 1 0; min-height: 0; }
.held li { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: baseline; padding: 4px 0; }
.held li + li::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule); }
.held__ticker { font-size: var(--t-body); font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.held__pnl { font-size: var(--t-body); font-variant-numeric: tabular-nums; }

/* ---- the lower third ----------------------------------------------------- */
.third {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 18px;
  padding: 12px 24px;
  border: 1px solid var(--hud);
  background: linear-gradient(90deg, rgba(47, 139, 255, .16), rgba(47, 139, 255, .05));
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.third__coin { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.third__ticker {
  font: 400 var(--t-figure)/1 "Screen", monospace;
  letter-spacing: var(--trk);
  color: var(--core);
  text-shadow: 0 0 16px rgba(47, 139, 255, .6);
}
.third__line { font-size: var(--t-body); color: var(--ink-mid); min-width: 0; }
.third__mint { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.third__mint .mint { flex: 1 1 auto; }
.mint {
  font-family: "Read", monospace;
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--ink);
  background: rgba(1, 7, 20, .72);
  border: 1px solid var(--hud-dim);
  padding: 9px 18px;
  min-width: 0;
  overflow-wrap: anywhere;
  user-select: all;
}
.third__keys { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
/* the note takes the place of the line under the ticker, so the band never grows a third row */
.third__note { margin: 0; font-size: var(--t-body); color: var(--amber); }
.third__note:empty { display: none; }
.third__note:not(:empty) + .third__line { display: none; }

/* ---- keys ---------------------------------------------------------------- */
.key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid var(--hud);
  background: rgba(47, 139, 255, .1);
  color: var(--ink);
  font: 400 var(--t-label)/1 "Screen", monospace;
  letter-spacing: var(--trk);
  text-decoration: none;
  cursor: pointer;
  transition: background .12s ease, transform .08s ease, color .12s ease;
}
.key:hover { background: rgba(47, 139, 255, .26); color: var(--core); }
.key:active { transform: translateY(1px); }
.key:focus-visible { outline: 2px solid var(--core); outline-offset: 2px; }
.key img { display: block; opacity: .92; }
.key[aria-disabled="true"], .key:disabled {
  opacity: .85;
  border-color: var(--hud-dim);
  color: var(--ink-mid);
  background: rgba(47, 139, 255, .04);
  pointer-events: none;
}
.key--copy { min-width: 86px; }
/* pump.fun serves no mark this box can fetch, so that key is not a fourth equal square with a hole
   in it: it is the primary, by size and by fill, and the three that DO have marks wear them */
.key--buy {
  background: rgba(47, 139, 255, .3);
  border-color: var(--core);
  color: var(--core);
}
.key--buy:hover { background: rgba(47, 139, 255, .44); }
/* a key that wears a real mark needs no word: the mark is the label, and its accessible name is on
   the link itself */
.key--mark { width: 46px; padding: 0; }
.key--send { min-height: 46px; padding: 0 24px; white-space: nowrap; background: rgba(47, 139, 255, .22); }

/* ---- the board channel --------------------------------------------------- */
.board {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  flex: 1 1 auto;
  min-height: 0;
  align-content: start;
}
.board li {
  border: 1px solid var(--hud-dim);
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}
.board__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.board__slot { font: 400 var(--t-label)/1 "Screen", monospace; color: var(--hud); }
.board__ticker { font-size: var(--t-value); font-weight: 600; color: var(--core); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board__rows { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1px 10px; align-items: baseline; }
.board__rows dt { font: 400 var(--t-label)/1.55 "Screen", monospace; letter-spacing: var(--trk); color: var(--ink-mid); text-transform: uppercase; }
.board__rows dd { margin: 0; text-align: right; font-size: var(--t-body); font-variant-numeric: tabular-nums; color: var(--ink); }
.board__cmd { position: relative; margin-top: auto; padding-top: 9px; font: 400 var(--t-label)/1.5 "Screen", monospace; color: var(--ink-mid); }
.board__cmd::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule); }
.board__cmd b { color: var(--amber); font-weight: 400; }
.foot { margin: 0; font-size: var(--t-body); color: var(--ink-low); flex: 0 0 auto; }

/* ---- the chat channel ---------------------------------------------------- */
.room2 { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 52fr 48fr; gap: var(--gap); }
.room2 > .floor { border: 1px solid var(--hud-dim); padding: var(--pad); clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
.desk { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.desk__you {
  flex: 0 1 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1px 12px;
  align-items: baseline;
  border: 1px solid var(--hud-dim);
  padding: var(--pad);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}
.desk__you .v { text-align: right; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.desk__form { display: flex; flex-wrap: wrap; gap: 8px; }
.desk__input {
  flex: 1 1 0;
  min-width: 7em;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--hud);
  background: rgba(1, 7, 20, .72);
  color: var(--ink);
  font-family: "Read", monospace;
  font-size: var(--t-value);
}
.desk__input::placeholder { color: var(--ink-low); }
.desk__input:focus-visible { outline: 2px solid var(--core); outline-offset: 1px; }
.desk__note { margin: 0; min-height: 1.5em; line-height: 1.45; font-size: var(--t-body); color: var(--ink-mid); }
.desk__note.is-bad { color: var(--loss); }
.desk__note.is-good { color: var(--gain); }
.desk__cmds { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; overflow: hidden; min-height: 0; flex: 1 1 0; align-content: start; }
.desk__cmds li { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; padding: 3px 0; }
.desk__cmds span { min-width: 0; line-height: 1.35; overflow-wrap: anywhere; }
.desk__cmds li + li::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule); }
.desk__cmds b { font: 400 var(--t-label)/1.35 "Screen", monospace; letter-spacing: var(--trk); color: var(--amber); font-weight: 400; }
.desk__cmds span { font-size: var(--t-body); color: var(--ink-mid); }

/* ---- the record channel -------------------------------------------------- */
.record { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 62fr 38fr; gap: var(--gap); }
.windows, .leaders__list { list-style: none; margin: 0; padding: 0; overflow: hidden; min-height: 0; }
.windows li {
  position: relative;
  display: grid;
  grid-template-columns: 70px 96px 1fr auto;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
}
.windows li + li::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule); }
.win__n { font: 400 var(--t-label)/1.4 "Screen", monospace; color: var(--hud); }
.win__mode { font: 400 var(--t-label)/1.4 "Screen", monospace; letter-spacing: var(--trk); color: var(--ink-low); text-transform: uppercase; }
.win__cmd { font-size: var(--t-body); font-weight: 600; color: var(--ink); }
.win__cmd small { display: block; font-weight: 400; font-size: var(--t-label); color: var(--ink-mid); }
.win__tx { font: 400 var(--t-label)/1.4 "Screen", monospace; color: var(--amber); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.win__tx.is-none { color: var(--ink-mid); text-decoration: none; }
.leaders { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--hud-dim); padding: var(--pad); clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
.leaders__list li { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 5px 0; font-size: var(--t-body); }
.leaders__list li + li::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule); }
.leaders__who { font: 400 var(--t-label)/1.5 "Screen", monospace; color: var(--ink-mid); overflow-wrap: anywhere; }
.leaders__n { color: var(--core); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- the helix channel --------------------------------------------------- */
.helix { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 46fr 54fr; gap: var(--gap); }
.helix__figures { display: grid; grid-template-rows: repeat(4, auto); gap: 10px; align-content: start; }
.fig { border: 1px solid var(--hud-dim); padding: var(--pad); display: grid; gap: 3px; clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
.fig dt { min-width: 0; overflow-wrap: anywhere; font: 400 var(--t-label)/1 "Screen", monospace; letter-spacing: var(--trk); color: var(--ink-mid); text-transform: uppercase; }
.fig dd { margin: 0; font-size: var(--t-figure); font-weight: 600; color: var(--core); font-variant-numeric: tabular-nums; }
.fig small { font-size: var(--t-label); color: var(--ink-mid); font-weight: 400; }
.burns { list-style: none; margin: 0; padding: 0; overflow: hidden; min-height: 0; flex: 1 1 auto; }
.burns li { position: relative; display: grid; grid-template-columns: 112px auto 1fr; gap: 10px; align-items: baseline; padding: 6px 0; font-size: var(--t-body); }
.burns li + li::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule); }
.burns__day { font: 400 var(--t-label)/1.5 "Screen", monospace; color: var(--ink-mid); }
.burns__sol { color: var(--ink); font-variant-numeric: tabular-nums; }
.burns__tok { color: var(--amber); font-variant-numeric: tabular-nums; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- the rules channel --------------------------------------------------- */
.rules {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 26px;
  align-content: start;
}
.rules article { position: relative; padding-left: 16px; }
.rules article::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 1px; background: var(--hud-dim); }
.rules__risk::before { background: var(--amber); }
.rules h2 { margin: 0 0 5px; font: 400 var(--t-label)/1.35 "Screen", monospace; letter-spacing: var(--trk); color: var(--core); }
.rules p { margin: 0; font-size: var(--t-body); line-height: 1.62; color: var(--ink-mid); }
.rules b { color: var(--amber); font-weight: 400; }
.rules code { font-family: "Read", monospace; font-size: var(--t-body); color: var(--ink); overflow-wrap: anywhere; }
.rules__risk h2 { color: var(--amber); }

/* ---- the plastic band ---------------------------------------------------- */
.band {
  position: absolute;
  left: var(--band-left);
  top: var(--band-top);
  width: var(--band-width);
  height: var(--band-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 14px;
}
.maker {
  margin: 0;
  font: 400 clamp(20px, 2.6cqw, 34px)/1 "Screen", monospace;
  letter-spacing: 0.1em;
  color: #cfe4f5;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35), 0 -1px 1px rgba(2, 12, 30, .9);
  opacity: .92;
  white-space: nowrap;
}
.band__stickers { height: 46%; width: auto; max-width: 38%; object-fit: contain; object-position: right center; opacity: .82; }
.band__lamp {
  flex: 0 0 auto;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 12px var(--amber);
  animation: breathe 3.2s ease-in-out infinite;
}

/* ---- the set scales with the window, the glass keeps its type ------------- */
@media (max-width: 1460px) { :root { --set-gutter: 40px; } }
@media (max-width: 1100px) {
  :root { --set-gutter: 26px; --gap: 10px; --pad: 14px 22px; }
  .split { grid-template-columns: 1fr 1fr; }
  .cell--floor { grid-column: 1 / -1; }
  .room2, .record, .helix { grid-template-columns: 1fr; }
  .rules { grid-template-columns: 1fr; }
  .board { grid-template-columns: repeat(2, 1fr); }
  .screen { overflow-y: auto; }
  .desk__cmds, .floor, .windows, .leaders__list, .burns, .held, .miniboard { flex: 0 0 auto; overflow: visible; }
}

/* The phone is its own composition: the camera is up against the glass, so the plastic is out of
   frame and the broadcast fills the screen. */
@media (max-width: 760px) {
  :root { --set-gutter: 8px; --gap: 10px; --pad: 14px 22px; }
  .stage { padding: 8px; }
  .set { background: none; width: 100%; aspect-ratio: auto; mask-image: none; -webkit-mask-image: none; }
  .glass {
    position: relative;
    left: auto; top: auto;
    width: 100%;
    height: auto;
    min-height: 62vh;
    border-radius: 6px;
    border: 2px solid #16314f;
  }
  .screen { position: relative; inset: auto; padding: 14px 13px 20px; min-height: 0; overflow: visible; }
  .channel { overflow: visible; }
  .band { display: none; }
  .picture { inset: -2% -2% 40%; }
  .rail { flex-wrap: wrap; row-gap: 8px; }
  .rail__clock { order: 2; }
  /* three and three, so no word is ever stranded on a row of its own */
  .rail__channels { order: 3; width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); }
  .chan { padding: 10px 4px; }
  /* the two thresholds are marked on the bar itself; on a phone their words would touch */
  .scale__feet span:nth-child(2), .scale__feet span:nth-child(3) { display: none; }
  .chan { padding: 10px 11px; }
  .readout__canvas { height: 94px; }
  .floor, .windows, .leaders__list, .burns, .rules, .desk__cmds { overflow: visible; max-height: none; }
  .split { grid-template-columns: 1fr; }
  .split, .room2, .record, .helix, .rules { flex: 0 0 auto; align-content: start; }
  .cell, .leaders, .room2 > .floor { flex: 0 0 auto; }
  .third { grid-template-columns: minmax(0, 1fr); }
  .desk__form .key--send { width: 100%; }
  /* on a phone the page scrolls, so the command list takes its own height instead of a share */
  .desk__cmds { flex: 0 0 auto; }
  .room2 > *, .split > *, .record > *, .helix > * { min-width: 0; }
  .third__keys { justify-content: flex-start; }
  .board { grid-template-columns: 1fr; }
  .windows li { grid-template-columns: 56px 1fr; row-gap: 2px; }
  .win__cmd, .win__tx { grid-column: 2; }
  .miniboard li { grid-template-columns: 22px 1fr auto; }
  .burns li { grid-template-columns: 1fr auto; row-gap: 1px; }
  .burns__day { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .spill, .band__lamp { animation: none; opacity: .86; }
  .scan::after { animation: none; display: none; }
  .chan .lamp { animation: none; }
  .chan__bar { transition: none; }
}