:root {
        color-scheme: dark;
      }

      * {
        box-sizing: border-box;
      }

      html {
        -webkit-text-size-adjust: 100%;

        text-size-adjust: 100%;
      }

      body {
        margin: 0;

        background:
          radial-gradient(
            circle at 80% 8%,
            rgba(0, 210, 255, 0.08),
            transparent 24rem
          ),
          #0a0a0a;

        color: #fff;

        font-family: Inter, sans-serif;
      }

      .mobile-menu-active {
        display: flex;
      }

      .page-grid {
        background-image:
          linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
          linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
          );

        background-size: 52px 52px;

        mask-image: linear-gradient(to bottom, black, transparent);
      }

      .profile-shell {
        min-height: 590px;

        content-visibility: auto;

        contain-intrinsic-size: auto 590px;

        overflow: hidden;

        border: 1px solid rgba(255, 255, 255, 0.1);

        border-radius: 2rem;

        background: linear-gradient(
          145deg,
          rgba(255, 255, 255, 0.055),
          rgba(255, 255, 255, 0.018)
        );

        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
      }

      .profile-photo {
        position: relative;

        min-height: 590px;

        overflow: hidden;

        background: #171717;
      }

      .profile-photo img {
        width: 100%;

        height: 100%;

        min-height: 590px;

        object-fit: cover;

        object-position: center top;

        filter: contrast(1.04);
      }

      .profile-photo::after {
        content: "";

        position: absolute;

        inset: 0;

        background: linear-gradient(
          to top,
          rgba(10, 10, 10, 0.7),
          transparent 36%
        );

        pointer-events: none;
      }

      .identity-chip {
        position: absolute;

        z-index: 2;

        left: 1.5rem;

        bottom: 1.5rem;

        display: inline-flex;

        align-items: center;

        gap: 0.65rem;

        padding: 0.75rem 1rem;

        border: 1px solid rgba(255, 255, 255, 0.18);

        border-radius: 999px;

        background: rgba(8, 8, 8, 0.76);

        backdrop-filter: blur(12px);

        font-size: 0.67rem;

        font-weight: 800;

        letter-spacing: 0.16em;

        text-transform: uppercase;
      }

      .identity-chip::before {
        content: "";

        width: 0.45rem;

        height: 0.45rem;

        flex: 0 0 auto;

        border-radius: 999px;

        background: #00d2ff;

        box-shadow: 0 0 16px rgba(0, 210, 255, 0.9);
      }

      .metric {
        min-height: 94px;

        padding: 1rem;

        border: 1px solid rgba(255, 255, 255, 0.08);

        border-radius: 1rem;

        background: rgba(255, 255, 255, 0.025);
      }

      .record-card {
        border: 1px solid rgba(255, 255, 255, 0.08);

        border-radius: 1rem;

        background: #0d0f10;

        padding: 1.15rem;
      }

      .record-results {
        display: grid;

        grid-template-columns: repeat(3, minmax(0, 1fr));

        gap: 0.5rem;

        margin-top: 1rem;
      }

      .record-result {
        padding: 0.75rem 0.4rem;

        border-radius: 0.75rem;

        background: rgba(255, 255, 255, 0.035);

        text-align: center;
      }

      @media (max-width: 1023px) {
        .profile-shell {
          min-height: 0;
        }

        .profile-photo,
        .profile-photo img {
          min-height: 480px;

          height: 480px;
        }

        .profile-content {
          order: 2;
        }

        .profile-photo {
          order: 1;
        }
      }

      @media (max-width: 639px) {
        .profile-shell {
          border-radius: 1.35rem;
        }

        .profile-photo,
        .profile-photo img {
          min-height: 420px;

          height: 420px;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        html {
          scroll-behavior: auto !important;
        }

        *,
        *::before,
        *::after {
          animation-duration: 0.01ms !important;

          animation-iteration-count: 1 !important;

          transition-duration: 0.01ms !important;
        }
      }