.gt-tuner { max-width: 720px; margin: 16px auto; }
.gt-title { font-size: 18px; font-weight: 700; margin-bottom: 12px; }

.gt-row { display: flex; gap: 12px; flex-wrap: wrap; }
.gt-main { align-items: center; justify-content: space-between; }

.gt-note-name { font-size: 42px; font-weight: 800; line-height: 1; }
.gt-freq { opacity: .75; margin-top: 6px; }

.gt-target-label { font-size: 12px; opacity: .7; }
.gt-target-value { font-size: 18px; font-weight: 700; margin-top: 4px; }

.gt-meter { margin-top: 14px; }
.gt-meter-bar {
  height: 12px; border-radius: 999px;
  background: rgba(0,0,0,.08);
  overflow: hidden;
}
.gt-meter-fill { height: 100%; width: 50%; transform-origin: center; }
.gt-meter-text { margin-top: 10px; font-weight: 700; }
.gt-hint { margin-top: 6px; font-size: 13px; opacity: .75; }

.gt-actions { display: flex; gap: 10px; margin-top: 14px; }
.gt-btn {
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  background: #fff;
}
.gt-btn:disabled { opacity: .55; cursor: not-allowed; }
.gt-primary { border-color: rgba(0,0,0,.2); font-weight: 700; }

.gt-faq { margin-top: 12px; }
.gt-faq summary { cursor: pointer; font-weight: 700; }


.gt-headstock-wrap{
  display:flex;
  justify-content:center;
  margin: 10px 0 14px;
}

.gt-headstock{
  position: relative;
  width: 320px;           /* можно 340, если хочешь крупнее */
  max-width: 100%;
}

.gt-headstock-img{
  width: 100%;
  height: auto;
  display: block;
}

/* Кружки */
.gt-peg{
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  border: none;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

.gt-peg:hover{ background: rgba(0,0,0,.68); }

.gt-peg.is-active{
  background: rgba(0,0,0,.55);
  box-shadow: 0 0 0 3px var(--gt-color, rgba(245,158,11,.9)),
              0 10px 22px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.25);
}

.gt-peg.is-active::after{
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 999px;
  background: radial-gradient(circle, var(--gt-color, rgba(245,158,11,.35)) 0%, transparent 70%);
  pointer-events: none;
}

/* Позиции: слева/справа рядом с колками (в % — адаптивно) */
.gt-peg-l1 { left: -12%; top: 21%; }  /* верхний левый колок */
.gt-peg-l2 { left: -12%; top: 44%; }
.gt-peg-l3 { left: -12%; top: 68%; }

.gt-peg-r1 { left: 112%; top: 21%; } /* верхний правый колок */
.gt-peg-r2 { left: 112%; top: 44%; }
.gt-peg-r3 { left: 112%; top: 68%; }


/* ===== МОБИЛЬНАЯ ВЕРСИЯ ===== */
@media (max-width: 480px){

  /* уменьшаем картинку */
  .gt-headstock{
    width: 210px;
  }

  /* уменьшаем кружки */
  .gt-peg{
    width: 42px;
    height: 42px;
    font-size: 14px;
  }

  /* поджимаем кружки ближе к грифу */
  .gt-peg-l1,
  .gt-peg-l2,
  .gt-peg-l3{
    left: -11%;
  }

  .gt-peg-r1,
  .gt-peg-r2,
  .gt-peg-r3{
    left: 111%;
  }

}

@keyframes gtPulse {
  0%   { transform: translate(-50%, -50%) scale(1); }
  50%  { transform: translate(-50%, -50%) scale(1.08); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
.gt-peg.is-in-tune{
  animation: gtPulse 0.9s ease-in-out infinite;
}

.gt-peg.is-active{
  box-shadow: 0 0 0 3px var(--gt-color, rgba(245,158,11,.9)),
              0 10px 22px rgba(0,0,0,.35);
}


/* Большой “коуч-блок” */
.gt-coach{
  margin-top: 14px;
  padding: 14px;
  border-radius: 5px;
  border: rgba(0,0,0,.12);
  background: rgba(0,0,0,.04);
}

.gt-coach-text{
  font-size: 18px;
  line-height: 1.35;
  font-weight: 500;
}

.gt-coach-btn{
  margin-top: 12px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.15);
  background: #fff;
  font-weight: 800;
  cursor: pointer;
}

/* Главный “баннер” результата */
.gt-banner{
  margin-top: 14px;
  padding: 14px;
  border-radius: 5px;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 500;
  border: rgba(0,0,0,.12);
  background: rgba(255,255,255,.9);
}

.gt-banner.is-good{
  border-color: rgba(22,163,74,.9);
  background: rgba(22,163,74,.10);
}

.gt-banner.is-warn{
  border-color: rgba(245,158,11,.9);
  background: rgba(245,158,11,.12);
}

.gt-banner.is-bad{
  border-color: rgba(220,38,38,.9);
  background: rgba(220,38,38,.10);
}

.gt-banner.is-perfect{
  border-color: rgba(22,163,74,.95);
  background: rgba(22,163,74,.18);
  font-size: 20px;
}

/* Пульсация “в строю” (на кнопке-струне) */
@keyframes gtPulse {
  0%   { transform: translate(-50%, -50%) scale(1); }
  50%  { transform: translate(-50%, -50%) scale(1.08); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
.gt-peg.is-in-tune{ animation: gtPulse 0.9s ease-in-out infinite; }

/* Цвет подсветки струны через --gt-color */
.gt-peg.is-active{
  box-shadow: 0 0 0 3px var(--gt-color, rgba(245,158,11,.9)),
              0 10px 22px rgba(0,0,0,.35);
}