.demo_tabs[data-v-5686435d]{display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:center;margin-bottom:32px}.demo_tab[data-v-5686435d]{border-bottom:2px solid transparent;color:#868587;font-size:16px;font-weight:700;padding:8px 4px}.demo_tab--on[data-v-5686435d]{border-bottom-color:var(--site-primary);color:var(--site-primary)}.demo_frame[data-v-5686435d]{--demo-h:560px;background:#fff;border:1px solid var(--site-border);border-radius:8px;margin:0 auto;max-width:1080px;overflow:hidden}.demo_frame--wide[data-v-5686435d]{--demo-h: calc(100dvh - 232px) ;border-left:0;border-radius:0;border-right:0;max-width:none;min-height:0}.demo_frame--wide .demo_body[data-v-5686435d]{min-height:420px}.demo_head[data-v-5686435d]{align-items:flex-start;border-bottom:1px solid var(--site-border);display:flex;flex-wrap:wrap;gap:16px;padding:20px 24px}.demo_head_title[data-v-5686435d]{color:var(--site-ink-strong);font-size:18px;font-weight:700;line-height:1.5;margin:0}.demo_head_note[data-v-5686435d]{color:var(--site-ink);font-size:14px;font-weight:300;margin-top:4px}.demo_badge[data-v-5686435d]{background:var(--site-chip);border-radius:4px;color:#868587;font-size:12px;margin-left:auto;padding:5px 14px;white-space:nowrap}.demo_body[data-v-5686435d]{background:linear-gradient(to right,#fafafa 0 299px,var(--site-border) 299px 300px,#fff 300px);display:grid;grid-template-columns:300px minmax(0,1fr);height:var(--demo-h);overflow-y:auto}.demo_steps[data-v-5686435d]{align-self:start;flex-direction:column;gap:4px;max-height:var(--demo-h);overflow-y:auto;position:sticky;top:0}.demo_step[data-v-5686435d],.demo_steps[data-v-5686435d]{display:flex;padding:12px}.demo_step[data-v-5686435d]{align-items:center;border-radius:5px;color:var(--site-ink-strong);font-size:14px;gap:10px;text-align:left}.demo_step--on[data-v-5686435d]{background:#fff;box-shadow:0 1px 4px #00000014;font-weight:700}.demo_step_no[data-v-5686435d]{align-items:center;background:var(--site-chip);border-radius:50%;color:#55596b;display:inline-flex;flex-shrink:0;font-size:12px;font-weight:700;height:22px;justify-content:center;width:22px}.demo_step--on .demo_step_no[data-v-5686435d]{background:var(--site-primary);color:#fff}.demo_step_name[data-v-5686435d]{min-width:0;overflow:hidden;text-overflow:ellipsis}.demo_step_kind[data-v-5686435d]{border-radius:3px;flex-shrink:0;font-size:11px;font-weight:700;margin-left:auto;padding:2px 8px;white-space:nowrap}.demo_step_kind--guest[data-v-5686435d]{background:#fff3e0;color:#e8730c}.demo_step_kind--internal[data-v-5686435d]{background:var(--site-chip);color:#55596b}.demo_main[data-v-5686435d]{min-width:0;padding:24px}.demo_main_title[data-v-5686435d]{border-bottom:1px solid var(--site-border);color:var(--site-ink-strong);font-size:18px;font-weight:700;margin-bottom:24px;padding-bottom:12px}.demo_foot[data-v-5686435d]{align-items:center;border-top:1px solid var(--site-border);display:flex;flex-wrap:wrap;gap:16px;margin-top:32px;padding-top:24px}.demo_foot_note[data-v-5686435d]{color:var(--site-ink);font-size:13px}@media (max-width:959px){.demo_frame[data-v-5686435d]{--demo-h:480px}.demo_frame--wide[data-v-5686435d]{--demo-h: calc(100dvh - 188px) }.demo_body[data-v-5686435d]{background:#fff;grid-template-columns:minmax(0,1fr)}.demo_steps[data-v-5686435d]{background:#fafafa;border-bottom:1px solid var(--site-border);flex-direction:row;max-height:none;overflow-x:auto;overflow-y:visible;z-index:1}.demo_step[data-v-5686435d]{flex:0 0 auto}.demo_main[data-v-5686435d]{padding:20px}.demo_tabs[data-v-5686435d]{gap:4px 16px}.demo_tab[data-v-5686435d]{font-size:14px}}