/*
  unfck.it — the landing skits (#114).

  The skit characters, walking through the page: in from the left edge, a line in the left margin,
  on behind the column of text, a second line in the right margin, and off. See
  src/lib/landing-skit.ts for the whole account.

  This file is the hand-written half: where things sit and what they look like. The build appends
  the other half below it — the sprites as custom properties, generated from the app's own
  src/lib/skit-art.ts, and every skit's keyframes, generated from landing/skits.json. No duration
  is written here, and no position is written there.

  Four things it has to keep true:

    - It never covers the page. The stage sits *under* the column (z-index -1, under the app list's
      own paper background), takes no pointer events, and only ever stops to talk in a margin, with
      a bubble no wider than that margin. Nothing here can sit on top of a link.
    - No colour but the page's. The bubble is paper on paper with an ink rule; the only colour is
      the app accent the sprite already wears.
    - Below 70rem there is no margin wide enough to talk in, so there is no skit. A phone gets the
      page exactly as it was.
    - Reduced motion gets a still: the first skit as a two-panel strip, nothing moving.

  The page stays editorial (see the note at the top of site.css). The characters are guests from
  the app, drawn in its pixels; the bubble they speak in is the landing's own type and rules.

  `rem` here is the landing's 16px, not the app's 20px.
*/

.lskits {
  display: none;
  /* The bubble's rule: ink on paper, but a full-strength light box on the dark page shouts. */
  --lsk-line: var(--ink);
}

@media (prefers-color-scheme: dark) {
  .lskits {
    --lsk-line: var(--muted);
  }
}

@media (min-width: 70rem) {
  .apps {
    position: relative;
  }

  /*
   * The stage: a zero-height line the width of the window, laid on the rule between the second and
   * third apps. An absolutely positioned grid child takes its grid area as its containing block, so
   * `grid-row: 3` and `bottom: 100%` put the ground on the top edge of the last app.
   */
  .lskits {
    display: block;
    position: absolute;
    grid-row: 3 / 4;
    grid-column: 1;
    bottom: 100%;
    /*
     * The width of the window, centred on the column — less a sliver either side. `100vw` counts
     * the scrollbar and the page does not, so a stage exactly `100vw` wide overhangs the page by
     * half a scrollbar and grows a horizontal one. Not a size container on the root either: any
     * containment on `html` or `body` stops the body's background propagating to the canvas, and
     * the body then paints its paper straight over a stage at z-index -1.
     */
    left: calc(50% - 50vw + var(--lsk-inset));
    width: calc(100vw - 2 * var(--lsk-inset));
    height: 0;
    /* Clip sideways, so a character off the edge is not a scrollbar; let bubbles rise upwards. */
    overflow-x: clip;
    overflow-y: visible;
    /* Under the app list's paper background, which is what makes it walk *behind* the text. */
    z-index: -1;
    pointer-events: none;
    user-select: none;

    /* One sprite pixel. A whole number, always: a fractional pixel leaves seams between shadows. */
    --lsk-px: 4px;
    --lsk-inset: 0.75rem;
    /* The column is `main`'s max-width, 40rem; the margins are what is left either side. */
    --lsk-col: 40rem;
    --lsk-margin: calc(50vw - var(--lsk-col) / 2);
    /* The middle of each margin, from the middle of the stage. `50%` is the stage's centre both
       where these are used as `left` and inside the track's transform, whose % is its own width —
       and the track is exactly as wide as the stage. */
    --lsk-mark-left: calc(50% - var(--lsk-col) / 4 - 25vw);
    --lsk-mark-right: calc(50% + var(--lsk-col) / 4 + 25vw);
  }

  @media (min-width: 110rem) {
    .lskits {
      --lsk-px: 5px;
    }
  }
}

.lskit,
.lskit-still {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
}

/* ── the walker ───────────────────────────────────────────────────────────── */

/* Full stage width, so the generated `translateX(%)` is a fraction of the page. */
.lskit-track {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  font-size: var(--lsk-px);

  --lsk-x-off-left: calc(var(--sw) * -1em);
  --lsk-x-left: calc(var(--lsk-mark-left) - var(--sw) * 0.5em);
  --lsk-x-right: calc(var(--lsk-mark-right) - var(--sw) * 0.5em);
  --lsk-x-off-right: calc(100% + 1em);
  /* Where it waits before its first turn: off the left edge. */
  transform: translateX(var(--lsk-x-off-left));
}

.lskit-body {
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(var(--sw) * 1em);
  height: calc(var(--sh) * 1em);
}

/* One element per frame, one box-shadow per lit pixel — the app's sprites, exactly. */
.lskit-sprite {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  font-size: var(--lsk-px);
  width: calc(var(--sw) * 1em);
  height: calc(var(--sh) * 1em);
  image-rendering: pixelated;
}

.lskit-sprite i {
  position: absolute;
  top: 0;
  left: 0;
  width: 1em;
  height: 1em;
  box-shadow: var(--lsk-f0);
}

.lskit-sprite i.f1 {
  box-shadow: var(--lsk-f1);
}

/* Hidden until the generated keyframes say otherwise, including before a skit's first turn. */
.lskit-standing,
.lskit-walking,
.lskit-say-1,
.lskit-say-2,
.lskit-extra {
  opacity: 0;
}

