.ai3d-preview-stage-viewport--single {
    position: relative;
}

.ai3d-material-dock {
    position: absolute;
    left: 50%;
    bottom: clamp(18px, 2.6vh, 32px);
    z-index: 30;
    width: min(544px, 58%);
    min-width: 272px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(7px, 0.8vw, 11px);
    padding: clamp(7px, 0.7vw, 10px);
    border: 1px solid rgba(120, 150, 205, 0.38);
    border-radius: 15px;
    background: linear-gradient(180deg, rgba(14, 28, 56, 0.78), rgba(8, 17, 35, 0.82));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 18px 34px rgba(0, 0, 0, 0.28);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    transform: translateX(-50%);
    pointer-events: auto;
}

.ai3d-material-dock-title {
    flex: 0 0 auto;
    color: #f3f7ff;
    font-size: clamp(14px, 1vw, 18px);
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.58);
}

.ai3d-material-dock-title span {
    display: inline-grid;
    place-items: center;
    width: 13px;
    height: 13px;
    margin-left: 4px;
    border-radius: 50%;
    background: rgba(146, 162, 197, 0.42);
    color: #d7e3ff;
    font-size: 9px;
    font-weight: 800;
}

.ai3d-material-dock-arrow {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(103, 126, 171, 0.46);
    border-radius: 50%;
    background: rgba(8, 16, 33, 0.68);
    color: #dce8ff;
    font-size: 22px;
    line-height: 1;
    pointer-events: auto;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.ai3d-material-spheres {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(28px, 1fr));
    align-items: center;
    gap: clamp(7px, 0.75vw, 11px);
    padding: 4px 8px;
    border: 1px solid rgba(93, 117, 166, 0.36);
    border-radius: 11px;
    background: rgba(8, 16, 33, 0.5);
    pointer-events: auto;
    touch-action: none;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.ai3d-material-spheres.is-reordering {
    border-color: rgba(94, 154, 255, 0.72);
    background: rgba(12, 28, 62, 0.72);
    box-shadow: inset 0 0 0 1px rgba(84, 143, 255, 0.18), 0 0 18px rgba(45, 130, 255, 0.16);
}

.ai3d-material-sphere {
    position: relative;
    justify-self: center;
    width: clamp(30px, 2.5vw, 42px);
    aspect-ratio: 1;
    padding: 0;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 50%;
    appearance: none;
    pointer-events: auto;
    -webkit-user-drag: element;
    touch-action: none;
    cursor: grab;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.ai3d-material-sphere:active {
    cursor: grabbing;
}

.ai3d-material-sphere.is-dragging {
    opacity: 0.58;
    transform: scale(1.08);
    box-shadow:
        0 0 0 2px rgba(91, 151, 255, 0.88),
        0 10px 18px rgba(0, 0, 0, 0.35);
}

.ai3d-material-sphere::before,
.ai3d-material-sphere::after {
    content: "";
    position: absolute;
    border-radius: inherit;
    pointer-events: none;
}

.ai3d-material-sphere::before {
    inset: 7%;
    z-index: 2;
    background:
        radial-gradient(ellipse at 28% 19%, rgba(255, 255, 255, 0.62) 0 7%, rgba(255, 255, 255, 0.2) 10%, transparent 19%),
        linear-gradient(142deg, rgba(255, 255, 255, 0.18) 0 10%, transparent 12% 44%, rgba(255, 255, 255, 0.06) 45% 54%, transparent 55%),
        radial-gradient(ellipse at 76% 78%, rgba(0, 0, 0, 0.5), transparent 44%);
    mix-blend-mode: screen;
    opacity: 0.68;
}

.ai3d-material-sphere::after {
    inset: 0;
    z-index: 3;
    background:
        radial-gradient(circle at 68% 72%, rgba(0, 0, 0, 0.48), transparent 42%),
        radial-gradient(circle at 34% 30%, transparent 0 44%, rgba(0, 0, 0, 0.36) 68%, rgba(0, 0, 0, 0.72) 100%);
    box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.18);
    opacity: 0.72;
}

.ai3d-material-sphere[data-ai3d-material-variant="default"] {
    background:
        radial-gradient(circle at 25% 22%, rgba(255, 255, 255, 0.68) 0 6%, transparent 11%),
        radial-gradient(circle at 40% 36%, #c9d1dc 0 13%, transparent 32%),
        conic-gradient(from 218deg at 48% 52%, #0e1420, #aeb8c6, #687383, #d2d9e2, #202a37, #090d13, #8792a0, #0e1420),
        radial-gradient(circle at 48% 50%, #aeb8c5 0 34%, #4c5562 58%, #05070a 100%);
    filter: saturate(0.92) contrast(0.98);
}

.ai3d-material-sphere[data-ai3d-material-variant="white"] {
    background:
        radial-gradient(circle at 25% 22%, rgba(255, 255, 255, 0.7) 0 6%, transparent 11%),
        radial-gradient(circle at 42% 36%, #d3d6d0 0 18%, transparent 38%),
        linear-gradient(128deg, rgba(143, 157, 178, 0.22), transparent 42%, rgba(68, 80, 100, 0.3)),
        radial-gradient(circle at 48% 50%, #c5c8c2 0 35%, #a1a9b2 62%, #515a66 100%);
}

.ai3d-material-sphere[data-ai3d-material-variant="stone"] {
    background:
        radial-gradient(circle at 28% 22%, rgba(224, 204, 162, 0.62) 0 6%, transparent 11%),
        repeating-radial-gradient(circle at 36% 42%, rgba(255, 255, 255, 0.08) 0 1px, transparent 2px 4px),
        radial-gradient(circle at 34% 34%, #806847 0 18%, transparent 32%),
        radial-gradient(circle at 64% 60%, #aa976e 0 9%, transparent 26%),
        conic-gradient(from 34deg at 50% 50%, #33281e, #745b3d, #261f18, #a48d62, #443525, #17130f, #33281e);
    filter: saturate(0.82) contrast(1.02);
}

.ai3d-material-sphere[data-ai3d-material-variant="blue"] {
    background:
        radial-gradient(circle at 25% 20%, rgba(255, 255, 255, 0.62) 0 6%, transparent 11%),
        radial-gradient(circle at 36% 68%, #42a9b9 0 18%, transparent 32%),
        radial-gradient(circle at 70% 38%, #5148a0 0 19%, transparent 37%),
        conic-gradient(from 208deg at 50% 52%, #071026, #1d829b, #4c4396, #1b9c91, #142b68, #0b1020, #071026);
    filter: saturate(0.92) contrast(1.02);
}

.ai3d-material-sphere[data-ai3d-material-variant="black"] {
    background:
        radial-gradient(circle at 26% 22%, rgba(255, 255, 255, 0.86) 0 6%, transparent 10%),
        linear-gradient(134deg, rgba(255, 255, 255, 0.18) 0 13%, transparent 14% 45%, rgba(255, 255, 255, 0.08) 46% 54%, transparent 55%),
        radial-gradient(circle at 46% 44%, #2d3036 0 24%, #080a0d 56%, #000000 100%);
    border-color: rgba(255, 255, 255, 0.18);
    filter: contrast(1.22);
}

.ai3d-material-sphere[data-ai3d-material-variant="zbrush"] {
    background:
        radial-gradient(ellipse at 28% 20%, rgba(255, 244, 229, 0.92) 0 8%, rgba(255, 233, 207, 0.34) 10%, transparent 22%),
        radial-gradient(ellipse at 38% 32%, #d1cbc1 0 18%, transparent 40%),
        radial-gradient(circle at 56% 52%, #a29c93 0 36%, #5b5752 63%, #151515 100%),
        linear-gradient(145deg, #d9d0c2 0%, #89847d 43%, #332f2b 100%);
    border-color: rgba(238, 222, 202, 0.34);
    filter: saturate(0.86) contrast(1.12);
}

.ai3d-material-sphere.is-active {
    box-shadow:
        0 0 0 2px #2d82ff,
        0 0 10px rgba(51, 123, 255, 0.36),
        0 2px 4px rgba(255, 255, 255, 0.1) inset,
        -9px -10px 16px rgba(0, 0, 0, 0.52) inset,
        6px 7px 13px rgba(255, 255, 255, 0.04) inset,
        0 5px 10px rgba(0, 0, 0, 0.34);
}

.ai3d-material-sphere:hover,
.ai3d-material-dock-arrow:hover {
    transform: translateY(-1px);
}

.ai3d-material-dock-arrow:hover {
    border-color: rgba(65, 133, 255, 0.94);
    background: rgba(24, 58, 140, 0.66);
    box-shadow: 0 0 16px rgba(57, 116, 255, 0.25);
}

.ai3d-material-sphere:focus-visible,
.ai3d-material-dock-arrow:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(125, 173, 255, 0.34), 0 0 16px rgba(57, 116, 255, 0.22);
}

@media screen and (max-width: 640px) {
    .ai3d-material-dock {
        bottom: 10px;
        width: min(456px, calc(100% - 18px));
        min-width: 0;
        gap: 5px;
        padding: 7px;
        border-radius: 13px;
    }

    .ai3d-material-dock-title {
        font-size: 13px;
    }

    .ai3d-material-dock-arrow {
        display: none;
    }

    .ai3d-material-spheres {
        grid-template-columns: repeat(6, minmax(22px, 1fr));
        gap: 5px;
        padding: 3px 5px;
    }

    .ai3d-material-sphere {
        width: clamp(24px, 8vw, 34px);
    }
}