/* Component-scoped desk. The market and graph stages have independent intrinsic
   dimensions. The parent graph controller controls only the bounded outer shell. */
:where(.td) {
  /* colour: Preflop brand kit (refs/brand/BRAND.md) in the Chief's desk steps (03-v4-brand-spec.md §1).
     WCAG on panel / raised: text 14.7 / 13.5, muted 7.8 / 7.2, faint 5.6 / 5.2. */
  --td-ground: #0d0f14; /* kit dark background, exact */
  --td-panel: #14171d; /* every pane */
  --td-panel-raised: #1b1f26; /* inputs, chips, selected row/range/legend, tooltip, spread band */
  --td-hairline: #2b303a; /* every border, pane gap and gridline */
  --td-grid-even: #515660; /* the 50% even-money gridline (hairline 60% + faint 40%), a hex for the canvas */
  --td-hover: rgb(237 232 222 / 0.04);
  --td-text: #ede8de; /* kit logo ink, exact */
  --td-text-muted: #a6abb6;
  --td-text-faint: #8b909a;
  /* outcomes (kit: outcome colours for outcomes); never a solid fill. Rest .08, hover .12, selected .12 + 1px ring,
     selected hover .16 + ring. Side text on every state and row background: Yes ≥ 6.1, No ≥ 4.58. */
  --td-yes: #6dd043;
  --td-yes-soft: rgb(109 208 67 / 0.08);
  --td-yes-hover: rgb(109 208 67 / 0.12);
  --td-yes-sel-hover: rgb(109 208 67 / 0.16);
  --td-no: #f2716a;
  --td-no-soft: rgb(242 113 106 / 0.08);
  --td-no-hover: rgb(242 113 106 / 0.12);
  --td-no-sel-hover: rgb(242 113 106 / 0.16);
  --td-yes-depth: rgb(109 208 67 / 0.14);
  --td-no-depth: rgb(242 113 106 / 0.14); /* order-book bars */
  /* the brand accent (kit: greener teal, reserved for Preflop and primary actions): the focus ring and the action */
  --td-accent: #00bfae;
  --td-action: var(--td-accent);
  --td-action-hover: #21c5b5;
  --td-action-press: #01ad9f;
  --td-on-action: #0d0f14; /* kit dark control: near-black on teal 8.27, hover 8.87, pressed 6.83 */
  --td-index: var(
    --td-accent
  ); /* the TK monogram: the deck's index ink on a dark face (spec §3) */
  --td-pulse: var(
    --td-series-1
  ); /* Canto's live ring takes its own line colour */
  /* series: dataviz validator, dark, all pairs, on #14171D and #0D0F14: ALL PASS (CVD worst raspberry/blue 9.5 protan,
     normal-vision worst violet/blue 17.5). Every line ≥ 19.7 from the brand teal, ≥ 20.6 from Yes, ≥ 13.3 from No. */
  --td-series-1: #be8829; /* Canto to everyone, amber */
  --td-series-2: #2f7cac; /* Public API, calm blue (h 240) */
  --td-series-3: #a077eb; /* Notetaker on mobile, violet (moved with the blue so CVD passes) */
  --td-series-4: #c4447a; /* Hardware device, raspberry */
  /* type (kit): Instrument Sans for UI text, DM Mono for prices, probabilities, time and compact labels
     (400 and 500 only: the family has no 600), DM Serif Display for the monogram */
  --td-font-ui: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --td-font-num: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --td-font-index: "DM Serif Display", Georgia, "Times New Roman", serif;
  /* geometry (8px grid, hairlines excepted) */
  --td-radius: 12px;
  --td-radius-ctl: 6px;
  --td-radius-tag: 4px;
  --td-pad: 24px;
  --td-pad-sm: 16px;
  --td-gap-l: 24px;
  --td-gap-m: 16px;
  --td-side-w: 352px;
  --td-axis-w: 56px;
  --td-head-h: 40px;
  --td-colhead-h: 32px;
  --td-row-h: 64px;
  --td-book-row-h: 32px;
  --td-trade-row-h: 48px;
  --td-ctl-h: 40px;
  --td-ctl-h-sm: 44px;
  --td-plot-min: 200px;
  --td-plot-max: 320px;
  --td-plot-h-sm: 220px;
  /* motion */
  --td-flash-ms: 420ms;
  --td-roll-ms: 400ms;
  --td-seg-ms: 600ms;
  --td-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (max-width: 1279px) {
  :where(.td) {
    --td-side-w: 320px;
  }
}
@media (min-width: 1024px) and (max-height: 819px) {
  :where(.td) {
    --td-pad: 16px;
    --td-gap-l: 16px;
    --td-gap-m: 8px;
  }
}

.td {
  container: td / inline-size;
  color-scheme: dark;
  position: relative;
  font-family: var(--td-font-ui);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--td-text);
  font-variant-numeric: tabular-nums;
  font-synthesis: none;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}
.td *,
.td *::before,
.td *::after {
  box-sizing: border-box;
}
.td :where(h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, ul, li) {
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
}
.td :where(ol, ul) {
  list-style: none;
}
.td :where(button) {
  appearance: none;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  text-align: inherit;
  line-height: inherit;
  -webkit-tap-highlight-color: transparent;
}
.td :where(input) {
  font: inherit;
  color: inherit;
  margin: 0;
}
.td :where(svg, canvas) {
  display: block;
}
.td :focus-visible {
  outline: 2px solid var(--td-accent);
  outline-offset: 2px;
}
.td :where(button):focus:not(:focus-visible) {
  outline: none;
}
.td .td-tip-r[hidden],
.td .td-tip-ohlc[hidden] {
  display: none !important;
}
.td .td-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.td .td-key {
  display: inline-block;
  flex: none;
  width: 12px;
  height: 2px;
  border-radius: 1px;
  background: var(--k, transparent);
}

/* ---------- bounded stages ---------- */
.td .td-grid {
  --td-p: var(--td-pad-sm);
  --td-c: var(--td-ctl-h-sm);
  --td-gl: var(--td-pad-sm);
  --td-gm: 8px;
  position: relative;
  min-width: 0;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--td-hairline);
  border-radius: var(--td-radius);
  background: var(--td-panel);
}
.td .td-market-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "rows" "preview";
  align-items: start;
  min-width: 0;
  gap: 1px;
  background: var(--td-panel);
}
.td .td-graph-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "chart" "rules";
  min-width: 0;
  gap: 1px;
  background: var(--td-hairline);
}
.td .td-pane {
  background: var(--td-panel);
  min-width: 0;
  padding: var(--td-p);
}
.td .td-rows {
  border-radius: 0;
}
.td .td-chart,
.td .td-rules {
  border-radius: 0;
}
@container td (min-width:640px) {
  .td .td-grid {
    --td-p: var(--td-pad);
    --td-c: var(--td-ctl-h);
    --td-gl: var(--td-gap-l);
    --td-gm: var(--td-gap-m);
  }
  .td .td-market-stage {
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-template-areas: "rows preview";
  }
}
@container td (min-width:1080px) {
  .td .td-market-stage {
    grid-template-columns: minmax(0, 1fr) 400px;
  }
}
@container td (min-width:640px) and (max-width:879px) {
  .td .td-market-stage {
    grid-template-columns: minmax(0, 1fr) 340px;
  }
}

