.flexibility-demo .flexibility-animation {
  position: relative;
  width: 100%;
  isolation: isolate;
  background: transparent;
  --flexibility-duration: 800ms;
  --flexibility-easing: cubic-bezier(.25, .8, .25, 1);
  --flexibility-idle-lift: -3px;
}

.flexibility-demo .flexibility-animation .flexibility-stage {
  position: relative;
  overflow: hidden;
  background: transparent;
}

.flexibility-demo .flexibility-animation .flexibility-scene {
  overflow: visible;
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 3;
  isolation: isolate;
}

.flexibility-demo .flexibility-animation image {
  pointer-events: none;
  user-select: none;
}

.flexibility-demo .flexibility-animation .flexibility-tile {
  outline: none;
}

.flexibility-demo .flexibility-animation .flexibility-hit {
  fill: transparent;
  pointer-events: all;
}

.flexibility-demo .flexibility-animation .flexibility-lift {
  pointer-events: none;
}

.flexibility-demo .flexibility-animation .flexibility-tile-float {
  pointer-events: none;
  animation: flexibility-idle var(--flexibility-idle-duration, 6000ms) var(--flexibility-easing) infinite;
  animation-delay: var(--flexibility-idle-delay, 0ms);
  animation-play-state: paused;
}

.flexibility-demo .flexibility-animation[data-running="true"] .flexibility-tile-float {
  animation-play-state: running;
}

@keyframes flexibility-idle {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(var(--flexibility-idle-lift))
  }
}

@supports (transition-timing-function:linear(0, 1)) {
  .flexibility-demo .flexibility-animation {
    --flexibility-easing: linear(0.000000, 0.004750, 0.018064, 0.038625, 0.065233, 0.096798, 0.132338, 0.170968, 0.211901, 0.254435, 0.297953, 0.341913, 0.385847, 0.429351, 0.472080, 0.513747, 0.554112, 0.592982, 0.630206, 0.665666, 0.699280, 0.730993, 0.760775, 0.788619, 0.814536, 0.838556, 0.860718, 0.881076, 0.899693, 0.916638, 0.931987, 0.945819, 0.958219, 0.969270, 0.979057, 0.987666, 0.995181, 1.001685, 1.007258, 1.011978, 1.015921, 1.019157, 1.021755, 1.023781, 1.025294, 1.026353, 1.027011, 1.027317, 1.027317, 1.027055, 1.026570, 1.025896, 1.025066, 1.024110, 1.023055, 1.021923, 1.020736, 1.019513, 1.018270, 1.017022, 1.015780, 1.014556, 1.013357, 1.012193, 1.011068, 1.009988, 1.008957, 1.007977, 1.007050, 1.006178, 1.005360, 1.004598, 1.003890, 1.003235, 1.002632, 1.002079, 1.001575, 1.001118, 1.000704, 1.000332, 1.000000);
  }
}

.flexibility-demo .flexibility-layout,
.flexibility-demo .flexibility-layout * {
  box-sizing: border-box;
}

.flexibility-demo .flexibility-layout {
  grid-template-columns: minmax(0, 32fr) minmax(0, 68fr);
  align-items: start;
  width: 100%;
  margin: 0 auto;
}

.flexibility-demo .flexibility-heading-position {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  position: relative;
  z-index: 4;
  min-width: 0;
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 25px;
  overflow-wrap: anywhere;
  padding: 0;
}

.flexibility-demo .flexibility-section-description {
  min-width: 0;
  max-width: 100%;
}

.flexibility-demo .flexibility-section-description>:first-child {
  margin-top: 0;
}

.flexibility-demo .flexibility-section-description>:last-child {
  margin-bottom: 0;
}

.flexibility-demo .flexibility-section-description img {
  max-width: 100%;
  height: auto;
}

.flexibility-demo .flexibility-layout>.flexibility-animation {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

.flexibility-demo.flexibility-demo-pwr--dark,
.flexibility-demo.flexibility-demo-pwr--light,
.flexibility-demo .flexibility-layout,
.flexibility-demo .flexibility-crop {
  background-color: transparent !important;
}

@media (prefers-reduced-motion:reduce) {
  .flexibility-demo .flexibility-animation .flexibility-tile-float {
    animation: none;
  }
}

@media (max-width:1151px) {
  .flexibility-demo .flexibility-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
  }

  .flexibility-demo .flexibility-heading-position {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    margin: 0;
    padding: 80px 12px 25px;
  }

  .flexibility-demo .flexibility-layout>.flexibility-animation {
    grid-column: 1;
    grid-row: 2;
  }
}

@media (max-width:719px) {
  .flexibility-demo .flexibility-heading-position {
    padding-top: 60px;
  }

  .flexibility-demo .flexibility-animation .flexibility-stage {
    width: 138%;
    margin-left: -19%;
  }
}

.flexibility-demo .flexibility-crop {
  position: relative;
  background: transparent !important;
  height: auto;
}

@media (max-width:1151px) {
  .flexibility-demo .flexibility-crop .flexibility-heading-position {
    padding-top: 0;
  }
}

@media (max-width:719px) {
  .flexibility-demo .flexibility-crop .flexibility-animation {
    margin-top: 0px;
  }
}

@media (max-width:719px) {
  .flexibility-demo .flexibility-animation .flexibility-graph {
    height: auto;
  }
}

.flexibility-demo .flexibility-tile:focus {
  outline: none;
}

@media (max-width:719px) {
  .flexibility-demo .flexibility-animation .flexibility-graph {
    overflow: visible;
  }
}

.flexibility-demo .flexibility-demo-demo-reference-container {
  box-sizing: border-box;
}

.flexibility-demo .flexibility-demo-demo-reference-container>.flexibility-crop,
.flexibility-demo .flexibility-demo-demo-reference-container>.flexibility-layout {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
}

