/* nectenda.com — site styles, built on the Nectenda design system. Tokens come from tokens.css and are never redefined here; this file only composes them. ## Dark, with no toggle The design system is dark-first: "the marketing site and the docs default to the dark theme, because that is how most of this audience runs Obsidian." `data-theme="dark"` is set on in build.mjs. There is no theme switcher and there cannot be one — a toggle needs JavaScript, and this site's CSP is `script-src 'none'`. Honouring prefers-color-scheme would mean restating the whole light palette here, which would put a second copy of the tokens in a file that is supposed to own none. Dark for everyone is the design system's stated intent; the light theme stays specified upstream for the product UI, which can toggle. ## No inline styles The upstream UI kit is React with style={{...}} throughout. Those cannot be ported literally: `style-src 'self'` blocks inline style attributes, and the page would render unstyled with no error anywhere. Every value below is a class for that reason. */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--bg-page); color: var(--text-primary); font-family: var(--font-sans); font-size: var(--text-body-lg); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; margin: 0; text-wrap: balance; letter-spacing: var(--tracking-title); } a { color: var(--text-brand); text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover { color: var(--action-primary-hover); } /* Links to the parent company sit inside running text — the footer's legal lines, the address block, the opening sentence of terms and privacy — where a gold, underlined "Nerchure Ltd" pulled the eye to a company name rather than to what the sentence was saying. They are set to disappear into the text and surface on hover. Selected by href rather than a class because three of them come from markdown, where there is nowhere to hang one. Known trade, decided deliberately: at rest these carry no visual marker at all, so a reader who is not pointing at them — keyboard, touch, or simply reading — has no way to know they are links. Both affordances return together on hover, and :focus-visible still draws the focus ring, so keyboard users reach them by tabbing even though they cannot see them coming. Do not copy this pattern to a link that matters; these are a company name repeated six times, and nothing depends on following them. */ a[href="https://nerchure.com"] { color: inherit; text-decoration: none; } a[href="https://nerchure.com"]:hover { color: var(--text-brand); text-decoration: underline; } :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: var(--radius-sm); } code, pre { font-family: var(--font-mono); } /* --- design system utilities, ported verbatim from styles.css ------------- */ .nx-latin { font-family: var(--font-latin); font-style: italic; } .nx-label { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-secondary); } /* The cut. One class, primary surfaces only, roughly one per screen — used everywhere it stops being a signature and becomes a texture. */ .nx-cut { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* --- shell ---------------------------------------------------------------- */ .wrap { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-6); } /* The masthead stays put as the page scrolls, as the design system's own marketing site does. Two elements, not one: the sticky bar is full-bleed so its background and rule span the viewport, and `.wrap` inside it constrains the logo to the same measure as the content. Making the constrained element sticky would paint the background only as wide as the content and let text scroll past on either side of it. The background is not optional. A transparent sticky header lets the page run underneath it, and on this ground that reads as a rendering fault rather than a design. Padding is 16px rather than the design system sample's 14px — the sample is off its own 4px scale, and 16px is the token next to it. */ .site-header { position: sticky; top: 0; z-index: 10; background: var(--bg-page); border-bottom: var(--border-width) solid var(--border-subtle); } .site-header-inner { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-between; padding-top: var(--space-4); padding-bottom: var(--space-4); } /* Mark and wordmark are composed here, not baked into one file — the design system's own marketing site does the same, and its proportions come from that composition: a 26px mark beside a 19px wordmark with 16px between them. An earlier version used the pre-made logo.svg lockup, where the two are matched at equal height, which made the wordmark far too heavy beside the mark. The wordmark is artwork, not type. It carries a ct bind Literata does not produce, and it is what the trademark application rests on. */ .logo { display: inline-flex; align-items: center; gap: var(--space-4); line-height: 0; } .logo .mark { flex: none; } .logo-wordmark { height: 19px; width: auto; display: block; } .logo:focus-visible { outline-offset: 6px; } .site-nav { display: flex; flex-wrap: wrap; gap: var(--space-5); } .site-nav a { font-size: var(--text-body-md); color: var(--text-secondary); text-decoration: none; } .site-nav a:hover { color: var(--text-brand); text-decoration: underline; } /* Modelled on nerchure.com's footer: mark and links on one row, then the legal lines beneath in a quieter size. */ .site-footer { border-top: var(--border-width) solid var(--border-subtle); margin-top: var(--space-20); padding-top: var(--space-6); padding-bottom: var(--space-20); color: var(--text-secondary); } /* No wordmark down here. It is already in the masthead, which is sticky and so never leaves the screen — repeating it at the foot of every page says nothing the reader cannot already see. The links sit left, aligned with the legal lines beneath them rather than pushed to the far edge away from everything else in the footer. */ .footer-nav { margin-bottom: var(--space-5); } .footer-legal { margin: var(--space-2) 0; font-size: var(--text-caption); line-height: var(--lh-caption); max-width: var(--measure-body); } /* --- long-form prose: the four generated doc pages ------------------------ */ .prose { max-width: var(--measure-body); padding-bottom: var(--space-16); } .prose > h1 { font-size: var(--text-display-lg); line-height: var(--lh-display); letter-spacing: var(--tracking-display); font-weight: 300; margin: var(--space-8) 0 var(--space-6); } .prose > h2 { font-size: var(--text-display-md); line-height: var(--lh-title); margin: var(--space-16) 0 var(--space-4); } .prose > h3 { font-size: var(--text-title-lg); margin: var(--space-10) 0 var(--space-3); } .prose > h4 { font-size: var(--text-title-md); margin: var(--space-8) 0 var(--space-2); } .prose p, .prose li { line-height: var(--lh-body); } .prose p { margin: var(--space-4) 0; } .prose ul, .prose ol { margin: var(--space-4) 0; padding-left: var(--space-6); } .prose li { margin: var(--space-2) 0; } .prose li > ul, .prose li > ol { margin: var(--space-2) 0; } .prose strong { font-weight: 600; } .prose hr { border: 0; border-top: var(--border-width) solid var(--border-subtle); margin: var(--space-16) 0; } .prose blockquote { margin: var(--space-6) 0; padding: var(--space-1) 0 var(--space-1) var(--space-5); border-left: 2px solid var(--border-strong); color: var(--text-secondary); } .prose blockquote p:first-child { margin-top: 0; } .prose blockquote p:last-child { margin-bottom: 0; } /* Inline code sits inside sentences and often beside punctuation — the security model is full of "(`deriveMasterKey`," constructions. A border plus generous padding detaches the chip from the bracket that owns it, so this carries a tint and almost no padding instead. */ .prose code { font-size: 0.875em; background: var(--bg-subtle); border-radius: var(--radius-sm); padding: 0.05em 0.22em; } /* Not scoped to .prose: the landing page's proof surface has a 
 too, and
   when this lived under .prose that one kept the browser default of no wrapping
   and no scrolling. A 63-character curl command then pushed the whole page wide
   at 390px — a horizontally scrolling document, which is a broken one. */
