/* =========================
   DESIGN VARIABLES
========================= */

:root {
  --bg: #050816;
  --bg-soft: #0b1024;
  --bg-elevated: #080d1f;
  --panel: rgba(255, 255, 255, 0.08);
  --panel-strong: rgba(255, 255, 255, 0.12);
  --panel-border: rgba(255, 255, 255, 0.16);
  --panel-border-strong: rgba(255, 255, 255, 0.24);
  --text: #f8fafc;
  --muted: #a8b3cf;
  --muted-strong: #c7d2fe;
  --cyan: #38bdf8;
  --violet: #8b5cf6;
  --pink: #ec4899;
  --yellow: #fcd612;
  --online-green: #22c55e;
  --online-green-soft: rgba(34, 197, 94, 0.28);
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  --shadow-soft: 0 18px 55px rgba(0, 0, 0, 0.28);
  --max-width: 1180px;
  --radius: 26px;
  --radius-lg: 34px;
  --header-height: 76px;
  --recommendation-scroll-duration: 108s;
  --recommendation-scroll-duration-alt: 104s;
}

/* =========================
   GLOBAL RESET
========================= */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  position: relative;
  overflow-x: hidden;
  font-family: "Inter", sans-serif;
  line-height: 1.6;
  color: var(--text);
  background:
    radial-gradient(circle at 20% 10%, rgba(56, 189, 248, 0.28), transparent 34%),
    radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.30), transparent 36%),
    radial-gradient(circle at 50% 85%, rgba(236, 72, 153, 0.20), transparent 38%),
    var(--bg);
  min-height: 100vh;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent 80%);
}

img,
svg {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

p {
  color: var(--muted);
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 4px;
}

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

.skip-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 999;
  transform: translateY(-140%);
  padding: 0.75rem 1rem;
  border-radius: 999px;
  color: #050816;
  background: var(--cyan);
  font-weight: 800;
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

/* =========================
   PARALLAX BACKGROUND
========================= */

.parallax-background {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.parallax-layer {
  position: absolute;
  inset: -14%;
  will-change: transform;
}

.parallax-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 76px 76px;
  opacity: 0.5;
}

.parallax-stars {
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.42) 1px, transparent 1.5px),
    radial-gradient(circle, rgba(56,189,248,0.35) 1px, transparent 1.5px),
    radial-gradient(circle, rgba(139,92,246,0.28) 1px, transparent 1.5px);
  background-size:
    140px 140px,
    220px 220px,
    320px 320px;
  background-position:
    0 0,
    40px 70px,
    100px 160px;
  opacity: 0.32;
}

.parallax-glow-one {
  background:
    radial-gradient(circle at 14% 18%, rgba(56,189,248,0.26), transparent 44%),
    radial-gradient(circle at 24% 72%, rgba(108,172,228,0.14), transparent 38%);
}

.parallax-glow-two {
  background:
    radial-gradient(circle at 82% 22%, rgba(139,92,246,0.28), transparent 46%),
    radial-gradient(circle at 50% 82%, rgba(236,72,153,0.18), transparent 42%);
}

.parallax-glow-three {
  background:
    radial-gradient(circle at 72% 68%, rgba(252,214,18,0.10), transparent 34%),
    radial-gradient(circle at 42% 36%, rgba(56,189,248,0.10), transparent 46%);
  filter: blur(8px);
}

main,
.footer {
  position: relative;
  z-index: 2;
}

/* =========================
   HEADER / NAVIGATION
========================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(18px);
  background: rgba(5, 8, 22, 0.70);
  border-bottom: 1px solid var(--panel-border);
  transition: background 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.site-header.is-scrolled {
  background: rgba(5, 8, 22, 0.88);
  border-color: rgba(255, 255, 255, 0.20);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.24);
}

.nav {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.4rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.logo::before,
.logo::after {
  content: none;
}

.logo-mark {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 14px;
  box-shadow:
    0 0 18px rgba(56, 189, 248, 0.24),
    0 0 34px rgba(139, 92, 246, 0.14);
  transition: transform 0.24s ease, filter 0.24s ease;
}

.logo-text {
  display: inline-flex;
  align-items: center;
}

.logo:hover .logo-mark,
.logo:focus-visible .logo-mark {
  transform: translateY(-1px) scale(1.04);
  filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.35));
}

.nav-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem 1.08rem;
  color: var(--muted);
  font-size: 0.92rem;
}

.nav-links a {
  position: relative;
  display: inline-flex;
  padding: 0.35rem 0;
  transition: color 0.2s ease;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--text);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  transform: scaleX(1);
}

/* =========================
   HERO SECTION
========================= */

.hero {
  min-height: 88vh;
  display: flex;
  align-items: center;
  padding: 7rem 1.5rem 5rem;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top left, rgba(56,189,248,0.16), transparent 36%),
    radial-gradient(circle at bottom right, rgba(139,92,246,0.18), transparent 38%);
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: -150px;
  top: 115px;
  background: linear-gradient(135deg, var(--cyan), var(--violet), var(--pink));
  filter: blur(95px);
  opacity: 0.34;
  border-radius: 50%;
}

.hero::before,
.hero::after {
  z-index: 0;
}

.hero-orb {
  position: absolute;
  left: 50%;
  top: 47%;
  z-index: 1;
  width: clamp(420px, 39vw, 680px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.72;
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 22px rgba(56, 189, 248, 0.22))
    drop-shadow(0 0 58px rgba(139, 92, 246, 0.16));
  animation: heroOrbBreathe 8s ease-in-out infinite;
}

.hero-orb::before,
.hero-orb::after,
.hero-orb > span {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.hero-orb::before {
  content: "";
  inset: 7%;
  background:
    radial-gradient(circle at 50% 50%, rgba(248, 250, 252, 0.10), transparent 8%),
    radial-gradient(circle at 48% 52%, rgba(56, 189, 248, 0.18), transparent 26%),
    radial-gradient(circle at 56% 44%, rgba(139, 92, 246, 0.14), transparent 40%),
    radial-gradient(circle at 50% 50%, transparent 47%, rgba(56, 189, 248, 0.28) 48%, transparent 50%, transparent 61%, rgba(139, 92, 246, 0.20) 62%, transparent 64%);
  box-shadow:
    inset 0 0 48px rgba(56, 189, 248, 0.12),
    0 0 62px rgba(56, 189, 248, 0.14),
    0 0 94px rgba(139, 92, 246, 0.10);
}

.hero-orb::after {
  content: "";
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, transparent 56%, rgba(56, 189, 248, 0.14) 57%, transparent 59%),
    radial-gradient(circle at 50% 50%, transparent 70%, rgba(139, 92, 246, 0.12) 71%, transparent 73%),
    radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.08), transparent 66%);
  opacity: 0.9;
}

.hero-orb-ring {
  border: 1px solid rgba(199, 210, 254, 0.18);
  box-shadow: inset 0 0 20px rgba(56, 189, 248, 0.06);
}

.hero-orb-ring-one {
  inset: 5%;
  border-top-color: rgba(56, 189, 248, 0.50);
  border-right-color: rgba(139, 92, 246, 0.30);
  animation: heroOrbRotate 22s linear infinite;
}

.hero-orb-ring-two {
  inset: 17%;
  border-left-color: rgba(56, 189, 248, 0.42);
  border-bottom-color: rgba(236, 72, 153, 0.30);
  animation: heroOrbRotateReverse 28s linear infinite;
}

.hero-orb-ring-three {
  inset: 30%;
  border-top-color: rgba(248, 250, 252, 0.28);
  border-bottom-color: rgba(56, 189, 248, 0.38);
  animation: heroOrbRotate 16s linear infinite;
}

.hero-orb-scan {
  inset: 10%;
  background: conic-gradient(from 18deg, transparent 0 66%, rgba(56, 189, 248, 0.22) 72%, rgba(139, 92, 246, 0.12) 78%, transparent 84% 100%);
  opacity: 0.72;
  animation: heroOrbRotate 11s linear infinite;
}

.hero-orb-core {
  inset: 42%;
  background: radial-gradient(circle, rgba(248, 250, 252, 0.55), rgba(56, 189, 248, 0.35) 34%, rgba(139, 92, 246, 0.08) 62%, transparent 72%);
  box-shadow:
    0 0 24px rgba(56, 189, 248, 0.32),
    0 0 54px rgba(139, 92, 246, 0.18);
  animation: heroOrbCorePulse 5.6s ease-in-out infinite;
}

.hero-content {
  max-width: var(--max-width);
  margin: 0 auto;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  gap: 4rem;
  align-items: center;
}

.hero-left {
  position: relative;
  z-index: 2;
}

.hero-right {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.15rem;
  align-items: center;
}

.eyebrow {
  color: var(--cyan);
  font-family: "Space Grotesk", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.76rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.hero h1 {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(3rem, 7vw, 6.15rem);
  line-height: 0.92;
  letter-spacing: -0.075em;
  max-width: 980px;
  margin-bottom: 2rem;
}

.hero h1 span {
  display: block;
}

.hero-text {
  max-width: 760px;
  color: var(--muted);
  font-size: clamp(1.06rem, 2vw, 1.24rem);
  line-height: 1.58;
  margin-bottom: 2.15rem;
}

.hero-buttons,
.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.hero-credential-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.4rem;
}

.hero-credential-list li {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0.45rem 0.75rem;
  color: var(--muted-strong);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  font-size: clamp(0.78rem, 1vw, 0.85rem);
  line-height: 1.2;
  font-weight: 700;
}

/* =========================
   BUTTONS
========================= */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.95rem 1.35rem;
  border-radius: 999px;
  font-weight: 800;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.button:hover {
  transform: translateY(-3px);
}

.button.primary {
  color: #050816;
  background: linear-gradient(135deg, var(--cyan), var(--violet));
  box-shadow: 0 14px 40px rgba(56, 189, 248, 0.24);
}

.button.secondary {
  color: var(--text);
  border: 1px solid var(--panel-border);
  background: rgba(255, 255, 255, 0.06);
}

.button.secondary:hover {
  border-color: var(--cyan);
  box-shadow: 0 14px 40px rgba(56, 189, 248, 0.15);
}

/* =========================
   HERO UI PANEL
========================= */

.floating-panel {
  grid-column: 1 / -1;
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 28px;
  backdrop-filter: blur(22px);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.45),
    0 0 54px rgba(56, 189, 248, 0.18);
  overflow: hidden;
  position: relative;
  animation: floatPanel 7s ease-in-out infinite;
  transform-style: preserve-3d;
}

.floating-panel::before {
  content: "";
  position: absolute;
  inset: -1px;
  background:
    radial-gradient(circle at top right, rgba(56,189,248,0.18), transparent 34%),
    radial-gradient(circle at bottom left, rgba(139,92,246,0.14), transparent 38%);
  pointer-events: none;
}

.panel-top,
.panel-content {
  position: relative;
  z-index: 2;
}

.panel-top {
  display: flex;
  gap: 0.5rem;
  padding: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.panel-dot-button {
  width: 13px;
  height: 13px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.82;
  box-shadow: 0 0 0 rgba(56, 189, 248, 0);
  transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.panel-dot-button.cyan {
  background: var(--cyan);
}

.panel-dot-button.violet {
  background: var(--violet);
}

.panel-dot-button.pink {
  background: var(--pink);
}

.panel-dot-button:hover,
.panel-dot-button:focus-visible,
.panel-dot-button.is-active {
  opacity: 1;
  transform: scale(1.22);
  filter: saturate(1.15);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.42);
}

.panel-content {
  padding: 2rem;
}

.panel-viewport {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  transition: min-height 0.25s ease;
}

.panel-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  transform: translateY(12px) scale(0.992);
  pointer-events: none;
  transition: opacity 0.36s ease, transform 0.36s ease;
}

.panel-slide.is-active {
  position: relative;
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.panel-focus-signal {
  display: inline-flex;
  align-items: center;
  margin-top: 1.1rem;
  margin-bottom: 0;
  padding: 0.48rem 0.72rem;
  border-radius: 999px;
  color: var(--muted-strong) !important;
  background: rgba(255, 255, 255, 0.065);
  border: 1px solid rgba(56, 189, 248, 0.22);
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.78rem !important;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 0 26px rgba(56, 189, 248, 0.09);
}

.panel-label {
  color: var(--cyan);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  font-weight: 800;
}

.panel-content h2 {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.05;
  margin-bottom: 1rem;
}

.panel-content p {
  color: var(--muted);
  font-size: 1rem;
}

.panel-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1.45rem;
}

.panel-metrics div {
  padding: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.055);
}

.panel-metrics strong {
  display: block;
  color: var(--text);
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.35rem;
  line-height: 1;
  margin-bottom: 0.35rem;
}

.panel-metrics span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.hero-ui-card {
  width: 100%;
  padding: 0.95rem 1.2rem;
  border-radius: 18px;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(18px);
  color: var(--text);
  font-size: clamp(0.82rem, 1.15vw, 0.96rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  min-height: 4.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 20px 50px rgba(0,0,0,0.35),
    0 0 28px rgba(56,189,248,0.10);
  animation: floatCard 6s ease-in-out infinite;
}

.mini-card {
  justify-self: start;
}

.corner-card {
  justify-self: end;
  animation-delay: 0.9s;
}

.hero-ui-row {
  grid-column: 1 / -1;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.45fr);
  gap: 1.15rem;
}

.hero-ui-row .hero-ui-card:nth-child(1) {
  animation-delay: 1.5s;
}

.hero-ui-row .hero-ui-card:nth-child(2) {
  animation-delay: 3s;
}

/* =========================
   INTERACTION EFFECT
========================= */

.interactive-card {
  position: relative;
  overflow: hidden;
}

.interactive-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 0%), rgba(56, 189, 248, 0.16), transparent 36%);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.interactive-card:hover::after {
  opacity: 1;
}

.interactive-card > * {
  position: relative;
  z-index: 1;
}

/* =========================
   ANIMATIONS
========================= */

@keyframes floatPanel {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-12px);
  }

  100% {
    transform: translateY(0px);
  }
}

@keyframes floatCard {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-8px);
  }

  100% {
    transform: translateY(0px);
  }
}

@keyframes heroOrbBreathe {
  0%,
  100% {
    opacity: 0.58;
    filter:
      drop-shadow(0 0 18px rgba(56, 189, 248, 0.18))
      drop-shadow(0 0 48px rgba(139, 92, 246, 0.12));
  }

  50% {
    opacity: 0.78;
    filter:
      drop-shadow(0 0 30px rgba(56, 189, 248, 0.28))
      drop-shadow(0 0 76px rgba(139, 92, 246, 0.20));
  }
}

@keyframes heroOrbRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes heroOrbRotateReverse {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}

@keyframes heroOrbCorePulse {
  0%,
  100% {
    transform: scale(0.82);
    opacity: 0.56;
  }

  50% {
    transform: scale(1);
    opacity: 0.92;
  }
}

/* =========================
   SCROLL REVEAL ANIMATION
========================= */

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.9s ease,
    transform 0.9s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   GENERAL SECTIONS
========================= */

.section,
.impact-section {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 6rem 1.5rem;
}

.section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section-heading {
  margin-bottom: 2.2rem;
}

.section-heading.compact {
  margin-bottom: 1.6rem;
}

.section-heading h2 {
  font-family: "Space Grotesk", sans-serif;
  color: var(--text);
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1;
  letter-spacing: -0.055em;
  max-width: 920px;
}

.section p,
.impact-section p {
  max-width: 780px;
  color: var(--muted);
  font-size: 1.08rem;
}

.section-lede {
  font-size: clamp(1.08rem, 1.5vw, 1.28rem) !important;
  color: var(--muted-strong) !important;
}

/* =========================
   SECTION TRANSITION REFINEMENTS
========================= */

.recommendations-section,
.light-section,
.lower-page-wrap {
  position: relative;
}

.recommendations-section::before,
.light-section::before,
.lower-page-wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: min(var(--max-width), calc(100% - 3rem));
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(56,189,248,0.42), rgba(139,92,246,0.34), transparent);
  pointer-events: none;
  z-index: 1;
}

.recommendations-section::after,
.light-section::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(var(--max-width), calc(100% - 3rem));
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(139,92,246,0.30), rgba(56,189,248,0.28), transparent);
  pointer-events: none;
  z-index: 1;
}

/* =========================
   CURRENT FOCUS STRIP
========================= */

.focus-strip {
  position: relative;
  z-index: 2;
  max-width: var(--max-width);
  margin: -1.25rem auto 0;
  padding: 0 1.5rem 3.1rem;
}

.focus-strip-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  min-height: 6.25rem;
  padding: 1.35rem 1.35rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.09), rgba(255,255,255,0.045)),
    radial-gradient(circle at 10% 50%, rgba(56,189,248,0.13), transparent 34%),
    radial-gradient(circle at 90% 50%, rgba(139,92,246,0.13), transparent 34%);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px);
}

.focus-strip-label span {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  color: var(--cyan);
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color 0.22s ease;
}

.focus-carousel-viewport {
  position: relative;
  min-width: 0;
  min-height: 3.75rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  transition: min-height 0.25s ease;
}

.focus-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.34s ease, transform 0.34s ease;
}

.focus-slide.is-active {
  position: relative;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.focus-chip-list {
  width: 100%;
  min-height: 3.75rem;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 0.5rem;
}

.focus-chip-list li {
  display: inline-flex;
  align-items: center;
  padding: 0.42rem 0.68rem;
  border-radius: 999px;
  color: var(--muted-strong);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1;
}

.focus-controls {
  display: flex;
  gap: 0.34rem;
  align-items: center;
}

.focus-dot {
  width: 0.54rem;
  height: 0.54rem;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: rgba(255, 255, 255, 0.26);
  box-shadow: 0 0 0 rgba(56, 189, 248, 0);
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.focus-dot:nth-child(1) {
  background: rgba(56, 189, 248, 0.72);
}

.focus-dot:nth-child(2) {
  background: rgba(139, 92, 246, 0.62);
}

.focus-dot:nth-child(3) {
  background: rgba(236, 72, 153, 0.64);
}

.focus-dot:hover,
.focus-dot:focus-visible,
.focus-dot.is-active {
  transform: scale(1.32);
  opacity: 1;
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.48);
}

/* =========================
   IMPACT SNAPSHOT
========================= */

.impact-section {
  padding-top: 4.75rem;
}

.impact-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.stat-card {
  min-height: 172px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.45rem;
  border-radius: 24px;
  background:
    linear-gradient(150deg, rgba(255,255,255,0.12), rgba(255,255,255,0.045)),
    radial-gradient(circle at top right, rgba(56,189,248,0.17), transparent 42%);
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px);
}

.stat-card strong {
  display: block;
  color: var(--text);
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2.1rem, 4vw, 3.3rem);
  letter-spacing: -0.06em;
  line-height: 0.9;
}

.stat-card span {
  color: var(--muted);
  font-size: 1rem;
  font-weight: 750;
}

/* Impact Spotlight hover artifact fix */
.stat-card.interactive-card::after {
  content: none;
}

.stat-card:hover {
  transform: translateY(-8px) scale(1.01);
  border-color: rgba(56, 189, 248, 0.55);
  background:
    linear-gradient(150deg, rgba(255,255,255,0.14), rgba(255,255,255,0.055)),
    radial-gradient(circle at top right, rgba(56,189,248,0.19), transparent 42%);
  box-shadow:
    var(--shadow-soft),
    0 0 34px rgba(56,189,248,0.10);
}

/* =========================
   PROFESSIONAL RECOMMENDATIONS
========================= */

.recommendations-section {
  padding-top: 4.5rem;
  padding-bottom: 5.5rem;
}

.recommendations-header {
  display: block;
  max-width: 1060px;
  margin-bottom: 1.25rem;
}

.recommendations-header .section-heading {
  margin-bottom: 0;
}

.recommendations-header .section-heading h2 {
  max-width: 1040px;
}

.recommendations-intro {
  margin-bottom: 1.6rem;
  color: var(--muted-strong) !important;
}

.recommendation-proof-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 0.75rem 0 2.2rem;
}

.proof-pill {
  min-height: 146px;
  padding: 1.2rem;
  border-radius: 22px;
  background:
    linear-gradient(150deg, rgba(255,255,255,0.105), rgba(255,255,255,0.04)),
    radial-gradient(circle at top right, rgba(139,92,246,0.16), transparent 44%);
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px);
}

.proof-pill strong {
  display: block;
  color: var(--text);
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.15rem, 1.85vw, 1.55rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin-bottom: 1rem;
}

.proof-pill span {
  display: block;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.35;
}

.recommendation-marquee-shell {
  position: relative;
  display: grid;
  gap: 1rem;
  margin-top: 0.75rem;
}

.recommendation-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 0.15rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.recommendation-track {
  display: flex;
  width: max-content;
  animation: recommendation-scroll-left var(--recommendation-scroll-duration) linear infinite;
  will-change: transform;
}

.recommendation-track.track-right {
  animation-name: recommendation-scroll-right;
  animation-duration: var(--recommendation-scroll-duration-alt);
}

.recommendation-marquee:hover .recommendation-track,
.recommendation-marquee:focus-within .recommendation-track {
  animation-play-state: paused;
}

.recommendation-group {
  display: flex;
  flex: 0 0 auto;
  gap: 1rem;
  padding-right: 1rem;
}

.recommendation-card {
  flex: 0 0 auto;
  width: min(420px, 78vw);
  min-height: 218px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.35rem;
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.045)),
    radial-gradient(circle at 12% 0%, rgba(56,189,248,0.12), transparent 34%),
    radial-gradient(circle at 95% 100%, rgba(236,72,153,0.10), transparent 42%);
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(20px);
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}

.recommendation-card:hover {
  transform: translateY(-5px);
  border-color: rgba(56, 189, 248, 0.48);
  background: rgba(255, 255, 255, 0.105);
  box-shadow:
    var(--shadow-soft),
    0 0 30px rgba(56,189,248,0.11);
}

.recommendation-card blockquote {
  color: var(--text);
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.28;
  letter-spacing: -0.025em;
}

.recommendation-card figcaption {
  margin-top: 1.4rem;
  display: grid;
  gap: 0.18rem;
}

.recommendation-card figcaption strong {
  color: var(--cyan);
  font-size: 0.92rem;
}

.recommendation-card figcaption span {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.recommendation-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1.9rem;
  padding: 1.35rem;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(18px);
}

.recommendation-footer p {
  margin: 0;
  font-size: 0.96rem;
  max-width: 680px;
}

.recommendation-footer .button {
  flex: 0 0 auto;
}

@keyframes recommendation-scroll-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes recommendation-scroll-right {
  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0);
  }
}

/* =========================
   APPROACH SECTION
========================= */

.approach-section {
  position: relative;
  padding-top: 5.25rem;
  padding-bottom: 5.75rem;
}

.approach-section::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: min(var(--max-width), calc(100% - 3rem));
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(56,189,248,0.34), rgba(139,92,246,0.30), transparent);
  pointer-events: none;
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(320px, 1.12fr);
  gap: clamp(2.5rem, 5vw, 4.25rem);
  align-items: center;
}

.approach-section .section-heading h2 {
  font-size: clamp(2.55rem, 5.7vw, 4.95rem);
  max-width: 720px;
}

.about-copy {
  max-width: 760px;
}

.about-copy p {
  max-width: 740px;
  font-size: clamp(1.06rem, 1.35vw, 1.2rem);
  line-height: 1.62;
}

.about-copy p + p {
  margin-top: 1.25rem;
}

.about-panel {
  margin-top: 1.9rem;
  padding: 1.55rem;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.085), rgba(255,255,255,0.045)),
    radial-gradient(circle at top right, rgba(56,189,248,0.11), transparent 38%);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(20px);
}

.check-list {
  list-style: none;
  display: grid;
  gap: 0.82rem;
}

.check-list li {
  position: relative;
  padding-left: 1.55rem;
  color: var(--muted);
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58rem;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--violet));
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.34);
}

/* =========================
   CAPABILITY CARDS
========================= */

.light-section {
  max-width: none;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018)),
    radial-gradient(circle at 18% 10%, rgba(56,189,248,0.08), transparent 28%),
    radial-gradient(circle at 90% 70%, rgba(139,92,246,0.08), transparent 34%);
  border-top: 1px solid var(--panel-border);
  border-bottom: 1px solid var(--panel-border);
}

.light-section .section-heading,
.light-section .card-grid {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.card,
.contact-section,
.process-card,
.case-study-card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
}

.card {
  min-height: 260px;
  padding: 1.5rem;
  transform-style: preserve-3d;
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}

.capability-card:nth-child(4n + 2),
.process-card:nth-child(2),
.case-study-card:nth-child(2n) {
  box-shadow:
    var(--shadow),
    0 0 28px rgba(139, 92, 246, 0.07);
}

.card:hover,
.process-card:hover,
.case-study-card:hover {
  transform: translateY(-8px) scale(1.01);
  border-color: rgba(56, 189, 248, 0.55);
  background: rgba(255, 255, 255, 0.11);
  box-shadow:
    var(--shadow),
    0 0 36px rgba(56,189,248,0.10);
}

.card-number {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  margin-bottom: 1.4rem;
  color: #7dd3fc;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(248, 250, 252, 0.26), transparent 24%),
    radial-gradient(circle at 50% 52%, rgba(56, 189, 248, 0.24), rgba(56, 189, 248, 0.075) 56%, rgba(5, 8, 22, 0.18) 100%);
  border: 1px solid rgba(56, 189, 248, 0.36);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800;
  font-size: 0.82rem;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.55);
  box-shadow:
    inset 0 0 14px rgba(56, 189, 248, 0.16),
    inset 0 0 26px rgba(139, 92, 246, 0.08),
    0 0 16px rgba(56, 189, 248, 0.24),
    0 0 34px rgba(56, 189, 248, 0.12);
}

.card-number::before,
.card-number::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.card-number::before {
  inset: -0.42rem;
  z-index: -1;
  background:
    radial-gradient(circle, rgba(56, 189, 248, 0.28), rgba(56, 189, 248, 0.11) 42%, transparent 72%);
  opacity: 0.78;
  filter: blur(1px);
}

.card-number::after {
  inset: -0.16rem;
  border: 1px solid rgba(125, 211, 252, 0.18);
  box-shadow:
    0 0 18px rgba(56, 189, 248, 0.16),
    inset 0 0 12px rgba(199, 210, 254, 0.08);
}

.capability-card:hover .card-number,
.capability-card:focus-within .card-number {
  color: #f8fafc;
  border-color: rgba(125, 211, 252, 0.56);
  background:
    radial-gradient(circle at 35% 28%, rgba(248, 250, 252, 0.34), transparent 25%),
    radial-gradient(circle at 50% 52%, rgba(56, 189, 248, 0.32), rgba(56, 189, 248, 0.12) 58%, rgba(5, 8, 22, 0.14) 100%);
  box-shadow:
    inset 0 0 16px rgba(56, 189, 248, 0.22),
    inset 0 0 28px rgba(139, 92, 246, 0.10),
    0 0 20px rgba(56, 189, 248, 0.34),
    0 0 42px rgba(56, 189, 248, 0.18);
}

.card h3 {
  font-family: "Space Grotesk", sans-serif;
  color: var(--text);
  font-size: 1.25rem;
  line-height: 1.12;
  margin-bottom: 0.75rem;
}

.card p {
  font-size: 0.98rem;
}

/* =========================
   LOWER PAGE PARALLAX FIELD
========================= */

.lower-page-wrap {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.lower-page-wrap > .section {
  position: relative;
  z-index: 2;
}

.lower-parallax-field {
  position: absolute;
  inset: -7rem 0 -9rem;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.lower-parallax-layer {
  position: absolute;
  inset: -12%;
  will-change: transform;
}

.lower-parallax-grid {
  opacity: 0.24;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(115deg, transparent 48%, rgba(56,189,248,0.08) 49%, transparent 50%);
  background-size: 86px 86px, 86px 86px, 220px 220px;
  transform: rotate(-1deg);
}

.lower-parallax-stars {
  opacity: 0.2;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.38) 1px, transparent 1.6px),
    radial-gradient(circle, rgba(56,189,248,0.32) 1px, transparent 1.7px),
    radial-gradient(circle, rgba(236,72,153,0.24) 1px, transparent 1.7px);
  background-size:
    180px 180px,
    270px 270px,
    420px 420px;
  background-position:
    20px 60px,
    90px 130px,
    160px 280px;
}

.lower-parallax-glow-one {
  background:
    radial-gradient(circle at 16% 18%, rgba(56,189,248,0.16), transparent 38%),
    radial-gradient(circle at 28% 78%, rgba(139,92,246,0.10), transparent 36%);
  filter: blur(2px);
}

.lower-parallax-glow-two {
  background:
    radial-gradient(circle at 86% 18%, rgba(139,92,246,0.18), transparent 42%),
    radial-gradient(circle at 78% 74%, rgba(236,72,153,0.12), transparent 38%),
    radial-gradient(circle at 44% 55%, rgba(56,189,248,0.08), transparent 44%);
  filter: blur(4px);
}

