@charset "UTF-8";

:root {
    --background-debug  : gray;
    --background-debug-2: #c59292;
    --font-family-global: Verdana, Geneva, Tahoma, sans-serif
}

.row {
    display  : flex;
    flex-wrap: wrap
}

.column {
    display       : flex;
    flex-direction: column
}

.item {
    box-sizing: border-box;
    flex-grow : 1;
    flex-basis: 0;
    min-width : 0
}

.item-auto {
    flex : 1 1 auto;
    width: auto
}

.gap {
    display       : flex;
    gap           : .5em;
    padding-bottom: .5em
}

.gap-right {
    display: flex;
    gap    : .5em
}

.not-gap {
    gap           : 0em;
    padding-bottom: 1em
}

.not-wrap {
    flex-wrap: nowrap
}

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

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

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

.item-1 {
    flex : 0 0 8.3333333333%;
    width: 8.3333333333%
}

.justify-content-1 {
    justify-content: flex-start
}

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

.item-2 {
    flex : 0 0 16.6666666667%;
    width: 16.6666666667%
}

.item-3 {
    flex : 0 0 25%;
    width: 25%
}

.item-4 {
    flex : 0 0 33.3333333333%;
    width: 33.3333333333%
}

.item-5 {
    flex : 0 0 41.6666666667%;
    width: 41.6666666667%
}

.item-6 {
    flex : 0 0 50%;
    width: 50%
}

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

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

.item-7 {
    flex : 0 0 58.3333333333%;
    width: 58.3333333333%
}

.item-8 {
    flex : 0 0 66.6666666667%;
    width: 66.6666666667%
}

.item-9 {
    flex : 0 0 75%;
    width: 75%
}

.item-10 {
    flex : 0 0 83.3333333333%;
    width: 83.3333333333%
}

.item-11 {
    flex : 0 0 91.6666666667%;
    width: 91.6666666667%
}

.item-12 {
    flex : 0 0 100%;
    width: 100%
}

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

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

@media (max-width: 599px) {
    .row-xs {
        display  : flex;
        flex-wrap: wrap
    }

    .column-xs {
        display       : flex;
        flex-direction: column
    }

    .item-xs {
        box-sizing: border-box;
        flex-grow : 1;
        flex-basis: 0;
        min-width : 0
    }

    .item-xs-auto {
        flex : 1 1 auto;
        width: auto
    }

    .gap-xs {
        display       : flex;
        gap           : .5em;
        padding-bottom: .5em
    }

    .not-gap-xs {
        gap           : 0em;
        padding-bottom: 1em
    }

    .not-wrap-xs {
        flex-wrap: nowrap
    }

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

    .justify-content-around-xs {
        justify-content: space-around
    }

    .justify-content-evenly-xs {
        justify-content: space-evenly
    }

    .item-1-xs {
        flex     : 0 0 8.3333333333%;
        max-width: 8.3333333333%
    }

    .justify-content-xs-1 {
        justify-content: flex-start
    }

    .align-item-xs-1 {
        align-items: flex-start
    }

    .item-2-xs {
        flex     : 0 0 16.6666666667%;
        max-width: 16.6666666667%
    }

    .item-3-xs {
        flex     : 0 0 25%;
        max-width: 25%
    }

    .item-4-xs {
        flex     : 0 0 33.3333333333%;
        max-width: 33.3333333333%
    }

    .item-5-xs {
        flex     : 0 0 41.6666666667%;
        max-width: 41.6666666667%
    }

    .item-6-xs {
        flex     : 0 0 50%;
        max-width: 50%
    }

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

    .align-item-xs-6 {
        align-items: center
    }

    .item-7-xs {
        flex     : 0 0 58.3333333333%;
        max-width: 58.3333333333%
    }

    .item-8-xs {
        flex     : 0 0 66.6666666667%;
        max-width: 66.6666666667%
    }

    .item-9-xs {
        flex     : 0 0 75%;
        max-width: 75%
    }

    .item-10-xs {
        flex     : 0 0 83.3333333333%;
        max-width: 83.3333333333%
    }

    .item-11-xs {
        flex     : 0 0 91.6666666667%;
        max-width: 91.6666666667%
    }

    .item-12-xs {
        flex     : 0 0 100%;
        max-width: 100%
    }

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

    .align-item-xs-12 {
        align-items: flex-end
    }
}

@media (min-width: 600px) and (max-width: 1020px) {
    .row-sm {
        display  : flex;
        flex-wrap: wrap
    }

    .column-sm {
        display       : flex;
        flex-direction: column
    }

    .item-sm {
        box-sizing: border-box;
        flex-grow : 1;
        flex-basis: 0;
        min-width : 0
    }

    .item-sm-auto {
        flex : 1 1 auto;
        width: auto
    }

    .gap-sm {
        display       : flex;
        gap           : .5em;
        padding-bottom: .5em
    }

    .not-gap-sm {
        gap           : 0em;
        padding-bottom: 1em
    }

    .not-wrap-sm {
        flex-wrap: nowrap
    }

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

    .justify-content-around-sm {
        justify-content: space-around
    }

    .justify-content-evenly-sm {
        justify-content: space-evenly
    }

    .item-1-sm {
        flex     : 0 0 8.3333333333%;
        max-width: 8.3333333333%
    }

    .justify-content-sm-1 {
        justify-content: flex-start
    }

    .align-item-sm-1 {
        align-items: flex-start
    }

    .item-2-sm {
        flex     : 0 0 16.6666666667%;
        max-width: 16.6666666667%
    }

    .item-3-sm {
        flex     : 0 0 25%;
        max-width: 25%
    }

    .item-4-sm {
        flex     : 0 0 33.3333333333%;
        max-width: 33.3333333333%
    }

    .item-5-sm {
        flex     : 0 0 41.6666666667%;
        max-width: 41.6666666667%
    }

    .item-6-sm {
        flex     : 0 0 50%;
        max-width: 50%
    }

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

    .align-item-sm-6 {
        align-items: center
    }

    .item-7-sm {
        flex     : 0 0 58.3333333333%;
        max-width: 58.3333333333%
    }

    .item-8-sm {
        flex     : 0 0 66.6666666667%;
        max-width: 66.6666666667%
    }

    .item-9-sm {
        flex     : 0 0 75%;
        max-width: 75%
    }

    .item-10-sm {
        flex     : 0 0 83.3333333333%;
        max-width: 83.3333333333%
    }

    .item-11-sm {
        flex     : 0 0 91.6666666667%;
        max-width: 91.6666666667%
    }

    .item-12-sm {
        flex     : 0 0 100%;
        max-width: 100%
    }

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

    .align-item-sm-12 {
        align-items: flex-end
    }
}

@media (min-width: 1020px) and (max-width: 1447px) {
    .row-md {
        display  : flex;
        flex-wrap: wrap
    }

    .column-md {
        display       : flex;
        flex-direction: column
    }

    .item-md {
        box-sizing: border-box;
        flex-grow : 1;
        flex-basis: 0;
        min-width : 0
    }

    .item-md-auto {
        flex : 1 1 auto;
        width: auto
    }

    .gap-md {
        display       : flex;
        gap           : .5em;
        padding-bottom: .5em
    }

    .not-gap-md {
        gap           : 0em;
        padding-bottom: 1em
    }

    .not-wrap-md {
        flex-wrap: nowrap
    }

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

    .justify-content-around-md {
        justify-content: space-around
    }

    .justify-content-evenly-md {
        justify-content: space-evenly
    }

    .item-1-md {
        flex     : 0 0 8.3333333333%;
        max-width: 8.3333333333%
    }

    .justify-content-md-1 {
        justify-content: flex-start
    }

    .align-item-md-1 {
        align-items: flex-start
    }

    .item-2-md {
        flex     : 0 0 16.6666666667%;
        max-width: 16.6666666667%
    }

    .item-3-md {
        flex     : 0 0 25%;
        max-width: 25%
    }

    .item-4-md {
        flex     : 0 0 33.3333333333%;
        max-width: 33.3333333333%
    }

    .item-5-md {
        flex     : 0 0 41.6666666667%;
        max-width: 41.6666666667%
    }

    .item-6-md {
        flex     : 0 0 50%;
        max-width: 50%
    }

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

    .align-item-md-6 {
        align-items: center
    }

    .item-7-md {
        flex     : 0 0 58.3333333333%;
        max-width: 58.3333333333%
    }

    .item-8-md {
        flex     : 0 0 66.6666666667%;
        max-width: 66.6666666667%
    }

    .item-9-md {
        flex     : 0 0 75%;
        max-width: 75%
    }

    .item-10-md {
        flex     : 0 0 83.3333333333%;
        max-width: 83.3333333333%
    }

    .item-11-md {
        flex     : 0 0 91.6666666667%;
        max-width: 91.6666666667%
    }

    .item-12-md {
        flex     : 0 0 100%;
        max-width: 100%
    }

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

    .align-item-md-12 {
        align-items: flex-end
    }
}

@media (min-width: 1448px) and (max-width: 1710px) {
    .row-lg {
        display  : flex;
        flex-wrap: wrap
    }

    .column-lg {
        display       : flex;
        flex-direction: column
    }

    .item-lg {
        box-sizing: border-box;
        flex-grow : 1;
        flex-basis: 0;
        min-width : 0
    }

    .item-lg-auto {
        flex : 1 1 auto;
        width: auto
    }

    .gap-lg {
        display       : flex;
        gap           : .5em;
        padding-bottom: .5em
    }

    .not-gap-lg {
        gap           : 0em;
        padding-bottom: 1em
    }

    .not-wrap-lg {
        flex-wrap: nowrap
    }

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

    .justify-content-around-lg {
        justify-content: space-around
    }

    .justify-content-evenly-lg {
        justify-content: space-evenly
    }

    .item-1-lg {
        flex     : 0 0 8.3333333333%;
        max-width: 8.3333333333%
    }

    .justify-content-lg-1 {
        justify-content: flex-start
    }

    .align-item-lg-1 {
        align-items: flex-start
    }

    .item-2-lg {
        flex     : 0 0 16.6666666667%;
        max-width: 16.6666666667%
    }

    .item-3-lg {
        flex     : 0 0 25%;
        max-width: 25%
    }

    .item-4-lg {
        flex     : 0 0 33.3333333333%;
        max-width: 33.3333333333%
    }

    .item-5-lg {
        flex     : 0 0 41.6666666667%;
        max-width: 41.6666666667%
    }

    .item-6-lg {
        flex     : 0 0 50%;
        max-width: 50%
    }

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

    .align-item-lg-6 {
        align-items: center
    }

    .item-7-lg {
        flex     : 0 0 58.3333333333%;
        max-width: 58.3333333333%
    }

    .item-8-lg {
        flex     : 0 0 66.6666666667%;
        max-width: 66.6666666667%
    }

    .item-9-lg {
        flex     : 0 0 75%;
        max-width: 75%
    }

    .item-10-lg {
        flex     : 0 0 83.3333333333%;
        max-width: 83.3333333333%
    }

    .item-11-lg {
        flex     : 0 0 91.6666666667%;
        max-width: 91.6666666667%
    }

    .item-12-lg {
        flex     : 0 0 100%;
        max-width: 100%
    }

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

    .align-item-lg-12 {
        align-items: flex-end
    }
}

@media (min-width: 1711.98px) and (max-width: 5000px) {
    .row-xl {
        display  : flex;
        flex-wrap: wrap
    }

    .column-xl {
        display       : flex;
        flex-direction: column
    }

    .item-xl {
        box-sizing: border-box;
        flex-grow : 1;
        flex-basis: 0;
        min-width : 0
    }

    .item-xl-auto {
        flex : 1 1 auto;
        width: auto
    }

    .gap-xl {
        display       : flex;
        gap           : .5em;
        padding-bottom: .5em
    }

    .not-gap-xl {
        gap           : 0em;
        padding-bottom: 1em
    }

    .not-wrap-xl {
        flex-wrap: nowrap
    }

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

    .justify-content-around-xl {
        justify-content: space-around
    }

    .justify-content-evenly-xl {
        justify-content: space-evenly
    }

    .item-1-xl {
        flex     : 0 0 8.3333333333%;
        max-width: 8.3333333333%
    }

    .justify-content-xl-1 {
        justify-content: flex-start
    }

    .align-item-xl-1 {
        align-items: flex-start
    }

    .item-2-xl {
        flex     : 0 0 16.6666666667%;
        max-width: 16.6666666667%
    }

    .item-3-xl {
        flex     : 0 0 25%;
        max-width: 25%
    }

    .item-4-xl {
        flex     : 0 0 33.3333333333%;
        max-width: 33.3333333333%
    }

    .item-5-xl {
        flex     : 0 0 41.6666666667%;
        max-width: 41.6666666667%
    }

    .item-6-xl {
        flex     : 0 0 50%;
        max-width: 50%
    }

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

    .align-item-xl-6 {
        align-items: center
    }

    .item-7-xl {
        flex     : 0 0 58.3333333333%;
        max-width: 58.3333333333%
    }

    .item-8-xl {
        flex     : 0 0 66.6666666667%;
        max-width: 66.6666666667%
    }

    .item-9-xl {
        flex     : 0 0 75%;
        max-width: 75%
    }

    .item-10-xl {
        flex     : 0 0 83.3333333333%;
        max-width: 83.3333333333%
    }

    .item-11-xl {
        flex     : 0 0 91.6666666667%;
        max-width: 91.6666666667%
    }

    .item-12-xl {
        flex     : 0 0 100%;
        max-width: 100%
    }

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

    .align-item-xl-12 {
        align-items: flex-end
    }
}

@media (max-width: 500px) and (orientation: portrait) {
    .row-tp {
        display  : flex;
        flex-wrap: wrap
    }

    .column-tp {
        display       : flex;
        flex-direction: column
    }

    .item-tp {
        box-sizing: border-box;
        flex-grow : 1;
        flex-basis: 0;
        min-width : 0
    }

    .item-tp-auto {
        flex : 1 1 auto;
        width: auto
    }

    .gap-tp {
        display       : flex;
        gap           : .5em;
        padding-bottom: .5em
    }

    .not-gap-tp {
        gap           : 0em;
        padding-bottom: 1em
    }

    .not-wrap-tp {
        flex-wrap: nowrap
    }

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

    .justify-content-around-tp {
        justify-content: space-around
    }

    .justify-content-evenly-tp {
        justify-content: space-evenly
    }

    .item-1-tp {
        flex     : 0 0 8.3333333333%;
        max-width: 8.3333333333%
    }

    .justify-content-tp-1 {
        justify-content: flex-start
    }

    .align-item-tp-1 {
        align-items: flex-start
    }

    .item-2-tp {
        flex     : 0 0 16.6666666667%;
        max-width: 16.6666666667%
    }

    .item-3-tp {
        flex     : 0 0 25%;
        max-width: 25%
    }

    .item-4-tp {
        flex     : 0 0 33.3333333333%;
        max-width: 33.3333333333%
    }

    .item-5-tp {
        flex     : 0 0 41.6666666667%;
        max-width: 41.6666666667%
    }

    .item-6-tp {
        flex     : 0 0 50%;
        max-width: 50%
    }

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

    .align-item-tp-6 {
        align-items: center
    }

    .item-7-tp {
        flex     : 0 0 58.3333333333%;
        max-width: 58.3333333333%
    }

    .item-8-tp {
        flex     : 0 0 66.6666666667%;
        max-width: 66.6666666667%
    }

    .item-9-tp {
        flex     : 0 0 75%;
        max-width: 75%
    }

    .item-10-tp {
        flex     : 0 0 83.3333333333%;
        max-width: 83.3333333333%
    }

    .item-11-tp {
        flex     : 0 0 91.6666666667%;
        max-width: 91.6666666667%
    }

    .item-12-tp {
        flex     : 0 0 100%;
        max-width: 100%
    }

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

    .align-item-tp-12 {
        align-items: flex-end
    }
}

@media (max-width: 950px) and (orientation: landscape) {
    .row-tl {
        display  : flex;
        flex-wrap: wrap
    }

    .column-tl {
        display       : flex;
        flex-direction: column
    }

    .item-tl {
        box-sizing: border-box;
        flex-grow : 1;
        flex-basis: 0;
        min-width : 0
    }

    .item-tl-auto {
        flex : 1 1 auto;
        width: auto
    }

    .gap-tl {
        display       : flex;
        gap           : .5em;
        padding-bottom: .5em
    }

    .not-gap-tl {
        gap           : 0em;
        padding-bottom: 1em
    }

    .not-wrap-tl {
        flex-wrap: nowrap
    }

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

    .justify-content-around-tl {
        justify-content: space-around
    }

    .justify-content-evenly-tl {
        justify-content: space-evenly
    }

    .item-1-tl {
        flex     : 0 0 8.3333333333%;
        max-width: 8.3333333333%
    }

    .justify-content-tl-1 {
        justify-content: flex-start
    }

    .align-item-tl-1 {
        align-items: flex-start
    }

    .item-2-tl {
        flex     : 0 0 16.6666666667%;
        max-width: 16.6666666667%
    }

    .item-3-tl {
        flex     : 0 0 25%;
        max-width: 25%
    }

    .item-4-tl {
        flex     : 0 0 33.3333333333%;
        max-width: 33.3333333333%
    }

    .item-5-tl {
        flex     : 0 0 41.6666666667%;
        max-width: 41.6666666667%
    }

    .item-6-tl {
        flex     : 0 0 50%;
        max-width: 50%
    }

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

    .align-item-tl-6 {
        align-items: center
    }

    .item-7-tl {
        flex     : 0 0 58.3333333333%;
        max-width: 58.3333333333%
    }

    .item-8-tl {
        flex     : 0 0 66.6666666667%;
        max-width: 66.6666666667%
    }

    .item-9-tl {
        flex     : 0 0 75%;
        max-width: 75%
    }

    .item-10-tl {
        flex     : 0 0 83.3333333333%;
        max-width: 83.3333333333%
    }

    .item-11-tl {
        flex     : 0 0 91.6666666667%;
        max-width: 91.6666666667%
    }

    .item-12-tl {
        flex     : 0 0 100%;
        max-width: 100%
    }

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

    .align-item-tl-12 {
        align-items: flex-end
    }
}

@layer properties;
@layer theme,
base,
components,
utilities;

@layer theme {

    :root,
    :host {
        --font-sans                         : ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --font-mono                         : ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        --color-indigo-500                  : oklch(58.5% .233 277.117);
        --color-indigo-600                  : oklch(51.1% .262 276.966);
        --color-white                       : #fff;
        --spacing                           : .25rem;
        --container-xs                      : 20rem;
        --container-sm                      : 24rem;
        --container-md                      : 28rem;
        --container-lg                      : 32rem;
        --container-xl                      : 36rem;
        --container-4xl                     : 56rem;
        --container-5xl                     : 64rem;
        --text-xs                           : .75rem;
        --text-xs--line-height              : calc(1 / .75);
        --text-sm                           : .875rem;
        --text-sm--line-height              : calc(1.25 / .875);
        --text-lg                           : 1.125rem;
        --text-lg--line-height              : calc(1.75 / 1.125);
        --text-xl                           : 1.25rem;
        --text-xl--line-height              : calc(1.75 / 1.25);
        --text-2xl                          : 1.5rem;
        --text-2xl--line-height             : calc(2 / 1.5);
        --text-3xl                          : 1.875rem;
        --text-3xl--line-height             : 1.2;
        --text-4xl                          : 2.25rem;
        --text-4xl--line-height             : calc(2.5 / 2.25);
        --text-5xl                          : 3rem;
        --text-5xl--line-height             : 1;
        --font-weight-medium                : 500;
        --font-weight-semibold              : 600;
        --font-weight-bold                  : 700;
        --font-weight-black                 : 900;
        --tracking-wide                     : .025em;
        --radius-md                         : .375rem;
        --radius-lg                         : .5rem;
        --radius-xl                         : .75rem;
        --radius-2xl                        : 1rem;
        --aspect-video                      : 16 / 9;
        --default-transition-duration       : .15s;
        --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        --default-font-family               : var(--font-sans);
        --default-mono-font-family          : var(--font-mono)
    }
}

@layer base {

    *,
    :after,
    :before,
    ::backdrop,
    ::file-selector-button {
        box-sizing: border-box;
        margin    : 0;
        padding   : 0;
        border    : 0 solid
    }

    html,
    :host {
        line-height                : 1.5;
        -webkit-text-size-adjust   : 100%;
        tab-size                   : 4;
        font-family                : var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
        font-feature-settings      : var(--default-font-feature-settings, normal);
        font-variation-settings    : var(--default-font-variation-settings, normal);
        -webkit-tap-highlight-color: transparent
    }

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

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

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

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

    b,
    strong {
        font-weight: bolder
    }

    code,
    kbd,
    samp,
    pre {
        font-family            : var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
        font-feature-settings  : var(--default-mono-font-feature-settings, normal);
        font-variation-settings: var(--default-mono-font-variation-settings, normal);
        font-size              : 1em
    }

    small {
        font-size: 80%
    }

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

    sub {
        bottom: -.25em
    }

    sup {
        top: -.5em
    }

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

    :-moz-focusring {
        outline: auto
    }

    progress {
        vertical-align: baseline
    }

    summary {
        display: list-item
    }

    ol,
    ul,
    menu {
        list-style: none
    }

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

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

    button,
    input,
    select,
    optgroup,
    textarea,
    ::file-selector-button {
        font                   : inherit;
        font-feature-settings  : inherit;
        font-variation-settings: inherit;
        letter-spacing         : inherit;
        color                  : inherit;
        border-radius          : 0;
        background-color       : transparent;
        opacity                : 1
    }

    :where(select:is([multiple], [size])) optgroup {
        font-weight: bolder
    }

    :where(select:is([multiple], [size])) optgroup option {
        padding-inline-start: 20px
    }

    ::file-selector-button {
        margin-inline-end: 4px
    }

    ::placeholder {
        opacity: 1
    }

    @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
        ::placeholder {
            color: currentcolor
        }

        @supports (color: color-mix(in lab, red, red)) {
                {
                color: color-mix(in oklab, currentcolor 50%, transparent)
            }
        }
    }

    textarea {
        resize: vertical
    }

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

    ::-webkit-date-and-time-value {
        min-height: 1lh;
        text-align: inherit
    }

    ::-webkit-datetime-edit {
        display: inline-flex
    }

    ::-webkit-datetime-edit-fields-wrapper {
        padding: 0
    }

    ::-webkit-datetime-edit,
    ::-webkit-datetime-edit-year-field,
    ::-webkit-datetime-edit-month-field,
    ::-webkit-datetime-edit-day-field,
    ::-webkit-datetime-edit-hour-field,
    ::-webkit-datetime-edit-minute-field,
    ::-webkit-datetime-edit-second-field,
    ::-webkit-datetime-edit-millisecond-field,
    ::-webkit-datetime-edit-meridiem-field {
        padding-block: 0
    }

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

    button,
    input:where([type=button], [type=reset], [type=submit]),
    ::file-selector-button {
        appearance: button
    }

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

    [hidden]:where(:not([hidden=until-found])) {
        display: none !important
    }
}

