.cbr-hero {
  position: relative;
  padding: 24px 0 16px;
}

.cbr {
  position: relative;
  left: 50%;
  width: min(1280px, calc(100vw - 40px));
  transform: translateX(-50%);
  margin-bottom: 36px;
}

.cbr-intro {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  aspect-ratio: 1280 / 84;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  z-index: 3;
}

.hero .cbr-intro h1 {
  font-size: calc(min(1280px, 100vw - 40px) * 36 / 1280);
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.01em;
}

.cbr-icons {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.cbr-scroll {
  border-radius: var(--radius, 16px);
}

.cbr-stage {
  --u: calc(100cqw / 1280);
  container-type: inline-size;
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius, 16px);
  border: 1px solid var(--bg-card-border, rgba(148, 163, 184, 0.18));
  background:
    radial-gradient(ellipse 50% 12% at 50% 23%, rgba(56, 189, 248, 0.05), transparent 70%),
    radial-gradient(ellipse 60% 14% at 50% 7%, rgba(56, 189, 248, 0.08), transparent 70%),
    linear-gradient(180deg, #111b30 0%, #0c1424 100%);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.cbr-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.cbr-art text {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
}

.cbr-list,
.cbr-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cbr-chip {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  padding: calc(var(--u) * 5) calc(var(--u) * 13) calc(var(--u) * 5) calc(var(--u) * 6);
  border-radius: 999px;
  border: calc(var(--u) * 1.5) solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.88);
  color: #f1f5f9;
  font-size: calc(var(--u) * 15);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.cbr-chip img {
  flex: none;
  display: block;
  width: calc(var(--u) * 26);
  height: calc(var(--u) * 26);
  object-fit: contain;
}

.cbr-chip img.cbr-light {
  padding: calc(var(--u) * 2);
  border-radius: 50%;
  background: #fff;
}

.cbr-label svg {
  flex: none;
  width: calc(var(--u) * 18);
  height: calc(var(--u) * 18);
}

.cbr-layer {
  position: absolute;
  left: calc(20 / 1280 * 100%);
  right: calc(20 / 1280 * 100%);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  padding: 0 calc(var(--u) * 10) 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 24);
  z-index: 2;
}

.hero .cbr-label {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 7);
  font-size: calc(var(--u) * 14);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
  text-shadow: none;
}

.cbr-ai {
  top: calc(166 / 720 * 100%);
  height: calc(var(--u) * 50);
  border: calc(var(--u) * 1.5) solid rgba(56, 189, 248, 0.32);
  background: rgba(14, 30, 52, 0.9);
}

.cbr-ai .cbr-label {
  color: #7dd3fc;
}

.cbr-ai .cbr-items {
  flex: 1;
  display: flex;
  justify-content: space-around;
}

.cbr-stop {
  --c: #38bdf8;
  position: absolute;
  left: calc(var(--x) / 1280 * 100%);
  bottom: calc(293 / 720 * 100%);
  width: calc(var(--u) * 236);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  z-index: 2;
}

.cbr-pin {
  position: relative;
  flex: none;
  width: calc(var(--u) * 62);
  height: calc(var(--u) * 62);
  margin-bottom: calc(var(--u) * 14);
  border-radius: 50%;
  border: calc(var(--u) * 4.5) solid var(--c);
  background: #0f172a;
  color: var(--c);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 calc(var(--u) * 6) rgba(15, 23, 42, 0.65), 0 calc(var(--u) * 8) calc(var(--u) * 20) rgba(0, 0, 0, 0.45);
}

.cbr-pin svg {
  width: calc(var(--u) * 27);
  height: calc(var(--u) * 27);
}

.cbr-pin::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  margin-top: calc(var(--u) * 1);
  width: 0;
  height: 0;
  border-left: calc(var(--u) * 9) solid transparent;
  border-right: calc(var(--u) * 9) solid transparent;
  border-top: calc(var(--u) * 13) solid var(--c);
  transform: translateX(-50%);
}

.hero .cbr-title {
  font-size: calc(var(--u) * 17);
  font-weight: 700;
  line-height: 1.2;
  color: var(--c);
  margin: calc(var(--u) * 8) 0;
  padding: calc(var(--u) * 3) calc(var(--u) * 9);
  border-radius: calc(var(--u) * 9);
  background: rgba(17, 27, 48, 0.92);
  text-shadow: none;
  letter-spacing: 0;
  white-space: nowrap;
}

.cbr-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 8);
  padding: calc(var(--u) * 9) calc(var(--u) * 12);
  border-radius: calc(var(--u) * 14);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-top: calc(var(--u) * 3) solid var(--c);
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.97), rgba(17, 26, 46, 0.97));
  box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 24) rgba(0, 0, 0, 0.4);
}

.cbr-feeder {
  position: absolute;
  left: calc(470 / 1280 * 100%);
  top: calc(496 / 720 * 100%);
  transform: translateX(-50%);
  z-index: 2;
}

.hero .cbr-card .cbr-label {
  color: var(--c);
  font-size: calc(var(--u) * 12.5);
}

.cbr-fork .cbr-label {
  color: #e2e8f0;
  padding: calc(var(--u) * 7) calc(var(--u) * 11);
  border-radius: 999px;
  border: calc(var(--u) * 1.5) solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.92);
}

.cbr-fork {
  position: absolute;
  left: calc(1052 / 1280 * 100%);
  top: calc(630 / 720 * 100%);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  z-index: 2;
}

.cbr-fork-watch {
  top: calc(582 / 720 * 100%);
}

.cbr-fork .cbr-chip {
  padding-top: calc(var(--u) * 3);
  padding-bottom: calc(var(--u) * 3);
}

