:root {
  color-scheme: light;
  --blue: #0b54f0;
  --volt: #c7f73a;
  --paper: #f7f8f2;
  --ink: #0e0e10;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 1rem; }
body { margin: 0; background: var(--blue); color: var(--ink); font: 1rem/1.65 system-ui, sans-serif; }
main { width: min(100% - 2rem, 48rem); margin: 2rem auto; }
header { padding: 1rem 0 2rem; color: white; }
.brand { color: var(--volt); font-weight: 800; font-size: 1.5rem; }
h1 { font-size: clamp(2rem, 7vw, 3rem); line-height: 1.15; }
nav { display: flex; flex-wrap: wrap; gap: 1rem; }
nav a { color: white; min-height: 44px; display: inline-flex; align-items: center; }
section { padding: clamp(1.25rem, 5vw, 2.5rem); background: var(--paper); border-radius: 1.5rem; margin-bottom: 1.5rem; }
h2 { margin-top: 0; line-height: 1.2; font-size: 1.75rem; }
h3 { margin-top: 1.75rem; line-height: 1.35; }
p { overflow-wrap: anywhere; }
a { text-underline-offset: 0.2em; }
section a { color: var(--blue); }
a:focus-visible { outline: 3px solid currentColor; outline-offset: 5px; }