* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  font-family: 'Inter', system-ui, Avenir, Helvetica, Arial, sans-serif;
  background-color: #f7f9fb;
}

#app {
  height: 100vh;
  overflow: hidden;
}

button {
  cursor: pointer;
  border: none;
  font-family: inherit;
  font-size: 14px;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.15s ease-in-out;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

button.btn-primary {
  background-color: #4f46e5;
  color: white;
}

button.btn-primary:hover:not(:disabled) {
  background-color: #4338ca;
}

button.btn-danger {
  background-color: #dc2626;
  color: white;
}

button.btn-danger:hover:not(:disabled) {
  background-color: #b91c1c;
}

.card {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 2rem;
}

.text-green {
  color: #16a34a;
}

.text-orange {
  color: #ea580c;
}

.text-blue {
  color: #2563eb;
}

.text-purple {
  color: #9333ea;
}

.text-yellow {
  color: #ca8a04;
}

.text-red {
  color: #dc2626;
}

.text-gray {
  color: #6b7280;
}

.scrollable {
  overflow-y: auto;
}

.scrollable::-webkit-scrollbar {
  width: 8px;
}

.scrollable::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.scrollable::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.scrollable::-webkit-scrollbar-thumb:hover {
  background: #555;
}

@media print {
  #app {
    height: auto;
    overflow: visible;
  }
}

