:root {
      --bg: #f5f5f2;
      --surface: #ffffff;
      --text: #1f1f1f;
      --muted: #666666;
      --line: #d9d9d3;
      --accent: #0f2a43;
      --max: 980px;
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font-family: Arial, Helvetica, sans-serif;
      line-height: 1.55;
    }

    img { max-width: 100%; display: block; }

    .page {
      max-width: var(--max);
      margin: 0 auto;
      padding: 36px 24px 64px;
    }

    .hero,
    .section,
    footer {
      background: var(--surface);
      border: 1px solid var(--line);
    }

    .hero {
      padding: 40px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 220px;
      gap: 40px;
      align-items: start;
    }

    h1, h2, h3, p, ul { margin-top: 0; }

    h1 {
      font-size: 2.4rem;
      line-height: 1.05;
      letter-spacing: -0.02em;
      margin-bottom: 14px;
      font-weight: 600;
    }

    .role {
      font-size: 1rem;
      color: var(--accent);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 24px;
    }

    .intro {
      font-size: 1.05rem;
      max-width: 60ch;
      margin-bottom: 0;
    }

    .qr-block {
      text-align: center;
    }

    .qr-block img {
      width: 100%;
      max-width: 220px;
      border: 1px solid var(--line);
      background: #fff;
      padding: 10px;
      margin: 0 auto 12px;
    }

    .qr-label {
      font-size: 0.9rem;
      color: var(--muted);
    }

    a {
      color: var(--accent);
      text-de([n8n.io](https://n8n.io/?utm_source=chatgpt.com))bottom-color: var(--accent);
    }

    .section {
      margin-top: 18px;
      padding: 28px 32px;
    }

    h2 {
      font-size: 0.95rem;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--accent);
      padding-bottom: 12px;
      border-bottom: 1px solid var(--line);
      margin-bottom: 24px;
    }

    .job {
      padding-bottom: 22px;
      margin-bottom: 22px;
      border-bottom: 1px solid #ecece7;
    }

    .job:last-child {
      border-bottom: 0;
      padding-bottom: 0;
      margin-bottom: 0;
    }

    .job-head {
      display: flex;
      justify-content: space-between;
      gap: 24px;
      align-items: baseline;
      margin-bottom: 6px;
    }

    .job-head h3 {
      font-size: 1.15rem;
      margin-bottom: 0;
      font-weight: 600;
    }

    .when {
      white-space: nowrap;
      color: var(--muted);
      font-size: 0.95rem;
    }

    .org {
      color: var(--muted);
      margin-bottom: 12px;
    }

    ul {
      padding-left: 20px;
      margin-bottom: 0;
    }

    li + li { margin-top: 6px; }

    .stack > * + * { margin-top: 18px; }

    .chips {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .chip {
      border: 1px solid var(--line);
      padding: 8px 12px;
      font-size: 0.95rem;
      background: #fafaf8;
    }

    .two-col-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px 28px;
      padding-left: 18px;
      margin: 0;
    }

    footer {
      margin-top: 18px;
      padding: 22px 32px;
      display: flex;
      justify-content: space-between;
      gap: 16px;
      color: var(--muted);
      font-size: 0.95rem;
    }

    @media (max-width: 820px) {
      .hero {
        grid-template-columns: 1fr;
      }

      .qr-block {
        text-align: left;
      }

      .qr-block img {
        margin-left: 0;
      }

      .job-head,
      footer {
        flex-direction: column;
        gap: 6px;
      }

      .two-col-list {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 560px) {
      .page { padding: 18px 12px 40px; }
      .hero, .section, footer { padding: 22px 18px; }
      h1 { font-size: 1.9rem; }
    }