:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#242424;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}body{place-items:center;min-width:320px;min-height:100vh;margin:0;display:flex}#root{width:100%}.guitar-neck-container{box-sizing:border-box;background-color:#121212;border:2px solid #0000;border-radius:12px;justify-content:flex-start;align-items:center;width:100%;height:450px;transition:border-color .3s,box-shadow .3s;display:flex;position:relative;overflow:auto;box-shadow:0 10px 30px #00000080}.guitar-neck-container.focused{border-color:#ff8a00;box-shadow:0 0 20px #ff8a004d}.guitar-canvas{border-radius:4px}.gear-icon-btn{color:#fff;cursor:pointer;z-index:10;background:#ffffff1a;border:1px solid #fff3;border-radius:50%;justify-content:center;align-items:center;width:45px;height:45px;font-size:1.5rem;transition:background .2s;display:flex;position:absolute;top:15px;left:15px}.gear-icon-btn:hover{background:#fff3}.zoom-controls-bottom-left{z-index:10;background:#00000080;border-radius:20px;align-items:center;gap:10px;padding:5px 12px;display:flex;position:absolute;bottom:15px;left:15px}.zoom-btn{color:#fff;cursor:pointer;background:#333;border:1px solid #555;border-radius:4px;padding:2px 8px;font-weight:700}.zoom-btn:hover{background:#444}.zoom-label{text-align:center;color:#ccc;min-width:40px;font-size:.8rem}.playback-controls-mid-bottom{z-index:20;align-items:center;gap:12px;display:flex;position:absolute;bottom:15px;left:50%;transform:translate(-50%)}.playback-btn{cursor:pointer;border:none;border-radius:8px;justify-content:center;align-items:center;width:45px;height:45px;font-size:1.2rem;transition:transform .1s,background .2s,box-shadow .2s;display:flex;box-shadow:0 4px 10px #0000004d}.playback-btn:active{transform:scale(.92)}.playback-btn:disabled{cursor:not-allowed;opacity:.5;box-shadow:none;color:#555!important;background:#333!important;transform:none!important}.play-pause-btn{color:#000;background:#4f4}.play-pause-btn.playing{background:#fa0}.play-pause-btn:hover{background:#6f6}.play-pause-btn.playing:hover{background:#fb3}.stop-btn{color:#fff;background:#f44}.stop-btn:hover{background:#f66}.record-btn.recording .record-dot{animation:1s infinite record-dot-flash}.record-btn.recording:disabled{cursor:default!important}@keyframes record-dot-flash{0%{opacity:1}50%{opacity:.3}to{opacity:1}}.reset-to-initial-btn{color:#fff;background:#555}.reset-to-initial-btn:hover{background:#777}.clear-neck-btn{color:#fff;background:#333;margin-left:10px}.clear-neck-btn:hover{background:#b22}.play-icon{border-top:10px solid #0000;border-bottom:10px solid #0000;border-left:16px solid;width:0;height:0;margin-left:4px}.pause-icon{letter-spacing:-1px;font-weight:700}.step-counter-hud{color:#ff8a00;letter-spacing:1px;z-index:10;pointer-events:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0009;border:1px solid #ff8a004d;border-radius:12px;padding:4px 12px;font-size:.85rem;font-weight:700;position:absolute;top:15px;right:15px}.transport-lcd{color:#ff8a00;box-sizing:border-box;background:#000;border:2px solid #222;border-radius:8px;justify-content:center;align-items:center;min-width:80px;height:45px;margin-left:10px;padding:4px 12px;font-family:Courier New,Courier,monospace;font-size:1.1rem;font-weight:700;display:flex;box-shadow:inset 0 2px 5px #00000080}.modal-overlay{z-index:10000;pointer-events:auto;background:#000000d9;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-content{text-align:center;background:#2a2a2a;border:2px solid #8b0000;border-radius:8px;max-width:300px;padding:20px;box-shadow:0 0 20px #8b000066}.modal-content h3{color:#ff3d00;margin-top:0}.modal-content p{color:#ccc;font-size:.9rem;line-height:1.4}.modal-content button{color:#fff;cursor:pointer;background:#8b0000;border:none;border-radius:4px;margin-top:10px;padding:8px 20px}.modal-content button:hover{background:#a00000}.note-balloon{-webkit-backdrop-filter:blur(10px);background:#141414f2;border:1px solid #ffffff26;border-radius:12px;flex-direction:column;gap:8px;min-width:160px;padding:10px 14px;animation:.2s cubic-bezier(.175,.885,.32,1.275) balloon-appear;display:flex;box-shadow:0 10px 25px #0009}.note-balloon:after{content:"";background:#141414f2;border-bottom:1px solid #ffffff26;border-right:1px solid #ffffff26;width:12px;height:12px;position:absolute;bottom:-6px;left:50%;transform:translate(-50%)rotate(45deg)}@keyframes balloon-appear{0%{opacity:0;transform:translate(-50%,-115%)scale(.9)}to{opacity:1;transform:translate(-50%,-125%)scale(1)}}.balloon-title{text-transform:uppercase;letter-spacing:.05em;color:#888;justify-content:space-between;align-items:center;font-size:.75rem;font-weight:600;display:flex}.balloon-close-btn{color:#555;cursor:pointer;background:0 0;border:none;padding:0 2px;font-size:.9rem;line-height:1;transition:color .2s}.balloon-close-btn:hover{color:#f44}.balloon-row{flex-wrap:wrap;gap:6px;display:flex}.balloon-note-btn{color:#fff;cursor:pointer;background:#2a2a2a;border:1px solid #ffffff1a;border-radius:8px;align-items:center;gap:4px;padding:6px 10px;font-size:.8rem;font-weight:500;transition:all .2s;display:flex}.balloon-note-btn:hover{background:#f44;border-color:#f66;transform:translateY(-2px);box-shadow:0 4px 10px #ff44444d}.balloon-note-btn:active{transform:translateY(0)}#root{text-align:center;width:100%;margin:0 auto}.app-container{color:#e0e0e0;background-color:#1a1a1a;flex-direction:column;align-items:center;min-height:100vh;padding:2rem;display:flex}header{margin-bottom:3rem}header h1{background:linear-gradient(90deg,#ff8a00,#e52e71);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin:0;font-size:3rem}header p{color:#888;font-family:JetBrains Mono,monospace}main{width:100%;max-width:1400px}footer{color:#666;margin-top:3rem;font-style:italic}