/* 3D Drum block — extracted from ai-conference.css, scoped under .pb-drum */
.pb-drum .ac-drum-layout { display: flex; align-items: center; gap: 50px; margin-top: 4px; padding: 0 10px; }
.pb-drum .ac-drum-scene {
    flex: 1; min-width: 0; max-width: 900px;
    height: 310px; perspective: 1200px;
    display: flex; align-items: center; justify-content: center;
    position: relative; background: #ffffff;
    border-radius: 20px; padding: 14px 16px;
}
.pb-drum .ac-drum {
    width: 260px; height: 280px; position: relative;
    transform-style: preserve-3d;
    transition: transform 1.4s cubic-bezier(.25,.1,.25,1);
}
.pb-drum .ac-drum-face {
    position: absolute; width: 260px; height: 280px;
    backface-visibility: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 24px; text-align: center; border-radius: 16px;
    background: linear-gradient(135deg, #6b50b0 0%, #4f3d96 100%);
    border: 1px solid rgba(102,126,234,.35);
    box-shadow: 0 0 25px rgba(102,126,234,.2), inset 0 0 20px rgba(102,126,234,.05);
}
.pb-drum .ac-drum-face .face-icon { width: 52px; height: 52px; border-radius: 14px; background: rgba(102,126,234,.25); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: #c4b5fd; margin-bottom: 14px; }
.pb-drum .ac-drum-face .face-title { font-size: 1.25rem; font-weight: 700; color: #fff; margin-bottom: 8px; }
.pb-drum .ac-drum-face .face-tag { font-size: 0.78rem; font-weight: 600; background: rgba(102,126,234,.3); color: #c4b5fd; padding: 3px 10px; border-radius: 20px; margin-bottom: 10px; }
.pb-drum .ac-drum-face .face-desc { font-size: 0.95rem; line-height: 1.45; color: rgba(255,255,255,.7); }

.pb-drum .ac-drum-nav { display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; width: 170px; }
.pb-drum .ac-drum-nav button { border: 1px solid rgba(102,126,234,.3); background: #fff; color: #444; padding: 7px 12px; border-radius: 8px; cursor: pointer; font-size: 0.72rem; font-weight: 600; transition: all .25s ease; font-family: inherit; text-align: left; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.pb-drum .ac-drum-nav button:hover, .pb-drum .ac-drum-nav button.active { background: rgba(102,126,234,.5); color: #fff; border-color: rgba(102,126,234,.6); }
.pb-drum .ac-drum-nav button.active { transform: scale(1.06); }
    .pb-drum .ac-drum-layout { flex-direction: column-reverse; gap: 14px; }
    .pb-drum .ac-drum-nav { width: 100%; flex-direction: row; flex-wrap: wrap; justify-content: center; }
    .pb-drum .ac-drum-nav button { flex: 0 1 auto; padding: 5px 9px; font-size: 0.62rem; }
    .pb-drum .ac-drum-scene { width: 100%; max-width: 100%; height: 280px; }

@media(max-width:600px){
    .pb-drum .ac-drum-scene { height: 310px; perspective: 900px; padding: 20px 10px; }
    .pb-drum .ac-drum, .pb-drum .ac-drum-face { width: 190px; height: 230px; }
    .pb-drum .ac-drum-face .face-title { font-size: .9rem; }
    .pb-drum .ac-drum-face .face-desc { font-size: .68rem; }
    .pb-drum .ac-drum-face .face-icon { width: 40px; height: 40px; font-size: 1.1rem; }
    .pb-drum .ac-drum-nav button { padding: 5px 9px; font-size: .65rem; }
}