@keyframes lsk-frame-0 {
  0%, 49.99% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes lsk-frame-1 {
  0%, 49.99% { opacity: 0; }
  50%, 100% { opacity: 1; }
}

/* The walk cycle, at the app's six frames a second. */
.lskit-walking i.f0 {
  animation: lsk-frame-0 320ms steps(1, end) infinite;
}
.lskit-walking i.f1 {
  animation: lsk-frame-1 320ms steps(1, end) infinite;
}

/* An extra idles more slowly than anyone walks. */
.lskit-idle i.f0 {
  animation: lsk-frame-0 620ms steps(1, end) infinite;
}
.lskit-idle i.f1 {
  animation: lsk-frame-1 620ms steps(1, end) infinite;
}

/* ── an extra, standing in a margin ───────────────────────────────────────── */

/* On the outside of the mark, so the walker stops beside it rather than on it. */
.lskit-extra {
  position: absolute;
  bottom: 0;
}
.lskit-extra[data-side="left"] {
  left: calc(var(--lsk-mark-left) - 5.5rem);
}
.lskit-extra[data-side="right"] {
  left: calc(var(--lsk-mark-right) + 3.5rem);
}

/* ── the bubble ───────────────────────────────────────────────────────────── */

/*
 * Above whoever is speaking, centred on them, never wider than the margin they are standing in —
 * which is what keeps it off the column at every width the stage is drawn at.
 */
.lskit-bubble {
  position: absolute;
  bottom: calc(100% + 0.875rem);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(15rem, calc(var(--lsk-margin) - 3rem));
  margin: 0;
  padding: 0.5rem 0.75rem;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--lsk-line);
  box-shadow: 3px 3px 0 var(--accent);
  font-family: "Work Sans", system-ui, sans-serif;
  font-size: 0.875rem;
  line-height: 1.35;
  text-align: center;
}

/* The tail: a square with two borders, pointing down at the speaker. No rotation, so no
   anti-aliased diagonal. */
.lskit-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.4375rem;
  margin-left: -0.375rem;
  width: 0.75rem;
  height: 0.75rem;
  background: var(--paper);
  border-right: 1px solid var(--lsk-line);
  border-bottom: 1px solid var(--lsk-line);
}

/* ── reduced motion ───────────────────────────────────────────────────────── */

.lskit-still {
  display: none;
}

.lskit-figure {
  position: absolute;
  bottom: 0;
  font-size: var(--lsk-px);
  width: calc(var(--sw) * 1em);
  height: calc(var(--sh) * 1em);
}
.lskit-figure[data-side="left"] {
  left: calc(var(--lsk-mark-left) - var(--sw) * 0.5em);
}
.lskit-figure[data-side="right"] {
  left: calc(var(--lsk-mark-right) - var(--sw) * 0.5em);
}

@media (prefers-reduced-motion: reduce) {
  .lskits *,
  .lskits *::after {
    animation: none !important;
  }
  .lskit {
    display: none;
  }
  .lskit-still {
    display: block;
  }
  .lskit-still .lskit-extra {
    opacity: 1;
  }
}

@media print {
  .lskits {
    display: none !important;
  }
}

/* ── generated by scripts/build-landing.mjs from landing/skits.json — do not edit ── */

