.metronome-display{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:20px;padding:40px 20px;text-align:center;min-height:400px;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;overflow:hidden}.bpm-display{font-size:5rem;font-weight:700;color:#fff;font-family:'Roboto Mono',monospace;text-shadow:0 4px 20px rgba(0,0,0,.3);margin-bottom:10px}.bpm-label{font-size:1.5rem;color:rgba(255,255,255,.9);font-weight:300;text-transform:uppercase;letter-spacing:2px}.pendulum-container{position:relative;width:200px;height:250px;margin:30px auto}.pendulum-rod{position:absolute;top:20px;left:50%;width:4px;height:180px;background:linear-gradient(to bottom,#fff 0%,#e0e0e0 100%);transform-origin:top center;transform:translateX(-50%);box-shadow:0 2px 10px rgba(0,0,0,.2);transition:transform .05s linear}.pendulum-weight{position:absolute;bottom:0;left:50%;width:60px;height:60px;background:radial-gradient(circle at 30% 30%,#ffd700,#ffa500);border-radius:50%;transform:translateX(-50%);box-shadow:0 4px 15px rgba(0,0,0,.3)}.pendulum-pivot{position:absolute;top:20px;left:50%;width:16px;height:16px;background:#333;border-radius:50%;transform:translateX(-50%);z-index:10;box-shadow:0 2px 5px rgba(0,0,0,.3)}.pendulum-rod.swing-left{transform:translateX(-50%) rotate(-30deg)}.pendulum-rod.swing-right{transform:translateX(-50%) rotate(30deg)}.beat-indicators{display:flex;gap:15px;justify-content:center;margin:20px 0}.beat-indicator{width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.3);transition:all .1s ease;box-shadow:0 2px 5px rgba(0,0,0,.2)}.beat-indicator.active{background:#e74c3c;transform:scale(1.3);box-shadow:0 0 20px rgba(231,76,60,.8)}.beat-indicator.strong{background:#e74c3c}.beat-indicator.weak{background:rgba(255,255,255,.5)}.beat-number{font-size:3rem;font-weight:700;color:#fff;font-family:'Roboto Mono',monospace;text-shadow:0 2px 10px rgba(0,0,0,.3);margin-top:10px}.bpm-controls{display:flex;align-items:center;gap:15px;margin-bottom:20px}.bpm-slider-container{flex:1;position:relative}.bpm-slider{width:100%;height:8px;-webkit-appearance:none;appearance:none;background:linear-gradient(to right,#48bb78,#667eea);border-radius:5px;outline:none}.bpm-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;background:#fff;border:3px solid #667eea;border-radius:50%;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.2);transition:all .2s}.bpm-slider::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 3px 12px rgba(102,126,234,.5)}.bpm-slider::-moz-range-thumb{width:24px;height:24px;background:#fff;border:3px solid #667eea;border-radius:50%;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.2);transition:all .2s}.bpm-slider::-moz-range-thumb:hover{transform:scale(1.2);box-shadow:0 3px 12px rgba(102,126,234,.5)}.bpm-input{width:100px;text-align:center;font-size:1.5rem;font-weight:700}.btn-bpm-adjust{width:45px;height:45px;border-radius:50%;border:2px solid #667eea;background:#fff;color:#667eea;font-size:1.3rem;font-weight:700;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.btn-bpm-adjust:hover{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;transform:scale(1.1)}.metronome-controls{display:flex;gap:15px;justify-content:center;margin:20px 0}.btn-metronome-control{min-width:120px;padding:12px 24px;font-size:1.1rem;border-radius:12px;border:none;cursor:pointer;transition:all .3s;display:flex;align-items:center;gap:8px;justify-content:center;font-weight:600}.btn-start{background:linear-gradient(135deg,#48bb78,#38a169);color:#fff;box-shadow:0 4px 15px rgba(72,187,120,.3)}.btn-start:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(72,187,120,.4)}.btn-pause{background:linear-gradient(135deg,#f59e0b,#f97316);color:#fff;box-shadow:0 4px 15px rgba(245,158,11,.3)}.btn-pause:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(245,158,11,.4)}.btn-stop{background:linear-gradient(135deg,#e74c3c,#c0392b);color:#fff;box-shadow:0 4px 15px rgba(231,76,60,.3)}.btn-stop:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(231,76,60,.4)}.preset-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:15px;margin-top:15px}.btn-preset{padding:15px 20px;background:#fff;border:2px solid #e0e0e0;border-radius:12px;cursor:pointer;transition:all .3s;text-align:center}.btn-preset:hover{border-color:#667eea;background:linear-gradient(135deg,rgba(102,126,234,.1),rgba(118,75,162,.1));transform:translateY(-3px);box-shadow:0 4px 15px rgba(102,126,234,.2)}.preset-name{font-weight:600;color:#333;margin-bottom:5px}.preset-info{font-size:.9rem;color:#666}.btn-tap-tempo{padding:20px 30px;background:linear-gradient(135deg,#4a90e2,#357abd);color:#fff;border:none;border-radius:15px;font-size:1.2rem;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 4px 15px rgba(74,144,226,.3);width:100%}.btn-tap-tempo:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(74,144,226,.4)}.btn-tap-tempo:active{transform:translateY(0);box-shadow:0 2px 10px rgba(74,144,226,.3)}.tap-tempo-hint{text-align:center;color:#666;font-size:.9rem;margin-top:8px}.volume-control{display:flex;align-items:center;gap:15px}.volume-slider{flex:1;height:6px;-webkit-appearance:none;appearance:none;background:#e0e0e0;border-radius:3px;outline:none}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;background:#667eea;border-radius:50%;cursor:pointer}.volume-slider::-moz-range-thumb{width:18px;height:18px;background:#667eea;border-radius:50%;cursor:pointer}.volume-value{font-weight:600;color:#667eea;min-width:45px;text-align:right}@media(max-width:768px){.bpm-display{font-size:3.5rem}.bpm-label{font-size:1.2rem}.pendulum-container{width:150px;height:200px}.pendulum-rod{height:140px}.pendulum-weight{width:45px;height:45px}.beat-number{font-size:2.5rem}.metronome-controls{flex-direction:column}.btn-metronome-control{width:100%}.bpm-controls{flex-direction:column}.bpm-input{width:100%}.preset-grid{grid-template-columns:1fr}}@media(max-width:480px){.metronome-display{min-height:300px;padding:30px 15px}.bpm-display{font-size:2.5rem}.beat-indicator{width:15px;height:15px}}