:root {
  --bg: #0b1020;
  --card: rgba(255, 255, 255, .06);
  --acc: #4cc2ff;
  --wkey: #f7f7f2;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  background: radial-gradient(1200px 600px at 20% -10%, #16223f 0%, var(--bg) 55%) fixed, var(--bg);
  color: #e8ecf5;
  min-height: 100vh;
}
header {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 12px 20px;
  background: rgba(13, 18, 35, .8);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  position: sticky; top: 0; z-index: 20;
}
h1 { font-size: 20px; margin: 0 8px 0 0; white-space: nowrap; }
.controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
select {
  background: #141b30; color: #e8ecf5;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 8px; padding: 6px 8px; font-size: 14px;
}
input[type=range] { accent-color: var(--acc); }
label { font-size: 13px; color: #c6d0e2; }
button {
  background: #1c2742; color: #e8ecf5;
  border: 1px solid rgba(255, 255, 255, .14);
  padding: 7px 14px; border-radius: 9px;
  cursor: pointer; font-size: 14px; transition: .15s;
}
button:hover { background: #263357; }
button.primary { background: linear-gradient(135deg, #2f80ed, #56ccf2); border: none; color: #fff; font-weight: 600; }
button.toggle.on { background: #1f7a4d; border-color: #2ecc71; }
button.recording { background: #8c1d2f; border-color: #ff5a6e; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .55; } }
.oct { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #c6d0e2; }
.oct button { padding: 4px 10px; }
.oct span { min-width: 2ch; text-align: center; font-weight: 700; color: var(--acc); }
.muted { color: #93a0b8; font-size: 12px; }
#viz { background: rgba(0,0,0,.25); border-radius: 6px; }
a#recDl { color: #7dffb0; font-size: 13px; }

main { padding: 16px 20px 46px; max-width: 1240px; margin: 0 auto; }
#editor {
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
#editor h2 { margin: 0 0 10px; font-size: 16px; color: #bcd6ff; }
#wave { width: 100%; height: 90px; border-radius: 8px; display: block; }
.editor-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 10px; font-size: 13px; color: #c6d0e2; }
.editor-row input[type=range] { vertical-align: middle; }

#kbWrap { overflow-x: auto; padding-bottom: 8px; }
#keyboard {
  position: relative; height: 230px; min-width: 920px;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.key { position: absolute; top: 0; border-radius: 0 0 7px 7px; cursor: pointer; }
.key.white {
  height: 100%;
  background: linear-gradient(#fff, var(--wkey));
  border: 1px solid #b9bfc9;
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .06);
  z-index: 1;
}
.key.white.down { background: linear-gradient(#dfe9ff, #bcd2ff); box-shadow: inset 0 3px 8px rgba(0, 0, 0, .25); }
.key.black {
  height: 60%;
  background: linear-gradient(#3a4356, #12161f);
  border: 1px solid #000;
  box-shadow: 0 4px 6px rgba(0, 0, 0, .5);
  z-index: 2;
}
.key.black.down { background: linear-gradient(#1c2436, #0a0e16); }
.key .kn { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font-size: 11px; color: #667; pointer-events: none; }
.key .kc { position: absolute; bottom: 27px; left: 0; right: 0; text-align: center; font-size: 10px; color: #4a86c7; pointer-events: none; font-weight: 600; }
.key.black .kc { color: #9fc6ff; bottom: 10px; }

#dropHint {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(10, 20, 40, .82);
  border: 3px dashed var(--acc);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: #cfe8ff;
  opacity: 0; pointer-events: none; transition: .2s;
}
#dropHint.show { opacity: 1; }

#toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 100;
  transform: translateX(-50%) translateY(10px);
  background: #1d2a4a; border: 1px solid rgba(255, 255, 255, .15);
  padding: 10px 18px; border-radius: 10px;
  opacity: .96; max-width: 82vw; transition: .3s;
}
#toast.show { transform: translateX(-50%) translateY(0); }

.help { line-height: 1.9; }
kbd {
  background: #1c2742; border: 1px solid rgba(255,255,255,.2); border-bottom-width: 2px;
  border-radius: 5px; padding: 1px 6px; font-size: 11px; font-family: inherit;
}