@import url("./x-on-the-show.css");
/* The community block under SEND IT, drawn as a console in the hero's own materials (design notes
   round one, note 2). Left: the poll and the billboard on a CRT over a deck that carries the
   OFFICE MORALE gauge, the claim plate and the HECKLE and CHEER rounds. Right: THE BREAK ROOM on
   the Break Room TV (its screen is the log), over the same deck. CORNER OFFICE wears the LIVE BUYS
   panel's frame (note 19). Every frame, plate and round is cut from the approved art
   (runtime/quit/community-art, sources.json); the glass behind each frame is drawn here so it is
   one even CRT glass at any size. One frame pixel (--qc-px) is the hero monitor's own scale
   (frames.css .q-hero --hero-s1), so the bezels are as thick as the stage's.
   This sheet loads after frames.css and overrides its .q-community layout rules. */

.q-community,
.q-hero__room,
.q-hero__aside {
  --qc-glass: #08100d;
  --qc-green: #25dc71;
  --qc-green-line: #1c6b3f;
  --qc-green-dim: #12502d;
  --qc-orange: #ff610b;
  --qc-cream: #f4e7cb;
  --qc-muted: #a9c2ae;
  --qc-ink: #120802;
  --qc-focus: #ffe36b;
  --qc-deck-h: calc(250 * var(--qc-px));
  --qc-screen:
    radial-gradient(130% 100% at 50% 40%, transparent 58%, rgb(0 0 0 / .55) 100%),
    repeating-linear-gradient(to bottom, rgb(255 255 255 / .028) 0 1px, transparent 1px 3px),
    radial-gradient(90% 70% at 50% 0%, rgb(37 220 113 / .07), transparent 70%),
    var(--qc-glass);
}

/* ---------------------------------------------------------------- the block */
.q-community {
  --qc-px: min(calc(70vh / 1060), calc((100vh - var(--t-header-desktop, 72px)) / 1376), calc((100vw - 300px) / 1890));
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: stretch;
  gap: calc(30 * var(--qc-px));
  max-width: none;
  margin: 0;
  min-height: clamp(470px, 60vh, 648px);
  height: auto;
  padding: calc(22 * var(--qc-px)) calc(30 * var(--qc-px)) calc(28 * var(--qc-px));
  background: #030805;
  color: var(--qc-cream);
}
.q-community[hidden] { display: none; }
/* While THE BREAK ROOM sits in the hero column (community.js placeBreakRoom, before the first buy) WHAT HAPPENS NEXT
   has the block to itself. */
.q-community[data-room-up] { grid-template-columns: minmax(0, 1fr); }
.q-community[data-room-up] > .q-community__room { display: none; }
/* Until the page is ready the block keeps its place (main.js mounts it before it sets
   data-quit-ready), so the lobby below never jumps when it appears; a block that never
   mounts gives the space back. Desktop only: the phone's height follows its content. */
:root:not([data-quit-ready]) .q-community[hidden] { display: block; visibility: hidden; }
:is(.q-community, .q-hero__room) *,
:is(.q-community, .q-hero__room) *::before,
:is(.q-community, .q-hero__room) *::after { box-sizing: border-box; }
.q-community__panel,
.q-community__room { display: flex; min-width: 0; min-height: 0; }
.q-community__room { contain: size; }
.q-community__panel > .c-community,
.q-community__room > .c-breakroom { flex: 1 1 auto; min-width: 0; }

/* ------------------------------------------------- shared parts: glass, tags, plates */
.q-community .c-tag,
.q-hero__room .c-tag,
.q-hero__aside .c-tag {
  position: static;
  display: inline-flex;
  align-items: center;
  padding: 4px 6px 3px;
  border: 2px solid #020504;
  border-radius: 2px;
  background: var(--qc-green);
  box-shadow: 2px 2px 0 #020504;
  color: #04140a;
  font: 700 12px/1 var(--t-font-display);
  letter-spacing: .02em;
  white-space: nowrap;
  transform: none;
}

/* The orange plate: the BUY $QUIT plate's ends and face, label on the face above its lip.
   (:where keeps these at the arcade skin's weight, so each plate's own size below applies.) */
:is(.q-community, .q-hero__room) .c-btn:where(.c-claim__cta, .c-breakroom__tools *, .c-breakroom__form *) {
  --qc-plate-h: 48px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(var(--qc-plate-h) * 2.2);
  min-height: var(--qc-plate-h);
  height: auto;
  margin: 0;
  padding: 2px 4px calc(var(--qc-plate-h) * .2);
  border-style: solid;
  border-color: transparent;
  border-width: 0 calc(var(--qc-plate-h) * 74 / 206) 0 calc(var(--qc-plate-h) * 64 / 206);
  border-image: url("community-art/plate.webp") 0 74 0 64 fill / 0 calc(var(--qc-plate-h) * 74 / 206) 0 calc(var(--qc-plate-h) * 64 / 206) stretch;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--qc-ink);
  font: 700 16px/1.1 var(--t-font-display);
  letter-spacing: -.01em;
  text-align: center;
  text-shadow: none;
  -webkit-text-stroke: 0;
  white-space: normal;
  filter: none;
  opacity: 1;
  cursor: pointer;
  transition: transform .12s ease-out, filter .12s ease-out;
}
:is(.q-community, .q-hero__room) .c-btn:where(.c-claim__cta, .c-breakroom__tools *, .c-breakroom__form *):hover:not([aria-disabled="true"]):not([aria-busy="true"]) {
  transform: translateY(-2px);
  filter: brightness(1.1);
  box-shadow: none;
}
:is(.q-community, .q-hero__room) .c-btn:where(.c-claim__cta, .c-breakroom__tools *, .c-breakroom__form *):active:not([aria-disabled="true"]):not([aria-busy="true"]) {
  transform: translateY(2px);
  filter: brightness(.94);
  box-shadow: none;
}
/* Locked until launch: the plate keeps its colour and says so (design notes, notes 2 and 3). */
:is(.q-community, .q-hero__room) .c-btn:where(.c-claim__cta, .c-breakroom__tools *, .c-breakroom__form *)[aria-disabled="true"] {
  cursor: not-allowed;
  filter: none;
  opacity: 1;
  box-shadow: none;
}
.q-community .c-community[data-mode="demo"] .c-claim__cta[aria-disabled="true"]::after,
:is(.q-community, .q-hero__room) .c-breakroom[data-mode="demo"] .c-breakroom__tools .c-btn[aria-disabled="true"]::after {
  content: "AT LAUNCH";
  position: absolute;
  top: -17px;
  right: 12px;
  z-index: 1;
  padding: 3px 5px 2px;
  border: 2px solid #020504;
  border-radius: 2px;
  background: var(--qc-green);
  box-shadow: 2px 2px 0 #020504;
  color: #04140a;
  font: 700 12px/1 var(--t-font-display);
  letter-spacing: .02em;
  white-space: nowrap;
  animation: none;
}
:is(.q-community, .q-hero__room) .c-btn:focus-visible {
  outline: 3px solid var(--qc-focus);
  outline-offset: 3px;
}
/* The shared skin (CommunityStyle.js, injected after this sheet) sets small screens' buttons to
   2.75em; a plate keeps its own height. */
.q-community .q-community__panel .c-btn:where(.c-claim__cta),
:is(.q-community .q-community__room, .q-hero__room) .c-btn:where(.c-breakroom__tools *, .c-breakroom__form *) { min-height: var(--qc-plate-h); }
.q-community .c-billboard__head .c-tag { font-size: 12px; }

/* ------------------------------------------------------------- the left console */
.q-community .c-community[data-layout="console"] {
  position: relative;
  display: grid;
  grid-template-rows: minmax(min-content, 1fr) auto;
  gap: 0;
  min-height: 0;
  color: var(--qc-cream);
  font: 400 20px/1.15 var(--t-font-body);
}
.q-community .c-community[data-state="unknown"] { opacity: 1; }

/* The CRT: the hero monitor's bezel; the glass is drawn behind its window. */
.q-community .c-community__screen {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  min-height: 0;
  /* Never hide anything under the deck: a screen that runs out of room scrolls. */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--qc-green-line) transparent;
  padding: 8px 16px 10px;
  border-style: solid;
  border-color: transparent;
  border-width: calc(54 * var(--qc-px)) calc(52 * var(--qc-px));
  border-image: url("community-art/crt.webp") 134 / calc(134 * var(--qc-px)) stretch;
  border-radius: calc(10 * var(--qc-px));
  background: var(--qc-screen);
}
/* The WARM-UP state: one green tag on the bezel (placed from the console, so the screen's
   scrolling never clips it). */
.q-community .c-community__screen > .c-community__demo {
  position: absolute;
  top: calc(54 * var(--qc-px) / 2 - 11px);
  left: calc(52 * var(--qc-px) + 14px);
  z-index: 2;
}

