:root{color-scheme:light dark;--menu-color: #fff;--checkbox-color: #000;--checkbox-color-red: #D64C4C;--checkbox-color-green: #A1B16D;--retro-button-color: #11c1db;--retro-info-color: #ffb23e}*,*:after,*:before{box-sizing:border-box}html{font-family:VT323,monospace;font-size:max(20px,1rem);letter-spacing:.05rem}body{margin:0;background-color:#fff;height:100svh;overflow:hidden;display:flex;flex-direction:row-reverse}h1,h2,h3,h4,h5,h6,p{margin:0}main{width:100%;height:100%;flex-shrink:0;position:relative;-webkit-user-select:none;user-select:none}main *{position:absolute;left:50%;top:50%;translate:-50% -50%}button,input,label{cursor:pointer;font-family:inherit;font-size:inherit}label{display:flex;flex-direction:column-reverse;align-items:center;white-space:nowrap}.input-group{display:flex;gap:.5rem;align-items:center;justify-content:space-between;width:100%}body:has(nav.right){direction:rtl}nav{transition:transform .3s ease-in-out;display:flex;flex-direction:row-reverse;align-items:center;transform:translate(20px);filter:drop-shadow(0px 3px 3px rgb(0,0,0,.5));pointer-events:none;z-index:10}nav *{pointer-events:all}nav.right{flex-direction:row;direction:ltr;transform:translate(-20px)}nav.open{transform:translate(calc(100% - 1px))}nav.right.open{transform:translate(calc(-100% + 1px))}#toggle-nav{display:flex;justify-content:center;position:relative;padding:48px 6px;background-color:var(--menu-color);border:none;width:20px;border-top-right-radius:14px;border-bottom-right-radius:14px;transition:opacity .1s ease-in-out;opacity:.5;transform:translate(-1px)}#toggle-nav #left,#toggle-nav #right{position:absolute;left:0;width:15px;height:50px;overflow:hidden}#toggle-nav #left{bottom:100%;transform:translateY(1px)}#toggle-nav #right{top:100%;transform:translateY(-1px)}#toggle-nav #left:after,#toggle-nav #right:after{box-sizing:content-box;position:absolute;right:0;content:"";height:102px;width:40px;border-radius:50%;border:20px solid var(--menu-color)}#toggle-nav #left:after{top:0;transform:translate(50%,-50%)}#toggle-nav #right:after{bottom:0;transform:translate(50%,50%)}nav.right #toggle-nav{rotate:180deg}#toggle-nav svg{flex-shrink:0;rotate:90deg;transition:transform .3s ease-in-out}nav.open #toggle-nav svg{transform:rotateX(180deg)}nav.open #toggle-nav,#toggle-nav:hover,#toggle-nav:focus,#toggle-nav:active{opacity:1}nav .container{height:100%;padding:2rem 1rem;background-color:var(--menu-color);overflow-y:auto;position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-between}nav .container>*+*{margin-top:2rem}#controls,#configuration{display:flex;flex-direction:column;gap:.5rem;align-items:center}.modal{background-color:#0009;position:absolute;width:100vw;height:100svh;z-index:20;display:grid;place-content:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);padding:4rem 2rem}.modal .content{background-color:var(--menu-color);border:5px solid rgb(165,165,165);margin-inline:auto;max-width:max(50%,720px);padding:1rem 2rem;overflow-y:auto;position:relative;z-index:1}.modal .content{display:flex;flex-direction:column;gap:1rem}.modal section h2{margin-block:1rem}.sticky{position:sticky;top:0;height:0}.sticky button{display:block;margin-left:100%;background-color:transparent;border:none;font-size:1.5rem;padding:0}.modal:not(.open){display:none}#board-canvas{transition:box-shadow .1s ease-in-out}#grid-canvas{pointer-events:none;z-index:5;box-shadow:0 0 0 1px #fffa}button.retro{flex-shrink:0;text-decoration:none;text-transform:uppercase;border:none;padding-inline:.75rem;height:1.5rem;box-shadow:0 1px #0003,1px 0 #00000080,1px 1px 0 0 var(--retro-button-color),1px 2px #0003,2px 1px #00000080,2px 2px 0 0 var(--retro-button-color),2px 3px #0003,3px 2px #00000080,3px 3px 0 0 var(--retro-button-color),3px 4px #0003,4px 3px #00000080,4px 4px 0 0 var(--retro-button-color),4px 5px #0003,5px 4px #00000080,5px 5px 0 0 var(--retro-button-color);position:relative;user-select:none;-webkit-user-select:none;touch-action:manipulation;background-color:var(--retro-button-color);text-wrap:nowrap}button.retro[type=info]{background-color:var(--retro-info-color);box-shadow:0 1px #0003,1px 0 #00000080,1px 1px 0 0 var(--retro-info-color),1px 2px #0003,2px 1px #00000080,2px 2px 0 0 var(--retro-info-color),2px 3px #0003,3px 2px #00000080,3px 3px 0 0 var(--retro-info-color),3px 4px #0003,4px 3px #00000080,4px 4px 0 0 var(--retro-info-color),4px 5px #0003,5px 4px #00000080,5px 5px 0 0 var(--retro-info-color)}button.retro:after{z-index:-1;content:"";position:absolute;width:calc(100% + 6px);height:calc(100% + 6px);border:3px solid black;background-color:var(--retro-button-color);top:2px;left:2px}button.retro[type=info]:after{background-color:var(--retro-info-color)}button.retro:active:after{top:-3px;left:-3px}button.retro:active{box-shadow:none;top:5px;left:5px}input[type=checkbox]{display:none}label:has(input[type=checkbox]){height:1.5rem;aspect-ratio:2;background-color:var(--checkbox-color);position:relative;box-shadow:0 1px #0003,1px 0 #00000080,1px 1px 0 0 var(--checkbox-color),1px 2px #0003,2px 1px #00000080,2px 2px 0 0 var(--checkbox-color),2px 3px #0003,3px 2px #00000080,3px 3px 0 0 var(--checkbox-color),3px 4px #0003,4px 3px #00000080,4px 4px 0 0 var(--checkbox-color),4px 5px #0003,5px 4px #00000080,5px 5px 0 0 var(--checkbox-color)}label:has(input[type=checkbox]):active{box-shadow:none;transform:translate(5px,5px)}label:has(input[type=checkbox]):after{z-index:-1;content:"";position:absolute;width:calc(100% + 6px);height:calc(100% + 6px);border:3px solid black;background-color:var(--checkbox-color);top:2px;left:2px}label:has(input[type=checkbox]):active:after{top:-3px;left:-3px}label:has(input[type=checkbox]):before{display:grid;place-content:center;width:100%;height:100%}label:has(input[type=checkbox]){--checkbox-color: var(--checkbox-color-red)}label:has(input[type=checkbox]:checked){--checkbox-color: var(--checkbox-color-green)}label:has(input[type=checkbox]):before{content:"OFF"}label:has(input[type=checkbox]:checked):before{content:"ON"}input[type=color]{visibility:hidden;width:0;height:0;margin:0;padding:0}label:has(input[type=color]){box-sizing:content-box;height:1.5rem;aspect-ratio:2;border:3px solid black;position:relative}button.retro,label:has(input[type=checkbox]){margin-right:8px;margin-bottom:8px}@media (prefers-color-scheme: dark){:root{--menu-color: #1f1f1f;--retro-button-color: #0D97AC;--checkbox-color-red: #AB3131;--checkbox-color-green: #799163;--retro-info-color: #FC9601}body{background-color:#000}#grid-canvas{box-shadow:0 0 0 1px #000a}button.retro:after,label:has(input[type=checkbox]):after,label:has(input[type=color]){border-color:#fff}}@media (prefers-reduced-motion){#toggle-nav svg,#toggle-nav,nav,#board-canvas{transition:none}}