.lsk-walker-lead {
  --sw: 11;
  --sh: 16;
  --lsk-f0: 3em 0em 0 #101014, 4em 0em 0 #101014, 5em 0em 0 #101014, 6em 0em 0 #101014, 7em 0em 0 #101014, 2em 1em 0 #101014, 3em 1em 0 #3c3a44, 4em 1em 0 #3c3a44, 5em 1em 0 #3c3a44, 6em 1em 0 #3c3a44, 7em 1em 0 #3c3a44, 8em 1em 0 #101014, 1em 2em 0 #101014, 2em 2em 0 #3c3a44, 3em 2em 0 #3c3a44, 4em 2em 0 #3c3a44, 5em 2em 0 #3c3a44, 6em 2em 0 #3c3a44, 7em 2em 0 #3c3a44, 8em 2em 0 #3c3a44, 9em 2em 0 #101014, 1em 3em 0 #101014, 2em 3em 0 #c9a88a, 3em 3em 0 #c9a88a, 4em 3em 0 #c9a88a, 5em 3em 0 #c9a88a, 6em 3em 0 #c9a88a, 7em 3em 0 #c9a88a, 8em 3em 0 #c9a88a, 9em 3em 0 #101014, 1em 4em 0 #101014, 2em 4em 0 #c9a88a, 3em 4em 0 #101014, 4em 4em 0 #c9a88a, 5em 4em 0 #c9a88a, 6em 4em 0 #c9a88a, 7em 4em 0 #101014, 8em 4em 0 #c9a88a, 9em 4em 0 #101014, 1em 5em 0 #101014, 2em 5em 0 #c9a88a, 3em 5em 0 #c9a88a, 4em 5em 0 #c9a88a, 5em 5em 0 #c9a88a, 6em 5em 0 #c9a88a, 7em 5em 0 #c9a88a, 8em 5em 0 #c9a88a, 9em 5em 0 #101014, 1em 6em 0 #101014, 2em 6em 0 #c9a88a, 3em 6em 0 #c9a88a, 4em 6em 0 #101014, 5em 6em 0 #101014, 6em 6em 0 #101014, 7em 6em 0 #c9a88a, 8em 6em 0 #c9a88a, 9em 6em 0 #101014, 2em 7em 0 #101014, 3em 7em 0 #c9a88a, 4em 7em 0 #c9a88a, 5em 7em 0 #c9a88a, 6em 7em 0 #c9a88a, 7em 7em 0 #c9a88a, 8em 7em 0 #101014, 2em 8em 0 #101014, 3em 8em 0 var(--accent), 4em 8em 0 var(--accent), 5em 8em 0 var(--accent), 6em 8em 0 var(--accent), 7em 8em 0 var(--accent), 8em 8em 0 #101014, 1em 9em 0 #101014, 2em 9em 0 var(--accent), 3em 9em 0 var(--accent), 4em 9em 0 var(--accent), 5em 9em 0 var(--accent), 6em 9em 0 var(--accent), 7em 9em 0 var(--accent), 8em 9em 0 var(--accent), 9em 9em 0 #101014, 1em 10em 0 #101014, 2em 10em 0 var(--accent), 3em 10em 0 var(--accent), 4em 10em 0 var(--accent), 5em 10em 0 var(--accent), 6em 10em 0 var(--accent), 7em 10em 0 var(--accent), 8em 10em 0 var(--accent), 9em 10em 0 #101014, 1em 11em 0 #101014, 2em 11em 0 var(--accent), 3em 11em 0 var(--accent), 4em 11em 0 var(--accent), 5em 11em 0 var(--accent), 6em 11em 0 var(--accent), 7em 11em 0 var(--accent), 8em 11em 0 var(--accent), 9em 11em 0 #101014, 2em 12em 0 #101014, 3em 12em 0 #2f2f3a, 4em 12em 0 #2f2f3a, 5em 12em 0 #2f2f3a, 6em 12em 0 #2f2f3a, 7em 12em 0 #2f2f3a, 8em 12em 0 #101014, 2em 13em 0 #101014, 3em 13em 0 #2f2f3a, 4em 13em 0 #2f2f3a, 5em 13em 0 #101014, 6em 13em 0 #2f2f3a, 7em 13em 0 #2f2f3a, 8em 13em 0 #101014, 2em 14em 0 #101014, 3em 14em 0 #2f2f3a, 4em 14em 0 #101014, 6em 14em 0 #101014, 7em 14em 0 #2f2f3a, 8em 14em 0 #101014, 2em 15em 0 #101014, 3em 15em 0 #101014, 4em 15em 0 #101014, 6em 15em 0 #101014, 7em 15em 0 #101014, 8em 15em 0 #101014;
  --lsk-f1: 3em 1em 0 #101014, 4em 1em 0 #101014, 5em 1em 0 #101014, 6em 1em 0 #101014, 7em 1em 0 #101014, 2em 2em 0 #101014, 3em 2em 0 #3c3a44, 4em 2em 0 #3c3a44, 5em 2em 0 #3c3a44, 6em 2em 0 #3c3a44, 7em 2em 0 #3c3a44, 8em 2em 0 #101014, 1em 3em 0 #101014, 2em 3em 0 #3c3a44, 3em 3em 0 #3c3a44, 4em 3em 0 #3c3a44, 5em 3em 0 #3c3a44, 6em 3em 0 #3c3a44, 7em 3em 0 #3c3a44, 8em 3em 0 #3c3a44, 9em 3em 0 #101014, 1em 4em 0 #101014, 2em 4em 0 #c9a88a, 3em 4em 0 #c9a88a, 4em 4em 0 #c9a88a, 5em 4em 0 #c9a88a, 6em 4em 0 #c9a88a, 7em 4em 0 #c9a88a, 8em 4em 0 #c9a88a, 9em 4em 0 #101014, 1em 5em 0 #101014, 2em 5em 0 #c9a88a, 3em 5em 0 #101014, 4em 5em 0 #c9a88a, 5em 5em 0 #c9a88a, 6em 5em 0 #c9a88a, 7em 5em 0 #101014, 8em 5em 0 #c9a88a, 9em 5em 0 #101014, 1em 6em 0 #101014, 2em 6em 0 #c9a88a, 3em 6em 0 #c9a88a, 4em 6em 0 #c9a88a, 5em 6em 0 #c9a88a, 6em 6em 0 #c9a88a, 7em 6em 0 #c9a88a, 8em 6em 0 #c9a88a, 9em 6em 0 #101014, 1em 7em 0 #101014, 2em 7em 0 #c9a88a, 3em 7em 0 #c9a88a, 4em 7em 0 #101014, 5em 7em 0 #101014, 6em 7em 0 #101014, 7em 7em 0 #c9a88a, 8em 7em 0 #c9a88a, 9em 7em 0 #101014, 2em 8em 0 #101014, 3em 8em 0 #c9a88a, 4em 8em 0 #c9a88a, 5em 8em 0 #c9a88a, 6em 8em 0 #c9a88a, 7em 8em 0 #c9a88a, 8em 8em 0 #101014, 2em 9em 0 #101014, 3em 9em 0 var(--accent), 4em 9em 0 var(--accent), 5em 9em 0 var(--accent), 6em 9em 0 var(--accent), 7em 9em 0 var(--accent), 8em 9em 0 #101014, 1em 10em 0 #101014, 2em 10em 0 var(--accent), 3em 10em 0 var(--accent), 4em 10em 0 var(--accent), 5em 10em 0 var(--accent), 6em 10em 0 var(--accent), 7em 10em 0 var(--accent), 8em 10em 0 var(--accent), 9em 10em 0 #101014, 1em 11em 0 #101014, 2em 11em 0 var(--accent), 3em 11em 0 var(--accent), 4em 11em 0 var(--accent), 5em 11em 0 var(--accent), 6em 11em 0 var(--accent), 7em 11em 0 var(--accent), 8em 11em 0 var(--accent), 9em 11em 0 #101014, 2em 12em 0 #101014, 3em 12em 0 #2f2f3a, 4em 12em 0 #2f2f3a, 5em 12em 0 #2f2f3a, 6em 12em 0 #2f2f3a, 7em 12em 0 #2f2f3a, 8em 12em 0 #101014, 1em 13em 0 #101014, 2em 13em 0 #2f2f3a, 3em 13em 0 #2f2f3a, 7em 13em 0 #2f2f3a, 8em 13em 0 #2f2f3a, 9em 13em 0 #101014, 1em 14em 0 #101014, 2em 14em 0 #2f2f3a, 8em 14em 0 #2f2f3a, 9em 14em 0 #101014, 1em 15em 0 #101014, 2em 15em 0 #101014, 3em 15em 0 #101014, 7em 15em 0 #101014, 8em 15em 0 #101014, 9em 15em 0 #101014;
}

