/* The first run, "The Reveal": every screen on the cloud sea, a gold flight path
   with five numerals across the top, paper and frost panels, one primary per
   screen. docs/DESIGN.md, "First run". */

:root {
  --gold-lo: #8f6620;
  --gold-line: linear-gradient(90deg, transparent, var(--gold-hi) 18%, var(--gold-hi) 82%, transparent);
  --hairline-gold: rgba(201, 151, 63, 0.45);
  --bloom: rgba(255, 214, 150, 0.55);
  --ok-wash: rgba(31, 138, 91, 0.1);
  --warn-wash: rgba(176, 115, 26, 0.12);
  --bad-wash: rgba(194, 65, 58, 0.1);
  --disabled-ink: color-mix(in srgb, var(--ink) 38%, transparent);
  --fr-veil: color-mix(in oklab, var(--air) 82%, transparent);
  --lamp: transparent;
  --paper-lit: #fffdf8;
  --paper-ink: #22338c;
  --t-tap: 120ms;
  --t-quick: 180ms;
  --t-ui: 220ms;
  --t-base: 320ms;
  --t-step: 420ms;
  --t-scene: 720ms;
  --t-epic: 1400ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-ink: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-lift: cubic-bezier(0.34, 1.56, 0.64, 1);
}
:root[data-theme="dark"] {
  --fr-veil: color-mix(in oklab, #15173a 78%, transparent);
  --lamp: rgba(255, 190, 110, 0.18);
  --paper-lit: #f4eee2;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fr-veil: color-mix(in oklab, #15173a 78%, transparent);
    --lamp: rgba(255, 190, 110, 0.18);
    --paper-lit: #f4eee2;
  }
}

html.fr-open,
html.fr-open body {
  overflow: hidden;
}

/* ------------------------------------------------------------------ the room */
.lf.fr {
  background: var(--air);
  grid-template-rows: auto minmax(0, 1fr);
  transform: none;
  transition: opacity var(--t-scene) var(--ease-out);
  --scene-phase: 0.2;
}
.lf.fr.leaving {
  transform: none;
}
.fr-sky {
  z-index: -3;
  transform-origin: 50% 62%;
  transition: transform var(--t-epic) var(--ease-out), filter var(--t-epic) var(--ease-out);
  filter: saturate(calc(0.92 + var(--scene-phase) * 0.3)) brightness(calc(1.04 - var(--scene-phase) * 0.08));
}
.lf.fr:not(.in) .fr-sky {
  transform: scale(1.12) translateY(-6%);
}
@media (max-width: 760px), (prefers-reduced-motion: reduce) {
  .lf.fr:not(.in) .fr-sky {
    transform: none;
  }
}
/* stars, faint in the day, plain at blue hour */
.fr-sky::after {
  content: "";
  position: absolute;
  inset: 0 0 45%;
  z-index: 1;
  opacity: 0.25;
  background-image:
    radial-gradient(circle at 6% 14%, #fff 0 0.7px, transparent 1.2px),
    radial-gradient(circle at 17% 33%, #fff 0 0.55px, transparent 1.05px),
    radial-gradient(circle at 29% 9%, #fff 0 0.8px, transparent 1.3px),
    radial-gradient(circle at 41% 26%, #fff 0 0.55px, transparent 1.05px),
    radial-gradient(circle at 55% 7%, #fff 0 0.7px, transparent 1.2px),
    radial-gradient(circle at 66% 21%, #fff 0 0.55px, transparent 1.05px),
    radial-gradient(circle at 78% 12%, #fff 0 0.85px, transparent 1.35px),
    radial-gradient(circle at 89% 30%, #fff 0 0.55px, transparent 1.05px),
    radial-gradient(circle at 95% 6%, #fff 0 0.7px, transparent 1.2px);
}
/* blue hour: never flat navy. A deep violet sky down to a rose horizon with an ember line */
.fr-sky::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent calc(62% - 1px), rgba(227, 154, 90, 0.85) 62%, transparent calc(62% + 2px)),
    linear-gradient(180deg, #0e1030 0%, #2a2350 40%, #7a4a5e 61.5%, transparent 64%);
  mix-blend-mode: normal;
}
:root[data-theme="dark"] .fr-sky::before {
  opacity: 0.78;
}
:root[data-theme="dark"] .fr-sky::after {
  opacity: 0.7;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fr-sky::before {
    opacity: 0.78;
  }
  :root:not([data-theme="light"]) .fr-sky::after {
    opacity: 0.7;
  }
}
/* the sun sinks toward the clouds as the job goes on (--scene-phase 0.2 -> 1) */
.fr-sun {
  position: absolute;
  z-index: -2;
  left: 50%;
  top: calc(62% - 30px + (1 - var(--scene-phase)) * -22vh);
  width: 120px;
  height: 120px;
  margin-left: -60px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 246, 222, 0.95), rgba(255, 214, 150, 0.55) 45%, transparent);
  opacity: calc(0.35 + var(--scene-phase) * 0.6);
  transition: top 4s var(--ease-out), opacity 4s var(--ease-out), transform var(--t-epic) var(--ease-out);
  -webkit-mask: linear-gradient(180deg, #000 50%, transparent 60%);
  mask: linear-gradient(180deg, #000 50%, transparent 60%);
}
:root[data-theme="dark"] .fr-sun {
  background: radial-gradient(closest-side, rgba(255, 220, 170, 0.9), rgba(227, 154, 90, 0.4) 50%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fr-sun {
    background: radial-gradient(closest-side, rgba(255, 220, 170, 0.9), rgba(227, 154, 90, 0.4) 50%, transparent);
  }
}
/* At night, steps i to iv are a clear starry sky: no clouds, no sun, no horizon (firstrun.js paints the stars on
   the night's own gradient). It gives way to the blue hour and the cloud sea under the hand at step v. (The
   clouds' drift rests while they're hidden: cloudsea.js stops on a paused animation) */
.fr-stars {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 55% at 50% 118%, rgba(92, 72, 176, 0.34), transparent 70%),
    linear-gradient(180deg, #03051a 0%, #080b27 36%, #111337 70%, #191842 100%);
  transition: opacity 1.4s var(--ease-out);
}
.fr-sky::before,
.fr-sun {
  transition: opacity 1.4s var(--ease-out);
}
.fr-sun {
  transition: top 4s var(--ease-out), opacity 1.4s var(--ease-out), transform var(--t-epic) var(--ease-out);
}
@keyframes fr-twinkle {
  0%, 100% { opacity: 0.55; }
  40% { opacity: 1; }
  70% { opacity: 0.4; }
}
:root[data-theme="dark"] .fr:is([data-step="0"], [data-step="1"], [data-step="2"], [data-step="3"]) .fr-stars {
  opacity: 1;
}
:root[data-theme="dark"] .fr:is([data-step="0"], [data-step="1"], [data-step="2"], [data-step="3"]) .fr-sky::before,
:root[data-theme="dark"] .fr:is([data-step="0"], [data-step="1"], [data-step="2"], [data-step="3"]) .fr-sun {
  opacity: 0;
}
:root[data-theme="dark"] .fr:is([data-step="0"], [data-step="1"], [data-step="2"], [data-step="3"]) .fr-sky::after {
  inset: 0 0 30%;
  animation: fr-twinkle 6s ease-in-out infinite;
}
:root[data-theme="dark"] .fr:is([data-step="0"], [data-step="1"], [data-step="2"], [data-step="3"]) .cloudsea {
  animation-play-state: paused;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fr:is([data-step="0"], [data-step="1"], [data-step="2"], [data-step="3"]) .fr-stars {
    opacity: 1;
  }
  :root:not([data-theme="light"]) .fr:is([data-step="0"], [data-step="1"], [data-step="2"], [data-step="3"]) .fr-sky::before,
:root:not([data-theme="light"]) .fr:is([data-step="0"], [data-step="1"], [data-step="2"], [data-step="3"]) .fr-sun {
    opacity: 0;
  }
  :root:not([data-theme="light"]) .fr:is([data-step="0"], [data-step="1"], [data-step="2"], [data-step="3"]) .fr-sky::after {
    inset: 0 0 30%;
    animation: fr-twinkle 6s ease-in-out infinite;
  }
  :root:not([data-theme="light"]) .fr:is([data-step="0"], [data-step="1"], [data-step="2"], [data-step="3"]) .cloudsea {
    animation-play-state: paused;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fr .fr-sky::after {
    animation: none !important;
  }
}
/* a veil behind the words when the sky is at its brightest */
.fr-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--air) 30%, transparent), transparent 30%, transparent 70%, color-mix(in srgb, var(--air) 22%, transparent));
}

/* ------------------------------------------------------------------ the bar: flight path, numerals, tools */
.fr-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 76px;
  padding: 0 clamp(16px, 3vw, 48px);
  color: var(--on-sky);
}
.fr-path {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: color-mix(in srgb, var(--on-sky) 12%, transparent);
  --fill: 0;
}
.fr-path-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--fill) * 100%);
  background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi) 88%, #fff6dc);
  box-shadow: 0 0 10px rgba(231, 189, 106, 0.7);
  transition: width var(--t-scene) var(--ease-out);
}
.lf.fr:not(.in) .fr-path-fill {
  width: 0;
}
.fr-nums {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2.2vw, 34px);
  margin: 0 auto 0 0;
  padding: 0;
  list-style: none;
}
.fr-nums li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: calc(13px * var(--ts, 1));
  letter-spacing: 0.02em;
  font-weight: 540;
  color: color-mix(in srgb, var(--on-sky) 58%, transparent);
  white-space: nowrap;
  --p: 0;
}
.fr-nums li + li::before {
  content: "";
  width: clamp(12px, 2vw, 34px);
  height: 1px;
  margin-right: clamp(0px, 0.4vw, 6px);
  background: color-mix(in srgb, var(--on-sky) 22%, transparent);
}
.fr-nums li.done::before,
.fr-nums li.on::before {
  background: var(--hairline-gold);
}
.fr-num {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
}
.fr-num svg {
  position: absolute;
  inset: 0;
  width: 28px;
  height: 28px;
  transform: rotate(-90deg);
  overflow: visible;
}
.fr-num circle {
  fill: none;
  stroke-width: 1.2;
}
.fr-ring-bg {
  stroke: transparent;
}
.fr-ring {
  stroke: var(--gold-hi);
  stroke-dasharray: 78.6;
  stroke-dashoffset: calc(78.6 * (1 - var(--p)));
  opacity: 0;
  transition: stroke-dashoffset var(--t-scene) var(--ease-out), opacity var(--t-ui);
}
.fr-num em {
  font-family: var(--font-display);
  font-style: italic;
  font-size: calc(17px * var(--ts, 1));
  line-height: 1;
  color: inherit;
}
.fr-nums li.on {
  color: var(--on-sky);
}
.fr-nums li.on .fr-ring-bg {
  stroke: color-mix(in srgb, var(--gold-hi) 32%, transparent);
}
.fr-nums li.on .fr-ring {
  opacity: 1;
}
.fr-nums li.on .fr-num em,
.fr-nums li.done .fr-num em {
  color: var(--gold);
}
:root[data-theme="dark"] .fr-nums li.on .fr-num em,
:root[data-theme="dark"] .fr-nums li.done .fr-num em {
  color: var(--gold-hi);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fr-nums li.on .fr-num em,
  :root:not([data-theme="light"]) .fr-nums li.done .fr-num em {
    color: var(--gold-hi);
  }
}
/* done: a gold dot, never a green tick */
.fr-nums li.done .fr-num::after {
  content: "";
  position: absolute;
  right: 0;
  top: 1px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-hi);
  box-shadow: 0 0 6px var(--gold-hi);
}
/* a step you can go to: the numeral and its name lift on hover, a gold ring on focus */
.fr-nums li.can {
  cursor: pointer;
  border-radius: 999px;
  transition: color var(--t-2, 0.2s) var(--ease, ease);
}
.fr-nums li.can:hover {
  color: var(--on-sky);
}
.fr-nums li.can:hover .fr-num-label {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--gold-hi, #f3d58e) 70%, transparent);
  text-underline-offset: 4px;
}
.fr-nums li.can:hover .fr-ring-bg {
  stroke: color-mix(in srgb, var(--gold-hi, #f3d58e) 80%, transparent);
}
.fr-nums li.can:focus-visible {
  outline: 2px solid var(--gold-hi, #f3d58e);
  outline-offset: 4px;
}
.fr-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fr-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  font: 560 calc(13px * var(--ts, 1))/1 var(--font-body);
  color: inherit;
  background: color-mix(in srgb, var(--air) 42%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-sky) 14%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  cursor: pointer;
  transition: background var(--t-ui), box-shadow var(--t-ui);
}
.fr-chip:hover {
  background: color-mix(in srgb, var(--air) 64%, transparent);
}
.fr-chip svg {
  width: 15px;
  height: 15px;
}
.fr-snd {
  width: 34px;
  padding: 0;
  justify-content: center;
}
.fr-snd svg {
  width: 18px;
  height: 18px;
}
.fr-clock {
  min-width: 64px;
  padding: 0 4px;
  font-family: var(--font-display);
  font-size: calc(22px * var(--ts, 1));
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: inherit;
}
.fr-x {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: inherit;
  background: color-mix(in srgb, var(--air) 42%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-sky) 14%, transparent);
  cursor: pointer;
  transition: transform var(--t-ui) var(--ease-out);
}
.fr-x:hover {
  transform: rotate(90deg);
}
.fr-x svg {
  width: 16px;
  height: 16px;
}
.fr :focus-visible {
  outline: 2px solid var(--gold-hi);
  outline-offset: 3px;
}
@media (max-width: 760px) {
  .fr-bar {
    height: 60px;
    gap: 8px;
    padding: 0 12px 0 16px;
  }
  .fr-nums {
    gap: 6px;
  }
  .fr-nums li + li::before {
    width: 8px;
    margin-right: 0;
  }
  .fr-nums li {
    gap: 6px;
  }
  .fr-nums li:not(.on) .fr-num-label {
    display: none;
  }
  .fr-num,
  .fr-num svg {
    width: 24px;
    height: 24px;
  }
  .fr-num em {
    font-size: calc(15px * var(--ts, 1));
  }
  .fr-lock span {
    display: none;
  }
  .fr-lock {
    width: 34px;
    padding: 0;
    justify-content: center;
  }
  .fr-clock {
    min-width: 0;
    font-size: calc(18px * var(--ts, 1));
  }
}
@media (max-width: 400px) {
  .fr-nums li + li::before {
    width: 4px;
  }
  .fr-nums,
  .fr-nums li {
    gap: 4px;
  }
  .fr-nums li.on .fr-num-label {
    font-size: calc(12px * var(--ts, 1));
  }
}

/* ------------------------------------------------------------------ body and route transitions */
.fr-body {
  position: relative;
  overflow: auto;
  overscroll-behavior: contain;
}
.fr .lf-view {
  max-width: 1200px;
  padding: clamp(16px, 3vh, 40px) clamp(16px, 3.4vw, 48px) 120px;
  color: var(--on-sky);
}
.fr .lf-enter {
  animation: fr-enter var(--t-step) var(--ease-out) both;
}
@keyframes fr-enter {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}
/* (only the flow's own step changes: learn.js puts vt-fr on <html> for just those, so the app's page switches,
   html.vt-page in base.css, keep their own) */
:root.vt-fr::view-transition-old(root) {
  animation: fr-leave var(--t-ui, 220ms) ease both;
}
:root.vt-fr::view-transition-new(root) {
  animation: fr-enter var(--t-step, 420ms) var(--ease-out) both;
}
@keyframes fr-leave {
  to {
    opacity: 0;
    transform: translateY(-12px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .fr .lf-enter {
    animation: fr-fade 180ms ease both;
  }
  @keyframes fr-fade {
    from {
      opacity: 0;
    }
  }
}

/* type */
.fr .lf-h {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 4.2vw, 72px);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--on-sky);
  text-wrap: balance;
}
.fr .lf-h.small {
  font-size: clamp(28px, 2.6vw, 44px);
}
.fr .lf-h .hand {
  color: var(--hand-ink);
}
.fr .lf-sub {
  max-width: 34em;
  font-size: clamp(16px, 1.1vw, 19px);
  line-height: 1.58;
  color: var(--on-sky-2);
  text-wrap: pretty;
}
.fr-micro {
  font-size: calc(13px * var(--ts, 1));
  letter-spacing: 0.02em;
  color: var(--on-sky-2);
}
.fr-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: calc(12px * var(--ts, 1));
  letter-spacing: 0.02em;
  font-weight: 560;
  color: var(--on-sky-2);
  box-shadow: inset 0 0 0 1px var(--hairline-gold);
}
.fr-tag::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-hi);
}

