.piano-container[data-v-42cb2b74]{background:#f9f9f9;border:3px solid #000;padding:24px;font-family:Space Mono,monospace;position:relative}.piano-header[data-v-42cb2b74]{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;display:flex}.header-left[data-v-42cb2b74]{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.piano-label[data-v-42cb2b74]{color:#fff;letter-spacing:1px;background:#000;padding:4px 8px;font-size:12px;font-weight:700}.piano-status[data-v-42cb2b74]{color:#3c1950;letter-spacing:1px;background:#f8ccd1;border:2px solid #000;padding:3px 8px;font-size:11px;font-weight:700}.open-chords-btn[data-v-42cb2b74]{color:#fff;cursor:pointer;letter-spacing:1px;background:#3c1950;border:2.5px solid #000;align-items:center;gap:6px;padding:6px 14px;font-family:Space Mono,monospace;font-size:12px;font-weight:700;transition:all .15s;display:inline-flex;box-shadow:4px 4px #000}.open-chords-btn[data-v-42cb2b74]:hover{background:#000;transform:translate(-1px,-1px);box-shadow:5px 5px #000}.open-chords-btn[data-v-42cb2b74]:active{transform:translate(2px,2px);box-shadow:2px 2px #000}.btn-icon[data-v-42cb2b74]{color:#f8ccd1}.pinned-pill[data-v-42cb2b74]{color:#000;background:#f8ccd1;border:1.5px solid #000;margin-left:4px;padding:1px 6px;font-size:10px;font-weight:700}.piano-keyboard[data-v-42cb2b74]{-webkit-user-select:none;user-select:none;background:#f8ccd1;border:3px solid #000;display:flex;position:relative;box-shadow:10px 10px #000}.white-key[data-v-42cb2b74]{cursor:pointer;background:#fff;border-right:3px solid #000;flex-direction:column;flex:1;justify-content:flex-end;align-items:center;height:210px;padding-bottom:10px;transition:background-color .15s,top .15s;display:flex;position:relative;top:0}.white-key[data-v-42cb2b74]:last-of-type{border-right:none}.white-key[data-v-42cb2b74]:hover:not(:has(.black-key:hover)){background:#f8ccd1;top:5px}.white-key:hover:not(:has(.black-key:hover)) .black-key[data-v-42cb2b74]{top:-5px}.white-key[data-v-42cb2b74]:has(.black-key:hover){background:#fff;transform:none}.black-key[data-v-42cb2b74]{cursor:pointer;z-index:10;background:#3c1950;border:3px solid #000;border-top:none;flex-direction:column;justify-content:flex-end;align-items:center;width:65%;height:135px;padding-bottom:6px;transition:background-color .15s,top .15s;display:flex;position:absolute;top:0;right:-1.5px;transform:translate(50%)}.black-key[data-v-42cb2b74]:hover{background:#000}.note-name[data-v-42cb2b74]{color:#777;margin-bottom:3px;font-family:JetBrains Mono,monospace;font-size:9px;font-weight:500;line-height:1}.key-label[data-v-42cb2b74]{color:#3c1950;font-family:JetBrains Mono,monospace;font-size:13px;font-weight:700;line-height:1}.black-key .note-name[data-v-42cb2b74]{color:#ffffff80;font-size:8px}.black-key .key-label[data-v-42cb2b74]{color:#fff;font-size:12px}.key-pressed[data-v-42cb2b74]{background:#3c1950!important}.key-pressed .key-label[data-v-42cb2b74],.key-pressed .note-name[data-v-42cb2b74]{color:#fff!important}.black-key.key-pressed[data-v-42cb2b74]{box-shadow:inset 0 0 10px #f8ccd1;background:#000!important}.black-key.key-pressed .key-label[data-v-42cb2b74]{color:#f8ccd1!important}.white-key.chord-highlighted[data-v-42cb2b74]{background:#fce4e8!important;box-shadow:inset 0 -12px #3c1950!important}.white-key.chord-highlighted .key-label[data-v-42cb2b74]{color:#000;font-weight:800}.black-key.chord-highlighted[data-v-42cb2b74]{background:#5a2675!important;border-color:#000!important;box-shadow:inset 0 0 10px #f8ccd1!important}.black-key.chord-highlighted .key-label[data-v-42cb2b74]{color:#f8ccd1!important}.pinned-chords-shelf[data-v-42cb2b74]{background:#fff;border:3px solid #000;margin-top:20px;box-shadow:6px 6px #000}.shelf-header[data-v-42cb2b74]{color:#fff;letter-spacing:1px;background:#000;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding:8px 12px;font-size:11px;font-weight:700;display:flex}.shelf-title-group[data-v-42cb2b74]{align-items:center;gap:8px;display:flex}.shelf-tag[data-v-42cb2b74]{color:#fff;background:#3c1950;border:1px solid #fff;padding:2px 6px}.shelf-count[data-v-42cb2b74]{color:#f8ccd1}.shelf-active-hint[data-v-42cb2b74]{color:#f8ccd1;font-size:10px}.shelf-active-hint strong[data-v-42cb2b74]{color:#fff;text-decoration:underline}.shelf-actions[data-v-42cb2b74]{gap:6px;display:flex}.shelf-btn[data-v-42cb2b74]{cursor:pointer;letter-spacing:1px;border:1.5px solid #000;padding:4px 8px;font-family:Space Mono,monospace;font-size:10px;font-weight:700}.shelf-btn.add-btn[data-v-42cb2b74]{color:#000;background:#f8ccd1}.shelf-btn.add-btn[data-v-42cb2b74]:hover{background:#fff}.shelf-btn.clear-btn[data-v-42cb2b74]{color:#fff;background:#f55}.shelf-btn.clear-btn[data-v-42cb2b74]:hover{background:#c00}.empty-shelf[data-v-42cb2b74]{text-align:center;cursor:pointer;background:#fdf6f7;border-bottom:2px dashed #3c1950;justify-content:center;align-items:center;gap:8px;padding:20px;transition:background .15s;display:flex}.empty-shelf[data-v-42cb2b74]:hover{background:#fce4e8}.empty-icon[data-v-42cb2b74]{color:#3c1950;font-size:18px}.empty-text[data-v-42cb2b74]{color:#3c1950;letter-spacing:.5px;font-size:11px;font-weight:700}.empty-text strong[data-v-42cb2b74]{text-decoration:underline}.pinned-cards-grid[data-v-42cb2b74]{background:#fbfbfb;gap:12px;padding:12px;display:flex;overflow-x:auto}.pinned-card[data-v-42cb2b74]{background:#fff;border:2px solid #000;flex-direction:column;gap:8px;min-width:170px;padding:10px;transition:transform .15s,box-shadow .15s;display:flex;box-shadow:4px 4px #000}.pinned-card[data-v-42cb2b74]:hover{transform:translateY(-2px);box-shadow:5px 5px #000}.pinned-card.card-highlighted[data-v-42cb2b74]{background:#fff9fa;border-color:#3c1950;box-shadow:4px 4px #3c1950}.card-top[data-v-42cb2b74]{justify-content:space-between;align-items:flex-start;display:flex}.card-name-wrap[data-v-42cb2b74]{flex-direction:column;display:flex}.card-chord-name[data-v-42cb2b74]{color:#000;font-size:15px;font-weight:800;line-height:1}.card-chord-type[data-v-42cb2b74]{color:#777;letter-spacing:.5px;font-size:9px;font-weight:700}.card-remove-btn[data-v-42cb2b74]{cursor:pointer;background:0 0;border:1.5px solid #000;justify-content:center;align-items:center;width:18px;height:18px;font-size:10px;font-weight:700;line-height:1;transition:all .1s;display:flex}.card-remove-btn[data-v-42cb2b74]:hover{color:#fff;background:#000}.card-diagram-box[data-v-42cb2b74]{background:#fff;border:1.5px solid #000;justify-content:center;padding:4px;display:flex}.mini-piano-svg[data-v-42cb2b74]{width:100%;max-width:154px;height:auto;display:block}.card-meta[data-v-42cb2b74]{flex-direction:column;gap:4px;font-size:10px;display:flex}.meta-row[data-v-42cb2b74]{align-items:center;gap:6px;display:flex}.meta-label[data-v-42cb2b74]{color:#666;font-size:9px;font-weight:700}.meta-value[data-v-42cb2b74]{color:#000;font-family:JetBrains Mono,monospace;font-size:10px;font-weight:700}.key-badges[data-v-42cb2b74]{flex-wrap:wrap;gap:4px;display:flex}.card-key-badge[data-v-42cb2b74]{color:#fff;background:#3c1950;border:1px solid #000;padding:1px 6px;font-family:JetBrains Mono,monospace;font-size:11px;font-weight:700}.card-actions[data-v-42cb2b74]{gap:6px;margin-top:2px;display:flex}.action-btn[data-v-42cb2b74]{cursor:pointer;letter-spacing:.5px;border:1.5px solid #000;flex:1;padding:4px 6px;font-family:Space Mono,monospace;font-size:10px;font-weight:700;transition:all .15s}.action-btn.play-btn[data-v-42cb2b74]{color:#fff;background:#000}.action-btn.play-btn[data-v-42cb2b74]:hover{background:#3c1950}.action-btn.highlight-btn[data-v-42cb2b74]{color:#000;background:#fff}.action-btn.highlight-btn[data-v-42cb2b74]:hover{background:#f8ccd1}.action-btn.highlight-btn.active[data-v-42cb2b74]{color:#f8ccd1;background:#3c1950}.controls-row[data-v-42cb2b74]{justify-content:center;margin-top:20px;display:flex}.octave-controls[data-v-42cb2b74]{background:#fff;border:3px solid #000;align-items:center;display:inline-flex;box-shadow:6px 6px #000}.ctrl-btn[data-v-42cb2b74]{color:#fff;cursor:pointer;letter-spacing:1px;background:#000;border:none;padding:8px 16px;font-family:Space Mono,monospace;font-size:12px;font-weight:700;transition:background-color .15s}.ctrl-btn[data-v-42cb2b74]:hover{background:#3c1950}.ctrl-btn[data-v-42cb2b74]:active{color:#000;background:#f8ccd1}.ctrl-btn.reset-btn[data-v-42cb2b74]{background:#555;border-left:2px solid #000}.ctrl-btn.reset-btn[data-v-42cb2b74]:hover{background:#000}.octave-label[data-v-42cb2b74]{color:#000;letter-spacing:1.5px;white-space:nowrap;background:#f8ccd1;border-left:3px solid #000;border-right:3px solid #000;padding:8px 20px;font-family:Space Mono,monospace;font-size:13px;font-weight:700}.key-mappings[data-v-42cb2b74]{background:#fff;border:3px solid #000;margin-top:24px;box-shadow:6px 6px #000}.mappings-header[data-v-42cb2b74]{color:#fff;letter-spacing:1px;background:#000;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding:8px 12px;font-size:11px;font-weight:700;display:flex}.mappings-hint[data-v-42cb2b74]{color:#f8ccd1;font-size:10px}.two-deck-container[data-v-42cb2b74]{flex-direction:column;gap:0;display:flex}.deck-section[data-v-42cb2b74]{border-bottom:2px solid #000;padding:12px 16px}.deck-section[data-v-42cb2b74]:last-child{border-bottom:none}.deck-title[data-v-42cb2b74]{color:#3c1950;letter-spacing:1.5px;margin-bottom:8px;font-size:10px;font-weight:800}.deck-rows[data-v-42cb2b74]{flex-direction:column;gap:6px;display:flex}.key-row[data-v-42cb2b74]{align-items:center;gap:8px;display:flex}.deck-tag[data-v-42cb2b74]{text-align:center;border:1.5px solid #000;min-width:75px;padding:3px 6px;font-size:9px;font-weight:700}.black-row .deck-tag[data-v-42cb2b74]{color:#fff;background:#3c1950}.white-row .deck-tag[data-v-42cb2b74]{color:#000;background:#e4e4e4}.deck-keys[data-v-42cb2b74]{flex-wrap:wrap;align-items:center;gap:5px;display:flex}.deck-btn[data-v-42cb2b74]{border:1.5px solid #000;flex-direction:column;justify-content:center;align-items:center;min-width:26px;padding:2px 6px;line-height:1;transition:all .1s;display:inline-flex}.deck-btn.black[data-v-42cb2b74]{color:#fff;background:#3c1950}.deck-btn.black .k-note[data-v-42cb2b74]{color:#ffffffa6}.deck-btn.white[data-v-42cb2b74]{color:#000;background:#fff}.deck-btn.white .k-note[data-v-42cb2b74]{color:#666}.deck-btn.active[data-v-42cb2b74]{transform:scale(1.1);box-shadow:2px 2px #000;color:#f8ccd1!important;background:#000!important}.deck-btn.active .k-note[data-v-42cb2b74]{color:#fff!important}.k-char[data-v-42cb2b74]{font-family:JetBrains Mono,monospace;font-size:12px;font-weight:800}.k-note[data-v-42cb2b74]{margin-top:2px;font-family:JetBrains Mono,monospace;font-size:8px}.deck-gap[data-v-42cb2b74]{width:14px}.chord-modal-backdrop[data-v-42cb2b74]{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:1000;background:#0009;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.chord-modal[data-v-42cb2b74]{background:#fff;border:4px solid #000;flex-direction:column;width:100%;max-width:960px;max-height:85vh;display:flex;box-shadow:12px 12px #000}.modal-header[data-v-42cb2b74]{color:#fff;background:#000;justify-content:space-between;align-items:center;padding:10px 16px;display:flex}.modal-title-group[data-v-42cb2b74]{align-items:center;gap:12px;display:flex}.modal-tag[data-v-42cb2b74]{color:#000;letter-spacing:1px;background:#f8ccd1;padding:3px 8px;font-size:12px;font-weight:800}.modal-subtitle[data-v-42cb2b74]{color:#ccc;letter-spacing:1px;font-size:11px}.modal-close-btn[data-v-42cb2b74]{color:#fff;cursor:pointer;background:#3c1950;border:2px solid #fff;padding:4px 10px;font-family:Space Mono,monospace;font-size:11px;font-weight:700;transition:all .1s}.modal-close-btn[data-v-42cb2b74]:hover{background:#f44;border-color:#f44}.modal-controls[data-v-42cb2b74]{background:#fdf6f7;border-bottom:3px solid #000;flex-direction:column;gap:10px;padding:12px 16px;display:flex}.filter-section[data-v-42cb2b74]{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.filter-label[data-v-42cb2b74]{color:#3c1950;min-width:80px;font-size:10px;font-weight:800}.filter-buttons[data-v-42cb2b74]{flex-wrap:wrap;gap:4px;display:flex}.filter-pill[data-v-42cb2b74]{color:#000;cursor:pointer;background:#fff;border:1.5px solid #000;padding:3px 8px;font-family:Space Mono,monospace;font-size:10px;font-weight:700;transition:all .1s}.filter-pill[data-v-42cb2b74]:hover{background:#fce4e8}.filter-pill.active[data-v-42cb2b74]{color:#fff;background:#3c1950;border-color:#000}.filter-pill .alt-label[data-v-42cb2b74]{opacity:.8;font-size:8px}.search-box[data-v-42cb2b74]{background:#fff;border:2px solid #000;align-items:center;gap:8px;padding:4px 8px;display:flex}.search-icon[data-v-42cb2b74]{font-size:12px}.search-input[data-v-42cb2b74]{border:none;outline:none;flex:1;font-family:Space Mono,monospace;font-size:11px}.clear-search[data-v-42cb2b74]{cursor:pointer;background:0 0;border:none;font-size:12px;font-weight:700}.modal-grid-container[data-v-42cb2b74]{background:#fbfbfb;flex:1;padding:16px;overflow-y:auto}.no-results[data-v-42cb2b74]{text-align:center;color:#888;padding:40px;font-size:13px;font-weight:700}.chords-grid[data-v-42cb2b74]{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;display:grid}.chord-item-card[data-v-42cb2b74]{background:#fff;border:2px solid #000;flex-direction:column;gap:8px;padding:10px;transition:transform .1s;display:flex;box-shadow:4px 4px #000}.chord-item-card[data-v-42cb2b74]:hover{transform:translateY(-2px);box-shadow:5px 5px #000}.chord-item-card.pinned[data-v-42cb2b74]{background:#fdf6f7;border-color:#3c1950}.item-top[data-v-42cb2b74]{justify-content:space-between;align-items:flex-start;display:flex}.item-name-group[data-v-42cb2b74]{flex-direction:column;display:flex}.item-chord-name[data-v-42cb2b74]{color:#000;font-size:16px;font-weight:800;line-height:1.1}.item-chord-type[data-v-42cb2b74]{color:#666;font-size:9px;font-weight:700}.item-pin-btn[data-v-42cb2b74]{color:#000;cursor:pointer;background:#fff;border:1.5px solid #000;padding:2px 6px;font-family:Space Mono,monospace;font-size:10px;font-weight:700;transition:all .1s}.item-pin-btn[data-v-42cb2b74]:hover{background:#f8ccd1}.item-pin-btn.active[data-v-42cb2b74]{color:#fff;background:#3c1950}.item-diagram[data-v-42cb2b74]{background:#fff;border:1.5px solid #000;padding:4px}.item-meta[data-v-42cb2b74]{flex-direction:column;gap:3px;font-size:9px;display:flex}.meta-line[data-v-42cb2b74]{align-items:center;gap:6px;display:flex}.meta-line .label[data-v-42cb2b74]{color:#666;font-weight:700}.meta-line .value[data-v-42cb2b74]{color:#000;font-family:JetBrains Mono,monospace;font-weight:700}.meta-line .badges[data-v-42cb2b74]{flex-wrap:wrap;gap:3px;display:flex}.item-play-btn[data-v-42cb2b74]{color:#fff;cursor:pointer;letter-spacing:.5px;background:#000;border:1.5px solid #000;padding:5px;font-family:Space Mono,monospace;font-size:10px;font-weight:700;transition:background .1s}.item-play-btn[data-v-42cb2b74]:hover{background:#3c1950}.modal-footer[data-v-42cb2b74]{background:#f0f0f0;border-top:3px solid #000;justify-content:space-between;align-items:center;padding:10px 16px;display:flex}.footer-info[data-v-42cb2b74]{color:#444;font-size:10px;font-weight:700}.footer-done-btn[data-v-42cb2b74]{color:#fff;cursor:pointer;background:#000;border:2px solid #000;padding:5px 16px;font-family:Space Mono,monospace;font-size:11px;font-weight:700}.footer-done-btn[data-v-42cb2b74]:hover{background:#3c1950}