.lsk-walker-pigeon {
  --sw: 7;
  --sh: 5;
  --lsk-f0: 2em 0em 0 #101014, 3em 0em 0 #101014, 4em 0em 0 #101014, 1em 1em 0 #101014, 2em 1em 0 #6d7385, 3em 1em 0 #6d7385, 4em 1em 0 #6d7385, 5em 1em 0 #101014, 0em 2em 0 #101014, 1em 2em 0 #6d7385, 2em 2em 0 #101014, 3em 2em 0 #6d7385, 4em 2em 0 #6d7385, 5em 2em 0 #464b5c, 6em 2em 0 #101014, 0em 3em 0 #101014, 1em 3em 0 #6d7385, 2em 3em 0 #6d7385, 3em 3em 0 #6d7385, 4em 3em 0 #464b5c, 5em 3em 0 #464b5c, 6em 3em 0 #101014, 1em 4em 0 #101014, 2em 4em 0 #101014, 4em 4em 0 #101014, 5em 4em 0 #101014;
  --lsk-f1: 2em 1em 0 #101014, 3em 1em 0 #101014, 4em 1em 0 #101014, 1em 2em 0 #101014, 2em 2em 0 #6d7385, 3em 2em 0 #6d7385, 4em 2em 0 #6d7385, 5em 2em 0 #101014, 0em 3em 0 #101014, 1em 3em 0 #6d7385, 2em 3em 0 #101014, 3em 3em 0 #6d7385, 4em 3em 0 #6d7385, 5em 3em 0 #464b5c, 6em 3em 0 #101014, 0em 4em 0 #101014, 1em 4em 0 #c98b3a, 2em 4em 0 #c98b3a, 4em 4em 0 #c98b3a, 5em 4em 0 #c98b3a, 6em 4em 0 #101014;
}

.lsk-extra-pigeon {
  --sw: 7;
  --sh: 5;
  --lsk-f0: 2em 0em 0 #101014, 3em 0em 0 #101014, 4em 0em 0 #101014, 1em 1em 0 #101014, 2em 1em 0 #6d7385, 3em 1em 0 #6d7385, 4em 1em 0 #6d7385, 5em 1em 0 #101014, 0em 2em 0 #101014, 1em 2em 0 #6d7385, 2em 2em 0 #101014, 3em 2em 0 #6d7385, 4em 2em 0 #6d7385, 5em 2em 0 #464b5c, 6em 2em 0 #101014, 0em 3em 0 #101014, 1em 3em 0 #6d7385, 2em 3em 0 #6d7385, 3em 3em 0 #6d7385, 4em 3em 0 #464b5c, 5em 3em 0 #464b5c, 6em 3em 0 #101014, 1em 4em 0 #101014, 2em 4em 0 #101014, 4em 4em 0 #101014, 5em 4em 0 #101014;
  --lsk-f1: 2em 1em 0 #101014, 3em 1em 0 #101014, 4em 1em 0 #101014, 1em 2em 0 #101014, 2em 2em 0 #6d7385, 3em 2em 0 #6d7385, 4em 2em 0 #6d7385, 5em 2em 0 #101014, 0em 3em 0 #101014, 1em 3em 0 #6d7385, 2em 3em 0 #101014, 3em 3em 0 #6d7385, 4em 3em 0 #6d7385, 5em 3em 0 #464b5c, 6em 3em 0 #101014, 0em 4em 0 #101014, 1em 4em 0 #c98b3a, 2em 4em 0 #c98b3a, 4em 4em 0 #c98b3a, 5em 4em 0 #c98b3a, 6em 4em 0 #101014;
}

