Tailwind studio fluid

Created Diff never expires
230 removals
Lines
Total
Removed
Words
Total
Removed
To continue using this feature, upgrade to
Diffchecker logo
Diffchecker Pro
1530 lines
167 additions
Lines
Total
Added
Words
Total
Added
To continue using this feature, upgrade to
Diffchecker logo
Diffchecker Pro
1467 lines
/*
/*
! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com
! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com
*/
*/
*, :after, :before {
*, :after, :before {
box-sizing: border-box;
box-sizing: border-box;
border: 0 solid #e5e7eb
border: 0 solid #e5e7eb
}
}


:after, :before {
:after, :before {
--tw-content: ""
--tw-content: ""
}
}


html {
html {
line-height: 1.5;
line-height: 1.5;
-webkit-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-moz-tab-size: 4;
-moz-tab-size: 4;
-o-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
tab-size: 4;
font-family: Mona Sans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
font-family: Mona Sans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
font-feature-settings: normal;
font-feature-settings: normal;
font-variation-settings: normal
font-variation-settings: normal
}
}


body {
body {
margin: 0;
margin: 0;
line-height: inherit
line-height: inherit
}
}


hr {
hr {
height: 0;
height: 0;
color: inherit;
color: inherit;
border-top-width: 1px
border-top-width: 1px
}
}


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


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


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


b, strong {
b, strong {
font-weight: bolder
font-weight: bolder
}
}


code, kbd, pre, samp {
code, kbd, pre, samp {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
font-size: 1em
font-size: 1em
}
}


small {
small {
font-size: 80%
font-size: 80%
}
}


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


sub {
sub {
bottom: -.25em
bottom: -.25em
}
}


sup {
sup {
top: -.5em
top: -.5em
}
}


table {
table {
text-indent: 0;
text-indent: 0;
border-color: inherit;
border-color: inherit;
border-collapse: collapse
border-collapse: collapse
}
}


button, input, optgroup, select, textarea {
button, input, optgroup, select, textarea {
font-family: inherit;
font-family: inherit;
font-size: 100%;
font-size: 100%;
font-weight: inherit;
font-weight: inherit;
line-height: inherit;
line-height: inherit;
color: inherit;
color: inherit;
margin: 0;
margin: 0;
padding: 0
padding: 0
}
}


button, select {
button, select {
text-transform: none
text-transform: none
}
}


[type=button], [type=reset], [type=submit], button {
[type=button], [type=reset], [type=submit], button {
-webkit-appearance: button;
-webkit-appearance: button;
background-color: transparent;
background-color: transparent;
background-image: none
background-image: none
}
}


:-moz-focusring {
:-moz-focusring {
outline: auto
outline: auto
}
}


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


progress {
progress {
vertical-align: baseline
vertical-align: baseline
}
}


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


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


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


::-webkit-file-upload-button {
::-webkit-file-upload-button {
-webkit-appearance: button;
-webkit-appearance: button;
font: inherit
font: inherit
}
}


summary {
summary {
display: list-item
display: list-item
}
}


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


fieldset {
fieldset {
margin: 0
margin: 0
}
}


fieldset, legend {
fieldset, legend {
padding: 0
padding: 0
}
}


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


textarea {
textarea {
resize: vertical
resize: vertical
}
}


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


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


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


:disabled {
:disabled {
cursor: default
cursor: default
}
}


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


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


[hidden] {
[hidden] {
display: none
display: none
}
}


:root {
--tw-lh: min(1.5em, 1em + .5rem)
}

rt, small {
line-height: var(--tw-lh)
}

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


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


@font-face {
@font-face {
font-family: Mona Sans;
font-family: Mona Sans;
font-weight: 200 900;
font-weight: 200 900;
font-display: block;
font-display: block;
font-style: normal;
font-style: normal;
font-stretch: 75% 125%;
font-stretch: 75% 125%;
src: url(/_next/static/media/Mona-Sans.var.37e1d48f.woff2) format("woff2")
src: url(/_next/static/media/Mona-Sans.var.37e1d48f.woff2) format("woff2")
}
}


