:root{--bg:#f8f9fb;--paper:#fff;--ink:#17191d;--muted:#848891;--line:#e9ebee;--gold:#b88964;--gold-deep:#906344;--gold-pale:#f6eee8;--red:#c8473b;--shadow:0 15px 55px rgba(20,30,45,.035);--radius:26px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased}button,select,input{font:inherit}button{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:disabled{opacity:.48;cursor:default}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #c59a7b;outline-offset:3px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip{position:absolute;top:-80px;z-index:99;background:white;padding:10px}.skip:focus{top:4px}.shell{width:min(1140px,calc(100% - 44px));margin-inline:auto}
.header{background:rgba(255,255,255,.97);border-bottom:1px solid var(--line)}.head-inner{height:72px;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:25px}.brand{display:inline-flex;align-items:center;gap:11px;min-width:0}.brand-icon{width:42px;height:42px;background:#fff;border:1px solid #e3e4e6;border-radius:13px;display:grid;place-items:center;font-size:18px;font-weight:850;letter-spacing:-1px;flex-shrink:0}.brand-words{display:flex;flex-direction:column;min-width:0}.brand-words strong{font-size:14px;white-space:nowrap;letter-spacing:.015em}.brand-words small{color:var(--muted);font-size:10px;white-space:nowrap;letter-spacing:.13em}.top-nav{display:flex;gap:5px;align-items:center}.top-nav a{color:#71747b;font-size:12px;padding:9px 12px;border-radius:14px}.top-nav a:hover{background:#f2f2f3}.language{display:flex;align-items:center;gap:8px;background:#f6f6f7;border:1px solid #ededf0;border-radius:13px;padding:9px 12px;height:44px;color:#777}.language select{border:0;background:transparent;max-width:100px;font-size:12px;font-weight:700;color:#333;cursor:pointer}
.intro{padding:45px 0 27px}.eyebrow,.kicker{font-size:11px;letter-spacing:.13em;color:var(--gold-deep);font-weight:780}.eyebrow{letter-spacing:.17em}.version{color:#93969b;border:1px solid #e9e4e1;letter-spacing:.04em;padding:5px 8px;margin-left:8px;border-radius:99px;font-size:9px}.intro h1{font-size:clamp(44px,6vw,62px);letter-spacing:-.065em;line-height:1.08;margin:12px 0 9px}.gold-dot{color:var(--gold)}.intro p{margin:0;color:#858991;font-size:15px;line-height:1.65;max-width:740px}.intro-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:19px}.intro-tags span{color:#8e765f;background:#f7f2ee;border:1px solid #f2e7de;padding:6px 12px;border-radius:99px;font-size:11px;font-weight:650}
.workspace{display:grid;grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);gap:20px;align-items:stretch}.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.chord-panel,.harmony-panel{padding:29px 30px 27px;min-width:0}.section-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.section-header h2{font-size:25px;font-weight:760;letter-spacing:-.035em;margin:6px 0 0;line-height:1.2}.header-icon{color:#b5977f;font-size:29px;font-weight:300;line-height:1}.selector-row{display:flex;gap:11px;margin-top:18px}.selector-row.two .field{flex:1;min-width:0}.field{display:flex;flex-direction:column;gap:7px;min-width:0}.field.grow{width:100%}.field span{color:#848992;font-size:11px;font-weight:690}.field select,.search-wrap input{height:48px;border:1px solid #e6e8eb;border-radius:13px;background:#fff;color:#2a2c30;padding:0 13px;width:100%;font-size:13px;font-weight:650;min-width:0}.field select{cursor:pointer}.field select:hover{border-color:#ccb5a4}.tuning-note{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin:10px 0 0;color:#94979e;font-size:11px}.tuning-note strong{color:#997b65;font-weight:700}.tuning-note #instrumentHint{color:#9a9aa2}
.chord-body{margin-top:18px;padding:17px 20px 21px;background:linear-gradient(160deg,#fbfaf8 0%,#fff 56%);border:1px solid #eee8e3;border-radius:22px}.chord-display-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.chord-name{font-size:47px;font-weight:810;letter-spacing:-.07em;line-height:1.25}.icon-btn{width:40px;height:40px;border:1px solid #ebe7e4;background:white;color:#ab8b71;border-radius:13px;font-size:28px;line-height:1}.icon-btn[aria-pressed=true]{color:#be7658;background:#fdf2ec}.diagram-shell{display:flex;justify-content:center;align-items:center;padding:0 4px;min-height:315px}.diagram-shell svg{width:min(100%,340px);height:auto;overflow:visible}.shape-status{min-height:33px;font-size:11px;text-align:center;color:#8d8985;margin:-4px auto 5px;max-width:350px}.shape-status strong{color:#8c6749}.variations{display:flex;justify-content:center;gap:7px;min-height:38px;margin-top:4px}.variation{background:white;border:1px solid #e8e3de;color:#7a7573;font-size:11px;padding:7px 11px;border-radius:99px}.variation.active{background:#b88964;border-color:#b88964;color:white}.action-bar{display:flex;gap:9px;margin-top:16px}.primary-btn,.subtle-btn,.outline-btn{border-radius:13px;font-size:13px;font-weight:770;min-height:47px;display:inline-flex;justify-content:center;align-items:center;gap:10px;padding:10px 15px}.primary-btn{background:#1e2024;border:1px solid #1e2024;color:#fff;flex:1}.primary-btn:hover{background:#35383d}.subtle-btn,.outline-btn{background:#fff;border:1px solid #e5e5e7;color:#555961}.subtle-btn[aria-pressed=true]{background:#f8eee8;border-color:#d5ae91;color:#926342}.subtle-btn:hover,.outline-btn:hover{background:#f7f7f8}.sound-note{color:#989ba0;text-align:center;font-size:10px;margin:11px 4px 0}.theory-strip{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px}.theory-strip div{background:#f9fafb;border-radius:14px;padding:13px 14px;min-width:0}.theory-strip span{display:block;color:#96999e;font-size:10px;font-weight:630;margin-bottom:6px}.theory-strip strong{color:#3d3f44;font-size:12px;overflow-wrap:anywhere;line-height:1.5}
.intro-sub{font-size:12px;color:#858a92;line-height:1.6;margin:0}.circle-wrap{margin:12px auto 4px;width:min(100%,345px);aspect-ratio:1;position:relative;isolation:isolate}.circle-guide{position:absolute;inset:4%;border-radius:50%;border:1px solid #eae9e7;pointer-events:none}.circle-guide.g-inner{inset:23%;border-color:#f1eae5}.circle-node{position:absolute;width:48px;height:50px;transform:translate(-50%,-50%);display:flex;flex-direction:column;justify-content:center;align-items:center;border:1px solid transparent;border-radius:14px;background:transparent;color:#303035;padding:2px 1px;z-index:2}.circle-node strong{font-size:14px;line-height:1.2}.circle-node small{font-size:10px;line-height:1.3;color:#8c8b8d;margin-top:1px}.circle-node.active{background:#b88964;color:white;box-shadow:0 6px 18px rgba(184,137,100,.26)}.circle-node.active small{color:#fff2e9}.circle-node:hover:not(.active){background:#f6eee8}.circle-center{position:absolute;inset:36% 31%;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:0;pointer-events:none}.circle-center span{font-size:9px;letter-spacing:.05em;color:#8e9199;white-space:nowrap}.circle-center strong{font-size:32px;letter-spacing:-.04em;color:#9a6746;line-height:1.25}.circle-center small{font-size:12px;color:#777}.circle-pager{display:flex;justify-content:space-between;gap:7px;align-items:center;margin:0 0 20px}.pager{border:1px solid #e9e7e5;border-radius:10px;padding:8px 12px;min-height:38px;background:#fff;color:#7b6c60;font-size:11px;font-weight:720}.pager-center{font-size:10px;color:#aaa3a0;text-align:center}.harmony-panel h3{font-size:15px;font-weight:760;margin:18px 0 9px;letter-spacing:-.015em}.diatonic{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}.degree{background:#f8f8f9;border:1px solid #eeeeef;border-radius:10px;padding:9px 0;display:flex;flex-direction:column;align-items:center;gap:3px;color:#3e4145;min-width:0}.degree strong{font-size:13px;white-space:nowrap}.degree small{font-size:10px;color:#a6a5a7}.degree:hover{background:#f6eee8;border-color:#e7cfbf}.progressions{display:flex;flex-direction:column;gap:8px}.prog-row{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#fafafa;border:1px solid #ececec;border-radius:12px;padding:11px 12px}.prog-name{font-size:11px;color:#92969d;white-space:nowrap}.prog-notes{display:flex;gap:4px;flex-wrap:wrap}.prog-note{border:0;border-radius:7px;padding:4px 6px;color:#7c5f4b;background:#f6eee8;font-size:12px;font-weight:750}.prog-note:hover{background:#edddcf}.prog-row small{display:block;color:#a5a5a9;font-size:10px;letter-spacing:.03em}.theory-note{margin:20px 0 0;color:#9297a0;font-size:11px;line-height:1.75;padding-top:13px;border-top:1px solid #f0f0f1}
.catalog-panel{padding:29px 30px;margin-top:20px}.catalog-controls{display:flex;gap:12px;margin:20px 0 17px;align-items:end}.search-wrap{display:flex;align-items:center;position:relative;flex:1;min-width:0}.search-wrap span{position:absolute;left:14px;font-size:23px;color:#a5a5aa;line-height:1}.search-wrap input{padding-left:41px;font-weight:450}.filter{width:235px}.chord-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.catalog-chord{background:#fafafa;border:1px solid #eeeeef;border-radius:15px;padding:14px 9px;min-height:98px;text-align:left;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:4px}.catalog-chord:hover,.catalog-chord.selected{background:#fbf3ed;border-color:#d4b69e}.catalog-chord strong{font-size:18px;letter-spacing:-.025em}.catalog-chord small{font-size:10px;color:#989ba1;line-height:1.3}.catalog-chord .badge-chord{color:#9d7c62;font-size:9px;font-weight:700}.catalog-bottom{display:flex;align-items:center;justify-content:center;gap:17px;margin-top:20px}.outline-btn{min-height:39px}.count{font-size:11px;color:#aaa}.empty{grid-column:1/-1;color:#999;padding:25px;text-align:center}
.support-card{background:linear-gradient(125deg,#fbf8f5,#fff 70%);border:1px solid #ede6e0;border-radius:25px;padding:27px 30px;margin-top:20px;display:flex;gap:25px;align-items:center;justify-content:space-between}.support-card h2{font-size:24px;margin:9px 0 8px;letter-spacing:-.025em}.support-card p{max-width:620px;margin:0;color:#848993;line-height:1.7;font-size:13px}.support-action{min-width:220px;text-align:center}.donate{display:flex;gap:9px;align-items:center;justify-content:center;background:var(--red);color:white;padding:15px 18px;border-radius:14px;font-weight:760;font-size:13px;box-shadow:0 8px 20px rgba(200,71,59,.16)}.donate:hover{background:#a93c33}.support-action small{display:block;color:#b1aaa6;margin-top:8px;font-size:10px}.footer{border-top:1px solid #e5e5e7;margin-top:40px;padding:22px 0 36px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;column-gap:25px;row-gap:14px;color:#a4a7ad;font-size:11px}.footer-links{display:flex;gap:15px;flex-wrap:wrap}.footer-links a{color:#8c7b70}.footer p{flex-basis:100%;max-width:900px;margin:0;line-height:1.65;font-size:11px}
@media(max-width:1050px){.workspace{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:13px}.chord-panel,.harmony-panel{padding:23px 19px}.catalog-panel{padding:25px 20px}.chord-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.circle-wrap{max-width:310px}.prog-row{align-items:flex-start;flex-direction:column}.selector-row.two{gap:6px}}
@media(max-width:800px){.workspace{grid-template-columns:1fr}.circle-wrap{max-width:355px}.harmony-panel{padding:27px 25px}.prog-row{align-items:center;flex-direction:row}.chord-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.support-card{flex-direction:column;align-items:stretch;gap:18px}.support-action{min-width:0}.head-inner{gap:8px}.top-nav a{padding:9px 8px}}
@media(max-width:580px){.shell{width:calc(100% - 22px)}.head-inner{height:64px;gap:5px}.brand{gap:7px}.brand-icon{width:36px;height:36px;border-radius:11px;font-size:16px}.brand-words strong{font-size:11px}.brand-words small{font-size:8px;letter-spacing:.07em}.top-nav a{padding:7px 5px;font-size:11px}.language{padding:7px 5px;gap:3px;height:38px}.language select{font-size:11px;max-width:66px}.intro{padding:30px 3px 19px}.intro h1{font-size:46px;margin:9px 0}.intro p{font-size:13px}.intro-tags{gap:6px;margin-top:14px}.intro-tags span{padding:5px 9px;font-size:10px}.version{font-size:8px}.workspace{gap:13px}.chord-panel,.harmony-panel{padding:22px 17px;border-radius:22px}.section-header h2{font-size:22px}.chord-body{padding:15px 12px 18px}.diagram-shell{min-height:285px}.diagram-shell svg{max-width:320px}.chord-name{font-size:42px}.circle-wrap{max-width:340px}.circle-node{width:43px;height:45px}.circle-node strong{font-size:13px}.circle-node small{font-size:9px}.diatonic{gap:3px}.degree{padding:9px 0}.degree strong{font-size:11px}.degree small{font-size:9px}.catalog-panel{padding:22px 16px;border-radius:22px}.catalog-controls{flex-direction:column;align-items:stretch;gap:8px}.search-wrap,.filter{width:100%}.chord-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.catalog-chord{min-height:82px;padding:11px 10px}.catalog-chord strong{font-size:16px}.support-card{padding:25px 20px;border-radius:22px}.footer{margin-top:26px}.pager-center{font-size:9px}}
@media(max-width:360px){.brand-words small{font-size:7px}.brand-words strong{font-size:10px}.top-nav a{font-size:10px;padding:7px 2px}.language select{max-width:54px}.language{padding:5px 3px}.shell{width:calc(100% - 16px)}.circle-node{width:39px;height:42px}.chord-panel,.harmony-panel{padding:17px 12px}.circle-wrap{max-width:310px}.degree strong{font-size:10px}.diatonic{gap:2px}.chord-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.chord-body{padding:13px 8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* BK Chords 1.1: related harmony functions, refined physical diagram labels */
.circle-node.neighbor{background:#faf2ec;border-color:#e9d1be;color:#8b5e43}
.circle-node.neighbor small{color:#a87b61}
.related-keys{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:10px 0 17px}
.relationship{background:#fbfaf8;border:1px solid #e9e3de;border-radius:11px;min-height:61px;padding:8px 3px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;color:#343435}
.relationship:hover{background:#f6eee8;border-color:#dcbfa7}
.relationship small{font-size:9px;color:#928579;text-align:center;line-height:1.3}
.relationship strong{font-size:16px}
.prog-play{background:#1e2024;color:#fff;border:0;border-radius:10px;width:32px;height:32px;flex-shrink:0;cursor:pointer}
.prog-play:hover{background:#996949}
@media(max-width:580px){.related-keys{gap:4px}.relationship small{font-size:8px}.relationship strong{font-size:14px}}

/* BK Chords v1.2 — responsive horizontal fretboard, full-position explorer */
.orientation-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:13px;flex-wrap:wrap}
.orientation-caption{font-size:11px;font-weight:700;color:#807c79}
.orientation-toggle{background:#f5f3f1;padding:3px;border-radius:11px;display:flex;gap:3px}
.orientation-btn{background:transparent;border:1px solid transparent;border-radius:9px;padding:8px 11px;color:#8a8079;font-size:11px;font-weight:740}
.orientation-btn.active{background:#fff;border-color:#e7d9ce;color:#916445;box-shadow:0 1px 6px #2010000a}
.diagram-shell{min-height:235px;padding:6px 0 0}
.diagram-shell svg{width:100%;max-width:560px;max-height:335px}
.shape-status{margin:1px auto 6px;max-width:520px;min-height:25px;line-height:1.6}
.neck-overview{border-top:1px solid #efe9e3;padding-top:13px;margin-top:8px}
.position-header{display:flex;justify-content:space-between;align-items:center;gap:8px;color:#5f6064;font-size:11px;margin-bottom:9px}
.position-header span{color:#a4a0a0;font-size:10px}
.fret-track{display:flex;gap:4px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:thin;scrollbar-color:#ded1c6 transparent}
.fret-track[hidden]{display:none}
.fret-node{flex:0 0 25px;height:29px;display:grid;place-items:center;border-radius:8px;border:1px solid #eeecea;color:#b0adb0;background:#f9f9fa;font-size:10px;font-weight:700}
.fret-node.available{border-color:#ead6c6;background:#fbf2ec;color:#986d4f}
.fret-node.available:hover,.fret-node.available.active{background:#b88964;border-color:#b88964;color:#fff}
.variations{justify-content:flex-start;align-items:stretch;gap:7px;margin-top:1px;overflow-x:auto;padding:1px 0 10px;scrollbar-width:thin;scrollbar-color:#ded1c6 transparent;min-height:60px}
.variation{border-radius:12px;flex:0 0 auto;min-width:95px;padding:9px 11px;text-align:left;display:flex;flex-direction:column;gap:4px}
.variation strong{font-size:12px;white-space:nowrap;font-weight:750}
.variation small{font-size:9px;color:#a89e98;max-width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.variation.active small{color:#fff5ec}
@media(max-width:580px){.diagram-shell{min-height:184px}.diagram-shell svg{max-width:100%;max-height:325px}.orientation-caption{font-size:10px}.orientation-btn{font-size:10px;padding:7px 8px}.fret-node{flex-basis:27px}.variation{min-width:91px}}

/* BK Chords v1.3 — note learning and harmony-to-fretboard interaction */
.notes-glossary{margin-top:22px;padding:17px 21px 18px;background:linear-gradient(120deg,#fffcf9,#fff);border:1px solid #eee6df;border-radius:19px}
.glossary-heading strong{font-size:14px;color:#5d4c41}.glossary-heading p{font-size:11px;color:#92949c;margin:4px 0 11px}
.notes-legend-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}
.note-legend-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:#f8f3ee;border-radius:11px;padding:10px 3px;color:#9a6c4b}
.note-legend-item strong{font-size:16px;line-height:1}.note-legend-item span{font-size:12px;font-weight:650;color:#4e5056;white-space:nowrap}
.accidental-guide{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:13px}
.accidental-guide>div{display:flex;gap:10px;align-items:center;padding:8px 10px;background:#fbfaf8;border-radius:11px;color:#797879;font-size:11px;line-height:1.5}
.accidental-guide b{color:#98623d;font-size:23px;min-width:22px;text-align:center}
.chord-translation{font-size:13px;font-weight:650;color:#987354;margin-top:-1px;line-height:1.4}
.circle-action-hint{font-size:11px;line-height:1.6;margin:9px 0 0;color:#977357}
.circle-node{width:64px;height:58px;padding:3px 2px;gap:1px;z-index:2;justify-content:center}
.circle-chord{width:100%;height:26px;min-height:26px;display:flex;justify-content:center;align-items:center;gap:3px;background:transparent;border:0;border-radius:8px;color:inherit;cursor:pointer;padding:1px;font-weight:750}
.circle-chord strong{font-size:13px;line-height:1}.circle-chord small{font-size:8px;margin:0;color:#9e8b80;white-space:nowrap;line-height:1}
.circle-chord:hover,.circle-chord:focus-visible,.circle-chord.is-current{background:#f4e7dc;color:#845235;outline-offset:1px}
.circle-node.active .circle-chord small{color:#fff0e6}
.circle-node.active .circle-chord.is-current{background:#fff1e6;color:#865235}
.circle-node.active .circle-chord.is-current small{color:#865235}
.circle-node.active .circle-chord:hover{background:#faeadd;color:#8d603f}
.circle-node.active .circle-chord:hover small{color:#8d603f}
.circle-center{inset:33% 31%;gap:0}.circle-center strong{font-size:29px}.circle-center small{font-size:12px;line-height:1.1;margin-top:3px}
.circle-center .center-ru{font-size:9px;color:#a67e65;letter-spacing:0;line-height:1.2}
.harmony-selection{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 12px;background:#faf3ee;border:1px solid #ecddcf;border-radius:12px;margin:9px 0 17px}
.harmony-selection-label{display:flex;flex-direction:column;gap:3px;min-width:0}.harmony-selection-label small{font-size:9px;color:#927b6b}
.harmony-selection-label strong{font-size:16px;color:#4a3e36}.harmony-selection-label span{font-size:11px;color:#967357}
.harmony-selection button{border:1px solid #e6c8b0;border-radius:9px;background:white;color:#936244;padding:10px 8px;font-size:10px;font-weight:750;flex-shrink:0;cursor:pointer}
.relationship em,.degree em,.catalog-chord em{display:block;font-style:normal;color:#967357;font-size:10px;font-weight:610}
.degree{min-height:71px}.degree em{font-size:9px;color:#8b6e5b;line-height:1.1;white-space:nowrap}.degree small{line-height:1.1}
.relationship em{font-size:10px}.catalog-chord{min-height:116px}.catalog-chord em{font-size:11px}
.prog-note{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:37px;font-weight:750}
.prog-note strong{font-size:12px}.prog-note small{font-size:9px;color:#9a745a;letter-spacing:0}
@media(max-width:580px){.notes-glossary{padding:14px 11px 15px;margin-top:13px}.notes-legend-grid{gap:4px}.note-legend-item{padding:8px 1px}.note-legend-item strong{font-size:14px}.note-legend-item span{font-size:10px}.accidental-guide{grid-template-columns:1fr;gap:4px}.circle-node{width:58px;height:58px}.circle-chord{gap:2px;height:26px;min-height:26px}.circle-chord strong{font-size:12px}.circle-chord small{font-size:7px}.circle-center{inset:34% 31%}.circle-center strong{font-size:27px}.degree{min-height:72px}.degree em{font-size:8px}.degree strong{font-size:11px}.chord-translation{font-size:12px}.catalog-chord{min-height:100px}}
@media(max-width:360px){.circle-node{width:53px;height:54px}.circle-chord{height:24px;min-height:24px}.circle-chord strong{font-size:11px}.circle-chord small{font-size:7px}.note-legend-item span{font-size:9px}.degree em{font-size:7px}}

/* BK Chords v1.4 — simplified harmony circle and full learner finger numbering */
.circle-chord{display:flex;justify-content:center;align-items:center;min-height:26px;width:100%;border:0;background:transparent;border-radius:8px;padding:1px 0;color:inherit;font:inherit}.circle-chord:hover,.circle-chord:focus-visible,.circle-chord.is-current{background:#f4e7dc;color:#845235;outline-offset:2px}.circle-node.active .circle-chord:hover,.circle-node.active .circle-chord.is-current{background:#fff1e6;color:#8c5c3d}.circle-chord strong{font-size:13px;line-height:1}.center-ru:empty{display:none}

/* BK Chords v1.5 — improved visual circle of fifths */
.circle-legend{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:10px 0 12px}
.circle-legend span{padding:6px 10px;border-radius:999px;background:#f8f3ee;border:1px solid #eee2d7;color:#946e55;font-size:10px;font-weight:700}
.circle-wrap{margin:14px auto 8px;width:min(100%,380px);aspect-ratio:1;position:relative;isolation:isolate}
.circle-guide{position:absolute;border-radius:50%;pointer-events:none}
.circle-guide.g-outer{inset:2%;border:1.5px solid #eadfd5;background:radial-gradient(circle at center, transparent 0 40%, rgba(244,236,229,.35) 40% 100%)}
.circle-guide.g-middle{inset:20%;border:1px dashed #e8d8cb;background:transparent}
.circle-guide.g-inner{inset:33%;border:1px solid #efe4db;background:radial-gradient(circle at center, #fff 0 58%, rgba(248,243,238,.85) 58% 100%)}
#circleButtons{position:absolute;inset:0}
.circle-btn{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;min-width:54px;height:40px;padding:0 10px;border-radius:999px;border:1px solid #e9e1da;background:#fff;color:#514741;box-shadow:0 5px 16px rgba(40,35,30,.04);cursor:pointer;z-index:2}
.circle-btn strong{font-size:13px;line-height:1;white-space:nowrap}
.circle-major{background:#fffdfa;border-color:#ecdccf;color:#7f5438}
.circle-minor{background:#f7f8fb;border-color:#e3e7ee;color:#55606f;min-width:50px;height:36px}
.circle-btn.is-neighbor{box-shadow:0 0 0 2px rgba(212,184,160,.20);border-color:#e0ccb8}
.circle-btn.is-main{box-shadow:0 0 0 3px rgba(184,137,100,.18), 0 7px 18px rgba(184,137,100,.15)}
.circle-btn.is-current{background:#b88964;border-color:#b88964;color:#fff}
.circle-btn:hover,.circle-btn:focus-visible{transform:translate(-50%,-50%) scale(1.05);box-shadow:0 8px 18px rgba(80,60,40,.12);outline:none}
.circle-center{position:absolute;inset:37% 34%;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1;pointer-events:none;background:linear-gradient(180deg,#fff,#fcf7f3);border:1px solid #f0e5dc;border-radius:24px;box-shadow:0 10px 30px rgba(60,40,20,.05)}
.circle-center strong{font-size:30px;letter-spacing:-.04em;color:#9a6746;line-height:1.2}.circle-center small{font-size:13px;color:#727780;margin-top:3px}.circle-center span{font-size:9px;letter-spacing:.09em;color:#9a8f86;white-space:nowrap}
@media(max-width:580px){
  .circle-wrap{max-width:350px}
  .circle-btn{min-width:49px;height:36px;padding:0 8px}
  .circle-btn strong{font-size:12px}
  .circle-minor{min-width:45px;height:32px}
  .circle-center{inset:38% 34%}
  .circle-center strong{font-size:26px}
}
@media(max-width:360px){
  .circle-wrap{max-width:320px}
  .circle-btn{min-width:44px;height:33px;padding:0 6px}
  .circle-btn strong{font-size:11px}
  .circle-minor{min-width:41px;height:29px}
}

/* 1.6 — always-visible finger legend and clearer guidance */
.finger-legend{font-size:11px;color:#887364;margin:0 auto 12px;text-align:center;line-height:1.6;max-width:460px}
.finger-legend:empty{display:none}