.ctrl-chord {
  opacity: 0.3;
  color: #333333;
  text-align: center;
  font-size: 36px;
  border-radius: 50%;
  border: 10px solid;
  width: 100px;
  height: 100px;
  padding-top: 10px;
  position: absolute;
}

.ctrl-chord-active {
  font-size: 32px;
  opacity: 1;
/*  font-family: "Times New Roman" !important;*/
}

.ctrl-chord-tonic-distance-0 {
  /*c*/
  top: 40px;
  left: 200px;
}

.ctrl-chord-tonic-distance-0-m {
  /*c*/
  top: 290px;
  left: 112px;
}

.ctrl-chord-tonic-distance-1 {
  /*c#*/
  top: 390px;
  left: 112px;
}

.ctrl-chord-tonic-distance-1-m {
  /*c#*/
  top: 290px;
  left: 288px;
}

.ctrl-chord-tonic-distance-2 {
  /*d*/
  top: 140px;
  left: 375px;
}

.ctrl-chord-tonic-distance-2-m {
  /*d*/
  top: 190px;
  left: 112px;
}

.ctrl-chord-tonic-distance-3 {
  /*eb*/
  top: 240px;
  left: 26px;
}

.ctrl-chord-tonic-distance-3-m {
  /*eb*/
  top: 290px;
  left: 112px;
}

.ctrl-chord-tonic-distance-4 {
  /*e*/
  top: 340px;
  left: 375px;
}

.ctrl-chord-tonic-distance-4-m {
  /*e*/
  top: 190px;
  left: 288px;
}

.ctrl-chord-tonic-distance-5 {
  /*f*/
  top: 90px;
  left: 112px;
}

.ctrl-chord-tonic-distance-5-m {
  /*f*/
  top: 290px;
  left: 112px;
}

.ctrl-chord-tonic-distance-6 {
  /*f#*/
  top: 440px;
  left: 200px;
}

.ctrl-chord-tonic-distance-6-m {
  /*f#*/
  top: 190px;
  left: 288px;
}

.ctrl-chord-tonic-distance-7 {
  /*g*/
  top: 90px;
  left: 288px;
}

.ctrl-chord-tonic-distance-7-m {
  /*g*/
  top: 190px;
  left: 112px;
}

.ctrl-chord-tonic-distance-8 {
  /*ab*/
  top: 340px;
  left: 26px;
}

.ctrl-chord-tonic-distance-8-m {
  /*ab*/
  top: 290px;
  left: 288px;
}

.ctrl-chord-tonic-distance-9 {
  /*a*/
  top: 240px;
  left: 375px;
}

.ctrl-chord-tonic-distance-9-m {
  /*a*/
  top: 140px;
  left: 200px;
}

.ctrl-chord-tonic-distance-10 {
  /*bb*/
  top: 140px;
  left: 26px;
}

.ctrl-chord-tonic-distance-10-m {
  /*bb*/
  top: 290px;
  left: 112px;
}

.ctrl-chord-tonic-distance-11 {
  /*b*/
  top: 390px;
  left: 288px;
}

.ctrl-chord-tonic-distance-11-m {
  /*b*/
  top: 190px;
  left: 288px;
}



.ctrl-2-chord-tonic-distance-0 {
  /*C*/
  top: 140px;
  left: 0px;
}

.ctrl-2-chord-tonic-distance-7 {
  /*G*/
  top: 53px;
  left: 50px;
}

.ctrl-2-chord-tonic-distance-2 {
  /*D*/
  top: -34px;
  left: 100px;
}

.ctrl-2-chord-tonic-distance-9 {
  /*A*/
  top: -34px;
  left: 200px;
}

.ctrl-2-chord-tonic-distance-4 {
  /*E*/
  top: -34px;
  left: 300px;
}

.ctrl-2-chord-tonic-distance-11 {
  /*B*/
  top: 53px;
  left: 350px;
}

.ctrl-2-chord-tonic-distance-6 {
  /*F#*/
  top: 140px;
  left: 400px;
}

.ctrl-2-chord-tonic-distance-10 {
  /*A#*/
  top: 313px;
  left: 100px;
}

.ctrl-2-chord-tonic-distance-3 {
  /*D#*/
  top: 313px;
  left: 200px;
}

.ctrl-2-chord-tonic-distance-8 {
  /*G#*/
  top: 313px;
  left: 300px;
}

.ctrl-2-chord-tonic-distance-1 {
  /*C#*/
  top: 226px;
  left: 350px;
}

.ctrl-2-chord-tonic-distance-5 {
  /*F*/
  top: 226px;
  left: 50px;
}


.ctrl-2-chord-tonic-distance-2-m {
  /*Dm*/
  top: 226px;
  left: 150px;
}

.ctrl-2-chord-tonic-distance-9-m {
  /*Am*/
  top: 140px;
  left: 100px;
}

.ctrl-2-chord-tonic-distance-4-m {
  /*Em*/
  top: 53px;
  left: 150px;
}

.ctrl-2-chord-tonic-distance-11-m {
  /*Bm*/
  top: -34px;
  left: 0px;
}

.ctrl-2-chord-tonic-distance-6-m {
  /*F#m*/
  top: -120px;
  left: 150px;
}

.ctrl-2-chord-tonic-distance-1-m {
  /*C#m*/
  top: -120px;
  left: 250px;
}

.ctrl-2-chord-tonic-distance-8-m {
  /*G#m*/
  top: 53px;
  left: 250px;
}

.ctrl-2-chord-tonic-distance-3-m {
  /*D#m*/
  top: 140px;
  left: 300px;
}

.ctrl-2-chord-tonic-distance-10-m {
  /*A#m*/
  top: 226px;
  left: 250px;
}

.ctrl-2-chord-tonic-distance-5-m {
  /*Fm*/
  top: 400px;
  left: 250px;
}

.ctrl-2-chord-tonic-distance-5-m {
  /*Fm*/
  top: 400px;
  left: 250px;
}

.ctrl-2-chord-tonic-distance-0-m {
  /*Cm*/
  top: 400px;
  left: 150px;
}

.ctrl-2-chord-tonic-distance-7-m {
  /*A#m*/
  top: 313px;
  left: 0px;
}


.ctrl-2-chord-tonic-distance-3-m-mod {
  /*C min*/
  top: 140px;
  left: 100px;
}

.ctrl-2-chord-tonic-distance-10-m-mod {
  /*G min*/
  top: 53px;
  left: 150px;
}

.ctrl-2-chord-tonic-distance-8-m-mod {
  /*F min*/
  top: 226px;
  left: 150px;
}

.ctrl-2-chord-tonic-distance-5-m-mod {
  /*F dor*/
  top: -34px;
  left: 0px;
}

.ctrl-2-chord-tonic-distance-1-m-mod {
  /*Db phr*/
  top: 313px;
  left: 0px;
}








