:root {
  color-scheme: light;
  --ink: #13213b;
  --muted: #52617a;
  --blue: #1774c9;
  --line: #dce6f0;
  --wash: #f3f7fb;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: linear-gradient(145deg, #edf6ff 0%, #fffdf8 55%, #f5f8fc 100%);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  line-height: 1.75;
}
.shell { width: min(100% - 32px, 760px); margin: 0 auto; padding: 40px 0 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.08rem; }
.mark { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: white; background: var(--blue); }
.hero, .content { margin-top: 26px; padding: clamp(26px, 7vw, 52px); border: 1px solid rgba(220, 230, 240, .9); border-radius: 24px; background: rgba(255, 255, 255, .94); box-shadow: 0 18px 60px rgba(25, 54, 86, .10); }
.eyebrow { margin: 0 0 6px; color: var(--blue); font-weight: 800; letter-spacing: .06em; font-size: .82rem; }
h1 { margin: 0; font-size: clamp(2rem, 7vw, 3.3rem); line-height: 1.2; letter-spacing: -.04em; }
h2 { margin: 34px 0 8px; font-size: 1.22rem; line-height: 1.4; }
p { margin: 12px 0; }
.lead { max-width: 590px; margin-top: 22px; color: var(--muted); font-size: 1.08rem; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 30px; }
.card { display: grid; gap: 2px; padding: 19px; border: 1px solid var(--line); border-radius: 16px; color: inherit; text-decoration: none; transition: transform .15s ease, border-color .15s ease; }
.card:hover, .card:focus-visible { transform: translateY(-2px); border-color: var(--blue); outline: none; }
.card strong { font-size: 1.05rem; }.card span, .date { color: var(--muted); font-size: .92rem; }
.notice { margin: 24px 4px 0; color: var(--muted); font-size: .9rem; }
.back { display: inline-block; color: var(--blue); font-weight: 700; text-decoration: none; }.back:hover { text-decoration: underline; }
.content { margin-top: 16px; }.content h1 { font-size: clamp(1.8rem, 6vw, 2.55rem); }.content ul { padding-left: 1.25em; }
.nav { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 34px; }.nav a { color: var(--blue); font-weight: 700; }
@media (max-width: 520px) { .shell { width: min(100% - 24px, 760px); padding-top: 24px; }.cards { grid-template-columns: 1fr; }.hero, .content { border-radius: 20px; } }