/* panels: frost over the sea, or paper */
.fr-frost {
  border-radius: 24px;
  background: var(--fr-veil);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: inset 0 0 0 1px var(--veil-edge), var(--sh-float);
  color: var(--ink);
}
.fr-paper {
  border-radius: 3px;
  background: var(--paper-lit);
  color: #1a1c33;
  box-shadow: var(--sh-paper), 0 40px 90px -30px var(--lamp);
}

/* ------------------------------------------------------------------ buttons: one primary; disabled says why */
.fr .btn-ink {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 60%, transparent), 0 10px 24px -12px rgba(20, 16, 50, 0.6);
}
.fr .btn-ink .ico:last-child {
  color: var(--gold-hi);
  transition: transform var(--t-ui) var(--ease-out);
}
.fr .btn-ink:hover .ico:last-child {
  transform: translateX(4px);
}
.fr .btn.fr-primary {
  height: 56px;
  padding: 0 26px;
  font-size: calc(16.5px * var(--ts, 1));
}
.fr .btn[disabled],
.fr .btn[aria-disabled="true"] {
  background: transparent;
  color: var(--disabled-ink);
  box-shadow: inset 0 0 0 1px var(--line-3);
  outline: 1px dashed var(--line-3);
  outline-offset: -1px;
  filter: none;
  cursor: not-allowed;
}
.fr .btn[aria-disabled="true"] {
  cursor: pointer;
}
.fr .btn[aria-disabled="true"] .ico,
.fr .btn[disabled] .ico {
  color: inherit !important;
}
.fr-why {
  font-size: calc(13.5px * var(--ts, 1));
  color: var(--on-sky-2);
}
/* the action bar: bottom right at desktop, a sticky bar at the foot of a phone */
.fr-actbar {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  padding: 14px 0 18px;
}
.fr-actbar .grow {
  flex: 1;
}
/* (the Words step scrolls under its bar: a frosted bar, so the editor's foot never shows through the count) */
@media (min-width: 761px) {
  .fr-s4 .fr-actbar {
    margin-inline: -18px;
    padding: 12px 18px;
    border-radius: 20px 20px 0 0;
    background: var(--fr-veil);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: inset 0 1px 0 var(--veil-edge);
  }
}
@media (max-width: 760px) {
  .fr-actbar {
    margin: 22px -16px 0;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    flex-wrap: wrap;
    background: var(--fr-veil);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: inset 0 1px 0 var(--veil-edge);
    gap: 8px 12px;
  }
  .fr-actbar .btn.fr-primary {
    flex: 1 1 100%;
    order: 3;
    justify-content: center;
  }
  .fr-actbar .fr-why {
    flex: 1 1 100%;
    order: 2;
    text-align: center;
  }
  .fr-actbar .grow {
    display: none;
  }
}
.flash-gold {
  animation: flash-gold 400ms ease 2;
}
@keyframes flash-gold {
  50% {
    box-shadow: 0 0 0 2px var(--gold-hi), 0 0 24px var(--bloom);
  }
}

/* ------------------------------------------------------------------ sheets, confirm, banner */
.fr-sheet-back {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: flex;
  justify-content: flex-end;
  background: rgba(14, 16, 40, 0);
  transition: background var(--t-base) var(--ease-out);
}
.fr-sheet-back.in {
  background: rgba(14, 16, 40, 0.28);
}
.fr-sheet {
  width: min(420px, 100%);
  height: 100%;
  overflow: auto;
  padding: 26px 28px 32px;
  background: var(--fr-veil);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  backdrop-filter: blur(24px) saturate(1.3);
  box-shadow: inset 1px 0 0 var(--veil-edge), var(--sh-3);
  color: var(--ink);
  transform: translateX(100%);
  transition: transform var(--t-step) var(--ease-out);
}
.fr-sheet-back.in .fr-sheet {
  transform: none;
}
.fr-sheet-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}
.fr-sheet-head h3 {
  flex: 1;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.05;
}
.fr-sheet .fr-x {
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
@media (max-width: 760px) {
  .fr-sheet-back {
    align-items: flex-end;
  }
  .fr-sheet {
    width: 100%;
    height: auto;
    max-height: 85vh;
    border-radius: 24px 24px 0 0;
    padding-bottom: calc(28px + env(safe-area-inset-bottom));
    transform: translateY(100%);
  }
}
.fr-trust ol {
  counter-reset: t;
  list-style: none;
  padding: 0;
  display: grid;
  gap: 16px;
}
.fr-trust li {
  counter-increment: t;
  position: relative;
  padding-left: 38px;
  font-size: calc(15px * var(--ts, 1));
  line-height: 1.55;
  color: var(--ink-2);
}
.fr-trust li::before {
  content: counter(t, lower-roman);
  position: absolute;
  left: 0;
  top: -3px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: calc(22px * var(--ts, 1));
  color: var(--gold);
}
.fr-trust li b {
  color: var(--ink);
  font-weight: 620;
}
.fr-sheet-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line-2);
}
.fr-center {
  justify-content: center;
  align-items: center;
}
.fr-confirm {
  width: min(440px, calc(100% - 32px));
  padding: 28px;
  border-radius: 24px;
  background: var(--fr-veil);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: inset 0 0 0 1px var(--veil-edge), var(--sh-3);
  color: var(--ink);
  transform: translateY(10px);
  opacity: 0;
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-ui);
}
.fr-sheet-back.in .fr-confirm {
  transform: none;
  opacity: 1;
}
.fr-confirm h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 34px;
}
.fr-confirm p {
  margin-top: 8px;
  color: var(--ink-2);
  line-height: 1.55;
}
.fr-confirm-acts {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}
.fr-banner {
  position: absolute;
  z-index: 5;
  top: 86px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: calc(14px * var(--ts, 1));
  font-weight: 560;
  color: var(--ink);
  background: var(--fr-veil);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: inset 0 0 0 1px var(--hairline-gold), var(--sh-float);
  transform: translateX(-50%);
  animation: fr-enter var(--t-step) var(--ease-out) both;
  transition: opacity var(--t-base);
}
.fr-banner i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-hi);
}
.fr-banner.out {
  opacity: 0;
}

/* the ink nib drawing a looping "l", in place of a spinner */
.fr-nib {
  display: inline-block;
  width: 22px;
  height: 22px;
  flex: none;
}
.fr-nib path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: 60;
  animation: fr-nib 1.6s var(--ease-ink) infinite;
}
@keyframes fr-nib {
  0% {
    stroke-dashoffset: 60;
  }
  60% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -60;
  }
}

/* ------------------------------------------------------------------ i. pages */
.fr-s2 .s2-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
  padding-top: clamp(8px, 4vh, 56px);
}
.s2-left {
  display: grid;
  gap: 22px;
  justify-items: start;
}
.s2-left .lf-sub {
  margin-top: -6px;
}
.s2-srcs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.s2-srcs .btn {
  height: 48px;
  padding: 0 20px;
}
.fr .btn-ghost.s2-src {
  background: var(--fr-veil);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--ink);
}
.s2-paste kbd {
  font: 560 calc(12px * var(--ts, 1)) var(--font-mono);
  padding: 2px 6px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--line-3);
}
.s2-works {
  display: grid;
  gap: 10px;
}
.s2-works ul {
  display: flex;
  gap: 14px;
  list-style: none;
  padding: 0;
}
.s2-works li {
  display: grid;
  gap: 6px;
  width: 104px;
  font-size: calc(12.5px * var(--ts, 1));
  line-height: 1.35;
  color: var(--on-sky-2);
}
.s2-works li[data-ok] span {
  color: var(--on-sky);
}
.s2-sample svg {
  width: 72px;
  height: 86px;
  filter: drop-shadow(0 6px 10px rgba(40, 30, 70, 0.22));
}
.s2-sample[data-kind="curl"] svg {
  transform: rotate(-4deg);
}
.s2-right {
  display: grid;
  gap: 18px;
}
.s2-drop {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: clamp(300px, 46vh, 520px);
  border: 0;
  padding: 32px;
  cursor: pointer;
  font: inherit;
  transform: rotate(-0.6deg);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
  view-transition-name: fr-sheet;
  background-image: repeating-linear-gradient(180deg, transparent 0 31px, rgba(80, 110, 190, 0.13) 31px 32px);
  background-color: var(--paper-lit);
}
.s2-drop:hover {
  transform: rotate(-0.2deg) translateY(-3px);
}
.dragging .s2-drop {
  transform: translateY(-8px) rotate(0deg);
}
.s2-margin {
  position: absolute;
  inset: 18px;
  border: 1.5px dashed rgba(34, 51, 140, 0.32);
  border-radius: 2px;
  transition: border-color var(--t-ui);
}
.dragging .s2-margin {
  border-color: var(--gold);
}
.s2-drop-in {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(420px, 80%);
}
.s2-drop-ink {
  display: block;
  max-width: 100%;
}
.s2-drop-say {
  font-family: var(--font-display);
  font-size: 34px;
  color: #22338c;
}
.s2-drop small {
  font-size: calc(13px * var(--ts, 1));
  letter-spacing: 0.02em;
  color: #6a6a80;
}
.fr-s2.has-pages .s2-drop {
  min-height: clamp(200px, 26vh, 300px);
}
.s2-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  min-height: 0;
}
.s2-tray:empty {
  display: none;
}
.s2-thumb {
  position: relative;
  width: 96px;
  height: 124px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--paper-lit);
  box-shadow: var(--sh-paper);
  transform: rotate(var(--tilt, 0deg));
}
.s2-thumb.fly {
  animation: s2-fly var(--t-scene) var(--ease-lift) both;
}
@keyframes s2-fly {
  from {
    opacity: 0;
    transform: translate(-60px, -120px) rotate(-14deg) scale(1.3);
  }
}
@media (max-width: 760px), (prefers-reduced-motion: reduce) {
  .s2-thumb.fly {
    animation-duration: var(--t-base);
    animation-name: fr-enter;
  }
}
.s2-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.s2-thumb figcaption {
  position: absolute;
  left: 6px;
  bottom: 5px;
  font: italic calc(15px * var(--ts, 1)) var(--font-display);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.s2-thumb[data-level="bad"] {
  box-shadow: var(--sh-paper), 0 0 0 2px var(--bad);
}
.s2-thumb[data-level="warn"] {
  box-shadow: var(--sh-paper), 0 0 0 2px var(--gold);
}
.s2-ring {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--gold-hi);
  animation: lf-spin 1s linear infinite;
}
.s2-thumb .lf-thumb-x {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(20, 20, 40, 0.6);
  color: #fff;
  cursor: pointer;
}
.s2-thumb .lf-thumb-x svg {
  width: 12px;
  height: 12px;
}
.s2-count {
  font-family: var(--font-display);
  font-size: calc(22px * var(--ts, 1));
  color: var(--on-sky);
}
.s2-count:empty {
  display: none;
}
@media (max-width: 760px) {
  .fr-s2 .s2-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-top: 4px;
  }
  .s2-srcs {
    width: 100%;
    display: grid;
  }
  .s2-srcs .btn {
    width: 100%;
    justify-content: center;
    height: 52px;
  }
  .s2-srcs .s2-src:first-child {
    order: 2;
  }
  .s2-paste {
    display: none;
  }
  .s2-drop,
  .fr-s2.has-pages .s2-drop {
    min-height: 160px;
    padding: 20px;
  }
  .s2-drop-say {
    font-size: 26px;
  }
  .s2-works li {
    width: auto;
    flex: 1;
  }
  .s2-sample svg {
    width: 56px;
    height: 68px;
  }
  .s2-left {
    gap: 16px;
  }
  .s2-thumb {
    width: 76px;
    height: 98px;
  }
}

