.fretboard{background-image:linear-gradient(180deg,#604028,#4A2E1C);border-radius:6px;padding:20px 10px;box-shadow:0 8px 15px rgba(0,0,0,.3),0 2px 5px rgba(0,0,0,.2);position:relative;overflow:hidden;border:1px solid #3d2515;margin-left:-10px}.nut-line{height:100%;background-image:linear-gradient(90deg,#E0D6C0,#C0B098,#E0D6C0);position:absolute;top:0;box-shadow:1px 0 3px rgba(0,0,0,.6);border-radius:2px 0 0 2px;z-index:0}.string{height:2px;background-image:linear-gradient(90deg,#D4D4D4,#A0A0A0,#D4D4D4);position:absolute;left:0;right:0;transition:background-color .2s ease-in-out;box-shadow:0 0 1px rgba(255,255,255,.3)}.string:hover{background-image:linear-gradient(90deg,#E0E0E0,#B0B0B0,#E0E0E0)}.string.e-high{top:15%;height:1px}.string.b{top:30%;height:1.5px}.string.g{top:45%;height:2px}.string.d{top:60%;height:2.5px}.string.a{top:75%;height:3px}.string.e-low{top:90%;height:3.5px}.fretboard.left-handed .string.e-high{top:90%}.fretboard.left-handed .string.b{top:75%}.fretboard.left-handed .string.g{top:60%}.fretboard.left-handed .string.d{top:45%}.fretboard.left-handed .string.a{top:30%}.fretboard.left-handed .string.e-low{top:15%}.fret{width:4px;height:100%;background-image:linear-gradient(90deg,#C0C0C0,#A0A0A0,#C0C0C0);position:absolute;top:0;box-shadow:1px 0 2px rgba(0,0,0,.4);border-radius:1px}.fret-marker{width:14px;height:14px;background-color:#CDC9C0;box-shadow:inset 0 0 3px rgba(0,0,0,.4),0 0 2px rgba(255,255,255,.2);z-index:0}.fret-marker,.note-dot{border-radius:50%;position:absolute}.note-dot{width:22px;height:22px;transform:translate(-50%,-50%);cursor:pointer;display:none;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:#FFFFFF;transition:transform .1s ease-out,background-color .2s ease-in-out,box-shadow .2s ease-in-out,outline-offset .1s ease-out;text-shadow:0 0 2px rgba(0,0,0,.5);z-index:1}.note-dot.visible{display:flex}.note-dot:hover{transform:translate(-50%,-50%) scale(1.15)}.note-dot.root{background-color:#FF6347;box-shadow:0 0 8px #FF6347}.note-dot.scale{background-color:#8BC34A;box-shadow:0 0 5px #8BC34A}.note-dot.highlighted{transform:translate(-50%,-50%) scale(1.1);outline:2px solid hsl(var(--primary)/.8);outline-offset:2px}.note-dot.playing{background-color:#FFD700;color:#333333;box-shadow:0 0 12px 3px #FFD700,0 0 20px 6px rgba(255,215,0,.7);transform:translate(-50%,-50%) scale(1.2);z-index:2}.fret-number{position:absolute;top:0;color:hsl(var(--muted-foreground));font-size:.75rem;font-weight:500;transform:translateX(-50%);user-select:none}