@zhang_jifan/fanui 2.1.0

package/dist/modules/fanui-base.css

@@ -0,0 +1,1394 @@
+/* fanUI v2.1.0 · module: base（独立产物，自带令牌） */
+@charset "UTF-8";
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  -moz-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  scroll-behavior: smooth;
+  font-size: 100%;
+  line-height: 1;
+  tab-size: 4;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  text-rendering: optimizeLegibility;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+}
+body {
+  margin: 0;
+  min-height: 100vh;
+  font-family: var(--fanui-font-base, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji);
+  font-size: var(--fanui-font-size-base, 14px);
+  font-weight: 400;
+  line-height: var(--fanui-line-height-base, 1.5715);
+  color: var(--fanui-color-text);
+  background-color: var(--fanui-color-bg);
+  transition: color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0s, background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+main,
+article,
+aside,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section,
+details,
+summary,
+figcaption {
+  display: block;
+}
+
+h1, h2, h3, h4, h5, h6,
+p,
+figure,
+blockquote,
+dl,
+dd,
+ol,
+ul,
+pre {
+  margin: 0;
+}
+
+ol[class],
+ul[class],
+li[class] {
+  list-style: none;
+  padding: 0;
+}
+
+a {
+  color: var(--fanui-primary);
+  text-decoration: none;
+  background-color: transparent;
+  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+}
+a:hover {
+  color: var(--fanui-primary-hover);
+  text-decoration: underline;
+}
+a:active {
+  color: var(--fanui-primary-active);
+}
+a:focus-visible {
+  outline: 0;
+  box-shadow: 0 0 0 var(--fanui-focus-ring-offset, 1px) var(--fanui-color-surface, #fff), 0 0 0 calc(var(--fanui-focus-ring-offset, 1px) + var(--fanui-focus-ring-width, 3px)) var(--fanui-focus-ring-color, rgba(14, 116, 144, 0.3));
+}
+@media (forced-colors: active) {
+  a:focus-visible {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+  }
+}
+a:focus-visible {
+  border-radius: 2px;
+}
+
+b,
+strong {
+  font-weight: 700;
+}
+
+small {
+  font-size: 0.875em;
+}
+
+sub,
+sup {
+  position: relative;
+  font-size: 0.75em;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+img,
+video {
+  height: auto;
+  border-style: none;
+}
+
+svg {
+  overflow: hidden;
+  vertical-align: middle;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: 100%;
+  line-height: inherit;
+  color: inherit;
+}
+
+button,
+[type=button],
+[type=reset],
+[type=submit],
+[role=button] {
+  -webkit-appearance: button;
+  cursor: pointer;
+  text-transform: none;
+  background-color: transparent;
+  background-image: none;
+  border: 0;
+  padding: 0;
+}
+
+::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+fieldset {
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+legend {
+  padding: 0;
+  display: table;
+  max-width: 100%;
+  white-space: normal;
+  color: inherit;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+textarea {
+  resize: vertical;
+  overflow: auto;
+}
+
+[type=search] {
+  outline-offset: -2px;
+  -webkit-appearance: textfield;
+  appearance: textfield;
+}
+[type=search]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit;
+}
+
+[type=number]::-webkit-outer-spin-button, [type=number]::-webkit-inner-spin-button {
+  height: auto;
+  -webkit-appearance: none;
+  margin: 0;
+}
+[type=number] {
+  -moz-appearance: textfield;
+}
+
+[hidden],
+template {
+  display: none !important;
+}
+
+iframe {
+  border: 0;
+  display: block;
+}
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+  margin: 1em 0;
+  border: 0;
+  border-top: var(--fanui-border-width, 1px) solid var(--fanui-color-border);
+  opacity: 1;
+  color: inherit;
+}
+
+abbr[title] {
+  text-decoration: underline dotted;
+  cursor: help;
+}
+
+code,
+kbd,
+samp,
+pre {
+  font-family: var(--fanui-font-mono, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, Courier New, monospace);
+  font-size: 1em;
+}
+
+pre {
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+summary {
+  display: list-item;
+  cursor: pointer;
+}
+
+details > summary::-webkit-details-marker {
+  display: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  text-indent: 0;
+}
+
+th {
+  text-align: inherit;
+  text-align: -webkit-match-parent;
+}
+
+html {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(100, 116, 139, 0.45) transparent;
+}
+html::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+html::-webkit-scrollbar-track {
+  background: transparent;
+}
+html::-webkit-scrollbar-thumb {
+  background: rgba(100, 116, 139, 0.45);
+  border-radius: 9999px;
+}
+html::-webkit-scrollbar-thumb:hover {
+  background: rgba(100, 116, 139, 0.7);
+}
+
+::selection {
+  background-color: var(--fanui-primary-soft);
+  color: var(--fanui-primary-active);
+}
+
+.fanui-skip-link {
+  position: fixed;
+  top: -100%;
+  left: var(--fanui-space-4);
+  z-index: calc(var(--fanui-z-toast) + 1);
+  padding: 10px 18px;
+  border-radius: var(--fanui-radius-md);
+  background-color: var(--fanui-primary);
+  color: var(--fanui-primary-fg);
+  font-size: var(--fanui-font-size-sm);
+  font-weight: var(--fanui-font-weight-semibold);
+  text-decoration: none;
+  box-shadow: var(--fanui-shadow-lg);
+  transition: top 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+}
+.fanui-skip-link:focus {
+  top: var(--fanui-space-3);
+  outline: 3px solid var(--fanui-primary-ring);
+  outline-offset: 2px;
+}
+
+.fanui-visually-hidden,
+.fanui-sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+.fanui-sr-only-focusable {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+.fanui-sr-only-focusable:active, .fanui-sr-only-focusable:focus {
+  position: static !important;
+  width: auto !important;
+  height: auto !important;
+  margin: 0 !important;
+  overflow: visible !important;
+  clip: auto !important;
+  white-space: normal !important;
+}
+
+.fanui-no-scrollbar {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.fanui-no-scrollbar::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+:focus-visible {
+  outline: 2px solid var(--fanui-primary-ring);
+  outline-offset: 1px;
+}
+
+@media (forced-colors: active) {
+  :focus-visible {
+    outline: 2px solid transparent;
+  }
+}
+.fanui-font-sans {
+  font-family: var(--fanui-font-sans);
+}
+
+.fanui-font-serif {
+  font-family: var(--fanui-font-serif);
+}
+
+.fanui-font-mono {
+  font-family: var(--fanui-font-mono);
+}
+
+h1, h2, h3, h4, h5, h6,
+.fanui-h1, .fanui-h2, .fanui-h3, .fanui-h4, .fanui-h5, .fanui-h6 {
+  margin-top: 0;
+  margin-bottom: var(--fanui-heading-margin-bottom, 0.5em);
+  font-weight: 600;
+  line-height: 1.25;
+  color: var(--fanui-color-text-strong);
+  text-wrap: balance;
+}
+
+h1, .fanui-h1 {
+  font-size: var(--fanui-font-size-3xl);
+  letter-spacing: -0.02em;
+}
+
+h2, .fanui-h2 {
+  font-size: var(--fanui-font-size-2xl);
+  letter-spacing: -0.015em;
+}
+
+h3, .fanui-h3 {
+  font-size: var(--fanui-font-size-xl);
+}
+
+h4, .fanui-h4 {
+  font-size: var(--fanui-font-size-lg);
+}
+
+h5, .fanui-h5 {
+  font-size: var(--fanui-font-size-md);
+}
+
+h6, .fanui-h6 {
+  font-size: var(--fanui-font-size-base);
+}
+
+.fanui-display-1 {
+  font-size: var(--fanui-font-size-6xl);
+  font-weight: 800;
+  line-height: 1.1;
+  letter-spacing: -0.025em;
+}
+
+.fanui-display-2 {
+  font-size: var(--fanui-font-size-5xl);
+  font-weight: 800;
+  line-height: 1.15;
+  letter-spacing: -0.02em;
+}
+
+.fanui-display-3 {
+  font-size: var(--fanui-font-size-4xl);
+  font-weight: 700;
+  line-height: 1.2;
+  letter-spacing: -0.02em;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: var(--fanui-paragraph-margin-bottom, 1em);
+}
+
+.fanui-lead {
+  font-size: var(--fanui-font-size-md);
+  line-height: var(--fanui-line-height-relaxed);
+  color: var(--fanui-color-text-muted);
+}
+
+.fanui-text-muted {
+  color: var(--fanui-color-text-muted);
+}
+
+.fanui-text-subtle {
+  color: var(--fanui-color-text-subtle);
+}
+
+.fanui-text-strong {
+  color: var(--fanui-color-text-strong);
+  font-weight: 600;
+}
+
+.fanui-text-inverse {
+  color: var(--fanui-color-text-inverse);
+}
+
+.fanui-text-primary {
+  color: var(--fanui-primary);
+}
+
+.fanui-text-accent {
+  color: var(--fanui-accent);
+}
+
+.fanui-text-success {
+  color: var(--fanui-success);
+}
+
+.fanui-text-warning {
+  color: var(--fanui-warning);
+}
+
+.fanui-text-danger {
+  color: var(--fanui-danger);
+}
+
+.fanui-text-info {
+  color: var(--fanui-info);
+}
+
+.fanui-text-gradient {
+  background-image: linear-gradient(to right, var(--fanui-primary), var(--fanui-accent));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+}
+
+.fanui-fs-xs {
+  font-size: var(--fanui-font-size-xs);
+}
+
+.fanui-fs-sm {
+  font-size: var(--fanui-font-size-sm);
+}
+
+.fanui-fs-base {
+  font-size: var(--fanui-font-size-base);
+}
+
+.fanui-fs-md {
+  font-size: var(--fanui-font-size-md);
+}
+
+.fanui-fs-lg {
+  font-size: var(--fanui-font-size-lg);
+}
+
+.fanui-fs-xl {
+  font-size: var(--fanui-font-size-xl);
+}
+
+.fanui-fs-2xl {
+  font-size: var(--fanui-font-size-2xl);
+}
+
+.fanui-fs-3xl {
+  font-size: var(--fanui-font-size-3xl);
+}
+
+.fanui-fs-4xl {
+  font-size: var(--fanui-font-size-4xl);
+}
+
+.fanui-fs-5xl {
+  font-size: var(--fanui-font-size-5xl);
+}
+
+.fanui-fs-6xl {
+  font-size: var(--fanui-font-size-6xl);
+}
+
+.fanui-fs-lead-lg::first-letter {
+  font-size: var(--fanui-font-size-5xl);
+  font-weight: 700;
+  float: left;
+  line-height: 1;
+  margin-inline-end: 8px;
+}
+
+.fanui-lh-none {
+  line-height: 1;
+}
+
+.fanui-lh-tight {
+  line-height: 1.25;
+}
+
+.fanui-lh-snug {
+  line-height: 1.375;
+}
+
+.fanui-lh-normal {
+  line-height: 1.5;
+}
+
+.fanui-lh-base {
+  line-height: 1.5715;
+}
+
+.fanui-lh-relaxed {
+  line-height: 1.625;
+}
+
+.fanui-lh-loose {
+  line-height: 2;
+}
+
+.fanui-fw-light {
+  font-weight: 300;
+}
+
+.fanui-fw-normal {
+  font-weight: 400;
+}
+
+.fanui-fw-medium {
+  font-weight: 500;
+}
+
+.fanui-fw-semibold {
+  font-weight: 600;
+}
+
+.fanui-fw-bold {
+  font-weight: 700;
+}
+
+.fanui-fw-extrabold {
+  font-weight: 800;
+}
+
+.fanui-tracking-tighter {
+  letter-spacing: -0.05em;
+}
+
+.fanui-tracking-tight {
+  letter-spacing: -0.025em;
+}
+
+.fanui-tracking-normal {
+  letter-spacing: 0;
+}
+
+.fanui-tracking-wide {
+  letter-spacing: 0.025em;
+}
+
+.fanui-tracking-wider {
+  letter-spacing: 0.05em;
+}
+
+.fanui-tracking-widest {
+  letter-spacing: 0.1em;
+}
+
+.fanui-italic {
+  font-style: italic;
+}
+
+.fanui-not-italic {
+  font-style: normal;
+}
+
+.fanui-uppercase {
+  text-transform: uppercase;
+}
+
+.fanui-lowercase {
+  text-transform: lowercase;
+}
+
+.fanui-capitalize {
+  text-transform: capitalize;
+}
+
+.fanui-underline {
+  text-decoration: underline;
+}
+
+.fanui-line-through {
+  text-decoration: line-through;
+}
+
+.fanui-no-underline {
+  text-decoration: none;
+}
+
+.fanui-text-start {
+  text-align: start;
+}
+
+.fanui-text-center {
+  text-align: center;
+}
+
+.fanui-text-end {
+  text-align: end;
+}
+
+.fanui-text-justify {
+  text-align: justify;
+}
+
+.fanui-text-wrap {
+  white-space: normal;
+}
+
+.fanui-text-nowrap {
+  white-space: nowrap;
+}
+
+.fanui-text-pre {
+  white-space: pre;
+}
+
+.fanui-text-pre-wrap {
+  white-space: pre-wrap;
+}
+
+.fanui-text-break {
+  word-break: break-word;
+  overflow-wrap: anywhere;
+}
+
+.fanui-text-balance {
+  text-wrap: balance;
+}
+
+.fanui-text-pretty {
+  text-wrap: pretty;
+}
+
+.fanui-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.fanui-truncate-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.fanui-truncate-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.fanui-truncate-4 {
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.fanui-list {
+  padding-inline-start: 1.25rem;
+  margin-bottom: 1em;
+}
+.fanui-list li {
+  margin-bottom: 0.25em;
+}
+
+.fanui-list-unstyled {
+  list-style: none;
+  padding-inline-start: 0;
+  margin-inline-start: 0;
+}
+
+.fanui-list-inline {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--fanui-space-4);
+  list-style: none;
+  padding-inline-start: 0;
+}
+
+.fanui-list-dashed {
+  list-style: none;
+  padding-inline-start: 0;
+}
+.fanui-list-dashed > li {
+  position: relative;
+  padding-inline-start: 1.25em;
+}
+.fanui-list-dashed > li::before {
+  content: "";
+  position: absolute;
+  left: 0.25em;
+  top: 0.65em;
+  width: 0.35em;
+  height: 0.35em;
+  border-radius: 50%;
+  background-color: var(--fanui-primary);
+}
+
+.fanui-blockquote {
+  margin: 0 0 1em;
+  padding: var(--fanui-space-4) var(--fanui-space-5);
+  border-inline-start: 4px solid var(--fanui-primary);
+  background-color: var(--fanui-color-surface-sunken);
+  border-radius: 0 var(--fanui-radius-base) var(--fanui-radius-base) 0;
+  color: var(--fanui-color-text-muted);
+}
+.fanui-blockquote footer {
+  margin-top: var(--fanui-space-2);
+  font-size: var(--fanui-font-size-sm);
+  color: var(--fanui-color-text-subtle);
+}
+.fanui-blockquote footer::before {
+  content: "— ";
+}
+
+.fanui-code, .fanui-prose code {
+  padding: 0.15em 0.4em;
+  font-family: var(--fanui-font-mono);
+  font-size: 0.875em;
+  color: var(--fanui-danger);
+  background-color: var(--fanui-color-surface-sunken);
+  border: 1px solid var(--fanui-color-border-subtle);
+  border-radius: var(--fanui-radius-sm);
+  white-space: nowrap;
+}
+
+.fanui-pre, .fanui-prose pre {
+  display: block;
+  margin: 0 0 1em;
+  padding: var(--fanui-space-4);
+  font-family: var(--fanui-font-mono);
+  font-size: var(--fanui-font-size-sm);
+  line-height: var(--fanui-line-height-relaxed);
+  color: var(--fanui-color-text);
+  background-color: var(--fanui-color-surface-sunken);
+  border: 1px solid var(--fanui-color-border);
+  border-radius: var(--fanui-radius-md);
+  overflow-x: auto;
+  tab-size: 2;
+}
+.fanui-pre code, .fanui-prose pre code {
+  padding: 0;
+  background: none;
+  border: 0;
+  color: inherit;
+  font-size: inherit;
+  white-space: pre;
+}
+
+.fanui-kbd {
+  display: inline-block;
+  min-width: 1.6em;
+  padding: 0.1em 0.4em;
+  font-family: var(--fanui-font-mono);
+  font-size: 0.8125em;
+  line-height: 1.4;
+  text-align: center;
+  color: var(--fanui-color-text);
+  background-color: var(--fanui-color-surface);
+  border: 1px solid var(--fanui-color-border-strong);
+  border-bottom-width: 2px;
+  border-radius: var(--fanui-radius-sm);
+  box-shadow: var(--fanui-shadow-xs);
+}
+
+.fanui-mark {
+  padding: 0.1em 0.2em;
+  background-color: rgba(245, 158, 11, 0.28);
+  color: inherit;
+  border-radius: var(--fanui-radius-sm);
+}
+
+.fanui-link {
+  color: var(--fanui-primary);
+  text-decoration: none;
+  border-bottom: 1px solid var(--fanui-primary-border);
+  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s, border-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+}
+.fanui-link:hover {
+  color: var(--fanui-primary-hover);
+  border-bottom-color: var(--fanui-primary-hover);
+  text-decoration: none;
+}
+.fanui-link--subtle {
+  color: var(--fanui-color-text-muted);
+  border-bottom-color: var(--fanui-color-border);
+}
+.fanui-link--subtle:hover {
+  color: var(--fanui-color-text);
+  border-bottom-color: var(--fanui-color-border-strong);
+}
+
+.fanui-anchor {
+  position: relative;
+  scroll-margin-top: var(--fanui-space-8);
+}
+.fanui-anchor > .fanui-anchor__link {
+  position: absolute;
+  left: -1.25em;
+  padding-inline-end: 0.25em;
+  color: var(--fanui-color-text-subtle);
+  opacity: 0;
+  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+}
+.fanui-anchor > .fanui-anchor__link::before {
+  content: "#";
+}
+.fanui-anchor:hover > .fanui-anchor__link {
+  opacity: 1;
+}
+
+.fanui-prose {
+  font-size: var(--fanui-font-size-md);
+  line-height: var(--fanui-line-height-relaxed);
+  color: var(--fanui-color-text);
+  max-width: 72ch;
+}
+.fanui-prose > * + * {
+  margin-top: 1em;
+}
+.fanui-prose > h2 {
+  margin-top: 2em;
+}
+.fanui-prose > h3 {
+  margin-top: 1.5em;
+}
+.fanui-prose > h2 + *,
+.fanui-prose > h3 + * {
+  margin-top: 0.5em;
+}
+.fanui-prose ul, .fanui-prose ol {
+  padding-inline-start: 1.4em;
+}
+.fanui-prose li + li {
+  margin-top: 0.35em;
+}
+.fanui-prose li > ul,
+.fanui-prose li > ol {
+  margin-top: 0.35em;
+}
+.fanui-prose img {
+  border-radius: var(--fanui-radius-md);
+  margin: 1.5em 0;
+}
+.fanui-prose hr {
+  margin: 2.5em 0;
+}
+.fanui-prose table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--fanui-font-size-base);
+  margin: 1.5em 0;
+}
+.fanui-prose table th,
+.fanui-prose table td {
+  padding: 8px 12px;
+  text-align: start;
+  border: 1px solid var(--fanui-color-border);
+}
+.fanui-prose table th {
+  background-color: var(--fanui-color-surface-sunken);
+  font-weight: 600;
+}
+
+@keyframes fanui-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fanui-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes fanui-slide-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes fanui-slide-in-down {
+  from {
+    opacity: 0;
+    transform: translateY(-12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes fanui-slide-in-start {
+  from {
+    opacity: 0;
+    transform: translateX(-16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes fanui-slide-in-end {
+  from {
+    opacity: 0;
+    transform: translateX(16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes fanui-zoom-in {
+  from {
+    opacity: 0;
+    transform: scale(0.94);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes fanui-zoom-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.94);
+  }
+}
+@keyframes fanui-pop-in {
+  from {
+    opacity: 0;
+    transform: scale(0.86) translateY(8px);
+  }
+  60% {
+    opacity: 1;
+    transform: scale(1.02) translateY(0);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+@keyframes fanui-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes fanui-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.45;
+  }
+}
+@keyframes fanui-bounce {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-6px);
+  }
+}
+@keyframes fanui-shake {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  20% {
+    transform: translateX(-6px);
+  }
+  40% {
+    transform: translateX(6px);
+  }
+  60% {
+    transform: translateX(-4px);
+  }
+  80% {
+    transform: translateX(4px);
+  }
+}
+@keyframes fanui-progress-stripes {
+  from {
+    background-position: 1rem 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
+@keyframes fanui-progress-indeterminate {
+  0% {
+    left: -35%;
+    width: 35%;
+  }
+  60% {
+    left: 100%;
+    width: 60%;
+  }
+  100% {
+    left: 100%;
+    width: 60%;
+  }
+}
+@keyframes fanui-skeleton-shimmer {
+  from {
+    background-position: 200% 0;
+  }
+  to {
+    background-position: -200% 0;
+  }
+}
+@keyframes fanui-toast-in {
+  from {
+    opacity: 0;
+    transform: translateY(-8px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+@keyframes fanui-ripple {
+  from {
+    transform: scale(0);
+    opacity: 0.45;
+  }
+  to {
+    transform: scale(2.6);
+    opacity: 0;
+  }
+}
+@keyframes fanui-blink {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+}
+.fanui-animate-fade-in {
+  animation-name: fanui-fade-in;
+  animation-duration: 200ms;
+  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  animation-fill-mode: both;
+  animation-iteration-count: 1;
+}
+
+.fanui-animate-fade-out {
+  animation-name: fanui-fade-out;
+  animation-duration: 200ms;
+  animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
+  animation-fill-mode: both;
+  animation-iteration-count: 1;
+}
+
+.fanui-animate-slide-in-up {
+  animation-name: fanui-slide-in-up;
+  animation-duration: 300ms;
+  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  animation-fill-mode: both;
+  animation-iteration-count: 1;
+}
+
+.fanui-animate-slide-in-down {
+  animation-name: fanui-slide-in-down;
+  animation-duration: 300ms;
+  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  animation-fill-mode: both;
+  animation-iteration-count: 1;
+}
+
+.fanui-animate-slide-in-start {
+  animation-name: fanui-slide-in-start;
+  animation-duration: 300ms;
+  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  animation-fill-mode: both;
+  animation-iteration-count: 1;
+}
+
+.fanui-animate-slide-in-end {
+  animation-name: fanui-slide-in-end;
+  animation-duration: 300ms;
+  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  animation-fill-mode: both;
+  animation-iteration-count: 1;
+}
+
+.fanui-animate-zoom-in {
+  animation-name: fanui-zoom-in;
+  animation-duration: 200ms;
+  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  animation-fill-mode: both;
+  animation-iteration-count: 1;
+}
+
+.fanui-animate-zoom-out {
+  animation-name: fanui-zoom-out;
+  animation-duration: 200ms;
+  animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
+  animation-fill-mode: both;
+  animation-iteration-count: 1;
+}
+
+.fanui-animate-pop-in {
+  animation-name: fanui-pop-in;
+  animation-duration: 300ms;
+  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
+  animation-fill-mode: both;
+  animation-iteration-count: 1;
+}
+
+.fanui-animate-spin {
+  animation-name: fanui-spin;
+  animation-duration: 900ms;
+  animation-timing-function: linear;
+  animation-fill-mode: infinite;
+  animation-iteration-count: 1;
+}
+
+.fanui-animate-pulse {
+  animation-name: fanui-pulse;
+  animation-duration: 1.6s;
+  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  animation-fill-mode: infinite;
+  animation-iteration-count: 1;
+}
+
+.fanui-animate-bounce {
+  animation-name: fanui-bounce;
+  animation-duration: 1s;
+  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  animation-fill-mode: infinite;
+  animation-iteration-count: 1;
+}
+
+.fanui-animate-shake {
+  animation-name: fanui-shake;
+  animation-duration: 420ms;
+  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  animation-fill-mode: both;
+  animation-iteration-count: 1;
+}
+
+.fanui-animate-blink {
+  animation-name: fanui-blink;
+  animation-duration: 1s;
+  animation-timing-function: step-end;
+  animation-fill-mode: infinite;
+  animation-iteration-count: 1;
+}
+
+.fanui-animate-spin,
+.fanui-animate-pulse,
+.fanui-animate-bounce,
+.fanui-animate-blink {
+  animation-iteration-count: infinite;
+}
+
+.fanui-animate-infinite {
+  animation-iteration-count: infinite;
+}
+
+.fanui-animate-once {
+  animation-iteration-count: 1;
+}
+
+.fanui-duration-instant {
+  animation-duration: 100ms;
+  transition-duration: 100ms;
+}
+
+.fanui-duration-fast {
+  animation-duration: 150ms;
+  transition-duration: 150ms;
+}
+
+.fanui-duration-base {
+  animation-duration: 200ms;
+  transition-duration: 200ms;
+}
+
+.fanui-duration-slow {
+  animation-duration: 300ms;
+  transition-duration: 300ms;
+}
+
+.fanui-duration-slower {
+  animation-duration: 500ms;
+  transition-duration: 500ms;
+}
+
+.fanui-ease-linear {
+  animation-timing-function: linear;
+  transition-timing-function: linear;
+}
+
+.fanui-ease-in {
+  animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
+  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
+}
+
+.fanui-ease-out {
+  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
+
+.fanui-ease-in-out {
+  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.fanui-ease-spring {
+  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
+  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.fanui-delay-75 {
+  animation-delay: 75ms;
+}
+
+.fanui-delay-150 {
+  animation-delay: 150ms;
+}
+
+.fanui-delay-300 {
+  animation-delay: 300ms;
+}
+
+.fanui-delay-500 {
+  animation-delay: 500ms;
+}
+
+.fanui-paused {
+  animation-play-state: paused;
+}
+
+.fanui-running {
+  animation-play-state: running;
+}
+
+.fanui-transition-all {
+  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+}
+
+.fanui-transition-color {
+  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+}
+
+.fanui-transition-background-color {
+  transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+}
+
+.fanui-transition-border-color {
+  transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+}
+
+.fanui-transition-box-shadow {
+  transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+}
+
+.fanui-transition-opacity {
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+}
+
+.fanui-transition-transform {
+  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fanui-animate-fade-in,
+  .fanui-animate-fade-out,
+  .fanui-animate-slide-in-up,
+  .fanui-animate-slide-in-down,
+  .fanui-animate-slide-in-start,
+  .fanui-animate-slide-in-end,
+  .fanui-animate-zoom-in,
+  .fanui-animate-zoom-out,
+  .fanui-animate-pop-in,
+  .fanui-animate-shake {
+    animation: none !important;
+    opacity: 1 !important;
+    transform: none !important;
+  }
+  .fanui-animate-spin,
+  .fanui-animate-pulse,
+  .fanui-animate-bounce,
+  .fanui-animate-blink {
+    animation-duration: 3s !important;
+  }
+}