.ctrl-2-chordm7-tonic-distance-9 {
  /*Am*/
  transform: scale(2);
  border-width: 5px;
  top: 140px;
  left: 250px;
}
#cof-view {
  margin-top: -50px;
}

#ctrl-cof-3 {
  margin-top: 100px;
  position: relative;
  width: 600px;
  height: 600px;

  transform: scale(0.8);

}

/* WFIT: scale-to-fit on narrow columns. The circle-of-fifths is a fixed 600x600
   canvas of ~150 hand-placed absolute coordinates; rather than rewrite them we
   shrink the whole canvas so it fits its (much narrower) phone column. Below lg the
   wheel becomes col-12/col-md-6 and the 600px box overflows the column — a plain
   `transform: scale()` would NOT help because a transform leaves the layout box at
   600px (it only scales pixels visually), so the column would still overflow. CSS
   `zoom` instead collapses the layout box itself, so the column actually fits the
   smaller wheel and stacks cleanly. --wfit = min(0.8, columnWidth/600) is set by the
   ResizeObserver in show.html.erb on the stable #cof-view container (which survives
   the websocket cof_reset re-render, since .html() replaces only its children), so
   the freshly-rendered #ctrl-cof-3 inherits the current fit automatically. Capped at
   the 0.8 design scale so it never grows beyond today's size. Desktop (lg+) keeps the
   exact `transform: scale(0.8)` above — this rule does not apply there. */
@media (max-width: 991.98px) {
  #ctrl-cof-3 {
    transform: none;
    zoom: var(--wfit, 0.8);
  }
}

.ctrl-cof {
  opacity: 0.3;
  color: #888;
  text-align: center;
  font-size: 26px;
  font-family: Arial;
  border-radius: 50%;
  border: 10px solid;
  width: 100px;
  height: 100px;
  padding-top: 10px;
  position: absolute;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent; /* TTAP: custom :active is the feedback */
}

/* TTAP: touch press feedback. :hover never fires on a touch screen, so the
   clickable circle-of-fifths circles get their press feedback from :active
   (the resting opacity is 0.3 and the JS-selected state is .ctrl-cof-active at 1;
   0.6 here is an unmistakable mid-press cue). Layout-neutral — opacity only. */
.ctrl-cof:active {
  opacity: 0.6;
}

.ctrl-cof-active {
  font-size: 26px;
  opacity: 1;
/*  font-family: "Times New Roman" !important;*/
}

.ctrl-cof-tonic-distance-0 {
  /*c*/
  top: 40px;
  left: 200px;
}

.ctrl-cof-tonic-distance-0-m {
  /*c*/
  top: 240px;
  left: -74px;
}

.ctrl-cof-tonic-distance-0-m-aeo {
  top: 240px;
  left: 475px;
}

.ctrl-cof-tonic-distance-0-dim {
  /*c*/
  top: 290px;
  left: 112px;
}

.ctrl-cof-tonic-distance-1 {
  /*c#*/
  top: 390px;
  left: 112px;
}

.ctrl-cof-tonic-distance-1-m {
  /*c#*/
  top: 440px;
  left: 375px;
}

.ctrl-cof-tonic-distance-1-m-aeo {
  top: 40px;
  left: 26px;
}

.ctrl-cof-tonic-distance-1-m-phr {
  /*c#*/
  top: 40px;
  left: 26px;
}

.ctrl-cof-tonic-distance-1-dim {
  /*c#*/
  top: 190px;
  left: 288px;
}

.ctrl-cof-tonic-distance-2 {
  /*d*/
  top: 140px;
  left: 375px;
}

.ctrl-cof-tonic-distance-2-m {
  /*d*/
  top: -10px;
  left: 112px;
}

.ctrl-cof-tonic-distance-2-m-aeo {
  top: 491px;
  left: 288px;
}

.ctrl-cof-tonic-distance-2-m-mix {
  /*d*/
  top: -10px;
  left: 112px;
}

.ctrl-cof-tonic-distance-2-m-lyd {
  /*dm*/
  top: -10px;
  left: 112px;
}

.ctrl-cof-tonic-distance-2-dim {
  /*d*/
  top: 240px;
  left: 126px;
}

.ctrl-cof-tonic-distance-3 {
  /*eb*/
  top: 240px;
  left: 26px;
}

.ctrl-cof-tonic-distance-3-m {
  /*eb*/
  top: 540px;
  left: 200px;
}

.ctrl-cof-tonic-distance-3-m-aeo {
  /*c*/
  top: -60px;
  left: 200px;
}

.ctrl-cof-tonic-distance-3-m-lyd {
  /*eb*/
  top: 540px;
  left: 200px;
}

.ctrl-cof-tonic-distance-3-m-dor {
  /*eb*/
  top: 140px;
  left: 200px;
}

.ctrl-cof-tonic-distance-3-m-phr {
  /*eb*/
  top: 140px;
  left: 200px;
}

.ctrl-cof-tonic-distance-3-dim {
  /*eb*/
  top: 290px;
  left: 288px;
}

.ctrl-cof-tonic-distance-4 {
  /*e*/
  top: 340px;
  left: 375px;
}

.ctrl-cof-tonic-distance-4-m {
  /*e*/
  top: -10px;
  left: 288px;
}

.ctrl-cof-tonic-distance-4-m-aeo {
  /*bb*/
  top: 491px;
  left: 113px;
}

.ctrl-cof-tonic-distance-4-m-mix {
  /*em*/
  top: -10px;
  left: 288px;
}

.ctrl-cof-tonic-distance-4-m-lyd {
  /*e*/
  top: -10px;
  left: 288px;
}

.ctrl-cof-tonic-distance-4-dim {
  /*edim*/
  top: 190px;
  left: 112px;
}

.ctrl-cof-tonic-distance-5 {
  /*f*/
  top: 90px;
  left: 112px;
}

.ctrl-cof-tonic-distance-5-m {
  /*f*/
  top: 440px;
  left: 26px;
}

.ctrl-cof-tonic-distance-5-m-aeo {
  top: 40px;
  left: 375px;
}

.ctrl-cof-tonic-distance-5-m-dor {
  /*f*/
  top: 40px;
  left: 375px;
}

.ctrl-cof-tonic-distance-5-dim {
  /*f*/
  top: 340px;
  left: 200px;
}

.ctrl-cof-tonic-distance-6 {
  /*f#*/
  top: 440px;
  left: 200px;
}

.ctrl-cof-tonic-distance-6-m {
  /*f#*/
  top: 240px;
  left: 475px;
}

.ctrl-cof-tonic-distance-6-m-aeo {
  top: 240px;
  left: -74px;
}


.ctrl-cof-tonic-distance-6-dim {
  /*f#*/
  top: 190px;
  left: 288px;
}

