.terminal{
  color:white;background:black; /* needed or the extra chars are transparent-bg */
  font-family:monospace;
  padding:2px; /* kind of necessary for readability? */
  width:max-content;
  position:relative;
  /*min-width:75%;*/
  border:1px solid #5b5b5b;
}
.terminal>textarea{
  position:absolute;opacity:0;
  left:0px;top:0px;padding:0px;border:0px;margin:0px;
  width:1ch;height:1lh;resize:none;
  min-height:0;min-width:0; /* undo other css on all textareas setting larger minheights */
}
.terminal>div,
.terminal>div>div{width:max-content;}
.terminal>div>span,
.terminal>div>div>span{
  width:1ch;
  /*width:calc(1ch + 1px);*/
  /*height:;*/
  display:inline-block;
  /*outline:1px solid transparent;*/
}
.terminal>div>span:empty:before,
.terminal>div>div>span:empty:before {
  content:"\a0";
}
.terminal>div>span.emoji,
.terminal>div>div>span.emoji{
  width:2ch;
}
.terminal>div>span.cursor,
.terminal>div>div>span.cursor{
  border:1px solid red;
  border-block:1px solid #0f0; /* targets both top and bottom borders */
  margin:-0.5px;
}

/* sixel graphics implementing layout */
.terminal .sixelcolumn{display:inline-block;vertical-align:middle}
.terminal .sixelcolumn>div{
  height:.18em;
  width:.3ch;
}
/* selection foreground/background palette color hooks */
.terminal ::selection{color:#fff;background-color:#2be;}

/* stupid blink-attribute implementation */
@keyframes blink{
  50% {opacity:1.0;}
  51% {opacity:0.0;}
  100%{opacity:0.0;}
}
.terminal .blink{animation:blink 1s infinite;}