:root {
  color-scheme: light;
  --ink: #221b16;
  --ink-soft: #57483b;
  --paper: #f6f1e8;
  --paper-strong: #efe7da;
  --surface: rgba(255, 251, 244, 0.82);
  --surface-solid: #fffaf2;
  --border: rgba(62, 45, 30, 0.2);
  --border-strong: rgba(62, 45, 30, 0.36);
  --accent: #8c3b2f;
  --accent-strong: #6f1f16;
  --gold: #b27a37;
  --in-tune: #6f8f52;
  --in-tune-strong: #4f6a38;
  --tune-gray: #9c9186;
  --shadow-soft: 0 10px 30px rgba(34, 27, 22, 0.1);
  --shadow-strong: 0 18px 45px rgba(34, 27, 22, 0.18);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, "Segoe UI", Roboto, system-ui, sans-serif;
  color: var(--ink);
  line-height: 1.55;
  background:
    radial-gradient(circle at 85% 8%, rgba(178, 122, 55, 0.16), transparent 35%),
    radial-gradient(circle at 12% 22%, rgba(140, 59, 47, 0.1), transparent 34%),
    repeating-linear-gradient(
      180deg,
      rgba(57, 43, 31, 0.035) 0,
      rgba(57, 43, 31, 0.035) 1px,
      transparent 1px,
      transparent 36px
    ),
    linear-gradient(180deg, #fcf7ef 0%, #f3eadb 100%);
}

.page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.6rem 1.1rem 3.4rem;
  display: grid;
  gap: 1.35rem;
}

.hero {
  text-align: center;
  position: relative;
  padding: 1.4rem 0.7rem 0.1rem;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  left: 50%;
  width: min(520px, 78vw);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(62, 45, 30, 0.46), transparent);
}

.hero::before {
  top: 0.3rem;
}

.hero::after {
  bottom: -0.2rem;
}

.eyebrow {
  margin: 0;
  font-family: "Marck Script", "Brush Script MT", cursive;
  font-size: clamp(1.2rem, 2.6vw, 1.7rem);
  color: var(--accent);
}

.hero h1 {
  margin: 0.2rem 0 0.55rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.4rem, 5.2vw, 4rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: #2d221b;
}

.tuner {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  border-radius: 1.05rem;
  padding: 1.2rem;
  display: grid;
  gap: 1rem;
  min-width: 0;
}

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

/* ---- shared note readout, common to all three visual modes ---- */
.note-readout {
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  text-align: center;
}

.note-name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: clamp(3.2rem, 9vw, 4.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  /* Gray the further out of tune, easing toward the normal brown as the
     reading approaches the green "in tune" zone (see .tuner.in-tune below,
     which wins outright once inside that zone). --tune-mix is set in JS. */
  color: color-mix(in srgb, var(--tune-gray) calc(var(--tune-mix, 0) * 1%), var(--accent-strong));
  transition: color 160ms ease;
}

.tuner.in-tune .note-name {
  color: var(--in-tune-strong);
}