.lsk-extra-cat {
  --sw: 10;
  --sh: 8;
  --lsk-f0: 2em 0em 0 #101014, 7em 0em 0 #101014, 2em 1em 0 #101014, 3em 1em 0 #8a6a4a, 4em 1em 0 #101014, 5em 1em 0 #101014, 6em 1em 0 #101014, 7em 1em 0 #8a6a4a, 8em 1em 0 #101014, 1em 2em 0 #101014, 2em 2em 0 #8a6a4a, 3em 2em 0 #8a6a4a, 4em 2em 0 #8a6a4a, 5em 2em 0 #8a6a4a, 6em 2em 0 #8a6a4a, 7em 2em 0 #8a6a4a, 8em 2em 0 #101014, 1em 3em 0 #101014, 2em 3em 0 #8a6a4a, 3em 3em 0 #d8e04a, 4em 3em 0 #101014, 5em 3em 0 #101014, 6em 3em 0 #d8e04a, 7em 3em 0 #8a6a4a, 8em 3em 0 #101014, 1em 4em 0 #101014, 2em 4em 0 #8a6a4a, 3em 4em 0 #8a6a4a, 4em 4em 0 #8a6a4a, 5em 4em 0 #8a6a4a, 6em 4em 0 #8a6a4a, 7em 4em 0 #8a6a4a, 8em 4em 0 #101014, 1em 5em 0 #101014, 2em 5em 0 #8a6a4a, 3em 5em 0 #8a6a4a, 4em 5em 0 #8a6a4a, 5em 5em 0 #8a6a4a, 6em 5em 0 #8a6a4a, 7em 5em 0 #8a6a4a, 8em 5em 0 #101014, 9em 5em 0 #101014, 1em 6em 0 #101014, 2em 6em 0 #8a6a4a, 3em 6em 0 #8a6a4a, 4em 6em 0 #8a6a4a, 5em 6em 0 #8a6a4a, 6em 6em 0 #8a6a4a, 7em 6em 0 #8a6a4a, 8em 6em 0 #101014, 2em 7em 0 #101014, 3em 7em 0 #101014, 4em 7em 0 #101014, 5em 7em 0 #101014, 6em 7em 0 #101014, 7em 7em 0 #101014;
  --lsk-f1: 2em 0em 0 #101014, 7em 0em 0 #101014, 2em 1em 0 #101014, 3em 1em 0 #8a6a4a, 4em 1em 0 #101014, 5em 1em 0 #101014, 6em 1em 0 #101014, 7em 1em 0 #8a6a4a, 8em 1em 0 #101014, 1em 2em 0 #101014, 2em 2em 0 #8a6a4a, 3em 2em 0 #8a6a4a, 4em 2em 0 #8a6a4a, 5em 2em 0 #8a6a4a, 6em 2em 0 #8a6a4a, 7em 2em 0 #8a6a4a, 8em 2em 0 #101014, 1em 3em 0 #101014, 2em 3em 0 #8a6a4a, 3em 3em 0 #d8e04a, 4em 3em 0 #101014, 5em 3em 0 #101014, 6em 3em 0 #d8e04a, 7em 3em 0 #8a6a4a, 8em 3em 0 #101014, 1em 4em 0 #101014, 2em 4em 0 #8a6a4a, 3em 4em 0 #8a6a4a, 4em 4em 0 #8a6a4a, 5em 4em 0 #8a6a4a, 6em 4em 0 #8a6a4a, 7em 4em 0 #8a6a4a, 8em 4em 0 #101014, 1em 5em 0 #101014, 2em 5em 0 #8a6a4a, 3em 5em 0 #8a6a4a, 4em 5em 0 #8a6a4a, 5em 5em 0 #8a6a4a, 6em 5em 0 #8a6a4a, 7em 5em 0 #8a6a4a, 8em 5em 0 #101014, 1em 6em 0 #101014, 2em 6em 0 #8a6a4a, 3em 6em 0 #8a6a4a, 4em 6em 0 #8a6a4a, 5em 6em 0 #8a6a4a, 6em 6em 0 #8a6a4a, 7em 6em 0 #8a6a4a, 8em 6em 0 #101014, 9em 6em 0 #101014, 2em 7em 0 #101014, 3em 7em 0 #101014, 4em 7em 0 #101014, 5em 7em 0 #101014, 6em 7em 0 #101014, 7em 7em 0 #101014, 8em 7em 0 #101014;
}

.lskit-0 {
  --accent: var(--untried);
}

@keyframes lsk-0-move {
  0% { transform: translateX(var(--lsk-x-off-left)); }
  1.0868% { transform: translateX(var(--lsk-x-left)); }
  3.7263% { transform: translateX(var(--lsk-x-left)); }
  7.2973% { transform: translateX(var(--lsk-x-right)); }
  10.4996% { transform: translateX(var(--lsk-x-right)); }
  11.5864% { transform: translateX(var(--lsk-x-off-right)); }
  100% { transform: translateX(var(--lsk-x-off-right)); }
}

@keyframes lsk-0-walking {
  0% { opacity: 1; }
  1.0868% { opacity: 0; }
  3.7263% { opacity: 1; }
  7.2973% { opacity: 0; }
  10.4996% { opacity: 1; }
  11.5864% { opacity: 0; }
}

@keyframes lsk-0-standing {
  0% { opacity: 0; }
  1.0868% { opacity: 1; }
  3.7263% { opacity: 0; }
  7.2973% { opacity: 1; }
  10.4996% { opacity: 0; }
}

@keyframes lsk-0-say-1 {
  0% { opacity: 0; }
  1.3197% { opacity: 0.33; }
  1.3974% { opacity: 0.67; }
  1.475% { opacity: 1; }
  3.2605% { opacity: 0.67; }
  3.3381% { opacity: 0.33; }
  3.4158% { opacity: 0; }
}

