/* 仅在需要在 class 属性中使用 tailwind 时才需要下面的引用 */
/* ! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}
::before,
::after {
  --tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden] {
  display: none;
}
*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
.container{
  width: 100%;
}
@media (min-width: 640px){
  .container{
    max-width: 640px;
  }
}
@media (min-width: 768px){
  .container{
    max-width: 768px;
  }
}
@media (min-width: 1024px){
  .container{
    max-width: 1024px;
  }
}
@media (min-width: 1280px){
  .container{
    max-width: 1280px;
  }
}
@media (min-width: 1536px){
  .container{
    max-width: 1536px;
  }
}
.visible{
  visibility: visible;
}
.static{
  position: static;
}
.fixed{
  position: fixed;
}
.absolute{
  position: absolute;
}
.relative{
  position: relative;
}
.sticky{
  position: sticky;
}
.right-2{
  right: 0.5rem;
}
.right-4{
  right: 1rem;
}
.top-20{
  top: 5rem;
}
.z-30{
  z-index: 30;
}
.m-0{
  margin: 0px;
}
.my-0{
  margin-top: 0px;
  margin-bottom: 0px;
}
.my-4{
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.my-6{
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.my-8{
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.mb-0{
  margin-bottom: 0px;
}
.mb-1{
  margin-bottom: 0.25rem;
}
.ml-1{
  margin-left: 0.25rem;
}
.mr-1{
  margin-right: 0.25rem;
}
.mr-4{
  margin-right: 1rem;
}
.mt-0{
  margin-top: 0px;
}
.mt-1{
  margin-top: 0.25rem;
}
.box-border{
  box-sizing: border-box;
}
.block{
  display: block;
}
.inline-block{
  display: inline-block;
}
.inline{
  display: inline;
}
.flex{
  display: flex;
}
.inline-flex{
  display: inline-flex;
}
.hidden{
  display: none;
}
.h-14{
  height: 3.5rem;
}
.h-4{
  height: 1rem;
}
.h-8{
  height: 2rem;
}
.w-14{
  width: 3.5rem;
}
.w-4{
  width: 1rem;
}
.w-8{
  width: 2rem;
}
.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.cursor-pointer{
  cursor: pointer;
}
.resize{
  resize: both;
}
.flex-row{
  flex-direction: row;
}
.flex-row-reverse{
  flex-direction: row-reverse;
}
.flex-col{
  flex-direction: column;
}
.flex-col-reverse{
  flex-direction: column-reverse;
}
.items-center{
  align-items: center;
}
.justify-between{
  justify-content: space-between;
}
.overflow-hidden{
  overflow: hidden;
}
.rounded-1\/2{
  border-radius: 50%;
}
.rounded-lg{
  border-radius: 0.5rem;
}
.border{
  border-width: 1px;
}
.border-0{
  border-width: 0px;
}
.border-b{
  border-bottom-width: 1px;
}
.border-b-2{
  border-bottom-width: 2px;
}
.border-t{
  border-top-width: 1px;
}
.border-t-0{
  border-top-width: 0px;
}
.border-solid{
  border-style: solid;
}
.border-dashed{
  border-style: dashed;
}
.border-reco-primary{
  --tw-border-opacity: 1;
  border-color: rgb(142 68 173 / var(--tw-border-opacity));
}
.border-transparent{
  border-color: transparent;
}
.bg-reco-primary{
  --tw-bg-opacity: 1;
  background-color: rgb(142 68 173 / var(--tw-bg-opacity));
}
.p-1{
  padding: 0.25rem;
}
.p-1\.5{
  padding: 0.375rem;
}
.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-3\.5{
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.py-0{
  padding-top: 0px;
  padding-bottom: 0px;
}
.py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5{
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-4{
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-6{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.pb-4{
  padding-bottom: 1rem;
}
.pl-0{
  padding-left: 0px;
}
.pr-0{
  padding-right: 0px;
}
.pt-0{
  padding-top: 0px;
}
.text-center{
  text-align: center;
}
.text-xl{
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-reco-text-lightmode{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}
.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
/* 仅在需要在 class 属性中使用 tailwind 时才需要下面的引用 */
/* ! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}
::before,
::after {
  --tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden] {
  display: none;
}
*{
  margin: 0px;
  padding: 0px;
}
*,
  ::before,
  ::after{
  box-sizing: border-box;
  border-width: 0px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100%;
  }
body {
    /* antialiased 字体平滑 */
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
  }
body:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity));
}
body{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
body:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(22 22 23 / var(--tw-bg-opacity));
}
body{
  margin: 0px;
  width: 100%;
  overflow-x: hidden;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
    min-width: 320px;
    direction: ltr;
    /* 像素较小时字体会拼接在一起 */
    text-rendering: optimizeLegibility;
    transition: background-color 0.3s ease;
}
main{
  display: block;
}
svg{
  display: inline-block;
}
hr{
  border-width: 1px;
  border-style: solid;
  border-color: rgba(200, 200, 200, .32);
}
hr:is(.dark *){
  border-color: rgba(82, 82, 89, .32);
}
hr{
  border-width: 0px;
  border-top-width: 1px;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
h1,
  h2,
  h3,
  h4,
  h5,
  h6{
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity));
}
h1:is(.dark *),
  h2:is(.dark *),
  h3:is(.dark *),
  h4:is(.dark *),
  h5:is(.dark *),
  h6:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
h1,
  h2,
  h3,
  h4,
  h5,
  h6{
  z-index: -10;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: -2rem;
  margin-bottom: 2rem;
  padding-top: 3rem;
  line-height: 1.25rem;
}
h1{
  margin-top: -3rem;
  font-size: 1.875rem;
  line-height: 2.25rem;
}
h2{
  line-height: 1.25;
}
h2 span{
  font-size: 1.5rem;
  line-height: 2rem;
}
h2::before{
  margin-bottom: 1.5rem;
  display: block;
  width: 100%;
  border-top-width: 1px;
  border-style: solid;
  border-color: rgba(200, 200, 200, .32);
}
h2:is(.dark *)::before{
  border-color: rgba(82, 82, 89, .32);
}
h2::before {
      content: ' ';
    }
h3 span{
  font-size: 1.25rem;
  line-height: 1.75rem;
}
h4 span{
  font-size: 1.125rem;
  line-height: 1.75rem;
}
h5 span{
  font-size: 1rem;
  line-height: 1.5rem;
}
h6 span{
  font-size: 0.875rem;
  line-height: 1.25rem;
}
h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  strong,
  b{
  font-weight: 600;
}
a:active,
  a:link,
  a:focus,
  a:visited{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}
a:active:is(.dark *),
  a:link:is(.dark *),
  a:focus:is(.dark *),
  a:visited:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity));
}
p,
  ol,
  ul,
  table{
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  line-height: 2rem;
}
a,
  area,
  button,
  [role='button'],
  input,
  label,
  select,
  summary,
  textarea {
    touch-action: manipulation;
    background-color: transparent;
    -webkit-text-decoration-line: none;
            text-decoration-line: none;
  }
button{
  font-size: 1rem;
  line-height: 1.5rem;
}
figure{
  margin: 0px;
}
img{
  max-width: 100%;
}
ul,
  ol{
  padding-left: 1.25rem;
}
ul{
  list-style-type: disc;
}
ol{
  list-style-type: decimal;
}
li > ul,
  li > ol{
  margin: 0px;
}
table{
  display: block;
  width: 100%;
  overflow-x: auto;
  border-radius: 0.5rem;
    border-collapsible: collapsible;
}
table tr{
  border-width: 1px;
  border-style: solid;
  border-color: rgba(200, 200, 200, .32);
}
table tr:is(.dark *){
  border-color: rgba(82, 82, 89, .32);
}
table tr{
  border-radius: 0.5rem;
}
table th{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
  text-align: left;
  font-weight: 600;
}
table th:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(32 32 34 / var(--tw-bg-opacity));
}
table td,
    table th{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
table td:not(:last-child), table th:not(:last-child){
  border-right-width: 1px;
  border-style: solid;
  border-color: rgba(200, 200, 200, .32);
}
table td:not(:last-child):is(.dark *), table th:not(:last-child):is(.dark *){
  border-color: rgba(82, 82, 89, .32);
}
blockquote{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}
blockquote:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity));
}
blockquote{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
blockquote:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(32 32 34 / var(--tw-bg-opacity));
}
blockquote{
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  margin-left: 0px;
  margin-right: 0px;
  border-left-width: 4px;
  border-style: solid;
  padding: 0.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
}
blockquote > p{
  margin: 0px;
}
pre,
  code,
  kbd {
    font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
  }
kbd{
  border-radius: 0.5rem;
  border-width: 1px;
  border-bottom-width: 2px;
  border-color: rgb(156 163 175 / 0.2);
  background-color: rgb(156 163 175 / 0.05);
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
form{
  margin: 0px;
}
p > img{
  border-radius: 0.5rem;
}
li svg{
  vertical-align: middle;
    transform: translateY(-10%);
}
*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
.container{
  width: 100%;
}
@media (min-width: 640px){
  .container{
    max-width: 640px;
  }
}
@media (min-width: 768px){
  .container{
    max-width: 768px;
  }
}
@media (min-width: 1024px){
  .container{
    max-width: 1024px;
  }
}
@media (min-width: 1280px){
  .container{
    max-width: 1280px;
  }
}
@media (min-width: 1536px){
  .container{
    max-width: 1536px;
  }
}
.text-basic{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}
.text-basic:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity));
}
.border-block{
  border-width: 1px;
  border-style: solid;
  border-color: rgba(200, 200, 200, .32);
}
.border-block:is(.dark *){
  border-color: rgba(82, 82, 89, .32);
}
.border-block{
  border-radius: 0.5rem;
}
.bg-block{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}
.bg-block:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity));
}
.bg-block{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.bg-block:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(32 32 34 / var(--tw-bg-opacity));
}
.visible{
  visibility: visible;
}
.static{
  position: static;
}
.fixed{
  position: fixed;
}
.absolute{
  position: absolute;
}
.relative{
  position: relative;
}
.sticky{
  position: sticky;
}
.right-2{
  right: 0.5rem;
}
.right-4{
  right: 1rem;
}
.top-20{
  top: 5rem;
}
.z-30{
  z-index: 30;
}
.m-0{
  margin: 0px;
}
.my-0{
  margin-top: 0px;
  margin-bottom: 0px;
}
.my-4{
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.my-6{
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.my-8{
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.mb-0{
  margin-bottom: 0px;
}
.mb-1{
  margin-bottom: 0.25rem;
}
.ml-1{
  margin-left: 0.25rem;
}
.mr-1{
  margin-right: 0.25rem;
}
.mr-4{
  margin-right: 1rem;
}
.mt-0{
  margin-top: 0px;
}
.mt-1{
  margin-top: 0.25rem;
}
.box-border{
  box-sizing: border-box;
}
.block{
  display: block;
}
.inline-block{
  display: inline-block;
}
.inline{
  display: inline;
}
.flex{
  display: flex;
}
.inline-flex{
  display: inline-flex;
}
.hidden{
  display: none;
}
.h-14{
  height: 3.5rem;
}
.h-4{
  height: 1rem;
}
.h-8{
  height: 2rem;
}
.w-14{
  width: 3.5rem;
}
.w-4{
  width: 1rem;
}
.w-8{
  width: 2rem;
}
.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.cursor-pointer{
  cursor: pointer;
}
.resize{
  resize: both;
}
.flex-row{
  flex-direction: row;
}
.flex-row-reverse{
  flex-direction: row-reverse;
}
.flex-col{
  flex-direction: column;
}
.flex-col-reverse{
  flex-direction: column-reverse;
}
.items-center{
  align-items: center;
}
.justify-between{
  justify-content: space-between;
}
.overflow-hidden{
  overflow: hidden;
}
.rounded-1\/2{
  border-radius: 50%;
}
.rounded-lg{
  border-radius: 0.5rem;
}
.border{
  border-width: 1px;
}
.border-0{
  border-width: 0px;
}
.border-b{
  border-bottom-width: 1px;
}
.border-b-2{
  border-bottom-width: 2px;
}
.border-t{
  border-top-width: 1px;
}
.border-t-0{
  border-top-width: 0px;
}
.border-solid{
  border-style: solid;
}
.border-dashed{
  border-style: dashed;
}
.border-reco-primary{
  --tw-border-opacity: 1;
  border-color: rgb(142 68 173 / var(--tw-border-opacity));
}
.border-transparent{
  border-color: transparent;
}
.bg-reco-primary{
  --tw-bg-opacity: 1;
  background-color: rgb(142 68 173 / var(--tw-bg-opacity));
}
.p-1{
  padding: 0.25rem;
}
.p-1\.5{
  padding: 0.375rem;
}
.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-3\.5{
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.py-0{
  padding-top: 0px;
  padding-bottom: 0px;
}
.py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5{
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-4{
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-6{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.pb-4{
  padding-bottom: 1rem;
}
.pl-0{
  padding-left: 0px;
}
.pr-0{
  padding-right: 0px;
}
.pt-0{
  padding-top: 0px;
}
.text-center{
  text-align: center;
}
.text-xl{
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-reco-text-lightmode{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}
.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  50% {
    background: rgb(220, 220, 220);
  }
}
.v {
  font-size: 16px;
  text-align: left;
}
.v * {
    box-sizing: border-box;
    line-height: 2;
    transition: all 0.3s ease;
  }
.v hr {
    margin: 0.825em 0;
    border-color: #f6f6f6;
    border-style: dashed;
  }
.v.hide-avatar .vimg {
      display: none;
    }
.v a {
    position: relative;
    cursor: pointer;
    color: #1abc9c;
    text-decoration: none;
    display: inline-block;
  }
.v a:hover {
      color: #d7191a;
    }
.v pre,
  .v code {
    background-color: #f6f6f6;
    color: #555;
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-size: 85%;
    margin: 0;
  }
.v pre {
    padding: 10px;
    overflow: auto;
    line-height: 1.45;
  }
.v pre code {
      padding: 0;
      background: transparent;
      white-space: pre-wrap;
      word-break: keep-all;
    }
.v blockquote {
    color: #666;
    margin: 0.5em 0;
    padding: 0 0 0 1em;
    border-left: 8px solid rgba(238, 238, 238, 0.5);
  }
.v .vinput {
    border: none;
    resize: none;
    outline: none;
    padding: 10px 5px;
    max-width: 100%;
    font-size: 0.775em;
  }
.v input[type='checkbox'],
  .v input[type='radio'] {
    display: inline-block;
    vertical-align: middle;
    margin-top: -2px;
  }
.v .vwrap {
    border: 1px solid #f0f0f0;
    border-radius: 4px;
    margin-bottom: 10px;
    overflow: hidden;
    position: relative;
    padding: 10px;
  }
.v .vwrap input {
      background: transparent;
    }
.v .vwrap .vedit {
      position: relative;
      padding-top: 10px;
    }
.v .vwrap .vedit .vctrl {
      text-align: right;
      font-size: 12px;
    }
.v .vwrap .vedit .vctrl span {
      padding: 10px;
      display: inline-block;
      vertical-align: middle;
      cursor: pointer;
    }
.v .vwrap .vedit .vemojis {
      display: none;
      font-size: 18px;
      text-align: justify;
      max-height: 145px;
      overflow: auto;
      margin-bottom: 10px;
      box-shadow: 0px 0 1px #f0f0f0;
    }
.v .vwrap .vedit .vemojis i {
      font-style: normal;
      padding: 7px 0;
      width: 38px;
      cursor: pointer;
      text-align: center;
      display: inline-block;
      vertical-align: middle;
    }
.v .vwrap .vedit .vpreview {
      padding: 7px;
      box-shadow: 0px 0 1px #f0f0f0;
    }
.v .vwrap .vedit .vpreview img,
      .v .vwrap .vedit .vpreview frame,
      .v .vwrap .vedit .vpreview iframe {
        max-width: 100%;
        border: none;
      }
.v .vwrap .vheader .vinput {
        width: 33.33%;
        border-bottom: 1px #dedede dashed;
      }
.v .vwrap .vheader.item2 .vinput {
        width: 50%;
      }
.v .vwrap .vheader.item1 .vinput {
        width: 100%;
      }
.v .vwrap .vheader .vinput:focus {
        border-bottom-color: #eb5055;
      }
@media screen and (max-width: 520px) {
        .v .vwrap .vheader .vinput {
          width: 100%;
        }
        .v .vwrap .vheader.item2 .vinput {
          width: 100%;
        }
      }
.v .vwrap .vcontrol {
      font-size: 0;
      padding-top: 15px;
    }
.v .vwrap .vcontrol .col {
        display: inline-block;
        font-size: 16px;
        vertical-align: middle;
        color: #ccc;
      }
.v .vwrap .vcontrol .col.text-right {
          text-align: right;
        }
.v .vwrap .vcontrol .col svg {
          margin-right: 2px;
          overflow: hidden;
          fill: currentColor;
          vertical-align: middle;
        }
.v .vwrap .vcontrol .col.col-20 {
          width: 20%;
        }
.v .vwrap .vcontrol .col.col-40 {
          width: 40%;
        }
.v .vwrap .vcontrol .col.col-60 {
          width: 60%;
        }
.v .vwrap .vcontrol .col.col-80 {
          width: 80%;
        }
.v .vwrap .vcontrol .col.split {
          width: 50%;
        }
.v .vwrap .vmark {
      position: absolute;
      background: rgba(0, 0, 0, 0.65);
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
    }
.v .vwrap .vmark .valert {
        padding-top: 3em;
      }
.v .vwrap .vmark .valert .vtext {
          color: #fff;
          padding: 1em 0;
        }
.v .vwrap .vmark .valert .vcode {
          width: 4.6875em;
          border-radius: 0.3125em;
          padding: 0.5em;
          background: #dedede;
        }
.v .vwrap .vmark .valert .vcode:focus {
            border-color: #3090e4;
            background-color: #fff;
          }
@media screen and(max-width:720px) {
        .v .vwrap .vmark .valert {
          padding-top: 5.5em;
        }
          .v .vwrap .vmark .valert .vtext {
            color: #fff;
            padding: 1em 0;
          }
      }
.v .power {
    color: #999;
    font-size: 0.75em;
    padding: 0.5em 0;
  }
.v .power a {
      font-size: 0.75em;
    }
.v .vinfo {
    font-size: 0;
    padding: 5px;
  }
.v .vinfo .col {
      font-size: 16px;
      display: inline-block;
      width: 50%;
      vertical-align: middle;
    }
.v .vinfo .vcount .vnum {
        font-weight: 600;
        font-size: 1.25em;
      }
.v a {
    text-decoration: none;
    color: #555;
  }
.v a:hover {
      color: #222;
    }
.v ul,
  .v ol {
    padding: 0;
    margin-left: 1.25em;
  }
.v .txt-center {
    text-align: center;
  }
.v .txt-right {
    text-align: right;
  }
.v .pd5 {
    padding: 5px;
  }
.v .pd10 {
    padding: 10px;
  }
.v .veditor {
    width: 100%;
    min-height: 8.75em;
    font-size: 0.875em;
    resize: vertical;
    transition: all 0.25s ease;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
  }
.v .veditor:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity));
}
.v .veditor{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.v .veditor:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(32 32 34 / var(--tw-bg-opacity));
}
.v .vbtn {
    transition-duration: 0.4s;
    text-align: center;
    color: #313131;
    border: 1px solid #ededed;
    border-radius: 0.3em;
    display: inline-block;
    background: #ededed;
    margin-bottom: 0;
    font-weight: 400;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    white-space: nowrap;
    padding: 0.5em 1.25em;
    font-size: 0.875em;
    line-height: 1.42857143;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    outline: none;
  }
.v .vbtn + .vbtn {
      margin-left: 1.25em;
    }
.v .vbtn:active,
  .v .vbtn:hover {
    color: #3090e4;
    border-color: #3090e4;
    background-color: #fff;
  }
.v .vempty {
    padding: 1.25em;
    text-align: center;
    color: #999;
  }
.v .vlist {
    width: 100%;
  }
.v .vlist .vcard {
      padding-top: 1.5em;
      position: relative;
      display: block;
    }
.v .vlist .vcard:after {
        content: '';
        clear: both;
        display: block;
      }
.v .vlist .vcard .vimg {
        width: 3.125em;
        height: 3.125em;
        float: left;
        border-radius: 50%;
        margin-right: 0.7525em;
        border: 1px solid #f5f5f5;
        padding: 0.125em;
      }
@media screen and (max-width: 720px) {
        .v .vlist .vcard .vimg {
          width: 2.5em;
          height: 2.5em;
        }
      }
.v .vlist .vcard .vhead {
        line-height: 1.5;
        margin-top: 0;
      }
.v .vlist .vcard .vhead .vnick {
          position: relative;
          font-size: 0.875em;
          font-weight: 500;
          margin-right: 0.875em;
          cursor: pointer;
          color: #1abc9c;
          text-decoration: none;
          display: inline-block;
        }
.v .vlist .vcard .vhead .vnick:hover {
            color: #d7191a;
          }
.v .vlist .vcard .vhead .vsys {
          display: inline-block;
          padding: 0.2em 0.5em;
          background: #ededed;
          color: #b3b1b1;
          font-size: 0.75em;
          border-radius: 0.2em;
          margin-right: 0.3em;
        }
@media screen and (max-width: 520px) {
          .v .vlist .vcard .vhead .vsys {
            display: none;
          }
        }
.v .vlist .vcard .vh {
        overflow: hidden;
        padding-bottom: 0.5em;
        border-bottom: 1px dashed #f5f5f5;
      }
.v .vlist .vcard .vh .vtime {
          color: #b3b3b3;
          font-size: 0.75em;
          margin-right: 0.875em;
        }
.v .vlist .vcard .vh .vmeta {
          line-height: 1;
          position: relative;
        }
.v .vlist .vcard .vh .vmeta .vat {
            font-size: 0.8125em;
            color: #ef2f11;
            cursor: pointer;
            float: right;
          }
.v .vlist .vcard:last-child .vh {
          border-bottom: none;
        }
.v .vlist .vcard .vcontent {
        word-wrap: break-word;
        word-break: break-all;
        text-align: justify;
        color: #4a4a4a;
        font-size: 0.875em;
        line-height: 2;
        position: relative;
        margin-bottom: 0.75em;
        padding-top: 0.625em;
      }
.v .vlist .vcard .vcontent img,
        .v .vlist .vcard .vcontent iframe,
        .v .vlist .vcard .vcontent frame {
          max-width: 100%;
          border: none;
        }
.v .vlist .vcard .vcontent.expand {
          cursor: pointer;
          max-height: 11.25em;
          overflow: hidden;
        }
.v .vlist .vcard .vcontent.expand:before {
            display: block;
            content: '';
            position: absolute;
            width: 100%;
            left: 0;
            top: 0;
            bottom: 3.15em;
            pointer-events: none;
            background: linear-gradient(
              180deg,
              rgba(255, 255, 255, 0),
              rgba(255, 255, 255, 0.9)
            );
          }
.v .vlist .vcard .vcontent.expand:after {
            display: block;
            content: 'Click on expand';
            text-align: center;
            color: #828586;
            position: absolute;
            width: 100%;
            height: 3.15em;
            line-height: 3.15em;
            left: 0;
            bottom: 0;
            pointer-events: none;
            background: rgba(255, 255, 255, 0.9);
          }
.v .vlist .vcard .vquote {
        color: #666;
        margin-top: 1em;
        padding-left: 1em;
        border-left: 1px dashed rgba(238, 238, 238, 0.5);
      }
.v .vlist .vcard .vquote .vimg {
          width: 2.225em;
          height: 2.225em;
        }
.v .vpage .vmore {
      margin: 1em 0;
    }
.v .clear {
    content: '';
    display: block;
    clear: both;
  }
.v .vloading {
    position: relative;
    padding: 20px;
    display: block;
    height: 80px;
  }
.v .vloading::before {
    box-sizing: border-box;
    content: '';
    position: absolute;
    display: inline-block;
    top: 20px;
    left: 50%;
    margin-left: -20px;
    width: 40px;
    height: 40px;
    border: 6px double rgb(160, 160, 160);
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-radius: 50%;
    animation: spin 1s infinite linear;
  }
.reco-valine-wrapper #valine.v .vbtn{
  border-width: 1px;
  border-style: solid;
  border-color: rgba(200, 200, 200, .32);
}
.reco-valine-wrapper #valine.v .vbtn:is(.dark *){
  border-color: rgba(82, 82, 89, .32);
}
.reco-valine-wrapper #valine.v .vbtn{
  border-radius: 0.5rem;
  --tw-border-opacity: 1;
  border-color: rgb(142 68 173 / var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgb(142 68 173 / var(--tw-text-opacity));
}
.reco-valine-wrapper #valine.v .vbtn:hover{
  background-color: rgb(142 68 173 / 0.9);
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}
.reco-valine-wrapper #valine.v .vwrap{
  border-width: 1px;
  border-style: solid;
  border-color: rgba(200, 200, 200, .32);
}
.reco-valine-wrapper #valine.v .vwrap:is(.dark *){
  border-color: rgba(82, 82, 89, .32);
}
.reco-valine-wrapper #valine.v .vwrap{
  border-radius: 0.5rem;
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}
.reco-valine-wrapper #valine.v .vwrap:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity));
}
.reco-valine-wrapper #valine.v .vwrap{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.reco-valine-wrapper #valine.v .vwrap:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(32 32 34 / var(--tw-bg-opacity));
}
.reco-valine-wrapper #valine.v .vwrap .vheader .vinput{
  border-width: 1px;
  border-style: solid;
  border-color: rgba(200, 200, 200, .32);
}
.reco-valine-wrapper #valine.v .vwrap .vheader .vinput:is(.dark *){
  border-color: rgba(82, 82, 89, .32);
}
.reco-valine-wrapper #valine.v .vwrap .vheader .vinput{
  border-width: 0px;
  border-bottom-width: 1px;
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}
.reco-valine-wrapper #valine.v .vwrap .vheader .vinput:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity));
}
.reco-valine-wrapper #valine.v .vwrap .vheader .vinput{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.reco-valine-wrapper #valine.v .vwrap .vheader .vinput:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(32 32 34 / var(--tw-bg-opacity));
}
.reco-valine-wrapper #valine.v .vwrap .vheader .vinput{
  border-style: dashed;
}
.reco-valine-wrapper #valine.v .vwrap .vheader .vinput:focus{
  --tw-border-opacity: 1;
  border-color: rgb(142 68 173 / var(--tw-border-opacity));
}
.reco-valine-wrapper #valine.v .vwrap .vheader .vinput:-internal-autofill-selected{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}
.reco-valine-wrapper #valine.v .vwrap .vheader .vinput:-internal-autofill-selected:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity));
}
.reco-valine-wrapper #valine.v .vwrap .vheader .vinput:-internal-autofill-selected{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.reco-valine-wrapper #valine.v .vwrap .vheader .vinput:-internal-autofill-selected:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(22 22 23 / var(--tw-bg-opacity));
}
.reco-valine-wrapper #valine.v .vwrap .vtext{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}
.reco-valine-wrapper #valine.v .vwrap .vtext:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity));
}
.reco-valine-wrapper #valine.v .vwrap .vtext input{
  border-width: 1px;
  border-style: solid;
  border-color: rgba(200, 200, 200, .32);
}
.reco-valine-wrapper #valine.v .vwrap .vtext input:is(.dark *){
  border-color: rgba(82, 82, 89, .32);
}
.reco-valine-wrapper #valine.v .vwrap .vtext input{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}
.reco-valine-wrapper #valine.v .vwrap .vtext input:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity));
}
.reco-valine-wrapper #valine.v .vwrap .vtext input{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.reco-valine-wrapper #valine.v .vwrap .vtext input:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(32 32 34 / var(--tw-bg-opacity));
}
.reco-valine-wrapper #valine.v .vwrap .vtext input{
  --tw-text-opacity: 1;
  color: rgb(142 68 173 / var(--tw-text-opacity));
}
.reco-valine-wrapper #valine.v .vicon.actived{
  fill: currentColor;
  --tw-text-opacity: 1;
  color: rgb(142 68 173 / var(--tw-text-opacity));
}
.reco-valine-wrapper #valine.v .vinfo{
  padding-left: 0.5rem;
}
.reco-valine-wrapper #valine.v .vcard{
  position: relative;
}
.reco-valine-wrapper #valine.v .vcard .vquote{
  border-width: 1px;
  border-style: solid;
  border-color: rgba(200, 200, 200, .32);
}
.reco-valine-wrapper #valine.v .vcard .vquote:is(.dark *){
  border-color: rgba(82, 82, 89, .32);
}
.reco-valine-wrapper #valine.v .vcard .vquote{
  border-width: 0px;
  border-left-width: 1px;
  margin-left: 0.5rem;
  border-style: dashed;
}
.reco-valine-wrapper #valine.v .vcard .vimg{
  position: absolute;
  top: 1.75rem;
  height: 2.75rem;
  width: 2.75rem;
  border-radius: 0.5rem;
  border-width: 1px;
  border-color: rgb(142 68 173 / 0.9);
  padding: 0px;
}
.reco-valine-wrapper #valine.v .vcard .vhead .vnick{
  --tw-text-opacity: 1;
  color: rgb(142 68 173 / var(--tw-text-opacity));
}
.reco-valine-wrapper #valine.v .vcard .vhead .vnick::before{
  --tw-bg-opacity: 1;
  background-color: rgb(142 68 173 / var(--tw-bg-opacity));
}
.reco-valine-wrapper #valine.v .vh{
  border-bottom-width: 0px;
}
.reco-valine-wrapper #valine.v .vh .vhead{
  padding-left: 4rem;
}
.reco-valine-wrapper #valine.v .vh .vhead .vsys{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}
.reco-valine-wrapper #valine.v .vh .vhead .vsys:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity));
}
.reco-valine-wrapper #valine.v .vh .vhead .vsys{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.reco-valine-wrapper #valine.v .vh .vhead .vsys:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(32 32 34 / var(--tw-bg-opacity));
}
.reco-valine-wrapper #valine.v .vh .vhead .vsys{
  color: rgb(142 68 173 / 0.9);
}
.reco-valine-wrapper #valine.v .vh .vmeta{
  margin-bottom: 1rem;
  padding-left: 4rem;
}
.reco-valine-wrapper #valine.v .vh .vmeta .vat{
  margin-right: 0.375rem;
  border-radius: 0.375rem;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(142 68 173 / var(--tw-border-opacity));
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  padding-top: 0px;
  padding-bottom: 0px;
  --tw-text-opacity: 1;
  color: rgb(142 68 173 / var(--tw-text-opacity));
}
.reco-valine-wrapper #valine.v .vh .vmeta .vat:hover{
  background-color: rgb(142 68 173 / 0.9);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.reco-valine-wrapper #valine.v .vh .vcontent{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}
