/* SettleMath. Dark by default, with a light mode (Derek's design pass, Oct 21 2026). Every color is a
   token; the [data-theme="light"] block redefines them. Chart colors were checked for color-blind
   separation (teal / coral / blue / amber / violet). Derek's tracker style: grid + aurora, a line
   that draws itself, hover read-outs. */

@font-face {
  font-family: "Instrument Sans";
  src: url("/static/instrument-sans.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --night: #070b12;          /* page */
  --panel: #0d1420;          /* raised surfaces, chart surface */
  --panel-2: #111a28;
  --glass: rgba(13, 20, 32, 0.72);
  --glass-2: rgba(17, 26, 40, 0.86);
  --hair: #1c2737;           /* hairlines, grid */
  --hair-2: #2a384c;
  --ink: #e8eef6;            /* primary text, BTC line, model line */
  --ink-2: #a9b5c6;          /* secondary text */
  --ink-3: #7c899b;          /* muted text, axis labels */
  --yes: #16a08c;            /* Yes / above the strike / Up */
  --no: #e2604f;             /* No / below the strike / Down */
  --mkt: #3987e5;            /* the market's Yes price */
  --strike: #f2b544;         /* the strike line */
  --range: #ffd23f;          /* the predicted settlement range (Derek: yellow) */
  --crowd: #e879f9;          /* the crowd line: the market's own trades */
  --anticrowd: #ff922b;      /* against the crowd: 100% minus it */
  --pro: #8b7cf6;            /* Pro accents */
  --lead: #b8f84a;           /* the SettleMath model's line (Oct 28 2026): its own colour, apart from the price's blue */
  --gold: #f7c948;           /* vetted signals */
  --good: #0ca30c;           /* freshness: fresh */
  --warn: #fab219;           /* freshness: aging */
  --bad: #d03b3b;            /* freshness: stale */
  --grid-line: rgba(148, 170, 200, 0.055);
  --aurora-a: rgba(22, 160, 140, 0.30);
  --aurora-b: rgba(91, 75, 196, 0.26);
  --aurora-c: rgba(57, 135, 229, 0.14);
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.035) inset, 0 18px 40px -24px rgba(0, 0, 0, 0.75);
  --wash-yes: rgba(22, 160, 140, 0.16);
  --wash-no: rgba(226, 96, 79, 0.16);
  --final: rgba(232, 238, 246, 0.045);
  --cross: rgba(232, 238, 246, 0.35);
  --tip-bg: rgba(7, 11, 18, 0.95);
  --cta: linear-gradient(135deg, #16a08c 0%, #3987e5 52%, #8b7cf6 100%);
  --cta-ink: #fff;
  --font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 16px;
  --gutter: 16px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --night: #f4f6fb;
  --panel: #ffffff;
  --panel-2: #f0f3f9;
  --glass: rgba(255, 255, 255, 0.82);
  --glass-2: rgba(255, 255, 255, 0.94);
  --hair: #e3e8f0;
  --hair-2: #cfd7e3;
  --ink: #0f1a2b;
  --ink-2: #3b4b62;
  --ink-3: #66768d;
  --yes: #0b8a77;
  --no: #cf4a39;
  --mkt: #2b6fce;
  --strike: #c88a0c;
  --range: #e0a800;
  --crowd: #b62bc9;
  --anticrowd: #c2410c;
  --pro: #6a58e8;
  --lead: #4d8a00;
  --gold: #b07d00;
  --good: #129412;
  --warn: #c98a00;
  --bad: #c73232;
  /* text in these hues on a light background: darker, for at least 4.5:1 (Oct 21 review: 2-3:1) */
  --warn-ink: #8a5d00;
  --strike-ink: #8a5f06;
  --range-ink: #8a6500;
  --grid-line: rgba(40, 60, 100, 0.06);
  --aurora-a: rgba(22, 160, 140, 0.16);
  --aurora-b: rgba(106, 88, 232, 0.13);
  --aurora-c: rgba(43, 111, 206, 0.10);
  --shadow: 0 1px 2px rgba(15, 26, 43, 0.05), 0 14px 32px -20px rgba(15, 26, 43, 0.28);
  --wash-yes: rgba(11, 138, 119, 0.12);
  --wash-no: rgba(207, 74, 57, 0.11);
  --final: rgba(15, 26, 43, 0.045);
  --cross: rgba(15, 26, 43, 0.35);
  --tip-bg: rgba(255, 255, 255, 0.98);
  --cta-ink: #fff;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
}
a { color: var(--ink); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, canvas:focus-visible, summary:focus-visible {
  outline: 2px solid var(--mkt); outline-offset: 3px; border-radius: 6px;
}
h1, h2, p, dl, dd, ol { margin: 0; }
[hidden] { display: none !important; }
button { font: inherit; }

/* --- background: grid + aurora ------------------------------------------------------------------ */
.sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: var(--night); }
.sky::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 35%, transparent 80%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 35%, transparent 80%);
}
.sky::after {
  content: ""; position: absolute; left: -20%; right: -20%; top: -35%; height: 85%;
  background:
    radial-gradient(40% 55% at 30% 45%, var(--aurora-a), transparent 70%),
    radial-gradient(35% 50% at 68% 35%, var(--aurora-b), transparent 70%),
    radial-gradient(30% 40% at 52% 62%, var(--aurora-c), transparent 70%);
  filter: blur(30px);
  animation: aurora 60s ease-in-out infinite alternate;
}
@keyframes aurora {
  0% { transform: translate3d(-4%, 0, 0) scale(1); }
  50% { transform: translate3d(3%, 2%, 0) scale(1.06); }
  100% { transform: translate3d(5%, -1%, 0) scale(1.02); }
}

/* --- header --------------------------------------------------------------------------------------- */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap;
  max-width: 1280px; margin: 0 auto; padding: 14px var(--gutter) 8px;
}
.brand {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  font-weight: 650; font-size: 17.5px; letter-spacing: -0.015em; color: var(--ink);
}
.brand .mark-box {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: var(--cta); box-shadow: 0 6px 18px -8px rgba(57, 135, 229, 0.8);
}
.mark { width: 19px; height: 19px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.top-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.assets { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--glass); border: 1px solid var(--hair-2); }
.assets a {
  font-size: 13px; font-weight: 650; text-decoration: none; color: var(--ink-2); padding: 3px 12px; border-radius: 999px;
  letter-spacing: 0.02em;
}
.assets a[aria-current="page"], body[data-asset="btc"] .assets a[data-a="btc"], body[data-asset="eth"] .assets a[data-a="eth"] { background: var(--ink); color: var(--night); }
.view { font-size: 13px; color: var(--ink-2); text-align: right; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.view-live { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; }
.view-live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px rgba(12, 163, 12, 0.18); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(12, 163, 12, 0.05); } }
.view-free { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--warn-ink, var(--warn)); }
.view-free a { color: var(--ink); font-weight: 600; }
body[data-tier="pro"] .view-free, body[data-tier="free"] .view-live { display: none; }
.conn { color: var(--warn-ink, var(--warn)); font-weight: 600; }
.top-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.acct-link, .nav a {
  font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none;
  border: 1px solid var(--hair-2); border-radius: 999px; padding: 4px 12px; background: var(--glass);
  transition: border-color .15s, background .15s;
}
.acct-link:hover, .nav a:hover { border-color: var(--ink-3); }
.nav { display: flex; gap: 6px; flex-wrap: wrap; }
.nav a[aria-current="page"] { background: var(--ink); color: var(--night); border-color: var(--ink); }
.nav a.nav-pro { border-color: transparent; background: var(--cta); color: var(--cta-ink); }
/* Pricing, always in sight (Derek, Oct 23 2026): pinned beside the menu, never scrolled away on a phone */
.price-pill {
  flex: none; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap;
  border-radius: 999px; padding: 5px 13px; background: var(--cta); color: var(--cta-ink); border: 1px solid transparent;
  box-shadow: 0 2px 12px -4px rgba(139, 124, 246, 0.6);
}
.price-pill:hover { filter: brightness(1.08); }
.price-pill .pp-sub { font-weight: 600; opacity: 0.9; }
.price-pill.pro, body[data-tier="pro"] .price-pill { background: var(--glass); color: var(--ink); border-color: var(--hair-2); box-shadow: none; font-weight: 600; }
.price-pill[aria-current="page"] { background: var(--ink); color: var(--night); border-color: var(--ink); box-shadow: none; }
.theme-toggle {
  width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--hair-2); background: var(--glass);
  color: var(--ink); display: inline-grid; place-items: center; cursor: pointer; padding: 0;
}
.theme-toggle:hover { border-color: var(--ink-3); }
.theme-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.theme-toggle .sun, .theme-toggle .auto { display: none; }
:root[data-theme="light"] .theme-toggle .sun { display: block; }
:root[data-theme="light"] .theme-toggle .moon { display: none; }
:root[data-theme-mode="auto"] .theme-toggle .sun, :root[data-theme-mode="auto"] .theme-toggle .moon { display: none; }
:root[data-theme-mode="auto"] .theme-toggle .auto { display: block; }
.theme-toggle .auto-half { fill: currentColor; stroke: none; }

@media (max-width: 640px) {
  .top-right { width: 100%; flex-wrap: nowrap; justify-content: space-between; }
  .nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; min-width: 0; padding: 2px 0; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: none; }
  .view { flex: none; }
  .price-pill { padding: 4px 11px; }
}
@media (max-width: 420px) { .price-pill .pp-sub { display: none; } }

/* --- the free view's banner (Derek: "much more prominent", with a way to Pricing) ------------------ */
.freebar { display: none; position: sticky; top: 0; z-index: 30; padding: 8px var(--gutter) 0; }
body[data-tier="free"] .freebar { display: block; }
.freebar-in {
  max-width: 1280px; margin: 0 auto; display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  padding: 10px 12px 10px 14px; border-radius: 14px; color: var(--ink);
  background: linear-gradient(90deg, rgba(250, 178, 25, 0.16), rgba(139, 124, 246, 0.16)), var(--glass-2);
  border: 1px solid rgba(250, 178, 25, 0.55);
  box-shadow: 0 14px 30px -18px rgba(250, 178, 25, 0.55);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.freebar-badge {
  display: inline-flex; align-items: center; gap: 6px; flex: none; font-weight: 700; font-size: 13px;
  color: #1a1203; background: var(--warn); border-radius: 999px; padding: 3px 10px 3px 8px; letter-spacing: 0.01em;
}
.freebar-badge svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.freebar-copy { flex: 1 1 260px; min-width: 0; }
.freebar-text { flex: 1 1 260px; font-size: 14px; color: var(--ink-2); margin: 0; }
.freebar-text strong { color: var(--ink); }
.freebar-cta {
  flex: none; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 700; font-size: 14px;
  color: var(--cta-ink); background: var(--cta); padding: 8px 14px; border-radius: 10px;
  box-shadow: 0 10px 22px -12px rgba(57, 135, 229, 0.9); white-space: nowrap;
}
.freebar-cta:hover { filter: brightness(1.07); }
.freebar.closed-for-pro .freebar-in { border-color: rgba(226, 96, 79, 0.7); box-shadow: 0 14px 30px -18px rgba(226, 96, 79, 0.7); }
@media (max-width: 560px) {
  .freebar-long { display: none; }
  .freebar-in { padding: 8px 10px; gap: 8px; }
  /* the button wraps to its own full-width line instead of running off the screen (Nov 1 2026) */
  .freebar-cta { padding: 8px 11px; font-size: 13.5px; flex: 1 1 100%; justify-content: center; white-space: normal;
                 text-align: center; min-width: 0; }
}

/* --- layout -------------------------------------------------------------------------------------- */
.board {
  max-width: 1280px; margin: 0 auto; padding: 10px var(--gutter) 28px;
  display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr);
}
.paused, .waiting {
  padding: 14px 16px; border: 1px solid var(--hair-2); border-radius: var(--radius);
  background: var(--panel); color: var(--ink);
}
body.is-paused .board > section, body.is-paused .board > .side, body.is-paused .rest > section { display: none; }

h2 { font-size: 15px; font-weight: 650; color: var(--ink); line-height: 1.3; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; letter-spacing: -0.005em; }
.kicker { font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-3); }
.label { font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.note, .sub { font-size: 13px; color: var(--ink-3); }
.line { font-size: 15px; color: var(--ink-2); margin-top: 6px; }
.line.sub { margin-top: 4px; font-size: 13px; color: var(--ink-3); }
.num, .big, .clock-num, .ladder, .track-scale, .feed, .ind-table { font-variant-numeric: tabular-nums; }
.num { font-weight: 600; font-stretch: 88%; font-size: 24px; color: var(--ink); letter-spacing: -0.01em; }
.big { font-weight: 650; font-stretch: 82%; font-size: 40px; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); }
.card-surface, .instrument, .chart-panel, .side-card, .panel {
  background: var(--glass); border: 1px solid var(--hair-2); border-radius: var(--radius); box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}

/* freshness badge: dot + age; the free view shows it only when a feed itself is stale */
.age {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: var(--ink-3);
  padding: 1px 7px 1px 6px; border-radius: 999px; border: 1px solid var(--hair-2); line-height: 1.5;
}
.age::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
.age.fresh::before { background: var(--good); }
.age.aging::before { background: var(--warn); }
.age.aging { color: var(--ink-2); }
.age.stale::before { background: var(--bad); }
.age.stale { color: var(--ink); border-color: rgba(208, 59, 59, 0.6); }
.age:empty { display: none; }
body[data-tier="free"] .age:not(.stale) { display: none; }
.stale-value { opacity: 0.55; }

/* --- situation: the window, the clock, where BTC is -------------------------------------------------- */
.situation { padding: 6px 2px 2px; }
.prev { font-size: 13px; color: var(--ink-2); margin-bottom: 10px; max-width: 64ch; }
.prev .pill { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); margin: 0 4px; }
.prev .pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.prev .pill.yes::before { background: var(--yes); }
.prev .pill.no::before { background: var(--no); }
.situation h1 { font-size: 17px; font-weight: 500; color: var(--ink-2); letter-spacing: 0; }
.situation h1 .range { color: var(--ink); font-weight: 650; white-space: nowrap; }
.clock { display: flex; align-items: baseline; gap: 10px; margin: 2px 0 14px; flex-wrap: wrap; }
.clock-num { font-size: 64px; font-weight: 650; font-stretch: 78%; letter-spacing: -0.035em; line-height: 1; color: var(--ink); }
.clock-unit { font-size: 17px; color: var(--ink-3); }
.clock.final .clock-num { color: var(--strike-ink, var(--strike)); text-shadow: 0 0 28px rgba(242, 181, 68, 0.35); }
.delay-chip {
  display: none; align-self: center; font-size: 12.5px; font-weight: 700; color: var(--warn-ink, var(--warn));
  border: 1px solid rgba(250, 178, 25, 0.55); border-radius: 999px; padding: 2px 10px; text-decoration: none;
}
body[data-tier="free"] .delay-chip { display: inline-flex; }
.is-closed .clock-num, .is-closed .track { opacity: 0.55; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 18px; }
.fact dt { font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 22px; }
.fact dd { display: flex; flex-direction: column; }
.fact .note { margin-top: 1px; }
.dir.up { color: var(--ink); }
.dir::before { content: ""; display: inline-block; width: 0; height: 0; margin-right: 6px; vertical-align: 3px; border-left: 6px solid transparent; border-right: 6px solid transparent; }
.dir.up::before { border-bottom: 9px solid var(--yes); }
.dir.down::before { border-top: 9px solid var(--no); }

/* --- the instrument: gauge + settlement tape -------------------------------------------------------- */
.instrument { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.gauge, .tape { padding: 16px; min-width: 0; }
.tape { border-top: 1px solid var(--hair); }
.readouts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0 14px; }
.key { display: inline-block; width: 14px; height: 0; border-top: 2px solid; border-radius: 2px; }
.key-model { border-color: var(--ink); }
.key-mkt { border-color: var(--mkt); }
.track { position: relative; height: 44px; margin: 4px 6px 0; }
.track-rail { position: absolute; left: 0; right: 0; top: 14px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--no), var(--hair-2) 45%, var(--hair-2) 55%, var(--yes)); opacity: 0.55; }
.track-gap { position: absolute; top: 12px; height: 7px; border-radius: 4px; background: var(--cross); opacity: 0.45; display: none; }
.track-mark { position: absolute; top: 15px; width: 14px; height: 14px; margin: -7px 0 0 -7px; display: none; transition: left 0.35s ease-out; }
.mark-mkt { border-radius: 50%; background: var(--mkt); box-shadow: 0 0 0 2px var(--panel), 0 0 14px rgba(57, 135, 229, 0.6); }
.mark-model { background: var(--ink); transform: rotate(45deg) scale(0.86); box-shadow: 0 0 0 2px var(--panel); }
/* the SettleMath model (Oct 28 2026): its own colour; its number turns to the side it leans when 3+ points off the price */
.key-lead { border-color: var(--lead); border-top-width: 3px; box-shadow: 0 0 8px color-mix(in srgb, var(--lead) 70%, transparent); }
.mark-lead { background: var(--lead); transform: rotate(45deg) scale(0.86); box-shadow: 0 0 0 2px var(--panel), 0 0 14px color-mix(in srgb, var(--lead) 70%, transparent); }
.track-gap.yes { background: var(--yes); opacity: 0.55; }
.track-gap.no { background: var(--no); opacity: 0.55; }
.model-lead { position: relative; padding: 10px 12px; margin: -10px 0 0 -12px; border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--lead) 11%, transparent), transparent 70%);
  border: 1px solid color-mix(in srgb, var(--lead) 30%, transparent); }
.model-lead .label { color: var(--ink); font-weight: 650; }
.model-lead .big.yes { color: var(--yes); }
.model-lead .big.no { color: var(--no); }
.model-lead .big.even { color: var(--ink); }
.edge-call { margin: 10px 0 0; padding: 9px 12px; border-radius: 10px; font-size: 15px; font-weight: 700; letter-spacing: 0.005em;
  border: 1px solid var(--hair-2); color: var(--ink-2); }
.edge-call:empty { display: none; }
.edge-call.yes { color: var(--yes); border-color: color-mix(in srgb, var(--yes) 55%, transparent); background: var(--wash-yes); }
.edge-call.no { color: var(--no); border-color: color-mix(in srgb, var(--no) 55%, transparent); background: var(--wash-no); }
.edge-call.strong { box-shadow: 0 0 22px -6px currentColor; }
.edge-call.none { font-weight: 600; font-size: 14px; }
body[data-asset="eth"] h2 .eth-only { display: inline; }
body[data-asset="eth"] .readouts { grid-template-columns: 1fr; }
.track-scale { position: absolute; left: 0; right: 0; top: 24px; display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); }
.track-scale span { width: 0; display: flex; justify-content: center; }
.gauge .line { margin-top: 8px; }
.tape-status { margin-top: 8px; color: var(--ink-2); }
.tape-svg { display: block; width: 100%; height: 118px; margin-top: 12px; overflow: visible; }
.tape-legend { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); margin-top: 4px; }
.tape-legend #t-k { color: var(--ink-2); }
.why-link { display: inline-flex; gap: 6px; align-items: center; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--ink); }

