.diffuse-blob {
  --db-accent: rgba(118, 188, 228, 0.85);
  --db-size: 100%;
  position: relative;
  width: min(100%, var(--db-size));
  height: min(100%, var(--db-size));
  margin: 0 auto;
}

.diffuse-blob__field {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  isolation: isolate;
}

.diffuse-blob__layer,
.diffuse-blob__mesh,
.diffuse-blob__particles,
.diffuse-blob__content {
  position: absolute;
}

.diffuse-blob__layer,
.diffuse-blob__mesh,
.diffuse-blob__particles {
  inset: 0;
  pointer-events: none;
}

.diffuse-blob__layer {
  mix-blend-mode: multiply;
  opacity: 0.78;
}

.diffuse-blob__layer--outer {
  inset: -20% -18% -22% -20%;
  background:
    radial-gradient(28% 24% at 10% 46%, rgba(255,255,255,0.72), transparent 78%),
    radial-gradient(26% 24% at 18% 20%, rgba(236,247,255,0.62), transparent 80%),
    radial-gradient(28% 24% at 34% 10%, rgba(228,242,253,0.56), transparent 80%),
    radial-gradient(26% 24% at 52% 8%, rgba(233,239,255,0.46), transparent 80%),
    radial-gradient(28% 24% at 72% 16%, rgba(226,243,252,0.54), transparent 80%),
    radial-gradient(26% 22% at 88% 34%, rgba(220,238,249,0.42), transparent 80%),
    radial-gradient(28% 24% at 90% 60%, rgba(218,236,248,0.38), transparent 82%),
    radial-gradient(26% 22% at 76% 84%, rgba(210,232,245,0.34), transparent 82%),
    radial-gradient(28% 24% at 52% 92%, rgba(223,239,250,0.38), transparent 82%),
    radial-gradient(28% 24% at 24% 84%, rgba(232,244,253,0.42), transparent 82%),
    radial-gradient(24% 22% at 8% 70%, rgba(243,249,255,0.54), transparent 80%);
  filter: blur(24px);
}

.diffuse-blob__layer--halo {
  inset: -10% -8% -12% -10%;
  background:
    radial-gradient(34% 30% at 18% 34%, rgba(255,255,255,0.86), rgba(255,255,255,0.26) 46%, transparent 78%),
    radial-gradient(30% 26% at 34% 16%, rgba(239,248,255,0.68), rgba(228,241,251,0.18) 46%, transparent 76%),
    radial-gradient(28% 24% at 52% 14%, rgba(232,240,255,0.56), rgba(222,233,251,0.14) 46%, transparent 76%),
    radial-gradient(32% 28% at 72% 24%, rgba(230,244,253,0.62), rgba(217,236,248,0.16) 46%, transparent 76%),
    radial-gradient(28% 24% at 84% 46%, rgba(212,236,248,0.5), rgba(200,229,244,0.14) 48%, transparent 78%),
    radial-gradient(30% 26% at 74% 72%, rgba(206,229,245,0.42), rgba(192,221,240,0.12) 48%, transparent 78%),
    radial-gradient(28% 24% at 52% 84%, rgba(214,236,247,0.4), rgba(194,223,241,0.12) 48%, transparent 78%),
    radial-gradient(30% 26% at 26% 76%, rgba(224,242,251,0.44), rgba(204,230,244,0.12) 48%, transparent 78%),
    radial-gradient(28% 24% at 12% 56%, rgba(244,249,255,0.52), rgba(229,242,251,0.16) 48%, transparent 78%);
  filter: blur(18px);
}

.diffuse-blob__layer--core {
  inset: 4% 6%;
  background:
    radial-gradient(32% 28% at 28% 34%, rgba(255,255,255,0.9), rgba(255,255,255,0.12) 50%, transparent 80%),
    radial-gradient(28% 24% at 52% 30%, color-mix(in srgb, var(--db-accent) 16%, white), transparent 74%),
    radial-gradient(30% 26% at 68% 56%, color-mix(in srgb, var(--db-accent) 12%, white), transparent 76%),
    radial-gradient(28% 24% at 42% 70%, rgba(233,240,255,0.24), transparent 78%),
    radial-gradient(52% 50% at 50% 52%, rgba(244,249,255,0.64), rgba(221,237,246,0.08) 64%, transparent 100%);
  filter: blur(10px);
  opacity: 0.92;
}

.diffuse-blob__layer--mist {
  inset: 10% 12%;
  background:
    radial-gradient(30% 28% at 34% 26%, rgba(255,255,255,0.24), transparent 74%),
    radial-gradient(28% 26% at 64% 32%, rgba(255,255,255,0.16), transparent 72%),
    radial-gradient(26% 22% at 52% 68%, rgba(205,229,244,0.12), transparent 74%);
  filter: blur(12px);
  opacity: 0.8;
}

.diffuse-blob__mesh {
  inset: 8%;
  width: 84%;
  height: 84%;
  opacity: 0.22;
  filter: blur(0.15px);
}

