refactor(addressbook): remove factory, extract filter-chip builder, split CSS

Remove AddressBookServicesFactory — all 8 dependencies already registered
in DI container individually. Update container registrar to wire directly.
Extract 42-line filter-chip builder from index().php into
AddressBookService::buildCustomFieldChipMeta(). Split 576-line CSS file
into functional layout (76 lines) and decorative banner animation (500
lines) with separate asset registration.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

modules/addressbook/lib/Module/AddressBook/AddressBookContainerRegistrar.php

@@ -5,25 +5,28 @@ namespace MintyPHP\Module\AddressBook;
 use MintyPHP\App\AppContainer;
 use MintyPHP\App\Container\ContainerRegistrar;
 use MintyPHP\Module\AddressBook\Service\AddressBookService;
-use MintyPHP\Module\AddressBook\Service\AddressBookServicesFactory;
-use MintyPHP\Service\CustomField\CustomFieldServicesFactory;
-use MintyPHP\Service\Directory\DirectoryServicesFactory;
+use MintyPHP\Service\Access\RoleService;
+use MintyPHP\Service\CustomField\UserCustomFieldValueService;
+use MintyPHP\Service\Org\DepartmentService;
 use MintyPHP\Service\Tenant\TenantScopeService;
-use MintyPHP\Service\User\UserServicesFactory;
+use MintyPHP\Service\Tenant\TenantService;
+use MintyPHP\Service\User\UserAccountService;
+use MintyPHP\Service\User\UserAssignmentService;
+use MintyPHP\Service\User\UserAvatarService;
 
 final class AddressBookContainerRegistrar implements ContainerRegistrar
 {
     public function register(AppContainer $container): void
     {
-        $container->set(AddressBookServicesFactory::class, static fn (AppContainer $c): AddressBookServicesFactory => new AddressBookServicesFactory(
-            $c->get(UserServicesFactory::class),
-            $c->get(DirectoryServicesFactory::class),
-            $c->get(CustomFieldServicesFactory::class),
-            $c->get(TenantScopeService::class)
+        $container->set(AddressBookService::class, static fn (AppContainer $c): AddressBookService => new AddressBookService(
+            $c->get(UserAccountService::class),
+            $c->get(UserAssignmentService::class),
+            $c->get(TenantService::class),
+            $c->get(DepartmentService::class),
+            $c->get(RoleService::class),
+            $c->get(TenantScopeService::class),
+            $c->get(UserCustomFieldValueService::class),
+            $c->get(UserAvatarService::class)
         ));
-
-        $container->set(AddressBookService::class, static fn (AppContainer $c): AddressBookService => $c
-            ->get(AddressBookServicesFactory::class)
-            ->createAddressBookService());
     }
 }

modules/addressbook/lib/Module/AddressBook/Service/AddressBookService.php

@@ -312,6 +312,61 @@ class AddressBookService
         ];
     }
 
