/* ── Chapter 2: «چقدر دقیق روی نت می‌خونی؟» ────────────────────
   Only what chapter 2 adds. Everything structural — .stack, .btn,
   .eyebrow, .piano-container, .cue-bar, .coach-card — comes from
   style.css, and both files use the same tokens, so this stays a
   supplement rather than a second theme.
   ─────────────────────────────────────────────────────────── */

.pm-card { position: relative; }

/* The line under the keyboard: score, and what happened. One row,
   because the singer reads it in the gap before the next note and
   anything stacked is something they scroll past instead. */
.pm-readout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  min-height: 2.6em;
  color: var(--ink-2);
  font-size: 0.92rem;
  text-align: center;
}

.pm-readout.warn { color: var(--now); }

.pm-score {
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.pm-readout.good .pm-score { color: var(--ok); }
.pm-detail { font-size: 0.86rem; color: var(--ink-3); }

/* Per-note pips after a phrase: five marks, so "the last two drifted"
   is visible before it is read. */
.pm-notes { display: flex; gap: 6px; }
.pm-pip {
  min-width: 26px;
  padding: 3px 6px;
  border-radius: var(--r-sm);
  font-size: 0.74rem;
  background: rgba(var(--ink-rgb), 0.06);
  border: 1px solid var(--stroke);
  color: var(--ink-3);
}
.pm-pip.ok   { color: var(--ink); border-color: var(--stroke-hi); }
.pm-pip.good { color: var(--ok); border-color: rgba(var(--ok-rgb), 0.45); }

/* The dial. A ring rather than a bar: a bar invites comparison against
   the full width and reads as "you got 68 out of 100 of something",
   while this number is a closeness, not a quantity. */
.pm-dial {
  /* Sized so the free-practice button clears an iPhone's toolbars. Every
     pixel above that button pushes the one useful thing on this screen
     closer to being invisible; the score does not need to be enormous to
     be read. */
  width: 124px;
  height: 124px;
  margin: 2px auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 45%, rgba(var(--ink-rgb), 0.06), transparent 62%),
    var(--glass);
  border: 2px solid var(--stroke-hi);
  box-shadow: var(--shadow-lift);
}

.pm-dial-score {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Tier colours run the same spectrum the keyboard does — violet low,
   cyan high — with amber held back for the top band, the same way the
   piano holds it back for the note happening now. */
.pm-dial.small   { border-color: rgba(var(--low-rgb), 0.55); }
.pm-dial.medium  { border-color: rgba(var(--mid-rgb), 0.65); box-shadow: var(--shadow-glow); }
.pm-dial.large   { border-color: rgba(var(--high-rgb), 0.7);  box-shadow: 0 10px 30px -8px rgba(var(--high-rgb), 0.5); }
.pm-dial.special {
  border-color: rgba(var(--now-rgb), 0.85);
  box-shadow: 0 10px 34px -6px rgba(var(--now-rgb), 0.55);
  animation: pm-glow 2.4s ease-in-out infinite;
}

@keyframes pm-glow {
  0%, 100% { box-shadow: 0 10px 34px -6px rgba(var(--now-rgb), 0.45); }
  50%      { box-shadow: 0 14px 44px -4px rgba(var(--now-rgb), 0.75); }
}

/* ── Confetti ──────────────────────────────────────────────────
   The particles are created and animated from JS (Web Animations),
   removed by their own onfinish, and the layer takes no pointer
   events, so a celebration can never sit between the singer and the
   button underneath it. */
.pm-confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  border-radius: var(--r-lg);
}

.pm-confetti > i {
  position: absolute;
  width: 7px;
  height: 11px;
  border-radius: 2px;
  will-change: transform, opacity;
}

/* ── Transition and unlock ─────────────────────────────────── */
.pm-unlock { animation: pm-rise 420ms ease-out both; }

@keyframes pm-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.pm-voice { margin-bottom: 4px; }

.pm-unlocked {
  align-self: center;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--now);
  border: 1px solid rgba(var(--now-rgb), 0.4);
  background: rgba(var(--now-rgb), 0.08);
  animation: pm-rise 380ms ease-out both;
}

.pm-tip { white-space: pre-line; line-height: 2; }

/* ── Result ────────────────────────────────────────────────── */
.pm-lines {
  width: 100%;
  max-width: 320px;
  margin: 4px auto 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pm-line-value { color: var(--ink); font-weight: 600; }

.pm-coach-body { white-space: pre-line; }

/* The one commercial line in the chapter, and it must read as quieter
   than everything around it — including the free training above it. */
.pm-next {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  opacity: 0.62;
}

.pm-faint {
  font-size: 0.84rem;
  padding: 7px 14px;
}

@media (prefers-reduced-motion: reduce) {
  .pm-dial.special,
  .pm-unlock,
  .pm-unlocked { animation: none; }
}

/* ── The standalone harness (zarebin.html only) ─────────────── */
.pm-setup {
  max-width: 420px;
  margin: 0 auto;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--glass);
  border: 1px solid var(--stroke);
  border-radius: var(--r);
}

.pm-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pm-field select {
  flex: 1;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  background: var(--bg-1);
  color: var(--ink);
  border: 1px solid var(--stroke-hi);
  font: inherit;
}

.pm-plan {
  font-family: var(--mono);
  font-size: 0.74rem;
  direction: ltr;
  text-align: left;
  color: var(--ink-3);
  white-space: pre-wrap;
  line-height: 1.6;
}

.pm-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.pm-modes a {
  font-size: 0.76rem;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke-hi);
  color: var(--ink-2);
  text-decoration: none;
}

.pm-modes a.on { border-color: var(--now); color: var(--now); }

/* ── Chapter 2, Single Note ────────────────────────────────────
   Four steps share one card, and the card changes character
   between them: the settle step goes nearly dark so there is
   nothing to look at, which is the whole point of that step. */

