/* Original RAIO chrome button, shared with the contact page. */
.raio-create-button {
      --raio-create-height: 64px;
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: flex-start;
      gap: 12px;
      width: var(--raio-create-width, max-content);
      height: var(--raio-create-height);
      min-height: var(--raio-create-height);
      padding: 6px 17px 6px 6px;
      border: 0;
      border-radius: 999px;
      background: linear-gradient(#2d2e33, #17181b);
      box-shadow: inset 0 1px 1px #ffffff22, 0 4px 12px #0006;
      color: #f4f4f5;
      font-size: calc(var(--raio-create-height) * 76 / 236);
      font-weight: 400;
      line-height: 1;
      letter-spacing: -.02em;
      text-decoration: none;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
.raio-create-disc {
      display: grid;
      place-items: center;
      flex: 0 0 calc(var(--raio-create-height) - 12px);
      height: calc(var(--raio-create-height) - 12px);
      border: 2px solid #62646d;
      border-radius: 50%;
      background: linear-gradient(135deg, #404149, #27282d);
    }
.raio-create-disc img {
      width: 45%;
      height: 45%;
      filter: brightness(0) invert(1);
    }
.raio-create-label { white-space: nowrap; }
.raio-create-surface {
      display: none;
      position: absolute;
      left: -20px;
      top: -20px;
      pointer-events: none;
      transform-origin: center;
    }
.has-create-surface {
      background: transparent;
      box-shadow: none;
    }
.has-create-surface .raio-create-surface { display: block; }
.has-create-surface > :not(canvas) { opacity: 0; }
.raio-create-button:focus-visible {
      outline: 2px solid #8f969b;
      outline-offset: 5px;
    }