.flexibility-demo .flexibility-demo-demo-reference-container .flexibility-heading-position {
  padding: 0 !important;
}

.flexibility-demo .flexibility-demo-demo-reference-container .flexibility-heading-position {
  gap: 25px;
}

.flexibility-demo .flexibility-demo-demo-reference-container .flexibility-section-description {
  margin: 0;
}

.flexibility-demo .flexibility-demo-demo-reference-container .flexibility-section-description>:first-child {
  margin-top: 0;
}

.flexibility-demo .flexibility-demo-demo-reference-container .flexibility-section-description>:last-child {
  margin-bottom: 0;
}

.flexibility-demo {
  box-sizing: border-box;
}

@media (max-width:767px) {
  .flexibility-demo {
    padding-block: 60px;
  }
}

.flexibility-demo .flexibility-crop,
.flexibility-demo .flexibility-layout,
.flexibility-demo .flexibility-animation .flexibility-stage {
  overflow: visible;
  clip-path: none;
}

.flexibility-demo[data-flexibility-theme="dark"] {
  color: #fff;
  color-scheme: dark;
}

.flexibility-demo[data-flexibility-theme="dark"] .flexibility-layout {
  background: transparent !important;
}

@media (min-width:1152px) {
  .flexibility-demo .flexibility-layout.flexibility-demo-page-center {
    padding-inline: 0;
  }
}

.flexibility-demo .flexibility-animation .flexibility-stage {
  width: 100%;
  margin-left: 0;
}

.flexibility-demo .flexibility-crop .flexibility-animation {
  margin-top: 0;
}

.flexibility-demo .flexibility-animation .flexibility-graph {
  height: auto;
}

.flexibility-demo .flexibility-tile {
  cursor: default;
}

.flexibility-demo .flexibility-animation .flexibility-stage {
  aspect-ratio: 1127.787513/730;
}

.flexibility-demo .flexibility-animation .flexibility-tile {
  cursor: pointer;
}

.flexibility-demo .flexibility-demo-flex-tile-glow {
  opacity: 0;
  transition: opacity var(--flexibility-duration) var(--flexibility-easing);
}

.flexibility-demo .flexibility-demo-flex-tile-base {
  opacity: 1;
  transition: opacity var(--flexibility-duration) var(--flexibility-easing);
}

.flexibility-demo .flexibility-tile:is(.flexibility-demo-is-active, :focus-visible) .flexibility-demo-flex-tile-glow {
  opacity: 1;
}

@media (min-width:1152px) {
  .flexibility-demo .flexibility-demo-demo-reference-container {
    width: 100%;
    max-width: none;
    padding-inline: 20px;
  }

  .flexibility-demo .flexibility-layout {
    max-width: none;
    grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
    column-gap: 20px;
    align-items: center;
  }
}

@media (prefers-reduced-motion:reduce) {

  .flexibility-demo .flexibility-demo-flex-tile-glow,
  .flexibility-demo .flexibility-demo-flex-tile-base {
    transition: none;
  }
}

.flexibility-demo .flexibility-demo-flex-tile-dark {
  opacity: 0;
  transition: opacity var(--flexibility-duration) var(--flexibility-easing);
}

.flexibility-demo .flexibility-tile.flexibility-demo-is-pressed .flexibility-demo-flex-tile-dark {
  opacity: 1;
}

.flexibility-demo .flexibility-tile.flexibility-demo-is-pressed .flexibility-demo-flex-tile-glow {
  opacity: 0;
}

@media (prefers-reduced-motion:reduce) {
  .flexibility-demo .flexibility-demo-flex-tile-dark {
    transition: none;
  }
}

.flexibility-demo .flexibility-animation {
  --flex-tile-travel: 9.608px;
}

.flexibility-demo .flexibility-animation .flexibility-lift {
  transition: transform var(--flexibility-duration) var(--flexibility-easing);
}

@media (prefers-reduced-motion:reduce) {
  .flexibility-demo .flexibility-animation .flexibility-lift {
    transition: none;
  }
}

.flexibility-demo .flexibility-demo-flex-tile-cell {
  stroke-width: 2.35124706;
  stroke: #00A3E0;
  opacity: 1;
  transition: stroke 800ms ease, opacity 800ms ease;
}

.flexibility-demo .flexibility-demo-flex-tile-cell.flexibility-demo-is-lowered {
  stroke-width: 1;
  stroke: #A1D2FF;
  opacity: .15;
}

@media (prefers-reduced-motion:reduce) {
  .flexibility-demo .flexibility-demo-flex-tile-cell {
    transition: none;
  }
}

.flexibility-demo .flexibility-animation {
  --flex-tile-base-offset: 2px;
}

.flexibility-demo .flexibility-animation .flexibility-lift {
  transform: translateY(var(--flex-tile-base-offset));
}

.flexibility-demo .flexibility-animation .flexibility-tile.flexibility-demo-is-active .flexibility-lift {
  transform: translateY(calc(var(--flex-tile-base-offset) - var(--flex-tile-travel)));
}

.flexibility-demo .flexibility-animation .flexibility-tile.flexibility-demo-is-pressed .flexibility-lift {
  transform: translateY(var(--flex-tile-base-offset));
}

@media (prefers-reduced-motion:reduce) {
  .flexibility-demo .flexibility-animation .flexibility-tile:is(.flexibility-demo-is-active, .flexibility-demo-is-pressed) .flexibility-lift {
    transform: translateY(var(--flex-tile-base-offset));
  }
}

.flexibility-demo-flex-state-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.flexibility-demo-flex-state-button {
  box-sizing: border-box;
  min-height: 44px;
  border: 1px solid #0F68AB;
  border-radius: 30px;
  background: transparent;
  color: #fff;
  font: 400 14px/1.6 Inter, Arial, sans-serif;
  cursor: pointer;
  transition: background-color .3s ease, border-color .3s ease;
}