@layer utilities {
    .menu {
        display         : flex;
        width           : fit-content;
        flex-direction  : column;
        flex-wrap       : wrap;
        padding         : .5rem;
        --menu-active-fg: var(--color-neutral-content);
        --menu-active-bg: var(--color-neutral);
        font-size       : .875rem
    }

    .menu :where(li ul) {
        position            : relative;
        margin-inline-start : 1rem;
        padding-inline-start: .5rem;
        white-space         : nowrap
    }

    .menu :where(li ul):before {
        position          : absolute;
        inset-inline-start: 0rem;
        top               : .75rem;
        bottom            : .75rem;
        background-color  : var(--color-base-content);
        opacity           : 10%;
        width             : var(--border);
        content           : ""
    }

    .menu :where(li>.menu-dropdown:not(.menu-dropdown-show)) {
        display: none
    }

    .menu :where(li:not(.menu-title)>*:not(ul, details, .menu-title, .btn)),
    .menu :where(li:not(.menu-title)>details>summary:not(.menu-title)) {
        display                   : grid;
        grid-auto-flow            : column;
        align-content             : flex-start;
        align-items               : center;
        gap                       : .5rem;
        border-radius             : var(--radius-field);
        padding-inline            : .75rem;
        padding-block             : .375rem;
        text-align                : start;
        transition-property       : color, background-color, box-shadow;
        transition-duration       : .2s;
        transition-timing-function: cubic-bezier(0, 0, .2, 1);
        grid-auto-columns         : minmax(auto, max-content) auto max-content;
        text-wrap                 : balance;
        -webkit-user-select       : none;
        user-select               : none
    }

    .menu :where(li>details>summary) {
        --tw-outline-style: none;
        outline-style     : none
    }

    @media (forced-colors: active) {
        .menu :where(li>details>summary) {
            outline       : 2px solid transparent;
            outline-offset: 2px
        }
    }

    .menu :where(li>details>summary)::-webkit-details-marker {
        display: none
    }

    :is(.menu :where(li>details>summary), .menu :where(li>.menu-dropdown-toggle)):after {
        justify-self       : flex-end;
        display            : block;
        height             : .375rem;
        width              : .375rem;
        rotate             : -135deg;
        translate          : 0 -1px;
        transition-property: rotate, translate;
        transition-duration: .2s;
        content            : "";
        transform-origin   : 50% 50%;
        box-shadow         : 2px 2px inset;
        pointer-events     : none
    }

    .menu :where(li>details[open]>summary):after,
    .menu :where(li>.menu-dropdown-toggle.menu-dropdown-show):after {
        rotate   : 45deg;
        translate: 0 1px
    }

    .menu :where(li:not(.menu-title, .disabled)>*:not(ul, details, .menu-title), li:not(.menu-title, .disabled)>details>summary:not(.menu-title)):not(.menu-active, :active, .btn).menu-focus,
    .menu :where(li:not(.menu-title, .disabled)>*:not(ul, details, .menu-title), li:not(.menu-title, .disabled)>details>summary:not(.menu-title)):not(.menu-active, :active, .btn):focus-visible {
        cursor            : pointer;
        background-color  : var(--color-base-content);
        color             : var(--color-base-content);
        --tw-outline-style: none;
        outline-style     : none
    }

    @supports (color: color-mix(in lab, red, red)) {

        .menu :where(li:not(.menu-title, .disabled)>*:not(ul, details, .menu-title), li:not(.menu-title, .disabled)>details>summary:not(.menu-title)):not(.menu-active, :active, .btn).menu-focus,
        .menu :where(li:not(.menu-title, .disabled)>*:not(ul, details, .menu-title), li:not(.menu-title, .disabled)>details>summary:not(.menu-title)):not(.menu-active, :active, .btn):focus-visible {
            background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent)
        }
    }

    @media (forced-colors: active) {

        .menu :where(li:not(.menu-title, .disabled)>*:not(ul, details, .menu-title), li:not(.menu-title, .disabled)>details>summary:not(.menu-title)):not(.menu-active, :active, .btn).menu-focus,
        .menu :where(li:not(.menu-title, .disabled)>*:not(ul, details, .menu-title), li:not(.menu-title, .disabled)>details>summary:not(.menu-title)):not(.menu-active, :active, .btn):focus-visible {
            outline       : 2px solid transparent;
            outline-offset: 2px
        }
    }

    .menu :where(li:not(.menu-title, .disabled)>*:not(ul, details, .menu-title):not(.menu-active, :active, .btn):hover, li:not(.menu-title, .disabled)>details>summary:not(.menu-title):not(.menu-active, :active, .btn):hover) {
        cursor            : pointer;
        background-color  : var(--color-base-content);
        --tw-outline-style: none;
        outline-style     : none;
        box-shadow        : 0 1px #00000003 inset, 0 -1px #ffffff03 inset
    }

    @supports (color: color-mix(in lab, red, red)) {
        .menu :where(li:not(.menu-title, .disabled)>*:not(ul, details, .menu-title):not(.menu-active, :active, .btn):hover, li:not(.menu-title, .disabled)>details>summary:not(.menu-title):not(.menu-active, :active, .btn):hover) {
            background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent)
        }
    }

    @media (forced-colors: active) {
        .menu :where(li:not(.menu-title, .disabled)>*:not(ul, details, .menu-title):not(.menu-active, :active, .btn):hover, li:not(.menu-title, .disabled)>details>summary:not(.menu-title):not(.menu-active, :active, .btn):hover) {
            outline       : 2px solid transparent;
            outline-offset: 2px
        }
    }

    .menu :where(li:empty) {
        background-color: var(--color-base-content);
        opacity         : 10%;
        margin          : .5rem 1rem;
        height          : 1px
    }

    .menu :where(li) {
        position      : relative;
        display       : flex;
        flex-shrink   : 0;
        flex-direction: column;
        flex-wrap     : wrap;
        align-items   : stretch
    }

    .menu :where(li) .badge {
        justify-self: flex-end
    }

    .menu :where(li)>*:not(ul, .menu-title, details, .btn):active,
    .menu :where(li)>*:not(ul, .menu-title, details, .btn).menu-active,
    .menu :where(li)>details>summary:active {
        --tw-outline-style: none;
        outline-style     : none;
        color             : var(--menu-active-fg);
        background-color  : var(--menu-active-bg);
        background-size   : auto, calc(var(--noise) * 100%);
        background-image  : none, var(--fx-noise)
    }

    @media (forced-colors: active) {

        .menu :where(li)>*:not(ul, .menu-title, details, .btn):active,
        .menu :where(li)>*:not(ul, .menu-title, details, .btn).menu-active,
        .menu :where(li)>details>summary:active {
            outline       : 2px solid transparent;
            outline-offset: 2px
        }
    }

    :is(.menu :where(li)>*:not(ul, .menu-title, details, .btn):active, .menu :where(li)>*:not(ul, .menu-title, details, .btn).menu-active, .menu :where(li)>details>summary:active):not(:is(.menu :where(li)>*:not(ul, .menu-title, details, .btn):active, .menu :where(li)>*:not(ul, .menu-title, details, .btn).menu-active, .menu :where(li)>details>summary:active):active) {
        box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--menu-active-bg)
    }

    .menu :where(li).menu-disabled {
        pointer-events: none;
        color         : var(--color-base-content)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .menu :where(li).menu-disabled {
            color: color-mix(in oklab, var(--color-base-content) 20%, transparent)
        }
    }

    .menu .dropdown:focus-within .menu-dropdown-toggle:after {
        rotate   : 45deg;
        translate: 0 1px
    }

    .menu .dropdown-content {
        margin-top: .5rem;
        padding   : .5rem
    }

    .menu .dropdown-content:before {
        display: none
    }

    .floating-label {
        position: relative;
        display : block
    }

    .floating-label input {
        display: block
    }

    .floating-label input::placeholder {
        transition: top .1s ease-out, translate .1s ease-out, scale .1s ease-out, opacity .1s ease-out
    }

    .floating-label textarea::placeholder {
        transition: top .1s ease-out, translate .1s ease-out, scale .1s ease-out, opacity .1s ease-out
    }

    .floating-label>span {
        position          : absolute;
        inset-inline-start: .75rem;
        z-index           : 1;
        background-color  : var(--color-base-100);
        padding-inline    : .25rem;
        opacity           : 0%;
        font-size         : .875rem;
        top               : calc(var(--size-field, .25rem) * 10 / 2);
        line-height       : 1;
        border-radius     : 2px;
        pointer-events    : none;
        translate         : 0 -50%;
        transition        : top .1s ease-out, translate .1s ease-out, scale .1s ease-out, opacity .1s ease-out
    }

    :is(.floating-label:focus-within, .floating-label:not(:has(input:placeholder-shown, textarea:placeholder-shown))) ::placeholder {
        opacity       : 0%;
        top           : 0;
        translate     : -12.5% calc(-50% - .125em);
        scale         : .75;
        pointer-events: auto
    }

    :is(.floating-label:focus-within, .floating-label:not(:has(input:placeholder-shown, textarea:placeholder-shown)))>span {
        opacity       : 100%;
        top           : 0;
        translate     : -12.5% calc(-50% - .125em);
        scale         : .75;
        pointer-events: auto;
        z-index       : 2
    }

    .floating-label:has(:disabled, [disabled])>span {
        opacity: 0%
    }

    .floating-label:has(.input-xs, .select-xs, .textarea-xs) span {
        font-size: .6875rem;
        top      : calc(var(--size-field, .25rem) * 6 / 2)
    }

    .floating-label:has(.input-sm, .select-sm, .textarea-sm) span {
        font-size: .75rem;
        top      : calc(var(--size-field, .25rem) * 8 / 2)
    }

    .floating-label:has(.input-md, .select-md, .textarea-md) span {
        font-size: .875rem;
        top      : calc(var(--size-field, .25rem) * 10 / 2)
    }

    .floating-label:has(.input-lg, .select-lg, .textarea-lg) span {
        font-size: 1.125rem;
        top      : calc(var(--size-field, .25rem) * 12 / 2)
    }

    .floating-label:has(.input-xl, .select-xl, .textarea-xl) span {
        font-size: 1.375rem;
        top      : calc(var(--size-field, .25rem) * 14 / 2)
    }

    .dropdown {
        position     : relative;
        display      : inline-block;
        position-area: var(--anchor-v, bottom) var(--anchor-h, span-right)
    }

    .dropdown>*:not(summary):focus {
        --tw-outline-style: none;
        outline-style     : none
    }

    @media (forced-colors: active) {
        .dropdown>*:not(summary):focus {
            outline       : 2px solid transparent;
            outline-offset: 2px
        }
    }

    .dropdown .dropdown-content {
        position: absolute
    }

    .dropdown:not(details, .dropdown-open, .dropdown-hover:hover, :focus-within) .dropdown-content {
        display         : none;
        transform-origin: top;
        opacity         : 0%;
        scale           : 95%
    }

    .dropdown[popover],
    .dropdown .dropdown-content {
        z-index                   : 999;
        animation                 : dropdown .2s;
        transition-property       : opacity, scale, display;
        transition-behavior       : allow-discrete;
        transition-duration       : .2s;
        transition-timing-function: cubic-bezier(.4, 0, .2, 1)
    }

    @starting-style {

        .dropdown[popover],
        .dropdown .dropdown-content {
            scale  : 95%;
            opacity: 0
        }
    }

    :is(.dropdown.dropdown-open, .dropdown:not(.dropdown-hover):focus, .dropdown:focus-within)>[tabindex]:first-child {
        pointer-events: none
    }

    :is(.dropdown.dropdown-open, .dropdown:not(.dropdown-hover):focus, .dropdown:focus-within) .dropdown-content {
        opacity: 100%
    }

    .dropdown.dropdown-hover:hover .dropdown-content {
        opacity: 100%;
        scale  : 100%
    }

    .dropdown:is(details) summary::-webkit-details-marker {
        display: none
    }

    :is(.dropdown.dropdown-open, .dropdown:focus, .dropdown:focus-within) .dropdown-content {
        scale: 100%
    }

    .dropdown:where([popover]) {
        background: #0000
    }

    .dropdown[popover] {
        position: fixed;
        color   : inherit
    }

    @supports not (position-area: bottom) {
        .dropdown[popover] {
            margin: auto
        }

        .dropdown[popover].dropdown-open:not(:popover-open) {
            display         : none;
            transform-origin: top;
            opacity         : 0%;
            scale           : 95%
        }

        .dropdown[popover]::backdrop {
            background-color: color-mix(in oklab, #000 30%, #0000)
        }
    }

    .dropdown[popover]:not(.dropdown-open, :popover-open) {
        display         : none;
        transform-origin: top;
        opacity         : 0%;
        scale           : 95%
    }

    .btn {
        display                   : inline-flex;
        flex-shrink               : 0;
        cursor                    : pointer;
        flex-wrap                 : nowrap;
        align-items               : center;
        justify-content           : center;
        gap                       : .375rem;
        text-align                : center;
        vertical-align            : middle;
        outline-offset            : 2px;
        webkit-user-select        : none;
        -webkit-user-select       : none;
        user-select               : none;
        padding-inline            : var(--btn-p);
        color                     : var(--btn-fg);
        --tw-prose-links          : var(--btn-fg);
        height                    : var(--size);
        font-size                 : var(--fontsize, .875rem);
        font-weight               : 600;
        outline-color             : var(--btn-color, var(--color-base-content));
        transition-property       : color, background-color, border-color, box-shadow;
        transition-timing-function: cubic-bezier(0, 0, .2, 1);
        transition-duration       : .2s;
        border-start-start-radius : var(--join-ss, var(--radius-field));
        border-start-end-radius   : var(--join-se, var(--radius-field));
        border-end-start-radius   : var(--join-es, var(--radius-field));
        border-end-end-radius     : var(--join-ee, var(--radius-field));
        background-color          : var(--btn-bg);
        background-size           : auto, calc(var(--noise) * 100%);
        background-image          : none, var(--btn-noise);
        border-width              : var(--border);
        border-style              : solid;
        border-color              : var(--btn-border);
        text-shadow               : 0 .5px oklch(100% 0 0 / calc(var(--depth) * .15));
        touch-action              : manipulation;
        box-shadow                : 0 .5px 0 .5px oklch(100% 0 0 / calc(var(--depth) * 6%)) inset, var(--btn-shadow);
        --size                    : calc(var(--size-field, .25rem) * 10);
        --btn-bg                  : var(--btn-color, var(--color-base-200));
        --btn-fg                  : var(--color-base-content);
        --btn-p                   : 1rem;
        --btn-border              : var(--btn-bg);
        --btn-shadow              : 0 3px 2px -2px var(--btn-bg), 0 4px 3px -2px var(--btn-bg);
        --btn-noise               : var(--fx-noise)
    }

    :where(.btn) {
        width: unset
    }

    @supports (color: color-mix(in lab, red, red)) {
        .btn {
            --btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%))
        }
    }

    @supports (color: color-mix(in lab, red, red)) {
        .btn {
            --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000), 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000)
        }
    }

    .prose .btn {
        text-decoration-line: none
    }

    @media (hover: hover) {
        .btn:hover {
            --btn-bg: var(--btn-color, var(--color-base-200))
        }

        @supports (color: color-mix(in lab, red, red)) {
            .btn:hover {
                --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%)
            }
        }
    }

    .btn:focus-visible {
        outline-width: 2px;
        outline-style: solid;
        isolation    : isolate
    }

    .btn:active:not(.btn-active) {
        translate   : 0 .5px;
        --btn-bg    : var(--btn-color, var(--color-base-200));
        --btn-border: var(--btn-color, var(--color-base-200));
        --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .btn:active:not(.btn-active) {
            --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 5%)
        }
    }

    @supports (color: color-mix(in lab, red, red)) {
        .btn:active:not(.btn-active) {
            --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%)
        }
    }

    .btn:is(:disabled, [disabled], .btn-disabled) {
        pointer-events: none;
        --btn-border  : #0000;
        --btn-noise   : none;
        --btn-fg      : var(--color-base-content)
    }

    .btn:is(:disabled, [disabled], .btn-disabled):not(.btn-link, .btn-ghost) {
        background-color: var(--color-base-content);
        box-shadow      : none
    }

    @supports (color: color-mix(in lab, red, red)) {
        .btn:is(:disabled, [disabled], .btn-disabled):not(.btn-link, .btn-ghost) {
            background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent)
        }
    }

    @supports (color: color-mix(in lab, red, red)) {
        .btn:is(:disabled, [disabled], .btn-disabled) {
            --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000)
        }
    }

    @media (hover: hover) {
        .btn:is(:disabled, [disabled], .btn-disabled):hover {
            pointer-events  : none;
            background-color: var(--color-neutral);
            --btn-border    : #0000;
            --btn-fg        : var(--color-base-content)
        }

        @supports (color: color-mix(in lab, red, red)) {
            .btn:is(:disabled, [disabled], .btn-disabled):hover {
                background-color: color-mix(in oklab, var(--color-neutral) 20%, transparent)
            }
        }

        @supports (color: color-mix(in lab, red, red)) {
            .btn:is(:disabled, [disabled], .btn-disabled):hover {
                --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000)
            }
        }
    }

    .btn:is(input[type=checkbox], input[type=radio]) {
        appearance: none
    }

    .btn:is(input[type=checkbox], input[type=radio]):after {
        content: attr(aria-label)
    }

    .btn:where(input:checked:not(.filter .btn)) {
        --btn-color: var(--color-primary);
        --btn-fg   : var(--color-primary-content);
        isolation  : isolate
    }

    .visible {
        visibility: visible
    }

    .list {
        display       : flex;
        flex-direction: column;
        font-size     : .875rem
    }

    .list :where(.list-row) {
        --list-grid-cols     : minmax(0, auto) 1fr;
        position             : relative;
        display              : grid;
        grid-auto-flow       : column;
        gap                  : 1rem;
        border-radius        : var(--radius-box);
        padding              : 1rem;
        word-break           : break-word;
        grid-template-columns: var(--list-grid-cols)
    }

    .list :where(.list-row):has(.list-col-grow:nth-child(1)) {
        --list-grid-cols: 1fr
    }

    .list :where(.list-row):has(.list-col-grow:nth-child(2)) {
        --list-grid-cols: minmax(0, auto) 1fr
    }

    .list :where(.list-row):has(.list-col-grow:nth-child(3)) {
        --list-grid-cols: minmax(0, auto) minmax(0, auto) 1fr
    }

    .list :where(.list-row):has(.list-col-grow:nth-child(4)) {
        --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr
    }

    .list :where(.list-row):has(.list-col-grow:nth-child(5)) {
        --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr
    }

    .list :where(.list-row):has(.list-col-grow:nth-child(6)) {
        --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr
    }

    .list :where(.list-row) :not(.list-col-wrap) {
        grid-row-start: 1
    }

    :is(.list>:not(:last-child).list-row, .list>:not(:last-child) .list-row):after {
        content      : "";
        border-bottom: var(--border) solid;
        inset-inline : var(--radius-box);
        position     : absolute;
        bottom       : 0rem;
        border-color : var(--color-base-content)
    }

    @supports (color: color-mix(in lab, red, red)) {
            {
            border-color: color-mix(in oklab, var(--color-base-content) 5%, transparent)
        }
    }

    .toggle {
        border               : var(--border) solid currentColor;
        color                : var(--input-color);
        position             : relative;
        display              : inline-grid;
        flex-shrink          : 0;
        cursor               : pointer;
        appearance           : none;
        place-content        : center;
        vertical-align       : middle;
        webkit-user-select   : none;
        -webkit-user-select  : none;
        user-select          : none;
        grid-template-columns: 0fr 1fr 1fr;
        --radius-selector-max: calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector));
        border-radius        : calc(var(--radius-selector) + min(var(--toggle-p), var(--radius-selector-max)) + min(var(--border), var(--radius-selector-max)));
        padding              : var(--toggle-p);
        box-shadow           : 0 1px currentColor inset;
        transition           : color .3s, grid-template-columns .2s;
        --input-color        : var(--color-base-content);
        --toggle-p           : calc(var(--size) * .125);
        --size               : calc(var(--size-selector, .25rem) * 6);
        width                : calc((var(--size) * 2) - (var(--border) + var(--toggle-p)) * 2);
        height               : var(--size)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .toggle {
            box-shadow: 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000) inset
        }
    }

    @supports (color: color-mix(in lab, red, red)) {
        .toggle {
            --input-color: color-mix(in oklab, var(--color-base-content) 50%, #0000)
        }
    }

    .toggle>* {
        z-index          : 1;
        grid-column      : span 1 / span 1;
        grid-column-start: 2;
        grid-row-start   : 1;
        height           : 100%;
        cursor           : pointer;
        appearance       : none;
        background-color : transparent;
        padding          : .125rem;
        transition       : opacity .2s, rotate .4s;
        border           : none
    }

    .toggle>*:focus {
        --tw-outline-style: none;
        outline-style     : none
    }

    @media (forced-colors: active) {
        .toggle>*:focus {
            outline       : 2px solid transparent;
            outline-offset: 2px
        }
    }

    .toggle>*:nth-child(2) {
        color : var(--color-base-100);
        rotate: 0deg
    }

    .toggle>*:nth-child(3) {
        color  : var(--color-base-100);
        opacity: 0%;
        rotate : -15deg
    }

    .toggle:has(:checked)>:nth-child(2) {
        opacity: 0%;
        rotate : 15deg
    }

    .toggle:has(:checked)>:nth-child(3) {
        opacity: 100%;
        rotate : 0deg
    }

    .toggle:before {
        position          : relative;
        inset-inline-start: 0rem;
        grid-column-start : 2;
        grid-row-start    : 1;
        aspect-ratio      : 1 / 1;
        height            : 100%;
        border-radius     : var(--radius-selector);
        background-color  : currentColor;
        translate         : 0;
        --tw-content      : "";
        content           : var(--tw-content);
        transition        : background-color .1s, translate .2s, inset-inline-start .2s;
        box-shadow        : 0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px currentColor;
        background-size   : auto, calc(var(--noise) * 100%);
        background-image  : none, var(--fx-noise)
    }

    @supports (color: color-mix(in lab, red, red)) {
            {
            box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000)
        }
    }

    @media (forced-colors: active) {
        .toggle:before {
            outline-style : var(--tw-outline-style);
            outline-width : 1px;
            outline-offset: -1px
        }
    }

    @media print {
        .toggle:before {
            outline       : .25rem solid;
            outline-offset: -1rem
        }
    }

    .toggle:focus-visible,
    .toggle:has(:focus-visible) {
        outline       : 2px solid currentColor;
        outline-offset: 2px
    }

    .toggle:checked,
    .toggle[aria-checked=true],
    .toggle:has(>input:checked) {
        grid-template-columns: 1fr 1fr 0fr;
        background-color     : var(--color-base-100);
        --input-color        : var(--color-base-content)
    }

    :is(.toggle:checked, .toggle[aria-checked=true], .toggle:has(>input:checked)):before {
        background-color: currentColor
    }

    @starting-style {
        :is(.toggle:checked, .toggle[aria-checked=true], .toggle:has(>input:checked)):before {
            opacity: 0
        }
    }

    .toggle:indeterminate {
        grid-template-columns: .5fr 1fr .5fr
    }

    .toggle:disabled {
        cursor : not-allowed;
        opacity: 30%
    }

    .toggle:disabled:before {
        background-color: transparent;
        border          : var(--border) solid currentColor
    }

    .input {
        cursor                   : text;
        border                   : var(--border) solid #0000;
        position                 : relative;
        display                  : inline-flex;
        flex-shrink              : 1;
        appearance               : none;
        align-items              : center;
        gap                      : .5rem;
        background-color         : var(--color-base-100);
        padding-inline           : .75rem;
        vertical-align           : middle;
        white-space              : nowrap;
        width                    : clamp(3rem, 20rem, 100%);
        height                   : var(--size);
        font-size                : .875rem;
        border-start-start-radius: var(--join-ss, var(--radius-field));
        border-start-end-radius  : var(--join-se, var(--radius-field));
        border-end-start-radius  : var(--join-es, var(--radius-field));
        border-end-end-radius    : var(--join-ee, var(--radius-field));
        border-color             : var(--input-color);
        box-shadow               : 0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset;
        --size                   : calc(var(--size-field, .25rem) * 10);
        --input-color            : var(--color-base-content)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .input {
            box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset
        }
    }

    @supports (color: color-mix(in lab, red, red)) {
        .input {
            --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000)
        }
    }

    .input:where(input) {
        display: inline-flex
    }

    .input :where(input) {
        display         : inline-flex;
        height          : 100%;
        width           : 100%;
        appearance      : none;
        background-color: transparent;
        border          : none
    }

    .input :where(input):focus,
    .input :where(input):focus-within {
        --tw-outline-style: none;
        outline-style     : none
    }

    @media (forced-colors: active) {

        .input :where(input):focus,
        .input :where(input):focus-within {
            outline       : 2px solid transparent;
            outline-offset: 2px
        }
    }

    .input :where(input[type=date]) {
        display: inline-block
    }

    .input:focus,
    .input:focus-within {
        --input-color : var(--color-base-content);
        box-shadow    : 0 1px var(--input-color);
        outline       : 2px solid var(--input-color);
        outline-offset: 2px;
        isolation     : isolate;
        z-index       : 1
    }

    @supports (color: color-mix(in lab, red, red)) {

        .input:focus,
        .input:focus-within {
            box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000)
        }
    }

    .input:has(>input[disabled]),
    .input:is(:disabled, [disabled]) {
        cursor          : not-allowed;
        border-color    : var(--color-base-200);
        background-color: var(--color-base-200);
        color           : var(--color-base-content);
        box-shadow      : none
    }

    @supports (color: color-mix(in lab, red, red)) {

        .input:has(>input[disabled]),
        .input:is(:disabled, [disabled]) {
            color: color-mix(in oklab, var(--color-base-content) 40%, transparent)
        }
    }

    :is(.input:has(>input[disabled]), .input:is(:disabled, [disabled]))::placeholder {
        color: var(--color-base-content)
    }

    @supports (color: color-mix(in lab, red, red)) {
            {
            color: color-mix(in oklab, var(--color-base-content) 20%, transparent)
        }
    }

    .input:has(>input[disabled])>input[disabled] {
        cursor: not-allowed
    }

    .input::-webkit-date-and-time-value {
        text-align: inherit
    }

    .input[type=number]::-webkit-inner-spin-button {
        margin-block     : -.75rem;
        margin-inline-end: -.75rem
    }

    .input::-webkit-calendar-picker-indicator {
        position        : absolute;
        inset-inline-end: .75em
    }

    .select {
        border                   : var(--border) solid #0000;
        position                 : relative;
        display                  : inline-flex;
        flex-shrink              : 1;
        appearance               : none;
        align-items              : center;
        gap                      : .375rem;
        background-color         : var(--color-base-100);
        padding-inline-start     : 1rem;
        padding-inline-end       : 1.75rem;
        vertical-align           : middle;
        width                    : clamp(3rem, 20rem, 100%);
        height                   : var(--size);
        font-size                : .875rem;
        border-start-start-radius: var(--join-ss, var(--radius-field));
        border-start-end-radius  : var(--join-se, var(--radius-field));
        border-end-start-radius  : var(--join-es, var(--radius-field));
        border-end-end-radius    : var(--join-ee, var(--radius-field));
        background-image         : linear-gradient(45deg, #0000 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, #0000 50%);
        background-position      : calc(100% - 20px) calc(1px + 50%), calc(100% - 16.1px) calc(1px + 50%);
        background-size          : 4px 4px, 4px 4px;
        background-repeat        : no-repeat;
        text-overflow            : ellipsis;
        box-shadow               : 0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset;
        border-color             : var(--input-color);
        --input-color            : var(--color-base-content);
        --size                   : calc(var(--size-field, .25rem) * 10)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .select {
            box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset
        }
    }

    @supports (color: color-mix(in lab, red, red)) {
        .select {
            --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000)
        }
    }

    [dir=rtl] .select {
        background-position: calc(0% + 12px) calc(1px + 50%), calc(0% + 16px) calc(1px + 50%)
    }

    .select select {
        margin-inline-start : -1rem;
        margin-inline-end   : -1.75rem;
        width               : calc(100% + 2.75rem);
        appearance          : none;
        padding-inline-start: 1rem;
        padding-inline-end  : 1.75rem;
        height              : calc(100% - 2px);
        background          : inherit;
        border-radius       : inherit;
        border-style        : none
    }

    .select select:focus,
    .select select:focus-within {
        --tw-outline-style: none;
        outline-style     : none
    }

    @media (forced-colors: active) {

        .select select:focus,
        .select select:focus-within {
            outline       : 2px solid transparent;
            outline-offset: 2px
        }
    }

    .select select:not(:last-child) {
        margin-inline-end: -1.375rem;
        background-image : none
    }

    .select:focus,
    .select:focus-within {
        --input-color : var(--color-base-content);
        box-shadow    : 0 1px var(--input-color);
        outline       : 2px solid var(--input-color);
        outline-offset: 2px;
        isolation     : isolate;
        z-index       : 1
    }

    @supports (color: color-mix(in lab, red, red)) {

        .select:focus,
        .select:focus-within {
            box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000)
        }
    }

    .select:has(>select[disabled]),
    .select:is(:disabled, [disabled]) {
        cursor          : not-allowed;
        border-color    : var(--color-base-200);
        background-color: var(--color-base-200);
        color           : var(--color-base-content)
    }

    @supports (color: color-mix(in lab, red, red)) {

        .select:has(>select[disabled]),
        .select:is(:disabled, [disabled]) {
            color: color-mix(in oklab, var(--color-base-content) 40%, transparent)
        }
    }

    :is(.select:has(>select[disabled]), .select:is(:disabled, [disabled]))::placeholder {
        color: var(--color-base-content)
    }

    @supports (color: color-mix(in lab, red, red)) {
            {
            color: color-mix(in oklab, var(--color-base-content) 20%, transparent)
        }
    }

    .select:has(>select[disabled])>select[disabled] {
        cursor: not-allowed
    }

    .timeline {
        position: relative;
        display : flex
    }

    .timeline>li {
        position             : relative;
        display              : grid;
        flex-shrink          : 0;
        align-items          : center;
        grid-template-rows   : var(--timeline-row-start, minmax(0, 1fr)) auto var(--timeline-row-end, minmax(0, 1fr));
        grid-template-columns: var(--timeline-col-start, minmax(0, 1fr)) auto var(--timeline-col-end, minmax(0, 1fr))
    }

    .timeline>li>hr {
        border: none;
        width : 100%
    }

    .timeline>li>hr:first-child {
        grid-column-start: 1;
        grid-row-start   : 2
    }

    .timeline>li>hr:last-child {
        grid-column-start: 3;
        grid-column-end  : none;
        grid-row-start   : 2;
        grid-row-end     : auto
    }

    @media print {
        .timeline>li>hr {
            border: .1px solid var(--color-base-300)
        }
    }

    .timeline :where(hr) {
        height          : .25rem;
        background-color: var(--color-base-300)
    }

    .timeline:has(.timeline-middle hr):first-child {
        border-start-start-radius: 0;
        border-end-start-radius  : 0;
        border-start-end-radius  : var(--radius-selector);
        border-end-end-radius    : var(--radius-selector)
    }

    .timeline:has(.timeline-middle hr):last-child {
        border-start-start-radius: var(--radius-selector);
        border-end-start-radius  : var(--radius-selector);
        border-start-end-radius  : 0;
        border-end-end-radius    : 0
    }

    .timeline:not(:has(.timeline-middle)) :first-child hr:last-child {
        border-start-start-radius: var(--radius-selector);
        border-end-start-radius  : var(--radius-selector);
        border-start-end-radius  : 0;
        border-end-end-radius    : 0
    }

    .timeline:not(:has(.timeline-middle)) :last-child hr:first-child {
        border-start-start-radius: 0;
        border-end-start-radius  : 0;
        border-start-end-radius  : var(--radius-selector);
        border-end-end-radius    : var(--radius-selector)
    }

    .card {
        position      : relative;
        display       : flex;
        flex-direction: column;
        border-radius : var(--radius-box);
        outline-width : 2px;
        transition    : outline .2s ease-in-out;
        outline       : 0 solid #0000;
        outline-offset: 2px
    }

    .card:focus {
        --tw-outline-style: none;
        outline-style     : none
    }

    @media (forced-colors: active) {
        .card:focus {
            outline       : 2px solid transparent;
            outline-offset: 2px
        }
    }

    .card:focus-visible {
        outline-color: currentColor
    }

    .card :where(figure:first-child) {
        overflow                 : hidden;
        border-start-start-radius: inherit;
        border-start-end-radius  : inherit;
        border-end-start-radius  : unset;
        border-end-end-radius    : unset
    }

    .card :where(figure:last-child) {
        overflow                 : hidden;
        border-start-start-radius: unset;
        border-start-end-radius  : unset;
        border-end-start-radius  : inherit;
        border-end-end-radius    : inherit
    }

    .card:where(.card-border) {
        border: var(--border) solid var(--color-base-200)
    }

    .card:where(.card-dash) {
        border: var(--border) dashed var(--color-base-200)
    }

    .card.image-full {
        display: grid
    }

    .card.image-full>* {
        grid-column-start: 1;
        grid-row-start   : 1
    }

    .card.image-full>.card-body {
        position: relative;
        color   : var(--color-neutral-content)
    }

    .card.image-full :where(figure) {
        overflow     : hidden;
        border-radius: inherit
    }

    .card.image-full>figure img {
        height    : 100%;
        object-fit: cover;
        filter    : brightness(28%)
    }

    .card figure {
        display        : flex;
        align-items    : center;
        justify-content: center
    }

    .card:has(>input:is(input[type=checkbox], input[type=radio])) {
        cursor             : pointer;
        -webkit-user-select: none;
        user-select        : none
    }

    .card:has(>:checked) {
        outline: 2px solid currentColor
    }

    .avatar {
        position      : relative;
        display       : inline-flex;
        vertical-align: middle
    }

    .avatar>div {
        display     : block;
        aspect-ratio: 1 / 1;
        overflow    : hidden
    }

    .avatar img {
        height    : 100%;
        width     : 100%;
        object-fit: cover
    }

    .checkbox {
        border          : var(--border) solid var(--input-color, var(--color-base-content));
        position        : relative;
        flex-shrink     : 0;
        cursor          : pointer;
        appearance      : none;
        border-radius   : var(--radius-selector);
        padding         : .25rem;
        vertical-align  : middle;
        color           : var(--color-base-content);
        box-shadow      : 0 1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 0 #0000 inset, 0 0 #0000;
        transition      : background-color .2s, box-shadow .2s;
        --size          : calc(var(--size-selector, .25rem) * 6);
        width           : var(--size);
        height          : var(--size);
        background-size : auto, calc(var(--noise) * 100%);
        background-image: none, var(--fx-noise)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .checkbox {
            border: var(--border) solid var(--input-color, color-mix(in oklab, var(--color-base-content) 20%, #0000))
        }
    }

    .checkbox:before {
        --tw-content    : "";
        content         : var(--tw-content);
        display         : block;
        width           : 100%;
        height          : 100%;
        rotate          : 45deg;
        background-color: currentColor;
        opacity         : 0%;
        transition      : clip-path .3s, opacity .1s, rotate .3s, translate .3s;
        transition-delay: .1s;
        clip-path       : polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%);
        box-shadow      : 0 3px oklch(100% 0 0 / calc(var(--depth) * .1)) inset;
        font-size       : 1rem;
        line-height     : .75
    }

    .checkbox:focus-visible {
        outline       : 2px solid var(--input-color, currentColor);
        outline-offset: 2px
    }

    .checkbox:checked,
    .checkbox[aria-checked=true] {
        background-color: var(--input-color, #0000);
        box-shadow      : 0 0 #0000 inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * .1))
    }

    :is(.checkbox:checked, .checkbox[aria-checked=true]):before {
        clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%);
        opacity  : 100%
    }

    @media (forced-colors: active) {
        :is(.checkbox:checked, .checkbox[aria-checked=true]):before {
            rotate          : 0deg;
            background-color: transparent;
            --tw-content    : "\2714\fe0e";
            clip-path       : none
        }
    }

    @media print {
        :is(.checkbox:checked, .checkbox[aria-checked=true]):before {
            rotate          : 0deg;
            background-color: transparent;
            --tw-content    : "\2714\fe0e";
            clip-path       : none
        }
    }

    .checkbox:indeterminate:before {
        rotate   : 0deg;
        opacity  : 100%;
        translate: 0 -35%;
        clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%)
    }

    .checkbox:disabled {
        cursor : not-allowed;
        opacity: 20%
    }

    .radio {
        position      : relative;
        flex-shrink   : 0;
        cursor        : pointer;
        appearance    : none;
        border-radius : calc(infinity * 1px);
        padding       : .25rem;
        vertical-align: middle;
        border        : var(--border) solid var(--input-color, currentColor);
        box-shadow    : 0 1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset;
        --size        : calc(var(--size-selector, .25rem) * 6);
        width         : var(--size);
        height        : var(--size);
        color         : var(--input-color, currentColor)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .radio {
            border: var(--border) solid var(--input-color, color-mix(in srgb, currentColor 20%, #0000))
        }
    }

    .radio:before {
        display         : block;
        width           : 100%;
        height          : 100%;
        border-radius   : calc(infinity * 1px);
        --tw-content    : "";
        content         : var(--tw-content);
        background-size : auto, calc(var(--noise) * 100%);
        background-image: none, var(--fx-noise)
    }

    .radio:focus-visible {
        outline: 2px solid currentColor
    }

    .radio:checked,
    .radio[aria-checked=true] {
        animation       : radio .2s ease-out;
        border-color    : currentColor;
        background-color: var(--color-base-100)
    }

    :is(.radio:checked, .radio[aria-checked=true]):before {
        background-color: currentColor;
        box-shadow      : 0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * .1))
    }

    @media (forced-colors: active) {
        :is(.radio:checked, .radio[aria-checked=true]):before {
            outline-style : var(--tw-outline-style);
            outline-width : 1px;
            outline-offset: -1px
        }
    }

    @media print {
        :is(.radio:checked, .radio[aria-checked=true]):before {
            outline       : .25rem solid;
            outline-offset: -1rem
        }
    }

    .radio:disabled {
        cursor : not-allowed;
        opacity: 20%
    }

    .rating {
        position      : relative;
        display       : inline-flex;
        vertical-align: middle
    }

    .rating input {
        border    : none;
        appearance: none
    }

    .rating :where(*) {
        animation       : rating .25s ease-out;
        height          : 1.5rem;
        width           : 1.5rem;
        border-radius   : 0;
        background-color: var(--color-base-content);
        opacity         : 20%
    }

    .rating :where(*):is(input) {
        cursor: pointer
    }

    .rating .rating-hidden {
        width           : .5rem;
        background-color: transparent
    }

    .rating input[type=radio]:checked {
        background-image: none
    }

    .rating *:checked,
    .rating *[aria-checked=true],
    .rating *[aria-current=true],
    .rating *:has(~*:checked, ~*[aria-checked=true], ~*[aria-current=true]) {
        opacity: 100%
    }

    .rating *:focus-visible {
        transition: scale .2s ease-out;
        scale     : 1.1
    }

    .rating *:active:focus {
        animation: none;
        scale    : 1.1
    }

    .rating.rating-xs :where(*:not(.rating-hidden)) {
        width : 1rem;
        height: 1rem
    }

    .rating.rating-sm :where(*:not(.rating-hidden)) {
        width : 1.25rem;
        height: 1.25rem
    }

    .rating.rating-md :where(*:not(.rating-hidden)) {
        width : 1.5rem;
        height: 1.5rem
    }

    .rating.rating-lg :where(*:not(.rating-hidden)) {
        width : 1.75rem;
        height: 1.75rem
    }

    .rating.rating-xl :where(*:not(.rating-hidden)) {
        width : 2rem;
        height: 2rem
    }

    .static {
        position: static
    }

    .hero-content {
        isolation      : isolate;
        display        : flex;
        max-width      : 80rem;
        align-items    : center;
        justify-content: center;
        gap            : 1rem;
        padding        : 1rem
    }

    .textarea {
        border              : var(--border) solid #0000;
        min-height          : 5rem;
        flex-shrink         : 1;
        appearance          : none;
        border-radius       : var(--radius-field);
        background-color    : var(--color-base-100);
        padding-block       : .5rem;
        vertical-align      : middle;
        width               : clamp(3rem, 20rem, 100%);
        padding-inline-start: .75rem;
        padding-inline-end  : .75rem;
        font-size           : .875rem;
        border-color        : var(--input-color);
        box-shadow          : 0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset;
        --input-color       : var(--color-base-content)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .textarea {
            box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset
        }
    }

    @supports (color: color-mix(in lab, red, red)) {
        .textarea {
            --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000)
        }
    }

    .textarea textarea {
        appearance      : none;
        background-color: transparent;
        border          : none
    }

    .textarea textarea:focus,
    .textarea textarea:focus-within {
        --tw-outline-style: none;
        outline-style     : none
    }

    @media (forced-colors: active) {

        .textarea textarea:focus,
        .textarea textarea:focus-within {
            outline       : 2px solid transparent;
            outline-offset: 2px
        }
    }

    .textarea:focus,
    .textarea:focus-within {
        --input-color : var(--color-base-content);
        box-shadow    : 0 1px var(--input-color);
        outline       : 2px solid var(--input-color);
        outline-offset: 2px;
        isolation     : isolate
    }

    @supports (color: color-mix(in lab, red, red)) {

        .textarea:focus,
        .textarea:focus-within {
            box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000)
        }
    }

    .textarea:has(>textarea[disabled]),
    .textarea:is(:disabled, [disabled]) {
        cursor          : not-allowed;
        border-color    : var(--color-base-200);
        background-color: var(--color-base-200);
        color           : var(--color-base-content);
        box-shadow      : none
    }

    @supports (color: color-mix(in lab, red, red)) {

        .textarea:has(>textarea[disabled]),
        .textarea:is(:disabled, [disabled]) {
            color: color-mix(in oklab, var(--color-base-content) 40%, transparent)
        }
    }

    :is(.textarea:has(>textarea[disabled]), .textarea:is(:disabled, [disabled]))::placeholder {
        color: var(--color-base-content)
    }

    @supports (color: color-mix(in lab, red, red)) {
            {
            color: color-mix(in oklab, var(--color-base-content) 20%, transparent)
        }
    }

    .textarea:has(>textarea[disabled])>textarea[disabled] {
        cursor: not-allowed
    }

    .z-1 {
        z-index: 1
    }

    .timeline-end {
        grid-column-start: 1;
        grid-column-end  : 4;
        grid-row-start   : 3;
        grid-row-end     : 4;
        margin           : .25rem;
        align-self       : flex-start;
        justify-self     : center
    }

    .timeline-start {
        grid-column-start: 1;
        grid-column-end  : 4;
        grid-row-start   : 1;
        grid-row-end     : 2;
        margin           : .25rem;
        align-self       : flex-end;
        justify-self     : center
    }

    .timeline-vertical {
        flex-direction: column
    }

    .timeline-vertical>li {
        justify-items       : center;
        --timeline-row-start: minmax(0, 1fr);
        --timeline-row-end  : minmax(0, 1fr)
    }

    .timeline-vertical>li>hr {
        height: 100%;
        width : .25rem
    }

    .timeline-vertical>li>hr:first-child {
        grid-column-start: 2;
        grid-row-start   : 1
    }

    .timeline-vertical>li>hr:last-child {
        grid-column-start: 2;
        grid-column-end  : auto;
        grid-row-start   : 3;
        grid-row-end     : none
    }

    .timeline-vertical .timeline-start {
        grid-column-start: 1;
        grid-column-end  : 2;
        grid-row-start   : 1;
        grid-row-end     : 4;
        align-self       : center;
        justify-self     : flex-end
    }

    .timeline-vertical .timeline-end {
        grid-column-start: 3;
        grid-column-end  : 4;
        grid-row-start   : 1;
        grid-row-end     : 4;
        align-self       : center;
        justify-self     : flex-start
    }

    .timeline-vertical:has(.timeline-middle)>li>hr:first-child {
        border-top-left-radius    : 0;
        border-top-right-radius   : 0;
        border-bottom-right-radius: var(--radius-selector);
        border-bottom-left-radius : var(--radius-selector)
    }

    .timeline-vertical:has(.timeline-middle)>li>hr:last-child {
        border-top-left-radius    : var(--radius-selector);
        border-top-right-radius   : var(--radius-selector);
        border-bottom-right-radius: 0;
        border-bottom-left-radius : 0
    }

    .timeline-vertical:not(:has(.timeline-middle)) :first-child>hr:last-child {
        border-top-left-radius    : var(--radius-selector);
        border-top-right-radius   : var(--radius-selector);
        border-bottom-right-radius: 0;
        border-bottom-left-radius : 0
    }

    .timeline-vertical:not(:has(.timeline-middle)) :last-child>hr:first-child {
        border-top-left-radius    : 0;
        border-top-right-radius   : 0;
        border-bottom-right-radius: var(--radius-selector);
        border-bottom-left-radius : var(--radius-selector)
    }

    .timeline-vertical.timeline-snap-icon>li {
        --timeline-col-start: minmax(0, 1fr);
        --timeline-row-start: .5rem
    }

    .hero {
        display            : grid;
        width              : 100%;
        place-items        : center;
        background-size    : cover;
        background-position: center
    }

    .hero>* {
        grid-column-start: 1;
        grid-row-start   : 1
    }

    .timeline-middle {
        grid-column-start: 2;
        grid-row-start   : 2
    }

    .list-col-wrap {
        grid-row-start: 2
    }

    .mx-auto {
        margin-inline: auto
    }

    .input-md {
        --size   : calc(var(--size-field, .25rem) * 10);
        font-size: .875rem
    }

    .input-md[type=number]::-webkit-inner-spin-button {
        margin-block     : -.75rem;
        margin-inline-end: -.75rem
    }

    .mt-2 {
        margin-top: calc(var(--spacing) * 2)
    }

    .mt-4 {
        margin-top: calc(var(--spacing) * 4)
    }

    .mt-10 {
        margin-top: calc(var(--spacing) * 10)
    }

    .footer-title {
        margin-bottom : .5rem;
        text-transform: uppercase;
        opacity       : 60%;
        font-weight   : 600
    }

    .mb-3 {
        margin-bottom: calc(var(--spacing) * 3)
    }

    .mb-4 {
        margin-bottom: calc(var(--spacing) * 4)
    }

    .mb-6 {
        margin-bottom: calc(var(--spacing) * 6)
    }

    .mb-8 {
        margin-bottom: calc(var(--spacing) * 8)
    }

    .mb-10 {
        margin-bottom: calc(var(--spacing) * 10)
    }

    .navbar {
        display    : flex;
        width      : 100%;
        align-items: center;
        padding    : .5rem;
        min-height : 4rem
    }

    .footer {
        display       : grid;
        width         : 100%;
        grid-auto-flow: row;
        place-items   : start;
        column-gap    : 1rem;
        row-gap       : 2.5rem;
        font-size     : .875rem;
        line-height   : 1.25rem
    }

    .footer>* {
        display    : grid;
        place-items: start;
        gap        : .5rem
    }

    .footer.footer-center {
        grid-auto-flow: column dense;
        place-items   : center;
        text-align    : center
    }

    .footer.footer-center>* {
        place-items: center
    }

    .card-body {
        display       : flex;
        flex          : auto;
        flex-direction: column;
        gap           : .5rem;
        padding       : var(--card-p, 1.5rem);
        font-size     : var(--card-fs, .875rem)
    }

    .card-body :where(p) {
        flex-grow: 1
    }

    .card-actions {
        display    : flex;
        flex-wrap  : wrap;
        align-items: flex-start;
        gap        : .5rem
    }

    .card-title {
        display    : flex;
        align-items: center;
        gap        : .5rem;
        font-size  : var(--cardtitle-fs, 1.125rem);
        font-weight: 600
    }

    .chat {
        display      : grid;
        column-gap   : .75rem;
        padding-block: .25rem
    }

    .block {
        display: block
    }

    .flex {
        display: flex
    }

    .grid {
        display: grid
    }

    .inline-block {
        display: inline-block
    }

    .aspect-video {
        aspect-ratio: var(--aspect-video)
    }

    .card-side {
        align-items   : stretch;
        flex-direction: row
    }

    .card-side :where(figure:first-child) {
        overflow                 : hidden;
        border-start-start-radius: inherit;
        border-start-end-radius  : unset;
        border-end-start-radius  : inherit;
        border-end-end-radius    : unset
    }

    .card-side :where(figure:last-child) {
        overflow                 : hidden;
        border-start-start-radius: unset;
        border-start-end-radius  : inherit;
        border-end-start-radius  : unset;
        border-end-end-radius    : inherit
    }

    .card-side figure>* {
        max-width: unset
    }

    .card-side :where(figure>*) {
        width     : 100%;
        height    : 100%;
        object-fit: cover
    }

    .btn-circle {
        border-radius : calc(infinity * 1px);
        padding-inline: 0rem;
        width         : var(--size);
        height        : var(--size)
    }

    .btn-square {
        padding-inline: 0rem;
        width         : var(--size);
        height        : var(--size)
    }

    .size-14 {
        width : calc(var(--spacing) * 14);
        height: calc(var(--spacing) * 14)
    }

    .size-\[1\.2em\] {
        width : 1.2em;
        height: 1.2em
    }

    .h-4 {
        height: calc(var(--spacing) * 4)
    }

    .h-5 {
        height: calc(var(--spacing) * 5)
    }

    .h-15 {
        height: calc(var(--spacing) * 15)
    }

    .min-h-10 {
        min-height: calc(var(--spacing) * 10)
    }

    .min-h-25 {
        min-height: calc(var(--spacing) * 25)
    }

    .min-h-30 {
        min-height: calc(var(--spacing) * 30)
    }

    .min-h-50 {
        min-height: calc(var(--spacing) * 50)
    }

    .min-h-70 {
        min-height: calc(var(--spacing) * 70)
    }

    .min-h-75 {
        min-height: calc(var(--spacing) * 75)
    }

    .min-h-100 {
        min-height: calc(var(--spacing) * 100)
    }

    .min-h-120 {
        min-height: calc(var(--spacing) * 120)
    }

    .min-h-125 {
        min-height: calc(var(--spacing) * 125)
    }

    .min-h-150 {
        min-height: calc(var(--spacing) * 150)
    }

    .min-h-175 {
        min-height: calc(var(--spacing) * 175)
    }

    .min-h-200 {
        min-height: calc(var(--spacing) * 200)
    }

    .min-h-325 {
        min-height: calc(var(--spacing) * 325)
    }

    .min-h-screen {
        min-height: 100vh
    }

    .w-5 {
        width: calc(var(--spacing) * 5)
    }

    .w-10 {
        width: calc(var(--spacing) * 10)
    }

    .w-11 {
        width: calc(var(--spacing) * 11)
    }

    .w-12 {
        width: calc(var(--spacing) * 12)
    }

    .w-15 {
        width: calc(var(--spacing) * 15)
    }

    .w-20 {
        width: calc(var(--spacing) * 20)
    }

    .w-25 {
        width: calc(var(--spacing) * 25)
    }

    .w-30 {
        width: calc(var(--spacing) * 30)
    }

    .w-32 {
        width: calc(var(--spacing) * 32)
    }

    .w-35 {
        width: calc(var(--spacing) * 35)
    }

    .w-38 {
        width: calc(var(--spacing) * 38)
    }

    .w-39 {
        width: calc(var(--spacing) * 39)
    }

    .w-40 {
        width: calc(var(--spacing) * 40)
    }

    .w-42 {
        width: calc(var(--spacing) * 42)
    }

    .w-45 {
        width: calc(var(--spacing) * 45)
    }

    .w-50 {
        width: calc(var(--spacing) * 50)
    }

    .w-52 {
        width: calc(var(--spacing) * 52)
    }

    .w-60 {
        width: calc(var(--spacing) * 60)
    }

    .w-65 {
        width: calc(var(--spacing) * 65)
    }

    .w-80 {
        width: calc(var(--spacing) * 80)
    }

    .w-90 {
        width: calc(var(--spacing) * 90)
    }

    .w-100 {
        width: calc(var(--spacing) * 100)
    }

    .w-175 {
        width: calc(var(--spacing) * 175)
    }

    .w-full {
        width: 100%
    }

    .w-md {
        width: var(--container-md)
    }

    .max-w-4xl {
        max-width: var(--container-4xl)
    }

    .max-w-5xl {
        max-width: var(--container-5xl)
    }

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

    .max-w-lg {
        max-width: var(--container-lg)
    }

    .max-w-md {
        max-width: var(--container-md)
    }

    .max-w-sm {
        max-width: var(--container-sm)
    }

    .max-w-xl {
        max-width: var(--container-xl)
    }

    .max-w-xs {
        max-width: var(--container-xs)
    }

    .shrink-0 {
        flex-shrink: 0
    }

    .transform {
        transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, )
    }

    .skeleton {
        border-radius        : var(--radius-box);
        background-color     : var(--color-base-300);
        will-change          : background-position;
        animation            : skeleton 1.8s ease-in-out infinite;
        background-image     : linear-gradient(105deg, #0000 0% 40%, var(--color-base-100) 50%, #0000 60% 100%);
        background-size      : 200% auto;
        background-repeat    : no-repeat;
        background-position-x: -50%
    }

    @media (prefers-reduced-motion: reduce) {
        .skeleton {
            transition-duration: 15s
        }
    }

    .link {
        cursor              : pointer;
        text-decoration-line: underline
    }

    .link:focus {
        --tw-outline-style: none;
        outline-style     : none
    }

    @media (forced-colors: active) {
        .link:focus {
            outline       : 2px solid transparent;
            outline-offset: 2px
        }
    }

    .link:focus-visible {
        outline       : 2px solid currentColor;
        outline-offset: 2px
    }

    .list-inside {
        list-style-position: inside
    }

    .list-decimal {
        list-style-type: decimal
    }

    .list-disc {
        list-style-type: disc
    }

    .grid-flow-col {
        grid-auto-flow: column
    }

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

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

    .flex-col {
        flex-direction: column
    }

    .items-center {
        align-items: center
    }

    .justify-center {
        justify-content: center
    }

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

    .gap-4 {
        gap: calc(var(--spacing) * 4)
    }

    .gap-6 {
        gap: calc(var(--spacing) * 6)
    }

    .gap-10 {
        gap: calc(var(--spacing) * 10)
    }

    .gap-25 {
        gap: calc(var(--spacing) * 25)
    }

    :where(.space-y-1>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start  : calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
        margin-block-end    : calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)))
    }

    :where(.space-y-2>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start  : calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
        margin-block-end    : calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))
    }

    .overflow-hidden {
        overflow: hidden
    }

    .rounded-2xl {
        border-radius: var(--radius-2xl)
    }

    .rounded-box {
        border-radius: var(--radius-box)
    }

    .rounded-full {
        border-radius: calc(infinity * 1px)
    }

    .rounded-lg {
        border-radius: var(--radius-lg)
    }

    .rounded-md {
        border-radius: var(--radius-md)
    }

    .rounded-xl {
        border-radius: var(--radius-xl)
    }

    .border {
        border-style: var(--tw-border-style);
        border-width: 1px
    }

    .bg-base-100 {
        background-color: var(--color-base-100)
    }

    .bg-base-200 {
        background-color: var(--color-base-200)
    }

    .bg-base-300 {
        background-color: var(--color-base-300)
    }

    .bg-indigo-600 {
        background-color: var(--color-indigo-600)
    }

    .bg-primary {
        background-color: var(--color-primary)
    }

    .object-cover {
        object-fit: cover
    }

    .p-2 {
        padding: calc(var(--spacing) * 2)
    }

    .p-4 {
        padding: calc(var(--spacing) * 4)
    }

    .p-6 {
        padding: calc(var(--spacing) * 6)
    }

    .p-10 {
        padding: calc(var(--spacing) * 10)
    }

    .p-50 {
        padding: calc(var(--spacing) * 50)
    }

    .menu-title {
        padding-inline: .75rem;
        padding-block : .5rem;
        color         : var(--color-base-content);
        font-size     : .875rem;
        font-weight   : 600
    }

    @supports (color: color-mix(in lab, red, red)) {
        .menu-title {
            color: color-mix(in oklab, var(--color-base-content) 40%, transparent)
        }
    }

    .px-4 {
        padding-inline: calc(var(--spacing) * 4)
    }

    .px-6 {
        padding-inline: calc(var(--spacing) * 6)
    }

    .px-10 {
        padding-inline: calc(var(--spacing) * 10)
    }

    .py-2 {
        padding-block: calc(var(--spacing) * 2)
    }

    .py-3 {
        padding-block: calc(var(--spacing) * 3)
    }

    .py-4 {
        padding-block: calc(var(--spacing) * 4)
    }

    .py-6 {
        padding-block: calc(var(--spacing) * 6)
    }

    .py-7 {
        padding-block: calc(var(--spacing) * 7)
    }

    .py-10 {
        padding-block: calc(var(--spacing) * 10)
    }

    .py-12 {
        padding-block: calc(var(--spacing) * 12)
    }

    .py-16 {
        padding-block: calc(var(--spacing) * 16)
    }

    .pt-10 {
        padding-top: calc(var(--spacing) * 10)
    }

    .pb-2 {
        padding-bottom: calc(var(--spacing) * 2)
    }

    .text-center {
        text-align: center
    }

    .text-justify {
        text-align: justify
    }

    .text-left {
        text-align: left
    }

    .font-mono {
        font-family: var(--font-mono)
    }

    .text-2xl {
        font-size  : var(--text-2xl);
        line-height: var(--tw-leading, var(--text-2xl--line-height))
    }

    .text-3xl {
        font-size  : var(--text-3xl);
        line-height: var(--tw-leading, var(--text-3xl--line-height))
    }

    .text-4xl {
        font-size  : var(--text-4xl);
        line-height: var(--tw-leading, var(--text-4xl--line-height))
    }

    .text-5xl {
        font-size  : var(--text-5xl);
        line-height: var(--tw-leading, var(--text-5xl--line-height))
    }

    .text-lg {
        font-size  : var(--text-lg);
        line-height: var(--tw-leading, var(--text-lg--line-height))
    }

    .text-sm {
        font-size  : var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height))
    }

    .text-xl {
        font-size  : var(--text-xl);
        line-height: var(--tw-leading, var(--text-xl--line-height))
    }

    .text-xs {
        font-size  : var(--text-xs);
        line-height: var(--tw-leading, var(--text-xs--line-height))
    }

    .textarea-md {
        font-size: .875rem
    }

    .font-black {
        --tw-font-weight: var(--font-weight-black);
        font-weight     : var(--font-weight-black)
    }

    .font-bold {
        --tw-font-weight: var(--font-weight-bold);
        font-weight     : var(--font-weight-bold)
    }

    .font-medium {
        --tw-font-weight: var(--font-weight-medium);
        font-weight     : var(--font-weight-medium)
    }

    .font-semibold {
        --tw-font-weight: var(--font-weight-semibold);
        font-weight     : var(--font-weight-semibold)
    }

    .tracking-wide {
        --tw-tracking : var(--tracking-wide);
        letter-spacing: var(--tracking-wide)
    }

    .link-info {
        color: var(--color-info)
    }

    @media (hover: hover) {
        .link-info:hover {
            color: var(--color-info)
        }

        @supports (color: color-mix(in lab, red, red)) {
            .link-info:hover {
                color: color-mix(in oklab, var(--color-info) 80%, #000)
            }
        }
    }

    .text-base-content {
        color: var(--color-base-content)
    }

    .text-white {
        color: var(--color-white)
    }

    .italic {
        font-style: italic
    }

    .link-hover {
        text-decoration-line: none
    }

    @media (hover: hover) {
        .link-hover:hover {
            text-decoration-line: underline
        }
    }

    .opacity-60 {
        opacity: 60%
    }

    .shadow {
        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));
        box-shadow : var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-2xl {
        --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / .25));
        box-shadow : var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-md {
        --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));
        box-shadow : var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-sm {
        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));
        box-shadow : var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-xl {
        --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));
        box-shadow : var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .btn-ghost:not(.btn-active, :hover, :active:focus, :focus-visible) {
        --btn-shadow: "";
        --btn-bg    : #0000;
        --btn-border: #0000;
        --btn-noise : none
    }

    .btn-ghost:not(.btn-active, :hover, :active:focus, :focus-visible):not(:disabled, [disabled], .btn-disabled) {
        outline-color: currentColor;
        --btn-fg     : currentColor
    }

    .transition {
        transition-property       : color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration       : var(--tw-duration, var(--default-transition-duration))
    }

    .transition-shadow {
        transition-property       : box-shadow;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration       : var(--tw-duration, var(--default-transition-duration))
    }

    .timeline-snap-icon>li {
        --timeline-col-start: .5rem;
        --timeline-row-start: minmax(0, 1fr)
    }

    @media (hover: hover) {
        .hover\:bg-indigo-500:hover {
            background-color: var(--color-indigo-500)
        }
    }

    @media (hover: hover) {
        .hover\:shadow-lg:hover {
            --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));
            box-shadow : var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
        }
    }

    @media (hover: hover) {
        .hover\:shadow-xl:hover {
            --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));
            box-shadow : var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
        }
    }

    @media (width < 48rem) {
        .max-md\:timeline-compact {
            --timeline-row-start: 0
        }

        .max-md\:timeline-compact .timeline-start {
            grid-column-start: 1;
            grid-column-end  : 4;
            grid-row-start   : 3;
            grid-row-end     : 4;
            align-self       : flex-start;
            justify-self     : center
        }

        .max-md\:timeline-compact li:has(.timeline-start) .timeline-end {
            grid-column-start: none;
            grid-row-start   : auto
        }

        .max-md\:timeline-compact.timeline-vertical>li {
            --timeline-col-start: 0
        }

        .max-md\:timeline-compact.timeline-vertical .timeline-start {
            grid-column-start: 3;
            grid-column-end  : 4;
            grid-row-start   : 1;
            grid-row-end     : 4;
            align-self       : center;
            justify-self     : flex-start
        }

        .max-md\:timeline-compact.timeline-vertical li:has(.timeline-start) .timeline-end {
            grid-column-start: auto;
            grid-row-start   : none
        }
    }

    @media (width >=40rem) {
        .sm\:footer-horizontal {
            grid-auto-flow: column
        }

        .sm\:footer-horizontal.footer-center {
            grid-auto-flow: row dense
        }
    }

    @media (width >=40rem) {
        .sm\:grid-cols-3 {
            grid-template-columns: repeat(3, minmax(0, 1fr))
        }
    }

    @media (width >=48rem) {
        .md\:mb-10 {
            margin-bottom: calc(var(--spacing) * 10)
        }
    }

    @media (width >=48rem) {
        .md\:grid-cols-2 {
            grid-template-columns: repeat(2, minmax(0, 1fr))
        }
    }

    @media (width >=48rem) {
        .md\:grid-cols-4 {
            grid-template-columns: repeat(4, minmax(0, 1fr))
        }
    }

    @media (width >=48rem) {
        .md\:text-end {
            text-align: end
        }
    }

    @media (width >=48rem) {
        .md\:text-start {
            text-align: start
        }
    }

    @media (width >=64rem) {
        .lg\:grid-cols-3 {
            grid-template-columns: repeat(3, minmax(0, 1fr))
        }
    }

    @media (width >=64rem) {
        .lg\:flex-row {
            flex-direction: row
        }
    }

    @media (width >=64rem) {
        .lg\:flex-row-reverse {
            flex-direction: row-reverse
        }
    }

    @media (width >=64rem) {
        .lg\:px-24 {
            padding-inline: calc(var(--spacing) * 24)
        }
    }

    @media (width >=64rem) {
        .lg\:text-center {
            text-align: center
        }
    }

    @media (width >=64rem) {
        .lg\:text-right {
            text-align: right
        }
    }
}

