:root { color-scheme: light dark; font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif; color: #202124; background: #f6f6f3; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 720px; margin: auto; padding: 32px 24px 64px; }
header, nav { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
header { justify-content: space-between; padding-bottom: 36px; }
.brand { font-size: 28px; font-weight: 750; letter-spacing: -1.4px; text-decoration: none; color: inherit; }
.brand span { color: #c24877; }
nav { font-size: 14px; }
a { color: #384e73; text-underline-offset: 4px; overflow-wrap: anywhere; }
a:focus-visible, summary:focus-visible { outline: 3px solid #4164f4; outline-offset: 5px; border-radius: 4px; }
h1 { font-size: clamp(30px, 6vw, 42px); line-height: 1.2; letter-spacing: -1.5px; margin: 0 0 16px; }
h2 { font-size: 21px; margin: 36px 0 12px; letter-spacing: -.4px; }
p, li { font-size: 16px; line-height: 1.8; }
p { margin: 12px 0; }
.meta, footer { color: #60636a; font-size: 13px; line-height: 1.7; }
.contact { display: block; margin: 28px 0; padding: 22px; border-radius: 20px; background: #fff; border: 1px solid #dddeda; }
details { border-bottom: 1px solid #d7d8d4; padding: 20px 0; }
summary { font-size: 17px; font-weight: 600; cursor: pointer; line-height: 1.5; }
details p { color: #50545a; }
footer { margin-top: 48px; border-top: 1px solid #d7d8d4; padding-top: 20px; }
@media (prefers-color-scheme: dark) {
  :root { background: #17191c; color: #eee; }
  a { color: #b7cbf2; }
  .contact { background: #23262a; border-color: #42464c; }
  details, footer { border-color: #42464c; }
  details p, .meta, footer { color: #b9bec6; }
  .brand span { color: #f69bc0; }
}