/* style.css — all styling */
:root{
  --bg:#0b0d12;
  --bg2:#11141c;
  --panel:#15192280;
  --panel-solid:#161b26;
  --stroke:#232a38;
  --stroke2:#2c3547;
  --text:#e6ecf5;
  --muted:#8b96ab;
  --accent:#5eead4;
  --accent2:#a78bfa;
  --accent3:#f472b6;
  --white-key:#f4f6fb;
  --white-key-down:#5eead4;
  --black-key:#1a1f2b;
  --black-key-down:#a78bfa;
  --grid:rgba(120,140,170,0.10);
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#eef1f7;
    --bg2:#e4e9f2;
    --panel:#ffffff99;
    --panel-solid:#ffffff;
    --stroke:#d6dce8;
    --stroke2:#c3ccdd;
    --text:#1a2233;
    --muted:#5b6680;
    --accent:#0d9488;
    --accent2:#7c3aed;
    --accent3:#db2777;
    --white-key:#ffffff;
    --black-key:#222a3a;
    --grid:rgba(40,60,90,0.08);
    color-scheme:light;
  }
}
html[data-theme="dark"]{
  --bg:#0b0d12; --bg2:#11141c; --panel:#15192280; --panel-solid:#161b26;
  --stroke:#232a38; --stroke2:#2c3547; --text:#e6ecf5; --muted:#8b96ab;
  --accent:#5eead4; --accent2:#a78bfa; --accent3:#f472b6;
  --white-key:#f4f6fb; --black-key:#1a1f2b; --grid:rgba(120,140,170,0.10);
  color-scheme:dark;
}
html[data-theme="light"]{
  --bg:#eef1f7; --bg2:#e4e9f2; --panel:#ffffff99; --panel-solid:#ffffff;
  --stroke:#d6dce8; --stroke2:#c3ccdd; --text:#1a2233; --muted:#5b6680;
  --accent:#0d9488; --accent2:#7c3aed; --accent3:#db2777;
  --white-key:#ffffff; --black-key:#222a3a; --grid:rgba(40,60,90,0.08);
  color-scheme:light;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(94,234,212,0.10), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(167,139,250,0.12), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  touch-action:manipulation;
}
#app{
  height:100%;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:16px clamp(12px,3vw,28px) 14px;
  max-width:1400px;
  margin:0 auto;
}