.lower-parallax-streaks {
  opacity: 0.5;
  background:
    linear-gradient(118deg, transparent 0%, transparent 38%, rgba(56,189,248,0.08) 39%, transparent 42%, transparent 100%),
    linear-gradient(118deg, transparent 0%, transparent 62%, rgba(139,92,246,0.07) 63%, transparent 66%, transparent 100%),
    linear-gradient(118deg, transparent 0%, transparent 78%, rgba(252,214,18,0.04) 79%, transparent 81%, transparent 100%);
}

.lower-flow-lines {
  display: none;
}

.lower-flow-line {
  position: absolute;
  left: 50%;
  width: min(var(--max-width), calc(100% - 3rem));
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(56,189,248,0.0), rgba(56,189,248,0.58), rgba(139,92,246,0.54), rgba(236,72,153,0.36), rgba(56,189,248,0.0), transparent);
  background-size: 220% 100%;
  box-shadow:
    0 0 22px rgba(56, 189, 248, 0.22),
    0 0 44px rgba(139, 92, 246, 0.14);
  opacity: 0.82;
  animation: lowerFlowShift 11s ease-in-out infinite alternate;
}

.lower-flow-line::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: -18px;
  height: 36px;
  background: radial-gradient(ellipse at center, rgba(56,189,248,0.12), transparent 68%);
}

.lower-flow-line-one {
  top: 23%;
}

.lower-flow-line-two {
  top: 47%;
  opacity: 0.62;
  animation-delay: -3s;
}

.lower-flow-line-three {
  top: 72%;
  opacity: 0.48;
  animation-delay: -7s;
}

@keyframes lowerFlowShift {
  from {
    background-position: 0% 50%;
  }

  to {
    background-position: 100% 50%;
  }
}

/* =========================
   FEATURED WORK / PROJECTS
========================= */

.projects-section {
  position: relative;
  padding-top: 7rem;
}

.case-study-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.35rem;
  align-items: stretch;
}

.case-study-card {
  min-height: 460px;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.case-study-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, transparent, rgba(255,255,255,0.13), transparent),
    radial-gradient(circle at top right, rgba(56, 189, 248, 0.20), transparent 42%),
    radial-gradient(circle at bottom left, rgba(139, 92, 246, 0.13), transparent 42%);
  opacity: 0.9;
  pointer-events: none;
}

.case-study-card > * {
  position: relative;
  z-index: 1;
}

.case-study-topline {
  margin-bottom: 1rem;
}

.showcase-meta {
  color: var(--cyan);
  font-family: "Space Grotesk", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.7rem;
  font-weight: 800;
  margin-bottom: 0.85rem;
}

.case-study-card h3,
.process-card h3 {
  font-family: "Space Grotesk", sans-serif;
  color: var(--text);
  font-size: clamp(1.65rem, 2.5vw, 2.35rem);
  line-height: 1;
  letter-spacing: -0.045em;
  margin-bottom: 1rem;
}

.case-study-card p,
.process-card p {
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.55;
  max-width: 100%;
}

.case-study-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.72rem;
  margin: 1.35rem 0;
}

.case-study-details div {
  padding: 1rem;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.055);
}

.case-study-details span {
  display: block;
  color: var(--cyan);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.45rem;
}

.case-study-details p {
  font-size: 0.88rem;
}

.tag-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: auto 0 1.2rem;
}

.tag-list li {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.65rem;
  color: var(--muted-strong);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  font-size: 0.78rem;
  font-weight: 700;
}

.text-link {
  color: var(--text);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.text-link::after {
  content: "->";
  transition: transform 0.2s ease;
}

.text-link:hover,
.footer a:hover {
  color: var(--cyan);
}

.text-link:hover::after {
  transform: translateX(4px);
}

/* =========================
   DESIGN PHILOSOPHY
========================= */

.process-section {
  padding-top: 4rem;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.process-card {
  min-height: 250px;
  padding: 1.6rem;
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}

.process-card > span {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  margin-bottom: 1.45rem;
  color: #7dd3fc;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(248, 250, 252, 0.26), transparent 24%),
    radial-gradient(circle at 50% 52%, rgba(56, 189, 248, 0.24), rgba(56, 189, 248, 0.075) 56%, rgba(5, 8, 22, 0.18) 100%);
  border: 1px solid rgba(56, 189, 248, 0.36);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800;
  font-size: 0.82rem;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.55);
  box-shadow:
    inset 0 0 14px rgba(56, 189, 248, 0.16),
    inset 0 0 26px rgba(139, 92, 246, 0.08),
    0 0 16px rgba(56, 189, 248, 0.24),
    0 0 34px rgba(56, 189, 248, 0.12);
}

.process-card > span::before,
.process-card > span::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.process-card > span::before {
  inset: -0.42rem;
  z-index: -1;
  background:
    radial-gradient(circle, rgba(56, 189, 248, 0.28), rgba(56, 189, 248, 0.11) 42%, transparent 72%);
  opacity: 0.78;
  filter: blur(1px);
}

.process-card > span::after {
  inset: -0.16rem;
  border: 1px solid rgba(125, 211, 252, 0.18);
  box-shadow:
    0 0 18px rgba(56, 189, 248, 0.16),
    inset 0 0 12px rgba(199, 210, 254, 0.08);
}

.process-card:hover > span,
.process-card:focus-within > span {
  color: #f8fafc;
  border-color: rgba(125, 211, 252, 0.56);
  background:
    radial-gradient(circle at 35% 28%, rgba(248, 250, 252, 0.34), transparent 25%),
    radial-gradient(circle at 50% 52%, rgba(56, 189, 248, 0.32), rgba(56, 189, 248, 0.12) 58%, rgba(5, 8, 22, 0.14) 100%);
  box-shadow:
    inset 0 0 16px rgba(56, 189, 248, 0.22),
    inset 0 0 28px rgba(139, 92, 246, 0.10),
    0 0 20px rgba(56, 189, 248, 0.34),
    0 0 42px rgba(56, 189, 248, 0.18);
}

.process-card h3 {
  font-size: 1.65rem;
}

/* =========================
   CONTACT SECTION
========================= */

.contact-section {
  margin-bottom: 5rem;
  padding: 4rem 1.5rem;
  position: relative;
  overflow: hidden;
}

.contact-section::before {
  content: "";
  position: absolute;
  inset: -1px;
  background:
    radial-gradient(circle at top right, rgba(56, 189, 248, 0.28), transparent 42%),
    radial-gradient(circle at bottom left, rgba(139, 92, 246, 0.12), transparent 36%);
  pointer-events: none;
}

.contact-section > * {
  position: relative;
  z-index: 2;
}

.contact-section p {
  margin-bottom: 1.65rem;
}

.contact-note-inline {
  display: inline-block;
  margin-top: 0.85rem;
  color: var(--muted);
}

.contact-links {
  margin-top: 0.35rem;
}

.contact-note {
  margin-top: 1.5rem;
  margin-bottom: 0 !important;
  font-size: 0.94rem !important;
  color: var(--muted) !important;
}

/* =========================
   FOOTER
========================= */

.footer {
  position: relative;
  padding: 2.15rem 1.5rem;
  color: var(--muted);
  border-top: 1px solid var(--panel-border);
  background:
    radial-gradient(circle at 20% 0%, rgba(56,189,248,0.08), transparent 28%),
    radial-gradient(circle at 80% 0%, rgba(139,92,246,0.08), transparent 30%),
    rgba(5, 8, 22, 0.72);
}

.footer::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -1px;
  width: min(var(--max-width), calc(100% - 3rem));
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(56,189,248,0.36), rgba(139,92,246,0.30), transparent);
  pointer-events: none;
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.footer-utilities {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.footer p,
.footer a {
  color: var(--muted);
  font-size: 0.92rem;
}

.footer-signature {
  margin-top: 0.25rem;
  font-size: 0.78rem !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(168, 179, 207, 0.72) !important;
}

.footer-top-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--muted);
  font-weight: 800;
  transition: color 0.2s ease, transform 0.2s ease;
}

.footer-top-link:hover {
  color: var(--cyan);
  transform: translateY(-2px);
}

/* =========================
   RESPONSIVE DESIGN
========================= */

@media (max-width: 1100px) {
  .hero-content,
  .about-grid {
    grid-template-columns: 1fr;
  }

  .hero-right {
    max-width: 620px;
    margin: 0 auto;
  }

  .hero-orb {
    left: 62%;
    top: 47%;
    width: clamp(360px, 60vw, 620px);
    opacity: 0.45;
  }

  .impact-grid,
  .recommendation-proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .recommendations-header {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .case-study-grid {
    grid-template-columns: 1fr;
  }

  .case-study-card {
    min-height: auto;
  }
}

@media (max-width: 920px) {
  .nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
  }

  .nav-links {
    justify-content: flex-start;
    gap: 0.2rem 1rem;
  }

  .hero {
    min-height: auto;
    padding: 5.5rem 1.5rem;
  }

  .hero-orb {
    left: 72%;
    top: 30%;
    width: min(620px, 82vw);
    opacity: 0.28;
  }

  .process-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================
   TABLET + TOUCH PARALLAX SAFETY
========================= */

@media (max-width: 1180px), (pointer: coarse) {
  .parallax-background {
    position: absolute;
    inset: 0;
    height: 100%;
    overflow: hidden;
  }

  .parallax-layer {
    position: absolute;
    inset: 0;
    transform: none !important;
    will-change: auto;
  }

  .parallax-stars {
    opacity: 0.18;
  }

  .parallax-grid {
    opacity: 0.22;
    background-size: 56px 56px;
  }

  .parallax-glow-one,
  .parallax-glow-two,
  .parallax-glow-three {
    opacity: 0.7;
    filter: none;
  }

  .lower-parallax-field {
    inset: 0;
    opacity: 0.75;
  }

  .lower-parallax-layer {
    transform: none !important;
    will-change: auto;
  }

  .lower-parallax-grid {
    opacity: 0.16;
    background-size: 64px 64px, 64px 64px, 180px 180px;
  }

  .lower-parallax-stars {
    opacity: 0.13;
  }
}

/* =========================
   MOBILE LAYOUT SAFETY
========================= */

@media (max-width: 768px) {
  .parallax-background {
    position: absolute;
    inset: 0;
    height: 100%;
    overflow: hidden;
  }

  .parallax-layer {
    position: absolute;
    inset: 0;
    transform: none !important;
    will-change: auto;
  }

  .parallax-stars {
    opacity: 0.18;
  }

  .parallax-grid {
    opacity: 0.22;
    background-size: 56px 56px;
  }

  .parallax-glow-one,
  .parallax-glow-two,
  .parallax-glow-three {
    opacity: 0.7;
    filter: none;
  }

  .panel-metrics,
  .case-study-details {
    grid-template-columns: 1fr;
  }

  .panel-viewport {
    min-height: 460px;
  }

  .lower-parallax-field {
    inset: 0;
    opacity: 0.75;
  }

  .lower-parallax-layer {
    transform: none !important;
    will-change: auto;
  }

  .lower-parallax-grid {
    opacity: 0.16;
    background-size: 64px 64px, 64px 64px, 180px 180px;
  }

  .lower-parallax-stars {
    opacity: 0.13;
  }

}

@media (max-width: 640px) {
  html {
    scroll-padding-top: 132px;
  }

  .nav-links {
    font-size: 0.86rem;
  }

  .focus-strip {
    margin-top: -0.75rem;
    padding: 0 1.25rem 2.7rem;
  }

  .focus-strip-inner {
    grid-template-columns: 1fr;
    justify-items: start;
    min-height: auto;
    border-radius: 26px;
  }

  .focus-chip-list {
    justify-content: flex-start;
    align-content: flex-start;
    min-height: auto;
  }

  
  .hero-orb {
    left: 78%;
    top: 23%;
    width: 420px;
    opacity: 0.18;
  }

  .hero h1 {
    letter-spacing: -0.055em;
  }

  .hero h1 span {
    display: inline;
  }

  .hero h1 span:not(:last-child)::after {
    content: " ";
  }

  .approach-section {
    padding-top: 3.6rem;
    padding-bottom: 4.35rem;
  }

  .approach-section .section-heading h2 {
    font-size: clamp(2.35rem, 13vw, 3.75rem);
  }

  .about-copy p {
    font-size: 1.04rem;
  }

  .section,
  .impact-section {
    padding: 4.5rem 1.25rem;
  }

  .impact-section {
    padding-top: 3.25rem;
  }

  .hero-right,
  .impact-grid,
  .recommendation-proof-grid,
  .card-grid {
    grid-template-columns: 1fr;
  }

  .recommendation-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .recommendation-card {
    width: min(360px, 84vw);
    min-height: 230px;
  }

  .floating-panel,
  .hero-ui-row {
    grid-column: auto;
  }

  .hero-ui-row {
    grid-template-columns: 1fr;
  }

  .mini-card,
  .corner-card {
    justify-self: stretch;
  }

  .floating-panel {
    max-width: 100%;
  }

  .case-study-card,
  .process-card {
    padding: 1.45rem;
  }

  .contact-section {
    border-radius: 0;
    margin-bottom: 0;
  }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-utilities {
    width: 100%;
    justify-content: space-between;
  }
}

/* =========================
   REDUCED MOTION SUPPORT
========================= */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .recommendation-marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
    padding-bottom: 0.65rem;
  }

  .recommendation-track {
    animation: none !important;
    transform: none !important;
  }

  .lower-parallax-layer,
  .focus-dot,
  .panel-dot-button,
  .panel-slide {
    transform: none !important;
  }

  .lower-flow-line,
  .hero-orb,
  .hero-orb-ring,
  .hero-orb-scan,
  .hero-orb-core {
    animation: none !important;
  }

}

/* =========================
   SITE AUDIO CONTROLS
========================= */

.site-audio {
  position: static;
  display: inline-flex;
  align-items: center;
}

.site-audio audio {
  display: none;
}

.sound-toggle {
  width: 3.15rem;
  height: 3.15rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 50%;

  background:
    linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05)),
    radial-gradient(circle at 30% 30%, rgba(56,189,248,0.14), transparent 55%);

  color: var(--text);

  backdrop-filter: blur(18px);

  box-shadow:
    0 14px 36px rgba(0,0,0,0.34),
    0 0 24px rgba(56,189,248,0.12);

  cursor: pointer;

  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease;
}

.sound-toggle:hover {
  transform: translateY(-2px);

  border-color: rgba(56,189,248,0.48);

  box-shadow:
    0 18px 42px rgba(0,0,0,0.38),
    0 0 32px rgba(56,189,248,0.18);
}

.sound-toggle-icon {
  width: 1.2rem;
  height: 1.2rem;
}

.sound-wave {
  opacity: 1;
  transition: opacity 0.2s ease;
}

.sound-toggle[aria-pressed="false"] {
  opacity: 0.72;
}

.sound-toggle[aria-pressed="false"] .sound-wave {
  opacity: 0;
}

@media (max-width: 640px) {

  .sound-toggle {
    width: 2.85rem;
    height: 2.85rem;
  }
}

/* =========================
   INTELLIGENCE INTERFACE
========================= */

.interface-section {
  position: relative;
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}

.interface-section::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: min(var(--max-width), calc(100% - 3rem));
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(56,189,248,0.48), rgba(139,92,246,0.42), rgba(236,72,153,0.28), transparent);
  pointer-events: none;
}

.interface-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
  gap: 2rem;
  align-items: end;
  margin-bottom: 1.7rem;
}

.interface-intro {
  color: var(--muted-strong) !important;
  font-size: 1rem !important;
  line-height: 1.58;
  max-width: 540px !important;
  justify-self: end;
}

.interface-shell {
  position: relative;
  min-height: 0;
  padding: 1.05rem;
  border-radius: 34px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.18);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.115), rgba(255,255,255,0.035)),
    radial-gradient(circle at 12% 16%, rgba(56,189,248,0.20), transparent 36%),
    radial-gradient(circle at 82% 28%, rgba(139,92,246,0.20), transparent 40%),
    radial-gradient(circle at 54% 96%, rgba(236,72,153,0.10), transparent 44%);
  box-shadow:
    0 34px 110px rgba(0,0,0,0.48),
    0 0 70px rgba(56,189,248,0.12),
    inset 0 0 70px rgba(255,255,255,0.035);
  backdrop-filter: blur(24px);
}

.interface-shell::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 33px;
  border: 1px solid rgba(56,189,248,0.18);
  pointer-events: none;
}

.interface-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px),
    radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgba(56,189,248,0.16), transparent 28%);
  background-size: 42px 42px, 42px 42px, auto;
  opacity: 0.72;
  mask-image: radial-gradient(circle at center, #000, transparent 82%);
}

.interface-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.interface-orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(56,189,248,0.16);
  box-shadow: inset 0 0 26px rgba(56,189,248,0.06), 0 0 34px rgba(139,92,246,0.08);
}

.interface-orbit-one {
  width: 420px;
  height: 420px;
  right: -135px;
  top: -155px;
  border-top-color: rgba(56,189,248,0.46);
  animation: interfaceSpin 32s linear infinite;
}

.interface-orbit-two {
  width: 285px;
  height: 285px;
  left: -120px;
  bottom: -150px;
  border-bottom-color: rgba(236,72,153,0.30);
  animation: interfaceSpinReverse 38s linear infinite;
}

.interface-scan {
  position: absolute;
  left: -20%;
  right: -20%;
  top: -32%;
  height: 42%;
  transform: rotate(8deg);
  background: linear-gradient(180deg, transparent, rgba(56,189,248,0.10), rgba(139,92,246,0.08), transparent);
  filter: blur(2px);
  opacity: 0.7;
  animation: interfaceScan 7.6s ease-in-out infinite;
}

.interface-status-bar,
.interface-grid {
  position: relative;
  z-index: 2;
}

.interface-status-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.82rem 1rem;
  margin-bottom: 0.9rem;
  border-radius: 22px;
  background: rgba(5, 8, 22, 0.44);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--muted-strong);
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.interface-status-bar span {
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
}

.interface-status-bar i {
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 14px rgba(56,189,248,0.72);
}

.interface-status-bar > span:nth-child(1) i {
  background: var(--online-green);
  box-shadow:
    0 0 14px rgba(34,197,94,0.82),
    0 0 28px var(--online-green-soft);
}

.interface-system-set-operations .interface-status-bar > span:nth-child(2) i,
.interface-system-set-operations .interface-status-bar > span:nth-child(3) i {
  background: var(--violet);
  box-shadow:
    0 0 14px rgba(139,92,246,0.76),
    0 0 28px rgba(139,92,246,0.26);
}

.interface-system-set-media .interface-status-bar > span:nth-child(2) i,
.interface-system-set-media .interface-status-bar > span:nth-child(3) i {
  background: var(--pink);
  box-shadow:
    0 0 14px rgba(236,72,153,0.76),
    0 0 28px rgba(236,72,153,0.26);
}

.interface-grid {
  display: grid;
  grid-template-columns: minmax(190px, 0.68fr) minmax(0, 1.55fr) minmax(230px, 0.78fr);
  gap: 0.9rem;
  min-height: 31rem;
  align-items: stretch;
}

.interface-rail,
.interface-core,
.interface-side-panel {
  border: 1px solid rgba(255,255,255,0.13);
  background: rgba(5, 8, 22, 0.36);
  border-radius: 26px;
  backdrop-filter: blur(18px);
  box-shadow: inset 0 0 42px rgba(255,255,255,0.025);
}

.interface-rail {
  padding: 0.85rem;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  gap: 0.64rem;
}

.interface-rail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  min-height: 2.25rem;
}

.interface-rail-label,
.interface-output-label {
  color: var(--cyan);
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.66rem !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
}

.interface-rail-subtitle {
  margin-top: 0.18rem;
  color: rgba(199, 210, 254, 0.70) !important;
  font-size: 0.72rem !important;
  line-height: 1.1;
}

.interface-set-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  flex: 0 0 auto;
}

.interface-set-button {
  width: 1.28rem;
  height: 1.28rem;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  cursor: pointer;
  position: relative;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.interface-set-button span {
  position: absolute;
  inset: 0.34rem;
  border-radius: 50%;
  background: rgba(168, 179, 207, 0.54);
  box-shadow: 0 0 0 rgba(56,189,248,0);
}

.interface-set-button:hover,
.interface-set-button:focus-visible,
.interface-set-button.is-active {
  transform: translateY(-1px) scale(1.07);
  border-color: rgba(56,189,248,0.55);
  background: rgba(56,189,248,0.08);
  box-shadow: 0 0 18px rgba(56,189,248,0.18);
}

.interface-set-button.is-active span {
  background: var(--cyan);
  box-shadow: 0 0 16px rgba(56,189,248,0.72), 0 0 34px rgba(139,92,246,0.20);
  animation: interfaceActiveOrbPulse 2.65s ease-in-out infinite;
}

.interface-set-button:nth-child(2).is-active span {
  background: var(--violet);
  box-shadow: 0 0 16px rgba(139,92,246,0.68), 0 0 34px rgba(56,189,248,0.16);
  animation: interfaceActiveOrbPulse 2.65s ease-in-out infinite;
}

.interface-set-button:nth-child(3).is-active span {
  background: var(--pink);
  box-shadow: 0 0 16px rgba(236,72,153,0.68), 0 0 34px rgba(56,189,248,0.16);
  animation: interfaceActiveOrbPulse 2.65s ease-in-out infinite;
}

.interface-path-list {
  display: grid;
  grid-template-rows: repeat(6, minmax(3.18rem, 1fr));
  gap: 0.5rem;
  min-height: 22.58rem;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.interface-path-list.is-switching {
  opacity: 0;
  transform: translateY(8px) scale(0.992);
}

.interface-path {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.72rem;
  min-height: 3.18rem;
  padding: 0.62rem 0.72rem;
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 17px;
  color: var(--muted-strong);
  background: rgba(255,255,255,0.045);
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.interface-path:hover,
.interface-path:focus-visible,
.interface-path.is-active {
  transform: translateX(2px);
  color: var(--text);
  border-color: rgba(56,189,248,0.48);
  background: rgba(56,189,248,0.095);
  box-shadow: 0 0 22px rgba(56,189,248,0.12);
}

.interface-path span {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  color: var(--cyan);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800;
  font-size: 0.68rem;
  border-radius: 50%;
  background: rgba(56, 189, 248, 0.055);
  border: 1px solid rgba(56, 189, 248, 0.26);
  box-shadow:
    inset 0 0 14px rgba(56, 189, 248, 0.06),
    0 0 16px rgba(56, 189, 248, 0.08);
}

.interface-path span::before,
.interface-path span::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.interface-path span::before {
  inset: -5px;
  border: 1px solid rgba(56, 189, 248, 0.15);
  opacity: 0.72;
}

.interface-path span::after {
  inset: 4px;
  border: 1px solid rgba(199, 210, 254, 0.12);
}

.interface-path:hover span,
.interface-path:focus-visible span,
.interface-path.is-active span {
  color: #f8fafc;
  border-color: rgba(56, 189, 248, 0.58);
  background: rgba(56, 189, 248, 0.13);
  box-shadow:
    inset 0 0 16px rgba(56, 189, 248, 0.12),
    0 0 20px rgba(56, 189, 248, 0.22);
}

.interface-path:hover span::before,
.interface-path:focus-visible span::before,
.interface-path.is-active span::before {
  border-color: rgba(56, 189, 248, 0.38);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.13);
}

.interface-path strong {
  display: block;
  font-size: 0.84rem;
  line-height: 1.08;
}

.interface-core {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.9rem;
  min-height: 31rem;
  padding: clamp(1.25rem, 2.1vw, 1.85rem);
  overflow: hidden;
}

.interface-core::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 20%, rgba(56,189,248,0.16), transparent 38%), linear-gradient(135deg, rgba(255,255,255,0.04), transparent 48%);
  pointer-events: none;
}

.interface-core > * {
  position: relative;
  z-index: 1;
}

.interface-command-line {
  display: flex;
  align-items: center;
  min-height: 3.45rem;
  padding: 0.78rem 1rem;
  border-radius: 20px;
  color: var(--text);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(56,189,248,0.22);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  box-shadow: 0 0 30px rgba(56,189,248,0.08), inset 0 0 28px rgba(56,189,248,0.035);
  cursor: text;
}

.interface-command-line:focus-within {
  border-color: rgba(56,189,248,0.64);
  box-shadow: 0 0 34px rgba(56,189,248,0.15), inset 0 0 34px rgba(56,189,248,0.055);
}

.interface-command-prefix {
  flex: 0 0 auto;
  color: var(--cyan);
  margin-right: 0.45rem;
}

.interface-command-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  color: var(--muted-strong);
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
}

.interface-command-input::selection {
  color: #050816;
  background: var(--cyan);
}

.interface-cursor {
  flex: 0 0 auto;
  width: 0.55rem;
  height: 1.15rem;
  margin-left: 0.28rem;
  border-radius: 999px;
  background: var(--cyan);
  box-shadow: 0 0 18px rgba(56,189,248,0.7);
  animation: interfaceCursor 1s steps(2, start) infinite;
}

.interface-command-line:focus-within .interface-cursor {
  opacity: 0.38;
}

.interface-response {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.interface-response.is-switching {
  opacity: 0;
  transform: translateY(8px) scale(0.992);
}

.interface-response h3 {
  max-width: 780px;
  margin-bottom: 0.85rem;
  color: var(--text);
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.86rem, 3.45vw, 3.08rem);
  line-height: 0.96;
  letter-spacing: -0.06em;
}

.interface-response[data-interface-response] {
  min-height: 21.1rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.interface-response p:not(.panel-label) {
  max-width: 720px;
  color: var(--muted-strong);
  font-size: clamp(1rem, 1.22vw, 1.08rem);
  line-height: 1.54;
}

.interface-media-panel {
  width: 100%;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.interface-media-panel[hidden] {
  display: none;
}

.interface-media-panel:not([hidden]) {
  display: grid;
  gap: 0.82rem;
  opacity: 1;
  transform: translateY(0);
}

.interface-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.075), rgba(255,255,255,0.025)),
    radial-gradient(circle at top left, rgba(56,189,248,0.16), transparent 44%),
    rgba(5, 8, 22, 0.62);
  border: 1px solid rgba(56,189,248,0.22);
  box-shadow:
    0 22px 55px rgba(0,0,0,0.30),
    0 0 34px rgba(56,189,248,0.10),
    inset 0 0 32px rgba(255,255,255,0.025);
}

.interface-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.interface-media-frame-shell {
  position: relative;
}

.interface-media-frame-shell::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 23px;
  background: linear-gradient(135deg, rgba(56,189,248,0.28), rgba(139,92,246,0.18), rgba(236,72,153,0.10));
  opacity: 0.52;
  pointer-events: none;
}

.interface-media-frame-shell > * {
  position: relative;
  z-index: 1;
}

.interface-media-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
}

.interface-playback-status,
.interface-media-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.45rem;
  padding: 0.62rem 0.9rem;
  border-radius: 999px;
  color: var(--text);
  border: 1px solid rgba(56,189,248,0.30);
  background:
    linear-gradient(145deg, rgba(56,189,248,0.13), rgba(139,92,246,0.075)),
    rgba(255,255,255,0.045);
  box-shadow:
    0 0 28px rgba(56,189,248,0.12),
    inset 0 0 24px rgba(56,189,248,0.045);
  overflow: hidden;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.interface-playback-status::before,
.interface-media-toggle::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(56,189,248,0.22), rgba(139,92,246,0.16), transparent);
  opacity: 0.55;
  transform: translateX(-70%);
  animation: interfacePlaybackSweep 3.6s ease-in-out infinite;
  pointer-events: none;
}

.interface-playback-status > *,
.interface-media-toggle > * {
  position: relative;
  z-index: 1;
}

.interface-playback-status {
  gap: 0.48rem;
}