.reco-valine-wrapper #valine.v .vh .vcontent:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity));
}
.reco-valine-wrapper #valine.v .vh .vcontent{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.reco-valine-wrapper #valine.v .vh .vcontent:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(32 32 34 / var(--tw-bg-opacity));
}
.reco-valine-wrapper #valine.v .vh .vcontent{
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  border-radius: 0.5rem;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.reco-valine-wrapper #valine.v .vh .vcontent p .at{
  --tw-text-opacity: 1;
  color: rgb(142 68 173 / var(--tw-text-opacity));
}
.reco-valine-wrapper #valine.v .vh .vcontent.expand::before{
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(249 250 251 / 0) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(249 250 251 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: #ffffff var(--tw-gradient-to-position);
}
.reco-valine-wrapper #valine.v .vh .vcontent.expand:is(.dark *)::before{
  --tw-gradient-from: rgb(32 32 34 / 0) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(32 32 34 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: #161617 var(--tw-gradient-to-position);
}
.reco-valine-wrapper #valine.v .vh .vcontent.expand::after{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}
.reco-valine-wrapper #valine.v .vh .vcontent.expand:is(.dark *)::after{
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity));
}
.reco-valine-wrapper #valine.v .vh .vcontent.expand::after{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.reco-valine-wrapper #valine.v .vh .vcontent.expand:is(.dark *)::after{
  --tw-bg-opacity: 1;
  background-color: rgb(22 22 23 / var(--tw-bg-opacity));
}
.reco-valine-wrapper #valine.v .vh .vcontent.expand::after{
  --tw-text-opacity: 1 !important;
  color: rgb(142 68 173 / var(--tw-text-opacity)) !important;
}
.reco-valine-wrapper #valine.v .info{
  padding-right: 0.625rem;
}
.reco-valine-wrapper #valine.v code,
  .reco-valine-wrapper #valine.v pre,
  .reco-valine-wrapper #valine.v .vbtn{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}
.reco-valine-wrapper #valine.v code:is(.dark *),
  .reco-valine-wrapper #valine.v pre:is(.dark *),
  .reco-valine-wrapper #valine.v .vbtn:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity));
}
.reco-valine-wrapper #valine.v code,
  .reco-valine-wrapper #valine.v pre,
  .reco-valine-wrapper #valine.v .vbtn{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.reco-valine-wrapper #valine.v code:is(.dark *),
  .reco-valine-wrapper #valine.v pre:is(.dark *),
  .reco-valine-wrapper #valine.v .vbtn:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(32 32 34 / var(--tw-bg-opacity));
}
.reco-valine-wrapper #valine.v a{
  --tw-text-opacity: 1;
  color: rgb(142 68 173 / var(--tw-text-opacity));
}
.reco-valine-wrapper #valine.v a::before{
  --tw-bg-opacity: 1;
  background-color: rgb(142 68 173 / var(--tw-bg-opacity));
}
:root{--waline-font-size: 1rem;--waline-white: #fff;--waline-light-grey: #999;--waline-dark-grey: #666;--waline-theme-color: #27ae60;--waline-active-color: #2ecc71;--waline-color: #444;--waline-bgcolor: #fff;--waline-bgcolor-light: #f8f8f8;--waline-bgcolor-hover: #f0f0f0;--waline-border-color: #ddd;--waline-disable-bgcolor: #f8f8f8;--waline-disable-color: #000;--waline-code-bgcolor: #282c34;--waline-bq-color: #f0f0f0;--waline-avatar-size: 3.25rem;--waline-m-avatar-size: calc(var(--waline-avatar-size) * 9 / 13);--waline-badge-color: #3498db;--waline-badge-font-size: 0.75em;--waline-info-bgcolor: #f8f8f8;--waline-info-color: #999;--waline-info-font-size: 0.625em;--waline-border: 1px solid var(--waline-border-color);--waline-avatar-radius: 50%;--waline-box-shadow: none}[data-waline]{font-size:var(--waline-font-size);text-align:start}[dir=rtl] [data-waline]{direction:rtl}[data-waline] *{box-sizing:content-box;line-height:1.75}[data-waline] p{color:var(--waline-color)}[data-waline] a{position:relative;display:inline-block;color:var(--waline-theme-color);text-decoration:none;word-break:break-word;cursor:pointer}[data-waline] a:hover{color:var(--waline-active-color)}[data-waline] img{max-width:100%;max-height:400px;border:none}[data-waline] hr{margin:.825em 0;border-style:dashed;border-color:var(--waline-bgcolor-light)}[data-waline] code,[data-waline] pre{margin:0;padding:.2em .4em;border-radius:3px;background:var(--waline-bgcolor-light);font-size:85%}[data-waline] pre{overflow:auto;padding:10px;line-height:1.45}[data-waline] pre::-webkit-scrollbar{width:6px;height:6px}[data-waline] pre::-webkit-scrollbar-track-piece:horizontal{border-radius:6px;background:rgba(0,0,0,.1)}[data-waline] pre::-webkit-scrollbar-thumb:horizontal{width:6px;border-radius:6px;background:var(--waline-theme-color)}[data-waline] pre code{padding:0;background:rgba(0,0,0,0);color:var(--waline-color);white-space:pre-wrap;word-break:keep-all}[data-waline] blockquote{margin:.5em 0;padding:.5em 0 .5em 1em;border-inline-start:8px solid var(--waline-bq-color);color:var(--waline-dark-grey)}[data-waline] blockquote>p{margin:0}[data-waline] ol,[data-waline] ul{margin-inline-start:1.25em;padding:0}[data-waline] input[type=checkbox],[data-waline] input[type=radio]{display:inline-block;vertical-align:middle;margin-top:-2px}.wl-btn{display:inline-block;vertical-align:middle;min-width:2.5em;margin-bottom:0;padding:.5em 1em;border:1px solid var(--waline-border-color);border-radius:.5em;background:rgba(0,0,0,0);color:var(--waline-color);font-weight:400;font-size:.75em;line-height:1.5;text-align:center;white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;transition-duration:.4s;touch-action:manipulation}.wl-btn:hover,.wl-btn:active{border-color:var(--waline-theme-color);color:var(--waline-theme-color)}.wl-btn:disabled{border-color:var(--waline-border-color);background:var(--waline-disable-bgcolor);color:var(--waline-disable-color);cursor:not-allowed}.wl-btn.primary{border-color:var(--waline-theme-color);background:var(--waline-theme-color);color:var(--waline-white)}.wl-btn.primary:hover,.wl-btn.primary:active{border-color:var(--waline-active-color);background:var(--waline-active-color);color:var(--waline-white)}.wl-btn.primary:disabled{border-color:var(--waline-border-color);background:var(--waline-disable-bgcolor);color:var(--waline-disable-color);cursor:not-allowed}.wl-loading{text-align:center}.wl-loading svg{margin:0 auto}.wl-comment{position:relative;display:flex;margin-bottom:.75em}.wl-close{position:absolute;top:-4px;inset-inline-end:-4px;padding:0;border:none;background:rgba(0,0,0,0);line-height:1;cursor:pointer}.wl-login-info{max-width:80px;margin-top:.75em;text-align:center}.wl-logout-btn{position:absolute;top:-10px;inset-inline-end:-10px;padding:3px;border:none;background:rgba(0,0,0,0);line-height:0;cursor:pointer}.wl-avatar{position:relative;width:var(--waline-avatar-size);height:var(--waline-avatar-size);margin:0 auto;border:var(--waline-border);border-radius:var(--waline-avatar-radius)}@media(max-width: 720px){.wl-avatar{width:var(--waline-m-avatar-size);height:var(--waline-m-avatar-size)}}.wl-avatar img{width:100%;height:100%;border-radius:var(--waline-avatar-radius)}.wl-login-nick{display:block;color:var(--waline-theme-color);font-size:.75em;word-break:break-all}.wl-panel{position:relative;flex-shrink:1;width:100%;margin:.5em;border:var(--waline-border);border-radius:.75em;background:var(--waline-bgcolor);box-shadow:var(--waline-box-shadow)}.wl-header{display:flex;overflow:hidden;padding:0 4px;border-bottom:2px dashed var(--waline-border-color);border-top-left-radius:.75em;border-top-right-radius:.75em}@media(max-width: 580px){.wl-header{display:block}}.wl-header label{min-width:40px;padding:.75em .5em;color:var(--waline-color);font-size:.75em;text-align:center}.wl-header input{flex:1;width:0;padding:.5em;background:rgba(0,0,0,0);font-size:.625em;resize:none}.wl-header-item{display:flex;flex:1}@media(max-width: 580px){.wl-header-item:not(:last-child){border-bottom:2px dashed var(--waline-border-color)}}.wl-header-1 .wl-header-item{width:100%}.wl-header-2 .wl-header-item{width:50%}@media(max-width: 580px){.wl-header-2 .wl-header-item{flex:0;width:100%}}.wl-header-3 .wl-header-item{width:33.33%}@media(max-width: 580px){.wl-header-3 .wl-header-item{width:100%}}.wl-editor{position:relative;width:calc(100% - 1em);min-height:8.75em;margin:.75em .5em;border-radius:.5em;background:rgba(0,0,0,0);font-size:.875em;resize:vertical}.wl-editor,.wl-input{max-width:100%;border:none;color:var(--waline-color);outline:none;transition:all .25s ease}.wl-editor:focus,.wl-input:focus{background:var(--waline-bgcolor-light)}.wl-preview{padding:0 .5em .5em}.wl-preview h4{margin:.25em;font-weight:bold;font-size:.9375em}.wl-preview .wl-content{min-height:1.25em;padding:.25em;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.wl-preview .wl-content>*:first-child{margin-top:0}.wl-preview .wl-content>*:last-child{margin-bottom:0}.wl-footer{position:relative;display:flex;flex-wrap:wrap;margin:.5em .75em}.wl-actions{display:flex;flex:2;align-items:center}.wl-action{display:inline-flex;align-items:center;justify-content:center;width:1.5em;height:1.5em;margin:2px;padding:0;border:none;background:rgba(0,0,0,0);color:var(--waline-color);font-size:16px;cursor:pointer}.wl-action:hover{color:var(--waline-theme-color)}.wl-action.active{color:var(--waline-active-color)}#wl-image-upload{display:none}#wl-image-upload:focus+label{color:var(--waline-color)}#wl-image-upload:focus-visible+label{outline:-webkit-focus-ring-color auto 1px}.wl-info{display:flex;flex:3;align-items:center;justify-content:flex-end}.wl-info .wl-text-number{color:var(--waline-info-color);font-size:.75em}.wl-info .wl-text-number .illegal{color:red}.wl-info button{margin-inline-start:.75em}.wl-info button svg{display:block;margin:0 auto;line-height:18px}.wl-emoji-popup{position:absolute;top:100%;inset-inline-start:1.25em;z-index:10;max-width:526px;border:var(--waline-border);border-radius:6px;background:var(--waline-bgcolor);box-shadow:var(--waline-box-shadow);opacity:0;visibility:hidden;transition:transform .2s ease-out,opacity .2s ease-out;transform:scale(0.9, 0.9);transform-origin:0 0}.wl-emoji-popup.display{opacity:1;visibility:visible;transform:none}.wl-emoji-popup button{display:inline-block;vertical-align:middle;width:2em;margin:.125em;padding:0;border-width:0;background:rgba(0,0,0,0);font-size:inherit;line-height:2;text-align:center;cursor:pointer}.wl-emoji-popup button:hover{background:var(--waline-bgcolor-hover)}.wl-emoji-popup .wl-emoji{display:inline-block;vertical-align:middle;max-width:1.5em;max-height:1.5em}.wl-emoji-popup .wl-tab-wrapper{overflow-y:auto;max-height:145px;padding:.5em}.wl-emoji-popup .wl-tab-wrapper::-webkit-scrollbar{width:6px;height:6px}.wl-emoji-popup .wl-tab-wrapper::-webkit-scrollbar-track-piece:vertical{border-radius:6px;background:rgba(0,0,0,.1)}.wl-emoji-popup .wl-tab-wrapper::-webkit-scrollbar-thumb:vertical{width:6px;border-radius:6px;background:var(--waline-theme-color)}.wl-emoji-popup .wl-tabs{position:relative;overflow-x:auto;padding:0 6px;white-space:nowrap}.wl-emoji-popup .wl-tabs::before{content:" ";position:absolute;top:0;right:0;left:0;z-index:2;height:1px;background:var(--waline-border-color)}.wl-emoji-popup .wl-tabs::-webkit-scrollbar{width:6px;height:6px}.wl-emoji-popup .wl-tabs::-webkit-scrollbar-track-piece:horizontal{border-radius:6px;background:rgba(0,0,0,.1)}.wl-emoji-popup .wl-tabs::-webkit-scrollbar-thumb:horizontal{height:6px;border-radius:6px;background:var(--waline-theme-color)}.wl-emoji-popup .wl-tab{position:relative;margin:0;padding:0 .5em}.wl-emoji-popup .wl-tab.active{z-index:3;border:1px solid var(--waline-border-color);border-top-width:0;border-bottom-right-radius:6px;border-bottom-left-radius:6px;background:var(--waline-bgcolor)}.wl-gif-popup{position:absolute;top:100%;inset-inline-start:1.25em;z-index:10;width:calc(100% - 3em);padding:.75em .75em .25em;border:var(--waline-border);border-radius:6px;background:var(--waline-bgcolor);box-shadow:var(--waline-box-shadow);opacity:0;visibility:hidden;transition:transform .2s ease-out,opacity .2s ease-out;transform:scale(0.9, 0.9);transform-origin:0 0}.wl-gif-popup.display{opacity:1;visibility:visible;transform:none}.wl-gif-popup input{box-sizing:border-box;width:100%;margin-bottom:10px;padding:3px 5px;border:var(--waline-border)}.wl-gif-popup img{display:block;box-sizing:border-box;width:100%;border-width:2px;border-style:solid;border-color:#fff;cursor:pointer}.wl-gif-popup img:hover{border-color:var(--waline-theme-color);border-radius:2px}.wl-gallery{display:flex;overflow-y:auto;max-height:80vh}.wl-gallery-column{display:flex;flex:1;flex-direction:column;height:max-content}.wl-cards .wl-user{--avatar-size: var(--waline-avatar-size);position:relative;margin-inline-end:.75em}@media(max-width: 720px){.wl-cards .wl-user{--avatar-size: var(--waline-m-avatar-size)}}.wl-cards .wl-user img{width:var(--avatar-size);height:var(--avatar-size);border-radius:var(--waline-avatar-radius);box-shadow:var(--waline-box-shadow)}.wl-cards .wl-user .verified-icon{position:absolute;top:calc(var(--avatar-size)*3/4);inset-inline-start:calc(var(--avatar-size)*3/4);border-radius:50%;background:var(--waline-bgcolor);box-shadow:var(--waline-box-shadow)}.wl-card-item{position:relative;display:flex;padding:.5em}.wl-card-item .wl-card-item{padding-inline-end:0}.wl-card{flex:1;width:0;padding-bottom:.5em;border-bottom:1px dashed var(--waline-border-color)}.wl-card:first-child{margin-inline-start:1em}.wl-card-item:last-child .wl-card{border-bottom:none}.wl-card .wl-head{overflow:hidden;line-height:1.5}.wl-card .wl-nick{position:relative;display:inline-block;margin-inline-end:.5em;font-weight:bold;font-size:.875em;line-height:1;text-decoration:none}.wl-card .wl-nick svg{position:relative;bottom:-0.125em;line-height:1}.wl-card span.wl-nick{color:var(--waline-dark-grey)}.wl-card .wl-badge{display:inline-block;margin-inline-end:1em;padding:0 .3em;border:1px solid var(--waline-badge-color);border-radius:4px;color:var(--waline-badge-color);font-size:var(--waline-badge-font-size)}.wl-card .wl-time{margin-inline-end:.875em;color:var(--waline-info-color);font-size:.75em}.wl-card .wl-meta{position:relative;line-height:1}.wl-card .wl-meta>span{display:inline-block;margin-inline-end:.25em;padding:2px 4px;border-radius:.2em;background:var(--waline-info-bgcolor);color:var(--waline-info-color);font-size:var(--waline-info-font-size);line-height:1.5}.wl-card .wl-meta>span:empty{display:none}.wl-card .wl-comment-actions{float:right;line-height:1}[dir=rtl] .wl-card .wl-comment-actions{float:left}.wl-card .wl-delete,.wl-card .wl-like,.wl-card .wl-reply,.wl-card .wl-edit{display:inline-flex;align-items:center;border:none;background:rgba(0,0,0,0);color:var(--waline-color);line-height:1;cursor:pointer;transition:color .2s ease}.wl-card .wl-delete:hover,.wl-card .wl-like:hover,.wl-card .wl-reply:hover,.wl-card .wl-edit:hover{color:var(--waline-theme-color)}.wl-card .wl-delete.active,.wl-card .wl-like.active,.wl-card .wl-reply.active,.wl-card .wl-edit.active{color:var(--waline-active-color)}.wl-card .wl-content{position:relative;margin-bottom:.75em;padding-top:.625em;font-size:.875em;line-height:2;word-wrap:break-word}.wl-card .wl-content.expand{overflow:hidden;max-height:8em;cursor:pointer}.wl-card .wl-content.expand::before{content:"";position:absolute;top:0;bottom:3.15em;inset-inline-start:0;z-index:999;display:block;width:100%;background:linear-gradient(180deg, #000, rgba(255, 255, 255, 0.9))}.wl-card .wl-content.expand::after{content:attr(data-expand);position:absolute;bottom:0;inset-inline-start:0;z-index:999;display:block;width:100%;height:3.15em;background:rgba(255,255,255,.9);color:#828586;line-height:3.15em;text-align:center}.wl-card .wl-content>*:first-child{margin-top:0}.wl-card .wl-content>*:last-child{margin-bottom:0}.wl-card .wl-admin-actions{margin:8px 0;font-size:12px;text-align:right}.wl-card .wl-comment-status{margin:0 8px}.wl-card .wl-comment-status .wl-btn{border-radius:0}.wl-card .wl-comment-status .wl-btn:first-child{border-inline-end:0;border-radius:.5em 0 0 .5em}.wl-card .wl-comment-status .wl-btn:last-child{border-inline-start:0;border-radius:0 .5em .5em 0}.wl-card .wl-quote{border-inline-start:1px dashed rgba(237,237,237,.5)}.wl-card .wl-quote .wl-user{--avatar-size: var(--waline-m-avatar-size)}.wl-close-icon{color:var(--waline-border-color)}.wl-content .vemoji,.wl-content .wl-emoji{display:inline-block;vertical-align:baseline;height:1.25em;margin:-0.125em .25em}.wl-content .wl-tex{background:var(--waline-info-bgcolor);color:var(--waline-info-color)}.wl-content span.wl-tex{display:inline-block;margin-inline-end:.25em;padding:2px 4px;border-radius:.2em;font-size:var(--waline-info-font-size);line-height:1.5}.wl-content p.wl-tex{text-align:center}.wl-content .katex-display{overflow:auto hidden;-webkit-overflow-scrolling:touch;padding-top:.2em;padding-bottom:.2em}.wl-content .katex-display::-webkit-scrollbar{height:3px}.wl-content .katex-error{color:red}.wl-count{flex:1;font-weight:bold;font-size:1.25em}.wl-empty{overflow:auto;padding:1.25em;color:var(--waline-color);text-align:center}.wl-operation{text-align:center}.wl-operation button{margin:1em 0}.wl-power{padding:.5em 0;color:var(--waline-light-grey);font-size:var(--waline-info-font-size);text-align:end}.wl-meta-head{display:flex;flex-direction:row;align-items:center;padding:.375em}.wl-sort{margin:0;list-style-type:none}.wl-sort li{display:inline-block;color:var(--waline-info-color);font-size:.75em;cursor:pointer}.wl-sort li.active{color:var(--waline-theme-color)}.wl-sort li+li{margin-inline-start:1em}.wl-reaction{overflow:auto hidden;margin-bottom:1.75em;text-align:center}.wl-reaction img{width:100%;height:100%;transition:all 250ms ease-in-out}.wl-reaction-title{margin:16px auto;font-weight:bold;font-size:18px}.wl-reaction-list{display:flex;flex-direction:row;gap:16px;justify-content:center;margin:0;padding:8px;list-style-type:none}@media(max-width: 580px){.wl-reaction-list{gap:12px}}[data-waline] .wl-reaction-list{margin-inline-start:0}.wl-reaction-item{display:flex;flex-direction:column;align-items:center;cursor:pointer}.wl-reaction-item:hover img,.wl-reaction-item.active img{transform:scale(1.15)}.wl-reaction-img{position:relative;width:42px;height:42px}@media(max-width: 580px){.wl-reaction-img{width:32px;height:32px}}.wl-reaction-loading{position:absolute;top:-4px;inset-inline-end:-5px;width:18px;height:18px;color:var(--waline-theme-color)}.wl-reaction-votes{position:absolute;top:-9px;inset-inline-end:-9px;min-width:1em;padding:2px;border:1px solid var(--waline-theme-color);border-radius:1em;background:var(--waline-bgcolor);color:var(--waline-theme-color);font-weight:700;font-size:.75em;line-height:1}.wl-reaction-item.active .wl-reaction-votes{background:var(--waline-theme-color);color:var(--waline-bgcolor)}.wl-reaction-text{font-size:.875em}.wl-reaction-item.active .wl-reaction-text{color:var(--waline-theme-color)}.wl-content pre,.wl-content pre[class*=language-]{overflow:auto;margin:.75rem 0;padding:1rem 1.25rem;border-radius:6px;background:var(--waline-code-bgcolor);line-height:1.4}.wl-content pre code,.wl-content pre[class*=language-] code{padding:0;border-radius:0;background:rgba(0,0,0,0) !important;color:#bbb;direction:ltr}.wl-content code[class*=language-],.wl-content pre[class*=language-]{background:none;color:#ccc;font-size:1em;font-family:Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;text-align:left;white-space:pre;word-spacing:normal;word-wrap:normal;word-break:normal;tab-size:4;-webkit-hyphens:none;hyphens:none}.wl-content pre[class*=language-]{overflow:auto}.wl-content :not(pre)>code[class*=language-],.wl-content pre[class*=language-]{background:#2d2d2d}.wl-content :not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.wl-content .token.comment,.wl-content .token.block-comment,.wl-content .token.prolog,.wl-content .token.doctype,.wl-content .token.cdata{color:#999}.wl-content .token.punctuation{color:#ccc}.wl-content .token.tag,.wl-content .token.attr-name,.wl-content .token.namespace,.wl-content .token.deleted{color:#e2777a}.wl-content .token.function-name{color:#6196cc}.wl-content .token.boolean,.wl-content .token.number,.wl-content .token.function{color:#f08d49}.wl-content .token.property,.wl-content .token.class-name,.wl-content .token.constant,.wl-content .token.symbol{color:#f8c555}.wl-content .token.selector,.wl-content .token.important,.wl-content .token.atrule,.wl-content .token.keyword,.wl-content .token.builtin{color:#cc99cd}.wl-content .token.string,.wl-content .token.char,.wl-content .token.attr-value,.wl-content .token.regex,.wl-content .token.variable{color:#7ec699}.wl-content .token.operator,.wl-content .token.entity,.wl-content .token.url{color:#67cdcc}.wl-content .token.important,.wl-content .token.bold{font-weight:bold}.wl-content .token.italic{font-style:italic}.wl-content .token.entity{cursor:help}.wl-content .token.inserted{color:green}.wl-recent-item p{display:inline}.wl-user-list{padding:0;list-style:none}.wl-user-list a,.wl-user-list a:hover,.wl-user-list a:visited{color:var(--waline-color);text-decoration:none}.wl-user-list .wl-user-avatar{position:relative;display:inline-block;overflow:hidden;margin-inline-end:10px;border-radius:4px;line-height:0}.wl-user-list .wl-user-avatar>img{width:var(--waline-user-avatar-size, 48px);height:var(--waline-user-avatar-size, 48px)}.wl-user-list .wl-user-badge{position:absolute;bottom:0;inset-inline-end:0;min-width:.7em;height:1.5em;padding:0 .4em;border-radius:4px;background:var(--waline-info-bgcolor);color:var(--waline-info-color);font-weight:bold;font-size:10px;line-height:1.5em;text-align:center}.wl-user-list .wl-user-item{margin:10px 0}.wl-user-list .wl-user-item:nth-child(1) .wl-user-badge{background:var(--waline-rank-gold-bgcolor, #fa3939);color:var(--waline-white);font-weight:bold}.wl-user-list .wl-user-item:nth-child(2) .wl-user-badge{background:var(--waline-rank-silver-bgcolor, #fb811c);color:var(--waline-white);font-weight:bold}.wl-user-list .wl-user-item:nth-child(3) .wl-user-badge{background:var(--waline-rank-copper-bgcolor, #feb207);color:var(--waline-white)}.wl-user-list .wl-user-meta{display:inline-block;vertical-align:top}.wl-user-list .wl-badge{display:inline-block;vertical-align:text-top;margin-inline-start:.5em;padding:0 .3em;border:1px solid var(--waline-badge-color);border-radius:4px;color:var(--waline-badge-color);font-size:var(--waline-badge-font-size)}.wl-user-wall{padding:0;list-style:none}.wl-user-wall .wl-user-badge,.wl-user-wall .wl-user-meta{display:none}.wl-user-wall .wl-user-item{position:relative;display:inline-block;transition:transform ease-in-out .2s}.wl-user-wall .wl-user-item::before,.wl-user-wall .wl-user-item::after{position:absolute;bottom:100%;left:50%;z-index:10;opacity:0;pointer-events:none;transition:all .18s ease-out .18s;transform:translate(-50%, 4px);transform-origin:top}.wl-user-wall .wl-user-item::before{content:"";width:0;height:0;border:5px solid rgba(0,0,0,0);border-top-color:rgba(16,16,16,.95)}.wl-user-wall .wl-user-item::after{content:attr(aria-label);margin-bottom:10px;padding:.5em 1em;border-radius:2px;background:rgba(16,16,16,.95);color:#fff;font-size:12px;white-space:nowrap}.wl-user-wall .wl-user-item:hover{transform:scale(1.1)}.wl-user-wall .wl-user-item:hover::before,.wl-user-wall .wl-user-item:hover::after{opacity:1;pointer-events:none;transform:translate(-50%, 0)}.wl-user-wall .wl-user-item img{width:var(--waline-user-avatar-size, 48px);height:var(--waline-user-avatar-size, 48px)}

/*# sourceMappingURL=waline.css.map */.reco-waline-wrapper {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 1024px) {
  .reco-waline-wrapper {
    max-width: 768px;
  }
}
@media (min-width: 1280px) {
  .reco-waline-wrapper {
    max-width: 1024px;
  }
}
@media (min-width: 768px) {
  .reco-waline-wrapper {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}
.reco-waline-wrapper {
  border-top: 1px solid transparent;
}
.reco-waline-wrapper .wl-panel:is(.dark *) {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(32 32 34 / var(--tw-bg-opacity)) !important;
  border-color: rgba(82, 82, 89, .32) !important;
}
.wl-editor:focus,
.wl-input:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.wl-editor:focus:is(.dark *),
.wl-input:focus:is(.dark *) {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(32 32 34 / var(--tw-bg-opacity)) !important;
  border-color: rgba(82, 82, 89, .32) !important;
}
.wl-action:hover,
.wl-action.actived {
  color: rgb(142 68 173 / 0.9);
}
.wl-btn:hover,
.wl-btn:active {
  --tw-border-opacity: 1;
  border-color: rgb(142 68 173 / var(--tw-border-opacity));
  color: rgb(142 68 173 / 0.9);
}
.wl-btn.primary {
  --tw-border-opacity: 1;
  border-color: rgb(142 68 173 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(142 68 173 / var(--tw-bg-opacity));
}
.wl-btn.primary:hover,
.wl-btn.primary:active {
  --tw-border-opacity: 1;
  border-color: rgb(142 68 173 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(142 68 173 / var(--tw-bg-opacity));
}
.reco-giscus-wrapper {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 1024px) {
  .reco-giscus-wrapper {
    max-width: 768px;
  }
}
@media (min-width: 1280px) {
  .reco-giscus-wrapper {
    max-width: 1024px;
  }
}
@media (min-width: 768px) {
  .reco-giscus-wrapper {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}
.reco-giscus-wrapper {
  border-top: 1px solid transparent;
}:root {
  --nprogress-color: #29d;
  --nprogress-z-index: 1031;
}
#nprogress {
  pointer-events: none;
}

#nprogress .bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--nprogress-z-index);

  width: 100%;
  height: 2px;

  background: var(--nprogress-color);
}
.vp-back-to-top-button {
  position: fixed !important;
  bottom: 4rem;
  inset-inline-end: 1rem;
  z-index: 100;
  width: 48px;
  height: 48px;
  padding: 12px;
  border-width: 0;
  border-radius: 50%;
  background: var(--back-to-top-bg-color);
  color: var(--back-to-top-color);
  box-shadow: 2px 2px 10px 4px var(--back-to-top-shadow);
  cursor: pointer;
}
@media (max-width: 959px) {
  .vp-back-to-top-button {
    transform: scale(0.8);
    transform-origin: 100% 100%;
  }
}
@media print {
  .vp-back-to-top-button {
    display: none;
  }
}
.vp-back-to-top-button:hover {
  color: var(--back-to-top-color-hover);
}
.vp-back-to-top-button .back-to-top-icon {
  overflow: hidden;
  width: 24px;
  height: 24px;
  margin: 0 auto;
  background: var(--back-to-top-icon-color);
  -webkit-mask-image: var(--back-to-top-icon);
  mask-image: var(--back-to-top-icon);
  -webkit-mask-position: 50%;
  mask-position: 50%;
  -webkit-mask-size: cover;
  mask-size: cover;
}
.vp-scroll-progress {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 52px;
  height: 52px;
}
.vp-scroll-progress svg {
  width: 100%;
  height: 100%;
}
.vp-scroll-progress circle {
  opacity: 0.9;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
.back-to-top-enter-active,
.back-to-top-leave-active {
  transition: opacity 0.3s;
}
.back-to-top-enter-from,
.back-to-top-leave-to {
  opacity: 0;
}
:root {
  --back-to-top-z-index: 5;
  --back-to-top-icon: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2048'%3e%3cpath%20fill='none'%20stroke='currentColor'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='4'%20d='M24.008%2014.1V42M12%2026l12-12l12%2012M12%206h24'%20/%3e%3c/svg%3e");
  --back-to-top-bg-color: #fff;
  --back-to-top-color: #3eaf7c;
  --back-to-top-icon-color: currentcolor;
  --back-to-top-color-hover: #71cda3;
  --back-to-top-shadow: rgb(0 0 0 / 20%);
}
/* 仅在需要在 class 属性中使用 tailwind 时才需要下面的引用 */
/* ! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}
::before,
::after {
  --tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden] {
  display: none;
}
*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
.container{
  width: 100%;
}
@media (min-width: 640px){
.container{
    max-width: 640px;
}
}
@media (min-width: 768px){
.container{
    max-width: 768px;
}
}
@media (min-width: 1024px){
.container{
    max-width: 1024px;
}
}
@media (min-width: 1280px){
.container{
    max-width: 1280px;
}
}
@media (min-width: 1536px){
.container{
    max-width: 1536px;
}
}
.visible{
  visibility: visible;
}
.static{
  position: static;
}
.fixed{
  position: fixed;
}
.absolute{
  position: absolute;
}
.relative{
  position: relative;
}
.sticky{
  position: sticky;
}
.right-2{
  right: 0.5rem;
}
.right-4{
  right: 1rem;
}
.top-20{
  top: 5rem;
}
.z-30{
  z-index: 30;
}
.m-0{
  margin: 0px;
}
.my-0{
  margin-top: 0px;
  margin-bottom: 0px;
}
.my-4{
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.my-6{
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.my-8{
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.mb-0{
  margin-bottom: 0px;
}
.mb-1{
  margin-bottom: 0.25rem;
}
.ml-1{
  margin-left: 0.25rem;
}
.mr-1{
  margin-right: 0.25rem;
}
.mr-4{
  margin-right: 1rem;
}
.mt-0{
  margin-top: 0px;
}
.mt-1{
  margin-top: 0.25rem;
}
.box-border{
  box-sizing: border-box;
}
.block{
  display: block;
}
.inline-block{
  display: inline-block;
}
.inline{
  display: inline;
}
.flex{
  display: flex;
}
.inline-flex{
  display: inline-flex;
}
.hidden{
  display: none;
}
.h-14{
  height: 3.5rem;
}
.h-4{
  height: 1rem;
}
.h-8{
  height: 2rem;
}
.w-14{
  width: 3.5rem;
}
.w-4{
  width: 1rem;
}
.w-8{
  width: 2rem;
}
.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.cursor-pointer{
  cursor: pointer;
}
.resize{
  resize: both;
}
.flex-row{
  flex-direction: row;
}
.flex-row-reverse{
  flex-direction: row-reverse;
}
.flex-col{
  flex-direction: column;
}
.flex-col-reverse{
  flex-direction: column-reverse;
}
.items-center{
  align-items: center;
}
.justify-between{
  justify-content: space-between;
}
.overflow-hidden{
  overflow: hidden;
}
.rounded-1\/2{
  border-radius: 50%;
}
.rounded-lg{
  border-radius: 0.5rem;
}
.border{
  border-width: 1px;
}
.border-0{
  border-width: 0px;
}
.border-b{
  border-bottom-width: 1px;
}
.border-b-2{
  border-bottom-width: 2px;
}
.border-t{
  border-top-width: 1px;
}
.border-t-0{
  border-top-width: 0px;
}
.border-solid{
  border-style: solid;
}
.border-dashed{
  border-style: dashed;
}
.border-reco-primary{
  --tw-border-opacity: 1;
  border-color: rgb(142 68 173 / var(--tw-border-opacity));
}
.border-transparent{
  border-color: transparent;
}
.bg-reco-primary{
  --tw-bg-opacity: 1;
  background-color: rgb(142 68 173 / var(--tw-bg-opacity));
}
.p-1{
  padding: 0.25rem;
}
.p-1\.5{
  padding: 0.375rem;
}
.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-3\.5{
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.py-0{
  padding-top: 0px;
  padding-bottom: 0px;
}
.py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5{
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-4{
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-6{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.pb-4{
  padding-bottom: 1rem;
}
.pl-0{
  padding-left: 0px;
}
.pr-0{
  padding-right: 0px;
}
.pt-0{
  padding-top: 0px;
}
.text-center{
  text-align: center;
}
.text-xl{
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-reco-text-lightmode{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}
.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
/* 仅在需要在 class 属性中使用 tailwind 时才需要下面的引用 */
/* ! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}
::before,
::after {
  --tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden] {
  display: none;
}
*{
  margin: 0px;
  padding: 0px;
}
*,
  ::before,
  ::after{
  box-sizing: border-box;
  border-width: 0px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100%;
}
body {
    /* antialiased 字体平滑 */
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}
body:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity));
}
body{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
body:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(22 22 23 / var(--tw-bg-opacity));
}
body{
  margin: 0px;
  width: 100%;
  overflow-x: hidden;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
    min-width: 320px;
    direction: ltr;
    /* 像素较小时字体会拼接在一起 */
    text-rendering: optimizeLegibility;
    transition: background-color 0.3s ease;
}
main{
  display: block;
}
svg{
  display: inline-block;
}
hr{
  border-width: 1px;
  border-style: solid;
  border-color: rgba(200, 200, 200, .32);
}
hr:is(.dark *){
  border-color: rgba(82, 82, 89, .32);
}
hr{
  border-width: 0px;
  border-top-width: 1px;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
h1,
  h2,
  h3,
  h4,
  h5,
  h6{
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity));
}
h1:is(.dark *),
  h2:is(.dark *),
  h3:is(.dark *),
  h4:is(.dark *),
  h5:is(.dark *),
  h6:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
