hr, ::column::scroll-marker {
  all: initial;
}
hr {
  display: block;
  width: 48px;
  aspect-ratio: 1;
  columns: 1px;
  column-gap: 0;
  overflow: auto;
  scroll-marker-group: before;
}
hr::before {
  content: '';
  display: block;
  height: 100%;
}
::scroll-marker-group {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  writing-mode: vertical-rl;
  gap: 2dvmin;
  counter-reset: a;
}
::column::scroll-marker {
  counter-increment: a;
  content: counter(a, hiragana);
  background: white;
  aspect-ratio: 1;
  border: solid 0.4dvmin;
  border-radius: 10%;
  font-size: 3dvmin;
  filter: brightness(0.85);
  box-shadow: 0 0.5dvmin 1dvmin rgba(0,0,0,0.3);
  transition: all 150ms;
}
::column::scroll-marker:hover {
  filter: brightness(1);
  scale: 1.06;
}