/* =========================
   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;
}


/* =========================
   WINTERFACE.ONLINE CONTACT LAUNCH CARD
========================= */

.contact-launch-card {
  width: min(var(--max-width), calc(100% - 3rem));
  margin: 3.5rem auto 4rem;
  padding: clamp(2rem, 4vw, 4.25rem);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: clamp(26px, 3vw, 44px);
  background:
    radial-gradient(circle at 12% 12%, rgba(255, 255, 255, 0.13), transparent 26%),
    radial-gradient(circle at 94% 8%, rgba(56, 189, 248, 0.18), transparent 32%),
    radial-gradient(circle at 82% 88%, rgba(236, 72, 153, 0.20), transparent 36%),
    linear-gradient(135deg, rgba(107, 70, 150, 0.72), rgba(101, 74, 135, 0.62) 46%, rgba(56, 189, 248, 0.18));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 28px 90px rgba(0, 0, 0, 0.42),
    0 0 58px rgba(139, 92, 246, 0.18);
  backdrop-filter: blur(20px);
}

.contact-launch-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.032) 1px, transparent 1px),
    linear-gradient(115deg, transparent 0 42%, rgba(255, 255, 255, 0.035) 42.2% 42.8%, transparent 43% 100%);
  background-size: 70px 70px, 70px 70px, 280px 280px;
  opacity: 0.72;
  pointer-events: none;
}

.contact-launch-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(56, 189, 248, 0.32), transparent 30%, transparent 70%, rgba(236, 72, 153, 0.32));
  opacity: 0.35;
  pointer-events: none;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  padding: 1px;
}

.contact-card-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
}

.contact-card-copy .eyebrow {
  color: var(--muted-strong);
  margin-bottom: 1.5rem;
}

.contact-card-copy h2 {
  max-width: 760px;
  margin-bottom: 1.4rem;
  color: #fff;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2.6rem, 6vw, 5.35rem);
  line-height: 0.98;
  letter-spacing: -0.07em;
}

.contact-card-copy h2 span {
  display: inline-flex;
  gap: 0.25em;
  letter-spacing: 0;
  white-space: nowrap;
}

.contact-card-copy p:not(.eyebrow) {
  max-width: 760px;
  margin: 0;
  color: rgba(199, 210, 254, 0.86);
  font-size: clamp(1rem, 1.7vw, 1.25rem);
  line-height: 1.6;
}

.contact-card-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(128px, 1fr));
  justify-content: end;
  align-items: center;
  justify-self: end;
  width: min(100%, 430px);
  margin-top: 0;
}

.contact-card-actions .button {
  width: 100%;
  min-width: 128px;
  min-height: 58px;
  padding-inline: 1.65rem;
  border-radius: 999px;
  font-size: 1rem;
}

.contact-card-actions .button.primary {
  box-shadow:
    0 18px 46px rgba(56, 189, 248, 0.28),
    0 0 38px rgba(139, 92, 246, 0.20);
}

.contact-card-actions .button.secondary {
  background: rgba(255, 255, 255, 0.065);
  border-color: rgba(255, 255, 255, 0.20);
}

.contact-card-actions .button.secondary:hover {
  border-color: rgba(56, 189, 248, 0.56);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.22),
    0 0 28px rgba(56, 189, 248, 0.16);
}

@media (max-width: 900px) {
  .contact-card-inner {
    grid-template-columns: 1fr;
  }

  .contact-card-actions {
    justify-content: start;
    justify-self: start;
  }
}