.ctrl-cof-tonic-distance-7 {
  /*g*/
  top: 90px;
  left: 288px;
}

.ctrl-cof-tonic-distance-7-m {
  /*g*/
  top: 40px;
  left: 26px;
}

.ctrl-cof-tonic-distance-7-m-aeo {
  top: 440px;
  left: 375px;
}

.ctrl-cof-tonic-distance-7-m-mix {
  /*g*/
  top: 40px;
  left: 26px;
}

.ctrl-cof-tonic-distance-7-dim {
  /*g*/
  top: 290px;
  left: 112px;
}

.ctrl-cof-tonic-distance-8 {
  /*ab*/
  top: 340px;
  left: 26px;
}

.ctrl-cof-tonic-distance-8-m {
  /*ab*/
  top: 491px;
  left: 288px;
}

.ctrl-cof-tonic-distance-8-m-aeo {
  top: -10px;
  left: 112px;
}

.ctrl-cof-tonic-distance-8-m-phr {
  /*ab*/
  top: 190px;
  left: 112px;
}

.ctrl-cof-tonic-distance-8-dim {
  /*ab*/
  top: 240px;
  left: 275px;
}

.ctrl-cof-tonic-distance-9 {
  /*a*/
  top: 240px;
  left: 375px;
}

.ctrl-cof-tonic-distance-9-m {
  /*a*/
  top: -60px;
  left: 200px;
}

.ctrl-cof-tonic-distance-9-m-aeo {
  top: 540px;
  left: 200px;
}

.ctrl-cof-tonic-distance-9-m-lyd {
  /*a*/
  top: -60px;
  left: 200px;
}

.ctrl-cof-tonic-distance-9-m-mix {
  /*a*/
  top: -60px;
  left: 200px;
}

.ctrl-cof-tonic-distance-9-dim {
  /*a*/
  top: 190px;
  left: 112px;
}

.ctrl-cof-tonic-distance-10 {
  /*bb*/
  top: 140px;
  left: 26px;
}

.ctrl-cof-tonic-distance-10-m {
  /*bb*/
  top: 491px;
  left: 113px;
}

.ctrl-cof-tonic-distance-10-m-aeo {
  top: -10px;
  left: 288px;
}

.ctrl-cof-tonic-distance-10-m-dor {
  /*bb*/
  top: 190px;
  left: 288px;
}

.ctrl-cof-tonic-distance-10-dim {
  /*bb*/
  top: 290px;
  left: 288px;
}

.ctrl-cof-tonic-distance-11 {
  /*b*/
  top: 390px;
  left: 288px;
}

.ctrl-cof-tonic-distance-11-m {
  /*b*/
  top: 40px;
  left: 375px;
}

.ctrl-cof-tonic-distance-11-m-aeo {
  top: 440px;
  left: 26px;
}

.ctrl-cof-tonic-distance-11-m-lyd {
  /*b*/
  top: 40px;
  left: 375px;
}

.ctrl-cof-tonic-distance-11-dim {
  /*bdim*/
  top: 140px;
  left: 200px;
}

.ctrl-note {
  opacity: 0.3;
  color: #888;
  text-align: center;
  font-size: 30px;
  font-family: 'Arial';
  border-radius: 50%;
  border: 10px solid;
  width: 100px;
  height: 100px;
  padding-top: 10px;
  position: absolute;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent; /* TTAP: custom :active is the feedback */
}

/* TTAP: touch press feedback for the clickable note-wheel circles — :hover never
   fires on touch, so :active supplies the press cue (resting 0.3 -> 0.6 pressed;
   JS-selected is .ctrl-note-active at 1). Layout-neutral — opacity only. */
.ctrl-note:active {
  opacity: 0.6;
}

.ctrl-note-inventory {
  opacity: 0.3;
/*    transform: rotate(90deg);*/
}

.ctrl-note-active {
  font-size: 32px;
  opacity: 1;
/*    transform: rotate(90deg);*/
}

.ctrl-note-scale-index-0 {
  top: 140px;
  left: 100px;
}

.ctrl-note-scale-index-1 {
  top: 53px;
  left: 151px;
}

.ctrl-note-scale-index-2 {
  top: 140px;
  left: 200px;
}

.ctrl-note-scale-index-3 {
  top: 53px;
  left: 251px;
}

.ctrl-note-scale-index-4 {
  top: 140px;
  left: 300px;
}

.ctrl-note-scale-index-5 {
  top: 226px;
  left: 251px;
}

.ctrl-note-scale-index-6 {
  top: 226px;
  left: 151px;
}

.ctrl-note-tonic-distance-1-ion {
  /*db*/
  top: 53px;
  left: 51px;
}

.ctrl-note-tonic-distance-1-lyd {
  /*db*/
  top: 53px;
  left: 51px;
}

.ctrl-note-tonic-distance-1-mix {
  /*db*/
  top: 53px;
  left: 51px;
}

.ctrl-note-tonic-distance-1-aeo {
  /*db*/
  top: 53px;
  left: 51px;
}

.ctrl-note-tonic-distance-1-dor {
  /*db*/
  top: 53px;
  left: 51px;
}

.ctrl-note-tonic-distance-1-har {
  /*bb*/
  top: 53px;
  left: 51px;
}

.ctrl-note-tonic-distance-2-phr {
  /*d*/
  top: -34px;
  left: 200px;
}

.ctrl-note-tonic-distance-3-ion {
  /*eb*/
  top: -34px;
  left: 200px;
}

.ctrl-note-tonic-distance-3-lyd {
  /*eb*/
  top: -34px;
  left: 200px;
}

.ctrl-note-tonic-distance-3-mix {
  /*eb*/
  top: -34px;
  left: 200px;
}

.ctrl-note-tonic-distance-4-dor {
  /*e*/
  top: -34px;
  left: 200px;
}

.ctrl-note-tonic-distance-4-aeo {
  /*e*/
  top: -34px;
  left: 200px;
}

.ctrl-note-tonic-distance-4-har {
  /*db*/
  top: -34px;
  left: 200px;
}

.ctrl-note-tonic-distance-4-phr {
  /*e*/
  top: -34px;
  left: 200px;
}

.ctrl-note-tonic-distance-5-lyd {
  /*f*/
  top: -34px;
  left: 200px;
}

.ctrl-note-tonic-distance-6-ion {
  /*f#*/
  top: 53px;
  left: 351px;
}

.ctrl-note-tonic-distance-6-mix {
  /*f#*/
  top: 53px;
  left: 351px;
}

.ctrl-note-tonic-distance-6-aeo {
  /*f#*/
  top: 53px;
  left: 351px;
}

.ctrl-note-tonic-distance-6-dor {
  /*f#*/
  top: 53px;
  left: 351px;
}

.ctrl-note-tonic-distance-6-phr {
  /*f#*/
  top: 53px;
  left: 351px;
}