@layer base {

    :where(:root),
    :root:has(input.theme-controller[value=light]:checked),
    [data-theme=light] {
        color-scheme             : light;
        --color-base-100         : oklch(100% 0 0);
        --color-base-200         : oklch(98% 0 0);
        --color-base-300         : oklch(95% 0 0);
        --color-base-content     : oklch(21% .006 285.885);
        --color-primary          : oklch(45% .24 277.023);
        --color-primary-content  : oklch(93% .034 272.788);
        --color-secondary        : oklch(65% .241 354.308);
        --color-secondary-content: oklch(94% .028 342.258);
        --color-accent           : oklch(77% .152 181.912);
        --color-accent-content   : oklch(38% .063 188.416);
        --color-neutral          : oklch(14% .005 285.823);
        --color-neutral-content  : oklch(92% .004 286.32);
        --color-info             : oklch(74% .16 232.661);
        --color-info-content     : oklch(29% .066 243.157);
        --color-success          : oklch(76% .177 163.223);
        --color-success-content  : oklch(37% .077 168.94);
        --color-warning          : oklch(82% .189 84.429);
        --color-warning-content  : oklch(41% .112 45.904);
        --color-error            : oklch(71% .194 13.428);
        --color-error-content    : oklch(27% .105 12.094);
        --radius-selector        : .5rem;
        --radius-field           : .25rem;
        --radius-box             : .5rem;
        --size-selector          : .25rem;
        --size-field             : .25rem;
        --border                 : 1px;
        --depth                  : 1;
        --noise                  : 0
    }
}

