:root {
  color-scheme: only light;
  --ink: #10123d;
  --floor: #263dcc;
  --floor-deep: #182892;
  --paper: #fff7dc;
  --left: #ff6375;
  --right: #6ef2d0;
  --spark: #f7ee54;
  --ease-step: cubic-bezier(.18,.84,.22,1.08);
  font-family: "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--floor);
}

button,
a { -webkit-tap-highlight-color: transparent; }

button { font: inherit; }

button:focus-visible,
a:focus-visible {
  outline: .24rem solid var(--paper);
  outline-offset: .25rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#experience {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100svh;
  min-height: 540px;
  overflow: hidden;
  touch-action: none;
  color: var(--paper);
  background: var(--floor);
  transition: background-color 700ms ease;
}

.floor,
.floor-grid,
.intro,
.play,
.finale,
.history,
.targets,
.dancer {
  position: absolute;
  inset: 0;
}

.floor { z-index: -2; overflow: hidden; }

.floor::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .32;
  background-image: url("floor-field.webp");
  background-size: cover;
  background-position: center;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.floor-grid {
  opacity: .46;
  background:
    linear-gradient(115deg, transparent 0 49.7%, rgba(255,255,255,.22) 49.8% 50.2%, transparent 50.3%),
    repeating-linear-gradient(0deg, transparent 0 11vh, rgba(255,255,255,.11) 11vh calc(11vh + 1px)),
    repeating-linear-gradient(90deg, transparent 0 11vw, rgba(255,255,255,.09) 11vw calc(11vw + 1px));
  transform: scale(1.16) rotate(-3deg);
}

.corner {
  position: absolute;
  width: 42vmin;
  aspect-ratio: 1;
  border: clamp(22px, 6vmin, 74px) solid var(--spark);
  border-radius: 50%;
  opacity: .92;
}

.corner-a { left: -25vmin; top: -27vmin; }
.corner-b { right: -31vmin; bottom: -27vmin; border-color: var(--right); }

.floor-word {
  position: absolute;
  font: 900 clamp(8rem, 30vw, 33rem)/.72 Impact, "Arial Black", sans-serif;
  letter-spacing: -.08em;
  color: rgba(15, 18, 61, .13);
  user-select: none;
}

.floor-word-a { left: -2vw; top: 14vh; transform: rotate(-7deg); }
.floor-word-b { right: -3vw; bottom: 2vh; transform: rotate(4deg); }

.mast {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) 0 max(1rem, env(safe-area-inset-left));
  pointer-events: none;
}

.home-mark,
.about-open {
  pointer-events: auto;
  color: inherit;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .68rem;
  font-weight: 900;
}

.home-mark { padding: .65rem .1rem; }

.about-open {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.intro {
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.1rem;
  padding: 10vh max(7vw, 1.4rem) 7vh;
  transition: opacity 420ms ease, transform 600ms var(--ease-step);
}

.eyebrow {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: clamp(.62rem, 1.1vw, .78rem);
  font-weight: 900;
}

.intro h1 {
  margin: 0;
  text-transform: uppercase;
  font: 900 clamp(5rem, 17vw, 15rem)/.7 Impact, "Arial Black", sans-serif;
  letter-spacing: -.055em;
  text-wrap: balance;
  text-shadow: .05em .05em 0 var(--ink);
}

.intro h1 span { display: block; }
.intro h1 span:first-child { color: var(--spark); }
.intro h1 span:last-child { color: var(--left); }

.intro-line {
  margin: .5rem 0 0;
  max-width: 30rem;
  font: italic 700 clamp(1rem, 2vw, 1.35rem)/1.35 Georgia, serif;
}

.begin {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  min-height: 3.7rem;
  margin-top: .4rem;
  padding: .45rem 1.35rem .45rem .5rem;
  border: 0;
  border-radius: 999px;
  color: var(--ink);
  background: var(--right);
  box-shadow: .45rem .45rem 0 var(--ink);
  font-weight: 900;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.begin:hover { transform: translate(-.15rem, -.15rem); box-shadow: .6rem .6rem 0 var(--ink); }
.begin:active { transform: translate(.2rem, .2rem); box-shadow: .18rem .18rem 0 var(--ink); }

.begin-print {
  display: grid;
  place-items: center;
  width: 2.75rem;
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--paper);
  background: var(--floor);
  font-size: 1.35rem;
}

.input-hint {
  margin: .5rem 0 0;
  opacity: .72;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .64rem;
  font-weight: 900;
}

.touch-only { display: none; }

.play {
  z-index: 3;
  opacity: 0;
  visibility: hidden;
  transition: opacity 500ms ease;
}

[data-state="play"] .intro,
[data-state="transition"] .intro,
[data-state="finale"] .intro,
[data-state="complete"] .intro {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6vh) rotate(-2deg);
}