.note-meta {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.cents-value {
  font-weight: 700;
  min-width: 3.4ch;
}

.tuner.in-tune .cents-value {
  color: var(--in-tune-strong);
}

/* ---- visual stage: strobe / needle / meter share the same slot ---- */
.visual-stage {
  position: relative;
  min-height: 268px;
  display: grid;
  justify-items: center;
  align-items: center;
  gap: 0.9rem;
  padding-top: 0.2rem;
  min-width: 0;
}

.visual-element {
  grid-area: 1 / 1;
  width: min(240px, 74vw);
  max-width: 100%;
  min-width: 0;
}

.strobe.visual-element {
  width: min(340px, 88vw);
}

.tuner[data-visual-mode="strobe"] .visual-stage {
  min-height: 240px;
}

.tuner[data-visual-mode="needle"] .visual-stage {
  min-height: 268px;
}

.tuner[data-visual-mode="meter"] .visual-stage {
  min-height: 190px;
}

.strobe-device,
.needle-device {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.device-shadow {
  fill: rgba(61, 31, 15, 0.16);
}

.device-case,
.device-case-circle,
.strobe-case {
  filter: drop-shadow(0 10px 18px rgba(61, 31, 15, 0.25));
}

/* ---- strobe wheel — inspired by the Peterson StroboStomp HD: five fine,
   dense concentric rings (not chunky spokes) rotating at graduated speeds,
   all freezing in unison the instant the note is in tune. Rotation is
   applied via the SVG transform attribute (not CSS transform-origin),
   matching the metronome pendulum's approach for reliable cross-browser
   rotation. Ring geometry is generated once in script.js; only the color/
   glow language lives here. ---- */
.strobe-bezel-groove {
  fill: none;
  stroke: rgba(0, 0, 0, 0.35);
  stroke-width: 3;
}

.strobe-window-rim {
  fill: none;
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 1;
}

.strobe-vignette,
.strobe-glass-highlight {
  pointer-events: none;
}

.strobe-ring {
  filter: drop-shadow(0 0 1.4px rgba(232, 202, 160, 0.55));
}

.strobe-ring path {
  fill: color-mix(in srgb, var(--tune-gray) calc(var(--tune-mix, 0) * 1%), #e8caa0);
  stroke: color-mix(in srgb, var(--tune-gray) calc(var(--tune-mix, 0) * 1%), #e8caa0);
  stroke-width: 0.5;
}

.strobe-ring-alt path {
  fill: color-mix(in srgb, var(--tune-gray) calc(var(--tune-mix, 0) * 1%), #caa06a);
  stroke: color-mix(in srgb, var(--tune-gray) calc(var(--tune-mix, 0) * 1%), #caa06a);
}

.strobe-base {
  fill: url(#tunerCaseGradient);
  filter: drop-shadow(0 2px 3px rgba(61, 31, 15, 0.3));
}

.strobe-hub {
  fill: #f6f1e8;
}

.strobe-hub-shine {
  fill: rgba(255, 255, 255, 0.75);
}

.tuner.in-tune .strobe-ring path {
  fill: var(--in-tune);
  stroke: var(--in-tune);
}

.tuner.in-tune .strobe-ring {
  filter: drop-shadow(0 0 2.5px rgba(111, 143, 82, 0.85));
}

/* ---- needle gauge: same case/window language as the strobe device and the
   metronome pendulum, with a needle rotating around a base pivot. ---- */
.needle-flat-label,
.needle-sharp-label {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 20px;
  fill: rgba(246, 241, 232, 0.5);
}

.needle-flat-label {
  text-anchor: middle;
}

.needle-sharp-label {
  text-anchor: middle;
}

#needleScaleTicks line {
  stroke: rgba(246, 241, 232, 0.32);
  stroke-width: 1.5;
  stroke-linecap: round;
}

#needleScaleTicks line.major {
  stroke: rgba(246, 241, 232, 0.55);
  stroke-width: 2.25;
}

#needleInTuneArc path {
  stroke: var(--in-tune);
  stroke-width: 5;
  stroke-linecap: round;
  fill: none;
  opacity: 0.55;
}

.needle-pointer {
  fill: color-mix(in srgb, var(--tune-gray) calc(var(--tune-mix, 0) * 1%), var(--gold));
  transition: fill 160ms ease;
}

.tuner.in-tune .needle-pointer {
  fill: var(--in-tune);
}

.needle-hub {
  fill: #f6f1e8;
  stroke: rgba(61, 31, 15, 0.3);
  stroke-width: 1;
}

#needleSwing {
  transition: none;
}

/* ---- LED / variance meter: a horizontal ladder that fills from the
   center outward, plus a precise sliding indicator on top. ---- */
.led-meter-device {
  width: min(320px, 84vw);
  display: grid;
  justify-items: center;
  gap: 0.5rem;
}

.led-track {
  position: relative;
  width: 100%;
  height: 46px;
  border-radius: 0.85rem;
  background: linear-gradient(180deg, #241b14, #171310);
  border: 1px solid var(--border-strong);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.led-segments {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
}

.led-dot {
  width: 5px;
  height: 16px;
  border-radius: 999px;
  background: rgba(246, 241, 232, 0.14);
  transition: background 90ms ease, box-shadow 90ms ease;
}

.led-dot.center {
  height: 24px;
  width: 6px;
}

.led-dot.lit {
  background: var(--gold);
  box-shadow: 0 0 6px rgba(178, 122, 55, 0.7);
}

.led-dot.lit.center {
  background: var(--in-tune);
  box-shadow: 0 0 9px rgba(111, 143, 82, 0.85);
}

.led-dot.lit.edge {
  background: var(--accent);
  box-shadow: 0 0 6px rgba(140, 59, 47, 0.7);
}

.led-indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 2px;
  left: 50%;
  background: #fffdf8;
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(255, 253, 248, 0.85);
  transform: translateX(-50%);
  transition: opacity 160ms ease;
  opacity: 0;
}

.led-indicator.visible {
  opacity: 1;
}

.led-scale-labels {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 0.2rem;
  color: var(--ink-soft);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.led-scale-labels span:nth-child(2) {
  text-transform: uppercase;
  font-size: 0.68rem;
}

.tuner.in-tune .led-scale-labels span:nth-child(2) {
  color: var(--in-tune-strong);
  font-weight: 700;
}

.display-toggle {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
}

.transport-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
}

.tap-status {
  text-align: center;
  min-height: 1.1em;
}

/* ---- settings row: Reference Pitch and Test Tone sit side by side in
   matching compact panels below the strobe. ---- */
.settings-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: start;
  gap: 0.9rem;
}

.settings-row .control-block {
  flex: 1 1 15rem;
  max-width: 18rem;
  margin: 0;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.panel-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
}

.panel-value {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--accent-strong);
}

.slider-title {
  display: block;
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  margin-top: 0.2rem;
}

.slider-title:first-of-type {
  margin-top: 0;
}

.fine-freq-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
}

.fine-freq-value {
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  font-size: 0.85rem;
  white-space: nowrap;
}

.fine-freq-value input[type="number"] {
  width: 5.6ch;
  border: none;
  background: none;
  padding: 0;
  text-align: right;
  font: inherit;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent-strong);
  -moz-appearance: textfield;
  appearance: textfield;
}