/* ---- top bar ---- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
}
.brand{display:flex; align-items:center; gap:12px;}
.logo{
  width:42px; height:42px; display:grid; place-items:center;
  border-radius:12px; font-size:22px;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  color:#0b0d12; box-shadow:0 6px 24px rgba(94,234,212,0.25);
}
.topbar h1{font-size:clamp(16px,2.4vw,20px); margin:0; font-weight:700; letter-spacing:0.2px;}
.sub{margin:2px 0 0; font-size:12px; color:var(--muted);}
.octave-control{display:flex; align-items:center; gap:8px;
  background:var(--panel); border:1px solid var(--stroke);
  padding:6px 8px; border-radius:12px; backdrop-filter:blur(8px);
}
.octave-control button.ghost{
  width:30px; height:30px; border-radius:8px; border:1px solid var(--stroke);
  background:var(--panel-solid); color:var(--text); font-size:18px; cursor:pointer;
  transition:transform .12s, background .2s, border-color .2s;
}
.octave-control button.ghost:hover{background:var(--stroke); transform:translateY(-1px);}
.octave-control button.ghost:active{transform:translateY(0);}
.oct-display{display:flex; flex-direction:column; align-items:center; min-width:46px;}
.oct-label{font-size:9px; color:var(--muted); letter-spacing:1.5px;}
#octVal{font-size:18px; font-weight:700; color:var(--accent);}

/* ---- panel ---- */
.panel{
  display:grid;
  grid-template-columns: 1.35fr 1fr;
  gap:14px;
  min-height:0;
}
@media (max-width:820px){
  .panel{grid-template-columns:1fr;}
}
.scope-wrap{
  position:relative;
  background:linear-gradient(180deg, #0a0c11cc, #0d1017cc);
  border:1px solid var(--stroke);
  border-radius:16px;
  overflow:hidden;
  min-height:150px;
  height:clamp(150px, 26vh, 240px);
}
html[data-theme="light"] .scope-wrap{background:linear-gradient(180deg,#f8faff,#eef2fa);}
#scope{position:absolute; inset:0; width:100%; height:100%; display:block;}
.scope-grid{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 40px 40px;
}
.scope-tag{
  position:absolute; top:10px; left:14px; font-size:10px; letter-spacing:2px;
  color:var(--muted); font-weight:600;
}
.nowplaying{
  position:absolute; top:8px; right:14px;
  font-size:13px; font-weight:600; color:var(--accent);
  font-variant-numeric:tabular-nums;
  max-width:60%; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.controls{
  background:var(--panel);
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:14px;
  display:flex; flex-direction:column; gap:14px;
  backdrop-filter:blur(8px);
}
.ctrl-group{display:flex; flex-direction:column; gap:8px;}
.ctrl-title{font-size:10px; letter-spacing:1.6px; color:var(--muted); font-weight:700;}
.wave-row{display:grid; grid-template-columns:repeat(4,1fr); gap:8px;}
.wave{
  appearance:none; border:1px solid var(--stroke); background:var(--panel-solid);
  color:var(--muted); padding:9px 6px; border-radius:10px; cursor:pointer;
  font-size:12px; font-weight:600; transition:all .18s;
}
.wave:hover{color:var(--text); border-color:var(--stroke2); transform:translateY(-1px);}
.wave.active{
  color:#0b0d12; background:linear-gradient(135deg, var(--accent), var(--accent2));
  border-color:transparent; box-shadow:0 4px 16px rgba(94,234,212,0.25);
}
html[data-theme="light"] .wave.active{color:#fff;}

.sliders{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 16px;
}
@media (max-width:520px){ .sliders{grid-template-columns:1fr 1fr;} }
.slider{display:flex; flex-direction:column; gap:4px;}
.slider label{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:11px; color:var(--muted); letter-spacing:.5px;
}
.slider label span{color:var(--accent); font-weight:600; font-variant-numeric:tabular-nums;}
input[type="range"]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:4px; border-radius:4px;
  background:linear-gradient(90deg, var(--accent), var(--accent2));
  outline:none; cursor:pointer;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:14px; height:14px; border-radius:50%;
  background:#fff; border:2px solid var(--accent2);
  box-shadow:0 2px 6px rgba(0,0,0,0.4); transition:transform .12s;
}
input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.15);}
input[type="range"]::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%;
  background:#fff; border:2px solid var(--accent2); cursor:pointer;
}

/* ---- keyboard ---- */
.keyboard-wrap{
  flex:1; min-height:0;
  display:flex; align-items:stretch;
}
.keyboard{
  position:relative;
  flex:1;
  height:clamp(140px, 22vh, 220px);
  background:linear-gradient(180deg, #0a0c11, #0d1017);
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:10px;
  display:flex;
  gap:3px;
  box-shadow:inset 0 2px 10px rgba(0,0,0,0.4);
}
html[data-theme="light"] .keyboard{background:linear-gradient(180deg,#e8edf6,#dfe6f0);}
.key{
  position:relative;
  user-select:none;
  cursor:pointer;
  transition:transform .05s, box-shadow .12s, background .12s;
  touch-action:none;
}
.key.white{
  flex:1;
  background:linear-gradient(180deg, var(--white-key), #d8dde8);
  border-radius:0 0 8px 8px;
  border:1px solid #c4cbd8;
  box-shadow:0 4px 0 #aab2c2, 0 6px 12px rgba(0,0,0,0.3);
  display:flex; flex-direction:column; justify-content:flex-end; align-items:center;
  padding-bottom:8px;
}
.key.white.down{
  background:linear-gradient(180deg, var(--white-key-down), #34d3b1);
  transform:translateY(3px);
  box-shadow:0 1px 0 #6ee7c8, 0 2px 8px rgba(94,234,212,0.5);
}
.key.black{
  position:absolute;
  top:10px;
  width:calc(7.142857% * 0.62);
  height:62%;
  background:linear-gradient(180deg, #2a3140, var(--black-key));
  border-radius:0 0 6px 6px;
  border:1px solid #000;
  box-shadow:0 4px 0 #05070b, 0 6px 14px rgba(0,0,0,0.6);
  z-index:2;
  display:flex; flex-direction:column; justify-content:flex-end; align-items:center;
  padding-bottom:6px;
}
.key.black.down{
  background:linear-gradient(180deg, var(--black-key-down), #6d28d9);
  transform:translateY(3px);
  box-shadow:0 1px 0 #7c3aed, 0 2px 10px rgba(167,139,250,0.6);
}
.kname{font-size:clamp(9px,1.3vw,11px); color:#5b6680; font-weight:600; pointer-events:none;}
.key.white.down .kname{color:#0b3b32;}
.kcomp{
  font-size:clamp(8px,1.2vw,10px); font-weight:800; letter-spacing:.5px;
  color:var(--muted); pointer-events:none; margin-bottom:2px;
  opacity:.7;
}
.key.white .kcomp{color:#8b96ab;}
.key.black .kcomp{color:#9aa6bd;}
.key.down .kcomp{color:#0b0d12; opacity:1;}

/* ---- footer hint ---- */
.hint{
  display:flex; gap:18px; justify-content:center; flex-wrap:wrap;
  font-size:11px; color:var(--muted); padding-bottom:2px;
}
.hint kbd{
  background:var(--panel-solid); border:1px solid var(--stroke2);
  border-bottom-width:2px; border-radius:5px; padding:1px 6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px; color:var(--text);
}

@media (max-width:520px){
  .topbar h1{font-size:15px;}
  .sub{display:none;}
  .wave{font-size:11px; padding:8px 4px;}
  .kname{display:none;}
}