[data-state="play"] .play,
[data-state="transition"] .play,
[data-state="finale"] .play,
[data-state="complete"] .play {
  opacity: 1;
  visibility: visible;
}

.phrase-card {
  position: absolute;
  z-index: 8;
  top: max(4.5rem, calc(env(safe-area-inset-top) + 4rem));
  left: max(1rem, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: 0;
  color: var(--paper);
  background: transparent;
  transform: rotate(-4deg);
  pointer-events: none;
}

.phrase-card span {
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: .62rem;
  font-weight: 900;
  opacity: .76;
}

.phrase-card strong {
  font: italic 700 clamp(1.15rem, 2.2vw, 1.65rem)/1.1 Georgia, serif;
  text-shadow: .16em .16em 0 rgba(16,18,61,.58);
}

.progress {
  position: absolute;
  z-index: 8;
  top: max(5rem, calc(env(safe-area-inset-top) + 4.5rem));
  right: max(1rem, env(safe-area-inset-right));
  display: none;
}

.progress i {
  display: block;
  width: .85rem;
  height: .85rem;
  border: 2px solid var(--paper);
  border-radius: 50%;
  transform: rotate(12deg);
  transition: background 240ms ease, transform 240ms var(--ease-step);
}

[data-phrase="0"] .progress i:nth-child(1),
[data-phrase="1"] .progress i:nth-child(-n+2),
[data-phrase="2"] .progress i { background: var(--spark); transform: scale(1.25) rotate(-8deg); }

.cue {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 12%;
  width: min(74vw, 45rem);
  margin: 0;
  transform: translateX(-50%);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .1em;
  font: 900 clamp(1rem, 2.5vw, 1.65rem)/1 Impact, "Arial Black", sans-serif;
  text-shadow: .14em .14em 0 var(--ink);
  pointer-events: none;
}

.targets { z-index: 5; }
.history { z-index: 2; pointer-events: none; }
.dancer { z-index: 4; pointer-events: none; }

.step-target {
  --target-color: var(--left);
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: grid;
  place-items: center;
  width: clamp(4.8rem, 10vmin, 7rem);
  min-width: 64px;
  min-height: 76px;
  aspect-ratio: .72;
  padding: 0;
  border: 3px solid var(--target-color);
  border-radius: 48% 48% 43% 43% / 56% 56% 38% 38%;
  color: var(--ink);
  background: color-mix(in srgb, var(--target-color) 78%, white 22%);
  box-shadow: 0 0 0 .45rem rgba(255,255,255,.12), .45rem .55rem 0 rgba(16,18,61,.48);
  transform: translate(-50%, -50%) rotate(var(--rotation)) scale(.2);
  transform-origin: 50% 75%;
  opacity: 0;
  cursor: pointer;
  animation: targetIn 440ms var(--ease-step) forwards, targetPulse 1.55s 500ms ease-in-out infinite;
}

.step-target::before,
.step-target::after {
  content: "";
  position: absolute;
  top: -15%;
  width: 22%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: inherit;
  box-shadow: 1.35rem -.15rem 0 -.08rem var(--target-color), 2.45rem .26rem 0 -.17rem var(--target-color);
}

.step-target::before { left: 12%; }
.step-target::after { display: none; }

.step-target[data-foot="right"] {
  --target-color: var(--right);
  border-radius: 48% 48% 43% 43% / 56% 56% 38% 38%;
}

.step-target[data-foot="right"]::before {
  left: auto;
  right: 12%;
  transform: scaleX(-1);
}

.step-target[data-double="true"]::after {
  display: grid;
  place-items: center;
  content: "+";
  top: 50%;
  left: 50%;
  width: 2.1rem;
  height: 2.1rem;
  border: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  color: var(--paper);
  background: var(--ink);
  box-shadow: none;
  font-weight: 900;
}

.step-target:hover { filter: brightness(1.07); }
.step-target:active { animation: none; transform: translate(-50%, -50%) rotate(var(--rotation)) scale(.9); }
.step-target.is-wrong { animation: wrongStep 360ms ease; }
.step-target.is-landed { animation: targetLand 230ms ease forwards; pointer-events: none; }

.ghost-foot {
  --ghost-color: var(--left);
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: clamp(2.3rem, 5.4vmin, 4.4rem);
  aspect-ratio: .68;
  border: .17rem solid color-mix(in srgb, var(--ghost-color) 80%, white 20%);
  border-radius: 48% 48% 43% 43% / 56% 56% 38% 38%;
  opacity: .48;
  transform: translate(-50%, -50%) rotate(var(--rotation));
  box-shadow: inset 0 0 0 .22rem rgba(255,255,255,.07);
  transition: left 1.3s var(--ease-step), top 1.3s var(--ease-step), transform 1.3s var(--ease-step), opacity 500ms ease;
}

.ghost-foot::before {
  content: "";
  position: absolute;
  top: -15%;
  left: 12%;
  width: 22%;
  aspect-ratio: 1;
  border: .13rem solid var(--ghost-color);
  border-radius: 50%;
  box-shadow: 1rem -.12rem 0 -.05rem var(--floor), 1rem -.12rem 0 .08rem var(--ghost-color), 1.82rem .18rem 0 -.09rem var(--floor), 1.82rem .18rem 0 .04rem var(--ghost-color);
}

.ghost-foot[data-foot="right"]::before { left: auto; right: 12%; transform: scaleX(-1); }
.ghost-foot.is-fresh { animation: ghostStamp 380ms var(--ease-step); }

.leg {
  position: absolute;
  left: var(--foot-x);
  top: var(--foot-y);
  width: clamp(1.5rem, 3vmin, 2.6rem);
  height: 60vmax;
  border-radius: 999px;
  background: var(--leg-color);
  transform-origin: 50% 0;
  transform: translate(-50%, 0) rotate(var(--leg-angle));
  transition: left 440ms var(--ease-step), top 440ms var(--ease-step), transform 440ms var(--ease-step);
  opacity: .94;
}

.leg-left { --leg-color: var(--left); --leg-angle: 8deg; --foot-x: 39%; --foot-y: 79%; }
.leg-right { --leg-color: var(--right); --leg-angle: -8deg; --foot-x: 61%; --foot-y: 79%; }

.live-foot {
  position: absolute;
  left: var(--foot-x);
  top: var(--foot-y);
  width: clamp(4.2rem, 9vmin, 7.2rem);
  aspect-ratio: .68;
  border-radius: 48% 48% 43% 43% / 56% 56% 38% 38%;
  background: var(--foot-color);
  box-shadow: .45rem .55rem 0 rgba(16,18,61,.52);
  transform: translate(-50%, -50%) rotate(var(--foot-rotation));
  transform-origin: 50% 75%;
  transition: left 440ms var(--ease-step), top 440ms var(--ease-step), transform 440ms var(--ease-step), width 600ms var(--ease-step);
}

.live-foot-left { --foot-color: var(--left); --foot-x: 39%; --foot-y: 79%; --foot-rotation: -8deg; }
.live-foot-right { --foot-color: var(--right); --foot-x: 61%; --foot-y: 79%; --foot-rotation: 8deg; }

.live-foot .toes,
.live-foot .toes::before,
.live-foot .toes::after {
  position: absolute;
  display: block;
  width: 24%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: inherit;
}

.live-foot .toes { content: ""; left: 9%; top: -15%; box-shadow: 2rem -.25rem 0 -.08rem var(--foot-color); }
.live-foot .toes::before { content: ""; left: 1.1rem; top: -.4rem; }
.live-foot .toes::after { content: ""; left: 3rem; top: .25rem; transform: scale(.78); }
.live-foot-right .toes { left: auto; right: 9%; transform: scaleX(-1); }

.live-foot.is-step { animation: liveStamp 430ms var(--ease-step); }

.keyboard-hint {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  margin: 0;
  transform: translateX(-50%);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .63rem;
  font-weight: 900;
  white-space: nowrap;
  display: none;
}

kbd {
  display: inline-grid;
  place-items: center;
  min-width: 1.7rem;
  min-height: 1.7rem;
  padding: .15rem .38rem;
  border: 1px solid currentColor;
  border-radius: .3rem;
  font: 900 .72rem/1 "Trebuchet MS", sans-serif;
}

[data-state="transition"] .cue { animation: cueFlip 800ms var(--ease-step); }
[data-state="transition"] .step-target { pointer-events: none; }

[data-phrase="1"] { --floor: #e84d43; --floor-deep: #b63039; --spark: #ffe066; }
[data-phrase="1"] .floor-grid { transform: scale(1.18) rotate(5deg); }
[data-phrase="1"] .floor-word-a::after { content: "UP"; }

[data-phrase="2"] { --floor: #7129b9; --floor-deep: #4a197f; --spark: #f6ed49; }
[data-phrase="2"] .floor-grid { transform: scale(1.22) rotate(-12deg); }

.finale {
  z-index: 10;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: radial-gradient(circle at 50% 48%, rgba(255,255,255,.15) 0 18%, transparent 18.5%);
  transition: opacity 700ms ease;
}

[data-state="finale"] .finale,
[data-state="complete"] .finale {
  opacity: 1;
  visibility: visible;
}

[data-state="finale"] .phrase-card,
[data-state="complete"] .phrase-card,
[data-state="finale"] .progress,
[data-state="complete"] .progress,
[data-state="finale"] .cue,
[data-state="complete"] .cue,
[data-state="finale"] .targets,
[data-state="complete"] .targets,
[data-state="finale"] .keyboard-hint,
[data-state="complete"] .keyboard-hint {
  opacity: 0;
  visibility: hidden;
}

[data-state="finale"],
[data-state="complete"] { background: #121443; }
[data-state="finale"] .floor-grid,
[data-state="complete"] .floor-grid { opacity: .18; }
[data-state="finale"] .floor-word,
[data-state="complete"] .floor-word { opacity: 0; }

.ghost-foot.encore {
  left: var(--final-x);
  top: var(--final-y);
  opacity: .94;
  transform: translate(-50%, -50%) rotate(var(--final-rotation)) scale(var(--final-scale, 1));
  transition-delay: var(--delay);
}

[data-state="finale"] .ghost-foot.encore { animation: encoreBounce 1.1s calc(1.25s + var(--delay)) var(--ease-step) 2; }

[data-state="finale"] .live-foot,
[data-state="complete"] .live-foot { width: clamp(5rem, 12vmin, 9rem); }
[data-state="finale"] .live-foot-left,
[data-state="complete"] .live-foot-left { --foot-x: 42%; --foot-y: 72%; --foot-rotation: -24deg; }
[data-state="finale"] .live-foot-right,
[data-state="complete"] .live-foot-right { --foot-x: 58%; --foot-y: 72%; --foot-rotation: 24deg; }
[data-state="finale"] .leg-left,
[data-state="complete"] .leg-left { --foot-x: 42%; --foot-y: 72%; --leg-angle: 14deg; }
[data-state="finale"] .leg-right,
[data-state="complete"] .leg-right { --foot-x: 58%; --foot-y: 72%; --leg-angle: -14deg; }

.final-copy {
  width: min(88vw, 52rem);
  padding-bottom: 8vh;
  text-align: center;
  opacity: 0;
  transform: scale(.86) rotate(-2deg);
  transition: opacity 700ms ease, transform 900ms var(--ease-step);
}

[data-state="complete"] .final-copy { opacity: 1; transform: scale(1) rotate(0); pointer-events: auto; }

.final-copy h2 {
  margin: .65rem 0 .8rem;
  color: var(--spark);
  text-transform: uppercase;
  font: 900 clamp(4rem, 13vw, 10rem)/.72 Impact, "Arial Black", sans-serif;
  letter-spacing: -.045em;
  text-shadow: .06em .06em 0 var(--left);
}

.final-copy > p:not(.eyebrow) {
  margin: 0 auto 1.4rem;
  font: italic 700 clamp(.95rem, 2vw, 1.25rem)/1.3 Georgia, serif;
}

.restart {
  min-height: 3.25rem;
  padding: .7rem 1.25rem;
  border: 2px solid var(--paper);
  border-radius: 999px;
  color: var(--paper);
  background: transparent;
  font-weight: 900;
  cursor: pointer;
}

.about-dialog {
  width: min(92vw, 34rem);
  max-height: min(80vh, 42rem);
  padding: 2rem;
  border: 0;
  border-radius: .25rem;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 1rem 1rem 0 var(--ink);
}

.about-dialog::backdrop { background: rgba(8,10,40,.76); backdrop-filter: blur(.25rem); }
.about-dialog h2 { margin: .55rem 0 1rem; font: 900 clamp(2rem, 7vw, 3.5rem)/.88 Impact, "Arial Black", sans-serif; text-transform: uppercase; }
.about-dialog p:not(.eyebrow) { line-height: 1.55; }
.about-close { position: absolute; top: .65rem; right: .75rem; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; color: var(--paper); background: var(--ink); font-size: 1.55rem; cursor: pointer; }

@keyframes targetIn {
  from { opacity: 0; transform: translate(-50%, -50%) rotate(calc(var(--rotation) - 18deg)) scale(.2); }
  to { opacity: 1; transform: translate(-50%, -50%) rotate(var(--rotation)) scale(1); }
}

@keyframes targetPulse {
  0%, 100% { box-shadow: 0 0 0 .4rem rgba(255,255,255,.12), .45rem .55rem 0 rgba(16,18,61,.48); }
  50% { box-shadow: 0 0 0 1rem rgba(255,255,255,.04), .25rem .32rem 0 rgba(16,18,61,.48); }
}

@keyframes targetLand {
  to { opacity: 0; transform: translate(-50%, -50%) rotate(var(--rotation)) scale(1.45); filter: brightness(1.3); }
}

@keyframes wrongStep {
  20% { transform: translate(calc(-50% - .6rem), -50%) rotate(var(--rotation)); }
  40% { transform: translate(calc(-50% + .55rem), -50%) rotate(var(--rotation)); }
  65% { transform: translate(calc(-50% - .25rem), -50%) rotate(var(--rotation)); }
}

@keyframes liveStamp {
  45% { transform: translate(-50%, -50%) rotate(var(--foot-rotation)) scale(1.13); filter: brightness(1.22); }
}

@keyframes ghostStamp {
  from { opacity: 0; transform: translate(-50%, -50%) rotate(var(--rotation)) scale(1.7); }
}

@keyframes cueFlip {
  50% { transform: translateX(-50%) rotateX(90deg); opacity: 0; }
}

@keyframes encoreBounce {
  40% { transform: translate(-50%, calc(-50% - 3.5vh)) rotate(calc(var(--final-rotation) + 8deg)) scale(calc(var(--final-scale, 1) * 1.16)); }
}

@media (pointer: coarse) {
  .wide-only { display: none; }
  .touch-only { display: inline; }
  .keyboard-hint { display: none; }
  .step-target { width: clamp(5.2rem, 19vw, 6.6rem); }
}

@media (max-width: 680px) {
  #experience { min-height: 500px; }
  .intro { justify-content: flex-end; gap: .8rem; padding: 13vh 1.15rem max(2rem, calc(env(safe-area-inset-bottom) + 1.25rem)); }
  .intro h1 { font-size: clamp(4.25rem, 22vw, 7rem); line-height: .75; }
  .intro-line { margin-top: .15rem; font-size: .96rem; }
  .begin { min-height: 3.35rem; margin-top: .15rem; box-shadow: .3rem .35rem 0 var(--ink); }
  .phrase-card { top: max(4rem, calc(env(safe-area-inset-top) + 3.5rem)); padding: .55rem .72rem .6rem; }
  .progress { top: max(4.5rem, calc(env(safe-area-inset-top) + 4rem)); }
  .cue { top: 18%; width: 82vw; font-size: 1.1rem; }
  .leg { height: 92vh; width: 1.5rem; }
  .live-foot { width: clamp(3.8rem, 16vw, 5.5rem); }
  .ghost-foot { width: clamp(2.1rem, 9vw, 3.2rem); }
  .ghost-foot::before { box-shadow: .78rem -.1rem 0 -.05rem var(--floor), .78rem -.1rem 0 .06rem var(--ghost-color), 1.42rem .14rem 0 -.09rem var(--floor), 1.42rem .14rem 0 .03rem var(--ghost-color); }
  .final-copy { padding-bottom: 3vh; }
  .final-copy h2 { font-size: clamp(3rem, 12vw, 5rem); }
  .about-dialog { padding: 1.5rem; }
}

@media (max-height: 620px) and (orientation: landscape) {
  .intro { padding-top: 16vh; gap: .55rem; }
  .intro h1 { font-size: min(18vh, 7rem); line-height: .78; }
  .intro-line { display: none; }
  .phrase-card { top: 3.5rem; }
  .cue { top: 11%; }
  .final-copy { padding-bottom: 0; }
  .final-copy h2 { font-size: 17vh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
}
.route-link {
  position: absolute;
  left: var(--link-x);
  top: var(--link-y);
  width: var(--link-length);
  height: .2rem;
  border-top: .18rem dashed color-mix(in srgb, var(--link-color) 72%, white 28%);
  opacity: .46;
  transform: rotate(var(--link-angle));
  transform-origin: 0 50%;
  transition: opacity 600ms ease, filter 600ms ease;
}

[data-state="finale"] .route-link,
[data-state="complete"] .route-link {
  opacity: .06;
  filter: blur(.12rem);
}