/* Extruded lettering (Tone Segurado's cartoon display type, rewritten for live text).
   Every look is a coloured fill inside a round-cornered ink outline; part.js draws the outline and depth as a
   text-shadow stack (a ring of ink copies) because -webkit-text-stroke traces a variable font's overlapping
   contours (lines through R, N, E) and mitres the corners - the source's Lottie strokes are clean and round.
     .xl              outline only
     .xl.xl--block    + a solid ink copy offset down-left (the source's HOW CAN I HELP YOU? / CREATING / hero lines)
     .xl.xl--deep     + a deep two-tone extrusion: light side faces, darker undersides, inked edges (STAND OUT)
   All sizes in em: the look scales with font-size. Without JS: a plain text-stroke fallback. */
.xl {
  --xl-font: "Anybody", "Arial Black", system-ui, sans-serif;
  --xl-wdth: 75;                  /* Anybody width axis 50 .. 150 */
  --xl-wght: 900;                 /* 100 .. 900 */
  --xl-fill: #b4dffc;             /* source fills: #b4dffc sky, #abf4d8 mint, #ffe1be cream, #f6d489 butter, #f69b66 orange */
  --xl-ink: #161616;
  --xl-line: .03em;               /* visible outline (source: 10px centred stroke on a 245px cap -> ~5px outside + 5px on the letter) */
  --xl-shadow-ink: #161616;       /* block copy colour (keep it solid: overlapping translucent shadows stack darker) */
  --xl-shadow: .045em;            /* block: ink copy offset each way (source: -10, +10 px on a 245px cap) */
  --xl-depth: .16em;              /* deep: extrusion length along the angle (source STAND OUT: ~40px = .22 x a 183px cap) */
  --xl-angle: 135deg;             /* 135 = down-left (source); 45 = down-right */
  --xl-side: #f69b66;             /* deep: side faces */
  --xl-under: #da7438;            /* deep: undersides */
  font-family: var(--xl-font);
  font-variation-settings: "wdth" var(--xl-wdth), "wght" var(--xl-wght);
  font-weight: var(--xl-wght);
  font-synthesis: none;
  text-transform: uppercase;
  line-height: .92;
  letter-spacing: 0;
  color: var(--xl-fill);
}
.xl:not(.xl-on) { -webkit-text-stroke: calc(var(--xl-line) * 2) var(--xl-ink); paint-order: stroke fill; }