.gk-popup-panel {
    position: absolute;
    inset: 0; 
    z-index: 1;
    pointer-events: none;

    visibility: hidden;

    opacity: 1;

    transform: translateY(100px);
    transition: transform 620ms var(--gk-dock-ease), visibility 0s linear 620ms;
    will-change: transform;
}

.gk-popup-panel[data-state="open"] {
    pointer-events: auto;
    visibility: visible;

    transform: translateY(0);
    transition: transform 620ms var(--gk-dock-ease), visibility 0s linear 0s;
}

.gk-popup-panel__content {
    height: 100%;
    overflow: hidden;

    background: var(--gk-popup-bg);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    padding-top: var(--gk-popup-h);
    box-sizing: border-box;
}

.gk-popup-panel__inner {
    height: 100%;
    
    opacity: 1;
    transition: opacity 600ms ease;
    will-change: opacity;
}
.gk-popup-panel__inner.is-fading-out {
     opacity: 0;
}

.gk-popup-panel__pad {
    height: 100%;
    overflow: auto;

    padding: 18px clamp(16px, 4vw, 40px);
    box-sizing: border-box;

    scrollbar-width: auto;
    scrollbar-color: rgba(255,255,255,0.35) rgba(255,255,255,0);
}

.gk-popup-panel__pad::-webkit-scrollbar {
  width: 15px;
  height: 10px;
}
.gk-popup-panel__pad::-webkit-scrollbar-track {
  background: rgba(255,255,255,0);
  border-radius: 999px;
}
.gk-popup-panel__pad::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.5);
  border-radius: 999px;
  border: 2px solid rgba(10,12,18,0.55);
}
.gk-popup-panel__pad::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.75);
}
.gk-popup-panel__pad::-webkit-scrollbar-thumb:active {
  background: rgba(255,255,255,0.85);
}