/* ---------- chart pane: header, figure row, legend, plot ---------- */
.td .td-chart {
  grid-area: chart;
  container: tdchart / inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  grid-template-areas: "head head" "fig fig" "legend legend" "ranges ranges" "plot plot";
}
.td .td-head {
  grid-area: head;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  grid-template-areas: "av title title" "vol vol tag";
  column-gap: 16px;
  row-gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}
.td .td-av {
  grid-area: av;
  position: relative;
  width: 40px;
  height: 56px;
  border-radius: var(--td-radius-tag);
  background: var(--td-panel-raised);
  border: 1px solid var(--td-hairline);
}
.td .td-av span {
  position: absolute;
  left: 5px;
  top: 5px;
  font-family: var(--td-font-index);
  font-size: 18px;
  line-height: 18px;
  color: var(--td-index);
  letter-spacing: 0.01em;
}
.td .td-title {
  grid-area: title;
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  text-wrap: balance;
  min-width: 0;
}
.td .td-hvol {
  grid-area: vol;
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.td .td-lab {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--td-text-faint);
}
.td .td-hvol-v {
  font-family: var(--td-font-num);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}
.td .td-tag {
  grid-area: tag;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--td-hairline);
  border-radius: var(--td-radius-tag);
  font-family: var(--td-font-num);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--td-text-muted);
  white-space: nowrap;
}
.td .td-fig {
  grid-area: fig;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 8px;
  height: 40px;
  min-width: 0;
}
.td .td-fig-v {
  font-family: var(--td-font-num);
  font-size: 32px;
  line-height: 40px;
  font-weight: 500;
}
.td .td-fig-l {
  font-size: 14px;
  color: var(--td-text-muted);
}
.td .td-fig .td-chg {
  font-size: 14px;
  margin-left: 4px;
}
.td .td-ranges {
  grid-area: ranges;
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.td .td-rng {
  height: var(--td-c);
  min-width: 44px;
  padding: 0 12px;
  border-radius: var(--td-radius-ctl);
  font-family: var(--td-font-num);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--td-text-faint);
  transition:
    background-color 120ms var(--td-ease),
    color 120ms var(--td-ease);
}
.td .td-rng:hover {
  color: var(--td-text);
}
.td .td-rng[aria-pressed="true"] {
  background: var(--td-panel-raised);
  color: var(--td-text);
}
.td .td-legend {
  grid-area: legend;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 8px;
  margin: 8px -8px 0;
}
.td .td-leg {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 8px;
  border-radius: var(--td-radius-ctl);
  font-size: 13px;
  line-height: 20px;
  white-space: nowrap;
  min-width: 0;
  transition: background-color 120ms var(--td-ease);
}
.td .td-leg:hover {
  background: var(--td-hover);
}
.td .td-leg[aria-pressed="true"] {
  background: var(--td-panel-raised);
}
.td .td-leg-n {
  color: var(--td-text-muted);
}
.td .td-leg[aria-pressed="true"] .td-leg-n {
  color: var(--td-text);
}
.td .td-leg-v {
  font-family: var(--td-font-num);
  font-weight: 500;
  color: var(--td-text);
}
.td .td-leg-full {
  display: none;
}
@container tdchart (min-width: 480px) {
  .td .td-leg-full {
    display: inline;
  }
  .td .td-leg-short {
    display: none;
  }
}
@container td (min-width: 880px) {
  .td .td-chart {
    grid-template-rows: auto auto auto minmax(0, 1fr);
    grid-template-areas: "head head" "fig ranges" "legend legend" "plot plot";
  }
  .td .td-head {
    grid-template-columns: 40px minmax(0, 1fr) auto auto;
    grid-template-areas: "av title vol tag";
    column-gap: 16px;
    row-gap: 0;
    height: 56px;
  }
  .td .td-title {
    font-size: 22px;
    line-height: 28px;
  }
  .td .td-hvol {
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    margin-right: 8px;
  }
  .td .td-fig-v {
    font-size: 40px;
  }
  .td .td-ranges {
    margin-top: 0;
    gap: 4px;
    align-self: center;
    justify-self: end;
  }
  .td .td-rng {
    height: 32px;
    min-width: 40px;
    padding: 0 10px;
  }
  .td .td-legend {
    display: flex;
    flex-wrap: wrap;
    column-gap: 8px;
    row-gap: 8px;
  }
  .td .td-leg {
    height: 24px;
  }
}
@container td (min-width: 1216px) {
  .td .td-title {
    font-size: 24px;
    line-height: 32px;
  }
}

.td .td-plotwrap {
  grid-area: plot;
  position: relative;
  height: calc(var(--td-plot-h-sm) + 24px);
  margin-top: 16px;
  min-width: 0;
  touch-action: pan-y;
}
@container td (min-width: 880px) {
  .td .td-plotwrap {
    height: auto;
    min-height: calc(var(--td-plot-min) + 24px);
  }
}
.td .td-cv {
  position: absolute;
  left: 0;
  top: 0;
}
.td .td-ylab,
.td .td-xlab,
.td .td-vtag {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--td-font-num);
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
  pointer-events: none;
}
.td .td-ylab {
  height: 15px;
  line-height: 15px;
  color: var(--td-text-faint);
  transition: opacity 160ms var(--td-ease);
}
.td .td-ylab.td-off {
  opacity: 0;
}
.td .td-xlab {
  line-height: 16px;
  color: var(--td-text-faint);
}
.td .td-vtag {
  height: 16px;
  line-height: 16px;
  font-weight: 500;
  color: var(--td-text);
}
.td .td-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--k);
  box-shadow: 0 0 0 2px var(--td-panel);
  pointer-events: none;
}
.td .td-pulse-at {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.td .td-pulse {
  position: absolute;
  left: -6px;
  top: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--td-pulse);
  opacity: 0;
}
.td.td-run .td-pulse {
  animation: td-pulse 2.4s var(--td-ease) infinite;
}
@keyframes td-pulse {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  66.6% {
    transform: scale(2.4);
    opacity: 0;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}
.td .td-hit {
  position: absolute;
  left: 0;
  top: 0;
  cursor: crosshair;
  border-radius: 2px;
}
.td .td-hit:focus-visible {
  outline-offset: -2px;
}
.td .td-xh {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  background: var(--td-text-faint);
  pointer-events: none;
}
.td .td-xdot {
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--k);
  box-shadow: 0 0 0 2px var(--td-panel);
  pointer-events: none;
}
.td .td-tip {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  padding: 8px 12px;
  background: var(--td-panel-raised);
  border: 1px solid var(--td-hairline);
  border-radius: var(--td-radius-ctl);
  white-space: nowrap;
  pointer-events: none;
}
.td .td-tip-h {
  font-family: var(--td-font-num);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: var(--td-text-faint);
  margin-bottom: 4px;
}
.td .td-tip-r {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 20px;
  font-size: 13px;
}
.td .td-tip-v {
  min-width: 5ch;
  text-align: right;
  font-family: var(--td-font-num);
  font-weight: 500;
}
.td .td-tip-r .td-key {
  width: 8px;
}
.td .td-tip-n {
  color: var(--td-text-muted);
}

