/* Cargostrife TV - the broadcast graphics (tvgfx.js).
 *
 * Loaded AFTER tvoverlay.css and built on its furniture: every graphic is an
 * `.insp.card` like the town, industry and market cards, so the rotation
 * reads as one package. Only what a chart needs beyond that lives here, and
 * every size is in --u (one percent of the frame width) like the rest.
 *
 * SVG CHARTS SCALE WITH THE CARD. Their viewBox is 560 wide, about the
 * card's own pixel width at 1080p, so the font sizes below are the sizes
 * they air at there and shrink in proportion in a small web player.
 */

.cstv .gx.gxwide { width: calc(var(--u) * 34); }
.cstv .gx .gxsvg { display: block; width: 100%; height: auto; overflow: visible;
                   padding: calc(var(--u) * 0.2) calc(var(--u) * 0.6) 0; }
.cstv .gx .gxt { font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
                 font-size: 15px; font-weight: 600; fill: #dfe7f1; }
.cstv .gx .gxt.dim, .cstv .gx .gxt .dim { fill: var(--dim); font-weight: 500; }
.cstv .gx .gxt .gxtb { font-family: "IBM Plex Mono", ui-monospace, monospace;
                       font-weight: 600; fill: #ffffff; }
.cstv .gx .gxt .up { fill: #6ee7a0; }
.cstv .gx .gxt .dn { fill: #f8909a; }
.cstv .gx .gxrule { stroke: rgba(223, 231, 241, 0.35); stroke-width: 1;
                    stroke-dasharray: 3 4; }
.cstv .gx .gxaxis { stroke: rgba(126, 150, 180, 0.35); stroke-width: 1; }

/* The footer every graphic ends on: what the picture is made of, in one
 * line. Same treatment as the map card's footer. */
.cstv .gx .gxfoot {
  font-size: calc(var(--u) * 0.72);
  color: var(--dim);
  line-height: 1.35;
  padding: calc(var(--u) * 0.45) calc(var(--u) * 1.1) 0;
  border-top: 1px solid rgba(126, 150, 180, 0.12);
  margin-top: calc(var(--u) * 0.35);
}
.cstv .gx .isub b { color: #dfe7f1; font-weight: 600; }
.cstv .gx .up { color: #6ee7a0; }
.cstv .gx .dn { color: #f8909a; }

/* ---- 2. the league race ------------------------------------------------ */
/* Bars are absolutely placed and moved by transform, one row pitch per
 * place, so an overtake is a slide rather than a re-sort that jumps. The
 * transition is just under the stream page's one-second poll, which is
 * what makes a step-per-second read as continuous motion. */
.cstv .gxrace { --rh: calc(var(--u) * 2.15); }
.cstv .gxrbox {
  position: relative;
  height: calc(var(--rh) * var(--rows));
  margin: calc(var(--u) * 0.2) calc(var(--u) * 1.1) 0;
}
.cstv .gxrb {
  position: absolute; left: 0; right: 0; top: 0;
  height: var(--rh);
  display: grid;
  grid-template-columns: calc(var(--u) * 9) 1fr calc(var(--u) * 3.6);
  align-items: center;
  gap: calc(var(--u) * 0.5);
  transition: transform 900ms linear;
}
.cstv .gxrn { font-size: calc(var(--u) * 1.05); font-weight: 600;
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cstv .gxrt { position: relative; height: calc(var(--u) * 1.15);
              background: rgba(255, 255, 255, 0.06); }
.cstv .gxrt i { position: absolute; inset: 0 auto 0 0;
                transition: width 900ms linear; }
.cstv .gxrb b { font-size: calc(var(--u) * 1.05); text-align: right; }

/* ---- 4. head to head --------------------------------------------------- */
.cstv .gxhh {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: calc(var(--u) * 0.6);
  padding: calc(var(--u) * 0.35) calc(var(--u) * 1.1) calc(var(--u) * 0.45);
}
.cstv .gxhs { display: flex; align-items: center; gap: calc(var(--u) * 0.45);
              font-size: calc(var(--u) * 1.3); font-weight: 700; min-width: 0; }
.cstv .gxhs span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* THE SHRINK LADDER (user report 2026-09-11: a card reading "Bucktown
   transpo"). The ellipsis above is the LAST resort, not the first: a name
   longer than its column steps the type down instead, the way the lower third
   has always done. Three steps, applied to the whole header so both sides
   match, sized so the profile's 28-character ceiling fits at the smallest. */
.cstv .gxhh.nfit1 .gxhs { font-size: calc(var(--u) * 1.12); }
.cstv .gxhh.nfit2 .gxhs { font-size: calc(var(--u) * 0.96); }
.cstv .gxhh.nfit3 .gxhs { font-size: calc(var(--u) * 0.84); }
/* the score in the middle steps with them, or it starts to shout over the
   names it is supposed to sit between */
.cstv .gxhh.nfit2 .gxhvs { font-size: calc(var(--u) * 1.12); }
.cstv .gxhh.nfit3 .gxhvs { font-size: calc(var(--u) * 1.0); }
.cstv .gxhs.b { justify-content: flex-end; text-align: right; }
.cstv .gxhs i { flex: none; width: calc(var(--u) * 0.5); height: calc(var(--u) * 1.5); }
.cstv .gxhvs { font-size: calc(var(--u) * 1.3); color: var(--dim); }
.cstv .gxhrows { border-top: 1px solid rgba(126, 150, 180, 0.14); }
/* NINE ROWS HAVE TO FIT BESIDE THE COMMENTARY. The bar under each row is a
 * second grid row, so a plain `gap` put half a unit of air between every
 * figure and its own bar - measured on air 2026-09-11 at ~590px for ten
 * rows, with the card's foot touching the commentary. Column gap only. */
.cstv .gxhr {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 0 calc(var(--u) * 0.5);
  padding: calc(var(--u) * 0.1) calc(var(--u) * 1.1) 0;
}
.cstv .gxhr .gxhl { font-size: calc(var(--u) * 0.8); color: var(--dim);
                    text-transform: uppercase; letter-spacing: 0.12em;
                    text-align: center; white-space: nowrap; }
.cstv .gxhr .gxhv { font-size: calc(var(--u) * 0.98); color: #b8c6d8; }
.cstv .gxhr .gxhv.b { text-align: right; }
.cstv .gxhr .gxhv.win { color: #ffffff; font-weight: 700; }
.cstv .gxhr .gxhv.neg { color: #f8909a; }
.cstv .gxhbar { grid-column: 1 / -1; display: flex; height: calc(var(--u) * 0.16);
                margin: calc(var(--u) * 0.08) 0 calc(var(--u) * 0.04); opacity: 0.85; }
.cstv .gxhbar i { display: block; height: 100%; }

/* ---- 23. momentum ------------------------------------------------------ */
.cstv .gxmrows { border-top: 1px solid rgba(126, 150, 180, 0.14); }
.cstv .gxmr {
  display: grid;
  grid-template-columns: calc(var(--u) * 9) 1fr calc(var(--u) * 4.4) calc(var(--u) * 3.4);
  align-items: center;
  gap: calc(var(--u) * 0.5);
  padding: calc(var(--u) * 0.32) calc(var(--u) * 1.1);
}
.cstv .gxmr + .gxmr { border-top: 1px solid rgba(126, 150, 180, 0.08); }
.cstv .gxmn { font-size: calc(var(--u) * 1.0); font-weight: 600;
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cstv .gxmn i, .cstv .gxtn i { display: inline-block; width: calc(var(--u) * 0.4);
              height: calc(var(--u) * 0.9); margin-right: calc(var(--u) * 0.4);
              vertical-align: -0.1em; }
.cstv .gxmbar { position: relative; height: calc(var(--u) * 0.9); }
.cstv .gxmbar::before { content: ""; position: absolute; left: 50%; top: -2px;
                        bottom: -2px; width: 1px; background: rgba(223, 231, 241, 0.3); }
.cstv .gxmbar b { position: absolute; top: 0; bottom: 0; }
.cstv .gxmbar b.up { left: 50%; background: #4ade80; }
.cstv .gxmbar b.dn { right: 50%; background: #fb7185; }
.cstv .gxmv { font-size: calc(var(--u) * 1.0); text-align: right; }
.cstv .gxmp { font-size: calc(var(--u) * 0.9); color: var(--dim); text-align: right; }

/* ---- 26. the stock ticker ---------------------------------------------- */
.cstv .gxtks { border-top: 1px solid rgba(126, 150, 180, 0.14); }
.cstv .gxtk {
  display: grid;
  grid-template-columns: 1fr auto calc(var(--u) * 5.6);
  align-items: baseline;
  gap: calc(var(--u) * 0.8);
  padding: calc(var(--u) * 0.36) calc(var(--u) * 1.1);
}
.cstv .gxtk + .gxtk { border-top: 1px solid rgba(126, 150, 180, 0.08); }
.cstv .gxtn { font-size: calc(var(--u) * 1.05); font-weight: 600;
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cstv .gxtv { font-size: calc(var(--u) * 1.15); font-weight: 600; }
.cstv .gxtc { font-size: calc(var(--u) * 1.0); text-align: right; color: var(--dim); }

/* ---- 27. the big haulers ----------------------------------------------- */
.cstv .gxhls { border-top: 1px solid rgba(126, 150, 180, 0.14);
               padding-top: calc(var(--u) * 0.2); }
.cstv .gxhl2 {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: calc(var(--u) * 0.1) calc(var(--u) * 0.6);
  padding: calc(var(--u) * 0.22) calc(var(--u) * 1.1);
}
.cstv .gxhn { font-size: calc(var(--u) * 1.0); font-weight: 600;
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cstv .gxhq { font-size: calc(var(--u) * 1.0); text-align: right; }
.cstv .gxhb { grid-column: 1 / -1; height: calc(var(--u) * 0.55);
              background: rgba(255, 255, 255, 0.06); position: relative; }
.cstv .gxhb.now { height: calc(var(--u) * 0.2); opacity: 0.55; }
.cstv .gxhb i { position: absolute; inset: 0 auto 0 0; }

/* ---- shared: a legend row ------------------------------------------------ */
.cstv .gx .gxleg { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 0.8);
                   padding: calc(var(--u) * 0.35) calc(var(--u) * 1.1) 0;
                   font-size: calc(var(--u) * 0.85); color: var(--dim); }
.cstv .gx .gxleg i { display: inline-block; width: calc(var(--u) * 0.8);
                     height: calc(var(--u) * 0.3); margin-right: calc(var(--u) * 0.3);
                     vertical-align: 0.15em; }
.cstv .gx .gxleg b { color: #dfe7f1; }

/* ---- 20. the profile radar ------------------------------------------------ */
.cstv .gx .gxring { fill: none; stroke: rgba(126, 150, 180, 0.22); stroke-width: 1; }
.cstv .gx .gxring.outer { stroke: rgba(126, 150, 180, 0.45); }

/* ---- 21. bankruptcy watch ------------------------------------------------- */
.cstv .gxbrs { border-top: 1px solid rgba(126, 150, 180, 0.14); }
.cstv .gxbr {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: calc(var(--u) * 0.15) calc(var(--u) * 0.6);
  padding: calc(var(--u) * 0.35) calc(var(--u) * 1.1);
}
.cstv .gxbr + .gxbr { border-top: 1px solid rgba(126, 150, 180, 0.08); }
.cstv .gxbn { font-size: calc(var(--u) * 1.05); font-weight: 600;
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cstv .gxbc { font-size: calc(var(--u) * 1.05); text-align: right; }
.cstv .gxbm { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(10, 1fr);
              gap: calc(var(--u) * 0.18); }
.cstv .gxbm i { height: calc(var(--u) * 0.55); background: rgba(255, 255, 255, 0.08); }
.cstv .gxbm i.on { background: #fb7185; }
.cstv .gxbm i.warn, .cstv .gxbm i.sale, .cstv .gxbm i.fold {
  box-shadow: inset 0 calc(var(--u) * -0.12) 0 rgba(251, 191, 36, 0.9); }
.cstv .gxbs { grid-column: 1 / -1; font-size: calc(var(--u) * 0.8); color: var(--dim); }

/* ---- 37. the fleet mix ----------------------------------------------------- */
.cstv .gxfrs { border-top: 1px solid rgba(126, 150, 180, 0.14);
               padding-top: calc(var(--u) * 0.15); }
.cstv .gxfr {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: calc(var(--u) * 0.1) calc(var(--u) * 0.6);
  padding: calc(var(--u) * 0.22) calc(var(--u) * 1.1);
}
.cstv .gxfn { font-size: calc(var(--u) * 1.0); font-weight: 600;
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cstv .gxfq { font-size: calc(var(--u) * 1.0); text-align: right; }
.cstv .gxfb { grid-column: 1 / -1; display: flex; height: calc(var(--u) * 0.7);
              background: rgba(255, 255, 255, 0.06); }
.cstv .gxfb i { display: block; height: 100%; }

/* ---- 65. small multiples ---------------------------------------------------- */
.cstv .gxsms { display: grid; grid-template-columns: 1fr 1fr;
               gap: calc(var(--u) * 0.5) calc(var(--u) * 0.9);
               padding: calc(var(--u) * 0.3) calc(var(--u) * 1.1) 0;
               border-top: 1px solid rgba(126, 150, 180, 0.14); }
.cstv .gxsmh { display: flex; justify-content: space-between; align-items: baseline;
               gap: calc(var(--u) * 0.4); font-size: calc(var(--u) * 0.9); }
.cstv .gxsmh span { font-weight: 600; white-space: nowrap; overflow: hidden;
                    text-overflow: ellipsis; }
.cstv .gxsmh b { font-size: calc(var(--u) * 0.9); }
.cstv .gxsm svg { display: block; width: 100%; height: calc(var(--u) * 2.6); }

/* ---- 91. cash against loan -------------------------------------------------- */
.cstv .gxcls { border-top: 1px solid rgba(126, 150, 180, 0.14); }
.cstv .gxcl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: calc(var(--u) * 0.12) calc(var(--u) * 0.6);
  padding: calc(var(--u) * 0.3) calc(var(--u) * 1.1);
}
.cstv .gxcl + .gxcl { border-top: 1px solid rgba(126, 150, 180, 0.08); }
.cstv .gxcn { font-size: calc(var(--u) * 1.0); font-weight: 600;
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cstv .gxcv { font-size: calc(var(--u) * 1.0); text-align: right; }
.cstv .gxcb { grid-column: 1 / -1; position: relative; height: calc(var(--u) * 0.95);
              background: rgba(255, 255, 255, 0.05); }
.cstv .gxcb i { position: absolute; inset: 0 auto 0 0; }
.cstv .gxcb.cash i { background: rgba(74, 222, 128, 0.55); }
.cstv .gxcb.cash.neg i { background: rgba(251, 113, 133, 0.6); }
.cstv .gxcb.loan i { background: rgba(251, 191, 36, 0.5); }
.cstv .gxcb em { position: relative; font-style: normal; font-size: calc(var(--u) * 0.72);
                 padding-left: calc(var(--u) * 0.35); line-height: calc(var(--u) * 0.95);
                 color: #eaf1f9; }

/* ---- 94. candlesticks -------------------------------------------------------- */
.cstv .gx .gxwick { stroke-width: 1.6; }
.cstv .gx .gxwick.up { stroke: #4ade80; }
.cstv .gx .gxwick.dn { stroke: #fb7185; }
.cstv .gx .gxbody.up { fill: #4ade80; }
.cstv .gx .gxbody.dn { fill: #fb7185; }

/* ---- 52. by the numbers ------------------------------------------------------ */
.cstv .gxnums { display: grid; grid-template-columns: 1fr 1fr;
                border-top: 1px solid rgba(126, 150, 180, 0.14); }
.cstv .gxnum { padding: calc(var(--u) * 0.55) calc(var(--u) * 1.1);
               display: flex; flex-direction: column; gap: calc(var(--u) * 0.1); }
.cstv .gxnum:nth-child(n+3) { border-top: 1px solid rgba(126, 150, 180, 0.08); }
.cstv .gxnum:nth-child(2n) { border-left: 1px solid rgba(126, 150, 180, 0.08); }
.cstv .gxnum b { font-size: calc(var(--u) * 2.2); font-weight: 600; line-height: 1; }
.cstv .gxnum span { font-size: calc(var(--u) * 0.8); color: var(--dim);
                    text-transform: uppercase; letter-spacing: 0.12em; }

/* ---- 54. hot and cold ---------------------------------------------------- */
.cstv .gxhc { display: grid; grid-template-columns: 1fr 1fr;
              border-top: 1px solid rgba(126, 150, 180, 0.14); }
.cstv .gxhc > div { padding: calc(var(--u) * 0.35) calc(var(--u) * 1.1); }
.cstv .gxhc > div + div { border-left: 1px solid rgba(126, 150, 180, 0.1); }
.cstv .gxhch { font-size: calc(var(--u) * 0.8); letter-spacing: 0.18em;
               text-transform: uppercase; font-weight: 700;
               padding-bottom: calc(var(--u) * 0.2); }
.cstv .gxhch.up { color: #6ee7a0; } .cstv .gxhch.dn { color: #f8909a; }
.cstv .gxhcr { display: grid; grid-template-columns: 1fr auto auto;
               gap: calc(var(--u) * 0.5); align-items: baseline;
               padding: calc(var(--u) * 0.18) 0; font-size: calc(var(--u) * 0.95); }
.cstv .gxhcc { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cstv .gxhcf { color: var(--dim); }
.cstv .gxhcn { color: var(--dim); font-size: calc(var(--u) * 0.85); }

/* ---- 83. the charter map ------------------------------------------------- */
.cstv .gxchw { display: flex; align-items: center; gap: calc(var(--u) * 1.2);
               padding: calc(var(--u) * 0.4) calc(var(--u) * 1.1) 0;
               border-top: 1px solid rgba(126, 150, 180, 0.14); }
.cstv .gxchw .donut { width: calc(var(--u) * 7); height: calc(var(--u) * 7); flex: none; }
.cstv .gxchl { flex: 1; }
.cstv .gxchr { display: grid; grid-template-columns: auto 1fr auto; align-items: center;
               gap: calc(var(--u) * 0.45); font-size: calc(var(--u) * 1.0);
               padding: calc(var(--u) * 0.12) 0; }
.cstv .gxchr i { width: calc(var(--u) * 0.6); height: calc(var(--u) * 0.6); border-radius: 50%; }

/* ---- 90. the countdown --------------------------------------------------- */
.cstv .gxclk { font-size: calc(var(--u) * 3.6); font-weight: 600; line-height: 1;
               padding: calc(var(--u) * 0.3) calc(var(--u) * 1.1) calc(var(--u) * 0.5); }
.cstv .gxclb { position: relative; height: calc(var(--u) * 0.45);
               margin: 0 calc(var(--u) * 1.1); background: rgba(255, 255, 255, 0.08); }
.cstv .gxclb i { position: absolute; inset: 0 auto 0 0; background: var(--team); }
.cstv .gxclb b { position: absolute; top: calc(var(--u) * -0.25); bottom: calc(var(--u) * -0.25);
                 width: 2px; background: #fbbf24; }

/* ---- 18. turning points -------------------------------------------------- */
.cstv .gxtps { border-top: 1px solid rgba(126, 150, 180, 0.14);
               padding: calc(var(--u) * 0.2) calc(var(--u) * 1.1) 0; }
.cstv .gxtp { display: grid; grid-template-columns: calc(var(--u) * 6) calc(var(--u) * 0.9) 1fr;
              align-items: baseline; gap: calc(var(--u) * 0.3);
              padding: calc(var(--u) * 0.18) 0; font-size: calc(var(--u) * 0.95); }
.cstv .gxtpm { color: var(--dim); font-size: calc(var(--u) * 0.85); }
.cstv .gxtp i { width: calc(var(--u) * 0.55); height: calc(var(--u) * 0.55);
                border-radius: 50%; background: #8fa2b8; justify-self: center; }
.cstv .gxtp.lead i { background: #fbbf24; }
.cstv .gxtp.first i { background: #6ee7a0; }
.cstv .gxtpt { line-height: 1.25; }

/* ---- 76. the gaps --------------------------------------------------------- */
.cstv .gxgps { border-top: 1px solid rgba(126, 150, 180, 0.14); }
.cstv .gxgp { display: grid; grid-template-columns: calc(var(--u) * 1.6) 1fr auto auto;
              align-items: baseline; gap: calc(var(--u) * 0.6);
              padding: calc(var(--u) * 0.35) calc(var(--u) * 1.1); }
.cstv .gxgp + .gxgp { border-top: 1px solid rgba(126, 150, 180, 0.08); }
.cstv .gxgp.lead { background: rgba(255, 255, 255, 0.04); }
.cstv .gxgpp { color: var(--dim); font-weight: 600; }
.cstv .gxgpn { font-size: calc(var(--u) * 1.1); font-weight: 600; white-space: nowrap;
               overflow: hidden; text-overflow: ellipsis; }
.cstv .gxgpn i { display: inline-block; width: calc(var(--u) * 0.4); height: calc(var(--u) * 0.9);
                 margin-right: calc(var(--u) * 0.4); vertical-align: -0.1em; }
.cstv .gxgpv { font-size: calc(var(--u) * 1.1); }
.cstv .gxgpg { color: #f8909a; font-size: calc(var(--u) * 1.0); text-align: right; }
.cstv .gxgp.lead .gxgpg { color: #6ee7a0; }
.cstv .gxgpg em { font-style: normal; color: var(--dim); font-size: calc(var(--u) * 0.8); }

/* ================= BATCH 4: THE PEOPLE ==================================== */
.cstv .gx .gxfin { display: inline-block; min-width: calc(var(--u) * 2.4); text-align: center;
                   padding: calc(var(--u) * 0.08) calc(var(--u) * 0.3);
                   font-size: calc(var(--u) * 0.8); font-weight: 600;
                   background: rgba(255, 255, 255, 0.08); color: #b8c6d8; }
.cstv .gx .gxfin.p1 { background: #d9a94f; color: #0b0f14; }
.cstv .gx .gxfin.p2 { background: #aeb8c4; color: #0b0f14; }
.cstv .gx .gxfin.p3 { background: #b07f5c; color: #0b0f14; }
.cstv .gx .gxcls { display: inline-block; font-size: calc(var(--u) * 0.78); font-weight: 700;
                   letter-spacing: 0.08em; text-transform: uppercase;
                   padding: calc(var(--u) * 0.06) calc(var(--u) * 0.4);
                   border: 1px solid var(--cc); color: var(--cc); }
.cstv .gx em { font-style: normal; }

/* the form guide */
.cstv .gxfos2 { border-top: 1px solid rgba(126, 150, 180, 0.14); }
.cstv .gxfo { padding: calc(var(--u) * 0.4) calc(var(--u) * 1.1); }
.cstv .gxfo + .gxfo { border-top: 1px solid rgba(126, 150, 180, 0.08); }
.cstv .gxfoh { display: flex; justify-content: space-between; align-items: baseline; }
.cstv .gxfon { font-size: calc(var(--u) * 1.15); font-weight: 700; }
.cstv .gxfov { font-size: calc(var(--u) * 1.3); font-weight: 600; }
.cstv .gxfot { position: relative; height: calc(var(--u) * 0.9); margin: calc(var(--u) * 0.2) 0;
               background: rgba(255, 255, 255, 0.06); }
.cstv .gxfot i { position: absolute; inset: 0 auto 0 0; }
.cstv .gxfot b { position: absolute; top: calc(var(--u) * -0.2); bottom: calc(var(--u) * -0.2);
                 width: 3px; margin-left: -1px; }
.cstv .gxfot b.usual { background: #eaf1f9; }
.cstv .gxfot b.best { background: #f2b134; }
.cstv .gxfos { font-size: calc(var(--u) * 0.82); color: var(--dim); line-height: 1.35; }
.cstv .gxfos b { color: #dfe7f1; }
.cstv .gxfos em.strong { color: #6ee7a0; font-weight: 700; }
.cstv .gxfos em.par { color: #dfe7f1; font-weight: 700; }
.cstv .gxfos em.below { color: #fbbf24; font-weight: 700; }
.cstv .gxfos em.hard { color: #f8909a; font-weight: 700; }

/* the spotlight */
.cstv .gxspc { display: flex; gap: calc(var(--u) * 0.6); align-items: center;
               padding: 0 calc(var(--u) * 1.1) calc(var(--u) * 0.5); }
.cstv .gxspf { font-size: calc(var(--u) * 0.82); color: var(--dim); }
.cstv .gxsps { display: grid; grid-template-columns: repeat(3, 1fr);
               border-top: 1px solid rgba(126, 150, 180, 0.14); }
.cstv .gxsps > div { display: flex; flex-direction: column; gap: calc(var(--u) * 0.08);
                     padding: calc(var(--u) * 0.45) calc(var(--u) * 1.1); }
.cstv .gxsps > div:nth-child(n+4) { border-top: 1px solid rgba(126, 150, 180, 0.08); }
.cstv .gxsps b { font-size: calc(var(--u) * 1.6); font-weight: 600; line-height: 1; }
.cstv .gxsps b i { font-style: normal; font-size: calc(var(--u) * 0.85); color: #6ee7a0; }
.cstv .gxsps span { font-size: calc(var(--u) * 0.75); color: var(--dim);
                    text-transform: uppercase; letter-spacing: 0.12em; }
.cstv .gxspr { display: flex; align-items: center; gap: calc(var(--u) * 0.35);
               padding: calc(var(--u) * 0.45) calc(var(--u) * 1.1) 0;
               border-top: 1px solid rgba(126, 150, 180, 0.08); }
.cstv .gxspr > span { font-size: calc(var(--u) * 0.8); color: var(--dim); margin-right: calc(var(--u) * 0.3); }

/* last time on this world */
.cstv .gxrcs { border-top: 1px solid rgba(126, 150, 180, 0.14); }
.cstv .gxrc { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center;
              gap: calc(var(--u) * 0.6); padding: calc(var(--u) * 0.35) calc(var(--u) * 1.1); }
.cstv .gxrc + .gxrc { border-top: 1px solid rgba(126, 150, 180, 0.08); }
.cstv .gxrcn { font-size: calc(var(--u) * 1.1); font-weight: 600; white-space: nowrap;
               overflow: hidden; text-overflow: ellipsis; }
.cstv .gxrc.p1 .gxrcn { font-size: calc(var(--u) * 1.3); }
.cstv .gxrcn em { font-size: calc(var(--u) * 0.7); color: var(--dim); }
.cstv .gxrcv { font-size: calc(var(--u) * 1.1); }
.cstv .gxrcx { font-size: calc(var(--u) * 0.88); padding: calc(var(--u) * 0.35) calc(var(--u) * 1.1) 0; }
.cstv .gxrcx span { color: var(--dim); margin-right: calc(var(--u) * 0.3); }

/* power rankings */
.cstv .gxpws { border-top: 1px solid rgba(126, 150, 180, 0.14); }
.cstv .gxpw { display: grid; grid-template-columns: calc(var(--u) * 1.4) calc(var(--u) * 2.4) 1fr auto;
              align-items: baseline; gap: calc(var(--u) * 0.5);
              padding: calc(var(--u) * 0.32) calc(var(--u) * 1.1); }
.cstv .gxpw + .gxpw { border-top: 1px solid rgba(126, 150, 180, 0.08); }
.cstv .gxpwp { color: var(--dim); font-weight: 600; }
.cstv .gxpwm { font-size: calc(var(--u) * 0.85); color: var(--dim); }
.cstv .gxpwn { font-size: calc(var(--u) * 1.05); font-weight: 600; white-space: nowrap;
               overflow: hidden; text-overflow: ellipsis; }
.cstv .gxpwn i { display: inline-block; width: calc(var(--u) * 0.4); height: calc(var(--u) * 0.9);
                 margin-right: calc(var(--u) * 0.4); vertical-align: -0.1em; }
.cstv .gxpwv { font-size: calc(var(--u) * 0.88); color: #b8c6d8; font-style: italic; }
.cstv .gxpw.v-pulling .gxpwv, .cstv .gxpw.v-hottest .gxpwv { color: #6ee7a0; }
.cstv .gxpw.v-bleeding .gxpwv, .cstv .gxpw.v-slipping .gxpwv { color: #f8909a; }

/* the server board */
.cstv .gxsvs { display: grid; grid-template-columns: 1fr 1fr;
               border-top: 1px solid rgba(126, 150, 180, 0.14); }
.cstv .gxsv { padding: calc(var(--u) * 0.35) calc(var(--u) * 1.1);
              border-bottom: 1px solid rgba(126, 150, 180, 0.08); min-width: 0; }
.cstv .gxsv:nth-child(2n) { border-left: 1px solid rgba(126, 150, 180, 0.08); }
.cstv .gxsv.here { background: rgba(90, 169, 230, 0.12); }
.cstv .gxsvh { display: flex; gap: calc(var(--u) * 0.4); align-items: baseline;
               font-size: calc(var(--u) * 0.85); color: var(--dim); }
.cstv .gxsvh b { color: var(--team); }
.cstv .gxsvh span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.cstv .gxsvh em { font-style: normal; color: #dfe7f1; font-size: calc(var(--u) * 0.8); }
.cstv .gxsvl { font-size: calc(var(--u) * 1.0); font-weight: 600; white-space: nowrap;
               overflow: hidden; text-overflow: ellipsis; }
.cstv .gxsvm { font-size: calc(var(--u) * 0.7); color: var(--dim); }

/* the farm leaderboard */
.cstv .gxfms { border-top: 1px solid rgba(126, 150, 180, 0.14); }
.cstv .gxfm { display: grid; grid-template-columns: calc(var(--u) * 1.4) calc(var(--u) * 2) 1fr auto;
              align-items: baseline; gap: calc(var(--u) * 0.5);
              padding: calc(var(--u) * 0.3) calc(var(--u) * 1.1); }
.cstv .gxfm + .gxfm { border-top: 1px solid rgba(126, 150, 180, 0.08); }
.cstv .gxfm.here { background: rgba(90, 169, 230, 0.12); }
.cstv .gxfmw { color: var(--team); font-size: calc(var(--u) * 0.85); }
.cstv .gxfmn { font-size: calc(var(--u) * 1.0); font-weight: 600; white-space: nowrap;
               overflow: hidden; text-overflow: ellipsis; }
.cstv .gxfmn em { font-size: calc(var(--u) * 0.7); color: var(--dim); }
.cstv .gxfmv { font-size: calc(var(--u) * 1.0); }

/* the record books */
.cstv .gxrrs { border-top: 1px solid rgba(126, 150, 180, 0.14); }
.cstv .gxrr { display: grid; grid-template-columns: 1fr auto; gap: 0 calc(var(--u) * 0.6);
              padding: calc(var(--u) * 0.3) calc(var(--u) * 1.1); }
.cstv .gxrr + .gxrr { border-top: 1px solid rgba(126, 150, 180, 0.08); }
.cstv .gxrrl { font-size: calc(var(--u) * 0.9); color: var(--dim); }
.cstv .gxrrl em { font-size: calc(var(--u) * 0.72); text-transform: uppercase; letter-spacing: 0.1em; }
.cstv .gxrr b { font-size: calc(var(--u) * 1.1); text-align: right; }
.cstv .gxrrh { grid-column: 1 / -1; font-size: calc(var(--u) * 0.95); font-weight: 600; }

/* did you know */
.cstv .gxtv { display: flex; flex-direction: column; gap: calc(var(--u) * 0.2);
              padding: calc(var(--u) * 0.2) calc(var(--u) * 1.1) calc(var(--u) * 0.3); }
.cstv .gxtv span { font-size: calc(var(--u) * 1.05); color: #b8c6d8; }
.cstv .gxtv b { font-size: calc(var(--u) * 3.2); font-weight: 600; line-height: 1; color: var(--team); }

/* this world against its history */
.cstv .gxvss { border-top: 1px solid rgba(126, 150, 180, 0.14); }
.cstv .gxvs { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline;
              gap: calc(var(--u) * 0.1) calc(var(--u) * 0.5);
              padding: calc(var(--u) * 0.35) calc(var(--u) * 1.1); }
.cstv .gxvs + .gxvs { border-top: 1px solid rgba(126, 150, 180, 0.08); }
.cstv .gxvsl { font-size: calc(var(--u) * 0.95); font-weight: 600; }
.cstv .gxvs b { font-size: calc(var(--u) * 1.1); }
.cstv .gxvsa { font-size: calc(var(--u) * 0.8); color: var(--dim); }
.cstv .gxvsb { grid-column: 1 / -1; position: relative; height: calc(var(--u) * 0.45);
               background: rgba(255, 255, 255, 0.06); }
.cstv .gxvsb i { position: absolute; inset: 0 auto 0 0; background: var(--team); }
.cstv .gxvsb b { position: absolute; top: calc(var(--u) * -0.2); bottom: calc(var(--u) * -0.2);
                 width: 2px; background: #fbbf24; }

/* the talent face-off */
.cstv .gxtfs { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 0.6);
               padding: calc(var(--u) * 0.3) calc(var(--u) * 1.1) 0;
               border-top: 1px solid rgba(126, 150, 180, 0.14); }
.cstv .gxtf { display: flex; flex-direction: column; gap: calc(var(--u) * 0.25); align-items: flex-start; }
.cstv .gxtfh { font-size: calc(var(--u) * 1.05); font-weight: 700; display: flex; gap: calc(var(--u) * 0.35);
               align-items: center; }
.cstv .gxtfh i { width: calc(var(--u) * 0.4); height: calc(var(--u) * 1.0); }
.cstv .gxtfb { width: 100%; }
.cstv .gxtfb svg { display: block; width: 100%; height: auto; }
.cstv .gxtfn { font-size: calc(var(--u) * 0.8); color: var(--dim); }

/* ---- 7. breaking news ------------------------------------------------------ */
.cstv .gxnews { display: flex; align-items: stretch; background: rgba(8, 12, 17, 0.94);
                border: 1px solid var(--edge); font-size: calc(var(--u) * 1.15);
                box-shadow: 0 calc(var(--u) * 0.2) calc(var(--u) * 0.8) rgba(0, 0, 0, 0.35); }
.cstv .gxnews > span { display: flex; align-items: center; padding: calc(var(--u) * 0.35) calc(var(--u) * 0.8); }
.cstv .gxnk { background: #e0453a; color: #fff; font-weight: 700; letter-spacing: 0.14em;
              text-transform: uppercase; font-size: calc(var(--u) * 0.85); }
.cstv .gxnews.k-lead .gxnk { background: #d9a94f; color: #0b0f14; }
.cstv .gxnews.k-found .gxnk, .cstv .gxnews.k-fresh .gxnk { background: #3fae6a; }
.cstv .gxnews.k-record .gxnk { background: #7a5fd0; }
.cstv .gxnw { color: var(--team); font-size: calc(var(--u) * 0.9); padding-right: 0 !important; }
.cstv .gxnt { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============ BATCH 5 - from the GameScript's tables ==================== */
/* the shared ranked row: name, figure, a segmented bar, a dim line under */
.cstv .gxls { border-top: 1px solid rgba(126, 150, 180, 0.14);
              padding-top: calc(var(--u) * 0.1); }
.cstv .gxl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: calc(var(--u) * 0.1) calc(var(--u) * 0.6);
  padding: calc(var(--u) * 0.22) calc(var(--u) * 1.1);
}
.cstv .gxl + .gxl { border-top: 1px solid rgba(126, 150, 180, 0.08); }
.cstv .gxln { font-size: calc(var(--u) * 1.0); font-weight: 600;
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cstv .gxln i { display: inline-block; width: calc(var(--u) * 0.4); height: calc(var(--u) * 0.9);
                margin-right: calc(var(--u) * 0.4); vertical-align: -0.1em; }
.cstv .gxlv { font-size: calc(var(--u) * 1.0); text-align: right; white-space: nowrap; }
.cstv .gxlv b { font-weight: 700; }
.cstv .gxln .dim { color: var(--dim); font-weight: 500; }
.cstv .gxlv .dim, .cstv .gxlsub .dim { color: var(--dim); font-size: 0.8em;
                                        font-family: "Barlow Condensed", "Arial Narrow", sans-serif; }
.cstv .gxlb { grid-column: 1 / -1; display: flex; height: calc(var(--u) * 0.55);
              background: rgba(255, 255, 255, 0.06); }
.cstv .gxlb i { display: block; height: 100%; }
.cstv .gxlsub { grid-column: 1 / -1; font-size: calc(var(--u) * 0.78); color: var(--dim);
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 1. the territory map */
.cstv .gx .gxland { fill: rgba(126, 150, 180, 0.07); stroke: rgba(126, 150, 180, 0.4); stroke-width: 1; }
.cstv .gx .gxcontest { fill: none; stroke: #ffffff; stroke-width: 1.3; stroke-dasharray: 3 2.5; }
.cstv .gx .gxstn { stroke: rgba(8, 12, 17, 0.9); stroke-width: 0.7; }
/* THE TERRITORY MAP'S LAND (2026-09-12). A border is drawn ONLY where the
   holder changes, so a company's towns read as one country; the seat is the
   town itself; and an industry's ring is DOTTED rather than solid so it is
   still a separate object when it stands on land of its own colour. White
   rather than ink, because it has to read on a bright company colour AND on
   the near-black of unclaimed land. */
.cstv .gx .gxprov { stroke: rgba(223, 231, 241, 0.1); stroke-width: 0.5; }
/* the land and the water under the territory: its colours live in the picture itself (tvgfx.js MASK_LAND / MASK_SEA) */
.cstv .gx .gxunder { image-rendering: auto; pointer-events: none; }
.cstv .gx .gxborder { stroke: rgba(233, 240, 250, 0.5); stroke-width: 1.1; stroke-linecap: round; }
.cstv .gx .gxseat { stroke: rgba(8, 12, 17, 0.75); stroke-width: 0.7; }
.cstv .gx .gxind { stroke: rgba(255, 255, 255, 0.8); stroke-width: 1;
                   stroke-dasharray: 0.1 1.9; stroke-linecap: round; }
.cstv .gx .gxind0 { fill-opacity: 0.5; stroke: rgba(223, 231, 241, 0.22); stroke-width: 0.8;
                    stroke-dasharray: 0.1 1.7; stroke-linecap: round; }
.cstv .gxmleg { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 0.25) calc(var(--u) * 0.9);
                padding: calc(var(--u) * 0.3) calc(var(--u) * 1.1) 0;
                font-size: calc(var(--u) * 0.78); color: var(--dim); }
.cstv .gxmleg span { white-space: nowrap; }
.cstv .gxmleg i { display: inline-block; width: calc(var(--u) * 0.4); height: calc(var(--u) * 0.8);
                  margin-right: calc(var(--u) * 0.35); vertical-align: -0.1em; }
.cstv .gxmleg b { color: #dfe7f1; font-weight: 600; }

/* 10. battleground towns and 58. the brand battle: a two-sided bar */
.cstv .gxbts2 { border-top: 1px solid rgba(126, 150, 180, 0.14); }
.cstv .gxbt { padding: calc(var(--u) * 0.3) calc(var(--u) * 1.1); }
.cstv .gxbt + .gxbt { border-top: 1px solid rgba(126, 150, 180, 0.08); }
.cstv .gxbth, .cstv .gxbts { display: flex; justify-content: space-between; gap: calc(var(--u) * 0.6); }
.cstv .gxbtn { font-size: calc(var(--u) * 1.0); font-weight: 600; white-space: nowrap;
               overflow: hidden; text-overflow: ellipsis; }
.cstv .gxbtp { font-size: calc(var(--u) * 0.8); color: var(--dim); white-space: nowrap; }
.cstv .gxbts { font-size: calc(var(--u) * 0.8); color: var(--dim); }
.cstv .gxbts span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cstv .gxbts b { color: #dfe7f1; }
.cstv .gxsplit { display: flex; height: calc(var(--u) * 0.6); gap: 2px;
                 margin: calc(var(--u) * 0.15) 0; }
.cstv .gxsplit i { display: block; height: 100%; }
.cstv .gxsplit.big { height: calc(var(--u) * 1.3); }
.cstv .gxbb { padding: calc(var(--u) * 0.5) calc(var(--u) * 1.1) calc(var(--u) * 0.2);
              border-top: 1px solid rgba(126, 150, 180, 0.14); }
.cstv .gxbbs { display: flex; justify-content: space-between; align-items: baseline;
               gap: calc(var(--u) * 0.6); font-size: calc(var(--u) * 1.05); font-weight: 600; }
.cstv .gxbbs span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cstv .gxbbs i { display: inline-block; width: calc(var(--u) * 0.4); height: calc(var(--u) * 0.9);
                 margin-right: calc(var(--u) * 0.4); vertical-align: -0.1em; }
.cstv .gxbbs b { font-size: calc(var(--u) * 1.5); }

/* 11. awareness on one line: a 0-100% track with a dot per company */
.cstv .gxdt { grid-column: 1 / -1; position: relative; height: calc(var(--u) * 0.7);
              margin: 0 calc(var(--u) * 0.35); }
.cstv .gxdt::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px;
                      margin-top: -1px; background: rgba(223, 231, 241, 0.14); }
.cstv .gxdt b { position: absolute; top: 0; width: calc(var(--u) * 0.7); height: calc(var(--u) * 0.7);
                margin-left: calc(var(--u) * -0.35); border-radius: 50%;
                box-shadow: 0 0 0 2px rgba(8, 12, 17, 0.9); }

/* 48. the cargo grid */
.cstv .gxhm { display: grid; gap: 2px; padding: calc(var(--u) * 0.35) calc(var(--u) * 1.1) 0;
              border-top: 1px solid rgba(126, 150, 180, 0.14); align-items: center; }
.cstv .gxhmh { font-size: calc(var(--u) * 0.72); color: var(--dim); text-align: center;
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cstv .gxhmn { font-size: calc(var(--u) * 0.9); font-weight: 600; white-space: nowrap;
               overflow: hidden; text-overflow: ellipsis; }
.cstv .gxhmn i { display: inline-block; width: calc(var(--u) * 0.35); height: calc(var(--u) * 0.8);
                 margin-right: calc(var(--u) * 0.35); vertical-align: -0.1em; }
.cstv .gxhmc { font-size: calc(var(--u) * 0.8); text-align: center; color: #0b0f14;
               font-weight: 600; padding: calc(var(--u) * 0.18) 0; }

/* 43/49. text inside a chart block */
.cstv .gx .gxt.gxin { fill: #0b0f14; font-weight: 700; }
.cstv .gx .gxt.gxin.dim { fill: rgba(11, 15, 20, 0.75); font-weight: 600; }
.cstv .gx .gxtile { fill: none; stroke: rgba(8, 12, 17, 0.95); stroke-width: 2; }

/* 57/66/67. one big figure */
.cstv .gxbig { display: flex; flex-direction: column; gap: calc(var(--u) * 0.15);
               padding: calc(var(--u) * 0.5) calc(var(--u) * 1.1) calc(var(--u) * 0.2);
               border-top: 1px solid rgba(126, 150, 180, 0.14); }
.cstv .gxbig > b { font-size: calc(var(--u) * 3.0); font-weight: 600; line-height: 1; }
/* a figure inside the caption line stays caption-sized (the longest line's takings) */
.cstv .gxbig span b { font-size: 1.1em; font-weight: 600; }
.cstv .gxbig span { font-size: calc(var(--u) * 0.85); color: var(--dim); }
.cstv .gxveh.lemon .iname { color: #f8909a; }

/* 71. the reach formula */
.cstv .gxfx { display: flex; align-items: center; justify-content: space-between;
              gap: calc(var(--u) * 0.3); padding: calc(var(--u) * 0.5) calc(var(--u) * 1.1) calc(var(--u) * 0.2);
              border-top: 1px solid rgba(126, 150, 180, 0.14); }
.cstv .gxfx div { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.1); }
.cstv .gxfx b { font-size: calc(var(--u) * 1.6); font-weight: 600; line-height: 1; }
.cstv .gxfx span { font-size: calc(var(--u) * 0.72); color: var(--dim); text-align: center; }
.cstv .gxfx > i { font-style: normal; color: var(--dim); font-size: calc(var(--u) * 1.2); }

/* ============ BATCH 6 ==================================================== */
.cstv .gx .gxind { stroke: rgba(8, 12, 17, 0.85); stroke-width: 0.6; }
.cstv .gx .gxfaint { fill: rgba(223, 231, 241, 0.22); }
.cstv .gx .gxcore { fill: #fff7d6; }
.cstv .gx .gxribbon { stroke: rgba(8, 12, 17, 0.6); stroke-width: 0.6; }
.cstv .gx .gxarc { stroke: rgba(8, 12, 17, 0.9); stroke-width: 1; }
.cstv .gxnews.k-close .gxnk { background: #b4532a; }
.cstv .gxnews.k-won .gxnk { background: #2f7fd0; }

/* ============ THE ESPORTS LAYER ========================================== */
.cstv .gxai { font-size: 0.7em; font-weight: 700; letter-spacing: 0.08em; color: #0b0f14;
              background: #9fb3c8; padding: 0 0.35em; vertical-align: 0.12em; }
.cstv .gxbors { border-top: 1px solid rgba(126, 150, 180, 0.14); }
.cstv .gxbor { display: grid; grid-template-columns: calc(var(--u) * 8.5) 1fr; align-items: center;
               gap: calc(var(--u) * 0.6); padding: calc(var(--u) * 0.32) calc(var(--u) * 1.1); }
.cstv .gxbor + .gxbor { border-top: 1px solid rgba(126, 150, 180, 0.08); }
.cstv .gxbos { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 0.2); }
.cstv .gxbos > i { font-style: normal; color: var(--dim); }
.cstv .gxbo { font-size: calc(var(--u) * 0.78); background: rgba(255, 255, 255, 0.07);
              padding: calc(var(--u) * 0.08) calc(var(--u) * 0.35); white-space: nowrap; }
.cstv .gxbo b { color: #f2b134; margin-right: calc(var(--u) * 0.25); }

/* ============ BATCH 7 ==================================================== */
.cstv .gx .gxpt { stroke: rgba(8, 12, 17, 0.7); stroke-width: 0.5; }
.cstv .gx .gxband { stroke: none; }
.cstv .gx .gxnode { stroke: rgba(8, 12, 17, 0.8); stroke-width: 0.8; }
.cstv .gx .gxinc { fill: #4ade80; }
.cstv .gx .gxexp { fill: #fb7185; }
.cstv .gx .gxcell { stroke: rgba(8, 12, 17, 0.35); stroke-width: 0.5; }
.cstv .gx .gxroute { stroke-width: 1.6; stroke-opacity: 0.75; stroke-linecap: round; }
.cstv .gx .gxtld { stroke: rgba(8, 12, 17, 0.85); stroke-width: 0.6; transition: opacity 400ms linear; }
.cstv .gx .sect { padding: calc(var(--u) * 0.35) calc(var(--u) * 1.1) 0; }
/* APM against career reuses the form guide's track inside a ranked row */
.cstv .gxl .gxfot { grid-column: 1 / -1; }
.cstv .gx .gxlink { stroke-opacity: 0.8; stroke-linecap: round; }
.cstv .gx .gxspoke { stroke-opacity: 0.8; stroke-linecap: round; }
.cstv .gx .gxsat { stroke: rgba(8, 12, 17, 0.9); stroke-width: 1; }
.cstv .gx .gxhub { fill: #eaf1f9; stroke: rgba(8, 12, 17, 0.9); stroke-width: 2; }
.cstv .gx .gxland2 { }
/* 81. the delivery trace */
.cstv .gx .gxtrace { stroke-width: 3; stroke-dasharray: 7 5; stroke-linecap: round; }
.cstv .gx .gxtfrom { fill: none; stroke: #eaf1f9; stroke-width: 2; }
.cstv .gx .gxtto { stroke: #eaf1f9; stroke-width: 2; }

/* 30. the telestrator: a lock frame round the middle, a callout beside it */
.cstv .gxtele { position: relative; }
.cstv .gxtele > i { position: absolute; width: 22%; height: 26%; border: 3px solid #f2b134;
                    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.8)); }
.cstv .gxtele > i.tl { left: 0; top: 0; border-right: none; border-bottom: none; }
.cstv .gxtele > i.tr { right: 0; top: 0; border-left: none; border-bottom: none; }
.cstv .gxtele > i.bl { left: 0; bottom: 0; border-right: none; border-top: none; }
.cstv .gxtele > i.br { right: 0; bottom: 0; border-left: none; border-top: none; }
.cstv .gxtelec { position: absolute; left: calc(100% + var(--u) * 0.8); top: 0; white-space: nowrap;
                 display: flex; flex-direction: column; gap: calc(var(--u) * 0.1);
                 background: rgba(8, 12, 17, 0.88); border-left: 3px solid #f2b134;
                 padding: calc(var(--u) * 0.35) calc(var(--u) * 0.7); font-size: calc(var(--u) * 0.9); }
.cstv .gxtelec b { font-size: calc(var(--u) * 1.1); }
.cstv .gxtelek { font-size: calc(var(--u) * 0.7); letter-spacing: 0.14em; text-transform: uppercase;
                 color: #f2b134; font-weight: 700; }