html[data-theme=dark] {
background-color: hsl(var(--b1, 223 14% 10%));
color: hsl(var(--bc, 223 14% 89%))
}
body {
background-color: inherit;
color: inherit
}
:root {
--color-primary: #FFD700;
--color-primary-content: #000000;
--color-secondary: #FF0000;
--color-secondary-content: #FFFFFF;
--color-accent: #00FF00;
--color-accent-content: #000000;
--color-neutral: #3A3A3A;
--color-neutral-content: #E5E5E5;
--color-base-100: #0A0A0A;
--color-base-200: #1A1A1A;
--color-base-300: #252525;
--color-base-content: #FFFFFF;
--color-cta-primary: #FF0000;
--color-cta-primary-content: #FFFFFF;
--color-cta-secondary: #FFD700;
--color-cta-secondary-content: #000000;
--color-border-default: #2A2A2A;
--color-border-decorative: #FFD700;
--color-info: #3ABFF8;
--color-info-content: #002B47;
--color-success: #4ADE80;
--color-success-content: #003320;
--color-warning: #FFB300;
--color-warning-content: #3D2000;
--color-error: #FF5757;
--color-error-content: #FFFFFF;
--border-none: 0;
--border-thin: 1px;
--border-medium: 2px;
--border-thick: 3px;
--shadow-none: none;
--shadow-small: 0 2px 4px rgba(0, 0, 0, 0.5);
--shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.6);
--shadow-large: 0 8px 16px rgba(0, 0, 0, 0.7);
--shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.8);
--shadow-card: 0 4px 12px rgba(0, 0, 0, 0.6);
--shadow-button: 0 4px 8px rgba(255, 0, 0, 0.3);
--shadow-header: 0 2px 8px rgba(0, 0, 0, 0.7);
--shadow-dropdown: 0 8px 20px rgba(0, 0, 0, 0.8);
--radius-sharp: 0;
--radius-rounded: 8px;
--radius-pill: 50px;
--font-display: 'Bebas Neue', system-ui, sans-serif;
--font-body: 'Inter', system-ui, sans-serif;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-black: 900;
--font-weight-heading: 700;
--font-weight-button: 700;
--font-weight-label: 500;
--card-background: #1A1A1A;
--card-background-hover: #252525;
--card-border-color: #2A2A2A;
--card-border-thickness: 1px;
--card-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
--card-radius: 8px;
--button-primary-bg: #FF0000;
--button-primary-text: #FFFFFF;
--button-primary-border: transparent;
--button-primary-border-width: 0;
--button-primary-shadow: 0 4px 12px rgba(255, 0, 0, 0.4);
--button-primary-hover-bg: #CC0000;
--button-primary-hover-text: #FFFFFF;
--button-primary-hover-border: transparent;
--button-secondary-bg: transparent;
--button-secondary-text: #FFFFFF;
--button-secondary-border: #FFFFFF;
--button-secondary-border-width: 2px;
--button-secondary-shadow: none;
--button-secondary-hover-bg: #FFFFFF;
--button-secondary-hover-text: #000000;
--button-secondary-hover-border: #FFFFFF;
--button-radius: 4px;
--button-font-weight: 700;
--button-transition: all 200ms ease;
--link-color: #FFFFFF;
--link-hover-color: #FFD700;
--link-opacity: 0.7;
--link-hover-opacity: 1;
--icon-color: #FFD700;
--icon-size: 1.25rem;
--transition-fast: 200ms;
--transition-medium: 300ms;
--transition-slow: 500ms;
--focus-outline-width: 2px;
--focus-outline-color: #FFD700;
--focus-outline-offset: 2px;
--overlay-gradient: linear-gradient(to top, rgba(26, 26, 26, 0.8), rgba(26, 26, 26, 0.4), transparent)
}
*, :after, :before {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / .5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style:
}
*, :after, :before {
box-sizing: border-box;
border-width: 0;
border-style: solid;
border-color: #e5e7eb
}
:after, :before {
--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, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
font-feature-settings: normal;
font-variation-settings: normal;
-webkit-tap-highlight-color: transparent
}
body {
margin: 0;
line-height: inherit
}
h1, h2, h3 {
font-size: inherit;
font-weight: inherit
}
a {
color: inherit;
text-decoration: inherit
}
table {
text-indent: 0;
border-color: inherit;
border-collapse: collapse
}
button {
font-family: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
letter-spacing: inherit;
color: inherit;
margin: 0;
padding: 0
}
button {
text-transform: none
}
button {
-webkit-appearance: button;
background-color: transparent;
background-image: none
}
summary {
display: list-item
}
h1, h2, h3, p {
margin: 0
}
ul {
list-style: none;
margin: 0;
padding: 0
}
button {
cursor: pointer
}
img, svg {
display: block;
vertical-align: middle
}
img {
max-width: 100%;
height: auto
}
@property --radialprogress {
syntax: "";
inherits: true;
initial-value: 0%
}
:root {
--fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E")
}
:root {
background-color: var(--root-bg, var(--color-base-100));
color: var(--color-base-content)
}
:root {
scrollbar-color: color-mix(in oklch, currentColor 35%, #0000) #0000
}
:root {
--color-primary: #FFD700;
--color-primary-content: #000000;
--color-secondary: #FF0000;
--color-secondary-content: #FFFFFF;
--color-accent: #00FF00;
--color-accent-content: #000000;
--color-neutral: #3A3A3A;
--color-neutral-content: #E5E5E5;
--color-base-100: #0A0A0A;
--color-base-200: #1A1A1A;
--color-base-300: #252525;
--color-base-content: #FFFFFF;
--color-cta-primary: #FF0000;
--color-cta-primary-content: #FFFFFF;
--color-cta-secondary: #FFD700;
--color-cta-secondary-content: #000000;
--color-border-default: #2A2A2A;
--color-border-decorative: #FFD700;
--color-info: #3ABFF8;
--color-info-content: #002B47;
--color-success: #4ADE80;
--color-success-content: #003320;
--color-warning: #FFB300;
--color-warning-content: #3D2000;
--color-error: #FF5757;
--color-error-content: #FFFFFF;
--border-none: 0;
--border-thin: 1px;
--border-medium: 2px;
--border-thick: 3px;
--shadow-none: none;
--shadow-small: 0 2px 4px rgba(0, 0, 0, .5);
--shadow-medium: 0 4px 8px rgba(0, 0, 0, .6);
--shadow-large: 0 8px 16px rgba(0, 0, 0, .7);
--shadow-xl: 0 12px 24px rgba(0, 0, 0, .8);
--shadow-card: 0 4px 12px rgba(0, 0, 0, .6);
--shadow-button: 0 4px 8px rgba(255, 0, 0, .3);
--shadow-header: 0 2px 8px rgba(0, 0, 0, .7);
--shadow-dropdown: 0 8px 20px rgba(0, 0, 0, .8);
--radius-sharp: 0;
--radius-rounded: 8px;
--radius-pill: 50px;
--font-display: "Bebas Neue", system-ui, sans-serif;
--font-body: "Inter", system-ui, sans-serif;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-black: 900;
--font-weight-heading: 700;
--font-weight-button: 700;
--font-weight-label: 500;
--card-background: #1A1A1A;
--card-background-hover: #252525;
--card-border-color: #2A2A2A;
--card-border-thickness: 1px;
--card-shadow: 0 4px 12px rgba(0, 0, 0, .6);
--card-radius: 8px;
--button-primary-bg: #FF0000;
--button-primary-text: #FFFFFF;
--button-primary-border: transparent;
--button-primary-border-width: 0;
--button-primary-shadow: 0 4px 12px rgba(255, 0, 0, .4);
--button-primary-hover-bg: #CC0000;
--button-primary-hover-text: #FFFFFF;
--button-primary-hover-border: transparent;
--button-secondary-bg: transparent;
--button-secondary-text: #FFFFFF;
--button-secondary-border: #FFFFFF;
--button-secondary-border-width: 2px;
--button-secondary-shadow: none;
--button-secondary-hover-bg: #FFFFFF;
--button-secondary-hover-text: #000000;
--button-secondary-hover-border: #FFFFFF;
--button-radius: 4px;
--button-font-weight: 700;
--button-transition: all .2s ease;
--link-color: #FFFFFF;
--link-hover-color: #FFD700;
--link-opacity: .7;
--link-hover-opacity: 1;
--icon-color: #FFD700;
--icon-size: 1.25rem;
--transition-fast: .2s;
--transition-medium: .3s;
--transition-slow: .5s;
--focus-outline-width: 2px;
--focus-outline-color: #FFD700;
--focus-outline-offset: 2px;
--overlay-gradient: linear-gradient(to top, rgba(26, 26, 26, .8), rgba(26, 26, 26, .4), transparent)
}
@media (prefers-color-scheme: dark) {
:root {
--color-primary: #FFD700;
--color-primary-content: #000000;
--color-secondary: #FF0000;
--color-secondary-content: #FFFFFF;
--color-accent: #00FF00;
--color-accent-content: #000000;
--color-neutral: #3A3A3A;
--color-neutral-content: #E5E5E5;
--color-base-100: #0A0A0A;
--color-base-200: #1A1A1A;
--color-base-300: #252525;
--color-base-content: #FFFFFF;
--color-cta-primary: #FF0000;
--color-cta-primary-content: #FFFFFF;
--color-cta-secondary: #FFD700;
--color-cta-secondary-content: #000000;
--color-border-default: #2A2A2A;
--color-border-decorative: #FFD700;
--color-info: #3ABFF8;
--color-info-content: #002B47;
--color-success: #4ADE80;
--color-success-content: #003320;
--color-warning: #FFB300;
--color-warning-content: #3D2000;
--color-error: #FF5757;
--color-error-content: #FFFFFF;
--border-none: 0;
--border-thin: 1px;
--border-medium: 2px;
--border-thick: 3px;
--shadow-none: none;
--shadow-small: 0 2px 4px rgba(0, 0, 0, .5);
--shadow-medium: 0 4px 8px rgba(0, 0, 0, .6);
--shadow-large: 0 8px 16px rgba(0, 0, 0, .7);
--shadow-xl: 0 12px 24px rgba(0, 0, 0, .8);
--shadow-card: 0 4px 12px rgba(0, 0, 0, .6);
--shadow-button: 0 4px 8px rgba(255, 0, 0, .3);
--shadow-header: 0 2px 8px rgba(0, 0, 0, .7);
--shadow-dropdown: 0 8px 20px rgba(0, 0, 0, .8);
--radius-sharp: 0;
--radius-rounded: 8px;
--radius-pill: 50px;
--font-display: "Bebas Neue", system-ui, sans-serif;
--font-body: "Inter", system-ui, sans-serif;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-black: 900;
--font-weight-heading: 700;
--font-weight-button: 700;
--font-weight-label: 500;
--card-background: #1A1A1A;
--card-background-hover: #252525;
--card-border-color: #2A2A2A;
--card-border-thickness: 1px;
--card-shadow: 0 4px 12px rgba(0, 0, 0, .6);
--card-radius: 8px;
--button-primary-bg: #FF0000;
--button-primary-text: #FFFFFF;
--button-primary-border: transparent;
--button-primary-border-width: 0;
--button-primary-shadow: 0 4px 12px rgba(255, 0, 0, .4);
--button-primary-hover-bg: #CC0000;
--button-primary-hover-text: #FFFFFF;
--button-primary-hover-border: transparent;
--button-secondary-bg: transparent;
--button-secondary-text: #FFFFFF;
--button-secondary-border: #FFFFFF;
--button-secondary-border-width: 2px;
--button-secondary-shadow: none;
--button-secondary-hover-bg: #FFFFFF;
--button-secondary-hover-text: #000000;
--button-secondary-hover-border: #FFFFFF;
--button-radius: 4px;
--button-font-weight: 700;
--button-transition: all .2s ease;
--link-color: #FFFFFF;
--link-hover-color: #FFD700;
--link-opacity: .7;
--link-hover-opacity: 1;
--icon-color: #FFD700;
--icon-size: 1.25rem;
--transition-fast: .2s;
--transition-medium: .3s;
--transition-slow: .5s;
--focus-outline-width: 2px;
--focus-outline-color: #FFD700;
--focus-outline-offset: 2px;
--overlay-gradient: linear-gradient(to top, rgba(26, 26, 26, .8), rgba(26, 26, 26, .4), transparent)
}
}
.container {
width: 100%
}
@media (min-width: 640px) {
.container {
max-width: 640px
}
}
@media (min-width: 768px) {
.container {
max-width: 768px
}
}
@media (min-width: 1024px) {
.container {
max-width: 1024px
}
}
@media (min-width: 1280px) {
.container {
max-width: 1280px
}
}
@media (min-width: 1536px) {
.container {
max-width: 1536px
}
}
.prose {
color: var(--tw-prose-body);
max-width: 65ch
}
.prose :where(p):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 1.25em;
margin-bottom: 1.25em
}
.prose :where([class~=lead]):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-lead);
font-size: 1.25em;
line-height: 1.6;
margin-top: 1.2em;
margin-bottom: 1.2em
}
.prose :where(a):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-links);
text-decoration: underline;
font-weight: 500
}
.prose :where(strong):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-bold);
font-weight: 600
}
.prose :where(a strong):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit
}
.prose :where(blockquote strong):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit
}
.prose :where(thead th strong):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit
}
.prose :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: decimal;
margin-top: 1.25em;
margin-bottom: 1.25em;
padding-inline-start: 1.625em
}
.prose :where(ol[type=A]):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: upper-alpha
}
.prose :where(ol[type=a]):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: lower-alpha
}
.prose :where(ol[type=A s]):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: upper-alpha
}
.prose :where(ol[type=a s]):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: lower-alpha
}
.prose :where(ol[type=I]):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: upper-roman
}
.prose :where(ol[type=i]):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: lower-roman
}
.prose :where(ol[type=I s]):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: upper-roman
}
.prose :where(ol[type=i s]):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: lower-roman
}
.prose :where(ol[type="1"]):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: decimal
}
.prose :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: disc;
margin-top: 1.25em;
margin-bottom: 1.25em;
padding-inline-start: 1.625em
}
.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker {
font-weight: 400;
color: var(--tw-prose-counters)
}
.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker {
color: var(--tw-prose-bullets)
}
.prose :where(dt):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-headings);
font-weight: 600;
margin-top: 1.25em
}
.prose :where(hr):not(:where([class~=not-prose],[class~=not-prose] *)) {
border-color: var(--tw-prose-hr);
border-top-width: 1px;
margin-top: 3em;
margin-bottom: 3em
}
.prose :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)) {
font-weight: 500;
font-style: italic;
color: var(--tw-prose-quotes);
border-inline-start-width: .25rem;
border-inline-start-color: var(--tw-prose-quote-borders);
quotes: "“" "”" "‘" "’";
margin-top: 1.6em;
margin-bottom: 1.6em;
padding-inline-start: 1em
}
.prose :where(blockquote p:first-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):before {
content: open-quote
}
.prose :where(blockquote p:last-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):after {
content: close-quote
}
.prose :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-headings);
font-weight: 800;
font-size: 2.25em;
margin-top: 0;
margin-bottom: .8888889em;
line-height: 1.1111111
}
.prose :where(h1 strong):not(:where([class~=not-prose],[class~=not-prose] *)) {
font-weight: 900;
color: inherit
}
.prose :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-headings);
font-weight: 700;
font-size: 1.5em;
margin-top: 2em;
margin-bottom: 1em;
line-height: 1.3333333
}
.prose :where(h2 strong):not(:where([class~=not-prose],[class~=not-prose] *)) {
font-weight: 800;
color: inherit
}
.prose :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-headings);
font-weight: 600;
font-size: 1.25em;
margin-top: 1.6em;
margin-bottom: .6em;
line-height: 1.6
}
.prose :where(h3 strong):not(:where([class~=not-prose],[class~=not-prose] *)) {
font-weight: 700;
color: inherit
}
.prose :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-headings);
font-weight: 600;
margin-top: 1.5em;
margin-bottom: .5em;
line-height: 1.5
}
.prose :where(h4 strong):not(:where([class~=not-prose],[class~=not-prose] *)) {
font-weight: 700;
color: inherit
}
.prose :where(img):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 2em;
margin-bottom: 2em
}
.prose :where(picture):not(:where([class~=not-prose],[class~=not-prose] *)) {
display: block;
margin-top: 2em;
margin-bottom: 2em
}
.prose :where(video):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 2em;
margin-bottom: 2em
}
.prose :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)) {
font-weight: 500;
font-family: inherit;
color: var(--tw-prose-kbd);
box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px rgb(var(--tw-prose-kbd-shadows) / 10%);
font-size: .875em;
border-radius: .3125rem;
padding-top: .1875em;
padding-inline-end: .375em;
padding-bottom: .1875em;
padding-inline-start: .375em
}
.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-code);
font-weight: 600;
font-size: .875em
}
.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):before {
content: "`"
}
.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):after {
content: "`"
}
.prose :where(a code):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit
}
.prose :where(h1 code):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit
}
.prose :where(h2 code):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit;
font-size: .875em
}
.prose :where(h3 code):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit;
font-size: .9em
}
.prose :where(h4 code):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit
}
.prose :where(blockquote code):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit
}
.prose :where(thead th code):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit
}
.prose :where(pre):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-pre-code);
background-color: var(--tw-prose-pre-bg);
overflow-x: auto;
font-weight: 400;
font-size: .875em;
line-height: 1.7142857;
margin-top: 1.7142857em;
margin-bottom: 1.7142857em;
border-radius: .375rem;
padding-top: .8571429em;
padding-inline-end: 1.1428571em;
padding-bottom: .8571429em;
padding-inline-start: 1.1428571em
}
.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)) {
background-color: transparent;
border-width: 0;
border-radius: 0;
padding: 0;
font-weight: inherit;
color: inherit;
font-size: inherit;
font-family: inherit;
line-height: inherit
}
.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):before {
content: none
}
.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):after {
content: none
}
.prose :where(table):not(:where([class~=not-prose],[class~=not-prose] *)) {
width: 100%;
table-layout: auto;
margin-top: 2em;
margin-bottom: 2em;
font-size: .875em;
line-height: 1.7142857
}
.prose :where(thead):not(:where([class~=not-prose],[class~=not-prose] *)) {
border-bottom-width: 1px;
border-bottom-color: var(--tw-prose-th-borders)
}
.prose :where(thead th):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-headings);
font-weight: 600;
vertical-align: bottom;
padding-inline-end: .5714286em;
padding-bottom: .5714286em;
padding-inline-start: .5714286em
}
.prose :where(tbody tr):not(:where([class~=not-prose],[class~=not-prose] *)) {
border-bottom-width: 1px;
border-bottom-color: var(--tw-prose-td-borders)
}
.prose :where(tbody tr:last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
border-bottom-width: 0
}
.prose :where(tbody td):not(:where([class~=not-prose],[class~=not-prose] *)) {
vertical-align: baseline
}
.prose :where(tfoot):not(:where([class~=not-prose],[class~=not-prose] *)) {
border-top-width: 1px;
border-top-color: var(--tw-prose-th-borders)
}
.prose :where(tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)) {
vertical-align: top
}
.prose :where(th,td):not(:where([class~=not-prose],[class~=not-prose] *)) {
text-align: start
}
.prose :where(figure>*):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 0;
margin-bottom: 0
}
.prose :where(figcaption):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-captions);
font-size: .875em;
line-height: 1.4285714;
margin-top: .8571429em
}
.prose {
--tw-prose-body: #374151;
--tw-prose-headings: #111827;
--tw-prose-lead: #4b5563;
--tw-prose-links: #111827;
--tw-prose-bold: #111827;
--tw-prose-counters: #6b7280;
--tw-prose-bullets: #d1d5db;
--tw-prose-hr: #e5e7eb;
--tw-prose-quotes: #111827;
--tw-prose-quote-borders: #e5e7eb;
--tw-prose-captions: #6b7280;
--tw-prose-kbd: #111827;
--tw-prose-kbd-shadows: 17 24 39;
--tw-prose-code: #111827;
--tw-prose-pre-code: #e5e7eb;
--tw-prose-pre-bg: #1f2937;
--tw-prose-th-borders: #d1d5db;
--tw-prose-td-borders: #e5e7eb;
--tw-prose-invert-body: #d1d5db;
--tw-prose-invert-headings: #fff;
--tw-prose-invert-lead: #9ca3af;
--tw-prose-invert-links: #fff;
--tw-prose-invert-bold: #fff;
--tw-prose-invert-counters: #9ca3af;
--tw-prose-invert-bullets: #4b5563;
--tw-prose-invert-hr: #374151;
--tw-prose-invert-quotes: #f3f4f6;
--tw-prose-invert-quote-borders: #374151;
--tw-prose-invert-captions: #9ca3af;
--tw-prose-invert-kbd: #fff;
--tw-prose-invert-kbd-shadows: 255 255 255;
--tw-prose-invert-code: #fff;
--tw-prose-invert-pre-code: #d1d5db;
--tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
--tw-prose-invert-th-borders: #4b5563;
--tw-prose-invert-td-borders: #374151;
font-size: 1rem;
line-height: 1.75
}
.prose :where(picture>img):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 0;
margin-bottom: 0
}
.prose :where(li):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: .5em;
margin-bottom: .5em
}
.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *)) {
padding-inline-start: .375em
}
.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *)) {
padding-inline-start: .375em
}
.prose :where(.prose>ul>li p):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: .75em;
margin-bottom: .75em
}
.prose :where(.prose>ul>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 1.25em
}
.prose :where(.prose>ul>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-bottom: 1.25em
}
.prose :where(.prose>ol>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 1.25em
}
.prose :where(.prose>ol>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-bottom: 1.25em
}
.prose :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: .75em;
margin-bottom: .75em
}
.prose :where(dl):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 1.25em;
margin-bottom: 1.25em
}
.prose :where(dd):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: .5em;
padding-inline-start: 1.625em
}
.prose :where(hr+*):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 0
}
.prose :where(h2+*):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 0
}
.prose :where(h3+*):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 0
}
.prose :where(h4+*):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 0
}
.prose :where(thead th:first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
padding-inline-start: 0
}
.prose :where(thead th:last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
padding-inline-end: 0
}
.prose :where(tbody td,tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)) {
padding-top: .5714286em;
padding-inline-end: .5714286em;
padding-bottom: .5714286em;
padding-inline-start: .5714286em
}
.prose :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
padding-inline-start: 0
}
.prose :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
padding-inline-end: 0
}
.prose :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 2em;
margin-bottom: 2em
}
.prose :where(.prose>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 0
}
.prose :where(.prose>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-bottom: 0
}
.prose-invert {
--tw-prose-body: var(--tw-prose-invert-body);
--tw-prose-headings: var(--tw-prose-invert-headings);
--tw-prose-lead: var(--tw-prose-invert-lead);
--tw-prose-links: var(--tw-prose-invert-links);
--tw-prose-bold: var(--tw-prose-invert-bold);
--tw-prose-counters: var(--tw-prose-invert-counters);
--tw-prose-bullets: var(--tw-prose-invert-bullets);
--tw-prose-hr: var(--tw-prose-invert-hr);
--tw-prose-quotes: var(--tw-prose-invert-quotes);
--tw-prose-quote-borders: var(--tw-prose-invert-quote-borders);
--tw-prose-captions: var(--tw-prose-invert-captions);
--tw-prose-kbd: var(--tw-prose-invert-kbd);
--tw-prose-kbd-shadows: var(--tw-prose-invert-kbd-shadows);
--tw-prose-code: var(--tw-prose-invert-code);
--tw-prose-pre-code: var(--tw-prose-invert-pre-code);
--tw-prose-pre-bg: var(--tw-prose-invert-pre-bg);
--tw-prose-th-borders: var(--tw-prose-invert-th-borders);
--tw-prose-td-borders: var(--tw-prose-invert-td-borders)
}
.dropdown {
position: relative;
display: inline-block;
position-area: var(--anchor-v, bottom) var(--anchor-h, span-right)
}
.dropdown > :not(summary):focus {
--tw-outline-style: none;
outline-style: none
}
@media (forced-colors: active) {
.dropdown > :not(summary):focus {
outline: 2px solid transparent;
outline-offset: 2px
}
}
.dropdown .dropdown-content {
position: absolute
}
.dropdown:not(details,.dropdown-open,.dropdown-hover:hover,:focus-within) .dropdown-content {
display: none;
transform-origin: top;
opacity: 0%;
scale: 95%
}
.dropdown .dropdown-content {
z-index: 999
}
@media (prefers-reduced-motion: no-preference) {
.dropdown .dropdown-content {
animation: dropdown .2s;
transition-property: opacity, scale, display;
transition-behavior: allow-discrete;
transition-duration: .2s;
transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}
}
@starting-style{
opacity: 0
} .dropdown:focus-within > [tabindex]:first-child {
pointer-events: none
}
.dropdown:focus-within .dropdown-content, .dropdown:not(.dropdown-hover):focus .dropdown-content {
opacity: 100%
}
.dropdown:focus .dropdown-content, .dropdown:focus-within .dropdown-content {
scale: 100%
}
.dropdown:where([popover]) {
background: #0000
}
.dropdown-end {
--anchor-h: span-left
}
.dropdown-end :where(.dropdown-content) {
inset-inline-end: 0rem;
translate: 0 0
}
.dropdown-top {
--anchor-v: top
}
.dropdown-top .dropdown-content {
top: auto;
bottom: 100%;
transform-origin: bottom
}
@keyframes dropdown {
0% {
opacity: 0
}
}
.breadcrumbs {
max-width: 100%;
overflow-x: auto;
padding-block: .5rem
}
.menu {
display: flex;
width: -moz-fit-content;
width: fit-content;
flex-direction: column;
flex-wrap: wrap;
padding: .5rem;
--menu-active-fg: var(--color-neutral-content);
--menu-active-bg: var(--color-neutral);
font-size: .875rem
}
.menu :where(li ul) {
position: relative;
margin-inline-start: 1rem;
padding-inline-start: .5rem;
white-space: nowrap
}
.menu :where(li ul):before {
position: absolute;
inset-inline-start: 0rem;
top: .75rem;
bottom: .75rem;
background-color: var(--color-base-content);
opacity: 10%;
width: var(--border);
content: ""
}
.menu :where(li>.menu-dropdown:not(.menu-dropdown-show)) {
display: none
}
.menu :where(li:not(.menu-title)>:not(ul,details,.menu-title,.btn)), .menu :where(li:not(.menu-title)>details>summary:not(.menu-title)) {
display: grid;
grid-auto-flow: column;
align-content: flex-start;
align-items: center;
gap: .5rem;
border-radius: var(--radius-field);
padding-inline: .75rem;
padding-block: .375rem;
text-align: start;
transition-property: color, background-color, box-shadow;
transition-duration: .2s;
transition-timing-function: cubic-bezier(0, 0, .2, 1);
grid-auto-columns: minmax(auto, max-content) auto max-content;
text-wrap: balance;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none
}
.menu :where(li>details>summary) {
--tw-outline-style: none;
outline-style: none
}
@media (forced-colors: active) {
.menu :where(li>details>summary) {
outline: 2px solid transparent;
outline-offset: 2px
}
}
.menu :where(li>details>summary)::-webkit-details-marker {
display: none
}
.menu :where(li>.menu-dropdown-toggle):after, .menu :where(li>details>summary):after {
justify-self: flex-end;
display: block;
height: .375rem;
width: .375rem;
rotate: -135deg;
translate: 0 -1px;
transition-property: rotate, translate;
transition-duration: .2s;
content: "";
transform-origin: 50% 50%;
box-shadow: 2px 2px inset;
pointer-events: none
}
.menu :where(li>.menu-dropdown-toggle.menu-dropdown-show):after, .menu :where(li>details[open]>summary):after {
rotate: 45deg;
translate: 0 1px
}
.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title),li:not(.menu-title,.disabled)>details>summary:not(.menu-title)):not(.menu-active,:active,.btn):focus-visible {
cursor: pointer;
background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
color: var(--color-base-content);
--tw-outline-style: none;
outline-style: none
}
@media (forced-colors: active) {
.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title),li:not(.menu-title,.disabled)>details>summary:not(.menu-title)):not(.menu-active,:active,.btn):focus-visible {
outline: 2px solid transparent;
outline-offset: 2px
}
}
.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title):not(.menu-active,:active,.btn):hover,li:not(.menu-title,.disabled)>details>summary:not(.menu-title):not(.menu-active,:active,.btn):hover) {
cursor: pointer;
background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
--tw-outline-style: none;
outline-style: none
}
@media (forced-colors: active) {
.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title):not(.menu-active,:active,.btn):hover,li:not(.menu-title,.disabled)>details>summary:not(.menu-title):not(.menu-active,:active,.btn):hover) {
outline: 2px solid transparent;
outline-offset: 2px
}
}
.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title):not(.menu-active,:active,.btn):hover,li:not(.menu-title,.disabled)>details>summary:not(.menu-title):not(.menu-active,:active,.btn):hover) {
box-shadow: 0 1px #00000003 inset, 0 -1px #ffffff03 inset
}
.menu :where(li:empty) {
background-color: var(--color-base-content);
opacity: 10%;
margin: .5rem 1rem;
height: 1px
}
.menu :where(li) {
position: relative;
display: flex;
flex-shrink: 0;
flex-direction: column;
flex-wrap: wrap;
align-items: stretch
}
.menu :where(li) > :not(ul,.menu-title,details,.btn):active {
--tw-outline-style: none;
outline-style: none
}
@media (forced-colors: active) {
.menu :where(li) > :not(ul,.menu-title,details,.btn):active {
outline: 2px solid transparent;
outline-offset: 2px
}
}
.menu :where(li) > :not(ul,.menu-title,details,.btn):active {
color: var(--menu-active-fg);
background-color: var(--menu-active-bg);
background-size: auto, calc(var(--noise) * 100%);
background-image: none, var(--fx-noise)
}
.menu :where(li) > :not(ul,.menu-title,details,.btn).menu-active:not(.menu :where(li)>:not(ul,.menu-title,details,.btn).menu-active:active), .menu :where(li) > :not(ul,.menu-title,details,.btn):active:not(.menu :where(li)>:not(ul,.menu-title,details,.btn):active:active), .menu :where(li) > details > summary:active:not(.menu :where(li)>details>summary:active:active) {
box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--menu-active-bg)
}
.navbar {
display: flex;
width: 100%;
align-items: center;
padding: .5rem;
min-height: 4rem
}
.footer {
display: grid;
width: 100%;
grid-auto-flow: row;
place-items: start;
-moz-column-gap: 1rem;
column-gap: 1rem;
row-gap: 2.5rem;
font-size: .875rem;
line-height: 1.25rem
}
.footer > * {
display: grid;
place-items: start;
gap: .5rem
}
.link {
cursor: pointer;
text-decoration-line: underline
}
.link:focus {
--tw-outline-style: none;
outline-style: none
}
@media (forced-colors: active) {
.link:focus {
outline: 2px solid transparent;
outline-offset: 2px
}
}
.link:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px
}
.link-hover {
text-decoration-line: none
}
@media (hover: hover) {
.link-hover:hover {
text-decoration-line: underline
}
}
.btn {
display: inline-flex;
flex-shrink: 0;
cursor: pointer;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
gap: .375rem;
text-align: center;
vertical-align: middle;
outline-offset: 2px;
webkit-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
padding-inline: var(--btn-p);
color: var(--btn-fg);
--tw-prose-links: var(--btn-fg);
height: var(--size);
font-size: var(--fontsize, .875rem);
font-weight: 600;
outline-color: var(--btn-color, var(--color-base-content));
transition-property: color, background-color, border-color, box-shadow;
transition-timing-function: cubic-bezier(0, 0, .2, 1);
transition-duration: .2s;
border-start-start-radius: var(--join-ss, var(--radius-field));
border-start-end-radius: var(--join-se, var(--radius-field));
border-end-start-radius: var(--join-es, var(--radius-field));
border-end-end-radius: var(--join-ee, var(--radius-field));
background-color: var(--btn-bg);
background-size: auto, calc(var(--noise) * 100%);
background-image: none, var(--btn-noise);
border-width: var(--border);
border-style: solid;
border-color: var(--btn-border);
text-shadow: 0 .5px oklch(100% 0 0 / calc(var(--depth) * .15));
touch-action: manipulation;
box-shadow: 0 .5px 0 .5px oklch(100% 0 0 / calc(var(--depth) * 6%)) inset, var(--btn-shadow);
--size: calc(var(--size-field, .25rem) * 10);
--btn-bg: var(--btn-color, var(--color-base-200));
--btn-fg: var(--color-base-content);
--btn-p: 1rem;
--btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%));
--btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000), 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000);
--btn-noise: var(--fx-noise)
}
.prose .btn {
text-decoration-line: none
}
@media (hover: hover) {
.btn:hover {
--btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%)
}
}
.btn:focus-visible, .btn:has(:focus-visible) {
outline-width: 2px;
outline-style: solid;
isolation: isolate
}
.btn:active:not(.btn-active) {
translate: 0 .5px;
--btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 5%);
--btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
--btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0)
}
.btn:is(:disabled,[disabled],.btn-disabled):not(.btn-link,.btn-ghost) {
background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
box-shadow: none
}
.btn:is(:disabled,[disabled],.btn-disabled) {
pointer-events: none;
--btn-border: #0000;
--btn-noise: none;
--btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000)
}
@media (hover: hover) {
.btn:is(:disabled,[disabled],.btn-disabled):hover {
pointer-events: none;
background-color: color-mix(in oklab, var(--color-neutral) 20%, transparent);
--btn-border: #0000;
--btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000)
}
}
.btn:is(input[type=checkbox],input[type=radio]) {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none
}
.btn:is(input[type=checkbox],input[type=radio]):after {
content: attr(aria-label)
}
.btn:where(input:checked:not(.filter .btn)) {
--btn-color: var(--color-primary);
--btn-fg: var(--color-primary-content);
isolation: isolate
}
.btn-primary {
--btn-color: var(--color-primary);
--btn-fg: var(--color-primary-content)
}
.btn-ghost:not(.btn-active,:hover,:active:focus,:focus-visible) {
--btn-shadow: "";
--btn-bg: #0000;
--btn-border: #0000;
--btn-noise: none
}
.btn-ghost:not(.btn-active,:hover,:active:focus,:focus-visible):not(:disabled,[disabled],.btn-disabled) {
outline-color: currentColor;
--btn-fg: currentColor
}
@media (hover: none) {
.btn-ghost:hover:not(.btn-active,:active,:focus-visible,:disabled,[disabled],.btn-disabled) {
--btn-shadow: "";
--btn-bg: #0000;
--btn-border: #0000;
--btn-noise: none;
--btn-fg: currentColor
}
}
.btn-outline:not(.btn-active,:hover,:active:focus,:focus-visible,:disabled,[disabled],.btn-disabled,:checked) {
--btn-shadow: "";
--btn-bg: #0000;
--btn-fg: var(--btn-color);
--btn-border: var(--btn-color);
--btn-noise: none
}
@media (hover: none) {
.btn-outline:hover:not(.btn-active,:active,:focus-visible,:disabled,[disabled],.btn-disabled,:checked) {
--btn-shadow: "";
--btn-bg: #0000;
--btn-fg: var(--btn-color);
--btn-border: var(--btn-color);
--btn-noise: none
}
}
.btn-sm {
--fontsize: .75rem;
--btn-p: .75rem;
--size: calc(var(--size-field, .25rem) * 8)
}
.sticky {
position: sticky
}
.top-0 {
top: 0
}
.z-40 {
z-index: 40
}
.z-50 {
z-index: 50
}
.mx-2 {
margin-left: .5rem;
margin-right: .5rem
}
.mx-auto {
margin-left: auto;
margin-right: auto
}
.mb-4 {
margin-bottom: 1rem
}
.mb-6 {
margin-bottom: 1.5rem
}
.mb-8 {
margin-bottom: 2rem
}
.ml-2 {
margin-left: .5rem
}
.flex {
display: flex
}
.inline-flex {
display: inline-flex
}
.hidden {
display: none
}
.h-4 {
height: 1rem
}
.h-5 {
height: 1.25rem
}
.max-h-8 {
max-height: 2rem
}
.min-h-screen {
min-height: 100vh
}
.w-4 {
width: 1rem
}
.w-44 {
width: 11rem
}
.w-5 {
width: 1.25rem
}
.w-auto {
width: auto
}
.w-full {
width: 100%
}
.min-w-0 {
min-width: 0
}
.max-w-5xl {
max-width: 64rem
}
.max-w-\[150px\] {
max-width: 150px
}
.max-w-none {
max-width: none
}
.flex-1 {
flex: 1 1 0%
}
.flex-none {
flex: none
}
.flex-shrink-0 {
flex-shrink: 0
}
.select-none {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none
}
.flex-col {
flex-direction: column
}
.flex-wrap {
flex-wrap: wrap
}
.items-center {
align-items: center
}
.justify-center {
justify-content: center
}
.justify-between {
justify-content: space-between
}
.gap-2 {
gap: .5rem
}
.gap-4 {
gap: 1rem
}
.gap-8 {
gap: 2rem
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(.5rem * var(--tw-space-y-reverse))
}
.overflow-hidden {
overflow: hidden
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.rounded-none {
border-radius: 0
}
.border-b {
border-bottom-width: 1px
}
.border-base-300 {
border-color: var(--color-base-300)
}
.bg-base-100 {
background-color: var(--color-base-100)
}
.bg-base-200 {
background-color: var(--color-base-200)
}
.bg-base-300 {
background-color: var(--color-base-300)
}
.fill-current {
fill: currentColor
}
.object-contain {
-o-object-fit: contain;
object-fit: contain
}
.p-0 {
padding: 0
}
.px-3 {
padding-left: .75rem;
padding-right: .75rem
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem
}
.py-10 {
padding-top: 2.5rem;
padding-bottom: 2.5rem
}
.py-2 {
padding-top: .5rem;
padding-bottom: .5rem
}
.py-3 {
padding-top: .75rem;
padding-bottom: .75rem
}
.pb-12 {
padding-bottom: 3rem
}
.pb-16 {
padding-bottom: 4rem
}
.pb-8 {
padding-bottom: 2rem
}
.pt-12 {
padding-top: 3rem
}
.pt-16 {
padding-top: 4rem
}
.pt-8 {
padding-top: 2rem
}
.text-left {
text-align: left
}
.text-center {
text-align: center
}
.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem
}
.text-sm {
font-size: .875rem;
line-height: 1.25rem
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem
}
.font-bold {
font-weight: 700
}
.font-medium {
font-weight: 500
}
.capitalize {
text-transform: capitalize
}
.text-base-content {
color: var(--color-base-content)
}
.opacity-70 {
opacity: .7
}
.shadow-lg {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.transition-colors {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s
}
.rounded-box {
border-radius: var(--radius-box)
}
:root .prose {
--tw-prose-body: color-mix(in oklab, var(--color-base-content) 80%, #0000);
--tw-prose-headings: var(--color-base-content);
--tw-prose-lead: var(--color-base-content);
--tw-prose-links: var(--color-base-content);
--tw-prose-bold: var(--color-base-content);
--tw-prose-counters: var(--color-base-content);
--tw-prose-bullets: color-mix(in oklab, var(--color-base-content) 50%, #0000);
--tw-prose-hr: color-mix(in oklab, var(--color-base-content) 20%, #0000);
--tw-prose-quotes: var(--color-base-content);
--tw-prose-quote-borders: color-mix(in oklab, var(--color-base-content) 20%, #0000);
--tw-prose-captions: color-mix(in oklab, var(--color-base-content) 50%, #0000);
--tw-prose-code: var(--color-base-content);
--tw-prose-pre-code: var(--color-neutral-content);
--tw-prose-pre-bg: var(--color-neutral);
--tw-prose-th-borders: color-mix(in oklab, var(--color-base-content) 50%, #0000);
--tw-prose-td-borders: color-mix(in oklab, var(--color-base-content) 20%, #0000);
--tw-prose-kbd: color-mix(in oklab, var(--color-base-content) 80%, #0000)
}
:root .prose :where(code):not(pre>code) {
background-color: var(--color-base-200);
border-radius: var(--radius-selector);
border: var(--border) solid var(--color-base-300);
padding-inline: .5em;
font-weight: inherit
}
:root .prose :where(code):not(pre>code):after, :root .prose :where(code):not(pre>code):before {
display: none
}
.hover\:bg-base-200:hover {
background-color: var(--color-base-200)
}
.hover\:text-primary:hover {
color: var(--color-primary)
}
@media (min-width: 390px) {
.min-\[390px\]\:block {
display: block
}
}
@media (min-width: 768px) {
.md\:grid {
display: grid
}
.md\:max-h-10 {
max-height: 2.5rem
}
.md\:grid-cols-3 {
grid-template-columns:repeat(3, minmax(0, 1fr))
}
.md\:flex-row {
flex-direction: row
}
.md\:justify-end {
justify-content: flex-end
}
.md\:gap-2 {
gap: .5rem
}
.md\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.md\:text-left {
text-align: left
}
.md\:text-5xl {
font-size: 3rem;
line-height: 1
}
}
*, :after, :before {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / .5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style:
}
*, :after, :before {
box-sizing: border-box;
border-width: 0;
border-style: solid;
border-color: #e5e7eb
}
:after, :before {
--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, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
font-feature-settings: normal;
font-variation-settings: normal;
-webkit-tap-highlight-color: transparent
}
body {
margin: 0;
line-height: inherit
}
h1, h2, h3 {
font-size: inherit;
font-weight: inherit
}
a {
color: inherit;
text-decoration: inherit
}
table {
text-indent: 0;
border-color: inherit;
border-collapse: collapse
}
button {
font-family: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
letter-spacing: inherit;
color: inherit;
margin: 0;
padding: 0
}
button {
text-transform: none
}
button {
-webkit-appearance: button;
background-color: transparent;
background-image: none
}
summary {
display: list-item
}
h1, h2, h3, p {
margin: 0
}
ul {
list-style: none;
margin: 0;
padding: 0
}
button {
cursor: pointer
}
img, svg {
display: block;
vertical-align: middle
}
img {
max-width: 100%;
height: auto
}
@property --radialprogress {
syntax: "";
inherits: true;
initial-value: 0%
}
:root {
--fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E")
}
:root {
background-color: var(--root-bg, var(--color-base-100));
color: var(--color-base-content)
}
:root {
scrollbar-color: color-mix(in oklch, currentColor 35%, #0000) #0000
}
:root {
--color-primary: #FFD700;
--color-primary-content: #000000;
--color-secondary: #FF0000;
--color-secondary-content: #FFFFFF;
--color-accent: #00FF00;
--color-accent-content: #000000;
--color-neutral: #3A3A3A;
--color-neutral-content: #E5E5E5;
--color-base-100: #0A0A0A;
--color-base-200: #1A1A1A;
--color-base-300: #252525;
--color-base-content: #FFFFFF;
--color-cta-primary: #FF0000;
--color-cta-primary-content: #FFFFFF;
--color-cta-secondary: #FFD700;
--color-cta-secondary-content: #000000;
--color-border-default: #2A2A2A;
--color-border-decorative: #FFD700;
--color-info: #3ABFF8;
--color-info-content: #002B47;
--color-success: #4ADE80;
--color-success-content: #003320;
--color-warning: #FFB300;
--color-warning-content: #3D2000;
--color-error: #FF5757;
--color-error-content: #FFFFFF;
--border-none: 0;
--border-thin: 1px;
--border-medium: 2px;
--border-thick: 3px;
--shadow-none: none;
--shadow-small: 0 2px 4px rgba(0, 0, 0, .5);
--shadow-medium: 0 4px 8px rgba(0, 0, 0, .6);
--shadow-large: 0 8px 16px rgba(0, 0, 0, .7);
--shadow-xl: 0 12px 24px rgba(0, 0, 0, .8);
--shadow-card: 0 4px 12px rgba(0, 0, 0, .6);
--shadow-button: 0 4px 8px rgba(255, 0, 0, .3);
--shadow-header: 0 2px 8px rgba(0, 0, 0, .7);
--shadow-dropdown: 0 8px 20px rgba(0, 0, 0, .8);
--radius-sharp: 0;
--radius-rounded: 8px;
--radius-pill: 50px;
--font-display: "Bebas Neue", system-ui, sans-serif;
--font-body: "Inter", system-ui, sans-serif;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-black: 900;
--font-weight-heading: 700;
--font-weight-button: 700;
--font-weight-label: 500;
--card-background: #1A1A1A;
--card-background-hover: #252525;
--card-border-color: #2A2A2A;
--card-border-thickness: 1px;
--card-shadow: 0 4px 12px rgba(0, 0, 0, .6);
--card-radius: 8px;
--button-primary-bg: #FF0000;
--button-primary-text: #FFFFFF;
--button-primary-border: transparent;
--button-primary-border-width: 0;
--button-primary-shadow: 0 4px 12px rgba(255, 0, 0, .4);
--button-primary-hover-bg: #CC0000;
--button-primary-hover-text: #FFFFFF;
--button-primary-hover-border: transparent;
--button-secondary-bg: transparent;
--button-secondary-text: #FFFFFF;
--button-secondary-border: #FFFFFF;
--button-secondary-border-width: 2px;
--button-secondary-shadow: none;
--button-secondary-hover-bg: #FFFFFF;
--button-secondary-hover-text: #000000;
--button-secondary-hover-border: #FFFFFF;
--button-radius: 4px;
--button-font-weight: 700;
--button-transition: all .2s ease;
--link-color: #FFFFFF;
--link-hover-color: #FFD700;
--link-opacity: .7;
--link-hover-opacity: 1;
--icon-color: #FFD700;
--icon-size: 1.25rem;
--transition-fast: .2s;
--transition-medium: .3s;
--transition-slow: .5s;
--focus-outline-width: 2px;
--focus-outline-color: #FFD700;
--focus-outline-offset: 2px;
--overlay-gradient: linear-gradient(to top, rgba(26, 26, 26, .8), rgba(26, 26, 26, .4), transparent)
}
@media (prefers-color-scheme: dark) {
:root {
--color-primary: #FFD700;
--color-primary-content: #000000;
--color-secondary: #FF0000;
--color-secondary-content: #FFFFFF;
--color-accent: #00FF00;
--color-accent-content: #000000;
--color-neutral: #3A3A3A;
--color-neutral-content: #E5E5E5;
--color-base-100: #0A0A0A;
--color-base-200: #1A1A1A;
--color-base-300: #252525;
--color-base-content: #FFFFFF;
--color-cta-primary: #FF0000;
--color-cta-primary-content: #FFFFFF;
--color-cta-secondary: #FFD700;
--color-cta-secondary-content: #000000;
--color-border-default: #2A2A2A;
--color-border-decorative: #FFD700;
--color-info: #3ABFF8;
--color-info-content: #002B47;
--color-success: #4ADE80;
--color-success-content: #003320;
--color-warning: #FFB300;
--color-warning-content: #3D2000;
--color-error: #FF5757;
--color-error-content: #FFFFFF;
--border-none: 0;
--border-thin: 1px;
--border-medium: 2px;
--border-thick: 3px;
--shadow-none: none;
--shadow-small: 0 2px 4px rgba(0, 0, 0, .5);
--shadow-medium: 0 4px 8px rgba(0, 0, 0, .6);
--shadow-large: 0 8px 16px rgba(0, 0, 0, .7);
--shadow-xl: 0 12px 24px rgba(0, 0, 0, .8);
--shadow-card: 0 4px 12px rgba(0, 0, 0, .6);
--shadow-button: 0 4px 8px rgba(255, 0, 0, .3);
--shadow-header: 0 2px 8px rgba(0, 0, 0, .7);
--shadow-dropdown: 0 8px 20px rgba(0, 0, 0, .8);
--radius-sharp: 0;
--radius-rounded: 8px;
--radius-pill: 50px;
--font-display: "Bebas Neue", system-ui, sans-serif;
--font-body: "Inter", system-ui, sans-serif;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-black: 900;
--font-weight-heading: 700;
--font-weight-button: 700;
--font-weight-label: 500;
--card-background: #1A1A1A;
--card-background-hover: #252525;
--card-border-color: #2A2A2A;
--card-border-thickness: 1px;
--card-shadow: 0 4px 12px rgba(0, 0, 0, .6);
--card-radius: 8px;
--button-primary-bg: #FF0000;
--button-primary-text: #FFFFFF;
--button-primary-border: transparent;
--button-primary-border-width: 0;
--button-primary-shadow: 0 4px 12px rgba(255, 0, 0, .4);
--button-primary-hover-bg: #CC0000;
--button-primary-hover-text: #FFFFFF;
--button-primary-hover-border: transparent;
--button-secondary-bg: transparent;
--button-secondary-text: #FFFFFF;
--button-secondary-border: #FFFFFF;
--button-secondary-border-width: 2px;
--button-secondary-shadow: none;
--button-secondary-hover-bg: #FFFFFF;
--button-secondary-hover-text: #000000;
--button-secondary-hover-border: #FFFFFF;
--button-radius: 4px;
--button-font-weight: 700;
--button-transition: all .2s ease;
--link-color: #FFFFFF;
--link-hover-color: #FFD700;
--link-opacity: .7;
--link-hover-opacity: 1;
--icon-color: #FFD700;
--icon-size: 1.25rem;
--transition-fast: .2s;
--transition-medium: .3s;
--transition-slow: .5s;
--focus-outline-width: 2px;
--focus-outline-color: #FFD700;
--focus-outline-offset: 2px;
--overlay-gradient: linear-gradient(to top, rgba(26, 26, 26, .8), rgba(26, 26, 26, .4), transparent)
}
}
html {
scroll-behavior: smooth
}
body {
background-color: var(--color-base-100);
color: var(--color-base-content);
font-family: var(--font-body, system-ui, -apple-system, sans-serif)
}
:focus-visible {
outline-style: solid;
outline-width: 2px;
outline-offset: 2px;
outline-color: var(--color-primary)
}
h1, h2, h3 {
font-weight: 600;
font-family: var(--font-display, system-ui, -apple-system, sans-serif);
font-weight: var(--font-weight-heading, 700)
}
.btn, button {
font-weight: var(--font-weight-button, 600)
}
.container {
width: 100%
}
@media (min-width: 640px) {
.container {
max-width: 640px
}
}
@media (min-width: 768px) {
.container {
max-width: 768px
}
}
@media (min-width: 1024px) {
.container {
max-width: 1024px
}
}
@media (min-width: 1280px) {
.container {
max-width: 1280px
}
}
@media (min-width: 1536px) {
.container {
max-width: 1536px
}
}
.prose {
color: var(--tw-prose-body);
max-width: 65ch
}
.prose :where(p):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 1.25em;
margin-bottom: 1.25em
}
.prose :where([class~=lead]):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-lead);
font-size: 1.25em;
line-height: 1.6;
margin-top: 1.2em;
margin-bottom: 1.2em
}
.prose :where(a):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-links);
text-decoration: underline;
font-weight: 500
}
.prose :where(strong):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-bold);
font-weight: 600
}
.prose :where(a strong):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit
}
.prose :where(blockquote strong):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit
}
.prose :where(thead th strong):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit
}
.prose :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: decimal;
margin-top: 1.25em;
margin-bottom: 1.25em;
padding-inline-start: 1.625em
}
.prose :where(ol[type=A]):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: upper-alpha
}
.prose :where(ol[type=a]):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: lower-alpha
}
.prose :where(ol[type=A s]):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: upper-alpha
}
.prose :where(ol[type=a s]):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: lower-alpha
}
.prose :where(ol[type=I]):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: upper-roman
}
.prose :where(ol[type=i]):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: lower-roman
}
.prose :where(ol[type=I s]):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: upper-roman
}
.prose :where(ol[type=i s]):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: lower-roman
}
.prose :where(ol[type="1"]):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: decimal
}
.prose :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: disc;
margin-top: 1.25em;
margin-bottom: 1.25em;
padding-inline-start: 1.625em
}
.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker {
font-weight: 400;
color: var(--tw-prose-counters)
}
.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker {
color: var(--tw-prose-bullets)
}
.prose :where(dt):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-headings);
font-weight: 600;
margin-top: 1.25em
}
.prose :where(hr):not(:where([class~=not-prose],[class~=not-prose] *)) {
border-color: var(--tw-prose-hr);
border-top-width: 1px;
margin-top: 3em;
margin-bottom: 3em
}
.prose :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)) {
font-weight: 500;
font-style: italic;
color: var(--tw-prose-quotes);
border-inline-start-width: .25rem;
border-inline-start-color: var(--tw-prose-quote-borders);
quotes: "“" "”" "‘" "’";
margin-top: 1.6em;
margin-bottom: 1.6em;
padding-inline-start: 1em
}
.prose :where(blockquote p:first-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):before {
content: open-quote
}
.prose :where(blockquote p:last-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):after {
content: close-quote
}
.prose :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-headings);
font-weight: 800;
font-size: 2.25em;
margin-top: 0;
margin-bottom: .8888889em;
line-height: 1.1111111
}
.prose :where(h1 strong):not(:where([class~=not-prose],[class~=not-prose] *)) {
font-weight: 900;
color: inherit
}
.prose :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-headings);
font-weight: 700;
font-size: 1.5em;
margin-top: 2em;
margin-bottom: 1em;
line-height: 1.3333333
}
.prose :where(h2 strong):not(:where([class~=not-prose],[class~=not-prose] *)) {
font-weight: 800;
color: inherit
}
.prose :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-headings);
font-weight: 600;
font-size: 1.25em;
margin-top: 1.6em;
margin-bottom: .6em;
line-height: 1.6
}
.prose :where(h3 strong):not(:where([class~=not-prose],[class~=not-prose] *)) {
font-weight: 700;
color: inherit
}
.prose :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-headings);
font-weight: 600;
margin-top: 1.5em;
margin-bottom: .5em;
line-height: 1.5
}
.prose :where(h4 strong):not(:where([class~=not-prose],[class~=not-prose] *)) {
font-weight: 700;
color: inherit
}
.prose :where(img):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 2em;
margin-bottom: 2em
}
.prose :where(picture):not(:where([class~=not-prose],[class~=not-prose] *)) {
display: block;
margin-top: 2em;
margin-bottom: 2em
}
.prose :where(video):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 2em;
margin-bottom: 2em
}
.prose :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)) {
font-weight: 500;
font-family: inherit;
color: var(--tw-prose-kbd);
box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px rgb(var(--tw-prose-kbd-shadows) / 10%);
font-size: .875em;
border-radius: .3125rem;
padding-top: .1875em;
padding-inline-end: .375em;
padding-bottom: .1875em;
padding-inline-start: .375em
}
.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-code);
font-weight: 600;
font-size: .875em
}
.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):before {
content: "`"
}
.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):after {
content: "`"
}
.prose :where(a code):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit
}
.prose :where(h1 code):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit
}
.prose :where(h2 code):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit;
font-size: .875em
}
.prose :where(h3 code):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit;
font-size: .9em
}
.prose :where(h4 code):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit
}
.prose :where(blockquote code):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit
}
.prose :where(thead th code):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit
}
.prose :where(pre):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-pre-code);
background-color: var(--tw-prose-pre-bg);
overflow-x: auto;
font-weight: 400;
font-size: .875em;
line-height: 1.7142857;
margin-top: 1.7142857em;
margin-bottom: 1.7142857em;
border-radius: .375rem;
padding-top: .8571429em;
padding-inline-end: 1.1428571em;
padding-bottom: .8571429em;
padding-inline-start: 1.1428571em
}
.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)) {
background-color: transparent;
border-width: 0;
border-radius: 0;
padding: 0;
font-weight: inherit;
color: inherit;
font-size: inherit;
font-family: inherit;
line-height: inherit
}
.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):before {
content: none
}
.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):after {
content: none
}
.prose :where(table):not(:where([class~=not-prose],[class~=not-prose] *)) {
width: 100%;
table-layout: auto;
margin-top: 2em;
margin-bottom: 2em;
font-size: .875em;
line-height: 1.7142857
}
.prose :where(thead):not(:where([class~=not-prose],[class~=not-prose] *)) {
border-bottom-width: 1px;
border-bottom-color: var(--tw-prose-th-borders)
}
.prose :where(thead th):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-headings);
font-weight: 600;
vertical-align: bottom;
padding-inline-end: .5714286em;
padding-bottom: .5714286em;
padding-inline-start: .5714286em
}
.prose :where(tbody tr):not(:where([class~=not-prose],[class~=not-prose] *)) {
border-bottom-width: 1px;
border-bottom-color: var(--tw-prose-td-borders)
}
.prose :where(tbody tr:last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
border-bottom-width: 0
}
.prose :where(tbody td):not(:where([class~=not-prose],[class~=not-prose] *)) {
vertical-align: baseline
}
.prose :where(tfoot):not(:where([class~=not-prose],[class~=not-prose] *)) {
border-top-width: 1px;
border-top-color: var(--tw-prose-th-borders)
}
.prose :where(tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)) {
vertical-align: top
}
.prose :where(th,td):not(:where([class~=not-prose],[class~=not-prose] *)) {
text-align: start
}
.prose :where(figure>*):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 0;
margin-bottom: 0
}
.prose :where(figcaption):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-captions);
font-size: .875em;
line-height: 1.4285714;
margin-top: .8571429em
}
.prose {
--tw-prose-body: #374151;
--tw-prose-headings: #111827;
--tw-prose-lead: #4b5563;
--tw-prose-links: #111827;
--tw-prose-bold: #111827;
--tw-prose-counters: #6b7280;
--tw-prose-bullets: #d1d5db;
--tw-prose-hr: #e5e7eb;
--tw-prose-quotes: #111827;
--tw-prose-quote-borders: #e5e7eb;
--tw-prose-captions: #6b7280;
--tw-prose-kbd: #111827;
--tw-prose-kbd-shadows: 17 24 39;
--tw-prose-code: #111827;
--tw-prose-pre-code: #e5e7eb;
--tw-prose-pre-bg: #1f2937;
--tw-prose-th-borders: #d1d5db;
--tw-prose-td-borders: #e5e7eb;
--tw-prose-invert-body: #d1d5db;
--tw-prose-invert-headings: #fff;
--tw-prose-invert-lead: #9ca3af;
--tw-prose-invert-links: #fff;
--tw-prose-invert-bold: #fff;
--tw-prose-invert-counters: #9ca3af;
--tw-prose-invert-bullets: #4b5563;
--tw-prose-invert-hr: #374151;
--tw-prose-invert-quotes: #f3f4f6;
--tw-prose-invert-quote-borders: #374151;
--tw-prose-invert-captions: #9ca3af;
--tw-prose-invert-kbd: #fff;
--tw-prose-invert-kbd-shadows: 255 255 255;
--tw-prose-invert-code: #fff;
--tw-prose-invert-pre-code: #d1d5db;
--tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
--tw-prose-invert-th-borders: #4b5563;
--tw-prose-invert-td-borders: #374151;
font-size: 1rem;
line-height: 1.75
}
.prose :where(picture>img):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 0;
margin-bottom: 0
}
.prose :where(li):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: .5em;
margin-bottom: .5em
}
.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *)) {
padding-inline-start: .375em
}
.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *)) {
padding-inline-start: .375em
}
.prose :where(.prose>ul>li p):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: .75em;
margin-bottom: .75em
}
.prose :where(.prose>ul>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 1.25em
}
.prose :where(.prose>ul>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-bottom: 1.25em
}
.prose :where(.prose>ol>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 1.25em
}
.prose :where(.prose>ol>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-bottom: 1.25em
}
.prose :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: .75em;
margin-bottom: .75em
}
.prose :where(dl):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 1.25em;
margin-bottom: 1.25em
}
.prose :where(dd):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: .5em;
padding-inline-start: 1.625em
}
.prose :where(hr+*):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 0
}
.prose :where(h2+*):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 0
}
.prose :where(h3+*):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 0
}
.prose :where(h4+*):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 0
}
.prose :where(thead th:first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
padding-inline-start: 0
}
.prose :where(thead th:last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
padding-inline-end: 0
}
.prose :where(tbody td,tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)) {
padding-top: .5714286em;
padding-inline-end: .5714286em;
padding-bottom: .5714286em;
padding-inline-start: .5714286em
}
.prose :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
padding-inline-start: 0
}
.prose :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
padding-inline-end: 0
}
.prose :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 2em;
margin-bottom: 2em
}
.prose :where(.prose>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 0
}
.prose :where(.prose>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-bottom: 0
}
.prose-invert {
--tw-prose-body: var(--tw-prose-invert-body);
--tw-prose-headings: var(--tw-prose-invert-headings);
--tw-prose-lead: var(--tw-prose-invert-lead);
--tw-prose-links: var(--tw-prose-invert-links);
--tw-prose-bold: var(--tw-prose-invert-bold);
--tw-prose-counters: var(--tw-prose-invert-counters);
--tw-prose-bullets: var(--tw-prose-invert-bullets);
--tw-prose-hr: var(--tw-prose-invert-hr);
--tw-prose-quotes: var(--tw-prose-invert-quotes);
--tw-prose-quote-borders: var(--tw-prose-invert-quote-borders);
--tw-prose-captions: var(--tw-prose-invert-captions);
--tw-prose-kbd: var(--tw-prose-invert-kbd);
--tw-prose-kbd-shadows: var(--tw-prose-invert-kbd-shadows);
--tw-prose-code: var(--tw-prose-invert-code);
--tw-prose-pre-code: var(--tw-prose-invert-pre-code);
--tw-prose-pre-bg: var(--tw-prose-invert-pre-bg);
--tw-prose-th-borders: var(--tw-prose-invert-th-borders);
--tw-prose-td-borders: var(--tw-prose-invert-td-borders)
}
.dropdown {
position: relative;
display: inline-block;
position-area: var(--anchor-v, bottom) var(--anchor-h, span-right)
}
.dropdown > :not(summary):focus {
--tw-outline-style: none;
outline-style: none
}
@media (forced-colors: active) {
.dropdown > :not(summary):focus {
outline: 2px solid transparent;
outline-offset: 2px
}
}
.dropdown .dropdown-content {
position: absolute
}
.dropdown:not(details,.dropdown-open,.dropdown-hover:hover,:focus-within) .dropdown-content {
display: none;
transform-origin: top;
opacity: 0%;
scale: 95%
}
.dropdown .dropdown-content {
z-index: 999
}
@media (prefers-reduced-motion: no-preference) {
.dropdown .dropdown-content {
animation: dropdown .2s;
transition-property: opacity, scale, display;
transition-behavior: allow-discrete;
transition-duration: .2s;
transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}
}
@starting-style{
opacity: 0
} .dropdown:focus-within > [tabindex]:first-child {
pointer-events: none
}
.dropdown:focus-within .dropdown-content, .dropdown:not(.dropdown-hover):focus .dropdown-content {
opacity: 100%
}
.dropdown:focus .dropdown-content, .dropdown:focus-within .dropdown-content {
scale: 100%
}
.dropdown:where([popover]) {
background: #0000
}
.dropdown-end {
--anchor-h: span-left
}
.dropdown-end :where(.dropdown-content) {
inset-inline-end: 0rem;
translate: 0 0
}
.dropdown-top {
--anchor-v: top
}
.dropdown-top .dropdown-content {
top: auto;
bottom: 100%;
transform-origin: bottom
}
@keyframes dropdown {
0% {
opacity: 0
}
}
.breadcrumbs {
max-width: 100%;
overflow-x: auto;
padding-block: .5rem
}
.menu {
display: flex;
width: -moz-fit-content;
width: fit-content;
flex-direction: column;
flex-wrap: wrap;
padding: .5rem;
--menu-active-fg: var(--color-neutral-content);
--menu-active-bg: var(--color-neutral);
font-size: .875rem
}
.menu :where(li ul) {
position: relative;
margin-inline-start: 1rem;
padding-inline-start: .5rem;
white-space: nowrap
}
.menu :where(li ul):before {
position: absolute;
inset-inline-start: 0rem;
top: .75rem;
bottom: .75rem;
background-color: var(--color-base-content);
opacity: 10%;
width: var(--border);
content: ""
}
.menu :where(li>.menu-dropdown:not(.menu-dropdown-show)) {
display: none
}
.menu :where(li:not(.menu-title)>:not(ul,details,.menu-title,.btn)), .menu :where(li:not(.menu-title)>details>summary:not(.menu-title)) {
display: grid;
grid-auto-flow: column;
align-content: flex-start;
align-items: center;
gap: .5rem;
border-radius: var(--radius-field);
padding-inline: .75rem;
padding-block: .375rem;
text-align: start;
transition-property: color, background-color, box-shadow;
transition-duration: .2s;
transition-timing-function: cubic-bezier(0, 0, .2, 1);
grid-auto-columns: minmax(auto, max-content) auto max-content;
text-wrap: balance;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none
}
.menu :where(li>details>summary) {
--tw-outline-style: none;
outline-style: none
}
@media (forced-colors: active) {
.menu :where(li>details>summary) {
outline: 2px solid transparent;
outline-offset: 2px
}
}
.menu :where(li>details>summary)::-webkit-details-marker {
display: none
}
.menu :where(li>.menu-dropdown-toggle):after, .menu :where(li>details>summary):after {
justify-self: flex-end;
display: block;
height: .375rem;
width: .375rem;
rotate: -135deg;
translate: 0 -1px;
transition-property: rotate, translate;
transition-duration: .2s;
content: "";
transform-origin: 50% 50%;
box-shadow: 2px 2px inset;
pointer-events: none
}
.menu :where(li>.menu-dropdown-toggle.menu-dropdown-show):after, .menu :where(li>details[open]>summary):after {
rotate: 45deg;
translate: 0 1px
}
.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title),li:not(.menu-title,.disabled)>details>summary:not(.menu-title)):not(.menu-active,:active,.btn):focus-visible {
cursor: pointer;
background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
color: var(--color-base-content);
--tw-outline-style: none;
outline-style: none
}
@media (forced-colors: active) {
.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title),li:not(.menu-title,.disabled)>details>summary:not(.menu-title)):not(.menu-active,:active,.btn):focus-visible {
outline: 2px solid transparent;
outline-offset: 2px
}
}
.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title):not(.menu-active,:active,.btn):hover,li:not(.menu-title,.disabled)>details>summary:not(.menu-title):not(.menu-active,:active,.btn):hover) {
cursor: pointer;
background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
--tw-outline-style: none;
outline-style: none
}
@media (forced-colors: active) {
.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title):not(.menu-active,:active,.btn):hover,li:not(.menu-title,.disabled)>details>summary:not(.menu-title):not(.menu-active,:active,.btn):hover) {
outline: 2px solid transparent;
outline-offset: 2px
}
}
.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title):not(.menu-active,:active,.btn):hover,li:not(.menu-title,.disabled)>details>summary:not(.menu-title):not(.menu-active,:active,.btn):hover) {
box-shadow: 0 1px #00000003 inset, 0 -1px #ffffff03 inset
}
.menu :where(li:empty) {
background-color: var(--color-base-content);
opacity: 10%;
margin: .5rem 1rem;
height: 1px
}
.menu :where(li) {
position: relative;
display: flex;
flex-shrink: 0;
flex-direction: column;
flex-wrap: wrap;
align-items: stretch
}
.menu :where(li) > :not(ul,.menu-title,details,.btn):active {
--tw-outline-style: none;
outline-style: none
}
@media (forced-colors: active) {
.menu :where(li) > :not(ul,.menu-title,details,.btn):active {
outline: 2px solid transparent;
outline-offset: 2px
}
}
.menu :where(li) > :not(ul,.menu-title,details,.btn):active {
color: var(--menu-active-fg);
background-color: var(--menu-active-bg);
background-size: auto, calc(var(--noise) * 100%);
background-image: none, var(--fx-noise)
}
.menu :where(li) > :not(ul,.menu-title,details,.btn).menu-active:not(.menu :where(li)>:not(ul,.menu-title,details,.btn).menu-active:active), .menu :where(li) > :not(ul,.menu-title,details,.btn):active:not(.menu :where(li)>:not(ul,.menu-title,details,.btn):active:active), .menu :where(li) > details > summary:active:not(.menu :where(li)>details>summary:active:active) {
box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--menu-active-bg)
}
.navbar {
display: flex;
width: 100%;
align-items: center;
padding: .5rem;
min-height: 4rem
}
.footer {
display: grid;
width: 100%;
grid-auto-flow: row;
place-items: start;
-moz-column-gap: 1rem;
column-gap: 1rem;
row-gap: 2.5rem;
font-size: .875rem;
line-height: 1.25rem
}
.footer > * {
display: grid;
place-items: start;
gap: .5rem
}
.link {
cursor: pointer;
text-decoration-line: underline
}
.link:focus {
--tw-outline-style: none;
outline-style: none
}
@media (forced-colors: active) {
.link:focus {
outline: 2px solid transparent;
outline-offset: 2px
}
}
.link:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px
}
.link-hover {
text-decoration-line: none
}
@media (hover: hover) {
.link-hover:hover {
text-decoration-line: underline
}
}
.btn {
display: inline-flex;
flex-shrink: 0;
cursor: pointer;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
gap: .375rem;
text-align: center;
vertical-align: middle;
outline-offset: 2px;
webkit-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
padding-inline: var(--btn-p);
color: var(--btn-fg);
--tw-prose-links: var(--btn-fg);
height: var(--size);
font-size: var(--fontsize, .875rem);
font-weight: 600;
outline-color: var(--btn-color, var(--color-base-content));
transition-property: color, background-color, border-color, box-shadow;
transition-timing-function: cubic-bezier(0, 0, .2, 1);
transition-duration: .2s;
border-start-start-radius: var(--join-ss, var(--radius-field));
border-start-end-radius: var(--join-se, var(--radius-field));
border-end-start-radius: var(--join-es, var(--radius-field));
border-end-end-radius: var(--join-ee, var(--radius-field));
background-color: var(--btn-bg);
background-size: auto, calc(var(--noise) * 100%);
background-image: none, var(--btn-noise);
border-width: var(--border);
border-style: solid;
border-color: var(--btn-border);
text-shadow: 0 .5px oklch(100% 0 0 / calc(var(--depth) * .15));
touch-action: manipulation;
box-shadow: 0 .5px 0 .5px oklch(100% 0 0 / calc(var(--depth) * 6%)) inset, var(--btn-shadow);
--size: calc(var(--size-field, .25rem) * 10);
--btn-bg: var(--btn-color, var(--color-base-200));
--btn-fg: var(--color-base-content);
--btn-p: 1rem;
--btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%));
--btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000), 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000);
--btn-noise: var(--fx-noise)
}
.prose .btn {
text-decoration-line: none
}
@media (hover: hover) {
.btn:hover {
--btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%)
}
}
.btn:focus-visible, .btn:has(:focus-visible) {
outline-width: 2px;
outline-style: solid;
isolation: isolate
}
.btn:active:not(.btn-active) {
translate: 0 .5px;
--btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 5%);
--btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
--btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0)
}
.btn:is(:disabled,[disabled],.btn-disabled):not(.btn-link,.btn-ghost) {
background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
box-shadow: none
}
.btn:is(:disabled,[disabled],.btn-disabled) {
pointer-events: none;
--btn-border: #0000;
--btn-noise: none;
--btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000)
}
@media (hover: hover) {
.btn:is(:disabled,[disabled],.btn-disabled):hover {
pointer-events: none;
background-color: color-mix(in oklab, var(--color-neutral) 20%, transparent);
--btn-border: #0000;
--btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000)
}
}
.btn:is(input[type=checkbox],input[type=radio]) {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none
}
.btn:is(input[type=checkbox],input[type=radio]):after {
content: attr(aria-label)
}
.btn:where(input:checked:not(.filter .btn)) {
--btn-color: var(--color-primary);
--btn-fg: var(--color-primary-content);
isolation: isolate
}
.btn-primary {
--btn-color: var(--color-primary);
--btn-fg: var(--color-primary-content)
}
.btn-ghost:not(.btn-active,:hover,:active:focus,:focus-visible) {
--btn-shadow: "";
--btn-bg: #0000;
--btn-border: #0000;
--btn-noise: none
}
.btn-ghost:not(.btn-active,:hover,:active:focus,:focus-visible):not(:disabled,[disabled],.btn-disabled) {
outline-color: currentColor;
--btn-fg: currentColor
}
@media (hover: none) {
.btn-ghost:hover:not(.btn-active,:active,:focus-visible,:disabled,[disabled],.btn-disabled) {
--btn-shadow: "";
--btn-bg: #0000;
--btn-border: #0000;
--btn-noise: none;
--btn-fg: currentColor
}
}
.btn-outline:not(.btn-active,:hover,:active:focus,:focus-visible,:disabled,[disabled],.btn-disabled,:checked) {
--btn-shadow: "";
--btn-bg: #0000;
--btn-fg: var(--btn-color);
--btn-border: var(--btn-color);
--btn-noise: none
}
@media (hover: none) {
.btn-outline:hover:not(.btn-active,:active,:focus-visible,:disabled,[disabled],.btn-disabled,:checked) {
--btn-shadow: "";
--btn-bg: #0000;
--btn-fg: var(--btn-color);
--btn-border: var(--btn-color);
--btn-noise: none
}
}
.btn-sm {
--fontsize: .75rem;
--btn-p: .75rem;
--size: calc(var(--size-field, .25rem) * 8)
}
.btn {
font-weight: 500
}
.btn-primary {
transition-property: transform;
transition-property: box-shadow;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .2s
}
.btn-primary:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
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));
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.button {
cursor: pointer
}
.navbar-blur {
background-color: var(--color-base-100);
--tw-bg-opacity: .9;
--tw-backdrop-blur: blur(12px);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
.navbar {
padding: 0
}
.prose table {
margin-top: 2rem;
margin-bottom: 2rem;
margin-left: auto;
margin-right: auto;
width: -moz-fit-content;
width: fit-content;
display: table
}
.prose {
overflow-x: hidden
}
@media (max-width: 640px) {
.prose table {
min-width: 100%;
display: block;
width: -moz-max-content;
width: max-content;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch
}
.prose td, .prose th {
white-space: nowrap;
padding: .25rem .5rem;
font-size: .875rem;
line-height: 1.25rem
}
}
.prose table::-webkit-scrollbar {
height: 8px
}
.prose table::-webkit-scrollbar-track {
border-radius: .25rem;
background-color: var(--color-base-200)
}
.prose table::-webkit-scrollbar-thumb {
border-radius: .25rem;
background-color: var(--color-base-300)
}
.prose table::-webkit-scrollbar-thumb:hover {
background-color: var(--color-base-content);
--tw-bg-opacity: .2
}
.sticky {
position: sticky
}
.top-0 {
top: 0
}
.z-40 {
z-index: 40
}
.z-50 {
z-index: 50
}
.mx-2 {
margin-left: .5rem;
margin-right: .5rem
}
.mx-auto {
margin-left: auto;
margin-right: auto
}
.mb-4 {
margin-bottom: 1rem
}
.mb-6 {
margin-bottom: 1.5rem
}
.mb-8 {
margin-bottom: 2rem
}
.ml-2 {
margin-left: .5rem
}
.flex {
display: flex
}
.inline-flex {
display: inline-flex
}
.hidden {
display: none
}
.h-4 {
height: 1rem
}
.h-5 {
height: 1.25rem
}
.max-h-8 {
max-height: 2rem
}
.min-h-screen {
min-height: 100vh
}
.w-4 {
width: 1rem
}
.w-44 {
width: 11rem
}
.w-5 {
width: 1.25rem
}
.w-auto {
width: auto
}
.w-full {
width: 100%
}
.min-w-0 {
min-width: 0
}
.max-w-5xl {
max-width: 64rem
}
.max-w-\[150px\] {
max-width: 150px
}
.max-w-none {
max-width: none
}
.flex-1 {
flex: 1 1 0%
}
.flex-none {
flex: none
}
.flex-shrink-0 {
flex-shrink: 0
}
.select-none {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none
}
.flex-col {
flex-direction: column
}
.flex-wrap {
flex-wrap: wrap
}
.items-center {
align-items: center
}
.justify-center {
justify-content: center
}
.justify-between {
justify-content: space-between
}
.gap-2 {
gap: .5rem
}
.gap-4 {
gap: 1rem
}
.gap-8 {
gap: 2rem
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(.5rem * var(--tw-space-y-reverse))
}
.overflow-hidden {
overflow: hidden
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.rounded-none {
border-radius: 0
}
.border-b {
border-bottom-width: 1px
}
.border-base-300 {
border-color: var(--color-base-300)
}
.bg-base-100 {
background-color: var(--color-base-100)
}
.bg-base-200 {
background-color: var(--color-base-200)
}
.bg-base-300 {
background-color: var(--color-base-300)
}
.fill-current {
fill: currentColor
}
.object-contain {
-o-object-fit: contain;
object-fit: contain
}
.p-0 {
padding: 0
}
.px-3 {
padding-left: .75rem;
padding-right: .75rem
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem
}
.py-10 {
padding-top: 2.5rem;
padding-bottom: 2.5rem
}
.py-2 {
padding-top: .5rem;
padding-bottom: .5rem
}
.py-3 {
padding-top: .75rem;
padding-bottom: .75rem
}
.pb-12 {
padding-bottom: 3rem
}
.pb-16 {
padding-bottom: 4rem
}
.pb-8 {
padding-bottom: 2rem
}
.pt-12 {
padding-top: 3rem
}
.pt-16 {
padding-top: 4rem
}
.pt-8 {
padding-top: 2rem
}
.text-left {
text-align: left
}
.text-center {
text-align: center
}
.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem
}
.text-sm {
font-size: .875rem;
line-height: 1.25rem
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem
}
.font-bold {
font-weight: 700
}
.font-medium {
font-weight: 500
}
.capitalize {
text-transform: capitalize
}
.text-base-content {
color: var(--color-base-content)
}
.opacity-70 {
opacity: .7
}
.shadow-lg {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.transition-colors {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s
}
.rounded-box {
border-radius: var(--radius-box)
}
:root .prose {
--tw-prose-body: color-mix(in oklab, var(--color-base-content) 80%, #0000);
--tw-prose-headings: var(--color-base-content);
--tw-prose-lead: var(--color-base-content);
--tw-prose-links: var(--color-base-content);
--tw-prose-bold: var(--color-base-content);
--tw-prose-counters: var(--color-base-content);
--tw-prose-bullets: color-mix(in oklab, var(--color-base-content) 50%, #0000);
--tw-prose-hr: color-mix(in oklab, var(--color-base-content) 20%, #0000);
--tw-prose-quotes: var(--color-base-content);
--tw-prose-quote-borders: color-mix(in oklab, var(--color-base-content) 20%, #0000);
--tw-prose-captions: color-mix(in oklab, var(--color-base-content) 50%, #0000);
--tw-prose-code: var(--color-base-content);
--tw-prose-pre-code: var(--color-neutral-content);
--tw-prose-pre-bg: var(--color-neutral);
--tw-prose-th-borders: color-mix(in oklab, var(--color-base-content) 50%, #0000);
--tw-prose-td-borders: color-mix(in oklab, var(--color-base-content) 20%, #0000);
--tw-prose-kbd: color-mix(in oklab, var(--color-base-content) 80%, #0000)
}
:root .prose :where(code):not(pre>code) {
background-color: var(--color-base-200);
border-radius: var(--radius-selector);
border: var(--border) solid var(--color-base-300);
padding-inline: .5em;
font-weight: inherit
}
:root .prose :where(code):not(pre>code):after, :root .prose :where(code):not(pre>code):before {
display: none
}
.hover\:bg-base-200:hover {
background-color: var(--color-base-200)
}
.hover\:text-primary:hover {
color: var(--color-primary)
}
@media (min-width: 390px) {
.min-\[390px\]\:block {
display: block
}
}
@media (min-width: 768px) {
.md\:grid {
display: grid
}
.md\:max-h-10 {
max-height: 2.5rem
}
.md\:grid-cols-3 {
grid-template-columns:repeat(3, minmax(0, 1fr))
}
.md\:flex-row {
flex-direction: row
}
.md\:justify-end {
justify-content: flex-end
}
.md\:gap-2 {
gap: .5rem
}
.md\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.md\:text-left {
text-align: left
}
.md\:text-5xl {
font-size: 3rem;
line-height: 1
}
}
.button.btn-primary {
background-color: var(--button-primary-bg, var(--color-primary, var(--color-primary)));
color: var(--button-primary-text, var(--color-primary-content, var(--color-primary-content)));
border: var(--button-primary-border-width, 0) solid var(--button-primary-border, transparent);
box-shadow: var(--button-primary-shadow, var(--shadow-button, 0 2px 4px 0 rgba(0, 0, 0, .1)))
}
.button.btn-primary:hover {
background-color: var(--button-primary-hover-bg, var(--button-primary-bg, var(--color-primary, var(--color-primary))));
color: var(--button-primary-hover-text, var(--button-primary-text, var(--color-primary-content, var(--color-primary-content))));
border-color: var(--button-primary-hover-border, var(--button-primary-border, transparent))
}
.button.btn-outline.btn-primary {
background-color: var(--button-secondary-bg, transparent);
color: var(--button-secondary-text, var(--color-secondary, var(--color-secondary)));
border: var(--button-secondary-border-width, 2px) solid var(--button-secondary-border, var(--color-secondary, var(--color-secondary)));
box-shadow: var(--button-secondary-shadow, none)
}
.button.btn-outline.btn-primary:hover {
background-color: var(--button-secondary-hover-bg, var(--button-secondary-bg, transparent));
color: var(--button-secondary-hover-text, var(--button-secondary-text, var(--color-secondary, var(--color-secondary))));
border-color: var(--button-secondary-hover-border, var(--button-secondary-border, var(--color-secondary, var(--color-secondary))))
}
.button.btn-sm {
height: 2rem;
padding-left: .75rem;
padding-right: .75rem;
font-size: .875rem;
line-height: 1.25rem
}
.button.btn-wide-padding {
padding-left: 3rem;
padding-right: 3rem;
text-transform: capitalize;
animation: pulse-scale 2s cubic-bezier(.4, 0, .6, 1) infinite
}
@keyframes pulse-scale {
0%, to {
transform: scale(1)
}
50% {
transform: scale(1.05)
}
}
header {
transition: box-shadow .3s ease
}
img {
-o-object-fit: contain;
object-fit: contain
}
.logo-link {
transition-property: opacity;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .2s
}
.logo-link:hover {
opacity: .8
}
.logo-link:focus {
outline: 2px solid transparent;
outline-offset: 2px
}
.logo-link:focus-visible {
outline-width: 2px;
outline-offset: 2px;
outline-color: var(--color-primary)
}
.dropdown-content {
border-width: 1px;
border-color: var(--color-base-300)
}
.dropdown-content li {
margin: 0;
padding: 0
}
.dropdown-content li a.active {
background-color: var(--color-primary);
color: var(--color-primary-content)
}
.dropdown-content li a:hover:not(.active) {
background-color: var(--color-base-300)
}
.link-hover {
transition-property: all;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .2s
}
.link-hover:hover {
opacity: .8
}
.faq-container > :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))
}
.faq-item {
border-radius: .5rem;
padding: 1rem
}
@media (min-width: 768px) {
.faq-item {
padding: 1.5rem
}
}
.faq-item {
transition: background-color .2s ease;
background-color: var(--card-background, var(--color-base-200, var(--color-base-200)));
border: var(--card-border-thickness, var(--border-thin, 1px)) solid var(--card-border-color, var(--color-border-default, var(--color-base-300)));
box-shadow: var(--card-shadow, var(--shadow-card, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06)));
border-radius: var(--card-radius, var(--radius-rounded, .5rem))
}
.faq-item:hover {
background-color: var(--card-background-hover, var(--color-base-300, var(--color-base-300)))
}
.faq-question {
cursor: pointer;
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: 500
}
@media (min-width: 768px) {
.faq-question {
font-size: 1.25rem;
line-height: 1.75rem
}
}
.faq-question {
display: flex;
align-items: center;
justify-content: space-between;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none
}
.faq-question::-webkit-details-marker {
display: none
}
.faq-question:focus {
outline: 0
}
.faq-question:focus-visible {
outline: var(--focus-outline-width, 2px) solid var(--focus-outline-color, var(--color-primary, var(--color-primary)));
outline-offset: var(--focus-outline-offset, 2px)
}
.faq-toggle-icon {
margin-left: 1rem;
color: var(--icon-color, var(--color-primary, var(--color-primary)));
transition: transform var(--transition-fast, .2s)
}
.faq-icon {
height: 1.5rem;
width: 1.5rem
}
.faq-answer {
margin-top: 1rem
}
.faq-content {
color: var(--tw-prose-body);
max-width: 65ch
}
.faq-content {
--tw-prose-body: #374151;
--tw-prose-headings: #111827;
--tw-prose-lead: #4b5563;
--tw-prose-links: #111827;
--tw-prose-bold: #111827;
--tw-prose-counters: #6b7280;
--tw-prose-bullets: #d1d5db;
--tw-prose-hr: #e5e7eb;
--tw-prose-quotes: #111827;
--tw-prose-quote-borders: #e5e7eb;
--tw-prose-captions: #6b7280;
--tw-prose-kbd: #111827;
--tw-prose-kbd-shadows: 17 24 39;
--tw-prose-code: #111827;
--tw-prose-pre-code: #e5e7eb;
--tw-prose-pre-bg: #1f2937;
--tw-prose-th-borders: #d1d5db;
--tw-prose-td-borders: #e5e7eb;
--tw-prose-invert-body: #d1d5db;
--tw-prose-invert-headings: #fff;
--tw-prose-invert-lead: #9ca3af;
--tw-prose-invert-links: #fff;
--tw-prose-invert-bold: #fff;
--tw-prose-invert-counters: #9ca3af;
--tw-prose-invert-bullets: #4b5563;
--tw-prose-invert-hr: #374151;
--tw-prose-invert-quotes: #f3f4f6;
--tw-prose-invert-quote-borders: #374151;
--tw-prose-invert-captions: #9ca3af;
--tw-prose-invert-kbd: #fff;
--tw-prose-invert-kbd-shadows: 255 255 255;
--tw-prose-invert-code: #fff;
--tw-prose-invert-pre-code: #d1d5db;
--tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
--tw-prose-invert-th-borders: #4b5563;
--tw-prose-invert-td-borders: #374151;
font-size: 1rem;
line-height: 1.75
}
.faq-content {
--tw-prose-body: var(--tw-prose-invert-body);
--tw-prose-headings: var(--tw-prose-invert-headings);
--tw-prose-lead: var(--tw-prose-invert-lead);
--tw-prose-links: var(--tw-prose-invert-links);
--tw-prose-bold: var(--tw-prose-invert-bold);
--tw-prose-counters: var(--tw-prose-invert-counters);
--tw-prose-bullets: var(--tw-prose-invert-bullets);
--tw-prose-hr: var(--tw-prose-invert-hr);
--tw-prose-quotes: var(--tw-prose-invert-quotes);
--tw-prose-quote-borders: var(--tw-prose-invert-quote-borders);
--tw-prose-captions: var(--tw-prose-invert-captions);
--tw-prose-kbd: var(--tw-prose-invert-kbd);
--tw-prose-kbd-shadows: var(--tw-prose-invert-kbd-shadows);
--tw-prose-code: var(--tw-prose-invert-code);
--tw-prose-pre-code: var(--tw-prose-invert-pre-code);
--tw-prose-pre-bg: var(--tw-prose-invert-pre-bg);
--tw-prose-th-borders: var(--tw-prose-invert-th-borders);
--tw-prose-td-borders: var(--tw-prose-invert-td-borders)
}
.faq-content {
max-width: none
}
:root .faq-content {
--tw-prose-body: color-mix(in oklab, var(--color-base-content) 80%, #0000);
--tw-prose-headings: var(--color-base-content);
--tw-prose-lead: var(--color-base-content);
--tw-prose-links: var(--color-base-content);
--tw-prose-bold: var(--color-base-content);
--tw-prose-counters: var(--color-base-content);
--tw-prose-bullets: color-mix(in oklab, var(--color-base-content) 50%, #0000);
--tw-prose-hr: color-mix(in oklab, var(--color-base-content) 20%, #0000);
--tw-prose-quotes: var(--color-base-content);
--tw-prose-quote-borders: color-mix(in oklab, var(--color-base-content) 20%, #0000);
--tw-prose-captions: color-mix(in oklab, var(--color-base-content) 50%, #0000);
--tw-prose-code: var(--color-base-content);
--tw-prose-pre-code: var(--color-neutral-content);
--tw-prose-pre-bg: var(--color-neutral);
--tw-prose-th-borders: color-mix(in oklab, var(--color-base-content) 50%, #0000);
--tw-prose-td-borders: color-mix(in oklab, var(--color-base-content) 20%, #0000);
--tw-prose-kbd: color-mix(in oklab, var(--color-base-content) 80%, #0000)
}
.faq-content {
color: var(--color-base-content);
opacity: .9
}
.game-grid {
display: grid;
gap: 1.5rem;
grid-template-columns:repeat(2, 1fr)
}
@media (max-width: 767px) {
.game-grid {
gap: 1rem;
grid-template-columns:repeat(2, 1fr)
}
.game-name {
font-size: .875rem
}
.provider-name {
font-size: .75rem
}
}
@media (min-width: 768px) {
.game-grid {
grid-template-columns:repeat(4, 1fr);
gap: 2rem
}
}
.game-grid .game-item {
display: flex;
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));
flex-direction: column
}
.game-grid .game-item:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
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))
}
.game-grid .game-item {
overflow: hidden;
border-radius: .5rem;
background-color: var(--color-base-200);
transition: transform var(--transition-medium, .3s) ease, box-shadow var(--transition-medium, .3s) ease;
box-shadow: var(--card-shadow, var(--shadow-card, 0 2px 4px 0 rgba(0, 0, 0, .1)))
}
.game-grid .game-item:hover {
box-shadow: 0 10px 30px hsl(var(--b3) / .3)
}
.game-image-wrapper {
position: relative;
flex-shrink: 0;
overflow: hidden;
border-top-left-radius: .5rem;
border-top-right-radius: .5rem;
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
background-color: var(--color-base-200);
aspect-ratio: 3/4
}
.game-image {
margin: 0;
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover
}
.game-overlay {
position: absolute;
inset: 0;
opacity: 0;
background: var(--overlay-gradient, linear-gradient(to top, rgba(26, 26, 26, .8), rgba(26, 26, 26, .4), transparent));
transition: opacity var(--transition-medium, .3s)
}
.game-grid .game-item:hover .game-overlay {
opacity: 1
}
.game-info {
border-bottom-right-radius: .5rem;
border-bottom-left-radius: .5rem;
padding: .5rem;
text-align: center;
background-color: var(--card-background, var(--color-base-200, var(--color-base-200)));
border: var(--card-border-thickness, var(--border-thin, 1px)) solid var(--card-border-color, var(--color-border-default, var(--color-base-300)));
border-top: none;
color: var(--color-base-content, var(--color-base-content))
}
.game-name {
margin-top: .5rem;
margin-bottom: .5rem;
display: block;
font-size: 1.125rem;
line-height: 1.75rem;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
color: var(--color-base-content, var(--color-base-content));
transition: color var(--transition-medium, .3s);
font-weight: 600
}
.game-grid .game-item:hover .game-name {
color: var(--link-hover-color, var(--color-primary, var(--color-primary)))
}
.provider-name {
display: block;
font-size: .875rem;
line-height: 1.25rem;
color: var(--color-base-content, var(--color-base-content));
opacity: .85;
font-weight: 500
}
.toc-container {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
border-radius: .75rem;
background-color: var(--color-base-200);
--tw-bg-opacity: .5;
padding: 1.25rem;
background-color: var(--card-background, var(--color-base-200, var(--color-base-200)));
border: var(--card-border-thickness, var(--border-thin, 1px)) solid var(--card-border-color, var(--color-border-default, var(--color-base-300)));
box-shadow: var(--card-shadow, var(--shadow-card, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06)));
border-radius: var(--card-radius, var(--radius-rounded, .5rem))
}
.toc-header {
display: flex;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
align-items: center;
gap: .5rem
}
.toc-header::-webkit-details-marker {
display: none
}
.toc-header:focus {
outline: 0
}
.toc-header:focus-visible {
outline: var(--focus-outline-width, 2px) solid var(--focus-outline-color, var(--color-primary, var(--color-primary)));
outline-offset: var(--focus-outline-offset, 2px);
border-radius: .5rem
}
.toc-icon {
height: 1.25rem;
width: 1.25rem;
color: var(--icon-color, var(--color-primary, var(--color-primary)));
width: var(--icon-size, 1.25rem);
height: var(--icon-size, 1.25rem)
}
.toc-title {
flex: 1 1 0%;
font-size: 1rem;
line-height: 1.5rem;
font-weight: 500;
letter-spacing: .05em;
color: var(--color-base-content)
}
.toc-toggle-icon {
height: 1.25rem;
width: 1.25rem;
color: var(--icon-color, var(--color-primary, var(--color-primary)));
width: var(--icon-size, 1.25rem);
height: var(--icon-size, 1.25rem);
transition: transform var(--transition-fast, .2s)
}
.toc-list > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(.5rem * var(--tw-space-y-reverse))
}
.toc-item {
list-style-type: none
}
.toc-link {
display: block;
padding-top: .25rem;
padding-bottom: .25rem;
color: var(--link-color, var(--color-base-content, var(--color-base-content)));
opacity: var(--link-opacity, .7);
transition: color var(--transition-fast, .2s), opacity var(--transition-fast, .2s)
}
.toc-link:hover {
color: var(--link-hover-color, var(--color-primary, var(--color-primary)));
opacity: var(--link-hover-opacity, 1);
--tw-translate-x: .25rem;
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))
}
html {
scroll-behavior: smooth
}
h2[id], h3[id] {
scroll-margin-top: 5rem
}
@media (max-width: 768px) {
.toc-container {
margin-left: .5rem;
margin-right: .5rem;
padding: 1rem
}
.toc-title {
font-size: .875rem;
line-height: 1.25rem
}
h2[id], h3[id] {
scroll-margin-top: 4rem
}
}
.hero-section > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.5rem * var(--tw-space-y-reverse))
}
.provider-grid {
display: grid;
gap: 1.5rem;
grid-template-columns:repeat(2, 1fr)
}
@media (max-width: 767px) {
.provider-grid {
gap: 1rem;
grid-template-columns:repeat(2, 1fr)
}
}
@media (min-width: 768px) {
.provider-grid {
grid-template-columns:repeat(4, 1fr);
gap: 2rem
}
}
.provider-item {
display: flex;
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));
flex-direction: column
}
.provider-item:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
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))
}
.provider-item {
overflow: hidden;
border-radius: .5rem;
background-color: var(--color-base-200);
transition: transform var(--transition-medium, .3s) ease, box-shadow var(--transition-medium, .3s) ease;
box-shadow: var(--card-shadow, var(--shadow-card, 0 2px 4px 0 rgba(0, 0, 0, .1)))
}
.provider-item:hover {
box-shadow: var(--shadow-large, 0 10px 30px hsl(var(--b3) / .3))
}
.provider-image-wrapper {
position: relative;
flex-shrink: 0;
overflow: hidden;
border-top-left-radius: .5rem;
border-top-right-radius: .5rem;
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
background-color: var(--color-base-200);
aspect-ratio: 16/9
}
.provider-image {
margin: 0;
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover
}
.provider-overlay {
position: absolute;
inset: 0;
opacity: 0;
background: var(--overlay-gradient, linear-gradient(to top, rgba(26, 26, 26, .8), rgba(26, 26, 26, .4), transparent));
transition: opacity var(--transition-medium, .3s)
}
.provider-item:hover .provider-overlay {
opacity: 1
}
.provider-info {
border-bottom-right-radius: .5rem;
border-bottom-left-radius: .5rem;
padding: .5rem;
text-align: center;
background-color: var(--card-background, var(--color-base-200, var(--color-base-200)));
border: var(--card-border-thickness, var(--border-thin, 1px)) solid var(--card-border-color, var(--color-border-default, var(--color-base-300)));
border-top: none
}
.provider-name {
margin-top: .5rem;
margin-bottom: .5rem;
display: block;
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: 600;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
color: var(--link-color, var(--color-base-content, var(--color-base-content)));
transition: color var(--transition-medium, .3s)
}
.provider-item:hover .provider-name {
color: var(--link-hover-color, var(--color-primary, var(--color-primary)))
}
@media (max-width: 767px) {
.provider-name {
font-size: .875rem
}
}
*, :before, :after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / .5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style:
}
::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / .5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style:
}
*, :before, :after {
box-sizing: border-box;
border-width: 0;
border-style: solid;
border-color: #e5e7eb
}
:before, :after {
--tw-content: ""
}
html, :host {
line-height: 1.5;
-webkit-text-size-adjust: 100%;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
font-feature-settings: normal;
font-variation-settings: normal;
-webkit-tap-highlight-color: transparent
}
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: JetBrains Mono, Consolas, monospace;
font-feature-settings: normal;
font-variation-settings: normal;
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-feature-settings: inherit;
font-variation-settings: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
letter-spacing: inherit;
color: inherit;
margin: 0;
padding: 0
}
button, select {
text-transform: none
}
button, input:where([type=button]), input:where([type=reset]), input:where([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
}
dialog {
padding: 0
}
textarea {
resize: vertical
}
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]:where(:not([hidden=until-found])) {
display: none
}
:where(:root), :root:has(input.theme-controller[value=light]:checked), [data-theme=light] {
color-scheme: light;
--color-base-100: oklch(100% 0 0);
--color-base-200: oklch(98% 0 0);
--color-base-300: oklch(95% 0 0);
--color-base-content: oklch(21% .006 285.885);
--color-primary: oklch(45% .24 277.023);
--color-primary-content: oklch(93% .034 272.788);
--color-secondary: oklch(65% .241 354.308);
--color-secondary-content: oklch(94% .028 342.258);
--color-accent: oklch(77% .152 181.912);
--color-accent-content: oklch(38% .063 188.416);
--color-neutral: oklch(14% .005 285.823);
--color-neutral-content: oklch(92% .004 286.32);
--color-info: oklch(74% .16 232.661);
--color-info-content: oklch(29% .066 243.157);
--color-success: oklch(76% .177 163.223);
--color-success-content: oklch(37% .077 168.94);
--color-warning: oklch(82% .189 84.429);
--color-warning-content: oklch(41% .112 45.904);
--color-error: oklch(71% .194 13.428);
--color-error-content: oklch(27% .105 12.094);
--radius-selector: .5rem;
--radius-field: .25rem;
--radius-box: .5rem;
--size-selector: .25rem;
--size-field: .25rem;
--border: 1px;
--depth: 1;
--noise: 0
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
color-scheme: dark;
--color-base-100: oklch(25.33% .016 252.42);
--color-base-200: oklch(23.26% .014 253.1);
--color-base-300: oklch(21.15% .012 254.09);
--color-base-content: oklch(97.807% .029 256.847);
--color-primary: oklch(58% .233 277.117);
--color-primary-content: oklch(96% .018 272.314);
--color-secondary: oklch(65% .241 354.308);
--color-secondary-content: oklch(94% .028 342.258);
--color-accent: oklch(77% .152 181.912);
--color-accent-content: oklch(38% .063 188.416);
--color-neutral: oklch(14% .005 285.823);
--color-neutral-content: oklch(92% .004 286.32);
--color-info: oklch(74% .16 232.661);
--color-info-content: oklch(29% .066 243.157);
--color-success: oklch(76% .177 163.223);
--color-success-content: oklch(37% .077 168.94);
--color-warning: oklch(82% .189 84.429);
--color-warning-content: oklch(41% .112 45.904);
--color-error: oklch(71% .194 13.428);
--color-error-content: oklch(27% .105 12.094);
--radius-selector: .5rem;
--radius-field: .25rem;
--radius-box: .5rem;
--size-selector: .25rem;
--size-field: .25rem;
--border: 1px;
--depth: 1;
--noise: 0
}
}
:root:has(input.theme-controller[value=light]:checked), [data-theme=light] {
color-scheme: light;
--color-base-100: oklch(100% 0 0);
--color-base-200: oklch(98% 0 0);
--color-base-300: oklch(95% 0 0);
--color-base-content: oklch(21% .006 285.885);
--color-primary: oklch(45% .24 277.023);
--color-primary-content: oklch(93% .034 272.788);
--color-secondary: oklch(65% .241 354.308);
--color-secondary-content: oklch(94% .028 342.258);
--color-accent: oklch(77% .152 181.912);
--color-accent-content: oklch(38% .063 188.416);
--color-neutral: oklch(14% .005 285.823);
--color-neutral-content: oklch(92% .004 286.32);
--color-info: oklch(74% .16 232.661);
--color-info-content: oklch(29% .066 243.157);
--color-success: oklch(76% .177 163.223);
--color-success-content: oklch(37% .077 168.94);
--color-warning: oklch(82% .189 84.429);
--color-warning-content: oklch(41% .112 45.904);
--color-error: oklch(71% .194 13.428);
--color-error-content: oklch(27% .105 12.094);
--radius-selector: .5rem;
--radius-field: .25rem;
--radius-box: .5rem;
--size-selector: .25rem;
--size-field: .25rem;
--border: 1px;
--depth: 1;
--noise: 0
}
:root:has(input.theme-controller[value=dark]:checked), [data-theme=dark] {
color-scheme: dark;
--color-base-100: oklch(25.33% .016 252.42);
--color-base-200: oklch(23.26% .014 253.1);
--color-base-300: oklch(21.15% .012 254.09);
--color-base-content: oklch(97.807% .029 256.847);
--color-primary: oklch(58% .233 277.117);
--color-primary-content: oklch(96% .018 272.314);
--color-secondary: oklch(65% .241 354.308);
--color-secondary-content: oklch(94% .028 342.258);
--color-accent: oklch(77% .152 181.912);
--color-accent-content: oklch(38% .063 188.416);
--color-neutral: oklch(14% .005 285.823);
--color-neutral-content: oklch(92% .004 286.32);
--color-info: oklch(74% .16 232.661);
--color-info-content: oklch(29% .066 243.157);
--color-success: oklch(76% .177 163.223);
--color-success-content: oklch(37% .077 168.94);
--color-warning: oklch(82% .189 84.429);
--color-warning-content: oklch(41% .112 45.904);
--color-error: oklch(71% .194 13.428);
--color-error-content: oklch(27% .105 12.094);
--radius-selector: .5rem;
--radius-field: .25rem;
--radius-box: .5rem;
--size-selector: .25rem;
--size-field: .25rem;
--border: 1px;
--depth: 1;
--noise: 0
}
@property --radialprogress {
syntax: "";
inherits: true;
initial-value: 0%;
}
:root {
--fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E")
}
:root, [data-theme] {
background-color: var(--root-bg, var(--color-base-100));
color: var(--color-base-content)
}
:root {
scrollbar-color: color-mix(in oklch, currentColor 35%, #0000) #0000
}
:root, [data-theme=dark] {
--color-primary: #FFD700;
--color-primary-content: #000000;
--color-secondary: #FF0000;
--color-secondary-content: #FFFFFF;
--color-accent: #00FF00;
--color-accent-content: #000000;
--color-neutral: #3A3A3A;
--color-neutral-content: #E5E5E5;
--color-base-100: #0A0A0A;
--color-base-200: #1A1A1A;
--color-base-300: #252525;
--color-base-content: #FFFFFF;
--color-cta-primary: #FF0000;
--color-cta-primary-content: #FFFFFF;
--color-cta-secondary: #FFD700;
--color-cta-secondary-content: #000000;
--color-border-default: #2A2A2A;
--color-border-decorative: #FFD700;
--color-info: #3ABFF8;
--color-info-content: #002B47;
--color-success: #4ADE80;
--color-success-content: #003320;
--color-warning: #FFB300;
--color-warning-content: #3D2000;
--color-error: #FF5757;
--color-error-content: #FFFFFF;
--border-none: 0;
--border-thin: 1px;
--border-medium: 2px;
--border-thick: 3px;
--shadow-none: none;
--shadow-small: 0 2px 4px rgba(0, 0, 0, .5);
--shadow-medium: 0 4px 8px rgba(0, 0, 0, .6);
--shadow-large: 0 8px 16px rgba(0, 0, 0, .7);
--shadow-xl: 0 12px 24px rgba(0, 0, 0, .8);
--shadow-card: 0 4px 12px rgba(0, 0, 0, .6);
--shadow-button: 0 4px 8px rgba(255, 0, 0, .3);
--shadow-header: 0 2px 8px rgba(0, 0, 0, .7);
--shadow-dropdown: 0 8px 20px rgba(0, 0, 0, .8);
--radius-sharp: 0;
--radius-rounded: 8px;
--radius-pill: 50px;
--font-display: "Bebas Neue", system-ui, sans-serif;
--font-body: "Inter", system-ui, sans-serif;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-black: 900;
--font-weight-heading: 700;
--font-weight-button: 700;
--font-weight-label: 500;
--card-background: #1A1A1A;
--card-background-hover: #252525;
--card-border-color: #2A2A2A;
--card-border-thickness: 1px;
--card-shadow: 0 4px 12px rgba(0, 0, 0, .6);
--card-radius: 8px;
--button-primary-bg: #FF0000;
--button-primary-text: #FFFFFF;
--button-primary-border: transparent;
--button-primary-border-width: 0;
--button-primary-shadow: 0 4px 12px rgba(255, 0, 0, .4);
--button-primary-hover-bg: #CC0000;
--button-primary-hover-text: #FFFFFF;
--button-primary-hover-border: transparent;
--button-secondary-bg: transparent;
--button-secondary-text: #FFFFFF;
--button-secondary-border: #FFFFFF;
--button-secondary-border-width: 2px;
--button-secondary-shadow: none;
--button-secondary-hover-bg: #FFFFFF;
--button-secondary-hover-text: #000000;
--button-secondary-hover-border: #FFFFFF;
--button-radius: 4px;
--button-font-weight: 700;
--button-transition: all .2s ease;
--link-color: #FFFFFF;
--link-hover-color: #FFD700;
--link-opacity: .7;
--link-hover-opacity: 1;
--icon-color: #FFD700;
--icon-size: 1.25rem;
--transition-fast: .2s;
--transition-medium: .3s;
--transition-slow: .5s;
--focus-outline-width: 2px;
--focus-outline-color: #FFD700;
--focus-outline-offset: 2px;
--overlay-gradient: linear-gradient(to top, rgba(26, 26, 26, .8), rgba(26, 26, 26, .4), transparent)
}
@media (prefers-color-scheme: dark) {
:root {
--color-primary: #FFD700;
--color-primary-content: #000000;
--color-secondary: #FF0000;
--color-secondary-content: #FFFFFF;
--color-accent: #00FF00;
--color-accent-content: #000000;
--color-neutral: #3A3A3A;
--color-neutral-content: #E5E5E5;
--color-base-100: #0A0A0A;
--color-base-200: #1A1A1A;
--color-base-300: #252525;
--color-base-content: #FFFFFF;
--color-cta-primary: #FF0000;
--color-cta-primary-content: #FFFFFF;
--color-cta-secondary: #FFD700;
--color-cta-secondary-content: #000000;
--color-border-default: #2A2A2A;
--color-border-decorative: #FFD700;
--color-info: #3ABFF8;
--color-info-content: #002B47;
--color-success: #4ADE80;
--color-success-content: #003320;
--color-warning: #FFB300;
--color-warning-content: #3D2000;
--color-error: #FF5757;
--color-error-content: #FFFFFF;
--border-none: 0;
--border-thin: 1px;
--border-medium: 2px;
--border-thick: 3px;
--shadow-none: none;
--shadow-small: 0 2px 4px rgba(0, 0, 0, .5);
--shadow-medium: 0 4px 8px rgba(0, 0, 0, .6);
--shadow-large: 0 8px 16px rgba(0, 0, 0, .7);
--shadow-xl: 0 12px 24px rgba(0, 0, 0, .8);
--shadow-card: 0 4px 12px rgba(0, 0, 0, .6);
--shadow-button: 0 4px 8px rgba(255, 0, 0, .3);
--shadow-header: 0 2px 8px rgba(0, 0, 0, .7);
--shadow-dropdown: 0 8px 20px rgba(0, 0, 0, .8);
--radius-sharp: 0;
--radius-rounded: 8px;
--radius-pill: 50px;
--font-display: "Bebas Neue", system-ui, sans-serif;
--font-body: "Inter", system-ui, sans-serif;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-black: 900;
--font-weight-heading: 700;
--font-weight-button: 700;
--font-weight-label: 500;
--card-background: #1A1A1A;
--card-background-hover: #252525;
--card-border-color: #2A2A2A;
--card-border-thickness: 1px;
--card-shadow: 0 4px 12px rgba(0, 0, 0, .6);
--card-radius: 8px;
--button-primary-bg: #FF0000;
--button-primary-text: #FFFFFF;
--button-primary-border: transparent;
--button-primary-border-width: 0;
--button-primary-shadow: 0 4px 12px rgba(255, 0, 0, .4);
--button-primary-hover-bg: #CC0000;
--button-primary-hover-text: #FFFFFF;
--button-primary-hover-border: transparent;
--button-secondary-bg: transparent;
--button-secondary-text: #FFFFFF;
--button-secondary-border: #FFFFFF;
--button-secondary-border-width: 2px;
--button-secondary-shadow: none;
--button-secondary-hover-bg: #FFFFFF;
--button-secondary-hover-text: #000000;
--button-secondary-hover-border: #FFFFFF;
--button-radius: 4px;
--button-font-weight: 700;
--button-transition: all .2s ease;
--link-color: #FFFFFF;
--link-hover-color: #FFD700;
--link-opacity: .7;
--link-hover-opacity: 1;
--icon-color: #FFD700;
--icon-size: 1.25rem;
--transition-fast: .2s;
--transition-medium: .3s;
--transition-slow: .5s;
--focus-outline-width: 2px;
--focus-outline-color: #FFD700;
--focus-outline-offset: 2px;
--overlay-gradient: linear-gradient(to top, rgba(26, 26, 26, .8), rgba(26, 26, 26, .4), transparent)
}
}
.container {
width: 100%
}
@media (min-width: 640px) {
.container {
max-width: 640px
}
}
@media (min-width: 768px) {
.container {
max-width: 768px
}
}
@media (min-width: 1024px) {
.container {
max-width: 1024px
}
}
@media (min-width: 1280px) {
.container {
max-width: 1280px
}
}
@media (min-width: 1536px) {
.container {
max-width: 1536px
}
}
.prose {
color: var(--tw-prose-body);
max-width: 65ch
}
.prose :where(p):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 1.25em;
margin-bottom: 1.25em
}
.prose :where([class~=lead]):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-lead);
font-size: 1.25em;
line-height: 1.6;
margin-top: 1.2em;
margin-bottom: 1.2em
}
.prose :where(a):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-links);
text-decoration: underline;
font-weight: 500
}
.prose :where(strong):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-bold);
font-weight: 600
}
.prose :where(a strong):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit
}
.prose :where(blockquote strong):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit
}
.prose :where(thead th strong):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit
}
.prose :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: decimal;
margin-top: 1.25em;
margin-bottom: 1.25em;
padding-inline-start: 1.625em
}
.prose :where(ol[type=A]):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: upper-alpha
}
.prose :where(ol[type=a]):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: lower-alpha
}
.prose :where(ol[type=A s]):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: upper-alpha
}
.prose :where(ol[type=a s]):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: lower-alpha
}
.prose :where(ol[type=I]):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: upper-roman
}
.prose :where(ol[type=i]):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: lower-roman
}
.prose :where(ol[type=I s]):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: upper-roman
}
.prose :where(ol[type=i s]):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: lower-roman
}
.prose :where(ol[type="1"]):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: decimal
}
.prose :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: disc;
margin-top: 1.25em;
margin-bottom: 1.25em;
padding-inline-start: 1.625em
}
.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker {
font-weight: 400;
color: var(--tw-prose-counters)
}
.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker {
color: var(--tw-prose-bullets)
}
.prose :where(dt):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-headings);
font-weight: 600;
margin-top: 1.25em
}
.prose :where(hr):not(:where([class~=not-prose],[class~=not-prose] *)) {
border-color: var(--tw-prose-hr);
border-top-width: 1px;
margin-top: 3em;
margin-bottom: 3em
}
.prose :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)) {
font-weight: 500;
font-style: italic;
color: var(--tw-prose-quotes);
border-inline-start-width: .25rem;
border-inline-start-color: var(--tw-prose-quote-borders);
quotes: "“" "”" "‘" "’";
margin-top: 1.6em;
margin-bottom: 1.6em;
padding-inline-start: 1em
}
.prose :where(blockquote p:first-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):before {
content: open-quote
}
.prose :where(blockquote p:last-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):after {
content: close-quote
}
.prose :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-headings);
font-weight: 800;
font-size: 2.25em;
margin-top: 0;
margin-bottom: .8888889em;
line-height: 1.1111111
}
.prose :where(h1 strong):not(:where([class~=not-prose],[class~=not-prose] *)) {
font-weight: 900;
color: inherit
}
.prose :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-headings);
font-weight: 700;
font-size: 1.5em;
margin-top: 2em;
margin-bottom: 1em;
line-height: 1.3333333
}
.prose :where(h2 strong):not(:where([class~=not-prose],[class~=not-prose] *)) {
font-weight: 800;
color: inherit
}
.prose :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-headings);
font-weight: 600;
font-size: 1.25em;
margin-top: 1.6em;
margin-bottom: .6em;
line-height: 1.6
}
.prose :where(h3 strong):not(:where([class~=not-prose],[class~=not-prose] *)) {
font-weight: 700;
color: inherit
}
.prose :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-headings);
font-weight: 600;
margin-top: 1.5em;
margin-bottom: .5em;
line-height: 1.5
}
.prose :where(h4 strong):not(:where([class~=not-prose],[class~=not-prose] *)) {
font-weight: 700;
color: inherit
}
.prose :where(img):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 2em;
margin-bottom: 2em
}
.prose :where(picture):not(:where([class~=not-prose],[class~=not-prose] *)) {
display: block;
margin-top: 2em;
margin-bottom: 2em
}
.prose :where(video):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 2em;
margin-bottom: 2em
}
.prose :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)) {
font-weight: 500;
font-family: inherit;
color: var(--tw-prose-kbd);
box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px rgb(var(--tw-prose-kbd-shadows) / 10%);
font-size: .875em;
border-radius: .3125rem;
padding-top: .1875em;
padding-inline-end: .375em;
padding-bottom: .1875em;
padding-inline-start: .375em
}
.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-code);
font-weight: 600;
font-size: .875em
}
.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):before {
content: "`"
}
.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):after {
content: "`"
}
.prose :where(a code):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit
}
.prose :where(h1 code):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit
}
.prose :where(h2 code):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit;
font-size: .875em
}
.prose :where(h3 code):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit;
font-size: .9em
}
.prose :where(h4 code):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit
}
.prose :where(blockquote code):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit
}
.prose :where(thead th code):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit
}
.prose :where(pre):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-pre-code);
background-color: var(--tw-prose-pre-bg);
overflow-x: auto;
font-weight: 400;
font-size: .875em;
line-height: 1.7142857;
margin-top: 1.7142857em;
margin-bottom: 1.7142857em;
border-radius: .375rem;
padding-top: .8571429em;
padding-inline-end: 1.1428571em;
padding-bottom: .8571429em;
padding-inline-start: 1.1428571em
}
.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)) {
background-color: transparent;
border-width: 0;
border-radius: 0;
padding: 0;
font-weight: inherit;
color: inherit;
font-size: inherit;
font-family: inherit;
line-height: inherit
}
.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):before {
content: none
}
.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):after {
content: none
}
.prose :where(table):not(:where([class~=not-prose],[class~=not-prose] *)) {
width: 100%;
table-layout: auto;
margin-top: 2em;
margin-bottom: 2em;
font-size: .875em;
line-height: 1.7142857
}
.prose :where(thead):not(:where([class~=not-prose],[class~=not-prose] *)) {
border-bottom-width: 1px;
border-bottom-color: var(--tw-prose-th-borders)
}
.prose :where(thead th):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-headings);
font-weight: 600;
vertical-align: bottom;
padding-inline-end: .5714286em;
padding-bottom: .5714286em;
padding-inline-start: .5714286em
}
.prose :where(tbody tr):not(:where([class~=not-prose],[class~=not-prose] *)) {
border-bottom-width: 1px;
border-bottom-color: var(--tw-prose-td-borders)
}
.prose :where(tbody tr:last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
border-bottom-width: 0
}
.prose :where(tbody td):not(:where([class~=not-prose],[class~=not-prose] *)) {
vertical-align: baseline
}
.prose :where(tfoot):not(:where([class~=not-prose],[class~=not-prose] *)) {
border-top-width: 1px;
border-top-color: var(--tw-prose-th-borders)
}
.prose :where(tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)) {
vertical-align: top
}
.prose :where(th,td):not(:where([class~=not-prose],[class~=not-prose] *)) {
text-align: start
}
.prose :where(figure>*):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 0;
margin-bottom: 0
}
.prose :where(figcaption):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-captions);
font-size: .875em;
line-height: 1.4285714;
margin-top: .8571429em
}
.prose {
--tw-prose-body: #374151;
--tw-prose-headings: #111827;
--tw-prose-lead: #4b5563;
--tw-prose-links: #111827;
--tw-prose-bold: #111827;
--tw-prose-counters: #6b7280;
--tw-prose-bullets: #d1d5db;
--tw-prose-hr: #e5e7eb;
--tw-prose-quotes: #111827;
--tw-prose-quote-borders: #e5e7eb;
--tw-prose-captions: #6b7280;
--tw-prose-kbd: #111827;
--tw-prose-kbd-shadows: 17 24 39;
--tw-prose-code: #111827;
--tw-prose-pre-code: #e5e7eb;
--tw-prose-pre-bg: #1f2937;
--tw-prose-th-borders: #d1d5db;
--tw-prose-td-borders: #e5e7eb;
--tw-prose-invert-body: #d1d5db;
--tw-prose-invert-headings: #fff;
--tw-prose-invert-lead: #9ca3af;
--tw-prose-invert-links: #fff;
--tw-prose-invert-bold: #fff;
--tw-prose-invert-counters: #9ca3af;
--tw-prose-invert-bullets: #4b5563;
--tw-prose-invert-hr: #374151;
--tw-prose-invert-quotes: #f3f4f6;
--tw-prose-invert-quote-borders: #374151;
--tw-prose-invert-captions: #9ca3af;
--tw-prose-invert-kbd: #fff;
--tw-prose-invert-kbd-shadows: 255 255 255;
--tw-prose-invert-code: #fff;
--tw-prose-invert-pre-code: #d1d5db;
--tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
--tw-prose-invert-th-borders: #4b5563;
--tw-prose-invert-td-borders: #374151;
font-size: 1rem;
line-height: 1.75
}
.prose :where(picture>img):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 0;
margin-bottom: 0
}
.prose :where(li):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: .5em;
margin-bottom: .5em
}
.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *)) {
padding-inline-start: .375em
}
.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *)) {
padding-inline-start: .375em
}
.prose :where(.prose>ul>li p):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: .75em;
margin-bottom: .75em
}
.prose :where(.prose>ul>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 1.25em
}
.prose :where(.prose>ul>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-bottom: 1.25em
}
.prose :where(.prose>ol>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 1.25em
}
.prose :where(.prose>ol>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-bottom: 1.25em
}
.prose :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: .75em;
margin-bottom: .75em
}
.prose :where(dl):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 1.25em;
margin-bottom: 1.25em
}
.prose :where(dd):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: .5em;
padding-inline-start: 1.625em
}
.prose :where(hr+*):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 0
}
.prose :where(h2+*):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 0
}
.prose :where(h3+*):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 0
}
.prose :where(h4+*):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 0
}
.prose :where(thead th:first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
padding-inline-start: 0
}
.prose :where(thead th:last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
padding-inline-end: 0
}
.prose :where(tbody td,tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)) {
padding-top: .5714286em;
padding-inline-end: .5714286em;
padding-bottom: .5714286em;
padding-inline-start: .5714286em
}
.prose :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
padding-inline-start: 0
}
.prose :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
padding-inline-end: 0
}
.prose :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 2em;
margin-bottom: 2em
}
.prose :where(.prose>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 0
}
.prose :where(.prose>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-bottom: 0
}
.prose-invert {
--tw-prose-body: var(--tw-prose-invert-body);
--tw-prose-headings: var(--tw-prose-invert-headings);
--tw-prose-lead: var(--tw-prose-invert-lead);
--tw-prose-links: var(--tw-prose-invert-links);
--tw-prose-bold: var(--tw-prose-invert-bold);
--tw-prose-counters: var(--tw-prose-invert-counters);
--tw-prose-bullets: var(--tw-prose-invert-bullets);
--tw-prose-hr: var(--tw-prose-invert-hr);
--tw-prose-quotes: var(--tw-prose-invert-quotes);
--tw-prose-quote-borders: var(--tw-prose-invert-quote-borders);
--tw-prose-captions: var(--tw-prose-invert-captions);
--tw-prose-kbd: var(--tw-prose-invert-kbd);
--tw-prose-kbd-shadows: var(--tw-prose-invert-kbd-shadows);
--tw-prose-code: var(--tw-prose-invert-code);
--tw-prose-pre-code: var(--tw-prose-invert-pre-code);
--tw-prose-pre-bg: var(--tw-prose-invert-pre-bg);
--tw-prose-th-borders: var(--tw-prose-invert-th-borders);
--tw-prose-td-borders: var(--tw-prose-invert-td-borders)
}
.stack {
display: inline-grid;
grid-template-columns:3px 4px 1fr 4px 3px;
grid-template-rows:3px 4px 1fr 4px 3px
}
.stack > * {
height: 100%;
width: 100%
}
.stack > *:nth-child(n+2) {
width: 100%;
opacity: 70%
}
.stack > *:nth-child(2) {
z-index: 2;
opacity: 90%
}
.stack > *:nth-child(1) {
z-index: 3;
width: 100%
}
.stack > *, .stack.stack-bottom > * {
grid-column: 3 / 4;
grid-row: 3 / 6
}
.stack > *:nth-child(2), .stack.stack-bottom > *:nth-child(2) {
grid-column: 2 / 5;
grid-row: 2 / 5
}
.stack > *:nth-child(1), .stack.stack-bottom > *:nth-child(1) {
grid-column: 1 / 6;
grid-row: 1 / 4
}
.stack.stack-top > * {
grid-column: 3 / 4;
grid-row: 1 / 4
}
.stack.stack-top > *:nth-child(2) {
grid-column: 2 / 5;
grid-row: 2 / 5
}
.stack.stack-top > *:nth-child(1) {
grid-column: 1 / 6;
grid-row: 3 / 6
}
.stack.stack-start > * {
grid-column: 1 / 4;
grid-row: 3 / 4
}
.stack.stack-start > *:nth-child(2) {
grid-column: 2 / 5;
grid-row: 2 / 5
}
.stack.stack-start > *:nth-child(1) {
grid-column: 3 / 6;
grid-row: 1 / 6
}
.stack.stack-end > * {
grid-column: 3 / 6;
grid-row: 3 / 4
}
.stack.stack-end > *:nth-child(2) {
grid-column: 2 / 5;
grid-row: 2 / 5
}
.stack.stack-end > *:nth-child(1) {
grid-column: 1 / 4;
grid-row: 1 / 6
}
.dropdown {
position: relative;
display: inline-block;
position-area: var(--anchor-v, bottom) var(--anchor-h, span-right)
}
.dropdown > *:not(summary):focus {
--tw-outline-style: none;
outline-style: none
}
@media (forced-colors: active) {
.dropdown > *:not(summary):focus {
outline: 2px solid transparent;
outline-offset: 2px
}
}
.dropdown .dropdown-content {
position: absolute
}
.dropdown:not(details,.dropdown-open,.dropdown-hover:hover,:focus-within) .dropdown-content {
display: none;
transform-origin: top;
opacity: 0%;
scale: 95%
}
.dropdown[popover], .dropdown .dropdown-content {
z-index: 999
}
@media (prefers-reduced-motion: no-preference) {
.dropdown[popover], .dropdown .dropdown-content {
animation: dropdown .2s;
transition-property: opacity, scale, display;
transition-behavior: allow-discrete;
transition-duration: .2s;
transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}
}
@starting-style{
.dropdown[popover], .dropdown .dropdown-content {
scale: 95%;
opacity: 0
}
} .dropdown.dropdown-open > [tabindex]:first-child, .dropdown:not(.dropdown-hover):focus > [tabindex]:first-child, .dropdown:focus-within > [tabindex]:first-child {
pointer-events: none
}
.dropdown.dropdown-open .dropdown-content, .dropdown:not(.dropdown-hover):focus .dropdown-content, .dropdown:focus-within .dropdown-content {
opacity: 100%
}
.dropdown.dropdown-hover:hover .dropdown-content {
opacity: 100%;
scale: 100%
}
.dropdown:is(details) summary::-webkit-details-marker {
display: none
}
.dropdown.dropdown-open .dropdown-content, .dropdown:focus .dropdown-content, .dropdown:focus-within .dropdown-content {
scale: 100%
}
.dropdown:where([popover]) {
background: #0000
}
.dropdown[popover] {
position: fixed;
color: inherit
}
@supports not (position-area: bottom) {
.dropdown[popover] {
margin: auto
}
.dropdown[popover].dropdown-open:not(:popover-open) {
display: none;
transform-origin: top;
opacity: 0%;
scale: 95%
}
.dropdown[popover]::backdrop {
background-color: color-mix(in oklab, #000 30%, #0000)
}
}
.dropdown[popover]:not(.dropdown-open,:popover-open) {
display: none;
transform-origin: top;
opacity: 0%;
scale: 95%
}
.dropdown-start :where(.dropdown-content) {
inset-inline-end: auto;
translate: 0 0
}
[dir=rtl] .dropdown-start :where(.dropdown-content) {
translate: 0 0
}
.dropdown-start.dropdown-left .dropdown-content, .dropdown-start.dropdown-right .dropdown-content {
top: 0rem;
bottom: auto
}
.dropdown-center :where(.dropdown-content) {
inset-inline-end: 50%;
translate: 50% 0
}
[dir=rtl] .dropdown-center :where(.dropdown-content) {
translate: -50% 0
}
.dropdown-center.dropdown-left .dropdown-content, .dropdown-center.dropdown-right .dropdown-content {
top: auto;
bottom: 50%;
translate: 0 50%
}
.dropdown-end {
--anchor-h: span-left
}
.dropdown-end :where(.dropdown-content) {
inset-inline-end: 0rem;
translate: 0 0
}
[dir=rtl] .dropdown-end :where(.dropdown-content) {
translate: 0 0
}
.dropdown-end.dropdown-left {
--anchor-h: left;
--anchor-v: span-top
}
.dropdown-end.dropdown-left .dropdown-content {
top: auto;
bottom: 0rem
}
.dropdown-end.dropdown-right {
--anchor-h: right;
--anchor-v: span-top
}
.dropdown-end.dropdown-right .dropdown-content {
top: auto;
bottom: 0rem
}
.dropdown-left .dropdown-content {
inset-inline-end: 100%;
top: 0rem;
bottom: auto;
transform-origin: right
}
.dropdown-right .dropdown-content {
inset-inline-start: 100%;
top: 0rem;
bottom: auto;
transform-origin: left
}
.dropdown-bottom .dropdown-content {
top: 100%;
bottom: auto;
transform-origin: top
}
.dropdown-top {
--anchor-v: top
}
.dropdown-top .dropdown-content {
top: auto;
bottom: 100%;
transform-origin: bottom
}
@keyframes dropdown {
0% {
opacity: 0
}
}
.hero {
display: grid;
width: 100%;
place-items: center;
background-size: cover;
background-position: center
}
.hero > * {
grid-column-start: 1;
grid-row-start: 1
}
.hero-content {
isolation: isolate;
display: flex;
max-width: 80rem;
align-items: center;
justify-content: center;
gap: 1rem;
padding: 1rem
}
@keyframes radio {
0% {
padding: 5px
}
50% {
padding: 3px
}
}
.validator:user-valid, .validator:user-valid:focus, .validator:user-valid:checked, .validator:user-valid[aria-checked=true], .validator:user-valid:focus-within, .validator:has(:user-valid), .validator:has(:user-valid):focus, .validator:has(:user-valid):checked, .validator:has(:user-valid)[aria-checked=true], .validator:has(:user-valid):focus-within {
--input-color: var(--color-success)
}
.validator:user-invalid, .validator:user-invalid:focus, .validator:user-invalid:checked, .validator:user-invalid[aria-checked=true], .validator:user-invalid:focus-within, .validator:has(:user-invalid), .validator:has(:user-invalid):focus, .validator:has(:user-invalid):checked, .validator:has(:user-invalid)[aria-checked=true], .validator:has(:user-invalid):focus-within, .validator[aria-invalid]:not([aria-invalid=false]), .validator[aria-invalid]:not([aria-invalid=false]):focus, .validator[aria-invalid]:not([aria-invalid=false]):checked, .validator[aria-invalid]:not([aria-invalid=false])[aria-checked=true], .validator[aria-invalid]:not([aria-invalid=false]):focus-within {
--input-color: var(--color-error)
}
.validator:user-invalid ~ .validator-hint, .validator:has(:user-invalid) ~ .validator-hint, .validator[aria-invalid]:not([aria-invalid=false]) ~ .validator-hint {
visibility: visible;
display: block;
color: var(--color-error)
}
@keyframes toast {
0% {
scale: .9;
opacity: 0
}
to {
scale: 1;
opacity: 1
}
}
.badge {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
border-radius: var(--radius-selector);
vertical-align: middle;
color: var(--badge-fg);
border: var(--border) solid var(--badge-color, var(--color-base-200));
font-size: .875rem;
width: -moz-fit-content;
width: fit-content;
padding-inline: calc(.25rem * 3 - var(--border));
background-size: auto, calc(var(--noise) * 100%);
background-image: none, var(--fx-noise);
background-color: var(--badge-bg);
--badge-bg: var(--badge-color, var(--color-base-100));
--badge-fg: var(--color-base-content);
--size: calc(var(--size-selector, .25rem) * 6);
height: var(--size)
}
.range {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
webkit-appearance: none;
--range-thumb: var(--color-base-100);
--range-thumb-size: calc(var(--size-selector, .25rem) * 6);
--range-progress: currentColor;
--range-fill: 1;
--range-p: .25rem;
--range-bg: color-mix(in oklab, currentColor 10%, #0000);
cursor: pointer;
overflow: hidden;
background-color: transparent;
vertical-align: middle;
width: clamp(3rem, 20rem, 100%);
--radius-selector-max: calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector));
border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));
border: none;
height: var(--range-thumb-size)
}
[dir=rtl] .range {
--range-dir: -1
}
.range:focus {
outline: none
}
.range:focus-visible {
outline: 2px solid;
outline-offset: 2px
}
.range::-webkit-slider-runnable-track {
width: 100%;
background-color: var(--range-bg);
border-radius: var(--radius-selector);
height: calc(var(--range-thumb-size) * .5)
}
@media (forced-colors: active) {
.range::-webkit-slider-runnable-track {
border: 1px solid
}
.range::-moz-range-track {
border: 1px solid
}
}
.range::-webkit-slider-thumb {
position: relative;
box-sizing: border-box;
border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));
background-color: currentColor;
height: var(--range-thumb-size);
width: var(--range-thumb-size);
border: var(--range-p) solid;
-webkit-appearance: none;
appearance: none;
webkit-appearance: none;
top: 50%;
color: var(--range-progress);
transform: translateY(-50%);
box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000), 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100rem) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100rem * var(--range-fill))
}
.range::-moz-range-track {
width: 100%;
background-color: var(--range-bg);
border-radius: var(--radius-selector);
height: calc(var(--range-thumb-size) * .5)
}
.range::-moz-range-thumb {
position: relative;
box-sizing: border-box;
border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));
background-color: currentColor;
height: var(--range-thumb-size);
width: var(--range-thumb-size);
border: var(--range-p) solid;
top: 50%;
color: var(--range-progress);
box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000), 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100rem) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100rem * var(--range-fill))
}
.range:disabled {
cursor: not-allowed;
opacity: 30%
}
.filter {
display: flex;
flex-wrap: wrap
}
.filter input[type=radio] {
width: auto
}
.filter input {
overflow: hidden;
opacity: 100%;
scale: 1;
transition: margin .1s, opacity .3s, padding .3s, border-width .1s
}
.filter input:not(:last-child) {
margin-inline-end: .25rem
}
.filter input.filter-reset {
aspect-ratio: 1 / 1
}
.filter input.filter-reset:after {
content: "×"
}
.filter:not(:has(input:checked:not(.filter-reset))) .filter-reset, .filter:not(:has(input:checked:not(.filter-reset))) input[type=reset] {
scale: 0;
border-width: 0;
margin-inline: 0rem;
width: 0rem;
padding-inline: 0rem;
opacity: 0%
}
.filter:has(input:checked:not(.filter-reset)) input:not(:checked,.filter-reset,input[type=reset]) {
scale: 0;
border-width: 0;
margin-inline: 0rem;
width: 0rem;
padding-inline: 0rem;
opacity: 0%
}
.label {
display: inline-flex;
align-items: center;
gap: .375rem;
white-space: nowrap;
color: color-mix(in oklab, currentColor 60%, transparent)
}
.label:has(input) {
cursor: pointer
}
.label:is(.input>*,.select>*) {
display: flex;
height: calc(100% - .5rem);
align-items: center;
padding-inline: .75rem;
white-space: nowrap;
font-size: inherit
}
.label:is(.input>*,.select>*):first-child {
margin-inline-start: -.75rem;
margin-inline-end: .75rem;
border-inline-end: var(--border) solid color-mix(in oklab, currentColor 10%, #0000)
}
.label:is(.input>*,.select>*):last-child {
margin-inline-start: .75rem;
margin-inline-end: -.75rem;
border-inline-start: var(--border) solid color-mix(in oklab, currentColor 10%, #0000)
}
.breadcrumbs {
max-width: 100%;
overflow-x: auto;
padding-block: .5rem
}
.breadcrumbs > menu, .breadcrumbs > ul, .breadcrumbs > ol {
display: flex;
min-height: -moz-min-content;
min-height: min-content;
align-items: center;
white-space: nowrap
}
.breadcrumbs > menu > li, .breadcrumbs > ul > li, .breadcrumbs > ol > li {
display: flex;
align-items: center
}
.breadcrumbs > menu > li > *, .breadcrumbs > ul > li > *, .breadcrumbs > ol > li > * {
display: flex;
cursor: pointer;
align-items: center;
gap: .5rem
}
@media (hover: hover) {
.breadcrumbs > menu > li > *:hover, .breadcrumbs > ul > li > *:hover, .breadcrumbs > ol > li > *:hover {
text-decoration-line: underline
}
}
.breadcrumbs > menu > li > *:focus, .breadcrumbs > ul > li > *:focus, .breadcrumbs > ol > li > *:focus {
--tw-outline-style: none;
outline-style: none
}
@media (forced-colors: active) {
.breadcrumbs > menu > li > *:focus, .breadcrumbs > ul > li > *:focus, .breadcrumbs > ol > li > *:focus {
outline: 2px solid transparent;
outline-offset: 2px
}
}
.breadcrumbs > menu > li > *:focus-visible, .breadcrumbs > ul > li > *:focus-visible, .breadcrumbs > ol > li > *:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px
}
.breadcrumbs > menu > li + *:before, .breadcrumbs > ul > li + *:before, .breadcrumbs > ol > li + *:before {
content: "";
margin-right: .75rem;
margin-left: .5rem;
display: block;
height: .375rem;
width: .375rem;
opacity: 40%;
rotate: 45deg;
border-top: 1px solid;
border-right: 1px solid;
background-color: #0000
}
[dir=rtl] .breadcrumbs > menu > li + *:before, [dir=rtl] .breadcrumbs > ul > li + *:before, [dir=rtl] .breadcrumbs > ol > li + *:before {
rotate: -135deg
}
.card {
position: relative;
display: flex;
flex-direction: column;
border-radius: var(--radius-box);
outline-width: 2px;
transition: outline .2s ease-in-out;
outline: 0 solid #0000;
outline-offset: 2px
}
.card:focus {
--tw-outline-style: none;
outline-style: none
}
@media (forced-colors: active) {
.card:focus {
outline: 2px solid transparent;
outline-offset: 2px
}
}
.card:focus-visible {
outline-color: currentColor
}
.card :where(figure:first-child) {
overflow: hidden;
border-start-start-radius: inherit;
border-start-end-radius: inherit;
border-end-start-radius: unset;
border-end-end-radius: unset
}
.card :where(figure:last-child) {
overflow: hidden;
border-start-start-radius: unset;
border-start-end-radius: unset;
border-end-start-radius: inherit;
border-end-end-radius: inherit
}
.card:where(.card-border) {
border: var(--border) solid var(--color-base-200)
}
.card:where(.card-dash) {
border: var(--border) dashed var(--color-base-200)
}
.card.image-full {
display: grid
}
.card.image-full > * {
grid-column-start: 1;
grid-row-start: 1
}
.card.image-full > .card-body {
position: relative;
color: var(--color-neutral-content)
}
.card.image-full :where(figure) {
overflow: hidden;
border-radius: inherit
}
.card.image-full > figure img {
height: 100%;
-o-object-fit: cover;
object-fit: cover;
filter: brightness(28%)
}
.card figure {
display: flex;
align-items: center;
justify-content: center
}
.card:has(>input:is(input[type=checkbox],input[type=radio])) {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none
}
.card:has(>:checked) {
outline: 2px solid currentColor
}
.divider {
display: flex;
height: 1rem;
flex-direction: row;
align-items: center;
align-self: stretch;
white-space: nowrap;
margin: var(--divider-m, 1rem 0);
--divider-color: color-mix(in oklab, var(--color-base-content) 10%, transparent)
}
.divider:before, .divider:after {
content: "";
height: .125rem;
width: 100%;
flex-grow: 1;
background-color: var(--divider-color)
}
@media print {
.divider:before, .divider:after {
border: .5px solid
}
}
.divider:not(:empty) {
gap: 1rem
}
.divider-horizontal.divider {
height: auto;
width: 1rem;
flex-direction: column
}
.divider-horizontal.divider:before {
height: 100%;
width: .125rem
}
.divider-horizontal.divider:after {
height: 100%;
width: .125rem
}
.divider-vertical.divider {
height: 1rem;
width: auto;
flex-direction: row
}
.divider-vertical.divider:before {
height: .125rem;
width: 100%
}
.divider-vertical.divider:after {
height: .125rem;
width: 100%
}
.menu {
display: flex;
width: -moz-fit-content;
width: fit-content;
flex-direction: column;
flex-wrap: wrap;
padding: .5rem;
--menu-active-fg: var(--color-neutral-content);
--menu-active-bg: var(--color-neutral);
font-size: .875rem
}
.menu :where(li ul) {
position: relative;
margin-inline-start: 1rem;
padding-inline-start: .5rem;
white-space: nowrap
}
.menu :where(li ul):before {
position: absolute;
inset-inline-start: 0rem;
top: .75rem;
bottom: .75rem;
background-color: var(--color-base-content);
opacity: 10%;
width: var(--border);
content: ""
}
.menu :where(li>.menu-dropdown:not(.menu-dropdown-show)) {
display: none
}
.menu :where(li:not(.menu-title)>*:not(ul,details,.menu-title,.btn)), .menu :where(li:not(.menu-title)>details>summary:not(.menu-title)) {
display: grid;
grid-auto-flow: column;
align-content: flex-start;
align-items: center;
gap: .5rem;
border-radius: var(--radius-field);
padding-inline: .75rem;
padding-block: .375rem;
text-align: start;
transition-property: color, background-color, box-shadow;
transition-duration: .2s;
transition-timing-function: cubic-bezier(0, 0, .2, 1);
grid-auto-columns: minmax(auto, max-content) auto max-content;
text-wrap: balance;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none
}
.menu :where(li>details>summary) {
--tw-outline-style: none;
outline-style: none
}
@media (forced-colors: active) {
.menu :where(li>details>summary) {
outline: 2px solid transparent;
outline-offset: 2px
}
}
.menu :where(li>details>summary)::-webkit-details-marker {
display: none
}
.menu :where(li>details>summary):after, .menu :where(li>.menu-dropdown-toggle):after {
justify-self: flex-end;
display: block;
height: .375rem;
width: .375rem;
rotate: -135deg;
translate: 0 -1px;
transition-property: rotate, translate;
transition-duration: .2s;
content: "";
transform-origin: 50% 50%;
box-shadow: 2px 2px inset;
pointer-events: none
}
.menu :where(li>details[open]>summary):after, .menu :where(li>.menu-dropdown-toggle.menu-dropdown-show):after {
rotate: 45deg;
translate: 0 1px
}
.menu :where(li:not(.menu-title,.disabled)>*:not(ul,details,.menu-title),li:not(.menu-title,.disabled)>details>summary:not(.menu-title)):not(.menu-active,:active,.btn).menu-focus, .menu :where(li:not(.menu-title,.disabled)>*:not(ul,details,.menu-title),li:not(.menu-title,.disabled)>details>summary:not(.menu-title)):not(.menu-active,:active,.btn):focus-visible {
cursor: pointer;
background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
color: var(--color-base-content);
--tw-outline-style: none;
outline-style: none
}
@media (forced-colors: active) {
.menu :where(li:not(.menu-title,.disabled)>*:not(ul,details,.menu-title),li:not(.menu-title,.disabled)>details>summary:not(.menu-title)):not(.menu-active,:active,.btn).menu-focus, .menu :where(li:not(.menu-title,.disabled)>*:not(ul,details,.menu-title),li:not(.menu-title,.disabled)>details>summary:not(.menu-title)):not(.menu-active,:active,.btn):focus-visible {
outline: 2px solid transparent;
outline-offset: 2px
}
}
.menu :where(li:not(.menu-title,.disabled)>*:not(ul,details,.menu-title):not(.menu-active,:active,.btn):hover,li:not(.menu-title,.disabled)>details>summary:not(.menu-title):not(.menu-active,:active,.btn):hover) {
cursor: pointer;
background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
--tw-outline-style: none;
outline-style: none
}
@media (forced-colors: active) {
.menu :where(li:not(.menu-title,.disabled)>*:not(ul,details,.menu-title):not(.menu-active,:active,.btn):hover,li:not(.menu-title,.disabled)>details>summary:not(.menu-title):not(.menu-active,:active,.btn):hover) {
outline: 2px solid transparent;
outline-offset: 2px
}
}
.menu :where(li:not(.menu-title,.disabled)>*:not(ul,details,.menu-title):not(.menu-active,:active,.btn):hover,li:not(.menu-title,.disabled)>details>summary:not(.menu-title):not(.menu-active,:active,.btn):hover) {
box-shadow: 0 1px #00000003 inset, 0 -1px #ffffff03 inset
}
.menu :where(li:empty) {
background-color: var(--color-base-content);
opacity: 10%;
margin: .5rem 1rem;
height: 1px
}
.menu :where(li) {
position: relative;
display: flex;
flex-shrink: 0;
flex-direction: column;
flex-wrap: wrap;
align-items: stretch
}
.menu :where(li) .badge {
justify-self: flex-end
}
.menu :where(li) > *:not(ul,.menu-title,details,.btn):active, .menu :where(li) > *:not(ul,.menu-title,details,.btn).menu-active, .menu :where(li) > details > summary:active {
--tw-outline-style: none;
outline-style: none
}
@media (forced-colors: active) {
.menu :where(li) > *:not(ul,.menu-title,details,.btn):active, .menu :where(li) > *:not(ul,.menu-title,details,.btn).menu-active, .menu :where(li) > details > summary:active {
outline: 2px solid transparent;
outline-offset: 2px
}
}
.menu :where(li) > *:not(ul,.menu-title,details,.btn):active, .menu :where(li) > *:not(ul,.menu-title,details,.btn).menu-active, .menu :where(li) > details > summary:active {
color: var(--menu-active-fg);
background-color: var(--menu-active-bg);
background-size: auto, calc(var(--noise) * 100%);
background-image: none, var(--fx-noise)
}
.menu :where(li) > *:not(ul,.menu-title,details,.btn):active:not(.menu :where(li)>*:not(ul,.menu-title,details,.btn):active:active), .menu :where(li) > *:not(ul,.menu-title,details,.btn).menu-active:not(.menu :where(li)>*:not(ul,.menu-title,details,.btn).menu-active:active), .menu :where(li) > details > summary:active:not(.menu :where(li)>details>summary:active:active) {
box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--menu-active-bg)
}
.menu :where(li).menu-disabled {
pointer-events: none;
color: color-mix(in oklab, var(--color-base-content) 20%, transparent)
}
.menu .dropdown:focus-within .menu-dropdown-toggle:after {
rotate: 45deg;
translate: 0 1px
}
.menu .dropdown-content {
margin-top: .5rem;
padding: .5rem
}
.menu .dropdown-content:before {
display: none
}
.input {
cursor: text;
border: var(--border) solid #0000;
position: relative;
display: inline-flex;
flex-shrink: 1;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
align-items: center;
gap: .5rem;
background-color: var(--color-base-100);
padding-inline: .75rem;
vertical-align: middle;
white-space: nowrap;
width: clamp(3rem, 20rem, 100%);
height: var(--size);
font-size: .875rem;
touch-action: manipulation;
border-start-start-radius: var(--join-ss, var(--radius-field));
border-start-end-radius: var(--join-se, var(--radius-field));
border-end-start-radius: var(--join-es, var(--radius-field));
border-end-end-radius: var(--join-ee, var(--radius-field));
border-color: var(--input-color);
box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset;
--size: calc(var(--size-field, .25rem) * 10);
--input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000)
}
.input:where(input) {
display: inline-flex
}
.input :where(input) {
display: inline-flex;
height: 100%;
width: 100%;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;
border: none
}
.input :where(input):focus, .input :where(input):focus-within {
--tw-outline-style: none;
outline-style: none
}
@media (forced-colors: active) {
.input :where(input):focus, .input :where(input):focus-within {
outline: 2px solid transparent;
outline-offset: 2px
}
}
.input :where(input[type=url]), .input :where(input[type=email]) {
direction: ltr
}
.input :where(input[type=date]) {
display: inline-flex
}
.input:focus, .input:focus-within {
--input-color: var(--color-base-content);
box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000);
outline: 2px solid var(--input-color);
outline-offset: 2px;
isolation: isolate;
z-index: 1
}
.input:has(>input[disabled]), .input:is(:disabled,[disabled]), fieldset:disabled .input {
cursor: not-allowed;
border-color: var(--color-base-200);
background-color: var(--color-base-200);
color: color-mix(in oklab, var(--color-base-content) 40%, transparent)
}
.input:has(>input[disabled])::-moz-placeholder, .input:is(:disabled,[disabled])::-moz-placeholder, fieldset:disabled .input::-moz-placeholder {
color: color-mix(in oklab, var(--color-base-content) 20%, transparent)
}
.input:has(>input[disabled])::placeholder, .input:is(:disabled,[disabled])::placeholder, fieldset:disabled .input::placeholder {
color: color-mix(in oklab, var(--color-base-content) 20%, transparent)
}
.input:has(>input[disabled]), .input:is(:disabled,[disabled]), fieldset:disabled .input {
box-shadow: none
}
.input:has(>input[disabled]) > input[disabled] {
cursor: not-allowed
}
.input::-webkit-date-and-time-value {
text-align: inherit
}
.input[type=number]::-webkit-inner-spin-button {
margin-block: -.75rem;
margin-inline-end: -.75rem
}
.input::-webkit-calendar-picker-indicator {
position: absolute;
inset-inline-end: .75em
}
.input:has(>input[type=date]) :where(input[type=date]) {
display: inline-flex;
webkit-appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none
}
.input:has(>input[type=date]) input[type=date]::-webkit-calendar-picker-indicator {
position: absolute;
inset-inline-end: .75em;
width: 1em;
height: 1em;
cursor: pointer
}
.alert {
display: grid;
align-items: center;
gap: 1rem;
border-radius: var(--radius-box);
padding-inline: 1rem;
padding-block: .75rem;
color: var(--color-base-content);
background-color: var(--alert-color, var(--color-base-200));
justify-content: start;
justify-items: start;
grid-auto-flow: column;
grid-template-columns:auto;
text-align: start;
border: var(--border) solid var(--color-base-200);
font-size: .875rem;
line-height: 1.25rem;
background-size: auto, calc(var(--noise) * 100%);
background-image: none, var(--fx-noise);
box-shadow: 0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * .08)) inset, 0 1px color-mix(in oklab, color-mix(in oklab, #000 20%, var(--alert-color, var(--color-base-200))) calc(var(--depth) * 20%), #0000), 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * .08))
}
.alert:has(:nth-child(2)) {
grid-template-columns:auto minmax(auto, 1fr)
}
.alert.alert-outline {
background-color: transparent;
color: var(--alert-color);
box-shadow: none;
background-image: none
}
.alert.alert-dash {
background-color: transparent;
color: var(--alert-color);
border-style: dashed;
box-shadow: none;
background-image: none
}
.alert.alert-soft {
color: var(--alert-color, var(--color-base-content));
background: color-mix(in oklab, var(--alert-color, var(--color-base-content)) 8%, var(--color-base-100));
border-color: color-mix(in oklab, var(--alert-color, var(--color-base-content)) 10%, var(--color-base-100));
box-shadow: none;
background-image: none
}
@keyframes rating {
0%, 40% {
scale: 1.1;
filter: brightness(1.05) contrast(1.05)
}
}
.select {
border: var(--border) solid #0000;
position: relative;
display: inline-flex;
flex-shrink: 1;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
align-items: center;
gap: .375rem;
background-color: var(--color-base-100);
padding-inline-start: .75rem;
padding-inline-end: 1.75rem;
vertical-align: middle;
width: clamp(3rem, 20rem, 100%);
height: var(--size);
font-size: .875rem;
touch-action: manipulation;
border-start-start-radius: var(--join-ss, var(--radius-field));
border-start-end-radius: var(--join-se, var(--radius-field));
border-end-start-radius: var(--join-es, var(--radius-field));
border-end-end-radius: var(--join-ee, var(--radius-field));
background-image: linear-gradient(45deg, #0000 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, #0000 50%);
background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16.1px) calc(1px + 50%);
background-size: 4px 4px, 4px 4px;
background-repeat: no-repeat;
text-overflow: ellipsis;
box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset;
border-color: var(--input-color);
--input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);
--size: calc(var(--size-field, .25rem) * 10)
}
[dir=rtl] .select {
background-position: calc(0% + 12px) calc(1px + 50%), calc(0% + 16px) calc(1px + 50%)
}
.select select {
margin-inline-start: -.75rem;
margin-inline-end: -1.75rem;
width: calc(100% + 2.75rem);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-inline-start: .75rem;
padding-inline-end: 1.75rem;
height: calc(100% - calc(var(--border) * 2));
align-items: center;
background: inherit;
border-radius: inherit;
border-style: none
}
.select select:focus, .select select:focus-within {
--tw-outline-style: none;
outline-style: none
}
@media (forced-colors: active) {
.select select:focus, .select select:focus-within {
outline: 2px solid transparent;
outline-offset: 2px
}
}
.select select:not(:last-child) {
margin-inline-end: -1.375rem;
background-image: none
}
.select:focus, .select:focus-within {
--input-color: var(--color-base-content);
box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000);
outline: 2px solid var(--input-color);
outline-offset: 2px;
isolation: isolate;
z-index: 1
}
.select:has(>select[disabled]), .select:is(:disabled,[disabled]), fieldset:disabled .select {
cursor: not-allowed;
border-color: var(--color-base-200);
background-color: var(--color-base-200);
color: color-mix(in oklab, var(--color-base-content) 40%, transparent)
}
.select:has(>select[disabled])::-moz-placeholder, .select:is(:disabled,[disabled])::-moz-placeholder, fieldset:disabled .select::-moz-placeholder {
color: color-mix(in oklab, var(--color-base-content) 20%, transparent)
}
.select:has(>select[disabled])::placeholder, .select:is(:disabled,[disabled])::placeholder, fieldset:disabled .select::placeholder {
color: color-mix(in oklab, var(--color-base-content) 20%, transparent)
}
.select:has(>select[disabled]) > select[disabled] {
cursor: not-allowed
}
@supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)) {
.select, .select select {
-webkit-appearance: base-select;
-moz-appearance: base-select;
appearance: base-select
}
.select::picker(select), .select select::picker(select) {
-webkit-appearance: base-select;
-moz-appearance: base-select;
appearance: base-select
}
}
.select::picker(select), .select select::picker(select) {
color: inherit;
max-height: min(24rem, 70dvh);
border: var(--border) solid var(--color-base-200);
margin-block: .5rem;
border-radius: var(--radius-box);
padding: .5rem;
background-color: inherit;
box-shadow: 0 2px calc(var(--depth) * 3px) -2px #0003;
box-shadow: 0 20px 25px -5px rgb(0 0 0 / calc(var(--depth) * .1)), 0 8px 10px -6px rgb(0 0 0 / calc(var(--depth) * .1))
}
.select::picker-icon, .select select::picker-icon {
display: none
}
.select optgroup, .select select optgroup {
padding-top: .5em
}
.select optgroup option:nth-child(1), .select select optgroup option:nth-child(1) {
margin-top: .5em
}
.select option, .select select option {
border-radius: var(--radius-field);
padding-inline: .75rem;
padding-block: .375rem;
transition-property: color, background-color;
transition-duration: .2s;
transition-timing-function: cubic-bezier(0, 0, .2, 1)
}
.select option:not(:disabled):hover, .select option:not(:disabled):focus-visible, .select select option:not(:disabled):hover, .select select option:not(:disabled):focus-visible {
cursor: pointer;
background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
--tw-outline-style: none;
outline-style: none
}
@media (forced-colors: active) {
.select option:not(:disabled):hover, .select option:not(:disabled):focus-visible, .select select option:not(:disabled):hover, .select select option:not(:disabled):focus-visible {
outline: 2px solid transparent;
outline-offset: 2px
}
}
.select option:not(:disabled):active, .select select option:not(:disabled):active {
background-color: var(--color-neutral);
color: var(--color-neutral-content);
box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--color-neutral)
}
@keyframes skeleton {
0% {
background-position: 150%
}
to {
background-position: -50%
}
}
.navbar {
display: flex;
width: 100%;
align-items: center;
padding: .5rem;
min-height: 4rem
}
.footer {
display: grid;
width: 100%;
grid-auto-flow: row;
place-items: start;
-moz-column-gap: 1rem;
column-gap: 1rem;
row-gap: 2.5rem;
font-size: .875rem;
line-height: 1.25rem
}
.footer > * {
display: grid;
place-items: start;
gap: .5rem
}
.footer.footer-center {
grid-auto-flow: column dense;
place-items: center;
text-align: center
}
.footer.footer-center > * {
place-items: center
}
.mockup-browser .mockup-browser-toolbar .input {
margin-inline: auto;
display: flex;
height: 100%;
align-items: center;
gap: .5rem;
overflow: hidden;
background-color: var(--color-base-200);
text-overflow: ellipsis;
white-space: nowrap;
font-size: .75rem;
direction: ltr
}
.mockup-browser .mockup-browser-toolbar .input:before {
content: "";
width: 1rem;
height: 1rem;
opacity: 50%;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z' clip-rule='evenodd' /%3E%3C/svg%3E") no-repeat center;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z' clip-rule='evenodd' /%3E%3C/svg%3E") no-repeat center;
-webkit-mask-size: contain;
mask-size: contain
}
@keyframes progress {
50% {
background-position-x: -115%
}
}
.status {
display: inline-block;
aspect-ratio: 1 / 1;
width: .5rem;
height: .5rem;
border-radius: var(--radius-selector);
background-color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
background-position: center;
background-repeat: no-repeat;
vertical-align: middle;
color: color-mix(in srgb, #000 30%, transparent)
}
@supports (color: color-mix(in lab,red,red)) {
.status {
color: color-mix(in oklab, var(--color-black) 30%, transparent)
}
}
.status {
background-image: radial-gradient(circle at 35% 30%, oklch(1 0 0 / calc(var(--depth) * .5)), #0000);
box-shadow: 0 2px 3px -1px color-mix(in oklab, currentColor calc(var(--depth) * 100%), #0000)
}
.link {
cursor: pointer;
text-decoration-line: underline
}
.link:focus {
--tw-outline-style: none;
outline-style: none
}
@media (forced-colors: active) {
.link:focus {
outline: 2px solid transparent;
outline-offset: 2px
}
}
.link:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px
}
.link-hover {
text-decoration-line: none
}
@media (hover: hover) {
.link-hover:hover {
text-decoration-line: underline
}
}
:where(.btn) {
width: unset
}
.btn {
display: inline-flex;
flex-shrink: 0;
cursor: pointer;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
gap: .375rem;
text-align: center;
vertical-align: middle;
outline-offset: 2px;
webkit-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
padding-inline: var(--btn-p);
color: var(--btn-fg);
--tw-prose-links: var(--btn-fg);
height: var(--size);
font-size: var(--fontsize, .875rem);
font-weight: 600;
outline-color: var(--btn-color, var(--color-base-content));
transition-property: color, background-color, border-color, box-shadow;
transition-timing-function: cubic-bezier(0, 0, .2, 1);
transition-duration: .2s;
border-start-start-radius: var(--join-ss, var(--radius-field));
border-start-end-radius: var(--join-se, var(--radius-field));
border-end-start-radius: var(--join-es, var(--radius-field));
border-end-end-radius: var(--join-ee, var(--radius-field));
background-color: var(--btn-bg);
background-size: auto, calc(var(--noise) * 100%);
background-image: none, var(--btn-noise);
border-width: var(--border);
border-style: solid;
border-color: var(--btn-border);
text-shadow: 0 .5px oklch(100% 0 0 / calc(var(--depth) * .15));
touch-action: manipulation;
box-shadow: 0 .5px 0 .5px oklch(100% 0 0 / calc(var(--depth) * 6%)) inset, var(--btn-shadow);
--size: calc(var(--size-field, .25rem) * 10);
--btn-bg: var(--btn-color, var(--color-base-200));
--btn-fg: var(--color-base-content);
--btn-p: 1rem;
--btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%));
--btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000), 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000);
--btn-noise: var(--fx-noise)
}
.prose .btn {
text-decoration-line: none
}
@media (hover: hover) {
.btn:hover {
--btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%)
}
}
.btn:focus-visible, .btn:has(:focus-visible) {
outline-width: 2px;
outline-style: solid;
isolation: isolate
}
.btn:active:not(.btn-active) {
translate: 0 .5px;
--btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 5%);
--btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
--btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0)
}
.btn:is(:disabled,[disabled],.btn-disabled):not(.btn-link,.btn-ghost) {
background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
box-shadow: none
}
.btn:is(:disabled,[disabled],.btn-disabled) {
pointer-events: none;
--btn-border: #0000;
--btn-noise: none;
--btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000)
}
@media (hover: hover) {
.btn:is(:disabled,[disabled],.btn-disabled):hover {
pointer-events: none;
background-color: color-mix(in oklab, var(--color-neutral) 20%, transparent);
--btn-border: #0000;
--btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000)
}
}
.btn:is(input[type=checkbox],input[type=radio]) {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none
}
.btn:is(input[type=checkbox],input[type=radio]):after {
content: attr(aria-label)
}
.btn:where(input:checked:not(.filter .btn)) {
--btn-color: var(--color-primary);
--btn-fg: var(--color-primary-content);
isolation: isolate
}
.btn-primary {
--btn-color: var(--color-primary);
--btn-fg: var(--color-primary-content)
}
.btn-ghost:not(.btn-active,:hover,:active:focus,:focus-visible) {
--btn-shadow: "";
--btn-bg: #0000;
--btn-border: #0000;
--btn-noise: none
}
.btn-ghost:not(.btn-active,:hover,:active:focus,:focus-visible):not(:disabled,[disabled],.btn-disabled) {
outline-color: currentColor;
--btn-fg: currentColor
}
@media (hover: none) {
.btn-ghost:hover:not(.btn-active,:active,:focus-visible,:disabled,[disabled],.btn-disabled) {
--btn-shadow: "";
--btn-bg: #0000;
--btn-border: #0000;
--btn-noise: none;
--btn-fg: currentColor
}
}
.btn-outline:not(.btn-active,:hover,:active:focus,:focus-visible,:disabled,[disabled],.btn-disabled,:checked) {
--btn-shadow: "";
--btn-bg: #0000;
--btn-fg: var(--btn-color);
--btn-border: var(--btn-color);
--btn-noise: none
}
@media (hover: none) {
.btn-outline:hover:not(.btn-active,:active,:focus-visible,:disabled,[disabled],.btn-disabled,:checked) {
--btn-shadow: "";
--btn-bg: #0000;
--btn-fg: var(--btn-color);
--btn-border: var(--btn-color);
--btn-noise: none
}
}
.btn-sm {
--fontsize: .75rem;
--btn-p: .75rem;
--size: calc(var(--size-field, .25rem) * 8)
}
.btn-lg {
--fontsize: 1.125rem;
--btn-p: 1.25rem;
--size: calc(var(--size-field, .25rem) * 12)
}
.btn-block {
width: 100%
}
.table {
font-size: .875rem;
position: relative;
width: 100%;
border-radius: var(--radius-box);
text-align: left
}
.table:where(:dir(rtl),[dir=rtl],[dir=rtl] *) {
text-align: right
}
@media (hover: hover) {
.table tr.row-hover:hover, .table tr.row-hover:nth-child(2n):hover {
background-color: var(--color-base-200)
}
}
.table :where(th,td) {
padding-inline: 1rem;
padding-block: .75rem;
vertical-align: middle
}
.table :where(thead,tfoot) {
white-space: nowrap;
color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
font-size: .875rem;
font-weight: 600
}
.table :where(tfoot) {
border-top: var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000)
}
.table :where(.table-pin-rows thead tr) {
position: sticky;
top: 0rem;
z-index: 1;
background-color: var(--color-base-100)
}
.table :where(.table-pin-rows tfoot tr) {
position: sticky;
bottom: 0rem;
z-index: 1;
background-color: var(--color-base-100)
}
.table :where(.table-pin-cols tr th) {
position: sticky;
right: 0rem;
left: 0rem;
background-color: var(--color-base-100)
}
.table :where(thead tr,tbody tr:not(:last-child)) {
border-bottom: var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000)
}
.loading {
pointer-events: none;
display: inline-block;
aspect-ratio: 1 / 1;
background-color: currentColor;
vertical-align: middle;
width: calc(var(--size-selector, .25rem) * 6);
-webkit-mask-size: 100%;
mask-size: 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E")
}
.visible {
visibility: visible
}
.static {
position: static
}
.absolute {
position: absolute
}
.relative {
position: relative
}
.sticky {
position: sticky
}
.inset-0 {
inset: 0
}
.top-0 {
top: 0
}
.z-40 {
z-index: 40
}
.z-50 {
z-index: 50
}
.m-0 {
margin: 0
}
.mx-2 {
margin-left: .5rem;
margin-right: .5rem
}
.mx-auto {
margin-left: auto;
margin-right: auto
}
.my-2 {
margin-top: .5rem;
margin-bottom: .5rem
}
.my-4 {
margin-top: 1rem;
margin-bottom: 1rem
}
.mb-3 {
margin-bottom: .75rem
}
.mb-4 {
margin-bottom: 1rem
}
.mb-6 {
margin-bottom: 1.5rem
}
.mb-8 {
margin-bottom: 2rem
}
.ml-2 {
margin-left: .5rem
}
.block {
display: block
}
.inline {
display: inline
}
.flex {
display: flex
}
.inline-flex {
display: inline-flex
}
.table {
display: table
}
.grid {
display: grid
}
.hidden {
display: none
}
.h-10 {
height: 2.5rem
}
.h-12 {
height: 3rem
}
.h-4 {
height: 1rem
}
.h-5 {
height: 1.25rem
}
.h-8 {
height: 2rem
}
.h-full {
height: 100%
}
.max-h-8 {
max-height: 2rem
}
.min-h-screen {
min-height: 100vh
}
.w-4 {
width: 1rem
}
.w-44 {
width: 11rem
}
.w-5 {
width: 1.25rem
}
.w-6 {
width: 1.5rem
}
.w-auto {
width: auto
}
.w-full {
width: 100%
}
.min-w-0 {
min-width: 0px
}
.max-w-5xl {
max-width: 64rem
}
.max-w-\[150px\] {
max-width: 150px
}
.max-w-md {
max-width: 28rem
}
.max-w-none {
max-width: none
}
.flex-1 {
flex: 1 1 0%
}
.flex-none {
flex: none
}
.flex-shrink-0 {
flex-shrink: 0
}
.transform {
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
}
.select-none {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none
}
.resize {
resize: both
}
.flex-col {
flex-direction: column
}
.flex-wrap {
flex-wrap: wrap
}
.items-center {
align-items: center
}
.justify-center {
justify-content: center
}
.justify-between {
justify-content: space-between
}
.gap-2 {
gap: .5rem
}
.gap-4 {
gap: 1rem
}
.gap-8 {
gap: 2rem
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(.5rem * var(--tw-space-y-reverse))
}
.overflow-hidden {
overflow: hidden
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.rounded {
border-radius: .25rem
}
.rounded-lg {
border-radius: .5rem
}
.rounded-none {
border-radius: 0
}
.rounded-xl {
border-radius: .75rem
}
.rounded-t-lg {
border-top-left-radius: .5rem;
border-top-right-radius: .5rem
}
.border {
border-width: 1px
}
.border-b {
border-bottom-width: 1px
}
.border-none {
border-style: none
}
.border-base-300 {
border-color: var(--color-base-300)
}
.bg-base-100 {
background-color: var(--color-base-100)
}
.bg-base-200 {
background-color: var(--color-base-200)
}
.bg-base-300 {
background-color: var(--color-base-300)
}
.bg-primary {
background-color: var(--color-primary)
}
.bg-opacity-50 {
--tw-bg-opacity: .5
}
.fill-current {
fill: currentColor
}
.object-contain {
-o-object-fit: contain;
object-fit: contain
}
.object-cover {
-o-object-fit: cover;
object-fit: cover
}
.p-0 {
padding: 0
}
.p-2 {
padding: .5rem
}
.p-4 {
padding: 1rem
}
.p-5 {
padding: 1.25rem
}
.px-3 {
padding-left: .75rem;
padding-right: .75rem
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.py-10 {
padding-top: 2.5rem;
padding-bottom: 2.5rem
}
.py-2 {
padding-top: .5rem;
padding-bottom: .5rem
}
.py-3 {
padding-top: .75rem;
padding-bottom: .75rem
}
.pb-12 {
padding-bottom: 3rem
}
.pb-16 {
padding-bottom: 4rem
}
.pb-3 {
padding-bottom: .75rem
}
.pb-8 {
padding-bottom: 2rem
}
.pt-12 {
padding-top: 3rem
}
.pt-16 {
padding-top: 4rem
}
.pt-8 {
padding-top: 2rem
}
.text-left {
text-align: left
}
.text-center {
text-align: center
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem
}
.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem
}
.text-6xl {
font-size: 3.75rem;
line-height: 1
}
.text-base {
font-size: 1rem;
line-height: 1.5rem
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem
}
.text-sm {
font-size: .875rem;
line-height: 1.25rem
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem
}
.text-xs {
font-size: .75rem;
line-height: 1rem
}
.font-bold {
font-weight: 700
}
.font-medium {
font-weight: 500
}
.font-semibold {
font-weight: 600
}
.uppercase {
text-transform: uppercase
}
.capitalize {
text-transform: capitalize
}
.tracking-wider {
letter-spacing: .05em
}
.text-base-content {
color: var(--color-base-content)
}
.text-error {
color: var(--color-error)
}
.underline {
text-decoration-line: underline
}
.opacity-70 {
opacity: .7
}
.opacity-80 {
opacity: .8
}
.shadow {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-lg {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.outline {
outline-style: solid
}
.outline-2 {
outline-width: 2px
}
.outline-primary {
outline-color: var(--color-primary)
}
.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)
}
.blur {
--tw-blur: blur(8px);
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)
}
.filter {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.backdrop-filter {
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
.transition {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s
}
.transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s
}
.transition-colors {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s
}
.transition-opacity {
transition-property: opacity;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s
}
.duration-200 {
transition-duration: .2s
}
.ease-in-out {
transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}
.rounded-box {
border-radius: var(--radius-box)
}
.join {
display: inline-flex;
align-items: stretch;
--join-ss: 0;
--join-se: 0;
--join-es: 0;
--join-ee: 0
}
.join :where(.join-item) {
border-start-start-radius: var(--join-ss, 0);
border-start-end-radius: var(--join-se, 0);
border-end-start-radius: var(--join-es, 0);
border-end-end-radius: var(--join-ee, 0)
}
.join :where(.join-item) * {
--join-ss: var(--radius-field);
--join-se: var(--radius-field);
--join-es: var(--radius-field);
--join-ee: var(--radius-field)
}
.join > .join-item:where(:first-child) {
--join-ss: var(--radius-field);
--join-se: 0;
--join-es: var(--radius-field);
--join-ee: 0
}
.join :first-child:not(:last-child) :where(.join-item) {
--join-ss: var(--radius-field);
--join-se: 0;
--join-es: var(--radius-field);
--join-ee: 0
}
.join > .join-item:where(:last-child) {
--join-ss: 0;
--join-se: var(--radius-field);
--join-es: 0;
--join-ee: var(--radius-field)
}
.join :last-child:not(:first-child) :where(.join-item) {
--join-ss: 0;
--join-se: var(--radius-field);
--join-es: 0;
--join-ee: var(--radius-field)
}
.join > .join-item:where(:only-child) {
--join-ss: var(--radius-field);
--join-se: var(--radius-field);
--join-es: var(--radius-field);
--join-ee: var(--radius-field)
}
.join :only-child :where(.join-item) {
--join-ss: var(--radius-field);
--join-se: var(--radius-field);
--join-es: var(--radius-field);
--join-ee: var(--radius-field)
}
:root .prose {
--tw-prose-body: color-mix(in oklab, var(--color-base-content) 80%, #0000);
--tw-prose-headings: var(--color-base-content);
--tw-prose-lead: var(--color-base-content);
--tw-prose-links: var(--color-base-content);
--tw-prose-bold: var(--color-base-content);
--tw-prose-counters: var(--color-base-content);
--tw-prose-bullets: color-mix(in oklab, var(--color-base-content) 50%, #0000);
--tw-prose-hr: color-mix(in oklab, var(--color-base-content) 20%, #0000);
--tw-prose-quotes: var(--color-base-content);
--tw-prose-quote-borders: color-mix(in oklab, var(--color-base-content) 20%, #0000);
--tw-prose-captions: color-mix(in oklab, var(--color-base-content) 50%, #0000);
--tw-prose-code: var(--color-base-content);
--tw-prose-pre-code: var(--color-neutral-content);
--tw-prose-pre-bg: var(--color-neutral);
--tw-prose-th-borders: color-mix(in oklab, var(--color-base-content) 50%, #0000);
--tw-prose-td-borders: color-mix(in oklab, var(--color-base-content) 20%, #0000);
--tw-prose-kbd: color-mix(in oklab, var(--color-base-content) 80%, #0000)
}
:root .prose :where(code):not(pre>code) {
background-color: var(--color-base-200);
border-radius: var(--radius-selector);
border: var(--border) solid var(--color-base-300);
padding-inline: .5em;
font-weight: inherit
}
:root .prose :where(code):not(pre>code):before, :root .prose :where(code):not(pre>code):after {
display: none
}
.hover\:scale-105:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
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))
}
.hover\:bg-base-200:hover {
background-color: var(--color-base-200)
}
.hover\:text-primary:hover {
color: var(--color-primary)
}
@media (min-width: 390px) {
.min-\[390px\]\:block {
display: block
}
}
@media (min-width: 768px) {
.md\:grid {
display: grid
}
.md\:max-h-10 {
max-height: 2.5rem
}
.md\:grid-cols-3 {
grid-template-columns:repeat(3, minmax(0, 1fr))
}
.md\:flex-row {
flex-direction: row
}
.md\:justify-end {
justify-content: flex-end
}
.md\:gap-2 {
gap: .5rem
}
.md\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.md\:text-left {
text-align: left
}
.md\:text-5xl {
font-size: 3rem;
line-height: 1
}
.md\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem
}
}
*, :before, :after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / .5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style:
}
::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / .5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style:
}
*, :before, :after {
box-sizing: border-box;
border-width: 0;
border-style: solid;
border-color: #e5e7eb
}
:before, :after {
--tw-content: ""
}
html, :host {
line-height: 1.5;
-webkit-text-size-adjust: 100%;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
font-feature-settings: normal;
font-variation-settings: normal;
-webkit-tap-highlight-color: transparent
}
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: JetBrains Mono, Consolas, monospace;
font-feature-settings: normal;
font-variation-settings: normal;
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-feature-settings: inherit;
font-variation-settings: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
letter-spacing: inherit;
color: inherit;
margin: 0;
padding: 0
}
button, select {
text-transform: none
}
button, input:where([type=button]), input:where([type=reset]), input:where([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
}
dialog {
padding: 0
}
textarea {
resize: vertical
}
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]:where(:not([hidden=until-found])) {
display: none
}
:where(:root), :root:has(input.theme-controller[value=light]:checked), [data-theme=light] {
color-scheme: light;
--color-base-100: oklch(100% 0 0);
--color-base-200: oklch(98% 0 0);
--color-base-300: oklch(95% 0 0);
--color-base-content: oklch(21% .006 285.885);
--color-primary: oklch(45% .24 277.023);
--color-primary-content: oklch(93% .034 272.788);
--color-secondary: oklch(65% .241 354.308);
--color-secondary-content: oklch(94% .028 342.258);
--color-accent: oklch(77% .152 181.912);
--color-accent-content: oklch(38% .063 188.416);
--color-neutral: oklch(14% .005 285.823);
--color-neutral-content: oklch(92% .004 286.32);
--color-info: oklch(74% .16 232.661);
--color-info-content: oklch(29% .066 243.157);
--color-success: oklch(76% .177 163.223);
--color-success-content: oklch(37% .077 168.94);
--color-warning: oklch(82% .189 84.429);
--color-warning-content: oklch(41% .112 45.904);
--color-error: oklch(71% .194 13.428);
--color-error-content: oklch(27% .105 12.094);
--radius-selector: .5rem;
--radius-field: .25rem;
--radius-box: .5rem;
--size-selector: .25rem;
--size-field: .25rem;
--border: 1px;
--depth: 1;
--noise: 0
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
color-scheme: dark;
--color-base-100: oklch(25.33% .016 252.42);
--color-base-200: oklch(23.26% .014 253.1);
--color-base-300: oklch(21.15% .012 254.09);
--color-base-content: oklch(97.807% .029 256.847);
--color-primary: oklch(58% .233 277.117);
--color-primary-content: oklch(96% .018 272.314);
--color-secondary: oklch(65% .241 354.308);
--color-secondary-content: oklch(94% .028 342.258);
--color-accent: oklch(77% .152 181.912);
--color-accent-content: oklch(38% .063 188.416);
--color-neutral: oklch(14% .005 285.823);
--color-neutral-content: oklch(92% .004 286.32);
--color-info: oklch(74% .16 232.661);
--color-info-content: oklch(29% .066 243.157);
--color-success: oklch(76% .177 163.223);
--color-success-content: oklch(37% .077 168.94);
--color-warning: oklch(82% .189 84.429);
--color-warning-content: oklch(41% .112 45.904);
--color-error: oklch(71% .194 13.428);
--color-error-content: oklch(27% .105 12.094);
--radius-selector: .5rem;
--radius-field: .25rem;
--radius-box: .5rem;
--size-selector: .25rem;
--size-field: .25rem;
--border: 1px;
--depth: 1;
--noise: 0
}
}
:root:has(input.theme-controller[value=light]:checked), [data-theme=light] {
color-scheme: light;
--color-base-100: oklch(100% 0 0);
--color-base-200: oklch(98% 0 0);
--color-base-300: oklch(95% 0 0);
--color-base-content: oklch(21% .006 285.885);
--color-primary: oklch(45% .24 277.023);
--color-primary-content: oklch(93% .034 272.788);
--color-secondary: oklch(65% .241 354.308);
--color-secondary-content: oklch(94% .028 342.258);
--color-accent: oklch(77% .152 181.912);
--color-accent-content: oklch(38% .063 188.416);
--color-neutral: oklch(14% .005 285.823);
--color-neutral-content: oklch(92% .004 286.32);
--color-info: oklch(74% .16 232.661);
--color-info-content: oklch(29% .066 243.157);
--color-success: oklch(76% .177 163.223);
--color-success-content: oklch(37% .077 168.94);
--color-warning: oklch(82% .189 84.429);
--color-warning-content: oklch(41% .112 45.904);
--color-error: oklch(71% .194 13.428);
--color-error-content: oklch(27% .105 12.094);
--radius-selector: .5rem;
--radius-field: .25rem;
--radius-box: .5rem;
--size-selector: .25rem;
--size-field: .25rem;
--border: 1px;
--depth: 1;
--noise: 0
}
:root:has(input.theme-controller[value=dark]:checked), [data-theme=dark] {
color-scheme: dark;
--color-base-100: oklch(25.33% .016 252.42);
--color-base-200: oklch(23.26% .014 253.1);
--color-base-300: oklch(21.15% .012 254.09);
--color-base-content: oklch(97.807% .029 256.847);
--color-primary: oklch(58% .233 277.117);
--color-primary-content: oklch(96% .018 272.314);
--color-secondary: oklch(65% .241 354.308);
--color-secondary-content: oklch(94% .028 342.258);
--color-accent: oklch(77% .152 181.912);
--color-accent-content: oklch(38% .063 188.416);
--color-neutral: oklch(14% .005 285.823);
--color-neutral-content: oklch(92% .004 286.32);
--color-info: oklch(74% .16 232.661);
--color-info-content: oklch(29% .066 243.157);
--color-success: oklch(76% .177 163.223);
--color-success-content: oklch(37% .077 168.94);
--color-warning: oklch(82% .189 84.429);
--color-warning-content: oklch(41% .112 45.904);
--color-error: oklch(71% .194 13.428);
--color-error-content: oklch(27% .105 12.094);
--radius-selector: .5rem;
--radius-field: .25rem;
--radius-box: .5rem;
--size-selector: .25rem;
--size-field: .25rem;
--border: 1px;
--depth: 1;
--noise: 0
}
@property --radialprogress {
syntax: "";
inherits: true;
initial-value: 0%;
}
:root {
--fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E")
}
:root, [data-theme] {
background-color: var(--root-bg, var(--color-base-100));
color: var(--color-base-content)
}
:root {
scrollbar-color: color-mix(in oklch, currentColor 35%, #0000) #0000
}
:root, [data-theme=dark] {
--color-primary: #FFD700;
--color-primary-content: #000000;
--color-secondary: #FF0000;
--color-secondary-content: #FFFFFF;
--color-accent: #00FF00;
--color-accent-content: #000000;
--color-neutral: #3A3A3A;
--color-neutral-content: #E5E5E5;
--color-base-100: #0A0A0A;
--color-base-200: #1A1A1A;
--color-base-300: #252525;
--color-base-content: #FFFFFF;
--color-cta-primary: #FF0000;
--color-cta-primary-content: #FFFFFF;
--color-cta-secondary: #FFD700;
--color-cta-secondary-content: #000000;
--color-border-default: #2A2A2A;
--color-border-decorative: #FFD700;
--color-info: #3ABFF8;
--color-info-content: #002B47;
--color-success: #4ADE80;
--color-success-content: #003320;
--color-warning: #FFB300;
--color-warning-content: #3D2000;
--color-error: #FF5757;
--color-error-content: #FFFFFF;
--border-none: 0;
--border-thin: 1px;
--border-medium: 2px;
--border-thick: 3px;
--shadow-none: none;
--shadow-small: 0 2px 4px rgba(0, 0, 0, .5);
--shadow-medium: 0 4px 8px rgba(0, 0, 0, .6);
--shadow-large: 0 8px 16px rgba(0, 0, 0, .7);
--shadow-xl: 0 12px 24px rgba(0, 0, 0, .8);
--shadow-card: 0 4px 12px rgba(0, 0, 0, .6);
--shadow-button: 0 4px 8px rgba(255, 0, 0, .3);
--shadow-header: 0 2px 8px rgba(0, 0, 0, .7);
--shadow-dropdown: 0 8px 20px rgba(0, 0, 0, .8);
--radius-sharp: 0;
--radius-rounded: 8px;
--radius-pill: 50px;
--font-display: "Bebas Neue", system-ui, sans-serif;
--font-body: "Inter", system-ui, sans-serif;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-black: 900;
--font-weight-heading: 700;
--font-weight-button: 700;
--font-weight-label: 500;
--card-background: #1A1A1A;
--card-background-hover: #252525;
--card-border-color: #2A2A2A;
--card-border-thickness: 1px;
--card-shadow: 0 4px 12px rgba(0, 0, 0, .6);
--card-radius: 8px;
--button-primary-bg: #FF0000;
--button-primary-text: #FFFFFF;
--button-primary-border: transparent;
--button-primary-border-width: 0;
--button-primary-shadow: 0 4px 12px rgba(255, 0, 0, .4);
--button-primary-hover-bg: #CC0000;
--button-primary-hover-text: #FFFFFF;
--button-primary-hover-border: transparent;
--button-secondary-bg: transparent;
--button-secondary-text: #FFFFFF;
--button-secondary-border: #FFFFFF;
--button-secondary-border-width: 2px;
--button-secondary-shadow: none;
--button-secondary-hover-bg: #FFFFFF;
--button-secondary-hover-text: #000000;
--button-secondary-hover-border: #FFFFFF;
--button-radius: 4px;
--button-font-weight: 700;
--button-transition: all .2s ease;
--link-color: #FFFFFF;
--link-hover-color: #FFD700;
--link-opacity: .7;
--link-hover-opacity: 1;
--icon-color: #FFD700;
--icon-size: 1.25rem;
--transition-fast: .2s;
--transition-medium: .3s;
--transition-slow: .5s;
--focus-outline-width: 2px;
--focus-outline-color: #FFD700;
--focus-outline-offset: 2px;
--overlay-gradient: linear-gradient(to top, rgba(26, 26, 26, .8), rgba(26, 26, 26, .4), transparent)
}
@media (prefers-color-scheme: dark) {
:root {
--color-primary: #FFD700;
--color-primary-content: #000000;
--color-secondary: #FF0000;
--color-secondary-content: #FFFFFF;
--color-accent: #00FF00;
--color-accent-content: #000000;
--color-neutral: #3A3A3A;
--color-neutral-content: #E5E5E5;
--color-base-100: #0A0A0A;
--color-base-200: #1A1A1A;
--color-base-300: #252525;
--color-base-content: #FFFFFF;
--color-cta-primary: #FF0000;
--color-cta-primary-content: #FFFFFF;
--color-cta-secondary: #FFD700;
--color-cta-secondary-content: #000000;
--color-border-default: #2A2A2A;
--color-border-decorative: #FFD700;
--color-info: #3ABFF8;
--color-info-content: #002B47;
--color-success: #4ADE80;
--color-success-content: #003320;
--color-warning: #FFB300;
--color-warning-content: #3D2000;
--color-error: #FF5757;
--color-error-content: #FFFFFF;
--border-none: 0;
--border-thin: 1px;
--border-medium: 2px;
--border-thick: 3px;
--shadow-none: none;
--shadow-small: 0 2px 4px rgba(0, 0, 0, .5);
--shadow-medium: 0 4px 8px rgba(0, 0, 0, .6);
--shadow-large: 0 8px 16px rgba(0, 0, 0, .7);
--shadow-xl: 0 12px 24px rgba(0, 0, 0, .8);
--shadow-card: 0 4px 12px rgba(0, 0, 0, .6);
--shadow-button: 0 4px 8px rgba(255, 0, 0, .3);
--shadow-header: 0 2px 8px rgba(0, 0, 0, .7);
--shadow-dropdown: 0 8px 20px rgba(0, 0, 0, .8);
--radius-sharp: 0;
--radius-rounded: 8px;
--radius-pill: 50px;
--font-display: "Bebas Neue", system-ui, sans-serif;
--font-body: "Inter", system-ui, sans-serif;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-black: 900;
--font-weight-heading: 700;
--font-weight-button: 700;
--font-weight-label: 500;
--card-background: #1A1A1A;
--card-background-hover: #252525;
--card-border-color: #2A2A2A;
--card-border-thickness: 1px;
--card-shadow: 0 4px 12px rgba(0, 0, 0, .6);
--card-radius: 8px;
--button-primary-bg: #FF0000;
--button-primary-text: #FFFFFF;
--button-primary-border: transparent;
--button-primary-border-width: 0;
--button-primary-shadow: 0 4px 12px rgba(255, 0, 0, .4);
--button-primary-hover-bg: #CC0000;
--button-primary-hover-text: #FFFFFF;
--button-primary-hover-border: transparent;
--button-secondary-bg: transparent;
--button-secondary-text: #FFFFFF;
--button-secondary-border: #FFFFFF;
--button-secondary-border-width: 2px;
--button-secondary-shadow: none;
--button-secondary-hover-bg: #FFFFFF;
--button-secondary-hover-text: #000000;
--button-secondary-hover-border: #FFFFFF;
--button-radius: 4px;
--button-font-weight: 700;
--button-transition: all .2s ease;
--link-color: #FFFFFF;
--link-hover-color: #FFD700;
--link-opacity: .7;
--link-hover-opacity: 1;
--icon-color: #FFD700;
--icon-size: 1.25rem;
--transition-fast: .2s;
--transition-medium: .3s;
--transition-slow: .5s;
--focus-outline-width: 2px;
--focus-outline-color: #FFD700;
--focus-outline-offset: 2px;
--overlay-gradient: linear-gradient(to top, rgba(26, 26, 26, .8), rgba(26, 26, 26, .4), transparent)
}
}
html {
scroll-behavior: smooth
}
body {
background-color: var(--color-base-100);
color: var(--color-base-content);
font-family: var(--font-body, system-ui, -apple-system, sans-serif)
}
*:focus-visible {
outline-style: solid;
outline-width: 2px;
outline-offset: 2px;
outline-color: var(--color-primary)
}
h1, h2, h3, h4, h5, h6 {
font-weight: 600;
font-family: var(--font-display, system-ui, -apple-system, sans-serif);
font-weight: var(--font-weight-heading, 700)
}
button, .btn {
font-weight: var(--font-weight-button, 600)
}
label {
font-weight: var(--font-weight-label, 500)
}
.container {
width: 100%
}
@media (min-width: 640px) {
.container {
max-width: 640px
}
}
@media (min-width: 768px) {
.container {
max-width: 768px
}
}
@media (min-width: 1024px) {
.container {
max-width: 1024px
}
}
@media (min-width: 1280px) {
.container {
max-width: 1280px
}
}
@media (min-width: 1536px) {
.container {
max-width: 1536px
}
}
.prose {
color: var(--tw-prose-body);
max-width: 65ch
}
.prose :where(p):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 1.25em;
margin-bottom: 1.25em
}
.prose :where([class~=lead]):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-lead);
font-size: 1.25em;
line-height: 1.6;
margin-top: 1.2em;
margin-bottom: 1.2em
}
.prose :where(a):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-links);
text-decoration: underline;
font-weight: 500
}
.prose :where(strong):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-bold);
font-weight: 600
}
.prose :where(a strong):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit
}
.prose :where(blockquote strong):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit
}
.prose :where(thead th strong):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit
}
.prose :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: decimal;
margin-top: 1.25em;
margin-bottom: 1.25em;
padding-inline-start: 1.625em
}
.prose :where(ol[type=A]):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: upper-alpha
}
.prose :where(ol[type=a]):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: lower-alpha
}
.prose :where(ol[type=A s]):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: upper-alpha
}
.prose :where(ol[type=a s]):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: lower-alpha
}
.prose :where(ol[type=I]):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: upper-roman
}
.prose :where(ol[type=i]):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: lower-roman
}
.prose :where(ol[type=I s]):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: upper-roman
}
.prose :where(ol[type=i s]):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: lower-roman
}
.prose :where(ol[type="1"]):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: decimal
}
.prose :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: disc;
margin-top: 1.25em;
margin-bottom: 1.25em;
padding-inline-start: 1.625em
}
.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker {
font-weight: 400;
color: var(--tw-prose-counters)
}
.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker {
color: var(--tw-prose-bullets)
}
.prose :where(dt):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-headings);
font-weight: 600;
margin-top: 1.25em
}
.prose :where(hr):not(:where([class~=not-prose],[class~=not-prose] *)) {
border-color: var(--tw-prose-hr);
border-top-width: 1px;
margin-top: 3em;
margin-bottom: 3em
}
.prose :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)) {
font-weight: 500;
font-style: italic;
color: var(--tw-prose-quotes);
border-inline-start-width: .25rem;
border-inline-start-color: var(--tw-prose-quote-borders);
quotes: "“" "”" "‘" "’";
margin-top: 1.6em;
margin-bottom: 1.6em;
padding-inline-start: 1em
}
.prose :where(blockquote p:first-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):before {
content: open-quote
}
.prose :where(blockquote p:last-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):after {
content: close-quote
}
.prose :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-headings);
font-weight: 800;
font-size: 2.25em;
margin-top: 0;
margin-bottom: .8888889em;
line-height: 1.1111111
}
.prose :where(h1 strong):not(:where([class~=not-prose],[class~=not-prose] *)) {
font-weight: 900;
color: inherit
}
.prose :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-headings);
font-weight: 700;
font-size: 1.5em;
margin-top: 2em;
margin-bottom: 1em;
line-height: 1.3333333
}
.prose :where(h2 strong):not(:where([class~=not-prose],[class~=not-prose] *)) {
font-weight: 800;
color: inherit
}
.prose :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-headings);
font-weight: 600;
font-size: 1.25em;
margin-top: 1.6em;
margin-bottom: .6em;
line-height: 1.6
}
.prose :where(h3 strong):not(:where([class~=not-prose],[class~=not-prose] *)) {
font-weight: 700;
color: inherit
}
.prose :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-headings);
font-weight: 600;
margin-top: 1.5em;
margin-bottom: .5em;
line-height: 1.5
}
.prose :where(h4 strong):not(:where([class~=not-prose],[class~=not-prose] *)) {
font-weight: 700;
color: inherit
}
.prose :where(img):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 2em;
margin-bottom: 2em
}
.prose :where(picture):not(:where([class~=not-prose],[class~=not-prose] *)) {
display: block;
margin-top: 2em;
margin-bottom: 2em
}
.prose :where(video):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 2em;
margin-bottom: 2em
}
.prose :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)) {
font-weight: 500;
font-family: inherit;
color: var(--tw-prose-kbd);
box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px rgb(var(--tw-prose-kbd-shadows) / 10%);
font-size: .875em;
border-radius: .3125rem;
padding-top: .1875em;
padding-inline-end: .375em;
padding-bottom: .1875em;
padding-inline-start: .375em
}
.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-code);
font-weight: 600;
font-size: .875em
}
.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):before {
content: "`"
}
.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):after {
content: "`"
}
.prose :where(a code):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit
}
.prose :where(h1 code):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit
}
.prose :where(h2 code):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit;
font-size: .875em
}
.prose :where(h3 code):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit;
font-size: .9em
}
.prose :where(h4 code):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit
}
.prose :where(blockquote code):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit
}
.prose :where(thead th code):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit
}
.prose :where(pre):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-pre-code);
background-color: var(--tw-prose-pre-bg);
overflow-x: auto;
font-weight: 400;
font-size: .875em;
line-height: 1.7142857;
margin-top: 1.7142857em;
margin-bottom: 1.7142857em;
border-radius: .375rem;
padding-top: .8571429em;
padding-inline-end: 1.1428571em;
padding-bottom: .8571429em;
padding-inline-start: 1.1428571em
}
.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)) {
background-color: transparent;
border-width: 0;
border-radius: 0;
padding: 0;
font-weight: inherit;
color: inherit;
font-size: inherit;
font-family: inherit;
line-height: inherit
}
.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):before {
content: none
}
.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):after {
content: none
}
.prose :where(table):not(:where([class~=not-prose],[class~=not-prose] *)) {
width: 100%;
table-layout: auto;
margin-top: 2em;
margin-bottom: 2em;
font-size: .875em;
line-height: 1.7142857
}
.prose :where(thead):not(:where([class~=not-prose],[class~=not-prose] *)) {
border-bottom-width: 1px;
border-bottom-color: var(--tw-prose-th-borders)
}
.prose :where(thead th):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-headings);
font-weight: 600;
vertical-align: bottom;
padding-inline-end: .5714286em;
padding-bottom: .5714286em;
padding-inline-start: .5714286em
}
.prose :where(tbody tr):not(:where([class~=not-prose],[class~=not-prose] *)) {
border-bottom-width: 1px;
border-bottom-color: var(--tw-prose-td-borders)
}
.prose :where(tbody tr:last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
border-bottom-width: 0
}
.prose :where(tbody td):not(:where([class~=not-prose],[class~=not-prose] *)) {
vertical-align: baseline
}
.prose :where(tfoot):not(:where([class~=not-prose],[class~=not-prose] *)) {
border-top-width: 1px;
border-top-color: var(--tw-prose-th-borders)
}
.prose :where(tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)) {
vertical-align: top
}
.prose :where(th,td):not(:where([class~=not-prose],[class~=not-prose] *)) {
text-align: start
}
.prose :where(figure>*):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 0;
margin-bottom: 0
}
.prose :where(figcaption):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-captions);
font-size: .875em;
line-height: 1.4285714;
margin-top: .8571429em
}
.prose {
--tw-prose-body: #374151;
--tw-prose-headings: #111827;
--tw-prose-lead: #4b5563;
--tw-prose-links: #111827;
--tw-prose-bold: #111827;
--tw-prose-counters: #6b7280;
--tw-prose-bullets: #d1d5db;
--tw-prose-hr: #e5e7eb;
--tw-prose-quotes: #111827;
--tw-prose-quote-borders: #e5e7eb;
--tw-prose-captions: #6b7280;
--tw-prose-kbd: #111827;
--tw-prose-kbd-shadows: 17 24 39;
--tw-prose-code: #111827;
--tw-prose-pre-code: #e5e7eb;
--tw-prose-pre-bg: #1f2937;
--tw-prose-th-borders: #d1d5db;
--tw-prose-td-borders: #e5e7eb;
--tw-prose-invert-body: #d1d5db;
--tw-prose-invert-headings: #fff;
--tw-prose-invert-lead: #9ca3af;
--tw-prose-invert-links: #fff;
--tw-prose-invert-bold: #fff;
--tw-prose-invert-counters: #9ca3af;
--tw-prose-invert-bullets: #4b5563;
--tw-prose-invert-hr: #374151;
--tw-prose-invert-quotes: #f3f4f6;
--tw-prose-invert-quote-borders: #374151;
--tw-prose-invert-captions: #9ca3af;
--tw-prose-invert-kbd: #fff;
--tw-prose-invert-kbd-shadows: 255 255 255;
--tw-prose-invert-code: #fff;
--tw-prose-invert-pre-code: #d1d5db;
--tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
--tw-prose-invert-th-borders: #4b5563;
--tw-prose-invert-td-borders: #374151;
font-size: 1rem;
line-height: 1.75
}
.prose :where(picture>img):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 0;
margin-bottom: 0
}
.prose :where(li):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: .5em;
margin-bottom: .5em
}
.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *)) {
padding-inline-start: .375em
}
.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *)) {
padding-inline-start: .375em
}
.prose :where(.prose>ul>li p):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: .75em;
margin-bottom: .75em
}
.prose :where(.prose>ul>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 1.25em
}
.prose :where(.prose>ul>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-bottom: 1.25em
}
.prose :where(.prose>ol>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 1.25em
}
.prose :where(.prose>ol>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-bottom: 1.25em
}
.prose :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: .75em;
margin-bottom: .75em
}
.prose :where(dl):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 1.25em;
margin-bottom: 1.25em
}
.prose :where(dd):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: .5em;
padding-inline-start: 1.625em
}
.prose :where(hr+*):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 0
}
.prose :where(h2+*):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 0
}
.prose :where(h3+*):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 0
}
.prose :where(h4+*):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 0
}
.prose :where(thead th:first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
padding-inline-start: 0
}
.prose :where(thead th:last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
padding-inline-end: 0
}
.prose :where(tbody td,tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)) {
padding-top: .5714286em;
padding-inline-end: .5714286em;
padding-bottom: .5714286em;
padding-inline-start: .5714286em
}
.prose :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
padding-inline-start: 0
}
.prose :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
padding-inline-end: 0
}
.prose :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 2em;
margin-bottom: 2em
}
.prose :where(.prose>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 0
}
.prose :where(.prose>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-bottom: 0
}
.prose-invert {
--tw-prose-body: var(--tw-prose-invert-body);
--tw-prose-headings: var(--tw-prose-invert-headings);
--tw-prose-lead: var(--tw-prose-invert-lead);
--tw-prose-links: var(--tw-prose-invert-links);
--tw-prose-bold: var(--tw-prose-invert-bold);
--tw-prose-counters: var(--tw-prose-invert-counters);
--tw-prose-bullets: var(--tw-prose-invert-bullets);
--tw-prose-hr: var(--tw-prose-invert-hr);
--tw-prose-quotes: var(--tw-prose-invert-quotes);
--tw-prose-quote-borders: var(--tw-prose-invert-quote-borders);
--tw-prose-captions: var(--tw-prose-invert-captions);
--tw-prose-kbd: var(--tw-prose-invert-kbd);
--tw-prose-kbd-shadows: var(--tw-prose-invert-kbd-shadows);
--tw-prose-code: var(--tw-prose-invert-code);
--tw-prose-pre-code: var(--tw-prose-invert-pre-code);
--tw-prose-pre-bg: var(--tw-prose-invert-pre-bg);
--tw-prose-th-borders: var(--tw-prose-invert-th-borders);
--tw-prose-td-borders: var(--tw-prose-invert-td-borders)
}
.stack {
display: inline-grid;
grid-template-columns:3px 4px 1fr 4px 3px;
grid-template-rows:3px 4px 1fr 4px 3px
}
.stack > * {
height: 100%;
width: 100%
}
.stack > *:nth-child(n+2) {
width: 100%;
opacity: 70%
}
.stack > *:nth-child(2) {
z-index: 2;
opacity: 90%
}
.stack > *:nth-child(1) {
z-index: 3;
width: 100%
}
.stack > *, .stack.stack-bottom > * {
grid-column: 3 / 4;
grid-row: 3 / 6
}
.stack > *:nth-child(2), .stack.stack-bottom > *:nth-child(2) {
grid-column: 2 / 5;
grid-row: 2 / 5
}
.stack > *:nth-child(1), .stack.stack-bottom > *:nth-child(1) {
grid-column: 1 / 6;
grid-row: 1 / 4
}
.stack.stack-top > * {
grid-column: 3 / 4;
grid-row: 1 / 4
}
.stack.stack-top > *:nth-child(2) {
grid-column: 2 / 5;
grid-row: 2 / 5
}
.stack.stack-top > *:nth-child(1) {
grid-column: 1 / 6;
grid-row: 3 / 6
}
.stack.stack-start > * {
grid-column: 1 / 4;
grid-row: 3 / 4
}
.stack.stack-start > *:nth-child(2) {
grid-column: 2 / 5;
grid-row: 2 / 5
}
.stack.stack-start > *:nth-child(1) {
grid-column: 3 / 6;
grid-row: 1 / 6
}
.stack.stack-end > * {
grid-column: 3 / 6;
grid-row: 3 / 4
}
.stack.stack-end > *:nth-child(2) {
grid-column: 2 / 5;
grid-row: 2 / 5
}
.stack.stack-end > *:nth-child(1) {
grid-column: 1 / 4;
grid-row: 1 / 6
}
.dropdown {
position: relative;
display: inline-block;
position-area: var(--anchor-v, bottom) var(--anchor-h, span-right)
}
.dropdown > *:not(summary):focus {
--tw-outline-style: none;
outline-style: none
}
@media (forced-colors: active) {
.dropdown > *:not(summary):focus {
outline: 2px solid transparent;
outline-offset: 2px
}
}
.dropdown .dropdown-content {
position: absolute
}
.dropdown:not(details,.dropdown-open,.dropdown-hover:hover,:focus-within) .dropdown-content {
display: none;
transform-origin: top;
opacity: 0%;
scale: 95%
}
.dropdown[popover], .dropdown .dropdown-content {
z-index: 999
}
@media (prefers-reduced-motion: no-preference) {
.dropdown[popover], .dropdown .dropdown-content {
animation: dropdown .2s;
transition-property: opacity, scale, display;
transition-behavior: allow-discrete;
transition-duration: .2s;
transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}
}
@starting-style{
.dropdown[popover], .dropdown .dropdown-content {
scale: 95%;
opacity: 0
}
} .dropdown.dropdown-open > [tabindex]:first-child, .dropdown:not(.dropdown-hover):focus > [tabindex]:first-child, .dropdown:focus-within > [tabindex]:first-child {
pointer-events: none
}
.dropdown.dropdown-open .dropdown-content, .dropdown:not(.dropdown-hover):focus .dropdown-content, .dropdown:focus-within .dropdown-content {
opacity: 100%
}
.dropdown.dropdown-hover:hover .dropdown-content {
opacity: 100%;
scale: 100%
}
.dropdown:is(details) summary::-webkit-details-marker {
display: none
}
.dropdown.dropdown-open .dropdown-content, .dropdown:focus .dropdown-content, .dropdown:focus-within .dropdown-content {
scale: 100%
}
.dropdown:where([popover]) {
background: #0000
}
.dropdown[popover] {
position: fixed;
color: inherit
}
@supports not (position-area: bottom) {
.dropdown[popover] {
margin: auto
}
.dropdown[popover].dropdown-open:not(:popover-open) {
display: none;
transform-origin: top;
opacity: 0%;
scale: 95%
}
.dropdown[popover]::backdrop {
background-color: color-mix(in oklab, #000 30%, #0000)
}
}
.dropdown[popover]:not(.dropdown-open,:popover-open) {
display: none;
transform-origin: top;
opacity: 0%;
scale: 95%
}
.dropdown-start :where(.dropdown-content) {
inset-inline-end: auto;
translate: 0 0
}
[dir=rtl] .dropdown-start :where(.dropdown-content) {
translate: 0 0
}
.dropdown-start.dropdown-left .dropdown-content, .dropdown-start.dropdown-right .dropdown-content {
top: 0rem;
bottom: auto
}
.dropdown-center :where(.dropdown-content) {
inset-inline-end: 50%;
translate: 50% 0
}
[dir=rtl] .dropdown-center :where(.dropdown-content) {
translate: -50% 0
}
.dropdown-center.dropdown-left .dropdown-content, .dropdown-center.dropdown-right .dropdown-content {
top: auto;
bottom: 50%;
translate: 0 50%
}
.dropdown-end {
--anchor-h: span-left
}
.dropdown-end :where(.dropdown-content) {
inset-inline-end: 0rem;
translate: 0 0
}
[dir=rtl] .dropdown-end :where(.dropdown-content) {
translate: 0 0
}
.dropdown-end.dropdown-left {
--anchor-h: left;
--anchor-v: span-top
}
.dropdown-end.dropdown-left .dropdown-content {
top: auto;
bottom: 0rem
}
.dropdown-end.dropdown-right {
--anchor-h: right;
--anchor-v: span-top
}
.dropdown-end.dropdown-right .dropdown-content {
top: auto;
bottom: 0rem
}
.dropdown-left .dropdown-content {
inset-inline-end: 100%;
top: 0rem;
bottom: auto;
transform-origin: right
}
.dropdown-right .dropdown-content {
inset-inline-start: 100%;
top: 0rem;
bottom: auto;
transform-origin: left
}
.dropdown-bottom .dropdown-content {
top: 100%;
bottom: auto;
transform-origin: top
}
.dropdown-top {
--anchor-v: top
}
.dropdown-top .dropdown-content {
top: auto;
bottom: 100%;
transform-origin: bottom
}
@keyframes dropdown {
0% {
opacity: 0
}
}
.hero {
display: grid;
width: 100%;
place-items: center;
background-size: cover;
background-position: center
}
.hero > * {
grid-column-start: 1;
grid-row-start: 1
}
.hero-content {
isolation: isolate;
display: flex;
max-width: 80rem;
align-items: center;
justify-content: center;
gap: 1rem;
padding: 1rem
}
@keyframes radio {
0% {
padding: 5px
}
50% {
padding: 3px
}
}
.validator:user-valid, .validator:user-valid:focus, .validator:user-valid:checked, .validator:user-valid[aria-checked=true], .validator:user-valid:focus-within, .validator:has(:user-valid), .validator:has(:user-valid):focus, .validator:has(:user-valid):checked, .validator:has(:user-valid)[aria-checked=true], .validator:has(:user-valid):focus-within {
--input-color: var(--color-success)
}
.validator:user-invalid, .validator:user-invalid:focus, .validator:user-invalid:checked, .validator:user-invalid[aria-checked=true], .validator:user-invalid:focus-within, .validator:has(:user-invalid), .validator:has(:user-invalid):focus, .validator:has(:user-invalid):checked, .validator:has(:user-invalid)[aria-checked=true], .validator:has(:user-invalid):focus-within, .validator[aria-invalid]:not([aria-invalid=false]), .validator[aria-invalid]:not([aria-invalid=false]):focus, .validator[aria-invalid]:not([aria-invalid=false]):checked, .validator[aria-invalid]:not([aria-invalid=false])[aria-checked=true], .validator[aria-invalid]:not([aria-invalid=false]):focus-within {
--input-color: var(--color-error)
}
.validator:user-invalid ~ .validator-hint, .validator:has(:user-invalid) ~ .validator-hint, .validator[aria-invalid]:not([aria-invalid=false]) ~ .validator-hint {
visibility: visible;
display: block;
color: var(--color-error)
}
@keyframes toast {
0% {
scale: .9;
opacity: 0
}
to {
scale: 1;
opacity: 1
}
}
.badge {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
border-radius: var(--radius-selector);
vertical-align: middle;
color: var(--badge-fg);
border: var(--border) solid var(--badge-color, var(--color-base-200));
font-size: .875rem;
width: -moz-fit-content;
width: fit-content;
padding-inline: calc(.25rem * 3 - var(--border));
background-size: auto, calc(var(--noise) * 100%);
background-image: none, var(--fx-noise);
background-color: var(--badge-bg);
--badge-bg: var(--badge-color, var(--color-base-100));
--badge-fg: var(--color-base-content);
--size: calc(var(--size-selector, .25rem) * 6);
height: var(--size)
}
.range {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
webkit-appearance: none;
--range-thumb: var(--color-base-100);
--range-thumb-size: calc(var(--size-selector, .25rem) * 6);
--range-progress: currentColor;
--range-fill: 1;
--range-p: .25rem;
--range-bg: color-mix(in oklab, currentColor 10%, #0000);
cursor: pointer;
overflow: hidden;
background-color: transparent;
vertical-align: middle;
width: clamp(3rem, 20rem, 100%);
--radius-selector-max: calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector));
border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));
border: none;
height: var(--range-thumb-size)
}
[dir=rtl] .range {
--range-dir: -1
}
.range:focus {
outline: none
}
.range:focus-visible {
outline: 2px solid;
outline-offset: 2px
}
.range::-webkit-slider-runnable-track {
width: 100%;
background-color: var(--range-bg);
border-radius: var(--radius-selector);
height: calc(var(--range-thumb-size) * .5)
}
@media (forced-colors: active) {
.range::-webkit-slider-runnable-track {
border: 1px solid
}
.range::-moz-range-track {
border: 1px solid
}
}
.range::-webkit-slider-thumb {
position: relative;
box-sizing: border-box;
border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));
background-color: currentColor;
height: var(--range-thumb-size);
width: var(--range-thumb-size);
border: var(--range-p) solid;
-webkit-appearance: none;
appearance: none;
webkit-appearance: none;
top: 50%;
color: var(--range-progress);
transform: translateY(-50%);
box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000), 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100rem) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100rem * var(--range-fill))
}
.range::-moz-range-track {
width: 100%;
background-color: var(--range-bg);
border-radius: var(--radius-selector);
height: calc(var(--range-thumb-size) * .5)
}
.range::-moz-range-thumb {
position: relative;
box-sizing: border-box;
border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));
background-color: currentColor;
height: var(--range-thumb-size);
width: var(--range-thumb-size);
border: var(--range-p) solid;
top: 50%;
color: var(--range-progress);
box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000), 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100rem) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100rem * var(--range-fill))
}
.range:disabled {
cursor: not-allowed;
opacity: 30%
}
.filter {
display: flex;
flex-wrap: wrap
}
.filter input[type=radio] {
width: auto
}
.filter input {
overflow: hidden;
opacity: 100%;
scale: 1;
transition: margin .1s, opacity .3s, padding .3s, border-width .1s
}
.filter input:not(:last-child) {
margin-inline-end: .25rem
}
.filter input.filter-reset {
aspect-ratio: 1 / 1
}
.filter input.filter-reset:after {
content: "×"
}
.filter:not(:has(input:checked:not(.filter-reset))) .filter-reset, .filter:not(:has(input:checked:not(.filter-reset))) input[type=reset] {
scale: 0;
border-width: 0;
margin-inline: 0rem;
width: 0rem;
padding-inline: 0rem;
opacity: 0%
}
.filter:has(input:checked:not(.filter-reset)) input:not(:checked,.filter-reset,input[type=reset]) {
scale: 0;
border-width: 0;
margin-inline: 0rem;
width: 0rem;
padding-inline: 0rem;
opacity: 0%
}
.label {
display: inline-flex;
align-items: center;
gap: .375rem;
white-space: nowrap;
color: color-mix(in oklab, currentColor 60%, transparent)
}
.label:has(input) {
cursor: pointer
}
.label:is(.input>*,.select>*) {
display: flex;
height: calc(100% - .5rem);
align-items: center;
padding-inline: .75rem;
white-space: nowrap;
font-size: inherit
}
.label:is(.input>*,.select>*):first-child {
margin-inline-start: -.75rem;
margin-inline-end: .75rem;
border-inline-end: var(--border) solid color-mix(in oklab, currentColor 10%, #0000)
}
.label:is(.input>*,.select>*):last-child {
margin-inline-start: .75rem;
margin-inline-end: -.75rem;
border-inline-start: var(--border) solid color-mix(in oklab, currentColor 10%, #0000)
}
.breadcrumbs {
max-width: 100%;
overflow-x: auto;
padding-block: .5rem
}
.breadcrumbs > menu, .breadcrumbs > ul, .breadcrumbs > ol {
display: flex;
min-height: -moz-min-content;
min-height: min-content;
align-items: center;
white-space: nowrap
}
.breadcrumbs > menu > li, .breadcrumbs > ul > li, .breadcrumbs > ol > li {
display: flex;
align-items: center
}
.breadcrumbs > menu > li > *, .breadcrumbs > ul > li > *, .breadcrumbs > ol > li > * {
display: flex;
cursor: pointer;
align-items: center;
gap: .5rem
}
@media (hover: hover) {
.breadcrumbs > menu > li > *:hover, .breadcrumbs > ul > li > *:hover, .breadcrumbs > ol > li > *:hover {
text-decoration-line: underline
}
}
.breadcrumbs > menu > li > *:focus, .breadcrumbs > ul > li > *:focus, .breadcrumbs > ol > li > *:focus {
--tw-outline-style: none;
outline-style: none
}
@media (forced-colors: active) {
.breadcrumbs > menu > li > *:focus, .breadcrumbs > ul > li > *:focus, .breadcrumbs > ol > li > *:focus {
outline: 2px solid transparent;
outline-offset: 2px
}
}
.breadcrumbs > menu > li > *:focus-visible, .breadcrumbs > ul > li > *:focus-visible, .breadcrumbs > ol > li > *:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px
}
.breadcrumbs > menu > li + *:before, .breadcrumbs > ul > li + *:before, .breadcrumbs > ol > li + *:before {
content: "";
margin-right: .75rem;
margin-left: .5rem;
display: block;
height: .375rem;
width: .375rem;
opacity: 40%;
rotate: 45deg;
border-top: 1px solid;
border-right: 1px solid;
background-color: #0000
}
[dir=rtl] .breadcrumbs > menu > li + *:before, [dir=rtl] .breadcrumbs > ul > li + *:before, [dir=rtl] .breadcrumbs > ol > li + *:before {
rotate: -135deg
}
.card {
position: relative;
display: flex;
flex-direction: column;
border-radius: var(--radius-box);
outline-width: 2px;
transition: outline .2s ease-in-out;
outline: 0 solid #0000;
outline-offset: 2px
}
.card:focus {
--tw-outline-style: none;
outline-style: none
}
@media (forced-colors: active) {
.card:focus {
outline: 2px solid transparent;
outline-offset: 2px
}
}
.card:focus-visible {
outline-color: currentColor
}
.card :where(figure:first-child) {
overflow: hidden;
border-start-start-radius: inherit;
border-start-end-radius: inherit;
border-end-start-radius: unset;
border-end-end-radius: unset
}
.card :where(figure:last-child) {
overflow: hidden;
border-start-start-radius: unset;
border-start-end-radius: unset;
border-end-start-radius: inherit;
border-end-end-radius: inherit
}
.card:where(.card-border) {
border: var(--border) solid var(--color-base-200)
}
.card:where(.card-dash) {
border: var(--border) dashed var(--color-base-200)
}
.card.image-full {
display: grid
}
.card.image-full > * {
grid-column-start: 1;
grid-row-start: 1
}
.card.image-full > .card-body {
position: relative;
color: var(--color-neutral-content)
}
.card.image-full :where(figure) {
overflow: hidden;
border-radius: inherit
}
.card.image-full > figure img {
height: 100%;
-o-object-fit: cover;
object-fit: cover;
filter: brightness(28%)
}
.card figure {
display: flex;
align-items: center;
justify-content: center
}
.card:has(>input:is(input[type=checkbox],input[type=radio])) {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none
}
.card:has(>:checked) {
outline: 2px solid currentColor
}
.divider {
display: flex;
height: 1rem;
flex-direction: row;
align-items: center;
align-self: stretch;
white-space: nowrap;
margin: var(--divider-m, 1rem 0);
--divider-color: color-mix(in oklab, var(--color-base-content) 10%, transparent)
}
.divider:before, .divider:after {
content: "";
height: .125rem;
width: 100%;
flex-grow: 1;
background-color: var(--divider-color)
}
@media print {
.divider:before, .divider:after {
border: .5px solid
}
}
.divider:not(:empty) {
gap: 1rem
}
.divider-horizontal.divider {
height: auto;
width: 1rem;
flex-direction: column
}
.divider-horizontal.divider:before {
height: 100%;
width: .125rem
}
.divider-horizontal.divider:after {
height: 100%;
width: .125rem
}
.divider-vertical.divider {
height: 1rem;
width: auto;
flex-direction: row
}
.divider-vertical.divider:before {
height: .125rem;
width: 100%
}
.divider-vertical.divider:after {
height: .125rem;
width: 100%
}
.menu {
display: flex;
width: -moz-fit-content;
width: fit-content;
flex-direction: column;
flex-wrap: wrap;
padding: .5rem;
--menu-active-fg: var(--color-neutral-content);
--menu-active-bg: var(--color-neutral);
font-size: .875rem
}
.menu :where(li ul) {
position: relative;
margin-inline-start: 1rem;
padding-inline-start: .5rem;
white-space: nowrap
}
.menu :where(li ul):before {
position: absolute;
inset-inline-start: 0rem;
top: .75rem;
bottom: .75rem;
background-color: var(--color-base-content);
opacity: 10%;
width: var(--border);
content: ""
}
.menu :where(li>.menu-dropdown:not(.menu-dropdown-show)) {
display: none
}
.menu :where(li:not(.menu-title)>*:not(ul,details,.menu-title,.btn)), .menu :where(li:not(.menu-title)>details>summary:not(.menu-title)) {
display: grid;
grid-auto-flow: column;
align-content: flex-start;
align-items: center;
gap: .5rem;
border-radius: var(--radius-field);
padding-inline: .75rem;
padding-block: .375rem;
text-align: start;
transition-property: color, background-color, box-shadow;
transition-duration: .2s;
transition-timing-function: cubic-bezier(0, 0, .2, 1);
grid-auto-columns: minmax(auto, max-content) auto max-content;
text-wrap: balance;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none
}
.menu :where(li>details>summary) {
--tw-outline-style: none;
outline-style: none
}
@media (forced-colors: active) {
.menu :where(li>details>summary) {
outline: 2px solid transparent;
outline-offset: 2px
}
}
.menu :where(li>details>summary)::-webkit-details-marker {
display: none
}
.menu :where(li>details>summary):after, .menu :where(li>.menu-dropdown-toggle):after {
justify-self: flex-end;
display: block;
height: .375rem;
width: .375rem;
rotate: -135deg;
translate: 0 -1px;
transition-property: rotate, translate;
transition-duration: .2s;
content: "";
transform-origin: 50% 50%;
box-shadow: 2px 2px inset;
pointer-events: none
}
.menu :where(li>details[open]>summary):after, .menu :where(li>.menu-dropdown-toggle.menu-dropdown-show):after {
rotate: 45deg;
translate: 0 1px
}
.menu :where(li:not(.menu-title,.disabled)>*:not(ul,details,.menu-title),li:not(.menu-title,.disabled)>details>summary:not(.menu-title)):not(.menu-active,:active,.btn).menu-focus, .menu :where(li:not(.menu-title,.disabled)>*:not(ul,details,.menu-title),li:not(.menu-title,.disabled)>details>summary:not(.menu-title)):not(.menu-active,:active,.btn):focus-visible {
cursor: pointer;
background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
color: var(--color-base-content);
--tw-outline-style: none;
outline-style: none
}
@media (forced-colors: active) {
.menu :where(li:not(.menu-title,.disabled)>*:not(ul,details,.menu-title),li:not(.menu-title,.disabled)>details>summary:not(.menu-title)):not(.menu-active,:active,.btn).menu-focus, .menu :where(li:not(.menu-title,.disabled)>*:not(ul,details,.menu-title),li:not(.menu-title,.disabled)>details>summary:not(.menu-title)):not(.menu-active,:active,.btn):focus-visible {
outline: 2px solid transparent;
outline-offset: 2px
}
}
.menu :where(li:not(.menu-title,.disabled)>*:not(ul,details,.menu-title):not(.menu-active,:active,.btn):hover,li:not(.menu-title,.disabled)>details>summary:not(.menu-title):not(.menu-active,:active,.btn):hover) {
cursor: pointer;
background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
--tw-outline-style: none;
outline-style: none
}
@media (forced-colors: active) {
.menu :where(li:not(.menu-title,.disabled)>*:not(ul,details,.menu-title):not(.menu-active,:active,.btn):hover,li:not(.menu-title,.disabled)>details>summary:not(.menu-title):not(.menu-active,:active,.btn):hover) {
outline: 2px solid transparent;
outline-offset: 2px
}
}
.menu :where(li:not(.menu-title,.disabled)>*:not(ul,details,.menu-title):not(.menu-active,:active,.btn):hover,li:not(.menu-title,.disabled)>details>summary:not(.menu-title):not(.menu-active,:active,.btn):hover) {
box-shadow: 0 1px #00000003 inset, 0 -1px #ffffff03 inset
}
.menu :where(li:empty) {
background-color: var(--color-base-content);
opacity: 10%;
margin: .5rem 1rem;
height: 1px
}
.menu :where(li) {
position: relative;
display: flex;
flex-shrink: 0;
flex-direction: column;
flex-wrap: wrap;
align-items: stretch
}
.menu :where(li) .badge {
justify-self: flex-end
}
.menu :where(li) > *:not(ul,.menu-title,details,.btn):active, .menu :where(li) > *:not(ul,.menu-title,details,.btn).menu-active, .menu :where(li) > details > summary:active {
--tw-outline-style: none;
outline-style: none
}
@media (forced-colors: active) {
.menu :where(li) > *:not(ul,.menu-title,details,.btn):active, .menu :where(li) > *:not(ul,.menu-title,details,.btn).menu-active, .menu :where(li) > details > summary:active {
outline: 2px solid transparent;
outline-offset: 2px
}
}
.menu :where(li) > *:not(ul,.menu-title,details,.btn):active, .menu :where(li) > *:not(ul,.menu-title,details,.btn).menu-active, .menu :where(li) > details > summary:active {
color: var(--menu-active-fg);
background-color: var(--menu-active-bg);
background-size: auto, calc(var(--noise) * 100%);
background-image: none, var(--fx-noise)
}
.menu :where(li) > *:not(ul,.menu-title,details,.btn):active:not(.menu :where(li)>*:not(ul,.menu-title,details,.btn):active:active), .menu :where(li) > *:not(ul,.menu-title,details,.btn).menu-active:not(.menu :where(li)>*:not(ul,.menu-title,details,.btn).menu-active:active), .menu :where(li) > details > summary:active:not(.menu :where(li)>details>summary:active:active) {
box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--menu-active-bg)
}
.menu :where(li).menu-disabled {
pointer-events: none;
color: color-mix(in oklab, var(--color-base-content) 20%, transparent)
}
.menu .dropdown:focus-within .menu-dropdown-toggle:after {
rotate: 45deg;
translate: 0 1px
}
.menu .dropdown-content {
margin-top: .5rem;
padding: .5rem
}
.menu .dropdown-content:before {
display: none
}
.input {
cursor: text;
border: var(--border) solid #0000;
position: relative;
display: inline-flex;
flex-shrink: 1;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
align-items: center;
gap: .5rem;
background-color: var(--color-base-100);
padding-inline: .75rem;
vertical-align: middle;
white-space: nowrap;
width: clamp(3rem, 20rem, 100%);
height: var(--size);
font-size: .875rem;
touch-action: manipulation;
border-start-start-radius: var(--join-ss, var(--radius-field));
border-start-end-radius: var(--join-se, var(--radius-field));
border-end-start-radius: var(--join-es, var(--radius-field));
border-end-end-radius: var(--join-ee, var(--radius-field));
border-color: var(--input-color);
box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset;
--size: calc(var(--size-field, .25rem) * 10);
--input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000)
}
.input:where(input) {
display: inline-flex
}
.input :where(input) {
display: inline-flex;
height: 100%;
width: 100%;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;
border: none
}
.input :where(input):focus, .input :where(input):focus-within {
--tw-outline-style: none;
outline-style: none
}
@media (forced-colors: active) {
.input :where(input):focus, .input :where(input):focus-within {
outline: 2px solid transparent;
outline-offset: 2px
}
}
.input :where(input[type=url]), .input :where(input[type=email]) {
direction: ltr
}
.input :where(input[type=date]) {
display: inline-flex
}
.input:focus, .input:focus-within {
--input-color: var(--color-base-content);
box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000);
outline: 2px solid var(--input-color);
outline-offset: 2px;
isolation: isolate;
z-index: 1
}
.input:has(>input[disabled]), .input:is(:disabled,[disabled]), fieldset:disabled .input {
cursor: not-allowed;
border-color: var(--color-base-200);
background-color: var(--color-base-200);
color: color-mix(in oklab, var(--color-base-content) 40%, transparent)
}
.input:has(>input[disabled])::-moz-placeholder, .input:is(:disabled,[disabled])::-moz-placeholder, fieldset:disabled .input::-moz-placeholder {
color: color-mix(in oklab, var(--color-base-content) 20%, transparent)
}
.input:has(>input[disabled])::placeholder, .input:is(:disabled,[disabled])::placeholder, fieldset:disabled .input::placeholder {
color: color-mix(in oklab, var(--color-base-content) 20%, transparent)
}
.input:has(>input[disabled]), .input:is(:disabled,[disabled]), fieldset:disabled .input {
box-shadow: none
}
.input:has(>input[disabled]) > input[disabled] {
cursor: not-allowed
}
.input::-webkit-date-and-time-value {
text-align: inherit
}
.input[type=number]::-webkit-inner-spin-button {
margin-block: -.75rem;
margin-inline-end: -.75rem
}
.input::-webkit-calendar-picker-indicator {
position: absolute;
inset-inline-end: .75em
}
.input:has(>input[type=date]) :where(input[type=date]) {
display: inline-flex;
webkit-appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none
}
.input:has(>input[type=date]) input[type=date]::-webkit-calendar-picker-indicator {
position: absolute;
inset-inline-end: .75em;
width: 1em;
height: 1em;
cursor: pointer
}
.alert {
display: grid;
align-items: center;
gap: 1rem;
border-radius: var(--radius-box);
padding-inline: 1rem;
padding-block: .75rem;
color: var(--color-base-content);
background-color: var(--alert-color, var(--color-base-200));
justify-content: start;
justify-items: start;
grid-auto-flow: column;
grid-template-columns:auto;
text-align: start;
border: var(--border) solid var(--color-base-200);
font-size: .875rem;
line-height: 1.25rem;
background-size: auto, calc(var(--noise) * 100%);
background-image: none, var(--fx-noise);
box-shadow: 0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * .08)) inset, 0 1px color-mix(in oklab, color-mix(in oklab, #000 20%, var(--alert-color, var(--color-base-200))) calc(var(--depth) * 20%), #0000), 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * .08))
}
.alert:has(:nth-child(2)) {
grid-template-columns:auto minmax(auto, 1fr)
}
.alert.alert-outline {
background-color: transparent;
color: var(--alert-color);
box-shadow: none;
background-image: none
}
.alert.alert-dash {
background-color: transparent;
color: var(--alert-color);
border-style: dashed;
box-shadow: none;
background-image: none
}
.alert.alert-soft {
color: var(--alert-color, var(--color-base-content));
background: color-mix(in oklab, var(--alert-color, var(--color-base-content)) 8%, var(--color-base-100));
border-color: color-mix(in oklab, var(--alert-color, var(--color-base-content)) 10%, var(--color-base-100));
box-shadow: none;
background-image: none
}
@keyframes rating {
0%, 40% {
scale: 1.1;
filter: brightness(1.05) contrast(1.05)
}
}
.select {
border: var(--border) solid #0000;
position: relative;
display: inline-flex;
flex-shrink: 1;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
align-items: center;
gap: .375rem;
background-color: var(--color-base-100);
padding-inline-start: .75rem;
padding-inline-end: 1.75rem;
vertical-align: middle;
width: clamp(3rem, 20rem, 100%);
height: var(--size);
font-size: .875rem;
touch-action: manipulation;
border-start-start-radius: var(--join-ss, var(--radius-field));
border-start-end-radius: var(--join-se, var(--radius-field));
border-end-start-radius: var(--join-es, var(--radius-field));
border-end-end-radius: var(--join-ee, var(--radius-field));
background-image: linear-gradient(45deg, #0000 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, #0000 50%);
background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16.1px) calc(1px + 50%);
background-size: 4px 4px, 4px 4px;
background-repeat: no-repeat;
text-overflow: ellipsis;
box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset;
border-color: var(--input-color);
--input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);
--size: calc(var(--size-field, .25rem) * 10)
}
[dir=rtl] .select {
background-position: calc(0% + 12px) calc(1px + 50%), calc(0% + 16px) calc(1px + 50%)
}
.select select {
margin-inline-start: -.75rem;
margin-inline-end: -1.75rem;
width: calc(100% + 2.75rem);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-inline-start: .75rem;
padding-inline-end: 1.75rem;
height: calc(100% - calc(var(--border) * 2));
align-items: center;
background: inherit;
border-radius: inherit;
border-style: none
}
.select select:focus, .select select:focus-within {
--tw-outline-style: none;
outline-style: none
}
@media (forced-colors: active) {
.select select:focus, .select select:focus-within {
outline: 2px solid transparent;
outline-offset: 2px
}
}
.select select:not(:last-child) {
margin-inline-end: -1.375rem;
background-image: none
}
.select:focus, .select:focus-within {
--input-color: var(--color-base-content);
box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000);
outline: 2px solid var(--input-color);
outline-offset: 2px;
isolation: isolate;
z-index: 1
}
.select:has(>select[disabled]), .select:is(:disabled,[disabled]), fieldset:disabled .select {
cursor: not-allowed;
border-color: var(--color-base-200);
background-color: var(--color-base-200);
color: color-mix(in oklab, var(--color-base-content) 40%, transparent)
}
.select:has(>select[disabled])::-moz-placeholder, .select:is(:disabled,[disabled])::-moz-placeholder, fieldset:disabled .select::-moz-placeholder {
color: color-mix(in oklab, var(--color-base-content) 20%, transparent)
}
.select:has(>select[disabled])::placeholder, .select:is(:disabled,[disabled])::placeholder, fieldset:disabled .select::placeholder {
color: color-mix(in oklab, var(--color-base-content) 20%, transparent)
}
.select:has(>select[disabled]) > select[disabled] {
cursor: not-allowed
}
@supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)) {
.select, .select select {
-webkit-appearance: base-select;
-moz-appearance: base-select;
appearance: base-select
}
.select::picker(select), .select select::picker(select) {
-webkit-appearance: base-select;
-moz-appearance: base-select;
appearance: base-select
}
}
.select::picker(select), .select select::picker(select) {
color: inherit;
max-height: min(24rem, 70dvh);
border: var(--border) solid var(--color-base-200);
margin-block: .5rem;
border-radius: var(--radius-box);
padding: .5rem;
background-color: inherit;
box-shadow: 0 2px calc(var(--depth) * 3px) -2px #0003;
box-shadow: 0 20px 25px -5px rgb(0 0 0 / calc(var(--depth) * .1)), 0 8px 10px -6px rgb(0 0 0 / calc(var(--depth) * .1))
}
.select::picker-icon, .select select::picker-icon {
display: none
}
.select optgroup, .select select optgroup {
padding-top: .5em
}
.select optgroup option:nth-child(1), .select select optgroup option:nth-child(1) {
margin-top: .5em
}
.select option, .select select option {
border-radius: var(--radius-field);
padding-inline: .75rem;
padding-block: .375rem;
transition-property: color, background-color;
transition-duration: .2s;
transition-timing-function: cubic-bezier(0, 0, .2, 1)
}
.select option:not(:disabled):hover, .select option:not(:disabled):focus-visible, .select select option:not(:disabled):hover, .select select option:not(:disabled):focus-visible {
cursor: pointer;
background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
--tw-outline-style: none;
outline-style: none
}
@media (forced-colors: active) {
.select option:not(:disabled):hover, .select option:not(:disabled):focus-visible, .select select option:not(:disabled):hover, .select select option:not(:disabled):focus-visible {
outline: 2px solid transparent;
outline-offset: 2px
}
}
.select option:not(:disabled):active, .select select option:not(:disabled):active {
background-color: var(--color-neutral);
color: var(--color-neutral-content);
box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--color-neutral)
}
@keyframes skeleton {
0% {
background-position: 150%
}
to {
background-position: -50%
}
}
.navbar {
display: flex;
width: 100%;
align-items: center;
padding: .5rem;
min-height: 4rem
}
.footer {
display: grid;
width: 100%;
grid-auto-flow: row;
place-items: start;
-moz-column-gap: 1rem;
column-gap: 1rem;
row-gap: 2.5rem;
font-size: .875rem;
line-height: 1.25rem
}
.footer > * {
display: grid;
place-items: start;
gap: .5rem
}
.footer.footer-center {
grid-auto-flow: column dense;
place-items: center;
text-align: center
}
.footer.footer-center > * {
place-items: center
}
.mockup-browser .mockup-browser-toolbar .input {
margin-inline: auto;
display: flex;
height: 100%;
align-items: center;
gap: .5rem;
overflow: hidden;
background-color: var(--color-base-200);
text-overflow: ellipsis;
white-space: nowrap;
font-size: .75rem;
direction: ltr
}
.mockup-browser .mockup-browser-toolbar .input:before {
content: "";
width: 1rem;
height: 1rem;
opacity: 50%;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z' clip-rule='evenodd' /%3E%3C/svg%3E") no-repeat center;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z' clip-rule='evenodd' /%3E%3C/svg%3E") no-repeat center;
-webkit-mask-size: contain;
mask-size: contain
}
@keyframes progress {
50% {
background-position-x: -115%
}
}
.status {
display: inline-block;
aspect-ratio: 1 / 1;
width: .5rem;
height: .5rem;
border-radius: var(--radius-selector);
background-color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
background-position: center;
background-repeat: no-repeat;
vertical-align: middle;
color: color-mix(in srgb, #000 30%, transparent)
}
@supports (color: color-mix(in lab,red,red)) {
.status {
color: color-mix(in oklab, var(--color-black) 30%, transparent)
}
}
.status {
background-image: radial-gradient(circle at 35% 30%, oklch(1 0 0 / calc(var(--depth) * .5)), #0000);
box-shadow: 0 2px 3px -1px color-mix(in oklab, currentColor calc(var(--depth) * 100%), #0000)
}
.link {
cursor: pointer;
text-decoration-line: underline
}
.link:focus {
--tw-outline-style: none;
outline-style: none
}
@media (forced-colors: active) {
.link:focus {
outline: 2px solid transparent;
outline-offset: 2px
}
}
.link:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px
}
.link-hover {
text-decoration-line: none
}
@media (hover: hover) {
.link-hover:hover {
text-decoration-line: underline
}
}
:where(.btn) {
width: unset
}
.btn {
display: inline-flex;
flex-shrink: 0;
cursor: pointer;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
gap: .375rem;
text-align: center;
vertical-align: middle;
outline-offset: 2px;
webkit-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
padding-inline: var(--btn-p);
color: var(--btn-fg);
--tw-prose-links: var(--btn-fg);
height: var(--size);
font-size: var(--fontsize, .875rem);
font-weight: 600;
outline-color: var(--btn-color, var(--color-base-content));
transition-property: color, background-color, border-color, box-shadow;
transition-timing-function: cubic-bezier(0, 0, .2, 1);
transition-duration: .2s;
border-start-start-radius: var(--join-ss, var(--radius-field));
border-start-end-radius: var(--join-se, var(--radius-field));
border-end-start-radius: var(--join-es, var(--radius-field));
border-end-end-radius: var(--join-ee, var(--radius-field));
background-color: var(--btn-bg);
background-size: auto, calc(var(--noise) * 100%);
background-image: none, var(--btn-noise);
border-width: var(--border);
border-style: solid;
border-color: var(--btn-border);
text-shadow: 0 .5px oklch(100% 0 0 / calc(var(--depth) * .15));
touch-action: manipulation;
box-shadow: 0 .5px 0 .5px oklch(100% 0 0 / calc(var(--depth) * 6%)) inset, var(--btn-shadow);
--size: calc(var(--size-field, .25rem) * 10);
--btn-bg: var(--btn-color, var(--color-base-200));
--btn-fg: var(--color-base-content);
--btn-p: 1rem;
--btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%));
--btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000), 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000);
--btn-noise: var(--fx-noise)
}
.prose .btn {
text-decoration-line: none
}
@media (hover: hover) {
.btn:hover {
--btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%)
}
}
.btn:focus-visible, .btn:has(:focus-visible) {
outline-width: 2px;
outline-style: solid;
isolation: isolate
}
.btn:active:not(.btn-active) {
translate: 0 .5px;
--btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 5%);
--btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
--btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0)
}
.btn:is(:disabled,[disabled],.btn-disabled):not(.btn-link,.btn-ghost) {
background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
box-shadow: none
}
.btn:is(:disabled,[disabled],.btn-disabled) {
pointer-events: none;
--btn-border: #0000;
--btn-noise: none;
--btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000)
}
@media (hover: hover) {
.btn:is(:disabled,[disabled],.btn-disabled):hover {
pointer-events: none;
background-color: color-mix(in oklab, var(--color-neutral) 20%, transparent);
--btn-border: #0000;
--btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000)
}
}
.btn:is(input[type=checkbox],input[type=radio]) {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none
}
.btn:is(input[type=checkbox],input[type=radio]):after {
content: attr(aria-label)
}
.btn:where(input:checked:not(.filter .btn)) {
--btn-color: var(--color-primary);
--btn-fg: var(--color-primary-content);
isolation: isolate
}
.btn-primary {
--btn-color: var(--color-primary);
--btn-fg: var(--color-primary-content)
}
.btn-ghost:not(.btn-active,:hover,:active:focus,:focus-visible) {
--btn-shadow: "";
--btn-bg: #0000;
--btn-border: #0000;
--btn-noise: none
}
.btn-ghost:not(.btn-active,:hover,:active:focus,:focus-visible):not(:disabled,[disabled],.btn-disabled) {
outline-color: currentColor;
--btn-fg: currentColor
}
@media (hover: none) {
.btn-ghost:hover:not(.btn-active,:active,:focus-visible,:disabled,[disabled],.btn-disabled) {
--btn-shadow: "";
--btn-bg: #0000;
--btn-border: #0000;
--btn-noise: none;
--btn-fg: currentColor
}
}
.btn-outline:not(.btn-active,:hover,:active:focus,:focus-visible,:disabled,[disabled],.btn-disabled,:checked) {
--btn-shadow: "";
--btn-bg: #0000;
--btn-fg: var(--btn-color);
--btn-border: var(--btn-color);
--btn-noise: none
}
@media (hover: none) {
.btn-outline:hover:not(.btn-active,:active,:focus-visible,:disabled,[disabled],.btn-disabled,:checked) {
--btn-shadow: "";
--btn-bg: #0000;
--btn-fg: var(--btn-color);
--btn-border: var(--btn-color);
--btn-noise: none
}
}
.btn-sm {
--fontsize: .75rem;
--btn-p: .75rem;
--size: calc(var(--size-field, .25rem) * 8)
}
.btn-lg {
--fontsize: 1.125rem;
--btn-p: 1.25rem;
--size: calc(var(--size-field, .25rem) * 12)
}
.btn-block {
width: 100%
}
.table {
font-size: .875rem;
position: relative;
width: 100%;
border-radius: var(--radius-box);
text-align: left
}
.table:where(:dir(rtl),[dir=rtl],[dir=rtl] *) {
text-align: right
}
@media (hover: hover) {
.table tr.row-hover:hover, .table tr.row-hover:nth-child(2n):hover {
background-color: var(--color-base-200)
}
}
.table :where(th,td) {
padding-inline: 1rem;
padding-block: .75rem;
vertical-align: middle
}
.table :where(thead,tfoot) {
white-space: nowrap;
color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
font-size: .875rem;
font-weight: 600
}
.table :where(tfoot) {
border-top: var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000)
}
.table :where(.table-pin-rows thead tr) {
position: sticky;
top: 0rem;
z-index: 1;
background-color: var(--color-base-100)
}
.table :where(.table-pin-rows tfoot tr) {
position: sticky;
bottom: 0rem;
z-index: 1;
background-color: var(--color-base-100)
}
.table :where(.table-pin-cols tr th) {
position: sticky;
right: 0rem;
left: 0rem;
background-color: var(--color-base-100)
}
.table :where(thead tr,tbody tr:not(:last-child)) {
border-bottom: var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000)
}
.loading {
pointer-events: none;
display: inline-block;
aspect-ratio: 1 / 1;
background-color: currentColor;
vertical-align: middle;
width: calc(var(--size-selector, .25rem) * 6);
-webkit-mask-size: 100%;
mask-size: 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E")
}
.btn {
font-weight: 500
}
.btn-primary {
transition-property: transform;
transition-property: box-shadow;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .2s
}
.btn-primary:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
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));
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.button {
cursor: pointer
}
.card {
transition-property: box-shadow;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .3s
}
.card:hover {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.navbar-blur {
background-color: var(--color-base-100);
--tw-bg-opacity: .9;
--tw-backdrop-blur: blur(12px);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
.navbar {
padding: 0
}
.prose table {
margin-top: 2rem;
margin-bottom: 2rem;
margin-left: auto;
margin-right: auto;
width: -moz-fit-content;
width: fit-content;
display: table
}
.prose {
overflow-x: hidden
}
@media (max-width: 640px) {
.prose table {
min-width: 100%;
display: block;
width: -moz-max-content;
width: max-content;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch
}
.prose td, .prose th {
white-space: nowrap;
padding: .25rem .5rem;
font-size: .875rem;
line-height: 1.25rem
}
}
.prose table::-webkit-scrollbar {
height: 8px
}
.prose table::-webkit-scrollbar-track {
border-radius: .25rem;
background-color: var(--color-base-200)
}
.prose table::-webkit-scrollbar-thumb {
border-radius: .25rem;
background-color: var(--color-base-300)
}
.prose table::-webkit-scrollbar-thumb:hover {
background-color: var(--color-base-content);
--tw-bg-opacity: .2
}
.visible {
visibility: visible
}
.static {
position: static
}
.absolute {
position: absolute
}
.relative {
position: relative
}
.sticky {
position: sticky
}
.inset-0 {
inset: 0
}
.top-0 {
top: 0
}
.z-40 {
z-index: 40
}
.z-50 {
z-index: 50
}
.m-0 {
margin: 0
}
.mx-2 {
margin-left: .5rem;
margin-right: .5rem
}
.mx-auto {
margin-left: auto;
margin-right: auto
}
.my-2 {
margin-top: .5rem;
margin-bottom: .5rem
}
.my-4 {
margin-top: 1rem;
margin-bottom: 1rem
}
.mb-3 {
margin-bottom: .75rem
}
.mb-4 {
margin-bottom: 1rem
}
.mb-6 {
margin-bottom: 1.5rem
}
.mb-8 {
margin-bottom: 2rem
}
.ml-2 {
margin-left: .5rem
}
.block {
display: block
}
.inline {
display: inline
}
.flex {
display: flex
}
.inline-flex {
display: inline-flex
}
.table {
display: table
}
.grid {
display: grid
}
.hidden {
display: none
}
.h-10 {
height: 2.5rem
}
.h-12 {
height: 3rem
}
.h-4 {
height: 1rem
}
.h-5 {
height: 1.25rem
}
.h-8 {
height: 2rem
}
.h-full {
height: 100%
}
.max-h-8 {
max-height: 2rem
}
.min-h-screen {
min-height: 100vh
}
.w-4 {
width: 1rem
}
.w-44 {
width: 11rem
}
.w-5 {
width: 1.25rem
}
.w-6 {
width: 1.5rem
}
.w-auto {
width: auto
}
.w-full {
width: 100%
}
.min-w-0 {
min-width: 0px
}
.max-w-5xl {
max-width: 64rem
}
.max-w-\[150px\] {
max-width: 150px
}
.max-w-md {
max-width: 28rem
}
.max-w-none {
max-width: none
}
.flex-1 {
flex: 1 1 0%
}
.flex-none {
flex: none
}
.flex-shrink-0 {
flex-shrink: 0
}
.transform {
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
}
.select-none {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none
}
.resize {
resize: both
}
.flex-col {
flex-direction: column
}
.flex-wrap {
flex-wrap: wrap
}
.items-center {
align-items: center
}
.justify-center {
justify-content: center
}
.justify-between {
justify-content: space-between
}
.gap-2 {
gap: .5rem
}
.gap-4 {
gap: 1rem
}
.gap-8 {
gap: 2rem
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(.5rem * var(--tw-space-y-reverse))
}
.overflow-hidden {
overflow: hidden
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.rounded {
border-radius: .25rem
}
.rounded-lg {
border-radius: .5rem
}
.rounded-none {
border-radius: 0
}
.rounded-xl {
border-radius: .75rem
}
.rounded-t-lg {
border-top-left-radius: .5rem;
border-top-right-radius: .5rem
}
.border {
border-width: 1px
}
.border-b {
border-bottom-width: 1px
}
.border-none {
border-style: none
}
.border-base-300 {
border-color: var(--color-base-300)
}
.bg-base-100 {
background-color: var(--color-base-100)
}
.bg-base-200 {
background-color: var(--color-base-200)
}
.bg-base-300 {
background-color: var(--color-base-300)
}
.bg-primary {
background-color: var(--color-primary)
}
.bg-opacity-50 {
--tw-bg-opacity: .5
}
.fill-current {
fill: currentColor
}
.object-contain {
-o-object-fit: contain;
object-fit: contain
}
.object-cover {
-o-object-fit: cover;
object-fit: cover
}
.p-0 {
padding: 0
}
.p-2 {
padding: .5rem
}
.p-4 {
padding: 1rem
}
.p-5 {
padding: 1.25rem
}
.px-3 {
padding-left: .75rem;
padding-right: .75rem
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.py-10 {
padding-top: 2.5rem;
padding-bottom: 2.5rem
}
.py-2 {
padding-top: .5rem;
padding-bottom: .5rem
}
.py-3 {
padding-top: .75rem;
padding-bottom: .75rem
}
.pb-12 {
padding-bottom: 3rem
}
.pb-16 {
padding-bottom: 4rem
}
.pb-3 {
padding-bottom: .75rem
}
.pb-8 {
padding-bottom: 2rem
}
.pt-12 {
padding-top: 3rem
}
.pt-16 {
padding-top: 4rem
}
.pt-8 {
padding-top: 2rem
}
.text-left {
text-align: left
}
.text-center {
text-align: center
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem
}
.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem
}
.text-6xl {
font-size: 3.75rem;
line-height: 1
}
.text-base {
font-size: 1rem;
line-height: 1.5rem
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem
}
.text-sm {
font-size: .875rem;
line-height: 1.25rem
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem
}
.text-xs {
font-size: .75rem;
line-height: 1rem
}
.font-bold {
font-weight: 700
}
.font-medium {
font-weight: 500
}
.font-semibold {
font-weight: 600
}
.uppercase {
text-transform: uppercase
}
.capitalize {
text-transform: capitalize
}
.tracking-wider {
letter-spacing: .05em
}
.text-base-content {
color: var(--color-base-content)
}
.text-error {
color: var(--color-error)
}
.underline {
text-decoration-line: underline
}
.opacity-70 {
opacity: .7
}
.opacity-80 {
opacity: .8
}
.shadow {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-lg {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.outline {
outline-style: solid
}
.outline-2 {
outline-width: 2px
}
.outline-primary {
outline-color: var(--color-primary)
}
.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)
}
.blur {
--tw-blur: blur(8px);
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)
}
.filter {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.backdrop-filter {
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
.transition {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s
}
.transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s
}
.transition-colors {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s
}
.transition-opacity {
transition-property: opacity;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s
}
.duration-200 {
transition-duration: .2s
}
.ease-in-out {
transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}
.rounded-box {
border-radius: var(--radius-box)
}
.join {
display: inline-flex;
align-items: stretch;
--join-ss: 0;
--join-se: 0;
--join-es: 0;
--join-ee: 0
}
.join :where(.join-item) {
border-start-start-radius: var(--join-ss, 0);
border-start-end-radius: var(--join-se, 0);
border-end-start-radius: var(--join-es, 0);
border-end-end-radius: var(--join-ee, 0)
}
.join :where(.join-item) * {
--join-ss: var(--radius-field);
--join-se: var(--radius-field);
--join-es: var(--radius-field);
--join-ee: var(--radius-field)
}
.join > .join-item:where(:first-child) {
--join-ss: var(--radius-field);
--join-se: 0;
--join-es: var(--radius-field);
--join-ee: 0
}
.join :first-child:not(:last-child) :where(.join-item) {
--join-ss: var(--radius-field);
--join-se: 0;
--join-es: var(--radius-field);
--join-ee: 0
}
.join > .join-item:where(:last-child) {
--join-ss: 0;
--join-se: var(--radius-field);
--join-es: 0;
--join-ee: var(--radius-field)
}
.join :last-child:not(:first-child) :where(.join-item) {
--join-ss: 0;
--join-se: var(--radius-field);
--join-es: 0;
--join-ee: var(--radius-field)
}
.join > .join-item:where(:only-child) {
--join-ss: var(--radius-field);
--join-se: var(--radius-field);
--join-es: var(--radius-field);
--join-ee: var(--radius-field)
}
.join :only-child :where(.join-item) {
--join-ss: var(--radius-field);
--join-se: var(--radius-field);
--join-es: var(--radius-field);
--join-ee: var(--radius-field)
}
:root .prose {
--tw-prose-body: color-mix(in oklab, var(--color-base-content) 80%, #0000);
--tw-prose-headings: var(--color-base-content);
--tw-prose-lead: var(--color-base-content);
--tw-prose-links: var(--color-base-content);
--tw-prose-bold: var(--color-base-content);
--tw-prose-counters: var(--color-base-content);
--tw-prose-bullets: color-mix(in oklab, var(--color-base-content) 50%, #0000);
--tw-prose-hr: color-mix(in oklab, var(--color-base-content) 20%, #0000);
--tw-prose-quotes: var(--color-base-content);
--tw-prose-quote-borders: color-mix(in oklab, var(--color-base-content) 20%, #0000);
--tw-prose-captions: color-mix(in oklab, var(--color-base-content) 50%, #0000);
--tw-prose-code: var(--color-base-content);
--tw-prose-pre-code: var(--color-neutral-content);
--tw-prose-pre-bg: var(--color-neutral);
--tw-prose-th-borders: color-mix(in oklab, var(--color-base-content) 50%, #0000);
--tw-prose-td-borders: color-mix(in oklab, var(--color-base-content) 20%, #0000);
--tw-prose-kbd: color-mix(in oklab, var(--color-base-content) 80%, #0000)
}
:root .prose :where(code):not(pre>code) {
background-color: var(--color-base-200);
border-radius: var(--radius-selector);
border: var(--border) solid var(--color-base-300);
padding-inline: .5em;
font-weight: inherit
}
:root .prose :where(code):not(pre>code):before, :root .prose :where(code):not(pre>code):after {
display: none
}
.hover\:scale-105:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
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))
}
.hover\:bg-base-200:hover {
background-color: var(--color-base-200)
}
.hover\:text-primary:hover {
color: var(--color-primary)
}
@media (min-width: 390px) {
.min-\[390px\]\:block {
display: block
}
}
@media (min-width: 768px) {
.md\:grid {
display: grid
}
.md\:max-h-10 {
max-height: 2.5rem
}
.md\:grid-cols-3 {
grid-template-columns:repeat(3, minmax(0, 1fr))
}
.md\:flex-row {
flex-direction: row
}
.md\:justify-end {
justify-content: flex-end
}
.md\:gap-2 {
gap: .5rem
}
.md\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.md\:text-left {
text-align: left
}
.md\:text-5xl {
font-size: 3rem;
line-height: 1
}
.md\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem
}
}
.button.btn-primary {
background-color: var(--button-primary-bg, var(--color-primary, var(--color-primary)));
color: var(--button-primary-text, var(--color-primary-content, var(--color-primary-content)));
border: var(--button-primary-border-width, 0) solid var(--button-primary-border, transparent);
box-shadow: var(--button-primary-shadow, var(--shadow-button, 0 2px 4px 0 rgba(0, 0, 0, .1)))
}
.button.btn-primary:hover {
background-color: var(--button-primary-hover-bg, var(--button-primary-bg, var(--color-primary, var(--color-primary))));
color: var(--button-primary-hover-text, var(--button-primary-text, var(--color-primary-content, var(--color-primary-content))));
border-color: var(--button-primary-hover-border, var(--button-primary-border, transparent))
}
.button.btn-outline.btn-primary {
background-color: var(--button-secondary-bg, transparent);
color: var(--button-secondary-text, var(--color-secondary, var(--color-secondary)));
border: var(--button-secondary-border-width, 2px) solid var(--button-secondary-border, var(--color-secondary, var(--color-secondary)));
box-shadow: var(--button-secondary-shadow, none)
}
.button.btn-outline.btn-primary:hover {
background-color: var(--button-secondary-hover-bg, var(--button-secondary-bg, transparent));
color: var(--button-secondary-hover-text, var(--button-secondary-text, var(--color-secondary, var(--color-secondary))));
border-color: var(--button-secondary-hover-border, var(--button-secondary-border, var(--color-secondary, var(--color-secondary))))
}
.button.btn-sm {
height: 2rem;
padding-left: .75rem;
padding-right: .75rem;
font-size: .875rem;
line-height: 1.25rem
}
.button.btn-lg {
height: 3rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
font-size: 1.125rem;
line-height: 1.75rem
}
.button.btn-wide-padding {
padding-left: 3rem;
padding-right: 3rem;
text-transform: capitalize;
animation: pulse-scale 2s cubic-bezier(.4, 0, .6, 1) infinite
}
@keyframes pulse-scale {
0%, to {
transform: scale(1)
}
50% {
transform: scale(1.05)
}
}
a[aria-current=page] {
color: var(--color-primary)
}
header {
transition: box-shadow .3s ease
}
img {
-o-object-fit: contain;
object-fit: contain
}
.btn {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .2s
}
.logo-link {
transition-property: opacity;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .2s
}
.logo-link:hover {
opacity: .8
}
.logo-link:focus {
outline: 2px solid transparent;
outline-offset: 2px
}
.logo-link:focus-visible {
outline-width: 2px;
outline-offset: 2px;
outline-color: var(--color-primary)
}
.dropdown-content {
border-width: 1px;
border-color: var(--color-base-300)
}
.dropdown-content li {
margin: 0;
padding: 0
}
.dropdown-content li a.active {
background-color: var(--color-primary);
color: var(--color-primary-content)
}
.dropdown-content li a:hover:not(.active) {
background-color: var(--color-base-300)
}
.link-hover {
transition-property: all;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .2s
}
.link-hover:hover {
opacity: .8
}
.breadcrumbs {
overflow-x: auto
}
@media (max-width: 640px) {
.breadcrumbs {
font-size: .75rem;
line-height: 1rem
}
}
.faq-container > :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))
}
.faq-item {
border-radius: .5rem;
padding: 1rem
}
@media (min-width: 768px) {
.faq-item {
padding: 1.5rem
}
}
.faq-item {
transition: background-color .2s ease;
background-color: var(--card-background, var(--color-base-200, var(--color-base-200)));
border: var(--card-border-thickness, var(--border-thin, 1px)) solid var(--card-border-color, var(--color-border-default, var(--color-base-300)));
box-shadow: var(--card-shadow, var(--shadow-card, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06)));
border-radius: var(--card-radius, var(--radius-rounded, .5rem))
}
.faq-item:hover {
background-color: var(--card-background-hover, var(--color-base-300, var(--color-base-300)))
}
.faq-question {
cursor: pointer;
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: 500
}
@media (min-width: 768px) {
.faq-question {
font-size: 1.25rem;
line-height: 1.75rem
}
}
.faq-question {
display: flex;
align-items: center;
justify-content: space-between;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none
}
.faq-question::-webkit-details-marker {
display: none
}
.faq-question:focus {
outline: none
}
.faq-question:focus-visible {
outline: var(--focus-outline-width, 2px) solid var(--focus-outline-color, var(--color-primary, var(--color-primary)));
outline-offset: var(--focus-outline-offset, 2px)
}
.faq-toggle-icon {
margin-left: 1rem;
color: var(--icon-color, var(--color-primary, var(--color-primary)));
transition: transform var(--transition-fast, .2s)
}
.faq-icon {
height: 1.5rem;
width: 1.5rem
}
details[open] .faq-toggle-icon {
transform: rotate(45deg)
}
.faq-answer {
margin-top: 1rem
}
.faq-content {
color: var(--tw-prose-body);
max-width: 65ch
}
.faq-content :where(p):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 1.25em;
margin-bottom: 1.25em
}
.faq-content :where([class~=lead]):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-lead);
font-size: 1.25em;
line-height: 1.6;
margin-top: 1.2em;
margin-bottom: 1.2em
}
.faq-content :where(a):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-links);
text-decoration: underline;
font-weight: 500
}
.faq-content :where(strong):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-bold);
font-weight: 600
}
.faq-content :where(a strong):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit
}
.faq-content :where(blockquote strong):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit
}
.faq-content :where(thead th strong):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit
}
.faq-content :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: decimal;
margin-top: 1.25em;
margin-bottom: 1.25em;
padding-inline-start: 1.625em
}
.faq-content :where(ol[type=A]):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: upper-alpha
}
.faq-content :where(ol[type=a]):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: lower-alpha
}
.faq-content :where(ol[type=A s]):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: upper-alpha
}
.faq-content :where(ol[type=a s]):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: lower-alpha
}
.faq-content :where(ol[type=I]):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: upper-roman
}
.faq-content :where(ol[type=i]):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: lower-roman
}
.faq-content :where(ol[type=I s]):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: upper-roman
}
.faq-content :where(ol[type=i s]):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: lower-roman
}
.faq-content :where(ol[type="1"]):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: decimal
}
.faq-content :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)) {
list-style-type: disc;
margin-top: 1.25em;
margin-bottom: 1.25em;
padding-inline-start: 1.625em
}
.faq-content :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker {
font-weight: 400;
color: var(--tw-prose-counters)
}
.faq-content :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker {
color: var(--tw-prose-bullets)
}
.faq-content :where(dt):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-headings);
font-weight: 600;
margin-top: 1.25em
}
.faq-content :where(hr):not(:where([class~=not-prose],[class~=not-prose] *)) {
border-color: var(--tw-prose-hr);
border-top-width: 1px;
margin-top: 3em;
margin-bottom: 3em
}
.faq-content :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)) {
font-weight: 500;
font-style: italic;
color: var(--tw-prose-quotes);
border-inline-start-width: .25rem;
border-inline-start-color: var(--tw-prose-quote-borders);
quotes: "“" "”" "‘" "’";
margin-top: 1.6em;
margin-bottom: 1.6em;
padding-inline-start: 1em
}
.faq-content :where(blockquote p:first-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):before {
content: open-quote
}
.faq-content :where(blockquote p:last-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):after {
content: close-quote
}
.faq-content :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-headings);
font-weight: 800;
font-size: 2.25em;
margin-top: 0;
margin-bottom: .8888889em;
line-height: 1.1111111
}
.faq-content :where(h1 strong):not(:where([class~=not-prose],[class~=not-prose] *)) {
font-weight: 900;
color: inherit
}
.faq-content :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-headings);
font-weight: 700;
font-size: 1.5em;
margin-top: 2em;
margin-bottom: 1em;
line-height: 1.3333333
}
.faq-content :where(h2 strong):not(:where([class~=not-prose],[class~=not-prose] *)) {
font-weight: 800;
color: inherit
}
.faq-content :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-headings);
font-weight: 600;
font-size: 1.25em;
margin-top: 1.6em;
margin-bottom: .6em;
line-height: 1.6
}
.faq-content :where(h3 strong):not(:where([class~=not-prose],[class~=not-prose] *)) {
font-weight: 700;
color: inherit
}
.faq-content :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-headings);
font-weight: 600;
margin-top: 1.5em;
margin-bottom: .5em;
line-height: 1.5
}
.faq-content :where(h4 strong):not(:where([class~=not-prose],[class~=not-prose] *)) {
font-weight: 700;
color: inherit
}
.faq-content :where(img):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 2em;
margin-bottom: 2em
}
.faq-content :where(picture):not(:where([class~=not-prose],[class~=not-prose] *)) {
display: block;
margin-top: 2em;
margin-bottom: 2em
}
.faq-content :where(video):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 2em;
margin-bottom: 2em
}
.faq-content :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)) {
font-weight: 500;
font-family: inherit;
color: var(--tw-prose-kbd);
box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px rgb(var(--tw-prose-kbd-shadows) / 10%);
font-size: .875em;
border-radius: .3125rem;
padding-top: .1875em;
padding-inline-end: .375em;
padding-bottom: .1875em;
padding-inline-start: .375em
}
.faq-content :where(code):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-code);
font-weight: 600;
font-size: .875em
}
.faq-content :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):before {
content: "`"
}
.faq-content :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):after {
content: "`"
}
.faq-content :where(a code):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit
}
.faq-content :where(h1 code):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit
}
.faq-content :where(h2 code):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit;
font-size: .875em
}
.faq-content :where(h3 code):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit;
font-size: .9em
}
.faq-content :where(h4 code):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit
}
.faq-content :where(blockquote code):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit
}
.faq-content :where(thead th code):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: inherit
}
.faq-content :where(pre):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-pre-code);
background-color: var(--tw-prose-pre-bg);
overflow-x: auto;
font-weight: 400;
font-size: .875em;
line-height: 1.7142857;
margin-top: 1.7142857em;
margin-bottom: 1.7142857em;
border-radius: .375rem;
padding-top: .8571429em;
padding-inline-end: 1.1428571em;
padding-bottom: .8571429em;
padding-inline-start: 1.1428571em
}
.faq-content :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)) {
background-color: transparent;
border-width: 0;
border-radius: 0;
padding: 0;
font-weight: inherit;
color: inherit;
font-size: inherit;
font-family: inherit;
line-height: inherit
}
.faq-content :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):before {
content: none
}
.faq-content :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):after {
content: none
}
.faq-content :where(table):not(:where([class~=not-prose],[class~=not-prose] *)) {
width: 100%;
table-layout: auto;
margin-top: 2em;
margin-bottom: 2em;
font-size: .875em;
line-height: 1.7142857
}
.faq-content :where(thead):not(:where([class~=not-prose],[class~=not-prose] *)) {
border-bottom-width: 1px;
border-bottom-color: var(--tw-prose-th-borders)
}
.faq-content :where(thead th):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-headings);
font-weight: 600;
vertical-align: bottom;
padding-inline-end: .5714286em;
padding-bottom: .5714286em;
padding-inline-start: .5714286em
}
.faq-content :where(tbody tr):not(:where([class~=not-prose],[class~=not-prose] *)) {
border-bottom-width: 1px;
border-bottom-color: var(--tw-prose-td-borders)
}
.faq-content :where(tbody tr:last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
border-bottom-width: 0
}
.faq-content :where(tbody td):not(:where([class~=not-prose],[class~=not-prose] *)) {
vertical-align: baseline
}
.faq-content :where(tfoot):not(:where([class~=not-prose],[class~=not-prose] *)) {
border-top-width: 1px;
border-top-color: var(--tw-prose-th-borders)
}
.faq-content :where(tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)) {
vertical-align: top
}
.faq-content :where(th,td):not(:where([class~=not-prose],[class~=not-prose] *)) {
text-align: start
}
.faq-content :where(figure>*):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 0;
margin-bottom: 0
}
.faq-content :where(figcaption):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: var(--tw-prose-captions);
font-size: .875em;
line-height: 1.4285714;
margin-top: .8571429em
}
.faq-content {
--tw-prose-body: #374151;
--tw-prose-headings: #111827;
--tw-prose-lead: #4b5563;
--tw-prose-links: #111827;
--tw-prose-bold: #111827;
--tw-prose-counters: #6b7280;
--tw-prose-bullets: #d1d5db;
--tw-prose-hr: #e5e7eb;
--tw-prose-quotes: #111827;
--tw-prose-quote-borders: #e5e7eb;
--tw-prose-captions: #6b7280;
--tw-prose-kbd: #111827;
--tw-prose-kbd-shadows: 17 24 39;
--tw-prose-code: #111827;
--tw-prose-pre-code: #e5e7eb;
--tw-prose-pre-bg: #1f2937;
--tw-prose-th-borders: #d1d5db;
--tw-prose-td-borders: #e5e7eb;
--tw-prose-invert-body: #d1d5db;
--tw-prose-invert-headings: #fff;
--tw-prose-invert-lead: #9ca3af;
--tw-prose-invert-links: #fff;
--tw-prose-invert-bold: #fff;
--tw-prose-invert-counters: #9ca3af;
--tw-prose-invert-bullets: #4b5563;
--tw-prose-invert-hr: #374151;
--tw-prose-invert-quotes: #f3f4f6;
--tw-prose-invert-quote-borders: #374151;
--tw-prose-invert-captions: #9ca3af;
--tw-prose-invert-kbd: #fff;
--tw-prose-invert-kbd-shadows: 255 255 255;
--tw-prose-invert-code: #fff;
--tw-prose-invert-pre-code: #d1d5db;
--tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
--tw-prose-invert-th-borders: #4b5563;
--tw-prose-invert-td-borders: #374151;
font-size: 1rem;
line-height: 1.75
}
.faq-content :where(picture>img):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 0;
margin-bottom: 0
}
.faq-content :where(li):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: .5em;
margin-bottom: .5em
}
.faq-content :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *)) {
padding-inline-start: .375em
}
.faq-content :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *)) {
padding-inline-start: .375em
}
.faq-content :where(.prose>ul>li p):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: .75em;
margin-bottom: .75em
}
.faq-content :where(.prose>ul>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 1.25em
}
.faq-content :where(.prose>ul>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-bottom: 1.25em
}
.faq-content :where(.prose>ol>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 1.25em
}
.faq-content :where(.prose>ol>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-bottom: 1.25em
}
.faq-content :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: .75em;
margin-bottom: .75em
}
.faq-content :where(dl):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 1.25em;
margin-bottom: 1.25em
}
.faq-content :where(dd):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: .5em;
padding-inline-start: 1.625em
}
.faq-content :where(hr+*):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 0
}
.faq-content :where(h2+*):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 0
}
.faq-content :where(h3+*):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 0
}
.faq-content :where(h4+*):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 0
}
.faq-content :where(thead th:first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
padding-inline-start: 0
}
.faq-content :where(thead th:last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
padding-inline-end: 0
}
.faq-content :where(tbody td,tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)) {
padding-top: .5714286em;
padding-inline-end: .5714286em;
padding-bottom: .5714286em;
padding-inline-start: .5714286em
}
.faq-content :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
padding-inline-start: 0
}
.faq-content :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
padding-inline-end: 0
}
.faq-content :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 2em;
margin-bottom: 2em
}
.faq-content :where(.prose>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 0
}
.faq-content :where(.prose>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-bottom: 0
}
.faq-content {
--tw-prose-body: var(--tw-prose-invert-body);
--tw-prose-headings: var(--tw-prose-invert-headings);
--tw-prose-lead: var(--tw-prose-invert-lead);
--tw-prose-links: var(--tw-prose-invert-links);
--tw-prose-bold: var(--tw-prose-invert-bold);
--tw-prose-counters: var(--tw-prose-invert-counters);
--tw-prose-bullets: var(--tw-prose-invert-bullets);
--tw-prose-hr: var(--tw-prose-invert-hr);
--tw-prose-quotes: var(--tw-prose-invert-quotes);
--tw-prose-quote-borders: var(--tw-prose-invert-quote-borders);
--tw-prose-captions: var(--tw-prose-invert-captions);
--tw-prose-kbd: var(--tw-prose-invert-kbd);
--tw-prose-kbd-shadows: var(--tw-prose-invert-kbd-shadows);
--tw-prose-code: var(--tw-prose-invert-code);
--tw-prose-pre-code: var(--tw-prose-invert-pre-code);
--tw-prose-pre-bg: var(--tw-prose-invert-pre-bg);
--tw-prose-th-borders: var(--tw-prose-invert-th-borders);
--tw-prose-td-borders: var(--tw-prose-invert-td-borders)
}
.faq-content .btn {
text-decoration-line: none
}
.faq-content {
max-width: none
}
:root .faq-content {
--tw-prose-body: color-mix(in oklab, var(--color-base-content) 80%, #0000);
--tw-prose-headings: var(--color-base-content);
--tw-prose-lead: var(--color-base-content);
--tw-prose-links: var(--color-base-content);
--tw-prose-bold: var(--color-base-content);
--tw-prose-counters: var(--color-base-content);
--tw-prose-bullets: color-mix(in oklab, var(--color-base-content) 50%, #0000);
--tw-prose-hr: color-mix(in oklab, var(--color-base-content) 20%, #0000);
--tw-prose-quotes: var(--color-base-content);
--tw-prose-quote-borders: color-mix(in oklab, var(--color-base-content) 20%, #0000);
--tw-prose-captions: color-mix(in oklab, var(--color-base-content) 50%, #0000);
--tw-prose-code: var(--color-base-content);
--tw-prose-pre-code: var(--color-neutral-content);
--tw-prose-pre-bg: var(--color-neutral);
--tw-prose-th-borders: color-mix(in oklab, var(--color-base-content) 50%, #0000);
--tw-prose-td-borders: color-mix(in oklab, var(--color-base-content) 20%, #0000);
--tw-prose-kbd: color-mix(in oklab, var(--color-base-content) 80%, #0000)
}
:root .faq-content :where(code):not(pre>code) {
background-color: var(--color-base-200);
border-radius: var(--radius-selector);
border: var(--border) solid var(--color-base-300);
padding-inline: .5em;
font-weight: inherit
}
:root .faq-content :where(code):not(pre>code):before, :root .faq-content :where(code):not(pre>code):after {
display: none
}
.faq-content {
color: var(--color-base-content);
opacity: .9
}
.faq-content strong {
color: var(--link-hover-color, var(--color-primary, var(--color-primary)));
font-weight: 600
}
.faq-content ul > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(.5rem * var(--tw-space-y-reverse))
}
.game-grid {
display: grid;
gap: 1.5rem;
grid-template-columns:repeat(2, 1fr)
}
@media (max-width: 767px) {
.game-grid {
gap: 1rem;
grid-template-columns:repeat(2, 1fr)
}
.game-name {
font-size: .875rem
}
.provider-name {
font-size: .75rem
}
}
@media (min-width: 768px) {
.game-grid {
grid-template-columns:repeat(4, 1fr);
gap: 2rem
}
}
.game-grid .game-item {
display: flex;
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));
flex-direction: column
}
.game-grid .game-item:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
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))
}
.game-grid .game-item {
overflow: hidden;
border-radius: .5rem;
background-color: var(--color-base-200);
transition: transform var(--transition-medium, .3s) ease, box-shadow var(--transition-medium, .3s) ease;
box-shadow: var(--card-shadow, var(--shadow-card, 0 2px 4px 0 rgba(0, 0, 0, .1)))
}
.game-grid .game-item:hover {
box-shadow: 0 10px 30px hsl(var(--b3) / .3)
}
.game-image-wrapper {
position: relative;
flex-shrink: 0;
overflow: hidden;
border-top-left-radius: .5rem;
border-top-right-radius: .5rem;
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
background-color: var(--color-base-200);
aspect-ratio: 3 / 4
}
.game-image {
margin: 0;
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover
}
.placeholder-image {
display: flex;
height: 100%;
width: 100%;
align-items: center;
justify-content: center;
background-color: var(--color-base-300)
}
.text-muted {
color: var(--color-base-content);
opacity: .5
}
.game-overlay {
position: absolute;
inset: 0;
opacity: 0;
background: var(--overlay-gradient, linear-gradient(to top, rgba(26, 26, 26, .8), rgba(26, 26, 26, .4), transparent));
transition: opacity var(--transition-medium, .3s)
}
.game-grid .game-item:hover .game-overlay {
opacity: 1
}
.game-info {
border-bottom-right-radius: .5rem;
border-bottom-left-radius: .5rem;
padding: .5rem;
text-align: center;
background-color: var(--card-background, var(--color-base-200, var(--color-base-200)));
border: var(--card-border-thickness, var(--border-thin, 1px)) solid var(--card-border-color, var(--color-border-default, var(--color-base-300)));
border-top: none;
color: var(--color-base-content, var(--color-base-content))
}
.game-name {
margin-top: .5rem;
margin-bottom: .5rem;
display: block;
font-size: 1.125rem;
line-height: 1.75rem;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
color: var(--color-base-content, var(--color-base-content));
transition: color var(--transition-medium, .3s);
font-weight: 600
}
.game-grid .game-item:hover .game-name {
color: var(--link-hover-color, var(--color-primary, var(--color-primary)))
}
.provider-name {
display: block;
font-size: .875rem;
line-height: 1.25rem;
color: var(--color-base-content, var(--color-base-content));
opacity: .85;
font-weight: 500
}
.banner-image {
display: block;
margin: 1.5rem auto;
max-width: 400px;
width: 100%;
height: auto;
-o-object-fit: contain;
object-fit: contain;
transition: transform .3s ease, box-shadow .3s ease;
border-radius: .5rem;
overflow: hidden
}
.banner-image:hover {
transform: scale(1.05);
box-shadow: 0 10px 30px hsl(var(--b3) / .5)
}
@media (max-width: 640px) {
.banner-image {
max-width: 90%;
margin: 1rem auto
}
}
.toc-container {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
border-radius: .75rem;
background-color: var(--color-base-200);
--tw-bg-opacity: .5;
padding: 1.25rem;
background-color: var(--card-background, var(--color-base-200, var(--color-base-200)));
border: var(--card-border-thickness, var(--border-thin, 1px)) solid var(--card-border-color, var(--color-border-default, var(--color-base-300)));
box-shadow: var(--card-shadow, var(--shadow-card, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06)));
border-radius: var(--card-radius, var(--radius-rounded, .5rem))
}
.toc-header {
display: flex;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
align-items: center;
gap: .5rem
}
.toc-header::-webkit-details-marker {
display: none
}
details[open] .toc-header {
margin-bottom: .75rem;
border-bottom-width: 1px;
border-color: var(--color-base-300);
--tw-border-opacity: .5;
padding-bottom: .75rem
}
.toc-header:focus {
outline: none
}
.toc-header:focus-visible {
outline: var(--focus-outline-width, 2px) solid var(--focus-outline-color, var(--color-primary, var(--color-primary)));
outline-offset: var(--focus-outline-offset, 2px);
border-radius: .5rem
}
.toc-icon {
height: 1.25rem;
width: 1.25rem;
color: var(--icon-color, var(--color-primary, var(--color-primary)));
width: var(--icon-size, 1.25rem);
height: var(--icon-size, 1.25rem)
}
.toc-title {
flex: 1 1 0%;
font-size: 1rem;
line-height: 1.5rem;
font-weight: 500;
letter-spacing: .05em;
color: var(--color-base-content)
}
.toc-toggle-icon {
height: 1.25rem;
width: 1.25rem;
color: var(--icon-color, var(--color-primary, var(--color-primary)));
width: var(--icon-size, 1.25rem);
height: var(--icon-size, 1.25rem);
transition: transform var(--transition-fast, .2s)
}
details[open] .toc-toggle-icon {
transform: rotate(180deg)
}
.toc-list > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(.5rem * var(--tw-space-y-reverse))
}
.toc-item {
list-style-type: none
}
.toc-link {
display: block;
padding-top: .25rem;
padding-bottom: .25rem;
color: var(--link-color, var(--color-base-content, var(--color-base-content)));
opacity: var(--link-opacity, .7);
transition: color var(--transition-fast, .2s), opacity var(--transition-fast, .2s)
}
.toc-link:hover {
color: var(--link-hover-color, var(--color-primary, var(--color-primary)));
opacity: var(--link-hover-opacity, 1);
--tw-translate-x: .25rem;
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))
}
html {
scroll-behavior: smooth
}
h1[id], h2[id], h3[id], h4[id], h5[id], h6[id] {
scroll-margin-top: 5rem
}
@media (max-width: 768px) {
.toc-container {
margin-left: .5rem;
margin-right: .5rem;
padding: 1rem
}
.toc-title {
font-size: .875rem;
line-height: 1.25rem
}
h1[id], h2[id], h3[id], h4[id], h5[id], h6[id] {
scroll-margin-top: 4rem
}
}
.hero-section > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.5rem * var(--tw-space-y-reverse))
}
.provider-grid {
display: grid;
gap: 1.5rem;
grid-template-columns:repeat(2, 1fr)
}
@media (max-width: 767px) {
.provider-grid {
gap: 1rem;
grid-template-columns:repeat(2, 1fr)
}
}
@media (min-width: 768px) {
.provider-grid {
grid-template-columns:repeat(4, 1fr);
gap: 2rem
}
}
.provider-item {
display: flex;
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));
flex-direction: column
}
.provider-item:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
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))
}
.provider-item {
overflow: hidden;
border-radius: .5rem;
background-color: var(--color-base-200);
transition: transform var(--transition-medium, .3s) ease, box-shadow var(--transition-medium, .3s) ease;
box-shadow: var(--card-shadow, var(--shadow-card, 0 2px 4px 0 rgba(0, 0, 0, .1)))
}
.provider-item:hover {
box-shadow: var(--shadow-large, 0 10px 30px hsl(var(--b3) / .3))
}
.provider-image-wrapper {
position: relative;
flex-shrink: 0;
overflow: hidden;
border-top-left-radius: .5rem;
border-top-right-radius: .5rem;
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
background-color: var(--color-base-200);
aspect-ratio: 16 / 9
}
.provider-image {
margin: 0;
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover
}
.placeholder-image {
display: flex;
height: 100%;
width: 100%;
align-items: center;
justify-content: center;
background-color: var(--color-base-300)
}
.text-muted {
color: var(--color-base-content);
opacity: .5
}
.provider-overlay {
position: absolute;
inset: 0;
opacity: 0;
background: var(--overlay-gradient, linear-gradient(to top, rgba(26, 26, 26, .8), rgba(26, 26, 26, .4), transparent));
transition: opacity var(--transition-medium, .3s)
}
.provider-item:hover .provider-overlay {
opacity: 1
}
.provider-info {
border-bottom-right-radius: .5rem;
border-bottom-left-radius: .5rem;
padding: .5rem;
text-align: center;
background-color: var(--card-background, var(--color-base-200, var(--color-base-200)));
border: var(--card-border-thickness, var(--border-thin, 1px)) solid var(--card-border-color, var(--color-border-default, var(--color-base-300)));
border-top: none
}
.provider-name {
margin-top: .5rem;
margin-bottom: .5rem;
display: block;
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: 600;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
color: var(--link-color, var(--color-base-content, var(--color-base-content)));
transition: color var(--transition-medium, .3s)
}
.provider-item:hover .provider-name {
color: var(--link-hover-color, var(--color-primary, var(--color-primary)))
}
@media (max-width: 767px) {
.provider-name {
font-size: .875rem
}
}
.anchors-block {
list-style: none;
margin: 0 0 20px;
padding: 0
}
.anchors-block a {
text-decoration: none;
color: currentColor
}
.logo {
letter-spacing: -0.05em;
font-weight: 900;
font-size: 1.5rem;
line-height: 2rem;
color: #fff !important;
text-decoration: none;
}
.logo span {
color: var(--color-primary);
}
.button-fixed {
display: none;
}
@media (max-width: 767px) {
.button-fixed {
display: block;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
padding: 12px 15px;
text-align: center;
backdrop-filter: blur(10px);
box-shadow: 0 -8px 20px rgba(0, 0, 0, .6);
}
.button-fixed .btn {
font-weight: 700;
}
.footer {
margin-bottom: 60px;
}
.banner-row .btn {
display: none;
}
.header-banner {
min-height: 350px;
}
}
a {
text-decoration: none!important;
}
.faq-item {
margin-bottom: 20px;
}