.Board{--board-size: 3;display:inline-grid;grid-template-columns:repeat(var(--board-size),1fr);grid-template-rows:repeat(var(--board-size),1fr);gap:6px;padding:1rem;border-radius:var(--radius);background-color:#ffffff80}.Button{text-transform:uppercase;letter-spacing:.1ch;padding:.5em .8em;border:2px solid var(--color-subtle);color:var(--color-subtle);font-size:14px;cursor:pointer}.Button:not(:disabled):hover{border-color:var(--color-normal);color:var(--color-normal)}.Button:not(:disabled):active{border-color:var(--color-strong);color:var(--color-strong)}.Button:disabled{cursor:default;opacity:.3}.Counter{display:flex;align-items:center}.Counter span{display:block;width:1.5em;text-align:center;color:var(--color-normal)}.Field{display:flex;justify-content:center;align-items:center;width:2em;height:2em;border-radius:var(--radius);-webkit-user-select:none;user-select:none;font-size:2rem;font-weight:700;background-color:var(--color-bg);color:var(--color-strong);transition-property:transform,opacity,box-shadow;transition-duration:.1s;transition-timing-function:ease-out;cursor:pointer}.Field:hover{border:2px solid var(--color-strong)}.Field:not([data-correct=true]){box-shadow:0 4px 0 var(--color-strong),0 0 6px #000c;transform:rotate(var(--rotation, 0deg))}.Field[data-correct=true]{box-shadow:none;opacity:75%}.Header{--color-bg: var(--c-gray-dark);--color-strong: var(--c-white);--color-normal: var(--c-gray-subtle);--color-subtle: var(--c-gray-middle);--color-primary: var(--c-blue);--color-yes-light: var(--c-green);--color-yes-dark: var(--c-green-middle);display:flex;align-items:center;gap:2rem;padding:2rem;background-color:var(--color-bg);color:var(--color-normal)}.Header__Title{text-transform:uppercase;letter-spacing:.1ch;flex-grow:1;font-weight:700}.Header__Tools{display:flex;gap:2rem;flex-grow:0}.Lamp{display:flex;align-items:center;gap:.5rem}.Lamp .Lamp__Indicator{display:block;width:.7rem;height:.7rem;border:2px solid var(--color-subtle);border-radius:1rem;transition-property:border-color,background-color,box-shadow,opacity;transition-duration:.5s;transition-timing-function:cubic-bezier(.165,.84,.44,1)}.Lamp .Lamp__Label{text-transform:uppercase;letter-spacing:.1ch;display:block;font-size:14px;transition-property:color,opacity;transition-duration:.5s;transition-timing-function:cubic-bezier(.165,.84,.44,1)}.Lamp[data-state=on] .Lamp__Indicator{border-color:transparent;background-color:var(--color-yes-light);box-shadow:0 0 30px 5px #ffffff1a,0 0 25px 1px var(--color-yes-light)}.Lamp[data-state=on] .Lamp__Label{color:var(--color-strong)}.Lamp[data-state=off] .Lamp__Indicator{opacity:.3}.Lamp[data-state=off] .Lamp__Label{color:var(--color-subtle);opacity:.3}.Player{align-self:center;justify-self:center;display:flex;justify-content:center;align-items:center;background-color:transparent;font-size:3em}.Player[data-direction=up]{transform:rotate(180deg)}.Player[data-direction=left]{transform:rotate(90deg)}.Player[data-direction=right]{transform:rotate(270deg)}*,*:before,*:after{box-sizing:inherit;padding:0;margin:0;border:0;background-color:transparent;color:currentColor;font-size:100%;font-family:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;-webkit-user-select:inherit;user-select:inherit}html{box-sizing:border-box;line-height:1}ol,ul,menu{list-style:none}blockquote{quotes:none}blockquote:before,blockquote:after{content:none}:root{--c-white: white;--c-gray-subtle: #ddd;--c-gray-middle: #888;--c-gray-dark: #333;--c-blue: rgb(38, 144, 224);--c-green: rgb(170, 255, 0);--c-green-middle: rgb(153, 193, 73);--radius: 5px}html{--color-bg: var(--c-white);--color-strong: var(--c-gray-dark);--color-normal: var(--c-gray-middle);--color-subtle: var(--c-gray-subtle);--color-primary: var(--c-blue);--color-yes-light: var(--c-green);--color-yes-dark: var(--c-green-middle);background-color:var(--color-primary);font-family:Rubik,sans-serif;font-optical-sizing:auto;font-size:18px;-webkit-user-select:none;user-select:none;min-height:100vh}body,#root{height:100vh}#root{display:flex;flex-direction:column}main{padding:2rem;display:flex;justify-content:center;align-items:center;flex-grow:1}footer{padding:1rem;text-align:right}footer svg{height:2rem;fill:currentcolor}footer a{color:#0000007f}footer a:hover{color:#000}