*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#1a1a1a;color:#fff}.app{min-height:100vh;padding:2rem}header{text-align:center;margin-bottom:3rem;position:relative;display:flex;align-items:center;justify-content:center;gap:1rem}header h1{font-size:2.5rem;font-weight:700;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;opacity:1;transition:opacity .3s ease}header.playing h1{opacity:0}.header-buttons{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;gap:.5rem}.settings-button,.fullscreen-button{background:#3a3a3a;border:2px solid #4a4a4a;border-radius:8px;padding:.5rem .75rem;font-size:1.5rem;cursor:pointer;transition:all .2s}.settings-button:hover,.fullscreen-button:hover{background:#4a4a4a;border-color:#667eea}main{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:2rem;transition:gap .4s ease;min-height:calc(100vh - 200px);justify-content:center}main.playing-mode{gap:1.5rem}.time-signature-section{max-height:500px;opacity:1;overflow:hidden;transition:max-height .4s ease,opacity .4s ease .1s,margin .4s ease;will-change:max-height,opacity}.time-signature-section.hidden{max-height:0;opacity:0;margin-bottom:-2rem;transition:max-height .4s ease,opacity .3s ease,margin .4s ease}.time-signature-selector{background:#2a2a2a;padding:1.5rem;border-radius:12px;box-shadow:0 4px 6px #0000004d}.time-signature-selector>label{display:block;font-size:1.1rem;font-weight:600;margin-bottom:1rem;color:#e0e0e0}.time-signature-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:.75rem;margin-bottom:1rem}.time-sig-button{padding:.75rem;font-size:1rem;font-weight:600;background:#3a3a3a;color:#fff;border:2px solid #4a4a4a;border-radius:8px;cursor:pointer;transition:all .2s}.time-sig-button:hover{background:#4a4a4a;border-color:#667eea}.time-sig-button.active{background:#667eea;border-color:#667eea;color:#fff}.custom-beats{display:flex;align-items:center;gap:.75rem}.custom-beats label{font-size:.95rem;color:#b0b0b0}.custom-beats input{width:80px;padding:.5rem;font-size:1rem;background:#3a3a3a;color:#fff;border:2px solid #4a4a4a;border-radius:6px}.beat-accent-grid{background:#2a2a2a;padding:1.5rem;border-radius:12px;box-shadow:0 4px 6px #0000004d}.beat-accent-grid>label{display:block;font-size:1.1rem;font-weight:600;margin-bottom:1rem;color:#e0e0e0}.beat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:.75rem;margin-bottom:1rem}.beat-button{padding:1rem .5rem;border:none;border-radius:8px;cursor:pointer;transition:all .2s;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:.25rem;box-shadow:0 2px 4px #0003}.beat-button:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000004d}.beat-button:active{transform:translateY(0)}.beat-button.active{box-shadow:0 0 20px 8px #fffc,0 0 40px 12px #fff6;transform:translateY(-2px) scale(1.05)}.beat-number{font-size:1.25rem;font-weight:700}.accent-label{font-size:.75rem;opacity:.8}.legend{display:flex;gap:1.5rem;flex-wrap:wrap;justify-content:center;padding-top:1rem;border-top:1px solid #3a3a3a}.legend-item{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:#b0b0b0}.legend-color{width:20px;height:20px;border-radius:4px;box-shadow:0 2px 4px #0003}.legend-key{font-family:monospace;font-size:.85rem;color:#667eea;font-weight:600}.metronome-controls{background:#2a2a2a;padding:1.5rem;border-radius:12px;box-shadow:0 4px 6px #0000004d;display:flex;flex-direction:column;gap:1rem;transition:padding .4s ease,gap .4s ease}.metronome-controls.compact{padding:1rem}.preset-indicator-banner{text-align:center;padding:.5rem;background:#667eea33;color:#667eea;border-radius:6px;font-size:.9rem;font-weight:500;transition:opacity .3s ease,max-height .3s ease;overflow:hidden}.controls-row{display:flex;gap:1rem;align-items:flex-end;transition:gap .4s ease}.metronome-controls.compact .controls-row{gap:.75rem}.bpm-control{flex:1}.bpm-control>label{display:block;font-size:1.1rem;font-weight:600;color:#e0e0e0;margin-bottom:.75rem;transition:font-size .4s ease,margin-bottom .4s ease}.metronome-controls.compact .bpm-control>label{font-size:.95rem;margin-bottom:.5rem}.bpm-input-group{display:flex;gap:1rem;align-items:center}.bpm-input-group input[type=number]{width:100px;padding:.75rem;font-size:1.5rem;font-weight:700;text-align:center;background:#3a3a3a;color:#fff;border:2px solid #4a4a4a;border-radius:8px}.bpm-input-group input[type=range]{flex:1;height:8px;border-radius:4px;background:#3a3a3a;outline:none;-webkit-appearance:none}.bpm-input-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#667eea;cursor:pointer;box-shadow:0 2px 4px #0000004d}.bpm-input-group input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#667eea;cursor:pointer;border:none;box-shadow:0 2px 4px #0000004d}.play-button{padding:1.25rem 2rem;font-size:1.5rem;font-weight:700;background:#667eea;color:#fff;border:none;border-radius:12px;cursor:pointer;transition:all .3s;box-shadow:0 4px 8px #667eea4d;white-space:nowrap;min-width:120px}.metronome-controls.compact .play-button{padding:1rem 1.5rem;font-size:1.25rem;min-width:100px}.play-button:hover{background:#5568d3;transform:translateY(-2px);box-shadow:0 6px 12px #667eea66}.play-button:active{transform:translateY(0)}.play-button.playing{background:#e74c3c;box-shadow:0 4px 8px #e74c3c4d}.play-button.playing:hover{background:#c0392b;box-shadow:0 6px 12px #e74c3c66}.presets-toggle{position:fixed;left:0;top:50%;transform:translateY(-50%);background:#667eea;color:#fff;border:none;border-radius:0 8px 8px 0;padding:1rem .75rem;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;z-index:999;box-shadow:2px 0 8px #0000004d}.presets-toggle:hover{background:#5568d3;padding-right:1rem}.preset-overlay{position:fixed;inset:0;background:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s;z-index:1000}.preset-overlay.open{opacity:1;pointer-events:auto}.preset-panel{position:fixed;left:-400px;top:0;bottom:0;width:400px;max-width:90vw;background:#2a2a2a;box-shadow:4px 0 16px #00000080;transition:left .3s ease-out;z-index:1001;display:flex;flex-direction:column}.preset-panel.open{left:0}.preset-panel-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid #3a3a3a}.preset-panel-header h2{font-size:1.5rem;color:#fff;margin:0}.panel-close{background:transparent;border:none;font-size:2rem;color:#b0b0b0;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:color .2s}.panel-close:hover{color:#fff}.preset-panel-actions{padding:1rem 1.5rem;border-bottom:1px solid #3a3a3a}.save-preset-button{width:100%;padding:.75rem 1rem;font-size:1rem;font-weight:600;background:#667eea;color:#fff;border:none;border-radius:8px;cursor:pointer;transition:all .2s}.save-preset-button:hover{background:#5568d3}.preset-list{flex:1;overflow-y:auto;padding:1rem 1.5rem;display:flex;flex-direction:column;gap:.75rem}.no-presets{text-align:center;color:#b0b0b0;padding:2rem;font-style:italic}.preset-item{display:flex;gap:.5rem;align-items:stretch}.preset-load{flex:1;background:#3a3a3a;border:2px solid #4a4a4a;border-radius:8px;padding:.75rem 1rem;text-align:left;cursor:pointer;transition:all .2s}.preset-load:hover{background:#4a4a4a;border-color:#667eea}.preset-name{font-weight:600;color:#fff;margin-bottom:.25rem}.preset-details{font-size:.85rem;color:#b0b0b0}.preset-actions{display:flex;gap:.5rem}.preset-update,.preset-delete{background:#3a3a3a;border:2px solid #4a4a4a;border-radius:8px;padding:.5rem .75rem;font-size:1.25rem;cursor:pointer;transition:all .2s;width:44px;display:flex;align-items:center;justify-content:center}.preset-update{color:#667eea}.preset-update:hover{background:#667eea;border-color:#667eea;color:#fff}.preset-delete{color:#e74c3c}.preset-delete:hover{background:#e74c3c;border-color:#e74c3c;color:#fff}.modal-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-content{background:#2a2a2a;border-radius:12px;box-shadow:0 8px 32px #00000080;max-width:500px;width:90%;max-height:80vh;overflow-y:auto}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid #3a3a3a}.modal-header h2{font-size:1.5rem;color:#fff;margin:0}.modal-close{background:transparent;border:none;font-size:2rem;color:#b0b0b0;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:color .2s}.modal-close:hover{color:#fff}.modal-body{padding:1.5rem}.setting-group{margin-bottom:1.5rem}.setting-group label{display:block;font-size:1.1rem;font-weight:600;margin-bottom:.5rem;color:#e0e0e0}.setting-description{font-size:.9rem;color:#b0b0b0;margin-bottom:1rem}.setting-control{display:flex;gap:1rem;align-items:center}.setting-control input[type=number]{width:100px;padding:.75rem;font-size:1rem;text-align:center;background:#3a3a3a;color:#fff;border:2px solid #4a4a4a;border-radius:8px}.setting-control input[type=range]{flex:1;height:8px;border-radius:4px;background:#3a3a3a;outline:none;-webkit-appearance:none}.setting-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#667eea;cursor:pointer;box-shadow:0 2px 4px #0000004d}.setting-control input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#667eea;cursor:pointer;border:none;box-shadow:0 2px 4px #0000004d}.preset-name-input{width:100%;padding:.75rem;font-size:1rem;background:#3a3a3a;color:#fff;border:2px solid #4a4a4a;border-radius:8px}.preset-name-input:focus{outline:none;border-color:#667eea}.modal-actions{display:flex;gap:.75rem;margin-top:1.5rem}.modal-button{flex:1;padding:.75rem 1.5rem;font-size:1rem;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:all .2s}.modal-button.cancel{background:#3a3a3a;color:#fff}.modal-button.cancel:hover{background:#4a4a4a}.modal-button.save{background:#667eea;color:#fff}.modal-button.save:hover{background:#5568d3}.modal-button.save:disabled{background:#4a4a4a;color:#666;cursor:not-allowed}.modal-button.update{background:#667eea;color:#fff}.modal-button.update:hover{background:#5568d3}.warning-text{color:#e74c3c;font-size:.9rem;margin-top:.5rem}@media (max-width: 600px){.app{padding:1rem}header h1{font-size:1.75rem}.beat-grid,.time-signature-buttons{grid-template-columns:repeat(auto-fit,minmax(60px,1fr))}}