.flexibility-demo-flex-state-button:hover,
.flexibility-demo-flex-state-button[aria-pressed="true"] {
  background: #0F68AB;
}

.flexibility-demo-flex-state-button:focus-visible {
  outline: 2px solid #8bd6ff;
  outline-offset: 3px;
}

@media (prefers-reduced-motion:reduce) {
  .flexibility-demo-flex-state-button {
    transition: none;
  }
}

.flexibility-demo .flexibility-animation .flexibility-tile.flexibility-demo-state-high .flexibility-lift {
  transform: translateY(calc(var(--flex-tile-base-offset) - var(--flex-tile-travel)));
}

.flexibility-demo .flexibility-animation .flexibility-tile.flexibility-demo-state-low .flexibility-lift {
  transform: translateY(var(--flex-tile-base-offset));
}

.flexibility-demo .flexibility-tile.flexibility-demo-state-high .flexibility-demo-flex-tile-glow {
  opacity: 1;
}

.flexibility-demo .flexibility-tile.flexibility-demo-state-high .flexibility-demo-flex-tile-dark {
  opacity: 0;
}

.flexibility-demo .flexibility-tile.flexibility-demo-state-low .flexibility-demo-flex-tile-glow {
  opacity: 0;
}

.flexibility-demo .flexibility-tile.flexibility-demo-state-low .flexibility-demo-flex-tile-dark {
  opacity: 1;
}

.flexibility-demo .flexibility-demo-flex-tile-cell.flexibility-demo-state-high {
  stroke: #00A3E0;
  opacity: 1;
}

.flexibility-demo .flexibility-demo-flex-tile-cell.flexibility-demo-state-low {
  stroke-width: 1;
  stroke: #A1D2FF;
  opacity: .15;
}

.flexibility-demo .flexibility-animation .flexibility-demo-flex-connections path {
  transition: stroke-dashoffset 800ms cubic-bezier(.25, .8, .25, 1);
}

@media (prefers-reduced-motion:reduce) {
  .flexibility-demo .flexibility-animation .flexibility-demo-flex-connections path {
    transition: none;
  }

  .flexibility-demo .flexibility-animation .flexibility-tile.flexibility-demo-state-high .flexibility-lift {
    transform: translateY(var(--flex-tile-base-offset));
  }
}

.flexibility-demo-flex-state-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 112px;
  height: 52px;
  padding: 12px 18px;
}

.flexibility-demo-flex-state-button img {
  display: block;
  width: auto;
}

.flexibility-demo .flexibility-demo-flex-plinth-dots {
  opacity: .75;
  transition: opacity 400ms ease-in-out;
  pointer-events: none;
}

.flexibility-demo .flexibility-tile:is(.flexibility-demo-is-pressed, .flexibility-demo-state-low) .flexibility-demo-flex-plinth-dots {
  opacity: 0;
}

.flexibility-demo .flexibility-tile.flexibility-demo-state-high .flexibility-demo-flex-plinth-dots {
  opacity: .75;
}

@media (prefers-reduced-motion:reduce) {
  .flexibility-demo .flexibility-demo-flex-plinth-dots {
    transition: none;
  }
}

.flexibility-demo .flexibility-demo-flex-tile-object {
  filter: brightness(1) sepia(0) hue-rotate(0deg) saturate(1);
  transition: filter var(--flexibility-duration) var(--flexibility-easing);
  pointer-events: none;
}

.flexibility-demo .flexibility-tile:is(.flexibility-demo-is-pressed, .flexibility-demo-state-low) .flexibility-demo-flex-tile-object {
  filter: var(--flex-dark-filter);
}

.flexibility-demo .flexibility-tile.flexibility-demo-state-high .flexibility-demo-flex-tile-object {
  filter: brightness(1) sepia(0) hue-rotate(0deg) saturate(1);
}

@media (prefers-reduced-motion:reduce) {
  .flexibility-demo .flexibility-demo-flex-tile-object {
    transition: none;
  }
}

.flexibility-demo .flexibility-demo-flex-marker-core,
.flexibility-demo .flexibility-demo-flex-marker-ring {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 240ms cubic-bezier(.2, .8, .2, 1), fill 240ms ease;
}

.flexibility-demo-flex-tooltip {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  pointer-events: none;
  max-width: min(260px, calc(100vw - 24px));
  padding: 9px 15px;
  border-radius: 12px;
  color: #fff;
  font: var(--fw-btn, 400) var(--fs-btn, 14px)/1.6 var(--ff-btn, Inter, Arial, sans-serif);
  letter-spacing: var(--ls-btn, 0px);
  text-align: center;
  opacity: 0;
  transform: translate(-50%, calc(-100% + 7px)) scale(.94);
  transition: opacity 160ms ease, transform 280ms cubic-bezier(.22, 1.3, .36, 1);
}

.flexibility-demo-flex-tooltip.flexibility-demo-is-visible {
  opacity: 1;
  transform: translate(-50%, -100%) scale(1);
}

.flexibility-demo-flex-tooltip {
  width: max-content;
  box-sizing: border-box;
  white-space: pre-line;
  background: transparent;

  box-shadow: none;
  isolation: isolate;
}

.flexibility-demo-flex-tooltip::after {
  display: none;
}

.flexibility-demo-flex-tooltip::before {
  content: "";
  position: absolute;
  inset: -7px 0;
  z-index: -1;
  background:rgb(0 0 0 / 80%);

  clip-path: var(--bubble-shape);
}

.flexibility-demo-flex-tooltip .flexibility-demo-flex-bubble-outline {
  position: absolute;
  left: 0;
  top: -7px;
  width: 100%;
  height: calc(100% + 14px);
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}

.flexibility-demo-flex-tooltip.flexibility-demo-is-persistent {
  transform: translate(-50%, -7px) scale(.94);
  transition: opacity 320ms ease, transform 560ms cubic-bezier(.22, 1.3, .36, 1);
}

