:root {
  --bg: #000;               /* keep your palette */
  --panel: #0619a8;
  --text: #fffd61;
  --shadow: rgba(0,0,0,.35);
  --flash-active: #ffd400;  /* flash color (yellow) */
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: Helvetica, Arial, sans-serif;
}

header, footer { text-align: center; padding: 12px; }

main {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content-container { text-align: center; width: min(90vw, 800px); }

/* --- Dot pendulum --- */
.pulse-wrap {
  position: relative;
  width: 100%;                /* JS sets exact width via recalcSwingWidth(); */
  height: var(--dot-size, 14px);
  margin: 16px 0;
}

.pulse-box {
  --dot-size: 14px;
  --x: 0px;                   /* JS updates this */
  --swing-dur: .5s;           /* JS updates this */
  position: absolute;
  left: 0;
  top: 50%;
  width: var(--dot-size);
  height: var(--dot-size);
  margin-top: calc(-1 * var(--dot-size) / 2); /* vertically center the dot */
  border-radius: 50%;
  background: currentColor;
  transform: translateX(var(--x));
  transition: transform var(--swing-dur) linear, filter 120ms ease, box-shadow 120ms ease;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(0,0,0,0.15);
}

/* Flash effect (triggered by JS class) */
.pulse-box.flash {
  filter: brightness(1.35);
  box-shadow: 0 0 8px 2px rgba(0,0,0,0.25);
}

/* ---- Metronome panel ---- */
.metronome {
  background: var(--panel);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 24px var(--shadow);
}

#bpm-display { font-size: 2.25rem; margin: 0 0 12px 0; }

.form-row {
  display:flex; align-items:center; gap:12px;
  justify-content:center; flex-wrap:wrap;
}

label { font-weight: 600;
}

#bpm-slider { 
width: min(420px, 80vw);
}
/* ---- Start/Stop ---- */
.toggle-button-container { margin-top: 20px; display: flex; justify-content: center; }

#toggle-button {
  font-size: 1.5rem;
  padding: 12px 24px;
  border-radius: 12px;
  border: none;
  background: #1134ff;
  color: #fff;
  cursor: pointer;
  position: relative;
  transition: all 0.1s ease;

  /* raised look */
  box-shadow: 0 6px 0 #081a66, 0 6px 12px rgba(0,0,0,0.4);
}

#toggle-button:active {
  top: 4px; /* simulates button press */
  box-shadow: 0 2px 0 #081a66, 0 2px 6px rgba(0,0,0,0.4);
}

#toggle-button[aria-pressed="true"] { background: #d33; }