.interface-playback-dot {
  width: 0.54rem;
  height: 0.54rem;
  border-radius: 50%;
  background: var(--pink);
  box-shadow:
    0 0 12px rgba(236,72,153,0.88),
    0 0 26px rgba(236,72,153,0.42);
  animation: interfacePlaybackPulse 1.7s ease-in-out infinite;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.interface-playback-status.interface-playback-is-playing .interface-playback-dot {
  background: #ef4444;
  box-shadow:
    0 0 12px rgba(239,68,68,0.92),
    0 0 28px rgba(239,68,68,0.46),
    0 0 42px rgba(236,72,153,0.22);
}

.interface-media-toggle {
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.interface-media-toggle:hover,
.interface-media-toggle:focus-visible {
  transform: translateY(-2px);
  color: var(--text);
  border-color: rgba(56,189,248,0.58);
  background:
    linear-gradient(145deg, rgba(56,189,248,0.17), rgba(139,92,246,0.10)),
    rgba(255,255,255,0.055);
  box-shadow:
    0 0 32px rgba(56,189,248,0.16),
    inset 0 0 28px rgba(56,189,248,0.055);
}

.interface-system-is-media .interface-response {
  display: none;
}

.interface-system-is-media .interface-core {
  gap: 1rem;
}

.interface-system-media-expanded .interface-grid {
  grid-template-columns: minmax(190px, 0.52fr) minmax(0, 2.08fr);
}

.interface-system-media-expanded .interface-core {
  grid-column: 2 / 3;
}

.interface-system-media-expanded .interface-side-panel {
  display: none;
}

.interface-system-media-expanded .interface-video-frame {
  border-radius: 24px;
}

.interface-system-media-expanded .interface-media-frame-shell::before {
  border-radius: 25px;
  opacity: 0.68;
}

.interface-side-panel {
  min-height: 31rem;
  padding: 0.85rem;
  display: grid;
  grid-template-rows: minmax(8.25rem, auto) minmax(12rem, 1fr) minmax(4.85rem, auto);
  gap: 0.85rem;
}

.interface-output-card {
  padding: 0.9rem;
  border-radius: 19px;
  background: linear-gradient(145deg, rgba(255,255,255,0.09), rgba(255,255,255,0.035)), radial-gradient(circle at top right, rgba(56,189,248,0.11), transparent 40%);
  border: 1px solid rgba(255,255,255,0.12);
}

.interface-output-card strong,
.interface-jump-link {
  display: block;
  margin-top: 0.65rem;
  color: var(--text);
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.02rem, 1.44vw, 1.22rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.interface-system-list {
  list-style: none;
  display: grid;
  gap: 0.45rem;
  margin-top: 0.72rem;
}

.interface-system-list li {
  position: relative;
  padding-left: 1rem;
  color: var(--muted-strong);
  font-size: 0.86rem;
  line-height: 1.22;
}

.interface-system-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.46rem;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(56,189,248,0.62);
}

.interface-system-list li.is-refreshing {
  animation: interfaceSignalFlash 0.58s ease;
}

.interface-jump-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.15rem;
  margin-top: 0;
  padding: 0.9rem 1rem;
  border-radius: 999px;
  color: var(--cyan);
  text-align: center;
  background:
    linear-gradient(145deg, rgba(56,189,248,0.12), rgba(139,92,246,0.075)),
    rgba(255,255,255,0.045);
  border: 1px solid rgba(56,189,248,0.28);
  box-shadow:
    0 0 26px rgba(56,189,248,0.10),
    inset 0 0 24px rgba(56,189,248,0.035);
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.interface-jump-link::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(56,189,248,0.18), rgba(139,92,246,0.13), transparent);
  opacity: 0.42;
  transform: translateX(-72%);
  animation: interfacePlaybackSweep 4.2s ease-in-out infinite;
  pointer-events: none;
}

.interface-jump-link:hover,
.interface-jump-link:focus-visible {
  transform: translateY(-2px);
  color: var(--text);
  border-color: rgba(56,189,248,0.56);
  background:
    linear-gradient(145deg, rgba(56,189,248,0.17), rgba(139,92,246,0.10)),
    rgba(255,255,255,0.055);
  box-shadow:
    0 0 32px rgba(56,189,248,0.15),
    inset 0 0 28px rgba(56,189,248,0.05);
}

@keyframes interfaceActiveOrbPulse {
  0%, 100% {
    transform: scale(0.95);
    opacity: 0.84;
  }

  50% {
    transform: scale(1.12);
    opacity: 1;
  }
}

@keyframes interfaceSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes interfaceSpinReverse { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
@keyframes interfaceScan { 0%, 100% { transform: translateY(-50%) rotate(8deg); opacity: 0; } 18%, 76% { opacity: 0.68; } 50% { transform: translateY(255%) rotate(8deg); opacity: 0.36; } }
@keyframes interfaceCursor { 0%, 45% { opacity: 1; } 46%, 100% { opacity: 0.16; } }
@keyframes interfaceSignalFlash { 0% { border-color: rgba(56,189,248,0.18); transform: translateY(0); } 45% { border-color: rgba(56,189,248,0.60); transform: translateY(-3px); } 100% { border-color: rgba(255,255,255,0.11); transform: translateY(0); } }
@keyframes interfacePlaybackPulse { 0%, 100% { transform: scale(0.82); opacity: 0.72; } 50% { transform: scale(1.18); opacity: 1; } }
@keyframes interfacePlaybackSweep { 0%, 100% { transform: translateX(-78%); opacity: 0; } 28%, 72% { opacity: 0.62; } 50% { transform: translateX(78%); opacity: 0.42; } }

@media (max-width: 1100px) {
  .interface-header,
  .interface-grid {
    grid-template-columns: 1fr;
  }

  .interface-intro {
    justify-self: start;
  }

  .interface-shell,
  .interface-grid {
    min-height: auto;
  }

  .interface-rail {
    grid-template-columns: 1fr;
  }

  .interface-path-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(3.18rem, auto));
    min-height: auto;
  }

  .interface-side-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto;
  }
}

@media (max-width: 768px) {
  .interface-section {
    padding-top: 3.75rem;
    padding-bottom: 3.75rem;
  }

  .interface-shell {
    padding: 0.85rem;
    border-radius: 28px;
  }

  .interface-status-bar {
    justify-content: flex-start;
  }

  .interface-path-list,
  .interface-side-panel {
    grid-template-columns: 1fr;
  }

  .interface-path-list {
    grid-template-rows: repeat(6, minmax(3.9rem, auto));
  }

  .interface-core {
    min-height: 340px;
    justify-content: flex-start;
  }

  .interface-system-media-expanded .interface-grid,
  .interface-system-media-expanded .interface-core {
    grid-template-columns: 1fr;
    grid-column: auto;
  }

  .interface-system-media-expanded .interface-side-panel {
    display: grid;
  }

  .interface-media-actions {
    align-items: stretch;
  }

  .interface-playback-status,
  .interface-media-toggle {
    flex: 1 1 0;
  }
}

@media (max-width: 640px) {
  .interface-response h3 {
    font-size: clamp(2rem, 12vw, 2.85rem);
  }

  .interface-path {
    min-height: 3.9rem;
  }

  .interface-path span {
    width: 1.78rem;
    height: 1.78rem;
  }

  .interface-status-bar {
    font-size: 0.64rem;
    letter-spacing: 0.09em;
  }
}

/* =========================
   MOBILE INTERFACE HEIGHT STABILIZER
   Keeps the command interface from resizing as pathway text wraps.
========================= */

@media (max-width: 768px) {
  .interface-grid {
    align-items: stretch;
  }

  .interface-core {
    min-height: 500px;
  }

  .interface-system-is-media .interface-core {
    min-height: 430px;
  }

  .interface-system-media-expanded .interface-core {
    min-height: 470px;
  }

  .interface-response[data-interface-response] {
    min-height: 22rem;
  }

  .interface-side-panel {
    min-height: 430px;
    grid-template-rows: minmax(8.5rem, auto) minmax(10.75rem, 1fr) minmax(4.85rem, auto);
  }

  .interface-output-card {
    min-height: 8.5rem;
  }

  .interface-output-card-soft {
    min-height: 10.75rem;
  }

  .interface-jump-link {
    min-height: 4.85rem;
    display: flex;
    align-items: center;
  }
}

@media (max-width: 640px) {
  .interface-core {
    min-height: 540px;
  }

  .interface-system-is-media .interface-core {
    min-height: 415px;
  }

  .interface-system-media-expanded .interface-core {
    min-height: 455px;
  }

  .interface-response[data-interface-response] {
    min-height: 24rem;
  }

  .interface-side-panel {
    min-height: 455px;
  }

  .interface-media-actions {
    flex-direction: column;
  }

  .interface-playback-status,
  .interface-media-toggle {
    width: 100%;
  }
}

/* WInterface contextual video CTA */
.interface-jump-link.interface-jump-link-media-control[aria-pressed="true"] {
  color: var(--text);
  border-color: rgba(239,68,68,0.34);
  background:
    linear-gradient(145deg, rgba(239,68,68,0.12), rgba(56,189,248,0.085)),
    rgba(255,255,255,0.045);
  box-shadow:
    0 0 26px rgba(239,68,68,0.12),
    inset 0 0 24px rgba(56,189,248,0.035);
}

/* =========================
   SHOWCASE BAY ENHANCEMENTS
========================= */

.case-study-visual {
  position: relative;
  margin: 0 0 1rem;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(56, 189, 248, 0.2);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.075), rgba(255,255,255,0.022)),
    radial-gradient(circle at 18% 12%, rgba(56,189,248,0.16), transparent 42%);
  box-shadow:
    0 22px 52px rgba(0,0,0,0.22),
    inset 0 0 30px rgba(255,255,255,0.025);
}

.case-study-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 62%, rgba(5,8,22,0.28)),
    linear-gradient(90deg, rgba(56,189,248,0.12), transparent 24%, transparent 76%, rgba(139,92,246,0.1));
  opacity: 0.85;
}

.case-study-visual img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top center;
  transform: scale(1.01);
  transition: transform 0.34s ease, filter 0.34s ease;
}

.case-study-card:hover .case-study-visual img,
.case-study-card:focus-within .case-study-visual img {
  transform: scale(1.045);
  filter: saturate(1.08) contrast(1.04);
}

.interface-showcase-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.075), rgba(255,255,255,0.025)),
    radial-gradient(circle at top left, rgba(56,189,248,0.18), transparent 44%),
    rgba(5, 8, 22, 0.62);
  border: 1px solid rgba(56,189,248,0.22);
  box-shadow:
    0 22px 55px rgba(0,0,0,0.30),
    0 0 34px rgba(56,189,248,0.10),
    inset 0 0 32px rgba(255,255,255,0.025);
}

.interface-showcase-frame img {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  object-fit: cover;
  object-position: top center;
  transform: scale(1.01);
  transition: opacity 0.22s ease, transform 0.34s ease, filter 0.34s ease;
}

.interface-showcase-frame[data-showcase-key="workflowReplay"] img {
  object-fit: contain;
  object-position: center center;
  padding: clamp(0.55rem, 1.8vw, 1rem);
  transform: scale(1);
}

.interface-showcase-frame.is-switching img {
  opacity: 0;
  transform: scale(1.035) translateY(8px);
}

.interface-showcase-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 48%, rgba(5,8,22,0.82)),
    linear-gradient(90deg, rgba(56,189,248,0.16), transparent 28%, transparent 72%, rgba(236,72,153,0.12));
}

.interface-showcase-caption {
  position: absolute;
  left: clamp(0.9rem, 2vw, 1.25rem);
  right: clamp(0.9rem, 2vw, 1.25rem);
  bottom: clamp(0.85rem, 2vw, 1.15rem);
  z-index: 2;
  display: grid;
  gap: 0.24rem;
  max-width: 720px;
}

.interface-showcase-caption span {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  padding: 0.36rem 0.58rem;
  border-radius: 999px;
  color: var(--cyan);
  background:
    linear-gradient(145deg, rgba(5, 8, 22, 0.82), rgba(5, 8, 22, 0.58)),
    radial-gradient(circle at 12% 50%, rgba(56, 189, 248, 0.20), transparent 62%);
  border: 1px solid rgba(56, 189, 248, 0.34);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.28),
    0 0 18px rgba(56, 189, 248, 0.12),
    inset 0 0 18px rgba(56, 189, 248, 0.045);
  backdrop-filter: blur(12px);
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.42);
}

.interface-showcase-caption strong {
  color: var(--text);
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.25rem, 2.2vw, 2.1rem);
  line-height: 1;
  letter-spacing: -0.045em;
}

.interface-showcase-caption p {
  max-width: 680px;
  color: var(--muted-strong);
  font-size: 0.92rem;
  line-height: 1.42;
}

.interface-video-frame[hidden],
.interface-showcase-frame[hidden] {
  display: none;
}

@media (max-width: 768px) {
  .case-study-visual img,
  .interface-showcase-frame {
    aspect-ratio: 4 / 3;
  }

  .interface-showcase-caption p {
    display: none;
  }
}

/* Showcase Bay active status uses the pink visual signal. Video playback still switches the dot to red while playing. */
.interface-system-set-media .interface-playback-status:not(.interface-playback-is-playing) {
  border-color: rgba(236, 72, 153, 0.34);
  box-shadow:
    0 0 28px rgba(236, 72, 153, 0.13),
    inset 0 0 24px rgba(236, 72, 153, 0.05);
}

.interface-system-set-media .interface-playback-status:not(.interface-playback-is-playing)::before {
  background: linear-gradient(90deg, transparent, rgba(236, 72, 153, 0.24), rgba(139, 92, 246, 0.16), transparent);
}

/* =========================
   FINAL POLISH: SYSTEM ORBS + SHOWCASE IMAGE FRAMING
========================= */

/* Make the online status indicator read as an active glowing system signal. */
.interface-status-bar > span:nth-child(1) i {
  position: relative;
  width: 0.58rem;
  height: 0.58rem;
  background: var(--online-green);
  box-shadow:
    0 0 10px rgba(34,197,94,0.95),
    0 0 24px rgba(34,197,94,0.56),
    0 0 42px rgba(34,197,94,0.26);
  animation: interfaceOnlineOrbPulse 2.65s ease-in-out infinite;
}

.interface-status-bar > span:nth-child(1) i::after {
  content: "";
  position: absolute;
  inset: -0.42rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34,197,94,0.30), rgba(34,197,94,0.12) 38%, transparent 70%);
  opacity: 0.86;
  transform: scale(0.88);
  animation: interfaceOnlineHaloPulse 2.65s ease-in-out infinite;
  pointer-events: none;
}

/* Give every Live Systems bullet the same energetic treatment while keeping the existing cyan color. */
.interface-system-list li::before {
  width: 0.48rem;
  height: 0.48rem;
  top: 0.42rem;
  background: var(--cyan);
  box-shadow:
    0 0 10px rgba(56,189,248,0.96),
    0 0 22px rgba(56,189,248,0.56),
    0 0 38px rgba(56,189,248,0.25);
  animation: interfaceLiveSystemOrbPulse 3.1s ease-in-out infinite;
}

.interface-system-list li:nth-child(2)::before {
  animation-delay: -0.7s;
}

.interface-system-list li:nth-child(3)::before {
  animation-delay: -1.4s;
}

/* Reduce the aggressive screenshot crop on Showcase Bay images 01-04 and anchor the previews to the top edge. */
.interface-showcase-frame[data-showcase-key="mediaPreview"] img,
.interface-showcase-frame[data-showcase-key="videoWalkthroughs"] img,
.interface-showcase-frame[data-showcase-key="imageSystems"] img,
.interface-showcase-frame[data-showcase-key="demoConsole"] img {
  object-fit: contain;
  object-position: top center;
  padding: 0 clamp(0.45rem, 1.4vw, 0.85rem) clamp(0.45rem, 1.4vw, 0.85rem);
  transform: scale(1);
}

.interface-showcase-frame[data-showcase-key="mediaPreview"]::after,
.interface-showcase-frame[data-showcase-key="videoWalkthroughs"]::after,
.interface-showcase-frame[data-showcase-key="imageSystems"]::after,
.interface-showcase-frame[data-showcase-key="demoConsole"]::after,
.interface-showcase-frame[data-showcase-key="workflowReplay"]::after {
  background:
    linear-gradient(180deg, transparent 56%, rgba(5,8,22,0.76)),
    linear-gradient(90deg, rgba(56,189,248,0.12), transparent 24%, transparent 76%, rgba(236,72,153,0.10));
}

@keyframes interfaceOnlineOrbPulse {
  0%, 100% {
    transform: scale(0.95);
    opacity: 0.84;
    box-shadow:
      0 0 10px rgba(34,197,94,0.86),
      0 0 22px rgba(34,197,94,0.48),
      0 0 36px rgba(34,197,94,0.22);
  }

  50% {
    transform: scale(1.12);
    opacity: 1;
    box-shadow:
      0 0 13px rgba(34,197,94,1),
      0 0 30px rgba(34,197,94,0.66),
      0 0 52px rgba(34,197,94,0.32);
  }
}

@keyframes interfaceOnlineHaloPulse {
  0%, 100% {
    transform: scale(0.82);
    opacity: 0.44;
  }

  50% {
    transform: scale(1.08);
    opacity: 0.9;
  }
}

@keyframes interfaceLiveSystemOrbPulse {
  0%, 100% {
    transform: scale(0.94);
    opacity: 0.78;
    box-shadow:
      0 0 9px rgba(56,189,248,0.86),
      0 0 20px rgba(56,189,248,0.48),
      0 0 34px rgba(56,189,248,0.22);
  }

  50% {
    transform: scale(1.12);
    opacity: 1;
    box-shadow:
      0 0 12px rgba(56,189,248,1),
      0 0 28px rgba(56,189,248,0.66),
      0 0 48px rgba(56,189,248,0.32);
  }
}

@media (prefers-reduced-motion: reduce) {
  .interface-status-bar > span:nth-child(1) i,
  .interface-status-bar > span:nth-child(1) i::after,
  .interface-system-list li::before {
    animation: none;
  }
}

/* =========================
   WINTERFACE ONLINE/OFFLINE TOGGLE
   Lightweight performance mode for mobile and repeated interaction.
========================= */

.interface-system-toggle {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
  min-height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: inherit;
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.interface-system-toggle:hover,
.interface-system-toggle:focus-visible {
  color: var(--text);
}

.interface-system-toggle i {
  position: relative;
  flex: 0 0 auto;
  width: 0.58rem;
  height: 0.58rem;
  border-radius: 50%;
  background: var(--online-green);
  box-shadow:
    0 0 10px rgba(34,197,94,0.95),
    0 0 24px rgba(34,197,94,0.56),
    0 0 42px rgba(34,197,94,0.26);
  animation: interfaceOnlineOrbPulse 2.65s ease-in-out infinite;
}

.interface-system-toggle i::after {
  content: "";
  position: absolute;
  inset: -0.42rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34,197,94,0.30), rgba(34,197,94,0.12) 38%, transparent 70%);
  opacity: 0.86;
  transform: scale(0.88);
  animation: interfaceOnlineHaloPulse 2.65s ease-in-out infinite;
  pointer-events: none;
}

body.winterface-offline .interface-system-toggle i {
  background: #ef4444;
  box-shadow:
    0 0 10px rgba(239,68,68,0.88),
    0 0 22px rgba(239,68,68,0.46),
    0 0 38px rgba(239,68,68,0.22);
  animation: none;
}

body.winterface-offline .interface-system-toggle i::after {
  background: radial-gradient(circle, rgba(239,68,68,0.28), rgba(239,68,68,0.10) 38%, transparent 70%);
  opacity: 0.58;
  animation: none;
}

/* Match the original first status orb selector now that the first status item is a button. */
.interface-status-bar > .interface-system-toggle i {
  position: relative;
  width: 0.58rem;
  height: 0.58rem;
}

.interface-status-bar > .interface-system-toggle i::after {
  content: "";
}

/* Offline mode keeps the interface usable while reducing decorative work. */
body.winterface-offline .interface-orbit,
body.winterface-offline .interface-scan,
body.winterface-offline .interface-cursor,
body.winterface-offline .interface-playback-status::before,
body.winterface-offline .interface-media-toggle::before,
body.winterface-offline .interface-jump-link::before,
body.winterface-offline .interface-playback-dot,
body.winterface-offline .interface-system-list li::before {
  animation: none !important;
}

body.winterface-offline .interface-ambient {
  opacity: 0.38;
}

body.winterface-offline .interface-shell::after {
  opacity: 0.38;
}

body.winterface-offline .interface-system-list li::before {
  box-shadow:
    0 0 7px rgba(56,189,248,0.60),
    0 0 14px rgba(56,189,248,0.24);
}

body.winterface-offline .interactive-card::after {
  opacity: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .interface-system-toggle i,
  .interface-system-toggle i::after {
    animation: none !important;
  }
}

/* =========================
   RIGHT STATUS ORB POLISH
   Keeps the module-count status orb glowing/pulsing with its contextual color while WInterface is online.
========================= */

.interface-status-bar > span:nth-child(3) i {
  position: relative;
  width: 0.58rem;
  height: 0.58rem;
  color: var(--cyan);
  animation: interfaceStatusOrbPulse 2.65s ease-in-out infinite;
}

.interface-status-bar > span:nth-child(3) i::after {
  content: "";
  position: absolute;
  inset: -0.42rem;
  border-radius: 50%;
  background: radial-gradient(circle, currentColor 0%, currentColor 38%, transparent 70%);
  opacity: 0.18;
  transform: scale(0.88);
  animation: interfaceStatusHaloPulse 2.65s ease-in-out infinite;
  pointer-events: none;
}

.interface-system-set-operations .interface-status-bar > span:nth-child(3) i {
  color: var(--violet);
}

.interface-system-set-media .interface-status-bar > span:nth-child(3) i {
  color: var(--pink);
}

body.winterface-offline .interface-status-bar > span:nth-child(3) i,
body.winterface-offline .interface-status-bar > span:nth-child(3) i::after {
  animation: none !important;
}

@keyframes interfaceStatusOrbPulse {
  0%, 100% {
    transform: scale(0.95);
    opacity: 0.84;
  }

  50% {
    transform: scale(1.12);
    opacity: 1;
  }
}

@keyframes interfaceStatusHaloPulse {
  0%, 100% {
    transform: scale(0.82);
    opacity: 0.18;
  }

  50% {
    transform: scale(1.08);
    opacity: 0.34;
  }
}

@media (prefers-reduced-motion: reduce) {
  .interface-set-button.is-active span,
  .interface-status-bar > span:nth-child(3) i,
  .interface-status-bar > span:nth-child(3) i::after {
    animation: none !important;
  }
}



/* =========================
   WINTERFACE CONTEXTUAL BAY ACCENTS
   Syncs module card borders and numbered circles to the active bay color.
   Active Pathways = cyan, Operational Layer = violet, Showcase Bay = pink.
========================= */

.interface-shell {
  --interface-accent: var(--cyan);
  --interface-accent-rgb: 56, 189, 248;
}

.interface-system-set-operations {
  --interface-accent: var(--violet);
  --interface-accent-rgb: 139, 92, 246;
}

.interface-system-set-media {
  --interface-accent: var(--pink);
  --interface-accent-rgb: 236, 72, 153;
}

/* Module cards use a subtle version of the active bay color by default. */
.interface-path {
  border-color: rgba(var(--interface-accent-rgb), 0.22);
  background:
    linear-gradient(145deg, rgba(var(--interface-accent-rgb), 0.055), rgba(255,255,255,0.035)),
    rgba(255,255,255,0.035);
}

.interface-path:hover,
.interface-path:focus-visible,
.interface-path.is-active {
  color: var(--text);
  border-color: rgba(var(--interface-accent-rgb), 0.58);
  background:
    linear-gradient(145deg, rgba(var(--interface-accent-rgb), 0.13), rgba(255,255,255,0.045)),
    rgba(var(--interface-accent-rgb), 0.075);
  box-shadow:
    0 0 22px rgba(var(--interface-accent-rgb), 0.14),
    inset 0 0 24px rgba(var(--interface-accent-rgb), 0.035);
}

/* Numbered circles inherit the same active bay color. */
.interface-path span {
  color: var(--interface-accent);
  background: rgba(var(--interface-accent-rgb), 0.07);
  border-color: rgba(var(--interface-accent-rgb), 0.34);
  box-shadow:
    inset 0 0 14px rgba(var(--interface-accent-rgb), 0.08),
    0 0 16px rgba(var(--interface-accent-rgb), 0.10);
}

.interface-path span::before {
  border-color: rgba(var(--interface-accent-rgb), 0.18);
}

.interface-path span::after {
  border-color: rgba(var(--interface-accent-rgb), 0.16);
}

.interface-path:hover span,
.interface-path:focus-visible span,
.interface-path.is-active span {
  color: #f8fafc;
  border-color: rgba(var(--interface-accent-rgb), 0.66);
  background: rgba(var(--interface-accent-rgb), 0.16);
  box-shadow:
    inset 0 0 16px rgba(var(--interface-accent-rgb), 0.15),
    0 0 20px rgba(var(--interface-accent-rgb), 0.26),
    0 0 38px rgba(var(--interface-accent-rgb), 0.13);
}

.interface-path:hover span::before,
.interface-path:focus-visible span::before,
.interface-path.is-active span::before {
  border-color: rgba(var(--interface-accent-rgb), 0.44);
  box-shadow: 0 0 18px rgba(var(--interface-accent-rgb), 0.16);
}

/* Keep the rail labels aligned with the active bay without changing layout. */
.interface-rail-label,
.interface-output-label {
  color: var(--interface-accent);
}

/* Match the command prefix and input caret to the active bay for a subtle cohesive cue. */
.interface-command-prefix,
.interface-showcase-caption span {
  color: var(--interface-accent);
}

.interface-command-line {
  border-color: rgba(var(--interface-accent-rgb), 0.24);
  box-shadow:
    0 0 30px rgba(var(--interface-accent-rgb), 0.08),
    inset 0 0 28px rgba(var(--interface-accent-rgb), 0.035);
}

.interface-command-line:focus-within {
  border-color: rgba(var(--interface-accent-rgb), 0.64);
  box-shadow:
    0 0 34px rgba(var(--interface-accent-rgb), 0.15),
    inset 0 0 34px rgba(var(--interface-accent-rgb), 0.055);
}

.interface-cursor {
  background: var(--interface-accent);
  box-shadow: 0 0 18px rgba(var(--interface-accent-rgb), 0.70);
}

/* =========================
   WINTERFACE REFINEMENT PATCH
   Contextual rail borders with stable cyan core controls.
========================= */

/* Core WInterface color logic:
   - contextual colors apply to rail/module state indicators
   - cyan remains the stable system color for command, CTA, output, and readable content */
.interface-section {
  --interface-accent-rgb: 56, 189, 248;
  --interface-accent: var(--cyan);
  --interface-accent-text: #7dd3fc;
  --interface-accent-soft: rgba(56, 189, 248, 0.095);
  --interface-accent-border: rgba(56, 189, 248, 0.48);
  --interface-accent-border-strong: rgba(56, 189, 248, 0.62);
  --interface-accent-glow: rgba(56, 189, 248, 0.22);
}

.interface-system-set-operations {
  --interface-accent-rgb: 139, 92, 246;
  --interface-accent: var(--violet);
  --interface-accent-text: #b79cff;
  --interface-accent-soft: rgba(139, 92, 246, 0.105);
  --interface-accent-border: rgba(139, 92, 246, 0.52);
  --interface-accent-border-strong: rgba(167, 139, 250, 0.68);
  --interface-accent-glow: rgba(139, 92, 246, 0.24);
}

.interface-system-set-media {
  --interface-accent-rgb: 236, 72, 153;
  --interface-accent: var(--pink);
  --interface-accent-text: #ff8ac6;
  --interface-accent-soft: rgba(236, 72, 153, 0.105);
  --interface-accent-border: rgba(236, 72, 153, 0.52);
  --interface-accent-border-strong: rgba(255, 138, 198, 0.68);
  --interface-accent-glow: rgba(236, 72, 153, 0.24);
}

/* Active module/pathway card borders inherit only the current bay accent. */
.interface-path:hover,
.interface-path:focus-visible,
.interface-path.is-active {
  border-color: var(--interface-accent-border);
  background:
    linear-gradient(145deg, var(--interface-accent-soft), rgba(255,255,255,0.045)),
    rgba(255,255,255,0.035);
  box-shadow:
    0 0 0 1px rgba(var(--interface-accent-rgb), 0.045),
    0 0 22px var(--interface-accent-glow),
    inset 0 0 22px rgba(var(--interface-accent-rgb), 0.035);
}

/* Numbered pathway/module circles inherit the bay accent but keep stronger numeral readability. */
.interface-path span {
  color: var(--interface-accent-text);
  font-weight: 900;
  letter-spacing: 0.01em;
  text-shadow:
    0 1px 2px rgba(0,0,0,0.62),
    0 0 9px rgba(var(--interface-accent-rgb), 0.52);
  background:
    radial-gradient(circle at 36% 28%, rgba(248,250,252,0.24), transparent 25%),
    radial-gradient(circle at 50% 52%, rgba(var(--interface-accent-rgb),0.18), rgba(var(--interface-accent-rgb),0.065) 58%, rgba(5,8,22,0.20) 100%);
  border-color: rgba(var(--interface-accent-rgb), 0.32);
  box-shadow:
    inset 0 0 12px rgba(var(--interface-accent-rgb), 0.10),
    0 0 14px rgba(var(--interface-accent-rgb), 0.13);
}

.interface-path span::before {
  border-color: rgba(var(--interface-accent-rgb), 0.22);
  opacity: 0.48;
}

