:root{
  color-scheme:dark;
  --bg:#07101a;
  --panel:rgba(7,15,26,.86);
  --line:rgba(100,220,255,.28);
  --cyan:#33e6ff;
  --pink:#ff3fae;
  --green:#58ff9a;
  --text:#ecfbff;
  --muted:#91a9b5;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  min-height:100vh;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    linear-gradient(rgba(2,7,14,.52),rgba(2,7,14,.76)),
    url("soundstreamplugstuner.webp") center/cover fixed no-repeat,
    var(--bg);
  display:grid;
  place-items:center;
  padding:24px;
}
button,select,input{font:inherit}
button,select,input{outline:none}
.tuner{
  width:min(900px,100%);
  padding:clamp(20px,4vw,38px);
  border:1px solid var(--line);
  border-radius:26px;
  background:var(--panel);
  box-shadow:0 20px 80px rgba(0,0,0,.5),0 0 45px rgba(36,210,255,.12),inset 0 0 35px rgba(255,63,174,.05);
  backdrop-filter:blur(18px);
}
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.eyebrow{margin:0 0 6px;color:var(--cyan);font-size:.72rem;font-weight:800;letter-spacing:.2em}
h1{margin:0;font-size:clamp(1.5rem,4vw,2.5rem)}
.icon-btn,.dialog-close{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  background:rgba(255,255,255,.05);color:var(--cyan);cursor:pointer;font-weight:900
}
.controls{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin:24px 0;
}
label{display:grid;gap:7px;color:var(--muted);font-size:.8rem;font-weight:700}
select,input{
  width:100%;
  min-height:44px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(2,9,17,.8);
  color:var(--text);
  padding:0 12px;
}
.inline-control{display:flex;align-items:center;gap:8px}
.inline-control span{color:var(--muted)}
.display{
  padding:24px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(0,0,0,.1));
  text-align:center;
}
.status-row{display:flex;justify-content:center;align-items:center;gap:8px;color:var(--muted);font-size:.82rem}
.status-dot{width:9px;height:9px;border-radius:50%;background:#54636b;box-shadow:0 0 0 4px rgba(255,255,255,.03)}
.status-dot.on{background:var(--green);box-shadow:0 0 14px var(--green)}
.target-label{margin-top:18px;color:var(--muted);font-size:.9rem;min-height:1.3em}
.note{
  margin-top:2px;
  font-size:clamp(5rem,17vw,9rem);
  font-weight:900;
  line-height:.9;
  letter-spacing:-.07em;
  text-shadow:0 0 30px rgba(51,230,255,.35),0 0 55px rgba(255,63,174,.18)
}
.octave{color:var(--pink);font-weight:800;min-height:1.4em}
.frequency{margin-top:6px;font-size:1.2rem;font-variant-numeric:tabular-nums}
.meter{width:min(650px,100%);margin:28px auto 0}
.ticks{display:flex;justify-content:space-between;color:var(--muted);font-size:.7rem}
.meter-track{
  position:relative;height:86px;margin-top:4px;
  border-bottom:3px solid rgba(255,255,255,.12);
  overflow:hidden
}
.center-mark{position:absolute;left:50%;bottom:0;width:2px;height:70px;background:var(--green);box-shadow:0 0 15px var(--green)}
.needle{
  position:absolute;left:50%;bottom:-8px;width:3px;height:78px;
  transform-origin:50% calc(100% + 4px);
  transform:translateX(-50%) rotate(0deg);
  background:linear-gradient(var(--pink),var(--cyan));
  box-shadow:0 0 16px rgba(255,63,174,.75);
  transition:transform .09s linear
}
.cents{margin-top:12px;font-variant-numeric:tabular-nums;color:var(--muted)}
.tuning-state{margin-top:4px;font-size:1.2rem;font-weight:900}
.tuning-state[data-state="in-tune"]{color:var(--green);text-shadow:0 0 12px rgba(88,255,154,.5)}
.tuning-state[data-state="low"]{color:var(--cyan)}
.tuning-state[data-state="high"]{color:var(--pink)}
.string-targets{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:20px}
.string-pill,.chromatic-pill{
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 11px;
  background:rgba(255,255,255,.04);
  color:var(--muted);
  font-size:.78rem
}
.string-pill.active{color:#081117;background:var(--green);border-color:var(--green);box-shadow:0 0 16px rgba(88,255,154,.3)}
.actions{display:flex;justify-content:center;gap:10px;margin-top:20px}
.actions button{
  min-height:46px;padding:0 18px;border-radius:12px;border:1px solid var(--line);
  background:rgba(255,255,255,.05);color:var(--text);cursor:pointer;font-weight:800
}
.actions .primary{background:linear-gradient(135deg,rgba(51,230,255,.23),rgba(255,63,174,.2));border-color:rgba(51,230,255,.55)}
button:disabled{opacity:.45;cursor:not-allowed}
.hint{margin:16px auto 0;text-align:center;color:var(--muted);font-size:.78rem;max-width:650px}
dialog{
  width:min(580px,calc(100% - 30px));
  border:1px solid var(--line);
  border-radius:20px;
  color:var(--text);
  background:#09131f;
  box-shadow:0 20px 80px rgba(0,0,0,.65);
  padding:28px
}
dialog::backdrop{background:rgba(0,0,0,.7);backdrop-filter:blur(5px)}
dialog h2{margin-top:0}
dialog p{color:#c6d5dc;line-height:1.6}
.dialog-close{position:absolute;right:15px;top:15px}
[hidden]{display:none!important}
@media(max-width:780px){
  body{padding:10px;background-attachment:scroll}
  .tuner{padding:18px;border-radius:20px}
  .controls{grid-template-columns:1fr 1fr}
  .display{padding:18px 10px}
  .note{font-size:clamp(5rem,33vw,8rem)}
}
@media(max-width:460px){
  .controls{grid-template-columns:1fr}
  .actions{flex-direction:column}
  .actions button{width:100%}
  .target-label{font-size:.76rem}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important}
}