/**
 * Leap landing page.
 *
 * A product page, not a document: it opens on a claim and a product shot, and
 * every section sells one capability. Wide type scale, generous air, one
 * committed visual world (black with cherry blossom) painted explicitly so
 * nothing is inherited from the host.
 */

:root {
  --ink-900: #070506;
  --ink-850: #090708;
  --ink-800: #0b0809;
  --ink-700: #110c0f;
  --ink-600: #181113;
  --ink-500: #211719;
  --ink-400: #2d1f23;

  --blossom-100: #fce7ee;
  --blossom-200: #f7c7d8;
  --blossom-300: #f0a4bd;
  --blossom-400: #e67ba0;
  --blossom-500: #d2577f;
  --blossom-600: #a33c61;
  --blossom-700: #6d2641;

  --branch: #4a3338;
  --branch-dim: #2a1d21;

  --text: #f7eef1;
  --text-dim: #c9b6bc;
  --text-muted: #917e85;
  --text-faint: #5f5157;

  --team-blue: #5aa9e6;
  --cyan: #7fc4d8;
  --ok: #63c89a;
  --bad: #e2697a;

  --display: "Segoe UI Variable Display", "Segoe UI Semibold", "Segoe UI", system-ui, sans-serif;
  --body: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Cascadia Code", "Cascadia Mono", Consolas, ui-monospace, monospace;

  --shell: 1080px;
}

* { box-sizing: border-box; }

/**
 * The `hidden` attribute must win.
 *
 * The UA stylesheet implements it as `[hidden] { display: none }`, which any
 * class selector that sets `display` silently outranks — so an element like
 * `.cta-row { display: flex }` stayed visible however many times the script
 * set `.hidden = true`. That is how a signed-in visitor kept being shown the
 * sign-up buttons.
 */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink-900);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------------- atmosphere ---------------- */

.aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
  /* States up front that only the transform changes, so the blurred result is
     rasterised once instead of being re-derived as it moves. */
  will-change: transform;
}
.aurora-blob.a {
  width: 54vw; height: 44vw;
  top: -18vw; left: 50%;
  margin-left: -27vw;
  background: radial-gradient(circle, rgba(163, 60, 97, .62), transparent 68%);
  animation: drift-a 26s ease-in-out infinite alternate;
}
.aurora-blob.b {
  width: 38vw; height: 32vw;
  top: 2vw; right: -8vw;
  background: radial-gradient(circle, rgba(210, 87, 127, .36), transparent 70%);
  animation: drift-b 32s ease-in-out infinite alternate;
}
.aurora-blob.c {
  width: 42vw; height: 30vw;
  top: 44vw; left: -12vw;
  background: radial-gradient(circle, rgba(109, 38, 65, .46), transparent 72%);
  animation: drift-c 38s ease-in-out infinite alternate;
}

#petals {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* ---------------- top bar ---------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 16px 28px;
  /* No backdrop-filter here, on purpose. On a position: fixed bar it re-blurs
     whatever scrolls behind it on every single scroll frame — one of the most
     expensive things a page can ask a browser for — and through a gradient
     this opaque it was barely visible. The gradient alone does the separating,
     nudged up slightly to make up the difference. */
  background: linear-gradient(180deg, rgba(7, 5, 6, .94), rgba(7, 5, 6, .66) 70%, transparent);
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--text);
}
.topbar-mark { width: 24px; height: 24px; color: var(--blossom-300); flex: none; }
.topbar-mark svg { width: 100%; height: 100%; display: block; }
.topbar-name {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.025em;
}

.topbar-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 14px;
}
.topbar-nav > a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color .14s ease;
}
.topbar-nav > a:hover { color: var(--text); }
@media (max-width: 620px) { .topbar-nav > a { display: none; } }

/* ---------------- shared ---------------- */

main { position: relative; z-index: 3; }

section { max-width: var(--shell); margin: 0 auto; padding: 0 28px; }

.eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--blossom-500);
  margin: 0 0 16px;
}