@layer base {

    :root:has(input.theme-controller[value=light]:checked),
    [data-theme=light] {
        color-scheme             : light;
        --color-base-100         : oklch(100% 0 0);
        --color-base-200         : oklch(98% 0 0);
        --color-base-300         : oklch(95% 0 0);
        --color-base-content     : oklch(21% .006 285.885);
        --color-primary          : oklch(45% .24 277.023);
        --color-primary-content  : oklch(93% .034 272.788);
        --color-secondary        : oklch(65% .241 354.308);
        --color-secondary-content: oklch(94% .028 342.258);
        --color-accent           : oklch(77% .152 181.912);
        --color-accent-content   : oklch(38% .063 188.416);
        --color-neutral          : oklch(14% .005 285.823);
        --color-neutral-content  : oklch(92% .004 286.32);
        --color-info             : oklch(74% .16 232.661);
        --color-info-content     : oklch(29% .066 243.157);
        --color-success          : oklch(76% .177 163.223);
        --color-success-content  : oklch(37% .077 168.94);
        --color-warning          : oklch(82% .189 84.429);
        --color-warning-content  : oklch(41% .112 45.904);
        --color-error            : oklch(71% .194 13.428);
        --color-error-content    : oklch(27% .105 12.094);
        --radius-selector        : .5rem;
        --radius-field           : .25rem;
        --radius-box             : .5rem;
        --size-selector          : .25rem;
        --size-field             : .25rem;
        --border                 : 1px;
        --depth                  : 1;
        --noise                  : 0
    }
}

@layer base {

    :root:has(input.theme-controller[value=dark]:checked),
    [data-theme=dark] {
        color-scheme             : dark;
        --color-base-100         : oklch(25.33% .016 252.42);
        --color-base-200         : oklch(23.26% .014 253.1);
        --color-base-300         : oklch(21.15% .012 254.09);
        --color-base-content     : oklch(97.807% .029 256.847);
        --color-primary          : oklch(58% .233 277.117);
        --color-primary-content  : oklch(96% .018 272.314);
        --color-secondary        : oklch(65% .241 354.308);
        --color-secondary-content: oklch(94% .028 342.258);
        --color-accent           : oklch(77% .152 181.912);
        --color-accent-content   : oklch(38% .063 188.416);
        --color-neutral          : oklch(14% .005 285.823);
        --color-neutral-content  : oklch(92% .004 286.32);
        --color-info             : oklch(74% .16 232.661);
        --color-info-content     : oklch(29% .066 243.157);
        --color-success          : oklch(76% .177 163.223);
        --color-success-content  : oklch(37% .077 168.94);
        --color-warning          : oklch(82% .189 84.429);
        --color-warning-content  : oklch(41% .112 45.904);
        --color-error            : oklch(71% .194 13.428);
        --color-error-content    : oklch(27% .105 12.094);
        --radius-selector        : .5rem;
        --radius-field           : .25rem;
        --radius-box             : .5rem;
        --size-selector          : .25rem;
        --size-field             : .25rem;
        --border                 : 1px;
        --depth                  : 1;
        --noise                  : 0
    }
}

@layer base {

    :root:has(input.theme-controller[value=aqua]:checked),
    [data-theme=aqua] {
        color-scheme             : dark;
        --color-base-100         : oklch(37% .146 265.522);
        --color-base-200         : oklch(28% .091 267.935);
        --color-base-300         : oklch(22% .091 267.935);
        --color-base-content     : oklch(90% .058 230.902);
        --color-primary          : oklch(85.661% .144 198.645);
        --color-primary-content  : oklch(40.124% .068 197.603);
        --color-secondary        : oklch(60.682% .108 309.782);
        --color-secondary-content: oklch(96% .016 293.756);
        --color-accent           : oklch(93.426% .102 94.555);
        --color-accent-content   : oklch(18.685% .02 94.555);
        --color-neutral          : oklch(27% .146 265.522);
        --color-neutral-content  : oklch(80% .146 265.522);
        --color-info             : oklch(54.615% .215 262.88);
        --color-info-content     : oklch(90.923% .043 262.88);
        --color-success          : oklch(62.705% .169 149.213);
        --color-success-content  : oklch(12.541% .033 149.213);
        --color-warning          : oklch(66.584% .157 58.318);
        --color-warning-content  : oklch(27% .077 45.635);
        --color-error            : oklch(73.95% .19 27.33);
        --color-error-content    : oklch(14.79% .038 27.33);
        --radius-selector        : 1rem;
        --radius-field           : .5rem;
        --radius-box             : 1rem;
        --size-selector          : .25rem;
        --size-field             : .25rem;
        --border                 : 1px;
        --depth                  : 1;
        --noise                  : 0
    }
}

@layer base {
    :root:has(.modal-open, .modal[open], .modal:target, .modal-toggle:checked, .drawer:not([class*=drawer-open])>.drawer-toggle:checked) {
        overflow: hidden
    }
}

@layer base {

    :root,
    [data-theme] {
        background-color: var(--root-bg, var(--color-base-100));
        color           : var(--color-base-content)
    }
}

