@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-font-weight:initial}}}:root{--t-size:20px;--t-step:.1s;--t-steps:20;--t-speed:calc(var(--t-step) * var(--t-steps));--t-blow:2s;--t-blow-time:20}.transparent-pattern{background-color:#fffc;background-image:linear-gradient(45deg,#0000001a 25%,#0000 25% 75%,#0000001a 75%),linear-gradient(-45deg,#0000001a 25%,#0000 25% 75%,#0000001a 75%);background-size:20px 20px}.tetris{border-style:var(--tw-border-style);--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color:oklch(55.2% .016 285.938);border-width:1px;border-color:#0000;position:relative;overflow:hidden}@supports (color:color-mix(in lab,red,red)){.tetris{--tw-shadow-color:color-mix(in oklab, var(--color-zinc-500,oklch(55.2% .016 285.938)) var(--tw-shadow-alpha), transparent)}}.tetris{width:calc(var(--t-size) * 8 + 2px);height:calc(var(--t-size) * 20 + 2px);background-size:var(--t-size) var(--t-size)}.holder{width:calc(var(--t-size) * 4);height:calc(var(--t-size) * 4);left:var(--xx);animation:moveY var(--t-speed) steps(var(--t-steps)) forwards;animation-timing-function:step-start;animation-delay:var(--dd);opacity:0;position:absolute}.shift-y{width:100%;height:100%;transform:translateY(var(--yy))}.rotator{width:100%;height:100%;animation:turn var(--t-step) ease-in-out var(--r-delay,0s) forwards}.shift-x{width:100%;height:100%;animation:move var(--t-step) ease-in-out var(--m-delay,0s) forwards}.square{width:calc(var(--t-size));height:calc(var(--t-size));left:var(--xx);top:var(--yy);border-style:solid;border-width:1px;position:absolute}.gameover{width:calc(var(--t-size));height:calc(var(--t-size));border-style:solid;border-width:1px}.blow{animation:blowThenRemove var(--t-blow) ease-in-out forwards;animation-delay:var(--b-delay,0s)}.shift-y-plus{animation:shiftYplus var(--t-blow) ease-in-out forwards;animation-delay:var(--b-delay,0s)}.shift-x-plus{animation:shiftXplus var(--t-blow) ease-in-out forwards;animation-delay:var(--b-delay,0s)}.shift-x-minus{animation:shiftXminus var(--t-blow) ease-in-out forwards;animation-delay:var(--b-delay,0s)}@keyframes blowThenRemove{0%{opacity:1;filter:blur();transform:scale(1)}12.5%{opacity:.25}25%{opacity:1}37.5%{opacity:.25}50%{opacity:1}62.5%{opacity:.25}75%{opacity:1;filter:blur();transform:scale(1)}to{opacity:0;filter:blur(4px);transform:scale(0)}}@keyframes shiftYplus{0%,75%{transform:translate(0)}to{transform:translateY(var(--t-size))}}@keyframes shiftXplus{0%,75%{transform:translate(0)}to{transform:translate(var(--t-size))}}@keyframes shiftXminus{0%,75%{transform:translate(0)}to{transform:translate(calc(-1 * var(--t-size)))}}.square.i,.gameover.i{border-color:var(--color-orange-200,oklch(90.1% .076 70.697));background-color:var(--color-orange-500,oklch(70.5% .213 47.604))}.square.o,.gameover.o{border-color:var(--color-yellow-100,oklch(97.3% .071 103.193));background-color:var(--color-yellow-300,oklch(90.5% .182 98.111))}.square.j,.gameover.j{border-color:var(--color-lime-200,oklch(93.8% .127 124.321));background-color:var(--color-lime-500,oklch(76.8% .233 130.85))}.square.l,.gameover.l{border-color:var(--color-blue-200,oklch(88.2% .059 254.128));background-color:var(--color-blue-500,oklch(62.3% .214 259.815))}.square.z,.gameover.z{border-color:var(--color-sky-200,oklch(90.1% .058 230.902));background-color:var(--color-sky-500,oklch(68.5% .169 237.323))}.square.s,.gameover.s{border-color:var(--color-purple-200,oklch(90.2% .063 306.703));background-color:var(--color-purple-500,oklch(62.7% .265 303.9))}.square.t,.gameover.t{border-color:var(--color-red-200,oklch(88.5% .062 18.334));background-color:var(--color-red-500,oklch(63.7% .237 25.331))}.square.x,.gameover.x{border-color:var(--color-teal-200,oklch(91% .096 180.426));background-color:var(--color-teal-500,oklch(70.4% .14 182.503));font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);color:var(--color-white,#fff)}@keyframes turn{0%{transform:rotate(0)}to{transform:rotate(var(--r-angle,0deg))}}@keyframes move{0%{transform:translate(0)}to{transform:translate(var(--m-xx,0)) translateY(var(--m-yy,0))}}@keyframes moveY{0%{transform:translateY(calc(var(--t-size) * -1));opacity:0}5%{opacity:1;transform:translateY(0)}10%{transform:translateY(calc(var(--t-size) * 1))}15%{transform:translateY(calc(var(--t-size) * 2))}20%{transform:translateY(calc(var(--t-size) * 3))}25%{transform:translateY(calc(var(--t-size) * 4))}30%{transform:translateY(calc(var(--t-size) * 5))}35%{transform:translateY(calc(var(--t-size) * 6))}40%{transform:translateY(calc(var(--t-size) * 7))}45%{transform:translateY(calc(var(--t-size) * 8))}50%{transform:translateY(calc(var(--t-size) * 9))}55%{transform:translateY(calc(var(--t-size) * 10))}60%{transform:translateY(calc(var(--t-size) * 11))}65%{transform:translateY(calc(var(--t-size) * 12))}70%{transform:translateY(calc(var(--t-size) * 13))}75%{transform:translateY(calc(var(--t-size) * 14))}80%{transform:translateY(calc(var(--t-size) * 15))}85%{transform:translateY(calc(var(--t-size) * 16))}90%{transform:translateY(calc(var(--t-size) * 17))}95%{transform:translateY(calc(var(--t-size) * 18))}to{transform:translateY(calc(var(--t-size) * 19));opacity:1}}.gameover-container>*{animation:.2s both reveal;animation-delay:var(--i);will-change:transform}@keyframes reveal{0%{opacity:0;transform:translateY(10px)scale(1)}to{opacity:1;transform:translateY(0)scale(1)}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-font-weight{syntax:"*";inherits:false}