/* the action bar sits at the foot of the screen */
.fr .lf-view {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.fr .lf-view > .fr-actbar {
  margin-top: auto;
}
.fr .btn[aria-disabled="true"],
.fr .btn[disabled] {
  background: color-mix(in srgb, var(--air) 34%, transparent);
  color: color-mix(in srgb, var(--on-sky) 50%, transparent);
  box-shadow: none;
  outline: 1px dashed color-mix(in srgb, var(--on-sky) 34%, transparent);
}
/* in daylight the gold numerals take the deeper gold, to read on the lilac sky */
:root:not([data-theme="dark"]) .fr-nums li.on .fr-num em,
:root:not([data-theme="dark"]) .fr-nums li.done .fr-num em {
  color: var(--gold-lo);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fr-nums li.on .fr-num em,
  :root:not([data-theme="light"]) .fr-nums li.done .fr-num em {
    color: var(--gold-hi);
  }
}

/* ------------------------------------------------------------------ ii. check */
.s3-head {
  display: grid;
  gap: 12px;
  justify-items: start;
  margin: clamp(8px, 3vh, 40px) 0 28px;
}
.s3-head .lf-sub {
  margin-top: 0;
}
.s3-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 20px;
  align-items: start;
}
.s3-card {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 18px;
  padding: 16px;
  transition: box-shadow var(--t-base);
}
.s3-card[data-level="bad"] {
  grid-column: span 2;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 40%, transparent), var(--sh-float);
}
@media (max-width: 760px) {
  .s3-card[data-level="bad"] {
    grid-column: auto;
  }
}
.s3-page {
  position: relative;
  align-self: start;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 3px;
  background: var(--paper-lit);
  box-shadow: var(--sh-paper);
}
.s3-page img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: s3-morph 600ms var(--ease-out) both;
}
@keyframes s3-morph {
  from {
    transform: scale(1.08) rotate(-2deg);
    filter: saturate(0.6);
  }
}
.s3-page figcaption {
  position: absolute;
  left: 8px;
  top: 6px;
  font: italic calc(18px * var(--ts, 1)) var(--font-display);
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.s3-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: -10%;
  height: 10%;
  background: linear-gradient(180deg, transparent, rgba(231, 189, 106, 0.55) 70%, var(--gold-hi));
  opacity: 0;
}
.s3-page.scanned .s3-scan {
  animation: s3-sweep 900ms var(--ease-ink) 200ms 1 both;
}
@keyframes s3-sweep {
  0% {
    top: -10%;
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .s3-page img,
  .s3-page.scanned .s3-scan {
    animation: none;
  }
}
.s3-body {
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
}
.s3-status {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: calc(13.5px * var(--ts, 1));
  font-weight: 640;
}
.s3-status[data-level="ok"] {
  color: var(--good);
  background: var(--ok-wash);
}
.s3-status[data-level="warn"] {
  color: var(--warn);
  background: var(--warn-wash);
}
.s3-status[data-level="bad"] {
  color: var(--bad);
  background: var(--bad-wash);
}
.s3-status[data-level="checking"] {
  color: var(--ink-2);
  background: var(--line);
}
.s3-status em {
  font-style: normal;
  font-weight: 500;
  opacity: 0.8;
}
.s3-tick {
  width: 10px;
  height: 6px;
  margin-top: -3px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  animation: s3-tick 400ms var(--ease-lift) both;
}
@keyframes s3-tick {
  from {
    transform: rotate(-45deg) scale(0);
  }
}
.s3-chips {
  display: flex;
  gap: 6px;
  list-style: none;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.s3-chips li {
  flex: none;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: calc(12.5px * var(--ts, 1));
  color: var(--ink-3);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.s3-chips li b {
  color: var(--ink);
  font-weight: 620;
}
.s3-chips li[data-level="bad"] {
  background: var(--bad-wash);
}
.s3-chips li[data-level="warn"] {
  background: var(--warn-wash);
}
.s3-issues {
  display: grid;
  gap: 8px;
  list-style: none;
  padding: 0;
  font-size: calc(14.5px * var(--ts, 1));
  line-height: 1.5;
  color: var(--ink-2);
}
.s3-issues b {
  color: var(--ink);
}
.s3-issues li[data-level="bad"] b {
  color: var(--bad);
}
.s3-fine {
  font-size: calc(14.5px * var(--ts, 1));
  color: var(--ink-2);
}
.s3-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.s3-anyway {
  margin-left: 6px;
  font-size: calc(14px * var(--ts, 1));
}
@media (max-width: 760px) {
  .s3-card {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
  }
  .s3-acts .btn-sm {
    min-height: 44px;
  }
}
.s3-card,
.s3-cards > * {
  min-width: 0;
}
.s3-page {
  width: 100%;
}
@media (max-width: 760px) {
  .fr-tools {
    gap: 4px;
  }
  .fr-bar .fr-chip,
  .fr-bar .fr-x {
    width: 32px;
    height: 32px;
  }
  .fr-nums {
    min-width: 0;
    overflow: hidden;
  }
  .fr-clock {
    font-size: calc(17px * var(--ts, 1));
    white-space: nowrap;
  }
}
.fr figure {
  margin: 0;
}
.lf.fr {
  grid-template-columns: minmax(0, 1fr);
}
.fr .lf-view {
  width: 100%;
  min-width: 0;
}

/* ------------------------------------------------------------------ iii. words: reading, then the reading to check */
.s4r-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
  margin: auto 0;
  padding: 24px 0 60px;
}
.s4r-page {
  position: relative;
  justify-self: end;
  width: min(100%, 440px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  transform: rotate(-1.5deg);
  view-transition-name: fr-sheet;
}
.s4r-page img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.s4r-sweep {
  position: absolute;
  left: 0;
  right: 0;
  height: 18%;
  background: linear-gradient(180deg, transparent, rgba(231, 189, 106, 0.32) 80%, rgba(231, 189, 106, 0.9));
  animation: s4r-sweep 2.6s var(--ease-ink) infinite;
}
@keyframes s4r-sweep {
  from {
    top: -18%;
  }
  to {
    top: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .s4r-sweep {
    animation: none;
    display: none;
  }
}
.s4r-copy {
  display: grid;
  gap: 16px;
  justify-items: start;
  max-width: 520px;
}
.s4r-line {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--hand-ink);
}
.s4r-msg {
  font-size: calc(18px * var(--ts, 1));
  color: var(--on-sky);
}
.s4r-track {
  width: 100%;
  height: 2px;
  background: color-mix(in srgb, var(--on-sky) 14%, transparent);
}
.s4r-fill {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi));
  transition: width var(--t-step) var(--ease-out);
}
@media (max-width: 760px) {
  .s4r-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .s4r-page {
    justify-self: center;
    width: min(70%, 300px);
  }
}

.fr-s4 {
  display: flex;
}
.s4-head {
  margin: clamp(4px, 2vh, 28px) 0 22px;
}
.s4-head .lf-sub {
  margin-top: 10px;
}
.s4-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 20px;
  align-items: start;
}
.s4-page {
  padding: 12px;
  position: sticky;
  top: 0;
}
.s4-page .lf-gallery {
  max-height: calc(100vh - 300px);
  overflow: auto;
  border-radius: 14px;
}
.s4-page .lf-pg img {
  border-radius: 3px;
}
/* the whole page in view, every line of it: the figure as big as the panel's height allows, centred (the reader's
   highlight is laid over the figure, so the figure wraps the picture exactly); "Zoom in" makes it the panel's width */
@media (min-width: 761px) {
  .s4-page .lf-pg {
    width: fit-content;
    max-width: 100%;
    align-self: center;
    cursor: zoom-in;
  }
  .s4-page .lf-pg img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(100vh - 372px);
  }
  .s4-page.zoomed .lf-pg {
    width: 100%;
    cursor: zoom-out;
  }
  .s4-page.zoomed .lf-pg img {
    width: 100%;
    max-height: none;
  }
}
.lf-zoom {
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  color: var(--ink);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  font: inherit;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.lf-zoom:hover {
  background: var(--paper-lit, var(--surface));
}
.lf-zoom:focus-visible {
  outline: 2px solid var(--gold-hi, currentColor);
  outline-offset: 2px;
}
@media (max-width: 760px) {
  .lf-zoom {
    display: none;
  }
}
.s4-page .lf-hl {
  outline: 1px solid var(--gold-hi);
  background: rgba(231, 189, 106, 0.08);
  border-radius: 3px;
}
/* the word being checked, found in the line's ink: lit by itself */
.s4-page .lf-hl.word {
  outline: 2px solid var(--gold-hi);
  background: rgba(231, 189, 106, 0.24);
  border-radius: 4px;
}
/* a line the reader didn't find on the page: its place is a guess between its neighbours */
.s4-page .lf-hl.guess {
  outline-style: dashed;
  background: transparent;
}
.s4-editor {
  padding: 18px;
  display: grid;
  gap: 12px;
}
.s4-editor .lf-ta-wrap {
  border-radius: 14px;
  background: var(--paper-lit);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.s4-editor .lf-ta,
.s4-editor .lf-ta-mirror {
  color: #1a1c33;
}
.s4-editor mark {
  background: none;
  color: inherit;
  text-decoration: underline dotted var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.s4-name {
  display: grid;
  gap: 6px;
  font-size: calc(13.5px * var(--ts, 1));
  font-weight: 600;
  color: var(--ink-2);
}
.s4-name .inp {
  max-width: 320px;
  font-family: var(--font-display);
  font-size: calc(20px * var(--ts, 1));
}
.s4-skip {
  font-size: calc(14.5px * var(--ts, 1));
  white-space: nowrap;
}
.fr-s4 .lf-count {
  font-size: calc(13px * var(--ts, 1));
  color: var(--on-sky-2);
}
@media (max-width: 900px) {
  .s4-split {
    grid-template-columns: 1fr;
  }
  .s4-page {
    position: relative;
  }
  .s4-page .lf-gallery {
    max-height: 40vh;
  }
  .fr-s4 .lf-count {
    display: none;
  }
}

/* ------------------------------------------------------------------ iv. learning */
.s5-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
  padding-top: clamp(4px, 2vh, 28px);
}
.s5-lightbox {
  position: relative;
  padding: 18px;
  border-radius: 24px;
  background: radial-gradient(closest-side, rgba(255, 246, 225, 0.55), transparent);
}
.s5-page {
  position: relative;
  width: min(100%, 520px);
  margin: 0 auto;
  overflow: hidden;
  transform: rotate(-1.5deg);
  animation: s5-bob 6s ease-in-out infinite alternate;
  view-transition-name: fr-sheet;
  transition: filter var(--t-epic) var(--ease-out), opacity var(--t-scene);
}
@keyframes s5-bob {
  to {
    transform: rotate(-1deg) translateY(-6px);
  }
}
.fr-s5.final .s5-page {
  filter: brightness(1.08);
}
.s5-img {
  display: block;
  width: 100%;
}
/* tracing the ink: the strokes glow gold under a sweeping mask */
.s5-glow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  mix-blend-mode: screen;
  filter: invert(1) grayscale(1) contrast(4) brightness(0.9) sepia(1) saturate(4) hue-rotate(-12deg);
  -webkit-mask: linear-gradient(180deg, transparent 0%, #000 12%, #000 22%, transparent 34%) 0 0 / 100% 300% no-repeat;
  mask: linear-gradient(180deg, transparent 0%, #000 12%, #000 22%, transparent 34%) 0 0 / 100% 300% no-repeat;
  pointer-events: none;
}
.fr-s5[data-stage="tracing"] .s5-glow,
.fr-s5[data-stage="preparing"] .s5-glow,
.fr-s5[data-stage=""] .s5-glow {
  opacity: 0.9;
  animation: s5-mask 3.2s var(--ease-ink) infinite;
}
@keyframes s5-mask {
  from {
    -webkit-mask-position: 0 100%;
    mask-position: 0 100%;
  }
  to {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}
/* finding your lines: baselines draw left to right */
.s5-lines i {
  position: absolute;
  height: 2px;
  margin-top: -1px;
  background: var(--gold);
  box-shadow: 0 0 6px rgba(231, 189, 106, 0.8);
  transform: rotate(var(--a, 0rad)) scaleX(0);
  transform-origin: left;
  opacity: 0;
}
.fr-s5:not([data-stage="tracing"]):not([data-stage="preparing"]):not([data-stage=""]) .s5-lines i {
  opacity: 0.85;
  transform: rotate(var(--a, 0rad)) scaleX(1);
  transition: transform 600ms var(--ease-out) var(--d), opacity 200ms var(--d);
}
.fr-s5[data-stage="building"] .s5-lines i,
.fr-s5[data-stage="fitting"] .s5-lines i,
.fr-s5[data-stage="finishing"] .s5-lines i {
  opacity: 0.35;
}
/* reading every letter: boxes pop around letters */
.s5-marks i {
  position: absolute;
  border: 1px solid rgba(201, 151, 63, 0.9);
  border-radius: 1px;
  background: rgba(231, 189, 106, 0.12);
  animation: s5-pop 300ms var(--ease-lift) var(--d) both;
}
@keyframes s5-pop {
  from {
    opacity: 0;
    transform: scale(1.8);
  }
}
.s5-thumb-stage {
  display: none;
}
.s5-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.s5-sub {
  margin-top: 8px;
  font-size: calc(17px * var(--ts, 1));
  color: var(--on-sky-2);
}
.s5-count {
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
  color: var(--on-sky);
}
.fr[data-step="3"] .fr-clock {
  visibility: hidden;
}
.s5-wallwrap {
  padding: 18px 18px 14px;
  transition: transform var(--t-epic) var(--ease-out);
}
.fr-s5.final .s5-wallwrap {
  transform: scale(0.96);
}
.s5-wallhead {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.s5-wallhead b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(22px * var(--ts, 1));
}
.s5-n {
  flex: 1;
  font-family: var(--font-display);
  font-size: calc(18px * var(--ts, 1));
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.s5-wallhead .fr-tag {
  color: var(--ink-2);
}
.s5-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 4px;
}
.s5-cell {
  position: relative;
  aspect-ratio: 1;
  border-radius: 6px;
  background: color-mix(in srgb, var(--paper-lit) 40%, transparent);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
}
.s5-cell > i {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 400 24px var(--font-display);
  font-style: normal;
  color: var(--ink);
  opacity: 0.12;
}
.s5-cell canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.s5-cell.has {
  background: var(--paper-lit);
  box-shadow: 0 1px 2px rgba(40, 30, 70, 0.12);
}
.s5-cell.has > i {
  opacity: 0;
}
.s5-cell.has canvas {
  opacity: 1;
}
.s5-cell.pop {
  animation: s5-land 420ms var(--ease-lift);
}
@keyframes s5-land {
  40% {
    box-shadow: 0 0 0 2px var(--gold-hi), 0 0 14px var(--bloom);
  }
}
.s5-cell em {
  position: absolute;
  right: 3px;
  bottom: 1px;
  font: 600 calc(9.5px * var(--ts, 1)) var(--font-body);
  font-style: normal;
  color: #7a6a50;
}
.s5-flyer {
  position: fixed;
  z-index: 130;
  pointer-events: none;
  border-radius: 6px;
  background: var(--paper-lit);
  box-shadow: 0 8px 22px -8px rgba(40, 30, 70, 0.5);
  transform-origin: 0 0;
}
.s5-ribbon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-2);
}
.s5-ribbon:empty::before {
  content: "Your words will gather here";
  font-size: calc(13px * var(--ts, 1));
  color: var(--ink-3);
}
.s5-word {
  padding: 5px 8px;
  border-radius: 3px;
  background: var(--paper-lit);
  box-shadow: 0 1px 3px rgba(40, 30, 70, 0.14);
  animation: s2-fly 720ms var(--ease-lift) both;
}
.s5-word canvas {
  display: block;
}
.s5-stages {
  display: grid;
  gap: 2px;
  margin-top: 18px;
  padding: 0;
  list-style: none;
}
.s5-stages li {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  font-size: calc(15px * var(--ts, 1));
  color: color-mix(in srgb, var(--on-sky) 40%, transparent);
}
.s5-stages li i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px currentColor;
}
.s5-stages li b {
  font-weight: 500;
}
.s5-stages li em {
  font-style: normal;
  font-size: calc(13px * var(--ts, 1));
  font-variant-numeric: tabular-nums;
}
.s5-stages li.done {
  color: var(--on-sky-2);
}
.s5-stages li.done i {
  background: var(--gold-hi);
  box-shadow: 0 0 6px var(--gold-hi);
}
.s5-stages li.on {
  color: var(--on-sky);
}
.s5-stages li.on b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(22px * var(--ts, 1));
}
.s5-stages li.on i {
  background: var(--gold);
  animation: fr-pulse 1.4s ease-in-out infinite;
}
@keyframes fr-pulse {
  50% {
    box-shadow: 0 0 0 5px rgba(231, 189, 106, 0.25);
  }
}
.s5-stages li.skip b {
  text-decoration: line-through;
}
.s5-left {
  margin-top: 14px;
  font-size: calc(14.5px * var(--ts, 1));
  color: var(--on-sky-2);
}
.s5-acts {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}
.s5-cancel {
  font-size: calc(14px * var(--ts, 1));
  color: var(--on-sky-2);
}
.s5-problem {
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: 18px;
  background: var(--fr-veil);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: inset 0 0 0 1px var(--hairline-gold);
  color: var(--ink);
}
.s5-problem b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
}
.s5-problem p {
  margin: 4px 0 10px;
  color: var(--ink-2);
}
.s5-problem details {
  margin-top: 10px;
  font-size: calc(13px * var(--ts, 1));
  color: var(--ink-3);
}
.fr-s5.dim .s5-page {
  filter: brightness(0.7) saturate(0.6);
}
@media (max-width: 900px) {
  .s5-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .s5-l {
    display: flex;
    align-items: center;
    gap: 14px;
    order: 0;
  }
  .s5-lightbox {
    flex: none;
    width: 120px;
    padding: 0;
    background: none;
  }
  .s5-thumb-stage {
    display: block;
    font-size: calc(14px * var(--ts, 1));
    color: var(--on-sky-2);
  }
  .s5-count {
    display: none;
  }
  .fr[data-step="3"] .fr-clock {
    visibility: visible;
  }
  .s5-wall {
    grid-template-columns: repeat(9, minmax(0, 1fr));
    max-height: 196px;
    overflow: auto;
  }
  .s5-head {
    margin-bottom: 12px;
  }
}
.s7-bar {
  position: sticky;
  bottom: 12px;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 16px;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin: 18px auto 0;
  padding: 14px 14px 14px 22px;
  animation: fr-enter var(--t-step) var(--ease-out) both;
}
.s7-bar[hidden] {
  display: none;
}
.s7-field {
  grid-column: 1;
}
.s7-input {
  width: 100%;
  height: 48px;
  border: 0;
  border-bottom: 1.5px solid var(--hand-ink);
  background: transparent;
  font: 400 24px var(--font-display);
  color: var(--ink);
  outline: none;
}
.s7-input::placeholder {
  color: var(--ink-3);
  font-style: italic;
}
.s7-chips {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.s7-chips .fr-chip {
  height: 30px;
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line-3);
}
.s7-go {
  grid-column: 2;
  grid-row: 1 / span 2;
}
.s7-toast {
  position: absolute;
  left: 50%;
  top: 12px;
  z-index: 5;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: calc(14.5px * var(--ts, 1));
  color: var(--ink);
  background: var(--fr-veil);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: inset 0 0 0 1px var(--hairline-gold), var(--sh-float);
  transform: translateX(-50%);
  animation: fr-enter var(--t-step) var(--ease-out) both;
  transition: opacity var(--t-base);
}
.s7-toast.out {
  opacity: 0;
}
.s7-toast .link-btn {
  color: var(--gold-lo);
  font-weight: 640;
}
@media (max-width: 760px) {
  .s7-bar {
    grid-template-columns: 1fr;
    bottom: 0;
    border-radius: 24px 24px 0 0;
    margin: 12px -16px 0;
    width: calc(100% + 32px);
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }
  .s7-go {
    grid-column: 1;
    grid-row: auto;
  }
  .s7-go .btn {
    width: 100%;
    justify-content: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .s5-page {
    transition-duration: 400ms !important;
    animation: none !important;
  }
}

/* ------------------------------------------------------------------ the landing's way in (S1) */
.hero-ctas .btn.hero-primary {
  --h: 56px;
  padding: 0 26px;
  font-size: calc(16.5px * var(--ts, 1));
  animation: cta-breathe 1200ms var(--ease-out) 2.2s 1 both;
}
@keyframes cta-breathe {
  0% {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent), 0 0 0 0 rgba(231, 189, 106, 0);
  }
  45% {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 70%, transparent), 0 0 24px 4px rgba(231, 189, 106, 0.55);
  }
  100% {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 60%, transparent), 0 0 12px 0 rgba(231, 189, 106, 0.3);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-ctas .btn.hero-primary {
    animation: none;
  }
}
.hero-desk {
  transition: transform var(--t-base) var(--ease-out);
}
.hero:has(.hero-primary:hover) .hero-desk {
  transform: rotate(-1.5deg) translateX(-8px);
}
.hero-sample {
  padding: 8px 6px;
  font-size: calc(15px * var(--ts, 1));
  font-weight: 560;
  color: var(--on-sky);
  text-decoration: underline;
  text-decoration-color: var(--hairline-gold);
  text-underline-offset: 5px;
}
.hero-sample:hover {
  text-decoration-color: var(--gold);
}
.hero-trust {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.hd-sheet.turning {
  transition: transform 720ms var(--ease-ink), opacity 720ms var(--ease-ink) !important;
  transform: perspective(1400px) rotateY(-28deg) translateX(-12%) rotate(-3deg);
  transform-origin: 0 50%;
  opacity: 0 !important;
}
.nav-cta .nc-short {
  display: none;
}
@media (max-width: 700px) {
  .nav-cta .nc-long {
    display: none;
  }
  .nav-cta .nc-short {
    display: inline;
  }
  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .hero-ctas .btn.hero-primary {
    justify-content: center;
  }
  .hero-sample {
    text-align: center;
  }
}
.hand-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px 0 6px;
  border-radius: 999px;
  color: inherit;
  text-decoration: none;
  font-size: calc(14px * var(--ts, 1));
  font-weight: 560;
  background: color-mix(in srgb, var(--air) 50%, transparent);
  box-shadow: inset 0 0 0 1px var(--hairline-gold);
}
.hc-dot {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--paper-lit);
}
.hc-dot canvas {
  width: 28px;
  height: 28px;
}
@media (max-width: 700px) {
  .hc-name {
    display: none;
  }
  .hand-chip {
    padding: 0 6px;
  }
}
@media (max-width: 700px) {
  .hero-ctas .btn.hero-primary {
    width: 100%;
  }
}

