:root{--bg-color: #121212;--surface-color: #1e1e1e;--primary-color: #bb86fc;--secondary-color: #03dac6;--text-color: #e0e0e0;--fret-color: #444;--string-color: #666;--active-note-color: #cf6679}body{margin:0;font-family:Inter,sans-serif;background-color:var(--bg-color);color:var(--text-color);display:flex;justify-content:center;align-items:center;min-height:100vh}#app{width:100%;max-width:1200px;padding:2rem;text-align:center}h1{font-size:3rem;margin-bottom:2rem;background:linear-gradient(45deg,var(--primary-color),var(--secondary-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.fretboard-container[data-v-03c8b3c7]{overflow-x:auto;padding:20px;background:#222;border-radius:10px;box-shadow:0 10px 30px #00000080;display:flex;flex-direction:column;gap:20px}.controls-header[data-v-03c8b3c7]{display:flex;justify-content:flex-end}.notation-selector[data-v-03c8b3c7]{display:flex;gap:15px;background:#333;padding:5px 15px;border-radius:20px}.notation-selector label[data-v-03c8b3c7]{cursor:pointer;color:#aaa;font-size:.9rem;display:flex;align-items:center;gap:5px}.notation-selector input[data-v-03c8b3c7]{accent-color:var(--secondary-color)}.fretboard[data-v-03c8b3c7]{display:flex;flex-direction:column;position:relative;min-width:1000px}.string[data-v-03c8b3c7]{display:flex;height:40px;position:relative;align-items:center}.string[data-v-03c8b3c7]:before{content:"";position:absolute;left:0;right:0;height:2px;background:#888;z-index:1;top:50%;transform:translateY(-50%);box-shadow:0 1px 2px #00000080}.string[data-v-03c8b3c7]:nth-child(4):before,.string[data-v-03c8b3c7]:nth-child(5):before{height:3px}.string[data-v-03c8b3c7]:nth-child(6):before{height:4px}.fret-cell[data-v-03c8b3c7]{flex:1;border-right:2px solid #555;height:100%;position:relative;display:flex;justify-content:center;align-items:center;z-index:2;cursor:pointer}.open-string[data-v-03c8b3c7]{border-right:4px solid #ddd;flex:0 0 50px;background:#1a1a1a}.tuning-controls[data-v-03c8b3c7]{display:flex;align-items:center;margin-right:10px;z-index:5}.tune-btn[data-v-03c8b3c7]{background:#333;border:none;color:#888;width:20px;height:20px;border-radius:50%;cursor:pointer;font-size:.8rem;display:flex;justify-content:center;align-items:center;transition:all .2s}.tune-btn[data-v-03c8b3c7]:hover{background:#555;color:#fff}.tuning-label[data-v-03c8b3c7]{width:30px;text-align:center;font-weight:700;color:#000;background:var(--primary-color);font-size:.9rem;padding:4px 0;border-radius:4px;box-shadow:0 2px 5px #00000080;margin:0 5px}.note-marker[data-v-03c8b3c7]{width:28px;height:28px;background:var(--secondary-color);border-radius:50%;z-index:10;box-shadow:0 0 10px var(--secondary-color);display:flex;justify-content:center;align-items:center;font-size:.8rem;font-weight:700;color:#000;animation:popIn-03c8b3c7 .1s ease-out}@keyframes popIn-03c8b3c7{0%{transform:scale(0)}80%{transform:scale(1.2)}to{transform:scale(1)}}.fret-markers[data-v-03c8b3c7]{display:flex;margin-top:10px;color:#666}.marker-row[data-v-03c8b3c7]{display:flex;width:100%}.tuning-label-spacer[data-v-03c8b3c7]{width:80px;margin-right:10px;flex-shrink:0}.fret-number[data-v-03c8b3c7]{flex:1;text-align:center;font-size:.8rem;transition:all .1s}.active-fret[data-v-03c8b3c7]{color:var(--secondary-color);font-weight:700;text-shadow:0 0 8px var(--secondary-color);transform:scale(1.2)}.nut-number[data-v-03c8b3c7]{flex:0 0 50px}.app-container[data-v-8750153e]{display:flex;flex-direction:column;align-items:center;gap:2rem}.error-message[data-v-8750153e]{color:#cf6679;background:#cf66791a;padding:1rem;border-radius:8px;border:1px solid #cf6679}.status-bar[data-v-8750153e]{font-size:1.2rem;color:var(--secondary-color);min-height:1.5em}.instructions[data-v-8750153e]{margin-top:2rem;color:#888;font-size:.9rem}