Mirroristas/pockethost
2
0
Fork 0
mirror of https://github.com/pockethost/pockethost.git synced 2025-06-10 16:16:43 +00:00
Code Issues Packages Projects Releases Wiki Activity
pockethost/dist/lander/blog/0.2.0/index.html
Brewhouse Digital 97d5d57231
Marketing - Added Pricing Page (#328)
2023-11-03 13:24:04 -07:00

3657 lines
98 KiB
HTML
Raw Blame History

<!doctype html>
<html class='scroll-smooth' lang="en" data-theme="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- HTML Meta Tags -->
<title>PocketHost 0.2.0 - PocketHost</title>
<meta name="description" content="PocketHost 0.2.0 has been released, featuring fully Dockerized services and advanced scaling using a dynamic proxy. Experience smooth project launches plus added server power, and future possibilities with fly.io integration. The update promises more accessible back-ends and powerful BaaS with the coming PBScript release and pockethost integration.
">
<!-- Facebook Meta Tags -->
<meta property="og:url" content="https://pockethost.io/blog/0.2.0/">
<meta property="og:type" content="website">
<meta property="og:title" content="PocketHost 0.2.0 - PocketHost">
<meta property="og:description" content="PocketHost 0.2.0 has been released, featuring fully Dockerized services and advanced scaling using a dynamic proxy. Experience smooth project launches plus added server power, and future possibilities with fly.io integration. The update promises more accessible back-ends and powerful BaaS with the coming PBScript release and pockethost integration.
">
<meta property="og:image" content="https://pockethost.io/poster.png">
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="">
<meta property="twitter:url" content="https://pockethost.io/blog/0.2.0/">
<meta name="twitter:title" content="PocketHost 0.2.0 - PocketHost">
<meta name="twitter:description" content="PocketHost 0.2.0 has been released, featuring fully Dockerized services and advanced scaling using a dynamic proxy. Experience smooth project launches plus added server power, and future possibilities with fly.io integration. The update promises more accessible back-ends and powerful BaaS with the coming PBScript release and pockethost integration.
">
<meta name="twitter:image" content="https://pockethost.io/poster.png">
<!-- Meta Tags Generated via https://www.opengraph.xyz -->
<meta name="generator" content="Eleventy v2.0.1">
<link rel="alternate" href="/feed/feed.xml" type="application/atom+xml" title="PocketHost">
<link rel="alternate" href="/feed/feed.json" type="application/json" title="PocketHost">
<link href="https://unpkg.com/prismjs@1.20.0/themes/prism-okaidia.css" rel="stylesheet">
<link href="/icons/fontawesome.min.css" rel="stylesheet">
<link href="/icons/all.min.css" rel="stylesheet">
<link href="/icons/brands.min.css" rel="stylesheet">
<style>
/*
! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
box-sizing: border-box; /* 1 */
border-width: 0; /* 2 */
border-style: solid; /* 2 */
border-color: #e5e7eb; /* 2 */
}
::before,
::after {
--tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
*/
html {
line-height: 1.5; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-moz-tab-size: 4; /* 3 */
-o-tab-size: 4;
tab-size: 4; /* 3 */
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
font-feature-settings: normal; /* 5 */
font-variation-settings: normal; /* 6 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
margin: 0; /* 1 */
line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
height: 0; /* 1 */
color: inherit; /* 2 */
border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
color: inherit;
text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
font-weight: bolder;
}
/*
1. Use the user's configured `mono` font family by default.
2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
font-size: 1em; /* 2 */
}
/*
Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
text-indent: 0; /* 1 */
border-color: inherit; /* 2 */
border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-feature-settings: inherit; /* 1 */
font-variation-settings: inherit; /* 1 */
font-size: 100%; /* 1 */
font-weight: inherit; /* 1 */
line-height: inherit; /* 1 */
color: inherit; /* 1 */
margin: 0; /* 2 */
padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button; /* 1 */
background-color: transparent; /* 2 */
background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
margin: 0;
}
fieldset {
margin: 0;
padding: 0;
}
legend {
padding: 0;
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
opacity: 1; /* 1 */
color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
opacity: 1; /* 1 */
color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block; /* 1 */
vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
max-width: 100%;
height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden] {
display: none;
}
:root,
[data-theme] {
background-color: hsl(var(--b1) / var(--tw-bg-opacity, 1));
color: hsl(var(--bc) / var(--tw-text-opacity, 1));
}
html {
-webkit-tap-highlight-color: transparent;
}
:root {
color-scheme: dark;
--pf: 141 72% 35%;
--sf: 164 73% 35%;
--af: 175 70% 34%;
--in: 198 93% 60%;
--su: 158 64% 52%;
--wa: 43 96% 56%;
--er: 0 91% 71%;
--inc: 198 100% 12%;
--suc: 158 100% 10%;
--wac: 43 100% 11%;
--erc: 0 100% 14%;
--rounded-box: 1rem;
--rounded-btn: 0.5rem;
--rounded-badge: 1.9rem;
--animation-btn: 0.25s;
--animation-input: .2s;
--btn-text-case: uppercase;
--btn-focus-scale: 0.95;
--border-btn: 1px;
--tab-border: 1px;
--tab-radius: 0.5rem;
--p: 141 72% 42%;
--pc: 0 0% 100%;
--s: 164 73% 42%;
--sc: 0 0% 100%;
--a: 175 70% 41%;
--ac: 0 0% 100%;
--n: 213 18% 20%;
--nf: 212 17% 17%;
--nc: 220 13% 69%;
--b1: 212 18% 14%;
--b2: 213 18% 12%;
--b3: 213 18% 10%;
--bc: 0 0% 100%;
}
[data-theme=dark] {
color-scheme: dark;
--pf: 141 72% 35%;
--sf: 164 73% 35%;
--af: 175 70% 34%;
--in: 198 93% 60%;
--su: 158 64% 52%;
--wa: 43 96% 56%;
--er: 0 91% 71%;
--inc: 198 100% 12%;
--suc: 158 100% 10%;
--wac: 43 100% 11%;
--erc: 0 100% 14%;
--rounded-box: 1rem;
--rounded-btn: 0.5rem;
--rounded-badge: 1.9rem;
--animation-btn: 0.25s;
--animation-input: .2s;
--btn-text-case: uppercase;
--btn-focus-scale: 0.95;
--border-btn: 1px;
--tab-border: 1px;
--tab-radius: 0.5rem;
--p: 141 72% 42%;
--pc: 0 0% 100%;
--s: 164 73% 42%;
--sc: 0 0% 100%;
--a: 175 70% 41%;
--ac: 0 0% 100%;
--n: 213 18% 20%;
--nf: 212 17% 17%;
--nc: 220 13% 69%;
--b1: 212 18% 14%;
--b2: 213 18% 12%;
--b3: 213 18% 10%;
--bc: 0 0% 100%;
}
*, ::before, ::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
.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-left: 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-left: 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-left-width: 0.25rem;
border-left-color: var(--tw-prose-quote-borders);
quotes: "\201C""\201D""\2018""\2019";
margin-top: 1.6em;
margin-bottom: 1.6em;
padding-left: 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: 0.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: 0.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: 0.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(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 0 rgb(var(--tw-prose-kbd-shadows) / 10%);
font-size: 0.875em;
border-radius: 0.3125rem;
padding-top: 0.1875em;
padding-right: 0.375em;
padding-bottom: 0.1875em;
padding-left: 0.375em;
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-code);
font-weight: 600;
font-size: 0.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: 0.875em;
}
.prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
font-size: 0.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: 0.875em;
line-height: 1.7142857;
margin-top: 1.7142857em;
margin-bottom: 1.7142857em;
border-radius: 0.375rem;
padding-top: 0.8571429em;
padding-right: 1.1428571em;
padding-bottom: 0.8571429em;
padding-left: 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;
text-align: left;
margin-top: 2em;
margin-bottom: 2em;
font-size: 0.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-right: 0.5714286em;
padding-bottom: 0.5714286em;
padding-left: 0.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(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: 0.875em;
line-height: 1.4285714;
margin-top: 0.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(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 2em;
margin-bottom: 2em;
}
.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
padding-left: 0.375em;
}
.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
padding-left: 0.375em;
}
.prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0.75em;
margin-bottom: 0.75em;
}
.prose :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 1.25em;
}
.prose :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-bottom: 1.25em;
}
.prose :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 1.25em;
}
.prose :where(.prose > ol > li > *: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: 0.75em;
margin-bottom: 0.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: 0.5em;
padding-left: 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-left: 0;
}
.prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
padding-right: 0;
}
.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
padding-top: 0.5714286em;
padding-right: 0.5714286em;
padding-bottom: 0.5714286em;
padding-left: 0.5714286em;
}
.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
padding-left: 0;
}
.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
padding-right: 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;
}
.alert {
display: grid;
width: 100%;
grid-auto-flow: row;
align-content: flex-start;
align-items: center;
justify-items: center;
gap: 1rem;
text-align: center;
border-width: 1px;
--tw-border-opacity: 1;
border-color: hsl(var(--b2) / var(--tw-border-opacity));
padding: 1rem;
--tw-text-opacity: 1;
color: hsl(var(--bc) / var(--tw-text-opacity));
border-radius: var(--rounded-box, 1rem);
--alert-bg: hsl(var(--b2));
--alert-bg-mix: hsl(var(--b1));
background-color: var(--alert-bg);
}
@media (min-width: 640px) {
.alert {
grid-auto-flow: column;
grid-template-columns: auto minmax(auto,1fr);
justify-items: start;
text-align: left;
}
}
@media (hover:hover) {
.label a:hover {
--tw-text-opacity: 1;
color: hsl(var(--bc) / var(--tw-text-opacity));
}
.menu li > *:not(ul):not(.menu-title):not(details):active,
.menu li > *:not(ul):not(.menu-title):not(details).active,
.menu li > details > summary:active {
--tw-bg-opacity: 1;
background-color: hsl(var(--n) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--nc) / var(--tw-text-opacity));
}
.tab:hover {
--tw-text-opacity: 1;
}
.table tr.hover:hover,
.table tr.hover:nth-child(even):hover {
--tw-bg-opacity: 1;
background-color: hsl(var(--b2) / var(--tw-bg-opacity));
}
}
.btn {
display: inline-flex;
flex-shrink: 0;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
flex-wrap: wrap;
align-items: center;
justify-content: center;
border-color: transparent;
border-color: hsl(var(--b2) / var(--tw-border-opacity));
text-align: center;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
transition-duration: 200ms;
border-radius: var(--rounded-btn, 0.5rem);
height: 3rem;
padding-left: 1rem;
padding-right: 1rem;
min-height: 3rem;
font-size: 0.875rem;
line-height: 1em;
gap: 0.5rem;
font-weight: 600;
text-decoration-line: none;
border-width: var(--border-btn, 1px);
animation: button-pop var(--animation-btn, 0.25s) ease-out;
text-transform: var(--btn-text-case, uppercase);
--tw-border-opacity: 1;
--tw-bg-opacity: 1;
background-color: hsl(var(--b2) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--bc) / var(--tw-text-opacity));
outline-color: hsl(var(--bc) / 1);
}
.btn-disabled,
.btn[disabled],
.btn:disabled {
pointer-events: none;
}
.btn-square {
height: 3rem;
width: 3rem;
padding: 0px;
}
.btn-group > input[type="radio"].btn {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.btn-group > input[type="radio"].btn:before {
content: attr(data-title);
}
.btn:is(input[type="checkbox"]),
.btn:is(input[type="radio"]) {
width: auto;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.btn:is(input[type="checkbox"]):after,
.btn:is(input[type="radio"]):after {
--tw-content: attr(aria-label);
content: var(--tw-content);
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown > *:not(summary):focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.dropdown .dropdown-content {
position: absolute;
}
.dropdown:is(:not(details)) .dropdown-content {
visibility: hidden;
opacity: 0;
transform-origin: top;
--tw-scale-x: .95;
--tw-scale-y: .95;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
transition-duration: 200ms;
}
.dropdown-end .dropdown-content {
right: 0px;
}
.dropdown-left .dropdown-content {
bottom: auto;
right: 100%;
top: 0px;
transform-origin: right;
}
.dropdown-right .dropdown-content {
bottom: auto;
left: 100%;
top: 0px;
transform-origin: left;
}
.dropdown-bottom .dropdown-content {
bottom: auto;
top: 100%;
transform-origin: top;
}
.dropdown-top .dropdown-content {
bottom: 100%;
top: auto;
transform-origin: bottom;
}
.dropdown-end.dropdown-right .dropdown-content {
bottom: 0px;
top: auto;
}
.dropdown-end.dropdown-left .dropdown-content {
bottom: 0px;
top: auto;
}
.dropdown.dropdown-open .dropdown-content,
.dropdown:not(.dropdown-hover):focus .dropdown-content,
.dropdown:focus-within .dropdown-content {
visibility: visible;
opacity: 1;
}
@media (hover: hover) {
.dropdown.dropdown-hover:hover .dropdown-content {
visibility: visible;
opacity: 1;
}
.btn:hover {
--tw-border-opacity: 1;
border-color: hsl(var(--b3) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--b3) / var(--tw-bg-opacity));
}
.btn-primary:hover {
--tw-border-opacity: 1;
border-color: hsl(var(--pf) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--pf) / var(--tw-bg-opacity));
}
.btn.glass:hover {
--glass-opacity: 25%;
--glass-border-opacity: 15%;
}
.btn-ghost:hover {
--tw-border-opacity: 0;
background-color: hsl(var(--bc) / var(--tw-bg-opacity));
--tw-bg-opacity: 0.2;
}
.btn-outline:hover {
--tw-border-opacity: 1;
border-color: hsl(var(--bc) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--bc) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--b1) / var(--tw-text-opacity));
}
.btn-outline.btn-primary:hover {
--tw-border-opacity: 1;
border-color: hsl(var(--pf) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--pf) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--pc) / var(--tw-text-opacity));
}
.btn-outline.btn-secondary:hover {
--tw-border-opacity: 1;
border-color: hsl(var(--sf) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--sf) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--sc) / var(--tw-text-opacity));
}
.btn-outline.btn-accent:hover {
--tw-border-opacity: 1;
border-color: hsl(var(--af) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--af) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--ac) / var(--tw-text-opacity));
}
.btn-outline.btn-success:hover {
--tw-border-opacity: 1;
border-color: hsl(var(--su) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--su) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--suc) / var(--tw-text-opacity));
}
.btn-outline.btn-info:hover {
--tw-border-opacity: 1;
border-color: hsl(var(--in) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--in) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--inc) / var(--tw-text-opacity));
}
.btn-outline.btn-warning:hover {
--tw-border-opacity: 1;
border-color: hsl(var(--wa) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--wa) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--wac) / var(--tw-text-opacity));
}
.btn-outline.btn-error:hover {
--tw-border-opacity: 1;
border-color: hsl(var(--er) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--er) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--erc) / var(--tw-text-opacity));
}
.btn-disabled:hover,
.btn[disabled]:hover,
.btn:disabled:hover {
--tw-border-opacity: 0;
background-color: hsl(var(--n) / var(--tw-bg-opacity));
--tw-bg-opacity: 0.2;
color: hsl(var(--bc) / var(--tw-text-opacity));
--tw-text-opacity: 0.2;
}
.btn:is(input[type="checkbox"]:checked):hover, .btn:is(input[type="radio"]:checked):hover {
--tw-border-opacity: 1;
border-color: hsl(var(--pf) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--pf) / var(--tw-bg-opacity));
}
.dropdown.dropdown-hover:hover .dropdown-content {
--tw-scale-x: 1;
--tw-scale-y: 1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
:where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active):hover, :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active):hover {
cursor: pointer;
background-color: hsl(var(--bc) / 0.1);
--tw-text-opacity: 1;
color: hsl(var(--bc) / var(--tw-text-opacity));
outline: 2px solid transparent;
outline-offset: 2px;
}
.tab[disabled],
.tab[disabled]:hover {
cursor: not-allowed;
color: hsl(var(--bc) / var(--tw-text-opacity));
--tw-text-opacity: 0.2;
}
}
.dropdown:is(details) summary::-webkit-details-marker {
display: none;
}
.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: 0.875rem;
line-height: 1.25rem;
}
.footer > * {
display: grid;
place-items: start;
gap: 0.5rem;
}
@media (min-width: 48rem) {
.footer {
grid-auto-flow: column;
}
.footer-center {
grid-auto-flow: row dense;
}
}
.label {
display: flex;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
align-items: center;
justify-content: space-between;
padding-left: 0.25rem;
padding-right: 0.25rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.input {
flex-shrink: 1;
height: 3rem;
padding-left: 1rem;
padding-right: 1rem;
font-size: 1rem;
line-height: 2;
line-height: 1.5rem;
border-width: 1px;
border-color: hsl(var(--bc) / var(--tw-border-opacity));
--tw-border-opacity: 0;
--tw-bg-opacity: 1;
background-color: hsl(var(--b1) / var(--tw-bg-opacity));
border-radius: var(--rounded-btn, 0.5rem);
}
.input-group > .input {
isolation: isolate;
}
.input-group > *,
.input-group > .input,
.input-group > .textarea,
.input-group > .select {
border-radius: 0px;
}
.join {
display: inline-flex;
align-items: stretch;
border-radius: var(--rounded-btn, 0.5rem);
}
.join :where(.join-item) {
border-start-end-radius: 0;
border-end-end-radius: 0;
border-end-start-radius: 0;
border-start-start-radius: 0;
}
.join .join-item:not(:first-child):not(:last-child),
.join *:not(:first-child):not(:last-child) .join-item {
border-start-end-radius: 0;
border-end-end-radius: 0;
border-end-start-radius: 0;
border-start-start-radius: 0;
}
.join .join-item:first-child:not(:last-child),
.join *:first-child:not(:last-child) .join-item {
border-start-end-radius: 0;
border-end-end-radius: 0;
}
.join .dropdown .join-item:first-child:not(:last-child),
.join *:first-child:not(:last-child) .dropdown .join-item {
border-start-end-radius: inherit;
border-end-end-radius: inherit;
}
.join :where(.join-item:first-child:not(:last-child)),
.join :where(*:first-child:not(:last-child) .join-item) {
border-end-start-radius: inherit;
border-start-start-radius: inherit;
}
.join .join-item:last-child:not(:first-child),
.join *:last-child:not(:first-child) .join-item {
border-end-start-radius: 0;
border-start-start-radius: 0;
}
.join :where(.join-item:last-child:not(:first-child)),
.join :where(*:last-child:not(:first-child) .join-item) {
border-start-end-radius: inherit;
border-end-end-radius: inherit;
}
@supports not selector(:has(*)) {
:where(.join *) {
border-radius: inherit;
}
}
@supports selector(:has(*)) {
:where(.join *:has(.join-item)) {
border-radius: inherit;
}
}
.link {
cursor: pointer;
text-decoration-line: underline;
}
.menu {
display: flex;
flex-direction: column;
flex-wrap: wrap;
font-size: 0.875rem;
line-height: 1.25rem;
padding: 0.5rem;
}
.menu :where(li ul) {
position: relative;
white-space: nowrap;
margin-left: 1rem;
padding-left: 0.5rem;
}
.menu :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
.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: 0.5rem;
grid-auto-columns: minmax(auto, max-content) auto max-content;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.menu li.disabled {
cursor: not-allowed;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
color: hsl(var(--bc) / 0.3);
}
.menu :where(li > .menu-dropdown:not(.menu-dropdown-show)) {
display: none;
}
:where(.menu li) {
position: relative;
display: flex;
flex-shrink: 0;
flex-direction: column;
flex-wrap: wrap;
align-items: stretch;
}
:where(.menu li) .badge {
justify-self: end;
}
.progress {
position: relative;
width: 100%;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
overflow: hidden;
height: 0.5rem;
background-color: hsl(var(--bc) / 0.2);
border-radius: var(--rounded-box, 1rem);
}
.range {
height: 1.5rem;
width: 100%;
cursor: pointer;
-moz-appearance: none;
appearance: none;
-webkit-appearance: none;
--range-shdw: var(--bc);
overflow: hidden;
background-color: transparent;
border-radius: var(--rounded-box, 1rem);
}
.range:focus {
outline: none;
}
.select {
display: inline-flex;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 3rem;
padding-left: 1rem;
padding-right: 2.5rem;
font-size: 0.875rem;
line-height: 1.25rem;
line-height: 2;
min-height: 3rem;
border-width: 1px;
border-color: hsl(var(--bc) / var(--tw-border-opacity));
--tw-border-opacity: 0;
--tw-bg-opacity: 1;
background-color: hsl(var(--b1) / var(--tw-bg-opacity));
border-radius: var(--rounded-btn, 0.5rem);
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
linear-gradient(135deg, currentColor 50%, transparent 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;
}
.select[multiple] {
height: auto;
}
.stats {
display: inline-grid;
--tw-bg-opacity: 1;
background-color: hsl(var(--b1) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--bc) / var(--tw-text-opacity));
border-radius: var(--rounded-box, 1rem);
}
:where(.stats) {
grid-auto-flow: column;
overflow-x: auto;
}
.steps {
display: inline-grid;
grid-auto-flow: column;
overflow: hidden;
overflow-x: auto;
counter-reset: step;
grid-auto-columns: 1fr;
}
.steps .step {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
grid-template-columns: auto;
grid-template-rows: repeat(2, minmax(0, 1fr));
grid-template-rows: 40px 1fr;
place-items: center;
text-align: center;
min-width: 4rem;
}
.tab {
position: relative;
display: inline-flex;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
flex-wrap: wrap;
align-items: center;
justify-content: center;
text-align: center;
height: 2rem;
font-size: 0.875rem;
line-height: 1.25rem;
line-height: 2;
--tab-padding: 1rem;
--tw-text-opacity: 0.5;
--tab-color: hsl(var(--bc) / var(--tw-text-opacity, 1));
--tab-bg: hsl(var(--b1) / var(--tw-bg-opacity, 1));
--tab-border-color: hsl(var(--b3) / var(--tw-bg-opacity, 1));
color: var(--tab-color);
padding-left: var(--tab-padding, 1rem);
padding-right: var(--tab-padding, 1rem);
}
.table {
position: relative;
width: 100%;
text-align: left;
font-size: 0.875rem;
line-height: 1.25rem;
border-radius: var(--rounded-box, 1rem);
}
.table :where(.table-pin-rows thead tr) {
position: sticky;
top: 0px;
z-index: 1;
--tw-bg-opacity: 1;
background-color: hsl(var(--b1) / var(--tw-bg-opacity));
}
.table :where(.table-pin-rows tfoot tr) {
position: sticky;
bottom: 0px;
z-index: 1;
--tw-bg-opacity: 1;
background-color: hsl(var(--b1) / var(--tw-bg-opacity));
}
.table :where(.table-pin-cols tr th) {
position: sticky;
left: 0px;
right: 0px;
--tw-bg-opacity: 1;
background-color: hsl(var(--b1) / var(--tw-bg-opacity));
}
.toggle {
flex-shrink: 0;
--tglbg: hsl(var(--b1));
--handleoffset: 1.5rem;
--handleoffsetcalculator: calc(var(--handleoffset) * -1);
--togglehandleborder: 0 0;
height: 1.5rem;
width: 3rem;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-width: 1px;
border-color: hsl(var(--bc) / var(--tw-border-opacity));
--tw-border-opacity: 0.2;
background-color: hsl(var(--bc) / var(--tw-bg-opacity));
--tw-bg-opacity: 0.5;
border-radius: var(--rounded-badge, 1.9rem);
transition: background,
box-shadow var(--animation-input, 0.2s) ease-out;
box-shadow: var(--handleoffsetcalculator) 0 0 2px var(--tglbg) inset,
0 0 0 2px var(--tglbg) inset,
var(--togglehandleborder);
}
.btm-nav > *:where(.active) {
border-top-width: 2px;
--tw-bg-opacity: 1;
background-color: hsl(var(--b1) / var(--tw-bg-opacity));
}
.btm-nav > * .label {
font-size: 1rem;
line-height: 1.5rem;
}
.btn:active:hover,
.btn:active:focus {
animation: button-pop 0s ease-out;
transform: scale(var(--btn-focus-scale, 0.97));
}
.btn:focus-visible {
outline-style: solid;
outline-width: 2px;
outline-offset: 2px;
}
.btn-primary {
--tw-border-opacity: 1;
border-color: hsl(var(--p) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--p) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--pc) / var(--tw-text-opacity));
outline-color: hsl(var(--p) / 1);
}
.btn-primary.btn-active {
--tw-border-opacity: 1;
border-color: hsl(var(--pf) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--pf) / var(--tw-bg-opacity));
}
.btn.glass {
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
outline-color: currentColor;
}
.btn.glass.btn-active {
--glass-opacity: 25%;
--glass-border-opacity: 15%;
}
.btn-ghost {
border-width: 1px;
border-color: transparent;
background-color: transparent;
color: currentColor;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
outline-color: currentColor;
}
.btn-ghost.btn-active {
--tw-border-opacity: 0;
background-color: hsl(var(--bc) / var(--tw-bg-opacity));
--tw-bg-opacity: 0.2;
}
.btn-outline {
border-color: currentColor;
background-color: transparent;
--tw-text-opacity: 1;
color: hsl(var(--bc) / var(--tw-text-opacity));
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.btn-outline.btn-active {
--tw-border-opacity: 1;
border-color: hsl(var(--bc) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--bc) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--b1) / var(--tw-text-opacity));
}
.btn-outline.btn-primary {
--tw-text-opacity: 1;
color: hsl(var(--p) / var(--tw-text-opacity));
}
.btn-outline.btn-primary.btn-active {
--tw-border-opacity: 1;
border-color: hsl(var(--pf) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--pf) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--pc) / var(--tw-text-opacity));
}
.btn-outline.btn-secondary {
--tw-text-opacity: 1;
color: hsl(var(--s) / var(--tw-text-opacity));
}
.btn-outline.btn-secondary.btn-active {
--tw-border-opacity: 1;
border-color: hsl(var(--sf) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--sf) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--sc) / var(--tw-text-opacity));
}
.btn-outline.btn-accent {
--tw-text-opacity: 1;
color: hsl(var(--a) / var(--tw-text-opacity));
}
.btn-outline.btn-accent.btn-active {
--tw-border-opacity: 1;
border-color: hsl(var(--af) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--af) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--ac) / var(--tw-text-opacity));
}
.btn-outline.btn-success {
--tw-text-opacity: 1;
color: hsl(var(--su) / var(--tw-text-opacity));
}
.btn-outline.btn-success.btn-active {
--tw-border-opacity: 1;
border-color: hsl(var(--su) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--su) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--suc) / var(--tw-text-opacity));
}
.btn-outline.btn-info {
--tw-text-opacity: 1;
color: hsl(var(--in) / var(--tw-text-opacity));
}
.btn-outline.btn-info.btn-active {
--tw-border-opacity: 1;
border-color: hsl(var(--in) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--in) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--inc) / var(--tw-text-opacity));
}
.btn-outline.btn-warning {
--tw-text-opacity: 1;
color: hsl(var(--wa) / var(--tw-text-opacity));
}
.btn-outline.btn-warning.btn-active {
--tw-border-opacity: 1;
border-color: hsl(var(--wa) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--wa) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--wac) / var(--tw-text-opacity));
}
.btn-outline.btn-error {
--tw-text-opacity: 1;
color: hsl(var(--er) / var(--tw-text-opacity));
}
.btn-outline.btn-error.btn-active {
--tw-border-opacity: 1;
border-color: hsl(var(--er) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--er) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--erc) / var(--tw-text-opacity));
}
.btn.btn-disabled,
.btn[disabled],
.btn:disabled {
--tw-border-opacity: 0;
background-color: hsl(var(--n) / var(--tw-bg-opacity));
--tw-bg-opacity: 0.2;
color: hsl(var(--bc) / var(--tw-text-opacity));
--tw-text-opacity: 0.2;
}
.btn-group > input[type="radio"]:checked.btn,
.btn-group > .btn-active {
--tw-border-opacity: 1;
border-color: hsl(var(--p) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--p) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--pc) / var(--tw-text-opacity));
}
.btn-group > input[type="radio"]:checked.btn:focus-visible, .btn-group > .btn-active:focus-visible {
outline-style: solid;
outline-width: 2px;
outline-color: hsl(var(--p) / 1);
}
.btn:is(input[type="checkbox"]:checked),
.btn:is(input[type="radio"]:checked) {
--tw-border-opacity: 1;
border-color: hsl(var(--p) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--p) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--pc) / var(--tw-text-opacity));
}
.btn:is(input[type="checkbox"]:checked):focus-visible, .btn:is(input[type="radio"]:checked):focus-visible {
outline-color: hsl(var(--p) / 1);
}
@keyframes button-pop {
0% {
transform: scale(var(--btn-focus-scale, 0.98));
}
40% {
transform: scale(1.02);
}
100% {
transform: scale(1);
}
}
.card.compact .card-body {
padding: 1rem;
font-size: 0.875rem;
line-height: 1.25rem;
}
@keyframes checkmark {
0% {
background-position-y: 5px;
}
50% {
background-position-y: -2px;
}
100% {
background-position-y: 0;
}
}
.dropdown.dropdown-open .dropdown-content,
.dropdown:focus .dropdown-content,
.dropdown:focus-within .dropdown-content {
--tw-scale-x: 1;
--tw-scale-y: 1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.input input:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.input[list]::-webkit-calendar-picker-indicator {
line-height: 1em;
}
.input:focus,
.input:focus-within {
outline-style: solid;
outline-width: 2px;
outline-offset: 2px;
outline-color: hsl(var(--bc) / 0.2);
}
.input-disabled,
.input:disabled,
.input[disabled] {
cursor: not-allowed;
--tw-border-opacity: 1;
border-color: hsl(var(--b2) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--b2) / var(--tw-bg-opacity));
--tw-text-opacity: 0.2;
}
.input-disabled::-moz-placeholder, .input:disabled::-moz-placeholder, .input[disabled]::-moz-placeholder {
color: hsl(var(--bc) / var(--tw-placeholder-opacity));
--tw-placeholder-opacity: 0.2;
}
.input-disabled::placeholder,
.input:disabled::placeholder,
.input[disabled]::placeholder {
color: hsl(var(--bc) / var(--tw-placeholder-opacity));
--tw-placeholder-opacity: 0.2;
}
.join > :where(*:not(:first-child)) {
margin-top: 0px;
margin-bottom: 0px;
margin-left: -1px;
}
.link:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.link:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
:where(.menu li:empty) {
background-color: hsl(var(--bc) / 0.1);
margin: 0.5rem 1rem;
height: 1px;
}
.menu :where(li ul):before {
position: absolute;
bottom: 0.75rem;
left: 0px;
top: 0.75rem;
width: 1px;
background-color: hsl(var(--bc) / 0.1);
content: "";
}
.menu :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
.menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
text-align: left;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
transition-duration: 200ms;
border-radius: var(--rounded-btn, 0.5rem);
text-wrap: balance;
}
:where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(summary):not(.active).focus,
:where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(summary):not(.active):focus,
:where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):is(summary):not(.active):focus-visible,
:where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(summary):not(.active).focus,
:where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(summary):not(.active):focus,
:where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):is(summary):not(.active):focus-visible {
cursor: pointer;
background-color: hsl(var(--bc) / 0.1);
--tw-text-opacity: 1;
color: hsl(var(--bc) / var(--tw-text-opacity));
outline: 2px solid transparent;
outline-offset: 2px;
}
.menu li > *:not(ul):not(.menu-title):not(details):active,
.menu li > *:not(ul):not(.menu-title):not(details).active,
.menu li > details > summary:active {
--tw-bg-opacity: 1;
background-color: hsl(var(--n) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--nc) / var(--tw-text-opacity));
}
.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: end;
display: block;
margin-top: -0.5rem;
height: 0.5rem;
width: 0.5rem;
transform: rotate(45deg);
transition-property: transform, margin-top;
transition-duration: 0.3s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
content: "";
transform-origin: 75% 75%;
box-shadow: 2px 2px;
pointer-events: none;
}
.menu :where(li > details[open] > summary):after,
.menu :where(li > .menu-dropdown-toggle.menu-dropdown-show):after {
transform: rotate(225deg);
margin-top: 0;
}
.mockup-phone .display {
overflow: hidden;
border-radius: 40px;
margin-top: -25px;
}
.mockup-browser .mockup-browser-toolbar .input {
position: relative;
margin-left: auto;
margin-right: auto;
display: block;
height: 1.75rem;
width: 24rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
--tw-bg-opacity: 1;
background-color: hsl(var(--b2) / var(--tw-bg-opacity));
padding-left: 2rem;
}
.mockup-browser .mockup-browser-toolbar .input:before {
content: "";
position: absolute;
left: 0.5rem;
top: 50%;
aspect-ratio: 1 / 1;
height: 0.75rem;
--tw-translate-y: -50%;
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));
border-radius: 9999px;
border-width: 2px;
border-color: currentColor;
opacity: 0.6;
}
.mockup-browser .mockup-browser-toolbar .input:after {
content: "";
position: absolute;
left: 1.25rem;
top: 50%;
height: 0.5rem;
--tw-translate-y: 25%;
--tw-rotate: -45deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
border-radius: 9999px;
border-width: 1px;
border-color: currentColor;
opacity: 0.6;
}
@keyframes modal-pop {
0% {
opacity: 0;
}
}
.progress::-moz-progress-bar {
--tw-bg-opacity: 1;
background-color: hsl(var(--bc) / var(--tw-bg-opacity));
border-radius: var(--rounded-box, 1rem);
}
.progress:indeterminate {
--progress-color: hsl(var(--bc));
background-image: repeating-linear-gradient(
90deg,
var(--progress-color) -1%,
var(--progress-color) 10%,
transparent 10%,
transparent 90%
);
background-size: 200%;
background-position-x: 15%;
animation: progress-loading 5s ease-in-out infinite;
}
.progress::-webkit-progress-bar {
background-color: transparent;
border-radius: var(--rounded-box, 1rem);
}
.progress::-webkit-progress-value {
--tw-bg-opacity: 1;
background-color: hsl(var(--bc) / var(--tw-bg-opacity));
border-radius: var(--rounded-box, 1rem);
}
.progress:indeterminate::-moz-progress-bar {
background-color: transparent;
background-image: repeating-linear-gradient(
90deg,
var(--progress-color) -1%,
var(--progress-color) 10%,
transparent 10%,
transparent 90%
);
background-size: 200%;
background-position-x: 15%;
animation: progress-loading 5s ease-in-out infinite;
}
@keyframes progress-loading {
50% {
background-position-x: -115%;
}
}
@keyframes radiomark {
0% {
box-shadow: 0 0 0 12px hsl(var(--b1)) inset,
0 0 0 12px hsl(var(--b1)) inset;
}
50% {
box-shadow: 0 0 0 3px hsl(var(--b1)) inset,
0 0 0 3px hsl(var(--b1)) inset;
}
100% {
box-shadow: 0 0 0 4px hsl(var(--b1)) inset,
0 0 0 4px hsl(var(--b1)) inset;
}
}
.range:focus-visible::-webkit-slider-thumb {
--focus-shadow: 0 0 0 6px hsl(var(--b1)) inset, 0 0 0 2rem hsl(var(--range-shdw)) inset;
}
.range:focus-visible::-moz-range-thumb {
--focus-shadow: 0 0 0 6px hsl(var(--b1)) inset, 0 0 0 2rem hsl(var(--range-shdw)) inset;
}
.range::-webkit-slider-runnable-track {
height: 0.5rem;
width: 100%;
background-color: hsl(var(--bc) / 0.1);
border-radius: var(--rounded-box, 1rem);
}
.range::-moz-range-track {
height: 0.5rem;
width: 100%;
background-color: hsl(var(--bc) / 0.1);
border-radius: var(--rounded-box, 1rem);
}
.range::-webkit-slider-thumb {
position: relative;
height: 1.5rem;
width: 1.5rem;
border-style: none;
--tw-bg-opacity: 1;
background-color: hsl(var(--b1) / var(--tw-bg-opacity));
border-radius: var(--rounded-box, 1rem);
appearance: none;
-webkit-appearance: none;
top: 50%;
color: hsl(var(--range-shdw));
transform: translateY(-50%);
--filler-size: 100rem;
--filler-offset: 0.6rem;
box-shadow: 0 0 0 3px hsl(var(--range-shdw)) inset,
var(--focus-shadow, 0 0),
calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0 var(--filler-size);
}
.range::-moz-range-thumb {
position: relative;
height: 1.5rem;
width: 1.5rem;
border-style: none;
--tw-bg-opacity: 1;
background-color: hsl(var(--b1) / var(--tw-bg-opacity));
border-radius: var(--rounded-box, 1rem);
top: 50%;
color: hsl(var(--range-shdw));
--filler-size: 100rem;
--filler-offset: 0.5rem;
box-shadow: 0 0 0 3px hsl(var(--range-shdw)) inset,
var(--focus-shadow, 0 0),
calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0 var(--filler-size);
}
@keyframes rating-pop {
0% {
transform: translateY(-0.125em);
}
40% {
transform: translateY(-0.125em);
}
100% {
transform: translateY(0);
}
}
.select:focus {
outline-style: solid;
outline-width: 2px;
outline-offset: 2px;
outline-color: hsl(var(--bc) / 0.2);
}
.select-disabled,
.select:disabled,
.select[disabled] {
cursor: not-allowed;
--tw-border-opacity: 1;
border-color: hsl(var(--b2) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--b2) / var(--tw-bg-opacity));
--tw-text-opacity: 0.2;
}
.select-disabled::-moz-placeholder, .select:disabled::-moz-placeholder, .select[disabled]::-moz-placeholder {
color: hsl(var(--bc) / var(--tw-placeholder-opacity));
--tw-placeholder-opacity: 0.2;
}
.select-disabled::placeholder,
.select:disabled::placeholder,
.select[disabled]::placeholder {
color: hsl(var(--bc) / var(--tw-placeholder-opacity));
--tw-placeholder-opacity: 0.2;
}
.select-multiple,
.select[multiple],
.select[size].select:not([size="1"]) {
background-image: none;
padding-right: 1rem;
}
[dir="rtl"] .select {
background-position: calc(0% + 12px) calc(1px + 50%),
calc(0% + 16px) calc(1px + 50%);
}
:where(.stats) > :not([hidden]) ~ :not([hidden]) {
--tw-divide-x-reverse: 0;
border-right-width: calc(1px * var(--tw-divide-x-reverse));
border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
--tw-divide-y-reverse: 0;
border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
}
.steps .step:before {
top: 0px;
grid-column-start: 1;
grid-row-start: 1;
height: 0.5rem;
width: 100%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
--tw-bg-opacity: 1;
background-color: hsl(var(--b3) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--bc) / var(--tw-text-opacity));
content: "";
margin-left: -100%;
}
.steps .step:after {
content: counter(step);
counter-increment: step;
z-index: 1;
position: relative;
grid-column-start: 1;
grid-row-start: 1;
display: grid;
height: 2rem;
width: 2rem;
place-items: center;
place-self: center;
border-radius: 9999px;
--tw-bg-opacity: 1;
background-color: hsl(var(--b3) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--bc) / var(--tw-text-opacity));
}
.steps .step:first-child:before {
content: none;
}
.steps .step[data-content]:after {
content: attr(data-content);
}
.steps .step-neutral + .step-neutral:before,
.steps .step-neutral:after {
--tw-bg-opacity: 1;
background-color: hsl(var(--n) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--nc) / var(--tw-text-opacity));
}
.steps .step-primary + .step-primary:before,
.steps .step-primary:after {
--tw-bg-opacity: 1;
background-color: hsl(var(--p) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--pc) / var(--tw-text-opacity));
}
.steps .step-secondary + .step-secondary:before,
.steps .step-secondary:after {
--tw-bg-opacity: 1;
background-color: hsl(var(--s) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--sc) / var(--tw-text-opacity));
}
.steps .step-accent + .step-accent:before,
.steps .step-accent:after {
--tw-bg-opacity: 1;
background-color: hsl(var(--a) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--ac) / var(--tw-text-opacity));
}
.steps .step-info + .step-info:before {
--tw-bg-opacity: 1;
background-color: hsl(var(--in) / var(--tw-bg-opacity));
}
.steps .step-info:after {
--tw-bg-opacity: 1;
background-color: hsl(var(--in) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--inc) / var(--tw-text-opacity));
}
.steps .step-success + .step-success:before {
--tw-bg-opacity: 1;
background-color: hsl(var(--su) / var(--tw-bg-opacity));
}
.steps .step-success:after {
--tw-bg-opacity: 1;
background-color: hsl(var(--su) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--suc) / var(--tw-text-opacity));
}
.steps .step-warning + .step-warning:before {
--tw-bg-opacity: 1;
background-color: hsl(var(--wa) / var(--tw-bg-opacity));
}
.steps .step-warning:after {
--tw-bg-opacity: 1;
background-color: hsl(var(--wa) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--wac) / var(--tw-text-opacity));
}
.steps .step-error + .step-error:before {
--tw-bg-opacity: 1;
background-color: hsl(var(--er) / var(--tw-bg-opacity));
}
.steps .step-error:after {
--tw-bg-opacity: 1;
background-color: hsl(var(--er) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--erc) / var(--tw-text-opacity));
}
.tab.tab-active:not(.tab-disabled):not([disabled]) {
border-color: hsl(var(--bc) / var(--tw-border-opacity));
--tw-border-opacity: 1;
--tw-text-opacity: 1;
}
.tab:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.tab:focus-visible {
outline: 2px solid currentColor;
outline-offset: -3px;
}
.tab:focus-visible.tab-lifted {
border-bottom-right-radius: var(--tab-radius, 0.5rem);
border-bottom-left-radius: var(--tab-radius, 0.5rem);
}
.tab-disabled,
.tab[disabled] {
cursor: not-allowed;
color: hsl(var(--bc) / var(--tw-text-opacity));
--tw-text-opacity: 0.2;
}
.tabs-boxed .tab {
border-radius: var(--rounded-btn, 0.5rem);
}
.table :where(th, td) {
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
vertical-align: middle;
}
.table tr.active,
.table tr.active:nth-child(even),
.table-zebra tbody tr:nth-child(even) {
--tw-bg-opacity: 1;
background-color: hsl(var(--b2) / var(--tw-bg-opacity));
}
.table-zebra tr.active,
.table-zebra tr.active:nth-child(even),
.table-zebra-zebra tbody tr:nth-child(even) {
--tw-bg-opacity: 1;
background-color: hsl(var(--b3) / var(--tw-bg-opacity));
}
.table :where(thead, tbody) :where(tr:not(:last-child)),
.table :where(thead, tbody) :where(tr:first-child:last-child) {
border-bottom-width: 1px;
--tw-border-opacity: 1;
border-bottom-color: hsl(var(--b2) / var(--tw-border-opacity));
}
.table :where(thead, tfoot) {
white-space: nowrap;
font-size: 0.75rem;
line-height: 1rem;
font-weight: 700;
color: hsl(var(--bc) / 0.6);
}
@keyframes toast-pop {
0% {
transform: scale(0.9);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
[dir="rtl"] .toggle {
--handleoffsetcalculator: calc(var(--handleoffset) * 1);
}
.toggle:focus-visible {
outline-style: solid;
outline-width: 2px;
outline-offset: 2px;
outline-color: hsl(var(--bc) / 0.2);
}
.toggle:checked,
.toggle[checked="true"],
.toggle[aria-checked="true"] {
--handleoffsetcalculator: var(--handleoffset);
--tw-border-opacity: 1;
--tw-bg-opacity: 1;
}
[dir="rtl"] .toggle:checked, [dir="rtl"] .toggle[checked="true"], [dir="rtl"] .toggle[aria-checked="true"] {
--handleoffsetcalculator: calc(var(--handleoffset) * -1);
}
.toggle:indeterminate {
--tw-border-opacity: 1;
--tw-bg-opacity: 1;
box-shadow: calc(var(--handleoffset) / 2) 0 0 2px var(--tglbg) inset,
calc(var(--handleoffset) / -2) 0 0 2px var(--tglbg) inset,
0 0 0 2px var(--tglbg) inset;
}
[dir="rtl"] .toggle:indeterminate {
box-shadow: calc(var(--handleoffset) / 2) 0 0 2px var(--tglbg) inset,
calc(var(--handleoffset) / -2) 0 0 2px var(--tglbg) inset,
0 0 0 2px var(--tglbg) inset;
}
.toggle:disabled {
cursor: not-allowed;
--tw-border-opacity: 1;
border-color: hsl(var(--bc) / var(--tw-border-opacity));
background-color: transparent;
opacity: 0.3;
--togglehandleborder: 0 0 0 3px hsl(var(--bc)) inset,
var(--handleoffsetcalculator) 0 0 3px hsl(var(--bc)) inset;
}
:root .prose {
--tw-prose-body: hsl(var(--bc) / 0.8);
--tw-prose-headings: hsl(var(--bc));
--tw-prose-lead: hsl(var(--bc));
--tw-prose-links: hsl(var(--bc));
--tw-prose-bold: hsl(var(--bc));
--tw-prose-counters: hsl(var(--bc));
--tw-prose-bullets: hsl(var(--bc) / 0.5);
--tw-prose-hr: hsl(var(--bc) / 0.2);
--tw-prose-quotes: hsl(var(--bc));
--tw-prose-quote-borders: hsl(var(--bc) / 0.2);
--tw-prose-captions: hsl(var(--bc) / 0.5);
--tw-prose-code: hsl(var(--bc));
--tw-prose-pre-code: hsl(var(--nc));
--tw-prose-pre-bg: hsl(var(--n));
--tw-prose-th-borders: hsl(var(--bc) / 0.5);
--tw-prose-td-borders: hsl(var(--bc) / 0.2);
}
.prose :where(code):not(:where([class~="not-prose"] *)) {
padding: 2px 8px;
border-radius: var(--rounded-badge);
}
.prose code:after,
.prose code:before {
content: none;
}
.prose pre code {
border-radius: 0;
padding: 0;
}
.prose :where(tbody tr, thead):not(:where([class~="not-prose"] *)) {
border-bottom-color: hsl(var(--bc) / 20%);
}
.rounded-box {
border-radius: var(--rounded-box, 1rem);
}
.btm-nav-xs > *:where(.active) {
border-top-width: 1px;
}
.btm-nav-sm > *:where(.active) {
border-top-width: 2px;
}
.btm-nav-md > *:where(.active) {
border-top-width: 2px;
}
.btm-nav-lg > *:where(.active) {
border-top-width: 4px;
}
.btn-block {
width: 100%;
}
.btn-square:where(.btn-xs) {
height: 1.5rem;
width: 1.5rem;
padding: 0px;
}
.btn-square:where(.btn-sm) {
height: 2rem;
width: 2rem;
padding: 0px;
}
.btn-square:where(.btn-md) {
height: 3rem;
width: 3rem;
padding: 0px;
}
.btn-square:where(.btn-lg) {
height: 4rem;
width: 4rem;
padding: 0px;
}
.join.join-vertical {
flex-direction: column;
}
.join.join-vertical .join-item:first-child:not(:last-child),
.join.join-vertical *:first-child:not(:last-child) .join-item {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: inherit;
border-top-right-radius: inherit;
}
.join.join-vertical .join-item:last-child:not(:first-child),
.join.join-vertical *:last-child:not(:first-child) .join-item {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
}
.join.join-horizontal {
flex-direction: row;
}
.join.join-horizontal .join-item:first-child:not(:last-child),
.join.join-horizontal *:first-child:not(:last-child) .join-item {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: inherit;
border-top-left-radius: inherit;
}
.join.join-horizontal .join-item:last-child:not(:first-child),
.join.join-horizontal *:last-child:not(:first-child) .join-item {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
border-bottom-right-radius: inherit;
border-top-right-radius: inherit;
}
.steps-horizontal .step {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
place-items: center;
text-align: center;
}
.steps-vertical .step {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(1, minmax(0, 1fr));
}
.avatar.online:before {
content: "";
position: absolute;
z-index: 10;
display: block;
border-radius: 9999px;
--tw-bg-opacity: 1;
background-color: hsl(var(--su) / var(--tw-bg-opacity));
outline-style: solid;
outline-width: 2px;
outline-color: hsl(var(--b1) / 1);
width: 15%;
height: 15%;
top: 7%;
right: 7%;
}
.btn-group .btn:not(:first-child):not(:last-child) {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.btn-group .btn:first-child:not(:last-child) {
margin-left: -1px;
margin-top: -0px;
border-top-left-radius: var(--rounded-btn, 0.5rem);
border-top-right-radius: 0;
border-bottom-left-radius: var(--rounded-btn, 0.5rem);
border-bottom-right-radius: 0;
}
.btn-group .btn:last-child:not(:first-child) {
border-top-left-radius: 0;
border-top-right-radius: var(--rounded-btn, 0.5rem);
border-bottom-left-radius: 0;
border-bottom-right-radius: var(--rounded-btn, 0.5rem);
}
.btn-group-horizontal .btn:not(:first-child):not(:last-child) {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.btn-group-horizontal .btn:first-child:not(:last-child) {
margin-left: -1px;
margin-top: -0px;
border-top-left-radius: var(--rounded-btn, 0.5rem);
border-top-right-radius: 0;
border-bottom-left-radius: var(--rounded-btn, 0.5rem);
border-bottom-right-radius: 0;
}
.btn-group-horizontal .btn:last-child:not(:first-child) {
border-top-left-radius: 0;
border-top-right-radius: var(--rounded-btn, 0.5rem);
border-bottom-left-radius: 0;
border-bottom-right-radius: var(--rounded-btn, 0.5rem);
}
.btn-group-vertical .btn:first-child:not(:last-child) {
margin-left: -0px;
margin-top: -1px;
border-top-left-radius: var(--rounded-btn, 0.5rem);
border-top-right-radius: var(--rounded-btn, 0.5rem);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.btn-group-vertical .btn:last-child:not(:first-child) {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: var(--rounded-btn, 0.5rem);
border-bottom-right-radius: var(--rounded-btn, 0.5rem);
}
.join.join-vertical > :where(*:not(:first-child)) {
margin-left: 0px;
margin-right: 0px;
margin-top: -1px;
}
.join.join-horizontal > :where(*:not(:first-child)) {
margin-top: 0px;
margin-bottom: 0px;
margin-left: -1px;
}
.menu-sm :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
.menu-sm :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
font-size: 0.875rem;
line-height: 1.25rem;
border-radius: var(--rounded-btn, 0.5rem);
}
.menu-sm .menu-title {
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.steps-horizontal .step {
grid-template-rows: 40px 1fr;
grid-template-columns: auto;
min-width: 4rem;
}
.steps-horizontal .step:before {
height: 0.5rem;
width: 100%;
--tw-translate-x: 0px;
--tw-translate-y: 0px;
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));
content: "";
margin-left: -100%;
}
.steps-vertical .step {
gap: 0.5rem;
grid-template-columns: 40px 1fr;
grid-template-rows: auto;
min-height: 4rem;
justify-items: start;
}
.steps-vertical .step:before {
height: 100%;
width: 0.5rem;
--tw-translate-x: -50%;
--tw-translate-y: -50%;
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));
margin-left: 50%;
}
[dir="rtl"] .steps-vertical .step:before {
margin-right: auto;
}
.invisible {
visibility: hidden;
}
.static {
position: static;
}
.fixed {
position: fixed;
}
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.-inset-px {
inset: -1px;
}
.inset-x-0 {
left: 0px;
right: 0px;
}
.-top-3 {
top: -0.75rem;
}
.bottom-4 {
bottom: 1rem;
}
.right-4 {
right: 1rem;
}
.top-0 {
top: 0px;
}
.isolate {
isolation: isolate;
}
.-z-10 {
z-index: -10;
}
.z-\[1\] {
z-index: 1;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.mb-0 {
margin-bottom: 0px;
}
.mb-12 {
margin-bottom: 3rem;
}
.mb-2 {
margin-bottom: 0.5rem;
}
.mb-36 {
margin-bottom: 9rem;
}
.mb-4 {
margin-bottom: 1rem;
}
.mb-6 {
margin-bottom: 1.5rem;
}
.mb-8 {
margin-bottom: 2rem;
}
.mt-16 {
margin-top: 4rem;
}
.mt-2 {
margin-top: 0.5rem;
}
.mt-3 {
margin-top: 0.75rem;
}
.mt-4 {
margin-top: 1rem;
}
.mt-6 {
margin-top: 1.5rem;
}
.mt-8 {
margin-top: 2rem;
}
.block {
display: block;
}
.flex {
display: flex;
}
.inline-flex {
display: inline-flex;
}
.table {
display: table;
}
.grid {
display: grid;
}
.hidden {
display: none;
}
.aspect-\[1155\/678\] {
aspect-ratio: 1155/678;
}
.h-14 {
height: 3.5rem;
}
.h-6 {
height: 1.5rem;
}
.h-\[60px\] {
height: 60px;
}
.min-h-screen {
min-height: 100vh;
}
.w-14 {
width: 3.5rem;
}
.w-5 {
width: 1.25rem;
}
.w-52 {
width: 13rem;
}
.w-\[60px\] {
width: 60px;
}
.w-\[72\.1875rem\] {
width: 72.1875rem;
}
.w-full {
width: 100%;
}
.max-w-2xl {
max-width: 42rem;
}
.max-w-full {
max-width: 100%;
}
.max-w-lg {
max-width: 32rem;
}
.flex-none {
flex: none;
}
.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-gpu {
transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.flex-col {
flex-direction: column;
}
.flex-wrap {
flex-wrap: wrap;
}
.items-center {
align-items: center;
}
.items-baseline {
align-items: baseline;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.gap-12 {
gap: 3rem;
}
.gap-2 {
gap: 0.5rem;
}
.gap-4 {
gap: 1rem;
}
.gap-x-2 {
-moz-column-gap: 0.5rem;
column-gap: 0.5rem;
}
.gap-x-3 {
-moz-column-gap: 0.75rem;
column-gap: 0.75rem;
}
.gap-y-6 {
row-gap: 1.5rem;
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.overflow-hidden {
overflow: hidden;
}
.scroll-smooth {
scroll-behavior: smooth;
}
.break-words {
overflow-wrap: break-word;
}
.rounded {
border-radius: 0.25rem;
}
.rounded-3xl {
border-radius: 1.5rem;
}
.rounded-\[250px\] {
border-radius: 250px;
}
.rounded-\[75px\] {
border-radius: 75px;
}
.rounded-full {
border-radius: 9999px;
}
.rounded-lg {
border-radius: 0.5rem;
}
.rounded-md {
border-radius: 0.375rem;
}
.rounded-xl {
border-radius: 0.75rem;
}
.rounded-t-3xl {
border-top-left-radius: 1.5rem;
border-top-right-radius: 1.5rem;
}
.border-2 {
border-width: 2px;
}
.border-4 {
border-width: 4px;
}
.border-t-2 {
border-top-width: 2px;
}
.border-base-200 {
--tw-border-opacity: 1;
border-color: hsl(var(--b2) / var(--tw-border-opacity));
}
.border-zinc-700 {
--tw-border-opacity: 1;
border-color: rgb(63 63 70 / var(--tw-border-opacity));
}
.bg-\[\#18171e\] {
--tw-bg-opacity: 1;
background-color: rgb(24 23 30 / var(--tw-bg-opacity));
}
.bg-base-100 {
--tw-bg-opacity: 1;
background-color: hsl(var(--b1) / var(--tw-bg-opacity));
}
.bg-gray-900 {
--tw-bg-opacity: 1;
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}
.bg-indigo-500 {
--tw-bg-opacity: 1;
background-color: rgb(99 102 241 / var(--tw-bg-opacity));
}
.bg-primary {
--tw-bg-opacity: 1;
background-color: hsl(var(--p) / var(--tw-bg-opacity));
}
.bg-white\/60 {
background-color: rgb(255 255 255 / 0.6);
}
.bg-zinc-800 {
--tw-bg-opacity: 1;
background-color: rgb(39 39 42 / var(--tw-bg-opacity));
}
.bg-zinc-900 {
--tw-bg-opacity: 1;
background-color: rgb(24 24 27 / var(--tw-bg-opacity));
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.bg-gradient-to-r {
background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.bg-gradient-to-tr {
background-image: linear-gradient(to top right, var(--tw-gradient-stops));
}
.from-\[\#44BCFF\] {
--tw-gradient-from: #44BCFF var(--tw-gradient-from-position);
--tw-gradient-to: rgb(68 188 255 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#ff80b5\] {
--tw-gradient-from: #ff80b5 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(255 128 181 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-\[\#FF44EC\] {
--tw-gradient-to: rgb(255 68 236 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), #FF44EC var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-\[\#9089fc\] {
--tw-gradient-to: #9089fc var(--tw-gradient-to-position);
}
.to-\[\#FF675E\] {
--tw-gradient-to: #FF675E var(--tw-gradient-to-position);
}
.p-2 {
padding: 0.5rem;
}
.p-8 {
padding: 2rem;
}
.p-\[75px\] {
padding: 75px;
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.px-3\.5 {
padding-left: 0.875rem;
padding-right: 0.875rem;
}
.px-36 {
padding-left: 9rem;
padding-right: 9rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
.px-\[75px\] {
padding-left: 75px;
padding-right: 75px;
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.py-2\.5 {
padding-top: 0.625rem;
padding-bottom: 0.625rem;
}
.py-24 {
padding-top: 6rem;
padding-bottom: 6rem;
}
.py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.py-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.py-8 {
padding-top: 2rem;
padding-bottom: 2rem;
}
.pb-\[75px\] {
padding-bottom: 75px;
}
.pt-\[75px\] {
padding-top: 75px;
}
.text-center {
text-align: center;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}
.text-5xl {
font-size: 3rem;
line-height: 1;
}
.text-6xl {
font-size: 3.75rem;
line-height: 1;
}
.text-\[32px\] {
font-size: 32px;
}
.text-base {
font-size: 1rem;
line-height: 1.5rem;
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.font-bold {
font-weight: 700;
}
.font-semibold {
font-weight: 600;
}
.uppercase {
text-transform: uppercase;
}
.leading-6 {
line-height: 1.5rem;
}
.leading-7 {
line-height: 1.75rem;
}
.leading-8 {
line-height: 2rem;
}
.tracking-tight {
letter-spacing: -0.025em;
}
.text-gray-300 {
--tw-text-opacity: 1;
color: rgb(209 213 219 / var(--tw-text-opacity));
}
.text-gray-400 {
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity));
}
.text-gray-500 {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity));
}
.text-gray-600 {
--tw-text-opacity: 1;
color: rgb(75 85 99 / var(--tw-text-opacity));
}
.text-gray-900 {
--tw-text-opacity: 1;
color: rgb(17 24 39 / var(--tw-text-opacity));
}
.text-green-400 {
--tw-text-opacity: 1;
color: rgb(74 222 128 / var(--tw-text-opacity));
}
.text-green-600 {
--tw-text-opacity: 1;
color: rgb(22 163 74 / var(--tw-text-opacity));
}
.text-green-700 {
--tw-text-opacity: 1;
color: rgb(21 128 61 / var(--tw-text-opacity));
}
.text-indigo-400 {
--tw-text-opacity: 1;
color: rgb(129 140 248 / var(--tw-text-opacity));
}
.text-indigo-600 {
--tw-text-opacity: 1;
color: rgb(79 70 229 / var(--tw-text-opacity));
}
.text-primary {
--tw-text-opacity: 1;
color: hsl(var(--p) / var(--tw-text-opacity));
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.opacity-30 {
opacity: 0.3;
}
.opacity-70 {
opacity: 0.7;
}
.mix-blend-lighten {
mix-blend-mode: lighten;
}
.shadow-2xl {
--tw-shadow: 0 25px 50px -12px rgb(0 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);
}
.shadow-sm {
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: 0 1px 2px 0 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-xl {
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.ring-1 {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-inset {
--tw-ring-inset: inset;
}
.ring-gray-900\/10 {
--tw-ring-color: rgb(17 24 39 / 0.1);
}
.ring-indigo-200 {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(199 210 254 / var(--tw-ring-opacity));
}
.blur-3xl {
--tw-blur: blur(64px);
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);
}
.blur-lg {
--tw-blur: blur(16px);
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);
}
.transition {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.duration-1000 {
transition-duration: 1000ms;
}
.duration-200 {
transition-duration: 200ms;
}
.hover\:bg-indigo-400:hover {
--tw-bg-opacity: 1;
background-color: rgb(129 140 248 / var(--tw-bg-opacity));
}
.hover\:bg-zinc-800:hover {
--tw-bg-opacity: 1;
background-color: rgb(39 39 42 / var(--tw-bg-opacity));
}
.hover\:text-white:hover {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.hover\:ring-indigo-300:hover {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(165 180 252 / var(--tw-ring-opacity));
}
.focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.focus\:ring-2:focus {
--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(2px + 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);
}
.focus\:ring-gray-900:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
}
.focus\:ring-offset-2:focus {
--tw-ring-offset-width: 2px;
}
.focus-visible\:outline:focus-visible {
outline-style: solid;
}
.focus-visible\:outline-2:focus-visible {
outline-width: 2px;
}
.focus-visible\:outline-offset-2:focus-visible {
outline-offset: 2px;
}
.focus-visible\:outline-indigo-500:focus-visible {
outline-color: #6366f1;
}
.focus-visible\:outline-indigo-600:focus-visible {
outline-color: #4f46e5;
}
.group:hover .group-hover\:-inset-1 {
inset: -0.25rem;
}
.group:hover .group-hover\:opacity-100 {
opacity: 1;
}
.group:hover .group-hover\:duration-200 {
transition-duration: 200ms;
}
@media (prefers-color-scheme: dark) {
.dark\:text-green-400 {
--tw-text-opacity: 1;
color: rgb(74 222 128 / var(--tw-text-opacity));
}
.dark\:text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
}
@media (min-width: 640px) {
.sm\:mx-8 {
margin-left: 2rem;
margin-right: 2rem;
}
.sm\:mt-10 {
margin-top: 2.5rem;
}
.sm\:mt-20 {
margin-top: 5rem;
}
.sm\:gap-y-0 {
row-gap: 0px;
}
.sm\:rounded-b-none {
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
.sm\:p-10 {
padding: 2.5rem;
}
.sm\:py-32 {
padding-top: 8rem;
padding-bottom: 8rem;
}
.sm\:text-5xl {
font-size: 3rem;
line-height: 1;
}
}
@media (min-width: 768px) {
.md\:flex {
display: flex;
}
.md\:hidden {
display: none;
}
.md\:w-1\/2 {
width: 50%;
}
.md\:bg-gradient-to-r {
background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.md\:from-zinc-900 {
--tw-gradient-from: #18181b var(--tw-gradient-from-position);
--tw-gradient-to: rgb(24 24 27 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.md\:to-zinc-800 {
--tw-gradient-to: #27272a var(--tw-gradient-to-position);
}
}
@media (min-width: 1024px) {
.lg\:sticky {
position: sticky;
}
.lg\:order-first {
order: -9999;
}
.lg\:col-span-3 {
grid-column: span 3 / span 3;
}
.lg\:col-span-8 {
grid-column: span 8 / span 8;
}
.lg\:mx-0 {
margin-left: 0px;
margin-right: 0px;
}
.lg\:block {
display: block;
}
.lg\:grid {
display: grid;
}
.lg\:hidden {
display: none;
}
.lg\:h-screen {
height: 100vh;
}
.lg\:w-1\/2 {
width: 50%;
}
.lg\:max-w-4xl {
max-width: 56rem;
}
.lg\:grid-cols-12 {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.lg\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lg\:overflow-y-scroll {
overflow-y: scroll;
}
.lg\:rounded-bl-3xl {
border-bottom-left-radius: 1.5rem;
}
.lg\:rounded-tr-none {
border-top-right-radius: 0px;
}
.lg\:px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.lg\:px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
}
@media (min-width: 1280px) {
.xl\:mb-0 {
margin-bottom: 0px;
}
.xl\:w-1\/5 {
width: 20%;
}
}
</style>
</head>
<body id='body'>
<header class="flex items-center bg-zinc-900 py-4 px-8 shadow-xl justify-between">
<a href="/" aria-label="Home" class="flex items-center gap-4 bg-[#18171e] rounded-lg px-4">
<img
src="/img/pockethost-cloud-logo.jpg"
alt="logo"
width="450"
height="450"
class="w-14 h-14 rounded-lg"
/>
<h1 class="text-green-700 dark:text-white font-bold text-2xl"
>PocketHost</h1
>
</a>
<div class="md:flex hidden gap-2">
<a class='block py-2 px-3 rounded hover:text-white hover:bg-zinc-800' href='/'>Home</a>
<a class='block py-2 px-3 rounded hover:text-white hover:bg-zinc-800' href='/blog'>Blog</a>
<a class='block py-2 px-3 rounded hover:text-white hover:bg-zinc-800' href='/docs/overview/introduction'>Docs</a>
<a class='block py-2 px-3 rounded hover:text-white hover:bg-zinc-800' href='https://discord.gg/nVTxCMEcGT'>Support</a>
<a class='block py-2 px-3 rounded hover:text-white hover:bg-zinc-800' href='https://github.com/pockethost/pockethost'><i class="fa-brands fa-github"></i></a>
</div>
<div class="block md:hidden">
<div class="dropdown dropdown-end">
<label tabindex="0" class="btn btn-ghost lg:hidden">
<i class="fa-regular fa-bars text-2xl"></i>
</label>
<ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow-2xl bg-base-100 border-4 border-base-200 rounded-box w-52">
<li><a class='py-3 font-bold' href='/'>Home</a></li>
<li><a class='py-3 font-bold' href='/blog'>Blog</a></li>
<li><a class='py-3 font-bold' href='/docs/overview/introduction'>Docs</a></li>
<li><a class='py-3 font-bold' href='https://discord.gg/nVTxCMEcGT'>Support</a></li>
<li><a class='py-3 font-bold' href='https://github.com/pockethost/pockethost'><i class="fa-brands fa-github"></i> GitHub</a> </li>
</ul>
</div>
</div>
</header>
<main>
<div class='prose mx-auto py-8 px-4'>
<h1 class='text-white font-bold'>PocketHost 0.2.0</h1>
<div class='text-green-400 font-bold'>
<time datetime="2022-10-12">12 October 2022</time>
</div>
<div class='mb-36'>
<h1 id="overview" tabindex="-1">Overview <a class="header-anchor" href="#overview">#</a></h1>
<p>Immerse yourself in the expansive world of PocketHost 0.2.0, the latest iteration of this user-friendly, fully-managed PocketBase hosting service. Rejoice in the full Dockerization of services for seamless project execution while basking in the glow of substantial, dynamic proxy-driven scaling.</p>
<p>Say goodbye to constant crashes due to memory constraints, as the dynamic proxy in v0.2.0 introduces just-in-time launching of your PocketBase instances. The period of inactivity now triggers the shutdown of an instance until the next request, ensuring cost-effective usage and optimal performance.</p>
<p>Think power. Picture an upgraded server delivering 4GB RAM and dual CPUs, thus creating abundant room for your creative indulgence. Imagine the potential with an upcoming fly.io integration, allowing on-demand spinning up of instances, leaving behind the era of shared tenancy.</p>
<p>Next, envision the convenience of an instant backend, complete with email and S3, brought to you by shared tenancy on pockethost.io. Imagine the synergistic power of the forthcoming PBScript release combined with pockethost integration for an unrivaled BaaS experience. Finally, expect a refreshed SvelteKit UI for pockethost, courtesy of @brewhousedigital, promising an aesthetic overhaul soon. To join the rocket ride of this evolution, explore https://github.com/benallfree/pockethost.</p>
<p>The fully managed PocketBase hosting service https://pockethost.io has been updated to v0.2.0. Go check it out and spin up your very own PocketBase instance 🚀</p>
<p>This release is <a href="https://github.com/benallfree/pockethost/blob/master/docker/docker-compose.yaml">fully Dockerized</a>.</p>
<p>v0.2.0 scales much better than v0.0.1 by using a <a href="https://github.com/benallfree/pockethost/blob/master/packages/daemon/src/ProxyServer.ts#L40">dynamic proxy approach</a>. In the previous version, PocketBase instances stayed running and eventually crashed 🔥 the server due to memory constraints. In this version, the proxy launches your PocketBase instance just-in-time when a request comes in. After a period of inactivity, your PocketBase instance will be <a href="https://github.com/benallfree/pockethost/blob/master/packages/daemon/src/InstanceManager.ts#L148">shut down until a new request comes in</a>. The &quot;first hit&quot; cost of launching your PocketBase instance from a cold start seems to take &lt;500ms, so it's almost not noticeable under normal application use.</p>
<p>I also upgraded the server to 4GB RAM and 2 CPUs, so there should be plenty of room to play around.</p>
<p>At some point down the road, we may accept fly.io machine keys and use fly.io's &quot;machine proxy&quot; service to spin up your instances on-demand. At that point, there won't be shared tenancy anymore.</p>
<p>But I think shared tenancy does have a place in this space. There is something very nice and easy about logging in to pockethost.io and having an instantly configured backend including email and S3, and maybe some day Litestream too. That combined with the upcoming <a href="https://github.com/benallfree/pbscript">PBScript</a> release and pockethost integration gives you a powerful BaaS without ever going near servers, re-compiling anything, deploying architecture-specific binaries, or needing to manage hosting provider API keys. You literally just get a pockethost URL like <a href="https://harvest.pockethost.io/_">https://harvest.pockethost.io/_</a>, feed it to your client SDK, and go.</p>
<p>@brewhousedigital generously offered to take a look at the SvelteKit UI for pockethost and might spruce it up a bit. My design skills are lacking and I'm very aware 🙈</p>
<p>Contributions and discussion for this project at https://github.com/benallfree/pockethost</p>
<div class='text-2xl'>
Connect with us! Join our <a href="https://discord.gg/BnhQJMgvYd">Discord server</a> or jump into <a href="https://github.com/pockethost/pockethost/discussions">GitHub Discussions</a>
</div>
</div>
<div class='mb-6'>
</div>
<div class="flex items-center justify-between py-6">
<div><a href="/blog/0.0.1/" class='btn'><i class="fa-solid fa-arrow-left"></i> PocketHost 0.0.1</a></div>
<div><a href="/blog/0.3.0/" class='btn'>PocketHost 0.3.0 <i class="fa-solid fa-arrow-right"></i></a></div>
</div>
</div>
</main>
<a href='#body' aria-label='Return to the top of the page' class='fixed bottom-4 right-4 btn btn-square'>
<i class="fa-regular fa-arrow-up"></i>
</a>
<footer></footer>
<!-- Current page: /blog/0.2.0/ -->
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink