@code-coaching/vuetiful 0.0.0

package/dist/styles/all.css

@@ -0,0 +1,4645 @@
+@import"https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap";
+
+/* Stylesheet: all.css */
+
+/* Import AFTER your theme, but BEFORE your global stylesheet. */
+
+/* NOTE: The order shown below is required */
+
+/* Tailwind Directives */
+
+/* Stylesheet: tailwind.css */
+
+/* 
+https://tailwindcss.com/docs/functions-and-directives
+
+IMPORTANT:
+Be sure to remove these directives from your global CSS stylesheet.
+
+Tailwind directives should only be included ONCE per project.
+These directives should preceed ALL Skeleton stylesheets.
+*/
+
+/* ! tailwindcss v3.2.7 | 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.
+*/
+
+html {
+  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: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  /* 4 */
+  font-feature-settings: normal;
+  /* 5 */
+}
+
+/*
+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. 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-size: 1em;
+  /* 2 */
+}
+
+/*
+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-size: 100%;
+  /* 1 */
+  font-weight: inherit;
+  /* 1 */
+  line-height: 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,
+[type='button'],
+[type='reset'],
+[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;
+}
+
+/*
+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;
+}
+
+/* === Body Styles === */
+
+body{
+  background-color: rgb(var(--color-surface-50));
+}
+
+.dark body{
+  background-color:rgb(var(--color-surface-900));
+}
+
+/* === Selection === */
+
+::-moz-selection{
+  background-color: rgb(var(--color-primary-500) / 0.3);
+}
+
+::selection{
+  background-color: rgb(var(--color-primary-500) / 0.3);
+}
+
+/* === Focus === */
+
+/* Outline (do not change) */
+
+/* http://www.outlinenone.com/ */
+
+/* Mobile tap highlight */
+
+/* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */
+
+html {
+  -webkit-tap-highlight-color: rgba(128, 128, 128, 0.5);
+}
+
+/* === Scrollbars === */
+
+::-webkit-scrollbar{
+  width: 0.5rem;
+}
+
+::-webkit-scrollbar-track{
+  padding-left: 1px;
+  padding-right: 1px;
+  background-color: rgb(var(--color-surface-50)) !important;
+}
+
+.dark ::-webkit-scrollbar-track{
+  background-color: rgb(var(--color-surface-900)) !important;
+}
+
+::-webkit-scrollbar-thumb{
+  background-color: rgb(var(--color-surface-400));
+}
+
+.dark ::-webkit-scrollbar-thumb{
+  background-color: rgb(var(--color-surface-500));
+}
+
+::-webkit-scrollbar-thumb{
+  border-radius: var(--theme-rounded-base);
+}
+
+.dark ::-webkit-scrollbar-thumb{
+  background-color:rgb(var(--color-surface-500))
+}
+
+::-webkit-scrollbar-thumb{
+  border-radius:var(--theme-rounded-base)
+}
+
+/* Firefox */
+
+/* https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color#browser_compatibility */
+
+html {
+  scrollbar-color: rgba(0, 0, 0, 0.2) rgba(255, 255, 255, 0.05);
+}
+
+html.dark {
+  scrollbar-color: rgba(255, 255, 255, 0.1) rgba(0, 0, 0, 0.05);
+}
+
+/* Hide Scrollbars */
+
+/* === Horizontal Rules === */
+
+hr:not(.divider){
+  display: block;
+  border-top-width: 1px;
+  border-style: solid;
+  border-color: rgb(var(--color-surface-300));
+}
+
+.dark hr:not(.divider){
+  border-color:rgb(var(--color-surface-600));
+}
+
+body{
+  font-family: var(--theme-font-family-base);
+  color: rgba(var(--theme-font-color-base));
+}
+
+.dark body{
+  color:rgba(var(--theme-font-color-dark));
+}
+
+/* === Headings === */
+
+h1:not(.unstyled):is(:not(.prose *)){
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+  font-family: var(--theme-font-family-heading);
+}
+
+@media (min-width: 768px){
+  h1:not(.unstyled):is(:not(.prose *)){
+    font-size: 3rem;
+    line-height: 1;
+  }
+}
+
+h2:not(.unstyled):is(:not(.prose *)){
+  font-size: 1.5rem;
+  line-height: 2rem;
+  font-family: var(--theme-font-family-heading);
+}
+
+@media (min-width: 768px){
+  h2:not(.unstyled):is(:not(.prose *)){
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+  }
+}
+
+h3:not(.unstyled):is(:not(.prose *)){
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+  font-family: var(--theme-font-family-heading);
+}
+
+@media (min-width: 768px){
+  h3:not(.unstyled):is(:not(.prose *)){
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+}
+
+h4:not(.unstyled):is(:not(.prose *)){
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  font-family: var(--theme-font-family-heading);
+}
+
+@media (min-width: 768px){
+  h4:not(.unstyled):is(:not(.prose *)){
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+}
+
+h5:not(.unstyled):is(:not(.prose *)){
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-family: var(--theme-font-family-heading);
+}
+
+@media (min-width: 768px){
+  h5:not(.unstyled):is(:not(.prose *)){
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+  }
+}
+
+h6:not(.unstyled):is(:not(.prose *)){
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-family: var(--theme-font-family-heading);
+}
+
+@media (min-width: 768px){
+  h6:not(.unstyled):is(:not(.prose *)){
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+}
+
+/* === Elements === */
+
+p:not(.unstyled):is(:not(.prose *)) {
+  /* NOTE: do not hardcode a text color style here. It makes color overrides difficult. */
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+a:not(.unstyled):not(.permalink):is(:not(.prose *)):not(.btn):not(.btn-icon):not(.app-bar a):not(.logo-item):not(a.card):not(
+			.list-nav a
+		){
+  --tw-text-opacity: 1;
+  color: rgb(var(--color-primary-700) / var(--tw-text-opacity));
+  text-decoration-line: underline;
+}
+
+a:not(.unstyled):not(.permalink):is(:not(.prose *)):not(.btn):not(.btn-icon):not(.app-bar a):not(.logo-item):not(a.card):not(
+			.list-nav a
+		):hover{
+  --tw-brightness: brightness(1.1);
+  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);
+}
+
+.dark a:not(.unstyled):not(.permalink):is(:not(.prose *)):not(.btn):not(.btn-icon):not(.app-bar a):not(.logo-item):not(a.card):not(
+			.list-nav a
+		){
+  --tw-text-opacity: 1;
+  color: rgb(var(--color-primary-500) / var(--tw-text-opacity));
+}
+
+blockquote:not(.unstyled):is(:not(.prose *)){
+  border-left-width: 8px;
+  --tw-border-opacity: 1;
+  border-left-color: rgb(var(--color-secondary-500) / var(--tw-border-opacity));
+  padding-right: 1rem;
+  padding-left: 1rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-style: italic;
+  color: rgba(var(--theme-font-color-base));
+}
+
+.dark blockquote:not(.unstyled):is(:not(.prose *)){
+  color:rgba(var(--theme-font-color-dark));
+}
+
+/* Keyboard */
+
+kbd:not(.unstyled):is(:not(.prose *)){
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 700;
+  border-radius: 0.25rem;
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  background-color: rgb(var(--color-surface-300));
+}
+
+.dark kbd:not(.unstyled):is(:not(.prose *)){
+  background-color: rgb(var(--color-surface-600));
+}
+
+kbd:not(.unstyled):is(:not(.prose *)){
+  border-radius:.25rem
+}
+
+.dark kbd:not(.unstyled):is(:not(.prose *)){
+  background-color:rgb(var(--color-surface-600))
+}
+
+kbd:not(.unstyled):is(:not(.prose *)){
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-inset: inset;
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(var(--color-surface-900) / var(--tw-ring-opacity));
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);
+  border-bottom-width: 2px;
+  --tw-border-opacity: 1;
+  border-color: rgb(var(--color-surface-900) / var(--tw-border-opacity));
+}
+
+/* === Code Blocks === */
+
+/* For use outside of Skeleton's CodeBlock component */
+
+pre:not(.unstyled):not(.code-block pre):is(:not(.prose *)){
+  overflow-x: auto;
+  white-space: pre-wrap;
+  background-color: rgb(23 23 23 / 0.9);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+  padding:1rem;
+  border-radius:var(--theme-rounded-container);
+}
+
+code:not(.unstyled):is(:not(.prose *)):is(:not(pre *)){
+  white-space: nowrap;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  --tw-text-opacity: 1;
+  color: rgb(var(--color-primary-700) / var(--tw-text-opacity));
+}
+
+.dark code:not(.unstyled):is(:not(.prose *)):is(:not(pre *)){
+  --tw-text-opacity: 1;
+  color: rgb(var(--color-primary-400) / var(--tw-text-opacity));
+}
+
+code:not(.unstyled):is(:not(.prose *)):is(:not(pre *)){
+  background-color: rgb(var(--color-primary-500) / 0.3);
+}
+
+.dark code:not(.unstyled):is(:not(.prose *)):is(:not(pre *)){
+  background-color: rgb(var(--color-primary-500) / 0.2);
+}
+
+code:not(.unstyled):is(:not(.prose *)):is(:not(pre *)){
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+  border-radius:.25rem;
+}
+
+/* === Insertions / Deletions  ==== */
+
+/* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins */
+
+/* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del */
+
+ins:not(.unstyled):is(:not(.prose *)),
+	del:not(.unstyled):is(:not(.prose *)){
+  position: relative;
+  display: block;
+  padding: 0.125rem;
+  padding-left: 1.25rem;
+  text-decoration: none;
+}
+
+ins:not(.unstyled):is(:not(.prose *))::before,
+	del:not(.unstyled):is(:not(.prose *))::before{
+  left: 0.25rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  position:absolute;
+}
+
+ins:not(.unstyled):is(:not(.prose *))::before {
+  content: '+';
+}
+
+del:not(.unstyled):is(:not(.prose *))::before {
+  content: '−';
+}
+
+ins:not(.unstyled):is(:not(.prose *)){
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--color-success-500) / var(--tw-bg-opacity));
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  color: rgb(var(--on-success));
+}
+
+del:not(.unstyled):is(:not(.prose *)){
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--color-error-500) / var(--tw-bg-opacity));
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  color: rgb(var(--on-error));
+}
+
+/* === Date/Time === */
+
+/* Useful for displaying timestamps */
+
+time:not(.unstyled):is(:not(.prose *)){
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  --tw-text-opacity: 1;
+  color: rgb(var(--color-surface-500) / var(--tw-text-opacity));
+}
+
+.dark time:not(.unstyled):is(:not(.prose *)){
+  --tw-text-opacity: 1;
+  color: rgb(var(--color-surface-400) / var(--tw-text-opacity));
+}
+
+/* === Resets === */
+
+fieldset,
+	legend,
+	label{
+  display: block;
+}
+
+/* Placeholders */
+
+::-moz-placeholder{
+  color: rgb(var(--color-surface-500));
+}
+
+.dark ::-moz-placeholder{
+  color:rgb(var(--color-surface-400));
+}
+
+::-moz-placeholder{
+  color: rgb(var(--color-surface-500));
+}
+
+::placeholder{
+  color: rgb(var(--color-surface-500));
+}
+
+.dark ::-moz-placeholder{
+  color:rgb(var(--color-surface-400));
+}
+
+.dark ::placeholder{
+  color:rgb(var(--color-surface-400));
+}
+
+/* Date Calendar Picker (Webkit) */
+
+.dark ::-webkit-calendar-picker-indicator{
+  --tw-invert: invert(100%);
+  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);
+}
+
+/* Progress Bar */
+
+progress {
+  webkit-appearance: none;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+          appearance: none;
+  height: 0.5rem;
+  overflow: hidden;
+  width:100%;
+  border-radius:var(--theme-rounded-base);
+  background-color: rgb(var(--color-surface-400));
+}
+
+.dark progress{
+  background-color:rgb(var(--color-surface-500));
+}
+
+progress::-webkit-progress-bar{
+  background-color: rgb(var(--color-surface-400));
+}
+
+.dark progress::-webkit-progress-bar{
+  background-color:rgb(var(--color-surface-500));
+}
+
+progress::-webkit-progress-value{
+  background-color: rgb(var(--color-surface-900));
+}
+
+.dark progress::-webkit-progress-value{
+  background-color:rgb(var(--color-surface-50));
+}
+
+::-moz-progress-bar{
+  background-color: rgb(var(--color-surface-900));
+}
+
+.dark ::-moz-progress-bar{
+  background-color:rgb(var(--color-surface-50));
+}
+
+:indeterminate::-moz-progress-bar {
+  width: 0;
+}
+
+/* Range Input */
+
+/* https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color */
+
+[type='range']{
+  accent-color: rgb(var(--color-surface-900) / 1);
+  width:100%;
+}
+
+.dark [type='range']{
+  accent-color: rgb(var(--color-surface-50) / 1);
+}
+
+/* === Text Labeling === */
+
+/* === Core Styles === */
+
+/* Base Inputs */
+
+/* Container Inputs */
+
+/* Select (size/multiple) */
+
+/* Checkbox & Radio */
+
+/* === Specialized === */
+
+/* File Inputs */
+
+/* Color Picker */
+
+/* https://stackoverflow.com/questions/11167281/webkit-css-to-control-the-box-around-the-color-in-an-inputtype-color */
+
+/* === States === */
+
+/* === Input Groups === */
+
+/* === Variants === */
+
+/* success */
+
+/* warning */
+
+/* error */
+
+/* === Variants === */
+
+/* Material */
+
+*, ::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-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:  ;
+}
+
+::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-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:  ;
+}
+
+/* === Variants === */
+
+/* Glass */
+
+/* === Auto-Responsive === */
+
+/* === States === */
+
+button:disabled{
+  cursor: not-allowed !important;
+  opacity: 0.5 !important;
+}
+
+button:disabled:hover{
+  --tw-brightness: brightness(1);
+  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);
+}
+
+button:disabled:active{
+  --tw-scale-x: 1;
+  --tw-scale-y: 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));
+}
+
+/* === Button === */
+
+/* Standard button/anchor tag elements. */
+
+.btn {
+  /* Size (match base)  */
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+  padding-top: 9px;
+  padding-bottom: 9px;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  /* Core */
+  white-space: nowrap;
+  text-align:center;
+  /* Flex Columns */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.btn > :not([hidden]) ~ :not([hidden]){
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.btn{
+  align-items:center;
+  justify-content:center
+  /* States */
+}
+
+.btn:hover{
+  --tw-brightness: brightness(1.15);
+  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);
+}
+
+.btn {
+  /* Transitions */
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  transition-property:all;
+  transition-timing-function:cubic-bezier(.4,0,.2,1);
+  transition-duration:.15s;
+  border-radius:var(--theme-rounded-base);
+}
+
+.btn:active{
+  --tw-scale-x: 95%;
+  --tw-scale-y: 95%;
+  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));
+  --tw-brightness: brightness(.9);
+  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);
+}
+
+/* Button: Sizes */
+
+/* Note: Default values are built into `.btn` */
+
+/* === Icon Button === */
+
+/* A circular button meant for housing icons. */
+
+/* Icon Button: Size */
+
+/* File Input Button */
+
+input[type='file']:not(.file-dropzone-input)::file-selector-button {
+  /* Size (match base)  */
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+  padding-top: 9px;
+  padding-bottom: 9px;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  /* Core */
+  white-space: nowrap;
+  text-align:center;
+  /* Flex Columns */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+input[type='file']:not(.file-dropzone-input)::file-selector-button > :not([hidden]) ~ :not([hidden]){
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+input[type='file']:not(.file-dropzone-input)::file-selector-button{
+  align-items:center;
+  justify-content:center
+  /* States */
+}
+
+input[type='file']:not(.file-dropzone-input)::file-selector-button:hover{
+  --tw-brightness: brightness(1.15);
+  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);
+}
+
+input[type='file']:not(.file-dropzone-input)::file-selector-button {
+  /* Transitions */
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  transition-property:all;
+  transition-timing-function:cubic-bezier(.4,0,.2,1);
+  transition-duration:.15s;
+  border-radius:var(--theme-rounded-base);
+}
+
+input[type='file']:not(.file-dropzone-input)::file-selector-button:active{
+  --tw-scale-x: 95%;
+  --tw-scale-y: 95%;
+  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));
+  --tw-brightness: brightness(.9);
+  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);
+}
+
+input[type='file']:not(.file-dropzone-input)::file-selector-button{
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  background-color: rgb(var(--color-surface-900));
+}
+
+.dark input[type='file']:not(.file-dropzone-input)::file-selector-button{
+  background-color: rgb(var(--color-surface-50));
+}
+
+input[type='file']:not(.file-dropzone-input)::file-selector-button{
+  color: rgb(var(--color-surface-50));
+}
+
+.dark input[type='file']:not(.file-dropzone-input)::file-selector-button{
+  background-color:rgb(var(--color-surface-50));
+  color:rgb(var(--color-surface-900));
+}
+
+input[type='file']:not(.file-dropzone-input)::file-selector-button{
+  margin-right: 0.5rem;
+  border-width: 0px;
+}
+
+/* === Button Groups === */
+
+/* Button / Anchors */
+
+/* Set Neutral Divider */
+
+/* === Regions === */
+
+/* === States === */
+
+/* === Lists (Parents) === */
+
+.list,
+	.list-dl,
+	.list-nav ul {
+  /* List Style */
+  list-style-type: none;
+  /* Spacing */
+}
+
+.list > :not([hidden]) ~ :not([hidden]),
+	.list-dl > :not([hidden]) ~ :not([hidden]),
+	.list-nav ul > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
+}
+
+/* === List Items (Children) === */
+
+.list-nav a,
+	.list-nav button,
+	.list-option{
+  display: flex;
+  align-items: center;
+}
+
+.list-nav a > :not([hidden]) ~ :not([hidden]),
+	.list-nav button > :not([hidden]) ~ :not([hidden]),
+	.list-option > :not([hidden]) ~ :not([hidden]){
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1rem * var(--tw-space-x-reverse));
+  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.list-nav a,
+	.list-nav button,
+	.list-option{
+  white-space: nowrap;
+  display:flex;
+  align-items:center;
+  /* Padding */
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  /* Hover */
+}
+
+.list-nav a:hover,
+	.list-nav button:hover,
+	.list-option:hover{
+  background-color: rgb(var(--color-primary-500) / 0.1);
+}
+
+.list-nav a,
+	.list-nav button,
+	.list-option {
+  /* Cursor */
+  cursor:pointer;
+  /* Theme: Rounded */
+  border-radius:var(--theme-rounded-base);
+}
+
+/* === Logo Item (Child) === */
+
+/* === States === */
+
+/* === Base === */
+
+/* === Shapes === */
+
+/* === Hover Styles ==== */
+
+/* === Sort Styles ==== */
+
+[data-sort]{
+  cursor:pointer;
+}
+
+[data-sort]:hover:hover{
+  background-color: rgb(var(--color-primary-500) / 0.1);
+}
+
+[data-sort] {
+  /* Sort Icon - invisible by default */
+}
+
+[data-sort]::after{
+  margin-left: 0.5rem !important;
+  opacity: 0;
+  --tw-content: '↓' !important;
+  content: var(--tw-content) !important;
+}
+
+/* === Table Head === */
+
+/* === Table Body === */
+
+/* === Table Foot === */
+
+/* === Rows Specific === */
+
+/* === Cells Specific === */
+
+/* Source: https://stackoverflow.com/questions/11267154/fit-cell-width-to-content */
+
+/* Outline -- supports ringed and host variants */
+
+/* ------------------------ */
+
+/* Filled */
+
+/* Ringed */
+
+/* Ghost */
+
+/* Soft */
+
+/* Glass */
+
+.absolute{
+  position: absolute;
+}
+
+.-m-4{
+  margin: -1rem;
+}
+
+.flex{
+  display: flex;
+}
+
+.aspect-square{
+  aspect-ratio: 1 / 1;
+}
+
+.h-6{
+  height: 1.5rem;
+}
+
+.h-fit{
+  height: -moz-fit-content;
+  height: fit-content;
+}
+
+.h-full{
+  height: 100%;
+}
+
+.max-h-64{
+  max-height: 16rem;
+}
+
+.w-12{
+  width: 3rem;
+}
+
+.w-24{
+  width: 6rem;
+}
+
+.w-60{
+  width: 15rem;
+}
+
+.w-\[70\%\]{
+  width: 70%;
+}
+
+.w-fit{
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+.w-full{
+  width: 100%;
+}
+
+.translate-x-\[100\%\]{
+  --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));
+}
+
+.scale-\[0\.8\]{
+  --tw-scale-x: 0.8;
+  --tw-scale-y: 0.8;
+  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;
+}
+
+.flex-col{
+  flex-direction: column;
+}
+
+.items-center{
+  align-items: center;
+}
+
+.justify-center{
+  justify-content: center;
+}
+
+.justify-between{
+  justify-content: space-between;
+}
+
+.gap-4{
+  gap: 1rem;
+}
+
+.space-y-4 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+}
+
+.overflow-y-auto{
+  overflow-y: auto;
+}
+
+.rounded{
+  border-radius: 0.25rem;
+}
+
+.bg-primary-50{
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--color-primary-50) / var(--tw-bg-opacity));
+}
+
+.bg-primary-900{
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--color-primary-900) / var(--tw-bg-opacity));
+}
+
+.bg-surface-200{
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--color-surface-200) / var(--tw-bg-opacity));
+}
+
+.bg-surface-50{
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--color-surface-50) / var(--tw-bg-opacity));
+}
+
+.bg-surface-900{
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--color-surface-900) / var(--tw-bg-opacity));
+}
+
+.p-2{
+  padding: 0.5rem;
+}
+
+.p-4{
+  padding: 1rem;
+}
+
+.text-center{
+  text-align: center;
+}
+
+.capitalize{
+  text-transform: capitalize;
+}
+
+.text-primary-50{
+  --tw-text-opacity: 1;
+  color: rgb(var(--color-primary-50) / var(--tw-text-opacity));
+}
+
+.text-primary-900{
+  --tw-text-opacity: 1;
+  color: rgb(var(--color-primary-900) / var(--tw-text-opacity));
+}
+
+.text-surface-50{
+  --tw-text-opacity: 1;
+  color: rgb(var(--color-surface-50) / var(--tw-text-opacity));
+}
+
+.text-surface-900{
+  --tw-text-opacity: 1;
+  color: rgb(var(--color-surface-900) / var(--tw-text-opacity));
+}
+
+.shadow-xl{
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.ring{
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.ring-\[1px\]{
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.ring-primary-500\/30{
+  --tw-ring-color: rgb(var(--color-primary-500) / 0.3);
+}
+
+.ring-surface-500\/30{
+  --tw-ring-color: rgb(var(--color-surface-500) / 0.3);
+}
+
+.transition-all{
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.duration-\[200ms\]{
+  transition-duration: 200ms;
+}
+
+.dark .bg-primary-backdrop-token{
+  background-color: rgb(var(--color-primary-900) / 0.7);
+}
+
+.dark .bg-primary-50-900-token{
+  background-color: rgb(var(--color-primary-900));
+}
+
+.dark .bg-primary-100-800-token{
+  background-color: rgb(var(--color-primary-800));
+}
+
+.dark .bg-primary-200-700-token{
+  background-color: rgb(var(--color-primary-700));
+}
+
+.dark .bg-primary-300-600-token{
+  background-color: rgb(var(--color-primary-600));
+}
+
+.dark .bg-primary-400-500-token{
+  background-color: rgb(var(--color-primary-500));
+}
+
+.dark .bg-primary-900-50-token{
+  background-color: rgb(var(--color-primary-50));
+}
+
+.dark .bg-primary-800-100-token{
+  background-color: rgb(var(--color-primary-100));
+}
+
+.dark .bg-primary-700-200-token{
+  background-color: rgb(var(--color-primary-200));
+}
+
+.dark .bg-primary-600-300-token{
+  background-color: rgb(var(--color-primary-300));
+}
+
+.dark .bg-primary-500-400-token{
+  background-color: rgb(var(--color-primary-400));
+}
+
+.dark .bg-secondary-backdrop-token{
+  background-color: rgb(var(--color-secondary-900) / 0.7);
+}
+
+.dark .bg-secondary-50-900-token{
+  background-color: rgb(var(--color-secondary-900));
+}
+
+.dark .bg-secondary-100-800-token{
+  background-color: rgb(var(--color-secondary-800));
+}
+
+.dark .bg-secondary-200-700-token{
+  background-color: rgb(var(--color-secondary-700));
+}
+
+.dark .bg-secondary-300-600-token{
+  background-color: rgb(var(--color-secondary-600));
+}
+
+.dark .bg-secondary-400-500-token{
+  background-color: rgb(var(--color-secondary-500));
+}
+
+.dark .bg-secondary-900-50-token{
+  background-color: rgb(var(--color-secondary-50));
+}
+
+.dark .bg-secondary-800-100-token{
+  background-color: rgb(var(--color-secondary-100));
+}
+
+.dark .bg-secondary-700-200-token{
+  background-color: rgb(var(--color-secondary-200));
+}
+
+.dark .bg-secondary-600-300-token{
+  background-color: rgb(var(--color-secondary-300));
+}
+
+.dark .bg-secondary-500-400-token{
+  background-color: rgb(var(--color-secondary-400));
+}
+
+.dark .bg-tertiary-backdrop-token{
+  background-color: rgb(var(--color-tertiary-900) / 0.7);
+}
+
+.dark .bg-tertiary-50-900-token{
+  background-color: rgb(var(--color-tertiary-900));
+}
+
+.dark .bg-tertiary-100-800-token{
+  background-color: rgb(var(--color-tertiary-800));
+}
+
+.dark .bg-tertiary-200-700-token{
+  background-color: rgb(var(--color-tertiary-700));
+}
+
+.dark .bg-tertiary-300-600-token{
+  background-color: rgb(var(--color-tertiary-600));
+}
+
+.dark .bg-tertiary-400-500-token{
+  background-color: rgb(var(--color-tertiary-500));
+}
+
+.dark .bg-tertiary-900-50-token{
+  background-color: rgb(var(--color-tertiary-50));
+}
+
+.dark .bg-tertiary-800-100-token{
+  background-color: rgb(var(--color-tertiary-100));
+}
+
+.dark .bg-tertiary-700-200-token{
+  background-color: rgb(var(--color-tertiary-200));
+}
+
+.dark .bg-tertiary-600-300-token{
+  background-color: rgb(var(--color-tertiary-300));
+}
+
+.dark .bg-tertiary-500-400-token{
+  background-color: rgb(var(--color-tertiary-400));
+}
+
+.dark .bg-success-backdrop-token{
+  background-color: rgb(var(--color-success-900) / 0.7);
+}
+
+.dark .bg-success-50-900-token{
+  background-color: rgb(var(--color-success-900));
+}
+
+.dark .bg-success-100-800-token{
+  background-color: rgb(var(--color-success-800));
+}
+
+.dark .bg-success-200-700-token{
+  background-color: rgb(var(--color-success-700));
+}
+
+.dark .bg-success-300-600-token{
+  background-color: rgb(var(--color-success-600));
+}
+
+.dark .bg-success-400-500-token{
+  background-color: rgb(var(--color-success-500));
+}
+
+.dark .bg-success-900-50-token{
+  background-color: rgb(var(--color-success-50));
+}
+
+.dark .bg-success-800-100-token{
+  background-color: rgb(var(--color-success-100));
+}
+
+.dark .bg-success-700-200-token{
+  background-color: rgb(var(--color-success-200));
+}
+
+.dark .bg-success-600-300-token{
+  background-color: rgb(var(--color-success-300));
+}
+
+.dark .bg-success-500-400-token{
+  background-color: rgb(var(--color-success-400));
+}
+
+.dark .bg-warning-backdrop-token{
+  background-color: rgb(var(--color-warning-900) / 0.7);
+}
+
+.dark .bg-warning-50-900-token{
+  background-color: rgb(var(--color-warning-900));
+}
+
+.dark .bg-warning-100-800-token{
+  background-color: rgb(var(--color-warning-800));
+}
+
+.dark .bg-warning-200-700-token{
+  background-color: rgb(var(--color-warning-700));
+}
+
+.dark .bg-warning-300-600-token{
+  background-color: rgb(var(--color-warning-600));
+}
+
+.dark .bg-warning-400-500-token{
+  background-color: rgb(var(--color-warning-500));
+}
+
+.dark .bg-warning-900-50-token{
+  background-color: rgb(var(--color-warning-50));
+}
+
+.dark .bg-warning-800-100-token{
+  background-color: rgb(var(--color-warning-100));
+}
+
+.dark .bg-warning-700-200-token{
+  background-color: rgb(var(--color-warning-200));
+}
+
+.dark .bg-warning-600-300-token{
+  background-color: rgb(var(--color-warning-300));
+}
+
+.dark .bg-warning-500-400-token{
+  background-color: rgb(var(--color-warning-400));
+}
+
+.dark .bg-error-backdrop-token{
+  background-color: rgb(var(--color-error-900) / 0.7);
+}
+
+.dark .bg-error-50-900-token{
+  background-color: rgb(var(--color-error-900));
+}
+
+.dark .bg-error-100-800-token{
+  background-color: rgb(var(--color-error-800));
+}
+
+.dark .bg-error-200-700-token{
+  background-color: rgb(var(--color-error-700));
+}
+
+.dark .bg-error-300-600-token{
+  background-color: rgb(var(--color-error-600));
+}
+
+.dark .bg-error-400-500-token{
+  background-color: rgb(var(--color-error-500));
+}
+
+.dark .bg-error-900-50-token{
+  background-color: rgb(var(--color-error-50));
+}
+
+.dark .bg-error-800-100-token{
+  background-color: rgb(var(--color-error-100));
+}
+
+.dark .bg-error-700-200-token{
+  background-color: rgb(var(--color-error-200));
+}
+
+.dark .bg-error-600-300-token{
+  background-color: rgb(var(--color-error-300));
+}
+
+.dark .bg-error-500-400-token{
+  background-color: rgb(var(--color-error-400));
+}
+
+.dark .bg-surface-backdrop-token{
+  background-color: rgb(var(--color-surface-900) / 0.7);
+}
+
+.dark .bg-surface-50-900-token{
+  background-color: rgb(var(--color-surface-900));
+}
+
+.dark .bg-surface-100-800-token{
+  background-color: rgb(var(--color-surface-800));
+}
+
+.dark .bg-surface-200-700-token{
+  background-color: rgb(var(--color-surface-700));
+}
+
+.dark .bg-surface-300-600-token{
+  background-color: rgb(var(--color-surface-600));
+}
+
+.dark .bg-surface-400-500-token{
+  background-color: rgb(var(--color-surface-500));
+}
+
+.dark .bg-surface-900-50-token{
+  background-color: rgb(var(--color-surface-50));
+}
+
+.dark .bg-surface-800-100-token{
+  background-color: rgb(var(--color-surface-100));
+}
+
+.dark .bg-surface-700-200-token{
+  background-color: rgb(var(--color-surface-200));
+}
+
+.dark .bg-surface-600-300-token{
+  background-color: rgb(var(--color-surface-300));
+}
+
+.dark .bg-surface-500-400-token{
+  background-color: rgb(var(--color-surface-400));
+}
+
+.dark .border-primary-50-900-token{
+  border-color: rgb(var(--color-primary-900));
+}
+
+.dark .border-primary-100-800-token{
+  border-color: rgb(var(--color-primary-800));
+}
+
+.dark .border-primary-200-700-token{
+  border-color: rgb(var(--color-primary-700));
+}
+
+.dark .border-primary-300-600-token{
+  border-color: rgb(var(--color-primary-600));
+}
+
+.dark .border-primary-400-500-token{
+  border-color: rgb(var(--color-primary-500));
+}
+
+.dark .border-primary-900-50-token{
+  border-color: rgb(var(--color-primary-50));
+}
+
+.dark .border-primary-800-100-token{
+  border-color: rgb(var(--color-primary-100));
+}
+
+.dark .border-primary-700-200-token{
+  border-color: rgb(var(--color-primary-200));
+}
+
+.dark .border-primary-600-300-token{
+  border-color: rgb(var(--color-primary-300));
+}
+
+.dark .border-primary-500-400-token{
+  border-color: rgb(var(--color-primary-400));
+}
+
+.dark .border-secondary-50-900-token{
+  border-color: rgb(var(--color-secondary-900));
+}
+
+.dark .border-secondary-100-800-token{
+  border-color: rgb(var(--color-secondary-800));
+}
+
+.dark .border-secondary-200-700-token{
+  border-color: rgb(var(--color-secondary-700));
+}
+
+.dark .border-secondary-300-600-token{
+  border-color: rgb(var(--color-secondary-600));
+}
+
+.dark .border-secondary-400-500-token{
+  border-color: rgb(var(--color-secondary-500));
+}
+
+.dark .border-secondary-900-50-token{
+  border-color: rgb(var(--color-secondary-50));
+}
+
+.dark .border-secondary-800-100-token{
+  border-color: rgb(var(--color-secondary-100));
+}
+
+.dark .border-secondary-700-200-token{
+  border-color: rgb(var(--color-secondary-200));
+}
+
+.dark .border-secondary-600-300-token{
+  border-color: rgb(var(--color-secondary-300));
+}
+
+.dark .border-secondary-500-400-token{
+  border-color: rgb(var(--color-secondary-400));
+}
+
+.dark .border-tertiary-50-900-token{
+  border-color: rgb(var(--color-tertiary-900));
+}
+
+.dark .border-tertiary-100-800-token{
+  border-color: rgb(var(--color-tertiary-800));
+}
+
+.dark .border-tertiary-200-700-token{
+  border-color: rgb(var(--color-tertiary-700));
+}
+
+.dark .border-tertiary-300-600-token{
+  border-color: rgb(var(--color-tertiary-600));
+}
+
+.dark .border-tertiary-400-500-token{
+  border-color: rgb(var(--color-tertiary-500));
+}
+
+.dark .border-tertiary-900-50-token{
+  border-color: rgb(var(--color-tertiary-50));
+}
+
+.dark .border-tertiary-800-100-token{
+  border-color: rgb(var(--color-tertiary-100));
+}
+
+.dark .border-tertiary-700-200-token{
+  border-color: rgb(var(--color-tertiary-200));
+}
+
+.dark .border-tertiary-600-300-token{
+  border-color: rgb(var(--color-tertiary-300));
+}
+
+.dark .border-tertiary-500-400-token{
+  border-color: rgb(var(--color-tertiary-400));
+}
+
+.dark .border-success-50-900-token{
+  border-color: rgb(var(--color-success-900));
+}
+
+.dark .border-success-100-800-token{
+  border-color: rgb(var(--color-success-800));
+}
+
+.dark .border-success-200-700-token{
+  border-color: rgb(var(--color-success-700));
+}
+
+.dark .border-success-300-600-token{
+  border-color: rgb(var(--color-success-600));
+}
+
+.dark .border-success-400-500-token{
+  border-color: rgb(var(--color-success-500));
+}
+
+.dark .border-success-900-50-token{
+  border-color: rgb(var(--color-success-50));
+}
+
+.dark .border-success-800-100-token{
+  border-color: rgb(var(--color-success-100));
+}
+
+.dark .border-success-700-200-token{
+  border-color: rgb(var(--color-success-200));
+}
+
+.dark .border-success-600-300-token{
+  border-color: rgb(var(--color-success-300));
+}
+
+.dark .border-success-500-400-token{
+  border-color: rgb(var(--color-success-400));
+}
+
+.dark .border-warning-50-900-token{
+  border-color: rgb(var(--color-warning-900));
+}
+
+.dark .border-warning-100-800-token{
+  border-color: rgb(var(--color-warning-800));
+}
+
+.dark .border-warning-200-700-token{
+  border-color: rgb(var(--color-warning-700));
+}
+
+.dark .border-warning-300-600-token{
+  border-color: rgb(var(--color-warning-600));
+}
+
+.dark .border-warning-400-500-token{
+  border-color: rgb(var(--color-warning-500));
+}
+
+.dark .border-warning-900-50-token{
+  border-color: rgb(var(--color-warning-50));
+}
+
+.dark .border-warning-800-100-token{
+  border-color: rgb(var(--color-warning-100));
+}
+
+.dark .border-warning-700-200-token{
+  border-color: rgb(var(--color-warning-200));
+}
+
+.dark .border-warning-600-300-token{
+  border-color: rgb(var(--color-warning-300));
+}
+
+.dark .border-warning-500-400-token{
+  border-color: rgb(var(--color-warning-400));
+}
+
+.dark .border-error-50-900-token{
+  border-color: rgb(var(--color-error-900));
+}
+
+.dark .border-error-100-800-token{
+  border-color: rgb(var(--color-error-800));
+}
+
+.dark .border-error-200-700-token{
+  border-color: rgb(var(--color-error-700));
+}
+
+.dark .border-error-300-600-token{
+  border-color: rgb(var(--color-error-600));
+}
+
+.dark .border-error-400-500-token{
+  border-color: rgb(var(--color-error-500));
+}
+
+.dark .border-error-900-50-token{
+  border-color: rgb(var(--color-error-50));
+}
+
+.dark .border-error-800-100-token{
+  border-color: rgb(var(--color-error-100));
+}
+
+.dark .border-error-700-200-token{
+  border-color: rgb(var(--color-error-200));
+}
+
+.dark .border-error-600-300-token{
+  border-color: rgb(var(--color-error-300));
+}
+
+.dark .border-error-500-400-token{
+  border-color: rgb(var(--color-error-400));
+}
+
+.dark .border-surface-50-900-token{
+  border-color: rgb(var(--color-surface-900));
+}
+
+.dark .border-surface-100-800-token{
+  border-color: rgb(var(--color-surface-800));
+}
+
+.dark .border-surface-200-700-token{
+  border-color: rgb(var(--color-surface-700));
+}
+
+.dark .border-surface-300-600-token{
+  border-color: rgb(var(--color-surface-600));
+}
+
+.dark .border-surface-400-500-token{
+  border-color: rgb(var(--color-surface-500));
+}
+
+.dark .border-surface-900-50-token{
+  border-color: rgb(var(--color-surface-50));
+}
+
+.dark .border-surface-800-100-token{
+  border-color: rgb(var(--color-surface-100));
+}
+
+.dark .border-surface-700-200-token{
+  border-color: rgb(var(--color-surface-200));
+}
+
+.dark .border-surface-600-300-token{
+  border-color: rgb(var(--color-surface-300));
+}
+
+.dark .border-surface-500-400-token{
+  border-color: rgb(var(--color-surface-400));
+}
+
+.rounded-token{
+  border-radius: var(--theme-rounded-base);
+}
+
+.rounded-container-token{
+  border-radius: var(--theme-rounded-container);
+}
+
+.dark .fill-token{
+  fill: rgba(var(--theme-font-color-dark));
+}
+
+.dark .text-token{
+  color: rgba(var(--theme-font-color-dark));
+}
+
+.dark .text-primary-50-900-token{
+  color: rgb(var(--color-primary-900));
+}
+
+.dark .text-primary-100-800-token{
+  color: rgb(var(--color-primary-800));
+}
+
+.dark .text-primary-200-700-token{
+  color: rgb(var(--color-primary-700));
+}
+
+.dark .text-primary-300-600-token{
+  color: rgb(var(--color-primary-600));
+}
+
+.dark .text-primary-400-500-token{
+  color: rgb(var(--color-primary-500));
+}
+
+.dark .text-primary-900-50-token{
+  color: rgb(var(--color-primary-50));
+}
+
+.dark .text-primary-800-100-token{
+  color: rgb(var(--color-primary-100));
+}
+
+.dark .text-primary-700-200-token{
+  color: rgb(var(--color-primary-200));
+}
+
+.dark .text-primary-600-300-token{
+  color: rgb(var(--color-primary-300));
+}
+
+.dark .text-primary-500-400-token{
+  color: rgb(var(--color-primary-400));
+}
+
+.dark .text-secondary-50-900-token{
+  color: rgb(var(--color-secondary-900));
+}
+
+.dark .text-secondary-100-800-token{
+  color: rgb(var(--color-secondary-800));
+}
+
+.dark .text-secondary-200-700-token{
+  color: rgb(var(--color-secondary-700));
+}
+
+.dark .text-secondary-300-600-token{
+  color: rgb(var(--color-secondary-600));
+}
+
+.dark .text-secondary-400-500-token{
+  color: rgb(var(--color-secondary-500));
+}
+
+.dark .text-secondary-900-50-token{
+  color: rgb(var(--color-secondary-50));
+}
+
+.dark .text-secondary-800-100-token{
+  color: rgb(var(--color-secondary-100));
+}
+
+.dark .text-secondary-700-200-token{
+  color: rgb(var(--color-secondary-200));
+}
+
+.dark .text-secondary-600-300-token{
+  color: rgb(var(--color-secondary-300));
+}
+
+.dark .text-secondary-500-400-token{
+  color: rgb(var(--color-secondary-400));
+}
+
+.dark .text-tertiary-50-900-token{
+  color: rgb(var(--color-tertiary-900));
+}
+
+.dark .text-tertiary-100-800-token{
+  color: rgb(var(--color-tertiary-800));
+}
+
+.dark .text-tertiary-200-700-token{
+  color: rgb(var(--color-tertiary-700));
+}
+
+.dark .text-tertiary-300-600-token{
+  color: rgb(var(--color-tertiary-600));
+}
+
+.dark .text-tertiary-400-500-token{
+  color: rgb(var(--color-tertiary-500));
+}
+
+.dark .text-tertiary-900-50-token{
+  color: rgb(var(--color-tertiary-50));
+}
+
+.dark .text-tertiary-800-100-token{
+  color: rgb(var(--color-tertiary-100));
+}
+
+.dark .text-tertiary-700-200-token{
+  color: rgb(var(--color-tertiary-200));
+}
+
+.dark .text-tertiary-600-300-token{
+  color: rgb(var(--color-tertiary-300));
+}
+
+.dark .text-tertiary-500-400-token{
+  color: rgb(var(--color-tertiary-400));
+}
+
+.dark .text-success-50-900-token{
+  color: rgb(var(--color-success-900));
+}
+
+.dark .text-success-100-800-token{
+  color: rgb(var(--color-success-800));
+}
+
+.dark .text-success-200-700-token{
+  color: rgb(var(--color-success-700));
+}
+
+.dark .text-success-300-600-token{
+  color: rgb(var(--color-success-600));
+}
+
+.dark .text-success-400-500-token{
+  color: rgb(var(--color-success-500));
+}
+
+.dark .text-success-900-50-token{
+  color: rgb(var(--color-success-50));
+}
+
+.dark .text-success-800-100-token{
+  color: rgb(var(--color-success-100));
+}
+
+.dark .text-success-700-200-token{
+  color: rgb(var(--color-success-200));
+}
+
+.dark .text-success-600-300-token{
+  color: rgb(var(--color-success-300));
+}
+
+.dark .text-success-500-400-token{
+  color: rgb(var(--color-success-400));
+}
+
+.dark .text-warning-50-900-token{
+  color: rgb(var(--color-warning-900));
+}
+
+.dark .text-warning-100-800-token{
+  color: rgb(var(--color-warning-800));
+}
+
+.dark .text-warning-200-700-token{
+  color: rgb(var(--color-warning-700));
+}
+
+.dark .text-warning-300-600-token{
+  color: rgb(var(--color-warning-600));
+}
+
+.dark .text-warning-400-500-token{
+  color: rgb(var(--color-warning-500));
+}
+
+.dark .text-warning-900-50-token{
+  color: rgb(var(--color-warning-50));
+}
+
+.dark .text-warning-800-100-token{
+  color: rgb(var(--color-warning-100));
+}
+
+.dark .text-warning-700-200-token{
+  color: rgb(var(--color-warning-200));
+}
+
+.dark .text-warning-600-300-token{
+  color: rgb(var(--color-warning-300));
+}
+
+.dark .text-warning-500-400-token{
+  color: rgb(var(--color-warning-400));
+}
+
+.dark .text-error-50-900-token{
+  color: rgb(var(--color-error-900));
+}
+
+.dark .text-error-100-800-token{
+  color: rgb(var(--color-error-800));
+}
+
+.dark .text-error-200-700-token{
+  color: rgb(var(--color-error-700));
+}
+
+.dark .text-error-300-600-token{
+  color: rgb(var(--color-error-600));
+}
+
+.dark .text-error-400-500-token{
+  color: rgb(var(--color-error-500));
+}
+
+.dark .text-error-900-50-token{
+  color: rgb(var(--color-error-50));
+}
+
+.dark .text-error-800-100-token{
+  color: rgb(var(--color-error-100));
+}
+
+.dark .text-error-700-200-token{
+  color: rgb(var(--color-error-200));
+}
+
+.dark .text-error-600-300-token{
+  color: rgb(var(--color-error-300));
+}
+
+.dark .text-error-500-400-token{
+  color: rgb(var(--color-error-400));
+}
+
+.dark .text-surface-50-900-token{
+  color: rgb(var(--color-surface-900));
+}
+
+.dark .text-surface-100-800-token{
+  color: rgb(var(--color-surface-800));
+}
+
+.dark .text-surface-200-700-token{
+  color: rgb(var(--color-surface-700));
+}
+
+.dark .text-surface-300-600-token{
+  color: rgb(var(--color-surface-600));
+}
+
+.dark .text-surface-400-500-token{
+  color: rgb(var(--color-surface-500));
+}
+
+.dark .text-surface-900-50-token{
+  color: rgb(var(--color-surface-50));
+}
+
+.dark .text-surface-800-100-token{
+  color: rgb(var(--color-surface-100));
+}
+
+.dark .text-surface-700-200-token{
+  color: rgb(var(--color-surface-200));
+}
+
+.dark .text-surface-600-300-token{
+  color: rgb(var(--color-surface-300));
+}
+
+.dark .text-surface-500-400-token{
+  color: rgb(var(--color-surface-400));
+}
+
+.dark .ring-outline-token{
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-inset: inset;
+  --tw-ring-color: rgb(250 250 250 / 0.05);
+}
+
+.dark .ring-primary-50-900-token{
+  --tw-ring-color: rgb(var(--color-primary-900) / 1);
+}
+
+.dark .ring-primary-100-800-token{
+  --tw-ring-color: rgb(var(--color-primary-800) / 1);
+}
+
+.dark .ring-primary-200-700-token{
+  --tw-ring-color: rgb(var(--color-primary-700) / 1);
+}
+
+.dark .ring-primary-300-600-token{
+  --tw-ring-color: rgb(var(--color-primary-600) / 1);
+}
+
+.dark .ring-primary-400-500-token{
+  --tw-ring-color: rgb(var(--color-primary-500) / 1);
+}
+
+.dark .ring-primary-900-50-token{
+  --tw-ring-color: rgb(var(--color-primary-50) / 1);
+}
+
+.dark .ring-primary-800-100-token{
+  --tw-ring-color: rgb(var(--color-primary-100) / 1);
+}
+
+.dark .ring-primary-700-200-token{
+  --tw-ring-color: rgb(var(--color-primary-200) / 1);
+}
+
+.dark .ring-primary-600-300-token{
+  --tw-ring-color: rgb(var(--color-primary-300) / 1);
+}
+
+.dark .ring-primary-500-400-token{
+  --tw-ring-color: rgb(var(--color-primary-400) / 1);
+}
+
+.dark .ring-secondary-50-900-token{
+  --tw-ring-color: rgb(var(--color-secondary-900) / 1);
+}
+
+.dark .ring-secondary-100-800-token{
+  --tw-ring-color: rgb(var(--color-secondary-800) / 1);
+}
+
+.dark .ring-secondary-200-700-token{
+  --tw-ring-color: rgb(var(--color-secondary-700) / 1);
+}
+
+.dark .ring-secondary-300-600-token{
+  --tw-ring-color: rgb(var(--color-secondary-600) / 1);
+}
+
+.dark .ring-secondary-400-500-token{
+  --tw-ring-color: rgb(var(--color-secondary-500) / 1);
+}
+
+.dark .ring-secondary-900-50-token{
+  --tw-ring-color: rgb(var(--color-secondary-50) / 1);
+}
+
+.dark .ring-secondary-800-100-token{
+  --tw-ring-color: rgb(var(--color-secondary-100) / 1);
+}
+
+.dark .ring-secondary-700-200-token{
+  --tw-ring-color: rgb(var(--color-secondary-200) / 1);
+}
+
+.dark .ring-secondary-600-300-token{
+  --tw-ring-color: rgb(var(--color-secondary-300) / 1);
+}
+
+.dark .ring-secondary-500-400-token{
+  --tw-ring-color: rgb(var(--color-secondary-400) / 1);
+}
+
+.dark .ring-tertiary-50-900-token{
+  --tw-ring-color: rgb(var(--color-tertiary-900) / 1);
+}
+
+.dark .ring-tertiary-100-800-token{
+  --tw-ring-color: rgb(var(--color-tertiary-800) / 1);
+}
+
+.dark .ring-tertiary-200-700-token{
+  --tw-ring-color: rgb(var(--color-tertiary-700) / 1);
+}
+
+.dark .ring-tertiary-300-600-token{
+  --tw-ring-color: rgb(var(--color-tertiary-600) / 1);
+}
+
+.dark .ring-tertiary-400-500-token{
+  --tw-ring-color: rgb(var(--color-tertiary-500) / 1);
+}
+
+.dark .ring-tertiary-900-50-token{
+  --tw-ring-color: rgb(var(--color-tertiary-50) / 1);
+}
+
+.dark .ring-tertiary-800-100-token{
+  --tw-ring-color: rgb(var(--color-tertiary-100) / 1);
+}
+
+.dark .ring-tertiary-700-200-token{
+  --tw-ring-color: rgb(var(--color-tertiary-200) / 1);
+}
+
+.dark .ring-tertiary-600-300-token{
+  --tw-ring-color: rgb(var(--color-tertiary-300) / 1);
+}
+
+.dark .ring-tertiary-500-400-token{
+  --tw-ring-color: rgb(var(--color-tertiary-400) / 1);
+}
+
+.dark .ring-success-50-900-token{
+  --tw-ring-color: rgb(var(--color-success-900) / 1);
+}
+
+.dark .ring-success-100-800-token{
+  --tw-ring-color: rgb(var(--color-success-800) / 1);
+}
+
+.dark .ring-success-200-700-token{
+  --tw-ring-color: rgb(var(--color-success-700) / 1);
+}
+
+.dark .ring-success-300-600-token{
+  --tw-ring-color: rgb(var(--color-success-600) / 1);
+}
+
+.dark .ring-success-400-500-token{
+  --tw-ring-color: rgb(var(--color-success-500) / 1);
+}
+
+.dark .ring-success-900-50-token{
+  --tw-ring-color: rgb(var(--color-success-50) / 1);
+}
+
+.dark .ring-success-800-100-token{
+  --tw-ring-color: rgb(var(--color-success-100) / 1);
+}
+
+.dark .ring-success-700-200-token{
+  --tw-ring-color: rgb(var(--color-success-200) / 1);
+}
+
+.dark .ring-success-600-300-token{
+  --tw-ring-color: rgb(var(--color-success-300) / 1);
+}
+
+.dark .ring-success-500-400-token{
+  --tw-ring-color: rgb(var(--color-success-400) / 1);
+}
+
+.dark .ring-warning-50-900-token{
+  --tw-ring-color: rgb(var(--color-warning-900) / 1);
+}
+
+.dark .ring-warning-100-800-token{
+  --tw-ring-color: rgb(var(--color-warning-800) / 1);
+}
+
+.dark .ring-warning-200-700-token{
+  --tw-ring-color: rgb(var(--color-warning-700) / 1);
+}
+
+.dark .ring-warning-300-600-token{
+  --tw-ring-color: rgb(var(--color-warning-600) / 1);
+}
+
+.dark .ring-warning-400-500-token{
+  --tw-ring-color: rgb(var(--color-warning-500) / 1);
+}
+
+.dark .ring-warning-900-50-token{
+  --tw-ring-color: rgb(var(--color-warning-50) / 1);
+}
+
+.dark .ring-warning-800-100-token{
+  --tw-ring-color: rgb(var(--color-warning-100) / 1);
+}
+
+.dark .ring-warning-700-200-token{
+  --tw-ring-color: rgb(var(--color-warning-200) / 1);
+}
+
+.dark .ring-warning-600-300-token{
+  --tw-ring-color: rgb(var(--color-warning-300) / 1);
+}
+
+.dark .ring-warning-500-400-token{
+  --tw-ring-color: rgb(var(--color-warning-400) / 1);
+}
+
+.dark .ring-error-50-900-token{
+  --tw-ring-color: rgb(var(--color-error-900) / 1);
+}
+
+.dark .ring-error-100-800-token{
+  --tw-ring-color: rgb(var(--color-error-800) / 1);
+}
+
+.dark .ring-error-200-700-token{
+  --tw-ring-color: rgb(var(--color-error-700) / 1);
+}
+
+.dark .ring-error-300-600-token{
+  --tw-ring-color: rgb(var(--color-error-600) / 1);
+}
+
+.dark .ring-error-400-500-token{
+  --tw-ring-color: rgb(var(--color-error-500) / 1);
+}
+
+.dark .ring-error-900-50-token{
+  --tw-ring-color: rgb(var(--color-error-50) / 1);
+}
+
+.dark .ring-error-800-100-token{
+  --tw-ring-color: rgb(var(--color-error-100) / 1);
+}
+
+.dark .ring-error-700-200-token{
+  --tw-ring-color: rgb(var(--color-error-200) / 1);
+}
+
+.dark .ring-error-600-300-token{
+  --tw-ring-color: rgb(var(--color-error-300) / 1);
+}
+
+.dark .ring-error-500-400-token{
+  --tw-ring-color: rgb(var(--color-error-400) / 1);
+}
+
+.dark .ring-surface-50-900-token{
+  --tw-ring-color: rgb(var(--color-surface-900) / 1);
+}
+
+.dark .ring-surface-100-800-token{
+  --tw-ring-color: rgb(var(--color-surface-800) / 1);
+}
+
+.dark .ring-surface-200-700-token{
+  --tw-ring-color: rgb(var(--color-surface-700) / 1);
+}
+
+.dark .ring-surface-300-600-token{
+  --tw-ring-color: rgb(var(--color-surface-600) / 1);
+}
+
+.dark .ring-surface-400-500-token{
+  --tw-ring-color: rgb(var(--color-surface-500) / 1);
+}
+
+.dark .ring-surface-900-50-token{
+  --tw-ring-color: rgb(var(--color-surface-50) / 1);
+}
+
+.dark .ring-surface-800-100-token{
+  --tw-ring-color: rgb(var(--color-surface-100) / 1);
+}
+
+.dark .ring-surface-700-200-token{
+  --tw-ring-color: rgb(var(--color-surface-200) / 1);
+}
+
+.dark .ring-surface-600-300-token{
+  --tw-ring-color: rgb(var(--color-surface-300) / 1);
+}
+
+.dark .ring-surface-500-400-token{
+  --tw-ring-color: rgb(var(--color-surface-400) / 1);
+}
+
+.hover\:cursor-pointer:hover{
+  cursor: pointer;
+}
+
+.hover\:bg-primary-100:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--color-primary-100) / var(--tw-bg-opacity));
+}
+
+.hover\:text-primary-900:hover{
+  --tw-text-opacity: 1;
+  color: rgb(var(--color-primary-900) / var(--tw-text-opacity));
+}
+
+@media (min-width: 1024px){
+  .lg\:max-h-\[500px\]{
+    max-height: 500px;
+  }
+}
+
+/* Global Styles */
+
+/* Stylesheet: core.css */
+
+/* Typographical Settings */
+
+/* Stylesheet: typography.css */
+
+/* Imports all Tailwind Elements */
+
+/* Stylesheet: elements.css */
+
+/* Import AFTER your theme, but BEFORE your global stylesheet. */
+
+/* Recommended as the LAST stylesheet in the set */
+
+/* Tailwind Elements: alerts.css */
+
+/* Tailwind Elements: badges.css */
+
+/* Tailwind Elements: breadcrumbs.css */
+
+/* Tailwind Elements: button.css */
+
+/* Tailwind Elements: cards.css */
+
+/* Tailwind Elements: chips.css */
+
+/* Stylesheet: forms.css */
+
+/* Tailwind Elements: button.css */
+
+/* Tailwind Elements: logo-clouds.css */
+
+/* Tailwind Elements: placeholders.css */
+
+/* Elements: tables.css */
+
+/* Utilities */
+
+/* Tailwind Elements: modals.css */
+
+/* === Modal (helpers) === */
+
+.w-modal-slim{
+  max-width: 400px;
+  width:100%;
+}
+
+.w-modal{
+  max-width: 640px;
+  width:100%;
+}
+
+.w-modal-wide{
+  max-width: 80%;
+  width:100%;
+}
+
+/* Tailwind Elements: popups.css */
+
+/* === Popup === */
+
+[data-popup] {
+  /* https://floating-ui.com/docs/computeposition#usage */
+  top: 0px;
+  left: 0px;
+  position:absolute;
+  /* max-w-max */
+  /* Set hidden on page load */
+  display: none;
+  /* Transitions */
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+}
+
+[data-popup] .arrow{
+  height: 0.5rem;
+  width: 0.5rem;
+  --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));
+  position:absolute;
+}
+
+/* Imports all Variant Styles */
+
+/* === Variants === */
+
+/* A canned set of reusabled variant styles. */
+
+/* Imports all Component Styles */
+
+@font-face{
+  font-family:myfont;
+
+  src:url(data:font/woff;base64,d09GRgABAAAAAATMAAsAAAAABIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDxIGBGNtYXAAAAFoAAAAVAAAAFQWfNQ7Z2FzcAAAAbwAAAAIAAAACAAAABBnbHlmAAABxAAAAMQAAADE9iu5ZGhlYWQAAAKIAAAANgAAADYfdnyraGhlYQAAAsAAAAAkAAAAJAfCA8ZobXR4AAAC5AAAABQAAAAUCgAAAGxvY2EAAAL4AAAADAAAAAwAKAB2bWF4cAAAAwQAAAAgAAAAIAAHACxuYW1lAAADJAAAAYYAAAGGmUoJ+3Bvc3QAAASsAAAAIAAAACAAAwAAAAMDAAGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA6doDwP/AAEADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAwAAAAMAAAAcAAEAAwAAABwAAwABAAAAHAAEADgAAAAKAAgAAgACAAEAIOna//3//wAAAAAAIOna//3//wAB/+MWKgADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAA/8wEAAOAACkAAAEiBw4BBwYHJicuAScmIyIHDgEHBhUUFx4BFxYXNjc+ATc2NTQnLgEnJgLzKCUlPxkZEBAZGT8lJSg4MTFJFRUzM5lZWk5KWVmbNTQVFUkxMQOADw8yICEiIiEgMg8PFRVJMTE4cU5Pjk5NcG9PT5BOT204MTFJFRUAAAEAAAAAAABxV9/FXw889QALBAAAAAAA3iwcMQAAAADeLBwxAAD/zAQAA4AAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAABAAAAQAAAAAAAAAAAAAAAAAAAAUEAAAAAAAAAAAAAAACAAAABAAAAAAAAAAACgAUAB4AYgABAAAABQAqAAEAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEABwAAAAEAAAAAAAIABwBgAAEAAAAAAAMABwA2AAEAAAAAAAQABwB1AAEAAAAAAAUACwAVAAEAAAAAAAYABwBLAAEAAAAAAAoAGgCKAAMAAQQJAAEADgAHAAMAAQQJAAIADgBnAAMAAQQJAAMADgA9AAMAAQQJAAQADgB8AAMAAQQJAAUAFgAgAAMAAQQJAAYADgBSAAMAAQQJAAoANACkaWNvbW9vbgBpAGMAbwBtAG8AbwBuVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwaWNvbW9vbgBpAGMAbwBtAG8AbwBuaWNvbW9vbgBpAGMAbwBtAG8AbwBuUmVndWxhcgBSAGUAZwB1AGwAYQByaWNvbW9vbgBpAGMAbwBtAG8AbwBuRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==)
+}
+
+[class^=icon-],[class*=" icon-"]{
+  font-family:myfont!important
+}
+
+.icon-heart:before{
+  content:"\e9da"
+}
+
+.global-example{
+  color:red
+}
+
+*,:before,:after{
+  box-sizing:border-box;
+  border-width:0;
+  border-style:solid;
+  border-color:#e5e7eb
+}
+
+:before,:after{
+  --tw-content: ""
+}
+
+html{
+  line-height:1.5;
+  -webkit-text-size-adjust:100%;
+  -moz-tab-size:4;
+  -o-tab-size:4;
+  tab-size:4;
+  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";
+  font-feature-settings:normal
+}
+
+body{
+  margin:0;
+  line-height:inherit
+}
+
+hr{
+  height:0;
+  color:inherit;
+  border-top-width:1px
+}
+
+abbr:where([title]){
+  -webkit-text-decoration:underline dotted;
+  text-decoration:underline dotted
+}
+
+h1,h2,h3,h4,h5,h6{
+  font-size:inherit;
+  font-weight:inherit
+}
+
+a{
+  color:inherit;
+  text-decoration:inherit
+}
+
+b,strong{
+  font-weight:bolder
+}
+
+code,kbd,samp,pre{
+  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
+  font-size:1em
+}
+
+small{
+  font-size:80%
+}
+
+sub,sup{
+  font-size:75%;
+  line-height:0;
+  position:relative;
+  vertical-align:baseline
+}
+
+sub{
+  bottom:-.25em
+}
+
+sup{
+  top:-.5em
+}
+
+table{
+  text-indent:0;
+  border-color:inherit;
+  border-collapse:collapse
+}
+
+button,input,optgroup,select,textarea{
+  font-family:inherit;
+  font-size:100%;
+  font-weight:inherit;
+  line-height:inherit;
+  color:inherit;
+  margin:0;
+  padding:0
+}
+
+button,select{
+  text-transform:none
+}
+
+button,[type=button],[type=reset],[type=submit]{
+  -webkit-appearance:button;
+  background-color:transparent;
+  background-image:none
+}
+
+:-moz-focusring{
+  outline:auto
+}
+
+:-moz-ui-invalid{
+  box-shadow:none
+}
+
+progress{
+  vertical-align:baseline
+}
+
+::-webkit-inner-spin-button,::-webkit-outer-spin-button{
+  height:auto
+}
+
+[type=search]{
+  -webkit-appearance:textfield;
+  outline-offset:-2px
+}
+
+::-webkit-search-decoration{
+  -webkit-appearance:none
+}
+
+::-webkit-file-upload-button{
+  -webkit-appearance:button;
+  font:inherit
+}
+
+summary{
+  display:list-item
+}
+
+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
+}
+
+textarea{
+  resize:vertical
+}
+
+input::-moz-placeholder,textarea::-moz-placeholder{
+  opacity:1;
+  color:#9ca3af
+}
+
+input::-moz-placeholder, textarea::-moz-placeholder{
+  opacity:1;
+  color:#9ca3af
+}
+
+input::placeholder,textarea::placeholder{
+  opacity:1;
+  color:#9ca3af
+}
+
+button,[role=button]{
+  cursor:pointer
+}
+
+:disabled{
+  cursor:default
+}
+
+img,svg,video,canvas,audio,iframe,embed,object{
+  display:block;
+  vertical-align:middle
+}
+
+img,video{
+  max-width:100%;
+  height:auto
+}
+
+[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-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 / .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: 
+}
+
+::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-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 / .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: 
+}
+
+.absolute{
+  position:absolute
+}
+
+.-m-4{
+  margin:-1rem
+}
+
+.flex{
+  display:flex
+}
+
+.aspect-square{
+  aspect-ratio:1 / 1
+}
+
+.h-6{
+  height:1.5rem
+}
+
+.h-fit{
+  height:-moz-fit-content;
+  height:fit-content
+}
+
+.h-full{
+  height:100%
+}
+
+.max-h-64{
+  max-height:16rem
+}
+
+.w-12{
+  width:3rem
+}
+
+.w-24{
+  width:6rem
+}
+
+.w-60{
+  width:15rem
+}
+
+.w-\[70\%\]{
+  width:70%
+}
+
+.w-fit{
+  width:-moz-fit-content;
+  width:fit-content
+}
+
+.w-full{
+  width:100%
+}
+
+.translate-x-\[100\%\]{
+  --tw-translate-x: 100%;
+  transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
+}
+
+.scale-\[0\.8\]{
+  --tw-scale-x: .8;
+  --tw-scale-y: .8;
+  transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
+}
+
+.cursor-pointer{
+  cursor:pointer
+}
+
+.flex-col{
+  flex-direction:column
+}
+
+.items-center{
+  align-items:center
+}
+
+.justify-center{
+  justify-content:center
+}
+
+.justify-between{
+  justify-content:space-between
+}
+
+.gap-4{
+  gap:1rem
+}
+
+.space-y-4>:not([hidden])~:not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom:calc(1rem * var(--tw-space-y-reverse))
+}
+
+.overflow-y-auto{
+  overflow-y:auto
+}
+
+.rounded{
+  border-radius:.25rem
+}
+
+.bg-primary-50{
+  --tw-bg-opacity: 1;
+  background-color:rgb(var(--color-primary-50) / var(--tw-bg-opacity))
+}
+
+.bg-primary-900{
+  --tw-bg-opacity: 1;
+  background-color:rgb(var(--color-primary-900) / var(--tw-bg-opacity))
+}
+
+.bg-surface-200{
+  --tw-bg-opacity: 1;
+  background-color:rgb(var(--color-surface-200) / var(--tw-bg-opacity))
+}
+
+.bg-surface-50{
+  --tw-bg-opacity: 1;
+  background-color:rgb(var(--color-surface-50) / var(--tw-bg-opacity))
+}
+
+.bg-surface-900{
+  --tw-bg-opacity: 1;
+  background-color:rgb(var(--color-surface-900) / var(--tw-bg-opacity))
+}
+
+.p-2{
+  padding:.5rem
+}
+
+.p-4{
+  padding:1rem
+}
+
+.text-center{
+  text-align:center
+}
+
+.capitalize{
+  text-transform:capitalize
+}
+
+.text-primary-50{
+  --tw-text-opacity: 1;
+  color:rgb(var(--color-primary-50) / var(--tw-text-opacity))
+}
+
+.text-primary-900{
+  --tw-text-opacity: 1;
+  color:rgb(var(--color-primary-900) / var(--tw-text-opacity))
+}
+
+.text-surface-50{
+  --tw-text-opacity: 1;
+  color:rgb(var(--color-surface-50) / var(--tw-text-opacity))
+}
+
+.text-surface-900{
+  --tw-text-opacity: 1;
+  color:rgb(var(--color-surface-900) / var(--tw-text-opacity))
+}
+
+.shadow-xl{
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)
+}
+
+.ring{
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)
+}
+
+.ring-\[1px\]{
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)
+}
+
+.ring-primary-500\/30{
+  --tw-ring-color: rgb(var(--color-primary-500) / .3)
+}
+
+.ring-surface-500\/30{
+  --tw-ring-color: rgb(var(--color-surface-500) / .3)
+}
+
+.transition-all{
+  transition-property:all;
+  transition-timing-function:cubic-bezier(.4,0,.2,1);
+  transition-duration:.15s
+}
+
+.duration-\[200ms\]{
+  transition-duration:.2s
+}
+
+.dark .bg-primary-backdrop-token{
+  background-color:rgb(var(--color-primary-900) / .7)
+}
+
+.dark .bg-primary-50-900-token{
+  background-color:rgb(var(--color-primary-900))
+}
+
+.dark .bg-primary-100-800-token{
+  background-color:rgb(var(--color-primary-800))
+}
+
+.dark .bg-primary-200-700-token{
+  background-color:rgb(var(--color-primary-700))
+}
+
+.dark .bg-primary-300-600-token{
+  background-color:rgb(var(--color-primary-600))
+}
+
+.dark .bg-primary-400-500-token{
+  background-color:rgb(var(--color-primary-500))
+}
+
+.dark .bg-primary-900-50-token{
+  background-color:rgb(var(--color-primary-50))
+}
+
+.dark .bg-primary-800-100-token{
+  background-color:rgb(var(--color-primary-100))
+}
+
+.dark .bg-primary-700-200-token{
+  background-color:rgb(var(--color-primary-200))
+}
+
+.dark .bg-primary-600-300-token{
+  background-color:rgb(var(--color-primary-300))
+}
+
+.dark .bg-primary-500-400-token{
+  background-color:rgb(var(--color-primary-400))
+}
+
+.dark .bg-secondary-backdrop-token{
+  background-color:rgb(var(--color-secondary-900) / .7)
+}
+
+.dark .bg-secondary-50-900-token{
+  background-color:rgb(var(--color-secondary-900))
+}
+
+.dark .bg-secondary-100-800-token{
+  background-color:rgb(var(--color-secondary-800))
+}
+
+.dark .bg-secondary-200-700-token{
+  background-color:rgb(var(--color-secondary-700))
+}
+
+.dark .bg-secondary-300-600-token{
+  background-color:rgb(var(--color-secondary-600))
+}
+
+.dark .bg-secondary-400-500-token{
+  background-color:rgb(var(--color-secondary-500))
+}
+
+.dark .bg-secondary-900-50-token{
+  background-color:rgb(var(--color-secondary-50))
+}
+
+.dark .bg-secondary-800-100-token{
+  background-color:rgb(var(--color-secondary-100))
+}
+
+.dark .bg-secondary-700-200-token{
+  background-color:rgb(var(--color-secondary-200))
+}
+
+.dark .bg-secondary-600-300-token{
+  background-color:rgb(var(--color-secondary-300))
+}
+
+.dark .bg-secondary-500-400-token{
+  background-color:rgb(var(--color-secondary-400))
+}
+
+.dark .bg-tertiary-backdrop-token{
+  background-color:rgb(var(--color-tertiary-900) / .7)
+}
+
+.dark .bg-tertiary-50-900-token{
+  background-color:rgb(var(--color-tertiary-900))
+}
+
+.dark .bg-tertiary-100-800-token{
+  background-color:rgb(var(--color-tertiary-800))
+}
+
+.dark .bg-tertiary-200-700-token{
+  background-color:rgb(var(--color-tertiary-700))
+}
+
+.dark .bg-tertiary-300-600-token{
+  background-color:rgb(var(--color-tertiary-600))
+}
+
+.dark .bg-tertiary-400-500-token{
+  background-color:rgb(var(--color-tertiary-500))
+}
+
+.dark .bg-tertiary-900-50-token{
+  background-color:rgb(var(--color-tertiary-50))
+}
+
+.dark .bg-tertiary-800-100-token{
+  background-color:rgb(var(--color-tertiary-100))
+}
+
+.dark .bg-tertiary-700-200-token{
+  background-color:rgb(var(--color-tertiary-200))
+}
+
+.dark .bg-tertiary-600-300-token{
+  background-color:rgb(var(--color-tertiary-300))
+}
+
+.dark .bg-tertiary-500-400-token{
+  background-color:rgb(var(--color-tertiary-400))
+}
+
+.dark .bg-success-backdrop-token{
+  background-color:rgb(var(--color-success-900) / .7)
+}
+
+.dark .bg-success-50-900-token{
+  background-color:rgb(var(--color-success-900))
+}
+
+.dark .bg-success-100-800-token{
+  background-color:rgb(var(--color-success-800))
+}
+
+.dark .bg-success-200-700-token{
+  background-color:rgb(var(--color-success-700))
+}
+
+.dark .bg-success-300-600-token{
+  background-color:rgb(var(--color-success-600))
+}
+
+.dark .bg-success-400-500-token{
+  background-color:rgb(var(--color-success-500))
+}
+
+.dark .bg-success-900-50-token{
+  background-color:rgb(var(--color-success-50))
+}
+
+.dark .bg-success-800-100-token{
+  background-color:rgb(var(--color-success-100))
+}
+
+.dark .bg-success-700-200-token{
+  background-color:rgb(var(--color-success-200))
+}
+
+.dark .bg-success-600-300-token{
+  background-color:rgb(var(--color-success-300))
+}
+
+.dark .bg-success-500-400-token{
+  background-color:rgb(var(--color-success-400))
+}
+
+.dark .bg-warning-backdrop-token{
+  background-color:rgb(var(--color-warning-900) / .7)
+}
+
+.dark .bg-warning-50-900-token{
+  background-color:rgb(var(--color-warning-900))
+}
+
+.dark .bg-warning-100-800-token{
+  background-color:rgb(var(--color-warning-800))
+}
+
+.dark .bg-warning-200-700-token{
+  background-color:rgb(var(--color-warning-700))
+}
+
+.dark .bg-warning-300-600-token{
+  background-color:rgb(var(--color-warning-600))
+}
+
+.dark .bg-warning-400-500-token{
+  background-color:rgb(var(--color-warning-500))
+}
+
+.dark .bg-warning-900-50-token{
+  background-color:rgb(var(--color-warning-50))
+}
+
+.dark .bg-warning-800-100-token{
+  background-color:rgb(var(--color-warning-100))
+}
+
+.dark .bg-warning-700-200-token{
+  background-color:rgb(var(--color-warning-200))
+}
+
+.dark .bg-warning-600-300-token{
+  background-color:rgb(var(--color-warning-300))
+}
+
+.dark .bg-warning-500-400-token{
+  background-color:rgb(var(--color-warning-400))
+}
+
+.dark .bg-error-backdrop-token{
+  background-color:rgb(var(--color-error-900) / .7)
+}
+
+.dark .bg-error-50-900-token{
+  background-color:rgb(var(--color-error-900))
+}
+
+.dark .bg-error-100-800-token{
+  background-color:rgb(var(--color-error-800))
+}
+
+.dark .bg-error-200-700-token{
+  background-color:rgb(var(--color-error-700))
+}
+
+.dark .bg-error-300-600-token{
+  background-color:rgb(var(--color-error-600))
+}
+
+.dark .bg-error-400-500-token{
+  background-color:rgb(var(--color-error-500))
+}
+
+.dark .bg-error-900-50-token{
+  background-color:rgb(var(--color-error-50))
+}
+
+.dark .bg-error-800-100-token{
+  background-color:rgb(var(--color-error-100))
+}
+
+.dark .bg-error-700-200-token{
+  background-color:rgb(var(--color-error-200))
+}
+
+.dark .bg-error-600-300-token{
+  background-color:rgb(var(--color-error-300))
+}
+
+.dark .bg-error-500-400-token{
+  background-color:rgb(var(--color-error-400))
+}
+
+.dark .bg-surface-backdrop-token{
+  background-color:rgb(var(--color-surface-900) / .7)
+}
+
+.dark .bg-surface-50-900-token{
+  background-color:rgb(var(--color-surface-900))
+}
+
+.dark .bg-surface-100-800-token{
+  background-color:rgb(var(--color-surface-800))
+}
+
+.dark .bg-surface-200-700-token{
+  background-color:rgb(var(--color-surface-700))
+}
+
+.dark .bg-surface-300-600-token{
+  background-color:rgb(var(--color-surface-600))
+}
+
+.dark .bg-surface-400-500-token{
+  background-color:rgb(var(--color-surface-500))
+}
+
+.dark .bg-surface-900-50-token{
+  background-color:rgb(var(--color-surface-50))
+}
+
+.dark .bg-surface-800-100-token{
+  background-color:rgb(var(--color-surface-100))
+}
+
+.dark .bg-surface-700-200-token{
+  background-color:rgb(var(--color-surface-200))
+}
+
+.dark .bg-surface-600-300-token{
+  background-color:rgb(var(--color-surface-300))
+}
+
+.dark .bg-surface-500-400-token{
+  background-color:rgb(var(--color-surface-400))
+}
+
+.dark .border-primary-50-900-token{
+  border-color:rgb(var(--color-primary-900))
+}
+
+.dark .border-primary-100-800-token{
+  border-color:rgb(var(--color-primary-800))
+}
+
+.dark .border-primary-200-700-token{
+  border-color:rgb(var(--color-primary-700))
+}
+
+.dark .border-primary-300-600-token{
+  border-color:rgb(var(--color-primary-600))
+}
+
+.dark .border-primary-400-500-token{
+  border-color:rgb(var(--color-primary-500))
+}
+
+.dark .border-primary-900-50-token{
+  border-color:rgb(var(--color-primary-50))
+}
+
+.dark .border-primary-800-100-token{
+  border-color:rgb(var(--color-primary-100))
+}
+
+.dark .border-primary-700-200-token{
+  border-color:rgb(var(--color-primary-200))
+}
+
+.dark .border-primary-600-300-token{
+  border-color:rgb(var(--color-primary-300))
+}
+
+.dark .border-primary-500-400-token{
+  border-color:rgb(var(--color-primary-400))
+}
+
+.dark .border-secondary-50-900-token{
+  border-color:rgb(var(--color-secondary-900))
+}
+
+.dark .border-secondary-100-800-token{
+  border-color:rgb(var(--color-secondary-800))
+}
+
+.dark .border-secondary-200-700-token{
+  border-color:rgb(var(--color-secondary-700))
+}
+
+.dark .border-secondary-300-600-token{
+  border-color:rgb(var(--color-secondary-600))
+}
+
+.dark .border-secondary-400-500-token{
+  border-color:rgb(var(--color-secondary-500))
+}
+
+.dark .border-secondary-900-50-token{
+  border-color:rgb(var(--color-secondary-50))
+}
+
+.dark .border-secondary-800-100-token{
+  border-color:rgb(var(--color-secondary-100))
+}
+
+.dark .border-secondary-700-200-token{
+  border-color:rgb(var(--color-secondary-200))
+}
+
+.dark .border-secondary-600-300-token{
+  border-color:rgb(var(--color-secondary-300))
+}
+
+.dark .border-secondary-500-400-token{
+  border-color:rgb(var(--color-secondary-400))
+}
+
+.dark .border-tertiary-50-900-token{
+  border-color:rgb(var(--color-tertiary-900))
+}
+
+.dark .border-tertiary-100-800-token{
+  border-color:rgb(var(--color-tertiary-800))
+}
+
+.dark .border-tertiary-200-700-token{
+  border-color:rgb(var(--color-tertiary-700))
+}
+
+.dark .border-tertiary-300-600-token{
+  border-color:rgb(var(--color-tertiary-600))
+}
+
+.dark .border-tertiary-400-500-token{
+  border-color:rgb(var(--color-tertiary-500))
+}
+
+.dark .border-tertiary-900-50-token{
+  border-color:rgb(var(--color-tertiary-50))
+}
+
+.dark .border-tertiary-800-100-token{
+  border-color:rgb(var(--color-tertiary-100))
+}
+
+.dark .border-tertiary-700-200-token{
+  border-color:rgb(var(--color-tertiary-200))
+}
+
+.dark .border-tertiary-600-300-token{
+  border-color:rgb(var(--color-tertiary-300))
+}
+
+.dark .border-tertiary-500-400-token{
+  border-color:rgb(var(--color-tertiary-400))
+}
+
+.dark .border-success-50-900-token{
+  border-color:rgb(var(--color-success-900))
+}
+
+.dark .border-success-100-800-token{
+  border-color:rgb(var(--color-success-800))
+}
+
+.dark .border-success-200-700-token{
+  border-color:rgb(var(--color-success-700))
+}
+
+.dark .border-success-300-600-token{
+  border-color:rgb(var(--color-success-600))
+}
+
+.dark .border-success-400-500-token{
+  border-color:rgb(var(--color-success-500))
+}
+
+.dark .border-success-900-50-token{
+  border-color:rgb(var(--color-success-50))
+}
+
+.dark .border-success-800-100-token{
+  border-color:rgb(var(--color-success-100))
+}
+
+.dark .border-success-700-200-token{
+  border-color:rgb(var(--color-success-200))
+}
+
+.dark .border-success-600-300-token{
+  border-color:rgb(var(--color-success-300))
+}
+
+.dark .border-success-500-400-token{
+  border-color:rgb(var(--color-success-400))
+}
+
+.dark .border-warning-50-900-token{
+  border-color:rgb(var(--color-warning-900))
+}
+
+.dark .border-warning-100-800-token{
+  border-color:rgb(var(--color-warning-800))
+}
+
+.dark .border-warning-200-700-token{
+  border-color:rgb(var(--color-warning-700))
+}
+
+.dark .border-warning-300-600-token{
+  border-color:rgb(var(--color-warning-600))
+}
+
+.dark .border-warning-400-500-token{
+  border-color:rgb(var(--color-warning-500))
+}
+
+.dark .border-warning-900-50-token{
+  border-color:rgb(var(--color-warning-50))
+}
+
+.dark .border-warning-800-100-token{
+  border-color:rgb(var(--color-warning-100))
+}
+
+.dark .border-warning-700-200-token{
+  border-color:rgb(var(--color-warning-200))
+}
+
+.dark .border-warning-600-300-token{
+  border-color:rgb(var(--color-warning-300))
+}
+
+.dark .border-warning-500-400-token{
+  border-color:rgb(var(--color-warning-400))
+}
+
+.dark .border-error-50-900-token{
+  border-color:rgb(var(--color-error-900))
+}
+
+.dark .border-error-100-800-token{
+  border-color:rgb(var(--color-error-800))
+}
+
+.dark .border-error-200-700-token{
+  border-color:rgb(var(--color-error-700))
+}
+
+.dark .border-error-300-600-token{
+  border-color:rgb(var(--color-error-600))
+}
+
+.dark .border-error-400-500-token{
+  border-color:rgb(var(--color-error-500))
+}
+
+.dark .border-error-900-50-token{
+  border-color:rgb(var(--color-error-50))
+}
+
+.dark .border-error-800-100-token{
+  border-color:rgb(var(--color-error-100))
+}
+
+.dark .border-error-700-200-token{
+  border-color:rgb(var(--color-error-200))
+}
+
+.dark .border-error-600-300-token{
+  border-color:rgb(var(--color-error-300))
+}
+
+.dark .border-error-500-400-token{
+  border-color:rgb(var(--color-error-400))
+}
+
+.dark .border-surface-50-900-token{
+  border-color:rgb(var(--color-surface-900))
+}
+
+.dark .border-surface-100-800-token{
+  border-color:rgb(var(--color-surface-800))
+}
+
+.dark .border-surface-200-700-token{
+  border-color:rgb(var(--color-surface-700))
+}
+
+.dark .border-surface-300-600-token{
+  border-color:rgb(var(--color-surface-600))
+}
+
+.dark .border-surface-400-500-token{
+  border-color:rgb(var(--color-surface-500))
+}
+
+.dark .border-surface-900-50-token{
+  border-color:rgb(var(--color-surface-50))
+}
+
+.dark .border-surface-800-100-token{
+  border-color:rgb(var(--color-surface-100))
+}
+
+.dark .border-surface-700-200-token{
+  border-color:rgb(var(--color-surface-200))
+}
+
+.dark .border-surface-600-300-token{
+  border-color:rgb(var(--color-surface-300))
+}
+
+.dark .border-surface-500-400-token{
+  border-color:rgb(var(--color-surface-400))
+}
+
+.rounded-token{
+  border-radius:var(--theme-rounded-base)
+}
+
+.rounded-container-token{
+  border-radius:var(--theme-rounded-container)
+}
+
+.dark .fill-token{
+  fill:rgba(var(--theme-font-color-dark))
+}
+
+.dark .text-token{
+  color:rgba(var(--theme-font-color-dark))
+}
+
+.dark .text-primary-50-900-token{
+  color:rgb(var(--color-primary-900))
+}
+
+.dark .text-primary-100-800-token{
+  color:rgb(var(--color-primary-800))
+}
+
+.dark .text-primary-200-700-token{
+  color:rgb(var(--color-primary-700))
+}
+
+.dark .text-primary-300-600-token{
+  color:rgb(var(--color-primary-600))
+}
+
+.dark .text-primary-400-500-token{
+  color:rgb(var(--color-primary-500))
+}
+
+.dark .text-primary-900-50-token{
+  color:rgb(var(--color-primary-50))
+}
+
+.dark .text-primary-800-100-token{
+  color:rgb(var(--color-primary-100))
+}
+
+.dark .text-primary-700-200-token{
+  color:rgb(var(--color-primary-200))
+}
+
+.dark .text-primary-600-300-token{
+  color:rgb(var(--color-primary-300))
+}
+
+.dark .text-primary-500-400-token{
+  color:rgb(var(--color-primary-400))
+}
+
+.dark .text-secondary-50-900-token{
+  color:rgb(var(--color-secondary-900))
+}
+
+.dark .text-secondary-100-800-token{
+  color:rgb(var(--color-secondary-800))
+}
+
+.dark .text-secondary-200-700-token{
+  color:rgb(var(--color-secondary-700))
+}
+
+.dark .text-secondary-300-600-token{
+  color:rgb(var(--color-secondary-600))
+}
+
+.dark .text-secondary-400-500-token{
+  color:rgb(var(--color-secondary-500))
+}
+
+.dark .text-secondary-900-50-token{
+  color:rgb(var(--color-secondary-50))
+}
+
+.dark .text-secondary-800-100-token{
+  color:rgb(var(--color-secondary-100))
+}
+
+.dark .text-secondary-700-200-token{
+  color:rgb(var(--color-secondary-200))
+}
+
+.dark .text-secondary-600-300-token{
+  color:rgb(var(--color-secondary-300))
+}
+
+.dark .text-secondary-500-400-token{
+  color:rgb(var(--color-secondary-400))
+}
+
+.dark .text-tertiary-50-900-token{
+  color:rgb(var(--color-tertiary-900))
+}
+
+.dark .text-tertiary-100-800-token{
+  color:rgb(var(--color-tertiary-800))
+}
+
+.dark .text-tertiary-200-700-token{
+  color:rgb(var(--color-tertiary-700))
+}
+
+.dark .text-tertiary-300-600-token{
+  color:rgb(var(--color-tertiary-600))
+}
+
+.dark .text-tertiary-400-500-token{
+  color:rgb(var(--color-tertiary-500))
+}
+
+.dark .text-tertiary-900-50-token{
+  color:rgb(var(--color-tertiary-50))
+}
+
+.dark .text-tertiary-800-100-token{
+  color:rgb(var(--color-tertiary-100))
+}
+
+.dark .text-tertiary-700-200-token{
+  color:rgb(var(--color-tertiary-200))
+}
+
+.dark .text-tertiary-600-300-token{
+  color:rgb(var(--color-tertiary-300))
+}
+
+.dark .text-tertiary-500-400-token{
+  color:rgb(var(--color-tertiary-400))
+}
+
+.dark .text-success-50-900-token{
+  color:rgb(var(--color-success-900))
+}
+
+.dark .text-success-100-800-token{
+  color:rgb(var(--color-success-800))
+}
+
+.dark .text-success-200-700-token{
+  color:rgb(var(--color-success-700))
+}
+
+.dark .text-success-300-600-token{
+  color:rgb(var(--color-success-600))
+}
+
+.dark .text-success-400-500-token{
+  color:rgb(var(--color-success-500))
+}
+
+.dark .text-success-900-50-token{
+  color:rgb(var(--color-success-50))
+}
+
+.dark .text-success-800-100-token{
+  color:rgb(var(--color-success-100))
+}
+
+.dark .text-success-700-200-token{
+  color:rgb(var(--color-success-200))
+}
+
+.dark .text-success-600-300-token{
+  color:rgb(var(--color-success-300))
+}
+
+.dark .text-success-500-400-token{
+  color:rgb(var(--color-success-400))
+}
+
+.dark .text-warning-50-900-token{
+  color:rgb(var(--color-warning-900))
+}
+
+.dark .text-warning-100-800-token{
+  color:rgb(var(--color-warning-800))
+}
+
+.dark .text-warning-200-700-token{
+  color:rgb(var(--color-warning-700))
+}
+
+.dark .text-warning-300-600-token{
+  color:rgb(var(--color-warning-600))
+}
+
+.dark .text-warning-400-500-token{
+  color:rgb(var(--color-warning-500))
+}
+
+.dark .text-warning-900-50-token{
+  color:rgb(var(--color-warning-50))
+}
+
+.dark .text-warning-800-100-token{
+  color:rgb(var(--color-warning-100))
+}
+
+.dark .text-warning-700-200-token{
+  color:rgb(var(--color-warning-200))
+}
+
+.dark .text-warning-600-300-token{
+  color:rgb(var(--color-warning-300))
+}
+
+.dark .text-warning-500-400-token{
+  color:rgb(var(--color-warning-400))
+}
+
+.dark .text-error-50-900-token{
+  color:rgb(var(--color-error-900))
+}
+
+.dark .text-error-100-800-token{
+  color:rgb(var(--color-error-800))
+}
+
+.dark .text-error-200-700-token{
+  color:rgb(var(--color-error-700))
+}
+
+.dark .text-error-300-600-token{
+  color:rgb(var(--color-error-600))
+}
+
+.dark .text-error-400-500-token{
+  color:rgb(var(--color-error-500))
+}
+
+.dark .text-error-900-50-token{
+  color:rgb(var(--color-error-50))
+}
+
+.dark .text-error-800-100-token{
+  color:rgb(var(--color-error-100))
+}
+
+.dark .text-error-700-200-token{
+  color:rgb(var(--color-error-200))
+}
+
+.dark .text-error-600-300-token{
+  color:rgb(var(--color-error-300))
+}
+
+.dark .text-error-500-400-token{
+  color:rgb(var(--color-error-400))
+}
+
+.dark .text-surface-50-900-token{
+  color:rgb(var(--color-surface-900))
+}
+
+.dark .text-surface-100-800-token{
+  color:rgb(var(--color-surface-800))
+}
+
+.dark .text-surface-200-700-token{
+  color:rgb(var(--color-surface-700))
+}
+
+.dark .text-surface-300-600-token{
+  color:rgb(var(--color-surface-600))
+}
+
+.dark .text-surface-400-500-token{
+  color:rgb(var(--color-surface-500))
+}
+
+.dark .text-surface-900-50-token{
+  color:rgb(var(--color-surface-50))
+}
+
+.dark .text-surface-800-100-token{
+  color:rgb(var(--color-surface-100))
+}
+
+.dark .text-surface-700-200-token{
+  color:rgb(var(--color-surface-200))
+}
+
+.dark .text-surface-600-300-token{
+  color:rgb(var(--color-surface-300))
+}
+
+.dark .text-surface-500-400-token{
+  color:rgb(var(--color-surface-400))
+}
+
+.dark .ring-outline-token{
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);
+  --tw-ring-inset: inset;
+  --tw-ring-color: rgb(250 250 250 / .05)
+}
+
+.dark .ring-primary-50-900-token{
+  --tw-ring-color: rgb(var(--color-primary-900) / 1)
+}
+
+.dark .ring-primary-100-800-token{
+  --tw-ring-color: rgb(var(--color-primary-800) / 1)
+}
+
+.dark .ring-primary-200-700-token{
+  --tw-ring-color: rgb(var(--color-primary-700) / 1)
+}
+
+.dark .ring-primary-300-600-token{
+  --tw-ring-color: rgb(var(--color-primary-600) / 1)
+}
+
+.dark .ring-primary-400-500-token{
+  --tw-ring-color: rgb(var(--color-primary-500) / 1)
+}
+
+.dark .ring-primary-900-50-token{
+  --tw-ring-color: rgb(var(--color-primary-50) / 1)
+}
+
+.dark .ring-primary-800-100-token{
+  --tw-ring-color: rgb(var(--color-primary-100) / 1)
+}
+
+.dark .ring-primary-700-200-token{
+  --tw-ring-color: rgb(var(--color-primary-200) / 1)
+}
+
+.dark .ring-primary-600-300-token{
+  --tw-ring-color: rgb(var(--color-primary-300) / 1)
+}
+
+.dark .ring-primary-500-400-token{
+  --tw-ring-color: rgb(var(--color-primary-400) / 1)
+}
+
+.dark .ring-secondary-50-900-token{
+  --tw-ring-color: rgb(var(--color-secondary-900) / 1)
+}
+
+.dark .ring-secondary-100-800-token{
+  --tw-ring-color: rgb(var(--color-secondary-800) / 1)
+}
+
+.dark .ring-secondary-200-700-token{
+  --tw-ring-color: rgb(var(--color-secondary-700) / 1)
+}
+
+.dark .ring-secondary-300-600-token{
+  --tw-ring-color: rgb(var(--color-secondary-600) / 1)
+}
+
+.dark .ring-secondary-400-500-token{
+  --tw-ring-color: rgb(var(--color-secondary-500) / 1)
+}
+
+.dark .ring-secondary-900-50-token{
+  --tw-ring-color: rgb(var(--color-secondary-50) / 1)
+}
+
+.dark .ring-secondary-800-100-token{
+  --tw-ring-color: rgb(var(--color-secondary-100) / 1)
+}
+
+.dark .ring-secondary-700-200-token{
+  --tw-ring-color: rgb(var(--color-secondary-200) / 1)
+}
+
+.dark .ring-secondary-600-300-token{
+  --tw-ring-color: rgb(var(--color-secondary-300) / 1)
+}
+
+.dark .ring-secondary-500-400-token{
+  --tw-ring-color: rgb(var(--color-secondary-400) / 1)
+}
+
+.dark .ring-tertiary-50-900-token{
+  --tw-ring-color: rgb(var(--color-tertiary-900) / 1)
+}
+
+.dark .ring-tertiary-100-800-token{
+  --tw-ring-color: rgb(var(--color-tertiary-800) / 1)
+}
+
+.dark .ring-tertiary-200-700-token{
+  --tw-ring-color: rgb(var(--color-tertiary-700) / 1)
+}
+
+.dark .ring-tertiary-300-600-token{
+  --tw-ring-color: rgb(var(--color-tertiary-600) / 1)
+}
+
+.dark .ring-tertiary-400-500-token{
+  --tw-ring-color: rgb(var(--color-tertiary-500) / 1)
+}
+
+.dark .ring-tertiary-900-50-token{
+  --tw-ring-color: rgb(var(--color-tertiary-50) / 1)
+}
+
+.dark .ring-tertiary-800-100-token{
+  --tw-ring-color: rgb(var(--color-tertiary-100) / 1)
+}
+
+.dark .ring-tertiary-700-200-token{
+  --tw-ring-color: rgb(var(--color-tertiary-200) / 1)
+}
+
+.dark .ring-tertiary-600-300-token{
+  --tw-ring-color: rgb(var(--color-tertiary-300) / 1)
+}
+
+.dark .ring-tertiary-500-400-token{
+  --tw-ring-color: rgb(var(--color-tertiary-400) / 1)
+}
+
+.dark .ring-success-50-900-token{
+  --tw-ring-color: rgb(var(--color-success-900) / 1)
+}
+
+.dark .ring-success-100-800-token{
+  --tw-ring-color: rgb(var(--color-success-800) / 1)
+}
+
+.dark .ring-success-200-700-token{
+  --tw-ring-color: rgb(var(--color-success-700) / 1)
+}
+
+.dark .ring-success-300-600-token{
+  --tw-ring-color: rgb(var(--color-success-600) / 1)
+}
+
+.dark .ring-success-400-500-token{
+  --tw-ring-color: rgb(var(--color-success-500) / 1)
+}
+
+.dark .ring-success-900-50-token{
+  --tw-ring-color: rgb(var(--color-success-50) / 1)
+}
+
+.dark .ring-success-800-100-token{
+  --tw-ring-color: rgb(var(--color-success-100) / 1)
+}
+
+.dark .ring-success-700-200-token{
+  --tw-ring-color: rgb(var(--color-success-200) / 1)
+}
+
+.dark .ring-success-600-300-token{
+  --tw-ring-color: rgb(var(--color-success-300) / 1)
+}
+
+.dark .ring-success-500-400-token{
+  --tw-ring-color: rgb(var(--color-success-400) / 1)
+}
+
+.dark .ring-warning-50-900-token{
+  --tw-ring-color: rgb(var(--color-warning-900) / 1)
+}
+
+.dark .ring-warning-100-800-token{
+  --tw-ring-color: rgb(var(--color-warning-800) / 1)
+}
+
+.dark .ring-warning-200-700-token{
+  --tw-ring-color: rgb(var(--color-warning-700) / 1)
+}
+
+.dark .ring-warning-300-600-token{
+  --tw-ring-color: rgb(var(--color-warning-600) / 1)
+}
+
+.dark .ring-warning-400-500-token{
+  --tw-ring-color: rgb(var(--color-warning-500) / 1)
+}
+
+.dark .ring-warning-900-50-token{
+  --tw-ring-color: rgb(var(--color-warning-50) / 1)
+}
+
+.dark .ring-warning-800-100-token{
+  --tw-ring-color: rgb(var(--color-warning-100) / 1)
+}
+
+.dark .ring-warning-700-200-token{
+  --tw-ring-color: rgb(var(--color-warning-200) / 1)
+}
+
+.dark .ring-warning-600-300-token{
+  --tw-ring-color: rgb(var(--color-warning-300) / 1)
+}
+
+.dark .ring-warning-500-400-token{
+  --tw-ring-color: rgb(var(--color-warning-400) / 1)
+}
+
+.dark .ring-error-50-900-token{
+  --tw-ring-color: rgb(var(--color-error-900) / 1)
+}
+
+.dark .ring-error-100-800-token{
+  --tw-ring-color: rgb(var(--color-error-800) / 1)
+}
+
+.dark .ring-error-200-700-token{
+  --tw-ring-color: rgb(var(--color-error-700) / 1)
+}
+
+.dark .ring-error-300-600-token{
+  --tw-ring-color: rgb(var(--color-error-600) / 1)
+}
+
+.dark .ring-error-400-500-token{
+  --tw-ring-color: rgb(var(--color-error-500) / 1)
+}
+
+.dark .ring-error-900-50-token{
+  --tw-ring-color: rgb(var(--color-error-50) / 1)
+}
+
+.dark .ring-error-800-100-token{
+  --tw-ring-color: rgb(var(--color-error-100) / 1)
+}
+
+.dark .ring-error-700-200-token{
+  --tw-ring-color: rgb(var(--color-error-200) / 1)
+}
+
+.dark .ring-error-600-300-token{
+  --tw-ring-color: rgb(var(--color-error-300) / 1)
+}
+
+.dark .ring-error-500-400-token{
+  --tw-ring-color: rgb(var(--color-error-400) / 1)
+}
+
+.dark .ring-surface-50-900-token{
+  --tw-ring-color: rgb(var(--color-surface-900) / 1)
+}
+
+.dark .ring-surface-100-800-token{
+  --tw-ring-color: rgb(var(--color-surface-800) / 1)
+}
+
+.dark .ring-surface-200-700-token{
+  --tw-ring-color: rgb(var(--color-surface-700) / 1)
+}
+
+.dark .ring-surface-300-600-token{
+  --tw-ring-color: rgb(var(--color-surface-600) / 1)
+}
+
+.dark .ring-surface-400-500-token{
+  --tw-ring-color: rgb(var(--color-surface-500) / 1)
+}
+
+.dark .ring-surface-900-50-token{
+  --tw-ring-color: rgb(var(--color-surface-50) / 1)
+}
+
+.dark .ring-surface-800-100-token{
+  --tw-ring-color: rgb(var(--color-surface-100) / 1)
+}
+
+.dark .ring-surface-700-200-token{
+  --tw-ring-color: rgb(var(--color-surface-200) / 1)
+}
+
+.dark .ring-surface-600-300-token{
+  --tw-ring-color: rgb(var(--color-surface-300) / 1)
+}
+
+.dark .ring-surface-500-400-token{
+  --tw-ring-color: rgb(var(--color-surface-400) / 1)
+}
+
+.hover\:cursor-pointer:hover{
+  cursor:pointer
+}
+
+.hover\:bg-primary-100:hover{
+  --tw-bg-opacity: 1;
+  background-color:rgb(var(--color-primary-100) / var(--tw-bg-opacity))
+}
+
+.hover\:text-primary-900:hover{
+  --tw-text-opacity: 1;
+  color:rgb(var(--color-primary-900) / var(--tw-text-opacity))
+}
+
+@media (min-width: 1024px){
+  .lg\:max-h-\[500px\]{
+    max-height:500px
+  }
+}
+
+:root{
+  --theme-font-family-base: system-ui;
+  --theme-font-family-heading: system-ui;
+  --theme-font-color-base: 0 0 0;
+  --theme-font-color-dark: 255 255 255;
+  --theme-rounded-base: 9999px;
+  --theme-rounded-container: 8px;
+  --theme-border-base: 1px;
+  --on-primary: 0 0 0;
+  --on-secondary: 255 255 255;
+  --on-tertiary: 0 0 0;
+  --on-success: 0 0 0;
+  --on-warning: 0 0 0;
+  --on-error: 255 255 255;
+  --on-surface: 255 255 255;
+  --color-primary-50: 219 245 236;
+  --color-primary-100: 207 241 230;
+  --color-primary-200: 195 238 224;
+  --color-primary-300: 159 227 205;
+  --color-primary-400: 87 207 167;
+  --color-primary-500: 15 186 129;
+  --color-primary-600: 14 167 116;
+  --color-primary-700: 11 140 97;
+  --color-primary-800: 9 112 77;
+  --color-primary-900: 7 91 63;
+  --color-secondary-50: 229 227 251;
+  --color-secondary-100: 220 218 250;
+  --color-secondary-200: 211 209 249;
+  --color-secondary-300: 185 181 245;
+  --color-secondary-400: 132 126 237;
+  --color-secondary-500: 79 70 229;
+  --color-secondary-600: 71 63 206;
+  --color-secondary-700: 59 53 172;
+  --color-secondary-800: 47 42 137;
+  --color-secondary-900: 39 34 112;
+  --color-tertiary-50: 219 242 252;
+  --color-tertiary-100: 207 237 251;
+  --color-tertiary-200: 195 233 250;
+  --color-tertiary-300: 159 219 246;
+  --color-tertiary-400: 86 192 240;
+  --color-tertiary-500: 14 165 233;
+  --color-tertiary-600: 13 149 210;
+  --color-tertiary-700: 11 124 175;
+  --color-tertiary-800: 8 99 140;
+  --color-tertiary-900: 7 81 114;
+  --color-success-50: 237 247 220;
+  --color-success-100: 230 245 208;
+  --color-success-200: 224 242 197;
+  --color-success-300: 206 235 162;
+  --color-success-400: 169 219 92;
+  --color-success-500: 132 204 22;
+  --color-success-600: 119 184 20;
+  --color-success-700: 99 153 17;
+  --color-success-800: 79 122 13;
+  --color-success-900: 65 100 11;
+  --color-warning-50: 252 244 218;
+  --color-warning-100: 251 240 206;
+  --color-warning-200: 250 236 193;
+  --color-warning-300: 247 225 156;
+  --color-warning-400: 240 202 82;
+  --color-warning-500: 234 179 8;
+  --color-warning-600: 211 161 7;
+  --color-warning-700: 176 134 6;
+  --color-warning-800: 140 107 5;
+  --color-warning-900: 115 88 4;
+  --color-error-50: 249 221 234;
+  --color-error-100: 246 209 228;
+  --color-error-200: 244 198 221;
+  --color-error-300: 238 163 200;
+  --color-error-400: 225 94 159;
+  --color-error-500: 212 25 118;
+  --color-error-600: 191 23 106;
+  --color-error-700: 159 19 89;
+  --color-error-800: 127 15 71;
+  --color-error-900: 104 12 58;
+  --color-surface-50: 228 230 238;
+  --color-surface-100: 219 222 233;
+  --color-surface-200: 210 214 227;
+  --color-surface-300: 182 189 210;
+  --color-surface-400: 128 140 177;
+  --color-surface-500: 73 90 143;
+  --color-surface-600: 66 81 129;
+  --color-surface-700: 55 68 107;
+  --color-surface-800: 44 54 86;
+  --color-surface-900: 36 44 70
+}
+
+[data-theme=vuetiful] h1,[data-theme=vuetiful] h2,[data-theme=vuetiful] h3,[data-theme=vuetiful] h4,[data-theme=vuetiful] h5,[data-theme=vuetiful] h6{
+  font-weight:700
+}
+
+[data-theme=vuetiful]{
+  background-image:radial-gradient(at 0% 0%,rgba(var(--color-secondary-500) / .33) 0px,transparent 50%),radial-gradient(at 98% 1%,rgba(var(--color-error-500) / .33) 0px,transparent 50%)
+}
+
+.cc-theme-switcher__popup[data-v-74718370]{
+  position:absolute;
+  z-index:1;
+  margin-top:.25rem
+}