@keyframes lsk-0-say-2 {
  0% { opacity: 0; }
  7.5302% { opacity: 0.33; }
  7.6078% { opacity: 0.67; }
  7.6854% { opacity: 1; }
  10.0338% { opacity: 0.67; }
  10.1114% { opacity: 0.33; }
  10.189% { opacity: 0; }
}

.lskit-0 .lskit-track { animation: lsk-0-move 128815ms linear 1500ms infinite; }
.lskit-0 .lskit-walking { animation: lsk-0-walking 128815ms steps(1, end) 1500ms infinite; }
.lskit-0 .lskit-standing { animation: lsk-0-standing 128815ms steps(1, end) 1500ms infinite; }
.lskit-0 .lskit-say-1 { animation: lsk-0-say-1 128815ms steps(1, end) 1500ms infinite; }
.lskit-0 .lskit-say-2 { animation: lsk-0-say-2 128815ms steps(1, end) 1500ms infinite; }

.lskit-1 {
  --accent: var(--thickskin);
}

@keyframes lsk-1-move {
  0% { transform: translateX(var(--lsk-x-off-left)); }
  1.0868% { transform: translateX(var(--lsk-x-left)); }
  4.0096% { transform: translateX(var(--lsk-x-left)); }
  7.5806% { transform: translateX(var(--lsk-x-right)); }
  10.2589% { transform: translateX(var(--lsk-x-right)); }
  11.3457% { transform: translateX(var(--lsk-x-off-right)); }
  100% { transform: translateX(var(--lsk-x-off-right)); }
}

@keyframes lsk-1-walking {
  0% { opacity: 1; }
  1.0868% { opacity: 0; }
  4.0096% { opacity: 1; }
  7.5806% { opacity: 0; }
  10.2589% { opacity: 1; }
  11.3457% { opacity: 0; }
}

@keyframes lsk-1-standing {
  0% { opacity: 0; }
  1.0868% { opacity: 1; }
  4.0096% { opacity: 0; }
  7.5806% { opacity: 1; }
  10.2589% { opacity: 0; }
}

@keyframes lsk-1-say-1 {
  0% { opacity: 0; }
  1.3197% { opacity: 0.33; }
  1.3974% { opacity: 0.67; }
  1.475% { opacity: 1; }
  3.5438% { opacity: 0.67; }
  3.6215% { opacity: 0.33; }
  3.6991% { opacity: 0; }
}

@keyframes lsk-1-say-2 {
  0% { opacity: 0; }
  7.8135% { opacity: 0.33; }
  7.8912% { opacity: 0.67; }
  7.9688% { opacity: 1; }
  9.7931% { opacity: 0.67; }
  9.8707% { opacity: 0.33; }
  9.9484% { opacity: 0; }
}

.lskit-1 .lskit-track { animation: lsk-1-move 128815ms linear 19925ms infinite; }
.lskit-1 .lskit-walking { animation: lsk-1-walking 128815ms steps(1, end) 19925ms infinite; }
.lskit-1 .lskit-standing { animation: lsk-1-standing 128815ms steps(1, end) 19925ms infinite; }
.lskit-1 .lskit-say-1 { animation: lsk-1-say-1 128815ms steps(1, end) 19925ms infinite; }
.lskit-1 .lskit-say-2 { animation: lsk-1-say-2 128815ms steps(1, end) 19925ms infinite; }

.lskit-2 {
  --accent: var(--comeback);
}

@keyframes lsk-2-move {
  0% { transform: translateX(var(--lsk-x-off-left)); }
  1.0868% { transform: translateX(var(--lsk-x-left)); }
  4.0795% { transform: translateX(var(--lsk-x-left)); }
  7.6505% { transform: translateX(var(--lsk-x-right)); }
  11.1322% { transform: translateX(var(--lsk-x-right)); }
  12.2191% { transform: translateX(var(--lsk-x-off-right)); }
  100% { transform: translateX(var(--lsk-x-off-right)); }
}

@keyframes lsk-2-walking {
  0% { opacity: 1; }
  1.0868% { opacity: 0; }
  4.0795% { opacity: 1; }
  7.6505% { opacity: 0; }
  11.1322% { opacity: 1; }
  12.2191% { opacity: 0; }
}

@keyframes lsk-2-standing {
  0% { opacity: 0; }
  1.0868% { opacity: 1; }
  4.0795% { opacity: 0; }
  7.6505% { opacity: 1; }
  11.1322% { opacity: 0; }
}

@keyframes lsk-2-say-1 {
  0% { opacity: 0; }
  1.3197% { opacity: 0.33; }
  1.3974% { opacity: 0.67; }
  1.475% { opacity: 1; }
  3.6137% { opacity: 0.67; }
  3.6913% { opacity: 0.33; }
  3.769% { opacity: 0; }
}

@keyframes lsk-2-say-2 {
  0% { opacity: 0; }
  7.8834% { opacity: 0.33; }
  7.961% { opacity: 0.67; }
  8.0387% { opacity: 1; }
  10.6665% { opacity: 0.67; }
  10.7441% { opacity: 0.33; }
  10.8217% { opacity: 0; }
}

@keyframes lsk-2-extra {
  0% { opacity: 0.33; }
  0.0776% { opacity: 0.67; }
  0.1553% { opacity: 1; }
  12.2191% { opacity: 0.67; }
  12.2967% { opacity: 0.33; }
  12.3743% { opacity: 0; }
}

