@import"https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&display=swap";:root{--back: #f2f2f2;--front: #1c1b22;--surface: #e9e9ed;--hover: #d0d0d7;--active: #b1b1b9;--shadow-color: #b1b1b969;--shadow: 2px 2px 1px 0px var(--shadow-color);--shadow-lg: 4px 4px 1px 0px var(--shadow-color)}@media(prefers-color-scheme:dark){:root{color-scheme:dark;--back: #1c1b22;--front: #f2f2f2;--surface: #2b2a33;--hover: #52525e;--active: #5b5b66;--shadow-color: #5b5b6669}}body,html{height:100%}body{margin:0;display:grid;overflow:hidden;grid-template-rows:auto 1fr auto;grid-template-columns:1fr;font-family:Silkscreen,system-ui;font-size:14px;letter-spacing:-2px;text-align:center;color:var(--front);background-color:var(--back);user-select:none;-webkit-user-select:none}*{box-sizing:border-box;font-weight:400}header,footer{display:flex;align-items:center;justify-content:space-around;padding:1rem}:is(header,footer)>*{margin:0}button{margin:0;border:0;text-align:inherit;color:inherit;cursor:pointer;font-size:inherit;font-family:inherit;font-weight:inherit;background-color:var(--surface);padding:.45rem 1rem;border-radius:.25rem}button:hover{background-color:var(--hover)}button:hover:active{background-color:var(--active)}a{color:inherit;text-decoration:none}main{position:relative;padding:0 1rem}#board{display:grid;grid-template-columns:repeat(var(--cols),auto);aspect-ratio:var(--cols) / var(--rows);max-block-size:calc(100vh - 132px);height:100dvh;position:absolute;margin:auto;inset:0;gap:2px;touch-action:none}.pixel{aspect-ratio:1;background-color:var(--surface)}.pixel.fill{position:relative;background-color:var(--active)}nav{color-scheme:dark;position:absolute;left:calc(50% - 150px);top:calc(50% - 25px);display:flex;flex-flow:column nowrap;width:300px}nav.playing{top:auto;left:auto;position:relative;flex-flow:row nowrap;justify-content:center;gap:1rem;width:100%}fieldset{display:flex;justify-content:space-around;border:0;margin:0;padding:1rem 0}label{flex:0 1 min-content}input,select{border:0;border-radius:.15rem;padding:.25rem;color:var(--front);background-color:var(--back);font-size:inherit}select{appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='currentColor'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E");background-position:right .5em center;background-repeat:no-repeat;background-size:.5em .75em;padding-right:2em}button{position:relative;box-shadow:var(--shadow)}button.lg{font-size:2rem;box-shadow:var(--shadow-lg)}button:active{top:2px;left:2px;box-shadow:none}