:root{
  --bg:#08090c;
  --surface:#14161b;
  --surface-2:#1b1e25;
  --surface-3:#232733;
  --line:rgba(255,255,255,.105);
  --line-strong:rgba(255,255,255,.18);
  --txt:#f8f9fb;
  --mut:#858d9a;
  --soft:#c6ccd7;
  --green:#72e4a7;
  --yellow:#ffd66e;
  --red:#ff6678;
  --blue:#8fc8ff;
  --tune:#8fc8ff;
  --tune-rgb:143,200,255;
  --shadow:0 22px 58px rgba(0,0,0,.34);
}

body[data-tune="flat"]{--tune:var(--yellow);--tune-rgb:255,214,110}
body[data-tune="sharp"]{--tune:var(--red);--tune-rgb:255,102,120}
body[data-tune="ok"]{--tune:var(--green);--tune-rgb:114,228,167}
body[data-tune="wrong"]{--tune:var(--red);--tune-rgb:255,102,120}
body[data-tune="quiet"]{--tune:var(--mut);--tune-rgb:133,141,154}

*{box-sizing:border-box}
html,body{
  margin:0;
  width:100%;
  height:100%;
  min-height:100%;
  background:var(--bg);
  overflow:hidden;
  overscroll-behavior:none;
}
body{
  position:fixed;
  inset:0;
  color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Pretendard,"Apple SD Gothic Neo",sans-serif;
  background:
    radial-gradient(circle at 50% -18%,rgba(143,200,255,.18),transparent 38%),
    radial-gradient(circle at 100% 90%,rgba(114,228,167,.12),transparent 35%),
    linear-gradient(180deg,#0b0c10 0%,#08090c 54%,#050608 100%);
  overflow:hidden;
  -webkit-text-size-adjust:100%;
  -webkit-user-select:none;
  user-select:none;
}
button,input,select{font:inherit;-webkit-tap-highlight-color:transparent}
button{border:0;cursor:pointer;color:inherit;touch-action:manipulation}
button:active{transform:scale(.975)}
button:disabled{opacity:.55;cursor:not-allowed}
input,select{-webkit-user-select:auto;user-select:auto;touch-action:manipulation;font-size:16px}

.app{
  width:min(440px,100%);
  height:100svh;
  max-height:100svh;
  margin:0 auto;
  padding:calc(env(safe-area-inset-top) + 10px) 14px calc(env(safe-area-inset-bottom) + 12px);
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow:hidden;
}
@supports(height:100dvh){.app{height:100dvh;max-height:100dvh}}
@media(display-mode:standalone){.app{padding-top:calc(env(safe-area-inset-top) + 8px)}}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:40px;
  flex:0 0 auto;
  padding:0 2px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:20px;
  font-weight:800;
  letter-spacing:-.055em;
}
.mark{
  width:31px;
  height:31px;
  border-radius:10px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.45),transparent 18%),
    linear-gradient(135deg,var(--blue),var(--green));
  box-shadow:0 8px 22px rgba(143,200,255,.18);
}
.status{
  color:var(--soft);
  font-size:12px;
  font-weight:700;
  letter-spacing:-.025em;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  border-radius:999px;
  padding:7px 10px;
  white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

.panel{
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035)),var(--surface);
  border-radius:30px;
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.075);
  backdrop-filter:blur(24px) saturate(1.2);
}

.hero{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  padding:14px;
  gap:12px;
  overflow:hidden;
}
.hero:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 28%,rgba(var(--tune-rgb),.13),transparent 42%),
    linear-gradient(180deg,rgba(255,255,255,.035),transparent 34%);
  pointer-events:none;
}
.readout{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:7px;
  color:var(--soft);
  min-width:0;
}
.pill{
  min-width:0;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(0,0,0,.18);
  border-radius:16px;
  padding:8px 9px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:12px;
  font-weight:760;
  letter-spacing:-.035em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055);
}
.pill:before{
  display:block;
  margin-bottom:2px;
  color:var(--mut);
  font-size:9px;
  font-weight:820;
  letter-spacing:.04em;
}
.pill:nth-child(1):before{content:"INPUT"}
.pill:nth-child(2):before{content:"STRING"}
.pill:nth-child(3):before{content:"PITCH"}

