*{margin:0;padding:0;box-sizing:border-box;touch-action:manipulation}html,body{width:100%;height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{background-color:#667eea;background:linear-gradient(135deg,#667eea,#764ba2);background-attachment:fixed;touch-action:manipulation}#app{width:100%;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem}button{background:none;border:none;cursor:pointer;font-family:inherit;transition:opacity .2s ease,transform .2s ease}button:focus-visible{outline:2px solid #6366f1;outline-offset:2px}button:disabled{opacity:.5;cursor:not-allowed}input{font-family:inherit}input:focus-visible{outline:2px solid #6366f1;outline-offset:2px}select{font-family:inherit}select:focus-visible{outline:2px solid #6366f1;outline-offset:2px}.visualizer-container{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2rem;padding:3rem;background:#ffffff1a;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2)}@supports not (backdrop-filter: blur(10px)){.visualizer-container{background:#fff3}}.visualizer-container:hover{background:#ffffff26}.visualizer-container{border-radius:1rem;min-height:300px}.beat-indicator{width:150px;height:150px;border-radius:50%;background:#ffffff1a;border:3px solid rgba(255,255,255,.2);transition:all .15s ease}.beat-indicator.pulse{animation:pulse .3s ease-out;will-change:transform}.beat-indicator.accent{background:linear-gradient(135deg,#6366f1,#ec4899);border-color:#ec4899}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.2);box-shadow:0 0 30px #ec489999}to{transform:scale(1)}}.beat-counter{font-size:2rem;font-weight:700;color:#fff}@media(max-width:640px){.visualizer-container{min-height:200px;padding:2rem}.beat-indicator{width:120px;height:120px}.beat-counter{font-size:1.5rem}}.controls-container{display:flex;flex-direction:column;gap:1.5rem;padding:2rem;background:#ffffff1a;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2)}@supports not (backdrop-filter: blur(10px)){.controls-container{background:#fff3}}.controls-container:hover{background:#ffffff26}.controls-container{border-radius:1rem}.bpm-display{font-size:3rem;font-weight:700;text-align:center;margin-bottom:1rem;transition:transform .1s ease,opacity .1s ease}.bpm-controls{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}.bpm-decrease,.bpm-increase{background:#ffffff1a;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2)}@supports not (backdrop-filter: blur(10px)){.bpm-decrease,.bpm-increase{background:#fff3}}.bpm-decrease:hover,.bpm-increase:hover{background:#ffffff26}.bpm-decrease,.bpm-increase{border-radius:.5rem;padding:1rem 1.5rem;color:#fff;font-size:1.25rem;font-weight:700;min-width:2.5rem;transition:all .1s ease}.bpm-decrease:active,.bpm-decrease.active,.bpm-increase:active,.bpm-increase.active{transform:scale(.95);background-color:#00000026;box-shadow:inset 0 2px 4px #0003}.bpm-decrease:focus-visible,.bpm-increase:focus-visible{outline:2px solid #6366f1;outline-offset:2px}.bpm-decrease:disabled,.bpm-increase:disabled{opacity:.5;cursor:not-allowed}.bpm-slider{flex:1;height:.5rem;border-radius:9999px;background:#ffffff1a;outline:none;-webkit-appearance:none}.bpm-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:1.5rem;height:1.5rem;border-radius:50%;background:#6366f1;cursor:pointer;box-shadow:0 4px 6px -1px #0000001a}.bpm-slider::-webkit-slider-thumb:hover{background:#4f46e5}.bpm-slider::-moz-range-thumb{width:1.5rem;height:1.5rem;border-radius:50%;background:#6366f1;cursor:pointer;border:none;box-shadow:0 4px 6px -1px #0000001a}.bpm-slider::-moz-range-thumb:hover{background:#4f46e5}.bpm-input{background:#ffffff1a;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2)}@supports not (backdrop-filter: blur(10px)){.bpm-input{background:#fff3}}.bpm-input:hover{background:#ffffff26}.bpm-input{border-radius:.5rem;padding:1rem;color:#fff;font-size:1.25rem;text-align:center;width:100%;max-width:8rem;margin:0 auto}.bpm-input::-webkit-inner-spin-button,.bpm-input::-webkit-outer-spin-button{opacity:1}.play-btn{background:#ffffff1a;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2)}@supports not (backdrop-filter: blur(10px)){.play-btn{background:#fff3}}.play-btn:hover{background:#ffffff26}.play-btn{border-radius:1rem;padding:1.5rem 3rem;color:#fff;font-size:1.5rem;font-weight:700;background:linear-gradient(135deg,#6366f1,#ec4899);box-shadow:0 10px 15px -3px #0000001a}.play-btn:hover{transform:translateY(-2px);box-shadow:0 20px 25px -5px #0000001a}.play-btn:active{transform:translateY(0)}.play-btn:focus-visible{outline:2px solid #6366f1;outline-offset:2px}.bpm-presets{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}.preset-btn{background:#ffffff1a;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2)}@supports not (backdrop-filter: blur(10px)){.preset-btn{background:#fff3}}.preset-btn:hover{background:#ffffff26}.preset-btn{border-radius:.5rem;padding:.5rem 1rem;color:#fffc;font-size:.875rem;transition:color .15s ease,transform .15s ease}.preset-btn:hover{color:#fff}.preset-btn:active{transform:scale(.95)}.preset-btn:focus-visible{outline:2px solid #6366f1;outline-offset:2px}@media(max-width:640px){.bpm-display{font-size:2rem}.play-btn{font-size:1.25rem;padding:1.5rem 2rem}}@keyframes bpm-update{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.settings-container{background:#ffffff1a;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2)}@supports not (backdrop-filter: blur(10px)){.settings-container{background:#fff3}}.settings-container:hover{background:#ffffff26}.settings-container{border-radius:1rem;padding:2rem;display:flex;flex-direction:column;gap:1.5rem}.settings-section{display:flex;flex-direction:column;gap:.5rem}.settings-section .settings-label{font-size:.875rem;color:#fffc;font-weight:500;text-transform:uppercase;letter-spacing:.05em}.settings-select{background:#ffffff1a;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2)}@supports not (backdrop-filter: blur(10px)){.settings-select{background:#fff3}}.settings-select:hover{background:#ffffff26}.settings-select{border-radius:.5rem;padding:1rem;color:#fff;font-size:1rem;cursor:pointer}.settings-select option{background:#2d2d2d;color:#fff}.settings-select:focus-visible{outline:2px solid #6366f1;outline-offset:2px}.volume-row{display:flex;align-items:center;gap:1rem}.volume-slider{flex:1;height:.5rem;border-radius:9999px;background:#ffffff1a;outline:none;-webkit-appearance:none}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:1.25rem;height:1.25rem;border-radius:50%;background:#6366f1;cursor:pointer}.volume-slider::-webkit-slider-thumb:hover{background:#4f46e5}.volume-slider::-moz-range-thumb{width:1.25rem;height:1.25rem;border-radius:50%;background:#6366f1;cursor:pointer;border:none}.volume-slider::-moz-range-thumb:hover{background:#4f46e5}.volume-slider:focus-visible{outline:2px solid #6366f1;outline-offset:2px}.volume-display{font-size:1rem;color:#fff;min-width:2rem;text-align:center}.accent-container{display:flex;gap:1rem;flex-wrap:wrap}.accent-beat{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.5rem;cursor:pointer}.accent-beat .accent-checkbox{width:1.25rem;height:1.25rem;cursor:pointer}.accent-beat .accent-checkbox:focus-visible{outline:2px solid #6366f1;outline-offset:2px}.accent-beat .accent-beat-number{font-size:.875rem;color:#fffc}@media(min-width:641px)and (max-width:1024px){.settings-container{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}.accent-pattern-section{grid-column:span 2}}@media(min-width:1025px){.settings-container{grid-template-columns:repeat(3,1fr)}.accent-pattern-section{grid-column:span 3}}.metronome-container{width:100%;max-width:800px;display:flex;flex-direction:column;gap:2rem}.header{text-align:center;padding:1.5rem}.header h1{font-size:3rem;font-weight:700;text-shadow:0 10px 15px -3px rgba(0,0,0,.1)}@media(max-width:640px){.metronome-container{gap:1.5rem}.header h1{font-size:2rem}}@media(min-width:1025px){.metronome-container{max-width:1000px}}