.lskit-2 .lskit-track { animation: lsk-2-move 128815ms linear 38040ms infinite; }
.lskit-2 .lskit-walking { animation: lsk-2-walking 128815ms steps(1, end) 38040ms infinite; }
.lskit-2 .lskit-standing { animation: lsk-2-standing 128815ms steps(1, end) 38040ms infinite; }
.lskit-2 .lskit-say-1 { animation: lsk-2-say-1 128815ms steps(1, end) 38040ms infinite; }
.lskit-2 .lskit-say-2 { animation: lsk-2-say-2 128815ms steps(1, end) 38040ms infinite; }
.lskit-2 .lskit-extra { animation: lsk-2-extra 128815ms steps(1, end) 38040ms infinite; }

.lskit-3 {
  --accent: var(--untried);
}

@keyframes lsk-3-move {
  0% { transform: translateX(var(--lsk-x-off-left)); }
  1.0868% { transform: translateX(var(--lsk-x-left)); }
  4.1843% { transform: translateX(var(--lsk-x-left)); }
  7.7553% { transform: translateX(var(--lsk-x-right)); }
  10.6432% { transform: translateX(var(--lsk-x-right)); }
  11.73% { transform: translateX(var(--lsk-x-off-right)); }
  100% { transform: translateX(var(--lsk-x-off-right)); }
}

@keyframes lsk-3-walking {
  0% { opacity: 1; }
  1.0868% { opacity: 0; }
  4.1843% { opacity: 1; }
  7.7553% { opacity: 0; }
  10.6432% { opacity: 1; }
  11.73% { opacity: 0; }
}

@keyframes lsk-3-standing {
  0% { opacity: 0; }
  1.0868% { opacity: 1; }
  4.1843% { opacity: 0; }
  7.7553% { opacity: 1; }
  10.6432% { opacity: 0; }
}

@keyframes lsk-3-say-1 {
  0% { opacity: 0; }
  1.3197% { opacity: 0.33; }
  1.3974% { opacity: 0.67; }
  1.475% { opacity: 1; }
  3.7185% { opacity: 0.67; }
  3.7961% { opacity: 0.33; }
  3.8738% { opacity: 0; }
}

@keyframes lsk-3-say-2 {
  0% { opacity: 0; }
  7.9882% { opacity: 0.33; }
  8.0658% { opacity: 0.67; }
  8.1435% { opacity: 1; }
  10.1774% { opacity: 0.67; }
  10.255% { opacity: 0.33; }
  10.3326% { opacity: 0; }
}

.lskit-3 .lskit-track { animation: lsk-3-move 128815ms linear 57280ms infinite; }
.lskit-3 .lskit-walking { animation: lsk-3-walking 128815ms steps(1, end) 57280ms infinite; }
.lskit-3 .lskit-standing { animation: lsk-3-standing 128815ms steps(1, end) 57280ms infinite; }
.lskit-3 .lskit-say-1 { animation: lsk-3-say-1 128815ms steps(1, end) 57280ms infinite; }
.lskit-3 .lskit-say-2 { animation: lsk-3-say-2 128815ms steps(1, end) 57280ms infinite; }

.lskit-4 {
  --accent: var(--untried);
}

@keyframes lsk-4-move {
  0% { transform: translateX(var(--lsk-x-off-left)); }
  1.0868% { transform: translateX(var(--lsk-x-left)); }
  3.9747% { transform: translateX(var(--lsk-x-left)); }
  7.5457% { transform: translateX(var(--lsk-x-right)); }
  10.1851% { transform: translateX(var(--lsk-x-right)); }
  11.272% { transform: translateX(var(--lsk-x-off-right)); }
  100% { transform: translateX(var(--lsk-x-off-right)); }
}

@keyframes lsk-4-walking {
  0% { opacity: 1; }
  1.0868% { opacity: 0; }
  3.9747% { opacity: 1; }
  7.5457% { opacity: 0; }
  10.1851% { opacity: 1; }
  11.272% { opacity: 0; }
}

@keyframes lsk-4-standing {
  0% { opacity: 0; }
  1.0868% { opacity: 1; }
  3.9747% { opacity: 0; }
  7.5457% { opacity: 1; }
  10.1851% { opacity: 0; }
}

@keyframes lsk-4-say-1 {
  0% { opacity: 0; }
  1.3197% { opacity: 0.33; }
  1.3974% { opacity: 0.67; }
  1.475% { opacity: 1; }
  3.5089% { opacity: 0.67; }
  3.5865% { opacity: 0.33; }
  3.6642% { opacity: 0; }
}

@keyframes lsk-4-say-2 {
  0% { opacity: 0; }
  7.7786% { opacity: 0.33; }
  7.8562% { opacity: 0.67; }
  7.9339% { opacity: 1; }
  9.7194% { opacity: 0.67; }
  9.797% { opacity: 0.33; }
  9.8746% { opacity: 0; }
}

.lskit-4 .lskit-track { animation: lsk-4-move 128815ms linear 75890ms infinite; }
.lskit-4 .lskit-walking { animation: lsk-4-walking 128815ms steps(1, end) 75890ms infinite; }
.lskit-4 .lskit-standing { animation: lsk-4-standing 128815ms steps(1, end) 75890ms infinite; }
.lskit-4 .lskit-say-1 { animation: lsk-4-say-1 128815ms steps(1, end) 75890ms infinite; }
.lskit-4 .lskit-say-2 { animation: lsk-4-say-2 128815ms steps(1, end) 75890ms infinite; }

