:root {
  --slclb-global-font: "Orbitron", "Rajdhani", "Share Tech Mono", "Audiowide", "Michroma", system-ui, sans-serif;
}

.sl-cyber-lab-button-wrap,
.sl-cyber-lab-button-wrap * {
  box-sizing: border-box;
}

.sl-cyber-lab-button-wrap {
  display: flex;
  width: 100%;
  max-width: 100%;
  justify-content: center;
  align-items: center;
  padding: clamp(24px, 4vw, 52px) 10px;
  overflow: visible;
  min-height: 40px;
  position: relative;
  z-index: 1;
  min-width: 0;
}

.slclb-align-left { justify-content: flex-start; }
.slclb-align-center { justify-content: center; }
.slclb-align-right { justify-content: flex-end; }

.sl-cyber-lab-button {
  --slclb-width: min(1120px, 92vw);
  --slclb-height: 172px;
  --slclb-radius: 999px;
  width: min(100%, var(--slclb-width));
  max-width: var(--slclb-width);
  min-width: 0;
  --slclb-frame-offset: 28px;
  --slclb-rim-width: 3px;
  /* Icon size scales with the button height by default so the whole button
     shrinks as a unit and the title keeps its room (stays centred). */
  --slclb-icon-size: calc(var(--slclb-height) * .6);
  --slclb-dna-scale: .5;
  --slclb-arrow-width-scale: 1.08;
  --slclb-arrow-height-scale: .52;
  /* Title scales with the button height by default so it always stays centred. */
  --slclb-title-size: clamp(18px, calc(var(--slclb-height) * .32), 64px);
  /* Width of the left/right icon columns inside the capsule. */
  --slclb-side-col: calc(var(--slclb-icon-size) * 1.6);
  /* DNA / Arrow background "plate" behind each icon. */
  --slclb-dna-bg-width: 190px;
  --slclb-dna-bg-height: 66%;
  --slclb-arrow-bg-width: 190px;
  --slclb-arrow-bg-height: 66%;
  /* Outer side flank graphics. */
  --slclb-side-width: 13%;
  --slclb-side-height: 126%;
  /* HUD circuit frame inset. */
  --slclb-hud-inset-x: 42px;
  --slclb-hud-inset-y: 22px;
  /* Inner neon line inset. */
  --slclb-inner-inset-x: 26px;
  --slclb-inner-inset-y: 18px;
  --slclb-text-color: #32e8ff;
  --slclb-text-glow: #00ddff;
  --slclb-text-glow-size: 18px;
  --slclb-left-color: #00e5ff;
  --slclb-right-color: #ff30f2;
  --slclb-accent-color: #8d23ff;
  --slclb-panel-color: rgba(1, 12, 22, .64);
  --slclb-border-color: rgba(76, 235, 255, .88);
  --slclb-hardware-color: #07111f;
  --slclb-hud-color: rgba(47, 226, 255, .55);
  --slclb-shadow-color: rgba(0, 225, 255, .55);
  --slclb-hover-text-color: #ffffff;
  --slclb-hover-left-color: #53ffff;
  --slclb-hover-right-color: #ff65fb;
  --slclb-hover-border-color: #ffffff;
  --slclb-hover-shadow-color: rgba(255, 48, 242, .74);
  --slclb-glass-opacity: .78;
  --slclb-texture-opacity: .35;
  --slclb-noise-opacity: .13;
  --slclb-hover-scale: 1.015;
  --slclb-hover-lift: -4px;
  --slclb-speed: 4.2s;
  --slclb-mouse-reactive: 1;
  --slclb-x: 70%;
  --slclb-y: 50%;

  position: relative;
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1;
  align-items: center;
  justify-content: center;
  width: var(--slclb-width);
  max-width: 100%;
  height: var(--slclb-height);
  min-height: 54px;
  color: var(--slclb-text-color);
  text-decoration: none !important;
  isolation: isolate;
  overflow: visible;
  border-radius: var(--slclb-radius);
  background:
    radial-gradient(circle at 9% 50%, rgba(0, 229, 255, .42) 0%, transparent 18%),
    radial-gradient(circle at 88% 48%, rgba(255, 48, 242, .36) 0%, transparent 20%),
    linear-gradient(90deg, rgba(0, 232, 255, .18), rgba(10, 15, 28, .64) 32%, rgba(36, 8, 48, .42) 74%, rgba(255, 48, 242, .22)),
    var(--slclb-panel-color);
  background:
    radial-gradient(circle at 9% 50%, color-mix(in srgb, var(--slclb-left-color), transparent 28%) 0%, transparent 18%),
    radial-gradient(circle at 88% 48%, color-mix(in srgb, var(--slclb-right-color), transparent 25%) 0%, transparent 20%),
    linear-gradient(90deg, rgba(0, 232, 255, .18), rgba(10, 15, 28, .64) 32%, rgba(36, 8, 48, .42) 74%, rgba(255, 48, 242, .22)),
    var(--slclb-panel-color);
  border: var(--slclb-rim-width) solid var(--slclb-border-color);
  box-shadow:
    0 0 4px rgba(0, 229, 255, .88),
    0 0 24px rgba(0, 229, 255, .68),
    0 0 54px rgba(255, 48, 242, .54),
    inset 0 0 8px rgba(255, 255, 255, .28),
    inset 0 0 32px rgba(0, 235, 255, .20),
    inset 0 -18px 38px rgba(0, 0, 0, .68);
  box-shadow:
    0 0 4px color-mix(in srgb, var(--slclb-left-color), transparent 12%),
    0 0 24px color-mix(in srgb, var(--slclb-left-color), transparent 32%),
    0 0 54px color-mix(in srgb, var(--slclb-right-color), transparent 46%),
    inset 0 0 8px rgba(255, 255, 255, .28),
    inset 0 0 32px rgba(0, 235, 255, .20),
    inset 0 -18px 38px rgba(0, 0, 0, .68);
  outline: 0;
  transform: translateZ(0);
  transition: transform .38s cubic-bezier(.2, .9, .2, 1), filter .38s ease, box-shadow .38s ease, border-color .38s ease, color .38s ease;
  -webkit-tap-highlight-color: transparent;
}

