*{margin:0;padding:0;box-sizing:border-box}body{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;font-family:monospace}#preview{width:460px;min-height:200px;padding:20px;border:1px solid #ccc;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;display:flex;align-items:center;justify-content:center}input{font-family:monospace;display:block;background:#ffffff1a;border:none;border-radius:4px;padding:4px 8px;outline:none;width:fit-content;margin:0 4px}#fontsize,#strokewidth,#directions,#precision{width:4em}#color{width:6em}.pannel{width:460px;display:flex;flex-direction:column;flex-wrap:nowrap;background-color:#3f3f3f;color:#c3bf9f;padding:10px;line-height:2.2;height:800px;overflow:auto}.line{display:flex;align-items:center;flex-wrap:nowrap}.outline{display:flex;-webkit-user-select:all;user-select:all}.outkey{white-space:nowrap;flex-shrink:0;margin-right:1em}footer{position:fixed;right:1em;bottom:.4em;text-align:center;font-size:12px;color:#666}footer a,footer a:visited{color:#aaa}.tab{padding-left:2em}.cyan{color:#8cd0d3}.red{color:#dca3a3}.comment{color:#7f9f7f}