:root {
  --background: #f1f1f1;
  --surface: #ffffff;
  --muted: #e8e8e8;
  --focus: #999999;
  --width: 310px;
  --radius: 18px;
  --gutter: 16px;
  --padding: 18px;
  --spring: linear(0, 0.01 2%, 0.03 4%, 0.1 6%, 0.385 16%, 0.66 26%, 0.86 36%, 0.957 46%, 1 56%, 1.016 68%, 1.007 82%, 1);
}

body {
  display: grid;
  place-items: center;
  min-block-size: 100svh;
  margin: 0;
  overflow: clip;
  background: var(--background);
}

.aligner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  box-sizing: border-box;
  inline-size: min(var(--width), calc(100vw - var(--gutter) * 2));
  min-inline-size: 0;
  aspect-ratio: 155 / 64;
  margin: 0;
  padding: 0 var(--padding);
  border: 0;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 24px 60px -8px rgb(0 0 0 / 0.07);
  transition: transform 350ms var(--spring);
  -webkit-tap-highlight-color: transparent;
}

.aligner[data-press],
.aligner:has(input:active:not(:disabled)) {
  transform: scale(0.985);
  transition: transform 180ms cubic-bezier(0.2, 0, 0.2, 1);
}

.option {
  position: relative;
  z-index: 1;
  display: grid;
  min-inline-size: 0;
  cursor: pointer;
  touch-action: manipulation;
}

.option::after {
  content: "";
  position: absolute;
  inset: 28px 10px;
  border: 1px solid var(--focus);
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
}

.option:has(input:focus-visible)::after {
  opacity: 1;
}

.option input {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}

.option:has(input:disabled) {
  cursor: not-allowed;
}

.art {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
  pointer-events: none;
}

.marks {
  fill: var(--muted);
}

.ink {
  fill: url(#ink);
}

.ink rect {
  transform: translateX(0);
  transition: transform 1000ms var(--spring);
}

.ink rect:nth-child(2) {
  transition-delay: 80ms;
}

.ink rect:nth-child(3) {
  transition-delay: 140ms;
}

.aligner:has([value="center"]:checked) .ink rect {
  transform: translateX(91.333333px);
}

.aligner:has([value="center"]:checked) .ink rect:last-child {
  transform: translateX(100.333333px);
}

.aligner:has([value="right"]:checked) .ink rect {
  transform: translateX(182.666667px);
}

.aligner:has([value="right"]:checked) .ink rect:last-child {
  transform: translateX(200.666667px);
}

.aligner:has([value="left"]:disabled) .mark-left,
.aligner:has([value="center"]:disabled) .mark-center,
.aligner:has([value="right"]:disabled) .mark-right,
.aligner:has(input:checked:disabled) .ink {
  opacity: 0.35;
}

.pointer {
  opacity: 0;
  transition: opacity 120ms ease;
}

.pointer-shadow {
  fill: #ffffff;
}

.pointer-face {
  fill: rgb(255 255 255 / 0.55);
  stroke: rgb(255 255 255 / 0.85);
  stroke-width: 1px;
}

.aligner[data-pointer] .pointer {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .aligner[data-enhanced] .option:not(:has(input:disabled)) {
    cursor: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aligner,
  .aligner[data-press],
  .aligner:has(input:active:not(:disabled)),
  .ink rect,
  .pointer {
    transition: none;
  }
}