*,: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-d1:#d84a60;--dot-d2:#e07836;--dot-d3:#d0a034;--dot-d4:#4cb97d;--dot-d5:#2eb0ae;--dot-d6:#5b82d6;--dot-d7:#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-d1:#e63d54;--dot-d2:#d96a2b;--dot-d3:#b89a1f;--dot-d4:#1f9e6e;--dot-d5:#1a8f8f;--dot-d6:#2f5bd8;--dot-d7:#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-d7);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:1;border:3px dashed;border-radius:50%;position:absolute;inset:-6px}.note-dot.degree-1{background:var(--dot-d1)}.note-dot.degree-2{background:var(--dot-d2)}.note-dot.degree-3{background:var(--dot-d3)}.note-dot.degree-4{background:var(--dot-d4)}.note-dot.degree-5{background:var(--dot-d5)}.note-dot.degree-6{background:var(--dot-d6)}.note-dot.degree-7{background:var(--dot-d7)}.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.degree-1{background:var(--dot-d1)}.keydot.degree-2{background:var(--dot-d2)}.keydot.degree-3{background:var(--dot-d3)}.keydot.degree-4{background:var(--dot-d4)}.keydot.degree-5{background:var(--dot-d5)}.keydot.degree-6{background:var(--dot-d6)}.keydot.degree-7{background:var(--dot-d7)}.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)}.caged-explainer{background:var(--bg-2);border:1px solid var(--border);max-width:760px;color:var(--text-dim);border-radius:8px;margin:4px 24px 24px;padding:16px 18px;font-size:14px;line-height:1.6}.caged-explainer h2{letter-spacing:.03em;color:var(--text);margin:0 0 8px;font-size:15px}.caged-explainer p{margin:0 0 10px}.caged-explainer p.last{margin-bottom:0}.caged-explainer ul{gap:6px;margin:0 0 10px;padding-left:18px;display:grid}.caged-explainer li::marker{color:var(--accent)}.caged-explainer b{color:var(--text)}.caged-explainer .caged-letter{font-weight:700}.caged-explainer .caged-letter.caged-c{color:var(--caged-c)}.caged-explainer .caged-letter.caged-a{color:var(--caged-a)}.caged-explainer .caged-letter.caged-g{color:var(--caged-g)}.caged-explainer .caged-letter.caged-e{color:var(--caged-e)}.caged-explainer .caged-letter.caged-d{color: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)}