:root{--bg-color: #f5f5f5;--fretboard-bg: #f0e6d3;--nut-color: #e3e0c3;--fret-color: #b0b0b0;--string-color: #686868;--marker-color: #d4d0c8;--note-dot-fill: #4a90d9;--root-dot-fill: #d94a4a;--blue-note-fill: #9b59b6;--note-text-color: #ffffff}*,*:before,*:after{box-sizing:border-box}body{background-color:var(--bg-color);margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.fretboard{width:100%;height:auto;max-width:1400px;display:block}.controls{display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem}.controls label{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:#444}.controls select{padding:.3rem .5rem;border-radius:4px;border:1px solid #ccc;font-size:.9rem;background:#fff}.label-mode-toggle{display:flex;align-items:center;gap:.5rem;cursor:pointer}.label-mode-toggle input[type=checkbox]{appearance:none;-webkit-appearance:none;width:44px;height:24px;background:#ccc;border-radius:12px;position:relative;cursor:pointer;transition:background .2s}.label-mode-toggle input[type=checkbox]:after{content:"";position:absolute;top:4px;left:4px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform .2s}.label-mode-toggle input[type=checkbox]:checked{background:var(--toggle-on-bg, #4a90d9)}.label-mode-toggle input[type=checkbox]:checked:after{transform:translate(20px)}.label-mode-toggle input[type=checkbox]:focus-visible{outline:2px solid var(--toggle-on-bg, #4a90d9);outline-offset:2px}.app{max-width:1400px;margin:0 auto;padding:2rem 1rem}h1{font-size:1.4rem;color:#333;margin:0 0 1rem}