.interface-path span::after {
  border-color: rgba(248, 250, 252, 0.13);
}

.interface-path:hover span,
.interface-path:focus-visible span,
.interface-path.is-active span {
  color: #f8fafc;
  border-color: var(--interface-accent-border-strong);
  background:
    radial-gradient(circle at 36% 28%, rgba(248,250,252,0.30), transparent 25%),
    radial-gradient(circle at 50% 52%, rgba(var(--interface-accent-rgb),0.28), rgba(var(--interface-accent-rgb),0.11) 58%, rgba(5,8,22,0.16) 100%);
  text-shadow:
    0 1px 2px rgba(0,0,0,0.72),
    0 0 10px rgba(var(--interface-accent-rgb), 0.66);
  box-shadow:
    inset 0 0 15px rgba(var(--interface-accent-rgb), 0.17),
    0 0 18px rgba(var(--interface-accent-rgb), 0.25),
    0 0 34px rgba(var(--interface-accent-rgb), 0.13);
}

.interface-path:hover span::before,
.interface-path:focus-visible span::before,
.interface-path.is-active span::before {
  border-color: rgba(var(--interface-accent-rgb), 0.40);
  opacity: 0.55;
  box-shadow:
    0 0 16px rgba(var(--interface-accent-rgb), 0.16);
}

/* Keep core command input permanently cyan for readability and hierarchy. */
.interface-command-line {
  position: relative;
  overflow: hidden;
  border-color: rgba(56,189,248,0.42) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.072), rgba(255,255,255,0.032)),
    radial-gradient(circle at left center, rgba(56,189,248,0.11), transparent 42%),
    rgba(255,255,255,0.028) !important;
  box-shadow:
    0 0 0 1px rgba(56,189,248,0.08),
    0 0 24px rgba(56,189,248,0.16),
    inset 0 0 28px rgba(56,189,248,0.062) !important;
}

.interface-command-line::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(56,189,248,0.22), rgba(139,92,246,0.12), transparent);
  opacity: 0.42;
  transform: translateX(-78%);
  animation: interfaceCommandLineSweep 5.4s ease-in-out infinite;
  pointer-events: none;
}

.interface-command-line > * {
  position: relative;
  z-index: 1;
}

.interface-command-line:focus-within {
  border-color: rgba(56,189,248,0.72) !important;
  box-shadow:
    0 0 0 1px rgba(56,189,248,0.14),
    0 0 32px rgba(56,189,248,0.24),
    inset 0 0 36px rgba(56,189,248,0.09) !important;
}

.interface-command-prefix,
.interface-cursor {
  color: var(--cyan) !important;
}

.interface-cursor {
  background: var(--cyan) !important;
  box-shadow: 0 0 18px rgba(56,189,248,0.70) !important;
}

/* Keep right-side system output and media-content text in the stable cyan/white palette. */
.interface-output-label,
.interface-showcase-caption span,
.interface-response .panel-label,
.interface-system-set-operations .interface-output-label,
.interface-system-set-media .interface-output-label,
.interface-system-set-operations .interface-showcase-caption span,
.interface-system-set-media .interface-showcase-caption span,
.interface-system-set-operations .interface-response .panel-label,
.interface-system-set-media .interface-response .panel-label {
  color: var(--cyan) !important;
}

.interface-system-list li::before,
.interface-system-set-operations .interface-system-list li::before,
.interface-system-set-media .interface-system-list li::before {
  background: var(--cyan) !important;
  box-shadow:
    0 0 10px rgba(56,189,248,0.96),
    0 0 22px rgba(56,189,248,0.56),
    0 0 38px rgba(56,189,248,0.25) !important;
}

.interface-system-list li,
.interface-showcase-caption p,
.interface-response p:not(.panel-label) {
  color: var(--muted-strong);
}

/* Keep the far-right CTA/player button permanently cyan, with the same stronger border language as the command line. */
.interface-jump-link,
.interface-system-set-operations .interface-jump-link,
.interface-system-set-media .interface-jump-link {
  color: var(--cyan) !important;
  border-color: rgba(56,189,248,0.42) !important;
  background:
    linear-gradient(145deg, rgba(56,189,248,0.14), rgba(139,92,246,0.075)),
    rgba(255,255,255,0.045) !important;
  box-shadow:
    0 0 0 1px rgba(56,189,248,0.08),
    0 0 24px rgba(56,189,248,0.15),
    inset 0 0 26px rgba(56,189,248,0.055) !important;
}

.interface-jump-link::before,
.interface-system-set-operations .interface-jump-link::before,
.interface-system-set-media .interface-jump-link::before {
  background: linear-gradient(90deg, transparent, rgba(56,189,248,0.22), rgba(139,92,246,0.13), transparent) !important;
  opacity: 0.48;
}

.interface-jump-link:hover,
.interface-jump-link:focus-visible,
.interface-system-set-operations .interface-jump-link:hover,
.interface-system-set-operations .interface-jump-link:focus-visible,
.interface-system-set-media .interface-jump-link:hover,
.interface-system-set-media .interface-jump-link:focus-visible {
  color: var(--text) !important;
  border-color: rgba(56,189,248,0.68) !important;
  background:
    linear-gradient(145deg, rgba(56,189,248,0.18), rgba(139,92,246,0.10)),
    rgba(255,255,255,0.055) !important;
  box-shadow:
    0 0 0 1px rgba(56,189,248,0.12),
    0 0 32px rgba(56,189,248,0.21),
    inset 0 0 30px rgba(56,189,248,0.07) !important;
}

/* Keep video-control pressed state cyan/white, not red/pink, so the right-side CTA stays visually stable. */
.interface-jump-link.interface-jump-link-media-control[aria-pressed="true"] {
  color: var(--text) !important;
  border-color: rgba(56,189,248,0.56) !important;
  background:
    linear-gradient(145deg, rgba(56,189,248,0.16), rgba(139,92,246,0.09)),
    rgba(255,255,255,0.052) !important;
  box-shadow:
    0 0 0 1px rgba(56,189,248,0.10),
    0 0 28px rgba(56,189,248,0.18),
    inset 0 0 26px rgba(56,189,248,0.062) !important;
}

/* Keep the media/player controls cyan; the bay color is expressed through the left rail only. */
.interface-media-toggle,
.interface-system-set-operations .interface-media-toggle,
.interface-system-set-media .interface-media-toggle,
.interface-playback-status,
.interface-system-set-operations .interface-playback-status,
.interface-system-set-media .interface-playback-status:not(.interface-playback-is-playing) {
  color: var(--text);
  border-color: rgba(56,189,248,0.34) !important;
  background:
    linear-gradient(145deg, rgba(56,189,248,0.13), rgba(139,92,246,0.075)),
    rgba(255,255,255,0.045) !important;
  box-shadow:
    0 0 28px rgba(56,189,248,0.12),
    inset 0 0 24px rgba(56,189,248,0.045) !important;
}

.interface-media-toggle::before,
.interface-system-set-media .interface-playback-status:not(.interface-playback-is-playing)::before {
  background: linear-gradient(90deg, transparent, rgba(56,189,248,0.22), rgba(139,92,246,0.16), transparent) !important;
}

@keyframes interfaceCommandLineSweep {
  0%, 100% {
    transform: translateX(-82%);
    opacity: 0;
  }

  28%, 72% {
    opacity: 0.46;
  }

  50% {
    transform: translateX(82%);
    opacity: 0.32;
  }
}

@media (prefers-reduced-motion: reduce) {
  .interface-command-line::before {
    animation: none !important;
    opacity: 0.18;
    transform: none;
  }
}

/* =========================
   WINTERFACE MEDIA CONTROL BOX ALIGNMENT PATCH
   Converts the two middle media controls to a boxy-rounded style and centers both labels.
========================= */

.interface-media-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch !important;
  justify-content: stretch !important;
  gap: 0.85rem;
}

.interface-playback-status,
.interface-media-toggle,
.interface-system-set-operations .interface-playback-status,
.interface-system-set-operations .interface-media-toggle,
.interface-system-set-media .interface-playback-status,
.interface-system-set-media .interface-playback-status:not(.interface-playback-is-playing),
.interface-system-set-media .interface-media-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
  min-height: 54px;
  padding: 0.9rem 1.15rem;
  border-radius: 16px !important;
  text-align: center !important;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.interface-playback-status span,
.interface-media-toggle span {
  text-align: center !important;
}

.interface-playback-status {
  gap: 0.55rem;
}

.interface-playback-dot {
  flex: 0 0 auto;
  margin-right: 0;
}

.interface-playback-status:hover,
.interface-media-toggle:hover,
.interface-media-toggle:focus-visible {
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .interface-media-actions {
    grid-template-columns: 1fr;
  }

  .interface-playback-status,
  .interface-media-toggle {
    width: 100%;
  }
}

/* =========================
   WINTERFACE STATUS TELEMETRY CAPSULE PATCH
   Gives the center and right WInterface status indicators a subtle capsule treatment.
   Keeps the Online/Paused control visually primary.
   CSS-only: no HTML or JavaScript changes.
========================= */

/* Secondary telemetry chips: mode status and connected-path count. */
.interface-status-bar > span {
  position: relative;
  min-height: 2.05rem;
  padding: 0.42rem 0.72rem;
  border-radius: 999px;
  border: 1px solid rgba(56, 189, 248, 0.16);
  background:
    linear-gradient(145deg, rgba(56, 189, 248, 0.055), rgba(139, 92, 246, 0.035)),
    rgba(255, 255, 255, 0.026);
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.026),
    0 0 14px rgba(56, 189, 248, 0.060),
    inset 0 0 16px rgba(56, 189, 248, 0.020);
  overflow: hidden;
}

/* Keep the center indicator intentionally lighter than the Online capsule. */
.interface-status-bar > span:nth-of-type(1) {
  border-color: rgba(56, 189, 248, 0.14);
  background:
    linear-gradient(145deg, rgba(56, 189, 248, 0.045), rgba(139, 92, 246, 0.028)),
    rgba(255, 255, 255, 0.020);
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.020),
    0 0 12px rgba(56, 189, 248, 0.048),
    inset 0 0 14px rgba(56, 189, 248, 0.018);
}

/* Give the right metric chip slightly more presence because it represents a count/readout. */
.interface-status-bar > span:nth-of-type(2) {
  border-color: rgba(56, 189, 248, 0.22);
  background:
    linear-gradient(145deg, rgba(56, 189, 248, 0.070), rgba(139, 92, 246, 0.040)),
    radial-gradient(circle at 12% 50%, rgba(56, 189, 248, 0.075), transparent 52%),
    rgba(255, 255, 255, 0.028);
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.034),
    0 0 18px rgba(56, 189, 248, 0.090),
    inset 0 0 18px rgba(56, 189, 248, 0.026);
}

/* Subtle inner glass pass across the secondary chips. */
.interface-status-bar > span::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.095), rgba(139, 92, 246, 0.060), transparent);
  opacity: 0.34;
  transform: translateX(-76%);
  animation: interfacePlaybackSweep 5.2s ease-in-out infinite;
  pointer-events: none;
}

.interface-status-bar > span > * {
  position: relative;
  z-index: 1;
}

/* Contextualize the secondary chips by active bay without overpowering the main Online control. */
.interface-system-set-operations .interface-status-bar > span {
  border-color: rgba(139, 92, 246, 0.20);
  background:
    linear-gradient(145deg, rgba(139, 92, 246, 0.060), rgba(56, 189, 248, 0.026)),
    rgba(255, 255, 255, 0.024);
  box-shadow:
    0 0 0 1px rgba(139, 92, 246, 0.028),
    0 0 15px rgba(139, 92, 246, 0.075),
    inset 0 0 16px rgba(139, 92, 246, 0.022);
}

.interface-system-set-operations .interface-status-bar > span::before {
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.11), rgba(56, 189, 248, 0.06), transparent);
}

.interface-system-set-media .interface-status-bar > span {
  border-color: rgba(236, 72, 153, 0.20);
  background:
    linear-gradient(145deg, rgba(236, 72, 153, 0.060), rgba(56, 189, 248, 0.026)),
    rgba(255, 255, 255, 0.024);
  box-shadow:
    0 0 0 1px rgba(236, 72, 153, 0.028),
    0 0 15px rgba(236, 72, 153, 0.075),
    inset 0 0 16px rgba(236, 72, 153, 0.022);
}

.interface-system-set-media .interface-status-bar > span::before {
  background: linear-gradient(90deg, transparent, rgba(236, 72, 153, 0.11), rgba(56, 189, 248, 0.06), transparent);
}

/* Preserve responsive wrapping behavior by keeping the chips compact on smaller screens. */
@media (max-width: 768px) {
  .interface-status-bar > span {
    min-height: 1.95rem;
    padding: 0.38rem 0.62rem;
  }
}

@media (max-width: 640px) {
  .interface-status-bar > span {
    padding: 0.36rem 0.54rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .interface-status-bar > span::before {
    animation: none !important;
    opacity: 0.16;
    transform: none;
  }
}

/* =========================
   WINTERFACE SIGNAL DETAIL TELEMETRY PATCH
   Adds a subtle lower telemetry readout to the first 12 WInterface cards.
   Showcase Bay/media modules stay unchanged because they use the media panel.
========================= */

.interface-signal-detail {
  width: 100%;
  max-width: 780px;
  margin-top: auto;
  padding-top: clamp(1rem, 2.4vw, 2.3rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.68rem;
}

.interface-signal-detail[hidden] {
  display: none !important;
}

.interface-signal-chip {
  position: relative;
  min-height: 5.35rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.38rem;
  padding: 0.78rem 0.82rem 0.8rem;
  border-radius: 16px;
  border: 1px solid rgba(56, 189, 248, 0.26);
  background:
    linear-gradient(145deg, rgba(56, 189, 248, 0.075), rgba(139, 92, 246, 0.042)),
    radial-gradient(circle at 12% 24%, rgba(56, 189, 248, 0.10), transparent 46%),
    rgba(255, 255, 255, 0.032);
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.035),
    0 14px 34px rgba(0, 0, 0, 0.18),
    0 0 20px rgba(56, 189, 248, 0.070),
    inset 0 0 18px rgba(56, 189, 248, 0.030);
  overflow: hidden;
}

.interface-signal-chip::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.12), rgba(139, 92, 246, 0.07), transparent);
  opacity: 0.32;
  transform: translateX(-76%);
  animation: interfacePlaybackSweep 5.8s ease-in-out infinite;
  pointer-events: none;
}

.interface-signal-chip::after {
  content: "";
  position: absolute;
  left: 0.82rem;
  top: 0.82rem;
  width: 0.36rem;
  height: 0.36rem;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow:
    0 0 10px rgba(56, 189, 248, 0.84),
    0 0 20px rgba(56, 189, 248, 0.28);
  pointer-events: none;
}

.interface-signal-chip span,
.interface-signal-chip strong {
  position: relative;
  z-index: 1;
}

.interface-signal-chip span {
  display: block;
  padding-left: 0.74rem;
  color: var(--cyan);
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(0.56rem, 0.72vw, 0.64rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0.145em;
  text-transform: uppercase;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.72),
    0 0 10px rgba(56, 189, 248, 0.30);
}

.interface-signal-chip strong {
  display: block;
  color: var(--muted-strong);
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(0.82rem, 1.05vw, 0.98rem);
  font-weight: 850;
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.interface-system-is-media .interface-signal-detail {
  display: none !important;
}

.interface-response[data-interface-response] {
  gap: 0;
}

.interface-response p:not(.panel-label) {
  margin-bottom: 0;
}

@media (max-width: 1100px) {
  .interface-signal-detail {
    margin-top: 1.2rem;
    padding-top: 0;
  }
}

@media (max-width: 768px) {
  .interface-signal-detail {
    grid-template-columns: 1fr;
    gap: 0.52rem;
    margin-top: 1.1rem;
  }

  .interface-signal-chip {
    min-height: 4.25rem;
    padding: 0.68rem 0.78rem;
  }
}

@media (max-width: 640px) {
  .interface-signal-chip span {
    font-size: 0.56rem;
    letter-spacing: 0.12em;
  }

  .interface-signal-chip strong {
    font-size: 0.86rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .interface-signal-chip::before {
    animation: none !important;
    opacity: 0.14;
    transform: none;
  }
}

/* =========================
   WINTERFACE SIGNAL DETAIL PROFESSIONAL COPY REFINEMENT
   Refines the telemetry chip typography for the Problem / Method / Result model.
========================= */

.interface-signal-chip {
  min-height: 5rem;
  justify-content: flex-start;
  padding-top: 0.92rem;
}

.interface-signal-chip span {
  font-size: clamp(0.58rem, 0.72vw, 0.65rem);
  letter-spacing: 0.155em;
}

.interface-signal-chip strong {
  max-width: 13.5rem;
  font-size: clamp(0.86rem, 1.02vw, 0.98rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

@media (max-width: 768px) {
  .interface-signal-chip {
    min-height: 4.15rem;
    justify-content: center;
  }

  .interface-signal-chip strong {
    max-width: none;
  }
}

/* =========================
   WINTERFACE RIGHT PANEL HEADING AND LIVE SYSTEMS RESTORE PATCH
   Restores larger Primary Signal / Live Systems labels and the prior Live Systems list indentation.
   CSS-only: no HTML or JavaScript changes.
========================= */

.interface-output-label,
.interface-system-set-operations .interface-output-label,
.interface-system-set-media .interface-output-label {
  font-size: clamp(0.78rem, 0.92vw, 0.86rem) !important;
  font-weight: 950 !important;
  letter-spacing: 0.145em !important;
  line-height: 1.05;
  white-space: nowrap;
  color: var(--cyan) !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.72),
    0 0 11px rgba(56, 189, 248, 0.50),
    0 0 22px rgba(56, 189, 248, 0.18);
}

.interface-system-list {
  padding-left: 0.28rem;
}

.interface-system-list li {
  padding-left: 1.22rem;
}

.interface-system-list li::before {
  left: 0.10rem;
}

@media (max-width: 768px) {
  .interface-output-label,
  .interface-system-set-operations .interface-output-label,
  .interface-system-set-media .interface-output-label {
    font-size: clamp(0.73rem, 2.65vw, 0.80rem) !important;
    letter-spacing: 0.125em !important;
  }
}

@media (max-width: 640px) {
  .interface-system-list {
    padding-left: 0.18rem;
  }

  .interface-system-list li {
    padding-left: 1.14rem;
  }

  .interface-system-list li::before {
    left: 0.06rem;
  }
}

@media (max-width: 420px) {
  .interface-output-label,
  .interface-system-set-operations .interface-output-label,
  .interface-system-set-media .interface-output-label {
    font-size: 0.70rem !important;
    letter-spacing: 0.095em !important;
  }
}

/* =========================
   WINTERFACE SIGNAL DETAIL CHIP HOVER PATCH
   Adds controlled hover/focus bounce effects to the new Problem / Method / Result telemetry chips.
   CSS-only: no HTML or JavaScript changes.
========================= */

.interface-signal-chip {
  transform: translateY(0) scale(1);
  transition:
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease;
  will-change: transform;
}

.interface-signal-chip:hover,
.interface-signal-chip:focus-within {
  transform: translateY(-6px) scale(1.018);
  border-color: rgba(56, 189, 248, 0.58);
  background:
    linear-gradient(145deg, rgba(56, 189, 248, 0.115), rgba(139, 92, 246, 0.065)),
    radial-gradient(circle at 12% 24%, rgba(56, 189, 248, 0.145), transparent 48%),
    rgba(255, 255, 255, 0.048);
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.095),
    0 20px 42px rgba(0, 0, 0, 0.22),
    0 0 28px rgba(56, 189, 248, 0.16),
    0 0 46px rgba(139, 92, 246, 0.085),
    inset 0 0 22px rgba(56, 189, 248, 0.045);
}

.interface-signal-chip:hover::before,
.interface-signal-chip:focus-within::before {
  opacity: 0.52;
}

.interface-signal-chip:hover::after,
.interface-signal-chip:focus-within::after {
  box-shadow:
    0 0 12px rgba(56, 189, 248, 0.98),
    0 0 26px rgba(56, 189, 248, 0.42),
    0 0 42px rgba(56, 189, 248, 0.18);
}

.interface-signal-chip:hover span,
.interface-signal-chip:focus-within span {
  color: #7dd3fc;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.78),
    0 0 12px rgba(56, 189, 248, 0.46);
}

.interface-signal-chip:hover strong,
.interface-signal-chip:focus-within strong {
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  .interface-signal-chip,
  .interface-signal-chip:hover,
  .interface-signal-chip:focus-within {
    transform: none !important;
    transition:
      border-color 0.01s linear,
      background 0.01s linear,
      box-shadow 0.01s linear;
    will-change: auto;
  }
}

/* =========================
   WINTERFACE OPERATIONAL TELEMETRY PURPLE ORB PATCH
   Changes the Problem / Method / Result telemetry chip orbs to purple in Operational Layer mode.
   CSS-only: no HTML or JavaScript changes.
========================= */

.interface-system-set-operations .interface-signal-chip {
  border-color: rgba(139, 92, 246, 0.30);
  background:
    linear-gradient(145deg, rgba(139, 92, 246, 0.085), rgba(56, 189, 248, 0.038)),
    radial-gradient(circle at 12% 24%, rgba(139, 92, 246, 0.13), transparent 46%),
    rgba(255, 255, 255, 0.032);
  box-shadow:
    0 0 0 1px rgba(139, 92, 246, 0.040),
    0 14px 34px rgba(0, 0, 0, 0.18),
    0 0 20px rgba(139, 92, 246, 0.080),
    inset 0 0 18px rgba(139, 92, 246, 0.032);
}

.interface-system-set-operations .interface-signal-chip::before {
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.13), rgba(56, 189, 248, 0.07), transparent);
}

.interface-system-set-operations .interface-signal-chip::after {
  background: var(--violet);
  box-shadow:
    0 0 10px rgba(139, 92, 246, 0.88),
    0 0 22px rgba(139, 92, 246, 0.34);
}

.interface-system-set-operations .interface-signal-chip span {
  color: var(--violet);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.72),
    0 0 10px rgba(139, 92, 246, 0.36);
}

.interface-system-set-operations .interface-signal-chip:hover,
.interface-system-set-operations .interface-signal-chip:focus-within {
  border-color: rgba(139, 92, 246, 0.64);
  background:
    linear-gradient(145deg, rgba(139, 92, 246, 0.135), rgba(56, 189, 248, 0.060)),
    radial-gradient(circle at 12% 24%, rgba(139, 92, 246, 0.18), transparent 48%),
    rgba(255, 255, 255, 0.048);
  box-shadow:
    0 0 0 1px rgba(139, 92, 246, 0.105),
    0 20px 42px rgba(0, 0, 0, 0.22),
    0 0 30px rgba(139, 92, 246, 0.18),
    0 0 46px rgba(56, 189, 248, 0.070),
    inset 0 0 22px rgba(139, 92, 246, 0.052);
}

.interface-system-set-operations .interface-signal-chip:hover::after,
.interface-system-set-operations .interface-signal-chip:focus-within::after {
  box-shadow:
    0 0 12px rgba(139, 92, 246, 1),
    0 0 28px rgba(139, 92, 246, 0.48),
    0 0 44px rgba(139, 92, 246, 0.22);
}

.interface-system-set-operations .interface-signal-chip:hover span,
.interface-system-set-operations .interface-signal-chip:focus-within span {
  color: #a78bfa;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.78),
    0 0 12px rgba(139, 92, 246, 0.50);
}

/* =========================
   WINTERFACE BOTTOM RIGHT CTA BOXY GLASS RESTORE PATCH
   Restores the bottom-right WInterface launch button to the approved boxy-round glass style.
   Keeps Secret Intel / Pause Intel special red active behavior intact.
   CSS-only: no HTML or JavaScript changes.
========================= */

.interface-jump-link {
  min-height: 3.15rem;
  padding: 0.9rem 1rem;
  border-radius: 16px !important;
  color: var(--cyan);
  text-align: center;
  background:
    linear-gradient(145deg, rgba(56, 189, 248, 0.14), rgba(139, 92, 246, 0.085)),
    radial-gradient(circle at 18% 18%, rgba(56, 189, 248, 0.10), transparent 42%),
    rgba(255, 255, 255, 0.048);
  border: 1px solid rgba(56, 189, 248, 0.34);
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.035),
    0 14px 34px rgba(0, 0, 0, 0.22),
    0 0 28px rgba(56, 189, 248, 0.13),
    inset 0 0 24px rgba(56, 189, 248, 0.045);
  backdrop-filter: blur(18px);
}

.interface-jump-link::before {
  border-radius: inherit;
  opacity: 0.50;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.22), rgba(139, 92, 246, 0.16), transparent);
}

.interface-jump-link:hover,
.interface-jump-link:focus-visible {
  transform: translateY(-2px);
  color: var(--text);
  border-color: rgba(239, 68, 68, 0.62);
  background:
    linear-gradient(145deg, rgba(239, 68, 68, 0.19), rgba(236, 72, 153, 0.105)),
    radial-gradient(circle at 18% 18%, rgba(239, 68, 68, 0.13), transparent 44%),
    rgba(255, 255, 255, 0.055);
  box-shadow:
    0 0 0 1px rgba(239, 68, 68, 0.070),
    0 16px 38px rgba(0, 0, 0, 0.25),
    0 0 32px rgba(239, 68, 68, 0.17),
    0 0 46px rgba(236, 72, 153, 0.10),
    inset 0 0 28px rgba(239, 68, 68, 0.055);
}

/* Preserve the Secret Intel active/paused red effect while keeping the boxy-round shape. */
.interface-jump-link.interface-jump-link-media-control[aria-pressed="true"] {
  border-radius: 16px !important;
  color: var(--text);
  border-color: rgba(239, 68, 68, 0.48);
  background:
    linear-gradient(145deg, rgba(239, 68, 68, 0.18), rgba(236, 72, 153, 0.105)),
    radial-gradient(circle at 18% 18%, rgba(239, 68, 68, 0.12), transparent 44%),
    rgba(255, 255, 255, 0.050);
  box-shadow:
    0 0 0 1px rgba(239, 68, 68, 0.060),
    0 16px 38px rgba(0, 0, 0, 0.24),
    0 0 30px rgba(239, 68, 68, 0.16),
    0 0 46px rgba(236, 72, 153, 0.10),
    inset 0 0 26px rgba(239, 68, 68, 0.055);
}

.interface-jump-link.interface-jump-link-media-control[aria-pressed="true"]::before {
  background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.26), rgba(236, 72, 153, 0.18), transparent);
}

/* Keep the launch button comfortable on mobile without reverting to a pill shape. */
@media (max-width: 640px) {
  .interface-jump-link {
    border-radius: 16px !important;
  }
}

/* =========================
   WINTERFACE BOTTOM RIGHT CTA RED HOVER FORCE PATCH
   Restores the approved red hover behavior on the bottom-right WInterface launch button.
   Uses explicit priority because earlier button/background rules can otherwise win in the cascade.
   CSS-only: no HTML or JavaScript changes.
========================= */

.interface-jump-link:hover,
.interface-jump-link:focus-visible,
.interface-jump-link.interface-jump-link-media-control:hover,
.interface-jump-link.interface-jump-link-media-control:focus-visible,
.interface-jump-link.interface-jump-link-media-control[aria-pressed="false"]:hover,
.interface-jump-link.interface-jump-link-media-control[aria-pressed="false"]:focus-visible {
  transform: translateY(-2px) !important;
  color: var(--text) !important;
  border-color: rgba(239, 68, 68, 0.68) !important;
  background:
    linear-gradient(145deg, rgba(239, 68, 68, 0.22), rgba(236, 72, 153, 0.13)),
    radial-gradient(circle at 18% 18%, rgba(239, 68, 68, 0.16), transparent 44%),
    rgba(255, 255, 255, 0.058) !important;
  box-shadow:
    0 0 0 1px rgba(239, 68, 68, 0.085),
    0 16px 38px rgba(0, 0, 0, 0.25),
    0 0 34px rgba(239, 68, 68, 0.22),
    0 0 52px rgba(236, 72, 153, 0.13),
    inset 0 0 30px rgba(239, 68, 68, 0.065) !important;
}

.interface-jump-link:hover::before,
.interface-jump-link:focus-visible::before,
.interface-jump-link.interface-jump-link-media-control:hover::before,
.interface-jump-link.interface-jump-link-media-control:focus-visible::before,
.interface-jump-link.interface-jump-link-media-control[aria-pressed="false"]:hover::before,
.interface-jump-link.interface-jump-link-media-control[aria-pressed="false"]:focus-visible::before {
  background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.30), rgba(236, 72, 153, 0.20), transparent) !important;
  opacity: 0.62 !important;
}