/* ------------------------------------------------------------------ the camera: one guidance chip, a quad that turns gold */
.cam-guide i {
  border-width: 2px;
  transition: border-color var(--t-ui), transform var(--t-ui) var(--ease-out);
}
.cam-guide.lock i {
  border-color: var(--gold-hi);
  filter: drop-shadow(0 0 8px rgba(231, 189, 106, 0.8));
}
.cam-guide.lock i:nth-child(1) { transform: translate(4px, 4px); }
.cam-guide.lock i:nth-child(2) { transform: translate(-4px, 4px); }
.cam-guide.lock i:nth-child(3) { transform: translate(4px, -4px); }
.cam-guide.lock i:nth-child(4) { transform: translate(-4px, -4px); }
.cam-guide.half {
  top: 26%;
  bottom: 26%;
  aspect-ratio: 1.38;
}
.cam-flash.go {
  animation: cam-flash2 180ms ease-out;
}
@keyframes cam-flash2 {
  0% { opacity: 0; }
  40% { opacity: 0.6; }
  100% { opacity: 0; }
}
.cam-tiprow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.cam-tip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(20, 20, 40, 0.55);
  color: #fff;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.cam-tip[data-ok="1"] {
  color: #2a1c05;
  background: var(--gold-hi);
}
.cam-half {
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  font: 560 calc(13px * var(--ts, 1)) var(--font-body);
  color: inherit;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-3);
  cursor: pointer;
}
.cam-half[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px var(--gold);
  color: var(--gold);
}

/* ------------------------------------------------------------------ library: a hand still being learned */
.hand-learning {
  text-decoration: none;
  color: inherit;
}
.hand-learning .ht-paper {
  position: relative;
  background: repeating-linear-gradient(180deg, transparent 0 13px, rgba(80, 110, 190, 0.12) 13px 14px), var(--paper-lit);
}
.hl-bar {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 18%;
  height: 2px;
  background: rgba(143, 102, 32, 0.2);
}
.hl-bar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--p);
  background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi));
  box-shadow: 0 0 6px var(--gold-hi);
}
.s5-n {
  white-space: nowrap;
}
@media (max-width: 760px) {
  .s5-wallhead .fr-tag {
    display: none;
  }
}
.s5-ribbon {
  flex-wrap: nowrap;
  overflow: hidden;
  min-height: 40px;
  -webkit-mask: linear-gradient(90deg, #000 85%, transparent);
  mask: linear-gradient(90deg, #000 85%, transparent);
}
.s5-word {
  flex: none;
  padding: 3px 6px;
}
.fr-off {
  justify-content: center;
}
.fr-off-card {
  display: grid;
  gap: 14px;
  justify-items: start;
  width: min(620px, 100%);
  margin: auto;
  padding: clamp(24px, 4vw, 40px);
}
.fr-off-card .lf-h,
.fr-off-card .lf-sub {
  color: var(--ink);
}
.fr-off-card .lf-sub {
  margin: 0;
  color: var(--ink-2);
}
.fr-off-nib {
  color: var(--gold);
}
.s3-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: calc(13.5px * var(--ts, 1));
  color: var(--ink-2);
}
.s3-link .ico {
  width: 14px;
  height: 14px;
}
.s3-card .s3-acts:has(.s3-link) {
  gap: 4px 14px;
}
.s5-l,
.s5-r,
.s5-wallwrap,
.s5-ribbon {
  min-width: 0;
}
.s5-wall {
  position: relative;
}
.hc-dot canvas {
  width: auto;
  height: auto;
  max-width: 22px;
  max-height: 22px;
}

/* ================================================================== round 4: one column, one pill, one clock */

/* ---- one display scale and one pill, for every step */
.fr .lf-h.small {
  font-size: clamp(30px, 3vw, 48px);
  line-height: 1.17;
}
.fr-tag,
.s3-status,
.s3-chips li,
.fr-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  font: 500 calc(12px * var(--ts, 1))/1 var(--font-body);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.s3-status {
  font-weight: 600;
}
.fr-pill {
  border: 0;
  color: var(--ink);
  background: var(--fr-veil);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px var(--hairline-gold);
  cursor: pointer;
}
.fr-pill[hidden] {
  display: none;
}

/* ---- the bar: the numerals and tools in the content's own column */
.fr-bar {
  padding: 0;
}
.fr-bar-in {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
  padding: 0 clamp(16px, 3.4vw, 48px);
}
/* the path between numerals: solid gold where it has been flown, a faint dash ahead */
.fr-nums li + li::before {
  height: 0;
  background: none;
  border-top: 1px dashed color-mix(in srgb, var(--on-sky) 30%, transparent);
}
.fr-nums li.done::before,
.fr-nums li.on::before {
  border-top: 1.5px solid var(--gold);
}
/* a step done: its numeral sits in a filled gold disc, with a small tick */
.fr-nums li.done .fr-ring-bg {
  fill: color-mix(in srgb, var(--gold-hi) 26%, transparent);
  stroke: var(--hairline-gold);
}
.fr-nums li.done .fr-num::after {
  right: -1px;
  top: -1px;
  width: 7px;
  height: 4px;
  border-radius: 0;
  background: none;
  box-shadow: none;
  border-left: 1.5px solid var(--gold-lo);
  border-bottom: 1.5px solid var(--gold-lo);
  transform: rotate(-45deg);
}
:root[data-theme="dark"] .fr-nums li.done .fr-num::after {
  border-color: var(--gold-hi);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fr-nums li.done .fr-num::after {
    border-color: var(--gold-hi);
  }
}
/* one clock: on iv the big one replaces the bar's at desktop; on v there is none */
.fr[data-step="3"] .fr-clock,
.fr[data-step="4"] .fr-clock {
  display: none;
}
@media (max-width: 900px) {
  .fr[data-step="3"] .fr-clock:not([hidden]) {
    display: inline;
  }
}
@media (max-width: 480px) {
  /* numerals only, the current one in gold; the screen's own title says where you are */
  .fr-nums li .fr-num-label,
  .fr-nums li.on .fr-num-label {
    display: none;
  }
  .fr-nums {
    flex: none;
    gap: 3px;
  }
  .fr-nums li + li::before {
    width: 6px;
  }
  .fr-bar-in {
    gap: 8px;
    padding: 0 12px 0 14px;
  }
  .fr-tools {
    margin-left: auto;
  }
}

/* ---- ii. check */
.s3-chips {
  flex-wrap: wrap;
  overflow: visible;
}
.s3-chips li[tabindex] {
  cursor: help;
  box-shadow: inset 0 0 0 1px var(--hairline-gold);
}
.s3-more {
  font-size: calc(13px * var(--ts, 1));
  color: var(--ink-3);
}
/* a page that needs another shot: warm coral from the evening, not alarm red */
.s3-card[data-level="bad"] {
  --coral: #b4502c;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--coral) 38%, transparent), var(--sh-float);
}
.s3-status[data-level="bad"],
.s3-issues li[data-level="bad"] b {
  color: #b4502c;
}
.s3-status[data-level="bad"],
.s3-chips li[data-level="bad"] {
  background: rgba(214, 112, 70, 0.13);
}
:root[data-theme="dark"] .s3-status[data-level="bad"],
:root[data-theme="dark"] .s3-issues li[data-level="bad"] b {
  color: #f2a27c;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .s3-status[data-level="bad"],
  :root:not([data-theme="light"]) .s3-issues li[data-level="bad"] b {
    color: #f2a27c;
  }
}
/* the page numeral: a small badge off the photo's corner */
.s3-pagewrap {
  position: relative;
  align-self: start;
}
.s3-num {
  position: absolute;
  left: -8px;
  top: -8px;
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: 999px;
  font: italic calc(15px * var(--ts, 1))/1 var(--font-display);
  color: var(--gold-lo);
  background: var(--paper-lit);
  box-shadow: inset 0 0 0 1px var(--hairline-gold), 0 2px 6px rgba(40, 30, 70, 0.18);
}
/* Retake, Replace, Remove: one row; Replace and Remove are icons */
.s3-acts {
  flex-wrap: wrap;
}
.s3-icon {
  width: 40px;
  padding: 0 !important;
  justify-content: center;
}
.s3-link.s3-icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
}
.s3-link.s3-icon:hover {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.s3-anyway.btn {
  flex: 1 1 100%;
  justify-content: center;
  margin: 4px 0 0;
}
@media (max-width: 760px) {
  .s3-icon {
    width: 44px;
  }
}
/* the screen scrolls far enough that nothing ends under the sticky foot */
.fr-body {
  scroll-padding-bottom: 150px;
}
/* disabled says so in readable words: solid, dimmed, and its reason beside it */
.fr .btn.fr-primary[aria-disabled="true"] {
  background: color-mix(in srgb, var(--ink) 58%, var(--air));
  color: var(--air);
  outline: none;
  box-shadow: none;
  opacity: 1;
}
.fr .btn.fr-primary[aria-disabled="true"] .ico {
  opacity: 0.7;
}
.fr-why {
  font-weight: 560;
  color: var(--on-sky);
}
.fr-why:not(:empty)::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 8px 1px 0;
  border-radius: 50%;
  background: var(--gold);
}

/* ---- iv. learning: an airy wall, a short ribbon, the stages in view */
.s5-wall {
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 5px;
}
.s5-cell {
  border-radius: 5px;
  background: color-mix(in srgb, var(--paper-lit) 8%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 13%, transparent);
  transition: background var(--t-base), box-shadow var(--t-base);
}
.s5-cell > i {
  font-size: calc(19px * var(--ts, 1));
  opacity: 0.25;
}
.s5-cell.has {
  background: var(--paper-lit);
  box-shadow: 0 0 0 1px var(--hairline-gold), 0 2px 10px -2px rgba(231, 189, 106, 0.55);
}
.s5-ribbon {
  flex-wrap: wrap;
  max-height: 84px;
  overflow: hidden;
  -webkit-mask: none;
  mask: none;
}
.s5-word {
  display: grid;
  place-items: center;
  height: 38px;
  padding: 0 9px;
  border-radius: 3px;
  background: var(--paper-lit);
  box-shadow: 0 1px 2px rgba(40, 30, 70, 0.12), 0 4px 12px -6px rgba(231, 189, 106, 0.5);
}
.s5-wallwrap {
  box-sizing: border-box;
  max-width: 100%;
}
.s5-count.over {
  font-size: 28px;
}
@media (min-width: 901px) {
  .s5-lightbox {
    padding: 10px;
  }
  .s5-page {
    width: min(100%, 440px, calc((100vh - 260px) * 0.72));
  }
}
@media (max-width: 900px) {
  .s5-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .s5-lightbox {
    width: 84px;
  }
  .s5-head {
    margin-bottom: 10px;
  }
  .s5-wallwrap {
    padding: 14px 12px 12px;
    border-radius: 18px;
  }
  .s5-wall {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    max-height: 156px;
  }
  .s5-cell > i {
    font-size: calc(15px * var(--ts, 1));
  }
  .s5-ribbon {
    max-height: 40px;
  }
  .s5-word {
    height: 34px;
  }
  /* the stages in one line: dots for each, the name of the one now */
  .s5-stages {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
  }
  .s5-stages li {
    display: flex;
    min-height: 24px;
    gap: 8px;
  }
  .s5-stages li:not(.on) b,
  .s5-stages li:not(.on) em {
    display: none;
  }
  .s5-stages li.on b {
    font-size: calc(18px * var(--ts, 1));
  }
}
/* the arrow takes the button's own colour where the button is light */
:root[data-theme="dark"] .fr .btn-ink .ico:last-child {
  color: currentColor;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fr .btn-ink .ico:last-child {
    color: currentColor;
  }
}

/* ---- the landing's first screen */
.hero-sample {
  display: inline-flex;
  align-items: center;
  height: 56px;
  padding: 0 6px;
}
.hero-micro {
  margin-top: 20px;
}
@media (min-width: 961px) {
  /* (the hand line's box keeps room for its descenders; the lede tucks up under them, about 32px below the ink) */
  .hero-lede {
    margin-top: -22px;
  }
}
@media (max-width: 760px) {
  .hero {
    padding-top: 80px;
  }
  .hl-long {
    display: none;
  }
  .hero-grid {
    gap: 30px;
  }
  .hero-lede {
    margin-top: 10px;
  }
  .hero-ctas {
    margin-top: 20px;
  }
  .hero-micro {
    margin-top: 14px;
  }
  .hero-sample {
    justify-content: center;
    height: 44px;
  }
}

/* ---- the studio: a hand still learning, in its bar */
.st-learning {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--hairline-gold);
}
.st-learning i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  animation: fr-pulse 1.4s ease-in-out infinite;
}