.note-wrap{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  min-height:0;
  overflow:hidden;
  border-radius:28px;
  background:
    radial-gradient(circle at 50% 52%,rgba(var(--tune-rgb),.11),transparent 48%),
    linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.08));
}
.note{
  font-size:clamp(124px,37svh,194px);
  line-height:.82;
  font-weight:900;
  letter-spacing:-.105em;
  margin-left:-.08em;
  text-align:center;
  text-shadow:0 18px 44px rgba(0,0,0,.32),0 0 34px rgba(var(--tune-rgb),.12);
}
.note span{
  font-size:.22em;
  color:var(--mut);
  letter-spacing:-.04em;
  margin-left:4px;
  vertical-align:middle;
}

.meter-area{position:relative;z-index:1;display:grid;gap:7px;min-width:0}
.meter{
  height:52px;
  position:relative;
  overflow:hidden;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.1);
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,transparent 1px 10%),
    linear-gradient(90deg,rgba(255,102,120,.28),rgba(255,214,110,.17) 31%,rgba(114,228,167,.34) 50%,rgba(255,214,110,.17) 69%,rgba(255,102,120,.28));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -12px 28px rgba(0,0,0,.15);
}
.meter:before{
  content:"";
  position:absolute;
  left:50%;
  top:6px;
  bottom:6px;
  width:3px;
  border-radius:999px;
  background:#fff;
  transform:translateX(-50%);
  box-shadow:0 0 18px rgba(255,255,255,.45);
}
.needle{
  position:absolute;
  left:50%;
  top:5px;
  width:6px;
  height:42px;
  border-radius:999px;
  background:var(--txt);
  transform:translateX(-50%);
  transition:transform .11s ease-out,background .11s ease-out;
  box-shadow:0 0 24px rgba(255,255,255,.28),0 8px 18px rgba(0,0,0,.22);
}
.meter-text{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:8px;
  min-width:0;
  padding:6px 8px;
  border:1px solid rgba(var(--tune-rgb),.25);
  border-radius:16px;
  background:
    radial-gradient(circle at 10% 50%,rgba(var(--tune-rgb),.1),transparent 34%),
    rgba(255,255,255,.045);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055);
  overflow:hidden;
  transition:border-color .14s ease,background .14s ease,box-shadow .14s ease;
}
.meter-text:before{
  content:"";
  position:absolute;
  inset:auto auto -16px -18px;
  width:54px;
  height:54px;
  border-radius:999px;
  background:rgba(var(--tune-rgb),1);
  opacity:.08;
  filter:blur(14px);
  pointer-events:none;
}
.cents{
  position:relative;
  min-width:78px;
  padding:5px 8px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(0,0,0,.18);
  color:var(--txt);
  font-size:17px;
  font-weight:830;
  letter-spacing:-.055em;
  white-space:nowrap;
  text-align:center;
  text-shadow:0 0 12px rgba(var(--tune-rgb),.22);
}
.hint{
  position:relative;
  min-width:0;
  color:var(--soft);
  font-size:13px;
  font-weight:730;
  text-align:right;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  letter-spacing:-.035em;
}
.hint:before{
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  margin-right:6px;
  border-radius:999px;
  background:rgba(var(--tune-rgb),1);
  box-shadow:0 0 10px rgba(var(--tune-rgb),.6);
  vertical-align:1px;
}

