.drum-rack-visualizer{--drum-pad-size: 60px;--drum-pad-gap: 8px;--active-pad-color: #10b981;--empty-pad-color: #d1d5db;--drum-accent-color: #f97316;--drum-hover-scale: 1.05;--transition-speed: .2s}.drum-pad-grid{-webkit-user-select:none;-moz-user-select:none;user-select:none}.drum-pad-grid .grid{padding:1rem;background:linear-gradient(135deg,#f9fafb,#f3f4f6);border-radius:12px;box-shadow:inset 0 2px 4px #0000000d}.drum-pad{position:relative;min-height:var(--drum-pad-size);min-width:var(--drum-pad-size);border-radius:8px;cursor:pointer;transition:all var(--transition-speed) cubic-bezier(.4,0,.2,1);transform-origin:center}.drum-pad:hover{transform:scale(var(--drum-hover-scale));box-shadow:0 4px 12px #00000026;z-index:10}.drum-pad:active{transform:scale(.95);transition-duration:50ms}.drum-pad .active-pad{background:linear-gradient(135deg,var(--active-pad-color),#059669);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3)}.drum-pad .empty-pad{background:var(--empty-pad-color);border:2px dashed #9ca3af;color:#6b7280}.drum-pad.selected{outline:3px solid var(--drum-accent-color);outline-offset:2px;animation:pulse-ring 1.5s ease-in-out infinite}@keyframes pulse-ring{0%{outline-color:var(--drum-accent-color)}50%{outline-color:#f9731680}to{outline-color:var(--drum-accent-color)}}.device-type-indicator{position:absolute;top:4px;right:4px;background:#000000b3;color:#fff;border-radius:50%;width:16px;height:16px;display:flex;align-items:center;justify-content:center;font-size:8px}.device-type-indicator.synthesizer{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}.device-type-indicator.sampler{background:linear-gradient(135deg,#3b82f6,#2563eb)}.device-type-indicator.effect{background:linear-gradient(135deg,#10b981,#059669)}.drum-chain-item{transition:all var(--transition-speed) ease;border-left:4px solid transparent}.drum-chain-item:hover{transform:translate(4px);border-left-color:var(--drum-accent-color);background:#f9fafb}.drum-chain-item .midi-note-badge{background:linear-gradient(135deg,var(--drum-accent-color),#ea580c);color:#fff;font-weight:700;box-shadow:0 2px 4px #f973164d}.device-chain-item{transition:all .15s ease;border:1px solid #e5e7eb}.device-chain-item:hover{border-color:var(--drum-accent-color);transform:translateY(-1px);box-shadow:0 2px 8px #f9731633}.device-chain-item.synthesizer{border-left-color:#8b5cf6}.device-chain-item.sampler{border-left-color:#3b82f6}.device-chain-item.effect{border-left-color:#10b981}.complexity-bar{background:linear-gradient(90deg,#10b981,#f59e0b 60%,#ef4444);border-radius:2px;transition:width 1s cubic-bezier(.4,0,.2,1)}.performance-metric{padding:.5rem;border-radius:8px;background:#fff;border:1px solid #e5e7eb;transition:all var(--transition-speed) ease}.performance-metric:hover{border-color:var(--drum-accent-color);box-shadow:0 2px 8px #f973161a}.performance-metric .metric-value{font-size:1.5rem;font-weight:700;line-height:1}.performance-metric .metric-label{font-size:.75rem;color:#6b7280;text-transform:uppercase;letter-spacing:.025em}.recommendation-item,.warning-item{padding:.75rem;border-radius:8px;margin-bottom:.5rem;border-left:4px solid;animation:fadeInSlide .5s ease-out}@keyframes fadeInSlide{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.recommendation-item{background:#eff6ff;border-left-color:#3b82f6;color:#1e40af}.warning-item{background:#fef3c7;border-left-color:#f59e0b;color:#92400e}.view-mode-switcher{background:#f3f4f6;border-radius:8px;padding:4px;display:flex;gap:4px}.view-mode-button{padding:.5rem .75rem;border-radius:4px;transition:all .15s ease;background:transparent;color:#6b7280;border:none;cursor:pointer}.view-mode-button:hover{color:#111827;background:#ffffff80}.view-mode-button.active{background:#fff;color:#111827;box-shadow:0 1px 3px #0000001a}.drum-statistics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1rem}.statistic-card{text-align:center;padding:1rem;background:#fff;border-radius:8px;border:1px solid #e5e7eb;transition:all var(--transition-speed) ease}.statistic-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.statistic-value{font-size:2rem;font-weight:700;line-height:1;margin-bottom:.25rem}.statistic-label{font-size:.75rem;color:#6b7280;text-transform:uppercase;letter-spacing:.05em}@media (max-width: 640px){.drum-rack-visualizer{--drum-pad-size: 50px;--drum-pad-gap: 6px}.drum-pad-grid .grid{grid-template-columns:repeat(2,1fr)!important;gap:1rem;padding:.75rem}.drum-pad{min-height:70px}.drum-statistics-grid{grid-template-columns:repeat(2,1fr)}.view-mode-switcher{flex-direction:column;gap:.25rem}.view-mode-button{padding:.75rem;text-align:center}}@media (max-width: 480px){.drum-rack-visualizer{--drum-pad-size: 45px}.drum-pad{min-height:60px}.performance-metric .metric-value{font-size:1.25rem}.statistic-value{font-size:1.5rem}}@media (prefers-color-scheme: dark){.drum-rack-visualizer{--empty-pad-color: #374151;--drum-accent-color: #fb923c}.drum-pad-grid .grid{background:linear-gradient(135deg,#1f2937,#111827)}.performance-metric,.statistic-card{background:#1f2937;border-color:#374151;color:#f9fafb}.drum-chain-item:hover,.view-mode-switcher{background:#1f2937}.view-mode-button.active{background:#374151;color:#f9fafb}}.fade-in-scale{animation:fadeInScale .3s cubic-bezier(.4,0,.2,1)}@keyframes fadeInScale{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.slide-up{animation:slideUp .3s cubic-bezier(.4,0,.2,1)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.drum-pad.loading{position:relative;overflow:hidden}.drum-pad.loading:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:loading-shimmer 1.5s infinite}@keyframes loading-shimmer{0%{left:-100%}to{left:100%}}.drum-pad:focus{outline:3px solid #3b82f6;outline-offset:2px}.drum-pad:focus:not(:focus-visible){outline:none}@media (prefers-contrast: high){.drum-pad,.performance-metric,.statistic-card{border:2px solid currentColor}}