h1,
  h2,
  h3,
  h4,
  h5,
  h6{
  z-index: -10;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: -2rem;
  margin-bottom: 2rem;
  padding-top: 3rem;
  line-height: 1.25rem;
}
h1{
  margin-top: -3rem;
  font-size: 1.875rem;
  line-height: 2.25rem;
}
h2{
  line-height: 1.25;
}
h2 span{
  font-size: 1.5rem;
  line-height: 2rem;
}
h2::before{
  margin-bottom: 1.5rem;
  display: block;
  width: 100%;
  border-top-width: 1px;
  border-style: solid;
  border-color: rgba(200, 200, 200, .32);
}
h2:is(.dark *)::before{
  border-color: rgba(82, 82, 89, .32);
}
h2::before {
      content: ' ';
}
h3 span{
  font-size: 1.25rem;
  line-height: 1.75rem;
}
h4 span{
  font-size: 1.125rem;
  line-height: 1.75rem;
}
h5 span{
  font-size: 1rem;
  line-height: 1.5rem;
}
h6 span{
  font-size: 0.875rem;
  line-height: 1.25rem;
}
h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  strong,
  b{
  font-weight: 600;
}
a:active,
  a:link,
  a:focus,
  a:visited{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}
a:active:is(.dark *),
  a:link:is(.dark *),
  a:focus:is(.dark *),
  a:visited:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity));
}
p,
  ol,
  ul,
  table{
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  line-height: 2rem;
}
a,
  area,
  button,
  [role='button'],
  input,
  label,
  select,
  summary,
  textarea {
    touch-action: manipulation;
    background-color: transparent;
    -webkit-text-decoration-line: none;
            text-decoration-line: none;
}
button{
  font-size: 1rem;
  line-height: 1.5rem;
}
figure{
  margin: 0px;
}
img{
  max-width: 100%;
}
ul,
  ol{
  padding-left: 1.25rem;
}
ul{
  list-style-type: disc;
}
ol{
  list-style-type: decimal;
}
li > ul,
  li > ol{
  margin: 0px;
}
table{
  display: block;
  width: 100%;
  overflow-x: auto;
  border-radius: 0.5rem;
    border-collapsible: collapsible;
}
table tr{
  border-width: 1px;
  border-style: solid;
  border-color: rgba(200, 200, 200, .32);
}
table tr:is(.dark *){
  border-color: rgba(82, 82, 89, .32);
}
table tr{
  border-radius: 0.5rem;
}
table th{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
  text-align: left;
  font-weight: 600;
}
table th:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(32 32 34 / var(--tw-bg-opacity));
}
table td,
    table th{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
table td:not(:last-child), table th:not(:last-child){
  border-right-width: 1px;
  border-style: solid;
  border-color: rgba(200, 200, 200, .32);
}
table td:not(:last-child):is(.dark *), table th:not(:last-child):is(.dark *){
  border-color: rgba(82, 82, 89, .32);
}
blockquote{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}
blockquote:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity));
}
blockquote{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
blockquote:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(32 32 34 / var(--tw-bg-opacity));
}
blockquote{
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  margin-left: 0px;
  margin-right: 0px;
  border-left-width: 4px;
  border-style: solid;
  padding: 0.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
}
blockquote > p{
  margin: 0px;
}
pre,
  code,
  kbd {
    font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
}
kbd{
  border-radius: 0.5rem;
  border-width: 1px;
  border-bottom-width: 2px;
  border-color: rgb(156 163 175 / 0.2);
  background-color: rgb(156 163 175 / 0.05);
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
form{
  margin: 0px;
}
p > img{
  border-radius: 0.5rem;
}
li svg{
  vertical-align: middle;
    transform: translateY(-10%);
}
*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
.container{
  width: 100%;
}
@media (min-width: 640px){
.container{
    max-width: 640px;
}
}
@media (min-width: 768px){
.container{
    max-width: 768px;
}
}
@media (min-width: 1024px){
.container{
    max-width: 1024px;
}
}
@media (min-width: 1280px){
.container{
    max-width: 1280px;
}
}
@media (min-width: 1536px){
.container{
    max-width: 1536px;
}
}
.text-basic{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}
.text-basic:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity));
}
.border-block{
  border-width: 1px;
  border-style: solid;
  border-color: rgba(200, 200, 200, .32);
}
.border-block:is(.dark *){
  border-color: rgba(82, 82, 89, .32);
}
.border-block{
  border-radius: 0.5rem;
}
.bg-block{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}
.bg-block:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity));
}
.bg-block{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.bg-block:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(32 32 34 / var(--tw-bg-opacity));
}
.visible{
  visibility: visible;
}
.static{
  position: static;
}
.fixed{
  position: fixed;
}
.absolute{
  position: absolute;
}
.relative{
  position: relative;
}
.sticky{
  position: sticky;
}
.right-2{
  right: 0.5rem;
}
.right-4{
  right: 1rem;
}
.top-20{
  top: 5rem;
}
.z-30{
  z-index: 30;
}
.m-0{
  margin: 0px;
}
.my-0{
  margin-top: 0px;
  margin-bottom: 0px;
}
.my-4{
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.my-6{
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.my-8{
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.mb-0{
  margin-bottom: 0px;
}
.mb-1{
  margin-bottom: 0.25rem;
}
.ml-1{
  margin-left: 0.25rem;
}
.mr-1{
  margin-right: 0.25rem;
}
.mr-4{
  margin-right: 1rem;
}
.mt-0{
  margin-top: 0px;
}
.mt-1{
  margin-top: 0.25rem;
}
.box-border{
  box-sizing: border-box;
}
.block{
  display: block;
}
.inline-block{
  display: inline-block;
}
.inline{
  display: inline;
}
.flex{
  display: flex;
}
.inline-flex{
  display: inline-flex;
}
.hidden{
  display: none;
}
.h-14{
  height: 3.5rem;
}
.h-4{
  height: 1rem;
}
.h-8{
  height: 2rem;
}
.w-14{
  width: 3.5rem;
}
.w-4{
  width: 1rem;
}
.w-8{
  width: 2rem;
}
.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.cursor-pointer{
  cursor: pointer;
}
.resize{
  resize: both;
}
.flex-row{
  flex-direction: row;
}
.flex-row-reverse{
  flex-direction: row-reverse;
}
.flex-col{
  flex-direction: column;
}
.flex-col-reverse{
  flex-direction: column-reverse;
}
.items-center{
  align-items: center;
}
.justify-between{
  justify-content: space-between;
}
.overflow-hidden{
  overflow: hidden;
}
.rounded-1\/2{
  border-radius: 50%;
}
.rounded-lg{
  border-radius: 0.5rem;
}
.border{
  border-width: 1px;
}
.border-0{
  border-width: 0px;
}
.border-b{
  border-bottom-width: 1px;
}
.border-b-2{
  border-bottom-width: 2px;
}
.border-t{
  border-top-width: 1px;
}
.border-t-0{
  border-top-width: 0px;
}
.border-solid{
  border-style: solid;
}
.border-dashed{
  border-style: dashed;
}
.border-reco-primary{
  --tw-border-opacity: 1;
  border-color: rgb(142 68 173 / var(--tw-border-opacity));
}
.border-transparent{
  border-color: transparent;
}
.bg-reco-primary{
  --tw-bg-opacity: 1;
  background-color: rgb(142 68 173 / var(--tw-bg-opacity));
}
.p-1{
  padding: 0.25rem;
}
.p-1\.5{
  padding: 0.375rem;
}
.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-3\.5{
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.py-0{
  padding-top: 0px;
  padding-bottom: 0px;
}
.py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5{
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-4{
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-6{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.pb-4{
  padding-bottom: 1rem;
}
.pl-0{
  padding-left: 0px;
}
.pr-0{
  padding-right: 0px;
}
.pt-0{
  padding-top: 0px;
}
.text-center{
  text-align: center;
}
.text-xl{
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-reco-text-lightmode{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}
.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.bulletin-wrapper{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}
.bulletin-wrapper:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity));
}
.bulletin-wrapper{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.bulletin-wrapper:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(22 22 23 / var(--tw-bg-opacity));
}
.bulletin-wrapper{
  position: fixed;
  top: 5rem;
  right: 1rem;
  z-index: 30;
  box-sizing: border-box;
  border-radius: 0.5rem;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(200, 200, 200, .32);
}
.bulletin-wrapper:is(.dark *){
  border-color: rgba(82, 82, 89, .32);
}
.bulletin-wrapper{
  --tw-border-opacity: 1;
  border-color: rgb(142 68 173 / var(--tw-border-opacity));
}
.bulletin-wrapper:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(142 68 173 / var(--tw-border-opacity));
}
.bulletin-wrapper {
  min-height: 200px;
  max-height: 660px;
  overflow-y: auto;
}
.bulletin-wrapper .bulletin-title{
  margin: 0px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  --tw-bg-opacity: 1;
  background-color: rgb(142 68 173 / var(--tw-bg-opacity));
  padding: 0.375rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.bulletin-wrapper .bulletin-title .btn-close{
  right: 0.5rem;
  display: inline-block;
  height: 1rem;
  width: 1rem;
  cursor: pointer;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
      width: 22px;
      height: 22px;
      fill: currentColor;
}
.bulletin-wrapper .bulletin-content{
  box-sizing: border-box;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  padding-left: 2rem;
  padding-right: 2rem;
}
.bulletin-wrapper .bulletin-content .btn-group{
  text-align: center;
}
.bulletin-wrapper .bulletin-content .btn{
  display: inline-block;
  height: 3.5rem;
  width: 3.5rem;
  cursor: pointer;
  border-radius: 50%;
  --tw-bg-opacity: 1;
  background-color: rgb(142 68 173 / var(--tw-bg-opacity));
  text-align: center;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
      line-height: 3.5rem;
}
.bulletin-wrapper .bulletin-content .btn:not(:first-child){
  margin-left: 0.5rem;
}
.bulletin-wrapper .bulletin-content h5{
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding-top: 0px;
}
.bulletin-wrapper .bulletin-content img{
  width: 100%;
}
.bulletin-wrapper .bulletin-content hr{
  margin-top: 2rem;
  margin-bottom: 2rem;
  border-top-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(142 68 173 / var(--tw-border-opacity));
}
:root {
  --external-link-icon-color: #aaa;
}
.external-link-icon {
  position: relative;
  display: inline-block;
  color: var(--external-link-icon-color);
  vertical-align: middle;
  top: -1px;
}

@media print {
  .external-link-icon {
    display: none;
  }
}

.external-link-icon-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
:root {
  --search-bg-color: #fff;
  --search-accent-color: #3eaf7c;
  --search-text-color: #2c3e50;
  --search-border-color: #eaecef;
  --search-item-text-color: #5d81a5;
  --search-item-focus-bg-color: #f3f4f5;
  --search-input-width: 8rem;
  --search-result-width: 20rem;
}
.search-box {
  position: relative;
  display: inline-block;
  margin-left: 1rem;
}
@media print {
  .search-box {
    display: none;
  }
}
.search-box input {
  display: inline-block;
  width: var(--search-input-width);
  height: 2rem;
  padding: 0 0.5rem 0 2rem;
  border: 1px solid var(--search-border-color);
  border-radius: 2rem;
  background: var(--search-bg-color) url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='13'%3e%3cg%20stroke-width='2'%20stroke='%23aaa'%20fill='none'%3e%3cpath%20d='M11.29%2011.71l-4-4'/%3e%3ccircle%20cx='5'%20cy='5'%20r='4'/%3e%3c/g%3e%3c/svg%3e") 0.6rem 0.5rem no-repeat;
  background-size: 1rem;
  color: var(--search-text-color);
  outline: none;
  font-size: 0.9rem;
  line-height: 2rem;
  cursor: text;
  transition: all ease 0.3s;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}
@media (max-width: 719px) {
  .search-box input {
    position: relative;
    width: 0;
    border-color: transparent;
    cursor: pointer;
  }
}
.search-box input:focus {
  border-color: var(--search-accent-color);
  cursor: auto;
}
@media (max-width: 719px) {
  .search-box input:focus {
    left: 0;
    width: 10rem;
    cursor: text;
  }
}
@media (max-width: 419px) {
  .search-box input:focus {
    width: 8rem;
  }
}
.search-box .suggestions {
  position: absolute;
  top: 2rem;
  right: 0;
  width: var(--search-result-width);
  padding: 0.4rem;
  border: 1px solid var(--search-border-color);
  border-radius: 6px;
  background: var(--search-bg-color);
  list-style-type: none;
}
@media (max-width: 419px) {
  .search-box .suggestions {
    right: -0.5rem;
    width: calc(100vw - 4rem);
  }
}
.search-box .suggestion {
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  line-height: 1.4;
  cursor: pointer;
}
.search-box .suggestion a {
  color: var(--search-item-text-color);
  white-space: normal;
}
.search-box .suggestion.focus {
  background-color: var(--search-item-focus-bg-color);
}
.search-box .suggestion.focus a {
  color: var(--search-accent-color);
}
.search-box .suggestion .page-title {
  font-weight: 600;
}
.search-box .suggestion .page-header {
  margin-left: 0.25em;
  font-size: 0.9em;
}
:root {
  --medium-zoom-z-index: 100;
  --medium-zoom-bg-color: #fff;
  --medium-zoom-opacity: 1;
}
.medium-zoom-overlay {
  z-index: var(--medium-zoom-z-index);

  /* override element style set by medium-zoom script */
  background-color: var(--medium-zoom-bg-color) !important;
}

.medium-zoom-overlay ~ img {
  z-index: calc(var(--medium-zoom-z-index) + 1);
}

.medium-zoom--opened .medium-zoom-overlay {
  opacity: var(--medium-zoom-opacity);
}

.badge {
  display: inline-block;
  font-size: 14px;
  height: 18px;
  line-height: 18px;
  border-radius: 3px;
  padding: 0 6px;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.badge.tip {
  --tw-bg-opacity: 1;
  background-color: rgb(142 68 173 / var(--tw-bg-opacity));
}
.badge.warning {
  --tw-bg-opacity: 1;
  background-color: rgb(251 155 95 / var(--tw-bg-opacity));
}
.badge.danger {
  --tw-bg-opacity: 1;
  background-color: rgb(242 109 109 / var(--tw-bg-opacity));
}
.badge + .badge {
    margin-left: 5px;
}

.xicon-container {
    display: inline-flex;
    cursor: pointer
}
.xicon-container.left {
    flex-direction: row;
    align-items: center
}
.xicon-container.left > svg {
    margin-right: 0.375rem
}
.xicon-container.right {
    flex-direction: row-reverse;
    align-items: center
}
.xicon-container.right > svg {
    margin-left: 0.375rem
}
.xicon-container.top {
    flex-direction: column;
    align-items: center
}
.xicon-container.top > svg {
    margin-bottom: 0.375rem
}
.xicon-container.bottom {
    flex-direction: column-reverse;
    align-items: center
}
.xicon-container.bottom > svg {
    margin-top: 0.375rem
}
/* 仅在需要在 class 属性中使用 tailwind 时才需要下面的引用 */
/* ! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}
::before,
::after {
  --tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden] {
  display: none;
}
*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
.container{
  width: 100%;
}
@media (min-width: 640px){
.container{
    max-width: 640px;
}
}
@media (min-width: 768px){
.container{
    max-width: 768px;
}
}
@media (min-width: 1024px){
.container{
    max-width: 1024px;
}
}
@media (min-width: 1280px){
.container{
    max-width: 1280px;
}
}
@media (min-width: 1536px){
.container{
    max-width: 1536px;
}
}
.visible{
  visibility: visible;
}
.static{
  position: static;
}
.fixed{
  position: fixed;
}
.absolute{
  position: absolute;
}
.relative{
  position: relative;
}
.sticky{
  position: sticky;
}
.right-2{
  right: 0.5rem;
}
.right-4{
  right: 1rem;
}
.top-20{
  top: 5rem;
}
.z-30{
  z-index: 30;
}
.m-0{
  margin: 0px;
}
.my-0{
  margin-top: 0px;
  margin-bottom: 0px;
}
.my-4{
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.my-6{
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.my-8{
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.mb-0{
  margin-bottom: 0px;
}
.mb-1{
  margin-bottom: 0.25rem;
}
.ml-1{
  margin-left: 0.25rem;
}
.mr-1{
  margin-right: 0.25rem;
}
.mr-4{
  margin-right: 1rem;
}
.mt-0{
  margin-top: 0px;
}
.mt-1{
  margin-top: 0.25rem;
}
.box-border{
  box-sizing: border-box;
}
.block{
  display: block;
}
.inline-block{
  display: inline-block;
}
.inline{
  display: inline;
}
.flex{
  display: flex;
}
.inline-flex{
  display: inline-flex;
}
.hidden{
  display: none;
}
.h-14{
  height: 3.5rem;
}
.h-4{
  height: 1rem;
}
.h-8{
  height: 2rem;
}
.w-14{
  width: 3.5rem;
}
.w-4{
  width: 1rem;
}
.w-8{
  width: 2rem;
}
.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.cursor-pointer{
  cursor: pointer;
}
.resize{
  resize: both;
}
.flex-row{
  flex-direction: row;
}
.flex-row-reverse{
  flex-direction: row-reverse;
}
.flex-col{
  flex-direction: column;
}
.flex-col-reverse{
  flex-direction: column-reverse;
}
.items-center{
  align-items: center;
}
.justify-between{
  justify-content: space-between;
}
.overflow-hidden{
  overflow: hidden;
}
.rounded-1\/2{
  border-radius: 50%;
}
.rounded-lg{
  border-radius: 0.5rem;
}
.border{
  border-width: 1px;
}
.border-0{
  border-width: 0px;
}
.border-b{
  border-bottom-width: 1px;
}
.border-b-2{
  border-bottom-width: 2px;
}
.border-t{
  border-top-width: 1px;
}
.border-t-0{
  border-top-width: 0px;
}
.border-solid{
  border-style: solid;
}
.border-dashed{
  border-style: dashed;
}
.border-reco-primary{
  --tw-border-opacity: 1;
  border-color: rgb(142 68 173 / var(--tw-border-opacity));
}
.border-transparent{
  border-color: transparent;
}
.bg-reco-primary{
  --tw-bg-opacity: 1;
  background-color: rgb(142 68 173 / var(--tw-bg-opacity));
}
.p-1{
  padding: 0.25rem;
}
.p-1\.5{
  padding: 0.375rem;
}
.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-3\.5{
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.py-0{
  padding-top: 0px;
  padding-bottom: 0px;
}
.py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5{
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-4{
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-6{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.pb-4{
  padding-bottom: 1rem;
}
.pl-0{
  padding-left: 0px;
}
.pr-0{
  padding-right: 0px;
}
.pt-0{
  padding-top: 0px;
}
.text-center{
  text-align: center;
}
.text-xl{
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-reco-text-lightmode{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}
.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
/* 仅在需要在 class 属性中使用 tailwind 时才需要下面的引用 */
/* ! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}
::before,
::after {
  --tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden] {
  display: none;
}
*{
  margin: 0px;
  padding: 0px;
}
*,
  ::before,
  ::after{
  box-sizing: border-box;
  border-width: 0px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100%;
}
body {
    /* antialiased 字体平滑 */
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}
body:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity));
}
body{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
body:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(22 22 23 / var(--tw-bg-opacity));
}
body{
  margin: 0px;
  width: 100%;
  overflow-x: hidden;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
    min-width: 320px;
    direction: ltr;
    /* 像素较小时字体会拼接在一起 */
    text-rendering: optimizeLegibility;
    transition: background-color 0.3s ease;
}
main{
  display: block;
}
svg{
  display: inline-block;
}
hr{
  border-width: 1px;
  border-style: solid;
  border-color: rgba(200, 200, 200, .32);
}
hr:is(.dark *){
  border-color: rgba(82, 82, 89, .32);
}
hr{
  border-width: 0px;
  border-top-width: 1px;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
h1,
  h2,
  h3,
  h4,
  h5,
  h6{
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity));
}
h1:is(.dark *),
  h2:is(.dark *),
  h3:is(.dark *),
  h4:is(.dark *),
  h5:is(.dark *),
  h6:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
h1,
  h2,
  h3,
  h4,
  h5,
  h6{
  z-index: -10;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: -2rem;
  margin-bottom: 2rem;
  padding-top: 3rem;
  line-height: 1.25rem;
}
h1{
  margin-top: -3rem;
  font-size: 1.875rem;
  line-height: 2.25rem;
}
h2{
  line-height: 1.25;
}
h2 span{
  font-size: 1.5rem;
  line-height: 2rem;
}
h2::before{
  margin-bottom: 1.5rem;
  display: block;
  width: 100%;
  border-top-width: 1px;
  border-style: solid;
  border-color: rgba(200, 200, 200, .32);
}
h2:is(.dark *)::before{
  border-color: rgba(82, 82, 89, .32);
}
h2::before {
      content: ' ';
}
h3 span{
  font-size: 1.25rem;
  line-height: 1.75rem;
}
h4 span{
  font-size: 1.125rem;
  line-height: 1.75rem;
}
h5 span{
  font-size: 1rem;
  line-height: 1.5rem;
}
h6 span{
  font-size: 0.875rem;
  line-height: 1.25rem;
}
h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  strong,
  b{
  font-weight: 600;
}
a:active,
  a:link,
  a:focus,
  a:visited{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}
a:active:is(.dark *),
  a:link:is(.dark *),
  a:focus:is(.dark *),
  a:visited:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity));
}
p,
  ol,
  ul,
  table{
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  line-height: 2rem;
}
a,
  area,
  button,
  [role='button'],
  input,
  label,
  select,
  summary,
  textarea {
    touch-action: manipulation;
    background-color: transparent;
    -webkit-text-decoration-line: none;
            text-decoration-line: none;
}
button{
  font-size: 1rem;
  line-height: 1.5rem;
}
figure{
  margin: 0px;
}
img{
  max-width: 100%;
}
ul,
  ol{
  padding-left: 1.25rem;
}
ul{
  list-style-type: disc;
}
ol{
  list-style-type: decimal;
}
li > ul,
  li > ol{
  margin: 0px;
}
table{
  display: block;
  width: 100%;
  overflow-x: auto;
  border-radius: 0.5rem;
    border-collapsible: collapsible;
}
table tr{
  border-width: 1px;
  border-style: solid;
  border-color: rgba(200, 200, 200, .32);
}
table tr:is(.dark *){
  border-color: rgba(82, 82, 89, .32);
}
table tr{
  border-radius: 0.5rem;
}
table th{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
  text-align: left;
  font-weight: 600;
}
table th:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(32 32 34 / var(--tw-bg-opacity));
}
table td,
    table th{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
table td:not(:last-child), table th:not(:last-child){
  border-right-width: 1px;
  border-style: solid;
  border-color: rgba(200, 200, 200, .32);
}
table td:not(:last-child):is(.dark *), table th:not(:last-child):is(.dark *){
  border-color: rgba(82, 82, 89, .32);
}
blockquote{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}
blockquote:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity));
}
blockquote{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
blockquote:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(32 32 34 / var(--tw-bg-opacity));
}
blockquote{
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  margin-left: 0px;
  margin-right: 0px;
  border-left-width: 4px;
  border-style: solid;
  padding: 0.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
}
blockquote > p{
  margin: 0px;
}
pre,
  code,
  kbd {
    font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
}
kbd{
  border-radius: 0.5rem;
  border-width: 1px;
  border-bottom-width: 2px;
  border-color: rgb(156 163 175 / 0.2);
  background-color: rgb(156 163 175 / 0.05);
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
form{
  margin: 0px;
}
p > img{
  border-radius: 0.5rem;
}
li svg{
  vertical-align: middle;
    transform: translateY(-10%);
}
*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
.container{
  width: 100%;
}
@media (min-width: 640px){
.container{
    max-width: 640px;
}
}
@media (min-width: 768px){
.container{
    max-width: 768px;
}
}
@media (min-width: 1024px){
.container{
    max-width: 1024px;
}
}
@media (min-width: 1280px){
.container{
    max-width: 1280px;
}
}
@media (min-width: 1536px){
.container{
    max-width: 1536px;
}
}
.text-basic{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}
.text-basic:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity));
}
.border-block{
  border-width: 1px;
  border-style: solid;
  border-color: rgba(200, 200, 200, .32);
}
.border-block:is(.dark *){
  border-color: rgba(82, 82, 89, .32);
}
.border-block{
  border-radius: 0.5rem;
}
.bg-block{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}
.bg-block:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity));
}
.bg-block{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.bg-block:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(32 32 34 / var(--tw-bg-opacity));
}
.visible{
  visibility: visible;
}
.static{
  position: static;
}
.fixed{
  position: fixed;
}
.absolute{
  position: absolute;
}
.relative{
  position: relative;
}
.sticky{
  position: sticky;
}
.right-2{
  right: 0.5rem;
}
.right-4{
  right: 1rem;
}
.top-20{
  top: 5rem;
}
.z-30{
  z-index: 30;
}
.m-0{
  margin: 0px;
}
.my-0{
  margin-top: 0px;
  margin-bottom: 0px;
}
.my-4{
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.my-6{
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.my-8{
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.mb-0{
  margin-bottom: 0px;
}
.mb-1{
  margin-bottom: 0.25rem;
}
.ml-1{
  margin-left: 0.25rem;
}
.mr-1{
  margin-right: 0.25rem;
}
.mr-4{
  margin-right: 1rem;
}
.mt-0{
  margin-top: 0px;
}
.mt-1{
  margin-top: 0.25rem;
}
.box-border{
  box-sizing: border-box;
}
.block{
  display: block;
}
.inline-block{
  display: inline-block;
}
.inline{
  display: inline;
}
.flex{
  display: flex;
}
.inline-flex{
  display: inline-flex;
}
.hidden{
  display: none;
}
.h-14{
  height: 3.5rem;
}
.h-4{
  height: 1rem;
}
.h-8{
  height: 2rem;
}
.w-14{
  width: 3.5rem;
}
.w-4{
  width: 1rem;
}
.w-8{
  width: 2rem;
}
.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.cursor-pointer{
  cursor: pointer;
}
.resize{
  resize: both;
}
.flex-row{
  flex-direction: row;
}
.flex-row-reverse{
  flex-direction: row-reverse;
}
.flex-col{
  flex-direction: column;
}
.flex-col-reverse{
  flex-direction: column-reverse;
}
.items-center{
  align-items: center;
}
.justify-between{
  justify-content: space-between;
}
.overflow-hidden{
  overflow: hidden;
}
.rounded-1\/2{
  border-radius: 50%;
}
.rounded-lg{
  border-radius: 0.5rem;
}
.border{
  border-width: 1px;
}
.border-0{
  border-width: 0px;
}
.border-b{
  border-bottom-width: 1px;
}
.border-b-2{
  border-bottom-width: 2px;
}
.border-t{
  border-top-width: 1px;
}
.border-t-0{
  border-top-width: 0px;
}
.border-solid{
  border-style: solid;
}
.border-dashed{
  border-style: dashed;
}
.border-reco-primary{
  --tw-border-opacity: 1;
  border-color: rgb(142 68 173 / var(--tw-border-opacity));
}
.border-transparent{
  border-color: transparent;
}
.bg-reco-primary{
  --tw-bg-opacity: 1;
  background-color: rgb(142 68 173 / var(--tw-bg-opacity));
}
.p-1{
  padding: 0.25rem;
}
.p-1\.5{
  padding: 0.375rem;
}
.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-3\.5{
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.py-0{
  padding-top: 0px;
  padding-bottom: 0px;
}
.py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5{
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-4{
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-6{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.pb-4{
  padding-bottom: 1rem;
}
.pl-0{
  padding-left: 0px;
}
.pr-0{
  padding-right: 0px;
}
.pt-0{
  padding-top: 0px;
}
.text-center{
  text-align: center;
}
.text-xl{
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-reco-text-lightmode{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}
.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.code-group{
  border-width: 1px;
  border-style: solid;
  border-color: rgba(200, 200, 200, .32);
}
.code-group:is(.dark *){
  border-color: rgba(82, 82, 89, .32);
}
.code-group{
  border-radius: 0.5rem;
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}
.code-group:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity));
}
.code-group{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.code-group:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(32 32 34 / var(--tw-bg-opacity));
}
.code-group{
  position: relative;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  overflow: hidden;
}
.code-group .code-group__nav .code-group__ul{
  margin-top: 0px;
  margin-bottom: 0px;
  list-style-type: none;
  padding-left: 0px;
}
.code-group .code-group__nav .code-group__ul .code-group__li{
  display: inline-block;
}
.code-group .code-group__nav .code-group__ul .code-group__li button{
  display: flex;
  align-items: center;
  border-bottom-width: 2px;
  border-style: solid;
  border-color: transparent;
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.code-group .code-group__nav .code-group__ul .code-group__li button .xicon-container{
  display: block;
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}
.code-group .code-group__nav .code-group__ul .code-group__li button .xicon-container:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity));
}
.code-group .code-group__nav .code-group__ul .code-group__li button.code-group__nav-tab-active{
  --tw-border-opacity: 1 !important;
  border-color: rgb(142 68 173 / var(--tw-border-opacity)) !important;
}
.code-group .code-group__nav .code-group__ul .code-group__li button.code-group__nav-tab-active .xicon-container{
  --tw-text-opacity: 1;
  color: rgb(142 68 173 / var(--tw-text-opacity));
}
/* 仅在需要在 class 属性中使用 tailwind 时才需要下面的引用 */
/* ! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}
::before,
::after {
  --tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden] {
  display: none;
}
*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
.container{
  width: 100%;
}
@media (min-width: 640px){
.container{
    max-width: 640px;
}
}
@media (min-width: 768px){
.container{
    max-width: 768px;
}
}
@media (min-width: 1024px){
.container{
    max-width: 1024px;
}
}
@media (min-width: 1280px){
.container{
    max-width: 1280px;
}
}
@media (min-width: 1536px){
.container{
    max-width: 1536px;
}
}
.visible{
  visibility: visible;
}
.static{
  position: static;
}
.fixed{
  position: fixed;
}
.absolute{
  position: absolute;
}
.relative{
  position: relative;
}
.sticky{
  position: sticky;
}
.right-2{
  right: 0.5rem;
}
.right-4{
  right: 1rem;
}
.top-20{
  top: 5rem;
}
.z-30{
  z-index: 30;
}
.m-0{
  margin: 0px;
}
.my-0{
  margin-top: 0px;
  margin-bottom: 0px;
}
.my-4{
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.my-6{
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.my-8{
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.mb-0{
  margin-bottom: 0px;
}
.mb-1{
  margin-bottom: 0.25rem;
}
.ml-1{
  margin-left: 0.25rem;
}
.mr-1{
  margin-right: 0.25rem;
}
.mr-4{
  margin-right: 1rem;
}
.mt-0{
  margin-top: 0px;
}
.mt-1{
  margin-top: 0.25rem;
}
.box-border{
  box-sizing: border-box;
}
.block{
  display: block;
}
.inline-block{
  display: inline-block;
}
.inline{
  display: inline;
}
.flex{
  display: flex;
}
.inline-flex{
  display: inline-flex;
}
.hidden{
  display: none;
}
.h-14{
  height: 3.5rem;
}
.h-4{
  height: 1rem;
}
.h-8{
  height: 2rem;
}
.w-14{
  width: 3.5rem;
}
.w-4{
  width: 1rem;
}
.w-8{
  width: 2rem;
}
.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.cursor-pointer{
  cursor: pointer;
}
.resize{
  resize: both;
}
.flex-row{
  flex-direction: row;
}
.flex-row-reverse{
  flex-direction: row-reverse;
}
.flex-col{
  flex-direction: column;
}
.flex-col-reverse{
  flex-direction: column-reverse;
}
.items-center{
  align-items: center;
}
.justify-between{
  justify-content: space-between;
}
.overflow-hidden{
  overflow: hidden;
}
.rounded-1\/2{
  border-radius: 50%;
}
.rounded-lg{
  border-radius: 0.5rem;
}
.border{
  border-width: 1px;
}
.border-0{
  border-width: 0px;
}
.border-b{
  border-bottom-width: 1px;
}
.border-b-2{
  border-bottom-width: 2px;
}
.border-t{
  border-top-width: 1px;
}
.border-t-0{
  border-top-width: 0px;
}
.border-solid{
  border-style: solid;
}
.border-dashed{
  border-style: dashed;
}
.border-reco-primary{
  --tw-border-opacity: 1;
  border-color: rgb(142 68 173 / var(--tw-border-opacity));
}
.border-transparent{
  border-color: transparent;
}
.bg-reco-primary{
  --tw-bg-opacity: 1;
  background-color: rgb(142 68 173 / var(--tw-bg-opacity));
}
.p-1{
  padding: 0.25rem;
}
.p-1\.5{
  padding: 0.375rem;
}
.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-3\.5{
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.py-0{
  padding-top: 0px;
  padding-bottom: 0px;
}
.py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5{
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-4{
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-6{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.pb-4{
  padding-bottom: 1rem;
}
.pl-0{
  padding-left: 0px;
}
.pr-0{
  padding-right: 0px;
}
.pt-0{
  padding-top: 0px;
}
.text-center{
  text-align: center;
}
.text-xl{
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-reco-text-lightmode{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}
.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
/* 仅在需要在 class 属性中使用 tailwind 时才需要下面的引用 */
/* ! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}
::before,
::after {
  --tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden] {
  display: none;
}
*{
  margin: 0px;
  padding: 0px;
}
*,
  ::before,
  ::after{
  box-sizing: border-box;
  border-width: 0px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100%;
}
body {
    /* antialiased 字体平滑 */
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}
body:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity));
}
body{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
body:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(22 22 23 / var(--tw-bg-opacity));
}
body{
  margin: 0px;
  width: 100%;
  overflow-x: hidden;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
    min-width: 320px;
    direction: ltr;
    /* 像素较小时字体会拼接在一起 */
    text-rendering: optimizeLegibility;
    transition: background-color 0.3s ease;
}
main{
  display: block;
}
svg{
  display: inline-block;
}
hr{
  border-width: 1px;
  border-style: solid;
  border-color: rgba(200, 200, 200, .32);
}
hr:is(.dark *){
  border-color: rgba(82, 82, 89, .32);
}
hr{
  border-width: 0px;
  border-top-width: 1px;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
h1,
  h2,
  h3,
  h4,
  h5,
  h6{
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity));
}
h1:is(.dark *),
  h2:is(.dark *),
  h3:is(.dark *),
  h4:is(.dark *),
  h5:is(.dark *),
  h6:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
