/* Home page, loaded after site.css. Light comes from background washes, never
   from glowing elements. Every moving part is a CSS animation that stops for
   reduced motion; home.js only adds the voice cue playback. */

:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --tile: #141518;
  --tile-line: #232428;
  --idle: #ffffff14;
}

/* Phones: device frames around real app captures. The bezel is a fixed
   width per phone size (about 3%, as in Paper); percentage padding would
   follow the parent's width instead. */
.device {
  --bezel: 8px;

  position: relative;
  padding: var(--bezel);
  border: 1px solid #45454a;
  border-radius: 13% / 6%;
  background: #0a0a0b;
  box-shadow: 0 40px 80px #000000b3;
}

.device img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 11% / 5%;
}

.h2 {
  font-family: var(--display);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 40px;
}

.h2 .dim {
  display: block;
  color: var(--text-muted);
}

@media (min-width: 768px) {
  .h2 {
    font-size: 64px;
    line-height: 64px;
  }
}

/* ── hero ─────────────────────────────────────────────────────────────── */

/* Paper W-01/W-02: the copy over a backdrop of the logo's bars (lit bars
   are work and rest, dim bars are time still to go) with two real captures
   in front. Glow lives in the backdrop only. Scrims fade it into the page,
   so the hero has no bottom edge. */
.hero {
  position: relative;
  overflow: clip;
}

.hero__stage {
  position: absolute;
  inset: auto 0 0;
  height: 600px;
  pointer-events: none;
}

.bars i {
  position: absolute;
  display: block;
  border-radius: 999px;
  background: #ffffff14;
  animation: bar-rise 1.1s var(--ease-out) both;
}

.bars .work {
  background: var(--bar-work);
  box-shadow: 0 0 40px #34d39973;
}

.bars .rest {
  background: linear-gradient(
    180deg in oklab,
    oklab(87.9% -0.004 0.153),
    oklab(76.9% 0.056 0.155)
  );
  box-shadow: 0 0 44px #ff93128c;
}

.bars i:nth-child(2) {
  animation-delay: 60ms;
}

.bars i:nth-child(3) {
  animation-delay: 120ms;
}

.bars i:nth-child(4) {
  animation-delay: 180ms;
}

.bars i:nth-child(5) {
  animation-delay: 240ms;
}

.bars i:nth-child(6) {
  animation-delay: 300ms;
}

.bars i:nth-child(7) {
  animation-delay: 360ms;
}

.bars i:nth-child(8) {
  animation-delay: 420ms;
}

@keyframes bar-rise {
  from {
    opacity: 0;
    translate: 0 18%;
  }
}

/* Phones (W-02): seven 48px bars in a 430 × 600 window. */
.bars--narrow {
  position: absolute;
  top: 0;
  left: calc(50% - 215px);
  width: 430px;
  height: 600px;
}

.bars--narrow i {
  width: 48px;
}

.bars--narrow i:nth-child(1) {
  top: 150px;
  left: 0;
  height: 500px;
}

.bars--narrow i:nth-child(2) {
  top: 60px;
  left: 62px;
  height: 560px;
}

.bars--narrow i:nth-child(3) {
  top: 120px;
  left: 124px;
  height: 500px;
}

.bars--narrow i:nth-child(4) {
  top: 200px;
  left: 190px;
  width: 34px;
  height: 420px;
}

.bars--narrow i:nth-child(5) {
  top: 30px;
  left: 242px;
  height: 590px;
}

.bars--narrow i:nth-child(6) {
  top: 100px;
  left: 304px;
  height: 520px;
}

.bars--narrow i:nth-child(7) {
  top: 170px;
  left: 366px;
  height: 460px;
}

.bars--wide {
  display: none;
}

.hero__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 40px;
}

.hero__title {
  font-family: var(--display);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 42px;
}

.hero__title .dim {
  display: block;
  color: var(--text-muted);
}

.hero__lede {
  max-width: 34ch;
  color: var(--text-body);
  font-size: 17px;
  line-height: 26px;
}

.store {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 4px;
}

.store strong {
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
}

.store span {
  color: var(--text-quiet);
  font-size: 15px;
  line-height: 20px;
}

.hero__phones {
  position: relative;
  height: 600px;
  margin-top: 8px;
}

.hero__front {
  --bezel: 9px;

  position: absolute;
  top: 70px;
  left: calc(50% - 130px);
  width: 260px;
  border-radius: 46px;
}

.hero__front img {
  border-radius: 37px;
}

.hero__back {
  display: none;
}

/* The phone sinks into the page instead of ending on a line. */
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 3;
  height: 220px;
  background: linear-gradient(180deg, #10111300, var(--bg) 90%);
  pointer-events: none;
}

@media (min-width: 768px) {
  .hero__copy {
    gap: 22px;
    padding-top: 72px;
  }

  .hero__title {
    font-size: 64px;
    line-height: 66px;
  }

  .hero__lede {
    max-width: 500px;
    font-size: 19px;
    line-height: 30px;
  }
}

/* Wide screens (W-01): copy left, bars and phones right, all placed from
   the 1440 artboard around the page centre. The hero slides up under the
   header so the bars reach the top of the page. */
