:root {
  color-scheme: light;
  --bg: #f8f4ef;
  --ink: #1b1b1f;
  --accent: #0f6e5f;
  --accent-dark: #0c4f44;
  --sun: #f7c36b;
  --surface: rgba(255, 255, 255, 0.72);
  --surface-strong: rgba(255, 255, 255, 0.92);
  --border: rgba(27, 27, 31, 0.15);
  --muted: rgba(27, 27, 31, 0.65);
  --beat-interval: 0.025s;
}

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

body {
  font-family: "Space Grotesk", system-ui, sans-serif;
  background: radial-gradient(circle at top, #fff7e8, #f0efe9 40%, #e7efe8 100%);
  color: var(--ink);
  min-height: 100vh;
}

.page {
  max-width: 1040px;
  margin: 0 auto;
  padding: 64px 24px 80px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
  align-items: center;
  padding: 32px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(240, 235, 225, 0.8));
  box-shadow: 0 24px 50px rgba(23, 44, 39, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 0.7rem;
  color: var(--accent-dark);
  margin-bottom: 12px;
}

h1 {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  margin-bottom: 14px;
}

.subhead {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--muted);
}

.sun {
  position: relative;
  width: 230px;
  height: 230px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  opacity: 0.25;
  filter: saturate(0.9) brightness(0.9);
  transition: opacity 0.4s ease, filter 0.4s ease, transform 0.4s ease;
}

.sun.active {
  opacity: 1;
  filter: saturate(1.1) brightness(1.05);
  transform: scale(1.02);
}

.sun-rays {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(247, 195, 107, 0.9) 0deg 12deg,
    rgba(255, 138, 76, 0.95) 12deg 24deg,
    rgba(247, 195, 107, 0.9) 24deg 36deg,
    rgba(255, 168, 88, 0.95) 36deg 48deg,
    rgba(247, 195, 107, 0.9) 48deg 60deg,
    rgba(255, 138, 76, 0.95) 60deg 72deg,
    rgba(247, 195, 107, 0.9) 72deg 84deg,
    rgba(255, 168, 88, 0.95) 84deg 96deg,
    rgba(247, 195, 107, 0.9) 96deg 108deg,
    rgba(255, 138, 76, 0.95) 108deg 120deg,
    rgba(247, 195, 107, 0.9) 120deg 132deg,
    rgba(255, 168, 88, 0.95) 132deg 144deg,
    rgba(247, 195, 107, 0.9) 144deg 156deg,
    rgba(255, 138, 76, 0.95) 156deg 168deg,
    rgba(247, 195, 107, 0.9) 168deg 180deg,
    rgba(255, 168, 88, 0.95) 180deg 192deg,
    rgba(247, 195, 107, 0.9) 192deg 204deg,
    rgba(255, 138, 76, 0.95) 204deg 216deg,
    rgba(247, 195, 107, 0.9) 216deg 228deg,
    rgba(255, 168, 88, 0.95) 228deg 240deg,
    rgba(247, 195, 107, 0.9) 240deg 252deg,
    rgba(255, 138, 76, 0.95) 252deg 264deg,
    rgba(247, 195, 107, 0.9) 264deg 276deg,
    rgba(255, 168, 88, 0.95) 276deg 288deg,
    rgba(247, 195, 107, 0.9) 288deg 300deg,
    rgba(255, 138, 76, 0.95) 300deg 312deg,
    rgba(247, 195, 107, 0.9) 312deg 324deg,
    rgba(255, 168, 88, 0.95) 324deg 336deg,
    rgba(247, 195, 107, 0.9) 336deg 348deg,
    rgba(255, 138, 76, 0.95) 348deg 360deg
  );
  mask: radial-gradient(circle, transparent 45%, black 46%);
  animation: sunGlow var(--beat-interval) ease-in-out infinite;
  animation-play-state: paused;
}

.sun.active .sun-rays {
  animation-play-state: running;
}

.sun-core {
  position: absolute;
  width: 60%;
  height: 60%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff6d8, #f7c36b 55%, #f19a2f 100%);
  box-shadow: 0 0 35px rgba(247, 195, 107, 0.6);
}

@keyframes sunGlow {
  0% {
    transform: scale(0.96);
    opacity: 0.7;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.96);
    opacity: 0.7;
  }
}

.controls {
  display: grid;
  gap: 20px;
}

.card {
  background: var(--surface);
  border-radius: 22px;
  padding: 24px;
  border: 1px solid var(--border);
  box-shadow: 0 18px 30px rgba(23, 44, 39, 0.08);
}

.status {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
}

