:root{--bg-color:#121212;--surface-color:#1e1e1e;--primary-color:#0473da;--secondary-color:#008b44;--text-primary:#fff;--text-secondary:#b0b0b0;--accent-color:#9b0621;--font-family:'Outfit',sans-serif;--border-color:#333;--bg-subtle:#fff0d;--bg-hover:#fff1a;--shadow-default:0 4px 15px #0004d;--shadow-strong:0 10px 30px #00080}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}body{background-color:var(--bg-color);color:var(--text-primary);font-family:var(--font-family);display:flex;justify-content:center;align-items:center;margin-top:0}.metronome-container{width:100%;max-width:500px;height:100%;max-height:800px;background-color:var(--surface-color);display:flex;flex-direction:column;padding:.5rem;position:relative;border-radius:0}@media (min-width:768px){.metronome-container{height:auto;border-radius:24px;box-shadow:var(--shadow-strong);aspect-ratio:9/16;max-height:90vh;padding:2rem}}.metronome-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;width:100%}.metronome-header h1{font-size:1.8rem;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:2px;margin:0}.control-btn,.play-btn,.reset-btn,.settings-btn,.stepper button,.timer-btn{border:none;cursor:pointer;display:flex;justify-content:center;align-items:center;border-radius:50%}.settings-btn,.timer-btn{background:0 0;color:var(--text-secondary);padding:8px;transition:.2s}.settings-btn:hover,.timer-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.timer-btn:hover{color:var(--primary-color)}.timers-container{display:flex;justify-content:center;gap:1rem;margin-bottom:1rem;width:100%}.practice-timer{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg-subtle);padding:.5rem 1rem;border-radius:12px;min-width:100px}.timer-label{color:var(--text-secondary);text-transform:uppercase;margin-bottom:2px}#daily-timer-display,#timer-display{font-family:monospace;color:var(--text-primary);letter-spacing:1px}.modal{display:none;position:absolute;top:0;left:0;width:100%;height:100%;background:#000c;z-index:100;justify-content:center;align-items:center;backdrop-filter:blur(5px)}.modal.show{display:flex}.modal-content{background:var(--surface-color) !important;width:90%;max-width:400px;border-radius:16px;padding:1.5rem;box-shadow:var(--shadow-strong);border:1px solid var(--border-color)}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.modal-header h2{font-size:1.5rem;color:var(--text-primary)}.close-btn{background:0 0;border:none;color:#ff4d4f;font-size:2.5rem;cursor:pointer;top:-10px;position:relative}.subdivision-selector{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.subdiv-btn{background:var(--bg-subtle);border:2px solid transparent;border-radius:12px;padding:1rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--text-secondary);cursor:pointer;transition:.2s}.subdiv-btn.active{border-color:var(--primary-color);background:#bb86fc1a;color:var(--primary-color)}.subdiv-btn:hover{background:var(--bg-hover)}.display-area{text-align:center;flex-grow:.5;display:flex;flex-direction:column;justify-content:center;align-items:center}.bpm-display,.bpm-input{font-size:8rem;font-weight:700;line-height:1;color:var(--primary-color)}.bpm-display{text-shadow:0 0 15px rgba(0,0,0,.3);position:relative;cursor:pointer}.bpm-input{background:0 0;border:none;text-align:center;width:100%;max-width:300px;font-family:inherit;outline:0;text-shadow:0 0 20px #bb86fc4d;-moz-appearance:textfield;appearance:textfield}.bpm-input::-webkit-inner-spin-button,.bpm-input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}.bpm-label{font-size:1.5rem;color:var(--text-secondary);display:block;margin-top:.5rem;font-weight:300}.tempo-marking{margin-top:1rem;font-size:1.7rem;color:var(--text-secondary);font-style:italic}.beat-visualizer{display:flex;justify-content:center;gap:12px;margin-bottom:3rem}.beat-dot{width:16px;height:16px;border-radius:50%;background-color:var(--border-color);transition:background-color .1s,transform .1s}.beat-dot.active{background-color:var(--secondary-color);transform:scale(1.2);box-shadow:0 0 10px var(--secondary-color)}.beat-dot.accent{background-color:var(--accent-color);box-shadow:0 0 10px var(--accent-color)}.controls-area{display:flex;flex-direction:column;gap:2rem}.slider-container{width:100%;padding:0 1rem}.bpm-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;background:var(--border-color);border-radius:3px;outline:0}.bpm-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:var(--primary-color);cursor:pointer;box-shadow:var(--shadow-default);transition:transform .1s}.bpm-slider::-webkit-slider-thumb:active{transform:scale(1.2)}.main-controls{display:flex;justify-content:center;align-items:center;gap:2rem}.play-btn{width:80px;height:80px;background:var(--primary-color);color:#000;box-shadow:var(--shadow-default);transition:transform .1s,box-shadow .1s}.play-btn:active{transform:scale(.95);box-shadow:0 2px 8px rgba(0,0,0,.3)}.control-btn{width:50px;height:50px;background:0 0;border:2px solid var(--border-color);color:var(--text-primary);transition:.2s}.control-btn:active{background:var(--border-color);transform:scale(.95)}.settings-controls{display:flex;justify-content:center;gap:2rem;border-top:1px solid var(--border-color);padding-top:1.5rem}.setting-group{display:flex;flex-direction:column;align-items:center;gap:.5rem}.setting-group label{color:var(--text-secondary);text-transform:uppercase}.stepper{display:flex;align-items:center;background:#2a2a2a;border-radius:20px;padding:4px}.stepper button{width:32px;height:32px;background:0 0;color:var(--text-primary);font-size:1.2rem}.stepper button:active{background:#444}.stepper span{width:40px;text-align:center;font-weight:500}.rhythm-buttons{display:flex;gap:.5rem;align-items:center}.random-btn,.reset-btn{background:#2a2a2a;border:none;cursor:pointer;transition:.2s}.random-btn{display:flex;align-items:center;gap:.5rem;color:var(--text-primary);padding:8px 16px;border-radius:20px;font-family:inherit;font-weight:500}.reset-btn{color:var(--text-secondary);padding:8px;border-radius:50%;width:36px;height:36px}.random-btn:hover,.reset-btn:hover{background:var(--border-color)}.reset-btn:hover{color:var(--text-primary)}.random-btn:active,.reset-btn:active{background:#444}.rhythm-display-area{width:100%;display:flex;justify-content:center;animation:.3s fadeIn}#rhythm-canvas{display:flex;align-items:center;justify-content:center;gap:4px;background:var(--bg-subtle);padding:.7rem;border-radius:12px;width:100%}.note-svg{fill:var(--text-primary);height:36px;width:auto}.note-group{display:flex;flex-direction:column;align-items:center;margin-right:.4rem}.note-group:last-child{margin-right:0}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}