@media (min-width: 1100px) {
  .hero {
    min-height: 940px;
    margin-top: -80px;
    background:
      radial-gradient(
        circle farthest-corner at calc(50% + 317px) 38%,
        oklab(77.3% -0.147 0.044 / 20%),
        oklab(77.3% -0.147 0.044 / 6%) 45%,
        transparent 75%
      ),
      radial-gradient(
        circle farthest-corner at calc(50% + 605px) 80%,
        oklab(76.9% 0.056 0.155 / 10%),
        transparent 50%
      );
  }

  .hero__stage {
    inset: 0;
    height: auto;
  }

  .hero__stage::before,
  .hero__stage::after {
    content: "";
    position: absolute;
    z-index: 1;
  }

  /* Left scrim: the bars fade out behind the copy. */
  .hero__stage::before {
    inset: 0 50% 0 0;
    background: linear-gradient(
      270deg,
      #10111300,
      #101113eb 324px,
      var(--bg) 720px
    );
  }

  /* Bottom scrim, under the phones (they stand in front of it). */
  .hero__stage::after {
    inset: auto 0 0;
    height: 420px;
    background: linear-gradient(180deg, #10111300, #101113d9 55%, var(--bg));
  }

  .bars--narrow {
    display: none;
  }

  .bars--wide {
    position: absolute;
    top: 0;
    left: calc(50% + 40px);
    display: block;
    width: 900px;
    height: 940px;
  }

  .bars--wide i {
    width: 84px;
    box-shadow: none;
  }

  .bars--wide .work {
    box-shadow: 0 0 60px #34d39973;
  }

  .bars--wide .rest {
    box-shadow: 0 0 70px #ff93128c;
  }

  .bars--wide i:nth-child(1) {
    top: 300px;
    left: 0;
    height: 700px;
  }

  .bars--wide i:nth-child(2) {
    top: 120px;
    left: 112px;
    height: 860px;
  }

  .bars--wide i:nth-child(3) {
    top: 220px;
    left: 224px;
    height: 760px;
  }

  .bars--wide i:nth-child(4) {
    top: 430px;
    left: 336px;
    width: 60px;
    height: 570px;
  }

  .bars--wide i:nth-child(5) {
    top: 70px;
    left: 424px;
    height: 800px;
  }

  .bars--wide i:nth-child(6) {
    top: 30px;
    left: 536px;
    height: 910px;
    background: #ffffff12;
  }

  .bars--wide i:nth-child(7) {
    top: 180px;
    left: 648px;
    height: 730px;
    background: #ffffff12;
  }

  .bars--wide i:nth-child(8) {
    top: 100px;
    left: 760px;
    height: 830px;
    background: #ffffff12;
  }

  .hero__copy {
    max-width: none;
    padding: 256px var(--gutter) 0 max(var(--gutter), calc(50% - 600px));
    gap: 28px;
  }

  .hero__copy > * {
    max-width: 640px;
  }

  .hero__title {
    font-size: 76px;
    line-height: 78px;
  }

  .hero__lede {
    max-width: 500px;
  }

  .store {
    padding-top: 12px;
  }

  .hero__phones {
    position: absolute;
    inset: 0;
    z-index: 1;
    height: auto;
    margin: 0;
  }

  .hero__front {
    --bezel: 12px;

    top: 150px;
    left: calc(50% + 126px);
    width: 340px;
    border-radius: 60px;
    box-shadow:
      0 50px 100px #000000a6,
      0 0 0 6px #ffffff08;
  }

  .hero__front img {
    border-radius: 48px;
  }

  .hero__back {
    --bezel: 10px;

    position: absolute;
    top: 250px;
    left: calc(50% + 396px);
    display: block;
    width: 300px;
    border-color: #3a3a3e;
    border-radius: 54px;
    box-shadow: 0 40px 80px #00000099;
  }

  .hero__back img {
    border-radius: 44px;
  }

  .hero::after {
    display: none;
  }
}

/* ── import ───────────────────────────────────────────────────────────── */

.import {
  --scene: 10s;

  padding-block: 88px 96px;
}

.import__grid {
  display: grid;
  gap: 56px;
}

.import__art {
  position: relative;
  margin-right: 64px;
}

.import__device {
  --bezel: 5px;

  position: absolute;
  right: -64px;
  bottom: -48px;
  width: 150px;
}

.import__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.import__copy .lede {
  max-width: 34ch;
}

.sources {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.sources li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
}

.sources svg,
.on-device svg {
  flex-shrink: 0;
  fill: none;
  stroke: var(--work);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.sources svg {
  width: 22px;
  height: 22px;
}

.on-device {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-quiet);
  font-size: 15px;
  line-height: 21px;
}

.on-device svg {
  width: 16px;
  height: 18px;
}

@media (min-width: 768px) {
  .import__art {
    margin-right: 160px;
  }

  .import__device {
    right: -160px;
    bottom: -56px;
    width: 236px;
  }
}

@media (min-width: 1200px) {
  .import {
    padding-block: 120px 160px;
  }

  .import__grid {
    grid-template-columns: minmax(0, 13fr) minmax(0, 11fr);
    align-items: center;
    gap: 64px;
  }

  .import__art {
    margin-right: 150px;
  }

  .import__device {
    --bezel: 9px;

    right: -150px;
    bottom: -72px;
    width: 268px;
  }
}

/* A photographed whiteboard, drawn in CSS so the copy stays real text. */
.whiteboard {
  position: relative;
  overflow: clip;
  height: 320px;
  border-radius: 12px;
  background: #2a2b2e;
}

.whiteboard__board {
  position: absolute;
  inset: -14% -10% -10% -8%;
  rotate: -3deg;
  background:
    radial-gradient(
      ellipse 40% 30% at 72% 30%,
      oklab(57.7% -0.003 0.002 / 16%),
      transparent
    ),
    radial-gradient(
      ellipse 30% 22% at 25% 78%,
      oklab(54.3% -0.003 0.002 / 14%),
      transparent
    ),
    linear-gradient(
      160deg,
      oklab(96% -0.002 0.005),
      oklab(92.7% -0.002 0.005) 55%,
      oklab(89.3% -0.002 0.006)
    );
}

.whiteboard__marker {
  position: absolute;
  top: 26%;
  left: 18%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #2b2d31;
  font-family: "Marker Felt", "Permanent Marker", cursive;
  font-size: 22px;
  font-weight: 700;
  line-height: 30px;
}

.whiteboard__marker b {
  color: #1f3a60;
  font-size: 36px;
  line-height: 44px;
  opacity: 0.92;
  rotate: -1.5deg;
}

.whiteboard__marker hr {
  width: 150px;
  height: 4px;
  margin: 0 0 6px;
  border: 0;
  border-radius: 2px;
  background: #1f3a60;
  opacity: 0.75;
  rotate: -2deg;
}

.whiteboard__marker span:nth-of-type(1) {
  rotate: -0.8deg;
}

.whiteboard__marker span:nth-of-type(2) {
  rotate: 0.6deg;
}

.whiteboard__marker span:nth-of-type(3) {
  rotate: -1.2deg;
}

.whiteboard__brackets {
  position: absolute;
  inset: 18px 18px auto;
  height: 30px;
}

.whiteboard__brackets::before,
.whiteboard__brackets::after {
  content: "";
  position: absolute;
  top: 0;
  width: 26px;
  height: 26px;
  border-top: 3px solid #fff;
}

.whiteboard__brackets::before {
  left: 0;
  border-left: 3px solid #fff;
  border-top-left-radius: 10px;
}

.whiteboard__brackets::after {
  right: 0;
  border-right: 3px solid #fff;
  border-top-right-radius: 10px;
}

/* The camera's read: a band sweeps the board, then the timer appears. */
.whiteboard__scan {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 72%,
    oklab(77.3% -0.147 0.044 / 18%) 96%,
    oklab(77.3% -0.147 0.044 / 85%) calc(100% - 2px),
    transparent
  );
  translate: 0 -100%;
  animation: scan var(--scene) linear infinite;
}

.whiteboard__scrim {
  position: absolute;
  inset: auto 0 0;
  height: 130px;
  background: linear-gradient(180deg, #10111300, #101113e6 55%, var(--bg));
}

.recognized {
  position: absolute;
  inset: auto 84px 20px 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 10px 12px;
}

.recognized__label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-quiet);
  font-size: 13px;
  line-height: 18px;
  white-space: nowrap;
}

/* No room for the detail beside the phone on small screens. */
.recognized__label span {
  display: none;
}

.recognized__label b {
  color: var(--text);
  font-family: var(--caps);
  font-size: 14px;
  letter-spacing: 0.16em;
}

.recognized__time {
  white-space: nowrap;
  font-family: var(--display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 30px;
}

/* The board's read appears once the scan has passed. */
.recognized__label,
.recognized__time {
  animation: read var(--scene) linear infinite;
}

.recognized__bar {
  grid-column: 1 / -1;
  height: 10px;
  border-radius: 3px;
  background: var(--bar-work);
  clip-path: inset(0 100% 0 0);
  animation: recognize var(--scene) linear infinite;
}

/* The import scene, one 10 s loop shared by the board and the phone:
   tap Camera (4%), scan (6–30%), the board reads (30–36%), text fills in
   (32–48%), recognized (50%), tap Add timer (62%), the sheet closes (65%)
   and the timer lands in the list (68%), then everything resets (94%). */
@keyframes scan {
  0%,
  6% {
    translate: 0 -100%;
    opacity: 1;
    animation-timing-function: var(--ease-in-out);
  }

  30% {
    translate: 0 0;
    opacity: 1;
  }

  34%,
  100% {
    translate: 0 0;
    opacity: 0;
  }
}

@keyframes read {
  0%,
  30% {
    opacity: 0;
    translate: 0 0.3em;
    animation-timing-function: var(--ease-out);
  }

  34%,
  92% {
    opacity: 1;
    translate: 0 0;
  }

  98%,
  100% {
    opacity: 0;
  }
}

@keyframes recognize {
  0%,
  30% {
    clip-path: inset(0 100% 0 0);
    opacity: 1;
    animation-timing-function: var(--ease-out);
  }

  36%,
  92% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }

  98%,
  100% {
    clip-path: inset(0 0 0 0);
    opacity: 0;
  }
}

@media (min-width: 768px) {
  .whiteboard {
    height: 460px;
  }

  .whiteboard__marker {
    font-size: 28px;
    line-height: 38px;
  }

  .whiteboard__marker b {
    font-size: 48px;
    line-height: 56px;
  }

  .whiteboard__marker hr {
    width: 200px;
  }

  .whiteboard__brackets {
    inset: 24px 24px auto;
  }

  .recognized {
    inset: auto 24px 26px;
  }

  .import .recognized {
    right: 100px;
  }

  .recognized__label span {
    display: inline;
  }

  .recognized__time {
    font-size: 34px;
    line-height: 36px;
  }
}

/* ── phone screens in HTML ────────────────────────────────────────────── */

/* The format phone is rebuilt from the real app captures so it can move.
   Everything in it is in em, and 1em is 1/23 of the screen width. */
.device:has(.screen) {
  container-type: inline-size;
}

.screen {
  position: relative;
  overflow: clip;
  aspect-ratio: 1179 / 2556;
  border-radius: 11% / 5%;
  background: #121214;
  color: var(--text);
  font-family: var(--body);
  font-size: calc(100cqi / 23);
  line-height: 1.2;
}

.screen__status {
  position: absolute;
  inset: 0 0 auto;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3.7em;
  padding-inline: 3.2em 2.2em;
  font-size: 1em;
  font-weight: 600;
}

.screen__status > span:first-child {
  font-size: 0.85em;
}

.screen__island {
  position: absolute;
  top: 0.8em;
  left: 50%;
  width: 7.1em;
  height: 2.1em;
  border-radius: 1.05em;
  background: #000;
  translate: -50% 0;
}

.screen__icons {
  width: 3.3em;
  height: 0.7em;
}

/* The Import phone is the app itself, rebuilt from its source: a 402 × 874
   canvas in iPhone points (1px = 1pt), scaled to the frame. Sizes, colours
   and fonts come from the app's styles and dark theme tokens, so this copy
   needs updating when those screens change. */
.screen--app {
  aspect-ratio: 402 / 874;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
}

.app {
  position: absolute;
  inset: 0 auto auto 0;
  overflow: clip;
  width: 402px;
  height: 874px;
  background: #101113;
  color: #fff;
  font-family: var(--body);
  scale: tan(atan2(100cqi, 402px));
  transform-origin: 0 0;
}

.app svg {
  display: block;
  flex-shrink: 0;
  fill: currentcolor;
}

.app__status {
  position: absolute;
  inset: 0 0 auto;
  z-index: 3;
  height: 64px;
}