/* ---- viii. writing on a photo, inside the first run's frame */
.modal-back.fr-rw-back {
  background: var(--air);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  overflow: hidden;
}
.fr-rw-sky {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.modal.fr-rw {
  position: relative;
  z-index: 1;
  width: min(1100px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  overflow: auto;
  border-radius: 24px;
  background: var(--fr-veil);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: inset 0 0 0 1px var(--veil-edge), var(--sh-float);
}
.modal.fr-rw > h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 3vw, 48px);
  line-height: 1.17;
}
.modal.fr-rw > .modal-x {
  display: none;
}
.fr-rw-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.fr-rw-bar .grow {
  flex: 1;
}
.fr-rw-arr {
  transform: scaleX(-1);
}
.fr-rw .fr-lock {
  color: var(--ink);
}
@media (max-width: 760px) {
  .modal-back.fr-rw-back {
    padding: 8px;
  }
  .modal.fr-rw {
    width: 100%;
    max-height: calc(100dvh - 16px);
  }
}
@media (max-width: 760px) {
  /* a phone card: a small thumbnail beside the status, and the actions across the whole card */
  .s3-card {
    grid-template-columns: 64px minmax(0, 1fr);
  }
  .s3-card .s3-acts {
    margin-left: -78px;
  }
}
.st-chip.st-learning {
  flex: none;
  max-width: none;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .st-chip.st-learning {
    padding: 0 10px;
    font-size: calc(13px * var(--ts, 1));
  }
}

/* ---- pass 2: the step in words under the bar on a phone; no sound toggle there */
.fr-bar {
  position: relative;
}
.fr-stepname {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin: 0;
  pointer-events: none;
  color: var(--on-sky);
  opacity: 0.85;
}
@media (max-width: 760px) {
  .fr .fr-snd {
    display: none;
  }
}

