yard.css

body { margin:0; padding:0 0.5rem; font-family:Verdana; font-size: 1rem;  }
canvas { position: absolute;top:0; right:0; background:#000; border:1px solid #888; margin:0; padding:0; }

label, button, input { display:block; font-size:1rem;  border-radius:0.25rem; }
label, button { margin-top:0.5rem; height:1.5rem; }
input { width:10.35rem; border:1px solid; text-align:right; }
button { width:10.75rem; border:1px solid #333; }
button:hover { background:#DDD;  }
button.pause { background:#0060DF; color:#FFF; }
button.active { background:crimson; }

dialog { background:#000; border:1px solid #FFF; border-radius:0.25rem; }
dialog label { color:#FFF; }
dialog h2 { margin:0; border-radius:0.25rem; padding:0.2rem 0.5rem 0.4rem; }
dialog button { width:100%; margin-left:0; }
dialog input { width:100%; border:none; margin:0; }