.flexibility-demo-flex-tooltip.flexibility-demo-is-persistent.flexibility-demo-is-visible {
  transform: translate(-50%, 0) scale(1);
}

@media (prefers-reduced-motion:reduce) {
  .flexibility-demo-flex-tooltip.flexibility-demo-is-persistent {
    transition: none;
  }
}

.flexibility-demo .flexibility-tile.flexibility-demo-state-high .flexibility-demo-flex-marker-body {
  transform: scale(1);
}

.flexibility-demo .flexibility-tile.flexibility-demo-state-high .flexibility-demo-flex-marker-pulse {
  display: none;
}

.flexibility-demo .flexibility-tile.flexibility-demo-state-high:is(.flexibility-demo-is-active, :focus-visible) .flexibility-demo-flex-marker-body {
  transform: scale(1.1);
}

.flexibility-demo-flex-state-button img {
  filter: brightness(0) invert(1);
  max-width: none;
  height: auto;
  object-fit: contain;
}

.flexibility-demo-flex-state-button[data-graph-state="1"] img {
  width: 65px;
}

.flexibility-demo-flex-state-button[data-graph-state="2"] img {
  width: 90px;
}

.flexibility-demo-flex-state-button[data-graph-state="3"] img {
  width: 78px;
}

.flexibility-demo-flex-state-button[data-graph-state="4"] img {
  width: 84px;
}

@media (prefers-reduced-motion:reduce) {

  .flexibility-demo-flex-tooltip,
  .flexibility-demo .flexibility-demo-flex-marker-core,
  .flexibility-demo .flexibility-demo-flex-marker-ring {
    transition: none;
  }
}

.flexibility-demo .flexibility-demo-flex-marker {
  pointer-events: all;
  cursor: pointer;
}

.flexibility-demo .flexibility-demo-flex-marker-body {
  transition: transform 240ms ease;
  transform-origin: 0 0;
}

.flexibility-demo .flexibility-demo-flex-marker-fill {
  transition: fill 240ms ease;
}

.flexibility-demo .flexibility-demo-flex-marker-pulse {
  transform-origin: 0 0;
  animation: flexibility-demo-flex-marker-pulse var(--pulse-duration, 2s) ease infinite;
  animation-delay: var(--pulse-delay, 0s);
  pointer-events: none;
}

.flexibility-demo .flexibility-demo-flex-marker-hit {
  pointer-events: all;
}

.flexibility-demo .flexibility-tile:is(.flexibility-demo-is-active, :focus-visible) .flexibility-demo-flex-marker-body {
  transform: scale(1.1);
}

@keyframes flexibility-demo-flex-marker-pulse {
  from {
    transform: scale(1);
    opacity: 1
  }

  to {
    transform: scale(2);
    opacity: 0
  }
}

@media (prefers-reduced-motion:reduce) {
  .flexibility-demo .flexibility-demo-flex-marker-pulse {
    animation: none;
    opacity: 0;
  }

  .flexibility-demo .flexibility-demo-flex-marker-body,
  .flexibility-demo .flexibility-demo-flex-marker-fill {
    transition: none;
  }
}

.flexibility-demo {
  padding-block: 0;
}

.flexibility-demo .flexibility-crop {
  height: auto !important;
  overflow: hidden;
}

.flexibility-demo .flexibility-crop>.flexibility-layout {
  transform: none;
}

.flexibility-demo .flexibility-layout {
  display: block;
  position: relative;
  max-width: none;
}

.flexibility-demo .flexibility-layout>.flexibility-animation {
  width: 80%;
  margin: 0 0 0 auto;
}

.flexibility-demo .flexibility-layout>.flexibility-heading-position {
  position: absolute;
  left: 0;
  top: 68%;
  width: 43%;
  z-index: 4;
  gap: 25px;
  padding: 0 !important;
  pointer-events: none;
}

.flexibility-demo .flexibility-heading-position .flexibility-section-description,
.flexibility-demo .flexibility-heading-position .flexibility-demo-flex-state-controls {
  pointer-events: auto;
}

.flexibility-demo .flexibility-heading-position .flexibility-section-description {
  max-width: 560px;
}

.flexibility-demo .flexibility-heading-position .flexibility-section-description p {
  margin: 0;
}

.flexibility-demo .flexibility-demo-flex-state-button {
  min-width: 0;
  flex: 1;
  max-width: 150px;
}

@media (max-width:1151px) {
  .flexibility-demo .flexibility-layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .flexibility-demo .flexibility-layout>.flexibility-heading-position {
    display: contents;
  }

  .flexibility-demo .flexibility-heading-position .flexibility-section-description {
    max-width: 560px;
    width: 100%;
  }

  .flexibility-demo .flexibility-layout>.flexibility-animation {
    width: 100%;
    margin: 0;
  }

  .flexibility-demo .flexibility-animation .flexibility-stage {
    width: 100%;
    margin: 0;
  }

  .flexibility-demo .flexibility-animation .flexibility-graph {
    height: auto;
  }

  .flexibility-demo .flexibility-demo-flex-state-controls {
    flex-wrap: wrap;
  }
}

@media (max-width:479px) {
  .flexibility-demo .flexibility-demo-flex-state-button {
    flex: 0 1 calc(50% - 6px);
    max-width: none;
  }
}

.flexibility-demo .flexibility-demo-flex-osp-plane {
  opacity: var(--plane-opacity, 1);
  pointer-events: none;
  transition: opacity 550ms ease-in-out;
}

.flexibility-demo .flexibility-demo-flex-osp-slide {
  transform: translateY(var(--plane-drop, 60px));
  transition: transform 1550ms cubic-bezier(.22, 1.35, .36, 1);
}

