body,html{margin:0;padding:0;font-size:16px;font-family:'Lucida Sans','Lucida Sans Regular','Lucida Grande','Lucida Sans Unicode',Geneva,Verdana,sans-serif;color:#fff;background-color:#1a1a1a;touch-action:manipulation}.app{width:100vw;height:100dvh;max-width:100vw;background-color:#2a2a2a;display:flex;flex-direction:column;justify-content:flex-start;touch-action:manipulation;overflow:hidden;white-space:nowrap}.app .board{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;width:100%;height:85dvh;background-color:#3a3a3a;z-index:90;touch-action:manipulation}.app .board .row{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;width:calc((100dvh / 8) * 5);height:12.5%;overflow:hidden;white-space:nowrap;gap:0;opacity:.8;touch-action:manipulation}.app .board .row.selected{opacity:1}.app .board .row .cell-block{justify-content:center;align-items:center;width:calc(12.5dvh * 5);height:100%;display:none;content-visibility:hidden;transition:.3s}.app .board .row .cell-block.show{justify-content:center;align-items:center;width:calc(12.5dvh * 5);height:100%;display:flex;content-visibility:visible}.app .board .row .cell-block.slide-right{margin-right:calc(12.5dvh * 10 * -1)}.app .board .row .cell-block.slide-left{margin-left:calc(12.5dvh * 10 * -1)}.app .board .row .cell-block.off-left{margin-left:calc(12.5dvh * 5 * -1)}.app .board .row .cell-block.off-left.on-left{margin-left:calc(12.5dvh * 5 * 1)}.app .board .row .cell-block.off-right{margin-right:calc(12.5dvh * 5 * -1)}.app .board .row .cell{display:flex;width:20vw;max-width:12.5dvh;height:100%;justify-content:center;align-items:center;touch-action:manipulation}.app .board .row .cell:hover{background-color:#7a7a7a}.app .board .cell-image{width:100%;height:100%;touch-action:manipulation}.app .controls{display:flex;justify-content:center;align-items:center;min-width:100%;height:15dvh;z-index:90;touch-action:manipulation}.app .controls .control-bar{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:center;width:calc((100dvh / 8) * 5);height:100%;gap:0;touch-action:manipulation}.app .controls .control-bar .control{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;touch-action:manipulation}.app .controls .control-button{display:flex;flex-direction:row;justify-content:center;align-items:center;font-size:1.5rem;width:40px;height:80%;max-height:50px;min-height:40px;border:none;outline:0;border-radius:8px;touch-action:manipulation;color:#111}.app .controls .control-button:hover{cursor:pointer;background-color:#fafafa}.app .controls .control-button:disabled{cursor:default;background-color:#5f5f5f}.app .controls .control-button:disabled:hover{cursor:default;background-color:#8a8a8a}.app .video-section{position:absolute;top:0;left:0;width:100vw;height:85dvh;z-index:99;display:none;content-visibility:hidden}.app .video-section.show{display:flex;justify-content:center;align-items:center;content-visibility:visible}.app .video-section .video-container{width:calc(12.5dvh * 5);height:85dvh;background-color:#0a0a0a;display:flex;justify-content:center;align-items:center}.app .video-section .video-container video{width:auto;height:100%}@media screen and (min-width:600px){.app .board .row .cell{max-width:12.5dvh}}@media screen and (min-width:600px) and (min-height:600px){.app .controls .control-bar{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:center;width:calc((100dvh / 8) * 5);height:100%;gap:0}.app .controls .control-bar .control{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.app .controls .control-button{font-size:2rem;width:60px;height:60%;max-height:60px;min-height:50px}}