@font-face {
  font-family: "League Spartan";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/league-spartan-latin-700-v15.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --mf-site-green: #00e288;
  --mf-site-brown: #613f1c;
  --mf-site-brown-hover: #8a5c08;
  --mf-site-ink: #1a0e00;
  --mf-site-text: #291901;
  --mf-site-paper: #f2edec;
  --mf-site-tan: #dfba93;
  --mf-site-charcoal: #222222;
  color: var(--mf-site-text);
  background: var(--mf-site-paper);
}

body { background: var(--mf-site-paper); }
main {
  border-color: rgb(0 226 136 / 42%);
  box-shadow: 0 24px 70px rgb(34 34 34 / 14%);
}
h1, h2 { color: var(--mf-site-ink); }
.web-build-info, main > p, .device-activation > p, .device-activation label { color: var(--mf-site-brown); }

.player-controls,
.training-now-playing {
  background: linear-gradient(135deg, var(--mf-site-charcoal) 0%, #2d2925 58%, var(--mf-site-brown) 100%);
}

button {
  border: 2px solid var(--mf-site-green);
  border-radius: 100px;
  color: #fff;
  background: var(--mf-site-brown);
  font-family: "League Spartan", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 14px;
  text-transform: uppercase;
}

.preference-controls button,
.training-mode-switch button,
.training-categories button,
.device-activation button {
  min-height: 52px;
  padding: 14px 20px;
}

button:hover:not(:disabled) { border-color: var(--mf-site-green); background: var(--mf-site-brown-hover); }
button:focus-visible { outline-color: rgb(0 226 136 / 42%); }
.playback-toggle {
  border-color: var(--mf-site-green);
  border-radius: 50%;
  background: var(--mf-site-brown);
  font-size: 24px;
  letter-spacing: normal;
}
.playback-toggle:hover:not(:disabled) { background: var(--mf-site-brown-hover); }
.volume-toggle { border-color: transparent; background: transparent; }
.volume-toggle:hover:not(:disabled),
.volume-toggle[aria-expanded='true'] { border-color: var(--mf-site-green); background: rgb(97 63 28 / 72%); }

.playback-progress,
.volume-slider,
.training-playback-controls input[type='range'] { accent-color: var(--mf-site-green); }
.playback-progress::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 100px;
  background: var(--mf-site-green);
}
.playback-progress::-moz-range-track {
  height: 4px;
  border-radius: 100px;
  background: var(--mf-site-green);
}
.playback-progress::-webkit-slider-thumb { margin-top: -6px; }

.device-activation__eyebrow { color: var(--mf-site-brown) !important; }
.device-activation input { border-color: rgb(0 226 136 / 42%); border-radius: 26px; }
.device-activation input:focus { border-color: var(--mf-site-green); box-shadow: 0 0 0 3px rgb(0 226 136 / 18%); }
.device-activation button {
  border: 2px solid var(--mf-site-green);
  border-radius: 100px;
  background: var(--mf-site-brown);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
}

.intensity-control {
  --intensity-green-dark: var(--mf-site-brown);
  --intensity-green-light: var(--mf-site-green);
  --intensity-green-text: var(--mf-site-ink);
  --intensity-inactive-background: #fff;
  --intensity-inactive-border: rgb(0 226 136 / 42%);
  --intensity-inactive-text: var(--mf-site-brown);
}
.intensity-control .intensity-arrow { border-color: var(--mf-site-green); border-radius: 100px; }
.intensity-control .intensity-arrow:hover:not(:disabled) { border-color: var(--mf-site-green); background: var(--mf-site-brown-hover); }
.intensity-levels span { border-radius: 100px; }

.training-addon { --training-green: var(--mf-site-green); --training-green-light: #c7f8e4; }
.training-mode-switch button { border-color: var(--mf-site-green); color: var(--mf-site-brown); background: #fff; }
.training-mode-switch button.is-active { color: #fff; background: var(--mf-site-brown); }
.training-categories .training-category { border-color: rgb(0 226 136 / 42%); border-radius: 100px; }
.training-categories .training-category.is-active { border-color: var(--mf-site-green); color: var(--mf-site-ink); background: var(--mf-site-green); }
.training-mix-card.is-playing { border-color: var(--mf-site-green); box-shadow: 0 0 0 2px rgb(0 226 136 / 18%); }
.training-mix-card span, .training-now-playing > span { color: var(--mf-site-green); }
.training-playback-controls button { border-color: var(--mf-site-green); background: var(--mf-site-brown); }
.subscription-message { border-color: var(--mf-site-green); color: var(--mf-site-brown); background: #e5fbf2; }

@media (width <= 650px) {
  .preference-controls button,
  .training-mode-switch button,
  .training-categories button { min-height: 52px; padding: 12px 14px; }
}