.sl-cyber-lab-button:focus-visible {
  outline: 2px solid var(--slclb-right-color);
  outline-offset: 12px;
}

.sl-cyber-lab-button:hover {
  color: var(--slclb-hover-text-color);
  border-color: var(--slclb-hover-border-color);
  transform: translateY(var(--slclb-hover-lift)) scale(var(--slclb-hover-scale));
  filter: saturate(1.2) contrast(1.04);
  box-shadow:
    0 0 8px color-mix(in srgb, var(--slclb-hover-left-color), transparent 4%),
    0 0 36px color-mix(in srgb, var(--slclb-hover-left-color), transparent 24%),
    0 0 78px color-mix(in srgb, var(--slclb-hover-right-color), transparent 30%),
    0 0 112px var(--slclb-hover-shadow-color),
    inset 0 0 14px rgba(255, 255, 255, .42),
    inset 0 0 44px rgba(0, 235, 255, .28),
    inset 0 -14px 30px rgba(255, 48, 242, .18);
}

.slclb-hardware {
  position: absolute;
  inset: calc(var(--slclb-frame-offset) * -1);
  z-index: 0;
  pointer-events: none;
  border-radius: calc(var(--slclb-height) * .22);
  background:
    linear-gradient(90deg, rgba(0,229,255,.6), rgba(5, 13, 30, .62) 12%, rgba(5, 10, 22, .82) 48%, rgba(18, 9, 32, .78) 76%, rgba(255,48,242,.52)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 38px),
    var(--slclb-hardware-color);
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--slclb-left-color), transparent 40%),
      rgba(5, 13, 30, .62) 12%,
      rgba(5, 10, 22, .82) 48%,
      rgba(18, 9, 32, .78) 76%,
      color-mix(in srgb, var(--slclb-right-color), transparent 48%)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 38px),
    var(--slclb-hardware-color);
  clip-path: polygon(4% 18%, 8% 0, 21% 0, 22% 10%, 48% 10%, 49% 0, 55% 0, 56% 10%, 78% 10%, 80% 0, 92% 0, 96% 18%, 100% 25%, 100% 75%, 96% 82%, 92% 100%, 80% 100%, 78% 90%, 56% 90%, 55% 100%, 49% 100%, 48% 90%, 22% 90%, 21% 100%, 8% 100%, 4% 82%, 0 75%, 0 25%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 0 2px rgba(0,0,0,.4) inset,
    0 0 52px color-mix(in srgb, var(--slclb-left-color), transparent 68%),
    0 0 62px color-mix(in srgb, var(--slclb-right-color), transparent 72%);
  opacity: .92;
}

