.magic-bento {
  --mb-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  position: relative;
  box-sizing: border-box;
  display: grid;
  grid-auto-flow: row dense;
  width: 100%;
  color: var(--mb-ink);
  font-feature-settings: 'tnum' 0;
  -webkit-tap-highlight-color: transparent;
}

@supports (transition-timing-function: linear(0, 1)) {
  .magic-bento {
    --mb-spring: linear(
      0,
      0.0603,
      0.2033,
      0.3821,
      0.5633,
      0.7258,
      0.8584,
      0.9574,
      1.0242,
      1.0634,
      1.0809,
      1.0828,
      1.0747,
      1.0613,
      1.046,
      1.0313,
      1.0186,
      1.0085,
      1.0012,
      0.9965,
      0.994,
      0.9931,
      0.9933,
      0.9941,
      0.9953,
      0.9966,
      0.9978,
      0.9988,
      1
    );
  }
}

.magic-bento__cell {
  position: relative;
  min-width: 0;
  min-height: 0;
  --mb-delay: 0ms;
}

.magic-bento[data-intro] .magic-bento__cell {
  opacity: 0;
  transform: translate3d(0, 16px, 0) scale(0.97);
}

.magic-bento[data-intro] .magic-bento__cell[data-state='in'] {
  opacity: 1;
  transform: none;
  transition:
    opacity 420ms cubic-bezier(0.22, 1, 0.36, 1) var(--mb-delay),
    transform 760ms var(--mb-spring) var(--mb-delay);
}

.magic-bento__card {
  position: relative;
  box-sizing: border-box;
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--mb-radius);
  background: var(--mb-surface);
  box-shadow: var(--mb-shadow);
  color: var(--mb-ink);
  text-decoration: none;
  isolation: isolate;
  outline: none;
  transform: perspective(900px) translate3d(var(--mb-tx, 0px), var(--mb-ty, 0px), 0) rotateX(var(--mb-rx, 0deg))
    rotateY(var(--mb-ry, 0deg)) scale(var(--mb-press, 1));
  user-select: none;
  -webkit-user-select: none;
}

.magic-bento__card[data-clickable] {
  cursor: pointer;
}

.magic-bento__card:focus-visible {
  box-shadow:
    var(--mb-shadow),
    0 0 0 2px var(--mb-focus);
}

.magic-bento__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.magic-bento__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    to top,
    rgba(10, 9, 13, 0.82) 0%,
    rgba(10, 9, 13, 0.7) 14%,
    rgba(10, 9, 13, 0.46) 30%,
    rgba(10, 9, 13, 0.2) 46%,
    rgba(10, 9, 13, 0.05) 60%,
    rgba(10, 9, 13, 0) 72%
  );
  pointer-events: none;
}

.magic-bento__light {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: radial-gradient(
    var(--mb-spot-size) circle at var(--mb-x, -999px) var(--mb-y, -999px),
    rgba(var(--mb-glow-rgb), calc(var(--mb-spot-alpha) * var(--mb-hot, 0) * 1)) 0%,
    rgba(var(--mb-glow-rgb), calc(var(--mb-spot-alpha) * var(--mb-hot, 0) * 0.973)) 15%,
    rgba(var(--mb-glow-rgb), calc(var(--mb-spot-alpha) * var(--mb-hot, 0) * 0.837)) 30%,
    rgba(var(--mb-glow-rgb), calc(var(--mb-spot-alpha) * var(--mb-hot, 0) * 0.593)) 45%,
    rgba(var(--mb-glow-rgb), calc(var(--mb-spot-alpha) * var(--mb-hot, 0) * 0.317)) 60%,
    rgba(var(--mb-glow-rgb), calc(var(--mb-spot-alpha) * var(--mb-hot, 0) * 0.104)) 75%,
    rgba(var(--mb-glow-rgb), calc(var(--mb-spot-alpha) * var(--mb-hot, 0) * 0.009)) 90%,
    rgba(var(--mb-glow-rgb), 0) 100%
  );
  pointer-events: none;
}

