body {
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

body::before {
  --size: 45px;
  --line: color-mix(in hsl, #4b6e72, transparent 80%);
  content: "";
  height: 100vh;
  width: 100vw;
  position: fixed;
  background: linear-gradient(
        90deg,
        var(--line) 1px,
        transparent 1px var(--size)
      )
      calc(var(--size) * 0.36) 50% / var(--size) var(--size),
    linear-gradient(var(--line) 1px, transparent 1px var(--size)) 0%
      calc(var(--size) * 0.32) / var(--size) var(--size);
  mask: linear-gradient(-20deg, transparent 50%, white);
  top: 0;
  transform-style: flat;
  pointer-events: none;
  z-index: -1;
}

:where(.x-link):is(:hover, :focus-visible) {
  opacity: 1;
}

main {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
  justify-content: center;
}

main h1 {
  letter-spacing: -0.05rem;
  line-height: 1;
}

main p {
  opacity: 0.7;
  font-weight: 300;
}

main form {
  display: flex;
  gap: 0.5rem;
}

main form input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  background: canvas;
  border: 1px solid color-mix(in oklch, canvasText, #0000 75%);
  border-radius: 6px;
  outline-color: red;
}

main form button {
  padding-inline: 1.5rem;
  border-radius: 6px;
  background: canvas;
  border: 1px solid color-mix(in oklch, canvasText, #0000 75%);
  cursor: pointer;
  color: canvasText;
  font-size: 0.875rem;
}

main section {
  transition-property: opacity, filter;
  transition-duration: 0.26s;
  transition-delay: 0.26s;
  transition-timing-function: ease-out;
}

[data-exploded="true"] section {
  opacity: 0;
  filter: blur(4px);
}

@media (max-width: 768px) {
  .keypad {
    order: 1;
  }
  section {
    order: 2;
  }
}

section,
section > div {
  width: 50ch;
  max-width: calc(100vw - 2rem);
}

.keypad {
  position: relative;
  aspect-ratio: 400 / 310;
  display: flex;
  place-items: center;
  width: clamp(280px, 35vw, 400px);
  -webkit-tap-highlight-color: #0000;
  transition-property: translate, transform;
  transition-duration: 0.26s;
  transition-timing-function: ease-out;
  transform-style: preserve-3d;
}

.keypad .key {
  transform-style: preserve-3d;
  border: 0;
  background: #0000;
  padding: 0;
  cursor: pointer;
  outline: none;
}

.keypad .key[data-pressed="true"] .key__content,
.keypad .key:active .key__content {
  translate: 0 calc(20 * 1%);
}

.keypad .key__content {
  width: 100%;
  display: inline-block;
  height: 100%;
  transition: translate 0.12s ease-out;
  container-type: inline-size;
}

.keypad__single .key__text {
  width: 52%;
  height: 62%;
  translate: 45% -16%;
}

.key__text {
  height: 46%;
  width: 86%;
  position: absolute;
  font-size: 12cqi;
  z-index: 21;
  top: 5%;
  left: 0;
  mix-blend-mode: normal;
  color: hsl(0 0% 94%);
  translate: 8% 10%;
  transform: rotateX(36deg) rotateY(45deg) rotateX(-90deg) rotate(0deg);
  text-align: left;
  padding: 1ch;
}

.keypad__single {
  position: absolute;
  width: 40.5%;
  left: 54%;
  bottom: 36%;
  height: 46%;
  clip-path: polygon(
    0 0,
    54% 0,
    89% 24%,
    100% 70%,
    54% 100%,
    46% 100%,
    0 69%,
    12% 23%,
    47% 0%
  );
  mask: url("../img/keypad-single.webp") 50% 50% / 100% 100%;
}

.keypad__single.keypad__single--left {
  left: 29.3%;
  bottom: 54.2%;
}

.keypad__single .key__text {
  font-size: 18cqi;
}

.keypad__single img {
  --saturate: 0;
  --hue: 0;
  --brightness: 1.4;
  top: 0;
  opacity: 1;
  width: 96%;
  position: absolute;
  left: 50%;
  translate: -50% 1%;
  filter: hue-rotate(calc(var(--hue, 0) * 1deg)) saturate(var(--saturate, 1))
    brightness(var(--brightness, 1));
}

.keypad__single--left img {
  --saturate: 1.4;
  --hue: 114;
  --brightness: 1.2;
  filter: hue-rotate(calc(var(--hue, 0) * 1deg)) saturate(var(--saturate, 1))
    brightness(var(--brightness, 1));
}

.key__mask {
  width: 100%;
  height: 100%;
  display: inline-block;
}

.keypad__double {
  position: absolute;
  background: hsl(10 100% 50% / 0);
  width: 64%;
  height: 65%;
  left: 6%;
  bottom: 17.85%;
  clip-path: polygon(
    34% 0,
    93% 44%,
    101% 78%,
    71% 100%,
    66% 100%,
    0 52%,
    0 44%,
    7% 17%,
    30% 0
  );
  mask: url("../img/keypad-double.webp") 50% 50% / 100% 100%;
}

.keypad__double img {
  --saturate: 0;
  --hue: 0;
  --brightness: 0.4;
  top: 0;
  opacity: 1;
  width: 99%;
  position: absolute;
  left: 50%;
  translate: -50% 1%;
  filter: hue-rotate(calc(var(--hue, 0) * 1deg)) saturate(var(--saturate, 1))
    brightness(var(--brightness, 1));
}

.keypad__base {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.keypad img {
  transition: translate 0.12s ease-out;
  width: 100%;
}

.reference {
  pointer-events: none;
  opacity: 0;
  z-index: 2;
}

.separated_block {
  width: 100%;
}