:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}@font-face{font-family:DepartureMono;src:url(/fonts/DepartureMono-Regular.otf) format("opentype");font-weight:400;font-style:normal}*{font-family:DepartureMono,Courier New,monospace}body{margin:0;padding:0;background-color:#fff}.app-container{display:flex;flex-direction:column;align-items:center;padding:20px;max-width:1200px;margin:0 auto;gap:30px}.app-container>*:not(.loading-message){transition:opacity .6s ease-in-out}.app-container.loading>*:not(.loading-message){opacity:.1}.loading-message{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1rem;color:#121212;text-align:center;padding:12px 16px;background-color:#fff;outline:1px solid #d9d9d9;animation:pulse 2s infinite;z-index:1000}@keyframes pulse{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}.header-section{text-align:center;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.header-section h2{margin:0 0 12px;font-size:1.1rem;color:#333;font-weight:400}.root-scale-controls{display:flex;flex-direction:row;align-items:center;gap:16px}.root-navigation{display:flex;align-items:center}.nav-arrow{background:none;border:none;font-size:1.5rem;cursor:pointer;padding:5px 10px;background-color:#fff;color:#666;transition:color .2s;outline:1px solid #d9d9d9;height:30.5px;display:flex;align-items:center;justify-content:center}.nav-arrow:hover:not(:disabled){color:#333}.nav-arrow:disabled{cursor:not-allowed}.current-root{font-size:1rem;font-weight:700;background-color:#fff;color:#333;min-width:40px;outline:1px solid #d9d9d9;height:30.5px;display:flex;align-items:center;justify-content:center}.note-selector{display:flex;flex-wrap:wrap;justify-content:center}.note-btn{padding:4px 8px;outline:1px solid #D9D9D9;background:#fff;cursor:pointer;font-size:1rem;transition:all .2s;min-width:40px}.note-btn:hover:not(:disabled){background-color:#355e3b;outline:1px solid #121212;color:#fff}.note-btn.active{background-color:#355e3b;color:#fff;outline:1px solid #121212}.note-btn:disabled{cursor:not-allowed}.note-btn:focus{outline:1px solid #d7d7d7}.scale-type-selector{display:flex}.scale-type-btn{padding:4px 8px;outline:1px solid #D9D9D9;background:#fff;cursor:pointer;font-size:.9rem;transition:all .2s}.scale-type-btn:hover:not(:disabled){background-color:#f2f2f2}.scale-type-btn.active{background-color:#355e3b;color:#fff}.scale-type-btn:hover:not(:disabled):hover{background-color:#1e4824;color:#fff}.scale-type-btn:disabled{cursor:not-allowed}.scale-type-btn:focus{outline:1px solid #d7d7d7}.piano-section{width:100%;display:flex;justify-content:center}.piano{display:flex;justify-content:center;padding:20px;border-radius:12px}.piano-keys{position:relative;display:flex}.piano-key{cursor:pointer;transition:all .1s;display:flex;flex-direction:column;justify-content:space-between;align-items:center;border:none;outline:none}.piano-key.white-key{box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:4px;gap:4px;position:relative;width:60px;height:200px;background:#fff;outline:1px solid #121212;cursor:pointer;transition:all .1s;z-index:1}.piano-key.black-key{position:absolute;width:40px;height:120px;background-color:#333;outline:1px solid #222;color:#fff;z-index:2;box-shadow:0 4px 8px #0000004d;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:4px;gap:4px}.piano-key.black-key:nth-of-type(22){left:40px}.piano-key.black-key:nth-of-type(23){left:100px}.piano-key.black-key:nth-of-type(24){left:220px}.piano-key.black-key:nth-of-type(25){left:280px}.piano-key.black-key:nth-of-type(26){left:340px}.piano-key.black-key:nth-of-type(27){left:460px}.piano-key.black-key:nth-of-type(28){left:520px}.piano-key.black-key:nth-of-type(29){left:640px}.piano-key.black-key:nth-of-type(30){left:700px}.piano-key.black-key:nth-of-type(31){left:760px}.piano-key.black-key:nth-of-type(32){left:880px}.piano-key.black-key:nth-of-type(33){left:940px}.piano-key.black-key:nth-of-type(34){left:1060px}.piano-key.black-key:nth-of-type(35){left:1120px}.piano-key.black-key:nth-of-type(36){left:1180px}.piano-key:disabled{cursor:not-allowed}.piano-key.scale{background-color:#355e3b!important;color:#fff;outline:1px solid #121212}.piano-key.white-key.scale .key-label{background-color:#1e4824;color:#fff}.piano-key.black-key.scale{background-color:#355e3b!important;outline:1px solid #121212}.piano-key.black-key.scale .key-label{background-color:#1e4824;color:#fff}@keyframes highlight-pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.note-name{font-size:18px;font-weight:700;text-align:center}.key-label{font-size:16px;text-align:center}.piano-key.white-key .key-label{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0 8px;gap:4px;height:30px;background:#0000000d;flex:none;order:1;align-self:stretch;flex-grow:0;font-size:16px;color:#787878}.piano-key.black-key .key-label{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0 8px;gap:4px;height:24px;background:#1f1f1f;flex:none;order:1;align-self:stretch;flex-grow:0;font-size:16px;color:#fff}.chords-section{width:100%;max-width:800px}.chords-header{display:flex;align-items:center;margin-bottom:12px;padding:0 20px;gap:8px}.chords-header h3{margin:0;font-size:1.1rem;color:#333;font-weight:400}.chord-counter{font-size:.9rem;color:#666;transition:transform .3s ease}.selection-controls{display:flex;align-items:center;gap:8px;margin-left:auto}.selection-toggle-btn{background:#fff;border:none;padding:4px 8px;cursor:pointer;font-size:.9rem;transition:all .2s}.selection-toggle-btn:hover:not(:disabled){background-color:#f2f2f2}.selection-toggle-btn:disabled{cursor:not-allowed}.selection-toggle-btn:focus{outline:1px solid #d7d7d7}.deselect-all-btn{padding:4px 8px;background:#fff;cursor:pointer;font-size:.9rem;transition:all .3s ease;border:none;overflow:hidden}.deselect-all-btn.hidden{opacity:0;width:0;height:0;padding:0;margin:0;border:none;pointer-events:none}.deselect-all-btn.visible{opacity:1;width:auto}.deselect-all-btn:hover:not(:disabled){background-color:#f2f2f2}.deselect-all-btn:disabled{cursor:not-allowed}.deselect-all-btn:focus{outline:1px solid #d7d7d7}.chord-buttons-container{display:grid;grid-template-columns:repeat(7,1fr);padding:0 20px;gap:0}.chord-button{background:#fff;outline:1px solid #d9d9d9;border:none;padding:8px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1),order 0s;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:80px;box-shadow:0 2px 6px #0000000d;position:relative}.chord-button:hover:not(:disabled){background-color:#f1e0c5;color:#121212}.chord-buttons-container.selection-mode .chord-button:hover:not(:disabled):not(.selected){background-color:#f7f7f7;color:#121212}.chord-button:active,.chord-button.active,.chord-button.playing{background-color:#f1e0c5;color:#121212;outline:1px solid #d9d9d9;transform:none}.chord-button.playing{background-color:#f1e0c5!important;color:#121212!important;outline:1px solid #d9d9d9!important}.chord-button.selected{background-color:#355e3b;color:#fff;outline:1px solid #121212}.chord-button.selected:hover:not(:disabled){background-color:#1e4824;box-shadow:0 4px 12px #0000001a}.chord-button:disabled{cursor:not-allowed}.chord-button:focus{outline:1px solid #d7d7d7}.chord-button:focus .chord-interval,.chord-button:focus .chord-root,.chord-button:focus .chord-notes-in,.chord-button:focus .chord-notes-out{color:#fff}.chord-interval{font-size:.75rem;color:#898989;font-weight:400;margin-bottom:2px}.chord-root{font-size:1.1rem;font-weight:700;color:#121212;margin-bottom:4px}.chord-notes-in{font-size:.8rem;color:#121212;font-weight:500;line-height:1.2;margin-bottom:2px}.chord-notes-out{font-size:.8rem;color:#898989;font-weight:400;line-height:1.2;opacity:.6}.chord-button:active .chord-interval,.chord-button:active .chord-root,.chord-button:active .chord-notes-in,.chord-button:active .chord-notes-out,.chord-button.active .chord-interval,.chord-button.active .chord-root,.chord-button.active .chord-notes-in,.chord-button.active .chord-notes-out,.chord-button.playing .chord-interval,.chord-button.playing .chord-root,.chord-button.playing .chord-notes-in,.chord-button.playing .chord-notes-out{color:#121212!important}.chord-button:active .chord-interval,.chord-button:active .chord-notes-out,.chord-button.active .chord-interval,.chord-button.active .chord-notes-out,.chord-button.playing .chord-interval,.chord-button.playing .chord-notes-out{color:#898989!important}.chord-button.selected .chord-interval,.chord-button.selected .chord-root,.chord-button.selected .chord-notes-in,.chord-button.selected .chord-notes-out{color:#fff}.chord-order-badge{position:absolute;top:8px;right:8px;width:16px;height:16px;background:#fff;color:#121212;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;z-index:1;transition:all .3s ease;animation:badgeAppear .3s ease-out}@keyframes badgeAppear{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@media (max-width: 768px){.app-container{padding:15px;gap:20px}.piano-key.white-key{width:45px;height:150px}.piano-key.black-key{width:30px;height:90px}.chord-buttons-container{grid-template-columns:repeat(4,1fr);gap:8px}.note-selector{gap:4px}.note-btn{padding:6px 8px;min-width:28px;font-size:.8rem}}.piano-key.active,.piano-key.highlighted,.piano-key.chord,.piano-key.playing-chord,.piano-key.black-key.active,.piano-key.black-key.highlighted,.piano-key.black-key.chord,.piano-key.black-key.playing-chord,.piano-key.melody-playing,.piano-key.black-key.melody-playing{background-color:#f1e0c5!important;color:#121212}.piano-key.active .key-label,.piano-key.highlighted .key-label,.piano-key.chord .key-label,.piano-key.playing-chord .key-label,.piano-key.black-key.active .key-label,.piano-key.black-key.highlighted .key-label,.piano-key.black-key.chord .key-label,.piano-key.black-key.playing-chord .key-label,.piano-key.melody-playing .key-label,.piano-key.black-key.melody-playing .key-label{background-color:#e1cfb2!important;color:#121212}.nav-arrow:focus{outline:1px solid #d7d7d7}.action-buttons{display:flex;justify-content:center;gap:12px;margin-top:16px;padding:0 20px;position:relative}.action-btn{background:#fff;outline:1px solid #D9D9D9;border:none;padding:8px 12px;cursor:pointer;font-size:.9rem;transition:all .2s;display:flex;align-items:center;gap:6px;width:240px;justify-content:center}.action-btn:hover:not(:disabled){background-color:#f2f2f2}.action-btn:disabled{cursor:not-allowed}.action-btn:focus{outline:1px solid #d7d7d7}.btn-icon{width:16px;height:16px;flex-shrink:0}.play-btn:disabled{background-color:#f5f5f5}.bottom-section{position:fixed;bottom:24px;left:50%;transform:translate(-50%);z-index:100}.bottom-icons{display:flex;transition:all .3s ease-out}.bottom-icons.hidden{opacity:0;pointer-events:none}.bottom-icon-btn{background:#fff;border:none;padding:8px;cursor:pointer!important;outline:1px solid #d9d9d9;transition:all .2s ease;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0000001a;position:relative}.bottom-icon-btn:hover{background-color:#f5f5f5;cursor:pointer!important}.bottom-icon-btn:active{transform:translateY(0);box-shadow:0 2px 6px #0000001a}.bottom-icon-btn:focus{outline:2px solid #d7d7d7}.bottom-icon{width:20px;height:20px;display:block;pointer-events:none;cursor:pointer!important}.custom-tooltip{position:absolute;bottom:110%;left:50%;transform:translate(-50%) translateY(0);background:#333;color:#fff;padding:6px 12px;font-size:.8rem;white-space:nowrap;z-index:1000;box-shadow:0 2px 8px #0000004d;pointer-events:none;opacity:1;transition:opacity .15s ease-out,transform .15s ease-out;animation:tooltipSlideIn .2s ease-out}.custom-tooltip.fading{opacity:0;transform:translate(-50%) translateY(4px)}@keyframes tooltipSlideIn{0%{opacity:0;transform:translate(-50%) translateY(8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.about-modal{background:#fff;outline:1px solid #d9d9d9;box-shadow:0 2px 12px #00000014;transition:all .2s ease-out;animation:modalSlideIn .3s ease-out;max-width:400px;min-width:300px;padding:16px 20px}.about-modal.closing{opacity:0;transform:scale(.95) translateY(8px)}.about-content{font-size:.9rem;line-height:1.5;color:#333;text-align:left}.about-content p{margin:0 0 16px}.about-content p:last-child{margin-bottom:0}.about-content .highlight{text-decoration:underline;font-weight:500;color:#333}.legend{display:flex;gap:20px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #e0e0e0}.legend-item{display:flex;align-items:center;gap:8px;font-size:.85rem}.legend-color{width:16px;height:16px}.legend-color.scale-color{background-color:#355e3b}.legend-color.played-color{background-color:#f1e0c5}.about-content ol{margin:0;padding-left:28px}.about-content li{margin-bottom:12px;line-height:1.4}.about-content li:last-child{margin-bottom:0}@keyframes modalSlideIn{0%{opacity:0;transform:scale(.8) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.samples-modal{padding:16px 20px;min-width:280px}.samples-list{display:flex;flex-direction:column;gap:16px}.samples-content{display:flex;align-items:center;gap:16px}.samples-thumbnail-container{flex-shrink:0}.samples-thumbnail{width:48px;height:48px;object-fit:cover;display:block}.samples-play-btn-right{background:#fff;width:40px;height:40px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0}.samples-play-btn-right:hover{background:#f5f5f5}.samples-play-btn-right:focus{outline:none}.samples-play-icon-right{width:24px;height:24px}.samples-text{flex:1;text-align:left}.samples-text h3{margin:0;font-size:1rem;font-weight:600;color:#333}.samples-text p{margin:0;font-size:.9rem;color:#666}.app{min-height:100vh;width:100vw;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:2rem;text-align:center;font-family:DepartureMono,Courier New,monospace}h1{font-size:2.5rem;margin-bottom:2rem;color:#333;font-family:DepartureMono,Courier New,monospace}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}@font-face{font-family:CustomFont;src:url(./fonts/YourFontFile.woff2) format("woff2"),url(./fonts/YourFontFile.woff) format("woff"),url(./fonts/YourFontFile.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:CustomFont;src:url(./fonts/YourFontFile-Bold.woff2) format("woff2"),url(./fonts/YourFontFile-Bold.ttf) format("truetype");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:DepartureMono;src:url(./DepartureMono-Regular-CJuaY0ws.otf) format("opentype");font-weight:400;font-style:normal;font-display:swap}