* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 400;
  color: var(--ink);
  background: var(--surface-page);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.skip {
  position: absolute;
  left: var(--space-4);
  top: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-full);
  color: var(--on-brand);
  background: var(--brand);
  transform: translateY(-200%);
}
.skip:focus { transform: none; z-index: 1; }
a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
a:active { color: var(--brand); text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.wrap { width: 100%; max-width: var(--web-max-width); margin: 0 auto; padding-left: var(--web-gutter); padding-right: var(--web-gutter); }
.reading { max-width: var(--web-reading-width); }
.site-header { color: var(--ink); background: var(--surface-page); border-bottom: 1px solid var(--divider); }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-4); min-height: var(--web-header-min-height); }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 48px; color: var(--ink); text-decoration: none; }
.wordmark img { display: block; }
.site-header nav ul, .site-footer nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--space-4); }
.site-header nav li, .site-footer nav li { margin: 0; }
.site-header nav a, .site-footer nav a { display: inline-flex; align-items: center; min-height: 48px; }
.site-header nav a { color: var(--ink); font-size: 0.875rem; line-height: 1.43; font-weight: 500; text-decoration: none; }
.site-header nav a:hover { text-decoration: underline; }
.site-header nav a[aria-current="page"] { font-weight: 600; text-decoration: underline; }
.page { flex: 1; padding-top: var(--web-section-gap); padding-bottom: var(--web-section-gap); overflow-wrap: break-word; }
h1, h2, h3, h4 { margin: var(--space-6) 0 var(--space-3); }
.page > :first-child h1:first-child, .reading > h1:first-child, .hero > h1:first-child, .legal > h1:first-child { margin-top: 0; }
p, ul, ol { margin: 0 0 var(--space-4); }
li { margin-bottom: var(--space-2); }
ul, ol { padding-left: var(--space-5); }
.muted { color: var(--ink-muted); }
.notice { display: inline-block; margin: 0 0 var(--space-4); padding: var(--space-2) var(--space-4); color: var(--on-brand-container); background: var(--brand-container); border-radius: var(--radius-full); }
.hero { margin-bottom: var(--web-section-gap); }
.cards { list-style: none; padding: 0; margin: 0 0 var(--web-section-gap); display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.card { margin: 0; padding: var(--space-5); background: var(--surface-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.card h2 { margin-top: 0; }
.card p { margin-bottom: 0; }
code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.875em; color: var(--ink); background: var(--surface-variant); padding: 0 var(--space-1); border-radius: var(--radius-sm); }
blockquote { margin: 0 0 var(--space-4); padding: var(--space-4) var(--space-4) var(--space-2); color: var(--ink); background: var(--surface-variant); border-left: 4px solid var(--brand); border-radius: var(--radius-sm); }
.table-wrap { margin: 0 0 var(--space-4); overflow-x: auto; }
.table-wrap:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
table { border-collapse: collapse; width: 100%; min-width: 30rem; font-size: 0.875rem; line-height: 1.43; }
th, td { text-align: left; vertical-align: top; padding: var(--space-2) var(--space-3); border: 1px solid var(--divider); }
th { font-weight: 600; color: var(--ink); background: var(--surface-variant); }
.site-footer { color: var(--ink); background: var(--surface-variant); border-top: 1px solid var(--divider); }
.footer-inner { display: grid; grid-template-columns: 1fr; gap: var(--space-4); padding-top: var(--space-6); padding-bottom: var(--space-6); font-size: 0.875rem; line-height: 1.43; }
.site-footer nav ul { flex-direction: column; gap: 0; }
.site-footer p { margin: 0; }
@media (min-width: 768px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
  .footer-inner { grid-template-columns: 1fr auto; align-items: start; }
  .site-footer nav ul { flex-direction: row; flex-wrap: wrap; gap: 0 var(--space-4); }
  .footer-inner p { text-align: right; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: var(--space-3) var(--space-6); color: var(--on-brand); background: var(--brand); border-radius: var(--radius-full); font-weight: 600; text-decoration: none; }
.button:hover { text-decoration: underline; }
.button:active { color: var(--on-brand); }