/* The poll: WHAT HAPPENS NEXT as three ballot rows, each with its share drawn inside. */
.q-community .c-poll {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "head result" "chips chips";
  align-items: baseline;
  column-gap: 14px;
  row-gap: clamp(8px, calc(16 * var(--qc-px)), 14px);
}
.q-community .c-poll__head { grid-area: head; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.q-community .c-poll__title,
:is(.q-community, .q-hero__room) .c-breakroom__title {
  margin: 0;
  color: var(--qc-orange);
  font: 700 26px/1 var(--t-font-display);
  letter-spacing: -.03em;
  text-shadow: 2px 2px 0 #020504;
}
.q-community .c-poll__time { color: var(--qc-green); font: 400 20px/1 var(--t-font-body); white-space: nowrap; }
.q-community .c-poll__chips { grid-area: chips; display: grid; gap: clamp(6px, calc(12 * var(--qc-px)), 10px); }
.q-community .c-poll__chips .c-btn {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: clamp(42px, calc(74 * var(--qc-px)), 54px);
  margin: 0;
  padding: 4px 14px 3px;
  overflow: hidden;
  isolation: isolate;
  border: 2px solid var(--qc-green-line);
  border-radius: 3px;
  background: #050c09;
  box-shadow: inset 0 0 0 1px #020504, 0 2px 0 #020504;
  color: var(--qc-cream);
  font: 400 20px/1.05 var(--t-font-body);
  letter-spacing: .02em;
  text-align: left;
  text-shadow: none;
  filter: none;
  opacity: 1;
  transform: none;
  transition: border-color .12s ease-out, background-color .12s ease-out;
}
.q-community .c-poll__chips .c-btn__label { min-width: 0; overflow-wrap: anywhere; }
.q-community .c-poll__votes { display: none; }
.q-community .c-poll__pct {
  display: block;
  color: var(--qc-green);
  font: 400 22px/1 var(--t-font-body);
  font-variant-numeric: tabular-nums;
  text-shadow: 1px 1px 0 #020504;
}
.q-community .c-poll__bar {
  display: block;
  position: absolute;
  z-index: -1;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 6px) * var(--c-share, 0));
  background: linear-gradient(var(--qc-green-dim), #0e4326);
  box-shadow: inset 0 1px 0 #2a9d5c, inset -2px 0 0 #2a9d5c;
  transition: width .5s ease-out;
}
.q-community .c-poll__chips .c-btn:hover:not([aria-disabled="true"]):not([aria-busy="true"]) {
  border-color: var(--qc-green);
  background: #071510;
  box-shadow: inset 0 0 0 1px #020504, 0 2px 0 #020504;
  transform: none;
}
.q-community .c-poll__chips .c-btn:active:not([aria-disabled="true"]):not([aria-busy="true"]) { background: #0a1d14; transform: translateY(1px); }
.q-community .c-poll__chips .c-btn[aria-pressed="true"],
.q-community .c-poll__chips .c-btn[aria-pressed="true"]:hover:not([aria-disabled="true"]):not([aria-busy="true"]) { border-color: var(--qc-orange); --c-fill: transparent; }
.q-community .c-poll__chips .c-btn[aria-pressed="true"] .c-poll__pct { color: var(--qc-orange); }
.q-community .c-poll__chips .c-btn[aria-disabled="true"] { cursor: default; filter: none; opacity: 1; }
.q-community .c-poll__chips .c-btn[aria-disabled="true"]:not([aria-pressed="true"]):not([data-winner]) { border-color: #173f29; }
.q-community .c-poll__chips .c-btn[data-winner] { border-color: var(--qc-orange); --c-fill: transparent; --c-text: var(--qc-cream); }
.q-community .c-poll__chips .c-btn[data-winner] .c-poll__bar { background: linear-gradient(#7a3510, #5c2508); box-shadow: inset 0 1px 0 #ff8a3d; }
.q-community .c-poll__result { grid-area: result; max-width: 24ch; min-height: 0; color: var(--qc-green); font: 400 18px/1.05 var(--t-font-body); text-align: right; }
.q-community .c-poll__result:empty { display: none; }

/* The billboard: one marquee strip, then its rules line. */
.q-community .c-billboard {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px 12px;
}
.q-community .c-billboard__head { display: flex; align-items: center; gap: 8px; }
.q-community .c-billboard__title { color: var(--qc-orange); font: 700 18px/1 var(--t-font-display); letter-spacing: -.02em; text-shadow: 2px 2px 0 #020504; white-space: nowrap; }
/* The console's own WARM-UP tag already labels the billboard while the demo runs. */
.q-community .c-community[data-mode="demo"] .c-billboard__head .c-tag { display: none; }
.q-community .c-billboard__strip {
  container-type: inline-size;
  position: relative;
  min-width: 0;
  height: clamp(40px, calc(70 * var(--qc-px)), 50px);
  overflow: hidden;
  border: 2px solid var(--qc-green-line);
  border-radius: 3px;
  background: #030a06;
  box-shadow: inset 0 2px 6px #000, 0 2px 0 #020504;
}
.q-community .c-billboard__track {
  display: flex;
  width: max-content;
  height: 100%;
  animation: qc-marquee 26s linear infinite;
}
.q-community .c-billboard__strip:hover .c-billboard__track,
.q-community .c-billboard__strip:focus-within .c-billboard__track { animation-play-state: paused; }
.q-community .c-billboard__list {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 0;
  min-width: 100cqw;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.q-community .c-billboard__echo { display: flex; }
.q-community .c-billboard__entry {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 22px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--qc-cream);
  font: 400 21px/1 var(--t-font-body);
  letter-spacing: .03em;
  white-space: nowrap;
}
.q-community .c-billboard__entry::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  background: var(--qc-green);
  box-shadow: 0 0 6px rgb(37 220 113 / .7);
}
.q-community .c-billboard__who { color: var(--qc-cream); font-weight: 400; }
.q-community .c-billboard__slogan { color: var(--qc-orange); font-weight: 400; }
.q-community .c-billboard__entry[data-free] { color: var(--qc-muted); border: 0; }
.q-community .c-billboard__report {
  min-height: 26px;
  padding: 2px 8px;
  border: 2px solid var(--qc-green-line);
  border-radius: 2px;
  background: #050c09;
  box-shadow: none;
  color: var(--qc-green);
  font: 400 16px/1 var(--t-font-body);
}
.q-community .c-billboard :is(.c-claim__note, .c-billboard__rules) {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  color: var(--qc-muted);
  font: 400 16px/1.2 var(--t-font-body);
}
.q-community .c-billboard .c-claim__note:empty { display: none; }
.q-community .c-billboard .c-claim__note:not(:empty) { grid-column: 1; color: var(--qc-green); }
.q-community .c-billboard .c-claim__note:not(:empty) ~ .c-billboard__rules { grid-column: 2; }
@keyframes qc-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* The deck: the hero deck's steel and screws. */
.q-community .c-community__deck {
  border-style: solid;
  border-color: transparent;
  border-image: url("community-art/deck.webp") 66 76 72 76 fill / calc(66 * var(--qc-px)) calc(76 * var(--qc-px)) calc(72 * var(--qc-px)) round;
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  height: var(--qc-deck-h);
  margin-top: calc(-4 * var(--qc-px));
  padding: 0 4px;
  border-width: calc(40 * var(--qc-px)) calc(60 * var(--qc-px)) calc(44 * var(--qc-px));
}

/* OFFICE MORALE: a lit gauge in the deck's status window, the CHEER and HECKLE result under it. */
.q-community .c-community__gauge {
  flex: 1 1 0;
  max-width: calc(520 * var(--qc-px));
  display: grid;
  align-content: center;
  gap: 6px;
  min-width: 0;
  min-height: calc(176 * var(--qc-px));
  padding: 0 10px;
  border-style: solid;
  border-color: transparent;
  border-width: calc(32 * var(--qc-px)) calc(34 * var(--qc-px));
  border-image: url("community-art/glass.webp") 64 / calc(64 * var(--qc-px)) stretch;
  border-radius: calc(24 * var(--qc-px));
  background: var(--qc-screen);
}
.q-community .c-crowd {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "title" "bar";
  align-items: center;
  gap: 5px;
  color: var(--qc-green);
  font: 400 20px/1 var(--t-font-body);
}
.q-community .c-crowd__title { grid-area: title; white-space: nowrap; letter-spacing: .03em; }
/* AFTERBURNER: while the crowd boils over the word takes the title's place and the lamps turn orange. */
.q-community .c-crowd__surge { grid-area: title; color: var(--qc-orange); font: 400 20px/1 var(--t-font-body); letter-spacing: .08em; }
.q-community .c-crowd__surge:empty { display: none; }
.q-community .c-crowd[data-surge="true"] .c-crowd__title { display: none; }
.q-community .c-crowd__bar {
  grid-area: bar;
  position: relative;
  height: 18px;
  overflow: hidden;
  border: 2px solid #020504;
  border-radius: 2px;
  background: #06180d;
  box-shadow: inset 0 0 0 1px #0f3a22;
}
.q-community .c-crowd__fill {
  display: block;
  height: 100%;
  width: calc(var(--c-level, 0) * 100%);
  background: linear-gradient(#5cf59d, #1fb35d 60%, #168a47);
  box-shadow: 0 0 8px rgb(37 220 113 / .6);
  transition: width .4s ease-out;
}
.q-community .c-crowd[data-surge="true"] .c-crowd__fill { background: linear-gradient(#ffb070, var(--qc-orange) 60%, #c44608); }
/* Twelve lamps: the gaps are drawn over the lit fill. */
.q-community .c-crowd__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 12 - 3px), #020504 calc(100% / 12 - 3px) calc(100% / 12));
  pointer-events: none;
}
.q-community .c-community__status { min-height: 1em; color: var(--qc-green); font: 400 18px/1 var(--t-font-body); letter-spacing: .02em; }

.q-community .c-claim__cta { --qc-plate-h: 74px; flex: none; }
.q-community .c-claim__cta .c-btn__label { max-width: 10.6em; }
.q-community .c-community__rounds { flex: none; display: flex; align-items: center; gap: 10px; }

/* HECKLE and CHEER: the stage's red and green rounds, the word set on the dome. */
.q-community .c-community__rounds .c-btn[data-engage] {
  --qc-round: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--qc-round);
  height: calc(var(--qc-round) * 242 / 246);
  min-height: 0;
  margin: 0;
  padding: 0 0 calc(var(--qc-round) * .22);
  border: 0;
  border-radius: 50%;
  background: url("community-art/cheer.webp") center / 100% 100% no-repeat;
  box-shadow: none;
  color: #03140a;
  font: 400 17px/1 QuitPixel, var(--t-font-display);
  letter-spacing: 0;
  text-shadow: 0 1px 0 rgb(255 255 255 / .3);
  -webkit-text-stroke: 0;
  filter: none;
  transition: transform .12s ease-out, filter .12s ease-out;
}
.q-community .c-community__rounds .c-btn[data-engage="heckle"] { background-image: url("community-art/heckle.webp"); color: #200403; }
.q-community .c-community__rounds .c-btn[data-engage]:hover { transform: translateY(-2px); filter: brightness(1.12); box-shadow: none; }
.q-community .c-community__rounds .c-btn[data-engage]:active { transform: translateY(3px); filter: brightness(.94); box-shadow: none; }
.q-community .c-community__rounds .c-btn[data-engage]:focus-visible { outline: 3px solid var(--qc-focus); outline-offset: 0; }
/* The deck by the console's own width (owner audit, 22 Oct 2026: at a 1024 px tablet CHEER ran 74 px past the window,
   and from 1024 to 1440 px OFFICE MORALE was squeezed to its first letters). Side by side the gauge's words, the claim
   plate and both rounds need about 800 px of console, with room for a body face as wide as IBM Plex Mono: narrower,
   the rounds and the plate's words come down a size, and under 740 px the deck is set as the phone deck is, the gauge
   beside the rounds and the claim plate across the deck under them, as tall as they need. The gauge never narrows below
   its own words; where even the rounds cannot sit beside it they keep to the right under it. The phone, the narrow
   tablets and a phone held sideways keep their own decks below. */
@media (min-width: 768px) and (min-aspect-ratio: 3/4) and (min-height: 501px), (min-width: 1200px) and (min-height: 501px) {
  .q-community .q-community__panel { container: qc-console / inline-size; }
}
@container qc-console (max-width: 799px) {
  .q-community .c-community__gauge { min-width: min-content; }
  .q-community .c-crowd { grid-template-columns: minmax(max-content, 1fr); }
  .q-community .c-community__rounds { gap: 8px; }
  .q-community .c-community__rounds .c-btn[data-engage] { --qc-round: 88px; font-size: 15px; }
  .q-community .c-claim__cta { font-size: 15px; }
}
@container qc-console (max-width: 739px) {
  .q-community .c-community__deck { flex-wrap: wrap; row-gap: 10px; height: auto; min-height: var(--qc-deck-h); }
  .q-community .c-community__gauge { order: 1; max-width: none; }
  .q-community .c-community__rounds { order: 2; margin-left: auto; }
  .q-community .c-community__rounds .c-btn[data-engage] { --qc-round: 80px; font-size: 14px; }
  .q-community .c-claim__cta { --qc-plate-h: 60px; order: 3; flex: 1 1 100%; min-width: 0; }
  .q-community .c-claim__cta .c-btn__label { max-width: none; }
}

/* -------------------------------------------- CORNER OFFICE in the LIVE BUYS panel's frame */
/* THE BREAK ROOM in the hero column before the first buy (community.js placeBreakRoom) is drawn at the column's scale. */
.q-hero__aside, .q-hero__room { --qc-px: var(--hero-s2, .375px); }
.q-hero__aside .c-king,
.q-community .c-king {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "title title title" "crown name meta" "crown sol meta";
  align-items: center;
  gap: 3px 10px;
  width: 100%;
  margin: 0;
  padding: 6px 12px 8px;
  border-style: solid;
  border-color: transparent;
  border-width: calc(32 * var(--qc-px)) calc(28 * var(--qc-px));
  border-image: url("community-art/panel.webp") 60 / calc(60 * var(--qc-px)) stretch;
  border-radius: calc(16 * var(--qc-px));
  background: var(--qc-screen);
  box-shadow: none;
  color: var(--qc-cream);
  font: 400 20px/1.1 var(--t-font-body);
  text-align: left;
}
.q-hero__aside .c-king__title,
.q-community .c-king__title {
  grid-area: title;
  margin: 0 0 4px;
  padding-bottom: 6px;
  border-bottom: 2px solid #26332b;
  color: var(--qc-orange);
  font: 700 21px/1 var(--t-font-display);
  letter-spacing: -.03em;
  text-shadow: 2px 2px 0 #020504;
}
.q-hero__aside .c-king__crown,
.q-community .c-king__crown { grid-area: crown; grid-row: 2 / span 2; width: 38px; height: 38px; object-fit: contain; image-rendering: pixelated; }
.q-hero__aside .c-king__name,
.q-community .c-king__name { grid-area: name; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--qc-cream); font: 400 21px/1 var(--t-font-body); letter-spacing: .02em; overflow-wrap: normal; word-break: normal; }
.q-hero__aside .c-king__sol,
.q-community .c-king__sol { grid-area: sol; color: var(--qc-green); font: 400 21px/1 var(--t-font-body); text-align: left; }
.q-hero__aside .c-king__meta,
.q-community .c-king__meta { grid-area: meta; grid-row: 2 / span 2; display: grid; justify-items: end; gap: 5px; color: var(--qc-cream); font: 400 17px/1 var(--t-font-body); white-space: nowrap; }
.q-hero__aside .c-king[data-state="empty"] .c-king__name,
.q-hero__aside .c-king[data-state="unknown"] .c-king__name,
.q-community .c-king[data-state="empty"] .c-king__name,
.q-community .c-king[data-state="unknown"] .c-king__name { grid-column: 2 / 4; font-size: 18px; color: var(--qc-muted); }
/* The card's WARM-UP tag in the body face, like the LIVE BUYS rows' labels, so the name keeps its line. */
.q-hero__aside .c-king__meta .c-tag,
.q-community .c-king__meta .c-tag { padding: 3px 6px 2px; font: 400 18px/1 var(--t-font-body); letter-spacing: .04em; }
.q-hero__aside .c-king__stamp,
.q-community .c-king__stamp { position: absolute; right: 10px; bottom: 6px; background: transparent; color: var(--qc-orange); border: 3px double var(--qc-orange); box-shadow: none; transform: rotate(-5deg); }
.q-community .c-community__screen > .c-king { flex: none; width: auto; margin: 0 -4px; }
/* On the desktop the card heads the screen as one LIVE BUYS row when the page gives it no
   place of its own (the hero's aside normally holds it). */
@media (min-width: 768px) and (min-aspect-ratio: 3/4), (min-width: 1200px) {
  .q-community .c-community__screen > .c-king {
    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
    grid-template-areas: "crown title name sol meta";
    gap: 0 12px;
    padding: 2px 10px;
  }
  .q-community .c-community__screen > .c-king .c-king__title { margin: 0; padding: 0; border: 0; font-size: 18px; }
  .q-community .c-community__screen > .c-king .c-king__crown { grid-row: auto; width: 30px; height: 30px; }
  .q-community .c-community__screen > .c-king .c-king__meta { grid-row: auto; display: flex; align-items: center; gap: 10px; }
  .q-community .c-community__screen:has(> .c-king) { gap: 6px; }
  .q-community .c-community__screen:has(> .c-king) .c-poll { row-gap: 8px; }
  .q-community .c-community__screen:has(> .c-king) .c-poll__chips { gap: 5px; }
  .q-community .c-community__screen:has(> .c-king) .c-poll__chips .c-btn { min-height: 38px; }
}

/* ---------------------------------------------------------- THE BREAK ROOM: the TV */
:is(.q-community, .q-hero__room) .c-breakroom {
  --qc-tv-side: calc(72 * var(--qc-px) + 12px);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: var(--qc-tv-side) minmax(0, 1fr) var(--qc-tv-side);
  grid-template-rows:
    [tv-top] calc(55 * var(--qc-px) + 10px)
    [title] auto
    [log] minmax(0, 1fr)
    [empty] auto
    [status] auto
    [form] auto
    [slot] calc(120 * var(--qc-px))
    [deck] minmax(var(--qc-deck-h), auto);
  gap: 0;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--qc-cream);
  font: 400 20px/1.2 var(--t-font-body);
}
/* The set: the Break Room TV's case, screen ring and control slot; its glass drawn behind. */
:is(.q-community, .q-hero__room) .c-breakroom::before {
  content: "";
  grid-column: 1 / -1;
  grid-row: tv-top / deck;
  z-index: -1;
  border-style: solid;
  border-color: transparent;
  border-width: calc(130 * var(--qc-px)) calc(150 * var(--qc-px)) calc(184 * var(--qc-px));
  border-image: url("community-art/tv.webp") 130 150 184 / calc(130 * var(--qc-px)) calc(150 * var(--qc-px)) calc(184 * var(--qc-px)) stretch;
  border-radius: calc(26 * var(--qc-px));
  background: var(--qc-screen);
}
:is(.q-community, .q-hero__room) .c-breakroom > * { grid-column: 2; min-width: 0; }
:is(.q-community, .q-hero__room) .c-breakroom__title { grid-row: title; position: relative; z-index: 1; padding: 4px 6px 8px; }
/* Older lines fade out under the title as the log scrolls (drawn over the log, so its focus ring stays whole). */
:is(.q-community, .q-hero__room) .c-breakroom__title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 30px;
  background: linear-gradient(var(--qc-glass) 20%, rgb(8 16 13 / 0));
  pointer-events: none;
}
:is(.q-community, .q-hero__room) .c-breakroom__log {
  grid-row: log;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 0 8px 0 6px;
  overflow: auto;
  overscroll-behavior: contain;
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: var(--qc-green-line) transparent;
}
:is(.q-community, .q-hero__room) .c-breakroom__log:focus-visible { outline: 3px solid var(--qc-focus); outline-offset: 2px; }
:is(.q-community, .q-hero__room) .c-breakroom__message {
  position: relative;
  flex-shrink: 0;
  padding: 9px 4px 9px 0;
  border: 0;
  border-bottom: 1px solid rgb(37 220 113 / .3);
  overflow-wrap: anywhere;
}
:is(.q-community, .q-hero__room) .c-breakroom__message:has(.c-breakroom__portrait) { min-height: 64px; padding-left: 58px; }
:is(.q-community, .q-hero__room) .c-breakroom__who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 16px; }
:is(.q-community, .q-hero__room) .c-breakroom__who strong { color: var(--qc-orange); font: 700 15px/1.1 var(--t-font-display); letter-spacing: -.02em; }
/* A speaker's name never splits a word (the shared skin breaks a message anywhere): where its longest word does not fit
   the line it shrinks until it does (community.js sets --name-word; Silkscreen Bold at this tracking is under .8 em a
   letter), which happens only where the set is narrow (the hero column before the first buy, small phones). */
:is(.q-community, .q-hero__room) .c-breakroom__who { container-type: inline-size; }
:is(.q-community, .q-hero__room) .c-breakroom__who strong { font-size: min(15px, calc(100cqw / (var(--name-word, 17) * .8))); overflow-wrap: normal; }
:is(.q-community, .q-hero__room) .c-breakroom__portrait {
  position: absolute;
  left: 0;
  top: 9px;
  width: 46px;
  height: 46px;
  border: 2px solid #2f3b33;
  border-radius: 2px;
  background: #0c1611;
  object-fit: cover;
  image-rendering: pixelated;
}
:is(.q-community, .q-hero__room) .c-breakroom__rank { color: var(--qc-cream); font: 700 12px/1.2 var(--t-font-display); }
:is(.q-community, .q-hero__room) .c-breakroom__x { color: var(--qc-muted); }
:is(.q-community, .q-hero__room) .c-breakroom__text { margin: 3px 0 0; color: var(--qc-green); font: 400 20px/1.15 var(--t-font-body); letter-spacing: .02em; white-space: pre-wrap; }
:is(.q-community, .q-hero__room) .c-breakroom__meme { border: 2px solid #2f3b33; }
:is(.q-community, .q-hero__room) .c-breakroom__report {
  min-height: 28px;
  margin-top: 6px;
  padding: 2px 8px;
  border: 2px solid var(--qc-green-line);
  border-radius: 2px;
  background: #050c09;
  box-shadow: none;
  color: var(--qc-green);
  font: 400 16px/1 var(--t-font-body);
}
:is(.q-community, .q-hero__room) .c-breakroom__empty { grid-row: empty; margin: 0; padding: 4px 6px; color: var(--qc-muted); font-size: 18px; }
:is(.q-community, .q-hero__room) .c-breakroom__controls { display: contents; }
:is(.q-community, .q-hero__room) .c-breakroom__status { grid-row: status; grid-column: 2; margin: 0; padding: 4px 6px 0; min-height: 0; color: var(--qc-green); font: 400 18px/1.15 var(--t-font-body); }
:is(.q-community, .q-hero__room) .c-breakroom__status:empty { display: none; }
:is(.q-community, .q-hero__room) .c-breakroom__status[data-tone="refused"] { color: #ff9b6a; }
:is(.q-community, .q-hero__room) .c-breakroom__form {
  grid-row: form;
  grid-column: 2;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px 10px;
  margin: 0;
  padding: 8px 4px 2px;
  border-top: 1px solid rgb(37 220 113 / .3);
}
/* The field's label stays for assistive technology; the field shows it as its prompt. */
:is(.q-community, .q-hero__room) .c-breakroom__form label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
:is(.q-community, .q-hero__room) .c-breakroom__form textarea {
  grid-column: 1;
  grid-row: 1;
  height: 46px;
  min-height: 46px;
  max-height: 46px;
  resize: none;
  padding: 10px 8px 6px;
  border: 2px solid var(--qc-green-line);
  border-radius: 3px;
  background: #030a06;
  color: var(--qc-cream);
  font: 400 20px/1.1 var(--t-font-body);
}
:is(.q-community, .q-hero__room) .c-breakroom__form .c-btn { --qc-plate-h: 46px; grid-column: 2; grid-row: 1; }
:is(.q-community, .q-hero__room) .c-breakroom__count { grid-column: 1 / -1; grid-row: 2; justify-self: start; color: var(--qc-muted); font: 400 15px/1 var(--t-font-body); }
/* The control slot: the WARM-UP tag rides the set. */
:is(.q-community, .q-hero__room) .c-breakroom__stamp {
  grid-row: slot;
  align-self: start;
  justify-self: start;
  margin: calc(32 * var(--qc-px) + (67 * var(--qc-px) - 24px) / 2) 0 0 6px;
  padding: 5px 7px 4px;
  border: 2px solid #020504;
  border-radius: 2px;
  background: var(--qc-green);
  box-shadow: 2px 2px 0 #020504;
  color: #04140a;
  font: 700 12px/1 var(--t-font-display);
  letter-spacing: .02em;
  white-space: nowrap;
}
:is(.q-community, .q-hero__room) .c-breakroom__stamp[hidden] { display: none; }
/* QA8 F2 (owner: no word cut): on a narrow set the floor's WARM-UP tag takes two lines in the screen's column, its
   words whole, rather than running off the screen (the slot row holds two lines). */
.q-community .c-breakroom__stamp { max-width: calc(100% - 6px); white-space: normal; }
/* In the hero column the set is narrow: the WARM-UP tag takes two lines in its slot rather than leaving the set. */
.q-hero__room .c-breakroom { grid-template-rows: [tv-top] calc(55 * var(--qc-px) + 10px) [title] auto [log] minmax(0, 1fr) [empty] auto [status] auto [form] auto [slot] minmax(calc(120 * var(--qc-px)), auto) [deck] minmax(var(--qc-deck-h), auto); }
.q-hero__room .c-breakroom__stamp { max-width: 100%; margin-top: calc(32 * var(--qc-px)); margin-bottom: 4px; font-size: 11px; line-height: 1.15; white-space: normal; }
/* Its short form under CORNER OFFICE while the WARM-UP's rows fill LIVE BUYS (community.js placeBreakRoom): the title
   on one line, the newest lines, the WARM-UP tag on the set, no deck (before the mint its sign-in is only locked AT
   LAUNCH; after launch the room keeps its deck below once LIVE BUYS is open). */
/* The short form wears the column's panel frame (LIVE BUYS, CORNER OFFICE) instead of the TV's heavy bezel, so the
   newest lines get the room. */
.q-hero__room[data-short] .c-breakroom { --qc-tv-side: calc(28 * var(--qc-px) + 10px); grid-template-rows: [tv-top] calc(32 * var(--qc-px) + 4px) [title] auto [log] minmax(0, 1fr) [empty] auto [status] auto [form] auto [slot] auto [deck] 0; }
.q-hero__room[data-short] .c-breakroom::before { border-width: calc(32 * var(--qc-px)) calc(28 * var(--qc-px)); border-image: url("community-art/panel.webp") 60 / calc(60 * var(--qc-px)) stretch; border-radius: calc(16 * var(--qc-px)); }
.q-hero__room[data-short] .c-breakroom__title { padding-bottom: 6px; font-size: 17px; }
.q-hero__room[data-short] .c-breakroom__stamp { margin: 4px 0 calc(32 * var(--qc-px) + 6px); }
.q-hero__room[data-short] .c-breakroom__deck,
.q-hero__room[data-short] .c-breakroom::after { display: none; }
/* The deck under the set: sign in, then the room's rules. */
:is(.q-community, .q-hero__room) .c-breakroom::after {
  content: "";
  grid-column: 1 / -1;
  grid-row: deck;
  z-index: -1;
  margin-top: calc(-4 * var(--qc-px));
  border-style: solid;
  border-color: transparent;
  border-width: calc(66 * var(--qc-px)) calc(76 * var(--qc-px)) calc(72 * var(--qc-px));
  border-image: url("community-art/deck.webp") 66 76 72 76 fill / calc(66 * var(--qc-px)) calc(76 * var(--qc-px)) calc(72 * var(--qc-px)) round;
}
:is(.q-community, .q-hero__room) .c-breakroom__deck {
  grid-row: deck;
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  min-height: var(--qc-deck-h);
  padding: calc(40 * var(--qc-px) + 2px) calc(60 * var(--qc-px) + 4px) calc(44 * var(--qc-px) + 2px);
  border: 0;
  border-image: none;
}
:is(.q-community, .q-hero__room) .c-breakroom__tools { order: 1; display: flex; flex-wrap: wrap; gap: 10px; flex: none; }
:is(.q-community, .q-hero__room) .c-breakroom__tools .c-btn { --qc-plate-h: 52px; }
:is(.q-community, .q-hero__room) .c-breakroom__tools .c-btn:not(:first-child) { --qc-plate-h: 42px; font-size: 13px; }
/* SIGN OUT, YOUR CHAT HANDLE and POST A MEME are ghost buttons. The arcade skin's ghost rule outranks the orange plate
   above and kept only its outline, so the plate's dark ink sat on the dark deck at about 1:1 (measured 18 Oct). They take
   the room's readable ghost style, the REPORT button's: green text and edge on the deck's dark (about 10.8:1). */
:is(.q-community, .q-hero__room) .c-breakroom__tools .c-btn[data-variant="ghost"] {
  min-width: 0;
  padding: 2px 12px;
  border: 2px solid var(--qc-green);
  border-image: none;
  border-radius: 2px;
  background: #050c09;
  color: var(--qc-green);
}
:is(.q-community, .q-hero__room) .c-breakroom__rules { order: 2; flex: 1 1 14em; margin: 0; color: var(--qc-muted); font: 400 16px/1.2 var(--t-font-body); }
:is(.q-community, .q-hero__room) .c-breakroom__identity {
  grid-row: slot;
  grid-column: 2;
  align-self: start;
  justify-self: end;
  max-width: 100%;
  margin: calc(32 * var(--qc-px)) 12px 0 0;
  height: calc(67 * var(--qc-px));
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--qc-green);
  font: 400 18px/1 var(--t-font-body);
  letter-spacing: .03em;
  white-space: nowrap;
  text-overflow: ellipsis;
}
:is(.q-community, .q-hero__room) .c-breakroom__identity:empty { display: none; }

/* -------------------------------------------------------------- motion */
/* Without motion the strip stands still and shows every entry, wrapping when it must. */
@media (prefers-reduced-motion: reduce) {
  .q-community .c-billboard__strip { height: auto; min-height: clamp(40px, calc(70 * var(--qc-px)), 50px); }
  .q-community .c-billboard__track { animation: none; width: auto; }
  .q-community .c-billboard__list { flex-wrap: wrap; min-width: 0; width: 100%; row-gap: 4px; padding: 5px 0; }
  .q-community .c-billboard__echo { display: none; }
}
:root[data-reduced-motion="true"] .q-community .c-billboard__strip { height: auto; min-height: clamp(40px, calc(70 * var(--qc-px)), 50px); }
:root[data-reduced-motion="true"] .q-community .c-billboard__track { animation: none; width: auto; }
:root[data-reduced-motion="true"] .q-community .c-billboard__list { flex-wrap: wrap; min-width: 0; width: 100%; row-gap: 4px; padding: 5px 0; }
:root[data-reduced-motion="true"] .q-community .c-billboard__echo { display: none; }

/* -------------------------------------------- phone and narrow tablets: the bezels stack */
@media (max-width: 767px), (max-width: 1199px) and (max-aspect-ratio: 3/4) {
  .q-community {
    --qc-px: .3px;
    --qc-deck-h: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    height: auto;
    padding: 16px 10px 18px;
  }
  :root:not([data-quit-ready]) .q-community[hidden] { display: none; }
  .q-community .c-community__screen { gap: 12px; padding: 6px 10px 10px; }
  .q-community .c-community__screen > .c-community__demo { top: -8px; left: 22px; }
  .q-community .c-poll__title,
  :is(.q-community, .q-hero__room) .c-breakroom__title { font-size: 23px; letter-spacing: -.06em; }
  .q-community .c-poll__head { flex-wrap: wrap; }
  .q-community .c-poll__chips .c-btn { min-height: 46px; font-size: 19px; }
  .q-community .c-billboard { grid-template-columns: minmax(0, 1fr); }
  .q-community .c-billboard :is(.c-claim__note, .c-billboard__rules),
  .q-community .c-billboard .c-claim__note:not(:empty) ~ .c-billboard__rules { grid-row: auto; grid-column: 1; }
  .q-community .c-community__deck { flex-wrap: wrap; gap: 10px; height: auto; padding: 6px 2px; }
  /* Phone deck: the gauge beside the rounds, the claim plate across the deck under them. */
  .q-community .c-community__gauge { order: 1; flex: 1 1 0; max-width: none; min-height: 0; padding: 4px 10px; }
  /* OFFICE MORALE in the IBM Plex Mono body face is about 6.2 times its size wide: under a 390 px window the gauge's
     words come down with the gauge (its text box is the window less 258 px here) instead of running into the glass. */
  .q-community :is(.c-crowd, .c-crowd__surge) { font-size: clamp(14px, calc((100vw - 258px) / 6.2), 20px); }
  .q-community .c-community__rounds { order: 2; gap: 4px; }
  .q-community .c-community__rounds .c-btn[data-engage] { --qc-round: 72px; font-size: 14px; }
  .q-community .c-claim__cta { --qc-plate-h: 56px; order: 3; flex: 1 1 100%; min-width: 0; font-size: 12px; }
  .q-community .c-claim__cta .c-btn__label { max-width: none; }
  :is(.q-community, .q-hero__room) .c-breakroom {
    grid-template-rows: [tv-top] calc(55 * var(--qc-px) + 10px) [title] auto [log] minmax(0, 1fr) [empty] auto [status] auto [form] auto [slot] calc(120 * var(--qc-px) + 8px) [deck] auto;
    height: min(760px, calc(100svh - var(--t-header-phone, 62px) - 32px));
  }
  :is(.q-community, .q-hero__room) .c-breakroom__stamp { margin-top: calc(32 * var(--qc-px) + 2px); }
  :is(.q-community, .q-hero__room) .c-breakroom__deck { min-height: 0; padding: calc(40 * var(--qc-px) + 8px) calc(60 * var(--qc-px) + 8px) calc(44 * var(--qc-px) + 8px); }
  :is(.q-community, .q-hero__room) .c-breakroom__tools { flex: 1 1 100%; gap: 8px; }
  :is(.q-community, .q-hero__room) .c-breakroom__tools .c-btn:first-child { flex: 1 1 100%; }
  :is(.q-community, .q-hero__room) .c-breakroom__tools .c-btn:not(:first-child) { --qc-plate-h: 40px; flex: 0 1 auto; font-size: 12px; }
  .q-community .c-king__title { font-size: 19px; }
  .q-community .c-billboard__track { animation-duration: 20s; }
}

/* ------------------------------- phone held sideways (short and wide): two bezels, compact */
@media (min-width: 768px) and (max-height: 500px) and (min-aspect-ratio: 4/3) {
  .q-community { --qc-deck-h: 104px; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); height: auto; gap: 12px; padding: 10px 12px 12px; }
  /* The TV takes the console's height rather than its whole log's. */
  .q-community__room { contain: size; }
  .q-community .c-poll__title,
  :is(.q-community, .q-hero__room) .c-breakroom__title { font-size: 20px; letter-spacing: -.05em; }
  .q-community .c-poll__chips .c-btn { min-height: 36px; font-size: 18px; }
  .q-community .c-billboard__title { font-size: 15px; }
  .q-community .c-billboard__strip { height: 36px; }
  .q-community .c-community__screen { padding: 6px 12px 8px; }
  .q-community .c-community__deck { gap: 8px; padding-top: 12px; }
  .q-community .c-community__gauge { min-width: 112px; padding: 0 6px; }
  .q-community .c-crowd { font-size: 17px; }
  .q-community .c-community__rounds { gap: 4px; }
  .q-community .c-community__rounds .c-btn[data-engage] { --qc-round: 62px; font-size: 12px; }
  .q-community .c-claim__cta { --qc-plate-h: 66px; flex: 0 1 auto; min-width: 0; font-size: 12px; }
  .q-community .c-claim__cta .c-btn__label { max-width: 9em; }
  :is(.q-community, .q-hero__room) .c-breakroom__deck { padding-top: 22px; }
  :is(.q-community, .q-hero__room) .c-breakroom__tools .c-btn { --qc-plate-h: 46px; font-size: 14px; }
  .q-community .c-community__screen > .c-community__demo { top: -6px; }
  :root:not([data-quit-ready]) .q-community[hidden] { display: none; }
}

/* The selected phone composition stacks the consoles even when held sideways.
   A size-contained TV contributed no row height and spilled into the lobby. */
html[data-device="phone"] .q-community__room { contain: none; }
html[data-device="phone"] :is(.q-community, .q-hero__room) .c-breakroom {
  height: clamp(540px, calc(100svh - var(--t-header-phone, 62px) - 32px), 760px);
}
/* A stationary billboard wraps all its entries, including in landscape. */
@media (prefers-reduced-motion: reduce) {
  .q-community .c-billboard__strip { height: auto; }
}
:root[data-reduced-motion="true"] .q-community .c-billboard__strip { height: auto; }

.q-community[data-community-state="unavailable"]{display:block;min-height:0;height:auto;padding:24px}.q-community[data-community-state="unavailable"] .q-community-soon{max-width:70ch;margin:0 auto}.q-community-soon__title{margin:0 0 12px}.q-community-soon__line{margin:0}

/* ------------------------------------------------- TOP $QUIT HOLDERS (holder-leaderboard.js) */
/* A copy of the approved board (holder-leaderboard-sunburst-v1.png). Left, the CRT bay in the hero monitor's bezel
   (community-art/crt.webp): title, filters, the podium of the top three and the table of ranks 04 to 25. Right, the
   steel sidebar: ADVERTISE YOUR X and HOLDER PERKS, each in the LIVE BUYS panel's frame (community-art/panel.webp),
   the sign button on the BUY $QUIT plate (community-art/plate.webp). Brass plates, podium icons and the portrait are
   cut from the design (leaderboard-art, sources.json). --u is one pixel of the approved board (1985 wide): sizes
   follow the board's width, so it keeps the design's proportions at any desktop width. Under 1240 px the sidebar
   goes under the bay, side by side; under 860 px everything stacks and a row folds onto three lines. Every "@handle"
   is set in the body face (VT323). */
.q-community > .q-community__holders {
  grid-column: 1 / -1;
  min-width: 0;
  container: qc-holders / inline-size;
}
/* The console row keeps the height it had before the board joined the block (.q-community's min-height used to
   stretch its only row). */
@media (min-width: 768px) and (min-aspect-ratio: 3/4), (min-width: 1200px) {
  .q-community:has(> .q-community__holders) { grid-template-rows: minmax(calc(clamp(470px, 60vh, 648px) - 50 * var(--qc-px)), auto) auto; }
}

.c-holders {
  --u: .7px;
  --u: calc(100cqw / 1985);
  --lb-rule: #0f4026;
  --lb-steel: #78837a;
  --lb-gold: #f2b233;
  --lb-dim: #cdc4ab;
  --lb-glow: rgb(37 220 113 / .22);
  /* Silkscreen draws on a grid of .14 em, so a size in whole multiples of 50/7 px keeps every font pixel square:
     each size is the nearest such step to the design's, never above the largest that fits its line. */
  --lb-silk-title: calc(48 * var(--u));
  --lb-silk-head: calc(36 * var(--u));
  --lb-silk-module: calc(36 * var(--u));
  --lb-silk-sign: calc(30 * var(--u));
  --lb-silk-buy: calc(28 * var(--u));
}
@supports (width: round(1px, 1px)) {
  .c-holders {
    --lb-silk-title: min(round(calc(48 * var(--u)), calc(50px / 7)), calc(48.5 * var(--u)));
    --lb-silk-head: min(round(calc(36 * var(--u)), calc(50px / 7)), calc(42 * var(--u)));
    --lb-silk-module: min(round(calc(36 * var(--u)), calc(50px / 7)), calc(39 * var(--u)));
    --lb-silk-sign: min(round(calc(30 * var(--u)), calc(50px / 7)), calc(34 * var(--u)));
    --lb-silk-buy: min(round(calc(28 * var(--u)), calc(50px / 7)), calc(30 * var(--u)));
  }
}
.c-holders {
  display: grid;
  grid-template-columns: minmax(0, 1360fr) minmax(0, 617fr);
  gap: calc(8 * var(--u));
  min-width: 0;
  color: var(--qc-cream);
  font: 400 calc(28 * var(--u))/1.15 var(--t-font-body);
}
.c-holders :where(h2, h3, p, ol, dl, dd, figure) { margin: 0; }
.c-holders :where(h2, h3) { overflow-wrap: normal; }
.c-holders :where(a) { color: inherit; text-decoration: none; }
.c-holders :is(a, button, input, select, [tabindex]):focus-visible { outline: 3px solid var(--qc-focus); outline-offset: 2px; }

/* ------------------------------------------------------------------ the CRT bay */
.c-holders__bay {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: calc(18 * var(--u)) calc(2 * var(--u)) calc(4 * var(--u)) calc(14 * var(--u));
  border-style: solid;
  border-color: transparent;
  border-width: calc(32 * var(--u));
  border-image: url("community-art/crt.webp") 134 / calc(96 * var(--u)) stretch;
  border-radius: calc(16 * var(--u));
  background: var(--qc-screen);
}
.c-holders__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title filters" "sub sub";
  align-items: start;
  column-gap: calc(24 * var(--u));
  row-gap: calc(16 * var(--u));
  padding: 0 calc(22 * var(--u)) 0 calc(10 * var(--u));
}
.c-holders__heading { display: contents; }
.c-holders__title {
  grid-area: title;
  align-self: center;
  color: var(--qc-orange);
  font: 700 calc(48 * var(--u))/1 var(--t-font-display);
  font-size: var(--lb-silk-title);
  letter-spacing: -.02em;
  text-shadow: calc(3 * var(--u)) calc(3 * var(--u)) 0 #020504, 0 0 calc(14 * var(--u)) rgb(255 97 11 / .35);
  white-space: nowrap;
}
.c-holders__subtitle {
  grid-area: sub;
  color: var(--qc-green);
  font: 400 calc(33 * var(--u))/1 var(--t-font-body);
  letter-spacing: .01em;
  text-shadow: 0 0 calc(8 * var(--u)) rgb(37 220 113 / .3);
}
.c-holders__subtitle > span { display: block; }
.c-holders__filters {
  grid-area: filters;
  display: grid;
  grid-template-columns: calc(160 * var(--u)) calc(148 * var(--u)) calc(148 * var(--u));
  gap: calc(21 * var(--u));
  margin-top: calc(20 * var(--u));
}
.c-holders__filter {
  display: grid;
  place-items: center;
  min-height: calc(63 * var(--u));
  margin: 0;
  padding: calc(4 * var(--u)) calc(10 * var(--u));
  border: calc(3 * var(--u)) solid #18583a;
  border-radius: calc(7 * var(--u));
  background: #04100a;
  box-shadow: inset 0 0 0 calc(2 * var(--u)) #020805;
  color: var(--qc-green);
  font: 400 calc(28 * var(--u))/.95 var(--t-font-body);
  letter-spacing: .02em;
  text-align: center;
  cursor: pointer;
  transition: border-color .12s ease-out, color .12s ease-out, box-shadow .12s ease-out;
}
.c-holders__filter:hover { border-color: var(--qc-green); }
.c-holders__filter[aria-pressed="true"] {
  border-color: var(--qc-orange);
  background: #0f0a05;
  box-shadow: inset 0 0 0 calc(2 * var(--u)) #020805, 0 0 calc(12 * var(--u)) rgb(255 97 11 / .4);
  color: var(--qc-orange);
}