pre {
  background: var(--bg-surface);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-6) 0;
  overflow-x: auto;
  font-size: var(--text-mono);
  line-height: 1.7;
}
pre code { background: none; border: 0; padding: 0; font-size: inherit; }

/* Tables in security-model.md and accounts.md are wide. Scroll the table, never
   the page — a horizontally scrolling document is a broken document. */
.prose table {
  border-collapse: collapse;
  width: 100%;
  margin: var(--space-6) 0;
  font-size: var(--text-body-sm);
  display: block;
  overflow-x: auto;
}
.prose th, .prose td {
  border: var(--border-width) solid var(--border-default);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  vertical-align: top;
}
.prose th {
  background: var(--bg-subtle);
  font-weight: 600;
  white-space: nowrap;
}

/* --- landing page --------------------------------------------------------- */

.hero {
  display: flex; flex-direction: column; gap: var(--space-5);
  padding: var(--space-16) 0 var(--space-12);
}
/* The doc pages open straight into a heading, which sat tight under the header
   once it became a compact sticky bar. */
.prose:first-child { padding-top: var(--space-8); }
.hero h1 {
  font-size: var(--text-display-xl);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  font-weight: 300;
  max-width: 18ch;
  margin: 0;
}
.hero-sub {
  font-size: var(--text-title-md);
  color: var(--text-secondary);
  max-width: 52ch;
  margin: 0;
}

.notice {
  background: var(--bg-brand-subtle);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin: 0;
  font-size: var(--text-body-md);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
  padding-bottom: var(--space-16);
}
.card {
  background: var(--bg-surface);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.card h3 { font-size: var(--text-title-lg); margin: 0 0 var(--space-2); }
.card p { font-size: var(--text-body-sm); color: var(--text-secondary); margin: 0; }

/* --- the demo: two people in one note ------------------------------------
   One cut per screen, and this is it.

   ## The resting state is the finished frame

   The stylesheet forces `animation: none !important` under
   prefers-reduced-motion, which means an element whose base CSS is the START of
   its animation renders as its start forever for those readers. So every rule
   below describes the completed state, and the keyframes run *from* empty *to*
   it. Turn the animation off and you get a finished sentence with two cursors
   in it, which is the thing worth seeing anyway.

   ## No JavaScript

   `script-src 'none'`, so this is keyframes over static markup. The text is
   real text — selectable, searchable, and read aloud in order. */

.demo {
  background: var(--bg-raised);
  border: var(--border-width) solid var(--border-default);
  padding: var(--space-5) var(--space-6) var(--space-6);
  margin-bottom: var(--space-16);
}

.demo-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  color: var(--text-secondary);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-width) solid var(--border-subtle);
}
.demo-path { color: var(--text-primary); }
.demo-dot {
  width: 7px; height: 7px; border-radius: var(--radius-full);
  background: var(--success-solid); flex: none;
}

/* Presence circles, the same shape the plugin draws in the note header. */
.demo-stack { display: inline-flex; margin-left: auto; }
.demo-seat {
  width: 22px; height: 22px; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-size: 9px; font-weight: 600; line-height: 1;
  color: var(--text-on-presence);
  border: 2px solid var(--bg-raised);
}
.demo-seat + .demo-seat { margin-left: -7px; }
/* Teal and cerise, not teal and indigo. The illustration should show the
   palette at its most legible: these are 0.185 apart in OKLab where the
   adjacent pair is 0.099, and a demo of "you can tell who is who" should not
   pick two colours a reader has to work at. */
.demo-seat-0 { background: var(--presence-1); }
.demo-seat-3 { background: var(--presence-4); }

/* The distance the editing cursor travels, computed once in the note's own font.
 *
 * `ch` is relative to the element it is used on. The bar inherits the note's
 * monospace face, the name label is 11px sans — so the same `translateX(-4ch)`
 * moved them different distances and the label trailed the bar across the word.
 *
 * Registering the property as a `` makes it compute where it is
 * declared, on the line, and inherit as a fixed length to both. One declaration,
 * one distance, and it stays correct if the note's size or face changes. */
@property --caret-travel {
  syntax: '';
  inherits: true;
  initial-value: 0px;
}

.demo-line {
  /* Four characters: the width of the word Tom selects. */
  --caret-travel: 4ch;
  /* Monospace, and this is the reason rather than a style choice.

     The reveal animates a box from zero to the segment's width in `steps(n)`,
     which gives n equal slices of *width*. In a proportional face a slice is
     not a character: a step lands wherever it lands, usually part-way through a
     glyph, so the clipped edge — and the caret that sits on it — drifts up to a
     character away from the last letter actually drawn. It reads as a cursor
     floating loose from the text.

     In a monospace face every character is one advance wide, so n slices are
     exactly n characters and the edge always falls on a character boundary.
     The caret is then precisely in front of the character about to appear,
     which is the only place a cursor is ever allowed to be. */
  font-family: var(--font-mono);
  font-size: var(--text-body-lg);
  line-height: 2.2;
  margin: var(--space-4) 0 0;
  max-width: 100%;
}