.typography {
.typography {
color: #0a0a0a;
color: #0a0a0a;
font-size: 1.25rem;
font-size: 1.25rem;
line-height: 2rem;
line-height: min(1.75em, 1em + .75rem);
--shiki-color-text: #fff;
--shiki-color-text: #fff;
--shiki-color-background: #0a0a0a;
--shiki-color-background: #0a0a0a;
--shiki-token-constant: #d4d4d4;
--shiki-token-constant: #d4d4d4;
--shiki-token-string: #a3a3a3;
--shiki-token-string: #a3a3a3;
--shiki-token-comment: #737373;
--shiki-token-comment: #737373;
--shiki-token-keyword: #a3a3a3;
--shiki-token-keyword: #a3a3a3;
--shiki-token-parameter: #a3a3a3;
--shiki-token-parameter: #a3a3a3;
--shiki-token-function: #d4d4d4;
--shiki-token-function: #d4d4d4;
--shiki-token-string-expression: #d4d4d4;
--shiki-token-string-expression: #d4d4d4;
--shiki-token-punctuation: #a3a3a3
--shiki-token-punctuation: #a3a3a3
}
}


.typography :where(.typography>*) {
.typography :where(.typography>*) {
margin-top: 1.5rem;
margin-top: 1.5rem;
margin-bottom: 1.5rem
margin-bottom: 1.5rem
}
}


.typography :where(h2) {
.typography :where(h2) {
font-weight: 600;
font-weight: 600;
font-family: Mona Sans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
font-family: Mona Sans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
font-variation-settings: "wdth" 125;
font-variation-settings: "wdth" 125;
font-size: 1.5rem;
font-size: 1.5rem;
line-height: 2.25rem;
line-height: min(1.5em, 1em + .5rem);
margin-top: 4rem
margin-top: 4rem
}
}


.typography :where(h3) {
.typography :where(h3) {
font-weight: 600;
font-weight: 600;
font-family: Mona Sans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
font-family: Mona Sans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
font-variation-settings: "wdth" 125;
font-variation-settings: "wdth" 125;
font-size: 1.25rem;
font-size: 1.25rem;
line-height: 2rem;
line-height: min(1.5em, 1em + .5rem);
margin-top: 2.5rem
margin-top: 2.5rem
}
}


.typography :where(h2+h3) {
.typography :where(h2+h3) {
margin-top: 0
margin-top: 0
}
}


.typography :where(ul,ol) {
.typography :where(ul,ol) {
padding-left: 1.5rem
padding-left: 1.5rem
}
}


.typography :where(ul) {
.typography :where(ul) {
list-style-type: disc
list-style-type: disc
}
}


.typography :where(ol) {
.typography :where(ol) {
list-style-type: decimal
list-style-type: decimal
}
}


.typography :where(li) {
.typography :where(li) {
padding-left: .75rem;
padding-left: .75rem;
margin-top: 1.5rem
margin-top: 1.5rem
}
}


.typography :where(li)::marker {
.typography :where(li)::marker {
color: #737373
color: #737373
}
}


.typography :where(li li), .typography :where(li>*) {
.typography :where(li li), .typography :where(li>*) {
margin-top: 1rem
margin-top: 1rem
}
}


.typography :where(ol>li)::marker {
.typography :where(ol>li)::marker {
font-size: 1rem;
font-size: 1rem;
font-weight: 600
font-weight: 600
}
}


.typography :where(table) {
.typography :where(table) {
width: 100%;
width: 100%;
text-align: left;
text-align: left;
font-size: 1rem;
font-size: 1rem;
line-height: 1.75rem
line-height: min(1.5em, 1em + .5rem)
}
}


.typography :where(th) {
.typography :where(th) {
font-weight: 600
font-weight: 600
}
}


.typography :where(thead th) {
.typography :where(thead th) {
padding-bottom: 1.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid #0a0a0a
border-bottom: 1px solid #0a0a0a
}
}


.typography :where(td) {
.typography :where(td) {
vertical-align: top;
vertical-align: top;
padding-top: 1.5rem;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid hsla(0, 0%, 4%, .1)
border-bottom: 1px solid hsla(0, 0%, 4%, .1)
}
}


.typography :where(:is(th,td):not(:last-child)) {
.typography :where(:is(th,td):not(:last-child)) {
padding-right: 1.5rem
padding-right: 1.5rem
}
}


.typography :where(pre) {
.typography :where(pre) {
display: flex;
display: flex;
background-color: #0a0a0a;
background-color: #0a0a0a;
border-radius: 2.5rem;
border-radius: 2.5rem;
overflow-x: auto;
overflow-x: auto;
margin: 2.5rem calc(-1 * 1.5rem)
margin: 2.5rem calc(-1 * 1.5rem)
}
}


