/* Steps you scroll through, one at a time (owner, 2026-11-08; shared 2026-11-12). Behaviour: js/scroll-steps.js.
   Used by /setup/ and the Claude steps on /mcp/connect/. Each step is a card with "01", a short heading and a line of
   words, and its picture on the right. A plain list on phones, short screens and with reduced motion. */
.stp-steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 20px; }
.stp-step { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: center; background: #FDFCFA; border: 1px solid #DAD2CE; border-radius: 20px; padding: 20px; }
.stp-num { display: block; margin: 0 0 6px; font-family: 'Lexend', sans-serif; font-size: 0.875rem; letter-spacing: .12em; color: #4A4458; }
.stp-text :is(h3, h4) { margin: 0 0 8px; font-size: 1.25rem; line-height: 1.3; color: #1E085D; }
.stp-text p { margin: 0; }
.stp-pic .cn-pic { max-width: 30rem; margin: 0 auto; }
.stp-pic > :not(.cn-pic) { max-width: 30rem; margin-left: auto; margin-right: auto; }
.stp-step[hidden] { display: none !important; }
.stp-dots, .stp-next { display: none; }
@keyframes stp-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes stp-bounce { 0%, 100% { transform: none; } 50% { transform: translateY(7px); } }
@media (min-width: 56.01em) and (min-height: 40em) and (prefers-reduced-motion: no-preference) {
  .stp.is-on .stp-track { height: calc(var(--ss-h, 80vh) + var(--ss-n, 5) * 55vh); }
  .stp.is-on .stp-stage { position: sticky; top: var(--guide-crumb-offset, 7.5rem); height: var(--ss-h, 80vh); display: flex; flex-direction: column; justify-content: safe center; box-sizing: border-box; padding: 8px 0 12px; }
  .stp.is-on .stp-steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .stp.is-on .stp-step { grid-area: 1 / 1; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 32px; padding: 28px; opacity: 0; transition: opacity .4s ease; pointer-events: none; }
  .stp.is-on .stp-step.is-current { opacity: 1; pointer-events: auto; }
  .stp.is-on .stp-step.is-current .stp-text > * { animation: stp-rise .8s cubic-bezier(.2, .7, .2, 1) .15s both; }
  .stp.is-on .stp-step.is-current .stp-text > :nth-child(n+3) { animation-delay: .3s; }
  .stp.is-on .stp-step.is-current .stp-pic { animation: stp-rise .8s cubic-bezier(.2, .7, .2, 1) .45s both; }
  .stp.is-on .stp-dots { display: flex; justify-content: center; gap: 2px; margin: 14px 0 0; }
  .stp-dot { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 999px; }
  .stp-dot::before { content: ""; width: 10px; height: 10px; border-radius: 999px; border: 2px solid #1E085D; box-sizing: border-box; transition: width .25s ease, background-color .25s ease; }
  .stp-dot[aria-current]::before { width: 22px; background: #1E085D; }
  .stp-dot:hover::before { background: #4705D0; border-color: #4705D0; }
  .stp-dot:focus-visible { outline: 3px solid #4705D0; outline-offset: 1px; }
  .stp.is-on .stp-next { display: grid; place-items: center; flex-shrink: 0; width: 52px; height: 52px; margin: 14px auto 0; padding: 0; border: 0; border-radius: 50%; background: #FDFCFA; color: #1E085D; box-shadow: 0 10px 24px -12px rgba(30, 8, 93, .55); cursor: pointer; animation: stp-bounce 1.6s ease-in-out infinite; }
  .stp.is-on .stp-next svg { width: 24px; height: 24px; }
  .stp.is-on .stp-next:focus-visible { outline: 3px solid #4705D0; outline-offset: 3px; }
  .stp.is-on.is-last .stp-next { visibility: hidden; animation: none; }
}
/* Inside a side panel (.ucp) the steps stick under the panel's 64px top bar */
@media (min-width: 56.01em) and (min-height: 40em) and (prefers-reduced-motion: no-preference) { .ucp .stp.is-on .stp-stage { top: 64px; } }