.section-head { max-width: 46ch; margin: 0 0 42px; }
.section-head h2 {
  font-family: var(--display);
  font-size: clamp(27px, 4vw, 38px);
  font-weight: 600;
  letter-spacing: -.032em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

code {
  font-family: var(--mono);
  font-size: .86em;
  color: var(--blossom-200);
  overflow-wrap: anywhere;
}

/* ---------------- hero ---------------- */

.hero {
  text-align: center;
  padding-top: clamp(44px, 8vh, 86px);
  padding-bottom: 40px;
}

.hero .eyebrow { animation: settle .8s cubic-bezier(.2, .7, .2, 1) both; }

.headline {
  font-family: var(--display);
  font-size: clamp(48px, 9.2vw, 104px);
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: .95;
  margin: 0;
  animation: settle .9s cubic-bezier(.2, .7, .2, 1) .06s both;
}
.headline em {
  font-style: normal;
  background: linear-gradient(104deg, var(--blossom-100) 0%, var(--blossom-300) 38%, var(--blossom-500) 74%, var(--blossom-600) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* The maker's credit, up with the wordmark rather than buried in the footer. */
.credit {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 20px 0 0;
  animation: settle .9s cubic-bezier(.2, .7, .2, 1) .1s both;
}
.credit strong {
  font-weight: 400;
  color: var(--blossom-300);
}

.topbar-by {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blossom-500);
  margin-left: 2px;
  align-self: center;
}
@media (max-width: 520px) { .topbar-by { display: none; } }

.subhead {
  font-size: clamp(16px, 2vw, 19.5px);
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 54ch;
  margin: 26px auto 0;
  text-wrap: pretty;
  animation: settle .9s cubic-bezier(.2, .7, .2, 1) .14s both;
}

.hex {
  font-family: var(--mono);
  font-size: .82em;
  color: var(--text-faint);
  border: 1px solid var(--branch-dim);
  border-radius: 4px;
  padding: .1em .4em;
  white-space: nowrap;
}

/* ---------------- buttons ---------------- */

.cta-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 34px;
  animation: settle .9s cubic-bezier(.2, .7, .2, 1) .2s both;
}

.cta {
  font-family: var(--body);
  font-size: 15px;
  padding: 12px 23px;
  border-radius: 9px;
  border: 1px solid var(--branch);
  background: var(--ink-500);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform .14s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.cta:hover { background: var(--ink-400); border-color: var(--blossom-600); transform: translateY(-2px); }
.cta:active { transform: translateY(0); }
.cta:focus-visible { outline: 2px solid var(--blossom-400); outline-offset: 3px; }

.cta-primary {
  background: linear-gradient(176deg, var(--blossom-200), var(--blossom-500) 85%);
  border-color: var(--blossom-400);
  color: #2a0b16;
  font-weight: 650;
  box-shadow: 0 10px 30px -12px rgba(210, 87, 127, .85);
}
.cta-primary:hover {
  background: linear-gradient(176deg, var(--blossom-100), var(--blossom-400) 85%);
  border-color: var(--blossom-300);
  box-shadow: 0 16px 40px -14px rgba(230, 123, 160, .95);
}

.cta-arrow { transition: transform .16s ease; }
.cta:hover .cta-arrow { transform: translateX(3px); }

.cta-quiet { background: transparent; border-color: transparent; color: var(--text-muted); }
.cta-quiet:hover { background: var(--ink-600); color: var(--text); border-color: transparent; }

.cta-note {
  font-size: 13px;
  color: var(--text-faint);
  margin: 15px 0 0;
  min-height: 1.1em;
}

/* Compact variant for the top bar. */
.topbar-cta { display: inline-flex; align-items: center; gap: 8px; }
.topbar-cta .cta { padding: 8px 15px; font-size: 13.5px; border-radius: 7px; }
.topbar-cta .cta:hover { transform: none; }

/* Sign in sits beside Create account, quieter but still obviously a button —
   a bare text link next to a filled one reads as a footnote. */
.topbar-quiet { border-color: var(--branch-dim); }

/* Who you are signed in as. Monospace so a handle is unmistakably a handle. */
.topbar-who {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--blossom-300);
  padding: 0 2px;
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* On a phone the nav links are already hidden; keep the primary action and
   drop the secondary rather than letting two buttons wrap the bar. */
@media (max-width: 560px) {
  .topbar-quiet { display: none; }
  .topbar-who { display: none; }
}

/* ---------------- product shot ---------------- */

.shot {
  position: relative;
  margin: 58px auto 0;
  max-width: 920px;
  perspective: 1800px;
  animation: settle 1s cubic-bezier(.2, .7, .2, 1) .3s both;
}

.shot-glow {
  position: absolute;
  inset: 12% 8% -8%;
  background: radial-gradient(60% 50% at 50% 40%, rgba(210, 87, 127, .42), transparent 72%);
  filter: blur(54px);
  z-index: 0;
}

.window {
  position: relative;
  z-index: 1;
  text-align: left;
  background: linear-gradient(168deg, rgba(27, 19, 22, .96), rgba(9, 7, 8, .98));
  border: 1px solid var(--branch);
  border-radius: 13px;
  overflow: hidden;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, .03) inset,
    0 50px 110px -46px rgba(0, 0, 0, .95);
  transform: rotateX(5deg);
  transform-origin: 50% 0;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.shot:hover .window { transform: rotateX(0deg); }

.win-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--branch-dim);
  background: rgba(45, 31, 35, .4);
}
.win-dots { display: flex; gap: 6px; }
.win-dots i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--branch);
  display: block;
}
.win-dots i:first-child { background: var(--blossom-600); }
.win-title {
  font-size: 11.5px;
  color: var(--text-faint);
  font-family: var(--mono);
}

.win-body { display: grid; grid-template-columns: 158px minmax(0, 1fr); min-height: 268px; }

.win-side {
  border-right: 1px solid var(--branch-dim);
  padding: 14px 11px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.side-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  color: var(--text-muted);
  padding: 7px 10px;
  border-radius: 6px;
}
.side-item.is-on {
  background: var(--ink-500);
  color: var(--text);
  box-shadow: inset 2px 0 0 var(--blossom-400);
}
.side-item b { font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); font-weight: 400; }
.side-item b.pip {
  background: var(--blossom-300);
  color: #2a0b16;
  padding: 1px 6px;
  border-radius: 99px;
  font-weight: 600;
}

.win-main { padding: 14px 16px; min-width: 0; }

.win-search {
  font-size: 12.5px;
  color: var(--text-faint);
  background: var(--ink-800);
  border: 1px solid var(--branch-dim);
  border-radius: 7px;
  padding: 8px 11px;
  margin-bottom: 12px;
}

.win-rows { list-style: none; margin: 0; padding: 0; }
.win-rows li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px 44px;
  grid-template-areas: "title who score" "sub who score";
  gap: 0 12px;
  align-items: center;
  padding: 9px 10px;
  border-radius: 7px;
}
.win-rows li.is-new { background: rgba(163, 60, 97, .16); }

