/* How it works: a stage that plays on its own while on screen. The stage is drawn in a
   fixed coordinate space (wide 1000x560, tall 560x700) and scaled to fit its box. */
.how { padding-block: 0 64px; }
.how-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 24px; }
.how-grid .how-stage { order: -1; border-radius: 12px; }
@media (min-width: 640px) {
  .how { padding-block: 0 88px; }
  .how-grid { gap: 24px; margin-top: 32px; }
  .how-grid .how-stage { border-radius: 16px; }
}
@media (min-width: 1024px) {
  .how { padding-block: 0 112px; }
  .how-grid { grid-template-columns: 300px 1fr; gap: 48px; align-items: center; margin-top: 40px; }
  .how-grid .how-stage { order: 0; }
}

.how-steps li { position: relative; padding: 0 0 26px; opacity: 0.45; transition: opacity 240ms ease; }
.how-steps li:hover { opacity: 0.8; }
.how-steps li:last-child { padding-bottom: 0; }
.how-steps li::before { display: none; content: ""; position: absolute; left: -26px; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line-strong); box-sizing: border-box; transition: background-color 200ms ease, border-color 200ms ease, transform 200ms var(--ease-out); }
.how-steps li.on, .how-steps li.on:hover { opacity: 1; }
.how-steps li.on::before { background: var(--orange); border-color: var(--orange); transform: scale(1.25); }
.how-steps .step { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; border-radius: 6px; touch-action: manipulation; }
.how-steps h3 { margin: 0; }
.how-steps li p { cursor: pointer; }
.how-steps .step:focus-visible { outline: 2px solid var(--orange); outline-offset: 6px; }
.how-steps .n { display: block; margin-bottom: 4px; font-family: var(--font-ui); font-size: 13px; color: var(--indigo); margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.how-steps h3 { margin-bottom: 6px; font-size: 21px; }
.how-steps p { color: var(--muted); font-size: 16px; }

.how-stage { position: relative; width: 100%; aspect-ratio: 1000 / 560; overflow: hidden; border-radius: 16px; background: var(--dark); border: 1px solid var(--line-on-dark); }
.how-stage.tall { aspect-ratio: 560 / 700; }
.stage { position: absolute; left: 0; top: 0; width: 1000px; height: 560px; transform-origin: 0 0; transform: scale(var(--s, 1)); font-family: var(--font-ui); color: var(--on-dark); transition: opacity 240ms ease; }
.stage.reset { opacity: 0; }
.how-stage.tall .stage { width: 560px; height: 700px; }
.stage * { position: absolute; }
.st-glow { inset: 0; background: radial-gradient(50% 60% at 20% 50%, rgba(224,104,58,0.14), transparent 70%), radial-gradient(40% 60% at 80% 50%, rgba(129,140,248,0.12), transparent 70%); }

.st-mic { width: 88px; height: 88px; border-radius: 50%; background: var(--orange); display: grid; place-items: center; box-shadow: 0 10px 30px rgba(224,104,58,0.35); }
.st-mic svg { position: static; width: 34px; height: 34px; }
.st-ring { width: 88px; height: 88px; border-radius: 50%; border: 2px solid var(--orange); opacity: 0; }
.st-hint { font-size: 14px; color: var(--on-dark-muted); white-space: nowrap; }

.st-bar { width: 5px; border-radius: 2px; background: var(--orange); transform-origin: 50% 50%; }

.st-cap { display: flex; gap: 10px; align-items: baseline; white-space: nowrap; font-size: 17px; }
.st-cap .live { position: static; opacity: 0; color: var(--indigo-soft); font-size: 13px; border: 1px solid rgba(129,140,248,0.5); border-radius: 4px; padding: 1px 6px; }
.st-cap .w { position: static; display: inline-block; margin-right: 0.3em; color: var(--on-dark); }

.st-card { width: 360px; background: #FFFFFF; color: var(--ink); border-radius: 12px; box-shadow: 0 30px 80px rgba(0,0,0,0.45); transform-origin: 50% 50%; }
.st-card .ch { position: static; display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.st-card .ch b, .st-card .ch span { position: static; }
.st-card .ch b { color: var(--ink); font-weight: 600; }
.st-card .cb { position: static; padding: 14px 18px 18px; font-size: 14px; line-height: 1.5; }
.st-card .lab { position: static; display: block; color: var(--indigo); font-size: 12px; font-weight: 600; margin: 10px 0 3px; }
.st-card .lab:first-child { margin-top: 0; }
.st-card .ln { position: static; display: block; clip-path: inset(0 100% 0 0); }
.st-card .hl { position: static; display: inline-grid; background: var(--orange-soft); border-bottom: 1.5px solid var(--orange); padding: 0 3px; border-radius: 2px; }
.st-card .hl .v1, .st-card .hl .v2 { position: static; grid-area: 1 / 1; }
.st-cap .say { color: var(--orange); border-color: rgba(224,104,58,0.5); }
.st-card .cf { position: static; display: flex; gap: 8px; padding: 10px 18px 14px; border-top: 1px solid var(--line); }
.st-card .chip { position: static; font-size: 12px; padding: 5px 9px; border-radius: 6px; border: 1px solid var(--line-strong); color: var(--ink); white-space: nowrap; }
.st-card .chip.on { background: var(--orange); border-color: var(--orange); color: #14163F; font-weight: 600; }

.st-ghost { height: 300px; border: 1px dashed rgba(129,140,248,0.5); border-radius: 12px; padding: 16px 18px; opacity: 0; }
.st-ghost .gt { position: static; display: block; font-size: 13px; color: var(--indigo-soft); margin-bottom: 14px; }
.st-ghost i { position: static; display: block; font-style: normal; font-size: 13px; color: rgba(233,235,255,0.45); padding: 10px 0; border-top: 1px solid rgba(233,235,255,0.1); }
.st-rec { border: 1px solid rgba(233,235,255,0.28); border-radius: 12px; background: rgba(20,23,63,0.85); opacity: 0; }
.st-rec .bar { left: 0; top: 0; right: 0; height: 38px; border-bottom: 1px solid rgba(233,235,255,0.14); display: flex; align-items: center; gap: 6px; padding: 0 14px; font-size: 13px; color: var(--on-dark-muted); }
.st-rec .bar i { position: static; width: 9px; height: 9px; border-radius: 50%; background: rgba(233,235,255,0.25); }
.st-rec .bar span { position: static; margin-left: 8px; }
.st-rec .field { left: 20px; right: 20px; top: 58px; bottom: 20px; border: 1px dashed rgba(129,140,248,0.5); border-radius: 8px; }
.st-rec .fl { left: 34px; top: 66px; font-size: 12px; color: var(--indigo-soft); }
.st-check { width: 56px; height: 56px; border-radius: 50%; background: var(--orange); display: grid; place-items: center; opacity: 0; box-shadow: 0 10px 30px rgba(224,104,58,0.35); }
.st-check svg { position: static; width: 28px; height: 28px; }
.st-filed { font-size: 15px; color: var(--on-dark); white-space: nowrap; opacity: 0; }
.st-filed small { position: static; display: block; color: var(--on-dark-muted); font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  .how-steps li, .how-steps li::before { transition: none; }
}

/* Steps: only the active one on phones, a strip on tablets, the rail on desktop */
.how-steps { padding-left: 0; }
.how-steps li { display: none; }
.how-steps li.on { display: block; }
.how-steps::before, .how-steps::after { display: none; }
@media (min-width: 640px) {
  .how-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
  .how-steps li { display: block; padding: 12px 0 0 !important; border-top: 2px solid var(--line); }
  .how-steps li.on { border-top-color: var(--orange); }
  .how-steps h3 { font-size: 18px !important; }
  .how-steps p { font-size: 14px !important; }
}
@media (min-width: 1024px) {
  .how-steps { display: block; padding-left: 28px; }
  .how-steps li::before { display: block; }
  .how-steps li { padding: 0 0 26px !important; border-top: 0; }
  .how-steps::before, .how-steps::after { display: block; }
  .how-steps h3 { font-size: 21px !important; }
  .how-steps p { font-size: 16px !important; }
}
.how-steps::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--line); border-radius: 1px; }
.how-steps::after { content: ""; position: absolute; left: 6px; top: 8px; width: 2px; height: calc((100% - 16px) * var(--p, 0)); background: var(--orange); border-radius: 1px; transition: height 120ms linear; }

/* Pause and play, bottom right of the stage */
.how-pause { position: absolute; right: 12px; bottom: 12px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(233,235,255,0.3); background: rgba(11,13,38,0.7); color: var(--on-dark); cursor: pointer; display: grid; place-items: center; padding: 0; touch-action: manipulation; }
.how-pause:hover { border-color: var(--on-dark); }
.how-pause:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.how-pause span { grid-area: 1 / 1; display: block; }
.how-pause .ic-pause { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.how-pause .ic-play { width: 0; height: 0; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; display: none; }
.how-pause[aria-pressed="true"] .ic-pause { display: none; }
.how-pause[aria-pressed="true"] .ic-play { display: block; }