/* ---------- Hero runner (pixel mascot) ---------- */
.yk-run { position: relative; z-index: 1; min-width: 0; height: var(--yk-h, 0px); }
.yk-run[hidden] { display: none !important; }
.yk-run[data-mode="overlay"] { position: absolute; left: var(--yk-l, 0px); top: var(--yk-t, 0px); width: var(--yk-w, 0px); margin: 0; }
.yk-run[data-mode="lane"] { margin-bottom: var(--yk-mb, 0px); }
.yk-run canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 44px, #000 calc(100% - 64px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 44px, #000 calc(100% - 64px), transparent 100%); }
.yk-run[data-mode="lane"] canvas { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 36px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 36px), transparent 100%); }
.yk-run-hint { position: absolute; right: 0; top: 0; font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); opacity: 0; transform: translateY(4px); transition: opacity .4s ease, transform .5s var(--ease); pointer-events: none; }
.yk-run.is-hint .yk-run-hint { opacity: 1; transform: none; }