/* Keep Pause Intel red even when not hovering. */
.interface-jump-link.interface-jump-link-media-control[aria-pressed="true"] {
  border-radius: 16px !important;
  color: var(--text) !important;
  border-color: rgba(239, 68, 68, 0.52) !important;
  background:
    linear-gradient(145deg, rgba(239, 68, 68, 0.20), rgba(236, 72, 153, 0.12)),
    radial-gradient(circle at 18% 18%, rgba(239, 68, 68, 0.14), transparent 44%),
    rgba(255, 255, 255, 0.052) !important;
  box-shadow:
    0 0 0 1px rgba(239, 68, 68, 0.070),
    0 16px 38px rgba(0, 0, 0, 0.24),
    0 0 32px rgba(239, 68, 68, 0.18),
    0 0 48px rgba(236, 72, 153, 0.12),
    inset 0 0 28px rgba(239, 68, 68, 0.065) !important;
}

/* =========================
   WINTERFACE TELEMETRY CONTROL SURFACE PATCH
   Converts the Problem / Method / Result telemetry chips into abstract controller-style control surfaces.
   Chip 1 = left analog control, Chip 2 = precision analog control, Chip 3 = action button.
   CSS-only: no HTML or JavaScript changes.
========================= */

.interface-signal-detail {
  perspective: 1100px;
}

.interface-signal-chip {
  isolation: isolate;
  overflow: hidden;
  padding-top: 0.88rem;
  padding-left: 0.92rem;
}

/* Reposition the label/value so the control hardware reads as intentional, not decorative clutter. */
.interface-signal-chip span {
  padding-left: 2.55rem;
}

.interface-signal-chip strong {
  margin-top: 0.08rem;
}

/* Shared hardware node foundation. */
.interface-signal-chip::after {
  left: 0.9rem;
  top: 0.78rem;
  width: 1.68rem;
  height: 1.68rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(248, 250, 252, 0.38), transparent 22%),
    radial-gradient(circle at 50% 52%, rgba(56, 189, 248, 0.44), rgba(56, 189, 248, 0.16) 43%, rgba(5, 8, 22, 0.68) 69%),
    rgba(5, 8, 22, 0.52);
  border: 1px solid rgba(125, 211, 252, 0.52);
  box-shadow:
    inset 0 0 9px rgba(248, 250, 252, 0.12),
    inset 0 -6px 12px rgba(0, 0, 0, 0.36),
    0 0 12px rgba(56, 189, 248, 0.64),
    0 0 28px rgba(56, 189, 248, 0.22);
  transform: translate3d(0, 0, 0);
  transition:
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease;
}

/* The sweep layer becomes a recessed control plate behind the stick/button. */
.interface-signal-chip::before {
  inset: 0.47rem auto auto 0.55rem;
  width: 2.42rem;
  height: 2.42rem;
  border-radius: 50%;
  opacity: 0.76;
  transform: none;
  animation: none;
  background:
    radial-gradient(circle at 50% 50%, transparent 31%, rgba(56, 189, 248, 0.20) 32%, transparent 35%),
    radial-gradient(circle at 50% 50%, transparent 52%, rgba(56, 189, 248, 0.16) 53%, transparent 56%),
    conic-gradient(from 40deg, transparent 0 10%, rgba(56, 189, 248, 0.16) 10% 13%, transparent 13% 37%, rgba(56, 189, 248, 0.12) 37% 40%, transparent 40% 64%, rgba(139, 92, 246, 0.14) 64% 67%, transparent 67% 100%);
  border: 1px solid rgba(56, 189, 248, 0.20);
  box-shadow:
    inset 0 0 14px rgba(56, 189, 248, 0.045),
    0 0 18px rgba(56, 189, 248, 0.075);
}

/* Problem = left analog stick. Slightly offset to feel like navigation/control input. */
.interface-signal-chip:nth-child(1)::after {
  transform: translate3d(-1px, 1px, 0);
}

.interface-signal-chip:nth-child(1):hover::after,
.interface-signal-chip:nth-child(1):focus-within::after {
  transform: translate3d(-3px, -2px, 0) scale(1.05);
}

/* Method = precision stick with tighter targeting geometry. */
.interface-signal-chip:nth-child(2)::before {
  background:
    radial-gradient(circle at 50% 50%, transparent 24%, rgba(56, 189, 248, 0.22) 25%, transparent 28%),
    radial-gradient(circle at 50% 50%, transparent 46%, rgba(56, 189, 248, 0.18) 47%, transparent 50%),
    conic-gradient(from 0deg, rgba(56, 189, 248, 0.16) 0 2%, transparent 2% 23%, rgba(56, 189, 248, 0.16) 23% 25%, transparent 25% 48%, rgba(139, 92, 246, 0.16) 48% 50%, transparent 50% 73%, rgba(56, 189, 248, 0.16) 73% 75%, transparent 75% 100%);
}

.interface-signal-chip:nth-child(2)::after {
  width: 1.48rem;
  height: 1.48rem;
  left: 1rem;
  top: 0.88rem;
  background:
    radial-gradient(circle at 38% 30%, rgba(248, 250, 252, 0.42), transparent 22%),
    radial-gradient(circle at 50% 52%, rgba(56, 189, 248, 0.50), rgba(56, 189, 248, 0.18) 42%, rgba(5, 8, 22, 0.70) 69%);
}

.interface-signal-chip:nth-child(2):hover::after,
.interface-signal-chip:nth-child(2):focus-within::after {
  transform: translate3d(3px, -2px, 0) scale(1.055);
}

/* Result = tactical action button, flatter and more illuminated than the analog sticks. */
.interface-signal-chip:nth-child(3)::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.10), transparent 33%),
    conic-gradient(from 18deg, rgba(56, 189, 248, 0.24) 0 9%, transparent 9% 18%, rgba(139, 92, 246, 0.18) 18% 27%, transparent 27% 44%, rgba(56, 189, 248, 0.20) 44% 53%, transparent 53% 68%, rgba(139, 92, 246, 0.16) 68% 78%, transparent 78% 100%);
  border-color: rgba(56, 189, 248, 0.28);
}

.interface-signal-chip:nth-child(3)::after {
  width: 1.74rem;
  height: 1.74rem;
  left: 0.86rem;
  top: 0.76rem;
  background:
    radial-gradient(circle at 38% 28%, rgba(248, 250, 252, 0.50), transparent 22%),
    radial-gradient(circle at 50% 54%, rgba(56, 189, 248, 0.56), rgba(56, 189, 248, 0.22) 44%, rgba(5, 8, 22, 0.62) 73%);
  box-shadow:
    inset 0 0 10px rgba(248, 250, 252, 0.14),
    inset 0 -7px 13px rgba(0, 0, 0, 0.34),
    0 0 15px rgba(56, 189, 248, 0.72),
    0 0 34px rgba(56, 189, 248, 0.27);
}

.interface-signal-chip:nth-child(3):hover::after,
.interface-signal-chip:nth-child(3):focus-within::after {
  transform: translate3d(0, -2px, 0) scale(1.09);
  box-shadow:
    inset 0 0 12px rgba(248, 250, 252, 0.18),
    inset 0 -7px 13px rgba(0, 0, 0, 0.30),
    0 0 18px rgba(56, 189, 248, 0.92),
    0 0 42px rgba(56, 189, 248, 0.34),
    0 0 64px rgba(139, 92, 246, 0.16);
}

/* Subtle directional grooves inside each chip. */
.interface-signal-chip span::before,
.interface-signal-chip span::after {
  content: "";
  position: absolute;
  left: 0.06rem;
  top: 0.42rem;
  width: 2.34rem;
  height: 1px;
  border-radius: 999px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.32), transparent);
  opacity: 0.54;
  transform: rotate(0deg);
}

.interface-signal-chip span::after {
  transform: rotate(90deg);
  opacity: 0.36;
}

/* Hardware response on hover. */
.interface-signal-chip:hover::before,
.interface-signal-chip:focus-within::before {
  opacity: 0.96;
  border-color: rgba(56, 189, 248, 0.38);
  box-shadow:
    inset 0 0 17px rgba(56, 189, 248, 0.075),
    0 0 24px rgba(56, 189, 248, 0.14);
}

.interface-signal-chip:hover span::before,
.interface-signal-chip:focus-within span::before,
.interface-signal-chip:hover span::after,
.interface-signal-chip:focus-within span::after {
  opacity: 0.72;
}

/* Operational Layer uses purple control hardware to match the mode theme. */
.interface-system-set-operations .interface-signal-chip::before {
  border-color: rgba(139, 92, 246, 0.24);
  background:
    radial-gradient(circle at 50% 50%, transparent 31%, rgba(139, 92, 246, 0.22) 32%, transparent 35%),
    radial-gradient(circle at 50% 50%, transparent 52%, rgba(139, 92, 246, 0.16) 53%, transparent 56%),
    conic-gradient(from 40deg, transparent 0 10%, rgba(139, 92, 246, 0.18) 10% 13%, transparent 13% 37%, rgba(139, 92, 246, 0.13) 37% 40%, transparent 40% 64%, rgba(56, 189, 248, 0.13) 64% 67%, transparent 67% 100%);
  box-shadow:
    inset 0 0 14px rgba(139, 92, 246, 0.055),
    0 0 18px rgba(139, 92, 246, 0.080);
}

.interface-system-set-operations .interface-signal-chip::after {
  background:
    radial-gradient(circle at 34% 28%, rgba(248, 250, 252, 0.38), transparent 22%),
    radial-gradient(circle at 50% 52%, rgba(139, 92, 246, 0.52), rgba(139, 92, 246, 0.20) 43%, rgba(5, 8, 22, 0.68) 69%),
    rgba(5, 8, 22, 0.52);
  border-color: rgba(167, 139, 250, 0.56);
  box-shadow:
    inset 0 0 9px rgba(248, 250, 252, 0.12),
    inset 0 -6px 12px rgba(0, 0, 0, 0.36),
    0 0 12px rgba(139, 92, 246, 0.70),
    0 0 30px rgba(139, 92, 246, 0.26);
}

.interface-system-set-operations .interface-signal-chip:nth-child(2)::before {
  background:
    radial-gradient(circle at 50% 50%, transparent 24%, rgba(139, 92, 246, 0.24) 25%, transparent 28%),
    radial-gradient(circle at 50% 50%, transparent 46%, rgba(139, 92, 246, 0.18) 47%, transparent 50%),
    conic-gradient(from 0deg, rgba(139, 92, 246, 0.18) 0 2%, transparent 2% 23%, rgba(139, 92, 246, 0.18) 23% 25%, transparent 25% 48%, rgba(56, 189, 248, 0.15) 48% 50%, transparent 50% 73%, rgba(139, 92, 246, 0.18) 73% 75%, transparent 75% 100%);
}

.interface-system-set-operations .interface-signal-chip:nth-child(3)::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.12), transparent 33%),
    conic-gradient(from 18deg, rgba(139, 92, 246, 0.26) 0 9%, transparent 9% 18%, rgba(56, 189, 248, 0.16) 18% 27%, transparent 27% 44%, rgba(139, 92, 246, 0.22) 44% 53%, transparent 53% 68%, rgba(56, 189, 248, 0.14) 68% 78%, transparent 78% 100%);
}

.interface-system-set-operations .interface-signal-chip span::before,
.interface-system-set-operations .interface-signal-chip span::after {
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.38), transparent);
}

.interface-system-set-operations .interface-signal-chip:hover::before,
.interface-system-set-operations .interface-signal-chip:focus-within::before {
  border-color: rgba(139, 92, 246, 0.44);
  box-shadow:
    inset 0 0 17px rgba(139, 92, 246, 0.085),
    0 0 26px rgba(139, 92, 246, 0.17);
}

/* Keep the controller hardware from crowding smaller mobile cards. */
@media (max-width: 768px) {
  .interface-signal-chip {
    padding-top: 0.74rem;
  }

  .interface-signal-chip span {
    padding-left: 2.38rem;
  }

  .interface-signal-chip::before {
    width: 2.22rem;
    height: 2.22rem;
    left: 0.52rem;
    top: 0.46rem;
  }

  .interface-signal-chip::after {
    width: 1.48rem;
    height: 1.48rem;
    left: 0.89rem;
    top: 0.82rem;
  }

  .interface-signal-chip:nth-child(2)::after {
    width: 1.34rem;
    height: 1.34rem;
    left: 0.96rem;
    top: 0.89rem;
  }

  .interface-signal-chip:nth-child(3)::after {
    width: 1.52rem;
    height: 1.52rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .interface-signal-chip::before,
  .interface-signal-chip::after,
  .interface-signal-chip:hover::after,
  .interface-signal-chip:focus-within::after {
    transition: none !important;
    transform: none !important;
  }
}

/* =========================
   WINTERFACE ALL BOTTOM RIGHT CTA RED HOVER FINAL PATCH
   Forces every bottom-right WInterface CTA across all 18 modules to use the same red hover treatment.
   This intentionally overrides cyan, purple, and pink contextual hover states.
   CSS-only: no HTML or JavaScript changes.
========================= */

.interface-shell .interface-side-panel .interface-jump-link:hover,
.interface-shell .interface-side-panel .interface-jump-link:focus-visible,
.interface-shell .interface-side-panel .interface-jump-link.interface-jump-link-media-control:hover,
.interface-shell .interface-side-panel .interface-jump-link.interface-jump-link-media-control:focus-visible,
.interface-shell .interface-side-panel .interface-jump-link.interface-jump-link-media-control[aria-pressed="false"]:hover,
.interface-shell .interface-side-panel .interface-jump-link.interface-jump-link-media-control[aria-pressed="false"]:focus-visible,
.interface-system-set-primary .interface-side-panel .interface-jump-link:hover,
.interface-system-set-primary .interface-side-panel .interface-jump-link:focus-visible,
.interface-system-set-operations .interface-side-panel .interface-jump-link:hover,
.interface-system-set-operations .interface-side-panel .interface-jump-link:focus-visible,
.interface-system-set-media .interface-side-panel .interface-jump-link:hover,
.interface-system-set-media .interface-side-panel .interface-jump-link:focus-visible {
  transform: translateY(-2px) !important;
  color: var(--text) !important;
  border-color: rgba(239, 68, 68, 0.72) !important;
  background:
    linear-gradient(145deg, rgba(239, 68, 68, 0.24), rgba(236, 72, 153, 0.14)),
    radial-gradient(circle at 18% 18%, rgba(239, 68, 68, 0.18), transparent 44%),
    rgba(255, 255, 255, 0.060) !important;
  box-shadow:
    0 0 0 1px rgba(239, 68, 68, 0.095),
    0 16px 38px rgba(0, 0, 0, 0.25),
    0 0 36px rgba(239, 68, 68, 0.24),
    0 0 54px rgba(236, 72, 153, 0.14),
    inset 0 0 30px rgba(239, 68, 68, 0.070) !important;
}

.interface-shell .interface-side-panel .interface-jump-link:hover::before,
.interface-shell .interface-side-panel .interface-jump-link:focus-visible::before,
.interface-shell .interface-side-panel .interface-jump-link.interface-jump-link-media-control:hover::before,
.interface-shell .interface-side-panel .interface-jump-link.interface-jump-link-media-control:focus-visible::before,
.interface-system-set-primary .interface-side-panel .interface-jump-link:hover::before,
.interface-system-set-primary .interface-side-panel .interface-jump-link:focus-visible::before,
.interface-system-set-operations .interface-side-panel .interface-jump-link:hover::before,
.interface-system-set-operations .interface-side-panel .interface-jump-link:focus-visible::before,
.interface-system-set-media .interface-side-panel .interface-jump-link:hover::before,
.interface-system-set-media .interface-side-panel .interface-jump-link:focus-visible::before {
  background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.32), rgba(236, 72, 153, 0.22), transparent) !important;
  opacity: 0.66 !important;
}

/* Keep active Pause Intel red even when not hovered. */
.interface-shell .interface-side-panel .interface-jump-link.interface-jump-link-media-control[aria-pressed="true"] {
  border-radius: 16px !important;
  color: var(--text) !important;
  border-color: rgba(239, 68, 68, 0.54) !important;
  background:
    linear-gradient(145deg, rgba(239, 68, 68, 0.20), rgba(236, 72, 153, 0.12)),
    radial-gradient(circle at 18% 18%, rgba(239, 68, 68, 0.14), transparent 44%),
    rgba(255, 255, 255, 0.052) !important;
  box-shadow:
    0 0 0 1px rgba(239, 68, 68, 0.074),
    0 16px 38px rgba(0, 0, 0, 0.24),
    0 0 32px rgba(239, 68, 68, 0.18),
    0 0 48px rgba(236, 72, 153, 0.12),
    inset 0 0 28px rgba(239, 68, 68, 0.065) !important;
}




/* =========================
   WINTERFACE CENTERED CONTROL SURFACE ALIGNMENT PATCH
   Centers the control orbs and stacks the telemetry text beneath them for improved readability.
   Preserves all existing control-surface hover and lighting effects.
   CSS-only: no HTML or JavaScript changes.
========================= */

.interface-signal-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding:
    4.25rem
    1rem
    1rem
    1rem;
}

/* Center the control ring hardware. */
.interface-signal-chip::before {
  left: 50%;
  top: 0.42rem;
  transform: translateX(-50%);
}

/* Center the orb itself. */
.interface-signal-chip::after {
  left: 50% !important;
  top: 0.78rem;
  transform: translateX(-50%) translate3d(0, 0, 0);
}

/* Preserve unique hover motion characteristics per chip. */
.interface-signal-chip:nth-child(1):hover::after,
.interface-signal-chip:nth-child(1):focus-within::after {
  transform: translateX(calc(-50% - 3px)) translateY(-2px) scale(1.05);
}

.interface-signal-chip:nth-child(2):hover::after,
.interface-signal-chip:nth-child(2):focus-within::after {
  transform: translateX(calc(-50% + 3px)) translateY(-2px) scale(1.055);
}

.interface-signal-chip:nth-child(3):hover::after,
.interface-signal-chip:nth-child(3):focus-within::after {
  transform: translateX(-50%) translateY(-2px) scale(1.09);
}

/* Remove left-aligned spacing from previous layout. */
.interface-signal-chip span {
  padding-left: 0 !important;
  margin-top: 0.18rem;
  justify-content: center;
  text-align: center;
}

.interface-signal-chip strong {
  margin-top: 0.42rem;
  max-width: 12.5rem;
  text-align: center;
  line-height: 1.12;
}

/* Center the directional grooves beneath the orb. */
.interface-signal-chip span::before,
.interface-signal-chip span::after {
  left: 50%;
  top: -1.92rem;
  width: 2.3rem;
  transform-origin: center;
}

.interface-signal-chip span::before {
  transform: translateX(-50%) rotate(0deg);
}

.interface-signal-chip span::after {
  transform: translateX(-50%) rotate(90deg);
}

/* Restore centered sizing consistency for chip variants. */
.interface-signal-chip:nth-child(2)::after {
  left: 50% !important;
}

.interface-signal-chip:nth-child(3)::after {
  left: 50% !important;
}

/* Improve visual breathing room on mobile. */
@media (max-width: 768px) {
  .interface-signal-chip {
    padding:
      3.95rem
      0.82rem
      0.88rem
      0.82rem;
  }

  .interface-signal-chip strong {
    max-width: 10.5rem;
    font-size: 0.88rem;
  }

  .interface-signal-chip span::before,
  .interface-signal-chip span::after {
    top: -1.78rem;
  }
}

@media (max-width: 640px) {
  .interface-signal-chip {
    min-height: 8.4rem;
  }
}

/* =========================
   WINTERFACE TELEMETRY NORMALIZED TRIAD COLOR PATCH
   Normalizes all three control orbs and gives Problem / Method / Result distinct tactical colors.
   Problem = cyan, Method = violet, Result = magenta-red.
   CSS-only: no HTML or JavaScript changes.
========================= */

/* Normalize all three control modules. */
.interface-signal-chip,
.interface-signal-chip:nth-child(1),
.interface-signal-chip:nth-child(2),
.interface-signal-chip:nth-child(3) {
  min-height: 8.55rem;
  padding: 4.35rem 1rem 1rem;
}

/* Every card gets the same control ring position and size. */
.interface-signal-chip::before,
.interface-signal-chip:nth-child(1)::before,
.interface-signal-chip:nth-child(2)::before,
.interface-signal-chip:nth-child(3)::before {
  left: 50% !important;
  top: 0.46rem !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  transform: translateX(-50%) !important;
  border-radius: 50%;
}

/* Every orb gets the same resting position and size. */
.interface-signal-chip::after,
.interface-signal-chip:nth-child(1)::after,
.interface-signal-chip:nth-child(2)::after,
.interface-signal-chip:nth-child(3)::after {
  left: 50% !important;
  top: 0.88rem !important;
  width: 1.66rem !important;
  height: 1.66rem !important;
  transform: translateX(-50%) translateY(0) scale(1) !important;
  border-radius: 50%;
}

/* Uniform hover behavior: no drifting off-center. */
.interface-signal-chip:hover::after,
.interface-signal-chip:focus-within::after,
.interface-signal-chip:nth-child(1):hover::after,
.interface-signal-chip:nth-child(1):focus-within::after,
.interface-signal-chip:nth-child(2):hover::after,
.interface-signal-chip:nth-child(2):focus-within::after,
.interface-signal-chip:nth-child(3):hover::after,
.interface-signal-chip:nth-child(3):focus-within::after {
  transform: translateX(-50%) translateY(-3px) scale(1.075) !important;
}

/* Base centered text rhythm. */
.interface-signal-chip span,
.interface-signal-chip strong {
  text-align: center;
}

.interface-signal-chip span {
  margin-top: 0.08rem;
}

.interface-signal-chip strong {
  max-width: 12.75rem;
}

/* =========================
   CARD 1: PROBLEM / CYAN
========================= */

.interface-signal-chip:nth-child(1) {
  border-color: rgba(56, 189, 248, 0.34);
  background:
    linear-gradient(145deg, rgba(56, 189, 248, 0.105), rgba(14, 165, 233, 0.045)),
    radial-gradient(circle at 50% 16%, rgba(56, 189, 248, 0.18), transparent 45%),
    rgba(255, 255, 255, 0.034);
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.045),
    0 14px 34px rgba(0, 0, 0, 0.18),
    0 0 24px rgba(56, 189, 248, 0.105),
    inset 0 0 18px rgba(56, 189, 248, 0.034);
}

.interface-signal-chip:nth-child(1)::before {
  border-color: rgba(56, 189, 248, 0.30);
  background:
    radial-gradient(circle at 50% 50%, transparent 31%, rgba(56, 189, 248, 0.24) 32%, transparent 35%),
    radial-gradient(circle at 50% 50%, transparent 52%, rgba(56, 189, 248, 0.18) 53%, transparent 56%),
    conic-gradient(from 40deg, transparent 0 10%, rgba(56, 189, 248, 0.20) 10% 13%, transparent 13% 37%, rgba(56, 189, 248, 0.15) 37% 40%, transparent 40% 64%, rgba(125, 211, 252, 0.16) 64% 67%, transparent 67% 100%);
  box-shadow:
    inset 0 0 14px rgba(56, 189, 248, 0.075),
    0 0 22px rgba(56, 189, 248, 0.12);
}

.interface-signal-chip:nth-child(1)::after {
  background:
    radial-gradient(circle at 34% 28%, rgba(248, 250, 252, 0.42), transparent 22%),
    radial-gradient(circle at 50% 52%, rgba(56, 189, 248, 0.54), rgba(56, 189, 248, 0.20) 43%, rgba(5, 8, 22, 0.68) 69%),
    rgba(5, 8, 22, 0.52);
  border-color: rgba(125, 211, 252, 0.58);
  box-shadow:
    inset 0 0 9px rgba(248, 250, 252, 0.12),
    inset 0 -6px 12px rgba(0, 0, 0, 0.36),
    0 0 14px rgba(56, 189, 248, 0.76),
    0 0 32px rgba(56, 189, 248, 0.28);
}

.interface-signal-chip:nth-child(1) span {
  color: #67e8f9;
}

/* =========================
   CARD 2: METHOD / VIOLET
========================= */

.interface-signal-chip:nth-child(2) {
  border-color: rgba(139, 92, 246, 0.38);
  background:
    linear-gradient(145deg, rgba(139, 92, 246, 0.115), rgba(99, 102, 241, 0.050)),
    radial-gradient(circle at 50% 16%, rgba(139, 92, 246, 0.20), transparent 45%),
    rgba(255, 255, 255, 0.034);
  box-shadow:
    0 0 0 1px rgba(139, 92, 246, 0.052),
    0 14px 34px rgba(0, 0, 0, 0.18),
    0 0 24px rgba(139, 92, 246, 0.12),
    inset 0 0 18px rgba(139, 92, 246, 0.040);
}

.interface-signal-chip:nth-child(2)::before {
  border-color: rgba(139, 92, 246, 0.34);
  background:
    radial-gradient(circle at 50% 50%, transparent 31%, rgba(139, 92, 246, 0.26) 32%, transparent 35%),
    radial-gradient(circle at 50% 50%, transparent 52%, rgba(139, 92, 246, 0.18) 53%, transparent 56%),
    conic-gradient(from 40deg, transparent 0 10%, rgba(139, 92, 246, 0.22) 10% 13%, transparent 13% 37%, rgba(139, 92, 246, 0.16) 37% 40%, transparent 40% 64%, rgba(167, 139, 250, 0.18) 64% 67%, transparent 67% 100%);
  box-shadow:
    inset 0 0 14px rgba(139, 92, 246, 0.080),
    0 0 22px rgba(139, 92, 246, 0.14);
}

.interface-signal-chip:nth-child(2)::after {
  background:
    radial-gradient(circle at 34% 28%, rgba(248, 250, 252, 0.42), transparent 22%),
    radial-gradient(circle at 50% 52%, rgba(139, 92, 246, 0.58), rgba(139, 92, 246, 0.22) 43%, rgba(5, 8, 22, 0.68) 69%),
    rgba(5, 8, 22, 0.52);
  border-color: rgba(167, 139, 250, 0.62);
  box-shadow:
    inset 0 0 9px rgba(248, 250, 252, 0.12),
    inset 0 -6px 12px rgba(0, 0, 0, 0.36),
    0 0 14px rgba(139, 92, 246, 0.78),
    0 0 34px rgba(139, 92, 246, 0.30);
}

.interface-signal-chip:nth-child(2) span {
  color: #a78bfa;
}

/* =========================
   CARD 3: RESULT / MAGENTA-RED
========================= */

.interface-signal-chip:nth-child(3) {
  border-color: rgba(236, 72, 153, 0.38);
  background:
    linear-gradient(145deg, rgba(236, 72, 153, 0.115), rgba(239, 68, 68, 0.050)),
    radial-gradient(circle at 50% 16%, rgba(236, 72, 153, 0.20), transparent 45%),
    rgba(255, 255, 255, 0.034);
  box-shadow:
    0 0 0 1px rgba(236, 72, 153, 0.052),
    0 14px 34px rgba(0, 0, 0, 0.18),
    0 0 24px rgba(236, 72, 153, 0.12),
    inset 0 0 18px rgba(236, 72, 153, 0.040);
}

.interface-signal-chip:nth-child(3)::before {
  border-color: rgba(236, 72, 153, 0.34);
  background:
    radial-gradient(circle at 50% 50%, transparent 31%, rgba(236, 72, 153, 0.26) 32%, transparent 35%),
    radial-gradient(circle at 50% 50%, transparent 52%, rgba(239, 68, 68, 0.18) 53%, transparent 56%),
    conic-gradient(from 40deg, transparent 0 10%, rgba(236, 72, 153, 0.22) 10% 13%, transparent 13% 37%, rgba(239, 68, 68, 0.16) 37% 40%, transparent 40% 64%, rgba(251, 113, 133, 0.18) 64% 67%, transparent 67% 100%);
  box-shadow:
    inset 0 0 14px rgba(236, 72, 153, 0.080),
    0 0 22px rgba(236, 72, 153, 0.14);
}

.interface-signal-chip:nth-child(3)::after {
  background:
    radial-gradient(circle at 34% 28%, rgba(248, 250, 252, 0.44), transparent 22%),
    radial-gradient(circle at 50% 52%, rgba(236, 72, 153, 0.58), rgba(239, 68, 68, 0.22) 43%, rgba(5, 8, 22, 0.68) 69%),
    rgba(5, 8, 22, 0.52);
  border-color: rgba(251, 113, 133, 0.62);
  box-shadow:
    inset 0 0 9px rgba(248, 250, 252, 0.12),
    inset 0 -6px 12px rgba(0, 0, 0, 0.36),
    0 0 14px rgba(236, 72, 153, 0.78),
    0 0 34px rgba(239, 68, 68, 0.30);
}

.interface-signal-chip:nth-child(3) span {
  color: #fb7185;
}

