:root{--color-bg: #121212;--color-surface: #1e1e1e;--color-primary: #bb86fc;--color-secondary: #03dac6;--color-text: #e0e0e0;--color-text-dim: #a0a0a0;--color-border: #333333;--font-family: "Inter", system-ui, -apple-system, sans-serif}body{margin:0;padding:0;background-color:var(--color-bg);color:var(--color-text);font-family:var(--font-family);-webkit-font-smoothing:antialiased}#root{display:flex;flex-direction:column;min-height:100vh}.container{max-width:1200px;margin:0 auto;padding:2rem;width:100%;box-sizing:border-box}h1,h2,h3{margin-top:0;font-weight:600}button{background-color:var(--color-primary);color:#000;border:none;padding:.5rem 1rem;border-radius:4px;font-weight:600;cursor:pointer;transition:opacity .2s}button:hover{opacity:.9}select{background-color:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);padding:.5rem;border-radius:4px}.card{background-color:var(--color-surface);border-radius:8px;padding:1.5rem;box-shadow:0 4px 6px #0000004d;margin-bottom:2rem}.fretboard-container{overflow-x:auto;padding:2rem 0;background:#2a2a2a;border-radius:8px;box-shadow:inset 0 0 20px #00000080;-ms-overflow-style:none;scrollbar-width:none}.fretboard-container::-webkit-scrollbar{display:none}.fretboard{display:flex;flex-direction:column;position:relative;padding-right:2rem}.string{display:flex;height:40px;position:relative;align-items:center}.string:before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:#888;z-index:1;box-shadow:0 1px 2px #00000080}.string:nth-child(4):before{height:3px}.string:nth-child(5):before{height:4px}.string:nth-child(6):before{height:5px}.fret{flex:1;border-right:4px solid #555;height:100%;position:relative;display:flex;justify-content:center;align-items:center;z-index:2}.fret:first-child{border-right:8px solid #ddd;flex:0 0 60px;background:#111}.fret-12{border-right-color:#aaa}.string:nth-child(3) .fret:nth-child(4):after,.string:nth-child(3) .fret:nth-child(6):after,.string:nth-child(3) .fret:nth-child(8):after,.string:nth-child(3) .fret:nth-child(10):after,.string:nth-child(2) .fret:nth-child(13):after,.string:nth-child(5) .fret:nth-child(13):after,.string:nth-child(3) .fret:nth-child(16):after{content:"";position:absolute;width:12px;height:12px;background:#444;border-radius:50%;z-index:0;opacity:.5}.note-marker{width:32px;height:32px;background:var(--color-primary);border-radius:50%;display:flex;justify-content:center;align-items:center;color:#000;font-weight:700;font-size:.8rem;z-index:3;box-shadow:0 2px 4px #0006;position:relative;cursor:pointer;transition:transform .1s,box-shadow .1s}.note-marker:active{transform:scale(.95);box-shadow:0 1px 2px #0006}.note-marker.root{background:var(--color-secondary);box-shadow:0 0 10px var(--color-secondary)}.note-marker.triad-highlight{background:#ffc107;color:#000;transform:scale(1.15);z-index:10;box-shadow:0 0 12px #ffc10799;border:2px solid #fff}.note-marker.triad-outside{background:#00bcd4;color:#000;transform:scale(1.05);z-index:9;box-shadow:0 0 8px #00bcd499;border:2px dashed #fff}.note-marker.dimmed{opacity:.3;transform:scale(.9)}.note-marker.nut-unscaled{background:transparent;box-shadow:none;color:#777;font-weight:400;cursor:default}.fret-numbers .fret{border-right:4px solid transparent;background:transparent;color:#888;font-size:.8rem;font-weight:700;height:20px;display:flex;align-items:flex-end;justify-content:flex-end;padding-bottom:5px;overflow:visible}.fret-numbers .fret span{transform:translate(50%);width:1.5em;text-align:center}.fret-numbers .fret:first-child{border-right:8px solid transparent;background:transparent}.fret-numbers:before{display:none}