/* rolling digits (headline figure and legend values only) */
.td .td-ch {
  display: inline-block;
  position: relative;
  clip-path: inset(0 -2px);
}
.td .td-ch-in {
  display: inline-block;
}
.td .td-ch-out {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
}

/* 24h moves: SVG triangle plus a number, always together */
.td .td-chg {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-weight: 600;
  white-space: nowrap;
}
.td .td-n {
  font-family: var(--td-font-num);
  font-weight: 500;
}
.td .td-tri {
  width: 8px;
  height: 6px;
  fill: currentColor;
  flex: none;
}
.td .td-dn .td-tri {
  transform: rotate(180deg);
}
.td .td-flat .td-tri {
  display: none;
}
.td .td-up {
  color: var(--td-yes);
}
.td .td-dn {
  color: var(--td-no);
}
.td .td-flat {
  color: var(--td-text-faint);
}

/* flashes: a side-colour tint on a pseudo-element, animated by opacity */
.td .td-fx {
  position: relative;
  isolation: isolate;
}
.td .td-fx::after {
  content: "";
  position: absolute;
  inset: -2px -4px;
  z-index: -1;
  border-radius: var(--td-radius-tag);
  background: color-mix(
    in oklch,
    var(--td-fxc, var(--td-yes)) 20%,
    transparent
  );
  opacity: 0;
  pointer-events: none;
}

/* a figure inside a line of UI text ("Yes 72¢", "Jan 31, 2027  $48.2K Vol."): DM Mono and Instrument Sans put their
   baselines within 0.02em of each other at equal line-heights, so centred flex items share one baseline */
.td .td-num {
  font-family: var(--td-font-num);
  font-weight: 500;
}

/* Yes / No buttons (rows and ticket). Outcome colours only, never a solid fill: the teal action is the desk's one
   solid bright control. Rest tint, hover tint, selected = hover tint + 1px ring in the side colour, selected hover. */
.td .td-sb {
  --td-s: var(--td-yes);
  --td-s-rest: var(--td-yes-soft);
  --td-s-hover: var(--td-yes-hover);
  --td-s-selhover: var(--td-yes-sel-hover);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: var(--td-c);
  border-radius: var(--td-radius-ctl);
  background: var(--td-s-rest);
  color: var(--td-s);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px transparent;
  transition:
    background-color 120ms var(--td-ease),
    box-shadow 120ms var(--td-ease);
}
.td .td-sb.td-n {
  --td-s: var(--td-no);
  --td-s-rest: var(--td-no-soft);
  --td-s-hover: var(--td-no-hover);
  --td-s-selhover: var(--td-no-sel-hover);
}
.td .td-sb:hover {
  background: var(--td-s-hover);
}
.td .td-sb:is([aria-pressed="true"], [aria-checked="true"]) {
  background: var(--td-s-hover);
  box-shadow: inset 0 0 0 1px var(--td-s);
}
.td .td-sb:is([aria-pressed="true"], [aria-checked="true"]):hover {
  background: var(--td-s-selhover);
}

.td .td-cta {
  width: 100%;
  height: 48px;
  border: 0;
  border-radius: var(--td-radius-ctl);
  background: var(--td-action);
  color: var(--td-on-action);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  text-align: center;
  transition: background-color 120ms var(--td-ease);
}
.td .td-cta:hover {
  background: var(--td-action-hover);
}
.td .td-cta:active {
  background: var(--td-action-press);
}
.td .td-cta:disabled {
  background: var(--td-panel-raised);
  color: var(--td-text-muted);
  cursor: default;
}
.td .td-micro {
  color: var(--td-text-faint);
  font-size: 11px;
  line-height: 18px;
}

/* ---------- lower panes: shared head and table grammar ---------- */
.td .td-rows {
  padding-top: 0;
}
.td .td-ph {
  height: var(--td-head-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
}
.td .td-ph-t {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--td-text-faint);
}
.td .td-tr {
  display: grid;
  grid-template-columns: var(--td-cols);
  column-gap: 16px;
  align-items: center;
  min-width: 0;
}
.td .td-th {
  height: var(--td-colhead-h);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--td-text-faint);
}
.td .td-r {
  text-align: right;
}

/* milestones table. Columns (documented):
   ≥ 736px: Milestone 1fr | Chance 64 | 24h 56 | Closes 104 | Volume 72 | Yes/No 200 (96 + 8 + 96), gap 16
            (736, not 720: the label column then keeps ≥ 160px, so "Notetaker on mobile" never truncates)
   480–735: Milestone 1fr (label, then Closes and Volume on a muted second line) | Chance 64 | 24h 48 | Yes/No 168 (80 + 8 + 80)
   < 480:   stacked (label | chance and 24h, then Yes and No at half width each, 44px) */