.status-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(27, 27, 31, 0.2);
  box-shadow: 0 0 0 6px rgba(27, 27, 31, 0.08);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.status-dot.active {
  background: var(--accent);
  box-shadow: 0 0 0 8px rgba(15, 110, 95, 0.18);
}

.status-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--muted);
}

.status-text {
  font-size: 1.2rem;
  font-weight: 600;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

button {
  font-family: inherit;
  border-radius: 999px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

button.primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 14px 24px rgba(15, 110, 95, 0.25);
}

button.primary:hover:not(:disabled) {
  transform: translateY(-2px);
  background: var(--accent-dark);
}

button.ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink);
}

button.ghost:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(27, 27, 31, 0.35);
}

.hint {
  font-size: 0.9rem;
  color: var(--muted);
}

.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.control label {
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
}

.control .value {
  font-size: 0.95rem;
  color: var(--muted);
  margin-bottom: 12px;
}

.warning {
  margin-top: 10px;
  font-size: 0.85rem;
  color: #a7441c;
  background: rgba(255, 199, 162, 0.4);
  border: 1px solid rgba(167, 68, 28, 0.25);
  border-radius: 12px;
  padding: 8px 10px;
  display: none;
}

.warning.active {
  display: block;
}

.tone-buttons {
  margin-top: 12px;
}

.tone-buttons .button-row {
  margin-bottom: 0;
}

.tone-btn {
  background: var(--surface-strong);
  border: 1px solid rgba(27, 27, 31, 0.12);
  padding: 10px 18px;
  font-size: 0.95rem;
}

.tone-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(15, 110, 95, 0.3);
}

input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.presets h2 {
  font-size: 1.8rem;
  margin-bottom: 16px;
}

.preset-list {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.preset {
  background: var(--surface-strong);
  border-radius: 16px;
  padding: 16px;
  text-align: left;
  border: 1px solid rgba(15, 110, 95, 0.12);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.preset .meta {
  font-size: 0.85rem;
  color: var(--muted);
}

.preset:hover {
  transform: translateY(-2px);
  border-color: rgba(15, 110, 95, 0.3);
}

.stereo {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: center;
  background: linear-gradient(135deg, rgba(15, 110, 95, 0.08), rgba(247, 195, 107, 0.2));
  border-radius: 24px;
  padding: 28px;
  border: 1px solid rgba(15, 110, 95, 0.15);
}

.stereo h2 {
  font-size: 1.9rem;
  margin-bottom: 10px;
}

.stereo p {
  color: var(--muted);
  line-height: 1.6;
}

.meters {
  display: grid;
  gap: 16px;
}

.meter {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 999px;
  padding: 10px 14px;
  border: 1px solid rgba(27, 27, 31, 0.1);
}

.meter-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--muted);
  margin-bottom: 6px;
}

.meter-bar {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--sun));
  width: 20%;
  transition: width 0.4s ease;
}

.footer {
  display: flex;
  justify-content: center;
  padding-top: 12px;
}

.about-link {
  background: transparent;
  border: 1px solid rgba(27, 27, 31, 0.2);
  color: var(--ink);
  padding: 10px 22px;
}

.about-link:hover {
  transform: translateY(-2px);
  border-color: rgba(15, 110, 95, 0.35);
}

.modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 100;
}

.modal[hidden] {
  display: none;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(27, 27, 31, 0.45);
  backdrop-filter: blur(6px);
}

.modal-card {
  position: relative;
  z-index: 1;
  width: min(92vw, 720px);
  background: var(--surface-strong);
  border-radius: 24px;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 26px 60px rgba(18, 33, 30, 0.2);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.modal-close {
  background: transparent;
  border: 1px solid rgba(27, 27, 31, 0.2);
  padding: 8px 16px;
  font-size: 0.9rem;
}

.modal-copy {
  color: var(--muted);
  line-height: 1.6;
}

.modal-links {
  display: grid;
  gap: 12px;
  margin: 18px 0;
}

.modal-links a {
  text-decoration: none;
  color: var(--accent-dark);
  background: rgba(15, 110, 95, 0.08);
  border: 1px solid rgba(15, 110, 95, 0.18);
  border-radius: 14px;
  padding: 12px 16px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.modal-links a:hover {
  transform: translateY(-2px);
  border-color: rgba(15, 110, 95, 0.4);
}

.modal-note {
  font-size: 0.85rem;
  color: var(--muted);
}

body.modal-open {
  overflow: hidden;
}

@media (max-width: 720px) {
  .page {
    padding: 48px 18px 64px;
  }

  .hero {
    padding: 24px;
  }

  .pulse {
    width: 180px;
    height: 180px;
  }
}