* { box-sizing: border-box; }
:root{
  --bg: #0b1020; --panel:#12192b; --text:#e8eaee;
  --key-border:#1d253a; --accent:#5b7cff;
}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  font-family: ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  background:
    radial-gradient(1200px 600px at 70% -50%, #1a2260 0, rgba(26,34,96,0) 70%),
    var(--bg);
  display:grid; grid-template-rows:auto 1fr auto; gap:12px;
}
.app-header,.footer{
  text-align:center; padding:12px 16px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.layout{ display:grid; gap:14px; padding:0 16px 24px; }
.toolbar{
  background:var(--panel); border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:12px;
  box-shadow:0 8px 26px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
}
.toolbar .row{ display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; justify-content:space-between; }
.toggle,.volume,.metro,.range,.octave,.rec,.songs{ display:inline-flex; gap:8px; align-items:center; }

.song-btn{
  border:1px solid rgba(255,255,255,.18);
  background:#1a2240; color:#fff; padding:8px 10px;
  border-radius:10px; cursor:pointer; font-weight:600;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
}
.song-btn:hover{ filter:brightness(1.1); }

.kbd{ display:inline-block; border:1px solid rgba(255,255,255,.2); border-bottom-width:3px; padding:2px 6px; border-radius:6px; font-weight:700; font-size:12px; background:rgba(255,255,255,.06); }
.hint small{ opacity:.75 }

.stage{ display:grid; place-items:center; }
.piano{
  position:relative; user-select:none;
  display:grid; grid-auto-flow:column; gap:2px;
  grid-auto-columns:minmax(36px, 6vw);
  width:min(1100px, 96vw); height:min(240px, 45vw);
  padding:14px 14px 10px; border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.15));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 12px 40px rgba(0,0,0,.45);
}

.key{ position:relative; border-radius:10px; cursor:pointer; outline:none;
  transition: transform .03s ease, filter .12s ease; }
.key.white{
  background:linear-gradient(180deg,#fefefe,#dfe3ea 45%,#cfd7e2 46%,#e4e9f2 100%);
  border:1px solid var(--key-border);
  box-shadow: inset 0 4px 8px rgba(0,0,0,.15), inset 0 -2px 0 rgba(0,0,0,.3), 0 5px 10px rgba(0,0,0,.35);
}
.key.black{
  background:linear-gradient(180deg,#333,#111); width:60%; height:58%;
  justify-self:center; z-index:2; border:1px solid #000;
  box-shadow: inset 0 4px 8px rgba(255,255,255,.05), inset 0 -2px 0 rgba(255,255,255,.03), 0 7px 14px rgba(0,0,0,.55);
}
.key.playing{ transform: translateY(2px) scale(.995); filter:brightness(.95); }
.key .label{
  position:absolute; bottom:8px; left:50%; transform:translateX(-50%);
  font-size:12px; font-weight:700; color:#111; text-shadow:0 1px 0 rgba(255,255,255,.7);
}
.key.black .label{ color:#fafafa; text-shadow:none; }