@layer base {
      html, body {
        margin: 0;
        padding: 0;
        background-color: #f7f8fc;
        cursor: pointer;
      }
      body {
        overscroll-behavior: none;
      }
    }
    ::-webkit-scrollbar {
      display: none;
    }
    
    /* Architectural sculpture & 3D dynamics */
    .portal-monolith {
      perspective: 1400px;
      transform-style: preserve-3d;
    }
    
    .monolith-inner {
      transition: transform 0.22s cubic-bezier(0.2, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;
      transform: perspective(1200px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--lift-y, 0px));
      box-shadow: 
        0 2px 4px rgba(18, 20, 23, 0.02),
        0 12px 28px -4px rgba(18, 20, 23, 0.04),
        0 30px 60px -12px rgba(18, 20, 23, 0.06),
        0 0 0 1px rgba(18, 20, 23, 0.04);
    }
    
    .portal-monolith:hover .monolith-inner {
      box-shadow: 
        0 1px 2px rgba(18, 20, 23, 0.02),
        0 20px 45px -8px rgba(18, 20, 23, 0.08),
        0 45px 90px -15px rgba(18, 20, 23, 0.1),
        0 0 0 1px rgba(18, 20, 23, 0.09);
    }

    /* Ambient cursor spotlight tracking */
    .light-spotlight {
      background: radial-gradient(
        750px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(255, 255, 255, 0.9) 0%,
        rgba(245, 247, 250, 0.35) 45%,
        transparent 75%
      );
    }

    .sheen-layer {
      background: radial-gradient(
        500px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(0, 0, 0, 0.025) 0%,
        transparent 65%
      );
    }

    .watermark-text {
      user-select: none;
      pointer-events: none;
      letter-spacing: -0.05em;
      line-height: 0.8;
      background: linear-gradient(180deg, rgba(18, 20, 23, 0.038) 0%, rgba(18, 20, 23, 0.008) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }