.modern-metronome{max-width:600px;margin:0 auto;padding:2rem;background:linear-gradient(135deg,#017f8d,#015e6a);border-radius:24px;box-shadow:0 20px 60px #00000026;color:#fff}@media(max-width:640px){.modern-metronome{padding-top:calc(2rem + 52px)}}.modern-metronome:fullscreen{width:100vw;height:100vh;max-width:none;margin:0;border-radius:0;box-shadow:none;padding:max(1.25rem,env(safe-area-inset-top)) max(1.25rem,env(safe-area-inset-right)) max(1.25rem,env(safe-area-inset-bottom)) max(1.25rem,env(safe-area-inset-left))}.fullscreen-toggle{position:absolute;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));width:48px;height:48px;border-radius:12px;border:1px solid rgba(255,255,255,.35);background:#ffffff24;color:#fff;cursor:pointer;z-index:10;touch-action:manipulation;display:inline-flex;align-items:center;justify-content:center;transition:transform .2s,background .2s,border-color .2s}.fullscreen-toggle:hover{transform:translateY(-1px);background:#ffffff2e;border-color:#ffffff8c}.fullscreen-toggle:active{transform:translateY(0)}.fullscreen-toggle svg{width:20px;height:20px}.metronome-header{text-align:center;margin-bottom:2rem}.metronome-title{font-size:2rem;font-weight:700;margin:0;text-shadow:0 2px 4px rgba(0,0,0,.2)}.metronome-loading{text-align:center;padding:3rem 0}.loading-spinner{width:50px;height:50px;border:4px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 1rem}@keyframes spin{to{transform:rotate(360deg)}}.beat-display{display:flex;justify-content:center;gap:1rem;margin-bottom:2rem;padding:1.5rem;background:#ffffff1a;border-radius:16px;backdrop-filter:blur(10px)}.beat-indicator{width:60px;height:60px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;background:#fff3;border-radius:12px;transition:all .15s cubic-bezier(.4,0,.2,1);border:2px solid transparent}.beat-indicator.accent{background:#ffffff40}.beat-indicator.active{background:#fffffff2;color:#017f8d;transform:scale(1.15);box-shadow:0 8px 24px #fff6;border-color:#fff}.bpm-control-section{margin-bottom:2rem}.bpm-display{display:flex;align-items:center;justify-content:center;gap:1.5rem;margin-bottom:1.5rem}.bpm-button{width:50px;height:50px;border-radius:50%;border:2px solid rgba(255,255,255,.5);background:#fff3;color:#fff;font-size:2rem;font-weight:300;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;line-height:1}.bpm-button:hover:not(:disabled){background:#ffffff4d;transform:scale(1.05)}.bpm-button:active:not(:disabled){transform:scale(.95)}.bpm-button:disabled{opacity:.4;cursor:not-allowed}.bpm-value{display:flex;flex-direction:column;align-items:center;min-width:120px}.bpm-number{font-size:3.5rem;font-weight:700;line-height:1;text-shadow:0 2px 8px rgba(0,0,0,.2)}.bpm-label{font-size:.875rem;font-weight:600;letter-spacing:.1em;opacity:.9;margin-top:.25rem}.bpm-slider{width:100%;height:8px;border-radius:4px;background:#fff3;outline:none;margin-bottom:1rem;-webkit-appearance:none;-moz-appearance:none;appearance:none}.bpm-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 2px 8px #0003;-webkit-transition:transform .2s;transition:transform .2s}.bpm-slider::-webkit-slider-thumb:hover{transform:scale(1.1)}.bpm-slider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;cursor:pointer;border:none;box-shadow:0 2px 8px #0003;-moz-transition:transform .2s;transition:transform .2s}.bpm-slider::-moz-range-thumb:hover{transform:scale(1.1)}.tap-tempo-button{width:100%;padding:1rem;background:#ffffff40;border:2px solid rgba(255,255,255,.5);border-radius:12px;color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;text-transform:uppercase;letter-spacing:.05em}.tap-tempo-button:hover:not(:disabled){background:#ffffff59;transform:translateY(-2px);box-shadow:0 4px 12px #0003}.tap-tempo-button:active:not(:disabled){transform:translateY(0)}.tap-tempo-button:disabled{opacity:.5;cursor:not-allowed}.controls-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-bottom:1.5rem}@media(min-width:640px){.controls-grid{grid-template-columns:repeat(2,1fr)}}.control-group{display:flex;flex-direction:column;gap:.5rem}.control-label{font-size:.875rem;font-weight:600;opacity:.9;text-transform:uppercase;letter-spacing:.05em}.control-select{padding:.75rem;background:#fff3;border:2px solid rgba(255,255,255,.3);border-radius:8px;color:#fff;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s;backdrop-filter:blur(10px)}.control-select:hover:not(:disabled){background:#ffffff40;border-color:#ffffff80}.control-select:focus{outline:none;border-color:#fff;box-shadow:0 0 0 3px #fff3}.control-select option{background:#017f8d;color:#fff}.volume-slider{width:100%;height:6px;border-radius:3px;background:#fff3;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 2px 6px #0003}.volume-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;cursor:pointer;border:none;box-shadow:0 2px 6px #0003}.accent-control{margin-bottom:1.5rem;padding:1rem;background:#ffffff1a;border-radius:12px}.checkbox-label{display:flex;align-items:center;gap:.75rem;cursor:pointer;font-weight:500;-webkit-user-select:none;-moz-user-select:none;user-select:none}.checkbox-label input[type=checkbox]{width:20px;height:20px;cursor:pointer;accent-color:white}.checkbox-label span{font-size:1rem}.play-button{width:100%;padding:1.5rem;background:#fff;color:#017f8d;border:none;border-radius:16px;font-size:1.25rem;font-weight:700;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;gap:.75rem;box-shadow:0 8px 24px #00000026;text-transform:uppercase;letter-spacing:.05em}.play-button:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 12px 32px #0000004d}.play-button:active:not(:disabled){transform:translateY(-1px)}.play-button.playing{background:linear-gradient(135deg,#ff6b6b,#ee5a6f);color:#fff}.play-button:disabled{opacity:.6;cursor:not-allowed}.button-icon{font-size:1.5rem;line-height:1}@media(max-width:640px){.modern-metronome{padding:1.5rem}.beat-indicator{width:50px;height:50px;font-size:1.25rem}.bpm-number{font-size:2.5rem}.controls-grid{grid-template-columns:1fr}.metronome-title{font-size:1.5rem}}