:root{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#ffffffde;background-color:#1a1a2e;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box;margin:0;padding:0}body{min-height:100vh;display:flex;justify-content:center;align-items:flex-start;padding:2rem 0}#app{width:100%;max-width:1400px;padding:1rem;padding-top:.5em;text-align:center;margin:0 auto}@media (min-width: 768px){#app{padding:1rem;padding-top:.5em}}h1{font-size:1.8rem;margin:0;padding:0;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}@media (min-width: 768px){h1{font-size:2.2rem}}.app-header{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:1rem}.subtitle{font-size:.9rem;color:#ffffff80;margin-bottom:2rem}.controls{display:flex;flex-direction:column;gap:1.5rem;padding:1.5rem;background:#ffffff0d;border-radius:1rem;border:1px solid rgba(255,255,255,.1)}@media (min-width: 768px){.controls{padding:1.5rem;gap:1.5rem}}.params-grid{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}.params-grid>.param-section{flex:1 1 100%;max-width:400px}@media (min-width: 640px){.params-grid>.param-section{flex:1 1 calc(50% - .5rem);max-width:calc(50% - .5rem)}}@media (min-width: 1024px){.params-grid>.param-section{flex:0 1 calc(33.333% - .75rem);max-width:calc(33.333% - .75rem)}}@media (min-width: 1280px){.params-grid>.param-section{flex:0 1 calc(25% - .75rem);max-width:calc(25% - .75rem)}}.play-button{width:50px;height:50px;border-radius:50%;border:none;cursor:pointer;font-size:1.5rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 15px #667eea66}@media (min-width: 768px){.play-button{width:60px;height:60px;font-size:1.8rem}}.play-button:hover{transform:scale(1.05);box-shadow:0 6px 30px #667eea99}.play-button:active{transform:scale(.98)}.play-button.playing{background:linear-gradient(135deg,#f093fb,#f5576c);box-shadow:0 4px 20px #f093fb66}.play-button.loading{background:linear-gradient(135deg,#888,#555);box-shadow:0 4px 20px #64646466;cursor:wait;animation:pulse 1s ease-in-out infinite}.play-button:disabled{pointer-events:none}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.slider-container{display:flex;flex-direction:column;gap:.5rem}.slider-container label{font-size:.9rem;color:#ffffffb3}.slider-row{display:flex;align-items:center;gap:1rem}input[type=range]{flex:1;height:8px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#ffffff1a;border-radius:4px;outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);cursor:pointer;transition:transform .2s}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}input[type=range]::-moz-range-thumb{width:20px;height:20px;border:none;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);cursor:pointer}.status{padding:.5rem 1rem;background:#ffffff08;border-radius:.5rem;font-size:.85rem;color:#fff9;margin-bottom:1rem;text-align:center}.current-chord{font-family:monospace;color:#667eea;font-weight:700}.note-indicator{display:flex;justify-content:space-between;gap:.25rem;width:100%;padding:.75rem 1rem;background:#ffffff08;border-radius:.75rem;border:1px solid rgba(255,255,255,.08);margin-bottom:1rem}@media (min-width: 768px){.note-indicator{padding:1rem 1.5rem;gap:.5rem}}.note-dot{flex:1;aspect-ratio:1;max-width:60px;min-width:20px;border-radius:.5rem;background:#ffffff1a;transition:all .15s ease;display:flex;align-items:center;justify-content:center;position:relative}.note-label{font-size:.6rem;color:#fff6;font-weight:500}@media (min-width: 768px){.note-dot{border-radius:.75rem}.note-label{font-size:.75rem}}.note-dot.in-chord{background:#667eea40;border:1px solid rgba(102,126,234,.4)}.note-dot.in-chord .note-label{color:#ffffffb3}.note-dot.active{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 0 20px #667eea99;transform:scale(1.05)}.note-dot.active .note-label{color:#fff}.param-section{background:#ffffff08;border-radius:.75rem;padding:1rem;border:1px solid rgba(255,255,255,.08);text-align:left}.param-section.wide{flex:1 1 100%;max-width:700px}.param-section h3{font-size:.85rem;color:#fff9;margin-bottom:.75rem;text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:center;justify-content:space-between}.toggle-label{display:flex;align-items:center;gap:.5rem;font-size:.75rem;cursor:pointer;text-transform:none}.toggle-label input[type=checkbox]{width:16px;height:16px;accent-color:#667eea;cursor:pointer}.toggle-text{color:#ffffff80}.button-group{display:flex;gap:.5rem}.button-group button{flex:1;padding:.5rem .75rem;border:1px solid rgba(255,255,255,.2);background:#ffffff0d;color:#ffffffb3;border-radius:.375rem;cursor:pointer;font-size:.8rem;transition:all .2s}.button-group button:hover{background:#ffffff1a;border-color:#ffffff4d}.button-group button.active{background:linear-gradient(135deg,#667eea,#764ba2);border-color:transparent;color:#fff}.param-section .slider-container{margin-bottom:.5rem}.param-section .slider-container:last-child{margin-bottom:0}.value-display{min-width:70px;text-align:right;font-family:monospace;color:#ffffffe6;font-size:.8rem;flex-shrink:0}@media (min-width: 768px){.value-display{min-width:80px;font-size:.85rem}}.preset-bar{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:center;padding:.75rem 1rem;margin-bottom:1rem;background:#ffffff08;border-radius:.5rem;border:1px solid rgba(255,255,255,.08)}.preset-select-group{display:flex;align-items:center;gap:.5rem}.preset-select-group label{font-size:.85rem;color:#ffffffb3}.preset-select-group select{padding:.4rem .6rem;border-radius:.375rem;border:1px solid rgba(255,255,255,.15);background:#ffffff0d;color:#fff;font-size:.85rem;min-width:150px;cursor:pointer}.preset-select-group select:focus{outline:none;border-color:#667eea}.preset-select-group select optgroup{background:#2a2a4a;color:#fff9}.preset-select-group select option{background:#1a1a2e;color:#fff;padding:.25rem}.preset-save-group{display:flex;align-items:center;gap:.4rem}.preset-name-input{padding:.4rem .6rem;border-radius:.375rem;border:1px solid rgba(255,255,255,.15);background:#ffffff0d;color:#fff;font-size:.85rem;width:140px}.preset-name-input::placeholder{color:#fff6}.preset-name-input:focus{outline:none;border-color:#667eea}.preset-btn{padding:.4rem .75rem;border-radius:.375rem;border:1px solid rgba(255,255,255,.15);background:#ffffff0d;color:#fffc;font-size:.8rem;cursor:pointer;transition:all .2s}.preset-btn:hover:not(:disabled){background:#ffffff1a;border-color:#ffffff40}.preset-btn:disabled{opacity:.4;cursor:not-allowed}.preset-btn.save{background:linear-gradient(135deg,#667eea,#764ba2);border-color:transparent;color:#fff}.preset-btn.save:hover:not(:disabled){filter:brightness(1.1)}.preset-btn.delete{border-color:#ff64644d;color:#ff9696e6}.preset-btn.delete:hover:not(:disabled){background:#ff646426;border-color:#ff646466}.preset-io-group{display:flex;gap:.4rem}@media (max-width: 600px){.preset-bar{flex-direction:column;gap:.5rem}.preset-select-group,.preset-save-group,.preset-io-group{width:100%;justify-content:center}.preset-name-input{flex:1;min-width:0}}