.td .td-rows {
  grid-area: rows;
  container: tdrows / inline-size;
}
.td .td-tbl {
  --td-cols: minmax(0, 1fr) 64px 48px 168px;
}
.td .td-row {
  position: relative;
  height: var(--td-row-h);
  margin: 0 calc(-1 * var(--td-p));
  padding: 0 var(--td-p);
  border-top: 1px solid var(--td-hairline);
  transition: background-color 120ms var(--td-ease);
}
.td .td-row:hover {
  background: var(--td-hover);
}
.td .td-row.td-sel {
  background: var(--td-panel-raised);
}
.td .td-c-lbl {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.td .td-lbl {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--td-text);
  border-radius: var(--td-radius-tag);
  white-space: nowrap;
}
.td .td-lbl-t {
  overflow: hidden;
  text-overflow: ellipsis;
}
/* touch: the label button toggles its line; a 44px hit area around it, no visual change (review B5, Chief item 5) */
@media (max-width: 1023px), (pointer: coarse) {
  .td .td-lbl::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }
}
.td .td-meta {
  display: flex;
  gap: 12px;
  padding-left: 20px;
  font-size: 12px;
  line-height: 16px;
  color: var(--td-text-muted);
  white-space: nowrap;
}
.td .td-meta .td-num {
  font-weight: 400;
}
.td .td-c-ch {
  text-align: right;
  font-family: var(--td-font-num);
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
}
.td .td-c-chg {
  text-align: right;
  font-size: 13px;
}
.td .td-c-cl,
.td .td-c-vol {
  display: none;
  text-align: right;
}
.td .td-row > .td-c-cl,
.td .td-row > .td-c-vol {
  font-family: var(--td-font-num);
  font-size: 13px;
  color: var(--td-text-muted);
}
.td .td-c-btn {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.td .td-c-btn .td-sb {
  width: 80px;
}
.td .td-fx.td-in {
  display: inline-block;
}
@container tdrows (min-width: 736px) {
  .td .td-tbl {
    --td-cols: minmax(0, 1fr) 64px 56px 104px 72px 200px;
  }
  .td .td-c-cl,
  .td .td-c-vol {
    display: block;
  }
  .td .td-meta {
    display: none;
  }
  .td .td-c-btn .td-sb {
    width: 96px;
  }
}
@container tdrows (max-width: 479px) {
  .td .td-tbl .td-th {
    display: none;
  }
  .td .td-row {
    height: auto;
    padding-block: 16px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "lbl ch" "btn btn";
    row-gap: 8px;
  }
  .td .td-row .td-c-lbl {
    grid-area: lbl;
    height: 44px;
  }
  .td .td-lbl {
    line-height: 24px;
  }
  .td .td-meta {
    line-height: 20px;
  }
  .td .td-row .td-c-ch {
    grid-area: ch;
    align-self: start;
    font-size: 18px;
    line-height: 24px;
  }
  .td .td-row .td-c-chg {
    grid-area: ch;
    align-self: end;
    justify-self: end;
    line-height: 20px;
  }
  .td .td-row .td-c-btn {
    grid-area: btn;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .td .td-row .td-c-btn .td-sb {
    width: auto;
    height: 44px;
  }
}

/* rules: full width; the facts sit exactly under the side column's content box */
.td .td-rules {
  grid-area: rules;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 16px;
}
.td .td-rules-h {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--td-text-faint);
}
.td .td-rules-sel {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 20px;
}
.td .td-rule {
  margin-top: 8px;
  max-width: 72ch;
  font-size: 14px;
  line-height: 22px;
  color: var(--td-text-muted);
}
.td .td-honest {
  margin-top: 8px;
  font-size: 12px;
  line-height: 16px;
  color: var(--td-text-faint);
}
.td .td-facts {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  column-gap: 32px;
  align-content: start;
}
.td .td-facts > div {
  display: flex;
  flex-direction: column;
}
.td .td-facts dt {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--td-text-faint);
}
.td .td-facts dd {
  font-family: var(--td-font-num);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}
@container td (min-width: 880px) {
  .td .td-rules {
    grid-template-columns: minmax(0, 1fr) calc(
        var(--td-side-w) - 2 * var(--td-p)
      );
    column-gap: calc(2 * var(--td-p) + 1px);
  }
  .td .td-facts {
    grid-template-columns: repeat(3, max-content);
    justify-content: space-between;
  }
}

@media (prefers-reduced-motion: reduce) {
  .td *,
  .td *::before,
  .td *::after {
    transition: none !important;
    animation: none !important;
  }
}
/* td:end */

