*{box-sizing:border-box;margin:0;padding:0}body{align-items:center;background:#1a1a2e;display:flex;flex-direction:column;font-family:SF Mono,Menlo,Consolas,monospace;height:100vh;overflow:auto;padding:24px}h1{color:#e0e0e0;font-weight:300;letter-spacing:2px;margin-bottom:8px}.beta-badge{background:#2e7d32;border-radius:4px;color:#fff;font-size:.4em;font-weight:600;letter-spacing:.05em;padding:2px 8px;vertical-align:super}#tonnetz-2d-container{align-items:center;display:flex;justify-content:center;min-height:120px;overflow:hidden;position:relative}#tonnetz-2d-container svg{height:auto;max-width:100%}#main-layout{align-items:flex-start;display:flex;flex:1;gap:12px;max-width:1600px;min-height:0;width:100%}.main-content{align-items:center;flex-direction:column;height:100%;min-width:0;overflow:hidden}.grid-wrapper,.main-content{display:flex;flex:1;max-width:100%;min-height:0}.grid-wrapper{align-items:stretch;gap:8px;width:100%}.grid-left-col{display:flex;flex:1;flex-direction:column;gap:8px;max-width:100%;min-width:0}.grid-wrapper.no-torus .grid-left-col{flex-direction:row;flex-wrap:wrap}.grid-wrapper.no-torus .grid-ctrls{width:100%}.grid-wrapper.no-torus #tonnetz-2d-container{flex:1;min-width:0;order:1}.grid-wrapper.no-torus .grid-3d-container{min-height:0}.grid-wrapper.all-three{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr 1fr}.grid-wrapper.all-three .grid-left-col{display:contents}.grid-wrapper.all-three .grid-ctrls{grid-column:1/-1;grid-row:1}.grid-wrapper.all-three .grid-3d-container{grid-column:1;grid-row:2/4;min-height:300px}.grid-wrapper.all-three #tonnetz-2d-container{grid-column:2;grid-row:2}.grid-wrapper.all-three .grid-4d-container{grid-column:2;grid-row:3}.grid-panel{border:1px solid hsla(0,0%,100%,.08);border-radius:4px;overflow:hidden}.grid-3d-container{flex:1;min-height:300px;position:relative}.grid-3d-container canvas{display:block;height:100%;width:100%}#tonnetz-2d-container.hidden,.grid-3d-container.hidden{display:none}.scene-ctrls{bottom:12px;flex-wrap:wrap;left:12px;max-width:calc(100% - 24px);position:absolute;z-index:10}.grid-ctrls,.scene-ctrls{align-items:center;display:flex;gap:4px}.grid-ctrls{padding:4px 0}.reflate-indicator{background:#000;border-radius:50%;display:none;height:8px;margin-left:4px;width:8px}.reflate-indicator.active{display:inline-block}.reflate-indicator.flash{animation:reflate-pulse 1.5s ease-out}@keyframes reflate-pulse{0%{background:#5ab87a}to{background:#000}}.reflate-3d-label{color:transparent;font-family:SF Mono,Menlo,Consolas,monospace;font-size:11px;left:10px;pointer-events:none;position:absolute;top:8px;z-index:1}.reflate-3d-label.flash{animation:reflate-text-pulse 1.5s ease-out}@keyframes reflate-text-pulse{0%{color:#5ab87a}to{color:transparent}}.scene-btn{background:rgba(30,40,70,.7);border:1px solid rgba(140,160,200,.2);border-radius:4px;color:#b0bcd0;cursor:pointer;font-family:SF Mono,Menlo,Consolas,monospace;font-size:11px;padding:5px 10px;transition:all .2s;user-select:none}.scene-btn:hover{background:rgba(50,65,110,.8);color:#d0d8e8}.scene-btn.active{background:rgba(60,100,180,.5);border-color:rgba(100,150,220,.5);color:#e0e8f4}.scene-btn:disabled{cursor:not-allowed;opacity:.35;pointer-events:none}.scene-btn.enharmonic-child{border-style:dashed;font-size:10px;opacity:.8;padding:2px 5px}.scene-btn.enharmonic-child.active{background:rgba(160,140,200,.2);border-color:rgba(160,140,200,.45);color:#c8b8e8}.scene-btn-label,.scene-input{align-items:center;color:#8a8677;display:flex;font-family:SF Mono,Menlo,Consolas,monospace;font-size:10px;gap:4px;letter-spacing:.03em}.scene-input input[type=number]{background:hsla(0,0%,100%,.06);border:1px solid hsla(0,0%,100%,.12);border-radius:3px;color:#c8c4b8;font-family:SF Mono,Menlo,Consolas,monospace;font-size:11px;outline:none;padding:3px 2px;text-align:center;width:36px}.scene-input input[type=number]:focus{border-color:hsla(42,48%,59%,.5)}.scene-input input[type=range]{-webkit-appearance:none;appearance:none;background:hsla(0,0%,100%,.1);border-radius:2px;height:4px;outline:none;width:70px}.scene-input input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#e8d5a0;border:none;border-radius:50%;cursor:pointer;height:12px;width:12px}.hidden{display:none}.sidebar-header{color:#889;font-size:11px;font-weight:600;letter-spacing:.5px;margin-bottom:0}.sidebar-footnote{color:#556;font-size:10px;margin-bottom:4px;text-align:right}.spelling-sidebar{align-self:stretch;background:#12122a;border:1px solid #333;border-radius:4px;color:#667;flex:0 0 200px;font-family:SF Mono,Menlo,Consolas,monospace;font-size:11px;line-height:1.6;max-width:200px;min-width:200px;overflow:hidden;padding:8px 10px;white-space:nowrap;width:200px}.spelling-table{border-collapse:collapse}.spelling-table td{padding:0 2px;white-space:nowrap}.spelling-table td.spelling-key{font-weight:400;padding-right:6px}.spelling-table td.spell-name{padding-right:2px;text-align:right}.spelling-table td.spell-score{padding-right:6px;text-align:right}.spelling-table td.spelling-key:after{content:""}.spelling-table tr.active{color:#8af}.spelling-table tr.active td.spelling-key{color:#ccc}.spelling-table tr.resolved{color:#668}.spelling-table td.spelling-candidate{opacity:.5}.spelling-table td.spelling-candidate.winner{font-weight:700;opacity:1}.spelling-table tr.active td.spelling-candidate.winner{color:#cef}.spelling-row{align-items:baseline;display:flex;flex-wrap:wrap;gap:0}.spelling-row.active{color:#8af}.spelling-row.resolved{color:#668}.spelling-key{flex-shrink:0;font-weight:600}.spelling-key:after{content:": ";font-weight:400}.spelling-row.active .spelling-key{color:#adf}.spelling-candidates{display:inline}.spelling-sep{opacity:.3}.spelling-candidate{opacity:.5}.spelling-candidate.winner{font-weight:700;opacity:1}.spelling-row.active .spelling-candidate.winner{color:#cef}.sidebar-expand-btn{background:transparent;border:1px dashed #334;border-radius:3px;color:#668;cursor:pointer;display:block;font-family:inherit;font-size:10px;letter-spacing:.5px;margin:4px 0;padding:2px 0;width:100%}.sidebar-expand-btn:hover{border-color:#558;color:#8af}#sidebar-collapsible{display:none}.spelling-sidebar.expanded #sidebar-collapsible{display:block}.key-slot.sidebar-hidden{display:none}.spelling-sidebar.expanded .key-slot.sidebar-hidden{display:flex}.sidebar-section-label{color:#556;font-size:10px;letter-spacing:1px;margin-bottom:2px;text-transform:uppercase}.sidebar-divider{border-top:1px solid #333;margin:6px 0}svg{display:block}.tri{stroke:#999;stroke-width:.8;transition:stroke .15s,stroke-width .15s,fill-opacity .15s,filter .15s}.tri.triad-active{filter:saturate(1.8) brightness(1.05)}.note-circle{fill:#d8dce0;stroke:#667;stroke-width:1}.note-circle.note-active{fill:#d8dce0;stroke:#99a;stroke-width:1.5}.note-circle.note-resonating{fill:#e8ecf0;stroke:#bbc;stroke-width:1.5}.note-circle.note-held{fill:#f0f4f8;stroke:#bbc;stroke-width:1.5}.note-circle.note-modified-sharp{fill:#dde0e4;stroke:#aab;stroke-width:1.5}.note-circle.note-modified-flat{fill:#c8ccd0;stroke:#889;stroke-width:1.5}.note-held-ring{fill:none;stroke:#ffd54f;stroke-opacity:.85;pointer-events:none}.note-text{font-size:11px;fill:#333}.chord-label,.note-text{font-weight:600;text-anchor:middle;dominant-baseline:central}.chord-label{font-size:10px;fill:#555;pointer-events:none}.chord-label.hidden{display:none}.toggle-btn{background:rgba(30,40,70,.7);border:1px solid rgba(140,160,200,.2);border-radius:4px;color:#b0bcd0;cursor:pointer;font-family:SF Mono,Menlo,Consolas,monospace;font-size:13px;margin-top:12px;padding:6px 16px;user-select:none}.toggle-btn:hover{background:rgba(50,65,110,.8);color:#d0d8e8}.toggle-btn.active{background:rgba(60,100,180,.5);border-color:rgba(100,150,220,.5);color:#e0e8f4}.toggle-btn:disabled{cursor:not-allowed;opacity:.35;pointer-events:none}.key-selector{flex-direction:column;gap:8px;margin-bottom:16px}.button-row,.key-selector{align-items:center;display:flex}.button-row{gap:6px}.accidental-btn,.note-btn{align-items:center;background:#2a2a4e;border:1.5px solid #555;border-radius:50%;color:#ccc;cursor:pointer;display:flex;font-family:SF Mono,Menlo,Consolas,monospace;font-size:13px;font-weight:600;height:34px;justify-content:center;padding:0;transition:background .15s,border-color .15s;user-select:none;-webkit-user-select:none;width:34px}.accidental-btn:hover,.note-btn:hover{background:#3a3a5e;border-color:#888}.accidental-btn.active,.note-btn.active{background:#4a5a8e;border-color:#8af;color:#fff}.mode-select{background:#2a2a4e;border:1px solid #555;border-radius:4px;color:#ccc;cursor:pointer;font-family:SF Mono,Menlo,Consolas,monospace;font-size:13px;margin-top:12px;outline:none;padding:5px 10px}.mode-select:hover{border-color:#888}.mode-select.loading{border-color:#6af;opacity:.5;pointer-events:none}.mode-select option{background:#1a1a2e;color:#ccc}.row-label{color:#888;font-size:12px;letter-spacing:.5px;margin-right:2px}.interval-btn{font-weight:700;letter-spacing:.5px;min-width:40px}#togglem3.active{background:#1565c0;border-color:#42a5f5;color:#fff}#toggleM3.active{background:#c6b700;border-color:#f9f922;color:#fff}#toggleP5.active{background:#616161;border-color:#aaa;color:#fff}#piano-section{align-items:center;display:flex;flex-direction:column;flex-shrink:0;gap:8px;margin-top:auto;padding-top:8px;width:100%}.white-key.tonnetz-active{background:linear-gradient(145deg,#64b5f6,#90caf9)!important;border-color:#42a5f5!important;box-shadow:0 0 10px rgba(66,165,245,.5)!important}.black-key.tonnetz-active{background:linear-gradient(145deg,#1565c0,#1976d2)!important;border-color:#42a5f5!important;box-shadow:0 0 10px rgba(21,101,192,.5)!important}.white-key.tonnetz-midi-held{background:linear-gradient(145deg,#ffa726,#ffcc80)!important;border-color:#ef6c00!important;box-shadow:0 0 10px rgba(255,167,38,.5)!important}.black-key.tonnetz-midi-held{background:linear-gradient(145deg,#e65100,#ef6c00)!important;border-color:#ffa726!important;box-shadow:0 0 10px rgba(230,81,0,.5)!important}.midi-status{color:#888;font-size:11px;letter-spacing:.5px}.midi-status.connected{color:#81c784}.grid-input{align-items:center;color:#ccc;display:flex;font-size:13px;gap:4px}.grid-input input[type=number]{background:#2a2a4e;border:1px solid #555;border-radius:4px;color:#ccc;font-family:SF Mono,Menlo,Consolas,monospace;font-size:13px;outline:none;padding:5px 4px;text-align:center;width:48px}.grid-input input[type=number]:focus{border-color:#8af}.grid-input input[type=range]{-webkit-appearance:none;appearance:none;background:hsla(0,0%,100%,.1);border-radius:2px;height:4px;outline:none;width:70px}.grid-input input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#e8d5a0;border:none;border-radius:50%;cursor:pointer;height:12px;width:12px}.grid-input input[type=range]::-moz-range-thumb{background:#e8d5a0;border:none;border-radius:50%;cursor:pointer;height:12px;width:12px}.free-mode-row{flex-wrap:wrap;justify-content:center;margin-bottom:8px}.inferred-key-display{color:#8af;font-size:13px;height:22px;letter-spacing:.5px;line-height:22px;min-width:80px;padding:4px 10px;text-align:center}.controls-shared{align-items:center;display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.controls-shared .button-row,.controls-shared .direction-row{flex-wrap:wrap;justify-content:center}.controls-shared .direction-row{align-items:center;display:flex;flex-basis:100%;gap:6px}.debug-spectrum-row{align-items:stretch;display:flex;gap:12px;margin-top:12px;max-width:900px}.accumulator-debug{background:#12122a;border:1px solid #333;border-radius:4px;color:#8af;font-family:SF Mono,Menlo,Consolas,monospace;font-size:11px;line-height:1.4;margin-top:6px;overflow:hidden;padding:8px 10px;white-space:pre-wrap}.accumulator-debug .dbg-label{color:#556;font-size:10px;letter-spacing:.5px;text-transform:uppercase}.accumulator-debug .dbg-note{color:#adf;font-weight:600}.accumulator-debug .dbg-dim{color:#557}.debug-sliders-panel{align-self:flex-start;display:flex;flex-direction:row;flex-wrap:wrap;gap:6px;margin-left:10px;padding:6px 8px}.harmonic-debug-box{background:#0e0e22ee;border:1px dashed #444;border-radius:4px;display:flex;flex-direction:column;gap:2px;padding:6px 8px}.debug-box-label{color:#556;font-size:9px;letter-spacing:.5px;margin-bottom:2px;text-transform:uppercase}.harmonic-debug-box .grid-input{font-size:11px}.harmonic-debug-box input[type=range]{width:80px}.debug-notice{color:#8a8677;font-size:13px;line-height:1.4;margin:0;max-width:220px}.debug-notice a{color:#e8d5a0;text-decoration:none}.debug-notice a:hover{text-decoration:underline}.sf-load-overlay{align-items:center;background:rgba(0,0,0,.4);display:flex;inset:0;justify-content:center;position:fixed;z-index:9999}.sf-load-popover{background:#1a1a2e;border:1px solid hsla(0,0%,100%,.15);border-radius:8px;color:#6af;font-family:SF Mono,Menlo,Consolas,monospace;font-size:16px;padding:24px 36px;text-align:center}.sf-load-bar{background:hsla(0,0%,100%,.1);border-radius:2px;height:4px;margin-top:12px;overflow:hidden;width:200px}.sf-load-bar-fill{animation:sf-load-slide 1.2s ease-in-out infinite;background:#6af;border-radius:2px;height:100%;width:40%}@keyframes sf-load-slide{0%{transform:translateX(-100%)}to{transform:translateX(350%)}}.sf-load-hint{color:#8a8677;font-size:12px;margin-top:8px}.key-display{display:flex;flex-direction:column;font-family:SF Mono,Menlo,Consolas,monospace;gap:4px;padding:4px 0}.key-slot{align-items:center;background:#1a1a35;border:1px solid #334;border-radius:4px;display:flex;gap:6px;padding:2px 8px}.key-slot.secondary{background:#1e1a28;border-color:#443}.key-label{color:#556;flex-shrink:0;font-size:9px;letter-spacing:.5px;text-transform:uppercase}.key-slot.secondary .key-label{color:#665}.key-value{color:#8af;font-size:13px;letter-spacing:.5px}.key-slot.secondary .key-value{color:#a9a}.key-slot.chord{background:#1a2420;border-color:#343}.key-slot.chord .key-label{color:#565}.key-slot.chord .key-value{color:#8ca;font-size:12px;letter-spacing:1px}.key-slot.chord-history{background:#161a18;border:1px solid #333;border-radius:4px;display:flex;min-height:20px;overflow-x:hidden;padding:2px 4px}.chord-list{display:flex;flex-wrap:nowrap;gap:6px}.chord-item{color:#6a8;font-size:10px;opacity:.7;white-space:nowrap}.chord-item.latest{color:#dfe;font-weight:700;opacity:1}.spectrum-container{align-items:flex-end;background:#12122a;border:1px solid #333;border-radius:4px;display:flex;height:160px;margin-top:8px;padding:8px 8px 4px;width:100%}.spectrum-analyzer{height:100%;width:100%}.spectrum-bar{transition:height .06s linear,opacity .06s linear}.spectrum-label{font-family:SF Mono,Menlo,Consolas,monospace;font-size:10px;fill:#8af;text-anchor:middle}.semitone-arrow{pointer-events:none}.note-text.note-unrealized{fill:#666;font-weight:400}.note-circle.note-unrealized{fill:#2a2a2a;stroke:#444}.note-glow{mix-blend-mode:screen;pointer-events:none}.midi-player-row{flex-wrap:wrap;justify-content:center;margin-bottom:8px;position:relative}.midi-import-btn{cursor:pointer}.midi-file-name{color:#8af;font-size:12px;text-align:center}.midi-file-name:empty{display:none}#midiProgress{-webkit-appearance:none;appearance:none;background:hsla(0,0%,100%,.1);border-radius:2px;height:4px;outline:none;width:240px}#midiProgress::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#e8d5a0;border:none;border-radius:50%;cursor:pointer;height:12px;width:12px}#midiProgress::-moz-range-thumb{background:#e8d5a0;border:none;border-radius:50%;cursor:pointer;height:12px;width:12px}#midiTempoSlider{width:160px}#midiTempoDisplay{min-width:36px;text-align:right}.midi-time{color:#888;font-family:SF Mono,Menlo,Consolas,monospace;font-size:12px;min-width:90px;text-align:center}.midi-player-row .toggle-btn.active{background:#2e7d32;border-color:#66bb6a}.grid-4d-container{background:#08080f;border:1px solid hsla(0,0%,100%,.08);border-radius:4px;flex:1;min-height:300px;min-width:300px;overflow:hidden;position:relative}.grid-4d-container.hidden{display:none}.grid-4d-container canvas{display:block;height:100%;width:100%}.torus-hover-popup{left:50%;opacity:0;pointer-events:none;position:absolute;text-align:center;top:50%;transform:translate(-50%,-50%);transition:opacity .25s;z-index:10}.torus-hover-popup.visible{opacity:1}.torus-hover-name{font-family:serif;font-size:42px;font-weight:700;text-shadow:0 0 30px rgba(0,0,0,.9)}.torus-hover-notes{color:#b0ac9f;font-family:SF Mono,Menlo,Consolas,monospace;font-size:12px;letter-spacing:.15em;margin-top:4px}.torus-overlay-controls{align-items:center;backdrop-filter:blur(6px);background:rgba(8,8,15,.7);border-radius:4px;bottom:8px;display:flex;flex-wrap:wrap;gap:6px;left:8px;padding:6px 8px;position:absolute;right:8px;z-index:10}.torus-ctrl-btn{background:hsla(0,0%,100%,.06);border:1px solid hsla(0,0%,100%,.12);border-radius:3px;color:#c8c4b8;cursor:pointer;font-family:SF Mono,Menlo,Consolas,monospace;font-size:10px;padding:4px 10px;transition:all .15s}.torus-ctrl-btn:hover{background:hsla(0,0%,100%,.12);color:#f0ece4}.torus-ctrl-btn.active{background:hsla(42,48%,59%,.2);border-color:hsla(42,48%,59%,.4);color:#e8d5a0}.torus-slider-wrap{align-items:center;display:flex;gap:4px}.torus-slider-wrap label{color:#8a8677;font-size:10px;letter-spacing:.05em;white-space:nowrap}.torus-slider-wrap input[type=range]{-webkit-appearance:none;appearance:none;background:hsla(0,0%,100%,.1);border-radius:2px;height:3px;outline:none;width:80px}.torus-slider-wrap input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#e8d5a0;border:none;border-radius:50%;cursor:pointer;height:10px;width:10px}.torus-slider-wrap input[type=range]::-moz-range-thumb{background:#e8d5a0;border:none;border-radius:50%;cursor:pointer;height:10px;width:10px}.torus-note-label{color:#e8d5a0;font-size:10px;letter-spacing:.03em;min-width:24px}.torus-ctrl-break{flex-basis:100%;height:0}@media (max-width:1200px){.mode-select{max-width:200px}}@media (max-width:768px){#spelling-midi-keys{display:none}.debug-sliders-panel{flex-direction:column;margin-left:0;max-width:100vw;overflow-x:auto;padding:4px}.harmonic-debug-box{max-width:100%;min-width:0}.harmonic-debug-box input[type=range]{min-width:0;width:100%}.main-content{min-width:60%}.spelling-sidebar{flex:0 1 200px!important;min-width:100px!important}.grid-wrapper.no-torus .grid-left-col{flex-direction:column}.grid-wrapper.no-torus #tonnetz-3d-container{order:-1}}@media (max-width:480px){body{padding:8px}#main-layout{flex-direction:column;gap:8px}.spelling-sidebar{display:none!important}.main-content{min-width:0!important;width:100%}#grid-wrapper,#grid-wrapper.all-three,#grid-wrapper.no-torus{display:flex!important;flex-direction:column!important;overflow-y:auto}#grid-wrapper .grid-left-col,#grid-wrapper.all-three .grid-left-col,#grid-wrapper.no-torus .grid-left-col{display:flex!important;flex-direction:column!important}#tonnetz-3d-container{min-height:250px;order:1}#tonnetz-2d-container{min-height:150px;order:2}#tonnetz-4d-container{min-height:250px;min-width:0!important;order:3}.debug-sliders-panel{order:4}#piano-section{order:5}}.piano-keyboard{background:#3a3a3a!important;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.1);flex-shrink:0;height:110px;margin:10px auto;overflow-x:auto;overflow-y:hidden;padding:10px;position:relative;scrollbar-color:#cbd5e0 #f7fafc;scrollbar-width:thin;width:100%}.piano-keyboard::-webkit-scrollbar{height:8px}.piano-keyboard::-webkit-scrollbar-track{background:#f7fafc;border-radius:4px}.piano-keyboard::-webkit-scrollbar-thumb{background:#cbd5e0;border-radius:4px}.piano-keyboard::-webkit-scrollbar-thumb:hover{background:#a0aec0}.piano-keys{display:grid;grid-template-columns:repeat(42,1fr);height:100px;min-width:1200px;position:relative}.white-key{align-items:flex-end;background:linear-gradient(145deg,#fff,#f7fafc);border:1px solid #cbd5e0;border-radius:0 0 8px 8px;color:#4a5568;cursor:pointer;display:flex;font-size:12px;font-weight:600;justify-content:center;padding-bottom:8px;position:relative;transition:all .3s ease}.key-enharmonic-note:hover{border-radius:3px;box-shadow:1px 1px 5px #000}.white-key:hover{background:linear-gradient(145deg,#edf2f7,#e2e8f0);box-shadow:0 4px 12px rgba(0,0,0,.15);transform:translateY(2px)}.black-key{align-items:flex-end;background:linear-gradient(145deg,#2d3748,#1a202c);border:1px solid #1a202c;border-radius:0 0 4px 4px;color:#e2e8f0;cursor:pointer;display:flex;font-size:10px;font-weight:600;height:60px;justify-content:center;padding-bottom:4px;position:absolute;transition:all .3s ease;width:24px;z-index:2}.black-key:hover{background:linear-gradient(145deg,#4a5568,#2d3748);box-shadow:0 4px 12px rgba(0,0,0,.3);transform:scaleY(1.05)}.black-key.chord-tone-0,.white-key.chord-tone-0{background:linear-gradient(145deg,#e53e3e,#c53030)!important;border-color:#9b2c2c!important;box-shadow:0 0 15px rgba(229,62,62,.5)!important;color:#fff!important;transform:scale(1.05)!important}.black-key.chord-tone-1,.white-key.chord-tone-1{background:linear-gradient(145deg,#ed8936,#dd6b20)!important;border-color:#c05621!important;box-shadow:0 0 15px rgba(237,137,54,.5)!important;color:#fff!important;transform:scale(1.05)!important}.black-key.chord-tone-2,.white-key.chord-tone-2{background:linear-gradient(145deg,#ecc94b,#d69e2e)!important;border-color:#b7791f!important;box-shadow:0 0 15px rgba(236,201,75,.5)!important;color:#fff!important;transform:scale(1.05)!important}.black-key.chord-tone-3,.white-key.chord-tone-3{background:linear-gradient(145deg,#48bb78,#38a169)!important;border-color:#2f855a!important;box-shadow:0 0 15px rgba(72,187,120,.5)!important;color:#fff!important;transform:scale(1.05)!important}.black-key.chord-tone-4,.white-key.chord-tone-4{background:linear-gradient(145deg,#4299e1,#3182ce)!important;border-color:#2b6cb0!important;box-shadow:0 0 15px rgba(66,153,225,.5)!important;color:#fff!important;transform:scale(1.05)!important}.black-key.chord-tone-5,.white-key.chord-tone-5{background:linear-gradient(145deg,#9f7aea,#805ad5)!important;border-color:#553c9a!important;box-shadow:0 0 15px rgba(159,122,234,.5)!important;color:#fff!important;transform:scale(1.05)!important}.black-key.chord-tone-6,.white-key.chord-tone-6{background:linear-gradient(145deg,#d53f8c,#b83280)!important;border-color:#97266d!important;box-shadow:0 0 15px rgba(213,63,140,.5)!important;color:#fff!important;transform:scale(1.05)!important}#show-computer-keyboard,#show-fretboard,#show-piano-keyboard{align-items:center;background:rgba(30,41,59,.9);border-color:#555;border-radius:30px;color:#fff;cursor:pointer;display:flex;font-size:18px;height:40px;justify-content:center;margin:0 4px;padding:24px;transition:all .2s ease;width:40px}#show-computer-keyboard:hover,#show-fretboard:hover,#show-piano-keyboard:hover{background:#404040;transform:translateY(-1px)}#show-computer-keyboard.active,#show-fretboard.active,#show-piano-keyboard.active{background:linear-gradient(145deg,#4299e1,#3182ce);border-color:#0d6efd;color:#fff}.piano-keyboard-readonly{background:#3a3a3a!important;background:#f7fafc;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.1);display:none;height:50px;margin:10px auto;overflow:hidden;padding:5px;position:relative;width:100%}.piano-keys-readonly{display:grid;grid-template-columns:repeat(49,1fr);height:40px;position:relative;width:100%}.piano-keys-readonly .white-key-readonly{align-items:flex-end;background:linear-gradient(145deg,#fff,#f7fafc);border:1px solid #cbd5e0;border-radius:0 0 4px 4px;color:#4a5568;cursor:pointer;display:flex;font-size:8px;font-weight:500;justify-content:center;padding-bottom:2px;position:relative;transition:all .2s ease;user-select:none}.piano-keys-readonly .white-key-readonly:hover{background:linear-gradient(145deg,#edf2f7,#e2e8f0)}.piano-keys-readonly .black-key-readonly{align-items:flex-end;background:linear-gradient(145deg,#2d3748,#1a202c);border:1px solid #1a202c;border-radius:0 0 3px 3px;color:#e2e8f0;cursor:pointer;display:flex;font-size:7px;font-weight:500;height:28px;justify-content:center;padding-bottom:2px;position:absolute;transition:all .2s ease;user-select:none;width:1.22449%;z-index:2}.piano-keys-readonly .black-key-readonly:hover{background:linear-gradient(145deg,#4a5568,#2d3748)}.piano-keys-readonly .black-key-readonly.chord-tone-0,.piano-keys-readonly .white-key-readonly.chord-tone-0{background:linear-gradient(145deg,#e53e3e,#c53030)!important;border-color:#9b2c2c!important;box-shadow:0 0 8px rgba(229,62,62,.4)!important;color:#fff!important}.piano-keys-readonly .black-key-readonly.chord-tone-1,.piano-keys-readonly .white-key-readonly.chord-tone-1{background:linear-gradient(145deg,#ed8936,#dd6b20)!important;border-color:#c05621!important;box-shadow:0 0 8px rgba(237,137,54,.4)!important;color:#fff!important}.piano-keys-readonly .black-key-readonly.chord-tone-2,.piano-keys-readonly .white-key-readonly.chord-tone-2{background:linear-gradient(145deg,#ecc94b,#d69e2e)!important;border-color:#b7791f!important;box-shadow:0 0 8px rgba(236,201,75,.4)!important;color:#fff!important}.piano-keys-readonly .black-key-readonly.chord-tone-3,.piano-keys-readonly .white-key-readonly.chord-tone-3{background:linear-gradient(145deg,#48bb78,#38a169)!important;border-color:#2f855a!important;box-shadow:0 0 8px rgba(72,187,120,.4)!important;color:#fff!important}.piano-keys-readonly .black-key-readonly.chord-tone-4,.piano-keys-readonly .white-key-readonly.chord-tone-4{background:linear-gradient(145deg,#4299e1,#3182ce)!important;border-color:#2b6cb0!important;box-shadow:0 0 8px rgba(66,153,225,.4)!important;color:#fff!important}.piano-keys-readonly .black-key-readonly.chord-tone-5,.piano-keys-readonly .white-key-readonly.chord-tone-5{background:linear-gradient(145deg,#9f7aea,#805ad5)!important;border-color:#553c9a!important;box-shadow:0 0 8px rgba(159,122,234,.4)!important;color:#fff!important}.piano-keys-readonly .black-key-readonly.chord-tone-6,.piano-keys-readonly .white-key-readonly.chord-tone-6{background:linear-gradient(145deg,#d53f8c,#b83280)!important;border-color:#97266d!important;box-shadow:0 0 8px rgba(213,63,140,.4)!important;color:#fff!important}