.xy-guide-layer[hidden] { display: none; }
.xy-guide-layer { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; }
.xy-guide-shade { position: fixed; background: rgba(8, 28, 42, .72); pointer-events: auto; }
.xy-guide-ring { position: fixed; border: 3px solid #f5d782; border-radius: 14px; box-shadow: 0 0 0 5px rgba(245, 215, 130, .27), 0 0 32px 8px rgba(245, 215, 130, .3); pointer-events: auto; transition: left .2s ease, top .2s ease, width .2s ease, height .2s ease; }
.xy-guide-ring[hidden] { display: none; }
.xy-guide-card { position: fixed; width: min(440px, calc(100vw - 28px)); min-height: 224px; padding: 24px 23px 20px 137px; border-radius: 22px; border: 1px solid #c4e3e9; background: #fff; color: #183d4d; box-shadow: 0 18px 58px rgba(5, 31, 47, .42); pointer-events: auto; }
.xy-guide-figure { position: absolute; left: -42px; bottom: 13px; width: 172px; height: 172px; object-fit: contain; clip-path: inset(1px); filter: drop-shadow(0 9px 11px rgba(4, 53, 72, .26)); }
#onboarding-replay-btn:focus-visible { outline: 3px solid #f1c55e; outline-offset: 3px; }
.xy-guide-eyebrow { color: #14859a; font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.xy-guide-card h2 { margin: 8px 0 9px; color: #123b4d; font-size: 21px; line-height: 1.35; font-weight: 800; }
.xy-guide-card p { margin: 0 0 17px; color: #4f6a76; font-size: 14px; line-height: 1.7; }
.xy-guide-card .xy-guide-error { margin: -8px 0 10px; color: #b42332; font-size: 12px; }
.xy-guide-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.xy-guide-actions button { appearance: none; border: 0; border-radius: 10px; padding: 9px 14px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.xy-guide-actions button:focus-visible { outline: 3px solid #f1c55e; outline-offset: 3px; }
.xy-guide-actions button:disabled { opacity: .58; cursor: wait; }
.xy-guide-next { color: #fff; background: #087c91; }
.xy-guide-next:hover { background: #076679; }
.xy-guide-back { color: #41636f; background: #eef5f6; }
.xy-guide-back:hover { background: #dfecef; }
.xy-guide-back[hidden] { display: none; }
.xy-guide-skip { color: #41636f; background: #eef5f6; }
.xy-guide-skip:hover { background: #dfecef; }
.xy-guide-count { margin-left: auto; color: #8299a2; font-size: 11px; white-space: nowrap; }
@media (max-width: 640px) {
  .xy-guide-card { padding: 20px 16px 18px 116px; min-height: 194px; }
  .xy-guide-figure { left: -23px; bottom: 13px; width: 135px; height: 135px; }
  .xy-guide-card h2 { font-size: 18px; }
  .xy-guide-card p { font-size: 12px; }
  .xy-guide-actions { gap: 6px; }
  .xy-guide-actions button { padding: 8px 10px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .xy-guide-ring { transition: none; } }