/* Approved onboarding illustrations; message copy and state remain in the existing flow. */
#step13 .showcase-stage{position:relative;isolation:isolate;padding:18px 0 0;min-height:410px;perspective:1000px}
#step13 .showcase-panel{transform-origin:50% 85%;animation:theater-enter .45s cubic-bezier(.2,.8,.2,1)}
#step13 .showcase-panel>.mini{box-shadow:0 16px 22px #244b3e1f}
#step13 .showcase-tabs{padding:7px;background:#dbe8e2;border-radius:22px;gap:5px;box-shadow:inset 0 2px 3px #214f3c12}
#step13 .showcase-tab{border:0;border-radius:16px;background:transparent;min-height:75px;transition:transform .2s,background .2s,box-shadow .2s}
#step13 .showcase-tab[aria-pressed=true]{background:#fff;box-shadow:0 5px 0 #bed2c8,0 8px 12px #23483915;transform:translateY(-4px)}
#step13 .showcase-tab:focus-visible,#step8 .topic-choice:focus-visible,.practice-dial:focus-visible{outline:3px solid #176e56;outline-offset:5px}
@keyframes theater-enter{from{opacity:.3;transform:translateY(14px) rotateX(8deg)}to{opacity:1;transform:none}}
#step8 .topic-choice-grid{gap:16px 13px;padding:8px 4px 10px}
#step8 .topic-choice{position:relative;min-height:105px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;padding:13px 10px;border:2px dashed #a4c0b3;border-radius:4px;background:#fcfffd;box-shadow:5px 5px 0 #c9ddd35e;transform:rotate(-2deg);transition:transform .2s,background .2s,border-color .2s}
#step8 .topic-choice:nth-child(even){transform:rotate(2deg)}
#step8 .topic-choice>span:first-child{font-size:29px}
#step8 .topic-choice>span:last-child{font-size:13px;line-height:1.35}
#step8 .topic-choice.selected{background:#d7f2df;border-color:#1c7955;transform:rotate(0) translateY(-3px);box-shadow:4px 6px 0 #9ac3ad66}
#step8 .topic-choice.selected:after{content:'✓';position:absolute;right:5px;top:4px;border:1.5px solid #1c7955;border-radius:50%;width:20px;height:20px;font-size:13px;line-height:18px;color:#17683f;transform:rotate(-12deg)}
#step6a .daily-illustration{width:100%;height:275px;min-height:0;margin:10px auto 28px;position:relative}
.practice-dial{position:relative;width:246px;height:246px;border:12px solid #fff;border-radius:50%;background:repeating-conic-gradient(from 0deg,#9dc5b1 0 1deg,transparent 1deg 15deg),#e8f3ed;box-shadow:0 14px 0 #b6d1c1,0 23px 26px #2c624b1c;touch-action:none;cursor:grab;display:grid;place-items:center;user-select:none}
.practice-dial:active{cursor:grabbing}
.practice-dial:before{content:'';position:absolute;inset:21px;border:1px solid #bddbc9;border-radius:50%;background:#fbfdfb}
.practice-hands{position:absolute;inset:0;transform:rotate(var(--dial-turn,0deg))}
.practice-hands:before{content:'';position:absolute;top:5px;left:calc(50% - 12px);width:24px;height:24px;border-radius:50%;background:#1d9d76;box-shadow:0 2px 3px #123f2933;border:4px solid white}
.practice-center{position:relative;font-size:58px;line-height:1;transform:rotate(-8deg)}
.practice-badge{position:absolute;right:-22px;bottom:21px;background:#fff;border:1px solid #d9e8de;border-radius:19px;padding:13px;font-size:35px;line-height:1;transform:rotate(10deg);box-shadow:0 8px 18px #294b3914}
@media(min-width:700px){#step13 .showcase-stage{max-width:410px;margin:0 auto}#step13 .showcase-tabs{max-width:410px;margin:22px auto 20px}#step8 .topic-choice-grid{max-width:490px;margin:auto}#step6a .daily-illustration{height:290px}}
@media(max-width:350px){#step8 .topic-choice{padding:9px 5px;min-height:100px}#step8 .topic-choice-grid{gap:12px 9px}.practice-dial{width:218px;height:218px}.practice-badge{right:-12px}#step13 .showcase-stage{min-height:410px}}
@media(prefers-reduced-motion:reduce){#step13 .showcase-panel{animation:none}#step13 .showcase-tab,#step8 .topic-choice{transition:none}}
#step13 .showcase-stage{align-items:center;touch-action:pan-y}
#step8 .topic-choice.selected:after{content:'';display:block;width:12px;height:7px;border:0;border-left:2px solid #17683f;border-bottom:2px solid #17683f;border-radius:0;background:none;transform:rotate(-45deg);right:9px;top:10px}

/* Step 10 globe retains the existing motivation bubble and Continue action. */
#step10 .encouragement-avatar{width:250px;height:250px;margin-bottom:3.75rem}
.country-globe{position:relative;display:block;width:250px;height:250px;padding:0;border:0;background:transparent;cursor:pointer}
.country-globe canvas{display:block;width:100%;height:100%;filter:drop-shadow(0 15px 15px #456e8426)}
.globe-country-label{position:absolute;left:50%;bottom:-28px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;width:max-content;min-width:176px;max-width:230px;padding:8px 14px;border:1px solid #dce9e8;border-radius:16px;background:#fff;box-shadow:0 8px 22px #2c566329;color:#17324b;text-align:left}
.globe-flag{flex:none;font-size:30px;line-height:1}.globe-country-copy{display:flex;flex-direction:column;min-width:0}.globe-country-name{font:700 15px/1.2 'General Sans',system-ui,sans-serif;white-space:nowrap}.globe-speakers{margin-top:2px;font:500 12px/1.25 'General Sans',system-ui,sans-serif;color:#53687b;white-space:nowrap}
.country-globe:focus-visible{outline:3px solid #087c65;outline-offset:5px;border-radius:50%}
@media(max-width:380px){#step10 .encouragement-avatar,.country-globe{width:220px;height:220px}}
@media(prefers-reduced-motion:reduce){.country-globe *{animation:none!important;transition:none!important}}

/* Preserved localized showcase uses its approved Maya imagery and wording. */
#step13 .experience-preview__frame{perspective:1000px;touch-action:pan-y;animation:showcase-enter .45s cubic-bezier(.2,.8,.2,1)}
#step13 .experience-preview__thumbnails{padding:7px;background:#dbe8e2;border-radius:22px;gap:5px;box-shadow:inset 0 2px 3px #214f3c12}
#step13 .experience-preview__thumbnail{border:0;border-radius:16px;background:transparent;transition:transform .2s,background .2s,box-shadow .2s}
#step13 .experience-preview__thumbnail.is-active{background:#fff;box-shadow:0 5px 0 #bed2c8,0 8px 12px #23483915;transform:translateY(-4px)}
#step13 .experience-preview__thumbnail:focus-visible{outline:3px solid #176e56;outline-offset:5px}
@keyframes showcase-enter{from{opacity:.3;transform:translateY(14px) rotateX(8deg)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#step13 .experience-preview__frame{animation:none}#step13 .experience-preview__thumbnail{transition:none}}