.r-title {
  grid-area: title;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.r-sub {
  grid-area: sub;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.r-who {
  grid-area: who;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-faint);
  text-align: right;
}
.r-who.is-leap { color: var(--cyan); }
.r-score {
  grid-area: score;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 620px) {
  .win-body { grid-template-columns: 1fr; }
  .win-side { display: none; }
  .win-rows li { grid-template-columns: minmax(0, 1fr) 44px; }
  .r-who { display: none; }
}

/* ---------------- stats ---------------- */

.stats {
  list-style: none;
  margin: 58px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--branch-dim);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 26px;
}
.stats li { display: flex; flex-direction: column; gap: 5px; align-items: center; }
.stat-n {
  font-family: var(--display);
  font-size: clamp(32px, 4.4vw, 44px);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--blossom-200);
  font-variant-numeric: tabular-nums;
}
.stat-l {
  font-size: 13px;
  color: var(--text-muted);
  max-width: 22ch;
  text-align: center;
  line-height: 1.45;
}

/* ---------------- the turn ---------------- */

.turn { padding-top: clamp(80px, 12vh, 130px); }

.turn-line {
  font-family: var(--display);
  font-size: clamp(22px, 3.4vw, 33px);
  font-weight: 600;
  letter-spacing: -.028em;
  line-height: 1.25;
  margin: 0 auto 40px;
  max-width: 34ch;
  text-align: center;
  text-wrap: balance;
  color: var(--text-dim);
}
.turn-line em { font-style: normal; color: var(--blossom-300); display: block; }

.flip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
}

.flip-side {
  background: rgba(17, 12, 15, .76);
  border: 1px solid var(--branch-dim);
  border-radius: 11px;
  padding: 18px 18px 16px;
  min-width: 0;
}
.flip-tag {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 13px;
}
.flip-side ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.flip-side li {
  font-family: var(--mono);
  font-size: 11.5px;
  overflow-wrap: anywhere;
}

.flip-before li { color: var(--text-faint); }
.flip-after {
  border-color: var(--blossom-700);
  background: linear-gradient(160deg, rgba(109, 38, 65, .3), rgba(17, 12, 15, .82));
}
.flip-after .flip-tag { color: var(--blossom-400); }
.flip-after li { color: var(--blossom-100); }

.flip-arrow {
  display: grid;
  place-items: center;
  color: var(--blossom-500);
  font-size: 20px;
}
.flip-arrow span { animation: nudge 2.4s ease-in-out infinite; }

@media (max-width: 680px) {
  .flip { grid-template-columns: 1fr; gap: 12px; }
  .flip-arrow { transform: rotate(90deg); padding: 4px 0; }
}

/* ---------------- features ---------------- */

.features { padding-top: clamp(90px, 13vh, 140px); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.card {
  position: relative;
  background: linear-gradient(168deg, rgba(27, 19, 22, .82), rgba(11, 8, 9, .9));
  border: 1px solid var(--branch-dim);
  border-radius: 13px;
  padding: 20px 21px 23px;
  overflow: hidden;
  transition: transform .2s cubic-bezier(.2, .7, .2, 1), border-color .2s ease, box-shadow .2s ease;
}
.card:hover {
  transform: translateY(-3px);
  border-color: var(--blossom-700);
  box-shadow: 0 22px 48px -28px rgba(0, 0, 0, .9);
}
.card-wide { grid-column: span 2; }
@media (max-width: 680px) { .card-wide { grid-column: span 1; } }

.card h3 {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.018em;
  margin: 0 0 9px;
  text-wrap: balance;
}
.card p {
  font-size: 14.5px;
  line-height: 1.64;
  color: var(--text-dim);
  margin: 0;
  max-width: 48ch;
}

/* little illustrative panels, one per card */
.card-art {
  height: 74px;
  margin: 0 0 18px;
  border-radius: 9px;
  background: var(--ink-850);
  border: 1px solid var(--branch-dim);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  font-family: var(--mono);
  font-size: 11.5px;
  overflow: hidden;
}

.art-send { justify-content: center; gap: 0; }
.send-from, .send-to {
  color: var(--text-dim);
  border: 1px solid var(--branch);
  border-radius: 99px;
  padding: 4px 13px;
  background: var(--ink-600);
  flex: none;
}
.send-to { color: var(--cyan); border-color: rgba(127, 196, 216, .4); }
.send-line {
  position: relative;
  flex: 1;
  max-width: 180px;
  height: 1px;
  background: var(--branch);
  margin: 0 10px;
}
.send-line i {
  position: absolute;
  top: -3px;
  left: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--blossom-300);
  box-shadow: 0 0 10px var(--blossom-400);
  animation: travel 2.6s cubic-bezier(.5, 0, .5, 1) infinite;
}

.art-search { gap: 12px; }
.art-input {
  flex: 1;
  color: var(--text);
  background: var(--ink-700);
  border: 1px solid var(--blossom-700);
  border-radius: 6px;
  padding: 7px 10px;
  position: relative;
}
.art-input::after {
  content: "";
  display: inline-block;
  width: 1px; height: 13px;
  background: var(--blossom-300);
  margin-left: 2px;
  vertical-align: -2px;
  animation: blink 1.1s step-end infinite;
}
.art-hit { color: var(--ok); flex: none; }