[data-screen].c2-card {
  position: relative;
  gap: 12px;
  padding: 16px 20px 16px;
  background: rgba(var(--ink-rgb), 0.06);
  border: 1px solid rgba(var(--ink-rgb), 0.10);
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(var(--shadow-rgb), 0.5), inset 0 1px 0 rgba(var(--ink-rgb), 0.08);
  /* The one place in the app that uses backdrop-filter, and it is here
     because the reference design calls for it. Chapter 1 dropped it for a
     real reason — the aura behind never stops moving, so the blur can never
     be cached — and that cost lands hardest on this screen, where the meter
     is also painting at 60fps. If a phone shows the needle stuttering, this
     line is the first thing to remove: everything else about the card
     survives without it. */
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  transition: background 400ms ease, border-color 400ms ease;
}

[data-screen].c2-card[data-phase="settle"] { background: rgba(var(--ink-rgb), 0.02); }
[data-screen].c2-card[data-phase="settle"] .dots { opacity: 0.25; }


.c2-instruction {
  min-height: 3.2em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--ink-2);
  font-size: 0.98rem;
  text-align: center;
}

.c2-stage {
  min-height: 208px;
  width: 100%;
  display: grid;
  place-items: center;
}

/* Step 1: the note being played, and nothing else. */
.c2-target {
  font-family: var(--mono);
  font-size: 3.4rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: 0.02em;
  animation: c2-pulse 1.5s ease-out;
}

@keyframes c2-pulse {
  0%   { transform: scale(0.94); opacity: 0.5; }
  18%  { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1); opacity: 0.85; }
}

/* Step 2: a plain countdown ring, drawn by CSS alone. */
.c2-ring { width: 96px; height: 96px; }
.c2-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.c2-ring circle { fill: none; stroke-width: 5; }
.c2-ring .track { stroke: rgba(var(--ink-rgb), 0.07); }
.c2-ring .run {
  stroke: var(--mid);
  stroke-linecap: round;
  stroke-dasharray: 264;
  stroke-dashoffset: 0;
  opacity: 0.85;
}
.c2-ring.go .run {
  animation: c2-drain var(--c2-settle, 2000ms) linear forwards;
}

@keyframes c2-drain {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: 264; }
}

/* Step 3: the meter.

   Ported from the reference design, which is deliberately flat and dark:
   no metal, no texture, no analogue-tuner skeuomorphism. What carries it
   is the colour of the zone the singer is in, and nothing else. */
.c2-meter {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  opacity: 0;
  transition: opacity 320ms ease;
}

.c2-meter.on { opacity: 1; }

.c2-note-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.c2-note-name {
  font-size: 64px;
  font-weight: 800;
  letter-spacing: -2px;
  line-height: 1;
  color: var(--meter-ink);
  transition: color 0.25s ease;
}

.c2-note-hz {
  font-size: 14px;
  color: rgba(var(--ink-rgb), 0.3);
  letter-spacing: 1.5px;
  direction: ltr;
}

.c2-meter-wrap {
  width: 284px;
  max-width: 100%;
  aspect-ratio: 284 / 160;
  position: relative;
}

.c2-meter-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Latin digits and a cents sign, left to right — this is an instrument
   readout, and it sits directly under a note name that is also Latin.
   Persian digits belong to the sentences around it, not to the dial. */
.c2-cents {
  min-width: 90px;
  padding: 6px 18px;
  border-radius: 50px;
  background: rgba(var(--ink-rgb), 0.06);
  border: 1px solid rgba(var(--ink-rgb), 0.08);
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  color: rgba(var(--ink-rgb), 0.5);
  letter-spacing: 0.5px;
  direction: ltr;
  transition: color 0.25s, border-color 0.25s;
}

.c2-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.c2-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(var(--ink-rgb), 0.2);
  flex-shrink: 0;
  transition: background 0.25s, box-shadow 0.25s;
}

.c2-status-text {
  font-size: 14px;
  color: rgba(var(--ink-rgb), 0.35);
  transition: color 0.25s;
}

/* Step 4: the score, in place of the instruction line. */
.c2-score {
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.c2-score-word { font-size: 0.92rem; color: var(--ink-2); }

.c2-actions { min-height: 52px; display: grid; place-items: center; width: 100%; }
.c2-actions .btn { width: 100%; max-width: 300px; }
.c2-actions .vb-outer + .btn { margin-top: 6px; }

.c2-note-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.c2-pip {
  font-family: var(--mono);
  font-size: 0.72rem;
  direction: ltr;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  border: 1px solid var(--stroke);
  color: var(--ink-3);
}

.c2-pip.ok   { color: var(--ink); border-color: var(--stroke-hi); }
.c2-pip.good { color: var(--ok); border-color: rgba(var(--ok-rgb), 0.45); }

.c2-confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  border-radius: var(--r-lg);
}

.c2-confetti > i {
  position: absolute;
  width: 7px;
  height: 11px;
  border-radius: 2px;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .c2-target { animation: none; }
}

/* ── Entry and pane visibility ─────────────────────────────────
   .pm-setup and .stack both set display:flex, which beats the UA
   sheet's [hidden] rule — so a pane marked hidden would otherwise
   stay on screen. */
.c2-begin[hidden],
.pm-setup[hidden] { display: none !important; }

.c2-begin { max-width: 420px; margin: 0 auto; }

/* While the needle is live, the card IS the reference card: note name,
   meter, badge, status. Progress chrome next to a moving needle is one
   more thing to read at the exact moment the singer should be listening
   to themselves — the dots below still say which note this is. */
[data-screen].c2-card[data-phase="sing"] > .eyebrow,
[data-screen].c2-card[data-phase="result"] > .eyebrow { display: none; }

