[x-cloak] {
      display: none !important;
    }

    html,
    body {
      min-height: 100%;
    }

    body {
      overflow: hidden;
    }

    .access-background {
      background:
        radial-gradient(
          circle at 15% 20%,
          rgba(190, 137, 110, 0.18),
          transparent 34%
        ),
        radial-gradient(
          circle at 85% 75%,
          rgba(136, 151, 124, 0.16),
          transparent 36%
        ),
        linear-gradient(
          135deg,
          #f8f3eb 0%,
          #f2e8dc 48%,
          #eee5da 100%
        );
    }

    .grain {
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: 0.18;
      mix-blend-mode: multiply;
      background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.06'/%3E%3C/svg%3E");
    }

    .decorative-ring {
      position: absolute;
      width: min(64vw, 780px);
      aspect-ratio: 1;
      border: 1px solid rgba(71, 61, 52, 0.08);
      border-radius: 9999px;
      pointer-events: none;
    }

    .decorative-ring::before,
    .decorative-ring::after {
      content: "";
      position: absolute;
      border-radius: inherit;
      border: 1px solid rgba(71, 61, 52, 0.06);
    }

    .decorative-ring::before {
      inset: 7%;
    }

    .decorative-ring::after {
      inset: 15%;
    }

    .access-panel {
      background:
        linear-gradient(
          145deg,
          rgba(255, 255, 255, 0.72),
          rgba(255, 255, 255, 0.36)
        );
      border: 1px solid rgba(255, 255, 255, 0.76);
      box-shadow:
        0 40px 100px rgba(72, 56, 43, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.86);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }

    .code-box {
      caret-color: transparent;
      background:
        linear-gradient(
          145deg,
          rgba(255, 255, 255, 0.94),
          rgba(250, 245, 238, 0.72)
        );
      box-shadow:
        0 14px 34px rgba(62, 50, 40, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
    }

    .code-box:hover:not(:disabled) {
      transform: translateY(-2px);
      border-color: rgba(162, 112, 87, 0.42);
      box-shadow:
        0 18px 38px rgba(62, 50, 40, 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
    }

    .code-box:focus {
      transform: translateY(-3px);
      box-shadow:
        0 20px 44px rgba(62, 50, 40, 0.14),
        0 0 0 5px rgba(178, 125, 98, 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
    }

    .code-box:disabled {
      cursor: not-allowed;
      opacity: 0.52;
    }

    .code-error {
      animation: shake 0.4s ease-in-out;
    }

    .code-error .code-box {
      border-color: rgba(190, 75, 75, 0.72);
      box-shadow:
        0 16px 40px rgba(158, 56, 56, 0.12),
        0 0 0 4px rgba(190, 75, 75, 0.08);
    }

    .code-loading .code-box {
      pointer-events: none;
      opacity: 0.68;
      transform: translateY(1px);
    }

    @keyframes shake {
      0%,
      100% {
        transform: translateX(0);
      }

      20% {
        transform: translateX(-10px);
      }

      40% {
        transform: translateX(10px);
      }

      60% {
        transform: translateX(-6px);
      }

      80% {
        transform: translateX(6px);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }