mypgs 1.6.0 → 2.1.0

package/dist/css/index.css

@@ -1,7 +1,6 @@
 /*!*****************************************************************************************************************!*\
   !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./assets/scss/index.scss ***!
   \*****************************************************************************************************************/
-@charset "UTF-8";
 /*
 |--------------------------------------------------------------------------
 | Base
@@ -24,8 +23,8 @@
   --text-shadow: 0px 0px 50px #000000;
   --backdrop: #0000003e;
   --blur: blur(20px);
-  --page-top: calc(var(--heightOfHeader) + (var(--gap-elements)*2));
-  --page-topScroll: calc(var(--heightOfHeaderScroll) + (var(--gap-elements)*2));
+  --page-top: calc(var(--heightOfHeader) + var(--heightOfHeader));
+  --page-topScroll: calc(var(--heightOfHeaderScroll) + var(--heightOfHeader));
   --page-width: 1280px;
   --page-space: clamp(var(--padding-page), calc((100% - var(--section-width)) / 2 + var(--padding-page)), 100%);
   --gap-texts: 1.0rem;
@@ -107,14 +106,14 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-  scroll-margin-top: calc(var(--heightOfHeader) + 5vh);
+  scroll-margin-top: var(--page-topScroll);
 }
 
 [pgs~=htmlBase] * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-  scroll-margin-top: calc(var(--heightOfHeader) + 5vh);
+  scroll-margin-top: var(--page-topScroll);
 }
 
 [pgs~=htmlBase]:root,
@@ -2139,9 +2138,12 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   }
 }
 [pgs~=initP] [pgs~=pageShell] {
-  --pageShell-aside-sticky-top: 0;
+  --pageShell-width: calc(var(--pageShell-content-width) + (var(--padding-page) * 2));
+  --pageShell-content-width: var(--page-width);
   --pageShell-aside-width: 400px;
-  --pageShell-content-width: 500px;
+  --pageShell-aside-sticky-top: 0;
+  --pageShell-paddingInline: var(--padding-page);
+  --pageShell-paddingTop: var(--page-top);
   --pageShell-gap: var(--gap-elements);
   display: flex;
   flex-wrap: wrap;
@@ -2150,17 +2152,17 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   align-items: start;
   justify-content: center;
   width: 100%;
-  max-width: calc(var(--page-width) + var(--padding-page) * 2);
-  padding-inline: var(--padding-page);
+  max-width: var(--pageShell-width);
+  padding-inline: var(--pageShell-paddingInline);
   container-type: inline-size;
 }
 [pgs~=initP] [pgs~=pageShell] [pgs~=pageShell-content] {
   grid-area: content;
-  flex: 999 1 var(--pageShell-content-width);
-  min-width: min(100%, var(--pageShell-content-width));
-  width: min(100%, var(--page-width));
-  max-width: var(--page-width);
-  padding-top: var(--page-top);
+  flex: 999 1 500px;
+  min-width: min(100%, 500px);
+  width: min(100%, var(--pageShell-content-width));
+  max-width: var(--pageShell-content-width);
+  padding-top: var(--pageShell-paddingTop);
   padding-bottom: var(--gap-elements);
 }
 [pgs~=initP] [pgs~=pageShell] [pgs~=pageShell-aside] {
@@ -2178,7 +2180,7 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   overscroll-behavior: contain;
   scrollbar-gutter: stable;
   scrollbar-width: none;
-  padding-top: var(--page-top);
+  padding-top: var(--pageShell-paddingTop);
   padding-bottom: var(--gap-elements);
   flex: 1 1 var(--pageShell-aside-width);
   min-width: min(100%, var(--pageShell-aside-width));
@@ -2203,7 +2205,7 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   overscroll-behavior: contain;
   scrollbar-gutter: stable;
   scrollbar-width: none;
-  padding-top: var(--page-top);
+  padding-top: var(--pageShell-paddingTop);
   padding-bottom: calc(var(--gap-elements) * 2);
 }
 [pgs~=initP] [pgs~=pageShell] [pgs~=pageShell-aside] [pgs~=pageShell-aside-scroll]::-webkit-scrollbar {
@@ -2230,10 +2232,10 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   grid-area: asideRight;
 }
 [pgs~=initP] [pgs~=pageShell]:has(> [pgs~=pageShell-aside]) {
-  max-width: calc(var(--page-width) + var(--pageShell-aside-width) + var(--pageShell-gap) + var(--padding-page) * 2);
+  --pageShell-width: calc(var(--pageShell-content-width) + var(--pageShell-aside-width) + var(--pageShell-gap) + (var(--padding-page) * 2));
 }
 [pgs~=initP] [pgs~=pageShell]:has(> [pgs~=pageShell-aside] ~ [pgs~=pageShell-aside]) {
-  max-width: calc(var(--page-width) + var(--pageShell-aside-width) * 2 + var(--pageShell-gap) * 2 + var(--padding-page) * 2);
+  --pageShell-width: calc(var(--pageShell-content-width) + (var(--pageShell-aside-width) * 2) + (var(--pageShell-gap) * 2) + (var(--padding-page) * 2));
 }
 @container (max-width: calc(400px + 500px + 4rem)) {
   [pgs~=initP] [pgs~=pageShell]:has(> [pgs~=pageShell-aside]) [pgs~=pageShell-aside] {
@@ -2242,10 +2244,14 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
     max-height: none;
     width: 100%;
     min-width: 100%;
+    overflow: visible;
+    overscroll-behavior: auto;
+    scrollbar-gutter: auto;
   }
-  [pgs~=initP] [pgs~=pageShell]:has(> [pgs~=pageShell-aside]) [pgs~=pageShell-aside] [pgs~=pageShell-aside] {
+  [pgs~=initP] [pgs~=pageShell]:has(> [pgs~=pageShell-aside]) [pgs~=pageShell-aside] [pgs~=pageShell-aside-scroll] {
     scrollbar-gutter: auto;
     overflow: visible;
+    overscroll-behavior: auto;
   }
   [pgs~=initP] [pgs~=pageShell]:has(> [pgs~=pageShell-aside]) [pgs~=pageShell-content] {
     padding-top: 0;
@@ -2259,10 +2265,14 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
     max-height: none;
     width: 100%;
     min-width: 100%;
+    overflow: visible;
+    overscroll-behavior: auto;
+    scrollbar-gutter: auto;
   }
-  [pgs~=initP] [pgs~=pageShell]:has(> [pgs~=pageShell-content] + [pgs~=pageShell-aside]) [pgs~=pageShell-content] + [pgs~=pageShell-aside] [pgs~=pageShell-aside] {
+  [pgs~=initP] [pgs~=pageShell]:has(> [pgs~=pageShell-content] + [pgs~=pageShell-aside]) [pgs~=pageShell-content] + [pgs~=pageShell-aside] [pgs~=pageShell-aside-scroll] {
     scrollbar-gutter: auto;
     overflow: visible;
+    overscroll-behavior: auto;
   }
   [pgs~=initP] [pgs~=pageShell]:has(> [pgs~=pageShell-content] + [pgs~=pageShell-aside]) [pgs~=pageShell-content] + [pgs~=pageShell-aside] {
     padding-top: 0;
@@ -2272,7 +2282,7 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
 @container (max-width: calc(400px + 500px + 400px + (4rem * 2))) {
   [pgs~=initP] [pgs~=pageShell]:has(> [pgs~=pageShell-aside]):has(> [pgs~=pageShell-content] + [pgs~=pageShell-aside]) {
     display: grid;
-    grid-template-columns: var(--pageShell-aside-width) minmax(0, var(--page-width));
+    grid-template-columns: var(--pageShell-aside-width) minmax(0, var(--pageShell-content-width));
     grid-template-areas: "asideLeft content" "asideLeft asideRight";
     justify-content: center;
   }
@@ -2282,10 +2292,14 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
     max-height: none;
     width: 100%;
     min-width: 100%;
+    overflow: visible;
+    overscroll-behavior: auto;
+    scrollbar-gutter: auto;
   }
-  [pgs~=initP] [pgs~=pageShell]:has(> [pgs~=pageShell-aside]):has(> [pgs~=pageShell-content] + [pgs~=pageShell-aside]) [pgs~=pageShell-content] + [pgs~=pageShell-aside] [pgs~=pageShell-aside] {
+  [pgs~=initP] [pgs~=pageShell]:has(> [pgs~=pageShell-aside]):has(> [pgs~=pageShell-content] + [pgs~=pageShell-aside]) [pgs~=pageShell-content] + [pgs~=pageShell-aside] [pgs~=pageShell-aside-scroll] {
     scrollbar-gutter: auto;
     overflow: visible;
+    overscroll-behavior: auto;
   }
   [pgs~=initP] [pgs~=pageShell]:has(> [pgs~=pageShell-aside]):has(> [pgs~=pageShell-content] + [pgs~=pageShell-aside]) [pgs~=pageShell-content] + [pgs~=pageShell-aside] {
     padding-top: 0;
@@ -2302,10 +2316,14 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
     max-height: none;
     width: 100%;
     min-width: 100%;
+    overflow: visible;
+    overscroll-behavior: auto;
+    scrollbar-gutter: auto;
   }
-  [pgs~=initP] [pgs~=pageShell]:has(> [pgs~=pageShell-aside]):has(> [pgs~=pageShell-content] + [pgs~=pageShell-aside]) [pgs~=pageShell-aside] [pgs~=pageShell-aside] {
+  [pgs~=initP] [pgs~=pageShell]:has(> [pgs~=pageShell-aside]):has(> [pgs~=pageShell-content] + [pgs~=pageShell-aside]) [pgs~=pageShell-aside] [pgs~=pageShell-aside-scroll] {
     scrollbar-gutter: auto;
     overflow: visible;
+    overscroll-behavior: auto;
   }
   [pgs~=initP] [pgs~=pageShell]:has(> [pgs~=pageShell-aside]):has(> [pgs~=pageShell-content] + [pgs~=pageShell-aside]) [pgs~=pageShell-content],
   [pgs~=initP] [pgs~=pageShell]:has(> [pgs~=pageShell-aside]):has(> [pgs~=pageShell-content] + [pgs~=pageShell-aside]) [pgs~=pageShell-content] + [pgs~=pageShell-aside] {
@@ -2315,7 +2333,7 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
 }
 @container (max-width: 500px) {
   [pgs~=initP] [pgs~=pageShell] {
-    padding-top: var(--page-top);
+    padding-top: var(--pageShell-paddingTop);
   }
   [pgs~=initP] [pgs~=pageShell] [pgs~=pageShell-content],
   [pgs~=initP] [pgs~=pageShell] [pgs~=pageShell-aside] {
@@ -2328,10 +2346,14 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
     max-height: none;
     width: 100%;
     min-width: 100%;
+    overflow: visible;
+    overscroll-behavior: auto;
+    scrollbar-gutter: auto;
   }
-  [pgs~=initP] [pgs~=pageShell] [pgs~=pageShell-aside] [pgs~=pageShell-aside] {
+  [pgs~=initP] [pgs~=pageShell] [pgs~=pageShell-aside] [pgs~=pageShell-aside-scroll] {
     scrollbar-gutter: auto;
     overflow: visible;
+    overscroll-behavior: auto;
   }
 }
 [pgs~=initP] [pgs~=gapTexts] {
@@ -2417,6 +2439,9 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
 [pgs~=initP] [pgs~=header] [pgs~=header-element] [pgs~=header-element-hamburger] [pgs~=header-element-hamburger-button]::before {
   opacity: 0.6;
 }
+[pgs~=initP] [pgs~=header] [pgs~=header-element] [pgs~=header-element-hamburger] [pgs~=header-element-hamburger-button]:hover::before, [pgs~=initP] [pgs~=header] [pgs~=header-element] [pgs~=header-element-hamburger] [pgs~=header-element-hamburger-button]:hover::after {
+  background-color: var(--color-white);
+}
 [pgs~=initP] [pgs~=header] [pgs~=header-element] [pgs~=header-element-hamburger] [pgs~=header-element-hamburger-button][aria-expanded=true] {
   gap: 0px;
 }
@@ -2491,8 +2516,6 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   top: 0;
   translate: 0 -50%;
   z-index: 1;
-  --button-background: var(--color-primary);
-  --button-color: var(--color-whiteFixed);
 }
 [pgs~=initP] [pgs~=footer] [pgs~=toggleDarkmode]:has(i.fa-sun)::after {
   content: "Attiva Light Mode";
@@ -2624,91 +2647,84 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
 */
 [pgs~=initP] [pgs~=card],
 [pgs~=initP] [pgs~=cardImg] {
-  --card-padding: var(--padding);
+  --card-padding: var(--padding-2);
+  --card-borderRadius: calc(var(--border-radius-input) + var(--card-padding));
+  --card-background: var(--color-box-transparent);
+  --card-padding-img: 0;
   height: 100%;
 }
 [pgs~=initP] [pgs~=card]:not(:has(> a)),
 [pgs~=initP] [pgs~=cardImg]:not(:has(> a)) {
-  --card-background: var(--color-box-transparent);
-  --card-padding-img: 0;
   padding: var(--card-padding);
   background: var(--card-background);
-  border-radius: var(--border-radius);
+  border-radius: var(--card-borderRadius);
 }
 [pgs~=initP] [pgs~=card] > a,
 [pgs~=initP] [pgs~=cardImg] > a {
   --card-background: var(--color-white);
-  --card-padding-img: .3rem;
   transition: all 200ms;
   cursor: pointer;
   text-decoration: none;
+  --hover-shadow-color: var(--color-primary);
+  --hover-shadow-displacement: 0.25rem;
+}
+@media (hover: hover) and (pointer: fine) {
+  [pgs~=initP] [pgs~=card] > a:not(:disabled):not([pgs-option~=buttonStyle-2]):focus-visible, [pgs~=initP] [pgs~=card] > a:not(:disabled):not([pgs-option~=buttonStyle-2]):hover,
+  [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):not([pgs-option~=buttonStyle-2]):focus-visible,
+  [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):not([pgs-option~=buttonStyle-2]):hover {
+    box-shadow: 0px 0px 38px 0px var(--hover-shadow-color);
+    --hover-color: var(--color-white);
+    --hover-background: var(--color-primary-strong);
+    color: var(--hover-color);
+    --fa-primary-color: var(--hover-color);
+    --fa-secondary-color: var(--hover-color);
+    background: var(--hover-background);
+  }
+  [pgs~=initP] [pgs~=card] > a:not(:disabled):not([pgs-option~=buttonStyle-2]):focus-visible :is(h1, h2, h3, h4, h5, h6, p), [pgs~=initP] [pgs~=card] > a:not(:disabled):not([pgs-option~=buttonStyle-2]):hover :is(h1, h2, h3, h4, h5, h6, p),
+  [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):not([pgs-option~=buttonStyle-2]):focus-visible :is(h1, h2, h3, h4, h5, h6, p),
+  [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):not([pgs-option~=buttonStyle-2]):hover :is(h1, h2, h3, h4, h5, h6, p) {
+    color: var(--hover-color);
+  }
 }
 @media (hover: hover) and (pointer: fine) {
-  [pgs~=initP] [pgs~=card] > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=card] > a:not(:disabled):hover,
-  [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):focus-visible,
-  [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):hover {
-    box-shadow: -0.25rem 0.25rem 0px var(--color-black);
-    transform: translate(0.25rem, -0.25rem);
-  }
-  @supports (color: contrast-color(red)) {
-    [pgs~=initP] [pgs~=card] > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=card] > a:not(:disabled):hover,
-    [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):focus-visible,
-    [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):hover {
-      --button-color-hover: contrast-color(color-mix(in srgb, var(--button-background-hover) 77%, black));
-    }
-  }
-  @supports not (color: contrast-color(red)) {
-    [pgs~=initP] [pgs~=card] > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=card] > a:not(:disabled):hover,
-    [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):focus-visible,
-    [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):hover {
-      --button-color-hover: var(--color-black);
-    }
-  }
-  [pgs~=initP] [pgs~=card] > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=card] > a:not(:disabled):hover,
-  [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):focus-visible,
-  [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):hover {
-    --button-background-hover: var(--color-primary-soft);
-    color: var(--button-color-hover);
-    background: var(--button-background-hover);
-  }
-  [pgs~=initP] [pgs~=card] > a:not(:disabled):focus-visible:is(a), [pgs~=initP] [pgs~=card] > a:not(:disabled):hover:is(a),
-  [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):focus-visible:is(a),
-  [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):hover:is(a) {
-    color: var(--button-color-hover);
-  }
-  [pgs~=initP] [pgs~=card] > a:not(:disabled):focus-visible i, [pgs~=initP] [pgs~=card] > a:not(:disabled):hover i,
-  [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):focus-visible i,
-  [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):hover i {
-    color: var(--button-color-hover);
-    --fa-primary-color: var(--button-color-hover);
-    --fa-secondary-color: var(--button-color-hover);
-  }
-  [pgs~=initP] [pgs~=card] > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=card] > a:not(:disabled):hover,
-  [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):focus-visible,
-  [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):hover {
+  [pgs~=initP] [pgs~=card] > a:not(:disabled)[pgs-option~=buttonStyle-2]:focus-visible, [pgs~=initP] [pgs~=card] > a:not(:disabled)[pgs-option~=buttonStyle-2]:hover,
+  [pgs~=initP] [pgs~=cardImg] > a:not(:disabled)[pgs-option~=buttonStyle-2]:focus-visible,
+  [pgs~=initP] [pgs~=cardImg] > a:not(:disabled)[pgs-option~=buttonStyle-2]:hover {
+    box-shadow: calc(var(--hover-shadow-displacement) * -1) var(--hover-shadow-displacement) 0 var(--color-black);
+    transform: translate(var(--hover-shadow-displacement), calc(var(--hover-shadow-displacement) * -1));
     outline-color: transparent;
+    --hover-color: var(--color-white);
+    --hover-background: var(--color-primary-strong);
+    color: var(--hover-color);
+    --fa-primary-color: var(--hover-color);
+    --fa-secondary-color: var(--hover-color);
+    background: var(--hover-background);
   }
-  [pgs~=initP] [pgs~=card] > a:not(:disabled):focus-visible i, [pgs~=initP] [pgs~=card] > a:not(:disabled):hover i,
-  [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):focus-visible i,
-  [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):hover i {
-    --fa-secondary-opacity: 0.5;
+  [pgs~=initP] [pgs~=card] > a:not(:disabled)[pgs-option~=buttonStyle-2]:focus-visible :is(h1, h2, h3, h4, h5, h6, p), [pgs~=initP] [pgs~=card] > a:not(:disabled)[pgs-option~=buttonStyle-2]:hover :is(h1, h2, h3, h4, h5, h6, p),
+  [pgs~=initP] [pgs~=cardImg] > a:not(:disabled)[pgs-option~=buttonStyle-2]:focus-visible :is(h1, h2, h3, h4, h5, h6, p),
+  [pgs~=initP] [pgs~=cardImg] > a:not(:disabled)[pgs-option~=buttonStyle-2]:hover :is(h1, h2, h3, h4, h5, h6, p) {
+    color: var(--hover-color);
   }
 }
+[pgs~=initP] [pgs~=card] > a:not(:disabled):hover,
+[pgs~=initP] [pgs~=cardImg] > a:not(:disabled):hover {
+  --fa-secondary-opacity: 0.5;
+  --hover-color: var(--color-whiteFixed);
+  color: var(--hover-color);
+  --fa-primary-color: var(--hover-color);
+  --fa-secondary-color: var(--hover-color);
+}
 [pgs~=initP] [pgs~=card] > a:is(a):hover,
 [pgs~=initP] [pgs~=cardImg] > a:is(a):hover {
   text-decoration: none;
 }
-[pgs~=initP] [pgs~=card] > a:active,
-[pgs~=initP] [pgs~=cardImg] > a:active {
-  box-shadow: 0 0 0 var(--color-black);
-  transform: translate(0, 0);
-}
 [pgs~=initP] [pgs~=card] > a,
 [pgs~=initP] [pgs~=cardImg] > a {
   height: 100%;
   padding: var(--card-padding);
+  padding-bottom: calc(var(--card-padding) * 2);
   background: var(--card-background);
-  border-radius: var(--border-radius);
+  border-radius: var(--card-borderRadius);
   outline: var(--border-complete);
 }
 [pgs~=initP] [pgs~=card] > object,
@@ -2719,7 +2735,7 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
 [pgs~=initP] [pgs~=cardImg] > img,
 [pgs~=initP] [pgs~=cardImg] > a > object,
 [pgs~=initP] [pgs~=cardImg] > a > img {
-  border-radius: var(--border-radius);
+  border-radius: var(--card-borderRadius);
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
   margin: calc(var(--card-padding) * -1);
@@ -2729,7 +2745,7 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
 }
 [pgs~=initP] [pgs~=card] [pgs~=card-img],
 [pgs~=initP] [pgs~=cardImg] [pgs~=card-img] {
-  border-radius: var(--border-radius);
+  border-radius: var(--card-borderRadius);
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
   margin: calc(var(--card-padding) * -1);
@@ -2740,38 +2756,13 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
 [pgs~=initP] [pgs~=button] {
   --button-border: var(--border-complete);
   --button-size: 1.5rem;
-  --button-icon-size: 2.0rem;
+  --button-icon-size: 2rem;
   --button-padding-block: var(--button-size);
   --button-padding-left: calc(var(--button-size) * 2);
   --button-padding-right: calc(var(--button-size) * 2);
   --button-padding: var(--button-padding-block) var(--button-padding-right) var(--button-padding-block) var(--button-padding-left);
   --fa-secondary-opacity: 0.5;
   --fa-size: var(--button-icon-size);
-}
-@supports (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=button] {
-    --button-color: contrast-color(color-mix(in srgb, var(--button-background) 77%, black));
-  }
-}
-@supports not (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=button] {
-    --button-color: var(--color-black);
-  }
-}
-[pgs~=initP] [pgs~=button] {
-  --button-background: var(--color-box);
-  color: var(--button-color);
-  background: var(--button-background);
-}
-[pgs~=initP] [pgs~=button]:is(a) {
-  color: var(--button-color);
-}
-[pgs~=initP] [pgs~=button] i {
-  color: var(--button-color);
-  --fa-primary-color: var(--button-color);
-  --fa-secondary-color: var(--button-color);
-}
-[pgs~=initP] [pgs~=button] {
   font-family: var(--font);
   font-size: 1.6rem;
   font-weight: 600;
@@ -2802,69 +2793,70 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   transition: all 200ms;
   cursor: pointer;
   text-decoration: none;
+  --hover-shadow-color: var(--color-primary);
+  --hover-shadow-displacement: 0.25rem;
+}
+@media (hover: hover) and (pointer: fine) {
+  [pgs~=initP] [pgs~=button]:not(:disabled):not([pgs-option~=buttonStyle-2]):focus-visible, [pgs~=initP] [pgs~=button]:not(:disabled):not([pgs-option~=buttonStyle-2]):hover {
+    box-shadow: 0px 0px 38px 0px var(--hover-shadow-color);
+    --hover-color: var(--color-white);
+    --hover-background: var(--color-primary-strong);
+    color: var(--hover-color);
+    --fa-primary-color: var(--hover-color);
+    --fa-secondary-color: var(--hover-color);
+    background: var(--hover-background);
+  }
+  [pgs~=initP] [pgs~=button]:not(:disabled):not([pgs-option~=buttonStyle-2]):focus-visible :is(h1, h2, h3, h4, h5, h6, p), [pgs~=initP] [pgs~=button]:not(:disabled):not([pgs-option~=buttonStyle-2]):hover :is(h1, h2, h3, h4, h5, h6, p) {
+    color: var(--hover-color);
+  }
 }
 @media (hover: hover) and (pointer: fine) {
-  [pgs~=initP] [pgs~=button]:not(:disabled):focus-visible, [pgs~=initP] [pgs~=button]:not(:disabled):hover {
-    box-shadow: -0.25rem 0.25rem 0px var(--color-black);
-    transform: translate(0.25rem, -0.25rem);
-  }
-  @supports (color: contrast-color(red)) {
-    [pgs~=initP] [pgs~=button]:not(:disabled):focus-visible, [pgs~=initP] [pgs~=button]:not(:disabled):hover {
-      --button-color-hover: contrast-color(color-mix(in srgb, var(--button-background-hover) 77%, black));
-    }
-  }
-  @supports not (color: contrast-color(red)) {
-    [pgs~=initP] [pgs~=button]:not(:disabled):focus-visible, [pgs~=initP] [pgs~=button]:not(:disabled):hover {
-      --button-color-hover: var(--color-black);
-    }
-  }
-  [pgs~=initP] [pgs~=button]:not(:disabled):focus-visible, [pgs~=initP] [pgs~=button]:not(:disabled):hover {
-    --button-background-hover: var(--color-primary-soft);
-    color: var(--button-color-hover);
-    background: var(--button-background-hover);
-  }
-  [pgs~=initP] [pgs~=button]:not(:disabled):focus-visible:is(a), [pgs~=initP] [pgs~=button]:not(:disabled):hover:is(a) {
-    color: var(--button-color-hover);
-  }
-  [pgs~=initP] [pgs~=button]:not(:disabled):focus-visible i, [pgs~=initP] [pgs~=button]:not(:disabled):hover i {
-    color: var(--button-color-hover);
-    --fa-primary-color: var(--button-color-hover);
-    --fa-secondary-color: var(--button-color-hover);
-  }
-  [pgs~=initP] [pgs~=button]:not(:disabled):focus-visible, [pgs~=initP] [pgs~=button]:not(:disabled):hover {
+  [pgs~=initP] [pgs~=button]:not(:disabled)[pgs-option~=buttonStyle-2]:focus-visible, [pgs~=initP] [pgs~=button]:not(:disabled)[pgs-option~=buttonStyle-2]:hover {
+    box-shadow: calc(var(--hover-shadow-displacement) * -1) var(--hover-shadow-displacement) 0 var(--color-black);
+    transform: translate(var(--hover-shadow-displacement), calc(var(--hover-shadow-displacement) * -1));
     outline-color: transparent;
+    --hover-color: var(--color-white);
+    --hover-background: var(--color-primary-strong);
+    color: var(--hover-color);
+    --fa-primary-color: var(--hover-color);
+    --fa-secondary-color: var(--hover-color);
+    background: var(--hover-background);
   }
-  [pgs~=initP] [pgs~=button]:not(:disabled):focus-visible i, [pgs~=initP] [pgs~=button]:not(:disabled):hover i {
-    --fa-secondary-opacity: 0.5;
+  [pgs~=initP] [pgs~=button]:not(:disabled)[pgs-option~=buttonStyle-2]:focus-visible :is(h1, h2, h3, h4, h5, h6, p), [pgs~=initP] [pgs~=button]:not(:disabled)[pgs-option~=buttonStyle-2]:hover :is(h1, h2, h3, h4, h5, h6, p) {
+    color: var(--hover-color);
   }
 }
+[pgs~=initP] [pgs~=button]:not(:disabled):hover {
+  --fa-secondary-opacity: 0.5;
+  --hover-color: var(--color-whiteFixed);
+  color: var(--hover-color);
+  --fa-primary-color: var(--hover-color);
+  --fa-secondary-color: var(--hover-color);
+}
 [pgs~=initP] [pgs~=button]:is(a):hover {
   text-decoration: none;
 }
-[pgs~=initP] [pgs~=button]:active {
-  box-shadow: 0 0 0 var(--color-black);
-  transform: translate(0, 0);
-}
-@supports (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=button][aria-current=page]:not(:hover, :focus-visible) {
-    --button-color-current: contrast-color(color-mix(in srgb, var(--button-background-current) 77%, black));
-  }
-}
-@supports not (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=button][aria-current=page]:not(:hover, :focus-visible) {
-    --button-color-current: var(--color-whiteFixed);
-  }
+[pgs~=initP] [pgs~=button] {
+  --button-color: var(--color-black);
+  --button-color-strong: var(--color-whiteFixed);
+  --button-color-current: var(--color-whiteFixed);
+  --button-background: var(--color-box);
+  --button-background-strong: var(--color-primary);
+  --button-background-current: var(--color-primary);
+  color: var(--button-color);
+  background: var(--button-background);
+  --fa-primary-color: var(--button-color);
+  --fa-secondary-color: var(--button-color);
 }
 [pgs~=initP] [pgs~=button][aria-current=page]:not(:hover, :focus-visible) {
+  --button-color: var(--color-black);
+  --button-color-strong: var(--color-whiteFixed);
+  --button-color-current: var(--color-whiteFixed);
+  --button-background: var(--color-box);
+  --button-background-strong: var(--color-primary);
   --button-background-current: var(--color-primary);
   color: var(--button-color-current);
   background: var(--button-background-current);
-}
-[pgs~=initP] [pgs~=button][aria-current=page]:not(:hover, :focus-visible):is(a) {
-  color: var(--button-color-current);
-}
-[pgs~=initP] [pgs~=button][aria-current=page]:not(:hover, :focus-visible) i {
-  color: var(--button-color-current);
   --fa-primary-color: var(--button-color-current);
   --fa-secondary-color: var(--button-color-current);
 }
@@ -2875,38 +2867,13 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
 [pgs~=initP] [pgs~=buttonNohover] {
   --button-border: var(--border-complete);
   --button-size: 1.5rem;
-  --button-icon-size: 2.0rem;
+  --button-icon-size: 2rem;
   --button-padding-block: var(--button-size);
   --button-padding-left: calc(var(--button-size) * 2);
   --button-padding-right: calc(var(--button-size) * 2);
   --button-padding: var(--button-padding-block) var(--button-padding-right) var(--button-padding-block) var(--button-padding-left);
   --fa-secondary-opacity: 0.5;
   --fa-size: var(--button-icon-size);
-}
-@supports (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=buttonNohover] {
-    --button-color: contrast-color(color-mix(in srgb, var(--button-background) 77%, black));
-  }
-}
-@supports not (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=buttonNohover] {
-    --button-color: var(--color-black);
-  }
-}
-[pgs~=initP] [pgs~=buttonNohover] {
-  --button-background: var(--color-box);
-  color: var(--button-color);
-  background: var(--button-background);
-}
-[pgs~=initP] [pgs~=buttonNohover]:is(a) {
-  color: var(--button-color);
-}
-[pgs~=initP] [pgs~=buttonNohover] i {
-  color: var(--button-color);
-  --fa-primary-color: var(--button-color);
-  --fa-secondary-color: var(--button-color);
-}
-[pgs~=initP] [pgs~=buttonNohover] {
   font-family: var(--font);
   font-size: 1.6rem;
   font-weight: 600;
@@ -2936,27 +2903,26 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
 [pgs~=initP] [pgs~=buttonNohover] {
   transition: all 200ms;
   cursor: inherit;
-}
-@supports (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=buttonNohover][aria-current=page]:not(:hover, :focus-visible) {
-    --button-color-current: contrast-color(color-mix(in srgb, var(--button-background-current) 77%, black));
-  }
-}
-@supports not (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=buttonNohover][aria-current=page]:not(:hover, :focus-visible) {
-    --button-color-current: var(--color-whiteFixed);
-  }
+  --button-color: var(--color-black);
+  --button-color-strong: var(--color-whiteFixed);
+  --button-color-current: var(--color-whiteFixed);
+  --button-background: var(--color-box);
+  --button-background-strong: var(--color-primary);
+  --button-background-current: var(--color-primary);
+  color: var(--button-color);
+  background: var(--button-background);
+  --fa-primary-color: var(--button-color);
+  --fa-secondary-color: var(--button-color);
 }
 [pgs~=initP] [pgs~=buttonNohover][aria-current=page]:not(:hover, :focus-visible) {
+  --button-color: var(--color-black);
+  --button-color-strong: var(--color-whiteFixed);
+  --button-color-current: var(--color-whiteFixed);
+  --button-background: var(--color-box);
+  --button-background-strong: var(--color-primary);
   --button-background-current: var(--color-primary);
   color: var(--button-color-current);
   background: var(--button-background-current);
-}
-[pgs~=initP] [pgs~=buttonNohover][aria-current=page]:not(:hover, :focus-visible):is(a) {
-  color: var(--button-color-current);
-}
-[pgs~=initP] [pgs~=buttonNohover][aria-current=page]:not(:hover, :focus-visible) i {
-  color: var(--button-color-current);
   --fa-primary-color: var(--button-color-current);
   --fa-secondary-color: var(--button-color-current);
 }
@@ -2967,38 +2933,13 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
 [pgs~=initP] [pgs~=buttonIcon] {
   --button-border: var(--border-complete);
   --button-size: 1.5rem;
-  --button-icon-size: 2.0rem;
+  --button-icon-size: 2rem;
   --button-padding-block: var(--button-size);
   --button-padding-left: calc(var(--button-size) * 2);
   --button-padding-right: calc(var(--button-size) * 2);
   --button-padding: var(--button-padding-block) var(--button-padding-right) var(--button-padding-block) var(--button-padding-left);
   --fa-secondary-opacity: 0.5;
   --fa-size: var(--button-icon-size);
-}
-@supports (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=buttonIcon] {
-    --button-color: contrast-color(color-mix(in srgb, var(--button-background) 77%, black));
-  }
-}
-@supports not (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=buttonIcon] {
-    --button-color: var(--color-black);
-  }
-}
-[pgs~=initP] [pgs~=buttonIcon] {
-  --button-background: var(--color-box);
-  color: var(--button-color);
-  background: var(--button-background);
-}
-[pgs~=initP] [pgs~=buttonIcon]:is(a) {
-  color: var(--button-color);
-}
-[pgs~=initP] [pgs~=buttonIcon] i {
-  color: var(--button-color);
-  --fa-primary-color: var(--button-color);
-  --fa-secondary-color: var(--button-color);
-}
-[pgs~=initP] [pgs~=buttonIcon] {
   font-family: var(--font);
   font-size: 1.6rem;
   font-weight: 600;
@@ -3016,12 +2957,12 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   height: max-content;
   width: max-content;
   margin-block: auto;
+  --button-padding: var(--button-padding-block);
   flex: 0 0;
   aspect-ratio: 1;
   border-radius: 50%;
   justify-content: center;
   align-items: center;
-  --button-padding: var(--button-padding-block);
 }
 [pgs~=initP] [pgs~=buttonIcon] i {
   display: inline-grid;
@@ -3035,69 +2976,70 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   transition: all 200ms;
   cursor: pointer;
   text-decoration: none;
+  --hover-shadow-color: var(--color-primary);
+  --hover-shadow-displacement: 0.25rem;
+}
+@media (hover: hover) and (pointer: fine) {
+  [pgs~=initP] [pgs~=buttonIcon]:not(:disabled):not([pgs-option~=buttonStyle-2]):focus-visible, [pgs~=initP] [pgs~=buttonIcon]:not(:disabled):not([pgs-option~=buttonStyle-2]):hover {
+    box-shadow: 0px 0px 38px 0px var(--hover-shadow-color);
+    --hover-color: var(--color-white);
+    --hover-background: var(--color-primary-strong);
+    color: var(--hover-color);
+    --fa-primary-color: var(--hover-color);
+    --fa-secondary-color: var(--hover-color);
+    background: var(--hover-background);
+  }
+  [pgs~=initP] [pgs~=buttonIcon]:not(:disabled):not([pgs-option~=buttonStyle-2]):focus-visible :is(h1, h2, h3, h4, h5, h6, p), [pgs~=initP] [pgs~=buttonIcon]:not(:disabled):not([pgs-option~=buttonStyle-2]):hover :is(h1, h2, h3, h4, h5, h6, p) {
+    color: var(--hover-color);
+  }
 }
 @media (hover: hover) and (pointer: fine) {
-  [pgs~=initP] [pgs~=buttonIcon]:not(:disabled):focus-visible, [pgs~=initP] [pgs~=buttonIcon]:not(:disabled):hover {
-    box-shadow: -0.25rem 0.25rem 0px var(--color-black);
-    transform: translate(0.25rem, -0.25rem);
-  }
-  @supports (color: contrast-color(red)) {
-    [pgs~=initP] [pgs~=buttonIcon]:not(:disabled):focus-visible, [pgs~=initP] [pgs~=buttonIcon]:not(:disabled):hover {
-      --button-color-hover: contrast-color(color-mix(in srgb, var(--button-background-hover) 77%, black));
-    }
-  }
-  @supports not (color: contrast-color(red)) {
-    [pgs~=initP] [pgs~=buttonIcon]:not(:disabled):focus-visible, [pgs~=initP] [pgs~=buttonIcon]:not(:disabled):hover {
-      --button-color-hover: var(--color-black);
-    }
-  }
-  [pgs~=initP] [pgs~=buttonIcon]:not(:disabled):focus-visible, [pgs~=initP] [pgs~=buttonIcon]:not(:disabled):hover {
-    --button-background-hover: var(--color-primary-soft);
-    color: var(--button-color-hover);
-    background: var(--button-background-hover);
-  }
-  [pgs~=initP] [pgs~=buttonIcon]:not(:disabled):focus-visible:is(a), [pgs~=initP] [pgs~=buttonIcon]:not(:disabled):hover:is(a) {
-    color: var(--button-color-hover);
-  }
-  [pgs~=initP] [pgs~=buttonIcon]:not(:disabled):focus-visible i, [pgs~=initP] [pgs~=buttonIcon]:not(:disabled):hover i {
-    color: var(--button-color-hover);
-    --fa-primary-color: var(--button-color-hover);
-    --fa-secondary-color: var(--button-color-hover);
-  }
-  [pgs~=initP] [pgs~=buttonIcon]:not(:disabled):focus-visible, [pgs~=initP] [pgs~=buttonIcon]:not(:disabled):hover {
+  [pgs~=initP] [pgs~=buttonIcon]:not(:disabled)[pgs-option~=buttonStyle-2]:focus-visible, [pgs~=initP] [pgs~=buttonIcon]:not(:disabled)[pgs-option~=buttonStyle-2]:hover {
+    box-shadow: calc(var(--hover-shadow-displacement) * -1) var(--hover-shadow-displacement) 0 var(--color-black);
+    transform: translate(var(--hover-shadow-displacement), calc(var(--hover-shadow-displacement) * -1));
     outline-color: transparent;
+    --hover-color: var(--color-white);
+    --hover-background: var(--color-primary-strong);
+    color: var(--hover-color);
+    --fa-primary-color: var(--hover-color);
+    --fa-secondary-color: var(--hover-color);
+    background: var(--hover-background);
   }
-  [pgs~=initP] [pgs~=buttonIcon]:not(:disabled):focus-visible i, [pgs~=initP] [pgs~=buttonIcon]:not(:disabled):hover i {
-    --fa-secondary-opacity: 0.5;
+  [pgs~=initP] [pgs~=buttonIcon]:not(:disabled)[pgs-option~=buttonStyle-2]:focus-visible :is(h1, h2, h3, h4, h5, h6, p), [pgs~=initP] [pgs~=buttonIcon]:not(:disabled)[pgs-option~=buttonStyle-2]:hover :is(h1, h2, h3, h4, h5, h6, p) {
+    color: var(--hover-color);
   }
 }
+[pgs~=initP] [pgs~=buttonIcon]:not(:disabled):hover {
+  --fa-secondary-opacity: 0.5;
+  --hover-color: var(--color-whiteFixed);
+  color: var(--hover-color);
+  --fa-primary-color: var(--hover-color);
+  --fa-secondary-color: var(--hover-color);
+}
 [pgs~=initP] [pgs~=buttonIcon]:is(a):hover {
   text-decoration: none;
 }
-[pgs~=initP] [pgs~=buttonIcon]:active {
-  box-shadow: 0 0 0 var(--color-black);
-  transform: translate(0, 0);
-}
-@supports (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=buttonIcon][aria-current=page]:not(:hover, :focus-visible) {
-    --button-color-current: contrast-color(color-mix(in srgb, var(--button-background-current) 77%, black));
-  }
-}
-@supports not (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=buttonIcon][aria-current=page]:not(:hover, :focus-visible) {
-    --button-color-current: var(--color-whiteFixed);
-  }
+[pgs~=initP] [pgs~=buttonIcon] {
+  --button-color: var(--color-black);
+  --button-color-strong: var(--color-whiteFixed);
+  --button-color-current: var(--color-whiteFixed);
+  --button-background: var(--color-box);
+  --button-background-strong: var(--color-primary);
+  --button-background-current: var(--color-primary);
+  color: var(--button-color);
+  background: var(--button-background);
+  --fa-primary-color: var(--button-color);
+  --fa-secondary-color: var(--button-color);
 }
 [pgs~=initP] [pgs~=buttonIcon][aria-current=page]:not(:hover, :focus-visible) {
+  --button-color: var(--color-black);
+  --button-color-strong: var(--color-whiteFixed);
+  --button-color-current: var(--color-whiteFixed);
+  --button-background: var(--color-box);
+  --button-background-strong: var(--color-primary);
   --button-background-current: var(--color-primary);
   color: var(--button-color-current);
   background: var(--button-background-current);
-}
-[pgs~=initP] [pgs~=buttonIcon][aria-current=page]:not(:hover, :focus-visible):is(a) {
-  color: var(--button-color-current);
-}
-[pgs~=initP] [pgs~=buttonIcon][aria-current=page]:not(:hover, :focus-visible) i {
-  color: var(--button-color-current);
   --fa-primary-color: var(--button-color-current);
   --fa-secondary-color: var(--button-color-current);
 }
@@ -3108,38 +3050,13 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
 [pgs~=initP] [pgs~=buttonStrong] {
   --button-border: var(--border-complete);
   --button-size: 1.5rem;
-  --button-icon-size: 2.0rem;
+  --button-icon-size: 2rem;
   --button-padding-block: var(--button-size);
   --button-padding-left: calc(var(--button-size) * 2);
   --button-padding-right: calc(var(--button-size) * 2);
   --button-padding: var(--button-padding-block) var(--button-padding-right) var(--button-padding-block) var(--button-padding-left);
   --fa-secondary-opacity: 0.5;
   --fa-size: var(--button-icon-size);
-}
-@supports (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=buttonStrong] {
-    --button-color: contrast-color(color-mix(in srgb, var(--button-background) 77%, black));
-  }
-}
-@supports not (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=buttonStrong] {
-    --button-color: var(--color-black);
-  }
-}
-[pgs~=initP] [pgs~=buttonStrong] {
-  --button-background: var(--color-box);
-  color: var(--button-color);
-  background: var(--button-background);
-}
-[pgs~=initP] [pgs~=buttonStrong]:is(a) {
-  color: var(--button-color);
-}
-[pgs~=initP] [pgs~=buttonStrong] i {
-  color: var(--button-color);
-  --fa-primary-color: var(--button-color);
-  --fa-secondary-color: var(--button-color);
-}
-[pgs~=initP] [pgs~=buttonStrong] {
   font-family: var(--font);
   font-size: 1.6rem;
   font-weight: 600;
@@ -3170,92 +3087,70 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   transition: all 200ms;
   cursor: pointer;
   text-decoration: none;
+  --hover-shadow-color: var(--color-primary);
+  --hover-shadow-displacement: 0.25rem;
+}
+@media (hover: hover) and (pointer: fine) {
+  [pgs~=initP] [pgs~=buttonStrong]:not(:disabled):not([pgs-option~=buttonStyle-2]):focus-visible, [pgs~=initP] [pgs~=buttonStrong]:not(:disabled):not([pgs-option~=buttonStyle-2]):hover {
+    box-shadow: 0px 0px 38px 0px var(--hover-shadow-color);
+    --hover-color: var(--color-white);
+    --hover-background: var(--color-primary-strong);
+    color: var(--hover-color);
+    --fa-primary-color: var(--hover-color);
+    --fa-secondary-color: var(--hover-color);
+    background: var(--hover-background);
+  }
+  [pgs~=initP] [pgs~=buttonStrong]:not(:disabled):not([pgs-option~=buttonStyle-2]):focus-visible :is(h1, h2, h3, h4, h5, h6, p), [pgs~=initP] [pgs~=buttonStrong]:not(:disabled):not([pgs-option~=buttonStyle-2]):hover :is(h1, h2, h3, h4, h5, h6, p) {
+    color: var(--hover-color);
+  }
 }
 @media (hover: hover) and (pointer: fine) {
-  [pgs~=initP] [pgs~=buttonStrong]:not(:disabled):focus-visible, [pgs~=initP] [pgs~=buttonStrong]:not(:disabled):hover {
-    box-shadow: -0.25rem 0.25rem 0px var(--color-black);
-    transform: translate(0.25rem, -0.25rem);
-  }
-  @supports (color: contrast-color(red)) {
-    [pgs~=initP] [pgs~=buttonStrong]:not(:disabled):focus-visible, [pgs~=initP] [pgs~=buttonStrong]:not(:disabled):hover {
-      --button-color-hover: contrast-color(color-mix(in srgb, var(--button-background-hover) 77%, black));
-    }
-  }
-  @supports not (color: contrast-color(red)) {
-    [pgs~=initP] [pgs~=buttonStrong]:not(:disabled):focus-visible, [pgs~=initP] [pgs~=buttonStrong]:not(:disabled):hover {
-      --button-color-hover: var(--color-black);
-    }
-  }
-  [pgs~=initP] [pgs~=buttonStrong]:not(:disabled):focus-visible, [pgs~=initP] [pgs~=buttonStrong]:not(:disabled):hover {
-    --button-background-hover: var(--color-primary-soft);
-    color: var(--button-color-hover);
-    background: var(--button-background-hover);
-  }
-  [pgs~=initP] [pgs~=buttonStrong]:not(:disabled):focus-visible:is(a), [pgs~=initP] [pgs~=buttonStrong]:not(:disabled):hover:is(a) {
-    color: var(--button-color-hover);
-  }
-  [pgs~=initP] [pgs~=buttonStrong]:not(:disabled):focus-visible i, [pgs~=initP] [pgs~=buttonStrong]:not(:disabled):hover i {
-    color: var(--button-color-hover);
-    --fa-primary-color: var(--button-color-hover);
-    --fa-secondary-color: var(--button-color-hover);
-  }
-  [pgs~=initP] [pgs~=buttonStrong]:not(:disabled):focus-visible, [pgs~=initP] [pgs~=buttonStrong]:not(:disabled):hover {
+  [pgs~=initP] [pgs~=buttonStrong]:not(:disabled)[pgs-option~=buttonStyle-2]:focus-visible, [pgs~=initP] [pgs~=buttonStrong]:not(:disabled)[pgs-option~=buttonStyle-2]:hover {
+    box-shadow: calc(var(--hover-shadow-displacement) * -1) var(--hover-shadow-displacement) 0 var(--color-black);
+    transform: translate(var(--hover-shadow-displacement), calc(var(--hover-shadow-displacement) * -1));
     outline-color: transparent;
+    --hover-color: var(--color-white);
+    --hover-background: var(--color-primary-strong);
+    color: var(--hover-color);
+    --fa-primary-color: var(--hover-color);
+    --fa-secondary-color: var(--hover-color);
+    background: var(--hover-background);
   }
-  [pgs~=initP] [pgs~=buttonStrong]:not(:disabled):focus-visible i, [pgs~=initP] [pgs~=buttonStrong]:not(:disabled):hover i {
-    --fa-secondary-opacity: 0.5;
+  [pgs~=initP] [pgs~=buttonStrong]:not(:disabled)[pgs-option~=buttonStyle-2]:focus-visible :is(h1, h2, h3, h4, h5, h6, p), [pgs~=initP] [pgs~=buttonStrong]:not(:disabled)[pgs-option~=buttonStyle-2]:hover :is(h1, h2, h3, h4, h5, h6, p) {
+    color: var(--hover-color);
   }
 }
+[pgs~=initP] [pgs~=buttonStrong]:not(:disabled):hover {
+  --fa-secondary-opacity: 0.5;
+  --hover-color: var(--color-whiteFixed);
+  color: var(--hover-color);
+  --fa-primary-color: var(--hover-color);
+  --fa-secondary-color: var(--hover-color);
+}
 [pgs~=initP] [pgs~=buttonStrong]:is(a):hover {
   text-decoration: none;
 }
-[pgs~=initP] [pgs~=buttonStrong]:active {
-  box-shadow: 0 0 0 var(--color-black);
-  transform: translate(0, 0);
-}
-@supports (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=buttonStrong] {
-    --button-color-strong: contrast-color(color-mix(in srgb, var(--button-background-strong) 77%, black));
-  }
-}
-@supports not (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=buttonStrong] {
-    --button-color-strong: var(--color-whiteFixed);
-  }
-}
 [pgs~=initP] [pgs~=buttonStrong] {
+  --button-color: var(--color-black);
+  --button-color-strong: var(--color-whiteFixed);
+  --button-color-current: var(--color-whiteFixed);
+  --button-background: var(--color-box);
   --button-background-strong: var(--color-primary);
+  --button-background-current: var(--color-primary);
   color: var(--button-color-strong);
   background: var(--button-background-strong);
-}
-[pgs~=initP] [pgs~=buttonStrong]:is(a) {
-  color: var(--button-color-strong);
-}
-[pgs~=initP] [pgs~=buttonStrong] i {
-  color: var(--button-color-strong);
   --fa-primary-color: var(--button-color-strong);
   --fa-secondary-color: var(--button-color-strong);
 }
-@supports (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=buttonStrong][aria-current=page]:not(:hover, :focus-visible) {
-    --button-color-current: contrast-color(color-mix(in srgb, var(--button-background-current) 77%, black));
-  }
-}
-@supports not (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=buttonStrong][aria-current=page]:not(:hover, :focus-visible) {
-    --button-color-current: var(--color-whiteFixed);
-  }
-}
 [pgs~=initP] [pgs~=buttonStrong][aria-current=page]:not(:hover, :focus-visible) {
+  --button-color: var(--color-black);
+  --button-color-strong: var(--color-whiteFixed);
+  --button-color-current: var(--color-whiteFixed);
+  --button-background: var(--color-box);
+  --button-background-strong: var(--color-primary);
   --button-background-current: var(--color-primary);
   color: var(--button-color-current);
   background: var(--button-background-current);
-}
-[pgs~=initP] [pgs~=buttonStrong][aria-current=page]:not(:hover, :focus-visible):is(a) {
-  color: var(--button-color-current);
-}
-[pgs~=initP] [pgs~=buttonStrong][aria-current=page]:not(:hover, :focus-visible) i {
-  color: var(--button-color-current);
   --fa-primary-color: var(--button-color-current);
   --fa-secondary-color: var(--button-color-current);
 }
