/* SVGs and animation paths extracted from https://www.shuiyinyun.com/tools/#/
   .background-fx[data-v-e0c7207a], 2026-09-20. Assets are served locally. */
body[data-page=tools] .workspace { position: relative; isolation: isolate; }
body[data-page=tools] .page-container,
body[data-page=tools] .site-footer { position: relative; z-index: 1; }
.catalog-background { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.catalog-background > * { position: absolute; }
.catalog-background .shape-01 { top: 11%; right: 42%; animation: catalog-float-two 13s linear infinite; }
.catalog-background .shape-02 { top: 27%; left: 17%; animation: catalog-float-four 25s linear infinite alternate; }
.catalog-background .shape-03 { top: 30%; left: 50%; animation: catalog-float-three 35s linear infinite alternate; }
.catalog-background .shape-04 { top: 40%; right: 23%; animation: catalog-float-four 20s linear infinite alternate; }
.catalog-background .shape-05 { bottom: 62%; right: 28%; animation: catalog-float-one 15s linear infinite; }
.catalog-background .shape-06 { bottom: 73%; left: 38%; animation: catalog-float-four 20s linear infinite alternate; }
.catalog-background .shape-07 { bottom: 54%; left: 14%; animation: catalog-float-one 17s linear infinite; }
.catalog-background .shape-08 { top: 60%; left: 14%; animation: catalog-float-one 20s linear infinite alternate; }
.catalog-background .shape-09 { top: 22%; left: 41%; animation: catalog-float-one 15s linear infinite; }
.catalog-background .shape-10 { top: -1%; right: 8%; opacity: .5; animation: catalog-float-one 15s linear infinite; }
.catalog-background .shape-11 { top: 20%; right: 8%; animation: catalog-float-one 12s linear infinite; }
.catalog-background .shape-12 { top: 16%; left: 6%; width: 9.375rem; height: 9.375rem; border-radius: 1.042rem; background: rgba(186,214,255,.2); animation: catalog-float-one 12s linear infinite; }
.catalog-background .shape-13 { top: -3%; left: 12%; width: 10.417rem; height: 10.417rem; border-radius: 1.042rem; background: rgba(240,246,255,.8); animation: catalog-float-two 12s linear infinite; }
@keyframes catalog-float-one {
    0%, 100% { transform: translate(0) rotate(0deg); }
    20% { transform: translate(73px,-1px) rotate(36deg); }
    40% { transform: translate(141px,72px) rotate(72deg); }
    60% { transform: translate(83px,122px) rotate(108deg); }
    80% { transform: translate(-40px,72px) rotate(144deg); }
}
@keyframes catalog-float-two {
    0%, 100% { transform: translate(0) rotate(0deg) scale(1); }
    20% { transform: translate(73px,-1px) rotate(36deg) scale(.9); }
    40% { transform: translate(141px,72px) rotate(72deg) scale(1); }
    60% { transform: translate(83px,122px) rotate(108deg) scale(1.2); }
    80% { transform: translate(-40px,72px) rotate(144deg) scale(1.1); }
}
@keyframes catalog-float-three {
    from { transform: translate(165px,-179px); }
    to { transform: translate(-346px,617px); }
}
@keyframes catalog-float-four {
    from { transform: translate(-300px,151px) rotate(0deg); }
    to { transform: translate(251px,-200px) rotate(180deg); }
}
@media (max-width: 575.98px) {
    .catalog-background .shape-10 { right: 12%; width: 100px; }
    .catalog-background .shape-11 { right: 14%; width: 100px; }
}
@media (prefers-reduced-motion: reduce) { .catalog-background > * { animation: none; } }