.onboarding-layer { position:absolute; inset:0; z-index:22; pointer-events:none; color:#315a46; font-family:"PingFang SC","Microsoft YaHei",sans-serif; }
.onboarding-layer[hidden], .onboarding-hand[hidden] { display:none; }
.onboarding-card { position:absolute; width:22cqw; padding:clamp(8px,1.15cqw,16px); border:2px solid #fff9dc; border-radius:clamp(14px,1.7cqw,24px); background:linear-gradient(140deg,#fffdf1,#fff0c6); box-shadow:0 4px 0 #d3b273,0 8px 24px #274c3c45; }
.onboarding-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px; color:#8a6838; font-size:clamp(11px,1.05cqw,14px); font-weight:700; }
.onboarding-skip { pointer-events:auto; font:inherit; color:#546753; background:#f6e7c4; border:1px solid #d8c798; border-radius:16px; padding:4px 10px; min-height:28px; cursor:pointer; }
.onboarding-copy { margin:6px 0 1px; font-size:clamp(13px,1.42cqw,19px); font-weight:750; line-height:1.6; }
.onboarding-rings i { position:absolute; border:3px solid #fff5a0; outline:2px solid #ca9635; border-radius:14px; box-shadow:0 0 0 5px #ffdc6336,0 0 22px #ffe16a9e; animation:guide-glow 1.6s ease-in-out infinite; }
.onboarding-hand { position:absolute; width:clamp(27px,3.3cqw,46px); filter:drop-shadow(0 3px 2px #755a4970); transform-origin:20% 15%; animation:guide-tap 1.6s ease-in-out infinite; }
.onboarding-hand svg { display:block; width:100%; height:auto; }
.onboarding-replay { display:grid; place-items:center; flex:none; width:clamp(28px,3.7cqw,50px); height:clamp(28px,3.7cqw,50px); border:2px solid #f6e7ba; border-radius:50%; background:#fff6ddd9; color:#49634c; font-size:clamp(16px,2cqw,26px); font-weight:900; font-family:inherit; cursor:pointer; }
.onboarding-replay:disabled { opacity:.5; cursor:default; }
.onboarding-skip:focus-visible,.onboarding-replay:focus-visible { outline:3px solid #2465a3; outline-offset:3px; }
@keyframes guide-glow { 50% { box-shadow:0 0 0 7px #ffdc6366,0 0 24px #ffe16a; } }
@keyframes guide-tap { 0%,100% { transform:translate(4px,5px) rotate(-8deg); } 45%,60% { transform:translate(0,0) rotate(-3deg) scale(.93); } }
@media(prefers-reduced-motion:reduce) { .onboarding-layer * { animation:none!important; } }