.demo-app{color:var(--ink);background:#fff;border-radius:12px 0 0;flex-direction:column;font-size:12px;line-height:1.35;display:flex;position:absolute;inset:36px 0 0 36px;overflow:hidden;box-shadow:0 10px 40px -12px #021e3c4d,0 0 0 .5px #02042614;container:demo/inline-size}.da-bar{background:color-mix(in srgb, var(--ink) 3%, #fff);border-bottom:1px solid var(--line);flex:none;justify-content:center;align-items:center;height:38px;padding:0 72px;display:flex;position:relative}.da-dots{align-items:center;gap:6px;display:flex;position:absolute;top:0;bottom:0;left:14px}.da-dots i{background:#ff6159;border-radius:50%;width:10px;height:10px;box-shadow:inset 0 0 0 .5px #0000001f}.da-dots i:nth-child(2){background:#febc2e}.da-dots i:nth-child(3){background:#2ac840}.da-url{color:#0204269e;white-space:nowrap;background:#fff;border-radius:7px;justify-content:center;align-items:center;gap:6px;width:min(100%,250px);height:24px;padding:0 10px;font-size:10.5px;font-weight:500;display:flex;overflow:hidden;box-shadow:0 0 0 .5px #0204261a,0 1px 2px #0204260a}.da-url img{flex:none;width:12px;height:12px}.da-url>span{text-overflow:ellipsis;overflow:hidden}.da-body{flex:1;gap:18px;min-height:0;padding:20px;display:flex;position:relative}.da-main{flex-direction:column;flex:1;gap:14px;min-width:0;display:flex}.da-side{border-right:1px solid var(--line);flex-direction:column;flex:none;gap:2px;width:150px;padding-right:18px;display:none}.da-side b{letter-spacing:.06em;text-transform:uppercase;color:#02042673;margin:4px 0 8px 9px;font-size:10px;font-weight:500}.da-side i{color:#020426b3;border-radius:8px;padding:7px 9px 6px;font-size:12.5px;font-style:normal}.da-side i.on{background:var(--accent-tint);color:var(--accent);font-weight:500}.da-head{justify-content:space-between;align-items:center;gap:12px;display:flex}.da-h{font:600 18px/1.15 var(--sans);letter-spacing:-.02em;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.da-chip{background:var(--soft-btn);color:#020426a6;white-space:nowrap;letter-spacing:0;text-transform:none;border-radius:99px;flex:none;padding:5px 9px 4px;font-size:10.5px;font-weight:500}.da-label{letter-spacing:.06em;text-transform:uppercase;color:#02042673;margin:0 0 10px;font-size:10px;font-weight:500}.da-meter{background:#e6ebee;border-radius:6px;height:6px;overflow:hidden}.da-meter i{width:calc(var(--v) * 100%);border-radius:inherit;background:var(--accent);transform-origin:0;height:100%;animation:da-grow .7s var(--ease) both;animation-delay:calc(var(--d,.3s) + var(--i,0) * 80ms);display:block}.da-prose{font:400 16px/1.75 var(--serif);font-variation-settings:"opsz" 16;color:#020426d9}.da-note{animation:da-rise .5s var(--ease) both;background:#fff8dc;border:1px solid #f3e2a0;border-radius:12px;padding:10px 12px 11px;font-size:12px;line-height:1.35}.da-note b{letter-spacing:.05em;text-transform:uppercase;color:#8a6400;margin-bottom:3px;font-size:10px;font-weight:600;display:block}.da-note.n2{background:var(--accent-tint);border-color:var(--accent-tint-2)}.da-note.n2 b{color:var(--accent)}@keyframes da-grow{0%{transform:scaleX(0)}}@keyframes da-rise{0%{opacity:0;transform:translateY(10px)}}@keyframes da-pop{0%{opacity:0;transform:scale(.9)}}@container demo (width>=820px){.da-bar{height:42px}.da-dots{gap:7px;left:16px}.da-dots i{width:11px;height:11px}.da-url{width:min(100%,290px);height:26px;font-size:11.5px}.da-body{gap:26px;padding:26px 28px}.da-side{display:flex}.da-h{font-size:21px}.da-prose{font-size:19px}.da-note{font-size:13px}}@container demo (width<=540px){.da-bar{height:34px;padding:0 58px}.da-dots{gap:5px;left:11px}.da-dots i{width:8px;height:8px}.da-url{height:22px;font-size:10px}.da-body{padding:16px}.da-h{font-size:16px}.da-prose{font-size:15px;line-height:1.6}}.sp[data-astro-cid-o4n3appj]{--sp-faint:color-mix(in srgb, var(--ink) 50%, transparent);--sp-hair:color-mix(in srgb, var(--ink) 7%, transparent);--sp-ph:color-mix(in srgb, var(--accent) 9%, color-mix(in srgb, var(--ink) 10%, #fff));--sp-grad:linear-gradient(90deg, color-mix(in oklch, var(--accent), #fff 30%), var(--accent));--sp-shadow:0 16px 36px -18px color-mix(in srgb, var(--accent) 34%, transparent), 0 2px 6px color-mix(in srgb, var(--ink) 4%, transparent);--sp-out:cubic-bezier(.22, 1, .36, 1);--sp-pop:cubic-bezier(.34, 1.45, .64, 1);--green:#059669;--green-ink:#047857;--rose:#be185d;--amber-ink:#7a4e08;--tw-max:28px;--tg:4px;--row:38px;--rgap:4px;--shown:3;--t-play:.45s;--t-say:.7s;--t-type:1.45s;--t-key:95ms;--t-check:2.3s;--t-miss:2.5s;--t-join:3s;--t-down:3.3s;--t-again:3.75s;--t-up:4.2s;--t-key2:85ms;--t-check2:5.15s;--t-win:5.3s;--t-medal:5.45s;--t-tick:5.8s;--t-next:6.2s;background:linear-gradient(180deg, var(--accent-tint), color-mix(in srgb, var(--accent-tint) 35%, #fff) 85%);font-family:var(--sans);color:var(--ink);grid-template:". ."minmax(0,1fr)"court list"". ."minmax(0,1.3fr)/minmax(0,1.6fr) minmax(0,1fr);gap:0 18px;padding:20px 30px 0 26px;display:grid;position:absolute;inset:0;overflow:hidden}.sp[data-astro-cid-o4n3appj] p[data-astro-cid-o4n3appj]{margin:0}.sp[data-astro-cid-o4n3appj] i[data-astro-cid-o4n3appj]{font-style:normal;display:block}.sp[data-astro-cid-o4n3appj] svg[data-astro-cid-o4n3appj]{flex:none;display:block}.sp-card[data-astro-cid-o4n3appj]{border:1px solid var(--sp-hair);box-shadow:var(--sp-shadow);background:#fff;border-radius:16px;position:relative}.sp-ph[data-astro-cid-o4n3appj]{background:var(--sp-ph);border-radius:9px;height:6px}.sp-court[data-astro-cid-o4n3appj]{grid-area:court;align-self:start;padding:14px 18px 16px;container:sp-court/inline-size}.sp-ring[data-astro-cid-o4n3appj]{border-radius:inherit;pointer-events:none;border:1.5px solid color-mix(in srgb, var(--green) 42%, transparent);box-shadow:0 0 0 4px color-mix(in srgb, var(--green) 7%, transparent);position:absolute;inset:-1px}.sp-top[data-astro-cid-o4n3appj]{justify-items:start;display:grid}.sp-kind[data-astro-cid-o4n3appj]{white-space:nowrap;letter-spacing:-.005em;background:color-mix(in srgb, var(--accent) 8%, #fff);color:var(--accent);border-radius:99px;grid-area:1/1;align-items:center;gap:5px;padding:4px 10px 4px 8px;font-size:10.5px;font-weight:650;display:inline-flex}.sp-kind[data-astro-cid-o4n3appj] svg[data-astro-cid-o4n3appj]{width:12px;height:12px}.sp-kind[data-astro-cid-o4n3appj].is-listen{opacity:0}.sp-medal[data-astro-cid-o4n3appj]{width:50px;height:50px;position:absolute;top:10px;right:12px}.sp-medal[data-astro-cid-o4n3appj] img[data-astro-cid-o4n3appj]{width:100%;height:100%;filter:drop-shadow(0 6px 8px color-mix(in srgb, var(--ink) 16%, transparent));position:relative}.sp-spark[data-astro-cid-o4n3appj]{opacity:0;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);background:#f5b301;width:9px;height:9px;margin:-4.5px;position:absolute;top:50%;left:50%}.sp-spark[data-astro-cid-o4n3appj]:nth-child(2n){background:var(--accent);width:7px;height:7px;margin:-3.5px}.sp-say[data-astro-cid-o4n3appj]{justify-items:start;gap:16px;margin-top:18px;display:grid}.sp-player[data-astro-cid-o4n3appj]{background:color-mix(in srgb, var(--accent) 7%, #fff);border-radius:99px;align-items:center;gap:10px;padding:3px 14px 3px 3px;display:inline-flex}.sp-play[data-astro-cid-o4n3appj]{background:var(--sp-grad);color:#fff;width:30px;height:30px;box-shadow:0 4px 10px -4px color-mix(in srgb, var(--accent) 70%, transparent);border-radius:50%;place-items:center;display:grid;position:relative}.sp-play[data-astro-cid-o4n3appj] svg[data-astro-cid-o4n3appj]{width:15px;height:15px}.sp-ping[data-astro-cid-o4n3appj]{border:1.5px solid var(--accent);opacity:0;border-radius:50%;position:absolute;inset:0}.sp-wave[data-astro-cid-o4n3appj]{align-items:center;gap:3px;height:16px;display:flex}.sp-wave[data-astro-cid-o4n3appj] i[data-astro-cid-o4n3appj]{background:color-mix(in srgb, var(--accent) 45%, transparent);width:3px;height:16px;transform:scaleY(var(--h));border-radius:3px}.sp-sentence[data-astro-cid-o4n3appj]{letter-spacing:-.012em;color:color-mix(in srgb, var(--ink) 88%, transparent);font-size:15px;font-weight:600;line-height:1.4}.sp-blank[data-astro-cid-o4n3appj]{isolation:isolate;margin:0 .16em;display:inline-block;position:relative}.sp-blank[data-astro-cid-o4n3appj] b[data-astro-cid-o4n3appj]{color:var(--green-ink);font-weight:700;display:inline-block}.sp-blank[data-astro-cid-o4n3appj]:before,.sp-blank[data-astro-cid-o4n3appj]:after{content:"";border-radius:99px;height:.22em;position:absolute;bottom:-.04em;left:-.08em;right:-.08em}.sp-blank[data-astro-cid-o4n3appj]:before{background:color-mix(in srgb, var(--accent) 55%, #fff);opacity:0}.sp-blank[data-astro-cid-o4n3appj]:after{background:color-mix(in srgb, var(--green) 30%, #fff);z-index:-1}.sp-tiles[data-astro-cid-o4n3appj]{--tw:min(var(--tw-max), (100cqw - 8 * var(--tg)) / 9);--th:calc(var(--tw) * 1.15);--tfs:calc(var(--tw) * .57);gap:var(--tg);margin-top:14px;display:flex;position:relative}.sp-caret[data-astro-cid-o4n3appj]{z-index:1;left:calc(var(--tg) / -2 - 1px);background:var(--accent);opacity:0;border-radius:2px;width:2px;position:absolute;top:4px;bottom:4px}.sp-tile[data-astro-cid-o4n3appj]{width:var(--tw);height:var(--th);flex:none;position:relative}.sp-flip[data-astro-cid-o4n3appj]{position:absolute;inset:0}.sp-f[data-astro-cid-o4n3appj]{border-radius:calc(var(--tw) * .26);opacity:0;font-size:var(--tfs);text-transform:lowercase;color:var(--ink);box-shadow:inset 0 -2px 0 color-mix(in srgb, var(--ink) 9%, transparent);background:linear-gradient(160deg,#f7f8fb,#eaeef4);place-items:center;font-weight:700;line-height:1;display:grid;position:absolute;inset:0}.sp-f[data-astro-cid-o4n3appj].is-miss{color:var(--rose);box-shadow:inset 0 -2px 0 color-mix(in srgb, var(--rose) 20%, transparent);background:linear-gradient(160deg,#fdeef5,#fbd6e7)}.sp-f[data-astro-cid-o4n3appj].is-back{background:radial-gradient(circle, #ffffff57 1.6px, transparent 2.2px), linear-gradient(160deg, color-mix(in oklch, var(--accent), #fff 16%), color-mix(in oklch, var(--accent), #000 14%));box-shadow:inset 0 -2px #00000038}.sp-f[data-astro-cid-o4n3appj].is-won{opacity:1;background:linear-gradient(160deg, color-mix(in srgb, var(--green) 8%, #fff), color-mix(in srgb, var(--green) 17%, #fff));color:var(--green-ink);box-shadow:inset 0 -2px 0 color-mix(in srgb, var(--green) 24%, transparent)}.is-marked[data-astro-cid-o4n3appj] .sp-f[data-astro-cid-o4n3appj].is-new,.is-marked[data-astro-cid-o4n3appj] .sp-f[data-astro-cid-o4n3appj].is-won{color:var(--amber-ink);background:linear-gradient(160deg,#fff4d6,#ffe1a0);box-shadow:inset 0 -2px #b4530942}.sp-foot[data-astro-cid-o4n3appj]{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;margin-top:16px;display:grid}.sp-clue[data-astro-cid-o4n3appj]{background:color-mix(in srgb, var(--accent) 8%, #fff);min-width:0;max-width:100%;height:26px;color:var(--accent);white-space:nowrap;border-radius:99px;grid-area:1/1;justify-self:start;align-items:center;gap:6px;padding:0 11px 0 9px;font-size:10.5px;font-weight:600;display:inline-flex}.sp-clue[data-astro-cid-o4n3appj] span[data-astro-cid-o4n3appj]{text-overflow:ellipsis;overflow:hidden}.sp-clue[data-astro-cid-o4n3appj] b[data-astro-cid-o4n3appj]{font-weight:700}.sp-clue[data-astro-cid-o4n3appj] svg[data-astro-cid-o4n3appj]{stroke-width:2.1px;flex:none;width:12px;height:12px}.sp-btn[data-astro-cid-o4n3appj]{white-space:nowrap;color:#fff;background:var(--sp-grad);height:28px;box-shadow:0 6px 14px -8px color-mix(in srgb, var(--accent) 80%, transparent);border-radius:99px;grid-area:1/2;align-items:center;gap:5px;padding:0 14px;font-size:11px;font-weight:650;display:inline-flex}.sp-btn[data-astro-cid-o4n3appj] svg[data-astro-cid-o4n3appj]{stroke-width:2.2px;width:13px;height:13px}.sp-btn[data-astro-cid-o4n3appj].is-check{opacity:0}.sp-list[data-astro-cid-o4n3appj]{grid-area:list;align-self:start;padding:14px 12px 10px}.sp-head[data-astro-cid-o4n3appj]{border-bottom:1px solid var(--sp-hair);letter-spacing:-.01em;white-space:nowrap;align-items:center;gap:7px;margin:0 4px;padding-bottom:10px;font-size:12px;font-weight:650;display:flex}.sp-head[data-astro-cid-o4n3appj] svg[data-astro-cid-o4n3appj]{width:14px;height:14px;color:var(--accent);stroke-width:1.9px}.sp-rows[data-astro-cid-o4n3appj]{grid-auto-rows:var(--row);gap:var(--rgap);height:calc(var(--shown) * var(--row) + (var(--shown) - 1) * var(--rgap));box-sizing:content-box;margin:4px -6px 0;padding:4px 6px;display:grid;overflow:hidden}.sp-row[data-astro-cid-o4n3appj]{isolation:isolate;grid-template-columns:22px minmax(0,1fr);align-items:center;column-gap:9px;padding:0 8px;display:grid;position:relative}.sp-shell[data-astro-cid-o4n3appj]{z-index:-1;border-radius:10px;position:absolute;inset:0}.is-next[data-astro-cid-o4n3appj] .sp-shell[data-astro-cid-o4n3appj]{box-shadow:0 0 0 1.5px color-mix(in srgb, var(--accent) 26%, transparent), 0 6px 14px -8px color-mix(in srgb, var(--accent) 50%, transparent);background:#fff}.is-new[data-astro-cid-o4n3appj] .sp-shell[data-astro-cid-o4n3appj]{background:color-mix(in srgb, var(--rose) 6%, #fff);opacity:0}.sp-ico[data-astro-cid-o4n3appj]{width:22px;height:22px;position:relative}.sp-ico[data-astro-cid-o4n3appj] i[data-astro-cid-o4n3appj]{background:color-mix(in srgb, var(--accent) 9%, #fff);color:var(--accent);border-radius:50%;place-items:center;display:grid;position:absolute;inset:0}.sp-ico[data-astro-cid-o4n3appj] svg[data-astro-cid-o4n3appj]{stroke-width:2.2px;width:12px;height:12px}.sp-ico[data-astro-cid-o4n3appj] .is-rose[data-astro-cid-o4n3appj]{background:color-mix(in srgb, var(--rose) 11%, #fff);color:var(--rose);opacity:0}.sp-ico[data-astro-cid-o4n3appj] .is-green[data-astro-cid-o4n3appj],.is-done[data-astro-cid-o4n3appj] .sp-ico[data-astro-cid-o4n3appj] i[data-astro-cid-o4n3appj]{background:var(--green);color:#fff}.is-done[data-astro-cid-o4n3appj] .sp-ico[data-astro-cid-o4n3appj] i[data-astro-cid-o4n3appj]{opacity:.55}.sp-ico[data-astro-cid-o4n3appj] .is-green[data-astro-cid-o4n3appj] svg[data-astro-cid-o4n3appj],.is-done[data-astro-cid-o4n3appj] .sp-ico[data-astro-cid-o4n3appj] svg[data-astro-cid-o4n3appj]{stroke-width:3px;width:11px;height:11px}.sp-txt[data-astro-cid-o4n3appj]{gap:2px;min-width:0;display:grid}.sp-txt[data-astro-cid-o4n3appj] b[data-astro-cid-o4n3appj]{letter-spacing:-.01em;font-size:11.5px;font-weight:650;line-height:1.25;display:block}.sp-notes[data-astro-cid-o4n3appj]{display:grid}.sp-notes[data-astro-cid-o4n3appj] small[data-astro-cid-o4n3appj]{color:var(--sp-faint);white-space:nowrap;text-overflow:ellipsis;grid-area:1/1;font-size:10px;font-weight:500;line-height:1.25;overflow:hidden}.sp-notes[data-astro-cid-o4n3appj] .is-rose[data-astro-cid-o4n3appj]{color:var(--rose);opacity:0;font-weight:600}.is-done[data-astro-cid-o4n3appj] .sp-txt[data-astro-cid-o4n3appj]{gap:6px}.sp-ph[data-astro-cid-o4n3appj][style]{width:var(--w)}.sp-ph[data-astro-cid-o4n3appj].is-note{opacity:.8;height:4px}.is-out[data-astro-cid-o4n3appj]{opacity:0}.sp-tile[data-astro-cid-o4n3appj]{--t1:calc(var(--t-type) + var(--i) * var(--t-key));--t2:calc(var(--t-down) + var(--i) * 40ms);--t3:calc(var(--t-up) + var(--i) * var(--t-key2));--t4:calc(var(--t-win) + var(--i) * 35ms)}.demo-panel[data-play] .sp-court[data-astro-cid-o4n3appj]{animation:sp-rise .5s var(--sp-out) 50ms both}.demo-panel[data-play] .sp-list[data-astro-cid-o4n3appj]{animation:sp-rise .5s var(--sp-out) .15s both}.demo-panel[data-play] .sp-player[data-astro-cid-o4n3appj]{animation:sp-fade .35s var(--sp-out) calc(var(--t-play) - 50ms) both}.demo-panel[data-play] .sp-play[data-astro-cid-o4n3appj]{animation:sp-pop .45s var(--sp-pop) var(--t-play) both}.demo-panel[data-play] .sp-ping[data-astro-cid-o4n3appj]{animation:sp-ping 1s ease-out calc(var(--t-play) + .2s), sp-ping 1s ease-out var(--t-again)}.demo-panel[data-play] .sp-ping[data-astro-cid-o4n3appj]+.sp-ping[data-astro-cid-o4n3appj]{animation:sp-ping 1s ease-out calc(var(--t-play) + .65s)}.demo-panel[data-play] .sp-wave[data-astro-cid-o4n3appj] i[data-astro-cid-o4n3appj]{animation:sp-talk .3s ease-in-out calc(var(--t-play) + .2s + var(--k) * 45ms) 4 alternate, sp-talk .3s ease-in-out calc(var(--t-again) + var(--k) * 45ms) 2 alternate}.demo-panel[data-play] .sp-sentence[data-astro-cid-o4n3appj]{animation:sp-write .6s var(--sp-out) var(--t-say) both}.demo-panel[data-play] .sp-blank[data-astro-cid-o4n3appj]:before{animation:sp-on 10ms linear 0s both, sp-blink .5s ease-in-out calc(var(--t-type) - .25s) 2 alternate, sp-off .3s linear var(--t-win) forwards}.demo-panel[data-play] .sp-tile[data-astro-cid-o4n3appj]{animation:sp-key .22s var(--sp-out) var(--t1) both, sp-bounce .45s var(--sp-out) var(--t4)}.demo-panel[data-play] .sp-caret[data-astro-cid-o4n3appj].is-first{animation:sp-on 10ms linear .6s both, sp-off .15s linear var(--t-check) forwards, sp-caret .8s step-end .6s, sp-caret1 calc(8 * var(--t-key)) steps(8, start) var(--t-type) both}.demo-panel[data-play] .sp-f[data-astro-cid-o4n3appj].is-try{animation:sp-on 10ms linear var(--t1) both, sp-off .18s linear var(--t-miss) forwards}.demo-panel[data-play] .sp-btn[data-astro-cid-o4n3appj].is-check{animation:sp-off .25s linear var(--t-next) both, sp-press .32s ease-out var(--t-check), sp-press .32s ease-out var(--t-check2)}.demo-panel[data-play] .sp-tiles[data-astro-cid-o4n3appj]{animation:sp-shake .45s ease-in-out var(--t-miss)}.demo-panel[data-play] .sp-f[data-astro-cid-o4n3appj].is-miss{animation:sp-on .18s linear var(--t-miss) both, sp-off 10ms linear var(--t2) forwards}.demo-panel[data-play] .sp-kind[data-astro-cid-o4n3appj].is-listen{animation:sp-off .25s linear var(--t-join) both}.demo-panel[data-play] .sp-kind[data-astro-cid-o4n3appj].is-rematch{animation:sp-swap .35s var(--sp-out) var(--t-join) both}.demo-panel[data-play] .is-new[data-astro-cid-o4n3appj]{animation:sp-join .55s var(--sp-out) var(--t-join) both}.demo-panel[data-play] .sp-row[data-astro-cid-o4n3appj]:not(.is-new){animation:sp-push .55s var(--sp-out) var(--t-join) both}.demo-panel[data-play] .sp-row[data-astro-cid-o4n3appj].is-out{animation:sp-push .55s var(--sp-out) var(--t-join) both, sp-off .3s linear var(--t-join) both}.demo-panel[data-play] .is-new[data-astro-cid-o4n3appj] .sp-shell[data-astro-cid-o4n3appj]{animation:sp-on .3s linear var(--t-join) both, sp-off .4s linear var(--t-tick) forwards}.demo-panel[data-play] .sp-ico[data-astro-cid-o4n3appj] .is-rose[data-astro-cid-o4n3appj],.demo-panel[data-play] .sp-notes[data-astro-cid-o4n3appj] .is-rose[data-astro-cid-o4n3appj]{animation:sp-on 10ms linear 0s both, sp-off .15s linear var(--t-tick) forwards}.demo-panel[data-play] .sp-flip[data-astro-cid-o4n3appj]{animation:sp-flip .3s ease-in-out calc(var(--t2) - .15s), sp-flip .3s ease-in-out calc(var(--t3) - .15s)}.demo-panel[data-play] .sp-f[data-astro-cid-o4n3appj].is-back{animation:sp-on 10ms linear var(--t2) both, sp-off 10ms linear var(--t3) forwards}.demo-panel[data-play] .sp-tile[data-astro-cid-o4n3appj].is-extra{animation:sp-drop .4s var(--sp-pop) calc(var(--t2) - 50ms) both, sp-bounce .45s var(--sp-out) var(--t4)}.demo-panel[data-play] .is-extra[data-astro-cid-o4n3appj] .sp-flip[data-astro-cid-o4n3appj]{animation:sp-flip .3s ease-in-out calc(var(--t3) - .15s)}.demo-panel[data-play] .sp-caret[data-astro-cid-o4n3appj].is-second{animation:sp-on 10ms linear var(--t-again) both, sp-off .15s linear var(--t-check2) forwards, sp-caret2 calc(9 * var(--t-key2)) steps(9, start) calc(var(--t-up) + .15s) both}.demo-panel[data-play] .sp-f[data-astro-cid-o4n3appj].is-new{animation:sp-on 10ms linear var(--t3) both, sp-off .25s linear var(--t4) forwards}.demo-panel[data-play] .sp-f[data-astro-cid-o4n3appj].is-won{animation:sp-on .25s linear var(--t4) both}.demo-panel[data-play] .sp-ring[data-astro-cid-o4n3appj]{animation:sp-on .5s linear var(--t-win) both}.demo-panel[data-play] .sp-medal[data-astro-cid-o4n3appj] img[data-astro-cid-o4n3appj]{animation:sp-medal .65s var(--sp-pop) var(--t-medal) both}.demo-panel[data-play] .sp-blank[data-astro-cid-o4n3appj] b[data-astro-cid-o4n3appj]{animation:sp-swap .45s var(--sp-out) calc(var(--t-win) + .1s) both}.demo-panel[data-play] .sp-blank[data-astro-cid-o4n3appj]:after{animation:sp-on .4s linear calc(var(--t-win) + .1s) both}.demo-panel[data-play] .sp-spark[data-astro-cid-o4n3appj]{animation:sp-spark .75s var(--sp-out) calc(var(--t-medal) + .12s + var(--k) * 30ms)}.demo-panel[data-play] .sp-ico[data-astro-cid-o4n3appj] .is-green[data-astro-cid-o4n3appj]{animation:sp-pop .45s var(--sp-pop) var(--t-tick) both}.demo-panel[data-play] .is-new[data-astro-cid-o4n3appj] .sp-notes[data-astro-cid-o4n3appj] small[data-astro-cid-o4n3appj]:not(.is-rose){animation:sp-swap .35s var(--sp-out) calc(var(--t-tick) + .2s) both}.demo-panel[data-play] .is-next[data-astro-cid-o4n3appj] .sp-shell[data-astro-cid-o4n3appj]{animation:sp-on .4s linear var(--t-next) both}.demo-panel[data-play] .is-next[data-astro-cid-o4n3appj] .sp-ico[data-astro-cid-o4n3appj] i[data-astro-cid-o4n3appj]{animation:sp-nudge .5s var(--sp-out) var(--t-next)}.demo-panel[data-play] .sp-btn[data-astro-cid-o4n3appj].is-next{animation:sp-swap .35s var(--sp-out) var(--t-next) both}.demo-panel[data-play] .sp-clue[data-astro-cid-o4n3appj]{animation:sp-swap .35s var(--sp-out) calc(var(--t-down) + .25s) both}@keyframes sp-rise{0%{opacity:0;transform:translateY(10px)}}@keyframes sp-pop{0%{opacity:0;transform:scale(.5)}}@keyframes sp-fade{0%{opacity:0}}@keyframes sp-on{0%{opacity:0}to{opacity:1}}@keyframes sp-off{0%{opacity:1}to{opacity:0}}@keyframes sp-swap{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}@keyframes sp-ping{0%{opacity:.6;transform:scale(1)}to{opacity:0;transform:scale(1.9)}}@keyframes sp-talk{0%{transform:scaleY(var(--h))}to{transform:scaleY(var(--hi))}}@keyframes sp-write{0%{opacity:0;clip-path:inset(0 100% 0 0)}30%{opacity:1}to{opacity:1;clip-path:inset(0)}}@keyframes sp-blink{to{opacity:.35}}@keyframes sp-key{0%{opacity:0;transform:translateY(6px)scale(.8)}}@keyframes sp-drop{0%{opacity:0;transform:translateY(-8px)scale(.6)}}@keyframes sp-press{40%{transform:scale(.92)}}@keyframes sp-shake{15%{transform:translate(-5px)}35%{transform:translate(4px)}55%{transform:translate(-3px)}75%{transform:translate(2px)}}@keyframes sp-flip{50%{transform:scaleX(0)}}@keyframes sp-bounce{40%{transform:translateY(-5px)}}@keyframes sp-join{0%{opacity:0;transform:translateY(calc(-1 * (var(--row) + var(--rgap))))}}@keyframes sp-push{0%{transform:translateY(calc(-1 * (var(--row) + var(--rgap))))}}@keyframes sp-medal{0%{opacity:0;transform:scale(.3)rotate(-30deg)}60%{opacity:1;transform:scale(1.12)rotate(6deg)}}@keyframes sp-spark{0%{opacity:1;transform:translate(0)scale(.3)}70%{opacity:1}to{opacity:0;transform:translate(var(--x), var(--y)) scale(1) rotate(45deg)}}@keyframes sp-caret{50%{opacity:0}}@keyframes sp-caret1{0%{transform:none}to{transform:translateX(calc(8 * (var(--tw) + var(--tg))))}}@keyframes sp-caret2{0%{transform:none}to{transform:translateX(calc(9 * (var(--tw) + var(--tg))))}}@keyframes sp-nudge{40%{transform:scale(1.18)}}@container demo (width>=820px){.sp[data-astro-cid-o4n3appj]{--tw-max:38px;--tg:5px;--row:48px;--rgap:6px;grid-template-columns:minmax(0,470px) minmax(0,310px);justify-content:center;column-gap:28px;padding:28px 40px 0}.sp-card[data-astro-cid-o4n3appj]{border-radius:20px}.sp-court[data-astro-cid-o4n3appj]{padding:20px 24px 22px}.sp-kind[data-astro-cid-o4n3appj]{gap:6px;padding:5px 12px 5px 10px;font-size:11.5px}.sp-kind[data-astro-cid-o4n3appj] svg[data-astro-cid-o4n3appj]{width:13px;height:13px}.sp-medal[data-astro-cid-o4n3appj]{width:62px;height:62px;top:14px;right:16px}.sp-say[data-astro-cid-o4n3appj]{gap:18px;margin-top:22px}.sp-player[data-astro-cid-o4n3appj]{gap:12px;padding:4px 16px 4px 4px}.sp-play[data-astro-cid-o4n3appj]{width:38px;height:38px}.sp-play[data-astro-cid-o4n3appj] svg[data-astro-cid-o4n3appj]{width:18px;height:18px}.sp-wave[data-astro-cid-o4n3appj],.sp-wave[data-astro-cid-o4n3appj] i[data-astro-cid-o4n3appj]{height:20px}.sp-sentence[data-astro-cid-o4n3appj]{font-size:19px}.sp-tiles[data-astro-cid-o4n3appj]{margin-top:18px}.sp-foot[data-astro-cid-o4n3appj]{margin-top:22px}.sp-btn[data-astro-cid-o4n3appj]{gap:6px;height:34px;padding:0 18px;font-size:12.5px}.sp-btn[data-astro-cid-o4n3appj] svg[data-astro-cid-o4n3appj]{width:15px;height:15px}.sp-list[data-astro-cid-o4n3appj]{padding:18px 16px 14px}.sp-head[data-astro-cid-o4n3appj]{gap:8px;padding-bottom:13px;font-size:13.5px}.sp-head[data-astro-cid-o4n3appj] svg[data-astro-cid-o4n3appj]{width:16px;height:16px}.sp-rows[data-astro-cid-o4n3appj]{margin-top:6px}.sp-row[data-astro-cid-o4n3appj]{grid-template-columns:26px minmax(0,1fr);column-gap:11px;padding:0 10px}.sp-shell[data-astro-cid-o4n3appj]{border-radius:12px}.sp-ico[data-astro-cid-o4n3appj]{width:26px;height:26px}.sp-ico[data-astro-cid-o4n3appj] svg[data-astro-cid-o4n3appj]{width:14px;height:14px}.sp-ico[data-astro-cid-o4n3appj] .is-green[data-astro-cid-o4n3appj] svg[data-astro-cid-o4n3appj],.is-done[data-astro-cid-o4n3appj] .sp-ico[data-astro-cid-o4n3appj] svg[data-astro-cid-o4n3appj]{width:13px;height:13px}.sp-txt[data-astro-cid-o4n3appj] b[data-astro-cid-o4n3appj]{font-size:13px}.sp-notes[data-astro-cid-o4n3appj] small[data-astro-cid-o4n3appj]{font-size:11.5px}.sp-ph[data-astro-cid-o4n3appj]{height:7px}.sp-ph[data-astro-cid-o4n3appj].is-note{height:5px}}@container demo (width<=600px){.sp[data-astro-cid-o4n3appj]{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:0 14px;padding:18px 22px 0 20px}.sp-court[data-astro-cid-o4n3appj]{padding:14px 16px 15px}}.da-body:has(>[data-spelling-demo]){container:sp-body/size}@container sp-body (height<=300px){.sp[data-astro-cid-o4n3appj]{--row:34px;gap:0 16px;padding:14px 22px 0 18px}.sp-court[data-astro-cid-o4n3appj]{padding:12px 15px 14px}.sp-medal[data-astro-cid-o4n3appj]{width:44px;height:44px;top:8px;right:10px}.sp-say[data-astro-cid-o4n3appj]{gap:10px;margin-top:12px}.sp-tiles[data-astro-cid-o4n3appj]{margin-top:11px}.sp-foot[data-astro-cid-o4n3appj]{display:none}.sp-list[data-astro-cid-o4n3appj]{padding:11px 10px 8px}.sp-head[data-astro-cid-o4n3appj]{padding-bottom:8px}.sp-rows[data-astro-cid-o4n3appj]{margin-top:2px}}@container demo (width<=540px){.sp[data-astro-cid-o4n3appj]{--tw-max:26px;--tg:3px;--row:30px;--rgap:3px;--shown:2;grid-template:"."minmax(0,1fr)"court""list""."minmax(0,1.3fr)/minmax(0,400px);justify-content:center;gap:0;padding:10px 12px 0}.sp-court[data-astro-cid-o4n3appj]{border-radius:14px;padding:11px 13px 13px}.sp-kind[data-astro-cid-o4n3appj]{padding:3px 9px 3px 7px;font-size:10px}.sp-medal[data-astro-cid-o4n3appj]{width:38px;height:38px;top:6px;right:8px}.sp-say[data-astro-cid-o4n3appj]{align-items:center;gap:9px;margin-top:10px;display:flex}.sp-player[data-astro-cid-o4n3appj]{background:0 0;flex:none;padding:0}.sp-play[data-astro-cid-o4n3appj]{width:26px;height:26px}.sp-play[data-astro-cid-o4n3appj] svg[data-astro-cid-o4n3appj]{width:13px;height:13px}.sp-wave[data-astro-cid-o4n3appj]{display:none}.sp-sentence[data-astro-cid-o4n3appj]{white-space:nowrap;font-size:13px}.sp-tiles[data-astro-cid-o4n3appj]{margin-top:10px}.sp-list[data-astro-cid-o4n3appj]{border-radius:14px;margin-top:8px;padding:9px 9px 5px}.sp-head[data-astro-cid-o4n3appj]{gap:6px;margin:0 3px;padding-bottom:6px;font-size:11px}.sp-head[data-astro-cid-o4n3appj] svg[data-astro-cid-o4n3appj]{width:12px;height:12px}.sp-rows[data-astro-cid-o4n3appj]{margin-top:1px;padding:3px 6px}.sp-row[data-astro-cid-o4n3appj]{grid-template-columns:20px minmax(0,1fr);column-gap:8px;padding:0 7px}.sp-row[data-astro-cid-o4n3appj] .sp-txt[data-astro-cid-o4n3appj]{grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:8px}.sp-ico[data-astro-cid-o4n3appj]{width:20px;height:20px}.sp-ico[data-astro-cid-o4n3appj] svg[data-astro-cid-o4n3appj]{width:11px;height:11px}.sp-txt[data-astro-cid-o4n3appj] b[data-astro-cid-o4n3appj]{font-size:11px}.sp-notes[data-astro-cid-o4n3appj] small[data-astro-cid-o4n3appj]{font-size:10px}.sp-shell[data-astro-cid-o4n3appj]{border-radius:9px}}