#chords-area, #chord-practice { padding: 24px 0; }
.ct-heading h1, #chords-title { font: 400 clamp(30px,4vw,44px)/1.15 Georgia,serif; margin: 8px 0 22px; }
#chord-modes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; max-width: 1050px; }
#chord-modes button { padding: 24px; min-height: 116px; }
#chord-modes strong { font-size: 23px; margin-bottom: 10px; }
#chord-modes small { display: block; }
#chord-back { margin-top: 20px; }
#ct-setup { max-width: 820px; padding: 24px; background: #ffffff04; border: 1px solid var(--line); border-radius: 12px; }
#ct-setup legend { padding-bottom: 0; }
#ct-setup > .spellings { margin-bottom: 16px; }
.ct-selection-actions, .ct-actions, .ct-progress-row, .ct-octaves { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ct-selection-actions { margin: 10px 0; }
.ct-selection-actions button { min-height: 44px; padding: 8px 12px; }
.ct-root-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 8px; }
.ct-root-grid button { font-size: 21px; padding: 10px; }
.ct-root-grid button[aria-pressed="true"] { color: var(--yellow); border-color: var(--yellow); background: #f7cd7217; box-shadow: inset 0 -3px var(--yellow); }
.ct-setup-row { display: flex; flex-wrap: wrap; gap: 24px 40px; margin: 24px 0; }
.ct-setup-row fieldset { flex: 1 1 230px; }
.ct-setup-row legend { margin-bottom: 12px; }
.ct-count { display: flex; flex-direction: column; gap: 9px; font-size: 18px; font-weight: 600; flex: 1 1 220px; }
.ct-count input { min-height: 50px; width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; color: var(--ink); background: #163b32; }
.ct-count .helper { margin: 0; font-weight: 400; }
.ct-count input:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
#chord-practice button:disabled { cursor: default; }
.ct-progress-row { justify-content: space-between; }
#ct-prompt { font: 400 clamp(28px,3.5vw,42px)/1.2 Georgia,serif; margin: 15px 0 10px; }
#ct-cue { min-height: 38px; font-size: 16px; margin-bottom: 8px; }
.ct-keyboard-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--line); border-radius: 10px; padding: 14px 10px; background: #16251f; scrollbar-color: var(--yellow) #16251f; }
.ct-keyboard-scroll:focus-visible { outline: 3px solid var(--yellow); }
#ct-keyboard { width: max-content; min-width: 100%; }
#ct-keyboard .cp-keyboard { max-width: none; width: 100%; height: 230px; }
#ct-keyboard .cp-key { vector-effect: non-scaling-stroke; stroke-width: 1px; }
#ct-keyboard .cp-key[role="button"] { cursor: pointer; touch-action: pan-x pan-y; outline: none; -webkit-tap-highlight-color: transparent; }
#ct-keyboard .cp-key-label { display: block; font-size: 28px; }
#ct-keyboard[data-note-names="false"] .cp-key-label { display: none; }
#ct-keyboard .cp-key.ct-changing { stroke: #087564; stroke-width: 5px; stroke-dasharray: 8 4; }
#ct-keyboard .cp-key.ct-correct { fill: #78e6ae; }
#ct-keyboard .cp-key:focus-visible { outline: none; stroke: #087564; stroke-width: 4px; }
.ct-octaves { margin-bottom: 10px; font-size: 13px; color: var(--muted); }
.ct-octaves button { min-height: 44px; padding: 6px 14px; }
.ct-scroll-hint { font-size: 12px; }
#ct-answer { display: grid; grid-template-columns: minmax(0,2fr) minmax(180px,1fr); gap: 24px; max-width: 900px; margin: 22px 0 0; }
#ct-answer legend { font-size: 15px; padding-bottom: 8px; }
#ct-feedback { min-height: 76px; padding: 18px 0 12px; font-size: 18px; line-height: 1.45; }
.ct-success { color: var(--green); } .ct-error { color: var(--red); }
#ct-audio-status { min-height: 20px; }
.ct-summary { display: flex; flex-wrap: wrap; gap: 30px; margin: 28px 0; }
.ct-summary div { display: flex; flex-direction: column; gap: 8px; color: var(--muted); }
.ct-summary strong { font-size: 40px; color: var(--ink); }
#ct-complete { font: 400 40px Georgia,serif; }
@media(max-width:600px) {
  #chord-modes { grid-template-columns: 1fr; gap: 10px; }
  #chord-modes button { min-height: 96px; padding: 18px; }
  #ct-setup { padding: 16px; }
  .ct-root-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  #ct-answer { grid-template-columns: 1fr; gap: 16px; }
  #ct-answer-roots { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 5px; }
  #ct-answer-roots button { padding: 8px 4px; }
  #ct-keyboard .cp-keyboard { height: 200px; }
  .ct-actions .primary { flex: 1 1 100%; }
  #ct-feedback { min-height: 110px; }
  .ct-progress-row { gap: 4px; } .ct-progress-row .eyebrow { font-size: 12px; }
}
@media(max-height:500px) and (orientation:landscape) {
  #ct-keyboard .cp-keyboard { height: 180px; }
  #ct-cue { min-height: 24px; } #ct-feedback { min-height: 70px; }
}