/* The podium: the top three on recessed cards, first place lit orange. */
.c-holders__podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(20 * var(--u));
  margin-top: calc(18 * var(--u));
  padding: 0 calc(4 * var(--u));
  list-style: none;
}
.c-holders__card {
  display: grid;
  grid-template-columns: calc(132 * var(--u)) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "head head" "icon body";
  column-gap: calc(12 * var(--u));
  min-width: 0;
  min-height: calc(260 * var(--u));
  padding: calc(14 * var(--u)) calc(18 * var(--u)) calc(16 * var(--u)) calc(14 * var(--u));
  border: calc(3 * var(--u)) solid #2f7a4b;
  border-radius: calc(11 * var(--u));
  background: radial-gradient(90% 80% at 50% 30%, rgb(37 220 113 / .05), transparent 70%), #020906;
  box-shadow: inset 0 0 0 calc(2 * var(--u)) #020504, inset 0 0 calc(18 * var(--u)) rgb(0 0 0 / .7), 0 0 calc(10 * var(--u)) var(--lb-glow);
}
.c-holders__card[data-place="1"] {
  border-color: var(--qc-orange);
  background: radial-gradient(90% 80% at 50% 30%, rgb(255 97 11 / .07), transparent 70%), #030504;
  box-shadow: inset 0 0 0 calc(2 * var(--u)) #020504, inset 0 0 calc(16 * var(--u)) rgb(255 97 11 / .28), 0 0 calc(16 * var(--u)) rgb(255 97 11 / .45);
}
.c-holders__card[data-you] { outline: calc(3 * var(--u)) solid var(--qc-focus); outline-offset: calc(3 * var(--u)); }
.c-holders__card-head {
  grid-area: head;
  display: flex;
  align-items: baseline;
  gap: .9em;
  padding-left: calc(10 * var(--u));
  color: var(--qc-orange);
  font: 700 calc(36 * var(--u))/1 var(--t-font-display);
  font-size: var(--lb-silk-head);
  letter-spacing: -.02em;
  text-shadow: calc(2 * var(--u)) calc(2 * var(--u)) 0 #020504;
  white-space: nowrap;
}
.c-holders__card[data-place="1"] .c-holders__place { color: var(--lb-gold); }
.c-holders__card-icon {
  grid-area: icon;
  align-self: center;
  justify-self: center;
  width: auto;
  height: auto;
  max-width: calc(120 * var(--u));
  max-height: calc(150 * var(--u));
  object-fit: contain;
  filter: drop-shadow(0 calc(4 * var(--u)) calc(4 * var(--u)) rgb(0 0 0 / .7));
}
.c-holders__card[data-place="1"] .c-holders__card-icon { max-width: calc(116 * var(--u)); }
.c-holders__card[data-place="3"] .c-holders__card-icon { max-width: calc(124 * var(--u)); margin-left: calc(-14 * var(--u)); }
.c-holders__card-body {
  grid-area: body;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(4 * var(--u));
  min-width: 0;
  padding-top: calc(18 * var(--u));
  font: 400 calc(34 * var(--u))/1.05 var(--t-font-body);
}
.c-holders__card-who { max-width: 100%; overflow: hidden; color: var(--qc-cream); text-overflow: ellipsis; white-space: nowrap; }
.c-holders__card-bal,
.c-holders__card-pct { color: var(--qc-cream); white-space: nowrap; }
.c-holders__card-pct:empty { display: none; }
.c-holders__card-body > .c-holders__badge { margin-top: auto; }

