/* Accent components match the app's Display P3 AccentColor asset. */
:root {
  color-scheme: light dark;
  --accent: #5c45d6;
  --background: #ffffff;
  --text: #202027;
  --border: #dedde6;
}
@supports (color: color(display-p3 0 0 0)) {
  :root { --accent: color(display-p3 0.360 0.270 0.840); }
}
* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; line-height: 1.65; max-width: 46rem; margin: auto; padding: 1.5rem; overflow-wrap: anywhere; background: var(--background); color: var(--text); }
header { padding-block: .5rem 1.5rem; border-bottom: 1px solid var(--border); }
.brand { display: inline-flex; align-items: center; gap: .875rem; font-size: 1.5rem; font-weight: 700; text-decoration: none; color: var(--text); margin-block-end: 1rem; }
.brand img { width: 64px; height: 64px; border-radius: 22%; }
nav { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
nav a { padding-block: .5rem; }
a { color: var(--accent); text-underline-offset: .2em; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
h1, h2 { line-height: 1.25; }
section { margin-block: 2rem; }
footer { margin-block-start: 3rem; border-top: 1px solid var(--border); padding-block-start: 1rem; }
@media (prefers-color-scheme: dark) {
  :root { --accent: #8c7aff; --background: #151419; --text: #eeedf2; --border: #3c3947; }
  @supports (color: color(display-p3 0 0 0)) {
    :root { --accent: color(display-p3 0.550 0.480 1.000); }
  }
}