:root {
      --bg: #fcfcfa;
      --surface: #ffffff;
      --line: #e7e7e3;
      --text: #161616;
      --muted: #666;
      --soft: #f5f5f2;
      --max: 980px;
    }

    * {
      box-sizing: border-box;
    }

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

    .page {
      max-width: var(--max);
      margin: 0 auto;
      padding: 28px 18px 72px;
    }

    .topbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }

    .locale-switch {
      display: inline-flex;
      gap: 6px;
    }

    .topbar-actions {
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }

    .locale-btn {
      border: 1px solid var(--line);
      background: var(--surface);
      color: var(--text);
      padding: 4px 9px;
      font-size: 12px;
      letter-spacing: 0.04em;
      cursor: pointer;
      text-decoration: none;
    }

    .locale-btn[aria-current="true"] {
      background: var(--soft);
      border-color: #cfcfc8;
    }

    .pdf-btn {
      border: 1px solid #cfcfc8;
      background: #1f1f1f;
      color: #fff;
      padding: 5px 10px;
      font-size: 12px;
      letter-spacing: 0.03em;
      cursor: pointer;
      border-radius: 4px;
      transition: background 0.16s ease;
    }

    .pdf-btn:hover {
      background: #101010;
    }

    .pdf-btn:focus-visible {
      outline: 2px solid #555;
      outline-offset: 2px;
    }

    .hero {
      display: grid;
      grid-template-columns: 128px 1fr;
      gap: 18px;
      align-items: center;
      padding: 6px 2px 2px;
    }

    .avatar {
      width: 128px;
      height: 128px;
      border-radius: 50%;
      object-fit: cover;
      border: 1px solid var(--line);
      background: var(--soft);
      display: block;
    }

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

    h1 {
      font-size: clamp(28px, 4vw, 40px);
      font-weight: 600;
    }

    h2 {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 12px;
    }

    h3 {
      font-size: 17px;
      font-weight: 600;
      margin-bottom: 8px;
    }

    p {
      margin: 0;
    }

    .meta {
      margin-top: 8px;
      color: var(--muted);
      display: grid;
      gap: 4px;
    }

    .section {
      margin-top: 16px;
      border: 1px solid var(--line);
      background: var(--surface);
      padding: 20px;
      border-radius: 4px;
    }

    .list {
      margin: 0;
      padding-left: 18px;
      display: grid;
      gap: 6px;
    }

    .tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
    }

    .tag {
      border: 1px solid var(--line);
      padding: 5px 10px;
      font-size: 13px;
      background: var(--soft);
      border-radius: 4px;
    }

    .experience-item {
      padding: 14px 0;
      border-top: 1px solid var(--line);
    }

    .experience-item:first-of-type {
      border-top: 0;
      padding-top: 0;
    }

    .job-meta {
      color: var(--muted);
      margin: 3px 0 10px;
    }

    a {
      color: var(--text);
      text-underline-offset: 2px;
    }

    .warning {
      margin-top: 8px;
      color: #444;
      font-size: 14px;
    }

    .skill-group {
      margin-top: 14px;
    }
    .skill-group:first-of-type {
      margin-top: 0;
    }

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

    .faq-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .faq-item {
      border: 1px solid var(--line);
      background: linear-gradient(180deg, #ffffff 0%, #f9f9f6 100%);
      border-radius: 8px;
      padding: 14px;
    }

    .faq-item h3 {
      font-size: 16px;
      margin-bottom: 8px;
    }

    .faq-item p {
      color: #2f2f2f;
      font-size: 14px;
    }

    .seo-snapshots {
      position: absolute;
      left: -99999px;
      width: 1px;
      height: 1px;
      overflow: hidden;
    }

    @media print {
      @page {
        size: A4;
        margin: 12mm;
      }

      body {
        background: #fff;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }

      .page {
        max-width: none;
        padding: 0;
      }

      .topbar,
      .pdf-btn,
      .pdf-exclude {
        display: none !important;
      }

      .section,
      .experience-item,
      .faq-item,
      .tag,
      .avatar,
      h1,
      h2,
      h3 {
        break-inside: avoid-page;
        page-break-inside: avoid;
      }

      a {
        color: inherit;
        text-decoration: underline;
      }
    }

    @media (max-width: 700px) {
      .page {
        padding: 14px 12px 48px;
      }

      .hero {
        grid-template-columns: 1fr;
        gap: 12px;
      }

      .avatar {
        width: 96px;
        height: 96px;
      }

      .section {
        padding: 14px;
      }

      .faq-grid {
        grid-template-columns: 1fr;
      }
    }