:root{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;font-size:16px}
*{box-sizing:border-box}html,body{margin:0;min-width:280px}body.chord-dictionary{--site-bottom:0px!important;padding-bottom:0!important;height:100dvh;overflow:hidden;background:var(--site-canvas);color:var(--site-ink)}
button,input,select{font:inherit}button{cursor:pointer}button,a{touch-action:manipulation}button:disabled{cursor:default;opacity:.45}a{color:inherit}svg{flex:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--site-accent);outline-offset:2px}
#app{display:flex;flex-direction:column;width:min(100%,1440px);height:100%;margin:auto;background:var(--site-canvas);color:var(--site-ink)}
.dictionary-header{position:relative;display:flex;align-items:center;height:62px;min-height:62px;padding:6px 12px;border-bottom:1px solid var(--site-line);background:var(--site-raised)}
.brand{display:flex;align-items:center;gap:6px;max-width:calc(50% - 38px);text-decoration:none;white-space:nowrap}.brand-mark{width:32px;height:32px;color:var(--site-accent)}.brand span{display:flex;flex-direction:column;min-width:0}.brand strong{font-size:14px;line-height:1.2}.brand small{font-size:9px;line-height:1.2;color:var(--site-muted)}
.header-title{position:absolute;left:50%;transform:translateX(-50%);max-width:calc(100% - 188px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.menu-trigger{display:grid;place-items:center;width:44px;height:44px;min-width:44px;margin-left:auto;padding:0;border:1px solid var(--site-line);border-radius:4px;background:var(--site-raised);color:var(--site-ink)}.menu-trigger[aria-expanded=true]{background:var(--site-soft);color:var(--site-accent)}.menu-trigger svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.module-menu{position:fixed;z-index:90;top:70px;right:max(10px,calc((100vw - 720px)/2 + 10px));display:grid;width:min(224px,calc(100vw - 20px));max-height:calc(100dvh - 82px);overflow:auto;padding:7px;border:1px solid var(--site-line);border-radius:12px;background:var(--site-raised);box-shadow:0 12px 32px #0003}.module-menu[hidden]{display:none}.module-menu a{min-height:44px;display:flex;align-items:center;padding:8px 12px;text-decoration:none;border-radius:4px;font-size:14px}.module-menu a[aria-current]{background:var(--site-soft);color:var(--site-accent);font-weight:700}.module-menu #menu-account{border-top:1px solid var(--site-line);margin-top:4px}
.workspace{min-height:0;flex:1;width:100%;max-width:1280px;margin-inline:auto;overflow:auto;overscroll-behavior:contain;padding:10px 16px 16px}.dictionary-footer{display:grid;grid-template-columns:46px minmax(0,1.5fr) minmax(0,1.1fr) 46px;gap:8px;align-items:center;min-height:68px;padding:8px 16px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--site-line);background:var(--site-raised)}.dictionary-footer button{min-width:0;min-height:44px;padding:6px;border:1px solid var(--site-line);border-radius:4px;background:var(--site-raised);color:var(--site-accent);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dictionary-footer button.primary,.primary{background:var(--site-accent)!important;color:var(--site-on)!important;border-color:var(--site-accent)!important}.dictionary-footer svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6}
.page-eyebrow{margin:0 0 8px;color:var(--site-muted);font-size:12px}.hero{padding:14px 2px 18px}.hero h1{margin:0 0 5px;font-size:32px;line-height:1.14;letter-spacing:-.03em}.hero p{margin:0;color:var(--site-muted);font-size:14px;line-height:1.5}.search{width:100%;height:48px;margin:14px 0;padding:0 14px;border:1px solid var(--site-line);border-radius:4px;background:var(--site-raised);color:var(--site-ink);font-size:16px}.search::placeholder{color:var(--site-muted)}.section-label{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:12px 0 8px;font-size:14px;font-weight:700}.section-label small{font-weight:400;color:var(--site-muted)}.root-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}.root-grid button,.chip-row button,.tabs button,.voicing-tabs button{min-height:44px;padding:5px;border:1px solid var(--site-line);border-radius:4px;background:var(--site-raised);color:var(--site-ink)}.root-grid button[aria-pressed=true],.chip-row button[aria-pressed=true],.tabs button[aria-selected=true],.voicing-tabs button[aria-pressed=true]{background:var(--site-accent);border-color:var(--site-accent);color:var(--site-on)}.chip-row{display:flex;flex-wrap:wrap;gap:6px}.chip-row button{min-height:38px;padding:7px 11px;font-size:13px}.quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}.quick-grid button{min-height:88px;text-align:left;padding:12px;border:1px solid var(--site-line);border-radius:4px;background:var(--site-raised);color:var(--site-ink)}.quick-grid strong{display:block;font-size:16px}.quick-grid small{display:block;margin-top:7px;color:var(--site-muted);line-height:1.4}.result-list{display:grid;gap:7px;margin-top:10px}.result{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 8px;width:100%;min-height:66px;padding:10px 12px;text-align:left;border:1px solid var(--site-line);border-radius:4px;background:var(--site-raised);color:var(--site-ink)}.result strong{font-size:17px}.result span{font-size:12px;color:var(--site-muted)}.result small{grid-column:1/-1;color:var(--site-muted);font-size:12px}.empty{padding:24px 14px;border:1px solid var(--site-line);border-radius:4px;background:var(--site-raised);color:var(--site-muted);line-height:1.6}
.detail-title{display:flex;align-items:baseline;gap:12px;margin-bottom:8px}.detail-title h1{margin:0;font-size:34px;line-height:1.05;letter-spacing:-.03em}.detail-title span{font-size:14px;color:var(--site-muted)}.detail-title small{margin-left:auto;white-space:nowrap;font-size:11px;color:var(--site-accent)}.card{padding:10px 14px;margin-bottom:8px;border:1px solid var(--site-line);border-radius:16px;background:var(--site-raised)}.card h2{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:0 0 8px;font-size:15px;color:var(--site-accent)}.card h2 small{font-size:11px;font-weight:400;color:var(--site-muted)}.theory-grid{display:grid;grid-template-columns:minmax(135px,1fr) minmax(0,1fr);gap:10px;align-items:stretch}.staff-box{display:flex;align-items:center;justify-content:center;height:110px;min-height:110px;overflow:hidden;border-radius:4px;background:var(--site-raised)}.staff-box img{display:block;width:100%;height:100%;object-fit:contain}.staff-fallback{font-size:12px;color:var(--site-muted)}.degree-side{height:110px;display:flex;flex-direction:column;min-width:0}.degree-grid{display:grid;grid-template-columns:repeat(var(--degree-cols,4),minmax(0,1fr));gap:3px;height:42px;flex:none;min-height:0}.degree{display:flex;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:0;padding:2px 1px;border-radius:4px;background:var(--site-soft);color:var(--site-ink);font-size:10px;white-space:nowrap}.degree b{color:var(--site-accent)}.theory-label{margin:auto 0 2px;font-size:10px;color:var(--site-muted)}.theory-keyboard{height:31px;overflow:hidden}.theory-keyboard svg{display:block;width:100%;height:31px}.listen-row{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px}.listen-row button{min-height:44px;border:1px solid var(--site-line);border-radius:4px;background:var(--site-raised);color:var(--site-accent);font-size:13px}.listen-row button:first-child{background:var(--site-accent);color:var(--site-on);border-color:var(--site-accent)}
.voicing-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:6px;margin-bottom:7px}.voicing-tabs button{font-size:12px;overflow-wrap:anywhere}.piano-keyboard{width:100%;height:59px;overflow:hidden}.piano-keyboard svg{width:100%;height:59px;display:block}.legend{display:flex;align-items:center;gap:16px;margin:6px 0 0;color:var(--site-muted);font-size:11px}.legend b{font-weight:500}.swatch{display:inline-block;width:8px;height:8px;margin-right:5px;border-radius:2px;background:var(--bass-color)}.swatch.rh{background:var(--rh-color)}.legend .range{margin-left:auto}.voicing-note{margin:6px 0 0;color:var(--site-muted);font-size:11px;line-height:1.4}
.guitar-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.guitar-card{min-width:0;min-height:111px;padding:5px 4px 6px;border:1px solid var(--site-line);border-radius:4px;background:var(--site-raised);color:var(--site-ink);text-align:center}body.chord-dictionary .guitar-card[aria-pressed=true]{border:2px solid var(--site-accent);background:var(--site-soft);color:var(--site-ink)}.guitar-card svg,.guitar-card img{display:block;width:100%;height:75px;margin:auto;object-fit:contain}.guitar-card span{display:block;font-size:11px;white-space:nowrap}.guitar-card small{display:block;color:var(--site-muted);font-size:10px}.note-inline{margin:5px 0 0;font-size:11px;color:var(--site-muted);line-height:1.35}
.drawer{width:min(100%,720px);height:min(88dvh,800px);max-height:calc(100dvh - 12px);margin:auto auto 0;overflow:hidden;border:1px solid var(--site-line);border-radius:16px 16px 0 0;padding:0;background:var(--site-raised);color:var(--site-ink)}.drawer[open]{display:flex;flex-direction:column}.drawer::backdrop{background:#101622a8}.drawer-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--site-line);background:var(--site-raised)}.drawer-head strong{font-size:18px}.drawer-head button{width:44px;height:44px;border:1px solid var(--site-line);border-radius:4px;background:var(--site-raised);color:var(--site-ink)}.drawer-content{flex:1;min-height:0;overflow:auto;padding:12px 16px calc(28px + env(safe-area-inset-bottom))}.tabs{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:10px}.drawer .root-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.builder-piano{position:relative;width:100%;max-width:none;height:120px;overflow:visible;border:1px solid #aeb5c0;border-radius:4px;background:#fff;box-shadow:0 3px 0 #bcc2ca;user-select:none}.builder-white-keys{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));width:100%;height:100%}.builder-white-key{display:flex;align-items:flex-end;justify-content:center;min-width:0;height:100%;padding:0 0 9px;border:0;border-right:1px solid #aeb5c0;border-radius:0;background:#fff;color:#20242b;font-size:14px;font-weight:700}.builder-white-key:last-child{border-right:0}.builder-white-key[aria-pressed=true]{background:#ded8ff;color:#302777;box-shadow:inset 0 -5px 0 #6251d7}.builder-black-key{position:absolute;z-index:1;top:-1px;display:flex;flex-direction:column;transform:translateX(-50%);width:9.5%;height:96px;overflow:hidden;border:1px solid #080b12;border-radius:0 0 4px 4px;background:#161b27;box-shadow:1px 3px 3px #0005}.builder-black-key button{display:flex;align-items:center;justify-content:center;width:100%;height:50%;min-height:0;padding:0;border:0;border-radius:0;background:#161b27;color:#fff;font-size:11px;font-weight:700;white-space:nowrap}.builder-black-key .pitch-sharp{border-bottom:1px solid #6b7180}.builder-black-key button[aria-pressed=true]{background:#6251d7;color:#fff}.builder-piano button:focus-visible{position:relative;z-index:3;outline:2px solid #e0ad39;outline-offset:-3px}.builder-block{padding:10px 0;border-bottom:1px solid var(--site-line)}.builder-block h3{margin:0 0 6px;font-size:13px}.builder-block .chip-row button{min-height:36px}.builder-result{padding:12px;margin:12px 0;border:1px solid var(--site-line);border-radius:4px;background:var(--site-soft);font-size:13px;line-height:1.6}.builder-result strong{display:block;font-size:19px}.index-layout{min-height:0}.drawer-results{min-height:0}.play-status{position:fixed;z-index:100;left:50%;bottom:88px;transform:translateX(-50%);width:max-content;max-width:min(90vw,420px);margin:0;padding:8px 12px;border-radius:4px;background:var(--site-ink);color:var(--site-canvas);font-size:12px;pointer-events:none;opacity:0}.play-status:not(:empty){opacity:1}
.builder-hint{margin:5px 0 9px;color:var(--site-muted);font-size:12px;line-height:1.45}.builder-result .builder-hint{margin-bottom:0}.builder-keyboard{height:36px;margin-top:8px;overflow:hidden}.builder-keyboard svg{display:block;width:100%;height:36px}.builder-play{width:100%;min-height:44px;border:1px solid var(--site-accent);border-radius:4px}
.chord-dictionary .global-site-header,.chord-dictionary .global-account{display:none!important}.chord-dictionary .global-site-nav{display:none!important}.chord-dictionary .global-site-nav.dictionary-nav-open{display:grid!important;position:fixed;z-index:80;inset:auto 8px 76px;height:auto;min-height:64px;padding:6px;border:1px solid var(--site-line);border-radius:12px;background:var(--site-raised);box-shadow:0 8px 28px #0004}
.chord-dictionary{--bass-color:#b57b24;--rh-color:#187e69;--key-theory-fill:#dcefe8}:root[data-creator-color-scheme=dark] .staff-box img,:root[data-creator-color-scheme=dark] .guitar-card img{filter:invert(1)}
.workspace.dense-detail{padding-top:8px;padding-bottom:8px}.dense-detail .page-eyebrow{margin-bottom:5px}.dense-detail .detail-title{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:9px;row-gap:2px;margin-bottom:5px}.dense-detail .detail-title h1{grid-column:1;grid-row:1;font-size:28px;white-space:nowrap}.dense-detail .detail-title span{grid-column:2;grid-row:1;font-size:11px;line-height:1.25}.dense-detail .detail-title small{grid-column:1/-1;grid-row:2;margin:0;font-size:10px;white-space:normal}.dense-detail .card{padding:8px 12px;margin-bottom:6px}.dense-detail .card h2{margin-bottom:6px}.dense-detail .listen-row{margin-top:6px}.dense-detail .listen-row button{min-height:40px;font-size:11px}.dense-detail .voicing-tabs{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin-bottom:5px}.dense-detail .voicing-tabs button{min-height:40px;padding:3px 1px;font-size:10px;line-height:1.1}.dense-detail .piano-keyboard,.dense-detail .piano-keyboard svg{height:52px}.dense-detail .guitar-card{min-height:102px}.dense-detail .guitar-card img,.dense-detail .guitar-card svg{height:66px}.dense-detail .note-inline{font-size:10px;line-height:1.2}
.voicing-tabs.ab-tabs,.dense-detail .voicing-tabs.ab-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:359px){.brand-mark{width:28px;height:28px}.brand strong{font-size:12px}.brand small{display:none}.header-title{font-size:13px}.workspace{padding:10px 10px 16px}.card{padding:10px}.dictionary-footer{gap:5px;padding-inline:9px}.theory-grid{grid-template-columns:minmax(116px,1fr) minmax(0,1fr)}.degree{font-size:10px}.root-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:721px){.workspace{padding-inline:24px}.card{padding:18px}.staff-box,.degree-side{height:150px}.staff-box{min-height:150px}.theory-grid{gap:18px}.dictionary-footer{padding-inline:24px}}
@media(min-width:800px){
  .dictionary-header{height:72px;min-height:72px;padding-inline:32px}.brand-mark{width:36px;height:36px}.brand strong{font-size:15px}.brand small{font-size:10px}.header-title{font-size:16px}.module-menu{top:80px;right:max(24px,calc((100vw - 1440px)/2 + 32px))}
  .workspace{padding:24px 32px 32px}.workspace.detail-view{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-content:start}.workspace.detail-view>.page-eyebrow,.workspace.detail-view>.detail-title{grid-column:1/-1}.workspace.detail-view>.page-eyebrow{margin-bottom:-8px}.workspace.detail-view>.detail-title{margin-bottom:2px}.workspace.detail-view>.card{min-width:0;margin:0;padding:18px;border-radius:16px}.workspace.detail-view>.card:first-of-type{grid-column:1/-1}.workspace.detail-view .detail-title h1{font-size:40px}.workspace.detail-view .card h2{font-size:16px;margin-bottom:14px}.workspace.detail-view .staff-box,.workspace.detail-view .degree-side{height:160px;min-height:0}.workspace.detail-view .theory-grid{gap:22px}.workspace.detail-view .degree-grid{height:54px}.workspace.detail-view .degree{font-size:12px}.workspace.detail-view .theory-keyboard,.workspace.detail-view .theory-keyboard svg{height:44px}.workspace.detail-view .piano-keyboard,.workspace.detail-view .piano-keyboard svg{height:76px}.workspace.detail-view .guitar-card{min-height:155px}.workspace.detail-view .guitar-card img,.workspace.detail-view .guitar-card svg{height:112px}.workspace.detail-view .voicing-tabs button{min-height:44px;padding:5px;font-size:12px}.workspace.detail-view .listen-row button{min-height:44px;font-size:13px}.workspace.detail-view .note-inline,.workspace.detail-view .voicing-note{font-size:12px;line-height:1.5}
  .workspace .quick-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.workspace .result-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dictionary-footer{grid-template-columns:46px 176px 176px 46px;justify-content:center;gap:10px;min-height:72px}.play-status{bottom:88px}
  .drawer{width:min(980px,calc(100vw - 48px));height:min(720px,calc(100dvh - 48px));max-height:calc(100dvh - 48px);margin:auto;border-radius:16px;box-shadow:0 24px 80px #0004}.drawer-head{position:static;flex:none;padding:14px 20px}.drawer-content{padding:16px 20px 20px}.drawer-content.index-content{display:flex;flex-direction:column;overflow:hidden}.drawer-content.index-content>.tabs{flex:none}.index-layout{display:grid;grid-template-columns:minmax(280px,310px) minmax(0,1fr);gap:24px;flex:1;overflow:hidden}.index-filters,.index-results{min-height:0;overflow:auto}.index-filters{padding:0 4px 10px 0;border-right:1px solid var(--site-line)}.index-results{display:flex;flex-direction:column;overflow:hidden}.index-results>.section-label{margin-top:2px;flex:none}.index-results .drawer-results{flex:1;overflow:auto;padding-right:4px}.drawer .root-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.drawer .search{margin-top:2px}.drawer .result-list{display:grid;grid-template-columns:1fr}
}
@media(min-width:1200px){
  .workspace.detail-view{grid-template-columns:minmax(0,1.06fr) minmax(0,1fr)}
  .workspace.detail-view>.card:first-of-type{grid-column:1;grid-row:3/span 2;min-height:500px}
  .workspace.detail-view>.card:nth-of-type(2){grid-column:2;grid-row:3}
  .workspace.detail-view>.card:nth-of-type(3){grid-column:2;grid-row:4}
  .workspace.detail-view .theory-grid{grid-template-columns:1fr;gap:12px}
  .workspace.detail-view .staff-box{height:230px;min-height:230px}
  .workspace.detail-view .degree-side{height:118px}
  .workspace.detail-view .theory-keyboard,.workspace.detail-view .theory-keyboard svg{height:43px}
  .workspace.detail-view .guitar-card{min-height:132px}
  .workspace.detail-view .guitar-card img,.workspace.detail-view .guitar-card svg{height:88px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* Compact builder: keep the complete selection flow in one viewport. */
.builder-drawer{height:min(650px,calc(100dvh - 16px));max-height:calc(100dvh - 16px)}
.builder-drawer .drawer-head{padding:6px 12px}.builder-drawer .drawer-head strong{font-size:16px}.builder-drawer .drawer-head button{width:36px;height:36px}
.builder-content{padding:8px 12px calc(12px + env(safe-area-inset-bottom))}.builder-content>.tabs{margin-bottom:8px}.builder-content>.tabs button{min-height:32px;font-size:13px;padding:4px}
.builder-layout .builder-block{padding:0 0 3px}.builder-layout .builder-block h3{margin:0 0 2px;font-size:12px;line-height:14px}.builder-layout h3 small{font-size:10px;font-weight:400;color:var(--site-muted)}
.builder-layout .builder-piano{height:80px}.builder-layout .builder-black-key{height:50px;width:max(26px,9.5%)}.builder-layout .builder-white-key{padding-bottom:6px;font-size:13px}.builder-layout .builder-black-key button{font-size:11px}
.builder-layout .chip-row{gap:4px}.builder-layout .chip-row button{min-width:0;min-height:32px;padding:3px 2px;font-size:12px;line-height:1.2;white-space:nowrap}
.builder-mode{margin:6px 0 8px}.builder-mode button{flex:1}.builder-selectors{display:grid;gap:4px}.builder-layout .triad-picks,.builder-layout .tension-picks,.builder-layout .degree-picks{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.builder-layout .fifth-picks,.builder-layout .seventh-picks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.builder-layout .builder-result{padding:6px 8px;margin:6px 0;font-size:12px;line-height:1.3}.builder-summary{display:flex;align-items:baseline;justify-content:space-between;gap:6px;margin-bottom:2px}.builder-summary strong{font-size:17px;line-height:1.2;overflow-wrap:anywhere}.builder-summary>span{flex:none;font-size:10px;color:var(--site-muted)}.builder-layout .builder-keyboard{height:22px;margin-top:3px}.builder-layout .builder-keyboard svg{height:22px}
.builder-actions{display:flex;flex-wrap:wrap;gap:4px}.builder-open{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:1;min-width:0;min-height:34px;padding:5px 9px;border:1px solid var(--site-line);border-radius:4px;background:var(--site-raised);color:var(--site-accent);font-size:13px;font-weight:600}.builder-open span{font-size:11px;font-weight:400;white-space:nowrap}.builder-actions .builder-play{min-height:34px;font-size:12px}.builder-actions .builder-hint{width:100%;margin:0;font-size:10px;line-height:1.3}
@media(min-width:800px){.builder-drawer{height:min(640px,calc(100dvh - 48px))}.builder-content{padding:10px 20px 14px}.builder-selectors{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px}.builder-layout .builder-piano{max-width:none}.builder-layout .builder-result{margin-top:10px}.builder-actions .builder-open{max-width:310px}}

.builder-piano .builder-white-key[aria-pressed=true]{background:#ded8ff;color:#302777;border-color:#aeb5c0}.builder-piano .builder-black-key button[aria-pressed=true]{background:#6251d7;color:#fff;border-color:#6b7180}

/* Shared root keyboard: spelling choices remain fixed in every site theme. */
.workspace>.builder-piano,.index-filters>.builder-piano{height:80px;margin:10px 0 14px}
.workspace>.builder-piano .builder-black-key,.index-filters>.builder-piano .builder-black-key{height:50px;width:max(26px,9.5%)}
.workspace>.builder-piano .builder-white-key,.index-filters>.builder-piano .builder-white-key{padding-bottom:6px;font-size:13px}
@media(min-width:800px){.workspace>.builder-piano{height:96px}.workspace>.builder-piano .builder-black-key{height:60px}.workspace>.builder-piano .builder-white-key{font-size:15px}.workspace>.builder-piano .builder-black-key button{font-size:13px}.index-filters>.builder-piano{margin-top:12px}}

@media(max-width:799px){.drawer{width:calc(100vw - 16px);max-width:calc(100vw - 16px)}}

/* White/black instrument keys keep their identity in every theme and state. */
html body.chord-dictionary.has-site-shell .builder-piano .builder-white-key{background:#fff!important;color:#20242b!important;border-color:#aeb5c0!important;filter:none!important;opacity:1!important}
html body.chord-dictionary.has-site-shell .builder-piano .builder-black-key button{background:#20242b!important;color:#fff!important;border-color:#646b78!important;filter:none!important;opacity:1!important}
html body.chord-dictionary.has-site-shell .builder-piano .builder-white-key[aria-pressed=true]{background:#fff!important;color:#302777!important;box-shadow:inset 0 -6px 0 #6251d7!important}
html body.chord-dictionary.has-site-shell .builder-piano .builder-black-key button[aria-pressed=true]{background:#20242b!important;box-shadow:inset 0 -4px 0 #b7abff!important}
html body.chord-dictionary.has-site-shell .builder-piano button:focus-visible{outline:3px solid #a17c00!important;outline-offset:-4px!important}
html body.chord-dictionary.has-site-shell .builder-piano button:hover{box-shadow:inset 0 -4px 0 #aeb5c0}
html body.chord-dictionary.has-site-shell .builder-piano button:active{box-shadow:inset 0 -6px 0 #6251d7}
html body.chord-dictionary.has-site-shell .builder-piano button:disabled{cursor:not-allowed;text-decoration:line-through}

/* Home wrappers retain the compact root keyboard on phones. */
.home-filters>.builder-piano{height:80px;margin:10px 0 14px}
.home-filters>.builder-piano .builder-black-key{height:50px;width:max(26px,9.5%)}
.home-filters>.builder-piano .builder-white-key{padding-bottom:6px;font-size:13px}
@media(max-width:799px){.builder-output>.section-label{display:none}}
/* Desktop: a shared tools/results split for the homepage and both index tabs. */
@media(min-width:800px){
 .workspace.home-view{overflow:hidden;padding:20px 32px}
 .home-layout{display:grid;grid-template-columns:minmax(300px,.85fr) minmax(0,1.4fr);gap:28px;height:100%;min-height:0}
 .home-filters{min-width:0;min-height:0;overflow:auto;padding-right:20px;border-right:1px solid var(--site-line);scrollbar-gutter:stable}
 .home-filters .hero{padding:4px 0 8px}.home-filters .hero h1{font-size:30px}.home-filters .hero p{font-size:13px}
 .home-filters .search{margin:8px 0;height:44px}.home-filters .section-label{margin:10px 0 7px}
 .home-filters>.builder-piano{margin:8px 0 12px}
 .home-filters .quick-grid{grid-template-columns:1fr 1fr;margin-top:12px}.home-filters .quick-grid button{min-height:76px;padding:10px}.home-filters .quick-grid strong{font-size:14px}.home-filters .quick-grid small{font-size:11px;margin-top:5px}
 .home-results{display:flex;flex-direction:column;min-width:0;min-height:0}.home-results>.section-label{flex:none;margin:0 0 12px;font-size:18px}
 .home-result-scroll{min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding-right:4px}.home-result-scroll .result-list{grid-template-columns:1fr;margin-top:0}
 .builder-drawer{height:min(720px,calc(100dvh - 48px))}.builder-drawer .drawer-head{padding:14px 20px}.builder-drawer .drawer-head strong{font-size:18px}.builder-drawer .drawer-head button{width:44px;height:44px}
 .drawer-content.builder-content{display:flex;flex-direction:column;overflow:hidden;padding:16px 20px 20px}.builder-content>.tabs{flex:none;margin-bottom:10px}.builder-content>.tabs button{min-height:44px;padding:5px;font-size:14px}
 .builder-layout{display:grid;grid-template-columns:minmax(280px,310px) minmax(0,1fr);gap:24px;flex:1;min-height:0;overflow:hidden}
 .builder-controls{min-width:0;min-height:0;overflow:auto;padding:0 4px 10px 0;border-right:1px solid var(--site-line)}
 .builder-output{min-width:0;min-height:0;overflow:auto;padding-right:4px}.builder-output>.section-label{margin-top:2px}
 .builder-layout .builder-block{padding:0 0 4px;margin-bottom:4px}.builder-layout .builder-block h3{margin-bottom:4px;font-size:13px;line-height:1.4}
 .builder-mode{margin:6px 0}.builder-selectors{grid-template-columns:1fr;gap:0}
 .builder-layout .chip-row{gap:4px}.builder-layout .chip-row button{min-height:34px;padding:4px;font-size:13px}
 .builder-layout .triad-picks{grid-template-columns:repeat(4,minmax(0,1fr))}.builder-layout .tension-picks{grid-template-columns:repeat(4,minmax(0,1fr))}.builder-layout .degree-picks{grid-template-columns:repeat(5,minmax(0,1fr))}
 .builder-layout .builder-result{padding:16px;margin:12px 0;font-size:14px;line-height:1.7}.builder-summary strong{font-size:24px}.builder-summary>span{font-size:12px}
 .builder-layout .builder-keyboard,.builder-layout .builder-keyboard svg{height:64px}.builder-layout .builder-keyboard{margin-top:16px}
 .builder-actions{flex-direction:column;gap:8px}.builder-actions .builder-open{max-width:none;flex:none;min-height:48px;padding:10px 12px;font-size:16px}.builder-open span{font-size:12px}.builder-actions .builder-play{min-height:44px}
}
@media(min-width:1200px){.home-result-scroll .result-list{grid-template-columns:repeat(2,minmax(0,1fr))}}