h1,
  h2,
  h3,
  h4,
  h5,
  h6{
  z-index: -10;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: -2rem;
  margin-bottom: 2rem;
  padding-top: 3rem;
  line-height: 1.25rem;
}
h1{
  margin-top: -3rem;
  font-size: 1.875rem;
  line-height: 2.25rem;
}
h2{
  line-height: 1.25;
}
h2 span{
  font-size: 1.5rem;
  line-height: 2rem;
}
h2::before{
  margin-bottom: 1.5rem;
  display: block;
  width: 100%;
  border-top-width: 1px;
  border-style: solid;
  border-color: rgba(200, 200, 200, .32);
}
h2:is(.dark *)::before{
  border-color: rgba(82, 82, 89, .32);
}
h2::before {
      content: ' ';
}
h3 span{
  font-size: 1.25rem;
  line-height: 1.75rem;
}
h4 span{
  font-size: 1.125rem;
  line-height: 1.75rem;
}
h5 span{
  font-size: 1rem;
  line-height: 1.5rem;
}
h6 span{
  font-size: 0.875rem;
  line-height: 1.25rem;
}
h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  strong,
  b{
  font-weight: 600;
}
a:active,
  a:link,
  a:focus,
  a:visited{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}
a:active:is(.dark *),
  a:link:is(.dark *),
  a:focus:is(.dark *),
  a:visited:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity));
}
p,
  ol,
  ul,
  table{
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  line-height: 2rem;
}
a,
  area,
  button,
  [role='button'],
  input,
  label,
  select,
  summary,
  textarea {
    touch-action: manipulation;
    background-color: transparent;
    -webkit-text-decoration-line: none;
            text-decoration-line: none;
}
button{
  font-size: 1rem;
  line-height: 1.5rem;
}
figure{
  margin: 0px;
}
img{
  max-width: 100%;
}
ul,
  ol{
  padding-left: 1.25rem;
}
ul{
  list-style-type: disc;
}
ol{
  list-style-type: decimal;
}
li > ul,
  li > ol{
  margin: 0px;
}
table{
  display: block;
  width: 100%;
  overflow-x: auto;
  border-radius: 0.5rem;
    border-collapsible: collapsible;
}
table tr{
  border-width: 1px;
  border-style: solid;
  border-color: rgba(200, 200, 200, .32);
}
table tr:is(.dark *){
  border-color: rgba(82, 82, 89, .32);
}
table tr{
  border-radius: 0.5rem;
}
table th{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
  text-align: left;
  font-weight: 600;
}
table th:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(32 32 34 / var(--tw-bg-opacity));
}
table td,
    table th{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
table td:not(:last-child), table th:not(:last-child){
  border-right-width: 1px;
  border-style: solid;
  border-color: rgba(200, 200, 200, .32);
}
table td:not(:last-child):is(.dark *), table th:not(:last-child):is(.dark *){
  border-color: rgba(82, 82, 89, .32);
}
blockquote{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}
blockquote:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity));
}
blockquote{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
blockquote:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(32 32 34 / var(--tw-bg-opacity));
}
blockquote{
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  margin-left: 0px;
  margin-right: 0px;
  border-left-width: 4px;
  border-style: solid;
  padding: 0.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
}
blockquote > p{
  margin: 0px;
}
pre,
  code,
  kbd {
    font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
}
kbd{
  border-radius: 0.5rem;
  border-width: 1px;
  border-bottom-width: 2px;
  border-color: rgb(156 163 175 / 0.2);
  background-color: rgb(156 163 175 / 0.05);
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
form{
  margin: 0px;
}
p > img{
  border-radius: 0.5rem;
}
li svg{
  vertical-align: middle;
    transform: translateY(-10%);
}
*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
.container{
  width: 100%;
}
@media (min-width: 640px){
.container{
    max-width: 640px;
}
}
@media (min-width: 768px){
.container{
    max-width: 768px;
}
}
@media (min-width: 1024px){
.container{
    max-width: 1024px;
}
}
@media (min-width: 1280px){
.container{
    max-width: 1280px;
}
}
@media (min-width: 1536px){
.container{
    max-width: 1536px;
}
}
.text-basic{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}
.text-basic:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity));
}
.border-block{
  border-width: 1px;
  border-style: solid;
  border-color: rgba(200, 200, 200, .32);
}
.border-block:is(.dark *){
  border-color: rgba(82, 82, 89, .32);
}
.border-block{
  border-radius: 0.5rem;
}
.bg-block{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}
.bg-block:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity));
}
.bg-block{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.bg-block:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(32 32 34 / var(--tw-bg-opacity));
}
.visible{
  visibility: visible;
}
.static{
  position: static;
}
.fixed{
  position: fixed;
}
.absolute{
  position: absolute;
}
.relative{
  position: relative;
}
.sticky{
  position: sticky;
}
.right-2{
  right: 0.5rem;
}
.right-4{
  right: 1rem;
}
.top-20{
  top: 5rem;
}
.z-30{
  z-index: 30;
}
.m-0{
  margin: 0px;
}
.my-0{
  margin-top: 0px;
  margin-bottom: 0px;
}
.my-4{
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.my-6{
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.my-8{
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.mb-0{
  margin-bottom: 0px;
}
.mb-1{
  margin-bottom: 0.25rem;
}
.ml-1{
  margin-left: 0.25rem;
}
.mr-1{
  margin-right: 0.25rem;
}
.mr-4{
  margin-right: 1rem;
}
.mt-0{
  margin-top: 0px;
}
.mt-1{
  margin-top: 0.25rem;
}
.box-border{
  box-sizing: border-box;
}
.block{
  display: block;
}
.inline-block{
  display: inline-block;
}
.inline{
  display: inline;
}
.flex{
  display: flex;
}
.inline-flex{
  display: inline-flex;
}
.hidden{
  display: none;
}
.h-14{
  height: 3.5rem;
}
.h-4{
  height: 1rem;
}
.h-8{
  height: 2rem;
}
.w-14{
  width: 3.5rem;
}
.w-4{
  width: 1rem;
}
.w-8{
  width: 2rem;
}
.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.cursor-pointer{
  cursor: pointer;
}
.resize{
  resize: both;
}
.flex-row{
  flex-direction: row;
}
.flex-row-reverse{
  flex-direction: row-reverse;
}
.flex-col{
  flex-direction: column;
}
.flex-col-reverse{
  flex-direction: column-reverse;
}
.items-center{
  align-items: center;
}
.justify-between{
  justify-content: space-between;
}
.overflow-hidden{
  overflow: hidden;
}
.rounded-1\/2{
  border-radius: 50%;
}
.rounded-lg{
  border-radius: 0.5rem;
}
.border{
  border-width: 1px;
}
.border-0{
  border-width: 0px;
}
.border-b{
  border-bottom-width: 1px;
}
.border-b-2{
  border-bottom-width: 2px;
}
.border-t{
  border-top-width: 1px;
}
.border-t-0{
  border-top-width: 0px;
}
.border-solid{
  border-style: solid;
}
.border-dashed{
  border-style: dashed;
}
.border-reco-primary{
  --tw-border-opacity: 1;
  border-color: rgb(142 68 173 / var(--tw-border-opacity));
}
.border-transparent{
  border-color: transparent;
}
.bg-reco-primary{
  --tw-bg-opacity: 1;
  background-color: rgb(142 68 173 / var(--tw-bg-opacity));
}
.p-1{
  padding: 0.25rem;
}
.p-1\.5{
  padding: 0.375rem;
}
.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-3\.5{
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.py-0{
  padding-top: 0px;
  padding-bottom: 0px;
}
.py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5{
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-4{
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-6{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.pb-4{
  padding-bottom: 1rem;
}
.pl-0{
  padding-left: 0px;
}
.pr-0{
  padding-right: 0px;
}
.pt-0{
  padding-top: 0px;
}
.text-center{
  text-align: center;
}
.text-xl{
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-reco-text-lightmode{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}
.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.vue-preview-container{
  border-width: 1px;
  border-style: solid;
  border-color: rgba(200, 200, 200, .32);
}
.vue-preview-container:is(.dark *){
  border-color: rgba(82, 82, 89, .32);
}
.vue-preview-container{
  border-radius: 0.5rem;
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}
.vue-preview-container:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity));
}
.vue-preview-container{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.vue-preview-container:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(32 32 34 / var(--tw-bg-opacity));
}
.vue-preview-container{
  position: relative;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  overflow: hidden;
}
.vue-preview-container .preview-container{
  border-bottom-width: 1px;
  border-style: dashed;
  border-color: rgba(200, 200, 200, .32);
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.vue-preview-container .preview-container:is(.dark *){
  border-color: rgba(82, 82, 89, .32);
}
.vue-preview-container .preview-container > *{
  margin-left: auto;
  margin-right: auto;
}
.vue-preview-container .code-group{
  margin-top: 0px;
  margin-bottom: 0px;
  border-style: none;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-right: 0px;
}
.vue-preview-container .code-group::after{
  display: none;
}

.code-group-item {
  display: none;
  border-top-width: 1px;
  border-style: dashed;
  border-color: rgba(200, 200, 200, .32);
}
.code-group-item:is(.dark *) {
  border-color: rgba(82, 82, 89, .32);
}
.code-group-item {
  margin-top: -1px;
}
.code-group-item.code-group-item__active {
  display: block;
}
.code-group-item div[class*="language-"] {
  margin-top: 0px;
  margin-bottom: 0px;
  border-style: none;
}
.code-group-item .line-numbers {
  padding-bottom: 1rem !important;
}
#docsearch-container {
}

.DocSearch-Button.DocSearch-Button {
    border-width: 1px;
    border-style: solid;
    border-color: rgba(200, 200, 200, .32);
}

.DocSearch-Button.DocSearch-Button:is(.dark *) {
    border-color: rgba(82, 82, 89, .32);
}

.DocSearch-Button.DocSearch-Button {
    height: 2rem !important;
    border-radius: 0.5rem !important;
    background-color: transparent !important;
    padding-left: 0.375rem !important;
    padding-right: 0.375rem !important;
}

.DocSearch-Button.DocSearch-Button:hover {
    --tw-border-opacity: 1 !important;
    border-color: rgb(142 68 173 / var(--tw-border-opacity)) !important;
    --tw-shadow: 0 0 #0000 !important;
    --tw-shadow-colored: 0 0 #0000 !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.DocSearch-Button.DocSearch-Button svg {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity));
}

.DocSearch-Button.DocSearch-Button svg:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity));
}

.DocSearch-Button.DocSearch-Button svg {
    height: 1rem;
    width: 1rem;
}

.DocSearch-Button.DocSearch-Button .DocSearch-Button-Placeholder {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity));
}

