.demo-layer{--du: 4px;--bd: 32px;--fz: 72px;position:absolute;left:0;top:0;z-index:25;pointer-events:none;overflow:visible}.demo-layer.demo-clip{overflow:hidden}.demo-layer *{pointer-events:none}.demo-ov{position:absolute;z-index:1;overflow:visible}.demo-layer .demo-now,.demo-layer .demo-now *,.demo-layer.demo-frozen *,.demo-quiet{animation:none!important;transition:none!important}@keyframes demoIn{0%{opacity:0}to{opacity:1}}@keyframes demoPop{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}@keyframes demoShapeIn{0%{opacity:0;transform:scale(.86)}to{opacity:1;transform:scale(1)}}@keyframes demoPulse{0%,to{transform:scale(1)}50%{transform:scale(1.035)}}@keyframes demoGlowPulse{0%,to{opacity:.5}50%{opacity:.9}}@keyframes demoOut{to{opacity:0}}.demo-layer .demo-out{animation:demoOut var(--t1) ease forwards!important}.demo-ov .demo-glow{stroke-width:calc(var(--du) * 2.8);stroke-opacity:.5}.demo-ov .demo-glow.soft{stroke-width:calc(var(--du) * 2.2);stroke-opacity:.28}.demo-ov .demo-ink{stroke-width:calc(var(--du) * 1.15)}.demo-ov .demo-ink.thin{stroke-width:calc(var(--du) * .55)}.demo-ov .demo-veil{opacity:.58;animation:demoIn var(--t3) ease backwards}.demo-ov .demo-spot{animation:demoIn var(--t3) ease backwards}.demo-ov .demo-spot .demo-glow{animation:demoGlowPulse 1.3s ease var(--t3) infinite}.demo-ov .demo-lit{animation:demoIn var(--t3) ease backwards}.demo-ov .demo-fade{opacity:.78;animation:demoIn var(--t3) ease backwards}.demo-ov .demo-fade.gone{opacity:.94}.demo-ov .demo-shape{transform-box:fill-box;transform-origin:center;animation:demoShapeIn var(--t4) var(--ease) backwards;transition:opacity var(--t3) ease;opacity:.72}.demo-ov .demo-shape.cur{opacity:1}.demo-ov .demo-shape.done{opacity:.9}.demo-ov .demo-shape.done .demo-ink{fill-opacity:.06;transition:fill-opacity var(--t3) ease}.demo-ov .demo-ghost{transition:transform var(--t2) var(--ease)}.demo-ring{--rc: #FFB020;position:absolute;z-index:2;border-radius:16px;box-shadow:0 0 0 calc(var(--du) * .9) var(--rc),0 0 calc(var(--du) * 3.5) calc(var(--du) * 1.2) rgba(255,176,32,.55);animation:demoIn var(--t3) ease backwards}.demo-ring.spot{animation:demoIn var(--t3) ease backwards,demoPulse 1.3s var(--ease) var(--t3) infinite}.demo-ring.lit{box-shadow:0 0 0 calc(var(--du) * .9) var(--rc),inset 0 0 0 999px rgba(255,176,32,.14)}.demo-dimmed{opacity:.32;transition:opacity var(--t3) ease}.demo-struck{opacity:.3!important;filter:saturate(.3);transition:opacity var(--t3) ease,filter var(--t3) ease}.tile.demo-struck{opacity:.45!important;filter:saturate(.35);transform:scale(.97)}.demo-moved{opacity:.15!important;transition:opacity var(--t2) ease}.tile.demo-right{--c: var(--mint);--lipc: var(--mint-lip);box-shadow:0 7px 0 var(--lipc),0 0 0 5px #fff,0 0 0 10px var(--mint);animation:squish .5s var(--pop)}.tile.demo-press{animation:squish .42s var(--pop)}.tile.demo-other{opacity:.35;filter:saturate(.4);transform:scale(.97);transition:opacity var(--t3) ease,filter var(--t3) ease,transform var(--t3) var(--ease)}.demo-gone{opacity:0!important;transition:opacity var(--t1) ease}.demo-struck-stick{opacity:.22;transition:opacity var(--t3) ease}.hs-key.demo-press,.hs-slot.demo-press{animation:squish .42s var(--pop)}.hs-slot.demo-now .hs-tok,.demo-reduced .hs-slot.demo-filled .hs-tok{animation:none}.demo-bdg{position:absolute;z-index:2;width:0;height:0;animation:demoPop var(--t4) var(--pop) backwards}.demo-bdg>b{position:absolute;left:0;top:0;transform:translate(-50%,-50%);min-width:var(--bd);height:var(--bd);padding:0 calc(var(--bd) * .26);display:flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:999px;background:#1e2340;color:#fff;font-family:var(--display);font-weight:700;font-size:calc(var(--bd) * .58);line-height:1;box-shadow:0 0 0 calc(var(--bd) * .09) var(--bc),0 0 0 calc(var(--bd) * .16) #fff,0 calc(var(--bd) * .12) 0 calc(var(--bd) * .14) rgba(30,35,64,.22)}.demo-bdg{--bc: #1E2340}.demo-bdg.demo-meter{visibility:hidden;animation:none!important}.demo-bdg.mark>b{background:var(--bc);box-shadow:0 0 0 calc(var(--bd) * .1) #fff,0 calc(var(--bd) * .12) 0 calc(var(--bd) * .1) rgba(30,35,64,.22);font-size:calc(var(--bd) * .54)}.demo-bdg.check>b{background:#fff;color:var(--mint);font-size:calc(var(--bd) * .7);box-shadow:0 calc(var(--bd) * .1) 0 rgba(0,0,0,.14)}.demo-bdg.wrong>b{background:#f0443a;color:#fff;font-size:calc(var(--bd) * .62);box-shadow:0 0 0 calc(var(--bd) * .1) #fff,0 calc(var(--bd) * .12) 0 calc(var(--bd) * .1) rgba(0,0,0,.16)}.demo-bdg b img.emoji{width:.95em;height:.95em;vertical-align:-.1em;margin:0 .02em}.demo-x{position:absolute;z-index:2;width:0;height:0;--xs: 40px;--xw: 6px;animation:demoPop var(--t3) var(--pop) backwards}.demo-x i{position:absolute;left:calc(var(--xs) * -.5);top:calc(var(--xw) * -.5);width:var(--xs);height:var(--xw);border-radius:99px;background:#f0443a;box-shadow:0 0 0 calc(var(--xw) * .4) #fff,0 calc(var(--xw) * .5) 0 calc(var(--xw) * .4) rgba(30,35,64,.18);transform:rotate(45deg)}.demo-x i+i{transform:rotate(-45deg)}.demo-token{position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;animation:demoPop var(--t4) var(--pop) backwards}.demo-token>b{min-width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:.3em;background:#fff;color:var(--ink);font-family:var(--display);font-weight:700;box-shadow:0 0 0 calc(var(--du) * .8) var(--mint),0 .08em 0 calc(var(--du) * .8) var(--mint-lip)}.demo-ghost-html{position:absolute;z-index:2;display:grid;place-items:center;transition:transform var(--t2) var(--ease);filter:drop-shadow(0 6px 6px rgba(30,35,64,.3))}.demo-ghost-html *{animation:none!important;transition:none!important;opacity:1}.demo-finger{--hr: -14deg;--hs: 1;--shx: 0;--shy: .07;position:absolute;left:0;top:0;z-index:3;width:0;height:0;opacity:0;transition:opacity var(--t3) ease}.demo-finger.on{opacity:1}.demo-hand{position:absolute;left:calc(var(--fz) * -.386);top:calc(var(--fz) * -.04);width:var(--fz);height:var(--fz);transform-origin:38.6% 4%;transform:scaleX(var(--hs)) rotate(var(--hr)) scale(1);transition:transform var(--t3) var(--ease)}.demo-hand svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(calc(var(--fz) * var(--shx)) calc(var(--fz) * var(--shy)) calc(var(--fz) * .05) rgba(30,35,64,.32))}@keyframes demoTap{0%{transform:scaleX(var(--hs)) rotate(var(--hr)) scale(1)}35%{transform:scaleX(var(--hs)) rotate(var(--hr)) scale(.82)}to{transform:scaleX(var(--hs)) rotate(var(--hr)) scale(1)}}.demo-hand.tap{animation:demoTap .42s var(--pop)}@keyframes demoRipple{0%{opacity:.95;transform:scale(.25)}to{opacity:0;transform:scale(1)}}.demo-ripple{position:absolute;left:calc(var(--fz) * -.5);top:calc(var(--fz) * -.5);width:var(--fz);height:var(--fz);border-radius:50%;border:calc(var(--du) * 1.1) solid #fff;box-shadow:0 0 0 calc(var(--du) * .7) #2e9bff,inset 0 0 0 calc(var(--du) * .7) #2e9bff;opacity:0;animation:demoRipple .6s var(--ease)}.demo-cap{--capfs: clamp(17px, calc(1.6vw + 1.2vh) , 44px);display:grid;justify-items:center;align-items:center;min-height:calc(var(--capfs) * 2.9)}.demo-cap>.demo-cap-t{grid-area:1 / 1;max-width:min(96%,30em);padding:.34em .9em .4em;border-radius:.8em;background:#1e2340;color:#fff;box-shadow:0 .14em #0b0e22;font-family:var(--display);font-weight:600;font-size:var(--capfs);line-height:1.22;text-align:center;unicode-bidi:plaintext;text-wrap:balance;animation:demoCapIn var(--t4) var(--ease) backwards}.demo-cap>.demo-cap-t:lang(ar){font-family:"Baloo Bhaijaan 2",var(--display);line-height:1.4;padding-top:.26em;padding-bottom:.3em}.demo-cap>.demo-cap-t.demo-now{animation:none}.demo-cap>.demo-cap-t.out{animation:demoCapOut var(--t1) ease forwards}.demo-cap-t img.emoji{width:1.05em;height:1.05em;vertical-align:-.16em}@keyframes demoCapIn{0%{opacity:0;transform:translateY(.35em) scale(.97)}to{opacity:1;transform:none}}@keyframes demoCapOut{to{opacity:0;transform:translateY(-.2em)}}.demo-cap.demo-cap-float{position:absolute;z-index:2;width:92%;min-height:0;transform:translate(-50%)}.demo-prog{position:relative;height:10px;border-radius:99px;overflow:hidden;background:rgba(30,35,64,.12)}.demo-prog>.demo-prog-fill{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:99px;background:var(--grape);transform-origin:left center;transform:scaleX(0)}.demo-prog>.demo-prog-tick{position:absolute;top:0;width:3px;height:100%;margin-left:-1px;background:rgba(255,255,255,.85)}@keyframes demoFill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.demo-scrim{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(30,35,64,.62);animation:demoIn var(--t4) ease backwards}.demo-focus{position:relative;z-index:1;background:#fff;border-radius:var(--r-l);box-shadow:0 0 0 4px var(--grape),0 18px 60px rgba(14,17,38,.35)}.demo-badge{position:relative;display:inline-flex;align-items:center;gap:.45em;padding:.36em 1em .38em;border-radius:999px;background:var(--grape);color:#fff;box-shadow:0 .14em 0 var(--grape-lip);font-family:var(--display);font-weight:700;font-size:clamp(15px,calc(.9vw + .8vh),32px);line-height:1;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;animation:demoPop var(--t4) var(--pop) backwards,demoBadgePulse 1.6s var(--ease) var(--t4) infinite}@keyframes demoBadgePulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}.demo-badge:after{content:"";position:absolute;top:-6px;right:-6px;bottom:-6px;left:-6px;border-radius:inherit;box-shadow:0 0 0 3px var(--grape);opacity:0;animation:demoPing 1.6s var(--ease) var(--t4) infinite}@keyframes demoPing{0%{opacity:.6;transform:scale(.97,.8)}to{opacity:0;transform:scale(1)}}.demo-badge.practice{background:var(--sun);color:var(--ink);box-shadow:0 .14em 0 var(--sun-lip)}.demo-badge.practice:after{box-shadow:0 0 0 3px var(--sun)}.demo-badge.solve{background:var(--mint);box-shadow:0 .14em 0 var(--mint-lip)}.demo-badge.solve:after{box-shadow:0 0 0 3px var(--mint)}.demo-badge.solve{animation:demoPop var(--t4) var(--pop) backwards}.demo-badge.solve:after{display:none}html[lang=ar] .demo-badge{letter-spacing:0;text-transform:none}.demo-watch .tile{pointer-events:none;opacity:.5;filter:saturate(.4);transition:opacity var(--t3) ease,filter var(--t3) ease,transform var(--t3) var(--ease)}.demo-watch .tile.demo-right{opacity:1;filter:none}.demo-watch .tile.demo-other{opacity:.35}.demo-watch-chip{position:absolute;z-index:2;width:0;height:0;animation:demoPop var(--t4) var(--pop) backwards}.demo-watch-chip>b{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:flex;align-items:center;gap:.35em;white-space:nowrap;padding:.32em .9em .36em;border-radius:999px;background:#1e2340;color:#fff;box-shadow:0 0 0 .16em #fff,0 .2em 0 .16em rgba(30,35,64,.25);font-family:var(--display);font-weight:700;line-height:1;font-size:clamp(15px,calc(.9vw + .9vh),34px)}.demo-watch-chip b img.emoji{width:1.15em;height:1.15em;margin:-.1em 0}html[lang=ar] .demo-watch-chip>b{font-family:"Baloo Bhaijaan 2",var(--display)}.demo-watch-chip.gone{animation:demoOut var(--t1) ease forwards}.demo-watch-chip.off{display:none}.demo-reduced .demo-finger,.demo-reduced .demo-hand{transition:none!important}.demo-reduced .demo-ripple{display:none}.demo-reduced .demo-ring.spot,.demo-reduced .demo-badge,.demo-reduced .demo-badge:after,.demo-reduced .demo-ov .demo-spot .demo-glow{animation:none!important}@media (prefers-reduced-motion: reduce){.demo-ring.spot,.demo-badge,.demo-badge:after,.demo-ov .demo-spot .demo-glow{animation:none!important}.demo-ripple{display:none}.demo-hand{transition:none}}.tc-card{display:flex;flex-direction:column;min-width:0;min-height:0}.tc-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}.tc-prog{flex:none}.tc-main{flex:1;min-height:0;display:flex;flex-direction:column}.tc-left{flex:1;min-height:0;min-width:0;display:flex;flex-direction:column}.tc-prompt{flex:none;text-align:center;font-family:var(--display);font-weight:600;line-height:1.15}html[lang=ar] .tc-prompt{line-height:1.4}.tc-stage{flex:1;min-height:90px;display:flex;align-items:center;justify-content:center}.tc-cap,.tc-tiles{flex:none}.tc-tiles .tile{animation:none}.tc-cat{flex:0 1 auto;min-width:0;display:inline-flex;align-items:center;gap:.4em;height:2.2em;padding:0 .8em;border-radius:999px;background:var(--cc);color:#fff;font-family:var(--display);font-weight:600;white-space:nowrap;box-shadow:0 .2em rgba(0,0,0,.15)}.tc-cat .nm{min-width:0;overflow:hidden;text-overflow:ellipsis}.tc-cat img{width:1.5em;height:1.5em;object-fit:contain;margin:-.3em 0}.tile.pr-right{box-shadow:0 7px 0 var(--lipc),0 0 0 5px #fff,0 0 0 10px var(--mint)}.tile .pr-mine{position:absolute;left:-6px;top:-6px;width:34px;height:34px;font-size:18px;box-shadow:0 0 0 3px #fff,0 3px 0 3px rgba(0,0,0,.12);animation:demoPop var(--t4) var(--pop) backwards}.tile.demo-right>.check{display:none}.tc-swap{animation:demoCapIn var(--t4) var(--ease) backwards}.real-go{display:flex;justify-content:center}.real-go>span{display:inline-flex;align-items:center;gap:.4em;padding:.34em 1em .38em;border-radius:999px;background:var(--tomato);color:#fff;box-shadow:0 .14em rgba(0,0,0,.18);font-family:var(--display);font-weight:700;line-height:1;white-space:nowrap;animation:demoPop var(--t4) var(--pop) backwards}html[lang=ar] .real-go>span{font-family:"Baloo Bhaijaan 2",var(--display);line-height:1.2}.real-go img.emoji{width:1.1em;height:1.1em;margin:-.1em 0}html[lang=ar] .demo-badge{font-family:"Baloo Bhaijaan 2",var(--display);line-height:1.2}.demo-badge img.emoji{width:1.15em;height:1.15em;margin:-.1em 0}