/* Market entry starts with the five milestone rows; overview depth follows below. */
.td {
  --td-index: var(--td-text);
}
/* Focused market detail follows the rows. Its geometry stays fixed while markets change. */
.td .td-binary {
  border-top: 1px solid var(--td-hairline);
  margin: 0 calc(-1 * var(--td-p));
  padding: 28px var(--td-p) 6px;
  min-width: 0;
  background: rgb(0 0 0 / 0.08);
}
.td .td-binary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.td .td-binary-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 10px/16px var(--td-font-num);
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--td-text-faint);
}
.td .td-binary-kicker [data-r="binaryNumber"] {
  color: var(--td-text-muted);
}
.td .td-binary-kicker-sep {
  width: 1px;
  height: 9px;
  background: var(--td-hairline);
}
.td .td-binary-live {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 10px/16px var(--td-font-num);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--td-text-faint);
  white-space: nowrap;
}
.td .td-binary-live i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--td-accent);
  box-shadow: 0 0 0 3px rgb(0 191 174 / 0.07);
}
.td .td-binary-heading {
  min-height: 84px;
  padding-top: 12px;
}
.td .td-binary-question {
  max-width: 46ch;
  font-size: 21px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: -0.025em;
  text-wrap: pretty;
}
.td .td-binary-cutoff {
  margin-top: 7px;
  font: 10px/18px var(--td-font-num);
  color: var(--td-text-faint);
}
.td .td-binary-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-top: 15px;
}
.td .td-binary-probability > div {
  display: flex;
  align-items: baseline;
}
.td .td-binary-probability-v {
  font: 500 52px/58px var(--td-font-num);
  letter-spacing: -0.07em;
}
.td .td-binary-probability-unit {
  font: 400 35px/1 var(--td-font-num);
  letter-spacing: -0.08em;
  margin-left: 2px;
}
.td .td-binary-probability-label {
  margin-left: 10px;
  font: 13px/20px var(--td-font-ui);
  color: var(--td-text-muted);
}
.td .td-binary-change {
  display: block;
  margin-top: 3px;
  font: 11px/18px var(--td-font-num);
  color: var(--td-text-muted);
}
.td .td-binary-change[data-direction="up"] {
  color: var(--td-accent);
}
.td .td-binary-change[data-direction="down"] {
  color: var(--td-no);
}
.td .td-binary-quotes {
  display: flex;
  gap: 8px;
}
.td .td-binary-quote {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  min-width: 100px;
  border: 1px solid var(--td-hairline);
  border-radius: 6px;
  padding: 11px 12px;
  font: 13px/20px var(--td-font-ui);
}
.td .td-binary-quote strong {
  font: 500 16px/20px var(--td-font-num);
}
.td .td-binary-quote-yes {
  color: var(--td-accent);
  border-color: rgb(0 191 174 / 0.2);
  background: rgb(0 191 174 / 0.045);
}
.td .td-binary-quote-no {
  color: #94b4f2;
  border-color: rgb(111 152 232 / 0.18);
  background: rgb(111 152 232 / 0.035);
}
.td .td-binary-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 25px;
}
.td .td-binary-legends {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.td .td-binary-legends > span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--td-text-muted);
}
.td .td-binary-legends i,
.td .td-binary-tip i {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
}
.td .td-binary-key-yes {
  background: var(--td-accent);
}
.td .td-binary-key-no {
  background: #6f98e8;
}
.td .td-binary-legends strong {
  font: 12px var(--td-font-num);
  color: var(--td-text);
  min-width: 42px;
}
.td .td-binary-ranges {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: rgb(255 255 255 / 0.025);
  border: 1px solid rgb(255 255 255 / 0.035);
  border-radius: 6px;
}
.td .td-binary-range {
  min-width: 32px;
  min-height: 28px;
  padding: 4px 7px;
  border-radius: 4px;
  font: 10px/18px var(--td-font-num);
  color: var(--td-text-faint);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition:
    background-color 120ms,
    color 120ms;
}
.td .td-binary-range:hover {
  color: var(--td-text);
}
.td .td-binary-range[aria-pressed="true"] {
  color: var(--td-text);
  background: var(--td-panel-raised);
}
.td .td-binary-range:focus-visible {
  outline: 1px solid var(--td-accent);
  outline-offset: 2px;
}
.td .td-binary-plot {
  position: relative;
  height: 260px;
  margin-top: 16px;
  touch-action: pan-y;
  min-width: 0;
}
.td .td-binary-plot svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.td .td-binary-line {
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.td .td-binary-line-yes {
  stroke: var(--td-accent);
}
.td .td-binary-line-no {
  stroke: #6f98e8;
}
.td .td-binary-dot-yes {
  fill: var(--td-accent);
}
.td .td-binary-dot-no {
  fill: #6f98e8;
}
.td .td-binary-dot {
  stroke: var(--td-panel);
  stroke-width: 2;
}
.td .td-binary-grid {
  stroke: var(--td-hairline);
  stroke-width: 1;
  stroke-opacity: 0.65;
  stroke-dasharray: 2 4;
}
.td .td-binary-axes {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.td .td-binary-axis {
  position: absolute;
  right: 0;
  width: 39px;
  transform: translateY(-50%);
  font: 10px/16px var(--td-font-num);
  color: var(--td-text-faint);
  text-align: left;
  white-space: nowrap;
}
.td .td-binary-cursor {
  stroke: var(--td-text-muted);
  stroke-opacity: 0.5;
  stroke-width: 1;
  stroke-dasharray: 2 3;
}
.td .td-binary-plot input {
  position: absolute;
  inset: 0 51px 0 0;
  width: calc(100% - 51px);
  height: 100%;
  margin: 0;
  cursor: crosshair;
  appearance: none;
  background: transparent;
  opacity: 0;
  touch-action: pan-y;
}
.td .td-binary-plot input:focus-visible {
  opacity: 1;
  outline: 1px solid var(--td-accent);
  outline-offset: 4px;
}
.td .td-binary-plot input::-webkit-slider-runnable-track {
  background: transparent;
}
.td .td-binary-plot input::-webkit-slider-thumb {
  appearance: none;
  width: 1px;
  height: 1px;
  background: transparent;
}
.td .td-binary-plot input::-moz-range-track {
  background: transparent;
}
.td .td-binary-plot input::-moz-range-thumb {
  border: 0;
  width: 1px;
  height: 1px;
  background: transparent;
}
.td .td-binary-tip {
  position: absolute;
  top: 0;
  left: 0;
  width: 144px;
  padding: 10px 12px;
  z-index: 2;
  border: 1px solid rgb(237 232 222 / 0.14);
  border-radius: 7px;
  background: #1b1f26;
  box-shadow: 0 8px 28px rgb(0 0 0 / 0.28);
  pointer-events: none;
}
.td .td-binary-tip-time {
  display: block;
  margin-bottom: 7px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--td-hairline);
  font: 9px/15px var(--td-font-num);
  color: var(--td-text-faint);
  white-space: nowrap;
}
.td .td-binary-tip > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font: 11px/20px var(--td-font-ui);
}
.td .td-binary-tip > div > span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--td-text-muted);
}
.td .td-binary-tip strong {
  font: 11px/20px var(--td-font-num);
}
.td .td-binary-foot {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  padding-right: 51px;
  min-height: 24px;
  font: 10px/18px var(--td-font-num);
  color: var(--td-text-faint);
}
.td .td-binary-foot > span:last-child {
  text-align: right;
}
.td .td-binary-foot output {
  font: inherit;
  text-align: center;
  color: var(--td-text-muted);
}
.td .td-binary-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 23px;
  padding: 18px 0 20px;
  border-top: 1px solid var(--td-hairline);
}
.td .td-binary-facts > div {
  min-width: 0;
}
.td .td-binary-facts dt {
  font: 10px/16px var(--td-font-ui);
  color: var(--td-text-faint);
}
.td .td-binary-facts dt span {
  margin-left: 2px;
  color: var(--td-text-muted);
}
.td .td-binary-facts dd {
  margin-top: 6px;
  font: 500 15px/20px var(--td-font-num);
}
.td .td-binary-facts .td-binary-size {
  display: block;
  margin-top: 3px;
  font: 9px/15px var(--td-font-num);
  color: var(--td-text-faint);
}
.td .td-row.td-preview {
  background: rgb(0 191 174 / 0.035);
}
.td .td-row.td-preview .td-lbl-t {
  color: var(--td-text);
}
.td .td-row.td-preview::before {
  content: "";
  position: absolute;
  inset: 12px auto 12px 0;
  width: 2px;
  background: var(--td-accent);
  opacity: 0.7;
  pointer-events: none;
}
@container tdrows (max-width:560px) {
  .td .td-binary {
    padding-top: 22px;
  }
  .td .td-binary-kicker {
    gap: 7px;
    font-size: 9px;
  }
  .td .td-binary-heading {
    min-height: 103px;
    padding-top: 12px;
  }
  .td .td-binary-question {
    font-size: 18px;
    line-height: 25px;
  }
  .td .td-binary-cutoff {
    font-size: 9px;
    line-height: 16px;
  }
  .td .td-binary-summary {
    gap: 12px;
    align-items: flex-end;
    margin-top: 13px;
  }
  .td .td-binary-probability-v {
    font-size: 42px;
    line-height: 48px;
  }
  .td .td-binary-probability-unit {
    font-size: 28px;
  }
  .td .td-binary-probability-label {
    display: none;
  }
  .td .td-binary-change {
    font-size: 9px;
    line-height: 16px;
  }
  .td .td-binary-quotes {
    gap: 5px;
    padding-bottom: 3px;
  }
  .td .td-binary-quote {
    min-width: 65px;
    gap: 9px;
    padding: 9px 8px;
    font-size: 11px;
    line-height: 16px;
  }
  .td .td-binary-quote strong {
    font-size: 12px;
    line-height: 16px;
  }
  .td .td-binary-toolbar {
    align-items: center;
    gap: 12px;
    margin-top: 23px;
  }
  .td .td-binary-legends {
    gap: 13px;
  }
  .td .td-binary-legends > span,
  .td .td-binary-legends strong {
    font-size: 11px;
  }
  .td .td-binary-range {
    min-width: 27px;
    min-height: 28px;
    padding: 4px 5px;
    font-size: 9px;
  }
  .td .td-binary-plot {
    height: 225px;
    margin-top: 14px;
  }
  .td .td-binary-foot {
    grid-template-columns: 1fr auto;
    padding-right: 0;
  }
  .td .td-binary-foot output {
    grid-column: 1 / -1;
    grid-row: 2;
    text-align: left;
    min-height: 18px;
    font-size: 9px;
  }
  .td .td-binary-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px 16px;
    margin-top: 19px;
    padding-top: 17px;
  }
  .td .td-binary-facts dd {
    font-size: 14px;
    margin-top: 4px;
  }
}
.td .td-row {
  scroll-margin-top: 100px;
}
@media (min-width: 1440px) {
  .td {
    --td-side-w: 352px;
    --td-plot-max: 360px;
    --td-plot-min: 280px;
  }
}
@media (max-width: 480px) {
  .td .td-facts {
    column-gap: 16px;
  }
  .td .td-head {
    column-gap: 12px;
  }
}

