.bms-chart-root {
  width: 100%;
  color: var(--ink, #172033);
  font-variant-numeric: tabular-nums;
}

.bms-chart-readout {
  min-height: 32px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 14px;
  color: var(--muted, #64748b);
  font-size: 10px;
}

.bms-chart-readout time {
  color: var(--ink, #172033);
  font-size: 11px;
  font-weight: 650;
}

.bms-chart-resolution {
  margin-right: auto;
  opacity: .78;
}

.bms-chart-readout > span:not(.bms-chart-resolution) {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}

.bms-chart-readout i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bms-chart-color, var(--blue, #1677ff));
}

.bms-chart-readout em {
  color: var(--muted, #64748b);
  font-style: normal;
}

.bms-chart-readout strong {
  color: var(--ink, #172033);
  font-size: 11px;
  font-weight: 680;
}

.bms-chart-stage {
  position: relative;
  width: 100%;
  height: var(--bms-chart-height, 240px);
  overflow: hidden;
  outline: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.bms-chart-stage:focus-visible {
  border-radius: 12px;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--blue, #1677ff) 50%, transparent);
}

.bms-chart-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.bms-chart-grid {
  stroke: color-mix(in srgb, var(--line, #d9e0ea) 45%, transparent);
  stroke-width: .65;
  vector-effect: non-scaling-stroke;
}

.bms-chart-zero {
  stroke: color-mix(in srgb, var(--muted, #64748b) 56%, transparent);
  stroke-width: .8;
  stroke-dasharray: 3 4;
  vector-effect: non-scaling-stroke;
}

.bms-chart-axis,
.bms-chart-track-label {
  fill: var(--muted, #64748b);
  font-family: inherit;
  font-size: 9px;
  font-weight: 520;
}

.bms-chart-track-label {
  fill: color-mix(in srgb, var(--ink, #172033) 78%, transparent);
  font-size: 9.5px;
  font-weight: 680;
}

.bms-chart-band {
  fill: color-mix(in srgb, var(--bms-chart-color, var(--blue, #1677ff)) 10%, transparent);
  stroke: none;
}

.bms-chart-area {
  fill: color-mix(in srgb, var(--bms-chart-color, var(--blue, #1677ff)) 6%, transparent);
  stroke: none;
}

.bms-chart-line {
  fill: none;
  stroke: var(--bms-chart-color, var(--blue, #1677ff));
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.bms-chart-event {
  stroke: color-mix(in srgb, var(--muted, #64748b) 38%, transparent);
  stroke-width: .7;
  vector-effect: non-scaling-stroke;
}

.bms-chart-event[data-severity="warning"] {
  stroke: color-mix(in srgb, #e78a19 60%, transparent);
}

.bms-chart-cursor-line {
  stroke: color-mix(in srgb, var(--ink, #172033) 40%, transparent);
  stroke-width: .75;
  vector-effect: non-scaling-stroke;
}

.bms-chart-cursor-dot {
  fill: var(--bms-chart-color, var(--blue, #1677ff));
  stroke: var(--surface-strong, #fff);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.bms-chart-empty {
  min-height: 150px;
  display: grid;
  place-items: center;
  padding: 20px;
  color: var(--muted, #64748b);
  font-size: 12px;
  text-align: center;
}

body[data-theme="dark"] .bms-chart-grid {
  stroke: rgba(148, 163, 184, .14);
}

body[data-theme="dark"] .bms-chart-cursor-line {
  stroke: rgba(226, 232, 240, .38);
}

body[data-theme="dark"] .bms-chart-cursor-dot {
  stroke: #101723;
}

@media (max-width: 480px) {
  .bms-chart-readout { gap: 4px 10px; }
  .bms-chart-axis { font-size: 8.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .bms-chart-root *,
  .bms-chart-root *::before,
  .bms-chart-root *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}