:root {
      --bg: #f6f3ec;
      --paper: #fffdf8;
      --ink: #202124;
      --muted: #5e6470;
      --line: #d7d1c4;
      --accent: #2d6a4f;
      --accent-2: #1b4332;
      --code-bg: #1f2933;
      --code-ink: #edf2f7;
      --warn-bg: #fff3cd;
      --warn-line: #e0b84f;
      --ok-bg: #e8f5ef;
      --ok-line: #8cc7aa;
    }

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

    .page {
      width: min(1500px, calc(100vw - 36px));
      margin: 0 auto;
      padding: 32px 0 72px;
    }

    header {
      background: linear-gradient(135deg, #ffffff, #eef6f1);
      border: 1px solid var(--line);
      border-radius: 24px;
      padding: 34px;
      box-shadow: 0 16px 45px rgba(32, 33, 36, 0.08);
      margin-bottom: 26px;
    }

    h1, h2, h3 {
      line-height: 1.2;
      margin: 0 0 14px;
    }

    h1 { font-size: clamp(2rem, 5vw, 3.25rem); letter-spacing: -0.04em; }
    h2 { font-size: clamp(1.45rem, 3vw, 2rem); margin-top: 42px; }
    h3 { font-size: 1.15rem; margin-top: 28px; }

    p { margin: 0 0 16px; }

    a { color: var(--accent-2); font-weight: 650; }

    .lead {
      color: var(--muted);
      font-size: 1.13rem;
      max-width: 850px;
    }

    .meta {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 20px;
    }

    .pill {
      background: #ffffff;
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 7px 12px;
      color: var(--muted);
      font-size: 0.9rem;
    }

    nav, section, .card {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 20px;
      padding: 24px;
      margin: 18px 0;
      box-shadow: 0 6px 22px rgba(32, 33, 36, 0.04);
    }

    nav ul { columns: 2; padding-left: 20px; margin: 0; }
    nav li { break-inside: avoid; margin: 0 0 8px; }

    table {
      margin: 18px 0;
      border-radius: 14px;
    }

    th, td {
      border: 1px solid var(--line);
      padding: 12px;
    }

    th { background: #eef6f1; }

    code {
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 0.93em;
    }

    pre {
      background: var(--code-bg);
      color: var(--code-ink);
      padding: 18px;
      border-radius: 16px;
      border: 1px solid #111827;
      margin: 16px 0 24px;
    }

    .note, .warning {
      border-radius: 16px;
      padding: 16px 18px;
      margin: 18px 0;
    }

    .note {
      background: var(--ok-bg);
      border: 1px solid var(--ok-line);
    }

    .warning {
      background: var(--warn-bg);
      border: 1px solid var(--warn-line);
    }

    .diagram-figure {
      margin: 18px 0 28px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: #faf8f1;
    }

    .diagram-figure img {
      width: 100%;
      border-radius: 14px;
    }

    .diagram-figure figcaption {
      margin-top: 10px;
      color: var(--muted);
      font-size: 0.94rem;
    }

    .mini-diagram {
      display: grid;
      grid-template-columns: repeat(5, minmax(110px, 1fr));
      gap: 10px;
      align-items: center;
      margin-top: 16px;
    }

    .box {
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fff;
      padding: 12px;
      text-align: center;
      min-height: 76px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 650;
    }

    .arrow {
      text-align: center;
      color: var(--accent);
      font-weight: 800;
    }

    .checklist li { margin-bottom: 8px; }

    footer {
      margin-top: 40px;
      color: var(--muted);
      font-size: 0.95rem;
    }

    @media (max-width: 820px) {
      .page {
        width: min(100%, calc(100vw - 16px));
        padding: 12px 0 48px;
      }

      nav ul { columns: 1; }
      .mini-diagram { grid-template-columns: 1fr; }
      .arrow { transform: rotate(90deg); }
      header, section, nav, .card { padding: 16px; }

      pre {
        padding: 14px;
      }
    }