@media (min-width: 640px) {
@media (min-width: 640px) {
.typography :where(pre) {
.typography :where(pre) {
margin-left: auto;
margin-left: auto;
margin-right: auto
margin-right: auto
}
}
}
}


.typography :where(pre code) {
.typography :where(pre code) {
flex: none;
flex: none;
padding: 2rem 1.5rem;
padding: 2rem 1.5rem;
font-size: 1rem;
font-size: 1rem;
line-height: 2rem;
line-height: 2rem;
color: #fff
color: #fff
}
}


@media (min-width: 640px) {
@media (min-width: 640px) {
.typography :where(pre code) {
.typography :where(pre code) {
padding: 2.5rem
padding: 2.5rem
}
}
}
}


.typography :where(hr) {
.typography :where(hr) {
border-color: hsla(0, 0%, 4%, .1);
border-color: hsla(0, 0%, 4%, .1);
margin-top: 6rem;
margin-top: 6rem;
margin-bottom: 6rem
margin-bottom: 6rem
}
}


.typography :where(a) {
.typography :where(a) {
text-decoration: underline;
text-decoration: underline;
text-decoration-thickness: 1px;
text-decoration-thickness: 1px;
text-underline-offset: .15em;
text-underline-offset: .15em;
-webkit-text-decoration-skip-ink: none;
-webkit-text-decoration-skip-ink: none;
text-decoration-skip-ink: none;
text-decoration-skip-ink: none;
font-weight: 600
font-weight: 600
}
}


.typography :where(strong) {
.typography :where(strong) {
font-weight: 600
font-weight: 600
}
}


.typography :where(code:not(pre code)) {
.typography :where(code:not(pre code)) {
font-size: calc(18 / 20 * 1em);
font-size: calc(18 / 20 * 1em);
font-weight: 600
font-weight: 600
}
}


.typography :where(code:not(pre code)):after, .typography :where(code:not(pre code)):before {
.typography :where(code:not(pre code)):after, .typography :where(code:not(pre code)):before {
content: "`"
content: "`"
}
}


.typography :where(h2 code,h3 code) {
.typography :where(h2 code,h3 code) {
font-weight: 700
font-weight: 700
}
}


.typography :where(figure) {
.typography :where(figure) {
margin-top: 8rem;
margin-top: 8rem;
margin-bottom: 8rem
margin-bottom: 8rem
}
}


.typography :where(.typography:first-child>:first-child), .typography :where(li>:first-child) {
.typography :where(.typography:first-child>:first-child), .typography :where(li>:first-child) {
margin-top: 0 !important
margin-top: 0 !important
}
}


.typography :where(.typography:last-child>:last-child), .typography :where(li>:last-child) {
.typography :where(.typography:last-child>:last-child), .typography :where(li>:last-child) {
margin-bottom: 0 !important
margin-bottom: 0 !important
}
}


.sr-only {
.sr-only {
position: absolute;
position: absolute;
width: 1px;
width: 1px;
height: 1px;
height: 1px;
padding: 0;
padding: 0;
margin: -1px;
margin: -1px;
overflow: hidden;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip: rect(0, 0, 0, 0);
white-space: nowrap;
white-space: nowrap;
border-width: 0
border-width: 0
}
}


.pointer-events-none {
.pointer-events-none {
pointer-events: none
pointer-events: none
}
}


.visible {
.visible {
visibility: visible
visibility: visible
}
}


.absolute {
.absolute {
position: absolute
position: absolute
}
}


.relative {
.relative {
position: relative
position: relative
}
}


.inset-0 {
.inset-0 {
inset: 0
inset: 0
}
}


.inset-x-0 {
.inset-x-0 {
left: 0;
left: 0;
right: 0
right: 0
}
}


.inset-y-0 {
.inset-y-0 {
top: 0;
top: 0;
bottom: 0
bottom: 0
}
}


.inset-y-1 {
.inset-y-1 {
top: .25rem;
top: .25rem;
bottom: .25rem
bottom: .25rem
}
}


.-top-14 {
.-top-14 {
top: -3.5rem
top: -3.5rem
}
}


.left-0 {
.left-0 {
left: 0
left: 0
}
}


.left-6 {
.left-6 {
left: 1.5rem
left: 1.5rem
}
}


.right-0 {
.right-0 {
right: 0
right: 0
}
}