.art-id { flex-wrap: wrap; gap: 8px; }
.id-nick { color: var(--text); }
.id-chip {
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blossom-400);
  border: 1px solid var(--blossom-700);
  border-radius: 3px;
  padding: 1px 5px;
}
.art-id code { color: var(--text-faint); font-size: 10.5px; }

.art-rename { flex-direction: column; align-items: flex-start; justify-content: center; gap: 7px; }
.ren-tpl { color: var(--text-faint); }
.ren-out { color: var(--blossom-100); }

.art-folder { flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; }
.folder-ok { color: var(--ok); }
.art-folder code { color: var(--text-faint); font-size: 10px; }

/* ---------------- coaches ---------------- */

.coaches { padding-top: clamp(90px, 13vh, 140px); }

.coaches-inner {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(163, 60, 97, .24), transparent 58%),
    linear-gradient(168deg, rgba(27, 19, 22, .9), rgba(9, 7, 8, .95));
  border: 1px solid var(--blossom-700);
  border-radius: 16px;
  padding: clamp(28px, 4vw, 48px);
}

.coaches-inner h2 {
  font-family: var(--display);
  font-size: clamp(26px, 3.8vw, 36px);
  font-weight: 600;
  letter-spacing: -.032em;
  line-height: 1.14;
  margin: 0 0 16px;
  max-width: 28ch;
  text-wrap: balance;
}

.coaches-lede {
  font-size: 16px;
  line-height: 1.66;
  color: var(--text-dim);
  margin: 0 0 26px;
  max-width: 58ch;
}

.ticks { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.ticks li {
  position: relative;
  padding-left: 28px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-dim);
  max-width: 62ch;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .42em;
  width: 13px;
  height: 7px;
  border-left: 2px solid var(--blossom-400);
  border-bottom: 2px solid var(--blossom-400);
  transform: rotate(-45deg);
  border-radius: 1px;
}

.coaches-soon {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
  padding-top: 22px;
  border-top: 1px solid var(--branch-dim);
  max-width: 62ch;
}
.soon-chip {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blossom-300);
  border: 1px solid var(--blossom-700);
  border-radius: 99px;
  padding: 2px 9px;
  margin-right: 10px;
  vertical-align: 1px;
}

/* ---------------- download ---------------- */

.download { padding-top: clamp(90px, 13vh, 140px); }

.dl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-bottom: 34px;
}

.dl-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 22px 22px 20px;
  border-radius: 13px;
  border: 1px solid var(--branch-dim);
  background: linear-gradient(168deg, rgba(27, 19, 22, .85), rgba(11, 8, 9, .92));
  text-decoration: none;
  color: var(--text);
  transition: transform .18s cubic-bezier(.2, .7, .2, 1), border-color .18s ease, box-shadow .18s ease;
}
.dl-card:hover {
  transform: translateY(-3px);
  border-color: var(--blossom-500);
  box-shadow: 0 22px 48px -26px rgba(0, 0, 0, .9);
}
.dl-platform {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -.02em;
}
.dl-label { font-size: 13.5px; color: var(--text-dim); }
.dl-meta { font-family: var(--mono); font-size: 11px; color: var(--text-faint); }
.dl-go {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 650;
  color: var(--blossom-300);
}
.dl-hash {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--text-faint);
  overflow-wrap: anywhere;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--branch-dim);
}

/* Honest empty state while there is no installer to hand out. */
.dl-pending {
  grid-column: 1 / -1;
  padding: 30px 28px;
  border-radius: 13px;
  border: 1px dashed var(--branch);
  background: rgba(17, 12, 15, .6);
  text-align: center;
}
.dl-pending-title {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 650;
  margin: 0 0 8px;
}
.dl-pending-note {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-dim);
  margin: 0 auto 20px;
  max-width: 46ch;
}

/* ---------------- unsigned-installer explanation ---------------- */

/*
 * Informational, not alarming. A red danger panel would make people think
 * something is wrong with the download; the point is the opposite — to say
 * calmly, before they meet the warning, that it is expected and verifiable.
 */
.unsigned {
  border: 1px solid var(--branch);
  border-left: 3px solid var(--blossom-500);
  border-radius: 12px;
  background: linear-gradient(168deg, rgba(27, 19, 22, .8), rgba(11, 8, 9, .9));
  padding: 24px 26px;
  margin: 0 0 34px;
}

.unsigned-title {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -.02em;
  margin: 0 0 14px;
  color: var(--text);
}

.unsigned-sub {
  font-family: var(--display);
  font-size: 15.5px;
  font-weight: 650;
  margin: 26px 0 10px;
  color: var(--text);
}

.unsigned p {
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--text-dim);
  margin: 0 0 14px;
  max-width: 64ch;
}
.unsigned strong { color: var(--text); font-weight: 650; }

.unsigned-steps {
  background: rgba(7, 5, 6, .55);
  border: 1px solid var(--branch-dim);
  border-radius: 9px;
  padding: 15px 18px 16px;
  margin: 0 0 6px;
}
.unsigned-steps-title {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blossom-400);
  margin: 0 0 10px !important;
}
.unsigned-steps ol {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.unsigned-steps li {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-dim);
}

/* The verification command, which is the part that actually proves something. */
.verify {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0 0 14px;
  border: 1px solid var(--branch-dim);
  border-radius: 8px;
  overflow: hidden;
  background: var(--ink-850);
}
.verify-cmd {
  flex: 1;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--blossom-100);
  padding: 11px 13px;
  overflow-x: auto;
  white-space: nowrap;
  user-select: all;
}
.verify-copy {
  flex: none;
  font-family: var(--body);
  font-size: 12.5px;
  background: var(--ink-600);
  border: 0;
  border-left: 1px solid var(--branch-dim);
  color: var(--text-dim);
  padding: 0 16px;
  cursor: pointer;
  transition: background .13s ease, color .13s ease;
}
.verify-copy:hover { background: var(--ink-500); color: var(--text); }
.verify-copy:focus-visible { outline: 2px solid var(--blossom-400); outline-offset: -2px; }

