@font-face {
  font-family: 'Archivo';
  src: url('../fonts/Archivo-Medium.ttf') format('truetype');
  font-weight: 400 600;
  font-display: swap;
}

@font-face {
  font-family: 'Saira Condensed';
  src: url('../fonts/SairaCondensed-Bold.ttf') format('truetype');
  font-weight: 600 800;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/IBMPlexMono-Medium.ttf') format('truetype');
  font-weight: 400 600;
  font-display: swap;
}

/* bip's palette. Orange is what you touch to move forward, yellow is information and never a
   button, off-white fills what is selected. */
:root {
  --background: #0e0d0b;
  --surface: #1c1a14;
  --text: #eae6dd;
  --text-secondary: #b4aea3;
  --line: rgba(234, 230, 221, 0.24);
  /* Outlines of what can be pressed need 3:1 against the background; plain rules stay quieter. */
  --control-line: rgba(234, 230, 221, 0.42);
  --action: #c2481c;
  --on-action: #fffdf8;
  --info: #d9a227;
  --selected: #f2efe8;
  --ink: #0e0d0b;
  --ink-secondary: #2a2720;
  --phase-prep: #d9a227;
  --phase-effort: #f5f2ea;
  --phase-recovery: #4fa37a;

  --display: 'Saira Condensed', 'Arial Narrow', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  background: var(--background);
  color: var(--text);
  font-family: 'Archivo', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

body {
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

button {
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  cursor: pointer;
}

/* Every press answers at once, before any sound or screen change confirms it. */
button:active:not(:disabled) {
  opacity: 0.72;
}

button:focus-visible {
  outline: 3px solid var(--info);
  outline-offset: -3px;
}

#app {
  position: relative;
  height: 100dvh;
  overflow: hidden;
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.mono {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}

.display {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1;
}

/* Header shared by setup, help and end */

.brandbar {
  flex: none;
  height: 56px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.brand .display {
  font-size: 32px;
}

.brand .mono {
  letter-spacing: 0.16em;
}

.tools {
  display: flex;
  align-items: center;
  gap: 14px;
}

.languages {
  display: flex;
  border: 1px solid var(--control-line);
}

.languages button {
  position: relative;
  width: 38px;
  height: 30px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

/* A 44 px tall hit area around a smaller box. */
.languages button::after,
.field .toggle::after {
  content: '';
  position: absolute;
  inset: -7px 0;
}

.field .toggle::after {
  inset: -13px -8px;
}

.languages button + button {
  border-left: 1px solid var(--control-line);
}

.languages button[aria-pressed='true'] {
  background: var(--selected);
  color: var(--ink);
}

.help-button {
  height: 44px;
  padding-left: 12px;
  margin-right: -4px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.help-button .mark {
  width: 22px;
  height: 22px;
  border: 1px solid var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
}

/* Setup */

/* Setup and end read like a phone sheet on anything up to a laptop. */
.setup,
.end {
  max-width: 560px;
  margin: 0 auto;
}

.setup {
  padding-top: var(--safe-top);
}

.timeline {
  display: flex;
  gap: 1px;
  height: 10px;
  margin-top: 14px;
}

.timeline.dense {
  gap: 0;
}

.timeline i {
  flex-basis: 0;
  min-width: 1px;
}

/* The colour mark stays beside its label, which wraps next to it rather than under it. */
.field .label {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.phase-dot {
  flex: none;
  width: 8px;
  height: 8px;
}

.intro {
  padding: 12px 20px 6px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-secondary);
}

.fields {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 20px;
}

.field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}

.field.choice {
  min-height: 66px;
  padding: 8px 0;
}

.field.number {
  min-height: 58px;
  padding: 6px 0;
}

.field > .mono,
.field > .caption {
  flex: 1 1 auto;
  min-width: 0;
}

.field.last {
  border-bottom: none;
}

.field .caption {
  max-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.field .hint {
  font-size: 11px;
  line-height: 1.3;
}

.segmented {
  flex: none;
  display: flex;
  border: 1px solid var(--control-line);
}

.segmented button {
  width: 104px;
  height: 44px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.segmented button + button {
  border-left: 1px solid var(--control-line);
}

.segmented button[aria-pressed='true'] {
  background: var(--selected);
  color: var(--ink);
}

.stepper {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.stepper button {
  position: relative;
  width: 56px;
  height: 44px;
  border: 1px solid var(--control-line);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
}

.stepper button:disabled {
  opacity: 0.3;
  cursor: default;
}

.stepper button i {
  position: absolute;
  width: 16px;
  height: 2px;
  background: var(--text);
}

.stepper button i + i {
  width: 2px;
  height: 16px;
}

.stepper .value {
  width: 76px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
}

.stepper .value .display {
  font-weight: 700;
  font-size: 30px;
}

.stepper .value .display.range {
  font-size: 22px;
}

/* The per-exercise rows hang under the work row, set in so they read as its detail. */
.field .toggle {
  position: relative;
  align-self: flex-start;
  padding: 2px 0;
  font-size: 11px;
  line-height: 1.3;
  color: var(--text-secondary);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
}

.field.sub {
  margin-left: 12px;
  padding-left: 12px;
  border-left: 2px solid var(--line);
}

.field.reset {
  height: 44px;
  justify-content: flex-start;
}

.field.reset .toggle {
  align-self: center;
}

.stepper .value .display.off {
  color: var(--text-secondary);
}

.stepper .value .mono {
  font-size: 11px;
  letter-spacing: 0;
}

.launch {
  flex: none;
  padding: 0 20px calc(var(--safe-bottom) + 12px);
  border-top: 1px solid var(--line);
}

.summary {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.summary .mono {
  letter-spacing: 0.12em;
}

.summary strong {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text);
}

.notice {
  padding-bottom: 8px;
  font-size: 11px;
  color: var(--text-secondary);
}

.primary {
  width: 100%;
  height: 76px;
  background: var(--action);
  color: var(--on-action);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.primary .display {
  font-size: 34px;
  letter-spacing: 0.04em;
}

.secondary {
  width: 100%;
  height: 60px;
  border: 1px solid var(--control-line);
  font-family: var(--display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: 0.04em;
}

/* Help */

.help {
  padding-top: var(--safe-top);
  background: var(--background);
  z-index: 2;
}

.close {
  position: relative;
  width: 44px;
  height: 44px;
  border: 1px solid var(--control-line);
}

.close i,
.quit i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  margin: -1px 0 0 -9px;
  background: currentColor;
  transform: rotate(45deg);
}

.close i + i,
.quit i + i {
  transform: rotate(-45deg);
}

.help .body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 20px 24px;
}

.help section {
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-bottom: 1px solid var(--line);
}

.help section:last-child {
  border-bottom: none;
}

.help section .mono {
  letter-spacing: 0.14em;
  color: var(--info);
}

.help p,
.help .swatch {
  font-size: 15px;
  line-height: 1.5;
}

.help .swatch {
  display: flex;
  align-items: center;
  gap: 10px;
}

.help .swatch i {
  width: 16px;
  height: 16px;
}

.help .foot {
  flex: none;
  padding: 12px 20px calc(var(--safe-bottom) + 12px);
  border-top: 1px solid var(--line);
}

/* Session: the whole screen takes the phase colour, read before any word is. */

.session {
  background: var(--phase);
  color: var(--ink);
  transition: background 0.25s;
}

/* A dark band under the status bar keeps the phone's own clock readable on a light phase. */
.session .statusbar {
  flex: none;
  height: var(--safe-top);
  background: var(--background);
}

.session .content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  transition: opacity 0.2s;
}

.session.paused .content {
  opacity: 0.22;
}

.session .top {
  flex: none;
  height: 56px;
  margin-top: 8px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.quit {
  position: relative;
  height: 44px;
  padding: 0 14px 0 34px;
  border: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.quit i {
  left: 17px;
  width: 14px;
  margin-left: -7px;
}

.session .ink {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.session .soft {
  color: var(--ink-secondary);
}

.session .heading {
  padding: 10px 20px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.session .phase-name {
  font-size: min(56px, 14vw);
  line-height: 0.9;
  letter-spacing: 0.01em;
}

.session .gauge {
  flex: none;
  height: 20px;
  margin: 14px 20px 0;
  border: 2px solid var(--ink);
}

.session .gauge span {
  display: block;
  height: 100%;
  background: var(--ink);
  transform-origin: left;
}

.session .clock {
  flex: 1;
  min-height: 0;
  container-type: size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* One fixed-width box per character, so 0:09 does not shift when it becomes 0:08. */
.session .digits {
  display: flex;
  justify-content: center;
  font-family: var(--display);
  font-weight: 700;
  line-height: 0.9;
  font-size: min(calc((100vw - 40px) / var(--width)), calc(var(--size) / 844 * 100dvh));
  font-size: min(calc((100vw - 40px) / var(--width)), calc(var(--size) / 844 * 100dvh), calc(100cqh - var(--label)));
}

.session .digits span {
  display: inline-block;
  width: 0.54em;
  text-align: center;
}

.session .digits span.colon {
  width: 0.28em;
}

.session .reps-label {
  font-size: 14px;
  letter-spacing: 0.16em;
}

.session .position {
  flex: none;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.session .position > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.session .position .display {
  font-weight: 700;
  font-size: 40px;
}

.session .frise {
  display: flex;
  margin-top: 6px;
}

.session .frise i {
  flex: 1;
  max-width: 20px;
  min-width: 1px;
  height: 12px;
  border: 1px solid var(--ink);
}

.session .frise i.done {
  background: var(--ink);
}

.session .frise i.current {
  border-width: 3px;
}

.session .next {
  flex: none;
  margin: 18px 20px 0;
  padding: 14px 0 16px;
  border-top: 2px solid var(--ink);
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.commands {
  flex: none;
  padding: 12px 12px calc(var(--safe-bottom) + 12px);
  background: var(--background);
}

.commands .row {
  display: grid;
  grid-template-columns: 84px 1fr 84px;
  gap: 8px;
  height: 104px;
}

.commands .side {
  border: 1px solid var(--control-line);
  background: var(--surface);
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.commands .center {
  min-width: 0;
  padding: 0 14px;
  background: var(--action);
  color: var(--on-action);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.commands .center .display {
  font-size: 27px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* Quit sheet: the clock stops while the question is asked. */

.sheet-backdrop {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: rgba(14, 13, 11, 0.88);
  z-index: 3;
}

.sheet {
  padding: 28px 20px calc(var(--safe-bottom) + 12px);
  background: var(--surface);
  border-top: 1px solid var(--line);
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sheet .mono {
  letter-spacing: 0.16em;
}

.sheet .display {
  font-size: 46px;
  line-height: 0.95;
}

.sheet p {
  font-size: 16px;
  line-height: 1.45;
  color: var(--text-secondary);
}

.sheet .choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.sheet .choices button {
  height: 72px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: 0.04em;
}

.sheet .choices .leave {
  border: 1px solid var(--control-line);
}

.sheet .choices .stay {
  background: var(--action);
  color: var(--on-action);
}

/* End */

.end {
  padding-top: var(--safe-top);
}

.end .band {
  flex: none;
  height: 10px;
  background: var(--phase-recovery);
}

.end .body {
  flex: 1;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 36px;
}

.end .title {
  font-size: 96px;
  line-height: 0.85;
}

.end .times {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.end .times > div {
  padding: 18px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.end .times > div:first-child {
  border-right: 1px solid var(--line);
}

.end .times > div + div {
  padding-left: 20px;
}

.end .times .display {
  font-weight: 700;
  font-size: 64px;
  font-variant-numeric: tabular-nums;
}

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

.end .actions {
  flex: none;
  padding: 0 20px calc(var(--safe-bottom) + 12px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Taps land on the button itself, whatever its icon or label is being redrawn to. */
button > * {
  pointer-events: none;
}

/* Narrow phones: the help button keeps only its mark so the language switch fits. */
@media (max-width: 399px) {
  .help-button .label {
    display: none;
  }
}

/* Wide screens: the setup splits into what you are about to run and how it is set, and the session
   uses the whole window. */
@media (min-width: 900px) {
  .setup {
    max-width: 1180px;
    padding: var(--safe-top) 48px 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      'header header'
      'intro fields'
      'launch fields';
    column-gap: 72px;
  }

  /* One header height on every screen, so switching screens never shifts the title. */
  .brandbar {
    height: 96px;
  }

  .setup > .brandbar {
    grid-area: header;
    padding: 0;
  }

  .setup .intro {
    grid-area: intro;
    padding: 48px 0 0;
    max-width: 24ch;
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(22px, 5.5dvh, 44px);
    line-height: 1.02;
    color: var(--text);
  }

  .setup .field .caption {
    width: auto;
  }

  .setup .fields {
    grid-area: fields;
    align-self: center;
    max-height: 100%;
    padding: 24px 0;
  }

  .setup .launch {
    grid-area: launch;
    padding: 0 0 48px;
    border-top: none;
  }

  .timeline {
    gap: 2px;
    height: 28px;
    margin: 0 0 8px;
  }

  .timeline.dense {
    gap: 0;
  }

  .help .body,
  .help .foot {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
  }

  .help > .brandbar {
    padding: 0 max(20px, calc((100% - 720px) / 2));
  }

  /* The phase colour fills the window; what the eye follows stays in a centred column. */
  .session .content {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
  }

  .session .top,
  .session .heading {
    padding-left: 48px;
    padding-right: 48px;
  }

  .session .gauge,
  .session .next {
    margin-left: 48px;
    margin-right: 48px;
  }

  /* Everything around the clock scales with the window's height, so a short screen still leaves
     the figures most of the room. */
  .session .top {
    margin-top: clamp(8px, 2.5dvh, 32px);
  }

  .session .heading {
    padding-top: clamp(4px, 1.5dvh, 20px);
  }

  .session .clock {
    padding: clamp(8px, 3dvh, 40px) 0;
  }

  .session .position {
    padding-bottom: clamp(4px, 1.5dvh, 16px);
  }

  .session .phase-name {
    font-size: clamp(44px, 10dvh, 120px);
  }

  .session .gauge {
    height: clamp(16px, 2.6dvh, 28px);
    margin-top: clamp(10px, 2.5dvh, 32px);
  }

  .session .digits {
    font-size: min(calc((min(100vw, 1000px) - 96px) / var(--width)), 38dvh);
    font-size: min(calc((min(100vw, 1000px) - 96px) / var(--width)), 38dvh, calc(100cqh - var(--label)));
  }

  .session .position {
    padding: 0 48px;
    grid-template-columns: repeat(2, minmax(0, 360px));
  }

  .session .position .display {
    font-size: clamp(34px, 5.5dvh, 56px);
  }

  .session .next {
    margin-top: clamp(10px, 2.5dvh, 32px);
    padding: clamp(10px, 2dvh, 20px) 0 clamp(10px, 2.5dvh, 32px);
    font-size: 18px;
  }

  .commands .row {
    height: clamp(76px, 11dvh, 104px);
    max-width: 904px;
    margin: 0 auto;
  }

  .sheet {
    align-self: center;
    width: 100%;
    max-width: 560px;
    border: 1px solid var(--line);
  }

  .sheet-backdrop {
    justify-content: center;
    align-items: center;
  }

  .end {
    max-width: 900px;
  }

  .end .title {
    font-size: 160px;
  }

  .end .body,
  .end .actions {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
  }

  .end .actions {
    padding-bottom: 48px;
  }
}

/* Narrow screens: the controls give up some width so every label keeps a line of its own. */
@media (max-width: 400px) {
  .fields,
  .launch {
    padding-left: 16px;
    padding-right: 16px;
  }

  .segmented button {
    width: auto;
    min-width: 80px;
    padding: 0 8px;
    font-size: 11px;
    letter-spacing: 0.02em;
  }

  .stepper button {
    width: 44px;
  }

  .stepper .value {
    width: 64px;
  }

  .stepper .value .display {
    font-size: 27px;
  }
}

/* Phase changes and pauses snap instead of fading for anyone who asked the system for less motion. */
@media (prefers-reduced-motion: reduce) {
  .session,
  .session .content {
    transition: none;
  }
}

/* A phone on its side: the figures take the right half, phase and position the left, and the
   commands shrink to one short row. Placed last so it also wins over the wide-screen rules. */
@media (orientation: landscape) and (max-height: 500px) {
  .session .content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    grid-template-rows: auto auto auto auto minmax(0, 1fr);
    grid-template-areas:
      'top top'
      'gauge gauge'
      'heading clock'
      'position clock'
      'next clock';
    column-gap: 24px;
    max-width: none;
    padding: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));
  }

  .session .top,
  .session .heading,
  .session .position {
    padding-left: 0;
    padding-right: 0;
  }

  .session .top {
    grid-area: top;
    height: 48px;
    margin-top: 4px;
  }

  .session .gauge {
    grid-area: gauge;
    height: 14px;
    margin: 4px 0 0;
  }

  .session .heading {
    grid-area: heading;
    padding-top: 12px;
    gap: 4px;
  }

  .session .phase-name {
    font-size: clamp(28px, 11dvh, 48px);
  }

  .session .clock {
    grid-area: clock;
    padding: 8px 0;
  }

  .session .digits {
    font-size: min(calc(55vw / var(--width)), 60dvh);
    font-size: min(calc(100cqw / var(--width)), calc(100cqh - var(--label)));
  }

  .session .position {
    grid-area: position;
    padding-top: 12px;
    padding-bottom: 0;
    gap: 12px;
  }

  .session .position .display {
    font-size: clamp(22px, 7dvh, 32px);
  }

  .session .next {
    grid-area: next;
    align-self: start;
    margin: 10px 0 0;
    padding: 8px 0;
    font-size: 13px;
  }

  .commands {
    padding: 6px max(12px, env(safe-area-inset-right)) calc(var(--safe-bottom) + 6px) max(12px, env(safe-area-inset-left));
  }

  .commands .row {
    height: 56px;
    max-width: 720px;
    margin: 0 auto;
  }

  .commands .row {
    grid-template-columns: 128px 1fr 128px;
  }

  .commands .side {
    flex-direction: row;
    gap: 10px;
  }

  .commands .side svg {
    width: 20px;
    height: 20px;
  }

  .end .body {
    gap: 16px;
  }

  .end .title {
    font-size: 56px;
  }

  .end .times > div {
    padding: 8px 0;
  }

  .end .times .display {
    font-size: 40px;
  }

  .end .actions {
    flex-direction: row;
  }

  .end .actions .primary,
  .end .actions .secondary {
    height: 56px;
  }
}

/* A wide screen that is short, such as a large phone on its side: the two-column setup keeps its
   header, intro and start button inside the height. */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 900px) {
  .brandbar {
    height: 56px;
  }

  .setup .intro {
    padding-top: 16px;
  }

  .setup .fields {
    padding: 8px 0;
  }

  .setup .launch {
    padding-bottom: calc(var(--safe-bottom) + 12px);
  }

  .setup .timeline {
    height: 12px;
  }

  .setup .primary {
    height: 60px;
  }
}