.fretboard-container{display:inline-block;position:relative;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.fretboard-background{border-radius:4px;box-shadow:0 2px 8px #0000001a}.string{border-radius:1px;box-shadow:0 1px 2px #0003}.nut{border-radius:2px;box-shadow:0 1px 3px #0000004d}.fret{border-radius:1px;box-shadow:0 0 1px #0000004d}.end-cap{border-radius:1px;box-shadow:0 0 2px #0006}.fret-marker{opacity:.6;box-shadow:inset 0 1px 2px #0003}.fret-marker-12{opacity:.8}.fret-number{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;pointer-events:none}.dot{cursor:pointer;transition:all .2s ease;box-shadow:0 2px 6px #0000004d}.dot:hover{transform:scale(1.1);box-shadow:0 3px 10px #0006}.dot.open-string{box-shadow:0 0 0 2px currentColor,0 2px 6px #0003}.dot.open-string:hover{transform:scale(1.1);box-shadow:0 0 0 2px currentColor,0 3px 10px #0000004d}.fretboard-dot{cursor:pointer;transition:all .2s ease;box-shadow:0 2px 6px #0000004d}.fretboard-dot:hover{transform:scale(1.1);box-shadow:0 3px 10px #0006}.fretboard-dot.user-dot{cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px #0006}.fretboard-dot.user-dot:hover{transform:scale(1.1);box-shadow:0 3px 12px #00000080}.fret-click-target{position:absolute;cursor:pointer;z-index:5;background:transparent;border:none;pointer-events:auto;border-radius:50%;transition:background-color .1s ease}.fret-click-target:hover{background:#3498db1a}.fretboard-dot.playing{z-index:20!important}.scale-dot{pointer-events:none;opacity:.7;transition:opacity .3s ease}.fretboard-container:hover .scale-dot{opacity:.4}@media(max-width:768px){.fretboard-container{max-width:100%;max-height:100vh}.dot{transform:scale(.9)}.dot:hover{transform:scale(1)}.fretboard-dot{transform:scale(.9)}.fretboard-dot:hover{transform:scale(1)}}.dot-appear{animation:dotAppear .3s ease-out}@keyframes dotAppear{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.dot-pulse{animation:dotPulse 1s ease-in-out infinite alternate}@keyframes dotPulse{0%{opacity:.7;transform:scale(.95)}to{opacity:1;transform:scale(1.05)}}.fretboard-dark .fretboard-background{background:#2d2d2d!important}.fretboard-dark .string{background:#666!important}.fretboard-dark .fret,.fretboard-dark .end-cap{background:#999!important}.fretboard-dark .nut{background:#111!important}.fretboard-dark .fret-number{color:#ccc!important}.fretboard-dark .fret-marker{background:#fff3!important}.fretboard-high-contrast .fretboard-background{background:#000!important}.fretboard-high-contrast .string,.fretboard-high-contrast .fret,.fretboard-high-contrast .end-cap,.fretboard-high-contrast .nut{background:#fff!important}.fretboard-high-contrast .fret-number{color:#fff!important;font-weight:700}.fretboard-high-contrast .dot,.fretboard-high-contrast .fretboard-dot{background:#ff0!important;color:#000!important;border:2px solid #000!important}@media print{.fretboard-container{break-inside:avoid;page-break-inside:avoid}.dot,.fretboard-dot{box-shadow:none;border:1px solid #000}.fret-marker{opacity:1}}.audio-controls{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0;align-items:center}.play-button{background:#27ae60;color:#fff;border:none;padding:12px 20px;border-radius:6px;cursor:pointer;font-size:14px;font-weight:700;transition:all .2s ease;display:flex;align-items:center;gap:8px}.play-button:hover{background:#229954;transform:translateY(-1px);box-shadow:0 4px 12px #27ae604d}.play-button:active{transform:translateY(0)}.play-button.playing{background:#e74c3c}.play-button.playing:hover{background:#c0392b}.play-button:disabled{background:#95a5a6;cursor:not-allowed;transform:none;box-shadow:none}.play-button .icon{font-size:16px}.stop-button{background:#e74c3c;color:#fff;border:none;padding:12px 20px;border-radius:6px;cursor:pointer;font-size:14px;font-weight:700;transition:all .2s ease}.stop-button:hover{background:#c0392b;transform:translateY(-1px);box-shadow:0 4px 12px #e74c3c4d}.stop-button:active{transform:translateY(0)}.audio-mode-selector{display:flex;gap:5px;margin-left:20px}.mode-button{background:#34495e;color:#fff;border:none;padding:8px 16px;border-radius:4px;cursor:pointer;font-size:12px;transition:all .2s ease}.mode-button:hover{background:#2c3e50}.mode-button.active{background:#3498db}.mode-button.active:hover{background:#2980b9}.tempo-control{display:flex;align-items:center;gap:10px;margin-left:20px;color:#2c3e50;font-size:14px}.tempo-control label{font-weight:700}.tempo-control input{width:80px;padding:5px 8px;border:2px solid #ddd;border-radius:4px;font-size:12px}.tempo-control input:focus{outline:none;border-color:#3498db}.audio-status{margin-left:20px;padding:8px 12px;background:#ecf0f1;border-radius:4px;font-size:12px;color:#2c3e50}.audio-status.loading{background:#f39c12;color:#fff}.audio-status.ready{background:#27ae60;color:#fff}.audio-status.error{background:#e74c3c;color:#fff}@media(max-width:768px){.audio-controls{flex-direction:column;align-items:stretch}.audio-mode-selector,.tempo-control{margin-left:0;justify-content:center}.audio-status{margin-left:0;text-align:center}}