/* Hover keeps each card's color identity. */
.interface-signal-chip:nth-child(1):hover,
.interface-signal-chip:nth-child(1):focus-within {
  border-color: rgba(56, 189, 248, 0.64);
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.095),
    0 20px 42px rgba(0, 0, 0, 0.22),
    0 0 32px rgba(56, 189, 248, 0.19),
    inset 0 0 22px rgba(56, 189, 248, 0.055);
}

.interface-signal-chip:nth-child(2):hover,
.interface-signal-chip:nth-child(2):focus-within {
  border-color: rgba(139, 92, 246, 0.68);
  box-shadow:
    0 0 0 1px rgba(139, 92, 246, 0.105),
    0 20px 42px rgba(0, 0, 0, 0.22),
    0 0 34px rgba(139, 92, 246, 0.21),
    inset 0 0 22px rgba(139, 92, 246, 0.060);
}

.interface-signal-chip:nth-child(3):hover,
.interface-signal-chip:nth-child(3):focus-within {
  border-color: rgba(236, 72, 153, 0.68);
  box-shadow:
    0 0 0 1px rgba(236, 72, 153, 0.105),
    0 20px 42px rgba(0, 0, 0, 0.22),
    0 0 34px rgba(236, 72, 153, 0.21),
    0 0 50px rgba(239, 68, 68, 0.10),
    inset 0 0 22px rgba(236, 72, 153, 0.060);
}

/* On Operational Layer, keep the cards distinct but tune the set slightly darker and more violet-forward. */
.interface-system-set-operations .interface-signal-chip:nth-child(1) {
  border-color: rgba(56, 189, 248, 0.30);
}

.interface-system-set-operations .interface-signal-chip:nth-child(2) {
  border-color: rgba(139, 92, 246, 0.44);
}

.interface-system-set-operations .interface-signal-chip:nth-child(3) {
  border-color: rgba(236, 72, 153, 0.42);
}

@media (max-width: 768px) {
  .interface-signal-chip,
  .interface-signal-chip:nth-child(1),
  .interface-signal-chip:nth-child(2),
  .interface-signal-chip:nth-child(3) {
    min-height: 8.1rem;
    padding-top: 4.08rem;
  }

  .interface-signal-chip::before,
  .interface-signal-chip:nth-child(1)::before,
  .interface-signal-chip:nth-child(2)::before,
  .interface-signal-chip:nth-child(3)::before {
    width: 2.28rem !important;
    height: 2.28rem !important;
  }

  .interface-signal-chip::after,
  .interface-signal-chip:nth-child(1)::after,
  .interface-signal-chip:nth-child(2)::after,
  .interface-signal-chip:nth-child(3)::after {
    width: 1.5rem !important;
    height: 1.5rem !important;
  }
}

/* =========================
   WINTERFACE SYSTEM ONLINE OVAL RESTORE PATCH
   Restores the premium oval capsule styling for the top-left WInterface System Online indicator.
   CSS-only: no HTML or JavaScript changes.
========================= */

.interface-status-pill,
.interface-status-online,
.interface-system-online,
.interface-status-bar .interface-status-primary,
.interface-status-bar > .interface-status-pill:first-child {
  position: relative;
  min-height: 2.15rem;
  padding: 0.48rem 1rem;
  border-radius: 999px !important;
  border: 1px solid rgba(56, 189, 248, 0.34);
  background:
    linear-gradient(145deg, rgba(56, 189, 248, 0.10), rgba(139, 92, 246, 0.05)),
    radial-gradient(circle at 12% 50%, rgba(74, 222, 128, 0.18), transparent 42%),
    rgba(255, 255, 255, 0.03);
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.04),
    0 0 22px rgba(56, 189, 248, 0.10),
    inset 0 0 18px rgba(56, 189, 248, 0.025);
  overflow: hidden;
  backdrop-filter: blur(16px);
}

.interface-status-pill::before,
.interface-status-online::before,
.interface-system-online::before,
.interface-status-bar .interface-status-primary::before,
.interface-status-bar > .interface-status-pill:first-child::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(56, 189, 248, 0.14),
    rgba(139, 92, 246, 0.08),
    transparent
  );
  opacity: 0.42;
  transform: translateX(-72%);
  animation: interfacePlaybackSweep 5.4s ease-in-out infinite;
  pointer-events: none;
}

.interface-status-pill > *,
.interface-status-online > *,
.interface-system-online > *,
.interface-status-bar .interface-status-primary > *,
.interface-status-bar > .interface-status-pill:first-child > * {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .interface-status-pill::before,
  .interface-status-online::before,
  .interface-system-online::before,
  .interface-status-bar .interface-status-primary::before,
  .interface-status-bar > .interface-status-pill:first-child::before {
    animation: none !important;
    transform: none;
    opacity: 0.18;
  }
}

/* =========================
   WINTERFACE SYSTEM TOGGLE TRUE OVAL RESTORE PATCH
   Corrects the actual WInterface System Online/Paused control selector.
   Restores the visible oval border around the full top-left system status button.
   CSS-only: no HTML or JavaScript changes.
========================= */

.interface-status-bar .interface-system-toggle,
.interface-system-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.58rem;
  min-height: 2.18rem;
  padding: 0.50rem 1.05rem;
  border-radius: 999px !important;
  color: var(--muted-strong);
  border: 1px solid rgba(56, 189, 248, 0.42) !important;
  background:
    linear-gradient(145deg, rgba(56, 189, 248, 0.125), rgba(139, 92, 246, 0.060)),
    radial-gradient(circle at 13% 50%, rgba(74, 222, 128, 0.22), transparent 43%),
    rgba(255, 255, 255, 0.035) !important;
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.052),
    0 0 24px rgba(56, 189, 248, 0.135),
    0 0 38px rgba(139, 92, 246, 0.065),
    inset 0 0 20px rgba(56, 189, 248, 0.032) !important;
  overflow: hidden;
  backdrop-filter: blur(16px);
}

.interface-status-bar .interface-system-toggle::before,
.interface-system-toggle::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(56, 189, 248, 0.18),
    rgba(139, 92, 246, 0.10),
    transparent
  );
  opacity: 0.46;
  transform: translateX(-72%);
  animation: interfacePlaybackSweep 5.4s ease-in-out infinite;
  pointer-events: none;
}

.interface-status-bar .interface-system-toggle > *,
.interface-system-toggle > * {
  position: relative;
  z-index: 1;
}

.interface-status-bar .interface-system-toggle i,
.interface-system-toggle i {
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  background: var(--online-green);
  box-shadow:
    0 0 10px rgba(34, 197, 94, 0.96),
    0 0 24px rgba(34, 197, 94, 0.56),
    0 0 42px rgba(34, 197, 94, 0.24);
}

.interface-system-toggle[aria-pressed="false"] {
  border-color: rgba(239, 68, 68, 0.46) !important;
  background:
    linear-gradient(145deg, rgba(239, 68, 68, 0.13), rgba(236, 72, 153, 0.060)),
    radial-gradient(circle at 13% 50%, rgba(239, 68, 68, 0.18), transparent 43%),
    rgba(255, 255, 255, 0.035) !important;
  box-shadow:
    0 0 0 1px rgba(239, 68, 68, 0.052),
    0 0 24px rgba(239, 68, 68, 0.13),
    0 0 38px rgba(236, 72, 153, 0.065),
    inset 0 0 20px rgba(239, 68, 68, 0.032) !important;
}

.interface-system-toggle[aria-pressed="false"] i {
  background: #ef4444;
  box-shadow:
    0 0 10px rgba(239, 68, 68, 0.96),
    0 0 24px rgba(239, 68, 68, 0.56),
    0 0 42px rgba(236, 72, 153, 0.24);
}

.interface-system-toggle:hover,
.interface-system-toggle:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(56, 189, 248, 0.62) !important;
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.075),
    0 0 28px rgba(56, 189, 248, 0.18),
    0 0 44px rgba(139, 92, 246, 0.085),
    inset 0 0 22px rgba(56, 189, 248, 0.045) !important;
}

@media (max-width: 640px) {
  .interface-status-bar .interface-system-toggle,
  .interface-system-toggle {
    min-height: 2.02rem;
    padding: 0.42rem 0.78rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .interface-status-bar .interface-system-toggle::before,
  .interface-system-toggle::before {
    animation: none !important;
    transform: none;
    opacity: 0.18;
  }
}

/* =========================
   WINTERFACE PREMIUM GLASS BUTTON BORDER RESTORE PATCH
   Restores the stronger glass depth, cyan border glow, and layered inner lighting
   on Live Playback, Expand WInterface, and the bottom-right WInterface CTA.
   CSS-only: no HTML or JavaScript changes.
========================= */

.interface-media-actions .interface-playback-status,
.interface-media-actions .interface-media-toggle,
.interface-shell .interface-side-panel .interface-jump-link {
  position: relative;
  border-radius: 16px !important;
  border: 1px solid rgba(56, 189, 248, 0.48) !important;
  background:
    linear-gradient(145deg, rgba(56, 189, 248, 0.17), rgba(139, 92, 246, 0.095)),
    radial-gradient(circle at 18% 12%, rgba(125, 211, 252, 0.13), transparent 44%),
    radial-gradient(circle at 88% 92%, rgba(139, 92, 246, 0.10), transparent 46%),
    rgba(255, 255, 255, 0.055) !important;
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.105),
    0 16px 38px rgba(0, 0, 0, 0.24),
    0 0 28px rgba(56, 189, 248, 0.18),
    0 0 52px rgba(139, 92, 246, 0.075),
    inset 0 0 0 1px rgba(255, 255, 255, 0.055),
    inset 0 0 30px rgba(56, 189, 248, 0.062) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
}

.interface-media-actions .interface-playback-status::before,
.interface-media-actions .interface-media-toggle::before,
.interface-shell .interface-side-panel .interface-jump-link::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent, rgba(125, 211, 252, 0.32), rgba(139, 92, 246, 0.18), transparent) !important;
  opacity: 0.64 !important;
  transform: translateX(-76%);
  animation: interfacePlaybackSweep 4.2s ease-in-out infinite;
  pointer-events: none;
}

.interface-media-actions .interface-playback-status::after,
.interface-media-actions .interface-media-toggle::after,
.interface-shell .interface-side-panel .interface-jump-link::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.060);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.070),
    inset 0 -1px 0 rgba(56, 189, 248, 0.055);
  pointer-events: none;
}

.interface-media-actions .interface-playback-status > *,
.interface-media-actions .interface-media-toggle > *,
.interface-shell .interface-side-panel .interface-jump-link > * {
  position: relative;
  z-index: 1;
}

.interface-media-actions .interface-playback-status:hover,
.interface-media-actions .interface-playback-status:focus-visible,
.interface-media-actions .interface-media-toggle:hover,
.interface-media-actions .interface-media-toggle:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(56, 189, 248, 0.72) !important;
  background:
    linear-gradient(145deg, rgba(56, 189, 248, 0.21), rgba(139, 92, 246, 0.125)),
    radial-gradient(circle at 18% 12%, rgba(125, 211, 252, 0.17), transparent 44%),
    radial-gradient(circle at 88% 92%, rgba(139, 92, 246, 0.13), transparent 46%),
    rgba(255, 255, 255, 0.065) !important;
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.14),
    0 18px 42px rgba(0, 0, 0, 0.26),
    0 0 34px rgba(56, 189, 248, 0.24),
    0 0 60px rgba(139, 92, 246, 0.10),
    inset 0 0 0 1px rgba(255, 255, 255, 0.070),
    inset 0 0 34px rgba(56, 189, 248, 0.080) !important;
}

/* Preserve the requested all-red hover behavior on every bottom-right WInterface CTA. */
.interface-shell .interface-side-panel .interface-jump-link:hover,
.interface-shell .interface-side-panel .interface-jump-link:focus-visible,
.interface-shell .interface-side-panel .interface-jump-link.interface-jump-link-media-control:hover,
.interface-shell .interface-side-panel .interface-jump-link.interface-jump-link-media-control:focus-visible,
.interface-shell .interface-side-panel .interface-jump-link.interface-jump-link-media-control[aria-pressed="false"]:hover,
.interface-shell .interface-side-panel .interface-jump-link.interface-jump-link-media-control[aria-pressed="false"]:focus-visible,
.interface-system-set-primary .interface-side-panel .interface-jump-link:hover,
.interface-system-set-primary .interface-side-panel .interface-jump-link:focus-visible,
.interface-system-set-operations .interface-side-panel .interface-jump-link:hover,
.interface-system-set-operations .interface-side-panel .interface-jump-link:focus-visible,
.interface-system-set-media .interface-side-panel .interface-jump-link:hover,
.interface-system-set-media .interface-side-panel .interface-jump-link:focus-visible {
  transform: translateY(-2px) !important;
  color: var(--text) !important;
  border-color: rgba(239, 68, 68, 0.72) !important;
  background:
    linear-gradient(145deg, rgba(239, 68, 68, 0.24), rgba(236, 72, 153, 0.14)),
    radial-gradient(circle at 18% 18%, rgba(239, 68, 68, 0.18), transparent 44%),
    rgba(255, 255, 255, 0.062) !important;
  box-shadow:
    0 0 0 1px rgba(239, 68, 68, 0.105),
    0 18px 42px rgba(0, 0, 0, 0.26),
    0 0 38px rgba(239, 68, 68, 0.25),
    0 0 56px rgba(236, 72, 153, 0.15),
    inset 0 0 0 1px rgba(255, 255, 255, 0.060),
    inset 0 0 32px rgba(239, 68, 68, 0.075) !important;
}

.interface-shell .interface-side-panel .interface-jump-link:hover::before,
.interface-shell .interface-side-panel .interface-jump-link:focus-visible::before,
.interface-shell .interface-side-panel .interface-jump-link.interface-jump-link-media-control:hover::before,
.interface-shell .interface-side-panel .interface-jump-link.interface-jump-link-media-control:focus-visible::before,
.interface-system-set-primary .interface-side-panel .interface-jump-link:hover::before,
.interface-system-set-primary .interface-side-panel .interface-jump-link:focus-visible::before,
.interface-system-set-operations .interface-side-panel .interface-jump-link:hover::before,
.interface-system-set-operations .interface-side-panel .interface-jump-link:focus-visible::before,
.interface-system-set-media .interface-side-panel .interface-jump-link:hover::before,
.interface-system-set-media .interface-side-panel .interface-jump-link:focus-visible::before {
  background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.34), rgba(236, 72, 153, 0.24), transparent) !important;
  opacity: 0.70 !important;
}

/* Preserve Pause Intel active red state with the restored premium border stack. */
.interface-shell .interface-side-panel .interface-jump-link.interface-jump-link-media-control[aria-pressed="true"] {
  border-radius: 16px !important;
  color: var(--text) !important;
  border-color: rgba(239, 68, 68, 0.58) !important;
  background:
    linear-gradient(145deg, rgba(239, 68, 68, 0.22), rgba(236, 72, 153, 0.13)),
    radial-gradient(circle at 18% 18%, rgba(239, 68, 68, 0.15), transparent 44%),
    rgba(255, 255, 255, 0.056) !important;
  box-shadow:
    0 0 0 1px rgba(239, 68, 68, 0.085),
    0 16px 38px rgba(0, 0, 0, 0.24),
    0 0 34px rgba(239, 68, 68, 0.20),
    0 0 50px rgba(236, 72, 153, 0.13),
    inset 0 0 0 1px rgba(255, 255, 255, 0.055),
    inset 0 0 30px rgba(239, 68, 68, 0.070) !important;
}

/* =========================
   WINTERFACE COMMAND LINE PREMIUM GLOW RESTORE PATCH
   Restores the stronger cyan command-line glow and layered glass border.
   CSS-only: no HTML or JavaScript changes.
========================= */

.interface-command-line {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(56, 189, 248, 0.58) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.082), rgba(255, 255, 255, 0.036)),
    radial-gradient(circle at 8% 50%, rgba(56, 189, 248, 0.18), transparent 44%),
    radial-gradient(circle at 92% 50%, rgba(139, 92, 246, 0.12), transparent 46%),
    rgba(255, 255, 255, 0.032) !important;
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.13),
    0 0 30px rgba(56, 189, 248, 0.24),
    0 0 58px rgba(56, 189, 248, 0.10),
    0 14px 34px rgba(0, 0, 0, 0.20),
    inset 0 0 0 1px rgba(255, 255, 255, 0.060),
    inset 0 0 34px rgba(56, 189, 248, 0.082) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.interface-command-line::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(125, 211, 252, 0.34),
      rgba(139, 92, 246, 0.18),
      transparent
    ) !important;
  opacity: 0.58 !important;
  transform: translateX(-78%);
  animation: interfaceCommandLineSweep 5.4s ease-in-out infinite;
  pointer-events: none;
}

.interface-command-line::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 19px;
  border: 1px solid rgba(255, 255, 255, 0.062);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.080),
    inset 0 -1px 0 rgba(56, 189, 248, 0.065);
  pointer-events: none;
}

.interface-command-line > * {
  position: relative;
  z-index: 1;
}

.interface-command-line:focus-within {
  border-color: rgba(56, 189, 248, 0.78) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.092), rgba(255, 255, 255, 0.040)),
    radial-gradient(circle at 8% 50%, rgba(56, 189, 248, 0.23), transparent 44%),
    radial-gradient(circle at 92% 50%, rgba(139, 92, 246, 0.15), transparent 46%),
    rgba(255, 255, 255, 0.038) !important;
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.18),
    0 0 38px rgba(56, 189, 248, 0.30),
    0 0 72px rgba(56, 189, 248, 0.13),
    0 16px 38px rgba(0, 0, 0, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.070),
    inset 0 0 40px rgba(56, 189, 248, 0.105) !important;
}

.interface-command-prefix {
  color: var(--cyan) !important;
  text-shadow:
    0 0 10px rgba(56, 189, 248, 0.62),
    0 0 22px rgba(56, 189, 248, 0.24);
}

.interface-command-input {
  color: var(--muted-strong) !important;
  text-shadow:
    0 0 12px rgba(199, 210, 254, 0.13);
}

.interface-cursor {
  background: var(--cyan) !important;
  box-shadow:
    0 0 12px rgba(56, 189, 248, 0.94),
    0 0 26px rgba(56, 189, 248, 0.46),
    0 0 44px rgba(56, 189, 248, 0.22) !important;
}

@media (prefers-reduced-motion: reduce) {
  .interface-command-line::before {
    animation: none !important;
    opacity: 0.20 !important;
    transform: none;
  }
}


/* =========================
   WINTERFACE COLOR RESET
   Clean, restrained bay colors:
   Active Pathways = cyan
   Operational Layer = purple
   Showcase Bay = pink
========================= */

.interface-section {
  --winterface-accent: var(--cyan);
  --winterface-accent-rgb: 56, 189, 248;
  --winterface-accent-text: #7dd3fc;
  --winterface-accent-soft: rgba(56, 189, 248, 0.095);
  --winterface-accent-mid: rgba(56, 189, 248, 0.22);
  --winterface-accent-strong: rgba(56, 189, 248, 0.56);
}

.interface-section.interface-system-set-primary {
  --winterface-accent: var(--cyan);
  --winterface-accent-rgb: 56, 189, 248;
  --winterface-accent-text: #7dd3fc;
  --winterface-accent-soft: rgba(56, 189, 248, 0.095);
  --winterface-accent-mid: rgba(56, 189, 248, 0.22);
  --winterface-accent-strong: rgba(56, 189, 248, 0.56);
}

.interface-section.interface-system-set-operations {
  --winterface-accent: var(--violet);
  --winterface-accent-rgb: 139, 92, 246;
  --winterface-accent-text: #c4b5fd;
  --winterface-accent-soft: rgba(139, 92, 246, 0.095);
  --winterface-accent-mid: rgba(139, 92, 246, 0.22);
  --winterface-accent-strong: rgba(139, 92, 246, 0.56);
}

.interface-section.interface-system-set-media {
  --winterface-accent: var(--pink);
  --winterface-accent-rgb: 236, 72, 153;
  --winterface-accent-text: #f9a8d4;
  --winterface-accent-soft: rgba(236, 72, 153, 0.095);
  --winterface-accent-mid: rgba(236, 72, 153, 0.22);
  --winterface-accent-strong: rgba(236, 72, 153, 0.56);
}

.interface-section .interface-shell {
  border-color: rgba(var(--winterface-accent-rgb), 0.18);
  box-shadow:
    0 34px 110px rgba(0,0,0,0.48),
    0 0 62px rgba(var(--winterface-accent-rgb), 0.10),
    inset 0 0 70px rgba(255,255,255,0.035);
}

.interface-section .interface-rail {
  background:
    radial-gradient(circle at 10% 8%, rgba(var(--winterface-accent-rgb), 0.12), transparent 42%),
    rgba(5, 8, 22, 0.36);
  border-color: rgba(var(--winterface-accent-rgb), 0.22);
}

.interface-section .interface-rail-label,
.interface-section .interface-output-label,
.interface-section .interface-response .panel-label,
.interface-section .interface-showcase-caption span {
  color: var(--winterface-accent) !important;
}

.interface-section .interface-status-bar > span:nth-child(2) i,
.interface-section .interface-status-bar > span:nth-child(3) i {
  background: var(--winterface-accent);
  box-shadow:
    0 0 12px rgba(var(--winterface-accent-rgb), 0.78),
    0 0 26px rgba(var(--winterface-accent-rgb), 0.28);
}

.interface-section .interface-path {
  border-color: rgba(var(--winterface-accent-rgb), 0.20);
  background:
    linear-gradient(145deg, rgba(var(--winterface-accent-rgb), 0.045), rgba(255,255,255,0.035)),
    rgba(255,255,255,0.035);
  box-shadow: none;
}

.interface-section .interface-path:hover,
.interface-section .interface-path:focus-visible {
  transform: translateX(3px);
  color: var(--text);
  border-color: rgba(var(--winterface-accent-rgb), 0.42);
  background:
    linear-gradient(145deg, rgba(var(--winterface-accent-rgb), 0.085), rgba(255,255,255,0.045)),
    rgba(255,255,255,0.04);
  box-shadow:
    0 0 18px rgba(var(--winterface-accent-rgb), 0.12),
    inset 0 0 22px rgba(var(--winterface-accent-rgb), 0.025);
}

.interface-section .interface-path.is-active {
  transform: translateX(3px);
  color: var(--text);
  border-color: rgba(var(--winterface-accent-rgb), 0.58);
  background:
    linear-gradient(145deg, rgba(var(--winterface-accent-rgb), 0.13), rgba(255,255,255,0.052)),
    rgba(var(--winterface-accent-rgb), 0.055);
  box-shadow:
    0 0 0 1px rgba(var(--winterface-accent-rgb), 0.05),
    0 0 24px rgba(var(--winterface-accent-rgb), 0.16),
    inset 0 0 26px rgba(var(--winterface-accent-rgb), 0.035);
}

.interface-section .interface-path span {
  color: var(--winterface-accent-text);
  border-color: rgba(var(--winterface-accent-rgb), 0.34);
  background:
    radial-gradient(circle at 35% 28%, rgba(248, 250, 252, 0.24), transparent 25%),
    radial-gradient(circle at 50% 52%, rgba(var(--winterface-accent-rgb), 0.18), rgba(var(--winterface-accent-rgb), 0.065) 58%, rgba(5, 8, 22, 0.18) 100%);
  text-shadow:
    0 1px 2px rgba(0,0,0,0.58),
    0 0 9px rgba(var(--winterface-accent-rgb), 0.54);
  box-shadow:
    inset 0 0 14px rgba(var(--winterface-accent-rgb), 0.10),
    0 0 16px rgba(var(--winterface-accent-rgb), 0.12);
}

.interface-section .interface-path span::before {
  border-color: rgba(var(--winterface-accent-rgb), 0.22);
  opacity: 0.54;
}

.interface-section .interface-path span::after {
  border-color: rgba(248, 250, 252, 0.13);
}

.interface-section .interface-path:hover span,
.interface-section .interface-path:focus-visible span,
.interface-section .interface-path.is-active span {
  color: #f8fafc;
  border-color: rgba(var(--winterface-accent-rgb), 0.66);
  background:
    radial-gradient(circle at 35% 28%, rgba(248, 250, 252, 0.30), transparent 25%),
    radial-gradient(circle at 50% 52%, rgba(var(--winterface-accent-rgb), 0.28), rgba(var(--winterface-accent-rgb), 0.11) 58%, rgba(5, 8, 22, 0.16) 100%);
  box-shadow:
    inset 0 0 16px rgba(var(--winterface-accent-rgb), 0.16),
    0 0 20px rgba(var(--winterface-accent-rgb), 0.24),
    0 0 36px rgba(var(--winterface-accent-rgb), 0.12);
}

.interface-section .interface-set-button.is-active {
  border-color: rgba(var(--winterface-accent-rgb), 0.58);
  background: rgba(var(--winterface-accent-rgb), 0.08);
  box-shadow: 0 0 18px rgba(var(--winterface-accent-rgb), 0.18);
}

.interface-section .interface-set-button.is-active span {
  background: var(--winterface-accent);
  box-shadow:
    0 0 16px rgba(var(--winterface-accent-rgb), 0.72),
    0 0 34px rgba(var(--winterface-accent-rgb), 0.22);
}

.interface-section.interface-system-set-media .interface-playback-status:not(.interface-playback-is-playing),
.interface-section.interface-system-set-media .interface-media-toggle {
  border-color: rgba(236, 72, 153, 0.34);
  box-shadow:
    0 0 28px rgba(236, 72, 153, 0.13),
    inset 0 0 24px rgba(236, 72, 153, 0.05);
}

.interface-section.interface-system-set-operations .interface-playback-status,
.interface-section.interface-system-set-operations .interface-media-toggle {
  border-color: rgba(139, 92, 246, 0.34);
  box-shadow:
    0 0 28px rgba(139, 92, 246, 0.13),
    inset 0 0 24px rgba(139, 92, 246, 0.05);
}

body.winterface-offline .interface-section .interface-path,
body.winterface-offline .interface-section .interface-rail,
body.winterface-offline .interface-section .interface-shell {
  filter: saturate(0.74);
}


/* =========================
   WINTERFACE CORE + RIGHT PANEL CYAN TEXT FIX
   Keeps mode color changes on the left pathway rail only.
   Middle/core and right/status content labels remain cyan in all modes.
========================= */

.interface-section .interface-core .panel-label,
.interface-section .interface-core [data-interface-kicker],
.interface-section .interface-core .interface-command-prefix,
.interface-section .interface-core .interface-showcase-caption span,
.interface-section .interface-side-panel .interface-output-label,
.interface-section .interface-side-panel [data-interface-output-label],
.interface-section .interface-side-panel .interface-jump-link:not(:hover):not(:focus-visible) {
  color: var(--cyan) !important;
}

.interface-section .interface-core .interface-command-prefix,
.interface-section .interface-core .panel-label,
.interface-section .interface-core [data-interface-kicker],
.interface-section .interface-core .interface-showcase-caption span,
.interface-section .interface-side-panel .interface-output-label,
.interface-section .interface-side-panel [data-interface-output-label] {
  text-shadow:
    0 0 10px rgba(56, 189, 248, 0.52),
    0 0 22px rgba(56, 189, 248, 0.18);
}

.interface-section .interface-core .interface-cursor {
  background: var(--cyan) !important;
  box-shadow:
    0 0 12px rgba(56, 189, 248, 0.94),
    0 0 26px rgba(56, 189, 248, 0.46),
    0 0 44px rgba(56, 189, 248, 0.22) !important;
}

.interface-section .interface-core .interface-showcase-frame,
.interface-section .interface-core .interface-video-frame,
.interface-section .interface-core .interface-command-line {
  border-color: rgba(56, 189, 248, 0.42) !important;
}

.interface-section .interface-side-panel .interface-system-list li::before {
  background: var(--cyan) !important;
  box-shadow:
    0 0 10px rgba(56, 189, 248, 0.96),
    0 0 22px rgba(56, 189, 248, 0.56),
    0 0 38px rgba(56, 189, 248, 0.25) !important;
}

/* =========================
   WINTERFACE SHOWCASE STATUS BUTTON PINK MATCH
   Keeps the Showcase Bay Active / Live Playback status button aligned with the pink Showcase rail.
   Launch Image and Play Intel buttons intentionally remain on the standard cyan/core treatment.
   CSS-only: no HTML or JavaScript changes.
========================= */

.interface-section.interface-system-set-media .interface-media-actions .interface-playback-status:not(.interface-playback-is-playing) {
  color: var(--text) !important;
  border-color: rgba(236, 72, 153, 0.58) !important;
  background:
    linear-gradient(145deg, rgba(236, 72, 153, 0.135), rgba(255, 255, 255, 0.050)),
    radial-gradient(circle at 16% 18%, rgba(236, 72, 153, 0.22), transparent 44%),
    radial-gradient(circle at 90% 88%, rgba(139, 92, 246, 0.105), transparent 48%),
    rgba(255, 255, 255, 0.045) !important;
  box-shadow:
    0 0 0 1px rgba(236, 72, 153, 0.060),
    0 16px 38px rgba(0, 0, 0, 0.24),
    0 0 24px rgba(236, 72, 153, 0.16),
    inset 0 0 26px rgba(236, 72, 153, 0.038) !important;
}