/* The original back-of-ticket email and intent flow, connected to the waitlist. */
.td .td-selected-label {
  display: inline-block;
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid var(--td-hairline);
  color: var(--td-text);
  font-size: 13px;
}
.td .td-access {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.td .td-access [hidden] {
  display: none !important;
}
.td .td-access-head {
  display: flow-root;
}
.td .td-access-title {
  font: 400 30px/32px var(--td-font-index);
  letter-spacing: -0.035em;
  text-wrap: balance;
  outline: 0;
}
.td .td-access-head .td-back {
  float: right;
  font-size: 11px;
  min-height: 24px;
  margin-bottom: 8px;
}
.td .td-back {
  color: var(--td-text-muted);
  font-size: 13px;
  line-height: 20px;
  text-decoration: underline;
  text-decoration-color: var(--td-hairline);
  text-underline-offset: 4px;
}
.td .td-back:hover {
  color: var(--td-text);
}
.td .td-access-pick {
  display: grid;
  gap: 3px;
}
.td .td-access-pick strong {
  font-size: 13px;
  font-weight: 500;
}
.td .td-access-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.td .td-access-fields {
  display: grid;
  gap: 12px;
}
.td .td-access-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font: 12px/16px var(--td-font-ui);
  color: var(--td-text-muted);
}
.td .td-access-field input {
  width: 100%;
  min-width: 0;
  height: 42px;
  border-radius: 6px;
  border: 1px solid var(--td-hairline);
  background: var(--td-panel-raised);
  color: var(--td-text);
  font: 16px/20px var(--td-font-ui);
  padding: 0 12px;
  outline: 0;
}
.td .td-access-field input::placeholder {
  color: var(--td-text-faint);
}
.td .td-access-field input:focus {
  outline: 2px solid var(--td-accent);
  outline-offset: 2px;
}
.td .td-access-field input[aria-invalid="true"] {
  border-color: var(--td-no);
}
.td .td-intents {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.td .td-intents legend {
  margin-bottom: 7px;
  font-size: 12px;
  color: var(--td-text-muted);
}
.td .td-intents > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.td .td-intents label {
  position: relative;
  min-height: 44px;
  padding: 8px 4px;
  border-radius: 6px;
  background: var(--td-panel-raised);
  color: var(--td-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font: 500 11px/14px var(--td-font-ui);
  cursor: pointer;
  border: 1px solid transparent;
}
.td .td-intents label:has(input:checked) {
  border-color: var(--td-text-faint);
  color: var(--td-text);
}
.td .td-intents label:has(input:focus-visible) {
  outline: 2px solid var(--td-accent);
  outline-offset: 2px;
}
.td .td-intents input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.td .td-access-submit {
  margin-top: 0;
}
.td .td-access-error {
  color: var(--td-no);
  font-size: 12px;
  line-height: 18px;
}
.td .td-access-status {
  color: var(--td-text-muted);
  font-size: 12px;
  line-height: 18px;
}
.td .td-access-status:empty {
  display: none;
}
.td .td-access-form .td-micro {
  margin-top: 0;
}
.td .td-access-success {
  display: flex;
  min-height: 320px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
}
.td .td-access-success h3 {
  font: 400 32px/36px var(--td-font-index);
}
.td .td-access-success p {
  font-size: 14px;
  line-height: 22px;
  color: var(--td-text-muted);
}
@container td (max-width:879px) {
  .td .td-access-fields {
    grid-template-columns: 1fr 1fr;
  }
  .td .td-access-title {
    max-width: 18ch;
  }
  .td .td-access-head .td-back {
    font-size: 13px;
  }
}
@container td (min-width:880px) {
  .td .td-access {
    gap: 12px;
  }
  .td .td-access-fields {
    grid-template-columns: 1fr 1fr;
  }
  .td .td-access-title {
    font-size: 29px;
    line-height: 31px;
  }
}

.td .td-access-layer {
  scroll-margin-top: 112px;
}
@media (max-width: 800px) {
  .td .td-access-layer {
    scroll-margin-top: 102px;
  }
}

/* v12: one focused frame, five milestones beside their live market preview. */
.td {
  --td-series-5: #7ba99a;
}
.td .td-previewcell {
  grid-area: preview;
  border-top: 1px solid var(--td-hairline);
  min-width: 0;
  background: var(--td-panel);
  position: relative;
}
.td .td-previewcell .td-binary {
  border: 0;
  margin: 0;
  padding: 20px;
  background: transparent;
}
.td .td-access-layer {
  position: absolute;
  inset: 0;
  padding: 20px;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: auto;
}
.td .td-access-layer .td-access-title {
  font-size: 32px;
  line-height: 34px;
}
.td .td-rows {
  padding-bottom: 0;
}
.td .td-binary-heading {
  min-height: 77px;
  padding-top: 10px;
}
.td .td-binary-question {
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.025em;
  max-width: 40ch;
}
.td .td-binary-cutoff {
  font-size: 9px;
  line-height: 16px;
  margin-top: 6px;
}
.td .td-binary-summary {
  margin-top: 10px;
  gap: 8px;
}
.td .td-binary-probability {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  gap: 16px;
}
.td .td-binary-probability-v {
  font: 500 35px/41px var(--td-font-num);
  letter-spacing: -0.065em;
}
.td .td-binary-probability-unit {
  font-size: 23px;
}
.td .td-binary-probability-label {
  font-size: 11px;
  margin-left: 7px;
}
.td .td-binary-change {
  font-size: 10px;
  white-space: nowrap;
  margin-top: 0;
}
.td .td-binary-quotes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 13px;
}
.td .td-binary-quote {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 8px;
  align-items: baseline;
  min-width: 0;
  padding: 10px 12px;
  cursor: pointer;
  transition:
    background 150ms,
    border-color 150ms;
}
.td .td-binary-quote span {
  font-size: 13px;
  line-height: 18px;
}
.td .td-binary-quote strong {
  font: 500 16px/20px var(--td-font-num);
}
.td .td-binary-quote small {
  grid-column: 1 / -1;
  font: 10px/16px var(--td-font-num);
  opacity: 0.85;
}
.td .td-binary-quote:hover {
  border-color: currentColor;
  background: var(--td-hover);
}
.td .td-binary-toolbar {
  margin-top: 16px;
  gap: 8px;
  flex-wrap: nowrap;
}
.td .td-binary-legends {
  gap: 11px;
}
.td .td-binary-legends > span,
.td .td-binary-legends strong {
  font-size: 10px;
}
.td .td-binary-legends strong {
  min-width: 32px;
}
.td .td-binary-ranges {
  gap: 1px;
  padding: 1px;
}
.td .td-binary-range {
  min-width: 26px;
  min-height: 27px;
  padding: 4px;
  font-size: 9px;
}
.td .td-binary-plot {
  height: 154px;
  margin-top: 10px;
}
.td .td-binary-foot {
  grid-template-columns: 1fr auto;
  min-height: 20px;
  font-size: 9px;
  padding-right: 51px;
  gap: 4px;
}
.td .td-binary-foot output {
  display: none;
}
.td .td-binary-facts {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 0 12px;
}
.td .td-binary-facts > div:nth-child(n + 3) {
  display: none;
}
.td .td-binary-facts dt {
  font-size: 9px;
  line-height: 15px;
}
.td .td-binary-facts dd {
  font-size: 13px;
  line-height: 18px;
  margin-top: 2px;
}
.td .td-preview-cta {
  height: 40px;
  min-height: 40px;
  margin-top: 0;
  font-size: 13px;
}
.td .td-preview-disclosure {
  color: var(--td-text-faint);
  font: 9px/15px var(--td-font-ui);
  text-align: center;
  margin-top: 7px;
}
.td .td-main-ends {
  pointer-events: none;
}
.td .td-legend {
  row-gap: 0;
}
.td .td-leg {
  height: 36px;
  font-size: 12px;
}
.td .td-plotwrap {
  height: clamp(230px, 28vw, 320px);
}
@container td (min-width:640px) {
  .td .td-rules {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
  }
  .td .td-facts {
    grid-template-columns: repeat(3, max-content);
    gap: 24px;
  }
}
@container tdrows (max-width:735px) {
  .td .td-tbl {
    --td-cols: minmax(0, 1fr) 54px;
  }
  .td .td-tbl .td-th {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 54px;
  }
  .td .td-tbl .td-th > :nth-child(n + 3) {
    display: none;
  }
  .td .td-row {
    height: 68px;
    grid-template-columns: minmax(0, 1fr) 54px;
    grid-template-areas: "lbl ch";
    padding-block: 10px;
    row-gap: 0;
  }
  .td .td-row .td-c-lbl {
    grid-area: lbl;
    height: auto;
  }
  .td .td-row .td-c-ch {
    grid-area: ch;
    align-self: center;
    font-size: 19px;
  }
  .td .td-row .td-c-chg,
  .td .td-row .td-c-btn {
    display: none;
  }
  .td .td-row .td-meta {
    font-size: 10px;
    gap: 8px;
    line-height: 16px;
  }
  .td .td-row .td-lbl {
    font-size: 13px;
    line-height: 20px;
    min-height: 24px;
  }
}
@container td (max-width:879px) and (min-width:640px) {
  .td .td-previewcell .td-binary {
    padding: 16px;
  }
  .td .td-binary-legends > span {
    gap: 4px;
  }
  .td .td-binary-range {
    min-width: 24px;
  }
}
@container td (max-width:639px) {
  .td .td-grid {
    --td-p: 14px;
  }
  .td .td-rows .td-ph {
    height: 32px;
  }
  .td .td-rows .td-th {
    height: 22px;
  }
  .td .td-row {
    height: 46px;
    padding-block: 6px;
  }
  .td .td-row .td-meta {
    display: none;
  }
  .td .td-row .td-c-ch {
    font-size: 16px;
  }
  .td .td-previewcell .td-binary {
    padding: 15px;
  }
  .td .td-binary-heading {
    min-height: 70px;
  }
  .td .td-binary-question {
    font-size: 16px;
    line-height: 21px;
  }
  .td .td-binary-probability-v {
    font-size: 30px;
    line-height: 35px;
  }
  .td .td-binary-probability-unit {
    font-size: 21px;
  }
  .td .td-binary-quotes {
    margin-top: 10px;
  }
  .td .td-binary-quote {
    padding: 8px 10px;
  }
  .td .td-binary-toolbar {
    margin-top: 12px;
  }
  .td .td-binary-plot {
    height: 110px;
    margin-top: 8px;
  }
  .td .td-binary-facts {
    margin-top: 5px;
    padding-top: 7px;
    padding-bottom: 8px;
  }
  .td .td-binary-legends {
    gap: 8px;
  }
  .td .td-binary-legends > span,
  .td .td-binary-legends strong {
    font-size: 9px;
  }
  .td .td-binary-legends strong {
    min-width: 29px;
  }
  .td .td-binary-range {
    min-width: 23px;
    padding-inline: 3px;
  }
  .td .td-preview-cta {
    height: 38px;
    min-height: 38px;
  }
  .td .td-preview-disclosure {
    font-size: 8px;
    margin-top: 5px;
  }
  .td .td-chart {
    padding: 16px 14px;
  }
  .td .td-title {
    font-size: 17px;
    line-height: 22px;
    text-wrap: pretty;
  }
  .td .td-head {
    margin-bottom: 10px;
  }
  .td .td-av {
    width: 30px;
    height: 42px;
  }
  .td .td-head {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 8px 10px;
  }
  .td .td-hvol-v {
    font-size: 11px;
  }
  .td .td-tag {
    height: 20px;
    font-size: 9px;
  }
  .td .td-fig-v {
    font-size: 27px;
    line-height: 36px;
  }
  .td .td-fig-l {
    font-size: 11px;
  }
  .td .td-selected-label {
    display: none;
  }
  .td .td-fig .td-chg {
    font-size: 11px;
  }
  .td .td-legend {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 4px;
  }
  .td .td-leg {
    height: 24px;
    min-height: 24px;
    font-size: 10px;
    gap: 6px;
  }
  .td .td-leg-full {
    display: inline;
  }
  .td .td-leg-short {
    display: none;
  }
  .td .td-leg-v {
    margin-left: auto;
  }
  .td .td-ranges {
    margin-top: 5px;
    gap: 3px;
  }
  .td .td-rng {
    min-width: 30px;
    padding: 0 7px;
    height: 28px;
    font-size: 10px;
  }
  .td .td-plotwrap {
    height: 170px;
    margin-top: 12px;
  }
  .td .td-rules {
    padding: 14px;
    row-gap: 10px;
  }
  .td .td-rule {
    font-size: 11px;
    line-height: 17px;
  }
  .td .td-honest {
    font-size: 10px;
    line-height: 15px;
  }
  .td .td-facts dt {
    font-size: 9px;
  }
  .td .td-facts dd {
    font-size: 10px;
  }
}
/* Keep the interactive preview and the final graph within a laptop frame. */
.td .td-previewcell .td-binary {
  padding: 16px 20px;
}
.td .td-binary-heading {
  min-height: 65px;
}
.td .td-binary-question {
  font-size: 17px;
  line-height: 22px;
}
.td .td-binary-summary {
  margin-top: 6px;
}
.td .td-binary-quotes {
  margin-top: 9px;
}
.td .td-binary-quote {
  padding: 8px 12px;
}
.td .td-binary-toolbar {
  margin-top: 10px;
}
.td .td-binary-plot {
  height: 120px;
  margin-top: 8px;
}
.td .td-binary-foot {
  min-height: 16px;
  margin-top: 2px;
}
.td .td-binary-facts {
  display: flex;
  gap: 28px;
  justify-content: flex-start;
  margin-top: 5px;
  padding: 8px 0 10px;
}
.td .td-binary-facts > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.td .td-binary-facts > div:nth-child(n + 3) {
  display: none;
}
.td .td-binary-facts dd {
  margin: 0;
}
.td .td-preview-disclosure {
  line-height: 12px;
  margin-top: 5px;
}
@container td (min-width:640px) {
  .td .td-row {
    height: 80px;
  }
  .td .td-plotwrap {
    height: 280px;
  }
  .td .td-rules {
    padding: 18px 24px;
  }
  .td .td-rules-h {
    display: none;
  }
  .td .td-rules-sel {
    margin-top: 0;
  }
  .td .td-rule {
    margin-top: 6px;
    font-size: 12px;
    line-height: 19px;
  }
  .td .td-honest {
    margin-top: 6px;
    font-size: 10px;
    line-height: 16px;
  }
}
@container td (max-width:639px) {
  .td .td-previewcell .td-binary {
    padding: 12px 15px;
  }
  .td .td-binary-heading {
    min-height: 64px;
    padding-top: 7px;
  }
  .td .td-binary-question {
    font-size: 15px;
    line-height: 20px;
  }
  .td .td-binary-summary {
    margin-top: 4px;
  }
  .td .td-binary-probability-v {
    font-size: 27px;
    line-height: 30px;
  }
  .td .td-binary-probability-unit {
    font-size: 19px;
  }
  .td .td-binary-quotes {
    margin-top: 7px;
  }
  .td .td-binary-quote {
    padding: 6px 10px;
  }
  .td .td-binary-quote strong {
    font-size: 14px;
    line-height: 18px;
  }
  .td .td-binary-quote small {
    font-size: 9px;
    line-height: 14px;
  }
  .td .td-binary-toolbar {
    margin-top: 8px;
  }
  .td .td-binary-range {
    min-height: 24px;
  }
  .td .td-binary-plot {
    height: 90px;
    margin-top: 5px;
  }
  .td .td-binary-facts {
    display: none;
  }
  .td .td-binary-foot {
    margin-bottom: 8px;
  }
  .td .td-preview-disclosure {
    font-size: 8px;
    line-height: 12px;
    margin-top: 4px;
  }
  .td .td-rule {
    font-size: 11px;
    line-height: 16px;
  }
  .td .td-honest {
    font-size: 9px;
    line-height: 14px;
  }
}
@container td (min-width:640px) and (max-width:879px) {
  .td .td-chart {
    grid-template-rows: auto auto auto minmax(0, 1fr);
    grid-template-areas: "head head" "fig ranges" "legend legend" "plot plot";
  }
  .td .td-head {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    grid-template-areas: "av title tag" "av vol vol";
    gap: 4px 12px;
    min-height: 56px;
    margin-bottom: 12px;
  }
  .td .td-av {
    width: 30px;
    height: 42px;
  }
  .td .td-title {
    font-size: 18px;
    line-height: 23px;
    text-wrap: pretty;
  }
  .td .td-ranges {
    margin: 0;
    gap: 2px;
    justify-self: end;
    align-self: center;
  }
  .td .td-rng {
    min-width: 30px;
    height: 28px;
    padding-inline: 7px;
    font-size: 10px;
  }
  .td .td-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0 8px;
  }
  .td .td-leg {
    height: 28px;
    font-size: 10px;
  }
  .td .td-plotwrap {
    height: 240px;
    margin-top: 16px;
  }
}
@container td (max-width:639px) {
  .td .td-row {
    height: 38px;
    padding-block: 3px;
  }
  .td .td-row .td-lbl {
    font-size: 12px;
    line-height: 20px;
    min-height: 28px;
  }
  .td .td-row .td-lbl::before {
    height: 38px;
  }
  .td .td-row .td-c-ch {
    font-size: 15px;
  }
  .td .td-legend {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .td .td-leg {
    height: 26px;
    font-size: 9px;
    padding-inline: 6px;
    gap: 5px;
  }
  .td .td-leg-full {
    display: none;
  }
  .td .td-leg-short {
    display: inline;
  }
  .td .td-leg-v {
    font-size: 9px;
    margin-left: auto;
  }
  .td .td-plotwrap {
    height: 155px;
  }
  .td .td-rules {
    padding-block: 12px;
  }
  .td .td-rules-h {
    display: none;
  }
  .td .td-rules-sel {
    margin-top: 0;
    font-size: 12px;
    line-height: 18px;
  }
  .td .td-rule {
    margin-top: 6px;
    font-size: 10px;
    line-height: 15px;
  }
  .td .td-honest {
    margin-top: 5px;
  }
  .td .td-facts {
    column-gap: 12px;
  }
}

@container td (min-width:640px) {
  .td .td-previewcell {
    border-top: 0;
    border-left: 1px solid var(--td-hairline);
  }
}

/* Chart controls share the existing range slot. The story and stage geometry stay native. */
.td .td-chart-modes,
.td .td-chart-periods {
  display: flex;
  align-items: center;
  gap: 3px;
}
.td .td-chart-modes {
  padding: 2px;
  border: 1px solid var(--td-hairline);
  border-radius: 6px;
  background: transparent;
}
.td .td-chart-modes button {
  appearance: none;
  border: 0;
  border-radius: 4px;
  padding: 5px 9px;
  background: transparent;
  color: var(--td-text-faint);
  font: 400 10px/16px var(--td-font-ui);
  cursor: pointer;
}
.td .td-chart-modes button[aria-pressed="true"] {
  background: var(--td-panel-raised);
  color: var(--td-text);
}
.td .td-chart-modes button:focus-visible {
  outline: 1px solid var(--td-yes);
  outline-offset: 2px;
}
.td .td-graph-stage .td-ranges {
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
}
.td .td-tip-ohlc {
  font: 400 10px/17px var(--td-font-num);
  color: var(--td-text-muted);
  padding-bottom: 5px;
}
.td [data-r="binaryArea"] {
  display: none;
}
.td .td-binary-last {
  stroke: var(--td-yes);
  stroke-width: 1;
  stroke-dasharray: 3 5;
  opacity: 0.22;
}
.td .td-binary-line-yes,
.td .td-binary-line-no {
  stroke-width: 1.7;
  stroke-linejoin: miter;
  stroke-linecap: butt;
}
.td .td-binary-grid {
  stroke-dasharray: 0;
  opacity: 0.6;
}
.td .td-tip-r[hidden],
.td .td-tip-ohlc[hidden] {
  display: none !important;
}

/* Leave clearance for the fixed masthead when keyboard focus brings a chart control into view. */
.td .td-chart-modes button,
.td .td-chart-periods button,
.td .td-hit {
  scroll-margin-top: 110px;
  scroll-margin-bottom: 24px;
}
@media (max-width: 700px) {
  .td .td-chart-modes button,
  .td .td-chart-periods button,
  .td .td-hit {
    scroll-margin-top: 92px;
  }
}