.chord-page .page-head{max-width:none}.chord-page .page-head>*{max-width:46em}.chord-facts{border:1px solid var(--line);border-radius:var(--r-card);background:var(--line);grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:1px;margin:clamp(24px,4vw,40px) 0 0;display:grid;overflow:hidden}.chord-facts div{background:var(--card);padding:14px 18px}.chord-facts dt{color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-size:.8125rem;font-weight:600}.chord-facts dd{font-family:var(--font-display);margin:4px 0 0;font-size:1.375rem;line-height:1.3}.chord-tool{grid-template-columns:minmax(0,1fr);gap:14px;display:grid}.ct-bar{flex-wrap:wrap;justify-content:space-between;gap:10px;display:flex}.ct-seg{border:1px solid var(--line-strong);border-radius:var(--r-btn);background:var(--paper);flex-wrap:wrap;padding:3px;display:inline-flex}.ct-seg button{min-height:36px;color:var(--text-2);font:inherit;cursor:pointer;background:0 0;border:0;border-radius:8px;padding:0 12px;font-size:.9375rem;font-weight:500}.ct-seg button:hover{color:var(--ink)}.ct-seg button[aria-pressed=true]{background:var(--card);color:var(--ink);box-shadow:0 1px 2px #1c1c1e1f}.ct-now{font-family:var(--font-display);margin:0;font-size:1.125rem}.piano.chord-piano{--white-h:clamp(110px, 13vw, 150px);border-radius:var(--r-card);padding:14px 10px 0}.piano.chord-piano .piano-felt{top:10px;left:10px;right:10px}.chord-piano .k.w.is-lit:not(.is-play,.is-user,.is-wrong){background:linear-gradient(#e2c6d0 0,#f1dfe5 14%,#f4e6eb 100%)}.chord-piano .k.b.is-lit:not(.is-play,.is-user,.is-wrong){background:linear-gradient(#2a1219 0,#57263a 14%,#4c2133 100%)}.chord-piano .k[data-finger] .k-name{visibility:hidden}.chord-piano .k.b[data-finger]:before{color:var(--wine);background:#fff;bottom:10px}.ct-actions{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.ct-chips{flex-wrap:wrap;gap:8px;margin-left:auto;display:inline-flex}.btn.btn-quiet{border:1px solid var(--line-strong);background:var(--card);color:var(--ink);box-shadow:none}.btn.btn-quiet:hover{border-color:var(--faint);background:var(--card)}.ct-check{border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper);color:var(--ink-2);padding:12px 16px;transition:background-color .2s,border-color .2s}.ct-check.is-right{background:var(--wine-wash);border-color:#8e2c484d}.ct-check.is-right strong{color:var(--wine)}.ct-check.is-wrong strong{color:var(--wrong)}.ct-help{color:var(--muted);margin:0;font-size:.875rem}.chord-staff{margin-top:clamp(40px,6vw,72px)}.chord-staff h2,.chord-more h2{font-size:clamp(1.5rem,1.2rem + 1vw,2rem)}.chord-staff>p{color:var(--text-2);margin-top:8px}.chord-cards{grid-template-columns:repeat(auto-fill,minmax(min(100%,170px),1fr));gap:14px;margin-top:20px;display:grid}.chord-card{border:1px solid var(--line);border-radius:var(--r-card);background:var(--card);margin:0;padding:10px 14px 12px}.chord-card svg{width:100%;max-width:220px;height:auto;fill:var(--ink);stroke:var(--ink);margin:0 auto;display:block;overflow:visible}#chord-staff .vf-stave{stroke:var(--staff)}#chord-staff .vf-stavebarline rect{fill:var(--staff)}.chord-card figcaption{color:var(--muted);text-align:center;margin-top:4px;font-size:.875rem}.chord-card figcaption strong{color:var(--ink);font-weight:600;display:block}.chord-defs{width:0;height:0;position:absolute;overflow:hidden}.table-scroll{margin:0 0 1.1em;overflow-x:auto}.prose table{border-collapse:collapse;width:100%;font-size:.9375rem;line-height:1.5}.prose th,.prose td{border-bottom:1px solid var(--line);text-align:left;vertical-align:top;padding:8px 12px 8px 0}.prose th{color:var(--muted);font-weight:600}.chord-fingers td:nth-child(n+3){font-variant-numeric:tabular-nums;white-space:nowrap}.prose .chord-keys{columns:2 14em;column-gap:2em}.prose .chord-keys li{break-inside:avoid}.prose .chord-keys li+li{margin-top:.25em}.chord-more{margin-top:clamp(40px,6vw,72px)}.chord-more h2+.chord-chips{margin-top:14px}.chord-chips+h2{margin-top:32px}.chord-chips{flex-wrap:wrap;gap:8px;display:flex}.chord-chip{border:1px solid var(--line);border-radius:var(--r-card);background:var(--card);flex-direction:column;min-width:92px;padding:10px 14px;text-decoration:none;transition:border-color .18s;display:inline-flex}.chord-chip:hover{border-color:var(--line-strong)}.chord-chip{font-family:var(--font-display);font-size:1.25rem;font-weight:550;line-height:1.2}.chord-chip span{color:var(--muted);font-family:var(--font-ui);font-size:.8125rem;font-weight:400}.chord-page .page-cta .btn{color:var(--ink);background:#f4f4f1;margin-top:22px}.chord-page .page-cta .btn:hover{background:#fff}.chord-grid-panel h2{font-size:clamp(1.375rem,1.1rem + .8vw,1.75rem)}.chord-grid-panel .table-scroll{margin:16px -4px 0}.chord-grid{border-collapse:collapse;width:100%;min-width:720px}.chord-grid th,.chord-grid td{text-align:center;padding:3px}.chord-grid thead th{color:var(--muted);letter-spacing:.04em;text-transform:uppercase;padding-bottom:8px;font-size:.8125rem;font-weight:600}.chord-grid tbody th{z-index:1;background:var(--card);color:var(--text-2);font-family:var(--font-display);text-align:left;white-space:nowrap;padding-right:10px;font-size:1rem;font-weight:500;position:sticky;left:0}.chord-grid a{border:1px solid var(--line);background:var(--card);font-family:var(--font-display);white-space:nowrap;border-radius:8px;padding:7px 4px;font-size:1rem;text-decoration:none;transition:border-color .18s,background-color .18s;display:block}.chord-grid a:hover{border-color:var(--wine);background:var(--wine-wash)}