.DocSearch-Button.DocSearch-Button .DocSearch-Button-Placeholder:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity));
}

.DocSearch-Button.DocSearch-Button .DocSearch-Button-Placeholder {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.DocSearch-Button.DocSearch-Button .DocSearch-Button-Key {
    background: inherit;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(200, 200, 200, .32);
  }

.DocSearch-Button.DocSearch-Button .DocSearch-Button-Key:is(.dark *) {
    border-color: rgba(82, 82, 89, .32);
}

.DocSearch-Button.DocSearch-Button .DocSearch-Button-Key {
    border-radius: 0.25rem !important;
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) !important;
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color) !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.DocSearch-Container .DocSearch-Modal {
    border-width: 1px;
    border-style: solid;
    border-color: rgba(200, 200, 200, .32);
}

.DocSearch-Container .DocSearch-Modal:is(.dark *) {
    border-color: rgba(82, 82, 89, .32);
}

.DocSearch-Container .DocSearch-Modal {
    border-radius: 0.5rem;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}

.DocSearch-Container .DocSearch-Modal:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

.DocSearch-Container .DocSearch-Modal {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.DocSearch-Container .DocSearch-Modal:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(22 22 23 / var(--tw-bg-opacity));
}

.DocSearch-Container .DocSearch-Modal .DocSearch-SearchBar {
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}

.DocSearch-Container .DocSearch-Modal .DocSearch-SearchBar:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

.DocSearch-Container .DocSearch-Modal .DocSearch-SearchBar {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.DocSearch-Container .DocSearch-Modal .DocSearch-SearchBar:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(22 22 23 / var(--tw-bg-opacity));
}

.DocSearch-Container .DocSearch-Modal .DocSearch-SearchBar {
    border-color: rgba(200, 200, 200, .32);
}

.DocSearch-Container .DocSearch-Modal .DocSearch-SearchBar:is(.dark *) {
    border-color: rgba(82, 82, 89, .32);
}

.DocSearch-Container .DocSearch-Modal .DocSearch-SearchBar .DocSearch-Form {
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}

.DocSearch-Container .DocSearch-Modal .DocSearch-SearchBar .DocSearch-Form:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

.DocSearch-Container .DocSearch-Modal .DocSearch-SearchBar .DocSearch-Form {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}

.DocSearch-Container .DocSearch-Modal .DocSearch-SearchBar .DocSearch-Form:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(32 32 34 / var(--tw-bg-opacity));
}

.DocSearch-Container .DocSearch-Modal .DocSearch-SearchBar .DocSearch-Form {
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(142 68 173 / var(--tw-border-opacity));
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.DocSearch-Container .DocSearch-Modal .DocSearch-SearchBar .DocSearch-Form .DocSearch-Search-Icon {
    --tw-text-opacity: 1;
    color: rgb(142 68 173 / var(--tw-text-opacity));
}

.DocSearch-Container .DocSearch-Modal .DocSearch-SearchBar .DocSearch-Form .DocSearch-LoadingIndicator svg,
        .DocSearch-Container .DocSearch-Modal .DocSearch-SearchBar .DocSearch-Form .DocSearch-Reset svg {
    --tw-text-opacity: 1;
    color: rgb(142 68 173 / var(--tw-text-opacity));
}

.DocSearch-Container .DocSearch-Modal .DocSearch-SearchBar .DocSearch-Form .DocSearch-Input {
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}

.DocSearch-Container .DocSearch-Modal .DocSearch-SearchBar .DocSearch-Form .DocSearch-Input:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

.DocSearch-Container .DocSearch-Modal .DocSearch-Dropdown .DocSearch-StartScreen .DocSearch-Help {
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}

.DocSearch-Container .DocSearch-Modal .DocSearch-Dropdown .DocSearch-StartScreen .DocSearch-Help:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

.DocSearch-Container .DocSearch-Modal .DocSearch-Dropdown .DocSearch-NoResults .DocSearch-Screen-Icon svg,
        .DocSearch-Container .DocSearch-Modal .DocSearch-Dropdown .DocSearch-NoResults .DocSearch-Title {
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}

.DocSearch-Container .DocSearch-Modal .DocSearch-Dropdown .DocSearch-NoResults .DocSearch-Screen-Icon svg:is(.dark *),
        .DocSearch-Container .DocSearch-Modal .DocSearch-Dropdown .DocSearch-NoResults .DocSearch-Title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

.DocSearch-Container .DocSearch-Modal .DocSearch-Dropdown .DocSearch-Dropdown-Container .DocSearch-Hits .DocSearch-Hit-source {
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}

.DocSearch-Container .DocSearch-Modal .DocSearch-Dropdown .DocSearch-Dropdown-Container .DocSearch-Hits .DocSearch-Hit-source:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

.DocSearch-Container .DocSearch-Modal .DocSearch-Dropdown .DocSearch-Dropdown-Container .DocSearch-Hits .DocSearch-Hit-source {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.DocSearch-Container .DocSearch-Modal .DocSearch-Dropdown .DocSearch-Dropdown-Container .DocSearch-Hits .DocSearch-Hit-source:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(22 22 23 / var(--tw-bg-opacity));
}

.DocSearch-Container .DocSearch-Modal .DocSearch-Dropdown .DocSearch-Dropdown-Container .DocSearch-Hits .DocSearch-Hit-source {
    --tw-text-opacity: 1;
    color: rgb(142 68 173 / var(--tw-text-opacity));
}

.DocSearch-Container .DocSearch-Modal .DocSearch-Dropdown .DocSearch-Dropdown-Container .DocSearch-Hits #docsearch-list .DocSearch-Hit a {
    border-width: 1px;
    border-style: solid;
    border-color: rgba(200, 200, 200, .32);
}

.DocSearch-Container .DocSearch-Modal .DocSearch-Dropdown .DocSearch-Dropdown-Container .DocSearch-Hits #docsearch-list .DocSearch-Hit a:is(.dark *) {
    border-color: rgba(82, 82, 89, .32);
}

.DocSearch-Container .DocSearch-Modal .DocSearch-Dropdown .DocSearch-Dropdown-Container .DocSearch-Hits #docsearch-list .DocSearch-Hit a {
    border-radius: 0.5rem;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}

.DocSearch-Container .DocSearch-Modal .DocSearch-Dropdown .DocSearch-Dropdown-Container .DocSearch-Hits #docsearch-list .DocSearch-Hit a:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

.DocSearch-Container .DocSearch-Modal .DocSearch-Dropdown .DocSearch-Dropdown-Container .DocSearch-Hits #docsearch-list .DocSearch-Hit a {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}

.DocSearch-Container .DocSearch-Modal .DocSearch-Dropdown .DocSearch-Dropdown-Container .DocSearch-Hits #docsearch-list .DocSearch-Hit a:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(32 32 34 / var(--tw-bg-opacity));
}

.DocSearch-Container .DocSearch-Modal .DocSearch-Dropdown .DocSearch-Dropdown-Container .DocSearch-Hits #docsearch-list .DocSearch-Hit a {
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.DocSearch-Container .DocSearch-Modal .DocSearch-Dropdown .DocSearch-Dropdown-Container .DocSearch-Hits #docsearch-list .DocSearch-Hit[aria-selected='true'] a {
    --tw-bg-opacity: 1;
    background-color: rgb(142 68 173 / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

.DocSearch-Container .DocSearch-Modal .DocSearch-Dropdown .DocSearch-Dropdown-Container .DocSearch-Hits #docsearch-list .DocSearch-Hit[aria-selected='true'] a .DocSearch-Hit-icon svg,
              .DocSearch-Container .DocSearch-Modal .DocSearch-Dropdown .DocSearch-Dropdown-Container .DocSearch-Hits #docsearch-list .DocSearch-Hit[aria-selected='true'] a .DocSearch-Hit-action svg {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

.DocSearch-Container .DocSearch-Modal .DocSearch-Dropdown .DocSearch-Dropdown-Container .DocSearch-Hits #docsearch-list .DocSearch-Hit[aria-selected='true'] a .DocSearch-Hit-icon svg:is(.dark *),
              .DocSearch-Container .DocSearch-Modal .DocSearch-Dropdown .DocSearch-Dropdown-Container .DocSearch-Hits #docsearch-list .DocSearch-Hit[aria-selected='true'] a .DocSearch-Hit-action svg:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

.DocSearch-Container .DocSearch-Modal .DocSearch-Dropdown .DocSearch-Dropdown-Container .DocSearch-Hits #docsearch-list .DocSearch-Hit .DocSearch-Hit-Container .DocSearch-Hit-icon svg,
              .DocSearch-Container .DocSearch-Modal .DocSearch-Dropdown .DocSearch-Dropdown-Container .DocSearch-Hits #docsearch-list .DocSearch-Hit .DocSearch-Hit-Container .DocSearch-Hit-action svg {
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}

.DocSearch-Container .DocSearch-Modal .DocSearch-Dropdown .DocSearch-Dropdown-Container .DocSearch-Hits #docsearch-list .DocSearch-Hit .DocSearch-Hit-Container .DocSearch-Hit-icon svg:is(.dark *),
              .DocSearch-Container .DocSearch-Modal .DocSearch-Dropdown .DocSearch-Dropdown-Container .DocSearch-Hits #docsearch-list .DocSearch-Hit .DocSearch-Hit-Container .DocSearch-Hit-action svg:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

.DocSearch-Container .DocSearch-Modal .DocSearch-Dropdown .DocSearch-Dropdown-Container .DocSearch-Hits #docsearch-list .DocSearch-Hit .DocSearch-Hit-Container .DocSearch-Hit-content-wrapper .DocSearch-Hit-title {
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}

.DocSearch-Container .DocSearch-Modal .DocSearch-Dropdown .DocSearch-Dropdown-Container .DocSearch-Hits #docsearch-list .DocSearch-Hit .DocSearch-Hit-Container .DocSearch-Hit-content-wrapper .DocSearch-Hit-title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

.DocSearch-Container .DocSearch-Modal .DocSearch-Dropdown .DocSearch-Dropdown-Container .DocSearch-Hits #docsearch-list .DocSearch-Hit .DocSearch-Hit-Container .DocSearch-Hit-content-wrapper .DocSearch-Hit-title mark {
    --tw-text-opacity: 1;
    color: rgb(142 68 173 / var(--tw-text-opacity));
}

.DocSearch-Container .DocSearch-Modal .DocSearch-Dropdown .DocSearch-Dropdown-Container .DocSearch-Hits #docsearch-list .DocSearch-Hit .DocSearch-Hit-Container .DocSearch-Hit-content-wrapper .DocSearch-Hit-path {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity));
}

.DocSearch-Container .DocSearch-Modal .DocSearch-Dropdown .DocSearch-Dropdown-Container .DocSearch-Hits #docsearch-list .DocSearch-Hit .DocSearch-Hit-Container .DocSearch-Hit-content-wrapper .DocSearch-Hit-path:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity));
}

.DocSearch-Container .DocSearch-Dropdown,
  .DocSearch-Container .DocSearch-Footer {
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}

.DocSearch-Container .DocSearch-Dropdown:is(.dark *),
  .DocSearch-Container .DocSearch-Footer:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

.DocSearch-Container .DocSearch-Dropdown,
  .DocSearch-Container .DocSearch-Footer {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.DocSearch-Container .DocSearch-Dropdown:is(.dark *),
  .DocSearch-Container .DocSearch-Footer:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(22 22 23 / var(--tw-bg-opacity));
}

.DocSearch-Container .DocSearch-Dropdown,
  .DocSearch-Container .DocSearch-Footer {
    border-color: rgba(200, 200, 200, .32);
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.DocSearch-Container .DocSearch-Dropdown:is(.dark *),
  .DocSearch-Container .DocSearch-Footer:is(.dark *) {
    border-color: rgba(82, 82, 89, .32);
}

.DocSearch-Container .DocSearch-Footer {
    border-top-width: 1px;
}

.DocSearch-Container .DocSearch-Footer .DocSearch-Commands-Key {
      background: inherit;
      border-width: 1px;
      border-style: solid;
      border-color: rgba(200, 200, 200, .32);
    }

.DocSearch-Container .DocSearch-Footer .DocSearch-Commands-Key:is(.dark *) {
    border-color: rgba(82, 82, 89, .32);
}

.DocSearch-Container .DocSearch-Footer .DocSearch-Commands-Key {
    border-radius: 0.25rem !important;
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) !important;
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color) !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.DocSearch-Container .DocSearch-Footer .DocSearch-Logo .DocSearch-Label {
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}

.DocSearch-Container .DocSearch-Footer .DocSearch-Logo .DocSearch-Label:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

.DocSearch-Container .DocSearch-Footer .DocSearch-Logo svg {
    --tw-text-opacity: 1;
    color: rgb(142 68 173 / var(--tw-text-opacity));
}

.arrow {
    display: inline-block;
    height: 0.375rem;
    width: 0.375rem;
    transform-origin: center;
    border-width: 0px;
    border-right-width: 1px;
    border-top-width: 1px;
    border-style: solid;
    border-color: transparent;
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity));
    vertical-align: middle;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.arrow:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity));
}

.arrow.down {
    --tw-translate-y: -0.125rem;
    --tw-rotate: 135deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.arrow.right {
    --tw-rotate: 45deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.vp-back-to-top-button {
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}

.vp-back-to-top-button:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

.vp-back-to-top-button {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}

.vp-back-to-top-button:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(32 32 34 / var(--tw-bg-opacity));
}

.vp-back-to-top-button {
    --tw-text-opacity: 1 !important;
    color: rgb(142 68 173 / var(--tw-text-opacity)) !important;
}

.categories-container {
    margin-left: auto;
    margin-right: auto;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (min-width: 1024px) {

    .categories-container {
        max-width: 768px;
        padding-left: 0px;
        padding-right: 0px;
    }
}

@media (min-width: 1280px) {

    .categories-container {
        max-width: 1024px;
    }
}

.categories-container .category-list {
    list-style-type: none;
    padding-left: 0px;
}

.categories-container .category-list .category-item {
    border-width: 1px;
    border-style: solid;
    border-color: rgba(200, 200, 200, .32);
}

.categories-container .category-list .category-item:is(.dark *) {
    border-color: rgba(82, 82, 89, .32);
}

.categories-container .category-list .category-item {
    border-radius: 0.5rem;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}

.categories-container .category-list .category-item:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

.categories-container .category-list .category-item {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.categories-container .category-list .category-item:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(22 22 23 / var(--tw-bg-opacity));
}

.categories-container .category-list .category-item {
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}

.categories-container .category-list .category-item:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

.categories-container .category-list .category-item {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}

.categories-container .category-list .category-item:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(32 32 34 / var(--tw-bg-opacity));
}

.categories-container .category-list .category-item {
    margin-right: 1rem;
    margin-bottom: 1rem;
    display: inline-block;
    cursor: pointer;
    border-width: 1px;
}

.categories-container .category-list .category-item.active,
      .categories-container .category-list .category-item:hover {
    --tw-border-opacity: 1;
    border-color: rgb(142 68 173 / var(--tw-border-opacity));
    background-color: rgb(142 68 173 / 0.8);
}

.categories-container .category-list .category-item.active .category-link .text, .categories-container .category-list .category-item:hover .category-link .text {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

.categories-container .category-list .category-item .category-link {
    display: inline-block;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    line-height: 1;
}

.categories-container .category-list .category-item .category-link .text {
    margin-right: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}

/* 兼容 */

.categories-container .category-list .category-item .category-link .text:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

/**
 * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
 * Based on https://github.com/chriskempson/tomorrow-theme
 * @author Rose Pritchard
 */

/* Code blocks */

div[class*="language-"] {
    border-width: 1px;
    border-style: solid;
    border-color: rgba(200, 200, 200, .32);
}

div[class*="language-"]:is(.dark *) {
    border-color: rgba(82, 82, 89, .32);
}

div[class*="language-"] {
    border-radius: 0.5rem;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}

div[class*="language-"]:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

div[class*="language-"] {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}

div[class*="language-"]:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(32 32 34 / var(--tw-bg-opacity));
}

div[class*="language-"] {
    position: relative;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

div[class*="language-"]::before {
    position: absolute;
    top: 0.25rem;
    right: 0.75rem;
    z-index: 10;
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity));
}

div[class*="language-"] pre[class*="language-"] {
    position: relative;
    overflow-x: auto;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-right: 1.5rem;
    padding-left: 4rem;
    line-height: 1.75rem;
}

div[class*="language-"] .code-copy-btn {
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}

div[class*="language-"] .code-copy-btn:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

div[class*="language-"] .code-copy-btn {
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}

div[class*="language-"] .code-copy-btn:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

div[class*="language-"] .code-copy-btn {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

div[class*="language-"] .code-copy-btn:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(22 22 23 / var(--tw-bg-opacity));
}

div[class*="language-"]:not(.line-numbers-mode) .line-numbers {
    display: none;
}

div[class*="language-"].line-numbers-mode {
    position: relative;
}

div[class*="language-"].line-numbers-mode .line-numbers {
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}

div[class*="language-"].line-numbers-mode .line-numbers:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

div[class*="language-"].line-numbers-mode .line-numbers {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}

div[class*="language-"].line-numbers-mode .line-numbers:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(32 32 34 / var(--tw-bg-opacity));
}

div[class*="language-"].line-numbers-mode .line-numbers {
    position: absolute;
    bottom: 0px;
    width: 4rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-align: center;
    line-height: 1.5rem;
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity));
      counter-reset: line-number;
}

div[class*="language-"].line-numbers-mode .line-numbers br {
        -webkit-user-select: none;
           -moz-user-select: none;
                user-select: none;
      }

div[class*="language-"].line-numbers-mode .line-numbers .line-number {
        position: relative;
        z-index: 3;
        -webkit-user-select: none;
           -moz-user-select: none;
                user-select: none;
      }

div[class*="language-"].line-numbers-mode .line-numbers .line-number::before {
          counter-increment: line-number;
          content: counter(line-number);
        }

div[class*="language-"] pre code {
    margin-left: 0px !important;
    margin-right: 0px !important;
    background-color: transparent !important;
    padding: 0px !important;
    line-height: 1.5rem !important;
}

div[class*="language-"] .highlight-lines {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 10;
    padding-top: 1rem;
    padding-bottom: 1rem;
    line-height: 1.75rem;
}

div[class*="language-"] .highlight-lines .highlight-line {
    background-color: rgb(107 114 128 / 0.1);
}

div[class*="language-"] .highlight-lines .highlight-line:is(.dark *) {
    background-color: rgb(249 250 251 / 0.1);
}

code[class*="language-"],
pre[class*="language-"] {
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  -moz-tab-size: 4;
    -o-tab-size: 4;
       tab-size: 4;
  -webkit-hyphens: none;
          hyphens: none;
  white-space: pre !important;
  background-color: transparent !important;
  text-align: left !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  line-height: 1.5 !important;
  letter-spacing: 0.025em !important;
  --tw-text-opacity: 1 !important;
  color: rgb(6 78 59 / var(--tw-text-opacity)) !important;
}

code[class*="language-"]:is(.dark *),
pre[class*="language-"]:is(.dark *) {
    --tw-text-opacity: 1 !important;
    color: rgb(255 251 235 / var(--tw-text-opacity)) !important;
}

.token.comment,
 .token.block-comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
   color: #999;
 }

.token.punctuation {
   color: #ccc;
 }

.token.tag,
 .token.namespace,
 .token.deleted {
   color: #e2777a;
 }

.token.attr-name {
  /* color: #e2777a; */
  color: #cc99cd;
}

.token.function-name {
   color: #6196cc;
 }

.token.boolean,
 .token.number,
 .token.function {
   color: #f08d49;
 }

.token.property,
 .token.value,
 .token.class-name,
 .token.constant,
 .token.symbol {
  color: #f8c555;
   color: #8F95DA;
 }

.token.selector,
 .token.important,
 .token.atrule,
 .token.keyword,
 .token.builtin {
   /* color: #cc99cd; */
   color: #e2777a;
 }

.token.string,
 .token.char,
 .token.attr-value,
 .token.regex,
 .token.variable {
   color: #7ec699;
 }

.token.operator,
 .token.entity,
 .token.url {
   color: #67cdcc;
 }

.token.important,
 .token.bold {
    font-weight: 600;
}

.token.italic {
  font-style: italic;
 }

.token.entity {
   cursor: help;
 }

.token.inserted {
   color: green;
 }

.token.punctuation {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity));
}

.token.punctuation:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity));
}

/* code-other */

div.language-javascript::before {
    content: 'javascript';
  }

div.language-yaml::before {
    content: 'yaml';
  }

div.language-bash::before {
    content: 'bash';
  }

div.language-cpp::before {
    content: 'cpp';
  }

div.language-cs::before {
    content: 'cs';
  }

div.language-css::before {
    content: 'css';
  }

div.language-dart::before {
    content: 'dart';
  }

div.language-docker::before {
    content: 'docker';
  }

div.language-fs::before {
    content: 'fs';
  }

div.language-go::before {
    content: 'go';
  }

div.language-html::before {
    content: 'html';
  }

div.language-java::before {
    content: 'java';
  }

div.language-js::before {
    content: 'js';
  }

div.language-json::before {
    content: 'json';
  }

div.language-kt::before {
    content: 'kt';
  }

div.language-less::before {
    content: 'less';
  }

div.language-makefile::before {
    content: 'makefile';
  }

div.language-md::before {
    content: 'md';
  }

div.language-markdown::before {
    content: 'markdown';
  }

div.language-php::before {
    content: 'php';
  }

div.language-py::before {
    content: 'py';
  }

div.language-rb::before {
    content: 'rb';
  }

div.language-rs::before {
    content: 'rs';
  }

div.language-sass::before {
    content: 'sass';
  }

div.language-scss::before {
    content: 'scss';
  }

div.language-sh::before {
    content: 'sh';
  }

div.language-styl::before {
    content: 'styl';
  }

div.language-ts::before {
    content: 'ts';
  }

div.language-toml::before {
    content: 'toml';
  }

div.language-vue::before {
    content: 'vue';
  }

div.language-yml::before {
    content: 'yml';
  }

div.language-text::before {
    content: 'text';
  }

div.language-typescript::before {
    content: 'typescript';
  }

.theme-container {
    position: relative;
    min-height: 100vh;
}

.theme-container .page-container {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    width: 100%;
    max-width: 1280px;
}

.theme-container .password-wrapper.out {
    position: fixed;
    z-index: 40;
    height: 100vh;
    width: 100vw;
}

.theme-container.mobile-menus--active .mobile-menus-container {
    --tw-translate-y: 0px !important;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
}

.theme-container .fade-enter-active, .theme-container .fade-leave-active {
    transition: opacity 0.5s;
  }

.theme-container .fade-enter-from, .theme-container .fade-leave-to {
    opacity: 0;
  }

