:root {
  color-scheme: dark;
  --page: #171918;
  --text: #f4f5f2;
  --muted: #b9bdb8;
  --line: #3b403b;
  --focus: #d6ad4b;
  --font: Arial, Helvetica, sans-serif;
  --space-small: .75rem;
  --space: 1.5rem;
  --space-large: 3rem;
  --content-width: 45rem;
  --icon-size: 8rem;
  --icon-radius: 1.75rem;
  font-family: var(--font);
  background: var(--page);
  color: var(--text);
}
* { box-sizing: border-box; }
body { max-width: var(--content-width); margin: 0 auto; padding: var(--space-large) var(--space); font-size: 1rem; line-height: 1.65; overflow-wrap: anywhere; }
header { border-bottom: 1px solid var(--line); margin-bottom: var(--space-large); }
h1 { font-size: 2rem; line-height: 1.15; margin: 0 0 var(--space); font-weight: 800; letter-spacing: -.025em; }
h2 { font-size: 1.25rem; margin-top: var(--space-large); line-height: 1.3; }
a { color: var(--text); text-underline-offset: .25em; text-decoration-thickness: 1px; }
a:hover { color: var(--focus); }
a:focus-visible { outline: 2px solid var(--focus); outline-offset: .3rem; }
nav { display: flex; gap: var(--space-small) var(--space); flex-wrap: wrap; margin: var(--space) 0; }
nav a { padding: var(--space-small) 0; }
.fine { color: var(--muted); font-size: .875rem; }
.landing { min-height: 100svh; display: flex; flex-direction: column; max-width: none; text-align: center; }
.identity { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-large); padding: var(--space-large) 0; }
.app-icon { display: block; width: var(--icon-size); height: var(--icon-size); border-radius: var(--icon-radius); }
.identity h1 { font-size: clamp(2rem, 6vw, 3.75rem); margin: 0; }
.app-purpose { max-width: var(--content-width); color: var(--muted); margin: 0; }
.landing nav { justify-content: center; margin-bottom: 0; font-size: .875rem; }
.landing nav a { color: var(--muted); text-decoration: none; }
.landing nav a:hover { color: var(--text); text-decoration: underline; }