:root {
  color-scheme: light;
  --ink: #172033;
  --muted: #5e687a;
  --line: #dce2ea;
  --brand: #175cd3;
  --surface: #f7f9fc;
}

* { box-sizing: border-box; }

html {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans",
    "Yu Gothic", sans-serif;
  line-height: 1.7;
  color: var(--ink);
  background: #fff;
}

body { margin: 0; }

header, main, footer {
  width: min(100% - 32px, 760px);
  margin-inline: auto;
}

header {
  padding: 28px 0 18px;
  border-bottom: 1px solid var(--line);
}

header a { color: inherit; text-decoration: none; }

nav { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 12px; }
nav a, main a { color: var(--brand); text-underline-offset: 3px; }

main { padding: 34px 0 54px; }
h1 { font-size: clamp(1.75rem, 5vw, 2.35rem); line-height: 1.25; }
h2 { margin-top: 2.2rem; font-size: 1.28rem; }
h3 { margin-top: 1.7rem; font-size: 1.08rem; }
p, li { overflow-wrap: anywhere; }
.meta, .note { color: var(--muted); }
.notice {
  padding: 16px 18px;
  border-left: 4px solid var(--brand);
  background: var(--surface);
}
.cards { display: grid; gap: 14px; margin-top: 24px; }
.card {
  display: block;
  padding: 20px;
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.card:hover, .card:focus-visible { border-color: var(--brand); }
footer {
  padding: 24px 0 42px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .92rem;
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}