* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
  background: #0a0a0f;
  color: #eee;
}
@media (min-width: 500px) { body { align-items: center; } }

.app {
  width: 100%;
  max-width: 420px;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}

h1 {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .5;
}

.beat-row { display: flex; gap: .6rem; padding: .5rem 0; align-items: center; }
.beat-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: #222; border: 2px solid #333;
  transition: background .06s, border-color .06s, box-shadow .06s;
}
.beat-dot.active {
  background: var(--light-color, #ff4444);
  border-color: var(--light-color, #ff4444);
  box-shadow: 0 0 8px 2px var(--light-color, #ff4444);
}
.beat-dot.accent { width: 18px; height: 18px; }

.light {
  width: 130px; height: 130px; border-radius: 50%;
  background: #151520; border: 2px solid #222;
  transition: background .06s, box-shadow .06s, border-color .06s, transform .06s;
}
.light.flash {
  background: var(--light-color, #ff4444);
  box-shadow: 0 0 80px 30px var(--light-color, #ff4444);
  border-color: var(--light-color, #ff4444);
  transform: scale(1.05);
}
.light.flash.accent-flash {
  transform: scale(1.12);
  box-shadow: 0 0 100px 40px var(--light-color, #ff4444);
}

.bpm-display {
  font-size: 2.4rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: center; gap: .8rem;
}
.bpm-nudge {
  width: 42px; height: 42px; border-radius: 50%;
  background: #1a1a1a; border: 2px solid #333; color: #eee;
  font-size: 1.4rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}

input[type="range"] { width: 100%; accent-color: #888; height: 6px; }

.option-group { width: 100%; display: flex; flex-direction: column; gap: .4rem; }
.option-group label {
  font-size: .7rem; text-transform: uppercase;
  letter-spacing: .12em; opacity: .4;
}
.options { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }

.opt {
  flex: 1; padding: .55rem .3rem;
  background: #141418; border: 2px solid #2a2a2a;
  border-radius: 1.2rem; color: #666;
  font-size: .8rem; cursor: pointer;
  transition: all .2s; text-align: center;
}
.opt.selected {
  background: #1e1e28; border-color: #eee; color: #eee;
}

.opt[data-light] {
  background: var(--c); border: 3px solid transparent;
  border-radius: 50%; width: 44px; height: 44px;
  flex: none; padding: 0; opacity: .45; color: transparent;
}
.opt[data-light].selected {
  opacity: 1; border-color: #fff; box-shadow: 0 0 14px var(--c);
}

.start-btn {
  width: 100%; padding: 1rem; border: none; border-radius: 2rem;
  background: linear-gradient(135deg, #eee, #ccc); color: #111;
  font-size: 1.1rem; font-weight: 700; cursor: pointer;
  letter-spacing: .05em; text-transform: uppercase;
  transition: background .2s, transform .1s;
}
.start-btn:active { transform: scale(.98); }
.start-btn.active {
  background: linear-gradient(135deg, #ff4444, #cc2222); color: #fff;
}