/* Treblew's public pages (legal-site.ts). The app's palette (apps/mobile/src/ui/theme.tsx): dark by
   default like the app, light when the reader's system asks for it. System fonts only: nothing is
   fetched from anywhere else. */

:root {
  color-scheme: dark;
  --background: #050706;
  --surface: #111514;
  --separator: #2a312e;
  --text-primary: #f4f7f5;
  --text-secondary: #a9b3ae;
  --accent: #5ee6a8;
  --on-accent: #04231a;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --background: #eff2f0;
    --surface: #ffffff;
    --separator: #dce2de;
    --text-primary: #0c1210;
    --text-secondary: #4e5a54;
    --accent: #0b7a50;
    --on-accent: #ffffff;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--text-primary);
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

/* One readable column, with the app's 16 px side gutter on a phone. */
body > header,
main,
body > footer {
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 16px;
}

a {
  color: var(--accent);
  text-underline-offset: 0.15em;
}

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Addresses and URLs never push the page sideways. */
a[href^='mailto:'],
a[href^='http'] {
  overflow-wrap: anywhere;
}

.skip {
  position: absolute;
  left: 16px;
  top: -4rem;
  padding: 0.5rem 1rem;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  border-radius: 8px;
}

.skip:focus {
  top: 0.5rem;
}

body > header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--separator);
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-primary);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-decoration: none;
}

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
}

/* Tap targets of at least 44 pt. */
nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-secondary);
  font-weight: 600;
  text-decoration: none;
}

nav a:hover,
nav a[aria-current='page'] {
  color: var(--accent);
}

main {
  padding-top: 1.5rem;
  padding-bottom: 3rem;
}

h1,
h2,
h3 {
  line-height: 1.2;
  letter-spacing: -0.02em;
}

h1 {
  margin: 0.5rem 0 1.5rem;
  font-size: clamp(2rem, 6vw, 2.5rem);
  font-weight: 800;
}

h2 {
  margin: 2.5rem 0 0.75rem;
  font-size: 1.375rem;
  font-weight: 700;
}

/* A document's subheading that comes before any heading (In short) is an h2 for the outline,
   drawn as the h3 it is in the text. */
h3,
h2.h3 {
  margin: 1.75rem 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
}

p,
ul {
  margin: 0 0 1rem;
}

ul {
  padding-left: 1.5rem;
}

li {
  margin-bottom: 0.35rem;
}

.lead {
  color: var(--text-secondary);
  font-size: 1.1875rem;
}

/* The home page (Designer 1): the app icon, the wordmark drawn from the app's geometry, the lead,
   then a card for each part of the app, one column on a phone and two from 720 px. */
.hero .logo {
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 22px;
}

.hero h1 {
  margin: 1rem 0;
  line-height: 0;
}

.wordmark {
  display: block;
  max-width: 100%;
  height: auto;
}

.wordmark-mark {
  stroke: var(--accent);
}

.wordmark-ink {
  fill: var(--text-primary);
}

.hero .lead {
  margin-bottom: 0.5rem;
  color: var(--text-primary);
  font-size: 1.25rem;
}

.hero .sub {
  color: var(--text-secondary);
}

.features {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 2rem 0 0;
}

@media (min-width: 720px) {
  .features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.feature {
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: 16px;
}

.feature h2 {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
}

.feature ul {
  margin: 0;
  padding-left: 1.25rem;
}

.pages {
  padding: 0;
  list-style: none;
}

/* A sport page's captures of the app: a phone's screen at half its pixels, a watch's at its own. */
.page-shot {
  margin: 1.5rem 0;
}

.page-shot img {
  display: block;
  width: 100%;
  max-width: 330px;
  height: auto;
  border-radius: 1rem;
}

.page-shot-wide img {
  max-width: 100%;
}

/* The home page's quiet row of the sport pages. */
.by-sport ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.by-sport-title {
  margin: 0 0 0.75rem;
  font-size: 1rem;
}

.pages a {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 0 1rem;
  margin-bottom: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: 16px;
  font-weight: 600;
  text-decoration: none;
}

body > footer {
  padding-top: 1rem;
  padding-bottom: 2.5rem;
  border-top: 1px solid var(--separator);
  color: var(--text-secondary);
  font-size: 0.9375rem;
}

body > footer p {
  margin: 0.5rem 0 0;
}

/* An archived version's note (replaced, or the current one): a quiet box on the secondary
   surface, body-size text, never a warning colour (Designer 1). Then the link to a document's
   versions, and the list's "(current)". */
.notice {
  padding: 0.75rem 1rem;
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: 16px;
}

.versions {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--separator);
}

.secondary {
  color: var(--text-secondary);
}

/* ------------------------------------------------------------------------------------------------
   The home page (body.home; the approved marketing design, 21 October 2026). Dark always, like the
   screenshots it shows. Type is the app's own (Archivo for display, Instrument Sans for text,
   legal-site-assets/fonts, subset to Latin). Every rule below is scoped to the home page's own
   classes so the documents' pages stay as they are. Motion only explains a feature; with reduced
   motion there is none.
   ------------------------------------------------------------------------------------------------ */

@font-face {
  font-family: 'Archivo Display';
  src: url('/fonts/Archivo-800-86.woff') format('woff');
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: 'Archivo';
  src: url('/fonts/Archivo-700-100.woff') format('woff');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Sans';
  src: url('/fonts/InstrumentSans-400.woff') format('woff');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Sans';
  src: url('/fonts/InstrumentSans-600.woff') format('woff');
  font-weight: 600;
  font-display: swap;
}

.home {
  color-scheme: dark;
  --background: #050706;
  --surface: #0e1311;
  --surface-2: #151b19;
  --separator: #24302b;
  --text-primary: #f4f7f5;
  --text-secondary: #a9b3ae;
  --text-tertiary: #7d8883;
  --accent: #5ee6a8;
  --on-accent: #04231a;
  /* The four sport tones are the app's dark palette's bright steps (ui/theme.tsx), as the rhythm's. */
  --golf: #7bd66a;
  --racket: #ff9068;
  --pickleball: #ff8cc2;
  --strength: #86acff;
  --run: #4fd0ea;
  --coach: #a99bff;
  --yoga: #c7a6ff;
  --bike: #f08fb4;
  --health: #ff8fa0;
  --display:
    'Archivo Display', 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--background);
  color: var(--text-primary);
  font-family:
    'Instrument Sans',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Arial,
    sans-serif;
  font-size: 1.0625rem;
}

.home > header,
.home > main,
.home > footer {
  max-width: none;
  padding: 0;
}

/* Nothing pushes the page sideways (clip, not hidden: the dock below stays sticky). */
.home > main {
  overflow-x: clip;
}

.home h1,
.home h2,
.home h3,
.home .ls-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.home p {
  margin: 0;
}

.home main ul,
.home main ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.home li {
  margin: 0;
}

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 32px);
}

.wrap.narrow {
  max-width: 860px;
}

.eyebrow {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.tone-mint {
  color: var(--accent);
}
.tone-golf {
  color: var(--golf);
}
.tone-racket {
  color: var(--racket);
}
.tone-strength {
  color: var(--strength);
}
.tone-run {
  color: var(--run);
}
.tone-coach {
  color: var(--coach);
}
.tone-health {
  color: var(--health);
}
.tone-quiet {
  color: var(--text-tertiary);
}

/* ---- The app's icons ------------------------------------------------------------------------
   ui/Icon.tsx's Material Symbols, from the page's one hidden sprite, in the colour they sit in. An
   activity's mark is its own icon in its tone (activityIdentity; the eight tones, the dark
   palette's bright steps from ui/theme.tsx), beside its name. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ic {
  display: inline-block;
  flex: none;
  width: 1.2em;
  height: 1.2em;
  fill: currentColor;
  vertical-align: -0.24em;
}

.at-strength {
  --t: #86acff;
}
.at-tennis {
  --t: #ff9068;
}
.at-running {
  --t: #4fd0ea;
}
.at-golf {
  --t: #7bd66a;
}
.at-pickleball {
  --t: #ff8cc2;
}
.at-cycling {
  --t: #ffc24d;
}
.at-swimming {
  --t: #74c8ff;
}
.at-neutral {
  --t: #b7c2cb;
}

.act {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

.act .ic {
  color: var(--t, currentColor);
}

.eyebrow .ic {
  width: 1.45em;
  height: 1.45em;
  margin-right: 0.45em;
  vertical-align: -0.42em;
}

/* Buttons: 52 px like the app's; the header's 44. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 10px 30px -10px rgba(94, 230, 168, 0.55);
  transition: background-color 0.2s;
}

@media (prefers-reduced-motion: no-preference) {
  .btn {
    transition:
      background-color 0.2s,
      transform 0.2s;
  }
}

.btn:hover {
  background: #8ff0c4;
  color: var(--on-accent);
}

.btn:active {
  transform: scale(0.98);
}

.home .btn:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 3px;
  border-radius: 999px;
}

.btn-small {
  min-height: 44px;
  white-space: nowrap;
  padding: 0 18px;
  font-size: 0.9375rem;
  box-shadow: none;
}

/* Apple's App Store badge, the official file as it is (Apple's badge guidelines): never under
   40 px tall, a quarter of its height clear on every side (the link's padding), nothing touching
   it, never smaller than a button near it, and no effect on hover. */
.store {
  --badge: 56px;
  display: inline-block;
  flex: none;
  padding: calc(var(--badge) / 4);
  border-radius: 12px;
  line-height: 0;
}

.store img {
  display: block;
  width: auto;
  height: var(--badge);
  aspect-ratio: auto 120 / 40;
}

/* The hero's badge lines up with the words above it; its clear space hangs into the margin. */
.cta .store {
  margin-left: calc(var(--badge) / -4);
}

/* Until the App Store page exists (APP_STORE_URL in legal-site.ts): words, not a button or a
   badge, so nothing looks pressable that leads nowhere. */
.store-soon {
  margin: 0;
  color: var(--text-primary);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
}

.home .store:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: -4px;
}

/* The header: logo and wordmark, the sections, Get Treblew. Sticky, over a blurred page. No line
   under it (the legal pages' header keeps theirs): black header and black hero are one surface. */
.home > header {
  display: block;
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 0;
  background: rgba(5, 7, 6, 0.8);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  backdrop-filter: saturate(1.4) blur(16px);
}

.home .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}

.home .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}

/* The header's mark: the symbol, opening into the word on hover or keyboard focus (the app's
   launch, LaunchScreen). The whole word is drawn 30 px tall (58 units, --u px each); closed, the w
   stands in the t's cup (wX 196.34 units back) and the letters are shut towards their left edge.
   The link grows with the word while its negative margin keeps the bar from moving. Numbers pinned
   against wordmarkGeometry.ts in legal-site.test.ts. Touch screens keep the symbol. */
.brand-open {
  --u: calc(30px / 58);
  padding: 0 6px;
  margin: 0 -6px;
  border-radius: 10px;
}

.mark-box {
  display: block;
  width: calc(61 * var(--u));
  height: 30px;
}

.mark-box .wordmark {
  max-width: none;
  overflow: visible;
}

.mark-w {
  transform: translateX(-196.34px);
}

.mark-letters {
  transform-box: fill-box;
  transform-origin: left center;
  transform: scaleX(0.05);
  opacity: 0;
}

@media (hover: hover) {
  .brand-open:hover,
  .brand-open:focus-visible {
    margin-right: calc((61 - 257.34) * var(--u) - 6px);
  }

  .brand-open:hover .mark-box,
  .brand-open:focus-visible .mark-box {
    width: calc(257.34 * var(--u));
  }

  .brand-open:hover .mark-w,
  .brand-open:focus-visible .mark-w,
  .brand-open:hover .mark-letters,
  .brand-open:focus-visible .mark-letters {
    transform: none;
    opacity: 1;
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .brand-open,
  .mark-box,
  .mark-w,
  .mark-letters {
    transition:
      margin 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
      width 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
      transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
      opacity 0.22s ease-out;
  }
}

.home .bar nav {
  gap: 0 22px;
}

.home .bar nav a {
  font-size: 0.9375rem;
  font-weight: 500;
}

.home .bar nav a:hover {
  color: var(--text-primary);
}

@media (max-width: 960px) {
  .home .bar nav {
    display: none;
  }
}

/* Words for readers only (the floating cards' Detected). */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Detected on a floating card: the mark's lightning after its title, in the mark's colour,
   centred on the title's line (a flex row, no baseline offset) and about its cap height. */
.hc-title:has(> .exp-mark) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.exp-mark {
  display: inline-flex;
  flex: none;
  color: #9fe9c7;
}

.exp-mark .ic {
  width: 0.8em;
  height: 0.8em;
}

/* Small marks: Detected, Treblew Pro, Free on iPhone. */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag,
.tags li {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  border: 1px solid var(--separator);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.1;
  vertical-align: 0.1em;
}

.tag .ic {
  width: 1.15em;
  height: 1.15em;
  margin: -2px 5px -2px -2px;
}

.tag-pro {
  border-color: #3d3566;
  color: #c9c0ff;
}

.tag-exp {
  border-color: #2d4a3d;
  color: #9fe9c7;
}

.card {
  position: relative;
  border: 1px solid var(--separator);
  border-radius: 28px;
  background: linear-gradient(180deg, #111715, var(--surface) 40%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.figure {
  font-family: var(--display);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1;
}

.fine {
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: 1.55;
}

/* Lists of points, each with a check mark drawn in CSS. */
.checks {
  display: grid;
  gap: 14px;
}

.checks li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  line-height: 1.5;
}

/* The app's check (Icon `check`), on the first line. */
.checks li > .ic {
  width: 22px;
  height: 22px;
  margin-top: 0.06em;
  color: var(--accent);
}

.checks-coach li > .ic {
  color: var(--coach);
}

.checks .tag {
  margin-left: 4px;
}

/* ---- The iPhone, drawn in CSS ----------------------------------------------------------------
   Sized by its width (--w); everything inside is in cqw of that width, so it keeps the hardware's
   proportions at any size. A titanium band (brushed: a fine grain over a curved highlight), the
   black bezel, a 19.5:9 screen with corners matching the hardware, the status bar and the Dynamic
   Island, the action button, volume and side buttons, and a faint glare on the glass. */

.phone {
  --w: 280px;
  container-type: inline-size;
  position: relative;
  width: var(--w);
  max-width: 100%;
  flex: none;
}

.phone-body {
  position: relative;
  padding: 1.35cqw;
  border-radius: 16.8cqw;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.22),
      transparent 4%,
      transparent 96%,
      rgba(0, 0, 0, 0.35)
    ),
    linear-gradient(
      90deg,
      #26292c 0%,
      #9a9ea3 1.1%,
      #63676b 2.4%,
      #3d4043 5%,
      #2b2e31 50%,
      #3d4043 95%,
      #63676b 97.6%,
      #9a9ea3 98.9%,
      #26292c 100%
    );
  box-shadow:
    0 0 0 0.35cqw #121416,
    inset 0 0 0 0.3cqw rgba(255, 255, 255, 0.16),
    inset 0 0.6cqw 0.8cqw rgba(255, 255, 255, 0.12),
    0 3cqw 6cqw rgba(0, 0, 0, 0.45),
    0 16cqw 30cqw -8cqw rgba(0, 0, 0, 0.75);
}

.phone-bezel {
  padding: 3.1cqw;
  border-radius: 15.4cqw;
  background: #020303;
  box-shadow:
    inset 0 0 0 0.35cqw #0d0f10,
    inset 0 0 1.2cqw rgba(255, 255, 255, 0.06);
}

.phone-screen {
  position: relative;
  aspect-ratio: 9 / 19.5;
  overflow: hidden;
  border-radius: 12.3cqw;
  background: #050706;
  isolation: isolate;
}

/* The glass: a soft diagonal glare, strongest at the top left. */
.phone-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background:
    linear-gradient(
      122deg,
      rgba(255, 255, 255, 0.09) 0%,
      rgba(255, 255, 255, 0.035) 26%,
      rgba(255, 255, 255, 0) 27%
    ),
    radial-gradient(120% 60% at 0% 0%, rgba(255, 255, 255, 0.05), transparent 60%);
  box-shadow: inset 0 0 0 0.2cqw rgba(255, 255, 255, 0.04);
  pointer-events: none;
}

.status {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 12.6cqw;
  padding: 0 7.5cqw 0 9.5cqw;
  background: #050706;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Instrument Sans', sans-serif;
  font-size: 4.1cqw;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.island {
  position: absolute;
  left: 50%;
  top: 2.5cqw;
  width: 28cqw;
  height: 8.3cqw;
  border-radius: 99px;
  background: #000;
  transform: translateX(-50%);
  box-shadow: inset 0 0 0 0.25cqw #0b0b0c;
}

/* The camera lens, a faint ring at the island's right. */
.island::after {
  content: '';
  position: absolute;
  right: 2.6cqw;
  top: 50%;
  width: 2.6cqw;
  height: 2.6cqw;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #1d2a3a, #07090c 60%);
  transform: translateY(-50%);
}

.glyphs {
  display: flex;
  align-items: center;
  gap: 1.6cqw;
}

/* Signal: four rising bars. */
.signal {
  width: 5cqw;
  height: 3.2cqw;
  background:
    linear-gradient(#fff, #fff) 0 100% / 0.85cqw 30% no-repeat,
    linear-gradient(#fff, #fff) 1.38cqw 100% / 0.85cqw 52% no-repeat,
    linear-gradient(#fff, #fff) 2.76cqw 100% / 0.85cqw 76% no-repeat,
    linear-gradient(#fff, #fff) 4.14cqw 100% / 0.85cqw 100% no-repeat;
}

.battery {
  position: relative;
  width: 6.4cqw;
  height: 3.1cqw;
  border: 0.32cqw solid rgba(255, 255, 255, 0.45);
  border-radius: 1cqw;
  background: linear-gradient(#fff, #fff) 0.35cqw 50% / 72% 62% no-repeat;
}

.battery::after {
  content: '';
  position: absolute;
  right: -1.05cqw;
  top: 50%;
  width: 0.55cqw;
  height: 1.2cqw;
  border-radius: 0 0.5cqw 0.5cqw 0;
  background: rgba(255, 255, 255, 0.45);
  transform: translateY(-50%);
}

/* The screenshot fills the screen below the status bar, top first; never stretched. */
.phone-screen img {
  position: absolute;
  left: 0;
  top: 12.6cqw;
  z-index: 1;
  display: block;
  width: 100%;
  height: calc(100% - 12.6cqw);
  object-fit: cover;
  object-position: top;
}

/* The buttons: action, volume up and down on the left, the side button on the right. */
.pb {
  position: absolute;
  width: 1.2cqw;
  border-radius: 0.6cqw;
  background: linear-gradient(90deg, #8a8e92, #43464a 60%, #2a2c2f);
  box-shadow: inset 0 0 0 0.15cqw rgba(0, 0, 0, 0.35);
}

.pb-action,
.pb-up,
.pb-down {
  left: -0.85cqw;
}

.pb-action {
  top: 17.5%;
  height: 4.6%;
}

.pb-up {
  top: 26.5%;
  height: 8.6%;
}

.pb-down {
  top: 37%;
  height: 8.6%;
}

.pb-side {
  right: -0.85cqw;
  top: 29%;
  height: 13%;
  background: linear-gradient(270deg, #8a8e92, #43464a 60%, #2a2c2f);
}

/* The hero's phone shows five screens in turn (below, with motion); without motion, the first. */
.cycle img + img {
  opacity: 0;
}

/* ---- Sections -------------------------------------------------------------------------------- */

/* The lower page's pace (Direction A): 96 px a side on a wide screen, 64 on a phone. */
.sec {
  position: relative;
  padding: clamp(64px, 7vw, 96px) 0;
}

.sec-head {
  display: grid;
  gap: 18px;
  max-width: 760px;
  margin-bottom: clamp(28px, 3vw, 40px);
}

.sec-head h2,
.final h2,
#faq h2 {
  font-size: clamp(2.375rem, 5.4vw, 3.75rem);
  line-height: 1.02;
}

.sec-lead {
  color: var(--text-secondary);
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  line-height: 1.55;
}

/* The hero: one line of what Treblew is, the button above the fold, the phone cycling screens. */
.hero {
  --hero: 17.5s;
  position: relative;
  padding: clamp(40px, 7vw, 96px) 0 clamp(48px, 6vw, 80px);
}

.hero-grid {
  position: relative;
}

/* ---- The rhythm: the app's artwork (RhythmArt, decision 209) ---------------------------------
   The hero wears it as the app's tab headers do (HeaderBackdrop, decision 478): the cups hanging
   from the top, large and cropped at the sides, faded into the ground, with the sign-in's two glows
   (accentFill from the top right, strength's blue from the top left). Where words sit the cups stay
   at about the header's safe level, so secondary text keeps 4.5:1 over any cup; they show more
   behind the phone. A wide band has nine cups (one whole rhythm), a phone's five. */
.hero-backdrop,
.final-art {
  position: absolute;
  inset: 0 0 auto;
  overflow: hidden;
  pointer-events: none;
}

/* Black at the top, so the hero and the header read as one surface: the glows and the cups come
   out of the dark to their full strength about a third of the way down. */
.hero-backdrop {
  --fade: min(36%, 320px);
  bottom: 0;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent,
    rgba(0, 0, 0, 0.12) calc(var(--fade) * 0.3),
    rgba(0, 0, 0, 0.5) calc(var(--fade) * 0.6),
    #000 var(--fade)
  );
  mask-image: linear-gradient(
    to bottom,
    transparent,
    rgba(0, 0, 0, 0.12) calc(var(--fade) * 0.3),
    rgba(0, 0, 0, 0.5) calc(var(--fade) * 0.6),
    #000 var(--fade)
  );
  background:
    radial-gradient(95% 98% at 100% 0%, rgba(45, 190, 130, 0.255), rgba(45, 190, 130, 0) 62%),
    radial-gradient(75% 80% at 0% 8%, rgba(79, 134, 247, 0.195), rgba(79, 134, 247, 0) 66%);
}

.rhythm {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  overflow: hidden;
}

.rhythm.narrow {
  display: none;
}

.hero-backdrop .rhythm {
  height: min(72%, 620px);
  opacity: 0.6;
  -webkit-mask-image:
    linear-gradient(to bottom, #000 25%, transparent 94%),
    linear-gradient(to right, rgba(0, 0, 0, 0.36) 36%, #000 60%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, #000 25%, transparent 94%),
    linear-gradient(to right, rgba(0, 0, 0, 0.36) 36%, #000 60%);
  mask-composite: intersect;
}

/* A section's piece: a few cups in its tone, cropped at the page's edge, away from the words. */
.sec-art {
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(240px, 30vw, 440px);
  aspect-ratio: 400 / 312;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.5;
  /* No edge at the section's top: the cups come out of the dark along a curve (no straight line),
     their rounded ends showing, and fade before the box's foot. */
  -webkit-mask-image:
    radial-gradient(
      110% 90% at 60% 72%,
      #000 30%,
      rgba(0, 0, 0, 0.6) 50%,
      rgba(0, 0, 0, 0.2) 70%,
      rgba(0, 0, 0, 0.05) 82%,
      transparent 92%
    ),
    linear-gradient(to bottom, #000 70%, transparent 98%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(
      110% 90% at 60% 72%,
      #000 30%,
      rgba(0, 0, 0, 0.6) 50%,
      rgba(0, 0, 0, 0.2) 70%,
      rgba(0, 0, 0, 0.05) 82%,
      transparent 92%
    ),
    linear-gradient(to bottom, #000 70%, transparent 98%);
  mask-composite: intersect;
}

.sec-art .rhythm {
  width: 130%;
  height: 100%;
}

.sec > .wrap {
  position: relative;
}

/* On a phone the words sit over the cups: the phone's five, at the header's safe level throughout. */
@media (max-width: 700px) {
  .rhythm.wide {
    display: none;
  }

  .rhythm.narrow {
    display: block;
  }

  .hero-backdrop {
    --fade: 220px;
  }

  .hero-backdrop .rhythm {
    height: 340px;
    opacity: 0.3;
    -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent 96%);
    mask-image: linear-gradient(to bottom, #000 35%, transparent 96%);
  }

  .sec-art {
    width: 62vw;
    opacity: 0.32;
  }
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-areas:
    'copy art'
    'tags art';
  gap: 24px clamp(32px, 5vw, 64px);
}

.hero-copy {
  grid-area: copy;
  align-self: end;
  display: grid;
  gap: 24px;
  justify-items: start;
}

.hero-tags {
  grid-area: tags;
  align-self: start;
}

/* The name, once: a signature above the value line (the header carries the mark), so the headline
   is the hero's one big line. */
.hero-mark .wordmark {
  width: auto;
  height: 56px;
}

.hero-mark + .eyebrow {
  margin-top: -8px;
}

.home .hero h1 {
  font-size: clamp(2.75rem, 7vw, 5.25rem);
  line-height: 0.96;
  letter-spacing: -0.025em;
}

.home .hero .lead {
  max-width: 34ch;
  color: var(--text-primary);
  font-size: clamp(1.125rem, 1.8vw, 1.3125rem);
  line-height: 1.5;
}

.hero .sub {
  margin-top: -12px;
  color: var(--text-secondary);
}

.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
}

.aside {
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: 1.4;
}

.hero-art {
  --pw: clamp(250px, 25vw, 320px);
  grid-area: art;
  align-self: center;
  position: relative;
  display: grid;
  justify-items: end;
  gap: 18px;
  padding-bottom: 8px;
}

.phone-hero {
  --w: var(--pw);
}

/* Which screen is up: an indicator in the eyebrow's style, the current name underlined; not tabs. */
.cycle-key {
  display: flex;
  justify-content: center;
  gap: 18px;
  width: var(--pw);
  color: var(--text-tertiary);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.cycle-key li {
  padding-bottom: 6px;
  border-bottom: 2px solid transparent;
}

.cycle-key li:first-child {
  border-bottom-color: var(--accent);
  color: var(--accent);
}

/* Each name is a choice of the hero's screens, as Golf's steps are ("Choosing a step"; legal-site.ts,
   HERO_LOOP): its label pressed over a little more than the name, without taking space. */
.cycle-key li {
  position: relative;
}

.cycle-key .ls-label::after,
.cycle-key .ls-label-again::after {
  inset: -10px -4px;
}

.cycle-key li:has(.ls-pick-again:checked) .ls-pick {
  display: none;
}

.cycle-key li:has(.ls-pick:checked) .ls-label-again {
  pointer-events: auto;
}

@media (hover: hover) {
  .cycle-key li:hover {
    filter: brightness(1.5);
  }
}

.cycle-key li:has(:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}

/* With reduced motion, a chosen screen shows still with its cards (legal-site.ts sets each at its
   moment), each screen's pieces at its own turn, as with motion (below). */
@media (prefers-reduced-motion: reduce) {
  .cycle img:nth-of-type(2),
  .cycle-key li:nth-child(2),
  .hs:nth-child(2) {
    --d: -14s;
  }
  .cycle img:nth-of-type(3),
  .cycle-key li:nth-child(3),
  .hs:nth-child(3) {
    --d: -10.5s;
  }
  .cycle img:nth-of-type(4),
  .cycle-key li:nth-child(4),
  .hs:nth-child(4) {
    --d: -7s;
  }
  .cycle img:nth-of-type(5),
  .cycle-key li:nth-child(5),
  .hs:nth-child(5) {
    --d: -3.5s;
  }
}

/* ---- The hero's cards ------------------------------------------------------------------------
   One set per hero screen, stacked in one place and shown with its screen (below, with motion;
   without, Golf's alone): Golf's tempo, Tennis's strokes, Strength's exercise guide, Today's weekly
   target; Golf and Tennis add the Apple Watch motion strip. */
.hero-cards {
  position: absolute;
  left: -16px;
  bottom: 40px;
  z-index: 2;
  display: grid;
  width: min(300px, calc(100% + 16px - var(--pw) * 0.75));
}

.hs {
  grid-area: 1 / 1;
  display: grid;
  align-content: end;
  gap: 10px;
}

.hs + .hs {
  opacity: 0;
  pointer-events: none;
}

/* Nearly opaque: the cards fade as a group, so their blur can't reach the phone behind them. */
.hc,
.motion {
  border-radius: 22px;
  background: rgba(14, 19, 17, 0.96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.8);
}

.hc {
  display: grid;
  gap: 12px;
  padding: 18px 20px;
}

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

/* The hero's strokes cards keep the height their old chip gave the head (a 6 px padded,
   1 px bordered small mark), so the lightning that replaced it moves nothing in the hero. */
.hero-cards .strokes .hc-head {
  min-height: calc(0.8125rem * 1.1 + 14px);
}

.hc-head .figure {
  font-size: 1.875rem;
}

.hc-head small {
  color: var(--text-tertiary);
  font-size: 1.25rem;
}

.hc-title {
  font-family: var(--display);
  font-size: 1.1875rem;
  font-weight: 800;
  line-height: 1.15;
}

/* Strokes: a chip per kind in its tone (decision 436), the word and the count on every chip. */
.home .stroke-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.stroke-chips li {
  --t: var(--racket);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid color-mix(in srgb, var(--t) 55%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--t) 16%, transparent);
  color: var(--t);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.1;
}

.stroke-chips b {
  color: var(--text-primary);
  font-family: var(--display);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.stroke-chips .sk-fore {
  --t: #ffc24d;
}
.stroke-chips .sk-back {
  --t: #86acff;
}
.stroke-chips .sk-serve {
  --t: #ff8cc2;
}
/* Pickleball's dink and its other strokes: the tone's outline, unfilled (strokeKindStyle). */
.stroke-chips .sk-outline {
  background: transparent;
}

/* The exercise guide: the app's illustration beside its name, muscles and the planned sets. Two
   exercises stacked in one place, the card as tall as the tallest; the first alone without motion,
   in turn while the Strength screen is up with it (below). */
.exercise {
  grid-template-columns: minmax(0, 1fr);
  padding: 14px 18px 14px 12px;
}

.ex-view {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.ex-view + .ex-view {
  opacity: 0;
}

.exercise img {
  width: 96px;
  height: 96px;
}

.ex-view > div {
  display: grid;
  gap: 5px;
}

.hc-muscles {
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.35;
}

.hc-sets {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.hc-sets b {
  margin-right: 4px;
  color: var(--strength);
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 800;
}

/* Today's weekly target: like the app's ProgressBar, mint, no percentage. */
.hc-count {
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

.target-bar {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-2);
}

.target-bar i {
  display: block;
  width: 75%;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transform-origin: left;
}

/* The motion strip: a small Apple Watch (the phone's titanium, the crown) beside a motion line,
   the line, its dot and the watch's dot in the slide's activity tone (`.at-<tone>`'s --t). */
.motion {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 12px 16px 12px 14px;
  border: 1px solid var(--separator);
}

.mini-watch {
  position: relative;
  display: block;
  width: 30px;
  height: 50px;
}

/* The band, a stub above and below the case. */
.mini-watch::before {
  content: '';
  position: absolute;
  left: 5px;
  right: 5px;
  top: 0;
  bottom: 0;
  border-radius: 6px;
  background: linear-gradient(90deg, #1b1f1e, #2b302e 50%, #1b1f1e);
}

.mw-case {
  position: absolute;
  left: 0;
  top: 8px;
  display: block;
  width: 28px;
  height: 34px;
  padding: 2px;
  border-radius: 9px;
  background: linear-gradient(
    90deg,
    #26292c,
    #9a9ea3 8%,
    #3d4043 20%,
    #2b2e31 50%,
    #3d4043 80%,
    #9a9ea3 92%,
    #26292c
  );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 4px 10px rgba(0, 0, 0, 0.5);
}

/* The Digital Crown. */
.mw-case::after {
  content: '';
  position: absolute;
  right: -3px;
  top: 8px;
  width: 4px;
  height: 8px;
  border-radius: 2px;
  background: linear-gradient(90deg, #43464a, #8a8e92);
}

.mw-screen {
  display: block;
  height: 100%;
  border-radius: 7px;
  background:
    radial-gradient(
      circle at 50% 50%,
      color-mix(in srgb, var(--t) 45%, transparent) 0 3px,
      transparent 4px
    ),
    #020303;
}

.motion-body {
  display: grid;
  gap: 4px;
}

.trace {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.trace path {
  fill: none;
  stroke: var(--t);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* The draw: a dash on the mask's copy of the line, measured by pathLength in the viewBox's units
   (a non-scaling stroke's dash would be in screen pixels and stop short on a phone). */
.trace mask path {
  stroke: white;
  stroke-width: 4;
  stroke-dasharray: 1;
  vector-effect: none;
}

.peak {
  fill: var(--t);
  stroke: color-mix(in srgb, var(--t) 35%, transparent);
  stroke-width: 6;
  transform-box: fill-box;
  transform-origin: center;
}

.motion-body p {
  display: grid;
  gap: 1px;
  font-size: 0.75rem;
  line-height: 1.3;
}

.motion-body b {
  color: var(--text-primary);
  font-size: 0.8125rem;
  font-weight: 600;
}

.motion-body span {
  color: var(--text-tertiary);
  text-wrap: balance;
}

.tempo {
  display: flex;
  gap: 6px;
  height: 40px;
}

.tempo i {
  border-radius: 12px;
  transform-origin: left;
}

.tempo .back {
  flex: 1.12;
  background: linear-gradient(90deg, #163a26, #2d7a4c);
}

.tempo .down {
  flex: 0.36;
  background: var(--golf);
}

.tempo-foot {
  display: flex;
  justify-content: space-between;
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

/* The activities, a slow strip of every name (from the registry). */
.strip {
  padding: 8px 0 24px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee {
  display: flex;
  width: max-content;
}

.home .marquee-list {
  display: flex;
  gap: 10px;
  padding-right: 10px;
}

.marquee-list li {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px 0 12px;
  border: 1px solid var(--separator);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: 0.9375rem;
  white-space: nowrap;
}

/* Cards with a phone rising out of their foot. */
.cards-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.cards-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

/* Golf's loops: Range and the round, each the Racket section's way, its steps on one side and a
   phone on the other playing the app's screens on one clock (Range's --range, the round's
   --round), a card beside it ticking in step. Still, the first screen and every step whole; the
   screens over it and the cards show only with motion (below, "Golf's loops"). */
.golf {
  --range: 20s;
  --round: 30s;
}

/* A step: its title, its marks, its detail; the line along its foot is its progress (with motion).
   --on is how lit it is: 1 still, and with motion 1 only while its screen is up. */
@property --on {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

/* The list and its ghost in one place: the ghost (with motion) is the tallest the list gets, every
   title with the longest detail open, so the box never changes while details open and close inside
   it; what's spare is at its end. Never the browser's scroll anchor: its rows slide, and the page
   would scroll to follow one. */
.loop-list {
  display: grid;
  overflow-anchor: none;
}

.loop-list > * {
  grid-area: 1 / 1;
  align-self: start;
}

.loop-steps {
  display: grid;
}

.ls-ghost {
  display: none;
  visibility: hidden;
}

.ls-ghost-more {
  display: grid;
}

.ls-ghost-more > p {
  grid-area: 1 / 1;
}

/* A column, not a grid: its keyframes carry the detail's rows (0fr closed, 1fr open), which the
   detail inherits (with motion, below). */
.ls {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 0 20px;
  border-bottom: 1px solid var(--separator);
  opacity: calc(0.4 + 0.6 * var(--on));
}

.ls:first-child {
  padding-top: 4px;
}

.home .ls :is(h3, .ls-title) {
  font-size: clamp(1.25rem, 1.9vw, 1.5rem);
  line-height: 1.15;
}

/* Its detail: the gap above it is its own, so a closed one takes no room at all. */
.ls-more {
  display: grid;
  margin-top: -10px;
}

.ls-more p {
  min-height: 0;
  overflow: hidden;
}

.ls-more p::before {
  content: '';
  display: block;
  height: 10px;
}

:is(.ls-more, .ls-ghost-more) p {
  max-width: 30rem;
  color: var(--text-secondary);
  font-size: clamp(1rem, 1.3vw, 1.0625rem);
  line-height: 1.55;
}

/* A detail's fine print (the map's course data credit): its own line, smaller and quieter. */
.ls-fine {
  display: block;
  margin-top: 6px;
  color: var(--text-tertiary);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.ls-line {
  position: absolute;
  left: 0;
  bottom: -1px;
  display: none;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: var(--golf);
  transform: scaleX(0);
  transform-origin: left;
}

/* Choosing a step: its radio, hidden but focusable, and its label laid over the whole step, so the
   step is the thing pressed. While the step is chosen its label hands over to the second radio's
   (above it), so pressing it again starts it again; only one of its two radios shows at a time,
   the chosen one or the first, so the arrows move from step to step. Nothing here takes space. */
.ls-pick,
.ls-pick-again {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.ls-pick-again,
.ls:has(.ls-pick-again:checked) .ls-pick {
  display: none;
}

.ls-pick-again:checked {
  display: block;
}

.ls-label::after,
.ls-label-again::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: pointer;
}

.ls-label-again {
  pointer-events: none;
}

.ls-label-again::after {
  z-index: 2;
}

.ls:has(.ls-pick:checked) .ls-label-again {
  pointer-events: auto;
}

@media (hover: hover) {
  .ls:hover {
    opacity: calc(0.55 + 0.45 * var(--on));
  }

  .ls:hover .ls-more p {
    color: var(--text-primary);
  }
}

.ls:has(:focus-visible) {
  opacity: 1;
  outline: 2px solid var(--golf);
  outline-offset: 6px;
  border-radius: 4px;
}

/* With reduced motion, a chosen step's screens and card show still (legal-site.ts sets each at its
   step). */
@media (prefers-reduced-motion: reduce) {
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked)
    :is(.gr-scrim, .gr-sheet, .gr-analysis, .gr-bag),
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .rf {
    display: block;
  }

  .golf .sec:has(.ls-pick:checked, .ls-pick-again:checked) .golf-card {
    display: grid;
  }
}

/* The phone, its card in front of it over its foot: to the right of Range's phone; the round's
   beside its phone's upper half (below). */
.split-art.loop-art {
  --lw: clamp(240px, 26vw, 310px);
  display: grid;
  justify-items: center;
}

.loop-art > * {
  grid-area: 1 / 1;
}

/* Beside the steps, one column as wide as the art, so a card's offset can be capped against it
   (the card's margin below). */
@media (min-width: 861px) {
  .split-art.loop-art,
  .split-art.depth {
    grid-template-columns: minmax(0, 1fr);
  }
}

.loop-phone {
  --w: var(--lw);
}

.loop-cards {
  z-index: 2;
  display: grid;
  align-self: end;
  width: 270px;
  /* Where the column is narrow (below about 1250 px), shifted in over the phone so the card stays
     on the page: past the column's outer edge by at most 16 px, or the gutter outside it less 16. */
  margin: 0 0 6% min(var(--lw) * 0.4 + 270px, 100% - 270px + max(32px, 100vw - 1212px));
}

/* On a wide screen the round's phone is at its column's outer edge and its card to its right,
   between it and the steps, its top level with the phone's upper third (the owner, 22 October
   2026): one place for the whole loop, over the phone's edge only (24 px of it), clear of what
   every screen shows; where the column is narrower, as far over as it allows, never past 4vw into
   the gap before the steps. */
@media (min-width: 861px) {
  .golf-course .loop-art {
    grid-template-columns: minmax(0, 1fr);
  }

  .golf-course .loop-phone {
    justify-self: start;
  }

  /* Placed, never in the flow, so the card growing to hold the hole's map (the map's step) moves
     nothing: down over the phone's lower right, never toward the steps. */
  .golf-course .loop-art {
    position: relative;
  }

  .golf-course .loop-cards {
    position: absolute;
    top: calc(var(--lw) * 0.7);
    left: min(var(--lw) - 24px, 100% - 270px + 4vw);
    margin: 0;
  }
}

.loop-cards > .golf-card {
  grid-area: 1 / 1;
  align-self: end;
}

/* The map's step: the round's card grown to hold the hole's map (the owner, 22 October 2026), the
   map's three states crossing in over each other and each shot's GPS distance as a row that comes
   with its shot. --grow (0 compact, 1 grown) is the step's (rd-grow): the rows and the map open to
   their fixed height (--rc-grow), so the card's growth is known; on a phone the card grows upward
   over the phone by as much (below), so nothing under it moves. */
@property --grow {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

.rc-card {
  --rc-map-w: 168px;
  --rc-rows: calc(2 * 1.125rem + 4px);
  --rc-grow: calc(var(--rc-rows) + 10px + var(--rc-map-w) * 1000 / 720);
}

.rc-grow {
  display: grid;
  align-content: start;
  gap: 10px;
  height: calc(var(--grow) * var(--rc-grow));
  margin-top: calc(-12px * (1 - var(--grow)));
  overflow: hidden;
  opacity: var(--grow);
}

.rc-rows {
  display: grid;
  gap: 4px;
  height: var(--rc-rows);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  line-height: 1.125rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rc-rows .rc-tick {
  height: 1.125rem;
  line-height: 1.125rem;
}

.rc-rows small {
  margin-left: 2px;
  color: var(--text-tertiary);
}

.rc-row-2 {
  opacity: 0;
}

.rc-tiles .rc-wait {
  margin: 0;
  font-weight: 600;
}

/* The course data's credit under the map, only on a phone (below), where the step's fine print
   isn't in view beside the card. */
.rc-credit {
  display: none;
}

.hm-map {
  position: relative;
  justify-self: center;
  width: var(--rc-map-w);
  aspect-ratio: 720 / 1000;
  overflow: hidden;
  border-radius: 12px;
}

.hm-map img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.hm-2,
.hm-3 {
  opacity: 0;
}

/* Over Range's practice: Swing 1's sheet (its 3D replay's still, the frames playing in a window
   where the forearm moves: the still's box, so cqw inside is a hundredth of the still's width, the
   window 434 × 382 at 88, 596 of its 600 px), the analysis's card on the app's black, Your bag;
   over the round's tee, its next three frames. Shown only with motion. */
.gr-scrim,
.gr-sheet,
.gr-analysis,
.gr-bag,
.rf,
.golf-card {
  display: none;
}

.gr-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
}

.gr-sheet {
  position: absolute;
  top: 16cqw;
  left: 0;
  z-index: 2;
  width: 100%;
  height: calc(100% - 16cqw);
  overflow: hidden;
  border-radius: 7cqw 7cqw 0 0;
  background: #171a19;
  transform: translateY(100%);
}

.gr-sheet::before {
  content: '';
  position: absolute;
  top: 1.6cqw;
  left: 50%;
  z-index: 2;
  width: 10cqw;
  height: 1.2cqw;
  margin-left: -5cqw;
  border-radius: 1cqw;
  background: rgba(255, 255, 255, 0.28);
}

.phone-screen .gr-sheet > img {
  top: 3cqw;
  height: auto;
}

.sr-play {
  container-type: inline-size;
  position: absolute;
  top: 3cqw;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.sr-window {
  position: absolute;
  top: 99.3333cqw;
  left: 14.6667cqw;
  width: 72.3333cqw;
  height: 63.6667cqw;
  overflow: hidden;
}

/* The frames in three columns of 41 (the last two of 40). */
.phone-screen .sr-window img {
  top: 0;
  width: 300%;
  height: 4100%;
  object-fit: fill;
}

.gr-analysis {
  position: absolute;
  inset: 12.6cqw 0 0;
  z-index: 3;
  padding: 3cqw 4.5cqw 0;
  background: #000;
  opacity: 0;
}

.phone-screen .gr-analysis img {
  position: static;
  height: auto;
  border-radius: 5cqw;
}

.gr-bag,
.rf {
  opacity: 0;
}

/* Over the screenshot the phone draws first (`.phone-screen img`, z-index 1). */
.phone-screen .gr-bag {
  z-index: 4;
}

.phone-screen .rf-2 {
  z-index: 2;
}

.phone-screen .rf-3 {
  z-index: 3;
}

.phone-screen .rf-4 {
  z-index: 4;
}

.phone-screen .rf-5 {
  z-index: 5;
}

.phone-screen .rf-6 {
  z-index: 6;
}

.phone-screen .rf-7 {
  z-index: 7;
}

.phone-screen .rf-8 {
  z-index: 8;
}

.golf-card {
  gap: 10px;
  padding: 16px 18px;
}

.golf-card .hc-head .figure {
  display: inline-block;
  font-size: 1.75rem;
}

.sc-foot {
  display: flex;
}

/* A swing lands: its name, Detected, its tempo with the dot the practice's screen gives it, and
   est. as the app says. The count above is a reel of the swings before and after it. */
.sc-new {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--surface-2);
}

.sc-name,
.sc-ratio {
  display: grid;
  gap: 4px;
  font-weight: 700;
}

.sc-ratio {
  justify-items: end;
}

.sc-new small {
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-weight: 600;
}

.sc-ratio .figure {
  font-size: 1.375rem;
}

.sc-ratio .figure small {
  color: var(--text-tertiary);
  font-size: 0.9375rem;
}

.sc-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--golf);
}

.sc-count {
  color: var(--golf);
}

.sc-tick {
  display: inline-block;
  height: 1em;
  overflow: hidden;
  line-height: 1;
  vertical-align: bottom;
}

.sc-reel {
  display: grid;
}

.sc-reel i {
  font-style: normal;
}

/* Swing 1's tempo: backswing and downswing as two lengths in their proportion (1.102 to 0.365),
   the app's two greens, and the ratio. */
.sc-bar {
  display: flex;
  gap: 5px;
  height: 14px;
}

.sc-bar i {
  border-radius: 999px;
  transform-origin: left;
}

.sc-back {
  flex: 1.102;
  background: linear-gradient(90deg, #163a26, #2d7a4c);
}

.sc-down {
  flex: 0.365;
  background: var(--golf);
}

.sc-parts {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

.sc-parts span {
  display: grid;
  gap: 2px;
}

.sc-parts b {
  color: var(--text-primary);
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.sc-parts span + span {
  text-align: right;
}

/* The swing analysis's steps: Film, Pick, Read, each its icon in golf's tone, its word and line,
   in three shared columns (each row a subgrid of the list's): the icons, the words as wide as the
   widest, and the lines, all starting at one x, each line's first baseline on its word's. */
.sa-steps {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 10px 0;
}

.sa-steps li {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: baseline;
}

@supports not (grid-template-columns: subgrid) {
  .sa-steps li {
    grid-template-columns: 1.125rem 2.75em minmax(0, 1fr);
  }
}

.sa-steps b {
  margin-right: 10px;
  font-family: var(--display);
  font-size: 1rem;
}

/* On the baseline, lowered to sit centred on its word's letters. */
.sa-steps .ic {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0 6px -0.3rem 0;
  color: var(--golf);
}

.sa-steps span {
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.4;
}

/* Its title on one line, Detected under it where they don't fit side by side. */
.sc-analysis .hc-head,
.rc-card .hc-head {
  flex-wrap: wrap;
  justify-content: start;
  gap: 8px 10px;
}

.rc-card .hc-title {
  white-space: nowrap;
}

/* The round's card, Racket's strokes card's size and shape (.hc's padding and gap): its shots and
   the latest GPS distance as two compact stats side by side, label above and value at the left,
   each a reel ticking with the frames, and a chip for what the screen shows. */
.golf-card.rc-card {
  gap: 12px;
  padding: 18px 20px;
}

.rc-tiles {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  gap: 4px 28px;
  margin: 0;
}

.rc-tiles > div {
  display: grid;
  justify-items: start;
  gap: 4px;
}

.rc-tiles dt {
  color: var(--golf);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rc-tiles dd {
  margin: 0;
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: left;
}

.rc-tiles small {
  margin-left: 4px;
  color: var(--text-tertiary);
  font-size: 0.8125rem;
}

.rc-now {
  display: flex;
  margin: 0;
}

.rc-now .tag {
  font-variant-numeric: tabular-nums;
}

.rc-tick {
  display: inline-block;
  height: 1.25em;
  overflow: hidden;
  line-height: 1.25;
  vertical-align: bottom;
}

.rc-reel {
  display: grid;
}

.rc-reel i {
  font-style: normal;
  white-space: nowrap;
}

/* Racket: the strokes card in front of the tennis screen, over its foot and to one side. With
   motion the section alternates two loops of one clock (--loop, the cycle two of them): tennis,
   then pickleball, its screen, sheet, card, cups, tint and eyebrow in pickleball's tone, then back
   (below, "Racket's two loops"). */
#racket,
.ground {
  --loop: 10s;
  --cycle: calc(var(--loop) * 2);
}

.split-art.depth {
  --dw: clamp(240px, 26vw, 310px);
  display: grid;
  justify-items: center;
}

.depth > * {
  grid-area: 1 / 1;
}

.depth-phone {
  --w: var(--dw);
}

/* Below the sheet's replay window (its foot 1.8 phone widths down the phone), so the real strokes'
   follow-through is never under the card (the owner, 24 October 2026): over the phone's foot, the
   sheet's fine print, and on below it. Kept on the page as Range's card is (above). */
.depth-card {
  z-index: 2;
  display: grid;
  align-self: start;
  width: 270px;
  margin: calc(var(--dw) * 1.84) 0 0
    min(var(--dw) * 0.4 + 270px, 100% - 270px + max(32px, 100vw - 1212px));
}

/* Tennis's card and pickleball's in the same place, each from the top; each title, its sport and
   "Strokes", on one line, its mark under it where they don't fit side by side. */
.depth-card > .strokes {
  grid-area: 1 / 1;
  align-self: start;
}

.depth-card .hc-head {
  flex-wrap: wrap;
  justify-content: start;
  gap: 8px 10px;
}

.depth-card .hc-title {
  white-space: nowrap;
}

/* Pickleball's screen, sheet, card and cups, over tennis's: shown only with motion. */
#racket .rk-pickleball {
  display: none;
}

#racket .sec-art .rk-pickleball {
  position: absolute;
  top: 0;
  left: 0;
}

/* The forehand's sheet over the tennis screen, placed as the screenshot under it is (its width,
   centred in the screen below the status bar), clear above the sheet's top. Its replay's frames
   sit in a window at their place on the sheet, one showing at a time. Shown only with motion. */
.stroke-sheet,
.ss-scrim {
  display: none;
}

.ss-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.62);
  opacity: 0;
}

.stroke-sheet {
  position: absolute;
  top: 6cqw;
  left: 0;
  z-index: 1;
  width: 100%;
  aspect-ratio: 660 / 1434;
  transform: translateY(100%);
}

.phone-screen .stroke-sheet img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

/* The 378 × 290 px at (156, 944) of the 660 × 1434 sheet, where the real strokes move: the window
   shows each frame's first 288 rows, so its last two (the background in every frame) keep the next
   frame's top (pickleball's follow-through crosses it) from showing at the window's foot. */
.ss-replay {
  position: absolute;
  top: 65.8298%;
  left: 23.6364%;
  width: 57.2727%;
  height: 20.0837%;
  overflow: hidden;
}

/* The frames in two columns, of 55 and 54, each 290 of the window's 288 rows tall. */
.phone-screen .ss-replay img {
  width: 200%;
  height: 5538.1944%;
}

/* The forehands' count: a reel of 142 and 143, resting on 142. */
.fh-tick {
  display: inline-block;
  height: 1.1em;
  overflow: hidden;
  line-height: 1.1;
  vertical-align: bottom;
}

.fh-reel {
  display: grid;
}

.fh-reel i {
  font-style: normal;
}

/* Coach: an answer, and the Coach tab's conversations and current picture in front of it. */
.coach-pair {
  position: relative;
  min-height: 680px;
}

.coach-pair .phone {
  --w: clamp(220px, 20vw, 270px);
  position: absolute;
}

.coach-back {
  left: 0;
  top: 0;
}

.coach-front {
  right: 0;
  top: 90px;
}

/* Copy beside a phone; the strength section's the other way round. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 6vw, 80px);
}

.split-flip .split-copy {
  order: 2;
}

.split-copy {
  display: grid;
  gap: 24px;
}

.split-copy .sec-head {
  margin-bottom: 0;
}

.split-art {
  display: flex;
  justify-content: center;
  padding: 24px 0;
}

.phone-large {
  --w: clamp(240px, 26vw, 310px);
}

.coach-note {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  padding: 22px 24px;
  border-color: #2c2650;
  background: #12101f;
  color: #d6d0ff;
  line-height: 1.55;
}

/* Goals: the goal's real screen in the middle; the three steps round it, each with a piece of the
   app (cropped from its captures) or, for "Everything counts", sessions dropping into the goal. */
/* --flow: the one clock of "Everything counts" (below): its chips, its week's count and bar, and Break
   90's screen and Today's targets beside it, which count with it. */
.goal-stage {
  --flow: 9s;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas:
    's1 phone s2'
    's1 phone s3';
  align-items: center;
  gap: 40px clamp(32px, 4.5vw, 72px);
}

.goal-phone {
  --w: clamp(250px, 23vw, 300px);
  grid-area: phone;
}

.gstep {
  display: grid;
  gap: 10px;
  max-width: 380px;
}

.gstep-1 {
  grid-area: s1;
  justify-self: end;
}

.gstep-2 {
  grid-area: s2;
  align-self: end;
}

.gstep-3 {
  grid-area: s3;
  align-self: start;
}

.home .gstep h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.25rem;
  line-height: 1.2;
}

.gnum {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 50%;
  color: var(--accent);
}

.gnum .ic {
  width: 18px;
  height: 18px;
}

.gstep > p {
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: 1.45;
}

/* A piece of the screen: the app's own black, its corners, nothing painted over it. */
.pieces {
  display: grid;
  gap: 4px;
  margin-top: 6px;
  padding: 14px 8px;
  overflow: hidden;
  border: 1px solid var(--separator);
  border-radius: 26px;
  background: #050505;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.8);
}

.pieces img {
  display: block;
  width: 100%;
  height: auto;
}

/* Today's list goes on below the piece: it fades out rather than stopping at a cut. */
.pieces-fade {
  padding-bottom: 0;
}

.pieces-fade img {
  mask-image: linear-gradient(180deg, #000 72%, transparent);
}

/* Break 90 counting up, 0 to 3 of 4: four captures of the same screen, each over the one before in
   the same place (the phone's screens are stacked already), so nothing moves; still, the last. */
.pieces-fade img {
  grid-area: 1 / 1;
}

.goal-flow {
  display: grid;
  gap: 16px;
  margin-top: 6px;
  padding: 18px;
}

.home .flow-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.flow-chips li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 7px 9px;
  border: 1px solid color-mix(in srgb, var(--t) 55%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--t) 16%, transparent);
  color: var(--t);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.1;
}

.flow-goal {
  display: grid;
  gap: 12px;
  padding: 14px 16px 16px;
  border: 1px solid var(--separator);
  border-radius: 18px;
  background: var(--surface-2);
}

.flow-goal .hc-count {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  color: var(--text-primary);
  line-height: 1.2;
}

/* The week's count: a reel of 0 to 3, resting on 3. */
.tick {
  display: inline-block;
  height: 1.2em;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.reel {
  display: grid;
  transform: translateY(-75%);
}

.reel i {
  font-style: normal;
}

.flow-bar {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #0b0f0e;
}

.flow-bar i {
  display: block;
  width: 75%;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transform-origin: left;
}

@media (max-width: 860px) {
  .goal-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'phone' 's1' 's2' 's3';
    gap: 36px;
  }

  .goal-phone {
    --w: min(270px, 72vw);
    justify-self: center;
  }

  .gstep {
    justify-self: center;
    width: 100%;
    max-width: 420px;
  }
}

/* One session at a time appears and its goal's week ticks up with it: 1, 2, 3 of 4, then all fade back. */
@media (prefers-reduced-motion: no-preference) {
  .flow-chips li {
    animation: flow-1 var(--flow) infinite;
  }
  .flow-chips li:nth-child(2) {
    animation-name: flow-2;
  }
  .flow-chips li:nth-child(3) {
    animation-name: flow-3;
  }

  .reel {
    animation: flow-tick var(--flow) infinite;
  }

  .flow-bar i {
    animation: flow-bar var(--flow) infinite;
  }

  .flow-goal {
    animation: flow-land var(--flow) infinite;
  }

  /* Break 90's screen and Today's row show the count the card shows, changing as its week ticks. */
  .goal-phone img + img,
  .pieces-fade img + img {
    animation: flow-frame-1 var(--flow) infinite;
  }
  .goal-phone img:nth-of-type(3),
  .pieces-fade img:nth-of-type(3) {
    animation-name: flow-frame-2;
  }
  .goal-phone img:nth-of-type(4),
  .pieces-fade img:nth-of-type(4) {
    animation-name: flow-frame-3;
  }
}

/* Running: the running form as a run's page shows it, its figures Measured (the app's pulse), on the
   card beside the run's phone (below, "Strength's and Running's loops"). */
.tag-measured {
  border-color: #4a2a33;
  color: var(--health);
}

.form-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.form-tiles div {
  display: grid;
  align-content: space-between;
  gap: 10px;
  padding: 14px 14px 12px;
  border-radius: 16px;
  background: var(--surface-2);
}

.form-tiles dt {
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
}

.form-tiles dd {
  margin: 0;
  color: var(--health);
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

.form-tiles small {
  color: var(--text-tertiary);
  font-size: 0.55em;
  font-weight: 700;
}

/* Too narrow for three side by side: a row each, the label beside its figure. */
@media (max-width: 400px) {
  .form-tiles {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .form-tiles div {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 12px 14px;
  }
}

.form-note {
  font-size: 0.8125rem;
}

.checks-run li > .ic {
  color: var(--run);
}

.checks-golf li > .ic {
  color: var(--golf);
}

/* ---- The lower page, editorial (Direction A): no boxes, a hairline grid --------------------------
   Everything else, privacy, Free and Pro and the questions share one two-column grid (the words on
   the left, what they hold on the right), on the page's ground, at a tighter pace than the features
   above: nothing is a card unless it holds something. */
#everyday,
#privacy,
#pricing,
#faq {
  padding: clamp(56px, 7vw, 96px) 0;
}

.ev,
.qa {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: clamp(32px, 6vw, 88px);
}

.ev .sec-head {
  margin-bottom: 32px;
}

.ev .sec-head h2 {
  font-size: clamp(2.25rem, 3.6vw, 3rem);
}

.ev-facts > div {
  display: grid;
  gap: 6px;
  padding: 18px 0;
  border-top: 1px solid var(--separator);
}

.ev-facts dt {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}

.ev-facts dt .ic {
  margin-right: 0.3em;
}

.ev-facts dd {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* The activities in the picker's blocks: the in-depth eight beside distance and pace, then the
   rest, each a column list of the app's marks. */
.ev-index {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 32px 28px;
}

.ev-tier2,
.ev-tier3 {
  grid-column: 1 / -1;
}

.ev-group {
  padding-top: 14px;
  border-top: 1px solid var(--separator);
}

.home .ev-group h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ev-group h3 .figure {
  color: var(--text-tertiary);
  font-size: 1rem;
  letter-spacing: 0;
}

.ev-group ul {
  columns: 3;
  column-gap: 28px;
}

.ev-primary ul {
  columns: 2;
}

.ev-tier1 ul {
  columns: 1;
}

.ev-group li {
  padding: 5px 0;
  break-inside: avoid;
  font-size: 0.9375rem;
  line-height: 1.35;
}

.ev-primary li {
  font-size: 1.0625rem;
  font-weight: 600;
}

/* Privacy: the promise on the left, the three things it means on the right, in Apple Health's tone. */
.pv {
  display: grid;
  gap: clamp(24px, 3vw, 36px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid color-mix(in srgb, var(--health) 45%, transparent);
}

.home .pv h2 {
  margin-top: 14px;
  font-size: clamp(1.875rem, 3.4vw, 2.75rem);
  line-height: 1.05;
}

.pv-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pv-points li {
  position: relative;
  padding: 22px 28px 4px 0;
  font-size: 1.0625rem;
  line-height: 1.55;
}

.pv-points li + li {
  padding-left: 28px;
  border-left: 1px solid var(--separator);
}

.pv-points li::before {
  content: '';
  position: absolute;
  top: 4px;
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--health);
}

/* Free and Pro: one table, row by row, Pro's column lit in Coach's iris. */
#pricing .sec-head {
  margin-bottom: clamp(28px, 4vw, 40px);
}

#pricing .sec-head h2 {
  font-size: clamp(2.25rem, 3.6vw, 3rem);
}

#privacy {
  padding-top: 0;
}

#pricing {
  padding-top: clamp(40px, 5vw, 72px);
}

.compare {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.compare caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.compare thead td {
  width: 44%;
}

.compare thead th {
  padding: 22px 22px 18px;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: left;
  vertical-align: top;
}

.compare thead th span {
  display: block;
  margin-top: 8px;
  color: var(--text-secondary);
  font-family:
    'Instrument Sans',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.45;
}

.compare tbody th,
.compare tbody td {
  padding: 16px 22px;
  border-top: 1px solid var(--separator);
  line-height: 1.45;
  text-align: left;
  vertical-align: top;
}

.compare tbody th {
  padding-left: 0;
  font-weight: 400;
}

.compare tbody td {
  font-weight: 600;
}

.compare .cp-pro {
  background: rgba(169, 155, 255, 0.07);
}

.compare thead th.cp-pro {
  border-radius: 20px 20px 0 0;
  color: #c9c0ff;
}

.compare thead th.cp-pro span {
  color: #c9c0ff;
}

.compare tbody tr:last-child .cp-pro {
  border-radius: 0 0 20px 20px;
}

.compare td .ic {
  margin-right: 0.35em;
  color: var(--coach);
}

.cp-no {
  color: var(--text-tertiary);
  font-weight: 400;
}

.cp-foot {
  display: flex;
  align-items: center;
  gap: 20px 28px;
  margin-top: 28px;
}

.cp-foot .store {
  margin-left: calc(var(--badge) / -4);
}

.cp-foot .fine {
  max-width: 62ch;
}

/* The questions, straight after the plans: the heading beside them. */
.qa-head {
  display: grid;
  align-content: start;
  gap: 12px;
}

.home .qa h2 {
  margin: 0;
  font-size: clamp(2.25rem, 3.6vw, 3rem);
}

@media (max-width: 900px) {
  .ev,
  .qa {
    grid-template-columns: minmax(0, 1fr);
  }

  .pv-points {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .pv-points li,
  .pv-points li + li {
    padding: 0 0 0 38px;
    border: 0;
  }

  .pv-points li::before {
    top: 0.75em;
    left: 0;
  }

  .ev-index {
    grid-template-columns: minmax(0, 1fr);
  }

  .ev-group ul,
  .ev-primary ul,
  .ev-tier1 ul {
    columns: 2;
    column-gap: 16px;
  }

  .compare thead td {
    width: 40%;
  }

  .compare thead th {
    padding: 16px 12px 14px;
    font-size: 1.1875rem;
  }

  .compare thead th span {
    font-size: 0.8125rem;
  }

  .compare tbody th,
  .compare tbody td {
    padding: 14px 12px;
    font-size: 0.9375rem;
  }

  .compare thead tr,
  .compare tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .compare thead td {
    display: none;
  }

  .compare tbody th {
    grid-column: 1 / -1;
    padding: 16px 0 4px;
    color: var(--text-secondary);
    font-size: 0.875rem;
  }

  .compare tbody td {
    padding: 4px 12px 16px;
    border-top: 0;
  }

  .compare tbody tr {
    border-top: 1px solid var(--separator);
  }

  .compare tbody th {
    border-top: 0;
  }

  /* Pro's column is its iris words here: a tint would break at every question. */
  .compare .cp-pro,
  .compare thead th.cp-pro,
  .compare tbody tr:last-child .cp-pro {
    border-radius: 0;
    background: none;
  }

  .compare tbody td.cp-pro {
    color: #c9c0ff;
  }

  .compare thead th:first-of-type,
  .compare tbody td:first-of-type {
    padding-left: 0;
  }

  .cp-foot {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* FAQ: native disclosure, each question a target well over 44 px. */
#faq h2 {
  margin-bottom: 24px;
}

.faq details {
  border-top: 1px solid var(--separator);
}

.faq details:last-child {
  border-bottom: 1px solid var(--separator);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
  padding: 12px 0;
  cursor: pointer;
  font-size: clamp(1.0625rem, 1.8vw, 1.1875rem);
  font-weight: 600;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

/* The app's disclosure chevron (Icon `chevronDown`), turned up when open. */
.faq summary .ic {
  width: 26px;
  height: 26px;
  color: var(--accent);
}

.faq details[open] summary .ic {
  transform: rotate(180deg);
}

.faq summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.faq details p {
  max-width: 68ch;
  padding-bottom: 24px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* The last call to action is the sign-in's screen: the whole rhythm at full strength under the
   sign-in's two glows, the words below it. */
.final {
  position: relative;
  padding-top: calc(25vw - 24px);
}

/* On the page's own ground, with no edge: the glows sit low enough that they never touch the top,
   and the cups come out of the dark along a curve (no straight line to read as a panel's edge), so
   their stems fade in and their rounded ends show whole, as the app's header lets them hang from
   under the status bar. */
.final-art {
  background:
    radial-gradient(80% 70% at 92% 62%, rgba(45, 190, 130, 0.26), rgba(45, 190, 130, 0) 70%),
    radial-gradient(64% 60% at 6% 58%, rgba(79, 134, 247, 0.2), rgba(79, 134, 247, 0) 70%);
  -webkit-mask-image:
    radial-gradient(
      125% 100% at 50% 100%,
      #000 48%,
      rgba(0, 0, 0, 0.7) 62%,
      rgba(0, 0, 0, 0.3) 76%,
      rgba(0, 0, 0, 0.08) 88%,
      transparent 98%
    ),
    linear-gradient(to bottom, #000 66%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(
      125% 100% at 50% 100%,
      #000 48%,
      rgba(0, 0, 0, 0.7) 62%,
      rgba(0, 0, 0, 0.3) 76%,
      rgba(0, 0, 0, 0.08) 88%,
      transparent 98%
    ),
    linear-gradient(to bottom, #000 66%, transparent);
  mask-composite: intersect;
}

.final-art .rhythm {
  position: relative;
  aspect-ratio: 4;
}

.final-art .rhythm.narrow {
  aspect-ratio: 1.5;
}

@media (max-width: 700px) {
  .final {
    padding-top: calc(66vw + 8px);
  }
}

.final-inner {
  display: grid;
  justify-items: center;
  gap: 26px;
  text-align: center;
}

/* The app's home-screen icon, rounded as iOS rounds it, with a hairline so its near-black reads
   on the page's black. */
.app-icon {
  border-radius: 22.37%;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 24px 60px -18px rgba(94, 230, 168, 0.42);
}

.home .final h2 {
  max-width: 16ch;
}

/* The footer: brand, every policy by name, support. */
.home > footer {
  padding: 40px 0 56px;
  border-top: 1px solid var(--separator);
  font-size: 0.9375rem;
}

.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}

.home > footer nav {
  gap: 0 24px;
}

.home > footer nav a {
  font-weight: 500;
}

.home > footer nav a:hover {
  color: var(--accent);
}

.home .contact p {
  margin: 0;
}

/* Apple's trademark notice: its own line under the rest, quieter and smaller. */
.trademarks {
  flex: 1 0 100%;
  max-width: 72ch;
  font-size: 0.8125rem;
  line-height: 1.45;
}

body > footer .trademarks {
  margin-top: 1rem;
}

.home > footer .trademarks {
  margin: 8px 0 0;
  color: var(--text-secondary);
}

/* On a phone, once the hero has scrolled away, a slim bar keeps the App Store badge in reach. It
   sits in the flow at the end of the hero and sticks with its top at the viewport's foot less its
   height, so it shows only once its place has scrolled up into view. It sticks only inside
   .docked, which ends where the final call to action starts, so it leaves before that section
   and never covers its words (Designer 1); with scroll timelines it also fades as the section
   comes in (below). */
.dock {
  display: none;
}

/* ---- Phones and narrow windows --------------------------------------------------------------- */

@media (max-width: 860px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'copy'
      'art'
      'tags';
  }

  .hero-art {
    justify-items: center;
  }

  .hero-tags {
    justify-self: center;
    justify-content: center;
  }

  /* Room for the dock, which parks over the hero's foot (below): the chips stay clear of it. */
  .hero {
    padding-bottom: 104px;
  }

  .hero-mark .wordmark {
    height: 40px;
  }

  /* The strip below names the activities; the phone comes up sooner without the line. */
  .hero .sub {
    display: none;
  }

  .cta {
    flex-wrap: nowrap;
  }

  /* The dock is a phone's one call to action: the header scrolls away with the page. */
  .home > header {
    position: static;
  }

  .split {
    grid-template-columns: minmax(0, 1fr);
  }

  .cards-3,
  .cards-2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .split-flip .split-copy {
    order: 0;
  }

  .hero-art {
    --pw: min(270px, 70vw);
  }

  .hero-cards {
    position: relative;
    left: auto;
    bottom: auto;
    order: 1;
    justify-self: center;
    width: min(100%, 320px);
    margin-top: -150px;
  }

  /* Under the phone, each screen's cards start at the same place, over the phone's foot. */
  .hs {
    align-content: start;
  }

  .cycle-key {
    order: 2;
  }

  .depth-card {
    width: min(300px, 92%);
    margin: calc(var(--dw) * 1.84) 0 0;
  }

  /* Golf's cards under the phone, just over its edge, so the replay and the shots stay in view. */
  .loop-art > .loop-cards,
  .golf-course .loop-cards {
    grid-area: 2 / 1;
    align-self: start;
    width: min(300px, 92%);
    margin: -28px 0 0;
  }

  /* The round's over the phone's frame only: its screens reach the screen's foot (the map's tee). */
  .golf-course .loop-cards {
    margin-top: -8px;
  }

  /* Grown to hold the hole's map, the round's card rises over the phone by as much as it grows,
     so its foot and everything under it stay put. It grows by what .rc-grow adds, its height less
     the 12 px its margin takes back while compact, never less than nothing (the card's grid counts
     a negative size as none): rising by its height alone moved the section under it by up to 12 px
     as each grow began and ended, at stacked widths (Designer 1). */
  .golf-course .rc-card {
    --rc-credit: calc(2 * 1.4 * 0.8125rem);
    --rc-grow: calc(var(--rc-rows) + 20px + var(--rc-map-w) * 1000 / 720 + var(--rc-credit));
    margin-top: calc(-1 * max(0px, var(--grow) * (var(--rc-grow) + 12px) - 12px));
  }

  /* The steps are above the phone, so the map's credit comes with the map, at its fixed height. */
  .rc-credit {
    display: block;
    height: var(--rc-credit);
    margin: 0;
    overflow: hidden;
    text-align: center;
  }

  .coach-pair {
    display: flex;
    justify-content: center;
    min-height: 0;
    padding: 12px 0 56px;
  }

  .coach-pair .phone {
    --w: min(220px, 50vw);
    position: relative;
  }

  .coach-back {
    left: auto;
    top: auto;
    margin-right: -12%;
  }

  .coach-front {
    right: auto;
    top: 56px;
  }

  .card {
    border-radius: 24px;
  }

  .dock {
    position: sticky;
    top: calc(100vh - 80px);
    top: calc(100dvh - 80px);
    z-index: 15;
    display: block;
    height: 80px;
    margin-top: -80px;
    padding: 8px 12px;
    pointer-events: none;
  }

  .dock-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 64px;
    padding: 0 2px 0 12px;
    border: 1px solid rgba(94, 230, 168, 0.22);
    border-radius: 18px;
    background: rgba(12, 18, 15, 0.86);
    -webkit-backdrop-filter: saturate(1.4) blur(16px);
    backdrop-filter: saturate(1.4) blur(16px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    pointer-events: auto;
  }

  .dock-inner > .app-icon {
    flex: none;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
  }

  .dock-line {
    min-width: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25;
  }

  .dock .store {
    --badge: 40px;
    margin-left: auto;
  }

  .dock .store-soon {
    flex: none;
    max-width: 11em;
    margin-left: auto;
    padding-right: 10px;
    font-size: 0.875rem;
    text-align: right;
  }
}

@media (max-width: 380px) {
  .home .hero h1 {
    font-size: 2.25rem;
  }

  /* The bar's line keeps to two lines beside the badge. */
  .dock-inner > .app-icon {
    display: none;
  }

  .btn-small {
    padding: 0 14px;
  }

  .cycle-key {
    gap: 12px;
  }
}

/* Five names under the phone: where the key's full size would run past the screen's edge, a
   compact one (about 290 px) that fits from 320 px up. */
@media (max-width: 1240px) {
  .cycle-key {
    gap: 8px;
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
  }
}

/* ---- Motion: only where it explains something, and none with reduced motion ------------------ */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .rise {
    animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  .hero-copy .rise:nth-child(2) {
    animation-delay: 0.08s;
  }
  .hero-copy .rise:nth-child(3) {
    animation-delay: 0.16s;
  }
  .hero-copy .rise:nth-child(4) {
    animation-delay: 0.22s;
  }
  .hero-copy .rise:nth-child(5) {
    animation-delay: 0.28s;
  }
  .hero-copy .rise:nth-child(6) {
    animation-delay: 0.34s;
  }
  .hero-tags.rise {
    animation-delay: 0.4s;
  }

  /* The hero phone: five screens, 3.5 s each, the key under it and the cards beside it following.
     Negative delays start each at its turn; everything inside a screen's cards runs on the same
     17.5 s cycle and delay (--d), so it plays while its screen is up. */
  .cycle img,
  .hs {
    animation: screen 17.5s var(--d, 0s) infinite;
  }

  .hs {
    animation-name: hero-card;
  }

  .cycle-key li {
    animation: screen-key 17.5s infinite;
  }

  .cycle img:nth-of-type(2),
  .cycle-key li:nth-child(2),
  .hs:nth-child(2) {
    --d: -14s;
    animation-delay: -14s;
  }
  .cycle img:nth-of-type(3),
  .cycle-key li:nth-child(3),
  .hs:nth-child(3) {
    --d: -10.5s;
    animation-delay: -10.5s;
  }
  .cycle img:nth-of-type(4),
  .cycle-key li:nth-child(4),
  .hs:nth-child(4) {
    --d: -7s;
    animation-delay: -7s;
  }
  .cycle img:nth-of-type(5),
  .cycle-key li:nth-child(5),
  .hs:nth-child(5) {
    --d: -3.5s;
    animation-delay: -3.5s;
  }

  /* The Strength card's exercises in turn while its screen is up, on its turn (--d): Push-Up,
     then Bench Press to the end; back to Push-Up once the card has gone. */
  .ex-view {
    animation: ex-1 17.5s var(--d, 0s) infinite;
  }

  .ex-view:nth-child(2) {
    animation-name: ex-2;
  }

  /* Golf's swing, once each time its screen is up: backswing 1.12 s from 0.35 s, then down
     0.36 s; the motion line draws across, and its peak and the label arrive with the impact. */
  .tempo .back {
    animation: backswing 17.5s var(--d, 0s) infinite;
  }

  .tempo .down {
    animation: downswing 17.5s var(--d, 0s) infinite;
  }

  .trace mask path {
    animation: trace 17.5s var(--d, 0s) infinite;
  }

  .peak {
    animation: peak 17.5s var(--d, 0s) infinite;
  }

  .motion-body b {
    animation: detected 17.5s var(--d, 0s) infinite;
  }

  /* Tennis's and Pickleball's chips arrive one by one; Today's bar fills to its 3 of 4. */
  .stroke-chips li {
    animation: chip 17.5s var(--d, 0s) infinite;
  }

  .stroke-chips li:nth-child(2) {
    animation-name: chip-2;
  }

  .stroke-chips li:nth-child(3) {
    animation-name: chip-3;
  }

  .stroke-chips li:nth-child(4) {
    animation-name: chip-4;
  }

  .target-bar i {
    animation: target 17.5s var(--d, 0s) infinite;
  }

  /* The hero's cups fall into place as the app's do: 0.7 s each, one after another. */
  .hero-backdrop .cups > g {
    animation: drop 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.02s both;
  }
  .hero-backdrop .cups > g:nth-child(2) {
    animation-delay: 0.1s;
  }
  .hero-backdrop .cups > g:nth-child(3) {
    animation-delay: 0.18s;
  }
  .hero-backdrop .cups > g:nth-child(4) {
    animation-delay: 0.26s;
  }
  .hero-backdrop .cups > g:nth-child(5) {
    animation-delay: 0.34s;
  }
  .hero-backdrop .cups > g:nth-child(6) {
    animation-delay: 0.42s;
  }
  .hero-backdrop .cups > g:nth-child(7) {
    animation-delay: 0.5s;
  }
  .hero-backdrop .cups > g:nth-child(8) {
    animation-delay: 0.58s;
  }
  .hero-backdrop .cups > g:nth-child(9) {
    animation-delay: 0.66s;
  }

  .marquee {
    animation: marquee 90s linear infinite;
  }

  .strip:hover .marquee {
    animation-play-state: paused;
  }
}

/* Without motion, one list of names and no second copy. */
@media (prefers-reduced-motion: reduce) {
  .marquee-list[aria-hidden='true'] {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* A section's cups, and the last call to action's, fall into place as they come into view,
       one after another. */
    .sec-art,
    .final-art {
      view-timeline: --rhythm;
    }

    .sec-art .cups > g,
    .final-art .cups > g {
      animation: drop linear both;
      animation-timeline: --rhythm;
      animation-range: entry 10% entry 60%;
    }
    .sec-art .cups > g:nth-child(2),
    .final-art .cups > g:nth-child(2) {
      animation-range: entry 16% entry 66%;
    }
    .sec-art .cups > g:nth-child(3),
    .final-art .cups > g:nth-child(3) {
      animation-range: entry 22% entry 72%;
    }
    .sec-art .cups > g:nth-child(4),
    .final-art .cups > g:nth-child(4) {
      animation-range: entry 28% entry 78%;
    }
    .sec-art .cups > g:nth-child(5),
    .final-art .cups > g:nth-child(5) {
      animation-range: entry 34% entry 84%;
    }
    .final-art .cups > g:nth-child(6) {
      animation-range: entry 40% entry 90%;
    }
    .final-art .cups > g:nth-child(7) {
      animation-range: entry 46% entry 96%;
    }
    .final-art .cups > g:nth-child(8) {
      animation-range: entry 52% exit 0%;
    }
    .final-art .cups > g:nth-child(9) {
      animation-range: entry 58% exit 0%;
    }
  }
}

/* ---- Motion and the scroll -------------------------------------------------------------------
   The scroll only brings things in: each section's heading, words, phones and cards ease in as
   they reach the screen, and Free and Pro from either side. Under it all the page's ground takes on the tone of the section in view. What each
   feature does runs on time, by itself (below). Without scroll timelines everything is in place
   and the loops still run; with reduced motion everything stands still and whole. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* The ground: one wash per section on a fixed layer behind everything, each lit while its
       section crosses the screen, so one hands over to the next with no edge between them. */
    .home {
      timeline-scope:
        --t-golf, --t-racket, --t-strength, --t-running, --t-goals, --t-coach, --t-run, --t-pricing,
        --t-download;
    }

    .home > main {
      position: relative;
      z-index: 0;
    }

    #golf {
      view-timeline: --t-golf;
    }
    #racket {
      view-timeline: --t-racket;
    }
    #strength {
      view-timeline: --t-strength;
    }
    #running {
      view-timeline: --t-running;
    }
    #goals {
      view-timeline: --t-goals;
    }
    #coach {
      view-timeline: --t-coach;
    }
    #everyday {
      view-timeline: --t-run;
    }
    #pricing {
      view-timeline: --t-pricing;
    }
    #download {
      view-timeline: --t-download;
    }

    /* The phone's bar goes as the final call to action comes in, its own badge or words in view. */
    .dock-inner {
      animation: dock-away linear both;
      animation-timeline: --t-download;
      animation-range: entry 0% entry 20%;
    }

    /* The header shows where the reader is: a section's link turns white with a short mint line
       under it while that section holds the middle of the screen. It comes on as the section's top
       crosses the middle and goes off as its bottom does, each over a tenth of the screen, so one
       link hands over to the next with a quick crossfade and the hero lights none. */
    .home .bar nav a {
      position: relative;
      animation:
        nav-on linear both,
        nav-off linear forwards;
      animation-timeline: --t-golf, --t-golf;
      animation-range:
        cover 45vh cover 55vh,
        cover calc(100% - 55vh) cover calc(100% - 45vh);
    }

    .home .bar nav a::after {
      content: '';
      position: absolute;
      left: 50%;
      bottom: 6px;
      width: 18px;
      height: 2px;
      margin-left: -9px;
      border-radius: 1px;
      background: var(--accent);
      animation:
        nav-line-on linear both,
        nav-line-off linear forwards;
      animation-timeline: inherit;
      animation-range: inherit;
    }

    .home .bar nav a:hover,
    .home .bar nav a:focus-visible {
      color: var(--text-primary) !important;
    }

    .home .bar nav a[href='#racket'] {
      animation-timeline: --t-racket, --t-racket;
    }
    .home .bar nav a[href='#strength'] {
      animation-timeline: --t-strength, --t-strength;
    }
    .home .bar nav a[href='#running'] {
      animation-timeline: --t-running, --t-running;
    }
    .home .bar nav a[href='#goals'] {
      animation-timeline: --t-goals, --t-goals;
    }
    .home .bar nav a[href='#coach'] {
      animation-timeline: --t-coach, --t-coach;
    }
    .home .bar nav a[href='#pricing'] {
      animation-timeline: --t-pricing, --t-pricing;
    }

    .ground {
      position: fixed;
      inset: 0;
      z-index: -1;
      display: block;
      pointer-events: none;
    }

    .ground i {
      position: absolute;
      inset: 0;
      opacity: 0;
      animation: tint linear both;
      animation-timeline: --t-golf;
    }

    .ground .gt-golf {
      background: radial-gradient(80% 70% at 50% 45%, rgba(123, 214, 106, 0.075), transparent 72%);
    }
    .ground .gt-racket {
      animation-timeline: --t-racket;
    }
    /* Racket's wash in tennis's tone, and in pickleball's for its second loop (below). */
    .ground .gt-racket b {
      position: absolute;
      inset: 0;
      background: radial-gradient(80% 70% at 50% 45%, rgba(255, 144, 104, 0.07), transparent 72%);
    }
    .ground .gt-racket .rk-pickleball {
      background: radial-gradient(80% 70% at 50% 45%, rgba(255, 140, 194, 0.07), transparent 72%);
      opacity: 0;
    }
    .ground .gt-strength {
      background: radial-gradient(80% 70% at 50% 45%, rgba(134, 172, 255, 0.075), transparent 72%);
      animation-timeline: --t-strength;
    }
    .ground .gt-running {
      background: radial-gradient(80% 70% at 50% 45%, rgba(79, 208, 234, 0.075), transparent 72%);
      animation-timeline: --t-running;
    }
    .ground .gt-goals {
      background: radial-gradient(80% 70% at 50% 45%, rgba(94, 230, 168, 0.065), transparent 72%);
      animation-timeline: --t-goals;
    }
    .ground .gt-coach {
      background: radial-gradient(80% 70% at 50% 45%, rgba(169, 155, 255, 0.085), transparent 72%);
      animation-timeline: --t-coach;
    }
    .ground .gt-run {
      background: radial-gradient(80% 70% at 50% 45%, rgba(79, 208, 234, 0.065), transparent 72%);
      animation-timeline: --t-run;
    }

    /* Each section's heading, words, phones and cards ease in (a small rise, ease-out) as they come
       onto the screen. Only wrappers ease in: whatever moves on its own clock sits inside them. */
    .strip,
    .home .sec-head,
    .split-copy > .checks,
    .split-copy > .loop-list,
    .split-art.depth,
    .split-art.loop-art,
    .goal-phone,
    .gstep,
    .coach-note,
    #coach .fine,
    .coach-pair,
    .ev-intro,
    .ev-group,
    .pv,
    .compare,
    .cp-foot,
    #faq h2,
    .faq,
    .final-inner {
      animation: enter cubic-bezier(0.22, 1, 0.36, 1) both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
  }
}

/* What each feature does runs on its own clock, scrolling or not (the hero's way): Racket's card
   and phone drift apart in depth while its strokes arrive; Coach's answer is written out. Golf,
   Strength and Running play their loops (below). The activities and Goals' sessions keep their own loops
   (above). Gentle, ease-in-out, with a rest in every cycle. */
@media (prefers-reduced-motion: no-preference) {
  .depth-phone {
    animation: depth-back var(--loop) ease-in-out infinite;
  }

  .depth-card {
    animation: depth-front var(--loop) ease-in-out infinite;
  }

  .depth-card .stroke-chips li {
    animation: chip-loop var(--loop) ease-out infinite both;
  }
  .depth-card .stroke-chips .fh {
    animation:
      chip-loop var(--loop) ease-out infinite both,
      fh-glow var(--loop) infinite;
  }

  /* The forehand's sheet rises over the tennis screen, its replay plays through to just after the
     contact, and as it reaches the contact the card's Forehand count ticks up by one; the sheet
     lowers and the count goes back with the chips. One clock (--loop) for all of it. */
  .stroke-sheet,
  .ss-scrim {
    display: block;
  }
  .stroke-sheet {
    animation: sheet-rise var(--loop) infinite;
  }
  .ss-scrim {
    animation: sheet-scrim var(--loop) infinite;
  }
  .ss-replay img {
    animation: replay-frames var(--loop) infinite;
  }
  .fh-reel {
    animation: fh-tick var(--loop) infinite;
  }
  .depth-card .stroke-chips li:nth-child(2) {
    animation-delay: 0.35s;
  }
  .depth-card .stroke-chips li:nth-child(3) {
    animation-delay: 0.7s;
  }
  .depth-card .stroke-chips li:nth-child(4) {
    animation-delay: 1.05s;
  }
  /* Pickleball's Forehand drive arrives second; its highlight still meets the contact. */
  .depth-card .stroke-chips li.fh:nth-child(2) {
    animation-delay: 0.35s, 0s;
  }

  /* Racket's two loops: tennis for the first loop of the cycle, pickleball for the second, each
     handing over to the other in a crossfade once its sheet has gone and its chips have left. The
     pickleball screen lies over the tennis one; the sheets, cards, cups, wash and eyebrow cross. */
  #racket .rk-tennis,
  .ground .rk-tennis {
    animation: rk-out var(--cycle) infinite;
  }
  #racket .rk-pickleball,
  .ground .rk-pickleball {
    display: block;
    animation: rk-in var(--cycle) infinite;
  }
  #racket .hc.rk-pickleball {
    display: grid;
  }
  #racket .stroke-sheet.rk-tennis {
    animation:
      sheet-rise var(--loop) infinite,
      rk-out var(--cycle) infinite;
  }
  #racket .stroke-sheet.rk-pickleball {
    animation:
      sheet-rise var(--loop) infinite,
      rk-in var(--cycle) infinite;
  }
  #racket .rk-tennis .stroke-chips {
    animation: rk-chips-tennis var(--cycle) infinite;
  }
  #racket .rk-pickleball .stroke-chips {
    animation: rk-chips-pickleball var(--cycle) infinite;
  }
  #racket .eyebrow {
    animation: rk-tone var(--cycle) infinite;
  }
  /* Its steps, one a sport, lit with their loop (below, "Racket's steps"). */
  .racket-steps .ls-1 {
    animation: rk-ls-1 var(--cycle) infinite;
  }
  .racket-steps .ls-1 .ls-line {
    animation: rk-line-1 var(--cycle) linear infinite;
  }
  .racket-steps .ls-2 {
    animation: rk-ls-2 var(--cycle) infinite;
  }
  .racket-steps .ls-2 .ls-line {
    animation: rk-line-2 var(--cycle) linear infinite;
  }

  /* Golf's loops (below, "Golf's loops"): Range's screens, cards and steps on its clock
     (--range), the round's on its own (--round). */
  .gr-scrim,
  .gr-sheet,
  .gr-analysis,
  .gr-bag,
  .rf,
  .ls-line {
    display: block;
  }
  .golf-card {
    display: grid;
  }
  .gr-scrim {
    animation: rg-scrim var(--range) infinite;
  }
  .gr-sheet {
    animation: rg-sheet var(--range) infinite;
  }
  .sr-window img {
    animation: rg-frames var(--range) infinite;
  }
  .gr-analysis {
    animation: rg-analysis var(--range) infinite;
  }
  .gr-bag {
    animation: rg-bag var(--range) infinite;
  }
  .sc-swings {
    animation: rg-card-1 var(--range) infinite;
  }
  .sc-tempo {
    animation: rg-card-2 var(--range) infinite;
  }
  .sc-analysis {
    animation: rg-card-3 var(--range) infinite;
  }
  .sc-new {
    animation: rg-land var(--range) infinite;
  }
  .sc-new .sc-dot {
    animation: rg-dot var(--range) infinite;
  }
  .sc-reel {
    animation: rg-tick var(--range) infinite;
  }
  .sc-back {
    animation: rg-back var(--range) cubic-bezier(0.45, 0, 0.55, 1) infinite;
  }
  .sc-down {
    animation: rg-down var(--range) cubic-bezier(0.5, 0, 0.9, 0.6) infinite;
  }
  .sc-figure {
    animation: rg-ratio var(--range) infinite;
  }
  .sc-parts span:first-child b {
    animation: rg-top var(--range) infinite;
  }
  .sc-parts span + span b {
    animation: rg-impact var(--range) infinite;
  }
  .sa-steps li {
    animation: rg-step var(--range) infinite;
  }
  .sa-steps li:nth-child(2) {
    animation-delay: -19s;
  }
  .sa-steps li:nth-child(3) {
    animation-delay: -18s;
  }
  .range-steps .ls-1 {
    animation: rg-ls-1 var(--range) infinite;
  }
  .range-steps .ls-2 {
    animation: rg-ls-2 var(--range) infinite;
  }
  .range-steps .ls-3 {
    animation: rg-ls-3 var(--range) infinite;
  }
  .range-steps .ls-4 {
    animation: rg-ls-4 var(--range) infinite;
  }
  .range-steps .ls-1 .ls-line {
    animation: rg-line-1 var(--range) linear infinite;
  }
  .range-steps .ls-2 .ls-line {
    animation: rg-line-2 var(--range) linear infinite;
  }
  .range-steps .ls-3 .ls-line {
    animation: rg-line-3 var(--range) linear infinite;
  }
  .range-steps .ls-4 .ls-line {
    animation: rg-line-4 var(--range) linear infinite;
  }

  /* The round: its screens over the tee, the card and the steps on one clock. */
  .rf-2 {
    animation: rd-frame-2 var(--round) infinite;
  }
  .rf-3 {
    animation: rd-frame-3 var(--round) infinite;
  }
  .rf-4 {
    animation: rd-frame-4 var(--round) infinite;
  }
  .rf-5 {
    animation: rd-frame-5 var(--round) infinite;
  }
  .rf-6 {
    animation: rd-frame-6 var(--round) infinite;
  }
  .rf-7 {
    animation: rd-frame-7 var(--round) infinite;
  }
  .rf-8 {
    animation: rd-frame-8 var(--round) infinite;
  }
  .rc-card {
    animation: rd-grow var(--round) infinite;
  }
  .hm-2 {
    animation: rd-map-2 var(--round) infinite;
  }
  .hm-3 {
    animation: rd-map-3 var(--round) infinite;
  }
  .rc-row-2 {
    animation: rd-row-2 var(--round) infinite;
  }
  .rc-dist {
    animation: rd-dist var(--round) infinite;
  }
  .rc-shots {
    animation: rd-shots var(--round) infinite;
  }
  .rc-gps {
    animation: rd-gps var(--round) infinite;
  }
  .rc-lines {
    animation: rd-lines var(--round) infinite;
  }
  .rc-turn {
    animation: rd-turn var(--round) infinite;
  }
  .round-steps .ls-1 {
    animation: rd-ls-1 var(--round) infinite;
  }
  .round-steps .ls-1 .ls-line {
    animation: rd-line-1 var(--round) linear infinite;
  }
  .round-steps .ls-2 {
    animation: rd-ls-2 var(--round) infinite;
  }
  .round-steps .ls-2 .ls-line {
    animation: rd-line-2 var(--round) linear infinite;
  }
  .round-steps .ls-3 {
    animation: rd-ls-3 var(--round) infinite;
  }
  .round-steps .ls-3 .ls-line {
    animation: rd-line-3 var(--round) linear infinite;
  }
  .round-steps .ls-4 {
    animation: rd-ls-4 var(--round) infinite;
  }
  .round-steps .ls-4 .ls-line {
    animation: rd-line-4 var(--round) linear infinite;
  }
  .round-steps .ls-5 {
    animation: rd-ls-5 var(--round) infinite;
  }
  .round-steps .ls-5 .ls-line {
    animation: rd-line-5 var(--round) linear infinite;
  }

  .coach-back img {
    animation: write 10s ease-in-out infinite;
  }
}

/* Each section's loop starts at its first step as the section comes into view and stops, back at
   the start, once it has gone: --inview is 1 while any of the section is on the screen (its view
   timeline, no fill outside it) and 0 otherwise, and while it is 0 the loop's pieces lose their
   animations (a style query on the section's value, which they inherit). Taking a name away
   resets an animation; giving it back starts it at its start, every piece of the section at once,
   so its one clock holds; its steps meanwhile stand at the first, so nothing moves. Only the pause is queried, never the play: a browser without style
   queries, scroll timelines or @property never matches it and plays the loops from the page's
   load as before. The hero isn't one of them. Golf's, Racket's, Strength's and Running's pieces
   are legal-site.ts's (loopCss); Goals' and Coach's are here. */
@property --inview {
  syntax: '<integer>';
  inherits: true;
  initial-value: 0;
}

@keyframes inview {
  from,
  to {
    --inview: 1;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .golf-range,
    .golf-course,
    #racket,
    .lift-loop,
    .run-loop,
    #goals,
    #coach {
      animation: inview linear;
      animation-timeline: view();
    }

    /* Racket's wash on the ground crosses with its loop, so it follows Racket's view too. */
    .ground {
      animation: inview linear;
      animation-timeline: --t-racket;
    }

    @container style(--inview: 0) {
      /* The steps stand as each loop's first moment has them, so the list keeps its height. */
      :is(.golf-range, .golf-course, #racket, .lift-loop, .run-loop) .ls {
        --on: 0;
        grid-template-rows: 0fr;
      }

      :is(.golf-range, .golf-course, #racket, .lift-loop, .run-loop) .ls-1 {
        --on: 1;
        grid-template-rows: 1fr;
      }

      #goals :is(.flow-chips li, .reel, .flow-bar i, .flow-goal, .goal-phone img, .pieces-fade img),
      #coach .coach-back img {
        animation-name: none !important;
      }
    }
  }
}

/* A step's detail opens under its title while it is lit and closes after, eased on the loop's
   clock as the steps hand over (its rows from the step's keyframes); the ghost holds the list's
   box at its tallest, so nothing outside the list moves. Still, every detail stays open. */
@media (prefers-reduced-motion: no-preference) {
  .ls-more {
    grid-template-rows: inherit;
    opacity: var(--on);
  }

  .ls-ghost {
    display: grid;
  }
}

@keyframes dock-away {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes nav-on {
  from {
    color: var(--text-secondary);
  }
  to {
    color: var(--text-primary);
  }
}

@keyframes nav-off {
  from {
    color: var(--text-primary);
  }
  to {
    color: var(--text-secondary);
  }
}

@keyframes nav-line-on {
  from {
    opacity: 0;
    transform: scaleX(0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes nav-line-off {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: scaleX(0);
  }
}

@keyframes tint {
  0% {
    opacity: 0;
  }
  30%,
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Racket's phone and card drift apart in depth and back, resting at each end. */
@keyframes depth-back {
  0%,
  12%,
  100% {
    transform: none;
  }
  50%,
  62% {
    transform: translateY(-6px);
  }
}

@keyframes depth-front {
  0%,
  12%,
  100% {
    transform: none;
  }
  50%,
  62% {
    transform: translateY(6px);
  }
}

/* Racket's forehand sheet: up from 14% to 21% of the loop, down from 80% to 86%. */
@keyframes sheet-rise {
  0%,
  14% {
    transform: translateY(100%);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  21%,
  80% {
    transform: none;
    animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.2);
  }
  86%,
  100% {
    transform: translateY(100%);
  }
}

@keyframes sheet-scrim {
  0%,
  14% {
    opacity: 0;
  }
  21%,
  80% {
    opacity: 1;
  }
  86%,
  100% {
    opacity: 0;
  }
}

/* Its replay's 109 frames, 12.5 ms of the stroke apart, one after another from 24% to 70% of the
   loop (4.6 s for the stroke's 1.35 s, about the app's ¼×, 23.5 frames a second), down the first
   column (0–54) and then the second (55–108): frame 96, the contact, shows at 64.9%; the last
   stays until the sheet has gone. */
@keyframes replay-frames {
  0%,
  24% {
    transform: none;
    animation-timing-function: steps(54, end);
  }
  47% {
    transform: translateY(-98.1818%);
    animation-timing-function: steps(1, end);
  }
  47.4259% {
    transform: translateX(-50%);
    animation-timing-function: steps(53, end);
  }
  70%,
  88% {
    transform: translate(-50%, -96.3636%);
  }
  89%,
  100% {
    transform: none;
  }
}

/* The forehand's count goes up at the contact (64.9%) and back once the chips have left (92%, or
   95.5% for pickleball's Forehand drive, the second chip). */
@keyframes fh-tick {
  0%,
  64.9% {
    transform: none;
  }
  66.5%,
  97% {
    transform: translateY(-50%);
  }
  98%,
  100% {
    transform: none;
  }
}

/* Racket's two loops on the one clock (--cycle, two loops): tennis's things for the first, pickleball's
   for the second, crossing in 0.6 s at the end of each loop (47% to 50%, 97% to 100%), when the
   sheet is down and the chips have gone. */
@keyframes rk-out {
  0%,
  47% {
    opacity: 1;
  }
  50%,
  97% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes rk-in {
  0%,
  47% {
    opacity: 0;
  }
  50%,
  97% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* The eyebrow and its icon: tennis's tone, then pickleball's, crossing with the rest. */
@keyframes rk-tone {
  0%,
  47% {
    color: var(--racket);
  }
  50%,
  97% {
    color: var(--pickleball);
  }
  100% {
    color: var(--racket);
  }
}

/* Each card's chips show only from 4% into its own loop, when they start to arrive, until its card
   has gone: a chip still leaving from the hidden loop never shows as its card comes in. */
@keyframes rk-chips-tennis {
  0%,
  1.9% {
    opacity: 0;
  }
  2%,
  50% {
    opacity: 1;
  }
  50.1%,
  100% {
    opacity: 0;
  }
}

@keyframes rk-chips-pickleball {
  0%,
  51.9% {
    opacity: 0;
  }
  52%,
  100% {
    opacity: 1;
  }
}

/* Racket's steps: tennis lit for the cycle's first loop, pickleball for its second, handing over
   as the section crosses (47% to 50%, 97% to 100%), each step's line growing through its loop. */
@keyframes rk-ls-1 {
  0%,
  48.5% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  50%,
  98.5% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  100% {
    --on: 1;
    grid-template-rows: 1fr;
  }
}

@keyframes rk-ls-2 {
  0%,
  48.5% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  50%,
  98.5% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}

@keyframes rk-line-1 {
  0% {
    opacity: 1;
    transform: scaleX(0);
  }
  49% {
    opacity: 1;
    transform: none;
  }
  50.5% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}

@keyframes rk-line-2 {
  0%,
  50% {
    opacity: 0;
    transform: scaleX(0);
  }
  98% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}

@keyframes fh-glow {
  0%,
  64.9%,
  78%,
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
  66.5% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--t) 45%, transparent);
    background: color-mix(in srgb, var(--t) 34%, transparent);
  }
}

/* ---- Golf's loops ----
   Range, on its 20 s clock: the practice (0–20%), a swing landing at 7%; Swing 1's sheet (20–55%),
   rising, its replay resting at address, then its 121 frames, 14.76 ms of the swing apart, from
   24.416% to 49.376% (5 s for the swing's 1.77 s, the app's ¼× near enough, 24 frames a second, its
   rhythm kept): takeaway at 24.55%, the top (frame 73) at 39.6%, impact (frame 98) at 44.8%; the analysis's card (55–77.5%); Your bag (77.5–100%), then
   back to the practice. */
@keyframes rg-card-1 {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  2%,
  18.5% {
    opacity: 1;
    transform: none;
  }
  20%,
  100% {
    opacity: 0;
    transform: none;
  }
}

@keyframes rg-land {
  0%,
  5.5% {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
  7.5%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes rg-dot {
  0%,
  6.5% {
    transform: scale(0);
  }
  8% {
    transform: scale(1.5);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--golf) 35%, transparent);
  }
  10%,
  100% {
    transform: none;
  }
}

@keyframes rg-tick {
  0%,
  6.5% {
    transform: none;
  }
  7.5%,
  100% {
    transform: translateY(-50%);
  }
}

@keyframes rg-scrim {
  0%,
  20% {
    opacity: 0;
  }
  23.5%,
  59% {
    opacity: 1;
  }
  59.1%,
  100% {
    opacity: 0;
  }
}

@keyframes rg-sheet {
  0%,
  20% {
    transform: translateY(100%);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  23.5%,
  59% {
    transform: none;
  }
  59.1%,
  100% {
    transform: translateY(100%);
  }
}

/* Down the first column (frames 0–40), the second (41–80), the third (81–120), 0.208% apart. */
@keyframes rg-frames {
  0%,
  24.416% {
    transform: none;
    animation-timing-function: steps(40, end);
  }
  32.736% {
    transform: translateY(-97.561%);
    animation-timing-function: steps(1, end);
  }
  32.944% {
    transform: translateX(-33.3333%);
    animation-timing-function: steps(39, end);
  }
  41.056% {
    transform: translate(-33.3333%, -95.122%);
    animation-timing-function: steps(1, end);
  }
  41.264% {
    transform: translateX(-66.6667%);
    animation-timing-function: steps(39, end);
  }
  49.376%,
  59% {
    transform: translate(-66.6667%, -95.122%);
  }
  59.1%,
  100% {
    transform: none;
  }
}

@keyframes rg-card-2 {
  0%,
  20% {
    opacity: 0;
    transform: translateY(10px);
  }
  22%,
  53.5% {
    opacity: 1;
    transform: none;
  }
  55%,
  100% {
    opacity: 0;
    transform: none;
  }
}

/* Swing 1's tempo fills with its replay: the backswing from takeaway to the top, the downswing
   from the top to impact, in their proportion; the ratio with impact. */
@keyframes rg-back {
  0%,
  24.55% {
    transform: scaleX(0);
  }
  39.6%,
  100% {
    transform: none;
  }
}

@keyframes rg-down {
  0%,
  39.6% {
    transform: scaleX(0);
  }
  44.8%,
  100% {
    transform: none;
  }
}

@keyframes rg-ratio {
  0%,
  44.8% {
    opacity: 0;
    transform: scale(0.86);
  }
  46% {
    opacity: 1;
    transform: scale(1.1);
    text-shadow: 0 0 18px color-mix(in srgb, var(--golf) 70%, transparent);
  }
  48.5%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes rg-top {
  0%,
  39.6% {
    opacity: 0;
  }
  40.6%,
  100% {
    opacity: 1;
  }
}

@keyframes rg-impact {
  0%,
  44.8% {
    opacity: 0;
  }
  45.8%,
  100% {
    opacity: 1;
  }
}

@keyframes rg-analysis {
  0%,
  55% {
    opacity: 0;
  }
  57.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes rg-card-3 {
  0%,
  55% {
    opacity: 0;
    transform: translateY(10px);
  }
  57%,
  76% {
    opacity: 1;
    transform: none;
  }
  77.5%,
  100% {
    opacity: 0;
    transform: none;
  }
}

/* Film, then Pick 1 s later, then Read (each its own delay). */
@keyframes rg-step {
  0%,
  58% {
    opacity: 0.35;
  }
  60%,
  100% {
    opacity: 1;
  }
}

@keyframes rg-bag {
  0%,
  77.5% {
    opacity: 0;
  }
  80%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Each step lit, its detail open, while its screen is up, handing over as the screens cross (the
   round's steps the same way). */
@keyframes rg-ls-1 {
  0%,
  19% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  20.5%,
  98.5% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  100% {
    --on: 1;
    grid-template-rows: 1fr;
  }
}

@keyframes rg-ls-2 {
  0%,
  19% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  20.5%,
  53.5% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  55%,
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}

@keyframes rg-ls-3 {
  0%,
  53.5% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  55%,
  76% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  77.5%,
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}

@keyframes rg-ls-4 {
  0%,
  76% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  77.5%,
  98.5% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}

/* Its line grows across while its step plays, then fades. */
@keyframes rg-line-1 {
  0% {
    transform: scaleX(0);
  }
  19.5% {
    opacity: 1;
    transform: none;
  }
  21%,
  100% {
    opacity: 0;
    transform: none;
  }
}

@keyframes rg-line-2 {
  0%,
  20% {
    transform: scaleX(0);
  }
  54.5% {
    opacity: 1;
    transform: none;
  }
  56%,
  100% {
    opacity: 0;
    transform: none;
  }
}

@keyframes rg-line-3 {
  0%,
  55% {
    transform: scaleX(0);
  }
  77% {
    opacity: 1;
    transform: none;
  }
  78.5%,
  100% {
    opacity: 0;
    transform: none;
  }
}

@keyframes rg-line-4 {
  0%,
  77.5% {
    transform: scaleX(0);
  }
  99% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}

/* The round, on its 16 s clock, a quarter each: the tee, the drive (25%), the approach (50%), the
   review (75%), each frame crossing in over the last, all back to the tee at the end. The card's
   shots go 0, 1, 2 with the drive and the approach, its GPS distance comes with the approach (the
   drive measured to it), and its line follows the screen. */
/* The round on its 30 s clock: each screen fades in at its start (%: the drive 10, the approach 20,
   the review 50, the scorecard 62.5, 71.25, 80 and 88.75) and stays until the clock turns; the
   approach stays up through the map's step (30 to 50), its map on its own card beside the phone,
   growing at 30, 36.5 and 43; the card's reels turn with them; each step lit while its screens are
   up. */
@keyframes rd-frame-2 {
  0%,
  10% {
    opacity: 0;
  }
  11.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes rd-frame-3 {
  0%,
  30% {
    opacity: 0;
  }
  31.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes rd-frame-4 {
  0%,
  50% {
    opacity: 0;
  }
  51.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes rd-frame-5 {
  0%,
  62.5% {
    opacity: 0;
  }
  64%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes rd-frame-6 {
  0%,
  71.25% {
    opacity: 0;
  }
  72.75%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes rd-frame-7 {
  0%,
  80% {
    opacity: 0;
  }
  81.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes rd-frame-8 {
  0%,
  88.75% {
    opacity: 0;
  }
  90.25%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* The round's card grown to hold the hole's map through the map's step, only while the step's
   detail (its course data credit) is wholly open. */

@keyframes rd-grow {
  0%,
  20.5% {
    --grow: 0;
  }
  22%,
  47.5% {
    --grow: 1;
  }
  49%,
  100% {
    --grow: 0;
  }
}

@keyframes rd-map-2 {
  0%,
  30% {
    opacity: 0;
  }
  31.5%,
  98.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes rd-map-3 {
  0%,
  40% {
    opacity: 0;
  }
  41.5%,
  98.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Shot 2's row comes with shot 2 on the map, as shot 1's GPS distance, now measured to it, turns in. */

@keyframes rd-row-2 {
  0%,
  30% {
    opacity: 0;
    transform: translateY(4px);
  }
  31.5%,
  98.5% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: translateY(4px);
  }
}

@keyframes rd-dist {
  0%,
  30% {
    transform: none;
  }
  31.5%,
  98.5% {
    transform: translateY(-50%);
  }
  100% {
    transform: none;
  }
}

@keyframes rd-shots {
  0%,
  10% {
    transform: none;
  }
  11.5%,
  30% {
    transform: translateY(-14.2857%);
  }
  31.5%,
  62.5% {
    transform: translateY(-28.5714%);
  }
  64%,
  71.25% {
    transform: translateY(-42.8571%);
  }
  72.75%,
  80% {
    transform: translateY(-57.1429%);
  }
  81.5%,
  88.75% {
    transform: translateY(-71.4286%);
  }
  90.25%,
  98.5% {
    transform: translateY(-85.7143%);
  }
  100% {
    transform: none;
  }
}

@keyframes rd-gps {
  0%,
  20% {
    transform: none;
  }
  21.5%,
  30% {
    transform: translateY(-14.2857%);
  }
  31.5%,
  62.5% {
    transform: translateY(-28.5714%);
  }
  64%,
  71.25% {
    transform: translateY(-42.8571%);
  }
  72.75%,
  80% {
    transform: translateY(-57.1429%);
  }
  81.5%,
  88.75% {
    transform: translateY(-71.4286%);
  }
  90.25%,
  98.5% {
    transform: translateY(-85.7143%);
  }
  100% {
    transform: none;
  }
}

/* The round card's chip turns by fading, not sliding: its line fades out in place, the reel jumps
   while it's unseen and the next fades in in place, so no line is ever half in its one-line window
   (a slide showed the outgoing line's "·" above the incoming one, its foot cut off). */
@keyframes rd-lines {
  0%,
  10% {
    transform: none;
    opacity: 1;
  }
  10.75% {
    transform: none;
    opacity: 0;
  }
  10.76% {
    transform: translateY(-10%);
    opacity: 0;
  }
  11.5%,
  20% {
    transform: translateY(-10%);
    opacity: 1;
  }
  20.75% {
    transform: translateY(-10%);
    opacity: 0;
  }
  20.76% {
    transform: translateY(-20%);
    opacity: 0;
  }
  21.5%,
  30% {
    transform: translateY(-20%);
    opacity: 1;
  }
  30.75% {
    transform: translateY(-20%);
    opacity: 0;
  }
  30.76% {
    transform: translateY(-30%);
    opacity: 0;
  }
  31.5%,
  40% {
    transform: translateY(-30%);
    opacity: 1;
  }
  40.75% {
    transform: translateY(-30%);
    opacity: 0;
  }
  40.76% {
    transform: translateY(-40%);
    opacity: 0;
  }
  41.5%,
  50% {
    transform: translateY(-40%);
    opacity: 1;
  }
  50.75% {
    transform: translateY(-40%);
    opacity: 0;
  }
  50.76% {
    transform: translateY(-50%);
    opacity: 0;
  }
  51.5%,
  62.5% {
    transform: translateY(-50%);
    opacity: 1;
  }
  63.25% {
    transform: translateY(-50%);
    opacity: 0;
  }
  63.26% {
    transform: translateY(-60%);
    opacity: 0;
  }
  64%,
  71.25% {
    transform: translateY(-60%);
    opacity: 1;
  }
  72% {
    transform: translateY(-60%);
    opacity: 0;
  }
  72.01% {
    transform: translateY(-70%);
    opacity: 0;
  }
  72.75%,
  80% {
    transform: translateY(-70%);
    opacity: 1;
  }
  80.75% {
    transform: translateY(-70%);
    opacity: 0;
  }
  80.76% {
    transform: translateY(-80%);
    opacity: 0;
  }
  81.5%,
  88.75% {
    transform: translateY(-80%);
    opacity: 1;
  }
  89.5% {
    transform: translateY(-80%);
    opacity: 0;
  }
  89.51% {
    transform: translateY(-90%);
    opacity: 0;
  }
  90.25%,
  98.5% {
    transform: translateY(-90%);
    opacity: 1;
  }
  99.25% {
    transform: translateY(-90%);
    opacity: 0;
  }
  99.26% {
    transform: none;
    opacity: 0;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}

@keyframes rd-turn {
  0%,
  62.5% {
    transform: none;
  }
  64%,
  98.5% {
    transform: translateY(-50%);
  }
  100% {
    transform: none;
  }
}

@keyframes rd-ls-1 {
  0%,
  9% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  10.5%,
  98.5% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  100% {
    --on: 1;
    grid-template-rows: 1fr;
  }
}

@keyframes rd-ls-2 {
  0%,
  9% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  10.5%,
  19% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  20.5%,
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}

@keyframes rd-ls-3 {
  0%,
  19% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  20.5%,
  49% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  50.5%,
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}

@keyframes rd-ls-4 {
  0%,
  49% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  50.5%,
  61.5% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  63%,
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}

@keyframes rd-ls-5 {
  0%,
  61.5% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  63%,
  98.5% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}

@keyframes rd-line-1 {
  0% {
    opacity: 1;
    transform: scaleX(0);
  }
  9.5% {
    opacity: 1;
    transform: none;
  }
  11% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}

@keyframes rd-line-2 {
  0%,
  10% {
    opacity: 0;
    transform: scaleX(0);
  }
  19.5% {
    opacity: 1;
    transform: none;
  }
  21% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}

@keyframes rd-line-3 {
  0%,
  20% {
    opacity: 0;
    transform: scaleX(0);
  }
  49.5% {
    opacity: 1;
    transform: none;
  }
  51% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}

@keyframes rd-line-4 {
  0%,
  50% {
    opacity: 0;
    transform: scaleX(0);
  }
  62% {
    opacity: 1;
    transform: none;
  }
  63.5% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}

@keyframes rd-line-5 {
  0%,
  62.5% {
    opacity: 0;
    transform: scaleX(0);
  }
  98% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}

/* Racket's strokes arrive one by one, stay, and leave together before the next set. */
@keyframes chip-loop {
  0%,
  4% {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
  }
  12%,
  84% {
    opacity: 1;
    transform: none;
  }
  92%,
  100% {
    opacity: 0;
    transform: none;
  }
}

/* Coach's answer written out under its title (always shown: the clip starts below "93 at Pine
   Ridge: where the shots went"), read for most of the cycle, then wound back before the next. */
@keyframes write {
  0% {
    clip-path: inset(0 0 85% 0);
  }
  25%,
  95% {
    clip-path: inset(0);
  }
  100% {
    clip-path: inset(0 0 85% 0);
  }
}

/* A section's pieces come onto the screen: a small rise. Its own property, so it never replaces a
   transform. */
@keyframes enter {
  from {
    opacity: 0;
    translate: 0 28px;
  }
  to {
    opacity: 1;
    translate: none;
  }
}

@keyframes drop {
  from {
    opacity: 0;
    transform: translateY(-46px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

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

@keyframes screen {
  0%,
  17.6% {
    opacity: 1;
  }
  20%,
  97.6% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes screen-key {
  0%,
  18.8% {
    border-bottom-color: var(--accent);
    color: var(--accent);
  }
  20%,
  98.8% {
    border-bottom-color: transparent;
    color: var(--text-tertiary);
  }
  100% {
    border-bottom-color: var(--accent);
    color: var(--accent);
  }
}

/* The Strength card's exercises on the 17.5 s cycle (1 s is 5.71%), its screen up for 0 to 3.5 s:
   Push-Up (shown from the card's arrival) to 1.26 s, crossfading softly in the hero's easing to
   Bench Press by 1.82 s, held until the card leaves (3.08 s); Push-Up again at 3.75 s, once the
   card has gone. The crossfade's middle halves the card's time, about 1.5 s each. */
@keyframes ex-1 {
  0%,
  7.2% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  10.4%,
  21.43% {
    opacity: 0;
  }
  21.44%,
  100% {
    opacity: 1;
  }
}

@keyframes ex-2 {
  0%,
  7.2% {
    opacity: 0;
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  10.4%,
  21.43% {
    opacity: 1;
  }
  21.44%,
  100% {
    opacity: 0;
  }
}

@keyframes hero-card {
  0%,
  17.6% {
    opacity: 1;
    transform: none;
  }
  20% {
    opacity: 0;
    transform: translateY(-10px);
  }
  20.8%,
  97.6% {
    opacity: 0;
    transform: translateY(14px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* The swing's times on the 17.5 s cycle: 1 s is 5.71%. Back from 0.35 s to 1.47 s, down to 1.83 s,
   held while the screen is up, emptied once it has gone. */
@keyframes backswing {
  0%,
  2% {
    transform: scaleX(0);
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  }
  8.4%,
  20% {
    transform: none;
  }
  20.8%,
  100% {
    transform: scaleX(0);
  }
}

@keyframes downswing {
  0%,
  8.4% {
    transform: scaleX(0);
    animation-timing-function: cubic-bezier(0.5, 0, 1, 1);
  }
  10.46%,
  20% {
    transform: none;
  }
  20.8%,
  100% {
    transform: scaleX(0);
  }
}

@keyframes trace {
  0%,
  2% {
    stroke-dashoffset: 1;
  }
  12.4%,
  20% {
    stroke-dashoffset: 0;
  }
  20.8%,
  100% {
    stroke-dashoffset: 1;
  }
}

@keyframes peak {
  0%,
  10.24% {
    opacity: 0;
    transform: scale(0.3);
  }
  11.2% {
    opacity: 1;
    transform: scale(1.6);
  }
  12.4% {
    transform: none;
  }
  13.6% {
    transform: scale(1.3);
  }
  14.8%,
  20% {
    opacity: 1;
    transform: none;
  }
  20.8%,
  100% {
    opacity: 0;
  }
}

@keyframes detected {
  0%,
  10.24% {
    opacity: 0;
    transform: translateX(-6px);
  }
  11.6%,
  20% {
    opacity: 1;
    transform: none;
  }
  20.8%,
  100% {
    opacity: 0;
  }
}

@keyframes chip {
  0%,
  1.6% {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
  }
  4%,
  20% {
    opacity: 1;
    transform: none;
  }
  20.8%,
  100% {
    opacity: 0;
  }
}

@keyframes chip-2 {
  0%,
  3.2% {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
  }
  5.6%,
  20% {
    opacity: 1;
    transform: none;
  }
  20.8%,
  100% {
    opacity: 0;
  }
}

@keyframes chip-3 {
  0%,
  4.8% {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
  }
  7.2%,
  20% {
    opacity: 1;
    transform: none;
  }
  20.8%,
  100% {
    opacity: 0;
  }
}

@keyframes chip-4 {
  0%,
  6.4% {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
  }
  8.8%,
  20% {
    opacity: 1;
    transform: none;
  }
  20.8%,
  100% {
    opacity: 0;
  }
}

@keyframes target {
  0%,
  2.4% {
    transform: scaleX(0);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  8%,
  20% {
    transform: none;
  }
  20.8%,
  100% {
    transform: scaleX(0);
  }
}

@keyframes flow-1 {
  0%,
  17% {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1);
  }
  20%,
  91% {
    opacity: 1;
    transform: none;
  }
  95%,
  100% {
    opacity: 0;
    transform: none;
  }
}

@keyframes flow-2 {
  0%,
  39% {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1);
  }
  42%,
  91% {
    opacity: 1;
    transform: none;
  }
  95%,
  100% {
    opacity: 0;
    transform: none;
  }
}

@keyframes flow-3 {
  0%,
  61% {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1);
  }
  64%,
  91% {
    opacity: 1;
    transform: none;
  }
  95%,
  100% {
    opacity: 0;
    transform: none;
  }
}

@keyframes flow-tick {
  0%,
  17% {
    transform: none;
  }
  19%,
  39% {
    transform: translateY(-25%);
  }
  41%,
  61% {
    transform: translateY(-50%);
  }
  63%,
  92% {
    transform: translateY(-75%);
  }
  94%,
  100% {
    transform: none;
  }
}

@keyframes flow-bar {
  0%,
  17% {
    transform: scaleX(0);
  }
  20%,
  39% {
    transform: scaleX(0.3333);
  }
  42%,
  61% {
    transform: scaleX(0.6667);
  }
  64%,
  92% {
    transform: none;
  }
  95%,
  100% {
    transform: scaleX(0);
  }
}

/* Break 90's screen and Today's row with 1, 2 and 3 sessions, each up from the tick to its count
   until the week winds back (flow-tick's stops). */
@keyframes flow-frame-1 {
  0%,
  17% {
    opacity: 0;
  }
  19%,
  92% {
    opacity: 1;
  }
  94%,
  100% {
    opacity: 0;
  }
}

@keyframes flow-frame-2 {
  0%,
  39% {
    opacity: 0;
  }
  41%,
  92% {
    opacity: 1;
  }
  94%,
  100% {
    opacity: 0;
  }
}

@keyframes flow-frame-3 {
  0%,
  61% {
    opacity: 0;
  }
  63%,
  92% {
    opacity: 1;
  }
  94%,
  100% {
    opacity: 0;
  }
}

/* The goal lights as each session appears. */
@keyframes flow-land {
  0%,
  17%,
  25%,
  39%,
  47%,
  61%,
  69%,
  100% {
    border-color: var(--separator);
  }
  19%,
  41%,
  63% {
    border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  }
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* ---- Strength's and Running's loops: Golf's way (above, "Golf's loops"), each its steps on one side
   and a phone on the other playing the app's screens on one clock (Strength's --lift, Running's
   --run-clock, never --run, which is running's tone), a card beside it ticking in step. Still, Strength shows its first screen and every step
   whole; Running shows its page at the running form, its card whole. ---- */
.lift-loop {
  --lift: 20s;
}

.run-loop {
  --run-clock: 24s;
}

/* How far round the route's cover has been swept off (Running's page, below). */
@property --sweep {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* The steps' progress line and focus ring in the section's tone. */
.lift-loop .ls-line {
  background: var(--strength);
}

.run-loop .ls-line {
  background: var(--run);
}

.lift-loop .ls:has(:focus-visible) {
  outline-color: var(--strength);
}

.run-loop .ls:has(:focus-visible) {
  outline-color: var(--run);
}

.golf-range .loop-list + .checks,
.run-loop .loop-list + .checks,
#racket .loop-list + .checks {
  margin-top: 28px;
}

/* Racket's steps: tennis's line and focus ring in its tone, pickleball's in its own. With reduced
   motion, a chosen sport shows still at its stroke's replay: its sheet, and pickleball's screen,
   sheet and card when it's pickleball (legal-site.ts sets each at its moment). */
#racket .ls-line {
  background: var(--racket);
}

#racket .ls-2 .ls-line {
  background: var(--pickleball);
}

#racket .ls:has(:focus-visible) {
  outline-color: var(--racket);
}

#racket .ls-2:has(:focus-visible) {
  outline-color: var(--pickleball);
}

@media (prefers-reduced-motion: reduce) {
  #racket:has(.ls-pick:checked, .ls-pick-again:checked)
    :is(.stroke-sheet, .ss-scrim, .rk-pickleball) {
    display: block;
  }

  #racket:has(.ls-pick:checked, .ls-pick-again:checked) .hc.rk-pickleball {
    display: grid;
  }
}

/* On a wide screen, the round's way: the card to the phone's right, its top level with the phone's
   upper third; Strength's phone at its column's outer edge, the card between it and the steps,
   under the watch;
   Running's phone in its column, the card over its right edge. */
@media (min-width: 861px) {
  .lift-loop .loop-art {
    grid-template-columns: minmax(0, 1fr);
  }

  .lift-loop .loop-phone {
    justify-self: start;
  }

  .lift-loop .loop-cards,
  .run-loop .loop-cards {
    align-self: start;
    margin-top: calc(var(--lw) * 0.7);
  }

  /* Below the watch beside the phone's upper part (the watch beside a loop, below). */
  .lift-loop .loop-cards {
    justify-self: start;
    margin-top: calc(var(--lw) * 1.05);
    margin-left: min(var(--lw) - 24px, 100% - 270px + 4vw);
  }
}

/* ---- The watch beside a loop: Range's, Strength's and Running's phones each have an Apple Watch
   beside them, the hero's small watch (above, "The motion strip") larger, showing the owner's own
   watch screens on the loop's clock, each at its step: Range's live tempo (the first step), a
   swing's tempo (the replay's) and the swings (after); Strength's set, its list, the curl's guide
   and the rest before its next set, each with the phone's; Running's run in progress, then its
   summary. Placed, never in the flow, so nothing moves; over the phone's frame only, never its
   screen, its card or the steps. On a phone it sits under the phone to the left of the card where
   there's room for both, and is hidden where there isn't (under 600 px). Still, Range and Strength
   show their first screen and Running its summary, or a chosen step's screen (legal-site.ts sets
   each at its step). ---- */
/* Against the phone's left edge, over its frame (12 px), as wide as the gap before the steps
   allows (it narrows with the window: 106 px at 861, the phone's half from about 1200). */
.loop-watch {
  --ww: min(var(--lw) * 0.5, 15vw - 23px);
  position: absolute;
  z-index: 1;
  top: calc(var(--lw) * 0.95);
  right: calc(100% - 12px);
  width: var(--ww);
  isolation: isolate;
}

/* The band, above and below the case. */
.lw-band {
  position: absolute;
  z-index: -1;
  left: 17%;
  right: 17%;
  top: -16%;
  bottom: -16%;
  border-radius: calc(var(--ww) * 0.2);
  background: linear-gradient(90deg, #1b1f1e, #2b302e 50%, #1b1f1e);
}

.lw-case {
  position: relative;
  padding: calc(var(--ww) * 0.012);
  /* The screen's radius plus the rim, so the two are concentric. */
  border-radius: calc(var(--ww) * 0.204);
  background: linear-gradient(
    90deg,
    #26292c,
    #9a9ea3 8%,
    #3d4043 20%,
    #2b2e31 50%,
    #3d4043 80%,
    #9a9ea3 92%,
    #26292c
  );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 18px 40px rgba(0, 0, 0, 0.55);
}

/* The Digital Crown. */
.lw-case::after {
  content: '';
  position: absolute;
  right: calc(var(--ww) * -0.06);
  top: 22%;
  width: calc(var(--ww) * 0.08);
  height: calc(var(--ww) * 0.2);
  border-radius: calc(var(--ww) * 0.03);
  background: linear-gradient(90deg, #43464a, #8a8e92);
}

.lw-screen {
  position: relative;
  overflow: hidden;
  /* Almost bezel-less, as a Series 10 or later: a thin aluminium rim (1.2% of the case) around a
     screen exactly the screenshots' shape (374 × 446), so each shows whole, never cropped or
     stretched. Its corners are 19.7% of its width (0.976 of the case): the largest radius that
     clips no lit pixel of any of the six screens, measured. */
  aspect-ratio: 374 / 446;
  border-radius: calc(var(--ww) * 0.192);
  background: #000;
}

.lw-shot {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.lw-shot + .lw-shot {
  opacity: 0;
}

/* Under the phone, level with the card's top, to its left (the card is 300 px, centred with the
   phone). */
@media (max-width: 860px) {
  .loop-watch {
    --ww: 110px;
    top: calc(100% - 28px + 22px);
    right: calc(50% + 150px + 16px);
  }
}

@media (max-width: 599px) {
  .loop-watch {
    display: none;
  }
}

/* Strength's phone is at its column's outer edge with the steps to its right, so on a wide screen
   its watch is on the phone's right, against its upper part, the card below it (above). */
@media (min-width: 861px) {
  .lift-loop .loop-watch {
    top: calc(var(--lw) * 0.12);
    right: auto;
    left: calc(100% - 12px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .golf-range .lw-2 {
    animation: rg-watch-2 var(--range) infinite;
  }

  .golf-range .lw-3 {
    animation: rg-watch-3 var(--range) infinite;
  }

  .lift-loop .lw-2 {
    animation: lf-watch-2 var(--lift) infinite;
  }

  .lift-loop .lw-3 {
    animation: lf-watch-3 var(--lift) infinite;
  }

  .lift-loop .lw-4 {
    animation: lf-watch-4 var(--lift) infinite;
  }

  .run-loop .lw-2 {
    animation: rn-watch-2 var(--run-clock) infinite;
  }

  .run-loop .lw-3 {
    animation: rn-watch-3 var(--run-clock) infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .run-loop .lw-2 {
    opacity: 1;
  }
}

/* Range's: the live tempo (0–20%), a swing's tempo with the replay (20–55%), the swings after. */
@keyframes rg-watch-2 {
  0%,
  20% {
    opacity: 0;
  }
  22%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes rg-watch-3 {
  0%,
  55% {
    opacity: 0;
  }
  57%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Strength's: the curl's set 2 (0–25%), the workout's list (25–45%), the curl's guide (45–70%), the
   rest before its set 3 (70–100%), each with the phone's. */
@keyframes lf-watch-2 {
  0%,
  25% {
    opacity: 0;
  }
  26.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes lf-watch-3 {
  0%,
  45% {
    opacity: 0;
  }
  46.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes lf-watch-4 {
  0%,
  70% {
    opacity: 0;
  }
  71.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Running's: the run in progress (0–30%), its summary with the run's page (30–70%), then its route
   (the owner's approved screen, the line alone) with the running form. */
@keyframes rn-watch-2 {
  0%,
  30% {
    opacity: 0;
  }
  31.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes rn-watch-3 {
  0%,
  70% {
    opacity: 0;
  }
  71.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* The cards: Racket's strokes card's size and shape, each figure a reel (every item in one place, so
   the widest sets its width and nothing moves as it turns), a chip for what the screen shows. */
.loop-card {
  display: none;
  gap: 12px;
  padding: 18px 20px;
}

.loop-card .hc-head {
  flex-wrap: wrap;
  justify-content: start;
  gap: 8px 10px;
}

.loop-card .hc-title {
  white-space: nowrap;
}

.lc-tiles {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  gap: 4px 28px;
  margin: 0;
}

.lc-tiles > div {
  display: grid;
  justify-items: start;
  gap: 4px;
}

.lc-tiles dt {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lift-card .lc-tiles dt {
  color: var(--strength);
}

.run-card .lc-tiles dt {
  color: var(--run);
}

.lc-tiles dd {
  margin: 0;
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.lc-tiles small {
  margin-left: 4px;
  color: var(--text-tertiary);
  font-size: 0.8125rem;
}

.lc-now {
  display: flex;
  margin: 0;
}

.lc-now .tag {
  font-variant-numeric: tabular-nums;
}

.lc-tick {
  display: inline-block;
  height: 1.25em;
  overflow: hidden;
  line-height: 1.25;
  vertical-align: bottom;
}

.lc-reel {
  display: grid;
}

.lc-reel i {
  font-style: normal;
  white-space: nowrap;
}

/* The running form on the card: the page's three tiles, compact. */
.run-card .form-tiles {
  gap: 6px;
}

.run-card .form-tiles div {
  gap: 6px;
  padding: 10px 10px 9px;
  border-radius: 12px;
}

.run-card .form-tiles dt {
  font-size: 0.6875rem;
}

.run-card .form-tiles dd {
  font-size: 1.125rem;
}

/* Over Strength's first screen, its next three; over Running's, the run's next three moments, then
   its page in a view under the status bar, the page scrolling in it, with the bare covers over the
   route's panel and Along the run's charts at their places on the page (points of its 440 × 2775:
   the panel 376 × 274 at 32, 400; the charts 376 × 330 at 32, 896). Shown only with motion. */
.lf,
.rn,
.rp-view {
  display: none;
}

.lf,
.rn {
  opacity: 0;
}

.phone-screen .lf-2,
.phone-screen .rn-2 {
  z-index: 2;
}

.phone-screen .lf-3,
.phone-screen .rn-3 {
  z-index: 3;
}

.phone-screen .lf-4,
.phone-screen .rn-4 {
  z-index: 4;
}

.rp-view {
  position: absolute;
  top: 12.6cqw;
  left: 0;
  z-index: 5;
  width: 100%;
  height: calc(100% - 12.6cqw);
  overflow: hidden;
  background: #050706;
  opacity: 0;
}

/* Resting on Route: 334 of its 2775 points scrolled. */
.rp-page {
  position: relative;
  width: 100%;
  aspect-ratio: 660 / 4163;
  transform: translateY(-12.036%);
}

.phone-screen .rp-page img {
  top: 0;
  height: 100%;
  object-fit: fill;
}

.phone-screen .rp-page .rp-cover {
  left: 7.2727%;
  width: 85.4545%;
}

/* The route's cover: everything but the part already run, from the start at the east (90deg)
   anticlockwise, about the loop's middle. */
.phone-screen .rp-page .rp-route {
  top: 14.4144%;
  height: 9.8739%;
  -webkit-mask-image: conic-gradient(
    from 90deg at 50% 50%,
    #000 calc(360deg - var(--sweep)),
    transparent 0
  );
  mask-image: conic-gradient(
    from 90deg at 50% 50%,
    #000 calc(360deg - var(--sweep)),
    transparent 0
  );
}

.phone-screen .rp-page .rp-lines {
  top: 32.2883%;
  height: 11.8919%;
}

@media (prefers-reduced-motion: no-preference) {
  .lf,
  .rn,
  .rp-view {
    display: block;
  }

  .loop-card {
    display: grid;
  }

  .lf-2 {
    animation: lf-frame-2 var(--lift) infinite;
  }
  .lf-3 {
    animation: lf-frame-3 var(--lift) infinite;
  }
  .lf-4 {
    animation: lf-frame-4 var(--lift) infinite;
  }
  .lc-sets {
    animation: lf-sets var(--lift) infinite;
  }
  .lc-set {
    animation: lf-set var(--lift) infinite;
  }
  .lift-card .lc-lines {
    animation: lf-lines var(--lift) infinite;
  }
  .lift-steps .ls-1 {
    animation: lf-ls-1 var(--lift) infinite;
  }
  .lift-steps .ls-1 .ls-line {
    animation: lf-line-1 var(--lift) linear infinite;
  }
  .lift-steps .ls-2 {
    animation: lf-ls-2 var(--lift) infinite;
  }
  .lift-steps .ls-2 .ls-line {
    animation: lf-line-2 var(--lift) linear infinite;
  }
  .lift-steps .ls-3 {
    animation: lf-ls-3 var(--lift) infinite;
  }
  .lift-steps .ls-3 .ls-line {
    animation: lf-line-3 var(--lift) linear infinite;
  }
  .lift-steps .ls-4 {
    animation: lf-ls-4 var(--lift) infinite;
  }
  .lift-steps .ls-4 .ls-line {
    animation: lf-line-4 var(--lift) linear infinite;
  }
  .rn-2 {
    animation: rn-frame-2 var(--run-clock) infinite;
  }
  .rn-3 {
    animation: rn-frame-3 var(--run-clock) infinite;
  }
  .rn-4 {
    animation: rn-frame-4 var(--run-clock) infinite;
  }
  .rp-view {
    animation: rn-page var(--run-clock) infinite;
  }
  .rp-page {
    animation: rn-scroll var(--run-clock) infinite;
  }
  .rp-route {
    animation: rn-route var(--run-clock) infinite;
  }
  .rp-lines {
    animation: rn-lines var(--run-clock) linear infinite;
  }
  .lc-distance {
    animation: rn-distance var(--run-clock) infinite;
  }
  .lc-pace {
    animation: rn-pace var(--run-clock) infinite;
  }
  .run-card .form-tiles div {
    animation: rn-form var(--run-clock) cubic-bezier(0.2, 0.8, 0.3, 1) infinite;
  }
  .run-card .form-tiles div:nth-child(2) {
    animation-delay: -23.75s;
  }
  .run-card .form-tiles div:nth-child(3) {
    animation-delay: -23.5s;
  }
  .run-steps .ls-1 {
    animation: rn-ls-1 var(--run-clock) infinite;
  }
  .run-steps .ls-1 .ls-line {
    animation: rn-line-1 var(--run-clock) linear infinite;
  }
  .run-steps .ls-2 {
    animation: rn-ls-2 var(--run-clock) infinite;
  }
  .run-steps .ls-2 .ls-line {
    animation: rn-line-2 var(--run-clock) linear infinite;
  }
  .run-steps .ls-3 {
    animation: rn-ls-3 var(--run-clock) infinite;
  }
  .run-steps .ls-3 .ls-line {
    animation: rn-line-3 var(--run-clock) linear infinite;
  }
  .run-steps .ls-4 {
    animation: rn-ls-4 var(--run-clock) infinite;
  }
  .run-steps .ls-4 .ls-line {
    animation: rn-line-4 var(--run-clock) linear infinite;
  }
}

/* Still: Running's page at the running form, its card whole at the finished run's figures; a chosen
   step's screens and card show still (legal-site.ts sets each at its step). */
@media (prefers-reduced-motion: reduce) {
  .run-loop .rp-view {
    display: block;
    opacity: 1;
  }

  .run-loop .rp-page {
    transform: translateY(-55.4955%);
  }

  .run-loop .rp-cover {
    display: none;
  }

  .run-card {
    display: grid;
  }

  .lc-distance,
  .lc-pace {
    transform: translateY(-80%);
  }

  .lift-loop:has(.ls-pick:checked, .ls-pick-again:checked) .lf,
  .run-loop:has(.ls-pick:checked, .ls-pick-again:checked) :is(.rn, .rp-cover) {
    display: block;
  }

  .lift-loop:has(.ls-pick:checked, .ls-pick-again:checked) .lift-card {
    display: grid;
  }
}

/* ---- Strength's and Running's loops ----
   Strength, on its 20 s clock: the owner's Upper body workout in set 2 of 3 of the dumbbell bicep
   curl (0–25%); its list of exercises (25–45%); the curl's guide (45–70%); resting before its set 3
   of 3 (70–100%), then back to the set. Each frame fades in over the last at
   its start and stays until the clock turns; the watch's screens and the card's reels turn with
   them; each step lit while its screen is up. */

@keyframes lf-frame-2 {
  0%,
  25% {
    opacity: 0;
  }
  26.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes lf-frame-3 {
  0%,
  45% {
    opacity: 0;
  }
  46.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes lf-frame-4 {
  0%,
  70% {
    opacity: 0;
  }
  71.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes lf-sets {
  0%,
  70% {
    transform: none;
  }
  71.5%,
  98.5% {
    transform: translateY(-50%);
  }
  100% {
    transform: none;
  }
}

@keyframes lf-set {
  0%,
  70% {
    transform: none;
  }
  71.5%,
  98.5% {
    transform: translateY(-50%);
  }
  100% {
    transform: none;
  }
}

@keyframes lf-lines {
  0%,
  25% {
    transform: none;
  }
  26.5%,
  45% {
    transform: translateY(-25%);
  }
  46.5%,
  70% {
    transform: translateY(-50%);
  }
  71.5%,
  98.5% {
    transform: translateY(-75%);
  }
  100% {
    transform: none;
  }
}

@keyframes lf-ls-1 {
  0%,
  24% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  25.5%,
  98.5% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  100% {
    --on: 1;
    grid-template-rows: 1fr;
  }
}

@keyframes lf-ls-2 {
  0%,
  24% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  25.5%,
  44% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  45.5%,
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}

@keyframes lf-ls-3 {
  0%,
  44% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  45.5%,
  69% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  70.5%,
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}

@keyframes lf-ls-4 {
  0%,
  69% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  70.5%,
  98.5% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}

@keyframes lf-line-1 {
  0% {
    opacity: 1;
    transform: scaleX(0);
  }
  24.5% {
    opacity: 1;
    transform: none;
  }
  26% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}

@keyframes lf-line-2 {
  0%,
  25% {
    opacity: 0;
    transform: scaleX(0);
  }
  44.5% {
    opacity: 1;
    transform: none;
  }
  46% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}

@keyframes lf-line-3 {
  0%,
  45% {
    opacity: 0;
    transform: scaleX(0);
  }
  69.5% {
    opacity: 1;
    transform: none;
  }
  71% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}

@keyframes lf-line-4 {
  0%,
  70% {
    opacity: 0;
    transform: scaleX(0);
  }
  98% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}

/* Running, on its 24 s clock: the run in progress 3 seconds, 7, 17 and 27 minutes in (0–30%, a
   frame every 7.5%); its page (30–100%), resting on Route and Along the run: its route drawn round
   the loop the way it was run (32–47%: the bare panel's cover swept off from the start, at the
   east, anticlockwise as the run went), then its charts left to right (52–64%: their cover pulled
   off to the right); then the page scrolls to the running form (72–76%), its three figures
   arriving on the card one after another (from 76%), and back to the start. */

@keyframes rn-frame-2 {
  0%,
  7.5% {
    opacity: 0;
  }
  8.75%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes rn-frame-3 {
  0%,
  15% {
    opacity: 0;
  }
  16.25%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes rn-frame-4 {
  0%,
  22.5% {
    opacity: 0;
  }
  23.75%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes rn-page {
  0%,
  30% {
    opacity: 0;
  }
  31.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes rn-scroll {
  0%,
  72% {
    transform: translateY(-12.036%);
    animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1);
  }
  76%,
  100% {
    transform: translateY(-55.4955%);
  }
}

@keyframes rn-route {
  0%,
  32% {
    --sweep: 0deg;
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }
  47%,
  100% {
    --sweep: 360deg;
  }
}

@keyframes rn-lines {
  0%,
  52% {
    clip-path: inset(0 0 0 0);
  }
  64%,
  100% {
    clip-path: inset(0 0 0 100%);
  }
}

@keyframes rn-distance {
  0%,
  7.5% {
    transform: none;
  }
  8.75%,
  15% {
    transform: translateY(-20%);
  }
  16.25%,
  22.5% {
    transform: translateY(-40%);
  }
  23.75%,
  30% {
    transform: translateY(-60%);
  }
  31.25%,
  98.5% {
    transform: translateY(-80%);
  }
  100% {
    transform: none;
  }
}

@keyframes rn-pace {
  0%,
  7.5% {
    transform: none;
  }
  8.75%,
  15% {
    transform: translateY(-20%);
  }
  16.25%,
  22.5% {
    transform: translateY(-40%);
  }
  23.75%,
  30% {
    transform: translateY(-60%);
  }
  31.25%,
  98.5% {
    transform: translateY(-80%);
  }
  100% {
    transform: none;
  }
}

@keyframes rn-form {
  0%,
  76% {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
  78%,
  98.5% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}

@keyframes rn-ls-1 {
  0%,
  29% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  30.5%,
  98.5% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  100% {
    --on: 1;
    grid-template-rows: 1fr;
  }
}

@keyframes rn-ls-2 {
  0%,
  29% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  30.5%,
  49% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  50.5%,
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}

@keyframes rn-ls-3 {
  0%,
  49% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  50.5%,
  69% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  70.5%,
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}

@keyframes rn-ls-4 {
  0%,
  69% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  70.5%,
  98.5% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}

@keyframes rn-line-1 {
  0% {
    opacity: 1;
    transform: scaleX(0);
  }
  29.5% {
    opacity: 1;
    transform: none;
  }
  31% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}

@keyframes rn-line-2 {
  0%,
  30% {
    opacity: 0;
    transform: scaleX(0);
  }
  49.5% {
    opacity: 1;
    transform: none;
  }
  51% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}

@keyframes rn-line-3 {
  0%,
  50% {
    opacity: 0;
    transform: scaleX(0);
  }
  69.5% {
    opacity: 1;
    transform: none;
  }
  71% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}

@keyframes rn-line-4 {
  0%,
  70% {
    opacity: 0;
    transform: scaleX(0);
  }
  98% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}

/* ---- The loops, chosen by step (generated by legal-site.ts from GOLF_LOOPS, ACTIVITY_LOOPS, RACKET_LOOP and HERO_LOOP) ---- */
.golf-range:has(#range-step-1:checked, #range-step-1-again:checked) {
  --seek: calc(var(--range) * 0);
  --still: calc(var(--range) * -0.15);
}
@keyframes rg-scrim-s1 {
  0%,
  20% {
    opacity: 0;
  }
  23.5%,
  59% {
    opacity: 1;
  }
  59.1%,
  100% {
    opacity: 0;
  }
}
@keyframes rg-sheet-s1 {
  0%,
  20% {
    transform: translateY(100%);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  23.5%,
  59% {
    transform: none;
  }
  59.1%,
  100% {
    transform: translateY(100%);
  }
}
@keyframes rg-frames-s1 {
  0%,
  24.416% {
    transform: none;
    animation-timing-function: steps(40, end);
  }
  32.736% {
    transform: translateY(-97.561%);
    animation-timing-function: steps(1, end);
  }
  32.944% {
    transform: translateX(-33.3333%);
    animation-timing-function: steps(39, end);
  }
  41.056% {
    transform: translate(-33.3333%, -95.122%);
    animation-timing-function: steps(1, end);
  }
  41.264% {
    transform: translateX(-66.6667%);
    animation-timing-function: steps(39, end);
  }
  49.376%,
  59% {
    transform: translate(-66.6667%, -95.122%);
  }
  59.1%,
  100% {
    transform: none;
  }
}
@keyframes rg-analysis-s1 {
  0%,
  55% {
    opacity: 0;
  }
  57.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rg-bag-s1 {
  0%,
  77.5% {
    opacity: 0;
  }
  80%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rg-card-1-s1 {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  2%,
  18.5% {
    opacity: 1;
    transform: none;
  }
  20%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes rg-card-2-s1 {
  0%,
  20% {
    opacity: 0;
    transform: translateY(10px);
  }
  22%,
  53.5% {
    opacity: 1;
    transform: none;
  }
  55%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes rg-card-3-s1 {
  0%,
  55% {
    opacity: 0;
    transform: translateY(10px);
  }
  57%,
  76% {
    opacity: 1;
    transform: none;
  }
  77.5%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes rg-land-s1 {
  0%,
  5.5% {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
  7.5%,
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes rg-dot-s1 {
  0%,
  6.5% {
    transform: scale(0);
  }
  8% {
    transform: scale(1.5);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--golf) 35%, transparent);
  }
  10%,
  100% {
    transform: none;
  }
}
@keyframes rg-tick-s1 {
  0%,
  6.5% {
    transform: none;
  }
  7.5%,
  100% {
    transform: translateY(-50%);
  }
}
@keyframes rg-back-s1 {
  0%,
  24.55% {
    transform: scaleX(0);
  }
  39.6%,
  100% {
    transform: none;
  }
}
@keyframes rg-down-s1 {
  0%,
  39.6% {
    transform: scaleX(0);
  }
  44.8%,
  100% {
    transform: none;
  }
}
@keyframes rg-ratio-s1 {
  0%,
  44.8% {
    opacity: 0;
    transform: scale(0.86);
  }
  46% {
    opacity: 1;
    transform: scale(1.1);
    text-shadow: 0 0 18px color-mix(in srgb, var(--golf) 70%, transparent);
  }
  48.5%,
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes rg-top-s1 {
  0%,
  39.6% {
    opacity: 0;
  }
  40.6%,
  100% {
    opacity: 1;
  }
}
@keyframes rg-impact-s1 {
  0%,
  44.8% {
    opacity: 0;
  }
  45.8%,
  100% {
    opacity: 1;
  }
}
@keyframes rg-step-s1 {
  0%,
  58% {
    opacity: 0.35;
  }
  60%,
  100% {
    opacity: 1;
  }
}
@keyframes rg-watch-2-s1 {
  0%,
  20% {
    opacity: 0;
  }
  22%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rg-watch-3-s1 {
  0%,
  55% {
    opacity: 0;
  }
  57%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rg-ls-1-s1 {
  0%,
  19% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  20.5%,
  98.5% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  100% {
    --on: 1;
    grid-template-rows: 1fr;
  }
}
@keyframes rg-line-1-s1 {
  0% {
    transform: scaleX(0);
  }
  19.5% {
    opacity: 1;
    transform: none;
  }
  21%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes rg-ls-2-s1 {
  0%,
  19% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  20.5%,
  53.5% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  55%,
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes rg-line-2-s1 {
  0%,
  20% {
    transform: scaleX(0);
  }
  54.5% {
    opacity: 1;
    transform: none;
  }
  56%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes rg-ls-3-s1 {
  0%,
  53.5% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  55%,
  76% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  77.5%,
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes rg-line-3-s1 {
  0%,
  55% {
    transform: scaleX(0);
  }
  77% {
    opacity: 1;
    transform: none;
  }
  78.5%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes rg-ls-4-s1 {
  0%,
  76% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  77.5%,
  98.5% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes rg-line-4-s1 {
  0%,
  77.5% {
    transform: scaleX(0);
  }
  99% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}
.golf-range:has(#range-step-2:checked, #range-step-2-again:checked) {
  --seek: calc(var(--range) * -0.2);
  --still: calc(var(--range) * -0.52);
}
@keyframes rg-scrim-s2 {
  0%,
  20% {
    opacity: 0;
  }
  23.5%,
  59% {
    opacity: 1;
  }
  59.1%,
  100% {
    opacity: 0;
  }
}
@keyframes rg-sheet-s2 {
  0%,
  20% {
    transform: translateY(100%);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  23.5%,
  59% {
    transform: none;
  }
  59.1%,
  100% {
    transform: translateY(100%);
  }
}
@keyframes rg-frames-s2 {
  0%,
  24.416% {
    transform: none;
    animation-timing-function: steps(40, end);
  }
  32.736% {
    transform: translateY(-97.561%);
    animation-timing-function: steps(1, end);
  }
  32.944% {
    transform: translateX(-33.3333%);
    animation-timing-function: steps(39, end);
  }
  41.056% {
    transform: translate(-33.3333%, -95.122%);
    animation-timing-function: steps(1, end);
  }
  41.264% {
    transform: translateX(-66.6667%);
    animation-timing-function: steps(39, end);
  }
  49.376%,
  59% {
    transform: translate(-66.6667%, -95.122%);
  }
  59.1%,
  100% {
    transform: none;
  }
}
@keyframes rg-analysis-s2 {
  0%,
  55% {
    opacity: 0;
  }
  57.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rg-bag-s2 {
  0%,
  77.5% {
    opacity: 0;
  }
  80%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rg-card-1-s2 {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  2%,
  18.5% {
    opacity: 1;
    transform: none;
  }
  20%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes rg-card-2-s2 {
  0%,
  20% {
    opacity: 0;
    transform: translateY(10px);
  }
  22%,
  53.5% {
    opacity: 1;
    transform: none;
  }
  55%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes rg-card-3-s2 {
  0%,
  55% {
    opacity: 0;
    transform: translateY(10px);
  }
  57%,
  76% {
    opacity: 1;
    transform: none;
  }
  77.5%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes rg-land-s2 {
  0%,
  5.5% {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
  7.5%,
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes rg-dot-s2 {
  0%,
  6.5% {
    transform: scale(0);
  }
  8% {
    transform: scale(1.5);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--golf) 35%, transparent);
  }
  10%,
  100% {
    transform: none;
  }
}
@keyframes rg-tick-s2 {
  0%,
  6.5% {
    transform: none;
  }
  7.5%,
  100% {
    transform: translateY(-50%);
  }
}
@keyframes rg-back-s2 {
  0%,
  24.55% {
    transform: scaleX(0);
  }
  39.6%,
  100% {
    transform: none;
  }
}
@keyframes rg-down-s2 {
  0%,
  39.6% {
    transform: scaleX(0);
  }
  44.8%,
  100% {
    transform: none;
  }
}
@keyframes rg-ratio-s2 {
  0%,
  44.8% {
    opacity: 0;
    transform: scale(0.86);
  }
  46% {
    opacity: 1;
    transform: scale(1.1);
    text-shadow: 0 0 18px color-mix(in srgb, var(--golf) 70%, transparent);
  }
  48.5%,
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes rg-top-s2 {
  0%,
  39.6% {
    opacity: 0;
  }
  40.6%,
  100% {
    opacity: 1;
  }
}
@keyframes rg-impact-s2 {
  0%,
  44.8% {
    opacity: 0;
  }
  45.8%,
  100% {
    opacity: 1;
  }
}
@keyframes rg-step-s2 {
  0%,
  58% {
    opacity: 0.35;
  }
  60%,
  100% {
    opacity: 1;
  }
}
@keyframes rg-watch-2-s2 {
  0%,
  20% {
    opacity: 0;
  }
  22%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rg-watch-3-s2 {
  0%,
  55% {
    opacity: 0;
  }
  57%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rg-ls-1-s2 {
  0%,
  19% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  20.5%,
  98.5% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  100% {
    --on: 1;
    grid-template-rows: 1fr;
  }
}
@keyframes rg-line-1-s2 {
  0% {
    transform: scaleX(0);
  }
  19.5% {
    opacity: 1;
    transform: none;
  }
  21%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes rg-ls-2-s2 {
  0%,
  19% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  20.5%,
  53.5% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  55%,
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes rg-line-2-s2 {
  0%,
  20% {
    transform: scaleX(0);
  }
  54.5% {
    opacity: 1;
    transform: none;
  }
  56%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes rg-ls-3-s2 {
  0%,
  53.5% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  55%,
  76% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  77.5%,
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes rg-line-3-s2 {
  0%,
  55% {
    transform: scaleX(0);
  }
  77% {
    opacity: 1;
    transform: none;
  }
  78.5%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes rg-ls-4-s2 {
  0%,
  76% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  77.5%,
  98.5% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes rg-line-4-s2 {
  0%,
  77.5% {
    transform: scaleX(0);
  }
  99% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}
.golf-range:has(#range-step-3:checked, #range-step-3-again:checked) {
  --seek: calc(var(--range) * -0.55);
  --still: calc(var(--range) * -0.72);
}
@keyframes rg-scrim-s3 {
  0%,
  20% {
    opacity: 0;
  }
  23.5%,
  59% {
    opacity: 1;
  }
  59.1%,
  100% {
    opacity: 0;
  }
}
@keyframes rg-sheet-s3 {
  0%,
  20% {
    transform: translateY(100%);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  23.5%,
  59% {
    transform: none;
  }
  59.1%,
  100% {
    transform: translateY(100%);
  }
}
@keyframes rg-frames-s3 {
  0%,
  24.416% {
    transform: none;
    animation-timing-function: steps(40, end);
  }
  32.736% {
    transform: translateY(-97.561%);
    animation-timing-function: steps(1, end);
  }
  32.944% {
    transform: translateX(-33.3333%);
    animation-timing-function: steps(39, end);
  }
  41.056% {
    transform: translate(-33.3333%, -95.122%);
    animation-timing-function: steps(1, end);
  }
  41.264% {
    transform: translateX(-66.6667%);
    animation-timing-function: steps(39, end);
  }
  49.376%,
  59% {
    transform: translate(-66.6667%, -95.122%);
  }
  59.1%,
  100% {
    transform: none;
  }
}
@keyframes rg-analysis-s3 {
  0%,
  55% {
    opacity: 0;
  }
  57.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rg-bag-s3 {
  0%,
  77.5% {
    opacity: 0;
  }
  80%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rg-card-1-s3 {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  2%,
  18.5% {
    opacity: 1;
    transform: none;
  }
  20%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes rg-card-2-s3 {
  0%,
  20% {
    opacity: 0;
    transform: translateY(10px);
  }
  22%,
  53.5% {
    opacity: 1;
    transform: none;
  }
  55%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes rg-card-3-s3 {
  0%,
  55% {
    opacity: 0;
    transform: translateY(10px);
  }
  57%,
  76% {
    opacity: 1;
    transform: none;
  }
  77.5%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes rg-land-s3 {
  0%,
  5.5% {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
  7.5%,
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes rg-dot-s3 {
  0%,
  6.5% {
    transform: scale(0);
  }
  8% {
    transform: scale(1.5);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--golf) 35%, transparent);
  }
  10%,
  100% {
    transform: none;
  }
}
@keyframes rg-tick-s3 {
  0%,
  6.5% {
    transform: none;
  }
  7.5%,
  100% {
    transform: translateY(-50%);
  }
}
@keyframes rg-back-s3 {
  0%,
  24.55% {
    transform: scaleX(0);
  }
  39.6%,
  100% {
    transform: none;
  }
}
@keyframes rg-down-s3 {
  0%,
  39.6% {
    transform: scaleX(0);
  }
  44.8%,
  100% {
    transform: none;
  }
}
@keyframes rg-ratio-s3 {
  0%,
  44.8% {
    opacity: 0;
    transform: scale(0.86);
  }
  46% {
    opacity: 1;
    transform: scale(1.1);
    text-shadow: 0 0 18px color-mix(in srgb, var(--golf) 70%, transparent);
  }
  48.5%,
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes rg-top-s3 {
  0%,
  39.6% {
    opacity: 0;
  }
  40.6%,
  100% {
    opacity: 1;
  }
}
@keyframes rg-impact-s3 {
  0%,
  44.8% {
    opacity: 0;
  }
  45.8%,
  100% {
    opacity: 1;
  }
}
@keyframes rg-step-s3 {
  0%,
  58% {
    opacity: 0.35;
  }
  60%,
  100% {
    opacity: 1;
  }
}
@keyframes rg-watch-2-s3 {
  0%,
  20% {
    opacity: 0;
  }
  22%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rg-watch-3-s3 {
  0%,
  55% {
    opacity: 0;
  }
  57%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rg-ls-1-s3 {
  0%,
  19% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  20.5%,
  98.5% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  100% {
    --on: 1;
    grid-template-rows: 1fr;
  }
}
@keyframes rg-line-1-s3 {
  0% {
    transform: scaleX(0);
  }
  19.5% {
    opacity: 1;
    transform: none;
  }
  21%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes rg-ls-2-s3 {
  0%,
  19% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  20.5%,
  53.5% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  55%,
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes rg-line-2-s3 {
  0%,
  20% {
    transform: scaleX(0);
  }
  54.5% {
    opacity: 1;
    transform: none;
  }
  56%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes rg-ls-3-s3 {
  0%,
  53.5% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  55%,
  76% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  77.5%,
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes rg-line-3-s3 {
  0%,
  55% {
    transform: scaleX(0);
  }
  77% {
    opacity: 1;
    transform: none;
  }
  78.5%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes rg-ls-4-s3 {
  0%,
  76% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  77.5%,
  98.5% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes rg-line-4-s3 {
  0%,
  77.5% {
    transform: scaleX(0);
  }
  99% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}
.golf-range:has(#range-step-4:checked, #range-step-4-again:checked) {
  --seek: calc(var(--range) * -0.775);
  --still: calc(var(--range) * -0.92);
}
@keyframes rg-scrim-s4 {
  0%,
  20% {
    opacity: 0;
  }
  23.5%,
  59% {
    opacity: 1;
  }
  59.1%,
  100% {
    opacity: 0;
  }
}
@keyframes rg-sheet-s4 {
  0%,
  20% {
    transform: translateY(100%);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  23.5%,
  59% {
    transform: none;
  }
  59.1%,
  100% {
    transform: translateY(100%);
  }
}
@keyframes rg-frames-s4 {
  0%,
  24.416% {
    transform: none;
    animation-timing-function: steps(40, end);
  }
  32.736% {
    transform: translateY(-97.561%);
    animation-timing-function: steps(1, end);
  }
  32.944% {
    transform: translateX(-33.3333%);
    animation-timing-function: steps(39, end);
  }
  41.056% {
    transform: translate(-33.3333%, -95.122%);
    animation-timing-function: steps(1, end);
  }
  41.264% {
    transform: translateX(-66.6667%);
    animation-timing-function: steps(39, end);
  }
  49.376%,
  59% {
    transform: translate(-66.6667%, -95.122%);
  }
  59.1%,
  100% {
    transform: none;
  }
}
@keyframes rg-analysis-s4 {
  0%,
  55% {
    opacity: 0;
  }
  57.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rg-bag-s4 {
  0%,
  77.5% {
    opacity: 0;
  }
  80%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rg-card-1-s4 {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  2%,
  18.5% {
    opacity: 1;
    transform: none;
  }
  20%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes rg-card-2-s4 {
  0%,
  20% {
    opacity: 0;
    transform: translateY(10px);
  }
  22%,
  53.5% {
    opacity: 1;
    transform: none;
  }
  55%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes rg-card-3-s4 {
  0%,
  55% {
    opacity: 0;
    transform: translateY(10px);
  }
  57%,
  76% {
    opacity: 1;
    transform: none;
  }
  77.5%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes rg-land-s4 {
  0%,
  5.5% {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
  7.5%,
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes rg-dot-s4 {
  0%,
  6.5% {
    transform: scale(0);
  }
  8% {
    transform: scale(1.5);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--golf) 35%, transparent);
  }
  10%,
  100% {
    transform: none;
  }
}
@keyframes rg-tick-s4 {
  0%,
  6.5% {
    transform: none;
  }
  7.5%,
  100% {
    transform: translateY(-50%);
  }
}
@keyframes rg-back-s4 {
  0%,
  24.55% {
    transform: scaleX(0);
  }
  39.6%,
  100% {
    transform: none;
  }
}
@keyframes rg-down-s4 {
  0%,
  39.6% {
    transform: scaleX(0);
  }
  44.8%,
  100% {
    transform: none;
  }
}
@keyframes rg-ratio-s4 {
  0%,
  44.8% {
    opacity: 0;
    transform: scale(0.86);
  }
  46% {
    opacity: 1;
    transform: scale(1.1);
    text-shadow: 0 0 18px color-mix(in srgb, var(--golf) 70%, transparent);
  }
  48.5%,
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes rg-top-s4 {
  0%,
  39.6% {
    opacity: 0;
  }
  40.6%,
  100% {
    opacity: 1;
  }
}
@keyframes rg-impact-s4 {
  0%,
  44.8% {
    opacity: 0;
  }
  45.8%,
  100% {
    opacity: 1;
  }
}
@keyframes rg-step-s4 {
  0%,
  58% {
    opacity: 0.35;
  }
  60%,
  100% {
    opacity: 1;
  }
}
@keyframes rg-watch-2-s4 {
  0%,
  20% {
    opacity: 0;
  }
  22%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rg-watch-3-s4 {
  0%,
  55% {
    opacity: 0;
  }
  57%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rg-ls-1-s4 {
  0%,
  19% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  20.5%,
  98.5% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  100% {
    --on: 1;
    grid-template-rows: 1fr;
  }
}
@keyframes rg-line-1-s4 {
  0% {
    transform: scaleX(0);
  }
  19.5% {
    opacity: 1;
    transform: none;
  }
  21%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes rg-ls-2-s4 {
  0%,
  19% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  20.5%,
  53.5% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  55%,
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes rg-line-2-s4 {
  0%,
  20% {
    transform: scaleX(0);
  }
  54.5% {
    opacity: 1;
    transform: none;
  }
  56%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes rg-ls-3-s4 {
  0%,
  53.5% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  55%,
  76% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  77.5%,
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes rg-line-3-s4 {
  0%,
  55% {
    transform: scaleX(0);
  }
  77% {
    opacity: 1;
    transform: none;
  }
  78.5%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes rg-ls-4-s4 {
  0%,
  76% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  77.5%,
  98.5% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes rg-line-4-s4 {
  0%,
  77.5% {
    transform: scaleX(0);
  }
  99% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}
.golf-course:has(#round-step-1:checked, #round-step-1-again:checked) {
  --seek: calc(var(--round) * 0);
  --still: calc(var(--round) * -0.05);
}
@keyframes rd-frame-2-s1 {
  0%,
  10% {
    opacity: 0;
  }
  11.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rd-frame-3-s1 {
  0%,
  30% {
    opacity: 0;
  }
  31.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rd-frame-4-s1 {
  0%,
  50% {
    opacity: 0;
  }
  51.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rd-frame-5-s1 {
  0%,
  62.5% {
    opacity: 0;
  }
  64%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rd-frame-6-s1 {
  0%,
  71.25% {
    opacity: 0;
  }
  72.75%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rd-frame-7-s1 {
  0%,
  80% {
    opacity: 0;
  }
  81.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rd-frame-8-s1 {
  0%,
  88.75% {
    opacity: 0;
  }
  90.25%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rd-grow-s1 {
  0%,
  20.5% {
    --grow: 0;
  }
  22%,
  47.5% {
    --grow: 1;
  }
  49%,
  100% {
    --grow: 0;
  }
}
@keyframes rd-map-2-s1 {
  0%,
  30% {
    opacity: 0;
  }
  31.5%,
  98.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rd-map-3-s1 {
  0%,
  40% {
    opacity: 0;
  }
  41.5%,
  98.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rd-row-2-s1 {
  0%,
  30% {
    opacity: 0;
    transform: translateY(4px);
  }
  31.5%,
  98.5% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: translateY(4px);
  }
}
@keyframes rd-dist-s1 {
  0%,
  30% {
    transform: none;
  }
  31.5%,
  98.5% {
    transform: translateY(-50%);
  }
  100% {
    transform: none;
  }
}
@keyframes rd-shots-s1 {
  0%,
  10% {
    transform: none;
  }
  11.5%,
  30% {
    transform: translateY(-14.2857%);
  }
  31.5%,
  62.5% {
    transform: translateY(-28.5714%);
  }
  64%,
  71.25% {
    transform: translateY(-42.8571%);
  }
  72.75%,
  80% {
    transform: translateY(-57.1429%);
  }
  81.5%,
  88.75% {
    transform: translateY(-71.4286%);
  }
  90.25%,
  98.5% {
    transform: translateY(-85.7143%);
  }
  100% {
    transform: none;
  }
}
@keyframes rd-gps-s1 {
  0%,
  20% {
    transform: none;
  }
  21.5%,
  30% {
    transform: translateY(-14.2857%);
  }
  31.5%,
  62.5% {
    transform: translateY(-28.5714%);
  }
  64%,
  71.25% {
    transform: translateY(-42.8571%);
  }
  72.75%,
  80% {
    transform: translateY(-57.1429%);
  }
  81.5%,
  88.75% {
    transform: translateY(-71.4286%);
  }
  90.25%,
  98.5% {
    transform: translateY(-85.7143%);
  }
  100% {
    transform: none;
  }
}
@keyframes rd-lines-s1 {
  0%,
  10% {
    transform: none;
    opacity: 1;
  }
  10.75% {
    transform: none;
    opacity: 0;
  }
  10.76% {
    transform: translateY(-10%);
    opacity: 0;
  }
  11.5%,
  20% {
    transform: translateY(-10%);
    opacity: 1;
  }
  20.75% {
    transform: translateY(-10%);
    opacity: 0;
  }
  20.76% {
    transform: translateY(-20%);
    opacity: 0;
  }
  21.5%,
  30% {
    transform: translateY(-20%);
    opacity: 1;
  }
  30.75% {
    transform: translateY(-20%);
    opacity: 0;
  }
  30.76% {
    transform: translateY(-30%);
    opacity: 0;
  }
  31.5%,
  40% {
    transform: translateY(-30%);
    opacity: 1;
  }
  40.75% {
    transform: translateY(-30%);
    opacity: 0;
  }
  40.76% {
    transform: translateY(-40%);
    opacity: 0;
  }
  41.5%,
  50% {
    transform: translateY(-40%);
    opacity: 1;
  }
  50.75% {
    transform: translateY(-40%);
    opacity: 0;
  }
  50.76% {
    transform: translateY(-50%);
    opacity: 0;
  }
  51.5%,
  62.5% {
    transform: translateY(-50%);
    opacity: 1;
  }
  63.25% {
    transform: translateY(-50%);
    opacity: 0;
  }
  63.26% {
    transform: translateY(-60%);
    opacity: 0;
  }
  64%,
  71.25% {
    transform: translateY(-60%);
    opacity: 1;
  }
  72% {
    transform: translateY(-60%);
    opacity: 0;
  }
  72.01% {
    transform: translateY(-70%);
    opacity: 0;
  }
  72.75%,
  80% {
    transform: translateY(-70%);
    opacity: 1;
  }
  80.75% {
    transform: translateY(-70%);
    opacity: 0;
  }
  80.76% {
    transform: translateY(-80%);
    opacity: 0;
  }
  81.5%,
  88.75% {
    transform: translateY(-80%);
    opacity: 1;
  }
  89.5% {
    transform: translateY(-80%);
    opacity: 0;
  }
  89.51% {
    transform: translateY(-90%);
    opacity: 0;
  }
  90.25%,
  98.5% {
    transform: translateY(-90%);
    opacity: 1;
  }
  99.25% {
    transform: translateY(-90%);
    opacity: 0;
  }
  99.26% {
    transform: none;
    opacity: 0;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
@keyframes rd-turn-s1 {
  0%,
  62.5% {
    transform: none;
  }
  64%,
  98.5% {
    transform: translateY(-50%);
  }
  100% {
    transform: none;
  }
}
@keyframes rd-ls-1-s1 {
  0%,
  9% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  10.5%,
  98.5% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  100% {
    --on: 1;
    grid-template-rows: 1fr;
  }
}
@keyframes rd-line-1-s1 {
  0% {
    opacity: 1;
    transform: scaleX(0);
  }
  9.5% {
    opacity: 1;
    transform: none;
  }
  11% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}
@keyframes rd-ls-2-s1 {
  0%,
  9% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  10.5%,
  19% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  20.5%,
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes rd-line-2-s1 {
  0%,
  10% {
    opacity: 0;
    transform: scaleX(0);
  }
  19.5% {
    opacity: 1;
    transform: none;
  }
  21% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}
@keyframes rd-ls-3-s1 {
  0%,
  19% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  20.5%,
  49% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  50.5%,
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes rd-line-3-s1 {
  0%,
  20% {
    opacity: 0;
    transform: scaleX(0);
  }
  49.5% {
    opacity: 1;
    transform: none;
  }
  51% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}
@keyframes rd-ls-4-s1 {
  0%,
  49% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  50.5%,
  61.5% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  63%,
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes rd-line-4-s1 {
  0%,
  50% {
    opacity: 0;
    transform: scaleX(0);
  }
  62% {
    opacity: 1;
    transform: none;
  }
  63.5% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}
@keyframes rd-ls-5-s1 {
  0%,
  61.5% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  63%,
  98.5% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes rd-line-5-s1 {
  0%,
  62.5% {
    opacity: 0;
    transform: scaleX(0);
  }
  98% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}
.golf-course:has(#round-step-2:checked, #round-step-2-again:checked) {
  --seek: calc(var(--round) * -0.1);
  --still: calc(var(--round) * -0.17);
}
@keyframes rd-frame-2-s2 {
  0%,
  10% {
    opacity: 0;
  }
  11.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rd-frame-3-s2 {
  0%,
  30% {
    opacity: 0;
  }
  31.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rd-frame-4-s2 {
  0%,
  50% {
    opacity: 0;
  }
  51.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rd-frame-5-s2 {
  0%,
  62.5% {
    opacity: 0;
  }
  64%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rd-frame-6-s2 {
  0%,
  71.25% {
    opacity: 0;
  }
  72.75%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rd-frame-7-s2 {
  0%,
  80% {
    opacity: 0;
  }
  81.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rd-frame-8-s2 {
  0%,
  88.75% {
    opacity: 0;
  }
  90.25%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rd-grow-s2 {
  0%,
  20.5% {
    --grow: 0;
  }
  22%,
  47.5% {
    --grow: 1;
  }
  49%,
  100% {
    --grow: 0;
  }
}
@keyframes rd-map-2-s2 {
  0%,
  30% {
    opacity: 0;
  }
  31.5%,
  98.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rd-map-3-s2 {
  0%,
  40% {
    opacity: 0;
  }
  41.5%,
  98.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rd-row-2-s2 {
  0%,
  30% {
    opacity: 0;
    transform: translateY(4px);
  }
  31.5%,
  98.5% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: translateY(4px);
  }
}
@keyframes rd-dist-s2 {
  0%,
  30% {
    transform: none;
  }
  31.5%,
  98.5% {
    transform: translateY(-50%);
  }
  100% {
    transform: none;
  }
}
@keyframes rd-shots-s2 {
  0%,
  10% {
    transform: none;
  }
  11.5%,
  30% {
    transform: translateY(-14.2857%);
  }
  31.5%,
  62.5% {
    transform: translateY(-28.5714%);
  }
  64%,
  71.25% {
    transform: translateY(-42.8571%);
  }
  72.75%,
  80% {
    transform: translateY(-57.1429%);
  }
  81.5%,
  88.75% {
    transform: translateY(-71.4286%);
  }
  90.25%,
  98.5% {
    transform: translateY(-85.7143%);
  }
  100% {
    transform: none;
  }
}
@keyframes rd-gps-s2 {
  0%,
  20% {
    transform: none;
  }
  21.5%,
  30% {
    transform: translateY(-14.2857%);
  }
  31.5%,
  62.5% {
    transform: translateY(-28.5714%);
  }
  64%,
  71.25% {
    transform: translateY(-42.8571%);
  }
  72.75%,
  80% {
    transform: translateY(-57.1429%);
  }
  81.5%,
  88.75% {
    transform: translateY(-71.4286%);
  }
  90.25%,
  98.5% {
    transform: translateY(-85.7143%);
  }
  100% {
    transform: none;
  }
}
@keyframes rd-lines-s2 {
  0%,
  10% {
    transform: none;
    opacity: 1;
  }
  10.75% {
    transform: none;
    opacity: 0;
  }
  10.76% {
    transform: translateY(-10%);
    opacity: 0;
  }
  11.5%,
  20% {
    transform: translateY(-10%);
    opacity: 1;
  }
  20.75% {
    transform: translateY(-10%);
    opacity: 0;
  }
  20.76% {
    transform: translateY(-20%);
    opacity: 0;
  }
  21.5%,
  30% {
    transform: translateY(-20%);
    opacity: 1;
  }
  30.75% {
    transform: translateY(-20%);
    opacity: 0;
  }
  30.76% {
    transform: translateY(-30%);
    opacity: 0;
  }
  31.5%,
  40% {
    transform: translateY(-30%);
    opacity: 1;
  }
  40.75% {
    transform: translateY(-30%);
    opacity: 0;
  }
  40.76% {
    transform: translateY(-40%);
    opacity: 0;
  }
  41.5%,
  50% {
    transform: translateY(-40%);
    opacity: 1;
  }
  50.75% {
    transform: translateY(-40%);
    opacity: 0;
  }
  50.76% {
    transform: translateY(-50%);
    opacity: 0;
  }
  51.5%,
  62.5% {
    transform: translateY(-50%);
    opacity: 1;
  }
  63.25% {
    transform: translateY(-50%);
    opacity: 0;
  }
  63.26% {
    transform: translateY(-60%);
    opacity: 0;
  }
  64%,
  71.25% {
    transform: translateY(-60%);
    opacity: 1;
  }
  72% {
    transform: translateY(-60%);
    opacity: 0;
  }
  72.01% {
    transform: translateY(-70%);
    opacity: 0;
  }
  72.75%,
  80% {
    transform: translateY(-70%);
    opacity: 1;
  }
  80.75% {
    transform: translateY(-70%);
    opacity: 0;
  }
  80.76% {
    transform: translateY(-80%);
    opacity: 0;
  }
  81.5%,
  88.75% {
    transform: translateY(-80%);
    opacity: 1;
  }
  89.5% {
    transform: translateY(-80%);
    opacity: 0;
  }
  89.51% {
    transform: translateY(-90%);
    opacity: 0;
  }
  90.25%,
  98.5% {
    transform: translateY(-90%);
    opacity: 1;
  }
  99.25% {
    transform: translateY(-90%);
    opacity: 0;
  }
  99.26% {
    transform: none;
    opacity: 0;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
@keyframes rd-turn-s2 {
  0%,
  62.5% {
    transform: none;
  }
  64%,
  98.5% {
    transform: translateY(-50%);
  }
  100% {
    transform: none;
  }
}
@keyframes rd-ls-1-s2 {
  0%,
  9% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  10.5%,
  98.5% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  100% {
    --on: 1;
    grid-template-rows: 1fr;
  }
}
@keyframes rd-line-1-s2 {
  0% {
    opacity: 1;
    transform: scaleX(0);
  }
  9.5% {
    opacity: 1;
    transform: none;
  }
  11% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}
@keyframes rd-ls-2-s2 {
  0%,
  9% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  10.5%,
  19% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  20.5%,
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes rd-line-2-s2 {
  0%,
  10% {
    opacity: 0;
    transform: scaleX(0);
  }
  19.5% {
    opacity: 1;
    transform: none;
  }
  21% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}
@keyframes rd-ls-3-s2 {
  0%,
  19% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  20.5%,
  49% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  50.5%,
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes rd-line-3-s2 {
  0%,
  20% {
    opacity: 0;
    transform: scaleX(0);
  }
  49.5% {
    opacity: 1;
    transform: none;
  }
  51% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}
@keyframes rd-ls-4-s2 {
  0%,
  49% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  50.5%,
  61.5% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  63%,
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes rd-line-4-s2 {
  0%,
  50% {
    opacity: 0;
    transform: scaleX(0);
  }
  62% {
    opacity: 1;
    transform: none;
  }
  63.5% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}
@keyframes rd-ls-5-s2 {
  0%,
  61.5% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  63%,
  98.5% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes rd-line-5-s2 {
  0%,
  62.5% {
    opacity: 0;
    transform: scaleX(0);
  }
  98% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}
.golf-course:has(#round-step-3:checked, #round-step-3-again:checked) {
  --seek: calc(var(--round) * -0.2);
  --still: calc(var(--round) * -0.47);
}
@keyframes rd-frame-2-s3 {
  0%,
  10% {
    opacity: 0;
  }
  11.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rd-frame-3-s3 {
  0%,
  30% {
    opacity: 0;
  }
  31.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rd-frame-4-s3 {
  0%,
  50% {
    opacity: 0;
  }
  51.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rd-frame-5-s3 {
  0%,
  62.5% {
    opacity: 0;
  }
  64%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rd-frame-6-s3 {
  0%,
  71.25% {
    opacity: 0;
  }
  72.75%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rd-frame-7-s3 {
  0%,
  80% {
    opacity: 0;
  }
  81.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rd-frame-8-s3 {
  0%,
  88.75% {
    opacity: 0;
  }
  90.25%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rd-grow-s3 {
  0%,
  20.5% {
    --grow: 0;
  }
  22%,
  47.5% {
    --grow: 1;
  }
  49%,
  100% {
    --grow: 0;
  }
}
@keyframes rd-map-2-s3 {
  0%,
  30% {
    opacity: 0;
  }
  31.5%,
  98.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rd-map-3-s3 {
  0%,
  40% {
    opacity: 0;
  }
  41.5%,
  98.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rd-row-2-s3 {
  0%,
  30% {
    opacity: 0;
    transform: translateY(4px);
  }
  31.5%,
  98.5% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: translateY(4px);
  }
}
@keyframes rd-dist-s3 {
  0%,
  30% {
    transform: none;
  }
  31.5%,
  98.5% {
    transform: translateY(-50%);
  }
  100% {
    transform: none;
  }
}
@keyframes rd-shots-s3 {
  0%,
  10% {
    transform: none;
  }
  11.5%,
  30% {
    transform: translateY(-14.2857%);
  }
  31.5%,
  62.5% {
    transform: translateY(-28.5714%);
  }
  64%,
  71.25% {
    transform: translateY(-42.8571%);
  }
  72.75%,
  80% {
    transform: translateY(-57.1429%);
  }
  81.5%,
  88.75% {
    transform: translateY(-71.4286%);
  }
  90.25%,
  98.5% {
    transform: translateY(-85.7143%);
  }
  100% {
    transform: none;
  }
}
@keyframes rd-gps-s3 {
  0%,
  20% {
    transform: none;
  }
  21.5%,
  30% {
    transform: translateY(-14.2857%);
  }
  31.5%,
  62.5% {
    transform: translateY(-28.5714%);
  }
  64%,
  71.25% {
    transform: translateY(-42.8571%);
  }
  72.75%,
  80% {
    transform: translateY(-57.1429%);
  }
  81.5%,
  88.75% {
    transform: translateY(-71.4286%);
  }
  90.25%,
  98.5% {
    transform: translateY(-85.7143%);
  }
  100% {
    transform: none;
  }
}
@keyframes rd-lines-s3 {
  0%,
  10% {
    transform: none;
    opacity: 1;
  }
  10.75% {
    transform: none;
    opacity: 0;
  }
  10.76% {
    transform: translateY(-10%);
    opacity: 0;
  }
  11.5%,
  20% {
    transform: translateY(-10%);
    opacity: 1;
  }
  20.75% {
    transform: translateY(-10%);
    opacity: 0;
  }
  20.76% {
    transform: translateY(-20%);
    opacity: 0;
  }
  21.5%,
  30% {
    transform: translateY(-20%);
    opacity: 1;
  }
  30.75% {
    transform: translateY(-20%);
    opacity: 0;
  }
  30.76% {
    transform: translateY(-30%);
    opacity: 0;
  }
  31.5%,
  40% {
    transform: translateY(-30%);
    opacity: 1;
  }
  40.75% {
    transform: translateY(-30%);
    opacity: 0;
  }
  40.76% {
    transform: translateY(-40%);
    opacity: 0;
  }
  41.5%,
  50% {
    transform: translateY(-40%);
    opacity: 1;
  }
  50.75% {
    transform: translateY(-40%);
    opacity: 0;
  }
  50.76% {
    transform: translateY(-50%);
    opacity: 0;
  }
  51.5%,
  62.5% {
    transform: translateY(-50%);
    opacity: 1;
  }
  63.25% {
    transform: translateY(-50%);
    opacity: 0;
  }
  63.26% {
    transform: translateY(-60%);
    opacity: 0;
  }
  64%,
  71.25% {
    transform: translateY(-60%);
    opacity: 1;
  }
  72% {
    transform: translateY(-60%);
    opacity: 0;
  }
  72.01% {
    transform: translateY(-70%);
    opacity: 0;
  }
  72.75%,
  80% {
    transform: translateY(-70%);
    opacity: 1;
  }
  80.75% {
    transform: translateY(-70%);
    opacity: 0;
  }
  80.76% {
    transform: translateY(-80%);
    opacity: 0;
  }
  81.5%,
  88.75% {
    transform: translateY(-80%);
    opacity: 1;
  }
  89.5% {
    transform: translateY(-80%);
    opacity: 0;
  }
  89.51% {
    transform: translateY(-90%);
    opacity: 0;
  }
  90.25%,
  98.5% {
    transform: translateY(-90%);
    opacity: 1;
  }
  99.25% {
    transform: translateY(-90%);
    opacity: 0;
  }
  99.26% {
    transform: none;
    opacity: 0;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
@keyframes rd-turn-s3 {
  0%,
  62.5% {
    transform: none;
  }
  64%,
  98.5% {
    transform: translateY(-50%);
  }
  100% {
    transform: none;
  }
}
@keyframes rd-ls-1-s3 {
  0%,
  9% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  10.5%,
  98.5% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  100% {
    --on: 1;
    grid-template-rows: 1fr;
  }
}
@keyframes rd-line-1-s3 {
  0% {
    opacity: 1;
    transform: scaleX(0);
  }
  9.5% {
    opacity: 1;
    transform: none;
  }
  11% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}
@keyframes rd-ls-2-s3 {
  0%,
  9% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  10.5%,
  19% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  20.5%,
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes rd-line-2-s3 {
  0%,
  10% {
    opacity: 0;
    transform: scaleX(0);
  }
  19.5% {
    opacity: 1;
    transform: none;
  }
  21% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}
@keyframes rd-ls-3-s3 {
  0%,
  19% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  20.5%,
  49% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  50.5%,
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes rd-line-3-s3 {
  0%,
  20% {
    opacity: 0;
    transform: scaleX(0);
  }
  49.5% {
    opacity: 1;
    transform: none;
  }
  51% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}
@keyframes rd-ls-4-s3 {
  0%,
  49% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  50.5%,
  61.5% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  63%,
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes rd-line-4-s3 {
  0%,
  50% {
    opacity: 0;
    transform: scaleX(0);
  }
  62% {
    opacity: 1;
    transform: none;
  }
  63.5% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}
@keyframes rd-ls-5-s3 {
  0%,
  61.5% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  63%,
  98.5% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes rd-line-5-s3 {
  0%,
  62.5% {
    opacity: 0;
    transform: scaleX(0);
  }
  98% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}
.golf-course:has(#round-step-4:checked, #round-step-4-again:checked) {
  --seek: calc(var(--round) * -0.5);
  --still: calc(var(--round) * -0.6);
}
@keyframes rd-frame-2-s4 {
  0%,
  10% {
    opacity: 0;
  }
  11.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rd-frame-3-s4 {
  0%,
  30% {
    opacity: 0;
  }
  31.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rd-frame-4-s4 {
  0%,
  50% {
    opacity: 0;
  }
  51.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rd-frame-5-s4 {
  0%,
  62.5% {
    opacity: 0;
  }
  64%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rd-frame-6-s4 {
  0%,
  71.25% {
    opacity: 0;
  }
  72.75%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rd-frame-7-s4 {
  0%,
  80% {
    opacity: 0;
  }
  81.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rd-frame-8-s4 {
  0%,
  88.75% {
    opacity: 0;
  }
  90.25%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rd-grow-s4 {
  0%,
  20.5% {
    --grow: 0;
  }
  22%,
  47.5% {
    --grow: 1;
  }
  49%,
  100% {
    --grow: 0;
  }
}
@keyframes rd-map-2-s4 {
  0%,
  30% {
    opacity: 0;
  }
  31.5%,
  98.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rd-map-3-s4 {
  0%,
  40% {
    opacity: 0;
  }
  41.5%,
  98.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rd-row-2-s4 {
  0%,
  30% {
    opacity: 0;
    transform: translateY(4px);
  }
  31.5%,
  98.5% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: translateY(4px);
  }
}
@keyframes rd-dist-s4 {
  0%,
  30% {
    transform: none;
  }
  31.5%,
  98.5% {
    transform: translateY(-50%);
  }
  100% {
    transform: none;
  }
}
@keyframes rd-shots-s4 {
  0%,
  10% {
    transform: none;
  }
  11.5%,
  30% {
    transform: translateY(-14.2857%);
  }
  31.5%,
  62.5% {
    transform: translateY(-28.5714%);
  }
  64%,
  71.25% {
    transform: translateY(-42.8571%);
  }
  72.75%,
  80% {
    transform: translateY(-57.1429%);
  }
  81.5%,
  88.75% {
    transform: translateY(-71.4286%);
  }
  90.25%,
  98.5% {
    transform: translateY(-85.7143%);
  }
  100% {
    transform: none;
  }
}
@keyframes rd-gps-s4 {
  0%,
  20% {
    transform: none;
  }
  21.5%,
  30% {
    transform: translateY(-14.2857%);
  }
  31.5%,
  62.5% {
    transform: translateY(-28.5714%);
  }
  64%,
  71.25% {
    transform: translateY(-42.8571%);
  }
  72.75%,
  80% {
    transform: translateY(-57.1429%);
  }
  81.5%,
  88.75% {
    transform: translateY(-71.4286%);
  }
  90.25%,
  98.5% {
    transform: translateY(-85.7143%);
  }
  100% {
    transform: none;
  }
}
@keyframes rd-lines-s4 {
  0%,
  10% {
    transform: none;
    opacity: 1;
  }
  10.75% {
    transform: none;
    opacity: 0;
  }
  10.76% {
    transform: translateY(-10%);
    opacity: 0;
  }
  11.5%,
  20% {
    transform: translateY(-10%);
    opacity: 1;
  }
  20.75% {
    transform: translateY(-10%);
    opacity: 0;
  }
  20.76% {
    transform: translateY(-20%);
    opacity: 0;
  }
  21.5%,
  30% {
    transform: translateY(-20%);
    opacity: 1;
  }
  30.75% {
    transform: translateY(-20%);
    opacity: 0;
  }
  30.76% {
    transform: translateY(-30%);
    opacity: 0;
  }
  31.5%,
  40% {
    transform: translateY(-30%);
    opacity: 1;
  }
  40.75% {
    transform: translateY(-30%);
    opacity: 0;
  }
  40.76% {
    transform: translateY(-40%);
    opacity: 0;
  }
  41.5%,
  50% {
    transform: translateY(-40%);
    opacity: 1;
  }
  50.75% {
    transform: translateY(-40%);
    opacity: 0;
  }
  50.76% {
    transform: translateY(-50%);
    opacity: 0;
  }
  51.5%,
  62.5% {
    transform: translateY(-50%);
    opacity: 1;
  }
  63.25% {
    transform: translateY(-50%);
    opacity: 0;
  }
  63.26% {
    transform: translateY(-60%);
    opacity: 0;
  }
  64%,
  71.25% {
    transform: translateY(-60%);
    opacity: 1;
  }
  72% {
    transform: translateY(-60%);
    opacity: 0;
  }
  72.01% {
    transform: translateY(-70%);
    opacity: 0;
  }
  72.75%,
  80% {
    transform: translateY(-70%);
    opacity: 1;
  }
  80.75% {
    transform: translateY(-70%);
    opacity: 0;
  }
  80.76% {
    transform: translateY(-80%);
    opacity: 0;
  }
  81.5%,
  88.75% {
    transform: translateY(-80%);
    opacity: 1;
  }
  89.5% {
    transform: translateY(-80%);
    opacity: 0;
  }
  89.51% {
    transform: translateY(-90%);
    opacity: 0;
  }
  90.25%,
  98.5% {
    transform: translateY(-90%);
    opacity: 1;
  }
  99.25% {
    transform: translateY(-90%);
    opacity: 0;
  }
  99.26% {
    transform: none;
    opacity: 0;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
@keyframes rd-turn-s4 {
  0%,
  62.5% {
    transform: none;
  }
  64%,
  98.5% {
    transform: translateY(-50%);
  }
  100% {
    transform: none;
  }
}
@keyframes rd-ls-1-s4 {
  0%,
  9% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  10.5%,
  98.5% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  100% {
    --on: 1;
    grid-template-rows: 1fr;
  }
}
@keyframes rd-line-1-s4 {
  0% {
    opacity: 1;
    transform: scaleX(0);
  }
  9.5% {
    opacity: 1;
    transform: none;
  }
  11% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}
@keyframes rd-ls-2-s4 {
  0%,
  9% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  10.5%,
  19% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  20.5%,
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes rd-line-2-s4 {
  0%,
  10% {
    opacity: 0;
    transform: scaleX(0);
  }
  19.5% {
    opacity: 1;
    transform: none;
  }
  21% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}
@keyframes rd-ls-3-s4 {
  0%,
  19% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  20.5%,
  49% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  50.5%,
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes rd-line-3-s4 {
  0%,
  20% {
    opacity: 0;
    transform: scaleX(0);
  }
  49.5% {
    opacity: 1;
    transform: none;
  }
  51% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}
@keyframes rd-ls-4-s4 {
  0%,
  49% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  50.5%,
  61.5% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  63%,
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes rd-line-4-s4 {
  0%,
  50% {
    opacity: 0;
    transform: scaleX(0);
  }
  62% {
    opacity: 1;
    transform: none;
  }
  63.5% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}
@keyframes rd-ls-5-s4 {
  0%,
  61.5% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  63%,
  98.5% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes rd-line-5-s4 {
  0%,
  62.5% {
    opacity: 0;
    transform: scaleX(0);
  }
  98% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}
.golf-course:has(#round-step-5:checked, #round-step-5-again:checked) {
  --seek: calc(var(--round) * -0.625);
  --still: calc(var(--round) * -0.95);
}
@keyframes rd-frame-2-s5 {
  0%,
  10% {
    opacity: 0;
  }
  11.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rd-frame-3-s5 {
  0%,
  30% {
    opacity: 0;
  }
  31.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rd-frame-4-s5 {
  0%,
  50% {
    opacity: 0;
  }
  51.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rd-frame-5-s5 {
  0%,
  62.5% {
    opacity: 0;
  }
  64%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rd-frame-6-s5 {
  0%,
  71.25% {
    opacity: 0;
  }
  72.75%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rd-frame-7-s5 {
  0%,
  80% {
    opacity: 0;
  }
  81.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rd-frame-8-s5 {
  0%,
  88.75% {
    opacity: 0;
  }
  90.25%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rd-grow-s5 {
  0%,
  20.5% {
    --grow: 0;
  }
  22%,
  47.5% {
    --grow: 1;
  }
  49%,
  100% {
    --grow: 0;
  }
}
@keyframes rd-map-2-s5 {
  0%,
  30% {
    opacity: 0;
  }
  31.5%,
  98.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rd-map-3-s5 {
  0%,
  40% {
    opacity: 0;
  }
  41.5%,
  98.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rd-row-2-s5 {
  0%,
  30% {
    opacity: 0;
    transform: translateY(4px);
  }
  31.5%,
  98.5% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: translateY(4px);
  }
}
@keyframes rd-dist-s5 {
  0%,
  30% {
    transform: none;
  }
  31.5%,
  98.5% {
    transform: translateY(-50%);
  }
  100% {
    transform: none;
  }
}
@keyframes rd-shots-s5 {
  0%,
  10% {
    transform: none;
  }
  11.5%,
  30% {
    transform: translateY(-14.2857%);
  }
  31.5%,
  62.5% {
    transform: translateY(-28.5714%);
  }
  64%,
  71.25% {
    transform: translateY(-42.8571%);
  }
  72.75%,
  80% {
    transform: translateY(-57.1429%);
  }
  81.5%,
  88.75% {
    transform: translateY(-71.4286%);
  }
  90.25%,
  98.5% {
    transform: translateY(-85.7143%);
  }
  100% {
    transform: none;
  }
}
@keyframes rd-gps-s5 {
  0%,
  20% {
    transform: none;
  }
  21.5%,
  30% {
    transform: translateY(-14.2857%);
  }
  31.5%,
  62.5% {
    transform: translateY(-28.5714%);
  }
  64%,
  71.25% {
    transform: translateY(-42.8571%);
  }
  72.75%,
  80% {
    transform: translateY(-57.1429%);
  }
  81.5%,
  88.75% {
    transform: translateY(-71.4286%);
  }
  90.25%,
  98.5% {
    transform: translateY(-85.7143%);
  }
  100% {
    transform: none;
  }
}
@keyframes rd-lines-s5 {
  0%,
  10% {
    transform: none;
    opacity: 1;
  }
  10.75% {
    transform: none;
    opacity: 0;
  }
  10.76% {
    transform: translateY(-10%);
    opacity: 0;
  }
  11.5%,
  20% {
    transform: translateY(-10%);
    opacity: 1;
  }
  20.75% {
    transform: translateY(-10%);
    opacity: 0;
  }
  20.76% {
    transform: translateY(-20%);
    opacity: 0;
  }
  21.5%,
  30% {
    transform: translateY(-20%);
    opacity: 1;
  }
  30.75% {
    transform: translateY(-20%);
    opacity: 0;
  }
  30.76% {
    transform: translateY(-30%);
    opacity: 0;
  }
  31.5%,
  40% {
    transform: translateY(-30%);
    opacity: 1;
  }
  40.75% {
    transform: translateY(-30%);
    opacity: 0;
  }
  40.76% {
    transform: translateY(-40%);
    opacity: 0;
  }
  41.5%,
  50% {
    transform: translateY(-40%);
    opacity: 1;
  }
  50.75% {
    transform: translateY(-40%);
    opacity: 0;
  }
  50.76% {
    transform: translateY(-50%);
    opacity: 0;
  }
  51.5%,
  62.5% {
    transform: translateY(-50%);
    opacity: 1;
  }
  63.25% {
    transform: translateY(-50%);
    opacity: 0;
  }
  63.26% {
    transform: translateY(-60%);
    opacity: 0;
  }
  64%,
  71.25% {
    transform: translateY(-60%);
    opacity: 1;
  }
  72% {
    transform: translateY(-60%);
    opacity: 0;
  }
  72.01% {
    transform: translateY(-70%);
    opacity: 0;
  }
  72.75%,
  80% {
    transform: translateY(-70%);
    opacity: 1;
  }
  80.75% {
    transform: translateY(-70%);
    opacity: 0;
  }
  80.76% {
    transform: translateY(-80%);
    opacity: 0;
  }
  81.5%,
  88.75% {
    transform: translateY(-80%);
    opacity: 1;
  }
  89.5% {
    transform: translateY(-80%);
    opacity: 0;
  }
  89.51% {
    transform: translateY(-90%);
    opacity: 0;
  }
  90.25%,
  98.5% {
    transform: translateY(-90%);
    opacity: 1;
  }
  99.25% {
    transform: translateY(-90%);
    opacity: 0;
  }
  99.26% {
    transform: none;
    opacity: 0;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
@keyframes rd-turn-s5 {
  0%,
  62.5% {
    transform: none;
  }
  64%,
  98.5% {
    transform: translateY(-50%);
  }
  100% {
    transform: none;
  }
}
@keyframes rd-ls-1-s5 {
  0%,
  9% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  10.5%,
  98.5% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  100% {
    --on: 1;
    grid-template-rows: 1fr;
  }
}
@keyframes rd-line-1-s5 {
  0% {
    opacity: 1;
    transform: scaleX(0);
  }
  9.5% {
    opacity: 1;
    transform: none;
  }
  11% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}
@keyframes rd-ls-2-s5 {
  0%,
  9% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  10.5%,
  19% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  20.5%,
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes rd-line-2-s5 {
  0%,
  10% {
    opacity: 0;
    transform: scaleX(0);
  }
  19.5% {
    opacity: 1;
    transform: none;
  }
  21% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}
@keyframes rd-ls-3-s5 {
  0%,
  19% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  20.5%,
  49% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  50.5%,
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes rd-line-3-s5 {
  0%,
  20% {
    opacity: 0;
    transform: scaleX(0);
  }
  49.5% {
    opacity: 1;
    transform: none;
  }
  51% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}
@keyframes rd-ls-4-s5 {
  0%,
  49% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  50.5%,
  61.5% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  63%,
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes rd-line-4-s5 {
  0%,
  50% {
    opacity: 0;
    transform: scaleX(0);
  }
  62% {
    opacity: 1;
    transform: none;
  }
  63.5% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}
@keyframes rd-ls-5-s5 {
  0%,
  61.5% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  63%,
  98.5% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes rd-line-5-s5 {
  0%,
  62.5% {
    opacity: 0;
    transform: scaleX(0);
  }
  98% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}
.lift-loop:has(#lift-step-1:checked, #lift-step-1-again:checked) {
  --seek: calc(var(--lift) * 0);
  --still: calc(var(--lift) * -0.12);
}
@keyframes lf-frame-2-s1 {
  0%,
  25% {
    opacity: 0;
  }
  26.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes lf-frame-3-s1 {
  0%,
  45% {
    opacity: 0;
  }
  46.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes lf-frame-4-s1 {
  0%,
  70% {
    opacity: 0;
  }
  71.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes lf-sets-s1 {
  0%,
  70% {
    transform: none;
  }
  71.5%,
  98.5% {
    transform: translateY(-50%);
  }
  100% {
    transform: none;
  }
}
@keyframes lf-set-s1 {
  0%,
  70% {
    transform: none;
  }
  71.5%,
  98.5% {
    transform: translateY(-50%);
  }
  100% {
    transform: none;
  }
}
@keyframes lf-lines-s1 {
  0%,
  25% {
    transform: none;
  }
  26.5%,
  45% {
    transform: translateY(-25%);
  }
  46.5%,
  70% {
    transform: translateY(-50%);
  }
  71.5%,
  98.5% {
    transform: translateY(-75%);
  }
  100% {
    transform: none;
  }
}
@keyframes lf-watch-2-s1 {
  0%,
  25% {
    opacity: 0;
  }
  26.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes lf-watch-3-s1 {
  0%,
  45% {
    opacity: 0;
  }
  46.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes lf-watch-4-s1 {
  0%,
  70% {
    opacity: 0;
  }
  71.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes lf-ls-1-s1 {
  0%,
  24% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  25.5%,
  98.5% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  100% {
    --on: 1;
    grid-template-rows: 1fr;
  }
}
@keyframes lf-line-1-s1 {
  0% {
    opacity: 1;
    transform: scaleX(0);
  }
  24.5% {
    opacity: 1;
    transform: none;
  }
  26% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}
@keyframes lf-ls-2-s1 {
  0%,
  24% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  25.5%,
  44% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  45.5%,
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes lf-line-2-s1 {
  0%,
  25% {
    opacity: 0;
    transform: scaleX(0);
  }
  44.5% {
    opacity: 1;
    transform: none;
  }
  46% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}
@keyframes lf-ls-3-s1 {
  0%,
  44% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  45.5%,
  69% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  70.5%,
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes lf-line-3-s1 {
  0%,
  45% {
    opacity: 0;
    transform: scaleX(0);
  }
  69.5% {
    opacity: 1;
    transform: none;
  }
  71% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}
@keyframes lf-ls-4-s1 {
  0%,
  69% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  70.5%,
  98.5% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes lf-line-4-s1 {
  0%,
  70% {
    opacity: 0;
    transform: scaleX(0);
  }
  98% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}
.lift-loop:has(#lift-step-2:checked, #lift-step-2-again:checked) {
  --seek: calc(var(--lift) * -0.25);
  --still: calc(var(--lift) * -0.35);
}
@keyframes lf-frame-2-s2 {
  0%,
  25% {
    opacity: 0;
  }
  26.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes lf-frame-3-s2 {
  0%,
  45% {
    opacity: 0;
  }
  46.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes lf-frame-4-s2 {
  0%,
  70% {
    opacity: 0;
  }
  71.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes lf-sets-s2 {
  0%,
  70% {
    transform: none;
  }
  71.5%,
  98.5% {
    transform: translateY(-50%);
  }
  100% {
    transform: none;
  }
}
@keyframes lf-set-s2 {
  0%,
  70% {
    transform: none;
  }
  71.5%,
  98.5% {
    transform: translateY(-50%);
  }
  100% {
    transform: none;
  }
}
@keyframes lf-lines-s2 {
  0%,
  25% {
    transform: none;
  }
  26.5%,
  45% {
    transform: translateY(-25%);
  }
  46.5%,
  70% {
    transform: translateY(-50%);
  }
  71.5%,
  98.5% {
    transform: translateY(-75%);
  }
  100% {
    transform: none;
  }
}
@keyframes lf-watch-2-s2 {
  0%,
  25% {
    opacity: 0;
  }
  26.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes lf-watch-3-s2 {
  0%,
  45% {
    opacity: 0;
  }
  46.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes lf-watch-4-s2 {
  0%,
  70% {
    opacity: 0;
  }
  71.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes lf-ls-1-s2 {
  0%,
  24% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  25.5%,
  98.5% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  100% {
    --on: 1;
    grid-template-rows: 1fr;
  }
}
@keyframes lf-line-1-s2 {
  0% {
    opacity: 1;
    transform: scaleX(0);
  }
  24.5% {
    opacity: 1;
    transform: none;
  }
  26% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}
@keyframes lf-ls-2-s2 {
  0%,
  24% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  25.5%,
  44% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  45.5%,
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes lf-line-2-s2 {
  0%,
  25% {
    opacity: 0;
    transform: scaleX(0);
  }
  44.5% {
    opacity: 1;
    transform: none;
  }
  46% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}
@keyframes lf-ls-3-s2 {
  0%,
  44% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  45.5%,
  69% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  70.5%,
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes lf-line-3-s2 {
  0%,
  45% {
    opacity: 0;
    transform: scaleX(0);
  }
  69.5% {
    opacity: 1;
    transform: none;
  }
  71% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}
@keyframes lf-ls-4-s2 {
  0%,
  69% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  70.5%,
  98.5% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes lf-line-4-s2 {
  0%,
  70% {
    opacity: 0;
    transform: scaleX(0);
  }
  98% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}
.lift-loop:has(#lift-step-3:checked, #lift-step-3-again:checked) {
  --seek: calc(var(--lift) * -0.45);
  --still: calc(var(--lift) * -0.57);
}
@keyframes lf-frame-2-s3 {
  0%,
  25% {
    opacity: 0;
  }
  26.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes lf-frame-3-s3 {
  0%,
  45% {
    opacity: 0;
  }
  46.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes lf-frame-4-s3 {
  0%,
  70% {
    opacity: 0;
  }
  71.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes lf-sets-s3 {
  0%,
  70% {
    transform: none;
  }
  71.5%,
  98.5% {
    transform: translateY(-50%);
  }
  100% {
    transform: none;
  }
}
@keyframes lf-set-s3 {
  0%,
  70% {
    transform: none;
  }
  71.5%,
  98.5% {
    transform: translateY(-50%);
  }
  100% {
    transform: none;
  }
}
@keyframes lf-lines-s3 {
  0%,
  25% {
    transform: none;
  }
  26.5%,
  45% {
    transform: translateY(-25%);
  }
  46.5%,
  70% {
    transform: translateY(-50%);
  }
  71.5%,
  98.5% {
    transform: translateY(-75%);
  }
  100% {
    transform: none;
  }
}
@keyframes lf-watch-2-s3 {
  0%,
  25% {
    opacity: 0;
  }
  26.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes lf-watch-3-s3 {
  0%,
  45% {
    opacity: 0;
  }
  46.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes lf-watch-4-s3 {
  0%,
  70% {
    opacity: 0;
  }
  71.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes lf-ls-1-s3 {
  0%,
  24% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  25.5%,
  98.5% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  100% {
    --on: 1;
    grid-template-rows: 1fr;
  }
}
@keyframes lf-line-1-s3 {
  0% {
    opacity: 1;
    transform: scaleX(0);
  }
  24.5% {
    opacity: 1;
    transform: none;
  }
  26% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}
@keyframes lf-ls-2-s3 {
  0%,
  24% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  25.5%,
  44% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  45.5%,
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes lf-line-2-s3 {
  0%,
  25% {
    opacity: 0;
    transform: scaleX(0);
  }
  44.5% {
    opacity: 1;
    transform: none;
  }
  46% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}
@keyframes lf-ls-3-s3 {
  0%,
  44% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  45.5%,
  69% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  70.5%,
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes lf-line-3-s3 {
  0%,
  45% {
    opacity: 0;
    transform: scaleX(0);
  }
  69.5% {
    opacity: 1;
    transform: none;
  }
  71% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}
@keyframes lf-ls-4-s3 {
  0%,
  69% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  70.5%,
  98.5% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes lf-line-4-s3 {
  0%,
  70% {
    opacity: 0;
    transform: scaleX(0);
  }
  98% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}
.lift-loop:has(#lift-step-4:checked, #lift-step-4-again:checked) {
  --seek: calc(var(--lift) * -0.7);
  --still: calc(var(--lift) * -0.85);
}
@keyframes lf-frame-2-s4 {
  0%,
  25% {
    opacity: 0;
  }
  26.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes lf-frame-3-s4 {
  0%,
  45% {
    opacity: 0;
  }
  46.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes lf-frame-4-s4 {
  0%,
  70% {
    opacity: 0;
  }
  71.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes lf-sets-s4 {
  0%,
  70% {
    transform: none;
  }
  71.5%,
  98.5% {
    transform: translateY(-50%);
  }
  100% {
    transform: none;
  }
}
@keyframes lf-set-s4 {
  0%,
  70% {
    transform: none;
  }
  71.5%,
  98.5% {
    transform: translateY(-50%);
  }
  100% {
    transform: none;
  }
}
@keyframes lf-lines-s4 {
  0%,
  25% {
    transform: none;
  }
  26.5%,
  45% {
    transform: translateY(-25%);
  }
  46.5%,
  70% {
    transform: translateY(-50%);
  }
  71.5%,
  98.5% {
    transform: translateY(-75%);
  }
  100% {
    transform: none;
  }
}
@keyframes lf-watch-2-s4 {
  0%,
  25% {
    opacity: 0;
  }
  26.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes lf-watch-3-s4 {
  0%,
  45% {
    opacity: 0;
  }
  46.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes lf-watch-4-s4 {
  0%,
  70% {
    opacity: 0;
  }
  71.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes lf-ls-1-s4 {
  0%,
  24% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  25.5%,
  98.5% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  100% {
    --on: 1;
    grid-template-rows: 1fr;
  }
}
@keyframes lf-line-1-s4 {
  0% {
    opacity: 1;
    transform: scaleX(0);
  }
  24.5% {
    opacity: 1;
    transform: none;
  }
  26% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}
@keyframes lf-ls-2-s4 {
  0%,
  24% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  25.5%,
  44% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  45.5%,
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes lf-line-2-s4 {
  0%,
  25% {
    opacity: 0;
    transform: scaleX(0);
  }
  44.5% {
    opacity: 1;
    transform: none;
  }
  46% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}
@keyframes lf-ls-3-s4 {
  0%,
  44% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  45.5%,
  69% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  70.5%,
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes lf-line-3-s4 {
  0%,
  45% {
    opacity: 0;
    transform: scaleX(0);
  }
  69.5% {
    opacity: 1;
    transform: none;
  }
  71% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}
@keyframes lf-ls-4-s4 {
  0%,
  69% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  70.5%,
  98.5% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes lf-line-4-s4 {
  0%,
  70% {
    opacity: 0;
    transform: scaleX(0);
  }
  98% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}
.run-loop:has(#run-step-1:checked, #run-step-1-again:checked) {
  --seek: calc(var(--run-clock) * 0);
  --still: calc(var(--run-clock) * -0.24);
}
@keyframes rn-frame-2-s1 {
  0%,
  7.5% {
    opacity: 0;
  }
  8.75%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rn-frame-3-s1 {
  0%,
  15% {
    opacity: 0;
  }
  16.25%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rn-frame-4-s1 {
  0%,
  22.5% {
    opacity: 0;
  }
  23.75%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rn-page-s1 {
  0%,
  30% {
    opacity: 0;
  }
  31.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rn-scroll-s1 {
  0%,
  72% {
    transform: translateY(-12.036%);
    animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1);
  }
  76%,
  100% {
    transform: translateY(-55.4955%);
  }
}
@keyframes rn-route-s1 {
  0%,
  32% {
    --sweep: 0deg;
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }
  47%,
  100% {
    --sweep: 360deg;
  }
}
@keyframes rn-lines-s1 {
  0%,
  52% {
    clip-path: inset(0 0 0 0);
  }
  64%,
  100% {
    clip-path: inset(0 0 0 100%);
  }
}
@keyframes rn-distance-s1 {
  0%,
  7.5% {
    transform: none;
  }
  8.75%,
  15% {
    transform: translateY(-20%);
  }
  16.25%,
  22.5% {
    transform: translateY(-40%);
  }
  23.75%,
  30% {
    transform: translateY(-60%);
  }
  31.25%,
  98.5% {
    transform: translateY(-80%);
  }
  100% {
    transform: none;
  }
}
@keyframes rn-pace-s1 {
  0%,
  7.5% {
    transform: none;
  }
  8.75%,
  15% {
    transform: translateY(-20%);
  }
  16.25%,
  22.5% {
    transform: translateY(-40%);
  }
  23.75%,
  30% {
    transform: translateY(-60%);
  }
  31.25%,
  98.5% {
    transform: translateY(-80%);
  }
  100% {
    transform: none;
  }
}
@keyframes rn-form-s1 {
  0%,
  76% {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
  78%,
  98.5% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes rn-watch-2-s1 {
  0%,
  30% {
    opacity: 0;
  }
  31.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rn-watch-3-s1 {
  0%,
  70% {
    opacity: 0;
  }
  71.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rn-ls-1-s1 {
  0%,
  29% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  30.5%,
  98.5% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  100% {
    --on: 1;
    grid-template-rows: 1fr;
  }
}
@keyframes rn-line-1-s1 {
  0% {
    opacity: 1;
    transform: scaleX(0);
  }
  29.5% {
    opacity: 1;
    transform: none;
  }
  31% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}
@keyframes rn-ls-2-s1 {
  0%,
  29% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  30.5%,
  49% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  50.5%,
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes rn-line-2-s1 {
  0%,
  30% {
    opacity: 0;
    transform: scaleX(0);
  }
  49.5% {
    opacity: 1;
    transform: none;
  }
  51% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}
@keyframes rn-ls-3-s1 {
  0%,
  49% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  50.5%,
  69% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  70.5%,
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes rn-line-3-s1 {
  0%,
  50% {
    opacity: 0;
    transform: scaleX(0);
  }
  69.5% {
    opacity: 1;
    transform: none;
  }
  71% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}
@keyframes rn-ls-4-s1 {
  0%,
  69% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  70.5%,
  98.5% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes rn-line-4-s1 {
  0%,
  70% {
    opacity: 0;
    transform: scaleX(0);
  }
  98% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}
.run-loop:has(#run-step-2:checked, #run-step-2-again:checked) {
  --seek: calc(var(--run-clock) * -0.3);
  --still: calc(var(--run-clock) * -0.46);
}
@keyframes rn-frame-2-s2 {
  0%,
  7.5% {
    opacity: 0;
  }
  8.75%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rn-frame-3-s2 {
  0%,
  15% {
    opacity: 0;
  }
  16.25%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rn-frame-4-s2 {
  0%,
  22.5% {
    opacity: 0;
  }
  23.75%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rn-page-s2 {
  0%,
  30% {
    opacity: 0;
  }
  31.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rn-scroll-s2 {
  0%,
  72% {
    transform: translateY(-12.036%);
    animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1);
  }
  76%,
  100% {
    transform: translateY(-55.4955%);
  }
}
@keyframes rn-route-s2 {
  0%,
  32% {
    --sweep: 0deg;
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }
  47%,
  100% {
    --sweep: 360deg;
  }
}
@keyframes rn-lines-s2 {
  0%,
  52% {
    clip-path: inset(0 0 0 0);
  }
  64%,
  100% {
    clip-path: inset(0 0 0 100%);
  }
}
@keyframes rn-distance-s2 {
  0%,
  7.5% {
    transform: none;
  }
  8.75%,
  15% {
    transform: translateY(-20%);
  }
  16.25%,
  22.5% {
    transform: translateY(-40%);
  }
  23.75%,
  30% {
    transform: translateY(-60%);
  }
  31.25%,
  98.5% {
    transform: translateY(-80%);
  }
  100% {
    transform: none;
  }
}
@keyframes rn-pace-s2 {
  0%,
  7.5% {
    transform: none;
  }
  8.75%,
  15% {
    transform: translateY(-20%);
  }
  16.25%,
  22.5% {
    transform: translateY(-40%);
  }
  23.75%,
  30% {
    transform: translateY(-60%);
  }
  31.25%,
  98.5% {
    transform: translateY(-80%);
  }
  100% {
    transform: none;
  }
}
@keyframes rn-form-s2 {
  0%,
  76% {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
  78%,
  98.5% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes rn-watch-2-s2 {
  0%,
  30% {
    opacity: 0;
  }
  31.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rn-watch-3-s2 {
  0%,
  70% {
    opacity: 0;
  }
  71.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rn-ls-1-s2 {
  0%,
  29% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  30.5%,
  98.5% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  100% {
    --on: 1;
    grid-template-rows: 1fr;
  }
}
@keyframes rn-line-1-s2 {
  0% {
    opacity: 1;
    transform: scaleX(0);
  }
  29.5% {
    opacity: 1;
    transform: none;
  }
  31% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}
@keyframes rn-ls-2-s2 {
  0%,
  29% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  30.5%,
  49% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  50.5%,
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes rn-line-2-s2 {
  0%,
  30% {
    opacity: 0;
    transform: scaleX(0);
  }
  49.5% {
    opacity: 1;
    transform: none;
  }
  51% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}
@keyframes rn-ls-3-s2 {
  0%,
  49% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  50.5%,
  69% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  70.5%,
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes rn-line-3-s2 {
  0%,
  50% {
    opacity: 0;
    transform: scaleX(0);
  }
  69.5% {
    opacity: 1;
    transform: none;
  }
  71% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}
@keyframes rn-ls-4-s2 {
  0%,
  69% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  70.5%,
  98.5% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes rn-line-4-s2 {
  0%,
  70% {
    opacity: 0;
    transform: scaleX(0);
  }
  98% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}
.run-loop:has(#run-step-3:checked, #run-step-3-again:checked) {
  --seek: calc(var(--run-clock) * -0.5);
  --still: calc(var(--run-clock) * -0.66);
}
@keyframes rn-frame-2-s3 {
  0%,
  7.5% {
    opacity: 0;
  }
  8.75%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rn-frame-3-s3 {
  0%,
  15% {
    opacity: 0;
  }
  16.25%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rn-frame-4-s3 {
  0%,
  22.5% {
    opacity: 0;
  }
  23.75%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rn-page-s3 {
  0%,
  30% {
    opacity: 0;
  }
  31.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rn-scroll-s3 {
  0%,
  72% {
    transform: translateY(-12.036%);
    animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1);
  }
  76%,
  100% {
    transform: translateY(-55.4955%);
  }
}
@keyframes rn-route-s3 {
  0%,
  32% {
    --sweep: 0deg;
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }
  47%,
  100% {
    --sweep: 360deg;
  }
}
@keyframes rn-lines-s3 {
  0%,
  52% {
    clip-path: inset(0 0 0 0);
  }
  64%,
  100% {
    clip-path: inset(0 0 0 100%);
  }
}
@keyframes rn-distance-s3 {
  0%,
  7.5% {
    transform: none;
  }
  8.75%,
  15% {
    transform: translateY(-20%);
  }
  16.25%,
  22.5% {
    transform: translateY(-40%);
  }
  23.75%,
  30% {
    transform: translateY(-60%);
  }
  31.25%,
  98.5% {
    transform: translateY(-80%);
  }
  100% {
    transform: none;
  }
}
@keyframes rn-pace-s3 {
  0%,
  7.5% {
    transform: none;
  }
  8.75%,
  15% {
    transform: translateY(-20%);
  }
  16.25%,
  22.5% {
    transform: translateY(-40%);
  }
  23.75%,
  30% {
    transform: translateY(-60%);
  }
  31.25%,
  98.5% {
    transform: translateY(-80%);
  }
  100% {
    transform: none;
  }
}
@keyframes rn-form-s3 {
  0%,
  76% {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
  78%,
  98.5% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes rn-watch-2-s3 {
  0%,
  30% {
    opacity: 0;
  }
  31.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rn-watch-3-s3 {
  0%,
  70% {
    opacity: 0;
  }
  71.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rn-ls-1-s3 {
  0%,
  29% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  30.5%,
  98.5% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  100% {
    --on: 1;
    grid-template-rows: 1fr;
  }
}
@keyframes rn-line-1-s3 {
  0% {
    opacity: 1;
    transform: scaleX(0);
  }
  29.5% {
    opacity: 1;
    transform: none;
  }
  31% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}
@keyframes rn-ls-2-s3 {
  0%,
  29% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  30.5%,
  49% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  50.5%,
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes rn-line-2-s3 {
  0%,
  30% {
    opacity: 0;
    transform: scaleX(0);
  }
  49.5% {
    opacity: 1;
    transform: none;
  }
  51% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}
@keyframes rn-ls-3-s3 {
  0%,
  49% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  50.5%,
  69% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  70.5%,
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes rn-line-3-s3 {
  0%,
  50% {
    opacity: 0;
    transform: scaleX(0);
  }
  69.5% {
    opacity: 1;
    transform: none;
  }
  71% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}
@keyframes rn-ls-4-s3 {
  0%,
  69% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  70.5%,
  98.5% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes rn-line-4-s3 {
  0%,
  70% {
    opacity: 0;
    transform: scaleX(0);
  }
  98% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}
.run-loop:has(#run-step-4:checked, #run-step-4-again:checked) {
  --seek: calc(var(--run-clock) * -0.7);
  --still: calc(var(--run-clock) * -0.9);
}
@keyframes rn-frame-2-s4 {
  0%,
  7.5% {
    opacity: 0;
  }
  8.75%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rn-frame-3-s4 {
  0%,
  15% {
    opacity: 0;
  }
  16.25%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rn-frame-4-s4 {
  0%,
  22.5% {
    opacity: 0;
  }
  23.75%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rn-page-s4 {
  0%,
  30% {
    opacity: 0;
  }
  31.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rn-scroll-s4 {
  0%,
  72% {
    transform: translateY(-12.036%);
    animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1);
  }
  76%,
  100% {
    transform: translateY(-55.4955%);
  }
}
@keyframes rn-route-s4 {
  0%,
  32% {
    --sweep: 0deg;
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }
  47%,
  100% {
    --sweep: 360deg;
  }
}
@keyframes rn-lines-s4 {
  0%,
  52% {
    clip-path: inset(0 0 0 0);
  }
  64%,
  100% {
    clip-path: inset(0 0 0 100%);
  }
}
@keyframes rn-distance-s4 {
  0%,
  7.5% {
    transform: none;
  }
  8.75%,
  15% {
    transform: translateY(-20%);
  }
  16.25%,
  22.5% {
    transform: translateY(-40%);
  }
  23.75%,
  30% {
    transform: translateY(-60%);
  }
  31.25%,
  98.5% {
    transform: translateY(-80%);
  }
  100% {
    transform: none;
  }
}
@keyframes rn-pace-s4 {
  0%,
  7.5% {
    transform: none;
  }
  8.75%,
  15% {
    transform: translateY(-20%);
  }
  16.25%,
  22.5% {
    transform: translateY(-40%);
  }
  23.75%,
  30% {
    transform: translateY(-60%);
  }
  31.25%,
  98.5% {
    transform: translateY(-80%);
  }
  100% {
    transform: none;
  }
}
@keyframes rn-form-s4 {
  0%,
  76% {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
  78%,
  98.5% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes rn-watch-2-s4 {
  0%,
  30% {
    opacity: 0;
  }
  31.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rn-watch-3-s4 {
  0%,
  70% {
    opacity: 0;
  }
  71.5%,
  97.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rn-ls-1-s4 {
  0%,
  29% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  30.5%,
  98.5% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  100% {
    --on: 1;
    grid-template-rows: 1fr;
  }
}
@keyframes rn-line-1-s4 {
  0% {
    opacity: 1;
    transform: scaleX(0);
  }
  29.5% {
    opacity: 1;
    transform: none;
  }
  31% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}
@keyframes rn-ls-2-s4 {
  0%,
  29% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  30.5%,
  49% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  50.5%,
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes rn-line-2-s4 {
  0%,
  30% {
    opacity: 0;
    transform: scaleX(0);
  }
  49.5% {
    opacity: 1;
    transform: none;
  }
  51% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}
@keyframes rn-ls-3-s4 {
  0%,
  49% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  50.5%,
  69% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  70.5%,
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes rn-line-3-s4 {
  0%,
  50% {
    opacity: 0;
    transform: scaleX(0);
  }
  69.5% {
    opacity: 1;
    transform: none;
  }
  71% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}
@keyframes rn-ls-4-s4 {
  0%,
  69% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  70.5%,
  98.5% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes rn-line-4-s4 {
  0%,
  70% {
    opacity: 0;
    transform: scaleX(0);
  }
  98% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}
#racket:has(#racket-step-1:checked, #racket-step-1-again:checked) {
  --seek: calc(var(--cycle) * 0);
  --still: calc(var(--cycle) * -0.35);
}
body:has(#racket-step-1:checked, #racket-step-1-again:checked) :is(.ground .rk-tennis, .ground .rk-pickleball) {
  --seek: calc(var(--cycle) * 0);
  --still: calc(var(--cycle) * -0.35);
}
@keyframes depth-back-s1 {
  0%,
  12%,
  100% {
    transform: none;
  }
  50%,
  62% {
    transform: translateY(-6px);
  }
}
@keyframes depth-front-s1 {
  0%,
  12%,
  100% {
    transform: none;
  }
  50%,
  62% {
    transform: translateY(6px);
  }
}
@keyframes chip-loop-s1 {
  0%,
  4% {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
  }
  12%,
  84% {
    opacity: 1;
    transform: none;
  }
  92%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes fh-glow-s1 {
  0%,
  64.9%,
  78%,
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
  66.5% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--t) 45%, transparent);
    background: color-mix(in srgb, var(--t) 34%, transparent);
  }
}
@keyframes sheet-scrim-s1 {
  0%,
  14% {
    opacity: 0;
  }
  21%,
  80% {
    opacity: 1;
  }
  86%,
  100% {
    opacity: 0;
  }
}
@keyframes replay-frames-s1 {
  0%,
  24% {
    transform: none;
    animation-timing-function: steps(54, end);
  }
  47% {
    transform: translateY(-98.1818%);
    animation-timing-function: steps(1, end);
  }
  47.4259% {
    transform: translateX(-50%);
    animation-timing-function: steps(53, end);
  }
  70%,
  88% {
    transform: translate(-50%, -96.3636%);
  }
  89%,
  100% {
    transform: none;
  }
}
@keyframes fh-tick-s1 {
  0%,
  64.9% {
    transform: none;
  }
  66.5%,
  97% {
    transform: translateY(-50%);
  }
  98%,
  100% {
    transform: none;
  }
}
@keyframes rk-out-s1 {
  0%,
  47% {
    opacity: 1;
  }
  50%,
  97% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes rk-in-s1 {
  0%,
  47% {
    opacity: 0;
  }
  50%,
  97% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sheet-rise-s1 {
  0%,
  14% {
    transform: translateY(100%);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  21%,
  80% {
    transform: none;
    animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.2);
  }
  86%,
  100% {
    transform: translateY(100%);
  }
}
@keyframes rk-chips-tennis-s1 {
  0%,
  1.9% {
    opacity: 0;
  }
  2%,
  50% {
    opacity: 1;
  }
  50.1%,
  100% {
    opacity: 0;
  }
}
@keyframes rk-chips-pickleball-s1 {
  0%,
  51.9% {
    opacity: 0;
  }
  52%,
  100% {
    opacity: 1;
  }
}
@keyframes rk-tone-s1 {
  0%,
  47% {
    color: var(--racket);
  }
  50%,
  97% {
    color: var(--pickleball);
  }
  100% {
    color: var(--racket);
  }
}
@keyframes rk-ls-1-s1 {
  0%,
  48.5% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  50%,
  98.5% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  100% {
    --on: 1;
    grid-template-rows: 1fr;
  }
}
@keyframes rk-line-1-s1 {
  0% {
    opacity: 1;
    transform: scaleX(0);
  }
  49% {
    opacity: 1;
    transform: none;
  }
  50.5% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}
@keyframes rk-ls-2-s1 {
  0%,
  48.5% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  50%,
  98.5% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes rk-line-2-s1 {
  0%,
  50% {
    opacity: 0;
    transform: scaleX(0);
  }
  98% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}
#racket:has(#racket-step-2:checked, #racket-step-2-again:checked) {
  --seek: calc(var(--cycle) * -0.5);
  --still: calc(var(--cycle) * -0.85);
}
body:has(#racket-step-2:checked, #racket-step-2-again:checked) :is(.ground .rk-tennis, .ground .rk-pickleball) {
  --seek: calc(var(--cycle) * -0.5);
  --still: calc(var(--cycle) * -0.85);
}
@keyframes depth-back-s2 {
  0%,
  12%,
  100% {
    transform: none;
  }
  50%,
  62% {
    transform: translateY(-6px);
  }
}
@keyframes depth-front-s2 {
  0%,
  12%,
  100% {
    transform: none;
  }
  50%,
  62% {
    transform: translateY(6px);
  }
}
@keyframes chip-loop-s2 {
  0%,
  4% {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
  }
  12%,
  84% {
    opacity: 1;
    transform: none;
  }
  92%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes fh-glow-s2 {
  0%,
  64.9%,
  78%,
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
  66.5% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--t) 45%, transparent);
    background: color-mix(in srgb, var(--t) 34%, transparent);
  }
}
@keyframes sheet-scrim-s2 {
  0%,
  14% {
    opacity: 0;
  }
  21%,
  80% {
    opacity: 1;
  }
  86%,
  100% {
    opacity: 0;
  }
}
@keyframes replay-frames-s2 {
  0%,
  24% {
    transform: none;
    animation-timing-function: steps(54, end);
  }
  47% {
    transform: translateY(-98.1818%);
    animation-timing-function: steps(1, end);
  }
  47.4259% {
    transform: translateX(-50%);
    animation-timing-function: steps(53, end);
  }
  70%,
  88% {
    transform: translate(-50%, -96.3636%);
  }
  89%,
  100% {
    transform: none;
  }
}
@keyframes fh-tick-s2 {
  0%,
  64.9% {
    transform: none;
  }
  66.5%,
  97% {
    transform: translateY(-50%);
  }
  98%,
  100% {
    transform: none;
  }
}
@keyframes rk-out-s2 {
  0%,
  47% {
    opacity: 1;
  }
  50%,
  97% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes rk-in-s2 {
  0%,
  47% {
    opacity: 0;
  }
  50%,
  97% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sheet-rise-s2 {
  0%,
  14% {
    transform: translateY(100%);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  21%,
  80% {
    transform: none;
    animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.2);
  }
  86%,
  100% {
    transform: translateY(100%);
  }
}
@keyframes rk-chips-tennis-s2 {
  0%,
  1.9% {
    opacity: 0;
  }
  2%,
  50% {
    opacity: 1;
  }
  50.1%,
  100% {
    opacity: 0;
  }
}
@keyframes rk-chips-pickleball-s2 {
  0%,
  51.9% {
    opacity: 0;
  }
  52%,
  100% {
    opacity: 1;
  }
}
@keyframes rk-tone-s2 {
  0%,
  47% {
    color: var(--racket);
  }
  50%,
  97% {
    color: var(--pickleball);
  }
  100% {
    color: var(--racket);
  }
}
@keyframes rk-ls-1-s2 {
  0%,
  48.5% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  50%,
  98.5% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  100% {
    --on: 1;
    grid-template-rows: 1fr;
  }
}
@keyframes rk-line-1-s2 {
  0% {
    opacity: 1;
    transform: scaleX(0);
  }
  49% {
    opacity: 1;
    transform: none;
  }
  50.5% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}
@keyframes rk-ls-2-s2 {
  0%,
  48.5% {
    --on: 0;
    grid-template-rows: 0fr;
  }
  50%,
  98.5% {
    --on: 1;
    grid-template-rows: 1fr;
  }
  100% {
    --on: 0;
    grid-template-rows: 0fr;
  }
}
@keyframes rk-line-2-s2 {
  0%,
  50% {
    opacity: 0;
    transform: scaleX(0);
  }
  98% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}
.hero:has(#hero-slide-1:checked, #hero-slide-1-again:checked) {
  --seek: calc(var(--hero) * 0);
  --still: calc(var(--hero) * -0.15);
}
@keyframes screen-s1 {
  0%,
  17.6% {
    opacity: 1;
  }
  20%,
  97.6% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes screen-key-s1 {
  0%,
  18.8% {
    border-bottom-color: var(--accent);
    color: var(--accent);
  }
  20%,
  98.8% {
    border-bottom-color: transparent;
    color: var(--text-tertiary);
  }
  100% {
    border-bottom-color: var(--accent);
    color: var(--accent);
  }
}
@keyframes hero-card-s1 {
  0%,
  17.6% {
    opacity: 1;
    transform: none;
  }
  20% {
    opacity: 0;
    transform: translateY(-10px);
  }
  20.8%,
  97.6% {
    opacity: 0;
    transform: translateY(14px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes backswing-s1 {
  0%,
  2% {
    transform: scaleX(0);
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  }
  8.4%,
  20% {
    transform: none;
  }
  20.8%,
  100% {
    transform: scaleX(0);
  }
}
@keyframes downswing-s1 {
  0%,
  8.4% {
    transform: scaleX(0);
    animation-timing-function: cubic-bezier(0.5, 0, 1, 1);
  }
  10.46%,
  20% {
    transform: none;
  }
  20.8%,
  100% {
    transform: scaleX(0);
  }
}
@keyframes trace-s1 {
  0%,
  2% {
    stroke-dashoffset: 1;
  }
  12.4%,
  20% {
    stroke-dashoffset: 0;
  }
  20.8%,
  100% {
    stroke-dashoffset: 1;
  }
}
@keyframes peak-s1 {
  0%,
  10.24% {
    opacity: 0;
    transform: scale(0.3);
  }
  11.2% {
    opacity: 1;
    transform: scale(1.6);
  }
  12.4% {
    transform: none;
  }
  13.6% {
    transform: scale(1.3);
  }
  14.8%,
  20% {
    opacity: 1;
    transform: none;
  }
  20.8%,
  100% {
    opacity: 0;
  }
}
@keyframes detected-s1 {
  0%,
  10.24% {
    opacity: 0;
    transform: translateX(-6px);
  }
  11.6%,
  20% {
    opacity: 1;
    transform: none;
  }
  20.8%,
  100% {
    opacity: 0;
  }
}
@keyframes chip-s1 {
  0%,
  1.6% {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
  }
  4%,
  20% {
    opacity: 1;
    transform: none;
  }
  20.8%,
  100% {
    opacity: 0;
  }
}
@keyframes chip-2-s1 {
  0%,
  3.2% {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
  }
  5.6%,
  20% {
    opacity: 1;
    transform: none;
  }
  20.8%,
  100% {
    opacity: 0;
  }
}
@keyframes chip-3-s1 {
  0%,
  4.8% {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
  }
  7.2%,
  20% {
    opacity: 1;
    transform: none;
  }
  20.8%,
  100% {
    opacity: 0;
  }
}
@keyframes chip-4-s1 {
  0%,
  6.4% {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
  }
  8.8%,
  20% {
    opacity: 1;
    transform: none;
  }
  20.8%,
  100% {
    opacity: 0;
  }
}
@keyframes target-s1 {
  0%,
  2.4% {
    transform: scaleX(0);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  8%,
  20% {
    transform: none;
  }
  20.8%,
  100% {
    transform: scaleX(0);
  }
}
@keyframes ex-1-s1 {
  0%,
  7.2% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  10.4%,
  21.43% {
    opacity: 0;
  }
  21.44%,
  100% {
    opacity: 1;
  }
}
@keyframes ex-2-s1 {
  0%,
  7.2% {
    opacity: 0;
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  10.4%,
  21.43% {
    opacity: 1;
  }
  21.44%,
  100% {
    opacity: 0;
  }
}
.hero:has(#hero-slide-2:checked, #hero-slide-2-again:checked) {
  --seek: calc(var(--hero) * -0.2);
  --still: calc(var(--hero) * -0.35);
}
@keyframes screen-s2 {
  0%,
  17.6% {
    opacity: 1;
  }
  20%,
  97.6% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes screen-key-s2 {
  0%,
  18.8% {
    border-bottom-color: var(--accent);
    color: var(--accent);
  }
  20%,
  98.8% {
    border-bottom-color: transparent;
    color: var(--text-tertiary);
  }
  100% {
    border-bottom-color: var(--accent);
    color: var(--accent);
  }
}
@keyframes hero-card-s2 {
  0%,
  17.6% {
    opacity: 1;
    transform: none;
  }
  20% {
    opacity: 0;
    transform: translateY(-10px);
  }
  20.8%,
  97.6% {
    opacity: 0;
    transform: translateY(14px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes backswing-s2 {
  0%,
  2% {
    transform: scaleX(0);
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  }
  8.4%,
  20% {
    transform: none;
  }
  20.8%,
  100% {
    transform: scaleX(0);
  }
}
@keyframes downswing-s2 {
  0%,
  8.4% {
    transform: scaleX(0);
    animation-timing-function: cubic-bezier(0.5, 0, 1, 1);
  }
  10.46%,
  20% {
    transform: none;
  }
  20.8%,
  100% {
    transform: scaleX(0);
  }
}
@keyframes trace-s2 {
  0%,
  2% {
    stroke-dashoffset: 1;
  }
  12.4%,
  20% {
    stroke-dashoffset: 0;
  }
  20.8%,
  100% {
    stroke-dashoffset: 1;
  }
}
@keyframes peak-s2 {
  0%,
  10.24% {
    opacity: 0;
    transform: scale(0.3);
  }
  11.2% {
    opacity: 1;
    transform: scale(1.6);
  }
  12.4% {
    transform: none;
  }
  13.6% {
    transform: scale(1.3);
  }
  14.8%,
  20% {
    opacity: 1;
    transform: none;
  }
  20.8%,
  100% {
    opacity: 0;
  }
}
@keyframes detected-s2 {
  0%,
  10.24% {
    opacity: 0;
    transform: translateX(-6px);
  }
  11.6%,
  20% {
    opacity: 1;
    transform: none;
  }
  20.8%,
  100% {
    opacity: 0;
  }
}
@keyframes chip-s2 {
  0%,
  1.6% {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
  }
  4%,
  20% {
    opacity: 1;
    transform: none;
  }
  20.8%,
  100% {
    opacity: 0;
  }
}
@keyframes chip-2-s2 {
  0%,
  3.2% {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
  }
  5.6%,
  20% {
    opacity: 1;
    transform: none;
  }
  20.8%,
  100% {
    opacity: 0;
  }
}
@keyframes chip-3-s2 {
  0%,
  4.8% {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
  }
  7.2%,
  20% {
    opacity: 1;
    transform: none;
  }
  20.8%,
  100% {
    opacity: 0;
  }
}
@keyframes chip-4-s2 {
  0%,
  6.4% {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
  }
  8.8%,
  20% {
    opacity: 1;
    transform: none;
  }
  20.8%,
  100% {
    opacity: 0;
  }
}
@keyframes target-s2 {
  0%,
  2.4% {
    transform: scaleX(0);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  8%,
  20% {
    transform: none;
  }
  20.8%,
  100% {
    transform: scaleX(0);
  }
}
@keyframes ex-1-s2 {
  0%,
  7.2% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  10.4%,
  21.43% {
    opacity: 0;
  }
  21.44%,
  100% {
    opacity: 1;
  }
}
@keyframes ex-2-s2 {
  0%,
  7.2% {
    opacity: 0;
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  10.4%,
  21.43% {
    opacity: 1;
  }
  21.44%,
  100% {
    opacity: 0;
  }
}
.hero:has(#hero-slide-3:checked, #hero-slide-3-again:checked) {
  --seek: calc(var(--hero) * -0.4);
  --still: calc(var(--hero) * -0.55);
}
@keyframes screen-s3 {
  0%,
  17.6% {
    opacity: 1;
  }
  20%,
  97.6% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes screen-key-s3 {
  0%,
  18.8% {
    border-bottom-color: var(--accent);
    color: var(--accent);
  }
  20%,
  98.8% {
    border-bottom-color: transparent;
    color: var(--text-tertiary);
  }
  100% {
    border-bottom-color: var(--accent);
    color: var(--accent);
  }
}
@keyframes hero-card-s3 {
  0%,
  17.6% {
    opacity: 1;
    transform: none;
  }
  20% {
    opacity: 0;
    transform: translateY(-10px);
  }
  20.8%,
  97.6% {
    opacity: 0;
    transform: translateY(14px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes backswing-s3 {
  0%,
  2% {
    transform: scaleX(0);
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  }
  8.4%,
  20% {
    transform: none;
  }
  20.8%,
  100% {
    transform: scaleX(0);
  }
}
@keyframes downswing-s3 {
  0%,
  8.4% {
    transform: scaleX(0);
    animation-timing-function: cubic-bezier(0.5, 0, 1, 1);
  }
  10.46%,
  20% {
    transform: none;
  }
  20.8%,
  100% {
    transform: scaleX(0);
  }
}
@keyframes trace-s3 {
  0%,
  2% {
    stroke-dashoffset: 1;
  }
  12.4%,
  20% {
    stroke-dashoffset: 0;
  }
  20.8%,
  100% {
    stroke-dashoffset: 1;
  }
}
@keyframes peak-s3 {
  0%,
  10.24% {
    opacity: 0;
    transform: scale(0.3);
  }
  11.2% {
    opacity: 1;
    transform: scale(1.6);
  }
  12.4% {
    transform: none;
  }
  13.6% {
    transform: scale(1.3);
  }
  14.8%,
  20% {
    opacity: 1;
    transform: none;
  }
  20.8%,
  100% {
    opacity: 0;
  }
}
@keyframes detected-s3 {
  0%,
  10.24% {
    opacity: 0;
    transform: translateX(-6px);
  }
  11.6%,
  20% {
    opacity: 1;
    transform: none;
  }
  20.8%,
  100% {
    opacity: 0;
  }
}
@keyframes chip-s3 {
  0%,
  1.6% {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
  }
  4%,
  20% {
    opacity: 1;
    transform: none;
  }
  20.8%,
  100% {
    opacity: 0;
  }
}
@keyframes chip-2-s3 {
  0%,
  3.2% {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
  }
  5.6%,
  20% {
    opacity: 1;
    transform: none;
  }
  20.8%,
  100% {
    opacity: 0;
  }
}
@keyframes chip-3-s3 {
  0%,
  4.8% {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
  }
  7.2%,
  20% {
    opacity: 1;
    transform: none;
  }
  20.8%,
  100% {
    opacity: 0;
  }
}
@keyframes chip-4-s3 {
  0%,
  6.4% {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
  }
  8.8%,
  20% {
    opacity: 1;
    transform: none;
  }
  20.8%,
  100% {
    opacity: 0;
  }
}
@keyframes target-s3 {
  0%,
  2.4% {
    transform: scaleX(0);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  8%,
  20% {
    transform: none;
  }
  20.8%,
  100% {
    transform: scaleX(0);
  }
}
@keyframes ex-1-s3 {
  0%,
  7.2% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  10.4%,
  21.43% {
    opacity: 0;
  }
  21.44%,
  100% {
    opacity: 1;
  }
}
@keyframes ex-2-s3 {
  0%,
  7.2% {
    opacity: 0;
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  10.4%,
  21.43% {
    opacity: 1;
  }
  21.44%,
  100% {
    opacity: 0;
  }
}
.hero:has(#hero-slide-4:checked, #hero-slide-4-again:checked) {
  --seek: calc(var(--hero) * -0.6);
  --still: calc(var(--hero) * -0.75);
}
@keyframes screen-s4 {
  0%,
  17.6% {
    opacity: 1;
  }
  20%,
  97.6% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes screen-key-s4 {
  0%,
  18.8% {
    border-bottom-color: var(--accent);
    color: var(--accent);
  }
  20%,
  98.8% {
    border-bottom-color: transparent;
    color: var(--text-tertiary);
  }
  100% {
    border-bottom-color: var(--accent);
    color: var(--accent);
  }
}
@keyframes hero-card-s4 {
  0%,
  17.6% {
    opacity: 1;
    transform: none;
  }
  20% {
    opacity: 0;
    transform: translateY(-10px);
  }
  20.8%,
  97.6% {
    opacity: 0;
    transform: translateY(14px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes backswing-s4 {
  0%,
  2% {
    transform: scaleX(0);
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  }
  8.4%,
  20% {
    transform: none;
  }
  20.8%,
  100% {
    transform: scaleX(0);
  }
}
@keyframes downswing-s4 {
  0%,
  8.4% {
    transform: scaleX(0);
    animation-timing-function: cubic-bezier(0.5, 0, 1, 1);
  }
  10.46%,
  20% {
    transform: none;
  }
  20.8%,
  100% {
    transform: scaleX(0);
  }
}
@keyframes trace-s4 {
  0%,
  2% {
    stroke-dashoffset: 1;
  }
  12.4%,
  20% {
    stroke-dashoffset: 0;
  }
  20.8%,
  100% {
    stroke-dashoffset: 1;
  }
}
@keyframes peak-s4 {
  0%,
  10.24% {
    opacity: 0;
    transform: scale(0.3);
  }
  11.2% {
    opacity: 1;
    transform: scale(1.6);
  }
  12.4% {
    transform: none;
  }
  13.6% {
    transform: scale(1.3);
  }
  14.8%,
  20% {
    opacity: 1;
    transform: none;
  }
  20.8%,
  100% {
    opacity: 0;
  }
}
@keyframes detected-s4 {
  0%,
  10.24% {
    opacity: 0;
    transform: translateX(-6px);
  }
  11.6%,
  20% {
    opacity: 1;
    transform: none;
  }
  20.8%,
  100% {
    opacity: 0;
  }
}
@keyframes chip-s4 {
  0%,
  1.6% {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
  }
  4%,
  20% {
    opacity: 1;
    transform: none;
  }
  20.8%,
  100% {
    opacity: 0;
  }
}
@keyframes chip-2-s4 {
  0%,
  3.2% {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
  }
  5.6%,
  20% {
    opacity: 1;
    transform: none;
  }
  20.8%,
  100% {
    opacity: 0;
  }
}
@keyframes chip-3-s4 {
  0%,
  4.8% {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
  }
  7.2%,
  20% {
    opacity: 1;
    transform: none;
  }
  20.8%,
  100% {
    opacity: 0;
  }
}
@keyframes chip-4-s4 {
  0%,
  6.4% {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
  }
  8.8%,
  20% {
    opacity: 1;
    transform: none;
  }
  20.8%,
  100% {
    opacity: 0;
  }
}
@keyframes target-s4 {
  0%,
  2.4% {
    transform: scaleX(0);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  8%,
  20% {
    transform: none;
  }
  20.8%,
  100% {
    transform: scaleX(0);
  }
}
@keyframes ex-1-s4 {
  0%,
  7.2% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  10.4%,
  21.43% {
    opacity: 0;
  }
  21.44%,
  100% {
    opacity: 1;
  }
}
@keyframes ex-2-s4 {
  0%,
  7.2% {
    opacity: 0;
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  10.4%,
  21.43% {
    opacity: 1;
  }
  21.44%,
  100% {
    opacity: 0;
  }
}
.hero:has(#hero-slide-5:checked, #hero-slide-5-again:checked) {
  --seek: calc(var(--hero) * -0.8);
  --still: calc(var(--hero) * -0.95);
}
@keyframes screen-s5 {
  0%,
  17.6% {
    opacity: 1;
  }
  20%,
  97.6% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes screen-key-s5 {
  0%,
  18.8% {
    border-bottom-color: var(--accent);
    color: var(--accent);
  }
  20%,
  98.8% {
    border-bottom-color: transparent;
    color: var(--text-tertiary);
  }
  100% {
    border-bottom-color: var(--accent);
    color: var(--accent);
  }
}
@keyframes hero-card-s5 {
  0%,
  17.6% {
    opacity: 1;
    transform: none;
  }
  20% {
    opacity: 0;
    transform: translateY(-10px);
  }
  20.8%,
  97.6% {
    opacity: 0;
    transform: translateY(14px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes backswing-s5 {
  0%,
  2% {
    transform: scaleX(0);
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  }
  8.4%,
  20% {
    transform: none;
  }
  20.8%,
  100% {
    transform: scaleX(0);
  }
}
@keyframes downswing-s5 {
  0%,
  8.4% {
    transform: scaleX(0);
    animation-timing-function: cubic-bezier(0.5, 0, 1, 1);
  }
  10.46%,
  20% {
    transform: none;
  }
  20.8%,
  100% {
    transform: scaleX(0);
  }
}
@keyframes trace-s5 {
  0%,
  2% {
    stroke-dashoffset: 1;
  }
  12.4%,
  20% {
    stroke-dashoffset: 0;
  }
  20.8%,
  100% {
    stroke-dashoffset: 1;
  }
}
@keyframes peak-s5 {
  0%,
  10.24% {
    opacity: 0;
    transform: scale(0.3);
  }
  11.2% {
    opacity: 1;
    transform: scale(1.6);
  }
  12.4% {
    transform: none;
  }
  13.6% {
    transform: scale(1.3);
  }
  14.8%,
  20% {
    opacity: 1;
    transform: none;
  }
  20.8%,
  100% {
    opacity: 0;
  }
}
@keyframes detected-s5 {
  0%,
  10.24% {
    opacity: 0;
    transform: translateX(-6px);
  }
  11.6%,
  20% {
    opacity: 1;
    transform: none;
  }
  20.8%,
  100% {
    opacity: 0;
  }
}
@keyframes chip-s5 {
  0%,
  1.6% {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
  }
  4%,
  20% {
    opacity: 1;
    transform: none;
  }
  20.8%,
  100% {
    opacity: 0;
  }
}
@keyframes chip-2-s5 {
  0%,
  3.2% {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
  }
  5.6%,
  20% {
    opacity: 1;
    transform: none;
  }
  20.8%,
  100% {
    opacity: 0;
  }
}
@keyframes chip-3-s5 {
  0%,
  4.8% {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
  }
  7.2%,
  20% {
    opacity: 1;
    transform: none;
  }
  20.8%,
  100% {
    opacity: 0;
  }
}
@keyframes chip-4-s5 {
  0%,
  6.4% {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
  }
  8.8%,
  20% {
    opacity: 1;
    transform: none;
  }
  20.8%,
  100% {
    opacity: 0;
  }
}
@keyframes target-s5 {
  0%,
  2.4% {
    transform: scaleX(0);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  8%,
  20% {
    transform: none;
  }
  20.8%,
  100% {
    transform: scaleX(0);
  }
}
@keyframes ex-1-s5 {
  0%,
  7.2% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  10.4%,
  21.43% {
    opacity: 0;
  }
  21.44%,
  100% {
    opacity: 1;
  }
}
@keyframes ex-2-s5 {
  0%,
  7.2% {
    opacity: 0;
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  10.4%,
  21.43% {
    opacity: 1;
  }
  21.44%,
  100% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .golf-range:has(#range-step-1:checked) .gr-scrim {
    animation-name: rg-scrim-s1;
  }
  .golf-range:has(#range-step-1:checked) .gr-sheet {
    animation-name: rg-sheet-s1;
  }
  .golf-range:has(#range-step-1:checked) .sr-window img {
    animation-name: rg-frames-s1;
  }
  .golf-range:has(#range-step-1:checked) .gr-analysis {
    animation-name: rg-analysis-s1;
  }
  .golf-range:has(#range-step-1:checked) .gr-bag {
    animation-name: rg-bag-s1;
  }
  .golf-range:has(#range-step-1:checked) .sc-swings {
    animation-name: rg-card-1-s1;
  }
  .golf-range:has(#range-step-1:checked) .sc-tempo {
    animation-name: rg-card-2-s1;
  }
  .golf-range:has(#range-step-1:checked) .sc-analysis {
    animation-name: rg-card-3-s1;
  }
  .golf-range:has(#range-step-1:checked) .sc-new {
    animation-name: rg-land-s1;
  }
  .golf-range:has(#range-step-1:checked) .sc-new .sc-dot {
    animation-name: rg-dot-s1;
  }
  .golf-range:has(#range-step-1:checked) .sc-reel {
    animation-name: rg-tick-s1;
  }
  .golf-range:has(#range-step-1:checked) .sc-back {
    animation-name: rg-back-s1;
  }
  .golf-range:has(#range-step-1:checked) .sc-down {
    animation-name: rg-down-s1;
  }
  .golf-range:has(#range-step-1:checked) .sc-figure {
    animation-name: rg-ratio-s1;
  }
  .golf-range:has(#range-step-1:checked) .sc-parts span:first-child b {
    animation-name: rg-top-s1;
  }
  .golf-range:has(#range-step-1:checked) .sc-parts span + span b {
    animation-name: rg-impact-s1;
  }
  .golf-range:has(#range-step-1:checked) .sa-steps li {
    animation-name: rg-step-s1;
  }
  .golf-range:has(#range-step-1:checked) .sa-steps li:nth-child(2) {
    animation-name: rg-step-s1;
  }
  .golf-range:has(#range-step-1:checked) .sa-steps li:nth-child(3) {
    animation-name: rg-step-s1;
  }
  .golf-range:has(#range-step-1:checked) .lw-2 {
    animation-name: rg-watch-2-s1;
  }
  .golf-range:has(#range-step-1:checked) .lw-3 {
    animation-name: rg-watch-3-s1;
  }
  .golf-range:has(#range-step-1:checked) .range-steps .ls-1 {
    animation-name: rg-ls-1-s1;
  }
  .golf-range:has(#range-step-1:checked) .range-steps .ls-1 .ls-line {
    animation-name: rg-line-1-s1;
  }
  .golf-range:has(#range-step-1:checked) .range-steps .ls-2 {
    animation-name: rg-ls-2-s1;
  }
  .golf-range:has(#range-step-1:checked) .range-steps .ls-2 .ls-line {
    animation-name: rg-line-2-s1;
  }
  .golf-range:has(#range-step-1:checked) .range-steps .ls-3 {
    animation-name: rg-ls-3-s1;
  }
  .golf-range:has(#range-step-1:checked) .range-steps .ls-3 .ls-line {
    animation-name: rg-line-3-s1;
  }
  .golf-range:has(#range-step-1:checked) .range-steps .ls-4 {
    animation-name: rg-ls-4-s1;
  }
  .golf-range:has(#range-step-1:checked) .range-steps .ls-4 .ls-line {
    animation-name: rg-line-4-s1;
  }
  .golf-range:has(#range-step-2:checked) .gr-scrim {
    animation-name: rg-scrim-s2;
  }
  .golf-range:has(#range-step-2:checked) .gr-sheet {
    animation-name: rg-sheet-s2;
  }
  .golf-range:has(#range-step-2:checked) .sr-window img {
    animation-name: rg-frames-s2;
  }
  .golf-range:has(#range-step-2:checked) .gr-analysis {
    animation-name: rg-analysis-s2;
  }
  .golf-range:has(#range-step-2:checked) .gr-bag {
    animation-name: rg-bag-s2;
  }
  .golf-range:has(#range-step-2:checked) .sc-swings {
    animation-name: rg-card-1-s2;
  }
  .golf-range:has(#range-step-2:checked) .sc-tempo {
    animation-name: rg-card-2-s2;
  }
  .golf-range:has(#range-step-2:checked) .sc-analysis {
    animation-name: rg-card-3-s2;
  }
  .golf-range:has(#range-step-2:checked) .sc-new {
    animation-name: rg-land-s2;
  }
  .golf-range:has(#range-step-2:checked) .sc-new .sc-dot {
    animation-name: rg-dot-s2;
  }
  .golf-range:has(#range-step-2:checked) .sc-reel {
    animation-name: rg-tick-s2;
  }
  .golf-range:has(#range-step-2:checked) .sc-back {
    animation-name: rg-back-s2;
  }
  .golf-range:has(#range-step-2:checked) .sc-down {
    animation-name: rg-down-s2;
  }
  .golf-range:has(#range-step-2:checked) .sc-figure {
    animation-name: rg-ratio-s2;
  }
  .golf-range:has(#range-step-2:checked) .sc-parts span:first-child b {
    animation-name: rg-top-s2;
  }
  .golf-range:has(#range-step-2:checked) .sc-parts span + span b {
    animation-name: rg-impact-s2;
  }
  .golf-range:has(#range-step-2:checked) .sa-steps li {
    animation-name: rg-step-s2;
  }
  .golf-range:has(#range-step-2:checked) .sa-steps li:nth-child(2) {
    animation-name: rg-step-s2;
  }
  .golf-range:has(#range-step-2:checked) .sa-steps li:nth-child(3) {
    animation-name: rg-step-s2;
  }
  .golf-range:has(#range-step-2:checked) .lw-2 {
    animation-name: rg-watch-2-s2;
  }
  .golf-range:has(#range-step-2:checked) .lw-3 {
    animation-name: rg-watch-3-s2;
  }
  .golf-range:has(#range-step-2:checked) .range-steps .ls-1 {
    animation-name: rg-ls-1-s2;
  }
  .golf-range:has(#range-step-2:checked) .range-steps .ls-1 .ls-line {
    animation-name: rg-line-1-s2;
  }
  .golf-range:has(#range-step-2:checked) .range-steps .ls-2 {
    animation-name: rg-ls-2-s2;
  }
  .golf-range:has(#range-step-2:checked) .range-steps .ls-2 .ls-line {
    animation-name: rg-line-2-s2;
  }
  .golf-range:has(#range-step-2:checked) .range-steps .ls-3 {
    animation-name: rg-ls-3-s2;
  }
  .golf-range:has(#range-step-2:checked) .range-steps .ls-3 .ls-line {
    animation-name: rg-line-3-s2;
  }
  .golf-range:has(#range-step-2:checked) .range-steps .ls-4 {
    animation-name: rg-ls-4-s2;
  }
  .golf-range:has(#range-step-2:checked) .range-steps .ls-4 .ls-line {
    animation-name: rg-line-4-s2;
  }
  .golf-range:has(#range-step-3:checked) .gr-scrim {
    animation-name: rg-scrim-s3;
  }
  .golf-range:has(#range-step-3:checked) .gr-sheet {
    animation-name: rg-sheet-s3;
  }
  .golf-range:has(#range-step-3:checked) .sr-window img {
    animation-name: rg-frames-s3;
  }
  .golf-range:has(#range-step-3:checked) .gr-analysis {
    animation-name: rg-analysis-s3;
  }
  .golf-range:has(#range-step-3:checked) .gr-bag {
    animation-name: rg-bag-s3;
  }
  .golf-range:has(#range-step-3:checked) .sc-swings {
    animation-name: rg-card-1-s3;
  }
  .golf-range:has(#range-step-3:checked) .sc-tempo {
    animation-name: rg-card-2-s3;
  }
  .golf-range:has(#range-step-3:checked) .sc-analysis {
    animation-name: rg-card-3-s3;
  }
  .golf-range:has(#range-step-3:checked) .sc-new {
    animation-name: rg-land-s3;
  }
  .golf-range:has(#range-step-3:checked) .sc-new .sc-dot {
    animation-name: rg-dot-s3;
  }
  .golf-range:has(#range-step-3:checked) .sc-reel {
    animation-name: rg-tick-s3;
  }
  .golf-range:has(#range-step-3:checked) .sc-back {
    animation-name: rg-back-s3;
  }
  .golf-range:has(#range-step-3:checked) .sc-down {
    animation-name: rg-down-s3;
  }
  .golf-range:has(#range-step-3:checked) .sc-figure {
    animation-name: rg-ratio-s3;
  }
  .golf-range:has(#range-step-3:checked) .sc-parts span:first-child b {
    animation-name: rg-top-s3;
  }
  .golf-range:has(#range-step-3:checked) .sc-parts span + span b {
    animation-name: rg-impact-s3;
  }
  .golf-range:has(#range-step-3:checked) .sa-steps li {
    animation-name: rg-step-s3;
  }
  .golf-range:has(#range-step-3:checked) .sa-steps li:nth-child(2) {
    animation-name: rg-step-s3;
  }
  .golf-range:has(#range-step-3:checked) .sa-steps li:nth-child(3) {
    animation-name: rg-step-s3;
  }
  .golf-range:has(#range-step-3:checked) .lw-2 {
    animation-name: rg-watch-2-s3;
  }
  .golf-range:has(#range-step-3:checked) .lw-3 {
    animation-name: rg-watch-3-s3;
  }
  .golf-range:has(#range-step-3:checked) .range-steps .ls-1 {
    animation-name: rg-ls-1-s3;
  }
  .golf-range:has(#range-step-3:checked) .range-steps .ls-1 .ls-line {
    animation-name: rg-line-1-s3;
  }
  .golf-range:has(#range-step-3:checked) .range-steps .ls-2 {
    animation-name: rg-ls-2-s3;
  }
  .golf-range:has(#range-step-3:checked) .range-steps .ls-2 .ls-line {
    animation-name: rg-line-2-s3;
  }
  .golf-range:has(#range-step-3:checked) .range-steps .ls-3 {
    animation-name: rg-ls-3-s3;
  }
  .golf-range:has(#range-step-3:checked) .range-steps .ls-3 .ls-line {
    animation-name: rg-line-3-s3;
  }
  .golf-range:has(#range-step-3:checked) .range-steps .ls-4 {
    animation-name: rg-ls-4-s3;
  }
  .golf-range:has(#range-step-3:checked) .range-steps .ls-4 .ls-line {
    animation-name: rg-line-4-s3;
  }
  .golf-range:has(#range-step-4:checked) .gr-scrim {
    animation-name: rg-scrim-s4;
  }
  .golf-range:has(#range-step-4:checked) .gr-sheet {
    animation-name: rg-sheet-s4;
  }
  .golf-range:has(#range-step-4:checked) .sr-window img {
    animation-name: rg-frames-s4;
  }
  .golf-range:has(#range-step-4:checked) .gr-analysis {
    animation-name: rg-analysis-s4;
  }
  .golf-range:has(#range-step-4:checked) .gr-bag {
    animation-name: rg-bag-s4;
  }
  .golf-range:has(#range-step-4:checked) .sc-swings {
    animation-name: rg-card-1-s4;
  }
  .golf-range:has(#range-step-4:checked) .sc-tempo {
    animation-name: rg-card-2-s4;
  }
  .golf-range:has(#range-step-4:checked) .sc-analysis {
    animation-name: rg-card-3-s4;
  }
  .golf-range:has(#range-step-4:checked) .sc-new {
    animation-name: rg-land-s4;
  }
  .golf-range:has(#range-step-4:checked) .sc-new .sc-dot {
    animation-name: rg-dot-s4;
  }
  .golf-range:has(#range-step-4:checked) .sc-reel {
    animation-name: rg-tick-s4;
  }
  .golf-range:has(#range-step-4:checked) .sc-back {
    animation-name: rg-back-s4;
  }
  .golf-range:has(#range-step-4:checked) .sc-down {
    animation-name: rg-down-s4;
  }
  .golf-range:has(#range-step-4:checked) .sc-figure {
    animation-name: rg-ratio-s4;
  }
  .golf-range:has(#range-step-4:checked) .sc-parts span:first-child b {
    animation-name: rg-top-s4;
  }
  .golf-range:has(#range-step-4:checked) .sc-parts span + span b {
    animation-name: rg-impact-s4;
  }
  .golf-range:has(#range-step-4:checked) .sa-steps li {
    animation-name: rg-step-s4;
  }
  .golf-range:has(#range-step-4:checked) .sa-steps li:nth-child(2) {
    animation-name: rg-step-s4;
  }
  .golf-range:has(#range-step-4:checked) .sa-steps li:nth-child(3) {
    animation-name: rg-step-s4;
  }
  .golf-range:has(#range-step-4:checked) .lw-2 {
    animation-name: rg-watch-2-s4;
  }
  .golf-range:has(#range-step-4:checked) .lw-3 {
    animation-name: rg-watch-3-s4;
  }
  .golf-range:has(#range-step-4:checked) .range-steps .ls-1 {
    animation-name: rg-ls-1-s4;
  }
  .golf-range:has(#range-step-4:checked) .range-steps .ls-1 .ls-line {
    animation-name: rg-line-1-s4;
  }
  .golf-range:has(#range-step-4:checked) .range-steps .ls-2 {
    animation-name: rg-ls-2-s4;
  }
  .golf-range:has(#range-step-4:checked) .range-steps .ls-2 .ls-line {
    animation-name: rg-line-2-s4;
  }
  .golf-range:has(#range-step-4:checked) .range-steps .ls-3 {
    animation-name: rg-ls-3-s4;
  }
  .golf-range:has(#range-step-4:checked) .range-steps .ls-3 .ls-line {
    animation-name: rg-line-3-s4;
  }
  .golf-range:has(#range-step-4:checked) .range-steps .ls-4 {
    animation-name: rg-ls-4-s4;
  }
  .golf-range:has(#range-step-4:checked) .range-steps .ls-4 .ls-line {
    animation-name: rg-line-4-s4;
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .gr-scrim {
    animation-delay: var(--seek);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .gr-sheet {
    animation-delay: var(--seek);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .sr-window img {
    animation-delay: var(--seek);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .gr-analysis {
    animation-delay: var(--seek);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .gr-bag {
    animation-delay: var(--seek);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .sc-swings {
    animation-delay: var(--seek);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .sc-tempo {
    animation-delay: var(--seek);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .sc-analysis {
    animation-delay: var(--seek);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .sc-new {
    animation-delay: var(--seek);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .sc-new .sc-dot {
    animation-delay: var(--seek);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .sc-reel {
    animation-delay: var(--seek);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .sc-back {
    animation-delay: var(--seek);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .sc-down {
    animation-delay: var(--seek);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .sc-figure {
    animation-delay: var(--seek);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .sc-parts span:first-child b {
    animation-delay: var(--seek);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .sc-parts span + span b {
    animation-delay: var(--seek);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .sa-steps li {
    animation-delay: var(--seek);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .sa-steps li:nth-child(2) {
    animation-delay: calc(var(--seek) + -19s);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .sa-steps li:nth-child(3) {
    animation-delay: calc(var(--seek) + -18s);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .lw-2 {
    animation-delay: var(--seek);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .lw-3 {
    animation-delay: var(--seek);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .range-steps .ls-1 {
    animation-delay: var(--seek);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .range-steps .ls-1 .ls-line {
    animation-delay: var(--seek);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .range-steps .ls-2 {
    animation-delay: var(--seek);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .range-steps .ls-2 .ls-line {
    animation-delay: var(--seek);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .range-steps .ls-3 {
    animation-delay: var(--seek);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .range-steps .ls-3 .ls-line {
    animation-delay: var(--seek);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .range-steps .ls-4 {
    animation-delay: var(--seek);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .range-steps .ls-4 .ls-line {
    animation-delay: var(--seek);
  }
  .golf-course:has(#round-step-1:checked) .rf-2 {
    animation-name: rd-frame-2-s1;
  }
  .golf-course:has(#round-step-1:checked) .rf-3 {
    animation-name: rd-frame-3-s1;
  }
  .golf-course:has(#round-step-1:checked) .rf-4 {
    animation-name: rd-frame-4-s1;
  }
  .golf-course:has(#round-step-1:checked) .rf-5 {
    animation-name: rd-frame-5-s1;
  }
  .golf-course:has(#round-step-1:checked) .rf-6 {
    animation-name: rd-frame-6-s1;
  }
  .golf-course:has(#round-step-1:checked) .rf-7 {
    animation-name: rd-frame-7-s1;
  }
  .golf-course:has(#round-step-1:checked) .rf-8 {
    animation-name: rd-frame-8-s1;
  }
  .golf-course:has(#round-step-1:checked) .rc-card {
    animation-name: rd-grow-s1;
  }
  .golf-course:has(#round-step-1:checked) .hm-2 {
    animation-name: rd-map-2-s1;
  }
  .golf-course:has(#round-step-1:checked) .hm-3 {
    animation-name: rd-map-3-s1;
  }
  .golf-course:has(#round-step-1:checked) .rc-row-2 {
    animation-name: rd-row-2-s1;
  }
  .golf-course:has(#round-step-1:checked) .rc-dist {
    animation-name: rd-dist-s1;
  }
  .golf-course:has(#round-step-1:checked) .rc-shots {
    animation-name: rd-shots-s1;
  }
  .golf-course:has(#round-step-1:checked) .rc-gps {
    animation-name: rd-gps-s1;
  }
  .golf-course:has(#round-step-1:checked) .rc-lines {
    animation-name: rd-lines-s1;
  }
  .golf-course:has(#round-step-1:checked) .rc-turn {
    animation-name: rd-turn-s1;
  }
  .golf-course:has(#round-step-1:checked) .round-steps .ls-1 {
    animation-name: rd-ls-1-s1;
  }
  .golf-course:has(#round-step-1:checked) .round-steps .ls-1 .ls-line {
    animation-name: rd-line-1-s1;
  }
  .golf-course:has(#round-step-1:checked) .round-steps .ls-2 {
    animation-name: rd-ls-2-s1;
  }
  .golf-course:has(#round-step-1:checked) .round-steps .ls-2 .ls-line {
    animation-name: rd-line-2-s1;
  }
  .golf-course:has(#round-step-1:checked) .round-steps .ls-3 {
    animation-name: rd-ls-3-s1;
  }
  .golf-course:has(#round-step-1:checked) .round-steps .ls-3 .ls-line {
    animation-name: rd-line-3-s1;
  }
  .golf-course:has(#round-step-1:checked) .round-steps .ls-4 {
    animation-name: rd-ls-4-s1;
  }
  .golf-course:has(#round-step-1:checked) .round-steps .ls-4 .ls-line {
    animation-name: rd-line-4-s1;
  }
  .golf-course:has(#round-step-1:checked) .round-steps .ls-5 {
    animation-name: rd-ls-5-s1;
  }
  .golf-course:has(#round-step-1:checked) .round-steps .ls-5 .ls-line {
    animation-name: rd-line-5-s1;
  }
  .golf-course:has(#round-step-2:checked) .rf-2 {
    animation-name: rd-frame-2-s2;
  }
  .golf-course:has(#round-step-2:checked) .rf-3 {
    animation-name: rd-frame-3-s2;
  }
  .golf-course:has(#round-step-2:checked) .rf-4 {
    animation-name: rd-frame-4-s2;
  }
  .golf-course:has(#round-step-2:checked) .rf-5 {
    animation-name: rd-frame-5-s2;
  }
  .golf-course:has(#round-step-2:checked) .rf-6 {
    animation-name: rd-frame-6-s2;
  }
  .golf-course:has(#round-step-2:checked) .rf-7 {
    animation-name: rd-frame-7-s2;
  }
  .golf-course:has(#round-step-2:checked) .rf-8 {
    animation-name: rd-frame-8-s2;
  }
  .golf-course:has(#round-step-2:checked) .rc-card {
    animation-name: rd-grow-s2;
  }
  .golf-course:has(#round-step-2:checked) .hm-2 {
    animation-name: rd-map-2-s2;
  }
  .golf-course:has(#round-step-2:checked) .hm-3 {
    animation-name: rd-map-3-s2;
  }
  .golf-course:has(#round-step-2:checked) .rc-row-2 {
    animation-name: rd-row-2-s2;
  }
  .golf-course:has(#round-step-2:checked) .rc-dist {
    animation-name: rd-dist-s2;
  }
  .golf-course:has(#round-step-2:checked) .rc-shots {
    animation-name: rd-shots-s2;
  }
  .golf-course:has(#round-step-2:checked) .rc-gps {
    animation-name: rd-gps-s2;
  }
  .golf-course:has(#round-step-2:checked) .rc-lines {
    animation-name: rd-lines-s2;
  }
  .golf-course:has(#round-step-2:checked) .rc-turn {
    animation-name: rd-turn-s2;
  }
  .golf-course:has(#round-step-2:checked) .round-steps .ls-1 {
    animation-name: rd-ls-1-s2;
  }
  .golf-course:has(#round-step-2:checked) .round-steps .ls-1 .ls-line {
    animation-name: rd-line-1-s2;
  }
  .golf-course:has(#round-step-2:checked) .round-steps .ls-2 {
    animation-name: rd-ls-2-s2;
  }
  .golf-course:has(#round-step-2:checked) .round-steps .ls-2 .ls-line {
    animation-name: rd-line-2-s2;
  }
  .golf-course:has(#round-step-2:checked) .round-steps .ls-3 {
    animation-name: rd-ls-3-s2;
  }
  .golf-course:has(#round-step-2:checked) .round-steps .ls-3 .ls-line {
    animation-name: rd-line-3-s2;
  }
  .golf-course:has(#round-step-2:checked) .round-steps .ls-4 {
    animation-name: rd-ls-4-s2;
  }
  .golf-course:has(#round-step-2:checked) .round-steps .ls-4 .ls-line {
    animation-name: rd-line-4-s2;
  }
  .golf-course:has(#round-step-2:checked) .round-steps .ls-5 {
    animation-name: rd-ls-5-s2;
  }
  .golf-course:has(#round-step-2:checked) .round-steps .ls-5 .ls-line {
    animation-name: rd-line-5-s2;
  }
  .golf-course:has(#round-step-3:checked) .rf-2 {
    animation-name: rd-frame-2-s3;
  }
  .golf-course:has(#round-step-3:checked) .rf-3 {
    animation-name: rd-frame-3-s3;
  }
  .golf-course:has(#round-step-3:checked) .rf-4 {
    animation-name: rd-frame-4-s3;
  }
  .golf-course:has(#round-step-3:checked) .rf-5 {
    animation-name: rd-frame-5-s3;
  }
  .golf-course:has(#round-step-3:checked) .rf-6 {
    animation-name: rd-frame-6-s3;
  }
  .golf-course:has(#round-step-3:checked) .rf-7 {
    animation-name: rd-frame-7-s3;
  }
  .golf-course:has(#round-step-3:checked) .rf-8 {
    animation-name: rd-frame-8-s3;
  }
  .golf-course:has(#round-step-3:checked) .rc-card {
    animation-name: rd-grow-s3;
  }
  .golf-course:has(#round-step-3:checked) .hm-2 {
    animation-name: rd-map-2-s3;
  }
  .golf-course:has(#round-step-3:checked) .hm-3 {
    animation-name: rd-map-3-s3;
  }
  .golf-course:has(#round-step-3:checked) .rc-row-2 {
    animation-name: rd-row-2-s3;
  }
  .golf-course:has(#round-step-3:checked) .rc-dist {
    animation-name: rd-dist-s3;
  }
  .golf-course:has(#round-step-3:checked) .rc-shots {
    animation-name: rd-shots-s3;
  }
  .golf-course:has(#round-step-3:checked) .rc-gps {
    animation-name: rd-gps-s3;
  }
  .golf-course:has(#round-step-3:checked) .rc-lines {
    animation-name: rd-lines-s3;
  }
  .golf-course:has(#round-step-3:checked) .rc-turn {
    animation-name: rd-turn-s3;
  }
  .golf-course:has(#round-step-3:checked) .round-steps .ls-1 {
    animation-name: rd-ls-1-s3;
  }
  .golf-course:has(#round-step-3:checked) .round-steps .ls-1 .ls-line {
    animation-name: rd-line-1-s3;
  }
  .golf-course:has(#round-step-3:checked) .round-steps .ls-2 {
    animation-name: rd-ls-2-s3;
  }
  .golf-course:has(#round-step-3:checked) .round-steps .ls-2 .ls-line {
    animation-name: rd-line-2-s3;
  }
  .golf-course:has(#round-step-3:checked) .round-steps .ls-3 {
    animation-name: rd-ls-3-s3;
  }
  .golf-course:has(#round-step-3:checked) .round-steps .ls-3 .ls-line {
    animation-name: rd-line-3-s3;
  }
  .golf-course:has(#round-step-3:checked) .round-steps .ls-4 {
    animation-name: rd-ls-4-s3;
  }
  .golf-course:has(#round-step-3:checked) .round-steps .ls-4 .ls-line {
    animation-name: rd-line-4-s3;
  }
  .golf-course:has(#round-step-3:checked) .round-steps .ls-5 {
    animation-name: rd-ls-5-s3;
  }
  .golf-course:has(#round-step-3:checked) .round-steps .ls-5 .ls-line {
    animation-name: rd-line-5-s3;
  }
  .golf-course:has(#round-step-4:checked) .rf-2 {
    animation-name: rd-frame-2-s4;
  }
  .golf-course:has(#round-step-4:checked) .rf-3 {
    animation-name: rd-frame-3-s4;
  }
  .golf-course:has(#round-step-4:checked) .rf-4 {
    animation-name: rd-frame-4-s4;
  }
  .golf-course:has(#round-step-4:checked) .rf-5 {
    animation-name: rd-frame-5-s4;
  }
  .golf-course:has(#round-step-4:checked) .rf-6 {
    animation-name: rd-frame-6-s4;
  }
  .golf-course:has(#round-step-4:checked) .rf-7 {
    animation-name: rd-frame-7-s4;
  }
  .golf-course:has(#round-step-4:checked) .rf-8 {
    animation-name: rd-frame-8-s4;
  }
  .golf-course:has(#round-step-4:checked) .rc-card {
    animation-name: rd-grow-s4;
  }
  .golf-course:has(#round-step-4:checked) .hm-2 {
    animation-name: rd-map-2-s4;
  }
  .golf-course:has(#round-step-4:checked) .hm-3 {
    animation-name: rd-map-3-s4;
  }
  .golf-course:has(#round-step-4:checked) .rc-row-2 {
    animation-name: rd-row-2-s4;
  }
  .golf-course:has(#round-step-4:checked) .rc-dist {
    animation-name: rd-dist-s4;
  }
  .golf-course:has(#round-step-4:checked) .rc-shots {
    animation-name: rd-shots-s4;
  }
  .golf-course:has(#round-step-4:checked) .rc-gps {
    animation-name: rd-gps-s4;
  }
  .golf-course:has(#round-step-4:checked) .rc-lines {
    animation-name: rd-lines-s4;
  }
  .golf-course:has(#round-step-4:checked) .rc-turn {
    animation-name: rd-turn-s4;
  }
  .golf-course:has(#round-step-4:checked) .round-steps .ls-1 {
    animation-name: rd-ls-1-s4;
  }
  .golf-course:has(#round-step-4:checked) .round-steps .ls-1 .ls-line {
    animation-name: rd-line-1-s4;
  }
  .golf-course:has(#round-step-4:checked) .round-steps .ls-2 {
    animation-name: rd-ls-2-s4;
  }
  .golf-course:has(#round-step-4:checked) .round-steps .ls-2 .ls-line {
    animation-name: rd-line-2-s4;
  }
  .golf-course:has(#round-step-4:checked) .round-steps .ls-3 {
    animation-name: rd-ls-3-s4;
  }
  .golf-course:has(#round-step-4:checked) .round-steps .ls-3 .ls-line {
    animation-name: rd-line-3-s4;
  }
  .golf-course:has(#round-step-4:checked) .round-steps .ls-4 {
    animation-name: rd-ls-4-s4;
  }
  .golf-course:has(#round-step-4:checked) .round-steps .ls-4 .ls-line {
    animation-name: rd-line-4-s4;
  }
  .golf-course:has(#round-step-4:checked) .round-steps .ls-5 {
    animation-name: rd-ls-5-s4;
  }
  .golf-course:has(#round-step-4:checked) .round-steps .ls-5 .ls-line {
    animation-name: rd-line-5-s4;
  }
  .golf-course:has(#round-step-5:checked) .rf-2 {
    animation-name: rd-frame-2-s5;
  }
  .golf-course:has(#round-step-5:checked) .rf-3 {
    animation-name: rd-frame-3-s5;
  }
  .golf-course:has(#round-step-5:checked) .rf-4 {
    animation-name: rd-frame-4-s5;
  }
  .golf-course:has(#round-step-5:checked) .rf-5 {
    animation-name: rd-frame-5-s5;
  }
  .golf-course:has(#round-step-5:checked) .rf-6 {
    animation-name: rd-frame-6-s5;
  }
  .golf-course:has(#round-step-5:checked) .rf-7 {
    animation-name: rd-frame-7-s5;
  }
  .golf-course:has(#round-step-5:checked) .rf-8 {
    animation-name: rd-frame-8-s5;
  }
  .golf-course:has(#round-step-5:checked) .rc-card {
    animation-name: rd-grow-s5;
  }
  .golf-course:has(#round-step-5:checked) .hm-2 {
    animation-name: rd-map-2-s5;
  }
  .golf-course:has(#round-step-5:checked) .hm-3 {
    animation-name: rd-map-3-s5;
  }
  .golf-course:has(#round-step-5:checked) .rc-row-2 {
    animation-name: rd-row-2-s5;
  }
  .golf-course:has(#round-step-5:checked) .rc-dist {
    animation-name: rd-dist-s5;
  }
  .golf-course:has(#round-step-5:checked) .rc-shots {
    animation-name: rd-shots-s5;
  }
  .golf-course:has(#round-step-5:checked) .rc-gps {
    animation-name: rd-gps-s5;
  }
  .golf-course:has(#round-step-5:checked) .rc-lines {
    animation-name: rd-lines-s5;
  }
  .golf-course:has(#round-step-5:checked) .rc-turn {
    animation-name: rd-turn-s5;
  }
  .golf-course:has(#round-step-5:checked) .round-steps .ls-1 {
    animation-name: rd-ls-1-s5;
  }
  .golf-course:has(#round-step-5:checked) .round-steps .ls-1 .ls-line {
    animation-name: rd-line-1-s5;
  }
  .golf-course:has(#round-step-5:checked) .round-steps .ls-2 {
    animation-name: rd-ls-2-s5;
  }
  .golf-course:has(#round-step-5:checked) .round-steps .ls-2 .ls-line {
    animation-name: rd-line-2-s5;
  }
  .golf-course:has(#round-step-5:checked) .round-steps .ls-3 {
    animation-name: rd-ls-3-s5;
  }
  .golf-course:has(#round-step-5:checked) .round-steps .ls-3 .ls-line {
    animation-name: rd-line-3-s5;
  }
  .golf-course:has(#round-step-5:checked) .round-steps .ls-4 {
    animation-name: rd-ls-4-s5;
  }
  .golf-course:has(#round-step-5:checked) .round-steps .ls-4 .ls-line {
    animation-name: rd-line-4-s5;
  }
  .golf-course:has(#round-step-5:checked) .round-steps .ls-5 {
    animation-name: rd-ls-5-s5;
  }
  .golf-course:has(#round-step-5:checked) .round-steps .ls-5 .ls-line {
    animation-name: rd-line-5-s5;
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .rf-2 {
    animation-delay: var(--seek);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .rf-3 {
    animation-delay: var(--seek);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .rf-4 {
    animation-delay: var(--seek);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .rf-5 {
    animation-delay: var(--seek);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .rf-6 {
    animation-delay: var(--seek);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .rf-7 {
    animation-delay: var(--seek);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .rf-8 {
    animation-delay: var(--seek);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .rc-card {
    animation-delay: var(--seek);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .hm-2 {
    animation-delay: var(--seek);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .hm-3 {
    animation-delay: var(--seek);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .rc-row-2 {
    animation-delay: var(--seek);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .rc-dist {
    animation-delay: var(--seek);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .rc-shots {
    animation-delay: var(--seek);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .rc-gps {
    animation-delay: var(--seek);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .rc-lines {
    animation-delay: var(--seek);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .rc-turn {
    animation-delay: var(--seek);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .round-steps .ls-1 {
    animation-delay: var(--seek);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .round-steps .ls-1 .ls-line {
    animation-delay: var(--seek);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .round-steps .ls-2 {
    animation-delay: var(--seek);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .round-steps .ls-2 .ls-line {
    animation-delay: var(--seek);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .round-steps .ls-3 {
    animation-delay: var(--seek);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .round-steps .ls-3 .ls-line {
    animation-delay: var(--seek);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .round-steps .ls-4 {
    animation-delay: var(--seek);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .round-steps .ls-4 .ls-line {
    animation-delay: var(--seek);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .round-steps .ls-5 {
    animation-delay: var(--seek);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .round-steps .ls-5 .ls-line {
    animation-delay: var(--seek);
  }
  .lift-loop:has(#lift-step-1:checked) .lf-2 {
    animation-name: lf-frame-2-s1;
  }
  .lift-loop:has(#lift-step-1:checked) .lf-3 {
    animation-name: lf-frame-3-s1;
  }
  .lift-loop:has(#lift-step-1:checked) .lf-4 {
    animation-name: lf-frame-4-s1;
  }
  .lift-loop:has(#lift-step-1:checked) .lc-sets {
    animation-name: lf-sets-s1;
  }
  .lift-loop:has(#lift-step-1:checked) .lc-set {
    animation-name: lf-set-s1;
  }
  .lift-loop:has(#lift-step-1:checked) .lift-card .lc-lines {
    animation-name: lf-lines-s1;
  }
  .lift-loop:has(#lift-step-1:checked) .lw-2 {
    animation-name: lf-watch-2-s1;
  }
  .lift-loop:has(#lift-step-1:checked) .lw-3 {
    animation-name: lf-watch-3-s1;
  }
  .lift-loop:has(#lift-step-1:checked) .lw-4 {
    animation-name: lf-watch-4-s1;
  }
  .lift-loop:has(#lift-step-1:checked) .lift-steps .ls-1 {
    animation-name: lf-ls-1-s1;
  }
  .lift-loop:has(#lift-step-1:checked) .lift-steps .ls-1 .ls-line {
    animation-name: lf-line-1-s1;
  }
  .lift-loop:has(#lift-step-1:checked) .lift-steps .ls-2 {
    animation-name: lf-ls-2-s1;
  }
  .lift-loop:has(#lift-step-1:checked) .lift-steps .ls-2 .ls-line {
    animation-name: lf-line-2-s1;
  }
  .lift-loop:has(#lift-step-1:checked) .lift-steps .ls-3 {
    animation-name: lf-ls-3-s1;
  }
  .lift-loop:has(#lift-step-1:checked) .lift-steps .ls-3 .ls-line {
    animation-name: lf-line-3-s1;
  }
  .lift-loop:has(#lift-step-1:checked) .lift-steps .ls-4 {
    animation-name: lf-ls-4-s1;
  }
  .lift-loop:has(#lift-step-1:checked) .lift-steps .ls-4 .ls-line {
    animation-name: lf-line-4-s1;
  }
  .lift-loop:has(#lift-step-2:checked) .lf-2 {
    animation-name: lf-frame-2-s2;
  }
  .lift-loop:has(#lift-step-2:checked) .lf-3 {
    animation-name: lf-frame-3-s2;
  }
  .lift-loop:has(#lift-step-2:checked) .lf-4 {
    animation-name: lf-frame-4-s2;
  }
  .lift-loop:has(#lift-step-2:checked) .lc-sets {
    animation-name: lf-sets-s2;
  }
  .lift-loop:has(#lift-step-2:checked) .lc-set {
    animation-name: lf-set-s2;
  }
  .lift-loop:has(#lift-step-2:checked) .lift-card .lc-lines {
    animation-name: lf-lines-s2;
  }
  .lift-loop:has(#lift-step-2:checked) .lw-2 {
    animation-name: lf-watch-2-s2;
  }
  .lift-loop:has(#lift-step-2:checked) .lw-3 {
    animation-name: lf-watch-3-s2;
  }
  .lift-loop:has(#lift-step-2:checked) .lw-4 {
    animation-name: lf-watch-4-s2;
  }
  .lift-loop:has(#lift-step-2:checked) .lift-steps .ls-1 {
    animation-name: lf-ls-1-s2;
  }
  .lift-loop:has(#lift-step-2:checked) .lift-steps .ls-1 .ls-line {
    animation-name: lf-line-1-s2;
  }
  .lift-loop:has(#lift-step-2:checked) .lift-steps .ls-2 {
    animation-name: lf-ls-2-s2;
  }
  .lift-loop:has(#lift-step-2:checked) .lift-steps .ls-2 .ls-line {
    animation-name: lf-line-2-s2;
  }
  .lift-loop:has(#lift-step-2:checked) .lift-steps .ls-3 {
    animation-name: lf-ls-3-s2;
  }
  .lift-loop:has(#lift-step-2:checked) .lift-steps .ls-3 .ls-line {
    animation-name: lf-line-3-s2;
  }
  .lift-loop:has(#lift-step-2:checked) .lift-steps .ls-4 {
    animation-name: lf-ls-4-s2;
  }
  .lift-loop:has(#lift-step-2:checked) .lift-steps .ls-4 .ls-line {
    animation-name: lf-line-4-s2;
  }
  .lift-loop:has(#lift-step-3:checked) .lf-2 {
    animation-name: lf-frame-2-s3;
  }
  .lift-loop:has(#lift-step-3:checked) .lf-3 {
    animation-name: lf-frame-3-s3;
  }
  .lift-loop:has(#lift-step-3:checked) .lf-4 {
    animation-name: lf-frame-4-s3;
  }
  .lift-loop:has(#lift-step-3:checked) .lc-sets {
    animation-name: lf-sets-s3;
  }
  .lift-loop:has(#lift-step-3:checked) .lc-set {
    animation-name: lf-set-s3;
  }
  .lift-loop:has(#lift-step-3:checked) .lift-card .lc-lines {
    animation-name: lf-lines-s3;
  }
  .lift-loop:has(#lift-step-3:checked) .lw-2 {
    animation-name: lf-watch-2-s3;
  }
  .lift-loop:has(#lift-step-3:checked) .lw-3 {
    animation-name: lf-watch-3-s3;
  }
  .lift-loop:has(#lift-step-3:checked) .lw-4 {
    animation-name: lf-watch-4-s3;
  }
  .lift-loop:has(#lift-step-3:checked) .lift-steps .ls-1 {
    animation-name: lf-ls-1-s3;
  }
  .lift-loop:has(#lift-step-3:checked) .lift-steps .ls-1 .ls-line {
    animation-name: lf-line-1-s3;
  }
  .lift-loop:has(#lift-step-3:checked) .lift-steps .ls-2 {
    animation-name: lf-ls-2-s3;
  }
  .lift-loop:has(#lift-step-3:checked) .lift-steps .ls-2 .ls-line {
    animation-name: lf-line-2-s3;
  }
  .lift-loop:has(#lift-step-3:checked) .lift-steps .ls-3 {
    animation-name: lf-ls-3-s3;
  }
  .lift-loop:has(#lift-step-3:checked) .lift-steps .ls-3 .ls-line {
    animation-name: lf-line-3-s3;
  }
  .lift-loop:has(#lift-step-3:checked) .lift-steps .ls-4 {
    animation-name: lf-ls-4-s3;
  }
  .lift-loop:has(#lift-step-3:checked) .lift-steps .ls-4 .ls-line {
    animation-name: lf-line-4-s3;
  }
  .lift-loop:has(#lift-step-4:checked) .lf-2 {
    animation-name: lf-frame-2-s4;
  }
  .lift-loop:has(#lift-step-4:checked) .lf-3 {
    animation-name: lf-frame-3-s4;
  }
  .lift-loop:has(#lift-step-4:checked) .lf-4 {
    animation-name: lf-frame-4-s4;
  }
  .lift-loop:has(#lift-step-4:checked) .lc-sets {
    animation-name: lf-sets-s4;
  }
  .lift-loop:has(#lift-step-4:checked) .lc-set {
    animation-name: lf-set-s4;
  }
  .lift-loop:has(#lift-step-4:checked) .lift-card .lc-lines {
    animation-name: lf-lines-s4;
  }
  .lift-loop:has(#lift-step-4:checked) .lw-2 {
    animation-name: lf-watch-2-s4;
  }
  .lift-loop:has(#lift-step-4:checked) .lw-3 {
    animation-name: lf-watch-3-s4;
  }
  .lift-loop:has(#lift-step-4:checked) .lw-4 {
    animation-name: lf-watch-4-s4;
  }
  .lift-loop:has(#lift-step-4:checked) .lift-steps .ls-1 {
    animation-name: lf-ls-1-s4;
  }
  .lift-loop:has(#lift-step-4:checked) .lift-steps .ls-1 .ls-line {
    animation-name: lf-line-1-s4;
  }
  .lift-loop:has(#lift-step-4:checked) .lift-steps .ls-2 {
    animation-name: lf-ls-2-s4;
  }
  .lift-loop:has(#lift-step-4:checked) .lift-steps .ls-2 .ls-line {
    animation-name: lf-line-2-s4;
  }
  .lift-loop:has(#lift-step-4:checked) .lift-steps .ls-3 {
    animation-name: lf-ls-3-s4;
  }
  .lift-loop:has(#lift-step-4:checked) .lift-steps .ls-3 .ls-line {
    animation-name: lf-line-3-s4;
  }
  .lift-loop:has(#lift-step-4:checked) .lift-steps .ls-4 {
    animation-name: lf-ls-4-s4;
  }
  .lift-loop:has(#lift-step-4:checked) .lift-steps .ls-4 .ls-line {
    animation-name: lf-line-4-s4;
  }
  .lift-loop:has(.ls-pick:checked, .ls-pick-again:checked) .lf-2 {
    animation-delay: var(--seek);
  }
  .lift-loop:has(.ls-pick:checked, .ls-pick-again:checked) .lf-3 {
    animation-delay: var(--seek);
  }
  .lift-loop:has(.ls-pick:checked, .ls-pick-again:checked) .lf-4 {
    animation-delay: var(--seek);
  }
  .lift-loop:has(.ls-pick:checked, .ls-pick-again:checked) .lc-sets {
    animation-delay: var(--seek);
  }
  .lift-loop:has(.ls-pick:checked, .ls-pick-again:checked) .lc-set {
    animation-delay: var(--seek);
  }
  .lift-loop:has(.ls-pick:checked, .ls-pick-again:checked) .lift-card .lc-lines {
    animation-delay: var(--seek);
  }
  .lift-loop:has(.ls-pick:checked, .ls-pick-again:checked) .lw-2 {
    animation-delay: var(--seek);
  }
  .lift-loop:has(.ls-pick:checked, .ls-pick-again:checked) .lw-3 {
    animation-delay: var(--seek);
  }
  .lift-loop:has(.ls-pick:checked, .ls-pick-again:checked) .lw-4 {
    animation-delay: var(--seek);
  }
  .lift-loop:has(.ls-pick:checked, .ls-pick-again:checked) .lift-steps .ls-1 {
    animation-delay: var(--seek);
  }
  .lift-loop:has(.ls-pick:checked, .ls-pick-again:checked) .lift-steps .ls-1 .ls-line {
    animation-delay: var(--seek);
  }
  .lift-loop:has(.ls-pick:checked, .ls-pick-again:checked) .lift-steps .ls-2 {
    animation-delay: var(--seek);
  }
  .lift-loop:has(.ls-pick:checked, .ls-pick-again:checked) .lift-steps .ls-2 .ls-line {
    animation-delay: var(--seek);
  }
  .lift-loop:has(.ls-pick:checked, .ls-pick-again:checked) .lift-steps .ls-3 {
    animation-delay: var(--seek);
  }
  .lift-loop:has(.ls-pick:checked, .ls-pick-again:checked) .lift-steps .ls-3 .ls-line {
    animation-delay: var(--seek);
  }
  .lift-loop:has(.ls-pick:checked, .ls-pick-again:checked) .lift-steps .ls-4 {
    animation-delay: var(--seek);
  }
  .lift-loop:has(.ls-pick:checked, .ls-pick-again:checked) .lift-steps .ls-4 .ls-line {
    animation-delay: var(--seek);
  }
  .run-loop:has(#run-step-1:checked) .rn-2 {
    animation-name: rn-frame-2-s1;
  }
  .run-loop:has(#run-step-1:checked) .rn-3 {
    animation-name: rn-frame-3-s1;
  }
  .run-loop:has(#run-step-1:checked) .rn-4 {
    animation-name: rn-frame-4-s1;
  }
  .run-loop:has(#run-step-1:checked) .rp-view {
    animation-name: rn-page-s1;
  }
  .run-loop:has(#run-step-1:checked) .rp-page {
    animation-name: rn-scroll-s1;
  }
  .run-loop:has(#run-step-1:checked) .rp-route {
    animation-name: rn-route-s1;
  }
  .run-loop:has(#run-step-1:checked) .rp-lines {
    animation-name: rn-lines-s1;
  }
  .run-loop:has(#run-step-1:checked) .lc-distance {
    animation-name: rn-distance-s1;
  }
  .run-loop:has(#run-step-1:checked) .lc-pace {
    animation-name: rn-pace-s1;
  }
  .run-loop:has(#run-step-1:checked) .run-card .form-tiles div {
    animation-name: rn-form-s1;
  }
  .run-loop:has(#run-step-1:checked) .run-card .form-tiles div:nth-child(2) {
    animation-name: rn-form-s1;
  }
  .run-loop:has(#run-step-1:checked) .run-card .form-tiles div:nth-child(3) {
    animation-name: rn-form-s1;
  }
  .run-loop:has(#run-step-1:checked) .lw-2 {
    animation-name: rn-watch-2-s1;
  }
  .run-loop:has(#run-step-1:checked) .lw-3 {
    animation-name: rn-watch-3-s1;
  }
  .run-loop:has(#run-step-1:checked) .run-steps .ls-1 {
    animation-name: rn-ls-1-s1;
  }
  .run-loop:has(#run-step-1:checked) .run-steps .ls-1 .ls-line {
    animation-name: rn-line-1-s1;
  }
  .run-loop:has(#run-step-1:checked) .run-steps .ls-2 {
    animation-name: rn-ls-2-s1;
  }
  .run-loop:has(#run-step-1:checked) .run-steps .ls-2 .ls-line {
    animation-name: rn-line-2-s1;
  }
  .run-loop:has(#run-step-1:checked) .run-steps .ls-3 {
    animation-name: rn-ls-3-s1;
  }
  .run-loop:has(#run-step-1:checked) .run-steps .ls-3 .ls-line {
    animation-name: rn-line-3-s1;
  }
  .run-loop:has(#run-step-1:checked) .run-steps .ls-4 {
    animation-name: rn-ls-4-s1;
  }
  .run-loop:has(#run-step-1:checked) .run-steps .ls-4 .ls-line {
    animation-name: rn-line-4-s1;
  }
  .run-loop:has(#run-step-2:checked) .rn-2 {
    animation-name: rn-frame-2-s2;
  }
  .run-loop:has(#run-step-2:checked) .rn-3 {
    animation-name: rn-frame-3-s2;
  }
  .run-loop:has(#run-step-2:checked) .rn-4 {
    animation-name: rn-frame-4-s2;
  }
  .run-loop:has(#run-step-2:checked) .rp-view {
    animation-name: rn-page-s2;
  }
  .run-loop:has(#run-step-2:checked) .rp-page {
    animation-name: rn-scroll-s2;
  }
  .run-loop:has(#run-step-2:checked) .rp-route {
    animation-name: rn-route-s2;
  }
  .run-loop:has(#run-step-2:checked) .rp-lines {
    animation-name: rn-lines-s2;
  }
  .run-loop:has(#run-step-2:checked) .lc-distance {
    animation-name: rn-distance-s2;
  }
  .run-loop:has(#run-step-2:checked) .lc-pace {
    animation-name: rn-pace-s2;
  }
  .run-loop:has(#run-step-2:checked) .run-card .form-tiles div {
    animation-name: rn-form-s2;
  }
  .run-loop:has(#run-step-2:checked) .run-card .form-tiles div:nth-child(2) {
    animation-name: rn-form-s2;
  }
  .run-loop:has(#run-step-2:checked) .run-card .form-tiles div:nth-child(3) {
    animation-name: rn-form-s2;
  }
  .run-loop:has(#run-step-2:checked) .lw-2 {
    animation-name: rn-watch-2-s2;
  }
  .run-loop:has(#run-step-2:checked) .lw-3 {
    animation-name: rn-watch-3-s2;
  }
  .run-loop:has(#run-step-2:checked) .run-steps .ls-1 {
    animation-name: rn-ls-1-s2;
  }
  .run-loop:has(#run-step-2:checked) .run-steps .ls-1 .ls-line {
    animation-name: rn-line-1-s2;
  }
  .run-loop:has(#run-step-2:checked) .run-steps .ls-2 {
    animation-name: rn-ls-2-s2;
  }
  .run-loop:has(#run-step-2:checked) .run-steps .ls-2 .ls-line {
    animation-name: rn-line-2-s2;
  }
  .run-loop:has(#run-step-2:checked) .run-steps .ls-3 {
    animation-name: rn-ls-3-s2;
  }
  .run-loop:has(#run-step-2:checked) .run-steps .ls-3 .ls-line {
    animation-name: rn-line-3-s2;
  }
  .run-loop:has(#run-step-2:checked) .run-steps .ls-4 {
    animation-name: rn-ls-4-s2;
  }
  .run-loop:has(#run-step-2:checked) .run-steps .ls-4 .ls-line {
    animation-name: rn-line-4-s2;
  }
  .run-loop:has(#run-step-3:checked) .rn-2 {
    animation-name: rn-frame-2-s3;
  }
  .run-loop:has(#run-step-3:checked) .rn-3 {
    animation-name: rn-frame-3-s3;
  }
  .run-loop:has(#run-step-3:checked) .rn-4 {
    animation-name: rn-frame-4-s3;
  }
  .run-loop:has(#run-step-3:checked) .rp-view {
    animation-name: rn-page-s3;
  }
  .run-loop:has(#run-step-3:checked) .rp-page {
    animation-name: rn-scroll-s3;
  }
  .run-loop:has(#run-step-3:checked) .rp-route {
    animation-name: rn-route-s3;
  }
  .run-loop:has(#run-step-3:checked) .rp-lines {
    animation-name: rn-lines-s3;
  }
  .run-loop:has(#run-step-3:checked) .lc-distance {
    animation-name: rn-distance-s3;
  }
  .run-loop:has(#run-step-3:checked) .lc-pace {
    animation-name: rn-pace-s3;
  }
  .run-loop:has(#run-step-3:checked) .run-card .form-tiles div {
    animation-name: rn-form-s3;
  }
  .run-loop:has(#run-step-3:checked) .run-card .form-tiles div:nth-child(2) {
    animation-name: rn-form-s3;
  }
  .run-loop:has(#run-step-3:checked) .run-card .form-tiles div:nth-child(3) {
    animation-name: rn-form-s3;
  }
  .run-loop:has(#run-step-3:checked) .lw-2 {
    animation-name: rn-watch-2-s3;
  }
  .run-loop:has(#run-step-3:checked) .lw-3 {
    animation-name: rn-watch-3-s3;
  }
  .run-loop:has(#run-step-3:checked) .run-steps .ls-1 {
    animation-name: rn-ls-1-s3;
  }
  .run-loop:has(#run-step-3:checked) .run-steps .ls-1 .ls-line {
    animation-name: rn-line-1-s3;
  }
  .run-loop:has(#run-step-3:checked) .run-steps .ls-2 {
    animation-name: rn-ls-2-s3;
  }
  .run-loop:has(#run-step-3:checked) .run-steps .ls-2 .ls-line {
    animation-name: rn-line-2-s3;
  }
  .run-loop:has(#run-step-3:checked) .run-steps .ls-3 {
    animation-name: rn-ls-3-s3;
  }
  .run-loop:has(#run-step-3:checked) .run-steps .ls-3 .ls-line {
    animation-name: rn-line-3-s3;
  }
  .run-loop:has(#run-step-3:checked) .run-steps .ls-4 {
    animation-name: rn-ls-4-s3;
  }
  .run-loop:has(#run-step-3:checked) .run-steps .ls-4 .ls-line {
    animation-name: rn-line-4-s3;
  }
  .run-loop:has(#run-step-4:checked) .rn-2 {
    animation-name: rn-frame-2-s4;
  }
  .run-loop:has(#run-step-4:checked) .rn-3 {
    animation-name: rn-frame-3-s4;
  }
  .run-loop:has(#run-step-4:checked) .rn-4 {
    animation-name: rn-frame-4-s4;
  }
  .run-loop:has(#run-step-4:checked) .rp-view {
    animation-name: rn-page-s4;
  }
  .run-loop:has(#run-step-4:checked) .rp-page {
    animation-name: rn-scroll-s4;
  }
  .run-loop:has(#run-step-4:checked) .rp-route {
    animation-name: rn-route-s4;
  }
  .run-loop:has(#run-step-4:checked) .rp-lines {
    animation-name: rn-lines-s4;
  }
  .run-loop:has(#run-step-4:checked) .lc-distance {
    animation-name: rn-distance-s4;
  }
  .run-loop:has(#run-step-4:checked) .lc-pace {
    animation-name: rn-pace-s4;
  }
  .run-loop:has(#run-step-4:checked) .run-card .form-tiles div {
    animation-name: rn-form-s4;
  }
  .run-loop:has(#run-step-4:checked) .run-card .form-tiles div:nth-child(2) {
    animation-name: rn-form-s4;
  }
  .run-loop:has(#run-step-4:checked) .run-card .form-tiles div:nth-child(3) {
    animation-name: rn-form-s4;
  }
  .run-loop:has(#run-step-4:checked) .lw-2 {
    animation-name: rn-watch-2-s4;
  }
  .run-loop:has(#run-step-4:checked) .lw-3 {
    animation-name: rn-watch-3-s4;
  }
  .run-loop:has(#run-step-4:checked) .run-steps .ls-1 {
    animation-name: rn-ls-1-s4;
  }
  .run-loop:has(#run-step-4:checked) .run-steps .ls-1 .ls-line {
    animation-name: rn-line-1-s4;
  }
  .run-loop:has(#run-step-4:checked) .run-steps .ls-2 {
    animation-name: rn-ls-2-s4;
  }
  .run-loop:has(#run-step-4:checked) .run-steps .ls-2 .ls-line {
    animation-name: rn-line-2-s4;
  }
  .run-loop:has(#run-step-4:checked) .run-steps .ls-3 {
    animation-name: rn-ls-3-s4;
  }
  .run-loop:has(#run-step-4:checked) .run-steps .ls-3 .ls-line {
    animation-name: rn-line-3-s4;
  }
  .run-loop:has(#run-step-4:checked) .run-steps .ls-4 {
    animation-name: rn-ls-4-s4;
  }
  .run-loop:has(#run-step-4:checked) .run-steps .ls-4 .ls-line {
    animation-name: rn-line-4-s4;
  }
  .run-loop:has(.ls-pick:checked, .ls-pick-again:checked) .rn-2 {
    animation-delay: var(--seek);
  }
  .run-loop:has(.ls-pick:checked, .ls-pick-again:checked) .rn-3 {
    animation-delay: var(--seek);
  }
  .run-loop:has(.ls-pick:checked, .ls-pick-again:checked) .rn-4 {
    animation-delay: var(--seek);
  }
  .run-loop:has(.ls-pick:checked, .ls-pick-again:checked) .rp-view {
    animation-delay: var(--seek);
  }
  .run-loop:has(.ls-pick:checked, .ls-pick-again:checked) .rp-page {
    animation-delay: var(--seek);
  }
  .run-loop:has(.ls-pick:checked, .ls-pick-again:checked) .rp-route {
    animation-delay: var(--seek);
  }
  .run-loop:has(.ls-pick:checked, .ls-pick-again:checked) .rp-lines {
    animation-delay: var(--seek);
  }
  .run-loop:has(.ls-pick:checked, .ls-pick-again:checked) .lc-distance {
    animation-delay: var(--seek);
  }
  .run-loop:has(.ls-pick:checked, .ls-pick-again:checked) .lc-pace {
    animation-delay: var(--seek);
  }
  .run-loop:has(.ls-pick:checked, .ls-pick-again:checked) .run-card .form-tiles div {
    animation-delay: var(--seek);
  }
  .run-loop:has(.ls-pick:checked, .ls-pick-again:checked) .run-card .form-tiles div:nth-child(2) {
    animation-delay: calc(var(--seek) + -23.75s);
  }
  .run-loop:has(.ls-pick:checked, .ls-pick-again:checked) .run-card .form-tiles div:nth-child(3) {
    animation-delay: calc(var(--seek) + -23.5s);
  }
  .run-loop:has(.ls-pick:checked, .ls-pick-again:checked) .lw-2 {
    animation-delay: var(--seek);
  }
  .run-loop:has(.ls-pick:checked, .ls-pick-again:checked) .lw-3 {
    animation-delay: var(--seek);
  }
  .run-loop:has(.ls-pick:checked, .ls-pick-again:checked) .run-steps .ls-1 {
    animation-delay: var(--seek);
  }
  .run-loop:has(.ls-pick:checked, .ls-pick-again:checked) .run-steps .ls-1 .ls-line {
    animation-delay: var(--seek);
  }
  .run-loop:has(.ls-pick:checked, .ls-pick-again:checked) .run-steps .ls-2 {
    animation-delay: var(--seek);
  }
  .run-loop:has(.ls-pick:checked, .ls-pick-again:checked) .run-steps .ls-2 .ls-line {
    animation-delay: var(--seek);
  }
  .run-loop:has(.ls-pick:checked, .ls-pick-again:checked) .run-steps .ls-3 {
    animation-delay: var(--seek);
  }
  .run-loop:has(.ls-pick:checked, .ls-pick-again:checked) .run-steps .ls-3 .ls-line {
    animation-delay: var(--seek);
  }
  .run-loop:has(.ls-pick:checked, .ls-pick-again:checked) .run-steps .ls-4 {
    animation-delay: var(--seek);
  }
  .run-loop:has(.ls-pick:checked, .ls-pick-again:checked) .run-steps .ls-4 .ls-line {
    animation-delay: var(--seek);
  }
  #racket:has(#racket-step-1:checked) .depth-phone {
    animation-name: depth-back-s1;
  }
  #racket:has(#racket-step-1:checked) .depth-card {
    animation-name: depth-front-s1;
  }
  #racket:has(#racket-step-1:checked) .depth-card .stroke-chips li {
    animation-name: chip-loop-s1;
  }
  #racket:has(#racket-step-1:checked) .depth-card .stroke-chips li:nth-child(2) {
    animation-name: chip-loop-s1;
  }
  #racket:has(#racket-step-1:checked) .depth-card .stroke-chips li:nth-child(3) {
    animation-name: chip-loop-s1;
  }
  #racket:has(#racket-step-1:checked) .depth-card .stroke-chips li:nth-child(4) {
    animation-name: chip-loop-s1;
  }
  #racket:has(#racket-step-1:checked) .depth-card .stroke-chips .fh {
    animation-name: chip-loop-s1, fh-glow-s1;
  }
  #racket:has(#racket-step-1:checked) .depth-card .stroke-chips li.fh:nth-child(2) {
    animation-name: chip-loop-s1, fh-glow-s1;
  }
  #racket:has(#racket-step-1:checked) .ss-scrim {
    animation-name: sheet-scrim-s1;
  }
  #racket:has(#racket-step-1:checked) .ss-replay img {
    animation-name: replay-frames-s1;
  }
  #racket:has(#racket-step-1:checked) .fh-reel {
    animation-name: fh-tick-s1;
  }
  #racket:has(#racket-step-1:checked) .rk-tennis {
    animation-name: rk-out-s1;
  }
  #racket:has(#racket-step-1:checked) .rk-pickleball {
    animation-name: rk-in-s1;
  }
  #racket:has(#racket-step-1:checked) .stroke-sheet.rk-tennis {
    animation-name: sheet-rise-s1, rk-out-s1;
  }
  #racket:has(#racket-step-1:checked) .stroke-sheet.rk-pickleball {
    animation-name: sheet-rise-s1, rk-in-s1;
  }
  #racket:has(#racket-step-1:checked) .rk-tennis .stroke-chips {
    animation-name: rk-chips-tennis-s1;
  }
  #racket:has(#racket-step-1:checked) .rk-pickleball .stroke-chips {
    animation-name: rk-chips-pickleball-s1;
  }
  #racket:has(#racket-step-1:checked) .eyebrow {
    animation-name: rk-tone-s1;
  }
  #racket:has(#racket-step-1:checked) .racket-steps .ls-1 {
    animation-name: rk-ls-1-s1;
  }
  #racket:has(#racket-step-1:checked) .racket-steps .ls-1 .ls-line {
    animation-name: rk-line-1-s1;
  }
  #racket:has(#racket-step-1:checked) .racket-steps .ls-2 {
    animation-name: rk-ls-2-s1;
  }
  #racket:has(#racket-step-1:checked) .racket-steps .ls-2 .ls-line {
    animation-name: rk-line-2-s1;
  }
  body:has(#racket-step-1:checked) .ground .rk-tennis {
    animation-name: rk-out-s1;
  }
  body:has(#racket-step-1:checked) .ground .rk-pickleball {
    animation-name: rk-in-s1;
  }
  #racket:has(#racket-step-2:checked) .depth-phone {
    animation-name: depth-back-s2;
  }
  #racket:has(#racket-step-2:checked) .depth-card {
    animation-name: depth-front-s2;
  }
  #racket:has(#racket-step-2:checked) .depth-card .stroke-chips li {
    animation-name: chip-loop-s2;
  }
  #racket:has(#racket-step-2:checked) .depth-card .stroke-chips li:nth-child(2) {
    animation-name: chip-loop-s2;
  }
  #racket:has(#racket-step-2:checked) .depth-card .stroke-chips li:nth-child(3) {
    animation-name: chip-loop-s2;
  }
  #racket:has(#racket-step-2:checked) .depth-card .stroke-chips li:nth-child(4) {
    animation-name: chip-loop-s2;
  }
  #racket:has(#racket-step-2:checked) .depth-card .stroke-chips .fh {
    animation-name: chip-loop-s2, fh-glow-s2;
  }
  #racket:has(#racket-step-2:checked) .depth-card .stroke-chips li.fh:nth-child(2) {
    animation-name: chip-loop-s2, fh-glow-s2;
  }
  #racket:has(#racket-step-2:checked) .ss-scrim {
    animation-name: sheet-scrim-s2;
  }
  #racket:has(#racket-step-2:checked) .ss-replay img {
    animation-name: replay-frames-s2;
  }
  #racket:has(#racket-step-2:checked) .fh-reel {
    animation-name: fh-tick-s2;
  }
  #racket:has(#racket-step-2:checked) .rk-tennis {
    animation-name: rk-out-s2;
  }
  #racket:has(#racket-step-2:checked) .rk-pickleball {
    animation-name: rk-in-s2;
  }
  #racket:has(#racket-step-2:checked) .stroke-sheet.rk-tennis {
    animation-name: sheet-rise-s2, rk-out-s2;
  }
  #racket:has(#racket-step-2:checked) .stroke-sheet.rk-pickleball {
    animation-name: sheet-rise-s2, rk-in-s2;
  }
  #racket:has(#racket-step-2:checked) .rk-tennis .stroke-chips {
    animation-name: rk-chips-tennis-s2;
  }
  #racket:has(#racket-step-2:checked) .rk-pickleball .stroke-chips {
    animation-name: rk-chips-pickleball-s2;
  }
  #racket:has(#racket-step-2:checked) .eyebrow {
    animation-name: rk-tone-s2;
  }
  #racket:has(#racket-step-2:checked) .racket-steps .ls-1 {
    animation-name: rk-ls-1-s2;
  }
  #racket:has(#racket-step-2:checked) .racket-steps .ls-1 .ls-line {
    animation-name: rk-line-1-s2;
  }
  #racket:has(#racket-step-2:checked) .racket-steps .ls-2 {
    animation-name: rk-ls-2-s2;
  }
  #racket:has(#racket-step-2:checked) .racket-steps .ls-2 .ls-line {
    animation-name: rk-line-2-s2;
  }
  body:has(#racket-step-2:checked) .ground .rk-tennis {
    animation-name: rk-out-s2;
  }
  body:has(#racket-step-2:checked) .ground .rk-pickleball {
    animation-name: rk-in-s2;
  }
  #racket:has(.ls-pick:checked, .ls-pick-again:checked) .depth-phone {
    animation-delay: var(--seek);
  }
  #racket:has(.ls-pick:checked, .ls-pick-again:checked) .depth-card {
    animation-delay: var(--seek);
  }
  #racket:has(.ls-pick:checked, .ls-pick-again:checked) .depth-card .stroke-chips li {
    animation-delay: var(--seek);
  }
  #racket:has(.ls-pick:checked, .ls-pick-again:checked) .depth-card .stroke-chips li:nth-child(2) {
    animation-delay: calc(var(--seek) + 0.35s);
  }
  #racket:has(.ls-pick:checked, .ls-pick-again:checked) .depth-card .stroke-chips li:nth-child(3) {
    animation-delay: calc(var(--seek) + 0.7s);
  }
  #racket:has(.ls-pick:checked, .ls-pick-again:checked) .depth-card .stroke-chips li:nth-child(4) {
    animation-delay: calc(var(--seek) + 1.05s);
  }
  #racket:has(.ls-pick:checked, .ls-pick-again:checked) .depth-card .stroke-chips .fh {
    animation-delay: var(--seek), var(--seek);
  }
  #racket:has(.ls-pick:checked, .ls-pick-again:checked) .depth-card .stroke-chips li.fh:nth-child(2) {
    animation-delay: calc(var(--seek) + 0.35s), calc(var(--seek) + 0s);
  }
  #racket:has(.ls-pick:checked, .ls-pick-again:checked) .ss-scrim {
    animation-delay: var(--seek);
  }
  #racket:has(.ls-pick:checked, .ls-pick-again:checked) .ss-replay img {
    animation-delay: var(--seek);
  }
  #racket:has(.ls-pick:checked, .ls-pick-again:checked) .fh-reel {
    animation-delay: var(--seek);
  }
  #racket:has(.ls-pick:checked, .ls-pick-again:checked) .rk-tennis {
    animation-delay: var(--seek);
  }
  #racket:has(.ls-pick:checked, .ls-pick-again:checked) .rk-pickleball {
    animation-delay: var(--seek);
  }
  #racket:has(.ls-pick:checked, .ls-pick-again:checked) .stroke-sheet.rk-tennis {
    animation-delay: var(--seek), var(--seek);
  }
  #racket:has(.ls-pick:checked, .ls-pick-again:checked) .stroke-sheet.rk-pickleball {
    animation-delay: var(--seek), var(--seek);
  }
  #racket:has(.ls-pick:checked, .ls-pick-again:checked) .rk-tennis .stroke-chips {
    animation-delay: var(--seek);
  }
  #racket:has(.ls-pick:checked, .ls-pick-again:checked) .rk-pickleball .stroke-chips {
    animation-delay: var(--seek);
  }
  #racket:has(.ls-pick:checked, .ls-pick-again:checked) .eyebrow {
    animation-delay: var(--seek);
  }
  #racket:has(.ls-pick:checked, .ls-pick-again:checked) .racket-steps .ls-1 {
    animation-delay: var(--seek);
  }
  #racket:has(.ls-pick:checked, .ls-pick-again:checked) .racket-steps .ls-1 .ls-line {
    animation-delay: var(--seek);
  }
  #racket:has(.ls-pick:checked, .ls-pick-again:checked) .racket-steps .ls-2 {
    animation-delay: var(--seek);
  }
  #racket:has(.ls-pick:checked, .ls-pick-again:checked) .racket-steps .ls-2 .ls-line {
    animation-delay: var(--seek);
  }
  body:has(#racket .ls-pick:checked, #racket .ls-pick-again:checked) .ground .rk-tennis {
    animation-delay: var(--seek);
  }
  body:has(#racket .ls-pick:checked, #racket .ls-pick-again:checked) .ground .rk-pickleball {
    animation-delay: var(--seek);
  }
  .hero:has(#hero-slide-1:checked) .cycle img {
    animation-name: screen-s1;
  }
  .hero:has(#hero-slide-1:checked) .cycle-key li {
    animation-name: screen-key-s1;
  }
  .hero:has(#hero-slide-1:checked) .hs {
    animation-name: hero-card-s1;
  }
  .hero:has(#hero-slide-1:checked) .tempo .back {
    animation-name: backswing-s1;
  }
  .hero:has(#hero-slide-1:checked) .tempo .down {
    animation-name: downswing-s1;
  }
  .hero:has(#hero-slide-1:checked) .trace mask path {
    animation-name: trace-s1;
  }
  .hero:has(#hero-slide-1:checked) .peak {
    animation-name: peak-s1;
  }
  .hero:has(#hero-slide-1:checked) .motion-body b {
    animation-name: detected-s1;
  }
  .hero:has(#hero-slide-1:checked) .stroke-chips li {
    animation-name: chip-s1;
  }
  .hero:has(#hero-slide-1:checked) .stroke-chips li:nth-child(2) {
    animation-name: chip-2-s1;
  }
  .hero:has(#hero-slide-1:checked) .stroke-chips li:nth-child(3) {
    animation-name: chip-3-s1;
  }
  .hero:has(#hero-slide-1:checked) .stroke-chips li:nth-child(4) {
    animation-name: chip-4-s1;
  }
  .hero:has(#hero-slide-1:checked) .target-bar i {
    animation-name: target-s1;
  }
  .hero:has(#hero-slide-1:checked) .ex-view {
    animation-name: ex-1-s1;
  }
  .hero:has(#hero-slide-1:checked) .ex-view:nth-child(2) {
    animation-name: ex-2-s1;
  }
  .hero:has(#hero-slide-2:checked) .cycle img {
    animation-name: screen-s2;
  }
  .hero:has(#hero-slide-2:checked) .cycle-key li {
    animation-name: screen-key-s2;
  }
  .hero:has(#hero-slide-2:checked) .hs {
    animation-name: hero-card-s2;
  }
  .hero:has(#hero-slide-2:checked) .tempo .back {
    animation-name: backswing-s2;
  }
  .hero:has(#hero-slide-2:checked) .tempo .down {
    animation-name: downswing-s2;
  }
  .hero:has(#hero-slide-2:checked) .trace mask path {
    animation-name: trace-s2;
  }
  .hero:has(#hero-slide-2:checked) .peak {
    animation-name: peak-s2;
  }
  .hero:has(#hero-slide-2:checked) .motion-body b {
    animation-name: detected-s2;
  }
  .hero:has(#hero-slide-2:checked) .stroke-chips li {
    animation-name: chip-s2;
  }
  .hero:has(#hero-slide-2:checked) .stroke-chips li:nth-child(2) {
    animation-name: chip-2-s2;
  }
  .hero:has(#hero-slide-2:checked) .stroke-chips li:nth-child(3) {
    animation-name: chip-3-s2;
  }
  .hero:has(#hero-slide-2:checked) .stroke-chips li:nth-child(4) {
    animation-name: chip-4-s2;
  }
  .hero:has(#hero-slide-2:checked) .target-bar i {
    animation-name: target-s2;
  }
  .hero:has(#hero-slide-2:checked) .ex-view {
    animation-name: ex-1-s2;
  }
  .hero:has(#hero-slide-2:checked) .ex-view:nth-child(2) {
    animation-name: ex-2-s2;
  }
  .hero:has(#hero-slide-3:checked) .cycle img {
    animation-name: screen-s3;
  }
  .hero:has(#hero-slide-3:checked) .cycle-key li {
    animation-name: screen-key-s3;
  }
  .hero:has(#hero-slide-3:checked) .hs {
    animation-name: hero-card-s3;
  }
  .hero:has(#hero-slide-3:checked) .tempo .back {
    animation-name: backswing-s3;
  }
  .hero:has(#hero-slide-3:checked) .tempo .down {
    animation-name: downswing-s3;
  }
  .hero:has(#hero-slide-3:checked) .trace mask path {
    animation-name: trace-s3;
  }
  .hero:has(#hero-slide-3:checked) .peak {
    animation-name: peak-s3;
  }
  .hero:has(#hero-slide-3:checked) .motion-body b {
    animation-name: detected-s3;
  }
  .hero:has(#hero-slide-3:checked) .stroke-chips li {
    animation-name: chip-s3;
  }
  .hero:has(#hero-slide-3:checked) .stroke-chips li:nth-child(2) {
    animation-name: chip-2-s3;
  }
  .hero:has(#hero-slide-3:checked) .stroke-chips li:nth-child(3) {
    animation-name: chip-3-s3;
  }
  .hero:has(#hero-slide-3:checked) .stroke-chips li:nth-child(4) {
    animation-name: chip-4-s3;
  }
  .hero:has(#hero-slide-3:checked) .target-bar i {
    animation-name: target-s3;
  }
  .hero:has(#hero-slide-3:checked) .ex-view {
    animation-name: ex-1-s3;
  }
  .hero:has(#hero-slide-3:checked) .ex-view:nth-child(2) {
    animation-name: ex-2-s3;
  }
  .hero:has(#hero-slide-4:checked) .cycle img {
    animation-name: screen-s4;
  }
  .hero:has(#hero-slide-4:checked) .cycle-key li {
    animation-name: screen-key-s4;
  }
  .hero:has(#hero-slide-4:checked) .hs {
    animation-name: hero-card-s4;
  }
  .hero:has(#hero-slide-4:checked) .tempo .back {
    animation-name: backswing-s4;
  }
  .hero:has(#hero-slide-4:checked) .tempo .down {
    animation-name: downswing-s4;
  }
  .hero:has(#hero-slide-4:checked) .trace mask path {
    animation-name: trace-s4;
  }
  .hero:has(#hero-slide-4:checked) .peak {
    animation-name: peak-s4;
  }
  .hero:has(#hero-slide-4:checked) .motion-body b {
    animation-name: detected-s4;
  }
  .hero:has(#hero-slide-4:checked) .stroke-chips li {
    animation-name: chip-s4;
  }
  .hero:has(#hero-slide-4:checked) .stroke-chips li:nth-child(2) {
    animation-name: chip-2-s4;
  }
  .hero:has(#hero-slide-4:checked) .stroke-chips li:nth-child(3) {
    animation-name: chip-3-s4;
  }
  .hero:has(#hero-slide-4:checked) .stroke-chips li:nth-child(4) {
    animation-name: chip-4-s4;
  }
  .hero:has(#hero-slide-4:checked) .target-bar i {
    animation-name: target-s4;
  }
  .hero:has(#hero-slide-4:checked) .ex-view {
    animation-name: ex-1-s4;
  }
  .hero:has(#hero-slide-4:checked) .ex-view:nth-child(2) {
    animation-name: ex-2-s4;
  }
  .hero:has(#hero-slide-5:checked) .cycle img {
    animation-name: screen-s5;
  }
  .hero:has(#hero-slide-5:checked) .cycle-key li {
    animation-name: screen-key-s5;
  }
  .hero:has(#hero-slide-5:checked) .hs {
    animation-name: hero-card-s5;
  }
  .hero:has(#hero-slide-5:checked) .tempo .back {
    animation-name: backswing-s5;
  }
  .hero:has(#hero-slide-5:checked) .tempo .down {
    animation-name: downswing-s5;
  }
  .hero:has(#hero-slide-5:checked) .trace mask path {
    animation-name: trace-s5;
  }
  .hero:has(#hero-slide-5:checked) .peak {
    animation-name: peak-s5;
  }
  .hero:has(#hero-slide-5:checked) .motion-body b {
    animation-name: detected-s5;
  }
  .hero:has(#hero-slide-5:checked) .stroke-chips li {
    animation-name: chip-s5;
  }
  .hero:has(#hero-slide-5:checked) .stroke-chips li:nth-child(2) {
    animation-name: chip-2-s5;
  }
  .hero:has(#hero-slide-5:checked) .stroke-chips li:nth-child(3) {
    animation-name: chip-3-s5;
  }
  .hero:has(#hero-slide-5:checked) .stroke-chips li:nth-child(4) {
    animation-name: chip-4-s5;
  }
  .hero:has(#hero-slide-5:checked) .target-bar i {
    animation-name: target-s5;
  }
  .hero:has(#hero-slide-5:checked) .ex-view {
    animation-name: ex-1-s5;
  }
  .hero:has(#hero-slide-5:checked) .ex-view:nth-child(2) {
    animation-name: ex-2-s5;
  }
  .hero:has(.ls-pick:checked, .ls-pick-again:checked) .cycle img {
    animation-delay: calc(var(--seek) + var(--d, 0s));
  }
  .hero:has(.ls-pick:checked, .ls-pick-again:checked) .cycle-key li {
    animation-delay: calc(var(--seek) + var(--d, 0s));
  }
  .hero:has(.ls-pick:checked, .ls-pick-again:checked) .hs {
    animation-delay: calc(var(--seek) + var(--d, 0s));
  }
  .hero:has(.ls-pick:checked, .ls-pick-again:checked) .tempo .back {
    animation-delay: calc(var(--seek) + var(--d, 0s));
  }
  .hero:has(.ls-pick:checked, .ls-pick-again:checked) .tempo .down {
    animation-delay: calc(var(--seek) + var(--d, 0s));
  }
  .hero:has(.ls-pick:checked, .ls-pick-again:checked) .trace mask path {
    animation-delay: calc(var(--seek) + var(--d, 0s));
  }
  .hero:has(.ls-pick:checked, .ls-pick-again:checked) .peak {
    animation-delay: calc(var(--seek) + var(--d, 0s));
  }
  .hero:has(.ls-pick:checked, .ls-pick-again:checked) .motion-body b {
    animation-delay: calc(var(--seek) + var(--d, 0s));
  }
  .hero:has(.ls-pick:checked, .ls-pick-again:checked) .stroke-chips li {
    animation-delay: calc(var(--seek) + var(--d, 0s));
  }
  .hero:has(.ls-pick:checked, .ls-pick-again:checked) .stroke-chips li:nth-child(2) {
    animation-delay: calc(var(--seek) + var(--d, 0s));
  }
  .hero:has(.ls-pick:checked, .ls-pick-again:checked) .stroke-chips li:nth-child(3) {
    animation-delay: calc(var(--seek) + var(--d, 0s));
  }
  .hero:has(.ls-pick:checked, .ls-pick-again:checked) .stroke-chips li:nth-child(4) {
    animation-delay: calc(var(--seek) + var(--d, 0s));
  }
  .hero:has(.ls-pick:checked, .ls-pick-again:checked) .target-bar i {
    animation-delay: calc(var(--seek) + var(--d, 0s));
  }
  .hero:has(.ls-pick:checked, .ls-pick-again:checked) .ex-view {
    animation-delay: calc(var(--seek) + var(--d, 0s));
  }
  .hero:has(.ls-pick:checked, .ls-pick-again:checked) .ex-view:nth-child(2) {
    animation-delay: calc(var(--seek) + var(--d, 0s));
  }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 861px) {
  
}
@media (prefers-reduced-motion: reduce) {
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .gr-scrim {
    animation: rg-scrim var(--range) paused;
    animation-delay: var(--still);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .gr-sheet {
    animation: rg-sheet var(--range) paused;
    animation-delay: var(--still);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .sr-window img {
    animation: rg-frames var(--range) paused;
    animation-delay: var(--still);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .gr-analysis {
    animation: rg-analysis var(--range) paused;
    animation-delay: var(--still);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .gr-bag {
    animation: rg-bag var(--range) paused;
    animation-delay: var(--still);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .sc-swings {
    animation: rg-card-1 var(--range) paused;
    animation-delay: var(--still);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .sc-tempo {
    animation: rg-card-2 var(--range) paused;
    animation-delay: var(--still);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .sc-analysis {
    animation: rg-card-3 var(--range) paused;
    animation-delay: var(--still);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .sc-new {
    animation: rg-land var(--range) paused;
    animation-delay: var(--still);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .sc-new .sc-dot {
    animation: rg-dot var(--range) paused;
    animation-delay: var(--still);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .sc-reel {
    animation: rg-tick var(--range) paused;
    animation-delay: var(--still);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .sc-back {
    animation: rg-back var(--range) paused;
    animation-delay: var(--still);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .sc-down {
    animation: rg-down var(--range) paused;
    animation-delay: var(--still);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .sc-figure {
    animation: rg-ratio var(--range) paused;
    animation-delay: var(--still);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .sc-parts span:first-child b {
    animation: rg-top var(--range) paused;
    animation-delay: var(--still);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .sc-parts span + span b {
    animation: rg-impact var(--range) paused;
    animation-delay: var(--still);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .sa-steps li {
    animation: rg-step var(--range) paused;
    animation-delay: var(--still);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .sa-steps li:nth-child(2) {
    animation: rg-step var(--range) paused;
    animation-delay: calc(var(--still) + -19s);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .sa-steps li:nth-child(3) {
    animation: rg-step var(--range) paused;
    animation-delay: calc(var(--still) + -18s);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .lw-2 {
    animation: rg-watch-2 var(--range) paused;
    animation-delay: var(--still);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .lw-3 {
    animation: rg-watch-3 var(--range) paused;
    animation-delay: var(--still);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .range-steps .ls-1 {
    animation: rg-ls-1 var(--range) paused;
    animation-delay: var(--still);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .range-steps .ls-1 .ls-line {
    animation: rg-line-1 var(--range) paused;
    animation-delay: var(--still);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .range-steps .ls-2 {
    animation: rg-ls-2 var(--range) paused;
    animation-delay: var(--still);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .range-steps .ls-2 .ls-line {
    animation: rg-line-2 var(--range) paused;
    animation-delay: var(--still);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .range-steps .ls-3 {
    animation: rg-ls-3 var(--range) paused;
    animation-delay: var(--still);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .range-steps .ls-3 .ls-line {
    animation: rg-line-3 var(--range) paused;
    animation-delay: var(--still);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .range-steps .ls-4 {
    animation: rg-ls-4 var(--range) paused;
    animation-delay: var(--still);
  }
  .golf-range:has(.ls-pick:checked, .ls-pick-again:checked) .range-steps .ls-4 .ls-line {
    animation: rg-line-4 var(--range) paused;
    animation-delay: var(--still);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .rf-2 {
    animation: rd-frame-2 var(--round) paused;
    animation-delay: var(--still);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .rf-3 {
    animation: rd-frame-3 var(--round) paused;
    animation-delay: var(--still);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .rf-4 {
    animation: rd-frame-4 var(--round) paused;
    animation-delay: var(--still);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .rf-5 {
    animation: rd-frame-5 var(--round) paused;
    animation-delay: var(--still);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .rf-6 {
    animation: rd-frame-6 var(--round) paused;
    animation-delay: var(--still);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .rf-7 {
    animation: rd-frame-7 var(--round) paused;
    animation-delay: var(--still);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .rf-8 {
    animation: rd-frame-8 var(--round) paused;
    animation-delay: var(--still);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .rc-card {
    animation: rd-grow var(--round) paused;
    animation-delay: var(--still);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .hm-2 {
    animation: rd-map-2 var(--round) paused;
    animation-delay: var(--still);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .hm-3 {
    animation: rd-map-3 var(--round) paused;
    animation-delay: var(--still);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .rc-row-2 {
    animation: rd-row-2 var(--round) paused;
    animation-delay: var(--still);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .rc-dist {
    animation: rd-dist var(--round) paused;
    animation-delay: var(--still);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .rc-shots {
    animation: rd-shots var(--round) paused;
    animation-delay: var(--still);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .rc-gps {
    animation: rd-gps var(--round) paused;
    animation-delay: var(--still);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .rc-lines {
    animation: rd-lines var(--round) paused;
    animation-delay: var(--still);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .rc-turn {
    animation: rd-turn var(--round) paused;
    animation-delay: var(--still);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .round-steps .ls-1 {
    animation: rd-ls-1 var(--round) paused;
    animation-delay: var(--still);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .round-steps .ls-1 .ls-line {
    animation: rd-line-1 var(--round) paused;
    animation-delay: var(--still);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .round-steps .ls-2 {
    animation: rd-ls-2 var(--round) paused;
    animation-delay: var(--still);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .round-steps .ls-2 .ls-line {
    animation: rd-line-2 var(--round) paused;
    animation-delay: var(--still);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .round-steps .ls-3 {
    animation: rd-ls-3 var(--round) paused;
    animation-delay: var(--still);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .round-steps .ls-3 .ls-line {
    animation: rd-line-3 var(--round) paused;
    animation-delay: var(--still);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .round-steps .ls-4 {
    animation: rd-ls-4 var(--round) paused;
    animation-delay: var(--still);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .round-steps .ls-4 .ls-line {
    animation: rd-line-4 var(--round) paused;
    animation-delay: var(--still);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .round-steps .ls-5 {
    animation: rd-ls-5 var(--round) paused;
    animation-delay: var(--still);
  }
  .golf-course:has(.ls-pick:checked, .ls-pick-again:checked) .round-steps .ls-5 .ls-line {
    animation: rd-line-5 var(--round) paused;
    animation-delay: var(--still);
  }
  .lift-loop:has(.ls-pick:checked, .ls-pick-again:checked) .lf-2 {
    animation: lf-frame-2 var(--lift) paused;
    animation-delay: var(--still);
  }
  .lift-loop:has(.ls-pick:checked, .ls-pick-again:checked) .lf-3 {
    animation: lf-frame-3 var(--lift) paused;
    animation-delay: var(--still);
  }
  .lift-loop:has(.ls-pick:checked, .ls-pick-again:checked) .lf-4 {
    animation: lf-frame-4 var(--lift) paused;
    animation-delay: var(--still);
  }
  .lift-loop:has(.ls-pick:checked, .ls-pick-again:checked) .lc-sets {
    animation: lf-sets var(--lift) paused;
    animation-delay: var(--still);
  }
  .lift-loop:has(.ls-pick:checked, .ls-pick-again:checked) .lc-set {
    animation: lf-set var(--lift) paused;
    animation-delay: var(--still);
  }
  .lift-loop:has(.ls-pick:checked, .ls-pick-again:checked) .lift-card .lc-lines {
    animation: lf-lines var(--lift) paused;
    animation-delay: var(--still);
  }
  .lift-loop:has(.ls-pick:checked, .ls-pick-again:checked) .lw-2 {
    animation: lf-watch-2 var(--lift) paused;
    animation-delay: var(--still);
  }
  .lift-loop:has(.ls-pick:checked, .ls-pick-again:checked) .lw-3 {
    animation: lf-watch-3 var(--lift) paused;
    animation-delay: var(--still);
  }
  .lift-loop:has(.ls-pick:checked, .ls-pick-again:checked) .lw-4 {
    animation: lf-watch-4 var(--lift) paused;
    animation-delay: var(--still);
  }
  .lift-loop:has(.ls-pick:checked, .ls-pick-again:checked) .lift-steps .ls-1 {
    animation: lf-ls-1 var(--lift) paused;
    animation-delay: var(--still);
  }
  .lift-loop:has(.ls-pick:checked, .ls-pick-again:checked) .lift-steps .ls-1 .ls-line {
    animation: lf-line-1 var(--lift) paused;
    animation-delay: var(--still);
  }
  .lift-loop:has(.ls-pick:checked, .ls-pick-again:checked) .lift-steps .ls-2 {
    animation: lf-ls-2 var(--lift) paused;
    animation-delay: var(--still);
  }
  .lift-loop:has(.ls-pick:checked, .ls-pick-again:checked) .lift-steps .ls-2 .ls-line {
    animation: lf-line-2 var(--lift) paused;
    animation-delay: var(--still);
  }
  .lift-loop:has(.ls-pick:checked, .ls-pick-again:checked) .lift-steps .ls-3 {
    animation: lf-ls-3 var(--lift) paused;
    animation-delay: var(--still);
  }
  .lift-loop:has(.ls-pick:checked, .ls-pick-again:checked) .lift-steps .ls-3 .ls-line {
    animation: lf-line-3 var(--lift) paused;
    animation-delay: var(--still);
  }
  .lift-loop:has(.ls-pick:checked, .ls-pick-again:checked) .lift-steps .ls-4 {
    animation: lf-ls-4 var(--lift) paused;
    animation-delay: var(--still);
  }
  .lift-loop:has(.ls-pick:checked, .ls-pick-again:checked) .lift-steps .ls-4 .ls-line {
    animation: lf-line-4 var(--lift) paused;
    animation-delay: var(--still);
  }
  .run-loop:has(.ls-pick:checked, .ls-pick-again:checked) .rn-2 {
    animation: rn-frame-2 var(--run-clock) paused;
    animation-delay: var(--still);
  }
  .run-loop:has(.ls-pick:checked, .ls-pick-again:checked) .rn-3 {
    animation: rn-frame-3 var(--run-clock) paused;
    animation-delay: var(--still);
  }
  .run-loop:has(.ls-pick:checked, .ls-pick-again:checked) .rn-4 {
    animation: rn-frame-4 var(--run-clock) paused;
    animation-delay: var(--still);
  }
  .run-loop:has(.ls-pick:checked, .ls-pick-again:checked) .rp-view {
    animation: rn-page var(--run-clock) paused;
    animation-delay: var(--still);
  }
  .run-loop:has(.ls-pick:checked, .ls-pick-again:checked) .rp-page {
    animation: rn-scroll var(--run-clock) paused;
    animation-delay: var(--still);
  }
  .run-loop:has(.ls-pick:checked, .ls-pick-again:checked) .rp-route {
    animation: rn-route var(--run-clock) paused;
    animation-delay: var(--still);
  }
  .run-loop:has(.ls-pick:checked, .ls-pick-again:checked) .rp-lines {
    animation: rn-lines var(--run-clock) paused;
    animation-delay: var(--still);
  }
  .run-loop:has(.ls-pick:checked, .ls-pick-again:checked) .lc-distance {
    animation: rn-distance var(--run-clock) paused;
    animation-delay: var(--still);
  }
  .run-loop:has(.ls-pick:checked, .ls-pick-again:checked) .lc-pace {
    animation: rn-pace var(--run-clock) paused;
    animation-delay: var(--still);
  }
  .run-loop:has(.ls-pick:checked, .ls-pick-again:checked) .run-card .form-tiles div {
    animation: rn-form var(--run-clock) paused;
    animation-delay: var(--still);
  }
  .run-loop:has(.ls-pick:checked, .ls-pick-again:checked) .run-card .form-tiles div:nth-child(2) {
    animation: rn-form var(--run-clock) paused;
    animation-delay: calc(var(--still) + -23.75s);
  }
  .run-loop:has(.ls-pick:checked, .ls-pick-again:checked) .run-card .form-tiles div:nth-child(3) {
    animation: rn-form var(--run-clock) paused;
    animation-delay: calc(var(--still) + -23.5s);
  }
  .run-loop:has(.ls-pick:checked, .ls-pick-again:checked) .lw-2 {
    animation: rn-watch-2 var(--run-clock) paused;
    animation-delay: var(--still);
  }
  .run-loop:has(.ls-pick:checked, .ls-pick-again:checked) .lw-3 {
    animation: rn-watch-3 var(--run-clock) paused;
    animation-delay: var(--still);
  }
  .run-loop:has(.ls-pick:checked, .ls-pick-again:checked) .run-steps .ls-1 {
    animation: rn-ls-1 var(--run-clock) paused;
    animation-delay: var(--still);
  }
  .run-loop:has(.ls-pick:checked, .ls-pick-again:checked) .run-steps .ls-1 .ls-line {
    animation: rn-line-1 var(--run-clock) paused;
    animation-delay: var(--still);
  }
  .run-loop:has(.ls-pick:checked, .ls-pick-again:checked) .run-steps .ls-2 {
    animation: rn-ls-2 var(--run-clock) paused;
    animation-delay: var(--still);
  }
  .run-loop:has(.ls-pick:checked, .ls-pick-again:checked) .run-steps .ls-2 .ls-line {
    animation: rn-line-2 var(--run-clock) paused;
    animation-delay: var(--still);
  }
  .run-loop:has(.ls-pick:checked, .ls-pick-again:checked) .run-steps .ls-3 {
    animation: rn-ls-3 var(--run-clock) paused;
    animation-delay: var(--still);
  }
  .run-loop:has(.ls-pick:checked, .ls-pick-again:checked) .run-steps .ls-3 .ls-line {
    animation: rn-line-3 var(--run-clock) paused;
    animation-delay: var(--still);
  }
  .run-loop:has(.ls-pick:checked, .ls-pick-again:checked) .run-steps .ls-4 {
    animation: rn-ls-4 var(--run-clock) paused;
    animation-delay: var(--still);
  }
  .run-loop:has(.ls-pick:checked, .ls-pick-again:checked) .run-steps .ls-4 .ls-line {
    animation: rn-line-4 var(--run-clock) paused;
    animation-delay: var(--still);
  }
  #racket:has(.ls-pick:checked, .ls-pick-again:checked) .depth-phone {
    animation: depth-back var(--loop) infinite paused;
    animation-delay: var(--still);
  }
  #racket:has(.ls-pick:checked, .ls-pick-again:checked) .depth-card {
    animation: depth-front var(--loop) infinite paused;
    animation-delay: var(--still);
  }
  #racket:has(.ls-pick:checked, .ls-pick-again:checked) .depth-card .stroke-chips li {
    animation: chip-loop var(--loop) infinite paused;
    animation-delay: var(--still);
  }
  #racket:has(.ls-pick:checked, .ls-pick-again:checked) .depth-card .stroke-chips li:nth-child(2) {
    animation: chip-loop var(--loop) infinite paused;
    animation-delay: calc(var(--still) + 0.35s);
  }
  #racket:has(.ls-pick:checked, .ls-pick-again:checked) .depth-card .stroke-chips li:nth-child(3) {
    animation: chip-loop var(--loop) infinite paused;
    animation-delay: calc(var(--still) + 0.7s);
  }
  #racket:has(.ls-pick:checked, .ls-pick-again:checked) .depth-card .stroke-chips li:nth-child(4) {
    animation: chip-loop var(--loop) infinite paused;
    animation-delay: calc(var(--still) + 1.05s);
  }
  #racket:has(.ls-pick:checked, .ls-pick-again:checked) .depth-card .stroke-chips .fh {
    animation: chip-loop var(--loop) infinite paused, fh-glow var(--loop) infinite paused;
    animation-delay: var(--still), var(--still);
  }
  #racket:has(.ls-pick:checked, .ls-pick-again:checked) .depth-card .stroke-chips li.fh:nth-child(2) {
    animation: chip-loop var(--loop) infinite paused, fh-glow var(--loop) infinite paused;
    animation-delay: calc(var(--still) + 0.35s), calc(var(--still) + 0s);
  }
  #racket:has(.ls-pick:checked, .ls-pick-again:checked) .ss-scrim {
    animation: sheet-scrim var(--loop) infinite paused;
    animation-delay: var(--still);
  }
  #racket:has(.ls-pick:checked, .ls-pick-again:checked) .ss-replay img {
    animation: replay-frames var(--loop) infinite paused;
    animation-delay: var(--still);
  }
  #racket:has(.ls-pick:checked, .ls-pick-again:checked) .fh-reel {
    animation: fh-tick var(--loop) infinite paused;
    animation-delay: var(--still);
  }
  #racket:has(.ls-pick:checked, .ls-pick-again:checked) .rk-tennis {
    animation: rk-out var(--cycle) paused;
    animation-delay: var(--still);
  }
  #racket:has(.ls-pick:checked, .ls-pick-again:checked) .rk-pickleball {
    animation: rk-in var(--cycle) paused;
    animation-delay: var(--still);
  }
  #racket:has(.ls-pick:checked, .ls-pick-again:checked) .stroke-sheet.rk-tennis {
    animation: sheet-rise var(--loop) infinite paused, rk-out var(--cycle) paused;
    animation-delay: var(--still), var(--still);
  }
  #racket:has(.ls-pick:checked, .ls-pick-again:checked) .stroke-sheet.rk-pickleball {
    animation: sheet-rise var(--loop) infinite paused, rk-in var(--cycle) paused;
    animation-delay: var(--still), var(--still);
  }
  #racket:has(.ls-pick:checked, .ls-pick-again:checked) .rk-tennis .stroke-chips {
    animation: rk-chips-tennis var(--cycle) paused;
    animation-delay: var(--still);
  }
  #racket:has(.ls-pick:checked, .ls-pick-again:checked) .rk-pickleball .stroke-chips {
    animation: rk-chips-pickleball var(--cycle) paused;
    animation-delay: var(--still);
  }
  #racket:has(.ls-pick:checked, .ls-pick-again:checked) .eyebrow {
    animation: rk-tone var(--cycle) paused;
    animation-delay: var(--still);
  }
  #racket:has(.ls-pick:checked, .ls-pick-again:checked) .racket-steps .ls-1 {
    animation: rk-ls-1 var(--cycle) paused;
    animation-delay: var(--still);
  }
  #racket:has(.ls-pick:checked, .ls-pick-again:checked) .racket-steps .ls-1 .ls-line {
    animation: rk-line-1 var(--cycle) paused;
    animation-delay: var(--still);
  }
  #racket:has(.ls-pick:checked, .ls-pick-again:checked) .racket-steps .ls-2 {
    animation: rk-ls-2 var(--cycle) paused;
    animation-delay: var(--still);
  }
  #racket:has(.ls-pick:checked, .ls-pick-again:checked) .racket-steps .ls-2 .ls-line {
    animation: rk-line-2 var(--cycle) paused;
    animation-delay: var(--still);
  }
  body:has(#racket .ls-pick:checked, #racket .ls-pick-again:checked) .ground .rk-tennis {
    animation: rk-out var(--cycle) paused;
    animation-delay: var(--still);
  }
  body:has(#racket .ls-pick:checked, #racket .ls-pick-again:checked) .ground .rk-pickleball {
    animation: rk-in var(--cycle) paused;
    animation-delay: var(--still);
  }
  .hero:has(.ls-pick:checked, .ls-pick-again:checked) .cycle img {
    animation: screen var(--hero) infinite paused;
    animation-delay: calc(var(--still) + var(--d, 0s));
  }
  .hero:has(.ls-pick:checked, .ls-pick-again:checked) .cycle-key li {
    animation: screen-key var(--hero) infinite paused;
    animation-delay: calc(var(--still) + var(--d, 0s));
  }
  .hero:has(.ls-pick:checked, .ls-pick-again:checked) .hs {
    animation: hero-card var(--hero) infinite paused;
    animation-delay: calc(var(--still) + var(--d, 0s));
  }
  .hero:has(.ls-pick:checked, .ls-pick-again:checked) .tempo .back {
    animation: backswing var(--hero) infinite paused;
    animation-delay: calc(var(--still) + var(--d, 0s));
  }
  .hero:has(.ls-pick:checked, .ls-pick-again:checked) .tempo .down {
    animation: downswing var(--hero) infinite paused;
    animation-delay: calc(var(--still) + var(--d, 0s));
  }
  .hero:has(.ls-pick:checked, .ls-pick-again:checked) .trace mask path {
    animation: trace var(--hero) infinite paused;
    animation-delay: calc(var(--still) + var(--d, 0s));
  }
  .hero:has(.ls-pick:checked, .ls-pick-again:checked) .peak {
    animation: peak var(--hero) infinite paused;
    animation-delay: calc(var(--still) + var(--d, 0s));
  }
  .hero:has(.ls-pick:checked, .ls-pick-again:checked) .motion-body b {
    animation: detected var(--hero) infinite paused;
    animation-delay: calc(var(--still) + var(--d, 0s));
  }
  .hero:has(.ls-pick:checked, .ls-pick-again:checked) .stroke-chips li {
    animation: chip var(--hero) infinite paused;
    animation-delay: calc(var(--still) + var(--d, 0s));
  }
  .hero:has(.ls-pick:checked, .ls-pick-again:checked) .stroke-chips li:nth-child(2) {
    animation: chip-2 var(--hero) infinite paused;
    animation-delay: calc(var(--still) + var(--d, 0s));
  }
  .hero:has(.ls-pick:checked, .ls-pick-again:checked) .stroke-chips li:nth-child(3) {
    animation: chip-3 var(--hero) infinite paused;
    animation-delay: calc(var(--still) + var(--d, 0s));
  }
  .hero:has(.ls-pick:checked, .ls-pick-again:checked) .stroke-chips li:nth-child(4) {
    animation: chip-4 var(--hero) infinite paused;
    animation-delay: calc(var(--still) + var(--d, 0s));
  }
  .hero:has(.ls-pick:checked, .ls-pick-again:checked) .target-bar i {
    animation: target var(--hero) infinite paused;
    animation-delay: calc(var(--still) + var(--d, 0s));
  }
}
@media (prefers-reduced-motion: reduce) and (min-width: 861px) {
  
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @container style(--inview: 0) {
      .golf-range :is(.gr-scrim, .gr-sheet, .sr-window img, .gr-analysis, .gr-bag, .sc-swings, .sc-tempo, .sc-analysis, .sc-new, .sc-new .sc-dot, .sc-reel, .sc-back, .sc-down, .sc-figure, .sc-parts span:first-child b, .sc-parts span + span b, .sa-steps li, .sa-steps li:nth-child(2), .sa-steps li:nth-child(3), .lw-2, .lw-3, .range-steps .ls-1, .range-steps .ls-1 .ls-line, .range-steps .ls-2, .range-steps .ls-2 .ls-line, .range-steps .ls-3, .range-steps .ls-3 .ls-line, .range-steps .ls-4, .range-steps .ls-4 .ls-line) {
        animation-name: none !important;
      }
      .golf-course :is(.rf-2, .rf-3, .rf-4, .rf-5, .rf-6, .rf-7, .rf-8, .rc-card, .hm-2, .hm-3, .rc-row-2, .rc-dist, .rc-shots, .rc-gps, .rc-lines, .rc-turn, .round-steps .ls-1, .round-steps .ls-1 .ls-line, .round-steps .ls-2, .round-steps .ls-2 .ls-line, .round-steps .ls-3, .round-steps .ls-3 .ls-line, .round-steps .ls-4, .round-steps .ls-4 .ls-line, .round-steps .ls-5, .round-steps .ls-5 .ls-line) {
        animation-name: none !important;
      }
      .lift-loop :is(.lf-2, .lf-3, .lf-4, .lc-sets, .lc-set, .lift-card .lc-lines, .lw-2, .lw-3, .lw-4, .lift-steps .ls-1, .lift-steps .ls-1 .ls-line, .lift-steps .ls-2, .lift-steps .ls-2 .ls-line, .lift-steps .ls-3, .lift-steps .ls-3 .ls-line, .lift-steps .ls-4, .lift-steps .ls-4 .ls-line) {
        animation-name: none !important;
      }
      .run-loop :is(.rn-2, .rn-3, .rn-4, .rp-view, .rp-page, .rp-route, .rp-lines, .lc-distance, .lc-pace, .run-card .form-tiles div, .run-card .form-tiles div:nth-child(2), .run-card .form-tiles div:nth-child(3), .lw-2, .lw-3, .run-steps .ls-1, .run-steps .ls-1 .ls-line, .run-steps .ls-2, .run-steps .ls-2 .ls-line, .run-steps .ls-3, .run-steps .ls-3 .ls-line, .run-steps .ls-4, .run-steps .ls-4 .ls-line) {
        animation-name: none !important;
      }
      #racket :is(.depth-phone, .depth-card, .depth-card .stroke-chips li, .depth-card .stroke-chips li:nth-child(2), .depth-card .stroke-chips li:nth-child(3), .depth-card .stroke-chips li:nth-child(4), .depth-card .stroke-chips .fh, .depth-card .stroke-chips li.fh:nth-child(2), .ss-scrim, .ss-replay img, .fh-reel, .rk-tennis, .rk-pickleball, .stroke-sheet.rk-tennis, .stroke-sheet.rk-pickleball, .rk-tennis .stroke-chips, .rk-pickleball .stroke-chips, .eyebrow, .racket-steps .ls-1, .racket-steps .ls-1 .ls-line, .racket-steps .ls-2, .racket-steps .ls-2 .ls-line),
      .ground .rk-tennis,
      .ground .rk-pickleball {
        animation-name: none !important;
      }
    }
  }
}