.custom-container {
    position: relative;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    word-break: break-all;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.custom-container > svg {
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 1.75rem;
    font-weight: 700;
}

.custom-container .custom-container-title {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-left: 1.5rem;
    font-weight: 700;
}

.custom-container.tip,
  .custom-container.info {
    border-radius: 0.5rem;
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(142 68 173 / var(--tw-border-opacity));
    background-color: rgb(142 68 173 / 0.05);
}

.custom-container.tip .custom-container-title,
    .custom-container.tip > svg,
    .custom-container.info .custom-container-title,
    .custom-container.info > svg {
    --tw-text-opacity: 1;
    color: rgb(142 68 173 / var(--tw-text-opacity));
}

.custom-container.tip > p > code, .custom-container.info > p > code {
    background-color: rgb(142 68 173 / 0.2) !important;
}

.custom-container.warning {
    border-radius: 0.5rem;
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(251 155 95 / var(--tw-border-opacity));
    background-color: rgb(251 155 95 / 0.05);
}

.custom-container.warning .custom-container-title,
    .custom-container.warning > svg {
    --tw-text-opacity: 1;
    color: rgb(251 155 95 / var(--tw-text-opacity));
}

.custom-container.warning > p > code {
    background-color: rgb(251 155 95 / 0.2) !important;
}

.custom-container.danger {
    border-radius: 0.5rem;
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(242 109 109 / var(--tw-border-opacity));
    background-color: rgb(242 109 109 / 0.05);
}

.custom-container.danger .custom-container-title,
    .custom-container.danger > svg {
    --tw-text-opacity: 1;
    color: rgb(242 109 109 / var(--tw-text-opacity));
}

.custom-container.danger > p > code {
    background-color: rgb(242 109 109 / 0.2) !important;
}

.custom-container.details {
    border-width: 1px;
    border-style: solid;
    border-color: rgba(200, 200, 200, .32);
}

.custom-container.details:is(.dark *) {
    border-color: rgba(82, 82, 89, .32);
}

.custom-container.details {
    border-radius: 0.5rem;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}

.custom-container.details:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

.custom-container.details {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}

.custom-container.details:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(32 32 34 / var(--tw-bg-opacity));
}

.custom-container.details {
    border-radius: 0.5rem;
}

.custom-container.details .custom-container-title {
    margin-top: 0px;
    cursor: pointer;
    padding-left: 0px;
}

.custom-container.details > p > code {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(228 228 231 / var(--tw-bg-opacity)) !important;
}

.custom-container.details > p > code:is(.dark *) {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(63 63 70 / var(--tw-bg-opacity)) !important;
}

.dropdown-link {
    position: relative;
}

.dropdown-link.open {
    height: auto;
  }

.dropdown-link.open .dropdown-link__container {
    display: block !important;
}

/* &:hover .dropdown-link__container {
    @apply md:block !important;
  } */

.dropdown-link .title {
    display: inline-flex;
    align-items: center;
}

.dropdown-link .title .xicon-container {
    margin-right: 0.125rem;
}

.dropdown-link .arrow {
    margin-left: 0.5rem;
}

.dropdown-link .dropdown-link__title {
    display: none;
    align-items: center;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}

@media (min-width: 768px) {

    .dropdown-link .dropdown-link__title {
        display: flex;
    }
}

.dropdown-link .dropdown-link__title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

.dropdown-link .dropdown-link__title--active {
    --tw-text-opacity: 1 !important;
    color: rgb(142 68 173 / var(--tw-text-opacity)) !important;
}

.dropdown-link .dropdown-link--mobile__title {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}

@media (min-width: 768px) {

    .dropdown-link .dropdown-link--mobile__title {
        display: none;
    }
}

.dropdown-link .dropdown-link--mobile__title:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

.dropdown-link .dropdown-link__container {
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}

.dropdown-link .dropdown-link__container:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

.dropdown-link .dropdown-link__container {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.dropdown-link .dropdown-link__container:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(22 22 23 / var(--tw-bg-opacity));
}

.dropdown-link .dropdown-link__container {
    margin-top: 0px;
    margin-bottom: 0px;
    list-style-type: none;
    border-radius: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 0.75rem;
}

@media (min-width: 768px) {
  .dropdown-link .dropdown-link__container {
        border-width: 1px;
        border-style: solid;
        border-color: rgba(200, 200, 200, .32);
    }
  .dropdown-link .dropdown-link__container:is(.dark *) {
        border-color: rgba(82, 82, 89, .32);
    }
  .dropdown-link .dropdown-link__container {
        border-radius: 0.5rem;
        position: absolute;
        top: 2rem;
        right: 0px;
        margin-top: 0.75rem;
        margin-bottom: 0.75rem;
        display: none;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
}

.dropdown-link .dropdown-link__container .dropdown-link__item {
    position: relative;
}

.dropdown-link .dropdown-link__container .dropdown-link__item:not(:first-of-type)::before {
    position: absolute;
    left: -0.75rem;
    right: -0.75rem;
    top: 0px;
    display: block;
    border-top-width: 0px;
    border-style: solid;
    border-color: rgba(200, 200, 200, .32);
        /* 待确定 */
        /* @apply md:border-t; */
}

.dropdown-link .dropdown-link__container .dropdown-link__item:not(:first-of-type):is(.dark *)::before {
    border-color: rgba(82, 82, 89, .32);
}

.dropdown-link .dropdown-link__container .dropdown-link__item:not(:first-of-type)::before {
        content: '';
      }

.dropdown-link .dropdown-link__container .dropdown-link__item:not(:first-of-type) .dropdown-link__subtitle {
    position: relative;
    z-index: 30;
    margin-top: 2rem;
}

.dropdown-link .dropdown-link__container .dropdown-link__item:not(:first-of-type) .dropdown-link__subtitle::before {
    position: absolute;
    left: 0px;
    top: -1rem;
    display: block;
    width: 100%;
    border-top-width: 1px;
    border-style: solid;
    border-color: rgba(200, 200, 200, .32);
}

.dropdown-link .dropdown-link__container .dropdown-link__item:not(:first-of-type) .dropdown-link__subtitle:is(.dark *)::before {
    border-color: rgba(82, 82, 89, .32);
}

.dropdown-link .dropdown-link__container .dropdown-link__item:not(:first-of-type) .dropdown-link__subtitle::before {
            content: '';
          }

.dropdown-link .dropdown-link__container .dropdown-link__item .dropdown-link__subtitle {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    padding-top: 0px;
    padding-bottom: 0px;
    font-size: 0.75rem;
    line-height: 1rem;
}

@media (min-width: 768px) {

    .dropdown-link .dropdown-link__container .dropdown-link__item .dropdown-link__subtitle {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
}

.dropdown-link .dropdown-link__container .dropdown-link__item .dropdown-link__subcontainer {
    list-style-type: none;
    padding-left: 0px;
}

.dropdown-link .dropdown-link__container .dropdown-link__item .dropdown-link__subcontainer .dropdown-link__subitem .link {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity));
}

.dropdown-link .dropdown-link__container .dropdown-link__item .dropdown-link__subcontainer .dropdown-link__subitem .link:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity));
}

.dropdown-link .dropdown-link__container .dropdown-link__item .dropdown-link__subcontainer .dropdown-link__subitem .link {
    position: relative;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
}

.dropdown-link .dropdown-link__container .dropdown-link__item .dropdown-link__subcontainer .dropdown-link__subitem .link::before {
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    margin: auto;
    display: block;
    height: 0px;
    width: 0px;
    border-radius: 50%;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
    --tw-bg-opacity: 1;
    background-color: rgb(142 68 173 / var(--tw-bg-opacity));
            content: '';
}

.dropdown-link .dropdown-link__container .dropdown-link__item .dropdown-link__subcontainer .dropdown-link__subitem .link:hover {
    --tw-text-opacity: 1;
    color: rgb(142 68 173 / var(--tw-text-opacity));
}

.dropdown-link .dropdown-link__container .dropdown-link__item .dropdown-link__subcontainer .dropdown-link__subitem .link.active {
    padding-left: 0.5rem;
}

.dropdown-link .dropdown-link__container .dropdown-link__item .dropdown-link__subcontainer .dropdown-link__subitem .link.active a {
    --tw-text-opacity: 1;
    color: rgb(142 68 173 / var(--tw-text-opacity));
}

.dropdown-link .dropdown-link__container .dropdown-link__item .dropdown-link__subcontainer .dropdown-link__subitem .link.active::before {
    height: 0.25rem;
    width: 0.25rem;
}

.dropdown-link .dropdown-link__container .dropdown-link__item .dropdown-link__subcontainer .dropdown-link__subitem .link.router-link-active {
    padding-left: 0.5rem;
}

.dropdown-link .dropdown-link__container .dropdown-link__item .dropdown-link__subcontainer .dropdown-link__subitem .link.router-link-active::before {
    height: 0.25rem;
    width: 0.25rem;
}

.dropdown-link .dropdown-link__container .dropdown-link__item .link {
    display: inline-block;
    width: 100%;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.friendship-link-container {
    margin-left: auto;
    margin-right: auto;
    display: grid;
    width: 100%;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

@media (min-width: 768px) {

    .friendship-link-container {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {

    .friendship-link-container {
        max-width: 768px;
    }
}

@media (min-width: 1280px) {

    .friendship-link-container {
        max-width: 1024px;
    }
}

.friendship-link-container .friendship-link-item {
    margin-bottom: 0.75rem;
    display: flex;
    width: 100%;
    cursor: pointer;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.friendship-link-container .friendship-link-item .logo {
    margin-right: 0.5rem;
    height: 2rem;
    width: 2rem;
    overflow: hidden;
    border-radius: 0.5rem;
}

.friendship-link-container .friendship-link-item .logo img {
    height: 100%;
    width: 100%;
}

.friendship-link-container .friendship-link-item .title {
    flex: 1 1 0%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 2;
}

.banner-wrapper {
    display: flex;
    height: 60vh;
    width: 100vw;
    align-items: center;
    justify-content: center;
}

@media (min-width: 768px) {

    .banner-wrapper {
        height: 100vh;
    }
}

.banner-wrapper .banner-brand__content img {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4rem;
    display: block;
    width: 8rem;
}

@media (min-width: 640px) {

    .banner-wrapper .banner-brand__content img {
        width: 10rem;
    }
}

@media (min-width: 768px) {

    .banner-wrapper .banner-brand__content img {
        width: 15rem;
    }
}

.banner-wrapper .banner-brand__content h1 {
    margin-bottom: 1.5rem !important;
    text-align: center !important;
}

.banner-wrapper .banner-brand__content p {
    text-align: center;
}

.banner-brand__wrapper {
    margin-top: -4rem;
    display: flex;
    width: 100vw;
    align-items: center;
    justify-content: center;
}

@media (min-width: 768px) {

    .banner-brand__wrapper {
        height: 100vh;
    }
}

.banner-brand__wrapper .banner-brand__content {
    margin-top: 8rem;
    box-sizing: border-box;
    display: block;
    max-width: 768px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (min-width: 768px) {

    .banner-brand__wrapper .banner-brand__content {
        margin-top: 0px;
    }
}

.banner-brand__wrapper .banner-brand__content .title {
    margin-bottom: 1.5rem !important;
    background-image: linear-gradient(to right, var(--tw-gradient-stops)) !important;
    --tw-gradient-from: #8e44ad var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(142 68 173 / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
    --tw-gradient-to: #ef4444 var(--tw-gradient-to-position) !important;
    text-align: left !important;
    font-size: 3rem !important;
    line-height: 1 !important;
}

@media (min-width: 768px) {

    .banner-brand__wrapper .banner-brand__content .title {
        font-size: 4.5rem !important;
        line-height: 1 !important;
    }
}

.banner-brand__wrapper .banner-brand__content .title {
    line-height: 1.25 !important;
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
}

.banner-brand__wrapper .banner-brand__content .description {
    font-size: 1.5rem;
    line-height: 2rem;
}

@media (min-width: 768px) {

    .banner-brand__wrapper .banner-brand__content .description {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
}

.banner-brand__wrapper .banner-brand__content .tagline {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity));
}

.banner-brand__wrapper .banner-brand__content .tagline:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity));
}

.banner-brand__wrapper .banner-brand__content .btn-group {
    margin-top: 2rem;
    list-style-type: none;
    padding-left: 0px;
    text-align: left;
}

.banner-brand__wrapper .banner-brand__content .btn-group .xicon-container {
    border-width: 1px;
    border-style: solid;
    border-color: rgba(200, 200, 200, .32);
}

.banner-brand__wrapper .banner-brand__content .btn-group .xicon-container:is(.dark *) {
    border-color: rgba(82, 82, 89, .32);
}

.banner-brand__wrapper .banner-brand__content .btn-group .xicon-container {
    margin-bottom: 1rem;
    height: 2.5rem;
    cursor: pointer;
    border-radius: 0.5rem;
    background-color: rgb(142 68 173 / 0.9);
    padding-left: 1rem;
    padding-right: 1rem;
    vertical-align: middle;
    font-weight: 600;
    line-height: 1;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

.banner-brand__wrapper .banner-brand__content .btn-group .xicon-container:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

.banner-brand__wrapper .banner-brand__content .btn-group .xicon-container:hover {
    --tw-border-opacity: 1 !important;
    border-color: rgb(142 68 173 / var(--tw-border-opacity)) !important;
}

.banner-brand__wrapper .banner-brand__content .btn-group .xicon-container.plain {
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}

.banner-brand__wrapper .banner-brand__content .btn-group .xicon-container.plain:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

.banner-brand__wrapper .banner-brand__content .btn-group .xicon-container.plain {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}

.banner-brand__wrapper .banner-brand__content .btn-group .xicon-container.plain:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(32 32 34 / var(--tw-bg-opacity));
}

.banner-brand__wrapper .banner-brand__content .btn-group .xicon-container.text {
    border-width: 0px !important;
    background-color: transparent !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    --tw-text-opacity: 1 !important;
    color: rgb(142 68 173 / var(--tw-text-opacity)) !important;
}

.banner-brand__wrapper .banner-brand__content .btn-group .xicon-container:not(:last-child) {
    margin-right: 1rem;
}

.banner-brand__wrapper .banner-brand__content .social-links {
    margin-top: 1rem;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    padding: 0.5rem;
    padding-left: 0px;
    text-align: center;
}

@media (min-width: 768px) {

    .banner-brand__wrapper .banner-brand__content .social-links {
        text-align: left;
    }
}

.banner-brand__wrapper .banner-brand__content .social-links .social-item {
    list-style-type: none;
    text-align: center;
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.banner-brand__wrapper .banner-brand__content .social-links .social-item:hover {
    --tw-scale-x: 1.1;
    --tw-scale-y: 1.1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.banner-brand__wrapper .banner-brand__content .social-links .social-item {
        width: 39px;
        height: 36px;
        line-height: 36px;
      }

.home-blog-content {
    margin-left: auto;
    margin-right: auto;
    margin-top: 1rem;
    margin-bottom: 4rem;
    display: block;
    max-width: 1024px;
    align-items: flex-start;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 768px) {

    .home-blog-content {
        display: flex;
    }
}

.home-blog-content .blog-list {
    flex: 1 1 auto;
}

.home-blog-content .info-wrapper {
    position: sticky;
    top: 5rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
}

@media (min-width: 768px) {

    .home-blog-content .info-wrapper {
        margin-left: 1rem;
    }
}

.home-blog-content .info-wrapper {
    flex: 0 0 300px;
  }

.home-blog-content .info-wrapper .module-title {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    padding-top: 0px;
}

.home-blog-content .info-wrapper .category-wrapper {
    list-style-type: none;
    padding-left: 0px;
}

.home-blog-content .info-wrapper .category-wrapper .category-item {
    margin-bottom: 1rem;
    cursor: pointer;
    border-radius: 0.5rem;
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(142 68 173 / var(--tw-border-opacity));
}

.home-blog-content .info-wrapper .category-wrapper .category-item .category-link {
    display: flex;
    justify-content: space-between;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

.home-blog-content .info-wrapper .category-wrapper .category-item .category-link .text {
    margin-right: 0.25rem;
    font-size: 0.75rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}

.home-blog-content .info-wrapper .category-wrapper .category-item .category-link .num {
    display: inline-block;
    height: 1.25rem;
    border-radius: 0.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(142 68 173 / var(--tw-bg-opacity));
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 0.75rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

.home-blog-content .info-wrapper .category-wrapper .category-item:hover {
    background-color: rgb(142 68 173 / 0.9);
}

.home-blog-content .info-wrapper .category-wrapper .category-item:hover .category-link .text {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

.home-blog-content .info-wrapper .category-wrapper .category-item:hover .category-link .num {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

.home-blog-content .info-wrapper .tag-wrapper {
    list-style-type: none;
    padding-left: 0px;
}

.home-blog-content .info-wrapper .tag-wrapper .tag-item {
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    display: inline-block;
    cursor: pointer;
    border-radius: 0.375rem;
    border-width: 1px;
    border-style: solid;
}

.home-blog-content .info-wrapper .tag-wrapper .tag-item .tag-link {
    display: flex;
    justify-content: space-between;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    line-height: 1;
}

.home-blog-content .info-wrapper .tag-wrapper .tag-item:hover {
    background-color: rgb(142 68 173 / 0.9);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

.home-blog-content .info-wrapper .tag-wrapper .tag-item:hover .tag-link {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

.home-blog-content .pagation-container {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.home-blog-content
  .info-wrapper
  .category-wrapper
  .category-item
  .category-link
  .text:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

.footer-wrapper {
    border-top-width: 1px;
    border-style: solid;
    border-color: rgba(200, 200, 200, .32);
    padding: 1.5rem;
    text-align: center;
    font-weight: 500;
}

.footer-wrapper:is(.dark *) {
    border-color: rgba(82, 82, 89, .32);
}

.footer-wrapper > span {
    display: block;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    text-align: left;
}

@media (min-width: 768px) {

    .footer-wrapper > span {
        margin-left: 1rem;
        display: inline-block;
    }

    .footer-wrapper > span:first-of-type {
        margin-left: 0px;
    }
}

.footer-wrapper .cyber-security {
    margin-top: 0px;
    margin-bottom: 0px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: left;
}

@media (min-width: 768px) {

    .footer-wrapper .cyber-security {
        justify-content: center;
        text-align: center;
    }
}

.footer-wrapper .cyber-security img {
    margin-right: 0.5rem;
    height: 1rem;
    width: 1rem;
    vertical-align: middle;
}

.footer-wrapper .cyber-security a {
    vertical-align: middle;
      font-size: 14px;
}

.features__container {
    margin-left: auto;
    margin-right: auto;
    margin-top: 4rem;
    margin-bottom: 4rem;
    display: grid;
    max-width: 1024px;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (min-width: 768px) {

    .features__container {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.features__container .features__item {
    cursor: pointer;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.features__container .features__item h4 {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
}

.features__container .features__item p {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity));
}

.features__container .features__item p:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity));
}

.features__container .features__item p {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.magic-card {
    border-width: 1px;
    border-style: solid;
    border-color: rgba(200, 200, 200, .32);
}

.magic-card:is(.dark *) {
    border-color: rgba(82, 82, 89, .32);
}

.magic-card {
    border-radius: 0.5rem;
    position: relative;
  background: none;
}

.magic-card .magic-card__bg {
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}

.magic-card .magic-card__bg:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

.magic-card .magic-card__bg {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}

.magic-card .magic-card__bg:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(32 32 34 / var(--tw-bg-opacity));
}

.magic-card .magic-card__bg {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    border-radius: 0.5rem;
    z-index: -1;
    transition: background .45s ease;
}

.magic-card:hover .magic-card__bg {
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}

.magic-card:hover .magic-card__bg:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

.magic-card:hover .magic-card__bg {
    --tw-bg-opacity: 1;
    background-color: rgb(244 245 245 / var(--tw-bg-opacity));
}

.magic-card:hover .magic-card__bg:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(39 39 42 / var(--tw-bg-opacity));
}

.magic-card::before {
    position: absolute;
    border-radius: 0.5rem;
    bottom: -1px;
    content: "";
    left: -1px;
    right: -1px;
    top: -1px;
    transition: background 1s ease;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    will-change: background;
    z-index: -2;
    background: radial-gradient(200px circle at var(--x) var(--y), #f87171 0, #5D67E8 50%, transparent 100%);
}

.navbar-container {
    position: sticky;
    top: 0px;
    z-index: 50;
    height: 4rem;
    background-color: rgb(255 255 255 / 0.6);
}

.navbar-container:is(.dark *) {
    background-color: rgb(22 22 23 / 0.6);
}

.navbar-container.has-border {
    border-width: 1px;
    border-style: solid;
    border-color: rgba(200, 200, 200, .32);
}

.navbar-container.has-border:is(.dark *) {
    border-color: rgba(82, 82, 89, .32);
}

.navbar-container.has-border {
    border-width: 0px;
    border-bottom-width: 1px;
}

.navbar-container .navbar-inner {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    height: 4rem;
    width: 100%;
    max-width: 1280px;
    align-items: center;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.navbar-container.navbar-container--has-series {
    top: -4rem;
}

.navbar-container.not-open {
    --tw-backdrop-blur: blur(24px);
    --tw-backdrop-saturate: saturate(1.5);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
            backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.navbar-container .navbar-links-wrapper {
    position: absolute;
    right: 1rem;
    top: 0px;
    display: flex;
    height: 4rem;
    align-items: center;
    white-space: nowrap;
}

.navbar-container .navbar-links-wrapper .navbar-links__item > a, .navbar-container .navbar-links-wrapper .navbar-links__item .dropdown-link__title {
    height: 3.5rem;
}

.navbar-container .navbar-links-wrapper .navbar-links {
    display: none;
    align-items: center;
}

@media (min-width: 768px) {

    .navbar-container .navbar-links-wrapper .navbar-links {
        display: inline-flex;
    }
}

.navbar-container .navbar-links-wrapper .btn-toggle-menus {
    vertical-align: middle;
}

.navbar-container .search-box,
  .navbar-container #docsearch-container {
    vertical-align: middle;
}

.navbar-container .btn-toggle-dark-mode {
    margin-left: 1rem;
    display: none;
    vertical-align: middle;
}

@media (min-width: 768px) {

    .navbar-container .btn-toggle-dark-mode {
        display: inline-block;
    }
}

.navbar-container .btn-toggle-dark-mode {
    height: 20px;
  }

.navbar-container .btn-toggle-menus {
    margin-left: 0.75rem;
    display: inline-block;
    vertical-align: middle;
}

@media (min-width: 768px) {

    .navbar-container .btn-toggle-menus {
        display: none;
    }
}

.navbar-container .btn-toggle-menus {
    height: 20px;
  }

.navbar-container .btn-toggle-menus svg {
    display: block;
}

.mobile-menus-container {
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}

.mobile-menus-container:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

.mobile-menus-container {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.mobile-menus-container:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(22 22 23 / var(--tw-bg-opacity));
}

.mobile-menus-container {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 20;
    overflow-y: auto;
    padding-left: 3.5rem;
    padding-right: 3.5rem;
    padding-top: 5rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
    --tw-translate-y: -100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.mobile-menus-container .navbar-links {
    margin-bottom: 2rem;
}

.mobile-menus-container .appearance {
    border-width: 1px;
    border-style: solid;
    border-color: rgba(200, 200, 200, .32);
}

.mobile-menus-container .appearance:is(.dark *) {
    border-color: rgba(82, 82, 89, .32);
}

.mobile-menus-container .appearance {
    border-radius: 0.5rem;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}

.mobile-menus-container .appearance:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

.mobile-menus-container .appearance {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}

.mobile-menus-container .appearance:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(32 32 34 / var(--tw-bg-opacity));
}

.mobile-menus-container .appearance {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    text-align: center;
}

.mobile-menus-container .appearance svg {
    margin-left: 1.5rem;
}

@media (min-width: 768px) {

    .navbar-links {
        margin-left: 1.5rem;
    }
}

.navbar-links .navbar-links__item {
    display: block;
    padding-top: 0px;
    padding-bottom: 0px;
}

@media (min-width: 768px) {

    .navbar-links .navbar-links__item {
        display: inline-block;
    }
}

.navbar-links .navbar-links__item:not(:first-child) {
    margin-left: 0px;
}

@media (min-width: 768px) {

    .navbar-links .navbar-links__item:not(:first-child) {
        margin-left: 1.5rem;
    }
}

.navbar-links .navbar-links__item > .link {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
}

.navbar-links .navbar-links__item > .link .xicon-container {
    margin-right: 0.125rem;
}

/* 选中高亮，不可以移动 */

.navbar-links .navbar-links__item .router-link-active {
    --tw-text-opacity: 1 !important;
    color: rgb(142 68 173 / var(--tw-text-opacity)) !important;
}

.navbar-links.mobile .navbar-links__item {
    border-width: 1px;
    border-style: solid;
    border-color: rgba(200, 200, 200, .32);
}

.navbar-links.mobile .navbar-links__item:is(.dark *) {
    border-color: rgba(82, 82, 89, .32);
}

.navbar-links.mobile .navbar-links__item {
    border-width: 0px;
    border-bottom-width: 1px;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#nprogress .bar {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(142 68 173 / var(--tw-bg-opacity)) !important;
}

.pagation-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.pagation-container .jump, .pagation-container .jumpinput {
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    display: inline-flex;
    height: 1.5rem;
    width: 1.5rem;
    max-width: 20rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(142 68 173 / var(--tw-border-opacity));
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}

.pagation-container .jump:hover {
    background-color: rgb(142 68 173 / 0.9);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

.pagation-container .jump.active {
    background-color: rgb(142 68 173 / 0.9);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

.pagation-container .jump.go {
    width: auto;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.pagation-container .jumpinput {
    width: 4rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.pagation-container .jumpinput input {
    width: 100%;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
    outline: 2px solid transparent;
    outline-offset: 2px;
}

/* 兼容 */

.pagation-container .jump:is(.dark *), .pagation-container .jumpinput:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

.pagation-container .jumpinput input:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

.page-content {
    flex: 1 1 0%;
    overflow: hidden;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1.5rem;
    padding-bottom: 6rem;
}

.page-content .page-info {
    margin-bottom: 1rem;
}

.page-catalog-container {
    position: sticky;
    top: 4rem;
    z-index: 10;
    display: none;
    height: 100%;
    width: 15rem;
    overflow-y: auto;
    padding: 1.5rem;
}

@media (min-width: 1024px) {

    .page-catalog-container {
        display: block;
    }
}

.page-catalog-container .tip {
    margin-top: 0px;
    padding-top: 0px;
    font-weight: 800;
}

.page-catalog-container ul {
    list-style-type: none;
    padding-left: 0px;
}

.page-catalog-container ul li span {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: nowrap;
}

.page-catalog-container ul .page-catalog-menu-depth_2 {
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(200, 200, 200, .32);
}

.page-catalog-container ul .page-catalog-menu-depth_2:is(.dark *) {
    border-color: rgba(82, 82, 89, .32);
}

.page-catalog-container ul .page-catalog-menu-depth_2 {
    border-width: 0px;
    border-top-width: 1px;
    border-style: dashed;
}

.page-catalog-container ul .page-catalog-menu-depth_2.active .page-catalog-item, .page-catalog-container ul .page-catalog-menu-depth_2:hover .page-catalog-item {
    --tw-text-opacity: 1;
    color: rgb(142 68 173 / var(--tw-text-opacity));
}

.page-catalog-container ul .page-catalog-menu-depth_2 span {

      }

.page-catalog-container ul .page-catalog-menu-depth_3 {
    position: relative;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
}

.page-catalog-container ul .page-catalog-menu-depth_3::before {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0.5rem;
    margin: auto;
    display: block;
    height: 0px;
    width: 0px;
    border-radius: 50%;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
    --tw-bg-opacity: 1;
    background-color: rgb(142 68 173 / var(--tw-bg-opacity));
        content: '';
}

.page-catalog-container ul .page-catalog-menu-depth_3:hover .page-catalog-item {
    --tw-text-opacity: 1;
    color: rgb(142 68 173 / var(--tw-text-opacity));
}

.page-catalog-container ul .page-catalog-menu-depth_3.active {
    padding-left: 1.25rem;
}

.page-catalog-container ul .page-catalog-menu-depth_3.active a {
    --tw-text-opacity: 1;
    color: rgb(142 68 173 / var(--tw-text-opacity));
}

.page-catalog-container ul .page-catalog-menu-depth_3.active::before {
    height: 0.25rem;
    width: 0.25rem;
}

.page-catalog-container ul .page-catalog-menu-depth_3 span {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity));
}

.page-catalog-container ul .page-catalog-menu-depth_3 span:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity));
}

@media (min-width: 768px) {
  .page-catalog-container {
    max-height: calc(100vh - 4rem)
  }
}

.page-info {
    display: flex;
    flex-wrap: wrap;
}

.page-info .xicon-container {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity));
}

.page-info .xicon-container:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity));
}

.page-info .xicon-container:not(:last-child) {
    margin-right: 1.25rem;
}

.page-info .xicon-container a:not(:last-child) {
    margin-right: 0.5rem;
}

.page-meta {
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

@media (min-width: 768px) {

    .page-meta {
        flex-wrap: nowrap;
        justify-content: space-between;
    }
}

.page-meta .meta-item {
    margin-top: 0.875rem;
    width: 100%;
    cursor: pointer;
}

@media (min-width: 768px) {

    .page-meta .meta-item {
        width: auto;
    }
}

.page-meta .meta-item .meta-item-label {
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}

.page-meta .meta-item .meta-item-label:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

.page-meta .edit-link .xicon-container {
    margin-right: 1rem !important;
    --tw-text-opacity: 1 !important;
    color: rgb(142 68 173 / var(--tw-text-opacity)) !important;
}

.page-nav {
    padding-top: 1rem;
    padding-bottom: 0px;
}

.page-nav .inner {
    margin-top: 0px;
    overflow: hidden;
    border-top-width: 1px;
    border-style: solid;
    border-color: rgba(200, 200, 200, .32);
    padding-top: 1rem;
}

@media (min-width: 768px) {

    .page-nav .inner {
        display: flex;
        justify-content: space-between;
    }
}

.page-nav .inner:is(.dark *) {
    border-color: rgba(82, 82, 89, .32);
}

@media (min-width: 768px) {

    .page-nav .inner.hasPrev {
        justify-content: flex-start;
    }

    .page-nav .inner.hasNext {
        justify-content: flex-end;
    }

    .page-nav .inner.hasPrev.hasNext {
        justify-content: space-between;
    }

    .page-nav .inner.hasPrev.hasNext .next {
        margin-left: 1rem;
    }
}

.page-nav .next {
    text-align: right;
}

.page-nav .page-nav-item {
    margin-top: 1rem;
    display: block;
    cursor: pointer;
    border-radius: 0.5rem;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(200, 200, 200, .32);
    padding: 1rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(142 68 173 / var(--tw-text-opacity));
}

@media (min-width: 768px) {

    .page-nav .page-nav-item {
        width: 50%;
    }
}

.page-nav .page-nav-item:is(.dark *) {
    border-color: rgba(82, 82, 89, .32);
}

.page-nav .page-nav-item:hover {
    --tw-border-opacity: 1;
    border-color: rgb(142 68 173 / var(--tw-border-opacity));
}

.page-password-wrapper {
    border-width: 1px;
    border-style: solid;
    border-color: rgba(200, 200, 200, .32);
}

.page-password-wrapper:is(.dark *) {
    border-color: rgba(82, 82, 89, .32);
}

.page-password-wrapper {
    border-radius: 0.5rem;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}

.page-password-wrapper:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

.page-password-wrapper {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}

.page-password-wrapper:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(32 32 34 / var(--tw-bg-opacity));
}

.page-password-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.page-password-wrapper input {
    position: absolute;
    z-index: 0;
    display: block;
    height: 5rem;
    width: 100%;
    opacity: 0;
}

.page-password-wrapper .password-show {
    margin-top: 1rem;
    display: flex;
    padding-left: 0px;
}

.page-password-wrapper .password-show li {
    border-width: 1px;
    border-style: solid;
    border-color: rgba(200, 200, 200, .32);
}

.page-password-wrapper .password-show li:is(.dark *) {
    border-color: rgba(82, 82, 89, .32);
}

.page-password-wrapper .password-show li {
    --tw-border-opacity: 1;
    border-color: rgb(142 68 173 / var(--tw-border-opacity));
}

.page-password-wrapper .password-show li:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(142 68 173 / var(--tw-border-opacity));
}

.page-password-wrapper .password-show li {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    height: 2rem;
    width: 2rem;
    list-style-type: none;
    border-radius: 0.5rem;
    border-width: 1px;
    text-align: center;
    line-height: 1.75rem;
}

@media (min-width: 768px) {

    .page-password-wrapper .password-show li {
        margin-left: 1rem;
        margin-right: 1rem;
        height: 2.5rem;
        width: 2.5rem;
        line-height: 2.25rem;
    }
}

.page-password-wrapper .password-show li i {
    display: inline-block;
    height: 0.5rem;
    width: 0.5rem;
    border-radius: 0.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(51 65 85 / var(--tw-bg-opacity));
}

.page-password-wrapper .password-show li i:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(226 232 240 / var(--tw-bg-opacity));
}

.password-wrapper {
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}

.password-wrapper:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

.password-wrapper {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}

.password-wrapper:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(32 32 34 / var(--tw-bg-opacity));
}

.password-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.password-wrapper input {
    position: absolute;
    z-index: 0;
    display: block;
    height: 5rem;
    width: 100%;
    opacity: 0;
}

.password-wrapper .site-info .logo {
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 12rem;
}

@media (min-width: 768px) {

    .password-wrapper .site-info .logo {
        width: 15rem;
    }
}

.password-wrapper .site-info .site-name {
    margin-bottom: 4rem;
    padding-top: 3rem;
}

.password-wrapper .password-show {
    margin-top: 1rem;
    display: flex;
    padding-left: 0px;
}

.password-wrapper .password-show li {
    border-width: 1px;
    border-style: solid;
    border-color: rgba(200, 200, 200, .32);
}

.password-wrapper .password-show li:is(.dark *) {
    border-color: rgba(82, 82, 89, .32);
}

.password-wrapper .password-show li {
    --tw-border-opacity: 1;
    border-color: rgb(142 68 173 / var(--tw-border-opacity));
}

.password-wrapper .password-show li:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(142 68 173 / var(--tw-border-opacity));
}

.password-wrapper .password-show li {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    height: 2rem;
    width: 2rem;
    list-style-type: none;
    border-radius: 0.5rem;
    border-width: 1px;
    text-align: center;
    line-height: 1.75rem;
}

@media (min-width: 768px) {

    .password-wrapper .password-show li {
        margin-left: 1rem;
        margin-right: 1rem;
        height: 2.5rem;
        width: 2.5rem;
        line-height: 2.25rem;
    }
}

.password-wrapper .password-show li i {
    display: inline-block;
    height: 0.5rem;
    width: 0.5rem;
    border-radius: 0.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(51 65 85 / var(--tw-bg-opacity));
}

.password-wrapper .password-show li i:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(226 232 240 / var(--tw-bg-opacity));
}

