html,
body {
  height: 100%;
  margin: 0;
}

svg {
  width: 100%;
  height: auto;
}

/* =========================
   KEYBOARD STATES
========================= */

.white,
.black {
  cursor: pointer;
  touch-action: manipulation;
}

.white.active {
  fill: #FFD84D;
}

.black.active {
  fill: #FFAA00;
}

.white.active-right {
  fill: #FFD84D;
}

.white.active-left {
  fill: #104ea6;
}

.black.active-right {
  fill: #FFAA00;
}

.black.active-left {
  fill: #4F8FE8;
}

.pressed {
  transform: translateY(2px);
  transition: transform 80ms ease;
}

.white.pressed {
  fill: #FFE45E;
  stroke: #111111;
  stroke-width: 3;
  filter:
    drop-shadow(0 4px 8px rgba(0,0,0,0.22))
    drop-shadow(0 0 10px rgba(255,216,77,0.42));
}

.white.active.pressed {
  fill: #FFC928;
  stroke: #111111;
  stroke-width: 3;
  filter:
    drop-shadow(0 4px 8px rgba(0,0,0,0.24))
    drop-shadow(0 0 12px rgba(255,201,40,0.48));
}

.white.active-right.pressed {
  fill: #FFC928;
  stroke: #111111;
  stroke-width: 3;
  filter:
    drop-shadow(0 4px 8px rgba(0,0,0,0.24))
    drop-shadow(0 0 12px rgba(255,201,40,0.50));
}

.white.active-left.pressed {
  fill: #0B3F8A;
  stroke: #111111;
  stroke-width: 3;
  filter:
    drop-shadow(0 4px 8px rgba(0,0,0,0.26))
    drop-shadow(0 0 12px rgba(79,143,232,0.48));
}

/* =========================
ORIENTATION MARKER
========================= */

.c4-marker {
  fill: #d72626;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 2;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.28));
}

/* =========================
FINGERING LABELS
========================= */

.finger-label {
  font-family: Raleway, Arial, sans-serif;
  font-size: 20px;
  font-weight: 800;

  text-anchor: middle;
  dominant-baseline: middle;

  pointer-events: none;

  paint-order: stroke fill;
  stroke-width: 7px;
  stroke-linejoin: round;

  filter:
    drop-shadow(0 3px 5px rgba(0,0,0,0.22));
}

.finger-right {
  fill: rgba(225, 220, 186, 0.96);
  stroke: rgba(16,78,166,0.98);
}

.finger-left {
  fill: rgba(15,23,42,0.96);
  stroke: rgba(255,216,77,0.96);
}

.finger-neutral {
  fill: rgba(15,23,42,0.88);
  stroke: rgba(255,255,255,0.86);
}

.white.active-right ~ .finger-label,
.white.active-left ~ .finger-label,
.white.active ~ .finger-label {
  filter:
    drop-shadow(0 4px 8px rgba(0,0,0,0.28));
}