.flexibility-demo .flexibility-demo-flex-plane-owner.flexibility-demo-is-hidden .flexibility-demo-flex-osp-plane {
  opacity: 0;
  transition-duration: 400ms;
}

.flexibility-demo .flexibility-demo-flex-plane-owner.flexibility-demo-is-hidden .flexibility-demo-flex-osp-slide {
  transform: translateY(0);
  transition: transform 0s 420ms;
}

@media (prefers-reduced-motion:reduce) {

  .flexibility-demo .flexibility-demo-flex-osp-plane,
  .flexibility-demo .flexibility-demo-flex-osp-slide {
    transition: none;
  }

}

.flexibility-demo .flexibility-demo-flex-state-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: transparent;

  border-color: rgb(255 255 255 / 20%);
}

.flexibility-demo .flexibility-demo-flex-state-button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #0F68AB;
  z-index: -1;
  clip-path: inset(100% 0 0 0);
  transition: clip-path .4s ease-in-out;
  pointer-events: none;
}

.flexibility-demo .flexibility-demo-flex-state-button[aria-pressed="true"]::after,
.flexibility-demo .flexibility-demo-flex-state-button:focus-visible::after {
  clip-path: inset(0);
}

@media (hover:hover) {
  .flexibility-demo .flexibility-demo-flex-state-button:hover::after {
    clip-path: inset(0);
  }
}

@media (prefers-reduced-motion:reduce) {
  .flexibility-demo .flexibility-demo-flex-state-button::after {
    transition: none;
  }
}

.flexibility-demo .flexibility-demo-flex-state-controls {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  padding: 2px;
  border: 1px solid rgb(255 255 255 / 30%);
  border-radius: 30px;
  box-sizing: border-box;
  width: 100%;
  max-width: 600px;
  background: transparent;

}

.flexibility-demo .flexibility-demo-flex-state-controls .flexibility-demo-flex-state-button {
  position: relative;
  z-index: 2;
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  padding: 12px 10px;
  border: 0;
  background: transparent;

  overflow: visible;
}

.flexibility-demo .flexibility-demo-flex-state-button::after {
  display: none;
}

.flexibility-demo .flexibility-demo-flex-state-controls .flexibility-demo-flex-state-button img {
  max-width: 100%;
  object-fit: contain;
}

.flexibility-demo-flex-switch-hover,
.flexibility-demo-flex-switch-selection {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 44px;
  pointer-events: none;
  transform-origin: 0 0;
  border-radius: 30px;
  opacity: 0;
  transition: transform 900ms cubic-bezier(.22, 1, .36, 1), opacity 180ms ease;
}

.flexibility-demo-flex-switch-hover {
  z-index: 0;
  background: rgb(255 255 255 / 18%);
  transition-duration: 650ms, 180ms;
}

.flexibility-demo-flex-switch-selection {
  z-index: 1;
  background: #0f68ab;
}

@media (prefers-reduced-motion:reduce) {

  .flexibility-demo-flex-switch-hover,
  .flexibility-demo-flex-switch-selection {
    transition: none;
  }
}

.flexibility-demo-flex-state-reset {
  position: absolute;
  left: calc(100% + 6px);
  top: 50%;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 35%);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-50%) scale(.7) rotate(-45deg);
}

.flexibility-demo-flex-state-reset::before,
.flexibility-demo-flex-state-reset::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  top: 17px;
  height: 1px;
  background: currentColor;
  transform: rotate(45deg);
}

.flexibility-demo-flex-state-reset::after {
  transform: rotate(-45deg);
}

.flexibility-demo:not([data-graph-state="default"]) .flexibility-demo-flex-state-reset {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(-50%) scale(1) rotate(0);
}

.flexibility-demo-flex-state-reset {
  transition: opacity 220ms ease, transform 350ms cubic-bezier(.22, 1.3, .36, 1), visibility 220ms, background-color 250ms ease;
}

@media (hover:hover) {
  .flexibility-demo-flex-state-reset:hover {
    background: rgb(255 255 255 / 12%);
  }
}

.flexibility-demo-flex-state-reset:focus-visible {
  outline: 2px solid #a1d2ff;
  outline-offset: 3px;
}

@media (max-width:1151px) {
  .flexibility-demo .flexibility-heading-position .flexibility-section-description {
    text-align: center;
    align-self: center;
  }

  .flexibility-demo .flexibility-heading-position .flexibility-demo-flex-state-controls {
    align-self: center;
    max-width: 600px;
  }
}

@media (prefers-reduced-motion:reduce) {
  .flexibility-demo-flex-state-reset {
    transition: none;
  }
}

.flexibility-demo .flexibility-demo-flex-state-controls {
  transition: transform 350ms cubic-bezier(.22, 1, .36, 1);
}

@media (max-width:1151px) {
  .flexibility-demo:not([data-graph-state="default"]) .flexibility-demo-flex-state-controls {
    transform: translateX(-22px);
  }
}

@media (prefers-reduced-motion:reduce) {
  .flexibility-demo .flexibility-demo-flex-state-controls {
    transition: none;
  }
}

.flexibility-demo-flex-asda-apps {
  pointer-events: none;
}

.flexibility-demo-flex-asda-app {
  transform: scale(0);
  opacity: 0;
  transition: transform 380ms cubic-bezier(.22, 1, .36, 1), opacity 180ms ease;
  transform-origin: 0 0;
}

.flexibility-demo[data-graph-state="1"] .flexibility-animation .flexibility-demo-flex-asda-app {
  transform: scale(1);
  opacity: 1;
  transition-delay: var(--app-delay);
}

@media (prefers-reduced-motion:reduce) {
  .flexibility-demo-flex-asda-app {
    transition: none;
  }
}

.flexibility-demo .flexibility-section-description,
.flexibility-demo .flexibility-section-description p,
.flexibility-demo-flex-tooltip {
  text-wrap: balance;
}

