@import "https://assets.elements.dev/assets/app/shared/ui-catalog/catalog/style.c38e1d7304920e3.css";

/* The Autofocus demo focuses its input as the page loads. Below the fold (a
   phone) the browser brings it into view, and the page's smooth scrolling
   turned that into a glide down the page after it had painted. While the
   autofocused input holds focus, the page jumps instead, before it paints. */
html:has([autofocus]:focus) {
  scroll-behavior: auto;
}

.input-otp-demo-stack {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            var(--space-3);
  max-width:      100%;
}

.input-otp-demo-row {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         var(--space-3);
}

.input-otp-demo-dot {
  width:         var(--space-2);
  height:        var(--space-2);
  border-radius: var(--radius-pill);
  background:    var(--ink-dim);
}

.input-otp-demo-card {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
  width:          100%;
  max-width:      24rem;
  padding:        var(--surface-padding);
  border:         var(--surface-border-width) solid var(--surface-border);
  border-radius:  var(--radius-surface);
  background:     var(--surface-bg);
  box-shadow:     var(--surface-shadow);
}

.input-otp-demo-card h3 {
  margin:      0;
  font-family: var(--font-heading);
  font-size:   var(--text-title);
  font-weight: var(--weight-strong);
}

.input-otp-demo-card p {
  margin:    0;
  color:     var(--ink-soft);
  font-size: var(--text-caption);
}