.x4{align-content:center;justify-items:center;gap:24px;min-height:100vh;padding:40px 0 44px;display:grid;position:relative;overflow:hidden}.x4__brand{color:var(--text);opacity:.92;align-items:center;gap:10px;display:flex}.x4__text{text-align:center;justify-items:center;gap:10px;width:min(640px,100% - 40px);display:grid}.x4__title{font:700 clamp(26px, 1.2vw + 17px, 36px)/1.3 var(--font-display);letter-spacing:0;text-wrap:balance;margin:0}.x4__sub{max-width:46ch;color:var(--text-2);text-wrap:pretty;margin:0;font-size:15.5px;line-height:1.75}.x4__acts{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;width:min(640px,100% - 40px);display:flex}.x4__acts .btn .ico{flex:none}.x4__acts .btn[aria-busy=true]{cursor:progress}.x4__spin{border:2px solid color-mix(in srgb, currentColor 30%, transparent);width:18px;height:18px;animation:x4-spin calc(.8s * var(--m)) linear infinite;border-top-color:currentColor;border-radius:50%;flex:none}@keyframes x4-spin{to{transform:rotate(360deg)}}.x4__status{text-align:start;width:min(520px,100% - 40px)}.x4__status>span{flex:1;min-width:0}.x4__status .btn{flex:none}.x4__foot{color:var(--text-2);text-align:center;margin:0;font-size:12.5px}@media (max-width:760px){.x4{gap:20px;padding:32px 0 36px}.x4__sub{font-size:15px}.x4__acts .btn{flex:auto;justify-content:center}}.g4__pane{--s:clamp(10px, min(2.6vw, 2.4vh), 21px);border-radius:var(--r-panel);animation:g4-pane calc(.9s * var(--m)) var(--ease-out-expo) both;animation-delay:calc(80ms * var(--m));margin:6px 0 12px;padding:clamp(18px,2.2vw,32px) clamp(20px,2.5vw,36px)}@keyframes g4-pane{0%{opacity:0;transform:translateY(26px)scale(.97)}to{opacity:1;transform:none}}.g4__board{z-index:2;width:calc(28 * var(--s));height:calc(12 * var(--s));direction:ltr;position:relative}.bd{left:calc(var(--c) * var(--s));top:calc(var(--r) * var(--s));width:var(--s);height:var(--s);display:block;position:absolute}.bd:before{content:"";background:linear-gradient(180deg, #ffffff57 0%, #ffffff1a 48%, transparent 52%), linear-gradient(180deg, color-mix(in srgb, var(--accent) 82%, #fff), var(--accent) 70%);box-shadow:inset 0 1px 1px #fff9, inset 0 -2px 4px #00000024, inset 0 0 0 .5px #ffffff40, 0 5px 10px -5px var(--accent), 0 1px 2px #0000001f;transition:transform calc(.32s * var(--m)) var(--ease-out-quart), filter calc(.32s * var(--m)) var(--ease-out-quart);border-radius:50%;position:absolute;inset:13%}.g4.is-pearl .bd.is-lit:before{background:linear-gradient(180deg, #fff6 0%, #ffffff1f 48%, transparent 52%), linear-gradient(180deg, color-mix(in srgb, var(--text) 96%, transparent), color-mix(in srgb, var(--text) 64%, transparent));box-shadow:inset 0 1px 1px #ffffffb3, inset 0 -2px 4px #00000029, inset 0 0 0 .5px #ffffff4d, 0 5px 10px -5px #000000a6, 0 0 12px color-mix(in srgb, var(--text) 14%, transparent)}.bd.is-lit:hover:before{filter:brightness(1.18)saturate(1.1);transition-duration:calc(.12s * var(--m));transform:translateY(-2px)scale(1.5)}.bd.is-off:before{background:var(--well);inset:34%;box-shadow:inset 0 1px 2px #00000059,0 1px #ffffff12}[data-theme=light] .bd.is-off:before{box-shadow:inset 0 1px 2px #0a143c33,0 1px #ffffffb3}@media (max-width:760px){.g4__pane{border-radius:var(--r-xl)}}.bd.is-ghost:before{background:var(--well);outline:2px dashed color-mix(in srgb, var(--accent-ink) 90%, transparent);outline-offset:-2px;box-shadow:inset 0 1px 3px #00000059;box-shadow:inset 0 1px 3px #00000059, 0 0 10px color-mix(in srgb, var(--accent-ink) 30%, transparent);inset:13%}@keyframes g4-in-a{0%{transform:translate(calc(var(--dx) * 1px), calc(var(--dy) * 1px)) scale(.2);opacity:0}60%{opacity:1}to{opacity:1;transform:none}}.g4.is-run-a .bd.is-lit{animation:g4-in-a calc(1.3s * var(--m)) var(--ease-out-expo) both;animation-delay:calc((calc(.38s + var(--t) * 1ms)) * var(--m))}@keyframes g4-off-a{0%{opacity:0}to{opacity:1}}.g4.is-run-a .bd.is-off,.g4.is-run-a .bd.is-ghost,.g4.is-run-a .bd.is-bar{animation:g4-off-a calc(.9s * var(--m)) var(--ease-out-quart) both;animation-delay:calc((.3s) * var(--m))}@keyframes g4-ghost-a{0%,to{opacity:.55;transform:scale(.88)}50%{opacity:1;transform:none}}.g4.is-run-a .bd.is-ghost:before{animation:g4-ghost-a calc(2.4s * var(--m)) ease-in-out infinite backwards;animation-delay:calc((calc(1.5s + (var(--c) - 10) * .12s + var(--r) * 30ms)) * var(--m))}@keyframes g4-in-b{0%{transform:translate(calc(var(--dx) * 1px), calc(var(--dy) * 1px)) scale(.2);opacity:0}60%{opacity:1}to{opacity:1;transform:none}}.g4.is-run-b .bd.is-lit{animation:g4-in-b calc(1.3s * var(--m)) var(--ease-out-expo) both;animation-delay:calc((calc(.38s + var(--t) * 1ms)) * var(--m))}@keyframes g4-off-b{0%{opacity:0}to{opacity:1}}.g4.is-run-b .bd.is-off,.g4.is-run-b .bd.is-ghost,.g4.is-run-b .bd.is-bar{animation:g4-off-b calc(.9s * var(--m)) var(--ease-out-quart) both;animation-delay:calc((.3s) * var(--m))}@keyframes g4-ghost-b{0%,to{opacity:.55;transform:scale(.88)}50%{opacity:1;transform:none}}.g4.is-run-b .bd.is-ghost:before{animation:g4-ghost-b calc(2.4s * var(--m)) ease-in-out infinite backwards;animation-delay:calc((calc(1.5s + (var(--c) - 10) * .12s + var(--r) * 30ms)) * var(--m))}