:root {
      --cp-ink: #25213a;
      --cp-muted: #655f78;
      --cp-purple: #5b3aa8;
      --cp-purple-dark: #39226e;
      --cp-violet: #8c6be8;
      --cp-lilac: #eee8ff;
      --cp-lilac-soft: #f7f4ff;
      --cp-border: #e5def6;
      --cp-white: #ffffff;
      --cp-teal: #1e8c89;
      --cp-shadow: 0 20px 60px rgba(57, 34, 110, .10);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background: #fbfaff;
      color: var(--cp-ink);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.72;
      -webkit-font-smoothing: antialiased;
    }
    a { color: var(--cp-purple); text-underline-offset: 3px; }
    a:hover { color: var(--cp-purple-dark); }
    .cp-page { overflow: hidden; }
    .cp-shell { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }

    .cp-hero {
      position: relative;
      padding: 82px 0 72px;
      background:
        radial-gradient(circle at 88% 16%, rgba(191, 171, 255, .38), transparent 25%),
        radial-gradient(circle at 5% 100%, rgba(226, 215, 255, .62), transparent 34%),
        linear-gradient(135deg, #f7f4ff 0%, #ffffff 48%, #f1ebff 100%);
      border-bottom: 1px solid var(--cp-border);
    }
    .cp-hero::after {
      content: "";
      position: absolute;
      width: 310px;
      height: 310px;
      right: -80px;
      bottom: -155px;
      border: 1px solid rgba(91, 58, 168, .12);
      border-radius: 50%;
      box-shadow: 0 0 0 30px rgba(91, 58, 168, .035), 0 0 0 62px rgba(91, 58, 168, .025);
      pointer-events: none;
    }
    .cp-kicker {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin: 0 0 20px;
      color: var(--cp-purple);
      font-size: .77rem;
      font-weight: 800;
      letter-spacing: .14em;
      text-transform: uppercase;
    }
    .cp-kicker::before {
      content: "";
      width: 25px;
      height: 2px;
      background: var(--cp-violet);
      border-radius: 10px;
    }
    .cp-hero h1 {
      max-width: 850px;
      margin: 0;
      color: var(--cp-purple-dark);
      font-size: clamp(2.35rem, 5.2vw, 4.6rem);
      line-height: 1.08;
      letter-spacing: -.045em;
    }
    .cp-deck {
      max-width: 790px;
      margin: 24px 0 0;
      color: var(--cp-muted);
      font-size: clamp(1.05rem, 1.6vw, 1.22rem);
    }
    .cp-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 22px;
      margin-top: 28px;
      color: #756d89;
      font-size: .88rem;
    }
    .cp-meta span { display: inline-flex; align-items: center; gap: 8px; }
    .cp-meta span::before {
      content: "";
      width: 6px;
      height: 6px;
      background: var(--cp-violet);
      border-radius: 50%;
    }

    .cp-main { padding: 48px 0 80px; }
    .cp-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 285px;
      gap: 42px;
      align-items: start;
    }
    .cp-article { min-width: 0; }
    .cp-intro {
      margin: 0 0 27px;
      color: #48425d;
      font-size: 1.12rem;
    }
    .cp-note {
      display: grid;
      grid-template-columns: 42px 1fr;
      gap: 15px;
      margin: 30px 0;
      padding: 21px 23px;
      background: linear-gradient(135deg, #f0eaff, #faf8ff);
      border: 1px solid #ded3fb;
      border-radius: 18px;
    }
    .cp-note-icon {
      display: grid;
      width: 40px;
      height: 40px;
      place-items: center;
      color: white;
      background: var(--cp-purple);
      border-radius: 13px;
      font-size: 1.15rem;
      font-weight: 800;
    }
    .cp-note p { margin: 0; color: #4e4667; }
    .cp-note strong { color: var(--cp-purple-dark); }

    .cp-toc {
      position: sticky;
      top: 22px;
      padding: 23px 22px;
      background: var(--cp-white);
      border: 1px solid var(--cp-border);
      border-radius: 18px;
      box-shadow: var(--cp-shadow);
    }
    .cp-toc h2 {
      margin: 0 0 14px;
      color: var(--cp-purple-dark);
      font-size: .93rem;
      letter-spacing: .02em;
    }
    .cp-toc ol { margin: 0; padding-left: 19px; }
    .cp-toc li { padding: 5px 0; color: #847d97; font-size: .86rem; line-height: 1.45; }
    .cp-toc a { color: #51496a; text-decoration: none; }
    .cp-toc a:hover { color: var(--cp-purple); text-decoration: underline; }

    .cp-article section { scroll-margin-top: 24px; margin-top: 46px; }
    .cp-article h2 {
      margin: 0 0 16px;
      color: var(--cp-purple-dark);
      font-size: clamp(1.6rem, 2.7vw, 2.15rem);
      line-height: 1.2;
      letter-spacing: -.025em;
    }
    .cp-article h3 {
      margin: 25px 0 9px;
      color: #403268;
      font-size: 1.15rem;
      line-height: 1.35;
    }
    .cp-article p { margin: 0 0 16px; }
    .cp-article ul, .cp-article ol { padding-left: 23px; margin: 12px 0 19px; }
    .cp-article li { padding: 3px 0; }
    .cp-article li::marker { color: var(--cp-violet); }
    .cp-lead-in { color: var(--cp-muted); }
    .cp-cards {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 15px;
      margin: 23px 0;
    }
    .cp-card {
      padding: 20px;
      background: var(--cp-white);
      border: 1px solid var(--cp-border);
      border-radius: 16px;
      box-shadow: 0 9px 28px rgba(57, 34, 110, .045);
    }
    .cp-card-label {
      display: block;
      margin-bottom: 8px;
      color: var(--cp-purple);
      font-size: .75rem;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
    }
    .cp-card h3 { margin: 0 0 8px; font-size: 1.02rem; }
    .cp-card p { margin: 0; color: var(--cp-muted); font-size: .93rem; }

    .cp-table-wrap {
      overflow-x: auto;
      margin: 23px 0;
      background: white;
      border: 1px solid var(--cp-border);
      border-radius: 16px;
      box-shadow: 0 8px 25px rgba(57, 34, 110, .04);
    }
    .cp-table {
      width: 100%;
      min-width: 590px;
      border-collapse: collapse;
      font-size: .94rem;
    }
    .cp-table th, .cp-table td {
      padding: 15px 17px;
      text-align: left;
      vertical-align: top;
      border-bottom: 1px solid #eee9f8;
    }
    .cp-table th {
      color: var(--cp-purple-dark);
      background: #f5f1ff;
      font-size: .84rem;
      letter-spacing: .04em;
      text-transform: uppercase;
    }
    .cp-table tr:last-child td { border-bottom: 0; }

    .cp-workflow {
      counter-reset: cp-step;
      display: grid;
      gap: 12px;
      margin: 23px 0;
      padding: 0;
      list-style: none;
    }
    .cp-workflow li {
      counter-increment: cp-step;
      display: grid;
      grid-template-columns: 42px 1fr;
      gap: 15px;
      padding: 17px 19px;
      background: white;
      border: 1px solid var(--cp-border);
      border-radius: 15px;
    }
    .cp-workflow li::before {
      content: counter(cp-step, decimal-leading-zero);
      display: grid;
      width: 39px;
      height: 39px;
      place-items: center;
      color: white;
      background: linear-gradient(135deg, var(--cp-purple), var(--cp-violet));
      border-radius: 13px;
      font-size: .77rem;
      font-weight: 800;
    }
    .cp-workflow strong { display: block; margin: 1px 0 4px; color: #382866; }
    .cp-workflow span { display: block; color: var(--cp-muted); font-size: .94rem; }

    .cp-callout {
      margin: 25px 0;
      padding: 25px;
      color: #f8f5ff;
      background: linear-gradient(135deg, #39226e, #6845bc 72%, #8062d4);
      border-radius: 19px;
      box-shadow: 0 14px 35px rgba(57, 34, 110, .18);
    }
    .cp-callout h3 { margin: 0 0 9px; color: white; font-size: 1.2rem; }
    .cp-callout p { margin: 0; color: #eee8ff; }
    .cp-callout a { color: #fff; font-weight: 800; text-decoration-color: #cbb9ff; }
    .cp-callout a:hover { color: #e4dbff; }

    .cp-caution {
      margin: 24px 0;
      padding: 18px 21px;
      background: #fffaf0;
      border-left: 4px solid #e2a83b;
      border-radius: 0 13px 13px 0;
      color: #665233;
      font-size: .95rem;
    }
    .cp-faq {
      margin: 12px 0;
      padding: 19px 20px;
      background: white;
      border: 1px solid var(--cp-border);
      border-radius: 14px;
    }
    .cp-faq h3 { margin: 0 0 7px; font-size: 1.03rem; }
    .cp-faq p { margin: 0; color: var(--cp-muted); }
    .cp-references {
      padding: 22px 24px;
      background: #f3effd;
      border: 1px solid var(--cp-border);
      border-radius: 16px;
    }
    .cp-references ol { margin-bottom: 0; }
    .cp-references li { margin: 8px 0; font-size: .91rem; }
    .cp-disclaimer {
      margin-top: 25px;
      padding-top: 20px;
      color: #777087;
      border-top: 1px solid var(--cp-border);
      font-size: .87rem;
    }
    .cp-end {
      margin-top: 45px;
      padding: 28px;
      text-align: center;
      background: linear-gradient(135deg, #f0eaff, #fff);
      border: 1px solid var(--cp-border);
      border-radius: 20px;
    }
    .cp-end h2 { margin-bottom: 9px; font-size: 1.55rem; }
    .cp-end p { max-width: 630px; margin: 0 auto 17px; color: var(--cp-muted); }
    .cp-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 12px 20px;
      color: white;
      background: var(--cp-purple);
      border-radius: 999px;
      font-size: .93rem;
      font-weight: 800;
      text-decoration: none;
      transition: transform .18s ease, background .18s ease;
    }
    .cp-button:hover { color: white; background: var(--cp-purple-dark); transform: translateY(-1px); }
    .cp-small { color: #817a92; font-size: .84rem; }

    @media (max-width: 900px) {
      .cp-layout { grid-template-columns: 1fr; gap: 23px; }
      .cp-toc { position: static; order: -1; }
      .cp-toc ol { columns: 2; column-gap: 28px; }
      .cp-toc li { break-inside: avoid; }
    }
    @media (max-width: 620px) {
      .cp-shell { width: min(100% - 28px, 1120px); }
      .cp-hero { padding: 58px 0 48px; }
      .cp-main { padding: 28px 0 54px; }
      .cp-cards { grid-template-columns: 1fr; }
      .cp-toc ol { columns: 1; }
      .cp-note { grid-template-columns: 1fr; }
      .cp-article section { margin-top: 37px; }
      .cp-callout, .cp-end { padding: 21px; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { transition-duration: .01ms !important; }
    }