.fine-freq-value input[type="number"]::-webkit-inner-spin-button,
.fine-freq-value input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.panel-slider {
  width: 100%;
}

.compact-presets {
  justify-content: center;
}

/* ---- variance bar: how far the test tone sits from its nearest note, and
   how much room remains before the next one — a single lean fill, not a
   segmented ladder, so it reads at a glance. ---- */
.variance-block {
  display: grid;
  gap: 0.3rem;
}

.variance-track {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: var(--paper-strong);
  border: 1px solid var(--border);
  overflow: hidden;
}

.variance-track::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--border-strong);
}

.variance-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  background: color-mix(in srgb, var(--tune-gray) calc(var(--tune-mix, 0) * 1%), var(--accent));
  border-radius: 999px;
  transition: background 160ms ease;
}

.variance-fill.in-tune {
  background: var(--in-tune);
}

.variance-labels {
  display: flex;
  justify-content: space-between;
  color: var(--ink-soft);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

.variance-labels span:nth-child(2) {
  color: var(--accent-strong);
  font-weight: 700;
}

/* ---- test tone controls ---- */
.test-tone-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.1rem;
}

.test-tone-controls .small-btn {
  flex: 0 0 auto;
}

.test-tone-controls .small-btn[aria-pressed="true"] {
  background: linear-gradient(140deg, #b67a35, #8d5524);
  border-color: rgba(115, 68, 29, 0.7);
  color: #fffdf7;
}

.volume-control {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.volume-label {
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.volume-control input[type="range"] {
  width: 90px;
}

.test-tone-block .hint {
  text-align: center;
}

/* ---- shared primitives (buttons, pills, inputs) — same language as the
   metronome ---- */
.toggle-btn {
  width: min(228px, 100%);
  justify-self: center;
  border: 1px solid rgba(123, 71, 32, 0.65);
  border-radius: 999px;
  padding: 0.85rem 1rem;
  background: linear-gradient(145deg, #b57a38, #885123);
  color: #fffdf8;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: 1.22rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: 0 7px 18px rgba(82, 47, 20, 0.25);
}

.toggle-btn:hover {
  filter: brightness(1.04);
}

.toggle-btn[aria-pressed="true"] {
  background: linear-gradient(145deg, #8d5524, #6d3f1a);
}

.control-block {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  padding: 0.9rem;
  display: grid;
  gap: 0.7rem;
  align-content: start;
  max-width: 26rem;
  margin: 0 auto;
  width: 100%;
}

label,
legend {
  color: var(--ink-soft);
  font-size: 0.95rem;
}

input,
select,
button {
  font: inherit;
}

input[type="number"] {
  border-radius: 0.65rem;
}

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

.small-btn {
  border: 1px solid var(--border-strong);
  background: #fff9f1;
  color: var(--ink);
  border-radius: 0.65rem;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
}

.small-btn:hover {
  background: #fff3e3;
}

.pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.pill {
  position: relative;
  display: block;
  cursor: pointer;
}

.pill input {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.pill span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 0.7rem;
  border-radius: 0.65rem;
  border: 1px solid var(--border-strong);
  background: #fffdf9;
  color: #2f2218;
  font-size: 0.85rem;
  font-weight: 600;
  transition: transform 100ms ease, border-color 100ms ease, background 100ms ease, color 100ms ease;
}

.pill input:checked + span {
  background: linear-gradient(140deg, #b67a35, #8d5524);
  border-color: rgba(115, 68, 29, 0.7);
  color: #fffdf7;
  transform: translateY(-1px);
}

.pill input:focus-visible + span,
.toggle-btn:focus-visible,
.small-btn:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid rgba(163, 86, 34, 0.9);
  outline-offset: 2px;
}

.pill-sm span {
  min-height: 32px;
  min-width: 32px;
  padding: 0 0.55rem;
  font-size: 0.78rem;
}

.hint {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.82rem;
}

.hint.is-error {
  color: var(--accent-strong);
}

.footer {
  text-align: center;
  color: var(--ink-soft);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.22rem;
}

.footer-links,
.footer-contact {
  margin: 0.3rem 0 0;
  font-family: Inter, "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: 0.85rem;
}

.footer-links a,
.footer-contact a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.05rem;
  transition: color 120ms ease, border-color 120ms ease;
}

.footer-links a:hover,
.footer-contact a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

@media (max-width: 720px) {
  .page {
    padding-top: 2rem;
  }

  .tuner {
    padding: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}