._{width:96rem}button{padding:0}.s{--border-width: 2px;--border-color: #4bb;position:relative;font-size:4rem;line-height:6rem;color:#fff;font-family:monospace;text-transform:uppercase;padding:0 4rem;text-align:center;border:var(--border-width) solid var(--border-color);border-radius:8px;box-shadow:6px 6px 12px -6px color-mix(in srgb,#4aaa,#000a 95%);box-sizing:border-box;background-color:var(--bg);-webkit-appearance:unset;-moz-appearance:unset;appearance:unset;align-items:unset;cursor:pointer;transition:border-color .1s,transform .1s}.s:disabled{cursor:default;border-color:#444}.s:active{transform:scale(.97)}.s:hover{background-color:color-mix(in srgb,var(--bg),var(--border-color) 2%)}.p{position:relative;aspect-ratio:1;background-color:var(--bg);padding:0}.q{border:2px solid transparent}.r{position:relative;overflow:hidden}.H{display:flex;flex-direction:column;align-items:flex-end}.I{font-size:3rem;line-height:6rem;color:#888;font-family:monospace}.J{display:flex;gap:1rem}.K{height:2rem;width:2rem;flex:1;border:1px solid #555;border-radius:1rem}.L{background-color:#20f86c44;border-color:#20f86c}.u{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(2 * var(--gap))}.u .v{aspect-ratio:1;font-size:8rem}.E{display:block;margin:2px}.F{position:absolute;top:0}.G{stroke:#eee;stroke-width:.2;stroke-linecap:round;stroke-linejoin:round;fill:none}.w{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}.x{position:relative}.y{position:absolute;top:0;height:100%;width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}.z{grid-column-start:1;grid-row-start:1;background-image:url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%2320f86c' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");margin:var(--gap)}.A{grid-column-start:2;grid-column-end:5;grid-row-start:1;background-image:url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23b50000' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");margin:var(--gap)}.B{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}.C{box-shadow:inset 0 0 0 1px #20f86c}.D{box-shadow:inset 0 0 0 1px #b50000}.a{padding:2rem 0}.m{--border-color: #4bb;list-style-type:none;margin:0;padding:0;display:flex;gap:var(--gap);box-shadow:0 -2px 0 0 var(--border-color) inset}.n{padding:0;width:9rem;height:9rem;border-radius:8px 8px 0 0}.n:active{transform:none}.o{border-bottom-color:transparent}.b{position:sticky;top:0;background-color:var(--bg);padding:var(--gap) 0;display:flex;flex-direction:column;gap:var(--gap);z-index:1;--fh: calc(var(--gap) + .333 * (96rem - 2 * var(--gap)))}.c{display:flex;justify-content:space-between;align-items:center}.d{padding:0;width:9rem;height:9rem}.e{background-color:var(--bg);position:relative;--fh: calc(var(--gap) + .333 * (96rem - 2 * var(--gap)))}.f{margin-bottom:2rem}.g{--border-color: #b50000;animation-name:g;animation-timing-function:ease;animation-duration:var(--dur)}.h{--border-color: #20f86c;animation-name:h;animation-timing-function:cubic-bezier(.22,.61,.36,1);animation-duration:var(--dur);z-index:999}.i{font-size:5rem;color:#fff;font-family:monospace;text-transform:uppercase;display:block;text-align:center;line-height:22.5rem}@keyframes g{0%{transform:translate(0)}25%{transform:translate(1rem)}50%{transform:translate(-1rem)}75%{transform:translate(1rem)}to{transform:translate(0)}}@keyframes h{0%{transform:scale(1)}10%{transform:scale(1.3)}to{transform:scale(1)}}.b .j,.e .j{transform:translateY(calc(-1 * var(--fh)));animation-name:j;animation-fill-mode:forwards;animation-duration:var(--dur);animation-delay:var(--del);animation-timing-function:ease-out}@keyframes j{0%{transform:translateY(calc(-1 * var(--fh)))}to{transform:translateY(0)}}.b .k,.e .k{animation-name:k;animation-fill-mode:forwards;animation-duration:var(--dur);animation-delay:var(--del);animation-timing-function:ease-out}@keyframes k{0%{transform:translateY(0)}to{transform:translateY(var(--fh))}}.e .l{animation-name:l;animation-duration:var(--dur);animation-timing-function:ease-out}@keyframes l{0%{clip-path:inset(0 0 calc(var(--gap) + var(--fh)))}to{clip-path:inset(0 0 var(--gap))}}