:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:#0b1220; color:#e6eefc; }
.wrap { max-width: 980px; margin: 28px auto; padding: 18px; }
.card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); border-radius: 16px; padding: 18px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 14px; }
.brand { font-weight: 750; letter-spacing: .2px; }
.nav { display:flex; gap: 8px; flex-wrap:wrap; }
.nav a { text-decoration:none; color: inherit; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); }
.nav a.active { background: rgba(54,211,153,.14); border-color: rgba(54,211,153,.25); }

h1 { font-size: 18px; margin: 0 0 12px; font-weight: 700; }
label { font-size: 12px; opacity: .9; display:block; margin-bottom: 6px; }
.row { display:flex; gap: 12px; align-items:flex-end; flex-wrap: wrap; }

input[type="number"], select {
  padding: 10px; border-radius: 10px; border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25); color:inherit;
}
input[type="number"] { width: 130px; }
input[type="range"] { width: 320px; }

.btn {
  padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08); color:inherit; cursor:pointer; font-weight:700;
  user-select: none;
}
.btn:active { transform: translateY(1px); }
.btn.primary { background: rgba(54,211,153,.14); border-color: rgba(54,211,153,.25); }
.btn.danger  { background: rgba(248,113,113,.14); border-color: rgba(248,113,113,.25); }
.btn.mini { padding: 10px 12px; min-width: 44px; text-align:center; }

.muted { font-size: 12px; opacity: .85; line-height: 1.35; }
.kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 11px; opacity: .9; }

.flash {
  margin-top: 12px;
  height: 90px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  display:flex; align-items:center; justify-content:center;
  font-size: 12px; opacity: .9;
}
.flash.pulse { background: rgba(54,211,153,.18); border-color: rgba(54,211,153,.28); }
.flash.pulse-accent { background: rgba(99,102,241,.22); border-color: rgba(99,102,241,.30); }

.grid { display:grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 820px) { .grid { grid-template-columns: 1.2fr 0.8fr; } }

.panel { border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); border-radius: 14px; padding: 14px; }
.big { font-size: 34px; font-weight: 800; letter-spacing: .4px; }
.cents { font-size: 14px; opacity: .9; }
.meter { height: 10px; border-radius: 999px; background: rgba(255,255,255,.08); overflow:hidden; border: 1px solid rgba(255,255,255,.10); }
.meter > div { height: 100%; width: 50%; background: rgba(54,211,153,.35); transform-origin: left; }

.piano { user-select:none; }
.keys { display:flex; position: relative; height: 210px; border-radius: 14px; overflow:hidden; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); }
.white { flex: 1; min-width: 34px; border-right: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.06); display:flex; align-items:flex-end; justify-content:center; padding-bottom: 10px; font-size: 11px; opacity:.9; }
.white.active { background: rgba(54,211,153,.25); }
.black {
  position:absolute; top:0; height: 62%; width: 6.2%;
  background: rgba(0,0,0,.65); border: 1px solid rgba(255,255,255,.10);
  border-radius: 0 0 8px 8px;
  transform: translateX(-50%);
  display:flex; align-items:flex-end; justify-content:center; padding-bottom: 10px;
  font-size: 10px; opacity:.9;
}
.black.active { background: rgba(99,102,241,.45); }