* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  min-height: 100vh;
  background: linear-gradient(135deg, #fce4ec, #e8eaf6, #e0f7fa, #fff9c4);
  background-size: 400% 400%;
  animation: bgShift 12s ease infinite;
  font-family: 'Nunito', sans-serif;
  display: flex; justify-content: center; align-items: center;
  overflow: hidden;
}

@keyframes bgShift {
  0%,100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

#particles {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 100;
}

.app {
  text-align: center; padding: 20px; max-width: 900px; width: 100%;
  position: relative; z-index: 1;
}

h1 {
  font-family: 'Bubblegum Sans', cursive;
  font-size: clamp(2rem, 6vw, 3.2rem);
  color: #6a1b9a;
  text-shadow: 2px 2px 0 #f8bbd0;
  margin-bottom: 16px;
}

/* Instruments */
.instruments { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 20px; }

.inst-btn {
  font-family: 'Bubblegum Sans', cursive;
  font-size: 1.2rem; padding: 12px 22px;
  border: 3px solid transparent; border-radius: 50px;
  cursor: pointer; transition: all .2s;
  background: #fff; color: #333;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
.inst-btn:hover { transform: scale(1.08); }
.inst-btn.active { border-color: #7c4dff; background: #ede7f6; color: #4a148c; font-weight: 700; }

.inst-btn[data-wave="sine"] { background: #fce4ec; }
.inst-btn[data-wave="triangle"] { background: #fff9c4; }
.inst-btn[data-wave="sawtooth"] { background: #e0f2f1; }
.inst-btn[data-wave="square"] { background: #e8eaf6; }
.inst-btn.active[data-wave="sine"] { background: #f48fb1; color: #fff; }
.inst-btn.active[data-wave="triangle"] { background: #fff176; }
.inst-btn.active[data-wave="sawtooth"] { background: #80cbc4; }
.inst-btn.active[data-wave="square"] { background: #9fa8da; color: #fff; }

/* Piano */
.piano {
  display: flex; justify-content: center; gap: 3px;
  margin: 0 auto 24px; padding: 16px 8px;
  background: rgba(255,255,255,.6); border-radius: 20px;
  backdrop-filter: blur(8px);
  overflow-x: auto;
}

.key {
  width: clamp(32px, 5vw, 52px); height: clamp(100px, 20vw, 160px);
  border-radius: 0 0 12px 12px; border: 2px solid #ccc;
  cursor: pointer; position: relative;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 8px;
  font-family: 'Nunito', sans-serif; font-size: .7rem; font-weight: 700;
  color: #666; transition: all .1s;
  user-select: none; -webkit-user-select: none;
  flex-shrink: 0;
}

.key.white { background: linear-gradient(180deg, #fff 60%, #f5f5f5); }
.key.black {
  background: linear-gradient(180deg, #555 60%, #333);
  height: clamp(65px, 13vw, 105px);
  width: clamp(24px, 3.5vw, 38px);
  color: #aaa; border-color: #222;
  margin: 0 -12px; z-index: 2;
}

.key.active, .key:active { transform: scaleY(.97); }
.key.white.active { background: linear-gradient(180deg, #e1bee7 60%, #ce93d8); border-color: #9c27b0; }
.key.black.active { background: linear-gradient(180deg, #9c27b0 60%, #7b1fa2); border-color: #6a1b9a; }
.key.highlight { background: linear-gradient(180deg, #ffcc80 60%, #ffb74d) !important; border-color: #f57c00 !important; }

/* Controls */
.controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-bottom: 16px; }

.control-group {
  background: rgba(255,255,255,.7); border-radius: 16px;
  padding: 12px 16px; backdrop-filter: blur(6px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}

.label {
  font-family: 'Bubblegum Sans', cursive; font-size: 1.1rem;
  color: #6a1b9a; width: 100%; text-align: center;
}

.ctrl-btn {
  font-size: 1.1rem; padding: 10px 18px;
  border: 2px solid #ccc; border-radius: 40px;
  cursor: pointer; background: #fff;
  transition: all .2s; font-family: 'Nunito', sans-serif; font-weight: 700;
  box-shadow: 0 3px 8px rgba(0,0,0,.08);
}
.ctrl-btn:hover:not(:disabled) { transform: scale(1.06); }
.ctrl-btn:disabled { opacity: .4; cursor: default; }

.ctrl-btn.rec { background: #ffcdd2; border-color: #e57373; }
.ctrl-btn.rec.recording { background: #e53935; color: #fff; animation: pulse .8s infinite; }
.ctrl-btn.melody { background: #e8f5e9; border-color: #a5d6a7; font-size: .95rem; }

@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(229,57,53,.4); } 50% { box-shadow: 0 0 0 12px rgba(229,57,53,0); } }

.hint {
  font-size: .9rem; color: #888; margin-top: 8px;
}
kbd {
  background: #eee; border: 1px solid #ccc; border-radius: 4px;
  padding: 1px 6px; font-size: .85rem;
}

@media (max-width: 600px) {
  .key { width: 28px; height: 90px; font-size: .55rem; }
  .key.black { width: 20px; height: 58px; margin: 0 -10px; }
  .piano { gap: 2px; padding: 10px 4px; }
  .ctrl-btn.melody { font-size: .8rem; padding: 8px 12px; }
}