@layer base {
    :root {
        scrollbar-color: currentColor #0000
    }

    @supports (color: color-mix(in lab, red, red)) {
        :root {
            scrollbar-color: color-mix(in oklch, currentColor 35%, #0000) #0000
        }
    }
}

@layer base {
    @property --radialprogress {
        syntax       : "<percentage>";
        inherits     : true;
        initial-value: 0%;
    }
}

@layer base {
    :where(:root:has(.modal-open, .modal[open], .modal:target, .modal-toggle:checked, .drawer:not(.drawer-open)>.drawer-toggle:checked)) {
        scrollbar-gutter: stable;
        background-image: linear-gradient(var(--color-base-100), var(--color-base-100));
        --root-bg       : var(--color-base-100)
    }

    @supports (color: color-mix(in lab, red, red)) {
        :where(:root:has(.modal-open, .modal[open], .modal:target, .modal-toggle:checked, .drawer:not(.drawer-open)>.drawer-toggle:checked)) {
            --root-bg: color-mix(in srgb, var(--color-base-100), oklch(0% 0 0) 40%)
        }
    }

    :where(.modal[open], .modal-open, .modal-toggle:checked+.modal):not(.modal-start, .modal-end) {
        scrollbar-gutter: stable
    }
}

@layer base {
    :root {
        --fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E")
    }

    .chat {
        --mask-chat: url("data:image/svg+xml,%3csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 11.5004C0 13.0004 2 13.0004 2 13.0004H12H13V0.00036329L12.5 0C12.5 0 11.977 2.09572 11.8581 2.50033C11.6075 3.35237 10.9149 4.22374 9 5.50036C6 7.50036 0 10.0004 0 11.5004Z'/%3e%3c/svg%3e")
    }
}

@keyframes dropdown {
    0% {
        opacity: 0
    }
}

@keyframes progress {
    50% {
        background-position-x: -115%
    }
}

@keyframes toast {
    0% {
        scale  : .9;
        opacity: 0
    }

    to {
        scale  : 1;
        opacity: 1
    }
}

@keyframes rating {

    0%,
    40% {
        scale : 1.1;
        filter: brightness(1.05) contrast(1.05)
    }
}

@keyframes radio {
    0% {
        padding: 5px
    }

    50% {
        padding: 3px
    }
}

@keyframes skeleton {
    0% {
        background-position: 150%
    }

    to {
        background-position: -50%
    }
}

@property --tw-rotate-x {
    syntax  : "*";
    inherits: false;
}

@property --tw-rotate-y {
    syntax  : "*";
    inherits: false;
}

@property --tw-rotate-z {
    syntax  : "*";
    inherits: false;
}

@property --tw-skew-x {
    syntax  : "*";
    inherits: false;
}

@property --tw-skew-y {
    syntax  : "*";
    inherits: false;
}

@property --tw-space-y-reverse {
    syntax       : "*";
    inherits     : false;
    initial-value: 0;
}

@property --tw-border-style {
    syntax       : "*";
    inherits     : false;
    initial-value: solid;
}

@property --tw-font-weight {
    syntax  : "*";
    inherits: false;
}

@property --tw-tracking {
    syntax  : "*";
    inherits: false;
}

@property --tw-shadow {
    syntax       : "*";
    inherits     : false;
    initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
    syntax  : "*";
    inherits: false;
}

@property --tw-shadow-alpha {
    syntax       : "<percentage>";
    inherits     : false;
    initial-value: 100%;
}

@property --tw-inset-shadow {
    syntax       : "*";
    inherits     : false;
    initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
    syntax  : "*";
    inherits: false;
}

@property --tw-inset-shadow-alpha {
    syntax       : "<percentage>";
    inherits     : false;
    initial-value: 100%;
}

@property --tw-ring-color {
    syntax  : "*";
    inherits: false;
}

@property --tw-ring-shadow {
    syntax       : "*";
    inherits     : false;
    initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
    syntax  : "*";
    inherits: false;
}

@property --tw-inset-ring-shadow {
    syntax       : "*";
    inherits     : false;
    initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
    syntax  : "*";
    inherits: false;
}

@property --tw-ring-offset-width {
    syntax       : "<length>";
    inherits     : false;
    initial-value: 0px;
}

@property --tw-ring-offset-color {
    syntax       : "*";
    inherits     : false;
    initial-value: #fff;
}

@property --tw-ring-offset-shadow {
    syntax       : "*";
    inherits     : false;
    initial-value: 0 0 #0000;
}

@layer properties {
    @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {

        *,
        :before,
        :after,
        ::backdrop {
            --tw-rotate-x          : initial;
            --tw-rotate-y          : initial;
            --tw-rotate-z          : initial;
            --tw-skew-x            : initial;
            --tw-skew-y            : initial;
            --tw-space-y-reverse   : 0;
            --tw-border-style      : solid;
            --tw-font-weight       : initial;
            --tw-tracking          : initial;
            --tw-shadow            : 0 0 #0000;
            --tw-shadow-color      : initial;
            --tw-shadow-alpha      : 100%;
            --tw-inset-shadow      : 0 0 #0000;
            --tw-inset-shadow-color: initial;
            --tw-inset-shadow-alpha: 100%;
            --tw-ring-color        : initial;
            --tw-ring-shadow       : 0 0 #0000;
            --tw-inset-ring-color  : initial;
            --tw-inset-ring-shadow : 0 0 #0000;
            --tw-ring-inset        : initial;
            --tw-ring-offset-width : 0px;
            --tw-ring-offset-color : #fff;
            --tw-ring-offset-shadow: 0 0 #0000
        }
    }
}

/*! 🌼 daisyUI 5.0.34 - MIT License */
@layer utilities {
    .tabs {
        --tabs-height   : auto;
        --tabs-direction: row;
        height          : var(--tabs-height);
        flex-wrap       : wrap;
        flex-direction  : var(--tabs-direction);
        display         : flex
    }

    .tab {
        cursor              : pointer;
        appearance          : none;
        text-align          : center;
        -webkit-user-select : none;
        user-select         : none;
        --tab-p             : 1rem;
        --tab-bg            : var(--color-base-100);
        --tab-border-color  : var(--color-base-300);
        --tab-radius-ss     : 0;
        --tab-radius-se     : 0;
        --tab-radius-es     : 0;
        --tab-radius-ee     : 0;
        --tab-order         : 0;
        --tab-radius-min    : calc(.75rem - var(--border));
        flex-wrap           : wrap;
        order               : var(--tab-order);
        height              : calc(var(--size-field, .25rem)*10);
        border-color        : #0000;
        justify-content     : center;
        align-items         : center;
        padding-inline-start: var(--tab-p);
        padding-inline-end  : var(--tab-p);
        font-size           : .875rem;
        display             : inline-flex;
        position            : relative;

        &:hover {
            @media (hover:hover) {
                & {
                    color: var(--color-base-content)
                }
            }
        }

        &:is(input[type=radio]) {
            min-width: fit-content;

            &:after {
                content: attr(aria-label)
            }
        }

        &:is(label) {
            position: relative;

            & input {
                cursor    : pointer;
                appearance: none;
                opacity   : 0;
                position  : absolute;
                inset     : 0
            }
        }

        &:checked,
        &:is(label:has(:checked)),
        &:is(.tab-active, [aria-selected=true]) {
            &+.tab-content {
                height : 100%;
                display: block
            }
        }

        &:not(:checked, label:has(:checked), :hover, .tab-active, [aria-selected=true]) {
            color: color-mix(in oklab, var(--color-base-content)50%, transparent)
        }

        &:not(input):empty {
            cursor   : default;
            flex-grow: 1
        }

        &:focus {
            --tw-outline-style: none;
            outline-style     : none;

            @media (forced-colors:active) {
                & {
                    outline-offset: 2px;
                    outline       : 2px solid #0000
                }
            }
        }

        &:focus-visible,
        &:is(label:has(:checked:focus-visible)) {
            outline-offset: -5px;
            outline       : 2px solid
        }

        &[disabled] {
            pointer-events: none;
            opacity       : .4
        }
    }

    .tab-disabled {
        pointer-events: none;
        opacity       : .4
    }

    .tabs-border {
        & .tab {
            --tab-border-color: #0000 #0000 var(--tab-border-color)#0000;
            border-radius     : var(--radius-field);
            position          : relative;

            &:before {
                --tw-content    : "";
                content         : var(--tw-content);
                background-color: var(--tab-border-color);
                border-radius   : var(--radius-field);
                width           : 80%;
                height          : 3px;
                transition      : background-color .2s;
                position        : absolute;
                bottom          : 0;
                left            : 10%
            }

            &:is(.tab-active, [aria-selected=true]):not(.tab-disabled, [disabled]),
            &:is(input:checked),
            &:is(label:has(:checked)) {
                &:before {
                    --tab-border-color: currentColor;
                    border-top        : 3px solid
                }
            }
        }
    }

    .tabs-lift {
        --tabs-height   : auto;
        --tabs-direction: row;

        &>.tab {
            --tab-border             : 0 0 var(--border)0;
            --tab-radius-ss          : min(var(--radius-field), var(--tab-radius-min));
            --tab-radius-se          : min(var(--radius-field), var(--tab-radius-min));
            --tab-radius-es          : 0;
            --tab-radius-ee          : 0;
            --tab-paddings           : var(--border)var(--tab-p)0 var(--tab-p);
            --tab-border-colors      : #0000 #0000 var(--tab-border-color)#0000;
            --tab-corner-width       : calc(100% + min(var(--radius-field), var(--tab-radius-min))*2);
            --tab-corner-height      : min(var(--radius-field), var(--tab-radius-min));
            --tab-corner-position    : top left, top right;
            border-width             : var(--tab-border);
            padding                  : var(--tab-paddings);
            border-color             : var(--tab-border-colors);
            border-start-start-radius: var(--tab-radius-ss);
            border-start-end-radius  : var(--tab-radius-se);
            border-end-end-radius    : var(--tab-radius-ee);
            border-end-start-radius  : var(--tab-radius-es);

            &:is(.tab-active, [aria-selected=true]):not(.tab-disabled, [disabled]),
            &:is(input:checked, label:has(:checked)) {
                --tab-border       : var(--border)var(--border)0 var(--border);
                --tab-border-colors: var(--tab-border-color)var(--tab-border-color)#0000 var(--tab-border-color);
                --tab-paddings     : 0 calc(var(--tab-p) - var(--border))var(--border)calc(var(--tab-p) - var(--border));
                --tab-inset        : auto auto 0 auto;
                --tab-grad         : calc(69% - var(--border));
                --radius-start     : radial-gradient(circle at top left, #0000 var(--tab-grad), var(--tab-border-color)calc(var(--tab-grad) + .25px), var(--tab-border-color)calc(var(--tab-grad) + var(--border)), var(--tab-bg)calc(var(--tab-grad) + var(--border) + .25px));
                --radius-end       : radial-gradient(circle at top right, #0000 var(--tab-grad), var(--tab-border-color)calc(var(--tab-grad) + .25px), var(--tab-border-color)calc(var(--tab-grad) + var(--border)), var(--tab-bg)calc(var(--tab-grad) + var(--border) + .25px));
                background-color   : var(--tab-bg);

                &:before {
                    z-index            : 1;
                    content            : "";
                    width              : var(--tab-corner-width);
                    height             : var(--tab-corner-height);
                    background-position: var(--tab-corner-position);
                    background-image   : var(--radius-start), var(--radius-end);
                    background-size    : min(var(--radius-field), var(--tab-radius-min))min(var(--radius-field), var(--tab-radius-min));
                    inset              : var(--tab-inset);
                    background-repeat  : no-repeat;
                    display            : block;
                    position           : absolute
                }

                &:first-child:before {
                    --radius-start: none
                }

                [dir=rtl] &:first-child:before {
                    transform: rotateY(180deg)
                }

                &:last-child:before {
                    --radius-end: none
                }

                [dir=rtl] &:last-child:before {
                    transform: rotateY(180deg)
                }
            }
        }

        &:has(.tab-content) {
            &>.tab:first-child {
                &:not(.tab-active, [aria-selected=true]) {
                    --tab-border-colors: var(--tab-border-color)var(--tab-border-color)#0000 var(--tab-border-color)
                }
            }
        }

        & .tab-content {
            --tabcontent-margin   : calc(-1*var(--border))0 0 0;
            --tabcontent-radius-ss: 0;
            --tabcontent-radius-se: var(--radius-box);
            --tabcontent-radius-es: var(--radius-box);
            --tabcontent-radius-ee: var(--radius-box)
        }

        & :checked,
        & label:has(:checked),
        & :is(.tab-active, [aria-selected=true]) {
            &+.tab-content {

                &:first-child,
                &:nth-child(n+3) {
                    --tabcontent-radius-ss: var(--radius-box)
                }
            }
        }
    }

    .tabs-top {
        --tabs-height   : auto;
        --tabs-direction: row;

        & .tab {
            --tab-order          : 0;
            --tab-border         : 0 0 var(--border)0;
            --tab-radius-ss      : min(var(--radius-field), var(--tab-radius-min));
            --tab-radius-se      : min(var(--radius-field), var(--tab-radius-min));
            --tab-radius-es      : 0;
            --tab-radius-ee      : 0;
            --tab-paddings       : var(--border)var(--tab-p)0 var(--tab-p);
            --tab-border-colors  : #0000 #0000 var(--tab-border-color)#0000;
            --tab-corner-width   : calc(100% + min(var(--radius-field), var(--tab-radius-min))*2);
            --tab-corner-height  : min(var(--radius-field), var(--tab-radius-min));
            --tab-corner-position: top left, top right;

            &:is(.tab-active, [aria-selected=true]):not(.tab-disabled, [disabled]),
            &:is(input:checked),
            &:is(label:has(:checked)) {
                --tab-border       : var(--border)var(--border)0 var(--border);
                --tab-border-colors: var(--tab-border-color)var(--tab-border-color)#0000 var(--tab-border-color);
                --tab-paddings     : 0 calc(var(--tab-p) - var(--border))var(--border)calc(var(--tab-p) - var(--border));
                --tab-inset        : auto auto 0 auto;
                --radius-start     : radial-gradient(circle at top left, #0000 var(--tab-grad), var(--tab-border-color)calc(var(--tab-grad) + .25px), var(--tab-border-color)calc(var(--tab-grad) + var(--border)), var(--tab-bg)calc(var(--tab-grad) + var(--border) + .25px));
                --radius-end       : radial-gradient(circle at top right, #0000 var(--tab-grad), var(--tab-border-color)calc(var(--tab-grad) + .25px), var(--tab-border-color)calc(var(--tab-grad) + var(--border)), var(--tab-bg)calc(var(--tab-grad) + var(--border) + .25px))
            }
        }

        &:has(.tab-content) {
            &>.tab:first-child {
                &:not(.tab-active, [aria-selected=true]) {
                    --tab-border-colors: var(--tab-border-color)var(--tab-border-color)#0000 var(--tab-border-color)
                }
            }
        }

        & .tab-content {
            --tabcontent-order    : 1;
            --tabcontent-margin   : calc(-1*var(--border))0 0 0;
            --tabcontent-radius-ss: 0;
            --tabcontent-radius-se: var(--radius-box);
            --tabcontent-radius-es: var(--radius-box);
            --tabcontent-radius-ee: var(--radius-box)
        }

        & :checked,
        & label:has(:checked),
        & :is(.tab-active, [aria-selected=true]) {
            &+.tab-content {

                &:first-child,
                &:nth-child(n+3) {
                    --tabcontent-radius-ss: var(--radius-box)
                }
            }
        }
    }

    .tabs-bottom {
        --tabs-height   : auto;
        --tabs-direction: row;

        & .tab {
            --tab-order          : 1;
            --tab-border         : var(--border)0 0 0;
            --tab-radius-ss      : 0;
            --tab-radius-se      : 0;
            --tab-radius-es      : min(var(--radius-field), var(--tab-radius-min));
            --tab-radius-ee      : min(var(--radius-field), var(--tab-radius-min));
            --tab-border-colors  : var(--tab-border-color)#0000 #0000 #0000;
            --tab-paddings       : 0 var(--tab-p)var(--border)var(--tab-p);
            --tab-corner-width   : calc(100% + min(var(--radius-field), var(--tab-radius-min))*2);
            --tab-corner-height  : min(var(--radius-field), var(--tab-radius-min));
            --tab-corner-position: top left, top right;

            &:is(.tab-active, [aria-selected=true]):not(.tab-disabled, [disabled]),
            &:is(input:checked),
            &:is(label:has(:checked)) {
                --tab-border       : 0 var(--border)var(--border)var(--border);
                --tab-border-colors: #0000 var(--tab-border-color)var(--tab-border-color)var(--tab-border-color);
                --tab-paddings     : var(--border)calc(var(--tab-p) - var(--border))0 calc(var(--tab-p) - var(--border));
                --tab-inset        : 0 auto auto auto;
                --radius-start     : radial-gradient(circle at bottom left, #0000 var(--tab-grad), var(--tab-border-color)calc(var(--tab-grad) + .25px), var(--tab-border-color)calc(var(--tab-grad) + var(--border)), var(--tab-bg)calc(var(--tab-grad) + var(--border) + .25px));
                --radius-end       : radial-gradient(circle at bottom right, #0000 var(--tab-grad), var(--tab-border-color)calc(var(--tab-grad) + .25px), var(--tab-border-color)calc(var(--tab-grad) + var(--border)), var(--tab-bg)calc(var(--tab-grad) + var(--border) + .25px))
            }
        }

        &:has(.tab-content) {
            &>.tab:first-child {
                &:not(.tab-active, [aria-selected=true]) {
                    --tab-border-colors: #0000 var(--tab-border-color)var(--tab-border-color)var(--tab-border-color)
                }
            }
        }

        & .tab-content {
            --tabcontent-order    : 0;
            --tabcontent-margin   : 0 0 calc(-1*var(--border))0;
            --tabcontent-radius-ss: var(--radius-box);
            --tabcontent-radius-se: var(--radius-box);
            --tabcontent-radius-es: 0;
            --tabcontent-radius-ee: var(--radius-box)
        }

        &>:checked,
        &>:is(label:has(:checked)),
        &>:is(.tab-active, [aria-selected=true]) {
            &+.tab-content:not(:nth-child(2)) {
                --tabcontent-radius-es: var(--radius-box)
            }
        }
    }

    .tabs-box {
        background-color : var(--color-base-200);
        --tabs-box-radius: calc(var(--radius-field) + var(--radius-field) + var(--radius-field));
        border-radius    : calc(var(--radius-field) + min(.25rem, var(--tabs-box-radius)));
        box-shadow       : 0 -.5px oklch(100% 0 0/calc(var(--depth)*.1))inset, 0 .5px oklch(0% 0 0/calc(var(--depth)*.05))inset;
        padding          : .25rem;

        & .tab {
            border-radius: var(--radius-field);
            border-style : none;

            &:focus-visible,
            &:is(label:has(:checked:focus-visible)) {
                outline-offset: 2px
            }
        }

        &>:is(.tab-active, [aria-selected=true]):not(.tab-disabled, [disabled]),
        &>:is(input:checked),
        &>:is(label:has(:checked)) {
            background-color: var(--tab-bg, var(--color-base-100));
            box-shadow      : 0 1px oklch(100% 0 0/calc(var(--depth)*.1))inset, 0 1px 1px -1px color-mix(in oklab, var(--color-neutral)calc(var(--depth)*50%), #0000), 0 1px 6px -4px color-mix(in oklab, var(--color-neutral)calc(var(--depth)*100%), #0000);

            @media (forced-colors:active) {
                & {
                    border: 1px solid
                }
            }
        }
    }

    .tab-content {
        --tabcontent-radius-ss   : 0;
        --tabcontent-radius-se   : 0;
        --tabcontent-radius-es   : 0;
        --tabcontent-radius-ee   : 0;
        --tabcontent-order       : 1;
        width                    : 100%;
        margin                   : var(--tabcontent-margin);
        order                    : 1;
        order                    : var(--tabcontent-order);
        border-color             : #0000;
        border-width             : var(--border);
        border-start-start-radius: var(--tabcontent-radius-ss);
        border-start-end-radius  : var(--tabcontent-radius-se);
        border-end-end-radius    : var(--tabcontent-radius-ee);
        border-end-start-radius  : var(--tabcontent-radius-es);
        display                  : none
    }

    .tabs-xs {
        & :where(.tab) {
            height          : calc(var(--size-field, .25rem)*6);
            --tab-p         : .375rem;
            --tab-radius-min: calc(.5rem - var(--border));
            font-size       : .75rem
        }
    }

    .tabs-sm {
        & :where(.tab) {
            height          : calc(var(--size-field, .25rem)*8);
            --tab-p         : .5rem;
            --tab-radius-min: calc(.5rem - var(--border));
            font-size       : .875rem
        }
    }

    .tabs-md {
        & :where(.tab) {
            height          : calc(var(--size-field, .25rem)*10);
            --tab-p         : .75rem;
            --tab-radius-min: calc(.75rem - var(--border));
            font-size       : .875rem
        }
    }

    .tabs-lg {
        & :where(.tab) {
            height          : calc(var(--size-field, .25rem)*12);
            --tab-p         : 1rem;
            --tab-radius-min: calc(1.5rem - var(--border));
            font-size       : 1.125rem
        }
    }

    .tabs-xl {
        & :where(.tab) {
            height          : calc(var(--size-field, .25rem)*14);
            --tab-p         : 1.25rem;
            --tab-radius-min: calc(2rem - var(--border));
            font-size       : 1.125rem
        }
    }

    @media (width>=640px) {
        .sm\:tabs {
            --tabs-height   : auto;
            --tabs-direction: row;
            height          : var(--tabs-height);
            flex-wrap       : wrap;
            flex-direction  : var(--tabs-direction);
            display         : flex
        }

        .sm\:tab {
            cursor              : pointer;
            appearance          : none;
            text-align          : center;
            -webkit-user-select : none;
            user-select         : none;
            --tab-p             : 1rem;
            --tab-bg            : var(--color-base-100);
            --tab-border-color  : var(--color-base-300);
            --tab-radius-ss     : 0;
            --tab-radius-se     : 0;
            --tab-radius-es     : 0;
            --tab-radius-ee     : 0;
            --tab-order         : 0;
            --tab-radius-min    : calc(.75rem - var(--border));
            flex-wrap           : wrap;
            order               : var(--tab-order);
            height              : calc(var(--size-field, .25rem)*10);
            border-color        : #0000;
            justify-content     : center;
            align-items         : center;
            padding-inline-start: var(--tab-p);
            padding-inline-end  : var(--tab-p);
            font-size           : .875rem;
            display             : inline-flex;
            position            : relative;

            &:hover {
                @media (hover:hover) {
                    & {
                        color: var(--color-base-content)
                    }
                }
            }

            &:is(input[type=radio]) {
                min-width: fit-content;

                &:after {
                    content: attr(aria-label)
                }
            }

            &:is(label) {
                position: relative;

                & input {
                    cursor    : pointer;
                    appearance: none;
                    opacity   : 0;
                    position  : absolute;
                    inset     : 0
                }
            }

            &:checked,
            &:is(label:has(:checked)),
            &:is(.tab-active, [aria-selected=true]) {
                &+.tab-content {
                    height : 100%;
                    display: block
                }
            }

            &:not(:checked, label:has(:checked), :hover, .tab-active, [aria-selected=true]) {
                color: color-mix(in oklab, var(--color-base-content)50%, transparent)
            }

            &:not(input):empty {
                cursor   : default;
                flex-grow: 1
            }

            &:focus {
                --tw-outline-style: none;
                outline-style     : none;

                @media (forced-colors:active) {
                    & {
                        outline-offset: 2px;
                        outline       : 2px solid #0000
                    }
                }
            }

            &:focus-visible,
            &:is(label:has(:checked:focus-visible)) {
                outline-offset: -5px;
                outline       : 2px solid
            }

            &[disabled] {
                pointer-events: none;
                opacity       : .4
            }
        }

        .sm\:tab-disabled {
            pointer-events: none;
            opacity       : .4
        }

        .sm\:tabs-border {
            & .tab {
                --tab-border-color: #0000 #0000 var(--tab-border-color)#0000;
                border-radius     : var(--radius-field);
                position          : relative;

                &:before {
                    --tw-content    : "";
                    content         : var(--tw-content);
                    background-color: var(--tab-border-color);
                    border-radius   : var(--radius-field);
                    width           : 80%;
                    height          : 3px;
                    transition      : background-color .2s;
                    position        : absolute;
                    bottom          : 0;
                    left            : 10%
                }

                &:is(.tab-active, [aria-selected=true]):not(.tab-disabled, [disabled]),
                &:is(input:checked),
                &:is(label:has(:checked)) {
                    &:before {
                        --tab-border-color: currentColor;
                        border-top        : 3px solid
                    }
                }
            }
        }

        .sm\:tabs-lift {
            --tabs-height   : auto;
            --tabs-direction: row;

            &>.tab {
                --tab-border             : 0 0 var(--border)0;
                --tab-radius-ss          : min(var(--radius-field), var(--tab-radius-min));
                --tab-radius-se          : min(var(--radius-field), var(--tab-radius-min));
                --tab-radius-es          : 0;
                --tab-radius-ee          : 0;
                --tab-paddings           : var(--border)var(--tab-p)0 var(--tab-p);
                --tab-border-colors      : #0000 #0000 var(--tab-border-color)#0000;
                --tab-corner-width       : calc(100% + min(var(--radius-field), var(--tab-radius-min))*2);
                --tab-corner-height      : min(var(--radius-field), var(--tab-radius-min));
                --tab-corner-position    : top left, top right;
                border-width             : var(--tab-border);
                padding                  : var(--tab-paddings);
                border-color             : var(--tab-border-colors);
                border-start-start-radius: var(--tab-radius-ss);
                border-start-end-radius  : var(--tab-radius-se);
                border-end-end-radius    : var(--tab-radius-ee);
                border-end-start-radius  : var(--tab-radius-es);

                &:is(.tab-active, [aria-selected=true]):not(.tab-disabled, [disabled]),
                &:is(input:checked, label:has(:checked)) {
                    --tab-border       : var(--border)var(--border)0 var(--border);
                    --tab-border-colors: var(--tab-border-color)var(--tab-border-color)#0000 var(--tab-border-color);
                    --tab-paddings     : 0 calc(var(--tab-p) - var(--border))var(--border)calc(var(--tab-p) - var(--border));
                    --tab-inset        : auto auto 0 auto;
                    --tab-grad         : calc(69% - var(--border));
                    --radius-start     : radial-gradient(circle at top left, #0000 var(--tab-grad), var(--tab-border-color)calc(var(--tab-grad) + .25px), var(--tab-border-color)calc(var(--tab-grad) + var(--border)), var(--tab-bg)calc(var(--tab-grad) + var(--border) + .25px));
                    --radius-end       : radial-gradient(circle at top right, #0000 var(--tab-grad), var(--tab-border-color)calc(var(--tab-grad) + .25px), var(--tab-border-color)calc(var(--tab-grad) + var(--border)), var(--tab-bg)calc(var(--tab-grad) + var(--border) + .25px));
                    background-color   : var(--tab-bg);

                    &:before {
                        z-index            : 1;
                        content            : "";
                        width              : var(--tab-corner-width);
                        height             : var(--tab-corner-height);
                        background-position: var(--tab-corner-position);
                        background-image   : var(--radius-start), var(--radius-end);
                        background-size    : min(var(--radius-field), var(--tab-radius-min))min(var(--radius-field), var(--tab-radius-min));
                        inset              : var(--tab-inset);
                        background-repeat  : no-repeat;
                        display            : block;
                        position           : absolute
                    }

                    &:first-child:before {
                        --radius-start: none
                    }

                    [dir=rtl] &:first-child:before {
                        transform: rotateY(180deg)
                    }

                    &:last-child:before {
                        --radius-end: none
                    }

                    [dir=rtl] &:last-child:before {
                        transform: rotateY(180deg)
                    }
                }
            }

            &:has(.tab-content) {
                &>.tab:first-child {
                    &:not(.tab-active, [aria-selected=true]) {
                        --tab-border-colors: var(--tab-border-color)var(--tab-border-color)#0000 var(--tab-border-color)
                    }
                }
            }

            & .tab-content {
                --tabcontent-margin   : calc(-1*var(--border))0 0 0;
                --tabcontent-radius-ss: 0;
                --tabcontent-radius-se: var(--radius-box);
                --tabcontent-radius-es: var(--radius-box);
                --tabcontent-radius-ee: var(--radius-box)
            }

            & :checked,
            & label:has(:checked),
            & :is(.tab-active, [aria-selected=true]) {
                &+.tab-content {

                    &:first-child,
                    &:nth-child(n+3) {
                        --tabcontent-radius-ss: var(--radius-box)
                    }
                }
            }
        }

        .sm\:tabs-top {
            --tabs-height   : auto;
            --tabs-direction: row;

            & .tab {
                --tab-order          : 0;
                --tab-border         : 0 0 var(--border)0;
                --tab-radius-ss      : min(var(--radius-field), var(--tab-radius-min));
                --tab-radius-se      : min(var(--radius-field), var(--tab-radius-min));
                --tab-radius-es      : 0;
                --tab-radius-ee      : 0;
                --tab-paddings       : var(--border)var(--tab-p)0 var(--tab-p);
                --tab-border-colors  : #0000 #0000 var(--tab-border-color)#0000;
                --tab-corner-width   : calc(100% + min(var(--radius-field), var(--tab-radius-min))*2);
                --tab-corner-height  : min(var(--radius-field), var(--tab-radius-min));
                --tab-corner-position: top left, top right;

                &:is(.tab-active, [aria-selected=true]):not(.tab-disabled, [disabled]),
                &:is(input:checked),
                &:is(label:has(:checked)) {
                    --tab-border       : var(--border)var(--border)0 var(--border);
                    --tab-border-colors: var(--tab-border-color)var(--tab-border-color)#0000 var(--tab-border-color);
                    --tab-paddings     : 0 calc(var(--tab-p) - var(--border))var(--border)calc(var(--tab-p) - var(--border));
                    --tab-inset        : auto auto 0 auto;
                    --radius-start     : radial-gradient(circle at top left, #0000 var(--tab-grad), var(--tab-border-color)calc(var(--tab-grad) + .25px), var(--tab-border-color)calc(var(--tab-grad) + var(--border)), var(--tab-bg)calc(var(--tab-grad) + var(--border) + .25px));
                    --radius-end       : radial-gradient(circle at top right, #0000 var(--tab-grad), var(--tab-border-color)calc(var(--tab-grad) + .25px), var(--tab-border-color)calc(var(--tab-grad) + var(--border)), var(--tab-bg)calc(var(--tab-grad) + var(--border) + .25px))
                }
            }

            &:has(.tab-content) {
                &>.tab:first-child {
                    &:not(.tab-active, [aria-selected=true]) {
                        --tab-border-colors: var(--tab-border-color)var(--tab-border-color)#0000 var(--tab-border-color)
                    }
                }
            }

            & .tab-content {
                --tabcontent-order    : 1;
                --tabcontent-margin   : calc(-1*var(--border))0 0 0;
                --tabcontent-radius-ss: 0;
                --tabcontent-radius-se: var(--radius-box);
                --tabcontent-radius-es: var(--radius-box);
                --tabcontent-radius-ee: var(--radius-box)
            }

            & :checked,
            & label:has(:checked),
            & :is(.tab-active, [aria-selected=true]) {
                &+.tab-content {

                    &:first-child,
                    &:nth-child(n+3) {
                        --tabcontent-radius-ss: var(--radius-box)
                    }
                }
            }
        }

        .sm\:tabs-bottom {
            --tabs-height   : auto;
            --tabs-direction: row;

            & .tab {
                --tab-order          : 1;
                --tab-border         : var(--border)0 0 0;
                --tab-radius-ss      : 0;
                --tab-radius-se      : 0;
                --tab-radius-es      : min(var(--radius-field), var(--tab-radius-min));
                --tab-radius-ee      : min(var(--radius-field), var(--tab-radius-min));
                --tab-border-colors  : var(--tab-border-color)#0000 #0000 #0000;
                --tab-paddings       : 0 var(--tab-p)var(--border)var(--tab-p);
                --tab-corner-width   : calc(100% + min(var(--radius-field), var(--tab-radius-min))*2);
                --tab-corner-height  : min(var(--radius-field), var(--tab-radius-min));
                --tab-corner-position: top left, top right;

                &:is(.tab-active, [aria-selected=true]):not(.tab-disabled, [disabled]),
                &:is(input:checked),
                &:is(label:has(:checked)) {
                    --tab-border       : 0 var(--border)var(--border)var(--border);
                    --tab-border-colors: #0000 var(--tab-border-color)var(--tab-border-color)var(--tab-border-color);
                    --tab-paddings     : var(--border)calc(var(--tab-p) - var(--border))0 calc(var(--tab-p) - var(--border));
                    --tab-inset        : 0 auto auto auto;
                    --radius-start     : radial-gradient(circle at bottom left, #0000 var(--tab-grad), var(--tab-border-color)calc(var(--tab-grad) + .25px), var(--tab-border-color)calc(var(--tab-grad) + var(--border)), var(--tab-bg)calc(var(--tab-grad) + var(--border) + .25px));
                    --radius-end       : radial-gradient(circle at bottom right, #0000 var(--tab-grad), var(--tab-border-color)calc(var(--tab-grad) + .25px), var(--tab-border-color)calc(var(--tab-grad) + var(--border)), var(--tab-bg)calc(var(--tab-grad) + var(--border) + .25px))
                }
            }

            &:has(.tab-content) {
                &>.tab:first-child {
                    &:not(.tab-active, [aria-selected=true]) {
                        --tab-border-colors: #0000 var(--tab-border-color)var(--tab-border-color)var(--tab-border-color)
                    }
                }
            }

            & .tab-content {
                --tabcontent-order    : 0;
                --tabcontent-margin   : 0 0 calc(-1*var(--border))0;
                --tabcontent-radius-ss: var(--radius-box);
                --tabcontent-radius-se: var(--radius-box);
                --tabcontent-radius-es: 0;
                --tabcontent-radius-ee: var(--radius-box)
            }

            &>:checked,
            &>:is(label:has(:checked)),
            &>:is(.tab-active, [aria-selected=true]) {
                &+.tab-content:not(:nth-child(2)) {
                    --tabcontent-radius-es: var(--radius-box)
                }
            }
        }

        .sm\:tabs-box {
            background-color : var(--color-base-200);
            --tabs-box-radius: calc(var(--radius-field) + var(--radius-field) + var(--radius-field));
            border-radius    : calc(var(--radius-field) + min(.25rem, var(--tabs-box-radius)));
            box-shadow       : 0 -.5px oklch(100% 0 0/calc(var(--depth)*.1))inset, 0 .5px oklch(0% 0 0/calc(var(--depth)*.05))inset;
            padding          : .25rem;

            & .tab {
                border-radius: var(--radius-field);
                border-style : none;

                &:focus-visible,
                &:is(label:has(:checked:focus-visible)) {
                    outline-offset: 2px
                }
            }

            &>:is(.tab-active, [aria-selected=true]):not(.tab-disabled, [disabled]),
            &>:is(input:checked),
            &>:is(label:has(:checked)) {
                background-color: var(--tab-bg, var(--color-base-100));
                box-shadow      : 0 1px oklch(100% 0 0/calc(var(--depth)*.1))inset, 0 1px 1px -1px color-mix(in oklab, var(--color-neutral)calc(var(--depth)*50%), #0000), 0 1px 6px -4px color-mix(in oklab, var(--color-neutral)calc(var(--depth)*100%), #0000);

                @media (forced-colors:active) {
                    & {
                        border: 1px solid
                    }
                }
            }
        }

        .sm\:tab-content {
            --tabcontent-radius-ss   : 0;
            --tabcontent-radius-se   : 0;
            --tabcontent-radius-es   : 0;
            --tabcontent-radius-ee   : 0;
            --tabcontent-order       : 1;
            width                    : 100%;
            margin                   : var(--tabcontent-margin);
            order                    : 1;
            order                    : var(--tabcontent-order);
            border-color             : #0000;
            border-width             : var(--border);
            border-start-start-radius: var(--tabcontent-radius-ss);
            border-start-end-radius  : var(--tabcontent-radius-se);
            border-end-end-radius    : var(--tabcontent-radius-ee);
            border-end-start-radius  : var(--tabcontent-radius-es);
            display                  : none
        }

        .sm\:tabs-xs {
            & :where(.tab) {
                height          : calc(var(--size-field, .25rem)*6);
                --tab-p         : .375rem;
                --tab-radius-min: calc(.5rem - var(--border));
                font-size       : .75rem
            }
        }

        .sm\:tabs-sm {
            & :where(.tab) {
                height          : calc(var(--size-field, .25rem)*8);
                --tab-p         : .5rem;
                --tab-radius-min: calc(.5rem - var(--border));
                font-size       : .875rem
            }
        }

        .sm\:tabs-md {
            & :where(.tab) {
                height          : calc(var(--size-field, .25rem)*10);
                --tab-p         : .75rem;
                --tab-radius-min: calc(.75rem - var(--border));
                font-size       : .875rem
            }
        }

        .sm\:tabs-lg {
            & :where(.tab) {
                height          : calc(var(--size-field, .25rem)*12);
                --tab-p         : 1rem;
                --tab-radius-min: calc(1.5rem - var(--border));
                font-size       : 1.125rem
            }
        }

        .sm\:tabs-xl {
            & :where(.tab) {
                height          : calc(var(--size-field, .25rem)*14);
                --tab-p         : 1.25rem;
                --tab-radius-min: calc(2rem - var(--border));
                font-size       : 1.125rem
            }
        }
    }

    @media (width>=768px) {
        .md\:tabs {
            --tabs-height   : auto;
            --tabs-direction: row;
            height          : var(--tabs-height);
            flex-wrap       : wrap;
            flex-direction  : var(--tabs-direction);
            display         : flex
        }

        .md\:tab {
            cursor              : pointer;
            appearance          : none;
            text-align          : center;
            -webkit-user-select : none;
            user-select         : none;
            --tab-p             : 1rem;
            --tab-bg            : var(--color-base-100);
            --tab-border-color  : var(--color-base-300);
            --tab-radius-ss     : 0;
            --tab-radius-se     : 0;
            --tab-radius-es     : 0;
            --tab-radius-ee     : 0;
            --tab-order         : 0;
            --tab-radius-min    : calc(.75rem - var(--border));
            flex-wrap           : wrap;
            order               : var(--tab-order);
            height              : calc(var(--size-field, .25rem)*10);
            border-color        : #0000;
            justify-content     : center;
            align-items         : center;
            padding-inline-start: var(--tab-p);
            padding-inline-end  : var(--tab-p);
            font-size           : .875rem;
            display             : inline-flex;
            position            : relative;

            &:hover {
                @media (hover:hover) {
                    & {
                        color: var(--color-base-content)
                    }
                }
            }

            &:is(input[type=radio]) {
                min-width: fit-content;

                &:after {
                    content: attr(aria-label)
                }
            }

            &:is(label) {
                position: relative;

                & input {
                    cursor    : pointer;
                    appearance: none;
                    opacity   : 0;
                    position  : absolute;
                    inset     : 0
                }
            }

            &:checked,
            &:is(label:has(:checked)),
            &:is(.tab-active, [aria-selected=true]) {
                &+.tab-content {
                    height : 100%;
                    display: block
                }
            }

            &:not(:checked, label:has(:checked), :hover, .tab-active, [aria-selected=true]) {
                color: color-mix(in oklab, var(--color-base-content)50%, transparent)
            }

            &:not(input):empty {
                cursor   : default;
                flex-grow: 1
            }

            &:focus {
                --tw-outline-style: none;
                outline-style     : none;

                @media (forced-colors:active) {
                    & {
                        outline-offset: 2px;
                        outline       : 2px solid #0000
                    }
                }
            }

            &:focus-visible,
            &:is(label:has(:checked:focus-visible)) {
                outline-offset: -5px;
                outline       : 2px solid
            }

            &[disabled] {
                pointer-events: none;
                opacity       : .4
            }
        }

        .md\:tab-disabled {
            pointer-events: none;
            opacity       : .4
        }

        .md\:tabs-border {
            & .tab {
                --tab-border-color: #0000 #0000 var(--tab-border-color)#0000;
                border-radius     : var(--radius-field);
                position          : relative;

                &:before {
                    --tw-content    : "";
                    content         : var(--tw-content);
                    background-color: var(--tab-border-color);
                    border-radius   : var(--radius-field);
                    width           : 80%;
                    height          : 3px;
                    transition      : background-color .2s;
                    position        : absolute;
                    bottom          : 0;
                    left            : 10%
                }

                &:is(.tab-active, [aria-selected=true]):not(.tab-disabled, [disabled]),
                &:is(input:checked),
                &:is(label:has(:checked)) {
                    &:before {
                        --tab-border-color: currentColor;
                        border-top        : 3px solid
                    }
                }
            }
        }

        .md\:tabs-lift {
            --tabs-height   : auto;
            --tabs-direction: row;

            &>.tab {
                --tab-border             : 0 0 var(--border)0;
                --tab-radius-ss          : min(var(--radius-field), var(--tab-radius-min));
                --tab-radius-se          : min(var(--radius-field), var(--tab-radius-min));
                --tab-radius-es          : 0;
                --tab-radius-ee          : 0;
                --tab-paddings           : var(--border)var(--tab-p)0 var(--tab-p);
                --tab-border-colors      : #0000 #0000 var(--tab-border-color)#0000;
                --tab-corner-width       : calc(100% + min(var(--radius-field), var(--tab-radius-min))*2);
                --tab-corner-height      : min(var(--radius-field), var(--tab-radius-min));
                --tab-corner-position    : top left, top right;
                border-width             : var(--tab-border);
                padding                  : var(--tab-paddings);
                border-color             : var(--tab-border-colors);
                border-start-start-radius: var(--tab-radius-ss);
                border-start-end-radius  : var(--tab-radius-se);
                border-end-end-radius    : var(--tab-radius-ee);
                border-end-start-radius  : var(--tab-radius-es);

                &:is(.tab-active, [aria-selected=true]):not(.tab-disabled, [disabled]),
                &:is(input:checked, label:has(:checked)) {
                    --tab-border       : var(--border)var(--border)0 var(--border);
                    --tab-border-colors: var(--tab-border-color)var(--tab-border-color)#0000 var(--tab-border-color);
                    --tab-paddings     : 0 calc(var(--tab-p) - var(--border))var(--border)calc(var(--tab-p) - var(--border));
                    --tab-inset        : auto auto 0 auto;
                    --tab-grad         : calc(69% - var(--border));
                    --radius-start     : radial-gradient(circle at top left, #0000 var(--tab-grad), var(--tab-border-color)calc(var(--tab-grad) + .25px), var(--tab-border-color)calc(var(--tab-grad) + var(--border)), var(--tab-bg)calc(var(--tab-grad) + var(--border) + .25px));
                    --radius-end       : radial-gradient(circle at top right, #0000 var(--tab-grad), var(--tab-border-color)calc(var(--tab-grad) + .25px), var(--tab-border-color)calc(var(--tab-grad) + var(--border)), var(--tab-bg)calc(var(--tab-grad) + var(--border) + .25px));
                    background-color   : var(--tab-bg);

                    &:before {
                        z-index            : 1;
                        content            : "";
                        width              : var(--tab-corner-width);
                        height             : var(--tab-corner-height);
                        background-position: var(--tab-corner-position);
                        background-image   : var(--radius-start), var(--radius-end);
                        background-size    : min(var(--radius-field), var(--tab-radius-min))min(var(--radius-field), var(--tab-radius-min));
                        inset              : var(--tab-inset);
                        background-repeat  : no-repeat;
                        display            : block;
                        position           : absolute
                    }

                    &:first-child:before {
                        --radius-start: none
                    }

                    [dir=rtl] &:first-child:before {
                        transform: rotateY(180deg)
                    }

                    &:last-child:before {
                        --radius-end: none
                    }

                    [dir=rtl] &:last-child:before {
                        transform: rotateY(180deg)
                    }
                }
            }

            &:has(.tab-content) {
                &>.tab:first-child {
                    &:not(.tab-active, [aria-selected=true]) {
                        --tab-border-colors: var(--tab-border-color)var(--tab-border-color)#0000 var(--tab-border-color)
                    }
                }
            }

            & .tab-content {
                --tabcontent-margin   : calc(-1*var(--border))0 0 0;
                --tabcontent-radius-ss: 0;
                --tabcontent-radius-se: var(--radius-box);
                --tabcontent-radius-es: var(--radius-box);
                --tabcontent-radius-ee: var(--radius-box)
            }

            & :checked,
            & label:has(:checked),
            & :is(.tab-active, [aria-selected=true]) {
                &+.tab-content {

                    &:first-child,
                    &:nth-child(n+3) {
                        --tabcontent-radius-ss: var(--radius-box)
                    }
                }
            }
        }

        .md\:tabs-top {
            --tabs-height   : auto;
            --tabs-direction: row;

            & .tab {
                --tab-order          : 0;
                --tab-border         : 0 0 var(--border)0;
                --tab-radius-ss      : min(var(--radius-field), var(--tab-radius-min));
                --tab-radius-se      : min(var(--radius-field), var(--tab-radius-min));
                --tab-radius-es      : 0;
                --tab-radius-ee      : 0;
                --tab-paddings       : var(--border)var(--tab-p)0 var(--tab-p);
                --tab-border-colors  : #0000 #0000 var(--tab-border-color)#0000;
                --tab-corner-width   : calc(100% + min(var(--radius-field), var(--tab-radius-min))*2);
                --tab-corner-height  : min(var(--radius-field), var(--tab-radius-min));
                --tab-corner-position: top left, top right;

                &:is(.tab-active, [aria-selected=true]):not(.tab-disabled, [disabled]),
                &:is(input:checked),
                &:is(label:has(:checked)) {
                    --tab-border       : var(--border)var(--border)0 var(--border);
                    --tab-border-colors: var(--tab-border-color)var(--tab-border-color)#0000 var(--tab-border-color);
                    --tab-paddings     : 0 calc(var(--tab-p) - var(--border))var(--border)calc(var(--tab-p) - var(--border));
                    --tab-inset        : auto auto 0 auto;
                    --radius-start     : radial-gradient(circle at top left, #0000 var(--tab-grad), var(--tab-border-color)calc(var(--tab-grad) + .25px), var(--tab-border-color)calc(var(--tab-grad) + var(--border)), var(--tab-bg)calc(var(--tab-grad) + var(--border) + .25px));
                    --radius-end       : radial-gradient(circle at top right, #0000 var(--tab-grad), var(--tab-border-color)calc(var(--tab-grad) + .25px), var(--tab-border-color)calc(var(--tab-grad) + var(--border)), var(--tab-bg)calc(var(--tab-grad) + var(--border) + .25px))
                }
            }

            &:has(.tab-content) {
                &>.tab:first-child {
                    &:not(.tab-active, [aria-selected=true]) {
                        --tab-border-colors: var(--tab-border-color)var(--tab-border-color)#0000 var(--tab-border-color)
                    }
                }
            }

            & .tab-content {
                --tabcontent-order    : 1;
                --tabcontent-margin   : calc(-1*var(--border))0 0 0;
                --tabcontent-radius-ss: 0;
                --tabcontent-radius-se: var(--radius-box);
                --tabcontent-radius-es: var(--radius-box);
                --tabcontent-radius-ee: var(--radius-box)
            }

            & :checked,
            & label:has(:checked),
            & :is(.tab-active, [aria-selected=true]) {
                &+.tab-content {

                    &:first-child,
                    &:nth-child(n+3) {
                        --tabcontent-radius-ss: var(--radius-box)
                    }
                }
            }
        }

        .md\:tabs-bottom {
            --tabs-height   : auto;
            --tabs-direction: row;

            & .tab {
                --tab-order          : 1;
                --tab-border         : var(--border)0 0 0;
                --tab-radius-ss      : 0;
                --tab-radius-se      : 0;
                --tab-radius-es      : min(var(--radius-field), var(--tab-radius-min));
                --tab-radius-ee      : min(var(--radius-field), var(--tab-radius-min));
                --tab-border-colors  : var(--tab-border-color)#0000 #0000 #0000;
                --tab-paddings       : 0 var(--tab-p)var(--border)var(--tab-p);
                --tab-corner-width   : calc(100% + min(var(--radius-field), var(--tab-radius-min))*2);
                --tab-corner-height  : min(var(--radius-field), var(--tab-radius-min));
                --tab-corner-position: top left, top right;

                &:is(.tab-active, [aria-selected=true]):not(.tab-disabled, [disabled]),
                &:is(input:checked),
                &:is(label:has(:checked)) {
                    --tab-border       : 0 var(--border)var(--border)var(--border);
                    --tab-border-colors: #0000 var(--tab-border-color)var(--tab-border-color)var(--tab-border-color);
                    --tab-paddings     : var(--border)calc(var(--tab-p) - var(--border))0 calc(var(--tab-p) - var(--border));
                    --tab-inset        : 0 auto auto auto;
                    --radius-start     : radial-gradient(circle at bottom left, #0000 var(--tab-grad), var(--tab-border-color)calc(var(--tab-grad) + .25px), var(--tab-border-color)calc(var(--tab-grad) + var(--border)), var(--tab-bg)calc(var(--tab-grad) + var(--border) + .25px));
                    --radius-end       : radial-gradient(circle at bottom right, #0000 var(--tab-grad), var(--tab-border-color)calc(var(--tab-grad) + .25px), var(--tab-border-color)calc(var(--tab-grad) + var(--border)), var(--tab-bg)calc(var(--tab-grad) + var(--border) + .25px))
                }
            }

            &:has(.tab-content) {
                &>.tab:first-child {
                    &:not(.tab-active, [aria-selected=true]) {
                        --tab-border-colors: #0000 var(--tab-border-color)var(--tab-border-color)var(--tab-border-color)
                    }
                }
            }

            & .tab-content {
                --tabcontent-order    : 0;
                --tabcontent-margin   : 0 0 calc(-1*var(--border))0;
                --tabcontent-radius-ss: var(--radius-box);
                --tabcontent-radius-se: var(--radius-box);
                --tabcontent-radius-es: 0;
                --tabcontent-radius-ee: var(--radius-box)
            }

            &>:checked,
            &>:is(label:has(:checked)),
            &>:is(.tab-active, [aria-selected=true]) {
                &+.tab-content:not(:nth-child(2)) {
                    --tabcontent-radius-es: var(--radius-box)
                }
            }
        }

        .md\:tabs-box {
            background-color : var(--color-base-200);
            --tabs-box-radius: calc(var(--radius-field) + var(--radius-field) + var(--radius-field));
            border-radius    : calc(var(--radius-field) + min(.25rem, var(--tabs-box-radius)));
            box-shadow       : 0 -.5px oklch(100% 0 0/calc(var(--depth)*.1))inset, 0 .5px oklch(0% 0 0/calc(var(--depth)*.05))inset;
            padding          : .25rem;

            & .tab {
                border-radius: var(--radius-field);
                border-style : none;

                &:focus-visible,
                &:is(label:has(:checked:focus-visible)) {
                    outline-offset: 2px
                }
            }

            &>:is(.tab-active, [aria-selected=true]):not(.tab-disabled, [disabled]),
            &>:is(input:checked),
            &>:is(label:has(:checked)) {
                background-color: var(--tab-bg, var(--color-base-100));
                box-shadow      : 0 1px oklch(100% 0 0/calc(var(--depth)*.1))inset, 0 1px 1px -1px color-mix(in oklab, var(--color-neutral)calc(var(--depth)*50%), #0000), 0 1px 6px -4px color-mix(in oklab, var(--color-neutral)calc(var(--depth)*100%), #0000);

                @media (forced-colors:active) {
                    & {
                        border: 1px solid
                    }
                }
            }
        }

        .md\:tab-content {
            --tabcontent-radius-ss   : 0;
            --tabcontent-radius-se   : 0;
            --tabcontent-radius-es   : 0;
            --tabcontent-radius-ee   : 0;
            --tabcontent-order       : 1;
            width                    : 100%;
            margin                   : var(--tabcontent-margin);
            order                    : 1;
            order                    : var(--tabcontent-order);
            border-color             : #0000;
            border-width             : var(--border);
            border-start-start-radius: var(--tabcontent-radius-ss);
            border-start-end-radius  : var(--tabcontent-radius-se);
            border-end-end-radius    : var(--tabcontent-radius-ee);
            border-end-start-radius  : var(--tabcontent-radius-es);
            display                  : none
        }

        .md\:tabs-xs {
            & :where(.tab) {
                height          : calc(var(--size-field, .25rem)*6);
                --tab-p         : .375rem;
                --tab-radius-min: calc(.5rem - var(--border));
                font-size       : .75rem
            }
        }

        .md\:tabs-sm {
            & :where(.tab) {
                height          : calc(var(--size-field, .25rem)*8);
                --tab-p         : .5rem;
                --tab-radius-min: calc(.5rem - var(--border));
                font-size       : .875rem
            }
        }

        .md\:tabs-md {
            & :where(.tab) {
                height          : calc(var(--size-field, .25rem)*10);
                --tab-p         : .75rem;
                --tab-radius-min: calc(.75rem - var(--border));
                font-size       : .875rem
            }
        }

        .md\:tabs-lg {
            & :where(.tab) {
                height          : calc(var(--size-field, .25rem)*12);
                --tab-p         : 1rem;
                --tab-radius-min: calc(1.5rem - var(--border));
                font-size       : 1.125rem
            }
        }

        .md\:tabs-xl {
            & :where(.tab) {
                height          : calc(var(--size-field, .25rem)*14);
                --tab-p         : 1.25rem;
                --tab-radius-min: calc(2rem - var(--border));
                font-size       : 1.125rem
            }
        }
    }

    @media (width>=1024px) {
        .lg\:tabs {
            --tabs-height   : auto;
            --tabs-direction: row;
            height          : var(--tabs-height);
            flex-wrap       : wrap;
            flex-direction  : var(--tabs-direction);
            display         : flex
        }

        .lg\:tab {
            cursor              : pointer;
            appearance          : none;
            text-align          : center;
            -webkit-user-select : none;
            user-select         : none;
            --tab-p             : 1rem;
            --tab-bg            : var(--color-base-100);
            --tab-border-color  : var(--color-base-300);
            --tab-radius-ss     : 0;
            --tab-radius-se     : 0;
            --tab-radius-es     : 0;
            --tab-radius-ee     : 0;
            --tab-order         : 0;
            --tab-radius-min    : calc(.75rem - var(--border));
            flex-wrap           : wrap;
            order               : var(--tab-order);
            height              : calc(var(--size-field, .25rem)*10);
            border-color        : #0000;
            justify-content     : center;
            align-items         : center;
            padding-inline-start: var(--tab-p);
            padding-inline-end  : var(--tab-p);
            font-size           : .875rem;
            display             : inline-flex;
            position            : relative;

            &:hover {
                @media (hover:hover) {
                    & {
                        color: var(--color-base-content)
                    }
                }
            }

            &:is(input[type=radio]) {
                min-width: fit-content;

                &:after {
                    content: attr(aria-label)
                }
            }

            &:is(label) {
                position: relative;

                & input {
                    cursor    : pointer;
                    appearance: none;
                    opacity   : 0;
                    position  : absolute;
                    inset     : 0
                }
            }

            &:checked,
            &:is(label:has(:checked)),
            &:is(.tab-active, [aria-selected=true]) {
                &+.tab-content {
                    height : 100%;
                    display: block
                }
            }

            &:not(:checked, label:has(:checked), :hover, .tab-active, [aria-selected=true]) {
                color: color-mix(in oklab, var(--color-base-content)50%, transparent)
            }

            &:not(input):empty {
                cursor   : default;
                flex-grow: 1
            }

            &:focus {
                --tw-outline-style: none;
                outline-style     : none;

                @media (forced-colors:active) {
                    & {
                        outline-offset: 2px;
                        outline       : 2px solid #0000
                    }
                }
            }

            &:focus-visible,
            &:is(label:has(:checked:focus-visible)) {
                outline-offset: -5px;
                outline       : 2px solid
            }

            &[disabled] {
                pointer-events: none;
                opacity       : .4
            }
        }

        .lg\:tab-disabled {
            pointer-events: none;
            opacity       : .4
        }

        .lg\:tabs-border {
            & .tab {
                --tab-border-color: #0000 #0000 var(--tab-border-color)#0000;
                border-radius     : var(--radius-field);
                position          : relative;

                &:before {
                    --tw-content    : "";
                    content         : var(--tw-content);
                    background-color: var(--tab-border-color);
                    border-radius   : var(--radius-field);
                    width           : 80%;
                    height          : 3px;
                    transition      : background-color .2s;
                    position        : absolute;
                    bottom          : 0;
                    left            : 10%
                }

                &:is(.tab-active, [aria-selected=true]):not(.tab-disabled, [disabled]),
                &:is(input:checked),
                &:is(label:has(:checked)) {
                    &:before {
                        --tab-border-color: currentColor;
                        border-top        : 3px solid
                    }
                }
            }
        }

        .lg\:tabs-lift {
            --tabs-height   : auto;
            --tabs-direction: row;

            &>.tab {
                --tab-border             : 0 0 var(--border)0;
                --tab-radius-ss          : min(var(--radius-field), var(--tab-radius-min));
                --tab-radius-se          : min(var(--radius-field), var(--tab-radius-min));
                --tab-radius-es          : 0;
                --tab-radius-ee          : 0;
                --tab-paddings           : var(--border)var(--tab-p)0 var(--tab-p);
                --tab-border-colors      : #0000 #0000 var(--tab-border-color)#0000;
                --tab-corner-width       : calc(100% + min(var(--radius-field), var(--tab-radius-min))*2);
                --tab-corner-height      : min(var(--radius-field), var(--tab-radius-min));
                --tab-corner-position    : top left, top right;
                border-width             : var(--tab-border);
                padding                  : var(--tab-paddings);
                border-color             : var(--tab-border-colors);
                border-start-start-radius: var(--tab-radius-ss);
                border-start-end-radius  : var(--tab-radius-se);
                border-end-end-radius    : var(--tab-radius-ee);
                border-end-start-radius  : var(--tab-radius-es);

                &:is(.tab-active, [aria-selected=true]):not(.tab-disabled, [disabled]),
                &:is(input:checked, label:has(:checked)) {
                    --tab-border       : var(--border)var(--border)0 var(--border);
                    --tab-border-colors: var(--tab-border-color)var(--tab-border-color)#0000 var(--tab-border-color);
                    --tab-paddings     : 0 calc(var(--tab-p) - var(--border))var(--border)calc(var(--tab-p) - var(--border));
                    --tab-inset        : auto auto 0 auto;
                    --tab-grad         : calc(69% - var(--border));
                    --radius-start     : radial-gradient(circle at top left, #0000 var(--tab-grad), var(--tab-border-color)calc(var(--tab-grad) + .25px), var(--tab-border-color)calc(var(--tab-grad) + var(--border)), var(--tab-bg)calc(var(--tab-grad) + var(--border) + .25px));
                    --radius-end       : radial-gradient(circle at top right, #0000 var(--tab-grad), var(--tab-border-color)calc(var(--tab-grad) + .25px), var(--tab-border-color)calc(var(--tab-grad) + var(--border)), var(--tab-bg)calc(var(--tab-grad) + var(--border) + .25px));
                    background-color   : var(--tab-bg);

                    &:before {
                        z-index            : 1;
                        content            : "";
                        width              : var(--tab-corner-width);
                        height             : var(--tab-corner-height);
                        background-position: var(--tab-corner-position);
                        background-image   : var(--radius-start), var(--radius-end);
                        background-size    : min(var(--radius-field), var(--tab-radius-min))min(var(--radius-field), var(--tab-radius-min));
                        inset              : var(--tab-inset);
                        background-repeat  : no-repeat;
                        display            : block;
                        position           : absolute
                    }

                    &:first-child:before {
                        --radius-start: none
                    }

                    [dir=rtl] &:first-child:before {
                        transform: rotateY(180deg)
                    }

                    &:last-child:before {
                        --radius-end: none
                    }

                    [dir=rtl] &:last-child:before {
                        transform: rotateY(180deg)
                    }
                }
            }

            &:has(.tab-content) {
                &>.tab:first-child {
                    &:not(.tab-active, [aria-selected=true]) {
                        --tab-border-colors: var(--tab-border-color)var(--tab-border-color)#0000 var(--tab-border-color)
                    }
                }
            }

            & .tab-content {
                --tabcontent-margin   : calc(-1*var(--border))0 0 0;
                --tabcontent-radius-ss: 0;
                --tabcontent-radius-se: var(--radius-box);
                --tabcontent-radius-es: var(--radius-box);
                --tabcontent-radius-ee: var(--radius-box)
            }

            & :checked,
            & label:has(:checked),
            & :is(.tab-active, [aria-selected=true]) {
                &+.tab-content {

                    &:first-child,
                    &:nth-child(n+3) {
                        --tabcontent-radius-ss: var(--radius-box)
                    }
                }
            }
        }

        .lg\:tabs-top {
            --tabs-height   : auto;
            --tabs-direction: row;

            & .tab {
                --tab-order          : 0;
                --tab-border         : 0 0 var(--border)0;
                --tab-radius-ss      : min(var(--radius-field), var(--tab-radius-min));
                --tab-radius-se      : min(var(--radius-field), var(--tab-radius-min));
                --tab-radius-es      : 0;
                --tab-radius-ee      : 0;
                --tab-paddings       : var(--border)var(--tab-p)0 var(--tab-p);
                --tab-border-colors  : #0000 #0000 var(--tab-border-color)#0000;
                --tab-corner-width   : calc(100% + min(var(--radius-field), var(--tab-radius-min))*2);
                --tab-corner-height  : min(var(--radius-field), var(--tab-radius-min));
                --tab-corner-position: top left, top right;

                &:is(.tab-active, [aria-selected=true]):not(.tab-disabled, [disabled]),
                &:is(input:checked),
                &:is(label:has(:checked)) {
                    --tab-border       : var(--border)var(--border)0 var(--border);
                    --tab-border-colors: var(--tab-border-color)var(--tab-border-color)#0000 var(--tab-border-color);
                    --tab-paddings     : 0 calc(var(--tab-p) - var(--border))var(--border)calc(var(--tab-p) - var(--border));
                    --tab-inset        : auto auto 0 auto;
                    --radius-start     : radial-gradient(circle at top left, #0000 var(--tab-grad), var(--tab-border-color)calc(var(--tab-grad) + .25px), var(--tab-border-color)calc(var(--tab-grad) + var(--border)), var(--tab-bg)calc(var(--tab-grad) + var(--border) + .25px));
                    --radius-end       : radial-gradient(circle at top right, #0000 var(--tab-grad), var(--tab-border-color)calc(var(--tab-grad) + .25px), var(--tab-border-color)calc(var(--tab-grad) + var(--border)), var(--tab-bg)calc(var(--tab-grad) + var(--border) + .25px))
                }
            }

            &:has(.tab-content) {
                &>.tab:first-child {
                    &:not(.tab-active, [aria-selected=true]) {
                        --tab-border-colors: var(--tab-border-color)var(--tab-border-color)#0000 var(--tab-border-color)
                    }
                }
            }

            & .tab-content {
                --tabcontent-order    : 1;
                --tabcontent-margin   : calc(-1*var(--border))0 0 0;
                --tabcontent-radius-ss: 0;
                --tabcontent-radius-se: var(--radius-box);
                --tabcontent-radius-es: var(--radius-box);
                --tabcontent-radius-ee: var(--radius-box)
            }

            & :checked,
            & label:has(:checked),
            & :is(.tab-active, [aria-selected=true]) {
                &+.tab-content {

                    &:first-child,
                    &:nth-child(n+3) {
                        --tabcontent-radius-ss: var(--radius-box)
                    }
                }
            }
        }

        .lg\:tabs-bottom {
            --tabs-height   : auto;
            --tabs-direction: row;

            & .tab {
                --tab-order          : 1;
                --tab-border         : var(--border)0 0 0;
                --tab-radius-ss      : 0;
                --tab-radius-se      : 0;
                --tab-radius-es      : min(var(--radius-field), var(--tab-radius-min));
                --tab-radius-ee      : min(var(--radius-field), var(--tab-radius-min));
                --tab-border-colors  : var(--tab-border-color)#0000 #0000 #0000;
                --tab-paddings       : 0 var(--tab-p)var(--border)var(--tab-p);
                --tab-corner-width   : calc(100% + min(var(--radius-field), var(--tab-radius-min))*2);
                --tab-corner-height  : min(var(--radius-field), var(--tab-radius-min));
                --tab-corner-position: top left, top right;

                &:is(.tab-active, [aria-selected=true]):not(.tab-disabled, [disabled]),
                &:is(input:checked),
                &:is(label:has(:checked)) {
                    --tab-border       : 0 var(--border)var(--border)var(--border);
                    --tab-border-colors: #0000 var(--tab-border-color)var(--tab-border-color)var(--tab-border-color);
                    --tab-paddings     : var(--border)calc(var(--tab-p) - var(--border))0 calc(var(--tab-p) - var(--border));
                    --tab-inset        : 0 auto auto auto;
                    --radius-start     : radial-gradient(circle at bottom left, #0000 var(--tab-grad), var(--tab-border-color)calc(var(--tab-grad) + .25px), var(--tab-border-color)calc(var(--tab-grad) + var(--border)), var(--tab-bg)calc(var(--tab-grad) + var(--border) + .25px));
                    --radius-end       : radial-gradient(circle at bottom right, #0000 var(--tab-grad), var(--tab-border-color)calc(var(--tab-grad) + .25px), var(--tab-border-color)calc(var(--tab-grad) + var(--border)), var(--tab-bg)calc(var(--tab-grad) + var(--border) + .25px))
                }
            }

            &:has(.tab-content) {
                &>.tab:first-child {
                    &:not(.tab-active, [aria-selected=true]) {
                        --tab-border-colors: #0000 var(--tab-border-color)var(--tab-border-color)var(--tab-border-color)
                    }
                }
            }

            & .tab-content {
                --tabcontent-order    : 0;
                --tabcontent-margin   : 0 0 calc(-1*var(--border))0;
                --tabcontent-radius-ss: var(--radius-box);
                --tabcontent-radius-se: var(--radius-box);
                --tabcontent-radius-es: 0;
                --tabcontent-radius-ee: var(--radius-box)
            }

            &>:checked,
            &>:is(label:has(:checked)),
            &>:is(.tab-active, [aria-selected=true]) {
                &+.tab-content:not(:nth-child(2)) {
                    --tabcontent-radius-es: var(--radius-box)
                }
            }
        }

        .lg\:tabs-box {
            background-color : var(--color-base-200);
            --tabs-box-radius: calc(var(--radius-field) + var(--radius-field) + var(--radius-field));
            border-radius    : calc(var(--radius-field) + min(.25rem, var(--tabs-box-radius)));
            box-shadow       : 0 -.5px oklch(100% 0 0/calc(var(--depth)*.1))inset, 0 .5px oklch(0% 0 0/calc(var(--depth)*.05))inset;
            padding          : .25rem;

            & .tab {
                border-radius: var(--radius-field);
                border-style : none;

                &:focus-visible,
                &:is(label:has(:checked:focus-visible)) {
                    outline-offset: 2px
                }
            }

            &>:is(.tab-active, [aria-selected=true]):not(.tab-disabled, [disabled]),
            &>:is(input:checked),
            &>:is(label:has(:checked)) {
                background-color: var(--tab-bg, var(--color-base-100));
                box-shadow      : 0 1px oklch(100% 0 0/calc(var(--depth)*.1))inset, 0 1px 1px -1px color-mix(in oklab, var(--color-neutral)calc(var(--depth)*50%), #0000), 0 1px 6px -4px color-mix(in oklab, var(--color-neutral)calc(var(--depth)*100%), #0000);

                @media (forced-colors:active) {
                    & {
                        border: 1px solid
                    }
                }
            }
        }

        .lg\:tab-content {
            --tabcontent-radius-ss   : 0;
            --tabcontent-radius-se   : 0;
            --tabcontent-radius-es   : 0;
            --tabcontent-radius-ee   : 0;
            --tabcontent-order       : 1;
            width                    : 100%;
            margin                   : var(--tabcontent-margin);
            order                    : 1;
            order                    : var(--tabcontent-order);
            border-color             : #0000;
            border-width             : var(--border);
            border-start-start-radius: var(--tabcontent-radius-ss);
            border-start-end-radius  : var(--tabcontent-radius-se);
            border-end-end-radius    : var(--tabcontent-radius-ee);
            border-end-start-radius  : var(--tabcontent-radius-es);
            display                  : none
        }

        .lg\:tabs-xs {
            & :where(.tab) {
                height          : calc(var(--size-field, .25rem)*6);
                --tab-p         : .375rem;
                --tab-radius-min: calc(.5rem - var(--border));
                font-size       : .75rem
            }
        }

        .lg\:tabs-sm {
            & :where(.tab) {
                height          : calc(var(--size-field, .25rem)*8);
                --tab-p         : .5rem;
                --tab-radius-min: calc(.5rem - var(--border));
                font-size       : .875rem
            }
        }

        .lg\:tabs-md {
            & :where(.tab) {
                height          : calc(var(--size-field, .25rem)*10);
                --tab-p         : .75rem;
                --tab-radius-min: calc(.75rem - var(--border));
                font-size       : .875rem
            }
        }

        .lg\:tabs-lg {
            & :where(.tab) {
                height          : calc(var(--size-field, .25rem)*12);
                --tab-p         : 1rem;
                --tab-radius-min: calc(1.5rem - var(--border));
                font-size       : 1.125rem
            }
        }

        .lg\:tabs-xl {
            & :where(.tab) {
                height          : calc(var(--size-field, .25rem)*14);
                --tab-p         : 1.25rem;
                --tab-radius-min: calc(2rem - var(--border));
                font-size       : 1.125rem
            }
        }
    }

    @media (width>=1280px) {
        .xl\:tabs {
            --tabs-height   : auto;
            --tabs-direction: row;
            height          : var(--tabs-height);
            flex-wrap       : wrap;
            flex-direction  : var(--tabs-direction);
            display         : flex
        }

        .xl\:tab {
            cursor              : pointer;
            appearance          : none;
            text-align          : center;
            -webkit-user-select : none;
            user-select         : none;
            --tab-p             : 1rem;
            --tab-bg            : var(--color-base-100);
            --tab-border-color  : var(--color-base-300);
            --tab-radius-ss     : 0;
            --tab-radius-se     : 0;
            --tab-radius-es     : 0;
            --tab-radius-ee     : 0;
            --tab-order         : 0;
            --tab-radius-min    : calc(.75rem - var(--border));
            flex-wrap           : wrap;
            order               : var(--tab-order);
            height              : calc(var(--size-field, .25rem)*10);
            border-color        : #0000;
            justify-content     : center;
            align-items         : center;
            padding-inline-start: var(--tab-p);
            padding-inline-end  : var(--tab-p);
            font-size           : .875rem;
            display             : inline-flex;
            position            : relative;

            &:hover {
                @media (hover:hover) {
                    & {
                        color: var(--color-base-content)
                    }
                }
            }

            &:is(input[type=radio]) {
                min-width: fit-content;

                &:after {
                    content: attr(aria-label)
                }
            }

            &:is(label) {
                position: relative;

                & input {
                    cursor    : pointer;
                    appearance: none;
                    opacity   : 0;
                    position  : absolute;
                    inset     : 0
                }
            }

            &:checked,
            &:is(label:has(:checked)),
            &:is(.tab-active, [aria-selected=true]) {
                &+.tab-content {
                    height : 100%;
                    display: block
                }
            }

            &:not(:checked, label:has(:checked), :hover, .tab-active, [aria-selected=true]) {
                color: color-mix(in oklab, var(--color-base-content)50%, transparent)
            }

            &:not(input):empty {
                cursor   : default;
                flex-grow: 1
            }

            &:focus {
                --tw-outline-style: none;
                outline-style     : none;

                @media (forced-colors:active) {
                    & {
                        outline-offset: 2px;
                        outline       : 2px solid #0000
                    }
                }
            }

            &:focus-visible,
            &:is(label:has(:checked:focus-visible)) {
                outline-offset: -5px;
                outline       : 2px solid
            }

            &[disabled] {
                pointer-events: none;
                opacity       : .4
            }
        }

        .xl\:tab-disabled {
            pointer-events: none;
            opacity       : .4
        }

        .xl\:tabs-border {
            & .tab {
                --tab-border-color: #0000 #0000 var(--tab-border-color)#0000;
                border-radius     : var(--radius-field);
                position          : relative;

                &:before {
                    --tw-content    : "";
                    content         : var(--tw-content);
                    background-color: var(--tab-border-color);
                    border-radius   : var(--radius-field);
                    width           : 80%;
                    height          : 3px;
                    transition      : background-color .2s;
                    position        : absolute;
                    bottom          : 0;
                    left            : 10%
                }

                &:is(.tab-active, [aria-selected=true]):not(.tab-disabled, [disabled]),
                &:is(input:checked),
                &:is(label:has(:checked)) {
                    &:before {
                        --tab-border-color: currentColor;
                        border-top        : 3px solid
                    }
                }
            }
        }

        .xl\:tabs-lift {
            --tabs-height   : auto;
            --tabs-direction: row;

            &>.tab {
                --tab-border             : 0 0 var(--border)0;
                --tab-radius-ss          : min(var(--radius-field), var(--tab-radius-min));
                --tab-radius-se          : min(var(--radius-field), var(--tab-radius-min));
                --tab-radius-es          : 0;
                --tab-radius-ee          : 0;
                --tab-paddings           : var(--border)var(--tab-p)0 var(--tab-p);
                --tab-border-colors      : #0000 #0000 var(--tab-border-color)#0000;
                --tab-corner-width       : calc(100% + min(var(--radius-field), var(--tab-radius-min))*2);
                --tab-corner-height      : min(var(--radius-field), var(--tab-radius-min));
                --tab-corner-position    : top left, top right;
                border-width             : var(--tab-border);
                padding                  : var(--tab-paddings);
                border-color             : var(--tab-border-colors);
                border-start-start-radius: var(--tab-radius-ss);
                border-start-end-radius  : var(--tab-radius-se);
                border-end-end-radius    : var(--tab-radius-ee);
                border-end-start-radius  : var(--tab-radius-es);

                &:is(.tab-active, [aria-selected=true]):not(.tab-disabled, [disabled]),
                &:is(input:checked, label:has(:checked)) {
                    --tab-border       : var(--border)var(--border)0 var(--border);
                    --tab-border-colors: var(--tab-border-color)var(--tab-border-color)#0000 var(--tab-border-color);
                    --tab-paddings     : 0 calc(var(--tab-p) - var(--border))var(--border)calc(var(--tab-p) - var(--border));
                    --tab-inset        : auto auto 0 auto;
                    --tab-grad         : calc(69% - var(--border));
                    --radius-start     : radial-gradient(circle at top left, #0000 var(--tab-grad), var(--tab-border-color)calc(var(--tab-grad) + .25px), var(--tab-border-color)calc(var(--tab-grad) + var(--border)), var(--tab-bg)calc(var(--tab-grad) + var(--border) + .25px));
                    --radius-end       : radial-gradient(circle at top right, #0000 var(--tab-grad), var(--tab-border-color)calc(var(--tab-grad) + .25px), var(--tab-border-color)calc(var(--tab-grad) + var(--border)), var(--tab-bg)calc(var(--tab-grad) + var(--border) + .25px));
                    background-color   : var(--tab-bg);

                    &:before {
                        z-index            : 1;
                        content            : "";
                        width              : var(--tab-corner-width);
                        height             : var(--tab-corner-height);
                        background-position: var(--tab-corner-position);
                        background-image   : var(--radius-start), var(--radius-end);
                        background-size    : min(var(--radius-field), var(--tab-radius-min))min(var(--radius-field), var(--tab-radius-min));
                        inset              : var(--tab-inset);
                        background-repeat  : no-repeat;
                        display            : block;
                        position           : absolute
                    }

                    &:first-child:before {
                        --radius-start: none
                    }

                    [dir=rtl] &:first-child:before {
                        transform: rotateY(180deg)
                    }

                    &:last-child:before {
                        --radius-end: none
                    }

                    [dir=rtl] &:last-child:before {
                        transform: rotateY(180deg)
                    }
                }
            }

            &:has(.tab-content) {
                &>.tab:first-child {
                    &:not(.tab-active, [aria-selected=true]) {
                        --tab-border-colors: var(--tab-border-color)var(--tab-border-color)#0000 var(--tab-border-color)
                    }
                }
            }

            & .tab-content {
                --tabcontent-margin   : calc(-1*var(--border))0 0 0;
                --tabcontent-radius-ss: 0;
                --tabcontent-radius-se: var(--radius-box);
                --tabcontent-radius-es: var(--radius-box);
                --tabcontent-radius-ee: var(--radius-box)
            }

            & :checked,
            & label:has(:checked),
            & :is(.tab-active, [aria-selected=true]) {
                &+.tab-content {

                    &:first-child,
                    &:nth-child(n+3) {
                        --tabcontent-radius-ss: var(--radius-box)
                    }
                }
            }
        }

        .xl\:tabs-top {
            --tabs-height   : auto;
            --tabs-direction: row;

            & .tab {
                --tab-order          : 0;
                --tab-border         : 0 0 var(--border)0;
                --tab-radius-ss      : min(var(--radius-field), var(--tab-radius-min));
                --tab-radius-se      : min(var(--radius-field), var(--tab-radius-min));
                --tab-radius-es      : 0;
                --tab-radius-ee      : 0;
                --tab-paddings       : var(--border)var(--tab-p)0 var(--tab-p);
                --tab-border-colors  : #0000 #0000 var(--tab-border-color)#0000;
                --tab-corner-width   : calc(100% + min(var(--radius-field), var(--tab-radius-min))*2);
                --tab-corner-height  : min(var(--radius-field), var(--tab-radius-min));
                --tab-corner-position: top left, top right;

                &:is(.tab-active, [aria-selected=true]):not(.tab-disabled, [disabled]),
                &:is(input:checked),
                &:is(label:has(:checked)) {
                    --tab-border       : var(--border)var(--border)0 var(--border);
                    --tab-border-colors: var(--tab-border-color)var(--tab-border-color)#0000 var(--tab-border-color);
                    --tab-paddings     : 0 calc(var(--tab-p) - var(--border))var(--border)calc(var(--tab-p) - var(--border));
                    --tab-inset        : auto auto 0 auto;
                    --radius-start     : radial-gradient(circle at top left, #0000 var(--tab-grad), var(--tab-border-color)calc(var(--tab-grad) + .25px), var(--tab-border-color)calc(var(--tab-grad) + var(--border)), var(--tab-bg)calc(var(--tab-grad) + var(--border) + .25px));
                    --radius-end       : radial-gradient(circle at top right, #0000 var(--tab-grad), var(--tab-border-color)calc(var(--tab-grad) + .25px), var(--tab-border-color)calc(var(--tab-grad) + var(--border)), var(--tab-bg)calc(var(--tab-grad) + var(--border) + .25px))
                }
            }

            &:has(.tab-content) {
                &>.tab:first-child {
                    &:not(.tab-active, [aria-selected=true]) {
                        --tab-border-colors: var(--tab-border-color)var(--tab-border-color)#0000 var(--tab-border-color)
                    }
                }
            }

            & .tab-content {
                --tabcontent-order    : 1;
                --tabcontent-margin   : calc(-1*var(--border))0 0 0;
                --tabcontent-radius-ss: 0;
                --tabcontent-radius-se: var(--radius-box);
                --tabcontent-radius-es: var(--radius-box);
                --tabcontent-radius-ee: var(--radius-box)
            }

            & :checked,
            & label:has(:checked),
            & :is(.tab-active, [aria-selected=true]) {
                &+.tab-content {

                    &:first-child,
                    &:nth-child(n+3) {
                        --tabcontent-radius-ss: var(--radius-box)
                    }
                }
            }
        }

        .xl\:tabs-bottom {
            --tabs-height   : auto;
            --tabs-direction: row;

            & .tab {
                --tab-order          : 1;
                --tab-border         : var(--border)0 0 0;
                --tab-radius-ss      : 0;
                --tab-radius-se      : 0;
                --tab-radius-es      : min(var(--radius-field), var(--tab-radius-min));
                --tab-radius-ee      : min(var(--radius-field), var(--tab-radius-min));
                --tab-border-colors  : var(--tab-border-color)#0000 #0000 #0000;
                --tab-paddings       : 0 var(--tab-p)var(--border)var(--tab-p);
                --tab-corner-width   : calc(100% + min(var(--radius-field), var(--tab-radius-min))*2);
                --tab-corner-height  : min(var(--radius-field), var(--tab-radius-min));
                --tab-corner-position: top left, top right;

                &:is(.tab-active, [aria-selected=true]):not(.tab-disabled, [disabled]),
                &:is(input:checked),
                &:is(label:has(:checked)) {
                    --tab-border       : 0 var(--border)var(--border)var(--border);
                    --tab-border-colors: #0000 var(--tab-border-color)var(--tab-border-color)var(--tab-border-color);
                    --tab-paddings     : var(--border)calc(var(--tab-p) - var(--border))0 calc(var(--tab-p) - var(--border));
                    --tab-inset        : 0 auto auto auto;
                    --radius-start     : radial-gradient(circle at bottom left, #0000 var(--tab-grad), var(--tab-border-color)calc(var(--tab-grad) + .25px), var(--tab-border-color)calc(var(--tab-grad) + var(--border)), var(--tab-bg)calc(var(--tab-grad) + var(--border) + .25px));
                    --radius-end       : radial-gradient(circle at bottom right, #0000 var(--tab-grad), var(--tab-border-color)calc(var(--tab-grad) + .25px), var(--tab-border-color)calc(var(--tab-grad) + var(--border)), var(--tab-bg)calc(var(--tab-grad) + var(--border) + .25px))
                }
            }

            &:has(.tab-content) {
                &>.tab:first-child {
                    &:not(.tab-active, [aria-selected=true]) {
                        --tab-border-colors: #0000 var(--tab-border-color)var(--tab-border-color)var(--tab-border-color)
                    }
                }
            }

            & .tab-content {
                --tabcontent-order    : 0;
                --tabcontent-margin   : 0 0 calc(-1*var(--border))0;
                --tabcontent-radius-ss: var(--radius-box);
                --tabcontent-radius-se: var(--radius-box);
                --tabcontent-radius-es: 0;
                --tabcontent-radius-ee: var(--radius-box)
            }

            &>:checked,
            &>:is(label:has(:checked)),
            &>:is(.tab-active, [aria-selected=true]) {
                &+.tab-content:not(:nth-child(2)) {
                    --tabcontent-radius-es: var(--radius-box)
                }
            }
        }

        .xl\:tabs-box {
            background-color : var(--color-base-200);
            --tabs-box-radius: calc(var(--radius-field) + var(--radius-field) + var(--radius-field));
            border-radius    : calc(var(--radius-field) + min(.25rem, var(--tabs-box-radius)));
            box-shadow       : 0 -.5px oklch(100% 0 0/calc(var(--depth)*.1))inset, 0 .5px oklch(0% 0 0/calc(var(--depth)*.05))inset;
            padding          : .25rem;

            & .tab {
                border-radius: var(--radius-field);
                border-style : none;

                &:focus-visible,
                &:is(label:has(:checked:focus-visible)) {
                    outline-offset: 2px
                }
            }

            &>:is(.tab-active, [aria-selected=true]):not(.tab-disabled, [disabled]),
            &>:is(input:checked),
            &>:is(label:has(:checked)) {
                background-color: var(--tab-bg, var(--color-base-100));
                box-shadow      : 0 1px oklch(100% 0 0/calc(var(--depth)*.1))inset, 0 1px 1px -1px color-mix(in oklab, var(--color-neutral)calc(var(--depth)*50%), #0000), 0 1px 6px -4px color-mix(in oklab, var(--color-neutral)calc(var(--depth)*100%), #0000);

                @media (forced-colors:active) {
                    & {
                        border: 1px solid
                    }
                }
            }
        }

        .xl\:tab-content {
            --tabcontent-radius-ss   : 0;
            --tabcontent-radius-se   : 0;
            --tabcontent-radius-es   : 0;
            --tabcontent-radius-ee   : 0;
            --tabcontent-order       : 1;
            width                    : 100%;
            margin                   : var(--tabcontent-margin);
            order                    : 1;
            order                    : var(--tabcontent-order);
            border-color             : #0000;
            border-width             : var(--border);
            border-start-start-radius: var(--tabcontent-radius-ss);
            border-start-end-radius  : var(--tabcontent-radius-se);
            border-end-end-radius    : var(--tabcontent-radius-ee);
            border-end-start-radius  : var(--tabcontent-radius-es);
            display                  : none
        }

        .xl\:tabs-xs {
            & :where(.tab) {
                height          : calc(var(--size-field, .25rem)*6);
                --tab-p         : .375rem;
                --tab-radius-min: calc(.5rem - var(--border));
                font-size       : .75rem
            }
        }

        .xl\:tabs-sm {
            & :where(.tab) {
                height          : calc(var(--size-field, .25rem)*8);
                --tab-p         : .5rem;
                --tab-radius-min: calc(.5rem - var(--border));
                font-size       : .875rem
            }
        }

        .xl\:tabs-md {
            & :where(.tab) {
                height          : calc(var(--size-field, .25rem)*10);
                --tab-p         : .75rem;
                --tab-radius-min: calc(.75rem - var(--border));
                font-size       : .875rem
            }
        }

        .xl\:tabs-lg {
            & :where(.tab) {
                height          : calc(var(--size-field, .25rem)*12);
                --tab-p         : 1rem;
                --tab-radius-min: calc(1.5rem - var(--border));
                font-size       : 1.125rem
            }
        }

        .xl\:tabs-xl {
            & :where(.tab) {
                height          : calc(var(--size-field, .25rem)*14);
                --tab-p         : 1.25rem;
                --tab-radius-min: calc(2rem - var(--border));
                font-size       : 1.125rem
            }
        }
    }

    @media (width>=1536px) {
        .\32 xl\:tabs {
            --tabs-height   : auto;
            --tabs-direction: row;
            height          : var(--tabs-height);
            flex-wrap       : wrap;
            flex-direction  : var(--tabs-direction);
            display         : flex
        }

        .\32 xl\:tab {
            cursor              : pointer;
            appearance          : none;
            text-align          : center;
            -webkit-user-select : none;
            user-select         : none;
            --tab-p             : 1rem;
            --tab-bg            : var(--color-base-100);
            --tab-border-color  : var(--color-base-300);
            --tab-radius-ss     : 0;
            --tab-radius-se     : 0;
            --tab-radius-es     : 0;
            --tab-radius-ee     : 0;
            --tab-order         : 0;
            --tab-radius-min    : calc(.75rem - var(--border));
            flex-wrap           : wrap;
            order               : var(--tab-order);
            height              : calc(var(--size-field, .25rem)*10);
            border-color        : #0000;
            justify-content     : center;
            align-items         : center;
            padding-inline-start: var(--tab-p);
            padding-inline-end  : var(--tab-p);
            font-size           : .875rem;
            display             : inline-flex;
            position            : relative;

            &:hover {
                @media (hover:hover) {
                    & {
                        color: var(--color-base-content)
                    }
                }
            }

            &:is(input[type=radio]) {
                min-width: fit-content;

                &:after {
                    content: attr(aria-label)
                }
            }

            &:is(label) {
                position: relative;

                & input {
                    cursor    : pointer;
                    appearance: none;
                    opacity   : 0;
                    position  : absolute;
                    inset     : 0
                }
            }

            &:checked,
            &:is(label:has(:checked)),
            &:is(.tab-active, [aria-selected=true]) {
                &+.tab-content {
                    height : 100%;
                    display: block
                }
            }

            &:not(:checked, label:has(:checked), :hover, .tab-active, [aria-selected=true]) {
                color: color-mix(in oklab, var(--color-base-content)50%, transparent)
            }

            &:not(input):empty {
                cursor   : default;
                flex-grow: 1
            }

            &:focus {
                --tw-outline-style: none;
                outline-style     : none;

                @media (forced-colors:active) {
                    & {
                        outline-offset: 2px;
                        outline       : 2px solid #0000
                    }
                }
            }

            &:focus-visible,
            &:is(label:has(:checked:focus-visible)) {
                outline-offset: -5px;
                outline       : 2px solid
            }

            &[disabled] {
                pointer-events: none;
                opacity       : .4
            }
        }

        .\32 xl\:tab-disabled {
            pointer-events: none;
            opacity       : .4
        }

        .\32 xl\:tabs-border {
            & .tab {
                --tab-border-color: #0000 #0000 var(--tab-border-color)#0000;
                border-radius     : var(--radius-field);
                position          : relative;

                &:before {
                    --tw-content    : "";
                    content         : var(--tw-content);
                    background-color: var(--tab-border-color);
                    border-radius   : var(--radius-field);
                    width           : 80%;
                    height          : 3px;
                    transition      : background-color .2s;
                    position        : absolute;
                    bottom          : 0;
                    left            : 10%
                }

                &:is(.tab-active, [aria-selected=true]):not(.tab-disabled, [disabled]),
                &:is(input:checked),
                &:is(label:has(:checked)) {
                    &:before {
                        --tab-border-color: currentColor;
                        border-top        : 3px solid
                    }
                }
            }
        }

        .\32 xl\:tabs-lift {
            --tabs-height   : auto;
            --tabs-direction: row;

            &>.tab {
                --tab-border             : 0 0 var(--border)0;
                --tab-radius-ss          : min(var(--radius-field), var(--tab-radius-min));
                --tab-radius-se          : min(var(--radius-field), var(--tab-radius-min));
                --tab-radius-es          : 0;
                --tab-radius-ee          : 0;
                --tab-paddings           : var(--border)var(--tab-p)0 var(--tab-p);
                --tab-border-colors      : #0000 #0000 var(--tab-border-color)#0000;
                --tab-corner-width       : calc(100% + min(var(--radius-field), var(--tab-radius-min))*2);
                --tab-corner-height      : min(var(--radius-field), var(--tab-radius-min));
                --tab-corner-position    : top left, top right;
                border-width             : var(--tab-border);
                padding                  : var(--tab-paddings);
                border-color             : var(--tab-border-colors);
                border-start-start-radius: var(--tab-radius-ss);
                border-start-end-radius  : var(--tab-radius-se);
                border-end-end-radius    : var(--tab-radius-ee);
                border-end-start-radius  : var(--tab-radius-es);

                &:is(.tab-active, [aria-selected=true]):not(.tab-disabled, [disabled]),
                &:is(input:checked, label:has(:checked)) {
                    --tab-border       : var(--border)var(--border)0 var(--border);
                    --tab-border-colors: var(--tab-border-color)var(--tab-border-color)#0000 var(--tab-border-color);
                    --tab-paddings     : 0 calc(var(--tab-p) - var(--border))var(--border)calc(var(--tab-p) - var(--border));
                    --tab-inset        : auto auto 0 auto;
                    --tab-grad         : calc(69% - var(--border));
                    --radius-start     : radial-gradient(circle at top left, #0000 var(--tab-grad), var(--tab-border-color)calc(var(--tab-grad) + .25px), var(--tab-border-color)calc(var(--tab-grad) + var(--border)), var(--tab-bg)calc(var(--tab-grad) + var(--border) + .25px));
                    --radius-end       : radial-gradient(circle at top right, #0000 var(--tab-grad), var(--tab-border-color)calc(var(--tab-grad) + .25px), var(--tab-border-color)calc(var(--tab-grad) + var(--border)), var(--tab-bg)calc(var(--tab-grad) + var(--border) + .25px));
                    background-color   : var(--tab-bg);

                    &:before {
                        z-index            : 1;
                        content            : "";
                        width              : var(--tab-corner-width);
                        height             : var(--tab-corner-height);
                        background-position: var(--tab-corner-position);
                        background-image   : var(--radius-start), var(--radius-end);
                        background-size    : min(var(--radius-field), var(--tab-radius-min))min(var(--radius-field), var(--tab-radius-min));
                        inset              : var(--tab-inset);
                        background-repeat  : no-repeat;
                        display            : block;
                        position           : absolute
                    }

                    &:first-child:before {
                        --radius-start: none
                    }

                    [dir=rtl] &:first-child:before {
                        transform: rotateY(180deg)
                    }

                    &:last-child:before {
                        --radius-end: none
                    }

                    [dir=rtl] &:last-child:before {
                        transform: rotateY(180deg)
                    }
                }
            }

            &:has(.tab-content) {
                &>.tab:first-child {
                    &:not(.tab-active, [aria-selected=true]) {
                        --tab-border-colors: var(--tab-border-color)var(--tab-border-color)#0000 var(--tab-border-color)
                    }
                }
            }

            & .tab-content {
                --tabcontent-margin   : calc(-1*var(--border))0 0 0;
                --tabcontent-radius-ss: 0;
                --tabcontent-radius-se: var(--radius-box);
                --tabcontent-radius-es: var(--radius-box);
                --tabcontent-radius-ee: var(--radius-box)
            }

            & :checked,
            & label:has(:checked),
            & :is(.tab-active, [aria-selected=true]) {
                &+.tab-content {

                    &:first-child,
                    &:nth-child(n+3) {
                        --tabcontent-radius-ss: var(--radius-box)
                    }
                }
            }
        }

        .\32 xl\:tabs-top {
            --tabs-height   : auto;
            --tabs-direction: row;

            & .tab {
                --tab-order          : 0;
                --tab-border         : 0 0 var(--border)0;
                --tab-radius-ss      : min(var(--radius-field), var(--tab-radius-min));
                --tab-radius-se      : min(var(--radius-field), var(--tab-radius-min));
                --tab-radius-es      : 0;
                --tab-radius-ee      : 0;
                --tab-paddings       : var(--border)var(--tab-p)0 var(--tab-p);
                --tab-border-colors  : #0000 #0000 var(--tab-border-color)#0000;
                --tab-corner-width   : calc(100% + min(var(--radius-field), var(--tab-radius-min))*2);
                --tab-corner-height  : min(var(--radius-field), var(--tab-radius-min));
                --tab-corner-position: top left, top right;

                &:is(.tab-active, [aria-selected=true]):not(.tab-disabled, [disabled]),
                &:is(input:checked),
                &:is(label:has(:checked)) {
                    --tab-border       : var(--border)var(--border)0 var(--border);
                    --tab-border-colors: var(--tab-border-color)var(--tab-border-color)#0000 var(--tab-border-color);
                    --tab-paddings     : 0 calc(var(--tab-p) - var(--border))var(--border)calc(var(--tab-p) - var(--border));
                    --tab-inset        : auto auto 0 auto;
                    --radius-start     : radial-gradient(circle at top left, #0000 var(--tab-grad), var(--tab-border-color)calc(var(--tab-grad) + .25px), var(--tab-border-color)calc(var(--tab-grad) + var(--border)), var(--tab-bg)calc(var(--tab-grad) + var(--border) + .25px));
                    --radius-end       : radial-gradient(circle at top right, #0000 var(--tab-grad), var(--tab-border-color)calc(var(--tab-grad) + .25px), var(--tab-border-color)calc(var(--tab-grad) + var(--border)), var(--tab-bg)calc(var(--tab-grad) + var(--border) + .25px))
                }
            }

            &:has(.tab-content) {
                &>.tab:first-child {
                    &:not(.tab-active, [aria-selected=true]) {
                        --tab-border-colors: var(--tab-border-color)var(--tab-border-color)#0000 var(--tab-border-color)
                    }
                }
            }

            & .tab-content {
                --tabcontent-order    : 1;
                --tabcontent-margin   : calc(-1*var(--border))0 0 0;
                --tabcontent-radius-ss: 0;
                --tabcontent-radius-se: var(--radius-box);
                --tabcontent-radius-es: var(--radius-box);
                --tabcontent-radius-ee: var(--radius-box)
            }

            & :checked,
            & label:has(:checked),
            & :is(.tab-active, [aria-selected=true]) {
                &+.tab-content {

                    &:first-child,
                    &:nth-child(n+3) {
                        --tabcontent-radius-ss: var(--radius-box)
                    }
                }
            }
        }

        .\32 xl\:tabs-bottom {
            --tabs-height   : auto;
            --tabs-direction: row;

            & .tab {
                --tab-order          : 1;
                --tab-border         : var(--border)0 0 0;
                --tab-radius-ss      : 0;
                --tab-radius-se      : 0;
                --tab-radius-es      : min(var(--radius-field), var(--tab-radius-min));
                --tab-radius-ee      : min(var(--radius-field), var(--tab-radius-min));
                --tab-border-colors  : var(--tab-border-color)#0000 #0000 #0000;
                --tab-paddings       : 0 var(--tab-p)var(--border)var(--tab-p);
                --tab-corner-width   : calc(100% + min(var(--radius-field), var(--tab-radius-min))*2);
                --tab-corner-height  : min(var(--radius-field), var(--tab-radius-min));
                --tab-corner-position: top left, top right;

                &:is(.tab-active, [aria-selected=true]):not(.tab-disabled, [disabled]),
                &:is(input:checked),
                &:is(label:has(:checked)) {
                    --tab-border       : 0 var(--border)var(--border)var(--border);
                    --tab-border-colors: #0000 var(--tab-border-color)var(--tab-border-color)var(--tab-border-color);
                    --tab-paddings     : var(--border)calc(var(--tab-p) - var(--border))0 calc(var(--tab-p) - var(--border));
                    --tab-inset        : 0 auto auto auto;
                    --radius-start     : radial-gradient(circle at bottom left, #0000 var(--tab-grad), var(--tab-border-color)calc(var(--tab-grad) + .25px), var(--tab-border-color)calc(var(--tab-grad) + var(--border)), var(--tab-bg)calc(var(--tab-grad) + var(--border) + .25px));
                    --radius-end       : radial-gradient(circle at bottom right, #0000 var(--tab-grad), var(--tab-border-color)calc(var(--tab-grad) + .25px), var(--tab-border-color)calc(var(--tab-grad) + var(--border)), var(--tab-bg)calc(var(--tab-grad) + var(--border) + .25px))
                }
            }

            &:has(.tab-content) {
                &>.tab:first-child {
                    &:not(.tab-active, [aria-selected=true]) {
                        --tab-border-colors: #0000 var(--tab-border-color)var(--tab-border-color)var(--tab-border-color)
                    }
                }
            }

            & .tab-content {
                --tabcontent-order    : 0;
                --tabcontent-margin   : 0 0 calc(-1*var(--border))0;
                --tabcontent-radius-ss: var(--radius-box);
                --tabcontent-radius-se: var(--radius-box);
                --tabcontent-radius-es: 0;
                --tabcontent-radius-ee: var(--radius-box)
            }

            &>:checked,
            &>:is(label:has(:checked)),
            &>:is(.tab-active, [aria-selected=true]) {
                &+.tab-content:not(:nth-child(2)) {
                    --tabcontent-radius-es: var(--radius-box)
                }
            }
        }

        .\32 xl\:tabs-box {
            background-color : var(--color-base-200);
            --tabs-box-radius: calc(var(--radius-field) + var(--radius-field) + var(--radius-field));
            border-radius    : calc(var(--radius-field) + min(.25rem, var(--tabs-box-radius)));
            box-shadow       : 0 -.5px oklch(100% 0 0/calc(var(--depth)*.1))inset, 0 .5px oklch(0% 0 0/calc(var(--depth)*.05))inset;
            padding          : .25rem;

            & .tab {
                border-radius: var(--radius-field);
                border-style : none;

                &:focus-visible,
                &:is(label:has(:checked:focus-visible)) {
                    outline-offset: 2px
                }
            }

            &>:is(.tab-active, [aria-selected=true]):not(.tab-disabled, [disabled]),
            &>:is(input:checked),
            &>:is(label:has(:checked)) {
                background-color: var(--tab-bg, var(--color-base-100));
                box-shadow      : 0 1px oklch(100% 0 0/calc(var(--depth)*.1))inset, 0 1px 1px -1px color-mix(in oklab, var(--color-neutral)calc(var(--depth)*50%), #0000), 0 1px 6px -4px color-mix(in oklab, var(--color-neutral)calc(var(--depth)*100%), #0000);

                @media (forced-colors:active) {
                    & {
                        border: 1px solid
                    }
                }
            }
        }

        .\32 xl\:tab-content {
            --tabcontent-radius-ss   : 0;
            --tabcontent-radius-se   : 0;
            --tabcontent-radius-es   : 0;
            --tabcontent-radius-ee   : 0;
            --tabcontent-order       : 1;
            width                    : 100%;
            margin                   : var(--tabcontent-margin);
            order                    : 1;
            order                    : var(--tabcontent-order);
            border-color             : #0000;
            border-width             : var(--border);
            border-start-start-radius: var(--tabcontent-radius-ss);
            border-start-end-radius  : var(--tabcontent-radius-se);
            border-end-end-radius    : var(--tabcontent-radius-ee);
            border-end-start-radius  : var(--tabcontent-radius-es);
            display                  : none
        }

        .\32 xl\:tabs-xs {
            & :where(.tab) {
                height          : calc(var(--size-field, .25rem)*6);
                --tab-p         : .375rem;
                --tab-radius-min: calc(.5rem - var(--border));
                font-size       : .75rem
            }
        }

        .\32 xl\:tabs-sm {
            & :where(.tab) {
                height          : calc(var(--size-field, .25rem)*8);
                --tab-p         : .5rem;
                --tab-radius-min: calc(.5rem - var(--border));
                font-size       : .875rem
            }
        }

        .\32 xl\:tabs-md {
            & :where(.tab) {
                height          : calc(var(--size-field, .25rem)*10);
                --tab-p         : .75rem;
                --tab-radius-min: calc(.75rem - var(--border));
                font-size       : .875rem
            }
        }

        .\32 xl\:tabs-lg {
            & :where(.tab) {
                height          : calc(var(--size-field, .25rem)*12);
                --tab-p         : 1rem;
                --tab-radius-min: calc(1.5rem - var(--border));
                font-size       : 1.125rem
            }
        }

        .\32 xl\:tabs-xl {
            & :where(.tab) {
                height          : calc(var(--size-field, .25rem)*14);
                --tab-p         : 1.25rem;
                --tab-radius-min: calc(2rem - var(--border));
                font-size       : 1.125rem
            }
        }
    }
}