.ctrl-note-tonic-distance-6-har {
  /*eb*/
  top: 53px;
  left: 351px;
}

.ctrl-note-tonic-distance-7-m {
  /*g loc*/
  top: 226px;
  left: 51px;
}

.ctrl-note-tonic-distance-8-ion {
  /*ab*/
  top: 226px;
  left: 351px;
}

.ctrl-note-tonic-distance-8-mix {
  /*ab*/
  top: 226px;
  left: 351px;
}

.ctrl-note-tonic-distance-8-lyd {
  /*ab*/
  top: 226px;
  left: 351px;
}

.ctrl-note-tonic-distance-8-dor {
  /*ab*/
  top: 226px;
  left: 351px;
}

.ctrl-note-tonic-distance-9-aeo {
  /*a*/
  top: 313px;
  left: 200px;
}

.ctrl-note-tonic-distance-9-phr {
  /*a*/
  top: 313px;
  left: 200px;
}

.ctrl-note-tonic-distance-9-har {
  /*f#*/
  top: 313px;
  left: 200px;
}

.ctrl-note-tonic-distance-10-ion {
  /*bb*/
  top: 313px;
  left: 200px;
}

.ctrl-note-tonic-distance-10-lyd {
  /*bb*/
  top: 313px;
  left: 200px;
}

.ctrl-note-tonic-distance-10-har {
  /*g*/
  top: 313px;
  left: 200px;
}

.ctrl-note-tonic-distance-11-mix {
  /*b*/
  top: 226px;
  left: 51px;
}

.ctrl-note-tonic-distance-11-aeo {
  /*b*/
  top: 226px;
  left: 51px;
}

.ctrl-note-tonic-distance-11-dor {
  /*b*/
  top: 226px;
  left: 51px;
}

.ctrl-note-tonic-distance-11-phr {
  /*b*/
  top: 226px;
  left: 51px;
}
#prog-view {
/*  position: absolute;

  bottom: 650px;
  left: 380px;*/
  margin-top: 200px;
  margin-left: -200px;
  transform: scale(0.8);
}

#ctrl-prog {

}

#prog-empty {
  margin-top: -180px;
  padding-left: 280px;
/*  padding-right: 100px;*/
  font-size: 24px;
}

#prog-empty strong {
  color: #eee;
}

#prog-empty div.mini {
  color: #888 !important;
  font-size: 14px;
/*  margin-top: -10px;*/
}

.ctrl-prog-chord {
  position: absolute;
  width: 100px;
  height: 100px;

  opacity: 0.3;

  border: 6px solid;
  border-radius: 50%;

  padding-top: 15px;

  background-color: #111;
  color: #333333;
  text-align: center;
  font-size: 30px;
  font-family: Arial;
}

.ctrl-prog-chord-inv {
  font-size: 12px;
}

.ctrl-prog-chord-sup {
  font-size: 12px;
}

.ctrl-prog-chord-scale {
  opacity: 1;
}

.ctrl-prog-container {
  margin-left: 120px;
  float: left;
  position: relative;
}

.ctrl-prog-chord-major7 {
  top: -73px;
}

.ctrl-prog-1st-down {
  margin-left: 94px;
}

.ctrl-prog-2nd-up {
  margin-top: -20px;
  margin-left: 110px;
}

.ctrl-prog-2nd-down {
  margin-top: 20px;
  margin-left: 110px;
}

.ctrl-prog-3rd-up {
  margin-top: -20px;
  margin-left: 70px;
}

.ctrl-prog-3rd-down {
  margin-top: 20px;
  margin-left: 70px;
}

.ctrl-prog-5th-up {
  margin-top: -81px;
  margin-left: 48px;
}

.ctrl-prog-5th-down {
  margin-top: 81px;
  margin-left: 48px;
}

.ctrl-prog-tiny {
  min-height: 100px;
}

.ctrl-prog-chord-tiny {
  position: absolute;
  width: 30px;
  height: 30px;

  opacity: 1;

  border: 2px solid;
  border-radius: 50%;

  padding-top: 5px;

  background-color: #000000;
  color: #333333;
  text-align: center;
  font-size: 10px;
}

.ctrl-prog-container-tiny {
  margin-left: 33px;
  float: left;
  position: relative;
}

.ctrl-prog-chord-major7-tiny {
  top: -18px;
}

.ctrl-prog-1st-down-tiny {
  margin-left: 30px;
}

.ctrl-prog-2nd-up-tiny {
  margin-top: -6px;
  margin-left: 32px;
}

.ctrl-prog-2nd-down-tiny {
  margin-top: 6px;
  margin-left: 32px;
}

.ctrl-prog-3rd-up-tiny {
  margin-top: -6px;
  margin-left: 20px;
}

.ctrl-prog-3rd-down-tiny {
  margin-top: 6px;
  margin-left: 20px;
}

.ctrl-prog-5th-up-tiny {
  margin-top: -24px;
  margin-left: 15px;
}

.ctrl-prog-5th-down-tiny {
  margin-top: 24px;
  margin-left: 15px;
}
#scale-view {
/*  margin-top: 30px;*/
}

#ctrl-scale {
  position: relative;
  width: 500px;
  height: 500px;

  transform: scale(0.8) rotate(-90deg);
}

/* WFIT: scale-to-fit on narrow columns (see ctrl-cof.css for the full rationale).
   The scale/note wheel is a fixed 500x500 canvas, additionally rotated -90deg. Two
   reasons this uses `zoom` rather than the usual `transform: scale()` + top-left
   origin: (1) a transform leaves the layout box at 500px so the column still
   overflows on a phone — `zoom` collapses the box so it genuinely fits; (2) the
   wheel's -90deg rotation must keep its centre origin, but a top-left scale origin
   would swing the rotated canvas off-screen. `zoom` shrinks the box while the
   transform keeps only the rotation, so the wheel stays put and just gets smaller.
   --wfit = min(0.8, columnWidth/500) is set on the stable #scale-view container by
   the ResizeObserver in show.html.erb and inherited here. Capped at the 0.8 design
   scale. Desktop (lg+) keeps the exact `transform: scale(0.8) rotate(-90deg)` above. */
@media (max-width: 991.98px) {
  #ctrl-scale {
    transform: rotate(-90deg);
    zoom: var(--wfit, 0.8);
  }
}

.note-octave-0 {
  opacity: 0.5 !important;
  transform: rotate(90deg) scale(1.6) !important;
}

.note-octave-1 {
  opacity: 0.5 !important;
  transform: rotate(90deg) scale(1.6) !important;
}

.note-octave-2 {
  opacity: 0.9 !important;
  transform: rotate(90deg) scale(1.4) !important;
}

.note-octave-3 {
  opacity: 0.7 !important;
  transform: rotate(90deg) scale(1.2) !important;
}