@media (max-width: 620px) {
  .contact-launch-card {
    width: min(100% - 2rem, var(--max-width));
    margin-top: 2.25rem;
    margin-bottom: 2.5rem;
    padding: 2rem 1.25rem;
  }

  .contact-card-actions {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .contact-card-actions .button {
    width: 100%;
  }
}

/* =========================
   WInterface v3.5 Operational Command Alignment Fix
   Normalizes the Operational mode core panel so its command bar aligns with
   Active Pathways and Showcase Bay in normal desktop view.
   Fullscreen/maximized mode remains untouched.
========================= */

@media (min-width: 901px) {
  .interface-section.interface-system-set-operations:not(.is-winterface-maximized) .interface-core {
    justify-content: flex-start;
  }

  .interface-section.interface-system-set-operations:not(.is-winterface-maximized) .interface-response[data-interface-response] {
    min-height: 21.1rem;
  }
}


/* =========================
   WINTERFACE PRIMARY RAIL STABILITY PATCH
   Keeps Active Pathways rail cards readable in normal desktop view without
   inflating the full three-column WInterface grid. This prevents the right
   Primary Signal / Live Systems stack and center player area from stretching
   taller than Operational and Showcase modes.
   Scope: normal embedded desktop view only. Fullscreen, mobile, operational,
   and showcase modes are intentionally untouched.
========================= */

@media (min-width: 1101px) {
  .interface-section.interface-system-set-primary:not(.is-winterface-maximized) .interface-grid {
    min-height: 31rem;
  }

  .interface-section.interface-system-set-primary:not(.is-winterface-maximized) .interface-path-list {
    grid-template-rows: repeat(6, minmax(4.2rem, auto));
  }

  .interface-section.interface-system-set-primary:not(.is-winterface-maximized) .interface-path {
    min-height: 4.2rem;
  }
}



/* =========================
   WFO 3.6 SECRET INTEL NORMAL-VIEW VIDEO SPACING GUARD
   Preserves the latest WFO fixes while keeping the duplicated video player vertically balanced.
   CSS-only: no button, rail, control, or fullscreen behavior changes.
========================= */

@media (min-width: 901px) {
  .interface-section.interface-system-is-media:not(.is-winterface-maximized) .interface-core {
    justify-content: center;
  }

  .interface-section.interface-system-is-media:not(.is-winterface-maximized) .interface-media-panel:not([hidden]) {
    margin-top: auto;
    margin-bottom: auto;
  }

  .interface-section.interface-system-is-media:not(.is-winterface-maximized) .interface-response[data-interface-response] {
    min-height: 0;
  }
}
/* =========================
   WINTERFACE MATRIX CODE THEME
   WInterface-only: green code rain, black glass, restrained futuristic polish.
   CSS-only: no HTML or JavaScript changes.
========================= */

.interface-section {
  --matrix-bg: #020603;
  --matrix-bg-soft: #041008;
  --matrix-panel: rgba(3, 12, 7, 0.82);
  --matrix-panel-soft: rgba(6, 24, 13, 0.68);
  --matrix-green: #00ff66;
  --matrix-green-bright: #9cffb8;
  --matrix-green-soft: rgba(0, 255, 102, 0.18);
  --matrix-green-mid: rgba(0, 204, 85, 0.34);
  --matrix-green-border: rgba(120, 255, 170, 0.36);
  --matrix-text: #eaffef;
  --matrix-muted: #9bb8a4;
  --matrix-muted-strong: #c9f7d5;
}

.interface-section::before {
  background: linear-gradient(90deg, transparent, rgba(0, 255, 102, 0.56), rgba(156, 255, 184, 0.30), transparent);
  box-shadow: 0 0 22px rgba(0, 255, 102, 0.18);
}

.interface-section .section-heading h2,
.interface-section .interface-response h3,
.interface-section .interface-output-card strong,
.interface-section .interface-jump-link {
  color: var(--matrix-text);
  text-shadow: 0 0 18px rgba(0, 255, 102, 0.12);
}

.interface-section .interface-intro,
.interface-section .interface-response p:not(.panel-label),
.interface-section .interface-system-list li,
.interface-section .interface-showcase-caption p,
.interface-section .interface-signal-chip strong,
.interface-section .interface-rail-subtitle {
  color: var(--matrix-muted-strong) !important;
}

.interface-section .panel-label,
.interface-section .interface-rail-label,
.interface-section .interface-output-label,
.interface-section .interface-command-prefix,
.interface-section .interface-showcase-caption span,
.interface-section .interface-signal-chip span {
  color: var(--matrix-green-bright) !important;
  text-shadow:
    0 0 8px rgba(0, 255, 102, 0.46),
    0 0 22px rgba(0, 255, 102, 0.16);
}

.interface-shell {
  --interface-accent: var(--matrix-green) !important;
  --interface-accent-rgb: 0, 255, 102 !important;
  --interface-accent-text: var(--matrix-green-bright) !important;
  --interface-accent-soft: rgba(0, 255, 102, 0.10) !important;
  --interface-accent-border: rgba(0, 255, 102, 0.52) !important;
  --interface-accent-border-strong: rgba(156, 255, 184, 0.70) !important;
  --interface-accent-glow: rgba(0, 255, 102, 0.24) !important;
  overflow: hidden;
  border-color: rgba(120, 255, 170, 0.38);
  background:
    linear-gradient(145deg, rgba(7, 18, 10, 0.96), rgba(1, 7, 4, 0.94)),
    radial-gradient(circle at 12% 16%, rgba(0, 255, 102, 0.20), transparent 36%),
    radial-gradient(circle at 84% 18%, rgba(156, 255, 184, 0.12), transparent 34%),
    radial-gradient(circle at 50% 100%, rgba(0, 128, 64, 0.18), transparent 46%);
  box-shadow:
    0 34px 110px rgba(0, 0, 0, 0.62),
    0 0 78px rgba(0, 255, 102, 0.14),
    inset 0 0 92px rgba(0, 255, 102, 0.055);
}

.interface-shell::before {
  border-color: rgba(120, 255, 170, 0.26);
  box-shadow:
    inset 0 0 44px rgba(0, 255, 102, 0.055),
    0 0 26px rgba(0, 255, 102, 0.11);
}

.interface-shell::after {
  background-image:
    linear-gradient(rgba(120, 255, 170, 0.030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 255, 170, 0.026) 1px, transparent 1px),
    radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgba(0, 255, 102, 0.16), transparent 30%);
  background-size: 34px 34px, 34px 34px, auto;
  opacity: 0.60;
  mask-image: radial-gradient(circle at center, #000, transparent 86%);
}

/* Animated code rain inside the WInterface shell only. */
.interface-ambient {
  opacity: 1;
}

.interface-ambient::before,
.interface-ambient::after {
  content:
    "010110 101001 001101 110010 011001 100101 010011 111000 001011 101110\A"
    "101001 011010 110001 001101 010101 100010 111001 001010 010111 100101\A"
    "001101 111000 010101 101010 000111 110100 011011 001100 101001 010010\A"
    "110010 001011 101101 011001 100110 010001 111010 000101 101011 011100\A"
    "011001 100101 010011 111000 001011 101110 010110 101001 001101 110010\A"
    "100101 010111 001010 111001 100010 010101 001101 110001 011010 101001\A"
    "111000 010101 101010 000111 110100 011011 001100 101001 010010 001101\A"
    "001011 101101 011001 100110 010001 111010 000101 101011 011100 110010\A"
    "010110 101001 001101 110010 011001 100101 010011 111000 001011 101110\A"
    "101001 011010 110001 001101 010101 100010 111001 001010 010111 100101";
  position: absolute;
  inset: -42% -4% auto -4%;
  height: 185%;
  z-index: 0;
  pointer-events: none;
  white-space: pre;
  overflow: hidden;
  color: rgba(156, 255, 184, 0.34);
  font-family: "SFMono-Regular", "Cascadia Code", "Roboto Mono", "Courier New", monospace;
  font-size: clamp(0.56rem, 0.9vw, 0.82rem);
  line-height: 1.52;
  letter-spacing: 0.22em;
  text-shadow:
    0 0 6px rgba(0, 255, 102, 0.42),
    0 0 18px rgba(0, 255, 102, 0.18);
  opacity: 0.32;
  transform: translateY(-8%);
  animation: matrixCodeRain 18s linear infinite;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 82%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 82%, transparent);
}

