.section[data-v-d3b3fb66]{background-color:transparent;display:flex;justify-content:center;padding:40px 20px}.container[data-v-d3b3fb66]{max-width:1000px;width:100%}.section-title[data-v-d3b3fb66]{color:var(--text-primary);font-size:1.8rem;font-weight:700;margin-bottom:10px;text-align:center}.subtitle[data-v-d3b3fb66]{margin-bottom:40px;opacity:.7;text-align:center}.bpm-grid[data-v-d3b3fb66]{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}.bpm-card[data-v-d3b3fb66]{background:var(--surface-card,#fff);border:.7px solid #afafaf;border-radius:12px;cursor:pointer;overflow:hidden;padding:20px;position:relative;transition:transform .2s,box-shadow .2s}.bpm-card[data-v-d3b3fb66]:hover{box-shadow:0 10px 20px #0003;transform:translateY(-5px)}.bpm-card:hover .play-icon[data-v-d3b3fb66]{opacity:1;transform:scale(1)}.bpm-card .card-content[data-v-d3b3fb66]{align-items:center;display:flex;flex-direction:column;gap:8px;position:relative;z-index:1}.bpm-card .genre[data-v-d3b3fb66]{color:#000;font-size:1.1rem;font-weight:700}.bpm-card .bpm-range[data-v-d3b3fb66]{font-size:.9rem;opacity:.6}.play-icon[data-v-d3b3fb66]{color:#000;opacity:0;position:absolute;right:10px;top:10px;transform:scale(.8);transition:all .2s ease}.ballad[data-v-d3b3fb66]{border-top:3px solid #8e44ad}.pop[data-v-d3b3fb66]{border-top:3px solid #3498db}.rock[data-v-d3b3fb66]{border-top:3px solid #e74c3c}.edm[data-v-d3b3fb66]{border-top:3px solid #f1c40f}.metal[data-v-d3b3fb66]{border-top:3px solid #2c3e50}