:root {
  --bg-base: #09090b;
  --bg-sidebar: #0c0c0e;
  --bg-panel: #101013;
  --bg-raised: #16161a;
  --bg-hover: #1a1a1f;
  --line: #1d1d22;
  --line-strong: #2a2a31;
  --ink: #ededf0;
  --ink-dim: #9a9aa4;
  --ink-faint: #5f5f6a;
  --brand: #9c2f2f;
  --brand-hot: #c23b3b;
  --brand-glow: rgba(194, 59, 59, 0.16);
  --control: 40px;
  --rail: 268px;
}

::selection {
  background: rgba(194, 59, 59, 0.3);
  color: #fff;
}

.scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

.scroll::-webkit-scrollbar { width: 9px; }
.scroll::-webkit-scrollbar-track { background: transparent; }

.scroll::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border: 3px solid transparent;
  background-clip: content-box;
}

.scroll::-webkit-scrollbar-thumb:hover {
  background-color: #3a3a44;
  background-clip: content-box;
}

.mark { color: var(--brand-hot); flex: none; }

button,
input,
textarea,
select {
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--brand-hot);
  outline-offset: 2px;
}