.cbr-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .cbr-centre {
    animation: cbr-drive 1.4s linear infinite;
  }

  .cbr-arrow {
    animation: cbr-flow 1.2s linear infinite;
  }

  .cbr-arrow-back {
    animation: cbr-flow 1.2s linear infinite reverse;
  }

}

@keyframes cbr-drive {
  to {
    stroke-dashoffset: -52;
  }
}

@keyframes cbr-flow {
  to {
    stroke-dashoffset: -22;
  }
}

.cbr-m {
  display: none;
}

@media (max-width: 899px) {
  .cbr {
    left: auto;
    width: auto;
    max-width: 520px;
    transform: none;
    margin: 0 auto 24px;
  }

  .cbr-scroll {
    display: none;
  }

  .cbr-intro {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    aspect-ratio: 360 / 46;
    margin: 0;
    align-items: flex-end;
  }

  .hero .cbr-intro h1 {
    font-size: calc(min(100vw - 32px, 520px) * 22 / 360);
  }

  .cbr-m {
    --u: calc(100cqw / 360);
    display: block;
    container-type: inline-size;
    position: relative;
    aspect-ratio: 9 / 16;
    border-radius: var(--radius, 16px);
    border: 1px solid var(--bg-card-border, rgba(148, 163, 184, 0.18));
    background:
      radial-gradient(ellipse 70% 10% at 50% 7%, rgba(56, 189, 248, 0.08), transparent 70%),
      linear-gradient(180deg, #111b30 0%, #0c1424 100%);
    overflow: hidden;
  }

  .cbr-m-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
  }

  .cbr-m-tag {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 12.5px;
    font-weight: 600;
  }

  .cbr-m .cbr-chip {
    gap: calc(var(--u) * 5);
    padding: calc(var(--u) * 3) calc(var(--u) * 9) calc(var(--u) * 3) calc(var(--u) * 4);
    border-width: 1px;
    font-size: calc(var(--u) * 12.5);
  }

  .cbr-m .cbr-chip img {
    width: calc(var(--u) * 17);
    height: calc(var(--u) * 17);
  }

  .cbr-m .cbr-chip img.cbr-light {
    padding: calc(var(--u) * 1.5);
  }

  .hero .cbr-m .cbr-label {
    gap: calc(var(--u) * 4);
    font-size: calc(var(--u) * 12.5);
    letter-spacing: 0.05em;
  }

  .cbr-m-ai {
    position: absolute;
    left: calc(10 / 360 * 100%);
    right: calc(10 / 360 * 100%);
    top: calc(50 / 640 * 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--u) * 4);
    padding: calc(var(--u) * 6) calc(var(--u) * 8) calc(var(--u) * 7);
    border-radius: calc(var(--u) * 14);
    border: 1px solid rgba(56, 189, 248, 0.32);
    background: rgba(14, 30, 52, 0.9);
  }

  .cbr-m-ai .cbr-label {
    color: #7dd3fc;
  }

  .cbr-m-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(var(--u) * 4) calc(var(--u) * 5);
  }

  .cbr-m-stop {
    position: absolute;
    top: calc(var(--y) / 640 * 100%);
    left: 0;
    right: 0;
    height: 0;
    z-index: 2;
  }

  .cbr-m-pin {
    position: absolute;
    left: calc(var(--px) / 360 * 100%);
    top: 0;
    width: calc(var(--u) * 38);
    height: calc(var(--u) * 38);
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: calc(var(--u) * 3) solid #38bdf8;
    background: #0f172a;
    color: #38bdf8;
    box-shadow: 0 0 0 calc(var(--u) * 3) rgba(15, 23, 42, 0.65);
  }

  .cbr-m-pin svg {
    width: calc(var(--u) * 17);
    height: calc(var(--u) * 17);
  }

  .cbr-m-pin::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    border-top: calc(var(--u) * 6) solid transparent;
    border-bottom: calc(var(--u) * 6) solid transparent;
    transform: translateY(-50%);
  }

  .cbr-m-l .cbr-m-pin::after {
    left: 100%;
    border-left: calc(var(--u) * 9) solid #38bdf8;
  }

  .cbr-m-r .cbr-m-pin::after {
    right: 100%;
    border-right: calc(var(--u) * 9) solid #38bdf8;
  }

  .cbr-m-title {
    position: absolute;
    top: 0;
    width: calc(var(--u) * 92);
    transform: translateY(-50%);
    font-size: calc(var(--u) * 12.5);
    font-weight: 700;
    line-height: 1.2;
    color: #38bdf8;
  }

  .cbr-m-l .cbr-m-title {
    left: calc(10 / 360 * 100%);
    text-align: right;
  }

  .cbr-m-r .cbr-m-title {
    right: calc(10 / 360 * 100%);
    text-align: left;
  }

  .cbr-m-feeder {
    position: absolute;
    right: calc(10 / 360 * 100%);
    top: calc(282 / 640 * 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--u) * 5);
    padding: calc(var(--u) * 6) calc(var(--u) * 8);
    border-radius: calc(var(--u) * 12);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-top: calc(var(--u) * 2.5) solid #38bdf8;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.97), rgba(17, 26, 46, 0.97));
    z-index: 2;
  }

  .hero .cbr-m-feeder .cbr-label {
    color: #38bdf8;
    text-transform: none;
    letter-spacing: 0;
  }

  .cbr-m-fork {
    position: absolute;
    right: calc(104 / 360 * 100%);
    top: calc(var(--y) / 640 * 100%);
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 5);
    z-index: 2;
  }

  .cbr-m-fork .cbr-label {
    color: #e2e8f0;
    padding: calc(var(--u) * 4) calc(var(--u) * 8);
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(15, 23, 42, 0.92);
  }
}