::after,::before,:after,:before{box-sizing:border-box}body,html{margin:0;height:100%;width:100%}body.easy{background:#303f9f}body.easy a{color:#303f9f}body.easy button.solve{background:#303f9f}body.easy button.solve.focused{background:#1a237e}body.medium{background:#f57c00}body.medium a{color:#f57c00}body.medium button.solve{background:#f57c00}body.medium button.solve.focused{background:#e65100}body.hard{background:#388e3c}body.hard a{color:#388e3c}body.hard button.solve{background:#388e3c}body.hard button.solve.focused{background:#1b5e20}button,h1,p,td{font-family:Roboto,'Helvetica Neue',sans-serif;-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:gray-antialias;-webkit-user-select:none;user-select:none;cursor:default}body{display:flex;align-items:center;justify-content:center;background:#444;-webkit-transition:background .2s linear;-moz-transition:background .2s linear;transition:background .2s linear}body.correct #grid,body.correct td,body.correct tr{border-color:#1b5e20!important}body.incorrect #grid,body.incorrect td,body.incorrect tr{border-color:#e53935!important}body.incorrect a,body.incorrect td{color:#e53935}body.incorrect button.solve{background:#e53935}body #app{background:#fff;box-shadow:0 0 10px rgba(0,0,0,.4)}body #app>div{padding:1.5em}body #app>div kbd{border:1px solid #000;border-radius:3px;padding:2px 4px;margin:3px;background:rgba(100,100,100,.1);font-family:'Roboto Mono',Consolas,monospace;font-weight:400}body #app>div .solve kbd{color:#fff;border-color:#fff}body #app>div .top{text-align:center}body #app>div .top h1{margin:0}body #app>div #grid,body #app>div a,body #app>div td,body #app>div tr{-webkit-transition:all .2s linear;-moz-transition:all .2s linear;transition:all .2s linear}body #app>div .grid{padding:0 1.5em;margin:1.5em 0}body #app>div .grid #grid{border-collapse:collapse;border:2px solid #000;border-radius:5px;margin:0 auto}body #app>div .grid #grid tr:nth-child(3),body #app>div .grid #grid tr:nth-child(6){border-bottom:2px solid #000}body #app>div .grid #grid td:nth-child(3),body #app>div .grid #grid td:nth-child(6){border-right:2px solid #000}body #app>div .grid #grid td{width:30px;height:30px;line-height:30px;vertical-align:middle;margin:0 auto;border:1px solid #000;text-align:center}body #app>div .grid #grid td.active{background:rgba(0,0,0,.1)}body #app>div .grid #grid td.guide{font-weight:bolder}body #app>div .controls>button:nth-child(2){margin-left:.225em;margin-right:.225em}body #app>div .controls button:not(.solve){background:#fff;color:#000;width:-webkit-calc(33.3% - .15em);width:calc(33.3% - .15em);margin-bottom:.5em}body #app>div .controls button:not(.solve).focused{background:#ddd}body #app>div .controls button.solve{color:#fff;width:100%;margin-bottom:1em}body #app>div .controls button{display:inline-block;float:left;-webkit-transition:all .2s linear;-moz-transition:all .2s linear;transition:all .2s linear;border:none;border-radius:4px;padding:.7em 0;text-transform:uppercase;font-weight:700;cursor:pointer;-webkit-outline:none;-moz-outline:none;outline:0}body #app>div .controls button:hover{box-shadow:1px 2px 8px rgba(0,0,0,.4)}body #app>div .bottom{margin-top:1.5em;text-align:center}body #app>div .bottom p{font-size:.7em;font-weight:700}body #app>div .bottom a{text-decoration:none}