html,body{height:100%;margin:0;background-color:#212529;overflow:hidden;overflow-y:auto;user-select:none;font-family:"JetBrains Mono",monospace}body::-webkit-scrollbar{display:none}body{-ms-overflow-style:none;scrollbar-width:none}.fretboard-container{display:flex;justify-content:flex-start;align-items:center;height:100vh;width:100vw;position:relative;padding:20px;box-sizing:border-box;overflow:hidden;cursor:default}.fretboard-wrapper{position:relative;display:flex;justify-content:flex-start;align-items:center;transform-origin:0 50%;transition:transform .1s ease-out}.fretboard-rotation-container{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);display:flex;justify-content:flex-start;align-items:center;transform-origin:center;transition:transform .3s ease-out;cursor:grab;touch-action:none}.fretboard-rotation-container:active{cursor:grabbing}.fretboard{position:relative;background:linear-gradient(45deg, #F5DEB3, #DEB887, #D2B48C);box-shadow:0 15px 40px rgba(0,0,0,.6);overflow:visible;border-radius:0 8px 8px 0}.fretboard.horizontal{display:flex;flex-direction:column;width:1400px;height:180px}.fretboard.vertical{display:flex;flex-direction:row;width:180px;height:1400px;transform:rotate(90deg);transform-origin:center}.fretboard-wrapper.vertical{transform:rotate(90deg);transform-origin:center}.fret-row{display:flex;position:relative;flex:1}.string-vibration{animation:stringVibrate .15s ease-out}@keyframes stringVibrate{0%{transform:translateY(-50%)}20%{transform:translateY(calc(-50% - 3px))}40%{transform:translateY(calc(-50% + 3px))}60%{transform:translateY(calc(-50% - 2px))}80%{transform:translateY(calc(-50% + 1px))}100%{transform:translateY(-50%)}}.guitar-string{position:absolute;left:0;top:50%;width:100%;transform:translateY(-50%);z-index:20;pointer-events:none;box-shadow:0 -1px 2px rgba(0,0,0,.4),0 1px 1px rgba(255,255,255,.2)}.guitar-string-1{height:1px;background:linear-gradient(to bottom, #E8E8E8, #D0D0D0, #C8C8C8)}.guitar-string-2{height:1.5px;background:linear-gradient(to bottom, #E0E0E0, #C8C8C8, #C0C0C0)}.guitar-string-3{height:2px;background:linear-gradient(to bottom, #D8D8D8, #C0C0C0, #B8B8B8)}.guitar-string-4{height:3px;background:repeating-linear-gradient(90deg, #C0C0C0 0px, #B8B8B8 0.5px, #C0C0C0 1px, #A8A8A8 1.5px);border-radius:1px}.guitar-string-5{height:3.5px;background:repeating-linear-gradient(90deg, #B8B8B8 0px, #A8A8A8 0.5px, #B8B8B8 1px, #989898 1.5px);border-radius:1.5px}.guitar-string-6{height:4px;background:repeating-linear-gradient(90deg, #A8A8A8 0px, #989898 0.5px, #A8A8A8 1px, #888888 1.5px);border-radius:2px}.fret-number{position:absolute;color:#8b4513;font-size:10px;font-weight:bold;background:rgba(255,255,255,.8);padding:2px 4px;border-radius:3px;z-index:15}.horizontal .fret-number{top:-18px;left:50%;transform:translateX(-50%)}.vertical .fret-number{left:-22px;top:50%;transform:translateY(-50%)}.string-label{position:absolute;color:#8b4513;font-size:12px;font-weight:bold;background:rgba(255,255,255,.8);padding:3px 6px;border-radius:3px;z-index:15}.horizontal .string-label{left:-30px;top:50%;transform:translateY(-50%);width:25px;text-align:center}.vertical .string-label{top:-22px;left:50%;transform:translateX(-50%);width:25px;text-align:center}.fret-note{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:32px;height:32px;background:radial-gradient(circle, #FF4444, #CC0000);border-radius:50%;color:#fff;font-size:16px;font-weight:bold;opacity:0;pointer-events:none;transition:none;font-family:"JetBrains Mono",monospace;z-index:30;box-shadow:0 2px 6px rgba(255,68,68,.6);justify-content:center;align-items:center}.fret-note.show{display:flex;opacity:1;pointer-events:auto;transition:none;z-index:100}.fret-note:not(.show){opacity:0;transition:opacity .3s cubic-bezier(0.22, 1, 0.36, 1);pointer-events:none}.scale-note{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:28px;height:28px;background:radial-gradient(circle, #FFFFFF, #E0E0E0);border:2px solid #333;border-radius:50%;color:#333;font-size:14px;font-weight:bold;font-family:"JetBrains Mono",monospace;z-index:25;box-shadow:0 2px 4px rgba(0,0,0,.3);justify-content:center;align-items:center;display:none;pointer-events:none}.scale-note.root{border:2px solid #d64545;color:#d64545;font-weight:900}.scale-note.third,.scale-note.seventh{border:2px solid #d64545;color:#333;font-weight:bold}.scale-note.show{display:flex}.scale-note.clicked{background:radial-gradient(circle, #FF4444, #CC0000);width:32px;height:32px;border:none;color:#fff;z-index:100;box-shadow:0 2px 6px rgba(255,68,68,.6)}.fretboard-rotation-container .fret-note{transform:translate(-50%, -50%) rotate(calc(-1 * var(--rotation, 0deg)))}.fretboard-rotation-container .scale-note{transform:translate(-50%, -50%) rotate(calc(-1 * var(--rotation, 0deg)))}.fret-marker{position:absolute;width:24px;height:24px;background:radial-gradient(circle, #333 30%, #111 70%);border:1px solid #000;border-radius:50%;z-index:15;opacity:.9;pointer-events:none}.fret-marker.single{top:50%;left:50%;transform:translate(-50%, -50%)}.fret-marker.double-top{top:30%;left:50%;transform:translate(-50%, -50%)}.fret-marker.double-bottom{top:70%;left:50%;transform:translate(-50%, -50%)}.side-marker{position:absolute;width:6px;height:6px;background:#777;border:none;border-radius:50%;z-index:15;opacity:.8;pointer-events:none;box-shadow:0 1px 2px rgba(0,0,0,.4)}.fretboard:not(.bass-mode) .side-marker.single{top:calc(100% + 15px);left:50%;transform:translate(-50%, -50%)}.fretboard:not(.bass-mode) .side-marker.double-top{top:calc(100% + 15px);left:40%;transform:translate(-50%, -50%)}.fretboard:not(.bass-mode) .side-marker.double-bottom{top:calc(100% + 15px);left:60%;transform:translate(-50%, -50%)}.fretboard.bass-mode .side-marker.single{top:calc(100% + 15px);left:50%;transform:translate(-50%, -50%)}.fretboard.bass-mode .side-marker.double-top{top:calc(100% + 15px);left:40%;transform:translate(-50%, -50%)}.fretboard.bass-mode .side-marker.double-bottom{top:calc(100% + 15px);left:60%;transform:translate(-50%, -50%)}#rotate-button{color:#fff}#rotate-button:hover{color:#fff}@keyframes countdownPulse{0%{transform:translateY(0) scale(1)}40%{transform:translateY(-2px) scale(1.5)}100%{transform:translateY(0) scale(1)}}#note-duration-display.pulse{animation:countdownPulse .05s ease-out}#key-button.pulse{animation:countdownPulse .05s ease-out}.scale-option:hover{background-color:rgba(255,255,255,.1)}.scale-option:last-child{border-bottom:none}.key-option:hover{background-color:rgba(255,255,255,.1)}.key-option:last-child{border-bottom:none}#play-mode-button:hover{background:#d32f2f !important}#play-mode-modal{font-family:"JetBrains Mono",monospace}#play-mode-modal input[type=number]{font-family:"JetBrains Mono",monospace}#play-mode-modal select{font-family:"JetBrains Mono",monospace}#play-mode-modal button{font-family:"JetBrains Mono",monospace;transition:all .2s ease}#play-mode-modal button:hover{transform:translateY(-1px);box-shadow:0 2px 4px rgba(0,0,0,.2)}#bpm-decrease:hover,#bpm-increase:hover,#bars-decrease:hover,#bars-increase:hover{background:#666 !important}#modal-close:hover{background:#777 !important}#play-start:hover{background:#d32f2f !important}#play-start:hover:not([disabled]){background:#d32f2f !important}#play-start.active{background:#f44336 !important}#play-start.active:hover{background:#d32f2f !important}input[type=range]{-webkit-appearance:none;appearance:none}input[type=range]::-webkit-slider-track{background:#555;height:6px;border-radius:3px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:#f44336;border-radius:50%;cursor:pointer}input[type=range]::-moz-range-track{background:#555;height:6px;border-radius:3px;border:none}input[type=range]::-moz-range-thumb{width:20px;height:20px;background:#f44336;border-radius:50%;cursor:pointer;border:none}#chord-progression-container::-webkit-scrollbar{display:none}.play-key-option:hover{background-color:rgba(255,255,255,.1)}.play-key-option:last-child{border-bottom:none}#rotate-button-dropdown:hover,#bass-guitar-toggle:hover{background-color:rgba(255,255,255,.1)}.bass-string-1{height:4px;background:repeating-linear-gradient(90deg, #C8C8C8 0px, #B8B8B8 0.3px, #C8C8C8 0.6px, #A8A8A8 0.9px);border-radius:2px;box-shadow:0 -1px 3px rgba(0,0,0,.5),0 1px 2px rgba(255,255,255,.2)}.bass-string-2{height:5px;background:repeating-linear-gradient(90deg, #B8B8B8 0px, #A8A8A8 0.3px, #B8B8B8 0.6px, #989898 0.9px);border-radius:2.5px;box-shadow:0 -1px 3px rgba(0,0,0,.5),0 1px 2px rgba(255,255,255,.2)}.bass-string-3{height:6px;background:repeating-linear-gradient(90deg, #A8A8A8 0px, #989898 0.3px, #A8A8A8 0.6px, #888888 0.9px);border-radius:3px;box-shadow:0 -1px 3px rgba(0,0,0,.5),0 1px 2px rgba(255,255,255,.2)}.bass-string-4{height:7px;background:repeating-linear-gradient(90deg, #989898 0px, #888888 0.3px, #989898 0.6px, #787878 0.9px);border-radius:3.5px;box-shadow:0 -1px 3px rgba(0,0,0,.5),0 1px 2px rgba(255,255,255,.2)}.fretboard.horizontal.bass-mode{width:1600px;height:160px}