.interface-ambient::after {
  inset: -60% -24% auto -18%;
  color: rgba(0, 255, 102, 0.22);
  font-size: clamp(0.50rem, 0.72vw, 0.68rem);
  line-height: 1.74;
  letter-spacing: 0.36em;
  opacity: 0.26;
  filter: blur(0.2px);
  transform: translateY(-18%) skewX(-5deg);
  animation-duration: 26s;
  animation-delay: -9s;
}

.interface-orbit {
  border-color: rgba(0, 255, 102, 0.19);
  box-shadow:
    inset 0 0 26px rgba(0, 255, 102, 0.070),
    0 0 34px rgba(0, 255, 102, 0.11);
}

.interface-orbit-one {
  border-top-color: rgba(156, 255, 184, 0.56);
}

.interface-orbit-two {
  border-bottom-color: rgba(0, 255, 102, 0.42);
}

.interface-scan {
  background: linear-gradient(180deg, transparent, rgba(0, 255, 102, 0.10), rgba(156, 255, 184, 0.075), transparent);
}

.interface-status-bar,
.interface-rail,
.interface-core,
.interface-side-panel {
  border-color: rgba(120, 255, 170, 0.20);
  background:
    linear-gradient(145deg, rgba(3, 13, 7, 0.82), rgba(2, 8, 4, 0.66)),
    rgba(2, 8, 4, 0.52);
  box-shadow:
    inset 0 0 42px rgba(0, 255, 102, 0.028),
    0 0 28px rgba(0, 0, 0, 0.16);
}

