/* Timeline card. Theme via --tc-* tokens (defaults = the reference look). */
.tc-stage {
  --tc-bg: linear-gradient(162deg, #1d1d1d 0%, #121212 46%, #0b0b0b 100%);
  --tc-line: rgba(255, 255, 255, 0.085);
  --tc-t1: #f5f5f5;
  --tc-t2: #8d8d8d;
  --tc-t3: #4f4f4f;
  --tc-up: #1fc78e;
  --tc-down: #e5534b;
  --tc-fut: #5b5b5b;
  --tc-chip: rgba(255, 255, 255, 0.055);
  --tc-mono: #e7e1d2;
  --tc-mono-ink: #0f2a1f;
  position: relative;
  width: calc(397px * var(--tc-scale, 1));
  height: calc(343px * var(--tc-scale, 1));
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.tc-wrap {
  position: absolute;
  inset: 0 auto auto 0;
  width: 397px;
  height: 343px;
  transform: scale(var(--tc-scale, 1));
  transform-origin: 0 0;
}
.tc {
  position: absolute;
  left: 0;
  top: 50%;
  width: 397px;
  overflow: hidden;
  background: var(--tc-bg);
  box-shadow: inset 0 0 0 1px var(--tc-line), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transform-origin: 50% 50%;
  outline: none;
  cursor: default;
  color: var(--tc-t1);
  will-change: transform, height;
}
.tc > * { position: absolute; left: 0; top: 0; transform-origin: 0 0; white-space: nowrap; will-change: transform, opacity; }
.tc-chart { overflow: visible; pointer-events: none; }
.tc-line { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.tc-line-fut { fill: none; stroke: var(--tc-fut); stroke-linejoin: round; stroke-linecap: round; }
.tc-area-fut { fill: var(--tc-fut); fill-opacity: 0.06; }
.tc-base { stroke: rgba(255, 255, 255, 0.2); stroke-width: 1.1; stroke-dasharray: 4 4; }
.tc-cursor { stroke: rgba(255, 255, 255, 0.28); stroke-width: 1; }
.tc-dot { stroke: none; }
.tc-logo { width: 41.7px; height: 41.7px; }
.tc-mono { width: 100%; height: 100%; display: block; }
.tc-mono-bg { fill: var(--tc-mono); }
.tc-mono-a, .tc-mono-b { fill: none; stroke: var(--tc-mono-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tc-mono-b { opacity: 0.45; }
.tc-mono-t { font: 700 6.5px 'Inter', sans-serif; fill: var(--tc-mono-ink); letter-spacing: 0.06em; opacity: 0; }
.tc-name { font-size: 17px; font-weight: 600; line-height: 1; letter-spacing: -0.01em; }
.tc-sub { font-size: 16px; line-height: 1; color: var(--tc-t2); }
.tc-exch { display: inline-block; }
.tc-price { font-size: 24px; font-weight: 500; line-height: 1; letter-spacing: -0.01em; }
.tc-price.bold { font-weight: 700; }
.tc-pct { font-size: 16px; line-height: 1; }
.tc-chg { font-size: 16px; line-height: 1; }
.tc-date { font-size: 15.5px; line-height: 1; color: var(--tc-t3); }
.tc-expand { width: 18px; height: 18px; }
.tc-expand svg { width: 100%; height: 100%; fill: none; stroke: var(--tc-t1); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tc-foot { font-size: 16px; line-height: 1; }
.tc-now-l { color: var(--tc-t2); }
.tc-now-v { color: var(--tc-t1); }
.tc-trade {
  width: 129px; height: 26px; border-radius: 13px; background: var(--tc-chip);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  display: flex !important; align-items: center; padding-left: 10px; font-size: 15px; gap: 0;
}
.tc-trade-l { color: var(--tc-t2); white-space: pre; }
.tc-trade b { font-weight: 500; color: var(--tc-t1); }
.tc-badges { display: inline-flex; margin-left: 8px; }
.tc-badge {
  width: 15px; height: 15px; border-radius: 50%; display: inline-grid; place-items: center;
  font-size: 9px; font-weight: 700; margin-left: -3px; box-shadow: 0 0 0 1.5px #151515; transform: scale(0);
}
.tc-badge:first-child { margin-left: 0; }
.b-a { background: #f1f1f1; color: #6b5cff; }
.b-b { background: #f1f1f1; color: #2f6bff; }
.b-c { background: #ff5a1f; color: #fff; }

/* rolling digits */
.roller { display: inline-flex; font-variant-numeric: tabular-nums; }
.roller .rc { position: relative; display: inline-block; overflow: hidden; height: 1.18em; margin: -0.09em 0; line-height: 1.18em; }
.roller .rg { visibility: hidden; }
.roller .rs { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; will-change: transform; }
.roller .rs > span { height: 1.18em; line-height: 1.18em; text-align: center; }
.roller .rx { display: inline-block; line-height: 1em; white-space: pre; }