.strings{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:8px;
  flex:0 0 auto;
}
.string{
  min-height:66px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035));
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:border-color .14s ease,background .14s ease,box-shadow .14s ease,transform .14s ease;
}
.string.active{
  border-color:rgba(143,200,255,.82);
  background:linear-gradient(180deg,rgba(143,200,255,.18),rgba(143,200,255,.08));
  box-shadow:0 8px 22px rgba(143,200,255,.08),inset 0 1px 0 rgba(255,255,255,.12);
}
.string.done{
  border-color:rgba(114,228,167,.72);
  background:linear-gradient(180deg,rgba(114,228,167,.17),rgba(114,228,167,.075));
}
.string.active.done{
  border-color:rgba(114,228,167,.95);
  background:linear-gradient(180deg,rgba(114,228,167,.23),rgba(114,228,167,.1));
}
.string b{display:block;font-size:20px;line-height:1;letter-spacing:-.055em;white-space:nowrap}
.string span{display:block;color:var(--mut);font-size:10px;line-height:1;white-space:nowrap;font-weight:720}

.action-bar{
  display:grid;
  grid-template-columns:1.35fr .9fr;
  gap:10px;
  flex:0 0 auto;
}
.primary,.secondary{
  min-height:60px;
  border-radius:22px;
  font-size:17px;
  font-weight:850;
  letter-spacing:-.04em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 14px 28px rgba(0,0,0,.22);
}
.primary{
  color:#071016;
  background:linear-gradient(180deg,#fff,#dce4ee);
}
.secondary{
  color:var(--soft);
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035));
  border:1px solid var(--line);
}

.settings{
  position:relative;
  display:grid;
  gap:10px;
  padding:11px;
  border-radius:28px;
  flex:0 0 auto;
  background:
    linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035)),
    rgba(18,20,25,.9);
}
.settings:before{
  content:"";
  justify-self:center;
  width:36px;
  height:4px;
  border-radius:999px;
  background:rgba(255,255,255,.2);
  margin:-1px 0 1px;
}
.setting-row{display:grid;grid-template-columns:.72fr 1.28fr;gap:9px}
.pitch{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:5px;
  padding:4px;
  border-radius:18px;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.075);
}
.pitch button{
  min-height:39px;
  color:var(--mut);
  background:transparent;
  border-radius:14px;
  font-size:13px;
  font-weight:790;
  white-space:nowrap;
}
.pitch button.active{
  color:#10131a;
  background:linear-gradient(180deg,#fff,#dfe7f0);
  box-shadow:0 4px 12px rgba(0,0,0,.22);
}
input,select{
  width:100%;
  min-width:0;
  height:50px;
  border:1px solid rgba(255,255,255,.1);
  color:var(--txt);
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
  border-radius:18px;
  padding:0 12px;
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%),linear-gradient(135deg,var(--mut) 50%,transparent 50%),linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));background-position:calc(100% - 18px) 22px,calc(100% - 13px) 22px,0 0;background-size:5px 5px,5px 5px,100% 100%;background-repeat:no-repeat;padding-right:32px}

@media(max-height:720px){
  .app{gap:8px;padding-left:10px;padding-right:10px}
  .topbar{min-height:32px}.brand{font-size:18px}.mark{width:27px;height:27px}.status{font-size:11px;padding:7px 9px}
  .hero{padding:12px;border-radius:24px;gap:8px}.note{font-size:clamp(88px,30svh,142px)}
  .readout{gap:6px}.pill{padding:7px 8px;font-size:11px;border-radius:14px}.meter{height:40px}.needle{top:5px;height:30px}.meter-area{gap:6px}.meter-text{padding:5px 7px;border-radius:14px;gap:7px}.cents{min-width:72px;padding:4px 7px;font-size:15px;border-radius:11px}.hint{font-size:12px}
  .string{min-height:53px;border-radius:17px}.string b{font-size:16px}.string span{font-size:9px}
  .primary,.secondary{min-height:50px;border-radius:18px;font-size:14px}.settings{padding:8px;border-radius:22px}.settings:before{display:none}.pitch button{min-height:33px;font-size:12px}input,select{height:42px;border-radius:15px;font-size:16px}
}

@media(max-width:360px){
  .app{padding-left:9px;padding-right:9px}
  .strings{gap:6px}.string{min-height:50px}.string b{font-size:15px}
  .setting-row{grid-template-columns:.75fr 1.25fr}
  .cents{min-width:68px;font-size:14px}.hint{font-size:11px}.hint:before{width:6px;height:6px;margin-right:5px}
}