html, body { margin: 0; height: 100%; overflow: hidden; }
  body {
    font-family: 'FFT Sans', 'Source Sans Pro', system-ui, sans-serif;
    background: transparent; color: var(--text);
    --bg: #ffffff; --text: #1d1d1f; --muted: #6d6d6d; --grid: #e6e6e6; --mark: #c2c2c2; --live: #1f9a52;
    --tshadow: none;
  }
  body.dark { --bg: #12151b; --text: #edf1f6; --muted: #8e99a7; --grid: rgba(255, 255, 255, 0.075); --mark: rgba(255, 255, 255, 0.13); --live: #5fd690; }
  body.clear {
    --bg: transparent; --text: #ffffff; --muted: rgba(255, 255, 255, 0.8); --grid: rgba(255, 255, 255, 0.2); --mark: rgba(255, 255, 255, 0.28); --live: #6fe3a0;
    --tshadow: 0 2px 4px rgba(0, 0, 0, 0.85), 0 0 2px rgba(0, 0, 0, 0.6);
  }
  /* background lives on #stage, not body, because OBS's default custom CSS makes body transparent */
  #stage { position: absolute; inset: 0; background-color: var(--bg); transition: background-color 0.5s ease, color 0.5s ease; }

  .tick { position: absolute; top: 0; left: 0; transition: opacity 0.5s ease; opacity: 0; will-change: transform; }
  .tick.in { opacity: 1; }
  .tick .line { position: absolute; left: 0; width: 1px; background: var(--grid); }
  .tick .lbl {
    position: absolute; transform: translateX(-50%); white-space: nowrap; color: var(--muted);
    font-variant-numeric: tabular-nums; text-shadow: var(--tshadow);
  }

  #mark {
    position: absolute; text-align: right; color: var(--mark); font-weight: 700; line-height: 0.92; letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none;
  }
  #mark .cap { display: block; font-weight: 700; letter-spacing: 0.18em; line-height: 1.2; text-transform: uppercase; }

  .row { position: absolute; left: 0; top: 0; right: 0; will-change: transform; transition: transform 0.7s cubic-bezier(0.45, 0, 0.2, 1), opacity 0.5s ease; }
  .no-anim .row { transition: none; }
  .row.gone { opacity: 0; }
  .label {
    position: absolute; top: 0; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: flex; align-items: center; justify-content: flex-end; text-shadow: var(--tshadow);
  }
  .label .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .label .dot { display: none; flex: none; border-radius: 50%; background: var(--live); margin-right: 0.4em; box-shadow: 0 0 0 0.12em rgba(31, 154, 82, 0.18); animation: pulse 1.2s ease-in-out infinite; }
  .show-live .row.live .label .dot { display: inline-block; }
  @keyframes pulse { 50% { opacity: 0.3; transform: scale(0.8); } }
  .bar { position: absolute; top: 0; height: 100%; background: var(--c); border-radius: 1px; overflow: hidden; }
  .show-live .row.live .bar::after {
    content: ''; position: absolute; inset: 0; width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.38), transparent);
    animation: shine 2.4s linear infinite;
  }
  @keyframes shine { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
  .art { position: absolute; top: 0; left: 0; overflow: hidden; border-radius: 3px; will-change: transform; }
  .art.has-img img { display: block; height: 100%; width: 100%; object-fit: contain; }
  .art.ph { border-radius: 3px; }
  .no-art .art { display: none; }
  .val {
    position: absolute; top: 0; left: 0; white-space: nowrap; display: flex; align-items: center; font-variant-numeric: tabular-nums;
    will-change: transform; text-shadow: var(--tshadow);
  }
  .show-live .row.live .val { color: var(--live); font-weight: 600; }