.note-octave-4 {
/*  width: 100px !important;
  height: 100px !important;*/
}

.note-octave-5 {
  opacity: 0.7 !important;
  transform: rotate(90deg) scale(0.8) !important;
}

.note-octave-6 {
  transform: rotate(90deg) scale(0.5) !important;
}

.mubee-name {
  position: absolute;
  top: -50px;
  left: 12px;
  font-size: 26px;
}

.mubee-level {
  position: absolute;
  top: -65px;
  left: 12px;
}

.mubee-chords {
  position: absolute;
  top: 0px;
  left: 12px;
}


/*https://www.florin-pop.com/blog/2019/03/css-pulse-effect/*/
.mubee-circle-small {
/*  position: absolute;
  top: 30px;
  left: 12px;*/

  width: 20px;
  height: 20px;
  border: 11px solid;
  border-radius: 30px;

  opacity: 0.2;
}

.mubee-small-active {
    width: 20px;
  height: 20px;
  opacity: 1;
}

.mubee-circle {
  position: absolute;
  top: 26px;
  left: 13px;

  width: 40px;
  height: 40px;
  border: 10px solid;
  border-radius: 30px;

  opacity: 0.2;
}

.mubee-pulse-caption {
/*  position: absolute;
  top: 0px;
  right: -100px;*/
}

.mubee-pulse {
  position: absolute;
  top: 18px;
  left: 0px;

  width: 60px;
  height: 60px;
  border: 10px solid;
  border-radius: 30px;

  z-index: 10000;
/*  background: #fff;*/
  border-radius: 50%;
  opacity: 0;
/*  margin: 10px;
  height: 20px;
  width: 20px;*/

/*  box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);*/
  transform: scale(7.5);
  animation: ping 4s;
  animation-timing-function: ease-out;
}

.mubee-active {
  top: 16px;
  left: 2px;
  width: 60px;
  height: 60px;
  opacity: 1 !important;
}

@keyframes ping {
  0% {
    opacity: 1;
    transform: scale(1);
    border-width: 20px;
/*    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);*/
  }

  50% {
    transform: scale(7.5);
/*        opacity: 1;*/
        border-width: 0.1px;
/*    transform: scale(5);*/
/*    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);*/
  }

  80% {
    opacity: 0;
        border-width: 1px;
  /*      opacity: 1;*/
/*    transform: scale(5);*/
/*    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);*/
  }

  100% {
    transform: scale(7.5);
    border-width: 1px;
    opacity: 0;
/*    border-color: #fff;*/
/*    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);*/
  }
}


.mubee {
  z-index: 10000;
  position: relative;
  width: 50px;
  height: 50px;
}

.mubee-offset-01-1 {
  position: absolute;
  left: 14px;
  top: 35px;
}

.mubee-offset-0-11 {
  position: absolute;
  right: -3px;
  top: 35px;
}

.mubee-offset--110 {
  position: absolute;
  right: 11px;
  top: 27px;
}

.mubee-offset-1-10 {
  position: absolute;
right: 1px;
    bottom: -15px;
}

.mubee-offset--101 {
  position: relative;
  left: 28px;
  top: 26px;
}

.mubee-offset-10-1 {
  position: relative;
  left: 16px;
  bottom: -42px;
}

.mubee-border-  {
  color: #333333;
}

.mubee-border-0  {
  color: #77ff00;
}

.mubee-border-1 {
  color: #00ff00;
}

.mubee-border-2 {
  color: #00ff77;
}

.mubee-border-3 {
  color: #00ffff;
}

.mubee-border-4 {
  color: #0077ff;
}

.mubee-border-5 {
  color: #0000ff;
}

.mubee-border-6 {
  color: #7700ff;
}

.mubee-border-7 {
  color: #ff00ff;
}

.mubee-border-8 {
  color: #ff0077;
}

.mubee-border-9 {
  color: #ff0000;
}

.mubee-border-10 {
  color: #ff7700;
}

.mubee-border-11 {
  color: #ffff00;
}

.mubee-background-  {
  background-color: #333333;
}

.mubee-background-0  {
  background-color: #77ff00;
}

.mubee-background-1 {
  background-color: #00ff00;
}

.mubee-background-2 {
  background-color: #00ff77;
}

.mubee-background-3 {
  background-color: #00ffff;
}

.mubee-background-4 {
  background-color: #0077ff;
}

.mubee-background-5 {
  background-color: #0000ff;
}

.mubee-background-6 {
  background-color: #7700ff;
}

.mubee-background-7 {
  background-color: #ff00ff;
}

.mubee-background-8 {
  background-color: #ff0077;
}

.mubee-background-9 {
  background-color: #ff0000;
}

.mubee-background-10 {
  background-color: #ff7700;
}

.mubee-background-11 {
  background-color: #ffff00;
}


#sheet-view {
  position: relative;
 /* top: 300px;
  right: 300px;
  margin-top: 300px;
  margin-left: 30px;
  width: 100px;*/
  margin-top: 100px;
  margin-left: 50px;
  padding-top: 15px;

}

.ctrl-sheet-lines {
/*  padding-top: 100px;*/
  width: 300px;
}

.ctrl-sheet-line {
  border-top: 3px solid #333333;
  height: 27px;
}

.ctrl-sheet-blank-line {
  border-top: 3px solid #111;
  height: 27px;
}

.ctrl-sheet-note {
  position: absolute;
  left: 120px;

  font-family: FreeSerif;
  font-size: 130px;
/*  text-align: right;*/
}

.ctrl-sheet-note-outside {
  left: 95px;
}

.ctrl-sheet-note-prefix {
  font-size: 60px;
}

/*factor 27*/

.ctrl-sheet-note-pos-35 {
  top: 230px;
}

.ctrl-sheet-note-pos-36 {
  top: 216px;
}

.ctrl-sheet-note-pos-38 {
  top: 203px;
}

.ctrl-sheet-note-pos-40 {
  top: 189px;
}

.ctrl-sheet-note-pos-41 {
  top: 176px;
}

.ctrl-sheet-note-pos-43 {
  top: 162px;
}

.ctrl-sheet-note-pos-45 {
  top: 149px;
}

.ctrl-sheet-note-pos-47 {
  top: 135px;
}

.ctrl-sheet-note-pos-48 {
  top: 122px;
}

.ctrl-sheet-note-pos-50 {
  top: 108px;
}

.ctrl-sheet-note-pos-52 {
  top: 95px;
}

.ctrl-sheet-note-pos-53 {
  top: 81px;
}

.ctrl-sheet-note-pos-55 {
  top: 68px;
}

.ctrl-sheet-note-pos-57 {
  top: 54px;
}

.ctrl-sheet-note-pos-59 {
  top: 41px;
}

.ctrl-sheet-note-pos-60 {
  top: 27px;
}

.ctrl-sheet-note-pos-62 {
  top: 14px;
}

