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

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

/* Controls container */
.controls-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 300px;
}

/* Toggle button styles */
#noise-toggle {
  width: 80%;
  max-width: 200px;
  height: 80vw;
  max-height: 200px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Toggle states */
#noise-toggle.off {
  background-color: #7A8450; /* Teal/green from spec */
}

#noise-toggle.on {
  background-color: #D4A017; /* Yellow from spec */
  transform: scale(0.95);
}

#noise-toggle:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

#noise-toggle:active {
  transform: scale(0.9);
}

/* Dropdown styling */
#noise-type {
  display: block;
  margin: 1.5em auto 0 auto;
  padding: 0.5em 1.2em;
  background-color: #7A8450;
  color: #fff;
  font-size: 1.1em;
  border: none;
  border-radius: 1.5em;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  outline: none;
  max-width: 220px;
  min-width: 140px;
  text-align: center;
  appearance: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
#noise-type:focus, #noise-type:hover {
  background-color: #D4A017;
  color: #222;
}

label[for="noise-type"] {
  display: block;
  text-align: center;
  width: 100%;
}

/* Screen reader only class */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}