.flexibility-demo-flex-tooltip-close {
  position: relative;
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: #fff;
  font: 400 20px/24px Arial, sans-serif;
  width: auto;
  height: 26px;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  z-index: 3;
  border-radius: 50%;
  transition: background-color 200ms ease;
}

.flexibility-demo-flex-tooltip-close:hover,
.flexibility-demo-flex-tooltip-close:active {
  background: transparent;
  box-shadow: none;
}

.flexibility-demo-flex-tooltip-close:focus-visible {
  outline: 2px solid #a1d2ff;
}

.flexibility-demo-flex-tooltip:has(.flexibility-demo-flex-tooltip-close) {
  display: flex;
  align-items: center;
  gap: 15px;
  pointer-events: auto;
  cursor: pointer;
}

.flexibility-demo-flex-tooltip-copy {
  min-width: 0;
}

.flexibility-demo-flex-tooltip[hidden] {
  display: none;
}

@media (max-width:719px) {
  .flexibility-demo .flexibility-heading-position .flexibility-demo-flex-state-controls {
    width: calc(100% - 40px);
    max-width: none;
  }

  .flexibility-demo:not([data-graph-state="default"]) .flexibility-demo-flex-state-controls {
    transform: none;
  }

  .flexibility-demo .flexibility-demo-flex-state-controls .flexibility-demo-flex-state-reset {
    left: auto;
    right: 0;
    top: -6px;
    width: 32px;
    height: 32px;
    transform: translateY(-100%) scale(.7) rotate(-45deg);
  }

  .flexibility-demo:not([data-graph-state="default"]) .flexibility-demo-flex-state-controls .flexibility-demo-flex-state-reset {
    transform: translateY(-100%) scale(1) rotate(0);
  }

  .flexibility-demo .flexibility-demo-flex-state-reset::before,
  .flexibility-demo .flexibility-demo-flex-state-reset::after {
    left: 7px;
    right: 7px;
    top: 14px;
  }

  .flexibility-demo .flexibility-demo-flex-state-controls .flexibility-demo-flex-state-button {
    padding: 8.4px 4.9px;
  }
}

@media (min-width:1152px) {
  .flexibility-demo .flexibility-crop {
    padding-bottom: 0;
    height: auto !important;
    overflow: visible;
  }
}

@media (max-width:1151px) {
  .flexibility-demo .flexibility-crop {
    padding-bottom: 60px;
  }

  .flexibility-demo .flexibility-heading-position .flexibility-demo-flex-state-controls {
    margin-bottom: 0;
  }
}

.flexibility-demo .flexibility-demo-flex-marker:focus {
  outline: none;
}