.ctrl-sheet-note-pos-64 {
  top: 0px;
}

.ctrl-sheet-note-pos-65 {
  top: -14px;
}

.ctrl-sheet-note-pos-67 {
  top: -27px;
}

.ctrl-sheet-note-pos-69 {
  top: -41px;
}

.ctrl-sheet-note-pos-71 {
  top: -54px;
}

.ctrl-sheet-note-pos-72 {
  top: -68px;
}

.ctrl-sheet-note-pos-74 {
  top: -81px;
}

.ctrl-sheet-note-pos-76 {
  top: -95px;
}

.ctrl-sheet-note-pos-77 {
  top: -108px;
}

.ctrl-sheet-note-pos-79 {
  top: -122px;
}

.ctrl-sheet-note-pos-81 {
  top: -135px;
}

.ctrl-sheet-note-pos-83 {
  top: -149px;
}

.ctrl-sheet-note-pos-84 {
  top: -162px;
}

.ctrl-sheet-note-pos-86 {
  top: -176px;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

@font-face {
   font-family: 'FreeSerif';
   src: url(/assets/FreeSerif-4aeK-e410fa2e9a3379847a798f7e9472e29eeb5f438e1c5f41e20732ba2af875acfc.ttf)
}

body {
  font-family: Arial;
  background-color: #111 !important;
  color: #aaa !important;
  /*overflow: hidden;*/
  overflow-y: scroll;
  box-sizing: border-box !important;
}

/* NOVF: horizontal-overflow guard. The page was overflowing ~338px at a 555px
   viewport (and ~128px even on a 1658px desktop) from fixed widths/left-margins.
   Removing those offenders above is the real fix; this clamps anything still wider
   than the viewport so a phone never gets a horizontal scrollbar. Keyboard scroll
   is intentionally contained by KSCR's .keyboard-scroll, not affected here. */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

img {
  max-width: 100%;
  height: auto;
}

input {
  background-color: #111 !important;
  color: #eee !important;
  border-color: #333 !important;
  font-weight: bold;
}

.input-group-text {
  background-color: #222 !important;
  color: #aaa !important;
  border-color: #333 !important;
}

.route-active {
  font-weight: bold;
  color: #33ff33 !important;
}

.ctrl-routing {
  font-family: Arial;
  font-size: 20px;
  border: 1px solid;
/*  margin-left: 100px;*/
}

.ctrl-composer {
  font-family: Arial;
  font-size: 20px;
  border: 2px solid;
  /* NOVF: dropped margin-left:100px — pushed content past the viewport edge. */
}

/*#a-notes {
  font-family: Arial;
  font-size: 20px;
  border: 2px solid;
}*/

tr, th {
  border-bottom: 1px solid;
}

body {
  background-color: #111;
  color: #aaaaaa;
}

#playback {
  border: 2px;
  width: 70px;
  font-size: 30px;
  font-family: Arial;
  color: #aaaaaa;
}

#chord-view {
/*  margin-top: 30px;*/
  /* NOVF: dropped min-width:500px + margin-left:100px — the two biggest overflow
     offenders (the chord readout extended ~128px past a 1658px desktop and 338px
     past a 555px viewport). The fluid type below keeps it readable without a fixed width. */
  font-size: clamp(32px, 8vw, 50px); /* FLUI: fluid type; desktop max kept at 50px */
  font-family: Arial;
  color: #3333ff;
}

#notes {
  width: 100%;
  position: relative;

  margin-top: 50px;
}

.slice {
  height: 60px;
}

.note {
  float: right;
  width: 8%;
  height: 60px;
  font-size: 30px;
  font-family: Arial;
  color: #aaaaaa;
  cursor: pointer;
  text-align: center;
}

.note-active {
  font-size: 40px;
  font-weight: bold;
  color: #000000;
}

.note-active-ack {
  font-size: 40px;
  font-weight: bold;
  color: #33ff33 !important;
}

.note-inactive {
  font-size: 30px;
  font-weight: bold;
  color: #ff3333 !important;
}

.note-play {
  font-size: 40px;
  font-weight: bold;
  color: #ff9900 !important;
}

.note-chord-active {
  font-size: 40px;
  font-weight: bold;
  color: #3333ff !important;
}

#keyboard {
  margin-top: 50px;
  /* NOVF: dropped margin-left:150px (dead selector, but the rule still pushed layout math). */
  font-size: 30px;
  font-family: Arial;
}

/* KSCR: keyboard horizontal scroll container. The 88-key piano (#klaviatur-view)
   is laid out as seven floated, fixed-pixel .klav-oct blocks (≈329px each, ≈1930px
   in total — see the width pin below), which can never fit a phone. Wrapping the
   piano in .keyboard-scroll (added around the klaviatur_view partial in
   show.html.erb) makes it scroll/swipe horizontally inside its column instead of
   forcing the whole page wide. The inner #klaviatur-view is pinned to its full
   natural width so the floated octaves stay on a single row — a container narrower
   than the float total would otherwise wrap them onto two lines. overflow-x:auto
   only shows a scrollbar when the viewport is narrower than the keyboard, so the
   keys render in their existing positions on desktop; the bracketed scroll just
   contains the overflow the page used to spill (interim measure — a WFIT-style
   scale-to-fit could supersede it later). NOTE: #keyboard above is a dead selector
   (no element bears that id; the live keyboard root is #klaviatur-view) — the
   pixel-margin cleanup it implies is NOVF's; KSCR only adds the scroll behaviour. */
.keyboard-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#klaviatur-view {
  width: 1950px; /* ≈ sum of the seven floated .klav-oct advances (≈1930px) + slack, so they never wrap */
}

.klav-oct {
  position: relative;
/*  border: 1px dashed;*/
  width: 329px;
  height: 294px;
  float: left;
}

#klav-oct-6 {
  width: 190px;
}

#klav-oct-0 {
 margin-left: -234px;
}

.klav-key {
  position: absolute;
  height: 294px;
  width: 51px;
  border: 2px solid #000;
  z-index: 30;
  background-color: #fff;
  top: 2px;
  cursor: pointer;
}

.klav-key-0 {
  left: 0px;
}

.klav-key-1 {
  z-index: 100;
  background-color: #000;
  height: 204px;
  width: 29px;
  left: 30px;
}

.klav-key-2 {
  left: 47px;
}

.klav-key-3 {
  z-index: 100;
  background-color: #000;
  height: 204px;
  width: 29px;
  left: 86px;
}

.klav-key-4 {
  left: 94px;
}

.klav-key-5 {
  left: 141px;
}

.klav-key-6 {
  z-index: 100;
  background-color: #000;
  height: 204px;
  width: 29px;
  left: 169px;
}

.klav-key-7 {
  left: 188px;
}

.klav-key-8 {
  z-index: 100;
  background-color: #000;
  height: 204px;
  width: 29px;
  left: 226px;
}