.interface-status-bar {
  color: var(--matrix-muted-strong);
  background:
    linear-gradient(145deg, rgba(4, 18, 9, 0.78), rgba(1, 8, 4, 0.70)),
    radial-gradient(circle at 8% 50%, rgba(0, 255, 102, 0.10), transparent 38%);
}

.interface-status-bar > span,
.interface-status-bar > .interface-system-toggle {
  border-color: rgba(0, 255, 102, 0.23) !important;
  background:
    linear-gradient(145deg, rgba(0, 255, 102, 0.080), rgba(156, 255, 184, 0.028)),
    rgba(2, 10, 5, 0.62) !important;
  box-shadow:
    0 0 0 1px rgba(0, 255, 102, 0.035),
    0 0 18px rgba(0, 255, 102, 0.080),
    inset 0 0 18px rgba(0, 255, 102, 0.026) !important;
}

.interface-status-bar i,
.interface-system-toggle i,
.interface-status-bar > span:nth-child(1) i,
.interface-status-bar > span:nth-child(3) i {
  background: var(--matrix-green) !important;
  color: var(--matrix-green) !important;
  box-shadow:
    0 0 10px rgba(0, 255, 102, 0.95),
    0 0 24px rgba(0, 255, 102, 0.50),
    0 0 42px rgba(0, 255, 102, 0.24) !important;
}

.interface-path {
  color: var(--matrix-muted-strong);
  border-color: rgba(0, 255, 102, 0.24) !important;
  background:
    linear-gradient(145deg, rgba(0, 255, 102, 0.065), rgba(156, 255, 184, 0.018)),
    rgba(2, 10, 5, 0.58) !important;
  box-shadow:
    inset 0 0 18px rgba(0, 255, 102, 0.020),
    0 0 0 rgba(0, 255, 102, 0);
}

.interface-path:hover,
.interface-path:focus-visible,
.interface-path.is-active {
  color: var(--matrix-text);
  border-color: rgba(156, 255, 184, 0.64) !important;
  background:
    linear-gradient(145deg, rgba(0, 255, 102, 0.14), rgba(156, 255, 184, 0.040)),
    rgba(5, 20, 10, 0.72) !important;
  box-shadow:
    0 0 0 1px rgba(0, 255, 102, 0.070),
    0 0 26px rgba(0, 255, 102, 0.18),
    inset 0 0 24px rgba(0, 255, 102, 0.045) !important;
}

.interface-path span,
.interface-set-button.is-active span,
.interface-set-button:nth-child(2).is-active span,
.interface-set-button:nth-child(3).is-active span {
  color: var(--matrix-green-bright) !important;
  background:
    radial-gradient(circle at 34% 28%, rgba(234, 255, 239, 0.30), transparent 24%),
    radial-gradient(circle at 50% 52%, rgba(0, 255, 102, 0.30), rgba(0, 255, 102, 0.10) 58%, rgba(1, 7, 4, 0.36) 100%) !important;
  border-color: rgba(156, 255, 184, 0.48) !important;
  box-shadow:
    inset 0 0 16px rgba(0, 255, 102, 0.12),
    0 0 18px rgba(0, 255, 102, 0.24),
    0 0 34px rgba(0, 255, 102, 0.12) !important;
}

.interface-core::before {
  background:
    radial-gradient(circle at 50% 18%, rgba(0, 255, 102, 0.15), transparent 38%),
    linear-gradient(135deg, rgba(156, 255, 184, 0.035), transparent 48%);
}

.interface-command-line,
.interface-media-toggle,
.interface-playback-status,
.interface-jump-link,
.interface-output-card,
.interface-video-frame,
.interface-showcase-frame,
.interface-signal-chip {
  border-color: rgba(0, 255, 102, 0.34) !important;
  background:
    linear-gradient(145deg, rgba(0, 255, 102, 0.085), rgba(156, 255, 184, 0.024)),
    rgba(2, 10, 5, 0.70) !important;
  box-shadow:
    0 0 0 1px rgba(0, 255, 102, 0.040),
    0 16px 38px rgba(0, 0, 0, 0.26),
    0 0 24px rgba(0, 255, 102, 0.105),
    inset 0 0 24px rgba(0, 255, 102, 0.036) !important;
}

