@font-face{font-family:Text;letter-spacing:0.25ex;src:url("Gemcut Bold.otf")}
@font-face{font-family:Text;letter-spacing:0.25ex;src:url("Gemcut Bold Italic.otf");font-style:italic}
@font-face{font-family:APL;src:local("APL386 Unicode"),local("APL385 Unicode"),url("APL386.ttf")}
*{user-select:none}
html{
  --emerald   :rgb(  0, 73, 73);
  --ruby      :rgb(146,  0,  0);
  --sapphire  :rgb(  0,109,219);
  --amethyst  :rgb( 73,  0,146);
  --l-emerald :rgba(204, 219, 219,0.5);
  --l-ruby    :rgba(233, 204, 204,0.5);
  --l-sapphire:rgba(204, 226, 248,0.5);
  --l-amethyst:rgba(219, 204, 233,0.5);
  --back:#222;
  --spot:#999;
  --wall:rgb(146,73,0);
  --speed:0.5s;
  --size: 2.5rem;
}
body{background:var(--spot)}
dialog{z-index:150;font-size:calc(var(--size) * 0.6);background:var(--spot)}
dialog::backdrop{background:#0003}
dialog p{line-height:calc(var(--size) * 0.8);font-family:Text;letter-spacing:0.25ex}
dialog button{font-family:Text;letter-spacing:0.25ex;font-size:calc(var(--size) * 0.6)}
#askb>button,dialog code{font-weight:bold;font-family:APL;white-space:pre}
#askb>*{cursor:pointer}
dialog input{width:100%;font-family:APL;font-size:calc(var(--size) * 0.6)}
#M {
  margin:calc(var(--size) * 1.2) auto;
  border-collapse:collapse;
  box-shadow: 0 0 calc(var(--size) / 4) calc(var(--size) / 4) var(--back);
}
td {
  height: var(--size);
  font-size:calc(var(--size) * 0.6);
  position:relative;
  padding:0;
}
#M td{
  background:var(--back);
  width: var(--size);
}
fieldset{
  border:0.15rem solid currentColor;
  font-family:Text;
  letter-spacing:0.25ex;
  padding: 0.5rem 1rem 1rem 1rem;
}
legend,th{font-size:1.5rem;}
th{text-align:left;font-weight:normal}
td>*{z-index:100}
#M td,b{text-align:center;}
b {
  display:inline-block;
  font-weight:normal;
  position:relative;
  transition:opacity var(--speed);
  font-family:APL;
}
#belt b,#askb>*{margin:0 calc(var(--size) * 0.1)}
#M b{opacity:0;}
.m,.d,.M,.D{
  width:calc(var(--size) * 0.6);
  height:calc(var(--size) * 0.6);
  line-height:calc(var(--size) * 0.6);
  -webkit-text-stroke:0.05rem;
  border-width:0.33rem;
  border-style:outset;
}
.m {border-radius:1em  1em  0em  1em;color:var(--emerald );-webkit-text-stroke-color:var(--emerald );background:var(--l-emerald );border-color:rgba(255,255,255,0.25)}
.d {border-radius:1em  1em  0em  0em;color:var(--ruby    );-webkit-text-stroke-color:var(--ruby    );background:var(--l-ruby    );border-color:rgba(255,255,255,0.25)}
.M {border-radius:0em .5em .5em .5em;color:var(--sapphire);-webkit-text-stroke-color:var(--sapphire);background:var(--l-sapphire);border-color:rgba(255,255,255,0.25)}
.D {border-radius:0em  0em .5em .5em;color:var(--amethyst);-webkit-text-stroke-color:var(--amethyst);background:var(--l-amethyst);border-color:rgba(255,255,255,0.25)}
i {
  height:var(--size);
  width:var(--size);
  line-height:var(--size);
  font-size:1.8rem;
  display:block;
  font-style:normal;
  z-index: 50;
  box-shadow: 0 0 calc(var(--size) * 0.8) var(--size) var(--spot);
  background: var(--spot);
  position:absolute;
  text-align:center;
  transition: var(--speed)
}
.w {
  background:var(--wall);
  height:var(--size);
  width:var(--size);
  border-radius:calc(var(--size) / 2.5)
}