.klav-key-9 {
  left: 235px;
}

.klav-key-10 {
  z-index: 100;
  background-color: #000;
  height: 204px;
  width: 29px;
  left: 276px;
}

.klav-key-11 {
  left: 282px;
}

.klav-key-active {
  background-color: #000000;
}

.klav-key-active-0 {
  background-color: #7fff00;
  z-index: 50;
}

.klav-key-active-1 {
  background-color: #00ff00;
  z-index: 150;
}

.klav-key-active-2 {
  background-color: #00ff7f;
  z-index: 50;
}

.klav-key-active-3 {
  background-color: #00ffff;
  z-index: 150;
}

.klav-key-active-4 {
  background-color: #007fff;
  z-index: 50;
}

.klav-key-active-5 {
  background-color: #0000ff;
  z-index: 50;
}

.klav-key-active-6 {
  background-color: #7f00ff;
  z-index: 150;
}

.klav-key-active-7 {
  background-color: #ff00ff;
  z-index: 50;
}

.klav-key-active-8 {
  background-color: #ff007f;
  z-index: 150;
}

.klav-key-active-9 {
  background-color: #ff0000;
  z-index: 50;
}

.klav-key-active-10 {
  background-color: #ff7f00;
  z-index: 150;
}

.klav-key-active-11 {
  background-color: #ffff00;
  z-index: 50;
}


.klav-key-active-ack {
  background-color: #33ff33 !important;
}

.klav-key-inactive {
  background-color: #ff3333 !important;
}

.klav-key-play {
  background-color: #ff9900 !important;
}


.note_index_0 {
  color: #77ff00;
}

.note_index_1 {
  color: #00ff00;
}

.note_index_2 {
  color: #00ff77;
}

.note_index_3 {
  color: #00ffff;
}

.note_index_4 {
  color: #0077ff;
}

.note_index_5 {
  color: #0000ff;
}

.note_index_6 {
  color: #7700ff;
}

.note_index_7 {
  color: #ff00ff;
}

.note_index_8 {
  color: #ff0077;
}

.note_index_9 {
  color: #ff0000;
}

.note_index_10 {
  color: #ff7700;
}

.note_index_11 {
  color: #ffff00;
}


#key-view {
/*  float: right;*/
/*  margin-top: 30px;*/
  /* NOVF: dropped margin-left:10px — part of the cumulative horizontal push. */
}

.ctrl-key {
  margin-bottom: 0px;
  padding-left: 30px;
  font-size: clamp(28px, 9vw, 60px); /* FLUI: fluid type; desktop max kept at 60px */
  font-weight: 600;
  font-family: 'Arial';
}

.ctrl-key-detect {
  font-size: 30px;
}

.ctrl-chord-roman-main {
  float: left;
  padding-right: 5px;
  font-size: clamp(32px, 8vw, 50px); /* FLUI: fluid type; desktop max kept at 50px */
  font-weight: 600;
  font-family: "Times New Roman";
}

.ctrl-chord-roman-sup {
  float: left;
  font-size: 30px;
}

.ctrl-chord-name-main {
  float: left;
  padding-right: 5px;
  font-size: clamp(32px, 8vw, 60px); /* FLUI: fluid type; desktop max kept at 60px */
  font-weight: 600;
  font-family: 'Arial';
}

.ctrl-chord-name-inversion {
  float: left;
  padding-right: 5px;
  font-size: clamp(32px, 8vw, 60px); /* FLUI: fluid type; desktop max kept at 60px */
  font-weight: 600;
  font-family: 'Arial';
}

.ctrl-chord-name-sup {
  float: left;
  font-size: 30px;
}

#ctrl-sheet {
  margin-top: -100px;
}

/* Tuner */
/*html {
  height: 100%;
}*/

.button {
  margin-top: 20px;
  border: 2px solid #333;
  border-radius: 10px;
  width: 100px;
  height: 100px;
  padding: 10px;
  cursor: pointer;
}

#tuner {
  width: 100px;
  height: 100px;
}

#tuner-mic {
  margin-left: 3px;
  width: 70px;
  height: 70px;
  filter: invert(40%);
}

#tuner-mic:hover {
  filter: invert(60%);
}

#tuner-mic:active {
  filter: invert(80%);
}

#tuner-mic-mute {
  margin-left: 3px;
  width: 70px;
  height: 70px;
  filter: invert(40%);
}

#tuner-mic-mute:hover {
  filter: invert(60%);
}

#tuner-mic-mute:active {
  filter: invert(80%);
}

#tuner-settings {
  margin-top: 20px;
  border: 2px solid #333;
  border-radius: 10px;
  padding: 10px;
}

#tuner-meter {
  position: relative;
  margin-top: 20px;
  border: 2px solid #333;
  border-radius: 10px;
  padding: 10px;
}

#tuner-spectrum {
  position: relative;
  margin-top: 20px;
  border: 2px solid #333;
  border-radius: 10px;
  padding: 10px;
}

#midi-range {
  color: #eee !important;
}

#tone-generator-play {
  cursor: pointer;
}

/* KICN: the key-detection toggle shows the key glyph (a treble-clef PNG) tinted to the
   current key colour. #auto-key-img is masked by the treble-clef PNG and filled with the
   live key colour (--key-color, set by KeyView.updateAutoKeyButton), so only the glyph is
   painted and it always carries the key colour — whether or not detection is on. When
   detection is on the glyph pulses (key-detect-active → @keyframes blinker), mirroring how
   #tuner-mic .blink behaves while the mic is live.

   IMPORTANT — the mask image MUST be served same-origin (/images/key.png, shipped in
   public/images). Chrome treats a cross-origin mask image without CORS headers as empty and
   masks the element out entirely, so NO glyph renders: that was the original KICN bug (the
   glyph was masked from the S3 bucket `aself.s3.nl-ams.scw.cloud`, which sends no CORS
   headers, leaving only a black box). The same key.png already ships at public/images, so
   masking from /images/key.png is CORS-clean and the glyph paints in any key colour.
   Longhand (not the `mask` shorthand) so mask-size reliably resolves to contain. */
#auto-key-img {
  margin-top: 1px;
  margin-left: 3px;
  width: 70px;
  height: 70px;
  --key-color: #666;                       /* neutral grey, pre-JS default */
  background-color: var(--key-color);      /* the glyph is painted in the current key colour */
  -webkit-mask-image: url(/images/key.png);
          mask-image: url(/images/key.png);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  /* KTOG: give the toggle an unmistakable resting state. Detection OFF = a static, dimmed
     glyph; detection ON = full-opacity key colour that pulses (.key-detect-active below).
     Before KTOG the only difference between on and off was the 2 s pulse, which is too
     subtle to read at a glance — the button looked the same whether or not detection was
     enabled. The dim-vs-bright resting contrast makes the state obvious without the pulse. */
  opacity: 0.4;
  transition: opacity 0.15s ease;
}

