:root {
  --kf-bg: #111215;
  --kf-surface: #161b22;
  --kf-surface-2: #1c2128;
  --kf-ink: #f2f5f7;
  --kf-muted: #8b949e;
  --kf-faint: #5f6873;
  --kf-line: #282f37;
  --kf-green: #10b981;
  --kf-cyan: #22b8cf;
  --kf-amber: #f2a93b;
  --kf-violet: #b7a3ef;
}

.kf-wrap,
.kf-wrap * { box-sizing: border-box; }

.kf-wrap {
  width: min(1040px, calc(100% - 32px));
  margin: 0 auto;
  padding: 48px 0 88px;
  color: var(--kf-ink);
  font-family: "Inter", sans-serif;
}

.kf-heading { margin-bottom: 32px; }
.kf-kicker,
.kf-card-index {
  color: var(--kf-green);
  font-family: "DM Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.kf-heading h1 {
  margin: 8px 0 7px;
  color: #fff;
  font-family: "Syne", sans-serif;
  font-size: 56px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
}
.kf-heading p { margin: 0; color: var(--kf-muted); font-size: 14px; }

.kf-input-card,
.kf-panel,
.kf-practice,
.kf-progression,
.kf-chords-section,
.kf-piano-area,
.kf-seq-section {
  border: 1px solid var(--kf-line);
  border-radius: 8px;
  background: var(--kf-surface);
}

