body,html{font-variant-emoji:unicode;--c:purple;--c-0:#666;--c-1:red;--c-2:green;--c-3:#ff0;--c-4:#55f;--c-fg:#fff;--c-0-fg:#fff;--c-1-fg:#fff;--c-2-fg:#fff;--c-3-fg:#000;--c-4-fg:#fff;background:#000;color:#fff;font-family:sans-serif;margin:0;min-height:100vh;padding:0;text-align:center}body{display:grid;grid:"solve nav" "game game" "solution solution" 1fr "footer footer"/1fr 1fr;@media (min-aspect-ratio:3/2){grid:"game   .      solve    nav" "game   .      .        ." 1em "game   .      solution solution" 1fr "footer footer footer   footer"/auto 1em 1fr 1fr;>button{place-self:start end}>.vbar{place-self:start start}}>#loading{grid-area:1/1/footer-start/-1;max-width:16em;place-self:center;>img{display:block;margin:1em auto;max-width:6em}}>button{grid-area:solve;margin:.4rem;place-self:start start}>.vbar{grid-area:nav;margin:.4rem;place-self:start end}>.gameui{grid-area:game;max-width:min(100vw,90vh);place-self:start center;width:50rem}>:is(.play,.solution){grid-area:solution}>footer{grid-area:footer}}a{color:#ababff}a:visited{color:#af93ff}button{align-items:center;background:none;border:1px solid #fff;border-radius:.4em;color:#fff;cursor:pointer;display:flex;font-size:2em;gap:.1em;line-height:1;padding:.2em .65em;position:relative}button:is(:disabled,.disabled){color:#666;cursor:not-allowed}@media (hover:hover){button:hover{background:#666}}button.l>div:last-child{transition:transform .2s}button.l>div:last-child:not(:first-child){transform:translateX(.6em);transition-delay:.2s}button.l>:first-child:not(:last-child){animation:zoomIn .2s ease .2s both;font-size:.8em;left:.2em;position:absolute;text-shadow:0 0 2px #000;transform:scale(0);width:1em}dialog{background:#222;box-shadow:0 0 2em 1em #000;color:#fff;margin:1em auto;>form{display:flex;flex-flow:column;gap:.4em;text-align:center;>*{margin:0}>h2{margin-top:.4em}>.m{display:grid;grid:auto/repeat(4,1fr)}}}footer{background:#333;margin:.4em 0 0;padding:.4em 0}input,textarea{background:#333;border:none;border-radius:.2em;color:#fff;padding:.4em}:is(input,textarea):invalid{border:1px solid red}:is(input,textarea):not(:user-invalid){border:none}nav{display:flex;margin:.2em 1px}.color{background:var(--c);border:none;color:var(--c-fg);font-size:2em;min-height:1.6em;padding:.4em}.c-0{--c:var(--c-0);--c-fg:var(--c-0-fg)}.c-1{--c:var(--c-1);--c-fg:var(--c-1-fg)}.c-2{--c:var(--c-2);--c-fg:var(--c-2-fg)}.c-3{--c:var(--c-3);--c-fg:var(--c-3-fg)}.c-4{--c:var(--c-4);--c-fg:var(--c-4-fg)}.c-chip{background:var(--c);border-radius:.2em;color:var(--c-fg);padding:.2em}svg{.cell{fill:none}.grid{stroke:#333;stroke-width:.1;fill:none}.wall{stroke:#fff;stroke-linecap:round;stroke-width:.1;fill:none}.robot{fill:var(--c);stroke:#000;stroke-width:.02px;cursor:move}.cell .mirror{stroke:var(--c);stroke-linecap:round;stroke-width:.1}.cell.target{fill:var(--c)}}.gameui{fill:var(--c)}.quarter{border:none}.mirror{color:var(--c);font-weight:1000}.notifications{align-items:end;bottom:0;display:flex;flex-flow:column-reverse;font-size:1.4rem;left:0;pointer-events:none;position:fixed;right:0;top:0;>div{animation:liftIn .2s both;background:#446;border:2px solid #666;border-radius:.4em;margin:.6em;padding:.4em;pointer-events:auto;&.e{background:#822;border-color:#aaa}}}.play>div{display:flex;justify-content:center}.play>ul{list-style:none;margin:0 2em;padding:0;text-align:center}.play>ul>li{animation:zoomIn .2s ease both;display:inline-block;transform:scale(0);width:12em}.spacer{flex:1}.solution{>form.g{display:flex;justify-content:center}>form.s{align-items:center;display:inline-grid;grid-template-columns:auto auto auto minmax(.2em,1em) auto auto auto;margin:1em auto;>button{grid-column:1}>.p{grid-column:2/-1}>.r{grid-column:2;margin:0 .4em 0 .8em}>.d{grid-column:3}>.p1{grid-column:5}>.a{color:#888;grid-column:6;margin:0 .4em}>.p2{grid-column:7}}}.solution>form.s>button{display:block}.solution>form.s>button:not(:first-child){border-top:none;border-top-left-radius:0;border-top-right-radius:0}.solution>form.s>button:not(:last-of-type){border-bottom-left-radius:0;border-bottom-right-radius:0}.solution>form.s>div{text-align:left}.vbar{display:flex}.vbar>button:not(:first-child){border-bottom-left-radius:0;border-left:none;border-top-left-radius:0;margin-left:0}.vbar>button:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0;margin-right:0}@keyframes liftIn{0%{opacity:0;transform:translateY(1em) scale(.8)}}@keyframes zoomIn{to{transform:scale(1)}}