[data-screen].c2-card[data-phase="sing"] .c2-instruction {
  min-height: 1.6em;
  font-size: 0.9rem;
  color: rgba(var(--ink-rgb), 0.45);
}

[data-screen].c2-card[data-phase="sing"] .dots { opacity: 0.4; }

/* The ring behind the confetti — one expanding pulse, drawn from the
   centre of the card. Pointer events are off on the layer above it. */
.c2-burst {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 180px;
  height: 180px;
  margin: 0;
  border-radius: 50%;
  border: 3px solid currentColor;
  transform: translate(-50%, -50%) scale(0.2);
  pointer-events: none;
}

/* ── Level 2: five notes ───────────────────────────────────────
   No analog meter here. It tracks one target and a phrase has five,
   so pointing it at whichever note is "current" would show a number
   about a note the singer may not be on yet. The names carry it:
   they light as the piano plays, then carry each score afterwards. */
.c2-five-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

.c2-five-note {
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 700;
  direction: ltr;
  padding: 10px 12px;
  min-width: 52px;
  text-align: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--stroke);
  background: rgba(var(--ink-rgb), 0.04);
  color: var(--ink-3);
  transition: color 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.c2-five-note.now {
  color: var(--now);
  border-color: rgba(var(--now-rgb), 0.55);
  transform: scale(1.12);
}

.c2-five-note.played { color: var(--ink-2); }
.c2-five-note.good { color: var(--ok); border-color: rgba(var(--ok-rgb), 0.5); }
.c2-five-note.ok   { color: var(--ink); border-color: var(--stroke-hi); }
.c2-five-note.off  { color: var(--err); border-color: rgba(var(--err-rgb), 0.45); }

/* The app's name, at the size of a name. It was set as an eyebrow — the
   smallest type on the screen — which read as a label above the real
   title rather than as what the thing is called. */
