.bear,.bear-head{left:50%;transform:translateX(-50%)}.bear,.bear-head,.bear-nose,.bear-snout{transform:translateX(-50%)}.drum,.drumstick{transition:transform 50ms}.metronome-container{padding:30px;margin:30px 0}.metronome-layout{display:grid;grid-template-columns:1fr 380px;gap:30px;align-items:start}.sidebar-controls{position:sticky;top:80px;background:#fff;border-radius:12px;padding:25px;box-shadow:0 4px 20px rgba(0,0,0,.15);border:2px solid #e0e0e0;max-height:calc(100vh - 100px);overflow-y:auto}.sidebar-controls::-webkit-scrollbar{width:8px}.sidebar-controls::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.sidebar-controls::-webkit-scrollbar-thumb{background:#337ab7;border-radius:4px}.sidebar-controls::-webkit-scrollbar-thumb:hover{background:#286090}.bear-stage{position:relative;height:280px;margin:2rem auto;display:flex;justify-content:center;align-items:center;max-width:400px}.bear-container{position:relative;width:200px;height:200px}.bear,.bear-ear,.bear-head{position:absolute}.bear{width:120px;height:140px;background:#8b4513;border-radius:60px 60px 50px 50px;top:30px;box-shadow:inset 0 -10px 20px rgba(0,0,0,.2)}.bear-head{width:100px;height:90px;background:sienna;border-radius:50%;top:-20px;box-shadow:inset 0 5px 15px rgba(0,0,0,.1)}.bear-ear{width:35px;height:35px;background:#8b4513;border-radius:50%;top:-5px;box-shadow:inset 0 3px 8px rgba(0,0,0,.2)}.bear-ear::after,.bear-snout{position:absolute;background:#deb887}.bear-ear.left{left:5px}.bear-ear.right{right:5px}.bear-ear::after{content:'';width:20px;height:20px;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}.bear-snout{width:50px;height:35px;border-radius:50%;bottom:15px;left:50%}.bear-eye,.bear-nose{background:#000;position:absolute;border-radius:50%}.bear-nose{width:20px;height:15px;top:5px;left:50%}.bear-eye{width:15px;height:18px;top:35px}.bear-eye.left{left:22px}.bear-eye.right{right:22px}.bear.playing .bear-eye{height:8px;top:40px;border-radius:0 0 15px 15px}.bear-arm{position:absolute;width:35px;height:80px;background:sienna;border-radius:20px;top:50px;transform-origin:top center;box-shadow:inset 0 -5px 10px rgba(0,0,0,.1)}.bear-arm.left{left:-15px;transform:rotate(-20deg)}.bear-arm.right{right:-15px;transform:rotate(20deg)}.drumstick{position:absolute;width:6px;height:60px;background:linear-gradient(to bottom,#8b4513 0,#8b4513 80%,#d9534f 80%,#d9534f 100%);border-radius:3px;bottom:-50px;left:50%;transform:translateX(-50%) rotate(-15deg)}.drum::before,.drums{position:absolute;left:50%;transform:translateX(-50%)}.bear-arm.left .drumstick{left:40%}.bear-arm.right .drumstick{left:60%}@keyframes drumHitLeft{0%,100%{transform:rotate(-20deg)}50%{transform:rotate(-50deg)}}@keyframes drumHitRight{0%,100%{transform:rotate(20deg)}50%{transform:rotate(50deg)}}.bear-arm.left.hit{animation:.2s drumHitLeft}.bear-arm.right.hit{animation:.2s drumHitRight}.drums{bottom:20px;display:flex;gap:40px}.drum{position:relative;width:60px;height:40px;background:linear-gradient(135deg,#d9534f 0,#c9302c 100%);border-radius:30px 30px 5px 5px;box-shadow:0 5px 15px rgba(0,0,0,.3)}.drum::before,.metronome-btn{box-shadow:0 2px 5px rgba(0,0,0,.2)}.drum::before{content:'';top:-5px;width:50px;height:10px;background:#fff;border-radius:50%}.drum.hit{transform:scale(.95)}.controls{margin-top:30px}.bpm-display,.control-group{margin:20px 0}.bpm-display{font-size:4rem;font-weight:700;color:#337ab7;text-align:center}.control-label{font-weight:600;color:#333;margin-bottom:10px;display:block}input[type=range]{width:100%;height:8px;border-radius:5px;background:#ddd;outline:0;-webkit-appearance:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:#337ab7;cursor:pointer;box-shadow:0 2px 5px rgba(0,0,0,.3);transition:transform .2s}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);background:#286090}input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#337ab7;cursor:pointer;border:none;box-shadow:0 2px 5px rgba(0,0,0,.3)}.metronome-buttons{display:flex;gap:10px;justify-content:center;margin-top:30px;flex-wrap:wrap}.metronome-btn{padding:12px 30px;font-size:16px;font-weight:600;border:none;border-radius:4px;cursor:pointer;transition:.3s}.metronome-btn-start{background:#5cb85c;color:#fff}.metronome-btn-start:hover{background:#449d44}.metronome-btn-stop{background:#d9534f;color:#fff;display:none}.metronome-btn-stop:hover{background:#c9302c}.metronome-btn-reset,.timer-preset.active,.timer-preset:hover{background:#337ab7;color:#fff}.metronome-btn-reset:hover{background:#286090}.beat-indicator{display:flex;justify-content:center;gap:12px;margin:20px 0}.beat-dot{width:18px;height:18px;border-radius:50%;background:#ddd;transition:.1s;border:2px solid #ccc}.tap-tempo-btn,.timer-preset{transition:.2s;cursor:pointer}.beat-dot.active{background:#5cb85c;transform:scale(1.4);box-shadow:0 0 15px rgba(92,184,92,.8);border-color:#5cb85c}.metronome-info{padding:20px;border-radius:8px;margin-top:30px}.metronome-info h3{color:#337ab7;margin-top:0}.advanced-features{background:0 0;border:none;border-radius:0;padding:0;margin:0}.sidebar-title{font-size:1.3em;font-weight:700;color:#337ab7;margin-bottom:20px;padding-bottom:15px;border-bottom:3px solid #337ab7}.feature-section{margin-bottom:25px;padding-bottom:25px;border-bottom:1px solid #e0e0e0}.feature-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.feature-title{font-weight:700;color:#337ab7;margin-bottom:15px;font-size:1em;display:flex;align-items:center;gap:8px}.volume-control{display:flex;align-items:center;gap:15px}.volume-icon{font-size:1.5em;color:#337ab7;min-width:30px;text-align:center}.volume-slider{flex:1}.volume-value{min-width:45px;text-align:right;font-weight:600;color:#337ab7;font-size:.95em}.stat-box,.tap-info,.timer-display,.trainer-status{text-align:center}.tap-tempo-btn{width:100%;padding:20px;font-size:1.2em;font-weight:700;background:linear-gradient(135deg,#5cb85c 0,#4cae4c 100%);color:#fff;border:none;border-radius:8px;box-shadow:0 4px 8px rgba(0,0,0,.2)}.tap-tempo-btn:hover{background:linear-gradient(135deg,#4cae4c 0,#449d44 100%);transform:translateY(-2px);box-shadow:0 6px 12px rgba(0,0,0,.3)}.tap-tempo-btn:active{transform:translateY(0);box-shadow:0 2px 4px rgba(0,0,0,.2)}.tap-tempo-btn.tapping{animation:.3s tapPulse}@keyframes tapPulse{0%,100%{transform:scale(1)}50%{transform:scale(.95);background:#449d44}}.tap-info{margin-top:10px;color:#666;font-size:.9em}.trainer-controls{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:10px}.trainer-input-group{display:flex;flex-direction:column}.trainer-input-group label{font-size:.9em;color:#666;margin-bottom:5px}.trainer-input-group input,.trainer-input-group select{padding:8px;border:1px solid #ddd;border-radius:4px;font-size:1em}.trainer-status{background:#fff3cd;border:1px solid #ffc107;border-radius:4px;padding:10px;margin-top:10px;font-weight:600;color:#856404;display:none}.feature-content,.feature-content.active,.trainer-status.active{display:block}.timer-display{font-size:2.5em;font-weight:700;color:#337ab7;margin:15px 0;font-family:'Courier New',monospace}.timer-controls{display:flex;gap:10px;margin-top:10px}.timer-preset{flex:1;padding:10px;background:#fff;border:2px solid #337ab7;border-radius:4px;color:#337ab7;font-weight:600}.progress-bar-container{width:100%;height:20px;background:#e0e0e0;border-radius:10px;overflow:hidden;margin-top:10px}.progress-bar-fill{height:100%;background:linear-gradient(90deg,#5cb85c 0,#4cae4c 100%);width:0%;transition:width .3s}.timer-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px}.stat-box{background:#fff;padding:10px;border-radius:4px;border:1px solid #ddd}.stat-label{font-size:.8em;color:#666;margin-bottom:5px}.stat-value{font-size:1.5em;font-weight:700;color:#337ab7}.celebration-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.8);display:none;justify-content:center;align-items:center;z-index:9999;animation:.3s fadeIn}.celebration-overlay.active{display:flex}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.celebration-content{background:#fff;padding:50px;border-radius:20px;text-align:center;max-width:500px;box-shadow:0 20px 60px rgba(0,0,0,.5);animation:.5s bounceIn;position:relative}@keyframes bounceIn{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.05)}70%{transform:scale(.9)}100%{transform:scale(1);opacity:1}}.celebration-icon{font-size:5em;margin-bottom:20px;animation:1s infinite celebrate}@keyframes celebrate{0%,100%,50%{transform:rotate(-10deg) scale(1)}25%,75%{transform:rotate(10deg) scale(1.1)}}.celebration-title{font-size:2.5em;font-weight:700;color:#5cb85c;margin-bottom:15px;text-shadow:2px 2px 4px rgba(0,0,0,.1)}.celebration-message{font-size:1.3em;color:#666;margin-bottom:30px}.celebration-btn{padding:15px 40px;font-size:1.2em;font-weight:600;background:linear-gradient(135deg,#5cb85c 0,#4cae4c 100%);color:#fff;border:none;border-radius:50px;cursor:pointer;box-shadow:0 4px 15px rgba(92,184,92,.4);transition:.3s}.celebration-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(92,184,92,.6)}.confetti{width:10px;height:10px;background:#f0f;position:absolute;animation:3s linear confettiFall}@keyframes confettiFall{to{transform:translateY(100vh) rotate(360deg);opacity:0}}.confetti:first-child{left:10%;background:#ff6b6b;animation-delay:0s}.confetti:nth-child(2){left:20%;background:#ffd93d;animation-delay:.1s}.confetti:nth-child(3){left:30%;background:#6bcf7f;animation-delay:.2s}.confetti:nth-child(4){left:40%;background:#4d96ff;animation-delay:.3s}.confetti:nth-child(5){left:50%;background:#ee5a6f;animation-delay:.4s}.confetti:nth-child(6){left:60%;background:#ffd93d;animation-delay:.5s}.confetti:nth-child(7){left:70%;background:#6bcf7f;animation-delay:.6s}.confetti:nth-child(8){left:80%;background:#4d96ff;animation-delay:.7s}.confetti:nth-child(9){left:90%;background:#ff6b6b;animation-delay:.8s}.bear.celebrating{animation:.5s infinite bearJump}@keyframes bearJump{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-20px)}}.feature-toggle{display:none}@media (max-width:992px){.metronome-layout{grid-template-columns:1fr}.sidebar-controls{position:static;max-height:none;margin-top:30px}}@media (max-width:768px){.bpm-display{font-size:3rem}.metronome-btn{padding:10px 20px;font-size:14px}.bear-stage{height:240px}.trainer-controls{grid-template-columns:1fr}.timer-display{font-size:2em}.sidebar-controls{padding:20px}}