@@ -3266,38 +3161,13 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
 [pgs~=initP] [pgs~=buttonMini] {
   --button-border: var(--border-complete);
   --button-size: 1.5rem;
-  --button-icon-size: 2.0rem;
+  --button-icon-size: 2rem;
   --button-padding-block: var(--button-size);
   --button-padding-left: calc(var(--button-size) * 2);
   --button-padding-right: calc(var(--button-size) * 2);
   --button-padding: var(--button-padding-block) var(--button-padding-right) var(--button-padding-block) var(--button-padding-left);
   --fa-secondary-opacity: 0.5;
   --fa-size: var(--button-icon-size);
-}
-@supports (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=buttonMini] {
-    --button-color: contrast-color(color-mix(in srgb, var(--button-background) 77%, black));
-  }
-}
-@supports not (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=buttonMini] {
-    --button-color: var(--color-black);
-  }
-}
-[pgs~=initP] [pgs~=buttonMini] {
-  --button-background: var(--color-box);
-  color: var(--button-color);
-  background: var(--button-background);
-}
-[pgs~=initP] [pgs~=buttonMini]:is(a) {
-  color: var(--button-color);
-}
-[pgs~=initP] [pgs~=buttonMini] i {
-  color: var(--button-color);
-  --fa-primary-color: var(--button-color);
-  --fa-secondary-color: var(--button-color);
-}
-[pgs~=initP] [pgs~=buttonMini] {
   font-family: var(--font);
   font-size: 1.6rem;
   font-weight: 600;
@@ -3315,12 +3185,12 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   height: max-content;
   width: max-content;
   margin-block: auto;
+  --button-padding: var(--button-padding-block);
   flex: 0 0;
   aspect-ratio: 1;
   border-radius: 50%;
   justify-content: center;
   align-items: center;
-  --button-padding: var(--button-padding-block);
 }
 [pgs~=initP] [pgs~=buttonMini] i {
   display: inline-grid;
@@ -3334,69 +3204,70 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   transition: all 200ms;
   cursor: pointer;
   text-decoration: none;
+  --hover-shadow-color: var(--color-primary);
+  --hover-shadow-displacement: 0.25rem;
+}
+@media (hover: hover) and (pointer: fine) {
+  [pgs~=initP] [pgs~=buttonMini]:not(:disabled):not([pgs-option~=buttonStyle-2]):focus-visible, [pgs~=initP] [pgs~=buttonMini]:not(:disabled):not([pgs-option~=buttonStyle-2]):hover {
+    box-shadow: 0px 0px 38px 0px var(--hover-shadow-color);
+    --hover-color: var(--color-white);
+    --hover-background: var(--color-primary-strong);
+    color: var(--hover-color);
+    --fa-primary-color: var(--hover-color);
+    --fa-secondary-color: var(--hover-color);
+    background: var(--hover-background);
+  }
+  [pgs~=initP] [pgs~=buttonMini]:not(:disabled):not([pgs-option~=buttonStyle-2]):focus-visible :is(h1, h2, h3, h4, h5, h6, p), [pgs~=initP] [pgs~=buttonMini]:not(:disabled):not([pgs-option~=buttonStyle-2]):hover :is(h1, h2, h3, h4, h5, h6, p) {
+    color: var(--hover-color);
+  }
 }
 @media (hover: hover) and (pointer: fine) {
-  [pgs~=initP] [pgs~=buttonMini]:not(:disabled):focus-visible, [pgs~=initP] [pgs~=buttonMini]:not(:disabled):hover {
-    box-shadow: -0.25rem 0.25rem 0px var(--color-black);
-    transform: translate(0.25rem, -0.25rem);
-  }
-  @supports (color: contrast-color(red)) {
-    [pgs~=initP] [pgs~=buttonMini]:not(:disabled):focus-visible, [pgs~=initP] [pgs~=buttonMini]:not(:disabled):hover {
-      --button-color-hover: contrast-color(color-mix(in srgb, var(--button-background-hover) 77%, black));
-    }
-  }
-  @supports not (color: contrast-color(red)) {
-    [pgs~=initP] [pgs~=buttonMini]:not(:disabled):focus-visible, [pgs~=initP] [pgs~=buttonMini]:not(:disabled):hover {
-      --button-color-hover: var(--color-black);
-    }
-  }
-  [pgs~=initP] [pgs~=buttonMini]:not(:disabled):focus-visible, [pgs~=initP] [pgs~=buttonMini]:not(:disabled):hover {
-    --button-background-hover: var(--color-primary-soft);
-    color: var(--button-color-hover);
-    background: var(--button-background-hover);
-  }
-  [pgs~=initP] [pgs~=buttonMini]:not(:disabled):focus-visible:is(a), [pgs~=initP] [pgs~=buttonMini]:not(:disabled):hover:is(a) {
-    color: var(--button-color-hover);
-  }
-  [pgs~=initP] [pgs~=buttonMini]:not(:disabled):focus-visible i, [pgs~=initP] [pgs~=buttonMini]:not(:disabled):hover i {
-    color: var(--button-color-hover);
-    --fa-primary-color: var(--button-color-hover);
-    --fa-secondary-color: var(--button-color-hover);
-  }
-  [pgs~=initP] [pgs~=buttonMini]:not(:disabled):focus-visible, [pgs~=initP] [pgs~=buttonMini]:not(:disabled):hover {
+  [pgs~=initP] [pgs~=buttonMini]:not(:disabled)[pgs-option~=buttonStyle-2]:focus-visible, [pgs~=initP] [pgs~=buttonMini]:not(:disabled)[pgs-option~=buttonStyle-2]:hover {
+    box-shadow: calc(var(--hover-shadow-displacement) * -1) var(--hover-shadow-displacement) 0 var(--color-black);
+    transform: translate(var(--hover-shadow-displacement), calc(var(--hover-shadow-displacement) * -1));
     outline-color: transparent;
+    --hover-color: var(--color-white);
+    --hover-background: var(--color-primary-strong);
+    color: var(--hover-color);
+    --fa-primary-color: var(--hover-color);
+    --fa-secondary-color: var(--hover-color);
+    background: var(--hover-background);
   }
-  [pgs~=initP] [pgs~=buttonMini]:not(:disabled):focus-visible i, [pgs~=initP] [pgs~=buttonMini]:not(:disabled):hover i {
-    --fa-secondary-opacity: 0.5;
+  [pgs~=initP] [pgs~=buttonMini]:not(:disabled)[pgs-option~=buttonStyle-2]:focus-visible :is(h1, h2, h3, h4, h5, h6, p), [pgs~=initP] [pgs~=buttonMini]:not(:disabled)[pgs-option~=buttonStyle-2]:hover :is(h1, h2, h3, h4, h5, h6, p) {
+    color: var(--hover-color);
   }
 }
+[pgs~=initP] [pgs~=buttonMini]:not(:disabled):hover {
+  --fa-secondary-opacity: 0.5;
+  --hover-color: var(--color-whiteFixed);
+  color: var(--hover-color);
+  --fa-primary-color: var(--hover-color);
+  --fa-secondary-color: var(--hover-color);
+}
 [pgs~=initP] [pgs~=buttonMini]:is(a):hover {
   text-decoration: none;
 }
-[pgs~=initP] [pgs~=buttonMini]:active {
-  box-shadow: 0 0 0 var(--color-black);
-  transform: translate(0, 0);
-}
-@supports (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=buttonMini][aria-current=page]:not(:hover, :focus-visible) {
-    --button-color-current: contrast-color(color-mix(in srgb, var(--button-background-current) 77%, black));
-  }
-}
-@supports not (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=buttonMini][aria-current=page]:not(:hover, :focus-visible) {
-    --button-color-current: var(--color-whiteFixed);
-  }
+[pgs~=initP] [pgs~=buttonMini] {
+  --button-color: var(--color-black);
+  --button-color-strong: var(--color-whiteFixed);
+  --button-color-current: var(--color-whiteFixed);
+  --button-background: var(--color-box);
+  --button-background-strong: var(--color-primary);
+  --button-background-current: var(--color-primary);
+  color: var(--button-color);
+  background: var(--button-background);
+  --fa-primary-color: var(--button-color);
+  --fa-secondary-color: var(--button-color);
 }
 [pgs~=initP] [pgs~=buttonMini][aria-current=page]:not(:hover, :focus-visible) {
-  --button-background-current: var(--color-primary);
+  --button-color: var(--color-black);
+  --button-color-strong: var(--color-whiteFixed);
+  --button-color-current: var(--color-whiteFixed);
+  --button-background: var(--color-box);
+  --button-background-strong: var(--color-primary);
+  --button-background-current: var(--color-primary);
   color: var(--button-color-current);
   background: var(--button-background-current);
-}
-[pgs~=initP] [pgs~=buttonMini][aria-current=page]:not(:hover, :focus-visible):is(a) {
-  color: var(--button-color-current);
-}
-[pgs~=initP] [pgs~=buttonMini][aria-current=page]:not(:hover, :focus-visible) i {
-  color: var(--button-color-current);
   --fa-primary-color: var(--button-color-current);
   --fa-secondary-color: var(--button-color-current);
 }
@@ -3414,38 +3285,13 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
 [pgs~=initP] [pgs~=buttonBig] {
   --button-border: var(--border-complete);
   --button-size: 1.5rem;
-  --button-icon-size: 2.0rem;
+  --button-icon-size: 2rem;
   --button-padding-block: var(--button-size);
   --button-padding-left: calc(var(--button-size) * 2);
   --button-padding-right: calc(var(--button-size) * 2);
   --button-padding: var(--button-padding-block) var(--button-padding-right) var(--button-padding-block) var(--button-padding-left);
   --fa-secondary-opacity: 0.5;
   --fa-size: var(--button-icon-size);
-}
-@supports (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=buttonBig] {
-    --button-color: contrast-color(color-mix(in srgb, var(--button-background) 77%, black));
-  }
-}
-@supports not (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=buttonBig] {
-    --button-color: var(--color-black);
-  }
-}
-[pgs~=initP] [pgs~=buttonBig] {
-  --button-background: var(--color-box);
-  color: var(--button-color);
-  background: var(--button-background);
-}
-[pgs~=initP] [pgs~=buttonBig]:is(a) {
-  color: var(--button-color);
-}
-[pgs~=initP] [pgs~=buttonBig] i {
-  color: var(--button-color);
-  --fa-primary-color: var(--button-color);
-  --fa-secondary-color: var(--button-color);
-}
-[pgs~=initP] [pgs~=buttonBig] {
   font-family: var(--font);
   font-size: 1.6rem;
   font-weight: 600;
@@ -3476,69 +3322,70 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   transition: all 200ms;
   cursor: pointer;
   text-decoration: none;
+  --hover-shadow-color: var(--color-primary);
+  --hover-shadow-displacement: 0.25rem;
+}
+@media (hover: hover) and (pointer: fine) {
+  [pgs~=initP] [pgs~=buttonBig]:not(:disabled):not([pgs-option~=buttonStyle-2]):focus-visible, [pgs~=initP] [pgs~=buttonBig]:not(:disabled):not([pgs-option~=buttonStyle-2]):hover {
+    box-shadow: 0px 0px 38px 0px var(--hover-shadow-color);
+    --hover-color: var(--color-white);
+    --hover-background: var(--color-primary-strong);
+    color: var(--hover-color);
+    --fa-primary-color: var(--hover-color);
+    --fa-secondary-color: var(--hover-color);
+    background: var(--hover-background);
+  }
+  [pgs~=initP] [pgs~=buttonBig]:not(:disabled):not([pgs-option~=buttonStyle-2]):focus-visible :is(h1, h2, h3, h4, h5, h6, p), [pgs~=initP] [pgs~=buttonBig]:not(:disabled):not([pgs-option~=buttonStyle-2]):hover :is(h1, h2, h3, h4, h5, h6, p) {
+    color: var(--hover-color);
+  }
 }
 @media (hover: hover) and (pointer: fine) {
-  [pgs~=initP] [pgs~=buttonBig]:not(:disabled):focus-visible, [pgs~=initP] [pgs~=buttonBig]:not(:disabled):hover {
-    box-shadow: -0.25rem 0.25rem 0px var(--color-black);
-    transform: translate(0.25rem, -0.25rem);
-  }
-  @supports (color: contrast-color(red)) {
-    [pgs~=initP] [pgs~=buttonBig]:not(:disabled):focus-visible, [pgs~=initP] [pgs~=buttonBig]:not(:disabled):hover {
-      --button-color-hover: contrast-color(color-mix(in srgb, var(--button-background-hover) 77%, black));
-    }
-  }
-  @supports not (color: contrast-color(red)) {
-    [pgs~=initP] [pgs~=buttonBig]:not(:disabled):focus-visible, [pgs~=initP] [pgs~=buttonBig]:not(:disabled):hover {
-      --button-color-hover: var(--color-black);
-    }
-  }
-  [pgs~=initP] [pgs~=buttonBig]:not(:disabled):focus-visible, [pgs~=initP] [pgs~=buttonBig]:not(:disabled):hover {
-    --button-background-hover: var(--color-primary-soft);
-    color: var(--button-color-hover);
-    background: var(--button-background-hover);
-  }
-  [pgs~=initP] [pgs~=buttonBig]:not(:disabled):focus-visible:is(a), [pgs~=initP] [pgs~=buttonBig]:not(:disabled):hover:is(a) {
-    color: var(--button-color-hover);
-  }
-  [pgs~=initP] [pgs~=buttonBig]:not(:disabled):focus-visible i, [pgs~=initP] [pgs~=buttonBig]:not(:disabled):hover i {
-    color: var(--button-color-hover);
-    --fa-primary-color: var(--button-color-hover);
-    --fa-secondary-color: var(--button-color-hover);
-  }
-  [pgs~=initP] [pgs~=buttonBig]:not(:disabled):focus-visible, [pgs~=initP] [pgs~=buttonBig]:not(:disabled):hover {
+  [pgs~=initP] [pgs~=buttonBig]:not(:disabled)[pgs-option~=buttonStyle-2]:focus-visible, [pgs~=initP] [pgs~=buttonBig]:not(:disabled)[pgs-option~=buttonStyle-2]:hover {
+    box-shadow: calc(var(--hover-shadow-displacement) * -1) var(--hover-shadow-displacement) 0 var(--color-black);
+    transform: translate(var(--hover-shadow-displacement), calc(var(--hover-shadow-displacement) * -1));
     outline-color: transparent;
+    --hover-color: var(--color-white);
+    --hover-background: var(--color-primary-strong);
+    color: var(--hover-color);
+    --fa-primary-color: var(--hover-color);
+    --fa-secondary-color: var(--hover-color);
+    background: var(--hover-background);
   }
-  [pgs~=initP] [pgs~=buttonBig]:not(:disabled):focus-visible i, [pgs~=initP] [pgs~=buttonBig]:not(:disabled):hover i {
-    --fa-secondary-opacity: 0.5;
+  [pgs~=initP] [pgs~=buttonBig]:not(:disabled)[pgs-option~=buttonStyle-2]:focus-visible :is(h1, h2, h3, h4, h5, h6, p), [pgs~=initP] [pgs~=buttonBig]:not(:disabled)[pgs-option~=buttonStyle-2]:hover :is(h1, h2, h3, h4, h5, h6, p) {
+    color: var(--hover-color);
   }
 }
+[pgs~=initP] [pgs~=buttonBig]:not(:disabled):hover {
+  --fa-secondary-opacity: 0.5;
+  --hover-color: var(--color-whiteFixed);
+  color: var(--hover-color);
+  --fa-primary-color: var(--hover-color);
+  --fa-secondary-color: var(--hover-color);
+}
 [pgs~=initP] [pgs~=buttonBig]:is(a):hover {
   text-decoration: none;
 }
-[pgs~=initP] [pgs~=buttonBig]:active {
-  box-shadow: 0 0 0 var(--color-black);
-  transform: translate(0, 0);
-}
-@supports (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=buttonBig][aria-current=page]:not(:hover, :focus-visible) {
-    --button-color-current: contrast-color(color-mix(in srgb, var(--button-background-current) 77%, black));
-  }
-}
-@supports not (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=buttonBig][aria-current=page]:not(:hover, :focus-visible) {
-    --button-color-current: var(--color-whiteFixed);
-  }
+[pgs~=initP] [pgs~=buttonBig] {
+  --button-color: var(--color-black);
+  --button-color-strong: var(--color-whiteFixed);
+  --button-color-current: var(--color-whiteFixed);
+  --button-background: var(--color-box);
+  --button-background-strong: var(--color-primary);
+  --button-background-current: var(--color-primary);
+  color: var(--button-color);
+  background: var(--button-background);
+  --fa-primary-color: var(--button-color);
+  --fa-secondary-color: var(--button-color);
 }
 [pgs~=initP] [pgs~=buttonBig][aria-current=page]:not(:hover, :focus-visible) {
+  --button-color: var(--color-black);
+  --button-color-strong: var(--color-whiteFixed);
+  --button-color-current: var(--color-whiteFixed);
+  --button-background: var(--color-box);
+  --button-background-strong: var(--color-primary);
   --button-background-current: var(--color-primary);
   color: var(--button-color-current);
   background: var(--button-background-current);
-}
-[pgs~=initP] [pgs~=buttonBig][aria-current=page]:not(:hover, :focus-visible):is(a) {
-  color: var(--button-color-current);
-}
-[pgs~=initP] [pgs~=buttonBig][aria-current=page]:not(:hover, :focus-visible) i {
-  color: var(--button-color-current);
   --fa-primary-color: var(--button-color-current);
   --fa-secondary-color: var(--button-color-current);
 }
@@ -3568,38 +3415,13 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
 [pgs~=initP] [pgs~=buttonClose] {
   --button-border: var(--border-complete);
   --button-size: 1.5rem;
-  --button-icon-size: 2.0rem;
+  --button-icon-size: 2rem;
   --button-padding-block: var(--button-size);
   --button-padding-left: calc(var(--button-size) * 2);
   --button-padding-right: calc(var(--button-size) * 2);
   --button-padding: var(--button-padding-block) var(--button-padding-right) var(--button-padding-block) var(--button-padding-left);
   --fa-secondary-opacity: 0.5;
   --fa-size: var(--button-icon-size);
-}
-@supports (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=buttonClose] {
-    --button-color: contrast-color(color-mix(in srgb, var(--button-background) 77%, black));
-  }
-}
-@supports not (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=buttonClose] {
-    --button-color: var(--color-black);
-  }
-}
-[pgs~=initP] [pgs~=buttonClose] {
-  --button-background: var(--color-box);
-  color: var(--button-color);
-  background: var(--button-background);
-}
-[pgs~=initP] [pgs~=buttonClose]:is(a) {
-  color: var(--button-color);
-}
-[pgs~=initP] [pgs~=buttonClose] i {
-  color: var(--button-color);
-  --fa-primary-color: var(--button-color);
-  --fa-secondary-color: var(--button-color);
-}
-[pgs~=initP] [pgs~=buttonClose] {
   font-family: var(--font);
   font-size: 1.6rem;
   font-weight: 600;
@@ -3617,12 +3439,12 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   height: max-content;
   width: max-content;
   margin-block: auto;
+  --button-padding: var(--button-padding-block);
   flex: 0 0;
   aspect-ratio: 1;
   border-radius: 50%;
   justify-content: center;
   align-items: center;
-  --button-padding: var(--button-padding-block);
 }
 [pgs~=initP] [pgs~=buttonClose] i {
   display: inline-grid;
@@ -3636,69 +3458,70 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   transition: all 200ms;
   cursor: pointer;
   text-decoration: none;
+  --hover-shadow-color: var(--color-primary);
+  --hover-shadow-displacement: 0.25rem;
+}
+@media (hover: hover) and (pointer: fine) {
+  [pgs~=initP] [pgs~=buttonClose]:not(:disabled):not([pgs-option~=buttonStyle-2]):focus-visible, [pgs~=initP] [pgs~=buttonClose]:not(:disabled):not([pgs-option~=buttonStyle-2]):hover {
+    box-shadow: 0px 0px 38px 0px var(--hover-shadow-color);
+    --hover-color: var(--color-white);
+    --hover-background: var(--color-primary-strong);
+    color: var(--hover-color);
+    --fa-primary-color: var(--hover-color);
+    --fa-secondary-color: var(--hover-color);
+    background: var(--hover-background);
+  }
+  [pgs~=initP] [pgs~=buttonClose]:not(:disabled):not([pgs-option~=buttonStyle-2]):focus-visible :is(h1, h2, h3, h4, h5, h6, p), [pgs~=initP] [pgs~=buttonClose]:not(:disabled):not([pgs-option~=buttonStyle-2]):hover :is(h1, h2, h3, h4, h5, h6, p) {
+    color: var(--hover-color);
+  }
 }
 @media (hover: hover) and (pointer: fine) {
-  [pgs~=initP] [pgs~=buttonClose]:not(:disabled):focus-visible, [pgs~=initP] [pgs~=buttonClose]:not(:disabled):hover {
-    box-shadow: -0.25rem 0.25rem 0px var(--color-black);
-    transform: translate(0.25rem, -0.25rem);
-  }
-  @supports (color: contrast-color(red)) {
-    [pgs~=initP] [pgs~=buttonClose]:not(:disabled):focus-visible, [pgs~=initP] [pgs~=buttonClose]:not(:disabled):hover {
-      --button-color-hover: contrast-color(color-mix(in srgb, var(--button-background-hover) 77%, black));
-    }
-  }
-  @supports not (color: contrast-color(red)) {
-    [pgs~=initP] [pgs~=buttonClose]:not(:disabled):focus-visible, [pgs~=initP] [pgs~=buttonClose]:not(:disabled):hover {
-      --button-color-hover: var(--color-black);
-    }
-  }
-  [pgs~=initP] [pgs~=buttonClose]:not(:disabled):focus-visible, [pgs~=initP] [pgs~=buttonClose]:not(:disabled):hover {
-    --button-background-hover: var(--color-primary-soft);
-    color: var(--button-color-hover);
-    background: var(--button-background-hover);
-  }
-  [pgs~=initP] [pgs~=buttonClose]:not(:disabled):focus-visible:is(a), [pgs~=initP] [pgs~=buttonClose]:not(:disabled):hover:is(a) {
-    color: var(--button-color-hover);
-  }
-  [pgs~=initP] [pgs~=buttonClose]:not(:disabled):focus-visible i, [pgs~=initP] [pgs~=buttonClose]:not(:disabled):hover i {
-    color: var(--button-color-hover);
-    --fa-primary-color: var(--button-color-hover);
-    --fa-secondary-color: var(--button-color-hover);
-  }
-  [pgs~=initP] [pgs~=buttonClose]:not(:disabled):focus-visible, [pgs~=initP] [pgs~=buttonClose]:not(:disabled):hover {
+  [pgs~=initP] [pgs~=buttonClose]:not(:disabled)[pgs-option~=buttonStyle-2]:focus-visible, [pgs~=initP] [pgs~=buttonClose]:not(:disabled)[pgs-option~=buttonStyle-2]:hover {
+    box-shadow: calc(var(--hover-shadow-displacement) * -1) var(--hover-shadow-displacement) 0 var(--color-black);
+    transform: translate(var(--hover-shadow-displacement), calc(var(--hover-shadow-displacement) * -1));
     outline-color: transparent;
+    --hover-color: var(--color-white);
+    --hover-background: var(--color-primary-strong);
+    color: var(--hover-color);
+    --fa-primary-color: var(--hover-color);
+    --fa-secondary-color: var(--hover-color);
+    background: var(--hover-background);
   }
-  [pgs~=initP] [pgs~=buttonClose]:not(:disabled):focus-visible i, [pgs~=initP] [pgs~=buttonClose]:not(:disabled):hover i {
-    --fa-secondary-opacity: 0.5;
+  [pgs~=initP] [pgs~=buttonClose]:not(:disabled)[pgs-option~=buttonStyle-2]:focus-visible :is(h1, h2, h3, h4, h5, h6, p), [pgs~=initP] [pgs~=buttonClose]:not(:disabled)[pgs-option~=buttonStyle-2]:hover :is(h1, h2, h3, h4, h5, h6, p) {
+    color: var(--hover-color);
   }
 }
+[pgs~=initP] [pgs~=buttonClose]:not(:disabled):hover {
+  --fa-secondary-opacity: 0.5;
+  --hover-color: var(--color-whiteFixed);
+  color: var(--hover-color);
+  --fa-primary-color: var(--hover-color);
+  --fa-secondary-color: var(--hover-color);
+}
 [pgs~=initP] [pgs~=buttonClose]:is(a):hover {
   text-decoration: none;
 }
-[pgs~=initP] [pgs~=buttonClose]:active {
-  box-shadow: 0 0 0 var(--color-black);
-  transform: translate(0, 0);
-}
-@supports (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=buttonClose][aria-current=page]:not(:hover, :focus-visible) {
-    --button-color-current: contrast-color(color-mix(in srgb, var(--button-background-current) 77%, black));
-  }
-}
-@supports not (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=buttonClose][aria-current=page]:not(:hover, :focus-visible) {
-    --button-color-current: var(--color-whiteFixed);
-  }
+[pgs~=initP] [pgs~=buttonClose] {
+  --button-color: var(--color-black);
+  --button-color-strong: var(--color-whiteFixed);
+  --button-color-current: var(--color-whiteFixed);
+  --button-background: var(--color-box);
+  --button-background-strong: var(--color-primary);
+  --button-background-current: var(--color-primary);
+  color: var(--button-color);
+  background: var(--button-background);
+  --fa-primary-color: var(--button-color);
+  --fa-secondary-color: var(--button-color);
 }
 [pgs~=initP] [pgs~=buttonClose][aria-current=page]:not(:hover, :focus-visible) {
+  --button-color: var(--color-black);
+  --button-color-strong: var(--color-whiteFixed);
+  --button-color-current: var(--color-whiteFixed);
+  --button-background: var(--color-box);
+  --button-background-strong: var(--color-primary);
   --button-background-current: var(--color-primary);
   color: var(--button-color-current);
   background: var(--button-background-current);
-}
-[pgs~=initP] [pgs~=buttonClose][aria-current=page]:not(:hover, :focus-visible):is(a) {
-  color: var(--button-color-current);
-}
-[pgs~=initP] [pgs~=buttonClose][aria-current=page]:not(:hover, :focus-visible) i {
-  color: var(--button-color-current);
   --fa-primary-color: var(--button-color-current);
   --fa-secondary-color: var(--button-color-current);
 }
@@ -3882,9 +3705,8 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
 [pgs~=initP] [pgs~=select] option:checked:hover {
   background-color: var(--color-primary-dark);
 }
-[pgs~=initP] [pgs~=checkboxBackground] {
-  position: relative;
-  isolation: isolate;
+[pgs~=initP] [pgs~=radio],
+[pgs~=initP] [pgs~=checkbox] {
   --checkbox-size: 2.0rem;
   --checkbox-check-color: var(--color-primary);
   --checkbox-box-background: var(--color-white);
@@ -3892,8 +3714,10 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   position: relative;
   display: flex;
 }
-[pgs~=initP] [pgs~=checkboxBackground]:is(label),
-[pgs~=initP] [pgs~=checkboxBackground] label {
+[pgs~=initP] [pgs~=radio]:is(label),
+[pgs~=initP] [pgs~=radio] label,
+[pgs~=initP] [pgs~=checkbox]:is(label),
+[pgs~=initP] [pgs~=checkbox] label {
   user-select: none;
   color: var(--color-black);
   position: relative;
@@ -3906,17 +3730,25 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   cursor: pointer;
   display: flex;
 }
-[pgs~=initP] [pgs~=checkboxBackground]:is(label):has(input:disabled),
-[pgs~=initP] [pgs~=checkboxBackground] label:has(input:disabled) {
+[pgs~=initP] [pgs~=radio]:is(label):has(input:disabled),
+[pgs~=initP] [pgs~=radio] label:has(input:disabled),
+[pgs~=initP] [pgs~=checkbox]:is(label):has(input:disabled),
+[pgs~=initP] [pgs~=checkbox] label:has(input:disabled) {
   opacity: 0.5;
 }
-[pgs~=initP] [pgs~=checkboxBackground]:is(label):has(input[type=checkbox]:required),
-[pgs~=initP] [pgs~=checkboxBackground] label:has(input[type=checkbox]:required) {
+[pgs~=initP] [pgs~=radio]:is(label):has(input[type=checkbox]:required),
+[pgs~=initP] [pgs~=radio] label:has(input[type=checkbox]:required),
+[pgs~=initP] [pgs~=checkbox]:is(label):has(input[type=checkbox]:required),
+[pgs~=initP] [pgs~=checkbox] label:has(input[type=checkbox]:required) {
   position: relative;
 }
-[pgs~=initP] [pgs~=checkboxBackground]:is(label):has(input[type=checkbox]:required) [pgs~=required-here]::after, [pgs~=initP] [pgs~=checkboxBackground]:is(label):has(input[type=checkbox]:required):not(:has([pgs~=required-here]))::after,
-[pgs~=initP] [pgs~=checkboxBackground] label:has(input[type=checkbox]:required) [pgs~=required-here]::after,
-[pgs~=initP] [pgs~=checkboxBackground] label:has(input[type=checkbox]:required):not(:has([pgs~=required-here]))::after {
+[pgs~=initP] [pgs~=radio]:is(label):has(input[type=checkbox]:required) [pgs~=required-here]::after, [pgs~=initP] [pgs~=radio]:is(label):has(input[type=checkbox]:required):not(:has([pgs~=required-here]))::after,
+[pgs~=initP] [pgs~=radio] label:has(input[type=checkbox]:required) [pgs~=required-here]::after,
+[pgs~=initP] [pgs~=radio] label:has(input[type=checkbox]:required):not(:has([pgs~=required-here]))::after,
+[pgs~=initP] [pgs~=checkbox]:is(label):has(input[type=checkbox]:required) [pgs~=required-here]::after,
+[pgs~=initP] [pgs~=checkbox]:is(label):has(input[type=checkbox]:required):not(:has([pgs~=required-here]))::after,
+[pgs~=initP] [pgs~=checkbox] label:has(input[type=checkbox]:required) [pgs~=required-here]::after,
+[pgs~=initP] [pgs~=checkbox] label:has(input[type=checkbox]:required):not(:has([pgs~=required-here]))::after {
   content: "*";
   color: var(--color-error);
   transform: translate(20px, 0px);
@@ -3926,11 +3758,14 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   font-weight: 600;
   right: 0px;
 }
-[pgs~=initP] [pgs~=checkboxBackground]:is(label):has(input[type=checkbox]:required) [pgs~=required-here]::after,
-[pgs~=initP] [pgs~=checkboxBackground] label:has(input[type=checkbox]:required) [pgs~=required-here]::after {
+[pgs~=initP] [pgs~=radio]:is(label):has(input[type=checkbox]:required) [pgs~=required-here]::after,
+[pgs~=initP] [pgs~=radio] label:has(input[type=checkbox]:required) [pgs~=required-here]::after,
+[pgs~=initP] [pgs~=checkbox]:is(label):has(input[type=checkbox]:required) [pgs~=required-here]::after,
+[pgs~=initP] [pgs~=checkbox] label:has(input[type=checkbox]:required) [pgs~=required-here]::after {
   position: relative;
 }
-[pgs~=initP] [pgs~=checkboxBackground] input {
+[pgs~=initP] [pgs~=radio] input,
+[pgs~=initP] [pgs~=checkbox] input {
   appearance: none;
   position: relative;
   width: var(--checkbox-size);
@@ -3939,7 +3774,8 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   margin-right: var(--gap-texts);
   cursor: pointer;
 }
-[pgs~=initP] [pgs~=checkboxBackground] input::before {
+[pgs~=initP] [pgs~=radio] input::before,
+[pgs~=initP] [pgs~=checkbox] input::before {
   content: "";
   position: absolute;
   width: var(--checkbox-size);
@@ -3947,21 +3783,27 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   outline: solid var(--color-boxDark) 0.1rem;
   background: var(--checkbox-box-background);
   color: var(--color-primary-soft);
+  transform: translateX(0.3rem);
 }
-[pgs~=initP] [pgs~=checkboxBackground] input::after {
+[pgs~=initP] [pgs~=radio] input::after,
+[pgs~=initP] [pgs~=checkbox] input::after {
   position: absolute;
   line-height: var(--checkbox-size);
   text-align: center;
   opacity: 0;
   color: var(--checkbox-check-color);
+  transform: translateX(0.25rem);
 }
-[pgs~=initP] [pgs~=checkboxBackground] input:checked::after {
+[pgs~=initP] [pgs~=radio] input:checked::after,
+[pgs~=initP] [pgs~=checkbox] input:checked::after {
   opacity: 1;
 }
-[pgs~=initP] [pgs~=checkboxBackground] input:focus-visible::before {
+[pgs~=initP] [pgs~=radio] input:focus-visible::before,
+[pgs~=initP] [pgs~=checkbox] input:focus-visible::before {
   outline: 3px solid var(--color-link) !important;
 }
-[pgs~=initP] [pgs~=checkboxBackground] input[type=checkbox]::after {
+[pgs~=initP] [pgs~=radio] input[type=checkbox]::after,
+[pgs~=initP] [pgs~=checkbox] input[type=checkbox]::after {
   top: -1.7rem;
   left: -0.5rem;
   content: "";
@@ -3972,10 +3814,12 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   -webkit-mask: var(--checkbox-icon) center/contain no-repeat;
   mask: var(--checkbox-icon) center/contain no-repeat;
 }
-[pgs~=initP] [pgs~=checkboxBackground] input[type=checkbox]::before {
+[pgs~=initP] [pgs~=radio] input[type=checkbox]::before,
+[pgs~=initP] [pgs~=checkbox] input[type=checkbox]::before {
   border-radius: 0.3rem;
 }
-[pgs~=initP] [pgs~=checkboxBackground] input[type=radio]::after {
+[pgs~=initP] [pgs~=radio] input[type=radio]::after,
+[pgs~=initP] [pgs~=checkbox] input[type=radio]::after {
   content: "";
   top: 0.2rem;
   left: 0.2rem;
@@ -3985,286 +3829,112 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   background-color: var(--checkbox-check-color);
   border-radius: 50%;
 }
-[pgs~=initP] [pgs~=checkboxBackground] input[type=radio]::before {
+[pgs~=initP] [pgs~=radio] input[type=radio]::before,
+[pgs~=initP] [pgs~=checkbox] input[type=radio]::before {
   border-radius: 50%;
 }
-[pgs~=initP] [pgs~=checkboxBackground] a {
+[pgs~=initP] [pgs~=radio] a,
+[pgs~=initP] [pgs~=checkbox] a {
   text-decoration: underline;
   color: var(--color-link);
 }
-[pgs~=initP] [pgs~=checkboxBackground] {
-  color: var(--color-text);
-  padding: var(--padding-2);
-  border-radius: var(--border-radius-input);
-  align-items: center;
-  gap: var(--gap-texts);
-  background-color: var(--color-box-transparent);
-}
-[pgs~=initP] [pgs~=checkboxBackground] label {
-  margin-bottom: 0 !important;
+[pgs~=initP] [pgs~=form] label:not(:has([pgs~=label-unset], + input[type=checkbox], + input[type=radio])):has(+ input, + select, + textarea) {
+  --label-borderadius: 1rem 1rem 0 0;
+  --label-left: var(--border-radius-input);
+  --label-padding: 0.7rem 1.2rem;
+  --label-color: var(--color-black);
+  --label-background: var(--border-color);
+  position: relative;
+  font-weight: 600;
+  display: inline-block;
+  width: fit-content;
+  cursor: pointer;
+  left: var(--label-left);
+  color: var(--label-color);
+  padding: var(--label-padding);
+  border-radius: var(--label-borderadius);
+  background-color: var(--label-background);
 }
-[pgs~=initP] [pgs~=checkboxBackground]:has(input:checked) {
-  background-color: var(--color-primary-soft);
-  color: var(--color-black);
+[pgs~=initP] [pgs~=form] label:not(:has([pgs~=label-unset], + input[type=checkbox], + input[type=radio])):has(+ input, + select, + textarea) i {
+  font-size: 1.6rem;
+  margin-right: 0.7rem;
 }
-[pgs~=initP] [pgs~=checkboxBackground]:has(input:checked) i {
-  --fa-primary-color: var(--color-black);
-  --fa-secondary-color: var(--color-black);
-  color: var(--color-black);
-  opacity: 1;
+[pgs~=initP] [pgs~=form] label:has(+ [hidden]) {
+  display: none !important;
 }
-[pgs~=initP] [pgs~=twoState] {
-  position: relative;
-  isolation: isolate;
-  --button-background-active: var(--color-primary-strong);
-  --button-color-active: var(--color-white);
+[pgs~=initP] [pgs~=form] input:not([pgs~=input-unset], [type=checkbox], [type=file], [type=radio], [type=range]) {
+  --input-padding: 15px;
+  appearance: none;
+  border: var(--border-complete);
+  background-color: var(--color-white);
+  border-radius: var(--border-radius-input);
+  color: var(--color-text);
+  padding: var(--input-padding);
+  font-size: 1.6rem;
+  width: 100%;
+  margin-bottom: var(--gap-texts);
+  letter-spacing: 0.03em;
+  font-family: var(--font);
 }
-[pgs~=initP] [pgs~=twoState] label {
-  --button-border: var(--border-complete);
-  --button-size: 1.5rem;
-  --button-icon-size: 2.0rem;
-  --button-padding-block: var(--button-size);
-  --button-padding-left: calc(var(--button-size) * 2);
-  --button-padding-right: calc(var(--button-size) * 2);
-  --button-padding: var(--button-padding-block) var(--button-padding-right) var(--button-padding-block) var(--button-padding-left);
-  --fa-secondary-opacity: 0.5;
-  --fa-size: var(--button-icon-size);
+[pgs~=initP] [pgs~=form] input:not([pgs~=input-unset], [type=checkbox], [type=file], [type=radio], [type=range])::placeholder {
+  color: var(--color-black);
+  opacity: 20%;
+  font-weight: 500;
 }
-@supports (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=twoState] label {
-    --button-color: contrast-color(color-mix(in srgb, var(--button-background) 77%, black));
-  }
+[pgs~=initP] [pgs~=form] input:not([pgs~=input-unset], [type=checkbox], [type=file], [type=radio], [type=range]):hover {
+  outline: solid var(--color-primary);
 }
-@supports not (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=twoState] label {
-    --button-color: var(--color-black);
-  }
+[pgs~=initP] [pgs~=form] input[type=password] {
+  font-family: initial;
+  font-size: 1.74rem;
 }
-[pgs~=initP] [pgs~=twoState] label {
-  --button-background: var(--color-box);
-  color: var(--button-color);
-  background: var(--button-background);
+[pgs~=initP] [pgs~=form] input[type=file] {
+  min-height: 5.3rem;
 }
-[pgs~=initP] [pgs~=twoState] label:is(a) {
-  color: var(--button-color);
+[pgs~=initP] [pgs~=form] input[type=search], [pgs~=initP] [pgs~=form] input[type=number], [pgs~=initP] [pgs~=form] input[type=datetime-local], [pgs~=initP] [pgs~=form] input[type=date], [pgs~=initP] [pgs~=form] input[type=month], [pgs~=initP] [pgs~=form] input[type=week], [pgs~=initP] [pgs~=form] input[type=time] {
+  width: clamp(50px, 100%, 300px);
+  display: flex;
 }
-[pgs~=initP] [pgs~=twoState] label i {
-  color: var(--button-color);
-  --fa-primary-color: var(--button-color);
-  --fa-secondary-color: var(--button-color);
-}
-[pgs~=initP] [pgs~=twoState] label {
-  font-family: var(--font);
-  font-size: 1.6rem;
-  font-weight: 600;
-  text-decoration: none;
-  -moz-user-select: none;
-  -webkit-user-select: none;
-  user-select: none;
-  border: none;
-  outline: var(--button-border);
-  border-radius: var(--border-radius-input);
-  display: flex;
-  gap: calc(var(--button-size) / 1.5);
-  align-items: center;
-  padding: var(--button-padding);
-  height: max-content;
-  width: max-content;
-  margin-block: auto;
-}
-[pgs~=initP] [pgs~=twoState] label:has(i) {
-  --button-padding-right: calc(var(--button-size) * 2);
-  --button-padding-left: calc(var(--button-size) * 1.5);
-}
-[pgs~=initP] [pgs~=twoState] label[pgs-option~=buttonReverse]:has(i) {
-  --button-padding-right: calc(var(--button-size) * 1.5);
-  --button-padding-left: calc(var(--button-size) * 2);
-}
-[pgs~=initP] [pgs~=twoState] label {
-  transition: all 200ms;
-  cursor: pointer;
-  text-decoration: none;
-}
-@media (hover: hover) and (pointer: fine) {
-  [pgs~=initP] [pgs~=twoState] label:not(:disabled):focus-visible, [pgs~=initP] [pgs~=twoState] label:not(:disabled):hover {
-    box-shadow: -0.25rem 0.25rem 0px var(--color-black);
-    transform: translate(0.25rem, -0.25rem);
-  }
-  @supports (color: contrast-color(red)) {
-    [pgs~=initP] [pgs~=twoState] label:not(:disabled):focus-visible, [pgs~=initP] [pgs~=twoState] label:not(:disabled):hover {
-      --button-color-hover: contrast-color(color-mix(in srgb, var(--button-background-hover) 77%, black));
-    }
-  }
-  @supports not (color: contrast-color(red)) {
-    [pgs~=initP] [pgs~=twoState] label:not(:disabled):focus-visible, [pgs~=initP] [pgs~=twoState] label:not(:disabled):hover {
-      --button-color-hover: var(--color-black);
-    }
-  }
-  [pgs~=initP] [pgs~=twoState] label:not(:disabled):focus-visible, [pgs~=initP] [pgs~=twoState] label:not(:disabled):hover {
-    --button-background-hover: var(--color-primary-soft);
-    color: var(--button-color-hover);
-    background: var(--button-background-hover);
-  }
-  [pgs~=initP] [pgs~=twoState] label:not(:disabled):focus-visible:is(a), [pgs~=initP] [pgs~=twoState] label:not(:disabled):hover:is(a) {
-    color: var(--button-color-hover);
-  }
-  [pgs~=initP] [pgs~=twoState] label:not(:disabled):focus-visible i, [pgs~=initP] [pgs~=twoState] label:not(:disabled):hover i {
-    color: var(--button-color-hover);
-    --fa-primary-color: var(--button-color-hover);
-    --fa-secondary-color: var(--button-color-hover);
-  }
-  [pgs~=initP] [pgs~=twoState] label:not(:disabled):focus-visible, [pgs~=initP] [pgs~=twoState] label:not(:disabled):hover {
-    outline-color: transparent;
-  }
-  [pgs~=initP] [pgs~=twoState] label:not(:disabled):focus-visible i, [pgs~=initP] [pgs~=twoState] label:not(:disabled):hover i {
-    --fa-secondary-opacity: 0.5;
-  }
-}
-[pgs~=initP] [pgs~=twoState] label:is(a):hover {
-  text-decoration: none;
-}
-[pgs~=initP] [pgs~=twoState] label:active {
-  box-shadow: 0 0 0 var(--color-black);
-  transform: translate(0, 0);
-}
-@supports (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=twoState] label[aria-current=page]:not(:hover, :focus-visible) {
-    --button-color-current: contrast-color(color-mix(in srgb, var(--button-background-current) 77%, black));
-  }
-}
-@supports not (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=twoState] label[aria-current=page]:not(:hover, :focus-visible) {
-    --button-color-current: var(--color-whiteFixed);
-  }
-}
-[pgs~=initP] [pgs~=twoState] label[aria-current=page]:not(:hover, :focus-visible) {
-  --button-background-current: var(--color-primary);
-  color: var(--button-color-current);
-  background: var(--button-background-current);
-}
-[pgs~=initP] [pgs~=twoState] label[aria-current=page]:not(:hover, :focus-visible):is(a) {
-  color: var(--button-color-current);
-}
-[pgs~=initP] [pgs~=twoState] label[aria-current=page]:not(:hover, :focus-visible) i {
-  color: var(--button-color-current);
-  --fa-primary-color: var(--button-color-current);
-  --fa-secondary-color: var(--button-color-current);
-}
-[pgs~=initP] [pgs~=twoState] label:disabled {
-  opacity: 0.2;
-  cursor: not-allowed;
-}
-[pgs~=initP] [pgs~=twoState] label {
-  flex-wrap: wrap;
-  display: flex !important;
-  cursor: pointer;
-}
-[pgs~=initP] [pgs~=twoState] label i {
-  color: var(--color-black);
-  opacity: 0.4;
-  min-width: 1.4rem;
-  transition: 300ms;
-}
-[pgs~=initP] [pgs~=twoState] label:hover i {
-  opacity: 1;
-}
-[pgs~=initP] [pgs~=twoState]:has(input:checked) label {
-  --button-background: var(--button-background-active);
-}
-@supports not (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=twoState]:has(input:checked) label {
-    --button-color: var(--button-color-active);
-  }
-}
-[pgs~=initP] [pgs~=twoState]:has(input:checked) label i {
-  --fa-secondary-opacity: 0.6;
-  opacity: 1;
-}
-[pgs~=initP] [pgs~=twoState] input {
-  opacity: 0;
-  z-index: -1;
-  position: absolute;
-  appearance: none;
-}
-[pgs~=initP] [pgs~=toggle] {
-  --toggle-size: var(--border-radius-input);
-  --toggle-color-thumb: var(--color-white);
-  --toggle-color-rail: #cbcbcb;
-  --toggle-color-rail-checked: var(--color-primary);
-  isolation: isolate;
-  display: flex;
-  gap: var(--gap-texts);
-  margin-bottom: var(--gap-texts);
-}
-[pgs~=initP] [pgs~=toggle] label {
+[pgs~=initP] [pgs~=form] input[type=search]::-webkit-calendar-picker-indicator, [pgs~=initP] [pgs~=form] input[type=number]::-webkit-calendar-picker-indicator, [pgs~=initP] [pgs~=form] input[type=datetime-local]::-webkit-calendar-picker-indicator, [pgs~=initP] [pgs~=form] input[type=date]::-webkit-calendar-picker-indicator, [pgs~=initP] [pgs~=form] input[type=month]::-webkit-calendar-picker-indicator, [pgs~=initP] [pgs~=form] input[type=week]::-webkit-calendar-picker-indicator, [pgs~=initP] [pgs~=form] input[type=time]::-webkit-calendar-picker-indicator {
+  order: -1;
+  margin: 0;
+  margin-right: var(--gap-texts);
+  font-size: 1.5em;
+  background-color: var(--border-color);
+  border-radius: var(--input-padding);
+  padding: 10px;
+  margin: -10px;
+  margin-right: 10px;
   cursor: pointer;
 }
-[pgs~=initP] [pgs~=toggle] input {
+[pgs~=initP] [pgs~=form] legend {
+  --label-borderadius: 1rem;
+  --label-left: 0;
+  --label-padding: 0.7rem 1.2rem;
+  --label-color: var(--color-black);
+  --label-background: var(--border-color);
   position: relative;
-  appearance: none;
-  margin-left: auto;
+  font-weight: 600;
+  display: inline-block;
+  width: fit-content;
   cursor: pointer;
-  min-width: calc(var(--toggle-size) * 2);
-}
-[pgs~=initP] [pgs~=toggle] input::after, [pgs~=initP] [pgs~=toggle] input::before {
-  content: "";
-  position: relative;
-  transform: unset;
-  top: unset;
-  margin-left: auto;
-  transition: all 250ms;
-  display: block;
-  border-radius: var(--border-radius-input);
-  order: 1;
-}
-[pgs~=initP] [pgs~=toggle] input::before {
-  background: var(--toggle-color-rail);
-  width: calc(var(--toggle-size) * 2);
-  min-width: calc(var(--toggle-size) * 2);
-  height: var(--toggle-size);
-  flex-shrink: 2;
-}
-[pgs~=initP] [pgs~=toggle] input::after {
-  content: "";
-  opacity: 1;
-  background-color: var(--toggle-color-thumb);
-  height: calc(var(--toggle-size) - 4px);
-  width: calc(var(--toggle-size) + 2px);
-  top: 2px;
-  left: 2px;
-  z-index: 1;
-  position: absolute;
-}
-[pgs~=initP] [pgs~=toggle] input:hover::after {
-  scale: 1.4;
-  background-color: color-mix(in srgb, var(--toggle-color-thumb) 25%, transparent 75%);
-  outline: 1.5px solid var(--color-primary);
-}
-[pgs~=initP] [pgs~=toggle] input:checked::before {
-  background: var(--color-primary);
-}
-[pgs~=initP] [pgs~=toggle] input:checked::after {
-  left: unset;
-  right: 2px;
-}
-[pgs~=initP] [pgs~=toggle] input:focus-visible::after {
-  outline: 3px solid var(--color-link) !important;
+  left: var(--label-left);
+  color: var(--label-color);
+  padding: var(--label-padding);
+  border-radius: var(--label-borderadius);
+  background-color: var(--label-background);
 }
-[pgs~=initP] [pgs~=chips] {
-  display: flex;
-  gap: 0.1rem;
-  padding: 0.4rem;
-  outline: var(--border-complete);
-  width: fit-content;
-  border-radius: var(--border-radius-input);
-  background-color: var(--color-box-transparent);
+[pgs~=initP] [pgs~=form] legend i {
+  font-size: 1.6rem;
+  margin-right: 0.7rem;
 }
-[pgs~=initP] [pgs~=chips] label {
-  outline: unset;
-  --button-background: trasparent;
+[pgs~=initP] [pgs~=form] legend {
+  --label-color: var(--color-black);
+  --label-background: var(--color-box);
+  margin-bottom: var(--gap-texts);
 }
-[pgs~=initP] [pgs~=radio],
-[pgs~=initP] [pgs~=checkbox] {
+[pgs~=initP] [pgs~=form] label:has(input[type=checkbox]):not([pgs~=toggle]),
+[pgs~=initP] [pgs~=form] label:has(input[type=radio]):not([pgs~=toggle]) {
   --checkbox-size: 2.0rem;
   --checkbox-check-color: var(--color-primary);
   --checkbox-box-background: var(--color-white);
@@ -4272,10 +3942,10 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   position: relative;
   display: flex;
 }
-[pgs~=initP] [pgs~=radio]:is(label),
-[pgs~=initP] [pgs~=radio] label,
-[pgs~=initP] [pgs~=checkbox]:is(label),
-[pgs~=initP] [pgs~=checkbox] label {
+[pgs~=initP] [pgs~=form] label:has(input[type=checkbox]):not([pgs~=toggle]):is(label),
+[pgs~=initP] [pgs~=form] label:has(input[type=checkbox]):not([pgs~=toggle]) label,
+[pgs~=initP] [pgs~=form] label:has(input[type=radio]):not([pgs~=toggle]):is(label),
+[pgs~=initP] [pgs~=form] label:has(input[type=radio]):not([pgs~=toggle]) label {
   user-select: none;
   color: var(--color-black);
   position: relative;
@@ -4288,25 +3958,25 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   cursor: pointer;
   display: flex;
 }
-[pgs~=initP] [pgs~=radio]:is(label):has(input:disabled),
-[pgs~=initP] [pgs~=radio] label:has(input:disabled),
-[pgs~=initP] [pgs~=checkbox]:is(label):has(input:disabled),
-[pgs~=initP] [pgs~=checkbox] label:has(input:disabled) {
+[pgs~=initP] [pgs~=form] label:has(input[type=checkbox]):not([pgs~=toggle]):is(label):has(input:disabled),
+[pgs~=initP] [pgs~=form] label:has(input[type=checkbox]):not([pgs~=toggle]) label:has(input:disabled),
+[pgs~=initP] [pgs~=form] label:has(input[type=radio]):not([pgs~=toggle]):is(label):has(input:disabled),
+[pgs~=initP] [pgs~=form] label:has(input[type=radio]):not([pgs~=toggle]) label:has(input:disabled) {
   opacity: 0.5;
 }
-[pgs~=initP] [pgs~=radio]:is(label):has(input[type=checkbox]:required),
-[pgs~=initP] [pgs~=radio] label:has(input[type=checkbox]:required),
-[pgs~=initP] [pgs~=checkbox]:is(label):has(input[type=checkbox]:required),
-[pgs~=initP] [pgs~=checkbox] label:has(input[type=checkbox]:required) {
+[pgs~=initP] [pgs~=form] label:has(input[type=checkbox]):not([pgs~=toggle]):is(label):has(input[type=checkbox]:required),
+[pgs~=initP] [pgs~=form] label:has(input[type=checkbox]):not([pgs~=toggle]) label:has(input[type=checkbox]:required),
+[pgs~=initP] [pgs~=form] label:has(input[type=radio]):not([pgs~=toggle]):is(label):has(input[type=checkbox]:required),
+[pgs~=initP] [pgs~=form] label:has(input[type=radio]):not([pgs~=toggle]) label:has(input[type=checkbox]:required) {
   position: relative;
 }
-[pgs~=initP] [pgs~=radio]:is(label):has(input[type=checkbox]:required) [pgs~=required-here]::after, [pgs~=initP] [pgs~=radio]:is(label):has(input[type=checkbox]:required):not(:has([pgs~=required-here]))::after,
-[pgs~=initP] [pgs~=radio] label:has(input[type=checkbox]:required) [pgs~=required-here]::after,
-[pgs~=initP] [pgs~=radio] label:has(input[type=checkbox]:required):not(:has([pgs~=required-here]))::after,
-[pgs~=initP] [pgs~=checkbox]:is(label):has(input[type=checkbox]:required) [pgs~=required-here]::after,
-[pgs~=initP] [pgs~=checkbox]:is(label):has(input[type=checkbox]:required):not(:has([pgs~=required-here]))::after,
-[pgs~=initP] [pgs~=checkbox] label:has(input[type=checkbox]:required) [pgs~=required-here]::after,
-[pgs~=initP] [pgs~=checkbox] label:has(input[type=checkbox]:required):not(:has([pgs~=required-here]))::after {
+[pgs~=initP] [pgs~=form] label:has(input[type=checkbox]):not([pgs~=toggle]):is(label):has(input[type=checkbox]:required) [pgs~=required-here]::after, [pgs~=initP] [pgs~=form] label:has(input[type=checkbox]):not([pgs~=toggle]):is(label):has(input[type=checkbox]:required):not(:has([pgs~=required-here]))::after,
+[pgs~=initP] [pgs~=form] label:has(input[type=checkbox]):not([pgs~=toggle]) label:has(input[type=checkbox]:required) [pgs~=required-here]::after,
+[pgs~=initP] [pgs~=form] label:has(input[type=checkbox]):not([pgs~=toggle]) label:has(input[type=checkbox]:required):not(:has([pgs~=required-here]))::after,
+[pgs~=initP] [pgs~=form] label:has(input[type=radio]):not([pgs~=toggle]):is(label):has(input[type=checkbox]:required) [pgs~=required-here]::after,
+[pgs~=initP] [pgs~=form] label:has(input[type=radio]):not([pgs~=toggle]):is(label):has(input[type=checkbox]:required):not(:has([pgs~=required-here]))::after,
+[pgs~=initP] [pgs~=form] label:has(input[type=radio]):not([pgs~=toggle]) label:has(input[type=checkbox]:required) [pgs~=required-here]::after,
+[pgs~=initP] [pgs~=form] label:has(input[type=radio]):not([pgs~=toggle]) label:has(input[type=checkbox]:required):not(:has([pgs~=required-here]))::after {
   content: "*";
   color: var(--color-error);
   transform: translate(20px, 0px);
@@ -4316,14 +3986,14 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   font-weight: 600;
   right: 0px;
 }
-[pgs~=initP] [pgs~=radio]:is(label):has(input[type=checkbox]:required) [pgs~=required-here]::after,
-[pgs~=initP] [pgs~=radio] label:has(input[type=checkbox]:required) [pgs~=required-here]::after,
-[pgs~=initP] [pgs~=checkbox]:is(label):has(input[type=checkbox]:required) [pgs~=required-here]::after,
-[pgs~=initP] [pgs~=checkbox] label:has(input[type=checkbox]:required) [pgs~=required-here]::after {
+[pgs~=initP] [pgs~=form] label:has(input[type=checkbox]):not([pgs~=toggle]):is(label):has(input[type=checkbox]:required) [pgs~=required-here]::after,
+[pgs~=initP] [pgs~=form] label:has(input[type=checkbox]):not([pgs~=toggle]) label:has(input[type=checkbox]:required) [pgs~=required-here]::after,
+[pgs~=initP] [pgs~=form] label:has(input[type=radio]):not([pgs~=toggle]):is(label):has(input[type=checkbox]:required) [pgs~=required-here]::after,
+[pgs~=initP] [pgs~=form] label:has(input[type=radio]):not([pgs~=toggle]) label:has(input[type=checkbox]:required) [pgs~=required-here]::after {
   position: relative;
 }
-[pgs~=initP] [pgs~=radio] input,
-[pgs~=initP] [pgs~=checkbox] input {
+[pgs~=initP] [pgs~=form] label:has(input[type=checkbox]):not([pgs~=toggle]) input,
+[pgs~=initP] [pgs~=form] label:has(input[type=radio]):not([pgs~=toggle]) input {
   appearance: none;
   position: relative;
   width: var(--checkbox-size);
@@ -4332,8 +4002,8 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   margin-right: var(--gap-texts);
   cursor: pointer;
 }
-[pgs~=initP] [pgs~=radio] input::before,
-[pgs~=initP] [pgs~=checkbox] input::before {
+[pgs~=initP] [pgs~=form] label:has(input[type=checkbox]):not([pgs~=toggle]) input::before,
+[pgs~=initP] [pgs~=form] label:has(input[type=radio]):not([pgs~=toggle]) input::before {
   content: "";
   position: absolute;
   width: var(--checkbox-size);
@@ -4341,247 +4011,23 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   outline: solid var(--color-boxDark) 0.1rem;
   background: var(--checkbox-box-background);
   color: var(--color-primary-soft);
+  transform: translateX(0.3rem);
 }
-[pgs~=initP] [pgs~=radio] input::after,
-[pgs~=initP] [pgs~=checkbox] input::after {
+[pgs~=initP] [pgs~=form] label:has(input[type=checkbox]):not([pgs~=toggle]) input::after,
+[pgs~=initP] [pgs~=form] label:has(input[type=radio]):not([pgs~=toggle]) input::after {
   position: absolute;
   line-height: var(--checkbox-size);
   text-align: center;
   opacity: 0;
   color: var(--checkbox-check-color);
+  transform: translateX(0.25rem);
 }
-[pgs~=initP] [pgs~=radio] input:checked::after,
-[pgs~=initP] [pgs~=checkbox] input:checked::after {
+[pgs~=initP] [pgs~=form] label:has(input[type=checkbox]):not([pgs~=toggle]) input:checked::after,
+[pgs~=initP] [pgs~=form] label:has(input[type=radio]):not([pgs~=toggle]) input:checked::after {
   opacity: 1;
 }
-[pgs~=initP] [pgs~=radio] input:focus-visible::before,
-[pgs~=initP] [pgs~=checkbox] input:focus-visible::before {
-  outline: 3px solid var(--color-link) !important;
-}
-[pgs~=initP] [pgs~=radio] input[type=checkbox]::after,
-[pgs~=initP] [pgs~=checkbox] input[type=checkbox]::after {
-  top: -1.7rem;
-  left: -0.5rem;
-  content: "";
-  display: inline-block;
-  width: calc(2rem + var(--checkbox-size));
-  height: calc(2rem + var(--checkbox-size));
-  background-color: var(--checkbox-check-color);
-  -webkit-mask: var(--checkbox-icon) center/contain no-repeat;
-  mask: var(--checkbox-icon) center/contain no-repeat;
-}
-[pgs~=initP] [pgs~=radio] input[type=checkbox]::before,
-[pgs~=initP] [pgs~=checkbox] input[type=checkbox]::before {
-  border-radius: 0.3rem;
-}
-[pgs~=initP] [pgs~=radio] input[type=radio]::after,
-[pgs~=initP] [pgs~=checkbox] input[type=radio]::after {
-  content: "";
-  top: 0.2rem;
-  left: 0.2rem;
-  display: inline-block;
-  width: calc(var(--checkbox-size) - 0.4rem);
-  height: calc(var(--checkbox-size) - 0.4rem);
-  background-color: var(--checkbox-check-color);
-  border-radius: 50%;
-}
-[pgs~=initP] [pgs~=radio] input[type=radio]::before,
-[pgs~=initP] [pgs~=checkbox] input[type=radio]::before {
-  border-radius: 50%;
-}
-[pgs~=initP] [pgs~=radio] a,
-[pgs~=initP] [pgs~=checkbox] a {
-  text-decoration: underline;
-  color: var(--color-link);
-}
-[pgs~=initP] [pgs~=form] label:not(:has([pgs~=label-unset], + input[type=checkbox], + input[type=radio])):has(+ input, + select, + textarea) {
-  --label-borderadius: 1rem 1rem 0 0;
-  --label-left: var(--border-radius-input);
-  --label-padding: 0.7rem 1.2rem;
-  --label-color: var(--color-black);
-  --label-background: var(--border-color);
-  position: relative;
-  font-weight: 600;
-  display: inline-block;
-  width: fit-content;
-  cursor: pointer;
-  left: var(--label-left);
-  color: var(--label-color);
-  padding: var(--label-padding);
-  border-radius: var(--label-borderadius);
-  background-color: var(--label-background);
-}
-[pgs~=initP] [pgs~=form] label:not(:has([pgs~=label-unset], + input[type=checkbox], + input[type=radio])):has(+ input, + select, + textarea) i {
-  font-size: 1.6rem;
-  margin-right: 0.7rem;
-}
-[pgs~=initP] [pgs~=form] label:has(+ [hidden]) {
-  display: none !important;
-}
-[pgs~=initP] [pgs~=form] input:not([pgs~=input-unset], [type=checkbox], [type=file], [type=radio], [type=range]) {
-  --input-padding: 15px;
-  appearance: none;
-  border: var(--border-complete);
-  background-color: var(--color-white);
-  border-radius: var(--border-radius-input);
-  color: var(--color-text);
-  padding: var(--input-padding);
-  font-size: 1.6rem;
-  width: 100%;
-  margin-bottom: var(--gap-texts);
-  letter-spacing: 0.03em;
-  font-family: var(--font);
-}
-[pgs~=initP] [pgs~=form] input:not([pgs~=input-unset], [type=checkbox], [type=file], [type=radio], [type=range])::placeholder {
-  color: var(--color-black);
-  opacity: 20%;
-  font-weight: 500;
-}
-[pgs~=initP] [pgs~=form] input:not([pgs~=input-unset], [type=checkbox], [type=file], [type=radio], [type=range]):hover {
-  outline: solid var(--color-primary);
-}
-[pgs~=initP] [pgs~=form] input[type=password] {
-  font-family: initial;
-  font-size: 1.74rem;
-}
-[pgs~=initP] [pgs~=form] input[type=file] {
-  min-height: 5.3rem;
-}
-[pgs~=initP] [pgs~=form] input[type=search], [pgs~=initP] [pgs~=form] input[type=number], [pgs~=initP] [pgs~=form] input[type=datetime-local], [pgs~=initP] [pgs~=form] input[type=date], [pgs~=initP] [pgs~=form] input[type=month], [pgs~=initP] [pgs~=form] input[type=week], [pgs~=initP] [pgs~=form] input[type=time] {
-  width: clamp(50px, 100%, 300px);
-  display: flex;
-}
-[pgs~=initP] [pgs~=form] input[type=search]::-webkit-calendar-picker-indicator, [pgs~=initP] [pgs~=form] input[type=number]::-webkit-calendar-picker-indicator, [pgs~=initP] [pgs~=form] input[type=datetime-local]::-webkit-calendar-picker-indicator, [pgs~=initP] [pgs~=form] input[type=date]::-webkit-calendar-picker-indicator, [pgs~=initP] [pgs~=form] input[type=month]::-webkit-calendar-picker-indicator, [pgs~=initP] [pgs~=form] input[type=week]::-webkit-calendar-picker-indicator, [pgs~=initP] [pgs~=form] input[type=time]::-webkit-calendar-picker-indicator {
-  order: -1;
-  margin: 0;
-  margin-right: var(--gap-texts);
-  font-size: 1.5em;
-  background-color: var(--border-color);
-  border-radius: var(--input-padding);
-  padding: 10px;
-  margin: -10px;
-  margin-right: 10px;
-  cursor: pointer;
-}
-[pgs~=initP] [pgs~=form] legend {
-  --label-borderadius: 1rem;
-  --label-left: 0;
-  --label-padding: 0.7rem 1.2rem;
-  --label-color: var(--color-black);
-  --label-background: var(--border-color);
-  position: relative;
-  font-weight: 600;
-  display: inline-block;
-  width: fit-content;
-  cursor: pointer;
-  left: var(--label-left);
-  color: var(--label-color);
-  padding: var(--label-padding);
-  border-radius: var(--label-borderadius);
-  background-color: var(--label-background);
-}
-[pgs~=initP] [pgs~=form] legend i {
-  font-size: 1.6rem;
-  margin-right: 0.7rem;
-}
-[pgs~=initP] [pgs~=form] legend {
-  --label-color: var(--color-black);
-  --label-background: var(--color-box);
-  margin-bottom: var(--gap-texts);
-}
-[pgs~=initP] [pgs~=form] label:has(input[type=checkbox]):not([pgs~=toggle]),
-[pgs~=initP] [pgs~=form] label:has(input[type=radio]):not([pgs~=toggle]) {
-  --checkbox-size: 2.0rem;
-  --checkbox-check-color: var(--color-primary);
-  --checkbox-box-background: var(--color-white);
-  --checkbox-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 448 512%27%3E%3Cpath fill=%27inerit%27 d=%27M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.2 0z%27/%3E%3C/svg%3E");
-  position: relative;
-  display: flex;
-}
-[pgs~=initP] [pgs~=form] label:has(input[type=checkbox]):not([pgs~=toggle]):is(label),
-[pgs~=initP] [pgs~=form] label:has(input[type=checkbox]):not([pgs~=toggle]) label,
-[pgs~=initP] [pgs~=form] label:has(input[type=radio]):not([pgs~=toggle]):is(label),
-[pgs~=initP] [pgs~=form] label:has(input[type=radio]):not([pgs~=toggle]) label {
-  user-select: none;
-  color: var(--color-black);
-  position: relative;
-  width: auto;
-  display: block;
-  text-align: left;
-  line-height: var(--checkbox-size);
-  margin-bottom: var(--gap-texts);
-  width: fit-content;
-  cursor: pointer;
-  display: flex;
-}
-[pgs~=initP] [pgs~=form] label:has(input[type=checkbox]):not([pgs~=toggle]):is(label):has(input:disabled),
-[pgs~=initP] [pgs~=form] label:has(input[type=checkbox]):not([pgs~=toggle]) label:has(input:disabled),
-[pgs~=initP] [pgs~=form] label:has(input[type=radio]):not([pgs~=toggle]):is(label):has(input:disabled),
-[pgs~=initP] [pgs~=form] label:has(input[type=radio]):not([pgs~=toggle]) label:has(input:disabled) {
-  opacity: 0.5;
-}
-[pgs~=initP] [pgs~=form] label:has(input[type=checkbox]):not([pgs~=toggle]):is(label):has(input[type=checkbox]:required),
-[pgs~=initP] [pgs~=form] label:has(input[type=checkbox]):not([pgs~=toggle]) label:has(input[type=checkbox]:required),
-[pgs~=initP] [pgs~=form] label:has(input[type=radio]):not([pgs~=toggle]):is(label):has(input[type=checkbox]:required),
-[pgs~=initP] [pgs~=form] label:has(input[type=radio]):not([pgs~=toggle]) label:has(input[type=checkbox]:required) {
-  position: relative;
-}
-[pgs~=initP] [pgs~=form] label:has(input[type=checkbox]):not([pgs~=toggle]):is(label):has(input[type=checkbox]:required) [pgs~=required-here]::after, [pgs~=initP] [pgs~=form] label:has(input[type=checkbox]):not([pgs~=toggle]):is(label):has(input[type=checkbox]:required):not(:has([pgs~=required-here]))::after,
-[pgs~=initP] [pgs~=form] label:has(input[type=checkbox]):not([pgs~=toggle]) label:has(input[type=checkbox]:required) [pgs~=required-here]::after,
-[pgs~=initP] [pgs~=form] label:has(input[type=checkbox]):not([pgs~=toggle]) label:has(input[type=checkbox]:required):not(:has([pgs~=required-here]))::after,
-[pgs~=initP] [pgs~=form] label:has(input[type=radio]):not([pgs~=toggle]):is(label):has(input[type=checkbox]:required) [pgs~=required-here]::after,
-[pgs~=initP] [pgs~=form] label:has(input[type=radio]):not([pgs~=toggle]):is(label):has(input[type=checkbox]:required):not(:has([pgs~=required-here]))::after,
-[pgs~=initP] [pgs~=form] label:has(input[type=radio]):not([pgs~=toggle]) label:has(input[type=checkbox]:required) [pgs~=required-here]::after,
-[pgs~=initP] [pgs~=form] label:has(input[type=radio]):not([pgs~=toggle]) label:has(input[type=checkbox]:required):not(:has([pgs~=required-here]))::after {
-  content: "*";
-  color: var(--color-error);
-  transform: translate(20px, 0px);
-  position: absolute;
-  font-size: 40px;
-  bottom: -8px;
-  font-weight: 600;
-  right: 0px;
-}
-[pgs~=initP] [pgs~=form] label:has(input[type=checkbox]):not([pgs~=toggle]):is(label):has(input[type=checkbox]:required) [pgs~=required-here]::after,
-[pgs~=initP] [pgs~=form] label:has(input[type=checkbox]):not([pgs~=toggle]) label:has(input[type=checkbox]:required) [pgs~=required-here]::after,
-[pgs~=initP] [pgs~=form] label:has(input[type=radio]):not([pgs~=toggle]):is(label):has(input[type=checkbox]:required) [pgs~=required-here]::after,
-[pgs~=initP] [pgs~=form] label:has(input[type=radio]):not([pgs~=toggle]) label:has(input[type=checkbox]:required) [pgs~=required-here]::after {
-  position: relative;
-}
-[pgs~=initP] [pgs~=form] label:has(input[type=checkbox]):not([pgs~=toggle]) input,
-[pgs~=initP] [pgs~=form] label:has(input[type=radio]):not([pgs~=toggle]) input {
-  appearance: none;
-  position: relative;
-  width: var(--checkbox-size);
-  min-width: var(--checkbox-size);
-  height: var(--checkbox-size);
-  margin-right: var(--gap-texts);
-  cursor: pointer;
-}
-[pgs~=initP] [pgs~=form] label:has(input[type=checkbox]):not([pgs~=toggle]) input::before,
-[pgs~=initP] [pgs~=form] label:has(input[type=radio]):not([pgs~=toggle]) input::before {
-  content: "";
-  position: absolute;
-  width: var(--checkbox-size);
-  height: var(--checkbox-size);
-  outline: solid var(--color-boxDark) 0.1rem;
-  background: var(--checkbox-box-background);
-  color: var(--color-primary-soft);
-}
-[pgs~=initP] [pgs~=form] label:has(input[type=checkbox]):not([pgs~=toggle]) input::after,
-[pgs~=initP] [pgs~=form] label:has(input[type=radio]):not([pgs~=toggle]) input::after {
-  position: absolute;
-  line-height: var(--checkbox-size);
-  text-align: center;
-  opacity: 0;
-  color: var(--checkbox-check-color);
-}
-[pgs~=initP] [pgs~=form] label:has(input[type=checkbox]):not([pgs~=toggle]) input:checked::after,
-[pgs~=initP] [pgs~=form] label:has(input[type=radio]):not([pgs~=toggle]) input:checked::after {
-  opacity: 1;
-}
-[pgs~=initP] [pgs~=form] label:has(input[type=checkbox]):not([pgs~=toggle]) input:focus-visible::before,
-[pgs~=initP] [pgs~=form] label:has(input[type=radio]):not([pgs~=toggle]) input:focus-visible::before {
+[pgs~=initP] [pgs~=form] label:has(input[type=checkbox]):not([pgs~=toggle]) input:focus-visible::before,
+[pgs~=initP] [pgs~=form] label:has(input[type=radio]):not([pgs~=toggle]) input:focus-visible::before {
   outline: 3px solid var(--color-link) !important;
 }
 [pgs~=initP] [pgs~=form] label:has(input[type=checkbox]):not([pgs~=toggle]) input[type=checkbox]::after,
@@ -4730,93 +4176,411 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   margin-right: auto;
   display: flex;
 }
-[pgs~=initP] [pgs~=form] input[type=color]::-webkit-color-swatch-wrapper {
-  padding: 5px;
+[pgs~=initP] [pgs~=form] input[type=color]::-webkit-color-swatch-wrapper {
+  padding: 5px;
+}
+[pgs~=initP] [pgs~=form] input[type=color]::-webkit-color-swatch {
+  border: var(--border-complete);
+  border-radius: calc(var(--border-radius-input) - 5px);
+  cursor: pointer;
+}
+[pgs~=initP] [pgs~=form] select {
+  --input-padding: 15px;
+  appearance: none;
+  border: var(--border-complete);
+  background-color: var(--color-white);
+  border-radius: var(--border-radius-input);
+  color: var(--color-text);
+  padding: var(--input-padding);
+  font-size: 1.6rem;
+  width: 100%;
+  margin-bottom: var(--gap-texts);
+  letter-spacing: 0.03em;
+  font-family: var(--font);
+}
+[pgs~=initP] [pgs~=form] select::placeholder {
+  color: var(--color-black);
+  opacity: 20%;
+  font-weight: 500;
+}
+[pgs~=initP] [pgs~=form] select:hover {
+  outline: solid var(--color-primary);
+}
+[pgs~=initP] [pgs~=form] select {
+  overflow: auto;
+  appearance: none;
+  cursor: pointer;
+}
+[pgs~=initP] [pgs~=form] select option {
+  padding: var(--gap-texts);
+  border-radius: calc(var(--border-radius-input) - var(--input-padding));
+  background-color: transparent;
+  cursor: pointer;
+}
+[pgs~=initP] [pgs~=form] select option:checked {
+  background-color: var(--color-primary);
+  color: var(--color-whiteFixed);
+  font-weight: 600;
+}
+[pgs~=initP] [pgs~=form] select option:hover {
+  background-color: var(--color-primary-soft);
+}
+[pgs~=initP] [pgs~=form] select option:checked:hover {
+  background-color: var(--color-primary-dark);
+}
+[pgs~=initP] [pgs~=form] button[type=submit] {
+  --button-border: var(--border-complete);
+  --button-size: 1.5rem;
+  --button-icon-size: 2rem;
+  --button-padding-block: var(--button-size);
+  --button-padding-left: calc(var(--button-size) * 2);
+  --button-padding-right: calc(var(--button-size) * 2);
+  --button-padding: var(--button-padding-block) var(--button-padding-right) var(--button-padding-block) var(--button-padding-left);
+  --fa-secondary-opacity: 0.5;
+  --fa-size: var(--button-icon-size);
+  font-family: var(--font);
+  font-size: 1.6rem;
+  font-weight: 600;
+  text-decoration: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+  border: none;
+  outline: var(--button-border);
+  border-radius: var(--border-radius-input);
+  display: flex;
+  gap: calc(var(--button-size) / 1.5);
+  align-items: center;
+  padding: var(--button-padding);
+  height: max-content;
+  width: max-content;
+  margin-block: auto;
+}
+[pgs~=initP] [pgs~=form] button[type=submit]:has(i) {
+  --button-padding-right: calc(var(--button-size) * 2);
+  --button-padding-left: calc(var(--button-size) * 1.5);
+}
+[pgs~=initP] [pgs~=form] button[type=submit][pgs-option~=buttonReverse]:has(i) {
+  --button-padding-right: calc(var(--button-size) * 1.5);
+  --button-padding-left: calc(var(--button-size) * 2);
+}
+[pgs~=initP] [pgs~=form] button[type=submit] {
+  transition: all 200ms;
+  cursor: pointer;
+  text-decoration: none;
+  --hover-shadow-color: var(--color-primary);
+  --hover-shadow-displacement: 0.25rem;
+}
+@media (hover: hover) and (pointer: fine) {
+  [pgs~=initP] [pgs~=form] button[type=submit]:not(:disabled):not([pgs-option~=buttonStyle-2]):focus-visible, [pgs~=initP] [pgs~=form] button[type=submit]:not(:disabled):not([pgs-option~=buttonStyle-2]):hover {
+    box-shadow: 0px 0px 38px 0px var(--hover-shadow-color);
+    --hover-color: var(--color-white);
+    --hover-background: var(--color-primary-strong);
+    color: var(--hover-color);
+    --fa-primary-color: var(--hover-color);
+    --fa-secondary-color: var(--hover-color);
+    background: var(--hover-background);
+  }
+  [pgs~=initP] [pgs~=form] button[type=submit]:not(:disabled):not([pgs-option~=buttonStyle-2]):focus-visible :is(h1, h2, h3, h4, h5, h6, p), [pgs~=initP] [pgs~=form] button[type=submit]:not(:disabled):not([pgs-option~=buttonStyle-2]):hover :is(h1, h2, h3, h4, h5, h6, p) {
+    color: var(--hover-color);
+  }
+}
+@media (hover: hover) and (pointer: fine) {
+  [pgs~=initP] [pgs~=form] button[type=submit]:not(:disabled)[pgs-option~=buttonStyle-2]:focus-visible, [pgs~=initP] [pgs~=form] button[type=submit]:not(:disabled)[pgs-option~=buttonStyle-2]:hover {
+    box-shadow: calc(var(--hover-shadow-displacement) * -1) var(--hover-shadow-displacement) 0 var(--color-black);
+    transform: translate(var(--hover-shadow-displacement), calc(var(--hover-shadow-displacement) * -1));
+    outline-color: transparent;
+    --hover-color: var(--color-white);
+    --hover-background: var(--color-primary-strong);
+    color: var(--hover-color);
+    --fa-primary-color: var(--hover-color);
+    --fa-secondary-color: var(--hover-color);
+    background: var(--hover-background);
+  }
+  [pgs~=initP] [pgs~=form] button[type=submit]:not(:disabled)[pgs-option~=buttonStyle-2]:focus-visible :is(h1, h2, h3, h4, h5, h6, p), [pgs~=initP] [pgs~=form] button[type=submit]:not(:disabled)[pgs-option~=buttonStyle-2]:hover :is(h1, h2, h3, h4, h5, h6, p) {
+    color: var(--hover-color);
+  }
+}
+[pgs~=initP] [pgs~=form] button[type=submit]:not(:disabled):hover {
+  --fa-secondary-opacity: 0.5;
+  --hover-color: var(--color-whiteFixed);
+  color: var(--hover-color);
+  --fa-primary-color: var(--hover-color);
+  --fa-secondary-color: var(--hover-color);
+}
+[pgs~=initP] [pgs~=form] button[type=submit]:is(a):hover {
+  text-decoration: none;
+}
+[pgs~=initP] [pgs~=form] button[type=submit] {
+  --button-color: var(--color-black);
+  --button-color-strong: var(--color-whiteFixed);
+  --button-color-current: var(--color-whiteFixed);
+  --button-background: var(--color-box);
+  --button-background-strong: var(--color-primary);
+  --button-background-current: var(--color-primary);
+  color: var(--button-color-strong);
+  background: var(--button-background-strong);
+  --fa-primary-color: var(--button-color-strong);
+  --fa-secondary-color: var(--button-color-strong);
+}
+[pgs~=initP] [pgs~=form] button[type=submit][aria-current=page]:not(:hover, :focus-visible) {
+  --button-color: var(--color-black);
+  --button-color-strong: var(--color-whiteFixed);
+  --button-color-current: var(--color-whiteFixed);
+  --button-background: var(--color-box);
+  --button-background-strong: var(--color-primary);
+  --button-background-current: var(--color-primary);
+  color: var(--button-color-current);
+  background: var(--button-background-current);
+  --fa-primary-color: var(--button-color-current);
+  --fa-secondary-color: var(--button-color-current);
+}
+[pgs~=initP] [pgs~=form] button[type=submit]:disabled {
+  opacity: 0.2;
+  cursor: not-allowed;
+}
+[pgs~=initP] [pgs~=form] fieldset {
+  border: unset;
+}
+[pgs~=initP] [pgs~=form] fieldset[required] legend {
+  position: relative;
+}
+[pgs~=initP] [pgs~=form] fieldset[required] legend [pgs~=required-here]::after, [pgs~=initP] [pgs~=form] fieldset[required] legend:not(:has([pgs~=required-here]))::after {
+  content: "*";
+  color: var(--color-error);
+  transform: translate(20px, 0px);
+  position: absolute;
+  font-size: 40px;
+  bottom: -8px;
+  font-weight: 600;
+  right: 0px;
+}
+[pgs~=initP] [pgs~=form] fieldset[required] legend [pgs~=required-here]::after {
+  position: relative;
+}
+[pgs~=initP] [pgs~=form] label:has(+ input[required]:not([type=checkbox], [type=radio]), + select[required], + textarea[required]),
+[pgs~=initP] [pgs~=form] fieldset:has(input[type=checkbox][required], input[type=radio][required]) legend {
+  position: relative;
+}
+[pgs~=initP] [pgs~=form] label:has(+ input[required]:not([type=checkbox], [type=radio]), + select[required], + textarea[required]) [pgs~=required-here]::after, [pgs~=initP] [pgs~=form] label:has(+ input[required]:not([type=checkbox], [type=radio]), + select[required], + textarea[required]):not(:has([pgs~=required-here]))::after,
+[pgs~=initP] [pgs~=form] fieldset:has(input[type=checkbox][required], input[type=radio][required]) legend [pgs~=required-here]::after,
+[pgs~=initP] [pgs~=form] fieldset:has(input[type=checkbox][required], input[type=radio][required]) legend:not(:has([pgs~=required-here]))::after {
+  content: "*";
+  color: var(--color-error);
+  transform: translate(20px, 0px);
+  position: absolute;
+  font-size: 40px;
+  bottom: -8px;
+  font-weight: 600;
+  right: 0px;
+}
+[pgs~=initP] [pgs~=form] label:has(+ input[required]:not([type=checkbox], [type=radio]), + select[required], + textarea[required]) [pgs~=required-here]::after,
+[pgs~=initP] [pgs~=form] fieldset:has(input[type=checkbox][required], input[type=radio][required]) legend [pgs~=required-here]::after {
+  position: relative;
+}
+[pgs~=initP] [pgs~=form] input[disabled],
+[pgs~=initP] [pgs~=form] input[disabled]:is([type=checkbox], [type=radio]) + label,
+[pgs~=initP] [pgs~=form] label:has(+ input[disabled]:not([type=checkbox], [type=radio])),
+[pgs~=initP] [pgs~=form] label:has(+ :is(textarea[disabled], select[disabled])) {
+  opacity: 0.5;
+  cursor: not-allowed !important;
+}
+[pgs~=initP] [pgs~=form] input[type=password]::-ms-reveal,
+[pgs~=initP] [pgs~=form] input[type=password]::-ms-clear,
+[pgs~=initP] [pgs~=form] input[type=password]::-webkit-textfield-decoration-container,
+[pgs~=initP] [pgs~=form] input[type=password]::-webkit-credentials-auto-fill-button,
+[pgs~=initP] [pgs~=form] input[type=password]::-webkit-password-toggle {
+  display: none;
+}
+[pgs~=initP] [pgs~=form] input[type=file] {
+  width: 100%;
+  background-color: var(--color-white);
+  padding: var(--gap-texts);
+  border-radius: calc(var(--border-radius-input) + var(--gap-texts));
+}
+[pgs~=initP] [pgs~=form] input[type=file]::file-selector-button {
+  --button-background: var(--color-box);
+  --button-color: var(--color-black);
+  width: 40%;
+  margin-bottom: var(--gap-texts);
+  margin-right: var(--gap-texts);
+  border: none;
+  outline: var(--border-complete);
+  border-radius: var(--border-radius-input);
+  padding: 1.5rem 3rem;
+  font-family: var(--font);
+  font-size: 1.6rem;
+  font-weight: 600;
+  color: var(--button-color);
+  background: var(--button-background);
+  cursor: pointer;
+  transition: all 200ms;
+}
+[pgs~=initP] [pgs~=form] input[type=file]::file-selector-button:hover {
+  background-color: var(--color-primary);
+  color: var(--color-white);
+}
+[pgs~=initP] [pgs~=formValidate][pgs-option~=error] [pgs-option~=error]:not([type=checkbox], [type=radio]) {
+  outline: solid 3px var(--color-error) !important;
+}
+[pgs~=initP] [pgs~=formValidate][pgs-option~=error] [pgs-option~=error]:not([type=checkbox], [type=radio])::before {
+  content: "This field is required";
+  color: var(--color-error);
+  font-weight: 500;
+  font-size: 1.7rem;
+}
+[pgs~=initP] [pgs~=formValidate][pgs-option~=error] label:has(+ [pgs-option~=error], [pgs-option~=error]):has(input[type=checkbox]) {
+  background-color: var(--color-error) !important;
+  padding: 6px;
+  margin-left: -6px;
+  border-radius: 10px;
+}
+[pgs~=initP] [pgs~=formValidate][pgs-option~=error] fieldset:has(input[type=radio][pgs-option~=error]) legend {
+  --label-background: var(--color-error) !important;
+}
+[pgs~=initP] [pgs~=checkboxBackground] {
+  position: relative;
+  isolation: isolate;
+  --checkbox-size: 2.0rem;
+  --checkbox-check-color: var(--color-primary);
+  --checkbox-box-background: var(--color-white);
+  --checkbox-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 448 512%27%3E%3Cpath fill=%27inerit%27 d=%27M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.2 0z%27/%3E%3C/svg%3E");
+  position: relative;
+  display: flex;
+}
+[pgs~=initP] [pgs~=checkboxBackground]:is(label),
+[pgs~=initP] [pgs~=checkboxBackground] label {
+  user-select: none;
+  color: var(--color-black);
+  position: relative;
+  width: auto;
+  display: block;
+  text-align: left;
+  line-height: var(--checkbox-size);
+  margin-bottom: var(--gap-texts);
+  width: fit-content;
+  cursor: pointer;
+  display: flex;
+}
+[pgs~=initP] [pgs~=checkboxBackground]:is(label):has(input:disabled),
+[pgs~=initP] [pgs~=checkboxBackground] label:has(input:disabled) {
+  opacity: 0.5;
+}
+[pgs~=initP] [pgs~=checkboxBackground]:is(label):has(input[type=checkbox]:required),
+[pgs~=initP] [pgs~=checkboxBackground] label:has(input[type=checkbox]:required) {
+  position: relative;
+}
+[pgs~=initP] [pgs~=checkboxBackground]:is(label):has(input[type=checkbox]:required) [pgs~=required-here]::after, [pgs~=initP] [pgs~=checkboxBackground]:is(label):has(input[type=checkbox]:required):not(:has([pgs~=required-here]))::after,
+[pgs~=initP] [pgs~=checkboxBackground] label:has(input[type=checkbox]:required) [pgs~=required-here]::after,
+[pgs~=initP] [pgs~=checkboxBackground] label:has(input[type=checkbox]:required):not(:has([pgs~=required-here]))::after {
+  content: "*";
+  color: var(--color-error);
+  transform: translate(20px, 0px);
+  position: absolute;
+  font-size: 40px;
+  bottom: -8px;
+  font-weight: 600;
+  right: 0px;
+}
+[pgs~=initP] [pgs~=checkboxBackground]:is(label):has(input[type=checkbox]:required) [pgs~=required-here]::after,
+[pgs~=initP] [pgs~=checkboxBackground] label:has(input[type=checkbox]:required) [pgs~=required-here]::after {
+  position: relative;
+}
+[pgs~=initP] [pgs~=checkboxBackground] input {
+  appearance: none;
+  position: relative;
+  width: var(--checkbox-size);
+  min-width: var(--checkbox-size);
+  height: var(--checkbox-size);
+  margin-right: var(--gap-texts);
+  cursor: pointer;
+}
+[pgs~=initP] [pgs~=checkboxBackground] input::before {
+  content: "";
+  position: absolute;
+  width: var(--checkbox-size);
+  height: var(--checkbox-size);
+  outline: solid var(--color-boxDark) 0.1rem;
+  background: var(--checkbox-box-background);
+  color: var(--color-primary-soft);
+  transform: translateX(0.3rem);
+}
+[pgs~=initP] [pgs~=checkboxBackground] input::after {
+  position: absolute;
+  line-height: var(--checkbox-size);
+  text-align: center;
+  opacity: 0;
+  color: var(--checkbox-check-color);
+  transform: translateX(0.25rem);
+}
+[pgs~=initP] [pgs~=checkboxBackground] input:checked::after {
+  opacity: 1;
+}
+[pgs~=initP] [pgs~=checkboxBackground] input:focus-visible::before {
+  outline: 3px solid var(--color-link) !important;
 }
-[pgs~=initP] [pgs~=form] input[type=color]::-webkit-color-swatch {
-  border: var(--border-complete);
-  border-radius: calc(var(--border-radius-input) - 5px);
-  cursor: pointer;
+[pgs~=initP] [pgs~=checkboxBackground] input[type=checkbox]::after {
+  top: -1.7rem;
+  left: -0.5rem;
+  content: "";
+  display: inline-block;
+  width: calc(2rem + var(--checkbox-size));
+  height: calc(2rem + var(--checkbox-size));
+  background-color: var(--checkbox-check-color);
+  -webkit-mask: var(--checkbox-icon) center/contain no-repeat;
+  mask: var(--checkbox-icon) center/contain no-repeat;
 }
-[pgs~=initP] [pgs~=form] select {
-  --input-padding: 15px;
-  appearance: none;
-  border: var(--border-complete);
-  background-color: var(--color-white);
-  border-radius: var(--border-radius-input);
-  color: var(--color-text);
-  padding: var(--input-padding);
-  font-size: 1.6rem;
-  width: 100%;
-  margin-bottom: var(--gap-texts);
-  letter-spacing: 0.03em;
-  font-family: var(--font);
+[pgs~=initP] [pgs~=checkboxBackground] input[type=checkbox]::before {
+  border-radius: 0.3rem;
 }
-[pgs~=initP] [pgs~=form] select::placeholder {
-  color: var(--color-black);
-  opacity: 20%;
-  font-weight: 500;
+[pgs~=initP] [pgs~=checkboxBackground] input[type=radio]::after {
+  content: "";
+  top: 0.2rem;
+  left: 0.2rem;
+  display: inline-block;
+  width: calc(var(--checkbox-size) - 0.4rem);
+  height: calc(var(--checkbox-size) - 0.4rem);
+  background-color: var(--checkbox-check-color);
+  border-radius: 50%;
 }
-[pgs~=initP] [pgs~=form] select:hover {
-  outline: solid var(--color-primary);
+[pgs~=initP] [pgs~=checkboxBackground] input[type=radio]::before {
+  border-radius: 50%;
 }
-[pgs~=initP] [pgs~=form] select {
-  overflow: auto;
-  appearance: none;
-  cursor: pointer;
+[pgs~=initP] [pgs~=checkboxBackground] a {
+  text-decoration: underline;
+  color: var(--color-link);
 }
-[pgs~=initP] [pgs~=form] select option {
-  padding: var(--gap-texts);
-  border-radius: calc(var(--border-radius-input) - var(--input-padding));
-  background-color: transparent;
-  cursor: pointer;
+[pgs~=initP] [pgs~=checkboxBackground] {
+  color: var(--color-text);
+  padding: var(--padding-2);
+  border-radius: var(--border-radius-input);
+  align-items: center;
+  gap: var(--gap-texts);
+  background-color: var(--color-box-transparent);
 }
-[pgs~=initP] [pgs~=form] select option:checked {
-  background-color: var(--color-primary);
-  color: var(--color-whiteFixed);
-  font-weight: 600;
+[pgs~=initP] [pgs~=checkboxBackground] label {
+  margin-bottom: 0 !important;
 }
-[pgs~=initP] [pgs~=form] select option:hover {
+[pgs~=initP] [pgs~=checkboxBackground]:has(input:checked) {
   background-color: var(--color-primary-soft);
 }
-[pgs~=initP] [pgs~=form] select option:checked:hover {
-  background-color: var(--color-primary-dark);
+[pgs~=initP] [pgs~=checkboxBackground]:has(input:checked) i {
+  opacity: 1;
 }
-[pgs~=initP] [pgs~=form] button[type=submit] {
+[pgs~=initP] [pgs~=twoState] {
+  position: relative;
+  isolation: isolate;
+  --button-background-active: var(--color-primary);
+  --button-color-active: var(--color-white);
   --button-border: var(--border-complete);
   --button-size: 1.5rem;
-  --button-icon-size: 2.0rem;
+  --button-icon-size: 2rem;
   --button-padding-block: var(--button-size);
   --button-padding-left: calc(var(--button-size) * 2);
   --button-padding-right: calc(var(--button-size) * 2);
   --button-padding: var(--button-padding-block) var(--button-padding-right) var(--button-padding-block) var(--button-padding-left);
   --fa-secondary-opacity: 0.5;
   --fa-size: var(--button-icon-size);
-}
-@supports (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=form] button[type=submit] {
-    --button-color: contrast-color(color-mix(in srgb, var(--button-background) 77%, black));
-  }
-}
-@supports not (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=form] button[type=submit] {
-    --button-color: var(--color-black);
-  }
-}
-[pgs~=initP] [pgs~=form] button[type=submit] {
-  --button-background: var(--color-box);
-  color: var(--button-color);
-  background: var(--button-background);
-}
-[pgs~=initP] [pgs~=form] button[type=submit]:is(a) {
-  color: var(--button-color);
-}
-[pgs~=initP] [pgs~=form] button[type=submit] i {
-  color: var(--button-color);
-  --fa-primary-color: var(--button-color);
-  --fa-secondary-color: var(--button-color);
-}
-[pgs~=initP] [pgs~=form] button[type=submit] {
   font-family: var(--font);
   font-size: 1.6rem;
   font-weight: 600;
@@ -4835,209 +4599,197 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   width: max-content;
   margin-block: auto;
 }
-[pgs~=initP] [pgs~=form] button[type=submit]:has(i) {
+[pgs~=initP] [pgs~=twoState]:has(i) {
   --button-padding-right: calc(var(--button-size) * 2);
   --button-padding-left: calc(var(--button-size) * 1.5);
 }
-[pgs~=initP] [pgs~=form] button[type=submit][pgs-option~=buttonReverse]:has(i) {
+[pgs~=initP] [pgs~=twoState][pgs-option~=buttonReverse]:has(i) {
   --button-padding-right: calc(var(--button-size) * 1.5);
   --button-padding-left: calc(var(--button-size) * 2);
 }
-[pgs~=initP] [pgs~=form] button[type=submit] {
+[pgs~=initP] [pgs~=twoState] {
   transition: all 200ms;
   cursor: pointer;
   text-decoration: none;
+  --hover-shadow-color: var(--color-primary);
+  --hover-shadow-displacement: 0.25rem;
 }
 @media (hover: hover) and (pointer: fine) {
-  [pgs~=initP] [pgs~=form] button[type=submit]:not(:disabled):focus-visible, [pgs~=initP] [pgs~=form] button[type=submit]:not(:disabled):hover {
-    box-shadow: -0.25rem 0.25rem 0px var(--color-black);
-    transform: translate(0.25rem, -0.25rem);
-  }
-  @supports (color: contrast-color(red)) {
-    [pgs~=initP] [pgs~=form] button[type=submit]:not(:disabled):focus-visible, [pgs~=initP] [pgs~=form] button[type=submit]:not(:disabled):hover {
-      --button-color-hover: contrast-color(color-mix(in srgb, var(--button-background-hover) 77%, black));
-    }
-  }
-  @supports not (color: contrast-color(red)) {
-    [pgs~=initP] [pgs~=form] button[type=submit]:not(:disabled):focus-visible, [pgs~=initP] [pgs~=form] button[type=submit]:not(:disabled):hover {
-      --button-color-hover: var(--color-black);
-    }
-  }
-  [pgs~=initP] [pgs~=form] button[type=submit]:not(:disabled):focus-visible, [pgs~=initP] [pgs~=form] button[type=submit]:not(:disabled):hover {
-    --button-background-hover: var(--color-primary-soft);
-    color: var(--button-color-hover);
-    background: var(--button-background-hover);
-  }
-  [pgs~=initP] [pgs~=form] button[type=submit]:not(:disabled):focus-visible:is(a), [pgs~=initP] [pgs~=form] button[type=submit]:not(:disabled):hover:is(a) {
-    color: var(--button-color-hover);
-  }
-  [pgs~=initP] [pgs~=form] button[type=submit]:not(:disabled):focus-visible i, [pgs~=initP] [pgs~=form] button[type=submit]:not(:disabled):hover i {
-    color: var(--button-color-hover);
-    --fa-primary-color: var(--button-color-hover);
-    --fa-secondary-color: var(--button-color-hover);
-  }
-  [pgs~=initP] [pgs~=form] button[type=submit]:not(:disabled):focus-visible, [pgs~=initP] [pgs~=form] button[type=submit]:not(:disabled):hover {
-    outline-color: transparent;
+  [pgs~=initP] [pgs~=twoState]:not(:disabled):not([pgs-option~=buttonStyle-2]):focus-visible, [pgs~=initP] [pgs~=twoState]:not(:disabled):not([pgs-option~=buttonStyle-2]):hover {
+    box-shadow: 0px 0px 38px 0px var(--hover-shadow-color);
+    --hover-color: var(--color-white);
+    --hover-background: var(--color-primary-strong);
+    color: var(--hover-color);
+    --fa-primary-color: var(--hover-color);
+    --fa-secondary-color: var(--hover-color);
+    background: var(--hover-background);
   }
-  [pgs~=initP] [pgs~=form] button[type=submit]:not(:disabled):focus-visible i, [pgs~=initP] [pgs~=form] button[type=submit]:not(:disabled):hover i {
-    --fa-secondary-opacity: 0.5;
+  [pgs~=initP] [pgs~=twoState]:not(:disabled):not([pgs-option~=buttonStyle-2]):focus-visible :is(h1, h2, h3, h4, h5, h6, p), [pgs~=initP] [pgs~=twoState]:not(:disabled):not([pgs-option~=buttonStyle-2]):hover :is(h1, h2, h3, h4, h5, h6, p) {
+    color: var(--hover-color);
   }
 }
-[pgs~=initP] [pgs~=form] button[type=submit]:is(a):hover {
-  text-decoration: none;
-}
-[pgs~=initP] [pgs~=form] button[type=submit]:active {
-  box-shadow: 0 0 0 var(--color-black);
-  transform: translate(0, 0);
-}
-@supports (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=form] button[type=submit] {
-    --button-color-strong: contrast-color(color-mix(in srgb, var(--button-background-strong) 77%, black));
+@media (hover: hover) and (pointer: fine) {
+  [pgs~=initP] [pgs~=twoState]:not(:disabled)[pgs-option~=buttonStyle-2]:focus-visible, [pgs~=initP] [pgs~=twoState]:not(:disabled)[pgs-option~=buttonStyle-2]:hover {
+    box-shadow: calc(var(--hover-shadow-displacement) * -1) var(--hover-shadow-displacement) 0 var(--color-black);
+    transform: translate(var(--hover-shadow-displacement), calc(var(--hover-shadow-displacement) * -1));
+    outline-color: transparent;
+    --hover-color: var(--color-white);
+    --hover-background: var(--color-primary-strong);
+    color: var(--hover-color);
+    --fa-primary-color: var(--hover-color);
+    --fa-secondary-color: var(--hover-color);
+    background: var(--hover-background);
   }
-}
-@supports not (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=form] button[type=submit] {
-    --button-color-strong: var(--color-whiteFixed);
+  [pgs~=initP] [pgs~=twoState]:not(:disabled)[pgs-option~=buttonStyle-2]:focus-visible :is(h1, h2, h3, h4, h5, h6, p), [pgs~=initP] [pgs~=twoState]:not(:disabled)[pgs-option~=buttonStyle-2]:hover :is(h1, h2, h3, h4, h5, h6, p) {
+    color: var(--hover-color);
   }
 }
-[pgs~=initP] [pgs~=form] button[type=submit] {
-  --button-background-strong: var(--color-primary);
-  color: var(--button-color-strong);
-  background: var(--button-background-strong);
-}
-[pgs~=initP] [pgs~=form] button[type=submit]:is(a) {
-  color: var(--button-color-strong);
-}
-[pgs~=initP] [pgs~=form] button[type=submit] i {
-  color: var(--button-color-strong);
-  --fa-primary-color: var(--button-color-strong);
-  --fa-secondary-color: var(--button-color-strong);
+[pgs~=initP] [pgs~=twoState]:not(:disabled):hover {
+  --fa-secondary-opacity: 0.5;
+  --hover-color: var(--color-whiteFixed);
+  color: var(--hover-color);
+  --fa-primary-color: var(--hover-color);
+  --fa-secondary-color: var(--hover-color);
 }
-@supports (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=form] button[type=submit][aria-current=page]:not(:hover, :focus-visible) {
-    --button-color-current: contrast-color(color-mix(in srgb, var(--button-background-current) 77%, black));
-  }
+[pgs~=initP] [pgs~=twoState]:is(a):hover {
+  text-decoration: none;
 }
-@supports not (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=form] button[type=submit][aria-current=page]:not(:hover, :focus-visible) {
-    --button-color-current: var(--color-whiteFixed);
-  }
+[pgs~=initP] [pgs~=twoState] {
+  --button-color: var(--color-black);
+  --button-color-strong: var(--color-whiteFixed);
+  --button-color-current: var(--color-whiteFixed);
+  --button-background: var(--color-box);
+  --button-background-strong: var(--color-primary);
+  --button-background-current: var(--color-primary);
+  color: var(--button-color);
+  background: var(--button-background);
+  --fa-primary-color: var(--button-color);
+  --fa-secondary-color: var(--button-color);
 }
-[pgs~=initP] [pgs~=form] button[type=submit][aria-current=page]:not(:hover, :focus-visible) {
+[pgs~=initP] [pgs~=twoState][aria-current=page]:not(:hover, :focus-visible) {
+  --button-color: var(--color-black);
+  --button-color-strong: var(--color-whiteFixed);
+  --button-color-current: var(--color-whiteFixed);
+  --button-background: var(--color-box);
+  --button-background-strong: var(--color-primary);
   --button-background-current: var(--color-primary);
   color: var(--button-color-current);
   background: var(--button-background-current);
-}
-[pgs~=initP] [pgs~=form] button[type=submit][aria-current=page]:not(:hover, :focus-visible):is(a) {
-  color: var(--button-color-current);
-}
-[pgs~=initP] [pgs~=form] button[type=submit][aria-current=page]:not(:hover, :focus-visible) i {
-  color: var(--button-color-current);
   --fa-primary-color: var(--button-color-current);
   --fa-secondary-color: var(--button-color-current);
 }
-[pgs~=initP] [pgs~=form] button[type=submit]:disabled {
+[pgs~=initP] [pgs~=twoState]:disabled {
   opacity: 0.2;
   cursor: not-allowed;
 }
-[pgs~=initP] [pgs~=form] fieldset {
-  border: unset;
+[pgs~=initP] [pgs~=twoState] {
+  flex-wrap: wrap;
+  display: flex !important;
+  cursor: pointer;
 }
-[pgs~=initP] [pgs~=form] fieldset[required] legend {
-  position: relative;
+[pgs~=initP] [pgs~=twoState] i {
+  opacity: 0.4;
+  min-width: 1.4rem;
+  transition: 300ms;
 }
-[pgs~=initP] [pgs~=form] fieldset[required] legend [pgs~=required-here]::after, [pgs~=initP] [pgs~=form] fieldset[required] legend:not(:has([pgs~=required-here]))::after {
-  content: "*";
-  color: var(--color-error);
-  transform: translate(20px, 0px);
-  position: absolute;
-  font-size: 40px;
-  bottom: -8px;
-  font-weight: 600;
-  right: 0px;
+[pgs~=initP] [pgs~=twoState]:hover i {
+  opacity: 1;
 }
-[pgs~=initP] [pgs~=form] fieldset[required] legend [pgs~=required-here]::after {
-  position: relative;
+[pgs~=initP] [pgs~=twoState]:has(input:checked) {
+  --button-background: var(--button-background-active);
+  --button-color: var(--button-color-active);
 }
-[pgs~=initP] [pgs~=form] label:has(+ input[required]:not([type=checkbox], [type=radio]), + select[required], + textarea[required]),
-[pgs~=initP] [pgs~=form] fieldset:has(input[type=checkbox][required], input[type=radio][required]) legend {
-  position: relative;
+@supports not (color: contrast-color(red)) {
+  [pgs~=initP] [pgs~=twoState]:has(input:checked) {
+    --button-color: var(--button-color-active);
+  }
 }
-[pgs~=initP] [pgs~=form] label:has(+ input[required]:not([type=checkbox], [type=radio]), + select[required], + textarea[required]) [pgs~=required-here]::after, [pgs~=initP] [pgs~=form] label:has(+ input[required]:not([type=checkbox], [type=radio]), + select[required], + textarea[required]):not(:has([pgs~=required-here]))::after,
-[pgs~=initP] [pgs~=form] fieldset:has(input[type=checkbox][required], input[type=radio][required]) legend [pgs~=required-here]::after,
-[pgs~=initP] [pgs~=form] fieldset:has(input[type=checkbox][required], input[type=radio][required]) legend:not(:has([pgs~=required-here]))::after {
-  content: "*";
-  color: var(--color-error);
-  transform: translate(20px, 0px);
+[pgs~=initP] [pgs~=twoState]:has(input:checked) i {
+  --fa-secondary-opacity: 0.6;
+  opacity: 1;
+}
+[pgs~=initP] [pgs~=twoState] input {
+  opacity: 0;
+  z-index: -1;
   position: absolute;
-  font-size: 40px;
-  bottom: -8px;
-  font-weight: 600;
-  right: 0px;
+  appearance: none;
 }
-[pgs~=initP] [pgs~=form] label:has(+ input[required]:not([type=checkbox], [type=radio]), + select[required], + textarea[required]) [pgs~=required-here]::after,
-[pgs~=initP] [pgs~=form] fieldset:has(input[type=checkbox][required], input[type=radio][required]) legend [pgs~=required-here]::after {
+[pgs~=initP] [pgs~=toggle] {
+  --toggle-size: var(--border-radius-input);
+  --toggle-color-thumb: var(--color-white);
+  --toggle-color-rail: #cbcbcb;
+  --toggle-color-rail-checked: var(--color-primary);
+  isolation: isolate;
+  display: flex;
+  gap: var(--gap-texts);
+  margin-bottom: var(--gap-texts);
+}
+[pgs~=initP] [pgs~=toggle] label {
+  cursor: pointer;
+}
+[pgs~=initP] [pgs~=toggle] input {
   position: relative;
+  appearance: none;
+  margin-left: auto;
+  cursor: pointer;
+  min-width: calc(var(--toggle-size) * 2);
 }
-[pgs~=initP] [pgs~=form] input[disabled],
-[pgs~=initP] [pgs~=form] input[disabled]:is([type=checkbox], [type=radio]) + label,
-[pgs~=initP] [pgs~=form] label:has(+ input[disabled]:not([type=checkbox], [type=radio])),
-[pgs~=initP] [pgs~=form] label:has(+ :is(textarea[disabled], select[disabled])) {
-  opacity: 0.5;
-  cursor: not-allowed !important;
+[pgs~=initP] [pgs~=toggle] input::after, [pgs~=initP] [pgs~=toggle] input::before {
+  content: "";
+  position: relative;
+  transform: unset;
+  top: unset;
+  margin-left: auto;
+  transition: all 250ms;
+  display: block;
+  border-radius: var(--border-radius-input);
+  order: 1;
 }
-[pgs~=initP] [pgs~=form] input[type=password]::-ms-reveal,
-[pgs~=initP] [pgs~=form] input[type=password]::-ms-clear,
-[pgs~=initP] [pgs~=form] input[type=password]::-webkit-textfield-decoration-container,
-[pgs~=initP] [pgs~=form] input[type=password]::-webkit-credentials-auto-fill-button,
-[pgs~=initP] [pgs~=form] input[type=password]::-webkit-password-toggle {
-  display: none;
+[pgs~=initP] [pgs~=toggle] input::before {
+  background: var(--toggle-color-rail);
+  width: calc(var(--toggle-size) * 2);
+  min-width: calc(var(--toggle-size) * 2);
+  height: var(--toggle-size);
+  flex-shrink: 2;
 }
-[pgs~=initP] [pgs~=form] input[type=file] {
-  width: 100%;
-  background-color: var(--color-white);
-  padding: var(--gap-texts);
-  border-radius: calc(var(--border-radius-input) + var(--gap-texts));
+[pgs~=initP] [pgs~=toggle] input::after {
+  content: "";
+  opacity: 1;
+  background-color: var(--toggle-color-thumb);
+  height: calc(var(--toggle-size) - 4px);
+  width: calc(var(--toggle-size) + 2px);
+  top: 2px;
+  left: 2px;
+  z-index: 1;
+  position: absolute;
 }
-[pgs~=initP] [pgs~=form] input[type=file]::file-selector-button {
-  --button-background: var(--color-box);
-  --button-color: var(--color-black);
-  width: 40%;
-  margin-bottom: var(--gap-texts);
-  margin-right: var(--gap-texts);
-  border: none;
-  outline: var(--border-complete);
-  border-radius: var(--border-radius-input);
-  padding: 1.5rem 3rem;
-  font-family: var(--font);
-  font-size: 1.6rem;
-  font-weight: 600;
-  color: var(--button-color);
-  background: var(--button-background);
-  cursor: pointer;
-  transition: all 200ms;
+[pgs~=initP] [pgs~=toggle] input:hover::after {
+  scale: 1.4;
+  background-color: color-mix(in srgb, var(--toggle-color-thumb) 25%, transparent 75%);
+  outline: 1.5px solid var(--color-primary);
 }
-[pgs~=initP] [pgs~=form] input[type=file]::file-selector-button:hover {
-  background-color: var(--color-primary);
-  color: var(--color-white);
+[pgs~=initP] [pgs~=toggle] input:checked::before {
+  background: var(--color-primary);
 }
-[pgs~=initP] [pgs~=formError][data-form-status=error] [data-form-field-status=error]:not([type=checkbox], [type=radio]) {
-  outline: solid 3px var(--color-error) !important;
+[pgs~=initP] [pgs~=toggle] input:checked::after {
+  left: unset;
+  right: 2px;
 }
-[pgs~=initP] [pgs~=formError][data-form-status=error] [data-form-field-status=error]:not([type=checkbox], [type=radio])::before {
-  content: "Questo campo è obbligatorio";
-  color: var(--color-error);
-  font-weight: 500;
-  font-size: 1.7rem;
+[pgs~=initP] [pgs~=toggle] input:focus-visible::after {
+  outline: 3px solid var(--color-link) !important;
 }
-[pgs~=initP] [pgs~=formError][data-form-status=error] label:has(+ [data-form-field-status=error], [data-form-field-status=error]):has(input[type=checkbox]) {
-  background-color: var(--color-error) !important;
-  padding: 6px;
-  margin-left: -6px;
-  border-radius: 10px;
+[pgs~=initP] [pgs~=chips] {
+  display: flex;
+  gap: 0.1rem;
+  padding: 0.4rem;
+  outline: var(--border-complete);
+  width: fit-content;
+  border-radius: var(--border-radius-input);
+  background-color: var(--color-box-transparent);
 }
-[pgs~=initP] [pgs~=formError][data-form-status=error] fieldset:has(input[type=radio][data-form-field-status=error]) legend {
-  --label-background: var(--color-error) !important;
+[pgs~=initP] [pgs~=chips] label {
+  outline: unset;
+  --button-background: var(--color-box-transparent);
 }
 [pgs~=initP] [pgs~=menu] ul {
   display: flex;
@@ -5052,38 +4804,13 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   min-width: fit-content;
   --button-border: var(--border-complete);
   --button-size: 1.5rem;
-  --button-icon-size: 2.0rem;
+  --button-icon-size: 2rem;
   --button-padding-block: var(--button-size);
   --button-padding-left: calc(var(--button-size) * 2);
   --button-padding-right: calc(var(--button-size) * 2);
   --button-padding: var(--button-padding-block) var(--button-padding-right) var(--button-padding-block) var(--button-padding-left);
   --fa-secondary-opacity: 0.5;
   --fa-size: var(--button-icon-size);
-}
-@supports (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=menu] ul > li > a {
-    --button-color: contrast-color(color-mix(in srgb, var(--button-background) 77%, black));
-  }
-}
-@supports not (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=menu] ul > li > a {
-    --button-color: var(--color-black);
-  }
-}
-[pgs~=initP] [pgs~=menu] ul > li > a {
-  --button-background: var(--color-box);
-  color: var(--button-color);
-  background: var(--button-background);
-}
-[pgs~=initP] [pgs~=menu] ul > li > a:is(a) {
-  color: var(--button-color);
-}
-[pgs~=initP] [pgs~=menu] ul > li > a i {
-  color: var(--button-color);
-  --fa-primary-color: var(--button-color);
-  --fa-secondary-color: var(--button-color);
-}
-[pgs~=initP] [pgs~=menu] ul > li > a {
   font-family: var(--font);
   font-size: 1.6rem;
   font-weight: 600;
@@ -5114,69 +4841,70 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   transition: all 200ms;
   cursor: pointer;
   text-decoration: none;
+  --hover-shadow-color: var(--color-primary);
+  --hover-shadow-displacement: 0.25rem;
+}
+@media (hover: hover) and (pointer: fine) {
+  [pgs~=initP] [pgs~=menu] ul > li > a:not(:disabled):not([pgs-option~=buttonStyle-2]):focus-visible, [pgs~=initP] [pgs~=menu] ul > li > a:not(:disabled):not([pgs-option~=buttonStyle-2]):hover {
+    box-shadow: 0px 0px 38px 0px var(--hover-shadow-color);
+    --hover-color: var(--color-white);
+    --hover-background: var(--color-primary-strong);
+    color: var(--hover-color);
+    --fa-primary-color: var(--hover-color);
+    --fa-secondary-color: var(--hover-color);
+    background: var(--hover-background);
+  }
+  [pgs~=initP] [pgs~=menu] ul > li > a:not(:disabled):not([pgs-option~=buttonStyle-2]):focus-visible :is(h1, h2, h3, h4, h5, h6, p), [pgs~=initP] [pgs~=menu] ul > li > a:not(:disabled):not([pgs-option~=buttonStyle-2]):hover :is(h1, h2, h3, h4, h5, h6, p) {
+    color: var(--hover-color);
+  }
 }
 @media (hover: hover) and (pointer: fine) {
-  [pgs~=initP] [pgs~=menu] ul > li > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=menu] ul > li > a:not(:disabled):hover {
-    box-shadow: -0.25rem 0.25rem 0px var(--color-black);
-    transform: translate(0.25rem, -0.25rem);
-  }
-  @supports (color: contrast-color(red)) {
-    [pgs~=initP] [pgs~=menu] ul > li > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=menu] ul > li > a:not(:disabled):hover {
-      --button-color-hover: contrast-color(color-mix(in srgb, var(--button-background-hover) 77%, black));
-    }
-  }
-  @supports not (color: contrast-color(red)) {
-    [pgs~=initP] [pgs~=menu] ul > li > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=menu] ul > li > a:not(:disabled):hover {
-      --button-color-hover: var(--color-black);
-    }
-  }
-  [pgs~=initP] [pgs~=menu] ul > li > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=menu] ul > li > a:not(:disabled):hover {
-    --button-background-hover: var(--color-primary-soft);
-    color: var(--button-color-hover);
-    background: var(--button-background-hover);
-  }
-  [pgs~=initP] [pgs~=menu] ul > li > a:not(:disabled):focus-visible:is(a), [pgs~=initP] [pgs~=menu] ul > li > a:not(:disabled):hover:is(a) {
-    color: var(--button-color-hover);
-  }
-  [pgs~=initP] [pgs~=menu] ul > li > a:not(:disabled):focus-visible i, [pgs~=initP] [pgs~=menu] ul > li > a:not(:disabled):hover i {
-    color: var(--button-color-hover);
-    --fa-primary-color: var(--button-color-hover);
-    --fa-secondary-color: var(--button-color-hover);
-  }
-  [pgs~=initP] [pgs~=menu] ul > li > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=menu] ul > li > a:not(:disabled):hover {
+  [pgs~=initP] [pgs~=menu] ul > li > a:not(:disabled)[pgs-option~=buttonStyle-2]:focus-visible, [pgs~=initP] [pgs~=menu] ul > li > a:not(:disabled)[pgs-option~=buttonStyle-2]:hover {
+    box-shadow: calc(var(--hover-shadow-displacement) * -1) var(--hover-shadow-displacement) 0 var(--color-black);
+    transform: translate(var(--hover-shadow-displacement), calc(var(--hover-shadow-displacement) * -1));
     outline-color: transparent;
+    --hover-color: var(--color-white);
+    --hover-background: var(--color-primary-strong);
+    color: var(--hover-color);
+    --fa-primary-color: var(--hover-color);
+    --fa-secondary-color: var(--hover-color);
+    background: var(--hover-background);
   }
-  [pgs~=initP] [pgs~=menu] ul > li > a:not(:disabled):focus-visible i, [pgs~=initP] [pgs~=menu] ul > li > a:not(:disabled):hover i {
-    --fa-secondary-opacity: 0.5;
+  [pgs~=initP] [pgs~=menu] ul > li > a:not(:disabled)[pgs-option~=buttonStyle-2]:focus-visible :is(h1, h2, h3, h4, h5, h6, p), [pgs~=initP] [pgs~=menu] ul > li > a:not(:disabled)[pgs-option~=buttonStyle-2]:hover :is(h1, h2, h3, h4, h5, h6, p) {
+    color: var(--hover-color);
   }
 }
+[pgs~=initP] [pgs~=menu] ul > li > a:not(:disabled):hover {
+  --fa-secondary-opacity: 0.5;
+  --hover-color: var(--color-whiteFixed);
+  color: var(--hover-color);
+  --fa-primary-color: var(--hover-color);
+  --fa-secondary-color: var(--hover-color);
+}
 [pgs~=initP] [pgs~=menu] ul > li > a:is(a):hover {
   text-decoration: none;
 }
-[pgs~=initP] [pgs~=menu] ul > li > a:active {
-  box-shadow: 0 0 0 var(--color-black);
-  transform: translate(0, 0);
-}
-@supports (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=menu] ul > li > a[aria-current=page]:not(:hover, :focus-visible) {
-    --button-color-current: contrast-color(color-mix(in srgb, var(--button-background-current) 77%, black));
-  }
-}
-@supports not (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=menu] ul > li > a[aria-current=page]:not(:hover, :focus-visible) {
-    --button-color-current: var(--color-whiteFixed);
-  }
+[pgs~=initP] [pgs~=menu] ul > li > a {
+  --button-color: var(--color-black);
+  --button-color-strong: var(--color-whiteFixed);
+  --button-color-current: var(--color-whiteFixed);
+  --button-background: var(--color-box);
+  --button-background-strong: var(--color-primary);
+  --button-background-current: var(--color-primary);
+  color: var(--button-color);
+  background: var(--button-background);
+  --fa-primary-color: var(--button-color);
+  --fa-secondary-color: var(--button-color);
 }
 [pgs~=initP] [pgs~=menu] ul > li > a[aria-current=page]:not(:hover, :focus-visible) {
+  --button-color: var(--color-black);
+  --button-color-strong: var(--color-whiteFixed);
+  --button-color-current: var(--color-whiteFixed);
+  --button-background: var(--color-box);
+  --button-background-strong: var(--color-primary);
   --button-background-current: var(--color-primary);
   color: var(--button-color-current);
   background: var(--button-background-current);
-}
-[pgs~=initP] [pgs~=menu] ul > li > a[aria-current=page]:not(:hover, :focus-visible):is(a) {
-  color: var(--button-color-current);
-}
-[pgs~=initP] [pgs~=menu] ul > li > a[aria-current=page]:not(:hover, :focus-visible) i {
-  color: var(--button-color-current);
   --fa-primary-color: var(--button-color-current);
   --fa-secondary-color: var(--button-color-current);
 }
@@ -5274,38 +5002,13 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
 [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]) {
   --button-border: var(--border-complete);
   --button-size: 1.5rem;
-  --button-icon-size: 2.0rem;
+  --button-icon-size: 2rem;
   --button-padding-block: var(--button-size);
   --button-padding-left: calc(var(--button-size) * 2);
   --button-padding-right: calc(var(--button-size) * 2);
   --button-padding: var(--button-padding-block) var(--button-padding-right) var(--button-padding-block) var(--button-padding-left);
   --fa-secondary-opacity: 0.5;
   --fa-size: var(--button-icon-size);
-}
-@supports (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]) {
-    --button-color: contrast-color(color-mix(in srgb, var(--button-background) 77%, black));
-  }
-}
-@supports not (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]) {
-    --button-color: var(--color-black);
-  }
-}
-[pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]) {
-  --button-background: var(--color-box);
-  color: var(--button-color);
-  background: var(--button-background);
-}
-[pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):is(a) {
-  color: var(--button-color);
-}
-[pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]) i {
-  color: var(--button-color);
-  --fa-primary-color: var(--button-color);
-  --fa-secondary-color: var(--button-color);
-}
-[pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]) {
   font-family: var(--font);
   font-size: 1.6rem;
   font-weight: 600;
@@ -5336,69 +5039,70 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   transition: all 200ms;
   cursor: pointer;
   text-decoration: none;
+  --hover-shadow-color: var(--color-primary);
+  --hover-shadow-displacement: 0.25rem;
+}
+@media (hover: hover) and (pointer: fine) {
+  [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):not([pgs-option~=buttonStyle-2]):focus-visible, [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):not([pgs-option~=buttonStyle-2]):hover {
+    box-shadow: 0px 0px 38px 0px var(--hover-shadow-color);
+    --hover-color: var(--color-white);
+    --hover-background: var(--color-primary-strong);
+    color: var(--hover-color);
+    --fa-primary-color: var(--hover-color);
+    --fa-secondary-color: var(--hover-color);
+    background: var(--hover-background);
+  }
+  [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):not([pgs-option~=buttonStyle-2]):focus-visible :is(h1, h2, h3, h4, h5, h6, p), [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):not([pgs-option~=buttonStyle-2]):hover :is(h1, h2, h3, h4, h5, h6, p) {
+    color: var(--hover-color);
+  }
 }
 @media (hover: hover) and (pointer: fine) {
-  [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):focus-visible, [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):hover {
-    box-shadow: -0.25rem 0.25rem 0px var(--color-black);
-    transform: translate(0.25rem, -0.25rem);
-  }
-  @supports (color: contrast-color(red)) {
-    [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):focus-visible, [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):hover {
-      --button-color-hover: contrast-color(color-mix(in srgb, var(--button-background-hover) 77%, black));
-    }
-  }
-  @supports not (color: contrast-color(red)) {
-    [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):focus-visible, [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):hover {
-      --button-color-hover: var(--color-black);
-    }
-  }
-  [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):focus-visible, [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):hover {
-    --button-background-hover: var(--color-primary-soft);
-    color: var(--button-color-hover);
-    background: var(--button-background-hover);
-  }
-  [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):focus-visible:is(a), [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):hover:is(a) {
-    color: var(--button-color-hover);
-  }
-  [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):focus-visible i, [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):hover i {
-    color: var(--button-color-hover);
-    --fa-primary-color: var(--button-color-hover);
-    --fa-secondary-color: var(--button-color-hover);
-  }
-  [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):focus-visible, [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):hover {
+  [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled)[pgs-option~=buttonStyle-2]:focus-visible, [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled)[pgs-option~=buttonStyle-2]:hover {
+    box-shadow: calc(var(--hover-shadow-displacement) * -1) var(--hover-shadow-displacement) 0 var(--color-black);
+    transform: translate(var(--hover-shadow-displacement), calc(var(--hover-shadow-displacement) * -1));
     outline-color: transparent;
+    --hover-color: var(--color-white);
+    --hover-background: var(--color-primary-strong);
+    color: var(--hover-color);
+    --fa-primary-color: var(--hover-color);
+    --fa-secondary-color: var(--hover-color);
+    background: var(--hover-background);
   }
-  [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):focus-visible i, [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):hover i {
-    --fa-secondary-opacity: 0.5;
+  [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled)[pgs-option~=buttonStyle-2]:focus-visible :is(h1, h2, h3, h4, h5, h6, p), [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled)[pgs-option~=buttonStyle-2]:hover :is(h1, h2, h3, h4, h5, h6, p) {
+    color: var(--hover-color);
   }
 }
+[pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):hover {
+  --fa-secondary-opacity: 0.5;
+  --hover-color: var(--color-whiteFixed);
+  color: var(--hover-color);
+  --fa-primary-color: var(--hover-color);
+  --fa-secondary-color: var(--hover-color);
+}
 [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):is(a):hover {
   text-decoration: none;
 }
-[pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):active {
-  box-shadow: 0 0 0 var(--color-black);
-  transform: translate(0, 0);
-}
-@supports (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open])[aria-current=page]:not(:hover, :focus-visible) {
-    --button-color-current: contrast-color(color-mix(in srgb, var(--button-background-current) 77%, black));
-  }
-}
-@supports not (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open])[aria-current=page]:not(:hover, :focus-visible) {
-    --button-color-current: var(--color-whiteFixed);
-  }
+[pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]) {
+  --button-color: var(--color-black);
+  --button-color-strong: var(--color-whiteFixed);
+  --button-color-current: var(--color-whiteFixed);
+  --button-background: var(--color-box);
+  --button-background-strong: var(--color-primary);
+  --button-background-current: var(--color-primary);
+  color: var(--button-color);
+  background: var(--button-background);
+  --fa-primary-color: var(--button-color);
+  --fa-secondary-color: var(--button-color);
 }
 [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open])[aria-current=page]:not(:hover, :focus-visible) {
+  --button-color: var(--color-black);
+  --button-color-strong: var(--color-whiteFixed);
+  --button-color-current: var(--color-whiteFixed);
+  --button-background: var(--color-box);
+  --button-background-strong: var(--color-primary);
   --button-background-current: var(--color-primary);
   color: var(--button-color-current);
   background: var(--button-background-current);
-}
-[pgs~=initP] [pgs~=accordion]:not([pgs-state~=open])[aria-current=page]:not(:hover, :focus-visible):is(a) {
-  color: var(--button-color-current);
-}
-[pgs~=initP] [pgs~=accordion]:not([pgs-state~=open])[aria-current=page]:not(:hover, :focus-visible) i {
-  color: var(--button-color-current);
   --fa-primary-color: var(--button-color-current);
   --fa-secondary-color: var(--button-color-current);
 }
@@ -5407,7 +5111,6 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   cursor: not-allowed;
 }
 [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]) {
-  --button-background: var(--color-box);
   --button-size: var(--padding-2);
 }
 [pgs~=initP] [pgs~=accordion] [pgs~=accordion-button] {
@@ -5459,38 +5162,13 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
 [pgs~=initP] [pgs~=accordion][pgs-state~=open] {
   --button-border: var(--border-complete);
   --button-size: 1.5rem;
-  --button-icon-size: 2.0rem;
+  --button-icon-size: 2rem;
   --button-padding-block: var(--button-size);
   --button-padding-left: calc(var(--button-size) * 2);
   --button-padding-right: calc(var(--button-size) * 2);
   --button-padding: var(--button-padding-block) var(--button-padding-right) var(--button-padding-block) var(--button-padding-left);
   --fa-secondary-opacity: 0.5;
   --fa-size: var(--button-icon-size);
-}
-@supports (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=accordion][pgs-state~=open] {
-    --button-color: contrast-color(color-mix(in srgb, var(--button-background) 77%, black));
-  }
-}
-@supports not (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=accordion][pgs-state~=open] {
-    --button-color: var(--color-black);
-  }
-}
-[pgs~=initP] [pgs~=accordion][pgs-state~=open] {
-  --button-background: var(--color-box);
-  color: var(--button-color);
-  background: var(--button-background);
-}
-[pgs~=initP] [pgs~=accordion][pgs-state~=open]:is(a) {
-  color: var(--button-color);
-}
-[pgs~=initP] [pgs~=accordion][pgs-state~=open] i {
-  color: var(--button-color);
-  --fa-primary-color: var(--button-color);
-  --fa-secondary-color: var(--button-color);
-}
-[pgs~=initP] [pgs~=accordion][pgs-state~=open] {
   font-family: var(--font);
   font-size: 1.6rem;
   font-weight: 600;
@@ -5520,27 +5198,26 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
 [pgs~=initP] [pgs~=accordion][pgs-state~=open] {
   transition: all 200ms;
   cursor: inherit;
-}
-@supports (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=accordion][pgs-state~=open][aria-current=page]:not(:hover, :focus-visible) {
-    --button-color-current: contrast-color(color-mix(in srgb, var(--button-background-current) 77%, black));
-  }
-}
-@supports not (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=accordion][pgs-state~=open][aria-current=page]:not(:hover, :focus-visible) {
-    --button-color-current: var(--color-whiteFixed);
-  }
+  --button-color: var(--color-black);
+  --button-color-strong: var(--color-whiteFixed);
+  --button-color-current: var(--color-whiteFixed);
+  --button-background: var(--color-box);
+  --button-background-strong: var(--color-primary);
+  --button-background-current: var(--color-primary);
+  color: var(--button-color);
+  background: var(--button-background);
+  --fa-primary-color: var(--button-color);
+  --fa-secondary-color: var(--button-color);
 }
 [pgs~=initP] [pgs~=accordion][pgs-state~=open][aria-current=page]:not(:hover, :focus-visible) {
+  --button-color: var(--color-black);
+  --button-color-strong: var(--color-whiteFixed);
+  --button-color-current: var(--color-whiteFixed);
+  --button-background: var(--color-box);
+  --button-background-strong: var(--color-primary);
   --button-background-current: var(--color-primary);
   color: var(--button-color-current);
   background: var(--button-background-current);
-}
-[pgs~=initP] [pgs~=accordion][pgs-state~=open][aria-current=page]:not(:hover, :focus-visible):is(a) {
-  color: var(--button-color-current);
-}
-[pgs~=initP] [pgs~=accordion][pgs-state~=open][aria-current=page]:not(:hover, :focus-visible) i {
-  color: var(--button-color-current);
   --fa-primary-color: var(--button-color-current);
   --fa-secondary-color: var(--button-color-current);
 }
@@ -5549,7 +5226,6 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   cursor: not-allowed;
 }
 [pgs~=initP] [pgs~=accordion][pgs-state~=open] {
-  --button-background: var(--color-box);
   --button-size: var(--padding-2);
   margin-top: var(--padding);
 }
@@ -5653,6 +5329,8 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   --modal-backdrop: var(--backdrop);
   --modal-background: var(--color-box);
   --modal-color: var(--color-black);
+  --modal-padding: var(--padding);
+  --modal-borderRadius: var(--border-radius);
   border: none;
   min-width: 100%;
   min-height: 100svh;
@@ -5687,12 +5365,12 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   container-type: inline-size;
   background: var(--modal-background);
   color: var(--modal-color);
-  border-radius: var(--border-radius);
+  border-radius: var(--modal-borderRadius);
   position: relative;
   gap: 0;
 }
 [pgs~=initP] dialog[pgs~=modal-dialog] [pgs~=modal-dialog-content] > * {
-  padding: var(--padding);
+  padding: var(--modal-padding);
 }
 [pgs~=initP] dialog[pgs~=modal-dialog] [pgs~=modal-dialog-content] [pgs~=modal-dialog-content-header] {
   display: flex;
@@ -5701,7 +5379,7 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   flex-wrap: nowrap;
   padding-bottom: calc(var(--padding) / 2);
   border-bottom: var(--border-complete);
-  border-radius: var(--border-radius) var(--border-radius) 0 0;
+  border-radius: var(--modal-borderRadius) var(--modal-borderRadius) 0 0;
   z-index: 1;
 }
 [pgs~=initP] dialog[pgs~=modal-dialog] [pgs~=modal-dialog-content] [pgs~=modal-dialog-content-header] [pgs~=modal-close] {
@@ -5832,7 +5510,6 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
 [pgs~=initP] [pgs~=slides] [pgs~=slides-next] {
   position: absolute;
   z-index: 4;
-  --button-background: var(--color-box);
   top: 50%;
   translate: 0 -50%;
 }
@@ -6106,38 +5783,13 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
 [pgs~=initP] [pgs~=stepTabs] [pgs~=stepTabs-dots] [pgs~=stepTabs-dots-dot] {
   --button-border: var(--border-complete);
   --button-size: 1.5rem;
-  --button-icon-size: 2.0rem;
+  --button-icon-size: 2rem;
   --button-padding-block: var(--button-size);
   --button-padding-left: calc(var(--button-size) * 2);
   --button-padding-right: calc(var(--button-size) * 2);
   --button-padding: var(--button-padding-block) var(--button-padding-right) var(--button-padding-block) var(--button-padding-left);
   --fa-secondary-opacity: 0.5;
   --fa-size: var(--button-icon-size);
-}
-@supports (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=stepTabs] [pgs~=stepTabs-dots] [pgs~=stepTabs-dots-dot] {
-    --button-color: contrast-color(color-mix(in srgb, var(--button-background) 77%, black));
-  }
-}
-@supports not (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=stepTabs] [pgs~=stepTabs-dots] [pgs~=stepTabs-dots-dot] {
-    --button-color: var(--color-black);
-  }
-}
-[pgs~=initP] [pgs~=stepTabs] [pgs~=stepTabs-dots] [pgs~=stepTabs-dots-dot] {
-  --button-background: var(--color-box);
-  color: var(--button-color);
-  background: var(--button-background);
-}
-[pgs~=initP] [pgs~=stepTabs] [pgs~=stepTabs-dots] [pgs~=stepTabs-dots-dot]:is(a) {
-  color: var(--button-color);
-}
-[pgs~=initP] [pgs~=stepTabs] [pgs~=stepTabs-dots] [pgs~=stepTabs-dots-dot] i {
-  color: var(--button-color);
-  --fa-primary-color: var(--button-color);
-  --fa-secondary-color: var(--button-color);
-}
-[pgs~=initP] [pgs~=stepTabs] [pgs~=stepTabs-dots] [pgs~=stepTabs-dots-dot] {
   font-family: var(--font);
   font-size: 1.6rem;
   font-weight: 600;
@@ -6155,12 +5807,12 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   height: max-content;
   width: max-content;
   margin-block: auto;
+  --button-padding: var(--button-padding-block);
   flex: 0 0;
   aspect-ratio: 1;
   border-radius: 50%;
   justify-content: center;
   align-items: center;
-  --button-padding: var(--button-padding-block);
 }
 [pgs~=initP] [pgs~=stepTabs] [pgs~=stepTabs-dots] [pgs~=stepTabs-dots-dot] i {
   display: inline-grid;
@@ -6173,27 +5825,26 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
 [pgs~=initP] [pgs~=stepTabs] [pgs~=stepTabs-dots] [pgs~=stepTabs-dots-dot] {
   transition: all 200ms;
   cursor: inherit;
-}
-@supports (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=stepTabs] [pgs~=stepTabs-dots] [pgs~=stepTabs-dots-dot][aria-current=page]:not(:hover, :focus-visible) {
-    --button-color-current: contrast-color(color-mix(in srgb, var(--button-background-current) 77%, black));
-  }
-}
-@supports not (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=stepTabs] [pgs~=stepTabs-dots] [pgs~=stepTabs-dots-dot][aria-current=page]:not(:hover, :focus-visible) {
-    --button-color-current: var(--color-whiteFixed);
-  }
+  --button-color: var(--color-black);
+  --button-color-strong: var(--color-whiteFixed);
+  --button-color-current: var(--color-whiteFixed);
+  --button-background: var(--color-box);
+  --button-background-strong: var(--color-primary);
+  --button-background-current: var(--color-primary);
+  color: var(--button-color);
+  background: var(--button-background);
+  --fa-primary-color: var(--button-color);
+  --fa-secondary-color: var(--button-color);
 }
 [pgs~=initP] [pgs~=stepTabs] [pgs~=stepTabs-dots] [pgs~=stepTabs-dots-dot][aria-current=page]:not(:hover, :focus-visible) {
+  --button-color: var(--color-black);
+  --button-color-strong: var(--color-whiteFixed);
+  --button-color-current: var(--color-whiteFixed);
+  --button-background: var(--color-box);
+  --button-background-strong: var(--color-primary);
   --button-background-current: var(--color-primary);
   color: var(--button-color-current);
   background: var(--button-background-current);
-}
-[pgs~=initP] [pgs~=stepTabs] [pgs~=stepTabs-dots] [pgs~=stepTabs-dots-dot][aria-current=page]:not(:hover, :focus-visible):is(a) {
-  color: var(--button-color-current);
-}
-[pgs~=initP] [pgs~=stepTabs] [pgs~=stepTabs-dots] [pgs~=stepTabs-dots-dot][aria-current=page]:not(:hover, :focus-visible) i {
-  color: var(--button-color-current);
   --fa-primary-color: var(--button-color-current);
   --fa-secondary-color: var(--button-color-current);
 }
@@ -6346,8 +5997,7 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   border-radius: 50%;
   background: currentColor;
 }
-[pgs~=initP] [pgs~=notification],
-[pgs~=initP] [pgs~=toast] {
+[pgs~=initP] [pgs~=notification] {
   display: flex;
   flex-direction: column;
   gap: var(--gap-texts);
@@ -6357,8 +6007,7 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   isolation: isolate;
   max-height: 80vh;
 }
-[pgs~=initP] [pgs~=notification] [pgs~=notification-element],
-[pgs~=initP] [pgs~=toast] [pgs~=notification-element] {
+[pgs~=initP] [pgs~=notification] [pgs~=notification-element] {
   --notification-background: var(--color-box);
   --notification-background-timer: color-mix(in srgb, var(--color-box) 95%, var(--color-black) 5%);
   --notification-color: unset;
@@ -6383,22 +6032,18 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   position: relative;
 }
 @media (max-width: 430px) {
-  [pgs~=initP] [pgs~=notification] [pgs~=notification-element],
-  [pgs~=initP] [pgs~=toast] [pgs~=notification-element] {
+  [pgs~=initP] [pgs~=notification] [pgs~=notification-element] {
     padding: calc(var(--padding) / 1.5);
   }
 }
-[pgs~=initP] [pgs~=notification] [pgs~=notification-element] [pgs~=notification-element-title],
-[pgs~=initP] [pgs~=toast] [pgs~=notification-element] [pgs~=notification-element-title] {
+[pgs~=initP] [pgs~=notification] [pgs~=notification-element] [pgs~=notification-element-title] {
   font-weight: 700;
 }
-[pgs~=initP] [pgs~=notification] [pgs~=notification-element] [pgs~=notification-element-content],
-[pgs~=initP] [pgs~=toast] [pgs~=notification-element] [pgs~=notification-element-content] {
+[pgs~=initP] [pgs~=notification] [pgs~=notification-element] [pgs~=notification-element-content] {
   font-weight: 400;
   font-size: 1.4rem;
 }
-[pgs~=initP] [pgs~=notification] [pgs~=notification-element]::before,
-[pgs~=initP] [pgs~=toast] [pgs~=notification-element]::before {
+[pgs~=initP] [pgs~=notification] [pgs~=notification-element]::before {
   content: "";
   width: 0%;
   height: 100%;
@@ -6427,9 +6072,7 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   }
 }
 [pgs~=initP] [pgs~=notification] [pgs~=notification-element] p,
-[pgs~=initP] [pgs~=notification] [pgs~=notification-element] > i,
-[pgs~=initP] [pgs~=toast] [pgs~=notification-element] p,
-[pgs~=initP] [pgs~=toast] [pgs~=notification-element] > i {
+[pgs~=initP] [pgs~=notification] [pgs~=notification-element] > i {
   --fa-primary-color: var(--notification-shadow-color);
   --fa-secondary-color: color-mix(in srgb, var(--notification-shadow-color) 50%, var(--color-white) 50%);
   color: var(--notification-color);
@@ -6438,14 +6081,11 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   line-height: unset;
 }
 [pgs~=initP] [pgs~=notification] [pgs~=notification-element] p:is(i),
-[pgs~=initP] [pgs~=notification] [pgs~=notification-element] > i:is(i),
-[pgs~=initP] [pgs~=toast] [pgs~=notification-element] p:is(i),
-[pgs~=initP] [pgs~=toast] [pgs~=notification-element] > i:is(i) {
+[pgs~=initP] [pgs~=notification] [pgs~=notification-element] > i:is(i) {
   color: var(--notification-shadow-color);
   font-size: 2.5rem;
 }
-[pgs~=initP] [pgs~=notification] [pgs~=notification-element] button,
-[pgs~=initP] [pgs~=toast] [pgs~=notification-element] button {
+[pgs~=initP] [pgs~=notification] [pgs~=notification-element] button {
   opacity: 0;
   position: absolute;
   right: 2px;
@@ -6453,61 +6093,46 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   scale: 0.75;
   z-index: 1;
 }
-[pgs~=initP] [pgs~=notification] [pgs~=notification-element] button:focus,
-[pgs~=initP] [pgs~=toast] [pgs~=notification-element] button:focus {
+[pgs~=initP] [pgs~=notification] [pgs~=notification-element] button:focus {
   opacity: 1;
 }
-[pgs~=initP] [pgs~=notification] [pgs~=notification-element]:is(a),
-[pgs~=initP] [pgs~=toast] [pgs~=notification-element]:is(a) {
+[pgs~=initP] [pgs~=notification] [pgs~=notification-element]:is(a) {
   border-color: var(--color-primary-soft);
   border: var(--border);
 }
-[pgs~=initP] [pgs~=notification] [pgs~=notification-element]:is(a):hover,
-[pgs~=initP] [pgs~=toast] [pgs~=notification-element]:is(a):hover {
+[pgs~=initP] [pgs~=notification] [pgs~=notification-element]:is(a):hover {
   background-color: var(--color-white);
   text-decoration: none;
   color: var(--color-black);
 }
-[pgs~=initP] [pgs~=notification] [pgs~=notification-element]:focus-visible button, [pgs~=initP] [pgs~=notification] [pgs~=notification-element]:hover button,
-[pgs~=initP] [pgs~=toast] [pgs~=notification-element]:focus-visible button,
-[pgs~=initP] [pgs~=toast] [pgs~=notification-element]:hover button {
+[pgs~=initP] [pgs~=notification] [pgs~=notification-element]:focus-visible button, [pgs~=initP] [pgs~=notification] [pgs~=notification-element]:hover button {
   opacity: 1;
 }
-[pgs~=initP] [pgs~=notification] [pgs-state~=success],
-[pgs~=initP] [pgs~=toast] [pgs-state~=success] {
+[pgs~=initP] [pgs~=notification] [pgs-state~=success] {
   --notification-background: var(--color-success-background);
   --notification-background-timer: color-mix(in srgb, var(--color-success-background) 70%, var(--color-white) 30%);
   --notification-shadow-color: var(--color-success);
 }
-[pgs~=initP] [pgs~=notification] [pgs-state~=error],
-[pgs~=initP] [pgs~=toast] [pgs-state~=error] {
+[pgs~=initP] [pgs~=notification] [pgs-state~=error] {
   --notification-background: var(--color-error-background);
   --notification-background-timer: color-mix(in srgb, var(--color-error-background) 70%, var(--color-white) 30%);
   --notification-shadow-color: var(--color-error);
 }
-[pgs~=initP] [pgs~=notification] [pgs-state~=warning],
-[pgs~=initP] [pgs~=toast] [pgs-state~=warning] {
+[pgs~=initP] [pgs~=notification] [pgs-state~=warning] {
   --notification-background: var(--color-warning-background);
   --notification-background-timer: color-mix(in srgb, var(--color-warning-background) 70%, var(--color-white) 30%);
   --notification-shadow-color: var(--color-warning);
 }
-[pgs~=initP] [pgs~=notification] [pgs-state~=info],
-[pgs~=initP] [pgs~=toast] [pgs-state~=info] {
+[pgs~=initP] [pgs~=notification] [pgs-state~=info] {
   --notification-background: var(--color-box);
 }
-[pgs~=initP] [pgs~=notification] {
-  top: calc(var(--heightOfHeader) + 10px);
-  right: 10px;
-}
-[pgs~=initP] body:has(header[data-header-scroll=true]) [pgs~=notification] {
-  top: 0;
+[pgs~=initP] [pgs~=notification]:not([pgs-option~=toast]) {
+  top: calc(var(--heightOfHeaderScroll) + 1rem);
+  right: 1rem;
 }
-[pgs~=initP] [pgs~=toast] {
+[pgs~=initP] [pgs~=notification][pgs-option~=toast] {
   inset-inline: 0;
-  top: calc(var(--heightOfHeader) + 10px);
-}
-[pgs~=initP] body:has(header[data-header-scroll=true]) [pgs~=toast] {
-  top: 10px;
+  top: calc(var(--heightOfHeaderScroll) + 1rem);
 }
 [pgs~=initP] [pgs~=tooltip][pgs~=dropdown] {
   --dropdown-position-right: center;
@@ -6522,9 +6147,9 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   --search-suggestions-color: var(--color-text);
   --search-suggestions-border: var(--border-complete);
   --search-suggestions-borderRadius: var(--border-radius-input);
-  --search-suggestions-box-shadow: var(--box-shadow);
+  --search-suggestions-boxShadow: var(--box-shadow);
   --search-suggestions-gap: 0;
-  --search-suggestions-max-height: 32rem;
+  --search-suggestions-maxHeight: 32rem;
   --search-suggestions-offset: .5rem;
   --search-suggestions-padding: .5rem;
   --search-suggestions-item-padding: 1rem;
@@ -6535,15 +6160,15 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   gap: var(--gap-texts);
   flex-direction: row;
   flex-wrap: nowrap;
+  --button-size: 1.2rem;
+  --button-border: unset;
+  overflow-wrap: break-word;
+  height: calc(var(--button-size) * 4);
   flex: 1;
   width: 100%;
   overflow: visible;
   margin-inline: auto;
   padding: 0;
-  --button-size: 1.2rem;
-  --button-border: unset;
-  overflow-wrap: break-word;
-  height: calc(var(--button-size) * 4);
 }
 @media (min-width: 430px) {
   [pgs~=initP] [pgs~=search] {
@@ -6586,59 +6211,77 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
 [pgs~=initP] [pgs~=search]:has(input:focus-visible) {
   outline: var(--focus-visible);
 }
-[pgs~=initP] [pgs~=search]:not([pgs-state~=open]) > [pgs~=search-suggestions] {
+[pgs~=initP] [pgs~=search] [pgs~=search-suggestions] {
   display: none;
-}
-[pgs~=initP] [pgs~=search][pgs-state~=open] > [pgs~=search-suggestions] {
-  display: flex;
-}
-[pgs~=initP] [pgs~=search] > [pgs~=search-suggestions] {
   position: absolute;
   inset: calc(100% + var(--search-suggestions-offset)) 0 auto;
   z-index: 1000;
   flex-direction: column;
   gap: var(--search-suggestions-gap);
-  max-height: var(--search-suggestions-max-height);
+  max-height: var(--search-suggestions-maxHeight);
   overflow-y: auto;
   padding: var(--search-suggestions-padding);
   margin: 0;
   list-style: none;
   border: var(--search-suggestions-border);
   border-radius: calc(var(--search-suggestions-borderRadius) + var(--search-suggestions-padding));
+  box-shadow: var(--search-suggestions-boxShadow);
   background: var(--search-suggestions-background);
   color: var(--search-suggestions-color);
-  box-shadow: var(--search-suggestions-box-shadow);
 }
-[pgs~=initP] [pgs~=search] > [pgs~=search-suggestions] [pgs~=search-suggestions-item] {
+[pgs~=initP] [pgs~=search] [pgs~=search-suggestions] i {
+  color: var(--search-suggestions-color);
+  --fa-primary-color: var(--search-suggestions-color);
+  --fa-secondary-color: var(--search-suggestions-color);
+}
+[pgs~=initP] [pgs~=search] [pgs~=search-suggestions] [pgs~=search-suggestions-item] {
   padding: var(--search-suggestions-item-padding);
   border-radius: var(--search-suggestions-borderRadius);
   cursor: pointer;
   flex-wrap: nowrap;
 }
-[pgs~=initP] [pgs~=search] > [pgs~=search-suggestions] [pgs~=search-suggestions-item][aria-selected=true], [pgs~=initP] [pgs~=search] > [pgs~=search-suggestions] [pgs~=search-suggestions-item]:hover {
+[pgs~=initP] [pgs~=search] [pgs~=search-suggestions] [pgs~=search-suggestions-item][aria-selected=true], [pgs~=initP] [pgs~=search] [pgs~=search-suggestions] [pgs~=search-suggestions-item]:hover {
   background: var(--search-suggestions-item-selected-background);
   color: var(--search-suggestions-item-selected-color);
 }
-[pgs~=initP] [pgs~=search] > [pgs~=search-suggestions] [pgs~=search-suggestions-item][aria-disabled=true] {
+[pgs~=initP] [pgs~=search] [pgs~=search-suggestions] [pgs~=search-suggestions-item][aria-selected=true] i, [pgs~=initP] [pgs~=search] [pgs~=search-suggestions] [pgs~=search-suggestions-item]:hover i {
+  color: var(--search-suggestions-item-selected-color);
+  --fa-primary-color: var(--search-suggestions-item-selected-color);
+  --fa-secondary-color: var(--search-suggestions-item-selected-color);
+}
+[pgs~=initP] [pgs~=search] [pgs~=search-suggestions] [pgs~=search-suggestions-item][aria-disabled=true] {
   cursor: not-allowed;
   opacity: 0.5;
 }
-[pgs~=initP] [pgs~=search] > [pgs~=search-suggestions]:has([pgs~=search-suggestions-item]:hover) [pgs~=search-suggestions-item][aria-selected=true] {
+[pgs~=initP] [pgs~=search] [pgs~=search-suggestions]:has([pgs~=search-suggestions-item]:hover) [pgs~=search-suggestions-item][aria-selected=true] {
   background: var(--search-suggestions-background);
   color: var(--search-suggestions-color);
 }
-[pgs~=initP] [pgs~=search] > [pgs~=search-suggestions]:has([pgs~=search-suggestions-item]:hover) [pgs~=search-suggestions-item][aria-selected=true]:hover {
+[pgs~=initP] [pgs~=search] [pgs~=search-suggestions]:has([pgs~=search-suggestions-item]:hover) [pgs~=search-suggestions-item][aria-selected=true] i {
+  color: var(--search-suggestions-color);
+  --fa-primary-color: var(--search-suggestions-color);
+  --fa-secondary-color: var(--search-suggestions-color);
+}
+[pgs~=initP] [pgs~=search] [pgs~=search-suggestions]:has([pgs~=search-suggestions-item]:hover) [pgs~=search-suggestions-item][aria-selected=true]:hover {
   background: var(--search-suggestions-item-selected-background);
   color: var(--search-suggestions-item-selected-color);
 }
+[pgs~=initP] [pgs~=search] [pgs~=search-suggestions]:has([pgs~=search-suggestions-item]:hover) [pgs~=search-suggestions-item][aria-selected=true]:hover i {
+  color: var(--search-suggestions-item-selected-color);
+  --fa-primary-color: var(--search-suggestions-item-selected-color);
+  --fa-secondary-color: var(--search-suggestions-item-selected-color);
+}
+[pgs~=initP] [pgs~=search][pgs-state~=open] [pgs~=search-suggestions] {
+  display: flex;
+}
 [pgs~=initP] dialog [pgs~=search] {
   max-width: calc(100% - var(--padding-page) * 2);
   height: max-content;
   margin-inline: auto;
   background-color: var(--color-white);
 }
-[pgs~=initP] dialog [pgs~=search] input {
-  padding-block: 20px;
+[pgs~=initP] dialog [pgs~=search] [pgs~=modal-close] {
+  padding: var(--button-size);
 }
 [pgs~=initP] [pgs~=logo] {
   display: flex;