.onboarding-scrim{padding:20px;display:flex;align-items:center;justify-content:center;overscroll-behavior:contain}
.sheet.onboarding-sheet{width:min(100%,460px);max-height:calc(100dvh - 40px);border-radius:28px;padding:0;display:flex;flex-direction:column;overflow:hidden;background:#fffefb;box-shadow:0 20px 70px #173e2c26}
.onboarding-sheet .sheet-head{padding:14px 20px 0;margin:0;flex-shrink:0}
.onboarding-sheet .sheet-head h2{font-size:13px;letter-spacing:.06em;color:#65756c;font-weight:500}
.onboarding-sheet .sheet-head button{width:44px;height:44px}
.onboarding-progress{display:flex;justify-content:space-between;padding:4px 24px 10px;color:#57685e;font-size:12px;flex-shrink:0}
.onboarding-track{display:flex;gap:5px;padding:0 24px;flex-shrink:0}
.onboarding-track span{height:4px;flex:1;border-radius:3px;background:#e6ede6}
.onboarding-track .active{background:#317657}
.onboarding-body{padding:16px 24px 10px;overflow-y:auto;min-height:0;overscroll-behavior:contain}
.onboarding-art{height:180px;margin:0 auto 12px;position:relative;display:grid;place-items:center;border-radius:24px;background:radial-gradient(ellipse,#fff0ce 0%,#fff8e9 55%,#fffefb 75%)}
.onboarding-teacher{width:200px;height:180px;object-fit:contain;z-index:1;position:relative}
.onboarding-art-fallback{position:absolute;font-size:72px;line-height:1}
.onboarding-art:has(.onboarding-teacher:not([hidden])) .onboarding-art-fallback{visibility:hidden}
.onboarding-heading{font-size:23px;line-height:1.4;letter-spacing:-.02em;margin:0 0 8px;color:#234534;outline-offset:5px}
.onboarding-subtitle{font-size:14px;line-height:1.7;color:#67736b;margin:0 0 18px}
.onboarding-welcome{text-align:center;font-size:16px;line-height:1.9;color:#394a40;margin:20px 0 12px}
.onboarding-note{text-align:center;color:#68756d;font-size:12px;margin:0 0 4px}
.onboarding-body[data-onboarding-step="0"] .onboarding-heading,.onboarding-body[data-onboarding-step="0"] .onboarding-subtitle{text-align:center}
.onboarding-mascot{height:70px;margin-bottom:12px;display:flex;align-items:center}
.onboarding-mascot .shiwu-emoji{height:64px;width:78px;vertical-align:middle}
.onboarding-mascot .shiwu-emoji__image{height:64px;width:auto;max-width:86px;object-fit:contain}
.onboarding-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.onboarding-chips span{padding:8px 16px;border-radius:12px;background:#eef4ec;color:#2c6044;font-size:14px}
.onboarding-tips{list-style:none;padding:0;margin:0;display:grid;gap:18px}
.onboarding-tips li{display:grid;gap:5px;padding-left:16px;position:relative}
.onboarding-tips li:before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:#8aac80}
.onboarding-tips strong{font-size:14px;font-weight:600;line-height:1.6;color:#33483a}
.onboarding-tips li>span{font-size:13px;line-height:1.7;color:#657267}
.onboarding-example{display:flex;align-items:center;gap:12px;border-radius:16px;background:#f0f5ec;padding:12px 16px;margin-bottom:20px;color:#426049;font-size:13px}
.onboarding-plus{background:#367657;color:white;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:27px}
.onboarding-chat-example{width:fit-content;border-radius:16px 16px 16px 4px}
.onboarding-replay{background:#f6efdf;border-radius:12px;padding:12px;color:#66583e;font-size:12px;text-align:center;margin:20px 0 0}
.onboarding-footer{padding:18px 24px 24px;display:flex;gap:12px;justify-content:space-between;flex-shrink:0;background:#fffefb;border-top:1px solid #edf0e8;margin-top:12px}
.onboarding-footer button{min-height:46px;min-width:100px;border-radius:14px}
.onboarding-footer .primary{flex:1;max-width:240px}
.onboarding-footer .text-link{color:#637466}
.onboarding-sheet button:focus-visible,.onboarding-heading:focus-visible{outline:2px solid #2d7150;outline-offset:3px}
@media(max-width:480px){.onboarding-scrim{padding:12px}.sheet.onboarding-sheet{max-height:calc(100dvh - 24px);border-radius:24px}.onboarding-body{padding:12px 22px 8px}.onboarding-footer{padding:16px 22px max(18px,env(safe-area-inset-bottom));margin-top:8px}.onboarding-heading{font-size:21px}}
@media(max-height:650px){.onboarding-art{height:115px;margin-bottom:8px}.onboarding-teacher{height:115px;width:145px}.onboarding-mascot{height:46px;margin-bottom:6px}.onboarding-mascot .shiwu-emoji,.onboarding-mascot .shiwu-emoji__image{height:44px}.onboarding-subtitle{margin-bottom:12px}.onboarding-footer{padding-top:12px;padding-bottom:12px}}
@media(prefers-reduced-motion:reduce){.onboarding-sheet *{animation:none!important;transition:none!important}}