:root {
  --panel:  #0B0D13;
  --raised: #151824;
  --edge:   #232838;
  --ink:    #E9EBF4;
  --muted:  #868DA6;
  --indigo: #6366F1;
  --lock:   #22C55E;
  /* The measured tempo's colour, and the ink that reads on it. page.js keeps
     both in step with the reading; these are the resting values. */
  --tempo:  #6366F1;
  --tempo-ink: rgba(0, 0, 0, 0.87);
  --ghost:  #39405A;

  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --score: Georgia, "Iowan Old Style", "Times New Roman", serif;

  --gutter: clamp(1.25rem, 5vw, 3rem);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--panel);
  color: var(--ink);
  font: 400 clamp(1rem, 0.95rem + 0.25vw, 1.125rem)/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--indigo); }

:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 3px;
}

.wrap {
  max-width: 54rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- masthead ---------- */

.mast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.75rem 1.25rem;
}
.mast-logo {
  height: clamp(1.75rem, 5vw, 2.25rem);
  width: auto;
}
.mast-nav {
  flex: none;
  display: flex;
  align-items: center;
  gap: clamp(0.7rem, 3vw, 1.25rem);
}
.mast-link {
  flex: none;
  font: 500 0.9rem/1 var(--sans);
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--edge);
  padding-bottom: 2px;
}
.mast-link:hover { color: var(--ink); border-bottom-color: var(--indigo); }

/* The language switch sits next to the download link because someone who
   cannot read this page cannot be asked to scroll to the footer to find that
   out. Boxed rather than underlined so it does not read as a second CTA. */
.mast-lang {
  flex: none;
  font: 600 0.78rem/1 var(--sans);
  letter-spacing: 0.05em;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid var(--edge);
  border-radius: 6px;
  padding: 0.35rem 0.45rem;
}
.mast-lang:hover { color: var(--ink); border-color: var(--indigo); }

/* ---------- the instrument ---------- */

.rig {
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: var(--raised);
  padding: clamp(1.5rem, 4vw, 2.75rem);
}

.rig-title {
  margin: 0;
  font: 600 1.05rem/1.3 var(--sans);
  letter-spacing: 0.01em;
}

.rig-lede {
  margin: 0.4rem 0 0;
  max-width: 34rem;
  color: var(--muted);
}

/* The readout sits in its own card, as it does in the app, so the number reads
   as an instrument's display rather than as a large heading — and it is held to
   a phone's width even on a desktop, because stretched across 54 rem the same
   number reads as an empty banner. */
.readout {
  max-width: 26rem;
  margin: clamp(0.75rem, 2.5vw, 1.25rem) auto 0;
  padding: clamp(1rem, 3vw, 1.5rem) 1rem;
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: var(--panel);
  text-align: center;
}

.readout-value {
  display: block;
  font: 300 clamp(4.5rem, 22vw, 9rem)/0.85 var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  color: var(--ink);
}

.readout-unit {
  display: block;
  margin-top: 0.55rem;
  font: 400 1rem/1 var(--sans);
  color: var(--muted);
}

.readout.is-live .readout-value { color: var(--tempo); }
/* A finished run stops being live, but the number stays readable — it is the
   thing the visitor came for, and the hint already says the count ended. */
.readout.is-stale { opacity: 0.8; }
.readout.is-stale .readout-value { color: var(--ink); }
/* The idle dash is a placeholder, not a value — say so, or an empty readout
   reads as a broken one. */
.readout.is-idle .readout-value { color: var(--ghost); }

.marking {
  margin: 0.35rem 0 0;
  min-height: 1.4em;
  text-align: center;
  font: italic 400 1.15rem/1.4 var(--score);
  color: var(--muted);
}

/* One tick per tap, placed by when it landed. Even spacing means even
   playing; bunched ticks mean the beat got away. */
.trace {
  position: relative;
  height: 32px;
  max-width: 26rem;
  margin: 0.9rem auto 0;
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
}
.trace::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  border-top: 1px dashed var(--edge);
}
.tick {
  position: absolute;
  top: 5px;
  bottom: 5px;
  width: 2px;
  margin-left: -1px;
  background: color-mix(in srgb, var(--tempo) 55%, transparent);
  border-radius: 1px;
}
.tick:last-child { background: var(--tempo); }

/* The pad is the app's, not a web button: a filled disc in the tempo's colour,
   a ring standing off it, and a glow underneath. `--tempo` is set by page.js
   from the same table the app uses, so tapping 128 here lights the same green
   it lights on the phone. */