/* Revealing the note one character at a time.

   Three techniques failed here before this one, and each failed quietly.

   `width: 0 -> 100%` needs 100% to mean "this segment's own text", which only
   holds when the segment is alone on its line. A grid track `0fr -> 1fr`
   measured correctly and was still wrong: mid-reveal the item does not fill its
   track, so the box ran ahead of the glyphs and the caret rode the box.
   `width: 0 -> Nch` fixed both — and could only ever uncover a single line,
   which is why the animation used to switch itself off on a narrow screen
   rather than wrap.

   So the reveal is per character now. Each one is a span with its own
   keyframes, generated in build.mjs from the same string it renders, and hidden
   characters are `font-size: 0`, which takes no space. Line breaking is then
   the browser's ordinary job: the text wraps wherever it needs to, the caret
   sits after the last visible character on whatever line that is, and nothing
   about the animation knows or cares.

   The text is still monospace. It no longer has to be for the reveal, but the
   cursor that drags the selection is offset in `ch`, and `ch` is only a
   character width when every character is the same width. */
.demo-seg {
  white-space: pre-wrap;
}

/* One readable copy of each line for a screen reader. The visual layer is a few
   hundred single-character spans and is marked aria-hidden, because a reader
   announcing "T, i, e" is worse than no animation at all. */
.demo-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Resting state, which is what a reduced-motion reader gets: the line as it
   ends up, after Tom's edit. The word he replaced is not in it. */
.demo-old > span { font-size: 0; }
.demo-caret-edit { opacity: 0; }

/* The tint travels with the drag, arriving character by character, and it is a
   background rather than an overlay: a background paints behind the glyphs by
   definition, so the words stay at full strength. Putting opacity on the span
   would fade the text with it, which is the exact defect this design fixes in
   the plugin — and an absolutely positioned overlay would only cover the first
   line of a selection that wrapped. */
