body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium",courier,monospace;}
*:focus {outline: none; }

canvas:hover { cursor: none;}

#ronin { width:100%; height:100%; overflow:hidden; background:#111; background-image:url(../media/graphics/grid.svg); background-position: center center; }
#surface { width:50vw; height:50vh; overflow:hidden; position:fixed; left:50%; top:50%; background:none; border-radius:5px; border:1px solid #333;}
#surface > .layer { position:absolute; top:0px; left:0px; width:100%; height:100%;}
#surface widget { position: absolute; top:0px; left:0px; line-height: 20px; font-size:10px; z-index:9000; color:white; width:100%; height:100%; }
#surface widget span { display:inline-block; padding:2px 10px; }
#surface widget .cursor { position:absolute; bottom:0px; right:0px; }
#overlay { position:absolute; z-index:1000;}
#cursor { width:10px; height:10px; position:fixed;border:1px solid red; border-radius:10px; z-index:8000; pointer-events: none}

#terminal { position: fixed; bottom:0px; left:0px; background:#000; width:100vw; height: 120px;overflow: hidden;}
#terminal input { display: block; position:absolute; bottom:0px; width:100vw; padding:0px 5px; font-size:10px; line-height: 20px; background:none; z-index:900; color:white;}
#terminal hint { background:#000; position:absolute; bottom:0px; line-height: 20px; padding:0px 5px; width:100vw; color:#777; font-size:10px; white-space: pre;}
#terminal hint b { font-family: "input_mono_regular"; color:#999; }
#terminal hint i { font-style: italic; color:#fff; }
#terminal logs { display: block;position: absolute;bottom:20px;width:100vw;color:white}
#terminal logs log { display: block; font-size:10px; line-height:25px; padding:0px 5px; color:#666;}
#terminal logs log .rune { color:white; }
#terminal menu { display: inline-block;position: absolute;bottom: 0px;right: 0px;padding: 0px 5px;font-size: 10px;line-height: 20px;color:white }