.pad {
  display: block;
  width: min(230px, 58vw);
  aspect-ratio: 1;
  margin: clamp(2.25rem, 8vw, 3.25rem) auto 0;
  border: 0;
  border-radius: 50%;
  background: var(--tempo);
  color: var(--tempo-ink);
  font: 600 1.05rem/1.3 var(--sans);
  letter-spacing: 0.01em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  box-shadow:
    0 0 48px 2px color-mix(in srgb, var(--tempo) 32%, transparent),
    0 0 0 17px color-mix(in srgb, var(--tempo) 7%, transparent),
    0 0 0 18px color-mix(in srgb, var(--tempo) 42%, transparent);
}
.pad:active { filter: brightness(1.18); }
.pad:focus-visible { outline: 2px solid var(--ink); outline-offset: 22px; }

.hint {
  margin: 1.5rem 0 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
}

@media (prefers-reduced-motion: no-preference) {
  .pad {
    transition: background-color 200ms ease, box-shadow 200ms ease,
      filter 90ms ease;
  }
  .readout-value { transition: color 200ms ease; }
  .readout { transition: opacity 400ms ease; }
  .tick { transition: background-color 200ms ease; }
}

/* ---------- prose sections ---------- */

.band { padding-block: clamp(3rem, 9vw, 5rem); }
.band h2 {
  margin: 0 0 0.75rem;
  font: 600 clamp(1.35rem, 1.1rem + 1vw, 1.75rem)/1.25 var(--sans);
  letter-spacing: -0.01em;
}
.band p { margin: 0 0 1rem; max-width: 38rem; }
.band p:last-child { margin-bottom: 0; }

.perks {
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1px;
  background: var(--edge);
  border: 1px solid var(--edge);
  border-radius: 12px;
  overflow: hidden;
}
.perks li {
  background: var(--raised);
  padding: 1rem 1.25rem;
}
.perks b {
  display: block;
  font: 600 0.95rem/1.4 var(--sans);
}
.perks span {
  color: var(--muted);
  font-size: 0.95rem;
}

/* The Play feature graphic, reused as the band's opening. It carries the icon,
   so the download card below does not repeat it. */
.banner {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 clamp(1.5rem, 4vw, 2.25rem);
  border: 1px solid var(--edge);
  border-radius: 14px;
}

/* ---------- get-the-app card ---------- */

.getit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 4vw, 2rem);
  margin-top: 2rem;
  padding: clamp(1.25rem, 4vw, 1.75rem);
  border: 1px solid var(--ghost);
  border-radius: 14px;
  background: var(--raised);
}
.getit-icon {
  width: 88px;
  height: 88px;
  border-radius: 20px;
  flex: none;
}
.getit-body { flex: 1 1 16rem; }
.getit-name {
  margin: 0;
  font: 600 1.1rem/1.3 var(--sans);
}
.getit-note {
  margin: 0.3rem 0 0;
  font-size: 0.95rem;
  color: var(--muted);
}
.getit-badge {
  display: inline-block;
  flex: none;
  line-height: 0;
  border-radius: 8px;
}
.getit-badge img {
  height: 58px;
  width: auto;
}

/* ---------- screenshots ---------- */

/* Three across wherever they fit. Below that the row scrolls rather than
   shrinking the phones past the point where the numbers on them are legible. */
.shots {
  display: flex;
  gap: 0.75rem;
  margin: 1.75rem 0 0;
  padding: 0 0 0.5rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
}
.shots figure {
  flex: 1 1 0;
  min-width: 8.5rem;
  margin: 0;
  scroll-snap-align: start;
}
.shots img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--edge);
  border-radius: 12px;
}
.shots figcaption {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--muted);
}
.shots:focus-visible { outline: 2px solid var(--indigo); outline-offset: 4px; }

/* Below this three no longer fit, so the row runs to the screen edge: a strip
   that stops short of the gutter reads as clipped, one that runs off the edge
   reads as scrollable. */
@media (max-width: 32rem) {
  .shots {
    margin-right: calc(var(--gutter) * -1);
    padding-right: var(--gutter);
  }
}
.shots-note {
  margin-top: 1.4rem;
  font-size: 0.85rem;
  color: var(--muted);
}

/* ---------- questions ---------- */

.faq h3 {
  margin: 2rem 0 0.4rem;
  font: 600 1.05rem/1.4 var(--sans);
}
.faq h3:first-of-type { margin-top: 1.5rem; }

.foot {
  border-top: 1px solid var(--edge);
  padding-block: 2rem 3rem;
  font-size: 0.9rem;
  color: var(--muted);
}
.foot p { margin: 0 0 0.4rem; }
.foot p:last-child { margin-bottom: 0; }