.frame-score{display:block;margin-top:6px;color:#d7e5d8;font:12px var(--mono)}

.pitch-controls {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding:11px 18px 0;
}
.pitch-controls .toggle,
.pitch-controls .color-control {
  display:inline-flex;
  min-height:36px;
  align-items:center;
  gap:9px;
  padding:0 11px;
  border:1px solid #344157;
  border-radius:6px;
  background:#0c121c;
  color:#c2ccda;
  font:600 10px/1 var(--sans);
  white-space:nowrap;
  cursor:pointer;
  transition:border-color .15s,background .15s,color .15s;
}
.pitch-controls .toggle:hover,
.pitch-controls .color-control:hover { border-color:#687b94; background:#151e2b; color:#fff; }
.pitch-controls .toggle input {
  appearance:none;
  position:relative;
  width:29px;
  height:16px;
  flex:0 0 29px;
  margin:0;
  border:1px solid #526176;
  border-radius:999px;
  background:#283344;
  cursor:pointer;
  transition:background .15s,border-color .15s;
}
.pitch-controls .toggle input::before {
  position:absolute;
  top:2px;
  left:2px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#a5b0bf;
  content:"";
  transition:transform .15s,background .15s;
}
.pitch-controls .toggle input:checked { border-color:#a8c83a; background:#526321; }
.pitch-controls .toggle input:checked::before { transform:translateX(13px); background:#efffa5; }
.pitch-controls .toggle input:focus-visible,
.pitch-controls .color-control input:focus-visible { outline:2px solid var(--green,#d7fa4b); outline-offset:3px; }
.pitch-controls .color-control { gap:8px; }
.pitch-controls .color-control input {
  width:27px;
  height:22px;
  padding:2px;
  border:1px solid #526176;
  border-radius:4px;
  background:#111824;
  cursor:pointer;
}
@media(max-width:560px) {
  .pitch-controls { gap:6px; padding:10px 12px 0; }
  .pitch-controls .toggle,.pitch-controls .color-control { min-height:34px; padding-inline:8px; font-size:9px; }
}