.app__status span {
  position: absolute;
  top: 21px;
  left: 40px;
  width: 66px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 22px;
  text-align: center;
}

.app__status i {
  position: absolute;
  top: 14px;
  left: 138.5px;
  width: 125px;
  height: 36.5px;
  border-radius: 18.25px;
  background: #000;
}

.app__status svg {
  position: absolute;
  top: 25.5px;
  left: 293px;
  width: 74px;
  height: 15.7px;
}

/* Timers screen. It starts empty (just the title) and becomes the list the
   moment Add timer is tapped, behind the sheet, as it does in the app. */
.ts__title {
  position: absolute;
  top: 65px;
  left: 24px;
  font-family: var(--caps);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 34px;
  text-transform: uppercase;
}

.ts__actions {
  position: absolute;
  top: 64px;
  left: 281px;
  display: flex;
  align-items: center;
  height: 44px;
  padding-inline: 4px;
  border-radius: 22px;
  background: #ffffff09;
  color: #8a8a8a;
}

.ts__actions svg {
  width: 44px;
  height: 18px;
}

.ts__actions i {
  width: 1px;
  height: 20px;
  background: #ffffff12;
}

.ts__total {
  position: absolute;
  inset: 124px 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #525252;
  font-size: 14px;
  line-height: 53px;
}

.ts__total b {
  color: #fff;
  font-family: var(--display);
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -2px;
  text-shadow: 0 0 20px #ffffff0a;
}

.ts__strip {
  position: absolute;
  inset: 187px 24px auto;
  height: 6px;
  border-radius: 3px;
  background: #34d399;
  box-shadow: 0 0 10px 1px #34d39959;
}

.ts__legend {
  position: absolute;
  inset: 203px 0 auto;
  display: flex;
  justify-content: center;
  gap: 24px;
  color: #525252;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  line-height: 14px;
}

.ts__legend span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ts__legend svg {
  width: 15px;
  height: 15px;
  margin: -0.5px;
}