/* ================================================================== polish pass: learning energy, the reveal's beat */
.s5-meter {
  --k: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
}
.s5-meter-track {
  position: relative;
  height: 6px;
  border-radius: 99px;
  overflow: hidden;
  background: color-mix(in srgb, var(--on-sky) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-sky) 8%, transparent);
}
.s5-meter-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(max(var(--k), 0.02) * 100%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi) 80%, #fff6dc);
  box-shadow: 0 0 14px rgba(231, 189, 106, 0.75);
  transition: width 900ms var(--ease-out);
  overflow: hidden;
}
.s5-meter.busy .s5-meter-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.85) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: s5-sheen 1.6s var(--ease-io, ease-in-out) infinite;
}
@keyframes s5-sheen {
  to { transform: translateX(100%); }
}
.s5-meter-pct {
  min-width: 3.2em;
  text-align: right;
  font: 500 calc(13px * var(--ts, 1))/1 var(--font-body);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--on-sky-2);
}
/* the clock: every second lands, the last ten glow, the final 3·2·1 hits */
.s5-count {
  display: inline-block;
  transform-origin: 100% 80%;
}
.s5-count.tick {
  animation: s5-tick 420ms var(--ease-out) both;
}
@keyframes s5-tick {
  from { transform: translateY(-5px); opacity: 0.55; }
}
.fr-s5.final .s5-count {
  color: var(--gold-hi);
  text-shadow: 0 0 22px rgba(231, 189, 106, 0.65);
}
.s5-count.beat {
  font-size: 96px;
  color: var(--gold-hi);
  text-shadow: 0 0 30px rgba(231, 189, 106, 0.8);
  animation: s5-beat 520ms var(--ease-lift) both;
}
@keyframes s5-beat {
  from { transform: scale(1.7); opacity: 0; filter: blur(6px); }
  60% { opacity: 1; filter: none; }
}
.fr-s5.s5-landed .s5-wallwrap {
  box-shadow: 0 0 0 1px var(--hairline-gold), 0 0 60px -10px rgba(231, 189, 106, 0.7);
  transition: box-shadow 600ms var(--ease-out);
}
.fr-s5.s5-landed .s5-cell.has {
  animation: s5-flare 700ms var(--ease-out) both;
}
@keyframes s5-flare {
  40% { box-shadow: 0 0 0 1px var(--gold-hi), 0 0 18px rgba(231, 189, 106, 0.9); }
}
/* the words ribbon shows two whole rows, the rest fades out instead of being cut */
.s5-ribbon {
  max-height: 96px;
  -webkit-mask: linear-gradient(180deg, #000 78%, transparent);
  mask: linear-gradient(180deg, #000 78%, transparent);
}
.s5-stages li.done i {
  transition: background 300ms, box-shadow 300ms;
}
@media (prefers-reduced-motion: reduce) {
  .s5-meter.busy .s5-meter-fill::after,
  .s5-count.tick,
  .s5-count.beat,
  .fr-s5.s5-landed .s5-cell.has {
    animation: none !important;
  }
}
@media (max-width: 760px) {
  .s5-meter { margin-bottom: var(--sp-3); }
  .s5-count.beat { font-size: 64px; }
}
/* on phones the letter wall is capped; fade its last row out instead of a hard cut */
@media (max-width: 900px) {
  .s5-wall {
    overflow: hidden;
    -webkit-mask: linear-gradient(180deg, #000 80%, transparent);
    mask: linear-gradient(180deg, #000 80%, transparent);
  }
}

/* ================================================================== onboard review fixes (2026-10-09)
   Contrast measured from screen pixels; spacing on the --sp-* scale; type on one scale. */
.fr {
  --fs-xs: 12px;
  --fs-sm: 13.5px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 19px;
  --fr-bad-ink: color-mix(in srgb, var(--bad) 70%, var(--ink));
  --fr-warn-ink: color-mix(in srgb, var(--warn) 62%, var(--ink));
  --fr-good-ink: color-mix(in srgb, var(--good) 70%, var(--ink));
  --actbar-h: 88px;
}

/* 1. learning, reopened with no local photo: one column, and a sized placeholder */
.s5-grid.nophoto {
  grid-template-columns: minmax(0, 1fr);
  max-width: 760px;
}
.s5-grid.nophoto .s5-l {
  display: none;
}
.lf-pdf.big {
  min-height: 0;
  aspect-ratio: 148 / 186;
}

/* 3. the transcript wraps; a long written line hangs under itself */
.fr .lf-ta,
.fr .lf-ta-mirror-in .lf-mrow {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.fr .lf-ta {
  overflow-x: hidden;
}

/* 4. the numerals and labels on the sky */
.fr-nums li {
  color: color-mix(in srgb, var(--on-sky) 84%, transparent);
}
.fr .fr-num-label {
  color: inherit;
}
.fr-nums li.on .fr-num-label {
  color: var(--on-sky);
}
.fr-nums li.on .fr-num em,
.fr-nums li.done .fr-num em {
  color: var(--gold-lo);
}
:root[data-theme="dark"] .fr-nums li.on .fr-num em,
:root[data-theme="dark"] .fr-nums li.done .fr-num em {
  color: var(--gold-hi);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fr-nums li.on .fr-num em,
  :root:not([data-theme="light"]) .fr-nums li.done .fr-num em {
    color: var(--gold-hi);
  }
}
/* 4/16. one frosted bar on every step, fading out at its foot (no hard band on the reveal) */
.fr-bar {
  isolation: isolate;
}
.fr-bar::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw) -12px;
  z-index: -1;
  background: var(--fr-veil);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
  mask-image: linear-gradient(#000 55%, transparent);
  pointer-events: none;
}

/* 5. focus ring: 3:1 on cream and peach */
.fr :focus-visible {
  outline: 2px solid var(--gold-lo);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--gold-hi) 45%, transparent);
}
:root[data-theme="dark"] .fr :focus-visible {
  outline-color: var(--gold-hi);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fr :focus-visible {
    outline-color: var(--gold-hi);
  }
}

/* 6. the first-write toast: above the dock on a phone; its links readable */
.s7-toast .link-btn {
  color: color-mix(in srgb, var(--gold-lo) 75%, var(--ink));
}
:root[data-theme="dark"] .s7-toast .link-btn {
  color: var(--gold-hi);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .s7-toast .link-btn {
    color: var(--gold-hi);
  }
}
@media (max-width: 760px) {
  .s7-toast {
    position: fixed;
    top: auto;
    bottom: calc(var(--actbar-h) + var(--sp-4));
    max-width: calc(100vw - 2 * var(--sp-4));
    white-space: normal;
    text-align: center;
    border-radius: 18px;
  }
}

/* 7. check step: the pill, chip values and links at AA */
.fr .s3-status {
  font-size: var(--fs-sm);
}
.fr .s3-status[data-level="ok"] { color: var(--fr-good-ink); }
.fr .s3-status[data-level="warn"] { color: var(--fr-warn-ink); }
.fr .s3-status[data-level="bad"] { color: var(--fr-bad-ink); }
.fr .s3-chips li { color: var(--ink-2); font-size: var(--fs-xs); }
.fr .s3-chips li b { color: var(--ink); }
.fr .s3-link { color: var(--ink); }

/* 8. check step: equal cards, one grid, the numeral inside the card */
.s3-cards {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
  grid-auto-rows: 1fr;
  gap: var(--sp-5);
  align-items: stretch;
}
.s3-card,
.s3-card[data-level="bad"] {
  grid-column: auto;
  gap: var(--sp-5);
}
.s3-num {
  top: var(--sp-2);
  left: var(--sp-2);
}
@media (max-width: 760px) {
  .s3-cards { grid-auto-rows: auto; }
}

/* 9. a main button that's off still looks like ours */
.fr .btn.fr-primary[aria-disabled="true"],
.fr .btn.fr-primary[disabled] {
  background: var(--ink);
  color: var(--air);
  opacity: 0.55;
  cursor: not-allowed;
}
.fr .btn.fr-primary[aria-disabled="true"] .ico {
  opacity: 1;
}

/* 10. the words step clears its bar */
.fr-s4.lf-view,
.fr-s4 .fr-body {
  padding-bottom: calc(var(--actbar-h) + var(--sp-5));
}

/* 11. details sheet: above the bar, one card deep, the sample written large */
.fr-sheet-back {
  z-index: 1000;
}
.fr-sheet {
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
}
.fr-sheet .lf-cmp-row {
  background: none;
  box-shadow: none;
  padding-inline: 0;
}
.fr-sheet .lf-mine {
  max-width: 100%;
  height: auto;
}
.fr-sheet .s4-name .inp,
.fr-sheet .inp {
  width: 100%;
  max-width: 100%;
}
.fr-sheet .fr-chip {
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-3);
}

/* 12. learning: placeholders readable, the wall from its top */
.s5-cell > i {
  opacity: 0.45;
}
.s5-stages li {
  color: color-mix(in srgb, var(--on-sky) 62%, transparent);
}
.s5-cell em {
  font-size: calc(11px * var(--ts, 1));
  color: var(--ink-2);
}
@media (max-width: 900px) {
  .s5-wall {
    -webkit-mask: linear-gradient(180deg, #000 85%, transparent);
    mask: linear-gradient(180deg, #000 85%, transparent);
  }
}

/* 13. tray: neutral until the check says something; the count in the UI voice */
.s2-thumb[data-level="bad"],
.s2-thumb[data-level="warn"] {
  box-shadow: var(--sh-paper), 0 0 0 1px var(--line-2);
}
.s2-count {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--on-sky-2);
}
@media (max-width: 760px) {
  .fr-s2 .s2-tray:not(:empty) {
    order: -1;
  }
}

/* 14. the name field as wide as the editor */
.s4-name .inp {
  max-width: min(100%, 480px);
  width: 100%;
  text-overflow: ellipsis;
}
.s4-name .inp:focus {
  text-overflow: clip;
}

/* 15. the first write: two lines that grow */
.s7-input {
  height: auto;
  min-height: 48px;
  resize: none;
  field-sizing: content;
  line-height: 1.25;
  padding: var(--sp-2) 0;
}

/* 20. the transcript at night: not a cream slab */
:root[data-theme="dark"] .s4-editor .lf-ta-wrap {
  background: color-mix(in srgb, var(--paper) 12%, var(--surface));
}
:root[data-theme="dark"] .s4-editor .lf-ta,
:root[data-theme="dark"] .s4-editor .lf-ta-mirror {
  color: var(--ink);
}
:root[data-theme="dark"] .fr .lf-flaghead {
  background: color-mix(in srgb, var(--warn) 16%, var(--surface));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .s4-editor .lf-ta-wrap {
    background: color-mix(in srgb, var(--paper) 12%, var(--surface));
  }
  :root:not([data-theme="light"]) .s4-editor .lf-ta,
  :root:not([data-theme="light"]) .s4-editor .lf-ta-mirror {
    color: var(--ink);
  }
  :root:not([data-theme="light"]) .fr .lf-flaghead {
    background: color-mix(in srgb, var(--warn) 16%, var(--surface));
  }
}

/* 18. no stars through the headings on a phone at night */
@media (max-width: 760px) {
  .fr .lf-h {
    position: relative;
    isolation: isolate;
  }
  .fr .lf-h::before {
    content: "";
    position: absolute;
    inset: -24px;
    z-index: -1;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--sky-mid, #1a1d45) 90%, transparent), transparent);
    pointer-events: none;
    opacity: 0;
  }
  :root[data-theme="dark"] .fr .lf-h::before { opacity: 1; }
}
@media (max-width: 760px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fr .lf-h::before { opacity: 1; }
}

/* 21. spacing on the scale */
.fr-nums { gap: clamp(var(--sp-3), 2.2vw, var(--sp-6)); }
.s2-left, .s2-right { gap: var(--sp-5); }
.s2-srcs, .s2-works, .s2-tray, .fr-actbar, .s5-acts { gap: var(--sp-3); }
.s3-head { margin-bottom: var(--sp-6); }
.s5-head { gap: var(--sp-5); }
.s5-wall { gap: var(--sp-1); }
.fr .lf-sub { margin-top: 0; }
.s2-drop-say { margin: 0; }

/* 22. one type scale: 12 / 13.5 / 15 / 17 / 19 */
.fr .s4-skip { font-size: var(--fs-md); }
.fr .s7-toast { font-size: var(--fs-md); }
.fr .lf-flaghead b { font-size: var(--fs-md); }
.fr .btn.fr-primary { font-size: var(--fs-lg); }
.fr .s3-chips li { font-size: var(--fs-xs); }

/* 24. the step name on a phone, left with its heading */
@media (max-width: 760px) {
  .fr-stepname {
    text-align: left;
    padding-inline: var(--sp-4);
  }
  .fr-nums { gap: var(--sp-2); }
}

/* 26. no bob, no scan, for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .s5-page,
  .s3-scan,
  .s3-page.scanned .s3-scan {
    animation: none !important;
  }
}
/* 11 (cont.): the sample sits on the sheet itself, one paper deep; the header ✕ steps back while a sheet is open */
.fr-sheet .lf-compare {
  margin-top: 0;
  padding: 0;
  background: none;
  box-shadow: none;
}
.fr-sheet .lf-cmp-row {
  padding: 0;
  background: none;
  color: inherit;
}
.fr-sheet .lf-cmp-k {
  color: var(--ink-2);
}
.fr-sheet .lf-cmp-v {
  padding: var(--sp-3) var(--sp-4);
}
.fr:has(.fr-sheet-back.in) .fr-bar .fr-x,
.fr:has(.fr-sheet-back.in) .fr-bar .fr-chip,
.fr:has(.fr-sheet-back.in) .fr-bar .fr-snd {
  visibility: hidden;
}
.s5-cell > i { opacity: 0.6; }
.s5-sub, .s5-meter-pct { color: var(--on-sky); }
.fr-nums li.on .fr-num em, .fr-nums li.done .fr-num em { color: color-mix(in srgb, var(--gold-lo) 80%, var(--ink)); }
:root[data-theme="dark"] .fr-nums li.on .fr-num em, :root[data-theme="dark"] .fr-nums li.done .fr-num em { color: var(--gold-hi); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fr-nums li.on .fr-num em, :root:not([data-theme="light"]) .fr-nums li.done .fr-num em { color: var(--gold-hi); } }
.s2-thumb figcaption { padding: 0 5px; border-radius: 6px; background: rgba(20, 20, 40, 0.6); text-shadow: none; }
/* on a phone the "looks like you wrote it" note sits inside the write bar, in its flow */
@media (max-width: 760px) {
  .fr .s7-toast.inbar {
    position: static;
    transform: none;
    grid-column: 1 / -1;
    justify-self: center;
    margin: 0;
    bottom: auto;
    box-shadow: inset 0 0 0 1px var(--hairline-gold);
  }
  .fr .s7-toast.inbar.out { display: none; }
}
/* the step name sits over the top of the scrolling body on a phone: frost it so content passes under, not through */
@media (max-width: 760px) {
  .fr-stepname {
    z-index: 3;
    padding-block: 2px 12px;
    /* opaque band: the label's own 0.85 opacity let scrolled text read through it */
    opacity: 1;
    color: color-mix(in srgb, var(--on-sky) 85%, transparent);
    background: var(--air);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    -webkit-mask-image: linear-gradient(#000 78%, transparent);
    mask-image: linear-gradient(#000 78%, transparent);
  }
}
@media (max-width: 760px) {
  .fr .fr-bar { z-index: 5; }
}

/* ================================================================== onboarding pass 3 (2026-10-10)
   The way in opens out of the button; each step is one centred composition with its action row attached;
   the learning wait shows only true letters, writing themselves; the reveal writes its message in full. */

/* ---- the way in: the sky widens from the button that was pressed, so the landing is never seen through it */
.lf.fr {
  opacity: 1;
  overflow: hidden;
  clip-path: circle(0px at var(--ox, 50%) var(--oy, 62%));
  transition: clip-path 860ms cubic-bezier(0.7, 0, 0.25, 1);
}
.lf.fr.in {
  clip-path: circle(150vmax at var(--ox, 50%) var(--oy, 62%));
}
.lf.fr.in.settled {
  clip-path: none;
}
.lf.fr.leaving {
  clip-path: none;
  opacity: 0;
  transition: opacity 300ms ease;
}
/* the first screen rises in once the sky is there */
.fr .lf-view.lf-first {
  animation-delay: 360ms;
}
@media (prefers-reduced-motion: reduce) {
  .lf.fr {
    clip-path: none;
    opacity: 0;
    transition: opacity 200ms ease;
  }
  .lf.fr.in {
    opacity: 1;
  }
  .fr .lf-view.lf-first {
    animation-delay: 0ms;
  }
}

/* ---- the bar: clear over the sky at desktop, frosted only while something scrolls under it */
@media (min-width: 761px) {
  .fr-bar::before {
    opacity: 0;
    transition: opacity var(--t-base) var(--ease-out);
  }
  .fr.scrolled .fr-bar::before {
    opacity: 1;
  }
}

/* ---- nothing scrolls sideways (a heading's night glow, a rotated sheet) */
.fr-body {
  overflow-x: hidden;
}

/* ---- the reveal's light, on the frame behind every screen */
.fr-bloom {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 60%;
  width: 170vmax;
  height: 170vmax;
  margin: -85vmax 0 0 -85vmax;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 232, 186, 0.7), rgba(255, 214, 150, 0.26) 32%, rgba(255, 200, 150, 0.08) 52%, transparent 70%);
  opacity: 0;
  transform: scale(0.12);
  transition: opacity 1600ms var(--ease-out), transform 2400ms var(--ease-out);
}
.fr-bloom.on {
  opacity: 1;
  transform: none;
}
:root[data-theme="dark"] .fr-bloom {
  background: radial-gradient(closest-side, rgba(255, 206, 150, 0.36), rgba(227, 154, 90, 0.16) 34%, rgba(160, 100, 140, 0.06) 54%, transparent 70%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fr-bloom {
    background: radial-gradient(closest-side, rgba(255, 206, 150, 0.36), rgba(227, 154, 90, 0.16) 34%, rgba(160, 100, 140, 0.06) 54%, transparent 70%);
  }
}

/* ---- one composition per step: centred in the window at desktop, its action row attached under it */
@media (min-width: 761px) {
  /* (centred by auto margins, never justify-content: a step taller than the window keeps its top in reach) */
  .fr .lf-view > :first-child {
    margin-top: auto;
  }
  .fr .lf-view > :last-child {
    margin-bottom: auto;
  }
  .fr-s2.lf-view,
  .fr-s3.lf-view,
  .fr-s4r.lf-view,
  .fr-off.lf-view {
    padding-bottom: clamp(28px, 6vh, 64px);
  }
  .fr .fr-s2.lf-view > .fr-actbar,
  .fr .fr-s3.lf-view > .fr-actbar {
    margin-top: clamp(28px, 4.5vh, 48px);
    padding: 18px 0 0;
    border-top: 1px solid color-mix(in srgb, var(--on-sky) 12%, transparent);
  }
  .fr-s2 .s2-grid {
    padding-top: 0;
    align-items: center;
  }
}
/* on a phone the sticky bar is the screen's foot, never mid-screen */
@media (max-width: 760px) {
  .fr-s2.lf-view,
  .fr-s3.lf-view {
    padding-bottom: 0;
  }
}

/* ---- i. pages: what works, one line under each sheet */
.s2-works ul {
  display: grid;
  grid-template-columns: repeat(3, 118px);
  gap: 10px;
}
.s2-works li {
  width: auto;
  justify-items: center;
  text-align: center;
}
.s2-works li span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}
.s2-works li span i {
  font-style: normal;
  font-weight: 700;
  color: #b4502c;
}
.s2-works li[data-ok] span i {
  color: var(--gold-lo);
}
:root[data-theme="dark"] .s2-works li span i { color: #f2a27c; }
:root[data-theme="dark"] .s2-works li[data-ok] span i { color: var(--gold-hi); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .s2-works li span i { color: #f2a27c; }
  :root:not([data-theme="light"]) .s2-works li[data-ok] span i { color: var(--gold-hi); }
}
@media (max-width: 760px) {
  .s2-works ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .s2-works li {
    flex: none;
    font-size: calc(12px * var(--ts, 1));
  }
  /* with a page in, the guidance steps aside so the tray and its count lead */
  .fr-s2.has-pages .s2-works {
    display: none;
  }
}
/* a button that can't go yet says so with a small shake */
.fr .btn.nudge {
  animation: fr-nudge 440ms var(--ease-out);
}
@keyframes fr-nudge {
  20% { transform: translateX(-6px); }
  45% { transform: translateX(5px); }
  70% { transform: translateX(-2px); }
}
/* a word from the frame, under the bar; a wrong file in warm coral */
.fr-banner {
  max-width: min(640px, calc(100vw - 32px));
  white-space: normal;
  text-align: left;
  line-height: 1.4;
}
.fr-banner[data-tone="warn"] i {
  background: #d0643e;
  box-shadow: 0 0 0 4px rgba(208, 100, 62, 0.16);
}
.fr-banner i {
  flex: none;
}
@media (max-width: 760px) {
  .fr-banner {
    top: 108px;
    border-radius: 16px;
  }
}

/* ---- ii. check: one centred column the cards fill, so the action row ends where they end */
@media (min-width: 761px) {
  .fr-s3.lf-view {
    max-width: 1040px;
  }
  .fr-s3[data-cards="1"].lf-view {
    max-width: 900px;
  }
  .fr-s3 .s3-cards {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  }
  .fr-s3[data-cards="1"] .s3-card {
    grid-template-columns: 172px minmax(0, 1fr);
    padding: 20px;
  }
}

/* ---- the reading: the page and its words, its own clock */
.s4r-detail {
  font-variant-numeric: tabular-nums;
}
.s4r-time {
  color: var(--on-sky);
}

/* ---- iv. learning */
/* the page, and under it the stages it goes through; the clock, the meter and the wall beside them */
.s5-l {
  display: grid;
  gap: clamp(16px, 2.4vh, 26px);
  align-content: start;
  min-width: 0;
}
@media (min-width: 901px) {
  .fr-s5 .s5-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 4vw, 72px);
    align-items: start;
    padding-top: 0;
  }
  .fr-s5 .s5-page {
    width: min(100%, 460px, calc((100vh - 400px) * 0.76));
  }
  .s5-stagebox {
    width: min(100%, 460px);
    margin: 0 auto;
  }
  /* the alphabet in its own rows: a–m, n–z, A–M, N–Z, 0–9 */
  .fr-s5 .s5-wall {
    grid-template-columns: repeat(13, minmax(0, 1fr));
    gap: 5px;
  }
}
.s5-head {
  align-items: flex-end;
}
.s5-title {
  min-width: 0;
}
.s5-clock {
  display: grid;
  justify-items: end;
  gap: 6px;
  flex: none;
}
.s5-count-k {
  font: 600 calc(11.5px * var(--ts, 1))/1 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-sky-2);
}
.s5-count-k:empty {
  display: none;
}
/* a gold line travels down the page while the learner finds its lines and reads its letters */
.s5-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 16%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(231, 189, 106, 0.16) 72%, rgba(255, 226, 160, 0.9) 97%, transparent);
  transform: translateY(-100%);
}
.fr-s5[data-stage="cutting"] .s5-scan,
.fr-s5[data-stage="reading"] .s5-scan {
  opacity: 1;
  animation: s5-scan 3.4s var(--ease-ink) infinite;
}
@keyframes s5-scan {
  to { transform: translateY(640%); }
}
/* the stages: the one now counts its own seconds and fills its own hairline; done ones get a gold tick */
.s5-stages {
  margin-top: 0;
  gap: 0;
}
.s5-stages li {
  position: relative;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  min-height: 34px;
  column-gap: 12px;
  border-top: 1px solid color-mix(in srgb, var(--on-sky) 9%, transparent);
}
.s5-stages li:first-child {
  border-top: 0;
}
.s5-stages li i {
  justify-self: center;
}
.s5-stages li.done i {
  width: 9px;
  height: 5px;
  margin-top: -3px;
  border-radius: 0;
  background: none;
  box-shadow: none;
  border-left: 1.6px solid var(--gold);
  border-bottom: 1.6px solid var(--gold);
  transform: rotate(-45deg);
}
:root[data-theme="dark"] .s5-stages li.done i { border-color: var(--gold-hi); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .s5-stages li.done i { border-color: var(--gold-hi); }
}
.s5-stages li.on {
  min-height: 46px;
}
.s5-stages li em {
  font-variant-numeric: tabular-nums;
}
.s5-stages li.on em {
  color: var(--on-sky);
  font-weight: 560;
}
.s5-stage-bar {
  position: absolute;
  left: 28px;
  right: 0;
  bottom: -1px;
  height: 1.5px;
  overflow: hidden;
  opacity: 0;
  background: color-mix(in srgb, var(--on-sky) 10%, transparent);
}
.s5-stage-bar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--sp, 0) * 100%);
  background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi));
  box-shadow: 0 0 8px rgba(231, 189, 106, 0.8);
  transition: width 900ms var(--ease-out);
}
.s5-stages li.on .s5-stage-bar {
  opacity: 1;
}
/* the wall: true letters only, each writing itself; at the end the rest are marked as drawn in your style */
.s5-cell.styled {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--hairline-gold);
}
.s5-cell.styled > i {
  font-style: italic;
  color: var(--gold-lo);
  opacity: 0.85;
}
:root[data-theme="dark"] .s5-cell.styled > i { color: var(--gold-hi); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .s5-cell.styled > i { color: var(--gold-hi); }
}
.fr-s5.s5-landed .s5-cell.has {
  animation: s5-flare 760ms var(--ease-out) var(--w, 0ms) both;
}
.fr-s5.s5-landed .s5-cell.styled {
  animation: s5-styled 600ms var(--ease-out) var(--w, 0ms) both;
}
@keyframes s5-styled {
  from { box-shadow: inset 0 0 0 1px transparent; }
}
.fr-s5.s5-landed .s5-wallwrap {
  box-shadow: inset 0 0 0 1px var(--hairline-gold), 0 0 70px -12px rgba(231, 189, 106, 0.75), var(--sh-float);
}
/* words lifted off the page fly into the ribbon */
.s5-word.flown {
  animation: none;
}
.s5-wflyer {
  position: fixed;
  z-index: 130;
  margin: 0;
  pointer-events: none;
  transform-origin: 0 0;
}
/* the foot: what you can do while it learns */
.s5-foot {
  display: grid;
  gap: 12px;
  margin-top: clamp(14px, 2vh, 22px);
}
.s5-foot .s5-left,
.s5-foot .s5-acts {
  margin-top: 0;
}
.s5-foot .s5-left:empty {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .s5-scan,
  .fr-s5.s5-landed .s5-cell.has,
  .fr-s5.s5-landed .s5-cell.styled {
    animation: none !important;
  }
}
@media (max-width: 900px) {
  .fr-s5 .s5-grid {
    gap: 16px;
  }
  .s5-l {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  /* the whole wall on one screen: nine across, no inner scroll */
  .fr-s5 .s5-wall {
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 4px;
    max-height: none;
    overflow: visible;
    -webkit-mask: none;
    mask: none;
  }
  .fr-s5 .s5-cell > i {
    font-size: calc(14px * var(--ts, 1));
  }
  .s5-stagebox {
    margin-top: 2px;
  }
  .s5-stages li {
    border-top: 0;
    min-height: 24px;
  }
  .s5-stages li.on {
    min-height: 24px;
  }
  .s5-stage-bar {
    display: none;
  }
  .s5-stages li.done i {
    width: 7px;
    height: 4px;
  }
}
/* a letter writing itself again as another of your copies: a soft gold breath */
.s5-cell.turn {
  animation: s5-turn 900ms var(--ease-out);
}
@keyframes s5-turn {
  30% { box-shadow: 0 0 0 1px var(--gold-hi), 0 0 16px rgba(231, 189, 106, 0.75); }
}
@media (prefers-reduced-motion: reduce) {
  .s5-cell.turn { animation: none; }
}
/* the learner's own words for what it is doing: two lines at most, so the clock beside them stays put */
.fr-s5 .s5-sub {
  min-height: 2.9em;
  max-width: 34em;
  line-height: 1.45;
  text-wrap: pretty;
}
/* (the heading's night glow stays inside the window: it widened the phone's page by 8px) */
@media (max-width: 760px) {
  .fr .lf-h::before {
    inset: -24px -12px;
  }
}
/* a word from the frame on a phone: across the foot, above the action bar, never over the heading */
@media (max-width: 760px) {
  .fr-banner {
    top: auto;
    left: 16px;
    right: 16px;
    bottom: calc(var(--actbar-h, 88px) + 12px);
    max-width: none;
    transform: none;
    justify-content: flex-start;
  }
  /* one clock on a phone too: the big one beside the heading; the bar keeps the tools */
  .fr[data-step="3"] .fr-clock:not([hidden]) {
    display: none;
  }
  /* the stages in one line: done ones are gold dots, the one now says its name */
  .s5-stages li.done i {
    width: 6px;
    height: 6px;
    margin-top: 0;
    border: 0;
    border-radius: 50%;
    transform: none;
    background: var(--gold-hi);
    box-shadow: 0 0 6px var(--gold-hi);
  }
}
@media (max-width: 900px) {
  .fr[data-step="3"] .fr-clock:not([hidden]) {
    display: none;
  }
}
/* the letters your checked words hold, waiting in a gold hairline until the learner finds them */
.s5-cell.due:not(.has) {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent);
}
.s5-cell.due:not(.has) > i {
  opacity: 0.85;
  color: var(--gold-lo);
}
:root[data-theme="dark"] .s5-cell.due:not(.has) > i { color: var(--gold-hi); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .s5-cell.due:not(.has) > i { color: var(--gold-hi); }
}
/* (while the page is read, the waiting letters breathe in a slow wave) */
.fr-s5:is([data-stage="tracing"], [data-stage="cutting"], [data-stage="reading"]) .s5-cell.due:not(.has) {
  animation: s5-due 2.6s ease-in-out calc(var(--i, 0) * 60ms) infinite;
}
@keyframes s5-due {
  50% { box-shadow: inset 0 0 0 1px var(--gold-hi), 0 0 12px -2px rgba(231, 189, 106, 0.6); }
}
@media (prefers-reduced-motion: reduce) {
  .fr-s5 .s5-cell.due { animation: none !important; }
}