.flexibility-demo .flexibility-demo-flex-marker:focus-visible .flexibility-demo-flex-marker-body {
  filter: drop-shadow(0 0 4px #a1d2ff);
  transform: scale(1.1);
}

.flexibility-demo .flexibility-demo-flex-marker:focus-visible .flexibility-demo-flex-marker-fill {
  stroke: #a1d2ff;
  stroke-width: 2;
}

.flexibility-demo .flexibility-animation .flexibility-tile:focus-visible {
  outline: none;
}

.flexibility-demo .flexibility-animation .flexibility-tile:focus-visible .flexibility-hit {
  fill: none;
  stroke: #8bd6ff;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.flexibility-demo .flexibility-tile:focus-visible .flexibility-demo-flex-marker-body {
  filter: drop-shadow(0 0 4px #8bd6ff);
}

.flexibility-demo .flexibility-tile:focus-visible .flexibility-demo-flex-marker-fill {
  stroke: #8bd6ff;
  stroke-width: 2;
}

.flexibility-demo .flexibility-demo-flex-marker {
  opacity: 1;
  transition: opacity 400ms ease-in-out;
}

.flexibility-demo .flexibility-tile.flexibility-demo-state-low .flexibility-demo-flex-marker {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion:reduce) {
  .flexibility-demo .flexibility-demo-flex-marker {
    transition: none;
  }
}

@media (max-width:719px) {
  .flexibility-demo .flexibility-demo-flex-state-button:not([data-graph-state="2"]) img {
    transform: scale(.8);
  }
}

@media (min-width:1152px) {
  .flexibility-demo .flexibility-layout>.flexibility-animation {
    width: 77.52%;
  }
}

@media (min-width:1152px) {
  .flexibility-demo .flexibility-layout>.flexibility-heading-position {
    left: 0;
    top: auto;
    bottom: auto;
    width: 43%;
  }

  .flexibility-demo .flexibility-demo-flex-state-controls .flexibility-demo-flex-state-reset {
    left: auto;
    right: 0;
    top: -6px;
    transform: translateY(-100%) scale(.7) rotate(-45deg);
  }

  .flexibility-demo:not([data-graph-state="default"]) .flexibility-demo-flex-state-controls .flexibility-demo-flex-state-reset {
    transform: translateY(-100%) scale(1) rotate(0);
  }
}

.flexibility-demo .flexibility-demo-demo-reference-container {
  width: auto;
  max-width: var(--lo-content-width, 1200px);
  margin-inline: auto;
  padding: 0;
}

.flexibility-demo-flex-state-reset {
  background: rgb(0 0 0 / 12%);

}

@media (max-width:1151px) {

  .flexibility-demo .flexibility-crop,
  .flexibility-demo .flexibility-layout,
  .flexibility-demo .flexibility-animation,
  .flexibility-demo .flexibility-graph,
  .flexibility-demo .flexibility-stage {
    overflow: visible !important;
    clip-path: none !important;
  }

  .flexibility-demo .flexibility-animation .flexibility-stage {
    aspect-ratio: 1127.787513/850;
  }

  .flexibility-demo .flexibility-animation .flexibility-scene {
    height: 100%;
  }

  .flexibility-demo .flexibility-heading-position .flexibility-demo-flex-state-controls {
    width: 100%;
  }
}

.flexibility-demo .flexibility-animation:not([data-running="true"]) * {
  animation-play-state: paused !important;
}

@media (max-width:1151px) {
  .flexibility-demo .flexibility-layout>.flexibility-animation {
    order: 0;
  }

  .flexibility-demo .flexibility-heading-position .flexibility-section-description {
    order: 1;
  }

  .flexibility-demo .flexibility-heading-position .flexibility-demo-flex-state-controls {
    order: 2;
  }
}

@media (prefers-reduced-motion:reduce) {

  .flexibility-demo *,
  .flexibility-demo-flex-tooltip {
    animation: none !important;
    transition-duration: 0ms !important;
  }
}

@media (min-width:1152px) {
  .flexibility-demo .flexibility-layout > .flexibility-animation {
    transform: translateX(var(--graph-right-offset, 0px));
  }
}
@media (max-width:1151px) {
  .flexibility-demo .flexibility-heading-position .flexibility-section-description {
    position: relative;
    z-index: 4;
  }
  .flexibility-demo .flexibility-heading-position .flexibility-demo-flex-state-controls {
    z-index: 4;
  }
}

.flexibility-demo-introduction {
  position: absolute;
  top: var(--introduction-top, 0px);
  left: 0;
  width: var(--introduction-width, 30%);
  z-index: 4;
}
.flexibility-demo-title,
.flexibility-demo-description {
  text-wrap: balance;
  overflow-wrap: break-word;
}
.flexibility-demo-title { margin: 0 0 24px; }
.flexibility-demo-description > :first-child { margin-top: 0; }
.flexibility-demo-description > :last-child { margin-bottom: 0; }
@media (max-width:1151px) {
  .flexibility-demo-introduction {
    position: relative;
    top: auto;
    width: 100%;
    order: -1;
  }
}

@media (min-width:1152px) {
  .flexibility-demo {
    padding-block: 0;
  }
  .flexibility-demo .flexibility-crop {
    height: var(--desktop-content-height, auto) !important;
    overflow: hidden !important;
  }
  .flexibility-demo .flexibility-crop > .flexibility-layout {
    transform: translateY(var(--desktop-content-shift, 0px));
  }
}

@media (max-width:1151px) {
  .flexibility-demo { padding-block: 80px; }
  .flexibility-demo .flexibility-layout > .flexibility-animation {
    margin-top: var(--mobile-graph-margin, 0px);
  }
  .flexibility-demo .flexibility-heading-position .flexibility-section-description {
    margin-top: var(--mobile-text-margin, 0px);
  }
  .flexibility-demo .flexibility-heading-position .flexibility-demo-flex-state-controls {
    margin-bottom: 0;
  }
}
@media (max-width:719px) {
  .flexibility-demo { padding-block: 60px; }
}

@media (min-width:1152px) {
  .flexibility-demo .flexibility-layout > .flexibility-heading-position {
    top: auto;
    bottom: var(--retailer-bottom, 0px);
  }
}

.flexibility-demo .flexibility-demo-flex-plane-owner.flexibility-demo-is-hidden .flexibility-demo-flex-plinth-dots {
  opacity: 0;
}

.flexibility-demo .flexibility-active-grid-effect {
  opacity: 0;
  transition: opacity 400ms ease-in-out;
  pointer-events: none;
}
.flexibility-demo .flexibility-active-grid-effect.flexibility-grid-effect-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .flexibility-demo .flexibility-active-grid-effect { transition: none; }
}

.flexibility-demo .flexibility-grid-glow-lift {
  transform: translateY(0);
  transition: transform var(--flexibility-duration) var(--flexibility-easing);
}
.flexibility-demo .flexibility-grid-effect-visible .flexibility-grid-glow-lift {
  transform: translateY(calc(-1 * var(--flex-tile-travel) / 0.6804899528));
}
@media (prefers-reduced-motion: reduce) {
  .flexibility-demo .flexibility-grid-glow-lift,
  .flexibility-demo .flexibility-grid-effect-visible .flexibility-grid-glow-lift {
    transform: none;
    transition: none;
  }
}


@media (max-width: 1200px) {
  .flexibility-demo .flexibility-demo-demo-reference-container {
    margin-inline: var(--sp-p-hor-desktop, 20px);
  }
}
@media (max-width: 575px) {
  .flexibility-demo .flexibility-demo-demo-reference-container {
    margin-inline: var(--sp-p-hor-mobile, 10px);
  }
}
@media (min-width: 1201px) and (max-width: 1240px) {
  .flexibility-demo .flexibility-demo-demo-reference-container {
    max-width: calc(100% - 40px);
  }
}

.flexibility-demo-flex-tooltip{pointer-events:auto;white-space:normal;overflow-wrap:anywhere}
.flexibility-demo-flex-tooltip::after{content:"";display:block;position:absolute;left:0;right:0;top:100%;height:30px;background:transparent}


.flexibility-demo[data-selection-variant="different-ways"]{--way-button-size:52px}
.flexibility-demo[data-selection-variant="different-ways"] .flexibility-demo-number-controls-wrap{display:flex;align-items:center;justify-content:center;gap:8px;width:max-content;max-width:100%;align-self:flex-start}
.flexibility-demo[data-selection-variant="different-ways"] .flexibility-demo-flex-state-controls{width:max-content!important;max-width:none;flex:0 0 auto;margin:0!important;align-self:center}
.flexibility-demo[data-selection-variant="different-ways"] .flexibility-demo-flex-state-controls .flexibility-demo-flex-state-button{flex:0 0 var(--way-button-size);width:var(--way-button-size);height:var(--way-button-size);min-width:var(--way-button-size);max-width:var(--way-button-size);min-height:var(--way-button-size);padding:0;aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;line-height:1}


@media(max-width:1151px){
.flexibility-demo[data-selection-variant="different-ways"] .flexibility-demo-number-controls-wrap{align-self:center;margin-inline:auto}
.flexibility-demo[data-selection-variant="different-ways"] .flexibility-heading-position{align-items:center}
}
@media(max-width:719px){.flexibility-demo[data-selection-variant="different-ways"]{--way-button-size:44px}}

@media(max-width:1151px){
.flexibility-demo[data-selection-variant="different-ways"] .flexibility-heading-position>.flexibility-demo-number-controls-wrap{order:2;position:relative;z-index:4;pointer-events:auto;flex-shrink:0;align-self:center;margin-inline:auto}
.flexibility-demo[data-selection-variant="different-ways"] .flexibility-demo-flex-state-controls{flex-wrap:nowrap}
}


.flexibility-demo[data-selection-variant="different-ways"] .flexibility-demo-number-controls-wrap{position:relative;gap:0;transform:translateX(0);transition:transform 350ms cubic-bezier(.22,1,.36,1)}
.flexibility-demo[data-selection-variant="different-ways"] .flexibility-demo-flex-state-controls{order:0;transform:none!important}
.flexibility-demo[data-selection-variant="different-ways"] .flexibility-demo-flex-state-reset{display:block;order:1;position:absolute!important;left:calc(100% + 8px)!important;right:auto!important;top:50%!important;bottom:auto!important;width:38px;height:38px;margin:0;padding:0;box-sizing:border-box;border:1px solid rgb(255 255 255 / 35%);border-radius:50%;background:rgb(0 0 0 / 12%);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-50%) scale(.7) rotate(-45deg)!important;transition:opacity 220ms ease,transform 350ms cubic-bezier(.22,1.3,.36,1),visibility 220ms,background-color 250ms ease}
.flexibility-demo[data-selection-variant="different-ways"]:not([data-graph-state="default"]) .flexibility-demo-flex-state-reset{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(-50%) scale(1) rotate(0)!important}
.flexibility-demo[data-selection-variant="different-ways"] .flexibility-demo-flex-state-reset::before,
.flexibility-demo[data-selection-variant="different-ways"] .flexibility-demo-flex-state-reset::after{content:"";left:50%;right:auto;top:50%;width:16px;height:1.5px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg);transform-origin:center}
.flexibility-demo[data-selection-variant="different-ways"] .flexibility-demo-flex-state-reset::after{transform:translate(-50%,-50%) rotate(-45deg)}
@media(max-width:1151px){.flexibility-demo[data-selection-variant="different-ways"]:not([data-graph-state="default"]) .flexibility-demo-number-controls-wrap{transform:translateX(-23px)}}
@media(prefers-reduced-motion:reduce){.flexibility-demo[data-selection-variant="different-ways"] .flexibility-demo-number-controls-wrap,.flexibility-demo[data-selection-variant="different-ways"] .flexibility-demo-flex-state-reset{transition:none}}


