/* A code component's Shadow DOM doesn't inherit the page's box-sizing reset. */
.ALpaEo6HL4YqNXZghGkN,
.ALpaEo6HL4YqNXZghGkN *,
.ALpaEo6HL4YqNXZghGkN *::before,
.ALpaEo6HL4YqNXZghGkN *::after {
  box-sizing: border-box;
}

/* Fills the column's width as a block (a code component's host is otherwise inline). */
:host {
  display: block;
}

/* The article body's blockquote (shared/Prose): a 6px line at the left, Heading M quote, Body Default attribution. */
.ALpaEo6HL4YqNXZghGkN {
  /* The line's width as a plain number too: the bars' resting scale is worked out from it. */
  --line-n: 6;
  --line: calc(var(--line-n) * 1px);
  --travel: 1800ms;
  /* The bars' heights, top to bottom (blue, teal, soft black, magenta, violet). */
  --h1: 24px;
  --h2: 30px;
  --h3: 16px;
  --h4: 20px;
  --h5: 26px;
  position: relative;
  margin: 0;
  padding-left: calc(var(--line) + max(24px, 2.31vw));
  color: var(--text-primary, #171717);
  font-family: var(--type-family-base, 'Raleway', system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.DkIt0pJCBBRW64pbtoPP {
  margin: 0;
}

.DkIt0pJCBBRW64pbtoPP p {
  margin: 0;
  font-size: var(--type-heading-m-size, 42px);
  font-weight: var(--type-heading-m-weight, 300);
  line-height: var(--type-heading-m-lh, 50px);
  letter-spacing: var(--type-heading-m-ls, 0);
}

.KvJSKHM4KDsSQK45H1JP {
  margin-top: max(16px, 1.39vw);
  color: var(--neutral-700, #353535);
  font-size: var(--type-default-size, 16px);
  line-height: var(--type-default-lh, 23px);
}

.KfyP9W1yx_kjqSgymwgw {
  color: var(--text-primary, #171717);
  font-weight: 600;
}

/* --- The accent line: light gray at rest, filled brand blue behind the last bar --- */

/*
 * A size container (the fill is the line's height, 100cqh), clipped to the line top and bottom only, so the
 * bars appear out of its top and run out of its foot while still reaching out to the left.
 */
.FtCyC4Z3aGR0yxsETSRA {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--line);
  container-type: size;
  clip-path: inset(0 -100px);
  background: var(--border-lightest, #cfc7d4);
}

/*
 * One stack that runs down the line: the blue fill, then the bars (blue, teal, soft black, magenta, violet) flush against
 * each other, each lower one reaching further out to the left like steps. It starts wholly above the line and
 * stops when the fill covers it, the bars gone out of the foot. Bars are pinned to the line's right edge.
 * It moves in one unbroken run, reaching out as it comes in and drawing back into the line as it nears
 * the foot.
 */
.rUFMGO_BIb3WvCH_0nrE {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  translate: 0 -100%;
}

.Sa7ix47TfYu8tzJ_w5XI {
  flex: none;
  width: 100%;
  height: 100cqh;
  background: var(--action-primary-default, #0073e6);
}

/* Under 768px the reach is scaled down to stay inside the page's margin. */
.uPWKRxGIo3NYjwjEfk6o {
  --reach: 1;
  /* The bar at full reach, and the scale that narrows it to the line's width. */
  --span: calc(var(--w) * var(--reach));
  --rest: calc(var(--line-n) / var(--span));
  flex: none;
  width: calc(var(--span) * 1px);
  height: var(--h);
  scale: var(--rest) 1;
  transform-origin: right center;
}

/*
 * (--w, the reach, is a plain number of px, for --rest above.) Each bar swells out and back on its own timing
 * (--out: when it starts, --for: how long it takes), all within the run, so they stand at different distances
 * from the line from moment to moment, like a sound meter, while the stack itself moves as one.
 */
.uPWKRxGIo3NYjwjEfk6o:nth-child(2) {
  --w: 22;
  --h: var(--h1);
  --out: 150ms;
  --for: 1250ms;
  background: var(--action-primary-default, #0073e6);
}

.uPWKRxGIo3NYjwjEfk6o:nth-child(3) {
  --w: 46;
  --h: var(--h2);
  --out: 300ms;
  --for: 1500ms;
  background: var(--brand-teal-300, #73f2e5);
}

.uPWKRxGIo3NYjwjEfk6o:nth-child(4) {
  --w: 34;
  --h: var(--h3);
  --out: 200ms;
  --for: 1300ms;
  background: var(--text-primary, #171717);
}

.uPWKRxGIo3NYjwjEfk6o:nth-child(5) {
  --w: 30;
  --h: var(--h4);
  --out: 0ms;
  --for: 1000ms;
  background: var(--brand-magenta-500, #be02b3);
}

.uPWKRxGIo3NYjwjEfk6o:nth-child(6) {
  --w: 40;
  --h: var(--h5);
  --out: 100ms;
  --for: 1450ms;
  background: var(--brand-violet-300, #9484ff);
}

@media (max-width: 767px) {
  .uPWKRxGIo3NYjwjEfk6o {
    --reach: 0.6;
  }
}

.ALpaEo6HL4YqNXZghGkN[data-state='play'] .rUFMGO_BIb3WvCH_0nrE {
  animation: JTL0RlSaNTfzFKehms7i var(--travel) cubic-bezier(0.45, 0, 0.25, 1) both;
}

.ALpaEo6HL4YqNXZghGkN[data-state='play'] .uPWKRxGIo3NYjwjEfk6o {
  animation: WdBrA4pj5Xqu31yDKGnw var(--for) ease-in-out var(--out) both;
}

.ALpaEo6HL4YqNXZghGkN[data-state='done'] .rUFMGO_BIb3WvCH_0nrE {
  translate: none;
}

@keyframes JTL0RlSaNTfzFKehms7i {
  to {
    translate: none;
  }
}

/* Out to the bar's reach and back into the line. */
@keyframes WdBrA4pj5Xqu31yDKGnw {
  45% {
    scale: 1 1;
  }

  100% {
    scale: var(--rest) 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ALpaEo6HL4YqNXZghGkN[data-state='play'] .rUFMGO_BIb3WvCH_0nrE,
  .ALpaEo6HL4YqNXZghGkN[data-state='play'] .uPWKRxGIo3NYjwjEfk6o {
    animation: none;
  }

  /* The finished blue line from the start, not only once the quote has come into view. */
  .ALpaEo6HL4YqNXZghGkN:is([data-state='rest'], [data-state='play']) .rUFMGO_BIb3WvCH_0nrE {
    translate: none;
  }
}