.xm-steps{list-style:none;counter-reset:xm-step;margin:1.5rem 0;padding:0;display:grid;gap:0}.xm-step{counter-increment:xm-step;position:relative;min-width:0;padding:0 0 1.5rem 3.25rem;margin:0}.xm-step:before{content:counter(xm-step);position:absolute;left:0;top:0;width:2.25rem;height:2.25rem;border-radius:9999px;background:var(--accent-ink);color:#fff;font-weight:700;font-size:.95rem;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 4px var(--accent-soft);transition:background-color .35s ease,color .35s ease,box-shadow .35s ease}.xm-step:after{content:"";position:absolute;left:calc(1.125rem - 1px);top:2.5rem;bottom:.25rem;width:2px;background:var(--rule)}.xm-steps.is-js .xm-step:not(.is-seen):before{background:var(--surface);color:var(--accent-ink);box-shadow:inset 0 0 0 2px var(--accent),0 0 0 4px transparent}.xm-steps.is-js .xm-step.is-seen:after{background:linear-gradient(var(--accent),var(--rule))}.xm-step:last-child:after{display:none}.xm-step:last-child{padding-bottom:.25rem}.xm-step-title{margin:0 0 .35rem;padding-top:.3rem;font-size:1.05em;font-weight:700;line-height:1.5}.xm-step-body{min-width:0}.xm-step-body>:first-child{margin-top:0}.xm-step-body>*+*{margin-top:.75em}.xm-step-body p{margin:0}.xm-step-body>p+p{margin-top:.75em}.xm-step-shot{margin:.9rem 0 0;max-width:16rem}.xm-step-shot img{display:block;width:100%;height:auto;max-height:none;border-radius:.8rem;border:1px solid var(--rule)}@media(prefers-reduced-motion:reduce){.xm-step:before{transition:none}}.xm-walk{margin:1.5rem 0;display:grid;gap:1rem;grid-template-columns:minmax(0,1fr)}.xm-walk-stage{display:none}.xm-walk .xm-step-shot{position:relative;max-width:20rem}.xm-walk-steps{margin:0}.xm-walk-device{position:relative;margin:0 auto;background:var(--surface);border:1px solid var(--rule);border-radius:1.6rem;padding:.45rem;box-shadow:0 10px 30px -18px #00000059}.xm-walk-phone .xm-walk-device{width:11.5rem;background:#15171a;border-color:#2a2d31}.xm-walk-phone .xm-walk-screen{aspect-ratio:1206 / 2622;border-radius:1.2rem}.xm-walk-plain .xm-walk-device{width:min(100%,36rem);border-radius:.9rem;padding:.3rem}.xm-walk-plain .xm-walk-screen{aspect-ratio:16 / 10;border-radius:.6rem}.xm-walk-screen{position:relative;overflow:hidden;background:#0c0d0f}.xm-walk-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem;margin:.55rem auto 0}.xm-walk-nav[hidden]{display:none}.xm-walk-num{width:2.75rem;height:2.75rem;border-radius:9999px;border:2px solid var(--accent);background:var(--surface);color:var(--accent-ink);font-family:inherit;font-size:.85rem;font-weight:700;line-height:1;cursor:pointer;padding:0;transition:background-color .2s ease,color .2s ease}.xm-walk-num[aria-current=true]{background:var(--accent-ink);color:#fff}.xm-walk-num:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.xm-walk-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .4s ease,object-position .45s ease}.xm-walk-screen img.is-active{opacity:1}.xm-walk-plain .xm-walk-screen img{object-fit:contain;background:var(--surface)}.xm-walk-hot{position:absolute;left:calc(.45rem + (100% - .9rem) * var(--hx, .5));top:calc(.45rem + (100% - .9rem) * var(--hy, .5));width:2.4rem;height:2.4rem;margin:-1.2rem 0 0 -1.2rem;border-radius:9999px;border:3px solid var(--accent);box-shadow:0 0 0 4px #ffffffa6;pointer-events:none;animation:xm-walk-pulse 1.6s ease-out infinite}.xm-walk-plain .xm-walk-hot{left:calc(.3rem + (100% - .6rem) * var(--hx, .5));top:calc(.3rem + (100% - .6rem) * var(--hy, .5))}.xm-walk-hot[hidden]{display:none}.xm-walk-hot-inline{left:calc(100% * var(--hx, .5));top:calc(100% * var(--hy, .5))}@keyframes xm-walk-pulse{0%{transform:scale(.8);opacity:1}to{transform:scale(1.35);opacity:.25}}@media(min-width:40rem){.xm-walk{grid-template-columns:minmax(0,1fr) auto;gap:1.75rem}.xm-walk-stage{order:2}.xm-walk.is-js .xm-walk-stage{display:block;position:sticky;top:calc(var(--header-h) + 1rem);z-index:2;align-self:start}.xm-walk.is-js .xm-step-shot{display:none}.xm-walk.is-js .xm-step-title{cursor:pointer}.xm-walk.is-js .xm-step{transition:opacity .3s ease}.xm-walk.is-js .xm-step:not(.is-active){opacity:.72}.xm-walk-phone .xm-walk-device{width:14rem}.xm-walk-plain .xm-walk-device{width:20rem}.xm-walk-steps{order:1}}@media(prefers-reduced-motion:reduce){.xm-walk-screen img,.xm-walk.is-js .xm-step{transition:none}.xm-walk-hot{animation:none}}.xm-note{margin:1.5rem 0;padding:.9rem 1rem 1rem;border-radius:.8rem;border:1px solid var(--note-rule);background:var(--note-bg)}.xm-note-tip{--note-rule: color-mix(in srgb, var(--accent) 35%, white);--note-bg: var(--accent-soft);--note-fg: var(--accent-ink)}.xm-note-caution{--note-rule: #f3c58d;--note-bg: #fff6e8;--note-fg: #b45309}.xm-note-label{margin:0 0 .35rem;display:flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:700;color:var(--note-fg)}.xm-note-icon{display:inline-flex;align-items:center;justify-content:center;width:1.35rem;height:1.35rem;border-radius:9999px;background:var(--note-fg);color:#fff;font-size:.75rem;font-weight:700}.xm-note-body{font-size:.95rem}.xm-note-body p{margin:0}.xm-note-body>*+*{margin-top:.6em}.xm-hero3d{position:relative;display:block;width:100%;overflow:hidden;border-radius:1.25rem;isolation:isolate}.xm-hero3d-full{aspect-ratio:16 / 9;max-height:420px;min-height:220px}.xm-hero3d-compact{aspect-ratio:16 / 9;max-height:300px;min-height:180px}.xm-hero3d-bg{position:absolute;inset:0;background:radial-gradient(120% 90% at 10% 0%,color-mix(in srgb,var(--accent) 55%,white) 0%,transparent 60%),radial-gradient(90% 90% at 100% 100%,color-mix(in srgb,var(--accent) 35%,white) 0%,transparent 55%),linear-gradient(135deg,color-mix(in srgb,var(--accent) 18%,white),color-mix(in srgb,var(--accent) 70%,#1f2328))}.xm-hero3d[data-state=fallback] .xm-hero3d-bg:after{content:"";position:absolute;inset:0;background-image:linear-gradient(transparent 0,transparent 100%),repeating-linear-gradient(-18deg,rgba(255,255,255,.12) 0 14px,transparent 14px 56px);mask-image:radial-gradient(70% 70% at 60% 40%,#000 30%,transparent 100%)}.xm-hero3d-canvas{position:absolute;inset:0}.xm-hero3d-canvas canvas{display:block;width:100%;height:100%}.xm-hero3d[data-state=ready] .xm-hero3d-canvas{animation:xm-hero3d-in .6s ease-out both}@keyframes xm-hero3d-in{0%{opacity:0}to{opacity:1}}