[data-demo-motion-root] .demo-motion-controls{box-sizing:border-box;display:flex;justify-content:flex-end;max-width:1200px;margin:0 auto;padding:12px 20px;position:relative;z-index:10}
[data-demo-motion-root="osp"]:not([data-osp-theme="light"])>.demo-motion-controls,[data-demo-motion-root="flexibility"]>.demo-motion-controls,[data-demo-motion-root="solutions"]>.demo-motion-controls{color:#fff}
[data-demo-motion-root="instore-fulfilment"]>.demo-motion-controls{color:#000}
[data-demo-motion-root] .demo-motion-toggle{min-height:44px;font:400 14px/1.5 var(--ff-btn,Inter,Arial,sans-serif);padding:8px 14px;border:1px solid currentColor;border-radius:30px;background:transparent;color:inherit;cursor:pointer}
[data-demo-motion-root] .demo-motion-toggle:focus-visible{outline:3px solid currentColor;outline-offset:3px}
[data-demo-motion-root][data-user-paused="true"] *,[data-demo-motion-root][data-user-paused="true"] *::before,[data-demo-motion-root][data-user-paused="true"] *::after{animation-play-state:paused!important}
.demo-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
@media(forced-colors:active){[data-demo-motion-root] .demo-motion-toggle{border-color:ButtonText}[data-demo-motion-root] .demo-motion-toggle:focus-visible{outline-color:Highlight}}

.flexibility-demo[data-without-copy="true"] .flexibility-section-description {
  max-width: 100%;
  text-wrap: balance;
}
@media (min-width: 1152px) {
  .flexibility-demo[data-without-copy="true"] .flexibility-layout > .flexibility-animation {
    width: var(--full-graph-width, 100%);
    max-width: none;
    flex-shrink: 0;
  }
  .flexibility-demo[data-without-copy="true"] .flexibility-heading-position {
    width: max-content;
    max-width: 100%;
    align-items: flex-start;
  }
  .flexibility-demo[data-without-copy="true"] .flexibility-heading-position > .flexibility-demo-number-controls-wrap {
    margin-inline: 0;
    align-self: flex-start;
  }
}

@media (max-width: 1151px) {
  .flexibility-demo .flexibility-crop,
  .flexibility-demo .flexibility-layout,
  .flexibility-demo .flexibility-layout > .flexibility-animation,
  .flexibility-demo .flexibility-animation .flexibility-graph {
    height: auto !important;
    min-height: 0;
  }
  .flexibility-demo .flexibility-layout > .flexibility-animation {
    width: 100%;
    flex: 0 0 auto;
  }
  .flexibility-demo .flexibility-animation .flexibility-stage {
    height: auto;
    min-height: 0;
    aspect-ratio: 1127.787513 / 850;
  }
}

@media (min-width: 720px) and (max-width: 1151px) {
  .flexibility-demo {
    padding-bottom: 40px;
  }
}