@font-face {
  font-family: "Contents Inter";
  src: url("data:font/ttf;base64,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") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --background: #0f0f0f;
  --text: #e2e2e2;
  --accent: #ed3d1d;
  --guide: #343434;
  --muted-opacity: .46;
  --hover-opacity: .79;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

body {
  display: grid;
  place-items: center;
  min-block-size: 100svh;
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: "Contents Inter", Inter, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

.contents {
  inline-size: min(38.09524vw, 59.25926svh);
  aspect-ratio: 320 / 404;
  min-block-size: 0;
  container-type: inline-size;
}

h1 {
  margin: 0 0 13.75cqw;
  font-size: 9.375cqw;
  font-weight: 400;
  line-height: 11.25cqw;
  letter-spacing: .27cqw;
  text-transform: uppercase;
}

.menu {
  position: relative;
}

ol {
  display: grid;
  gap: 11.484375cqw;
  margin: 0;
  padding: 0 0 0 12.1875cqw;
  list-style: none;
}

li {
  min-inline-size: 0;
  block-size: 11.25cqw;
}

button {
  display: block;
  inline-size: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 1.25cqw;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 9.375cqw;
  line-height: 11.25cqw;
  letter-spacing: 0;
  text-align: start;
  white-space: nowrap;
  user-select: none;
  opacity: var(--muted-opacity);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 140ms var(--ease), transform 140ms var(--ease);
}

button[data-preview],
button:focus-visible {
  opacity: var(--hover-opacity);
}

button[aria-current="true"] {
  opacity: 1;
}

button:active:not(:disabled) {
  transform: translateX(.45cqw);
}

button:focus-visible {
  outline: 1px solid rgb(226 226 226 / .28);
  outline-offset: 1.875cqw;
}

button:disabled {
  opacity: .24;
  cursor: default;
}

.markers {
  position: absolute;
  inset-block-start: -4.21875cqw;
  inset-inline-start: 0;
  inline-size: 8.75cqw;
  block-size: 109.375cqw;
  overflow: visible;
  fill: none;
  stroke-width: 2;
  stroke-dasharray: 2.4 6.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.selected {
  stroke: var(--accent);
}

.preview {
  stroke: var(--guide);
  opacity: 0;
  transition: opacity 120ms var(--ease);
}

.menu.has-preview .preview {
  opacity: 1;
}

@media (max-width: 480px) {
  .contents {
    inline-size: min(240px, calc(100vw - 80px), 59.25926svh);
  }
}

@media (prefers-reduced-motion: reduce) {
  button,
  .preview {
    transition: none;
  }
}