.personal-info-wrapper .personal-img {
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
    margin-bottom: 1rem;
    display: block;
    height: 6rem;
    width: 6rem;
    border-radius: 50%;
}

.personal-info-wrapper .name {
    text-align: center;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
}

.personal-info-wrapper .social-links {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    padding: 0.5rem;
}

.personal-info-wrapper .social-links .social-item {
    list-style-type: none;
    text-align: center;
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.personal-info-wrapper .social-links .social-item:hover {
    --tw-scale-x: 1.1;
    --tw-scale-y: 1.1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.personal-info-wrapper .social-links .social-item {
      width: 39px;
      height: 36px;
      line-height: 36px;
    }

.post-item-container {
    margin-bottom: 2rem;
    padding: 1.5rem;
}

.post-item-container .title {
    position: relative;
    margin-bottom: 0.5rem;
    display: inline-block;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 500;
}

.post-item-container .title:after {
    position: absolute;
    left: 0px;
    bottom: -0.5rem;
    width: 100%;
      content: "";
      height: 2px;
      visibility: hidden;
      transform: scaleX(0);
      transition: 0.3s ease-in-out;
      --tw-bg-opacity: 1;
      background-color: rgb(142 68 173 / var(--tw-bg-opacity));
}

.post-item-container .title:hover a {
    --tw-text-opacity: 1;
    color: rgb(142 68 173 / var(--tw-text-opacity));
}

.post-item-container .title:hover:after {
      visibility: visible;
      transform: scaleX(1);
    }

.post-item-container .page-info {
    margin-top: 0.5rem;
}

.posts-container {
    margin-left: auto;
    margin-right: auto;
    margin-top: 1rem;
    margin-bottom: 4rem;
    max-width: 1024px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.search-box input {
    background: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%2024%2024'%3e%3cg%20fill='none'%20stroke='%23adbac7'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3e%3ccircle%20cx='10'%20cy='10'%20r='7'%3e%3c/circle%3e%3cpath%20d='M21%2021l-6-6'%3e%3c/path%3e%3c/g%3e%3c/svg%3e") 0.4rem 0.3rem no-repeat;
    background-size: 1.2rem 1.2rem;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
  }

.search-box input:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

.search-box input {
    border-width: 1px;
    border-style: solid;
    border-color: rgba(200, 200, 200, .32);
}

.search-box input:is(.dark *) {
    border-color: rgba(82, 82, 89, .32);
}

.search-box input {
    border-radius: 0.5rem;
    border-width: 1px;
    background-color: transparent;
    padding-right: 0px;
}

.search-box input:focus {
    --tw-border-opacity: 1;
    border-color: rgb(142 68 173 / var(--tw-border-opacity));
}

.search-box .suggestions {
    border-width: 1px;
    border-style: solid;
    border-color: rgba(200, 200, 200, .32);
}

.search-box .suggestions:is(.dark *) {
    border-color: rgba(82, 82, 89, .32);
}

.search-box .suggestions {
    border-radius: 0.5rem;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}

.search-box .suggestions:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

.search-box .suggestions {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.search-box .suggestions:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(22 22 23 / var(--tw-bg-opacity));
}

.search-box .suggestions .suggestion a {
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}

.search-box .suggestions .suggestion a:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

.search-box .suggestions .suggestion a {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.search-box .suggestions .suggestion.focus {
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}

.search-box .suggestions .suggestion.focus:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

.search-box .suggestions .suggestion.focus {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}

.search-box .suggestions .suggestion.focus:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(32 32 34 / var(--tw-bg-opacity));
}

.search-box .suggestions .suggestion.focus a {
    --tw-text-opacity: 1;
    color: rgb(142 68 173 / var(--tw-text-opacity));
}

.series-container {
    position: fixed;
    bottom: 0px;
    left: 0px;
    top: 0px;
    z-index: 50;
    height: 100%;
    width: 16rem;
    overflow-y: auto;
    padding: 1.5rem;
    padding-top: 1.75rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
    --tw-translate-x: -100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@media (min-width: 768px) {

    .series-container {
        position: sticky !important;
        top: 4rem !important;
        z-index: 40 !important;
        --tw-translate-x: 0px !important;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
    }
}

.series-container .series-group {
    padding-bottom: 1.5rem;
}

.series-container .series-group h5.series-heading {
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}

.series-container .series-group h5.series-heading:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

.series-container .series-group h5.series-heading {
    margin-top: 0px;
    margin-bottom: 0px;
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
    padding-top: 0px;
}

.series-container .series-group h5.series-heading + ul {
    padding-top: 1rem;
}

.series-container .series-group h5.series-heading + ul li {
    border-width: 1px;
    border-style: solid;
    border-color: rgba(200, 200, 200, .32);
}

.series-container .series-group h5.series-heading + ul li:is(.dark *) {
    border-color: rgba(82, 82, 89, .32);
}

.series-container .series-group h5.series-heading + ul li {
    border-width: 0px;
    border-left-width: 1px;
    margin-left: 0.5rem;
    padding-left: 1rem;
}

.series-container .series-group h5.series-heading + ul li span.xicon-container {
    width: 100%;
}

.series-container .series-group h5.series-heading + ul li span.xicon-content {
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: nowrap;
}

.series-container .series-group:not(:first-of-type) {
    border-width: 1px;
    border-style: solid;
    border-color: rgba(200, 200, 200, .32);
}

.series-container .series-group:not(:first-of-type):is(.dark *) {
    border-color: rgba(82, 82, 89, .32);
}

.series-container .series-group:not(:first-of-type) {
    border-width: 0px;
    border-top-width: 1px;
    border-style: dashed;
}

.series-container .series-group:not(:first-of-type) h5.series-heading {
    margin-top: 1.5rem;
}

.series-container .series-group .series-heading {
    margin-bottom: 1rem;
    font-weight: 800;
}

.series-container .series-group .series-heading span {
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: nowrap;
}

.series-container .series-group .series-heading + ul {
    margin: 0px;
    list-style-type: none;
    padding-left: 0px;
}

.series-container .series-group .series-heading.active {
    --tw-text-opacity: 1;
    color: rgb(142 68 173 / var(--tw-text-opacity));
}

.series-container .series-group .series-item {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity));
}

.series-container .series-group .series-item:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity));
}

.series-container .series-group ul {
    list-style-type: none;
    padding-left: 1rem;
}

.series-container a.series-item {
    position: relative;
    display: block;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.75rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
}

.series-container a.series-item::before {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    margin: auto;
    display: block;
    height: 0px;
    width: 0px;
    border-radius: 50%;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
    --tw-bg-opacity: 1;
    background-color: rgb(142 68 173 / var(--tw-bg-opacity));
      content: '';
}

.series-container a.series-item:hover {
    --tw-text-opacity: 1;
    color: rgb(142 68 173 / var(--tw-text-opacity));
}

.series-container a.series-item.router-link-active {
    padding-left: 1rem;
}

.series-container a.series-item.router-link-active::before {
    height: 0.375rem;
    width: 0.375rem;
}

.series-container a.series-item.router-link-active span {
    --tw-text-opacity: 1;
    color: rgb(142 68 173 / var(--tw-text-opacity));
}

@media (min-width: 768px) {
  .series-container {
    max-height: calc(100vh - 4rem)
  }
}

.series-mask {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: 50;
    display: block;
    height: 100vh;
    width: 100vw;
    background-color: rgb(75 85 99 / 0.4);
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    transition-delay: 100ms;
}

.series--open .series-container {
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}

.series--open .series-container:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

.series--open .series-container {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.series--open .series-container:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(22 22 23 / var(--tw-bg-opacity));
}

.series--open .series-container {
    position: fixed !important;
    --tw-translate-x: 0px !important;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
}

/* .series-mask {
    @apply block bg-gray-600/40;
  } */

.series--open .toggle-series-button .icon span:nth-of-type(1) {
    width: 1.5rem;
    --tw-translate-x: -0.125rem;
    --tw-translate-y: 0.5rem;
    --tw-rotate: 225deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.series--open .toggle-series-button .icon span:nth-of-type(2) {
    width: 0px;
}

.series--open .toggle-series-button .icon span:nth-of-type(3) {
    width: 1.5rem;
    --tw-translate-x: -0.125rem;
    --tw-translate-y: -0.5rem;
    --tw-rotate: -225deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@media (min-width: 768px) {

    .series--no .series-container {
        display: none;
    }
}

.sub-navbar-container {
    border-width: 1px;
    border-style: solid;
    border-color: rgba(200, 200, 200, .32);
}

.sub-navbar-container:is(.dark *) {
    border-color: rgba(82, 82, 89, .32);
}

.sub-navbar-container {
    position: sticky;
    top: 0px;
    z-index: 20;
    display: flex;
    height: 3rem;
    align-items: center;
    border-left-width: 0px;
    border-right-width: 0px;
    background-color: rgb(255 255 255 / 0.6);
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.sub-navbar-container:is(.dark *) {
    background-color: rgb(22 22 23 / 0.6);
}

@media (min-width: 768px) {

    .sub-navbar-container {
        display: none;
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

.sub-navbar-container.not-open {
    --tw-backdrop-blur: blur(24px);
    --tw-backdrop-saturate: saturate(1.5);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
            backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.sub-navbar-container .toggle-series-button {
    display: inline-block;
    vertical-align: middle;
}

@media (min-width: 768px) {

    .sub-navbar-container .toggle-series-button {
        display: none;
    }
}

/* 仅在需要在 class 属性中使用 tailwind 时才需要下面的引用 */

/* ! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden] {
  display: none;
}

*, ::before, ::after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  ;
}

::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  ;
}

.container {
    width: 100%;
}

@media (min-width: 640px) {

    .container {
        max-width: 640px;
    }
}

@media (min-width: 768px) {

    .container {
        max-width: 768px;
    }
}

@media (min-width: 1024px) {

    .container {
        max-width: 1024px;
    }
}

@media (min-width: 1280px) {

    .container {
        max-width: 1280px;
    }
}

@media (min-width: 1536px) {

    .container {
        max-width: 1536px;
    }
}

.visible {
    visibility: visible;
}

.static {
    position: static;
}

.fixed {
    position: fixed;
}

.absolute {
    position: absolute;
}

.relative {
    position: relative;
}

.sticky {
    position: sticky;
}

.right-2 {
    right: 0.5rem;
}

.right-4 {
    right: 1rem;
}

.top-20 {
    top: 5rem;
}

.z-30 {
    z-index: 30;
}

.m-0 {
    margin: 0px;
}

.my-0 {
    margin-top: 0px;
    margin-bottom: 0px;
}

.my-4 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.my-6 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.my-8 {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.mb-0 {
    margin-bottom: 0px;
}

.mb-1 {
    margin-bottom: 0.25rem;
}

.ml-1 {
    margin-left: 0.25rem;
}

.mr-1 {
    margin-right: 0.25rem;
}

.mr-4 {
    margin-right: 1rem;
}

.mt-0 {
    margin-top: 0px;
}

.mt-1 {
    margin-top: 0.25rem;
}

.box-border {
    box-sizing: border-box;
}

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.inline {
    display: inline;
}

.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

.hidden {
    display: none;
}

.h-14 {
    height: 3.5rem;
}

.h-4 {
    height: 1rem;
}

.h-8 {
    height: 2rem;
}

.w-14 {
    width: 3.5rem;
}

.w-4 {
    width: 1rem;
}

.w-8 {
    width: 2rem;
}

.transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cursor-pointer {
    cursor: pointer;
}

.resize {
    resize: both;
}

.flex-row {
    flex-direction: row;
}

.flex-row-reverse {
    flex-direction: row-reverse;
}

.flex-col {
    flex-direction: column;
}

.flex-col-reverse {
    flex-direction: column-reverse;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.overflow-hidden {
    overflow: hidden;
}

.rounded-1\/2 {
    border-radius: 50%;
}

.rounded-lg {
    border-radius: 0.5rem;
}

.border {
    border-width: 1px;
}

.border-0 {
    border-width: 0px;
}

.border-b {
    border-bottom-width: 1px;
}

.border-b-2 {
    border-bottom-width: 2px;
}

.border-t {
    border-top-width: 1px;
}

.border-t-0 {
    border-top-width: 0px;
}

.border-solid {
    border-style: solid;
}

.border-dashed {
    border-style: dashed;
}

.border-reco-primary {
    --tw-border-opacity: 1;
    border-color: rgb(142 68 173 / var(--tw-border-opacity));
}

.border-transparent {
    border-color: transparent;
}

.bg-reco-primary {
    --tw-bg-opacity: 1;
    background-color: rgb(142 68 173 / var(--tw-bg-opacity));
}

.p-1 {
    padding: 0.25rem;
}

.p-1\.5 {
    padding: 0.375rem;
}

.px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.px-3\.5 {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
}

.py-0 {
    padding-top: 0px;
    padding-bottom: 0px;
}

.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.pb-4 {
    padding-bottom: 1rem;
}

.pl-0 {
    padding-left: 0px;
}

.pr-0 {
    padding-right: 0px;
}

.pt-0 {
    padding-top: 0px;
}

.text-center {
    text-align: center;
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.text-reco-text-lightmode {
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}

.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

.filter {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* 仅在需要在 class 属性中使用 tailwind 时才需要下面的引用 */

/* ! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden] {
  display: none;
}

* {
    margin: 0px;
    padding: 0px;
}

*,
  ::before,
  ::after {
    box-sizing: border-box;
    border-width: 0px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100%;
  }

body {
    /* antialiased 字体平滑 */
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
  }

body:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

body {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

body:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(22 22 23 / var(--tw-bg-opacity));
}

body {
    margin: 0px;
    width: 100%;
    overflow-x: hidden;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-width: 320px;
    direction: ltr;
    /* 像素较小时字体会拼接在一起 */
    text-rendering: optimizeLegibility;
    transition: background-color 0.3s ease;
}

main {
    display: block;
}

svg {
    display: inline-block;
}

hr {
    border-width: 1px;
    border-style: solid;
    border-color: rgba(200, 200, 200, .32);
}

hr:is(.dark *) {
    border-color: rgba(82, 82, 89, .32);
}

hr {
    border-width: 0px;
    border-top-width: 1px;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity));
}

h1:is(.dark *),
  h2:is(.dark *),
  h3:is(.dark *),
  h4:is(.dark *),
  h5:is(.dark *),
  h6:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    z-index: -10;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: -2rem;
    margin-bottom: 2rem;
    padding-top: 3rem;
    line-height: 1.25rem;
}

h1 {
    margin-top: -3rem;
    font-size: 1.875rem;
    line-height: 2.25rem;
}

h2 {
    line-height: 1.25;
}

h2 span {
    font-size: 1.5rem;
    line-height: 2rem;
}

h2::before {
    margin-bottom: 1.5rem;
    display: block;
    width: 100%;
    border-top-width: 1px;
    border-style: solid;
    border-color: rgba(200, 200, 200, .32);
}

h2:is(.dark *)::before {
    border-color: rgba(82, 82, 89, .32);
}

h2::before {
      content: ' ';
    }

h3 span {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

h4 span {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

h5 span {
    font-size: 1rem;
    line-height: 1.5rem;
}

h6 span {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  strong,
  b {
    font-weight: 600;
}

a:active,
  a:link,
  a:focus,
  a:visited {
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}

a:active:is(.dark *),
  a:link:is(.dark *),
  a:focus:is(.dark *),
  a:visited:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

p,
  ol,
  ul,
  table {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    line-height: 2rem;
}

a,
  area,
  button,
  [role='button'],
  input,
  label,
  select,
  summary,
  textarea {
    touch-action: manipulation;
    background-color: transparent;
    -webkit-text-decoration-line: none;
            text-decoration-line: none;
  }

button {
    font-size: 1rem;
    line-height: 1.5rem;
}

figure {
    margin: 0px;
}

img {
    max-width: 100%;
}

ul,
  ol {
    padding-left: 1.25rem;
}

ul {
    list-style-type: disc;
}

ol {
    list-style-type: decimal;
}

li > ul,
  li > ol {
    margin: 0px;
}

table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-radius: 0.5rem;
    border-collapsible: collapsible;
}

table tr {
    border-width: 1px;
    border-style: solid;
    border-color: rgba(200, 200, 200, .32);
}

table tr:is(.dark *) {
    border-color: rgba(82, 82, 89, .32);
}

table tr {
    border-radius: 0.5rem;
}

table th {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity));
    text-align: left;
    font-weight: 600;
}

table th:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(32 32 34 / var(--tw-bg-opacity));
}

table td,
    table th {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

table td:not(:last-child), table th:not(:last-child) {
    border-right-width: 1px;
    border-style: solid;
    border-color: rgba(200, 200, 200, .32);
}

table td:not(:last-child):is(.dark *), table th:not(:last-child):is(.dark *) {
    border-color: rgba(82, 82, 89, .32);
}

blockquote {
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}

blockquote:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

blockquote {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}

blockquote:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(32 32 34 / var(--tw-bg-opacity));
}

blockquote {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    margin-left: 0px;
    margin-right: 0px;
    border-left-width: 4px;
    border-style: solid;
    padding: 0.5rem;
    font-size: 1rem;
    line-height: 1.5rem;
}

blockquote > p {
    margin: 0px;
}

pre,
  code,
  kbd {
    font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
  }

kbd {
    border-radius: 0.5rem;
    border-width: 1px;
    border-bottom-width: 2px;
    border-color: rgb(156 163 175 / 0.2);
    background-color: rgb(156 163 175 / 0.05);
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

form {
    margin: 0px;
}

p > img {
    border-radius: 0.5rem;
}

li svg {
    vertical-align: middle;
    transform: translateY(-10%);
}

*, ::before, ::after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  ;
}

::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  ;
}

.container {
    width: 100%;
}

@media (min-width: 640px) {

    .container {
        max-width: 640px;
    }
}

@media (min-width: 768px) {

    .container {
        max-width: 768px;
    }
}

@media (min-width: 1024px) {

    .container {
        max-width: 1024px;
    }
}

@media (min-width: 1280px) {

    .container {
        max-width: 1280px;
    }
}

@media (min-width: 1536px) {

    .container {
        max-width: 1536px;
    }
}

.text-basic {
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}

.text-basic:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

.border-block {
    border-width: 1px;
    border-style: solid;
    border-color: rgba(200, 200, 200, .32);
}

.border-block:is(.dark *) {
    border-color: rgba(82, 82, 89, .32);
}

.border-block {
    border-radius: 0.5rem;
}

.bg-block {
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}

.bg-block:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

.bg-block {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}

.bg-block:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(32 32 34 / var(--tw-bg-opacity));
}

.visible {
    visibility: visible;
}

.static {
    position: static;
}

.fixed {
    position: fixed;
}

.absolute {
    position: absolute;
}

.relative {
    position: relative;
}

.sticky {
    position: sticky;
}

.right-2 {
    right: 0.5rem;
}

.right-4 {
    right: 1rem;
}

.top-20 {
    top: 5rem;
}

.z-30 {
    z-index: 30;
}

.m-0 {
    margin: 0px;
}

.my-0 {
    margin-top: 0px;
    margin-bottom: 0px;
}