:root { --demo-selection: color-mix(in srgb, #A33862 28%, transparent); }
:root:not([data-theme='light']) { --demo-selection: color-mix(in srgb, #E28AA9 28%, transparent); }

.demo-caret {
  /* Inline with the bar drawn by ::before, rather than an inline-block.
     
     An inline-block is an atomic box, and a browser will happily break a line
     before one — which stranded the cursor at the start of the next line while
     the character it belongs to stayed on the previous one. Reproduced at a
     405px viewport, where the break landed between "silk" and Tom's caret.
     
     An empty inline creates no break opportunity, so the caret cannot be
     separated from its text at any width. The bar is absolutely positioned
     inside it and therefore contributes nothing to line breaking at all. */
  position: relative;
  display: inline;
}
.demo-caret::before {
  content: '';
  position: absolute;
  left: 0;
  /* Exactly the selection highlight's box, and by construction rather than by
   * measurement.
   *
   * The highlight is a background on a character span, so it fills that span's
   * content area. The caret is an empty inline on the same line in the same
   * font, so its own box is that same content area — verified identical to the
   * hundredth of a pixel. Filling it means `top: 0; bottom: 0`, and the two
   * agree at any font size, in any typeface, without a number to maintain.
   *
   * Two earlier versions used constants here: first a guess, then the font's
   * measured ink extents. The ink version was right about the letters and still
   * wrong, because a cursor is not the height of the letters — it is the height
   * of the line you are selecting, which is what a highlight draws. */
  top: 0;
  bottom: 0;
  width: 2px;
  border-radius: 1px;
  background: var(--caret-colour);
}
/* Never blinks. A blinking caret in someone else's colour reads as your own. */
.demo-caret-owner { --caret-colour: var(--presence-1); }
.demo-caret-second {
  --caret-colour: var(--presence-4);
  animation: demo-caret-second 18s linear infinite both;
}
.demo-caret-edit {
  --caret-colour: var(--presence-4);
  animation: demo-caret-edit 18s linear infinite both;
}

/* Tom's cursor is only ever in one place. It returns to the end of his own line
   at 64%, before any deletion starts at 66% — text vanishing with no cursor
   beside it reads as a glitch, not as an edit. */
@keyframes demo-caret-second {
  0%, 17%   { opacity: 1; }
  19%, 62%  { opacity: 0; }
  64%, 100% { opacity: 1; }
}
@keyframes demo-caret-edit {
  0%, 19%   { opacity: 0; }
  21%, 62%  { opacity: 1; }
  64%, 100% { opacity: 0; }
}

/* The cursor rides the selection.

   The travel is on ::before rather than on the caret itself, because `transform`
   does not apply to non-replaced inline elements — and the caret has to stay
   inline to avoid creating the line-break opportunity above. It starts a whole
   word to the left and walks back in the same four steps that paint the tint,
   so the highlight and the cursor are one edge rather than two things moving at
   similar speeds. */
/* The bar and the name travel together.
 *
 * Both are children of the caret — the bar as ::before, the label as its own
 * element — and the travel lives on them rather than on the caret itself,
 * because `transform` does not apply to non-replaced inline elements and the
 * caret has to stay inline to avoid creating a line-break opportunity.
 *
 * That is why the animation is named on both: putting it only on ::before left
 * the bar sliding across the word while the name stayed where the drag started,
 * which reads as two cursors rather than one. */
.demo-caret-edit::before,
.demo-caret-edit .demo-name { animation: demo-caret-edit-x 18s linear infinite both; }
@keyframes demo-caret-edit-x {
  0%, 21%   { transform: translateX(calc(-1 * var(--caret-travel))); animation-timing-function: steps(4, end); }
  27%       { transform: translateX(0); animation-timing-function: linear; }
  64%       { transform: translateX(0); }
  /* Reset while invisible, so 100% matches 0% and the loop has no seam. */
  66%, 100% { transform: translateX(calc(-1 * var(--caret-travel))); }
}

.demo-name {
  position: absolute;
  bottom: 100%;
  left: -1px;
  margin-bottom: 2px;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--text-on-presence);
}
.demo-caret-owner .demo-name { background: var(--presence-1); }
.demo-caret-second .demo-name,
.demo-caret-edit .demo-name { background: var(--presence-4); }

/* The animation runs at every width now.

   It used to stop below this breakpoint, because the reveal clipped a
   single-line box and an unwrappable sentence pushed a 375px viewport 145px
   sideways. Revealing character by character removed both problems at once: the
   line wraps like ordinary text, and the typing survives the wrap. All that is
   left here is the bar, which really does wrap. */
@media (max-width: 700px) {
  /* The bar wraps below this width, which strands the separator at the end of
     the path line with nothing after it. It is decoration (aria-hidden), so the
     wrapped layout simply drops it rather than showing a dangling middot. */
  .demo-sep {
    display: none;
  }
}

.demo-caption {
  margin: var(--space-6) 0 0;
  font-size: var(--text-body-md);
  color: var(--text-secondary);
  max-width: var(--measure-body);
}

.citation {
  background: var(--bg-vine-subtle);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  margin-bottom: var(--space-16);
}
.citation-latin {
  font-size: var(--text-display-md);
  line-height: 1.4;
  max-width: var(--measure-latin);
  margin: 0;
}
.citation-gloss {
  margin: var(--space-3) 0 0;
  font-size: var(--text-body-md);
  color: var(--text-secondary);
  max-width: var(--measure-body);
}
.citation .nx-label { display: block; margin-top: var(--space-3); }
/* The product's own name, inside the line it is named after. Withy gold is the
   brand colour, and --text-brand is the type-safe value: the fill used for
   buttons fails AA as text. */
.citation-word { color: var(--text-brand); font-style: inherit; }

/* --- contact ------------------------------------------------------------- */

.contact-block {
  border-top: var(--border-width) solid var(--border-subtle);
  padding-top: var(--space-5);
  margin-bottom: var(--space-8);
  max-width: var(--measure-body);
}
.contact-block .nx-label { display: block; margin-bottom: var(--space-3); }
.contact-line { margin: 0; font-size: var(--text-title-md); line-height: 1.5; }
.contact-block .contact-line + .contact-line { font-size: var(--text-body-lg); }
.contact-note {
  margin: var(--space-3) 0 0;
  color: var(--text-secondary);
  font-size: var(--text-body-sm);
}

@media (max-width: 640px) {
  .hero { padding-top: var(--space-10); }
  .hero h1 { font-size: var(--text-display-lg); }
  .prose > h1 { font-size: var(--text-display-md); }
}

/* Generated by build.mjs from the demo copy and DEMO_TIMELINE. Do not edit
   here: it is rewritten on every build. */
.demo-prefix > span:nth-child(1) { animation: nx-prefix-0 18s linear infinite both; }
@keyframes nx-prefix-0 { 0%, 0% { font-size: 0; } 0.01%, 85.692% { font-size: 1em; } 85.702%, 100% { font-size: 0; } }
.demo-prefix > span:nth-child(2) { animation: nx-prefix-1 18s linear infinite both; }
@keyframes nx-prefix-1 { 0%, 0.615% { font-size: 0; } 0.625%, 85.385% { font-size: 1em; } 85.395%, 100% { font-size: 0; } }
.demo-prefix > span:nth-child(3) { animation: nx-prefix-2 18s linear infinite both; }
@keyframes nx-prefix-2 { 0%, 1.231% { font-size: 0; } 1.241%, 85.077% { font-size: 1em; } 85.087%, 100% { font-size: 0; } }
.demo-prefix > span:nth-child(4) { animation: nx-prefix-3 18s linear infinite both; }
@keyframes nx-prefix-3 { 0%, 1.846% { font-size: 0; } 1.856%, 84.769% { font-size: 1em; } 84.779%, 100% { font-size: 0; } }
.demo-prefix > span:nth-child(5) { animation: nx-prefix-4 18s linear infinite both; }
@keyframes nx-prefix-4 { 0%, 2.462% { font-size: 0; } 2.472%, 84.462% { font-size: 1em; } 84.472%, 100% { font-size: 0; } }
.demo-prefix > span:nth-child(6) { animation: nx-prefix-5 18s linear infinite both; }
@keyframes nx-prefix-5 { 0%, 3.077% { font-size: 0; } 3.087%, 84.154% { font-size: 1em; } 84.164%, 100% { font-size: 0; } }
.demo-prefix > span:nth-child(7) { animation: nx-prefix-6 18s linear infinite both; }
@keyframes nx-prefix-6 { 0%, 3.692% { font-size: 0; } 3.702%, 83.846% { font-size: 1em; } 83.856%, 100% { font-size: 0; } }
.demo-prefix > span:nth-child(8) { animation: nx-prefix-7 18s linear infinite both; }
@keyframes nx-prefix-7 { 0%, 4.308% { font-size: 0; } 4.318%, 83.538% { font-size: 1em; } 83.548%, 100% { font-size: 0; } }
.demo-prefix > span:nth-child(9) { animation: nx-prefix-8 18s linear infinite both; }
@keyframes nx-prefix-8 { 0%, 4.923% { font-size: 0; } 4.933%, 83.231% { font-size: 1em; } 83.241%, 100% { font-size: 0; } }
.demo-prefix > span:nth-child(10) { animation: nx-prefix-9 18s linear infinite both; }
@keyframes nx-prefix-9 { 0%, 5.538% { font-size: 0; } 5.548%, 82.923% { font-size: 1em; } 82.933%, 100% { font-size: 0; } }
.demo-prefix > span:nth-child(11) { animation: nx-prefix-10 18s linear infinite both; }
@keyframes nx-prefix-10 { 0%, 6.154% { font-size: 0; } 6.164%, 82.615% { font-size: 1em; } 82.625%, 100% { font-size: 0; } }
.demo-prefix > span:nth-child(12) { animation: nx-prefix-11 18s linear infinite both; }
@keyframes nx-prefix-11 { 0%, 6.769% { font-size: 0; } 6.779%, 82.308% { font-size: 1em; } 82.318%, 100% { font-size: 0; } }
.demo-prefix > span:nth-child(13) { animation: nx-prefix-12 18s linear infinite both; }
@keyframes nx-prefix-12 { 0%, 7.385% { font-size: 0; } 7.395%, 82% { font-size: 1em; } 82.01%, 100% { font-size: 0; } }
.demo-prefix > span:nth-child(14) { animation: nx-prefix-13 18s linear infinite both; }
@keyframes nx-prefix-13 { 0%, 8% { font-size: 0; } 8.01%, 81.692% { font-size: 1em; } 81.702%, 100% { font-size: 0; } }
.demo-prefix > span:nth-child(15) { animation: nx-prefix-14 18s linear infinite both; }
@keyframes nx-prefix-14 { 0%, 8.615% { font-size: 0; } 8.625%, 81.385% { font-size: 1em; } 81.395%, 100% { font-size: 0; } }
.demo-prefix > span:nth-child(16) { animation: nx-prefix-15 18s linear infinite both; }
@keyframes nx-prefix-15 { 0%, 9.231% { font-size: 0; } 9.241%, 81.077% { font-size: 1em; } 81.087%, 100% { font-size: 0; } }
.demo-prefix > span:nth-child(17) { animation: nx-prefix-16 18s linear infinite both; }
@keyframes nx-prefix-16 { 0%, 9.846% { font-size: 0; } 9.856%, 80.769% { font-size: 1em; } 80.779%, 100% { font-size: 0; } }
.demo-prefix > span:nth-child(18) { animation: nx-prefix-17 18s linear infinite both; }
@keyframes nx-prefix-17 { 0%, 10.462% { font-size: 0; } 10.472%, 80.462% { font-size: 1em; } 80.472%, 100% { font-size: 0; } }
.demo-prefix > span:nth-child(19) { animation: nx-prefix-18 18s linear infinite both; }
@keyframes nx-prefix-18 { 0%, 11.077% { font-size: 0; } 11.087%, 80.154% { font-size: 1em; } 80.164%, 100% { font-size: 0; } }
.demo-prefix > span:nth-child(20) { animation: nx-prefix-19 18s linear infinite both; }
@keyframes nx-prefix-19 { 0%, 11.692% { font-size: 0; } 11.702%, 79.846% { font-size: 1em; } 79.856%, 100% { font-size: 0; } }
.demo-prefix > span:nth-child(21) { animation: nx-prefix-20 18s linear infinite both; }
@keyframes nx-prefix-20 { 0%, 12.308% { font-size: 0; } 12.318%, 79.538% { font-size: 1em; } 79.548%, 100% { font-size: 0; } }
.demo-prefix > span:nth-child(22) { animation: nx-prefix-21 18s linear infinite both; }
@keyframes nx-prefix-21 { 0%, 12.923% { font-size: 0; } 12.933%, 79.231% { font-size: 1em; } 79.241%, 100% { font-size: 0; } }
.demo-prefix > span:nth-child(23) { animation: nx-prefix-22 18s linear infinite both; }
@keyframes nx-prefix-22 { 0%, 13.538% { font-size: 0; } 13.548%, 78.923% { font-size: 1em; } 78.933%, 100% { font-size: 0; } }
.demo-prefix > span:nth-child(24) { animation: nx-prefix-23 18s linear infinite both; }
@keyframes nx-prefix-23 { 0%, 14.154% { font-size: 0; } 14.164%, 78.615% { font-size: 1em; } 78.625%, 100% { font-size: 0; } }
.demo-prefix > span:nth-child(25) { animation: nx-prefix-24 18s linear infinite both; }
@keyframes nx-prefix-24 { 0%, 14.769% { font-size: 0; } 14.779%, 78.308% { font-size: 1em; } 78.318%, 100% { font-size: 0; } }
.demo-prefix > span:nth-child(26) { animation: nx-prefix-25 18s linear infinite both; }
@keyframes nx-prefix-25 { 0%, 15.385% { font-size: 0; } 15.395%, 78% { font-size: 1em; } 78.01%, 100% { font-size: 0; } }
.demo-old > span:nth-child(1) { animation: nx-old-0 18s linear infinite both; }
@keyframes nx-old-0 { 0%, 16% { font-size: 0; background-color: transparent; } 16.01%, 22.5% { font-size: 1em; background-color: transparent; } 22.51%, 32.25% { font-size: 1em; background-color: var(--demo-selection); } 32.26%, 100% { font-size: 0; background-color: transparent; } }
.demo-old > span:nth-child(2) { animation: nx-old-1 18s linear infinite both; }
@keyframes nx-old-1 { 0%, 16.5% { font-size: 0; background-color: transparent; } 16.51%, 24% { font-size: 1em; background-color: transparent; } 24.01%, 31.5% { font-size: 1em; background-color: var(--demo-selection); } 31.51%, 100% { font-size: 0; background-color: transparent; } }
.demo-old > span:nth-child(3) { animation: nx-old-2 18s linear infinite both; }
@keyframes nx-old-2 { 0%, 17% { font-size: 0; background-color: transparent; } 17.01%, 25.5% { font-size: 1em; background-color: transparent; } 25.51%, 30.75% { font-size: 1em; background-color: var(--demo-selection); } 30.76%, 100% { font-size: 0; background-color: transparent; } }
.demo-old > span:nth-child(4) { animation: nx-old-3 18s linear infinite both; }
@keyframes nx-old-3 { 0%, 17.5% { font-size: 0; background-color: transparent; } 17.51%, 27% { font-size: 1em; background-color: transparent; } 27.01%, 30% { font-size: 1em; background-color: var(--demo-selection); } 30.01%, 100% { font-size: 0; background-color: transparent; } }
.demo-new > span:nth-child(1) { animation: nx-new-0 18s linear infinite both; }
@keyframes nx-new-0 { 0%, 33% { font-size: 0; } 33.01%, 77.5% { font-size: 1em; } 77.51%, 100% { font-size: 0; } }
.demo-new > span:nth-child(2) { animation: nx-new-1 18s linear infinite both; }
@keyframes nx-new-1 { 0%, 34% { font-size: 0; } 34.01%, 77% { font-size: 1em; } 77.01%, 100% { font-size: 0; } }
.demo-new > span:nth-child(3) { animation: nx-new-2 18s linear infinite both; }
@keyframes nx-new-2 { 0%, 35% { font-size: 0; } 35.01%, 76.5% { font-size: 1em; } 76.51%, 100% { font-size: 0; } }
.demo-new > span:nth-child(4) { animation: nx-new-3 18s linear infinite both; }
@keyframes nx-new-3 { 0%, 36% { font-size: 0; } 36.01%, 76% { font-size: 1em; } 76.01%, 100% { font-size: 0; } }
.demo-tail > span:nth-child(1) { animation: nx-tail-0 18s linear infinite both; }
@keyframes nx-tail-0 { 0%, 18% { font-size: 0; } 18.01%, 75.697% { font-size: 1em; } 75.707%, 100% { font-size: 0; } }
.demo-tail > span:nth-child(2) { animation: nx-tail-1 18s linear infinite both; }
@keyframes nx-tail-1 { 0%, 18.636% { font-size: 0; } 18.646%, 75.394% { font-size: 1em; } 75.404%, 100% { font-size: 0; } }
.demo-tail > span:nth-child(3) { animation: nx-tail-2 18s linear infinite both; }
@keyframes nx-tail-2 { 0%, 19.273% { font-size: 0; } 19.283%, 75.091% { font-size: 1em; } 75.101%, 100% { font-size: 0; } }
.demo-tail > span:nth-child(4) { animation: nx-tail-3 18s linear infinite both; }
@keyframes nx-tail-3 { 0%, 19.909% { font-size: 0; } 19.919%, 74.788% { font-size: 1em; } 74.798%, 100% { font-size: 0; } }
.demo-tail > span:nth-child(5) { animation: nx-tail-4 18s linear infinite both; }
@keyframes nx-tail-4 { 0%, 20.545% { font-size: 0; } 20.555%, 74.485% { font-size: 1em; } 74.495%, 100% { font-size: 0; } }
.demo-tail > span:nth-child(6) { animation: nx-tail-5 18s linear infinite both; }
@keyframes nx-tail-5 { 0%, 21.182% { font-size: 0; } 21.192%, 74.182% { font-size: 1em; } 74.192%, 100% { font-size: 0; } }
.demo-tail > span:nth-child(7) { animation: nx-tail-6 18s linear infinite both; }
@keyframes nx-tail-6 { 0%, 21.818% { font-size: 0; } 21.828%, 73.879% { font-size: 1em; } 73.889%, 100% { font-size: 0; } }
.demo-tail > span:nth-child(8) { animation: nx-tail-7 18s linear infinite both; }
@keyframes nx-tail-7 { 0%, 22.455% { font-size: 0; } 22.465%, 73.576% { font-size: 1em; } 73.586%, 100% { font-size: 0; } }
.demo-tail > span:nth-child(9) { animation: nx-tail-8 18s linear infinite both; }
@keyframes nx-tail-8 { 0%, 23.091% { font-size: 0; } 23.101%, 73.273% { font-size: 1em; } 73.283%, 100% { font-size: 0; } }
.demo-tail > span:nth-child(10) { animation: nx-tail-9 18s linear infinite both; }
@keyframes nx-tail-9 { 0%, 23.727% { font-size: 0; } 23.737%, 72.97% { font-size: 1em; } 72.98%, 100% { font-size: 0; } }
.demo-tail > span:nth-child(11) { animation: nx-tail-10 18s linear infinite both; }
@keyframes nx-tail-10 { 0%, 24.364% { font-size: 0; } 24.374%, 72.667% { font-size: 1em; } 72.677%, 100% { font-size: 0; } }
.demo-tail > span:nth-child(12) { animation: nx-tail-11 18s linear infinite both; }
@keyframes nx-tail-11 { 0%, 25% { font-size: 0; } 25.01%, 72.364% { font-size: 1em; } 72.374%, 100% { font-size: 0; } }
.demo-tail > span:nth-child(13) { animation: nx-tail-12 18s linear infinite both; }
@keyframes nx-tail-12 { 0%, 25.636% { font-size: 0; } 25.646%, 72.061% { font-size: 1em; } 72.071%, 100% { font-size: 0; } }
.demo-tail > span:nth-child(14) { animation: nx-tail-13 18s linear infinite both; }
@keyframes nx-tail-13 { 0%, 26.273% { font-size: 0; } 26.283%, 71.758% { font-size: 1em; } 71.768%, 100% { font-size: 0; } }
.demo-tail > span:nth-child(15) { animation: nx-tail-14 18s linear infinite both; }
@keyframes nx-tail-14 { 0%, 26.909% { font-size: 0; } 26.919%, 71.455% { font-size: 1em; } 71.465%, 100% { font-size: 0; } }
.demo-tail > span:nth-child(16) { animation: nx-tail-15 18s linear infinite both; }
@keyframes nx-tail-15 { 0%, 27.545% { font-size: 0; } 27.555%, 71.152% { font-size: 1em; } 71.162%, 100% { font-size: 0; } }
.demo-tail > span:nth-child(17) { animation: nx-tail-16 18s linear infinite both; }
@keyframes nx-tail-16 { 0%, 28.182% { font-size: 0; } 28.192%, 70.848% { font-size: 1em; } 70.858%, 100% { font-size: 0; } }
.demo-tail > span:nth-child(18) { animation: nx-tail-17 18s linear infinite both; }
@keyframes nx-tail-17 { 0%, 28.818% { font-size: 0; } 28.828%, 70.545% { font-size: 1em; } 70.555%, 100% { font-size: 0; } }
.demo-tail > span:nth-child(19) { animation: nx-tail-18 18s linear infinite both; }
@keyframes nx-tail-18 { 0%, 29.455% { font-size: 0; } 29.465%, 70.242% { font-size: 1em; } 70.252%, 100% { font-size: 0; } }
.demo-tail > span:nth-child(20) { animation: nx-tail-19 18s linear infinite both; }
@keyframes nx-tail-19 { 0%, 30.091% { font-size: 0; } 30.101%, 69.939% { font-size: 1em; } 69.949%, 100% { font-size: 0; } }
.demo-tail > span:nth-child(21) { animation: nx-tail-20 18s linear infinite both; }
@keyframes nx-tail-20 { 0%, 30.727% { font-size: 0; } 30.737%, 69.636% { font-size: 1em; } 69.646%, 100% { font-size: 0; } }
.demo-tail > span:nth-child(22) { animation: nx-tail-21 18s linear infinite both; }
@keyframes nx-tail-21 { 0%, 31.364% { font-size: 0; } 31.374%, 69.333% { font-size: 1em; } 69.343%, 100% { font-size: 0; } }
.demo-tail > span:nth-child(23) { animation: nx-tail-22 18s linear infinite both; }
@keyframes nx-tail-22 { 0%, 32% { font-size: 0; } 32.01%, 69.03% { font-size: 1em; } 69.04%, 100% { font-size: 0; } }
.demo-tail > span:nth-child(24) { animation: nx-tail-23 18s linear infinite both; }
@keyframes nx-tail-23 { 0%, 32.636% { font-size: 0; } 32.646%, 68.727% { font-size: 1em; } 68.737%, 100% { font-size: 0; } }
.demo-tail > span:nth-child(25) { animation: nx-tail-24 18s linear infinite both; }
@keyframes nx-tail-24 { 0%, 33.273% { font-size: 0; } 33.283%, 68.424% { font-size: 1em; } 68.434%, 100% { font-size: 0; } }
.demo-tail > span:nth-child(26) { animation: nx-tail-25 18s linear infinite both; }
@keyframes nx-tail-25 { 0%, 33.909% { font-size: 0; } 33.919%, 68.121% { font-size: 1em; } 68.131%, 100% { font-size: 0; } }
.demo-tail > span:nth-child(27) { animation: nx-tail-26 18s linear infinite both; }
@keyframes nx-tail-26 { 0%, 34.545% { font-size: 0; } 34.555%, 67.818% { font-size: 1em; } 67.828%, 100% { font-size: 0; } }
.demo-tail > span:nth-child(28) { animation: nx-tail-27 18s linear infinite both; }
@keyframes nx-tail-27 { 0%, 35.182% { font-size: 0; } 35.192%, 67.515% { font-size: 1em; } 67.525%, 100% { font-size: 0; } }
.demo-tail > span:nth-child(29) { animation: nx-tail-28 18s linear infinite both; }
@keyframes nx-tail-28 { 0%, 35.818% { font-size: 0; } 35.828%, 67.212% { font-size: 1em; } 67.222%, 100% { font-size: 0; } }
.demo-tail > span:nth-child(30) { animation: nx-tail-29 18s linear infinite both; }
@keyframes nx-tail-29 { 0%, 36.455% { font-size: 0; } 36.465%, 66.909% { font-size: 1em; } 66.919%, 100% { font-size: 0; } }
.demo-tail > span:nth-child(31) { animation: nx-tail-30 18s linear infinite both; }
@keyframes nx-tail-30 { 0%, 37.091% { font-size: 0; } 37.101%, 66.606% { font-size: 1em; } 66.616%, 100% { font-size: 0; } }
.demo-tail > span:nth-child(32) { animation: nx-tail-31 18s linear infinite both; }
@keyframes nx-tail-31 { 0%, 37.727% { font-size: 0; } 37.737%, 66.303% { font-size: 1em; } 66.313%, 100% { font-size: 0; } }
.demo-tail > span:nth-child(33) { animation: nx-tail-32 18s linear infinite both; }
@keyframes nx-tail-32 { 0%, 38.364% { font-size: 0; } 38.374%, 66% { font-size: 1em; } 66.01%, 100% { font-size: 0; } }
.demo-second > span:nth-child(1) { animation: nx-second-0 18s linear infinite both; }
@keyframes nx-second-0 { 0%, 1% { font-size: 0; } 1.01%, 77.667% { font-size: 1em; } 77.677%, 100% { font-size: 0; } }
.demo-second > span:nth-child(2) { animation: nx-second-1 18s linear infinite both; }
@keyframes nx-second-1 { 0%, 1.444% { font-size: 0; } 1.454%, 77.333% { font-size: 1em; } 77.343%, 100% { font-size: 0; } }
.demo-second > span:nth-child(3) { animation: nx-second-2 18s linear infinite both; }
@keyframes nx-second-2 { 0%, 1.889% { font-size: 0; } 1.899%, 77% { font-size: 1em; } 77.01%, 100% { font-size: 0; } }
.demo-second > span:nth-child(4) { animation: nx-second-3 18s linear infinite both; }
@keyframes nx-second-3 { 0%, 2.333% { font-size: 0; } 2.343%, 76.667% { font-size: 1em; } 76.677%, 100% { font-size: 0; } }
.demo-second > span:nth-child(5) { animation: nx-second-4 18s linear infinite both; }
@keyframes nx-second-4 { 0%, 2.778% { font-size: 0; } 2.788%, 76.333% { font-size: 1em; } 76.343%, 100% { font-size: 0; } }
.demo-second > span:nth-child(6) { animation: nx-second-5 18s linear infinite both; }
@keyframes nx-second-5 { 0%, 3.222% { font-size: 0; } 3.232%, 76% { font-size: 1em; } 76.01%, 100% { font-size: 0; } }
.demo-second > span:nth-child(7) { animation: nx-second-6 18s linear infinite both; }
@keyframes nx-second-6 { 0%, 3.667% { font-size: 0; } 3.677%, 75.667% { font-size: 1em; } 75.677%, 100% { font-size: 0; } }
.demo-second > span:nth-child(8) { animation: nx-second-7 18s linear infinite both; }
@keyframes nx-second-7 { 0%, 4.111% { font-size: 0; } 4.121%, 75.333% { font-size: 1em; } 75.343%, 100% { font-size: 0; } }
.demo-second > span:nth-child(9) { animation: nx-second-8 18s linear infinite both; }
@keyframes nx-second-8 { 0%, 4.556% { font-size: 0; } 4.566%, 75% { font-size: 1em; } 75.01%, 100% { font-size: 0; } }
.demo-second > span:nth-child(10) { animation: nx-second-9 18s linear infinite both; }
@keyframes nx-second-9 { 0%, 5% { font-size: 0; } 5.01%, 74.667% { font-size: 1em; } 74.677%, 100% { font-size: 0; } }
.demo-second > span:nth-child(11) { animation: nx-second-10 18s linear infinite both; }
@keyframes nx-second-10 { 0%, 5.444% { font-size: 0; } 5.454%, 74.333% { font-size: 1em; } 74.343%, 100% { font-size: 0; } }
.demo-second > span:nth-child(12) { animation: nx-second-11 18s linear infinite both; }
@keyframes nx-second-11 { 0%, 5.889% { font-size: 0; } 5.899%, 74% { font-size: 1em; } 74.01%, 100% { font-size: 0; } }
.demo-second > span:nth-child(13) { animation: nx-second-12 18s linear infinite both; }
@keyframes nx-second-12 { 0%, 6.333% { font-size: 0; } 6.343%, 73.667% { font-size: 1em; } 73.677%, 100% { font-size: 0; } }
.demo-second > span:nth-child(14) { animation: nx-second-13 18s linear infinite both; }
@keyframes nx-second-13 { 0%, 6.778% { font-size: 0; } 6.788%, 73.333% { font-size: 1em; } 73.343%, 100% { font-size: 0; } }
.demo-second > span:nth-child(15) { animation: nx-second-14 18s linear infinite both; }
@keyframes nx-second-14 { 0%, 7.222% { font-size: 0; } 7.232%, 73% { font-size: 1em; } 73.01%, 100% { font-size: 0; } }
.demo-second > span:nth-child(16) { animation: nx-second-15 18s linear infinite both; }
@keyframes nx-second-15 { 0%, 7.667% { font-size: 0; } 7.677%, 72.667% { font-size: 1em; } 72.677%, 100% { font-size: 0; } }
.demo-second > span:nth-child(17) { animation: nx-second-16 18s linear infinite both; }
@keyframes nx-second-16 { 0%, 8.111% { font-size: 0; } 8.121%, 72.333% { font-size: 1em; } 72.343%, 100% { font-size: 0; } }
.demo-second > span:nth-child(18) { animation: nx-second-17 18s linear infinite both; }
@keyframes nx-second-17 { 0%, 8.556% { font-size: 0; } 8.566%, 72% { font-size: 1em; } 72.01%, 100% { font-size: 0; } }
.demo-second > span:nth-child(19) { animation: nx-second-18 18s linear infinite both; }
@keyframes nx-second-18 { 0%, 9% { font-size: 0; } 9.01%, 71.667% { font-size: 1em; } 71.677%, 100% { font-size: 0; } }
.demo-second > span:nth-child(20) { animation: nx-second-19 18s linear infinite both; }
@keyframes nx-second-19 { 0%, 9.444% { font-size: 0; } 9.454%, 71.333% { font-size: 1em; } 71.343%, 100% { font-size: 0; } }
.demo-second > span:nth-child(21) { animation: nx-second-20 18s linear infinite both; }
@keyframes nx-second-20 { 0%, 9.889% { font-size: 0; } 9.899%, 71% { font-size: 1em; } 71.01%, 100% { font-size: 0; } }
.demo-second > span:nth-child(22) { animation: nx-second-21 18s linear infinite both; }
@keyframes nx-second-21 { 0%, 10.333% { font-size: 0; } 10.343%, 70.667% { font-size: 1em; } 70.677%, 100% { font-size: 0; } }
.demo-second > span:nth-child(23) { animation: nx-second-22 18s linear infinite both; }
@keyframes nx-second-22 { 0%, 10.778% { font-size: 0; } 10.788%, 70.333% { font-size: 1em; } 70.343%, 100% { font-size: 0; } }
.demo-second > span:nth-child(24) { animation: nx-second-23 18s linear infinite both; }
@keyframes nx-second-23 { 0%, 11.222% { font-size: 0; } 11.232%, 70% { font-size: 1em; } 70.01%, 100% { font-size: 0; } }
.demo-second > span:nth-child(25) { animation: nx-second-24 18s linear infinite both; }
@keyframes nx-second-24 { 0%, 11.667% { font-size: 0; } 11.677%, 69.667% { font-size: 1em; } 69.677%, 100% { font-size: 0; } }
.demo-second > span:nth-child(26) { animation: nx-second-25 18s linear infinite both; }
@keyframes nx-second-25 { 0%, 12.111% { font-size: 0; } 12.121%, 69.333% { font-size: 1em; } 69.343%, 100% { font-size: 0; } }
.demo-second > span:nth-child(27) { animation: nx-second-26 18s linear infinite both; }
@keyframes nx-second-26 { 0%, 12.556% { font-size: 0; } 12.566%, 69% { font-size: 1em; } 69.01%, 100% { font-size: 0; } }
.demo-second > span:nth-child(28) { animation: nx-second-27 18s linear infinite both; }
@keyframes nx-second-27 { 0%, 13% { font-size: 0; } 13.01%, 68.667% { font-size: 1em; } 68.677%, 100% { font-size: 0; } }
.demo-second > span:nth-child(29) { animation: nx-second-28 18s linear infinite both; }
@keyframes nx-second-28 { 0%, 13.444% { font-size: 0; } 13.454%, 68.333% { font-size: 1em; } 68.343%, 100% { font-size: 0; } }
.demo-second > span:nth-child(30) { animation: nx-second-29 18s linear infinite both; }
@keyframes nx-second-29 { 0%, 13.889% { font-size: 0; } 13.899%, 68% { font-size: 1em; } 68.01%, 100% { font-size: 0; } }
.demo-second > span:nth-child(31) { animation: nx-second-30 18s linear infinite both; }
@keyframes nx-second-30 { 0%, 14.333% { font-size: 0; } 14.343%, 67.667% { font-size: 1em; } 67.677%, 100% { font-size: 0; } }
.demo-second > span:nth-child(32) { animation: nx-second-31 18s linear infinite both; }
@keyframes nx-second-31 { 0%, 14.778% { font-size: 0; } 14.788%, 67.333% { font-size: 1em; } 67.343%, 100% { font-size: 0; } }
.demo-second > span:nth-child(33) { animation: nx-second-32 18s linear infinite both; }
@keyframes nx-second-32 { 0%, 15.222% { font-size: 0; } 15.232%, 67% { font-size: 1em; } 67.01%, 100% { font-size: 0; } }
.demo-second > span:nth-child(34) { animation: nx-second-33 18s linear infinite both; }
@keyframes nx-second-33 { 0%, 15.667% { font-size: 0; } 15.677%, 66.667% { font-size: 1em; } 66.677%, 100% { font-size: 0; } }
.demo-second > span:nth-child(35) { animation: nx-second-34 18s linear infinite both; }
@keyframes nx-second-34 { 0%, 16.111% { font-size: 0; } 16.121%, 66.333% { font-size: 1em; } 66.343%, 100% { font-size: 0; } }
.demo-second > span:nth-child(36) { animation: nx-second-35 18s linear infinite both; }
@keyframes nx-second-35 { 0%, 16.556% { font-size: 0; } 16.566%, 66% { font-size: 1em; } 66.01%, 100% { font-size: 0; } }