html,body{margin:0;padding:0;height:100%;font-family:PT Sans Caption,sans-serif}body{background-color:#1e4c5b;color:#fff;display:flex;justify-content:center;align-items:center;min-height:100vh;padding:20px;box-sizing:border-box}button{margin:0;padding:10px 20px;font-size:1rem;cursor:pointer;border:none;border-radius:5px;background-color:#0056b3;color:#fff;transition:background-color .3s ease}button:hover{background-color:#003d80}button.active{background-color:#ff5722}button.start-button{width:100%;padding:14px 24px;font-size:1.1rem}button.start-button--active{background-color:#ff5722}.metronome{width:100%;max-width:900px;margin:0 auto}.metronome__header{text-align:center;margin-bottom:1.5rem}.metronome__title{margin:0;font-size:1.75rem}.metronome__layout{display:grid;grid-template-columns:1fr 340px;gap:2rem;align-items:start}.metronome__viz{display:flex;flex-direction:column;align-items:center;justify-content:center}.metronome__viz-inner{position:relative;width:100%;max-width:320px}.metronome__canvas{width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 8px 32px #0003}.metronome__canvas canvas{display:block}.metronome__bpm-display{position:absolute;top:50%;left:50%;transform:translate(-50%,calc(-50% - .5rem));font-size:3rem;font-weight:700;line-height:1;text-shadow:0 2px 8px rgba(0,0,0,.3);pointer-events:none}.metronome__bpm-label{position:absolute;top:50%;left:50%;transform:translate(-50%,calc(-50% + 1.5rem));font-size:.9rem;opacity:.9;pointer-events:none}.metronome__controls{display:flex;flex-direction:column;gap:1.25rem}.control-group__label{display:block;margin-bottom:.5rem;font-size:.9rem;opacity:.95}.control-group--primary,.control-group--options{display:flex;flex-direction:column;gap:.75rem}.bpm-row{display:flex;align-items:center;gap:10px}.bpm-row input[type=range]{flex:1;min-width:0}.bpm-row .bpm-button{width:40px;height:40px;padding:0;font-size:1.2rem;display:flex;align-items:center;justify-content:center;border-radius:50%;flex-shrink:0}.bpm-row .bpm-button:hover{background-color:#003d80}.bpm-row .bpm-button:active{background-color:#00254d}.bpm-input-row{display:flex;gap:8px;align-items:flex-start}.bpm-tap-block{flex:1;display:flex;flex-direction:column;gap:4px}.bpm-tap__hint{margin:0;font-size:.75rem;line-height:1.3;opacity:.85}.bpm-input{width:70px;padding:8px 12px;font-size:1rem;text-align:center;border:1px solid rgba(255,255,255,.4);border-radius:5px;background:#ffffff1a;color:#fff}.bpm-input::-webkit-inner-spin-button,.bpm-input::-webkit-outer-spin-button{opacity:1}.bpm-tap{flex:1;padding:8px 16px;font-size:.95rem;background-color:#fff3;border:1px solid rgba(255,255,255,.4);border-radius:5px;color:#fff;cursor:pointer;transition:background-color .2s}.bpm-tap:hover:not(:disabled){background-color:#ffffff4d}.bpm-tap:disabled{opacity:.6;cursor:not-allowed}.bpm-presets{display:flex;flex-wrap:wrap;gap:6px}.bpm-preset{min-width:36px;padding:6px 10px;font-size:.85rem;background-color:#ffffff26;border:1px solid rgba(255,255,255,.3);border-radius:4px;color:#fff;cursor:pointer;transition:background-color .2s,border-color .2s}.bpm-preset:hover{background-color:#ffffff40}.bpm-preset.active{background-color:#0056b3;border-color:#0056b3}.time-signature-buttons{display:flex;flex-wrap:wrap;gap:8px}.control-select{width:100%;padding:10px 14px;font-size:1rem;border-radius:5px;background:#1e4c5b;border:1px solid rgba(255,255,255,.3);color:#fff;cursor:pointer}.control-select option{background-color:#1e4c5b;color:#fff}.option-checkbox{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:.95rem}.option-checkbox input[type=checkbox]{width:18px;height:18px;cursor:pointer}.volume-control{display:flex;flex-direction:column;gap:6px}.volume-control label{font-size:.9rem}.volume-control input[type=range]{width:100%}.beats-visualization{display:flex;flex-wrap:wrap;gap:10px}.beat-circle{position:relative;width:44px;height:44px;padding:0;border-radius:50%;background-color:#ccc;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .3s ease,box-shadow .3s ease;box-shadow:inset 0 -2px 6px #0000004d}.beat-circle.active{background-color:#46852e}.beat-circle.muted{background-color:#a01e1e}.beat-circle.accent{box-shadow:inset 0 -2px 6px #0000004d,0 0 0 2px #ff5722}.beat-circle__accent-badge{font-size:.75rem;font-weight:700;color:#fffffff2;text-shadow:0 1px 2px rgba(0,0,0,.5)}@media (max-width: 768px){body{padding:12px}.metronome__layout{grid-template-columns:1fr;gap:1.5rem}.metronome__viz{order:-1;min-height:240px}.metronome__canvas{max-width:260px}.metronome__bpm-display{font-size:2.5rem}.metronome__bpm-label{transform:translate(-50%,calc(-50% + 2rem));font-size:.8rem}.metronome__controls{max-width:400px;margin:0 auto;width:100%}button{padding:8px 16px;font-size:.95rem}.bpm-row .bpm-button{width:36px;height:36px;font-size:1.1rem}.beat-circle{width:38px;height:38px}.bpm-preset{min-width:32px;padding:5px 8px;font-size:.8rem}}@media (max-width: 480px){.metronome__canvas{max-width:220px}.metronome__bpm-display{font-size:2rem}.bpm-input-row{flex-direction:column;align-items:stretch}.bpm-tap__hint{font-size:.7rem}.bpm-input{width:100%;max-width:100px}.beat-circle{width:36px;height:36px}}