.slclb-hardware::before,
.slclb-hardware::after {
  content: "";
  position: absolute;
  inset: 16px 8.4%;
  border-top: 1px solid color-mix(in srgb, var(--slclb-left-color), transparent 45%);
  border-bottom: 1px solid color-mix(in srgb, var(--slclb-right-color), transparent 50%);
  clip-path: polygon(0 0, 18% 0, 19% 38%, 49% 38%, 50% 0, 100% 0, 100% 100%, 50% 100%, 49% 62%, 19% 62%, 18% 100%, 0 100%);
  opacity: .7;
}

.slclb-hardware::after {
  inset: auto 10% 12px 10%;
  height: 16px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--slclb-left-color), transparent 32%, transparent 68%, var(--slclb-right-color), transparent);
  filter: blur(4px);
  opacity: .52;
}

.slclb-side {
  position: absolute;
  top: 50%;
  width: var(--slclb-side-width);
  height: var(--slclb-side-height);
  z-index: 0;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: .78;
  filter: drop-shadow(0 0 18px currentColor);
}

.slclb-side-left {
  left: -6.5%;
  color: var(--slclb-left-color);
  background:
    linear-gradient(90deg, rgba(0,0,0,.36), color-mix(in srgb, var(--slclb-left-color), transparent 70%)),
    repeating-linear-gradient(90deg, transparent 0 15px, rgba(255,255,255,.14) 15px 17px),
    linear-gradient(120deg, rgba(0,0,0,.9), rgba(5, 22, 35, .74));
  clip-path: polygon(0 31%, 28% 10%, 100% 0, 91% 18%, 82% 50%, 91% 82%, 100% 100%, 28% 90%, 0 69%);
}

.slclb-side-right {
  right: -6.5%;
  color: var(--slclb-right-color);
  background:
    linear-gradient(270deg, rgba(0,0,0,.34), color-mix(in srgb, var(--slclb-right-color), transparent 70%)),
    repeating-linear-gradient(90deg, transparent 0 15px, rgba(255,255,255,.13) 15px 17px),
    linear-gradient(240deg, rgba(0,0,0,.9), rgba(38, 5, 45, .72));
  clip-path: polygon(0 0, 72% 10%, 100% 31%, 100% 69%, 72% 90%, 0 100%, 9% 82%, 18% 50%, 9% 18%);
}

