:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.guitar-neck{display:flex;flex-direction:column;align-items:center;min-height:100px;padding:8px 0 8px 12px;gap:6px;width:100%;max-width:320px;margin:0 auto;background-color:#2c3e50;border-radius:8px;box-shadow:0 4px 6px #0000001a;position:relative;overflow:hidden;box-sizing:border-box}.fret-board{position:absolute;top:20px;left:24px;right:20px;bottom:20px;display:flex;overflow:visible;width:calc(100% - 40px)}.strings{display:flex;flex-direction:column;height:fit-content;width:100%;position:relative;z-index:2;gap:6px;padding:4px 0;overflow:visible;margin-right:0}.string-container{display:flex;align-items:center;gap:10px;height:fit-content;position:relative;overflow:hidden}.string-name{color:#ecf0f1;font-weight:700;width:14px;text-align:center;font-size:.9rem}.string{display:flex;position:relative;height:2px;background-color:#ecf0f188;flex-grow:1;margin-right:-6px;overflow:visible}.fret{position:relative;flex:1;height:100%}.fret.first-fret{width:11px;flex:none;overflow:visible}.fret-wire{position:absolute;right:-1px;top:-20px;bottom:-20px;width:3px;background-color:#ecf0f1}.nut{position:absolute;right:-3px;top:-20px;bottom:-20px;width:6px;background-color:#f1f0d7}.fret-marker{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:20px;height:20px;display:flex;justify-content:center;align-items:center}.dot{width:8px;height:8px;background-color:#fdff984b;border-radius:50%}.double-dot{display:flex;flex-direction:column;gap:4px;align-items:center}.fret-marker:nth-child(12){flex-direction:column;gap:4px}.fret-marker:nth-child(12) .dot{margin:0}.fret-space{position:absolute;top:0;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center}.root-note{width:12px;height:12px;background-color:#f44;border-radius:50%;transform:translate(-5%);opacity:.9;border:1px solid rgba(255,255,255,.3);box-shadow:0 0 2px #0003;opacity:.5}.fret.first-fret .root-note{opacity:.7;position:absolute;width:16px;height:16px;background-color:transparent;left:-5px;top:50%;transform:translateY(-55%) translate(10%);box-shadow:none;border:none}.fret.first-fret .root-note:before,.fret.first-fret .root-note:after{content:"";position:absolute;width:100%;height:3px;background-color:#f44;top:50%;left:0;box-shadow:none}.fret.first-fret .root-note:before{transform:rotate(45deg)}.fret.first-fret .root-note:after{transform:rotate(-45deg)}.last-fret{position:relative;overflow:visible}.last-fret:after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:2px;height:20px;background-color:#ecf0f1}.scale-note{width:8px;height:8px;border-radius:50%;opacity:.75;box-shadow:0 0 2px #0003;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.scale-note.root{width:12px;height:12px;background-color:#f44;border:1px solid rgba(255,255,255,.3)}.scale-note[data-order="1"]{background-color:#33b5e5}.scale-note[data-order="2"]{background-color:#00c851}.scale-note[data-order="3"]{background-color:#fb3}.scale-note[data-order="4"]{background-color:#a6c}.scale-note[data-order="5"]{background-color:#f80}.scale-note[data-order="6"]{background-color:#09c}.scale-note[data-order="7"]{background-color:#2bbbad}.scale-note[data-order="8"]{background-color:#c00}.fret.first-fret .scale-note{opacity:.9;width:12px;height:12px;background-color:transparent;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:none;border:none}.fret.first-fret .scale-note.root{width:14px;height:14px}.fret.first-fret .scale-note:before,.fret.first-fret .scale-note:after{content:"";position:absolute;width:100%;height:3px;top:50%;left:0}.fret.first-fret .scale-note.root:before,.fret.first-fret .scale-note.root:after{background-color:#f44}.fret.first-fret .scale-note[data-order="1"]:before,.fret.first-fret .scale-note[data-order="1"]:after{background-color:#33b5e5}.fret.first-fret .scale-note[data-order="2"]:before,.fret.first-fret .scale-note[data-order="2"]:after{background-color:#00c851}.fret.first-fret .scale-note[data-order="3"]:before,.fret.first-fret .scale-note[data-order="3"]:after{background-color:#fb3}.fret.first-fret .scale-note[data-order="4"]:before,.fret.first-fret .scale-note[data-order="4"]:after{background-color:#a6c}.fret.first-fret .scale-note[data-order="5"]:before,.fret.first-fret .scale-note[data-order="5"]:after{background-color:#f80}.fret.first-fret .scale-note:before{transform:rotate(45deg)}.fret.first-fret .scale-note:after{transform:rotate(-45deg)}@media (min-width: 768px){.guitar-neck{min-height:120px;max-width:500px}}.banner-container{position:absolute;bottom:-20px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:10px}.ai-banner{width:fit-content;background:#ffffff1a;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);padding:8px 16px;border-radius:20px;border:1px solid rgba(255,255,255,.2);box-shadow:0 2px 10px #0000001a;transition:all .3s ease;cursor:pointer}.alien-link{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:#ffffff1a;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border-radius:50%;border:1px solid rgba(255,255,255,.2);box-shadow:0 2px 10px #0000001a;transition:all .3s ease;cursor:pointer;text-decoration:none;font-size:18px}.alien-link:hover{transform:scale(1.1);background:#ffffff26}.ai-banner-link{text-decoration:none;color:inherit;display:block}.ai-banner:hover{transform:scale(1.05);background:#ffffff26}.ai-banner-text{font-size:14px;color:#666;font-family:Arial,sans-serif;white-space:nowrap}.ai-banner-highlight{color:#4a90e2;font-weight:600}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;margin:0;min-height:100vh;background-color:#f5f5f5;color:#333;display:flex;justify-content:center;align-items:flex-start;padding:20px 0 40px;box-sizing:border-box}.container{display:flex;flex-direction:column;align-items:center;width:100%;max-width:1200px;margin:0 auto;padding:10px;position:relative;background-color:#fff;border-radius:10px;box-shadow:0 2px 10px #0000001a;min-height:auto;box-sizing:border-box}@media (min-width: 768px){.container{width:99%;margin:20px auto;padding:20px 30px}}h1{color:#2c3e50;text-align:center;margin-bottom:30px;font-size:2.5em;display:flex;align-items:center;justify-content:center;gap:.01em}h1 sup{font-size:.6em;color:#e74c3c;margin-left:0;font-weight:600;vertical-align:super;position:relative;top:-.3em;font-style:italic}h1 span{font-size:1.2em;transform:rotate(-15deg);display:inline-block;transition:all .3s ease}h1:hover span{animation:float 3s ease-in-out infinite}h1 span{animation:float 3s ease-in-out infinite;animation-play-state:paused}h1:hover span{animation-play-state:running}@keyframes float{0%{transform:rotate(-15deg) translateY(0)}50%{transform:rotate(-15deg) translateY(-10px)}to{transform:rotate(-15deg) translateY(0)}}.exercise-box{background-color:#f8f9fa;padding:15px;border-radius:0;display:flex;flex-direction:column;align-items:center;width:100%;box-sizing:border-box;margin:15px -10px;width:calc(100% + 20px)}@media (min-width: 768px){.exercise-box{padding:30px;border-radius:8px;margin:20px 0;width:100%}}.key-container{display:flex;align-items:center;justify-content:center;gap:10px;margin:20px 0;position:relative}.key{font-size:1.5em;color:#e74c3c;text-align:center;cursor:pointer;padding:12px 24px;background-color:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;transition:all .2s ease;-webkit-tap-highlight-color:transparent;min-width:160px;margin:0;border:1px solid #e0e0e0}.audio-controls{display:flex;gap:10px;margin-top:10px;justify-content:center}.play-button{background-color:#f0f0f0;border:none;border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:20px;color:#2c3e50;transition:all .2s ease;padding:0;box-shadow:0 2px 4px #0000001a;border:1px solid #e0e0e0}.play-button:hover{background-color:#e0e0e0;transform:scale(1.05)}.play-button:active{transform:scale(.98)}.key span{display:inline-block}.key:hover{background-color:#2980b9;color:#fff;box-shadow:0 4px 8px #00000026}@media (max-width: 767px){.key:hover{background-color:#fff;color:#e74c3c;box-shadow:0 2px 4px #0000001a}.key:active{background-color:#2980b9;color:#fff;box-shadow:0 4px 8px #00000026}}.positions{font-size:1em;color:#2980b9;text-align:center;margin:15px 0}.scale-degree-clickable{cursor:pointer;padding:2px 4px;border-radius:4px;transition:all .2s ease;-webkit-user-select:none;user-select:none}.scale-degree-clickable:hover{background-color:#0000001a;transform:scale(1.05)}.scale-degree-clickable:active{transform:scale(.95)}.instructions{margin:15px 0 10px;padding:12px;background-color:#edf2f7;border-radius:8px;width:100%;max-width:280px}.instructions h3{font-size:1.1em;margin:0 0 10px}.instructions li{margin:8px 0;font-size:.9em}button{display:block;width:200px;margin:20px auto;padding:12px 24px;background-color:#2980b9;color:#fff;border:none;border-radius:5px;cursor:pointer;font-size:1em;transition:background-color .3s}button:hover{background-color:#1a6a9c}.error{color:#e74c3c;text-align:center;margin:10px 0;padding:10px;background-color:#fde8e8;border-radius:5px;width:100%}.fretboard-container{display:flex;flex-direction:column;align-items:center;width:100%;margin:1rem 0}.scale-type-selector{display:flex;gap:.25rem;margin-top:1rem;width:180px;margin-left:auto;margin-right:auto;justify-content:center}.scale-type-btn{padding:6px 8px;background:#fff;color:#666;border:none;border-radius:6px;cursor:pointer;font-weight:500;transition:all .2s ease;min-width:85px;box-shadow:0 2px 4px #0000001a;font-size:.9em}.scale-type-btn:hover{background:#f5f5f5}.scale-type-btn.active{background:#2980b9;color:#fff;box-shadow:0 2px 4px #00000026}@media (min-width: 768px){body{padding:20px 0 30px}.key{font-size:2em;padding:10px 20px}.positions{font-size:1.2em}.scale-type-selector{width:210px;gap:.5rem}.scale-type-btn{padding:8px 12px;min-width:100px;font-size:1em}.instructions{margin:20px 0 10px;padding:20px 15px;max-width:500px}.instructions h3{font-size:1.2em;margin:0 0 12px}.instructions li{margin:10px 0;font-size:1em}}