.diffuse-blob__mesh-lines path {
  fill: none;
  stroke: color-mix(in srgb, var(--db-accent) 38%, #8ea8bf);
  stroke-width: 0.8;
  stroke-linecap: round;
  stroke-dasharray: 3 5;
}

.diffuse-blob__mesh-points circle {
  fill: color-mix(in srgb, var(--db-accent) 44%, white);
  opacity: 0.75;
}

.diffuse-blob__particles span {
  position: absolute;
  display: block;
  width: clamp(5px, 0.7vw, 8px);
  height: clamp(5px, 0.7vw, 8px);
  border-radius: 999px;
  background: rgba(255,255,255,0.48);
  box-shadow: 0 0 12px rgba(180, 216, 236, 0.18);
  filter: blur(0.2px);
}

.diffuse-blob__particles span:nth-child(1) { top: 19%; left: 24%; }
.diffuse-blob__particles span:nth-child(2) { top: 28%; right: 22%; width: 6px; height: 6px; }
.diffuse-blob__particles span:nth-child(3) { top: 51%; left: 18%; width: 4px; height: 4px; }
.diffuse-blob__particles span:nth-child(4) { right: 18%; bottom: 28%; }
.diffuse-blob__particles span:nth-child(5) { left: 42%; bottom: 18%; width: 4px; height: 4px; }
.diffuse-blob__particles span:nth-child(6) { top: 42%; left: 54%; width: 5px; height: 5px; }

.diffuse-blob__content {
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: clamp(1rem, 2vw, 1.5rem);
  text-align: center;
}

.diffuse-blob__title {
  font-size: clamp(1rem, 1.1vw, 1.15rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: rgba(10, 42, 102, 0.92);
}

.diffuse-blob__motif {
  position: relative;
  z-index: 1;
}

.diffuse-blob__subtitle,
.diffuse-blob__caption {
  max-width: 17rem;
  color: rgba(10, 42, 102, 0.72);
}

.diffuse-blob__subtitle {
  font-size: clamp(0.8rem, 0.95vw, 0.94rem);
  font-weight: 650;
  line-height: 1.34;
}

.diffuse-blob__caption {
  font-size: clamp(0.7rem, 0.82vw, 0.82rem);
  line-height: 1.38;
}

@media (max-width: 720px) {
  .diffuse-blob__layer--outer {
    inset: -14% -12% -16% -14%;
  }

  .diffuse-blob__layer--halo {
    inset: -6% -4% -8% -6%;
  }

  .diffuse-blob__content {
    padding: 0.9rem;
  }
}

.layered-polygon-cloud {
  --db-accent: rgba(118, 188, 228, 0.22);
  --db-size: 100%;
  position: relative;
  width: min(100%, var(--db-size));
  height: min(100%, var(--db-size));
  margin: 0 auto;
  overflow: visible;
}

.layered-polygon-cloud__field {
  position: relative;
  width: 100%;
  height: 100%;
  isolation: isolate;
  overflow: visible;
}

.layered-polygon-cloud__polygons,
.layered-polygon-cloud__content {
  position: absolute;
}

.layered-polygon-cloud__polygons {
  inset: -18% -18% -18% -18%;
  width: 136%;
  height: 136%;
  overflow: visible;
}

.layered-polygon-cloud__network {
  opacity: 0.24;
  filter: blur(0.15px);
}

.layered-polygon-cloud__network path {
  fill: none;
  stroke: rgba(120, 163, 191, 0.72);
  stroke-width: 0.45;
  stroke-dasharray: 1.6 2.6;
  stroke-linecap: round;
}

.layered-polygon-cloud__nodes circle {
  fill: rgba(245, 250, 255, 0.92);
}

.layered-polygon-cloud__content {
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  padding: clamp(0.9rem, 1.7vw, 1.3rem);
  text-align: center;
}

.layered-polygon-cloud__title {
  font-size: clamp(1rem, 1.1vw, 1.15rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: rgba(10, 42, 102, 0.92);
}

.layered-polygon-cloud__motif {
  position: relative;
  z-index: 1;
}

.layered-polygon-cloud__subtitle,
.layered-polygon-cloud__caption {
  max-width: 17rem;
  color: rgba(10, 42, 102, 0.72);
}

.layered-polygon-cloud__subtitle {
  font-size: clamp(0.8rem, 0.95vw, 0.94rem);
  font-weight: 650;
  line-height: 1.34;
}

.layered-polygon-cloud__caption {
  font-size: clamp(0.7rem, 0.82vw, 0.82rem);
  line-height: 1.38;
}

.academic-galaxy {
  --db-size: 100%;
  position: relative;
  width: min(100%, var(--db-size));
  height: min(100%, var(--db-size));
  margin: 0 auto;
  overflow: visible;
}

.academic-galaxy__field {
  position: relative;
  width: 100%;
  height: 100%;
  isolation: isolate;
  overflow: visible;
}

.academic-galaxy__svg,
.academic-galaxy__content {
  position: absolute;
}

.academic-galaxy__svg {
  inset: -24% -30% -24% -30%;
  width: 160%;
  height: 148%;
  overflow: visible;
  mix-blend-mode: multiply;
}

.academic-galaxy__content {
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: clamp(1rem, 1.8vw, 1.35rem);
  text-align: center;
}

.academic-galaxy__motif {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.05rem 0 0.12rem;
}

.academic-galaxy__title {
  font-size: clamp(1rem, 1.08vw, 1.14rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: rgba(10, 42, 102, 0.92);
}

.academic-galaxy__subtitle,
.academic-galaxy__caption {
  max-width: 17rem;
  color: rgba(10, 42, 102, 0.7);
}

.academic-galaxy__subtitle {
  font-size: clamp(0.8rem, 0.92vw, 0.92rem);
  line-height: 1.34;
}

.academic-galaxy__caption {
  font-size: clamp(0.7rem, 0.8vw, 0.8rem);
  line-height: 1.36;
}

.academic-galaxy__particles {
  filter: blur(0.2px);
}

.academic-galaxy__bands {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.72;
}

.academic-galaxy__bands path {
  stroke: rgba(204, 220, 238, 0.3);
  stroke-width: 6.8;
  filter: blur(6px);
}

.academic-galaxy__network,
.academic-galaxy__grid,
.academic-galaxy__curves,
.academic-galaxy__cells,
.academic-galaxy__arrows,
.academic-galaxy__nodes {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.academic-galaxy__network path {
  stroke: rgba(122, 154, 190, 0.4);
  stroke-width: 0.52;
  stroke-dasharray: 1.5 2.8;
}

.academic-galaxy__grid path {
  stroke: rgba(102, 156, 174, 0.26);
  stroke-width: 0.58;
  stroke-dasharray: 1.1 2.2;
}

.academic-galaxy__curves path {
  stroke: rgba(126, 159, 198, 0.34);
  stroke-width: 0.9;
}

.academic-galaxy__curves--highlight path {
  stroke-width: 1.08;
}

.academic-galaxy__cells polygon {
  fill: rgba(240, 246, 252, 0.16);
  stroke: rgba(155, 180, 206, 0.12);
  stroke-width: 0.3;
}

.academic-galaxy__arrows path {
  stroke: rgba(184, 139, 78, 0.38);
  stroke-width: 0.72;
}

.academic-galaxy__nodes circle {
  fill: rgba(246, 250, 255, 0.92);
  filter: blur(0.08px);
}

.academic-galaxy--pmtree .academic-galaxy__network path,
.academic-galaxy--pmtree .academic-galaxy__curves path {
  stroke: rgba(122, 147, 196, 0.42);
}

.academic-galaxy--pmtree .academic-galaxy__bands path {
  stroke: rgba(193, 208, 237, 0.34);
}

.academic-galaxy--mapmatching .academic-galaxy__network path,
.academic-galaxy--mapmatching .academic-galaxy__curves path {
  stroke: rgba(70, 173, 180, 0.44);
}

.academic-galaxy--mapmatching .academic-galaxy__bands path {
  stroke: rgba(177, 227, 229, 0.3);
}

.academic-galaxy--mapmatching .academic-galaxy__grid path {
  stroke: rgba(76, 158, 166, 0.28);
}

.academic-galaxy--translation .academic-galaxy__network path,
.academic-galaxy--translation .academic-galaxy__curves path {
  stroke: rgba(142, 132, 194, 0.4);
}

.academic-galaxy--translation .academic-galaxy__bands path {
  stroke: rgba(214, 205, 239, 0.3);
}

.academic-galaxy--translation .academic-galaxy__cells polygon {
  fill: rgba(241, 236, 251, 0.16);
  stroke: rgba(167, 153, 210, 0.12);
}

.academic-galaxy--planning .academic-galaxy__network path,
.academic-galaxy--planning .academic-galaxy__curves path {
  stroke: rgba(186, 141, 77, 0.36);
}

.academic-galaxy--planning .academic-galaxy__bands path {
  stroke: rgba(234, 205, 164, 0.3);
}

.academic-galaxy--planning .academic-galaxy__cells polygon {
  fill: rgba(250, 238, 218, 0.18);
  stroke: rgba(196, 153, 96, 0.12);
}

.academic-galaxy--mobility .academic-galaxy__network path,
.academic-galaxy--mobility .academic-galaxy__curves path {
  stroke: rgba(89, 135, 196, 0.42);
}

.academic-galaxy--mobility .academic-galaxy__bands path {
  stroke: rgba(183, 210, 240, 0.3);
}

@media (max-width: 720px) {
  .academic-galaxy__svg {
    inset: -16% -20% -16% -20%;
    width: 140%;
    height: 132%;
  }

  .academic-galaxy__content {
    padding: 0.85rem;
  }
}