.slclb-glass {
  position: absolute;
  inset: 8px;
  z-index: 1;
  border-radius: calc(var(--slclb-radius) - 8px);
  pointer-events: none;
  background:
    radial-gradient(circle at 11% 50%, rgba(0,229,255,.64) 0 9%, transparent 22%),
    radial-gradient(circle at 91% 52%, rgba(255,48,242,.62) 0 7%, transparent 23%),
    radial-gradient(circle at var(--slclb-x) var(--slclb-y), rgba(255,255,255,.20), transparent 18%),
    linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.035) 28%, rgba(0,0,0,.22) 75%, rgba(255,255,255,.10)),
    linear-gradient(90deg, rgba(0, 235, 255, .18), rgba(8, 18, 34, .72) 42%, rgba(255, 48, 242, .16)),
    var(--slclb-panel-color);
  background:
    radial-gradient(circle at 11% 50%, color-mix(in srgb, var(--slclb-left-color), transparent 36%) 0 9%, transparent 22%),
    radial-gradient(circle at 91% 52%, color-mix(in srgb, var(--slclb-right-color), transparent 38%) 0 7%, transparent 23%),
    radial-gradient(circle at var(--slclb-x) var(--slclb-y), rgba(255,255,255,.20), transparent 18%),
    linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.035) 28%, rgba(0,0,0,.22) 75%, rgba(255,255,255,.10)),
    linear-gradient(90deg, rgba(0, 235, 255, .18), rgba(8, 18, 34, .72) 42%, rgba(255, 48, 242, .16)),
    var(--slclb-panel-color);
  opacity: var(--slclb-glass-opacity);
  backdrop-filter: blur(12px) saturate(1.34);
  -webkit-backdrop-filter: blur(12px) saturate(1.34);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.32),
    inset 0 6px 0 rgba(255,255,255,.22),
    inset 0 -6px 0 rgba(255,255,255,.08),
    inset 0 0 24px rgba(0, 225, 255, .18),
    inset 0 0 36px rgba(255, 48, 242, .13);
  overflow: hidden;
}

.slclb-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 7% 50%, transparent 0 13%, color-mix(in srgb, var(--slclb-left-color), transparent 45%) 13.2% 13.7%, transparent 14%),
    radial-gradient(circle at 93% 50%, transparent 0 13%, color-mix(in srgb, var(--slclb-right-color), transparent 48%) 13.2% 13.7%, transparent 14%),
    radial-gradient(circle at 10% 31%, rgba(255,255,255,.25) 0 2px, transparent 3px),
    radial-gradient(circle at 86% 65%, rgba(255,255,255,.18) 0 2px, transparent 3px),
    linear-gradient(90deg, transparent 0 12%, color-mix(in srgb, var(--slclb-left-color), transparent 56%) 12.2% 12.4%, transparent 12.6% 86%, color-mix(in srgb, var(--slclb-right-color), transparent 54%) 86.2% 86.4%, transparent 86.6%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg, rgba(0, 229, 255, .08) 0 1px, transparent 1px 22px);
  mix-blend-mode: screen;
  opacity: var(--slclb-texture-opacity);
}

.slclb-glass::after {
  content: "";
  position: absolute;
  inset: -60% -20%;
  background:
    linear-gradient(100deg, transparent 20%, rgba(255,255,255,.16) 36%, rgba(255,255,255,.38) 40%, rgba(255,255,255,.08) 46%, transparent 58%),
    radial-gradient(circle at 14% 50%, color-mix(in srgb, var(--slclb-left-color), transparent 20%), transparent 18%),
    radial-gradient(circle at 88% 50%, color-mix(in srgb, var(--slclb-right-color), transparent 26%), transparent 16%);
  transform: translateX(-26%);
  opacity: .48;
  mix-blend-mode: screen;
}

.slclb-is-animated .slclb-glass::after {
  animation: slclbShine var(--slclb-speed) linear infinite;
}

.slclb-inner-line {
  position: absolute;
  inset: var(--slclb-inner-inset-y) var(--slclb-inner-inset-x);
  z-index: 2;
  pointer-events: none;
  border-radius: var(--slclb-radius);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--slclb-left-color), transparent 42%),
    inset 0 0 0 3px rgba(0,0,0,.34),
    0 0 16px color-mix(in srgb, var(--slclb-left-color), transparent 44%),
    0 0 22px color-mix(in srgb, var(--slclb-right-color), transparent 48%);
}

.slclb-inner-line::before,
.slclb-inner-line::after {
  content: "";
  position: absolute;
  left: 9%;
  right: 9%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--slclb-left-color), rgba(255,255,255,.95) 50%, var(--slclb-right-color), transparent);
  filter: blur(.2px) drop-shadow(0 0 9px currentColor);
  opacity: .96;
}

.slclb-inner-line::before { top: 9px; }
.slclb-inner-line::after { bottom: 9px; opacity: .82; }

