._{width:96rem}button{padding:0}.u{--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}.u:disabled{cursor:default;border-color:#444}.u:active{transform:scale(.97)}.u:hover{background-color:color-mix(in srgb,var(--bg),var(--border-color) 2%)}.O{position:relative;aspect-ratio:1;background-color:var(--bg);padding:0}.P{border:2px solid transparent}.Q{position:relative;overflow:hidden}.x{display:flex;flex-direction:column;align-items:flex-end}.y{font-size:3rem;line-height:6rem;color:#888;font-family:monospace}.z{display:flex;gap:1rem}.A{height:2rem;width:2rem;flex:1;border:1px solid #555;border-radius:1rem}.B{background-color:#20f86c44;border-color:#20f86c}.v{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(2 * var(--gap))}.v .w{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}.C{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}.H{position:relative}.I{position:absolute;top:0;height:100%;width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}.J{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)}.K{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)}.L{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}.M{box-shadow:inset 0 0 0 1px #20f86c}.N{box-shadow:inset 0 0 0 1px #b50000}.a{padding:2rem 0}.r{--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}.s{padding:0;width:9rem;height:9rem;border-radius:8px 8px 0 0}.s:active{transform:none}.t{border-bottom-color:transparent}.g{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)))}.h{display:flex;justify-content:space-between;align-items:center}.i{padding:0;width:9rem;height:9rem}.j{background-color:var(--bg);position:relative;--fh: calc(var(--gap) + .333 * (96rem - 2 * var(--gap)))}.k{margin-bottom:2rem}.l{--border-color: #b50000;animation-name:l;animation-timing-function:ease;animation-duration:var(--dur)}.m{--border-color: #20f86c;animation-name:m;animation-timing-function:cubic-bezier(.22,.61,.36,1);animation-duration:var(--dur);z-index:999}.n{font-size:5rem;color:#fff;font-family:monospace;text-transform:uppercase;display:block;text-align:center;line-height:22.5rem}@keyframes l{0%{transform:translate(0)}25%{transform:translate(1rem)}50%{transform:translate(-1rem)}75%{transform:translate(1rem)}to{transform:translate(0)}}@keyframes m{0%{transform:scale(1)}10%{transform:scale(1.3)}to{transform:scale(1)}}.g .o,.j .o{transform:translateY(calc(-1 * var(--fh)));animation-name:o;animation-fill-mode:forwards;animation-duration:var(--dur);animation-delay:var(--del);animation-timing-function:ease-out}@keyframes o{0%{transform:translateY(calc(-1 * var(--fh)))}to{transform:translateY(0)}}.g .p,.j .p{animation-name:p;animation-fill-mode:forwards;animation-duration:var(--dur);animation-delay:var(--del);animation-timing-function:ease-out}@keyframes p{0%{transform:translateY(0)}to{transform:translateY(var(--fh))}}.j .q{animation-name:q;animation-duration:var(--dur);animation-timing-function:ease-out}@keyframes q{0%{clip-path:inset(0 0 calc(var(--gap) + var(--fh)))}to{clip-path:inset(0 0 var(--gap))}}.b{padding:2rem 0;margin:2rem;display:flex;flex-direction:column;gap:var(--gap);position:absolute;left:0;width:96vw}.c{display:flex;align-items:center}.d{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}.e{display:flex;flex-direction:column;gap:var(--gap);background-color:var(--bg);border:1px solid #333;padding:var(--gap)}.f{font-family:monospace;font-size:1.8rem;color:#fff;margin:0}