@import url('/bpm-finder.css');
.tuner-card{margin-top:1rem;padding:clamp(1rem,3vw,1.7rem);border:1px solid var(--line);border-radius:1.3rem;background:var(--panel-strong);box-shadow:var(--shadow)}
.tuner-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}.tuner-toolbar label{font-size:.76rem;font-weight:850;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.tuner-toolbar select{margin-left:.6rem;padding:.7rem .9rem;border:1px solid var(--line);border-radius:.75rem;background:#101c2a;color:var(--text);font:inherit;font-weight:750}
.string-buttons{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0}.string-button{flex:1 1 6rem;min-height:3rem;border:1px solid var(--line);border-radius:.8rem;background:rgba(255,255,255,.04);color:var(--muted);font:inherit;font-weight:800;cursor:pointer}.string-button.active{border-color:var(--cyan);color:var(--text);box-shadow:0 0 0 2px rgba(54,214,255,.12)}.string-button.heard{background:rgba(196,255,89,.12);color:var(--lime)}
.reference-panel{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin:-.25rem 0 .75rem}.reference-label{color:var(--muted);font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.reference-buttons{display:flex;gap:.45rem;flex-wrap:wrap}.reference-button{min-height:2.45rem;padding:.55rem .75rem;border:1px solid var(--line);border-radius:.7rem;background:rgba(54,214,255,.06);color:var(--cyan);font:inherit;font-weight:750;cursor:pointer}.reference-button:hover,.reference-button:focus-visible{border-color:var(--cyan);background:rgba(54,214,255,.12)}
.tuner-display{text-align:center;padding:1.2rem 0}.note-value{display:block;font-size:clamp(4.8rem,19vw,8.5rem);line-height:.9;color:var(--text);letter-spacing:-.06em}.frequency-value{display:block;margin-top:.65rem;color:var(--muted);font-variant-numeric:tabular-nums}.direction{margin:.7rem 0 .25rem;font-size:clamp(1.05rem,3vw,1.35rem);font-weight:850}.direction[data-state=good]{color:var(--lime)}.direction[data-state=flat],.direction[data-state=sharp]{color:var(--cyan)}
.meter{position:relative;height:3.2rem;margin:1rem auto .4rem;max-width:36rem}.meter-track{position:absolute;left:0;right:0;top:1.35rem;height:.35rem;border-radius:99px;background:linear-gradient(90deg,#ff8a77 0%,var(--cyan) 42%,var(--lime) 50%,var(--cyan) 58%,#ff8a77 100%)}.meter-center{position:absolute;left:50%;top:.75rem;width:2px;height:1.6rem;background:#fff}.needle{position:absolute;left:50%;top:.45rem;width:1.1rem;height:1.1rem;margin-left:-.55rem;border-radius:50%;background:#fff;box-shadow:0 0 18px rgba(255,255,255,.55);transition:transform .09s linear}.meter-labels{display:flex;justify-content:space-between;color:var(--muted);font-size:.72rem}
.tuner-actions{display:flex;justify-content:center;gap:.7rem;flex-wrap:wrap;margin-top:1rem}.tuner-actions button{min-width:10rem}.tuning-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}.tuning-box{padding:1rem;border:1px solid var(--line);border-radius:1rem;background:var(--panel-strong)}.tuning-box strong{display:block;margin-bottom:.35rem;font-size:1.2rem}.tuning-box span{color:var(--muted)}
@media(max-width:620px){.tuner-toolbar{align-items:stretch}.tuner-toolbar label,.tuner-toolbar select{display:block;width:100%;margin:.4rem 0 0}.string-button{flex-basis:calc(50% - .5rem)}.reference-panel{align-items:stretch}.reference-label{width:100%}.reference-buttons{display:grid;grid-template-columns:1fr 1fr;width:100%}.tuning-grid{grid-template-columns:1fr}.tuner-actions button{width:100%}}