.slclb-scan {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  overflow: hidden;
  opacity: var(--slclb-noise-opacity);
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.12) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, transparent 0%, rgba(0, 229, 255, .34) 22%, transparent 42%, transparent 58%, rgba(255, 48, 242, .28) 78%, transparent 100%);
  mix-blend-mode: screen;
}

.slclb-scan::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20%;
  left: -30%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  filter: blur(5px);
}

.slclb-is-animated .slclb-scan::after {
  animation: slclbScan calc(var(--slclb-speed) * 1.5) linear infinite;
}

.slclb-hud {
  position: absolute;
  inset: var(--slclb-hud-inset-y) var(--slclb-hud-inset-x);
  z-index: 4;
  pointer-events: none;
  opacity: .64;
  background:
    linear-gradient(90deg, transparent 0 10%, var(--slclb-hud-color) 10.1% 10.4%, transparent 10.5% 36%, var(--slclb-hud-color) 36.1% 36.3%, transparent 36.4% 63%, rgba(255,48,242,.28) 63.1% 63.3%, transparent 63.4% 88%, rgba(255,48,242,.34) 88.1% 88.4%, transparent 88.5%),
    linear-gradient(0deg, transparent 0 31%, var(--slclb-hud-color) 31.1% 31.4%, transparent 31.5% 68%, rgba(255,48,242,.26) 68.1% 68.4%, transparent 68.5%),
    radial-gradient(circle at 11% 50%, var(--slclb-left-color) 0 2px, transparent 3px),
    radial-gradient(circle at 90% 50%, var(--slclb-right-color) 0 2px, transparent 3px),
    radial-gradient(circle at 45% 33%, var(--slclb-hud-color) 0 1px, transparent 2px),
    repeating-linear-gradient(90deg, transparent 0 26px, color-mix(in srgb, var(--slclb-hud-color), transparent 72%) 26px 27px, transparent 27px 52px);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.slclb-hud::before,
.slclb-hud::after {
  content: "";
  position: absolute;
  top: 25%;
  height: 11px;
  width: 74px;
  background: repeating-linear-gradient(90deg, var(--slclb-left-color) 0 5px, transparent 5px 12px);
  filter: drop-shadow(0 0 5px var(--slclb-left-color));
  opacity: .8;
}

.slclb-hud::before { left: 16%; }
.slclb-hud::after {
  right: 13%;
  top: 66%;
  width: 88px;
  background: repeating-linear-gradient(90deg, var(--slclb-right-color) 0 6px, transparent 6px 13px);
  filter: drop-shadow(0 0 5px var(--slclb-right-color));
}

.slclb-content {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(0, var(--slclb-side-col)) 1fr minmax(0, var(--slclb-side-col));
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0 clamp(28px, 5%, 64px);
  border-radius: inherit;
  pointer-events: none;
}

.slclb-title {
  position: relative;
  display: inline-block;
  justify-self: center;
  align-self: center;
  max-width: 100%;
  font-family: var(--slclb-global-font);
  font-size: var(--slclb-title-size);
  line-height: 1;
  font-weight: 700;
  letter-spacing: .065em;
  color: var(--slclb-text-color);
  text-transform: uppercase;
  white-space: nowrap;
  text-align: center;
  filter: drop-shadow(0 0 calc(var(--slclb-text-glow-size) * .48) var(--slclb-text-glow));
  text-shadow:
    0 0 2px rgba(255,255,255,.72),
    0 0 calc(var(--slclb-text-glow-size) * .55) var(--slclb-text-glow),
    0 0 var(--slclb-text-glow-size) var(--slclb-text-glow),
    0 0 calc(var(--slclb-text-glow-size) * 1.8) color-mix(in srgb, var(--slclb-text-glow), transparent 44%);
  transition: color .32s ease, text-shadow .32s ease, filter .32s ease;
}

.sl-cyber-lab-button:hover .slclb-title {
  color: var(--slclb-hover-text-color);
  text-shadow:
    0 0 2px rgba(255,255,255,.96),
    0 0 calc(var(--slclb-text-glow-size) * .72) var(--slclb-hover-left-color),
    0 0 calc(var(--slclb-text-glow-size) * 1.55) var(--slclb-hover-left-color),
    0 0 calc(var(--slclb-text-glow-size) * 2.3) var(--slclb-hover-right-color);
}

.slclb-title::before {
  content: "";
  position: absolute;
  inset: -16% -3%;
  z-index: -1;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--slclb-left-color), transparent 58%), transparent 42%, transparent 60%, color-mix(in srgb, var(--slclb-right-color), transparent 65%), transparent);
  filter: blur(14px);
  opacity: .72;
}

