body{position:fixed;width:100%;margin:0;touch-action:manipulation;display:flex;flex-direction:column;justify-content:space-around;height:100vh}body,input,button{font-family:iosevka ss05,Menlo,Andale Mono,monospace}#app{height:100vh;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box}.main{flex:1;display:flex;flex-direction:column;justify-content:center;width:96%;max-height:96vh;margin:2.6em auto 4.2em}.automata-container{height:32vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}@media (min-width: 480px){.automata-container{flex:1;height:auto}}.automata{width:100%;max-width:120vh;margin:0 auto}.automata .cell{border-left:1px solid #eee;border-top:1px solid #eee;box-sizing:border-box}.automata .cell.is-last-column{border-right:1px solid #eee}.automata .cell.is-last-row{border-bottom:1px solid #eee}.hide-borders .cell{border:none!important}svg{width:100%}@media (min-width: 480px){.controllers{display:flex;width:100%;margin:0 auto;max-width:650px;justify-content:space-around}}.controller{align-self:center;text-align:center}.controller+.controller{margin-top:.6em}@media (min-width: 480px){.controller+.controller{margin-top:0}}.controller h2{font-size:14px;margin:0 auto .6em}@media (min-width: 480px){.controller h2{margin:0 auto 1em}}.stats{font-size:12px;text-align:center;display:none;color:#ccc;width:100%}@media (min-width: 480px){.stats{display:block}}.stats.left{float:left;width:40%}.stats.right{float:right;width:40%}.inc-text-input-dec{align-self:center}input{margin:0 1em;padding:10px;color:#000;letter-spacing:.16em;text-transform:uppercase;font-size:12px;font-weight:700;background:#fff;border:1px solid;border-radius:0;width:40px;text-align:center;-webkit-appearance:none;-moz-appearance:none;appearance:none}button{display:inline-block;padding:10px 20px;color:#fff;letter-spacing:.16em;text-transform:uppercase;font-size:12px;font-weight:700;background:#000;border:1px solid transparent}button:focus{outline:none;position:relative}button:focus:after{content:"";display:block;position:absolute;top:-5px;left:-6px;width:calc(100% + 10px);height:calc(100% + 8px);border:1px solid #e2e2e2}button:hover{color:#000;background:#fff;cursor:pointer;border:1px solid}button.inactive{opacity:.2;cursor:default;pointer-events:none}.rules{display:flex;flex-direction:row;justify-content:center;width:100%;max-width:650px;margin:1em auto 0}@media (min-width: 480px){.rules{margin-top:2em}}.rule{display:grid;grid-template-columns:repeat(3,33.333%);position:relative;top:0;width:100%;margin:0 .2em;padding:.2em;border:1px solid transparent;cursor:pointer;transition:all .5s cubic-bezier(.3,.8,.1,.95)}.rule:hover{top:-5px}@media (min-width: 480px){.rule{margin:0 .35em;padding:.3em}}@media (min-width: 768px){.rule{margin:0 .5em;padding:.4em}}.rule:first-child{margin-left:0}.rule:last-child{margin-right:0}.rule svg{border-left:1px solid #e2e2e2;border-top:1px solid #e2e2e2;border-bottom:1px solid #e2e2e2}.rule svg:nth-child(3){border-right:1px solid #e2e2e2}.rule svg:nth-child(4),.rule svg:nth-child(6){border-top:none;border-left:none;border-bottom:none}.rule svg:nth-child(5){border-top:none}.rule svg:nth-child(6){border-left:1px solid #e2e2e2}.fade-in-1{transition:opacity 1.2s ease-in-out;opacity:0}.fade-in-2{transition:opacity 3s ease-in-out;opacity:0}.has-initially-loaded,.has-initially-loaded .fade-in-1,.has-initially-loaded .fade-in-2{opacity:1}#automata-grid{width:100%;max-width:120vh;margin:0 auto}#automata-grid canvas{width:100%;height:auto;display:block;margin:0 auto}