.verify-label {
  font-size: 13px !important;
  color: var(--text-muted) !important;
  margin: 0 0 8px !important;
}

.verify-hash {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ok);
  background: var(--ink-850);
  border: 1px solid rgba(99, 200, 154, .26);
  border-radius: 8px;
  padding: 11px 13px;
  overflow-wrap: anywhere;
  user-select: all;
}

.unsigned-foot {
  margin: 18px 0 0 !important;
  padding-top: 15px;
  border-top: 1px solid var(--branch-dim);
  font-size: 13.5px !important;
  color: var(--text-muted) !important;
}

.dl-steps { margin-bottom: 28px; }
.dl-steps h3 {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 650;
  margin: 0 0 16px;
}
ol.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: dl;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
ol.steps > li {
  counter-increment: dl;
  position: relative;
  padding-left: 42px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-dim);
  max-width: 62ch;
}
ol.steps > li::before {
  content: counter(dl);
  position: absolute;
  left: 0;
  top: -1px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--blossom-600);
  color: var(--blossom-300);
  font-family: var(--mono);
  font-size: 12px;
}
ol.steps strong { color: var(--text); font-weight: 650; }

.dl-note {
  border-left: 3px solid var(--blossom-600);
  padding: 2px 0 2px 18px;
}
.dl-note p {
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--text-muted);
  margin: 0;
  max-width: 64ch;
}
.dl-note strong { color: var(--text); }

/* ---------------- closing ---------------- */

.close {
  text-align: center;
  padding-top: clamp(96px, 14vh, 150px);
}

.close-head {
  font-family: var(--display);
  font-size: clamp(30px, 5.4vw, 52px);
  font-weight: 600;
  letter-spacing: -.042em;
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}
.close-sub {
  font-size: 16.5px;
  color: var(--text-muted);
  margin: 15px 0 0;
}
.close .cta-row { animation: none; }

/* ---------------- foot ---------------- */

.foot {
  max-width: var(--shell);
  margin: clamp(80px, 11vh, 120px) auto 0;
  padding: 24px 28px 46px;
  border-top: 1px solid var(--branch-dim);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.foot-left { max-width: 52ch; }
.foot-legal {
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-faint);
  margin: 8px 0 0;
}
.foot-links { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.foot-links a { font-size: 13.5px; color: var(--text-muted); text-decoration: none; }
.foot-links a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

.foot-brand {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.02em;
}
.foot-by {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blossom-500);
  margin-left: 7px;
  font-weight: 400;
}
.foot-app { font-size: 14px; color: var(--blossom-300); text-decoration: none; white-space: nowrap; }
.foot-app:hover { color: var(--blossom-200); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------- account dialog ---------------- */

.sheet {
  border: 1px solid var(--blossom-700);
  border-radius: 14px;
  background: linear-gradient(168deg, rgba(38, 26, 31, .99), rgba(9, 7, 8, .99));
  color: var(--text);
  padding: 0;
  max-width: 500px;
  width: calc(100% - 36px);
  box-shadow: 0 40px 110px -40px rgba(0, 0, 0, .95);
}
.sheet::backdrop { background: rgba(4, 3, 4, .76); backdrop-filter: blur(5px); }
.sheet-inner { position: relative; padding: 26px 28px 28px; }

.sheet-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}
.sheet-close:hover { background: var(--ink-500); color: var(--text); }

.sheet-tabs { display: flex; gap: 4px; margin: 0 0 20px; border-bottom: 1px solid var(--branch-dim); }
.sheet-tab {
  font-family: var(--body);
  font-size: 13.5px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  padding: 7px 12px 9px;
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease;
}
.sheet-tab:hover { color: var(--text); }
.sheet-tab.is-active { color: var(--blossom-200); border-bottom-color: var(--blossom-400); }
.sheet-tab:focus-visible { outline: 2px solid var(--blossom-400); outline-offset: 2px; }

.pane { display: none; }
.pane.is-active { display: block; }

.pane-note {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 20px;
  max-width: 54ch;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 15px;
  margin-bottom: 20px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.field input {
  font-family: var(--body);
  font-size: 15px;
  background: var(--ink-800);
  border: 1px solid var(--branch-dim);
  border-radius: 8px;
  color: var(--text);
  padding: 10px 12px;
  width: 100%;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.field input::placeholder { color: var(--text-faint); }
.field input:focus {
  outline: none;
  border-color: var(--blossom-500);
  box-shadow: 0 0 0 3px rgba(210, 87, 127, .17);
}
.field-hint { font-size: 11.5px; color: var(--text-faint); }
.field-hint.is-bad { color: var(--bad); }
.field-hint.is-good { color: var(--ok); }
.field-label .opt {
  font-family: var(--body);
  font-size: 10px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-faint);
  margin-left: 5px;
}

/* password fields */

.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 62px; }
.pw-peek {
  position: absolute;
  top: 50%;
  right: 7px;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--ink-600);
  border: 1px solid var(--branch-dim);
  border-radius: 5px;
  color: var(--text-muted);
  padding: 4px 8px;
  cursor: pointer;
}
.pw-peek:hover { color: var(--text); border-color: var(--blossom-600); }
.pw-peek:focus-visible { outline: 2px solid var(--blossom-400); outline-offset: 1px; }