.slclb-title::after {
  content: "";
  position: absolute;
  left: -3%;
  right: -3%;
  bottom: -12px;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--slclb-left-color), transparent 48%, transparent 62%, var(--slclb-right-color), transparent);
  opacity: .36;
  filter: blur(1px);
}

.slclb-left-panel,
.slclb-right-panel {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  height: 100%;
  color: var(--slclb-left-color);
}

.slclb-title {
  min-width: 0;
}

.slclb-left-panel {
  justify-content: flex-start;
  padding-left: clamp(2px, 1vw, 12px);
}

.slclb-right-panel {
  justify-content: flex-end;
  color: var(--slclb-right-color);
  padding-right: clamp(2px, 1vw, 12px);
}

.slclb-dna {
  display: inline-flex;
  width: calc(var(--slclb-icon-size) * var(--slclb-dna-scale));
  height: calc(var(--slclb-icon-size) * var(--slclb-dna-scale));
  color: var(--slclb-left-color);
  opacity: .92;
  filter: drop-shadow(0 0 6px var(--slclb-left-color)) drop-shadow(0 0 22px var(--slclb-left-color));
}

.slclb-dna svg,
.slclb-arrow svg {
  width: 100%;
  height: 100%;
  display: block;
}

.slclb-micro-label,
.slclb-right-label {
  position: absolute;
  bottom: clamp(17px, 15%, 28px);
  font-family: var(--slclb-global-font);
  font-size: clamp(8px, 1vw, 12px);
  line-height: 1.1;
  letter-spacing: .16em;
  color: color-mix(in srgb, currentColor, transparent 18%);
  text-shadow: 0 0 8px currentColor;
  opacity: .74;
  white-space: nowrap;
}

.slclb-micro-label {
  left: calc(var(--slclb-icon-size) * .54 + 12px);
}

.slclb-right-label {
  right: 6px;
  bottom: clamp(22px, 22%, 36px);
  text-align: left;
}

.slclb-arrow {
  display: inline-flex;
  width: calc(var(--slclb-icon-size) * var(--slclb-arrow-width-scale));
  height: calc(var(--slclb-icon-size) * var(--slclb-arrow-height-scale));
  color: var(--slclb-right-color);
  filter: drop-shadow(0 0 8px var(--slclb-right-color)) drop-shadow(0 0 26px var(--slclb-right-color));
  opacity: .92;
  transform: translateX(-10px);
  transition: transform .32s ease, color .32s ease, filter .32s ease;
}

.sl-cyber-lab-button:hover .slclb-arrow {
  color: var(--slclb-hover-right-color);
  transform: translateX(2px);
  filter: drop-shadow(0 0 10px var(--slclb-hover-right-color)) drop-shadow(0 0 34px var(--slclb-hover-right-color));
}

.slclb-left-panel::before,
.slclb-right-panel::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -6px;
  right: auto;
  transform: translateY(-50%);
  width: min(100%, var(--slclb-dna-bg-width));
  height: var(--slclb-dna-bg-height);
  border-radius: 999px 18px 18px 999px;
  border: 1px solid color-mix(in srgb, currentColor, transparent 60%);
  background:
    radial-gradient(circle at 22% 50%, color-mix(in srgb, currentColor, transparent 38%), transparent 38%),
    repeating-linear-gradient(120deg, transparent 0 14px, color-mix(in srgb, currentColor, transparent 88%) 14px 16px),
    linear-gradient(90deg, color-mix(in srgb, currentColor, transparent 82%), transparent);
  filter: blur(.15px);
  opacity: .72;
  z-index: -1;
}

