css-is-awesome 1.1.0

package/dist/css-is-awesome.css

@@ -0,0 +1,3733 @@
+@keyframes cia-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes cia-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes cia-slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes cia-slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes cia-slide-left {
+  from {
+    opacity: 0;
+    transform: translateX(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes cia-slide-right {
+  from {
+    opacity: 0;
+    transform: translateX(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes cia-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes cia-pop {
+  0% {
+    transform: scale(1);
+  }
+  40% {
+    transform: scale(1.06);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes cia-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.55;
+  }
+}
+@keyframes cia-shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+@keyframes cia-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes cia-wiggle {
+  0%, 100% {
+    transform: rotate(0deg);
+  }
+  25% {
+    transform: rotate(-2deg);
+  }
+  75% {
+    transform: rotate(2deg);
+  }
+}
+.cia-anim-fade-in {
+  animation-name: cia-fade-in;
+  animation-duration: var(--duration-normal, 240ms);
+  animation-delay: 0s;
+  animation-iteration-count: 1;
+  animation-fill-mode: both;
+  animation-timing-function: var(--ease, cubic-bezier(0.33, 0.66, 0.33, 1));
+}
+@media (prefers-reduced-motion: reduce) {
+  .cia-anim-fade-in {
+    /* stylelint-disable declaration-no-important -- !important is the canonical pattern for honoring prefers-reduced-motion: it must override any inline animation declared by component author or third-party CSS. */
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    /* stylelint-enable declaration-no-important */
+  }
+}
+
+.cia-anim-fade-in-fast {
+  animation-name: cia-fade-in;
+  animation-duration: var(--duration-fast, 180ms);
+  animation-delay: 0s;
+  animation-iteration-count: 1;
+  animation-fill-mode: both;
+  animation-timing-function: var(--ease, cubic-bezier(0.33, 0.66, 0.33, 1));
+}
+@media (prefers-reduced-motion: reduce) {
+  .cia-anim-fade-in-fast {
+    /* stylelint-disable declaration-no-important -- !important is the canonical pattern for honoring prefers-reduced-motion: it must override any inline animation declared by component author or third-party CSS. */
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    /* stylelint-enable declaration-no-important */
+  }
+}
+
+.cia-anim-fade-in-slow {
+  animation-name: cia-fade-in;
+  animation-duration: var(--duration-slow, 380ms);
+  animation-delay: 0s;
+  animation-iteration-count: 1;
+  animation-fill-mode: both;
+  animation-timing-function: var(--ease, cubic-bezier(0.33, 0.66, 0.33, 1));
+}
+@media (prefers-reduced-motion: reduce) {
+  .cia-anim-fade-in-slow {
+    /* stylelint-disable declaration-no-important -- !important is the canonical pattern for honoring prefers-reduced-motion: it must override any inline animation declared by component author or third-party CSS. */
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    /* stylelint-enable declaration-no-important */
+  }
+}
+
+.cia-anim-fade-out {
+  animation-name: cia-fade-out;
+  animation-duration: var(--duration-normal, 240ms);
+  animation-delay: 0s;
+  animation-iteration-count: 1;
+  animation-fill-mode: both;
+  animation-timing-function: var(--ease, cubic-bezier(0.33, 0.66, 0.33, 1));
+}
+@media (prefers-reduced-motion: reduce) {
+  .cia-anim-fade-out {
+    /* stylelint-disable declaration-no-important -- !important is the canonical pattern for honoring prefers-reduced-motion: it must override any inline animation declared by component author or third-party CSS. */
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    /* stylelint-enable declaration-no-important */
+  }
+}
+
+.cia-anim-fade-out-fast {
+  animation-name: cia-fade-out;
+  animation-duration: var(--duration-fast, 180ms);
+  animation-delay: 0s;
+  animation-iteration-count: 1;
+  animation-fill-mode: both;
+  animation-timing-function: var(--ease, cubic-bezier(0.33, 0.66, 0.33, 1));
+}
+@media (prefers-reduced-motion: reduce) {
+  .cia-anim-fade-out-fast {
+    /* stylelint-disable declaration-no-important -- !important is the canonical pattern for honoring prefers-reduced-motion: it must override any inline animation declared by component author or third-party CSS. */
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    /* stylelint-enable declaration-no-important */
+  }
+}
+
+.cia-anim-fade-out-slow {
+  animation-name: cia-fade-out;
+  animation-duration: var(--duration-slow, 380ms);
+  animation-delay: 0s;
+  animation-iteration-count: 1;
+  animation-fill-mode: both;
+  animation-timing-function: var(--ease, cubic-bezier(0.33, 0.66, 0.33, 1));
+}
+@media (prefers-reduced-motion: reduce) {
+  .cia-anim-fade-out-slow {
+    /* stylelint-disable declaration-no-important -- !important is the canonical pattern for honoring prefers-reduced-motion: it must override any inline animation declared by component author or third-party CSS. */
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    /* stylelint-enable declaration-no-important */
+  }
+}
+
+.cia-anim-slide-up {
+  animation-name: cia-slide-up;
+  animation-duration: var(--duration-normal, 240ms);
+  animation-delay: 0s;
+  animation-iteration-count: 1;
+  animation-fill-mode: both;
+  animation-timing-function: var(--ease, cubic-bezier(0.33, 0.66, 0.33, 1));
+}
+@media (prefers-reduced-motion: reduce) {
+  .cia-anim-slide-up {
+    /* stylelint-disable declaration-no-important -- !important is the canonical pattern for honoring prefers-reduced-motion: it must override any inline animation declared by component author or third-party CSS. */
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    /* stylelint-enable declaration-no-important */
+  }
+}
+
+.cia-anim-slide-up-fast {
+  animation-name: cia-slide-up;
+  animation-duration: var(--duration-fast, 180ms);
+  animation-delay: 0s;
+  animation-iteration-count: 1;
+  animation-fill-mode: both;
+  animation-timing-function: var(--ease, cubic-bezier(0.33, 0.66, 0.33, 1));
+}
+@media (prefers-reduced-motion: reduce) {
+  .cia-anim-slide-up-fast {
+    /* stylelint-disable declaration-no-important -- !important is the canonical pattern for honoring prefers-reduced-motion: it must override any inline animation declared by component author or third-party CSS. */
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    /* stylelint-enable declaration-no-important */
+  }
+}
+
+.cia-anim-slide-up-slow {
+  animation-name: cia-slide-up;
+  animation-duration: var(--duration-slow, 380ms);
+  animation-delay: 0s;
+  animation-iteration-count: 1;
+  animation-fill-mode: both;
+  animation-timing-function: var(--ease, cubic-bezier(0.33, 0.66, 0.33, 1));
+}
+@media (prefers-reduced-motion: reduce) {
+  .cia-anim-slide-up-slow {
+    /* stylelint-disable declaration-no-important -- !important is the canonical pattern for honoring prefers-reduced-motion: it must override any inline animation declared by component author or third-party CSS. */
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    /* stylelint-enable declaration-no-important */
+  }
+}
+
+.cia-anim-slide-down {
+  animation-name: cia-slide-down;
+  animation-duration: var(--duration-normal, 240ms);
+  animation-delay: 0s;
+  animation-iteration-count: 1;
+  animation-fill-mode: both;
+  animation-timing-function: var(--ease, cubic-bezier(0.33, 0.66, 0.33, 1));
+}
+@media (prefers-reduced-motion: reduce) {
+  .cia-anim-slide-down {
+    /* stylelint-disable declaration-no-important -- !important is the canonical pattern for honoring prefers-reduced-motion: it must override any inline animation declared by component author or third-party CSS. */
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    /* stylelint-enable declaration-no-important */
+  }
+}
+
+.cia-anim-slide-down-fast {
+  animation-name: cia-slide-down;
+  animation-duration: var(--duration-fast, 180ms);
+  animation-delay: 0s;
+  animation-iteration-count: 1;
+  animation-fill-mode: both;
+  animation-timing-function: var(--ease, cubic-bezier(0.33, 0.66, 0.33, 1));
+}
+@media (prefers-reduced-motion: reduce) {
+  .cia-anim-slide-down-fast {
+    /* stylelint-disable declaration-no-important -- !important is the canonical pattern for honoring prefers-reduced-motion: it must override any inline animation declared by component author or third-party CSS. */
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    /* stylelint-enable declaration-no-important */
+  }
+}
+
+.cia-anim-slide-down-slow {
+  animation-name: cia-slide-down;
+  animation-duration: var(--duration-slow, 380ms);
+  animation-delay: 0s;
+  animation-iteration-count: 1;
+  animation-fill-mode: both;
+  animation-timing-function: var(--ease, cubic-bezier(0.33, 0.66, 0.33, 1));
+}
+@media (prefers-reduced-motion: reduce) {
+  .cia-anim-slide-down-slow {
+    /* stylelint-disable declaration-no-important -- !important is the canonical pattern for honoring prefers-reduced-motion: it must override any inline animation declared by component author or third-party CSS. */
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    /* stylelint-enable declaration-no-important */
+  }
+}
+
+.cia-anim-slide-left {
+  animation-name: cia-slide-left;
+  animation-duration: var(--duration-normal, 240ms);
+  animation-delay: 0s;
+  animation-iteration-count: 1;
+  animation-fill-mode: both;
+  animation-timing-function: var(--ease, cubic-bezier(0.33, 0.66, 0.33, 1));
+}
+@media (prefers-reduced-motion: reduce) {
+  .cia-anim-slide-left {
+    /* stylelint-disable declaration-no-important -- !important is the canonical pattern for honoring prefers-reduced-motion: it must override any inline animation declared by component author or third-party CSS. */
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    /* stylelint-enable declaration-no-important */
+  }
+}
+
+.cia-anim-slide-left-fast {
+  animation-name: cia-slide-left;
+  animation-duration: var(--duration-fast, 180ms);
+  animation-delay: 0s;
+  animation-iteration-count: 1;
+  animation-fill-mode: both;
+  animation-timing-function: var(--ease, cubic-bezier(0.33, 0.66, 0.33, 1));
+}
+@media (prefers-reduced-motion: reduce) {
+  .cia-anim-slide-left-fast {
+    /* stylelint-disable declaration-no-important -- !important is the canonical pattern for honoring prefers-reduced-motion: it must override any inline animation declared by component author or third-party CSS. */
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    /* stylelint-enable declaration-no-important */
+  }
+}
+
+.cia-anim-slide-left-slow {
+  animation-name: cia-slide-left;
+  animation-duration: var(--duration-slow, 380ms);
+  animation-delay: 0s;
+  animation-iteration-count: 1;
+  animation-fill-mode: both;
+  animation-timing-function: var(--ease, cubic-bezier(0.33, 0.66, 0.33, 1));
+}
+@media (prefers-reduced-motion: reduce) {
+  .cia-anim-slide-left-slow {
+    /* stylelint-disable declaration-no-important -- !important is the canonical pattern for honoring prefers-reduced-motion: it must override any inline animation declared by component author or third-party CSS. */
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    /* stylelint-enable declaration-no-important */
+  }
+}
+
+.cia-anim-slide-right {
+  animation-name: cia-slide-right;
+  animation-duration: var(--duration-normal, 240ms);
+  animation-delay: 0s;
+  animation-iteration-count: 1;
+  animation-fill-mode: both;
+  animation-timing-function: var(--ease, cubic-bezier(0.33, 0.66, 0.33, 1));
+}
+@media (prefers-reduced-motion: reduce) {
+  .cia-anim-slide-right {
+    /* stylelint-disable declaration-no-important -- !important is the canonical pattern for honoring prefers-reduced-motion: it must override any inline animation declared by component author or third-party CSS. */
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    /* stylelint-enable declaration-no-important */
+  }
+}
+
+.cia-anim-slide-right-fast {
+  animation-name: cia-slide-right;
+  animation-duration: var(--duration-fast, 180ms);
+  animation-delay: 0s;
+  animation-iteration-count: 1;
+  animation-fill-mode: both;
+  animation-timing-function: var(--ease, cubic-bezier(0.33, 0.66, 0.33, 1));
+}
+@media (prefers-reduced-motion: reduce) {
+  .cia-anim-slide-right-fast {
+    /* stylelint-disable declaration-no-important -- !important is the canonical pattern for honoring prefers-reduced-motion: it must override any inline animation declared by component author or third-party CSS. */
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    /* stylelint-enable declaration-no-important */
+  }
+}
+
+.cia-anim-slide-right-slow {
+  animation-name: cia-slide-right;
+  animation-duration: var(--duration-slow, 380ms);
+  animation-delay: 0s;
+  animation-iteration-count: 1;
+  animation-fill-mode: both;
+  animation-timing-function: var(--ease, cubic-bezier(0.33, 0.66, 0.33, 1));
+}
+@media (prefers-reduced-motion: reduce) {
+  .cia-anim-slide-right-slow {
+    /* stylelint-disable declaration-no-important -- !important is the canonical pattern for honoring prefers-reduced-motion: it must override any inline animation declared by component author or third-party CSS. */
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    /* stylelint-enable declaration-no-important */
+  }
+}
+
+.cia-anim-scale-in {
+  animation-name: cia-scale-in;
+  animation-duration: var(--duration-normal, 240ms);
+  animation-delay: 0s;
+  animation-iteration-count: 1;
+  animation-fill-mode: both;
+  animation-timing-function: var(--ease, cubic-bezier(0.33, 0.66, 0.33, 1));
+}
+@media (prefers-reduced-motion: reduce) {
+  .cia-anim-scale-in {
+    /* stylelint-disable declaration-no-important -- !important is the canonical pattern for honoring prefers-reduced-motion: it must override any inline animation declared by component author or third-party CSS. */
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    /* stylelint-enable declaration-no-important */
+  }
+}
+
+.cia-anim-scale-in-fast {
+  animation-name: cia-scale-in;
+  animation-duration: var(--duration-fast, 180ms);
+  animation-delay: 0s;
+  animation-iteration-count: 1;
+  animation-fill-mode: both;
+  animation-timing-function: var(--ease, cubic-bezier(0.33, 0.66, 0.33, 1));
+}
+@media (prefers-reduced-motion: reduce) {
+  .cia-anim-scale-in-fast {
+    /* stylelint-disable declaration-no-important -- !important is the canonical pattern for honoring prefers-reduced-motion: it must override any inline animation declared by component author or third-party CSS. */
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    /* stylelint-enable declaration-no-important */
+  }
+}
+
+.cia-anim-scale-in-slow {
+  animation-name: cia-scale-in;
+  animation-duration: var(--duration-slow, 380ms);
+  animation-delay: 0s;
+  animation-iteration-count: 1;
+  animation-fill-mode: both;
+  animation-timing-function: var(--ease, cubic-bezier(0.33, 0.66, 0.33, 1));
+}
+@media (prefers-reduced-motion: reduce) {
+  .cia-anim-scale-in-slow {
+    /* stylelint-disable declaration-no-important -- !important is the canonical pattern for honoring prefers-reduced-motion: it must override any inline animation declared by component author or third-party CSS. */
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    /* stylelint-enable declaration-no-important */
+  }
+}
+
+.cia-anim-pop {
+  animation-name: cia-pop;
+  animation-duration: var(--duration-normal, 240ms);
+  animation-delay: 0s;
+  animation-iteration-count: 1;
+  animation-fill-mode: both;
+  animation-timing-function: var(--ease, cubic-bezier(0.33, 0.66, 0.33, 1));
+}
+@media (prefers-reduced-motion: reduce) {
+  .cia-anim-pop {
+    /* stylelint-disable declaration-no-important -- !important is the canonical pattern for honoring prefers-reduced-motion: it must override any inline animation declared by component author or third-party CSS. */
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    /* stylelint-enable declaration-no-important */
+  }
+}
+
+.cia-anim-pop-fast {
+  animation-name: cia-pop;
+  animation-duration: var(--duration-fast, 180ms);
+  animation-delay: 0s;
+  animation-iteration-count: 1;
+  animation-fill-mode: both;
+  animation-timing-function: var(--ease, cubic-bezier(0.33, 0.66, 0.33, 1));
+}
+@media (prefers-reduced-motion: reduce) {
+  .cia-anim-pop-fast {
+    /* stylelint-disable declaration-no-important -- !important is the canonical pattern for honoring prefers-reduced-motion: it must override any inline animation declared by component author or third-party CSS. */
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    /* stylelint-enable declaration-no-important */
+  }
+}
+
+.cia-anim-pop-slow {
+  animation-name: cia-pop;
+  animation-duration: var(--duration-slow, 380ms);
+  animation-delay: 0s;
+  animation-iteration-count: 1;
+  animation-fill-mode: both;
+  animation-timing-function: var(--ease, cubic-bezier(0.33, 0.66, 0.33, 1));
+}
+@media (prefers-reduced-motion: reduce) {
+  .cia-anim-pop-slow {
+    /* stylelint-disable declaration-no-important -- !important is the canonical pattern for honoring prefers-reduced-motion: it must override any inline animation declared by component author or third-party CSS. */
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    /* stylelint-enable declaration-no-important */
+  }
+}
+
+.cia-anim-wiggle {
+  animation-name: cia-wiggle;
+  animation-duration: var(--duration-normal, 240ms);
+  animation-delay: 0s;
+  animation-iteration-count: 1;
+  animation-fill-mode: both;
+  animation-timing-function: var(--ease, cubic-bezier(0.33, 0.66, 0.33, 1));
+}
+@media (prefers-reduced-motion: reduce) {
+  .cia-anim-wiggle {
+    /* stylelint-disable declaration-no-important -- !important is the canonical pattern for honoring prefers-reduced-motion: it must override any inline animation declared by component author or third-party CSS. */
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    /* stylelint-enable declaration-no-important */
+  }
+}
+
+.cia-anim-wiggle-fast {
+  animation-name: cia-wiggle;
+  animation-duration: var(--duration-fast, 180ms);
+  animation-delay: 0s;
+  animation-iteration-count: 1;
+  animation-fill-mode: both;
+  animation-timing-function: var(--ease, cubic-bezier(0.33, 0.66, 0.33, 1));
+}
+@media (prefers-reduced-motion: reduce) {
+  .cia-anim-wiggle-fast {
+    /* stylelint-disable declaration-no-important -- !important is the canonical pattern for honoring prefers-reduced-motion: it must override any inline animation declared by component author or third-party CSS. */
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    /* stylelint-enable declaration-no-important */
+  }
+}
+
+.cia-anim-wiggle-slow {
+  animation-name: cia-wiggle;
+  animation-duration: var(--duration-slow, 380ms);
+  animation-delay: 0s;
+  animation-iteration-count: 1;
+  animation-fill-mode: both;
+  animation-timing-function: var(--ease, cubic-bezier(0.33, 0.66, 0.33, 1));
+}
+@media (prefers-reduced-motion: reduce) {
+  .cia-anim-wiggle-slow {
+    /* stylelint-disable declaration-no-important -- !important is the canonical pattern for honoring prefers-reduced-motion: it must override any inline animation declared by component author or third-party CSS. */
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    /* stylelint-enable declaration-no-important */
+  }
+}
+
+.cia-anim-spin {
+  animation-name: cia-spin;
+  animation-duration: var(--duration-slow, 380ms);
+  animation-delay: 0s;
+  animation-iteration-count: infinite;
+  animation-fill-mode: both;
+  animation-timing-function: linear;
+}
+@media (prefers-reduced-motion: reduce) {
+  .cia-anim-spin {
+    /* stylelint-disable declaration-no-important -- !important is the canonical pattern for honoring prefers-reduced-motion: it must override any inline animation declared by component author or third-party CSS. */
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    /* stylelint-enable declaration-no-important */
+  }
+}
+
+.cia-anim-pulse {
+  animation-name: cia-pulse;
+  animation-duration: var(--duration-slow, 380ms);
+  animation-delay: 0s;
+  animation-iteration-count: infinite;
+  animation-fill-mode: both;
+  animation-timing-function: var(--ease, cubic-bezier(0.33, 0.66, 0.33, 1));
+}
+@media (prefers-reduced-motion: reduce) {
+  .cia-anim-pulse {
+    /* stylelint-disable declaration-no-important -- !important is the canonical pattern for honoring prefers-reduced-motion: it must override any inline animation declared by component author or third-party CSS. */
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    /* stylelint-enable declaration-no-important */
+  }
+}
+
+.cia-anim-shimmer {
+  animation-name: cia-shimmer;
+  animation-duration: var(--duration-slow, 380ms);
+  animation-delay: 0s;
+  animation-iteration-count: infinite;
+  animation-fill-mode: both;
+  animation-timing-function: linear;
+}
+@media (prefers-reduced-motion: reduce) {
+  .cia-anim-shimmer {
+    /* stylelint-disable declaration-no-important -- !important is the canonical pattern for honoring prefers-reduced-motion: it must override any inline animation declared by component author or third-party CSS. */
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    /* stylelint-enable declaration-no-important */
+  }
+}
+
+.cia-hover-lift {
+  transition: transform var(--duration-fast, 180ms) var(--ease, ease), box-shadow var(--duration-fast, 180ms) var(--ease, ease), opacity var(--duration-fast, 180ms) var(--ease, ease);
+}
+.cia-hover-lift:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+}
+@media (prefers-reduced-motion: reduce) {
+  .cia-hover-lift {
+    transition: none;
+  }
+  .cia-hover-lift:hover {
+    transform: none;
+  }
+}
+
+.cia-hover-glow {
+  transition: transform var(--duration-fast, 180ms) var(--ease, ease), box-shadow var(--duration-fast, 180ms) var(--ease, ease), opacity var(--duration-fast, 180ms) var(--ease, ease);
+}
+.cia-hover-glow:hover {
+  box-shadow: var(--glow-md);
+}
+@media (prefers-reduced-motion: reduce) {
+  .cia-hover-glow {
+    transition: none;
+  }
+  .cia-hover-glow:hover {
+    transform: none;
+  }
+}
+
+.cia-hover-press {
+  transition: transform var(--duration-fast, 180ms) var(--ease, ease), box-shadow var(--duration-fast, 180ms) var(--ease, ease), opacity var(--duration-fast, 180ms) var(--ease, ease);
+}
+.cia-hover-press:hover {
+  transform: translateY(1px) scale(0.99);
+}
+@media (prefers-reduced-motion: reduce) {
+  .cia-hover-press {
+    transition: none;
+  }
+  .cia-hover-press:hover {
+    transform: none;
+  }
+}
+
+.cia-hover-fade {
+  transition: transform var(--duration-fast, 180ms) var(--ease, ease), box-shadow var(--duration-fast, 180ms) var(--ease, ease), opacity var(--duration-fast, 180ms) var(--ease, ease);
+}
+.cia-hover-fade:hover {
+  opacity: 0.7;
+}
+@media (prefers-reduced-motion: reduce) {
+  .cia-hover-fade {
+    transition: none;
+  }
+  .cia-hover-fade:hover {
+    transform: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    /* stylelint-disable declaration-no-important -- !important is the canonical pattern for the global reduced-motion safety net: it must override any animation/transition declared anywhere in the document. */
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+    /* stylelint-enable declaration-no-important */
+  }
+}
+.cia-m-1 {
+  margin: 0.5rem;
+}
+
+.cia-mt-1 {
+  margin-top: 0.5rem;
+}
+
+.cia-mr-1 {
+  margin-right: 0.5rem;
+}
+
+.cia-mb-1 {
+  margin-bottom: 0.5rem;
+}
+
+.cia-ml-1 {
+  margin-left: 0.5rem;
+}
+
+.cia-p-1 {
+  padding: 0.5rem;
+}
+
+.cia-pt-1 {
+  padding-top: 0.5rem;
+}
+
+.cia-pr-1 {
+  padding-right: 0.5rem;
+}
+
+.cia-pb-1 {
+  padding-bottom: 0.5rem;
+}
+
+.cia-pl-1 {
+  padding-left: 0.5rem;
+}
+
+.cia-mx-1 {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+
+.cia-my-1 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.cia-px-1 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.cia-py-1 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.cia-m-2 {
+  margin: 0.75rem;
+}
+
+.cia-mt-2 {
+  margin-top: 0.75rem;
+}
+
+.cia-mr-2 {
+  margin-right: 0.75rem;
+}
+
+.cia-mb-2 {
+  margin-bottom: 0.75rem;
+}
+
+.cia-ml-2 {
+  margin-left: 0.75rem;
+}
+
+.cia-p-2 {
+  padding: 0.75rem;
+}
+
+.cia-pt-2 {
+  padding-top: 0.75rem;
+}
+
+.cia-pr-2 {
+  padding-right: 0.75rem;
+}
+
+.cia-pb-2 {
+  padding-bottom: 0.75rem;
+}
+
+.cia-pl-2 {
+  padding-left: 0.75rem;
+}
+
+.cia-mx-2 {
+  margin-left: 0.75rem;
+  margin-right: 0.75rem;
+}
+
+.cia-my-2 {
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.cia-px-2 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.cia-py-2 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.cia-m-3 {
+  margin: 0.875rem;
+}
+
+.cia-mt-3 {
+  margin-top: 0.875rem;
+}
+
+.cia-mr-3 {
+  margin-right: 0.875rem;
+}
+
+.cia-mb-3 {
+  margin-bottom: 0.875rem;
+}
+
+.cia-ml-3 {
+  margin-left: 0.875rem;
+}
+
+.cia-p-3 {
+  padding: 0.875rem;
+}
+
+.cia-pt-3 {
+  padding-top: 0.875rem;
+}
+
+.cia-pr-3 {
+  padding-right: 0.875rem;
+}
+
+.cia-pb-3 {
+  padding-bottom: 0.875rem;
+}
+
+.cia-pl-3 {
+  padding-left: 0.875rem;
+}
+
+.cia-mx-3 {
+  margin-left: 0.875rem;
+  margin-right: 0.875rem;
+}
+
+.cia-my-3 {
+  margin-top: 0.875rem;
+  margin-bottom: 0.875rem;
+}
+
+.cia-px-3 {
+  padding-left: 0.875rem;
+  padding-right: 0.875rem;
+}
+
+.cia-py-3 {
+  padding-top: 0.875rem;
+  padding-bottom: 0.875rem;
+}
+
+.cia-m-4 {
+  margin: 1rem;
+}
+
+.cia-mt-4 {
+  margin-top: 1rem;
+}
+
+.cia-mr-4 {
+  margin-right: 1rem;
+}
+
+.cia-mb-4 {
+  margin-bottom: 1rem;
+}
+
+.cia-ml-4 {
+  margin-left: 1rem;
+}
+
+.cia-p-4 {
+  padding: 1rem;
+}
+
+.cia-pt-4 {
+  padding-top: 1rem;
+}
+
+.cia-pr-4 {
+  padding-right: 1rem;
+}
+
+.cia-pb-4 {
+  padding-bottom: 1rem;
+}
+
+.cia-pl-4 {
+  padding-left: 1rem;
+}
+
+.cia-mx-4 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+.cia-my-4 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.cia-px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.cia-py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.cia-m-5 {
+  margin: 1.5rem;
+}
+
+.cia-mt-5 {
+  margin-top: 1.5rem;
+}
+
+.cia-mr-5 {
+  margin-right: 1.5rem;
+}
+
+.cia-mb-5 {
+  margin-bottom: 1.5rem;
+}
+
+.cia-ml-5 {
+  margin-left: 1.5rem;
+}
+
+.cia-p-5 {
+  padding: 1.5rem;
+}
+
+.cia-pt-5 {
+  padding-top: 1.5rem;
+}
+
+.cia-pr-5 {
+  padding-right: 1.5rem;
+}
+
+.cia-pb-5 {
+  padding-bottom: 1.5rem;
+}
+
+.cia-pl-5 {
+  padding-left: 1.5rem;
+}
+
+.cia-mx-5 {
+  margin-left: 1.5rem;
+  margin-right: 1.5rem;
+}
+
+.cia-my-5 {
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.cia-px-5 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
+.cia-py-5 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
+.cia-m-6 {
+  margin: 2rem;
+}
+
+.cia-mt-6 {
+  margin-top: 2rem;
+}
+
+.cia-mr-6 {
+  margin-right: 2rem;
+}
+
+.cia-mb-6 {
+  margin-bottom: 2rem;
+}
+
+.cia-ml-6 {
+  margin-left: 2rem;
+}
+
+.cia-p-6 {
+  padding: 2rem;
+}
+
+.cia-pt-6 {
+  padding-top: 2rem;
+}
+
+.cia-pr-6 {
+  padding-right: 2rem;
+}
+
+.cia-pb-6 {
+  padding-bottom: 2rem;
+}
+
+.cia-pl-6 {
+  padding-left: 2rem;
+}
+
+.cia-mx-6 {
+  margin-left: 2rem;
+  margin-right: 2rem;
+}
+
+.cia-my-6 {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+
+.cia-px-6 {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+.cia-py-6 {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
+.cia-m-7 {
+  margin: 3rem;
+}
+
+.cia-mt-7 {
+  margin-top: 3rem;
+}
+
+.cia-mr-7 {
+  margin-right: 3rem;
+}
+
+.cia-mb-7 {
+  margin-bottom: 3rem;
+}
+
+.cia-ml-7 {
+  margin-left: 3rem;
+}
+
+.cia-p-7 {
+  padding: 3rem;
+}
+
+.cia-pt-7 {
+  padding-top: 3rem;
+}
+
+.cia-pr-7 {
+  padding-right: 3rem;
+}
+
+.cia-pb-7 {
+  padding-bottom: 3rem;
+}
+
+.cia-pl-7 {
+  padding-left: 3rem;
+}
+
+.cia-mx-7 {
+  margin-left: 3rem;
+  margin-right: 3rem;
+}
+
+.cia-my-7 {
+  margin-top: 3rem;
+  margin-bottom: 3rem;
+}
+
+.cia-px-7 {
+  padding-left: 3rem;
+  padding-right: 3rem;
+}
+
+.cia-py-7 {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+
+.cia-m-8 {
+  margin: 4rem;
+}
+
+.cia-mt-8 {
+  margin-top: 4rem;
+}
+
+.cia-mr-8 {
+  margin-right: 4rem;
+}
+
+.cia-mb-8 {
+  margin-bottom: 4rem;
+}
+
+.cia-ml-8 {
+  margin-left: 4rem;
+}
+
+.cia-p-8 {
+  padding: 4rem;
+}
+
+.cia-pt-8 {
+  padding-top: 4rem;
+}
+
+.cia-pr-8 {
+  padding-right: 4rem;
+}
+
+.cia-pb-8 {
+  padding-bottom: 4rem;
+}
+
+.cia-pl-8 {
+  padding-left: 4rem;
+}
+
+.cia-mx-8 {
+  margin-left: 4rem;
+  margin-right: 4rem;
+}
+
+.cia-my-8 {
+  margin-top: 4rem;
+  margin-bottom: 4rem;
+}
+
+.cia-px-8 {
+  padding-left: 4rem;
+  padding-right: 4rem;
+}
+
+.cia-py-8 {
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+}
+
+.cia-m-9 {
+  margin: 6rem;
+}
+
+.cia-mt-9 {
+  margin-top: 6rem;
+}
+
+.cia-mr-9 {
+  margin-right: 6rem;
+}
+
+.cia-mb-9 {
+  margin-bottom: 6rem;
+}
+
+.cia-ml-9 {
+  margin-left: 6rem;
+}
+
+.cia-p-9 {
+  padding: 6rem;
+}
+
+.cia-pt-9 {
+  padding-top: 6rem;
+}
+
+.cia-pr-9 {
+  padding-right: 6rem;
+}
+
+.cia-pb-9 {
+  padding-bottom: 6rem;
+}
+
+.cia-pl-9 {
+  padding-left: 6rem;
+}
+
+.cia-mx-9 {
+  margin-left: 6rem;
+  margin-right: 6rem;
+}
+
+.cia-my-9 {
+  margin-top: 6rem;
+  margin-bottom: 6rem;
+}
+
+.cia-px-9 {
+  padding-left: 6rem;
+  padding-right: 6rem;
+}
+
+.cia-py-9 {
+  padding-top: 6rem;
+  padding-bottom: 6rem;
+}
+
+.cia-m-0 {
+  margin: 0;
+}
+
+.cia-mt-0 {
+  margin-top: 0;
+}
+
+.cia-mr-0 {
+  margin-right: 0;
+}
+
+.cia-mb-0 {
+  margin-bottom: 0;
+}
+
+.cia-ml-0 {
+  margin-left: 0;
+}
+
+.cia-p-0 {
+  padding: 0;
+}
+
+.cia-pt-0 {
+  padding-top: 0;
+}
+
+.cia-pr-0 {
+  padding-right: 0;
+}
+
+.cia-pb-0 {
+  padding-bottom: 0;
+}
+
+.cia-pl-0 {
+  padding-left: 0;
+}
+
+.cia-mx-0 {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.cia-my-0 {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.cia-px-0 {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.cia-py-0 {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.cia-m-none {
+  margin: 0;
+}
+
+.cia-mt-none {
+  margin-top: 0;
+}
+
+.cia-mr-none {
+  margin-right: 0;
+}
+
+.cia-mb-none {
+  margin-bottom: 0;
+}
+
+.cia-ml-none {
+  margin-left: 0;
+}
+
+.cia-p-none {
+  padding: 0;
+}
+
+.cia-pt-none {
+  padding-top: 0;
+}
+
+.cia-pr-none {
+  padding-right: 0;
+}
+
+.cia-pb-none {
+  padding-bottom: 0;
+}
+
+.cia-pl-none {
+  padding-left: 0;
+}
+
+.cia-mx-none {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.cia-my-none {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.cia-px-none {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.cia-py-none {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.cia-m-2xs {
+  margin: 0.25rem;
+}
+
+.cia-mt-2xs {
+  margin-top: 0.25rem;
+}
+
+.cia-mr-2xs {
+  margin-right: 0.25rem;
+}
+
+.cia-mb-2xs {
+  margin-bottom: 0.25rem;
+}
+
+.cia-ml-2xs {
+  margin-left: 0.25rem;
+}
+
+.cia-p-2xs {
+  padding: 0.25rem;
+}
+
+.cia-pt-2xs {
+  padding-top: 0.25rem;
+}
+
+.cia-pr-2xs {
+  padding-right: 0.25rem;
+}
+
+.cia-pb-2xs {
+  padding-bottom: 0.25rem;
+}
+
+.cia-pl-2xs {
+  padding-left: 0.25rem;
+}
+
+.cia-mx-2xs {
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+}
+
+.cia-my-2xs {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.cia-px-2xs {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
+.cia-py-2xs {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+.cia-m-xs {
+  margin: 0.5rem;
+}
+
+.cia-mt-xs {
+  margin-top: 0.5rem;
+}
+
+.cia-mr-xs {
+  margin-right: 0.5rem;
+}
+
+.cia-mb-xs {
+  margin-bottom: 0.5rem;
+}
+
+.cia-ml-xs {
+  margin-left: 0.5rem;
+}
+
+.cia-p-xs {
+  padding: 0.5rem;
+}
+
+.cia-pt-xs {
+  padding-top: 0.5rem;
+}
+
+.cia-pr-xs {
+  padding-right: 0.5rem;
+}
+
+.cia-pb-xs {
+  padding-bottom: 0.5rem;
+}
+
+.cia-pl-xs {
+  padding-left: 0.5rem;
+}
+
+.cia-mx-xs {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+
+.cia-my-xs {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.cia-px-xs {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.cia-py-xs {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.cia-m-sm {
+  margin: 0.75rem;
+}
+
+.cia-mt-sm {
+  margin-top: 0.75rem;
+}
+
+.cia-mr-sm {
+  margin-right: 0.75rem;
+}
+
+.cia-mb-sm {
+  margin-bottom: 0.75rem;
+}
+
+.cia-ml-sm {
+  margin-left: 0.75rem;
+}
+
+.cia-p-sm {
+  padding: 0.75rem;
+}
+
+.cia-pt-sm {
+  padding-top: 0.75rem;
+}
+
+.cia-pr-sm {
+  padding-right: 0.75rem;
+}
+
+.cia-pb-sm {
+  padding-bottom: 0.75rem;
+}
+
+.cia-pl-sm {
+  padding-left: 0.75rem;
+}
+
+.cia-mx-sm {
+  margin-left: 0.75rem;
+  margin-right: 0.75rem;
+}
+
+.cia-my-sm {
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.cia-px-sm {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.cia-py-sm {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.cia-m-md {
+  margin: 1rem;
+}
+
+.cia-mt-md {
+  margin-top: 1rem;
+}
+
+.cia-mr-md {
+  margin-right: 1rem;
+}
+
+.cia-mb-md {
+  margin-bottom: 1rem;
+}
+
+.cia-ml-md {
+  margin-left: 1rem;
+}
+
+.cia-p-md {
+  padding: 1rem;
+}
+
+.cia-pt-md {
+  padding-top: 1rem;
+}
+
+.cia-pr-md {
+  padding-right: 1rem;
+}
+
+.cia-pb-md {
+  padding-bottom: 1rem;
+}
+
+.cia-pl-md {
+  padding-left: 1rem;
+}
+
+.cia-mx-md {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+.cia-my-md {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.cia-px-md {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.cia-py-md {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.cia-m-lg {
+  margin: 1.5rem;
+}
+
+.cia-mt-lg {
+  margin-top: 1.5rem;
+}
+
+.cia-mr-lg {
+  margin-right: 1.5rem;
+}
+
+.cia-mb-lg {
+  margin-bottom: 1.5rem;
+}
+
+.cia-ml-lg {
+  margin-left: 1.5rem;
+}
+
+.cia-p-lg {
+  padding: 1.5rem;
+}
+
+.cia-pt-lg {
+  padding-top: 1.5rem;
+}
+
+.cia-pr-lg {
+  padding-right: 1.5rem;
+}
+
+.cia-pb-lg {
+  padding-bottom: 1.5rem;
+}
+
+.cia-pl-lg {
+  padding-left: 1.5rem;
+}
+
+.cia-mx-lg {
+  margin-left: 1.5rem;
+  margin-right: 1.5rem;
+}
+
+.cia-my-lg {
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.cia-px-lg {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
+.cia-py-lg {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
+.cia-m-xl {
+  margin: 2rem;
+}
+
+.cia-mt-xl {
+  margin-top: 2rem;
+}
+
+.cia-mr-xl {
+  margin-right: 2rem;
+}
+
+.cia-mb-xl {
+  margin-bottom: 2rem;
+}
+
+.cia-ml-xl {
+  margin-left: 2rem;
+}
+
+.cia-p-xl {
+  padding: 2rem;
+}
+
+.cia-pt-xl {
+  padding-top: 2rem;
+}
+
+.cia-pr-xl {
+  padding-right: 2rem;
+}
+
+.cia-pb-xl {
+  padding-bottom: 2rem;
+}
+
+.cia-pl-xl {
+  padding-left: 2rem;
+}
+
+.cia-mx-xl {
+  margin-left: 2rem;
+  margin-right: 2rem;
+}
+
+.cia-my-xl {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+
+.cia-px-xl {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+.cia-py-xl {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
+.cia-m-2xl {
+  margin: 3rem;
+}
+
+.cia-mt-2xl {
+  margin-top: 3rem;
+}
+
+.cia-mr-2xl {
+  margin-right: 3rem;
+}
+
+.cia-mb-2xl {
+  margin-bottom: 3rem;
+}
+
+.cia-ml-2xl {
+  margin-left: 3rem;
+}
+
+.cia-p-2xl {
+  padding: 3rem;
+}
+
+.cia-pt-2xl {
+  padding-top: 3rem;
+}
+
+.cia-pr-2xl {
+  padding-right: 3rem;
+}
+
+.cia-pb-2xl {
+  padding-bottom: 3rem;
+}
+
+.cia-pl-2xl {
+  padding-left: 3rem;
+}
+
+.cia-mx-2xl {
+  margin-left: 3rem;
+  margin-right: 3rem;
+}
+
+.cia-my-2xl {
+  margin-top: 3rem;
+  margin-bottom: 3rem;
+}
+
+.cia-px-2xl {
+  padding-left: 3rem;
+  padding-right: 3rem;
+}
+
+.cia-py-2xl {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+
+.cia-m-3xl {
+  margin: 4rem;
+}
+
+.cia-mt-3xl {
+  margin-top: 4rem;
+}
+
+.cia-mr-3xl {
+  margin-right: 4rem;
+}
+
+.cia-mb-3xl {
+  margin-bottom: 4rem;
+}
+
+.cia-ml-3xl {
+  margin-left: 4rem;
+}
+
+.cia-p-3xl {
+  padding: 4rem;
+}
+
+.cia-pt-3xl {
+  padding-top: 4rem;
+}
+
+.cia-pr-3xl {
+  padding-right: 4rem;
+}
+
+.cia-pb-3xl {
+  padding-bottom: 4rem;
+}
+
+.cia-pl-3xl {
+  padding-left: 4rem;
+}
+
+.cia-mx-3xl {
+  margin-left: 4rem;
+  margin-right: 4rem;
+}
+
+.cia-my-3xl {
+  margin-top: 4rem;
+  margin-bottom: 4rem;
+}
+
+.cia-px-3xl {
+  padding-left: 4rem;
+  padding-right: 4rem;
+}
+
+.cia-py-3xl {
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+}
+
+.cia-m-4xl {
+  margin: 6rem;
+}
+
+.cia-mt-4xl {
+  margin-top: 6rem;
+}
+
+.cia-mr-4xl {
+  margin-right: 6rem;
+}
+
+.cia-mb-4xl {
+  margin-bottom: 6rem;
+}
+
+.cia-ml-4xl {
+  margin-left: 6rem;
+}
+
+.cia-p-4xl {
+  padding: 6rem;
+}
+
+.cia-pt-4xl {
+  padding-top: 6rem;
+}
+
+.cia-pr-4xl {
+  padding-right: 6rem;
+}
+
+.cia-pb-4xl {
+  padding-bottom: 6rem;
+}
+
+.cia-pl-4xl {
+  padding-left: 6rem;
+}
+
+.cia-mx-4xl {
+  margin-left: 6rem;
+  margin-right: 6rem;
+}
+
+.cia-my-4xl {
+  margin-top: 6rem;
+  margin-bottom: 6rem;
+}
+
+.cia-px-4xl {
+  padding-left: 6rem;
+  padding-right: 6rem;
+}
+
+.cia-py-4xl {
+  padding-top: 6rem;
+  padding-bottom: 6rem;
+}
+
+.cia-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.cia-m-auto {
+  margin: auto;
+}
+
+.cia-mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.cia-my-auto {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.cia-ml-auto {
+  margin-left: auto;
+}
+
+.cia-mr-auto {
+  margin-right: auto;
+}
+
+.cia-mt-auto {
+  margin-top: auto;
+}
+
+.cia-mb-auto {
+  margin-bottom: auto;
+}
+
+.cia-gap-1 {
+  gap: 0.5rem;
+}
+
+.cia-gap-x-1 {
+  column-gap: 0.5rem;
+}
+
+.cia-gap-y-1 {
+  row-gap: 0.5rem;
+}
+
+.cia-gap-2 {
+  gap: 0.75rem;
+}
+
+.cia-gap-x-2 {
+  column-gap: 0.75rem;
+}
+
+.cia-gap-y-2 {
+  row-gap: 0.75rem;
+}
+
+.cia-gap-3 {
+  gap: 0.875rem;
+}
+
+.cia-gap-x-3 {
+  column-gap: 0.875rem;
+}
+
+.cia-gap-y-3 {
+  row-gap: 0.875rem;
+}
+
+.cia-gap-4 {
+  gap: 1rem;
+}
+
+.cia-gap-x-4 {
+  column-gap: 1rem;
+}
+
+.cia-gap-y-4 {
+  row-gap: 1rem;
+}
+
+.cia-gap-5 {
+  gap: 1.5rem;
+}
+
+.cia-gap-x-5 {
+  column-gap: 1.5rem;
+}
+
+.cia-gap-y-5 {
+  row-gap: 1.5rem;
+}
+
+.cia-gap-6 {
+  gap: 2rem;
+}
+
+.cia-gap-x-6 {
+  column-gap: 2rem;
+}
+
+.cia-gap-y-6 {
+  row-gap: 2rem;
+}
+
+.cia-gap-7 {
+  gap: 3rem;
+}
+
+.cia-gap-x-7 {
+  column-gap: 3rem;
+}
+
+.cia-gap-y-7 {
+  row-gap: 3rem;
+}
+
+.cia-gap-8 {
+  gap: 4rem;
+}
+
+.cia-gap-x-8 {
+  column-gap: 4rem;
+}
+
+.cia-gap-y-8 {
+  row-gap: 4rem;
+}
+
+.cia-gap-9 {
+  gap: 6rem;
+}
+
+.cia-gap-x-9 {
+  column-gap: 6rem;
+}
+
+.cia-gap-y-9 {
+  row-gap: 6rem;
+}
+
+.cia-gap-0 {
+  gap: 0;
+}
+
+.cia-gap-x-0 {
+  column-gap: 0;
+}
+
+.cia-gap-y-0 {
+  row-gap: 0;
+}
+
+.cia-gap-none {
+  gap: 0;
+}
+
+.cia-gap-x-none {
+  column-gap: 0;
+}
+
+.cia-gap-y-none {
+  row-gap: 0;
+}
+
+.cia-gap-2xs {
+  gap: 0.25rem;
+}
+
+.cia-gap-x-2xs {
+  column-gap: 0.25rem;
+}
+
+.cia-gap-y-2xs {
+  row-gap: 0.25rem;
+}
+
+.cia-gap-xs {
+  gap: 0.5rem;
+}
+
+.cia-gap-x-xs {
+  column-gap: 0.5rem;
+}
+
+.cia-gap-y-xs {
+  row-gap: 0.5rem;
+}
+
+.cia-gap-sm {
+  gap: 0.75rem;
+}
+
+.cia-gap-x-sm {
+  column-gap: 0.75rem;
+}
+
+.cia-gap-y-sm {
+  row-gap: 0.75rem;
+}
+
+.cia-gap-md {
+  gap: 1rem;
+}
+
+.cia-gap-x-md {
+  column-gap: 1rem;
+}
+
+.cia-gap-y-md {
+  row-gap: 1rem;
+}
+
+.cia-gap-lg {
+  gap: 1.5rem;
+}
+
+.cia-gap-x-lg {
+  column-gap: 1.5rem;
+}
+
+.cia-gap-y-lg {
+  row-gap: 1.5rem;
+}
+
+.cia-gap-xl {
+  gap: 2rem;
+}
+
+.cia-gap-x-xl {
+  column-gap: 2rem;
+}
+
+.cia-gap-y-xl {
+  row-gap: 2rem;
+}
+
+.cia-gap-2xl {
+  gap: 3rem;
+}
+
+.cia-gap-x-2xl {
+  column-gap: 3rem;
+}
+
+.cia-gap-y-2xl {
+  row-gap: 3rem;
+}
+
+.cia-gap-3xl {
+  gap: 4rem;
+}
+
+.cia-gap-x-3xl {
+  column-gap: 4rem;
+}
+
+.cia-gap-y-3xl {
+  row-gap: 4rem;
+}
+
+.cia-gap-4xl {
+  gap: 6rem;
+}
+
+.cia-gap-x-4xl {
+  column-gap: 6rem;
+}
+
+.cia-gap-y-4xl {
+  row-gap: 6rem;
+}
+
+.cia-text-1 {
+  font-size: var(--font-size-1, 0.75rem);
+}
+
+.cia-text-2 {
+  font-size: var(--font-size-2, 0.875rem);
+}
+
+.cia-text-3 {
+  font-size: var(--font-size-3, 1rem);
+}
+
+.cia-text-4 {
+  font-size: var(--font-size-4, 1.125rem);
+}
+
+.cia-text-5 {
+  font-size: var(--font-size-5, 1.25rem);
+}
+
+.cia-text-6 {
+  font-size: var(--font-size-6, 1.5rem);
+}
+
+.cia-text-7 {
+  font-size: var(--font-size-7, 1.875rem);
+}
+
+.cia-text-8 {
+  font-size: var(--font-size-8, 2.25rem);
+}
+
+.cia-text-9 {
+  font-size: var(--font-size-9, 3rem);
+}
+
+.cia-text-10 {
+  font-size: var(--font-size-10, 3.75rem);
+}
+
+.cia-text-xs {
+  font-size: var(--font-size-xs, 0.75rem);
+}
+
+.cia-text-sm {
+  font-size: var(--font-size-sm, 0.875rem);
+}
+
+.cia-text-base {
+  font-size: var(--font-size-base, 1rem);
+}
+
+.cia-text-lg {
+  font-size: var(--font-size-lg, 1.125rem);
+}
+
+.cia-text-xl {
+  font-size: var(--font-size-xl, 1.25rem);
+}
+
+.cia-text-2xl {
+  font-size: var(--font-size-2xl, 1.5rem);
+}
+
+.cia-text-3xl {
+  font-size: var(--font-size-3xl, 1.875rem);
+}
+
+.cia-text-4xl {
+  font-size: var(--font-size-4xl, 2.25rem);
+}
+
+.cia-text-5xl {
+  font-size: var(--font-size-5xl, 3rem);
+}
+
+.cia-text-6xl {
+  font-size: var(--font-size-6xl, 3.75rem);
+}
+
+.cia-font-light {
+  font-weight: var(--font-weight-light, 300);
+}
+
+.cia-font-normal {
+  font-weight: var(--font-weight-normal, 400);
+}
+
+.cia-font-medium {
+  font-weight: var(--font-weight-medium, 500);
+}
+
+.cia-font-semibold {
+  font-weight: var(--font-weight-semibold, 600);
+}
+
+.cia-font-bold {
+  font-weight: var(--font-weight-bold, 700);
+}
+
+.cia-font-black {
+  font-weight: var(--font-weight-black, 900);
+}
+
+.cia-leading-1 {
+  line-height: 1;
+}
+
+.cia-leading-2 {
+  line-height: 1.25;
+}
+
+.cia-leading-3 {
+  line-height: 1.375;
+}
+
+.cia-leading-4 {
+  line-height: 1.5;
+}
+
+.cia-leading-5 {
+  line-height: 1.625;
+}
+
+.cia-leading-6 {
+  line-height: 2;
+}
+
+.cia-leading-none {
+  line-height: 1;
+}
+
+.cia-leading-tight {
+  line-height: 1.25;
+}
+
+.cia-leading-snug {
+  line-height: 1.375;
+}
+
+.cia-leading-normal {
+  line-height: 1.5;
+}
+
+.cia-leading-relaxed {
+  line-height: 1.625;
+}
+
+.cia-leading-loose {
+  line-height: 2;
+}
+
+.cia-tracking-tighter {
+  letter-spacing: -0.05em;
+}
+
+.cia-tracking-tight {
+  letter-spacing: -0.025em;
+}
+
+.cia-tracking-normal {
+  letter-spacing: 0em;
+}
+
+.cia-tracking-wide {
+  letter-spacing: 0.025em;
+}
+
+.cia-tracking-wider {
+  letter-spacing: 0.05em;
+}
+
+.cia-tracking-widest {
+  letter-spacing: 0.1em;
+}
+
+.cia-text-left {
+  text-align: left;
+}
+
+.cia-text-center {
+  text-align: center;
+}
+
+.cia-text-right {
+  text-align: right;
+}
+
+.cia-text-justify {
+  text-align: justify;
+}
+
+.cia-uppercase {
+  text-transform: uppercase;
+}
+
+.cia-lowercase {
+  text-transform: lowercase;
+}
+
+.cia-capitalize {
+  text-transform: capitalize;
+}
+
+.cia-normal-case {
+  text-transform: none;
+}
+
+.cia-underline {
+  text-decoration: underline;
+}
+
+.cia-line-through {
+  text-decoration: line-through;
+}
+
+.cia-no-underline {
+  text-decoration: none;
+}
+
+.cia-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cia-whitespace-nowrap {
+  white-space: nowrap;
+}
+
+.cia-whitespace-normal {
+  white-space: normal;
+}
+
+.cia-break-words {
+  overflow-wrap: break-word;
+}
+
+.cia-text-text-primary {
+  color: var(--text-primary);
+}
+
+.cia-text-text-secondary {
+  color: var(--text-secondary);
+}
+
+.cia-text-text-muted {
+  color: var(--text-muted);
+}
+
+.cia-text-text-inverse {
+  color: var(--text-inverse);
+}
+
+.cia-text-text-link {
+  color: var(--text-link);
+}
+
+.cia-text-success-text {
+  color: var(--success-text);
+}
+
+.cia-text-warning-text {
+  color: var(--warning-text);
+}
+
+.cia-text-error-text {
+  color: var(--error-text);
+}
+
+.cia-text-info-text {
+  color: var(--info-text);
+}
+
+.cia-bg-background-default {
+  background-color: var(--background-default);
+}
+
+.cia-bg-background-subtle {
+  background-color: var(--background-subtle);
+}
+
+.cia-bg-background-navbar {
+  background-color: var(--background-navbar);
+}
+
+.cia-bg-surface-default {
+  background-color: var(--surface-default);
+}
+
+.cia-bg-surface-subtle {
+  background-color: var(--surface-subtle);
+}
+
+.cia-bg-surface-muted {
+  background-color: var(--surface-muted);
+}
+
+.cia-bg-surface-emphasis {
+  background-color: var(--surface-emphasis);
+}
+
+.cia-bg-success-subtle {
+  background-color: var(--success-subtle);
+}
+
+.cia-bg-warning-subtle {
+  background-color: var(--warning-subtle);
+}
+
+.cia-bg-error-subtle {
+  background-color: var(--error-subtle);
+}
+
+.cia-bg-info-subtle {
+  background-color: var(--info-subtle);
+}
+
+.cia-bg-action-primary-default {
+  background-color: var(--action-primary-default);
+}
+
+.cia-bg-action-secondary-default {
+  background-color: var(--action-secondary-default);
+}
+
+.cia-border-border-default {
+  border-color: var(--border-default);
+}
+
+.cia-border-border-subtle {
+  border-color: var(--border-subtle);
+}
+
+.cia-border-border-emphasis {
+  border-color: var(--border-emphasis);
+}
+
+.cia-border-border-focus {
+  border-color: var(--border-focus);
+}
+
+.cia-block {
+  display: block;
+}
+
+.cia-inline-block {
+  display: inline-block;
+}
+
+.cia-inline {
+  display: inline;
+}
+
+.cia-flex {
+  display: flex;
+}
+
+.cia-inline-flex {
+  display: inline-flex;
+}
+
+.cia-grid {
+  display: grid;
+}
+
+.cia-inline-grid {
+  display: inline-grid;
+}
+
+.cia-hidden {
+  display: none;
+}
+
+.cia-contents {
+  display: contents;
+}
+
+.cia-flex-row {
+  flex-direction: row;
+}
+
+.cia-flex-row-reverse {
+  flex-direction: row-reverse;
+}
+
+.cia-flex-col {
+  flex-direction: column;
+}
+
+.cia-flex-col-reverse {
+  flex-direction: column-reverse;
+}
+
+.cia-flex-wrap {
+  flex-wrap: wrap;
+}
+
+.cia-flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+.cia-flex-wrap-reverse {
+  flex-wrap: wrap-reverse;
+}
+
+.cia-flex-1 {
+  flex: 1 1 0%;
+}
+
+.cia-flex-auto {
+  flex: 1 1 auto;
+}
+
+.cia-flex-initial {
+  flex: 0 1 auto;
+}
+
+.cia-flex-none {
+  flex: none;
+}
+
+.cia-flex-grow {
+  flex-grow: 1;
+}
+
+.cia-flex-grow-0 {
+  flex-grow: 0;
+}
+
+.cia-flex-shrink {
+  flex-shrink: 1;
+}
+
+.cia-flex-shrink-0 {
+  flex-shrink: 0;
+}
+
+.cia-items-start {
+  align-items: flex-start;
+}
+
+.cia-items-end {
+  align-items: flex-end;
+}
+
+.cia-items-center {
+  align-items: center;
+}
+
+.cia-items-baseline {
+  align-items: baseline;
+}
+
+.cia-items-stretch {
+  align-items: stretch;
+}
+
+.cia-justify-start {
+  justify-content: flex-start;
+}
+
+.cia-justify-end {
+  justify-content: flex-end;
+}
+
+.cia-justify-center {
+  justify-content: center;
+}
+
+.cia-justify-between {
+  justify-content: space-between;
+}
+
+.cia-justify-around {
+  justify-content: space-around;
+}
+
+.cia-justify-evenly {
+  justify-content: space-evenly;
+}
+
+.cia-self-auto {
+  align-self: auto;
+}
+
+.cia-self-start {
+  align-self: flex-start;
+}
+
+.cia-self-end {
+  align-self: flex-end;
+}
+
+.cia-self-center {
+  align-self: center;
+}
+
+.cia-self-stretch {
+  align-self: stretch;
+}
+
+.cia-flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cia-flex-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.cia-stack {
+  display: flex;
+  flex-direction: column;
+}
+
+.cia-grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+.cia-grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.cia-grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.cia-grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.cia-grid-cols-6 {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+
+.cia-grid-cols-12 {
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+}
+
+.cia-col-span-1 {
+  grid-column: span 1/span 1;
+}
+
+.cia-col-span-2 {
+  grid-column: span 2/span 2;
+}
+
+.cia-col-span-3 {
+  grid-column: span 3/span 3;
+}
+
+.cia-col-span-4 {
+  grid-column: span 4/span 4;
+}
+
+.cia-col-span-6 {
+  grid-column: span 6/span 6;
+}
+
+.cia-col-span-12 {
+  grid-column: span 12/span 12;
+}
+
+.cia-col-span-full {
+  grid-column: 1/-1;
+}
+
+.cia-static {
+  position: static;
+}
+
+.cia-relative {
+  position: relative;
+}
+
+.cia-absolute {
+  position: absolute;
+}
+
+.cia-fixed {
+  position: fixed;
+}
+
+.cia-sticky {
+  position: sticky;
+}
+
+.cia-inset-0 {
+  inset: 0;
+}
+
+.cia-top-0 {
+  top: 0;
+}
+
+.cia-right-0 {
+  right: 0;
+}
+
+.cia-bottom-0 {
+  bottom: 0;
+}
+
+.cia-left-0 {
+  left: 0;
+}
+
+.cia-w-full {
+  width: 100%;
+}
+
+.cia-w-screen {
+  width: 100vw;
+}
+
+.cia-w-auto {
+  width: auto;
+}
+
+.cia-w-fit {
+  width: fit-content;
+}
+
+.cia-w-min {
+  width: min-content;
+}
+
+.cia-w-max {
+  width: max-content;
+}
+
+.cia-min-w-0 {
+  min-width: 0;
+}
+
+.cia-min-w-full {
+  min-width: 100%;
+}
+
+.cia-max-w-none {
+  max-width: none;
+}
+
+.cia-max-w-full {
+  max-width: 100%;
+}
+
+.cia-h-full {
+  height: 100%;
+}
+
+.cia-h-screen {
+  height: 100vh;
+}
+
+.cia-h-auto {
+  height: auto;
+}
+
+.cia-h-fit {
+  height: fit-content;
+}
+
+.cia-min-h-0 {
+  min-height: 0;
+}
+
+.cia-min-h-screen {
+  min-height: 100vh;
+}
+
+.cia-min-h-full {
+  min-height: 100%;
+}
+
+.cia-border {
+  border: 1px solid var(--border-default);
+}
+
+.cia-border-0 {
+  border: 0;
+}
+
+.cia-border-t {
+  border-top: 1px solid var(--border-default);
+}
+
+.cia-border-r {
+  border-right: 1px solid var(--border-default);
+}
+
+.cia-border-b {
+  border-bottom: 1px solid var(--border-default);
+}
+
+.cia-border-l {
+  border-left: 1px solid var(--border-default);
+}
+
+.cia-rounded-none {
+  border-radius: var(--radius-none, 0);
+}
+
+.cia-rounded-sm {
+  border-radius: var(--radius-sm, 0.25rem);
+}
+
+.cia-rounded-md {
+  border-radius: var(--radius-md, 0.375rem);
+}
+
+.cia-rounded-lg {
+  border-radius: var(--radius-lg, 0.5rem);
+}
+
+.cia-rounded-xl {
+  border-radius: var(--radius-xl, 0.75rem);
+}
+
+.cia-rounded-2xl {
+  border-radius: var(--radius-2xl, 1rem);
+}
+
+.cia-rounded-full {
+  border-radius: var(--radius-full, 9999px);
+}
+
+.cia-shadow-1 {
+  box-shadow: var(--shadow-1, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
+}
+
+.cia-shadow-2 {
+  box-shadow: var(--shadow-2, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1));
+}
+
+.cia-shadow-3 {
+  box-shadow: var(--shadow-3, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1));
+}
+
+.cia-shadow-4 {
+  box-shadow: var(--shadow-4, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1));
+}
+
+.cia-shadow-5 {
+  box-shadow: var(--shadow-5, 0 25px 50px -12px rgba(0, 0, 0, 0.25));
+}
+
+.cia-shadow-sm {
+  box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
+}
+
+.cia-shadow-md {
+  box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1));
+}
+
+.cia-shadow-lg {
+  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1));
+}
+
+.cia-shadow-xl {
+  box-shadow: var(--shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1));
+}
+
+.cia-shadow-2xl {
+  box-shadow: var(--shadow-2xl, 0 25px 50px -12px rgba(0, 0, 0, 0.25));
+}
+
+.cia-shadow-inner {
+  box-shadow: var(--shadow-inner, inset 0 2px 4px 0 rgba(0, 0, 0, 0.05));
+}
+
+.cia-shadow-none {
+  box-shadow: var(--shadow-none, none);
+}
+
+.cia-opacity-0 {
+  opacity: 0;
+}
+
+.cia-opacity-5 {
+  opacity: 0.05;
+}
+
+.cia-opacity-10 {
+  opacity: 0.1;
+}
+
+.cia-opacity-20 {
+  opacity: 0.2;
+}
+
+.cia-opacity-25 {
+  opacity: 0.25;
+}
+
+.cia-opacity-30 {
+  opacity: 0.3;
+}
+
+.cia-opacity-40 {
+  opacity: 0.4;
+}
+
+.cia-opacity-50 {
+  opacity: 0.5;
+}
+
+.cia-opacity-60 {
+  opacity: 0.6;
+}
+
+.cia-opacity-70 {
+  opacity: 0.7;
+}
+
+.cia-opacity-75 {
+  opacity: 0.75;
+}
+
+.cia-opacity-80 {
+  opacity: 0.8;
+}
+
+.cia-opacity-90 {
+  opacity: 0.9;
+}
+
+.cia-opacity-95 {
+  opacity: 0.95;
+}
+
+.cia-opacity-100 {
+  opacity: 1;
+}
+
+.cia-z-hide {
+  z-index: -1;
+}
+
+.cia-z-base {
+  z-index: 0;
+}
+
+.cia-z-dropdown {
+  z-index: 1000;
+}
+
+.cia-z-sticky {
+  z-index: 1100;
+}
+
+.cia-z-fixed {
+  z-index: 1200;
+}
+
+.cia-z-backdrop {
+  z-index: 1300;
+}
+
+.cia-z-modal {
+  z-index: 1400;
+}
+
+.cia-z-popover {
+  z-index: 1500;
+}
+
+.cia-z-tooltip {
+  z-index: 1600;
+}
+
+.cia-z-toast {
+  z-index: 1700;
+}
+
+.cia-overflow-auto {
+  overflow: auto;
+}
+
+.cia-overflow-hidden {
+  overflow: hidden;
+}
+
+.cia-overflow-visible {
+  overflow: visible;
+}
+
+.cia-overflow-scroll {
+  overflow: scroll;
+}
+
+.cia-overflow-x-auto {
+  overflow-x: auto;
+}
+
+.cia-overflow-y-auto {
+  overflow-y: auto;
+}
+
+.cia-overflow-x-hidden {
+  overflow-x: hidden;
+}
+
+.cia-overflow-y-hidden {
+  overflow-y: hidden;
+}
+
+.cia-cursor-pointer {
+  cursor: pointer;
+}
+
+.cia-cursor-default {
+  cursor: default;
+}
+
+.cia-cursor-not-allowed {
+  cursor: not-allowed;
+}
+
+.cia-pointer-events-none {
+  pointer-events: none;
+}
+
+.cia-pointer-events-auto {
+  pointer-events: auto;
+}
+
+.cia-select-none {
+  user-select: none;
+}
+
+.cia-select-text {
+  user-select: text;
+}
+
+.cia-select-all {
+  user-select: all;
+}
+
+.cia-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.cia-not-sr-only {
+  position: static;
+  width: auto;
+  height: auto;
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+  border: 0;
+}
+
+:where(:root) {
+  --brand-primary: #3A5FCD;
+  --brand-primary-hover: #2E4A99;
+  --brand-primary-active: #1E3A8A;
+  --brand-secondary: #FF6B6B;
+  --brand-secondary-hover: #E85555;
+  --brand-secondary-active: #C55;
+  --brand-accent: #09F;
+  --brand-accent-hover: #0088E6;
+  --background-default: #FFF;
+  --background-subtle: #F8F6F0;
+  --background-navbar: #FAFAFA;
+  --surface-default: #FFF;
+  --surface-subtle: #F8F6F0;
+  --surface-muted: #F5F5F5;
+  --surface-emphasis: #E5E5E5;
+  --text-primary: #0f0f0f;
+  --text-secondary: #525252;
+  --text-muted: #6b6b6b;
+  --text-inverse: #fff;
+  --text-link: #384fff;
+  --text-link-hover: #2a3acc;
+  --border-default: #e5e5e5;
+  --border-subtle: #f5f5f5;
+  --border-emphasis: #d4d4d4;
+  --border-focus: #384fff;
+  --interactive-hover: rgba(0, 0, 0, 0.03);
+  --interactive-active: rgba(0, 0, 0, 0.06);
+  --action-primary-default: #3A5FCD;
+  --action-primary-hover: #2E4A99;
+  --action-primary-active: #1E3A8A;
+  --action-secondary-default: #FF6B6B;
+  --action-secondary-hover: #E85555;
+  --action-secondary-active: #C55;
+  --success-default: #10b981;
+  --success-hover: #059669;
+  --success-subtle: #ecfdf5;
+  --success-text: #065f46;
+  --warning-default: #f59e0b;
+  --warning-hover: #d97706;
+  --warning-subtle: #fffbeb;
+  --warning-text: #92400e;
+  --error-default: #DC2626;
+  --error-hover: #B91C1C;
+  --error-subtle: #FEF2F2;
+  --error-text: #991B1B;
+  --info-default: #3A5FCD;
+  --info-hover: #2E4A99;
+  --info-subtle: #EFF6FF;
+  --info-text: #1E3A8A;
+  --radius-none: 0;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-full: 9999px;
+  --shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  --shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  --shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+  --shadow-5: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
+  --shadow-none: none;
+  --font-primary: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
+  --font-secondary: Georgia, Times New Roman, serif;
+  --font-mono: Fira Code, Consolas, Monaco, monospace;
+  --space-1: 0.5rem;
+  --space-2: 0.75rem;
+  --space-3: 0.875rem;
+  --space-4: 1rem;
+  --space-5: 1.5rem;
+  --space-6: 2rem;
+  --space-7: 3rem;
+  --space-8: 4rem;
+  --space-9: 6rem;
+  --space-0: 0;
+  --space-none: 0;
+  --space-2xs: 0.25rem;
+  --space-xs: var(--space-1);
+  --space-sm: var(--space-2);
+  --space-md: var(--space-4);
+  --space-lg: var(--space-5);
+  --space-xl: var(--space-6);
+  --space-2xl: var(--space-7);
+  --space-3xl: var(--space-8);
+  --space-4xl: var(--space-9);
+  --z-hide: -1;
+  --z-base: 0;
+  --z-dropdown: 1000;
+  --z-sticky: 1100;
+  --z-fixed: 1200;
+  --z-backdrop: 1300;
+  --z-modal: 1400;
+  --z-popover: 1500;
+  --z-tooltip: 1600;
+  --z-toast: 1700;
+  --font-size-1: 0.75rem;
+  --font-size-2: 0.875rem;
+  --font-size-3: 1rem;
+  --font-size-4: 1.125rem;
+  --font-size-5: 1.25rem;
+  --font-size-6: 1.5rem;
+  --font-size-7: 1.875rem;
+  --font-size-8: 2.25rem;
+  --font-size-9: 3rem;
+  --font-size-10: 3.75rem;
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  --font-size-3xl: 1.875rem;
+  --font-size-4xl: 2.25rem;
+  --font-size-5xl: 3rem;
+  --font-size-6xl: 3.75rem;
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-black: 900;
+  --line-height-1: 1;
+  --line-height-2: 1.25;
+  --line-height-3: 1.375;
+  --line-height-4: 1.5;
+  --line-height-5: 1.625;
+  --line-height-6: 2;
+  --line-height-none: 1;
+  --line-height-tight: 1.25;
+  --line-height-snug: 1.375;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.625;
+  --line-height-loose: 2;
+  --duration-instant: 0ms;
+  --duration-fast: 150ms;
+  --duration-normal: 250ms;
+  --duration-slow: 400ms;
+  --duration-slower: 600ms;
+  --opacity-0: 0;
+  --opacity-5: 0.05;
+  --opacity-10: 0.1;
+  --opacity-20: 0.2;
+  --opacity-25: 0.25;
+  --opacity-30: 0.3;
+  --opacity-40: 0.4;
+  --opacity-50: 0.5;
+  --opacity-60: 0.6;
+  --opacity-70: 0.7;
+  --opacity-75: 0.75;
+  --opacity-80: 0.8;
+  --opacity-90: 0.9;
+  --opacity-95: 0.95;
+  --opacity-100: 1;
+  --btn-padding-y: var(--space-1, 0.5rem);
+  --btn-padding-x: var(--space-4, 1rem);
+  --btn-radius: var(--radius-md, 0.25rem);
+  --btn-font-weight: var(--font-weight-medium, 500);
+  --btn-font-size: var(--font-size-base, 1rem);
+  --btn-border-width: 1px;
+  --card-padding: var(--space-4, 1rem);
+  --card-radius: var(--radius-lg, 0.5rem);
+  --card-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
+  --card-border: 1px solid var(--border-default);
+  --input-padding-y: var(--space-1, 0.5rem);
+  --input-padding-x: var(--space-2, 0.75rem);
+  --input-radius: var(--radius-md, 0.25rem);
+  --input-border-width: 1px;
+  --alert-padding-y: var(--space-2, 0.75rem);
+  --alert-padding-x: var(--space-4, 1rem);
+  --alert-radius: var(--radius-md, 0.25rem);
+  --badge-padding-y: var(--space-1, 0.5rem);
+  --badge-padding-x: var(--space-1, 0.5rem);
+  --badge-radius: var(--radius-full, 9999px);
+  --tag-padding-y: var(--space-2xs, 0.25rem);
+  --tag-padding-x: var(--space-2, 0.75rem);
+  --tag-radius: var(--radius-md, 0.25rem);
+  --modal-padding: var(--space-5, 1.5rem);
+  --modal-radius: var(--radius-xl, 0.75rem);
+  --modal-shadow: var(--shadow-2xl, 0 25px 50px -12px rgba(0, 0, 0, 0.25));
+  --popover-padding: var(--space-4, 1rem);
+  --popover-radius: var(--radius-lg, 0.5rem);
+  --popover-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
+  --tooltip-padding-y: var(--space-1, 0.5rem);
+  --tooltip-padding-x: var(--space-1, 0.5rem);
+  --tooltip-radius: var(--radius-md, 0.25rem);
+  --dropdown-radius: var(--radius-md, 0.25rem);
+  --dropdown-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
+}
+
+[data-theme=light] {
+  --brand-primary: #3A5FCD;
+  --brand-primary-hover: #2E4A99;
+  --brand-primary-active: #1E3A8A;
+  --brand-secondary: #FF6B6B;
+  --brand-secondary-hover: #E85555;
+  --brand-secondary-active: #C55;
+  --brand-accent: #09F;
+  --brand-accent-hover: #0088E6;
+  --background-default: #FFF;
+  --background-subtle: #F8F6F0;
+  --background-navbar: #FAFAFA;
+  --surface-default: #FFF;
+  --surface-subtle: #F8F6F0;
+  --surface-muted: #F5F5F5;
+  --surface-emphasis: #E5E5E5;
+  --text-primary: #0f0f0f;
+  --text-secondary: #525252;
+  --text-muted: #6b6b6b;
+  --text-inverse: #fff;
+  --text-link: #384fff;
+  --text-link-hover: #2a3acc;
+  --border-default: #e5e5e5;
+  --border-subtle: #f5f5f5;
+  --border-emphasis: #d4d4d4;
+  --border-focus: #384fff;
+  --interactive-hover: rgba(0, 0, 0, 0.03);
+  --interactive-active: rgba(0, 0, 0, 0.06);
+  --action-primary-default: #3A5FCD;
+  --action-primary-hover: #2E4A99;
+  --action-primary-active: #1E3A8A;
+  --action-secondary-default: #FF6B6B;
+  --action-secondary-hover: #E85555;
+  --action-secondary-active: #C55;
+  --success-default: #10b981;
+  --success-hover: #059669;
+  --success-subtle: #ecfdf5;
+  --success-text: #065f46;
+  --warning-default: #f59e0b;
+  --warning-hover: #d97706;
+  --warning-subtle: #fffbeb;
+  --warning-text: #92400e;
+  --error-default: #DC2626;
+  --error-hover: #B91C1C;
+  --error-subtle: #FEF2F2;
+  --error-text: #991B1B;
+  --info-default: #3A5FCD;
+  --info-hover: #2E4A99;
+  --info-subtle: #EFF6FF;
+  --info-text: #1E3A8A;
+  --radius-none: 0;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-full: 9999px;
+  --shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  --shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  --shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+  --shadow-5: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
+  --shadow-none: none;
+  --font-primary: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
+  --font-secondary: Georgia, Times New Roman, serif;
+  --font-mono: Fira Code, Consolas, Monaco, monospace;
+  --space-1: 0.5rem;
+  --space-2: 0.75rem;
+  --space-3: 0.875rem;
+  --space-4: 1rem;
+  --space-5: 1.5rem;
+  --space-6: 2rem;
+  --space-7: 3rem;
+  --space-8: 4rem;
+  --space-9: 6rem;
+  --space-0: 0;
+  --space-none: 0;
+  --space-2xs: 0.25rem;
+  --space-xs: var(--space-1);
+  --space-sm: var(--space-2);
+  --space-md: var(--space-4);
+  --space-lg: var(--space-5);
+  --space-xl: var(--space-6);
+  --space-2xl: var(--space-7);
+  --space-3xl: var(--space-8);
+  --space-4xl: var(--space-9);
+  --z-hide: -1;
+  --z-base: 0;
+  --z-dropdown: 1000;
+  --z-sticky: 1100;
+  --z-fixed: 1200;
+  --z-backdrop: 1300;
+  --z-modal: 1400;
+  --z-popover: 1500;
+  --z-tooltip: 1600;
+  --z-toast: 1700;
+  --font-size-1: 0.75rem;
+  --font-size-2: 0.875rem;
+  --font-size-3: 1rem;
+  --font-size-4: 1.125rem;
+  --font-size-5: 1.25rem;
+  --font-size-6: 1.5rem;
+  --font-size-7: 1.875rem;
+  --font-size-8: 2.25rem;
+  --font-size-9: 3rem;
+  --font-size-10: 3.75rem;
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  --font-size-3xl: 1.875rem;
+  --font-size-4xl: 2.25rem;
+  --font-size-5xl: 3rem;
+  --font-size-6xl: 3.75rem;
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-black: 900;
+  --line-height-1: 1;
+  --line-height-2: 1.25;
+  --line-height-3: 1.375;
+  --line-height-4: 1.5;
+  --line-height-5: 1.625;
+  --line-height-6: 2;
+  --line-height-none: 1;
+  --line-height-tight: 1.25;
+  --line-height-snug: 1.375;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.625;
+  --line-height-loose: 2;
+  --duration-instant: 0ms;
+  --duration-fast: 150ms;
+  --duration-normal: 250ms;
+  --duration-slow: 400ms;
+  --duration-slower: 600ms;
+  --opacity-0: 0;
+  --opacity-5: 0.05;
+  --opacity-10: 0.1;
+  --opacity-20: 0.2;
+  --opacity-25: 0.25;
+  --opacity-30: 0.3;
+  --opacity-40: 0.4;
+  --opacity-50: 0.5;
+  --opacity-60: 0.6;
+  --opacity-70: 0.7;
+  --opacity-75: 0.75;
+  --opacity-80: 0.8;
+  --opacity-90: 0.9;
+  --opacity-95: 0.95;
+  --opacity-100: 1;
+  --btn-padding-y: var(--space-1, 0.5rem);
+  --btn-padding-x: var(--space-4, 1rem);
+  --btn-radius: var(--radius-md, 0.25rem);
+  --btn-font-weight: var(--font-weight-medium, 500);
+  --btn-font-size: var(--font-size-base, 1rem);
+  --btn-border-width: 1px;
+  --card-padding: var(--space-4, 1rem);
+  --card-radius: var(--radius-lg, 0.5rem);
+  --card-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
+  --card-border: 1px solid var(--border-default);
+  --input-padding-y: var(--space-1, 0.5rem);
+  --input-padding-x: var(--space-2, 0.75rem);
+  --input-radius: var(--radius-md, 0.25rem);
+  --input-border-width: 1px;
+  --alert-padding-y: var(--space-2, 0.75rem);
+  --alert-padding-x: var(--space-4, 1rem);
+  --alert-radius: var(--radius-md, 0.25rem);
+  --badge-padding-y: var(--space-1, 0.5rem);
+  --badge-padding-x: var(--space-1, 0.5rem);
+  --badge-radius: var(--radius-full, 9999px);
+  --tag-padding-y: var(--space-2xs, 0.25rem);
+  --tag-padding-x: var(--space-2, 0.75rem);
+  --tag-radius: var(--radius-md, 0.25rem);
+  --modal-padding: var(--space-5, 1.5rem);
+  --modal-radius: var(--radius-xl, 0.75rem);
+  --modal-shadow: var(--shadow-2xl, 0 25px 50px -12px rgba(0, 0, 0, 0.25));
+  --popover-padding: var(--space-4, 1rem);
+  --popover-radius: var(--radius-lg, 0.5rem);
+  --popover-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
+  --tooltip-padding-y: var(--space-1, 0.5rem);
+  --tooltip-padding-x: var(--space-1, 0.5rem);
+  --tooltip-radius: var(--radius-md, 0.25rem);
+  --dropdown-radius: var(--radius-md, 0.25rem);
+  --dropdown-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
+}
+
+[data-theme=dark] {
+  --background-default: #0a0a0a;
+  --background-subtle: #151515;
+  --background-navbar: #1a1a1a;
+  --surface-default: #151515;
+  --surface-subtle: #1f1f1f;
+  --surface-muted: #2a2a2a;
+  --surface-emphasis: #353535;
+  --text-primary: #FFF;
+  --text-secondary: #b8b8b8;
+  --text-muted: #768194;
+  --text-inverse: #0a0a0a;
+  --text-link: #09f;
+  --text-link-hover: #5ebbff;
+  --border-default: #2a2a2a;
+  --border-subtle: #1f1f1f;
+  --border-emphasis: #404040;
+  --border-focus: #09f;
+  --interactive-hover: rgba(255, 255, 255, 0.05);
+  --interactive-active: rgba(255, 255, 255, 0.1);
+  --action-primary-default: #6B8FE8;
+  --action-primary-hover: #8BABF5;
+  --action-primary-active: #3A5FCD;
+  --action-secondary-default: #FF8A8A;
+  --action-secondary-hover: #FFACAC;
+  --action-secondary-active: #FF6B6B;
+  --success-default: #34d399;
+  --success-hover: #10b981;
+  --success-subtle: #064e3b;
+  --success-text: #6ee7b7;
+  --warning-default: #fbbf24;
+  --warning-hover: #f59e0b;
+  --warning-subtle: #451a03;
+  --warning-text: #fcd34d;
+  --error-default: #f87171;
+  --error-hover: #ef4444;
+  --error-subtle: #450a0a;
+  --error-text: #fca5a5;
+  --info-default: #60a5fa;
+  --info-hover: #3b82f6;
+  --info-subtle: #172554;
+  --info-text: #93c5fd;
+  --shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  --shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
+  --shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
+  --shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
+  --shadow-5: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
+  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
+  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3);
+  --shadow-none: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme=light]) {
+    --background-default: #0a0a0a;
+    --background-subtle: #151515;
+    --background-navbar: #1a1a1a;
+    --surface-default: #151515;
+    --surface-subtle: #1f1f1f;
+    --surface-muted: #2a2a2a;
+    --surface-emphasis: #353535;
+    --text-primary: #FFF;
+    --text-secondary: #b8b8b8;
+    --text-muted: #768194;
+    --text-inverse: #0a0a0a;
+    --text-link: #09f;
+    --text-link-hover: #5ebbff;
+    --border-default: #2a2a2a;
+    --border-subtle: #1f1f1f;
+    --border-emphasis: #404040;
+    --border-focus: #09f;
+    --interactive-hover: rgba(255, 255, 255, 0.05);
+    --interactive-active: rgba(255, 255, 255, 0.1);
+    --action-primary-default: #6B8FE8;
+    --action-primary-hover: #8BABF5;
+    --action-primary-active: #3A5FCD;
+    --action-secondary-default: #FF8A8A;
+    --action-secondary-hover: #FFACAC;
+    --action-secondary-active: #FF6B6B;
+    --success-default: #34d399;
+    --success-hover: #10b981;
+    --success-subtle: #064e3b;
+    --success-text: #6ee7b7;
+    --warning-default: #fbbf24;
+    --warning-hover: #f59e0b;
+    --warning-subtle: #451a03;
+    --warning-text: #fcd34d;
+    --error-default: #f87171;
+    --error-hover: #ef4444;
+    --error-subtle: #450a0a;
+    --error-text: #fca5a5;
+    --info-default: #60a5fa;
+    --info-hover: #3b82f6;
+    --info-subtle: #172554;
+    --info-text: #93c5fd;
+    --shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+    --shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
+    --shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
+    --shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
+    --shadow-5: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
+    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
+    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
+    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3);
+    --shadow-none: none;
+  }
+}
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  margin: 0;
+  font-family: var(--font-primary, Inter, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif);
+  font-size: var(--font-size-base, 1rem);
+  line-height: var(--line-height-normal, 1.5);
+  color: var(--text-primary, #0f0f0f);
+  background: var(--surface-default, #FFF);
+}
+
+h1 {
+  margin: 0;
+  padding: 0;
+  font: inherit;
+}
+
+h2 {
+  margin: 0;
+  padding: 0;
+  font: inherit;
+}
+
+h3 {
+  margin: 0;
+  padding: 0;
+  font: inherit;
+}
+
+h4 {
+  margin: 0;
+  padding: 0;
+  font: inherit;
+}
+
+h5 {
+  margin: 0;
+  padding: 0;
+  font: inherit;
+}
+
+h6 {
+  margin: 0;
+  padding: 0;
+  font: inherit;
+}
+
+input, button, select, textarea {
+  font: inherit;
+  color: inherit;
+}
+
+input:not([type=checkbox]):not([type=radio]),
+select,
+textarea {
+  width: 100%;
+}
+
+a {
+  color: var(--text-link, #384fff);
+  text-decoration: none;
+  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  a {
+    transition: none;
+  }
+}
+a:hover {
+  color: var(--text-link-hover, #2a3acc);
+}
+
+:focus-visible {
+  outline: 2px solid var(--border-focus, #384fff);
+  outline-offset: 2px;
+}
+
+:focus:not(:focus-visible) {
+  outline: none;
+}