.magic-bento__stars {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.magic-bento__rim {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px var(--mb-edge),
    inset 0 1px 0 var(--mb-highlight);
  pointer-events: none;
}

.magic-bento__border {
  position: absolute;
  inset: 0;
  z-index: 4;
  box-sizing: border-box;
  padding: 1px;
  border-radius: inherit;
  background:
    radial-gradient(
      var(--mb-border-size) circle at var(--mb-x, -999px) var(--mb-y, -999px),
      rgba(var(--mb-glow-rgb), calc(var(--mb-glow-alpha) * var(--mb-near, 0) * 1)) 0%,
      rgba(var(--mb-glow-rgb), calc(var(--mb-glow-alpha) * var(--mb-near, 0) * 0.973)) 15%,
      rgba(var(--mb-glow-rgb), calc(var(--mb-glow-alpha) * var(--mb-near, 0) * 0.837)) 30%,
      rgba(var(--mb-glow-rgb), calc(var(--mb-glow-alpha) * var(--mb-near, 0) * 0.593)) 45%,
      rgba(var(--mb-glow-rgb), calc(var(--mb-glow-alpha) * var(--mb-near, 0) * 0.317)) 60%,
      rgba(var(--mb-glow-rgb), calc(var(--mb-glow-alpha) * var(--mb-near, 0) * 0.104)) 75%,
      rgba(var(--mb-glow-rgb), calc(var(--mb-glow-alpha) * var(--mb-near, 0) * 0.009)) 90%,
      rgba(var(--mb-glow-rgb), 0) 100%
    ),
    radial-gradient(
      circle at var(--mb-wx, -999px) var(--mb-wy, -999px),
      rgba(var(--mb-glow-rgb), 0) calc(var(--mb-wr, 0px) - 110px),
      rgba(var(--mb-glow-rgb), calc(var(--mb-glow-alpha) * var(--mb-wa, 0) * 0.1)) calc(var(--mb-wr, 0px) - 80px),
      rgba(var(--mb-glow-rgb), calc(var(--mb-glow-alpha) * var(--mb-wa, 0) * 0.32)) calc(var(--mb-wr, 0px) - 52px),
      rgba(var(--mb-glow-rgb), calc(var(--mb-glow-alpha) * var(--mb-wa, 0) * 0.68)) calc(var(--mb-wr, 0px) - 28px),
      rgba(var(--mb-glow-rgb), calc(var(--mb-glow-alpha) * var(--mb-wa, 0) * 0.94)) calc(var(--mb-wr, 0px) - 10px),
      rgba(var(--mb-glow-rgb), calc(var(--mb-glow-alpha) * var(--mb-wa, 0))) calc(var(--mb-wr, 0px) - 3px),
      rgba(var(--mb-glow-rgb), 0) var(--mb-wr, 0px)
    );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
  pointer-events: none;
}

.magic-bento__content {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  padding: var(--mb-pad);
}

.magic-bento__header {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  color: var(--mb-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.magic-bento__icon {
  display: grid;
  width: 16px;
  height: 16px;
  flex: none;
  place-items: center;
  color: var(--mb-ink);
}

.magic-bento__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.magic-bento__visual {
  position: relative;
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  container-type: size;
}

.magic-bento__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: auto;
}

.magic-bento__title {
  margin: 0;
  color: var(--mb-ink);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 20px;
}

.magic-bento__description {
  margin: 0;
  color: var(--mb-muted);
  font-size: 13px;
  line-height: 1.45;
}

.magic-bento[data-autohide] .magic-bento__title,
.magic-bento[data-autohide] .magic-bento__description {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.magic-bento[data-autohide] .magic-bento__title {
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

.magic-bento[data-autohide] .magic-bento__description {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.magic-bento__card[data-image] .magic-bento__header,
.magic-bento__card[data-image] .magic-bento__description {
  color: rgba(244, 244, 245, 0.72);
}

.magic-bento__card[data-image] .magic-bento__title,
.magic-bento__card[data-image] .magic-bento__icon {
  color: #f4f4f5;
}

.magic-bento__well {
  position: relative;
  box-sizing: border-box;
  border-radius: var(--mb-inner-radius);
  background: var(--mb-well);
  box-shadow: inset 0 0 0 1px var(--mb-well-edge);
}

.magic-bento__tile {
  position: relative;
  box-sizing: border-box;
  border-radius: var(--mb-inner-radius);
  background: var(--mb-tile);
  box-shadow: var(--mb-tile-shadow);
}

.magic-bento__tile::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px var(--mb-tile-edge),
    inset 0 1px 0 var(--mb-tile-highlight);
  pointer-events: none;
}

.magic-bento__chart {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  touch-action: pan-y;
}

.magic-bento__figure {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}

.magic-bento__figure-value {
  color: var(--mb-ink);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 18px;
}

.magic-bento__figure-note {
  min-width: 0;
  overflow: hidden;
  color: var(--mb-muted);
  text-overflow: ellipsis;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  line-height: 14px;
}

.magic-bento__plot {
  position: relative;
  min-height: 0;
  flex: 1;
  margin-top: 6px;
}

.magic-bento__plot svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.magic-bento__chart-area {
  fill: rgba(var(--mb-accent-rgb), 0.14);
}

.magic-bento__chart-line {
  fill: none;
  stroke: rgb(var(--mb-accent-rgb));
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.magic-bento__scrub {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: linear-gradient(to bottom, rgba(var(--mb-accent-rgb), 0), rgba(var(--mb-accent-rgb), 0.35));
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.magic-bento__scrub-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3px;
  border-radius: 50%;
  background: rgb(var(--mb-accent-rgb));
  box-shadow: 0 0 0 3px var(--mb-ring);
}

.magic-bento__chart[data-scrub] .magic-bento__scrub {
  opacity: 1;
}

.magic-bento__bars {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}

.magic-bento__bars-plot {
  display: flex;
  min-height: 0;
  flex: 1;
  align-items: flex-end;
  gap: 5px;
  margin-top: 8px;
}

.magic-bento__bar {
  position: relative;
  height: calc(var(--h) * 100%);
  min-height: 3px;
  flex: 1;
  border-radius: 3px 3px 2px 2px;
  background: rgba(var(--mb-accent-rgb), 0.18);
  transform-origin: 50% 100%;
  transition:
    background-color 200ms ease,
    filter 200ms ease;
}

.magic-bento__bar[data-peak] {
  background: rgb(var(--mb-accent-rgb));
}

@media (hover: hover) {
  .magic-bento__bar:hover {
    background: rgba(var(--mb-accent-rgb), 0.42);
  }

  .magic-bento__bar[data-peak]:hover {
    background: rgb(var(--mb-accent-rgb));
    filter: brightness(1.1);
  }
}

.magic-bento__collab {
  position: relative;
  display: flex;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  padding: 16px 16px 22px;
}

.magic-bento__doc-title {
  color: var(--mb-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
}

.magic-bento__lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

.magic-bento__line {
  position: relative;
  width: var(--w);
  height: 6px;
  border-radius: 3px;
  background: var(--mb-line);
}

.magic-bento__line--gap {
  margin-top: 8px;
}

.magic-bento__selection {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: var(--from);
  width: var(--span);
  border-radius: 3px;
  background: rgba(var(--mb-accent-rgb), 0.16);
}

.magic-bento__caret {
  position: absolute;
  top: -5px;
  right: -1px;
  bottom: -5px;
  width: 1.5px;
  border-radius: 1px;
  background: rgb(var(--mb-accent-rgb));
}

.magic-bento__cursor {
  position: absolute;
  top: var(--y);
  left: var(--x);
  z-index: 2;
  display: flex;
  align-items: flex-start;
  pointer-events: none;
}

.magic-bento__cursor svg {
  display: block;
  flex: none;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.35));
}

.magic-bento__cursor-name {
  margin: 13px 0 0 -2px;
  padding: 2px 7px;
  border-radius: 7px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 14px;
  white-space: nowrap;
}

.magic-bento__cursor--primary svg path {
  fill: rgb(var(--mb-accent-rgb));
  stroke: var(--mb-cursor-stroke);
}

.magic-bento__cursor--primary .magic-bento__cursor-name {
  background: rgb(var(--mb-accent-rgb));
  color: var(--mb-accent-ink);
}

.magic-bento__cursor--secondary svg path {
  fill: var(--mb-secondary);
  stroke: var(--mb-cursor-stroke);
}

.magic-bento__cursor--secondary .magic-bento__cursor-name {
  background: var(--mb-secondary);
  color: var(--mb-secondary-ink);
}

.magic-bento__flow {
  position: relative;
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 8px;
}

.magic-bento__flow-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 8px;
}

.magic-bento__flow-glyph {
  display: grid;
  width: 28px;
  height: 28px;
  flex: none;
  place-items: center;
  border-radius: calc(var(--mb-inner-radius) - 2px);
  background: var(--mb-well);
  color: var(--mb-ink);
}

.magic-bento__flow-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.magic-bento__flow-name {
  overflow: hidden;
  color: var(--mb-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.magic-bento__flow-meta {
  overflow: hidden;
  color: var(--mb-muted);
  font-size: 11.5px;
  line-height: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.magic-bento__flow-hash {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
}

.magic-bento__steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 2px 0 0;
  list-style: none;
}

.magic-bento__rail {
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 21px;
  width: 1px;
  background: var(--mb-line);
}

.magic-bento__rail-fill {
  position: absolute;
  inset: 0;
  background: rgba(var(--mb-accent-rgb), 0.55);
  transform-origin: 50% 0;
}

.magic-bento__step {
  position: relative;
  display: flex;
  height: 33px;
  align-items: center;
  gap: 10px;
  padding: 0 12px 0 14px;
  color: var(--mb-ink);
  font-size: 13px;
  line-height: 16px;
}

.magic-bento__status {
  position: relative;
  display: grid;
  width: 16px;
  height: 16px;
  flex: none;
  place-items: center;
}

.magic-bento__status > * {
  grid-area: 1 / 1;
}

.magic-bento__pending {
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border: 1.5px dashed var(--mb-faint);
  border-radius: 50%;
  opacity: 0;
}

.magic-bento__spinner {
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border: 1.5px solid rgba(var(--mb-accent-rgb), 0.22);
  border-top-color: rgb(var(--mb-accent-rgb));
  border-radius: 50%;
  opacity: 0;
}

.magic-bento__done {
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border-radius: 50%;
  background: rgb(var(--mb-accent-rgb));
  color: var(--mb-accent-ink);
}

.magic-bento__step-time {
  margin-left: auto;
  color: var(--mb-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.magic-bento__hub {
  position: relative;
  width: 100%;
  max-width: 240px;
  min-height: 0;
  flex: 1;
  margin: 0 auto;
}

.magic-bento__hub-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.magic-bento__hub-links line {
  stroke: var(--mb-line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.magic-bento__hub-node {
  --size: min(var(--s), 30cqh);
  position: absolute;
  top: var(--y);
  left: var(--x);
  display: grid;
  width: var(--size);
  height: var(--size);
  place-items: center;
  margin: calc(var(--size) * -0.5) 0 0 calc(var(--size) * -0.5);
  color: var(--mb-ink);
}

.magic-bento__hub-node.magic-bento__tile {
  border-radius: calc(var(--size) * 0.3);
}

.magic-bento__packet {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: rgb(var(--mb-accent-rgb));
  opacity: 0;
}

.magic-bento__shield {
  display: flex;
  width: 100%;
  max-width: 320px;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.magic-bento__setting {
  display: flex;
  height: 32px;
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 0 8px 0 10px;
  color: var(--mb-ink);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 16px;
}

.magic-bento__setting-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@container (max-height: 78px) {
  .magic-bento__setting ~ .magic-bento__setting {
    display: none;
  }
}

@container (max-height: 60px) {
  .magic-bento__hub {
    display: none;
  }
}

@container (max-height: 38px) {
  .magic-bento__shield,
  .magic-bento__chart,
  .magic-bento__bars {
    visibility: hidden;
  }
}

.magic-bento__switch {
  position: relative;
  width: 26px;
  height: 16px;
  flex: none;
  margin-left: auto;
  border-radius: 8px;
  background: rgb(var(--mb-accent-rgb));
  transition: background-color 220ms ease;
}

.magic-bento__switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--mb-accent-ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transform: translateX(10px);
  transition: transform 320ms var(--mb-spring);
}

.magic-bento__switch[data-off] {
  background: var(--mb-line);
}

.magic-bento__switch[data-off]::after {
  background: var(--mb-ink);
  transform: none;
}

.magic-bento[data-motion] .magic-bento__chart-line {
  stroke-dasharray: 1;
  animation: magic-bento-draw 1100ms cubic-bezier(0.65, 0, 0.35, 1) calc(var(--mb-delay) + 220ms) both paused;
}

.magic-bento[data-motion] .magic-bento__chart-area {
  animation: magic-bento-fade 700ms ease calc(var(--mb-delay) + 700ms) both paused;
}

.magic-bento[data-motion] .magic-bento__bar {
  animation: magic-bento-grow 760ms var(--mb-spring) calc(var(--mb-delay) + 200ms + var(--i) * 55ms) both paused;
}

.magic-bento[data-motion] .magic-bento__cursor {
  animation:
    magic-bento-pop 420ms var(--mb-spring) calc(var(--mb-delay) + 600ms + var(--i) * 160ms) both paused,
    var(--path) 9s ease-in-out calc(var(--i) * -3s) infinite paused;
}

.magic-bento[data-motion] .magic-bento__selection {
  animation: magic-bento-select 900ms cubic-bezier(0.65, 0, 0.35, 1) calc(var(--mb-delay) + 760ms) both paused;
}

.magic-bento[data-motion] .magic-bento__caret {
  animation: magic-bento-blink 1.1s steps(1) infinite paused;
}

.magic-bento[data-motion] .magic-bento__pending {
  animation: magic-bento-wait 1ms linear calc(var(--mb-delay) + 360ms + var(--i) * 520ms) both paused;
}

.magic-bento[data-motion] .magic-bento__spinner {
  animation:
    magic-bento-run 520ms linear calc(var(--mb-delay) + 360ms + var(--i) * 520ms) both paused,
    magic-bento-spin 700ms linear infinite paused;
}

.magic-bento[data-motion] .magic-bento__done {
  animation: magic-bento-check 420ms var(--mb-spring) calc(var(--mb-delay) + 880ms + var(--i) * 520ms) both paused;
}

.magic-bento[data-motion] .magic-bento__step-time {
  animation: magic-bento-fade 300ms ease calc(var(--mb-delay) + 880ms + var(--i) * 520ms) both paused;
}

.magic-bento[data-motion] .magic-bento__rail-fill {
  animation: magic-bento-rail calc(var(--n) * 520ms) linear calc(var(--mb-delay) + 360ms) both paused;
}

.magic-bento[data-motion] .magic-bento__hub-node {
  animation: magic-bento-pop 520ms var(--mb-spring) calc(var(--mb-delay) + 200ms + var(--i) * 70ms) both paused;
}

.magic-bento[data-motion] .magic-bento__hub-links line {
  stroke-dasharray: 1;
  animation: magic-bento-draw 700ms cubic-bezier(0.65, 0, 0.35, 1) calc(var(--mb-delay) + 360ms) both paused;
}

.magic-bento[data-motion] .magic-bento__card[data-active] .magic-bento__packet {
  animation: magic-bento-packet 1.8s cubic-bezier(0.45, 0, 0.55, 1) calc(var(--i) * 0.45s) infinite;
}

.magic-bento[data-motion] .magic-bento__switch {
  animation: magic-bento-switch-track 420ms ease calc(var(--mb-delay) + 520ms + var(--i) * 200ms) both paused;
}

.magic-bento[data-motion] .magic-bento__switch::after {
  animation: magic-bento-switch-knob 520ms var(--mb-spring) calc(var(--mb-delay) + 520ms + var(--i) * 200ms) both paused;
}

.magic-bento[data-motion] .magic-bento__switch[data-off],
.magic-bento[data-motion] .magic-bento__switch[data-off]::after {
  animation: none;
}

.magic-bento[data-motion]
  .magic-bento__cell[data-state='in']
  :is(
    .magic-bento__chart-line,
    .magic-bento__chart-area,
    .magic-bento__bar,
    .magic-bento__selection,
    .magic-bento__pending,
    .magic-bento__spinner,
    .magic-bento__done,
    .magic-bento__step-time,
    .magic-bento__rail-fill,
    .magic-bento__hub-node,
    .magic-bento__hub-links line,
    .magic-bento__switch
  ) {
  animation-play-state: running;
}

.magic-bento[data-motion] .magic-bento__cell[data-state='in'] .magic-bento__switch::after {
  animation-play-state: running;
}

.magic-bento[data-motion] .magic-bento__cell[data-state='in'] .magic-bento__cursor {
  animation-play-state: running, paused;
}

.magic-bento[data-motion] .magic-bento__cell[data-state='in'] .magic-bento__card[data-active] .magic-bento__cursor {
  animation-play-state: running, running;
}

.magic-bento[data-motion] .magic-bento__card[data-active] .magic-bento__caret {
  animation-play-state: running;
}

.magic-bento[data-motion] .magic-bento__cell[data-state='in'] .magic-bento__spinner {
  animation-play-state: running, running;
}

@keyframes magic-bento-draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes magic-bento-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes magic-bento-grow {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

@keyframes magic-bento-pop {
  from {
    opacity: 0;
    scale: 0.6;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes magic-bento-select {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes magic-bento-blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

@keyframes magic-bento-wait {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes magic-bento-run {
  0% {
    opacity: 0;
  }
  1%,
  92% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes magic-bento-spin {
  to {
    rotate: 360deg;
  }
}

@keyframes magic-bento-check {
  from {
    opacity: 0;
    scale: 0.4;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes magic-bento-rail {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

@keyframes magic-bento-packet {
  0% {
    top: var(--y);
    left: var(--x);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    top: 50%;
    left: 50%;
    opacity: 0;
  }
}

@keyframes magic-bento-switch-track {
  from {
    background-color: var(--mb-line);
  }
  to {
    background-color: rgb(var(--mb-accent-rgb));
  }
}

@keyframes magic-bento-switch-knob {
  from {
    background: var(--mb-ink);
    transform: none;
  }
  to {
    background: var(--mb-accent-ink);
    transform: translateX(10px);
  }
}

@keyframes magic-bento-path-a {
  0%,
  100% {
    translate: 0 0;
  }
  30% {
    translate: 46px -18px;
  }
  62% {
    translate: 12px 26px;
  }
}

@keyframes magic-bento-path-b {
  0%,
  100% {
    translate: 0 0;
  }
  35% {
    translate: -40px 14px;
  }
  70% {
    translate: -8px -22px;
  }
}