.slclb-right-panel::before {
  right: -6px;
  left: auto;
  width: min(100%, var(--slclb-arrow-bg-width));
  height: var(--slclb-arrow-bg-height);
  border-radius: 18px 999px 999px 18px;
  background:
    radial-gradient(circle at 77% 50%, color-mix(in srgb, currentColor, transparent 38%), transparent 38%),
    repeating-linear-gradient(60deg, transparent 0 14px, color-mix(in srgb, currentColor, transparent 88%) 14px 16px),
    linear-gradient(270deg, color-mix(in srgb, currentColor, transparent 82%), transparent);
}

.slclb-left-panel::after,
.slclb-right-panel::after {
  content: "";
  position: absolute;
  top: 23%;
  height: 54%;
  width: 1px;
  background: linear-gradient(transparent, currentColor, transparent);
  opacity: .58;
  filter: drop-shadow(0 0 6px currentColor);
}

.slclb-left-panel::after { right: 6px; }
.slclb-right-panel::after { left: 6px; }

.slclb-hide-dna .slclb-dna,
.slclb-hide-dna .slclb-micro-label,
.slclb-hide-dna .slclb-left-panel::before,
.slclb-hide-dna .slclb-left-panel::after {
  display: none;
}

.slclb-hide-arrow .slclb-arrow,
.slclb-hide-arrow .slclb-right-label,
.slclb-hide-arrow .slclb-right-panel::before,
.slclb-hide-arrow .slclb-right-panel::after {
  display: none;
}

@keyframes slclbShine {
  0% { transform: translateX(-38%) skewX(-10deg); }
  58%, 100% { transform: translateX(42%) skewX(-10deg); }
}

@keyframes slclbScan {
  0% { left: -30%; }
  100% { left: 115%; }
}

@media (prefers-reduced-motion: reduce) {
  .slclb-is-animated .slclb-glass::after,
  .slclb-is-animated .slclb-scan::after {
    animation: none !important;
  }

  .sl-cyber-lab-button,
  .sl-cyber-lab-button * {
    transition: none !important;
  }
}

/* ============================================================
   Responsive tiers — Large PC / PC / Laptop / Tablet / Mobile
   The base (:root above) is tuned for a standard PC / desktop.
   ============================================================ */

/* Large PC / wide desktop — scale the capsule up so it fills big screens */
@media (min-width: 1600px) {
  .sl-cyber-lab-button {
    --slclb-width: min(1280px, 88vw);
    --slclb-height: 188px;
    --slclb-frame-offset: 32px;
  }
}

/* Laptop — sits between the PC default and the tablet layout */
@media (max-width: 1366px) {
  .sl-cyber-lab-button {
    --slclb-width: min(1000px, 92vw);
    --slclb-height: 156px;
    --slclb-frame-offset: 24px;
  }
}

/* Tablet */
@media (max-width: 1024px) {
  .sl-cyber-lab-button {
    --slclb-height: 140px;
    --slclb-frame-offset: 20px;
  }

  .slclb-content {
    padding-left: 34px;
    padding-right: 34px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .sl-cyber-lab-button-wrap {
    padding-top: 22px;
    padding-bottom: 22px;
  }

  .sl-cyber-lab-button {
    --slclb-height: 92px;
    --slclb-frame-offset: 12px;
    --slclb-text-glow-size: 12px;
  }

  .slclb-content {
    padding: 0 16px;
  }

  .slclb-title {
    letter-spacing: .035em;
  }

  .slclb-micro-label,
  .slclb-right-label,
  .slclb-hud {
    display: none;
  }

  .slclb-arrow {
    width: 56px;
    transform: translateX(0);
  }

  .slclb-inner-line {
    inset: 10px 14px;
  }

  .slclb-inner-line::before { top: 5px; }
  .slclb-inner-line::after { bottom: 5px; }
}

/* Small mobile */
@media (max-width: 440px) {
  .sl-cyber-lab-button {
    --slclb-height: 78px;
    --slclb-frame-offset: 9px;
  }

  .slclb-content {
    padding-left: 12px;
    padding-right: 12px;
  }
}