.c2-appname {
  font-size: clamp(2.1rem, 9vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-align: center;
  background: linear-gradient(120deg, var(--low), var(--mid) 45%, var(--high));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.c2-tagline { font-size: 1.02rem; color: var(--ink-2); }

/* ── Five notes: the keyboard ──────────────────────────────────── */
.c2-stage-five {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  justify-content: center;
}

.c2-keys { width: 100%; }
.c2-keys .piano-svg { width: 100%; height: auto; display: block; }

/* ── Result: everything after the score arrives a beat later ────
   A celebration interrupted by a recommendation is not a celebration.
   The score lands, the confetti makes its point, and only then does
   the rest fade in. */
.c2-later {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 520ms ease, transform 520ms ease;
  pointer-events: none;
}

.c2-later.in {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* One sentence about what was observed — not a diagnosis. */
.c2-insight {
  color: var(--ink-2);
  font-size: 0.95rem;
  line-height: 1.9;
}

.c2-voice { margin-bottom: 2px; }

/* The free training is the primary action at every level. It is a real
   button; the optional next step below it is a ghost. That hierarchy is
   the point — the useful free thing must never look like the runner-up
   to a commercial one. */
.c2-free-cta {
  display: block;
  text-align: center;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .c2-later { transition: none; }
}

/* The verdict under the score. Centred, and a size up from a paragraph —
   it is the one sentence the singer reads before anything else. */
.c2-verdict {
  text-align: center;
  font-size: 1.05rem;
  color: var(--ink);
  line-height: 1.7;
}

/* The count-in: four beats on the same pulse the run was played at, so the
   singer comes in on the beat instead of guessing when the silence ends. */
[data-screen].c2-card[data-phase="count"] .c2-instruction {
  font-size: 3.4rem;
  font-weight: 800;
  color: var(--now);
  min-height: 1.2em;
  font-variant-numeric: tabular-nums;
}

/* During the count the keyboard goes soft and out of focus, so the numbers
   have nothing to compete with. His idea, and a better one than mine: the
   count was sitting ON a sharp keyboard, which left the eye with two things
   to read at the moment it should be listening. */
[data-screen].c2-card[data-phase="count"] .c2-keys,
[data-screen].c2-card[data-phase="count"] .c2-five-row {
  filter: blur(5px) saturate(0.6);
  opacity: 0.35;
  transform: scale(0.985);
  transition: filter 320ms ease, opacity 320ms ease, transform 320ms ease;
}

/* ...and it comes back sharp the instant the counting stops. */
[data-screen].c2-card .c2-keys,
[data-screen].c2-card .c2-five-row {
  transition: filter 260ms ease, opacity 260ms ease, transform 260ms ease;
}

@media (prefers-reduced-motion: reduce) {
  [data-screen].c2-card[data-phase="count"] .c2-keys,
  [data-screen].c2-card[data-phase="count"] .c2-five-row {
    filter: none;
    opacity: 0.3;
    transform: none;
  }
}

/* The result card is the one screen where vertical space decides whether
   the recommendation is seen at all, so it runs tighter than the rest. */
[data-screen].pm-card { gap: 12px; }
.pm-card .coach-card { gap: 10px; padding: 14px 14px; }
.pm-card .pm-coach-body { line-height: 1.75; font-size: 0.9rem; }

/* The registration link. Styled as the ghost button it replaces, so the
   free practice above it stays the louder of the two. */
.c2-next-cta {
  display: inline-block;
  text-decoration: none;
  text-align: center;
}

/* The free playlist, offered a few seconds after the coach question if that
   question goes unanswered. It fades in rather than appearing, so it reads
   as the app following up rather than as a second pitch. */
.c2-fallback {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  border-color: transparent;
  transition: opacity 420ms ease, max-height 420ms ease,
              padding 420ms ease, border-color 420ms ease;
}

.c2-fallback.in {
  opacity: 1;
  max-height: 260px;
  padding-top: 14px;
  padding-bottom: 14px;
  border-color: rgba(var(--now-rgb), 0.28);
}

@media (prefers-reduced-motion: reduce) {
  .c2-fallback { transition: none; }
}

/* Saying no. Deliberately the quietest thing on the card — always
   available, never competing with the offer above it. */
.c2-decline {
  align-self: center;
  background: none;
  border: none;
  padding: 6px 10px;
  font: inherit;
  font-size: 0.82rem;
  color: var(--ink-3);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.c2-decline:hover, .c2-decline:focus-visible { color: var(--ink-2); }

/* The chapter 1 summary on the report card. Quieter than the score — it is
   context for the number, not the number itself. */
.c2-range-line {
  font-size: 0.95rem;
  color: var(--ink-2);
}

.c2-range-reach {
  font-size: 0.88rem;
  color: var(--ink-3);
  line-height: 1.8;
}

/* ── The report card ───────────────────────────────────────────
   This screen has a job beyond reporting: it is the last thing a
   singer sees before being asked to consider a coach, so it should
   feel like something worth having rather than a table of numbers. */
[data-screen].pm-card .c2-range-card {
  width: 100%;
  padding: 14px 12px 12px;
  border-radius: var(--r);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(var(--low-rgb), 0.12), transparent 70%),
    var(--glass);
  border: 1px solid var(--stroke);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.c2-range-bar { width: 100%; height: auto; display: block; }

/* The voice type, in the app's own spectrum — the one hero line on the
   card, and the thing the singer will repeat to somebody else. */
[data-screen].pm-card .voice-name {
  font-size: clamp(1.7rem, 8vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  background: linear-gradient(120deg, var(--low), var(--mid) 45%, var(--high));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Every line on the final report card is centred. .body-text forces right
   alignment for the paragraphs chapter 1 was written for, and two lines here
   are .body-text (the insight sentence and the coach card's paragraph), so
   they sat on the right while everything else on the card was centred.
   Scoped to this screen: chapter 1 also registers a screen named `result`,
   but its root has no .pm-card, so it keeps its own alignment. */
[data-screen="result"].pm-card .body-text { text-align: center; }

/* Everything arrives in order rather than all at once, so the eye is led
   from who you are, to how you did, to what is next. */
[data-screen].pm-card > * { animation: c2-rise 480ms cubic-bezier(0.22, 1, 0.36, 1) backwards; }
[data-screen].pm-card > *:nth-child(1) { animation-delay: 0.04s; }
[data-screen].pm-card > *:nth-child(2) { animation-delay: 0.12s; }
[data-screen].pm-card > *:nth-child(3) { animation-delay: 0.20s; }
[data-screen].pm-card > *:nth-child(4) { animation-delay: 0.28s; }
[data-screen].pm-card > *:nth-child(5) { animation-delay: 0.36s; }
[data-screen].pm-card > *:nth-child(n+6) { animation-delay: 0.44s; }

@keyframes c2-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-screen].pm-card > * { animation: none; }
}

/* The notes a coach could open up: they breathe, so the eye goes to them.
   This is the one animated thing on the report card, and it is animating
   the only part of the picture that is an invitation rather than a fact. */
.c2-reach { animation: c2-reach-pulse 2.6s ease-in-out infinite; transform-origin: center; }

@keyframes c2-reach-pulse {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 1; }
}

.c2-range-svg { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .c2-reach { animation: none; opacity: 0.9; }
}

/* What happens when you press the button above, said before you press it.
   Quiet, but never hidden — the point is that nobody arrives in a stranger's
   Telegram without having been told they were going there. */
.c2-cta-note {
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--ink-3);
  text-align: center;
}

/* The count itself, big and on its own line, under a prompt that stays put.
   It pulses once per beat so the number is felt as well as read. */
.c2-count {
  font-size: 4.4rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 6px 22px rgba(var(--shadow-rgb), 0.6);
}

.c2-count.tick { animation: c2-count-tick 320ms cubic-bezier(.2, 1.4, .4, 1); }

@keyframes c2-count-tick {
  from { transform: scale(1.35); opacity: 0.55; }
  to   { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .c2-count.tick { animation: none; }
}

/* The count sits over the keyboard rather than replacing it, so the piano is
   still there when the counting stops. */
.c2-stage-five { position: relative; }

.c2-stage-five .c2-count {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  /* Sharp against the blurred keyboard, with enough shadow that it reads
     over any part of it. */
  font-size: 5.2rem;
  color: var(--hero-note-ink);
  text-shadow: 0 6px 30px rgba(var(--bg-0-rgb), 0.95), 0 0 60px rgba(var(--mid-rgb), 0.5);
}

.c2-stage-five .c2-count.tick {
  animation: c2-count-tick-over 320ms cubic-bezier(.2, 1.4, .4, 1);
}

@keyframes c2-count-tick-over {
  from { transform: translate(-50%, -50%) scale(1.35); opacity: 0.55; }
  to   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .c2-stage-five .c2-count.tick { animation: none; }
}

/* A note that was asked for and not sung. Absent, not wrong — so it is
   greyed rather than marked in the colour used for a bad score. */
.c2-five-note.missed {
  color: var(--ink-3);
  border-color: var(--stroke);
  border-style: dashed;
  opacity: 0.7;
}

/* Report footer: learn-more links and the piano licence line. --ink-2 keeps
   contrast above 4.5:1 on the card; links are underlined, not colour-only. */
.c2-foot {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ink-2);
  text-align: center;
}
.c2-foot a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; overflow-wrap: anywhere; }
.c2-foot .c2-credit { unicode-bidi: isolate; }

/* ============================================================
   ذره‌بین, round 2 (light-theme SPEC «ذره‌بین round 2»; boards ZSingle,
   ZFiveIntro, ZStairs). The frame is Cards.screen() (ch1.css): an art
   zone, the text, the foot. At 390x844 each zone keeps its board 1:1 (the
   zone ends where the board's text starts, anchored at its middle); on a
   short screen the zone is what gives. The text has a floor, so the zone
   does not move between the states of one screen. Which parts show is the
   screen's data-phase. Motion is transform and opacity only.
   ============================================================ */
.zr .c1-pic { transform: none; }
/* the zone's own height is the cap (chapter 1 also caps at 46.21dvh, which
   leaves these pictures smaller than the room they have) */
.zr .cs-bg { width: min(100%, 195cqh); }
.c1-zsingle .c1-deco,
.c1-zstairs .c1-deco,
.c1-zintro .c1-deco .cs-bob { display: none; }

/* the pill, 92px from the top (112 on the intro) */
.zr-pill-row { position: absolute; top: 5.75rem; left: 0; right: 0; z-index: 1; display: flex; justify-content: center; }
.c1-zintro .zr-pill-row { top: 7rem; }
.zr-pill {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.4375rem 0.875rem;
  border-radius: 999px;
  background: var(--art-white);
  box-shadow: 0 0 0 1px var(--guide-edge);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--lilac-1);
  white-space: nowrap;
}
.zr-segs { display: flex; gap: 0.25rem; }
.zr-segs span { width: 0.875rem; height: 0.25rem; border-radius: 0.25rem; background: var(--zr-seg-next); }
.zr-segs span.done { background: var(--zr-seg-done); }
.zr-segs span.now { background: var(--lilac-1); }
.zr-unlock { gap: 0.5rem; padding-inline: 1rem; }
.zr-lock svg { display: block; width: 0.875rem; height: 0.875rem; }

/* the words under the picture */
.c1-zsingle > .c1-text,
.c1-zstairs > .c1-text { justify-content: flex-start; min-height: 7.5rem; padding-top: 1.625rem; }
.c1-zstairs > .c1-text { padding-top: 1.75rem; }
.zr-row { display: flex; align-items: center; gap: 0.5rem; font-size: var(--fs-state); font-weight: 800; color: var(--paper-ink); }
.zr-row:empty { display: none; }
.zr-row.sing::before { content: ""; flex: none; width: 0.5625rem; height: 0.5625rem; border-radius: 50%; background: var(--brand); animation: c1-pulse 1.4s ease-in-out infinite; }
.zr-spk svg { display: block; width: 1.25rem; height: 1.25rem; }
.zr-line { max-width: 18.75rem; }
.zr-hint { max-width: 18.75rem; font-size: var(--fs-small); font-weight: 700; line-height: 1.8; color: var(--hint-ink); }
.zr-line:empty,
.zr-hint:empty { display: none; }

/* ── ZSingle: the tuner at (195, 404) r 138; the text at 466 ── */
.c1-zsingle > .c1-art { --art-basis: 27.5rem; }
.c1-zsingle .cs-bg { --cs-anchor: 220; }
.zr-in {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(294 / 844 * 100%);
  height: calc(116 / 844 * 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  pointer-events: none;
}
.zr-in > * { display: none; }
/* 50 and 60 at the board's size, scaled with the picture below it (the
   zone's width and 195cqh, the caps of .zr .cs-bg) */
.zr-note { font-size: min(3.125rem, 12.82cqw, 25cqh); font-weight: 800; line-height: 1; color: var(--paper-ink); }
.zr-small { font-size: var(--fs-body); font-weight: 800; color: var(--paper-ink-2); }
.zr-score { font-family: Lalezar, Vazirmatn, Tahoma, sans-serif; font-size: min(3.75rem, 15.38cqw, 30cqh); line-height: 1; color: var(--now); }
.zr-cents {
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--art-white);
  box-shadow: 0 0 0 1px var(--guide-edge);
  font-size: var(--fs-small);
  font-weight: 800;
  color: var(--paper-ink);
}
.zr-icon svg { display: block; width: 2.75rem; height: 3.75rem; animation: zr-bob 3s ease-in-out infinite alternate; }
.zr[data-phase="start"] .zr-icon,
.zr[data-phase="listen"] .zr-note,
.zr[data-phase="settle"] .zr-note,
.zr[data-phase="sing"] .zr-note,
.zr[data-phase="unclear"] .zr-note,
.zr[data-phase="sing"] .zr-cents,
.zr[data-phase="result"] .zr-small,
.zr[data-phase="result"] .zr-score { display: block; }
.zr[data-phase="settle"] .zr-note,
.zr[data-phase="unclear"] .zr-note { color: var(--zr-note-dim); }
/* the tuner while the piano plays and while the note settles (ZSingle) */
.zr[data-phase="listen"] .tuner-zone { opacity: 0.7; }
.zr[data-phase="listen"] .tuner-zglow { opacity: 0.8; }
.zr[data-phase="settle"] .tuner-zone { opacity: 0.45; }

/* the golf arc (ZSingle2): the old tuner's arc played as golf. The ball turns
   on a group around the pivot (a transform); the flag waves all the time.
   Transform and opacity only; nothing moves under reduced motion. */
.golf-flag { transform-box: fill-box; transform-origin: 0% 50%; animation: golf-wave 3.6s ease-in-out infinite; }
.golf-band-exact { opacity: 0.55; transition: opacity 0.2s ease; }
.golf-exact .golf-band-exact { opacity: 1; }
/* no voice yet and no result: no ball (the tuner's bead did the same) */
.golf:not(.golf-live):not(.golf-over) .golf-ball { opacity: 0; }
.golf-ball { transition: opacity 0.4s ease; }
.zr[data-phase="listen"] .golf-band-wide,
.zr[data-phase="listen"] .golf-band-exact { opacity: 0.7; }
.zr[data-phase="settle"] .golf-band-wide,
.zr[data-phase="settle"] .golf-band-exact { opacity: 0.45; }
/* the hold bar inside the arc: fills while the voice stays on the note */
.zr-hold {
  display: none;
  width: 9rem;
  height: 0.5rem;
  overflow: hidden;
  border-radius: 0.5rem;
  background: var(--zr-seg-next);
}
.zr[data-phase="sing"] .zr-hold { display: block; }
.zr-hold i { display: block; height: 100%; border-radius: 0.5rem; background: var(--tune-ok); transform-origin: left center; transform: scaleX(0); }
.zr[dir="rtl"] .zr-hold i { transform-origin: right center; }
@keyframes golf-wave {
  0%, 100% { transform: skewY(0deg) scaleX(1); }
  25% { transform: skewY(-8deg) scaleX(0.9); }
  75% { transform: skewY(6deg) scaleX(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .golf-flag { animation: none; }
  .golf-ball { transition: none; }
}
/* end of the golf arc */

/* ── ZFiveIntro: the panel 198 to 344, the text from 384 ── */
.c1-zintro > .c1-art { --art-basis: 24rem; }
.c1-zintro .cs-bg { --cs-anchor: 192; }
.zr-ilit { transform-box: fill-box; transform-origin: center; opacity: 0; animation: zr-ilit 5.18s ease-out infinite; }

/* ── ZStairs: the roll 140 to 512, the text at 540 ── */
.c1-zstairs > .c1-art { --art-basis: 32rem; }
.c1-zstairs .cs-bg { --cs-anchor: 256; }
.zr-roll { position: absolute; top: 8.75rem; bottom: 0; left: 1rem; right: 1rem; }
.zr-count-row { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.zr-count {
  display: grid;
  place-items: center;
  width: 5.75rem;
  height: 5.75rem;
  border-radius: 50%;
  background: var(--art-white);
  box-shadow: 0 0 0 1px var(--guide-edge), 0 16px 30px -16px rgba(var(--mark-shadow-rgb), 0.5);
  font-size: 2.875rem;
  font-weight: 800;
  color: var(--now);
  opacity: 0;
}
.zr[data-phase="count"] .zr-count:not(:empty) { opacity: 1; }
.zr-count.tick { animation: zr-tick 0.35s ease-out; }
.zr-done-title,
.zr-legend { display: none; }
.zr[data-phase="done"] .zr-done-title { display: block; font-size: var(--fs-title-err); font-weight: 700; line-height: 1.5; }
.zr[data-phase="done"] .zr-legend { display: flex; align-items: center; gap: 0.875rem; font-size: var(--fs-small); color: var(--paper-ink-2); }
.zr-legend span { display: inline-flex; align-items: center; gap: 0.375rem; }
.zr-legend i { width: 1.25rem; height: 0.625rem; border-radius: 0.375rem; }
.zr-legend i.exact { background: linear-gradient(135deg, var(--lilac-0), var(--lilac-1)); }
.zr-legend i.close { background: var(--art-white); box-shadow: inset 0 0 0 1.5px var(--stairs-mark); }
.zr-legend i.miss { background: var(--zr-seg-next); }

/* ── the report: ZScore (card 1) and ZGift (card 2) ── */
.zr-share {
  position: absolute;
  top: calc(1.375rem + env(safe-area-inset-top, 0px));
  inset-inline-end: 1.375rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--guide-edge);
  border-radius: 50%;
  background: var(--art-white);
  color: var(--paper-ink-2);
  box-shadow: 0 8px 18px -10px rgba(var(--mark-shadow-rgb), 0.35);
  cursor: pointer;
}
.zr-share svg { display: block; width: 1.125rem; height: 1.125rem; }
.zr-lead { font-size: var(--fs-small); color: var(--paper-ink-2); }
.zr-tw { transform-box: fill-box; transform-origin: center; animation: zr-tw 2.8s ease-in-out infinite; }

/* card 1, the final report: the pill at 92, the ring at (195, 234), the number
   at 194, the lead at 334, the tiles at 364, the text at 452 */
.c1-zscore > .c1-art { --art-basis: 20.875rem; }
.c1-zscore .cs-bg { --cs-anchor: 167; }
.c1-zscore .zr-pill { padding-inline: 1rem; }
.c1-zscore > .c1-text { justify-content: flex-start; }
.zr-number-row {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(194 / 844 * 100%);
  height: calc(84 / 844 * 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
/* 60 at the board's size, scaled with the picture; the white edge and the red
   pillow face are the Type card's (cards.css) */
.zr-number { position: relative; font-family: Lalezar, Vazirmatn, Tahoma, sans-serif; font-size: min(3.75rem, 15.38cqw); line-height: 1.4; }
.zr-facts {
  flex: none;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 0 2rem 1.3125rem;
  text-align: center;
}
.zr-facts .zr-lead { line-height: 1.5; }
.zr-tiles { width: 100%; display: flex; justify-content: center; gap: 0.75rem; }
.zr-tile {
  flex: 1 1 0;
  min-width: 0;
  max-width: 9.5rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  padding: 0.625rem 0.75rem;
  border-radius: 1.125rem;
  background: var(--art-white);
  box-shadow: 0 0 0 1px var(--zr-tile-edge), 0 10px 24px -18px rgba(var(--mark-shadow-rgb), 0.45);
}
.zr-tile-label { font-size: var(--fs-small); line-height: 1.5; color: var(--paper-ink-2); }
.zr-tile-value { font-size: var(--fs-state); font-weight: 800; line-height: 1.5; color: var(--paper-ink); white-space: nowrap; }
/* the singer line under the tiles (ZScore2): «your range is close to», the
   Iranian name in the pillow style (the edge and face are cards.css's), «and»
   and a foreign name. The text block under it is pushed down by it. */
.zr-singer { display: flex; flex-direction: column; align-items: center; max-width: 100%; }
.zr-singer-near { font-size: var(--fs-small); line-height: 1.5; color: var(--paper-ink-2); }
.zr-singer-name { position: relative; font-family: Lalezar, Vazirmatn, Tahoma, sans-serif; line-height: 1.45; white-space: nowrap; }
.zr-singer-and { font-size: var(--fs-body); font-weight: 700; line-height: 1.5; color: var(--paper-ink); }
.zr-not-enough { max-width: 9rem; font-size: var(--fs-body); font-weight: 700; line-height: 1.6; color: var(--paper-ink-2); }
.zr-next {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  margin-top: 0.125rem;
  padding: 0.625rem 0.875rem;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--lilac-1);
  cursor: pointer;
}
.zr-next-arrow svg { display: block; width: 1rem; height: 1rem; }
.zr-report[dir="ltr"] .zr-next-arrow { transform: scaleX(-1); }
.zr-tg { margin-top: -0.375rem; font-size: var(--fs-small); color: var(--paper-ink-2); }
/* the silver button 64 from the bottom, the dots 22 */
.c1-foot.zr-score-foot {
  height: calc(7rem + env(safe-area-inset-bottom, 0px));
  padding-bottom: calc(1.375rem + env(safe-area-inset-bottom, 0px));
  gap: 2.25rem;
}
.zr-gift-btn { gap: 0.625rem; }
.zr-gift-word { color: var(--zr-gift-ink); }

/* card 2: the box 168 to 372, the text between 400 and the buttons */
.c1-zgift > .c1-art { --art-basis: 25rem; }
.c1-zgift .cs-bg { --cs-anchor: 200; }
/* the gift box (ZGift2): the box is the button. Closed, the lid rattles like
   a kettle about to boil, the box jitters, light peeks out of the gap and two
   puffs of steam rise. Tapped, the lid flies off, rays and two rings play, and
   the magnifier's own confetti (celebrate) fills the screen. Transform and
   opacity only; nothing moves under reduced motion. */
.zr-box {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  box-sizing: border-box;
  height: min(92cqh, 18rem);
  width: auto;
  aspect-ratio: 260 / 290;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 1.75rem;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.5s ease;
}
.zr-box:disabled { cursor: default; }
/* opening moves nothing: the box shrinks by transform, and the opened words
   and buttons have their room from the start */
.zr-gift-open .zr-box { transform: scale(0.88); }
.zr-swap { display: grid; }
.zr-swap > * { grid-area: 1 / 1; align-self: start; }
.zr-ghost { visibility: hidden; }
.zr-exit { display: grid; justify-items: center; align-items: center; }
.zr-exit > * { grid-area: 1 / 1; }
.zr-gift-open .zr-later { visibility: hidden; }
.zr-box:focus-visible { outline: 3px solid var(--lilac-1); outline-offset: 0.25rem; }
.zr-box svg { display: block; width: 100%; height: 100%; overflow: visible; }
.zr-jitter { transform-box: fill-box; transform-origin: 50% 100%; animation: zr-jitter 2.2s linear infinite; }
.zr-lid-rattle { transform-box: fill-box; transform-origin: 15% 100%; animation: zr-rattle 2.2s linear infinite; }
.zr-peek { animation: zr-peek 2.2s linear infinite; }
.zr-steam { transform-box: fill-box; transform-origin: center; animation: zr-steam 2.2s ease-out infinite; }
.zr-poke { animation: zr-poke 1.1s ease-in-out infinite; }
.zr-rays { transform-box: fill-box; transform-origin: center; opacity: 0; }
.zr-rays-spin { transform-box: fill-box; transform-origin: center; }
.zr-burst {
  position: absolute;
  left: 50%;
  top: 47%;
  width: 10rem;
  height: 10rem;
  margin: -5rem 0 0 -5rem;
  box-sizing: border-box;
  border-radius: 50%;
  border: 3px solid var(--low);
  opacity: 0;
  pointer-events: none;
}
.zr-burst-2 { border-color: var(--brand); }
/* the two states: closed shows the closed-only parts and hides the rest */
.zr-gift-open .zr-closed-only { display: none; }
.zr-gift-closed .zr-opened-only { visibility: hidden; }
.zr-gift-open .zr-jitter { animation: none; }
.zr-gift-open .zr-lid-rattle { animation: zr-away 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.zr-gift-open .zr-rays { animation: zr-rays-in 0.6s ease-out both; }
.zr-gift-open .zr-rays-spin { animation: zr-spin 14s linear infinite; }
.zr-gift-open .zr-burst { animation: zr-burst 0.8s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
.zr-gift-open .zr-burst-2 { animation-delay: 0.12s; }
.zr-later {
  min-height: 2.75rem;
  padding: 0.625rem 1.125rem;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--fs-small);
  color: var(--paper-ink-2);
  cursor: pointer;
}
@keyframes zr-rattle {
  0%, 48%, 100% { transform: translateY(0) rotate(0deg); }
  52% { transform: translateY(-12px) rotate(-6deg); }
  56% { transform: translateY(-2px) rotate(2deg); }
  60% { transform: translateY(-14px) rotate(5deg); }
  64% { transform: translateY(-1px) rotate(-2deg); }
  68% { transform: translateY(-9px) rotate(-4deg); }
  72% { transform: translateY(-1px) rotate(1deg); }
  76% { transform: translateY(-6px) rotate(3deg); }
  82% { transform: none; }
}
@keyframes zr-jitter {
  0%, 48%, 100% { transform: rotate(0); }
  52% { transform: rotate(-1.6deg); }
  56% { transform: rotate(1.6deg); }
  60% { transform: rotate(-1.2deg); }
  64% { transform: rotate(1.2deg); }
  68% { transform: rotate(-0.8deg); }
  76% { transform: rotate(0.6deg); }
  82% { transform: none; }
}
@keyframes zr-peek {
  0%, 48%, 100% { opacity: 0; }
  52% { opacity: 0.9; }
  56% { opacity: 0.2; }
  60% { opacity: 1; }
  64% { opacity: 0.2; }
  68% { opacity: 0.7; }
  76% { opacity: 0.4; }
  82% { opacity: 0; }
}
@keyframes zr-steam {
  0%, 50% { opacity: 0; transform: translateY(0) scale(0.5); }
  60% { opacity: 0.85; }
  100% { opacity: 0; transform: translateY(-46px) scale(1.4); }
}
@keyframes zr-away {
  to { transform: translate(80px, -170px) rotate(32deg); opacity: 0; }
}
@keyframes zr-rays-in {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes zr-spin {
  to { transform: rotate(360deg); }
}
@keyframes zr-burst {
  0% { transform: scale(0.2); opacity: 0.8; }
  100% { transform: scale(3.2); opacity: 0; }
}
@keyframes zr-poke {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(9px); opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .zr-jitter, .zr-lid-rattle, .zr-peek, .zr-steam, .zr-poke, .zr-rays-spin, .zr-burst { animation: none; }
  .zr-peek, .zr-steam, .zr-burst { opacity: 0; }
  .zr-gift-open .zr-lid-rattle { animation: zr-away 0.01s forwards; }
  .zr-gift-open .zr-rays { animation: none; opacity: 1; }
  .zr-box { transition: none; }
}
/* end of the gift box */
.c1-foot.zr-gift-foot {
  height: auto;
  padding-top: 0.75rem;
  padding-bottom: calc(0.375rem + env(safe-area-inset-bottom, 0px));
}
.zr-gift-foot .c1-silver { min-width: 13.75rem; }
.zr-under { margin-top: 0.75rem; font-size: var(--fs-small); color: var(--paper-ink-2); }
.zr-coach {
  max-width: 20rem;
  margin-top: 0.75rem;
  padding: 0.625rem;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--paper-ink-2);
  cursor: pointer;
}
.zr-coach span { font-weight: 700; color: var(--lilac-1); }
.zr-gift-foot .zr-finish { margin-top: 0; }
.zr-gift-foot .cs-dots { margin-top: 1rem; }
.zr-credit { margin-top: 0.25rem; font-size: 0.625rem; color: var(--paper-ink-3); unicode-bidi: isolate; }

/* a short screen: the pill near the top, the pictures centred on what they
   show, the roll given first */
@media (max-height: 720px) {
  .zr-pill-row,
  .c1-zintro .zr-pill-row { top: 0.75rem; }
  .c1-zsingle .cs-bg { --cs-anchor: 300; }
  .c1-zintro .cs-bg { --cs-anchor: 260; }
  .zr-roll { top: 3.25rem; }
  .c1-zsingle > .c1-text,
  .c1-zstairs > .c1-text { min-height: 6.5rem; padding-top: 0.5rem; }
  .c1-zgift .cs-bg { --cs-anchor: 270; }
  .zr-under,
  .zr-coach { margin-top: 0.25rem; }
  .zr-gift-foot .cs-dots { margin-top: 0.5rem; }
}

/* the final report once the art zone starts to give (under about 760): the
   pill near the top, and the ring's disc (192 of the picture) fits what is
   left under the pill, so they never touch and the number shrinks with it */
@media (max-height: 760px) {
  .c1-zscore .zr-pill-row { top: 0.75rem; }
  .c1-zscore .cs-bg {
    --cs-anchor: 234;
    top: calc(2.875rem + (100% - 2.875rem) / 2);
    width: min(100%, calc((100cqh - 2.875rem) * 2.03125));
  }
  .zr-number { font-size: min(3.75rem, 15.38cqw, calc((100cqh - 2.875rem) * 0.3125)); }
  .zr-facts { gap: 0.375rem; padding-bottom: 0.625rem; }
  .zr-tile { padding-block: 0.375rem; }
  /* the count, «most likely» and the singer line were added to this card;
     they take line height back so the ring keeps its size */
  .zr-tile-label { line-height: 1.3; }
  .zr-tile-value { line-height: 1.25; }
  .zr-singer-near,
  .zr-singer-and { line-height: 1.3; }
  .zr-singer-name { line-height: 1.15; }
  .c1-zscore .c1-title { line-height: 1.3; }
  .c1-zscore .c1-body { line-height: 1.55; }
  .c1-zscore > .c1-text { padding-bottom: 0.5rem; }
  .c1-foot.zr-score-foot { height: auto; gap: 1rem; }
}

/* the smallest phones: the one insight sentence goes, so the ring stays a
   ring (the singer line and the note count stay) */
@media (max-height: 600px) {
  .c1-zscore .c1-body { display: none; }
}

@keyframes zr-bob { from { transform: translateY(-6px); } to { transform: translateY(6px); } }
@keyframes zr-tick { 0% { transform: scale(0.7); } 60% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes zr-ilit {
  0% { opacity: 0; transform: translateY(4px) scale(0.8); }
  3.24% { opacity: 1; transform: translateY(-6px) scale(1.12); }
  8.92% { opacity: 1; transform: translateY(0) scale(1); }
  12.97% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes zr-tw { 0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); } 45%, 55% { opacity: 1; transform: scale(1) rotate(45deg); } }
@media (prefers-reduced-motion: reduce) {
  .zr-tw,
  .zr-icon svg,
  .zr-row.sing::before,
  .zr-count.tick,
  .zr-ilit { animation: none; }
  .zr-ilit.top,
  .zr-tw { opacity: 1; }
}