.ch{justify-items:center;gap:14px;width:100%;display:grid}.ch-stage{aspect-ratio:5/4;touch-action:pan-y;width:100%;max-height:min(68svh,620px);position:relative}@media (max-width:1023px){.ch-stage{aspect-ratio:1;max-width:560px;max-height:none}}.ch-thread{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.ch-line{stroke:var(--fg);stroke-width:2px;stroke-dasharray:1 7;stroke-linecap:round;opacity:0}.ch-p{text-align:center;justify-items:center;gap:6px;width:clamp(92px,25%,150px);display:grid;position:absolute;translate:-50% -32px}.ch-tile{aspect-ratio:1;border:1.5px dashed color-mix(in srgb, var(--fg) 46%, transparent);background:color-mix(in srgb, var(--bg) 22%, transparent);width:clamp(50px,16cqw,72px);transition:background .16s var(--ease-ui), border-color .16s var(--ease-ui), color .16s var(--ease-ui);border-radius:12px;place-items:center;display:grid}.ch-tile svg{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;width:56%;height:56%}.ch-p[data-on] .ch-tile{border-style:solid;border-color:var(--fg);background:var(--fg);color:var(--bg)}.ch-l{font:600 12px/1.2 var(--f-sans);color:var(--fg);text-wrap:balance}:lang(ar) .ch-l{font:600 13px/1.35 var(--f-sans)}@media (min-width:1024px){.ch-l{font-size:13px}:lang(ar) .ch-l{font-size:14px}}.ch-dot{z-index:2;background:var(--world-deep);color:#fff;width:28px;height:28px;font:700 13px/1 var(--f-sans);font-variant-numeric:tabular-nums;opacity:0;box-shadow:0 0 0 2px var(--world);border-radius:50%;place-items:center;margin:-44px 0 0 18px;display:grid;position:absolute}[dir=rtl] .ch-dot{margin:-44px 0 0 -46px}.ch-ripple{z-index:1;aspect-ratio:1;border:2px solid var(--fg);opacity:0;pointer-events:none;border-radius:50%;width:clamp(90px,22%,150px);position:absolute;top:0;left:0}.ch-num{opacity:0;width:27%;height:62%;position:absolute;top:12%;left:15%}.ch-num svg{width:100%;height:100%;overflow:visible}.ch-num polyline{fill:none;stroke:var(--fg);stroke-width:27px;stroke-linejoin:miter;stroke-linecap:butt;stroke-miterlimit:6}.ch-play{z-index:3;aspect-ratio:1;cursor:pointer;opacity:0;width:38%;color:var(--teal-deep);-webkit-tap-highlight-color:transparent;place-items:center;display:grid;position:absolute;top:24%;left:47%}.ch-play .i-run,.ch-run{fill:currentColor;width:100%;height:100%}.ch-one{white-space:nowrap;font:760 clamp(1.25rem, .95rem + 1.2vw, 2rem)/1.2 var(--f-display);letter-spacing:-.02em;color:var(--fg);opacity:0;position:absolute;top:80%;left:50%;translate:-50%}:lang(ar) .ch-one{letter-spacing:0;font-weight:700;line-height:1.4}.ch-cur{z-index:4;pointer-events:none;opacity:0;will-change:transform;width:clamp(52px,13%,84px);position:absolute;top:0;left:0}.ch-cur-g{transform-origin:8% 5%;display:block}.ch-cur svg{width:100%;height:auto;display:block;overflow:visible}.ch-cur path{fill:var(--bg);stroke:var(--fg);stroke-width:3px;stroke-linejoin:round;filter:drop-shadow(0 8px 12px #0507062e)}.ch-again{min-height:44px}.ch[data-state=pre] .ch-again{visibility:hidden}@media (prefers-reduced-motion:reduce){.ch[data-state=pre] .ch-p,.ch[data-state=pre] .ch-dot{visibility:hidden}.ch[data-state=pre] :is(.ch-num,.ch-play,.ch-one){opacity:1}.ch[data-state=pre] .ch-again{visibility:visible}}