/* Strength indicator. Reflects length and variety, not a pass/fail rule — the
   server enforces the actual minimum. */
.meter {
  display: block;
  height: 3px;
  background: var(--ink-600);
  border-radius: 99px;
  overflow: hidden;
  margin: 2px 0 1px;
}
.meter i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: var(--bad);
  transition: width .25s ease, background .25s ease;
}
.meter i.is-weak { background: var(--bad); }
.meter i.is-ok { background: #e0ab4a; }
.meter i.is-good { background: var(--ok); }

.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 20px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
  cursor: pointer;
}
.consent input {
  accent-color: var(--blossom-500);
  margin-top: 2px;
  flex: none;
  width: 15px;
  height: 15px;
  cursor: pointer;
}
.consent a { color: var(--blossom-300); }

.pane-foot {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-faint);
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--branch-dim);
}

.pane .field { margin-bottom: 16px; }
.pane .field-grid .field { margin-bottom: 0; }

.sheet-error {
  margin: 18px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(226, 105, 122, .1);
  border: 1px solid rgba(226, 105, 122, .32);
  color: #ffd6dc;
  font-size: 13.5px;
}

/* ---------------- toasts ---------------- */

.toasts {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-items: center;
  pointer-events: none;
}
.toast {
  background: var(--ink-500);
  border: 1px solid var(--branch);
  border-left: 3px solid var(--blossom-400);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .6);
  animation: rise .22s ease both;
  max-width: 520px;
}
.toast.is-error { border-left-color: var(--bad); color: #ffd6dc; }
.toast.is-ok { border-left-color: var(--ok); }

/* ---------------- motion ---------------- */

@keyframes settle {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(5px); }
}
@keyframes travel {
  0% { left: 0; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
/* Translate only — deliberately no scale.
 *
 * These elements carry filter: blur(90px), which the browser rasterises once
 * into a cached layer. Translating that layer is a compositor move and costs
 * almost nothing. Scaling it invalidates the cache, so every frame re-blurs
 * roughly 1200x1000 pixels, three times over, for as long as the page is open.
 * That is what made the page crawl on integrated graphics while staying
 * perfectly smooth on a discrete GPU. The drift reads the same without it. */
@keyframes drift-a {
  from { transform: translate3d(-3vw, 0, 0); }
  to { transform: translate3d(3vw, 2vw, 0); }
}
@keyframes drift-b {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-4vw, 3vw, 0); }
}
@keyframes drift-c {
  from { transform: translate3d(0, 1vw, 0); }
  to { transform: translate3d(5vw, -2vw, 0); }
}

/* Scroll reveal, applied only once JS marks the page so no-JS readers never
   get stuck with invisible content. */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .shot .window { transform: none; }
}

/* Shown instead of the download cards on anything that cannot run Leap.
   Offering a 107 MB Windows installer to a phone wastes data and trust. */
.dl-elsewhere {
  grid-column: 1 / -1;
  padding: 28px 26px;
  border-radius: 13px;
  border: 1px solid var(--branch);
  background: linear-gradient(168deg, rgba(27, 19, 22, .85), rgba(11, 8, 9, .92));
  text-align: center;
}
.dl-elsewhere-title {
  font-family: var(--display);
  font-size: clamp(19px, 4vw, 23px);
  font-weight: 650;
  letter-spacing: -.02em;
  margin: 0 0 12px;
  color: var(--text);
}
.dl-elsewhere-note {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-dim);
  margin: 0 auto 14px;
  max-width: 44ch;
}
.dl-elsewhere .cta { margin-top: 4px; }

/* The product shot is the first thing to overflow on a narrow screen. */
@media (max-width: 560px) {
  .shot { margin-top: 38px; }
  .window { transform: none; }
  .stats { gap: 20px; }
  .hero { padding-top: 32px; }
}

/* ---------------------------------------------------------------------------
   Coaching queue — the submission page at /q/<handle>.

   Written for someone who arrived from a link on stream and has never seen
   this site: one column on a phone, two on a desktop, with the form first in
   the source order so it is what a screen reader and a narrow screen meet
   first. The live line is secondary — reassurance, not the task.
   --------------------------------------------------------------------------- */

.q-body { min-height: 100vh; }

.q-main {
  width: min(var(--shell), calc(100% - 32px));
  margin: 0 auto;
  padding: 96px 0 72px;
  position: relative;
  z-index: 2;
}

/* --- holding states (loading, no such queue, closed) --- */

.q-status {
  text-align: center;
  padding: 80px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.q-status-title {
  font-family: var(--display);
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 600;
  letter-spacing: -.02em;
  margin: 0;
  color: var(--text);
}

.q-status-line {
  margin: 0;
  max-width: 46ch;
  color: var(--text-dim);
  font-size: 14.5px;
  line-height: 1.6;
}

/* --- header --- */

.q-head { margin-bottom: 28px; }

.q-title {
  font-family: var(--display);
  font-size: clamp(27px, 4.4vw, 42px);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.1;
  margin: 6px 0 10px;
  color: var(--text);
}

.q-sub {
  margin: 0;
  color: var(--text-muted);
  font-size: 13.5px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.q-sub strong { color: var(--blossom-200); font-weight: 600; }

.q-pill {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--blossom-700);
  background: var(--ink-700);
  color: var(--blossom-300);
}

/* --- two-column shell --- */

.q-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.q-panel {
  background: linear-gradient(180deg, var(--ink-700), var(--ink-850));
  border: 1px solid var(--branch-dim);
  border-radius: 14px;
  padding: 22px;
}

.q-panel.is-blocked { opacity: .78; }

.q-panel-title {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--text);
}