/* --- chart -------------------------------------------------------------------------------------- */
.chart-panel { padding: 14px 14px 10px; min-width: 0; display: flex; flex-direction: column; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.layers { display: flex; gap: 6px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.layer {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  border: 1px solid var(--hair-2); background: transparent; border-radius: 999px; padding: 3px 10px 3px 8px; cursor: pointer;
}
.layer[aria-pressed="true"] { color: var(--ink); background: var(--panel-2); border-color: var(--ink-3); }
.layer[aria-pressed="false"] .lk { opacity: 0.35; }
.layer:disabled { cursor: default; opacity: 0.6; }
.layer[aria-disabled="true"] { opacity: 0.7; }
.layer-teaser { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; font-size: 13.5px; color: var(--ink-2);
  background: rgba(139, 124, 246, 0.1); border: 1px solid rgba(139, 124, 246, 0.35);
  background: color-mix(in srgb, var(--pro) 10%, transparent); border: 1px solid color-mix(in srgb, var(--pro) 35%, transparent); }
.layer-teaser a { color: var(--ink); font-weight: 600; }
.layer .lock { width: 10px; height: 12px; margin: 0; }
.lk { display: inline-block; width: 14px; height: 0; border-top: 2px solid; border-radius: 2px; }
.lk-btc { border-color: var(--ink); }
.lk-strike { border-color: var(--strike); border-top-width: 1.5px; }
.lk-mkt { border-color: var(--mkt); }
.lk-model { border-color: var(--ink); border-top-style: dashed; }
.lk-lead { border-color: var(--lead); border-top-width: 3px; }
.lk-range { border-color: var(--range); border-top-width: 6px; border-radius: 3px; width: 8px; }
.lk-sig { border-color: var(--pro); border-top-style: dotted; width: 2px; height: 12px; border-top: 0; border-left: 2px dashed var(--pro); }
.lk-whale { width: 0; height: 0; border-top: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid var(--yes); }
.chart-box { position: relative; margin-top: 10px; height: 400px; }
#chart { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: crosshair; }
.chart-foot { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); margin-top: 6px; }
.tip {
  position: absolute; top: 6px; pointer-events: none; min-width: 168px; z-index: 5;
  background: var(--tip-bg); border: 1px solid var(--hair-2); border-radius: 10px;
  padding: 8px 10px; font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.tip .t-time { color: var(--ink-3); margin-bottom: 4px; }
.tip .t-row { display: flex; align-items: center; gap: 7px; justify-content: space-between; }
.tip .t-row b { color: var(--ink); font-weight: 600; }
.tip .t-key { display: inline-flex; align-items: center; gap: 6px; }
.tip .t-key::before { content: ""; width: 12px; height: 0; border-top: 2px solid var(--c, var(--ink)); }
.tip .t-event { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--hair); color: var(--ink); }

/* --- the column beside the chart -------------------------------------------------------------------- */
.side { display: grid; gap: 14px; align-content: start; min-width: 0; }
.rest { display: contents; }
.side-card { padding: 14px 16px; min-width: 0; }
.side-card h2 { font-size: 14.5px; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.swatch-range { background: var(--range); box-shadow: 0 0 10px rgba(255, 210, 63, 0.6); }
.range-card .big { font-size: 32px; margin-top: 8px; }
.range-scale { position: relative; height: 34px; margin: 14px 4px 4px; }
.range-scale .rail { position: absolute; left: 0; right: 0; top: 14px; height: 2px; background: var(--hair-2); border-radius: 2px; }
.range-scale .r90 { position: absolute; top: 9px; height: 12px; border-radius: 6px; background: var(--range); opacity: 0.35; }
.range-scale .r50 { position: absolute; top: 9px; height: 12px; border-radius: 6px; background: var(--range); opacity: 0.9; }
.range-scale .re { position: absolute; top: 5px; width: 2px; height: 20px; margin-left: -1px; background: var(--ink); border-radius: 1px; }
.range-scale .rk { position: absolute; top: 2px; width: 0; height: 26px; margin-left: -1px; border-left: 2px dashed var(--strike); }
.range-scale .rk::after { content: "strike"; position: absolute; top: 24px; left: -16px; font-size: 10.5px; color: var(--strike-ink, var(--strike)); }
.range-lines { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.range-lines dt { font-size: 12px; color: var(--ink-3); }
.range-lines dd { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; font-size: 14px; }
.feed { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; max-height: 236px; overflow-y: auto; }
.feed li {
  display: grid; grid-template-columns: auto 1fr auto; gap: 2px 10px; align-items: center; padding: 7px 9px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--hair); font-size: 13px; animation: slidein .35s ease-out;
}
@keyframes slidein { from { opacity: 0; transform: translateY(-4px); } }
.feed .ic { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; }
.feed .ic.b, .feed .ic.yes { background: var(--yes); }
.feed .ic.s, .feed .ic.no { background: var(--no); }
.feed .ic svg { width: 12px; height: 12px; fill: #fff; }
.feed .what { color: var(--ink); font-weight: 600; min-width: 0; }
.feed .what small { display: block; font-weight: 400; color: var(--ink-3); font-size: 12px; }
.feed .when { color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.feed .empty { display: block; background: transparent; border-style: dashed; color: var(--ink-3); grid-template-columns: 1fr; }

/* --- readout panels -------------------------------------------------------------------------------- */
.panel { padding: 14px 16px; min-width: 0; }
.panel .big { margin-top: 8px; font-size: 36px; }
.lockable .locked-note { display: none; }
body[data-tier="free"] .lockable .content { display: none; }
body[data-tier="free"] .lockable .locked-note { display: flex; gap: 10px; margin-top: 10px; color: var(--ink-2); font-size: 14px; align-items: flex-start; }
.locked-note a { font-weight: 650; }
body[data-tier="free"] .pro-only { display: none; }
body[data-tier="pro"] .free-only { display: none; }
/* Pro-only numbers in the free view (Derek, Oct 20): a blurred placeholder; the real number is never sent */
.blurred { filter: blur(0.22em); color: var(--ink); user-select: none; pointer-events: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pro-tag, body[data-tier="free"] .blur-pro h2::after, body[data-tier="free"] .lockable h2::after {
  content: "Pro"; font-size: 11px; font-weight: 700; color: #fff; letter-spacing: 0.03em;
  background: var(--cta); border-radius: 999px; padding: 1px 8px; line-height: 1.6;
}
.lock { flex: none; width: 14px; height: 16px; margin-top: 2px; position: relative; display: inline-block; }
.lock::before { content: ""; position: absolute; left: 1px; right: 1px; bottom: 0; height: 9px; border-radius: 2px; background: var(--ink-3); }
.lock::after { content: ""; position: absolute; left: 3px; right: 3px; top: 0; height: 9px; border: 2px solid var(--ink-3); border-bottom: 0; border-radius: 6px 6px 0 0; }

.ladder { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 10px; }
.side-title { font-size: 12.5px; color: var(--ink-3); margin-bottom: 4px; }
.ladder ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 3px; }
.ladder li { position: relative; display: flex; justify-content: space-between; font-size: 13.5px; padding: 2px 6px; border-radius: 4px; z-index: 0; }
.ladder li::before { content: ""; position: absolute; top: 0; bottom: 0; width: var(--w, 0%); border-radius: 4px; z-index: -1; opacity: 0.22; }
.bids li::before { right: 0; background: var(--yes); }
.asks li::before { left: 0; background: var(--no); }
.ladder .px { color: var(--ink); font-weight: 600; }
.ladder .sz { color: var(--ink-2); }

/* indicators (Pro) */
.ind-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13.5px; }
.ind-table th { text-align: left; font-weight: 500; color: var(--ink-2); padding: 4px 0; }
.ind-table td { text-align: right; color: var(--ink); font-weight: 600; padding: 4px 0 4px 10px; white-space: nowrap; }
.ind-table tr + tr th, .ind-table tr + tr td { border-top: 1px solid var(--hair); }
.vote { display: inline-block; width: 0; height: 0; margin-left: 8px; vertical-align: 2px; }
.vote.up { border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid var(--yes); }
.vote.down { border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid var(--no); }
.vote.flat { width: 8px; height: 2px; background: var(--ink-3); vertical-align: 3px; }
.ind-table td.pts { color: var(--ink-3); font-weight: 600; width: 3.2em; }
.ind-table td.pts.up { color: var(--yes); }
.ind-table td.pts.down { color: var(--no); }
.ind-table thead th { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); padding-bottom: 6px; }
.ind-table thead th.r { text-align: right; padding-left: 12px; }
/* the strength meter: -100 (all Down) to +100 (all Up), the signal level marked both ways */
.strength-meter { margin-top: 12px; }
.sm-track { position: relative; height: 12px; border-radius: 6px; background: var(--hair-2); overflow: hidden; }
.sm-fill { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; border-radius: 6px; background: var(--yes);
  transition: left 0.35s ease, width 0.35s ease, background-color 0.35s ease; }
.sm-fill.down { background: var(--no); }
.sm-mid { position: absolute; top: -2px; bottom: -2px; left: 50%; width: 2px; margin-left: -1px; background: var(--ink-3); }
.sm-th { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ink); opacity: 0.55; }
.sm-scale { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-3); margin-top: 4px; }
.big-strength { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; margin: 6px 0 0; }
.big-strength.up { color: var(--yes); }
.big-strength.down { color: var(--no); }
.big-strength small { font-size: 14px; font-weight: 600; color: var(--ink-2); margin-left: 6px; letter-spacing: 0; }
/* the crowd card */
.swatch-crowd { background: var(--crowd); }
.lk-crowd { border-color: var(--crowd); border-top-style: dotted; }
.lk-anticrowd { border-color: var(--anticrowd); border-top-style: dotted; }
canvas.spark { display: block; width: 100%; height: 70px; margin-top: 8px; }

/* the member's own signals (Pro) */
.rules { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.rules li { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--hair); }
.rules .dotc { width: 12px; height: 12px; border-radius: 50%; }
.rules .rname { font-weight: 650; color: var(--ink); font-size: 13.5px; min-width: 0; }
.rules .rdesc { grid-column: 2 / -1; color: var(--ink-3); font-size: 12.5px; }
.rules .rrec { grid-column: 2 / -1; color: var(--ink-2); font-size: 12.5px; }
.rules .ract { display: flex; gap: 4px; flex-wrap: wrap; grid-column: 2 / -1; }   /* under the name (Oct 23 2026) */
.rules li .rname { grid-column: 2 / -1; overflow-wrap: anywhere; }
.mini-btn { font-size: 12px; font-weight: 600; color: var(--ink-2); border: 1px solid var(--hair-2); background: transparent; border-radius: 8px; padding: 2px 8px; cursor: pointer; }
.mini-btn:hover { color: var(--ink); border-color: var(--ink-3); }
.doc-article button.mini-btn:not(.added):hover, .doc-article button.mini-btn:not(.added):focus { color: var(--night); border-color: var(--ink); }   /* on a light button a tap left the text the button's own color (Derek, Oct 25) */
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 650; font-size: 14px; cursor: pointer;
  color: var(--cta-ink); background: var(--cta); border: 0; border-radius: 10px; padding: 9px 14px; text-decoration: none;
}
.btn.ghost { color: var(--ink); background: transparent; border: 1px solid var(--hair-2); }
.btn.btn-sm { font-size: 13px; padding: 6px 11px; }
dialog.builder {
  width: min(560px, calc(100vw - 24px)); border: 1px solid var(--hair-2); border-radius: 18px; padding: 0;
  background: var(--panel); color: var(--ink); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
}
dialog.builder::backdrop { background: rgba(4, 7, 12, 0.6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.builder form { padding: 18px; display: grid; gap: 12px; }
.builder h2 { font-size: 18px; }
.builder label { font-size: 12.5px; color: var(--ink-2); display: grid; gap: 4px; }
.builder input, .builder select {
  font: inherit; font-size: 14px; color: var(--ink); background: var(--panel-2); border: 1px solid var(--hair-2); border-radius: 9px; padding: 8px 10px; min-width: 0;
}
.builder .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.conds { display: grid; gap: 8px; }
.cond { display: grid; grid-template-columns: minmax(0, 2.2fr) 70px minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.builder .add-cond { margin-top: 8px; justify-self: start; }
.builder label.check { display: flex; gap: 8px; align-items: center; color: var(--ink); font-size: 14px; }
.builder .hint { font-size: 12.5px; color: var(--ink-3); }
.builder .err { color: var(--no); font-size: 13px; min-height: 1em; }
.colors { display: flex; gap: 6px; }
.colors input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.colors label { width: 24px; height: 24px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; display: block; }
.colors input:checked + label { border-color: var(--ink); box-shadow: 0 0 0 2px var(--panel) inset; }
.colors input:focus-visible + label { outline: 2px solid var(--mkt); outline-offset: 2px; }

/* the explainer and the Telegram card */
.explain .tape-demo { display: grid; grid-template-columns: repeat(60, 1fr); gap: 2px; height: 34px; align-items: end; margin: 12px 0 6px; }
.explain .tape-demo i { display: block; border-radius: 2px; background: var(--yes); opacity: 0.85; }
.explain .tape-demo i.fut { background: var(--hair-2); opacity: 1; }
.explain ol { margin: 8px 0 0; padding-left: 18px; color: var(--ink-2); font-size: 14px; }
.explain li { margin-top: 4px; }
.tg-card .tg-logo { width: 28px; height: 28px; border-radius: 50%; background: #229ed9; display: grid; place-items: center; flex: none; }
.tg-card .tg-logo svg { width: 15px; height: 15px; fill: #fff; }

/* --- session ------------------------------------------------------------------------------------------ */
.session { padding: 14px 16px; }
.session-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 10px; }
.dots { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--ink-3); display: block; }
.dots i.yes { background: var(--yes); }
.dots i.no { background: var(--no); }
.dots i.flip { box-shadow: 0 0 0 2px var(--night), 0 0 0 3.5px var(--ink); }
.dots-key { display: inline-flex; gap: 6px; align-items: center; color: var(--ink-3); font-size: 12px; }
.dk { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-left: 4px; }
.dk-yes { background: var(--yes); }
.dk-no { background: var(--no); }
.dk-flip { background: transparent; box-shadow: 0 0 0 1.5px var(--ink); }
.model-note { font-size: 12.5px; color: var(--ink-3); }
.model-note a { color: var(--ink-2); }

/* --- footer ----------------------------------------------------------------------------------------- */
.foot { max-width: 1280px; margin: 0 auto; padding: 12px var(--gutter) 40px; color: var(--ink-3); font-size: 12.5px; line-height: 1.55; }
.foot p { max-width: 80ch; }
.foot .small { margin-top: 8px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 10px; }
.foot-links a { color: var(--ink-2); font-size: 13px; }
.noscript { text-align: center; padding: 20px; color: var(--ink); }

/* --- wider screens -------------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .session-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .chart-box { height: 460px; }
}
@media (min-width: 1000px) {
  :root { --gutter: 24px; }
  /* computers (Derek, Oct 23 2026: "a lot of stuff is long"): the side column runs down beside the chart and the cards
     under it, instead of one tall row stretching the chart and leaving cards half empty. The cards under the chart sit
     in two balanced columns (.rest) and nothing stretches to match a neighbour. */
  .board {
    grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px 20px;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
      "sit sit sit sit sit ins ins ins ins ins ins ins"
      "cha cha cha cha cha cha cha cha sid sid sid sid"
      "rst rst rst rst rst rst rst rst sid sid sid sid"
      "ses ses ses ses ses ses ses ses ses ses ses ses";
  }
  .rest { grid-area: rst; align-self: start; display: block; columns: 2; column-gap: 20px; }
  .rest > * { break-inside: avoid; margin: 0 0 18px; }
  .rest > [hidden] { display: none; }
  .rest > .ind { column-span: all; }
  .paused, .waiting { grid-column: 1 / -1; }
  .situation { grid-area: sit; padding-top: 18px; }
  .instrument { grid-area: ins; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tape { border-top: 0; border-left: 1px solid var(--hair); }
  .chart-panel { grid-area: cha; align-self: start; }
  .chart-box { flex: none; height: 560px; }
  .side { grid-area: sid; align-self: start; }
  .session { grid-area: ses; }
  .facts { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .fact { display: grid; grid-template-columns: 120px 1fr; align-items: baseline; }
  .clock-num { font-size: 84px; }
}
body[data-asset="eth"] .btc-only { display: none !important; }
.eth-only { display: none; }
body[data-asset="eth"] .eth-only { display: block; }
@media (max-width: 420px) {
  .facts { grid-template-columns: 1fr 1fr; }
  .facts .fact:last-child { grid-column: 1 / -1; }
  .big { font-size: 34px; }
  .clock-num { font-size: 58px; }
  .chart-box { height: 360px; }
  .cond { grid-template-columns: 1fr 64px 1fr; }
  .cond .mini-btn { grid-column: 1 / -1; justify-self: start; }
}

/* --- the unlock page -------------------------------------------------------------------------------- */
.unlock { max-width: 420px; margin: 12vh auto 0; padding: 0 var(--gutter); display: grid; gap: 14px; }
.unlock h1 { font-size: 28px; font-weight: 600; font-stretch: 88%; }
.unlock p { color: var(--ink-2); }
.unlock form { display: grid; gap: 8px; margin-top: 6px; }
.unlock label { font-size: 13px; color: var(--ink-2); }
.unlock input { font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--hair-2); border-radius: 10px; padding: 11px 12px; }
.unlock button { font: inherit; font-weight: 600; color: var(--night); background: var(--ink); border: 0; border-radius: 10px; padding: 11px 14px; cursor: pointer; }
.unlock .message { color: var(--warn-ink, var(--warn)); min-height: 1.5em; }
.unlock .small { font-size: 13px; }

/* --- the pages around the Live page: pricing, account, sign-in, legal, FAQ, Telegram ---------------- */
.doc-main { max-width: 1280px; margin: 0 auto; padding: 8px var(--gutter) 28px; }
.doc-article { max-width: 760px; margin: 18px auto 0; }
.doc-article.wide { max-width: 1040px; }
.doc-article.narrow { max-width: 460px; }
.doc-article h1 { font-size: 32px; font-weight: 650; font-stretch: 88%; letter-spacing: -0.015em; line-height: 1.12; }
.doc-article h2 { font-size: 17px; margin-top: 26px; }
.doc-article p, .doc-article ul, .doc-article ol { margin-top: 10px; color: var(--ink-2); }
.doc-article ul, .doc-article ol { padding-left: 20px; }
.doc-article li { margin-top: 6px; }
.doc-article li strong, .doc-article p strong { color: var(--ink); font-weight: 650; }
.doc-article .lede { font-size: 17.5px; color: var(--ink); line-height: 1.55; }
.doc-article a { color: var(--ink); }
.legal h2 { border-top: 1px solid var(--hair); padding-top: 16px; }
.muted { color: var(--ink-3); }
.small { font-size: 13px; color: var(--ink-3); }
code { font-size: 0.92em; color: var(--ink); background: var(--panel-2); border: 1px solid var(--hair); border-radius: 5px; padding: 0 5px; }
.notice { padding: 12px 14px; border: 1px solid var(--hair-2); border-radius: 12px; background: var(--panel); color: var(--ink); }
.notice.warn { border-color: rgba(250, 178, 25, 0.55); }
.notice.good { border-color: rgba(22, 160, 140, 0.55); }
.compare { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 18px; }
.compare section { border: 1px solid var(--hair); border-radius: var(--radius); padding: 14px 16px; background: var(--glass); }
.compare h2 { margin-top: 0; }
.plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 18px; }
.plan {
  position: relative; border: 1px solid var(--hair-2); border-radius: 20px; padding: 22px;
  background: var(--glass-2); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 4px;
}
.plan.featured { border: 1px solid transparent; background: linear-gradient(var(--glass-2), var(--glass-2)) padding-box, var(--cta) border-box; }
.plan .ribbon {
  position: absolute; top: -12px; right: 18px; font-size: 12px; font-weight: 700; color: var(--cta-ink);
  background: var(--cta); border-radius: 999px; padding: 3px 11px; letter-spacing: 0.02em;
}
.plan h2 { margin-top: 0; font-size: 18px; }
.plan .price { font-size: 44px; font-weight: 700; font-stretch: 82%; color: var(--ink); letter-spacing: -0.025em; font-variant-numeric: tabular-nums; margin-top: 6px; }
.plan .price .per { font-size: 15px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.plan .price .was { font-size: 20px; color: var(--ink-3); text-decoration: line-through; margin-right: 4px; }
.plan .save { font-size: 13px; font-weight: 650; color: var(--yes); }
.plan ul.ticks { list-style: none; padding: 0; margin: 10px 0 0; }
.plan form, .plan .button { margin-top: 14px; }
.plan form button, .plan .button { width: 100%; }
ul.ticks li, .ticks li { position: relative; padding-left: 24px; }
ul.ticks li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 12px; height: 7px; border-left: 2px solid var(--yes); border-bottom: 2px solid var(--yes); transform: rotate(-45deg); }
.hero {
  position: relative; text-align: center; padding: 34px 18px 26px; border-radius: 24px; margin-top: 8px;
  background: radial-gradient(60% 90% at 50% 0%, rgba(139, 124, 246, 0.22), transparent 70%), radial-gradient(50% 80% at 10% 100%, rgba(22, 160, 140, 0.18), transparent 70%);
  border: 1px solid var(--hair);
}
.hero h1 { font-size: 40px; }
.hero .lede { max-width: 640px; margin: 12px auto 0; }
.hero-pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.hero-pills span { font-size: 13px; font-weight: 600; color: var(--ink-2); border: 1px solid var(--hair-2); border-radius: 999px; padding: 4px 12px; background: var(--glass); }
.feature-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 14px; }
.feature-table th, .feature-table td { padding: 10px 12px; border-bottom: 1px solid var(--hair); text-align: left; vertical-align: top; }
.feature-table thead th { font-size: 13px; color: var(--ink-3); font-weight: 650; }
.feature-table td.c { text-align: center; width: 92px; color: var(--ink-2); }
.feature-table td.c .yes-mark { color: var(--yes); font-weight: 800; }
.feature-table td.c .pro-mark { display: inline-block; width: 18px; height: 18px; border-radius: 50%; background: var(--cta); color: #fff; font-size: 11px; line-height: 18px; font-weight: 800; }
.feature-table th[scope="row"] { color: var(--ink); font-weight: 600; }
.feature-table th[scope="row"] small { display: block; color: var(--ink-3); font-weight: 400; font-size: 12.5px; margin-top: 2px; }
.trust { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; margin-top: 18px; color: var(--ink-2); font-size: 13.5px; }
.trust span { display: inline-flex; align-items: center; gap: 7px; }
.trust svg { width: 16px; height: 16px; fill: none; stroke: var(--yes); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.secure-box { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(22, 160, 140, 0.45); background: var(--glass); }
.secure-box svg { flex: none; width: 26px; height: 26px; fill: none; stroke: var(--yes); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.secure-box p { margin: 0 !important; }
.secure-box p + p { margin-top: 4px !important; }
.button, .doc-article button, .clerk-box button.sm {
  display: inline-flex; align-items: center; justify-content: center; font: inherit; font-weight: 650; color: var(--night); background: var(--ink); border: 1px solid var(--ink);
  border-radius: 11px; padding: 10px 16px; cursor: pointer; text-decoration: none; text-align: center;
}
.doc-article a.button { color: var(--night); }
.button.cta, .doc-article button.cta { background: var(--cta); color: var(--cta-ink); border-color: transparent; box-shadow: 0 12px 24px -14px rgba(57, 135, 229, 0.9); }
.doc-article a.button.cta { color: var(--cta-ink); }
.button.ghost, .doc-article button.ghost { background: transparent; color: var(--ink); border-color: var(--hair-2); }
.doc-article a.button.ghost { color: var(--ink); }
.doc-article button.danger { background: transparent; color: var(--no); border-color: rgba(226, 96, 79, 0.6); }
.doc-article button:disabled { opacity: 0.45; cursor: default; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.actions form { margin: 0; }
.status { font-size: 18px; font-weight: 650; color: var(--ink) !important; }
.status.ok::before, .status.warn::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.status.ok::before { background: var(--good); }
.status.warn::before { background: var(--warn); }
.plan-state, .test-clock { border: 1px solid var(--hair); border-radius: var(--radius); padding: 14px 16px; margin-top: 18px; background: var(--glass); }
.plan-state h2, .test-clock h2 { margin-top: 0; }
.test-clock { border-style: dashed; border-color: rgba(250, 178, 25, 0.45); }
.clock-buttons { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.delete-form { display: grid; gap: 8px; max-width: 320px; margin-top: 10px; }
.delete-form label { font-size: 13px; color: var(--ink-2); }
.delete-form input { font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--hair-2); border-radius: 10px; padding: 10px 12px; }
.clerk-box { min-height: 220px; margin-top: 16px; display: flex; justify-content: center; }
.clerk-box > p { align-self: center; }
time { white-space: nowrap; }
.faq details { border: 1px solid var(--hair); border-radius: 14px; background: var(--glass); margin-top: 10px; padding: 0 16px; }
.faq details[open] { border-color: var(--hair-2); }
.faq summary { cursor: pointer; list-style: none; padding: 14px 26px 14px 0; font-weight: 650; color: var(--ink); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 2px; top: 11px; font-size: 20px; color: var(--ink-3); font-weight: 400; }
.faq details[open] summary::after { content: "−"; }
.faq details > div { padding-bottom: 14px; }
.faq details p:first-child { margin-top: 0; }
.faq h2 { margin-top: 30px; }
.cta-band { margin-top: 28px; padding: 20px; border-radius: 18px; text-align: center; border: 1px solid var(--hair-2);
  background: linear-gradient(135deg, rgba(22, 160, 140, 0.14), rgba(139, 124, 246, 0.16)); }
.cta-band p { margin: 0 0 12px !important; color: var(--ink) !important; font-weight: 600; }
.steps { counter-reset: s; list-style: none; padding: 0 !important; }
.steps > li { counter-increment: s; position: relative; padding: 12px 14px 12px 50px; border: 1px solid var(--hair); border-radius: 14px; background: var(--glass); margin-top: 10px; }
.steps > li::before { content: counter(s); position: absolute; left: 14px; top: 12px; width: 24px; height: 24px; border-radius: 50%; background: var(--cta); color: #fff; font-weight: 700; font-size: 13px; display: grid; place-items: center; }
@media (min-width: 640px) {
  .compare { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .plans { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .hero h1 { font-size: 30px; }
  .feature-table td.c { width: 58px; padding: 10px 6px; }
}

/* --- Accuracy and Stats pages (build step 3) --------------------------------------------------------- */
.records h2 { margin-top: 30px; }
.records .data + .small, .records .table-scroll + .small { margin-top: 8px; }
.live-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 650; color: var(--ink-2); border: 1px solid var(--hair-2); border-radius: 999px; padding: 2px 10px; }
.live-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--good); animation: pulse 2s ease-in-out infinite; }
.live-pill.flash { border-color: var(--good); color: var(--ink); }
.update-banner { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(139, 124, 246, 0.45); background: var(--glass); }
.update-banner .tag { flex: none; font-size: 11.5px; font-weight: 700; color: #fff; background: var(--pro); border-radius: 999px; padding: 2px 9px; margin-top: 1px; }
.update-banner p { margin: 0 !important; color: var(--ink-2); font-size: 14px; }
.update-banner strong { color: var(--ink); }
.toast { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 60; background: var(--tip-bg); color: var(--ink); border: 1px solid var(--hair-2); border-radius: 12px; padding: 10px 14px; font-size: 14px; box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.5); max-width: calc(100vw - 24px); }
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 18px; }
.card { border: 1px solid var(--hair-2); border-radius: var(--radius); padding: 14px 16px; background: var(--glass-2); box-shadow: var(--shadow); }
.card h2 { margin-top: 0 !important; font-size: 14px; color: var(--ink-2); font-weight: 600; }
.card .big-num { margin-top: 6px; font-size: 34px; font-weight: 650; font-stretch: 82%; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.card .small { margin-top: 6px; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 12px; border: 1px solid var(--hair); border-radius: 12px; background: var(--glass); }
table.data { border-collapse: collapse; width: 100%; font-size: 14px; font-variant-numeric: tabular-nums; }
table.data caption { caption-side: top; text-align: left; padding: 10px 12px 2px; font-size: 13px; color: var(--ink-3); }
table.data th, table.data td { padding: 7px 10px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--hair); }
table.data thead th { color: var(--ink-3); font-weight: 600; font-size: 12.5px; vertical-align: bottom; }
table.data thead th[scope="colgroup"] { text-align: center; border-bottom-color: var(--hair-2); }
table.data tbody th { text-align: left; color: var(--ink-2); font-weight: 600; position: sticky; left: 0; background: var(--panel); z-index: 1; }
table.data thead th:first-child { text-align: left; position: sticky; left: 0; background: var(--panel); z-index: 2; }
table.data tbody tr:last-child th, table.data tbody tr:last-child td { border-bottom: 0; }
table.data td { color: var(--ink); }
table.data td.muted .v { color: var(--ink-3); }
table.data.compact th, table.data.compact td { padding: 5px 8px; font-size: 13px; }
table.heat td.cell { text-align: center; min-width: 58px; }
table.heat td.cell .n { display: block; font-size: 11px; color: var(--ink-3); line-height: 1.2; }
table.heat td.few { opacity: 0.45; }
table.heat td.h0 { background: rgba(226, 96, 79, 0.36); } table.heat td.h1 { background: rgba(226, 96, 79, 0.29); }
table.heat td.h2 { background: rgba(226, 96, 79, 0.22); } table.heat td.h3 { background: rgba(226, 96, 79, 0.14); }
table.heat td.h4 { background: rgba(226, 96, 79, 0.07); } table.heat td.h5 { background: transparent; }
table.heat td.h6 { background: rgba(22, 160, 140, 0.08); } table.heat td.h7 { background: rgba(22, 160, 140, 0.15); }
table.heat td.h8 { background: rgba(22, 160, 140, 0.23); } table.heat td.h9 { background: rgba(22, 160, 140, 0.31); }
table.heat td.h10 { background: rgba(22, 160, 140, 0.4); }
th .hours { display: block; font-size: 11.5px; font-weight: 400; color: var(--ink-3); white-space: normal; max-width: 220px; }
.v { cursor: help; border-radius: 4px; text-decoration: underline dotted rgba(169, 181, 198, 0.35); text-underline-offset: 3px; }
.v:focus-visible { outline: 2px solid var(--mkt); outline-offset: 2px; }
.v.none { text-decoration: none; color: var(--ink-3); }
.big-num .v, .heat .v { text-decoration: none; }
.tipbox {
  position: fixed; z-index: 50; max-width: 340px; padding: 9px 11px; border-radius: 10px; font-size: 13px; line-height: 1.45;
  color: var(--ink-2); background: var(--tip-bg); border: 1px solid var(--hair-2); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
}
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tabs .tab, .doc-article .tabs button.tab {
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-2); background: transparent; border: 1px solid var(--hair-2);
  border-radius: 999px; padding: 4px 12px; cursor: pointer;
}
.tabs .tab[aria-selected="true"], .doc-article .tabs button.tab[aria-selected="true"] { color: var(--night); background: var(--ink); border-color: var(--ink); }
body:not(.js) .tabs { display: none; }
body:not(.js) .tab-panel + .tab-panel { margin-top: 18px; }
.tab-panel { margin-top: 4px; }
svg.cal { display: block; width: 100%; max-width: 340px; height: auto; margin: 12px auto 0; }
svg.cal .grid { stroke: var(--hair); stroke-width: 1; }
svg.cal .frame { fill: none; stroke: var(--hair-2); }
svg.cal .diag { stroke: var(--ink-3); stroke-dasharray: 4 4; stroke-width: 1; }
svg.cal .axis { fill: var(--ink-3); font-size: 10px; font-family: var(--font); }
svg.cal .line { fill: none; stroke-width: 1.6; }
svg.cal .line.s-model { stroke: var(--ink); } svg.cal .line.s-mkt { stroke: var(--mkt); }
svg.cal .pt.s-model { fill: var(--ink); } svg.cal .pt.s-mkt { fill: var(--mkt); }
.legend-line { display: flex; gap: 8px 14px; align-items: center; justify-content: center; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2) !important; margin-top: 4px !important; }
.legend-line .lk { margin-right: -6px; }
.lk-diag { border-color: var(--ink-3); border-top-style: dashed; }
.changes li { margin-top: 8px; }
@media (min-width: 760px) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .sky::after, .view-live .dot, .live-pill::before { animation: none; }
  .track-mark { transition: none; }
  .feed li { animation: none; }
}

/* browser notifications: one switch (notify.js) */
.notify-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px 10px; margin: 10px 0 4px; }
.notify-row .notify-msg { grid-column: 1 / -1; margin: 2px 0 0; }
.notify-label { font-size: 13.5px; color: var(--ink-2); font-weight: 550; }
.notify-pro { display: none; }
.notify-row.is-locked .notify-pro { display: inline-block; }
.notify-row.is-locked .notify-label { color: var(--ink-3); }
.switch { position: relative; width: 42px; height: 24px; border-radius: 12px; border: 1px solid var(--hair-2); background: var(--panel-2);
  cursor: pointer; padding: 0; transition: background-color 0.2s ease, border-color 0.2s ease; }