.right-1 {
.right-1 {
right: .25rem
right: .25rem
}
}


.top-0 {
.top-0 {
top: 0
top: 0
}
}


.top-1\/2 {
.top-1\/2 {
top: 50%
top: 50%
}
}


.top-2 {
.top-2 {
top: .5rem
top: .5rem
}
}


.top-px {
.top-px {
top: 1px
top: 1px
}
}


.isolate {
.isolate {
isolation: isolate
isolation: isolate
}
}


.-z-10 {
.-z-10 {
z-index: -10
z-index: -10
}
}


.z-0 {
.z-0 {
z-index: 0
z-index: 0
}
}


.z-40 {
.z-40 {
z-index: 40
z-index: 40
}
}


.z-50 {
.z-50 {
z-index: 50
z-index: 50
}
}


.order-first {
.order-first {
order: -9999
order: -9999
}
}


.col-span-2 {
.col-span-2 {
grid-column: span 2/span 2
grid-column: span 2/span 2
}
}


.col-span-full {
.col-span-full {
grid-column: 1/-1
grid-column: 1/-1
}
}


.col-start-1 {
.col-start-1 {
grid-column-start: 1
grid-column-start: 1
}
}


.row-start-2 {
.row-start-2 {
grid-row-start: 2
grid-row-start: 2
}
}


.-m-2 {
.-m-2 {
margin: -.5rem
margin: -.5rem
}
}


.-m-2\.5 {
.-m-2\.5 {
margin: -.625rem
margin: -.625rem
}
}


.-mx-6 {
.-mx-6 {
margin-left: -1.5rem;
margin-left: -1.5rem;
margin-right: -1.5rem
margin-right: -1.5rem
}
}


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


.mx-auto {
.mx-auto {
margin-left: auto;
margin-left: auto;
margin-right: auto
margin-right: auto
}
}


.my-10 {
margin-top: 2.5rem;
margin-bottom: 2.5rem
}

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

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

.-mt-3 {
.-mt-3 {
margin-top: -.75rem
margin-top: -.75rem
}
}


.mb-20 {
margin-bottom: 5rem
}

.mb-6 {
margin-bottom: 1.5rem
}

.mt-1 {
.mt-1 {
margin-top: .25rem
margin-top: .25rem
}
}


.mt-10 {
margin-top: 2.5rem
}

.mt-12 {
margin-top: 3rem
}

.mt-16 {
margin-top: 4rem
}

.mt-2 {
.mt-2 {
margin-top: .5rem
margin-top: .5rem
}
}


.mt-2\.5 {
.mt-2\.5 {
margin-top: .625rem
margin-top: .625rem
}

.mt-24 {
margin-top: 6rem
}
}


.mt-4 {
.mt-4 {
margin-top: 1rem
margin-top: 1rem
}

.mt-40 {
margin-top: 10rem
}

.mt-6 {
margin-top: 1.5rem
}

.mt-8 {
margin-top: 2rem
}
}


.mt-px {
.mt-px {
margin-top: 1px
margin-top: 1px
}
}


.block {
.block {
display: block
display: block
}
}


.flex {
.flex {
display: flex
display: flex
}
}


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


.table {
.table {
display: table
display: table
}
}


.grid {
.grid {
display: grid
display: grid
}
}


.hidden {
.hidden {
display: none
display: none
}
}


.aspect-\[16\/10\] {
.aspect-\[16\/10\] {
aspect-ratio: 16/10
aspect-ratio: 16/10
}
}


.aspect-\[719\/680\] {
.aspect-\[719\/680\] {
aspect-ratio: 719/680
aspect-ratio: 719/680
}
}


.aspect-square {
.aspect-square {
aspect-ratio: 1/1
aspect-ratio: 1/1
}
}


.h-12 {
.h-12 {
height: 3rem
height: 3rem
}
}


.h-16 {
.h-16 {
height: 4rem
height: 4rem
}
}


.h-6 {
.h-6 {
height: 1.5rem
height: 1.5rem
}
}


.h-8 {
.h-8 {
height: 2rem
height: 2rem
}
}


.h-96 {
.h-96 {
height: 24rem
height: 24rem
}
}


.h-\[1000px\] {
.h-\[1000px\] {
height: 1000px
height: 1000px
}
}


.h-\[884px\] {
.h-\[884px\] {
height: 884px
height: 884px
}
}


.h-full {
.h-full {
height: 100%
height: 100%
}
}


