: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}

/* BK Chords v1.7 — clearer harmony selection and teaching hints */
.section-note{margin:-2px 0 10px;color:#95949b;font-size:11px;line-height:1.6}
.harmony-selection{position:relative;align-items:center;padding:13px 14px 13px 16px;background:linear-gradient(135deg,#fff9f4,#fff);border:1px solid #ecd9c8;box-shadow:0 10px 24px rgba(184,137,100,.08)}
.harmony-selection::before{content:'';position:absolute;left:0;top:10px;bottom:10px;width:4px;border-radius:99px;background:linear-gradient(180deg,#d6a37f,#b88964)}
.harmony-selection-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.selected-pill{display:inline-flex;align-items:center;justify-content:center;padding:3px 8px;border-radius:999px;background:#1e2024;color:#fff;font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.harmony-selection-label strong{font-size:22px;line-height:1.1}.harmony-selection-label span{font-size:12px}
.circle-btn{transition:transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease}
.circle-btn.is-main{box-shadow:0 0 0 3px rgba(184,137,100,.20), 0 8px 18px rgba(184,137,100,.18)}
.circle-btn.is-current{background:#181b21;border-color:#181b21;color:#fff;transform:translate(-50%,-50%) scale(1.16);box-shadow:0 0 0 4px rgba(255,190,118,.45), 0 10px 28px rgba(24,27,33,.30);z-index:4}
.circle-btn.is-current::after{content:attr(data-current);position:absolute;top:-16px;left:50%;transform:translateX(-50%);padding:2px 7px;border-radius:999px;background:#ffeddc;color:#915f3f;font-size:8px;font-weight:800;letter-spacing:.04em;white-space:nowrap;border:1px solid #f2d6be}
.circle-btn.is-current:hover,.circle-btn.is-current:focus-visible{transform:translate(-50%,-50%) scale(1.18)}
.circle-btn.is-neighbor:not(.is-current){box-shadow:0 0 0 2px rgba(212,184,160,.22)}
.related-keys{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:10px 0 18px}
.relationship{min-height:114px;padding:10px 8px 12px;align-items:flex-start;text-align:left;gap:5px}
.relationship strong{font-size:18px}.relationship small{font-size:10px;text-align:left;color:#8e8378}.relationship em{font-size:11px}.role-hint{display:block;color:#9a978f;font-size:10px;line-height:1.45;margin-top:auto}
.relationship.is-current,.degree.is-current,.prog-note.is-current{border-color:#b88964;background:#fff6ef;box-shadow:0 0 0 2px rgba(184,137,100,.18)}
.relationship.is-current strong,.degree.is-current strong,.prog-note.is-current strong{color:#8b5939}
.diatonic{gap:7px}.degree{min-height:132px;padding:12px 7px 10px;justify-content:flex-start}.degree strong{font-size:18px}.degree em{font-size:11px}.degree small{margin-top:auto;font-size:11px;color:#9d958f}
.prog-row{padding:14px 14px;border-radius:16px;gap:12px;align-items:center}
.prog-row>div:first-child{min-width:168px}.prog-name{font-size:13px;color:#4b5057;font-weight:760;margin-bottom:2px}.prog-row small{font-size:10px}.prog-why{margin-top:7px;color:#9a958f;font-size:10px;line-height:1.45;max-width:180px}
.prog-note{min-width:64px;min-height:74px;padding:8px 8px 6px;border:1px solid transparent;border-radius:12px;background:#f7efe8;color:#7c5f4b;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.prog-note strong{font-size:16px}.prog-note small{font-size:11px;color:#9a745a}.prog-play{width:42px;height:42px;border-radius:14px}
@media(max-width:580px){
  .harmony-selection{padding:12px 12px 12px 14px}.harmony-selection-label strong{font-size:20px}.harmony-selection button{padding:10px 10px}
  .circle-btn.is-current{transform:translate(-50%,-50%) scale(1.14)}
  .related-keys{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.relationship{min-height:108px;padding:10px}.relationship strong{font-size:17px}
  .diatonic{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.degree{min-height:118px}.degree strong{font-size:16px}
  .prog-row{flex-direction:column;align-items:stretch}.prog-row>div:first-child{min-width:0}.prog-why{max-width:none}
  .prog-notes{gap:6px}.prog-note{min-width:58px;min-height:72px;flex:0 0 auto}.prog-play{align-self:flex-end}
}
@media(max-width:360px){
  .selected-pill{font-size:8px}.relationship strong{font-size:16px}.degree strong{font-size:15px}.prog-note{min-width:54px;padding:7px 5px}
}

/* BK Chords 1.8 — accessible evergreen learning content */
.seo-learning,.seo-faq{padding:30px 32px;margin-top:20px}
.seo-learning h2,.seo-faq h2{font-size:25px;margin:8px 0 10px;letter-spacing:-.03em}
.learn-intro{color:#777d86;max-width:820px;font-size:14px;line-height:1.7}
.learn-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-top:22px}
.learn-step{position:relative;padding:24px 18px 20px;background:#fcfaf8;border:1px solid #eee7e1;border-radius:17px}
.learn-number{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:12px;background:#b88964;color:white;font-weight:800;font-size:13px}
.learn-step h3{font-size:15px;letter-spacing:-.02em;margin:14px 0 6px}
.learn-step p{font-size:12px;color:#84868c;line-height:1.7;margin:0}
.faq-items{display:grid;grid-template-columns:1fr;gap:9px;margin-top:18px}
.faq-item{border:1px solid #e8e8e9;border-radius:14px;background:#fdfdfd;overflow:hidden}
.faq-item summary{cursor:pointer;position:relative;padding:17px 44px 17px 18px;font-size:13px;font-weight:700;line-height:1.5;color:#3a3c41;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';position:absolute;right:18px;top:15px;color:#ab845f;font-size:22px;font-weight:500}
.faq-item[open] summary::after{content:'−'}
.faq-item p{border-top:1px solid #f1eeea;padding:1px 18px 16px;margin:0;color:#777d87;font-size:12px;line-height:1.8}
.language-links{width:100%;flex-basis:100%;border-top:1px solid #ececec;padding-top:14px}
.language-links summary{cursor:pointer;font-size:12px;font-weight:750;color:#79797f}
.language-links nav{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.language-links nav a{display:inline-block;padding:6px 10px;border:1px solid #ece5dc;border-radius:10px;background:#fff;font-size:11px;color:#80674f}
.language-links nav a[aria-current=page]{background:#b88964;border-color:#b88964;color:#fff}
html[dir=rtl] .faq-item summary{padding-right:18px;padding-left:44px}
html[dir=rtl] .faq-item summary::after{right:auto;left:18px}
@media(max-width:800px){.learn-steps{grid-template-columns:1fr}.seo-learning,.seo-faq{padding:24px 20px}}
@media(max-width:580px){.seo-learning,.seo-faq{padding:22px 16px;border-radius:22px}.seo-learning h2,.seo-faq h2{font-size:22px}.learn-step{padding:16px}.learn-steps{gap:9px}}

/* Localized category captions */
.catalog-chord .badge-chord{overflow-wrap:anywhere;line-height:1.35;max-width:100%;}

/* BK Music App collection header & footer — aligned with tuner / metronome */
.header{background:#fff;border-bottom:1px solid #e9eaec;box-shadow:0 2px 14px rgba(19,24,30,.02)}
.head-inner{min-height:78px;height:auto;display:flex;justify-content:space-between;gap:16px;align-items:center;padding-top:12px;padding-bottom:12px}
.brand{gap:10px;flex-shrink:0}.brand-icon,.footer-bk{display:grid;place-items:center;width:42px;height:42px;border:1px solid #e4e5e7;background:#fff;border-radius:12px;color:#191a1e;font-size:17px;font-weight:850;letter-spacing:-1px}
.brand-words strong{font-size:13px;color:#17191d;letter-spacing:.02em}.brand-words small{font-size:9px;color:#9a9da5;letter-spacing:.12em}
.top-nav{display:flex;gap:5px;align-items:center;flex-wrap:wrap;justify-content:center}
.top-nav a,.top-nav .nav-chords{display:inline-flex;align-items:center;min-height:35px;padding:8px 11px;border-radius:11px;font-size:12px;font-weight:650;color:#737782;white-space:nowrap}
.top-nav .nav-chords{background:#f7f0ea;color:#976a48;border:1px solid #eddacd;font-weight:800}
.top-nav a:hover{color:#976a48;background:#f8f3ef}
.language-wrap{height:43px;display:flex;align-items:center;gap:7px;border:1px solid #e5e5e7;border-radius:13px;background:#f7f7f8;padding:0 9px 0 11px;flex-shrink:0;color:#68707b;white-space:nowrap}
.language-wrap .lang-globe{font-size:16px;line-height:1}.language-wrap select{border:0;background:transparent;min-width:0;max-width:128px;color:#292d33;font-weight:750;font-size:12px;cursor:pointer}
.support-card .donate{background:#c8473b;color:#fff;border:1px solid #c8473b;box-shadow:0 7px 23px rgba(200,71,59,.18)}.support-card .donate:hover{background:#aa352c}
.support-card .support-action small{font-size:11px;color:#9a9fa6}
.audio-status{min-height:15px;font-size:11px;font-weight:650;color:#976a48;text-align:center;margin:3px 0 0}
.footer{display:block;margin-top:36px;border-top:1px solid #e6e7e9;padding:24px 0 36px;color:#8b8f99}
.footer-top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer-mark{display:flex;align-items:center;gap:9px}.footer-bk{width:34px;height:34px;font-size:13px;border-radius:10px}
.footer-mark span:last-child{display:flex;flex-direction:column;gap:1px}.footer-mark strong{font-size:11px;font-weight:830;letter-spacing:.04em;color:#26282c}.footer-mark small{font-size:8px;letter-spacing:.11em;color:#9a9da5}
.footer-links{display:flex;align-items:center;gap:9px 15px;flex-wrap:wrap}.footer-links a{font-size:11px;font-weight:650;color:#737783;white-space:nowrap}.footer-links a[aria-current]{color:#976a48}.footer-links a:hover,.footer-bottom a:hover{color:#b77d55}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;border-top:1px solid #ececee;margin-top:18px;padding-top:14px;color:#9b9da5;font-size:10px}
.footer-bottom a{color:#a04b3f;font-weight:800;font-size:11px}
.footer .language-links{margin-top:15px;border-top:1px solid #eeeeef;padding-top:13px;width:100%}
@media(max-width:810px){.head-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;row-gap:9px}.top-nav{grid-column:1/-1;grid-row:2;justify-content:flex-start}.language-wrap{grid-row:1;grid-column:2}.brand{grid-column:1;grid-row:1;min-width:0}.footer-top{align-items:flex-start}}
@media(max-width:580px){.head-inner{padding-top:10px;padding-bottom:9px;gap:7px}.brand-icon{width:36px;height:36px;font-size:15px}.brand-words strong{font-size:11px}.brand-words small{font-size:8px}.language-wrap{height:38px;padding:0 7px;gap:4px}.language-wrap select{max-width:112px;font-size:11px}.top-nav{gap:3px}.top-nav a,.top-nav .nav-chords{font-size:11px;padding:7px 10px;min-height:32px}.footer-links{gap:10px}.footer-bottom{align-items:flex-start}}
@media(max-width:370px){.language-wrap select{max-width:95px}.top-nav a,.top-nav .nav-chords{font-size:10px;padding:7px 8px}}

/* v1.10: shared BK Music App legal footer matching tuner & metronome */
.footer-legal-area{margin-top:24px;width:100%;border-top:1px solid #e8e8ea;padding-top:18px}
.footer-legal-actions{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 18px;margin:0 4px 22px}
.footer-analytics-settings,.footer-legal-link{font:inherit;font-size:13px;font-weight:600;color:#84786f;background:none;border:0;padding:7px 0;line-height:1.5;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;cursor:pointer}
.footer-analytics-settings:hover,.footer-legal-link:hover{color:#875838}
.footer-analytics-settings:focus-visible,.footer-legal-link:focus-visible{outline:3px solid #b88964;outline-offset:4px;border-radius:4px}
.footer-legal-notice{display:block;width:100%;max-width:unset!important;background:#faf8f6;border:1px solid #e8ded7;border-radius:17px;padding:18px 21px;margin:0!important;color:#8c8b90!important;font-size:12px!important;line-height:1.85!important;overflow-wrap:anywhere}
.bk-analytics-overlay{position:fixed;inset:0;z-index:10001;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(20,22,26,.5)}
.bk-analytics-dialog{width:min(100%,460px);border:1px solid #e7ddd4;border-radius:21px;background:#fff;padding:23px;box-shadow:0 18px 70px rgba(0,0,0,.20);color:#292b31}
.bk-analytics-dialog h2{font-size:19px;margin:0 0 10px}.bk-analytics-dialog p{font-size:13px;line-height:1.65;color:#6f747e;margin:0 0 18px}
.bk-analytics-buttons{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px}
.bk-analytics-buttons button{padding:10px 13px;border-radius:10px;border:1px solid #dfd8d2;font-size:12px;font-weight:750;cursor:pointer;background:#fff;color:#4b4b50}
.bk-analytics-buttons button.primary{background:#b88964;color:#fff;border-color:#b88964}
@media(max-width:580px){.footer-legal-area{margin-top:18px}.footer-legal-actions{gap:12px}.footer-analytics-settings,.footer-legal-link{font-size:12px}.footer-legal-notice{padding:16px 17px;font-size:12px!important;border-radius:16px}}

/* BK Chords v1.11 — no text spill in chord cards, responsive harmony levels. */
.chord-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.catalog-chord{min-width:0;max-width:100%;width:100%;min-height:152px;padding:14px 13px;gap:8px;align-items:stretch;justify-content:flex-start;overflow:visible;text-align:start}
.catalog-chord>*{max-width:100%;min-width:0;display:block;white-space:normal;overflow-wrap:anywhere;word-break:normal;hyphens:auto}
.catalog-chord .badge-chord{font-size:10px;line-height:1.4;letter-spacing:.04em;overflow-wrap:anywhere}
.catalog-chord strong{font-size:20px;line-height:1.22;letter-spacing:-.02em}
.catalog-chord em{font-size:13px;line-height:1.3;font-style:normal}
.catalog-chord small{font-size:11px;line-height:1.45;color:#7f848d;overflow-wrap:anywhere;hyphens:auto;word-break:normal}
.harmony-level-control{margin:14px 0 16px;padding:14px;background:#faf8f6;border:1px solid #ebe3dd;border-radius:16px}
.harmony-level-heading{color:#665b55;font-size:12px;font-weight:800;margin-bottom:10px}
.harmony-level-buttons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.harmony-level-btn{min-height:42px;padding:8px 6px;border:1px solid #e5ded8;border-radius:11px;background:#fff;color:#6e6b69;font-size:11px;line-height:1.25;font-weight:700;white-space:normal;overflow-wrap:anywhere;hyphens:auto;text-align:center}
.harmony-level-btn:hover{background:#f5e8dd;border-color:#cfab8d}
.harmony-level-btn.is-active{background:#2b2929;border-color:#2b2929;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.11)}
.harmony-level-btn:focus-visible{outline:3px solid #c39271;outline-offset:2px}
.harmony-level-description{font-size:11px;color:#8e8278;line-height:1.65;margin:10px 1px 0;min-height:17px}
.diatonic.harmony-sets{display:flex;flex-direction:column;gap:18px}
.harmony-chord-group{min-width:0;width:100%}
.harmony-chord-group-title{color:#94694c;font-size:12px;margin:0 0 9px;font-weight:800}
.harmony-chords-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.harmony-chords-grid .degree{min-width:0;max-width:100%;min-height:96px;padding:11px 5px 9px;align-items:center;text-align:center;overflow:visible;gap:5px}
.harmony-chords-grid .degree strong{font-size:17px;max-width:100%;overflow-wrap:anywhere;line-height:1.25;white-space:normal}
.harmony-chords-grid .degree em{font-size:10px;max-width:100%;white-space:normal;overflow-wrap:anywhere;hyphens:auto;line-height:1.3}
.harmony-chords-grid .degree em:empty{display:none}
.harmony-chords-grid .degree small{font-size:10px;line-height:1.25;overflow-wrap:anywhere;white-space:normal}
@media(min-width:1300px){.chord-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:1050px){.chord-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:800px){.chord-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:580px){
 .chord-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 .catalog-chord{min-height:152px;padding:14px 12px}
 .catalog-chord small{font-size:12px}
 .harmony-level-control{padding:12px}
 .harmony-level-buttons{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .harmony-level-btn{min-height:44px;font-size:12px}
 .harmony-chords-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 .harmony-chords-grid .degree{min-height:94px}
 .harmony-chords-grid .degree strong{font-size:15px}
}
@media(max-width:360px){
 .catalog-chord{padding:12px 9px}
 .catalog-chord strong{font-size:18px}
 .catalog-chord small{font-size:11px}
 .harmony-chords-grid .degree strong{font-size:14px}
}

/* BK Chords 1.12 — live playback button and per-sequence status */
.prog-play.is-playing,.primary-btn.is-playing{background:#b88964!important;border-color:#b88964!important;color:#fff!important;box-shadow:0 0 0 3px rgba(184,137,100,.18)}
.prog-play:focus-visible,.primary-btn:focus-visible{outline:3px solid #b88964;outline-offset:3px}
.progression-audio-status{flex-basis:100%;margin:0!important;line-height:1.4;font-size:11px;color:#956343;min-height:0}
.progression-audio-status:empty{display:none}
.audio-status{color:#936044;font-size:12px;font-weight:700;min-height:16px}
.footer-legal-link{cursor:pointer}

/* BK Chords 1.13 — organized, adaptive footer, matching the BK Music App family */
.footer.footer-organized{display:block;margin-top:36px;padding:0 0 30px;border-top:1px solid #e5e5e8;color:#757982}
.footer-organized *{box-sizing:border-box}
.footer-main-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:22px 35px;padding:27px 0 25px;align-items:start}
.footer-brand-block{min-width:0}.footer-organized .footer-mark{align-items:center;gap:12px}
.footer-organized .footer-bk{width:44px;height:44px;border-radius:13px;font-size:17px}
.footer-organized .footer-mark strong{font-size:13px;letter-spacing:.045em}
.footer-organized .footer-mark small{font-size:9px}
.footer-organized .footer-tagline{font-size:12px;color:#92959c;line-height:1.5;margin:10px 0 0 56px;max-width:260px}
.footer-section-title{font-size:12px;line-height:1.4;letter-spacing:.03em;color:#575960;font-weight:760;margin:0 0 11px}
.footer-nav-block{min-width:0}
.footer-organized .footer-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.footer-organized .footer-links a{display:flex;align-items:center;min-height:40px;padding:9px 12px;white-space:normal;border-radius:12px;border:1px solid #e9eaec;background:#fff;font-size:12px;font-weight:690;line-height:1.35;color:#666b75;overflow-wrap:anywhere}
.footer-organized .footer-links a:hover{border-color:#d8bea8;background:#fbf5f0;color:#946444}
.footer-organized .footer-links a[aria-current]{border-color:#e1cfbf;background:#f8efe8;color:#946444}
.footer-controls-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;padding:19px 0;border-top:1px solid #e9eaed}
.footer-control-card{min-width:0;border:1px solid #e9e6e3;border-radius:18px;padding:16px 17px 18px;background:linear-gradient(160deg,#fff,#fdfcfb);align-self:stretch}
.footer-card-heading{display:flex;gap:12px;align-items:flex-start;min-width:0;margin-bottom:12px}
.footer-card-heading>div{min-width:0}.footer-card-heading h2{font-size:14px;font-weight:770;color:#34363a;line-height:1.25;margin:0 0 4px}
.footer-card-heading p{font-size:11px;color:#92959e;line-height:1.45;margin:0}
.footer-card-icon{flex:0 0 34px;width:34px;height:34px;display:grid;place-items:center;font-size:19px;color:#986c4d;background:#f8f0e9;border-radius:11px}
.footer-organized .language-links{margin:0;border:0;padding:0;width:100%;background:transparent}
.footer-organized .language-links summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 13px;min-height:44px;cursor:pointer;list-style:none;border:1px solid #ebe4df;border-radius:11px;color:#84654f;background:#fdf9f5;font-size:12px;font-weight:750;line-height:1.4}
.footer-organized .language-links summary::-webkit-details-marker{display:none}
.footer-organized .language-links summary::after{content:'⌄';font-size:19px;line-height:1;transition:transform .15s ease}
.footer-organized .language-links[open] summary::after{transform:rotate(180deg)}
.footer-organized .language-links nav{margin:12px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.footer-organized .language-links nav a{display:flex;align-items:center;justify-content:center;text-align:center;min-width:0;min-height:38px;border-radius:9px;padding:7px 6px;font-size:11px;line-height:1.3;overflow-wrap:anywhere}
.footer-organized .footer-legal-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;margin:0;border:0;padding:0}
.footer-organized .footer-analytics-settings,.footer-organized .footer-legal-link{display:flex;justify-content:space-between;align-items:center;text-align:start;width:100%;min-width:0;min-height:44px;background:#fff;border:1px solid #ebeaeb;border-radius:11px;padding:11px 13px;font:inherit;font-size:12px;font-weight:690;line-height:1.4;color:#6e7078;text-decoration:none;cursor:pointer;overflow-wrap:anywhere}
.footer-organized .footer-analytics-settings::after,.footer-organized .footer-legal-link::after{content:'›';font-size:19px;line-height:1;color:#9e7a60;flex:0 0 auto;margin-inline-start:10px}
.footer-organized .footer-analytics-settings:hover,.footer-organized .footer-legal-link:hover{background:#faf5f0;border-color:#d8bea8;color:#8b5c3d}
.footer-copyright-note{display:flex;gap:13px;align-items:flex-start;padding:15px 17px;border:1px solid #e8e2dc;background:#fbf8f5;border-radius:17px}
.footer-copyright-icon{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border:1px solid #eadccd;border-radius:10px;background:#fff;color:#977151;font-size:16px;font-weight:600}
.footer-organized .footer-legal-notice{display:block;flex:1 1 auto;width:auto!important;max-width:none!important;min-width:0;margin:0!important;padding:1px 0 0!important;background:transparent!important;border:none!important;border-radius:0;color:#85868d!important;line-height:1.65!important;font-size:11.5px!important;overflow-wrap:anywhere}
.footer-organized .footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:13px 20px;flex-wrap:wrap;border-top:1px solid #e9eaed;margin-top:20px;padding:17px 0 0;color:#9599a1;font-size:11px}
.footer-organized .footer-bottom a{display:inline-flex;align-items:center;min-height:36px;font-size:11px;font-weight:760;color:#a04b3f}
.footer-organized a:focus-visible,.footer-organized button:focus-visible,.footer-organized summary:focus-visible{outline:3px solid #b88964;outline-offset:3px}
@media(max-width:800px){
 .footer-main-grid{grid-template-columns:1fr;gap:18px}
 .footer-controls-grid{grid-template-columns:1fr;gap:10px}
 .footer-organized .footer-links{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:580px){
 .footer.footer-organized{margin-top:28px;padding-bottom:28px}
 .footer-main-grid{padding:23px 0 19px;gap:18px}
 .footer-organized .footer-tagline{margin-left:55px;font-size:11px}
 .footer-organized .footer-links{gap:7px}
 .footer-organized .footer-links a{padding:10px 11px;font-size:11px;min-height:43px}
 .footer-controls-grid{padding:16px 0}
 .footer-control-card{padding:15px;border-radius:16px}
 .footer-organized .language-links nav{grid-template-columns:repeat(2,minmax(0,1fr))}
 .footer-copyright-note{padding:14px 13px;gap:9px}
 .footer-organized .footer-legal-notice{font-size:11px!important;line-height:1.6!important}
 .footer-organized .footer-bottom{align-items:flex-start;flex-direction:column;gap:5px}
}
@media(prefers-reduced-motion:reduce){.footer-organized .language-links summary::after{transition:none}}

/* BK Chords v1.14 — feedback and author cards, cohesive with other BK Music App tools */
.feedback-card,.about-musician-card{margin-top:20px;padding:29px 30px;border-radius:25px;background:#fff;min-width:0}
.feedback-card h2,.about-musician-card h2{font-size:clamp(22px,3vw,27px);font-weight:760;line-height:1.25;letter-spacing:-.035em;margin:12px 0 14px;color:#181a1f}
.feedback-card .feedback-intro,.about-musician-card p{font-size:14px;line-height:1.75;color:#858993;margin:0 0 24px;max-width:790px}
.feedback-details{max-width:100%}
.feedback-details>summary{list-style:none;display:flex;gap:14px;justify-content:center;align-items:center;min-height:57px;padding:15px 20px;background:#33363e;color:#fff;border:1px solid #33363e;border-radius:16px;cursor:pointer;font-size:15px;line-height:1.35;font-weight:760;text-align:center}
.feedback-details>summary::-webkit-details-marker{display:none}
.feedback-details>summary:hover{background:#24272d}
.feedback-details[open]>summary{border-radius:16px 16px 11px 11px;background:#252830}
.feedback-chevron{font-size:23px;line-height:1;flex:0 0 auto;transition:transform .16s ease}
.feedback-details[open] .feedback-chevron{transform:rotate(180deg)}
.feedback-details .feedback-content{margin-top:11px;border-radius:14px;background:#faf8f6;border:1px solid #ede8e2;padding:17px}
.feedback-content>p{font-size:12px;line-height:1.65;color:#85868b;margin:0 0 13px}
.feedback-platforms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.feedback-platforms a{min-width:0;display:flex;justify-content:space-between;align-items:center;gap:4px;background:#fff;border:1px solid #e6ded8;border-radius:11px;padding:13px 12px;min-height:47px;font-size:12px;font-weight:750;color:#91694d;overflow-wrap:anywhere}
.feedback-platforms a:hover{background:#f9f0e9;border-color:#d8bea8}
.about-musician-card a{color:#956c50;font-size:13px;font-weight:780;display:inline-flex;min-height:40px;align-items:center;text-decoration:none}
.about-musician-card a:hover{text-decoration:underline}
.feedback-card :is(summary,a):focus-visible,.about-musician-card a:focus-visible{outline:3px solid #b88964;outline-offset:3px}
@media(max-width:580px){
 .feedback-card,.about-musician-card{padding:23px 19px;border-radius:22px;margin-top:13px}
 .feedback-card h2,.about-musician-card h2{font-size:23px}
 .feedback-card .feedback-intro,.about-musician-card p{font-size:13px;margin-bottom:20px;line-height:1.7}
 .feedback-details>summary{min-height:56px;padding:13px 14px;font-size:14px}
 .feedback-platforms{grid-template-columns:1fr;gap:7px}
 .feedback-platforms a{font-size:13px;padding:12px 13px}
 .feedback-details .feedback-content{padding:13px}
}
@media(prefers-reduced-motion:reduce){.feedback-chevron{transition:none}}

/* v1.15 — responsive polish & playback controls */
html,body{max-width:100%;overflow-x:clip}
.shell,.workspace,.panel,.chord-body,.harmony-panel,.theory-strip,.intro,.footer-main-grid{min-width:0}
img,svg{max-width:100%}
.eyebrow,.note-legend-item,.harmony-level-control,.theory-strip,.catalog-chord,.progressions{min-width:0}
.loop-practice{display:flex;align-items:flex-start;gap:9px;margin:12px 0 5px;color:#796d63;font-size:12px;font-weight:600;line-height:1.45;cursor:pointer;text-align:left;max-width:100%;}
.loop-practice input{width:18px;height:18px;accent-color:#b88964;flex:0 0 18px;margin:0;cursor:pointer}
.background-help{font-size:11px;color:#97969b;line-height:1.55;margin:10px 2px 0}
.prog-note{max-width:100%;overflow-wrap:anywhere;white-space:normal;text-align:center}
.catalog-chord small,.catalog-chord em,.catalog-chord strong{overflow-wrap:anywhere;word-break:normal;max-width:100%}
.feedback-platforms a{overflow-wrap:anywhere}
@media(max-width:820px){.theory-strip{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:580px){
 .shell{width:calc(100% - 20px)}
 .head-inner{min-width:0;max-width:100%}
 .top-nav{min-width:0;flex-wrap:wrap;justify-content:flex-end}
 .language-wrap{max-width:120px;min-width:0}
 .catalog-chord{min-height:130px}
 .catalog-chord strong{font-size:17px}
 .catalog-chord small{font-size:11px;line-height:1.45}
 .circle-wrap{width:min(100%,340px)}
 .harmony-panel{overflow:visible}
 .prog-notes{max-width:100%}
 .prog-row{min-width:0;max-width:100%;}
 .about-musician-card,.feedback-card,.support-card{min-width:0}
}
@media(max-width:374px){
 .shell{width:calc(100% - 14px)}
 .chord-panel,.harmony-panel,.catalog-panel{padding-left:12px;padding-right:12px}
 .notes-legend-grid{grid-template-columns:repeat(7,minmax(0,1fr))}
 .note-legend-item span{font-size:9px}
 .action-bar{flex-wrap:wrap}
 .action-bar>*{min-width:0}
 .harmony-selection{flex-wrap:wrap}
 .harmony-level-buttons{flex-wrap:wrap}
 .harmony-sets{grid-template-columns:repeat(2,minmax(0,1fr))}
 .prog-note{min-width:0;max-width:calc(50% - 6px)}
 .circle-wrap{max-width:300px}
}
@media (prefers-reduced-motion:reduce){.circle-btn{transition:none!important}}

/* BK Chords 1.17 — simplified navigation: only brand and language selector in header */
.header .head-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;column-gap:12px;row-gap:0;min-width:0}
.header .brand{flex:1 1 auto;min-width:0}
.header .language-wrap{flex:0 1 auto;max-width:min(48vw,224px);min-width:0;margin-inline-start:auto}
.header .language-wrap select{max-width:min(35vw,174px);min-width:0;text-overflow:ellipsis}
@media(max-width:390px){.header .head-inner{column-gap:7px}.header .brand{gap:7px}.header .language-wrap{max-width:47vw;padding-inline:6px}.header .language-wrap select{max-width:32vw}.header .brand-words strong{font-size:10px}.header .brand-words small{font-size:7px;letter-spacing:.04em}}