.switch .knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink-3);
  transition: transform 0.2s ease, background-color 0.2s ease; }
.switch[aria-checked="true"] { background: var(--yes); border-color: var(--yes); }
.switch[aria-checked="true"] .knob { transform: translateX(18px); background: #fff; }
.switch:focus-visible { outline: 2px solid var(--mkt); outline-offset: 2px; }
.switch:disabled { opacity: 0.6; cursor: progress; }
.notify-row.is-locked .switch { opacity: 0.55; }

/* the Pricing page's replay (demo.js) */
.demo { margin: 22px 0 28px; padding: 18px; border-radius: 18px; background: var(--glass); border: 1px solid var(--hair-2); box-shadow: var(--shadow); }
.demo-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.demo-head h2 { margin: 2px 0 4px; }
.demo-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 12px; }
.demo .chart-box.demo-chart { position: relative; height: 320px; }
.demo .chart-box.demo-chart canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.demo-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 0; }
.demo-side div { padding: 8px 10px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--hair); }
.demo-side dt { font-size: 12px; color: var(--ink-3); }
.demo-side dd { margin: 2px 0 0; font-weight: 650; font-size: 17px; font-variant-numeric: tabular-nums; }
.demo-side dd.sub { font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.demo-side .range dd:first-of-type { color: var(--range-ink, var(--range)); }
@media (min-width: 900px) {
  .demo-body { grid-template-columns: minmax(0, 1fr) 240px; }
  .demo .chart-box.demo-chart { height: 380px; }
  .demo-side { grid-template-columns: minmax(0, 1fr); align-content: start; }
}

/* the last window, recapped (recap.js) */
.recap .recap-top { margin-bottom: 10px; }
.recap .recap-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 28px; }
@media (min-width: 760px) { .recap .recap-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } }
.recap .label { margin: 4px 0 6px; }
.recap-marks { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 14px; }
.recap-marks th { font-weight: 600; color: var(--ink-3); font-size: 12px; text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--hair); }
.recap-marks th.r, .recap-marks td.r { text-align: right; }
.recap-marks td { padding: 5px 6px; border-bottom: 1px solid var(--hair); }
.recap-marks td.right { color: var(--yes); font-weight: 650; }
.recap-marks td.wrong { color: var(--ink-2); }
.recap-sigs { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.recap-sigs li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 6px 10px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--hair); font-size: 14px; }
.recap-sigs li.k-lock { border-left: 3px solid var(--pro); }
.recap-sigs li.k-agree { border-left: 3px solid #22b8cf; }
.recap-sigs li.none { color: var(--ink-2); }
.recap-sigs .sig-name { font-weight: 650; }
.recap-sigs .sig-left { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.recap-sigs .sig-out { margin-left: auto; font-weight: 650; }
.recap-sigs .sig-out.won { color: var(--yes); }
.recap-sigs .sig-out.lost { color: var(--no); }
.recap .pill { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: #fff; padding: 2px 11px; border-radius: 999px; background: var(--ink-3); margin-right: 4px; }
.recap .pill.yes { background: var(--yes); }
.recap .pill.no { background: var(--no); }

/* the free view's bar: the newest Pro addition (changelog.NEW_IN_PRO) */
.freebar-new { margin: 3px 0 0; font-size: 13px; color: var(--ink-2); }
.freebar-new .new-tag { display: inline-block; font-size: 10.5px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--pro); border-radius: 999px; padding: 1px 7px; margin-right: 4px; vertical-align: 1px; }
.freebar-new a { color: var(--ink); }

/* a table whose cells are sentences (the Signals page's indicator points): they wrap instead of scrolling */
table.data.wrap { width: 100%; }
table.data.wrap th[scope="row"], table.data.wrap td { white-space: normal; }
table.data.ind-points td:last-child { text-align: left; min-width: 150px; }
table.data.ind-points th:last-child { text-align: left; }
table.data.ind-points th[scope="row"] { min-width: 200px; }

/* "Live market here" under the window title (golink.py) */
.market-link { display: inline-flex; align-items: center; gap: 7px; margin: 6px 0 2px; padding: 5px 12px 5px 10px; border-radius: 999px;
  font-size: 13.5px; font-weight: 650; color: var(--ink); text-decoration: none; border: 1px solid var(--hair-2);
  background: linear-gradient(90deg, rgba(22, 160, 140, 0.16), rgba(59, 130, 246, 0.14)); transition: border-color .15s, transform .15s; }
.market-link:hover, .market-link:focus-visible { border-color: var(--yes); transform: translateY(-1px); }
.market-link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.market-link .ml-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--yes); box-shadow: 0 0 0 0 rgba(22, 160, 140, 0.6); animation: ml-pulse 2s ease-out infinite; }
@keyframes ml-pulse { 0% { box-shadow: 0 0 0 0 rgba(22, 160, 140, 0.55); } 70% { box-shadow: 0 0 0 7px rgba(22, 160, 140, 0); } 100% { box-shadow: 0 0 0 0 rgba(22, 160, 140, 0); } }
@media (prefers-reduced-motion: reduce) { .market-link .ml-dot { animation: none; } }

/* "Install app" (theme.js) */
.install-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 650; color: var(--ink); background: var(--panel-2); border: 1px solid var(--hair-2); }
.install-btn[hidden] { display: none; }
.install-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.install-btn:hover { border-color: var(--ink-3); }
@media (max-width: 560px) { .install-btn span { display: none; } .install-btn { padding: 0 9px; } }
.install-help { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 60; width: min(420px, calc(100% - 32px));
  padding: 14px 16px; border-radius: 14px; background: var(--panel); border: 1px solid var(--hair-2); box-shadow: var(--shadow); color: var(--ink); }
.install-help p { margin: 0 0 10px; font-size: 14px; }
.install-help button { font: inherit; font-weight: 650; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--hair-2); background: var(--panel-2); color: var(--ink); cursor: pointer; }
.install-help[hidden] { display: none; }

/* live model thoughts (Pro) */
.think .panel-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.think-rate { display: flex; align-items: center; gap: 4px; }
.think-rate .small { color: var(--ink-3); margin-right: 2px; }
.think-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 28px; margin: 6px 0 8px; }
@media (min-width: 900px) { .think-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.think-head { font-size: 24px; font-weight: 700; margin: 4px 0 6px; letter-spacing: -0.01em; }
.think-levels { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 14px; align-self: start; }
.think-levels th { font-weight: 600; color: var(--ink-3); font-size: 12px; text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--hair); }
.think-levels th.r, .think-levels td.r { text-align: right; }
.think-levels td { padding: 5px 6px; border-bottom: 1px solid var(--hair); }
.think-levels td:last-child { color: var(--yes); font-weight: 650; }

/* the strip of the last windows (recap.js) */
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(96px, 1fr); gap: 8px; overflow-x: auto; margin: 8px 0 12px; padding-bottom: 4px; }
.strip-item { display: flex; flex-direction: column; gap: 4px; padding: 7px 8px; border-radius: 10px; cursor: pointer; text-align: left;
  font: inherit; color: var(--ink); background: var(--panel-2); border: 1px solid var(--hair); min-width: 0; }
.strip-item:hover, .strip-item:focus-visible { border-color: var(--ink-3); }
.strip-item.is-on { border-color: var(--pro); box-shadow: 0 0 0 1px var(--pro) inset; }
.strip-top { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; font-size: 12px; }
.strip-time { color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.strip-res { font-weight: 700; }
.strip-res.yes { color: var(--yes); }
.strip-res.no { color: var(--no); }
.strip-spark { width: 100%; height: 40px; display: block; }
.strip-sigs { display: flex; flex-wrap: wrap; gap: 3px; font-size: 11px; color: var(--ink-3); min-height: 16px; }
.strip-sig { padding: 0 5px; border-radius: 999px; font-weight: 700; }
.strip-sig.won { color: var(--yes); background: rgba(22, 160, 140, 0.12); }
.strip-sig.lost { color: var(--no); background: rgba(226, 96, 79, 0.12); }
.linkish { font: inherit; color: var(--ink); text-decoration: underline; background: none; border: 0; padding: 0; cursor: pointer; }
.think-teaser { margin-top: 6px; }
@media (min-width: 1000px) { body[data-tier="free"] .think { align-self: start; } }

/* signal templates in the builder (rules.js) */
.templates { margin: 2px 0 8px; }
.tpl-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mini-btn.tpl { font-size: 12.5px; }
.tpl-about { margin: 8px 0 0; color: var(--ink-2); }

/* the week's record on the Accuracy page (weekly.js) */
.week-card { margin: 14px 0 18px; padding: 16px 18px; border-radius: 16px; background: var(--panel); border: 1px solid var(--hair-2); }
.week-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.week-head h3 { margin: 2px 0 8px; font-size: 18px; }
.week-card .week-stat p { margin-top: 2px; }
.week-stats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 6px 0 8px; }
@media (min-width: 700px) { .week-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.week-stat { padding: 10px 12px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--hair); }
.week-card .week-big { font-size: 26px; font-weight: 700; color: var(--ink); margin: 2px 0 4px; font-variant-numeric: tabular-nums; }

/* the signal record's split headings on the Accuracy page (records_pages.signals_section) */
.data tr.sub th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-3); padding-top: 14px; }

/* Bitcoin and Ethereum side by side (/both, Oct 21 2026): two Live pages in frames on a wide screen */
.assets a.both-link { display: none; }
@media (min-width: 1100px) { .assets a.both-link { display: inline-block; } }
.both-page { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
.both-page .top { width: 100%; }      /* a flex column shrank it to its content: wider than a phone (Oct 21 review) */
.both-grid { flex: 1; min-height: 0; display: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px;
  padding: 0 var(--gutter) 10px; position: relative; }
.both-col { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--hair-2); border-radius: 16px;
  overflow: hidden; background: var(--night); }
.both-title { margin: 0; padding: 8px 14px; font-size: 14px; display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid var(--hair); background: var(--panel); }
.both-title a { font-size: 12px; font-weight: 500; color: var(--ink-2); }
.both-col iframe { flex: 1; width: 100%; border: 0; display: block; background: var(--night); }
.both-narrow { padding: 24px var(--gutter); max-width: 560px; margin: 0 auto; position: relative; }
@media (min-width: 1100px) { .both-grid { display: grid; } .both-narrow { display: none; } }
/* a Live page inside one of those frames: no header, footer or background of its own, fewer extras */
body[data-embed="1"] .top, body[data-embed="1"] .foot, body[data-embed="1"] .sky,
body[data-embed="1"] .explain, body[data-embed="1"] .tg-card { display: none; }
body[data-embed="1"] .board { padding-top: 8px; }

/* the Pro tour (tour.js) */
.tour-spot { position: fixed; z-index: 60; border-radius: 16px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(3, 6, 12, 0.55), 0 0 0 2px var(--mkt);
  transition: left 0.25s ease, top 0.25s ease, width 0.25s ease, height 0.25s ease; }
.tour-box { position: fixed; z-index: 61; width: min(360px, calc(100vw - 32px)); padding: 14px 16px 12px; border-radius: 14px;
  background: var(--panel); color: var(--ink); border: 1px solid var(--hair-2); box-shadow: 0 18px 48px -16px rgba(0, 0, 0, 0.6); }
.tour-box:focus { outline: none; }
.tour-box h2 { margin: 2px 0 6px; font-size: 16px; }
.tour-step { margin: 0; font-size: 11px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.tour-text { margin: 0 0 12px; font-size: 14px; color: var(--ink-2); }
.tour-btns { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.tour-btns .btn:first-child { margin-right: auto; }
.tour-box.dock { left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); top: auto; width: auto; }
@media (prefers-reduced-motion: reduce) { .tour-spot { transition: none; } }

/* today so far (today.js) */
.today-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 8px 0 6px; }
@media (min-width: 900px) { .today-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.today .big { font-size: 24px; font-weight: 700; margin: 2px 0; font-variant-numeric: tabular-nums; }

/* the Lab (lab.py, lab.js) */
.lab-board tr.v-ahead b { color: var(--good, #16a08c); }
.lab-board tr.v-behind b { color: var(--bad, #e2604f); }
.lab-board tr.v-early td, .lab-board tr.v-early th { color: var(--ink-3); }
/* the indicators' record fits the page on a computer (Derek, Oct 30 2026: it scrolled sideways by a little): the verdict
   column and the column headings wrap instead of widening the table */
table.data.lab-board thead th { white-space: normal; }
table.data.lab-board thead th:nth-child(2) { text-align: left; }
table.data.lab-board td:last-child, table.data.lab-board thead th:last-child { white-space: normal; text-align: left; min-width: 150px; }
.lab-test { margin: 10px 0 18px; padding: 14px 16px; border-radius: 14px; background: var(--panel); border: 1px solid var(--hair-2); }
.lab-test select { margin-left: 8px; max-width: 100%; }
.lab-test .btn { margin: 8px 0 4px; }
.lab-fires li.won .mark { color: var(--good, #16a08c); }
.lab-fires li.lost .mark { color: var(--bad, #e2604f); }
.locked-card { padding: 12px 16px; border-radius: 14px; border: 1px dashed var(--hair-2); background: var(--panel); }

/* chart zoom (Oct 22 2026): pinch on a phone, these buttons anywhere */
.zoom-ctl { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.zoom-hint { order: -1; margin-right: auto; font-size: 12.5px; color: var(--ink-3); }
.zoom-btn { min-width: 30px; height: 26px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--hair-2);
  background: var(--glass-2, var(--panel)); color: var(--ink-2); font: 600 13px/1 "Instrument Sans", system-ui, sans-serif; cursor: pointer; }
.zoom-btn:hover { color: var(--ink); border-color: var(--ink-3); }
.zoom-btn[hidden] { display: none; }
.doc-article button.zoom-btn { display: inline-flex; min-width: 30px; height: 26px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--hair-2);
  background: var(--glass-2, var(--panel)); color: var(--ink-2); font: 600 13px/1 "Instrument Sans", system-ui, sans-serif; }
.doc-article button.zoom-btn[hidden] { display: none; }
.zoom-btn:disabled { opacity: 0.4; cursor: default; }
.sim-zoom { margin: 6px 0 2px; }
.sim-chart canvas { touch-action: pan-y; }

/* records tables on a phone (Oct 22 2026): a list, a tap opens a row's numbers */
.stack-toggle, table.data button.stack-toggle { display: none; }   /* phones only (it showed as an empty pill on computers) */
@media (max-width: 640px) {
  table.data.stack, table.data.stack tbody, table.data.stack tr, table.data.stack th, table.data.stack td { display: block; width: 100%; }
  table.data.stack thead { display: none; }
  table.data.stack caption { display: block; width: 100%; box-sizing: border-box; }   /* it shrank to one word a line (Oct 23 2026) */
  table.data.stack tbody tr { position: relative; padding: 10px 44px 10px 12px; border-bottom: 1px solid var(--hair); }
  table.data.stack tbody tr > *:first-child { padding: 0; border: 0; text-align: left; font-weight: 650; color: var(--ink); }
  table.data.stack tbody tr > * { padding: 0; border: 0; text-align: left; }
  table.data.stack tbody tr > *:not(:first-child):not(.stack-lead) { display: none; }
  table.data.stack tbody tr > .stack-lead { margin-top: 3px; color: var(--ink-2); font-size: 14px; }
  table.data.stack tbody tr > .stack-lead::before { content: attr(data-label) ": "; color: var(--ink-3); }
  table.data.stack tbody tr.open > *:not(:first-child) { display: flex; justify-content: space-between; gap: 12px;
    margin-top: 6px; font-size: 14px; }
  table.data.stack tbody tr.open > *:not(:first-child)::before { content: attr(data-label); color: var(--ink-3); text-align: left; }
  table.data.stack tbody tr.open > .stack-lead::before { content: attr(data-label); }
  table.data.stack button.stack-toggle { all: unset; display: block; position: absolute; inset: 0; cursor: pointer;
    background: transparent; box-shadow: none; border-radius: 0; }
  table.data.stack button.stack-toggle:focus-visible { outline: 2px solid var(--mkt); outline-offset: -2px; }
  table.data.stack .stack-toggle::after { content: ""; position: absolute; right: 16px; top: 18px; width: 8px; height: 8px;
    border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg); transition: transform .15s; }
  tr.open table.data.stack .stack-toggle::after { transform: rotate(-135deg); top: 21px; }
  table.data.stack .v { position: relative; z-index: 1; }
  .table-scroll:has(table.stack) { overflow-x: visible; }
}

.builtin-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 6px; }

.lab-promo { display: inline-block; margin-top: 10px; font-weight: 650; color: var(--pro); }
.rules.deleted li { opacity: .8; }
.rules.deleted .label { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-3); background: none; border: 0; padding: 0; }

/* the Lab's calculator and scanner (Oct 22 2026) */
.lab-row { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 8px 0; }
.lab-row input[type=number] { width: 90px; }
.lab-cond select { max-width: 100%; flex: 1 1 220px; }
.lab-build { margin: 8px 0 12px; }
.lab-build summary { cursor: pointer; color: var(--ink-2); font-weight: 600; }
.lab-big { font-size: 28px; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.lab-big.up strong { color: var(--yes); }
.lab-big.down strong { color: var(--no); }
.hypo { font-size: 11.5px; color: var(--ink-3); letter-spacing: .01em; }
.scan-list { list-style: decimal; padding-left: 1.4em; margin: 10px 0; display: grid; gap: 10px; }
.scan-item { padding: 10px 12px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--hair); }
.scan-rule { margin: 0 0 4px; font-weight: 600; color: var(--ink); }
.scan-nums { margin: 0 0 6px; color: var(--ink-2); font-size: 14px; }
.scan-ret { font-weight: 700; font-variant-numeric: tabular-nums; }
.scan-ret.up, .scan-ret.held { color: var(--yes); }
.scan-ret.down, .scan-ret.faded { color: var(--no); }
.scan-acts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.scan-freq { margin: 0 0 4px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.scan-freq.rare, #scan-rate-note.rare, #scan-fill-note.rare, .line.sub.win-err { color: var(--no); }
.win-max { color: var(--ink-3); }
.scan-exact { margin: 0 0 4px; font-size: 12.5px; color: var(--yes); }
.scan-exact.rough { color: var(--ink-3); }
.scan-luck { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-2); }
.scan-luck.unlikely { color: var(--yes); }
.scan-luck.faded { color: var(--no); }
input.over { border-color: var(--no); outline-color: var(--no); }
input[type=range].rare { accent-color: var(--no); }
.plain-toggle { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.plain-toggle input { width: 18px; height: 18px; accent-color: var(--pro); }

/* the Lab's strategy simulator (Oct 23 2026) */
.lab-sim { border: 1px solid var(--hair-2); border-radius: 18px; padding: 18px; background: var(--glass); display: grid; gap: 16px;
  grid-template-columns: minmax(0, 1fr); max-width: 100%; box-sizing: border-box; }
.lab-sim > *, .lab-sim .fld, .lab-sim .in, .lab-sim .in input, .lab-sim select, #sim-out { min-width: 0; }
.sim-sec { display: grid; gap: 8px; }
.sim-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 12px; align-items: start; }
.lab-sim .fld { display: grid; gap: 5px; margin: 0; }
.lab-sim .fld-wide { grid-column: 1 / -1; }
.lab-sim .fl { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--ink-3); text-transform: uppercase; }
.lab-sim .in { display: flex; align-items: center; gap: 0; border: 1px solid var(--hair-2); border-radius: 10px; background: var(--night);
  padding: 0 10px; transition: border-color .15s; }
.lab-sim .in:focus-within { border-color: var(--pro); }
.lab-sim .in i { font-style: normal; color: var(--ink-3); font-weight: 600; }
.lab-sim .in i.post { margin-left: 4px; }
.lab-sim .in input { border: 0; background: transparent; outline: none; width: 100%; padding: 9px 4px; font: inherit; color: var(--ink);
  font-variant-numeric: tabular-nums; }
.lab-sim select { width: 100%; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--hair-2); background: var(--night); color: var(--ink); font: inherit; }
.lab-sim .hint { font-size: 12px; color: var(--ink-3); font-weight: 500; text-transform: none; letter-spacing: 0; }
.sim-desc { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.seg { display: grid; max-width: 520px; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; border: 1px solid var(--hair-2);
  background: var(--night); }
.seg button { all: unset; cursor: pointer; text-align: center; padding: 8px 12px; border-radius: 9px; font-size: 14px; font-weight: 600;
  color: var(--ink-2); }
.seg button[aria-checked="true"] { background: var(--ink); color: var(--night); }
.seg button:focus-visible { outline: 2px solid var(--pro); outline-offset: 1px; }
.sim-more summary { cursor: pointer; font-weight: 600; color: var(--ink); list-style: none; }
.sim-more summary::-webkit-details-marker { display: none; }
.sim-more summary::before { content: "+ "; color: var(--ink-3); }
.sim-more[open] summary::before { content: "\2212  "; }
.sim-more[open] summary { margin-bottom: 10px; }
.sim-run { justify-self: start; min-width: 160px; }
.sim-head { display: grid; gap: 0; margin-top: 4px; }
.sim-which { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .03em; }
.sim-big { font-size: 30px; font-weight: 700; margin: 2px 0 8px; font-variant-numeric: tabular-nums; }
.sim-big.up { color: var(--yes); } .sim-big.down { color: var(--no); }
.sim-chart { width: 100%; touch-action: pan-y; border: 1px solid var(--hair); border-radius: 14px; padding: 8px 4px 2px; background: var(--night); }
.sim-chart canvas { display: block; width: 100%; cursor: crosshair; }
.sim-tip { margin: 10px 0; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--hair-2); background: var(--glass); font-size: 13.5px;
  color: var(--ink-2); display: grid; gap: 3px; min-height: 44px; }
.sim-tip .st-when { font-size: 12px; color: var(--ink-3); }
.sim-tip .st-main { color: var(--ink); }
.sim-tip b.up { color: var(--yes); } .sim-tip b.down { color: var(--no); }
.sim-tip .st-run { color: var(--warn-ink, var(--warn)); font-weight: 600; }
.sim-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); gap: 8px; margin: 10px 0; }
.sim-stats > div { border: 1px solid var(--hair); border-radius: 12px; padding: 10px 12px; background: var(--glass); }
.sim-stats dt { font-size: 12px; color: var(--ink-3); } .sim-stats dd { margin: 2px 0 0; font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }
.sim-which + .sim-big { margin-top: 2px; }
.sim-promo { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px;
  border-radius: 14px; text-decoration: none; color: var(--ink); border: 1px solid color-mix(in srgb, var(--pro) 45%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--pro) 16%, transparent), color-mix(in srgb, var(--yes) 10%, transparent)); }
