hr, textarea, ::column::scroll-marker {
  all: initial;
}
/* ロジック */
label {
  display: block;
  resize: both;
  overflow-x: hidden;
  overflow-y: auto;
}
label, hr, ::column::scroll-marker, textarea {
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 14px;
  line-height: 1.6em;
}
.container {
  line-height: 0;
  position: relative;
}
hr {
  position: absolute;
  pointer-events: none;
  height: 100%;
  aspect-ratio: 1;
  columns: 1lh;
  column-gap: 0;
  overflow: auto;
  scroll-marker-group: before;
}
hr::before {
  display: block;
  content: '';
  height: 100%;
}
::scroll-marker-group, ::column::scroll-marker {
  box-sizing: border-box;
}
::scroll-marker-group {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  counter-reset: a;
}
::column::scroll-marker {
  counter-increment: a;
  content: counter(a);
}
textarea {
  white-space: nowrap;
  field-sizing: content;
}
/* レイアウト */
label {
  height: 30lh;
  min-width: 160px;
  min-height: 5lh;
}
::scroll-marker-group {
  width: 8ch;
  padding-right: 1.2ch;
}
::column::scroll-marker {
  padding-right: 2ch;
  border-right: solid;
}
textarea {
  margin-left: 8ch;
  width: calc(100% - 8ch);
}
/* 色 */
label {
  background: #1E1E1E;
  outline: solid brown 4px;
}
::column::scroll-marker {
  color: #858585;
}
textarea {
  color: #D4D4D4;
}