:root {
  --demo-ink: var(--site-ink);
  --demo-green: var(--site-accent-2);
  --demo-orange: var(--site-accent-1);
  --demo-surface: var(--site-surface);
  --demo-border: oklab(from var(--site-ink) l a b / 0.1);
}

.demo-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  background-color: var(--demo-surface);
  border: 1px solid oklab(from var(--site-accent-2) l a b / 0.15);
  border-top: 2px solid var(--demo-orange);
  border-radius: 0.875rem;
  box-shadow: 0 1px 2px oklab(from var(--site-ink) l a b / 0.04);
}

.demo-panel-title {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--demo-green);
  margin: 0;
}

.demo-panel-label {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--demo-orange);
  margin: 0;
}

.demo-panel > p,
.demo-metric > p {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: oklab(from var(--demo-ink) l a b / 0.85);
  margin: 0;
}

.demo-metric {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.demo-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.demo-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--demo-ink);
}

.demo-value {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--demo-green);
  font-variant-numeric: tabular-nums;
}

.demo-select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.875rem;
  color: var(--demo-ink);
  background-color: var(--site-background-radial-start);
  border: 1px solid var(--demo-border);
  border-radius: 0.5rem;
}

.demo-select:focus {
  outline: none;
  border-color: var(--demo-green);
  box-shadow: 0 0 0 0.18rem oklab(from var(--demo-green) l a b / 0.15);
}

.demo-range {
  width: 100%;
  accent-color: var(--demo-green);
  height: 1.25rem;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.demo-range:focus {
  outline: none;
}

.demo-range::-webkit-slider-runnable-track {
  height: 0.35rem;
  border-radius: 999px;
  background-color: oklab(from var(--demo-ink) l a b / 0.12);
}

.demo-range::-webkit-slider-thumb {
  appearance: none;
  width: 1rem;
  height: 1rem;
  margin-top: -0.325rem;
  border: 0;
  border-radius: 999px;
  background-color: var(--demo-green);
  box-shadow: 0 1px 2px oklab(from var(--demo-ink) l a b / 0.12);
}

.demo-range:active::-webkit-slider-thumb,
.demo-range:focus::-webkit-slider-thumb {
  background-color: var(--demo-orange);
}

.demo-range::-moz-range-track {
  height: 0.35rem;
  border: 0;
  border-radius: 999px;
  background-color: oklab(from var(--demo-ink) l a b / 0.12);
}

.demo-range::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  border: 0;
  border-radius: 999px;
  background-color: var(--demo-green);
  box-shadow: 0 1px 2px oklab(from var(--demo-ink) l a b / 0.12);
}

.demo-range:active::-moz-range-thumb,
.demo-range:focus::-moz-range-thumb {
  background-color: var(--demo-orange);
}

.demo-range::-moz-range-progress {
  height: 0.35rem;
  border-radius: 999px;
  background-color: var(--demo-green);
}

.demo-button {
  margin-top: 0.75rem;
  padding: 0.6rem 0.9rem;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--demo-surface);
  background-color: var(--demo-green);
  border: 1px solid var(--demo-green);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.15s ease-out, border-color 0.15s ease-out;
}

.demo-button:hover,
.demo-button:focus {
  background-color: var(--demo-orange);
  border-color: var(--demo-orange);
  outline: none;
}

/* Chart.js needs an explicitly sized, positioned parent when
   maintainAspectRatio is false, otherwise the canvas collapses/squishes. */
.demo-chart {
  position: relative;
  width: 100%;
  height: 16rem;
}

.demo-chart > canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

.demo-canvas-wrap {
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
  border-radius: 0.5rem;
  overflow: hidden;
  background-color: var(--site-background-deep);
}

.demo-canvas-wrap canvas.emscripten {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
}