:root{color:#cbd5e1;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#0f141d;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{min-width:20rem;min-height:100vh;margin:0}button{font-family:inherit}.app-shell{width:min(100% - 2rem,72rem);min-height:100vh;margin:0 auto;padding:3rem 0}.app-header{border-bottom:1px solid #2b3342;justify-content:space-between;align-items:center;gap:2rem;padding-bottom:1.5rem;display:flex}h1{color:#f8fafc;margin:0;font-size:clamp(1.75rem,5vw,2.5rem);line-height:1.1}.instrument-selector{gap:.5rem;display:flex}.instrument-selector button{color:#cbd5e1;font:inherit;cursor:pointer;background:#1b2230;border:1px solid #3b4659;border-radius:.5rem;padding:.65rem 1.1rem;font-weight:600}.instrument-selector button:hover{color:#f8fafc;border-color:#64748b}.instrument-selector button:focus-visible{outline-offset:2px;outline:2px solid #60a5fa}.instrument-selector button.selected{color:#fff;background:#2563eb;border-color:#3b82f6}.scale-controls{flex-wrap:wrap;gap:1rem;margin-top:1.5rem;display:flex}.scale-controls label{color:#94a3b8;letter-spacing:.04em;text-transform:uppercase;gap:.35rem;font-size:.75rem;font-weight:700;display:grid}.display-mode-control{border:0;min-width:0;margin:0;padding:0}.display-mode-control legend{color:#94a3b8;letter-spacing:.04em;text-transform:uppercase;margin-bottom:.35rem;font-size:.75rem;font-weight:700}.display-mode-control div{display:flex}.display-mode-control button{color:#94a3b8;font:inherit;text-transform:capitalize;cursor:pointer;background:#1b2230;border:1px solid #3b4659;padding:.62rem .7rem;font-size:.8rem;font-weight:600}.display-mode-control button:first-child{border-radius:.5rem 0 0 .5rem}.display-mode-control button:last-child{border-radius:0 .5rem .5rem 0}.display-mode-control button:not(:first-child){margin-left:-1px}.display-mode-control button.selected{color:#ecfeff;background:#164e63;border-color:#22d3ee;position:relative}.display-mode-control button:focus-visible{z-index:1;outline-offset:2px;outline:2px solid #22d3ee}.scale-controls .other-notes-control{cursor:pointer;grid-auto-flow:column;align-self:end;align-items:center;gap:.5rem;min-height:2.45rem;display:flex}.other-notes-control input{accent-color:#06b6d4;width:1rem;height:1rem;margin:0}.scale-controls select{color:#e2e8f0;min-width:6rem;font:inherit;text-transform:none;background:#1b2230;border:1px solid #3b4659;border-radius:.5rem;padding:.6rem 2rem .6rem .7rem;font-size:.9rem;font-weight:600}.scale-controls select:focus-visible{outline-offset:2px;outline:2px solid #60a5fa}.fretboard-section{margin-top:2.5rem}.fretboard-section h2{color:#e2e8f0;text-transform:capitalize;margin:0;font-size:1.1rem}.fretboard-heading{justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem;display:flex}.note-legend{color:#94a3b8;flex-wrap:wrap;gap:.9rem;font-size:.75rem;display:flex}.note-legend span{align-items:center;gap:.35rem;display:inline-flex}.legend-swatch{background:#1b2533;border:1px solid #46546a;border-radius:50%;width:.75rem;height:.75rem}.fretboard-scroll{scrollbar-color:#475569 #151c28;background:#151c28;border:1px solid #303949;border-radius:.65rem;overflow-x:auto}.fretboard-scroll:focus-visible{outline-offset:3px;outline:2px solid #60a5fa}.fretboard{border-spacing:0;table-layout:fixed;width:max-content}.fretboard th,.fretboard td{text-align:center;width:4rem;min-width:4rem;height:3.5rem;padding:0;position:relative}.fretboard th{color:#94a3b8;vertical-align:top;border-bottom:1px solid #303949;height:3.25rem;font-size:.75rem;font-weight:600}.fretboard td{border-right:1px solid #475569}.fretboard tbody tr:not(:last-child) td{border-bottom:1px solid #273142}.fretboard tbody tr td:after{z-index:0;height:var(--string-thickness);content:"";background:#718096;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}.fret-number{padding-top:.45rem;display:block}.fret-marker{justify-content:center;gap:.25rem;margin-top:.45rem;display:flex}.fret-marker-dot{background:#64748b;border-radius:50%;width:.35rem;height:.35rem}.fretboard .open-fret{background:#202938;border-right:.3rem solid #d1d5db}.note{z-index:1;color:#e2e8f0;background:#1b2533;border:1px solid #46546a;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;min-width:2rem;height:2.25rem;padding:0 .35rem;font-size:.8rem;font-weight:700;display:inline-flex;position:relative}.interval-label{opacity:.8;font-size:.62rem;font-weight:600;line-height:.8rem}.note.hidden-note{visibility:hidden}.note.root-note,.legend-swatch.root-note{color:#fdf4ff;background:#c026d3;border-color:#f0abfc;box-shadow:0 0 .75rem #d946ef59}.note.scale-note,.legend-swatch.scale-note{color:#ecfeff;background:#0891b2;border-color:#67e8f9;box-shadow:0 0 .65rem #22d3ee40}.note.other-note{color:#64748b;background:#171c25;border-color:#303a49}.legend-swatch.other-note{background:#171c25;border-color:#303a49}@media (width<=36rem){.app-shell{padding-top:2rem}.app-header{flex-direction:column;align-items:flex-start;gap:1.5rem}.instrument-selector{width:100%}.instrument-selector button{flex:1}.fretboard-heading{flex-direction:column;align-items:flex-start}}