/* The homepage loop. Generated by scripts/loop_anim.py; edit it there. */
/* --w-media (site.css): the same edges as the hero window and the screenshot plates. */
.loop-anim {
  --loop-width: max(100%, var(--w-media));
  width: var(--loop-width);
  margin: 8px calc((100% - var(--loop-width)) / 2) 0;
  display: grid;
  gap: 10px;
  justify-items: end;
}
.loop-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  border-radius: var(--r-plate);
  background: var(--sand);
  container-type: inline-size;
  /* The drawing's layers stack inside the frame, so none of them rises above the page, such as
     the hero's open theme menu and the clear layer that closes it. */
  isolation: isolate;
}
/* The window follows the Mac's appearance, as the hero window does: the Dawn theme's light
   palette, or its night one (hero.css, from the kit). The terminal is dark in both. --t starts
   the loop with the window already open, so the frame never arrives empty. */
.loop-stage {
  --u: calc(100cqw / 1600);
  --t: 2.4s;
  --lw-bg: #FFFDFB; --lw-fg: #26211F; --lw-bar: #FFFFFF; --lw-bar-rule: #E6E6E6;
  --lw-pill: #FFFFFF; --lw-pill-edge: rgba(0,0,0,.08); --lw-seg: #F2F2F2; --lw-seg-on: #DCDCDC;
  --lw-side: #F4EEEA; --lw-side-rule: #E6DDD6; --lw-tab: #E9E1DB; --lw-rule: #EADFD8;
  --lw-accent: #C8471B; --lw-on-accent: #FFFFFF; --lw-select: #F2C6B3;
  --lw-glow: rgba(200,71,27,.28); --lw-glow-0: rgba(200,71,27,0);
  position: absolute; inset: 0;
  color: var(--lw-fg);
  font-family: var(--font);
  line-height: 1.5;
}
.loop-hans .loop-stage { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif; }
.loop-ja .loop-stage { font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif; }
.loop-stage .a {
  animation-duration: 10s; animation-iteration-count: infinite; animation-timing-function: linear;
  animation-fill-mode: both; animation-delay: calc(var(--d, 0s) - var(--t));
}
@media (prefers-color-scheme: dark) {
  .loop-stage {
    --lw-bg: #1C1A1F; --lw-fg: #EBE4DF; --lw-bar: #242B2F; --lw-bar-rule: #232323;
    --lw-pill: #273136; --lw-pill-edge: #3E5058; --lw-seg: #2F3A40; --lw-seg-on: #4D555A;
    --lw-side: #262229; --lw-side-rule: #3A343A; --lw-tab: #332E36; --lw-rule: #3A343A;
    --lw-accent: #FF8A50; --lw-on-accent: #1C1A1F; --lw-select: #6B3A2A;
    --lw-glow: rgba(255,138,80,.3); --lw-glow-0: rgba(255,138,80,0);
  }
}
.loop-anim:has(#loop-pause:checked) .a { animation-play-state: paused; }

/* The MarsDawn window in the Dawn theme. */
.loop-win {
  position: absolute; left: calc(400 * var(--u)); top: calc(50 * var(--u)); width: calc(1150 * var(--u)); height: calc(800 * var(--u));
  border-radius: calc(14 * var(--u)); overflow: hidden; background: var(--lw-bg);
  box-shadow: 0 0 0 calc(1 * var(--u)) rgba(0,0,0,.18), 0 calc(30 * var(--u)) calc(50 * var(--u)) calc(-26 * var(--u)) rgba(0,0,0,.45);
  transform-origin: -4% 79%; animation-name: loop-win;
}
@keyframes loop-win {
  0%, 15% { opacity: 0; transform: scale(.25); animation-timing-function: cubic-bezier(.3,.8,.2,1); }
  24% { opacity: 1; transform: none; }
  84% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.6,0,.8,.4); }
  92%, 100% { opacity: 0; transform: scale(.25); }
}
.loop-bar { position: relative; height: calc(56 * var(--u)); display: flex; align-items: center; padding: 0 calc(18 * var(--u));
  background: var(--lw-bar); border-bottom: calc(1 * var(--u)) solid var(--lw-bar-rule); }