#auto-key-img:hover {
  opacity: 0.8;
}

#auto-key-img:active {
  opacity: 0.6;
}

/* KICN: key detection on → pulse the glyph (reuses the @keyframes blinker opacity pulse
   defined below), mirroring how #tuner-mic blinks while the mic is active.
   KTOG: also pin opacity to 1 so the on state is full-bright (the blinker keyframe only
   dips to 0.2 at 50%, so the pulse runs 1↔0.2) and clearly distinct from the dim off state. */
#auto-key-img.key-detect-active {
  opacity: 1;
  animation: blinker 2s linear infinite;
}

#reset-img {
  margin-top: 1px;
  margin-left: 3px;
  width: 70px;
  height: 70px;
  filter: invert(40%);
}

#reset-img:hover {
  filter: invert(60%);
}

#reset-img:active {
  filter: invert(80%);
}


#speaker-mute {
  margin-top: 3px;
  margin-left: 5px;
  width: 66px;
  height: 66px;
  filter: invert(40%);
}

#speaker-mute:hover {
  filter: invert(60%);
}

#speaker-mute:active {
  filter: invert(80%);
}

#speaker-on {
  margin-top: 3px;
  margin-left: 5px;
  width: 66px;
  height: 66px;
  filter: invert(40%);
}

#speaker-on:hover {
  filter: invert(60%);
}

#speaker-on:active {
  filter: invert(80%);
}

.blink {
  filter: invert(80%) !important;
  animation: blinker 2s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0.2;
  }
}

/* TTAP: touch feedback on the icon control buttons and piano keys. Each icon
   button below already defines a custom :active filter (the press cue), and the
   piano keys flash their JS-driven .klav-key-active-* colour on play; the default
   mobile grey tap-highlight box would flash on top of that custom feedback, so we
   suppress it only on the elements that already give their own feedback. Elements
   without a custom :active (e.g. #tone-generator-play) keep the default highlight,
   and .note keeps its existing transparent setting. (TTAP, mobile theme.) */
#tuner-mic, #tuner-mic-mute, #reset-img, #speaker-mute, #speaker-on,
#auto-key-img, .klav-key {
  -webkit-tap-highlight-color: transparent;
}

#tuner-view {
/*  margin-top: 200px;*/
/*  width: 300px;
  height: 300px;*/
  position: relative;
}

#tuner-note {
  height: 40px;
  font-size: 32px;
  position: absolute;
  left: 160px;
  top: -4px;
}

#tuner-cents {
  height: 40px;
  font-size: 32px;
  position: absolute;
  left: 160px;
  bottom: -4px;
}

/*body {
  position: fixed;
  font-family: sans-serif;
  color: #2c3e50;
  margin: 0;
  width: 100%;
  height: 100%;
  cursor: default;
  user-select: none;
}*/

.notes {
  position: relative;
  text-align: center;
}

.note {
  font-size: clamp(40px, 12vw, 90px); /* FLUI: fluid type; desktop max kept at 90px */
  font-weight: bold;
  position: relative;
  display: inline-block;
  padding-right: 30px;
  padding-left: 10px;
}

.note.active {
  color: #e74c3c;
}

/*.notes-list {
  overflow: auto;
  overflow: -moz-scrollbars-none;
  white-space: nowrap;
  -ms-overflow-style: none;
  -webkit-mask-image: -webkit-linear-gradient(
    left,
    rgba(255, 255, 255, 0),
    #fff,
    rgba(255, 255, 255, 0)
  );
}

.notes-list::-webkit-scrollbar {
  display: none;
}*/

.note {
  -webkit-tap-highlight-color: transparent;
}

.note span {
  position: absolute;
  right: 0.25em;
  font-size: 40%;
  font-weight: normal;
}

.note-sharp {
  top: 0.3em;
}

.note-octave {
  bottom: 0.3em;
}

.frequency {
  font-size: 24px;
  position: absolute;
  bottom: -233px;
  right: 38%;
}

.frequency span {
  font-size: 50%;
  margin-left: 0.25em;
}

.meter {
  position: relative;
/*  left: 0;
  right: 0;
  bottom: 0%;*/
  width: 350px;
  height: 190px;
  margin-top: 40px;
}

.meter-pointer {
  width: 2px;
  height: 150px;
  background: #444;
  transform: rotate(45deg);
  transform-origin: bottom;
  transition: transform 0.5s;
  position: absolute;
  right: 50%;
}

.meter-dot {
  width: 10px;
  height: 10px;
  background: #444;
  border-radius: 50%;
  position: absolute;
  bottom: 32px;
  right: 50%;
  margin-right: -4px;
}

.meter-scale {
  width: 1px;
  height: 200px;
  transform-origin: bottom;
  transition: transform 0.2s;
  box-sizing: border-box;
  border-top: 10px solid;
  position: absolute;
  right: 50%;
}

.meter-scale-strong {
  width: 2px;
  border-top-width: 20px;
}

.frequency-bars {
  margin-left: 15px;
  margin-top: 5px;
/*  height: 600px;*/
/*  position: fixed;
  bottom: 0;
  z-index: 0;*/
}
/*
@media (max-width: 768px) {
  .meter {
    width: 100%;
  }

  .notes {
    width: 100%;
  }
}*/

.swal-button {
  background: #2c3e50;
}

#swal2-title {
  font-size: 20px;
}

.a4 {
  position: absolute;
  top: 16px;
  left: 16px;
}

.a4 span {
  color: #e74c3c;
}

.auto {
  position: absolute;
  top: 16px;
  right: 16px;
}

/* MMOD: focus / "mobile" mode. The #mmod-toggle button (a FOCUS tile beside LAT in the
   control row) adds .mmod-focus to <body>; every column that is NOT part of the curated
   set carries .mmod-hide and is dropped, leaving the control buttons, the key + chord
   readout, the tuner spectrum, the sheet timeline and the progression view. Circle of
   fifths, keyboard, scale wheel, tuner meter, tuner settings and the desktop dev surfaces
   (composer log, settings dump, spacer) are the .mmod-hide set. Viewport-agnostic on
   purpose so it can be exercised on desktop too, not only on phones; session-only, so the
   mode resets on reload (persisting it via an analyzer setting is a follow-up). */
body.mmod-focus .mmod-hide {
  display: none !important;
}

#mmod-toggle-label {
  margin-top: 30px;
  text-align: center;
  font-family: Arial;
  font-size: 20px;
  color: #aaa;
}

/* MMOD: active-state cue while focus mode is on (mirrors the green route-active accent). */
body.mmod-focus #mmod-toggle {
  border-color: #33ff33;
}

body.mmod-focus #mmod-toggle #mmod-toggle-label {
  color: #33ff33;
}