:root {
  --bg-main: #0e0e0e;
  --bg-panel: #151515;
  --bg-output-dark: #0b0b0b;
  --bg-output-light: #f8f9fa;

  --text-main: #eaeaea;
  --text-muted: #b0b0b0;

  --accent: #f3cf31;
}

/* GLOBAL */
body {
  background: var(--bg-main);
  color: var(--text-main);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, SFMono-Regular, Menlo, Consolas, monospace;
}

h1, h2 {
  color: var(--accent);
}

hr {
  border-color: #2a2a2a;
}

/* CONTROLS */
#controls {
  background: var(--bg-panel);
  border-radius: 12px;
  padding: 1rem;
}

label {
  color: var(--text-muted);
}

/* Accent slider */
.form-range::-webkit-slider-thumb,
.form-range::-moz-range-thumb {
  background: var(--accent);
}

/* OUTPUT */
.ascii-card.dark {
  background: var(--bg-output-dark);
  color: var(--text-main);
}

.ascii-card.light {
  background: var(--bg-output-light);
  color: #000;
}

pre {
  font-size: 8px;
  line-height: 8px;
  white-space: pre;
  margin: 0;
}

/* BUTTONS */
.btn-accent {
  background: var(--accent);
  color: #000;
  border: none;
}

.btn-accent:hover {
  background: #e0b700;
}

/* CANVAS */
canvas {
  display: none;
}