body {
  background-color: #343D46;
  background: radial-gradient(circle at center, #1a1a1a 0%, #343D46 100%);
  height: 100vh; // 100でブラウザ1画面分
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; // 画面からはみ出た部分を非表示にする、スクロールバーを表示しない
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

#ecg-canvas {
  background: transparent;
  position: absolute;
  width: 100vw;
  height: 280px;
  pointer-events: none;
  z-index: 0;
}

.container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.heart-wrapper {
  width: 400px;
  height: 400px;
}

#particle-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.control-panel {
  position: absolute;
  top: 80vh;
  left: 50%;
  width: 10%;
  height: 20vh;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  margin-top: 1rem;
  pointer-events: auto;
  z-index: 3;
}