/* the camera's "take it again" card: the evening's coral, as on the check cards, never alarm red */
.fr .cam-review-card > b {
  color: #b4502c;
}
:root[data-theme="dark"] .fr .cam-review-card > b { color: #f2a27c; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fr .cam-review-card > b { color: #f2a27c; }
}

/* the reveal's light: a bloom on the horizon behind the paper, and the sun's line running along the cloud tops */
.fr-bloom {
  top: 62%;
  height: 120vmax;
  margin-top: -60vmax;
  background: radial-gradient(closest-side, rgba(255, 244, 218, 0.92), rgba(255, 218, 160, 0.42) 28%, rgba(255, 196, 160, 0.14) 50%, transparent 70%);
}
:root[data-theme="dark"] .fr-bloom {
  background: radial-gradient(closest-side, rgba(255, 214, 160, 0.5), rgba(227, 154, 90, 0.22) 30%, rgba(170, 104, 150, 0.08) 52%, transparent 70%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fr-bloom {
    background: radial-gradient(closest-side, rgba(255, 214, 160, 0.5), rgba(227, 154, 90, 0.22) 30%, rgba(170, 104, 150, 0.08) 52%, transparent 70%);
  }
}
.fr-bloom::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 130vw;
  height: 2px;
  margin: -1px 0 0 -65vw;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 230, 180, 0.75) 26%, #fff7e6 50%, rgba(255, 230, 180, 0.75) 74%, transparent);
  box-shadow: 0 0 22px 5px rgba(255, 210, 150, 0.5);
  opacity: 0;
  transform: scaleX(0.04);
  transition: transform 1800ms var(--ease-out) 200ms, opacity 900ms var(--ease-out) 200ms;
}
.fr-bloom.on::after {
  opacity: 0.85;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .fr-bloom,
  .fr-bloom::after {
    transition-duration: 300ms;
  }
}

/* ---- the wall's counts on a pill of the cell's own paper, so a letter's tail runs under the number, not
   through it; and on a phone the stages one row again (dots, then the one now, its name and its seconds) */
.s5-cell em {
  right: 0;
  bottom: 0;
  padding: 0 3px 0 4px;
  border-radius: 5px 0 5px 0;
  font: 600 calc(9.5px * var(--ts, 1))/13px var(--font-body);
  font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--paper-lit) 92%, transparent);
}
.s5-cell em:empty {
  display: none;
}
@media (max-width: 900px) {
  .s5-stages {
    gap: 9px;
  }
  .s5-stages li,
  .s5-stages li.on {
    min-height: 24px;
    border-top: 0;
  }
  .s5-stages li.on {
    margin-right: 6px;
  }
  .s5-stages li em {
    margin-left: 2px;
  }
  .s5-stage-bar {
    display: none;
  }
}

/* ================================================================== onboarding pass 4 (2026-10-10): the QA round */

/* ---- the step's name on a phone: under the bar's own frost, not a cream band of its own; and what a jump
   scrolls to lands below it */
@media (max-width: 760px) {
  .fr-bar::before {
    bottom: -44px;
    -webkit-mask-image: linear-gradient(#000 62%, transparent);
    mask-image: linear-gradient(#000 62%, transparent);
  }
  .fr-stepname {
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .fr-body {
    scroll-padding-top: 40px;
  }
}

/* ---- "Your hand, in detail": wide enough that the two lines can be judged letter by letter */
.fr-sheet.wide {
  width: min(620px, 100%);
}
.fr-sheet.wide .lf-cmp-v {
  overflow-x: auto;
}

/* ---- the transcript wraps as the editor does, and a wrapped written line reads as one line */
.fr .lf-ta-mirror-in {
  width: auto;
  min-width: 0;
}
.fr .lf-mrow {
  height: auto;
  min-height: 28px;
}
.fr .lf-mrow.wrapped:not(.todo) {
  border-radius: 6px;
  background: color-mix(in srgb, var(--gold-hi) 8%, transparent);
}
.fr .lf-gutter b.lf-wrap {
  position: absolute;
  left: 16.25px;
  width: 1.5px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--gold) 60%, transparent);
}

/* ---- the optional review in the scene's own gold: no green ticks, no highlighter yellow, no mint */
.fr .lf-flaghead,
.fr .lf-flaghead[data-done="1"] {
  background: color-mix(in srgb, var(--gold-hi) 12%, var(--veil-strong));
  box-shadow: inset 0 0 0 1px var(--hairline-gold);
}
.fr .lf-flag-n,
.fr .lf-flag-n[data-done="1"] {
  color: color-mix(in srgb, var(--gold-lo) 82%, var(--ink));
  background: color-mix(in srgb, var(--gold-hi) 34%, transparent);
  box-shadow: inset 0 0 0 1px var(--hairline-gold);
}
.fr .lf-mrow.todo {
  background: color-mix(in srgb, var(--gold-hi) 15%, transparent);
}
.fr .lf-mrow.seen mark {
  background: none;
  box-shadow: none;
  text-decoration-color: color-mix(in srgb, var(--gold) 40%, transparent);
}
.fr .lf-gutter i {
  background: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold-hi) 30%, transparent);
}
.fr .lf-gutter i.seen {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--gold);
}
.fr .lf-cw mark {
  background: color-mix(in srgb, var(--gold-hi) 38%, transparent);
  color: inherit;
}
.fr .lf-abc .yes {
  color: color-mix(in srgb, var(--gold-lo) 85%, var(--ink));
  background: color-mix(in srgb, var(--gold-hi) 18%, transparent);
}
.fr .lf-abc .thin {
  color: color-mix(in srgb, var(--gold-lo) 70%, var(--ink));
  background: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent);
}
:root[data-theme="dark"] .fr .lf-flaghead,
:root[data-theme="dark"] .fr .lf-flaghead[data-done="1"] {
  background: color-mix(in srgb, var(--gold-hi) 9%, var(--surface));
}
:root[data-theme="dark"] .fr .lf-flag-n,
:root[data-theme="dark"] .fr .lf-abc .yes,
:root[data-theme="dark"] .fr .lf-abc .thin {
  color: var(--gold-hi);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fr .lf-flaghead,
  :root:not([data-theme="light"]) .fr .lf-flaghead[data-done="1"] {
    background: color-mix(in srgb, var(--gold-hi) 9%, var(--surface));
  }
  :root:not([data-theme="light"]) .fr .lf-flag-n,
  :root:not([data-theme="light"]) .fr .lf-abc .yes,
  :root:not([data-theme="light"]) .fr .lf-abc .thin {
    color: var(--gold-hi);
  }
}

/* ---- iii. words: its bar is the screen's own frosted foot, edge to edge, its contents on the column's edges
   (it no longer overhangs the cards by a few pixels), and solid enough that the editor never reads through it */