/* The green badge: NFT eligibility, on the podium and in the table. */
.c-holders__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(43 * var(--u));
  padding: calc(3 * var(--u)) calc(11 * var(--u)) calc(2 * var(--u));
  border: calc(3 * var(--u)) solid #1fae5b;
  border-radius: calc(5 * var(--u));
  background: #03170c;
  box-shadow: inset 0 0 calc(8 * var(--u)) rgb(37 220 113 / .15), 0 0 calc(8 * var(--u)) var(--lb-glow);
  color: var(--qc-green);
  font: 400 max(13px, calc(27 * var(--u)))/1 var(--t-font-body);
  letter-spacing: .02em;
  white-space: nowrap;
}
.c-holders__badge[data-tone="short"] { border-color: #a5470f; background: #140902; box-shadow: none; color: #ff9b6a; }

/* The table: six columns on one grid, the header row then ranks 04 to 25 in a scrolling well of six rows. */
.c-holders__table { margin-top: calc(24 * var(--u)); min-width: 0; }
.c-holders__row {
  display: grid;
  grid-template-columns: minmax(0, 68fr) minmax(0, 170fr) minmax(0, 363fr) minmax(0, 193fr) minmax(0, 227fr) minmax(0, 255fr);
  align-items: center;
  min-height: calc(74 * var(--u));
  padding: 0 calc(4 * var(--u));
  border-bottom: calc(2 * var(--u)) solid var(--lb-rule);
}
.c-holders__row--head {
  min-height: calc(56 * var(--u));
  border-top: calc(2 * var(--u)) solid var(--lb-rule);
  border-bottom-color: #13623a;
}
.c-holders__th {
  color: var(--qc-green);
  font: 400 max(13px, calc(29 * var(--u)))/1 var(--t-font-body);
  letter-spacing: .01em;
  white-space: nowrap;
}
.c-holders__rows {
  max-height: calc(6 * 74 * var(--u) + 2px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--qc-green-line) transparent;
}
.c-holders__rows:focus-visible { outline-offset: -3px; }
.c-holders__rows > .c-holders__row:last-child { border-bottom-color: transparent; }
/* With a mouse, the wheel goes on to the page once THE BREAK ROOM's log or these rows have no room left that way: a
   contained box held the page still under the pointer. Touch keeps each box's scroll to itself. */
@media (pointer: fine) {
  :is(.q-community, .q-hero__room) .c-breakroom__log,
  .c-holders__rows { overscroll-behavior: auto; }
}
.c-holders__row[data-you] { background: rgb(255 227 107 / .06); }
.c-holders__td { display: flex; align-items: center; min-width: 0; }
.c-holders__rank { padding-left: calc(10 * var(--u)); color: var(--qc-cream); font-size: calc(35 * var(--u)); }
.c-holders__plate {
  display: grid;
  place-items: center;
  width: calc(125 * var(--u));
  height: calc(54 * var(--u));
  margin-left: calc(8 * var(--u));
  padding: calc(2 * var(--u)) calc(14 * var(--u)) 0;
  background: url("leaderboard-art/brass-plate.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(0 calc(3 * var(--u)) calc(2 * var(--u)) rgb(0 0 0 / .65));
  color: #2a1505;
  font: 400 max(12px, calc(27 * var(--u)))/1 var(--t-font-body);
  letter-spacing: .02em;
  text-shadow: 0 1px 0 rgb(255 226 160 / .35);
  white-space: nowrap;
}
.c-holders__holder {
  display: grid;
  grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
  align-items: center;
  column-gap: calc(4 * var(--u));
}
.c-holders__who {
  min-width: 0;
  overflow: hidden;
  color: var(--qc-cream);
  font-size: calc(29 * var(--u));
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.c-holders__handle:hover,
a.c-holders__wallet-id:hover { color: var(--qc-green); text-decoration: underline; text-underline-offset: .15em; }
.c-holders__slogan,
.c-holders__claim-row-btn {
  justify-self: start;
  max-width: 100%;
  min-height: calc(41 * var(--u));
  overflow: hidden;
  font: 400 max(12px, calc(25 * var(--u)))/1 var(--t-font-body);
  letter-spacing: .02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-holders__slogan {
  display: inline-flex;
  align-items: center;
  padding: calc(3 * var(--u)) calc(10 * var(--u)) calc(2 * var(--u));
  border: calc(3 * var(--u)) solid var(--lb-steel);
  border-radius: calc(5 * var(--u));
  background: #0a120e;
  box-shadow: inset 0 0 0 calc(1 * var(--u)) #020504;
  color: #ddd5bf;
}
.c-holders__claim-row-btn {
  margin: 0;
  padding: calc(3 * var(--u)) calc(14 * var(--u)) calc(2 * var(--u));
  border: calc(2 * var(--u)) solid #ff7a33;
  border-bottom-color: #8f2c04;
  border-radius: calc(4 * var(--u));
  background: linear-gradient(#e2560f, #c9420a);
  box-shadow: 0 calc(2 * var(--u)) 0 #3a1002, 0 0 calc(8 * var(--u)) rgb(255 97 11 / .35);
  color: #2a0b00;
  cursor: pointer;
  transition: filter .12s ease-out, transform .12s ease-out;
}
.c-holders__claim-row-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.c-holders__claim-row-btn:active { filter: brightness(.94); transform: translateY(1px); }
.c-holders__bal { padding-left: calc(12 * var(--u)); color: var(--qc-cream); font-size: calc(29 * var(--u)); white-space: nowrap; }
.c-holders__drop > .c-holders__badge { min-height: calc(42 * var(--u)); padding-inline: calc(13 * var(--u)); font-size: max(12px, calc(26 * var(--u))); }
.c-holders__perk-sum { overflow: hidden; color: var(--lb-dim); font-size: calc(28 * var(--u)); text-overflow: ellipsis; white-space: nowrap; }
.c-holders__row--empty { grid-template-columns: minmax(0, 1fr); }
.c-holders__empty { padding: 0 calc(10 * var(--u)); color: var(--qc-muted); }
.c-holders__source {
  margin-top: calc(6 * var(--u));
  padding: 0 calc(8 * var(--u));
  color: var(--qc-muted);
  font: 400 max(12px, calc(20 * var(--u)))/1.1 var(--t-font-body);
  letter-spacing: .02em;
  opacity: .8;
}
.c-holders__source:empty { display: none; }
.c-holders[data-source="snapshot"] .c-holders__source,
.c-holders[data-source="stale"] .c-holders__source { color: #ffb37f; opacity: 1; }

/* -------------------------------------------------------------- the steel sidebar */
.c-holders__side {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: calc(13 * var(--u));
  min-width: 0;
}
.c-holders__module {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: calc(20 * var(--u)) calc(8 * var(--u)) calc(14 * var(--u));
  border-style: solid;
  border-color: transparent;
  border-width: calc(30 * var(--u)) calc(18 * var(--u));
  border-image: url("community-art/panel.webp") 60 / calc(46 * var(--u)) stretch;
  border-radius: calc(14 * var(--u));
  background: var(--qc-screen);
}
.c-holders__module-title {
  padding-left: calc(6 * var(--u));
  color: var(--qc-orange);
  font: 700 calc(36 * var(--u))/1 var(--t-font-display);
  font-size: var(--lb-silk-module);
  letter-spacing: -.01em;
  text-shadow: calc(3 * var(--u)) calc(3 * var(--u)) 0 #020504, 0 0 calc(12 * var(--u)) rgb(255 97 11 / .3);
  white-space: nowrap;
}
.c-holders__claim { padding-bottom: calc(2 * var(--u)); }
.c-holders__module-sub {
  margin-top: calc(21 * var(--u));
  padding-left: calc(6 * var(--u));
  color: var(--qc-green);
  font: 400 max(13px, calc(27 * var(--u)))/1.05 var(--t-font-body);
  letter-spacing: .01em;
}

/* ADVERTISE YOUR X: the recessed three-row box, then the plate. */
.c-holders__form-box {
  display: grid;
  margin-top: calc(20 * var(--u));
  border: calc(2 * var(--u)) solid #1a6640;
  border-radius: calc(6 * var(--u));
  background: #030a06;
  box-shadow: inset 0 calc(2 * var(--u)) calc(8 * var(--u)) #000;
  transition: box-shadow .2s ease-out, border-color .2s ease-out;
}
.c-holders__claim[data-attention] .c-holders__form-box {
  border-color: var(--qc-orange);
  box-shadow: inset 0 calc(2 * var(--u)) calc(8 * var(--u)) #000, 0 0 calc(16 * var(--u)) rgb(255 97 11 / .55);
}
.c-holders__field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, calc(292 * var(--u)));
  align-items: center;
  gap: calc(12 * var(--u));
  min-height: calc(78 * var(--u));
  padding: calc(8 * var(--u)) calc(12 * var(--u)) calc(8 * var(--u)) calc(18 * var(--u));
}
.c-holders__field + .c-holders__field { border-top: calc(2 * var(--u)) solid #12422a; }
.c-holders__label { color: #e3d5b6; font: 400 max(13px, calc(27 * var(--u)))/1.05 var(--t-font-body); letter-spacing: .01em; }
.c-holders__wallet,
.c-holders__input {
  width: 100%;
  min-width: 0;
  min-height: calc(52 * var(--u));
  margin: 0;
  border: calc(2 * var(--u)) solid #36463c;
  border-radius: calc(4 * var(--u));
  background: #040907;
  color: var(--qc-cream);
}
.c-holders__wallet {
  padding: calc(3 * var(--u)) calc(8 * var(--u)) calc(2 * var(--u));
  border-color: #1a6640;
  background: #04130b;
  color: var(--qc-green);
  font: 400 max(12px, calc(25 * var(--u)))/1 var(--t-font-body);
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: border-color .12s ease-out, background-color .12s ease-out;
}
.c-holders__wallet:hover,
.c-holders__wallet[data-state="connected"] { border-color: #1f9a55; background: #052614; }
.c-holders__wallet[data-state="connected"] { box-shadow: 0 0 calc(8 * var(--u)) var(--lb-glow); }
.c-holders__input {
  padding: calc(4 * var(--u)) calc(12 * var(--u)) calc(2 * var(--u));
  font: 400 max(16px, calc(31 * var(--u)))/1 var(--t-font-body);
  letter-spacing: .01em;
}
.c-holders__input::placeholder { color: var(--qc-cream); opacity: .9; }
.c-holders__input:focus { border-color: var(--qc-green); outline: none; }
.c-holders__input:focus-visible { outline: 3px solid var(--qc-focus); outline-offset: 2px; }
.c-holders__select { position: relative; display: block; min-width: 0; }
.c-holders__select select {
  appearance: none;
  padding-right: calc(44 * var(--u));
  font-size: max(16px, calc(28 * var(--u)));
  cursor: pointer;
}
.c-holders__select option { background: #050c09; color: var(--qc-cream); }
.c-holders__select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(18 * var(--u));
  width: calc(11 * var(--u));
  height: calc(11 * var(--u));
  border-right: calc(3 * var(--u)) solid var(--lb-dim);
  border-bottom: calc(3 * var(--u)) solid var(--lb-dim);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.c-holders__sign {
  --qc-plate-h: calc(84 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 4 * var(--u));
  min-height: var(--qc-plate-h);
  margin: calc(16 * var(--u)) 0 0 calc(4 * var(--u));
  padding: 0 0 calc(var(--qc-plate-h) * .2);
  border-style: solid;
  border-color: transparent;
  border-width: 0 calc(var(--qc-plate-h) * 74 / 206) 0 calc(var(--qc-plate-h) * 64 / 206);
  border-image: url("community-art/plate.webp") 0 74 0 64 fill / 0 calc(var(--qc-plate-h) * 74 / 206) 0 calc(var(--qc-plate-h) * 64 / 206) stretch;
  background: none;
  color: var(--qc-ink);
  font: 700 calc(30 * var(--u))/1 var(--t-font-display);
  font-size: var(--lb-silk-sign);
  letter-spacing: -.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .12s ease-out, filter .12s ease-out;
}
.c-holders__sign:hover:not([aria-busy="true"]) { transform: translateY(-2px); filter: brightness(1.1); }
.c-holders__sign:active:not([aria-busy="true"]) { transform: translateY(2px); filter: brightness(.94); }
.c-holders__sign[aria-busy="true"] { cursor: progress; filter: saturate(.75); }
.c-holders__status {
  margin-top: calc(10 * var(--u));
  padding: 0 calc(6 * var(--u));
  color: var(--qc-green);
  font: 400 max(14px, calc(24 * var(--u)))/1.1 var(--t-font-body);
  letter-spacing: .01em;
}
.c-holders__status:empty { display: none; }
.c-holders__status[data-tone="refused"] { color: #ff9b6a; }

/* HOLDER PERKS: the portrait in its frame beside the five-step list, the green BUY link under them. */
.c-holders__perks-body {
  display: grid;
  grid-template-columns: calc(212 * var(--u)) minmax(0, 1fr);
  align-items: start;
  gap: calc(18 * var(--u));
  margin: calc(12 * var(--u)) 0 calc(24 * var(--u));
}
.c-holders__portrait {
  padding-bottom: calc(18 * var(--u));
  border: calc(2 * var(--u)) solid #1d3e29;
  border-radius: calc(3 * var(--u));
  background: #06110b;
  box-shadow: 0 0 0 calc(2 * var(--u)) #020504;
}
.c-holders__portrait img { display: block; width: 100%; height: auto; }
.c-holders__perk-list { display: grid; gap: calc(9 * var(--u)); min-width: 0; }
.c-holders__perk dt { color: var(--qc-green); font: 400 max(14px, calc(29 * var(--u)))/1.05 var(--t-font-body); letter-spacing: .01em; }
.c-holders__perk dd { color: var(--lb-dim); font: 400 max(13px, calc(23 * var(--u)))/1.1 var(--t-font-body); letter-spacing: .01em; }
.c-holders__buy {
  display: grid;
  place-items: center;
  min-height: calc(76 * var(--u));
  margin-top: auto;
  padding: calc(4 * var(--u)) calc(12 * var(--u)) 0;
  border: calc(3 * var(--u)) solid #1f9a55;
  border-radius: calc(7 * var(--u));
  background: #03110a;
  box-shadow: inset 0 0 0 calc(4 * var(--u)) #020805, inset 0 0 0 calc(6 * var(--u)) #0f5631, 0 0 calc(12 * var(--u)) var(--lb-glow);
  color: var(--qc-green);
  font: 700 calc(28 * var(--u))/1 var(--t-font-display);
  font-size: var(--lb-silk-buy);
  letter-spacing: -.01em;
  text-align: center;
  text-shadow: 0 0 calc(10 * var(--u)) rgb(37 220 113 / .4);
  white-space: nowrap;
  transition: background-color .12s ease-out, box-shadow .12s ease-out;
}
.c-holders__buy:hover { background: #062a16; box-shadow: inset 0 0 0 calc(4 * var(--u)) #020805, inset 0 0 0 calc(6 * var(--u)) #1f9a55, 0 0 calc(16 * var(--u)) rgb(37 220 113 / .35); }

/* ----------------------------------------------- narrower: the sidebar under the bay */
@container qc-holders (max-width: 1239px) {
  .c-holders { --u: calc(100cqw / 1360); grid-template-columns: minmax(0, 1fr); gap: calc(13 * var(--u)); }
  .c-holders__side { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
}
/* ------------------------------------------------- phone: one column, rows fold */
@container qc-holders (max-width: 859px) {
  .c-holders { --u: min(1px, calc(100cqw / 600)); }
  .c-holders__bay { padding: calc(10 * var(--u)) calc(4 * var(--u)) calc(8 * var(--u)); border-width: calc(26 * var(--u)); border-image-width: calc(80 * var(--u)); }
  .c-holders__head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "sub" "filters"; row-gap: calc(18 * var(--u)); padding: 0 calc(6 * var(--u)); }
  .c-holders { --lb-silk-title: calc(44 * var(--u)); }
  .c-holders__title { white-space: normal; }
  .c-holders__subtitle { font-size: calc(32 * var(--u)); line-height: 1.05; }
  .c-holders__subtitle > span { display: inline; }
  .c-holders__filters { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: calc(12 * var(--u)); margin-top: 0; }
  .c-holders__filter { min-height: calc(72 * var(--u)); font-size: calc(28 * var(--u)); }
  .c-holders__podium { grid-template-columns: minmax(0, 1fr); gap: calc(14 * var(--u)); padding: 0; }
  .c-holders__card { min-height: calc(230 * var(--u)); }
  .c-holders__row--head { display: none; }
  .c-holders__table { border-top: calc(2 * var(--u)) solid var(--lb-rule); }
  .c-holders__rows { max-height: min(72svh, calc(5 * 186 * var(--u))); }
  .c-holders__row {
    grid-template-columns: calc(70 * var(--u)) calc(150 * var(--u)) minmax(0, 1fr);
    grid-template-areas: "rank tier bal" "who who who" "drop perk perk";
    gap: calc(12 * var(--u)) calc(10 * var(--u));
    padding: calc(14 * var(--u)) calc(4 * var(--u));
  }
  .c-holders__rank { grid-area: rank; padding-left: calc(6 * var(--u)); }
  .c-holders__tier { grid-area: tier; }
  .c-holders__plate { margin-left: 0; }
  .c-holders__bal { grid-area: bal; justify-content: flex-end; padding: 0 calc(6 * var(--u)) 0 0; font-size: calc(32 * var(--u)); }
  .c-holders__holder { grid-area: who; grid-template-columns: minmax(0, auto) auto; justify-content: start; column-gap: calc(16 * var(--u)); padding-left: calc(6 * var(--u)); }
  .c-holders__who { font-size: calc(32 * var(--u)); }
  .c-holders__drop { grid-area: drop; grid-column: 1 / span 2; }
  .c-holders__perk-sum { grid-area: perk; grid-column: 3; justify-content: flex-end; padding-right: calc(6 * var(--u)); font-size: max(14px, calc(26 * var(--u))); }
  .c-holders__row--empty { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
  .c-holders__side { grid-template-columns: minmax(0, 1fr); }
  .c-holders__module { border-width: calc(24 * var(--u)); border-image-width: calc(72 * var(--u)); }
  .c-holders__field { grid-template-columns: minmax(0, 1fr); gap: calc(8 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); }
  .c-holders__wallet { min-height: 44px; }
  .c-holders__input { min-height: 44px; }
  .c-holders__perks-body { grid-template-columns: calc(190 * var(--u)) minmax(0, 1fr); gap: calc(18 * var(--u)); }
}
@media (prefers-reduced-motion: reduce) {
  .c-holders :is(.c-holders__filter, .c-holders__claim-row-btn, .c-holders__sign, .c-holders__wallet, .c-holders__buy, .c-holders__form-box) { transition: none; }
}
:root[data-reduced-motion="true"] .c-holders :is(.c-holders__filter, .c-holders__claim-row-btn, .c-holders__sign, .c-holders__wallet, .c-holders__buy, .c-holders__form-box) { transition: none; }

/* ------------------------------------------------------------ the home holders board, folded */
/* The standalone holders board on the home page stays mounted for its routes and tests, folded to one clipped pixel. */
.q-community > .q-community__holders {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

/* ------------------------------------------------------------ the trading bot (.q-bot-app) */
/* The holders' trading bot (trading-bot.js), in the slot it keeps in the community block; the slot stays empty and
   hidden until the floor opens. On top, the home plate: the frame (bot-art/bot-home-s03.webp, 1536 by 1024) with a
   button over its own OPEN TRADING BOT plate and the bot's status in the frame's empty bay; --x, --y, --w and --h are
   a box in the frame in percent, measured on the frame. Under it, the dashboard in the console's hardware: the LIVE BUYS
   panel frame (community-art/panel.webp) around the dashboard and its panels, the hero monitor's bezel
   (community-art/crt.webp) around the signals and the trades, obsidian wells, emerald and orange bevelled keys. Titles
   and keys are set in the display face (Silkscreen), readouts in the body face (VT323). The layout follows the app's
   own width (qb-app). */
.q-community > .q-bot-slot { grid-column: 1 / -1; min-width: 0; }
.q-bot-slot[hidden] { display: none; }
/* The bot's own floor (#trading-bot, tools/quit-site/render.mjs botFloor; the owner's order, 22 Oct 2026 about 09:10
   UTC): edge to edge under the community block in every mode of the bot, with the floor strip and its launcher. The
   plate fills the width at every size, as the other floors' art does, from its 1536 pixel frame or its 1920, 2560 and
   3072 pixel renditions (bot-art/sources.json, WebP and AVIF), so it stays sharp at 1920 and beyond. The floor keeps the plate's place from the
   first paint; the app opens under the plate. */
.q-bot-floor { background: #070e0b; }
.q-bot-floor__host { min-width: 0; }
.q-bot-floor__host:empty { width: 100%; aspect-ratio: 3 / 2; }
.q-bot-floor .q-bot-app { max-width: none; gap: 0; }
.q-bot-floor .q-bot-home { gap: 0; }
.q-bot-floor .q-bot-home__surface { width: 100%; border-radius: 0; box-shadow: none; }
.q-bot-floor .q-bot-rail__cta { display: none; }
.q-bot-floor .q-bot-dashboard { width: min(1536px, calc(100% - 24px)); margin: 18px auto 24px; }
.q-bot-app {
  --qb-obsidian: #070b09;
  --qb-well: #030806;
  --qb-card: #04110a;
  --qb-emerald: #38e54d;
  --qb-emerald-line: #1f7a33;
  --qb-orange: #ff5a14;
  --qb-orange-hi: #ff8a3d;
  --qb-red: #ff6a55;
  --qb-amber: #ffb37f;
  --qb-cream: #f4e7cb;
  --qb-muted: #9fb7a4;
  --qb-steel: #2b2f2a;
  --qb-focus: #ffe36b;
  --qb-glass:
    repeating-linear-gradient(to bottom, rgb(255 255 255 / .025) 0 1px, transparent 1px 3px),
    radial-gradient(90% 80% at 50% 0%, rgb(56 229 77 / .07), transparent 70%),
    var(--qb-well);
  --qb-display: "Silkscreen", var(--t-font-display);
  box-sizing: border-box;
  display: grid;
  gap: 18px;
  width: 100%;
  min-width: 0;
  margin: 0 auto;
  color: var(--qb-cream);
  font: 400 18px/1.15 var(--t-font-body);
  container: qb-app / inline-size;
}
.q-bot-app *,
.q-bot-app *::before,
.q-bot-app *::after { box-sizing: border-box; }
.q-bot-app :where(h2, h3, p, ol, ul, dl, dd, dt, figure) { margin: 0; }
.q-bot-app :where(ol, ul) { padding: 0; list-style: none; }
.q-bot-app :where(a) { color: inherit; text-decoration: none; }
.q-bot-app :where(button, input) { font: inherit; }
.q-bot-app :is(a, button, input, [tabindex="0"]):focus-visible { outline: 3px solid var(--qb-focus); outline-offset: 2px; }
.q-bot-app img { display: block; max-width: 100%; height: auto; }
.q-bot-app [hidden] { display: none !important; }

/* ------------------------------------------------------------ the home plate */
.q-bot-home { display: grid; gap: 12px; min-width: 0; }
.q-bot-home__surface {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #040806;
  box-shadow: 0 0 0 3px #121712, 0 0 0 5px #030504, 0 22px 48px rgb(0 0 0 / .62);
  line-height: 0;
  user-select: none;
  container: qb-home / inline-size;
}
.q-bot-home__picture { display: block; }
.q-bot-home__frame { width: 100%; }
/* The button over the frame's own OPEN TRADING BOT plate: the pixels stay the frame's; the key lights its rim. */
.q-bot-spot {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  z-index: 2;
  width: calc(var(--w) * 1%);
  height: calc(var(--h) * 1%);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 1.2cqw;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow .18s ease, background-color .18s ease;
}
.q-bot-spot[data-pos="cta_open"] { --x: 61.784; --y: 82.910; --w: 36.133; --h: 11.426; }
.q-bot-spot--cta { animation: qb-breathe 3.2s ease-in-out infinite; }
.q-bot-spot:hover { background-color: rgb(255 255 255 / .07); box-shadow: 0 0 0 3px rgb(255 176 122 / .9), 0 0 28px rgb(255 90 20 / .6); animation: none; }
.q-bot-spot:active { background-color: rgb(0 0 0 / .12); box-shadow: 0 0 0 2px rgb(255 176 122 / .8); }
.q-bot-spot:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--qb-focus), 0 0 24px rgb(255 227 107 / .5); }
@keyframes qb-breathe { 0%, 100% { box-shadow: 0 0 0 0 rgb(255 90 20 / 0); } 50% { box-shadow: 0 0 22px 2px rgb(255 90 20 / .45); } }

/* the bot's status on the frame's empty bay, beside the holder waves */
.q-bot-home__crt {
  position: absolute;
  left: 70.703%;
  top: 71.191%;
  z-index: 2;
  display: grid;
  align-content: center;
  gap: .45cqw;
  width: 27.409%;
  height: 7.227%;
  padding: 0 1.2cqw;
  overflow: hidden;
  border-radius: .5cqw;
  background: radial-gradient(120% 140% at 50% 0%, rgb(56 229 77 / .12), transparent 70%), #030a06;
  box-shadow: inset 0 0 0 1px rgb(56 229 77 / .3), inset 0 0 1.2cqw rgb(56 229 77 / .16);
  color: var(--qb-emerald);
  font-family: var(--t-font-body);
  line-height: 1;
  text-shadow: 0 0 .6cqw rgb(56 229 77 / .6);
  pointer-events: none;
}
.q-bot-home__crt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom, rgb(0 0 0 / .22) 0 1px, transparent 1px 3px);
  pointer-events: none;
}
.q-bot-home__crt-top { overflow: hidden; font-size: 2.1cqw; text-overflow: ellipsis; white-space: nowrap; animation: qb-crt 2.8s ease-in-out infinite; }
.q-bot-home__crt-bottom { overflow: hidden; color: var(--qb-cream); font-size: max(12px, 1.5cqw); text-overflow: ellipsis; text-shadow: none; white-space: nowrap; }
.q-bot-home__crt:is([data-mode="paper"], [data-mode="pending"]) .q-bot-home__crt-top { color: var(--qb-amber); text-shadow: 0 0 .6cqw rgb(255 179 127 / .5); }
.q-bot-home__crt:is([data-mode="off"], [data-mode="unknown"], [data-mode="unavailable"]) .q-bot-home__crt-top { color: var(--qb-red); text-shadow: none; animation: none; }
@keyframes qb-crt { 0%, 100% { text-shadow: 0 0 .6cqw rgb(56 229 77 / .45); } 50% { text-shadow: 0 0 1.2cqw rgb(56 229 77 / .85), 0 0 .3cqw rgb(255 255 255 / .35); } }

/* the phone rail: the waves and the button at a size a thumb can read */
.q-bot-home__rail { display: none; }
.q-bot-rail__tiers { display: grid; gap: 6px; }
.q-bot-rail__tier {
  display: grid;
  gap: 4px;
  padding: 9px 12px 7px;
  border: 3px solid #2a302b;
  border-radius: 7px;
  background: #040b07;
  box-shadow: inset 0 2px 0 rgb(255 255 255 / .05), inset 0 -3px 0 rgb(0 0 0 / .6);
  color: var(--qb-cream);
}
.q-bot-rail__hold { font: 700 14px/1 var(--qb-display); letter-spacing: -.02em; }
.q-bot-rail__cap { color: var(--qb-emerald); font-size: 17px; }
.q-bot-rail__cta { width: 100%; }
.q-bot-rail__status {
  padding: 9px 12px 7px;
  border: 2px solid var(--qb-emerald-line);
  border-radius: 6px;
  background: radial-gradient(120% 140% at 50% 0%, rgb(56 229 77 / .12), transparent 70%), #030a06;
  color: var(--qb-emerald);
  font-size: 18px;
  line-height: 1.15;
  text-shadow: 0 0 8px rgb(56 229 77 / .45);
}
.q-bot-rail__status:is([data-mode="paper"], [data-mode="pending"]) { border-color: #a5470f; color: var(--qb-amber); text-shadow: none; }
.q-bot-rail__status:is([data-mode="off"], [data-mode="unknown"], [data-mode="unavailable"]) { border-color: #a3392d; color: var(--qb-red); text-shadow: none; }

/* ------------------------------------------------------------ the dashboard */
.q-bot-dashboard {
  position: relative;
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 8px 10px 14px;
  border-style: solid;
  border-color: transparent;
  border-width: 26px 18px;
  border-image: url("community-art/panel.webp") 60 / 46px stretch;
  border-radius: 14px;
  background: radial-gradient(120% 60% at 50% 0%, rgb(255 90 20 / .06), transparent 60%), var(--qb-obsidian);
  scroll-margin-top: calc(var(--t-header-desktop, 72px) + 12px);
}
.q-bot-dashboard:focus { outline: none; }

/* the riveted header bar */
.q-bot-dash__head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.45fr) minmax(176px, .5fr);
  grid-template-areas: "brand tabs auth";
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 3px solid #1a1f1b;
  border-radius: 10px;
  background:
    radial-gradient(circle at 9px 9px, #6a716b 0 2px, #1b1f1c 2.5px 3.5px, transparent 4px),
    radial-gradient(circle at calc(100% - 9px) 9px, #6a716b 0 2px, #1b1f1c 2.5px 3.5px, transparent 4px),
    radial-gradient(circle at 9px calc(100% - 9px), #6a716b 0 2px, #1b1f1c 2.5px 3.5px, transparent 4px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #6a716b 0 2px, #1b1f1c 2.5px 3.5px, transparent 4px),
    linear-gradient(180deg, #151a16, #0a0d0b);
  box-shadow: inset 0 2px 0 rgb(255 255 255 / .06), inset 0 -3px 0 rgb(0 0 0 / .6);
}
.q-bot-dash__brand { grid-area: brand; display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 12px; min-width: 0; }
.q-bot-dash__gary {
  width: 76px;
  border: 3px solid #3b2a17;
  border-radius: 8px;
  box-shadow: 0 0 0 2px #020504, 0 0 14px rgb(255 90 20 / .3);
}
.q-bot-dash__brand-text { display: grid; gap: 7px; min-width: 0; }
.q-bot-dash__title {
  color: var(--qb-orange);
  font: 700 clamp(17px, 1.8cqw, 26px)/1.05 var(--qb-display);
  letter-spacing: -.05em;
  text-shadow: 2px 2px 0 #020504, 0 0 14px rgb(255 90 20 / .35);
}
.q-bot-dash__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
/* the mode badge: green while live, amber in paper, red when off, unknown or unreadable */
.q-bot-dash__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px 3px;
  border: 2px solid var(--qb-emerald);
  border-radius: 4px;
  background: #062010;
  color: var(--qb-emerald);
  font: 700 12px/1 var(--qb-display);
  letter-spacing: -.02em;
  text-shadow: 0 0 8px rgb(56 229 77 / .5);
}
.q-bot-dash__badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  animation: qb-led 1.6s steps(2, jump-none) infinite;
}
.q-bot-dash__badge:is([data-state="paper"], [data-state="pending"]) { border-color: #c96f2c; background: #1d0e04; color: var(--qb-amber); text-shadow: none; }
.q-bot-dash__badge:is([data-state="off"], [data-state="unknown"], [data-state="unavailable"]) { border-color: #a3392d; background: #1f0705; color: var(--qb-red); text-shadow: none; }
.q-bot-dash__badge:not([data-state="live"])::before { animation: none; }
@keyframes qb-led { 50% { opacity: .35; } }
.q-bot-dash__checked { color: var(--qb-muted); font-size: 16px; }
.q-bot-dash__session { overflow: hidden; color: var(--qb-muted); font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.q-bot-dash__tabs { grid-area: tabs; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.q-bot-tab {
  min-height: 48px;
  margin: 0;
  padding: 8px 10px 6px;
  border: 3px solid #253028;
  border-radius: 5px;
  background: linear-gradient(180deg, #111813, #070c09);
  box-shadow: inset 0 2px 0 rgb(255 255 255 / .06), inset 0 -4px 0 rgb(0 0 0 / .6), 0 3px 0 #020403;
  color: #c8d6ca;
  font: 700 clamp(12px, .95cqw, 14px)/1.15 var(--qb-display);
  letter-spacing: -.03em;
  text-align: left;
  cursor: pointer;
  transition: border-color .12s ease-out, color .12s ease-out, transform .08s ease-out;
}
.q-bot-tab:hover { border-color: var(--qb-emerald-line); color: var(--qb-cream); }
.q-bot-tab[aria-selected="true"] {
  border-color: var(--qb-emerald);
  background: linear-gradient(180deg, #0b2a14, #051409);
  box-shadow: inset 0 2px 8px rgb(0 0 0 / .75), 0 0 14px rgb(56 229 77 / .35);
  color: var(--qb-emerald);
  text-shadow: 0 0 8px rgb(56 229 77 / .5);
  transform: translateY(2px);
}
.q-bot-dash__auth { grid-area: auth; display: grid; gap: 8px; }
.q-bot-dash__mode-line {
  padding: 8px 12px 6px;
  border-left: 4px solid var(--qb-emerald-line);
  border-radius: 2px;
  background: #04100a;
  color: var(--qb-cream);
  font-size: clamp(15px, 1.15cqw, 19px);
  letter-spacing: .01em;
}
.q-bot-app:is([data-mode="paper"], [data-mode="pending"]) .q-bot-dash__mode-line { border-left-color: #a5470f; background: #0d0703; color: var(--qb-amber); }
.q-bot-app:is([data-mode="off"], [data-mode="unknown"], [data-mode="unavailable"]) .q-bot-dash__mode-line { border-left-color: #a3392d; background: #120403; color: #ffb3a8; }
.q-bot-dash__status:empty { display: none; }

/* the keys */
.q-bot-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0;
  padding: 10px 14px 8px;
  border: 3px solid;
  border-radius: 6px;
  font: 700 clamp(12px, 1cqw, 15px)/1.1 var(--qb-display);
  letter-spacing: -.02em;
  text-align: center;
  cursor: pointer;
  transition: transform .08s ease-out, filter .12s ease-out, box-shadow .08s ease-out;
}
.q-bot-btn--green {
  border-color: var(--qb-emerald);
  background: linear-gradient(180deg, #17532a 0%, #0b2a14 55%, #061a0c 100%);
  box-shadow: inset 0 2px 0 rgb(255 255 255 / .16), inset 0 -4px 0 rgb(0 0 0 / .55), 0 4px 0 #031009, 0 0 16px rgb(56 229 77 / .22);
  color: var(--qb-emerald);
  text-shadow: 0 0 8px rgb(56 229 77 / .5);
}
.q-bot-btn--orange {
  border-color: #ffb07a;
  background: linear-gradient(180deg, var(--qb-orange-hi) 0%, var(--qb-orange) 52%, #c94204 100%);
  box-shadow: inset 0 2px 0 rgb(255 255 255 / .45), inset 0 -4px 0 rgb(0 0 0 / .4), 0 4px 0 #5a1c02, 0 0 18px rgb(255 90 20 / .35);
  color: #160903;
}
.q-bot-btn--red {
  border-color: #c4473a;
  background: linear-gradient(180deg, #4c120c, #260604);
  box-shadow: inset 0 2px 0 rgb(255 255 255 / .1), inset 0 -4px 0 rgb(0 0 0 / .55), 0 4px 0 #160302;
  color: #ffb3a8;
}
.q-bot-btn--big { min-height: 56px; font-size: clamp(14px, 1.25cqw, 19px); }
.q-bot-btn:hover { filter: brightness(1.1); }
.q-bot-btn:active { transform: translateY(3px); box-shadow: inset 0 2px 6px rgb(0 0 0 / .45), 0 1px 0 #020403; }
.q-bot-btn[aria-busy="true"] { filter: brightness(.8); cursor: progress; }

/* ------------------------------------------------------------ panels, screens and lines */
.q-bot-screen { display: grid; gap: 14px; min-width: 0; }
.q-bot-panel {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 6px 6px 10px;
  border-style: solid;
  border-color: transparent;
  border-width: 24px 16px;
  border-image: url("community-art/panel.webp") 60 / 40px stretch;
  border-radius: 12px;
  background: var(--qb-glass);
}
.q-bot-panel--crt {
  padding: 4px 2px 8px;
  border-width: 28px;
  border-image: url("community-art/crt.webp") 134 / 84px stretch;
  border-radius: 16px;
}
.q-bot-panel__title {
  padding: 8px 10px 6px;
  border: 2px solid var(--qb-steel);
  border-radius: 5px;
  background: #0a0d0b;
  box-shadow: inset 0 2px 6px #000;
  color: var(--qb-orange);
  font: 700 clamp(12px, 1.05cqw, 16px)/1.1 var(--qb-display);
  letter-spacing: -.04em;
  text-align: center;
  text-shadow: 2px 2px 0 #020504, 0 0 10px rgb(255 90 20 / .3);
  text-wrap: balance;
}
.q-bot-fine { color: var(--qb-muted); font-size: clamp(15px, 1.05cqw, 17px); line-height: 1.25; }
.q-bot-fine:empty { display: none; }
.q-bot-status { min-height: 1.2em; color: var(--qb-muted); font-size: clamp(15px, 1.05cqw, 17px); line-height: 1.2; }
.q-bot-status[data-tone="done"] { color: var(--qb-emerald); }
.q-bot-status[data-tone="refused"] { color: var(--qb-red); }
.q-bot-status[data-tone="warn"] { color: var(--qb-amber); }
.q-bot-empty { padding: 18px 12px; color: var(--qb-cream); font-size: clamp(16px, 1.2cqw, 20px); line-height: 1.25; text-align: center; }
.q-bot-th { color: var(--qb-muted); font: 700 12px/1.1 var(--qb-display); letter-spacing: -.02em; }
.q-bot-td { min-width: 0; overflow-wrap: anywhere; }
.q-bot-pair { color: var(--qb-cream); font: 700 clamp(12px, 1cqw, 15px)/1.1 var(--qb-display); letter-spacing: -.03em; }
.q-bot-pnl { color: var(--qb-emerald); text-shadow: 0 0 8px rgb(56 229 77 / .4); white-space: nowrap; }
[data-tone="down"] > .q-bot-td .q-bot-pnl { color: var(--qb-red); text-shadow: none; }
.q-bot-link { color: var(--qb-emerald); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.q-bot-link:hover { color: var(--qb-cream); }
.q-bot-result { display: inline-block; max-width: 100%; padding: 3px 6px 1px; border: 2px solid var(--qb-emerald-line); border-radius: 3px; color: var(--qb-emerald); font: 700 12px/1.25 var(--qb-display); letter-spacing: -.02em; }
[data-status="closed"] .q-bot-result { border-color: #4b5a4f; color: var(--qb-cream); }

/* ------------------------------------------------------------ screen 1: the signals */
.q-bot-stable,
.q-bot-htable {
  display: grid;
  min-width: 0;
  overflow-x: auto;
  border: 3px solid var(--qb-emerald-line);
  border-radius: 8px;
  background: var(--qb-well);
  box-shadow: inset 0 2px 10px #000;
  scrollbar-color: var(--qb-emerald-line) transparent;
  scrollbar-width: thin;
}
.q-bot-srow {
  display: grid;
  grid-template-columns: minmax(150px, 1.3fr) minmax(96px, .8fr) minmax(120px, .9fr) minmax(110px, .9fr) minmax(140px, 1fr) minmax(100px, .8fr) minmax(96px, .7fr) minmax(64px, .5fr);
  align-items: center;
  column-gap: 10px;
  min-width: 960px;
  min-height: 56px;
  padding: 8px 12px;
  border-bottom: 2px solid #0f3a22;
  font-size: clamp(15px, 1.1cqw, 19px);
  font-variant-numeric: tabular-nums;
}
.q-bot-stable[data-trading="true"] .q-bot-srow { grid-template-columns: minmax(140px, 1.2fr) minmax(90px, .7fr) minmax(120px, .9fr) minmax(104px, .8fr) minmax(140px, 1fr) minmax(100px, .8fr) minmax(84px, .6fr) minmax(64px, .5fr) minmax(250px, 1.8fr); min-width: 1240px; }
.q-bot-stable:not([data-trading="true"]) .q-bot-td--act,
.q-bot-stable:not([data-trading="true"]) .q-bot-srow--head > :last-child { display: none; }
.q-bot-srow--head { min-height: 34px; background: #06120b; }
.q-bot-sbody > .q-bot-srow:last-child { border-bottom: 0; }
.q-bot-td--pair { display: grid; gap: 3px; }
.q-bot-venue { color: var(--qb-muted); font: 700 12px/1 var(--qb-display); letter-spacing: -.02em; }
.q-bot-when { color: var(--qb-cream); white-space: nowrap; }
.q-bot-modetag { padding: 2px 6px 0; border: 2px solid #a5470f; border-radius: 3px; color: var(--qb-amber); font: 700 12px/1.2 var(--qb-display); }
.q-bot-modetag[data-mode="live"] { border-color: var(--qb-emerald); color: var(--qb-emerald); }
.q-bot-ticket-row { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 6px 8px; align-items: center; }
.q-bot-ticket-row .q-bot-status { grid-column: 1 / -1; min-height: 0; }
.q-bot-stake { min-height: 40px; padding: 6px 8px 4px; font-size: 18px; }
.q-bot-close { width: 100%; min-height: 44px; padding: 8px 6px 6px; font-size: 12px; }

/* ------------------------------------------------------------ screen 2: sign-in, the holder's wave, the waves */
.q-bot-setup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  grid-template-areas: "connect calc" "tiers tiers";
  align-items: start;
  gap: 14px;
}
.q-bot-calc { grid-area: calc; }
.q-bot-tiers { grid-area: tiers; }
.q-bot-connect { grid-area: connect; }
.q-bot-calc__out,
.q-bot-hwm__cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.q-bot-hwm__cells { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.q-bot-calc__cell { display: grid; gap: 4px; min-width: 0; padding: 10px 12px 8px; border: 2px solid #18452a; border-radius: 5px; background: var(--qb-card); }
.q-bot-calc__cell dt { color: var(--qb-muted); font-size: 15px; }
.q-bot-calc__cell dd { overflow: hidden; color: var(--qb-emerald); font-size: clamp(22px, 1.9cqw, 32px); line-height: 1; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.q-bot-calc__cell[data-tone="burn"] dd { color: var(--qb-orange-hi); }
.q-bot-calc__cell[data-tone="muted"] dd { color: var(--qb-cream); font-size: clamp(18px, 1.5cqw, 24px); }
/* the engine's record: figures without a sign in cream, a loss in red, a gain in green */
.q-bot-record .q-bot-calc__cell dd { color: var(--qb-cream); white-space: normal; }
.q-bot-record .q-bot-fine { overflow-wrap: anywhere; }
.q-bot-calc__cell[data-tone="down"] dd { color: var(--qb-red); }
.q-bot-calc__cell[data-tone="up"] dd { color: var(--qb-emerald); }
.q-bot-verdict { padding: 8px 12px 6px; border: 2px solid #a3392d; border-radius: 4px; background: #1f0705; color: var(--qb-red); font: 700 clamp(14px, 1.3cqw, 19px)/1.15 var(--qb-display); letter-spacing: -.03em; }
.q-bot-verdict[data-verdict="pass"] { border-color: var(--qb-emerald); background: #062010; color: var(--qb-emerald); }
.q-bot-tierrows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.q-bot-tierrow {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 6px;
  min-height: 92px;
  padding: 10px 8px 8px;
  border: 3px solid #2a302b;
  border-radius: 7px;
  background: #040b07;
  box-shadow: inset 0 2px 0 rgb(255 255 255 / .05), inset 0 -4px 0 rgb(0 0 0 / .6);
  color: var(--qb-cream);
  font-size: clamp(16px, 1.2cqw, 20px);
  text-align: center;
}
.q-bot-tierrow__hold { font: 700 clamp(12px, .95cqw, 14px)/1.1 var(--qb-display); letter-spacing: -.03em; }
.q-bot-tierrow__cap { color: var(--qb-emerald); font: 700 clamp(13px, 1.05cqw, 16px)/1.1 var(--qb-display); }
.q-bot-tierrow__day { color: var(--qb-muted); }
.q-bot-tierrow[data-current] { border-color: var(--qb-emerald); background: #0a2412; box-shadow: 0 0 16px rgb(56 229 77 / .4), inset 0 0 12px rgb(56 229 77 / .12); }
.q-bot-buy-quit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  min-height: 40px;
  padding: 8px 14px 6px;
  border: 2px solid var(--qb-emerald);
  border-radius: 4px;
  background: linear-gradient(180deg, #165e2a, #0a3517);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 0 10px rgb(56 229 77 / .3);
  color: var(--qb-cream);
  font: 700 clamp(12px, .85cqw, 13px)/1 var(--qb-display);
  letter-spacing: -.02em;
  white-space: nowrap;
}
.q-bot-buy-quit:hover { filter: brightness(1.12); }
.q-bot-input {
  width: 100%;
  min-height: 46px;
  padding: 8px 12px 6px;
  border: 3px solid var(--qb-emerald-line);
  border-radius: 4px;
  background: #020604;
  box-shadow: inset 0 2px 8px #000;
  color: var(--qb-cream);
  font: 400 19px/1 var(--t-font-body);
}
.q-bot-session { padding: 8px 10px 6px; border: 2px dashed #2a4a34; border-radius: 3px; color: var(--qb-cream); overflow-wrap: anywhere; }

/* ------------------------------------------------------------ screen 3: the trades, the furnace, the record */
.q-bot-hrow {
  display: grid;
  grid-template-columns: minmax(110px, .9fr) minmax(120px, 1fr) minmax(110px, 1fr) minmax(96px, .8fr) minmax(96px, .8fr) minmax(140px, 1fr) minmax(110px, .9fr) minmax(200px, 1.5fr) minmax(64px, .5fr);
  align-items: center;
  column-gap: 10px;
  min-width: 1180px;
  min-height: 46px;
  padding: 6px 12px;
  border-bottom: 2px solid #0f3a22;
  font-size: clamp(15px, 1.05cqw, 18px);
  font-variant-numeric: tabular-nums;
}
.q-bot-hrow--head { min-height: 34px; background: #06120b; }
.q-bot-hrow[data-mode="paper"] .q-bot-pnl { color: var(--qb-amber); text-shadow: none; }
.q-bot-split { display: block; margin-top: 3px; color: var(--qb-muted); font-size: clamp(13px, .9cqw, 15px); line-height: 1.2; }
/* the next step of a live trade, under its row */
.q-bot-steps { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 6px 0 4px; }
.q-bot-step { min-height: 44px; padding: 8px 12px 6px; font-size: clamp(12px, .85cqw, 13px); }
.q-bot-hbody > .q-bot-hrow:last-child { border-bottom: 0; }
.q-bot-hwm { grid-template-columns: minmax(120px, 220px) minmax(0, 1fr); grid-template-areas: "title title" "art cells" "art list" "art line" "art key"; }
.q-bot-hwm > .q-bot-panel__title { grid-area: title; }
.q-bot-furnace__art { grid-area: art; align-self: start; border: 3px solid #1b211c; border-radius: 8px; }
.q-bot-hwm > .q-bot-hwm__cells { grid-area: cells; }
.q-bot-hwm > .q-bot-burns { grid-area: list; }
.q-bot-hwm > .q-bot-fine { grid-area: line; }
.q-bot-hwm > .q-bot-solscan { grid-area: key; justify-self: start; }
.q-bot-burns { display: grid; gap: 4px; }
.q-bot-burns:empty { display: none; }
.q-bot-burn {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 7px 10px 5px;
  border-left: 3px solid #a5470f;
  background: rgb(255 90 20 / .05);
  font-size: clamp(15px, 1.05cqw, 18px);
  font-variant-numeric: tabular-nums;
}
.q-bot-burn__quit { color: var(--qb-orange-hi); }
.q-bot-burn__at { color: var(--qb-muted); }

/* ------------------------------------------------------------ screen 4: what the bot can do, the keys */
.q-bot-security { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; gap: 14px; }
.q-bot-scope { display: grid; overflow: hidden; border: 3px solid var(--qb-emerald-line); border-radius: 6px; background: #020604; }
.q-bot-scope:empty { display: none; }
.q-bot-scope__row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: baseline;
  gap: 10px;
  padding: 7px 12px 5px;
  border-bottom: 1px solid #0f3a22;
  font-size: clamp(15px, 1.05cqw, 18px);
}
.q-bot-scope__row:last-child { border-bottom: 0; }
.q-bot-scope__row dt { color: var(--qb-cream); overflow-wrap: anywhere; }
.q-bot-scope__row dd { color: var(--qb-emerald); text-align: right; overflow-wrap: anywhere; }
.q-bot-scope__row[data-state="ok"] dd { text-shadow: 0 0 8px rgb(56 229 77 / .45); }
.q-bot-scope__row[data-state="bad"] dd { color: var(--qb-red); }
.q-bot-scope__row[data-state="info"] dd { color: var(--qb-cream); }
.q-bot-keys-panel .q-bot-btn { justify-self: start; }

/* the jump link the floor adds to the hero's apply bar while it is open */
.q-bot-jump--hero { margin-left: 10px; color: #ffd166; font-weight: 900; text-decoration: underline; }

/* ------------------------------------------------------------ narrower: the header stacks its tabs under the brand */
@container qb-app (max-width: 1179px) {
  .q-bot-dash__head { grid-template-columns: minmax(0, 1fr) minmax(176px, auto); grid-template-areas: "brand auth" "tabs tabs"; }
  .q-bot-dash__tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* ------------------------------------------------------------ tablet: one column of panels */
@container qb-app (max-width: 979px) {
  .q-bot-security { grid-template-columns: minmax(0, 1fr); }
  .q-bot-setup { grid-template-columns: minmax(0, 1fr); grid-template-areas: "connect" "calc" "tiers"; }
  .q-bot-hwm { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "cells" "list" "line" "key"; }
  .q-bot-app .q-bot-furnace__art { display: none; }
  .q-bot-calc__cell dd { font-size: clamp(22px, 5cqw, 32px); }
  .q-bot-tab, .q-bot-btn { font-size: clamp(12px, 1.9cqw, 15px); }
  .q-bot-panel__title, .q-bot-pair { font-size: clamp(12px, 2cqw, 15px); }
}
/* ------------------------------------------------------------ phone: the rail under the plate, signals as cards */
@container qb-app (max-width: 719px) {
  .q-bot-home__rail { display: grid; gap: 10px; }
  .q-bot-floor .q-bot-home__rail { padding: 12px 12px 16px; }
  .q-bot-home__crt { display: none; }
  .q-bot-dashboard { padding: 6px 4px 10px; border-width: 18px 10px; border-image-width: 34px; }
  .q-bot-dash__head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "brand" "tabs" "auth"; padding: 12px; }
  .q-bot-dash__brand { grid-template-columns: 56px minmax(0, 1fr); }
  .q-bot-dash__gary { width: 56px; }
  .q-bot-dash__title { font-size: clamp(16px, 5cqw, 20px); }
  .q-bot-dash__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .q-bot-tab, .q-bot-btn, .q-bot-panel__title, .q-bot-pair { font-size: clamp(12px, 3.2cqw, 14px); }
  .q-bot-fine, .q-bot-status, .q-bot-tierrow { font-size: 16px; }
  .q-bot-panel { border-width: 18px 10px; border-image-width: 32px; }
  .q-bot-panel--crt { border-width: 18px; border-image-width: 54px; }
  .q-bot-stable { overflow: visible; }
  .q-bot-srow,
  .q-bot-stable[data-trading="true"] .q-bot-srow { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; min-width: 0; padding: 12px; }
  .q-bot-srow--head { display: none; }
  .q-bot-stable .q-bot-td[data-label]::before,
  .q-bot-htable .q-bot-td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--qb-muted); font: 700 12px/1.1 var(--qb-display); letter-spacing: -.02em; }
  .q-bot-td--pair, .q-bot-td--act { grid-column: 1 / -1; }
  .q-bot-htable { overflow: visible; }
  .q-bot-hrow { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; min-width: 0; padding: 12px; }
  .q-bot-hrow--head { display: none; }
  .q-bot-tierrows, .q-bot-calc__out, .q-bot-hwm__cells { grid-template-columns: minmax(0, 1fr); }
  .q-bot-burn { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .q-bot-scope__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .q-bot-scope__row dd { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .q-bot-app :is(.q-bot-spot, .q-bot-home__crt-top, .q-bot-btn, .q-bot-tab),
  .q-bot-app .q-bot-dash__badge::before { animation: none; transition: none; }
}
:root[data-reduced-motion="true"] .q-bot-app :is(.q-bot-spot, .q-bot-home__crt-top, .q-bot-btn, .q-bot-tab),
:root[data-reduced-motion="true"] .q-bot-app .q-bot-dash__badge::before { animation: none; transition: none; }