.interface-section.interface-system-set-media .interface-media-actions .interface-playback-status:not(.interface-playback-is-playing)::before {
  background:
    linear-gradient(90deg, transparent, rgba(236, 72, 153, 0.34), rgba(139, 92, 246, 0.18), transparent) !important;
  opacity: 0.62 !important;
}

.interface-section.interface-system-set-media .interface-media-actions .interface-playback-status:not(.interface-playback-is-playing)::after {
  border-color: rgba(255, 255, 255, 0.060) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.070),
    inset 0 -1px 0 rgba(236, 72, 153, 0.070) !important;
}

.interface-section.interface-system-set-media .interface-media-actions .interface-playback-dot {
  background: var(--pink) !important;
  box-shadow:
    0 0 12px rgba(236, 72, 153, 0.92),
    0 0 28px rgba(236, 72, 153, 0.46),
    0 0 44px rgba(236, 72, 153, 0.22) !important;
}

.interface-section.interface-system-set-media .interface-media-actions .interface-playback-status.interface-playback-is-playing .interface-playback-dot {
  background: #ef4444 !important;
  box-shadow:
    0 0 12px rgba(239, 68, 68, 0.92),
    0 0 28px rgba(239, 68, 68, 0.46),
    0 0 42px rgba(236, 72, 153, 0.22) !important;
}

.interface-section.interface-system-set-media .interface-media-actions .interface-playback-status:not(.interface-playback-is-playing):hover,
.interface-section.interface-system-set-media .interface-media-actions .interface-playback-status:not(.interface-playback-is-playing):focus-visible {
  transform: translateY(-2px) !important;
  color: var(--text) !important;
  border-color: rgba(236, 72, 153, 0.74) !important;
  background:
    linear-gradient(145deg, rgba(236, 72, 153, 0.185), rgba(255, 255, 255, 0.060)),
    radial-gradient(circle at 16% 18%, rgba(236, 72, 153, 0.28), transparent 44%),
    radial-gradient(circle at 90% 88%, rgba(139, 92, 246, 0.13), transparent 48%),
    rgba(255, 255, 255, 0.056) !important;
  box-shadow:
    0 0 0 1px rgba(236, 72, 153, 0.080),
    0 18px 42px rgba(0, 0, 0, 0.26),
    0 0 32px rgba(236, 72, 153, 0.22),
    0 0 52px rgba(139, 92, 246, 0.09),
    inset 0 0 30px rgba(236, 72, 153, 0.055) !important;
}

.interface-section.interface-system-set-media .interface-media-actions .interface-playback-status:not(.interface-playback-is-playing):hover::before,
.interface-section.interface-system-set-media .interface-media-actions .interface-playback-status:not(.interface-playback-is-playing):focus-visible::before {
  background:
    linear-gradient(90deg, transparent, rgba(236, 72, 153, 0.42), rgba(139, 92, 246, 0.22), transparent) !important;
  opacity: 0.72 !important;
}


/* =========================
   RESTORED SHOWCASE BAY MUTE BUTTON
========================= */

.interface-media-mute {
  position: relative;
  isolation: isolate;
  flex: 0 0 auto;
  width: 3.9rem;
  height: 3.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--text);
  background: transparent;
  cursor: pointer;
  transform: translateY(0.18rem);
  transition:
    transform 0.2s ease,
    filter 0.2s ease;
}

.interface-media-mute::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.32rem;
  z-index: -1;
  width: 2.9rem;
  height: 0.66rem;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(112, 78, 190, 0.34), rgba(46, 24, 82, 0.18) 42%, transparent 72%);
  filter: blur(2px);
  opacity: 0.72;
  pointer-events: none;
}

.interface-media-mute-stick {
  position: absolute;
  left: 50%;
  bottom: 0.18rem;
  width: 0.48rem;
  height: 1.35rem;
  transform: translateX(-50%);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.18), transparent 22%),
    linear-gradient(180deg, rgba(101, 73, 178, 0.72), rgba(27, 15, 55, 0.88));
  border: 1px solid rgba(143, 111, 211, 0.30);
  box-shadow:
    inset 0 0 9px rgba(248, 250, 252, 0.08),
    0 0 16px rgba(104, 76, 184, 0.20);
}

.interface-media-mute-orb {
  position: relative;
  width: 2.76rem;
  height: 2.76rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(132, 100, 206, 0.58);
  background:
    radial-gradient(circle at 32% 24%, rgba(220, 210, 255, 0.30), transparent 20%),
    radial-gradient(circle at 46% 46%, rgba(99, 72, 178, 0.82), rgba(55, 33, 110, 0.90) 48%, rgba(18, 12, 43, 0.98) 100%);
  box-shadow:
    inset 0 0 14px rgba(215, 205, 255, 0.10),
    inset 0 -10px 18px rgba(18, 12, 43, 0.58),
    0 0 16px rgba(111, 83, 198, 0.38),
    0 0 34px rgba(76, 50, 155, 0.18);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.interface-media-mute-orb::before,
.interface-media-mute-orb::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.interface-media-mute-orb::before {
  inset: -0.46rem;
  border: 1px solid rgba(125, 92, 198, 0.18);
  box-shadow:
    0 0 20px rgba(100, 74, 184, 0.16),
    inset 0 0 16px rgba(81, 56, 160, 0.08);
}

.interface-media-mute-orb::after {
  inset: 0.34rem;
  border: 1px solid rgba(248, 250, 252, 0.13);
  opacity: 0.68;
}

.interface-media-mute-icon {
  position: relative;
  z-index: 1;
  width: 1.22rem;
  height: 1.22rem;
  overflow: visible;
  filter: drop-shadow(0 0 6px rgba(248, 250, 252, 0.28));
}

.interface-media-mute-icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.interface-media-mute-speaker {
  fill: currentColor !important;
  stroke-width: 0 !important;
}

.interface-media-mute-slash {
  opacity: 0;
  stroke: #f8fafc;
  stroke-width: 2.15 !important;
  transition: opacity 0.18s ease;
}

.interface-media-mute:hover,
.interface-media-mute:focus-visible {
  transform: translateY(-0.03rem) scale(1.04);
  filter: saturate(1.1);
}

.interface-media-mute:hover .interface-media-mute-orb,
.interface-media-mute:focus-visible .interface-media-mute-orb {
  border-color: rgba(151, 124, 220, 0.78);
  box-shadow:
    inset 0 0 16px rgba(222, 214, 255, 0.13),
    inset 0 -10px 18px rgba(18, 12, 43, 0.52),
    0 0 22px rgba(112, 84, 198, 0.46),
    0 0 42px rgba(76, 50, 155, 0.20);
}

.interface-media-mute.is-muted .interface-media-mute-orb {
  background:
    radial-gradient(circle at 32% 24%, rgba(218, 208, 255, 0.26), transparent 21%),
    radial-gradient(circle at 46% 46%, rgba(82, 59, 153, 0.86), rgba(45, 27, 96, 0.92) 50%, rgba(16, 10, 39, 0.98) 100%);
  box-shadow:
    inset 0 0 14px rgba(215, 205, 255, 0.09),
    inset 0 -10px 18px rgba(18, 12, 43, 0.58),
    0 0 20px rgba(106, 80, 196, 0.42),
    0 0 38px rgba(62, 42, 136, 0.22);
}

.interface-media-mute.is-muted .interface-media-mute-wave {
  opacity: 0;
}

.interface-media-mute.is-muted .interface-media-mute-slash {
  opacity: 1;
}

@media (max-width: 768px) {
  .interface-media-mute {
    align-self: center;
    margin: 0.15rem auto;
  }
}

/* Keep the Showcase Bay controls in status / orb / expand order. */
.interface-media-actions {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center !important;
}

@media (max-width: 640px) {
  .interface-media-actions {
    grid-template-columns: 1fr !important;
  }
}


/* =========================
   WINTERFACE FULLSCREEN ORB + CONTROL SCALE PATCH
   Scope: WInterface only.
========================= */

.interface-maximize-button {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.54rem;
  height: 1.54rem;
  margin-left: 0.05rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  color: var(--cyan);
  background:
    radial-gradient(circle at 35% 30%, rgba(248, 250, 252, 0.16), transparent 28%),
    rgba(255, 255, 255, 0.045);
  cursor: pointer;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease;
}

.interface-maximize-button:hover,
.interface-maximize-button:focus-visible,
.interface-maximize-button[aria-pressed="true"] {
  transform: translateY(-1px) scale(1.08);
  border-color: rgba(56, 189, 248, 0.56);
  background:
    radial-gradient(circle at 35% 30%, rgba(248, 250, 252, 0.22), transparent 28%),
    rgba(56, 189, 248, 0.08);
  box-shadow:
    0 0 18px rgba(56, 189, 248, 0.18),
    inset 0 0 16px rgba(56, 189, 248, 0.055);
}

.interface-maximize-button[disabled] {
  opacity: 0.48;
  cursor: not-allowed;
  transform: none;
}

.interface-maximize-button i {
  pointer-events: none;
}

.interface-system-set-operations .interface-maximize-button {
  color: var(--violet);
}

.interface-system-set-media .interface-maximize-button {
  color: var(--pink);
}

.interface-system-set-operations .interface-maximize-button:hover,
.interface-system-set-operations .interface-maximize-button:focus-visible,
.interface-system-set-operations .interface-maximize-button[aria-pressed="true"] {
  border-color: rgba(139, 92, 246, 0.58);
  background:
    radial-gradient(circle at 35% 30%, rgba(248, 250, 252, 0.20), transparent 28%),
    rgba(139, 92, 246, 0.09);
  box-shadow:
    0 0 18px rgba(139, 92, 246, 0.20),
    inset 0 0 16px rgba(139, 92, 246, 0.055);
}

.interface-system-set-media .interface-maximize-button:hover,
.interface-system-set-media .interface-maximize-button:focus-visible,
.interface-system-set-media .interface-maximize-button[aria-pressed="true"] {
  border-color: rgba(236, 72, 153, 0.58);
  background:
    radial-gradient(circle at 35% 30%, rgba(248, 250, 252, 0.20), transparent 28%),
    rgba(236, 72, 153, 0.09);
  box-shadow:
    0 0 18px rgba(236, 72, 153, 0.22),
    inset 0 0 16px rgba(236, 72, 153, 0.055);
}

.interface-section .interface-media-actions .interface-playback-status,
.interface-section .interface-media-actions .interface-media-toggle {
  min-height: 2.18rem;
  padding: 0.46rem 0.78rem;
}

.interface-section .interface-side-panel .interface-jump-link {
  min-height: 2.75rem;
  padding: 0.72rem 0.9rem;
}

@media (min-width: 900px) {
  html.winterface-maximized,
  body.winterface-maximized {
    overscroll-behavior: none;
  }

  body.winterface-maximized .footer,
  body.winterface-maximized .skip-link {
    visibility: hidden;
  }

  .interface-section.is-winterface-maximized {
    position: fixed;
    inset: 0;
    z-index: 10000;
    max-width: none;
    width: 100vw;
    height: 100dvh;
    margin: 0;
    padding: clamp(0.55rem, 1vw, 0.9rem);
    overflow: hidden;
    background:
      radial-gradient(circle at 16% 12%, rgba(56, 189, 248, 0.22), transparent 36%),
      radial-gradient(circle at 84% 24%, rgba(139, 92, 246, 0.24), transparent 40%),
      radial-gradient(circle at 52% 92%, rgba(236, 72, 153, 0.16), transparent 42%),
      rgba(5, 8, 22, 0.96);
  }

  .interface-section.is-winterface-maximized::before {
    content: none;
  }

  .interface-section.is-winterface-maximized .interface-header {
    display: none;
  }

  .interface-section.is-winterface-maximized .interface-shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 0;
    padding: clamp(0.75rem, 1.05vw, 1.05rem);
    border-radius: clamp(20px, 2vw, 30px);
  }

  .interface-section.is-winterface-maximized .interface-shell::before {
    border-radius: inherit;
  }

  .interface-section.is-winterface-maximized .interface-status-bar {
    flex: 0 0 auto;
    margin-bottom: clamp(0.62rem, 0.9vw, 0.9rem);
  }

  .interface-section.is-winterface-maximized .interface-grid {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    align-items: stretch;
    grid-template-columns: minmax(210px, 0.62fr) minmax(0, 1.58fr) minmax(250px, 0.82fr);
    gap: clamp(0.65rem, 0.85vw, 0.95rem);
  }

  .interface-section.is-winterface-maximized.interface-system-media-expanded .interface-grid {
    grid-template-columns: minmax(210px, 0.48fr) minmax(0, 2fr);
  }

  .interface-section.is-winterface-maximized .interface-rail,
  .interface-section.is-winterface-maximized .interface-core,
  .interface-section.is-winterface-maximized .interface-side-panel {
    min-height: 0;
    max-height: none;
    overflow: hidden;
  }

  .interface-section.is-winterface-maximized .interface-rail {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .interface-section.is-winterface-maximized .interface-path-list {
    min-height: 0;
    grid-template-rows: repeat(6, minmax(0, 1fr));
  }

  .interface-section.is-winterface-maximized .interface-core {
    justify-content: flex-start;
  }

  .interface-section.is-winterface-maximized .interface-response[data-interface-response] {
    min-height: 0;
  }

  .interface-section.is-winterface-maximized .interface-side-panel {
    grid-template-rows: minmax(7.25rem, auto) minmax(0, 1fr) minmax(4.5rem, auto);
  }

  .interface-section.is-winterface-maximized .interface-output-card,
  .interface-section.is-winterface-maximized .interface-output-card-soft,
  .interface-section.is-winterface-maximized .interface-jump-link {
    min-height: 0;
  }

  .interface-section.is-winterface-maximized .interface-media-panel:not([hidden]) {
    min-height: 0;
  }

  .interface-section.is-winterface-maximized .interface-showcase-frame,
  .interface-section.is-winterface-maximized .interface-video-frame {
    max-height: min(56vh, 620px);
  }

  .interface-section.is-winterface-maximized .interface-showcase-caption strong {
    font-size: clamp(1.35rem, 2vw, 2.15rem);
  }
}

@media (max-width: 899px) {
  .interface-maximize-button {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .interface-maximize-button,
  .interface-section.is-winterface-maximized,
  .interface-section.is-winterface-maximized .interface-shell {
    transition: none !important;
  }
}

/* =========================
   WINTERFACE FULLSCREEN SHOWCASE CONTROL CLEARANCE PATCH
   Moves only the middle Showcase Bay control strip slightly upward while WInterface is maximized.
   CSS-only: no HTML, JavaScript, content, audio, or non-WInterface layout changes.
========================= */

@media (min-width: 900px) {
  .interface-section.is-winterface-maximized .interface-media-actions {
    transform: translateY(-6px);
  }
}


/* =========================
   WINTERFACE SIGNAL PULSE MINI-CONSOLE
   Adds a compact contextual readout inside the Live Systems card.
   Scoped to WInterface only.
========================= */

.interface-signal-pulse {
  position: relative;
  margin-top: 1rem;
  padding: 0.82rem;
  border-radius: 16px;
  border: 1px solid rgba(56, 189, 248, 0.24);
  background:
    linear-gradient(145deg, rgba(56, 189, 248, 0.075), rgba(139, 92, 246, 0.040)),
    radial-gradient(circle at 12% 18%, rgba(56, 189, 248, 0.10), transparent 48%),
    rgba(255, 255, 255, 0.030);
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.030),
    0 12px 28px rgba(0, 0, 0, 0.16),
    0 0 22px rgba(56, 189, 248, 0.080),
    inset 0 0 18px rgba(56, 189, 248, 0.026);
  overflow: hidden;
}

.interface-signal-pulse::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.13), rgba(139, 92, 246, 0.08), transparent);
  opacity: 0.34;
  transform: translateX(-76%);
  animation: interfacePlaybackSweep 5.6s ease-in-out infinite;
  pointer-events: none;
}

.interface-signal-pulse > * {
  position: relative;
  z-index: 1;
}

.interface-signal-pulse-label {
  display: block;
  margin-bottom: 0.58rem;
  color: var(--cyan);
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(0.62rem, 0.82vw, 0.72rem);
  font-weight: 950;
  letter-spacing: 0.145em;
  line-height: 1.05;
  text-transform: uppercase;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.72),
    0 0 11px rgba(56, 189, 248, 0.42);
}

.interface-signal-pulse-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.42rem;
}

.interface-signal-pulse-chip {
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  min-height: 2rem;
  padding: 0.42rem 0.46rem;
  border-radius: 999px;
  border: 1px solid rgba(56, 189, 248, 0.22);
  color: var(--muted-strong);
  background:
    linear-gradient(145deg, rgba(56, 189, 248, 0.060), rgba(139, 92, 246, 0.035)),
    rgba(255, 255, 255, 0.028);
  box-shadow:
    inset 0 0 14px rgba(56, 189, 248, 0.026),
    0 0 12px rgba(56, 189, 248, 0.045);
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(0.58rem, 0.78vw, 0.68rem);
  font-weight: 900;
  letter-spacing: 0.07em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition:
    transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.interface-signal-pulse-chip:hover,
.interface-signal-pulse-chip:focus-visible,
.interface-signal-pulse-chip.is-active {
  transform: translateY(-2px);
  color: var(--text);
  border-color: rgba(56, 189, 248, 0.58);
  background:
    linear-gradient(145deg, rgba(56, 189, 248, 0.14), rgba(139, 92, 246, 0.075)),
    rgba(255, 255, 255, 0.044);
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.070),
    0 0 20px rgba(56, 189, 248, 0.14),
    inset 0 0 18px rgba(56, 189, 248, 0.048);
}

.interface-signal-pulse-readout {
  min-height: 2.55rem;
  margin: 0.64rem 0 0 !important;
  max-width: none !important;
  color: var(--muted-strong) !important;
  font-size: clamp(0.76rem, 0.92vw, 0.86rem) !important;
  line-height: 1.32 !important;
}

.interface-system-set-media .interface-signal-pulse {
  border-color: rgba(236, 72, 153, 0.26);
  background:
    linear-gradient(145deg, rgba(236, 72, 153, 0.075), rgba(56, 189, 248, 0.038)),
    radial-gradient(circle at 12% 18%, rgba(236, 72, 153, 0.10), transparent 48%),
    rgba(255, 255, 255, 0.030);
  box-shadow:
    0 0 0 1px rgba(236, 72, 153, 0.032),
    0 12px 28px rgba(0, 0, 0, 0.16),
    0 0 22px rgba(236, 72, 153, 0.080),
    inset 0 0 18px rgba(236, 72, 153, 0.026);
}

.interface-system-set-media .interface-signal-pulse::before {
  background: linear-gradient(90deg, transparent, rgba(236, 72, 153, 0.14), rgba(56, 189, 248, 0.08), transparent);
}

.interface-system-set-operations .interface-signal-pulse-chip:hover,
.interface-system-set-operations .interface-signal-pulse-chip:focus-visible,
.interface-system-set-operations .interface-signal-pulse-chip.is-active {
  border-color: rgba(139, 92, 246, 0.58);
  background:
    linear-gradient(145deg, rgba(139, 92, 246, 0.14), rgba(56, 189, 248, 0.060)),
    rgba(255, 255, 255, 0.044);
  box-shadow:
    0 0 0 1px rgba(139, 92, 246, 0.070),
    0 0 20px rgba(139, 92, 246, 0.14),
    inset 0 0 18px rgba(139, 92, 246, 0.048);
}

.interface-system-set-media .interface-signal-pulse-chip:hover,
.interface-system-set-media .interface-signal-pulse-chip:focus-visible,
.interface-system-set-media .interface-signal-pulse-chip.is-active {
  border-color: rgba(236, 72, 153, 0.58);
  background:
    linear-gradient(145deg, rgba(236, 72, 153, 0.14), rgba(56, 189, 248, 0.060)),
    rgba(255, 255, 255, 0.044);
  box-shadow:
    0 0 0 1px rgba(236, 72, 153, 0.070),
    0 0 20px rgba(236, 72, 153, 0.14),
    inset 0 0 18px rgba(236, 72, 153, 0.048);
}

@media (max-width: 1100px) {
  .interface-signal-pulse-readout {
    min-height: auto;
  }
}

@media (max-width: 640px) {
  .interface-signal-pulse-chips {
    grid-template-columns: 1fr;
  }

  .interface-signal-pulse-chip {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .interface-signal-pulse::before {
    animation: none !important;
    opacity: 0.16;
    transform: none;
  }

  .interface-signal-pulse-chip,
  .interface-signal-pulse-chip:hover,
  .interface-signal-pulse-chip:focus-visible,
  .interface-signal-pulse-chip.is-active {
    transform: none !important;
    transition: none !important;
  }
}

/* =========================
   WINTERFACE SIGNAL PULSE CONSOLE REFINEMENT PATCH
   Refines the Signal Pulse area into a compact console-style readout.
   CSS-only visual adjustment scoped to the WInterface Live Systems card.
========================= */

.interface-signal-pulse {
  margin-top: 0.88rem;
  padding: 0.72rem 0.74rem 0.78rem;
  border-radius: 13px;
  border-color: rgba(56, 189, 248, 0.22);
  background:
    linear-gradient(180deg, rgba(5, 8, 22, 0.34), rgba(5, 8, 22, 0.18)),
    radial-gradient(circle at 14% 16%, rgba(56, 189, 248, 0.105), transparent 44%),
    rgba(255, 255, 255, 0.024);
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.026),
    0 10px 22px rgba(0, 0, 0, 0.14),
    0 0 18px rgba(56, 189, 248, 0.058),
    inset 0 0 16px rgba(56, 189, 248, 0.022);
}

.interface-signal-pulse::after {
  content: "";
  position: absolute;
  left: 0.74rem;
  right: 0.74rem;
  top: 2.28rem;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.44), rgba(139, 92, 246, 0.24), transparent);
  opacity: 0.58;
  pointer-events: none;
}

.interface-signal-pulse-label {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  margin-bottom: 0.76rem;
  font-size: clamp(0.58rem, 0.74vw, 0.66rem);
  letter-spacing: 0.18em;
}

.interface-signal-pulse-label::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow:
    0 0 8px rgba(56, 189, 248, 0.86),
    0 0 18px rgba(56, 189, 248, 0.32);
}

.interface-signal-pulse-chips {
  gap: 0.34rem;
}

.interface-signal-pulse-chip {
  min-height: 1.82rem;
  padding: 0.36rem 0.34rem;
  border-radius: 10px;
  border-color: rgba(56, 189, 248, 0.18);
  background:
    linear-gradient(180deg, rgba(56, 189, 248, 0.075), rgba(5, 8, 22, 0.12)),
    rgba(255, 255, 255, 0.020);
  box-shadow:
    inset 0 0 12px rgba(56, 189, 248, 0.018),
    0 0 10px rgba(56, 189, 248, 0.034);
  font-size: clamp(0.50rem, 0.66vw, 0.58rem);
  letter-spacing: 0.075em;
  text-overflow: clip;
}

.interface-signal-pulse-chip:hover,
.interface-signal-pulse-chip:focus-visible,
.interface-signal-pulse-chip.is-active {
  transform: translateY(-1px);
  border-color: rgba(56, 189, 248, 0.62);
  background:
    linear-gradient(180deg, rgba(56, 189, 248, 0.18), rgba(5, 8, 22, 0.12)),
    rgba(255, 255, 255, 0.032);
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.080),
    0 0 18px rgba(56, 189, 248, 0.16),
    inset 0 0 16px rgba(56, 189, 248, 0.045);
}

.interface-signal-pulse-readout {
  position: relative;
  min-height: 1.86rem;
  margin-top: 0.58rem !important;
  padding: 0.46rem 0.54rem 0.44rem 0.72rem;
  border-radius: 9px;
  border: 1px solid rgba(56, 189, 248, 0.13);
  background: rgba(5, 8, 22, 0.22);
  color: rgba(199, 210, 254, 0.94) !important;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(0.58rem, 0.72vw, 0.66rem) !important;
  font-weight: 850;
  letter-spacing: 0.075em;
  line-height: 1.18 !important;
  text-transform: uppercase;
}

.interface-signal-pulse-readout::before {
  content: ">";
  position: absolute;
  left: 0.28rem;
  top: 0.45rem;
  color: var(--cyan);
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.62);
}

.interface-system-set-operations .interface-signal-pulse-label::before {
  background: var(--violet);
  box-shadow:
    0 0 8px rgba(139, 92, 246, 0.82),
    0 0 18px rgba(139, 92, 246, 0.32);
}

.interface-system-set-media .interface-signal-pulse-label::before {
  background: var(--pink);
  box-shadow:
    0 0 8px rgba(236, 72, 153, 0.82),
    0 0 18px rgba(236, 72, 153, 0.32);
}

.interface-system-set-operations .interface-signal-pulse::after {
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.44), rgba(56, 189, 248, 0.20), transparent);
}

.interface-system-set-media .interface-signal-pulse::after {
  background: linear-gradient(90deg, rgba(236, 72, 153, 0.44), rgba(56, 189, 248, 0.20), transparent);
}

@media (max-width: 640px) {
  .interface-signal-pulse-chip {
    min-height: 2rem;
  }
}

/* =========================
   WINTERFACE SIGNAL PULSE HEADING REMOVAL PATCH
   Removes the Signal Pulse heading text and divider for a cleaner console block.
   CSS-only: no HTML, JavaScript, or content changes.
========================= */

.interface-signal-pulse {
  padding-top: 0.72rem;
}

.interface-signal-pulse-label {
  display: none !important;
}

.interface-signal-pulse::after {
  content: none !important;
}

/* =========================
   WINTERFACE SIGNAL PULSE CYAN BUTTON LIFT PATCH
   Gives the three Signal Pulse console buttons the same cyan/blue energy as the Live Systems orbs.
   CSS-only: no HTML, JavaScript, content, fullscreen, or audio changes.
========================= */

.interface-signal-pulse-chip,
.interface-system-set-operations .interface-signal-pulse-chip,
.interface-system-set-media .interface-signal-pulse-chip {
  color: #dff7ff !important;
  border-color: rgba(56, 189, 248, 0.34) !important;
  background:
    linear-gradient(180deg, rgba(56, 189, 248, 0.135), rgba(14, 23, 47, 0.28)),
    radial-gradient(circle at 50% 0%, rgba(125, 211, 252, 0.20), transparent 62%),
    rgba(255, 255, 255, 0.024) !important;
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.040),
    0 0 14px rgba(56, 189, 248, 0.085),
    inset 0 0 14px rgba(56, 189, 248, 0.040) !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.72),
    0 0 8px rgba(56, 189, 248, 0.32);
}

.interface-signal-pulse-chip:hover,
.interface-signal-pulse-chip:focus-visible,
.interface-signal-pulse-chip.is-active,
.interface-system-set-operations .interface-signal-pulse-chip:hover,
.interface-system-set-operations .interface-signal-pulse-chip:focus-visible,
.interface-system-set-operations .interface-signal-pulse-chip.is-active,
.interface-system-set-media .interface-signal-pulse-chip:hover,
.interface-system-set-media .interface-signal-pulse-chip:focus-visible,
.interface-system-set-media .interface-signal-pulse-chip.is-active {
  transform: translateY(-2px) scale(1.015) !important;
  color: #f8fbff !important;
  border-color: rgba(125, 211, 252, 0.82) !important;
  background:
    linear-gradient(180deg, rgba(56, 189, 248, 0.28), rgba(14, 23, 47, 0.24)),
    radial-gradient(circle at 50% 0%, rgba(125, 211, 252, 0.36), transparent 62%),
    rgba(255, 255, 255, 0.038) !important;
  box-shadow:
    0 0 0 1px rgba(125, 211, 252, 0.12),
    0 0 18px rgba(56, 189, 248, 0.26),
    0 0 34px rgba(56, 189, 248, 0.13),
    inset 0 0 18px rgba(56, 189, 248, 0.075) !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.78),
    0 0 11px rgba(125, 211, 252, 0.58);
}

@media (prefers-reduced-motion: reduce) {
  .interface-signal-pulse-chip:hover,
  .interface-signal-pulse-chip:focus-visible,
  .interface-signal-pulse-chip.is-active {
    transform: none !important;
  }
}

/* =========================
   WINTERFACE SIGNAL PULSE CONTROLLER CLUSTER PATCH
   Reshapes the three Signal Pulse buttons into a compact three-node control-pad cluster.
   CSS-only: no HTML, JavaScript, content, fullscreen, or audio changes.
========================= */

