.l{--offset: 6px;--border-width: 2px;--border-color: #eee;--clip-width: calc(var(--offset) - var(--border-width));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);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 50ms}.l:disabled{cursor:default;border-color:#444}.l:before{position:absolute;top:0;left:0;transform:translate(calc(-1 * var(--offset)),calc(-1 * var(--offset)));content:"";-webkit-mask-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='%23ffffff' fill-rule='evenodd'%3E%3Cpath d='M3 0h-3L6 6V3zM0 3v3H3z'/%3E%3C/g%3E%3C/svg%3E");mask-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='%23ffffff' fill-rule='evenodd'%3E%3Cpath d='M3 0h-3L6 6V3zM0 3v3H3z'/%3E%3C/g%3E%3C/svg%3E");background-color:var(--border-color);width:calc(100% + 2 * var(--border-width));height:calc(100% + 2 * var(--border-width));clip-path:polygon(0 0,0 100%,var(--clip-width) 100%,var(--clip-width) var(--clip-width),100% var(--clip-width),100% 0);transition:background-color .1s,transform 50ms,clip-path 50ms}:is():disabled{background-image:none}.l:hover{background-color:#fff1}.l:active{transform:translate(-2px,-2px)}.l:active:before{transform:translate(0);clip-path:polygon(0 0,0 100%,0 100%,0 0,100% 0,100% 0)}.m{position:relative;aspect-ratio:1;background-color:var(--bg);padding:0}.n{border:2px solid transparent}.o{position:relative;overflow:hidden}.p{display:flex;gap:1rem}.q{height:4rem;width:4rem;flex:1;border:1px solid #444}.r{background-color:#20f86c44;border-color:#20f86c}.t{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(2 * var(--gap))}.t .u{aspect-ratio:1;font-size:8rem}.v{display:block;margin:2px}.w{position:absolute;top:0}.x{stroke:#eee;stroke-width:.2;stroke-linecap:round;stroke-linejoin:round;fill:none}.y{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}.z{position:relative}.A{position:absolute;top:0;height:100%;width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}.B{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)}.C{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)}.D{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}.E{box-shadow:inset 0 0 0 1px #20f86c}.F{box-shadow:inset 0 0 0 1px #b50000}.a{padding:2rem 0}.b{position:sticky;top:0;background-color:var(--bg);padding:2rem 0;display:flex;flex-direction:column;gap:2rem;z-index:1;--fh: calc(var(--gap) + .333 * (96rem - 2 * var(--gap)))}.c{height:10rem;display:flex;justify-content:space-between;align-items:center}.d{background-color:var(--bg);position:relative;--fh: calc(var(--gap) + .333 * (96rem - 2 * var(--gap)))}.e{margin-bottom:2rem}.f{--border-color: #b50000;animation-name:f;animation-timing-function:ease;animation-duration:var(--dur)}.g{--border-color: #20f86c;animation-name:g;animation-timing-function:cubic-bezier(.22,.61,.36,1);animation-duration:var(--dur);z-index:999}.h{font-size:5rem;color:#fff;font-family:monospace;text-transform:uppercase;display:block;text-align:center;line-height:22.5rem}@keyframes f{0%{transform:translate(0)}25%{transform:translate(1rem)}50%{transform:translate(-1rem)}75%{transform:translate(1rem)}to{transform:translate(0)}}@keyframes g{0%{transform:scale(1)}10%{transform:scale(1.3)}to{transform:scale(1)}}.b .i,.d .i{transform:translateY(calc(-1 * var(--fh)));animation-name:i;animation-fill-mode:forwards;animation-duration:var(--dur);animation-delay:var(--del);animation-timing-function:ease-out}@keyframes i{0%{transform:translateY(calc(-1 * var(--fh)))}to{transform:translateY(0)}}.b .j,.d .j{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(0)}to{transform:translateY(var(--fh))}}.d .k{animation-name:k;animation-duration:var(--dur);animation-timing-function:ease-out}@keyframes k{0%{clip-path:inset(0 0 calc(var(--gap) + var(--fh)))}to{clip-path:inset(0 0 var(--gap))}}._{width:96rem}button{padding:0}