+    /**
+     * Transform custom field filter definitions into chip metadata for the grid UI.
+     *
+     * @param list<array<string, mixed>> $definitions
+     * @return list<array<string, mixed>>
+     */
+    public function buildCustomFieldChipMeta(array $definitions): array
+    {
+        $chips = [];
+        foreach ($definitions as $definition) {
+            $uuid = strtolower(trim((string) ($definition['uuid'] ?? '')));
+            $type = strtolower(trim((string) ($definition['type'] ?? '')));
+            $label = trim((string) ($definition['label'] ?? ''));
+            $options = is_array($definition['options'] ?? null) ? $definition['options'] : [];
+            if ($uuid === '' || $type === '' || $label === '') {
+                continue;
+            }
+
+            if (in_array($type, ['select', 'boolean'], true)) {
+                $optionMap = gridOptionMapFromItems($options);
+                if ($type === 'boolean') {
+                    $optionMap = ['1' => t('Yes'), '0' => t('No')];
+                }
+                $chips[] = [
+                    'type' => 'scalar',
+                    'param' => 'cf_' . $uuid,
+                    'label' => $label,
+                    'options' => $optionMap,
+                ];
+                continue;
+            }
+
+            if ($type === 'multiselect') {
+                $chips[] = [
+                    'type' => 'multi_csv',
+                    'param' => 'cfm_' . $uuid,
+                    'label' => $label,
+                    'options' => gridOptionMapFromItems($options),
+                ];
+                continue;
+            }
+
+            if ($type === 'date') {
+                $chips[] = [
+                    'type' => 'date_range',
+                    'label' => $label,
+                    'from_param' => 'cfd_' . $uuid . '_from',
+                    'to_param' => 'cfd_' . $uuid . '_to',
+                ];
+            }
+        }
+
+        return $chips;
+    }
+
     private function splitCommaValues($value): array
     {
         return array_values(array_filter(

modules/addressbook/lib/Module/AddressBook/Service/AddressBookServicesFactory.php

@@ -1,41 +0,0 @@
-<?php
-
-namespace MintyPHP\Module\AddressBook\Service;
-
-use MintyPHP\Service\CustomField\CustomFieldServicesFactory;
-use MintyPHP\Service\Directory\DirectoryServicesFactory;
-use MintyPHP\Service\Tenant\TenantScopeService;
-use MintyPHP\Service\User\UserServicesFactory;
-
-class AddressBookServicesFactory
-{
-    private ?AddressBookService $addressBookService = null;
-
-    public function __construct(
-        private readonly UserServicesFactory $userServicesFactory,
-        private readonly DirectoryServicesFactory $directoryServicesFactory,
-        private readonly CustomFieldServicesFactory $customFieldServicesFactory,
-        private readonly TenantScopeService $tenantScopeService
-    ) {
-    }
-
-    public function createAddressBookService(): AddressBookService
-    {
-        if ($this->addressBookService !== null) {
-            return $this->addressBookService;
-        }
-
-        $userFactory = $this->userServicesFactory;
-        $directoryFactory = $this->directoryServicesFactory;
-        return $this->addressBookService = new AddressBookService(
-            $userFactory->createUserAccountService(),
-            $userFactory->createUserAssignmentService(),
-            $directoryFactory->createTenantService(),
-            $directoryFactory->createDepartmentService(),
-            $directoryFactory->createRoleService(),
-            $this->tenantScopeService,
-            $this->customFieldServicesFactory->createUserCustomFieldValueService(),
-            $userFactory->createUserAvatarService()
-        );
-    }
-}

modules/addressbook/module.php

@@ -72,6 +72,7 @@ return [
     'asset_groups' => [
         'address-book' => [
             'modules/addressbook/css/pages/address-book-view.css',
+            'modules/addressbook/css/pages/address-book-banner.css',
         ],
     ],
     'scheduler_jobs' => [],

modules/addressbook/pages/address-book/data().php

@@ -2,7 +2,7 @@
 
 use MintyPHP\Http\SessionStoreInterface;
 use MintyPHP\Module\AddressBook\AddressBookAuthorizationPolicy;
-use MintyPHP\Module\AddressBook\Service\AddressBookServicesFactory;
+use MintyPHP\Module\AddressBook\Service\AddressBookService;
 use MintyPHP\Support\Guard;
 
 $session = app(SessionStoreInterface::class)->all();
@@ -22,7 +22,7 @@ foreach ($query as $rawKey => $rawValue) {
 }
 
 $currentUserId = (int) ($session['user']['id'] ?? 0);
-$addressBookService = (app(AddressBookServicesFactory::class))->createAddressBookService();
+$addressBookService = app(AddressBookService::class);
 $result = $addressBookService->buildGridResult($currentUserId, $filters);
 gridJsonDataResult(
     (array) ($result['data'] ?? []),

modules/addressbook/pages/address-book/index().php

@@ -2,7 +2,7 @@
 
 use MintyPHP\Buffer;
 use MintyPHP\Http\SessionStoreInterface;
-use MintyPHP\Module\AddressBook\Service\AddressBookServicesFactory;
+use MintyPHP\Module\AddressBook\Service\AddressBookService;
 use MintyPHP\Session;
 use MintyPHP\Support\Guard;
 
@@ -13,7 +13,7 @@ Guard::requireAbilityOrForbidden(\MintyPHP\Module\AddressBook\AddressBookAuthori
 $filterSchema = require __DIR__ . '/filter-schema.php';
 $query = requestInput()->queryAll();
 $currentUserId = (int) ($session['user']['id'] ?? 0);
-$addressBookService = (app(AddressBookServicesFactory::class))->createAddressBookService();
+$addressBookService = app(AddressBookService::class);
 $context = $addressBookService->buildIndexContext($currentUserId, $query);
 $activeTenants = $context['activeTenants'] ?? [];
 $activeRoles = $context['activeRoles'] ?? [];
@@ -48,49 +48,7 @@ $drawerToolbarFilterSchema = $listFilterContext['drawerToolbarFilterSchema'];
 $toolbarOptionSets = $listFilterContext['toolbarOptionSets'];
 $clientFilterSchema = $listFilterContext['clientFilterSchema'];
 $searchConfig = $listFilterContext['searchConfig'];
-$customFieldChipMeta = [];
-foreach ($customFieldFilterDefinitions as $definition) {
-    $definitionUuid = strtolower(trim((string) ($definition['uuid'] ?? '')));
-    $definitionType = strtolower(trim((string) ($definition['type'] ?? '')));
-    $definitionLabel = trim((string) ($definition['label'] ?? ''));
-    $definitionOptions = is_array($definition['options'] ?? null) ? $definition['options'] : [];
-    if ($definitionUuid === '' || $definitionType === '' || $definitionLabel === '') {
-        continue;
-    }
-
-    if (in_array($definitionType, ['select', 'boolean'], true)) {
-        $options = gridOptionMapFromItems($definitionOptions);
-        if ($definitionType === 'boolean') {
-            $options = ['1' => t('Yes'), '0' => t('No')];
-        }
-        $customFieldChipMeta[] = [
-            'type' => 'scalar',
-            'param' => 'cf_' . $definitionUuid,
-            'label' => $definitionLabel,
-            'options' => $options,
-        ];
-        continue;
-    }
-
-    if ($definitionType === 'multiselect') {
-        $customFieldChipMeta[] = [
-            'type' => 'multi_csv',
-            'param' => 'cfm_' . $definitionUuid,
-            'label' => $definitionLabel,
-            'options' => gridOptionMapFromItems($definitionOptions),
-        ];
-        continue;
-    }
-
-    if ($definitionType === 'date') {
-        $customFieldChipMeta[] = [
-            'type' => 'date_range',
-            'label' => $definitionLabel,
-            'from_param' => 'cfd_' . $definitionUuid . '_from',
-            'to_param' => 'cfd_' . $definitionUuid . '_to',
-        ];
-    }
-}
+$customFieldChipMeta = $addressBookService->buildCustomFieldChipMeta($customFieldFilterDefinitions);
 $filterChipMeta = [
     'search' => [
         'label' => t('Search'),

modules/addressbook/tests/Module/AddressBook/Service/AddressBookServiceTest.php

@@ -2,8 +2,8 @@
 
 namespace MintyPHP\Tests\Module\AddressBook\Service;
 
-use MintyPHP\Service\Access\RoleService;
 use MintyPHP\Module\AddressBook\Service\AddressBookService;
+use MintyPHP\Service\Access\RoleService;
 use MintyPHP\Service\CustomField\UserCustomFieldValueService;
 use MintyPHP\Service\Org\DepartmentService;
 use MintyPHP\Service\Tenant\TenantScopeService;

modules/addressbook/web/css/pages/address-book-banner.css

@@ -0,0 +1,252 @@
+@layer pages {
+@keyframes ani-app-profile-banner {
+  0% {
+    --c-0: hsla(212, 0%, 0%, 1);
+    --s-start-0: 14.489998991212337%;
+    --s-end-0: 72%;
+    --y-0: 93%;
+    --x-0: 93%;
+    --c-1: hsla(212, 0%, 0%, 1);
+    --s-start-1: 0%;
+    --s-end-1: 45%;
+    --y-1: 9%;
+    --x-1: 26%;
+    --x-2: 15%;
+    --s-start-2: 2.9253667596993065%;
+    --s-end-2: 22.388851682060018%;
+    --c-2: hsla(257, 91%, 27%, 0.35);
+    --y-2: 79%;
+    --x-3: 40%;
+    --s-start-3: 3.985353824694249%;
+    --s-end-3: 47.580278608924694%;
+    --y-3: 104%;
+    --c-3: hsla(212, 100%, 50%, 0.5);
+    --y-4: 60%;
+    --x-4: 0%;
+    --c-4: hsla(224, 72%, 36%, 1);
+    --s-start-4: 2.391200382592061%;
+    --s-end-4: 29.307684556768592%;
+    --s-start-5: 2.9253667596993065%;
+    --s-end-5: 22.388851682060018%;
+    --y-5: 37%;
+    --c-5: hsla(248, 52%, 24%, 1);
+    --x-5: 92%;
+    --x-6: 101%;
+    --y-6: 16%;
+    --s-start-6: 13.173642363290591%;
+    --s-end-6: 31.747336520355095%;
+    --c-6: hsla(212, 100%, 50%, 0.19);
+    --y-7: 13%;
+    --s-start-7: 1%;
+    --s-end-7: 31%;
+    --x-7: 90%;
+    --c-7: hsla(227, 98%, 53%, 1);
+    --y-8: 56%;
+    --s-start-8: 3.985353824694249%;
+    --s-end-8: 13.103042116379756%;
+    --c-8: hsla(166, 71%, 60%, 0.32);
+    --x-8: 104%;
+    --c-9: hsla(219, 83%, 23%, 0.18);
+    --s-start-9: 18.597054544690312%;
+    --s-end-9: 31%;
+    --x-9: 97%;
+    --y-9: 19%;
+  }
+
+  100% {
+    --c-0: hsla(306, 0%, 0%, 1);
+    --s-start-0: 2.391200382592061%;
+    --s-end-0: 43.902064173373226%;
+    --y-0: 9%;
+    --x-0: 7%;
+    --c-1: hsla(306, 0%, 0%, 1);
+    --s-start-1: 9%;
+    --s-end-1: 54.805582404585024%;
+    --y-1: 93%;
+    --x-1: 96%;
+    --x-2: -2%;
+    --s-start-2: 3%;
+    --s-end-2: 26.722813338714598%;
+    --c-2: hsla(166, 72%, 60%, 1);
+    --y-2: 103%;
+    --x-3: 33%;
+    --s-start-3: 2.391200382592061%;
+    --s-end-3: 32.0689540200964%;
+    --y-3: 82%;
+    --c-3: hsla(180, 100%, 50%, 0.26);
+    --y-4: 81%;
+    --x-4: 37%;
+    --c-4: hsla(212, 88%, 26%, 0.58);
+    --s-start-4: 4.40642490323111%;
+    --s-end-4: 37.23528104246256%;
+    --s-start-5: 3%;
+    --s-end-5: 32.537089799783296%;
+    --y-5: 99%;
+    --c-5: hsla(271, 98%, 53%, 0.31);
+    --x-5: 54%;
+    --x-6: 104%;
+    --y-6: 43%;
+    --s-start-6: 6%;
+    --s-end-6: 42.501105312974815%;
+    --c-6: hsla(262, 100%, 50%, 0.15);
+    --y-7: -16%;
+    --s-start-7: 5%;
+    --s-end-7: 13.10107024898374%;
+    --x-7: 104%;
+    --c-7: hsla(298, 36%, 23%, 1);
+    --y-8: 30%;
+    --s-start-8: 2.391200382592061%;
+    --s-end-8: 27.141813016850573%;
+    --c-8: hsla(180, 100%, 50%, 0.11);
+    --x-8: 97%;
+    --c-9: hsla(219, 83%, 23%, 0.59);
+    --s-start-9: 5%;
+    --s-end-9: 21.32164536610654%;
+    --x-9: 78%;
+    --y-9: 4%;
+  }
+}
+
+.app-profile-banner {
+  --c-0: hsla(212, 0%, 0%, 1);
+  --y-0: 93%;
+  --x-0: 93%;
+  --c-1: hsla(212, 0%, 0%, 1);
+  --y-1: 9%;
+  --x-1: 26%;
+  --x-2: 15%;
+  --c-2: hsla(257, 91%, 27%, 0.35);
+  --y-2: 79%;
+  --x-3: 40%;
+  --y-3: 104%;
+  --c-3: hsla(212, 100%, 50%, 0.5);
+  --y-4: 60%;
+  --x-4: 0%;
+  --c-4: hsla(224, 72%, 36%, 1);
+  --y-5: 37%;
+  --c-5: hsla(248, 52%, 24%, 1);
+  --x-5: 92%;
+  --x-6: 101%;
+  --y-6: 16%;
+  --c-6: hsla(212, 100%, 50%, 0.19);
+  --y-7: 13%;
+  --x-7: 90%;
+  --c-7: hsla(227, 98%, 53%, 1);
+  --y-8: 56%;
+  --c-8: hsla(166, 71%, 60%, 0.32);
+  --x-8: 104%;
+  --c-9: hsla(219, 83%, 23%, 0.18);
+  --x-9: 97%;
+  --y-9: 19%;
+  background-color: hsla(305, 0%, 0%, 1);
+  background-image:
+    radial-gradient(
+      circle at var(--x-0) var(--y-0),
+      var(--c-0) var(--s-start-0),
+      transparent var(--s-end-0)
+    ),
+    radial-gradient(
+      circle at var(--x-1) var(--y-1),
+      var(--c-1) var(--s-start-1),
+      transparent var(--s-end-1)
+    ),
+    radial-gradient(
+      circle at var(--x-2) var(--y-2),
+      var(--c-2) var(--s-start-2),
+      transparent var(--s-end-2)
+    ),
+    radial-gradient(
+      circle at var(--x-3) var(--y-3),
+      var(--c-3) var(--s-start-3),
+      transparent var(--s-end-3)
+    ),
+    radial-gradient(
+      circle at var(--x-4) var(--y-4),
+      var(--c-4) var(--s-start-4),
+      transparent var(--s-end-4)
+    ),
+    radial-gradient(
+      circle at var(--x-5) var(--y-5),
+      var(--c-5) var(--s-start-5),
+      transparent var(--s-end-5)
+    ),
+    radial-gradient(
+      circle at var(--x-6) var(--y-6),
+      var(--c-6) var(--s-start-6),
+      transparent var(--s-end-6)
+    ),
+    radial-gradient(
+      circle at var(--x-7) var(--y-7),
+      var(--c-7) var(--s-start-7),
+      transparent var(--s-end-7)
+    ),
+    radial-gradient(
+      circle at var(--x-8) var(--y-8),
+      var(--c-8) var(--s-start-8),
+      transparent var(--s-end-8)
+    ),
+    radial-gradient(
+      circle at var(--x-9) var(--y-9),
+      var(--c-9) var(--s-start-9),
+      transparent var(--s-end-9)
+    );
+  animation: ani-app-profile-banner 10s linear infinite alternate;
+  background-blend-mode:
+    normal, normal, normal, normal, normal, normal, normal, normal, normal,
+    normal;
+  will-change: transform, opacity;
+  contain: paint;
+  height: 160px;
+}
+}
+
+@property --c-0 { syntax: "<color>"; inherits: false; initial-value: hsla(212, 0%, 0%, 1); }
+@property --s-start-0 { syntax: "<percentage>"; inherits: false; initial-value: 14.489998991212337%; }
+@property --s-end-0 { syntax: "<percentage>"; inherits: false; initial-value: 72%; }
+@property --y-0 { syntax: "<percentage>"; inherits: false; initial-value: 93%; }
+@property --x-0 { syntax: "<percentage>"; inherits: false; initial-value: 93%; }
+@property --c-1 { syntax: "<color>"; inherits: false; initial-value: hsla(212, 0%, 0%, 1); }
+@property --s-start-1 { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
+@property --s-end-1 { syntax: "<percentage>"; inherits: false; initial-value: 45%; }
+@property --y-1 { syntax: "<percentage>"; inherits: false; initial-value: 9%; }
+@property --x-1 { syntax: "<percentage>"; inherits: false; initial-value: 26%; }
+@property --x-2 { syntax: "<percentage>"; inherits: false; initial-value: 15%; }
+@property --s-start-2 { syntax: "<percentage>"; inherits: false; initial-value: 2.9253667596993065%; }
+@property --s-end-2 { syntax: "<percentage>"; inherits: false; initial-value: 22.388851682060018%; }
+@property --c-2 { syntax: "<color>"; inherits: false; initial-value: hsla(257, 91%, 27%, 0.35); }
+@property --y-2 { syntax: "<percentage>"; inherits: false; initial-value: 79%; }
+@property --x-3 { syntax: "<percentage>"; inherits: false; initial-value: 40%; }
+@property --s-start-3 { syntax: "<percentage>"; inherits: false; initial-value: 3.985353824694249%; }
+@property --s-end-3 { syntax: "<percentage>"; inherits: false; initial-value: 47.580278608924694%; }
+@property --y-3 { syntax: "<percentage>"; inherits: false; initial-value: 104%; }
+@property --c-3 { syntax: "<color>"; inherits: false; initial-value: hsla(212, 100%, 50%, 0.5); }
+@property --y-4 { syntax: "<percentage>"; inherits: false; initial-value: 60%; }
+@property --x-4 { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
+@property --c-4 { syntax: "<color>"; inherits: false; initial-value: hsla(224, 72%, 36%, 1); }
+@property --s-start-4 { syntax: "<percentage>"; inherits: false; initial-value: 2.391200382592061%; }
+@property --s-end-4 { syntax: "<percentage>"; inherits: false; initial-value: 29.307684556768592%; }
+@property --s-start-5 { syntax: "<percentage>"; inherits: false; initial-value: 2.9253667596993065%; }
+@property --s-end-5 { syntax: "<percentage>"; inherits: false; initial-value: 22.388851682060018%; }
+@property --y-5 { syntax: "<percentage>"; inherits: false; initial-value: 37%; }
+@property --c-5 { syntax: "<color>"; inherits: false; initial-value: hsla(248, 52%, 24%, 1); }
+@property --x-5 { syntax: "<percentage>"; inherits: false; initial-value: 92%; }
+@property --x-6 { syntax: "<percentage>"; inherits: false; initial-value: 101%; }
+@property --y-6 { syntax: "<percentage>"; inherits: false; initial-value: 16%; }
+@property --s-start-6 { syntax: "<percentage>"; inherits: false; initial-value: 13.173642363290591%; }
+@property --s-end-6 { syntax: "<percentage>"; inherits: false; initial-value: 31.747336520355095%; }
+@property --c-6 { syntax: "<color>"; inherits: false; initial-value: hsla(212, 100%, 50%, 0.19); }
+@property --y-7 { syntax: "<percentage>"; inherits: false; initial-value: 13%; }
+@property --s-start-7 { syntax: "<percentage>"; inherits: false; initial-value: 1%; }
+@property --s-end-7 { syntax: "<percentage>"; inherits: false; initial-value: 31%; }
+@property --x-7 { syntax: "<percentage>"; inherits: false; initial-value: 90%; }
+@property --c-7 { syntax: "<color>"; inherits: false; initial-value: hsla(227, 98%, 53%, 1); }
+@property --y-8 { syntax: "<percentage>"; inherits: false; initial-value: 56%; }
+@property --s-start-8 { syntax: "<percentage>"; inherits: false; initial-value: 3.985353824694249%; }
+@property --s-end-8 { syntax: "<percentage>"; inherits: false; initial-value: 13.103042116379756%; }
+@property --c-8 { syntax: "<color>"; inherits: false; initial-value: hsla(166, 71%, 60%, 0.32); }
+@property --x-8 { syntax: "<percentage>"; inherits: false; initial-value: 104%; }
+@property --c-9 { syntax: "<color>"; inherits: false; initial-value: hsla(219, 83%, 23%, 0.18); }
+@property --s-start-9 { syntax: "<percentage>"; inherits: false; initial-value: 18.597054544690312%; }
+@property --s-end-9 { syntax: "<percentage>"; inherits: false; initial-value: 31%; }
+@property --x-9 { syntax: "<percentage>"; inherits: false; initial-value: 97%; }
+@property --y-9 { syntax: "<percentage>"; inherits: false; initial-value: 19%; }

modules/addressbook/web/css/pages/address-book-view.css

@@ -73,504 +73,4 @@
 .app-profile-table tr:last-child td {
   border-bottom: 0;
 }
-
-@keyframes ani-app-profile-banner {
-  0% {
-    --c-0: hsla(212, 0%, 0%, 1);
-    --s-start-0: 14.489998991212337%;
-    --s-end-0: 72%;
-    --y-0: 93%;
-    --x-0: 93%;
-    --c-1: hsla(212, 0%, 0%, 1);
-    --s-start-1: 0%;
-    --s-end-1: 45%;
-    --y-1: 9%;
-    --x-1: 26%;
-    --x-2: 15%;
-    --s-start-2: 2.9253667596993065%;
-    --s-end-2: 22.388851682060018%;
-    --c-2: hsla(257, 91%, 27%, 0.35);
-    --y-2: 79%;
-    --x-3: 40%;
-    --s-start-3: 3.985353824694249%;
-    --s-end-3: 47.580278608924694%;
-    --y-3: 104%;
-    --c-3: hsla(212, 100%, 50%, 0.5);
-    --y-4: 60%;
-    --x-4: 0%;
-    --c-4: hsla(224, 72%, 36%, 1);
-    --s-start-4: 2.391200382592061%;
-    --s-end-4: 29.307684556768592%;
-    --s-start-5: 2.9253667596993065%;
-    --s-end-5: 22.388851682060018%;
-    --y-5: 37%;
-    --c-5: hsla(248, 52%, 24%, 1);
-    --x-5: 92%;
-    --x-6: 101%;
-    --y-6: 16%;
-    --s-start-6: 13.173642363290591%;
-    --s-end-6: 31.747336520355095%;
-    --c-6: hsla(212, 100%, 50%, 0.19);
-    --y-7: 13%;
-    --s-start-7: 1%;
-    --s-end-7: 31%;
-    --x-7: 90%;
-    --c-7: hsla(227, 98%, 53%, 1);
-    --y-8: 56%;
-    --s-start-8: 3.985353824694249%;
-    --s-end-8: 13.103042116379756%;
-    --c-8: hsla(166, 71%, 60%, 0.32);
-    --x-8: 104%;
-    --c-9: hsla(219, 83%, 23%, 0.18);
-    --s-start-9: 18.597054544690312%;
-    --s-end-9: 31%;
-    --x-9: 97%;
-    --y-9: 19%;
-  }
-
-  100% {
-    --c-0: hsla(306, 0%, 0%, 1);
-    --s-start-0: 2.391200382592061%;
-    --s-end-0: 43.902064173373226%;
-    --y-0: 9%;
-    --x-0: 7%;
-    --c-1: hsla(306, 0%, 0%, 1);
-    --s-start-1: 9%;
-    --s-end-1: 54.805582404585024%;
-    --y-1: 93%;
-    --x-1: 96%;
-    --x-2: -2%;
-    --s-start-2: 3%;
-    --s-end-2: 26.722813338714598%;
-    --c-2: hsla(166, 72%, 60%, 1);
-    --y-2: 103%;
-    --x-3: 33%;
-    --s-start-3: 2.391200382592061%;
-    --s-end-3: 32.0689540200964%;
-    --y-3: 82%;
-    --c-3: hsla(180, 100%, 50%, 0.26);
-    --y-4: 81%;
-    --x-4: 37%;
-    --c-4: hsla(212, 88%, 26%, 0.58);
-    --s-start-4: 4.40642490323111%;
-    --s-end-4: 37.23528104246256%;
-    --s-start-5: 3%;
-    --s-end-5: 32.537089799783296%;
-    --y-5: 99%;
-    --c-5: hsla(271, 98%, 53%, 0.31);
-    --x-5: 54%;
-    --x-6: 104%;
-    --y-6: 43%;
-    --s-start-6: 6%;
-    --s-end-6: 42.501105312974815%;
-    --c-6: hsla(262, 100%, 50%, 0.15);
-    --y-7: -16%;
-    --s-start-7: 5%;
-    --s-end-7: 13.10107024898374%;
-    --x-7: 104%;
-    --c-7: hsla(298, 36%, 23%, 1);
-    --y-8: 30%;
-    --s-start-8: 2.391200382592061%;
-    --s-end-8: 27.141813016850573%;
-    --c-8: hsla(180, 100%, 50%, 0.11);
-    --x-8: 97%;
-    --c-9: hsla(219, 83%, 23%, 0.59);
-    --s-start-9: 5%;
-    --s-end-9: 21.32164536610654%;
-    --x-9: 78%;
-    --y-9: 4%;
-  }
-}
-
-@property --c-0 {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: hsla(212, 0%, 0%, 1);
-}
-
-@property --s-start-0 {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 14.489998991212337%;
-}
-
-@property --s-end-0 {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 72%;
-}
-
-@property --y-0 {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 93%;
-}
-
-@property --x-0 {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 93%;
-}
-
-@property --c-1 {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: hsla(212, 0%, 0%, 1);
-}
-
-@property --s-start-1 {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 0%;
-}
-
-@property --s-end-1 {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 45%;
-}
-
-@property --y-1 {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 9%;
-}
-
-@property --x-1 {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 26%;
-}
-
-@property --x-2 {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 15%;
-}
-
-@property --s-start-2 {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 2.9253667596993065%;
-}
-
-@property --s-end-2 {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 22.388851682060018%;
-}
-
-@property --c-2 {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: hsla(257, 91%, 27%, 0.35);
-}
-
-@property --y-2 {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 79%;
-}
-
-@property --x-3 {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 40%;
-}
-
-@property --s-start-3 {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 3.985353824694249%;
-}
-
-@property --s-end-3 {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 47.580278608924694%;
-}
-
-@property --y-3 {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 104%;
-}
-
-@property --c-3 {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: hsla(212, 100%, 50%, 0.5);
-}
-
-@property --y-4 {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 60%;
-}
-
-@property --x-4 {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 0%;
-}
-
-@property --c-4 {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: hsla(224, 72%, 36%, 1);
-}
-
-@property --s-start-4 {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 2.391200382592061%;
-}
-
-@property --s-end-4 {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 29.307684556768592%;
-}
-
-@property --s-start-5 {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 2.9253667596993065%;
-}
-
-@property --s-end-5 {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 22.388851682060018%;
-}
-
-@property --y-5 {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 37%;
-}
-
-@property --c-5 {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: hsla(248, 52%, 24%, 1);
-}
-
-@property --x-5 {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 92%;
-}
-
-@property --x-6 {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 101%;
-}
-
-@property --y-6 {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 16%;
-}
-
-@property --s-start-6 {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 13.173642363290591%;
-}
-
-@property --s-end-6 {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 31.747336520355095%;
-}
-
-@property --c-6 {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: hsla(212, 100%, 50%, 0.19);
-}
-
-@property --y-7 {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 13%;
-}
-
-@property --s-start-7 {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 1%;
-}
-
-@property --s-end-7 {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 31%;
-}
-
-@property --x-7 {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 90%;
-}
-
-@property --c-7 {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: hsla(227, 98%, 53%, 1);
-}
-
-@property --y-8 {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 56%;
-}
-
-@property --s-start-8 {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 3.985353824694249%;
-}
-
-@property --s-end-8 {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 13.103042116379756%;
-}
-
-@property --c-8 {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: hsla(166, 71%, 60%, 0.32);
-}
-
-@property --x-8 {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 104%;
-}
-
-@property --c-9 {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: hsla(219, 83%, 23%, 0.18);
-}
-
-@property --s-start-9 {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 18.597054544690312%;
-}
-
-@property --s-end-9 {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 31%;
-}
-
-@property --x-9 {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 97%;
-}
-
-@property --y-9 {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 19%;
-}
-
-.app-profile-banner {
-  --c-0: hsla(212, 0%, 0%, 1);
-  --y-0: 93%;
-  --x-0: 93%;
-  --c-1: hsla(212, 0%, 0%, 1);
-  --y-1: 9%;
-  --x-1: 26%;
-  --x-2: 15%;
-  --c-2: hsla(257, 91%, 27%, 0.35);
-  --y-2: 79%;
-  --x-3: 40%;
-  --y-3: 104%;
-  --c-3: hsla(212, 100%, 50%, 0.5);
-  --y-4: 60%;
-  --x-4: 0%;
-  --c-4: hsla(224, 72%, 36%, 1);
-  --y-5: 37%;
-  --c-5: hsla(248, 52%, 24%, 1);
-  --x-5: 92%;
-  --x-6: 101%;
-  --y-6: 16%;
-  --c-6: hsla(212, 100%, 50%, 0.19);
-  --y-7: 13%;
-  --x-7: 90%;
-  --c-7: hsla(227, 98%, 53%, 1);
-  --y-8: 56%;
-  --c-8: hsla(166, 71%, 60%, 0.32);
-  --x-8: 104%;
-  --c-9: hsla(219, 83%, 23%, 0.18);
-  --x-9: 97%;
-  --y-9: 19%;
-  background-color: hsla(305, 0%, 0%, 1);
-  background-image:
-    radial-gradient(
-      circle at var(--x-0) var(--y-0),
-      var(--c-0) var(--s-start-0),
-      transparent var(--s-end-0)
-    ),
-    radial-gradient(
-      circle at var(--x-1) var(--y-1),
-      var(--c-1) var(--s-start-1),
-      transparent var(--s-end-1)
-    ),
-    radial-gradient(
-      circle at var(--x-2) var(--y-2),
-      var(--c-2) var(--s-start-2),
-      transparent var(--s-end-2)
-    ),
-    radial-gradient(
-      circle at var(--x-3) var(--y-3),
-      var(--c-3) var(--s-start-3),
-      transparent var(--s-end-3)
-    ),
-    radial-gradient(
-      circle at var(--x-4) var(--y-4),
-      var(--c-4) var(--s-start-4),
-      transparent var(--s-end-4)
-    ),
-    radial-gradient(
-      circle at var(--x-5) var(--y-5),
-      var(--c-5) var(--s-start-5),
-      transparent var(--s-end-5)
-    ),
-    radial-gradient(
-      circle at var(--x-6) var(--y-6),
-      var(--c-6) var(--s-start-6),
-      transparent var(--s-end-6)
-    ),
-    radial-gradient(
-      circle at var(--x-7) var(--y-7),
-      var(--c-7) var(--s-start-7),
-      transparent var(--s-end-7)
-    ),
-    radial-gradient(
-      circle at var(--x-8) var(--y-8),
-      var(--c-8) var(--s-start-8),
-      transparent var(--s-end-8)
-    ),
-    radial-gradient(
-      circle at var(--x-9) var(--y-9),
-      var(--c-9) var(--s-start-9),
-      transparent var(--s-end-9)
-    );
-  animation: ani-app-profile-banner 10s linear infinite alternate;
-  background-blend-mode:
-    normal, normal, normal, normal, normal, normal, normal, normal, normal,
-    normal;
-  will-change: transform, opacity;
-  contain: paint;
-  height: 160px;
-}
 }