.kf-input-card { padding: 24px; }
.kf-card-head,
.kf-results-head,
.kf-panel-head,
.kf-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.kf-card-head { margin-bottom: 18px; }
.kf-card-head > div,
.kf-results-head > div:first-child,
.kf-panel-head > div { display: flex; align-items: center; gap: 10px; }
.kf-card-head h2,
.kf-results-head h2,
.kf-panel-head h3 { margin: 0; color: #fff; letter-spacing: 0; }
.kf-card-head h2 { font-size: 16px; }
.kf-card-meta { color: var(--kf-faint); font-family: "DM Mono", monospace; font-size: 10px; }

.kf-drop {
  min-height: 154px;
  border: 1px dashed #3a424c;
  border-radius: 8px;
  background: #11161c;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .18s, background-color .18s;
}
.kf-drop:hover,
.kf-drop:focus-visible,
.kf-drop.dragover { border-color: var(--kf-green); background: #111b1c; outline: none; }
.kf-drop-icon { margin-bottom: 12px; color: var(--kf-green); }
.kf-drop strong { font-size: 14px; }
.kf-drop span { margin-top: 5px; color: var(--kf-muted); font-size: 12px; }

.kf-file-row {
  display: none;
  min-height: 74px;
  align-items: center;
  gap: 13px;
  padding: 12px 14px;
  border: 1px solid var(--kf-line);
  border-radius: 8px;
  background: var(--kf-surface-2);
}
.kf-file-row.visible { display: flex; }
.kf-file-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: 1px solid var(--kf-line);
  border-radius: 7px;
  background: #0e1318;
  color: var(--kf-green);
  display: grid;
  place-items: center;
}
.kf-file-meta { min-width: 0; flex: 1; display: grid; gap: 4px; }
.kf-file-name { overflow: hidden; color: #fff; font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.kf-file-size { color: var(--kf-faint); font-family: "DM Mono", monospace; font-size: 10px; }
.kf-icon-btn {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--kf-muted);
  cursor: pointer;
  font-size: 20px;
}
.kf-icon-btn:hover { color: #fff; }

.kf-divider { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--kf-faint); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.kf-divider::before,
.kf-divider::after { content: ""; height: 1px; flex: 1; background: var(--kf-line); }
.kf-url {
  width: 100%;
  height: 44px;
  border: 1px solid var(--kf-line);
  border-radius: 7px;
  background: #0e1318;
  padding: 0 13px;
  color: var(--kf-ink);
  font: inherit;
  font-size: 13px;
  outline: none;
}
.kf-url:focus { border-color: var(--kf-green); }
.kf-url::placeholder { color: var(--kf-faint); }
.kf-url-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.kf-url-tags span { border: 1px solid var(--kf-line); border-radius: 4px; padding: 3px 7px; color: var(--kf-faint); font-size: 10px; }
.kf-analyze-btn {
  width: 100%;
  min-height: 46px;
  margin-top: 20px;
  border: 0;
  border-radius: 7px;
  background: var(--kf-green);
  color: #06140f;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}
.kf-analyze-btn:hover { background: #28c793; }
.kf-analyze-btn:disabled { background: #26322f; color: #66716e; cursor: not-allowed; }

.kf-loading,
.kf-error,
.kf-results { display: none; }
.kf-loading.visible,
.kf-error.visible,
.kf-results.visible { display: block; }
.kf-loading { padding: 68px 20px; text-align: center; }
.kf-loading-rail { width: min(420px, 100%); height: 3px; margin: 0 auto 22px; overflow: hidden; background: #242b32; }
.kf-loading-rail span { display: block; width: 36%; height: 100%; background: var(--kf-green); animation: kf-scan 1.15s ease-in-out infinite alternate; }
.kf-loading strong { display: block; color: #fff; font-size: 15px; }
.kf-loading > span { display: block; margin-top: 6px; color: var(--kf-faint); font-size: 12px; }
@keyframes kf-scan { from { transform: translateX(-100%); } to { transform: translateX(280%); } }

.kf-error { margin-top: 20px; border: 1px solid #5b292d; border-radius: 8px; background: #211518; padding: 22px; text-align: center; }
.kf-error strong { display: block; margin-bottom: 6px; color: #ff737d; font-size: 13px; }
.kf-error span { color: #d99a9f; font-size: 12px; }

.kf-results-head { margin: 8px 0 18px; }
.kf-results-head h2 { max-width: 680px; overflow: hidden; font-family: "Syne", sans-serif; font-size: 20px; text-overflow: ellipsis; white-space: nowrap; }
.kf-result-actions { display: flex; gap: 7px; }
.kf-result-actions button,
.kf-again-btn,
.kf-reset-btn {
  border: 1px solid var(--kf-line);
  border-radius: 6px;
  background: transparent;
  padding: 8px 11px;
  color: var(--kf-muted);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
}
.kf-result-actions button:hover,
.kf-again-btn:hover,
.kf-reset-btn:hover { border-color: #47515d; color: #fff; }

.kf-dna-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.kf-stat {
  min-height: 138px;
  border: 1px solid var(--kf-line);
  border-top-width: 3px;
  border-radius: 8px;
  background: var(--kf-surface);
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.kf-stat-tempo { border-top-color: var(--kf-cyan); }
.kf-stat-key { border-top-color: var(--kf-amber); }
.kf-stat-camelot { border-top-color: var(--kf-violet); }
.kf-stat-dynamics { border-top-color: var(--kf-green); }
.kf-stat-label { color: var(--kf-faint); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.kf-stat > strong { overflow: hidden; color: #fff; font-family: "DM Mono", monospace; font-size: 36px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.kf-stat > span:last-child { color: var(--kf-faint); font-size: 10px; }
.kf-stat > span b { color: var(--kf-muted); font-weight: 600; }
.kf-stat > span.verified,
.kf-stat > span.verified b { color: var(--kf-green); }
.kf-stat > span.review,
.kf-stat > span.review b { color: var(--kf-amber); }

.kf-practice { margin-bottom: 10px; overflow: hidden; }
.kf-practice-head {
  min-height: 58px;
  border-bottom: 1px solid var(--kf-line);
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.kf-practice-head > div:first-child { display: flex; align-items: center; gap: 10px; }
.kf-practice-head h3 { margin: 0; color: #fff; font-size: 14px; letter-spacing: 0; }
.kf-view-switch,
.kf-instrument-switch { display: inline-flex; align-items: center; border: 1px solid var(--kf-line); border-radius: 6px; background: #10151a; padding: 3px; }
.kf-view-switch button,
.kf-instrument-switch button {
  min-height: 30px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  padding: 0 13px;
  color: var(--kf-muted);
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
}
.kf-view-switch button.active,
.kf-instrument-switch button.active { background: #25302f; color: var(--kf-green); }
.kf-live-grid { min-height: 210px; display: grid; grid-template-columns: minmax(240px, .72fr) minmax(420px, 1.28fr); }
.kf-live-harmony { border-right: 1px solid var(--kf-line); padding: 28px; display: flex; flex-direction: column; justify-content: center; }
.kf-live-label { color: var(--kf-faint); font-size: 9px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.kf-live-harmony > strong { max-width: 100%; margin-top: 8px; overflow-wrap: anywhere; color: #fff; font-family: "DM Mono", monospace; font-size: 58px; font-weight: 500; line-height: 1; }
.kf-practice.notes-view .kf-live-harmony > strong { font-size: 36px; line-height: 1.15; }
.kf-live-notes { min-height: 30px; margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.kf-live-notes span { border: 1px solid #31534d; border-radius: 4px; background: #10221e; padding: 5px 8px; color: #6fe1bc; font-family: "DM Mono", monospace; font-size: 10px; }
.kf-next-chord { margin-top: 22px; display: flex; align-items: baseline; gap: 9px; }
.kf-next-chord span { color: var(--kf-faint); font-size: 9px; text-transform: uppercase; }
.kf-next-chord strong { color: var(--kf-violet); font-family: "DM Mono", monospace; font-size: 14px; font-weight: 500; }
.kf-diagram-stage { position: relative; min-width: 0; padding: 22px 24px 18px; display: grid; place-items: center; }
.kf-instrument-switch { position: absolute; top: 12px; right: 14px; z-index: 4; }
.kf-instrument-switch[hidden] { display: none; }
#kfLiveDiagram { width: min(100%, 520px); min-height: 132px; display: grid; place-items: center; }
.kf-live-piano { width: 100%; }
.kf-live-piano .kf-keys { height: 118px; }
.kf-live-piano .kf-bk { width: 24px; }
.kf-guitar-diagram { width: min(250px, 100%); display: grid; grid-template-columns: 26px 1fr; gap: 7px; }
.kf-guitar-marks { height: 18px; display: grid; grid-template-columns: repeat(6, 1fr); grid-column: 2; color: var(--kf-muted); font-family: "DM Mono", monospace; font-size: 10px; text-align: center; }
.kf-guitar-board { position: relative; height: 112px; grid-column: 2; border-top: 4px solid #cbd1d5; background: repeating-linear-gradient(to bottom, transparent 0, transparent 27px, #47515a 27px, #47515a 28px), repeating-linear-gradient(to right, #68717a 0, #68717a 1px, transparent 1px, transparent 20%); }
.kf-guitar-barre { position: absolute; z-index: 1; height: 15px; min-width: 12px; transform: translateY(-50%); border-radius: 10px; background: #1c8f73; }
.kf-fret-dot { position: absolute; z-index: 2; width: 19px; height: 19px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--kf-green); color: #07110e; display: grid; place-items: center; font-size: 8px; font-weight: 900; }
.kf-guitar-caption { grid-column: 1 / -1; color: var(--kf-muted); font-family: "DM Mono", monospace; font-size: 9px; text-align: center; }

.kf-transport { min-height: 54px; border-top: 1px solid var(--kf-line); border-bottom: 1px solid var(--kf-line); background: #11161b; padding: 8px 12px; display: grid; grid-template-columns: 34px 38px 34px auto minmax(120px, 1fr) auto 64px auto auto 28px; align-items: center; gap: 8px; }
.kf-transport button,
.kf-transport select { border: 1px solid var(--kf-line); border-radius: 5px; background: #171d23; color: var(--kf-muted); cursor: pointer; font: inherit; font-size: 10px; font-weight: 700; }
.kf-transport button:hover { border-color: #47515d; color: #fff; }
.kf-transport-icon { width: 34px; height: 30px; }
.kf-play-btn { width: 38px; height: 34px; color: var(--kf-green) !important; font-size: 14px !important; }
.kf-time { min-width: 34px; color: var(--kf-muted); font-family: "DM Mono", monospace; font-size: 9px; text-align: center; }
#kfSeek { width: 100%; accent-color: var(--kf-green); }
#kfSpeed { height: 30px; padding: 0 7px; }
.kf-loop-btn { height: 30px; padding: 0 9px; }
.kf-loop-btn.set { border-color: #685735; background: #251f14; color: var(--kf-amber); }
.kf-loop-clear { width: 28px; height: 28px; font-size: 16px !important; }
.kf-timeline-viewport { position: relative; height: 186px; overflow-x: auto; overflow-y: hidden; background: #0e1318; scrollbar-color: #37414a #12171c; }
.kf-timeline-viewport.notes-view { height: 276px; overflow-y: hidden; }
.kf-timeline { position: relative; min-width: 100%; height: 100%; }
.kf-time-tick { position: absolute; top: 0; bottom: 0; z-index: 1; border-left: 1px solid #252c33; pointer-events: none; }
.kf-time-tick span { position: absolute; top: 7px; left: 5px; color: #59636e; font-family: "DM Mono", monospace; font-size: 8px; }
.kf-beat-line { position: absolute; top: 24px; bottom: 0; z-index: 0; width: 1px; background: #1f2b2e; pointer-events: none; }
.kf-beat-line.downbeat { width: 2px; background: #34594f; }
.kf-chord-block { position: absolute; top: 38px; z-index: 2; height: 104px; overflow: hidden; border: 1px solid #343c45; border-radius: 5px; background: #171d23; padding: 12px 10px; color: var(--kf-violet); cursor: pointer; text-align: left; }
.kf-chord-block:hover,
.kf-chord-block.active { border-color: var(--kf-green); background: #13231f; color: #fff; }
.kf-chord-block.verified { border-top-color: var(--kf-green); }
.kf-chord-block.review { border-top-color: var(--kf-amber); }
.kf-chord-block strong { display: block; overflow: hidden; font-family: "DM Mono", monospace; font-size: 18px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.kf-chord-block span { display: block; margin-top: 8px; color: var(--kf-faint); font-family: "DM Mono", monospace; font-size: 8px; }
.kf-chord-block em { display: block; margin-top: 7px; overflow: hidden; color: var(--kf-green); font-family: "DM Mono", monospace; font-size: 9px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.kf-note-row { position: absolute; left: 0; right: 0; z-index: 1; height: 12px; border-top: 1px solid #1d242b; pointer-events: none; }
.kf-note-row.octave { border-top-color: #374149; }
.kf-note-row > span { position: sticky; left: 4px; z-index: 3; color: #66727d; font-family: "DM Mono", monospace; font-size: 7px; }
.kf-note-row.tone-row { height: 20px; background: linear-gradient(90deg, #111820 0, transparent 76px); }
.kf-note-row.tone-row > span { left: 12px; display: inline-grid; width: 28px; height: 19px; place-items: center; color: #a5afb9; font-size: 9px; font-weight: 700; }
.kf-note-bar { position: absolute; z-index: 3; height: 9px; border: 0; border-radius: 2px; background: #2ebf93; cursor: pointer; }
.kf-note-bar.tone-bar { height: 12px; min-width: 6px; border-left: 2px solid #66e6bf; background: #258d72; }
.kf-note-bar.tone-bar:hover { z-index: 5; background: #35c69d; }
.kf-note-bar.root { background: var(--kf-cyan); opacity: .95; }
.kf-note-bar.active { box-shadow: 0 0 0 1px #fff inset; opacity: 1; }
.kf-playhead { position: absolute; top: 0; bottom: 0; z-index: 8; width: 2px; background: #f3f6f7; pointer-events: none; transform: translateX(-1px); }
.kf-playhead::before { content: ""; position: absolute; top: 0; left: -4px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid #f3f6f7; }
.kf-timeline-meta { min-height: 34px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; color: var(--kf-faint); font-size: 9px; }

.kf-tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.kf-panel { padding: 18px; }
.kf-panel-head { padding-bottom: 14px; border-bottom: 1px solid var(--kf-line); }
.kf-panel-head h3 { font-size: 14px; }
.kf-panel-head > span { color: var(--kf-faint); font-family: "DM Mono", monospace; font-size: 10px; }
.kf-tempo-variants { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 14px 0; }
.kf-tempo-variant { border-right: 1px solid var(--kf-line); text-align: center; }
.kf-tempo-variant:last-child { border-right: 0; }
.kf-tempo-variant span { display: block; color: var(--kf-faint); font-size: 9px; text-transform: uppercase; }
.kf-tempo-variant strong { display: block; margin-top: 4px; color: var(--kf-cyan); font-family: "DM Mono", monospace; font-size: 15px; }
.kf-timing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--kf-line); border: 1px solid var(--kf-line); }
.kf-timing-row { min-height: 38px; background: #12171d; padding: 8px 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kf-timing-row span { color: var(--kf-muted); font-size: 10px; }
.kf-timing-row strong { color: #fff; font-family: "DM Mono", monospace; font-size: 11px; font-weight: 500; }

.kf-key-relations { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 14px 0; }
.kf-key-relation { min-width: 0; border-right: 1px solid var(--kf-line); text-align: center; }
.kf-key-relation:last-child { border-right: 0; }
.kf-key-relation span { display: block; color: var(--kf-faint); font-size: 9px; text-transform: uppercase; }
.kf-key-relation strong { display: block; overflow: hidden; margin-top: 5px; color: var(--kf-amber); font-family: "DM Mono", monospace; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.kf-transpose { min-height: 54px; border-top: 1px solid var(--kf-line); display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 10px; padding-top: 13px; }
.kf-transpose > span { color: var(--kf-muted); font-size: 10px; }
.kf-transpose > strong { color: #fff; font-family: "DM Mono", monospace; font-size: 13px; text-align: center; }
.kf-stepper { display: grid; grid-template-columns: 27px 30px 27px; align-items: center; }
.kf-stepper button { width: 27px; height: 27px; border: 1px solid var(--kf-line); background: #11161c; color: #fff; cursor: pointer; font-size: 16px; }
.kf-stepper strong { color: var(--kf-green); font-family: "DM Mono", monospace; font-size: 11px; text-align: center; }
.kf-reset-btn { padding: 6px 8px; }

.kf-progression,
.kf-chords-section,
.kf-piano-area,
.kf-seq-section { margin-top: 10px; padding: 18px; }
.kf-section-head { margin-bottom: 14px; }
.kf-section-head > span { color: #fff; font-size: 12px; font-weight: 800; }
.kf-section-head small { color: var(--kf-faint); font-size: 10px; }
.kf-progression-chords { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.kf-prog-chord,
.kf-chord-tag,
.kf-seq-item {
  border: 1px solid #3a344d;
  border-radius: 5px;
  background: #181522;
  padding: 7px 11px;
  color: var(--kf-violet);
  cursor: pointer;
  font-family: "DM Mono", monospace;
  font-size: 12px;
}
.kf-prog-arrow { color: var(--kf-faint); font-size: 11px; }
.kf-chord-tags,
.kf-seq-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.kf-chord-tag:hover,
.kf-seq-item:hover,
.kf-prog-chord:hover,
.kf-chord-tag.active,
.kf-seq-item.active,
.kf-prog-chord.active { border-color: var(--kf-cyan); background: #112126; color: var(--kf-cyan); }

.kf-piano-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.kf-piano-card { min-width: 0; border: 1px solid var(--kf-line); border-radius: 7px; background: #12171d; padding: 11px; cursor: pointer; }
.kf-piano-card.active { border-color: var(--kf-cyan); }
.kf-piano-name { margin-bottom: 8px; color: #fff; font-family: "DM Mono", monospace; font-size: 12px; text-align: center; }
.kf-keys { position: relative; height: 50px; display: flex; }
.kf-wk { position: relative; z-index: 1; height: 100%; flex: 1; border: 1px solid #a8adb2; border-top: 0; border-radius: 0 0 2px 2px; background: #d9dcdf; }
.kf-wk.on { border-color: #19987b; background: #35c69d; }
.kf-wk.root { border-color: #0c8da3; background: var(--kf-cyan); }
.kf-bwrap { position: absolute; top: 0; z-index: 2; height: 56%; display: flex; justify-content: center; }
.kf-bk { width: 13px; height: 100%; border: 1px solid #050607; border-top: 0; border-radius: 0 0 2px 2px; background: #171a1d; }
.kf-bk.on { border-color: #19987b; background: #35c69d; }
.kf-bk.root { border-color: #0c8da3; background: var(--kf-cyan); }
.kf-dots { display: flex; margin-top: 5px; }
.kf-dot { flex: 1; display: flex; justify-content: center; }
.kf-dot-c { width: 16px; height: 16px; border-radius: 50%; color: #07110e; display: grid; place-items: center; font-size: 7px; font-weight: 900; opacity: 0; }
.kf-dot-c.on { background: #35c69d; opacity: 1; }
.kf-dot-c.root { background: var(--kf-cyan); opacity: 1; }
.kf-piano-notes { margin-top: 8px; color: var(--kf-muted); font-family: "DM Mono", monospace; font-size: 9px; text-align: center; }
.kf-seq-item { min-width: 64px; padding: 6px 9px; font-size: 10px; display: grid; gap: 2px; text-align: left; }
.kf-seq-item span { color: var(--kf-faint); font-size: 8px; }
.kf-seq-item strong { color: inherit; font-size: 11px; }
.kf-again { margin-top: 20px; text-align: center; }
.kf-again-btn { padding: 10px 16px; }

@media (max-width: 780px) {
  .kf-wrap { width: min(100% - 24px, 1040px); padding-top: 32px; }
  .kf-dna-grid { grid-template-columns: 1fr 1fr; }
  .kf-tool-grid { grid-template-columns: 1fr; }
  .kf-live-grid { grid-template-columns: 1fr; }
  .kf-live-harmony { min-height: 180px; border-right: 0; border-bottom: 1px solid var(--kf-line); }
  .kf-live-harmony > strong { font-size: 48px; }
  .kf-practice.notes-view .kf-live-harmony > strong { font-size: 32px; }
  .kf-diagram-stage { min-height: 210px; }
  .kf-transport { grid-template-columns: 34px 38px 34px 1fr auto; }
  .kf-transport #kfSeek { grid-column: 1 / -1; grid-row: 2; }
  .kf-transport #kfCurrentTime { grid-column: 1 / 3; grid-row: 3; text-align: left; }
  .kf-transport #kfDuration { grid-column: 4 / 6; grid-row: 3; text-align: right; }
  .kf-transport #kfSpeed { grid-column: 4; grid-row: 1; }
  .kf-transport #kfLoopA { grid-column: 1 / 3; grid-row: 4; }
  .kf-transport #kfLoopB { grid-column: 3 / 5; grid-row: 4; }
  .kf-transport #kfLoopClear { grid-column: 5; grid-row: 4; }
}

@media (max-width: 520px) {
  .kf-heading h1 { font-size: 34px; }
  .kf-input-card { padding: 16px; }
  .kf-card-head,
  .kf-results-head,
  .kf-section-head { align-items: flex-start; flex-direction: column; }
  .kf-card-meta { display: none; }
  .kf-result-actions { width: 100%; }
  .kf-result-actions button { flex: 1; }
  .kf-dna-grid { grid-template-columns: 1fr 1fr; }
  .kf-stat { min-height: 118px; padding: 14px; }
  .kf-stat > strong { font-size: 24px; }
  .kf-timing-grid { grid-template-columns: 1fr; }
  .kf-transpose { grid-template-columns: auto auto; }
  .kf-transpose > strong { text-align: right; }
  .kf-reset-btn { display: none; }
  .kf-practice-head { align-items: flex-start; flex-direction: column; padding: 14px; }
  .kf-view-switch { width: 100%; }
  .kf-view-switch button { flex: 1; }
  .kf-live-harmony { padding: 22px; }
  .kf-live-piano .kf-keys { height: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  .kf-loading-rail span { animation-duration: 3s; }
}