body.demo {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  background: var(--color-paper-2);
}

.demo__head {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--gutter);
  background: var(--color-paper);
  border-bottom: var(--rule-hair);
}

.demo__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: var(--space-3xs);
  font-size: var(--text-sm);
}

.demo__steps li {
  counter-increment: step;
  display: flex;
  gap: var(--space-2xs);
}

.demo__steps li::before {
  content: counter(step);
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent-ink);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
}

.demo__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

@media (min-width: 64rem) {
  .demo__head {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-lg);
  }
  .demo__steps {
    grid-auto-flow: column;
    justify-content: center;
    gap: var(--space-lg);
  }
}

.demo__tabs {
  display: flex;
  gap: var(--space-3xs);
  margin: var(--space-sm) var(--gutter) 0;
  padding: var(--space-3xs);
  border-radius: var(--radius-pill);
  background: var(--color-paper-3);
}

.demo__tabs button {
  flex: 1;
  min-height: 44px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out);
}

.demo__tabs button[aria-selected='true'] {
  background: var(--color-paper);
  box-shadow: var(--shadow-soft);
}

.demo__stage {
  display: grid;
  padding: var(--space-sm) var(--gutter) var(--space-md);
  min-height: 0;
}

.device {
  margin: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: var(--space-2xs);
  min-height: 0;
  animation: device-in var(--dur-long) var(--ease-out) both;
}

.device iframe {
  width: 100%;
  height: 100%;
  min-height: calc(100dvh - 15rem);
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-paper);
  box-shadow:
    inset 0 0 0 1px var(--color-rule),
    var(--shadow-soft);
}

.device--tablet iframe {
  background: var(--color-ink);
}

.device figcaption {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

@keyframes device-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

.demo__stage[data-show='staff'] .device--phone,
.demo__stage[data-show='phone'] .device--tablet {
  display: none;
}

@media (min-width: 64rem) {
  .demo__tabs {
    display: none;
  }
  .demo__stage {
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: var(--space-xl);
    align-items: center;
    padding-block: var(--space-lg);
  }
  .demo__stage[data-show] .device {
    display: grid;
  }
  .device--phone {
    animation-delay: 120ms;
  }
  .device--tablet iframe {
    height: min(720px, calc(100dvh - 12rem));
    min-height: 560px;
  }
  .device--phone iframe {
    width: 390px;
    height: min(780px, calc(100dvh - 12rem));
    min-height: 600px;
  }
}

.demo__error {
  margin: 0 var(--gutter) var(--space-md);
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  background: var(--color-danger-soft);
  color: var(--color-danger);
  font-weight: 600;
}

.modal__qr {
  width: min(100%, 240px);
  margin-inline: auto;
}

.modal__qr svg {
  width: 100%;
  height: auto;
}