:root {
  color-scheme: light dark;
  --stamina-page-bg: #f7f6f2;
  --stamina-text: #181816;
  --stamina-muted: #67665f;
  --stamina-grid: #d8d5cc;
  --stamina-standing: #2563eb;
  --stamina-walking: #dc2626;
  --stamina-trotting: #7c3aed;
  --stamina-resting: #059669;
}

@media (prefers-color-scheme: dark) {
  :root {
    --stamina-page-bg: #171715;
    --stamina-text: #f3f2ed;
    --stamina-muted: #aaa89f;
    --stamina-grid: #3d3c37;
    --stamina-standing: #60a5fa;
    --stamina-walking: #f87171;
    --stamina-trotting: #a78bfa;
    --stamina-resting: #34d399;
  }
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--stamina-page-bg);
}

body {
  margin: 0;
  background: var(--stamina-page-bg);
  color: var(--stamina-text);
  font: 400 16px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.stamina-page {
  width: min(100%, 1440px);
  margin: 0 auto;
  padding: 24px 20px 36px;
}

.state-key {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 22px;
  margin-bottom: 8px;
}

.state-key__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.state-key__marker {
  display: inline-block;
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  background: var(--state-color);
}

.state-key__marker--circle {
  border-radius: 50%;
}

.state-key__marker--diamond {
  transform: rotate(45deg) scale(0.82);
}

.state-key__marker--triangle {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.stamina-chart {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.stamina-chart__grid,
.stamina-chart__row {
  stroke: var(--stamina-grid);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.stamina-chart__axis {
  stroke: var(--stamina-muted);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}

.stamina-chart__reference {
  stroke: var(--stamina-muted);
  stroke-width: 1.5;
  stroke-dasharray: 6 6;
  vector-effect: non-scaling-stroke;
}

.stamina-chart__range {
  stroke: var(--stamina-muted);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.stamina-chart__label,
.stamina-chart__tick,
.stamina-chart__axis-label,
.stamina-chart__annotation {
  fill: var(--stamina-text);
  font-family: inherit;
}

.stamina-chart__label,
.stamina-chart__axis-label {
  font-weight: 500;
}

.stamina-chart__tick,
.stamina-chart__annotation {
  fill: var(--stamina-muted);
}

.stamina-chart__marker {
  stroke: var(--stamina-page-bg);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.source-note {
  margin: 8px 0 0;
  color: var(--stamina-muted);
  font-size: 14px;
  text-align: center;
}

.source-note code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.92em;
}

.stamina-viewers {
  margin: 6px 0 0;
  color: var(--stamina-muted);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.error-message {
  color: #b91c1c;
  text-align: center;
}

@media (max-width: 560px) {
  .stamina-page {
    padding: 14px 12px 24px;
  }

  .state-key {
    justify-content: flex-start;
  }
}