.interface-command-line:focus-within,
.interface-media-toggle:hover,
.interface-media-toggle:focus-visible,
.interface-jump-link:hover,
.interface-jump-link:focus-visible,
.interface-signal-chip:hover,
.interface-signal-chip:focus-within {
  border-color: rgba(156, 255, 184, 0.70) !important;
  background:
    linear-gradient(145deg, rgba(0, 255, 102, 0.15), rgba(156, 255, 184, 0.042)),
    rgba(5, 20, 10, 0.76) !important;
  box-shadow:
    0 0 0 1px rgba(0, 255, 102, 0.075),
    0 20px 46px rgba(0, 0, 0, 0.30),
    0 0 34px rgba(0, 255, 102, 0.20),
    0 0 58px rgba(0, 255, 102, 0.10),
    inset 0 0 30px rgba(0, 255, 102, 0.055) !important;
}

.interface-command-input,
.interface-command-input::placeholder {
  color: var(--matrix-muted-strong);
}

.interface-cursor {
  background: var(--matrix-green) !important;
  box-shadow: 0 0 18px rgba(0, 255, 102, 0.78) !important;
}

.interface-system-list li::before,
.interface-system-set-operations .interface-system-list li::before,
.interface-system-set-media .interface-system-list li::before,
.interface-playback-dot {
  background: var(--matrix-green) !important;
  box-shadow:
    0 0 10px rgba(0, 255, 102, 0.96),
    0 0 22px rgba(0, 255, 102, 0.56),
    0 0 38px rgba(0, 255, 102, 0.25) !important;
}

.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 {
  border-color: rgba(0, 255, 102, 0.34) !important;
  background:
    radial-gradient(circle at 50% 50%, transparent 31%, rgba(0, 255, 102, 0.24) 32%, transparent 35%),
    radial-gradient(circle at 50% 50%, transparent 52%, rgba(0, 255, 102, 0.18) 53%, transparent 56%),
    conic-gradient(from 40deg, transparent 0 10%, rgba(0, 255, 102, 0.22) 10% 13%, transparent 13% 37%, rgba(156, 255, 184, 0.16) 37% 40%, transparent 40% 64%, rgba(0, 255, 102, 0.14) 64% 67%, transparent 67% 100%) !important;
  box-shadow:
    inset 0 0 14px rgba(0, 255, 102, 0.080),
    0 0 22px rgba(0, 255, 102, 0.13) !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 {
  background:
    radial-gradient(circle at 34% 28%, rgba(234, 255, 239, 0.44), transparent 22%),
    radial-gradient(circle at 50% 52%, rgba(0, 255, 102, 0.56), rgba(0, 255, 102, 0.22) 43%, rgba(1, 7, 4, 0.72) 69%),
    rgba(1, 7, 4, 0.60) !important;
  border-color: rgba(156, 255, 184, 0.64) !important;
  box-shadow:
    inset 0 0 9px rgba(234, 255, 239, 0.12),
    inset 0 -6px 12px rgba(0, 0, 0, 0.36),
    0 0 14px rgba(0, 255, 102, 0.78),
    0 0 34px rgba(0, 255, 102, 0.30) !important;
}

.interface-showcase-caption span {
  border-color: rgba(0, 255, 102, 0.38);
  background:
    linear-gradient(145deg, rgba(1, 7, 4, 0.88), rgba(3, 14, 7, 0.68)),
    radial-gradient(circle at 12% 50%, rgba(0, 255, 102, 0.18), transparent 62%);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.34),
    0 0 18px rgba(0, 255, 102, 0.13),
    inset 0 0 18px rgba(0, 255, 102, 0.045);
}

@keyframes matrixCodeRain {
  0% {
    transform: translateY(-24%);
  }

  100% {
    transform: translateY(22%);
  }
}

@media (max-width: 768px) {
  .interface-ambient::before,
  .interface-ambient::after {
    opacity: 0.18;
    font-size: 0.52rem;
    letter-spacing: 0.18em;
  }
}

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