.top {
    display: flex;
    gap: 5rem;
}

.bottom {
    display: flex;
    align-items: center;
    gap: 2rem;
}
}

.fx-layer {
    filter: contrast(3);
}

.box {
    --r: 9999px;
    --tr: 25%;
    z-index: 500;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--r);
    border: 1px double rgba(51, 51, 51, 0.08);

    box-shadow:
        inset 2px -2px 1px -1px rgba(255, 255, 255, 0.22),
        inset -2px 2px 1px -1px rgba(255, 255, 255, 0.242),
        inset 6px -6px 1px -6px rgba(255, 255, 255, 0.361),
        inset -6px 6px 1px -6px rgba(255, 255, 255, 0.621),
        inset 0 0 2px rgba(0, 0, 0, 0.55),
        0 4px 8px rgba(43, 43, 43, 0.463);

    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(16px) url(#glass-distortion);
    -webkit-backdrop-filter: blur(16px) url(#glass-distortion);
    cursor: pointer;
    filter: brightness(0.9);

    svg {
        width: 28px;
        filter: drop-shadow(0 25px 3px rgba(102, 102, 102, 0.2));
    }

    span {
        filter:
            drop-shadow(0 25px 3px rgba(102, 102, 102, 0.15));
    }

    &:before {
        content: '';
        position: absolute;
        z-index: 1;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: calc(100% - 16px);
        height: calc(100% - 16px);
        border-radius: var(--r);
        border: 1px solid rgba(0, 0, 0, 0.9);
        filter: blur(8px);
        pointer-events: none;
    }

    &:after {
        z-index: 501;
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: var(--r);
        filter: blur(3px);
        background: linear-gradient(135deg,
                rgba(255, 255, 255, 0.4) 0%,
                transparent 20px,
                transparent calc(100% - 20px),
                rgba(255, 255, 255, 0.1) 100%);
        pointer-events: none;
    }

    .circle-overlay {
        position: absolute;
        width: calc(100% - 9px);
        height: calc(100% - 9px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: var(--r);
        filter: blur(1px);
    }
}

/* 全通用的液态玻璃 UI 类 */
.glass-ui {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(16px) url(#glass-distortion);
    -webkit-backdrop-filter: blur(16px) url(#glass-distortion);
    border: 1px double rgba(255, 255, 255, 0.1);
    box-shadow: 
        inset 0 0 10px rgba(255, 255, 255, 0.05),
        0 4px 15px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
}

.glass-ui:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 
        inset 0 0 15px rgba(255, 255, 255, 0.1),
        0 8px 25px rgba(0, 0, 0, 0.5);
}

/* 按钮专用的液态玻璃类 */
.glass-btn {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(16px) url(#glass-distortion);
    -webkit-backdrop-filter: blur(16px) url(#glass-distortion);
    border: 1px double rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    padding: 0.6rem 1.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.2, 1, 0.2, 1);
    color: #fff;
    cursor: pointer;
    box-shadow: 
        inset 2px -2px 1px -1px rgba(255, 255, 255, 0.2),
        inset -2px 2px 1px -1px rgba(255, 255, 255, 0.2),
        0 4px 10px rgba(0, 0, 0, 0.3);
}

.glass-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 
        inset 4px -4px 1px -1px rgba(255, 255, 255, 0.3),
        inset -4px 4px 1px -1px rgba(255, 255, 255, 0.3),
        0 10px 30px rgba(0, 0, 0, 0.5);
    transform: translateY(-2px);
}

.start-btn {
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;

    span {
        font-size: 33px;
        font-family: 'Inter', 'Noto Sans SC', sans-serif;
        color: #3e3e3e;
    }

    .btn-icon {
        width: 60px;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #3e3e3e;
        border-radius: 50%;
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);

        svg {
            width: 24px;
            fill: #f5f5f5;
        }
    }
}