body {
  margin: 40px max(40px, 10vw) 120px;
  background: #ffeb80;
}

.header {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-bottom: 80px;

  background-image: url("./stamps-photo-color.jpg");
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: calc(30em + max(40px, 10vw)) center;
  padding: 20px max(40px, 10vw);
  margin: 40px calc(-1 * max(40px, 10vw));

  h1 {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 18px;
    font-weight: normal;
    margin: 0;
  }

  .range {
    max-width: 15em;
  }

  .input {
    flex-grow: 1;
    max-width: 30em;
    min-height: 4.25em;
  }
}

.output {
  --s: 0.25;
  display: flex;
  flex-wrap: wrap;
  gap: calc(20px * var(--s));
}

.letter {
  display: inline-block;
  background-color: #faa1;
  width: calc(var(--w, 150px) * var(--s));
  height: calc(var(--h, 268px) * var(--s));
  background-image: url(./font.png);
  background-size: calc(2024px * var(--s));
  background-position: calc(var(--x, -12px) * var(--s))
    calc(var(--y, -31px) * var(--s));

  margin-bottom: calc(-58px * var(--s));
  font-size: 0;
  color: transparent;
  filter: saturate(0.25);
  mix-blend-mode: darken;

  &.br {
    background: none;
    flex-basis: 100%;
    --h: 0;

    + .br {
      --h: 268px;
    }
  }

  &.a {
    --w: 152px;
    --x: -12px;
    --y: -13px;
    margin-left: calc(var(--s) * -5px);
    margin-right: calc(var(--s) * -3px);
  }
  &.b {
    --w: 117px;
    --x: -174px;
    --y: -13px;
  }
  &.v {
    --w: 118px;
    --x: -296px;
    --y: -13px;
  }
  &.g {
    --w: 119px;
    --x: -422px;
    --y: -13px;
    margin-right: calc(var(--s) * -10px);
  }
  &.g:has(+ .d, + .l) {
    margin-right: calc(var(--s) * -20px);
  }
  &.d {
    --w: 158px;
    --x: -545px;
    --y: -13px;
    margin-right: calc(var(--s) * -8px);
  }
  &.ye {
    --w: 105px;
    --x: -708px;
    --y: -13px;
  }
  &.yo {
    --w: 105px;
    --x: -840px;
    --y: -13px;
  }
  &.zh {
    --w: 172px;
    --x: -959px;
    --y: -13px;
  }
  &.z {
    --w: 135px;
    --x: -1146px;
    --y: -13px;
  }
  &.i {
    --w: 132px;
    --x: -1303px;
    --y: -13px;
  }
  &.j {
    --w: 142px;
    --x: -1457px;
    --y: -13px;
  }
  &.k {
    --w: 138px;
    --x: -1609px;
    --y: -13px;
  }
  &.l {
    --w: 120px;
    --x: -12px;
    --y: -265px;
    margin-left: -2px;
  }
  &.m {
    --w: 177px;
    --x: -149px;
    --y: -265px;
  }
  &.n {
    --w: 156px;
    --x: -345px;
    --y: -265px;
  }
  &.o {
    --w: 132px;
    --x: -522px;
    --y: -265px;
  }
  &.p {
    --w: 113px;
    --x: -667px;
    --y: -265px;
  }
  &.r {
    --w: 119px;
    --x: -798px;
    --y: -265px;
    margin-right: calc(var(--s) * -5px);
  }
  &.s {
    --w: 116px;
    --x: -931px;
    --y: -265px;
  }
  &.t {
    --w: 103px;
    --x: -1054px;
    --y: -265px;
  }
  &.u {
    --w: 110px;
    --x: -1171px;
    --y: -265px;
  }
  &.f {
    --w: 125px;
    --x: -1298px;
    --y: -265px;
  }
  &.h {
    --w: 119px;
    --x: -1432px;
    --y: -265px;
  }
  &.c {
    --w: 109px;
    --x: -1568px;
    --y: -265px;
  }
  &.ch {
    --w: 137px;
    --x: -11px;
    --y: -517px;
  }
  &.sh {
    --w: 138px;
    --x: -175px;
    --y: -517px;
    margin-right: calc(var(--s) * -3px);
  }
  &.sch {
    --w: 188px;
    --x: -341px;
    --y: -517px;
  }
  &.hard {
    --w: 122px;
    --x: -548px;
    --y: -517px;
    margin-left: calc(var(--s) * -3px);
    margin-right: calc(var(--s) * -3px);
  }
  &.y {
    --w: 155px;
    --x: -682px;
    --y: -517px;
  }
  &.soft {
    --w: 104px;
    --x: -859px;
    --y: -517px;
  }
  &.e {
    --w: 113px;
    --x: -983px;
    --y: -517px;
  }
  &.yu {
    --w: 153px;
    --x: -1120px;
    --y: -517px;
  }
  &.ya {
    --w: 123px;
    --x: -1298px;
    --y: -517px;
  }
  &.dash {
    --w: 141px;
    --x: -1465px;
    --y: -517px;
  }
  &.space + .dash {
    margin-left: calc(var(--s) * -60px);
  }
  &.dash:has(+ .space) {
    margin-right: calc(var(--s) * -60px);
  }
  &.dot {
    --w: 46px;
    --x: -1643px;
    --y: -517px;
  }
  &.comma {
    --w: 62px;
    --x: -1723px;
    --y: -517px;
  }
  &.exclamation {
    --w: 59px;
    --x: -1815px;
    --y: -517px;
  }
  &.question {
    --w: 90px;
    --x: -1905px;
    --y: -517px;
  }
  &.space {
    --w: 80px;
    --x: -1749px;
    --y: -13px;
  }
}