html { background: #000; color: #ddd; font: 14px/1.25 monospace; }
body { margin: 8px; }
pre, textarea { font: inherit; }
pre { margin: 0; }
#message:not(:empty), #editor { margin-top: 1em; }
textarea { background: inherit; color: inherit; width: 95%; }
a { color: inherit; }
.cell, .axis { display: inline-block; width: 2ch; height: 1.25em; vertical-align: top; text-align: center; }
.cell { position: relative; }
.glyph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transform: rotate(var(--angle, 0rad)); color: var(--ink, #fff); }
.glyph.wide { font-size: 0.66em; }
.cell.cursor { outline: 1px solid #fff; outline-offset: -1px; }
.cell.pending { outline: 1px dashed #cc00ff; outline-offset: -1px; }
.axis { font-size: inherit; }
.status-paused { color: #ff6b35; }
.status-running, .collected-clear { color: #00ff41; }

.field { position: relative; display: inline-block; }
.particle-layer { position: absolute; overflow: hidden; pointer-events: none; }
.particle { position: absolute; display: flex; align-items: center; justify-content: center; transform: translate(-50%, -50%) rotate(var(--angle)); color: var(--ink); }
kbd { font: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cursor-hidden .caret { visibility: hidden; }
.cursor-hidden .cell.cursor { outline-color: transparent; }

.particle > span { font-size: 0.78125em; }