.shape-blob {
  border-radius: 62% 38% 46% 54% / 55% 48% 52% 45%;
  background: var(--color-primary-subtle);
}
.shape-blob-2 { border-radius: 38% 62% 55% 45% / 46% 60% 40% 54%; }
.shape-blob-3 { border-radius: 50% 50% 34% 66% / 56% 38% 62% 44%; }

@keyframes kw-blob-morph {
  0%, 100% { border-radius: 62% 38% 46% 54% / 55% 48% 52% 45%; }
  33% { border-radius: 46% 54% 60% 40% / 42% 58% 42% 58%; }
  66% { border-radius: 55% 45% 38% 62% / 58% 42% 60% 40%; }
}
.shape-blob-morph { animation: kw-blob-morph 16s var(--ease-in-out) infinite; }
@media (prefers-reduced-motion: reduce) {
  .shape-blob-morph { animation: none; }
}

.divider-wave {
  display: block;
  color: var(--color-bg-2);          
  margin-block-end: -1px;            
  line-height: 0;
}
.divider-wave svg { width: 100%; height: clamp(2rem, 6vw, 5rem); display: block; }

.divider-slant {
  height: clamp(2rem, 5vw, 4rem);
  background: var(--color-bg-2);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

.shape-ring {
  border: var(--border-thick) solid var(--color-primary);
  border-radius: var(--radius-full);
  opacity: 0.5;
}
.shape-dot-grid {
  background-image: radial-gradient(var(--color-primary) 1.5px, transparent 1.5px);
  background-size: var(--sp-4) var(--sp-4);
  opacity: 0.35;
}
.shape-cross::before {
  content: '+';
  font-family: var(--font-mono);
  font-size: var(--step-3);
  color: var(--color-primary);
  opacity: 0.6;
}

.shape-offset-frame {
  position: relative;
}
.shape-offset-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  translate: var(--sp-2) var(--sp-2);
  border: var(--border-thin) solid var(--color-border-2);
  border-radius: inherit;
  z-index: -1;
  pointer-events: none;
}

.shape-marker {
  background: linear-gradient(transparent 58%, var(--color-primary-subtle) 58%, var(--color-primary-subtle) 92%, transparent 92%);
  padding-inline: 0.08em;
}

html[data-shapes='off'] .shape-blob,
html[data-shapes='off'] .shape-ring,
html[data-shapes='off'] .shape-dot-grid,
html[data-shapes='off'] .divider-wave,
html[data-shapes='off'] .divider-slant { display: none; }
html[data-shapes='off'] .shape-cross::before,
html[data-shapes='off'] .shape-offset-frame::after { content: none; }
html[data-shapes='off'] .shape-marker { background: none; padding-inline: 0; }