.uxd-hero{max-width:720px}
.uxd-bmk{display:inline-flex;align-items:center;gap:8px;background:#1FA463;color:#fff !important;font-weight:800;
  text-decoration:none;padding:11px 18px;border-radius:10px;box-shadow:0 4px 14px rgba(31,164,99,.28);cursor:grab}
.uxd-bmk:hover{filter:brightness(1.04)}
.uxd-bmk:active{cursor:grabbing}
.uxd-drag-note{color:#8C95A1;font-size:13px;margin-top:8px}
.uxd-steps{list-style:none;counter-reset:s;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.uxd-steps li{counter-increment:s;position:relative;padding-left:38px;font-size:14px;color:#334155;line-height:1.55}
.uxd-steps li::before{content:counter(s);position:absolute;left:0;top:-1px;width:26px;height:26px;border-radius:50%;
  background:#EEF2F7;color:#0F172A;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
.uxd-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:6px}
.uxd-legend span{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#334155}
.uxd-legend i{width:10px;height:10px;border-radius:50%;display:inline-block}
.uxd-code{display:block;background:#0F172A;color:#E2E8F0;border-radius:10px;padding:12px 14px;font:12px/1.5 ui-monospace,Menlo,monospace;
  white-space:pre-wrap;word-break:break-all;user-select:all}
.uxd-card{max-width:760px}