.my-4 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.my-6 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.my-8 {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.mb-0 {
    margin-bottom: 0px;
}

.mb-1 {
    margin-bottom: 0.25rem;
}

.ml-1 {
    margin-left: 0.25rem;
}

.mr-1 {
    margin-right: 0.25rem;
}

.mr-4 {
    margin-right: 1rem;
}

.mt-0 {
    margin-top: 0px;
}

.mt-1 {
    margin-top: 0.25rem;
}

.box-border {
    box-sizing: border-box;
}

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.inline {
    display: inline;
}

.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

.hidden {
    display: none;
}

.h-14 {
    height: 3.5rem;
}

.h-4 {
    height: 1rem;
}

.h-8 {
    height: 2rem;
}

.w-14 {
    width: 3.5rem;
}

.w-4 {
    width: 1rem;
}

.w-8 {
    width: 2rem;
}

.transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cursor-pointer {
    cursor: pointer;
}

.resize {
    resize: both;
}

.flex-row {
    flex-direction: row;
}

.flex-row-reverse {
    flex-direction: row-reverse;
}

.flex-col {
    flex-direction: column;
}

.flex-col-reverse {
    flex-direction: column-reverse;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.overflow-hidden {
    overflow: hidden;
}

.rounded-1\/2 {
    border-radius: 50%;
}

.rounded-lg {
    border-radius: 0.5rem;
}

.border {
    border-width: 1px;
}

.border-0 {
    border-width: 0px;
}

.border-b {
    border-bottom-width: 1px;
}

.border-b-2 {
    border-bottom-width: 2px;
}

.border-t {
    border-top-width: 1px;
}

.border-t-0 {
    border-top-width: 0px;
}

.border-solid {
    border-style: solid;
}

.border-dashed {
    border-style: dashed;
}

.border-reco-primary {
    --tw-border-opacity: 1;
    border-color: rgb(142 68 173 / var(--tw-border-opacity));
}

.border-transparent {
    border-color: transparent;
}

.bg-reco-primary {
    --tw-bg-opacity: 1;
    background-color: rgb(142 68 173 / var(--tw-bg-opacity));
}

.p-1 {
    padding: 0.25rem;
}

.p-1\.5 {
    padding: 0.375rem;
}

.px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.px-3\.5 {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
}

.py-0 {
    padding-top: 0px;
    padding-bottom: 0px;
}

.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.pb-4 {
    padding-bottom: 1rem;
}

.pl-0 {
    padding-left: 0px;
}

.pr-0 {
    padding-right: 0px;
}

.pt-0 {
    padding-top: 0px;
}

.text-center {
    text-align: center;
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.text-reco-text-lightmode {
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}

.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

.filter {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.theme-container .page-content,
  .theme-container .theme-reco-md-content {
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (min-width: 1024px) {

    .theme-container .page-content,
  .theme-container .theme-reco-md-content {
        max-width: 768px;
    }
}

@media (min-width: 1280px) {

    .theme-container .page-content,
  .theme-container .theme-reco-md-content {
        max-width: 1024px;
    }
}

.theme-container .page-content,
  .theme-container .theme-reco-md-content {
    border-top: 1px solid transparent;
  }

.theme-container .page-content.theme-reco-md-content code, .theme-container .theme-reco-md-content.theme-reco-md-content code {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    display: inline-block;
    border-radius: 0.25rem;
    background-color: rgb(142 68 173 / 0.1);
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.theme-container .page-content.theme-reco-md-content code:is(.dark *), .theme-container .theme-reco-md-content.theme-reco-md-content code:is(.dark *) {
    background-color: rgb(142 68 173 / 0.2);
}

.theme-container .page-content .theme-reco-md-content {
    padding-left: 0px;
    padding-right: 0px;
}

.theme-container .theme-reco-md-content {
    margin-bottom: 4rem;
}

.theme-container .theme-reco-md-content h1 {
    display: none;
}

.theme-container .theme-reco-md-content a {
    --tw-text-opacity: 1 !important;
    color: rgb(142 68 173 / var(--tw-text-opacity)) !important;
}

.theme-container .theme-reco-md-content a:hover {
    -webkit-text-decoration-line: underline !important;
            text-decoration-line: underline !important;
}

.theme-container .contains-task-list {
    list-style-type: none;
    padding-left: 0px;
}

.theme-container .fade-slide-y-enter-active {
    transition: all 0.3s ease;
  }

.theme-container .fade-slide-y-leave-active {
    transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
  }

.theme-container .fade-slide-y-enter-from,
  .theme-container .fade-slide-y-leave-to {
    transform: translateY(10px);
    opacity: 0;
  }

.theme-container .external-link-icon {
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}

.theme-container .external-link-icon:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

h1:hover .header-anchor,
h1:focus .header-anchor,
h2:hover .header-anchor,
h2:focus .header-anchor,
h3:hover .header-anchor,
h3:focus .header-anchor,
h4:hover .header-anchor,
h4:focus .header-anchor,
h5:hover .header-anchor,
h5:focus .header-anchor,
h6:hover .header-anchor,
h6:focus .header-anchor {
    --tw-text-opacity: 1;
    color: rgb(142 68 173 / var(--tw-text-opacity));
    opacity: 1;
}

a.header-anchor {
    margin-top: 0.125rem;
    font-size: 1rem;
    line-height: 1.5rem;
}

a.header-anchor span {
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}

a.header-anchor span:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

a.header-anchor::before {
    visibility: hidden;
    margin-left: -0.75rem;
    margin-right: 0.25rem;
    content: '#';
}

a.header-anchor:hover,
  a.header-anchor:focus {
    -webkit-text-decoration-line: none;
            text-decoration-line: none;
}

a.header-anchor:hover::before, a.header-anchor:focus::before {
    visibility: visible;
}

.medium-zoom--opened .medium-zoom-overlay {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
}

.medium-zoom--opened .medium-zoom-overlay:is(.dark *) {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(22 22 23 / var(--tw-bg-opacity)) !important;
}

.timeline-wrapper .timeline-content {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1rem;
    margin-bottom: 4rem;
    max-width: 1024px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.timeline-wrapper .timeline-content .year-wrapper {
    padding-left: 0px;
}

.timeline-wrapper .timeline-content li {
    list-style-type: none;
}

.timeline-wrapper .timeline-content li .date {
    margin-right: 0.5rem;
    display: inline-block;
    font-size: 0.875rem;
    line-height: 1.25rem;
        width: 48px;
}

.timeline-wrapper .timeline-content li.item {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity));
}

.timeline-wrapper .timeline-content li.item:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity));
}

.timeline-wrapper .timeline-content li.item {
    position: relative;
    line-height: 2.5rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
}

.timeline-wrapper .timeline-content li.item span, .timeline-wrapper .timeline-content li.item a {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity));
}

.timeline-wrapper .timeline-content li.item span:is(.dark *), .timeline-wrapper .timeline-content li.item a:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity));
}

.timeline-wrapper .timeline-content li.item::before {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    margin: auto;
    display: block;
    height: 0px;
    width: 0px;
    border-radius: 50%;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
    --tw-bg-opacity: 1;
    background-color: rgb(142 68 173 / var(--tw-bg-opacity));
          content: '';
}

.timeline-wrapper .timeline-content li.item:hover {
    padding-left: 1rem;
    --tw-text-opacity: 1;
    color: rgb(142 68 173 / var(--tw-text-opacity));
}

.timeline-wrapper .timeline-content li.item:hover::before {
    height: 0.375rem;
    width: 0.375rem;
}

.timeline-wrapper .timeline-content li.item:hover span, .timeline-wrapper .timeline-content li.item:hover a {
    --tw-text-opacity: 1;
    color: rgb(142 68 173 / var(--tw-text-opacity));
}

.btn-toggle-dark-mode svg {
    display: block;
    cursor: pointer;
}

.toggle-series-button {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    display: inline-block;
    width: 1.5rem;
    cursor: pointer;
}

.toggle-series-button .icon {
    width: 100%;
}

.toggle-series-button .icon span {
    margin-top: 0.375rem;
    margin-bottom: 0.375rem;
    display: block;
    transform-origin: center;
    --tw-bg-opacity: 1;
    background-color: rgb(51 65 85 / var(--tw-bg-opacity));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
}

.toggle-series-button .icon span:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(226 232 240 / var(--tw-bg-opacity));
}

.toggle-series-button .icon span {
      height: 2px;
      border-radius: 2px;
    }

.toggle-series-button .icon span:nth-of-type(1) {
    width: 0.75rem;
}

.toggle-series-button .icon span:nth-of-type(2) {
    margin-left: auto;
    margin-right: auto;
    width: 1.5rem;
}

.toggle-series-button .icon span:nth-of-type(3) {
    width: 1.25rem;
}

.page-404-wrapper {
    display: flex;
    height: 100vh;
    width: 100vw;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (min-width: 768px) {

    .page-404-wrapper {
        flex-direction: row;
    }
}

.page-404-wrapper .content {
    margin-right: 0px;
    margin-bottom: 5rem;
    text-align: center;
}

@media (min-width: 768px) {

    .page-404-wrapper .content {
        margin-right: 10rem;
        margin-bottom: 0px;
    }
}

.page-404-wrapper .content h1 {
    font-size: 8rem !important;
    line-height: 1 !important;
}

.page-404-wrapper .content .xicon-container {
    display: inline-block;
    cursor: pointer;
    border-radius: 0.5rem;
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(142 68 173 / var(--tw-border-opacity));
    background-color: rgb(142 68 173 / 0.9);
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

.page-404-wrapper .content .xicon-container:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

.page-404-wrapper img {
    height: 20rem;
}

/* vite:css 报错，迁移至 resolveStyles.ts */

/* @import '@vuepress/plugin-palette/style'; */
/* 仅在需要在 class 属性中使用 tailwind 时才需要下面的引用 */
/* ! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}
::before,
::after {
  --tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden] {
  display: none;
}
*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
.container{
  width: 100%;
}
@media (min-width: 640px){
.container{
    max-width: 640px;
}
}
@media (min-width: 768px){
.container{
    max-width: 768px;
}
}
@media (min-width: 1024px){
.container{
    max-width: 1024px;
}
}
@media (min-width: 1280px){
.container{
    max-width: 1280px;
}
}
@media (min-width: 1536px){
.container{
    max-width: 1536px;
}
}
.visible{
  visibility: visible;
}
.static{
  position: static;
}
.fixed{
  position: fixed;
}
.absolute{
  position: absolute;
}
.relative{
  position: relative;
}
.sticky{
  position: sticky;
}
.right-2{
  right: 0.5rem;
}
.right-4{
  right: 1rem;
}
.top-20{
  top: 5rem;
}
.z-30{
  z-index: 30;
}
.m-0{
  margin: 0px;
}
.my-0{
  margin-top: 0px;
  margin-bottom: 0px;
}
.my-4{
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.my-6{
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.my-8{
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.mb-0{
  margin-bottom: 0px;
}
.mb-1{
  margin-bottom: 0.25rem;
}
.ml-1{
  margin-left: 0.25rem;
}
.mr-1{
  margin-right: 0.25rem;
}
.mr-4{
  margin-right: 1rem;
}
.mt-0{
  margin-top: 0px;
}
.mt-1{
  margin-top: 0.25rem;
}
.box-border{
  box-sizing: border-box;
}
.block{
  display: block;
}
.inline-block{
  display: inline-block;
}
.inline{
  display: inline;
}
.flex{
  display: flex;
}
.inline-flex{
  display: inline-flex;
}
.hidden{
  display: none;
}
.h-14{
  height: 3.5rem;
}
.h-4{
  height: 1rem;
}
.h-8{
  height: 2rem;
}
.w-14{
  width: 3.5rem;
}
.w-4{
  width: 1rem;
}
.w-8{
  width: 2rem;
}
.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.cursor-pointer{
  cursor: pointer;
}
.resize{
  resize: both;
}
.flex-row{
  flex-direction: row;
}
.flex-row-reverse{
  flex-direction: row-reverse;
}
.flex-col{
  flex-direction: column;
}
.flex-col-reverse{
  flex-direction: column-reverse;
}
.items-center{
  align-items: center;
}
.justify-between{
  justify-content: space-between;
}
.overflow-hidden{
  overflow: hidden;
}
.rounded-1\/2{
  border-radius: 50%;
}
.rounded-lg{
  border-radius: 0.5rem;
}
.border{
  border-width: 1px;
}
.border-0{
  border-width: 0px;
}
.border-b{
  border-bottom-width: 1px;
}
.border-b-2{
  border-bottom-width: 2px;
}
.border-t{
  border-top-width: 1px;
}
.border-t-0{
  border-top-width: 0px;
}
.border-solid{
  border-style: solid;
}
.border-dashed{
  border-style: dashed;
}
.border-reco-primary{
  --tw-border-opacity: 1;
  border-color: rgb(142 68 173 / var(--tw-border-opacity));
}
.border-transparent{
  border-color: transparent;
}
.bg-reco-primary{
  --tw-bg-opacity: 1;
  background-color: rgb(142 68 173 / var(--tw-bg-opacity));
}
.p-1{
  padding: 0.25rem;
}
.p-1\.5{
  padding: 0.375rem;
}
.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-3\.5{
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.py-0{
  padding-top: 0px;
  padding-bottom: 0px;
}
.py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5{
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-4{
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-6{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.pb-4{
  padding-bottom: 1rem;
}
.pl-0{
  padding-left: 0px;
}
.pr-0{
  padding-right: 0px;
}
.pt-0{
  padding-top: 0px;
}
.text-center{
  text-align: center;
}
.text-xl{
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-reco-text-lightmode{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}
.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
/* 仅在需要在 class 属性中使用 tailwind 时才需要下面的引用 */
/* ! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}
::before,
::after {
  --tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden] {
  display: none;
}
*{
  margin: 0px;
  padding: 0px;
}
*,
  ::before,
  ::after{
  box-sizing: border-box;
  border-width: 0px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100%;
}
body {
    /* antialiased 字体平滑 */
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity));
}
body:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity));
}
body{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
body:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(22 22 23 / var(--tw-bg-opacity));
}
body{
  margin: 0px;
  width: 100%;
  overflow-x: hidden;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
    min-width: 320px;
    direction: ltr;
    /* 像素较小时字体会拼接在一起 */
    text-rendering: optimizeLegibility;
    transition: background-color 0.3s ease;
}
main{
  display: block;
}
svg{
  display: inline-block;
}
hr{
  border-width: 1px;
  border-style: solid;
  border-color: rgba(200, 200, 200, .32);
}
hr:is(.dark *){
  border-color: rgba(82, 82, 89, .32);
}
hr{
  border-width: 0px;
  border-top-width: 1px;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
h1,
  h2,
  h3,
  h4,
  h5,
  h6{
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity));
}
h1:is(.dark *),
  h2:is(.dark *),
  h3:is(.dark *),
  h4:is(.dark *),
  h5:is(.dark *),
  h6:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
h1,
  h2,
  h3,
  h4,
  h5,
  h6{
  z-index: -10;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: -2rem;
  margin-bottom: 2rem;
  padding-top: 3rem;
  line-height: 1.25rem;
}
h1{
  margin-top: -3rem;
  font-size: 1.875rem;
  line-height: 2.25rem;
}
h2{
  line-height: 1.25;
}
h2 span{
  font-size: 1.5rem;
  line-height: 2rem;
}
h2::before{
  margin-bottom: 1.5rem;
  display: block;
  width: 100%;
  border-top-width: 1px;
  border-style: solid;
  border-color: rgba(200, 200, 200, .32);
}
h2:is(.dark *)::before{
  border-color: rgba(82, 82, 89, .32);
}
h2::before {
      content: ' ';
}
h3 span{
  font-size: 1.25rem;
  line-height: 1.75rem;
}
h4 span{
  font-size: 1.125rem;
  line-height: 1.75rem;
}
h5 span{
  font-size: 1rem;
  line-height: 1.5rem;
}
h6 span{
  font-size: 0.875rem;
  line-height: 1.25rem;
}
h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  strong,
  b{
  font-weight: 600;
}
a:active,
  a:link,
  a:focus,
  a:visited{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}
a:active:is(.dark *),
  a:link:is(.dark *),
  a:focus:is(.dark *),
  a:visited:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity));
}
p,
  ol,
  ul,
  table{
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  line-height: 2rem;
}
a,
  area,
  button,
  [role='button'],
  input,
  label,
  select,
  summary,
  textarea {
    touch-action: manipulation;
    background-color: transparent;
    -webkit-text-decoration-line: none;
            text-decoration-line: none;
}
button{
  font-size: 1rem;
  line-height: 1.5rem;
}
figure{
  margin: 0px;
}
img{
  max-width: 100%;
}
ul,
  ol{
  padding-left: 1.25rem;
}
ul{
  list-style-type: disc;
}
ol{
  list-style-type: decimal;
}
li > ul,
  li > ol{
  margin: 0px;
}
table{
  display: block;
  width: 100%;
  overflow-x: auto;
  border-radius: 0.5rem;
    border-collapsible: collapsible;
}
table tr{
  border-width: 1px;
  border-style: solid;
  border-color: rgba(200, 200, 200, .32);
}
table tr:is(.dark *){
  border-color: rgba(82, 82, 89, .32);
}
table tr{
  border-radius: 0.5rem;
}
table th{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
  text-align: left;
  font-weight: 600;
}
table th:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(32 32 34 / var(--tw-bg-opacity));
}
table td,
    table th{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
table td:not(:last-child), table th:not(:last-child){
  border-right-width: 1px;
  border-style: solid;
  border-color: rgba(200, 200, 200, .32);
}
table td:not(:last-child):is(.dark *), table th:not(:last-child):is(.dark *){
  border-color: rgba(82, 82, 89, .32);
}
blockquote{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}
blockquote:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity));
}
blockquote{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
blockquote:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(32 32 34 / var(--tw-bg-opacity));
}
blockquote{
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  margin-left: 0px;
  margin-right: 0px;
  border-left-width: 4px;
  border-style: solid;
  padding: 0.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
}
blockquote > p{
  margin: 0px;
}
pre,
  code,
  kbd {
    font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
}
kbd{
  border-radius: 0.5rem;
  border-width: 1px;
  border-bottom-width: 2px;
  border-color: rgb(156 163 175 / 0.2);
  background-color: rgb(156 163 175 / 0.05);
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
form{
  margin: 0px;
}
p > img{
  border-radius: 0.5rem;
}
li svg{
  vertical-align: middle;
    transform: translateY(-10%);
}
*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
.container{
  width: 100%;
}
@media (min-width: 640px){
.container{
    max-width: 640px;
}
}
@media (min-width: 768px){
.container{
    max-width: 768px;
}
}
@media (min-width: 1024px){
.container{
    max-width: 1024px;
}
}
@media (min-width: 1280px){
.container{
    max-width: 1280px;
}
}
@media (min-width: 1536px){
.container{
    max-width: 1536px;
}
}
.text-basic{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}
.text-basic:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity));
}
.border-block{
  border-width: 1px;
  border-style: solid;
  border-color: rgba(200, 200, 200, .32);
}
.border-block:is(.dark *){
  border-color: rgba(82, 82, 89, .32);
}
.border-block{
  border-radius: 0.5rem;
}
.bg-block{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}
.bg-block:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity));
}
.bg-block{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.bg-block:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(32 32 34 / var(--tw-bg-opacity));
}
.visible{
  visibility: visible;
}
.static{
  position: static;
}
.fixed{
  position: fixed;
}
.absolute{
  position: absolute;
}
.relative{
  position: relative;
}
.sticky{
  position: sticky;
}
.right-2{
  right: 0.5rem;
}
.right-4{
  right: 1rem;
}
.top-20{
  top: 5rem;
}
.z-30{
  z-index: 30;
}
.m-0{
  margin: 0px;
}
.my-0{
  margin-top: 0px;
  margin-bottom: 0px;
}
.my-4{
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.my-6{
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.my-8{
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.mb-0{
  margin-bottom: 0px;
}
.mb-1{
  margin-bottom: 0.25rem;
}
.ml-1{
  margin-left: 0.25rem;
}
.mr-1{
  margin-right: 0.25rem;
}
.mr-4{
  margin-right: 1rem;
}
.mt-0{
  margin-top: 0px;
}
.mt-1{
  margin-top: 0.25rem;
}
.box-border{
  box-sizing: border-box;
}
.block{
  display: block;
}
.inline-block{
  display: inline-block;
}
.inline{
  display: inline;
}
.flex{
  display: flex;
}
.inline-flex{
  display: inline-flex;
}
.hidden{
  display: none;
}
.h-14{
  height: 3.5rem;
}
.h-4{
  height: 1rem;
}
.h-8{
  height: 2rem;
}
.w-14{
  width: 3.5rem;
}
.w-4{
  width: 1rem;
}
.w-8{
  width: 2rem;
}
.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.cursor-pointer{
  cursor: pointer;
}
.resize{
  resize: both;
}
.flex-row{
  flex-direction: row;
}
.flex-row-reverse{
  flex-direction: row-reverse;
}
.flex-col{
  flex-direction: column;
}
.flex-col-reverse{
  flex-direction: column-reverse;
}
.items-center{
  align-items: center;
}
.justify-between{
  justify-content: space-between;
}
.overflow-hidden{
  overflow: hidden;
}
.rounded-1\/2{
  border-radius: 50%;
}
.rounded-lg{
  border-radius: 0.5rem;
}
.border{
  border-width: 1px;
}
.border-0{
  border-width: 0px;
}
.border-b{
  border-bottom-width: 1px;
}
.border-b-2{
  border-bottom-width: 2px;
}
.border-t{
  border-top-width: 1px;
}
.border-t-0{
  border-top-width: 0px;
}
.border-solid{
  border-style: solid;
}
.border-dashed{
  border-style: dashed;
}
.border-reco-primary{
  --tw-border-opacity: 1;
  border-color: rgb(142 68 173 / var(--tw-border-opacity));
}
.border-transparent{
  border-color: transparent;
}
.bg-reco-primary{
  --tw-bg-opacity: 1;
  background-color: rgb(142 68 173 / var(--tw-bg-opacity));
}
.p-1{
  padding: 0.25rem;
}
.p-1\.5{
  padding: 0.375rem;
}
.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-3\.5{
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.py-0{
  padding-top: 0px;
  padding-bottom: 0px;
}
.py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5{
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-4{
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-6{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.pb-4{
  padding-bottom: 1rem;
}
.pl-0{
  padding-left: 0px;
}
.pr-0{
  padding-right: 0px;
}
.pt-0{
  padding-top: 0px;
}
.text-center{
  text-align: center;
}
.text-xl{
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-reco-text-lightmode{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}
.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.site-brand{
  display: flex;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
}
.site-brand .logo{
  margin-right: 1rem;
  display: inline-block;
  height: 2rem;
  width: 2rem;
  border-radius: 0.5rem;
}

.bounce-enter-active {
  animation: bounce-in 0.1s;
}
.bounce-leave-active {
  animation: bounce-in 0.1s reverse;
}
@keyframes bounce-in {
0% {
    transform: translateY(-4px);
}
100% {
    transform: translateY(0);
}
}
/** ensure default theme color */
/** shadow */
/* constants */
/* responsive breakpoints */
/* rtl */
/* Content Class */
/** dark mode selectors */
/* Color list */
/* stylelint-disable order/order */
/** ensure default theme color */
/** shadow */
/* constants */
html.dark {
  --box-shadow: #0f0e0d;
  --card-shadow: rgba(0, 0, 0, 0.3);
  --black: #fff;
  --grey-dark: #999;
  --grey-light: #666;
  --white: #000;
  --grey-darker: #bbb;
  --grey-lighter: #333;
  --grey14: #111;
}
:root {
  --vp-bg: var(--c-bg, #fff);
  --vp-bgl: var(--c-bg-light, #f3f4f5);
  --vp-bglt: var(--c-bg-lighter, #eeeeee);
  --vp-c: var(--c-text, #2c3e50);
  --vp-cl: var(--c-text-light, #3a5169);
  --vp-clt: var(--c-text-lighter, #4e6e8e);
  --vp-brc: var(--c-border, #eaecef);
  --vp-brcd: var(--c-border-dark, #dfe2e5);
  --vp-tc: var(--c-brand, #3eaf7c);
  --vp-tcl: var(--c-brand-light, #4abf8a);
  --vp-ct: var(--t-color, 0.3s ease);
  --vp-tt: var(--t-transform, 0.3s ease);
  --box-shadow: #f0f1f2;
  --card-shadow: rgba(0, 0, 0, 0.15);
  --black: #000;
  --grey-dark: #666;
  --grey-light: #999;
  --white: #fff;
  --grey-darker: #333;
  --grey-lighter: #bbb;
  --grey14: #eee;
}/** ensure default theme color */
/** shadow */
/* constants */
/* responsive breakpoints */
/* rtl */
/* Content Class */
/** dark mode selectors */
/* Color list */
@media print {
  .bilibili-desc a {
    display: block;
  }
}
.bilibili-iframe {
  margin: 8px 0;
  border: none;
  border-radius: 8px;
}
@media print {
  .bilibili-iframe {
    display: none;
  }
}/** ensure default theme color */
/** shadow */
/* constants */
/* responsive breakpoints */
/* rtl */
/* Content Class */
/** dark mode selectors */
/* Color list */
.vp-card {
  display: inline-flex;
  align-items: center;
  max-width: 400px;
  margin: 1rem 0.5rem;
  padding: 1rem;
  border-radius: 0.5rem;
  background: var(--vp-bg);
  color: inherit;
  box-shadow: 2px 2px 10px 0 var(--card-shadow);
  transition: background var(--vp-ct), box-shadow var(--vp-ct);
}
.vp-card:hover {
  background: var(--vp-bgl);
  text-decoration: none !important;
}
.vp-card hr {
  margin: 0.25em 0;
}
.vp-card-logo {
  width: 3em;
  height: 3em;
  margin-inline-end: 1em;
  border-radius: 50%;
}
.vp-card-content {
  flex: 1;
}
.vp-card-title {
  font-weight: 500;
  font-size: 1.1em;
}
.vp-card-desc {
  color: #888;
  font-size: 0.9em;
  line-height: 1.5;
  transition: color var(--vp-ct);
}
.vp-card-container {
  display: flex;
  flex-wrap: wrap;
  place-content: stretch center;
  align-items: stretch;
}
.vp-card-container .vp-card {
  flex-basis: calc(50% - 3rem);
  max-width: unset;
  margin: 0.5rem;
}
@media (max-width: 959px) {
  .vp-card-container .vp-card {
    flex-basis: 100%;
  }
}
@media (max-width: 719px) {
  .vp-card-container .vp-card {
    font-size: 0.95rem;
  }
}
@media (max-width: 419px) {
  .vp-card-container .vp-card {
    font-size: 0.9rem;
  }
}/** ensure default theme color */
/** shadow */
/* constants */
/* responsive breakpoints */
/* rtl */
/* Content Class */
/** dark mode selectors */
/* Color list */
@media screen {
  .sr-only {
    position: absolute;
    overflow: hidden;
    clip: rect 0, 0, 0, 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
  }
}
@media print {
  .sr-only {
    display: none;
  }
}
.demo-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  margin-top: 20px;
}
.card-container {
  width: 17.5rem;
  height: 6.25rem;
  background-color: #f0f0f0;
  margin: 10px;
  padding: 20px;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
}
.card-container .card-icon {
    width: 3.75rem;
    height: 3.75rem;
    background-color: #ccc;
    border-radius: 50%;
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* margin: 20px auto; */
.card-container .card-icon img {
      max-height: 100%;
      cursor: pointer;
}
.card-container .card-Info {
    width: calc(100% - 3.75rem - 10px);
    text-align: left;
}
.card-container .card-Info .card-title {
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 1.125rem;
      font-weight: bold;
      color: #282a2d !important;
}
.card-container .card-Info .card-remark {
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 14px;
      color: #6c757d !important;
}