:root {
  color-scheme: light dark;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
  line-height: 1.7;
  --accent: #20b8a4;
  --surface: rgba(127, 127, 127, 0.09);
}

body { margin: 0; }
main { max-width: 720px; margin: 0 auto; padding: 64px 24px 96px; }
h1 { font-size: clamp(2rem, 7vw, 3.4rem); line-height: 1.1; margin-bottom: 12px; }
h1 span { display: block; margin-top: 8px; font-size: .34em; letter-spacing: .12em; opacity: .58; }
h2 { margin-top: 42px; }
.lead { font-size: 1.15rem; color: color-mix(in srgb, currentColor 72%, transparent); }
.card { background: var(--surface); border-radius: 18px; padding: 20px; margin: 16px 0; }
a { color: var(--accent); }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
nav { display: flex; gap: 18px; margin-bottom: 48px; }
nav a[aria-current="page"] { color: currentColor; font-weight: 700; text-decoration-thickness: 3px; }
footer { margin-top: 64px; font-size: .9rem; opacity: .65; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 10; padding: 10px 14px; color: #071a22; background: #d7fff8; border-radius: 10px; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

@media (max-width: 420px) {
  main { padding: 36px 20px 72px; }
  nav { flex-wrap: wrap; margin-bottom: 36px; }
}