.ms { align-self: flex-start; padding: 6px; background: var(--face); }
.mshead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; padding: 4px 5px; box-shadow: var(--sunk); }
.msd { padding: 1px; background: #000; line-height: 0; box-shadow: inset 1px 1px var(--shadow), inset -1px -1px var(--hi); }
.msd svg { width: 41px; height: 24px; }
.msf { width: 26px; height: 26px; padding: 0; border: 0; background: var(--face); box-shadow: var(--button); line-height: 0; }
.msf:active { box-shadow: var(--pushed); }
.msf svg { width: 16px; height: 16px; }
.msb { display: grid; grid-auto-rows: 16px; width: max-content; padding: 3px; box-shadow: var(--sunk); }
.mc { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; font: bold 13px/16px Tahoma, "MS Sans Serif", sans-serif; }
.mc svg { width: 16px; height: 16px; }
.mc.c { background: var(--face); box-shadow: var(--button); }
.mc.o { background: var(--face); box-shadow: inset 1px 1px var(--shadow); }
.mc.bm { background: #f00; }
.n1 { color: #0000ff; }
.n2 { color: #008000; }
.n3 { color: #ff0000; }
.n4 { color: #000080; }
.n5 { color: #800000; }
.n6 { color: #008080; }
.n7 { color: #000; }
.n8 { color: #808080; }