@media (min-width: 761px) {
  /* (a dock on the column, attached under the step: edge to edge it was a slab over both panels) */
  .fr-s4 .fr-actbar {
    bottom: 14px;
    margin-inline: 0;
    padding: 12px 14px 12px 18px;
    border-radius: 22px;
    background: color-mix(in oklab, var(--air) 90%, transparent);
    -webkit-backdrop-filter: blur(22px) saturate(1.2);
    backdrop-filter: blur(22px) saturate(1.2);
    box-shadow: inset 0 0 0 1px var(--veil-edge), 0 18px 40px -22px rgba(26, 28, 51, 0.4);
  }
  :root[data-theme="dark"] .fr-s4 .fr-actbar {
    background: color-mix(in oklab, #15173a 90%, transparent);
  }
}
@media (min-width: 761px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fr-s4 .fr-actbar {
    background: color-mix(in oklab, #15173a 90%, transparent);
  }
}

/* ---- iv. the words ribbon: two whole rows (a 3rd starts past the edge and is never half shown), shadows and all */
@media (min-width: 901px) {
  .s5-ribbon {
    max-height: calc(13px + 2 * 38px + 8px + 6px);
    -webkit-mask: none;
    mask: none;
  }
}

/* ---- iv. a letter the learner drew in your style shows that drawing, in gold; its placeholder steps aside */
.s5-cell.styled.drawn > i {
  opacity: 0;
}
.s5-cell.styled.drawn canvas {
  opacity: 0.92;
  transition: opacity 360ms var(--ease-out) var(--w, 0ms);
}

/* ---- v. the reveal's light flares as the paper rises, then settles; it adds light (screen), so it shows even on a
   golden sky */
.fr-bloom {
  mix-blend-mode: screen;
}
.fr-bloom.on {
  animation: fr-flare 2400ms var(--ease-out) both;
}
@keyframes fr-flare {
  0% {
    opacity: 0;
    transform: scale(0.12);
  }
  24% {
    opacity: 1;
  }
  42% {
    transform: scale(1.05);
  }
  100% {
    opacity: 0.92;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fr-bloom.on {
    animation: none;
  }
}

/* ---- "Leave?" sits over a dimmed, softened scene: the question is the only thing to look at */
.fr-sheet-back.fr-center {
  transition: background var(--t-base) var(--ease-out), backdrop-filter var(--t-base) var(--ease-out);
}
.fr-sheet-back.fr-center.in {
  background: rgba(14, 16, 40, 0.46);
  -webkit-backdrop-filter: blur(4px) saturate(0.9);
  backdrop-filter: blur(4px) saturate(0.9);
}

/* ---- v. the first write's field: its words clear of its edge */
.s7-input {
  padding-inline: 14px;
  border-radius: 12px 12px 0 0;
}

/* ---- the reading nib: a whole looping "l" written over its own faint shape */
.fr-nib {
  width: 28px;
  height: 28px;
}
.fr-nib path.ghost {
  opacity: 0.2;
  stroke-dasharray: none;
  animation: none;
}
.fr-nib path.ink {
  stroke-width: 2;
  stroke-dasharray: 100;
  animation: fr-nib-write 1.9s var(--ease-ink, ease-in-out) infinite;
}
@keyframes fr-nib-write {
  0% {
    stroke-dashoffset: 100;
  }
  58% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -100;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fr-nib path.ink {
    animation: none;
    stroke-dashoffset: 0;
  }
}
.fr-sheet:focus {
  outline: none;
}

/* ---- the action bar on a phone: two rows (the secondary button and what is missing side by side, then the primary),
   and what scrolls under it fades into it instead of being cut by a hard edge */
@media (max-width: 760px) {
  .fr-actbar .fr-why {
    flex: 1 1 0;
    min-width: 0;
    order: 1;
    text-align: left;
    font-size: calc(13px * var(--ts, 1));
    line-height: 1.35;
  }
  .fr-actbar > .btn:not(.fr-primary) {
    order: 0;
  }
  /* (the frost is a layer behind the bar that begins above it and fades in, so the cloud sea blurs gradually: a
     backdrop blur that starts at the bar's own edge drew a hard line across the sky) */
  .fr-actbar {
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
  .fr-actbar::before {
    content: "";
    position: absolute;
    inset: -30px 0 0 0;
    z-index: -1;
    pointer-events: none;
    background: var(--fr-veil);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    -webkit-mask-image: linear-gradient(transparent, #000 30px);
    mask-image: linear-gradient(transparent, #000 30px);
  }
}

/* ---- iv. the 3-2-1: a numeral the height of the window beats in the middle of the screen, over the scene dimmed
   a little; dark gold on the day sky (gold on lilac was 1.5:1), lit gold at night */
.fr-s5 .s5-beat {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  pointer-events: none;
  font: italic 400 min(46vh, 380px) / 1 var(--font-display);
  color: var(--gold-lo);
  text-shadow: 0 0 60px rgba(255, 232, 186, 0.95), 0 0 140px rgba(255, 214, 150, 0.7);
  -webkit-text-stroke: 1px color-mix(in srgb, var(--gold-lo) 60%, transparent);
  opacity: 0;
}
.fr-s5 .s5-beat.on {
  animation: s5-beat 560ms var(--ease-out) both;
}
@keyframes s5-beat {
  0% {
    opacity: 0;
    transform: scale(1.35);
  }
  22% {
    opacity: 1;
    transform: scale(1);
  }
  78% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(0.88);
  }
}
.fr-s5.counting .s5-grid,
.fr-s5.counting .s5-l,
.fr-s5.counting .s5-r {
  transition: opacity 260ms var(--ease-out), filter 260ms var(--ease-out);
  opacity: 0.55;
  filter: saturate(0.85);
}
:root[data-theme="dark"] .fr-s5 .s5-beat {
  color: var(--gold-hi);
  text-shadow: 0 0 60px rgba(255, 206, 140, 0.7), 0 0 140px rgba(227, 154, 90, 0.5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fr-s5 .s5-beat {
    color: var(--gold-hi);
    text-shadow: 0 0 60px rgba(255, 206, 140, 0.7), 0 0 140px rgba(227, 154, 90, 0.5);
  }
}

/* ---- iv. the page while it is learned: the work shows, quietly (filled boxes and glowing baselines over every word
   read as a reader's debug view, and as solid amber stripes on a phone's thumbnail) */
.s5-lines i {
  height: 1px;
  margin-top: -0.5px;
  box-shadow: 0 0 4px rgba(231, 189, 106, 0.55);
}
.fr-s5:not([data-stage="tracing"]):not([data-stage="preparing"]):not([data-stage=""]) .s5-lines i {
  opacity: 0.5;
}
.fr-s5[data-stage="building"] .s5-lines i,
.fr-s5[data-stage="fitting"] .s5-lines i,
.fr-s5[data-stage="finishing"] .s5-lines i {
  opacity: 0.16;
}
.s5-marks i {
  border: 0.75px solid rgba(201, 151, 63, 0.75);
  background: none;
  animation: s5-pop-quiet 1400ms var(--ease-out) var(--d) both;
}
@keyframes s5-pop-quiet {
  0% {
    opacity: 0;
    transform: scale(1.8);
  }
  18% {
    opacity: 0.9;
    transform: none;
  }
  100% {
    opacity: 0.14;
    transform: none;
  }
}
@media (max-width: 900px) {
  .s5-marks {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .s5-marks i {
    animation: none;
    opacity: 0.2;
  }
}

/* ---- iii. the transcript in the site's own type, not a code editor's monospace (the mirror under it takes the same,
   so its marks stay on their words) */
.fr .lf-ta,
.fr .lf-ta-mirror-in {
  font-family: var(--font-body);
  font-size: calc(15.5px * var(--ts, 1));
  line-height: 28px;
  letter-spacing: 0.005em;
}
.fr-s4.lf-view {
  padding-bottom: 28px;
}

/* a banner's one action (Start over), and "New handwriting" over the pages step when they have one already */
.fr-banner-act {
  flex: none;
  margin-left: 4px;
  padding: 5px 12px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: calc(13px * var(--ts, 1));
  font-weight: 650;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 1px var(--hairline-gold);
  cursor: pointer;
}
.fr-banner-act:hover {
  background: #fff;
}
.fr-banner-act:focus-visible {
  outline: 2px solid var(--gold-hi);
  outline-offset: 2px;
}
.lf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  padding: 4px 11px 4px 8px;
  border-radius: 999px;
  font-size: calc(12.5px * var(--ts, 1));
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 0 0 1px var(--hairline-gold);
}
.lf-eyebrow .ico {
  width: 13px;
  height: 13px;
}

/* ------------------------------------------------------------------ v. their page beside Ditto's, line by line */
.fr-cv {
  position: relative;
  align-items: center;
}
.cv-stage {
  display: grid;
  gap: clamp(18px, 2.4vw, 28px);
  justify-items: start;
  width: min(1040px, 100%);
  margin: auto;
}
.cv-title {
  font-size: clamp(40px, 4.6vw, 76px) !important;
  line-height: 1 !important;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--t-scene) var(--ease-out), transform var(--t-scene) var(--ease-out);
}
.cv-title:focus {
  outline: none;
}
.fr-cv.in .cv-title {
  opacity: 1;
  transform: none;
}
.cv-sheet {
  display: grid;
  width: 100%;
  min-height: 120px;
  padding: clamp(14px, 2.4vw, 30px) clamp(16px, 3vw, 40px);
  opacity: 0;
  transform: translateY(36px);
  transition: transform var(--t-epic) var(--ease-lift), opacity 600ms var(--ease-out);
}
.fr-cv.in .cv-sheet {
  opacity: 1;
  transform: none;
}
.cv-pair {
  display: grid;
  gap: 6px;
  padding: clamp(10px, 1.4vw, 16px) 0;
  opacity: 0;
  transition: opacity 360ms var(--ease-out);
}
.cv-pair + .cv-pair {
  border-top: 1px solid rgba(143, 102, 32, 0.16);
}
.cv-pair.shown {
  opacity: 1;
}
.cv-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
}
.cv-k {
  font: 640 calc(10.5px * var(--ts, 1))/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a8798;
}
.cv-me .cv-k {
  color: var(--gold-lo);
  opacity: 0;
  transition: opacity 300ms var(--ease-out);
}
.cv-pair.written .cv-me .cv-k {
  opacity: 1;
}
.cv-v {
  position: relative;
  min-width: 0;
  overflow: hidden;
}
.cv-v canvas {
  display: block;
}
.cv-sheet.cut .cv-v {
  -webkit-mask-image: linear-gradient(90deg, #000 84%, transparent);
  mask-image: linear-gradient(90deg, #000 84%, transparent);
}
/* their line: first as the photo has it, then the photo's paper falls away to their ink, a gold line passing */
.cv-real {
  position: relative;
  display: inline-block;
  vertical-align: top;
}
.cv-raw {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  box-shadow: 0 6px 18px -10px rgba(40, 30, 10, 0.5);
  transition: opacity 700ms var(--ease-out), filter 700ms var(--ease-out);
}
.cv-ink {
  opacity: 0;
  transition: opacity 600ms var(--ease-out) 120ms;
}
.cv-pair.lifted .cv-raw {
  opacity: 0;
  filter: blur(1.5px);
}
.cv-pair.lifted .cv-ink {
  opacity: 1;
}
.cv-real::after {
  content: '';
  position: absolute;
  left: -2%;
  right: -2%;
  top: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-hi, #f3d58e) 18%, var(--gold, #d9a441) 50%, var(--gold-hi, #f3d58e) 82%, transparent);
  box-shadow: 0 0 12px 2px rgba(231, 189, 106, 0.55);
  opacity: 0;
  pointer-events: none;
}
.cv-pair.lifted .cv-real::after {
  animation: cv-sweep 720ms var(--ease-out) both;
}
@keyframes cv-sweep {
  0% {
    top: 0;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}
.cv-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--t-step) var(--ease-out), transform var(--t-step) var(--ease-out);
}
.fr-cv.acted .cv-acts {
  opacity: 1;
  transform: none;
}
:root[data-theme="dark"] .cv-title {
  color: var(--on-sky);
  -webkit-text-fill-color: var(--on-sky);
  background: none;
  text-shadow: 0 1px 24px rgb(0 0 0 / 0.35);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cv-title {
    color: var(--on-sky);
    -webkit-text-fill-color: var(--on-sky);
    background: none;
    text-shadow: 0 1px 24px rgb(0 0 0 / 0.35);
  }
}
@media (max-width: 760px) {
  .cv-stage {
    justify-items: stretch;
  }
  .cv-title {
    font-size: 38px !important;
  }
  .cv-row {
    grid-template-columns: 40px minmax(0, 1fr);
  }
  .cv-k {
    font-size: calc(9px * var(--ts, 1));
    letter-spacing: 0.1em;
  }
  .cv-acts .fr-primary {
    flex: 1 1 100%;
    justify-content: center;
  }
  .cv-acts .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cv-title,
  .cv-sheet,
  .cv-pair,
  .cv-raw,
  .cv-ink,
  .cv-acts {
    transition-duration: 200ms !important;
  }
  .cv-pair.lifted .cv-real::after {
    animation: none;
  }
}
/* (the tails of the lines above and below a line, caught in its crop, fade out at its edges) */
.cv-raw,
.cv-ink {
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent);
}
/* the characters Ditto guessed, under the sheet: a quiet line and one button */
.cv-gaps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  font-size: calc(14px * var(--ts, 1));
  color: var(--ink-2);
  opacity: 0;
  transition: opacity var(--t-step) var(--ease-out);
}
.cv-gaps[hidden] {
  display: none;
}
.fr-cv.acted .cv-gaps {
  opacity: 1;
}
:root[data-theme="dark"] .cv-gaps {
  color: var(--on-sky);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cv-gaps {
    color: var(--on-sky);
  }
}

/* ================================================================== polish pass (2026-10-16): focus, feet, failures */

/* ---- the bar's steps: each numeral and name in one piece, a real button where the step can be gone to */
.fr-step {
  display: inline-flex;
  align-items: center;
  gap: inherit;
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: none;
}
button.fr-step {
  cursor: pointer;
  padding-inline: 2px 6px;
  margin-inline: -2px -6px;
}
.fr-nums li.can:focus-visible {
  outline: none;
}
.fr-nums button.fr-step:focus-visible {
  outline: 2px solid var(--gold-lo);
  outline-offset: 3px;
}
:root[data-theme="dark"] .fr-nums button.fr-step:focus-visible {
  outline-color: var(--gold-hi);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fr-nums button.fr-step:focus-visible {
    outline-color: var(--gold-hi);
  }
}

/* ---- a page's × in the tray: a finger-sized target on a touch screen, and a ring that shows on the photo */
@media (pointer: coarse) {
  .s2-thumb .lf-thumb-x {
    width: 34px;
    height: 34px;
    top: 3px;
    right: 3px;
  }
  .s2-thumb .lf-thumb-x svg {
    width: 14px;
    height: 14px;
  }
}
.s2-thumb .lf-thumb-x:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
  box-shadow: 0 0 0 4px rgba(20, 20, 40, 0.6);
}

/* ---- a step's heading takes focus as the step opens (a screen reader starts there); it isn't a control, so no ring */
.fr .lf-h:focus,
.fr .lf-h:focus-visible {
  outline: none;
  box-shadow: none;
}

/* ---- the check: each row of cards as tall as its tallest card (no longer every row as tall as the tallest of all),
   and every card's actions on its foot, so a row's buttons line up */
.s3-cards {
  grid-auto-rows: auto;
}
.s3-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.s3-body > .s3-chips,
.s3-body > .s3-issues,
.s3-body > .s3-acts {
  align-self: stretch;
}
.s3-body > .s3-acts {
  margin-top: auto;
  padding-top: 4px;
}
/* (the thumbnail is shaped as its photo is, learn.js; its scan line still sweeps the whole of it) */
.s3-page img {
  object-position: 50% 0;
}

/* ---- the action row on a step taller than the window: stuck to the foot it is a frosted dock, as on the words step
   (it was clear, and the cards' words showed through its buttons); clear again once the step ends above it */
.fr-foot-mark {
  display: block;
  flex: none;
  width: 0;
  height: 0;
  pointer-events: none;
}
@media (min-width: 761px) {
  .fr .fr-s2.lf-view > .fr-actbar,
  .fr .fr-s3.lf-view > .fr-actbar {
    transition: background var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
  }
  .fr .fr-s2.lf-view.foot-stuck > .fr-actbar,
  .fr .fr-s3.lf-view.foot-stuck > .fr-actbar {
    bottom: 14px;
    margin-inline: -18px;
    padding: 12px 18px;
    border-top-color: transparent;
    border-radius: 22px;
    background: color-mix(in oklab, var(--air) 90%, transparent);
    -webkit-backdrop-filter: blur(22px) saturate(1.2);
    backdrop-filter: blur(22px) saturate(1.2);
    box-shadow: inset 0 0 0 1px var(--veil-edge), 0 18px 40px -22px rgba(26, 28, 51, 0.4);
  }
  :root[data-theme="dark"] .fr .lf-view.foot-stuck > .fr-actbar {
    background: color-mix(in oklab, #15173a 90%, transparent);
  }
}
@media (min-width: 761px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fr .lf-view.foot-stuck > .fr-actbar {
    background: color-mix(in oklab, #15173a 90%, transparent);
  }
}

/* ---- the step's shortcut beside its main button: two small keys, gone where there is no keyboard, and while the
   button can't go yet */
.fr-keys {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: none;
  transition: opacity var(--t-ui) var(--ease-out);
}
.fr-keys kbd {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 7px;
  font: 600 calc(12px * var(--ts, 1)) / 1 var(--font-body);
  color: var(--on-sky);
  background: color-mix(in srgb, var(--air) 46%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-sky) 20%, transparent), inset 0 -1.5px 0 color-mix(in srgb, var(--on-sky) 16%, transparent);
}
.fr-actbar:has(.fr-primary[aria-disabled="true"]) .fr-keys {
  opacity: 0;
}
@media (max-width: 760px), (pointer: coarse) {
  .fr-keys {
    display: none;
  }
}

/* ---- reading that didn't come back: the sheet rests, no sweep and no track; three ways on */
.fr-s4r.failed .s4r-sweep,
.fr-s4r.failed .s4r-track {
  display: none;
}
.fr-s4r.failed .s4r-page {
  filter: saturate(0.75);
}
.fr-s4r.failed .s4r-msg {
  max-width: 30em;
  line-height: 1.5;
}
.fr-s4r .s3-acts {
  gap: 10px 14px;
}
.fr-s4r .s3-acts:empty {
  display: none;
}
.s4r-back {
  font-size: calc(14.5px * var(--ts, 1));
  color: var(--on-sky);
}

/* ---- the words on a phone: the review's heading and its "Next to check", without the paragraph that pushed the
   transcript itself below the fold */
@media (max-width: 760px) {
  .fr .lf-flaghead > div:not(.lf-flag-n) > span {
    display: none;
  }
}

/* ---- a tablet's bar: the five numerals, the current one named, and the tools all in the width (every name in a
   row pushed the × off the screen's edge) */
@media (min-width: 761px) and (max-width: 1080px) {
  .fr-nums li:not(.on) .fr-num-label {
    display: none;
  }
  .fr-nums {
    min-width: 0;
  }
}
/* ---- a tablet's wall: the alphabet in its own rows, as at desktop (nine across made cells the size of a thumb) */
@media (min-width: 601px) and (max-width: 900px) {
  .fr-s5 .s5-wall {
    grid-template-columns: repeat(13, minmax(0, 1fr));
    gap: 5px;
  }
  .fr-s5 .s5-cell > i {
    font-size: calc(16px * var(--ts, 1));
  }
}

/* ---- a word's one action (Undo, Start over) at night: light words on a lifted pill, not on a white one */
:root[data-theme="dark"] .fr-banner-act {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.12);
}
:root[data-theme="dark"] .fr-banner-act:hover {
  background: rgba(255, 255, 255, 0.2);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fr-banner-act {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.12);
  }
  :root:not([data-theme="light"]) .fr-banner-act:hover {
    background: rgba(255, 255, 255, 0.2);
  }
}

:root[data-theme="dark"] .lf-eyebrow {
  background: rgba(255, 255, 255, 0.1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lf-eyebrow {
    background: rgba(255, 255, 255, 0.1);
  }
}

/* ---- no learner, on a phone: its two ways on stacked full width, the main one first */
@media (max-width: 760px) {
  .fr-off-card .s3-acts {
    display: grid;
    width: 100%;
  }
  .fr-off-card .s3-acts .btn {
    width: 100%;
    justify-content: center;
  }
  .fr-off-card .s3-acts .fr-primary {
    order: -1;
  }
}

/* ---- reduce transparency (Settings: base.css sets --fr-veil solid and takes every blur away): the surfaces here that
   mix their own see-through paper go solid too, so nothing shows through them unblurred */
:root[data-transparency="reduced"] :is(.fr-sheet, .fr .lf-view.foot-stuck > .fr-actbar, .fr-s4 .fr-actbar, .fr-banner-act, .lf-eyebrow, .fr-keys kbd, .s5-cell em) {
  background: var(--air-hi, var(--surface));
}

/* ---- the narrowest phones (320px): a pill's words and "What works" wrap inside the column instead of widening the
   step past the screen's edge */
@media (max-width: 900px) {
  .fr-s4 .s4-split {
    grid-template-columns: minmax(0, 1fr);
  }
}
.fr .lf-page-choice {
  flex: 0 1 auto;
  min-width: 0;
  text-overflow: ellipsis;
}
.fr .lf-page-nav b {
  white-space: nowrap;
}
@media (max-width: 480px) {
  /* (the page picker names itself to a screen reader; its label steps aside for the page's name) */
  .fr .lf-page-nav b {
    display: none;
  }
  .fr .lf-page-choice {
    max-width: none;
    flex: 1 1 0;
  }
  .fr .fr-tag {
    height: auto;
    min-height: 28px;
    padding-block: 4px;
    line-height: 1.3;
    white-space: normal;
  }
  .s2-works li span {
    white-space: normal;
    justify-content: center;
    text-align: center;
  }
  .fr-s2 .s2-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- a problem while learning sits under the meter, above the wall */
.s5-r > .s5-problem {
  margin: 0 0 var(--sp-4);
}

/* ---- learning stopped: nothing on the screen keeps breathing as if it were still at work */
.fr-s5.dim .s5-stages li.on i,
.fr-s5.dim .s5-cell.due,
.fr-s5.dim .s5-scan {
  animation: none !important;
}
.fr-s5.dim .s5-scan {
  opacity: 0;
}

/* ---- sheets over the flow: solid enough that what is behind never reads as a smudge through them */
.fr-sheet {
  background: color-mix(in oklab, var(--air) 94%, transparent);
}

/* ---- stronger contrast (Settings > Make it yours): the frosted panels near solid, so their words sit on one colour */
:root[data-contrast="high"] {
  --fr-veil: color-mix(in oklab, var(--air) 96%, transparent);
}

/* ---- the reader's own text size (Settings > Make it yours: --ts, app.css) reaches every word of the flow: the sizes
   above are on its scale, and so are these, which come from base.css (buttons, and the body text a few lines
   inherit); the display headings, the clock and the wall's letters are large already and keep theirs */
.fr {
  --fs-xs: calc(12px * var(--ts, 1));
  --fs-sm: calc(13.5px * var(--ts, 1));
  --fs-md: calc(15px * var(--ts, 1));
  --fs-lg: calc(17px * var(--ts, 1));
  --fs-xl: calc(19px * var(--ts, 1));
}
:root[data-text] .fr .btn {
  font-size: calc(15.5px * var(--ts));
}
:root[data-text] .fr .btn-sm {
  font-size: calc(14.5px * var(--ts));
}
:root[data-text] .fr .btn.fr-primary {
  font-size: calc(17px * var(--ts));
}
:root[data-text] .fr :is(.lf-sub, .s4r-msg) {
  font-size: calc(clamp(16px, 1.1vw, 19px) * var(--ts));
}
:root[data-text] .fr :is(.fr-confirm p, .s5-problem p, .lf-ta, .lf-ta-mirror-in) {
  font-size: calc(15px * var(--ts));
}
/* (a pill whose words outgrow one line at a larger size wraps rather than spill out of it) */
:root[data-text] .fr :is(.fr-tag, .fr-pill, .s3-status, .s3-chips li, .lf-eyebrow) {
  height: auto;
  min-height: 28px;
  padding-block: 4px;
  line-height: 1.25;
  white-space: normal;
}
:root[data-text] .fr :is(.lf-ta, .lf-ta-mirror-in) {
  line-height: calc(28px * var(--ts));
}
:root[data-text] .fr .cv-row {
  grid-template-columns: calc(58px * var(--ts)) minmax(0, 1fr);
}