html { background: #e3e8e1; scrollbar-gutter: stable; }
body { margin: 0; padding: 24px 24px 0; color: #1a1a1a; font-size: 16px; line-height: 1.55; }
.page { box-sizing: border-box; max-width: 1080px; min-height: calc(100vh - 24px); min-height: calc(100dvh - 24px); margin: 0 auto; padding: 48px 24px; background: #fff; }
.page-inner { max-width: 600px; margin: 0 auto; }
.home-intro { font-size: 16px; font-weight: 400; line-height: inherit; margin: 0 0 1rem; }
nav { font-size: 14px; margin-bottom: 3rem; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
a { color: #1a1a1a; text-underline-offset: 2px; }
nav a[aria-current] { text-decoration: none; font-weight: 600; }
h1 { font-size: 18px; font-weight: 600; margin: 0 0 1.5rem; }
p { margin: 0 0 1rem; }
.empty { color: #666; }
a:focus-visible, button:focus-visible { outline: 2px solid #666; outline-offset: 5px; }
.skip-link { position: absolute; left: 1.5rem; top: -100px; background: #fff; padding: 8px; }
.skip-link:focus { top: 8px; }
::selection { background: #e6e6e6; }
@media (max-width: 600px) { body { padding: 12px 12px 0; } .page { min-height: calc(100vh - 12px); min-height: calc(100dvh - 12px); padding: 30px 20px; } nav { gap: .4rem 1.1rem; } }
@media (max-width: 360px) { .page { padding-left: 16px; padding-right: 16px; } nav { gap: .4rem .9rem; } }