*,:before,:after{box-sizing:border-box}html,body,#root{height:100%;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;font-family:system-ui,Segoe UI,Roboto,sans-serif}button{cursor:pointer;font-family:inherit}select{font-family:inherit}.app{--bg:#111318;--bg-2:#1b1e26;--bg-3:#232733;--text:#e6e8ee;--text-dim:#9aa1b0;--border:#333846;--accent:#7aa2ff;--board-bg:#171a20;--string-color:#d8dde6;--fret-line:#444b5a;--nut-color:#e8d9a8;--inlay-color:#555c6b;--dot-tonic:#d84a60;--dot-third:#cf9f00;--dot-fifth:#44a77e;--dot-seventh:#5b82d6;--dot-dissonant:#8f68d6;--dot-single:#cd6b2e;--caged-c:#3fa7d6;--caged-a:#7cc45a;--caged-g:#e0a33c;--caged-e:#e0655f;--caged-d:#9a6fd6;background:var(--bg);color:var(--text);flex-direction:column;min-height:100vh;display:flex}.app[data-theme=light]{--bg:#f4f5f7;--bg-2:#fff;--bg-3:#e8ebf0;--text:#1c2130;--text-dim:#5b6270;--border:#d3d8e0;--accent:#2f5bd8;--board-bg:#fbfcfd;--string-color:#3a3f4c;--fret-line:#c6ccd6;--nut-color:#b9a565;--inlay-color:#aeb4c0;--dot-tonic:#e63d54;--dot-third:#c9a500;--dot-fifth:#1f9e6e;--dot-seventh:#2f5bd8;--dot-dissonant:#7d49c9;--dot-single:#e0671f}.app-header{justify-content:space-between;align-items:center;padding:18px 24px 6px;display:flex}.app-header h1{margin:0;font-size:22px}.controls{flex-wrap:wrap;align-items:flex-end;gap:14px;padding:16px 24px;display:flex}.field{color:var(--text-dim);flex-direction:column;gap:4px;font-size:13px;display:flex}.field select{border:1px solid var(--border);background:var(--bg-2);color:var(--text);border-radius:8px;min-width:120px;padding:7px 10px;font-size:14px}.custom-tuning{border:1px dashed var(--border);background:var(--bg-2);border-radius:10px;flex-wrap:wrap;align-items:flex-end;gap:8px;padding:10px 14px;display:flex}.custom-string select{min-width:64px}.custom-string span{text-align:center}.settings{position:relative}.settings-toggle{border:1px solid var(--border);background:var(--bg-2);color:var(--text);border-radius:8px;padding:8px 14px;font-size:14px}.settings-panel{z-index:20;background:var(--bg-2);border:1px solid var(--border);border-radius:12px;flex-direction:column;gap:14px;min-width:260px;padding:18px;display:flex;position:absolute;top:110%;right:0;box-shadow:0 12px 30px #00000059}.settings-panel .field.checkbox{flex-direction:row;align-items:center;gap:8px}.reset-btn{border:1px solid var(--border);background:var(--bg-3);color:var(--text);border-radius:8px;padding:8px 12px;font-size:13px}.reset-btn:hover{background:var(--dot-dissonant);color:#fff;border-color:#0000}.board-wrap{gap:10px;padding:6px 24px;display:flex;overflow-x:auto}.tuning-rails{flex-direction:column;justify-content:space-evenly;padding:0 2px 0 0;display:flex}.rail-label{color:var(--text-dim);text-align:center;font-size:13px;font-weight:600}.fretboard{flex:1;min-width:640px}.fb-grid{background:var(--board-bg) url(/fretboard_texture.jpg) center / cover no-repeat;border:1px solid var(--border);border-radius:10px;gap:0;display:grid;overflow:hidden}.fb-cell{border-right:1px solid var(--fret-line);min-height:46px;color:var(--text-dim);justify-content:center;align-items:center;font-size:11px;display:flex;position:relative}.fb-cell.even-fret{background:#ffffff05}.app[data-theme=light] .fb-cell.even-fret{background:#00000005}.nut-cell{background:var(--bg-2);justify-content:flex-end}.nut{background:var(--nut-color);width:12px;position:absolute;top:0;bottom:0;left:0}.string-row-line{background:var(--string-color);height:2px;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}.inlay-dots{z-index:2;pointer-events:none;justify-content:center;align-items:center;gap:4px;display:flex;position:absolute;inset:0}.inlay-dot{background:var(--inlay-color);border-radius:50%;width:8px;height:8px;display:block}.inlay-2{gap:6px}.note-dot{pointer-events:none;z-index:5;border:2px solid #fff;border-radius:50%;justify-content:center;align-items:center;width:30px;height:30px;display:flex;position:absolute;box-shadow:0 1px 4px #0006}.dot-label{color:#fff;text-shadow:0 1px 2px #00000080;font-size:12px;font-weight:800}.note-dot.root:after{content:"";opacity:.7;border:2px dashed;border-radius:50%;position:absolute;inset:-5px}.note-dot.tonic{background:var(--dot-tonic)}.note-dot.third{background:var(--dot-third)}.note-dot.fifth{background:var(--dot-fifth)}.note-dot.seventh{background:var(--dot-seventh)}.note-dot.dissonant{background:var(--dot-dissonant)}.note-dot.single{background:var(--dot-single)}.fb-cell:not(.fb-marker):after{content:"";background:var(--string-color);z-index:1;height:2px;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}.app[data-theme=light] .fb-cell:not(.fb-marker):after{opacity:.5;opacity:.5}.fb-marker{background:var(--bg-2);min-height:20px}.fb-marker .inlay-dot{background:#fff;width:8px;height:8px;box-shadow:0 1px 2px #0006}.fb-marker .inlay-2{gap:6px}.note-dot.caged-c{background:var(--caged-c)}.note-dot.caged-a{background:var(--caged-a)}.note-dot.caged-g{background:var(--caged-g)}.note-dot.caged-e{background:var(--caged-e)}.note-dot.caged-d{background:var(--caged-d)}.note-dot.caged-c.root,.note-dot.caged-a.root,.note-dot.caged-g.root,.note-dot.caged-e.root,.note-dot.caged-d.root{border-width:3px;width:34px;height:34px}.note-dot.stacked{border-width:2px;width:22px;height:22px}.note-dot.stacked .dot-label{font-size:10px}.note-dot.stacked:first-child{margin-right:12px}.note-dot.stacked:nth-child(2){margin-left:12px}.legend{color:var(--text-dim);flex-wrap:wrap;align-items:center;gap:12px;padding:14px 24px;font-size:15px;display:flex}.b{color:var(--text);font-weight:700}.keydot{vertical-align:middle;border-radius:50%;width:16px;height:16px;margin:0 3px;display:inline-block;box-shadow:0 1px 2px #0000004d}.keydot.tonic{background:var(--dot-tonic)}.keydot.third{background:var(--dot-third)}.keydot.fifth{background:var(--dot-fifth)}.keydot.seventh{background:var(--dot-seventh)}.keydot.dissonant{background:var(--dot-dissonant)}.keydot.caged-c{background:var(--caged-c)}.keydot.caged-a{background:var(--caged-a)}.keydot.caged-g{background:var(--caged-g)}.keydot.caged-e{background:var(--caged-e)}.keydot.caged-d{background:var(--caged-d)}.fretboard-labels{gap:0;margin-top:4px;padding:0 1px;display:grid}.fret-label{justify-content:center;align-items:center;gap:6px;min-height:30px;font-size:19px;font-weight:800;display:flex}.fret-label-letter.caged-c{color:var(--caged-c)}.fret-label-letter.caged-a{color:var(--caged-a)}.fret-label-letter.caged-g{color:var(--caged-g)}.fret-label-letter.caged-e{color:var(--caged-e)}.fret-label-letter.caged-d{color:var(--caged-d)}