.h-px {
.h-px {
height: 1px
height: 1px
}
}


.min-h-full {
.min-h-full {
min-height: 100%
min-height: 100%
}
}


.w-0 {
.w-0 {
width: 0
width: 0
}
}


.w-12 {
.w-12 {
width: 3rem
width: 3rem
}
}


.w-16 {
.w-16 {
width: 4rem
width: 4rem
}
}


.w-4 {
.w-4 {
width: 1rem
width: 1rem
}
}


.w-6 {
.w-6 {
width: 1.5rem
width: 1.5rem
}
}


.w-8 {
.w-8 {
width: 2rem
width: 2rem
}
}


.w-\[33\.75rem\] {
.w-\[33\.75rem\] {
width: 33.75rem
width: 33.75rem
}
}


.w-full {
.w-full {
width: 100%
width: 100%
}
}


.w-screen {
.w-screen {
width: 100vw
width: 100vw
}
}


.\!max-w-none {
.\!max-w-none {
max-width: none !important
max-width: none !important
}
}


.max-w-2xl {
.max-w-2xl {
max-width: 42rem
max-width: 42rem
}
}


.max-w-3xl {
.max-w-3xl {
max-width: 48rem
max-width: 48rem
}
}


.max-w-4xl {
.max-w-4xl {
max-width: 56rem
max-width: 56rem
}
}


.max-w-5xl {
.max-w-5xl {
max-width: 64rem
max-width: 64rem
}
}


.max-w-7xl {
.max-w-7xl {
max-width: 80rem
max-width: 80rem
}
}


.max-w-\[76rem\] {
.max-w-\[76rem\] {
max-width: 76rem
max-width: 76rem
}
}


.max-w-sm {
.max-w-sm {
max-width: 24rem
max-width: 24rem
}
}


.max-w-xl {
.max-w-xl {
max-width: 36rem
max-width: 36rem
}
}


.flex-auto {
.flex-auto {
flex: 1 1 auto
flex: 1 1 auto
}
}


.flex-none {
.flex-none {
flex: none
flex: none
}
}


.origin-center {
.origin-center {
transform-origin: center
transform-origin: center
}
}


.origin-left {
.origin-left {
transform-origin: left
transform-origin: left
}
}


.scale-100 {
.scale-100 {
--tw-scale-x: 1;
--tw-scale-x: 1;
--tw-scale-y: 1
--tw-scale-y: 1
}
}


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


.appearance-none {
.appearance-none {
-webkit-appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
-moz-appearance: none;
appearance: none
appearance: none
}
}


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


.grid-cols-2 {
.grid-cols-2 {
grid-template-columns:repeat(2, minmax(0, 1fr))
grid-template-columns:repeat(2, minmax(0, 1fr))
}
}


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


.grid-cols-\[auto\2c 1fr\] {
.grid-cols-\[auto\2c 1fr\] {
grid-template-columns:auto 1fr
grid-template-columns:auto 1fr
}
}


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


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


.flex-wrap {
.flex-wrap {
flex-wrap: wrap
flex-wrap: wrap
}
}


.items-start {
.items-start {
align-items: flex-start
align-items: flex-start
}
}


.items-end {
.items-end {
align-items: flex-end
align-items: flex-end
}
}


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


.justify-end {
.justify-end {
justify-content: flex-end
justify-content: flex-end
}
}


.justify-center {
.justify-center {
justify-content: center
justify-content: center
}
}


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


.gap-10 {
gap: 2.5rem
}

.gap-4 {
.gap-4 {
gap: 1rem
gap: 1rem
}

.gap-6 {
gap: 1.5rem
}

.gap-8 {
gap: 2rem
}

.gap-x-10 {
-moz-column-gap: 2.5rem;
column-gap: 2.5rem
}
}


.gap-x-2 {
.gap-x-2 {
-moz-column-gap: .5rem;
-moz-column-gap: .5rem;
column-gap: .5rem
column-gap: .5rem
}
}


.gap-x-3 {
.gap-x-3 {
-moz-column-gap: .75rem;
-moz-column-gap: .75rem;
column-gap: .75rem
column-gap: .75rem
}
}


.gap-x-4 {
.gap-x-4 {
-moz-column-gap: 1rem;
-moz-column-gap: 1rem;
column-gap: 1rem
column-gap: 1rem
}
}


.gap-x-6 {
-moz-column-gap: 1.5rem;
column-gap: 1.5rem
}