.q-panel-lede {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
}

.q-panel .field { margin-bottom: 16px; display: block; }
.q-panel .field-label { display: block; margin-bottom: 6px; }
.q-panel .field-hint { margin: 6px 0 0; }

.q-input {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--body);
  font-size: 14px;
}

.q-input:focus-visible {
  outline: 2px solid var(--blossom-400);
  outline-offset: 1px;
}

.q-textarea { resize: vertical; min-height: 68px; line-height: 1.55; }

/* --- the drop zone --- */

.q-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  padding: 26px 18px;
  border: 1px dashed var(--blossom-700);
  border-radius: 12px;
  background: var(--ink-800);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.q-drop:hover { border-color: var(--blossom-500); background: var(--ink-700); }

.q-drop.is-over {
  border-color: var(--blossom-300);
  background: var(--ink-600);
  transform: scale(1.01);
}

.q-drop.is-reading { opacity: .6; cursor: progress; }

.q-drop.is-loaded {
  border-style: solid;
  border-color: var(--ok);
  background: var(--ink-700);
}

.q-drop-icon { color: var(--blossom-300); }
.q-drop-icon svg { width: 26px; height: 26px; display: block; }
.q-drop.is-loaded .q-drop-icon { color: var(--ok); }

.q-drop-main {
  font-size: 14px;
  color: var(--text);
  font-weight: 550;
  word-break: break-all;
}

.q-drop-main code {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--blossom-200);
}

.q-drop-sub { font-size: 12px; color: var(--text-faint); }

/* --- "where are my replays?" --- */

.q-where {
  margin-top: 12px;
  border: 1px solid var(--branch-dim);
  border-radius: 10px;
  background: var(--ink-850);
  padding: 0 14px;
}

.q-where summary {
  cursor: pointer;
  padding: 11px 0;
  font-size: 12.5px;
  color: var(--blossom-300);
  list-style: none;
}

.q-where summary::-webkit-details-marker { display: none; }
.q-where summary::before { content: "▸ "; color: var(--text-faint); }
.q-where[open] summary::before { content: "▾ "; }
.q-where[open] { padding-bottom: 8px; }

.q-where p {
  margin: 0 0 10px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-muted);
}

.q-where code {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--blossom-200);
  word-break: break-all;
}

.q-where-note { color: var(--text-faint); }

/* --- what the parser read back --- */

.q-read {
  margin-top: 12px;
  border: 1px solid var(--branch-dim);
  border-left: 2px solid var(--ok);
  border-radius: 10px;
  background: var(--ink-850);
  padding: 13px 15px;
}

.q-read-title {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ok);
  margin: 0 0 9px;
}

.q-read-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px 14px;
  margin: 0;
  font-size: 13px;
}

.q-read-grid dt {
  color: var(--text-faint);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  align-self: center;
}

.q-read-grid dd {
  margin: 0;
  color: var(--text-dim);
  word-break: break-word;
}

/* --- errors and the button --- */

.q-file-error,
.q-error {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--bad);
}

.q-error {
  border-left: 2px solid var(--bad);
  padding-left: 11px;
}

.q-submit {
  display: block;
  width: 100%;
  margin-top: 18px;
  text-align: center;
  font-size: 15px;
  padding: 12px 18px;
  border-radius: 10px;
  border: 1px solid var(--blossom-400);
  cursor: pointer;
}

.q-submit:disabled {
  background: var(--ink-600);
  border-color: var(--branch-dim);
  color: var(--text-faint);
  box-shadow: none;
  cursor: not-allowed;
}

.q-fine {
  margin: 9px 0 0;
  font-size: 12px;
  color: var(--text-faint);
  text-align: center;
  min-height: 1.2em;
}

/* --- the live line --- */

.q-side { position: sticky; top: 86px; }

.q-you {
  border: 1px solid var(--blossom-600);
  border-radius: 12px;
  background: linear-gradient(170deg, rgba(210, 87, 127, .16), transparent 80%);
  padding: 14px 16px;
  margin-bottom: 20px;
}

.q-you-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--blossom-300);
  margin: 0;
}

.q-you-pos {
  font-family: var(--display);
  font-size: 23px;
  font-weight: 600;
  color: var(--text);
  margin: 3px 0 0;
}

