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

body {
  font-family: "Helvetica Neue", "Hiragino Sans", "Yu Gothic", sans-serif;
  background: #f5f3ef;
  color: #333;
  min-height: 100vh;
}

header { text-align: center; padding: 32px 16px 8px; }
header h1 { font-size: 2.4rem; letter-spacing: 0.05em; }
header p { color: #777; margin-top: 8px; }

main { max-width: 1120px; margin: 0 auto; padding: 16px; }

.controls, .exports {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  margin: 16px 0;
}

button {
  font-size: 1rem;
  padding: 10px 22px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  background: #2f6f4f;
  color: #fff;
  transition: transform 0.1s;
}
button:hover { transform: scale(1.05); }
#clearBtn { background: #999; }
.exports button { background: #37506b; }

label { font-size: 1rem; }
input[type="number"] {
  width: 72px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
}

.status { text-align: center; margin: 12px 0; }
#pitchDisplay { font-size: 1.4rem; font-weight: bold; }
#noteDisplay {
  font-size: 3rem;
  font-weight: bold;
  color: #2f6f4f;
  min-height: 4rem;
}

.score {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  overflow-x: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

footer {
  text-align: center;
  color: #999;
  font-size: 0.85rem;
  padding: 24px;
}