:root {
  color-scheme: dark;
  --accent-rgb: 204, 255, 0;
  --accent-ink-text: #ccff00;
  --control-outline: rgba(255, 255, 255, 0.35);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f6f8;
  --panel: #ffffff;
  --panel2: #eceef1;
  --line: rgba(12, 13, 16, 0.10);
  --line2: rgba(12, 13, 16, 0.18);
  --control-outline: rgba(12, 13, 16, 0.45);
  --text: #17181c;
  --dim: #5c6270;
  --dim2: #656b75;
  --accent: #4d8000;
  --accent-rgb: 77, 128, 0;
  --accent-ink-text: #0c0d10;
  --ink: #ffffff;
  --bad: #d64545;
  --pull: #2b8fc9;
}

:root[data-theme="light"] body {
  background:
    radial-gradient(900px 440px at 50% -10%, rgba(var(--accent-rgb), 0.05), transparent 60%),
    var(--bg);
}

:root[data-theme="light"] :is(.code, .eyebrow, .direct, .foot a) {
  color: var(--accent-ink-text);
}

:root[data-theme="light"] :is(.field, .btn.ghost) {
  border-color: var(--control-outline);
}

:root[data-theme="light"] :is(.btn.primary, .send) {
  box-shadow: 0 10px 24px -10px rgba(var(--accent-rgb), 0.42);
}

:root[data-theme="light"] .art {
  opacity: 0.88;
}