:root {
  color-scheme: light dark;
  --cyan: #5cb6ce;
  --soft: #d9f1f3;
  --orange: #ed7100;
  --ink: #3f454b;
  --paper: #fffdfa;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  line-height: 1.75;
  color: var(--ink);
  background: linear-gradient(160deg, var(--soft), #ffffff 42%);
}
header, main, footer { width: min(900px, calc(100% - 32px)); margin: auto; }
header { padding: 52px 0 26px; text-align: center; }
.logo { width: 112px; height: 112px; border-radius: 24px; box-shadow: 0 14px 36px #173a4830; }
h1 { margin: 16px 0 4px; font-size: clamp(2rem, 7vw, 3.5rem); }
.lead { font-size: 1.15rem; margin: 0; }
nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }
nav a, .button { display: inline-block; padding: 9px 15px; border-radius: 999px; background: var(--paper); color: var(--ink); text-decoration: none; border: 1px solid #3f454b22; }
nav a:hover, .button:hover { border-color: var(--orange); }
.card { background: color-mix(in srgb, var(--paper) 92%, transparent); border: 1px solid #3f454b16; border-radius: 22px; padding: 24px; margin: 18px 0; box-shadow: 0 14px 40px #173a4812; }
h2 { margin-top: 0; }
a { color: #006c88; }
.notice { border-left: 5px solid var(--orange); padding-left: 16px; }
footer { padding: 28px 0 56px; text-align: center; font-size: .9rem; }
code { background: #3f454b12; padding: 2px 6px; border-radius: 6px; }
@media (prefers-color-scheme: dark) {
  body { color: #f3f5f6; background: #16242a; }
  .card, nav a, .button { background: #22363e; color: #f3f5f6; border-color: #ffffff20; }
  a { color: #72d6ef; }
}