/* Scoped chord explorer: existing screens retain their layouts and colours. */
.chords-content{max-width:1000px}.chord-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}.chord-key-label{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;font-weight:650}.chord-key-label select{max-width:none;min-width:86px}.chord-mode{display:flex;flex:1;min-width:210px}.chord-mode button{flex:1}.chord-link{border:1px solid var(--stroke);border-radius:12px;background:#fff;color:var(--green);font-size:12px;font-weight:650;min-height:44px;padding:10px 13px}.chord-playing-note,.chord-scale-note,.chord-singer-note{color:var(--muted);font-size:12px;line-height:1.6;margin:10px 0}.chord-singer-tools{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 22px}.chord-singer-note{flex-basis:100%;margin:0}.chord-degrees{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;margin:20px 0 16px}.degree-option{padding:12px 2px;min-height:65px;border:1px solid var(--stroke);border-radius:12px;background:#fff;color:var(--text);transition:background .15s,color .15s}.degree-option strong{display:block;font-size:14px}.degree-option span{display:block;font-size:10px;margin-top:6px;white-space:nowrap}.degree-option[aria-pressed=true]{background:var(--green);color:#fff;border-color:var(--green)}.chord-card{background:#fff;border:1px solid var(--stroke);border-radius:25px;padding:20px 14px;overflow:hidden}.chord-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}.chord-card-head h2{font-size:20px;margin:0 0 5px;letter-spacing:-.035em}.chord-card-head p{font-size:12px;color:var(--muted);margin:0}.chord-play{flex:none;border:0;border-radius:12px;background:var(--green);color:#fff;min-height:44px;padding:11px 14px;font-size:12px;font-weight:700;display:flex;align-items:center;gap:7px}.chord-play svg{width:14px;height:14px;fill:currentColor}.piano-case{padding:9px 6px 6px;background:#202b25;border-radius:13px;box-shadow:inset 0 2px 3px #0004}.piano-keys{position:relative;height:190px;isolation:isolate}.piano-key{position:absolute;top:0;border-radius:3px 3px 6px 6px;border:1px solid #bac3bd;padding:0;display:flex;align-items:center;justify-content:flex-end;flex-direction:column;gap:4px;padding-bottom:13px;touch-action:manipulation;transition:background .14s,box-shadow .14s;color:#283f30;-webkit-tap-highlight-color:transparent}.white-key{height:100%;z-index:1;background:linear-gradient(#fff,#fff 88%,#e4e8e5);box-shadow:inset 0 -4px 0 #d1d8d3}.black-key{height:62%;z-index:2;background:linear-gradient(95deg,#19221c,#303c34 60%,#131d16);border-color:#121b14;color:#fff;box-shadow:inset 0 -5px 0 #0c140f,0 3px 3px #0004;padding-bottom:10px}.piano-key span{font-size:12px;font-weight:750;line-height:1}.piano-key small{font-size:9px;opacity:1}.white-key.chord-tone{background:linear-gradient(#0d8049,#087a43);box-shadow:inset 0 -4px 0 #056036;color:#fff;border-color:#086537}.black-key.chord-tone{background:linear-gradient(95deg,#08643b,#0c7d4c);box-shadow:inset 0 -5px 0 #05472a,0 3px 3px #0003;color:#fff;border-color:#075632}.piano-key.is-playing{filter:none;box-shadow:inset 0 -1px 0 #0002;transform:translateY(2px)}.piano-key:focus-visible{outline:3px solid #e7a72b;outline-offset:-4px;z-index:3}.chord-reading{text-align:center;padding:25px 0 17px;min-height:137px}.chord-notes{font-size:32px;font-weight:800;letter-spacing:-.04em;color:var(--green)}.chord-solfa{font-size:18px;color:var(--text);font-weight:650;margin-top:8px}.chord-octaves{font-size:11px;color:var(--muted);margin-top:9px}.chord-inversions{display:flex;gap:4px;background:var(--panel2);padding:5px;border-radius:15px}.chord-inversions button{flex:1;min-width:0;min-height:44px;border:0;border-radius:11px;background:transparent;color:var(--muted);font-weight:650;font-size:11px;padding:8px 4px}.chord-inversions button[aria-pressed=true]{background:var(--green);color:#fff}.chord-audio-note{min-height:38px;text-align:center;font-size:11px;line-height:1.6;color:var(--muted);margin:15px 0 0}.chord-result-link{margin-top:14px}
@media(max-width:959px){.desktop-dock{max-width:440px}.desktop-dock a{gap:4px;padding:12px 5px;font-size:11px;min-height:48px}.desktop-dock svg{width:18px;height:18px}}
@media(max-width:359px){.desktop-dock a{font-size:10px;gap:3px;padding:12px 3px}.chord-card{padding:17px 10px}.degree-option strong{font-size:12px}.degree-option span{font-size:9px}.piano-key span{font-size:10px}.black-key span{font-size:9px}.chord-notes{font-size:29px}.chord-inversions button{font-size:10px}}
@media(min-width:960px){.chords-content{display:grid;grid-template-columns:280px minmax(0,1fr);column-gap:28px;align-items:start}.chord-explore-controls{position:sticky;top:28px}.chord-tools{display:block}.chord-key-label{justify-content:space-between;margin-bottom:15px}.chord-mode{min-width:0}.chord-degrees{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:0}.chord-card{padding:25px}.piano-keys{height:245px}.chord-notes{font-size:42px}.chord-solfa{font-size:21px}.chord-inversions button{font-size:12px}.chord-card-head h2{font-size:24px}}
@media(prefers-reduced-motion:reduce){.degree-option,.piano-key{transition:none}}

/* Desktop workspace fills the available canvas; phone rules above stay unchanged. */
@media(min-width:960px){
 .shell:has(#view-chords:not([hidden])){max-width:1600px;padding-inline:clamp(28px,4vw,72px)}
 #view-chords .intro{grid-template-columns:1fr 1fr;gap:10px 40px;align-items:center;margin-bottom:34px}
 #view-chords .intro h1{font-size:clamp(40px,3.6vw,58px)}
 #view-chords .intro p{max-width:530px;font-size:16px;line-height:1.7}
 .chords-content{max-width:none;grid-template-columns:clamp(260px,22vw,320px) minmax(0,1fr);gap:clamp(24px,3vw,44px)}
 .chord-card{width:100%;min-width:0;padding:clamp(24px,2.5vw,36px)}
 .piano-keys{height:clamp(245px,20vw,310px)}
}