@font-face {
      font-family: "Inter";
      src: url("../fonts/inter-latin-variable.woff2") format("woff2");
      font-style: normal;
      font-weight: 100 900;
      font-display: swap;
    }

    *, *::before, *::after { box-sizing: border-box; }

    :root {
      --ink: #040415;
      --paper: #fff;
      --lilac: #ddc8ff;
      --violet: #aa76ff;
      --pink: #ff57cc;
      --page: min(100% - 40px, 760px);
    }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      background: var(--ink);
      color: var(--paper);
      font-family: "Inter", sans-serif;
      font-size: 18px;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }

    .shell { width: var(--page); margin-inline: auto; }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px max(20px, env(safe-area-inset-left));
      background: rgba(4, 4, 21, .92);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--paper);
      text-decoration: none;
      font-weight: 700;
      font-size: 18px;
    }

    .brand img { width: 26px; height: auto; }

    .header-cta {
      color: var(--ink);
      background: var(--paper);
      text-decoration: none;
      font-weight: 600;
      font-size: 14px;
      padding: 10px 18px;
      border-radius: 999px;
      transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    .header-cta:hover { transform: scale(1.04); }

    .breadcrumbs {
      padding-top: 28px;
      font-size: 14px;
      color: rgba(255, 255, 255, .55);
    }

    .breadcrumbs a { color: var(--lilac); text-decoration: none; }
    .breadcrumbs a:hover { text-decoration: underline; }
    .breadcrumbs span[aria-hidden] { margin-inline: 8px; }

    article { padding-block: 20px 32px; }

    h1 {
      font-size: clamp(34px, 6vw, 52px);
      line-height: 1.08;
      letter-spacing: -.02em;
      margin: 8px 0 16px;
    }

    .lede {
      font-size: 20px;
      line-height: 1.6;
      color: rgba(255, 255, 255, .85);
      max-width: 62ch;
    }

    h2 {
      font-size: clamp(24px, 4vw, 32px);
      line-height: 1.15;
      letter-spacing: -.01em;
      margin: 48px 0 12px;
    }

    h3 {
      font-size: 19px;
      margin: 28px 0 8px;
      color: var(--lilac);
    }

    p { margin: 0 0 16px; max-width: 66ch; }

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

    .answer {
      margin-top: 24px;
      padding: 22px 24px;
      border-radius: 24px;
      background: rgba(221, 200, 255, .1);
      border: 1px solid rgba(221, 200, 255, .28);
    }

    .answer p { margin: 0; font-size: 19px; }

    figure {
      margin: 32px 0;
      padding: 0;
      text-align: center;
    }

    figure img {
      max-width: 100%;
      height: auto;
      border-radius: 24px;
    }

    figure.duo { display: flex; gap: 16px; justify-content: center; align-items: center; flex-wrap: wrap; }
    figure.duo img { max-width: min(100%, 340px); }

    figcaption {
      margin-top: 10px;
      font-size: 14px;
      color: rgba(255, 255, 255, .55);
    }

    ol.steps {
      counter-reset: step;
      list-style: none;
      padding: 0;
      margin: 24px 0;
      display: grid;
      gap: 14px;
    }

    ol.steps li {
      counter-increment: step;
      position: relative;
      padding: 18px 20px 18px 64px;
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 18px;
    }

    ol.steps li::before {
      content: counter(step);
      position: absolute;
      inset-inline-start: 20px;
      top: 18px;
      width: 30px;
      height: 30px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: var(--lilac);
      color: var(--ink);
      font-weight: 700;
      font-size: 15px;
    }

    .cta-block {
      margin: 48px 0 8px;
      padding: 32px;
      border-radius: 28px;
      background: linear-gradient(135deg, rgba(255, 87, 204, .16), rgba(0, 140, 255, .16));
      border: 1px solid rgba(255, 255, 255, .14);
      text-align: center;
    }

    .cta-block h2 { margin-top: 0; }

    .store-row {
      display: flex;
      gap: 14px;
      justify-content: center;
      flex-wrap: wrap;
      margin-top: 20px;
    }

    .store-row a { line-height: 0; }
    .store-row img { height: 52px; width: auto; }

    .related {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 14px;
      margin: 40px 0 8px;
    }

    .related a {
      display: block;
      padding: 18px 20px;
      border-radius: 18px;
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .12);
      color: var(--paper);
      text-decoration: none;
      font-weight: 600;
      font-size: 15px;
    }

    .related a span {
      display: block;
      margin-top: 4px;
      font-weight: 400;
      font-size: 13.5px;
      color: rgba(255, 255, 255, .6);
    }

    .site-footer {
      margin-top: 56px;
      padding: 40px 0 56px;
      border-top: 1px solid rgba(255, 255, 255, .1);
    }

    .footer-main {
      display: flex;
      flex-wrap: wrap;
      gap: 32px;
      justify-content: space-between;
    }

    .footer-brand { max-width: 320px; }
    .footer-brand strong { font-size: 20px; }
    .footer-brand p { margin: 8px 0 0; font-size: 14px; color: rgba(255, 255, 255, .6); }

    .footer-links { display: grid; gap: 8px; font-size: 14px; }
    .footer-links strong { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .5); margin-bottom: 4px; }
    .footer-links a { color: rgba(255, 255, 255, .78); text-decoration: none; }
    .footer-links a:hover { color: var(--paper); }

    .footer-bottom { margin-top: 36px; font-size: 13px; color: rgba(255, 255, 255, .45); }

    @media (max-width: 640px) {
      body { font-size: 16.5px; }
      .footer-main { flex-direction: column; gap: 24px; }
    }