/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */ @layer properties; @layer theme, base, components, utilities; @layer theme { :root, :host { --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; --color-red-800: oklch(44.4% 0.177 26.899); --color-green-400: oklch(79.2% 0.209 151.711); --color-teal-300: oklch(85.5% 0.138 181.071); --color-blue-400: oklch(70.7% 0.165 254.624); --color-gray-50: oklch(98.5% 0.0 247.839); --color-gray-100: oklch(96.7% 0.0 264.542); --color-gray-200: oklch(92.8% 0.0 264.531); --color-gray-300: oklch(87.2% 0.0 258.338); --color-gray-400: oklch(70.7% 0.0 261.325); --color-gray-500: oklch(55.1% 0.0 264.364); --color-gray-600: oklch(44.6% 0.0 256.802); --color-gray-700: oklch(37.3% 0.0 259.733); --color-gray-800: oklch(27.8% 0.0 256.848); --color-gray-900: oklch(21% 0.0 264.665); --color-gray-950: oklch(13% 0.0 261.692); --color-black: #000; --spacing: 0.25rem; --container-xs: 20rem; --container-sm: 24rem; --container-md: 28rem; --container-lg: 32rem; --container-xl: 36rem; --text-sm: 0.875rem; --text-sm--line-height: calc(1.25 / 0.875); --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-3xl: 1.875rem; --text-3xl--line-height: calc(2.25 / 1.875); --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --text-5xl: 3rem; --text-5xl--line-height: 1; --text-6xl: 3.75rem; --text-6xl--line-height: 1; --font-weight-light: 300; --font-weight-bold: 700; --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-xl: 0.75rem; --aspect-video: 16 / 9; --default-transition-duration: 150ms; --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); } } @layer base { *, ::after, ::before, ::backdrop, ::file-selector-button { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; } html, :host { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'); font-feature-settings: var(--default-font-feature-settings, normal); font-variation-settings: var(--default-font-variation-settings, normal); -webkit-tap-highlight-color: transparent; } 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; -webkit-text-decoration: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace); font-feature-settings: var(--default-mono-font-feature-settings, normal); font-variation-settings: var(--default-mono-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: -0.25em; } sup { top: -0.5em; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } :-moz-focusring { outline: auto; } progress { vertical-align: baseline; } summary { display: list-item; } ol, ul, menu { list-style: none; } img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; } img, video { max-width: 100%; height: auto; } button, input, select, optgroup, textarea, ::file-selector-button { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; border-radius: 0; background-color: transparent; opacity: 1; } :where(select:is([multiple], [size])) optgroup { font-weight: bolder; } :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; } ::file-selector-button { margin-inline-end: 4px; } ::placeholder { opacity: 1; } @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { ::placeholder { color: currentcolor; @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, currentcolor 50%, transparent); } } } textarea { resize: vertical; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; } ::-webkit-datetime-edit { display: inline-flex; } ::-webkit-datetime-edit-fields-wrapper { padding: 0; } ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { padding-block: 0; } :-moz-ui-invalid { box-shadow: none; } button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button { appearance: button; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } [hidden]:where(:not([hidden='until-found'])) { display: none !important; } } @layer utilities { .collapse { visibility: collapse; } .visible { visibility: visible; } .static { position: static; } .top-3 { top: calc(var(--spacing) * 3); } .left-3 { left: calc(var(--spacing) * 3); } .block { display: block; } .contents { display: contents; } .flex { display: flex; } .hidden { display: none; } .inline { display: inline; } .table { display: table; } .table-row { display: table-row; } .aspect-video { aspect-ratio: var(--aspect-video); } .size-12 { width: calc(var(--spacing) * 12); height: calc(var(--spacing) * 12); } .h-10 { height: calc(var(--spacing) * 10); } .h-15 { height: calc(var(--spacing) * 15); } .max-h-10 { max-height: calc(var(--spacing) * 10); } .max-h-15\! { max-height: calc(var(--spacing) * 15) !important; } .min-h-screen { min-height: 100vh; } .w-fit { width: fit-content; } .w-full { width: 100%; } .min-w-md { min-width: var(--container-md); } .flex-1 { flex: 1; } .shrink-0 { flex-shrink: 0; } .transform { transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } .justify-evenly { justify-content: space-evenly; } .gap-0\! { gap: calc(var(--spacing) * 0) !important; } .gap-4 { gap: calc(var(--spacing) * 4); } .gap-5 { gap: calc(var(--spacing) * 5); } .gap-8 { gap: calc(var(--spacing) * 8); } .gap-10 { gap: calc(var(--spacing) * 10); } .rounded-full { border-radius: calc(infinity * 1px); } .rounded-md { border-radius: var(--radius-md); } .rounded-xl { border-radius: var(--radius-xl); } .table-row { :is(& > *) { border-style: var(--tw-border-style); border-width: 2px; } :is(& > *) { border-color: var(--color-black); } :is(& > *) { padding: calc(var(--spacing) * 1); } &:hover { @media (hover: hover) { background-color: var(--color-gray-100); } } &:hover { @media (hover: hover) { color: var(--color-gray-950); } } } .border-1 { border-style: var(--tw-border-style); border-width: 1px; } .border-2 { border-style: var(--tw-border-style); border-width: 2px; } .table-header { background-color: var(--color-gray-950); color: var(--color-gray-50); :is(& > *) { border-inline-style: var(--tw-border-style); border-inline-width: 1px; } :is(& > *) { border-color: var(--color-black); } } .border-b-1 { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } .border-gray-300 { border-color: var(--color-gray-300); } .border-gray-500 { border-color: var(--color-gray-500); } .btn-alert { background-color: var(--color-red-800) !important; color: var(--color-gray-50) !important; } .btn-primary { background-color: var(--color-teal-300) !important; color: var(--color-gray-950) !important; } .bg-blue-400 { background-color: var(--color-blue-400); } .bg-gray-50 { background-color: var(--color-gray-50); } .bg-gray-100 { background-color: var(--color-gray-100); } .bg-gray-200 { background-color: var(--color-gray-200); } .bg-gray-300 { background-color: var(--color-gray-300); } .bg-gray-400 { background-color: var(--color-gray-400); } .bg-gray-400\! { background-color: var(--color-gray-400) !important; } .bg-gray-600 { background-color: var(--color-gray-600); } .bg-gray-800 { background-color: var(--color-gray-800); } .bg-gray-950\! { background-color: var(--color-gray-950) !important; } .bg-green-400\! { background-color: var(--color-green-400) !important; } .p-0 { padding: calc(var(--spacing) * 0); } .p-0\! { padding: calc(var(--spacing) * 0) !important; } .p-2\! { padding: calc(var(--spacing) * 2) !important; } .p-3 { padding: calc(var(--spacing) * 3); } .p-4 { padding: calc(var(--spacing) * 4); } .p-6 { padding: calc(var(--spacing) * 6); } .pt-4 { padding-top: calc(var(--spacing) * 4); } .pb-0\! { padding-bottom: calc(var(--spacing) * 0) !important; } .pb-3 { padding-bottom: calc(var(--spacing) * 3); } .pb-4 { padding-bottom: calc(var(--spacing) * 4); } .pb-5 { padding-bottom: calc(var(--spacing) * 5); } .pb-6 { padding-bottom: calc(var(--spacing) * 6); } .text-center { text-align: center; } .text-2xl { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } .text-3xl { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); } .text-sm { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } .text-xl\! { font-size: var(--text-xl) !important; line-height: var(--tw-leading, var(--text-xl--line-height)) !important; } .font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } .font-light { --tw-font-weight: var(--font-weight-light); font-weight: var(--font-weight-light); } .text-gray-50 { color: var(--color-gray-50); } .text-gray-950 { color: var(--color-gray-950); } .shadow-lg { --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .transition { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .\*\:text-nowrap { :is(& > *) { text-wrap: nowrap; } } .hover\:btn-alert { &:hover { @media (hover: hover) { background-color: var(--color-red-800) !important; color: var(--color-gray-50) !important; } } } .hover\:btn-hover { &:hover { @media (hover: hover) { background-color: var(--color-gray-900) !important; color: var(--color-gray-50) !important; } } } .hover\:bg-gray-950 { &:hover { @media (hover: hover) { background-color: var(--color-gray-950); } } } .dark\:bg-gray-300 { @media (prefers-color-scheme: dark) { background-color: var(--color-gray-300); } } .dark\:bg-gray-800 { @media (prefers-color-scheme: dark) { background-color: var(--color-gray-800); } } .dark\:bg-gray-900 { @media (prefers-color-scheme: dark) { background-color: var(--color-gray-900); } } .dark\:text-gray-50 { @media (prefers-color-scheme: dark) { color: var(--color-gray-50); } } } @layer theme; body { color: var(--color-gray-950); @media (prefers-color-scheme: dark) { color: var(--color-gray-50); } } header { display: flex; background-color: var(--color-gray-950); padding: calc(var(--spacing) * 6); :is(& > *) { flex: 1; } :is(& > *) { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } :is(& > *) { color: var(--color-gray-50); } } footer { display: flex; background-color: var(--color-gray-950); padding: calc(var(--spacing) * 6); font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); color: var(--color-gray-50); } h1 { padding-bottom: calc(var(--spacing) * 4); font-size: var(--text-6xl); line-height: var(--tw-leading, var(--text-6xl--line-height)); } h2 { padding-bottom: calc(var(--spacing) * 4); font-size: var(--text-5xl); line-height: var(--tw-leading, var(--text-5xl--line-height)); } h3 { padding-bottom: calc(var(--spacing) * 4); font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); } h4 { padding-bottom: calc(var(--spacing) * 4); font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); } h5 { padding-bottom: calc(var(--spacing) * 4); font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } card { display: flex; max-width: var(--container-md); flex-direction: column; border-radius: var(--radius-xl); background-color: var(--color-gray-800); --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); outline-style: var(--tw-outline-style); outline-width: 1px; } card > top { text-align: center; font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); color: var(--color-gray-50); } card > bottom { display: flex; justify-content: stretch; gap: calc(var(--spacing) * 2); padding: calc(var(--spacing) * 3); color: var(--color-gray-50); :is(& > *) { flex: 1; } } card > middle { display: flex; flex-direction: column; gap: calc(var(--spacing) * 4); background-color: var(--color-gray-800); padding: calc(var(--spacing) * 6); font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } label { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); color: var(--color-gray-100); } input { border-radius: var(--radius-sm); background-color: var(--color-gray-200); padding: calc(var(--spacing) * 1); color: var(--color-gray-950); --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); outline-style: var(--tw-outline-style); outline-width: 1px; @media (prefers-color-scheme: dark) { color: var(--color-gray-950); } } input::placeholder { color: var(--color-gray-700); @media (prefers-color-scheme: dark) { color: var(--color-gray-700); } } button { border-radius: var(--radius-sm); background-color: var(--color-gray-600); padding: calc(var(--spacing) * 3); color: var(--color-gray-50); --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); @media (prefers-color-scheme: dark) { background-color: var(--color-gray-300); } @media (prefers-color-scheme: dark) { color: var(--color-gray-950); } } shape { display: flex; aspect-ratio: 1 / 1; flex-direction: column; align-items: center; justify-content: center; background-color: var(--color-gray-300); padding: calc(var(--spacing) * 1); color: var(--color-gray-950); } shape.tiny { width: calc(var(--spacing) * 15); max-width: calc(var(--spacing) * 15); min-width: calc(var(--spacing) * 15); padding: calc(var(--spacing) * 0); } shape.xxs { width: calc(var(--spacing) * 30); max-width: calc(var(--spacing) * 30); min-width: calc(var(--spacing) * 30); padding: calc(var(--spacing) * 0); } shape.xs { width: var(--container-xs); max-width: var(--container-xs); min-width: var(--container-xs); } shape.sm { width: var(--container-sm); max-width: var(--container-sm); min-width: var(--container-sm); } shape.md { width: var(--container-md); max-width: var(--container-md); min-width: var(--container-md); } shape.lg { width: var(--container-lg); max-width: var(--container-lg); min-width: var(--container-lg); } shape.xl { width: var(--container-xl); max-width: var(--container-xl); min-width: var(--container-xl); } shape.video { aspect-ratio: var(--aspect-video); width: 100%; } block { display: flex; flex-direction: column; gap: calc(var(--spacing) * 4); padding-top: calc(var(--spacing) * 4); padding-right: calc(var(--spacing) * 4); padding-bottom: calc(var(--spacing) * 10); padding-left: calc(var(--spacing) * 4); } bar { display: flex; flex-direction: row; gap: calc(var(--spacing) * 4); padding: calc(var(--spacing) * 4); } stack { color: hsl(0, 0%, calc(var(--text) * var(--value-scale))); display: grid; grid-template-rows: 1fr; grid-template-columns: 1fr; grid-template-areas: "cover"; } stack > * { color: hsl(0, 0%, calc(var(--text) * var(--value-scale))); width: 100%; height: 100%; position: relative; grid-area: cover; } stack > .top { z-index: 10; } grid { display: grid; gap: calc(var(--spacing) * 2); padding: calc(var(--spacing) * 4); } hr { visibility: hidden; } table { border-radius: var(--radius-sm); background-color: var(--color-gray-200); --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); @media (prefers-color-scheme: dark) { background-color: var(--color-gray-800); } } @property --tw-rotate-x { syntax: "*"; inherits: false; } @property --tw-rotate-y { syntax: "*"; inherits: false; } @property --tw-rotate-z { syntax: "*"; inherits: false; } @property --tw-skew-x { syntax: "*"; inherits: false; } @property --tw-skew-y { syntax: "*"; inherits: false; } @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-font-weight { syntax: "*"; inherits: false; } @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-shadow-color { syntax: "*"; inherits: false; } @property --tw-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-shadow-color { syntax: "*"; inherits: false; } @property --tw-inset-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-ring-color { syntax: "*"; inherits: false; } @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-ring-color { syntax: "*"; inherits: false; } @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-ring-inset { syntax: "*"; inherits: false; } @property --tw-ring-offset-width { syntax: ""; inherits: false; initial-value: 0px; } @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; } @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; } @layer properties { @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { *, ::before, ::after, ::backdrop { --tw-rotate-x: initial; --tw-rotate-y: initial; --tw-rotate-z: initial; --tw-skew-x: initial; --tw-skew-y: initial; --tw-border-style: solid; --tw-font-weight: initial; --tw-shadow: 0 0 #0000; --tw-shadow-color: initial; --tw-shadow-alpha: 100%; --tw-inset-shadow: 0 0 #0000; --tw-inset-shadow-color: initial; --tw-inset-shadow-alpha: 100%; --tw-ring-color: initial; --tw-ring-shadow: 0 0 #0000; --tw-inset-ring-color: initial; --tw-inset-ring-shadow: 0 0 #0000; --tw-ring-inset: initial; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-outline-style: solid; } } }