:root {
      --bg: #f7f8fb;
      --card: #ffffff;
      --text: #172033;
      --muted: #5d667a;
      --line: #e6e9f0;
      --accent: #3157d5;
      --accent-soft: #eef2ff;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.65;
    }

    header {
      background: linear-gradient(135deg, #172033 0%, #3157d5 100%);
      color: white;
      padding: 48px 20px 36px;
    }

    .wrap {
      max-width: 1040px;
      margin: 0 auto;
    }

    .eyebrow {
      font-size: 14px;
      letter-spacing: .08em;
      text-transform: uppercase;
      opacity: .82;
    }

    h1 {
      margin: 10px 0 8px;
      font-size: clamp(32px, 5vw, 52px);
      line-height: 1.08;
    }

    .meta {
      color: rgba(255, 255, 255, .86);
      margin: 0;
    }

    nav {
      background: white;
      border-bottom: 1px solid var(--line);
      position: sticky;
      top: 0;
      z-index: 2;
    }

    nav .wrap {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding: 10px 20px;
    }

    nav a {
      white-space: nowrap;
      text-decoration: none;
      color: var(--muted);
      padding: 9px 12px;
      border-radius: 999px;
      font-size: 14px;
    }

    nav a.active,
    nav a:hover {
      background: var(--accent-soft);
      color: var(--accent);
    }

    main {
      padding: 28px 20px 56px;
    }

    article {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 22px;
      padding: clamp(22px, 4vw, 44px);
      box-shadow: 0 18px 50px rgba(23, 32, 51, .06);
    }

    h2 {
      margin-top: 34px;
      padding-top: 22px;
      border-top: 1px solid var(--line);
      font-size: 24px;
    }

    h2:first-child {
      margin-top: 0;
      padding-top: 0;
      border-top: 0;
    }

    h3 {
      margin-top: 24px;
      font-size: 18px;
    }

    p {
      margin: 10px 0;
    }

    ul {
      padding-left: 22px;
    }

    li {
      margin: 6px 0;
    }

    .notice {
      background: #fff8e6;
      border: 1px solid #f0d894;
      color: #5f4700;
      border-radius: 16px;
      padding: 14px 16px;
      margin: 18px 0;
    }

    .info-grid {
      display: grid;
      grid-template-columns: minmax(180px, 280px) 1fr;
      gap: 8px 18px;
      margin: 16px 0;
    }

    .info-grid dt {
      color: var(--muted);
    }

    .info-grid dd {
      margin: 0;
      font-weight: 600;
    }

    a {
      color: var(--accent);
    }

    footer {
      color: var(--muted);
      font-size: 14px;
      padding: 26px 20px 40px;
      text-align: center;
    }

    @media (max-width: 680px) {
      .info-grid {
        grid-template-columns: 1fr;
        gap: 2px;
      }

      .info-grid dd {
        margin-bottom: 10px;
      }
    }