.ts__work {
  color: #34d399;
  filter: drop-shadow(0 0 4px #34d39987);
}

.ts__rest {
  color: #f59e0b;
  filter: drop-shadow(0 0 4px #f59e0b87);
}

.ts__rule {
  position: absolute;
  inset: 233px 24px auto;
  height: 1px;
  margin: 0;
  border: 0;
  background: #303136;
}

.card {
  position: absolute;
  inset: 250px 24px auto;
  display: flex;
  border: 1px solid;
  border-color: #ffffff1f #ffffff0f #ffffff05;
  border-radius: 13px;
  background: linear-gradient(180deg, #222, #181818);
  box-shadow:
    0 4px 16px #0006,
    0 1px 3px #00000045;
}

.card__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: auto 4px auto 12px;
  border-radius: 12px;
  background: #34d39930;
  color: #34d399;
}

.card__icon svg {
  width: 18px;
  height: 18px;
  translate: 1px 0;
}

.card__main {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 2px;
  padding: 12px 6px 12px 4px;
  color: #8a8a8a;
  font-size: 11px;
  line-height: 15px;
}

.card__main small {
  color: #525252;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  line-height: 13px;
  text-transform: uppercase;
}

.card__time {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #525252;
  font-weight: 500;
  line-height: 14px;
}

.card__time b {
  color: #fff;
  font-family: var(--display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -1.5px;
  line-height: 34px;
  text-shadow: 0 0 16px #ffffff14;
}

.card__grip {
  width: 7px;
  height: 12px;
  margin: auto 8.5px auto 4.5px;
  background:
    radial-gradient(circle, #8a8a8a 1px, transparent 1.2px) -1.5px -1.5px / 5px
    5px;
  opacity: 0.82;
}

.ts__start {
  position: absolute;
  top: 694px;
  left: 69px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 264px;
  height: 54px;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff, #d4d4d4);
  box-shadow:
    0 4px 8px #ffffff29,
    0 1px 3px #ffffff14;
  color: #0c0c0c;
  font-family: var(--caps);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.65px;
  line-height: 24px;
  text-transform: uppercase;
}

.ts__start svg {
  width: 24px;
  height: 24px;
  margin-inline: -1px;
  translate: 1.4px 0;
}

/* Tab bar: Timers, the + action, Settings. */
.dock {
  position: absolute;
  inset: 772px 20px auto;
  display: flex;
  align-items: center;
  height: 68px;
  padding: 9px 10px;
  border: 1px solid #303136;
  border-radius: 27px;
  background: linear-gradient(180deg, #232428, #181a1d);
  box-shadow:
    0 5px 12px #00000061,
    0 1px 3px #0000004d;
}

.dock__tab {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  color: #8a8a8a;
  font-family: var(--caps);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.7px;
  line-height: 12px;
  text-transform: uppercase;
}

.dock__tab--on {
  color: #e0e0e0;
}

.dock__tab svg {
  width: 22px;
  height: 22px;
  margin-block: 2.5px 0.5px;
}

.dock__add {
  display: grid;
  flex: 1;
  place-items: center;
}

/* A 48pt button inside a 56pt cutout of the page background. */
.dock__add i {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: linear-gradient(180deg, #2a2a2a, #1e1e1e);
  box-shadow:
    0 0 0 4px #101113,
    0 4px 7px #00000075,
    0 1px 0 #ffffff0f;
}

.dock__add svg {
  width: 24px;
  height: 24px;
}

/* The add-timer sheet over a 30% black scrim. */
.app__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #0000004d;
}

.sheet {
  position: absolute;
  inset: 236px 0 0;
  z-index: 2;
  padding: 28px 28px 0;
  border-top: 1px solid #303136;
  border-radius: 24px 24px 0 0;
  background: linear-gradient(180deg, #1e1e1e, #141414);
  color: #8a8a8a;
  font-size: 14px;
}

.sheet__grab {
  position: absolute;
  top: 8px;
  left: 183px;
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: #8a8a8a;
}

.sheet__head {
  position: relative;
  color: #fff;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 28px;
  text-align: center;
  text-transform: uppercase;
}

.sheet__head span {
  position: absolute;
  inset: 4px auto auto 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #8a8a8a;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 20px;
  text-transform: none;
}

.sheet__head svg {
  width: 20px;
  height: 20px;
}

.sheet__sub {
  margin-top: 10px;
  line-height: 17px;
  text-align: center;
}

.sheet__field {
  position: relative;
  height: 191px;
  margin-top: 20px;
  padding: 14px 16px;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  background: linear-gradient(180deg, #232428, #181a1d);
  box-shadow:
    0 4px 20px #00000042,
    0 1px 2px #0000003d;
}

.sheet__label {
  display: flex;
  justify-content: space-between;
  color: #525252;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.sheet__label b {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #8a8a8a;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

.sheet__label svg {
  width: 16px;
  height: 16px;
}

.sheet__hint,
.sheet__text {
  position: absolute;
  top: 44px;
  left: 16px;
  font-size: 14px;
  line-height: 21px;
}

.sheet__hint {
  color: #525252;
  opacity: 0;
}

.sheet__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: #fff;
}

.sheet__sources {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.sheet__src {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid #ffffff0a;
  border-radius: 12px;
  background: linear-gradient(180deg, #2a2a2a, #1e1e1e);
  color: #fff;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.8px;
  line-height: 16px;
  text-transform: uppercase;
}

.sheet__src i {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
}

.sheet__src svg {
  width: 19px;
  height: 19px;
}

.sheet__src--shot i {
  background: #a78bfa21;
  color: #a78bfa;
}

.sheet__src--cam i {
  background: #06b6d421;
  color: #06b6d4;
}

/* One status banner slot: reading the scan, analyzing, recognized. */
.sheet__status {
  display: grid;
  margin-top: 20px;
}

.status {
  --accent: #06b6d4;
  --line: #06b6d426;
  --fill: #06b6d40f;

  display: flex;
  grid-area: 1 / 1;
  align-items: center;
  gap: 12px;
  height: 60px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--fill);
  font-size: 12px;
  line-height: 17px;
  opacity: 0;
}

.status--found {
  --accent: #34d399;
  --line: #34d39926;
  --fill: #34d3990f;

  opacity: 1;
}

.status > svg {
  width: 20px;
  height: 20px;
  color: var(--accent);
}

.status span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.status b {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 15px;
  text-transform: uppercase;
}

.status i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
}

.status i svg {
  width: 14px;
  height: 14px;
}

.sheet__add {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  margin-top: 20px;
  border-radius: 10px;
  background: linear-gradient(180deg, #fff, #d4d4d4);
  color: #0c0c0c;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  isolation: isolate;
}

.sheet__add svg {
  width: 17px;
  height: 17px;
}

/* Disabled until a timer is recognized: the dark raised button. */
.sheet__add::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid #ffffff0a;
  border-radius: inherit;
  background: linear-gradient(180deg, #2a2a2a, #1e1e1e);
  opacity: 0;
}

/* A finger tap: a soft disc that settles and fades. */
.tap {
  position: absolute;
  z-index: 4;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: #ffffffb3;
  opacity: 0;
  pointer-events: none;
}

.tap--camera {
  top: 597px;
  left: 290px;
}

.tap--add {
  top: 770px;
  left: 201px;
}

/* ── the import scene on the phone ── */

.import .ts__title {
  animation: list-title var(--scene) linear infinite;
}

.import .ts__rule {
  animation: list-rule var(--scene) linear infinite;
}

.import .ts__actions,
.import .ts__total,
.import .ts__strip,
.import .ts__legend,
.import .card,
.import .ts__start {
  animation: list-on var(--scene) linear infinite;
}

.import .app__scrim {
  animation: scrim var(--scene) linear infinite;
}

.import .sheet {
  animation: sheet var(--scene) linear infinite;
}

.import .sheet__src--cam {
  animation:
    press-camera var(--scene) linear infinite,
    busy var(--scene) linear infinite;
}

.import .sheet__src--shot {
  animation: busy var(--scene) linear infinite;
}

.import .tap--camera {
  animation: tap-camera var(--scene) linear infinite;
}

.import .sheet__hint {
  animation: hint var(--scene) linear infinite;
}

.sheet__text span {
  animation: type-1 var(--scene) linear infinite;
}

.sheet__text span:nth-child(2) {
  animation-name: type-2;
}

.sheet__text span:nth-child(3) {
  animation-name: type-3;
}

.sheet__text span:nth-child(4) {
  animation-name: type-4;
}

.import .status--read {
  animation: status-read var(--scene) linear infinite;
}

.import .status--think {
  animation: status-think var(--scene) linear infinite;
}

.import .status > svg {
  animation: spin 0.9s linear infinite;
}

.import .status--found {
  animation: found var(--scene) linear infinite;
}

.import .sheet__add {
  animation:
    press-add var(--scene) linear infinite,
    add-label var(--scene) linear infinite;
}

.import .sheet__add::before {
  animation: add-off var(--scene) linear infinite;
}

.import .tap--add {
  animation: tap-add var(--scene) linear infinite;
}

/* The timeline, as a share of the 10 s scene (see the board above): tap
   Camera (4%), reading the scan (5–32%), text fills in while it's analyzed
   (32–48%), recognized (50%), tap Add timer (62%), the list updates behind
   the sheet (63%), the sheet closes (65–69%), then everything resets (95%). */
@keyframes list-title {
  0%,
  62.9%,
  95%,
  100% {
    translate: 0 -5px;
  }

  63%,
  94.9% {
    translate: 0 0;
  }
}

@keyframes list-rule {
  0%,
  62.9%,
  95%,
  100% {
    translate: 0 -119px;
  }

  63%,
  94.9% {
    translate: 0 0;
  }
}

@keyframes list-on {
  0%,
  62.9%,
  95%,
  100% {
    opacity: 0;
  }

  63%,
  94.9% {
    opacity: 1;
  }
}

@keyframes scrim {
  0%,
  65% {
    opacity: 1;
    animation-timing-function: var(--ease-drawer);
  }

  69%,
  95% {
    opacity: 0;
    animation-timing-function: var(--ease-out);
  }

  100% {
    opacity: 1;
  }
}

/* The sheet drops on the iOS drawer curve, then returns for the next loop. */
@keyframes sheet {
  0%,
  65% {
    translate: 0 0;
    opacity: 1;
    animation-timing-function: var(--ease-drawer);
  }

  69%,
  95% {
    translate: 0 105%;
    opacity: 1;
  }

  95.1% {
    translate: 0 0;
    opacity: 0;
    animation-timing-function: var(--ease-out);
  }

  100% {
    translate: 0 0;
    opacity: 1;
  }
}

@keyframes tap-camera {
  0%,
  3.6% {
    opacity: 0;
    scale: 0.6;
  }

  4% {
    opacity: 1;
    scale: 0.6;
    animation-timing-function: var(--ease-out);
  }

  8%,
  100% {
    opacity: 0;
    scale: 1.3;
  }
}

@keyframes press-camera {
  0%,
  3.6%,
  6.5%,
  100% {
    scale: 1;
  }

  4.6% {
    scale: 0.97;
  }
}

/* Source buttons dim to 58% while a scan is read and analyzed. */
@keyframes busy {
  0%,
  4.9%,
  50%,
  100% {
    opacity: 1;
  }

  5%,
  49.9% {
    opacity: 0.58;
  }
}

@keyframes hint {
  0%,
  31.9%,
  95%,
  100% {
    opacity: 1;
  }

  32%,
  94.9% {
    opacity: 0;
  }
}

/* Typed line by line, a character at a time. */
@keyframes type-1 {
  0%,
  32% {
    clip-path: inset(0 100% 0 0);
    animation-timing-function: steps(8);
  }

  35.5%,
  94% {
    clip-path: inset(0 0 0 0);
  }

  95%,
  100% {
    clip-path: inset(0 100% 0 0);
  }
}

@keyframes type-2 {
  0%,
  36% {
    clip-path: inset(0 100% 0 0);
    animation-timing-function: steps(10);
  }

  39.5%,
  94% {
    clip-path: inset(0 0 0 0);
  }

  95%,
  100% {
    clip-path: inset(0 100% 0 0);
  }
}

@keyframes type-3 {
  0%,
  40% {
    clip-path: inset(0 100% 0 0);
    animation-timing-function: steps(11);
  }

  43.5%,
  94% {
    clip-path: inset(0 0 0 0);
  }

  95%,
  100% {
    clip-path: inset(0 100% 0 0);
  }
}

@keyframes type-4 {
  0%,
  44% {
    clip-path: inset(0 100% 0 0);
    animation-timing-function: steps(13);
  }

  48%,
  94% {
    clip-path: inset(0 0 0 0);
  }

  95%,
  100% {
    clip-path: inset(0 100% 0 0);
  }
}

@keyframes status-read {
  0%,
  4.9%,
  32%,
  100% {
    opacity: 0;
  }

  5%,
  31.9% {
    opacity: 1;
  }
}

@keyframes status-think {
  0%,
  31.9%,
  50%,
  100% {
    opacity: 0;
  }

  32%,
  49.9% {
    opacity: 1;
  }
}

@keyframes spin {
  to {
    rotate: 1turn;
  }
}

@keyframes found {
  0%,
  49.9% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  94.9% {
    opacity: 1;
  }

  95%,
  100% {
    opacity: 0;
  }
}

/* Add timer stays the disabled dark button until the timer is recognized. */
@keyframes add-off {
  0%,
  49.9%,
  95%,
  100% {
    opacity: 1;
  }

  50%,
  94.9% {
    opacity: 0;
  }
}

@keyframes add-label {
  0%,
  49.9%,
  95%,
  100% {
    color: #8a8a8a;
  }

  50%,
  94.9% {
    color: #0c0c0c;
  }
}

@keyframes tap-add {
  0%,
  61.6% {
    opacity: 0;
    scale: 0.6;
  }

  62% {
    opacity: 1;
    scale: 0.6;
    animation-timing-function: var(--ease-out);
  }

  66%,
  100% {
    opacity: 0;
    scale: 1.3;
  }
}

@keyframes press-add {
  0%,
  61.6%,
  64.5%,
  100% {
    scale: 1;
  }

  62.6% {
    scale: 0.97;
  }
}

/* ── formats ──────────────────────────────────────────────────────────── */

.formats {
  padding-block: 40px 96px;
}

.formats__head {
  display: grid;
  gap: 16px;
}

.formats__head .lede {
  max-width: 30ch;
}

/* The picker: the format names as one big list. The chosen one lights up
   and opens its line of detail; a hairline fills while it autoplays. */
.fmt {
  display: grid;
  gap: 40px;
  margin-top: 40px;
}

.fmt__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.fmt__list {
  display: flex;
  flex-direction: column;
}

.fmt__item {
  position: relative;
  display: grid;
  padding: 14px 0 16px;
  border-top: 1px solid var(--line-soft);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.fmt__item:last-of-type {
  border-bottom: 1px solid var(--line-soft);
}

.fmt__name {
  justify-self: start;
  color: #3d3e43;
  font-family: var(--display);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 40px;
  transition: color 200ms var(--ease-out);
}

.fmt__item:hover .fmt__name {
  color: var(--text-faint);
}

.fmt__input:checked + .fmt__item .fmt__name {
  color: var(--text);
}

.fmt__input:focus-visible + .fmt__item .fmt__name {
  border-radius: 4px;
  outline: 2px solid var(--work);
  outline-offset: 4px;
}

.fmt__more {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 320ms var(--ease-out),
    opacity 200ms var(--ease-out);
}

.fmt__more > span {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

.fmt__input:checked + .fmt__item .fmt__more {
  grid-template-rows: 1fr;
  opacity: 1;
}

.fmt__desc {
  max-width: 34ch;
  padding-top: 10px;
  color: var(--text-body);
  font-size: 17px;
  line-height: 26px;
}

.fmt__spec {
  color: var(--work);
  font-family: var(--caps);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 16px;
  text-transform: uppercase;
}

.fmt__fill {
  position: absolute;
  inset: -1px 0 auto;
  height: 2px;
  background: var(--work);
  scale: 0 1;
  transform-origin: left;
}

/* Autoplay: home.js moves on when the fill ends. A click pins the choice. */
.js .fmt:not(.is-pinned) .fmt__input:checked + .fmt__item .fmt__fill {
  animation: fmt-fill 7s linear;
}

@keyframes fmt-fill {
  to {
    scale: 1 1;
  }
}

.fmt__device {
  --bezel: 9px;

  justify-self: center;
  width: 280px;
  border-radius: 46px;
}

@media (min-width: 1024px) {
  .formats {
    padding-block: 40px 140px;
  }

  .formats__head {
    grid-template-columns: 1fr minmax(0, 480px);
    align-items: end;
    gap: 48px;
  }

  .fmt {
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: center;
    gap: 96px;
    margin-top: 72px;
  }

  .fmt__item {
    padding: 18px 0 22px;
  }

  .fmt__name {
    font-size: 64px;
    line-height: 68px;
  }

  .fmt__device {
    --bezel: 12px;

    width: 340px;
    border-radius: 60px;
  }
}

/* ── the format phone: one scene per format ── */

.scene {
  position: absolute;
  inset: 0;
  display: none;
}

.fmt:has(#format-amrap:checked) .scene--amrap,
.fmt:has(#format-emom:checked) .scene--emom,
.fmt:has(#format-fortime:checked) .scene--fortime,
.fmt:has(#format-tabata:checked) .scene--tabata,
.fmt:has(#format-intervals:checked) .scene--intervals {
  display: block;
}

.scene .ts {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: list-out 7s linear infinite;
}

/* Timer list: the header pieces are shared with the Import phone. */
.ts__list {
  position: absolute;
  inset: 250px 24px auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.scene--fortime .ts__list {
  top: 264px;
}

.card--list {
  position: relative;
  inset: auto;
}

.card.is-rest .card__icon {
  background: #f59e0b30;
  color: #f59e0b;
}

.grip {
  flex-shrink: 0;
  width: 7px;
  height: 12px;
  margin: auto 8.5px auto 4.5px;
  background:
    radial-gradient(circle, #8a8a8a 1px, transparent 1.2px) -1.5px -1.5px / 5px
    5px;
  opacity: 0.82;
}

.plus {
  color: #525252;
  font-family: var(--display);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 18px;
  opacity: 0.9;
  translate: 0 -1px;
}

.ts__legend .plus {
  margin-left: 2px;
  font-family: var(--body);
  font-size: 10px;
  font-weight: 600;
  opacity: 0.72;
  translate: 0 -0.5px;
}

.notice {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border: 1px solid #f59e0b3d;
  border-radius: 12px;
  background: #f59e0b14;
  color: #8a8a8a;
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
}

.notice svg {
  width: 15px;
  height: 15px;
  color: #f59e0be6;
}

.group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  padding-bottom: 8px;
  border: 1px solid #ffffff24;
  border-radius: 12px;
  background: linear-gradient(180deg, #222, #181818) #1a1a1a;
  box-shadow:
    0 4px 16px #0006,
    0 1px 3px #00000045,
    0 1px 0 #ffffff0a;
}

.group__head {
  display: flex;
  align-items: center;
  height: 42px;
  margin-bottom: -4px;
  padding: 8px 12px 8px 14px;
  background: #ffffff07;
  color: #a3a3a3;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  line-height: 16px;
}

.group__head > span:first-child {
  display: flex;
  align-items: center;
  gap: 6px;
}

.group__head > span:first-child svg {
  width: 15px;
  height: 15px;
  opacity: 0.6;
}

.group__pill {
  margin: 0 8px 0 auto;
  padding: 3px 9px;
  border-radius: 10px;
  background: #ffffff0d;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 14px;
}

.group__pill i {
  color: #6f6f6f;
  font-style: normal;
  font-weight: 400;
}

.group__head .grip {
  margin: 0;
  background-image: radial-gradient(circle, #9a9a9a 1px, transparent 1.2px);
}

.child {
  display: flex;
  min-height: 75px;
  margin-inline: 16px;
  border: 1px solid #ffffff08;
  border-radius: 10px;
  background: #ffffff05;
}

.child__icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: auto 5px auto 11px;
  border-radius: 9px;
  background: #34d3991a;
  color: #34d399;
}

.child.is-rest .child__icon {
  background: #f59e0b1a;
  color: #f59e0b;
}

.child__icon svg {
  width: 15px;
  height: 15px;
}

.child__main {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
  gap: 2px;
  padding: 7px 6px 7px 2px;
  color: #a3a3a3;
  font-size: 13px;
  line-height: 18px;
}

.child__main small {
  color: #6f6f6f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  line-height: 15px;
  text-transform: uppercase;
}

.child__time {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #6f6f6f;
  font-weight: 500;
  line-height: 16px;
}

.child__time b {
  color: #fff;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 26px;
  text-shadow: 0 0 10px #ffffff14;
}

/* Header strip: one segment per step, sized by duration. */
.strip {
  position: absolute;
  inset: 187px 24px auto;
  display: flex;
  gap: 3px;
  height: 6px;
}

.strip i {
  min-width: 0;
  border-radius: 3px;
  background: #34d399;
  box-shadow: 0 0 10px 1px #34d39959;
}

.strip .is-rest {
  background: #f59e0b;
  box-shadow: 0 0 10px 1px #f59e0b59;
}

.strip--open {
  border-radius: 3px;
  background: #34d39914;
}

.strip--open i {
  flex: none;
  width: 6px;
  box-shadow: none;
}

/* With a For Time step the header shows the cap button instead. */
.strip--cap {
  top: 201px;
}

.ts__legend--cap {
  top: 217px;
}

.ts__rule--cap {
  top: 247px;
}

.cap {
  position: absolute;
  inset: 128px 0 auto;
  display: grid;
  justify-items: center;
}

.cap b {
  color: #fff;
  font-family: var(--display);
  font-size: 42px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -2px;
  line-height: 48px;
}

.cap small {
  margin-top: -4px;
  color: #fff9;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 15px;
  text-transform: uppercase;
}

.cap svg {
  position: absolute;
  top: 7px;
  left: calc(50% - 88px);
  width: 22px;
  height: 22px;
  color: #ffffffe6;
}

.tap--start {
  top: 721px;
  left: 201px;
}

/* ── live workout screen ── */

.wo {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #101113;
}

.scene .wo {
  animation: live-in 7s linear infinite;
}

.wo__light {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      120% 76% at 50% 42%,
      #34d39921 0%,
      #34d3990e 48%,
      #34d39900 100%
    ), #34d39908;
}

.wo__light--rest {
  background:
    radial-gradient(
      120% 76% at 50% 42%,
      #f59e0b21 0%,
      #f59e0b0e 48%,
      #f59e0b00 100%
    ), #f59e0b08;
}

.wo__deck {
  position: absolute;
  inset: 635.9px 0 0;
  background: linear-gradient(
    180deg,
    #10111300 0%,
    #10111300 12%,
    #1011132e 34%,
    #101113ad 62%,
    #101113f5 84%,
    #101113 100%
  );
}

.wo__top {
  position: absolute;
  inset: 70px 24px auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
}

.wo__top b {
  color: #fff;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 16.38px;
  text-transform: uppercase;
}

.wo__close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid #303136;
  border-radius: 18px;
  background: #1b1c1f;
  color: #8a8a8a;
}

.wo__close svg {
  width: 18px;
  height: 18px;
}

.wo__pills {
  display: grid;
  justify-items: end;
}

.wo__pill {
  grid-area: 1 / 1;
  padding: 4px 10px;
  border: 1px solid #303136;
  border-radius: 12px;
  background: #232428;
  color: #8a8a8a;
  font-size: 12px;
  font-weight: 700;
  line-height: 14.5px;
  white-space: nowrap;
}

.wo__elapsed {
  position: absolute;
  inset: 114px 0 auto;
  display: grid;
  height: 22.68px;
}

.wo__elapsed span {
  display: flex;
  grid-area: 1 / 1;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #525252;
  font-family: var(--display);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.wo__elapsed b {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

/* Segmented progress: a dim track per step, filled from the left. */
.wo__bar {
  position: absolute;
  inset: 142.68px 28px auto;
  display: flex;
  gap: 2px;
  height: 8px;
}

.wo__bar i {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 4px;
  background: #34d39940;
}

.wo__bar .is-rest {
  background: #f59e0b40;
}

.wo__bar i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #34d399;
  scale: 0 1;
  transform-origin: left;
}

.wo__bar .is-rest::after {
  background: #f59e0b;
}

.wo__bar--open {
  border-radius: 4px;
  background: #34d39914;
}

.wo__bar--open i {
  flex: none;
  width: 8px;
  overflow: visible;
  background: #34d399;
  box-shadow: 0 0 6px #34d39966;
}

.badge {
  position: absolute;
  top: 198.3px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid #34d3992e;
  border-radius: 17px;
  background: #34d39914;
  color: #34d399;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.6px;
  line-height: 18px;
  text-transform: uppercase;
  translate: -50% 0;
  white-space: nowrap;
}

.badge.is-rest {
  border-color: #f59e0b2e;
  background: #f59e0b14;
  color: #f59e0b;
}

.badge i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentcolor;
}

/* The clock: bare seconds under a minute, m:ss above, sized to fit the
   276pt slot as the app does (hero-layout.ts). */
.clk {
  position: absolute;
  inset: 231.79px 16px auto;
  display: grid;
  place-items: center;
  height: 276px;
}

.clk span,
.wo__elapsed span {
  opacity: 0;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.clk span {
  grid-area: 1 / 1;
  color: #fff;
  font-family: var(--display);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.038em;
  line-height: 1.0435;
  white-space: nowrap;
}

.clk .t0,
.wo__elapsed .t0 {
  opacity: 1;
}

.clk--s {
  font-size: 253.92px;
}

.clk--mss {
  font-size: 165.44px;
}

.clk--mmss {
  font-size: 128.08px;
}

.wo__desc {
  position: absolute;
  inset: 507.79px 41.9px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  color: #ffffffc7;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.2px;
  line-height: 22px;
  text-align: center;
}

.wo__desc i {
  width: 176px;
  height: 1px;
  background: #34d399b8;
}

.wo__next {
  position: absolute;
  top: 681.9px;
  left: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  color: #34d399;
}

.wo__next.is-rest {
  color: #f59e0b;
}

.wo__next small {
  color: #ffffff80;
  font-family: var(--display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.chip {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid #34d3991f;
  border-radius: 13px;
  background: #34d3990e;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.1px;
  line-height: 14px;
  text-transform: uppercase;
}

.is-rest .chip {
  border-color: #f59e0b1f;
  background: #f59e0b0e;
}

.is-rest .chip b {
  border-left-color: #f59e0b33;
}

.chip i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentcolor;
}

.chip b {
  padding-left: 7px;
  border-left: 1px solid #34d39933;
  font-family: var(--display);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.35px;
  line-height: 12px;
  opacity: 0.88;
}

.wo__next em {
  max-width: 220px;
  color: #ffffff94;
  font-family: var(--caps);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.15px;
}

.wo__final {
  position: absolute;
  inset: 699.9px 0 auto;
  color: #525252;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  line-height: 12px;
  text-align: center;
  text-transform: uppercase;
}

/* Reset, Pause (or Complete for For Time), Skip. */
.wo__controls {
  position: absolute;
  inset: 739.9px 0 auto;
  display: flex;
  justify-content: center;
  gap: 32px;
}

.ctl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: #8a8a8a;
  font-size: 10px;
  font-weight: 700;
  line-height: 12px;
}

.ctl svg {
  box-sizing: content-box;
  width: 18px;
  height: 18px;
  padding: 16px;
  border: 1px solid #303136;
  border-radius: 50%;
  background: linear-gradient(180deg, #2a2a2a, #1e1e1e);
  box-shadow:
    0 4px 8px #00000045,
    0 1px 0 #ffffff0a;
}

.ctl small {
  font-size: inherit;
}

.ctl--primary {
  margin-top: 0;
}

.ctl--primary svg {
  width: 28px;
  height: 28px;
  padding: 22px;
  border: 0;
  background: linear-gradient(180deg, #fff, #d4d4d4);
  box-shadow:
    0 8px 24px -4px #ffffff45,
    0 2px 6px #ffffff21,
    0 1px 0 #ffffff21;
  color: #101113;
}

/* Tabata's work-to-rest switch: paired elements trade places. */
.scene .before {
  animation: phase-before 7s linear infinite;
}

.scene .after {
  opacity: 0;
  animation: phase-after 7s linear infinite;
}

/* The scene: the list, a tap on Start workout at 2.1 s, the workout screen
   from 2.6 s, then a cross-fade back to the list for the next loop. */
.scene .tap--start {
  animation: tap-start 7s linear infinite;
}

.scene .ts__start {
  animation: press-start 7s linear infinite;
}

@keyframes list-out {
  0%,
  37% {
    opacity: 1;
  }

  42%,
  96% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes live-in {
  0%,
  37% {
    opacity: 0;
    scale: 1.04;
    animation-timing-function: var(--ease-out);
  }

  43%,
  96% {
    opacity: 1;
    scale: 1;
  }

  100% {
    opacity: 0;
    scale: 1;
  }
}

@keyframes tap-start {
  0%,
  29.6% {
    opacity: 0;
    scale: 0.6;
  }

  30% {
    opacity: 1;
    scale: 0.6;
    animation-timing-function: var(--ease-out);
  }

  35%,
  100% {
    opacity: 0;
    scale: 1.3;
  }
}

@keyframes press-start {
  0%,
  29.6%,
  34%,
  100% {
    scale: 1;
  }

  31% {
    scale: 0.95;
  }
}

.strip .f10,
.wo__bar .f10 {
  flex: 10;
}

.strip .f20,
.wo__bar .f20 {
  flex: 20;
}

.strip .f60,
.wo__bar .f60 {
  flex: 60;
}

.strip .f180,
.wo__bar .f180 {
  flex: 180;
}

.strip .f900,
.wo__bar .f900 {
  flex: 900;
}

.strip .f1200,
.wo__bar .f1200 {
  flex: 1200;
}

.wo__bar .fill85::after {
  scale: 0.85 1;
}

@keyframes tick-0 {
  0%,
  51.28% {
    opacity: 1;
  }

  51.29%,
  100% {
    opacity: 0;
  }
}

.fmt .t0 {
  animation-name: tick-0;
}

@keyframes tick-1 {
  0%,
  51.28%,
  65.57%,
  100% {
    opacity: 0;
  }

  51.29%,
  65.56% {
    opacity: 1;
  }
}

.fmt .t1 {
  animation-name: tick-1;
}

@keyframes tick-2 {
  0%,
  65.56%,
  79.86%,
  100% {
    opacity: 0;
  }

  65.57%,
  79.85% {
    opacity: 1;
  }
}

.fmt .t2 {
  animation-name: tick-2;
}

@keyframes tick-3 {
  0%,
  79.85%,
  94.14%,
  100% {
    opacity: 0;
  }

  79.86%,
  94.13% {
    opacity: 1;
  }
}

.fmt .t3 {
  animation-name: tick-3;
}

@keyframes tick-4 {
  0%,
  94.13% {
    opacity: 0;
  }

  94.14%,
  100% {
    opacity: 1;
  }
}

.fmt .t4 {
  animation-name: tick-4;
}

@keyframes phase-before {
  0%,
  79.85% {
    opacity: 1;
  }

  79.86%,
  100% {
    opacity: 0;
  }
}

@keyframes phase-after {
  0%,
  79.85% {
    opacity: 0;
  }

  79.86%,
  100% {
    opacity: 1;
  }
}

/* ── voice ────────────────────────────────────────────────────────────── */

/* One 10.5 s loop matches cues.mp3: three, two, one at 0–2 s, go at 3 s,
   halfway at 4.7 s, ten seconds at 6.2 s, rest at 7.7 s and time at 9 s. */
/* The section is the stage: no box of its own. Its work light (green) and
   rest light (amber, during the rest cue) reach past the section edges and
   fade to nothing, so it melts into its neighbours. */
.voice {
  --loop: 10.5s;

  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding-block: 96px;
}

.voice::before,
.voice::after {
  content: "";
  position: absolute;
  inset: -160px 0;
  z-index: -1;
  pointer-events: none;
}

.voice::after {
  background: radial-gradient(
    ellipse 62% 42% at 50% 62%,
    oklab(77.3% -0.147 0.044 / 16%),
    transparent 70%
  );
}

.voice::before {
  background: radial-gradient(
    ellipse 56% 40% at 62% 64%,
    oklab(76.9% 0.056 0.155 / 22%),
    transparent 70%
  );
  opacity: 0;
  animation: rest-light var(--loop) linear infinite;
}

.voice__head {
  display: grid;
  gap: 20px;
}

.voice__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.voice__intro .lede {
  max-width: 36ch;
}

.hear[hidden] {
  display: none;
}

.hear svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.hear svg path:first-child {
  fill: currentcolor;
}

/* While the cues play, the speaker's waves pulse outward. */
.hear[aria-pressed="true"] .hear__wave {
  animation: hear-wave 900ms var(--ease-out) infinite;
}

.hear[aria-pressed="true"] .hear__wave + .hear__wave {
  animation-delay: 150ms;
}

@keyframes hear-wave {
  0% {
    opacity: 0.25;
  }

  40% {
    opacity: 1;
  }

  100% {
    opacity: 0.25;
  }
}

/* Scenes rest while off screen (home.js marks the visible ones). Important
   because animation shorthands elsewhere reset the play state. */
.js [data-scene]:not(.is-live),
.js [data-scene]:not(.is-live)::before,
.js [data-scene]:not(.is-live) *,
.js [data-scene]:not(.is-live) *::before,
.js [data-scene]:not(.is-live) *::after {
  animation-play-state: paused !important;
}

.voice__stage {
  position: relative;
  padding-bottom: 72px;
}

.device--landscape {
  width: 100%;
  border-radius: 6% / 13%;
}

.device--landscape img {
  border-radius: 5% / 11%;
}

.device--portrait {
  position: absolute;
  right: 4px;
  bottom: 0;
  width: 30%;
}

@media (min-width: 1024px) {
  .voice {
    padding-block: 140px 120px;
  }

  .voice__head {
    grid-template-columns: 1fr minmax(0, 480px);
    align-items: end;
    gap: 48px;
  }
}

@media (min-width: 1200px) {
  .voice__stage {
    padding-bottom: 48px;
  }

  .device--landscape {
    width: 72%;
    margin-left: 8%;
  }

  .ripples {
    left: 44%;
    width: 50%;
  }

  .device--portrait {
    right: 2%;
    bottom: 0;
    width: 21%;
  }
}

/* The live caption: the spoken word itself, huge, standing on the phones. */
.caption {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.16em;
  margin: 56px 0 -0.34em;
  font-size: clamp(44px, 11.5vw, 136px);
  pointer-events: none;
  white-space: nowrap;
}

.caption__wave {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 0.3em;
  animation: speak var(--loop) linear infinite;
}

.caption__wave i {
  width: 5px;
  height: 100%;
  border-radius: 3px;
  background: var(--work);
  scale: 1 0.3;
  animation: wave 0.9s ease-in-out infinite alternate;
}

.caption__wave i:nth-child(2) {
  animation-delay: -0.3s;
}

.caption__wave i:nth-child(3) {
  animation-delay: -0.6s;
}

.caption__wave i:nth-child(4) {
  animation-delay: -0.15s;
}

.caption__wave i:nth-child(5) {
  animation-delay: -0.45s;
}

.caption__words {
  display: grid;
  justify-items: center;
  font-family: var(--display);
  font-size: 1em;
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 1;
  text-shadow: 0 20px 60px #000000b3;
}

.caption__words span {
  grid-area: 1 / 1;
  opacity: 0;
  animation: cue-1 var(--loop) linear infinite;
}

.caption__words .go {
  color: var(--work);
}

.caption__words .rest {
  color: var(--rest);
}

/* Each cue sends a ring out from behind the landscape phone. */
.ripples {
  position: absolute;
  top: 46%;
  left: 50%;
  z-index: -1;
  width: 60%;
  aspect-ratio: 1;
  translate: -50% -50%;
  pointer-events: none;
}

.ripples i {
  position: absolute;
  inset: 0;
  border: 1px solid #ffffff2e;
  border-radius: 50%;
  opacity: 0;
  animation: ripple var(--loop) linear infinite;
}

.ripples i:nth-child(2) {
  animation-delay: 1s;
}

.ripples i:nth-child(3) {
  animation-delay: 2s;
}

.ripples i:nth-child(4) {
  border-color: #34d39966;
  animation-delay: 3s;
}

.ripples i:nth-child(5) {
  animation-delay: 4.7s;
}

.ripples i:nth-child(6) {
  animation-delay: 6.2s;
}

.ripples i:nth-child(7) {
  border-color: #f59e0b66;
  animation-delay: 7.7s;
}

.ripples i:nth-child(8) {
  animation-delay: 9s;
}

@keyframes ripple {
  0% {
    opacity: 0.9;
    scale: 0.55;
    animation-timing-function: var(--ease-out);
  }

  14% {
    opacity: 0;
    scale: 1.5;
  }

  100% {
    opacity: 0;
    scale: 1.5;
  }
}

/* The workout as a timeline, with each cue pinned where it plays. */
.cueline {
  position: relative;
  margin-top: 64px;
  padding-block: 44px 56px;
}

.cueline__track {
  position: relative;
  display: flex;
  gap: 4px;
  height: 12px;
}

.cueline__work,
.cueline__rest {
  border-radius: 3px;
}

.cueline__work {
  flex: 15;
  background: var(--bar-work);
}

.cueline__rest {
  flex: 5;
  background: oklab(76.9% 0.056 0.155 / 45%);
}

/* Spans the track so translate percentages are track percentages. */
.cueline__head {
  position: absolute;
  inset: -10px 0;
  pointer-events: none;
  animation: playhead var(--loop) linear infinite;
}

.cueline__head::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 2px;
  background: var(--text);
}

.cueline ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cueline li {
  position: absolute;
  top: calc(44px + 12px + 16px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--text-faint);
  font-family: var(--caps);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 16px;
  text-transform: uppercase;
  white-space: nowrap;
  animation: cue-label var(--loop) linear infinite;
}

.cueline time {
  color: var(--text-faint);
}

.cueline .at-go {
  left: 0;
  --lit: var(--work);

  animation-delay: 3s;
}

.cueline .at-half {
  left: 37.5%;
  align-items: center;
  translate: -50% 0;
  animation-delay: 4.7s;
}

.cueline .at-ten {
  top: 0;
  left: 74.2%;
  align-items: center;
  translate: -50% 0;
  animation-delay: 6.2s;
}

.cueline .at-rest {
  left: 75%;
  --lit: var(--rest);

  animation-delay: 7.7s;
}

.cueline .at-time {
  right: 0;
  align-items: flex-end;
  animation-delay: 9s;
}

@media (min-width: 768px) {
  .cueline li {
    flex-direction: row;
    gap: 10px;
    font-size: 13px;
  }

  .cueline .at-ten {
    flex-direction: row;
  }
}

.caption__words span:nth-child(1) {
  animation-name: cue-1;
}

.caption__words span:nth-child(2) {
  animation-name: cue-2;
}

.caption__words span:nth-child(3) {
  animation-name: cue-3;
}

.caption__words span:nth-child(4) {
  animation-name: cue-4;
}

.caption__words span:nth-child(5) {
  animation-name: cue-5;
}

.caption__words span:nth-child(6) {
  animation-name: cue-6;
}

.caption__words span:nth-child(7) {
  animation-name: cue-7;
}

.caption__words span:nth-child(8) {
  animation-name: cue-8;
}

/* Each caption holds until the next cue replaces it, so the chip is never
   empty. Words rise in on a strong ease-out; a light blur bridges the swap
   so it reads as one changing line. Timings match cues.mp3. */

@keyframes cue-1 {
  0% {
    opacity: 0;
    translate: 0 8px;
    filter: blur(4px);
    animation-timing-function: var(--ease-out);
  }

  2.5%,
  8.92% {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
  }

  10.72%,
  100% {
    opacity: 0;
    filter: blur(4px);
  }
}

@keyframes cue-2 {
  0%,
  9.52% {
    opacity: 0;
    translate: 0 8px;
    filter: blur(4px);
    animation-timing-function: var(--ease-out);
  }

  12.02%,
  18.45% {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
  }

  20.25%,
  100% {
    opacity: 0;
    filter: blur(4px);
  }
}

@keyframes cue-3 {
  0%,
  19.05% {
    opacity: 0;
    translate: 0 8px;
    filter: blur(4px);
    animation-timing-function: var(--ease-out);
  }

  21.55%,
  27.97% {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
  }

  29.77%,
  100% {
    opacity: 0;
    filter: blur(4px);
  }
}

@keyframes cue-4 {
  0%,
  28.57% {
    opacity: 0;
    translate: 0 8px;
    filter: blur(4px);
    animation-timing-function: var(--ease-out);
  }

  31.07%,
  44.16% {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
  }

  45.96%,
  100% {
    opacity: 0;
    filter: blur(4px);
  }
}

@keyframes cue-5 {
  0%,
  44.76% {
    opacity: 0;
    translate: 0 8px;
    filter: blur(4px);
    animation-timing-function: var(--ease-out);
  }

  47.26%,
  58.45% {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
  }

  60.25%,
  100% {
    opacity: 0;
    filter: blur(4px);
  }
}

@keyframes cue-6 {
  0%,
  59.05% {
    opacity: 0;
    translate: 0 8px;
    filter: blur(4px);
    animation-timing-function: var(--ease-out);
  }

  61.55%,
  72.73% {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
  }

  74.53%,
  100% {
    opacity: 0;
    filter: blur(4px);
  }
}

@keyframes cue-7 {
  0%,
  73.33% {
    opacity: 0;
    translate: 0 8px;
    filter: blur(4px);
    animation-timing-function: var(--ease-out);
  }

  75.83%,
  85.11% {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
  }

  86.91%,
  100% {
    opacity: 0;
    filter: blur(4px);
  }
}

@keyframes cue-8 {
  0%,
  85.71% {
    opacity: 0;
    translate: 0 8px;
    filter: blur(4px);
    animation-timing-function: var(--ease-out);
  }

  88.21%,
  97% {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
  }

  100% {
    opacity: 0;
    filter: blur(4px);
  }
}

/* The wave speaks only while a cue is spoken. */
@keyframes speak {
  0% {
    scale: 1 1;
  }

  5.24% {
    scale: 1 1;
  }

  6.67% {
    scale: 1 0.3;
  }

  9.05% {
    scale: 1 0.3;
  }

  9.52% {
    scale: 1 1;
  }

  15.24% {
    scale: 1 1;
  }

  16.67% {
    scale: 1 0.3;
  }

  18.57% {
    scale: 1 0.3;
  }

  19.05% {
    scale: 1 1;
  }

  24.76% {
    scale: 1 1;
  }

  26.19% {
    scale: 1 0.3;
  }

  28.1% {
    scale: 1 0.3;
  }

  28.57% {
    scale: 1 1;
  }

  37.14% {
    scale: 1 1;
  }

  38.57% {
    scale: 1 0.3;
  }

  44.29% {
    scale: 1 0.3;
  }

  44.76% {
    scale: 1 1;
  }

  54.29% {
    scale: 1 1;
  }

  55.71% {
    scale: 1 0.3;
  }

  58.57% {
    scale: 1 0.3;
  }

  59.05% {
    scale: 1 1;
  }

  68.57% {
    scale: 1 1;
  }

  70.0% {
    scale: 1 0.3;
  }

  72.86% {
    scale: 1 0.3;
  }

  73.33% {
    scale: 1 1;
  }

  81.43% {
    scale: 1 1;
  }

  82.86% {
    scale: 1 0.3;
  }

  85.24% {
    scale: 1 0.3;
  }

  85.71% {
    scale: 1 1;
  }

  94.29% {
    scale: 1 1;
  }

  95.71% {
    scale: 1 0.3;
  }

  100% {
    scale: 1 0.3;
  }
}

@keyframes cue-label {
  0%,
  100% {
    color: var(--text-faint);
  }

  1%,
  12% {
    color: var(--lit, var(--text));
  }

  16% {
    color: var(--text-faint);
  }
}

/* Glides between cue points and lands as each cue is spoken. */
@keyframes playhead {
  0%,
  28.6% {
    translate: 0 0;
    animation-timing-function: var(--ease-in-out);
  }

  44.8% {
    translate: 37.5% 0;
    animation-timing-function: var(--ease-in-out);
  }

  59% {
    translate: 74.2% 0;
    animation-timing-function: var(--ease-in-out);
  }

  73.3% {
    translate: 75% 0;
    animation-timing-function: var(--ease-in-out);
  }

  85.7%,
  100% {
    translate: calc(100% - 3px) 0;
  }
}

@keyframes rest-light {
  0%,
  72% {
    opacity: 0;
  }

  75%,
  85% {
    opacity: 1;
  }

  90%,
  100% {
    opacity: 0;
  }
}

@keyframes wave {
  to {
    scale: 1 1;
  }
}

/* ── reviews ──────────────────────────────────────────────────────────── */

/* Two rows of quotes drifting in opposite directions, fading out at the
   edges. Each row holds its list twice, so sliding by half loops cleanly. */
.reviews {
  padding-block: 96px 40px;
}

.wall {
  display: grid;
  gap: 16px;
  overflow: clip;
  margin-top: 48px;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 12%,
    #000 88%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 12%,
    #000 88%,
    transparent
  );
}

.wall__row {
  display: flex;
  width: max-content;
  animation: drift 70s linear infinite;
}

.wall__row--back {
  animation-direction: reverse;
  animation-duration: 80s;
}

.wall:hover .wall__row {
  animation-play-state: paused;
}

.wall ul {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 0 16px 0 0;
  list-style: none;
}

@keyframes drift {
  to {
    translate: -50% 0;
  }
}

.review {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 300px;
  padding: 20px;
  border: 1px solid #ffffff14;
  border-radius: 12px;
  background: #141518;
}

.review__who {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-faint);
  font-size: 13px;
  line-height: 18px;
}

.review__who span {
  display: flex;
  flex-direction: column;
}

.review__who b {
  color: var(--text-strong);
  font-size: 14px;
  font-weight: 600;
}

.review__avatar {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-family: var(--caps);
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.review__avatar--work {
  background: #34d39926;
  color: var(--work);
}

.review__avatar--rest {
  background: #f59e0b26;
  color: var(--rest);
}

.review__avatar--amrap {
  background: #a78bfa26;
  color: #a78bfa;
}

.review__text {
  color: var(--text-body);
  font-size: 16px;
  line-height: 24px;
}

@media (min-width: 1024px) {
  .reviews {
    padding-block: 140px 60px;
  }

  .wall {
    margin-top: 64px;
  }

  .review {
    width: 340px;
  }
}

/* ── faq ──────────────────────────────────────────────────────────────── */

.faq-section {
  padding-block: 96px;
}

.faq-section .wrap {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.faq-section__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-section__head .lede {
  font-size: 16px;
  line-height: 25px;
}

.faq-section__head a,
.faq a {
  color: var(--work);
}

.faq {
  display: flex;
  flex-direction: column;
}

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

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

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 20px;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 24px;
}

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

.faq summary::after {
  content: "";
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: url("/assets/faq-plus.svg") center / 28px no-repeat;
}

.faq details[open] summary::after {
  background-image: url("/assets/faq-minus.svg");
}

.faq details p {
  max-width: 600px;
  padding-bottom: 22px;
  color: #b4b4b8;
  font-size: 15px;
  line-height: 23px;
}

@media (min-width: 1024px) {
  .faq-section {
    padding-block: 160px;
  }

  .faq-section .wrap {
    flex-direction: row;
    gap: 100px;
  }

  .faq-section__head {
    flex-shrink: 0;
    width: 400px;
  }

  .faq-section__head .lede {
    font-size: 17px;
    line-height: 26px;
  }

  .faq {
    flex-grow: 1;
  }

  .faq summary {
    padding-block: 26px;
    font-size: 21px;
    line-height: 28px;
  }

  .faq details p {
    margin-top: -12px;
    padding-bottom: 28px;
    font-size: 17px;
    line-height: 27px;
  }
}

/* ── closing call to action ───────────────────────────────────────────── */

/* The mark at its one true ratio, flat on a green wash, as on the paywall. */
.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  position: relative;
  isolation: isolate;
  padding: 88px 20px 96px;
  text-align: center;
}

.cta::before {
  content: "";
  position: absolute;
  inset: -120px 0 0;
  z-index: -1;
  background: radial-gradient(
    ellipse 70% 34% at 50% 34%,
    oklab(77.3% -0.147 0.044 / 20%),
    transparent 70%
  );
  pointer-events: none;
}

.cta__mark {
  width: auto;
  height: 96px;
  aspect-ratio: 790 / 704;
}

.cta h2 {
  font-family: var(--display);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 42px;
  text-wrap: balance;
}

.cta h2 .dim {
  display: block;
  color: var(--text-muted);
}

@media (min-width: 900px) {
  .cta {
    gap: 36px;
    padding-block: 140px 150px;
  }

  .cta::before {
    background: radial-gradient(
      ellipse 40% 42% at 50% 36%,
      oklab(77.3% -0.147 0.044 / 20%),
      transparent 70%
    );
  }

  .cta__mark {
    height: 141px;
  }

  .cta h2 {
    font-size: 80px;
    line-height: 82px;
  }
}

/* ── reduced motion ───────────────────────────────────────────────────── */

/* Gentler, not frozen: movement goes, but captions still fade, clocks still
   tick (they step, they don't slide) and the import demo rests on its result. */
@media (prefers-reduced-motion: reduce) {
  .whiteboard__scan,
  .tap {
    display: none;
  }

  .caption__wave,
  .caption__wave i,
  .cueline__head,
  .press,
  .bars i,
  .import .app *,
  .import .sheet .sheet__add::before,
  .fmt__fill {
    animation: none !important;
  }

  .cueline__head {
    translate: 74.2% 0;
  }

  .caption__words span {
    translate: none !important;
    filter: none !important;
  }

  /* The import demo rests on its result: the text read and the timer
     recognized, over the still-empty timer list. */
  .recognized__bar,
  .recognized__label,
  .recognized__time {
    clip-path: none;
    opacity: 1;
    animation: none;
  }

  .import .ts__actions,
  .import .ts__total,
  .import .ts__strip,
  .import .ts__legend,
  .import .card,
  .import .ts__start {
    opacity: 0;
  }

  .import .ts__title {
    translate: 0 -5px;
  }

  .import .ts__rule {
    translate: 0 -119px;
  }

  .wall {
    overflow-x: auto;
  }

  .wall__row {
    animation: none;
  }

  .wall__row ul + ul {
    display: none;
  }
}