.sim-promo:hover { border-color: var(--pro); }
.sim-promo svg { width: 44px; height: 22px; fill: none; stroke: var(--yes); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sim-promo b { display: block; font-size: 14.5px; }
.sim-promo span span { display: block; font-size: 12.5px; color: var(--ink-2); line-height: 1.35; margin-top: 2px; }
.sim-promo i { font-style: normal; font-weight: 700; color: var(--pro); }
/* very wide screens (Oct 23 2026): the Live page grows with the screen instead of staying a 1280 px strip */
@media (min-width: 1600px) {
  .top, .board, .foot { max-width: 1520px; }
  .freebar-in { max-width: 1520px; }
  .chart-box { height: 640px; }
}
/* the signal leaderboard (Oct 23 2026) */
.board-card { position: relative; border-color: color-mix(in srgb, #f5c542 55%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, #f5c542 12%, var(--panel)), var(--panel) 55%);
  box-shadow: 0 10px 30px -18px rgba(245, 197, 66, 0.6); }
.board-crown { margin: 0 auto 6px; width: 38px; height: 32px; display: grid; place-items: center;
  border-radius: 10px; background: linear-gradient(180deg, #ffe08a, #f5b532); box-shadow: 0 4px 14px -4px rgba(245, 181, 50, 0.8); }
.board-crown .crown { width: 20px; height: 20px; fill: #5a3d00; }
.board-card h2 { text-align: center; font-size: 16px; letter-spacing: .01em; }
.board-sub { margin: 4px 0 10px; font-size: 12.5px; color: var(--ink-2); text-align: center; line-height: 1.4; }
.board-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.board-empty { font-size: 13px; color: var(--ink-3); text-align: center; padding: 8px; }
.board-link { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px;
  border-radius: 12px; border: 1px solid var(--hair); background: var(--glass); color: var(--ink); text-decoration: none; }
.board-link:hover { border-color: var(--ink-3); }
.board-rank { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px;
  background: var(--hair); color: var(--ink-2); }
.board-row.first .board-rank { background: linear-gradient(180deg, #ffe08a, #f5b532); color: #5a3d00; }
.board-row.first .board-link { border-color: color-mix(in srgb, #f5c542 50%, transparent); }
.board-mid b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-mid small { display: block; font-size: 11.5px; color: var(--ink-3); line-height: 1.35; }
.board-pct { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 15px; }
.board-pct.up { color: var(--yes); } .board-pct.down { color: var(--no); }
/* the leaderboard's move since the previous update (Oct 24 2026) */
.lb-move { display: block; width: fit-content; margin: 3px 0 2px; font-size: 11.5px; font-weight: 700; line-height: 1.3; }
.lb-move.up { color: var(--yes); } .lb-move.down { color: var(--no); } .lb-move.same { color: var(--ink-3); font-weight: 600; }
.lb-status { color: var(--ink-3); margin: 8px 0 0; }
.lb-move.new { color: #fff; background: var(--yes); border-radius: 999px; padding: 1px 8px; }
.board-more { display: inline-block; margin-top: 10px; font-weight: 650; color: var(--pro); font-size: 13.5px; }
.board-fine { font-size: 11px; color: var(--ink-3); margin: 6px 0 0; }
.sig-board-h::before { content: ""; display: inline-block; width: 22px; height: 18px; margin-right: 8px; vertical-align: -2px;
  background: linear-gradient(180deg, #ffe08a, #f5b532);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 8l4.5 4L12 5l4.5 7L21 8l-2 11H5z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 8l4.5 4L12 5l4.5 7L21 8l-2 11H5z'/%3E%3C/svg%3E") center/contain no-repeat; }
.sig-board { border: 1px solid color-mix(in srgb, #f5c542 45%, transparent); border-radius: 16px; padding: 12px; background: var(--glass); }
.sig-board-t td.up { color: var(--yes); font-weight: 700; } .sig-board-t td.down { color: var(--no); font-weight: 700; }
.sig-board-t tr.first td { background: color-mix(in srgb, #f5c542 10%, transparent); }
.sig-board-t tr.behind td:not(.lb-acts) { opacity: 0.62; }      /* behind right now (Oct 31 2026) */
.sig-board-t .lb-name b { display: block; } .sig-board-t .lb-name small { display: block; color: var(--ink-3); font-size: 12px; }
.sig-board-t td, .sig-board-t th { font-size: 14px; }
.sig-board-t td.lb-name, .sig-board-t th:nth-child(2) { text-align: left; }
.sig-board-t td.lb-name b { font-size: 14px; font-weight: 650; }
.sig-board-t td.none { color: var(--ink-3); font-weight: 500; }
/* "Add to my signals" done: green with a check, so it reads as added, not as a stuck button (Derek, Oct 23 2026) */
.mini-btn.added, .mini-btn.added:disabled { background: var(--yes); border-color: var(--yes); color: #fff; opacity: 1; cursor: default; }
.scan-switch { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink); cursor: pointer; }
.scan-switch input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--pro); flex: none; }
.scan-switch small { display: block; color: var(--ink-3); font-size: 12.5px; }
.lottery-warn { margin: 4px 0 0 28px; padding: 8px 10px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--no) 50%, transparent);
  background: color-mix(in srgb, var(--no) 10%, transparent); color: var(--ink); font-size: 13px; }
/* the Lab's leaderboard on phones: one card a row, the Simulate button always tappable (Oct 23 2026) */
@media (max-width: 640px) {
  .sig-board-t thead { display: none; }
  .sig-board-t, .sig-board-t tbody { display: block; }
  .sig-board-t tr { display: grid; grid-template-columns: 24px minmax(0, 1fr);
    grid-template-areas: "rk nm" "rk pc" "rk wl" "rk ae" "rk go"; gap: 3px 10px; padding: 12px 6px;
    border-bottom: 1px solid var(--hair); align-items: center; }
  .sig-board-t tr.first { background: color-mix(in srgb, #f5c542 10%, transparent); border-radius: 12px; }
  .sig-board-t td, .sig-board-t tr.first td { display: block; padding: 0 !important; border: 0 !important; background: none !important;
    text-align: left !important; }
  .sig-board-t td:nth-child(1) { grid-area: rk; align-self: start; font-weight: 700; color: var(--ink-3); }
  .sig-board-t td:nth-child(2) { grid-area: nm; }
  .sig-board-t td:nth-child(3) { grid-area: pc; font-size: 16px; white-space: normal; }   /* it ran off the card (Oct 30 2026) */
  .sig-board-t td:nth-child(4) { grid-area: wl; font-size: 12.5px; color: var(--ink-2); }
  .sig-board-t td:nth-child(4)::before { content: "Won / lost: "; color: var(--ink-3); }
  .sig-board-t td:nth-child(5) { grid-area: ae; font-size: 12.5px; color: var(--ink-2); }
  .sig-board-t td:nth-child(5)::before { content: "Avg entry: "; color: var(--ink-3); }
  .sig-board-t td:nth-child(6) { grid-area: go; justify-self: stretch; margin-top: 6px !important; }
  /* the buttons on their own line under the numbers (Oct 25 2026: they covered the % on phones) */
  .sig-board-t td.lb-acts { display: flex !important; gap: 8px; }
  .sig-board-t td.lb-acts .mini-btn { flex: 1 1 0; width: auto; margin: 0; }
  /* the members' board has no Avg entry column: its buttons are the 5th cell (Oct 30 2026: they showed "Avg entry:") */
  .sig-board-t td.lb-acts { grid-area: go; margin-top: 6px !important; }
  .sig-board-t td.lb-acts::before { content: none; }
}
.scan-presets { display: grid; gap: 6px; margin-bottom: 14px; }
.scan-presets .fl { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--ink-3); text-transform: uppercase; }
.seg.seg3 { grid-template-columns: 1fr 1fr 1fr; max-width: 520px; }
/* the Lab's leaderboard: long Lab signal names wrap (they had widened the whole page on phones, Oct 23 2026) */
.sig-board-t td.lb-name, .sig-board-t td.lb-name b, .sig-board-t td.lb-name small { white-space: normal; overflow-wrap: anywhere; }
.sig-board-t td.lb-name { min-width: 0; max-width: 520px; }
@media (max-width: 640px) { .sig-board-t td.lb-name { max-width: none; } }
.board-mid b { white-space: normal; overflow: visible; }

/* the penny resting bids' paper test on the Lab (Oct 24 2026) */
.penny-card { border: 1px solid var(--hair-2); border-radius: 14px; padding: 16px; margin: 8px 0 20px; }
.penny-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.penny-block .big.up { color: var(--yes); } .penny-block .big.down { color: var(--no); }
.penny-recent { list-style: none; padding: 0; margin: 4px 0 8px; font-size: 13px; }
.penny-recent li { padding: 3px 0; border-bottom: 1px solid var(--hair); color: var(--ink-2); }
.penny-recent li.up { color: var(--yes); font-weight: 600; }

/* the leaderboard's time in the top 25 and its actions (Oct 25 2026) */
.lb-tenure { display: block; color: var(--ink-3); font-size: 11.5px; margin-top: 2px; }
.lb-acts { white-space: nowrap; }
.lb-acts .mini-btn { display: block; width: 100%; margin: 0 0 6px; }

/* buyers and sellers right now; the order book and model thoughts folded away (Oct 25 2026) */
.bs-row { margin: 0 0 14px; }
.bs-label { margin: 0 0 6px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.bs-label .sub { font-weight: 400; color: var(--ink-3); }
.bs-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--hair); }
.bs-bar .bs-yes { background: var(--yes); transition: width .4s; }
.bs-bar .bs-no { background: var(--no); transition: width .4s; }
.bs-legend { display: flex; justify-content: space-between; margin: 4px 0 0; font-size: 12.5px; color: var(--ink-2); }
details.more-detail { padding: 0; }
details.more-detail > summary { cursor: pointer; list-style: none; padding: 16px 18px; }
details.more-detail > summary h2 { display: inline; font-size: 15px; }
details.more-detail > summary::before { content: '+ '; color: var(--ink-3); }
details.more-detail[open] > summary::before { content: '− '; }
details.more-detail > .panel { border: 0; margin: 0; box-shadow: none; }

/* the Lab leaderboard folds away (Oct 25 2026) */
.board-fold { margin: 0 0 8px; }
.sig-board.folded { display: none; }
.sim-more { display: flex; gap: 8px; align-items: center; margin: 6px 0 0; font-size: 13px; color: var(--ink-2); }

/* the free trial at the top of Pricing (Oct 25 2026) */
.trial-top { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: space-between; margin: 16px 0 6px;
  padding: 14px 16px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--yes) 45%, transparent);
  background: color-mix(in srgb, var(--yes) 10%, transparent); text-align: left; }
.trial-top p { margin: 0; flex: 1 1 260px; }
.trial-top .cta { flex: 0 0 auto; }

/* leaderboard groups (Oct 25 2026): held up on new markets / still being tested */
.sig-board-t tr.lb-group td { font-size: 12.5px; font-weight: 650; letter-spacing: .02em; color: var(--ink-2); padding: 14px 6px 6px;
  border-bottom: 1px solid var(--hair-2); background: transparent; white-space: normal; overflow-wrap: anywhere; }
.board-rules { margin: 0 0 10px; padding-left: 20px; }
.board-rules li { margin: 4px 0; }
.board-pct.none { color: var(--ink-3); }
@media (max-width: 720px) {
  .sig-board-t tr.lb-group { display: block; grid-template-areas: none; }
  .sig-board-t tr.lb-group td { display: block; padding: 14px 4px 6px; }
}

/* Lifetime (Oct 25 2026): a third plan card, gold */
.plan.daypass .ribbon { background: var(--yes); color: #04130f; }
.plan.lifetime { border: 1px solid transparent;
  background: linear-gradient(var(--glass-2), var(--glass-2)) padding-box, linear-gradient(135deg, #f5c84b, #b8860b) border-box; }
.plan.lifetime .ribbon { background: linear-gradient(135deg, #f5c84b, #d69e1d); color: #1a1405; }
.plan .life-terms { margin-top: 10px; color: var(--ink-3); }
.life-badge { display: inline-block; margin-left: 6px; padding: 1px 9px; border-radius: 999px; font-size: 13px; font-weight: 700;
  background: linear-gradient(135deg, #f5c84b, #d69e1d); color: #1a1405; }

/* signal boxes beside the chart (Oct 25 2026): a row above it on phones, a column left of it on a computer */
.chart-row { display: flex; flex-direction: column; min-width: 0; }
.fire-list { display: flex; align-items: stretch; gap: 6px; overflow-x: auto; margin-top: 10px; padding-bottom: 2px; }
.fire-list[hidden] { display: none; }
.fire-list .fl-head { flex: none; align-self: center; margin: 0 2px 0 0; font-size: 11.5px; font-weight: 650; color: var(--ink-3);
  writing-mode: horizontal-tb; max-width: 70px; line-height: 1.2; }
.fire-list .fl-empty { margin: 0; align-self: center; font-size: 12.5px; color: var(--ink-3); }
.fl-box { flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px; min-width: 132px; padding: 6px 9px; border-radius: 10px;
  border: 1px solid var(--hair-2); border-left: 4px solid var(--hair-2); background: var(--glass, transparent); }
.fl-when { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.fl-dir { font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.fl-box.up .fl-dir { color: var(--yes); }
.fl-box.down .fl-dir { color: var(--no); }
.fl-act { align-self: flex-start; margin-top: 2px; padding: 1px 7px; border-radius: 6px; font-size: 11.5px; font-weight: 800;
  letter-spacing: 0.05em; text-transform: uppercase; }
.fl-box.up .fl-act { background: var(--yes); color: #04130f; }
.fl-box.down .fl-act { background: var(--no); color: #fff; }
@media (min-width: 1000px) {
  .chart-row { flex-direction: row; gap: 10px; }
  .chart-row .fire-list { flex: none; flex-direction: column; width: 168px; overflow-x: hidden; overflow-y: auto; max-height: 560px; }
  .chart-row .fire-list .fl-head { max-width: none; align-self: flex-start; }
  .chart-row .fl-box { min-width: 0; }
  .chart-row .chart-box { flex: 1 1 0; min-width: 0; }
}
@media (min-width: 1600px) { .chart-row .fire-list { max-height: 640px; } }

/* /admin/users (Oct 25 2026) */
.admin-users .adm-table td { vertical-align: top; font-size: 13.5px; }
.admin-users .adm-act { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.admin-users .adm-act button { padding: 5px 10px; font-size: 12.5px; border-radius: 8px; }
.admin-users .adm-days { width: 64px; }
.admin-users .adm-confirm { width: 110px; }
.admin-users .adm-search input { min-width: 260px; }

/* social icons in the header (Oct 25 2026) */
.top-social { display: inline-flex; align-items: center; gap: 2px; }
.top-social a { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 8px; color: var(--ink-3); }
.top-social a:hover { color: var(--ink); background: var(--glass-2, transparent); }
.top-social svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.top-social svg circle[r="1.1"], .top-social svg circle[r=".9"] { fill: currentColor; stroke: none; }
@media (max-width: 520px) { .top-social a { width: 26px; height: 26px; } .top-social svg { width: 16px; height: 16px; } }

/* Pricing (Oct 25 2026): prices first, then arrows down to the replay and the tiers */
.flow-arrow { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 22px auto 6px; width: fit-content;
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--hair-2); color: var(--ink-2); font-weight: 650; text-decoration: none; }
.flow-arrow span { font-size: 18px; animation: flow-bob 1.6s ease-in-out infinite; }
.flow-arrow:hover { color: var(--ink); border-color: var(--ink-3); }
@keyframes flow-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .flow-arrow span { animation: none; } }
.feature-table th small { display: block; font-weight: 500; color: var(--ink-3); font-size: 11.5px; }
.feature-table .life-col { background: rgba(245, 200, 75, 0.06); }
.feature-table thead th.life-col { color: #e6b53a; }
.feature-table td.life-col .pro-mark { color: #e6b53a; }

/* the Pro chart, TradingView-style (Oct 25 2026, second version) */
.prochart-page .doc-main { max-width: none; padding-left: 12px; padding-right: 12px; }
.pchart-page { width: 100%; }
.pc-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 8px; }
.pc-sym { font-size: 15px; margin-right: 6px; } .pc-sym span { color: var(--ink-3); font-size: 13px; }
.pc-bar .seg { display: inline-flex; gap: 2px; }
.pc-btn { font: inherit; font-size: 13px; font-weight: 650; padding: 6px 11px; border-radius: 9px; border: 1px solid var(--hair-2);
  background: var(--glass-2, transparent); color: var(--ink-2); cursor: pointer; }
.pc-btn:hover { color: var(--ink); border-color: var(--ink-3); }
.pc-btn.danger { color: var(--no); } .pc-btn.ghost { background: transparent; }
.doc-main .pc-btn { background: var(--glass-2, transparent); color: var(--ink-2); }
.pc-menu { position: relative; }
.pc-ind-menu { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 260px; padding: 8px; border-radius: 12px;
  border: 1px solid var(--hair-2); background: var(--panel, #0d1320); box-shadow: 0 18px 40px -18px rgba(0,0,0,.7); }
.pc-ind-menu[hidden] { display: none; }
.pc-opt { display: flex; align-items: center; gap: 8px; padding: 6px 6px; border-radius: 8px; font-size: 13.5px; cursor: pointer; }
.pc-opt:hover { background: var(--glass-2, rgba(255,255,255,.04)); }
.pc-sw { display: inline-block; width: 12px; height: 3px; border-radius: 2px; flex: none; }
.pc-live { margin-left: auto; font-size: 12.5px; font-weight: 650; color: var(--yes); display: inline-flex; align-items: center; gap: 6px; }
.pc-live i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: pc-pulse 1.6s infinite; }
.pc-live.stale { color: var(--ink-3); } .pc-live.stale i { animation: none; }
/* the desk's plug in the toolbar gap (Oct 27 2026) */
.pc-promo { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 10px; border-radius: 999px;
  text-decoration: none; color: var(--ink); font-size: 13.5px; font-weight: 600; white-space: nowrap;
  flex: 1 1 0; min-width: 150px; max-width: max-content; justify-content: flex-end; overflow: hidden;   /* fills the gap up to its own width; shrinks to the address, never wraps the bar */
  background: linear-gradient(var(--pc-bg, #131722), var(--pc-bg, #131722)) padding-box,
              linear-gradient(90deg, #22c3a6, #2962ff 55%, #8b7cf6) border-box; border: 1.5px solid transparent;
  box-shadow: 0 0 18px rgba(41, 98, 255, .18); }
.pc-promo b { font-size: 15px; font-weight: 800; letter-spacing: .01em;
  background: linear-gradient(90deg, #22c3a6, #5b8cff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pc-promo-t { color: var(--ink-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pc-promo b, .pc-promo-dot { flex: none; }
.pc-promo-dot { width: 9px; height: 9px; border-radius: 50%; background: #22c3a6; box-shadow: 0 0 0 0 rgba(34,195,166,.6); animation: pc-pulse 1.6s infinite; }
.pc-promo:hover { box-shadow: 0 0 24px rgba(41, 98, 255, .35); }
.pc-promo + .pc-live { margin-left: 12px; }
@media (max-width: 760px) { .pc-promo { display: none; } }
@media (min-width: 961px) { .pchart-page[data-desk="1"] .pc-bar { flex-wrap: nowrap; } .pchart-page[data-desk="1"] .pc-promo { min-width: 150px; } }
@media (max-width: 1750px) { .pchart-page[data-desk="1"] .pc-sym span { display: none; } }
@keyframes pc-pulse { 0% { box-shadow: 0 0 0 0 rgba(22,160,140,.6); } 100% { box-shadow: 0 0 0 8px rgba(22,160,140,0); } }
.pc-wrap { position: relative; height: calc(100vh - 150px); min-height: 520px; border: 1px solid var(--hair); border-radius: 14px;
  overflow: hidden; background: var(--night); }
.pc-box { position: absolute; inset: 0; }
.pc-msg { position: absolute; top: 45%; left: 0; right: 0; text-align: center; color: var(--ink-3); }
.pc-msg[hidden] { display: none; }
.pc-legend { position: absolute; z-index: 5; top: 8px; left: 10px; max-width: min(520px, 70%); pointer-events: none; }
.pc-legend button, .pc-legend .pc-row { pointer-events: auto; }
.pc-title { font-size: 12.5px; color: var(--ink-3); } .pc-ohlc { margin-left: 8px; font-variant-numeric: tabular-nums; }
.pc-price { margin-top: 2px; } .pc-price b { font-size: 24px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.pc-diff { font-weight: 700; font-size: 14px; margin-left: 8px; font-variant-numeric: tabular-nums; }
.pc-diff.up { color: var(--yes); } .pc-diff.down { color: var(--no); }
.pc-meta { font-size: 12.5px; color: var(--ink-2); } .pc-meta .pc-k { color: #f2b544; font-weight: 650; }
.pc-inds, .pc-sigs { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.pc-row { display: inline-flex; align-items: center; gap: 7px; padding: 2px 4px 2px 6px; border-radius: 7px; font-size: 12.5px;
  background: rgba(7, 11, 18, 0.55); color: var(--ink-2); }
.pc-x { border: 0; background: transparent; color: var(--ink-3); font-size: 15px; line-height: 1; padding: 2px 5px; cursor: pointer; border-radius: 6px; }
.doc-main .pc-x { background: transparent; color: var(--ink-3); }
.pc-x:hover { color: var(--ink); background: rgba(255,255,255,.08); }
.pc-sh { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-top: 2px; }
.pc-sig b { font-size: 12.5px; letter-spacing: .03em; } .pc-sig.up b { color: var(--yes); } .pc-sig.down b { color: var(--no); }
.pc-sub { color: var(--ink-3); }
.pc-toast { position: absolute; z-index: 8; top: 14px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column;
  align-items: center; gap: 2px; padding: 10px 22px; border-radius: 14px; color: #fff; box-shadow: 0 16px 40px -16px rgba(0,0,0,.8);
  animation: pc-in .25s ease-out; }
.pc-toast b { font-size: 22px; letter-spacing: .05em; } .pc-toast span { font-size: 12.5px; opacity: .9; }
.pc-toast.up { background: linear-gradient(135deg, #12a58e, #0d7f6c); } .pc-toast.down { background: linear-gradient(135deg, #e05a4f, #b23e35); }
.pc-toast[hidden] { display: none; }
@keyframes pc-in { from { transform: translate(-50%, -10px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.pc-pop { position: absolute; z-index: 20; width: 280px; padding: 10px; border-radius: 12px; border: 1px solid var(--hair-2);
  background: var(--panel, #0d1320); display: flex; flex-direction: column; gap: 6px; box-shadow: 0 18px 40px -18px rgba(0,0,0,.7); }
.pc-pop[hidden] { display: none; }
.pc-pop-t { margin: 0 0 2px; font-size: 13px; color: var(--ink-2); }
.pc-about { margin-top: 10px; font-size: 13px; color: var(--ink-3); } .pc-about summary { cursor: pointer; }
.pc-locked { position: relative; height: calc(100vh - 160px); min-height: 460px; border-radius: 16px; overflow: hidden; border: 1px solid var(--hair); }
.pc-locked-art { position: absolute; inset: 0; filter: blur(14px) saturate(1.2); opacity: .85; transform: scale(1.06); }
.pc-mock { width: 100%; height: 100%; }
.pc-locked-card { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(440px, 88%); text-align: center;
  padding: 22px; border-radius: 16px; border: 1px solid var(--hair-2); background: rgba(7, 11, 18, 0.82); }
.pc-locked-card h1 { margin: 6px 0; font-size: 26px; }
@media (max-width: 720px) {
  .pc-wrap { height: calc(100vh - 200px); min-height: 460px; }
  .pc-legend { max-width: calc(100% - 80px); }
  .pc-price b { font-size: 17px; } .pc-diff { display: block; margin-left: 0; font-size: 12.5px; }
  .pc-title, .pc-meta, .pc-row { font-size: 11.5px; }
  .pc-inds { display: none; }
  .pc-sigs .pc-row:nth-of-type(n+4) { display: none; }
  .pc-sub { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pc-toast { top: auto; bottom: 40px; padding: 8px 16px; } .pc-toast b { font-size: 18px; }
  .pc-bar { gap: 6px; } .pc-sym span { display: none; }
}
/* Pro chart, fourth pass (Oct 25 2026): TradingView's palette, a line per candle behind the candles, signal labels over them,
   the countdown top center, a price card that pops out */
.pc-wrap { background: var(--pc-bg, #131722); border-color: rgba(128,128,128,.18); }
.pc-under { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.pc-box { z-index: 1; }
.pc-ov { position: absolute; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; }
.pc-end { position: absolute; top: 0; width: 0; border-left: 2px solid rgba(242, 54, 69, .85); }
.pc-end.fading { border-left-color: rgba(242, 54, 69, .3); }
.pc-end[hidden] { display: none; }
.pc-mark { position: absolute; padding: 2px 7px; border-radius: 6px; font: 700 11.5px/1.35 -apple-system, BlinkMacSystemFont, "Trebuchet MS", Roboto, sans-serif;
  white-space: nowrap; background: var(--pc-bg, #131722); border: 1.5px solid; pointer-events: auto; cursor: default;
  box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.pc-mark.up { color: #22c3a6; border-color: #089981; } .pc-mark.down { color: #ff5c6a; border-color: #f23645; }
.pc-legend { text-shadow: 0 0 2px var(--pc-bg, #131722), 0 0 4px var(--pc-bg, #131722), 0 0 8px var(--pc-bg, #131722); }
.pc-legend .pc-row { background: color-mix(in srgb, var(--pc-bg, #131722) 70%, transparent); }
.pc-price b { font-size: 21px; }
.pc-clock { position: absolute; z-index: 6; top: 8px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column;
  align-items: center; gap: 1px; padding: 5px 16px 7px; border-radius: 12px; pointer-events: none; min-width: 168px;
  background: color-mix(in srgb, var(--pc-bg, #131722) 82%, transparent); border: 1px solid rgba(128,128,128,.22);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 4px 18px rgba(0,0,0,.25); }
.pc-clock-l { font-size: 10.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.pc-clock-row { display: flex; align-items: baseline; gap: 7px; }
.pc-clock b { font-size: 24px; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--ink); letter-spacing: .01em; }
.pc-clock-at { font-size: 12px; color: var(--ink-3); }
.pc-clock-bar { display: block; width: 100%; height: 3px; border-radius: 3px; background: rgba(128,128,128,.22); overflow: hidden; margin-top: 3px; }
.pc-clock-bar i { display: block; height: 100%; width: 0; background: #2962ff; border-radius: 3px; transition: width .9s linear; }
.pc-clock.last { border-color: rgba(242,54,69,.6); } .pc-clock.last b { color: #ff5c6a; } .pc-clock.last .pc-clock-bar i { background: #f23645; }
.pc-clock.last { animation: pc-clock-pulse 1s ease-in-out infinite; }
@keyframes pc-clock-pulse { 50% { box-shadow: 0 0 0 4px rgba(242,54,69,.18), 0 4px 18px rgba(0,0,0,.25); } }
.pc-toast { top: 82px; }
.pc-card { --s: 1; position: absolute; z-index: 7; display: flex; flex-direction: column; gap: calc(2px * var(--s)); padding: 6px 10px 7px 12px;
  border-radius: 10px; white-space: nowrap; font-variant-numeric: tabular-nums; touch-action: none; user-select: none;
  background: color-mix(in srgb, var(--pc-bg, #131722) 78%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(128,128,128,.22); border-left: 3px solid rgba(128,128,128,.5); box-shadow: 0 6px 22px rgba(0,0,0,.28); }
.pc-card.above { border-left-color: #089981; } .pc-card.below { border-left-color: #f23645; }
.pc-card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pc-card-name { font-size: calc(10.5px * var(--s)); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.pc-card-btn { border: 0; background: transparent; color: var(--ink-3); font-size: calc(14px * var(--s)); line-height: 1; padding: 2px 4px; border-radius: 6px; cursor: pointer; }
.doc-main .pc-card-btn { background: transparent; color: var(--ink-3); }
.pc-card-btn:hover { color: var(--ink); background: rgba(128,128,128,.18); }
.pc-card:not(.popped) .pc-card-btn { position: absolute; top: 3px; right: 3px; opacity: .55; font-size: 12px; }
.pc-card:not(.popped):hover .pc-card-btn { opacity: 1; }
.pc-card:not(.popped) { padding-right: 24px; }
.pc-card:not(.popped) .pc-card-h { display: contents; } .pc-card:not(.popped) .pc-card-name { display: none; }
.pc-card-px { font-size: calc(15px * var(--s)); font-weight: 700; color: var(--ink); }
.pc-card-d { font-size: calc(12px * var(--s)); font-weight: 700; } .pc-card-d.up { color: #22c3a6; } .pc-card-d.down { color: #ff5c6a; }
.pc-card-mkt { display: flex; gap: calc(10px * var(--s)); font-size: calc(12px * var(--s)); font-weight: 700; }
.pc-card-mkt .up { color: #22c3a6; } .pc-card-mkt .down { color: #ff5c6a; }
.pc-card-bar { height: calc(4px * var(--s)); border-radius: 4px; background: rgba(242,54,69,.55); overflow: hidden; }
.pc-card-bar[hidden] { display: none; }
.pc-card-bar i { display: block; height: 100%; background: #089981; }
.pc-card-cd { display: none; font-size: calc(11.5px * var(--s)); color: var(--ink-3); }
.pc-card-rs { display: none; position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px; cursor: nwse-resize; touch-action: none;
  background: linear-gradient(135deg, transparent 50%, rgba(128,128,128,.6) 50%, rgba(128,128,128,.6) 60%, transparent 60%, transparent 72%, rgba(128,128,128,.6) 72%, rgba(128,128,128,.6) 82%, transparent 82%); }
.pc-card.popped { cursor: move; padding: calc(8px * var(--s)) calc(12px * var(--s)) calc(10px * var(--s)) calc(14px * var(--s)); }
.pc-card.popped .pc-card-cd { display: block; }
.pc-card.popped .pc-card-rs { display: block; }
.pc-card.popped .pc-card-px { font-size: calc(26px * var(--s)); }
.pc-card.popped .pc-card-d, .pc-card.popped .pc-card-mkt { font-size: calc(14px * var(--s)); }
.pc-select { font: inherit; font-size: 13px; font-weight: 650; padding: 6px 28px 6px 11px; border-radius: 9px; border: 1px solid var(--hair-2);
  background: var(--glass-2, transparent); color: var(--ink-2); cursor: pointer; }
.pc-btn[aria-pressed="true"]#pc-vline-btn { color: #ff5c6a; border-color: rgba(242,54,69,.5); }
.pchart-page.pc-full { position: fixed; inset: 0; z-index: 1000; background: var(--pc-bg, #131722); padding: 8px 10px; display: flex; flex-direction: column; }
.pchart-page.pc-full .pc-wrap { flex: 1; height: auto; min-height: 0; border-radius: 8px; }
.pchart-page.pc-full .pc-about { display: none; }
html.pc-noscroll, html.pc-noscroll body { overflow: hidden; }
@media (max-width: 640px) {
  .pc-card:not(.popped) .pc-card-mkt, .pc-card:not(.popped) .pc-card-bar { display: none; }
  .pc-card-px { font-size: 13px; } .pc-card-d { font-size: 11px; }
  .pc-clock { top: 6px; padding: 3px 12px 5px; min-width: 140px; } .pc-clock b { font-size: 19px; } .pc-clock-l { font-size: 9.5px; }
  .pc-legend { top: 66px; }
  .pc-toast { top: auto; bottom: 40px; }
  .pc-mark { font-size: 10.5px; padding: 1px 5px; }
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* the Pricing replay's example tabs (Oct 25 2026) */
.demo-tabs { display: inline-flex; gap: 4px; padding: 3px; margin: 6px 0 4px; border-radius: 11px; background: var(--glass-2, rgba(255,255,255,.04)); border: 1px solid var(--hair-2); }
.demo-tabs[hidden] { display: none; }
.demo-tabs button { font: inherit; font-size: 13px; font-weight: 650; padding: 6px 12px; border-radius: 8px; border: 0; cursor: pointer; background: transparent; color: var(--ink-2); }
.demo-tabs button[aria-selected="true"][data-side="yes"] { background: rgba(8,153,129,.18); color: var(--yes); }
.demo-tabs button[aria-selected="true"][data-side="no"] { background: rgba(242,54,69,.16); color: var(--no); }
.demo-ex { margin: 4px 0 2px; font-size: 14px; color: var(--ink-2); } .demo-ex b { color: var(--ink); }
.demo .hypo { font-size: 10.5px; line-height: 1.45; color: var(--ink-3); letter-spacing: .01em; }
/* indicator legends with values (Oct 25 2026) */
.pc-in { color: var(--ink-2); } .pc-iv { font-variant-numeric: tabular-nums; font-weight: 600; }
.pc-panes { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.pc-panes .pc-row { position: absolute; left: 10px; pointer-events: auto; font-size: 12px;
  text-shadow: 0 0 2px var(--pc-bg, #131722), 0 0 4px var(--pc-bg, #131722); background: color-mix(in srgb, var(--pc-bg, #131722) 70%, transparent); }
@media (max-width: 640px) {
  .pc-legend .pc-mkt, .pc-legend .pc-sigs { display: none; }
  .pc-panes .pc-row { max-width: calc(100% - 96px); white-space: nowrap; overflow: hidden; font-size: 11px; }
  .pc-panes .pc-iv { overflow: hidden; text-overflow: ellipsis; }
}
/* the replay's zoom buttons stay under its chart, the readouts beside it (the zoom control is a grid item there) */
.demo-body .zoom-ctl { grid-column: 1; }
@media (min-width: 900px) { .demo-body .demo-side { grid-column: 2; grid-row: 1 / span 2; align-self: start; } .demo-body .chart-box { grid-column: 1; grid-row: 1; } }
/* back to the newest candles (Oct 26 2026) */
.pc-now { position: absolute; z-index: 8; right: 84px; bottom: 40px; font: 700 12.5px/1 -apple-system, BlinkMacSystemFont, "Trebuchet MS", Roboto, sans-serif;
  padding: 7px 11px; border-radius: 8px; border: 1px solid rgba(128,128,128,.3); cursor: pointer; color: var(--ink);
  background: color-mix(in srgb, var(--pc-bg, #131722) 85%, transparent); box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.doc-main .pc-now { color: var(--ink); background: color-mix(in srgb, var(--pc-bg, #131722) 85%, transparent); }
.pc-now:hover { border-color: #2962ff; }
.pc-now[hidden] { display: none; }
/* Lab paper test tabs (Oct 26 2026) */
.lab-tabs button[aria-selected="true"] { background: var(--glass-3, rgba(255,255,255,.1)); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair-2); }
.lab-tab { margin-top: 6px; }
/* Pro chart, sixth pass (Oct 26 2026): a one-line TradingView-style legend, the signals folded into a chip, a clearer
   "Back to now", the final minute's settlement average on the price card */
.pc-legend { max-width: min(640px, calc(100% - 120px)); }
.pc-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.pc-name { font-weight: 700; color: var(--ink); letter-spacing: .01em; }
.pc-chip { font-size: 11px; font-weight: 650; padding: 0 6px; border-radius: 5px; color: var(--ink-2);
  background: color-mix(in srgb, var(--ink) 9%, transparent); }
.pc-ohlc { margin-left: 4px; display: inline-flex; flex-wrap: wrap; gap: 0 4px; font-variant-numeric: tabular-nums; }
.pc-ok { color: var(--ink-3); margin-left: 4px; } .pc-ok:first-child { margin-left: 0; }
.pc-ov2.up { color: #089981; } .pc-ov2.down { color: #f23645; }
.pc-sigs { margin-top: 4px; }
.pc-sigchip { pointer-events: auto; font: inherit; font-size: 12px; display: inline-flex; align-items: baseline; gap: 2px; padding: 3px 9px;
  border-radius: 999px; cursor: pointer; border: 1px solid; background: color-mix(in srgb, var(--pc-bg, #131722) 75%, transparent); }
.pc-sigchip.up { border-color: rgba(8,153,129,.6); } .pc-sigchip.up b { color: #22c3a6; }
.pc-sigchip.down { border-color: rgba(242,54,69,.6); } .pc-sigchip.down b { color: #ff5c6a; }
.doc-main .pc-sigchip { background: color-mix(in srgb, var(--pc-bg, #131722) 75%, transparent); color: var(--ink-2); }
.pc-now, .doc-main .pc-now { right: auto; left: 50%; transform: translateX(-50%); bottom: 46px; padding: 9px 16px; border-radius: 999px;
  font-size: 13.5px; color: #fff; background: #2962ff; border: 0; box-shadow: 0 6px 22px rgba(41,98,255,.45);
  animation: pc-now-in .25s ease-out, pc-now-pulse 2.4s ease-in-out .3s 3; }
.pc-now:hover, .doc-main .pc-now:hover { background: #1e53e5; }
.pc-now span { margin-right: 4px; }
@keyframes pc-now-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes pc-now-pulse { 0%, 100% { box-shadow: 0 6px 22px rgba(41,98,255,.45); } 50% { box-shadow: 0 0 0 7px rgba(41,98,255,.18), 0 6px 22px rgba(41,98,255,.45); } }
@media (prefers-reduced-motion: reduce) { .pc-now, .doc-main .pc-now { animation: none; } }
.pc-card-st { margin-top: 5px; padding-top: 5px; border-top: 1px solid rgba(128,128,128,.25); font-size: calc(11px * var(--s, 1)); line-height: 1.4; color: var(--ink-2); }
.pc-card-st[hidden] { display: none; }
.pc-st-n b.up { color: #22c3a6; } .pc-st-n b.down { color: #ff5c6a; }
.pc-card.settling { border-color: rgba(242, 54, 69, .55); }
@media (max-width: 640px) {
  .pc-legend { max-width: calc(100% - 80px); }
  .pc-ohlc .pc-ok, .pc-ohlc .pc-ov2:not(:nth-last-child(-n+2)) { display: none; }   /* phone: close and change only */
  .pc-legend .pc-sigs { display: flex; }
  .pc-now, .doc-main .pc-now { bottom: 40px; font-size: 12.5px; padding: 8px 13px; }
}
.pc-st-n b { display: block; }
/* Pro chart on phones (Derek, Oct 26 2026: "fix how the graph looks on mobile"): a two-row toolbar, the chart filling the screen
   (its height set by prochart.js fitHeight), a one-line countdown, the price card's numbers under the legend instead of over the
   candles, the indicators as a sheet from the bottom. The same for a phone held sideways (short and touch) */
.pc-mline, .pc-mset { display: none; }
@media (max-width: 640px), (max-height: 500px) and (pointer: coarse) {
  .pc-select { max-width: 116px; }
  .pc-bar { gap: 6px; margin: 0 0 6px; }
  .pc-sym { display: none; }
  .pc-bar .seg { padding: 2px; border-radius: 9px; gap: 1px; }
  .pc-bar .seg button { padding: 5px 9px; font-size: 12.5px; border-radius: 7px; }
  .pc-select { font-size: 12.5px; padding: 5px 24px 5px 9px; border-radius: 8px; }
  .pc-btn { font-size: 12.5px; padding: 5px 9px; border-radius: 8px; }
  .pc-bl { display: none; }
  .pc-live { font-size: 11.5px; }
  .pc-wrap { min-height: 0; border-radius: 10px; }
  .pchart-page.pc-full { padding: 6px; }
  /* the countdown: one short line */
  .pc-clock, .pc-clock.last { top: 6px; min-width: 0; padding: 3px 10px 4px; flex-direction: row; align-items: baseline; gap: 6px; border-radius: 9px; }
  .pc-clock .pc-wide, .pc-clock-at { display: none; }
  .pc-clock-l { font-size: 9.5px; }
  .pc-clock b { font-size: 16px; }
  .pc-clock-row { gap: 0; }
  .pc-clock-bar { position: absolute; left: 8px; right: 8px; bottom: 1px; width: auto; height: 2px; margin: 0; }
  /* the legend: under the countdown; the card's numbers on two short lines */
  .pc-legend { top: 36px; left: 8px; max-width: calc(100% - 64px); }
  .pc-title { font-size: 11.5px; }
  .pc-mline { display: flex; flex-wrap: wrap; gap: 0 10px; margin-top: 1px; font-size: 12px; font-weight: 700; }
  .pc-mset:not([hidden]) { display: block; margin-top: 2px; font-size: 11px; color: var(--ink-2); }
  .pc-mline .up, .pc-mset .up { color: #22c3a6; } .pc-mline .down, .pc-mset .down { color: #ff5c6a; }
  .pc-card:not(.popped) { display: none; }
  .pc-sigchip { font-size: 11px; padding: 2px 8px; }
  .pc-sigs { margin-top: 3px; }
  .pc-mark { font-size: 10px; padding: 1px 5px; border-width: 1px; }
  .pc-panes .pc-row { font-size: 10.5px; left: 6px; padding: 1px 4px; }
  /* the indicators: a sheet from the bottom of the screen */
  .pc-ind-menu { position: fixed; left: 8px; right: 8px; top: auto; bottom: 8px; min-width: 0; max-height: 60vh; overflow-y: auto; z-index: 1100;
    box-shadow: 0 -10px 40px rgba(0,0,0,.6); }
}
@media (max-width: 640px), (max-height: 500px) and (pointer: coarse) { .pc-legend .pc-inds { display: none; } }
@media (max-width: 380px) { .pc-live { font-size: 0; gap: 0; } .pc-bar .seg button { padding: 5px 8px; } .pc-select { max-width: 104px; } }
/* the simulator's doubling option is marked as high risk (Derek, Oct 26 2026) */
.risk-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; font-size: 10.5px; font-weight: 750;
  letter-spacing: .03em; text-transform: uppercase; color: #ff5c6a; background: rgba(242,54,69,.14); border: 1px solid rgba(242,54,69,.45); vertical-align: 1px; }
.sim-warn { margin: 8px 0 4px; padding: 9px 12px; border-radius: 10px; font-size: 13px; line-height: 1.45; color: var(--ink-2);
  background: rgba(242,54,69,.09); border: 1px solid rgba(242,54,69,.4); border-left: 4px solid #f23645; }
.sim-warn strong { color: #ff5c6a; }
.sim-warn[hidden] { display: none; }
/* the simulator: what a Lab signal did after it was found (Oct 26 2026) */
.sim-since { margin: 4px 0 6px; padding: 8px 12px; border-radius: 10px; font-size: 13px; line-height: 1.45; color: var(--ink-2);
  background: rgba(139,124,246,.09); border: 1px solid rgba(139,124,246,.35); border-left: 4px solid #8b7cf6; }
.sim-since strong { color: #b8adff; } .sim-since b.up { color: var(--yes); } .sim-since b.down { color: var(--no); }
.sim-since[hidden] { display: none; }
.penny-table { font-size: 13px; margin: 2px 0 10px; } .penny-table b.up { color: var(--yes); } .penny-table b.down { color: var(--no); }
/* the admin's paper trading desk (desk.py, Oct 26 2026): the Pro chart, the ticket on the right, positions underneath */
.desk { display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "chart ticket" "bottom ticket"; gap: 12px; align-items: start; }
.desk-chart { grid-area: chart; min-width: 0; } .desk-ticket { grid-area: ticket; } .desk-bottom { grid-area: bottom; min-width: 0; }
.desk .pc-wrap { height: 60vh; min-height: 420px; }
.desk .pc-about { display: none; }
.desk-ticket { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px;
  border: 1px solid var(--hair-2); background: var(--panel, #0d1320); }
.desk-paper { align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: .08em; padding: 2px 8px; border-radius: 6px;
  color: #f2b544; background: rgba(242,181,68,.12); border: 1px solid rgba(242,181,68,.45); }
.desk-mkt { font-size: 13px; color: var(--ink-2); } .desk-mkt b { color: var(--ink); }
.desk-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.desk-side { font: inherit; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px; border-radius: 10px; cursor: pointer;
  border: 1.5px solid var(--hair-2); background: transparent; color: var(--ink-2); }
.desk-side b { font-size: 20px; font-variant-numeric: tabular-nums; }
.desk-side.up[aria-checked="true"] { border-color: #089981; background: rgba(8,153,129,.14); color: #22c3a6; }
.desk-side.down[aria-checked="true"] { border-color: #f23645; background: rgba(242,54,69,.12); color: #ff5c6a; }
.desk-act { grid-template-columns: 1fr 1fr; max-width: none; }
.desk-f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-3); }
.desk-f[hidden] { display: none; }
.desk-f input, .desk-f select { font: inherit; font-size: 14px; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--hair-2); background: var(--night); color: var(--ink); width: 100%; box-sizing: border-box; }
.desk-in { position: relative; display: block; } .desk-in i { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--ink-3); }
.desk-sum, .desk-acct { display: flex; flex-direction: column; gap: 3px; font-size: 13px; padding: 8px 0; border-top: 1px solid var(--hair); }
.desk-row { display: flex; justify-content: space-between; gap: 8px; color: var(--ink-2); } .desk-row b { color: var(--ink); font-variant-numeric: tabular-nums; }
.desk-budget { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; margin-bottom: 6px; border: 1px solid var(--hair); border-radius: 10px; }
.desk-budget.on { border-color: color-mix(in srgb, var(--up, #22c3a6) 55%, var(--hair)); }
.desk-budget-l { font-weight: 600; color: var(--ink); font-size: 13px; }
.desk-budget-in { display: flex; align-items: center; gap: 6px; }
.desk-budget-in i { font-style: normal; color: var(--ink-2); }
.desk-budget-in input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 15px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--hair); background: transparent; color: var(--ink); font-variant-numeric: tabular-nums; }
.desk-budget-in input:disabled { opacity: .75; }
.desk-budget-lock { display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--ink-2); }
.desk-budget-lock input { width: 34px; height: 18px; appearance: none; -webkit-appearance: none; border-radius: 999px; background: var(--hair); position: relative; cursor: pointer; flex: none; transition: background .15s; }
.desk-budget-lock input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left .15s; }
.desk-budget-lock input:checked { background: var(--up, #22c3a6); }
.desk-budget-lock input:checked::after { left: 18px; }
.desk-budget-lock input:disabled { opacity: .5; cursor: not-allowed; }
.desk-budget small { font-size: 11.5px; line-height: 1.35; }
.desk .up { color: #22c3a6; } .desk .down { color: #ff5c6a; }
.desk .pc-toast.up, .desk .pc-toast.down { color: #fff; }        /* the signal flash keeps white text on its own colour */
.desk .pc-toast { top: 92px; }
.desk-go { width: 100%; }
.desk-msg { min-height: 1.2em; margin: 2px 0 6px; font-size: 13px; line-height: 1.4; }
.desk-msg:empty { margin: 0; }
.desk-note, .desk-sub { font-size: 11.5px; color: var(--ink-3); margin: 0; }
.desk-bottom { border: 1px solid var(--hair-2); border-radius: 14px; padding: 10px 12px; }
.desk-tabs { grid-template-columns: repeat(3, auto); max-width: 460px; margin-bottom: 8px; }
.desk-tabs [aria-selected="true"] { background: var(--ink); color: var(--night); }
.desk-table { font-size: 13px; } .desk-table td, .desk-table th { white-space: nowrap; }
.desk-mini { font: inherit; font-size: 12px; font-weight: 650; padding: 3px 10px; border-radius: 7px; border: 1px solid var(--hair-2); background: transparent; color: var(--ink-2); cursor: pointer; }
.desk-mini.down { border-color: rgba(242,54,69,.5); color: #ff5c6a; }
.desk-mini.ghost { align-self: flex-start; margin-top: 4px; }
@media (max-width: 960px) {
  .desk { grid-template-columns: minmax(0, 1fr); grid-template-areas: "chart" "ticket" "bottom"; }
  .desk-ticket { position: static; }
}
/* the desk, second pass (Oct 26 2026): full screen by default - a top bar, the chart, the ticket with the order book, the
   positions underneath, all on one screen; out of full screen, the whole page width */
.desk { grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: auto auto auto; grid-template-areas: "top top" "chart ticket" "bottom ticket";
  gap: 10px; width: calc(100vw - 32px); margin-left: calc(50% - 50vw + 16px); }
.desk-page main, .desk-page .doc-main { overflow: visible; }
.desk .pc-wrap { height: 68vh; min-height: 440px; }
.desk #pc-full-btn { display: none; }
.desk-top { grid-area: top; display: flex; align-items: center; gap: 16px; padding: 6px 12px; border-radius: 12px; border: 1px solid var(--hair-2);
  background: var(--pc-bg, #131722); font-size: 13px; color: var(--ink-2); min-height: 40px; }
.desk-brand { display: flex; align-items: center; gap: 8px; } .desk-brand b { color: var(--ink); font-size: 15px; }
.desk-logo { width: 20px; height: 20px; border-radius: 6px; background: linear-gradient(135deg, #2bb5a0, #6c7cf6); }
.desk-badge { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; padding: 2px 8px; border-radius: 6px;
  color: #f2b544; background: rgba(242,181,68,.12); border: 1px solid rgba(242,181,68,.45); }
.desk-plug { margin-left: auto; color: var(--ink-3); } .desk-plug b { color: var(--ink); }
.desk-clock { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); }
.desk-full-btn { font: inherit; font-size: 12.5px; font-weight: 700; padding: 6px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--hair-2); background: transparent; color: var(--ink); }
.desk-full-btn:hover { border-color: #2962ff; }
.desk-sound-btn[aria-pressed="false"] { color: var(--ink-3); }
.desk-alerts { margin: 4px 0 14px; }
.desk-alert-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0; }
.desk-alert-row .desk-tog { padding: 4px 10px; }
.desk-ticket { top: 10px; padding: 12px; gap: 9px; background: var(--pc-bg, #131722); max-height: calc(100vh - 20px); overflow-y: auto; }
.desk-bottom { background: var(--pc-bg, #131722); padding: 6px 10px 10px; }
.desk-tabs { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--hair-2); margin: 0 0 6px; max-width: none; padding: 0; background: none; border-radius: 0; }
.desk-tabs [data-tab] { font: inherit; font-size: 13px; font-weight: 650; padding: 7px 12px; border: 0; border-bottom: 2px solid transparent; background: none;
  color: var(--ink-3); cursor: pointer; border-radius: 0; }
.desk-tabs [aria-selected="true"] { color: var(--ink); border-bottom-color: #2962ff; background: none; }
.desk-tabs-sum { margin-left: auto; font-size: 13px; color: var(--ink-2); }
.desk-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.desk-chips { display: flex; gap: 6px; } .desk-chips button { flex: 1; font: inherit; font-size: 12px; font-weight: 650; padding: 4px 0; border-radius: 7px;
  border: 1px solid var(--hair-2); background: transparent; color: var(--ink-2); cursor: pointer; }
.desk-chips button:hover { color: var(--ink); border-color: var(--ink-3); }
.desk-book { display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.desk-bk-h { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); padding: 0 8px 2px; }
.desk-bk { position: relative; display: flex; justify-content: space-between; font: inherit; padding: 3px 8px; border: 0; background: transparent;
  color: var(--ink-2); cursor: pointer; text-align: left; overflow: hidden; border-radius: 4px; }
.desk-bk:hover { background: rgba(128,128,128,.12); }
.desk-bk i { position: absolute; right: 0; top: 0; bottom: 0; z-index: 0; }
.desk-bk span { position: relative; z-index: 1; }
.desk-bk.ask i { background: rgba(242,54,69,.16); } .desk-bk.ask span:first-of-type { color: #ff5c6a; font-weight: 700; }
.desk-bk.bid i { background: rgba(8,153,129,.18); } .desk-bk.bid span:first-of-type { color: #22c3a6; font-weight: 700; }
.desk-bk-sp { text-align: center; font-size: 11px; color: var(--ink-3); padding: 2px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.desk-paper { display: none; }
/* full screen: the whole browser window, nothing of the site around it */
.desk.full { position: fixed; inset: 0; z-index: 1000; width: auto; margin: 0; padding: 8px; box-sizing: border-box; background: var(--night, #0b0f17);
  grid-template-rows: auto minmax(0, 1fr) var(--desk-bot, 210px); height: 100vh; height: 100dvh; }
.desk.full .desk-chart { display: flex; min-height: 0; }
.desk.full .pchart-page { display: flex; flex-direction: column; flex: 1; min-height: 0; margin: 0; }
.desk.full .pc-wrap { flex: 1; height: auto; min-height: 0; }
.desk.full .desk-ticket { position: static; max-height: none; height: 100%; box-sizing: border-box; grid-row: 2 / span 2; }
.desk.full .desk-bottom { min-height: 0; display: flex; flex-direction: column; }
.desk.full .desk-panels { flex: 1; overflow-y: auto; min-height: 0; }
.desk.full .pc-bar { margin: 0 0 6px; }
@media (max-width: 960px) {
  .desk, .desk.full { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "top" "chart" "ticket" "bottom"; }
  .desk.full { overflow-y: auto; height: auto; } .desk.full .desk-ticket { grid-row: auto; height: auto; }
  .desk.full .pc-wrap { height: 60vh; flex: none; }
  .desk-plug { display: none; }
}
.desk.full { align-items: stretch; }
.desk.full .desk-top, .desk.full .desk-bottom { align-self: stretch; }
.desk-ticket { gap: 7px; }
.desk-side { padding: 6px 8px; } .desk-side b { font-size: 18px; }
.desk-bk { padding: 2px 8px; }
.desk-sum { padding: 6px 0; gap: 2px; }
.desk-acct { padding: 6px 0; }
.desk-note { font-size: 11px; line-height: 1.4; }
/* the header's two groups (Derek, Oct 26 2026: on a phone the social icons and the theme button sit up beside the logo, so the
   menu row gets the whole width); on wider screens both groups flow as one row, as before */
.top-nav, .top-tools { display: contents; }
@media (max-width: 640px) {
  .top { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand tools" "nav nav"; align-items: center; row-gap: 10px; }
  .top .brand { grid-area: brand; }
  .top-right { display: contents; }
  .top-tools { grid-area: tools; display: flex; align-items: center; gap: 6px; }
  .top-nav { grid-area: nav; display: flex; align-items: center; gap: 8px; min-width: 0; }
  .top-nav .nav { flex: 1 1 auto; min-width: 0; }
}

/* --- the home page (home.py, Oct 27 2026; second pass the same day): the record up front with the Pricing page's replay,
   then the numbers, why it beats a caller, every page with who gets it, the plans --- */
.home { max-width: 1200px; margin: 0 auto; }
.home h2 { font-size: clamp(22px, 2.4vw, 28px); font-weight: 680; letter-spacing: -0.015em; margin: 0 0 16px; }
.home-hero { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(24px, 4vw, 52px);
  align-items: center; padding: clamp(24px, 5vw, 60px) 0 clamp(26px, 4vw, 48px); }
.home-kick { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.home-lede h1 { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.03; font-weight: 700; letter-spacing: -0.03em;
  font-stretch: 88%; max-width: 15ch; margin: 0; text-wrap: balance; }
.home-sub { font-size: 18px; line-height: 1.55; color: var(--ink-2); max-width: 50ch; margin: 20px 0 0; }
.home-points { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.home-points li { display: flex; align-items: flex-start; gap: 9px; font-size: 15.5px; color: var(--ink); }
.home-points svg { flex: none; width: 18px; height: 18px; margin-top: 2px; fill: none; stroke: var(--yes); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.home-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.home-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 12px;
  font-weight: 700; font-size: 15.5px; text-decoration: none; color: var(--cta-ink); background: var(--cta);
  box-shadow: 0 14px 28px -16px rgba(57, 135, 229, 0.95); }
.home-btn.ghost { color: var(--ink); background: transparent; border: 1px solid var(--hair-2); box-shadow: none; }
.home-btn:hover { filter: brightness(1.08); } .home-btn.ghost:hover { border-color: var(--ink-3); }
.home-btn:focus-visible, .home-live:focus-visible, .home-place-list a:focus-visible { outline: 2px solid var(--strike); outline-offset: 3px; }
.home-live { display: inline-flex; align-items: center; gap: 9px; margin-top: 16px; padding: 7px 14px 7px 12px; border-radius: 999px;
  border: 1px solid var(--hair-2); color: var(--ink); text-decoration: none; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.home-live[hidden] { display: none; }
.home-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); box-shadow: 0 0 0 0 currentColor; animation: home-pulse 1.8s infinite; }
.home-live.up i { background: var(--yes); color: var(--yes); } .home-live.down i { background: var(--no); color: var(--no); }
.home-live:hover { border-color: var(--ink-3); }
@keyframes home-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
@media (prefers-reduced-motion: reduce) { .home-live i { animation: none; } }
.home-small { color: var(--ink-3); font-size: 13.5px; margin: 12px 0 0; }

/* the replay in the hero: the Pricing page's (demo.js), one column, its numbers in a row under the chart */
.home-demo .demo { margin: 0; padding: 16px; }
.home-demo .demo-head h2 { font-size: 17px; margin: 2px 0 2px; }
.home-demo .demo-head .kicker { margin: 0; }
.home-demo .demo-body { grid-template-columns: minmax(0, 1fr); }
.home-demo .demo-body .demo-side, .home-demo .demo-body .chart-box, .home-demo .demo-body .zoom-ctl { grid-column: 1; grid-row: auto; }
.home-demo .demo .chart-box.demo-chart { height: 300px; }
.home-demo .demo-side { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.home-demo .demo-side div { padding: 6px 9px; }
.home-demo .demo-side dd { font-size: 15px; }
.home-demo .demo > p.small, .home-demo #demo-cap { font-size: 12.5px; }

/* the record: three numbers between hairlines, each with the page that shows it */
.home-proof { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); border-top: 1px solid var(--hair-2);
  border-bottom: 1px solid var(--hair-2); }
.home-fact { padding: 24px 24px 24px 0; }
.home-fact + .home-fact { padding-left: 24px; border-left: 1px solid var(--hair); }
.home-fact b { display: block; font-size: clamp(30px, 3.6vw, 42px); font-weight: 720; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.home-fact:nth-child(2) b { background: var(--cta); -webkit-background-clip: text; background-clip: text; color: transparent; }
.home-fact p { color: var(--ink-2); font-size: 14.5px; line-height: 1.5; margin: 6px 0 10px; max-width: 38ch; }
.home-fact a { font-size: 14px; font-weight: 650; }
.home-hypo { font-size: 10.5px; line-height: 1.45; color: var(--ink-3); margin: 10px 0 0; max-width: 120ch; }

/* why it beats a caller */
.home-why { padding: 48px 0 8px; }
.home-why-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.home-why-i { padding: 20px; border-radius: 16px; background: var(--glass); border: 1px solid var(--hair-2); }
.home-why-i h3 { margin: 0 0 8px; font-size: 18px; font-weight: 680; letter-spacing: -0.01em; }
.home-why-i p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.55; }

/* every page: name, who gets it, what it's for */
.home-places { padding: 44px 0 10px; }
.home-place-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.home-place-list a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 16px 18px; border-radius: 14px;
  border: 1px solid var(--hair-2); color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s; }
.home-place-list a:hover { border-color: var(--ink-3); transform: translateY(-1px); }
.home-place-n { font-size: 17px; font-weight: 680; }
.home-tag { align-self: flex-start; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; color: var(--yes);
  background: color-mix(in srgb, var(--yes) 14%, transparent); }
.home-tag.pro { color: #fff; background: var(--pro, #8b7cf6); }
.home-place-d { color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }

.home-plans { margin: 48px 0 24px; padding: clamp(20px, 3vw, 32px); border-radius: 20px; background: var(--glass); border: 1px solid var(--hair-2); }
.home-plans > p { color: var(--ink-2); font-size: 16px; max-width: 62ch; margin: -6px 0 18px; }
.home-plan-list { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; padding: 0; }
.home-plan-list li { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--hair-2); background: var(--panel-2, transparent); }
.home-plan-list li.best { border-color: color-mix(in srgb, var(--yes) 60%, var(--hair-2)); }
.home-plan-list b { font-size: 26px; font-weight: 720; letter-spacing: -0.015em; }
.home-plan-list span { color: var(--ink); font-size: 14.5px; font-weight: 600; }
.home-plan-list small { color: var(--ink-3); font-size: 12.5px; }
.home-refund { font-size: 14px; color: var(--ink-2); margin: 0 0 18px; max-width: 80ch; }
.home-plan-act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.home-secure { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 13.5px; color: var(--ink-2); max-width: 60ch; }
.home-secure svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--yes); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 980px) {
  .home-hero { grid-template-columns: 1fr; padding-top: 22px; }
  .home-lede h1 { max-width: 18ch; }
  .home-why-g { grid-template-columns: 1fr; }
  .home-place-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-plan-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .home-fact, .home-fact + .home-fact { padding: 18px 0; border-left: 0; }
  .home-fact + .home-fact { border-top: 1px solid var(--hair); }
}
@media (max-width: 560px) {
  .home-place-list { grid-template-columns: 1fr; }
  .home-demo .demo-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-demo .demo .chart-box.demo-chart { height: 240px; }
}
@media (max-width: 420px) { .home-btn { width: 100%; } .home-plan-list { grid-template-columns: 1fr 1fr; gap: 8px; } .home-plan-list li { padding: 12px; } }

/* --- the desk's Live mode (live_desk.py, Oct 27 2026) --- */
.desk-badge.dk-demo { color: #8b7cf6; background: rgba(139,124,246,.14); border-color: rgba(139,124,246,.5); }
.desk-badge.dk-real { color: #fff; background: #e2304a; border-color: #e2304a; }
.desk.desk-is-live .desk-ticket { box-shadow: inset 0 3px 0 #e2304a; }
.desk-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.desk-mode button { font: inherit; font-size: 12.5px; font-weight: 750; padding: 5px 0; border-radius: 7px; border: 1px solid var(--hair-2);
  background: transparent; color: var(--ink-3); cursor: pointer; }
.desk-mode [aria-checked="true"][data-mode="paper"] { background: var(--ink); color: var(--night); border-color: var(--ink); }
.desk-mode [aria-checked="true"][data-mode="live"] { background: #e2304a; color: #fff; border-color: #e2304a; }
.desk-live-st { font-size: 12px; color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.desk-live-st[hidden] { display: none; }
.desk-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 2px; }
.desk-dot.ok { background: #22c3a6; } .desk-dot.bad { background: #ff5c6a; }
.desk .warn, .desk-mini.warn { color: #f2b544; border-color: rgba(242,181,68,.6); }
.desk-mini.cta { color: #fff; background: #2962ff; border-color: #2962ff; }
.desk-h3 { font-size: 13px; font-weight: 700; color: var(--ink-2); margin: 10px 0 4px; }
.desk-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin: 4px 0 6px; }
.desk-card { border: 1px solid var(--hair-2); border-radius: 9px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.desk-card span { font-size: 11.5px; color: var(--ink-3); } .desk-card b { font-size: 18px; font-variant-numeric: tabular-nums; }
.desk-card small { font-size: 11px; color: var(--ink-3); }
.desk-spark { width: 100%; max-width: 640px; height: 120px; display: block; }
.desk-spark path { fill: none; stroke-width: 2; } .desk-spark path.up { stroke: #22c3a6; } .desk-spark path.down { stroke: #ff5c6a; }
.desk-lim-grid { display: grid; gap: 2px; }
.desk-lim-row { display: grid; grid-template-columns: 170px 150px minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 6px 0;
  border-bottom: 1px solid var(--hair); }
.desk-lim-n { font-weight: 650; font-size: 13px; color: var(--ink); }
.desk-lim-row .desk-in { display: flex; align-items: center; gap: 6px; }
.desk-lim-row .desk-in i { font-style: normal; color: var(--ink-3); font-size: 12px; }
.desk-lim-row input { width: 100%; font: inherit; font-size: 13px; padding: 4px 8px; border-radius: 7px; border: 1px solid var(--hair-2);
  background: transparent; color: var(--ink); font-variant-numeric: tabular-nums; }
.desk-lim-now { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.desk-lim-bar { display: inline-block; width: 90px; height: 6px; border-radius: 3px; background: var(--hair-2); overflow: hidden; }
.desk-lim-bar i { display: block; height: 100%; background: #22c3a6; } .desk-lim-bar i.hot { background: #f2b544; }
.desk-lim-h { grid-column: 1 / -1; font-size: 11px; color: var(--ink-3); }
.desk-lim-act { display: flex; gap: 8px; align-items: center; margin: 10px 0 6px; flex-wrap: wrap; }
.desk-arm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--hair-2); margin: 4px 0 8px; }
.desk-arm.on { border-color: #e2304a; background: rgba(226,48,74,.1); }
.desk-arm select { font: inherit; font-size: 12.5px; padding: 3px 6px; border-radius: 7px; border: 1px solid var(--hair-2); background: transparent; color: var(--ink); }
.desk-tog { font: inherit; font-size: 12px; font-weight: 700; min-width: 46px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--hair-2);
  background: transparent; color: var(--ink-3); cursor: pointer; }
.desk-tog.on { background: #22c3a6; border-color: #22c3a6; color: #04130f; }
.desk-num { width: 76px; font: inherit; font-size: 12.5px; padding: 3px 6px; border-radius: 7px; border: 1px solid var(--hair-2); background: transparent; color: var(--ink); }
.desk-scale { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-3); margin: 0 0 8px; }
@media (max-width: 700px) { .desk-lim-row { grid-template-columns: 1fr 120px; } .desk-lim-now { grid-column: 1 / -1; } }
.desk-stopcell { display: inline-flex; align-items: center; gap: 4px; } .desk-stopcell .desk-num { width: 56px; } .desk-stopcell i { font-style: normal; color: var(--ink-3); }
/* number boxes on the desk: no up/down arrows (they sat on top of the ¢ / $ at the end of the box), room for the unit */
.desk input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.desk input[type="number"]::-webkit-inner-spin-button, .desk input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.desk .desk-in input { padding-right: 26px; }
/* the positions panel's resize grip (Derek, Oct 27 2026): drag it up for a taller panel, the chart shrinks to match */
.desk-grip { display: none; }
.desk.full .desk-grip { display: flex; justify-content: center; align-items: center; height: 10px; margin: -6px -10px 2px; cursor: ns-resize; touch-action: none; }
.desk-grip i { width: 46px; height: 4px; border-radius: 4px; background: var(--hair-2); transition: background .15s; }
.desk-grip:hover i, .desk-grip:focus-visible i, .desk.resizing .desk-grip i { background: var(--ink-3); }
.desk-grip:focus-visible { outline: none; }
.desk.resizing { user-select: none; cursor: ns-resize; }
@media (max-width: 960px) { .desk.full .desk-grip { display: none; } }
/* the order ticket scrolls as one column: nothing in it is squeezed under its content (the message line overlapped the
   budget box, Oct 27 2026) */
.desk-ticket > * { flex-shrink: 0; }
/* the P&L chart */
.desk-pc { margin: 4px 0 14px; }
.desk-pc-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 6px; }
.desk-pc-rng { display: flex; flex-wrap: wrap; gap: 4px; }
.desk-pc-rng .desk-mini { min-width: 38px; }
.desk-pc-rng .desk-mini.on { background: var(--ink); color: var(--night); border-color: var(--ink); }
.desk-pc-tot { font-size: 13px; color: var(--ink-2); } .desk-pc-tot b { font-size: 18px; font-variant-numeric: tabular-nums; } .desk-pc-tot small { color: var(--ink-3); }
.desk-pc-area { position: relative; }
.desk-pc-svg { display: block; max-width: 100%; touch-action: pan-y; }
.desk-pc-svg .grid { stroke: rgba(128,128,128,.15); } .desk-pc-svg .zero { stroke: rgba(128,128,128,.45); stroke-dasharray: 4 4; }
.desk-pc-svg .ax { fill: var(--ink-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.desk-pc-svg .line { fill: none; stroke-width: 2; } .desk-pc-svg .line.up { stroke: #22c3a6; } .desk-pc-svg .line.down { stroke: #ff5c6a; }
.desk-pc-svg .fill.up { fill: rgba(34,195,166,.10); } .desk-pc-svg .fill.down { fill: rgba(255,92,106,.10); }
.desk-pc-svg .dot { stroke: var(--pc-bg, #131722); stroke-width: 1.5; } .desk-pc-svg .dot.up { fill: #22c3a6; } .desk-pc-svg .dot.down { fill: #ff5c6a; }
.desk-pc-svg .endlab { font-size: 13px; font-weight: 700; } .desk-pc-svg .endlab.up { fill: #22c3a6; } .desk-pc-svg .endlab.down { fill: #ff5c6a; }
.desk-pc-svg .cross { stroke: rgba(128,128,128,.55); stroke-dasharray: 3 3; }
.desk-pc-tip { position: absolute; pointer-events: none; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px;
  font-size: 12.5px; white-space: nowrap; background: var(--pc-bg, #131722); border: 1px solid var(--hair-2); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.desk-pc-tip[hidden] { display: none; } .desk-pc-tip span, .desk-pc-tip small { color: var(--ink-2); }
/* --- the desk, dressed up (Oct 27 2026): glass panels with a soft brand glow, a gradient top edge on the cards, livelier tabs --- */
.desk.full { background:
    radial-gradient(1200px 520px at 0% -10%, rgba(22,160,140,.13), transparent 60%),
    radial-gradient(1000px 520px at 105% 110%, rgba(139,124,246,.14), transparent 60%),
    var(--night, #0b0f17); }
.desk-top { background: linear-gradient(90deg, rgba(22,160,140,.10), rgba(57,135,229,.06) 45%, rgba(139,124,246,.10)); border-color: rgba(255,255,255,.08); }
.desk-logo { box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 6px 18px -6px rgba(57,135,229,.8); }
.desk-bottom, .desk-ticket { border-color: rgba(255,255,255,.08); box-shadow: 0 18px 50px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.04); }
.desk-tabs [data-tab] { border-radius: 8px 8px 0 0; transition: color .15s, background .15s; }
.desk-tabs [data-tab]:hover { color: var(--ink); background: rgba(255,255,255,.03); }
.desk-tabs [aria-selected="true"] { border-image: linear-gradient(90deg, #16a08c, #3987e5, #8b7cf6) 1; border-bottom-width: 2px; border-bottom-style: solid; }
.desk-card { position: relative; overflow: hidden; border-color: rgba(255,255,255,.08); border-radius: 12px; padding: 10px 12px 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); }
.desk-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, #16a08c, #3987e5, #8b7cf6); opacity: .7; }
.desk-card b { font-size: 20px; letter-spacing: -.01em; }
.desk-card b.up { text-shadow: 0 0 18px rgba(34,195,166,.35); } .desk-card b.down { text-shadow: 0 0 18px rgba(255,92,106,.3); }
.desk-go { box-shadow: 0 12px 26px -14px rgba(57,135,229,.95); }
.desk-pc-area { border-radius: 12px; background: linear-gradient(180deg, rgba(255,255,255,.025), transparent); }
.desk-mini.share { border-color: rgba(139,124,246,.55); color: #c4b9ff; background: rgba(139,124,246,.10); }
.desk-mini.share:hover { background: rgba(139,124,246,.2); color: #fff; }
.desk-mini.cta { border: 0; color: #fff; background: linear-gradient(135deg, #16a08c, #3987e5 55%, #8b7cf6); }
/* the share card's window */
.desk-share { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(3,6,12,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.desk-share-p { display: flex; flex-direction: column; gap: 12px; max-width: min(1100px, 96vw); max-height: 94vh; padding: 14px; border-radius: 16px;
  background: var(--pc-bg, #131722); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 30px 80px -20px rgba(0,0,0,.9); }
.desk-share-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 13px; color: var(--ink-2); }
.desk-share-ctl > b { color: var(--ink); font-size: 15px; margin-right: auto; }
.desk-share-usd { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.desk-share-view { min-height: 0; display: flex; justify-content: center; overflow: auto; }
.desk-share-cv { display: block; max-width: 100%; max-height: calc(94vh - 90px); width: auto; height: auto; border-radius: 12px; box-shadow: 0 16px 40px -18px rgba(0,0,0,.9); }

/* the home page centred on the Lab (Fable 5.1's review, Oct 28 2026, section 3) */
.home-board { align-self: start; padding: clamp(16px, 2vw, 22px); border-radius: 20px; background: var(--glass);
  border: 1px solid var(--hair-2); box-shadow: 0 20px 60px -30px rgba(0, 0, 0, 0.6); scroll-margin-top: 80px; }
.hb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.home .hb-head h2 { margin: 0; font-size: 20px; }
.hb-upd { font-size: 12.5px; color: var(--ink-3); }
.hb-sub { margin: 6px 0 12px; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.hb-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hb-rows li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px;
  border-radius: 14px; background: var(--panel); border: 1px solid var(--hair); }
.hb-rows li.hb-empty { display: block; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.hb-place { font-size: 15px; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.hb-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hb-name { font-size: 15.5px; font-weight: 680; overflow-wrap: anywhere; }
.hb-line { font-size: 14px; color: var(--ink-2); }
.hb-line em { font-style: normal; font-weight: 720; font-size: 17px; font-variant-numeric: tabular-nums; }
.hb-line em.up { color: var(--yes); } .hb-line em.down { color: var(--no); }
.hb-meta { font-size: 12.5px; color: var(--ink-3); }
.hb-mv.up { color: var(--yes); font-weight: 650; } .hb-mv.down { color: var(--no); font-weight: 650; }
.hb-mv.new { color: #fff; background: var(--yes); border-radius: 999px; padding: 0 7px; font-weight: 700; }
.hb-pill { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 0 8px; border-radius: 999px; color: var(--ink-2);
  border: 1px solid var(--hair-2); }
.hb-sim { font-size: 13.5px; font-weight: 650; white-space: nowrap; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--hair-2);
  text-decoration: none; color: var(--ink); }
.hb-sim:hover { border-color: var(--ink-3); }
.hb-all { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 650; }
.home-fact-l { display: block; margin-top: 4px; font-size: 14px; font-weight: 650; color: var(--ink); }
.home-fact:nth-child(2) b { background: none; color: var(--yes); }
.home-para { color: var(--ink-2); font-size: 16px; line-height: 1.6; max-width: 72ch; margin: 0 0 14px; }
.home-more { margin: 12px 0 0; font-size: 14.5px; font-weight: 650; }
.home-bars { display: block; width: 100%; max-width: 720px; height: 64px; margin: 6px 0 0; }
.home-bars rect.bl { fill: var(--yes); opacity: 0.85; }
.home-bars rect.bf { fill: var(--hair-2); opacity: 0.6; }
.home-bars line { stroke: var(--strike); stroke-width: 1.5; stroke-dasharray: 4 4; }
.home-model { max-width: 560px; }
.home-demo-sec { padding: 44px 0 0; }
@media (max-width: 520px) {
  .hb-rows li { grid-template-columns: auto minmax(0, 1fr); }
  .hb-sim { grid-column: 1 / -1; text-align: center; }
}

.home-lede h1 { font-size: clamp(30px, 3.5vw, 44px); line-height: 1.08; }
.home-lede h1 { max-width: 24ch; }

/* the home page, fourth pass (Derek, Oct 28 2026): the live count as the headline, gold for vetted, the dollars a trade */
.home-kick { display: inline-flex; align-items: center; gap: 8px; color: var(--yes); }
.home-kick i { width: 8px; height: 8px; border-radius: 50%; background: var(--yes); color: var(--yes); animation: home-pulse 1.8s infinite; }
.home-lede h1 { max-width: none; }
.home-hero { align-items: start; }
.home-lede { padding-top: clamp(0px, 3vw, 36px); }
.home-count { display: block; font-size: clamp(44px, 6.4vw, 78px); line-height: 1; letter-spacing: -0.035em; font-weight: 760;
  font-variant-numeric: tabular-nums; background: linear-gradient(100deg, var(--lead) 0%, var(--yes) 45%, var(--mkt) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 4px; }
.home-h-rest { display: block; margin-top: 6px; font-size: clamp(22px, 2.5vw, 32px); letter-spacing: -0.02em; }
.home-h2 { margin: 14px 0 0; font-size: clamp(18px, 1.7vw, 21px); font-weight: 650; line-height: 1.4; color: var(--ink); max-width: 40ch; }
.home-sub { font-size: 16.5px; }
.hb-stakes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 12px; font-size: 13px; color: var(--ink-2); }
.hb-stakes button { font: inherit; font-weight: 700; font-size: 13px; padding: 4px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--hair-2); background: transparent; color: var(--ink-2); }
.hb-stakes button[aria-pressed="true"] { color: var(--night); background: var(--gold); border-color: var(--gold); }
.hb-rows li.hb-group { display: block; padding: 6px 2px 0; border: 0; background: none; font-size: 12px; font-weight: 750;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.hb-rows li.hb-row.is-vetted { border-color: color-mix(in srgb, var(--gold) 55%, var(--hair));
  background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 10%, var(--panel)), var(--panel) 60%);
  box-shadow: 0 10px 30px -18px color-mix(in srgb, var(--gold) 70%, transparent); }
.hb-row.is-vetted .hb-place { color: var(--gold); }
.hb-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hb-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .03em;
  padding: 1px 8px 1px 6px; border-radius: 999px; color: var(--night); background: var(--gold); }
.hb-badge svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hb-gain { font-size: 13.5px; color: var(--ink-2); }
.hb-usd { font-variant-numeric: tabular-nums; font-size: 15px; }
.hb-usd.up { color: var(--yes); } .hb-usd.down { color: var(--no); }
.hb-per { font-variant-numeric: tabular-nums; }
.hb-vet { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); }
.hb-vet b { color: var(--ink); font-weight: 700; }
.hb-bar { width: 84px; height: 6px; flex: none; }
.hb-bar .bg { fill: var(--hair-2); }
.hb-bar .fg { fill: var(--gold); }
.hb-note { margin: 8px 0 0; font-size: 12px; color: var(--ink-3); }
.home-fact:nth-child(1) b { color: var(--gold); }
.home-fact:nth-child(3) b { background: linear-gradient(100deg, var(--lead), var(--yes)); -webkit-background-clip: text;
  background-clip: text; color: transparent; }
.home-fact:nth-child(4) b { color: var(--lead); }
.home-why-i h3 { display: flex; align-items: center; gap: 10px; }
.home-why-i h3 span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 14px;
  color: var(--night); background: var(--cta); font-weight: 800; }
.home-model-sec { margin-top: 36px; padding: clamp(18px, 3vw, 28px); border-radius: 20px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--lead) 9%, transparent), transparent 65%);
  border: 1px solid color-mix(in srgb, var(--lead) 28%, var(--hair-2)); }
.home-model-sec h2 { color: var(--ink); }
.home > .home-hypo { margin: 18px 0 8px; }
@media (max-width: 520px) { .hb-bar { width: 60px; } }

/* the Lab's hero: the live count of signals tested (Derek, Oct 28 2026: "scan through millions") */
.lab-count { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 10px auto 8px; text-align: center; }
.lab-count .home-count { display: inline-block; font-size: clamp(36px, 5vw, 58px); }
.lab-count span { font-size: 16px; color: var(--ink-2); }
.home-count-note { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-3); }
.home-count-note a { color: var(--ink-2); }

/* how often each signal fills (Derek, Oct 28 2026): next to its move, coloured by rare / average / often */
.lb-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 3px 0 2px; }
.lb-tags .lb-move { margin: 0; }
.lb-fill, .hb-fill { display: inline-block; width: fit-content; font-size: 11.5px; font-weight: 650; line-height: 1.3;
  padding: 1px 8px; border-radius: 999px; border: 1px solid var(--hair-2); color: var(--ink-2); }
.lb-fill.rare, .hb-fill.rare { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.lb-fill.average, .hb-fill.average { color: var(--mkt); border-color: color-mix(in srgb, var(--mkt) 45%, transparent); }
.lb-fill.often, .hb-fill.often { color: var(--yes); border-color: color-mix(in srgb, var(--yes) 45%, transparent); }
:root[data-theme="light"] .lb-fill.rare, :root[data-theme="light"] .hb-fill.rare { color: var(--warn-ink); }
/* which way each signal bets (Oct 30 2026): a pill like the fill tag, an arrow and the side's colour; the Lab's filter */
.lb-dir { display: inline-block; width: fit-content; font-size: 11.5px; font-weight: 650; line-height: 1.3; padding: 1px 8px;
  border-radius: 999px; border: 1px solid var(--hair-2); color: var(--ink-2); }
.lb-dir.up { color: var(--yes); border-color: color-mix(in srgb, var(--yes) 45%, transparent); }
.lb-dir.down { color: var(--no); border-color: color-mix(in srgb, var(--no) 45%, transparent); }
.lb-dir.both { color: var(--mkt); border-color: color-mix(in srgb, var(--mkt) 45%, transparent); }
.lb-dirbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 10px; }
.lb-dirbar-l { font-size: 13px; color: var(--ink-3); margin-right: 2px; }
.doc-article button.lb-dirbtn { font-size: 12.5px; font-weight: 600; padding: 4px 11px; border-radius: 999px; min-height: 0;
  background: transparent; color: var(--ink-2); border: 1px solid var(--hair-2); box-shadow: none; cursor: pointer; }
.doc-article button.lb-dirbtn[aria-pressed="true"] { background: var(--ink); color: var(--night); border-color: var(--ink); }
.doc-article button.lb-dirbtn:focus-visible { outline: 2px solid var(--pro); outline-offset: 1px; }
.sig-board-t[data-show="down"] tbody tr[data-dir]:not([data-dir="down"]),
.sig-board-t[data-show="up"] tbody tr[data-dir]:not([data-dir="up"]),
.sig-board-t[data-show="both"] tbody tr[data-dir]:not([data-dir="both"]) { display: none; }

/* the launch deal (Oct 28 2026): Pricing's bar and the monthly ribbon, the home page's line, with a live countdown */
.deal-bar { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; justify-content: space-between; margin: 12px 0 6px;
  padding: 12px 16px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--hair));
  background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 14%, var(--panel)), var(--panel) 65%); text-align: left; }
.deal-bar p { margin: 0; flex: 1 1 280px; }
.deal-bar .deal-clock { flex: 0 0 auto; color: var(--ink-2); }
.deal-bar [data-deal-end], .home-deal [data-deal-end] { font-variant-numeric: tabular-nums; color: var(--gold); white-space: nowrap; }
.plan .ribbon.deal { background: linear-gradient(135deg, #f5c84b, #d69e1d); color: #1a1405; }
.home-deal { margin: 10px 0 0; font-size: 14.5px; color: var(--ink-2); }
.home-deal a { color: var(--ink); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--gold) 60%, transparent); }
.friend-week { margin: 10px 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--hair); background: var(--panel); }
/* bets that scale (Oct 28 2026): the leaderboard's scaled run, the simulator's options and its flat-vs-scaled line */
.lb-scaled { display: inline-block; width: fit-content; font-size: 11.5px; font-weight: 650; line-height: 1.3; padding: 1px 7px;
  border-radius: 999px; border: 1px solid color-mix(in srgb, var(--lead) 45%, transparent); color: var(--ink-2); }
.lb-scaled.up { color: var(--yes); } .lb-scaled.down { color: var(--no); }
.sim-check { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; font-size: 14px; color: var(--ink-2); }
.sim-check input { margin-top: 3px; }
.risk-tag.test-tag { background: color-mix(in srgb, var(--mkt) 16%, transparent); color: var(--mkt); border-color: color-mix(in srgb, var(--mkt) 45%, transparent); }
.sim-vs { margin: 4px 0 0; font-size: 14.5px; color: var(--ink-2); }
.sim-vs b.up { color: var(--yes); } .sim-vs b.down { color: var(--no); }
.st-size { margin-top: 4px; font-size: 13px; color: var(--ink-2); }
/* the members' signal board's entry form (Oct 28 2026) */
.mb-enter { margin: 8px 0 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--hair); background: var(--panel); }
.mb-enter p { margin: 0 0 8px; }
.mb-enter input, .mb-enter select { max-width: 100%; }
/* how robust a simulated run is (Oct 28 2026) */
.sim-robust { margin: 12px 0 4px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--hair); background: var(--panel); }
.sim-robust h3 { margin: 0 0 6px; font-size: 15px; }
.sim-robust ul { margin: 0 0 8px; padding-left: 18px; font-size: 14px; color: var(--ink-2); }
.sim-robust li { margin: 3px 0; }
.sim-robust b.up { color: var(--yes); } .sim-robust b.down { color: var(--no); }
.sim-nearby { margin-top: 8px; font-size: 14px; }
/* the scanner's walk-forward line (Oct 28 2026) */
.scan-wf { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-2); }
.scan-wf.held b { color: var(--yes); } .scan-wf.faded b { color: var(--warn); }
/* the signals off the leaderboard, with their records (Oct 28 2026) */
.off-board { margin: 10px 0 18px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--hair); background: var(--panel); }
.off-board summary { cursor: pointer; font-weight: 650; }
.off-board table { font-size: 13.5px; }

/* the Lab leaderboard's record column (Derek, Nov 1 2026: "everything on here has this ui bug scrunching it all"): it was one
   long unbreakable line, so the signal's name column was squeezed to a few words a line. Now it wraps, each part on its own
   line: since found (what it is ranked and vetted on), the whole last-N-markets run, then the vetted bar's numbers. */
.sig-board-t td.lb-rec { white-space: normal; min-width: 190px; max-width: 270px; vertical-align: middle; }
.sig-board-t td.lb-rec > span, .sig-board-t td.lb-rec > small { display: block; }
.sig-board-t .lb-since { font-weight: 700; font-variant-numeric: tabular-nums; }
.sig-board-t .lb-since.up, .sig-board-t .lb-all.up { color: var(--yes); }
.sig-board-t .lb-since.down, .sig-board-t .lb-all.down { color: var(--no); }
.sig-board-t .lb-since.none { color: var(--ink-3); font-weight: 500; }
.sig-board-t .lb-all { font-size: 13px; font-weight: 650; margin-top: 3px; font-variant-numeric: tabular-nums; }
.sig-board-t .lb-note { color: var(--ink-3); font-size: 11.5px; font-weight: 500; line-height: 1.35; }
@media (min-width: 641px) { .sig-board-t td.lb-name { min-width: 240px; } }
/* the home card (Derek, Nov 1 2026): the whole run is the big number; since found and the vetted bar sit quieter under it */
.hb-line .hb-note { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.hb-since { font-size: 12.5px; color: var(--ink-3); }
.hb-since b { font-weight: 650; font-variant-numeric: tabular-nums; }
.hb-since b.up { color: color-mix(in srgb, var(--yes) 75%, var(--ink-3)); } .hb-since b.down { color: color-mix(in srgb, var(--no) 75%, var(--ink-3)); }
.hb-row .hb-vet { opacity: 0.8; }

/* the #1-signal bot's page (pnl_bot.py, Nov 1 2026) */
.bot-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 18px; }
.bot-stats > div { background: var(--panel); border: 1px solid var(--hair); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.bot-stats strong { font-size: 24px; color: var(--ink); }
.bot-stats strong.big { font-size: 40px; }
.bot-page .up { color: var(--yes); }
.bot-page .down { color: var(--no); }
.bot-chart { width: 100%; height: 220px; margin-top: 16px; background: var(--panel); border: 1px solid var(--hair); border-radius: 14px; }
.bot-zero { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.bot-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.bot-line.up { stroke: var(--yes); }
.bot-line.down { stroke: var(--no); }
.bot-area.up { fill: var(--wash-yes); stroke: none; }
.bot-area.down { fill: rgba(226, 96, 79, 0.14); stroke: none; }
.bot-trades { width: 100%; margin-top: 10px; }
.hb-all.hb-bot { margin-left: 18px; color: var(--yes); }
.board-more.board-bot { margin-left: 16px; color: var(--yes); }
.bot-callout { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--hair-2); border-left: 3px solid var(--yes); border-radius: 10px; background: var(--panel); color: var(--ink-2); }
.bot-callout a { color: var(--ink); }

/* ==== Live page, Nov 1 2026 (Derek): the indicator strength gauge beside the chart, and the chart's zoom / pan ========
   The gauge (gauge.js; the same score as the Indicators panel's #i-score): a strip directly above the chart on a phone,
   a vertical meter left of it on a computer, over the signal boxes. The free view gets a locked teaser, as the panel. */
.chart-rail { display: flex; flex-direction: column; min-width: 0; }
.sgauge { order: 2; margin-top: 10px; padding: 8px 12px; border: 1px solid var(--hair-2); border-radius: 12px;
  background: var(--glass, var(--panel)); display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: 4px 10px; grid-template-areas: "live live" "cap fine"; transition: border-color .3s; }
.sgauge p { margin: 0; }
.sgauge.up { border-color: color-mix(in srgb, var(--yes) 45%, var(--hair-2)); }
.sgauge.down { border-color: color-mix(in srgb, var(--no) 45%, var(--hair-2)); }
.sg-cap { grid-area: cap; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.sg-fine { grid-area: fine; justify-self: end; text-align: right; font-size: 11px; color: var(--ink-3); line-height: 1.3; }
.sg-fine a { color: var(--ink-2); }
.sg-live { grid-area: live; display: flex; align-items: center; gap: 10px; min-width: 0; }
.sg-read { display: contents; }
.sg-dir { order: 0; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.sg-arrow { font-size: 13px; line-height: 1; color: var(--ink-3); }
.sg-word { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.sgauge.up .sg-arrow, .sgauge.up .sg-word { color: var(--yes); }
.sgauge.down .sg-arrow, .sgauge.down .sg-word { color: var(--no); }
.sgauge.is-none .sg-word { color: var(--ink-3); font-weight: 600; }
.sg-meter { order: 1; flex: 1 1 auto; min-width: 60px; }
.sg-score { order: 2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sg-num { font-size: 18px; font-weight: 700; color: var(--ink); }
.sg-of { font-size: 12px; color: var(--ink-3); }
.sg-agree { display: none; }
/* the meter: even in the middle, Up fills one way and Down the other (half the track = 100 points); ticks at 25 and 50 */
.sg-track { position: relative; display: block; height: 8px; border-radius: 4px; background: var(--hair-2); }
.sg-tick { position: absolute; top: -2px; bottom: -2px; width: 1px; background: var(--ink-3); opacity: 0.45; }
.sg-t50d { left: 25%; }
.sg-t25d { left: 37.5%; }
.sg-t25u { left: 62.5%; }
.sg-t50u { left: 75%; }
.sg-mid { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink-2); z-index: 1; }
.sg-fill { position: absolute; top: 0; bottom: 0; left: 50%; width: calc(var(--sg, 0) * 1%); border-radius: 4px;
  background: var(--ink-3); transition: width .4s ease, height .4s ease; }
.sgauge.neg .sg-fill { left: auto; right: 50%; }
.sgauge.up .sg-fill { background: var(--yes); }
.sgauge.down .sg-fill { background: var(--no); }
.sgauge.is-strong.up .sg-fill { box-shadow: 0 0 12px color-mix(in srgb, var(--yes) 65%, transparent); }
.sgauge.is-strong.down .sg-fill { box-shadow: 0 0 12px color-mix(in srgb, var(--no) 65%, transparent); }
/* the free view: locked, as the Indicators panel is */
.sg-locked { display: none; grid-area: live; align-items: center; gap: 8px; color: var(--ink-2); font-size: 13px; text-decoration: none; }
.sg-locked:hover .sg-locked-t { color: var(--ink); }
.sg-locked .lock { margin-top: 0; }
.sg-locked-t { flex: 1 1 auto; min-width: 0; }
.sg-lt-long { display: none; }
.sg-blur { flex: none; font-weight: 700; color: var(--yes); }
body[data-tier="free"] .sgauge .sg-live { display: none; }
body[data-tier="free"] .sgauge .sg-locked { display: flex; }
@media (min-width: 1000px) { body[data-tier="free"] .sgauge .sg-cap::after { content: "Pro"; margin-left: 6px; font-size: 10px; font-weight: 700; color: #fff;
  letter-spacing: 0.03em; text-transform: none; background: var(--cta); border-radius: 999px; padding: 0 7px; } }
@media (max-width: 420px) { .sg-fine a { display: none; } }
@media (prefers-reduced-motion: reduce) { .sg-fill { transition: none; } }
@media (min-width: 1000px) {
  .chart-row .chart-rail { flex: none; width: 168px; gap: 10px; margin-top: 10px; max-height: 560px; }
  .chart-row .chart-rail .fire-list { width: auto; margin-top: 0; max-height: none; flex: 1 1 auto; min-height: 0; }
  .sgauge { order: 0; margin-top: 0; padding: 10px 12px; grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "cap" "live" "fine"; gap: 8px; }
  .sg-fine { justify-self: start; text-align: left; }
  .sg-live { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 12px; align-items: stretch; }
  .sg-meter { order: 0; min-width: 0; display: flex; justify-content: center; }
  .sg-track { width: 12px; height: auto; min-height: 132px; border-radius: 6px; }
  .sg-tick { left: -2px; right: -2px; top: auto; bottom: auto; width: auto; height: 1px; }
  .sg-t50u { left: -2px; top: 25%; }
  .sg-t25u { left: -2px; top: 37.5%; }
  .sg-t25d { left: -2px; top: 62.5%; }
  .sg-t50d { left: -2px; top: 75%; }
  .sg-mid { left: -4px; right: -4px; top: 50%; bottom: auto; width: auto; height: 2px; margin: -1px 0 0; }
  .sg-fill { left: 0; right: 0; top: auto; bottom: 50%; width: auto; height: calc(var(--sg, 0) * 1%); border-radius: 6px; }
  .sgauge.neg .sg-fill { left: 0; right: 0; bottom: auto; top: 50%; }
  .sg-read { order: 1; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; }
  .sg-dir { flex-direction: column; align-items: flex-start; gap: 2px; white-space: normal; }
  .sg-arrow { font-size: 20px; }
  .sg-word { font-size: 18px; line-height: 1.15; }
  .sg-num { font-size: 24px; }
  .sg-agree { display: block; font-size: 11.5px; color: var(--ink-3); line-height: 1.3; }
  .sg-locked { flex-direction: column; align-items: flex-start; gap: 6px; }
  .sg-lt-long { display: inline; }
  .sg-lt-short { display: none; }
  .sg-blur { font-size: 18px; }
}
@media (min-width: 1600px) { .chart-row .chart-rail { max-height: 640px; } }
/* the chart, zoomed in: a hand to drag it along the window */
.chart-panel .zoom-hint { min-width: 0; }
.chart-panel .zoom-ctl .zoom-btn { flex: none; }
canvas.is-zoomed, #chart.is-zoomed { cursor: grab; }
canvas.is-zoomed.is-panning, #chart.is-zoomed.is-panning { cursor: grabbing; }
/* ==== end Live page, Nov 1 2026 ==================================================================================== */
/* ==========================================================================================================================
   Home page, fifth pass + social links in colour (Derek, Nov 1 2026). One block: the community accounts in their platform's
   colour behind our own simple marks (header icons on every page incl. the Live page, footer pills, the home page's
   "Join the community"), the home page's "what Pro does" cards, the bot's sparkline, the optional walkthrough video, and
   the page's motion: one rise on load, sections below the fold rising once into view (home.js adds .rv-wait / .in), a
   pointer-following glow on the cards. All of it off under prefers-reduced-motion.
   ========================================================================================================================== */
:root {
  --discord: #5865f2; --youtube: #ff0000; --reddit: #ff4500;            /* the platforms' own colours, for marks */
  --discord-bg: #5865f2; --youtube-bg: #e00000; --reddit-bg: #d93a00;   /* behind white text: 4.5:1 or better */
}
.soc-discord { --soc: var(--discord); --soc-bg: var(--discord-bg); }
.soc-youtube { --soc: var(--youtube); --soc-bg: var(--youtube-bg); }
.soc-reddit { --soc: var(--reddit); --soc-bg: var(--reddit-bg); }

/* the header's icons: a coloured tile each, white mark */
.top-social { gap: 6px; }
.top-social a.soc { width: 30px; height: 30px; border-radius: 9px; color: #fff; background: var(--soc);
  box-shadow: 0 6px 16px -8px var(--soc), inset 0 1px 0 rgba(255, 255, 255, 0.22); transition: transform .15s, filter .15s, box-shadow .15s; }
.top-social a.soc:hover { color: #fff; background: var(--soc); filter: brightness(1.1); transform: translateY(-1px);
  box-shadow: 0 10px 22px -8px var(--soc), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.top-social a.soc:focus-visible { outline: 2px solid var(--soc); outline-offset: 2px; }
.top-social a.soc svg { width: 19px; height: 19px; stroke-width: 1.8; }
.soc-youtube svg path { fill: currentColor; }
@media (max-width: 520px) { .top-social { gap: 4px; } .top-social a.soc { width: 27px; height: 27px; border-radius: 8px; }
  .top-social a.soc svg { width: 17px; height: 17px; } }
/* the Live page's own header on a phone: the doc pages' two-group grid (.top-nav / .top-tools, Oct 26) was catching it too
   and stacking its icons on top of the theme button and the Pricing pill. Here: the delay line with the icons and the theme
   button on one row, Pricing and the scrolling menu on the next. */
@media (max-width: 640px) {
  body:not(.doc) .top { display: flex; flex-wrap: wrap; }
  body:not(.doc) .top-right { display: flex; width: 100%; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px; }
  body:not(.doc) .top-right > .view { order: 0; flex: 1 0 calc(100% - 150px); justify-content: flex-start; text-align: left; }
  body:not(.doc) .top-right > .top-social { order: 1; }
  body:not(.doc) .top-right > .install-btn, body:not(.doc) .top-right > .theme-toggle { order: 2; }
  body:not(.doc) .top-right > .price-pill { order: 3; }
  body:not(.doc) .top-right > .nav { order: 4; flex: 1 1 0; min-width: 0; }
}

/* the footer's pills: mark and name on the platform's colour */
.foot-social { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 12px; }
.foot-social-l { color: var(--ink-2); font-weight: 650; font-size: 13px; margin-right: 2px; }
.soc-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px 5px 9px; border-radius: 999px;
  background: var(--soc-bg); color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; line-height: 1.2;
  box-shadow: 0 6px 16px -10px var(--soc); transition: transform .15s, filter .15s; }
.foot .soc-pill, .foot .soc-pill:visited { color: #fff; }
.soc-pill:hover { filter: brightness(1.1); transform: translateY(-1px); }
.soc-pill:focus-visible { outline: 2px solid var(--soc); outline-offset: 2px; }
.soc-pill svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.soc-pill svg circle[r="1.1"], .soc-pill svg circle[r=".9"] { fill: currentColor; stroke: none; }
.foot-social .foot-uptime { margin-left: 6px; }

/* --- the hero: sentence-case kicker, the main button that sells, one rise on load ---------------------------------------- */
.home-kick { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 650; }
.home-h2 { max-width: 44ch; }
.home-btn { position: relative; overflow: hidden; transition: transform .18s, box-shadow .18s, filter .18s, border-color .18s; }
.home-btn.shine:hover { transform: translateY(-1px); box-shadow: 0 18px 36px -16px rgba(91, 120, 240, 1); }
.home-btn.shine::after { content: ""; position: absolute; inset: -2px; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.32) 50%, transparent 65%);
  transform: translateX(-110%); transition: transform .7s ease; }
.home-btn.shine:hover::after { transform: translateX(110%); }
@keyframes home-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes home-sheen { from { background-position: 100% 0; } to { background-position: 0 0; } }
.home-lede > * { animation: home-rise .7s cubic-bezier(.2, .7, .2, 1) both; }
.home-lede > :nth-child(2) { animation-delay: .06s; } .home-lede > :nth-child(3) { animation-delay: .14s; }
.home-lede > :nth-child(4) { animation-delay: .2s; } .home-lede > :nth-child(5) { animation-delay: .26s; }
.home-lede > :nth-child(n+6) { animation-delay: .32s; }
.home-board { animation: home-rise .8s .22s cubic-bezier(.2, .7, .2, 1) both; }
.home-count { background-image: linear-gradient(100deg, var(--lead) 0%, var(--yes) 24%, var(--mkt) 50%, var(--pro) 76%, var(--lead) 100%);
  background-size: 200% 100%; background-position: 0 0; animation: home-sheen 2.4s .2s cubic-bezier(.3, .6, .2, 1) both; }

/* the four numbers: the bot's is green when ahead, red when behind */
.home-proof { margin-top: 6px; }
.home-fact:nth-child(4) b { color: var(--yes); }
.home-fact:nth-child(4) b.down { color: var(--no); }

/* how the Lab works: a real sequence, joined by a line on wide screens */
ol.home-why-g { list-style: none; margin: 0; padding: 0; }
.home-steps .home-why-i { position: relative; }
@media (min-width: 981px) {
  .home-steps .home-why-i:not(:last-child)::after { content: ""; position: absolute; top: 32px; right: -17px; width: 18px;
    height: 2px; border-radius: 2px; background: var(--cta); }
}

/* --- what Pro does with the signals: four cards, two by two (one column on a phone) ------------------------------------ */
.home-pro { padding: 56px 0 8px; }
.home-pro-sub { color: var(--ink-2); font-size: 16px; line-height: 1.55; max-width: 62ch; margin: -6px 0 20px; }
.hp-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "board bot" "alerts record"; }
.hp-board { grid-area: board; --glow: var(--gold); }
.hp-bot { grid-area: bot; --glow: var(--yes); }
.hp-alerts { grid-area: alerts; --glow: var(--mkt); }
.hp-record { grid-area: record; --glow: var(--pro); }
.hp-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 18px;
  background: var(--glass); border: 1px solid color-mix(in srgb, var(--glow) 26%, var(--hair-2)); overflow: hidden; isolation: isolate; }
.hp-card h3 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.012em; line-height: 1.25; }
.hp-card > p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.hp-ico { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: color-mix(in srgb, var(--glow) 15%, transparent); border: 1px solid color-mix(in srgb, var(--glow) 40%, transparent); }
.hp-ico svg { width: 22px; height: 22px; fill: none; stroke: var(--glow); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hp-stat { margin: 4px 0 0; color: var(--ink-2); font-size: 14.5px; }
.hp-stat b { font-size: 30px; font-weight: 750; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.hp-stat b:first-child { color: var(--gold); }
.hp-stat .hp-dot { margin: 0 6px; }
.hp-near { display: flex; align-items: center; gap: 10px; margin: 2px 0 0; font-size: 13.5px; color: var(--ink-2); }
.hp-near .hb-bar { width: 110px; }
.hp-near b { color: var(--ink); }
.home-week:has(> .week-card[hidden]) { display: none; }      /* no empty heading while the week's numbers can't load */
:root[data-theme="light"] .hp-stat b:first-child { color: var(--warn-ink); }
.hp-link { margin-top: auto; align-self: flex-start; padding-top: 6px; font-weight: 700; font-size: 14.5px; color: var(--ink);
  text-decoration: none; border-bottom: 2px solid color-mix(in srgb, var(--glow) 70%, transparent); }
.hp-link:hover { border-bottom-color: var(--glow); }
.hp-bot-n { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 2px 0 0; }
.hp-bot-n b { font-size: 30px; font-weight: 750; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.hp-bot-n b.up { color: var(--yes); } .hp-bot-n b.down { color: var(--no); }
.hp-bot-n span { color: var(--ink-2); font-size: 13.5px; }
.hp-spark { display: block; width: 100%; height: 72px; margin: 4px 0 0; }
.hp-spark .z { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; opacity: .6; }
.hp-spark .l { fill: none; stroke: var(--yes); stroke-width: 2.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.hp-spark .a { fill: var(--wash-yes); stroke: none; }
.hp-spark.down .l { stroke: var(--no); } .hp-spark.down .a { fill: var(--wash-no); }
.hp-fine { margin: 0; font-size: 12px; line-height: 1.45; color: var(--ink-3); }
/* the glow: resting at the top of each card, following the pointer on hover (home.js sets --mx / --my) */
.hp-glow::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
  background: radial-gradient(520px circle at var(--mx, 30%) var(--my, 0%), color-mix(in srgb, var(--glow) 16%, transparent), transparent 62%);
  transition: opacity .3s; }
.hp-glow:hover::before { opacity: 1; }
@media (max-width: 640px) { .hp-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "board" "bot" "alerts" "record"; } }

/* --- join the community: a card per account, in its colour ------------------------------------------------------------- */
.home-social { margin: 56px 0 0; padding: clamp(20px, 3vw, 32px); border-radius: 24px; border: 1px solid var(--hair-2);
  background: radial-gradient(60% 90% at 0% 0%, color-mix(in srgb, var(--discord) 16%, transparent), transparent 70%),
              radial-gradient(50% 80% at 55% 0%, color-mix(in srgb, var(--youtube) 10%, transparent), transparent 70%),
              radial-gradient(55% 90% at 100% 100%, color-mix(in srgb, var(--reddit) 13%, transparent), transparent 70%), var(--glass); }
.hs-head p { color: var(--ink-2); font-size: 16px; margin: -6px 0 20px; max-width: 60ch; }
.hs-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hs-card { --glow: var(--soc); position: relative; border-radius: 18px; overflow: hidden; isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--soc) 45%, var(--hair-2));
  background: linear-gradient(165deg, color-mix(in srgb, var(--soc) 16%, var(--panel)), var(--panel) 72%);
  transition: transform .2s, box-shadow .2s; }
.hs-card:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -24px var(--soc); }
.hs-card a { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 22px; color: var(--ink); text-decoration: none; }
.hs-card a:focus-visible { outline: 2px solid var(--soc); outline-offset: -3px; border-radius: 18px; }
.hs-card h3 { margin: 4px 0 0; font-size: 20px; font-weight: 720; letter-spacing: -0.015em; }
.hs-card p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.hs-mark { display: inline-grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; color: #fff; background: var(--soc);
  box-shadow: 0 10px 26px -10px var(--soc), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.hs-mark svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hs-mark svg circle[r="1.1"], .hs-mark svg circle[r=".9"] { fill: currentColor; stroke: none; }
.hs-btn { margin-top: auto; align-self: flex-start; padding: 9px 16px; border-radius: 999px; background: var(--soc-bg); color: #fff;
  font-weight: 700; font-size: 14.5px; box-shadow: 0 8px 20px -12px var(--soc); }
.hs-card:hover .hs-btn { filter: brightness(1.08); }
@media (max-width: 860px) { .hs-list { grid-template-columns: minmax(0, 1fr); } .hs-card a { padding: 18px; } }

/* --- the walkthrough video (only while pages.HOME_VIDEO_ID is set) --------------------------------------------------------- */
.home-video { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(20px, 3vw, 36px); align-items: center;
  padding: 52px 0 0; }
.hv-copy p { color: var(--ink-2); font-size: 16px; line-height: 1.55; margin: -6px 0 18px; max-width: 42ch; }
.hv-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: var(--panel);
  border: 1px solid var(--hair-2); box-shadow: 0 30px 70px -36px rgba(57, 135, 229, 0.75); }
.hv-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 860px) { .home-video { grid-template-columns: minmax(0, 1fr); } }

/* the plans: small finishing touches */
.home-plans { background: radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--pro) 13%, transparent), transparent 60%), var(--glass); }
.home-plan-list li.best { box-shadow: 0 16px 36px -24px var(--yes); }
.home-plan-list li.best small { color: var(--yes); font-weight: 650; }

/* --- rising into view once (home.js); in-view sections are never hidden ------------------------------------------------ */
.rv-wait { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.rv-wait.in { opacity: 1; transform: none; }
.rv-wait .hp-card, .rv-wait .hs-card { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.rv-wait.in .hp-card, .rv-wait.in .hs-card { opacity: 1; transform: none; }
.rv-wait.in .hp-card:nth-child(2), .rv-wait.in .hs-card:nth-child(2) { transition-delay: .08s; }
.rv-wait.in .hp-card:nth-child(3), .rv-wait.in .hs-card:nth-child(3) { transition-delay: .16s; }
.rv-wait.in .hp-card:nth-child(4) { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .home-lede > *, .home-board, .home-count { animation: none; }
  .rv-wait, .rv-wait .hp-card, .rv-wait .hs-card { opacity: 1; transform: none; transition: none; }
  .home-btn.shine::after { display: none; }
  .home-btn, .hs-card, .hp-glow::before, .top-social a.soc, .soc-pill { transition: none; }
  .hs-card:hover, .home-btn.shine:hover, .top-social a.soc:hover, .soc-pill:hover { transform: none; }
}

/* ==== Live page, Nov 1 2026 (Derek), second pass: the built-in "Top 3 current Lab signals" in Your signals (rules.js), the
   strength gauge's Now / 1 min / 3 min switch and its trend arrow (gauge.js); then the chart: the "Chance it flips" line,
   the free view's "Live in Pro" strip, and each signal's ✓ / ✗ once the result is in (chart.js, app.js) ================== */
:root, :root[data-theme="dark"] { --top3: #f06595; --flip: #66d9e8; }
:root[data-theme="light"] { --top3: #c2255c; --flip: #0c8599; }
.lk-flip { border-color: var(--flip); border-top-width: 2px; box-shadow: 0 3px 0 -1px color-mix(in srgb, var(--flip) 30%, transparent); }
.pro-strip { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 7px; border-radius: 999px;
  background: var(--pro); color: #fff; font-size: 11.5px; font-weight: 700; line-height: 1.4; text-decoration: none; white-space: nowrap;
  box-shadow: 0 4px 14px -6px var(--pro); }
.pro-strip[hidden] { display: none; }
.pro-strip:hover, .pro-strip:focus-visible { filter: brightness(1.1); }
.pro-strip .lock { width: 10px; height: 12px; margin: 0; }
.pro-strip .lock::before { background: #fff; }
.pro-strip .lock::after { border-color: #fff; }
.fl-res { font-size: 11.5px; font-weight: 700; }
.fl-res.won, .fl-prev-it.won { color: var(--yes); }
.fl-res.lost, .fl-prev-it.lost { color: var(--no); }
.fire-list .fl-prev { flex: none; align-self: center; margin: 0; font-size: 12px; color: var(--ink-3); max-width: 260px; }
.fire-list .fl-prev b { font-weight: 650; color: var(--ink-2); }
.fl-prev-it { font-weight: 650; white-space: nowrap; }
@media (min-width: 1000px) { .chart-row .fire-list .fl-prev { align-self: stretch; max-width: none; padding-top: 6px; border-top: 1px solid var(--hair); } }
.rules li.top3-item { border-color: color-mix(in srgb, var(--top3) 40%, var(--hair)); }
.top3-tag { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.02em; vertical-align: 1px; color: var(--ink-2); border: 1px solid var(--hair-2); }
.top3-sw[aria-pressed="true"] { color: var(--ink); border-color: var(--top3); background: color-mix(in srgb, var(--top3) 16%, transparent); }
.top3-follow { display: none; grid-column: 2 / -1; color: var(--ink-2); font-size: 12.5px; }
.rules li.top3-item:hover .top3-follow, .rules li.top3-item:focus-within .top3-follow, .rules li.top3-item.is-open .top3-follow { display: block; }
.top3-which[aria-expanded="true"] { color: var(--ink); border-color: var(--ink-3); }
/* the gauge's switch: on a phone the caption and the switch share the line under the reading; on a computer, a column */
.sgauge { grid-template-areas: "live live" "cap modes" "avg fine"; }
.sg-modes { grid-area: modes; justify-self: end; display: inline-flex; padding: 2px; gap: 2px; border-radius: 9px; border: 1px solid var(--hair-2); }
.sg-mode { font: inherit; font-size: 11.5px; font-weight: 650; line-height: 1.2; padding: 3px 8px; border: 0; border-radius: 7px;
  background: transparent; color: var(--ink-3); cursor: pointer; white-space: nowrap; }
.sg-mode:hover { color: var(--ink); }
.sg-mode[aria-pressed="true"] { background: var(--hair-2); color: var(--ink); }
.sg-avg { grid-area: avg; font-size: 11px; color: var(--ink-3); line-height: 1.3; min-width: 0; }
.sg-trend { display: inline-block; min-width: 1em; margin-left: 4px; font-size: 14px; font-weight: 700; color: var(--ink-3); }
.sg-trend.rising { color: var(--ink); }
body[data-tier="free"] .sgauge .sg-modes, body[data-tier="free"] .sgauge .sg-avg { display: none; }
body[data-tier="free"] .sgauge { grid-template-areas: "live live" "cap fine"; }
@media (min-width: 1000px) {
  .sgauge { grid-template-areas: "cap" "modes" "live" "avg" "fine"; }
  .sg-modes { justify-self: stretch; }
  .sg-mode { flex: 1 1 0; padding: 3px 4px; }
  .sg-trend { font-size: 16px; }
  body[data-tier="free"] .sgauge { grid-template-areas: "cap" "live" "fine"; }
}
.bot-page h1 .bot-ver { font-size: 15px; font-weight: 600; color: var(--ink-3); margin-left: 8px; letter-spacing: 0; }
.bot-past { border-left: 3px solid var(--hair-2); padding-left: 10px; }
.share-pre { white-space: pre-wrap; background: var(--panel); border: 1px solid var(--hair); border-radius: 10px; padding: 12px 14px; font-size: 14px; color: var(--ink); }

/* home on phones (Derek, Nov 1 2026: "move the video and previous market thing more near the top so mobile users can quickly
   see the appeal"): the hero's text, then the video and the replay, then the signals board and the tiles */
@media (max-width: 980px) {
  .home { display: flex; flex-direction: column; }
  .home > * { order: 10; }
  .home-hero { display: contents; }
  .home-lede { order: 1; padding-top: 22px; }
  .home > .home-video { order: 2; }
  .home > .home-demo-sec { order: 3; }
  .home-hero > .home-board { order: 4; margin-top: 28px; }
  .home > .home-proof { order: 5; }
}