.lskit-5 {
  --accent: var(--thickskin);
}

@keyframes lsk-5-move {
  0% { transform: translateX(var(--lsk-x-off-left)); }
  1.0868% { transform: translateX(var(--lsk-x-left)); }
  4.0795% { transform: translateX(var(--lsk-x-left)); }
  7.6505% { transform: translateX(var(--lsk-x-right)); }
  10.3637% { transform: translateX(var(--lsk-x-right)); }
  11.4505% { transform: translateX(var(--lsk-x-off-right)); }
  100% { transform: translateX(var(--lsk-x-off-right)); }
}

@keyframes lsk-5-walking {
  0% { opacity: 1; }
  1.0868% { opacity: 0; }
  4.0795% { opacity: 1; }
  7.6505% { opacity: 0; }
  10.3637% { opacity: 1; }
  11.4505% { opacity: 0; }
}

@keyframes lsk-5-standing {
  0% { opacity: 0; }
  1.0868% { opacity: 1; }
  4.0795% { opacity: 0; }
  7.6505% { opacity: 1; }
  10.3637% { opacity: 0; }
}

@keyframes lsk-5-say-1 {
  0% { opacity: 0; }
  1.3197% { opacity: 0.33; }
  1.3974% { opacity: 0.67; }
  1.475% { opacity: 1; }
  3.6137% { opacity: 0.67; }
  3.6913% { opacity: 0.33; }
  3.769% { opacity: 0; }
}

@keyframes lsk-5-say-2 {
  0% { opacity: 0; }
  7.8834% { opacity: 0.33; }
  7.961% { opacity: 0.67; }
  8.0387% { opacity: 1; }
  9.8979% { opacity: 0.67; }
  9.9755% { opacity: 0.33; }
  10.0532% { opacity: 0; }
}

@keyframes lsk-5-extra {
  0% { opacity: 0.33; }
  0.0776% { opacity: 0.67; }
  0.1553% { opacity: 1; }
  11.4505% { opacity: 0.67; }
  11.5282% { opacity: 0.33; }
  11.6058% { opacity: 0; }
}

.lskit-5 .lskit-track { animation: lsk-5-move 128815ms linear 93910ms infinite; }
.lskit-5 .lskit-walking { animation: lsk-5-walking 128815ms steps(1, end) 93910ms infinite; }
.lskit-5 .lskit-standing { animation: lsk-5-standing 128815ms steps(1, end) 93910ms infinite; }
.lskit-5 .lskit-say-1 { animation: lsk-5-say-1 128815ms steps(1, end) 93910ms infinite; }
.lskit-5 .lskit-say-2 { animation: lsk-5-say-2 128815ms steps(1, end) 93910ms infinite; }
.lskit-5 .lskit-extra { animation: lsk-5-extra 128815ms steps(1, end) 93910ms infinite; }

.lskit-6 {
  --accent: var(--comeback);
}

@keyframes lsk-6-move {
  0% { transform: translateX(var(--lsk-x-off-left)); }
  1.0868% { transform: translateX(var(--lsk-x-left)); }
  3.7263% { transform: translateX(var(--lsk-x-left)); }
  7.2973% { transform: translateX(var(--lsk-x-right)); }
  10.29% { transform: translateX(var(--lsk-x-right)); }
  11.3768% { transform: translateX(var(--lsk-x-off-right)); }
  100% { transform: translateX(var(--lsk-x-off-right)); }
}

@keyframes lsk-6-walking {
  0% { opacity: 1; }
  1.0868% { opacity: 0; }
  3.7263% { opacity: 1; }
  7.2973% { opacity: 0; }
  10.29% { opacity: 1; }
  11.3768% { opacity: 0; }
}

@keyframes lsk-6-standing {
  0% { opacity: 0; }
  1.0868% { opacity: 1; }
  3.7263% { opacity: 0; }
  7.2973% { opacity: 1; }
  10.29% { opacity: 0; }
}

@keyframes lsk-6-say-1 {
  0% { opacity: 0; }
  1.3197% { opacity: 0.33; }
  1.3974% { opacity: 0.67; }
  1.475% { opacity: 1; }
  3.2605% { opacity: 0.67; }
  3.3381% { opacity: 0.33; }
  3.4158% { opacity: 0; }
}

@keyframes lsk-6-say-2 {
  0% { opacity: 0; }
  7.5302% { opacity: 0.33; }
  7.6078% { opacity: 0.67; }
  7.6854% { opacity: 1; }
  9.8242% { opacity: 0.67; }
  9.9018% { opacity: 0.33; }
  9.9794% { opacity: 0; }
}

.lskit-6 .lskit-track { animation: lsk-6-move 128815ms linear 112160ms infinite; }
.lskit-6 .lskit-walking { animation: lsk-6-walking 128815ms steps(1, end) 112160ms infinite; }
.lskit-6 .lskit-standing { animation: lsk-6-standing 128815ms steps(1, end) 112160ms infinite; }
.lskit-6 .lskit-say-1 { animation: lsk-6-say-1 128815ms steps(1, end) 112160ms infinite; }
.lskit-6 .lskit-say-2 { animation: lsk-6-say-2 128815ms steps(1, end) 112160ms infinite; }