.sa-stage{place-items:center;display:grid;position:absolute;inset:0;container:sa/size}.sa-stage:has(.sa-reveal){overflow-clip-margin:var(--sp-3);overflow:clip}.sa-orb__emoji,.sa-pick__emoji,.sa-mini li,.sa-map__item{font-family:"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", var(--font)}.sa-orbwrap{width:var(--sa-d);height:var(--sa-d);margin:calc(var(--sa-d) * .075);flex:none;position:relative}.sa-orbwrap--hello{--sa-d:min(100cqw / 1.15, 100cqh / 1.15, 20rem)}.sa-orbwrap--show{--sa-d:min(100cqw / 1.16, 100cqh / 1.16, 30rem)}.sa-orb-frame{position:absolute;inset:0}.sa-orb{z-index:1;background:radial-gradient(circle at 46% 42%, #b995ff 0%, #8b52f2 34%, var(--brand) 62%, #3a1490 100%);box-shadow:inset 0 calc(var(--sa-d) * -.05) calc(var(--sa-d) * .1) #1c065073, inset 0 calc(var(--sa-d) * .02) calc(var(--sa-d) * .04) #ffffff40, 0 0 0 calc(var(--sa-d) * .025) #6a2ed81f, 0 calc(var(--sa-d) * .05) calc(var(--sa-d) * .14) #6a2ed84d;isolation:isolate;border-radius:50%;position:absolute;inset:0;overflow:hidden}.sa-orb__mist{background:radial-gradient(circle at 28% 66%,#ff5c8d99,#ff5c8d00 34%),radial-gradient(circle at 72% 30%,#1fc2a780,#1fc2a700 32%),radial-gradient(circle at 66% 76%,#ffc83d73,#ffc83d00 30%),radial-gradient(circle at 34% 30%,#8f5cf099,#8f5cf000 30%);border-radius:50%;animation:26s linear infinite sa-swirl;position:absolute;inset:0}.sa-orb__shine{z-index:3;pointer-events:none;background:radial-gradient(22% 14% at 34% 22%,#fffc,#fff0),radial-gradient(circle,#fff0 64%,#ffffff29 71%,#fff0 76%);border-radius:50%;position:absolute;inset:0}.sa-orb__emoji{z-index:2;font-size:calc(var(--sa-d) * .44);background:radial-gradient(circle,#ffffffd9 0,#ffffff80 26%,#fff0 46%);place-items:center;line-height:1;display:grid;position:absolute;inset:0}@keyframes sa-swirl{to{rotate:1turn}}.sa-hit{inset:calc(var(--sa-d) * -.075);z-index:2;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;border-radius:50%;position:absolute}.sa-orbwrap:not([data-live]) .sa-hit{cursor:default}.sa-ripple{z-index:2;pointer-events:none;width:0;height:0;position:absolute}.sa-ripple:before,.sa-ripple i{aspect-ratio:1;opacity:0;border-radius:50%;position:absolute;top:0;left:0;translate:-50% -50%}.sa-ripple:before{content:"";width:calc(var(--sa-d) * 1.3);animation:sa-glow 1s var(--ease-out) both;background:radial-gradient(circle,#fffffff2 0,#ffffff73 16%,#fff0 50%)}.sa-ripple i{width:calc(var(--sa-d) * 1.25);border:calc(var(--sa-d) * .018 + 1px) solid #ffffffe6;animation:sa-ring 1s var(--ease-out) both}.sa-ripple i:nth-child(2){animation-delay:.15s}.sa-ripple i:nth-child(3){animation-delay:.3s}@keyframes sa-ring{0%{opacity:0;scale:.04}8%{opacity:1}to{opacity:0;scale:1}}@keyframes sa-glow{0%{opacity:1;scale:.25}45%{opacity:.85}to{opacity:0;scale:1}}.sa-keyhint:focus-within{z-index:4;clip:auto;width:max-content;height:auto;margin:0;top:50%;left:50%;overflow:visible;translate:-50% -50%}.sa-keys{z-index:4;pointer-events:none;position:absolute;inset:0}.sa-key{left:var(--kx);top:var(--ky);width:max(48px, calc(var(--sa-d) * .26));aspect-ratio:1;border-radius:50%;position:absolute;translate:-50% -50%}.sa-key:focus,.sa-key:focus-visible{outline-offset:0;box-shadow:0 0 0 6px var(--ink), inset 0 0 0 999px #fff3;border-radius:50%;outline:3px solid #fff}.sa-orbwrap--show .sa-key:focus,.sa-orbwrap--show .sa-key:focus-visible{box-shadow:none;outline:none}.sa-orbwrap--show:has(.sa-key:focus) .sa-orb-frame{outline:3px solid var(--focus);outline-offset:6px;border-radius:50%}.sa-learn{--gap:var(--sp-3);--learn-gap:0px;--mini-gap:5px;--c:clamp(34px, min(9.5cqh, 100cqw / 3.6), 64px);--mini:calc(3 * var(--c) + 2 * var(--mini-gap));--row:44px;--sa-d:min(100cqw / 1.16, (100cqh - var(--mini) - var(--row) - 2 * var(--gap)) / 1.16, 26rem);justify-content:center;align-items:center;gap:var(--learn-gap);flex-direction:column;width:100%;height:100%;display:flex}.sa-side{align-items:center;gap:var(--gap);flex-direction:column;display:flex}.sa-row{width:min(100cqw,21rem);height:var(--row);justify-content:center;align-items:center;display:flex}.sa-learn--practice{--say-w:10rem;--c:clamp(34px, min(9.5cqh, (100cqw - var(--say-w) - var(--gap) - 2 * var(--mini-gap)) / 3), 64px);--sa-d:min(100cqw / 1.16, (100cqh - var(--mini) - var(--gap)) / 1.16, 26rem)}.sa-learn--practice .sa-side{flex-direction:row}.sa-feedback{justify-content:center;align-items:flex-start;gap:var(--sp-2);width:var(--say-w);flex-direction:column;display:flex}@container sa (aspect-ratio>=5/4){.sa-learn,.sa-learn--practice{--c:clamp(38px, min(15cqh, 100cqw / 10), 88px);--sa-d:min(100cqh / 1.16, 52cqw / 1.16, 28rem);--learn-gap:clamp(16px, 4cqw, 56px);flex-direction:row}.sa-learn--practice .sa-side{flex-direction:column}.sa-feedback{align-items:center;gap:var(--sp-3);width:min(100cqw,21rem);height:var(--row);flex-direction:row}.sa-arrow{position:relative}.sa-arrow svg{left:calc((100% + var(--mini)) / 2 + ((100% - var(--mini)) / 2 + var(--learn-gap)) / 2 - 16px);top:calc(-1 * (var(--gap) + var(--mini) / 2) - 16px);position:absolute;rotate:-90deg}}.sa-mini{grid-template-columns:repeat(3, var(--c));grid-auto-rows:var(--c);gap:var(--mini-gap);margin:0;padding:0;list-style:none;display:grid}.sa-mini li{border-radius:calc(var(--c) * .24);background:var(--tint);font-size:calc(var(--c) * .56);transition:background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);place-items:center;line-height:1;display:grid}.sa-mini li[data-lit]{background:var(--brand-soft);box-shadow:inset 0 0 0 3px var(--brand)}.sa-mini li[data-mark=right]{background:var(--good-soft);box-shadow:inset 0 0 0 3px var(--good)}.sa-mini li[data-mark=wrong]{background:var(--bad-soft);box-shadow:inset 0 0 0 3px var(--bad)}.sa-arrow svg{fill:none;width:32px;height:32px;stroke:var(--brand);stroke-width:2.6px;stroke-linecap:round;stroke-linejoin:round}.sa-map{z-index:4;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.sa-map__lines path{fill:none;stroke:#ffffffe6;stroke-width:1.6px}.sa-map__lit{fill:#ffffff6b;stroke:#fff;stroke-width:3.5px;stroke-linejoin:round;animation:sa-fade-in var(--dur-base) var(--ease-out) both}.sa-map__item{font-size:27px}.sa-map__tap{fill:#ffffff40;stroke:#fff;stroke-width:3px;transform-box:fill-box;transform-origin:50%;animation:sa-map-tap 1.3s var(--ease-out) .25s both}@keyframes sa-map-tap{0%{opacity:1;scale:.4}to{opacity:0;scale:1.7}}@keyframes sa-fade-in{0%{opacity:0}}.sa-streak{flex:none;gap:6px;display:flex}.sa-streak span{width:14px;height:14px;box-shadow:inset 0 0 0 2px var(--line-strong);transition:background-color var(--dur-fast) var(--ease-out);border-radius:50%}.sa-streak span[data-on]{background:var(--good);box-shadow:none}.sa-feedback__text{min-width:0;min-height:calc(3em * var(--lh-snug));font-size:var(--fs-small);font-weight:var(--fw-bold);line-height:var(--lh-snug)}@container sa (aspect-ratio>=5/4){.sa-feedback__text{min-height:0}}.sa-feedback__text[data-right=true]{color:var(--good)}.sa-feedback__text[data-right=false]{color:var(--bad)}.screen.sa-show .screen__bar{grid-template-columns:var(--tap) minmax(0, 1fr);grid-template-areas:"close progress"}.screen.sa-show .screen__title{display:none}.sa-pick{--gap:clamp(6px, 1.8cqmin, 14px);--t:min((100cqw - 2 * var(--gap)) / 3, (100cqh - 2 * var(--gap)) / 3, 10.5rem);grid-template-columns:repeat(3, var(--t));grid-auto-rows:var(--t);gap:var(--gap);margin:0;padding:0;list-style:none;display:grid}.sa-pick li{justify-content:center;align-items:center;gap:calc(var(--t) * .05);border-radius:clamp(12px, var(--t) * .16, 24px);background:var(--tint);flex-direction:column;display:flex}.sa-pick__emoji{font-size:calc(var(--t) * .46);line-height:1.1}.sa-pick__name{color:var(--tint-ink);font-size:clamp(.9375rem, var(--t) * .13, 1.25rem);font-weight:var(--fw-bold);line-height:1.2}.sa-reveal{justify-items:center;gap:var(--sp-2);display:grid}.sa-orbwrap--reveal{--sa-d:min(80cqw, 100cqh - 72px, 26rem);animation:sa-pop var(--dur-slow) var(--ease-pop) both;margin:0}.sa-orbwrap--reveal .burst{z-index:0}.sa-orbwrap--reveal .sa-orb__emoji{font-size:calc(var(--sa-d) * .5)}.sa-reveal__name{z-index:1;padding:var(--sp-1) var(--sp-5);border-radius:var(--r-pill);background:var(--tint);color:var(--tint-ink);font-size:clamp(1.25rem,1rem + 1vw,1.75rem);font-weight:var(--fw-heavy);animation:sa-fade-in var(--dur-slow) var(--ease-out) .2s both;line-height:1.3;position:relative}@keyframes sa-pop{0%{opacity:0;scale:.6}}@media (prefers-reduced-motion:reduce){.sa-orb__mist{animation:none}.sa-ripple:before{animation:.8s ease-out both sa-fade-out;scale:.6}.sa-ripple i{display:none}.sa-map__tap{animation:1.2s ease-out .25s both sa-fade-out;scale:1}.sa-orbwrap--reveal{animation:sa-fade-in var(--dur-slow) ease-out both}@keyframes sa-fade-out{0%{opacity:1}to{opacity:0}}}