/* pitch.css : pitch detector. Hard-coded colours only inside the .display panel. */
#pitch .pitch-privacy { margin: 6px 0 10px; }
#pitch .notice { margin: 0 0 12px; }
#pitch .pitch-display { padding: 14px; }
#pitch .pitch-read { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; min-height: 80px; }
#pitch .pitch-note { min-width: 2.4em; }
#pitch .pitch-oct { font-size: .42em; margin-left: 2px; color: #a8a29e; }
#pitch .pitch-side { text-align: left; min-width: 150px; }
#pitch .pitch-side .mid { color: #e7e5e4; }
#pitch .pitch-display[data-state="idle"] .pitch-note, #pitch .pitch-display[data-state="idle"] .mid { opacity: .45; }
#pitch .pitch-roll { display: block; width: 100%; height: 260px; margin-top: 12px; border-radius: 12px; background: rgba(255,255,255,.03); touch-action: pan-y; }
#pitch .pitch-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; color: #a8a29e; }
#pitch .pitch-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
#pitch .pitch-stats .panel { padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#pitch .pitch-stats b { font: 600 22px/1.2 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
#pitch .pitch-settings { margin-top: 12px; }
#pitch .pitch-settings .chip { min-height: 40px; }
#pitch .pitch-keys { margin: 10px 0 0; }
@media (min-width: 900px) { #pitch .pitch-roll { height: 320px; } }
@media (max-width: 420px) { #pitch .pitch-stats .panel { padding: 8px; } #pitch .pitch-stats b { font-size: 18px; } #pitch .pitch-side { min-width: 0; } }
#pitch .pitch-foot span { white-space: nowrap; }