/* some style */
body {
  background: #111827;
  color: #eaeaea;
}

.piano { position: relative; width: 100%; max-width: 720px; margin-top: 16px; }
.white-row { display: flex; }
.white-key { position: relative; flex: 1; height: 140px; border: 1px solid #999; background: #f8fafc; }
.white-key .label { position: absolute; bottom: 6px; left: 6px; font-size: 12px; opacity: 0; }
.black-row { position: absolute; top: 0; left: 0; right: 0; height: 90px; pointer-events: none; }
.black-key {
  position: absolute;
  transform: translateX(-50%);
  width: clamp(18px, 3.8vw, 34px);
  height: 90px;
  background: #111;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(to bottom, #111 0%, #0a0a0a 100%);
}
.white-key.active {
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    #eef4ff 60%,
    #a4bdff 100%
  );
  box-shadow:
    inset 0 -4px 10px rgba(37, 99, 235, 0.18),
    inset 0 2px 0 rgba(255,255,255,0.6);
}
.black-key.active {
  background:
    /* tydelig bunnstripe */
    linear-gradient(to top,
      rgba(59,130,246,0.85) 0%,
      rgba(59,130,246,0.85) 8%,
      rgba(59,130,246,0.45) 22%,
      rgba(59,130,246,0.20) 42%,
      rgba(59,130,246,0.08) 58%,
      transparent 72%
    ),
    /* base ebony */
    linear-gradient(to bottom, #111 0%, #0a0a0a 100%);

  box-shadow:
    0 8px 18px rgba(0,0,0,0.55),
    inset 0 -10px 18px rgba(59,130,246,0.25);
}
.white-key.root {
  outline: none;
  box-shadow: inset 0 -6px 0 #f6c453;
}

.black-key.root {
  outline: none;
  box-shadow: inset 0 -4px 0 #f6c453;
}

:root{
  --bg: #111827;
  --panel: rgba(255,255,255,0.06);
  --panel2: rgba(255,255,255,0.09);
  --border: rgba(255,255,255,0.14);
  --text: #eaeaea;
  --muted: rgba(234,234,234,0.75);
  --ring: rgba(246,196,83,0.55);
}

.controls{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 10px 0 14px;
}

.control{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
}

.btn, .select{
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  color: var(--text);
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
  outline: none;
}

.btn{
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.2px;
  transition: transform 120ms ease, filter 120ms ease, border-color 120ms ease;
}

.btn:hover{ filter: brightness(1.06); border-color: rgba(255,255,255,0.22); }
.btn:active{ transform: translateY(1px); }

.select{
  min-width: 140px;
  padding-right: 34px;           /* plass til “pil” */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(234,234,234,0.9) 50%),
    linear-gradient(135deg, rgba(234,234,234,0.9) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 16px,
    calc(100% - 12px) 16px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.btn:focus-visible, .select:focus-visible{
  box-shadow:
    0 0 0 3px var(--ring),
    0 8px 24px rgba(0,0,0,0.32);
  border-color: rgba(246,196,83,0.65);
}

.select option{
  background: #0b1220;  /* dropdown-lista */
  color: var(--text);
}