/* Keep the established smoke visible behind the library. The tint softens the
   scene, while a single steady backdrop blur diffuses it without hard edges. */
body.glass-study[data-smoothing="tone"] .gx-library {
  background: transparent;
}
/* The wordmark would become four large pale smudges after the scene blur. */
body.glass-study:has(.gx-library[open]) #home-hero {
  opacity: 0;
}
body.glass-study[data-smoothing="tone"] .gx-library::backdrop {
  --gx-library-color: rgba(9, 14, 23, .48);
  --gx-library-filter: blur(18px) saturate(1.04);
  background: var(--gx-library-color);
  backdrop-filter: var(--gx-library-filter);
  -webkit-backdrop-filter: var(--gx-library-filter);
}
body.glass-study[data-smoothing="tone"] .gx-library[open]::backdrop {
  animation: gx-smooth-backdrop-in .22s ease-out both;
}
body.glass-study[data-smoothing="tone"] .gx-library.is-closing::backdrop {
  animation: gx-smooth-backdrop-out .18s ease-in both;
}
@keyframes gx-smooth-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes gx-smooth-backdrop-out { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  body.glass-study[data-smoothing="tone"] .gx-library[open]::backdrop,
  body.glass-study[data-smoothing="tone"] .gx-library.is-closing::backdrop { animation: none; }
}