:root {
  --bryk-ink: #07090b;
  --bryk-panel: #101418;
  --bryk-panel-raised: #151a1f;
  --bryk-paper: #f2ecd9;
  --bryk-white: #f8f8f3;
  --bryk-orange: #ff6400;
  --bryk-pink: #ff3c91;
  --bryk-cyan: #00b8b3;
  --bryk-lime: #b9f227;
  --bryk-violet: #796cff;
  --bryk-line: rgba(255, 255, 255, .16);
  --bryk-line-strong: rgba(255, 255, 255, .28);
  --bryk-muted: rgba(248, 248, 243, .68);
  --bryk-gutter: clamp(1rem, 4vw, 4rem);
  --bryk-section-space: clamp(3.5rem, 8vw, 6.5rem);
  --bryk-reading-width: 70ch;
  --bryk-content-max: 1480px;
  --bryk-radius: 4px;
  --bryk-focus: 0 0 0 3px rgba(185, 242, 39, .34);
  --bryk-shadow-soft: 0 18px 52px rgba(0, 0, 0, .32);
  --bryk-font-ui: Inter, Arial, Helvetica, sans-serif;
  --bryk-font-display: "Arial Narrow", "Roboto Condensed", Impact, Arial, sans-serif;
  --bryk-font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  color-scheme: dark;
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { text-rendering: optimizeLegibility; }
:where(img, video) { max-width: 100%; }
:where(button, input, select, textarea) { font: inherit; }
:where(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--bryk-lime);
  outline-offset: 3px;
  box-shadow: var(--bryk-focus);
}
:where(button, a, summary) { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

@media (max-width: 767px) {
  :where(input, select, textarea) { font-size: max(1rem, 16px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (forced-colors: active) {
  :where(button, a, input, select, textarea, summary):focus-visible { outline: 3px solid Highlight; }
}