*{box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(135deg,#1a1a2e,#16213e);min-height:100vh;margin:0;padding:20px;color:#fff}h1{text-align:center;margin-bottom:30px;font-size:2rem;text-shadow:0 2px 10px rgba(0,0,0,.3)}.chord-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:15px;max-width:900px;margin:0 auto}.chord-btn{padding:20px 15px;font-size:1.1rem;font-weight:700;border:none;border-radius:12px;cursor:pointer;transition:all .15s ease;background:linear-gradient(145deg,#3a4a6b,#2a3a5b);color:#fff;box-shadow:0 4px 15px #0000004d}.chord-btn:hover{transform:translateY(-3px);box-shadow:0 6px 20px #0006;background:linear-gradient(145deg,#4a5a7b,#3a4a6b)}.chord-btn:active,.chord-btn.playing{transform:translateY(0);background:linear-gradient(145deg,#e94560,#c73e54);box-shadow:0 2px 10px #e9456080}.controls{max-width:900px;margin:30px auto;display:flex;gap:20px;flex-wrap:wrap;justify-content:center;align-items:center}.control-group{display:flex;align-items:center;gap:10px;background:#ffffff1a;padding:10px 20px;border-radius:10px}label{font-size:.9rem}select,input[type=range]{padding:5px 10px;border-radius:5px;border:none;background:#2a3a5b;color:#fff}input[type=range]{width:100px}.info{text-align:center;margin-top:20px;opacity:.7;font-size:.9rem}.chord-info{max-width:900px;margin:30px auto;background:#ffffff1a;border-radius:12px;padding:20px;text-align:center;min-height:80px;display:flex;flex-direction:column;justify-content:center}.chord-info h2{margin:0 0 10px;font-size:1.5rem;color:#e94560}.chord-info .notes{font-size:1.2rem;margin-bottom:8px}.chord-info .intervals{font-size:.9rem;opacity:.8}.chord-info .description{font-size:.85rem;opacity:.7;margin-top:8px}.mode-tabs{gap:4px!important;padding:6px!important}.mode-btn{padding:8px 16px;border:none;border-radius:8px;cursor:pointer;font-weight:700;font-size:.9rem;background:#ffffff1a;color:#fff9;transition:all .15s ease}.mode-btn:hover{background:#fff3;color:#fff}.mode-btn.active{background:linear-gradient(145deg,#e94560,#c73e54);color:#fff;box-shadow:0 2px 8px #e9456066}.chord-matrix{max-width:100%;margin:0 auto;overflow-x:auto;padding:0 10px}.matrix-table{border-collapse:separate;border-spacing:4px;margin:0 auto}.matrix-table th{padding:8px 6px;font-size:.85rem;color:#ffffffb3;white-space:nowrap;position:sticky}.matrix-table th:first-child{text-align:right;min-width:50px}.matrix-table thead th{position:sticky;top:0;background:#1a1a2e;z-index:1}.matrix-table tbody th{position:sticky;left:0;background:#1a1a2e;z-index:1}.matrix-table td{padding:2px}.matrix-btn{width:100%;padding:10px 4px;font-size:.75rem;font-weight:700;border:none;border-radius:8px;cursor:pointer;transition:all .12s ease;background:linear-gradient(145deg,#3a4a6b,#2a3a5b);color:#fff;box-shadow:0 2px 8px #0000004d;white-space:nowrap;min-width:56px}.matrix-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0006;background:linear-gradient(145deg,#4a5a7b,#3a4a6b)}.matrix-btn:active,.matrix-btn.playing{transform:translateY(0);background:linear-gradient(145deg,#e94560,#c73e54);box-shadow:0 2px 8px #e9456080}.scale-controls{max-width:900px;margin:0 auto 20px;display:flex;gap:15px;justify-content:center;align-items:center;flex-wrap:wrap}.piano-wrapper{max-width:900px;margin:0 auto;overflow-x:auto;padding:10px 0}.piano{display:flex;position:relative;height:180px;margin:0 auto;width:fit-content}.piano-key{border:none;cursor:pointer;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:10px;transition:all .15s ease}.piano-key .key-label{font-size:.7rem;font-weight:700;pointer-events:none}.piano-key .key-degree{font-size:.6rem;opacity:.7;pointer-events:none;margin-top:2px}.piano-key.white{width:44px;height:180px;background:#ddd;color:#333;border-radius:0 0 6px 6px;margin-right:2px;z-index:0}.piano-key.white.in-scale{background:#e8f4ff;box-shadow:0 0 12px #64b4ff80,inset 0 0 8px #64b4ff26;border:1px solid rgba(100,180,255,.4)}.piano-key.white.out-scale{background:#2a2a3a;color:#444}.piano-key.white.root-note{background:#e94560;color:#fff;box-shadow:0 0 18px #e94560b3,inset 0 0 8px #e9456033;border:1px solid rgba(233,69,96,.6);opacity:1}.piano-key.white.playing{background:#ff6b81!important;box-shadow:0 0 25px #ff6b81cc!important}.piano-key.white.chord-highlight{background:#ffe66d!important;color:#333!important;box-shadow:0 0 20px #ffe66db3,0 0 40px #ffe66d4d!important;transform:scaleY(1.02)}.piano-key.black{width:30px;height:110px;background:#222;color:#999;border-radius:0 0 4px 4px;margin-left:-16px;margin-right:-16px;z-index:1}.piano-key.black.in-scale{background:#3a5a8a;color:#def;box-shadow:0 0 10px #64b4ff73;border:1px solid rgba(100,180,255,.35)}.piano-key.black.out-scale{background:#0a0a12;color:#333}.piano-key.black.root-note{background:#c73e54;color:#fff;box-shadow:0 0 14px #e9456099;border:1px solid rgba(233,69,96,.5);opacity:1}.piano-key.black.playing{background:#e94560!important;box-shadow:0 0 20px #e94560cc!important}.piano-key.black.chord-highlight{background:#c7a630!important;color:#fff!important;box-shadow:0 0 16px #ffe66d99,0 0 30px #ffe66d40!important}.scale-info{max-width:900px;margin:20px auto;text-align:center}.scale-info .scale-name{font-size:1.4rem;font-weight:700;color:#e94560;margin-bottom:8px}.scale-info .scale-notes{font-size:1.1rem;letter-spacing:2px;margin-bottom:6px}.scale-info .scale-desc{font-size:.9rem;opacity:.7}.diatonic-chords{max-width:900px;margin:25px auto;text-align:center}.diatonic-chords h3{margin:0 0 15px;font-size:1rem;opacity:.7}.diatonic-grid{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.diatonic-item{display:flex;flex-direction:column;align-items:center;gap:6px}.diatonic-degree{font-size:.8rem;opacity:.6;font-weight:700}.harmonic-func{font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:4px;letter-spacing:.5px}.harmonic-func.func-t{color:#4ecdc4}.harmonic-func.func-sd{color:#ffe66d}.harmonic-func.func-d{color:#e94560}.diatonic-btn{padding:14px 12px;font-size:.95rem;min-width:70px}.diatonic-btn.func-border-t{border-left:3px solid #4ecdc4}.diatonic-btn.func-border-sd{border-left:3px solid #ffe66d}.diatonic-btn.func-border-d{border-left:3px solid #e94560}.loop-controls{max-width:900px;margin:0 auto 20px;display:flex;gap:15px;justify-content:center;align-items:center;flex-wrap:wrap}.progression-slots{max-width:900px;margin:0 auto 25px;display:flex;gap:3px;justify-content:center;flex-wrap:wrap}.slot-wrapper{display:flex;flex-direction:column;align-items:center;gap:3px}.slot-wrapper.bar-start{margin-left:10px}.slot-wrapper.bar-start:first-child{margin-left:0}.slot-bar{font-size:.6rem;opacity:.4;font-weight:700;height:14px}.slot{width:54px;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:8px;font-weight:700;font-size:.75rem;cursor:pointer;transition:all .15s ease;background:linear-gradient(145deg,#3a4a6b,#2a3a5b);color:#fff;box-shadow:0 3px 10px #0000004d;border:2px solid transparent}.slot.empty{background:#ffffff0d;color:#ffffff4d;box-shadow:none;border:2px dashed rgba(255,255,255,.15);font-size:1.5rem}.slot.active{border-color:#e94560;background:linear-gradient(145deg,#e94560,#c73e54);box-shadow:0 0 20px #e9456080;transform:scale(1.05)}.slot:not(.empty):hover{opacity:.7}.slot-chord{font-size:.75rem;line-height:1}.slot-sub{display:flex;align-items:center;gap:3px;line-height:1}.slot-bass{font-size:.6rem;color:#ffd166}.slot-oct{font-size:.55rem;opacity:.6}.slot-bass-select{width:46px;height:18px;padding:0 2px;border:none;border-radius:4px;cursor:pointer;font-size:.5rem;background:#ffffff14;color:#ffffff80;transition:background .1s}.slot-bass-select.has-bass{background:#ffd16633;color:#ffd166}.slot-bass-select:hover{background:#fff3;color:#fff}.slot-bass-select option{background:#2a3a5b;color:#fff}.slot-oct-controls{display:flex;gap:2px}.slot-oct-btn{width:22px;height:18px;border:none;border-radius:4px;cursor:pointer;font-size:.5rem;background:#ffffff14;color:#ffffff80;padding:0;transition:background .1s}.slot-oct-btn:hover{background:#fff3;color:#fff}.loop-chord-palette{max-width:900px;margin:0 auto 20px;text-align:center}.loop-chord-palette h3{margin:0 0 12px;font-size:.9rem;opacity:.6}.palette-grid{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.palette-row{display:flex;gap:3px}.palette-btn{padding:12px 10px;font-size:.9rem;min-width:55px}.palette-add-btn{padding:0 8px;border:none;border-radius:8px;cursor:pointer;font-size:1.1rem;font-weight:700;background:#ffffff1a;color:#ffffff80;transition:all .12s ease}.palette-add-btn:hover{background:#4ecdc44d;color:#fff}.loop-matrix{max-width:1000px;margin:0 auto 20px}.loop-matrix summary{cursor:pointer;text-align:center;font-size:.9rem;opacity:.6;padding:6px;-webkit-user-select:none;user-select:none}.loop-matrix summary:hover{opacity:1}.loop-matrix .chord-matrix{margin-top:12px}.loop-matrix-status{text-align:center;font-size:.75rem;color:#ffd166;min-height:1em}