.q-you-note {
  margin: 5px 0 0;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

.q-line {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.q-line-row {
  display: flex;
  align-items: baseline;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 8px;
  background: var(--ink-800);
}

.q-line-row.is-you {
  background: var(--ink-600);
  box-shadow: inset 2px 0 0 var(--blossom-400);
}

.q-line-pos {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-faint);
  min-width: 1.6em;
  text-align: right;
  flex: none;
}

.q-line-row.is-you .q-line-pos { color: var(--blossom-300); }

.q-line-who { min-width: 0; }

.q-line-name {
  display: block;
  font-size: 13.5px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.q-line-name em { color: var(--blossom-300); font-style: normal; font-size: 11.5px; }

.q-line-title {
  display: block;
  font-size: 12px;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.q-line-empty {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-faint);
  padding: 9px 0;
}

/* --- the rules, stated plainly --- */

.q-rules {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--branch-dim);
}

.q-rules-title {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 9px;
}

.q-rules ul {
  margin: 0;
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.q-rules li {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
}

.q-rules li::marker { color: var(--blossom-700); }

.q-legal {
  margin: 24px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-faint);
  text-align: center;
}

.q-legal a { color: var(--blossom-400); }

/* --- narrow screens ---
   The replay file lives on the PC they play on, so a phone cannot usually
   complete this. The page still works (they may be on a laptop in portrait),
   so this only reflows rather than blocking anything. */

@media (max-width: 860px) {
  .q-cols { grid-template-columns: minmax(0, 1fr); }
  .q-side { position: static; }
  .q-main { padding-top: 84px; }
}

/* ---------------------------------------------------------------------------
   Reduced motion
   ---------------------------------------------------------------------------
   Honouring this is an accessibility requirement, and it doubles as the
   cheapest possible rendering path: no infinite animations means the blurred
   aurora layers are rasterised once and never touched again, and the petal
   canvas already draws a single static scatter. Anyone whose machine struggles
   can turn this on in their OS display settings and the page becomes almost
   free to render.
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .aurora-blob {
    animation: none;
    /* The hint only pays for itself on something that actually moves. */
    will-change: auto;
  }

  .flip-arrow span,
  .send-line i,
  .art-input::after {
    animation: none;
  }

  /* Entrance animations resolve to their finished state rather than being
     skipped, so nothing is left invisible. */
  .hero .eyebrow,
  .headline,
  .subhead,
  .cta-row,
  .stats,
  .shot {
    animation: none;
    opacity: 1;
    transform: none;
  }

  * {
    scroll-behavior: auto;
  }
}

/* ---------------------------------------------------------------------------
   Version history
   --------------------------------------------------------------------------- */

.log {
  width: min(760px, calc(100% - 32px));
  margin: 0 auto;
  padding: 104px 0 72px;
  position: relative;
  z-index: 3;
}

.log-head { margin-bottom: 42px; }

.log-title {
  font-family: var(--display);
  font-size: clamp(27px, 4.4vw, 40px);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.1;
  margin: 6px 0 14px;
  color: var(--text);
}

.log-lede {
  margin: 0;
  max-width: 58ch;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-dim);
}

.log-current {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}
.log-current strong { color: var(--blossom-300); font-weight: 600; }

.log-entry {
  padding: 22px 0;
  border-top: 1px solid var(--branch-dim);
}

.log-meta {
  display: flex;
  align-items: baseline;
  gap: 11px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.log-version {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 600;
  margin: 0;
  color: var(--text);
}

.log-entry.is-current .log-version { color: var(--blossom-300); }

.log-badge {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--blossom-600);
  color: var(--blossom-300);
}

.log-date { font-size: 12.5px; color: var(--text-faint); margin-left: auto; }

.log-notes { list-style: none; margin: 0; padding: 0; }

.log-note {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 13px;
  padding: 7px 0;
  align-items: baseline;
}

.log-kind {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: right;
  padding-top: 2px;
  color: var(--text-faint);
}
.log-kind.is-added { color: var(--ok); }
.log-kind.is-fixed { color: var(--blossom-400); }
.log-kind.is-changed { color: var(--cyan); }

.log-text { font-size: 14px; line-height: 1.6; color: var(--text-dim); }

.log-foot {
  margin-top: 42px;
  padding-top: 20px;
  border-top: 1px solid var(--branch-dim);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-faint);
}
.log-foot a { color: var(--blossom-400); }
.log-foot strong { color: var(--text-dim); font-weight: 600; }

.log-empty { color: var(--text-faint); font-size: 14px; }

@media (max-width: 560px) {
  .log-note { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .log-kind { text-align: left; }
  .log-date { margin-left: 0; width: 100%; }
}

/* The link to the version history, under the download button. */
.dl-history {
  margin: -18px 0 30px;
  font-size: 13px;
  text-align: center;
}
.dl-history a {
  color: var(--text-muted);
  text-decoration: underline;
  text-decoration-color: var(--branch-dim);
  text-underline-offset: 3px;
  transition: color .14s ease;
}
.dl-history a:hover { color: var(--blossom-300); text-decoration-color: currentColor; }

/* A version that never shipped: present for the record, visibly not a release. */
.log-entry.is-unreleased .log-version { color: var(--text-muted); }
.log-date.is-unreleased {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* --- "send from the app instead", on the submission page ---
   Sits under the rules, below the fold of the form. Deliberately not a banner
   across the top: the person reading this was sent here to hand over a replay,
   and an advert in front of that task is how a useful page becomes an annoying
   one. */
.q-app {
  margin-top: 22px;
  padding: 15px 16px;
  border: 1px solid var(--blossom-700);
  border-radius: calc(10px);
  background: linear-gradient(170deg, rgba(210, 87, 127, .11), transparent 85%);
}

.q-app-title {
  margin: 0 0 9px;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--blossom-200);
}

.q-app-points {
  margin: 0 0 13px;
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.q-app-points li {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
}
.q-app-points li::marker { color: var(--blossom-600); }

.q-app-go {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 7px;
  text-decoration: none;
  color: #2a0b16;
  background: linear-gradient(176deg, var(--blossom-200), var(--blossom-500) 85%);
  border: 1px solid var(--blossom-400);
}
.q-app-go:hover { filter: brightness(1.06); }

.q-app-note {
  margin: 9px 0 0;
  font-size: 11.5px;
  color: var(--text-faint);
}