.loop-lights { display: flex; gap: calc(8 * var(--u)); position: relative; z-index: 1; }
.loop-lights i { width: calc(13 * var(--u)); height: calc(13 * var(--u)); border-radius: 50%; display: block; }
.loop-lights i:nth-child(1) { background: #FA5C5F; }
.loop-lights i:nth-child(2) { background: #FAC800; }
.loop-lights i:nth-child(3) { background: #34C758; }
.loop-wtitle { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: calc(18 * var(--u)); font-weight: 600; }
.loop-tools { margin-left: auto; display: flex; gap: calc(4 * var(--u)); padding: calc(4 * var(--u)); border-radius: calc(18 * var(--u)); background: var(--lw-pill);
  box-shadow: 0 0 0 calc(1 * var(--u)) var(--lw-pill-edge); position: relative; z-index: 1; }
.loop-tools i { width: calc(40 * var(--u)); height: calc(28 * var(--u)); border-radius: calc(14 * var(--u)); display: block; background: var(--lw-seg); }
.loop-tools i.on { background: var(--lw-seg-on); }
.loop-body { display: grid; grid-template-columns: calc(230 * var(--u)) 1fr 1fr; height: calc(100% - calc(56 * var(--u))); }
.loop-side { background: var(--lw-side); border-right: calc(1 * var(--u)) solid var(--lw-side-rule); padding: calc(14 * var(--u)) calc(12 * var(--u)); }
.loop-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: calc(4 * var(--u)); margin-bottom: calc(14 * var(--u)); }
.loop-tabs span { text-align: center; font-size: calc(15 * var(--u)); line-height: 1.2; padding: calc(6 * var(--u)) 0; border-radius: calc(7 * var(--u)); background: var(--lw-tab); }
.loop-tabs span.on { background: var(--lw-accent); color: var(--lw-on-accent); font-weight: 600; }
.loop-rows { display: grid; gap: calc(2 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1.25; }
.loop-rows div { padding: calc(8 * var(--u)) calc(12 * var(--u)); border-radius: calc(7 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loop-h1row { font-weight: 600; }
.loop-rows .loop-sub { padding-left: calc(26 * var(--u)); }
.loop-row-u { animation-name: loop-row; }
@keyframes loop-row {
  0%, 29% { background: transparent; color: var(--lw-fg); }
  30%, 90% { background: var(--lw-accent); color: var(--lw-on-accent); }
  92%, 100% { background: transparent; color: var(--lw-fg); }
}
.loop-src { padding: calc(26 * var(--u)); border-right: calc(1 * var(--u)) solid var(--lw-rule); font: calc(20 * var(--u))/1.6 var(--mono); white-space: pre-wrap; overflow: hidden; }
.loop-h { font-weight: 700; }
.loop-mk { color: var(--lw-accent); }
.loop-pre { padding: calc(30 * var(--u)) calc(36 * var(--u)); overflow: hidden; }
.loop-pre h3 { margin: 0 0 calc(22 * var(--u)); padding-bottom: calc(10 * var(--u)); border-bottom: calc(1 * var(--u)) solid var(--lw-rule); font-size: calc(40 * var(--u)); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: inherit; }
.loop-pre h4 { margin: calc(22 * var(--u)) 0 calc(8 * var(--u)); font-size: calc(25 * var(--u)); font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; color: inherit; }
.loop-pre p { margin: 0; font-size: calc(20 * var(--u)); line-height: 1.55; }

/* A day that changes: both words share one grid cell and have the same width. */
.loop-day { position: relative; display: inline-grid; border-radius: calc(4 * var(--u)); font-variant-numeric: tabular-nums; }
.loop-day > span { grid-area: 1 / 1; white-space: nowrap; }
.loop-new { clip-path: inset(0 100% 0 0); }

/* The reader's own edit, in the source: select the day, then type the new one. */
.loop-src .loop-d-u .loop-old { animation-name: loop-u-old; }
.loop-src .loop-d-u .loop-new { animation-name: loop-u-new; }
.loop-src .loop-d-u .loop-new.loop-n2 { animation-timing-function: steps(2, end); }
.loop-src .loop-d-u .loop-new.loop-n5 { animation-timing-function: steps(5, end); }
@keyframes loop-u-old {
  0%, 35% { opacity: 1; background: transparent; }
  36%, 40.9% { opacity: 1; background: var(--lw-select); }
  41%, 94.9% { opacity: 0; background: transparent; }
  95%, 100% { opacity: 1; background: transparent; }
}
@keyframes loop-u-new {
  0%, 41% { clip-path: inset(0 100% 0 0); }
  46%, 94.9% { clip-path: inset(0 0 0 0); }
  95%, 100% { clip-path: inset(0 100% 0 0); }
}
.loop-ecaret {
  position: absolute; top: 0.2em; left: 0; width: calc(2 * var(--u)); height: 1.1em; background: var(--lw-accent); opacity: 0;
  animation-name: loop-ecaret, loop-ecaret-x;
}
/* The caret follows the typed characters: the same steps as the reveal. */
.loop-ecaret.loop-n2 { animation-timing-function: linear, steps(2, end); }
.loop-ecaret.loop-n5 { animation-timing-function: linear, steps(5, end); }
@keyframes loop-ecaret-x { 0%, 41% { left: 0; } 46%, 100% { left: 100%; } }
@keyframes loop-ecaret {
  0%, 40.9% { opacity: 0; }
  41%, 43%, 45%, 47%, 49%, 51% { opacity: 1; }
  44%, 48%, 52%, 100% { opacity: 0; }
}

/* The preview follows the reader's save. */
.loop-pre .loop-d-u .loop-old { animation-name: loop-pu-old; }
.loop-pre .loop-d-u .loop-new { animation-name: loop-pu-new; }
@keyframes loop-pu-old { 0%, 46.9% { opacity: 1; } 47%, 94.9% { opacity: 0; } 95%, 100% { opacity: 1; } }
@keyframes loop-pu-new { 0%, 46.9% { clip-path: inset(0 100% 0 0); } 47%, 94.9% { clip-path: inset(0 0 0 0); } 95%, 100% { clip-path: inset(0 100% 0 0); } }

/* The agent's edits: the other two sections, a beat apart. */
.loop-d-a { --d: 0s; }
.loop-d-b { --d: .45s; }
.loop-d-a .loop-old, .loop-d-b .loop-old { animation-name: loop-a-old; }
.loop-d-a .loop-new, .loop-d-b .loop-new { animation-name: loop-a-new; }
.loop-d-a, .loop-d-b { animation-name: loop-a-glow; }
@keyframes loop-a-old { 0%, 59.9% { opacity: 1; } 60%, 94.9% { opacity: 0; } 95%, 100% { opacity: 1; } }
@keyframes loop-a-new { 0%, 59.9% { clip-path: inset(0 100% 0 0); } 60%, 94.9% { clip-path: inset(0 0 0 0); } 95%, 100% { clip-path: inset(0 100% 0 0); } }
@keyframes loop-a-glow {
  0%, 59.9% { background: var(--lw-glow-0); }
  60% { background: var(--lw-glow); }
  78%, 100% { background: var(--lw-glow-0); }
}

/* The terminal starts centred and large, then steps aside for the window. */
.loop-term {
  position: absolute; left: calc(40 * var(--u)); top: calc(520 * var(--u)); width: calc(620 * var(--u)); height: calc(330 * var(--u)); border-radius: calc(12 * var(--u)); overflow: hidden;
  background: #211C1A; color: #EDE6E1; z-index: 3;
  box-shadow: 0 0 0 calc(1 * var(--u)) rgba(0,0,0,.35), 0 calc(26 * var(--u)) calc(44 * var(--u)) calc(-22 * var(--u)) rgba(0,0,0,.55);
  --term-x: calc(450 * var(--u)); --term-y: calc(-235 * var(--u)); --term-s: 1.3;
  animation-name: loop-term;
}
@keyframes loop-term {
  0%, 13.5% { transform: translate(var(--term-x), var(--term-y)) scale(var(--term-s)); animation-timing-function: cubic-bezier(.5,0,.2,1); }
  22% { transform: none; }
  86% { transform: none; animation-timing-function: cubic-bezier(.5,0,.2,1); }
  96%, 100% { transform: translate(var(--term-x), var(--term-y)) scale(var(--term-s)); }
}
.loop-tbar { height: calc(34 * var(--u)); display: flex; align-items: center; padding: 0 calc(14 * var(--u)); background: #2B2522; }
.loop-tbar .loop-lights i { width: calc(11 * var(--u)); height: calc(11 * var(--u)); background: #4A413C; }
.loop-tbody { padding: calc(18 * var(--u)) calc(22 * var(--u)); font: calc(19 * var(--u))/1.6 var(--mono); display: grid; gap: calc(6 * var(--u)); }
.loop-p { color: #E0875E; }
.loop-cmd { display: inline-block; vertical-align: bottom; overflow: hidden; white-space: nowrap; width: 0; animation-name: loop-type; }
@keyframes loop-type {
  0%, 3% { width: 0; animation-timing-function: steps(28, end); }
  12.5%, 90% { width: 28ch; }
  92%, 100% { width: 0; }
}
.loop-caret { display: inline-block; width: calc(10 * var(--u)); height: 1.1em; background: #EDE6E1; vertical-align: -0.2em; animation-name: loop-tcaret; }
@keyframes loop-tcaret {
  0%, 1.5%, 3%, 13.5%, 90% { opacity: 1; }
  0.8%, 2.2%, 14%, 89.9% { opacity: 0; }
  91%, 93%, 95%, 97%, 99% { opacity: 1; }
  92%, 94%, 96%, 98% { opacity: 0; }
}
.loop-l2 { animation-name: loop-l2; }
.loop-l3 { animation-name: loop-l3; color: #9FCBB1; }
@keyframes loop-l2 { 0%, 48% { opacity: 0; transform: translateY(calc(8 * var(--u))); } 51%, 88% { opacity: 1; transform: none; } 91%, 100% { opacity: 0; transform: none; } }
/* The reply lands a beat after both of the agent's edits (60%, and 60% plus .45s). */
@keyframes loop-l3 { 0%, 68% { opacity: 0; transform: translateY(calc(8 * var(--u))); } 71%, 88% { opacity: 1; transform: none; } 91%, 100% { opacity: 0; transform: none; } }

/* The pointer clicks one outline row, then leaves. */
.loop-ptr { position: absolute; left: 0; top: 0; width: calc(30 * var(--u)); height: calc(40 * var(--u)); z-index: 4; animation-name: loop-ptr; }
@keyframes loop-ptr {
  0%, 22% { opacity: 0; transform: translate(calc(760 * var(--u)), calc(520 * var(--u))); }
  23% { opacity: 1; transform: translate(calc(760 * var(--u)), calc(520 * var(--u))); animation-timing-function: cubic-bezier(.4,0,.2,1); }
  28.5% { transform: translate(calc(468 * var(--u)), calc(238 * var(--u))) scale(1); }
  29.3% { transform: translate(calc(468 * var(--u)), calc(238 * var(--u))) scale(.86); }
  30.2% { opacity: 1; transform: translate(calc(468 * var(--u)), calc(238 * var(--u))) scale(1); animation-timing-function: cubic-bezier(.4,0,.2,1); }
  36% { opacity: 1; }
  38%, 100% { opacity: 0; transform: translate(calc(520 * var(--u)), calc(360 * var(--u))); }
}

/* Pause and play. A checkbox, so it works with the keyboard and without a script. */
.loop-pause {
  position: relative;
  display: inline-flex; align-items: center; min-height: 28px; padding: 3px 12px;
  border: 1px solid var(--hairline); border-radius: 999px;
  color: var(--dust); font-size: 0.82rem; cursor: pointer;
}
.loop-pause input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.loop-pause:has(input:focus-visible) { outline: 2px solid var(--ember); outline-offset: 2px; }
.loop-pause:hover { color: var(--ink); }
.loop-pause:has(input:checked) { color: var(--paper); background: var(--ink); border-color: var(--ink); }

/* Narrower screens: the whole stage below 820px sets its text under 10px. Show the part that
   carries the story instead, at a larger scale. The outline pane and the pointer fall outside.
   Tablets and small windows: the source and the preview (x 630 to 1550 of the stage), with the
   terminal docked along their foot. */
@media (max-width: 820px) {
  .loop-frame { aspect-ratio: 920 / 860; }
  .loop-stage { --u: calc(100cqw / 920); inset: auto; left: calc(-630 * var(--u)); top: calc(-50 * var(--u)); width: calc(1600 * var(--u)); height: calc(900 * var(--u)); }
  .loop-term { left: calc(650 * var(--u)); top: calc(540 * var(--u)); height: calc(290 * var(--u)); --term-x: calc(130 * var(--u)); --term-y: calc(-205 * var(--u)); }
  .loop-ptr { display: none; }
}
/* Phones: the source pane alone (x 630 to 1090), where the reader's edit and the agent's both
   show, twice the scale again, with a narrower terminal under it. */
@media (max-width: 560px) {
  .loop-frame { aspect-ratio: 460 / 740; }
  .loop-stage { --u: calc(100cqw / 460); top: calc(-50 * var(--u)); }
  .loop-term { left: calc(640 * var(--u)); top: calc(540 * var(--u)); width: calc(440 * var(--u)); height: calc(240 * var(--u)); --term-x: calc(0 * var(--u)); --term-y: calc(-190 * var(--u)); --term-s: 1; }
}

/* Reduced motion: the edited note, still, and nothing to pause. */
@media (prefers-reduced-motion: reduce) {
  .loop-stage { --t: 7.2s; }
  .loop-stage .a { animation-play-state: paused; }
  .loop-pause { display: none; }
}

/* ---- Scenes beyond the home page (/templates/). Appended; the rules above are the home page's. ---- */
.loop-d-c { --d: .9s; }
.loop-d-c .loop-old { animation-name: loop-a-old; }
.loop-d-c .loop-new { animation-name: loop-a-new; }
.loop-d-c { animation-name: loop-a-glow; }
/* Scene colours, light and night, from the kit's Dawn theme (hero_sources.json): code is the
   theme's string colour, a flow node sits on its surface. The rest reuse the --lw-* palette. */
.loop-stage { --lw-code: #2F6F5E; --lw-node: #FFF7F4; --lw-node-edge: #E39A86; --lw-muted: #6F6660; }
@media (prefers-color-scheme: dark) {
  .loop-stage { --lw-code: #7FD1B9; --lw-node: #262229; --lw-node-edge: #8E5238; --lw-muted: #A39992; }
}
.loop-code { color: var(--lw-code); }

/* A scene with a longer document: the terminal stops short of the source pane (the window's
   sidebar ends at calc(630 * var(--u))), so no line of source is hidden behind it. */
.loop-long .loop-term { width: calc(575 * var(--u)); }

/* A line, block or list item that goes away. */
.loop-rl { overflow: hidden; }
.loop-src .loop-rl { display: block; }
.loop-src .loop-r-u { animation-name: loop-u-rl; }
.loop-pre .loop-r-u { animation-name: loop-pu-rl; }
.loop-r-a { --d: 0s; }
.loop-r-b { --d: .45s; }
.loop-r-c { --d: .9s; }
.loop-rl.loop-r-a, .loop-rl.loop-r-b, .loop-rl.loop-r-c { animation-name: loop-a-rl; }
@keyframes loop-u-rl {
  0%, 35% { max-height: 5em; opacity: 1; background: transparent; }
  36%, 40.9% { max-height: 5em; opacity: 1; background: var(--lw-select); }
  41% { max-height: 5em; opacity: 1; background: var(--lw-select); }
  44%, 94.9% { max-height: 0; opacity: 0; background: transparent; }
  95%, 100% { max-height: 5em; opacity: 1; background: transparent; }
}
@keyframes loop-pu-rl {
  0%, 46.9% { max-height: 5em; opacity: 1; }
  49%, 94.9% { max-height: 0; opacity: 0; }
  95%, 100% { max-height: 5em; opacity: 1; }
}
@keyframes loop-a-rl {
  0%, 57% { max-height: 5em; opacity: 1; background: var(--lw-glow-0); }
  59.5% { max-height: 5em; opacity: 1; background: var(--lw-glow); }
  63%, 94.9% { max-height: 0; opacity: 0; background: var(--lw-glow-0); }
  95%, 100% { max-height: 5em; opacity: 1; background: var(--lw-glow-0); }
}

/* A flow diagram, as the preview draws a Mermaid flowchart; a step can go away. */
.loop-flow { display: flex; align-items: center; margin: calc(12 * var(--u)) 0 calc(20 * var(--u)); }
.loop-flow > * { flex-shrink: 0; }
.loop-node { display: inline-flex; align-items: center; height: calc(40 * var(--u)); padding: 0 calc(9 * var(--u)); border-radius: calc(7 * var(--u));
  background: var(--lw-node); border: calc(1.5 * var(--u)) solid var(--lw-node-edge); color: var(--lw-fg); font-size: calc(14 * var(--u)); font-weight: 650; white-space: nowrap; }
.loop-fseg { display: inline-flex; align-items: center; overflow: hidden; white-space: nowrap; max-width: 30em; }
.loop-arrow { padding: 0 calc(5 * var(--u)); color: var(--lw-accent); font-size: calc(15 * var(--u)); }
.loop-pre .loop-rn.loop-r-u { animation-name: loop-pu-rn; }
.loop-rn.loop-r-a, .loop-rn.loop-r-b, .loop-rn.loop-r-c { animation-name: loop-a-rn; }
@keyframes loop-pu-rn {
  0%, 46.9% { max-width: 30em; opacity: 1; }
  49%, 94.9% { max-width: 0; opacity: 0; }
  95%, 100% { max-width: 30em; opacity: 1; }
}
@keyframes loop-a-rn {
  0%, 59.9% { max-width: 30em; opacity: 1; }
  63%, 94.9% { max-width: 0; opacity: 0; }
  95%, 100% { max-width: 30em; opacity: 1; }
}

/* Lists and task lists in the preview. */
.loop-pre ul { margin: 0 0 calc(4 * var(--u)); padding-left: calc(26 * var(--u)); font-size: calc(20 * var(--u)); line-height: 1.55; }
.loop-pre li { margin: 0; }
.loop-pre li.loop-task { list-style: none; margin-left: calc(-26 * var(--u)); }
.loop-task::before { content: ""; display: inline-block; width: 0.75em; height: 0.75em; margin-right: 0.45em;
  border: calc(1.5 * var(--u)) solid var(--lw-muted); border-radius: calc(3 * var(--u)); vertical-align: -0.05em; }
.loop-src .loop-d-u .loop-new.loop-n1 { animation-timing-function: steps(1, end); }
.loop-ecaret.loop-n1 { animation-timing-function: linear, steps(1, end); }
.loop-src .loop-d-u .loop-new.loop-n3 { animation-timing-function: steps(3, end); }
.loop-ecaret.loop-n3 { animation-timing-function: linear, steps(3, end); }
.loop-src .loop-d-u .loop-new.loop-n4 { animation-timing-function: steps(4, end); }
.loop-ecaret.loop-n4 { animation-timing-function: linear, steps(4, end); }
.loop-src .loop-d-u .loop-new.loop-n6 { animation-timing-function: steps(6, end); }
.loop-ecaret.loop-n6 { animation-timing-function: linear, steps(6, end); }
.loop-src .loop-d-u .loop-new.loop-n7 { animation-timing-function: steps(7, end); }
.loop-ecaret.loop-n7 { animation-timing-function: linear, steps(7, end); }
.loop-src .loop-d-u .loop-new.loop-n8 { animation-timing-function: steps(8, end); }
.loop-ecaret.loop-n8 { animation-timing-function: linear, steps(8, end); }
.loop-src .loop-d-u .loop-new.loop-n9 { animation-timing-function: steps(9, end); }
.loop-ecaret.loop-n9 { animation-timing-function: linear, steps(9, end); }
.loop-src .loop-d-u .loop-new.loop-n10 { animation-timing-function: steps(10, end); }
.loop-ecaret.loop-n10 { animation-timing-function: linear, steps(10, end); }
.loop-src .loop-d-u .loop-new.loop-n11 { animation-timing-function: steps(11, end); }
.loop-ecaret.loop-n11 { animation-timing-function: linear, steps(11, end); }
.loop-src .loop-d-u .loop-new.loop-n12 { animation-timing-function: steps(12, end); }
.loop-ecaret.loop-n12 { animation-timing-function: linear, steps(12, end); }
.loop-cmd-18 { animation-name: loop-type-18; }
@keyframes loop-type-18 {
  0%, 3% { width: 0; animation-timing-function: steps(18, end); }
  12.5%, 90% { width: 18ch; }
  92%, 100% { width: 0; }
}
.loop-cmd-19 { animation-name: loop-type-19; }
@keyframes loop-type-19 {
  0%, 3% { width: 0; animation-timing-function: steps(19, end); }
  12.5%, 90% { width: 19ch; }
  92%, 100% { width: 0; }
}
.loop-cmd-20 { animation-name: loop-type-20; }
@keyframes loop-type-20 {
  0%, 3% { width: 0; animation-timing-function: steps(20, end); }
  12.5%, 90% { width: 20ch; }
  92%, 100% { width: 0; }
}
.loop-cmd-21 { animation-name: loop-type-21; }
@keyframes loop-type-21 {
  0%, 3% { width: 0; animation-timing-function: steps(21, end); }
  12.5%, 90% { width: 21ch; }
  92%, 100% { width: 0; }
}
.loop-cmd-22 { animation-name: loop-type-22; }
@keyframes loop-type-22 {
  0%, 3% { width: 0; animation-timing-function: steps(22, end); }
  12.5%, 90% { width: 22ch; }
  92%, 100% { width: 0; }
}
.loop-cmd-23 { animation-name: loop-type-23; }
@keyframes loop-type-23 {
  0%, 3% { width: 0; animation-timing-function: steps(23, end); }
  12.5%, 90% { width: 23ch; }
  92%, 100% { width: 0; }
}
.loop-cmd-24 { animation-name: loop-type-24; }
@keyframes loop-type-24 {
  0%, 3% { width: 0; animation-timing-function: steps(24, end); }
  12.5%, 90% { width: 24ch; }
  92%, 100% { width: 0; }
}
.loop-cmd-25 { animation-name: loop-type-25; }
@keyframes loop-type-25 {
  0%, 3% { width: 0; animation-timing-function: steps(25, end); }
  12.5%, 90% { width: 25ch; }
  92%, 100% { width: 0; }
}
.loop-cmd-26 { animation-name: loop-type-26; }
@keyframes loop-type-26 {
  0%, 3% { width: 0; animation-timing-function: steps(26, end); }
  12.5%, 90% { width: 26ch; }
  92%, 100% { width: 0; }
}
.loop-cmd-27 { animation-name: loop-type-27; }
@keyframes loop-type-27 {
  0%, 3% { width: 0; animation-timing-function: steps(27, end); }
  12.5%, 90% { width: 27ch; }
  92%, 100% { width: 0; }
}
.loop-cmd-29 { animation-name: loop-type-29; }
@keyframes loop-type-29 {
  0%, 3% { width: 0; animation-timing-function: steps(29, end); }
  12.5%, 90% { width: 29ch; }
  92%, 100% { width: 0; }
}
.loop-cmd-30 { animation-name: loop-type-30; }
@keyframes loop-type-30 {
  0%, 3% { width: 0; animation-timing-function: steps(30, end); }
  12.5%, 90% { width: 30ch; }
  92%, 100% { width: 0; }
}
.loop-cmd-31 { animation-name: loop-type-31; }
@keyframes loop-type-31 {
  0%, 3% { width: 0; animation-timing-function: steps(31, end); }
  12.5%, 90% { width: 31ch; }
  92%, 100% { width: 0; }
}
.loop-cmd-32 { animation-name: loop-type-32; }
@keyframes loop-type-32 {
  0%, 3% { width: 0; animation-timing-function: steps(32, end); }
  12.5%, 90% { width: 32ch; }
  92%, 100% { width: 0; }
}
.loop-cmd-33 { animation-name: loop-type-33; }
@keyframes loop-type-33 {
  0%, 3% { width: 0; animation-timing-function: steps(33, end); }
  12.5%, 90% { width: 33ch; }
  92%, 100% { width: 0; }
}
.loop-cmd-34 { animation-name: loop-type-34; }
@keyframes loop-type-34 {
  0%, 3% { width: 0; animation-timing-function: steps(34, end); }
  12.5%, 90% { width: 34ch; }
  92%, 100% { width: 0; }
}
.loop-cmd-35 { animation-name: loop-type-35; }
@keyframes loop-type-35 {
  0%, 3% { width: 0; animation-timing-function: steps(35, end); }
  12.5%, 90% { width: 35ch; }
  92%, 100% { width: 0; }
}
.loop-cmd-36 { animation-name: loop-type-36; }
@keyframes loop-type-36 {
  0%, 3% { width: 0; animation-timing-function: steps(36, end); }
  12.5%, 90% { width: 36ch; }
  92%, 100% { width: 0; }
}
.loop-cmd-37 { animation-name: loop-type-37; }
@keyframes loop-type-37 {
  0%, 3% { width: 0; animation-timing-function: steps(37, end); }
  12.5%, 90% { width: 37ch; }
  92%, 100% { width: 0; }
}
.loop-cmd-38 { animation-name: loop-type-38; }
@keyframes loop-type-38 {
  0%, 3% { width: 0; animation-timing-function: steps(38, end); }
  12.5%, 90% { width: 38ch; }
  92%, 100% { width: 0; }
}
.loop-cmd-39 { animation-name: loop-type-39; }
@keyframes loop-type-39 {
  0%, 3% { width: 0; animation-timing-function: steps(39, end); }
  12.5%, 90% { width: 39ch; }
  92%, 100% { width: 0; }
}
.loop-cmd-40 { animation-name: loop-type-40; }
@keyframes loop-type-40 {
  0%, 3% { width: 0; animation-timing-function: steps(40, end); }
  12.5%, 90% { width: 40ch; }
  92%, 100% { width: 0; }
}
.loop-ptr-r1 { animation-name: loop-ptr-r1; }
@keyframes loop-ptr-r1 {
  0%, 22% { opacity: 0; transform: translate(calc(760 * var(--u)), calc(520 * var(--u))); }
  23% { opacity: 1; transform: translate(calc(760 * var(--u)), calc(520 * var(--u))); animation-timing-function: cubic-bezier(.4,0,.2,1); }
  28.5% { transform: translate(calc(468 * var(--u)), calc(200 * var(--u))) scale(1); }
  29.3% { transform: translate(calc(468 * var(--u)), calc(200 * var(--u))) scale(.86); }
  30.2% { opacity: 1; transform: translate(calc(468 * var(--u)), calc(200 * var(--u))) scale(1); animation-timing-function: cubic-bezier(.4,0,.2,1); }
  36% { opacity: 1; }
  38%, 100% { opacity: 0; transform: translate(calc(520 * var(--u)), calc(310 * var(--u))); }
}
.loop-ptr-r3 { animation-name: loop-ptr-r3; }
@keyframes loop-ptr-r3 {
  0%, 22% { opacity: 0; transform: translate(calc(760 * var(--u)), calc(520 * var(--u))); }
  23% { opacity: 1; transform: translate(calc(760 * var(--u)), calc(520 * var(--u))); animation-timing-function: cubic-bezier(.4,0,.2,1); }
  28.5% { transform: translate(calc(468 * var(--u)), calc(276 * var(--u))) scale(1); }
  29.3% { transform: translate(calc(468 * var(--u)), calc(276 * var(--u))) scale(.86); }
  30.2% { opacity: 1; transform: translate(calc(468 * var(--u)), calc(276 * var(--u))) scale(1); animation-timing-function: cubic-bezier(.4,0,.2,1); }
  36% { opacity: 1; }
  38%, 100% { opacity: 0; transform: translate(calc(520 * var(--u)), calc(386 * var(--u))); }
}
.loop-ptr-r4 { animation-name: loop-ptr-r4; }
@keyframes loop-ptr-r4 {
  0%, 22% { opacity: 0; transform: translate(calc(760 * var(--u)), calc(520 * var(--u))); }
  23% { opacity: 1; transform: translate(calc(760 * var(--u)), calc(520 * var(--u))); animation-timing-function: cubic-bezier(.4,0,.2,1); }
  28.5% { transform: translate(calc(468 * var(--u)), calc(314 * var(--u))) scale(1); }
  29.3% { transform: translate(calc(468 * var(--u)), calc(314 * var(--u))) scale(.86); }
  30.2% { opacity: 1; transform: translate(calc(468 * var(--u)), calc(314 * var(--u))) scale(1); animation-timing-function: cubic-bezier(.4,0,.2,1); }
  36% { opacity: 1; }
  38%, 100% { opacity: 0; transform: translate(calc(520 * var(--u)), calc(424 * var(--u))); }
}
.loop-ptr-r5 { animation-name: loop-ptr-r5; }
@keyframes loop-ptr-r5 {
  0%, 22% { opacity: 0; transform: translate(calc(760 * var(--u)), calc(520 * var(--u))); }
  23% { opacity: 1; transform: translate(calc(760 * var(--u)), calc(520 * var(--u))); animation-timing-function: cubic-bezier(.4,0,.2,1); }
  28.5% { transform: translate(calc(468 * var(--u)), calc(352 * var(--u))) scale(1); }
  29.3% { transform: translate(calc(468 * var(--u)), calc(352 * var(--u))) scale(.86); }
  30.2% { opacity: 1; transform: translate(calc(468 * var(--u)), calc(352 * var(--u))) scale(1); animation-timing-function: cubic-bezier(.4,0,.2,1); }
  36% { opacity: 1; }
  38%, 100% { opacity: 0; transform: translate(calc(520 * var(--u)), calc(462 * var(--u))); }
}
.loop-ptr-r6 { animation-name: loop-ptr-r6; }
@keyframes loop-ptr-r6 {
  0%, 22% { opacity: 0; transform: translate(calc(760 * var(--u)), calc(520 * var(--u))); }
  23% { opacity: 1; transform: translate(calc(760 * var(--u)), calc(520 * var(--u))); animation-timing-function: cubic-bezier(.4,0,.2,1); }
  28.5% { transform: translate(calc(468 * var(--u)), calc(390 * var(--u))) scale(1); }
  29.3% { transform: translate(calc(468 * var(--u)), calc(390 * var(--u))) scale(.86); }
  30.2% { opacity: 1; transform: translate(calc(468 * var(--u)), calc(390 * var(--u))) scale(1); animation-timing-function: cubic-bezier(.4,0,.2,1); }
  36% { opacity: 1; }
  38%, 100% { opacity: 0; transform: translate(calc(520 * var(--u)), calc(500 * var(--u))); }
}
.loop-ptr-r7 { animation-name: loop-ptr-r7; }
@keyframes loop-ptr-r7 {
  0%, 22% { opacity: 0; transform: translate(calc(760 * var(--u)), calc(520 * var(--u))); }
  23% { opacity: 1; transform: translate(calc(760 * var(--u)), calc(520 * var(--u))); animation-timing-function: cubic-bezier(.4,0,.2,1); }
  28.5% { transform: translate(calc(468 * var(--u)), calc(428 * var(--u))) scale(1); }
  29.3% { transform: translate(calc(468 * var(--u)), calc(428 * var(--u))) scale(.86); }
  30.2% { opacity: 1; transform: translate(calc(468 * var(--u)), calc(428 * var(--u))) scale(1); animation-timing-function: cubic-bezier(.4,0,.2,1); }
  36% { opacity: 1; }
  38%, 100% { opacity: 0; transform: translate(calc(520 * var(--u)), calc(538 * var(--u))); }
}
.loop-ptr-r8 { animation-name: loop-ptr-r8; }
@keyframes loop-ptr-r8 {
  0%, 22% { opacity: 0; transform: translate(calc(760 * var(--u)), calc(520 * var(--u))); }
  23% { opacity: 1; transform: translate(calc(760 * var(--u)), calc(520 * var(--u))); animation-timing-function: cubic-bezier(.4,0,.2,1); }
  28.5% { transform: translate(calc(468 * var(--u)), calc(466 * var(--u))) scale(1); }
  29.3% { transform: translate(calc(468 * var(--u)), calc(466 * var(--u))) scale(.86); }
  30.2% { opacity: 1; transform: translate(calc(468 * var(--u)), calc(466 * var(--u))) scale(1); animation-timing-function: cubic-bezier(.4,0,.2,1); }
  36% { opacity: 1; }
  38%, 100% { opacity: 0; transform: translate(calc(520 * var(--u)), calc(576 * var(--u))); }
}