.midi-connection[data-v-662a601e] {
  max-width: 900px;
  margin: 0 auto;
  background: white;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  padding: 2rem;
}
.header[data-v-662a601e] {
  text-align: center;
  margin-bottom: 2rem;
}
.header h1[data-v-662a601e] {
  font-size: 1.875rem;
  font-weight: 800;
  color: #4f46e5;
  margin-bottom: 0.5rem;
}
.status[data-v-662a601e] {
  font-size: 1.125rem;
  font-weight: 500;
  color: #4b5563;
  margin-bottom: 0.5rem;
}
.note[data-v-662a601e] {
  font-size: 0.875rem;
  font-weight: 600;
  color: #dc2626;
}
.button-group[data-v-662a601e] {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
}
.button-group button[data-v-662a601e] {
  flex: 1;
}
.section[data-v-662a601e] {
  margin-bottom: 2rem;
}
.section-header[data-v-662a601e] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e5e7eb;
  margin-bottom: 1rem;
}
.section h2[data-v-662a601e] {
  font-size: 1.25rem;
  font-weight: bold;
  color: #1f2937;
  margin: 0;
}
.device-list[data-v-662a601e] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.empty-message[data-v-662a601e] {
  color: #9ca3af;
  font-style: italic;
}
.device-item[data-v-662a601e] {
  padding: 0.75rem;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.device-name[data-v-662a601e] {
  font-weight: 600;
  color: #111827;
  margin-bottom: 0.25rem;
}
.device-info[data-v-662a601e] {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 0.25rem;
}
.device-state[data-v-662a601e] {
  color: #16a34a;
}
.log[data-v-662a601e] {
  background-color: #f3f4f6;
  padding: 1rem;
  border-radius: 8px;
  height: 16rem;
  font-size: 0.875rem;
  font-family: 'Courier New', monospace;
  color: #1f2937;
}
.log p[data-v-662a601e] {
  margin-bottom: 0.25rem;
}
.backup-description[data-v-662a601e] {
  font-size: 0.875rem;
  color: #6b7280;
  margin-bottom: 1rem;
  line-height: 1.5;
}
.btn-export[data-v-662a601e],
.btn-import[data-v-662a601e] {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.btn-export[data-v-662a601e] {
  background: #10b981;
  color: white;
  flex: 1;
}
.btn-export[data-v-662a601e]:hover {
  background: #059669;
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(16, 185, 129, 0.3);
}
.btn-import[data-v-662a601e] {
  background: #3b82f6;
  color: white;
  flex: 1;
}
.btn-import[data-v-662a601e]:hover {
  background: #2563eb;
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(59, 130, 246, 0.3);
}
.export-message[data-v-662a601e] {
  margin-top: 1rem;
  padding: 0.75rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
}
.export-message.success[data-v-662a601e] {
  background-color: #d1fae5;
  color: #065f46;
  border: 1px solid #10b981;
}
.export-message.error[data-v-662a601e] {
  background-color: #fee2e2;
  color: #991b1b;
  border: 1px solid #ef4444;
}
@media (max-width: 640px) {
.button-group[data-v-662a601e] {
    flex-direction: column;
}
}

.fretboard-container[data-v-a46599ea] {
  max-width: 1200px;
  margin: 0 auto;
}
.header-section[data-v-a46599ea] {
  margin-bottom: 1.5rem;
}
.fretboard-container h2[data-v-a46599ea] {
  font-size: 1.5rem;
  font-weight: bold;
  color: #1f2937;
  text-align: center;
  margin-bottom: 1rem;
}
.chord-buttons[data-v-a46599ea] {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.chord-button[data-v-a46599ea] {
  padding: 0.5rem 1rem;
  background-color: #e5e7eb;
  color: #1f2937;
  border: 2px solid transparent;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.chord-button[data-v-a46599ea]:hover {
  background-color: #d1d5db;
}
.chord-button.active[data-v-a46599ea] {
  background-color: #4f46e5;
  color: white;
  border-color: #4338ca;
}
.chord-button.clear-button.active[data-v-a46599ea] {
  background-color: #6b7280;
  border-color: #4b5563;
}
.fretboard[data-v-a46599ea] {
  position: relative;
  background-color: #b45309;
  border-radius: 8px;
  padding: 1.5rem;
  overflow-x: auto;
}
.fretboard-inner[data-v-a46599ea] {
  min-width: max-content;
}
.fret-markers[data-v-a46599ea] {
  display: flex;
  margin-bottom: 0.5rem;
}
.string-label-spacer[data-v-a46599ea] {
  width: 64px;
  flex-shrink: 0;
}
.play-indicator-spacer[data-v-a46599ea] {
  width: 32px;
  flex-shrink: 0;
}
.fret-marker[data-v-a46599ea] {
  flex-shrink: 0;
  text-align: center;
  font-size: 0.75rem;
  color: #fef3c7;
  font-weight: 600;
}
.strings-container[data-v-a46599ea] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.string-row[data-v-a46599ea] {
  display: flex;
  align-items: center;
}
.string-label[data-v-a46599ea] {
  width: 64px;
  flex-shrink: 0;
  text-align: right;
  padding-right: 1rem;
}
.string-label span[data-v-a46599ea] {
  font-size: 0.875rem;
  font-weight: bold;
  color: #fef3c7;
}
.play-indicator[data-v-a46599ea] {
  width: 32px;
  flex-shrink: 0;
  text-align: center;
}
.play-indicator span[data-v-a46599ea] {
  font-size: 1.25rem;
  font-weight: bold;
  color: #fef3c7;
}
.play-indicator span.indicator-correct[data-v-a46599ea] {
  color: #22c55e;
  text-shadow: 0 0 5px rgba(34, 197, 94, 0.5);
}
.play-indicator span.indicator-wrong[data-v-a46599ea] {
  color: #ef4444;
  text-shadow: 0 0 5px rgba(239, 68, 68, 0.5);
}
.play-indicator span.indicator-unplayed[data-v-a46599ea] {
  color: #9ca3af;
}
.frets-row[data-v-a46599ea] {
  display: flex;
  align-items: center;
  position: relative;
}
.string-line[data-v-a46599ea] {
  position: absolute;
  height: 2px;
  background-color: #d1d5db;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.fret-cell[data-v-a46599ea] {
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
}
.fret-line[data-v-a46599ea] {
  position: absolute;
  right: 0;
  width: 4px;
  height: 100%;
  background-color: #9ca3af;
}
.fret-line.last-fret[data-v-a46599ea] {
  background-color: #d1d5db;
}

/* User finger position - gray semi-transparent */
.user-finger-indicator[data-v-a46599ea] {
  width: 32px;
  height: 32px;
  background-color: rgba(107, 114, 128, 0.5);
  border-radius: 50%;
  border: 2px solid rgba(107, 114, 128, 0.7);
  z-index: 5;
  position: absolute;
}

/* Chord position - with finger number */
.chord-indicator[data-v-a46599ea] {
  width: 32px;
  height: 32px;
  background-color: #3b82f6;
  border-radius: 50%;
  border: 4px solid white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chord-indicator span[data-v-a46599ea] {
  font-size: 0.875rem;
  font-weight: bold;
  color: white;
}

/* Finger-specific colors */
.chord-indicator.finger-thumb[data-v-a46599ea] {
  background-color: #78716c;
}
.chord-indicator.finger-index[data-v-a46599ea] {
  background-color: #3b82f6;
}
.chord-indicator.finger-middle[data-v-a46599ea] {
  background-color: #10b981;
}
.chord-indicator.finger-ring[data-v-a46599ea] {
  background-color: #f59e0b;
}
.chord-indicator.finger-pinky[data-v-a46599ea] {
  background-color: #a855f7;
}

/* User finger on chord position - green highlight behind chord */
.user-finger-on-chord[data-v-a46599ea] {
  width: 44px;
  height: 44px;
  background-color: rgba(34, 197, 94, 0.3);
  border-radius: 50%;
  border: 5px solid rgba(34, 197, 94, 0.9);
  z-index: 8;
  position: absolute;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
}

/* Barre indicator - horizontal bar connecting multiple strings */
.barre-indicator[data-v-a46599ea] {
  position: absolute;
  border-radius: 24px;
  border: 3px solid white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.barre-indicator span[data-v-a46599ea] {
  font-size: 1rem;
  font-weight: bold;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.inlay-marker[data-v-a46599ea] {
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: #fde68a;
  border-radius: 50%;
  opacity: 0.5;
}
.nut[data-v-a46599ea] {
  position: absolute;
  left: 96px;
  top: 48px;
  width: 8px;
  background-color: #1f2937;
  border-radius: 2px;
  height: calc(100% - 96px);
}
.positions-display[data-v-a46599ea] {
  margin-top: 1.5rem;
}
.positions-display h3[data-v-a46599ea] {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 0.5rem;
}
.positions-grid[data-v-a46599ea] {
  background-color: #f3f4f6;
  padding: 1rem;
  border-radius: 8px;
}
.empty-message[data-v-a46599ea] {
  color: #9ca3af;
  font-style: italic;
}
.positions-list[data-v-a46599ea] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.5rem;
}
.position-item[data-v-a46599ea] {
  background: white;
  padding: 0.5rem;
  border-radius: 4px;
  border: 1px solid #d1d5db;
}
.position-string[data-v-a46599ea] {
  font-weight: 600;
}
.position-fret[data-v-a46599ea] {
  margin-left: 0.5rem;
  color: #2563eb;
}

/* Finger legend */
.finger-legend[data-v-a46599ea] {
  margin-top: 1.5rem;
  padding: 1rem;
  background-color: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}
.finger-legend h3[data-v-a46599ea] {
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 0.75rem;
}
.legend-items[data-v-a46599ea] {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.legend-item[data-v-a46599ea] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.legend-dot[data-v-a46599ea] {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.legend-dot.finger-thumb[data-v-a46599ea] {
  background-color: #78716c;
}
.legend-dot.finger-index[data-v-a46599ea] {
  background-color: #3b82f6;
}
.legend-dot.finger-middle[data-v-a46599ea] {
  background-color: #10b981;
}
.legend-dot.finger-ring[data-v-a46599ea] {
  background-color: #f59e0b;
}
.legend-dot.finger-pinky[data-v-a46599ea] {
  background-color: #a855f7;
}
.legend-item span[data-v-a46599ea] {
  font-size: 0.875rem;
  color: #4b5563;
  font-weight: 500;
}

.chord-practice[data-v-0715074a] {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.status-card[data-v-0715074a] {
  background: white;
}
.status-header[data-v-0715074a] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.status-header h2[data-v-0715074a] {
  font-size: 1.25rem;
  font-weight: bold;
  color: #1f2937;
  margin-bottom: 0.25rem;
}
.status-message[data-v-0715074a] {
  font-size: 0.875rem;
  color: #6b7280;
}
.button-container[data-v-0715074a] {
  display: flex;
  gap: 0.75rem;
}
.devices-summary[data-v-0715074a] {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e5e7eb;
}
.devices-summary p[data-v-0715074a] {
  font-size: 0.875rem;
  font-weight: 600;
}
.not-connected-message[data-v-0715074a] {
  margin-top: 1rem;
  padding: 1rem;
  background-color: #fef3c7;
  border-left: 4px solid #f59e0b;
  border-radius: 4px;
}
.not-connected-message p[data-v-0715074a] {
  font-size: 0.875rem;
  color: #92400e;
}
.messages-card h3[data-v-0715074a] {
  font-size: 1.125rem;
  font-weight: bold;
  color: #1f2937;
  margin-bottom: 0.75rem;
}
.messages-log[data-v-0715074a] {
  background-color: #f3f4f6;
  padding: 1rem;
  border-radius: 8px;
  height: 12rem;
  font-size: 0.875rem;
  font-family: 'Courier New', monospace;
}
.messages-log p[data-v-0715074a] {
  margin-bottom: 0.25rem;
}
.empty-message[data-v-0715074a] {
  color: #9ca3af;
  font-style: italic;
}
.instructions[data-v-0715074a] {
  background: #eff6ff;
  border-left: 4px solid #3b82f6;
  padding: 1rem;
  border-radius: 4px;
}
.instructions h4[data-v-0715074a] {
  font-weight: bold;
  color: #1e40af;
  margin-bottom: 0.5rem;
}
.instructions ul[data-v-0715074a] {
  list-style-type: disc;
  padding-left: 1.5rem;
  font-size: 0.875rem;
  color: #1d4ed8;
}
.instructions li[data-v-0715074a] {
  margin-bottom: 0.25rem;
}

.practice-mode[data-v-a15b547f] {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.practice-header[data-v-a15b547f] {
  padding: 1.5rem;
}
.practice-header h2[data-v-a15b547f] {
  font-size: 1.5rem;
  font-weight: bold;
  color: #1f2937;
  margin: 0;
}

/* Chord Builder */
.chord-builder[data-v-a15b547f] {
  padding: 1.5rem;
}
.chord-builder h3[data-v-a15b547f] {
  font-size: 1.25rem;
  font-weight: bold;
  color: #1f2937;
  margin: 0 0 1rem 0;
}
.builder-controls[data-v-a15b547f] {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  align-items: flex-start;
}
.preset-selector[data-v-a15b547f] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 300px;
}
.preset-selector label[data-v-a15b547f] {
  font-size: 0.875rem;
  font-weight: 600;
  color: #4b5563;
  white-space: nowrap;
}
.preset-dropdown[data-v-a15b547f] {
  padding: 0.5rem;
  border: 2px solid #d1d5db;
  border-radius: 6px;
  background-color: white;
  color: #1f2937;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
  flex: 1;
}
.preset-dropdown[data-v-a15b547f]:hover {
  border-color: #4f46e5;
}
.save-controls[data-v-a15b547f] {
  display: flex;
  gap: 0.5rem;
  flex: 1;
  min-width: 300px;
}
.progression-name-input[data-v-a15b547f] {
  padding: 0.5rem;
  border: 2px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.875rem;
  flex: 1;
  transition: border-color 0.2s;
}
.progression-name-input[data-v-a15b547f]:focus {
  outline: none;
  border-color: #4f46e5;
}
.btn-save[data-v-a15b547f] {
  padding: 0.5rem 1rem;
  background-color: #10b981;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.btn-save[data-v-a15b547f]:hover:not(:disabled) {
  background-color: #059669;
}
.btn-save[data-v-a15b547f]:disabled {
  background-color: #9ca3af;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Chord Rows */
.available-chords-section[data-v-a15b547f],
.custom-progression-section[data-v-a15b547f] {
  margin-bottom: 1.5rem;
}
.section-header[data-v-a15b547f] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}
.available-chords-section h4[data-v-a15b547f],
.custom-progression-section h4[data-v-a15b547f] {
  font-size: 1rem;
  font-weight: 600;
  color: #4b5563;
  margin: 0 0 0.75rem 0;
}
.chords-row[data-v-a15b547f] {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  min-height: 60px;
  padding: 0.75rem;
  border-radius: 8px;
  border: 2px dashed #d1d5db;
}
.available-chords[data-v-a15b547f] {
  background-color: #f9fafb;
  border-color: #9ca3af;
}
.custom-progression[data-v-a15b547f] {
  background-color: #eff6ff;
  border-color: #3b82f6;
  transition: all 0.3s;
}
.custom-progression.empty[data-v-a15b547f] {
  justify-content: center;
  align-items: center;
}
.empty-placeholder[data-v-a15b547f] {
  color: #9ca3af;
  font-size: 0.875rem;
  font-style: italic;
  text-align: center;
}
.chord-item[data-v-a15b547f] {
  padding: 0.75rem 1rem;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  cursor: move;
  transition: all 0.2s;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.chord-item.available[data-v-a15b547f] {
  background-color: #e0e7ff;
  color: #4f46e5;
  border: 2px solid #4f46e5;
}
.chord-item.available[data-v-a15b547f]:hover {
  background-color: #c7d2fe;
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(79, 70, 229, 0.2);
}
.chord-item.custom[data-v-a15b547f] {
  background-color: #dbeafe;
  color: #1e40af;
  border: 2px solid #3b82f6;
  position: relative;
}
.chord-item.custom[data-v-a15b547f]:hover {
  background-color: #bfdbfe;
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(59, 130, 246, 0.2);
}
.chord-label[data-v-a15b547f] {
  flex: 1;
}
.remove-btn[data-v-a15b547f] {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background-color: #ef4444;
  color: white;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.2s;
}
.remove-btn[data-v-a15b547f]:hover {
  background-color: #dc2626;
  transform: scale(1.1);
}
.btn-clear[data-v-a15b547f] {
  padding: 0.5rem 1rem;
  background-color: #ef4444;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-clear[data-v-a15b547f]:hover {
  background-color: #dc2626;
}
.start-practice-section[data-v-a15b547f] {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}
.btn-primary[data-v-a15b547f] {
  padding: 0.75rem 1.5rem;
  background-color: #4f46e5;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-primary[data-v-a15b547f]:hover:not(:disabled) {
  background-color: #4338ca;
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(79, 70, 229, 0.3);
}
.btn-primary[data-v-a15b547f]:disabled {
  background-color: #9ca3af;
  cursor: not-allowed;
  opacity: 0.6;
}
.btn-large[data-v-a15b547f] {
  padding: 1rem 2rem;
  font-size: 1.125rem;
}
.btn-danger[data-v-a15b547f] {
  padding: 0.75rem 1.5rem;
  background-color: #ef4444;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-danger[data-v-a15b547f]:hover {
  background-color: #dc2626;
}

/* Practice Display */
.current-chord-display[data-v-a15b547f] {
  padding: 1.5rem;
  text-align: center;
}
.current-chord-display h3[data-v-a15b547f] {
  font-size: 1.25rem;
  color: #4b5563;
  margin-bottom: 1rem;
}
.chord-name[data-v-a15b547f] {
  font-size: 2rem;
  font-weight: bold;
  color: #4f46e5;
  padding: 0.5rem 1rem;
  background-color: #eef2ff;
  border-radius: 8px;
}
.progress-info[data-v-a15b547f] {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 1rem;
  font-size: 1rem;
  color: #6b7280;
}
.progression-display[data-v-a15b547f] {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e5e7eb;
}
.progression-display p[data-v-a15b547f] {
  font-size: 0.875rem;
  color: #6b7280;
}
.stop-practice-section[data-v-a15b547f] {
  margin-top: 1rem;
}

/* Statistics */
.statistics[data-v-a15b547f] {
  padding: 1.5rem;
}
.statistics h3[data-v-a15b547f] {
  font-size: 1.25rem;
  font-weight: bold;
  color: #1f2937;
  margin-bottom: 1rem;
}
.stats-grid[data-v-a15b547f] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}
.stat-item[data-v-a15b547f] {
  padding: 1rem;
  background-color: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}
.stat-chord[data-v-a15b547f] {
  font-size: 1.5rem;
  font-weight: bold;
  color: #4f46e5;
  margin-bottom: 0.75rem;
  text-align: center;
}
.stat-times[data-v-a15b547f] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.stat-row[data-v-a15b547f] {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.stat-label[data-v-a15b547f] {
  font-size: 0.875rem;
  color: #6b7280;
}
.stat-value[data-v-a15b547f] {
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
}
.stat-value.best[data-v-a15b547f] {
  color: #10b981;
}

/* Debug Display */
.debug-display[data-v-a15b547f] {
  padding: 1.5rem;
  background-color: #fffbeb;
  border: 2px solid #fbbf24;
}
.debug-display h3[data-v-a15b547f] {
  font-size: 1.25rem;
  font-weight: bold;
  color: #92400e;
  margin: 0 0 1rem 0;
}
.debug-section[data-v-a15b547f] {
  margin-bottom: 1.5rem;
}
.debug-section[data-v-a15b547f]:last-child {
  margin-bottom: 0;
}
.debug-section h4[data-v-a15b547f] {
  font-size: 1rem;
  font-weight: 600;
  color: #78350f;
  margin: 0 0 0.5rem 0;
}
.debug-list[data-v-a15b547f] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.debug-item[data-v-a15b547f] {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem;
  background-color: #fef3c7;
  border-radius: 4px;
}
.debug-label[data-v-a15b547f] {
  font-size: 0.875rem;
  font-weight: 600;
  color: #92400e;
}
.debug-value[data-v-a15b547f] {
  font-size: 0.875rem;
  color: #451a03;
  font-family: monospace;
}
.debug-display .empty-message[data-v-a15b547f] {
  font-size: 0.875rem;
  color: #78350f;
  font-style: italic;
}

.plucking-practice[data-v-d9307260] {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2rem;
}
.card[data-v-d9307260] {
  background: #1e1e1e;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 1.5rem;
}
.practice-header[data-v-d9307260] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.practice-header h2[data-v-d9307260] {
  margin: 0;
  color: #fff;
}
.practice-controls[data-v-d9307260] {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}
.difficulty-selector[data-v-d9307260] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.difficulty-selector label[data-v-d9307260] {
  color: #ccc;
  font-size: 0.9rem;
}
.difficulty-dropdown[data-v-d9307260] {
  padding: 0.5rem 1rem;
  background: #2a2a2a;
  color: #fff;
  border: 1px solid #444;
  border-radius: 4px;
  font-size: 0.9rem;
  cursor: pointer;
}
.difficulty-dropdown[data-v-d9307260]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-primary[data-v-d9307260],
.btn-danger[data-v-d9307260] {
  padding: 0.5rem 1.5rem;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-primary[data-v-d9307260] {
  background: #4CAF50;
  color: white;
}
.btn-primary[data-v-d9307260]:hover {
  background: #45a049;
}
.btn-danger[data-v-d9307260] {
  background: #f44336;
  color: white;
}
.btn-danger[data-v-d9307260]:hover {
  background: #da190b;
}
.status-display[data-v-d9307260] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.status-info[data-v-d9307260] {
  display: flex;
  gap: 2rem;
}
.attempt-counter[data-v-d9307260],
.timer[data-v-d9307260] {
  margin: 0;
  color: #fff;
  font-size: 1.1rem;
}
.instruction[data-v-d9307260] {
  color: #ffa500;
  font-size: 1rem;
}
.instruction p[data-v-d9307260] {
  margin: 0;
}

/* Guitar Visualization */
.guitar-visualization[data-v-d9307260] {
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}
.guitar-body[data-v-d9307260] {
  position: relative;
  background: linear-gradient(135deg, #8B4513 0%, #654321 100%);
  border-radius: 20px;
  padding: 3rem 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  min-height: 400px;
}
.sound-hole[data-v-d9307260] {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 180px;
  height: 180px;
  background: radial-gradient(circle at center, #000 0%, #1a1a1a 70%, #000 100%);
  border-radius: 50%;
  border: 4px solid #654321;
  box-shadow:
    inset 0 0 30px rgba(0, 0, 0, 0.8),
    0 4px 10px rgba(0, 0, 0, 0.5);
  z-index: 1;
}
.sound-hole-inner[data-v-d9307260] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 140px;
  border: 3px solid #8B4513;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.sound-hole-inner[data-v-d9307260]::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border: 2px solid #654321;
  border-radius: 50%;
  opacity: 0.6;
}
.strings-container[data-v-d9307260] {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 0 2rem;
  z-index: 2;
}
.string-row[data-v-d9307260] {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  transition: all 0.3s;
  background: transparent;
}
.string-row.target-string[data-v-d9307260] {
  background: rgba(255, 165, 0, 0.15);
  border: 2px solid #ffa500;
  box-shadow: 0 0 10px rgba(255, 165, 0, 0.3);
}
.string-row.correct-string[data-v-d9307260] {
  background: rgba(76, 175, 80, 0.15);
  border: 2px solid #4CAF50;
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
}
.string-row.wrong-string[data-v-d9307260] {
  background: rgba(244, 67, 54, 0.15);
  border: 2px solid #f44336;
  box-shadow: 0 0 10px rgba(244, 67, 54, 0.3);
}
.string-label[data-v-d9307260] {
  min-width: 90px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 500;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}
.string-line[data-v-d9307260] {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, #c0c0c0 0%, #808080 50%, #c0c0c0 100%);
  border-radius: 1px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 -1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
}
.string-row:nth-child(1) .string-line[data-v-d9307260] {
  height: 1px;
  background: linear-gradient(90deg, #d4d4d4 0%, #a0a0a0 50%, #d4d4d4 100%);
}
.string-row:nth-child(2) .string-line[data-v-d9307260] {
  height: 1.5px;
  background: linear-gradient(90deg, #d0d0d0 0%, #909090 50%, #d0d0d0 100%);
}
.string-row:nth-child(3) .string-line[data-v-d9307260] {
  height: 2px;
  background: linear-gradient(90deg, #c0c0c0 0%, #808080 50%, #c0c0c0 100%);
}
.string-row:nth-child(4) .string-line[data-v-d9307260] {
  height: 2.5px;
  background: linear-gradient(90deg, #b8b0a0 0%, #706040 50%, #b8b0a0 100%);
}
.string-row:nth-child(5) .string-line[data-v-d9307260] {
  height: 3px;
  background: linear-gradient(90deg, #b0a090 0%, #604030 50%, #b0a090 100%);
}
.string-row:nth-child(6) .string-line[data-v-d9307260] {
  height: 3.5px;
  background: linear-gradient(90deg, #a89080 0%, #503020 50%, #a89080 100%);
}
.string-status[data-v-d9307260] {
  min-width: 60px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.target-indicator[data-v-d9307260] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: #ffa500;
  color: #000;
  border-radius: 50%;
  font-weight: bold;
  font-size: 0.85rem;
}
.status-icon[data-v-d9307260] {
  font-size: 1.2rem;
  font-weight: bold;
}
.status-icon.correct[data-v-d9307260] {
  color: #4CAF50;
}
.status-icon.wrong[data-v-d9307260] {
  color: #f44336;
}

/* Debug Display */
.debug-display[data-v-d9307260] {
  background: #252525;
}
.debug-display h3[data-v-d9307260] {
  margin: 0 0 1rem 0;
  color: #fff;
  font-size: 1.1rem;
}
.debug-section[data-v-d9307260] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.debug-item[data-v-d9307260] {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem;
  background: #1e1e1e;
  border-radius: 4px;
}
.debug-label[data-v-d9307260] {
  color: #888;
  min-width: 150px;
}
.debug-value[data-v-d9307260] {
  color: #4CAF50;
  font-family: monospace;
}

/* Statistics */
.statistics[data-v-d9307260] {
  background: #1e1e1e;
}
.statistics h3[data-v-d9307260] {
  margin: 0 0 1.5rem 0;
  color: #fff;
}
.stats-grid[data-v-d9307260] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}
.stat-item[data-v-d9307260] {
  background: #252525;
  padding: 1rem;
  border-radius: 6px;
  border: 1px solid #333;
}
.stat-string[data-v-d9307260] {
  color: #4CAF50;
  font-weight: bold;
  margin-bottom: 0.5rem;
  font-size: 1rem;
}
.stat-times[data-v-d9307260] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.stat-row[data-v-d9307260] {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
}
.stat-label[data-v-d9307260] {
  color: #888;
}
.stat-value[data-v-d9307260] {
  color: #fff;
}
.stat-value.best[data-v-d9307260] {
  color: #ffa500;
  font-weight: bold;
}

.chord-card[data-v-0bfdfd8d] {
  background: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-block;
}
.chord-card[data-v-0bfdfd8d]:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}
.chord-card.selected[data-v-0bfdfd8d] {
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);
  border: 2px solid #3b82f6;
}
.chord-name[data-v-0bfdfd8d] {
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 8px;
  color: #1f2937;
}
.chord-diagram[data-v-0bfdfd8d] {
  display: block;
  margin: 0 auto;
}
.status-text[data-v-0bfdfd8d] {
  font-size: 16px;
  font-weight: bold;
  fill: #374151;
}
.finger-number[data-v-0bfdfd8d] {
  font-size: 14px;
  font-weight: bold;
  fill: white;
  pointer-events: none;
}
.picking-pattern[data-v-0bfdfd8d] {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
}
.pattern-label[data-v-0bfdfd8d] {
  font-size: 0.875rem;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 6px;
  text-align: center;
}
.pattern-numbers[data-v-0bfdfd8d] {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.pattern-note[data-v-0bfdfd8d] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background-color: #3b82f6;
  color: white;
  border-radius: 50%;
  font-weight: bold;
  font-size: 0.875rem;
}

.arpeggio-picking[data-v-e641d690] {
  max-width: 1200px;
  margin: 0 auto;
}
.header[data-v-e641d690] {
  text-align: center;
  margin-bottom: 2rem;
}
.header h1[data-v-e641d690] {
  font-size: 2rem;
  font-weight: bold;
  color: #1f2937;
  margin-bottom: 0.5rem;
}
.subtitle[data-v-e641d690] {
  font-size: 1rem;
  color: #6b7280;
}
.status-card[data-v-e641d690] {
  background: #fef3c7;
  border: 1px solid #fbbf24;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 2rem;
  text-align: center;
}
.loading[data-v-e641d690] {
  color: #92400e;
  font-weight: 600;
}
.info[data-v-e641d690] {
  color: #78350f;
}
.chord-grid[data-v-e641d690] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
  justify-items: center;
}
.control-panel[data-v-e641d690] {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.pattern-info[data-v-e641d690] {
  margin-bottom: 2rem;
}
.pattern-info h3[data-v-e641d690] {
  font-size: 1.5rem;
  font-weight: bold;
  color: #1f2937;
  margin-bottom: 1rem;
}
.pattern-description[data-v-e641d690] {
  color: #4b5563;
}
.pattern-description p[data-v-e641d690] {
  margin: 0.5rem 0;
}
.controls[data-v-e641d690] {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.pattern-selector[data-v-e641d690] {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.pattern-selector label[data-v-e641d690] {
  font-weight: 600;
  color: #374151;
  min-width: 120px;
}
.pattern-select[data-v-e641d690] {
  flex: 1;
  padding: 0.5rem;
  border: 2px solid #e5e7eb;
  border-radius: 6px;
  font-size: 0.9375rem;
  background: white;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.pattern-select[data-v-e641d690]:hover:not(:disabled) {
  border-color: #3b82f6;
}
.pattern-select[data-v-e641d690]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.tempo-control[data-v-e641d690] {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.tempo-control label[data-v-e641d690] {
  font-weight: 600;
  color: #374151;
  min-width: 120px;
}
.tempo-control input[type="range"][data-v-e641d690] {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: #e5e7eb;
  outline: none;
}
.tempo-control input[type="range"][data-v-e641d690]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #3b82f6;
  cursor: pointer;
}
.tempo-control input[type="range"][data-v-e641d690]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #3b82f6;
  cursor: pointer;
  border: none;
}
.tempo-value[data-v-e641d690] {
  font-weight: bold;
  color: #1f2937;
  min-width: 60px;
  text-align: right;
}
.playback-controls[data-v-e641d690] {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.btn[data-v-e641d690] {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 1;
  min-width: 150px;
}
.btn[data-v-e641d690]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-play[data-v-e641d690] {
  background-color: #10b981;
  color: white;
}
.btn-play[data-v-e641d690]:hover:not(:disabled) {
  background-color: #059669;
}
.btn-stop[data-v-e641d690] {
  background-color: #ef4444;
  color: white;
}
.btn-stop[data-v-e641d690]:hover:not(:disabled) {
  background-color: #dc2626;
}
.btn-loop[data-v-e641d690] {
  background-color: #3b82f6;
  color: white;
}
.btn-loop[data-v-e641d690]:hover:not(:disabled) {
  background-color: #2563eb;
}
.playback-visualization[data-v-e641d690] {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid #e5e7eb;
}
.current-note[data-v-e641d690] {
  text-align: center;
  font-size: 1.25rem;
  margin-bottom: 1rem;
  color: #374151;
}
.note-highlight[data-v-e641d690] {
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: #3b82f6;
  color: white;
  border-radius: 8px;
  font-weight: bold;
  min-width: 60px;
}
.progress-bar[data-v-e641d690] {
  width: 100%;
  height: 8px;
  background-color: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}
.progress-fill[data-v-e641d690] {
  height: 100%;
  background-color: #3b82f6;
  transition: width 0.1s linear;
}

.strumming-practice[data-v-34bcc423] {
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;
}
h2[data-v-34bcc423] {
  text-align: center;
  margin-bottom: 20px;
}

/* Pattern Selection */
.pattern-selector[data-v-34bcc423] {
  margin-bottom: 15px;
  text-align: center;
}
.pattern-selector label[data-v-34bcc423] {
  margin-right: 10px;
  font-weight: bold;
}
.pattern-selector select[data-v-34bcc423] {
  padding: 8px 12px;
  font-size: 16px;
  border: 2px solid #ddd;
  border-radius: 5px;
  min-width: 250px;
}
.pattern-info[data-v-34bcc423] {
  text-align: center;
  margin-bottom: 20px;
}
.pattern-description[data-v-34bcc423] {
  font-size: 14px;
  color: #666;
  margin: 5px 0;
}
.pattern-difficulty[data-v-34bcc423] {
  font-size: 13px;
  margin: 5px 0;
}
.difficulty-beginner[data-v-34bcc423] {
  color: #28a745;
  font-weight: bold;
}
.difficulty-intermediate[data-v-34bcc423] {
  color: #ffc107;
  font-weight: bold;
}
.difficulty-advanced[data-v-34bcc423] {
  color: #dc3545;
  font-weight: bold;
}

/* Metronome Controls */
.metronome-controls[data-v-34bcc423] {
  background: #f5f5f5;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
}
.bpm-control[data-v-34bcc423] {
  margin-bottom: 15px;
  text-align: center;
}
.bpm-control label[data-v-34bcc423] {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  font-size: 18px;
}
.bpm-control input[type="range"][data-v-34bcc423] {
  width: 100%;
  max-width: 400px;
}
.control-buttons[data-v-34bcc423] {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.control-buttons button[data-v-34bcc423] {
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s;
}
.btn-start[data-v-34bcc423] {
  background: #28a745;
  color: white;
}
.btn-start[data-v-34bcc423]:hover:not(:disabled) {
  background: #218838;
}
.btn-stop[data-v-34bcc423] {
  background: #dc3545;
  color: white;
}
.btn-stop[data-v-34bcc423]:hover:not(:disabled) {
  background: #c82333;
}
.btn-reset[data-v-34bcc423] {
  background: #6c757d;
  color: white;
}
.btn-reset[data-v-34bcc423]:hover {
  background: #5a6268;
}
.btn-click[data-v-34bcc423] {
  background: #007bff;
  color: white;
}
.btn-click[data-v-34bcc423]:hover {
  background: #0069d9;
}
button[data-v-34bcc423]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Timeline */
.timeline-container[data-v-34bcc423] {
  margin: 30px 0;
}
.timeline-header[data-v-34bcc423] {
  text-align: center;
  margin-bottom: 15px;
}
.beat-indicator[data-v-34bcc423] {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}
.countdown-indicator[data-v-34bcc423] {
  color: #e67e22;
  animation: pulse-countdown-34bcc423 1s ease-in-out infinite;
}
@keyframes pulse-countdown-34bcc423 {
0%, 100% { opacity: 1;
}
50% { opacity: 0.6;
}
}
.timeline[data-v-34bcc423] {
  position: relative;
  height: 120px;
  background: linear-gradient(to bottom, #2c3e50 0%, #34495e 100%);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.3);
}
.timeline-track[data-v-34bcc423] {
  position: relative;
  height: 100%;
}

/* Playhead */
.playhead[data-v-34bcc423] {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #e74c3c;
  box-shadow: 0 0 10px rgba(231, 76, 60, 0.8);
  z-index: 10;
  transform: translateX(-50%);
}

/* Strum Markers */
.strum-marker[data-v-34bcc423] {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  transition: all 0.3s;
}
.strum-icon[data-v-34bcc423] {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 5px;
  transition: all 0.3s;
}
.strum-strings[data-v-34bcc423] {
  font-size: 11px;
  font-weight: bold;
  color: white;
  background: rgba(0,0,0,0.5);
  padding: 2px 6px;
  border-radius: 3px;
}

/* Strum States */
.strum-future .strum-icon[data-v-34bcc423] {
  color: rgba(255, 255, 255, 0.5);
}
.strum-current .strum-icon[data-v-34bcc423] {
  color: #f39c12;
  font-size: 40px;
  animation: pulse-34bcc423 0.5s ease-in-out infinite;
}
.strum-current.strum-emphasis .strum-icon[data-v-34bcc423] {
  color: #e67e22;
  font-size: 44px;
}
.strum-past .strum-icon[data-v-34bcc423] {
  color: rgba(255, 255, 255, 0.3);
  font-size: 24px;
}
.strum-success .strum-icon[data-v-34bcc423] {
  color: #2ecc71 !important;
}
.strum-failure .strum-icon[data-v-34bcc423] {
  color: #e74c3c !important;
}
@keyframes pulse-34bcc423 {
0%, 100% { transform: scale(1);
}
50% { transform: scale(1.2);
}
}

/* Feedback */
.strum-feedback[data-v-34bcc423] {
  margin-top: 20px;
  padding: 15px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}
.feedback-success[data-v-34bcc423] {
  background: #d4edda;
  color: #155724;
  border: 2px solid #c3e6cb;
}
.feedback-error[data-v-34bcc423] {
  background: #f8d7da;
  color: #721c24;
  border: 2px solid #f5c6cb;
}
.feedback-error div[data-v-34bcc423] {
  margin: 5px 0;
}

/* Score Display */
.score-display[data-v-34bcc423] {
  display: flex;
  justify-content: center;
  gap: 40px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 10px;
  margin: 20px 0;
}
.score-item[data-v-34bcc423] {
  text-align: center;
}
.score-label[data-v-34bcc423] {
  display: block;
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}
.score-value[data-v-34bcc423] {
  display: block;
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

/* Debug Panel */
.debug-panel[data-v-34bcc423] {
  margin-top: 30px;
  padding: 15px;
  background: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 5px;
}
.debug-panel summary[data-v-34bcc423] {
  cursor: pointer;
  font-weight: bold;
  user-select: none;
}
.debug-content[data-v-34bcc423] {
  margin-top: 10px;
  font-family: monospace;
  font-size: 12px;
}
.debug-content p[data-v-34bcc423] {
  margin: 5px 0;
}
.event-log[data-v-34bcc423] {
  max-height: 150px;
  overflow-y: auto;
  background: white;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 5px;
  margin: 5px 0;
  font-family: monospace;
  font-size: 11px;
}
.event-item[data-v-34bcc423] {
  padding: 2px 5px;
  border-bottom: 1px solid #eee;
}
.event-item[data-v-34bcc423]:last-child {
  border-bottom: none;
}
.detection-result[data-v-34bcc423] {
  background: #e8f4f8;
  border: 1px solid #b3d9e6;
  border-radius: 3px;
  padding: 10px;
  margin-top: 10px;
}
.detection-result p[data-v-34bcc423] {
  margin: 3px 0;
  font-size: 12px;
}

.relative-note-label[data-v-489532a1] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  gap: 1px;
}
.octave-dots[data-v-489532a1] {
  display: flex;
  gap: 1.5px;
  height: 4px;
}
.octave-dot[data-v-489532a1] {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: currentColor;
}
.syllable[data-v-489532a1] {
  font-size: 0.6rem;
  font-weight: 700;
}

.scale-editor-container[data-v-d1b800d2] {
  max-width: 1200px;
  margin: 0 auto;
}
.header-section[data-v-d1b800d2] {
  margin-bottom: 1.5rem;
  text-align: center;
}
.header-section h2[data-v-d1b800d2] {
  font-size: 1.5rem;
  font-weight: bold;
  color: #1f2937;
}
.subtitle[data-v-d1b800d2] {
  color: #6b7280;
  font-size: 0.9rem;
  margin-top: 0.25rem;
}
.loading-note[data-v-d1b800d2] {
  color: #ca8a04;
  font-size: 0.85rem;
  margin-top: 0.5rem;
  font-style: italic;
}
.controls[data-v-d1b800d2] {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
}
.control-group[data-v-d1b800d2] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.control-group.grow[data-v-d1b800d2] {
  flex: 1;
  min-width: 180px;
}
.control-group.buttons[data-v-d1b800d2] {
  flex-direction: row;
  align-items: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.control-group label[data-v-d1b800d2] {
  font-size: 0.75rem;
  font-weight: 600;
  color: #4b5563;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.checkbox-label[data-v-d1b800d2] {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  white-space: nowrap;
}
.checkbox-label input[data-v-d1b800d2] {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
}
.relative-mapping .mapping-row[data-v-d1b800d2] {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.mapping-equals[data-v-d1b800d2] {
  font-weight: 700;
  color: #4b5563;
}
.control-input[data-v-d1b800d2] {
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.875rem;
  background: white;
  color: #1f2937;
}
.btn-small[data-v-d1b800d2] {
  padding: 0.5rem 0.9rem;
  font-size: 0.8rem;
}
.btn-secondary[data-v-d1b800d2] {
  background-color: #e5e7eb;
  color: #1f2937;
}
.btn-secondary[data-v-d1b800d2]:hover:not(:disabled) {
  background-color: #d1d5db;
}
.status-message[data-v-d1b800d2] {
  color: #16a34a;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
  text-align: center;
}
.fretboard-scroll[data-v-d1b800d2] {
  overflow-x: auto;
  border: 1px solid #000;
  border-radius: 4px;
  background: #fff;
}
.fretboard-scale[data-v-d1b800d2] {
  display: grid;
  grid-auto-rows: 48px;
  min-width: max-content;
}
.corner-cell[data-v-d1b800d2] {
  border-bottom: 2px solid #000;
}
.fret-head[data-v-d1b800d2] {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #000;
  border-bottom: 2px solid #000;
  border-left: 1px solid #9ca3af;
}
.fret-head-inlay[data-v-d1b800d2] {
  background-color: #f3f4f6;
}
.fret-head-blocked[data-v-d1b800d2] {
  background-color: #d1d5db;
  color: #6b7280;
}
.fret-head-capo[data-v-d1b800d2] {
  position: relative;
}
.fret-head-capo[data-v-d1b800d2]::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background-color: #dc2626;
  transform: translateX(-50%);
}
.string-head[data-v-d1b800d2] {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: #000;
  border-right: 2px solid #000;
  background-color: #f9fafb;
  cursor: pointer;
}
.string-head[data-v-d1b800d2]:hover {
  background-color: #e5e7eb;
}
.string-head-blocked[data-v-d1b800d2] {
  cursor: not-allowed;
  color: #9ca3af;
  background-color: #e5e7eb;
}
.string-head-blocked[data-v-d1b800d2]:hover {
  background-color: #e5e7eb;
}
.fret-cell[data-v-d1b800d2] {
  position: relative;
  border-left: 1px solid #9ca3af;
  cursor: pointer;
  background-color: #fff;
}
.fret-cell-inlay[data-v-d1b800d2] {
  background-color: #f3f4f6;
}
.fret-cell-nut[data-v-d1b800d2] {
  border-left: 3px solid #000;
}
.fret-cell-capo[data-v-d1b800d2]::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background-color: #dc2626;
  transform: translateX(-50%);
  z-index: 1;
}
.fret-cell-blocked[data-v-d1b800d2] {
  background-color: #d1d5db;
  cursor: not-allowed;
}
.fret-cell-blocked[data-v-d1b800d2]:hover {
  background-color: #d1d5db;
}
.fret-cell[data-v-d1b800d2]:hover {
  background-color: #e5e7eb;
}
.fret-wire[data-v-d1b800d2] {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #4b5563;
}
.string-wire[data-v-d1b800d2] {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background-color: #9ca3af;
  transform: translateY(-50%);
}
.note-marker[data-v-d1b800d2] {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 2px solid #000;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: #000;
  z-index: 2;
}
.header-marker[data-v-d1b800d2] {
  inset: auto;
  top: 50%;
  left: 50%;
  width: 38px;
  height: 38px;
  transform: translate(-50%, -50%);
}
.note-marker-capo[data-v-d1b800d2] {
  border-color: #dc2626;
}
.legend[data-v-d1b800d2] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  font-size: 0.85rem;
  color: #4b5563;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.capo-note[data-v-d1b800d2] {
  font-style: italic;
}

/* Printing: keep everything black & white and drop the editing controls */
@media print {
.no-print[data-v-d1b800d2] {
    display: none !important;
}
.scale-editor-container[data-v-d1b800d2] {
    box-shadow: none;
    padding: 0;
}
.fretboard-scroll[data-v-d1b800d2] {
    overflow: visible;
}
.fret-head[data-v-d1b800d2],
  .string-head[data-v-d1b800d2],
  .fret-cell[data-v-d1b800d2],
  .fret-cell-inlay[data-v-d1b800d2],
  .fret-head-inlay[data-v-d1b800d2],
  .fret-cell-blocked[data-v-d1b800d2],
  .fret-head-blocked[data-v-d1b800d2],
  .string-head-blocked[data-v-d1b800d2] {
    background-color: #fff !important;
    color: #000 !important;
}
.fret-cell-capo[data-v-d1b800d2]::before,
  .fret-head-capo[data-v-d1b800d2]::after {
    background-color: #000 !important;
}
.note-marker-capo[data-v-d1b800d2] {
    border-color: #000 !important;
}
}

.progress-chart[data-v-01c78039] {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.chart-header[data-v-01c78039] {
  padding: 1.5rem;
}
.header-content[data-v-01c78039] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.chart-header h2[data-v-01c78039] {
  font-size: 1.5rem;
  font-weight: bold;
  color: #1f2937;
  margin: 0 0 0.5rem 0;
}
.chart-description[data-v-01c78039] {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0 0 0.5rem 0;
}
.backup-note[data-v-01c78039] {
  font-size: 0.8125rem;
  color: #6366f1;
  margin: 0.5rem 0 0 0;
  font-style: italic;
}
.backup-note strong[data-v-01c78039] {
  font-weight: 600;
}
.chart-container[data-v-01c78039] {
  padding: 1.5rem;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.chart-section-title[data-v-01c78039] {
  font-size: 1.125rem;
  font-weight: bold;
  color: #1f2937;
  margin: 0 0 1rem 0;
  align-self: flex-start;
}
.chart[data-v-01c78039] {
  width: 100%;
}
.loading-message[data-v-01c78039],
.error-message[data-v-01c78039],
.empty-message[data-v-01c78039] {
  text-align: center;
  padding: 2rem;
  color: #6b7280;
  font-size: 1rem;
}
.error-message[data-v-01c78039] {
  color: #ef4444;
}
.legend-container[data-v-01c78039] {
  padding: 1.5rem;
}
.legend-container h3[data-v-01c78039] {
  font-size: 1.125rem;
  font-weight: bold;
  color: #1f2937;
  margin: 0 0 1rem 0;
}
.legend-items[data-v-01c78039] {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.legend-item[data-v-01c78039] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.legend-color[data-v-01c78039] {
  width: 20px;
  height: 20px;
  border-radius: 4px;
}
.legend-item span[data-v-01c78039] {
  font-size: 0.875rem;
  color: #374151;
  font-weight: 500;
}
.daily-averages-container[data-v-01c78039] {
  padding: 1.5rem;
}
.daily-averages-container h3[data-v-01c78039] {
  font-size: 1.125rem;
  font-weight: bold;
  color: #1f2937;
  margin: 0 0 1rem 0;
}
.daily-averages-list[data-v-01c78039] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.daily-average-item[data-v-01c78039] {
  padding: 1rem;
  background-color: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}
.date-header[data-v-01c78039] {
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #d1d5db;
}
.averages-grid[data-v-01c78039] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.chord-average[data-v-01c78039] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
}
.chord-name[data-v-01c78039] {
  color: #6b7280;
  font-weight: 500;
}
.chord-time[data-v-01c78039] {
  color: #1f2937;
  font-weight: 600;
  font-family: 'Courier New', monospace;
}
.overall-average[data-v-01c78039] {
  font-size: 0.875rem;
  font-weight: 600;
  color: #059669;
  padding-top: 0.5rem;
  border-top: 1px solid #d1d5db;
}
.tab-navigation[data-v-01c78039] {
  padding: 1rem;
  display: flex;
  gap: 0.5rem;
  background: white;
  border-radius: 8px;
}
.tab-button[data-v-01c78039] {
  padding: 0.75rem 1.5rem;
  border: 1px solid #d1d5db;
  background: white;
  color: #6b7280;
  border-radius: 6px;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.tab-button[data-v-01c78039]:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}
.tab-button.active[data-v-01c78039] {
  background: #312e81;
  color: white;
  border-color: #312e81;
}

/* Accuracy container */
.accuracy-container[data-v-01c78039] {
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.accuracy-description[data-v-01c78039] {
  font-size: 0.875rem;
  color: #6b7280;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  font-style: italic;
}
.accuracy-value[data-v-01c78039] {
  color: #1f2937;
  font-weight: 600;
  font-family: 'Courier New', monospace;
}

/* Accuracy color coding */
.accuracy-excellent[data-v-01c78039] {
  background-color: #d1fae5 !important;
  border-left: 4px solid #10b981;
}
.accuracy-good[data-v-01c78039] {
  background-color: #dbeafe !important;
  border-left: 4px solid #3b82f6;
}
.accuracy-fair[data-v-01c78039] {
  background-color: #fef3c7 !important;
  border-left: 4px solid #f59e0b;
}
.accuracy-poor[data-v-01c78039] {
  background-color: #fee2e2 !important;
  border-left: 4px solid #ef4444;
}
.accuracy-excellent .overall-average[data-v-01c78039] {
  color: #059669;
}
.accuracy-good .overall-average[data-v-01c78039] {
  color: #2563eb;
}
.accuracy-fair .overall-average[data-v-01c78039] {
  color: #d97706;
}
.accuracy-poor .overall-average[data-v-01c78039] {
  color: #dc2626;
}

.app-container[data-v-d17b22eb] {
  display: flex;
  height: 100vh;
  background-color: #f3f4f6;
}
.sidebar[data-v-d17b22eb] {
  width: 256px;
  background-color: #312e81;
  color: white;
  flex-shrink: 0;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.sidebar-header[data-v-d17b22eb] {
  padding: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.sidebar-header h1[data-v-d17b22eb] {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}
.sidebar-header p[data-v-d17b22eb] {
  font-size: 0.875rem;
  color: #c7d2fe;
}
.menu[data-v-d17b22eb] {
  margin-top: 1.5rem;
  flex: 1;
}
.menu-item[data-v-d17b22eb] {
  width: 100%;
  text-align: left;
  padding: 1rem 1.5rem;
  background: none;
  color: white;
  border: none;
  border-left: 4px solid transparent;
  transition: all 0.15s ease-in-out;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.menu-item[data-v-d17b22eb]:hover {
  background-color: #3730a3;
}
.menu-item.active[data-v-d17b22eb] {
  background-color: #3730a3;
  border-left-color: #818cf8;
}
.menu-icon[data-v-d17b22eb] {
  font-size: 1.5rem;
}
.menu-content[data-v-d17b22eb] {
  flex: 1;
}
.menu-label[data-v-d17b22eb] {
  font-weight: 600;
  font-size: 0.9375rem;
}
.menu-description[data-v-d17b22eb] {
  font-size: 0.75rem;
  color: #c7d2fe;
  margin-top: 0.25rem;
}
.sidebar-footer[data-v-d17b22eb] {
  padding: 1.5rem;
  background-color: #1e1b4b;
  text-align: center;
}
.sidebar-footer p[data-v-d17b22eb] {
  font-size: 0.75rem;
  color: #c7d2fe;
}
.main-content[data-v-d17b22eb] {
  flex: 1;
  overflow-y: auto;
}
.content-wrapper[data-v-d17b22eb] {
  padding: 2rem;
}
@media print {
.sidebar[data-v-d17b22eb] {
    display: none !important;
}
.app-container[data-v-d17b22eb] {
    height: auto;
    background-color: #fff;
}
.main-content[data-v-d17b22eb] {
    overflow: visible;
}
.content-wrapper[data-v-d17b22eb] {
    padding: 0;
}
}