:root {
  color-scheme: light;

  --bg: #fff;
  --bg-2: #f4f4f7;
  --fg: #2a2b2c;
  --muted: rgba(42, 43, 44, .72);
  --border: rgba(42, 43, 44, .35);
  --border-strong: rgba(42, 43, 44, .8);
  --line: rgba(42, 43, 44, .15);
  --accent: #3548cf;
  --accent-dim: rgba(53, 72, 207, .08);
  --flag: #8f0075;
  --focus: var(--accent);

  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: -apple-system, system-ui, "Segoe UI", Arial, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;

  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-base: 16px;
  --text-lg: 1.05rem;
  --text-xl: 22px;

  --gap: var(--space-6);
  --control-h: 42px;
  --radius: 0;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; border-radius: var(--radius); }

html { font-size: 16px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--fg);
  font: 1rem/1.6 var(--sans);
  min-height: 100vh;
}

img, picture { max-width: 100%; display: block; }
input, button, textarea, select { font-family: inherit; font-size: inherit; }
textarea:not([rows]) { min-height: 10em; }
:target { scroll-margin-block: 5ex; }

h1, h2, h3, h4 { font-family: var(--sans); font-weight: 600; line-height: 1.2; text-wrap: balance; }

a { color: var(--accent); text-decoration: underline; text-underline-offset: .15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--fg); }
.brand-name { font: 700 15px/1 var(--mono); letter-spacing: .3px; color: var(--fg); }