.interface-signal-pulse {
  padding: 0.74rem 0.76rem 0.78rem;
}

.interface-signal-pulse-chips {
  width: min(100%, 15.5rem);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "pulseTop pulseTop"
    "pulseLeft pulseRight";
  gap: 0.38rem;
  align-items: center;
  justify-items: stretch;
}

.interface-signal-pulse-chip {
  position: relative;
  overflow: hidden;
  min-height: 2.18rem;
  border-radius: 12px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #e8fbff !important;
  border-color: rgba(56, 189, 248, 0.42) !important;
  background:
    linear-gradient(180deg, rgba(56, 189, 248, 0.155), rgba(5, 8, 22, 0.30)),
    radial-gradient(circle at 50% 0%, rgba(125, 211, 252, 0.24), transparent 64%),
    rgba(255, 255, 255, 0.026) !important;
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.052),
    0 0 15px rgba(56, 189, 248, 0.105),
    inset 0 0 16px rgba(56, 189, 248, 0.046),
    inset 0 -8px 16px rgba(0, 0, 0, 0.16) !important;
}

.interface-signal-pulse-chip::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.12), transparent 42%),
    linear-gradient(90deg, transparent, rgba(125, 211, 252, 0.10), transparent);
  opacity: 0.58;
  pointer-events: none;
}

.interface-signal-pulse-chip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.22rem;
  width: 38%;
  height: 1px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(125, 211, 252, 0.44);
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.38);
  opacity: 0.52;
  pointer-events: none;
}

.interface-signal-pulse-chip:nth-child(1) {
  grid-area: pulseTop;
  width: min(7.8rem, 64%);
  justify-self: center;
  border-radius: 13px 13px 10px 10px !important;
}

.interface-signal-pulse-chip:nth-child(2) {
  grid-area: pulseLeft;
  border-radius: 13px 10px 10px 13px !important;
}

.interface-signal-pulse-chip:nth-child(3) {
  grid-area: pulseRight;
  border-radius: 10px 13px 13px 10px !important;
}

.interface-signal-pulse-chip:hover,
.interface-signal-pulse-chip:focus-visible,
.interface-signal-pulse-chip.is-active,
.interface-system-set-operations .interface-signal-pulse-chip:hover,
.interface-system-set-operations .interface-signal-pulse-chip:focus-visible,
.interface-system-set-operations .interface-signal-pulse-chip.is-active,
.interface-system-set-media .interface-signal-pulse-chip:hover,
.interface-system-set-media .interface-signal-pulse-chip:focus-visible,
.interface-system-set-media .interface-signal-pulse-chip.is-active {
  transform: translateY(-2px) scale(1.025) !important;
  color: #ffffff !important;
  border-color: rgba(125, 211, 252, 0.92) !important;
  background:
    linear-gradient(180deg, rgba(56, 189, 248, 0.34), rgba(5, 8, 22, 0.24)),
    radial-gradient(circle at 50% 0%, rgba(125, 211, 252, 0.42), transparent 64%),
    rgba(255, 255, 255, 0.044) !important;
  box-shadow:
    0 0 0 1px rgba(125, 211, 252, 0.16),
    0 0 20px rgba(56, 189, 248, 0.34),
    0 0 38px rgba(56, 189, 248, 0.18),
    inset 0 0 20px rgba(56, 189, 248, 0.095),
    inset 0 -8px 16px rgba(0, 0, 0, 0.12) !important;
}

.interface-signal-pulse-chip:hover::before,
.interface-signal-pulse-chip:focus-visible::before,
.interface-signal-pulse-chip.is-active::before {
  opacity: 0.82;
}

.interface-signal-pulse-chip:hover::after,
.interface-signal-pulse-chip:focus-visible::after,
.interface-signal-pulse-chip.is-active::after {
  opacity: 0.88;
  background: rgba(224, 247, 255, 0.78);
  box-shadow:
    0 0 10px rgba(125, 211, 252, 0.76),
    0 0 18px rgba(56, 189, 248, 0.42);
}

.interface-signal-pulse-readout {
  margin-top: 0.64rem !important;
}

@media (max-width: 640px) {
  .interface-signal-pulse-chips {
    width: 100%;
    grid-template-columns: 1fr;
    grid-template-areas:
      "pulseTop"
      "pulseLeft"
      "pulseRight";
  }

  .interface-signal-pulse-chip:nth-child(1) {
    width: 100%;
  }

  .interface-signal-pulse-chip:nth-child(1),
  .interface-signal-pulse-chip:nth-child(2),
  .interface-signal-pulse-chip:nth-child(3) {
    border-radius: 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .interface-signal-pulse-chip:hover,
  .interface-signal-pulse-chip:focus-visible,
  .interface-signal-pulse-chip.is-active {
    transform: none !important;
  }
}

/* =========================
   WINTERFACE SIGNAL PULSE CONTROLLER TEXT ALIGNMENT PATCH
   Centers the console readout beneath the controller cluster and adds a little more breathing room above the top node.
   CSS-only: no HTML, JavaScript, page content, fullscreen, or audio changes.
========================= */

.interface-signal-pulse {
  padding-top: 0.95rem;
}

.interface-signal-pulse-chips {
  margin-top: 0.06rem;
}

.interface-signal-pulse-readout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;
  text-align: center !important;
  padding: 0.48rem 0.68rem 0.46rem !important;
}

.interface-signal-pulse-readout::before {
  position: static !important;
  flex: 0 0 auto;
  margin-right: 0;
}

@media (max-width: 640px) {
  .interface-signal-pulse {
    padding-top: 0.86rem;
  }
}

/* =========================
   WINTERFACE SIGNAL PULSE TRIAD HOVER COLOR PATCH
   Maps the controller-cluster hover colors to the center telemetry triad:
   Problem = cyan/blue, Method = violet/purple, Result = magenta-red.
   CSS-only: no HTML, JavaScript, content, fullscreen, or audio changes.
========================= */

/* Re-map visual positions so the second Signal Pulse action, Method, sits in the top controller node. */
.interface-signal-pulse-chip:nth-child(1) {
  grid-area: pulseLeft;
  width: auto;
  justify-self: stretch;
  border-radius: 13px 10px 10px 13px !important;
}

.interface-signal-pulse-chip:nth-child(2) {
  grid-area: pulseTop;
  width: min(7.8rem, 64%);
  justify-self: center;
  border-radius: 13px 13px 10px 10px !important;
}

.interface-signal-pulse-chip:nth-child(3) {
  grid-area: pulseRight;
  width: auto;
  justify-self: stretch;
  border-radius: 10px 13px 13px 10px !important;
}

/* Method / top node: purple hover and active state to match the center Method orb. */
.interface-signal-pulse-chip:nth-child(2):hover,
.interface-signal-pulse-chip:nth-child(2):focus-visible,
.interface-signal-pulse-chip:nth-child(2).is-active,
.interface-system-set-operations .interface-signal-pulse-chip:nth-child(2):hover,
.interface-system-set-operations .interface-signal-pulse-chip:nth-child(2):focus-visible,
.interface-system-set-operations .interface-signal-pulse-chip:nth-child(2).is-active,
.interface-system-set-media .interface-signal-pulse-chip:nth-child(2):hover,
.interface-system-set-media .interface-signal-pulse-chip:nth-child(2):focus-visible,
.interface-system-set-media .interface-signal-pulse-chip:nth-child(2).is-active {
  border-color: rgba(167, 139, 250, 0.94) !important;
  background:
    linear-gradient(180deg, rgba(139, 92, 246, 0.36), rgba(5, 8, 22, 0.24)),
    radial-gradient(circle at 50% 0%, rgba(167, 139, 250, 0.44), transparent 64%),
    rgba(255, 255, 255, 0.044) !important;
  box-shadow:
    0 0 0 1px rgba(167, 139, 250, 0.18),
    0 0 20px rgba(139, 92, 246, 0.36),
    0 0 40px rgba(139, 92, 246, 0.20),
    inset 0 0 20px rgba(139, 92, 246, 0.10),
    inset 0 -8px 16px rgba(0, 0, 0, 0.12) !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.78),
    0 0 11px rgba(167, 139, 250, 0.62);
}

.interface-signal-pulse-chip:nth-child(2):hover::after,
.interface-signal-pulse-chip:nth-child(2):focus-visible::after,
.interface-signal-pulse-chip:nth-child(2).is-active::after {
  background: rgba(221, 214, 254, 0.82);
  box-shadow:
    0 0 10px rgba(167, 139, 250, 0.80),
    0 0 20px rgba(139, 92, 246, 0.48);
}

/* Result / right node: magenta-red hover and active state to match the center Result orb. */
.interface-signal-pulse-chip:nth-child(3):hover,
.interface-signal-pulse-chip:nth-child(3):focus-visible,
.interface-signal-pulse-chip:nth-child(3).is-active,
.interface-system-set-operations .interface-signal-pulse-chip:nth-child(3):hover,
.interface-system-set-operations .interface-signal-pulse-chip:nth-child(3):focus-visible,
.interface-system-set-operations .interface-signal-pulse-chip:nth-child(3).is-active,
.interface-system-set-media .interface-signal-pulse-chip:nth-child(3):hover,
.interface-system-set-media .interface-signal-pulse-chip:nth-child(3):focus-visible,
.interface-system-set-media .interface-signal-pulse-chip:nth-child(3).is-active {
  border-color: rgba(248, 113, 113, 0.96) !important;
  background:
    linear-gradient(180deg, rgba(239, 68, 68, 0.34), rgba(5, 8, 22, 0.24)),
    radial-gradient(circle at 50% 0%, rgba(236, 72, 153, 0.42), transparent 64%),
    rgba(255, 255, 255, 0.044) !important;
  box-shadow:
    0 0 0 1px rgba(248, 113, 113, 0.17),
    0 0 20px rgba(239, 68, 68, 0.34),
    0 0 40px rgba(236, 72, 153, 0.20),
    inset 0 0 20px rgba(239, 68, 68, 0.10),
    inset 0 -8px 16px rgba(0, 0, 0, 0.12) !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.78),
    0 0 11px rgba(248, 113, 113, 0.60);
}

.interface-signal-pulse-chip:nth-child(3):hover::after,
.interface-signal-pulse-chip:nth-child(3):focus-visible::after,
.interface-signal-pulse-chip:nth-child(3).is-active::after {
  background: rgba(254, 202, 202, 0.84);
  box-shadow:
    0 0 10px rgba(248, 113, 113, 0.82),
    0 0 20px rgba(239, 68, 68, 0.48),
    0 0 28px rgba(236, 72, 153, 0.28);
}

@media (max-width: 640px) {
  .interface-signal-pulse-chip:nth-child(1),
  .interface-signal-pulse-chip:nth-child(2),
  .interface-signal-pulse-chip:nth-child(3) {
    width: 100%;
    justify-self: stretch;
    border-radius: 12px !important;
  }
}

/* =========================
   WINTERFACE SIGNAL PULSE FINAL GLASS TRIAD COLOR PATCH
   Sets a consistent controller-color system across all 18 WInterface cards.
   Left = cyan-green glass, middle/top = purple glass, right = red/magenta glass.
   Hover/focus/active states deepen each color while preserving the glass control-surface style.
   CSS-only: no HTML, JavaScript, page content, fullscreen behavior, or audio behavior changes.
========================= */

/* Shared final glass polish for all three controller buttons. */
.interface-signal-pulse .interface-signal-pulse-chip,
.interface-system-set-operations .interface-signal-pulse .interface-signal-pulse-chip,
.interface-system-set-media .interface-signal-pulse .interface-signal-pulse-chip {
  color: #f8fafc !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 0 0 1px rgba(248, 250, 252, 0.035),
    0 0 16px rgba(56, 189, 248, 0.085),
    inset 0 1px 0 rgba(248, 250, 252, 0.145),
    inset 0 0 18px rgba(248, 250, 252, 0.035),
    inset 0 -9px 16px rgba(0, 0, 0, 0.18) !important;
}

/* LEFT NODE: cyan-green default. */
.interface-signal-pulse .interface-signal-pulse-chip:nth-child(1),
.interface-system-set-operations .interface-signal-pulse .interface-signal-pulse-chip:nth-child(1),
.interface-system-set-media .interface-signal-pulse .interface-signal-pulse-chip:nth-child(1) {
  border-color: rgba(45, 212, 191, 0.72) !important;
  background:
    linear-gradient(180deg, rgba(45, 212, 191, 0.30), rgba(14, 165, 233, 0.16) 52%, rgba(5, 8, 22, 0.28)),
    radial-gradient(circle at 50% 0%, rgba(153, 246, 228, 0.30), transparent 66%),
    rgba(255, 255, 255, 0.036) !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.78),
    0 0 10px rgba(45, 212, 191, 0.48);
}

/* MIDDLE/TOP NODE: purple default. */
.interface-signal-pulse .interface-signal-pulse-chip:nth-child(2),
.interface-system-set-operations .interface-signal-pulse .interface-signal-pulse-chip:nth-child(2),
.interface-system-set-media .interface-signal-pulse .interface-signal-pulse-chip:nth-child(2) {
  border-color: rgba(167, 139, 250, 0.74) !important;
  background:
    linear-gradient(180deg, rgba(139, 92, 246, 0.32), rgba(99, 102, 241, 0.16) 52%, rgba(5, 8, 22, 0.28)),
    radial-gradient(circle at 50% 0%, rgba(221, 214, 254, 0.27), transparent 66%),
    rgba(255, 255, 255, 0.036) !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.78),
    0 0 10px rgba(167, 139, 250, 0.50);
}

/* RIGHT NODE: red/magenta default. */
.interface-signal-pulse .interface-signal-pulse-chip:nth-child(3),
.interface-system-set-operations .interface-signal-pulse .interface-signal-pulse-chip:nth-child(3),
.interface-system-set-media .interface-signal-pulse .interface-signal-pulse-chip:nth-child(3) {
  border-color: rgba(248, 113, 113, 0.74) !important;
  background:
    linear-gradient(180deg, rgba(239, 68, 68, 0.31), rgba(236, 72, 153, 0.16) 52%, rgba(5, 8, 22, 0.28)),
    radial-gradient(circle at 50% 0%, rgba(254, 202, 202, 0.25), transparent 66%),
    rgba(255, 255, 255, 0.036) !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.78),
    0 0 10px rgba(248, 113, 113, 0.48);
}

/* LEFT NODE: darker cyan-green/blue hover, focus, and active state. */
.interface-signal-pulse .interface-signal-pulse-chip:nth-child(1):hover,
.interface-signal-pulse .interface-signal-pulse-chip:nth-child(1):focus-visible,
.interface-signal-pulse .interface-signal-pulse-chip:nth-child(1).is-active,
.interface-system-set-operations .interface-signal-pulse .interface-signal-pulse-chip:nth-child(1):hover,
.interface-system-set-operations .interface-signal-pulse .interface-signal-pulse-chip:nth-child(1):focus-visible,
.interface-system-set-operations .interface-signal-pulse .interface-signal-pulse-chip:nth-child(1).is-active,
.interface-system-set-media .interface-signal-pulse .interface-signal-pulse-chip:nth-child(1):hover,
.interface-system-set-media .interface-signal-pulse .interface-signal-pulse-chip:nth-child(1):focus-visible,
.interface-system-set-media .interface-signal-pulse .interface-signal-pulse-chip:nth-child(1).is-active {
  transform: translateY(-2px) scale(1.025) !important;
  border-color: rgba(34, 211, 238, 0.96) !important;
  background:
    linear-gradient(180deg, rgba(13, 148, 136, 0.46), rgba(8, 145, 178, 0.30) 56%, rgba(5, 8, 22, 0.24)),
    radial-gradient(circle at 50% 0%, rgba(103, 232, 249, 0.42), transparent 66%),
    rgba(255, 255, 255, 0.048) !important;
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, 0.17),
    0 0 20px rgba(13, 148, 136, 0.36),
    0 0 38px rgba(8, 145, 178, 0.24),
    inset 0 1px 0 rgba(248, 250, 252, 0.20),
    inset 0 0 22px rgba(34, 211, 238, 0.11),
    inset 0 -9px 16px rgba(0, 0, 0, 0.15) !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.82),
    0 0 12px rgba(103, 232, 249, 0.62);
}

/* MIDDLE/TOP NODE: darker purple/violet hover, focus, and active state. */
.interface-signal-pulse .interface-signal-pulse-chip:nth-child(2):hover,
.interface-signal-pulse .interface-signal-pulse-chip:nth-child(2):focus-visible,
.interface-signal-pulse .interface-signal-pulse-chip:nth-child(2).is-active,
.interface-system-set-operations .interface-signal-pulse .interface-signal-pulse-chip:nth-child(2):hover,
.interface-system-set-operations .interface-signal-pulse .interface-signal-pulse-chip:nth-child(2):focus-visible,
.interface-system-set-operations .interface-signal-pulse .interface-signal-pulse-chip:nth-child(2).is-active,
.interface-system-set-media .interface-signal-pulse .interface-signal-pulse-chip:nth-child(2):hover,
.interface-system-set-media .interface-signal-pulse .interface-signal-pulse-chip:nth-child(2):focus-visible,
.interface-system-set-media .interface-signal-pulse .interface-signal-pulse-chip:nth-child(2).is-active {
  transform: translateY(-2px) scale(1.025) !important;
  border-color: rgba(167, 139, 250, 0.98) !important;
  background:
    linear-gradient(180deg, rgba(109, 40, 217, 0.50), rgba(76, 29, 149, 0.34) 56%, rgba(5, 8, 22, 0.24)),
    radial-gradient(circle at 50% 0%, rgba(196, 181, 253, 0.42), transparent 66%),
    rgba(255, 255, 255, 0.048) !important;
  box-shadow:
    0 0 0 1px rgba(167, 139, 250, 0.18),
    0 0 20px rgba(109, 40, 217, 0.40),
    0 0 40px rgba(76, 29, 149, 0.24),
    inset 0 1px 0 rgba(248, 250, 252, 0.20),
    inset 0 0 22px rgba(167, 139, 250, 0.12),
    inset 0 -9px 16px rgba(0, 0, 0, 0.15) !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.82),
    0 0 12px rgba(196, 181, 253, 0.64);
}

/* RIGHT NODE: darker red/magenta hover, focus, and active state. */
.interface-signal-pulse .interface-signal-pulse-chip:nth-child(3):hover,
.interface-signal-pulse .interface-signal-pulse-chip:nth-child(3):focus-visible,
.interface-signal-pulse .interface-signal-pulse-chip:nth-child(3).is-active,
.interface-system-set-operations .interface-signal-pulse .interface-signal-pulse-chip:nth-child(3):hover,
.interface-system-set-operations .interface-signal-pulse .interface-signal-pulse-chip:nth-child(3):focus-visible,
.interface-system-set-operations .interface-signal-pulse .interface-signal-pulse-chip:nth-child(3).is-active,
.interface-system-set-media .interface-signal-pulse .interface-signal-pulse-chip:nth-child(3):hover,
.interface-system-set-media .interface-signal-pulse .interface-signal-pulse-chip:nth-child(3):focus-visible,
.interface-system-set-media .interface-signal-pulse .interface-signal-pulse-chip:nth-child(3).is-active {
  transform: translateY(-2px) scale(1.025) !important;
  border-color: rgba(248, 113, 113, 0.98) !important;
  background:
    linear-gradient(180deg, rgba(185, 28, 28, 0.50), rgba(190, 24, 93, 0.34) 56%, rgba(5, 8, 22, 0.24)),
    radial-gradient(circle at 50% 0%, rgba(251, 113, 133, 0.42), transparent 66%),
    rgba(255, 255, 255, 0.048) !important;
  box-shadow:
    0 0 0 1px rgba(248, 113, 113, 0.18),
    0 0 20px rgba(185, 28, 28, 0.40),
    0 0 40px rgba(190, 24, 93, 0.24),
    inset 0 1px 0 rgba(248, 250, 252, 0.20),
    inset 0 0 22px rgba(248, 113, 113, 0.12),
    inset 0 -9px 16px rgba(0, 0, 0, 0.15) !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.82),
    0 0 12px rgba(251, 113, 133, 0.64);
}

/* Match the small lower light bars to each controller button color. */
.interface-signal-pulse .interface-signal-pulse-chip:nth-child(1)::after {
  background: rgba(153, 246, 228, 0.70) !important;
  box-shadow:
    0 0 10px rgba(45, 212, 191, 0.58),
    0 0 18px rgba(14, 165, 233, 0.32) !important;
}

.interface-signal-pulse .interface-signal-pulse-chip:nth-child(2)::after {
  background: rgba(221, 214, 254, 0.72) !important;
  box-shadow:
    0 0 10px rgba(167, 139, 250, 0.60),
    0 0 18px rgba(139, 92, 246, 0.34) !important;
}

.interface-signal-pulse .interface-signal-pulse-chip:nth-child(3)::after {
  background: rgba(254, 202, 202, 0.72) !important;
  box-shadow:
    0 0 10px rgba(248, 113, 113, 0.60),
    0 0 18px rgba(236, 72, 153, 0.34) !important;
}

@media (prefers-reduced-motion: reduce) {
  .interface-signal-pulse .interface-signal-pulse-chip:hover,
  .interface-signal-pulse .interface-signal-pulse-chip:focus-visible,
  .interface-signal-pulse .interface-signal-pulse-chip.is-active {
    transform: none !important;
  }
}

/* =========================
   WINTERFACE SIGNAL PULSE AUDIO + READOUT FINAL PATCH
   Adds the closing cyan bracket marker and keeps the readout centered.
   CSS-only: no layout, copy, fullscreen, or audio setting changes.
========================= */

.interface-signal-pulse-readout::after {
  content: "<";
  position: static;
  flex: 0 0 auto;
  margin-left: 0.18rem;
  color: var(--cyan);
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.62);
}

/* =========================
   WINTERFACE NORMAL-VIEW CORE SPACING NORMALIZATION PATCH
   Balances the middle/core panel spacing in normal view only.
   Fullscreen/maximized mode is intentionally untouched.
========================= */

@media (min-width: 901px) {
  .interface-section.interface-system-set-media:not(.is-winterface-maximized) .interface-core {
    justify-content: center;
  }

  .interface-section.interface-system-set-media:not(.is-winterface-maximized) .interface-media-panel:not([hidden]) {
    margin-top: auto;
    margin-bottom: auto;
  }

  .interface-section.interface-system-set-operations:not(.is-winterface-maximized) .interface-core {
    justify-content: center;
  }

  .interface-section.interface-system-set-operations:not(.is-winterface-maximized) .interface-response[data-interface-response] {
    min-height: 22.8rem;
  }
}

/* =========================
   WINTERFACE RIGHT PANEL SIGNAL PULSE CONTAINMENT PATCH
   Keeps the Signal Pulse controller fully contained inside the Live Systems card in normal desktop view.
   Fullscreen/maximized mode is intentionally untouched.
   CSS-only: no HTML, JavaScript, content, sound, or data changes.
========================= */

@media (min-width: 901px) {
  .interface-section:not(.is-winterface-maximized) .interface-side-panel {
    grid-template-rows: minmax(7.2rem, auto) minmax(16.65rem, auto) minmax(4.85rem, auto);
    align-content: stretch;
  }

  .interface-section:not(.is-winterface-maximized) .interface-output-card-soft {
    display: flex;
    flex-direction: column;
    min-height: 16.65rem;
    overflow: hidden;
  }

  .interface-section:not(.is-winterface-maximized) .interface-output-card-soft .interface-system-list {
    flex: 0 0 auto;
  }

  .interface-section:not(.is-winterface-maximized) .interface-output-card-soft .interface-signal-pulse {
    width: 100%;
    flex: 0 0 auto;
    margin-top: auto;
    padding: 0.58rem 0.66rem 0.62rem;
  }

  .interface-section:not(.is-winterface-maximized) .interface-output-card-soft .interface-signal-pulse-chips {
    width: min(100%, 14.7rem);
    gap: 0.32rem;
  }

  .interface-section:not(.is-winterface-maximized) .interface-output-card-soft .interface-signal-pulse-chip {
    min-height: 1.98rem;
    font-size: clamp(0.48rem, 0.62vw, 0.56rem);
  }

  .interface-section:not(.is-winterface-maximized) .interface-output-card-soft .interface-signal-pulse-readout {
    min-height: 1.58rem;
    margin-top: 0.46rem !important;
    padding: 0.36rem 0.56rem 0.34rem 0.72rem;
    font-size: clamp(0.54rem, 0.66vw, 0.60rem) !important;
    line-height: 1.12 !important;
  }

  .interface-section:not(.is-winterface-maximized) .interface-output-card-soft .interface-signal-pulse-readout::before {
    top: 0.34rem;
  }
}

/* =========================
   WINTERFACE SIGNAL PULSE MODE-AWARE CONTAINER PATCH
   Makes the right-side Signal Pulse console background follow the active WInterface bay.
   Primary Systems = cyan-green / blue, Operational = purple / violet, Showcase Bay = pink / magenta.
   CSS-only: controller button colors, sounds, readout text, fullscreen, and content remain unchanged.
========================= */

.interface-section .interface-signal-pulse,
.interface-section.interface-system-set-primary .interface-signal-pulse {
  border-color: rgba(45, 212, 191, 0.34) !important;
  background:
    linear-gradient(145deg, rgba(45, 212, 191, 0.105), rgba(14, 165, 233, 0.060) 52%, rgba(5, 8, 22, 0.19)),
    radial-gradient(circle at 16% 18%, rgba(45, 212, 191, 0.16), transparent 48%),
    radial-gradient(circle at 88% 72%, rgba(56, 189, 248, 0.10), transparent 44%),
    rgba(255, 255, 255, 0.034) !important;
  box-shadow:
    0 0 0 1px rgba(45, 212, 191, 0.040),
    0 14px 30px rgba(0, 0, 0, 0.17),
    0 0 24px rgba(45, 212, 191, 0.095),
    inset 0 0 20px rgba(45, 212, 191, 0.032) !important;
}

.interface-section .interface-signal-pulse::before,
.interface-section.interface-system-set-primary .interface-signal-pulse::before {
  background: linear-gradient(90deg, transparent, rgba(45, 212, 191, 0.16), rgba(56, 189, 248, 0.10), transparent) !important;
  opacity: 0.42 !important;
}

.interface-section.interface-system-set-operations .interface-signal-pulse {
  border-color: rgba(139, 92, 246, 0.34) !important;
  background:
    linear-gradient(145deg, rgba(139, 92, 246, 0.115), rgba(99, 102, 241, 0.060) 52%, rgba(5, 8, 22, 0.19)),
    radial-gradient(circle at 16% 18%, rgba(139, 92, 246, 0.18), transparent 48%),
    radial-gradient(circle at 88% 72%, rgba(167, 139, 250, 0.10), transparent 44%),
    rgba(255, 255, 255, 0.034) !important;
  box-shadow:
    0 0 0 1px rgba(139, 92, 246, 0.045),
    0 14px 30px rgba(0, 0, 0, 0.17),
    0 0 24px rgba(139, 92, 246, 0.105),
    inset 0 0 20px rgba(139, 92, 246, 0.036) !important;
}

.interface-section.interface-system-set-operations .interface-signal-pulse::before {
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.18), rgba(167, 139, 250, 0.10), transparent) !important;
  opacity: 0.42 !important;
}

.interface-section.interface-system-set-media .interface-signal-pulse {
  border-color: rgba(236, 72, 153, 0.34) !important;
  background:
    linear-gradient(145deg, rgba(236, 72, 153, 0.115), rgba(190, 24, 93, 0.060) 52%, rgba(5, 8, 22, 0.19)),
    radial-gradient(circle at 16% 18%, rgba(236, 72, 153, 0.18), transparent 48%),
    radial-gradient(circle at 88% 72%, rgba(248, 113, 113, 0.10), transparent 44%),
    rgba(255, 255, 255, 0.034) !important;
  box-shadow:
    0 0 0 1px rgba(236, 72, 153, 0.045),
    0 14px 30px rgba(0, 0, 0, 0.17),
    0 0 24px rgba(236, 72, 153, 0.105),
    inset 0 0 20px rgba(236, 72, 153, 0.036) !important;
}

.interface-section.interface-system-set-media .interface-signal-pulse::before {
  background: linear-gradient(90deg, transparent, rgba(236, 72, 153, 0.18), rgba(248, 113, 113, 0.10), transparent) !important;
  opacity: 0.42 !important;
}

/* =========================
   WINTERFACE V3.5 MICROPHONE ORB CLIP FIX
   Scope: Showcase Bay audio mute button only.
   CSS-only: no HTML, JavaScript, content, assets, or other layout behavior changed.
========================= */

.interface-media-mute {
  transform: translateY(0.02rem) !important;
}

.interface-media-mute:hover,
.interface-media-mute:focus-visible {
  transform: translateY(-0.08rem) scale(1.04) !important;
}