.gap-x-8 {
-moz-column-gap: 2rem;
column-gap: 2rem
}

.gap-y-10 {
row-gap: 2.5rem
}

.gap-y-12 {
row-gap: 3rem
}

.gap-y-16 {
row-gap: 4rem
}

.gap-y-24 {
row-gap: 6rem
}

.gap-y-4 {
.gap-y-4 {
row-gap: 1rem
row-gap: 1rem
}
}


.gap-y-8 {
row-gap: 2rem
}

.-space-y-px > :not([hidden]) ~ :not([hidden]) {
.-space-y-px > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
--tw-space-y-reverse: 0;
margin-top: calc(-1px * calc(1 - var(--tw-space-y-reverse)));
margin-top: calc(-1px * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(-1px * var(--tw-space-y-reverse))
margin-bottom: calc(-1px * var(--tw-space-y-reverse))
}

.space-y-20 > :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))
}

.space-y-24 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(6rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(6rem * var(--tw-space-y-reverse))
}

.space-y-6 > :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))
}
}


.overflow-hidden {
.overflow-hidden {
overflow: hidden
overflow: hidden
}
}


.overflow-visible {
.overflow-visible {
overflow: visible
overflow: visible
}
}


.rounded-2xl {
.rounded-2xl {
border-radius: 1rem
border-radius: 1rem
}
}


.rounded-3xl {
.rounded-3xl {
border-radius: 1.5rem
border-radius: 1.5rem
}
}


.rounded-4xl {
.rounded-4xl {
border-radius: 2.5rem
border-radius: 2.5rem
}
}


.rounded-full {
.rounded-full {
border-radius: 9999px
border-radius: 9999px
}
}


.rounded-xl {
.rounded-xl {
border-radius: .75rem
border-radius: .75rem
}
}


.rounded-t-4xl {
.rounded-t-4xl {
border-top-left-radius: 2.5rem;
border-top-left-radius: 2.5rem;
border-top-right-radius: 2.5rem
border-top-right-radius: 2.5rem
}
}


.border {
.border {
border-width: 1px
border-width: 1px
}
}


.border-y {
.border-y {
border-top-width: 1px;
border-top-width: 1px;
border-bottom-width: 1px
border-bottom-width: 1px
}
}


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


.border-neutral-200 {
.border-neutral-200 {
--tw-border-opacity: 1;
--tw-border-opacity: 1;
border-color: rgb(229 229 229/var(--tw-border-opacity))
border-color: rgb(229 229 229/var(--tw-border-opacity))
}
}


.border-neutral-300 {
.border-neutral-300 {
--tw-border-opacity: 1;
--tw-border-opacity: 1;
border-color: rgb(212 212 212/var(--tw-border-opacity))
border-color: rgb(212 212 212/var(--tw-border-opacity))
}
}


.border-neutral-950\/10 {
.border-neutral-950\/10 {
border-color: hsla(0, 0%, 4%, .1)
border-color: hsla(0, 0%, 4%, .1)
}
}


.border-neutral-950\/20 {
.border-neutral-950\/20 {
border-color: hsla(0, 0%, 4%, .2)
border-color: hsla(0, 0%, 4%, .2)
}
}


.border-white\/10 {
.border-white\/10 {
border-color: hsla(0, 0%, 100%, .1)
border-color: hsla(0, 0%, 100%, .1)
}
}


.bg-neutral-100 {
.bg-neutral-100 {
--tw-bg-opacity: 1;
--tw-bg-opacity: 1;
background-color: rgb(245 245 245/var(--tw-bg-opacity))
background-color: rgb(245 245 245/var(--tw-bg-opacity))
}
}


.bg-neutral-200 {
.bg-neutral-200 {
--tw-bg-opacity: 1;
--tw-bg-opacity: 1;
background-color: rgb(229 229 229/var(--tw-bg-opacity))
background-color: rgb(229 229 229/var(--tw-bg-opacity))
}
}


.bg-neutral-50 {
.bg-neutral-50 {
--tw-bg-opacity: 1;
--tw-bg-opacity: 1;
background-color: rgb(250 250 250/var(--tw-bg-opacity))
background-color: rgb(250 250 250/var(--tw-bg-opacity))
}
}


.bg-neutral-800 {
.bg-neutral-800 {
--tw-bg-opacity: 1;
--tw-bg-opacity: 1;