body {
  background: #0d0d1a;
  color: #ddd;
  margin: 0;
  font-family: sans-serif;
  overflow: hidden;
}
#controls {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  background: rgba(26, 26, 46, 0.8);
  z-index: 2;
}
#controls label {
  color: #aaa;
  font-size: 14px;
}
#bpm {
  width: 60px;
  background: #222;
  color: #eee;
  border: 1px solid #444;
  padding: 4px 6px;
  font-size: 14px;
}
#startstop {
  background: #222;
  color: #eee;
  border: 1px solid #444;
  padding: 8px 20px;
  font-size: 16px;
  cursor: pointer;
}
#startstop.active {
  background: #4c4;
  color: #000;
  border-color: #4c4;
}
#methods {
  position: fixed;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  z-index: 2;
}
.method-btn {
  background: #222;
  color: #aaa;
  border: 1px solid #444;
  padding: 8px 16px;
  font-size: 15px;
  cursor: pointer;
}
.method-btn.active {
  background: #444;
  color: #ffe066;
  border-color: #ffe066;
}
#ring {
  display: block;
  width: 100vw;
  height: 100vh;
}
.bell-num {
  font-size: 140px;
  font-weight: bold;
  fill: #555;
  text-anchor: middle;
  dominant-baseline: central;
  transition: fill 0.15s ease-out;
}
.bell-num.active {
  fill: #ffe066;
}
.next-pos {
  font-size: 34px;
  fill: #ccc;
  text-anchor: start;
  dominant-baseline: central;
}
.next-pos.dim {
  opacity: 0.55;
}
.next-pos.dim2 {
  opacity: 0.25;
}
.arc {
  fill: none;
  stroke-width: 10;
}
.ghost-bell {
  fill: none;
  stroke: #444;
  stroke-width: 4;
  stroke-dasharray: 8 6;
  transition: stroke 0.15s ease-out;
}
.ghost-bell.active {
  stroke: #c44;
}
#dot {
  fill: #ffe066;
}
#dot.gap {
  fill: #c44;
}