@charset "UTF-8";@layer properties {
    @supports (((-webkit-hyphens: none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
        *,::backdrop,:after,:before {
            --tw-translate-x:0;
            --tw-translate-y: 0;
            --tw-translate-z: 0;
            --tw-scale-x: 1;
            --tw-scale-y: 1;
            --tw-scale-z: 1;
            --tw-rotate-x: initial;
            --tw-rotate-y: initial;
            --tw-rotate-z: initial;
            --tw-skew-x: initial;
            --tw-skew-y: initial;
            --tw-shadow: 0 0 #0000;
            --tw-shadow-color: initial;
            --tw-shadow-alpha: 100%;
            --tw-inset-shadow: 0 0 #0000;
            --tw-inset-shadow-color: initial;
            --tw-inset-shadow-alpha: 100%;
            --tw-ring-color: initial;
            --tw-ring-shadow: 0 0 #0000;
            --tw-inset-ring-color: initial;
            --tw-inset-ring-shadow: 0 0 #0000;
            --tw-ring-inset: initial;
            --tw-ring-offset-width: 0px;
            --tw-ring-offset-color: #fff;
            --tw-ring-offset-shadow: 0 0 #0000;
            --tw-duration: initial;
            --tw-ease: initial
        }
    }
}

@layer theme {
    :host,:root {
        --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-gray-200: oklch(92.8% .006 264.531);
        --color-gray-700: oklch(37.3% .034 259.733);
        --color-black: #000;
        --spacing: .25rem;
        --text-sm: .875rem;
        --text-sm--line-height: 1.42857;
        --text-base: 1rem;
        --text-lg: 1.125rem;
        --text-lg--line-height: 1.55556;
        --text-2xl: 1.5rem;
        --text-4xl: 2.25rem;
        --text-4xl--line-height: 1.11111;
        --ease-in: cubic-bezier(.4,0,1,1);
        --ease-out: cubic-bezier(0,0,.2,1);
        --animate-spin: spin 1s linear infinite;
        --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 {
    *,::backdrop,:after,:before {
        border: 0 solid;
        box-sizing: border-box;
        margin: 0;
        padding: 0
    }

    ::file-selector-button {
        border: 0 solid;
        box-sizing: border-box;
        margin: 0;
        padding: 0
    }

    :host,html {
        -webkit-text-size-adjust: 100%;
        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);
        line-height: 1.5;
        tab-size: 4;
        -webkit-tap-highlight-color: transparent
    }

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

    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,pre,samp {
        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-size: 1em;
        font-variation-settings: var(--default-mono-font-variation-settings,normal)
    }

    small {
        font-size: 80%
    }

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

    sub {
        bottom: -.25em
    }

    sup {
        top: -.5em
    }

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

    :-moz-focusring {
        outline: auto
    }

    progress {
        vertical-align: baseline
    }

    summary {
        display: list-item
    }

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

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

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

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

    ::file-selector-button {
        background-color: #0000;
        border-radius: 0;
        color: inherit;
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        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)) {
            ::placeholder {
                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 {
        padding-block:0}

    ::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-month-field {
        padding-block:0}

    ::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field {
        padding-block:0}

    ::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-second-field {
        padding-block:0}

    ::-webkit-datetime-edit-meridiem-field {
        padding-block:0}

    ::-webkit-calendar-picker-indicator {
        line-height: 1
    }

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

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

    ::file-selector-button {
        appearance: button
    }

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

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

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

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

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

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

    :root {
        --fx-noise: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence baseFrequency='1.34' numOctaves='4' stitchTiles='stitch' type='fractalNoise'/%3E%3C/filter%3E%3Cpath d='M0 0h200v200H0z' filter='url(%23a)' opacity='.2'/%3E%3C/svg%3E");
        scrollbar-color: currentColor #0000
    }

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

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

    :root:not(span) {
        overflow: var(--page-overflow)
    }

    :root {
        --page-scroll-bg-on: linear-gradient(var(--root-bg),var(--root-bg))var(--root-bg)
    }

    @supports (color: color-mix(in lab,red,red)) {
        :root {
            --page-scroll-bg-on:linear-gradient(var(--root-bg),var(--root-bg))color-mix(in srgb,var(--root-bg),oklch(0% 0 0) calc(var(--page-has-backdrop,0)*40%))
        }
    }

    :root {
        --page-scroll-transition-on: background-color .3s ease-out;
        scrollbar-gutter: var(--page-scroll-gutter,unset);
        scrollbar-gutter: if(style(--page-has-scroll:1):var(--page-scroll-gutter,unset);
        else:unset);transition: var(--page-scroll-transition)
    }

    :root:root {
        background: var(--page-scroll-bg,var(--root-bg,var(--color-base-100)))
    }

    @keyframes set-page-has-scroll {
        0%,to {
            --page-has-scroll: 1
        }
    }

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

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

@layer components;@layer utilities {
    @layer daisyui.component {
        .diff {
            webkit-user-select: none;
            container-type: inline-size;
            direction: ltr;
            display: grid;
            grid-template-columns: auto 1fr;
            grid-template-rows: 1fr 1.8rem 1fr;
            overflow: hidden;
            position: relative;
            -webkit-user-select: none;
            user-select: none;
            width: 100%
        }

        .diff:focus-visible,.diff:has(.diff-item-1:focus-visible) {
            outline-color: var(--color-base-content);
            outline-offset: 1px;
            outline-style: var(--tw-outline-style);
            outline-width: 2px
        }

        .diff:focus-visible .diff-resizer {
            max-width: 95cqi;
            min-width: 95cqi
        }

        .diff:has(.diff-item-1:focus-visible) {
            outline-offset: 1px;
            outline-style: var(--tw-outline-style);
            outline-width: 2px
        }

        .diff:has(.diff-item-1:focus-visible) .diff-resizer {
            max-width: 5cqi;
            min-width: 5cqi
        }

        @supports (-webkit-overflow-scrolling:touch) and (overflow: -webkit-paged-x) {
            .diff:focus .diff-resizer {
                max-width:5cqi;
                min-width: 5cqi
            }

            .diff:has(.diff-item-1:focus) .diff-resizer {
                max-width: 95cqi;
                min-width: 95cqi
            }
        }

        .modal {
            background-color: #0000;
            color: inherit;
            display: grid;
            height: 100%;
            inset: 0;
            margin: 0;
            max-height: none;
            max-width: none;
            overflow: clip;
            overscroll-behavior: contain;
            padding: 0;
            place-items: center;
            pointer-events: none;
            position: fixed;
            scrollbar-gutter: auto;
            transition: visibility allow-discrete .3s,background-color .3s ease-out,opacity .1s ease-out;
            visibility: hidden;
            width: 100%;
            z-index: 999
        }

        .modal::backdrop {
            display: none
        }

        .tooltip {
            --tt-bg: var(--color-neutral);
            --tt-off: calc(100% + .5rem) ;
            --tt-tail: calc(100% + 1px + .25rem) ;
            display: inline-block;
            position: relative
        }

        .tooltip>.tooltip-content,.tooltip[data-tip]: before {
            background-color:var(--tt-bg);
            border-radius: var(--radius-field);
            color: var(--color-neutral-content);
            max-width: 20rem;
            opacity: 0;
            pointer-events: none;
            text-align: center;
            white-space: normal;
            z-index: 2;
            --tw-content: attr(data-tip);
            content: var(--tw-content);
            font-size: .875rem;
            line-height: 1.25;
            padding-block:.25rem;padding-inline:.5rem;position: absolute;
            width: max-content
        }

        @media(prefers-reduced-motion:no-preference) {
            .tooltip:after,.tooltip>.tooltip-content,.tooltip[data-tip]:before {
                transition: opacity .2s cubic-bezier(.4,0,.2,1) 75ms,transform .2s cubic-bezier(.4,0,.2,1) 75ms
            }
        }

        .tooltip:after {
            background-color: var(--tt-bg);
            content: "";
            opacity: 0;
            pointer-events: none;
            --mask-tooltip: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='4' fill='none' viewBox='0 0 8 4'%3E%3Cpath fill='%23000' d='M.5 1C3.5 1 3 4 5 4s1.5-3 4.5-3c.5 0 .5-.5.5-1H0c0 .5 0 1 .5 1'/%3E%3C/svg%3E");
            display: block;
            height: .25rem;
            -webkit-mask-image: var(--mask-tooltip);
            mask-image: var(--mask-tooltip);
            -webkit-mask-position: -1px 0;
            mask-position: -1px 0;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            position: absolute;
            width: .625rem
        }

        :is(.tooltip.tooltip-open,.tooltip[data-tip]: not([data-tip=""]):hover,.tooltip:not(:has(.tooltip-content:empty)):has(.tooltip-content):hover,.tooltip[data-tip]:not([data-tip=""]):has(:focus-visible)):after,:is(.tooltip.tooltip-open,.tooltip[data-tip]:not([data-tip=""]):hover,.tooltip:not(:has(.tooltip-content:empty)):has(.tooltip-content):hover,.tooltip[data-tip]:not([data-tip=""]):has(:focus-visible))>.tooltip-content,:is(.tooltip.tooltip-open,.tooltip[data-tip]:not([data-tip=""]):hover,.tooltip:not(:has(.tooltip-content:empty)):has(.tooltip-content):hover,.tooltip[data-tip]:not([data-tip=""]):has(:focus-visible))[data-tip]:before {
            opacity:1;
            --tt-pos: 0rem
        }

        @media(prefers-reduced-motion:no-preference) {
            :is(.tooltip.tooltip-open,.tooltip[data-tip]:not([data-tip=""]):hover,.tooltip:not(:has(.tooltip-content:empty)):has(.tooltip-content):hover,.tooltip[data-tip]:not([data-tip=""]):has(:focus-visible)):after,:is(.tooltip.tooltip-open,.tooltip[data-tip]:not([data-tip=""]):hover,.tooltip:not(:has(.tooltip-content:empty)):has(.tooltip-content):hover,.tooltip[data-tip]:not([data-tip=""]):has(:focus-visible))>.tooltip-content,:is(.tooltip.tooltip-open,.tooltip[data-tip]:not([data-tip=""]):hover,.tooltip:not(:has(.tooltip-content:empty)):has(.tooltip-content):hover,.tooltip[data-tip]:not([data-tip=""]):has(:focus-visible))[data-tip]:before {
                transition: opacity .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1)
            }
        }

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

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

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

        .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)) {
            align-content:flex-start;
            align-items: center;
            border-radius: var(--radius-field);
            display: grid;
            gap: .5rem;
            grid-auto-columns: minmax(auto,max-content) auto max-content;
            grid-auto-flow: column;
            padding-block:.375rem;padding-inline:.75rem;text-align: start;
            text-wrap: balance;
            transition-duration: .2s;
            transition-property: color,background-color,box-shadow;
            transition-timing-function: cubic-bezier(0,0,.2,1);
            -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 #0000;
                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 {
            box-shadow:inset 2px 2px;
            content: "";
            display: block;
            height: .375rem;
            justify-self: flex-end;
            pointer-events: none;
            rotate: -135deg;
            transform-origin: 50%;
            transition-duration: .2s;
            transition-property: rotate,translate;
            translate: 0 -1px;
            width: .375rem
        }

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

        .menu :where(li: not(.menu-title,.disabled)>:not(ul,details,.menu-title),li:not(.menu-title,.disabled)>details>summary:not(.menu-title)):not(.menu-active,:active,.btn).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:var(--color-base-content);
            cursor: pointer
        }

        @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)
            }
        }

        .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 {
            color:var(--color-base-content);
            --tw-outline-style: none;
            outline-style: none
        }

        @media(forced-colors:active) {
            .menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title),li:not(.menu-title,.disabled)>details>summary:not(.menu-title)):not(.menu-active,:active,.btn).menu-focus,.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title),li:not(.menu-title,.disabled)>details>summary:not(.menu-title)):not(.menu-active,:active,.btn):focus-visible {
                outline: 2px solid #0000;
                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) {
            background-color:var(--color-base-content);
            cursor: pointer
        }

        @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)
            }
        }

        .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) {
            --tw-outline-style:none;
            outline-style: none
        }

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

        .menu :where(li: not(.menu-title,.disabled)>:not(ul,details,.menu-title):not(.menu-active,:active,.btn):hover,li:not(.menu-title,.disabled)>details>summary:not(.menu-title):not(.menu-active,:active,.btn):hover) {
            box-shadow:inset 0 1px #00000003,inset 0 -1px #ffffff03
        }

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

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

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

        .menu :where(li)>: not(ul,.menu-title,details,.btn).menu-active,.menu :where(li)>:not(ul,.menu-title,details,.btn):active,.menu :where(li)>details>summary:active {
            --tw-outline-style:none;
            outline-style: none
        }

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

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

        :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 {
            color: var(--color-base-content);
            pointer-events: none
        }

        @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
        }

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

        .dropdown>:not(:has(~[class*=dropdown-content])): focus {
            --tw-outline-style:none;
            outline-style: none
        }

        @media(forced-colors:active) {
            .dropdown>:not(:has(~[class*=dropdown-content])):focus {
                outline: 2px solid #0000;
                outline-offset: 2px
            }
        }

        .dropdown .dropdown-content {
            position: absolute
        }

        .dropdown.dropdown-hover:not(:hover) [tabindex]: first-child:focus:not(:focus-visible)~.dropdown-content,.dropdown:not(details,.dropdown-open,.dropdown-hover:hover,:focus-within) .dropdown-content {
            display:none;
            opacity: 0;
            scale: 95%;
            transform-origin: top
        }

        .dropdown .dropdown-content,.dropdown[popover] {
            z-index: 999
        }

        @media(prefers-reduced-motion:no-preference) {
            .dropdown .dropdown-content,.dropdown[popover] {
                animation: dropdown .2s;
                transition-behavior: allow-discrete;
                transition-duration: .2s;
                transition-property: opacity,scale,display;
                transition-timing-function: cubic-bezier(.4,0,.2,1)
            }
        }

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

        :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: 1
        }

        .dropdown.dropdown-hover:hover .dropdown-content {
            opacity: 1;
            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: 0 0
        }

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

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

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

            .dropdown[popover]::backdrop {
                background-color: oklab(0 none none/.3)
            }
        }

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

        :where(.btn) {
            width: unset
        }

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

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

        .btn {
            --btn-shadow: 0 3px 2px -2px var(--btn-bg),0 4px 3px -2px var(--btn-bg)
        }

        @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)
            }
        }

        .btn {
            --btn-noise: var(--fx-noise)
        }

        @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,.btn:has(:focus-visible) {
            isolation: isolate;
            outline-style: solid;
            outline-width: 2px
        }

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

        @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%)
            }
        }

        .btn:active:not(.btn-active) {
            --btn-border: var(--btn-color,var(--color-base-200))
        }

        @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:active:not(.btn-active) {
            --btn-shadow: 0 0 0 0 oklch(0% 0 0/0),0 0 0 0 oklch(0% 0 0/0)
        }

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

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

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

        .loading {
            aspect-ratio: 1;
            background-color: currentColor;
            display: inline-block;
            -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' stroke='%23000' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-linecap='round' stroke-width='3'%3E%3CanimateTransform attributeName='transform' dur='2s' from='0 12 12' repeatCount='indefinite' to='360 12 12' type='rotate'/%3E%3Canimate attributeName='stroke-dasharray' dur='1.5s' keyTimes='0;0.475;1' repeatCount='indefinite' values='0,150;42,150;42,150'/%3E%3Canimate attributeName='stroke-dashoffset' dur='1.5s' keyTimes='0;0.475;1' repeatCount='indefinite' values='0;-16;-59'/%3E%3C/circle%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' stroke='%23000' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-linecap='round' stroke-width='3'%3E%3CanimateTransform attributeName='transform' dur='2s' from='0 12 12' repeatCount='indefinite' to='360 12 12' type='rotate'/%3E%3Canimate attributeName='stroke-dasharray' dur='1.5s' keyTimes='0;0.475;1' repeatCount='indefinite' values='0,150;42,150;42,150'/%3E%3Canimate attributeName='stroke-dashoffset' dur='1.5s' keyTimes='0;0.475;1' repeatCount='indefinite' values='0;-16;-59'/%3E%3C/circle%3E%3C/svg%3E");
            -webkit-mask-position: 50%;
            mask-position: 50%;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-size: 100%;
            mask-size: 100%;
            pointer-events: none;
            vertical-align: middle;
            width: calc(var(--size-selector,.25rem)*6)
        }

        .collapse {
            border-radius: var(--radius-box,1rem);
            display: grid;
            grid-template-columns: minmax(0,1fr);
            grid-template-rows: max-content 0fr;
            isolation: isolate;
            overflow: hidden;
            position: relative;
            width: 100%
        }

        @media(prefers-reduced-motion:no-preference) {
            .collapse {
                transition: grid-template-rows .2s
            }
        }

        .collapse>input: is([type=checkbox],[type=radio]) {
            appearance:none;
            grid-column-start: 1;
            grid-row-start: 1;
            min-height: 1lh;
            opacity: 0;
            padding: 1rem;
            padding-inline-end:3rem;transition: background-color .2s ease-out;
            width: 100%;
            z-index: 1
        }

        .collapse:is([open],[tabindex]: focus:not(.collapse-close),[tabindex]:focus-within:not(.collapse-close)),.collapse:not(.collapse-close):has(>input:is([type=checkbox],[type=radio]):checked) {
            grid-template-rows:max-content 1fr
        }

        .collapse:is([open],[tabindex]: focus:not(.collapse-close),[tabindex]:focus-within:not(.collapse-close))>.collapse-content,.collapse:not(.collapse-close)>:where(input:is([type=checkbox],[type=radio]):checked~.collapse-content) {
            content-visibility:visible;
            min-height: fit-content
        }

        @supports not (content-visibility:visible) {
            .collapse:is([open],[tabindex]:focus:not(.collapse-close),[tabindex]:focus-within:not(.collapse-close))>.collapse-content,.collapse:not(.collapse-close)>:where(input:is([type=checkbox],[type=radio]):checked~.collapse-content) {
                visibility: visible
            }
        }

        .collapse:focus-visible,.collapse:has(>input: is([type=checkbox],[type=radio]):focus-visible),.collapse:has(summary:focus-visible) {
            outline-color:var(--color-base-content);
            outline-offset: 2px;
            outline-style: solid;
            outline-width: 2px
        }

        .collapse:not(.collapse-close)>.collapse-title,.collapse:not(.collapse-close)>input[type=checkbox],.collapse: not(.collapse-close)>input[type=radio]:not(:checked) {
            cursor:pointer
        }

        :is(.collapse[tabindex]: focus:not(.collapse-close,.collapse[open]),.collapse[tabindex]:focus-within:not(.collapse-close,.collapse[open]))>.collapse-title {
            cursor:unset
        }

        .collapse:is([open],[tabindex]: focus:not(.collapse-close),[tabindex]:focus-within:not(.collapse-close))>:where(.collapse-content),.collapse:not(.collapse-close)>:where(input:is([type=checkbox],[type=radio]):checked~.collapse-content) {
            padding-bottom:1rem
        }

        .collapse:is(details) {
            width: 100%
        }

        @media(prefers-reduced-motion:no-preference) {
            .collapse:is(details)::details-content {
                transition: content-visibility allow-discrete .2s,visibility allow-discrete .2s,padding .2s ease-out,background-color .2s ease-out,height .2s;
                interpolate-size: allow-keywords;
                height: 0
            }

            .collapse:is(details):where([open])::details-content {
                height: auto
            }
        }

        .collapse:is(details) summary {
            display: block;
            position: relative
        }

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

        .collapse:is(details)>.collapse-content {
            content-visibility: visible
        }

        .collapse:is(details) summary {
            outline: none
        }

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

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

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

        @supports (color: color-mix(in lab,red,red)) {
            :is(.list>:not(:last-child).list-row,.list>:not(:last-child) .list-row):after {
                border-color:color-mix(in oklab,var(--color-base-content)5%,transparent)
            }
        }

        .toast {
            background-color: #0000;
            display: flex;
            flex-direction: column;
            gap: .5rem;
            inset-inline: auto 1rem;
            bottom: 1rem;
            max-width: calc(100vw - 2rem);
            position: fixed;
            top: auto;
            translate: var(--toast-x,0)var(--toast-y,0);
            width: max-content
        }

        @media(prefers-reduced-motion:no-preference) {
            .toast>* {
                animation: toast .25s ease-out
            }
        }

        .toggle {
            appearance: none;
            border: var(--border)solid currentColor;
            color: var(--input-color);
            cursor: pointer;
            vertical-align: middle;
            webkit-user-select: none;
            -webkit-user-select: none;
            user-select: none;
            --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)));
            box-shadow: inset 0 1px;
            display: inline-grid;
            flex-shrink: 0;
            grid-template-columns: 0fr 1fr 1fr;
            padding: var(--toggle-p);
            place-content: center;
            position: relative
        }

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

        .toggle {
            --input-color: var(--color-base-content);
            transition: color .3s,grid-template-columns .2s
        }

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

        .toggle {
            --toggle-p: calc(var(--size)*.125);
            --size: calc(var(--size-selector,.25rem)*6);
            height: var(--size);
            width: calc(var(--size)*2 - (var(--border) + var(--toggle-p))*2)
        }

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

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

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

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

        .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: 1;
            rotate: none
        }

        .toggle:before {
            aspect-ratio: 1;
            border-radius: var(--radius-selector);
            --tw-content: "";
            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 currentColor;
            content: var(--tw-content);
            grid-column-start: 2;
            grid-row-start: 1;
            height: 100%;
            inset-inline-start: 0;
            position: relative;
            transition: background-color .1s,translate .2s,inset-inline-start .2s;
            translate: 0
        }

        @supports (color: color-mix(in lab,red,red)) {
            .toggle:before {
                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)
            }
        }

        .toggle:before {
            background-image: none,var(--fx-noise);
            background-size: auto,calc(var(--noise)*100%)
        }

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

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

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

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

        :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: .3
        }

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

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

        @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
            }
        }

        .input {
            --size: calc(var(--size-field,.25rem)*10);
            --input-color: var(--color-base-content)
        }

        @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) {
            appearance: none;
            background-color: #0000;
            border: none;
            display: inline-flex;
            height: 100%;
            width: 100%
        }

        .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 #0000;
                outline-offset: 2px
            }
        }

        .input :where(input[type=email]),.input : where(input[type=url]) {
            direction:ltr
        }

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

        .input:focus,.input:focus-within {
            --input-color: var(--color-base-content);
            box-shadow: 0 1px var(--input-color)
        }

        @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:focus,.input:focus-within {
            isolation: isolate;
            outline: 2px solid var(--input-color);
            outline-offset: 2px;
            z-index: 1
        }

        @media(pointer: coarse) {
            @supports (-webkit-touch-callout:none) {
                .input:focus,.input:focus-within {
                    --font-size:1rem
                }
            }
        }

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

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

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

        @supports (color: color-mix(in lab,red,red)) {
            :is(.input:has(>input[disabled]),.input:is(:disabled,[disabled]),fieldset:disabled .input)::placeholder {
                color:color-mix(in oklab,var(--color-base-content)20%,transparent)
            }
        }

        .input:has(>input[disabled]),.input: is(:disabled,[disabled]),fieldset:disabled .input {
            box-shadow:none
        }

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

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

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

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

        .input:has(>input[type=date]) : where(input[type=date]) {
            webkit-appearance:none;
            appearance: none;
            display: inline-flex
        }

        .input:has(>input[type=date]) input[type=date]: :-webkit-calendar-picker-indicator {
            cursor:pointer;
            height: 1em;
            inset-inline-end: .75em;
            position: absolute;
            width: 1em
        }

        .range {
            appearance: none;
            webkit-appearance: none;
            --range-thumb: var(--color-base-100);
            --range-thumb-size: calc(var(--size-selector,.25rem)*6);
            --range-progress: currentColor;
            --range-fill: 1;
            --range-p: .25rem;
            --range-bg: currentColor
        }

        @supports (color: color-mix(in lab,red,red)) {
            .range {
                --range-bg:color-mix(in oklab,currentColor 10%,#0000)
            }
        }

        .range {
            cursor: pointer;
            vertical-align: middle;
            --radius-selector-max: calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector));
            background-color: #0000;
            border: none;
            border-radius: calc(var(--radius-selector) + min(var(--range-p),var(--radius-selector-max)));
            height: var(--range-thumb-size);
            overflow: hidden;
            width: clamp(3rem,20rem,100%)
        }

        [dir=rtl] .range {
            --range-dir: -1
        }

        .range:focus {
            outline: none
        }

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

        .range::-webkit-slider-runnable-track {
            background-color: var(--range-bg);
            border-radius: var(--radius-selector);
            height: calc(var(--range-thumb-size)*.5);
            width: 100%
        }

        @media(forced-colors:active) {
            .range::-webkit-slider-runnable-track {
                border: 1px solid
            }

            .range::-moz-range-track {
                border: 1px solid
            }
        }

        .range::-webkit-slider-thumb {
            appearance: none;
            background-color: var(--range-thumb);
            border: var(--range-p)solid;
            border-radius: calc(var(--radius-selector) + min(var(--range-p),var(--radius-selector-max)));
            box-sizing: border-box;
            height: var(--range-thumb-size);
            width: var(--range-thumb-size);
            webkit-appearance: none;
            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,0 0 0 2rem var(--range-thumb) inset,calc(var(--range-dir,1)*-100rem - var(--range-dir,1)*var(--range-thumb-size)/2) 0 0 calc(100rem*var(--range-fill));
            color: var(--range-progress);
            position: relative;
            top: 50%;
            transform: translateY(-50%)
        }

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

        .range::-moz-range-track {
            background-color: var(--range-bg);
            border-radius: var(--radius-selector);
            height: calc(var(--range-thumb-size)*.5);
            width: 100%
        }

        .range::-moz-range-thumb {
            background-color: currentColor;
            border: var(--range-p)solid;
            border-radius: calc(var(--radius-selector) + min(var(--range-p),var(--radius-selector-max)));
            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,0 0 0 2rem var(--range-thumb) inset,calc(var(--range-dir,1)*-100rem - var(--range-dir,1)*var(--range-thumb-size)/2) 0 0 calc(100rem*var(--range-fill));
            box-sizing: border-box;
            color: var(--range-progress);
            height: var(--range-thumb-size);
            position: relative;
            top: 50%;
            width: var(--range-thumb-size)
        }

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

        .range:disabled {
            cursor: not-allowed;
            opacity: .3
        }

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

        @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
            }
        }

        .select {
            border-color: var(--input-color);
            --input-color: var(--color-base-content)
        }

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

        .select {
            --size: calc(var(--size-field,.25rem)*10)
        }

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

        [dir=rtl] .select: :picker(select) {
            translate:.5rem
        }

        [dir=rtl] .select select: :picker(select) {
            translate:.5rem
        }

        .select[multiple] {
            background-image: none;
            height: auto;
            overflow: auto;
            padding-block:.75rem;padding-inline-end:.75rem}

        .select select {
            align-items: center;
            appearance: none;
            background: inherit;
            border-radius: inherit;
            border-style: none;
            height: calc(100% - var(--border)*2);
            margin-inline:-.75rem -1.75rem;padding-inline:.75rem 1.75rem;width: calc(100% + 2.75rem)
        }

        .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 #0000;
                outline-offset: 2px
            }
        }

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

        .select:focus,.select:focus-within {
            --input-color: var(--color-base-content);
            box-shadow: 0 1px var(--input-color)
        }

        @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:focus,.select:focus-within {
            isolation: isolate;
            outline: 2px solid var(--input-color);
            outline-offset: 2px;
            z-index: 1
        }

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

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

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

        @supports (color: color-mix(in lab,red,red)) {
            :is(.select:has(>select[disabled]),.select:is(:disabled,[disabled]),fieldset:disabled .select)::placeholder {
                color:color-mix(in oklab,var(--color-base-content)20%,transparent)
            }
        }

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

        @supports (appearance: base-select) {
            .select,.select select {
                appearance:base-select
            }

            :is(.select,.select select)::picker(select) {
                appearance: base-select
            }
        }

        :is(.select,.select select): :picker(select) {
            background-color:inherit;
            border: var(--border)solid var(--color-base-200);
            border-radius: var(--radius-box);
            box-shadow: 0 2px calc(var(--depth)*3px) -2px #0003;
            box-shadow: 0 20px 25px -5px rgb(0 0 0/calc(var(--depth)*.1)),0 8px 10px -6px rgb(0 0 0/calc(var(--depth)*.1));
            color: inherit;
            margin-block:.5rem;margin-inline:.5rem;max-height: min(24rem,70dvh);
            padding: .5rem;
            translate: -.5rem
        }

        :is(.select,.select select): :picker-icon {
            display:none
        }

        :is(.select,.select select) optgroup {
            padding-top: .5em
        }

        :is(.select,.select select) optgroup option: first-child {
            margin-top:.5em
        }

        :is(.select,.select select) option {
            border-radius: var(--radius-field);
            padding-block:.375rem;padding-inline:.75rem;transition-duration: .2s;
            transition-property: color,background-color;
            transition-timing-function: cubic-bezier(0,0,.2,1);
            white-space: normal
        }

        :is(.select,.select select) option: not(:disabled):focus-visible,:is(.select,.select select) option:not(:disabled):hover {
            background-color:var(--color-base-content);
            cursor: pointer
        }

        @supports (color: color-mix(in lab,red,red)) {
            :is(.select,.select select) option:not(:disabled):focus-visible,:is(.select,.select select) option:not(:disabled):hover {
                background-color:color-mix(in oklab,var(--color-base-content)10%,transparent)
            }
        }

        :is(.select,.select select) option: not(:disabled):focus-visible,:is(.select,.select select) option:not(:disabled):hover {
            --tw-outline-style:none;
            outline-style: none
        }

        @media(forced-colors:active) {
            :is(.select,.select select) option:not(:disabled):focus-visible,:is(.select,.select select) option:not(:disabled):hover {
                outline: 2px solid #0000;
                outline-offset: 2px
            }
        }

        :is(.select,.select select) option: not(:disabled):active {
            background-color:var(--color-neutral);
            box-shadow: 0 2px calc(var(--depth)*3px) -2px var(--color-neutral);
            color: var(--color-neutral-content)
        }

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

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

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

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

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

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

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

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

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

        .card figure {
            align-items: center;
            display: flex;
            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
        }

        .stats {
            display: inline-grid;
            grid-auto-flow: column;
            overflow-x: auto
        }

        .progress,.stats {
            border-radius: var(--radius-box);
            position: relative
        }

        .progress {
            appearance: none;
            background-color: currentColor;
            height: .5rem;
            overflow: hidden;
            width: 100%
        }

        @supports (color: color-mix(in lab,red,red)) {
            .progress {
                background-color:color-mix(in oklab,currentcolor 20%,transparent)
            }
        }

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

        .progress:indeterminate {
            background-image: repeating-linear-gradient(90deg,currentColor -1% 10%,#0000 10% 90%);
            background-position-x: 15%;
            background-size: 200%
        }

        @media(prefers-reduced-motion:no-preference) {
            .progress:indeterminate {
                animation: progress 5s ease-in-out infinite
            }
        }

        @supports ((-moz-appearance: none)) {
            .progress:indeterminate::-moz-progress-bar {
                background-color:#0000
            }

            @media(prefers-reduced-motion:no-preference) {
                .progress:indeterminate::-moz-progress-bar {
                    animation: progress 5s ease-in-out infinite;
                    background-image: repeating-linear-gradient(90deg,currentColor -1% 10%,#0000 10% 90%);
                    background-position-x: 15%;
                    background-size: 200%
                }
            }

            .progress::-moz-progress-bar {
                background-color: currentColor;
                border-radius: var(--radius-box)
            }
        }

        @supports ((-webkit-appearance: none)) {
            .progress::-webkit-progress-bar {
                background-color:#0000;
                border-radius: var(--radius-box)
            }

            .progress::-webkit-progress-value {
                background-color: currentColor;
                border-radius: var(--radius-box)
            }
        }

        .stack {
            display: inline-grid;
            grid-template-columns: 3px 4px 1fr 4px 3px;
            grid-template-rows: 3px 4px 1fr 4px 3px
        }

        .stack>* {
            height: 100%;
            width: 100%
        }

        .stack>:nth-child(n+2) {
            opacity: .7;
            width: 100%
        }

        .stack>:nth-child(2) {
            opacity: .9;
            z-index: 2
        }

        .stack>:first-child {
            width: 100%;
            z-index: 3
        }

        .label {
            align-items: center;
            color: currentColor;
            display: inline-flex;
            gap: .375rem;
            white-space: nowrap
        }

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

        .label:has(input) {
            cursor: pointer
        }

        .label:is(.input>*,.select>*) {
            align-items: center;
            display: flex;
            font-size: inherit;
            height: calc(100% - .5rem);
            padding-inline:.75rem;white-space: nowrap
        }

        .label:is(.input>*,.select>*):first-child {
            border-inline-end:var(--border)solid currentColor;margin-inline: -.75rem .75rem
        }

        @supports (color: color-mix(in lab,red,red)) {
            .label:is(.input>*,.select>*):first-child {
                border-inline-end:var(--border)solid color-mix(in oklab,currentColor 10%,#0000)
            }
        }

        .label:is(.input>*,.select>*):last-child {
            border-inline-start:var(--border)solid currentColor;margin-inline: .75rem -.75rem
        }

        @supports (color: color-mix(in lab,red,red)) {
            .label:is(.input>*,.select>*):last-child {
                border-inline-start:var(--border)solid color-mix(in oklab,currentColor 10%,#0000)
            }
        }

        .status {
            aspect-ratio: 1;
            background-color: var(--color-base-content);
            border-radius: var(--radius-selector);
            display: inline-block;
            height: .5rem;
            width: .5rem
        }

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

        .status {
            background-position: 50%;
            background-repeat: no-repeat;
            color: #0000004d;
            vertical-align: middle
        }

        @supports (color: color-mix(in lab,red,red)) {
            .status {
                color:color-mix(in oklab,var(--color-black)30%,transparent)
            }
        }

        .status {
            background-image: radial-gradient(circle at 35% 30%,oklch(1 0 0/calc(var(--depth)*.5)),#0000);
            box-shadow: 0 2px 3px -1px
        }

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

        .tabs {
            --tabs-height: auto;
            --tabs-direction: row;
            --tab-height: calc(var(--size-field,.25rem)*10);
            display: flex;
            flex-direction: var(--tabs-direction);
            flex-wrap: wrap;
            height: var(--tabs-height)
        }

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

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

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

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

        .carousel {
            display: inline-flex;
            overflow-x: scroll;
            scroll-snap-type: x mandatory;
            scrollbar-width: none
        }

        @media(prefers-reduced-motion:no-preference) {
            .carousel {
                scroll-behavior: smooth
            }
        }

        .carousel::-webkit-scrollbar {
            display: none
        }

        .alert {
            --alert-border-color: var(--color-base-200);
            background-color: var(--alert-color,var(--color-base-200));
            background-image: none,var(--fx-noise);
            background-size: auto,calc(var(--noise)*100%);
            border-radius: var(--radius-box);
            border-style: solid;
            box-shadow: 0 3px 0 -2px oklch(100% 0 0/calc(var(--depth)*.08)) inset,0 1px #000,0 4px 3px -2px oklch(0 0 0/calc(var(--depth)*.08));
            color: var(--color-base-content);
            display: grid;
            font-size: .875rem;
            gap: 1rem;
            grid-auto-flow: column;
            grid-template-columns: auto;
            justify-content: start;
            line-height: 1.25rem;
            padding-block:.75rem;padding-inline:1rem;place-items: center start;
            text-align: start
        }

        @supports (color: color-mix(in lab,red,red)) {
            .alert {
                box-shadow:0 3px 0 -2px oklch(100% 0 0/calc(var(--depth)*.08)) inset,0 1px color-mix(in oklab,color-mix(in oklab,#000 20%,var(--alert-color,var(--color-base-200)))calc(var(--depth)*20%),#0000),0 4px 3px -2px oklch(0 0 0/calc(var(--depth)*.08))
            }
        }

        .alert:has(:nth-child(2)) {
            grid-template-columns: auto minmax(auto,1fr)
        }

        .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 #0000;
                outline-offset: 2px
            }
        }

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

    @layer daisyui.modifier {
        .modal-toggle:checked+.modal,.modal.modal-open,.modal:target,.modal[open] {
            background-color: #0006;
            opacity: 1;
            pointer-events: auto;
            transition: visibility allow-discrete 0s,background-color .3s ease-out,opacity .1s ease-out;
            visibility: visible
        }

        :is(.modal.modal-open,.modal[open],.modal: target,.modal-toggle:checked+.modal) .modal-box {
            opacity:1;
            scale: 1;
            translate: 0
        }

        :root:has(:is(.modal.modal-open,.modal[open],.modal: target,.modal-toggle:checked+.modal)) {
            --page-has-backdrop:1;
            --page-overflow: hidden;
            --page-scroll-bg: var(--page-scroll-bg-on);
            --page-scroll-gutter: stable;
            --page-scroll-transition: var(--page-scroll-transition-on);
            animation: set-page-has-scroll forwards;
            animation-timeline: scroll()
        }

        @starting-style {
            .modal-toggle:checked+.modal,.modal.modal-open,.modal:target,.modal[open] {
                opacity: 0
            }
        }

        .tooltip>.tooltip-content,.tooltip[data-tip]: before {
            inset:auto auto var(--tt-off)50%;
            transform: translate(-50%)translateY(var(--tt-pos,.25rem))
        }

        .tooltip:after {
            inset: auto auto var(--tt-tail)50%;
            transform: translate(-50%)translateY(var(--tt-pos,.25rem))
        }

        .btn:disabled:not(.btn-link,.btn-ghost) {
            background-color: var(--color-base-content)
        }

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

        .btn:disabled:not(.btn-link,.btn-ghost) {
            box-shadow: none
        }

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

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

        @media(hover: hover) {
            .btn:disabled:hover {
                background-color:var(--color-neutral);
                pointer-events: none
            }

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

            .btn:disabled:hover {
                --btn-border: #0000;
                --btn-fg: var(--color-base-content)
            }

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

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

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

        .btn[disabled]: not(.btn-link,.btn-ghost) {
            box-shadow:none
        }

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

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

        @media(hover: hover) {
            .btn[disabled]:hover {
                background-color:var(--color-neutral);
                pointer-events: none
            }

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

            .btn[disabled]:hover {
                --btn-border: #0000;
                --btn-fg: var(--color-base-content)
            }

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

        @media(prefers-reduced-motion:no-preference) {
            .collapse.collapse-open.collapse-arrow>.collapse-title:after,.collapse[open].collapse-arrow>.collapse-title:after {
                transform: translateY(-50%)rotate(225deg)
            }
        }

        .collapse.collapse-open.collapse-plus>.collapse-title:after {
            --tw-content: "−";
            content: var(--tw-content)
        }

        .collapse.collapse-arrow:not(.collapse-close)>input: is([type=checkbox],[type=radio]):checked~.collapse-title:after,:is(.collapse[tabindex].collapse-arrow:focus:not(.collapse-close),.collapse.collapse-arrow[tabindex]:focus-within:not(.collapse-close))>.collapse-title:after {
            transform:translateY(-50%)rotate(225deg)
        }

        .collapse.collapse-plus:not(.collapse-close)>input: is([type=checkbox],[type=radio]):checked~.collapse-title:after,.collapse[open].collapse-plus>.collapse-title:after,.collapse[tabindex].collapse-plus:focus:not(.collapse-close)>.collapse-title:after {
            --tw-content:"−";
            content: var(--tw-content)
        }

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

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

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

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

        .list .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 .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 .list-row>:not(.list-col-wrap) {
            grid-row-start: 1
        }

        .tooltip-bottom>.tooltip-content,.tooltip-bottom[data-tip]: before {
            inset:var(--tt-off)auto auto 50%;
            transform: translate(-50%)translateY(var(--tt-pos,-.25rem))
        }

        .tooltip-bottom:after {
            inset: var(--tt-tail)auto auto 50%;
            transform: translate(-50%)translateY(var(--tt-pos,-.25rem))rotate(180deg)
        }

        .toast-center {
            --toast-x: -50%;
            inset-inline: 50%
        }

        .dropdown-end {
            --anchor-h: span-left
        }

        .dropdown-end :where(.dropdown-content) {
            inset-inline-end: 0;
            translate: 0
        }

        [dir=rtl] : is(.dropdown-end :where(.dropdown-content)) {
            translate:0
        }

        .dropdown-end.dropdown-left {
            --anchor-h: left;
            --anchor-v: span-top
        }

        .dropdown-end.dropdown-left .dropdown-content {
            bottom: 0;
            top: auto
        }

        .dropdown-end.dropdown-right {
            --anchor-h: right;
            --anchor-v: span-top
        }

        .dropdown-end.dropdown-right .dropdown-content {
            bottom: 0;
            top: auto
        }

        .toast-top {
            --toast-y: 0;
            bottom: auto;
            top: 1rem
        }

        :is(.stack,.stack.stack-bottom)>* {
            grid-area: 3/3/6/4
        }

        :is(.stack,.stack.stack-bottom)>:nth-child(2) {
            grid-area: 2/2/5/5
        }

        :is(.stack,.stack.stack-bottom)>:first-child {
            grid-area: 1/1/4/6
        }

        .stack.stack-top>* {
            grid-area: 1/3/4/4
        }

        .stack.stack-top>:nth-child(2) {
            grid-area: 2/2/5/5
        }

        .stack.stack-top>:first-child {
            grid-area: 3/1/6/6
        }

        .stack.stack-start>* {
            grid-area: 3/1/4/4
        }

        .stack.stack-start>:nth-child(2) {
            grid-area: 2/2/5/5
        }

        .stack.stack-start>:first-child {
            grid-area: 1/3/6/6
        }

        .stack.stack-end>* {
            grid-area: 3/3/4/6
        }

        .stack.stack-end>:nth-child(2) {
            grid-area: 2/2/5/5
        }

        .stack.stack-end>:first-child {
            grid-area: 1/1/6/4
        }

        .loading-spinner {
            -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' stroke='%23000' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-linecap='round' stroke-width='3'%3E%3CanimateTransform attributeName='transform' dur='2s' from='0 12 12' repeatCount='indefinite' to='360 12 12' type='rotate'/%3E%3Canimate attributeName='stroke-dasharray' dur='1.5s' keyTimes='0;0.475;1' repeatCount='indefinite' values='0,150;42,150;42,150'/%3E%3Canimate attributeName='stroke-dashoffset' dur='1.5s' keyTimes='0;0.475;1' repeatCount='indefinite' values='0;-16;-59'/%3E%3C/circle%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' stroke='%23000' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-linecap='round' stroke-width='3'%3E%3CanimateTransform attributeName='transform' dur='2s' from='0 12 12' repeatCount='indefinite' to='360 12 12' type='rotate'/%3E%3Canimate attributeName='stroke-dasharray' dur='1.5s' keyTimes='0;0.475;1' repeatCount='indefinite' values='0,150;42,150;42,150'/%3E%3Canimate attributeName='stroke-dashoffset' dur='1.5s' keyTimes='0;0.475;1' repeatCount='indefinite' values='0;-16;-59'/%3E%3C/circle%3E%3C/svg%3E")
        }

        .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)
                }
            }
        }
    }

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

    .collapse:not(td,tr,colgroup) {
        visibility: revert-layer
    }

    .collapse {
        visibility: collapse
    }

    .visible {
        visibility: visible
    }

    .z-9999,.z-\[9999\] {
        z-index: 9999
    }

    .container {
        width: 100%
    }

    @media(min-width: 40rem) {
        .container {
            max-width:40rem
        }
    }

    @media(min-width: 48rem) {
        .container {
            max-width:48rem
        }
    }

    @media(min-width: 64rem) {
        .container {
            max-width:64rem
        }
    }

    @media(min-width: 80rem) {
        .container {
            max-width:80rem
        }
    }

    @media(min-width: 96rem) {
        .container {
            max-width:96rem
        }
    }

    .prose-2xl {
        font-size: 1.5rem;
        line-height: 1.66667
    }

    .prose-2xl :where(p): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:1.33333em;
        margin-top: 1.33333em
    }

    .prose-2xl :where([class~=lead]): not(:where([class~=not-prose],[class~=not-prose] *)) {
        font-size:1.25em;
        line-height: 1.46667;
        margin-bottom: 1.06667em;
        margin-top: 1.06667em
    }

    .prose-2xl :where(blockquote): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:1.77778em;
        margin-top: 1.77778em;
        padding-inline-start:1.11111em}

    .prose-2xl :where(h1): not(:where([class~=not-prose],[class~=not-prose] *)) {
        font-size:2.66667em;
        line-height: 1;
        margin-bottom: .875em;
        margin-top: 0
    }

    .prose-2xl :where(h2): not(:where([class~=not-prose],[class~=not-prose] *)) {
        font-size:2em;
        line-height: 1.08333;
        margin-bottom: .833333em;
        margin-top: 1.5em
    }

    .prose-2xl :where(h3): not(:where([class~=not-prose],[class~=not-prose] *)) {
        font-size:1.5em;
        line-height: 1.22222;
        margin-bottom: .666667em;
        margin-top: 1.55556em
    }

    .prose-2xl :where(h4): not(:where([class~=not-prose],[class~=not-prose] *)) {
        line-height:1.5;
        margin-bottom: .666667em;
        margin-top: 1.66667em
    }

    .prose-2xl :where(img): not(:where([class~=not-prose],[class~=not-prose] *)),.prose-2xl :where(picture):not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:2em;
        margin-top: 2em
    }

    .prose-2xl :where(picture>img): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:0;
        margin-top: 0
    }

    .prose-2xl :where(video): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:2em;
        margin-top: 2em
    }

    .prose-2xl :where(kbd): not(:where([class~=not-prose],[class~=not-prose] *)) {
        border-radius:.375rem;
        font-size: .833333em;
        padding-inline-end:.333333em;padding-bottom: .25em;
        padding-top: .25em;
        padding-inline-start:.333333em}

    .prose-2xl :where(code): not(:where([class~=not-prose],[class~=not-prose] *)) {
        font-size:.833333em
    }

    .prose-2xl :where(h2 code): not(:where([class~=not-prose],[class~=not-prose] *)) {
        font-size:.875em
    }

    .prose-2xl :where(h3 code): not(:where([class~=not-prose],[class~=not-prose] *)) {
        font-size:.888889em
    }

    .prose-2xl :where(pre): not(:where([class~=not-prose],[class~=not-prose] *)) {
        border-radius:.5rem;
        font-size: .833333em;
        line-height: 1.8;
        margin-bottom: 2em;
        margin-top: 2em;
        padding-inline-end:1.6em;padding-bottom: 1.2em;
        padding-top: 1.2em;
        padding-inline-start:1.6em}

    .prose-2xl :where(ol): not(:where([class~=not-prose],[class~=not-prose] *)),.prose-2xl :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:1.33333em;
        margin-top: 1.33333em;
        padding-inline-start:1.58333em}

    .prose-2xl :where(li): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:.5em;
        margin-top: .5em
    }

    .prose-2xl :where(ol>li): not(:where([class~=not-prose],[class~=not-prose] *)),.prose-2xl :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *)) {
        padding-inline-start:.416667em
    }

    .prose-2xl :where(.prose-2xl>ul>li p): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:.833333em;
        margin-top: .833333em
    }

    .prose-2xl :where(.prose-2xl>ul>li>p: first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-top:1.33333em
    }

    .prose-2xl :where(.prose-2xl>ul>li>p: last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:1.33333em
    }

    .prose-2xl :where(.prose-2xl>ol>li>p: first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-top:1.33333em
    }

    .prose-2xl :where(.prose-2xl>ol>li>p: last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:1.33333em
    }

    .prose-2xl :where(ul ul,ul ol,ol ul,ol ol): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:.666667em;
        margin-top: .666667em
    }

    .prose-2xl :where(dl): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:1.33333em;
        margin-top: 1.33333em
    }

    .prose-2xl :where(dt): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-top:1.33333em
    }

    .prose-2xl :where(dd): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-top:.5em;
        padding-inline-start:1.58333em}

    .prose-2xl :where(hr): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:3em;
        margin-top: 3em
    }

    .prose-2xl :where(h2+*): not(:where([class~=not-prose],[class~=not-prose] *)),.prose-2xl :where(h3+*):not(:where([class~=not-prose],[class~=not-prose] *)),.prose-2xl :where(h4+*):not(:where([class~=not-prose],[class~=not-prose] *)),.prose-2xl :where(hr+*):not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-top:0
    }

    .prose-2xl :where(table): not(:where([class~=not-prose],[class~=not-prose] *)) {
        font-size:.833333em;
        line-height: 1.4
    }

    .prose-2xl :where(thead th): not(:where([class~=not-prose],[class~=not-prose] *)) {
        padding-inline-end:.6em;
        padding-bottom: .8em;
        padding-inline-start:.6em}

    .prose-2xl :where(thead th: first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        padding-inline-start:0
    }

    .prose-2xl :where(thead th: last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        padding-inline-end:0
    }

    .prose-2xl :where(tbody td,tfoot td): not(:where([class~=not-prose],[class~=not-prose] *)) {
        padding-inline-end:.6em;
        padding-bottom: .8em;
        padding-top: .8em;
        padding-inline-start:.6em}

    .prose-2xl :where(tbody td: first-child,tfoot td:first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        padding-inline-start:0
    }

    .prose-2xl :where(tbody td: last-child,tfoot td:last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        padding-inline-end:0
    }

    .prose-2xl :where(figure): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:2em;
        margin-top: 2em
    }

    .prose-2xl :where(figure>*): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:0;
        margin-top: 0
    }

    .prose-2xl :where(figcaption): not(:where([class~=not-prose],[class~=not-prose] *)) {
        font-size:.833333em;
        line-height: 1.6;
        margin-top: 1em
    }

    .prose-2xl :where(.prose-2xl>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-top: 0
    }

    .prose-2xl :where(.prose-2xl>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom: 0
    }

    .prose-base {
        font-size: 1rem;
        line-height: 1.75
    }

    .prose-base :where(p): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:1.25em;
        margin-top: 1.25em
    }

    .prose-base :where([class~=lead]): not(:where([class~=not-prose],[class~=not-prose] *)) {
        font-size:1.25em;
        line-height: 1.6;
        margin-bottom: 1.2em;
        margin-top: 1.2em
    }

    .prose-base :where(blockquote): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:1.6em;
        margin-top: 1.6em;
        padding-inline-start:1em}

    .prose-base :where(h1): not(:where([class~=not-prose],[class~=not-prose] *)) {
        font-size:2.25em;
        line-height: 1.11111;
        margin-bottom: .888889em;
        margin-top: 0
    }

    .prose-base :where(h2): not(:where([class~=not-prose],[class~=not-prose] *)) {
        font-size:1.5em;
        line-height: 1.33333;
        margin-bottom: 1em;
        margin-top: 2em
    }

    .prose-base :where(h3): not(:where([class~=not-prose],[class~=not-prose] *)) {
        font-size:1.25em;
        line-height: 1.6;
        margin-bottom: .6em;
        margin-top: 1.6em
    }

    .prose-base :where(h4): not(:where([class~=not-prose],[class~=not-prose] *)) {
        line-height:1.5;
        margin-bottom: .5em;
        margin-top: 1.5em
    }

    .prose-base :where(img): not(:where([class~=not-prose],[class~=not-prose] *)),.prose-base :where(picture):not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:2em;
        margin-top: 2em
    }

    .prose-base :where(picture>img): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:0;
        margin-top: 0
    }

    .prose-base :where(video): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:2em;
        margin-top: 2em
    }

    .prose-base :where(kbd): not(:where([class~=not-prose],[class~=not-prose] *)) {
        border-radius:.3125rem;
        font-size: .875em;
        padding-inline-end:.375em;padding-bottom: .1875em;
        padding-top: .1875em;
        padding-inline-start:.375em}

    .prose-base :where(code): not(:where([class~=not-prose],[class~=not-prose] *)),.prose-base :where(h2 code):not(:where([class~=not-prose],[class~=not-prose] *)) {
        font-size:.875em
    }

    .prose-base :where(h3 code): not(:where([class~=not-prose],[class~=not-prose] *)) {
        font-size:.9em
    }

    .prose-base :where(pre): not(:where([class~=not-prose],[class~=not-prose] *)) {
        border-radius:.375rem;
        font-size: .875em;
        line-height: 1.71429;
        margin-bottom: 1.71429em;
        margin-top: 1.71429em;
        padding-inline-end:1.14286em;padding-bottom: .857143em;
        padding-top: .857143em;
        padding-inline-start:1.14286em}

    .prose-base :where(ol): not(:where([class~=not-prose],[class~=not-prose] *)),.prose-base :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:1.25em;
        margin-top: 1.25em;
        padding-inline-start:1.625em}

    .prose-base :where(li): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:.5em;
        margin-top: .5em
    }

    .prose-base :where(ol>li): not(:where([class~=not-prose],[class~=not-prose] *)),.prose-base :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *)) {
        padding-inline-start:.375em
    }

    .prose-base :where(.prose-base>ul>li p): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:.75em;
        margin-top: .75em
    }

    .prose-base :where(.prose-base>ul>li>p: first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-top:1.25em
    }

    .prose-base :where(.prose-base>ul>li>p: last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:1.25em
    }

    .prose-base :where(.prose-base>ol>li>p: first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-top:1.25em
    }

    .prose-base :where(.prose-base>ol>li>p: last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:1.25em
    }

    .prose-base :where(ul ul,ul ol,ol ul,ol ol): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:.75em;
        margin-top: .75em
    }

    .prose-base :where(dl): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:1.25em;
        margin-top: 1.25em
    }

    .prose-base :where(dt): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-top:1.25em
    }

    .prose-base :where(dd): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-top:.5em;
        padding-inline-start:1.625em}

    .prose-base :where(hr): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:3em;
        margin-top: 3em
    }

    .prose-base :where(h2+*): not(:where([class~=not-prose],[class~=not-prose] *)),.prose-base :where(h3+*):not(:where([class~=not-prose],[class~=not-prose] *)),.prose-base :where(h4+*):not(:where([class~=not-prose],[class~=not-prose] *)),.prose-base :where(hr+*):not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-top:0
    }

    .prose-base :where(table): not(:where([class~=not-prose],[class~=not-prose] *)) {
        font-size:.875em;
        line-height: 1.71429
    }

    .prose-base :where(thead th): not(:where([class~=not-prose],[class~=not-prose] *)) {
        padding-inline-end:.571429em;
        padding-bottom: .571429em;
        padding-inline-start:.571429em}

    .prose-base :where(thead th: first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        padding-inline-start:0
    }

    .prose-base :where(thead th: last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        padding-inline-end:0
    }

    .prose-base :where(tbody td,tfoot td): not(:where([class~=not-prose],[class~=not-prose] *)) {
        padding-inline-end:.571429em;
        padding-bottom: .571429em;
        padding-top: .571429em;
        padding-inline-start:.571429em}

    .prose-base :where(tbody td: first-child,tfoot td:first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        padding-inline-start:0
    }

    .prose-base :where(tbody td: last-child,tfoot td:last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        padding-inline-end:0
    }

    .prose-base :where(figure): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:2em;
        margin-top: 2em
    }

    .prose-base :where(figure>*): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:0;
        margin-top: 0
    }

    .prose-base :where(figcaption): not(:where([class~=not-prose],[class~=not-prose] *)) {
        font-size:.875em;
        line-height: 1.42857;
        margin-top: .857143em
    }

    .prose-base :where(.prose-base>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-top: 0
    }

    .prose-base :where(.prose-base>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom: 0
    }

    .prose-lg {
        font-size: 1.125rem;
        line-height: 1.77778
    }

    .prose-lg :where(p): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:1.33333em;
        margin-top: 1.33333em
    }

    .prose-lg :where([class~=lead]): not(:where([class~=not-prose],[class~=not-prose] *)) {
        font-size:1.22222em;
        line-height: 1.45455;
        margin-bottom: 1.09091em;
        margin-top: 1.09091em
    }

    .prose-lg :where(blockquote): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:1.66667em;
        margin-top: 1.66667em;
        padding-inline-start:1em}

    .prose-lg :where(h1): not(:where([class~=not-prose],[class~=not-prose] *)) {
        font-size:2.66667em;
        line-height: 1;
        margin-bottom: .833333em;
        margin-top: 0
    }

    .prose-lg :where(h2): not(:where([class~=not-prose],[class~=not-prose] *)) {
        font-size:1.66667em;
        line-height: 1.33333;
        margin-bottom: 1.06667em;
        margin-top: 1.86667em
    }

    .prose-lg :where(h3): not(:where([class~=not-prose],[class~=not-prose] *)) {
        font-size:1.33333em;
        line-height: 1.5;
        margin-bottom: .666667em;
        margin-top: 1.66667em
    }

    .prose-lg :where(h4): not(:where([class~=not-prose],[class~=not-prose] *)) {
        line-height:1.55556;
        margin-bottom: .444444em;
        margin-top: 1.77778em
    }

    .prose-lg :where(img): not(:where([class~=not-prose],[class~=not-prose] *)),.prose-lg :where(picture):not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:1.77778em;
        margin-top: 1.77778em
    }

    .prose-lg :where(picture>img): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:0;
        margin-top: 0
    }

    .prose-lg :where(video): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:1.77778em;
        margin-top: 1.77778em
    }

    .prose-lg :where(kbd): not(:where([class~=not-prose],[class~=not-prose] *)) {
        border-radius:.3125rem;
        font-size: .888889em;
        padding-inline-end:.444444em;padding-bottom: .222222em;
        padding-top: .222222em;
        padding-inline-start:.444444em}

    .prose-lg :where(code): not(:where([class~=not-prose],[class~=not-prose] *)) {
        font-size:.888889em
    }

    .prose-lg :where(h2 code): not(:where([class~=not-prose],[class~=not-prose] *)) {
        font-size:.866667em
    }

    .prose-lg :where(h3 code): not(:where([class~=not-prose],[class~=not-prose] *)) {
        font-size:.875em
    }

    .prose-lg :where(pre): not(:where([class~=not-prose],[class~=not-prose] *)) {
        border-radius:.375rem;
        font-size: .888889em;
        line-height: 1.75;
        margin-bottom: 2em;
        margin-top: 2em;
        padding-inline-end:1.5em;padding-bottom: 1em;
        padding-top: 1em;
        padding-inline-start:1.5em}

    .prose-lg :where(ol): not(:where([class~=not-prose],[class~=not-prose] *)),.prose-lg :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:1.33333em;
        margin-top: 1.33333em;
        padding-inline-start:1.55556em}

    .prose-lg :where(li): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:.666667em;
        margin-top: .666667em
    }

    .prose-lg :where(ol>li): not(:where([class~=not-prose],[class~=not-prose] *)),.prose-lg :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *)) {
        padding-inline-start:.444444em
    }

    .prose-lg :where(.prose-lg>ul>li p): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:.888889em;
        margin-top: .888889em
    }

    .prose-lg :where(.prose-lg>ul>li>p: first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-top:1.33333em
    }

    .prose-lg :where(.prose-lg>ul>li>p: last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:1.33333em
    }

    .prose-lg :where(.prose-lg>ol>li>p: first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-top:1.33333em
    }

    .prose-lg :where(.prose-lg>ol>li>p: last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:1.33333em
    }

    .prose-lg :where(ul ul,ul ol,ol ul,ol ol): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:.888889em;
        margin-top: .888889em
    }

    .prose-lg :where(dl): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:1.33333em;
        margin-top: 1.33333em
    }

    .prose-lg :where(dt): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-top:1.33333em
    }

    .prose-lg :where(dd): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-top:.666667em;
        padding-inline-start:1.55556em}

    .prose-lg :where(hr): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:3.11111em;
        margin-top: 3.11111em
    }

    .prose-lg :where(h2+*): not(:where([class~=not-prose],[class~=not-prose] *)),.prose-lg :where(h3+*):not(:where([class~=not-prose],[class~=not-prose] *)),.prose-lg :where(h4+*):not(:where([class~=not-prose],[class~=not-prose] *)),.prose-lg :where(hr+*):not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-top:0
    }

    .prose-lg :where(table): not(:where([class~=not-prose],[class~=not-prose] *)) {
        font-size:.888889em;
        line-height: 1.5
    }

    .prose-lg :where(thead th): not(:where([class~=not-prose],[class~=not-prose] *)) {
        padding-inline-end:.75em;
        padding-bottom: .75em;
        padding-inline-start:.75em}

    .prose-lg :where(thead th: first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        padding-inline-start:0
    }

    .prose-lg :where(thead th: last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        padding-inline-end:0
    }

    .prose-lg :where(tbody td,tfoot td): not(:where([class~=not-prose],[class~=not-prose] *)) {
        padding-inline-end:.75em;
        padding-bottom: .75em;
        padding-top: .75em;
        padding-inline-start:.75em}

    .prose-lg :where(tbody td: first-child,tfoot td:first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        padding-inline-start:0
    }

    .prose-lg :where(tbody td: last-child,tfoot td:last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        padding-inline-end:0
    }

    .prose-lg :where(figure): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:1.77778em;
        margin-top: 1.77778em
    }

    .prose-lg :where(figure>*): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:0;
        margin-top: 0
    }

    .prose-lg :where(figcaption): not(:where([class~=not-prose],[class~=not-prose] *)) {
        font-size:.888889em;
        line-height: 1.5;
        margin-top: 1em
    }

    .prose-lg :where(.prose-lg>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-top: 0
    }

    .prose-lg :where(.prose-lg>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom: 0
    }

    .prose-sm {
        font-size: .875rem;
        line-height: 1.71429
    }

    .prose-sm :where(p): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:1.14286em;
        margin-top: 1.14286em
    }

    .prose-sm :where([class~=lead]): not(:where([class~=not-prose],[class~=not-prose] *)) {
        font-size:1.28571em;
        line-height: 1.55556;
        margin-bottom: .888889em;
        margin-top: .888889em
    }

    .prose-sm :where(blockquote): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:1.33333em;
        margin-top: 1.33333em;
        padding-inline-start:1.11111em}

    .prose-sm :where(h1): not(:where([class~=not-prose],[class~=not-prose] *)) {
        font-size:2.14286em;
        line-height: 1.2;
        margin-bottom: .8em;
        margin-top: 0
    }

    .prose-sm :where(h2): not(:where([class~=not-prose],[class~=not-prose] *)) {
        font-size:1.42857em;
        line-height: 1.4;
        margin-bottom: .8em;
        margin-top: 1.6em
    }

    .prose-sm :where(h3): not(:where([class~=not-prose],[class~=not-prose] *)) {
        font-size:1.28571em;
        line-height: 1.55556;
        margin-bottom: .444444em;
        margin-top: 1.55556em
    }

    .prose-sm :where(h4): not(:where([class~=not-prose],[class~=not-prose] *)) {
        line-height:1.42857;
        margin-bottom: .571429em;
        margin-top: 1.42857em
    }

    .prose-sm :where(img): not(:where([class~=not-prose],[class~=not-prose] *)),.prose-sm :where(picture):not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:1.71429em;
        margin-top: 1.71429em
    }

    .prose-sm :where(picture>img): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:0;
        margin-top: 0
    }

    .prose-sm :where(video): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:1.71429em;
        margin-top: 1.71429em
    }

    .prose-sm :where(kbd): not(:where([class~=not-prose],[class~=not-prose] *)) {
        border-radius:.3125rem;
        font-size: .857143em;
        padding-inline-end:.357143em;padding-bottom: .142857em;
        padding-top: .142857em;
        padding-inline-start:.357143em}

    .prose-sm :where(code): not(:where([class~=not-prose],[class~=not-prose] *)) {
        font-size:.857143em
    }

    .prose-sm :where(h2 code): not(:where([class~=not-prose],[class~=not-prose] *)) {
        font-size:.9em
    }

    .prose-sm :where(h3 code): not(:where([class~=not-prose],[class~=not-prose] *)) {
        font-size:.888889em
    }

    .prose-sm :where(pre): not(:where([class~=not-prose],[class~=not-prose] *)) {
        border-radius:.25rem;
        font-size: .857143em;
        line-height: 1.66667;
        margin-bottom: 1.66667em;
        margin-top: 1.66667em;
        padding-inline-end:1em;padding-bottom: .666667em;
        padding-top: .666667em;
        padding-inline-start:1em}

    .prose-sm :where(ol): not(:where([class~=not-prose],[class~=not-prose] *)),.prose-sm :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:1.14286em;
        margin-top: 1.14286em;
        padding-inline-start:1.57143em}

    .prose-sm :where(li): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:.285714em;
        margin-top: .285714em
    }

    .prose-sm :where(ol>li): not(:where([class~=not-prose],[class~=not-prose] *)),.prose-sm :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *)) {
        padding-inline-start:.428571em
    }

    .prose-sm :where(.prose-sm>ul>li p): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:.571429em;
        margin-top: .571429em
    }

    .prose-sm :where(.prose-sm>ul>li>p: first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-top:1.14286em
    }

    .prose-sm :where(.prose-sm>ul>li>p: last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:1.14286em
    }

    .prose-sm :where(.prose-sm>ol>li>p: first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-top:1.14286em
    }

    .prose-sm :where(.prose-sm>ol>li>p: last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:1.14286em
    }

    .prose-sm :where(ul ul,ul ol,ol ul,ol ol): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:.571429em;
        margin-top: .571429em
    }

    .prose-sm :where(dl): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:1.14286em;
        margin-top: 1.14286em
    }

    .prose-sm :where(dt): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-top:1.14286em
    }

    .prose-sm :where(dd): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-top:.285714em;
        padding-inline-start:1.57143em}

    .prose-sm :where(hr): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:2.85714em;
        margin-top: 2.85714em
    }

    .prose-sm :where(h2+*): not(:where([class~=not-prose],[class~=not-prose] *)),.prose-sm :where(h3+*):not(:where([class~=not-prose],[class~=not-prose] *)),.prose-sm :where(h4+*):not(:where([class~=not-prose],[class~=not-prose] *)),.prose-sm :where(hr+*):not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-top:0
    }

    .prose-sm :where(table): not(:where([class~=not-prose],[class~=not-prose] *)) {
        font-size:.857143em;
        line-height: 1.5
    }

    .prose-sm :where(thead th): not(:where([class~=not-prose],[class~=not-prose] *)) {
        padding-inline-end:1em;
        padding-bottom: .666667em;
        padding-inline-start:1em}

    .prose-sm :where(thead th: first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        padding-inline-start:0
    }

    .prose-sm :where(thead th: last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        padding-inline-end:0
    }

    .prose-sm :where(tbody td,tfoot td): not(:where([class~=not-prose],[class~=not-prose] *)) {
        padding-inline-end:1em;
        padding-bottom: .666667em;
        padding-top: .666667em;
        padding-inline-start:1em}

    .prose-sm :where(tbody td: first-child,tfoot td:first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        padding-inline-start:0
    }

    .prose-sm :where(tbody td: last-child,tfoot td:last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        padding-inline-end:0
    }

    .prose-sm :where(figure): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:1.71429em;
        margin-top: 1.71429em
    }

    .prose-sm :where(figure>*): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:0;
        margin-top: 0
    }

    .prose-sm :where(figcaption): not(:where([class~=not-prose],[class~=not-prose] *)) {
        font-size:.857143em;
        line-height: 1.33333;
        margin-top: .666667em
    }

    .prose-sm :where(.prose-sm>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-top: 0
    }

    .prose-sm :where(.prose-sm>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom: 0
    }

    .prose-xl {
        font-size: 1.25rem;
        line-height: 1.8
    }

    .prose-xl :where(p): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:1.2em;
        margin-top: 1.2em
    }

    .prose-xl :where([class~=lead]): not(:where([class~=not-prose],[class~=not-prose] *)) {
        font-size:1.2em;
        line-height: 1.5;
        margin-bottom: 1em;
        margin-top: 1em
    }

    .prose-xl :where(blockquote): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:1.6em;
        margin-top: 1.6em;
        padding-inline-start:1.06667em}

    .prose-xl :where(h1): not(:where([class~=not-prose],[class~=not-prose] *)) {
        font-size:2.8em;
        line-height: 1;
        margin-bottom: .857143em;
        margin-top: 0
    }

    .prose-xl :where(h2): not(:where([class~=not-prose],[class~=not-prose] *)) {
        font-size:1.8em;
        line-height: 1.11111;
        margin-bottom: .888889em;
        margin-top: 1.55556em
    }

    .prose-xl :where(h3): not(:where([class~=not-prose],[class~=not-prose] *)) {
        font-size:1.5em;
        line-height: 1.33333;
        margin-bottom: .666667em;
        margin-top: 1.6em
    }

    .prose-xl :where(h4): not(:where([class~=not-prose],[class~=not-prose] *)) {
        line-height:1.6;
        margin-bottom: .6em;
        margin-top: 1.8em
    }

    .prose-xl :where(img): not(:where([class~=not-prose],[class~=not-prose] *)),.prose-xl :where(picture):not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:2em;
        margin-top: 2em
    }

    .prose-xl :where(picture>img): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:0;
        margin-top: 0
    }

    .prose-xl :where(video): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:2em;
        margin-top: 2em
    }

    .prose-xl :where(kbd): not(:where([class~=not-prose],[class~=not-prose] *)) {
        border-radius:.3125rem;
        font-size: .9em;
        padding-inline-end:.4em;padding-bottom: .25em;
        padding-top: .25em;
        padding-inline-start:.4em}

    .prose-xl :where(code): not(:where([class~=not-prose],[class~=not-prose] *)) {
        font-size:.9em
    }

    .prose-xl :where(h2 code): not(:where([class~=not-prose],[class~=not-prose] *)) {
        font-size:.861111em
    }

    .prose-xl :where(h3 code): not(:where([class~=not-prose],[class~=not-prose] *)) {
        font-size:.9em
    }

    .prose-xl :where(pre): not(:where([class~=not-prose],[class~=not-prose] *)) {
        border-radius:.5rem;
        font-size: .9em;
        line-height: 1.77778;
        margin-bottom: 2em;
        margin-top: 2em;
        padding-inline-end:1.33333em;padding-bottom: 1.11111em;
        padding-top: 1.11111em;
        padding-inline-start:1.33333em}

    .prose-xl :where(ol): not(:where([class~=not-prose],[class~=not-prose] *)),.prose-xl :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:1.2em;
        margin-top: 1.2em;
        padding-inline-start:1.6em}

    .prose-xl :where(li): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:.6em;
        margin-top: .6em
    }

    .prose-xl :where(ol>li): not(:where([class~=not-prose],[class~=not-prose] *)),.prose-xl :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *)) {
        padding-inline-start:.4em
    }

    .prose-xl :where(.prose-xl>ul>li p): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:.8em;
        margin-top: .8em
    }

    .prose-xl :where(.prose-xl>ul>li>p: first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-top:1.2em
    }

    .prose-xl :where(.prose-xl>ul>li>p: last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:1.2em
    }

    .prose-xl :where(.prose-xl>ol>li>p: first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-top:1.2em
    }

    .prose-xl :where(.prose-xl>ol>li>p: last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:1.2em
    }

    .prose-xl :where(ul ul,ul ol,ol ul,ol ol): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:.8em;
        margin-top: .8em
    }

    .prose-xl :where(dl): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:1.2em;
        margin-top: 1.2em
    }

    .prose-xl :where(dt): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-top:1.2em
    }

    .prose-xl :where(dd): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-top:.6em;
        padding-inline-start:1.6em}

    .prose-xl :where(hr): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:2.8em;
        margin-top: 2.8em
    }

    .prose-xl :where(h2+*): not(:where([class~=not-prose],[class~=not-prose] *)),.prose-xl :where(h3+*):not(:where([class~=not-prose],[class~=not-prose] *)),.prose-xl :where(h4+*):not(:where([class~=not-prose],[class~=not-prose] *)),.prose-xl :where(hr+*):not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-top:0
    }

    .prose-xl :where(table): not(:where([class~=not-prose],[class~=not-prose] *)) {
        font-size:.9em;
        line-height: 1.55556
    }

    .prose-xl :where(thead th): not(:where([class~=not-prose],[class~=not-prose] *)) {
        padding-inline-end:.666667em;
        padding-bottom: .888889em;
        padding-inline-start:.666667em}

    .prose-xl :where(thead th: first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        padding-inline-start:0
    }

    .prose-xl :where(thead th: last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        padding-inline-end:0
    }

    .prose-xl :where(tbody td,tfoot td): not(:where([class~=not-prose],[class~=not-prose] *)) {
        padding-inline-end:.666667em;
        padding-bottom: .888889em;
        padding-top: .888889em;
        padding-inline-start:.666667em}

    .prose-xl :where(tbody td: first-child,tfoot td:first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        padding-inline-start:0
    }

    .prose-xl :where(tbody td: last-child,tfoot td:last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        padding-inline-end:0
    }

    .prose-xl :where(figure): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:2em;
        margin-top: 2em
    }

    .prose-xl :where(figure>*): not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom:0;
        margin-top: 0
    }

    .prose-xl :where(figcaption): not(:where([class~=not-prose],[class~=not-prose] *)) {
        font-size:.9em;
        line-height: 1.55556;
        margin-top: 1em
    }

    .prose-xl :where(.prose-xl>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-top: 0
    }

    .prose-xl :where(.prose-xl>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
        margin-bottom: 0
    }

    .icon-\[ph--align-right-duotone\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M184 64v40a8 8 0 0 1-8 8H80a8 8 0 0 1-8-8V64a8 8 0 0 1 8-8h96a8 8 0 0 1 8 8m-8 80H40a8 8 0 0 0-8 8v40a8 8 0 0 0 8 8h136a8 8 0 0 0 8-8v-40a8 8 0 0 0-8-8' opacity='.2'/%3E%3Cpath d='M224 40v176a8 8 0 0 1-16 0V40a8 8 0 0 1 16 0m-32 24v40a16 16 0 0 1-16 16H80a16 16 0 0 1-16-16V64a16 16 0 0 1 16-16h96a16 16 0 0 1 16 16m-16 0H80v40h96Zm16 88v40a16 16 0 0 1-16 16H40a16 16 0 0 1-16-16v-40a16 16 0 0 1 16-16h136a16 16 0 0 1 16 16m-16 0H40v40h136Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--align-right-duotone\],.icon-\[ph--arrow-circle-up-bold\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--arrow-circle-up-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M128 20a108 108 0 1 0 108 108A108.12 108.12 0 0 0 128 20m0 192a84 84 0 1 1 84-84 84.09 84.09 0 0 1-84 84m40.49-100.49a12 12 0 0 1-17 17L140 117v51a12 12 0 0 1-24 0v-51l-11.51 11.52a12 12 0 0 1-17-17l32-32a12 12 0 0 1 17 0Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--arrow-clockwise-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M244 56v48a12 12 0 0 1-12 12h-48a12 12 0 1 1 0-24h17.1l-19-17.38c-.13-.12-.26-.24-.38-.37A76 76 0 1 0 127 204h1a75.53 75.53 0 0 0 52.15-20.72 12 12 0 0 1 16.49 17.45A99.45 99.45 0 0 1 128 228h-1.37a100 100 0 1 1 71.88-170.94L220 76.72V56a12 12 0 0 1 24 0'/%3E%3C/svg%3E")
    }

    .icon-\[ph--arrow-clockwise-bold\],.icon-\[ph--arrow-fat-left-duotone\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--arrow-fat-left-duotone\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M216 88v80a8 8 0 0 1-8 8h-88v48l-96-96 96-96v48h88a8 8 0 0 1 8 8' opacity='.2'/%3E%3Cpath d='M208 72h-80V32a8 8 0 0 0-13.66-5.66l-96 96a8 8 0 0 0 0 11.32l96 96A8 8 0 0 0 128 224v-40h80a16 16 0 0 0 16-16V88a16 16 0 0 0-16-16m0 96h-88a8 8 0 0 0-8 8v28.69L35.31 128 112 51.31V80a8 8 0 0 0 8 8h88Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--arrow-fat-right-duotone\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M136 224v-48H48a8 8 0 0 1-8-8V88a8 8 0 0 1 8-8h88V32l96 96Z' opacity='.2'/%3E%3Cpath d='m237.66 122.34-96-96A8 8 0 0 0 128 32v40H48a16 16 0 0 0-16 16v80a16 16 0 0 0 16 16h80v40a8 8 0 0 0 13.66 5.66l96-96a8 8 0 0 0 0-11.32M144 204.69V176a8 8 0 0 0-8-8H48V88h88a8 8 0 0 0 8-8V51.31L220.69 128Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--arrow-fat-right-duotone\],.icon-\[ph--arrow-left-bold\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--arrow-left-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M228 128a12 12 0 0 1-12 12H69l51.52 51.51a12 12 0 0 1-17 17l-72-72a12 12 0 0 1 0-17l72-72a12 12 0 0 1 17 17L69 116h147a12 12 0 0 1 12 12'/%3E%3C/svg%3E")
    }

    .icon-\[ph--arrow-right-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='m224.49 136.49-72 72a12 12 0 0 1-17-17L187 140H40a12 12 0 0 1 0-24h147l-51.49-51.52a12 12 0 0 1 17-17l72 72a12 12 0 0 1-.02 17.01'/%3E%3C/svg%3E")
    }

    .icon-\[ph--arrow-right-bold\],.icon-\[ph--arrow-right-duotone\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--arrow-right-duotone\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='m216 128-72 72V56Z' opacity='.2'/%3E%3Cpath d='m221.66 122.34-72-72A8 8 0 0 0 136 56v64H40a8 8 0 0 0 0 16h96v64a8 8 0 0 0 13.66 5.66l72-72a8 8 0 0 0 0-11.32M152 180.69V75.31L204.69 128Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--arrow-square-out-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M228 104a12 12 0 0 1-24 0V69l-59.51 59.51a12 12 0 0 1-17-17L187 52h-35a12 12 0 0 1 0-24h64a12 12 0 0 1 12 12Zm-44 24a12 12 0 0 0-12 12v64H52V84h64a12 12 0 0 0 0-24H48a20 20 0 0 0-20 20v128a20 20 0 0 0 20 20h128a20 20 0 0 0 20-20v-68a12 12 0 0 0-12-12'/%3E%3C/svg%3E")
    }

    .icon-\[ph--arrow-square-out-bold\],.icon-\[ph--arrow-up-bold\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--arrow-up-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M208.49 120.49a12 12 0 0 1-17 0L140 69v147a12 12 0 0 1-24 0V69l-51.51 51.49a12 12 0 0 1-17-17l72-72a12 12 0 0 1 17 0l72 72a12 12 0 0 1 0 17'/%3E%3C/svg%3E")
    }

    .icon-\[ph--arrow-up-right-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M204 64v104a12 12 0 0 1-24 0V93L72.49 200.49a12 12 0 0 1-17-17L163 76H88a12 12 0 0 1 0-24h104a12 12 0 0 1 12 12'/%3E%3C/svg%3E")
    }

    .icon-\[ph--arrow-up-right-bold\],.icon-\[ph--arrow-up-right\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--arrow-up-right\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M200 64v104a8 8 0 0 1-16 0V83.31L69.66 197.66a8 8 0 0 1-11.32-11.32L172.69 72H88a8 8 0 0 1 0-16h104a8 8 0 0 1 8 8'/%3E%3C/svg%3E")
    }

    .icon-\[ph--arrows-clockwise-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M228 48v48a12 12 0 0 1-12 12h-48a12 12 0 0 1 0-24h19l-7.8-7.8a75.55 75.55 0 0 0-53.32-22.26h-.43a75.5 75.5 0 0 0-53.06 21.63 12 12 0 1 1-16.78-17.16 99.38 99.38 0 0 1 69.87-28.47h.52a99.42 99.42 0 0 1 70.2 29.29L204 67V48a12 12 0 0 1 24 0m-44.39 132.43a75.5 75.5 0 0 1-53.09 21.63h-.43a75.55 75.55 0 0 1-53.32-22.26L69 172h19a12 12 0 0 0 0-24H40a12 12 0 0 0-12 12v48a12 12 0 0 0 24 0v-19l7.8 7.8a99.42 99.42 0 0 0 70.2 29.26h.56a99.38 99.38 0 0 0 69.87-28.47 12 12 0 0 0-16.78-17.16Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--arrows-clockwise-bold\],.icon-\[ph--arrows-out-cardinal-bold\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--arrows-out-cardinal-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M87.51 64.49a12 12 0 0 1 0-17l32-32a12 12 0 0 1 17 0l32 32a12 12 0 0 1-17 17L140 53v43a12 12 0 0 1-24 0V53l-11.51 11.49a12 12 0 0 1-16.98 0m64 127L140 203v-43a12 12 0 0 0-24 0v43l-11.51-11.52a12 12 0 0 0-17 17l32 32a12 12 0 0 0 17 0l32-32a12 12 0 0 0-17-17Zm89-72-32-32a12 12 0 0 0-17 17L203 116h-43a12 12 0 0 0 0 24h43l-11.52 11.51a12 12 0 0 0 17 17l32-32a12 12 0 0 0 .01-17ZM53 140h43a12 12 0 0 0 0-24H53l11.52-11.51a12 12 0 1 0-17-17l-32 32a12 12 0 0 0 0 17l32 32a12 12 0 1 0 17-17Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--article-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M216 36H40a20 20 0 0 0-20 20v144a20 20 0 0 0 20 20h176a20 20 0 0 0 20-20V56a20 20 0 0 0-20-20m-4 160H44V60h168ZM68 92a12 12 0 0 1 12-12h96a12 12 0 0 1 0 24H80a12 12 0 0 1-12-12m0 36a12 12 0 0 1 12-12h96a12 12 0 0 1 0 24H80a12 12 0 0 1-12-12m0 36a12 12 0 0 1 12-12h96a12 12 0 0 1 0 24H80a12 12 0 0 1-12-12'/%3E%3C/svg%3E")
    }

    .icon-\[ph--article-bold\],.icon-\[ph--book-duotone\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--book-duotone\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M208 32v160H72a24 24 0 0 0-24 24V56a24 24 0 0 1 24-24Z' opacity='.2'/%3E%3Cpath d='M208 24H72a32 32 0 0 0-32 32v168a8 8 0 0 0 8 8h144a8 8 0 0 0 0-16H56a16 16 0 0 1 16-16h136a8 8 0 0 0 8-8V32a8 8 0 0 0-8-8m-8 160H72a31.8 31.8 0 0 0-16 4.29V56a16 16 0 0 1 16-16h128Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--book-open-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M232 44h-72a43.86 43.86 0 0 0-32 13.85A43.86 43.86 0 0 0 96 44H24a12 12 0 0 0-12 12v144a12 12 0 0 0 12 12h72a20 20 0 0 1 20 20 12 12 0 0 0 24 0 20 20 0 0 1 20-20h72a12 12 0 0 0 12-12V56a12 12 0 0 0-12-12M96 188H36V68h60a20 20 0 0 1 20 20v104.81A43.8 43.8 0 0 0 96 188m124 0h-60a43.7 43.7 0 0 0-20 4.83V88a20 20 0 0 1 20-20h60Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--book-open-bold\],.icon-\[ph--book-open-duotone\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--book-open-duotone\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M232 56v144h-72a32 32 0 0 0-32 32 32 32 0 0 0-32-32H24V56h72a32 32 0 0 1 32 32 32 32 0 0 1 32-32Z' opacity='.2'/%3E%3Cpath d='M232 48h-72a40 40 0 0 0-32 16 40 40 0 0 0-32-16H24a8 8 0 0 0-8 8v144a8 8 0 0 0 8 8h72a24 24 0 0 1 24 24 8 8 0 0 0 16 0 24 24 0 0 1 24-24h72a8 8 0 0 0 8-8V56a8 8 0 0 0-8-8M96 192H32V64h64a24 24 0 0 1 24 24v112a39.8 39.8 0 0 0-24-8m128 0h-64a39.8 39.8 0 0 0-24 8V88a24 24 0 0 1 24-24h64Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--calendar-dots-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M208 28h-20v-4a12 12 0 0 0-24 0v4H92v-4a12 12 0 0 0-24 0v4H48a20 20 0 0 0-20 20v160a20 20 0 0 0 20 20h160a20 20 0 0 0 20-20V48a20 20 0 0 0-20-20M68 52a12 12 0 0 0 24 0h72a12 12 0 0 0 24 0h16v24H52V52ZM52 204V100h152v104Zm92-76a16 16 0 1 1-16-16 16 16 0 0 1 16 16m48 0a16 16 0 1 1-16-16 16 16 0 0 1 16 16m-96 48a16 16 0 1 1-16-16 16 16 0 0 1 16 16m48 0a16 16 0 1 1-16-16 16 16 0 0 1 16 16m48 0a16 16 0 1 1-16-16 16 16 0 0 1 16 16'/%3E%3C/svg%3E")
    }

    .icon-\[ph--calendar-dots-bold\],.icon-\[ph--camera-bold\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--camera-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M208 52h-25.58L170 33.34A12 12 0 0 0 160 28H96a12 12 0 0 0-10 5.34L73.57 52H48a28 28 0 0 0-28 28v112a28 28 0 0 0 28 28h160a28 28 0 0 0 28-28V80a28 28 0 0 0-28-28m4 140a4 4 0 0 1-4 4H48a4 4 0 0 1-4-4V80a4 4 0 0 1 4-4h32a12 12 0 0 0 10-5.34L102.42 52h51.15L166 70.66A12 12 0 0 0 176 76h32a4 4 0 0 1 4 4ZM128 84a48 48 0 1 0 48 48 48.05 48.05 0 0 0-48-48m0 72a24 24 0 1 1 24-24 24 24 0 0 1-24 24'/%3E%3C/svg%3E")
    }

    .icon-\[ph--caret-double-down-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M216.49 127.51a12 12 0 0 1 0 17l-80 80a12 12 0 0 1-17 0l-80-80a12 12 0 1 1 17-17L128 199l71.51-71.52a12 12 0 0 1 16.98.03m-97 17a12 12 0 0 0 17 0l80-80a12 12 0 0 0-17-17L128 119 56.49 47.51a12 12 0 0 0-17 17Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--caret-double-down-bold\],.icon-\[ph--caret-down-bold\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--caret-down-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='m216.49 104.49-80 80a12 12 0 0 1-17 0l-80-80a12 12 0 0 1 17-17L128 159l71.51-71.52a12 12 0 0 1 17 17Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--caret-left-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M168.49 199.51a12 12 0 0 1-17 17l-80-80a12 12 0 0 1 0-17l80-80a12 12 0 0 1 17 17L97 128Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--caret-left-bold\],.icon-\[ph--caret-right-bold\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--caret-right-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='m184.49 136.49-80 80a12 12 0 0 1-17-17L159 128 87.51 56.49a12 12 0 1 1 17-17l80 80a12 12 0 0 1-.02 17'/%3E%3C/svg%3E")
    }

    .icon-\[ph--caret-right-duotone\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='m176 128-80 80V48Z' opacity='.2'/%3E%3Cpath d='m181.66 122.34-80-80A8 8 0 0 0 88 48v160a8 8 0 0 0 13.66 5.66l80-80a8 8 0 0 0 0-11.32M104 188.69V67.31L164.69 128Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--caret-right-duotone\],.icon-\[ph--caret-up-bold\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--caret-up-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M216.49 168.49a12 12 0 0 1-17 0L128 97l-71.51 71.49a12 12 0 0 1-17-17l80-80a12 12 0 0 1 17 0l80 80a12 12 0 0 1 0 17'/%3E%3C/svg%3E")
    }

    .icon-\[ph--chart-bar-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M224 196h-4V40a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v36H96a12 12 0 0 0-12 12v36H48a12 12 0 0 0-12 12v60h-4a12 12 0 0 0 0 24h192a12 12 0 0 0 0-24M164 52h32v144h-32Zm-56 48h32v96h-32Zm-48 48h24v48H60Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--chart-bar-bold\],.icon-\[ph--chat-centered-text-duotone\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--chat-centered-text-duotone\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M224 56v128a8 8 0 0 1-8 8h-65.07l-16 28a8 8 0 0 1-13.9 0l-16-28H40a8 8 0 0 1-8-8V56a8 8 0 0 1 8-8h176a8 8 0 0 1 8 8' opacity='.2'/%3E%3Cpath d='M88 104a8 8 0 0 1 8-8h64a8 8 0 0 1 0 16H96a8 8 0 0 1-8-8m8 40h64a8 8 0 0 0 0-16H96a8 8 0 0 0 0 16m136-88v128a16 16 0 0 1-16 16h-60.43l-13.68 23.94a16 16 0 0 1-27.78 0L100.43 200H40a16 16 0 0 1-16-16V56a16 16 0 0 1 16-16h176a16 16 0 0 1 16 16m-16 0H40v128h65.07a8 8 0 0 1 7 4l16 28 16-28a8 8 0 0 1 7-4H216Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--chat-circle-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M128 20a108 108 0 0 0-96.15 157.23L21 209.66A20 20 0 0 0 46.34 235l32.43-10.81A108 108 0 1 0 128 20m0 192a84 84 0 0 1-42.06-11.27 12 12 0 0 0-6-1.62 12.1 12.1 0 0 0-3.8.62l-29.79 9.93 9.93-29.79a12 12 0 0 0-1-9.81A84 84 0 1 1 128 212'/%3E%3C/svg%3E")
    }

    .icon-\[ph--chat-circle-bold\],.icon-\[ph--chat-circle-dots-bold\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--chat-circle-dots-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M120 128a16 16 0 1 1-16-16 16 16 0 0 1 16 16m32-16a16 16 0 1 0 16 16 16 16 0 0 0-16-16m84 16a108 108 0 0 1-157.23 96.15L46.34 235A20 20 0 0 1 21 209.66l10.81-32.43A108 108 0 1 1 236 128m-24 0a84 84 0 1 0-156.73 42.06 12 12 0 0 1 1 9.81l-9.93 29.79 29.79-9.93a12.1 12.1 0 0 1 3.8-.62 12 12 0 0 1 6 1.62A84 84 0 0 0 212 128'/%3E%3C/svg%3E")
    }

    .icon-\[ph--chat-circle-text-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M172 108a12 12 0 0 1-12 12H96a12 12 0 0 1 0-24h64a12 12 0 0 1 12 12m-12 28H96a12 12 0 0 0 0 24h64a12 12 0 0 0 0-24m76-8a108 108 0 0 1-157.23 96.15L46.34 235A20 20 0 0 1 21 209.66l10.81-32.43A108 108 0 1 1 236 128m-24 0a84 84 0 1 0-156.73 42.06 12 12 0 0 1 1 9.81l-9.93 29.79 29.79-9.93a12.1 12.1 0 0 1 3.8-.62 12 12 0 0 1 6 1.62A84 84 0 0 0 212 128'/%3E%3C/svg%3E")
    }

    .icon-\[ph--chat-circle-text-bold\],.icon-\[ph--check-bold\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--check-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='m232.49 80.49-128 128a12 12 0 0 1-17 0l-56-56a12 12 0 1 1 17-17L96 183 215.51 63.51a12 12 0 0 1 17 17Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--clock-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M128 20a108 108 0 1 0 108 108A108.12 108.12 0 0 0 128 20m0 192a84 84 0 1 1 84-84 84.09 84.09 0 0 1-84 84m68-84a12 12 0 0 1-12 12h-56a12 12 0 0 1-12-12V72a12 12 0 0 1 24 0v44h44a12 12 0 0 1 12 12'/%3E%3C/svg%3E")
    }

    .icon-\[ph--clock-bold\],.icon-\[ph--cloud-bold\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--cloud-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M160 36a92.09 92.09 0 0 0-81 48.36A68 68 0 1 0 72 220h88a92 92 0 0 0 0-184m0 160H72a44 44 0 0 1-1.82-88A92 92 0 0 0 68 128a12 12 0 0 0 24 0 68 68 0 1 1 68 68'/%3E%3C/svg%3E")
    }

    .icon-\[ph--copy-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M216 28H88a12 12 0 0 0-12 12v36H40a12 12 0 0 0-12 12v128a12 12 0 0 0 12 12h128a12 12 0 0 0 12-12v-36h36a12 12 0 0 0 12-12V40a12 12 0 0 0-12-12m-60 176H52V100h104Zm48-48h-24V88a12 12 0 0 0-12-12h-68V52h104Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--copy-bold\],.icon-\[ph--cube-bold\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--cube-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='m225.6 62.64-88-48.17a19.91 19.91 0 0 0-19.2 0l-88 48.17A20 20 0 0 0 20 80.19v95.62a20 20 0 0 0 10.4 17.55l88 48.17a19.89 19.89 0 0 0 19.2 0l88-48.17a20 20 0 0 0 10.4-17.55V80.19a20 20 0 0 0-10.4-17.55M128 36.57 200 76l-72 39.4L56 76ZM44 96.79l72 39.4v76.67l-72-39.42Zm96 116.07v-76.67l72-39.4v76.65Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--devices-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M224 72h-12v-8a28 28 0 0 0-28-28H40a28 28 0 0 0-28 28v88a28 28 0 0 0 28 28h96v12a28 28 0 0 0 28 28h60a28 28 0 0 0 28-28v-92a28 28 0 0 0-28-28M40 156a4 4 0 0 1-4-4V64a4 4 0 0 1 4-4h144a4 4 0 0 1 4 4v8h-24a28 28 0 0 0-28 28v56Zm188 36a4 4 0 0 1-4 4h-60a4 4 0 0 1-4-4v-92a4 4 0 0 1 4-4h60a4 4 0 0 1 4 4Zm-104 16a12 12 0 0 1-12 12H88a12 12 0 0 1 0-24h24a12 12 0 0 1 12 12m88-84a12 12 0 0 1-12 12h-12a12 12 0 0 1 0-24h12a12 12 0 0 1 12 12'/%3E%3C/svg%3E")
    }

    .icon-\[ph--devices-bold\],.icon-\[ph--dots-six-vertical-bold\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--dots-six-vertical-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M108 60a16 16 0 1 1-16-16 16 16 0 0 1 16 16m56 16a16 16 0 1 0-16-16 16 16 0 0 0 16 16m-72 36a16 16 0 1 0 16 16 16 16 0 0 0-16-16m72 0a16 16 0 1 0 16 16 16 16 0 0 0-16-16m-72 68a16 16 0 1 0 16 16 16 16 0 0 0-16-16m72 0a16 16 0 1 0 16 16 16 16 0 0 0-16-16'/%3E%3C/svg%3E")
    }

    .icon-\[ph--dots-three-circle-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M128 20a108 108 0 1 0 108 108A108.12 108.12 0 0 0 128 20m0 192a84 84 0 1 1 84-84 84.09 84.09 0 0 1-84 84m-16-84a16 16 0 1 1-16-16 16 16 0 0 1 16 16m64 0a16 16 0 1 1-16-16 16 16 0 0 1 16 16'/%3E%3C/svg%3E")
    }

    .icon-\[ph--dots-three-circle-bold\],.icon-\[ph--download-bold\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--download-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M71.51 88.49a12 12 0 0 1 17-17L116 99V24a12 12 0 0 1 24 0v75l27.51-27.52a12 12 0 0 1 17 17l-48 48a12 12 0 0 1-17 0ZM224 116h-36a12 12 0 0 0 0 24h32v56H36v-56h32a12 12 0 0 0 0-24H32a20 20 0 0 0-20 20v64a20 20 0 0 0 20 20h192a20 20 0 0 0 20-20v-64a20 20 0 0 0-20-20m-20 52a16 16 0 1 0-16 16 16 16 0 0 0 16-16'/%3E%3C/svg%3E")
    }

    .icon-\[ph--envelope-simple-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M224 44H32a12 12 0 0 0-12 12v136a20 20 0 0 0 20 20h176a20 20 0 0 0 20-20V56a12 12 0 0 0-12-12m-30.85 24L128 127.72 62.85 68ZM44 188V83.28l75.89 69.57a12 12 0 0 0 16.22 0L212 83.28V188Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--envelope-simple-bold\],.icon-\[ph--eye-bold\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--eye-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M251 123.13c-.37-.81-9.13-20.26-28.48-39.61C196.63 57.67 164 44 128 44S59.37 57.67 33.51 83.52C14.16 102.87 5.4 122.32 5 123.13a12.08 12.08 0 0 0 0 9.75c.37.82 9.13 20.26 28.49 39.61C59.37 198.34 92 212 128 212s68.63-13.66 94.48-39.51c19.36-19.35 28.12-38.79 28.49-39.61a12.08 12.08 0 0 0 .03-9.75m-46.06 33C183.47 177.27 157.59 188 128 188s-55.47-10.73-76.91-31.88A130.4 130.4 0 0 1 29.52 128a130.5 130.5 0 0 1 21.57-28.11C72.54 78.73 98.41 68 128 68s55.46 10.73 76.91 31.89A130.4 130.4 0 0 1 226.48 128a130.5 130.5 0 0 1-21.57 28.12ZM128 84a44 44 0 1 0 44 44 44.05 44.05 0 0 0-44-44m0 64a20 20 0 1 1 20-20 20 20 0 0 1-20 20'/%3E%3C/svg%3E")
    }

    .icon-\[ph--file-duotone\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M208 88h-56V32Z' opacity='.2'/%3E%3Cpath d='m213.66 82.34-56-56A8 8 0 0 0 152 24H56a16 16 0 0 0-16 16v176a16 16 0 0 0 16 16h144a16 16 0 0 0 16-16V88a8 8 0 0 0-2.34-5.66M160 51.31 188.69 80H160ZM200 216H56V40h88v48a8 8 0 0 0 8 8h48z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--file-duotone\],.icon-\[ph--files-duotone\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--files-duotone\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M208 72v112a8 8 0 0 1-8 8h-24v-88l-40-40H80V40a8 8 0 0 1 8-8h80Z' opacity='.2'/%3E%3Cpath d='m213.66 66.34-40-40A8 8 0 0 0 168 24H88a16 16 0 0 0-16 16v16H56a16 16 0 0 0-16 16v144a16 16 0 0 0 16 16h112a16 16 0 0 0 16-16v-16h16a16 16 0 0 0 16-16V72a8 8 0 0 0-2.34-5.66M168 216H56V72h76.69L168 107.31zm32-32h-16v-80a8 8 0 0 0-2.34-5.66l-40-40A8 8 0 0 0 136 56H88V40h76.69L200 75.31Zm-56-32a8 8 0 0 1-8 8H88a8 8 0 0 1 0-16h48a8 8 0 0 1 8 8m0 32a8 8 0 0 1-8 8H88a8 8 0 0 1 0-16h48a8 8 0 0 1 8 8'/%3E%3C/svg%3E")
    }

    .icon-\[ph--folder-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M216 68h-82.61l-26-29.29a20 20 0 0 0-15-6.71H40a20 20 0 0 0-20 20v148.62A19.41 19.41 0 0 0 39.38 220h177.51A19.13 19.13 0 0 0 236 200.89V88a20 20 0 0 0-20-20M44 56h46.61l10.67 12H44Zm168 140H44V92h168Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--folder-bold\],.icon-\[ph--folder-duotone\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--folder-duotone\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M128 80H32V56a8 8 0 0 1 8-8h52.69a8 8 0 0 1 5.65 2.34Z' opacity='.2'/%3E%3Cpath d='M216 72h-84.69L104 44.69A15.86 15.86 0 0 0 92.69 40H40a16 16 0 0 0-16 16v144.62A15.4 15.4 0 0 0 39.38 216h177.51A15.13 15.13 0 0 0 232 200.89V88a16 16 0 0 0-16-16M92.69 56l16 16H40V56ZM216 200H40V88h176Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--folder-simple\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M216 72h-85.33l-27.74-20.8a16.12 16.12 0 0 0-9.6-3.2H40a16 16 0 0 0-16 16v136a16 16 0 0 0 16 16h176.89A15.13 15.13 0 0 0 232 200.89V88a16 16 0 0 0-16-16m0 128H40V64h53.33l29.87 22.4A8 8 0 0 0 128 88h88Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--folder-simple\],.icon-\[ph--folder\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--folder\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M216 72h-84.69L104 44.69A15.86 15.86 0 0 0 92.69 40H40a16 16 0 0 0-16 16v144.62A15.4 15.4 0 0 0 39.38 216h177.51A15.13 15.13 0 0 0 232 200.89V88a16 16 0 0 0-16-16M40 56h52.69l16 16H40Zm176 144H40V88h176Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--game-controller-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M176 116h-24a12 12 0 0 1 0-24h24a12 12 0 0 1 0 24m-72-24h-4v-4a12 12 0 0 0-24 0v4h-4a12 12 0 0 0 0 24h4v4a12 12 0 0 0 24 0v-4h4a12 12 0 0 0 0-24m140.76 110.94a40 40 0 0 1-61 5.35 7 7 0 0 1-.53-.56L144.67 164h-33.34l-38.52 43.73c-.17.19-.35.38-.53.56a40 40 0 0 1-67.66-35.24 1 1 0 0 1 0-.2L21 88.79A63.88 63.88 0 0 1 83.88 36H172a64.08 64.08 0 0 1 62.93 52.48 2 2 0 0 1 0 .19l16.36 84.17a2 2 0 0 1 0 .2 39.74 39.74 0 0 1-6.53 29.9M172 140a40 40 0 0 0 0-80H83.89a39.9 39.9 0 0 0-39.27 33.06 2 2 0 0 0 0 .21l-16.34 84a16 16 0 0 0 13 18.44 16.07 16.07 0 0 0 13.86-4.21l41.76-47.43a12 12 0 0 1 9-4.07Zm55.76 37.31-7-35.95a63.84 63.84 0 0 1-44.27 22.46l24.41 27.72a16 16 0 0 0 26.85-14.23Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--game-controller-bold\],.icon-\[ph--gear-six-bold\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--gear-six-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M128 76a52 52 0 1 0 52 52 52.06 52.06 0 0 0-52-52m0 80a28 28 0 1 1 28-28 28 28 0 0 1-28 28m113.86-49.57a12 12 0 0 0-5.86-8.09l-27.79-15.85-.11-31.31a12 12 0 0 0-4.25-9.12 116 116 0 0 0-38-21.41 12 12 0 0 0-9.68.89L128 37.27 99.83 21.53a12 12 0 0 0-9.7-.9 116.1 116.1 0 0 0-38 21.47 12 12 0 0 0-4.24 9.1l-.14 31.34L20 98.35a12 12 0 0 0-5.85 8.11 110.7 110.7 0 0 0 0 43.11 12 12 0 0 0 5.85 8.09l27.82 15.85.11 31.31a12 12 0 0 0 4.25 9.12 116 116 0 0 0 38 21.41 12 12 0 0 0 9.68-.89L128 218.73l28.14 15.74a12 12 0 0 0 9.7.9 116.1 116.1 0 0 0 38-21.47 12 12 0 0 0 4.24-9.1l.14-31.34 27.81-15.81a12 12 0 0 0 5.85-8.11 110.7 110.7 0 0 0-.02-43.11m-22.63 33.18-26.88 15.28a11.94 11.94 0 0 0-4.55 4.59c-.54 1-1.11 1.93-1.7 2.88a12 12 0 0 0-1.83 6.31l-.14 30.33a91.8 91.8 0 0 1-21.07 11.87l-27.15-15.19a12 12 0 0 0-5.86-1.53h-3.73a12.1 12.1 0 0 0-6.14 1.51L93 210.82A92.3 92.3 0 0 1 71.88 199l-.11-30.24a12 12 0 0 0-1.83-6.32c-.58-.94-1.16-1.91-1.7-2.88A11.9 11.9 0 0 0 63.7 155l-26.9-15.37a86.5 86.5 0 0 1 0-23.24l26.88-15.28a12 12 0 0 0 4.55-4.58c.54-1 1.11-1.94 1.7-2.89a12 12 0 0 0 1.83-6.31L71.87 57a91.8 91.8 0 0 1 21.07-11.83l27.15 15.19a11.9 11.9 0 0 0 6.15 1.52h3.44a12.1 12.1 0 0 0 6.14-1.51L163 45.18A92.3 92.3 0 0 1 184.12 57l.11 30.24a12 12 0 0 0 1.83 6.32c.58.94 1.16 1.91 1.7 2.88a11.9 11.9 0 0 0 4.54 4.56l26.9 15.33a86.5 86.5 0 0 1 .03 23.28'/%3E%3C/svg%3E")
    }

    .icon-\[ph--globe-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M128 20a108 108 0 1 0 108 108A108.12 108.12 0 0 0 128 20m0 187a113.4 113.4 0 0 1-20.39-35h40.82a117 117 0 0 1-10 20.77A108.6 108.6 0 0 1 128 207m-26.49-59a135.4 135.4 0 0 1 0-40h53a135.4 135.4 0 0 1 0 40ZM44 128a83.5 83.5 0 0 1 2.43-20h30.82a160.6 160.6 0 0 0 0 40H46.43A83.5 83.5 0 0 1 44 128m84-79a113.4 113.4 0 0 1 20.39 35h-40.8a117 117 0 0 1 10-20.77A108.6 108.6 0 0 1 128 49m50.73 59h30.82a83.5 83.5 0 0 1 0 40h-30.8a160.6 160.6 0 0 0 0-40Zm20.77-24h-25.79a140.8 140.8 0 0 0-15.5-34.36A84.5 84.5 0 0 1 199.52 84ZM97.79 49.64A140.8 140.8 0 0 0 82.29 84H56.48a84.5 84.5 0 0 1 41.31-34.36M56.48 172h25.81a140.8 140.8 0 0 0 15.5 34.36A84.5 84.5 0 0 1 56.48 172m101.73 34.36a140.8 140.8 0 0 0 15.5-34.36h25.81a84.5 84.5 0 0 1-41.31 34.36'/%3E%3C/svg%3E")
    }

    .icon-\[ph--globe-bold\],.icon-\[ph--handshake-bold\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--handshake-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='m253.88 108.11-25.53-51a20 20 0 0 0-26.83-9L178.34 59.7 131.7 44.58a12.14 12.14 0 0 0-7.4 0L77.66 59.7 54.48 48.11a20 20 0 0 0-26.83 9l-25.53 51a20 20 0 0 0 9 26.83l26.67 13.34 51.18 37.41a12.2 12.2 0 0 0 4.03 1.93l62 16a12.3 12.3 0 0 0 3 .38 12 12 0 0 0 8.48-3.52l52.62-52.62 25.83-12.92a20 20 0 0 0 8.95-26.83m-58.12 29.15-27.52-26a12 12 0 0 0-16.76.26c-9.66 9.74-25.06 16.81-40.81 9.55l38.19-37h22.72l25.81 51.63ZM47.32 71.37 60.59 78l-22 43.9-13.27-6.63Zm107 107.3L101.23 165l-42-30.66L85.17 82.5 128 68.61l1.69.55L90 107.68l-.13.12a20 20 0 0 0 3.4 31c20.95 13.39 46 12.07 66.33-2.73l19.2 18.15Zm63-56.77-22-43.9 13.27-6.63 21.95 43.9ZM118.55 219a12 12 0 0 1-14.62 8.62l-26.6-6.87a12 12 0 0 1-4.08-1.93L48.92 201a12 12 0 0 1 14.16-19.37l22.47 16.42 24.38 6.29a12 12 0 0 1 8.62 14.66'/%3E%3C/svg%3E")
    }

    .icon-\[ph--hash-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M224 84h-43.8l7.61-41.85a12 12 0 0 0-23.62-4.3L155.8 84h-39.6l7.61-41.85a12 12 0 1 0-23.62-4.3L91.8 84H48a12 12 0 0 0 0 24h39.44l-7.27 40H32a12 12 0 0 0 0 24h43.8l-7.61 41.85a12 12 0 0 0 9.66 14A11.4 11.4 0 0 0 80 228a12 12 0 0 0 11.8-9.86l8.4-46.14h39.6l-7.61 41.85a12 12 0 0 0 9.66 14 11.4 11.4 0 0 0 2.16.2 12 12 0 0 0 11.8-9.86L164.2 172H208a12 12 0 0 0 0-24h-39.44l7.27-40H224a12 12 0 0 0 0-24m-79.83 64h-39.61l7.27-40h39.61Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--hash-bold\],.icon-\[ph--heart-bold\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--heart-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M178 36c-20.09 0-37.92 7.93-50 21.56C115.92 43.93 98.09 36 78 36a66.08 66.08 0 0 0-66 66c0 72.34 105.81 130.14 110.31 132.57a12 12 0 0 0 11.38 0C138.19 232.14 244 174.34 244 102a66.08 66.08 0 0 0-66-66m-5.49 142.36a328.7 328.7 0 0 1-44.51 31.8 328.7 328.7 0 0 1-44.51-31.8C61.82 159.77 36 131.42 36 102a42 42 0 0 1 42-42c17.8 0 32.7 9.4 38.89 24.54a12 12 0 0 0 22.22 0C145.3 69.4 160.2 60 178 60a42 42 0 0 1 42 42c0 29.42-25.82 57.77-47.49 76.36'/%3E%3C/svg%3E")
    }

    .icon-\[ph--heart-fill\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M240 102c0 70-103.79 126.66-108.21 129a8 8 0 0 1-7.58 0C119.79 228.66 16 172 16 102a62.07 62.07 0 0 1 62-62c20.65 0 38.73 8.88 50 23.89C139.27 48.88 157.35 40 178 40a62.07 62.07 0 0 1 62 62'/%3E%3C/svg%3E")
    }

    .icon-\[ph--heart-fill\],.icon-\[ph--highlighter-bold\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--highlighter-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M252.49 107.51a12 12 0 0 0-17 0L192 151l-79-79 43.52-43.51a12 12 0 0 0-17-17L93.17 57.86a20 20 0 0 0-4.72 20.72L69.17 97.86a20 20 0 0 0 0 28.28L71 128l-55.49 55.51a12 12 0 0 0 4.7 19.87l72 24A11.8 11.8 0 0 0 96 228a12 12 0 0 0 8.49-3.52L136 193l1.86 1.86a20 20 0 0 0 28.28 0l19.27-19.27a20.3 20.3 0 0 0 6.59 1.13 19.86 19.86 0 0 0 14.14-5.86l46.35-46.34a12 12 0 0 0 0-17.01M92.76 202.27l-46.55-15.51L88 145l31 31ZM152 175l-55.51-55.48L89 112l15-15 63 63Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--house-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='m222.14 105.85-80-80a20 20 0 0 0-28.28 0l-80 80A19.86 19.86 0 0 0 28 120v96a12 12 0 0 0 12 12h64a12 12 0 0 0 12-12v-52h24v52a12 12 0 0 0 12 12h64a12 12 0 0 0 12-12v-96a19.86 19.86 0 0 0-5.86-14.15M204 204h-40v-52a12 12 0 0 0-12-12h-48a12 12 0 0 0-12 12v52H52v-82.35l76-76 76 76Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--house-bold\],.icon-\[ph--house-duotone\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--house-duotone\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M216 120v96h-64v-64h-48v64H40v-96a8 8 0 0 1 2.34-5.66l80-80a8 8 0 0 1 11.32 0l80 80A8 8 0 0 1 216 120' opacity='.2'/%3E%3Cpath d='m219.31 108.68-80-80a16 16 0 0 0-22.62 0l-80 80A15.87 15.87 0 0 0 32 120v96a8 8 0 0 0 8 8h64a8 8 0 0 0 8-8v-56h32v56a8 8 0 0 0 8 8h64a8 8 0 0 0 8-8v-96a15.87 15.87 0 0 0-4.69-11.32M208 208h-48v-56a8 8 0 0 0-8-8h-48a8 8 0 0 0-8 8v56H48v-88l80-80 80 80Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--image-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M144 96a16 16 0 1 1 16 16 16 16 0 0 1-16-16m92-40v144a20 20 0 0 1-20 20H40a20 20 0 0 1-20-20V56a20 20 0 0 1 20-20h176a20 20 0 0 1 20 20M44 60v79.72l33.86-33.86a20 20 0 0 1 28.28 0L147.31 147l17.18-17.17a20 20 0 0 1 28.28 0L212 149.09V60Zm0 136h118.34L92 125.66l-48 48Zm168 0v-13l-33.37-33.37L164.28 164l32 32Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--image-bold\],.icon-\[ph--image-broken-bold\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--image-broken-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M231 112a12 12 0 0 0-10.81-1.65l-23.81 7.93a12 12 0 0 0-7.34 6.93l-13.67 34.18-34.18 13.67a12 12 0 0 0-6.93 7.34l-7.93 23.81a12 12 0 0 0 11.4 15.79H216a20 20 0 0 0 20-20v-78.27a12 12 0 0 0-5-9.73m-19 84h-57.62l.91-2.73 33.79-13.51a12 12 0 0 0 6.68-6.68l13.51-33.79 2.73-.91Zm4-160H40a20 20 0 0 0-20 20v144a20 20 0 0 0 20 20h55.57a12 12 0 0 0 11.43-8.21L123.21 163l35.09-14a12 12 0 0 0 6.7-6.7l14-35.09L227.79 91A12 12 0 0 0 236 79.57V56a20 20 0 0 0-20-20M102.2 150.16 86.92 196H44v-22.34l48-48 17.14 17.14a12 12 0 0 0-6.94 7.36M212 70.92 166.16 86.2a12 12 0 0 0-7.35 6.93l-14.2 35.48-11.22 4.49-27.25-27.24a20 20 0 0 0-28.28 0L44 139.72V60h168Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--image-broken\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M216 40H40a16 16 0 0 0-16 16v144a16 16 0 0 0 16 16h64a8 8 0 0 0 7.59-5.47l14.83-44.48L163 151.43a8.07 8.07 0 0 0 4.46-4.46l14.62-36.55 44.48-14.83A8 8 0 0 0 232 88V56a16 16 0 0 0-16-16M112.41 157.47 98.23 200H40v-28l52-52 30.42 30.42-5.42 2.15a8 8 0 0 0-4.59 4.9M216 82.23l-42.53 14.18a8 8 0 0 0-4.9 4.62l-14.72 36.82-15.27 6.15-35.27-35.27a16 16 0 0 0-22.62 0L40 149.37V56h176Zm12.68 33a8 8 0 0 0-7.21-1.1l-23.8 7.94a8 8 0 0 0-4.9 4.61l-14.31 35.77-35.77 14.31a8 8 0 0 0-4.61 4.9l-7.94 23.8a8 8 0 0 0 7.59 10.54H216a16 16 0 0 0 16-16v-78.27a8 8 0 0 0-3.32-6.49ZM216 200h-67.17l3.25-9.75 35.51-14.2a8.07 8.07 0 0 0 4.46-4.46l14.2-35.51 9.75-3.25Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--image-broken\],.icon-\[ph--images-bold\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--images-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M160 88a16 16 0 1 1 16 16 16 16 0 0 1-16-16m76-32v104a20 20 0 0 1-20 20h-12v20a20 20 0 0 1-20 20H40a20 20 0 0 1-20-20V88a20 20 0 0 1 20-20h20V56a20 20 0 0 1 20-20h136a20 20 0 0 1 20 20m-56 124H80a20 20 0 0 1-20-20V92H44v104h136Zm-21.66-24L124 121.66 89.66 156ZM212 60H84v67.72l25.86-25.86a20 20 0 0 1 28.28 0L192.28 156H212Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--info-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M108 84a16 16 0 1 1 16 16 16 16 0 0 1-16-16m128 44A108 108 0 1 1 128 20a108.12 108.12 0 0 1 108 108m-24 0a84 84 0 1 0-84 84 84.09 84.09 0 0 0 84-84m-72 36.68V132a20 20 0 0 0-20-20 12 12 0 0 0-4 23.32V168a20 20 0 0 0 20 20 12 12 0 0 0 4-23.32'/%3E%3C/svg%3E")
    }

    .icon-\[ph--info-bold\],.icon-\[ph--lightbulb-bold\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--lightbulb-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M180 232a12 12 0 0 1-12 12H88a12 12 0 0 1 0-24h80a12 12 0 0 1 12 12m40-128a91.51 91.51 0 0 1-35.17 72.35A12.26 12.26 0 0 0 180 186v2a20 20 0 0 1-20 20H96a20 20 0 0 1-20-20v-2a12 12 0 0 0-4.7-9.51A91.57 91.57 0 0 1 36 104.52C35.73 54.69 76 13.2 125.79 12A92 92 0 0 1 220 104m-24 0a68 68 0 0 0-69.65-68C89.56 36.88 59.8 67.55 60 104.38a67.71 67.71 0 0 0 26.1 53.19A35.87 35.87 0 0 1 100 184h56.1a36.13 36.13 0 0 1 13.9-26.51A67.68 67.68 0 0 0 196 104m-20.07-5.32a48.5 48.5 0 0 0-31.91-40 12 12 0 0 0-8 22.62 24.31 24.31 0 0 1 16.09 20 12 12 0 0 0 23.86-2.64Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--link-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M117.18 188.74a12 12 0 0 1 0 17l-5.12 5.12A58.26 58.26 0 0 1 70.6 228a58.62 58.62 0 0 1-41.46-100.08l34.75-34.75a58.64 58.64 0 0 1 98.56 28.11 12 12 0 1 1-23.37 5.44 34.65 34.65 0 0 0-58.22-16.58l-34.75 34.75A34.62 34.62 0 0 0 70.57 204a34.4 34.4 0 0 0 24.49-10.14l5.11-5.12a12 12 0 0 1 17.01 0M226.83 45.17a58.65 58.65 0 0 0-82.93 0l-5.11 5.11a12 12 0 0 0 17 17l5.12-5.12a34.63 34.63 0 1 1 49 49l-34.81 34.7A34.4 34.4 0 0 1 150.61 156a34.63 34.63 0 0 1-33.69-26.72 12 12 0 0 0-23.38 5.44A58.64 58.64 0 0 0 150.56 180h.05a58.28 58.28 0 0 0 41.47-17.17l34.75-34.75a58.62 58.62 0 0 0 0-82.91'/%3E%3C/svg%3E")
    }

    .icon-\[ph--link-bold\],.icon-\[ph--list-duotone\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--list-duotone\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M216 64v128H40V64Z' opacity='.2'/%3E%3Cpath d='M224 128a8 8 0 0 1-8 8H40a8 8 0 0 1 0-16h176a8 8 0 0 1 8 8M40 72h176a8 8 0 0 0 0-16H40a8 8 0 0 0 0 16m176 112H40a8 8 0 0 0 0 16h176a8 8 0 0 0 0-16'/%3E%3C/svg%3E")
    }

    .icon-\[ph--magic-wand-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M252 152a12 12 0 0 1-12 12h-12v12a12 12 0 0 1-24 0v-12h-12a12 12 0 0 1 0-24h12v-12a12 12 0 0 1 24 0v12h12a12 12 0 0 1 12 12M56 76h12v12a12 12 0 0 0 24 0V76h12a12 12 0 1 0 0-24H92V40a12 12 0 0 0-24 0v12H56a12 12 0 0 0 0 24m128 112h-4v-4a12 12 0 0 0-24 0v4h-4a12 12 0 0 0 0 24h4v4a12 12 0 0 0 24 0v-4h4a12 12 0 0 0 0-24m38.14-105.17L82.82 222.14a20 20 0 0 1-28.28 0l-20.69-20.68a20 20 0 0 1 0-28.29L173.17 33.86a20 20 0 0 1 28.28 0l20.69 20.68a20 20 0 0 1 0 28.29M159 112l-15-15-90.35 90.31 15 15Zm43.31-43.31-15-15L161 80l15 15Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--magic-wand-bold\],.icon-\[ph--magnifying-glass-bold\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--magnifying-glass-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M232.49 215.51 185 168a92.12 92.12 0 1 0-17 17l47.53 47.54a12 12 0 0 0 17-17ZM44 112a68 68 0 1 1 68 68 68.07 68.07 0 0 1-68-68'/%3E%3C/svg%3E")
    }

    .icon-\[ph--map-pin-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M128 60a44 44 0 1 0 44 44 44.05 44.05 0 0 0-44-44m0 64a20 20 0 1 1 20-20 20 20 0 0 1-20 20m0-112a92.1 92.1 0 0 0-92 92c0 77.36 81.64 135.4 85.12 137.83a12 12 0 0 0 13.76 0 259 259 0 0 0 42.18-39C205.15 170.57 220 136.37 220 104a92.1 92.1 0 0 0-92-92m31.3 174.71a249.4 249.4 0 0 1-31.3 30.18 249.4 249.4 0 0 1-31.3-30.18C80 167.37 60 137.31 60 104a68 68 0 0 1 136 0c0 33.31-20 63.37-36.7 82.71'/%3E%3C/svg%3E")
    }

    .icon-\[ph--map-pin-bold\],.icon-\[ph--monitor-bold\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--monitor-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M208 36H48a28 28 0 0 0-28 28v112a28 28 0 0 0 28 28h160a28 28 0 0 0 28-28V64a28 28 0 0 0-28-28m4 140a4 4 0 0 1-4 4H48a4 4 0 0 1-4-4V64a4 4 0 0 1 4-4h160a4 4 0 0 1 4 4Zm-40 52a12 12 0 0 1-12 12H96a12 12 0 0 1 0-24h64a12 12 0 0 1 12 12'/%3E%3C/svg%3E")
    }

    .icon-\[ph--moon-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M236.37 139.4a12 12 0 0 0-12-3A84.07 84.07 0 0 1 119.6 31.59a12 12 0 0 0-15-15 108.86 108.86 0 0 0-54.91 38.48A108 108 0 0 0 136 228a107.1 107.1 0 0 0 64.93-21.69 108.86 108.86 0 0 0 38.44-54.94 12 12 0 0 0-3-11.97m-49.88 47.74A84 84 0 0 1 68.86 69.51a84.9 84.9 0 0 1 23.41-21.22Q92 52.13 92 56a108.12 108.12 0 0 0 108 108q3.87 0 7.71-.27a84.8 84.8 0 0 1-21.22 23.41'/%3E%3C/svg%3E")
    }

    .icon-\[ph--moon-bold\],.icon-\[ph--mountains-bold\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--mountains-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M160 80a32 32 0 1 0-32-32 32 32 0 0 0 32 32m0-40a8 8 0 1 1-8 8 8 8 0 0 1 8-8m94.32 153.88-54.56-92.08a19.85 19.85 0 0 0-17.21-9.8 19.83 19.83 0 0 0-17.2 9.8l-18.7 31.55-37.42-63.5a20 20 0 0 0-34.46 0L1.66 193.91A12 12 0 0 0 12 212h232a12 12 0 0 0 10.32-18.12M92 87.87 108.57 116H75.43ZM33 188l28.28-48h61.44L151 188Zm145.86 0-18.3-31 22-37.1 40.38 68.1Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--mouse-simple-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M144 12h-32a68.07 68.07 0 0 0-68 68v96a68.07 68.07 0 0 0 68 68h32a68.07 68.07 0 0 0 68-68V80a68.07 68.07 0 0 0-68-68m44 164a44.05 44.05 0 0 1-44 44h-32a44.05 44.05 0 0 1-44-44V80a44.05 44.05 0 0 1 44-44h32a44.05 44.05 0 0 1 44 44ZM140 64v48a12 12 0 0 1-24 0V64a12 12 0 0 1 24 0'/%3E%3C/svg%3E")
    }

    .icon-\[ph--mouse-simple-bold\],.icon-\[ph--note-blank-bold\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--note-blank-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M208 28H48a20 20 0 0 0-20 20v160a20 20 0 0 0 20 20h108.69a19.86 19.86 0 0 0 14.14-5.86l51.31-51.31a19.86 19.86 0 0 0 5.86-14.14V48a20 20 0 0 0-20-20M52 52h152v92h-48a12 12 0 0 0-12 12v48H52Zm116 139v-23h23Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--notepad-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M172 124a12 12 0 0 1-12 12H96a12 12 0 0 1 0-24h64a12 12 0 0 1 12 12m-12 28H96a12 12 0 0 0 0 24h64a12 12 0 0 0 0-24m60-112v160a36 36 0 0 1-36 36H72a36 36 0 0 1-36-36V40a12 12 0 0 1 12-12h24v-4a12 12 0 0 1 24 0v4h20v-4a12 12 0 0 1 24 0v4h20v-4a12 12 0 0 1 24 0v4h24a12 12 0 0 1 12 12m-24 12h-12v4a12 12 0 0 1-24 0v-4h-20v4a12 12 0 0 1-24 0v-4H96v4a12 12 0 0 1-24 0v-4H60v148a12 12 0 0 0 12 12h112a12 12 0 0 0 12-12Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--notepad-bold\],.icon-\[ph--package-bold\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--package-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='m225.6 62.64-88-48.17a19.91 19.91 0 0 0-19.2 0l-88 48.17A20 20 0 0 0 20 80.19v95.62a20 20 0 0 0 10.4 17.55l88 48.17a19.89 19.89 0 0 0 19.2 0l88-48.17a20 20 0 0 0 10.4-17.55V80.19a20 20 0 0 0-10.4-17.55M128 36.57 200 76l-21.43 11.73-72-39.42Zm0 78.83L56 76l25.56-14 72 39.41ZM44 96.79l72 39.4v76.67l-72-39.42Zm96 116.07v-76.67l24-13.13V152a12 12 0 0 0 24 0v-42.08l24-13.13v76.65Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--paper-plane-right-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M233.86 110.48 65.8 14.58a20 20 0 0 0-28.65 24.06L67.33 128l-30.18 89.36A20 20 0 0 0 56 244a20.1 20.1 0 0 0 9.81-2.58l.09-.06 168-96.07a20 20 0 0 0 0-34.81ZM63.19 215.26 88.61 140H144a12 12 0 0 0 0-24H88.61L63.18 40.72l152.76 87.17Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--paper-plane-right-bold\],.icon-\[ph--paper-plane-tilt-bold\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--paper-plane-tilt-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M230.14 25.86a20 20 0 0 0-19.57-5.11l-.22.07L18.44 79a20 20 0 0 0-3.06 37.25L99 157l40.71 83.65a19.81 19.81 0 0 0 18 11.38c.57 0 1.15 0 1.73-.07a19.82 19.82 0 0 0 17.56-14.4l58.18-191.91a1.4 1.4 0 0 0 .07-.22 20 20 0 0 0-5.11-19.57m-73.23 195.21-34.37-70.64 46-45.95a12 12 0 0 0-17-17l-46 46-70.61-34.39L210 46Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--paper-plane-tilt\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M227.32 28.68a16 16 0 0 0-15.66-4.08h-.15L19.57 82.84a16 16 0 0 0-2.49 29.8L102 154l41.3 84.87a15.86 15.86 0 0 0 14.44 9.13q.69 0 1.38-.06a15.88 15.88 0 0 0 14-11.51l58.2-191.94v-.15a16 16 0 0 0-4-15.66m-69.49 203.17-.05.14v-.07l-40.06-82.3 48-48a8 8 0 0 0-11.31-11.31l-48 48-82.33-40.06h-.07.14L216 40Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--paper-plane-tilt\],.icon-\[ph--pause-fill\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--pause-fill\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M216 48v160a16 16 0 0 1-16 16h-40a16 16 0 0 1-16-16V48a16 16 0 0 1 16-16h40a16 16 0 0 1 16 16M96 32H56a16 16 0 0 0-16 16v160a16 16 0 0 0 16 16h40a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16'/%3E%3C/svg%3E")
    }

    .icon-\[ph--pencil-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='m230.14 70.54-44.68-44.69a20 20 0 0 0-28.29 0L33.86 149.17A19.85 19.85 0 0 0 28 163.31V208a20 20 0 0 0 20 20h44.69a19.86 19.86 0 0 0 14.14-5.86L230.14 98.82a20 20 0 0 0 0-28.28M93 180l71-71 11 11-71 71Zm-17-17-11-11 71-71 11 11Zm-24 10 15.51 15.51L83 204H52Zm140-70-39-39 18.34-18.34 39 39Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--pencil-bold\],.icon-\[ph--play-fill\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--play-fill\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M240 128a15.74 15.74 0 0 1-7.6 13.51L88.32 229.65a16 16 0 0 1-16.2.3A15.86 15.86 0 0 1 64 216.13V39.87a15.86 15.86 0 0 1 8.12-13.82 16 16 0 0 1 16.2.3l144.08 88.14A15.74 15.74 0 0 1 240 128'/%3E%3C/svg%3E")
    }

    .icon-\[ph--playlist-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M28 64a12 12 0 0 1 12-12h176a12 12 0 0 1 0 24H40a12 12 0 0 1-12-12m12 76h116a12 12 0 0 0 0-24H40a12 12 0 0 0 0 24m68 40H40a12 12 0 0 0 0 24h68a12 12 0 0 0 0-24m143.49-52.55a12 12 0 0 1-14.94 8L212 128.13V192a36 36 0 1 1-24-33.94V112a12 12 0 0 1 15.45-11.49l40 12a12 12 0 0 1 8.04 14.94M188 192a12 12 0 1 0-12 12 12 12 0 0 0 12-12'/%3E%3C/svg%3E")
    }

    .icon-\[ph--playlist-bold\],.icon-\[ph--plus-bold\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--plus-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M228 128a12 12 0 0 1-12 12h-76v76a12 12 0 0 1-24 0v-76H40a12 12 0 0 1 0-24h76V40a12 12 0 0 1 24 0v76h76a12 12 0 0 1 12 12'/%3E%3C/svg%3E")
    }

    .icon-\[ph--question-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M144 180a16 16 0 1 1-16-16 16 16 0 0 1 16 16m92-52A108 108 0 1 1 128 20a108.12 108.12 0 0 1 108 108m-24 0a84 84 0 1 0-84 84 84.09 84.09 0 0 0 84-84m-84-64c-24.26 0-44 17.94-44 40v4a12 12 0 0 0 24 0v-4c0-8.82 9-16 20-16s20 7.18 20 16-9 16-20 16a12 12 0 0 0-12 12v8a12 12 0 0 0 23.73 2.56C158.31 137.88 172 122.37 172 104c0-22.06-19.74-40-44-40'/%3E%3C/svg%3E")
    }

    .icon-\[ph--question-bold\],.icon-\[ph--repeat-bold\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--repeat-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M20 128a76.08 76.08 0 0 1 76-76h99l-3.52-3.51a12 12 0 1 1 17-17l24 24a12 12 0 0 1 0 17l-24 24a12 12 0 0 1-17-17L195 76H96a52.06 52.06 0 0 0-52 52 12 12 0 0 1-24 0m204-12a12 12 0 0 0-12 12 52.06 52.06 0 0 1-52 52H61l3.52-3.51a12 12 0 1 0-17-17l-24 24a12 12 0 0 0 0 17l24 24a12 12 0 1 0 17-17L61 204h99a76.08 76.08 0 0 0 76-76 12 12 0 0 0-12-12'/%3E%3C/svg%3E")
    }

    .icon-\[ph--rss-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M109.74 146.26A75.53 75.53 0 0 1 132 200a12 12 0 0 1-24 0 52 52 0 0 0-52-52 12 12 0 0 1 0-24 75.5 75.5 0 0 1 53.74 22.26M56 76a12 12 0 0 0 0 24 100 100 0 0 1 100 100 12 12 0 0 0 24 0A124 124 0 0 0 56 76m121.62 2.38A170.85 170.85 0 0 0 56 28a12 12 0 0 0 0 24 147 147 0 0 1 104.65 43.35A147 147 0 0 1 204 200a12 12 0 0 0 24 0 170.85 170.85 0 0 0-50.38-121.62M60 180a16 16 0 1 0 16 16 16 16 0 0 0-16-16'/%3E%3C/svg%3E")
    }

    .icon-\[ph--rss-bold\],.icon-\[ph--rss-simple-bold\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--rss-simple-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M228 192a12 12 0 0 1-24 0c0-77.2-62.8-140-140-140a12 12 0 0 1 0-24c90.43 0 164 73.57 164 164M64 100a12 12 0 0 0 0 24 68.07 68.07 0 0 1 68 68 12 12 0 0 0 24 0 92.1 92.1 0 0 0-92-92m4 72a16 16 0 1 0 16 16 16 16 0 0 0-16-16'/%3E%3C/svg%3E")
    }

    .icon-\[ph--share-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='m232.49 112.49-48 48a12 12 0 0 1-17-17L195 116h-30a84 84 0 0 0-81.36 63 12 12 0 1 1-23.24-6A107.94 107.94 0 0 1 165 92h30l-27.49-27.52a12 12 0 0 1 17-17l48 48a12 12 0 0 1-.02 17.01M192 204H44V88a12 12 0 0 0-24 0v128a12 12 0 0 0 12 12h160a12 12 0 0 0 0-24'/%3E%3C/svg%3E")
    }

    .icon-\[ph--share-bold\],.icon-\[ph--shield-check-bold\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--shield-check-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M208 36H48a20 20 0 0 0-20 20v56c0 54.29 26.32 87.22 48.4 105.29 23.71 19.39 47.44 26 48.44 26.29a12.1 12.1 0 0 0 6.32 0c1-.28 24.73-6.9 48.44-26.29 22.08-18.07 48.4-51 48.4-105.29V56a20 20 0 0 0-20-20m-4 76c0 35.71-13.09 64.69-38.91 86.15A126.3 126.3 0 0 1 128 219.38a126.1 126.1 0 0 1-37.09-21.23C65.09 176.69 52 147.71 52 112V60h152ZM79.51 144.49a12 12 0 1 1 17-17L112 143l47.51-47.52a12 12 0 0 1 17 17l-56 56a12 12 0 0 1-17 0Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--shooting-star-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M243.16 68.85a17.4 17.4 0 0 0-15.26-12l-34.52-2.72-13.26-31.47a17.52 17.52 0 0 0-32.24 0l-13.26 31.43-34.51 2.72a17.39 17.39 0 0 0-9.93 30.62l26.17 22.1-8 33a17.46 17.46 0 0 0 26 19L164 143.66l29.59 17.81a17.46 17.46 0 0 0 26-19l-8-33 26.17-22.1a17.3 17.3 0 0 0 5.4-18.52M190.5 96a12 12 0 0 0-3.92 12l6 24.91-22.41-13.5a12.06 12.06 0 0 0-12.38 0l-22.41 13.5 6-24.91a12 12 0 0 0-3.93-12L118 79.48l25.83-2a12 12 0 0 0 10.11-7.3L164 46.2l10.11 23.94a12 12 0 0 0 10.11 7.3l25.82 2Zm-158 88.52a12 12 0 0 1-17-17l51.76-51.75a12 12 0 0 1 17 17Zm63.59-8.57a12 12 0 0 1 0 17l-47.59 47.6a12 12 0 0 1-17-17l47.6-47.59a12 12 0 0 1 16.98-.04Zm62.44 9.56a12 12 0 0 1 0 17l-38 38a12 12 0 0 1-17-17l38-38a12 12 0 0 1 16.99-.03Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--shooting-star-bold\],.icon-\[ph--shuffle-bold\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--shuffle-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M240.49 175.51a12 12 0 0 1 0 17l-24 24a12 12 0 0 1-17-17L203 196h-2.09a76.17 76.17 0 0 1-61.85-31.83l-41.68-58.39A52.1 52.1 0 0 0 55.06 84H32a12 12 0 0 1 0-24h23.06a76.17 76.17 0 0 1 61.85 31.83l41.71 58.39A52.1 52.1 0 0 0 200.94 172H203l-3.52-3.51a12 12 0 0 1 17-17Zm-95.62-72.62a12 12 0 0 0 16.93-1.13A52 52 0 0 1 200.94 84H203l-3.52 3.51a12 12 0 0 0 17 17l24-24a12 12 0 0 0 0-17l-24-24a12 12 0 0 0-17 17L203 60h-2.09a76 76 0 0 0-57.2 26 12 12 0 0 0 1.16 16.89m-33.74 50.22a12 12 0 0 0-16.93 1.13A52 52 0 0 1 55.06 172H32a12 12 0 0 0 0 24h23.06a76 76 0 0 0 57.2-26 12 12 0 0 0-1.13-16.89'/%3E%3C/svg%3E")
    }

    .icon-\[ph--sidebar-duotone\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M88 48v160H40a8 8 0 0 1-8-8V56a8 8 0 0 1 8-8Z' opacity='.2'/%3E%3Cpath d='M216 40H40a16 16 0 0 0-16 16v144a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V56a16 16 0 0 0-16-16M40 152h16a8 8 0 0 0 0-16H40v-16h16a8 8 0 0 0 0-16H40V88h16a8 8 0 0 0 0-16H40V56h40v144H40Zm176 48H96V56h120z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--sidebar-duotone\],.icon-\[ph--sign-out-bold\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--sign-out-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M124 216a12 12 0 0 1-12 12H48a12 12 0 0 1-12-12V40a12 12 0 0 1 12-12h64a12 12 0 0 1 0 24H60v152h52a12 12 0 0 1 12 12m108.49-96.49-40-40a12 12 0 0 0-17 17L195 116h-83a12 12 0 0 0 0 24h83l-19.52 19.51a12 12 0 0 0 17 17l40-40a12 12 0 0 0 .01-17'/%3E%3C/svg%3E")
    }

    .icon-\[ph--skip-back-fill\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M208 47.88v160.24a16 16 0 0 1-24.43 13.43L64 146.77V216a8 8 0 0 1-16 0V40a8 8 0 0 1 16 0v69.23l119.57-74.78A15.95 15.95 0 0 1 208 47.88'/%3E%3C/svg%3E")
    }

    .icon-\[ph--skip-back-fill\],.icon-\[ph--skip-forward-fill\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--skip-forward-fill\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M208 40v176a8 8 0 0 1-16 0v-69.23L72.43 221.55A15.95 15.95 0 0 1 48 208.12V47.88a15.95 15.95 0 0 1 24.43-13.43L192 109.23V40a8 8 0 0 1 16 0'/%3E%3C/svg%3E")
    }

    .icon-\[ph--sparkle-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='m199 125.31-49.88-18.39L130.69 57a19.92 19.92 0 0 0-37.38 0l-18.39 49.92L25 125.31a19.92 19.92 0 0 0 0 37.38l49.88 18.39L93.31 231a19.92 19.92 0 0 0 37.38 0l18.39-49.88L199 162.69a19.92 19.92 0 0 0 0-37.38m-63.38 35.16a12 12 0 0 0-7.11 7.11L112 212.28l-16.47-44.7a12 12 0 0 0-7.11-7.11L43.72 144l44.7-16.47a12 12 0 0 0 7.11-7.11L112 75.72l16.47 44.7a12 12 0 0 0 7.11 7.11l44.7 16.47ZM140 40a12 12 0 0 1 12-12h12V16a12 12 0 0 1 24 0v12h12a12 12 0 0 1 0 24h-12v12a12 12 0 0 1-24 0V52h-12a12 12 0 0 1-12-12m112 48a12 12 0 0 1-12 12h-4v4a12 12 0 0 1-24 0v-4h-4a12 12 0 0 1 0-24h4v-4a12 12 0 0 1 24 0v4h4a12 12 0 0 1 12 12'/%3E%3C/svg%3E")
    }

    .icon-\[ph--sparkle-bold\],.icon-\[ph--sparkle-fill\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--sparkle-fill\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M208 144a15.78 15.78 0 0 1-10.42 14.94L146 178l-19 51.62a15.92 15.92 0 0 1-29.88 0L78 178l-51.62-19a15.92 15.92 0 0 1 0-29.88L78 110l19-51.62a15.92 15.92 0 0 1 29.88 0L146 110l51.62 19A15.78 15.78 0 0 1 208 144m-56-96h16v16a8 8 0 0 0 16 0V48h16a8 8 0 0 0 0-16h-16V16a8 8 0 0 0-16 0v16h-16a8 8 0 0 0 0 16m88 32h-8v-8a8 8 0 0 0-16 0v8h-8a8 8 0 0 0 0 16h8v8a8 8 0 0 0 16 0v-8h8a8 8 0 0 0 0-16'/%3E%3C/svg%3E")
    }

    .icon-\[ph--speaker-high-fill\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M160 32.25v191.44a8.29 8.29 0 0 1-3.91 7.18 8 8 0 0 1-9-.56l-65.57-51a4 4 0 0 1-1.52-3.15V79.84a4 4 0 0 1 1.55-3.15l65.57-51a8 8 0 0 1 10 .16 8.27 8.27 0 0 1 2.88 6.4M60 80H32a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h28a4 4 0 0 0 4-4V84a4 4 0 0 0-4-4m126.77 20.84a8 8 0 0 0-.72 11.3 24 24 0 0 1 0 31.72 8 8 0 1 0 12 10.58 40 40 0 0 0 0-52.88 8 8 0 0 0-11.31-.72Zm40.89-26.17a8 8 0 1 0-11.92 10.66 64 64 0 0 1 0 85.34 8 8 0 1 0 11.92 10.66 80 80 0 0 0 0-106.66'/%3E%3C/svg%3E")
    }

    .icon-\[ph--speaker-high-fill\],.icon-\[ph--speaker-low-fill\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--speaker-low-fill\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M160 32.25v191.44a8.29 8.29 0 0 1-3.91 7.18 8 8 0 0 1-9-.56l-65.57-51a4 4 0 0 1-1.52-3.15V79.84a4 4 0 0 1 1.55-3.15l65.57-51a8 8 0 0 1 10 .16 8.27 8.27 0 0 1 2.88 6.4M60 80H32a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h28a4 4 0 0 0 4-4V84a4 4 0 0 0-4-4m138 21.56a8 8 0 1 0-12 10.58 24 24 0 0 1 0 31.72 8 8 0 1 0 12 10.58 40 40 0 0 0 0-52.88'/%3E%3C/svg%3E")
    }

    .icon-\[ph--speaker-x-fill\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M245.66 146.34a8 8 0 0 1-11.32 11.32L216 139.31l-18.34 18.35a8 8 0 0 1-11.32-11.32L204.69 128l-18.35-18.34a8 8 0 0 1 11.32-11.32L216 116.69l18.34-18.35a8 8 0 0 1 11.32 11.32L227.31 128ZM60 80H32a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h28a4 4 0 0 0 4-4V84a4 4 0 0 0-4-4m97.15-54.15a8 8 0 0 0-10-.16l-65.57 51A4 4 0 0 0 80 79.84v96.32a4 4 0 0 0 1.55 3.15l65.57 51a8 8 0 0 0 9 .56 8.29 8.29 0 0 0 3.91-7.18V32.25a8.27 8.27 0 0 0-2.91-6.4Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--speaker-x-fill\],.icon-\[ph--spinner-bold\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--spinner-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M140 32v32a12 12 0 0 1-24 0V32a12 12 0 0 1 24 0m33.25 62.75a12 12 0 0 0 8.49-3.52l22.63-22.63a12 12 0 0 0-17-17l-22.6 22.66a12 12 0 0 0 8.48 20.49M224 116h-32a12 12 0 0 0 0 24h32a12 12 0 0 0 0-24m-42.26 48.77a12 12 0 1 0-17 17l22.63 22.63a12 12 0 0 0 17-17ZM128 180a12 12 0 0 0-12 12v32a12 12 0 0 0 24 0v-32a12 12 0 0 0-12-12m-53.74-15.23L51.63 187.4a12 12 0 0 0 17 17l22.63-22.63a12 12 0 1 0-17-17M76 128a12 12 0 0 0-12-12H32a12 12 0 0 0 0 24h32a12 12 0 0 0 12-12m-7.4-76.37a12 12 0 1 0-17 17l22.66 22.6a12 12 0 0 0 17-17Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--spinner\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M136 32v32a8 8 0 0 1-16 0V32a8 8 0 0 1 16 0m37.25 58.75a8 8 0 0 0 5.66-2.35l22.63-22.62a8 8 0 0 0-11.32-11.32L167.6 77.09a8 8 0 0 0 5.65 13.66M224 120h-32a8 8 0 0 0 0 16h32a8 8 0 0 0 0-16m-45.09 47.6a8 8 0 0 0-11.31 11.31l22.62 22.63a8 8 0 0 0 11.32-11.32ZM128 184a8 8 0 0 0-8 8v32a8 8 0 0 0 16 0v-32a8 8 0 0 0-8-8m-50.91-16.4-22.63 22.62a8 8 0 0 0 11.32 11.32l22.62-22.63a8 8 0 0 0-11.31-11.31M72 128a8 8 0 0 0-8-8H32a8 8 0 0 0 0 16h32a8 8 0 0 0 8-8m-6.22-73.54a8 8 0 0 0-11.32 11.32L77.09 88.4A8 8 0 0 0 88.4 77.09Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--spinner\],.icon-\[ph--squares-four-bold\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--squares-four-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M100 36H56a20 20 0 0 0-20 20v44a20 20 0 0 0 20 20h44a20 20 0 0 0 20-20V56a20 20 0 0 0-20-20m-4 60H60V60h36Zm104-60h-44a20 20 0 0 0-20 20v44a20 20 0 0 0 20 20h44a20 20 0 0 0 20-20V56a20 20 0 0 0-20-20m-4 60h-36V60h36Zm-96 40H56a20 20 0 0 0-20 20v44a20 20 0 0 0 20 20h44a20 20 0 0 0 20-20v-44a20 20 0 0 0-20-20m-4 60H60v-36h36Zm104-60h-44a20 20 0 0 0-20 20v44a20 20 0 0 0 20 20h44a20 20 0 0 0 20-20v-44a20 20 0 0 0-20-20m-4 60h-36v-36h36Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--stack-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M234.36 170a12 12 0 0 1-4.36 16.37l-96 56a12 12 0 0 1-12.1 0l-96-56a12 12 0 0 1 12.09-20.74l90 52.48L218 165.63a12 12 0 0 1 16.36 4.37M218 117.63l-90 52.48-89.95-52.48A12 12 0 0 0 26 138.37l96 56a12 12 0 0 0 12.1 0l96-56a12 12 0 0 0-12.1-20.74M20 80a12 12 0 0 1 6-10.37l96-56a12.06 12.06 0 0 1 12.1 0l96 56a12 12 0 0 1 0 20.74l-96 56a12 12 0 0 1-12.1 0l-96-56A12 12 0 0 1 20 80m35.82 0L128 122.11 200.18 80 128 37.89Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--stack-bold\],.icon-\[ph--star-bold\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--star-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M243 96a20.33 20.33 0 0 0-17.74-14l-56.59-4.57-21.84-52.81a20.36 20.36 0 0 0-37.66 0L87.35 77.44 30.76 82a20.45 20.45 0 0 0-11.66 35.88l43.18 37.24-13.2 55.7A20.37 20.37 0 0 0 79.57 233L128 203.19 176.43 233a20.39 20.39 0 0 0 30.49-22.15l-13.2-55.7 43.18-37.24A20.43 20.43 0 0 0 243 96m-70.47 45.7a12 12 0 0 0-3.84 11.86L181.58 208l-47.29-29.08a12 12 0 0 0-12.58 0L74.42 208l12.89-54.4a12 12 0 0 0-3.84-11.86l-42.27-36.5 55.4-4.47a12 12 0 0 0 10.13-7.38L128 41.89l21.27 51.5a12 12 0 0 0 10.13 7.38l55.4 4.47Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--sun-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M116 36V20a12 12 0 0 1 24 0v16a12 12 0 0 1-24 0m80 92a68 68 0 1 1-68-68 68.07 68.07 0 0 1 68 68m-24 0a44 44 0 1 0-44 44 44.05 44.05 0 0 0 44-44M51.51 68.49a12 12 0 1 0 17-17l-12-12a12 12 0 0 0-17 17Zm0 119-12 12a12 12 0 0 0 17 17l12-12a12 12 0 1 0-17-17M196 72a12 12 0 0 0 8.49-3.51l12-12a12 12 0 0 0-17-17l-12 12A12 12 0 0 0 196 72m8.49 115.51a12 12 0 0 0-17 17l12 12a12 12 0 0 0 17-17ZM48 128a12 12 0 0 0-12-12H20a12 12 0 0 0 0 24h16a12 12 0 0 0 12-12m80 80a12 12 0 0 0-12 12v16a12 12 0 0 0 24 0v-16a12 12 0 0 0-12-12m108-92h-16a12 12 0 0 0 0 24h16a12 12 0 0 0 0-24'/%3E%3C/svg%3E")
    }

    .icon-\[ph--sun-bold\],.icon-\[ph--tag-bold\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--tag-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='m246.15 133.18-99.32-99.32A19.85 19.85 0 0 0 132.69 28H40a12 12 0 0 0-12 12v92.69a19.85 19.85 0 0 0 5.86 14.14l99.32 99.32a20 20 0 0 0 28.28 0l84.69-84.69a20 20 0 0 0 0-28.28m-98.83 93.17L52 131V52h79l95.32 95.32ZM104 88a16 16 0 1 1-16-16 16 16 0 0 1 16 16'/%3E%3C/svg%3E")
    }

    .icon-\[ph--tag-simple-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='m250 121.34-45.64-68.43A20 20 0 0 0 187.72 44H40a20 20 0 0 0-20 20v128a20 20 0 0 0 20 20h147.72a20 20 0 0 0 16.64-8.91L250 134.66a12 12 0 0 0 0-13.32M185.58 188H44V68h141.58l40 60Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--tag-simple-bold\],.icon-\[ph--television-bold\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--television-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M216 60h-59l27.52-27.52a12 12 0 0 0-17-17L128 55 88.49 15.51a12 12 0 0 0-17 17L99 60H40a20 20 0 0 0-20 20v120a20 20 0 0 0 20 20h176a20 20 0 0 0 20-20V80a20 20 0 0 0-20-20M44 84h84v112H44Zm168 112h-60V84h60Zm-44-80a16 16 0 1 1 16 16 16 16 0 0 1-16-16m32 48a16 16 0 1 1-16-16 16 16 0 0 1 16 16'/%3E%3C/svg%3E")
    }

    .icon-\[ph--train-regional-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='m227.58 116.84-22.4-82.1A20 20 0 0 0 185.89 20H70.11a20 20 0 0 0-19.29 14.74l-22.4 82.1a12.1 12.1 0 0 0 0 6.32l22.4 82.1A20 20 0 0 0 70.11 220H72l-9.6 12.8a12 12 0 1 0 19.2 14.4L102 220h52l20.4 27.2a12 12 0 0 0 19.2-14.4L184 220h1.89a20 20 0 0 0 19.29-14.74l22.4-82.1a12.1 12.1 0 0 0 0-6.32M73.17 44h109.66L201 110.53l-73 13.27-73-13.27Zm-16.58 91.21L116 146v50H73.17ZM182.83 196H140v-50l59.41-10.8ZM84 88a12 12 0 0 1 12-12h64a12 12 0 0 1 0 24H96a12 12 0 0 1-12-12'/%3E%3C/svg%3E")
    }

    .icon-\[ph--train-regional-bold\],.icon-\[ph--user-bold\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--user-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M234.38 210a123.36 123.36 0 0 0-60.78-53.23 76 76 0 1 0-91.2 0A123.36 123.36 0 0 0 21.62 210a12 12 0 1 0 20.77 12c18.12-31.32 50.12-50 85.61-50s67.49 18.69 85.61 50a12 12 0 0 0 20.77-12M76 96a52 52 0 1 1 52 52 52.06 52.06 0 0 1-52-52'/%3E%3C/svg%3E")
    }

    .icon-\[ph--user-circle-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M128 20a108 108 0 1 0 108 108A108.12 108.12 0 0 0 128 20M79.57 196.57a60 60 0 0 1 96.86 0 83.72 83.72 0 0 1-96.86 0M100 120a28 28 0 1 1 28 28 28 28 0 0 1-28-28m94 59.94a83.5 83.5 0 0 0-29-23.42 52 52 0 1 0-74 0 83.5 83.5 0 0 0-29 23.42 84 84 0 1 1 131.9 0Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--user-circle-bold\],.icon-\[ph--warning-bold\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--warning-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M240.26 186.1 152.81 34.23a28.74 28.74 0 0 0-49.62 0L15.74 186.1a27.45 27.45 0 0 0 0 27.71A28.31 28.31 0 0 0 40.55 228h174.9a28.31 28.31 0 0 0 24.79-14.19 27.45 27.45 0 0 0 .02-27.71m-20.8 15.7a4.46 4.46 0 0 1-4 2.2H40.55a4.46 4.46 0 0 1-4-2.2 3.56 3.56 0 0 1 0-3.73L124 46.2a4.77 4.77 0 0 1 8 0l87.44 151.87a3.56 3.56 0 0 1 .02 3.73M116 136v-32a12 12 0 0 1 24 0v32a12 12 0 0 1-24 0m28 40a16 16 0 1 1-16-16 16 16 0 0 1 16 16'/%3E%3C/svg%3E")
    }

    .icon-\[ph--warning-circle-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M128 20a108 108 0 1 0 108 108A108.12 108.12 0 0 0 128 20m0 192a84 84 0 1 1 84-84 84.09 84.09 0 0 1-84 84m-12-80V80a12 12 0 0 1 24 0v52a12 12 0 0 1-24 0m28 40a16 16 0 1 1-16-16 16 16 0 0 1 16 16'/%3E%3C/svg%3E")
    }

    .icon-\[ph--warning-circle-bold\],.icon-\[ph--x-bold\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ph--x-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M208.49 191.51a12 12 0 0 1-17 17L128 145l-63.51 63.49a12 12 0 0 1-17-17L111 128 47.51 64.49a12 12 0 0 1 17-17L128 111l63.51-63.52a12 12 0 0 1 17 17L145 128Z'/%3E%3C/svg%3E")
    }

    .icon-\[ph--x-circle-bold\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M168.49 104.49 145 128l23.52 23.51a12 12 0 0 1-17 17L128 145l-23.51 23.52a12 12 0 0 1-17-17L111 128l-23.49-23.51a12 12 0 0 1 17-17L128 111l23.51-23.52a12 12 0 0 1 17 17ZM236 128A108 108 0 1 1 128 20a108.12 108.12 0 0 1 108 108m-24 0a84 84 0 1 0-84 84 84.09 84.09 0 0 0 84-84'/%3E%3C/svg%3E")
    }

    .icon-\[ph--x-circle-bold\],.icon-\[ri--creative-commons-line\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[ri--creative-commons-line\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M9 8c1.104 0 2.105.448 2.829 1.173l-1.414 1.413a2 2 0 1 0 0 2.828l1.413 1.414A4.001 4.001 0 0 1 5 12c0-2.208 1.792-4 4-4m9.829 1.173A4.001 4.001 0 0 0 12 12a4.001 4.001 0 0 0 6.828 2.828l-1.414-1.414a2 2 0 1 1 0-2.828zM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12m10-8a8 8 0 1 0 0 16 8 8 0 0 0 0-16'/%3E%3C/svg%3E")
    }

    .icon-\[solar--cloud-cross-bold-duotone\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 18v-.09c0-.865 0-1.659.087-2.304.095-.711.32-1.463.938-2.08.618-.619 1.37-.844 2.08-.94.646-.086 1.44-.086 2.306-.086h.178c.866 0 1.66 0 2.305.087.711.095 1.463.32 2.08.938.619.618.844 1.37.94 2.08.085.637.086 1.416.086 2.267 2.573-.55 4.5-2.812 4.5-5.52 0-2.47-1.607-4.572-3.845-5.337C17.837 4.194 15.415 2 12.476 2 9.32 2 6.762 4.528 6.762 7.647c0 .69.125 1.35.354 1.962a4.4 4.4 0 0 0-.83-.08C3.919 9.53 2 11.426 2 13.765S3.919 18 6.286 18z' opacity='.5'/%3E%3Cpath fill-rule='evenodd' d='M12 22c-1.886 0-2.828 0-3.414-.586S8 19.886 8 18s0-2.828.586-3.414S10.114 14 12 14s2.828 0 3.414.586S16 16.114 16 18s0 2.828-.586 3.414S13.886 22 12 22m-1.306-6.25a.667.667 0 0 0-.943.944L11.057 18l-1.306 1.306a.667.667 0 0 0 .943.943L12 18.943l1.306 1.306a.667.667 0 0 0 .943-.943L12.943 18l1.306-1.306a.667.667 0 0 0-.943-.943L12 17.057z' clip-rule='evenodd'/%3E%3C/svg%3E")
    }

    .icon-\[solar--cloud-cross-bold-duotone\],.icon-\[solar--document-add-bold-duotone\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[solar--document-add-bold-duotone\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M3 10c0-3.771 0-5.657 1.172-6.828S7.229 2 11 2h2c3.771 0 5.657 0 6.828 1.172S21 6.229 21 10v4c0 3.771 0 5.657-1.172 6.828S16.771 22 13 22h-2c-3.771 0-5.657 0-6.828-1.172S3 17.771 3 14z' opacity='.5'/%3E%3Cpath d='M16.519 16.501c.175-.136.334-.295.651-.612l3.957-3.958c.096-.095.052-.26-.075-.305a4.3 4.3 0 0 1-1.644-1.034 4.3 4.3 0 0 1-1.034-1.644c-.045-.127-.21-.171-.305-.075L14.11 12.83c-.317.317-.476.476-.612.651q-.243.311-.412.666c-.095.2-.166.414-.308.84l-.184.55-.292.875-.273.82a.584.584 0 0 0 .738.738l.82-.273.875-.292.55-.184c.426-.142.64-.212.84-.308q.355-.17.666-.412m5.849-5.809a2.163 2.163 0 1 0-3.06-3.059l-.126.128a.52.52 0 0 0-.148.465c.02.107.055.265.12.452.13.375.376.867.839 1.33s.955.709 1.33.839c.188.065.345.1.452.12a.53.53 0 0 0 .465-.148z'/%3E%3Cpath fill-rule='evenodd' d='M7.25 9A.75.75 0 0 1 8 8.25h6.5a.75.75 0 0 1 0 1.5H8A.75.75 0 0 1 7.25 9m0 4a.75.75 0 0 1 .75-.75h3a.75.75 0 0 1 0 1.5H8a.75.75 0 0 1-.75-.75m0 4a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 0 1.5H8a.75.75 0 0 1-.75-.75' clip-rule='evenodd'/%3E%3C/svg%3E")
    }

    .icon-\[solar--ghost-smile-bold-duotone\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M22 12v7.206a1.727 1.727 0 0 1-2.5 1.544 2.89 2.89 0 0 0-2.896.18 2.89 2.89 0 0 1-3.208 0l-.353-.234a1.88 1.88 0 0 0-2.086 0l-.353.235a2.89 2.89 0 0 1-3.208 0 2.89 2.89 0 0 0-2.897-.18A1.727 1.727 0 0 1 2 19.205V12C2 6.477 6.477 2 12 2s10 4.477 10 10' opacity='.5'/%3E%3Cpath d='M9.447 14.398a.75.75 0 1 0-.894 1.204A5.77 5.77 0 0 0 12 16.75a5.77 5.77 0 0 0 3.447-1.148.75.75 0 1 0-.894-1.204A4.27 4.27 0 0 1 12 15.25a4.27 4.27 0 0 1-2.553-.852M16 9.5c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5.448-1.5 1-1.5 1 .672 1 1.5M9 11c.552 0 1-.672 1-1.5S9.552 8 9 8s-1 .672-1 1.5.448 1.5 1 1.5'/%3E%3C/svg%3E")
    }

    .icon-\[solar--ghost-smile-bold-duotone\],.icon-\[solar--lock-keyhole-bold-duotone\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[solar--lock-keyhole-bold-duotone\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M2 16c0-2.828 0-4.243.879-5.121C3.757 10 5.172 10 8 10h8c2.828 0 4.243 0 5.121.879C22 11.757 22 13.172 22 16s0 4.243-.879 5.121C20.243 22 18.828 22 16 22H8c-2.828 0-4.243 0-5.121-.879C2 20.243 2 18.828 2 16' opacity='.5'/%3E%3Cpath d='M12 18a2 2 0 1 0 0-4 2 2 0 0 0 0 4M6.75 8a5.25 5.25 0 0 1 10.5 0v2.004c.567.005 1.064.018 1.5.05V8a6.75 6.75 0 0 0-13.5 0v2.055a24 24 0 0 1 1.5-.051z'/%3E%3C/svg%3E")
    }

    .icon-\[solar--reel-bold-duotone\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M2 12c0 5.523 4.477 10 10 10h9.25a.75.75 0 0 0 0-1.5h-3.98A9.99 9.99 0 0 0 22 12c0-5.523-4.477-10-10-10S2 6.477 2 12' clip-rule='evenodd' opacity='.5'/%3E%3Cpath d='M16.5 10.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3M9 12a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0m4.5-4.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0 9a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0'/%3E%3C/svg%3E")
    }

    .icon-\[solar--reel-bold-duotone\],.icon-\[solar--rewind-back-bold-duotone\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[solar--rewind-back-bold-duotone\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M22 6.426v11.148c0 1.847-1.6 3.015-2.903 2.118L13 15.232V8.768l6.097-4.46C20.399 3.411 22 4.58 22 6.426' clip-rule='evenodd' opacity='.5'/%3E%3Cpath d='M13 7.123v9.754c0 1.616-1.467 2.638-2.661 1.853L2.92 13.853c-1.228-.807-1.228-2.899 0-3.706l7.42-4.877c1.193-.785 2.66.237 2.66 1.853'/%3E%3C/svg%3E")
    }

    .icon-\[solar--rewind-forward-bold-duotone\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M2 6.426v11.148c0 1.847 1.6 3.015 2.903 2.118L11 15.232V8.768l-6.097-4.46C3.601 3.411 2 4.58 2 6.426' clip-rule='evenodd' opacity='.5'/%3E%3Cpath d='M11 7.123v9.754c0 1.616 1.467 2.638 2.661 1.853l7.418-4.877c1.228-.807 1.228-2.899 0-3.706L13.66 5.27C12.467 4.485 11 5.507 11 7.123'/%3E%3C/svg%3E")
    }

    .icon-\[solar--rewind-forward-bold-duotone\],.icon-\[solar--server-bold-duotone\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[solar--server-bold-duotone\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M6 13h12c1.886 0 2.828 0 3.414.586S22 15.114 22 17s0 2.828-.586 3.414S19.886 21 18 21H6c-1.886 0-2.828 0-3.414-.586S2 18.886 2 17s0-2.828.586-3.414S4.114 13 6 13M6 3h12c1.886 0 2.828 0 3.414.586S22 5.114 22 7s0 2.828-.586 3.414S19.886 11 18 11H6c-1.886 0-2.828 0-3.414-.586S2 8.886 2 7s0-2.828.586-3.414S4.114 3 6 3' opacity='.5'/%3E%3Cpath d='M10.25 7a.75.75 0 0 1 .75-.75h7a.75.75 0 0 1 0 1.5h-7a.75.75 0 0 1-.75-.75m-5 0A.75.75 0 0 1 6 6.25h2a.75.75 0 0 1 0 1.5H6A.75.75 0 0 1 5.25 7m5 10a.75.75 0 0 1 .75-.75h7a.75.75 0 0 1 0 1.5h-7a.75.75 0 0 1-.75-.75m-5 0a.75.75 0 0 1 .75-.75h2a.75.75 0 0 1 0 1.5H6a.75.75 0 0 1-.75-.75'/%3E%3C/svg%3E")
    }

    .icon-\[solar--siren-rounded-bold-duotone\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M4 16v5.25h16V16a8 8 0 1 0-16 0' opacity='.5'/%3E%3Cpath d='M12.75 2a.75.75 0 0 0-1.5 0v3a.75.75 0 0 0 1.5 0zm8.78 3.47a.75.75 0 0 1 0 1.06l-1.5 1.5a.75.75 0 1 1-1.06-1.06l1.5-1.5a.75.75 0 0 1 1.06 0m-18 0a.75.75 0 0 0-1.06 1.06l1.5 1.5a.75.75 0 0 0 1.06-1.06zm11.042 5.335a.75.75 0 0 0-.563 1.39c.814.33 1.466.981 1.795 1.796a.75.75 0 1 0 1.39-.563 4.76 4.76 0 0 0-2.622-2.623M12.75 18.8a1.5 1.5 0 1 0-1.5 0v2.45h1.5zM4 21.25H2a.75.75 0 0 0 0 1.5h20a.75.75 0 0 0 0-1.5z'/%3E%3C/svg%3E")
    }

    .icon-\[solar--siren-rounded-bold-duotone\],.icon-\[solar--sleeping-circle-bold-duotone\] {
        background-color: currentColor;
        display: inline-block;
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: 1em
    }

    .icon-\[solar--sleeping-circle-bold-duotone\] {
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M11 23c5.523 0 10-4.477 10-10S16.523 3 11 3 1 7.477 1 13s4.477 10 10 10' opacity='.5'/%3E%3Cpath fill-rule='evenodd' d='M16.375 4.65a.75.75 0 1 1-.75-1.3l3.464-2a.75.75 0 0 1 1.1.844l-.996 3.715 1.896-1.094a.75.75 0 1 1 .75 1.299l-3.464 2a.75.75 0 0 1-1.1-.844l.996-3.715zm-3.702 1.5a.75.75 0 1 1 .75-1.3l1.732 1a.75.75 0 0 1-.181 1.374l-.983.264.164.095a.75.75 0 1 1-.75 1.299l-1.732-1a.75.75 0 0 1 .18-1.374l.984-.264z' clip-rule='evenodd'/%3E%3Cpath d='M11 18a1 1 0 1 0 0-2 1 1 0 0 0 0 2m.999-6.558a.75.75 0 0 1 1.059.056c.465.517.965.752 1.442.752s.977-.235 1.442-.751a.75.75 0 1 1 1.116 1.002c-.67.744-1.548 1.249-2.558 1.249s-1.889-.505-2.558-1.248a.75.75 0 0 1 .056-1.06m-5.94.057A.75.75 0 1 0 4.942 12.5c.67.744 1.548 1.249 2.558 1.249s1.889-.505 2.558-1.248a.75.75 0 1 0-1.116-1.004c-.464.517-.965.752-1.442.752s-.977-.235-1.442-.751'/%3E%3C/svg%3E")
    }

    .icon-\[solar--user-block-bold-duotone\] {
        height: 1em;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        width: 1em;
        --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 10a4 4 0 1 0 0-8 4 4 0 0 0 0 8'/%3E%3Cpath fill-rule='evenodd' d='M16.5 15.75a2.75 2.75 0 0 0-2.383 4.123l3.756-3.756a2.74 2.74 0 0 0-1.373-.367m2.42 1.442-3.728 3.728a2.75 2.75 0 0 0 3.728-3.728M12.25 18.5a4.25 4.25 0 1 1 8.5 0 4.25 4.25 0 0 1-8.5 0' clip-rule='evenodd'/%3E%3Cpath d='M17.996 14.521a4.25 4.25 0 0 0-3.979 7.429Q13.107 22 12 22c-8 0-8-2.015-8-4.5S7.582 13 12 13c2.387 0 4.53.588 5.996 1.521' opacity='.4'/%3E%3C/svg%3E");
        background-color: currentColor;
        display: inline-block;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%
    }

    .alert {
        border-color: var(--alert-border-color,var(--color-base-200));
        border-width: var(--border)
    }

    .block {
        display: block
    }

    .flex {
        display: flex
    }

    .grid {
        display: grid
    }

    .hidden {
        display: none
    }

    .inline {
        display: inline
    }

    .inline-flex {
        display: inline-flex
    }

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

    .-translate-y-2 {
        --tw-translate-y: calc(var(--spacing)*-2)
    }

    .-translate-y-2,.translate-y-0 {
        translate: var(--tw-translate-x)var(--tw-translate-y)
    }

    .translate-y-0 {
        --tw-translate-y: calc(var(--spacing)*0)
    }

    .scale-95 {
        --tw-scale-x: 95%;
        --tw-scale-y: 95%;
        --tw-scale-z: 95%
    }

    .scale-100,.scale-95 {
        scale: var(--tw-scale-x)var(--tw-scale-y)
    }

    .scale-100 {
        --tw-scale-x: 100%;
        --tw-scale-y: 100%;
        --tw-scale-z: 100%
    }

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

    .animate-spin {
        animation: var(--animate-spin)
    }

    .resize {
        resize: both
    }

    .items-center {
        align-items: center
    }

    .justify-center {
        justify-content: center
    }

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

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

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

    .bg-right {
        background-position: 100%
    }

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

    .text-4xl {
        font-size: var(--text-4xl);
        line-height: var(--tw-leading,var(--text-4xl--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))
    }

    .opacity-0 {
        opacity: 0
    }

    .opacity-20 {
        opacity: .2
    }

    .opacity-50 {
        opacity: .5
    }

    .opacity-100 {
        opacity: 1
    }

    .shadow-lg {
        --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);
        box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)
    }

    .transition {
        transition-duration: var(--tw-duration,var(--default-transition-duration));
        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,content-visibility,overlay,pointer-events;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function))
    }

    .duration-150 {
        --tw-duration: .15s;
        transition-duration: .15s
    }

    .duration-200 {
        --tw-duration: .2s;
        transition-duration: .2s
    }

    .ease-in {
        --tw-ease: var(--ease-in);
        transition-timing-function: var(--ease-in)
    }

    .ease-out {
        --tw-ease: var(--ease-out);
        transition-timing-function: var(--ease-out)
    }

    .prose-gray {
        --tw-prose-body: oklch(37.3% .034 259.733);
        --tw-prose-headings: oklch(21% .034 264.665);
        --tw-prose-lead: oklch(44.6% .03 256.802);
        --tw-prose-links: oklch(21% .034 264.665);
        --tw-prose-bold: oklch(21% .034 264.665);
        --tw-prose-counters: oklch(55.1% .027 264.364);
        --tw-prose-bullets: oklch(87.2% .01 258.338);
        --tw-prose-hr: oklch(92.8% .006 264.531);
        --tw-prose-quotes: oklch(21% .034 264.665);
        --tw-prose-quote-borders: oklch(92.8% .006 264.531);
        --tw-prose-captions: oklch(55.1% .027 264.364);
        --tw-prose-kbd: oklch(21% .034 264.665);
        --tw-prose-kbd-shadows: oklab(21% -.00316127 -.0338527/.1);
        --tw-prose-code: oklch(21% .034 264.665);
        --tw-prose-pre-code: oklch(92.8% .006 264.531);
        --tw-prose-pre-bg: oklch(27.8% .033 256.848);
        --tw-prose-th-borders: oklch(87.2% .01 258.338);
        --tw-prose-td-borders: oklch(92.8% .006 264.531);
        --tw-prose-invert-body: oklch(87.2% .01 258.338);
        --tw-prose-invert-headings: #fff;
        --tw-prose-invert-lead: oklch(70.7% .022 261.325);
        --tw-prose-invert-links: #fff;
        --tw-prose-invert-bold: #fff;
        --tw-prose-invert-counters: oklch(70.7% .022 261.325);
        --tw-prose-invert-bullets: oklch(44.6% .03 256.802);
        --tw-prose-invert-hr: oklch(37.3% .034 259.733);
        --tw-prose-invert-quotes: oklch(96.7% .003 264.542);
        --tw-prose-invert-quote-borders: oklch(37.3% .034 259.733);
        --tw-prose-invert-captions: oklch(70.7% .022 261.325);
        --tw-prose-invert-kbd: #fff;
        --tw-prose-invert-kbd-shadows: #ffffff1a;
        --tw-prose-invert-code: #fff;
        --tw-prose-invert-pre-code: oklch(87.2% .01 258.338);
        --tw-prose-invert-pre-bg: #00000080;
        --tw-prose-invert-th-borders: oklch(44.6% .03 256.802);
        --tw-prose-invert-td-borders: oklch(37.3% .034 259.733)
    }

    .prose-neutral {
        --tw-prose-body: oklch(37.1% 0 0);
        --tw-prose-headings: oklch(20.5% 0 0);
        --tw-prose-lead: oklch(43.9% 0 0);
        --tw-prose-links: oklch(20.5% 0 0);
        --tw-prose-bold: oklch(20.5% 0 0);
        --tw-prose-counters: oklch(55.6% 0 0);
        --tw-prose-bullets: oklch(87% 0 0);
        --tw-prose-hr: oklch(92.2% 0 0);
        --tw-prose-quotes: oklch(20.5% 0 0);
        --tw-prose-quote-borders: oklch(92.2% 0 0);
        --tw-prose-captions: oklch(55.6% 0 0);
        --tw-prose-kbd: oklch(20.5% 0 0);
        --tw-prose-kbd-shadows: oklab(20.5% 0 0/.1);
        --tw-prose-code: oklch(20.5% 0 0);
        --tw-prose-pre-code: oklch(92.2% 0 0);
        --tw-prose-pre-bg: oklch(26.9% 0 0);
        --tw-prose-th-borders: oklch(87% 0 0);
        --tw-prose-td-borders: oklch(92.2% 0 0);
        --tw-prose-invert-body: oklch(87% 0 0);
        --tw-prose-invert-headings: #fff;
        --tw-prose-invert-lead: oklch(70.8% 0 0);
        --tw-prose-invert-links: #fff;
        --tw-prose-invert-bold: #fff;
        --tw-prose-invert-counters: oklch(70.8% 0 0);
        --tw-prose-invert-bullets: oklch(43.9% 0 0);
        --tw-prose-invert-hr: oklch(37.1% 0 0);
        --tw-prose-invert-quotes: oklch(97% 0 0);
        --tw-prose-invert-quote-borders: oklch(37.1% 0 0);
        --tw-prose-invert-captions: oklch(70.8% 0 0);
        --tw-prose-invert-kbd: #fff;
        --tw-prose-invert-kbd-shadows: #ffffff1a;
        --tw-prose-invert-code: #fff;
        --tw-prose-invert-pre-code: oklch(87% 0 0);
        --tw-prose-invert-pre-bg: #00000080;
        --tw-prose-invert-th-borders: oklch(43.9% 0 0);
        --tw-prose-invert-td-borders: oklch(37.1% 0 0)
    }

    .prose-slate {
        --tw-prose-body: oklch(37.2% .044 257.287);
        --tw-prose-headings: oklch(20.8% .042 265.755);
        --tw-prose-lead: oklch(44.6% .043 257.281);
        --tw-prose-links: oklch(20.8% .042 265.755);
        --tw-prose-bold: oklch(20.8% .042 265.755);
        --tw-prose-counters: oklch(55.4% .046 257.417);
        --tw-prose-bullets: oklch(86.9% .022 252.894);
        --tw-prose-hr: oklch(92.9% .013 255.508);
        --tw-prose-quotes: oklch(20.8% .042 265.755);
        --tw-prose-quote-borders: oklch(92.9% .013 255.508);
        --tw-prose-captions: oklch(55.4% .046 257.417);
        --tw-prose-kbd: oklch(20.8% .042 265.755);
        --tw-prose-kbd-shadows: oklab(20.8% -.00310889 -.0418848/.1);
        --tw-prose-code: oklch(20.8% .042 265.755);
        --tw-prose-pre-code: oklch(92.9% .013 255.508);
        --tw-prose-pre-bg: oklch(27.9% .041 260.031);
        --tw-prose-th-borders: oklch(86.9% .022 252.894);
        --tw-prose-td-borders: oklch(92.9% .013 255.508);
        --tw-prose-invert-body: oklch(86.9% .022 252.894);
        --tw-prose-invert-headings: #fff;
        --tw-prose-invert-lead: oklch(70.4% .04 256.788);
        --tw-prose-invert-links: #fff;
        --tw-prose-invert-bold: #fff;
        --tw-prose-invert-counters: oklch(70.4% .04 256.788);
        --tw-prose-invert-bullets: oklch(44.6% .043 257.281);
        --tw-prose-invert-hr: oklch(37.2% .044 257.287);
        --tw-prose-invert-quotes: oklch(96.8% .007 247.896);
        --tw-prose-invert-quote-borders: oklch(37.2% .044 257.287);
        --tw-prose-invert-captions: oklch(70.4% .04 256.788);
        --tw-prose-invert-kbd: #fff;
        --tw-prose-invert-kbd-shadows: #ffffff1a;
        --tw-prose-invert-code: #fff;
        --tw-prose-invert-pre-code: oklch(86.9% .022 252.894);
        --tw-prose-invert-pre-bg: #00000080;
        --tw-prose-invert-th-borders: oklch(44.6% .043 257.281);
        --tw-prose-invert-td-borders: oklch(37.2% .044 257.287)
    }

    .prose-stone {
        --tw-prose-body: oklch(37.4% .01 67.558);
        --tw-prose-headings: oklch(21.6% .006 56.043);
        --tw-prose-lead: oklch(44.4% .011 73.639);
        --tw-prose-links: oklch(21.6% .006 56.043);
        --tw-prose-bold: oklch(21.6% .006 56.043);
        --tw-prose-counters: oklch(55.3% .013 58.071);
        --tw-prose-bullets: oklch(86.9% .005 56.366);
        --tw-prose-hr: oklch(92.3% .003 48.717);
        --tw-prose-quotes: oklch(21.6% .006 56.043);
        --tw-prose-quote-borders: oklch(92.3% .003 48.717);
        --tw-prose-captions: oklch(55.3% .013 58.071);
        --tw-prose-kbd: oklch(21.6% .006 56.043);
        --tw-prose-kbd-shadows: oklab(21.6% .00335142 .00497674/.1);
        --tw-prose-code: oklch(21.6% .006 56.043);
        --tw-prose-pre-code: oklch(92.3% .003 48.717);
        --tw-prose-pre-bg: oklch(26.8% .007 34.298);
        --tw-prose-th-borders: oklch(86.9% .005 56.366);
        --tw-prose-td-borders: oklch(92.3% .003 48.717);
        --tw-prose-invert-body: oklch(86.9% .005 56.366);
        --tw-prose-invert-headings: #fff;
        --tw-prose-invert-lead: oklch(70.9% .01 56.259);
        --tw-prose-invert-links: #fff;
        --tw-prose-invert-bold: #fff;
        --tw-prose-invert-counters: oklch(70.9% .01 56.259);
        --tw-prose-invert-bullets: oklch(44.4% .011 73.639);
        --tw-prose-invert-hr: oklch(37.4% .01 67.558);
        --tw-prose-invert-quotes: oklch(97% .001 106.424);
        --tw-prose-invert-quote-borders: oklch(37.4% .01 67.558);
        --tw-prose-invert-captions: oklch(70.9% .01 56.259);
        --tw-prose-invert-kbd: #fff;
        --tw-prose-invert-kbd-shadows: #ffffff1a;
        --tw-prose-invert-code: #fff;
        --tw-prose-invert-pre-code: oklch(86.9% .005 56.366);
        --tw-prose-invert-pre-bg: #00000080;
        --tw-prose-invert-th-borders: oklch(44.4% .011 73.639);
        --tw-prose-invert-td-borders: oklch(37.4% .01 67.558)
    }

    .prose-zinc {
        --tw-prose-body: oklch(37% .013 285.805);
        --tw-prose-headings: oklch(21% .006 285.885);
        --tw-prose-lead: oklch(44.2% .017 285.786);
        --tw-prose-links: oklch(21% .006 285.885);
        --tw-prose-bold: oklch(21% .006 285.885);
        --tw-prose-counters: oklch(55.2% .016 285.938);
        --tw-prose-bullets: oklch(87.1% .006 286.286);
        --tw-prose-hr: oklch(92% .004 286.32);
        --tw-prose-quotes: oklch(21% .006 285.885);
        --tw-prose-quote-borders: oklch(92% .004 286.32);
        --tw-prose-captions: oklch(55.2% .016 285.938);
        --tw-prose-kbd: oklch(21% .006 285.885);
        --tw-prose-kbd-shadows: oklab(21% .00164225 -.00577088/.1);
        --tw-prose-code: oklch(21% .006 285.885);
        --tw-prose-pre-code: oklch(92% .004 286.32);
        --tw-prose-pre-bg: oklch(27.4% .006 286.033);
        --tw-prose-th-borders: oklch(87.1% .006 286.286);
        --tw-prose-td-borders: oklch(92% .004 286.32);
        --tw-prose-invert-body: oklch(87.1% .006 286.286);
        --tw-prose-invert-headings: #fff;
        --tw-prose-invert-lead: oklch(70.5% .015 286.067);
        --tw-prose-invert-links: #fff;
        --tw-prose-invert-bold: #fff;
        --tw-prose-invert-counters: oklch(70.5% .015 286.067);
        --tw-prose-invert-bullets: oklch(44.2% .017 285.786);
        --tw-prose-invert-hr: oklch(37% .013 285.805);
        --tw-prose-invert-quotes: oklch(96.7% .001 286.375);
        --tw-prose-invert-quote-borders: oklch(37% .013 285.805);
        --tw-prose-invert-captions: oklch(70.5% .015 286.067);
        --tw-prose-invert-kbd: #fff;
        --tw-prose-invert-kbd-shadows: #ffffff1a;
        --tw-prose-invert-code: #fff;
        --tw-prose-invert-pre-code: oklch(87.1% .006 286.286);
        --tw-prose-invert-pre-bg: #00000080;
        --tw-prose-invert-th-borders: oklch(44.2% .017 285.786);
        --tw-prose-invert-td-borders: oklch(37% .013 285.805)
    }

    @media(prefers-color-scheme: dark) {
        .dark\:bg-gray-700 {
            background-color:var(--color-gray-700)
        }
    }
}

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

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

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

    50% {
        padding: 3px
    }
}

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

    to {
        opacity: 1;
        scale: 1
    }
}

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

    to {
        background-position: -50%
    }
}

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

@property --tw-translate-x {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

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

@property --tw-translate-z {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-scale-x {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-scale-y {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-scale-z {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@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-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: 0
}

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

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

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

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

.light,:root {
    --hue-theme: 220deg;
    --c-text: hsl(var(--hue-theme) 0% 0%);
    --c-text-1: hsl(var(--hue-theme) 0% 20%);
    --c-text-2: hsl(var(--hue-theme) 0% 40%);
    --c-text-3: hsl(var(--hue-theme) 0% 70%);
    --c-bg: hsl(var(--hue-theme) 0% 100%);
    --c-bg-1: hsl(var(--hue-theme) 20% 98%);
    --c-bg-2: hsl(var(--hue-theme) 10% 95%);
    --c-bg-3: hsl(var(--hue-theme) 10% 92%);
    --c-bg-soft: hsl(var(--hue-theme) 20% 20%/10%);
    --c-border: hsl(var(--hue-theme) 10% 91%);
    --c-bg-a50: hsl(var(--hue-theme) 20% 98%/50%);
    --c-bg-a80: hsl(var(--hue-theme) 20% 98%/80%);
    --c-primary: hsl(var(--hue-theme) 100% 55%);
    --c-primary-soft: hsl(var(--hue-theme) 100% 60%/15%);
    --c-accent: #52e0e0;
    --ld-bg-blur: var(--c-bg-1);
    --ld-bg-card: var(--c-bg);
    --ld-bg-active: var(--c-bg);
    --ld-shadow: var(--c-bg-soft);
    color-scheme: light dark
}

.dark {
    --c-text: hsl(var(--hue-theme) 0% 100%);
    --c-text-1: hsl(var(--hue-theme) 0% 90%);
    --c-text-2: hsl(var(--hue-theme) 0% 70%);
    --c-text-3: hsl(var(--hue-theme) 0% 50%);
    --c-bg: hsl(var(--hue-theme) 0% 7%);
    --c-bg-1: hsl(var(--hue-theme) 10% 10%);
    --c-bg-2: hsl(var(--hue-theme) 10% 14%);
    --c-bg-3: hsl(var(--hue-theme) 10% 18%);
    --c-bg-soft: hsl(var(--hue-theme) 100% 95%/15%);
    --c-border: hsl(var(--hue-theme) 10% 20%);
    --c-bg-a50: hsl(var(--hue-theme) 10% 10%/50%);
    --c-bg-a80: hsl(var(--hue-theme) 10% 10%/80%);
    --c-primary: hsl(var(--hue-theme) 100% 70%);
    --c-primary-soft: hsl(var(--hue-theme) 100% 60%/20%);
    --ld-bg-blur: var(--c-bg-a80);
    --ld-bg-card: var(--c-bg-3);
    --ld-bg-active: var(--c-primary-soft);
    --ld-shadow: var(--c-bg-a50);
    color-scheme: dark
}

:root {
    --font-basic: "InterVariable","Noto Sans SC-Local",ui-sans-serif,"sans-serif","Noto Sans SC",system-ui,sans-serif;
    --font-serif: "Noto Serif SC-Local","Noto Serif SC",serif;
    --font-creative: "快看世界体","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
    --font-logo: "Logo Font","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
    --font-links-title: "Links Title Font","PingFang SC","Microsoft YaHei","MiSans",system-ui,sans-serif;
    --font-stroke-free: "Logo Font","PingFang SC","Microsoft YaHei","MiSans",system-ui,sans-serif;
    --font-monospace: ui-monospace,"JetBrains Mono","Cascadia Code","Consolas","monospace",var(--font-basic),monospace
}

@media(max-resolution: 1.2dppx) {
    :root {
        --font-basic:"InterVariable",system-ui,sans-serif
    }
}

@supports (box-decoration-break: clone) {
    @font-face {
        font-family:Noto Sans SC-Local;
        font-weight: 100 900;
        src: local("Noto Sans SC")
    }

    @font-face {
        font-family: "Noto Serif SC-Local";
        font-weight: 100 900;
        src: local("Noto Serif SC")
    }
}

:root {
    --max-bezier-to-full: cubic-bezier(.5,0,1,.5);
    --max-bezier-to-collapse: cubic-bezier(0,.5,.5,1)
}

.float-in-enter-active,.float-in-leave-active {
    transition: all .2s!important
}

.float-in-leave-active {
    position: absolute!important
}

.float-in-enter-from,.float-in-leave-to {
    opacity: 0;
    transform: translateY(var(--float-distance,10%))
}

.float-in-move {
    transition: transform .2s!important
}

.collapse-enter-active,.collapse-leave-active {
    overflow: hidden;
    overflow: clip;
    transition: max-height .1s
}

.collapse-enter-from,.collapse-leave-to {
    max-height: 0;
    transition-timing-function: var(--max-bezier-to-collapse)
}

.collapse-enter-to,.collapse-leave-from {
    max-height: 50vh;
    transition-timing-function: var(--max-bezier-to-full)
}

::view-transition-new(root),::view-transition-old(root) {
    animation: none;
    mix-blend-mode: normal
}

::view-transition-old(root) {
    z-index: 1
}

::view-transition-new(root) {
    z-index: 9999
}

[data-theme-transition=dark]::view-transition-old(root) {
    z-index: 9999
}

[data-theme-transition=dark]::view-transition-new(root) {
    z-index: 1
}

::view-transition-new(root) {
    animation: clip-in .5s ease-in
}

@keyframes clip-in {
    0% {
        clip-path: circle(0 at var(--x) var(--y))
    }

    to {
        clip-path: circle(150% at var(--x) var(--y))
    }
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0
    }

    to {
        background-position: -200% 0
    }
}

@view-transition {
    navigation: auto
}

@keyframes fade-scale-out {
    0% {
        filter: blur(0);
        opacity: 1;
        transform: scale(1)
    }

    to {
        filter: blur(4px);
        opacity: 0;
        transform: scale(.95)
    }
}

@keyframes fade-scale-in {
    0% {
        filter: blur(4px);
        opacity: 0;
        transform: scale(1.02)
    }

    to {
        filter: blur(0);
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes sweep-out {
    0% {
        clip-path: inset(0 0 0 0)
    }

    to {
        clip-path: inset(0 100% 0 0)
    }
}

@keyframes sweep-in {
    0% {
        clip-path: inset(0 0 0 100%)
    }

    to {
        clip-path: inset(0 0 0 0)
    }
}

html:not([data-theme-transition]):not([data-page-transition])::view-transition-old(root),html:not([data-theme-transition])[data-page-transition=fade-scale]::view-transition-old(root) {
    animation: fade-scale-out .3s ease-out both
}

html:not([data-theme-transition]):not([data-page-transition])::view-transition-new(root),html:not([data-theme-transition])[data-page-transition=fade-scale]::view-transition-new(root) {
    animation: fade-scale-in .4s ease-out both
}

html:not([data-theme-transition])[data-page-transition=sweep]::view-transition-old(root) {
    animation: sweep-out .5s ease-in-out both;
    z-index: 1
}

html:not([data-theme-transition])[data-page-transition=sweep]::view-transition-new(root) {
    animation: sweep-in .5s ease-in-out .1s both;
    z-index: 2
}

html:not([data-theme-transition])[data-page-transition=sweep]::view-transition {
    background: #0b0b0b
}

@view-transition {
    html[data-page-transition=none] {
        navigation: none
    }
}

:root {
    --start: left;
    --end: right;
    --transform-start-far: translateX(-100%);
    --transform-end-far: translateX(100%);
    --halo-search-widget-base-font-size: 1rem;
    --halo-search-widget-base-font-family: var(--font-basic,sans-serif);
    --halo-search-widget-base-rounded: .75rem;
    --halo-search-widget-base-bg-color: var(--c-bg);
    --halo-search-widget-primary-color: var(--c-primary);
    --halo-search-widget-muted-color: var(--c-text-3);
    --halo-search-widget-content-color: var(--c-text);
    --halo-search-widget-modal-bg-color: var(--ld-bg-card);
    --halo-search-widget-modal-layer-color: rgba(0,0,0,.5);
    --halo-search-widget-hit-bg-color: var(--c-bg-soft);
    --halo-search-widget-divider-color: var(--c-border);
    --halo-search-widget-kbd-border-color: var(--c-border);
    --halo-search-widget-kbd-shadow: 0 2px 0 var(--c-border);
    background-color: var(--c-bg-1);
    font-family: var(--font-basic,sans-serif);
    font-synthesis: style;
    line-height: 1.4;
    overflow-wrap: break-word;
    text-autospace: normal;
    text-size-adjust: none;
    color: var(--c-text-1);
    font-variant-alternates: styleset(open-digits,disambiguation,round-quotes-and-commas);
    scroll-behavior: smooth;
    scroll-padding: 2rem;
    scrollbar-color: var(--c-text-3) transparent;
    transition: color .1s,background-color .2s;
    -webkit-tap-highlight-color: var(--c-primary-soft)
}

:root:dir(rtl) {
    --start: right;
    --end: left;
    --transform-start-far: translateX(100%);
    --transform-end-far: translateX(-100%)
}

@media(prefers-reduced-motion:reduce) {
    :root {
        scroll-behavior: auto;
        transition: none
    }
}

* {
    border: none;
    margin: 0;
    padding: 0
}

*,:after,:before {
    box-sizing: border-box
}

::selection {
    background-color: var(--c-primary-soft)
}

a {
    color: currentcolor;
    text-decoration: none
}

code,pre {
    font-family: var(--font-monospace);
    text-autospace: no-autospace
}

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

[x-cloak] {
    display: none!important
}

button {
    cursor: pointer
}

button>.iconify:only-child {
    display: block
}

button:disabled {
    cursor: auto
}

button,input,textarea {
    background: none;
    color: currentcolor;
    font: inherit
}

:where(.iconify) {
    display: inline-block;
    flex-shrink: 0;
    font-size: 1.2em;
    vertical-align: sub
}

.rtl-flip:dir(rtl) {
    transform: scaleX(-1)
}

.light [class^="iconify i-catppuccin:"] {
    filter: invert(.7) hue-rotate(180deg) saturate(4)
}

.i-simple-icons\:mdnwebdocs {
    transform: scale(.8)
}

img {
    display: inline-block;
    overflow: hidden;
    overflow: clip;
    transform: scale(1)
}

img:before {
    background-color: var(--c-border);
    color: var(--c-text-3);
    content: attr(alt);
    display: grid;
    font: 700 1.5rem/1.2 var(--font-serif);
    inset: 0;
    overflow: visible;
    padding: .5em;
    place-content: center;
    position: absolute;
    text-align: center;
    text-shadow: none;
    word-break: normal
}

.tippy-box {
    animation: float-in .2s;
    background-color: var(--ld-bg-card);
    border-radius: .5em;
    box-shadow: 0 0 1rem var(--ld-shadow);
    color: var(--c-text-2);
    font-size: .8rem;
    line-height: 1.4;
    padding: .3em .6em
}

.tippy-box[data-state=hidden] {
    opacity: 0
}

.tippy-box>.tippy-svg-arrow {
    fill: var(--ld-bg-card)
}

.shiki>.line>span {
    font-style: var(--shiki-light-font-style)
}

.dark .shiki>.line>span {
    background-color: var(--shiki-dark-bg)!important;
    color: var(--shiki-dark)!important;
    font-style: var(--shiki-dark-font-style)
}

.shiki>.line>.indent {
    background-image: linear-gradient(to right,var(--c-border) .1em,transparent .1em);
    display: inline-block
}

.shiki>.line>.space:before,.shiki>.line>.tab:before {
    display: inline-block;
    opacity: .3;
    pointer-events: none;
    width: 0
}

.shiki>.line>.space+.space:before,.shiki>.line>.space:is(:first-child,:last-child):before,.shiki>.line>:not(.space)+.space:has(+.space):before {
    content: "·"
}

.shiki>.line>.tab:before {
    content: "⇥"
}

.card {
    background-color: var(--ld-bg-card);
    border-radius: .5em;
    box-shadow: 0 .1em .2em var(--ld-shadow);
    display: block;
    overflow: hidden;
    overflow: clip;
    transition: all .2s
}

.card:hover {
    box-shadow: 0 .5em 1em var(--ld-shadow);
    transform: translateY(-2px)
}

.gradient-card {
    border-radius: .5rem;
    position: relative;
    z-index: 0
}

.gradient-card:before {
    background: linear-gradient(var(--c-bg-a80),var(--c-bg-a80)) padding-box,linear-gradient(45deg,var(--c-accent),var(--c-primary-soft)) border-box;
    border: 2px solid transparent;
    border-radius: inherit;
    content: "";
    inset: 0;
    opacity: 0;
    position: absolute;
    transition: opacity .2s;
    z-index: -1
}

.gradient-card.active,.gradient-card:hover {
    color: var(--c-text-1)
}

.gradient-card.active:before,.gradient-card:hover:before {
    opacity: 1
}

.scrollcheck-x,.scrollcheck-y {
    scrollbar-width: thin
}

.scrollcheck-x::-webkit-scrollbar,.scrollcheck-y::-webkit-scrollbar {
    background-color: var(--c-bg-2);
    cursor: default;
    height: 6px;
    width: 6px
}

.scrollcheck-x::-webkit-scrollbar-thumb,.scrollcheck-y::-webkit-scrollbar-thumb {
    background-color: var(--c-bg-soft);
    border-radius: 4px;
    cursor: pointer
}

.scrollcheck-x {
    --start-offset: 0px;
    --scrollbar-height: .5rem;
    --fadeout-width: 2rem;
    animation: scrollcheck-x;
    animation-timeline: scroll(x self);
    overflow-x: auto
}

@keyframes scrollcheck-x {
    0% {
        -webkit-mask-image: linear-gradient(to var(--end),#fff calc(100% - var(--fadeout-width)),transparent),linear-gradient(to top,#fff var(--scrollbar-height),transparent var(--scrollbar-height));
        mask-image: linear-gradient(to var(--end),#fff calc(100% - var(--fadeout-width)),transparent),linear-gradient(to top,#fff var(--scrollbar-height),transparent var(--scrollbar-height))
    }

    0.01%,99.99% {
        -webkit-mask-image: linear-gradient(to var(--end),#fff var(--start-offset),transparent var(--start-offset),#fff calc(var(--start-offset) + var(--fadeout-width)),#fff calc(100% - var(--fadeout-width)),transparent),linear-gradient(to top,#fff var(--scrollbar-height),transparent var(--scrollbar-height));
        mask-image: linear-gradient(to var(--end),#fff var(--start-offset),transparent var(--start-offset),#fff calc(var(--start-offset) + var(--fadeout-width)),#fff calc(100% - var(--fadeout-width)),transparent),linear-gradient(to top,#fff var(--scrollbar-height),transparent var(--scrollbar-height))
    }

    to {
        -webkit-mask-image: linear-gradient(to var(--end),#fff var(--start-offset),transparent var(--start-offset),#fff calc(var(--start-offset) + var(--fadeout-width))),linear-gradient(to top,#fff var(--scrollbar-height),transparent var(--scrollbar-height));
        mask-image: linear-gradient(to var(--end),#fff var(--start-offset),transparent var(--start-offset),#fff calc(var(--start-offset) + var(--fadeout-width))),linear-gradient(to top,#fff var(--scrollbar-height),transparent var(--scrollbar-height))
    }
}

.scrollcheck-y {
    --top-offset: 0px;
    --guessed-scrollbar-width: .5rem;
    --fadeout-height: 2rem;
    animation: scrollcheck-y;
    animation-timeline: scroll(y self);
    overflow-y: auto
}

@keyframes scrollcheck-y {
    0% {
        -webkit-mask-image: linear-gradient(to bottom,#fff calc(100% - var(--fadeout-height)),transparent),linear-gradient(to var(--start),#fff var(--guessed-scrollbar-width),transparent var(--guessed-scrollbar-width));
        mask-image: linear-gradient(to bottom,#fff calc(100% - var(--fadeout-height)),transparent),linear-gradient(to var(--start),#fff var(--guessed-scrollbar-width),transparent var(--guessed-scrollbar-width))
    }

    0.01%,99.99% {
        -webkit-mask-image: linear-gradient(to bottom,#fff var(--top-offset),transparent var(--top-offset),#fff calc(var(--top-offset) + var(--fadeout-height)),#fff calc(100% - var(--fadeout-height)),transparent),linear-gradient(to var(--start),#fff var(--guessed-scrollbar-width),transparent var(--guessed-scrollbar-width));
        mask-image: linear-gradient(to bottom,#fff var(--top-offset),transparent var(--top-offset),#fff calc(var(--top-offset) + var(--fadeout-height)),#fff calc(100% - var(--fadeout-height)),transparent),linear-gradient(to var(--start),#fff var(--guessed-scrollbar-width),transparent var(--guessed-scrollbar-width))
    }

    to {
        -webkit-mask-image: linear-gradient(to bottom,#fff var(--top-offset),transparent var(--top-offset),#fff calc(var(--top-offset) + var(--fadeout-height))),linear-gradient(to var(--start),#fff var(--guessed-scrollbar-width),transparent var(--guessed-scrollbar-width));
        mask-image: linear-gradient(to bottom,#fff var(--top-offset),transparent var(--top-offset),#fff calc(var(--top-offset) + var(--fadeout-height))),linear-gradient(to var(--start),#fff var(--guessed-scrollbar-width),transparent var(--guessed-scrollbar-width))
    }
}

mark {
    animation: line-spread .5s;
    background: linear-gradient(var(--c-primary-soft),var(--c-primary-soft)) no-repeat 0 100%/100% .4em;
    color: var(--c-primary);
    text-decoration: none;
    transition: .2s
}

@keyframes line-spread {
    0% {
        background-size: 0 .3em
    }
}

mark:hover {
    background-size: 100% 50%
}

.mobile-only {
    display: none
}

@media(max-width: 768px) {
    .mobile-only {
        display:revert;
        overflow: hidden
    }
}

.widescreen-only {
    display: none
}

@media(min-width: 1080px) {
    .widescreen-only {
        display:revert
    }
}

.proper-height {
    min-height: 70vh
}

.text-creative,.text-tech {
    font-family: var(--font-creative);
    font-weight: 550
}

.text-story {
    font-family: var(--font-serif)
}

.text-repeat {
    text-shadow: .1em 0 var(--c-bg-soft),.2em 0 var(--c-bg-soft),.3em 0 var(--c-bg-soft),.4em 0 var(--c-bg-soft),.5em 0 var(--c-bg-soft)
}

.text-zoom {
    display: inline-block;
    transform-origin: left bottom
}

@supports (animation-timeline:view()) {
    .text-zoom {
        animation: zoom 1s both;
        animation-timeline: view()
    }
}

@keyframes zoom {
    0% {
        transform: scale(.8)
    }

    to {
        transform: scale(1.25)
    }
}

#clarity-root {
    display: flex;
    justify-content: center;
    min-height: 100vh;
    min-width: 0
}

@media(max-width: 768px) {
    #clarity-root {
        display:block
    }
}

#z-sidebar {
    margin-inline-end:1rem}

@media(max-width: 1080px) {
    #z-sidebar {
        margin-inline-end:0
    }
}

#content {
    display: flex;
    flex: 1;
    max-width: 1080px;
    min-width: 0
}

#content>main {
    flex-grow: 1;
    margin-inline-end:1rem;min-width: 0
}

@media(max-width: 1080px) {
    #content>main {
        margin-inline-end:0
    }
}

@media(max-width: 768px) {
    #content {
        flex-direction:column;
        padding-top: env(safe-area-inset-top,0);
        width: 100%
    }
}

@media(max-width: 1080px) {
    #z-aside {
        height:0;
        width: 0
    }
}

.clarity-footer {
    color: var(--c-text-2);
    font-size: .9em;
    margin: 3rem 1rem;
    text-align: center
}

.clarity-footer p {
    margin: .5em
}

#z-panel {
    -webkit-backdrop-filter: blur(.5rem);
    backdrop-filter: blur(.5rem);
    background-color: var(--c-bg-a50,hsla(0,0%,100%,.5));
    border-radius: .5rem;
    bottom: min(2rem,5%);
    font-size: 1.4rem;
    inset-inline-end: min(1rem,5%);
    overflow: hidden;
    position: fixed;
    transition: transform .1s;
    z-index: 100
}

@media(min-width: 768px) {
    #z-panel {
        display:none
    }
}

#z-panel.has-active {
    box-shadow: 0 0 .5rem var(--ld-shadow)
}

#z-panel button {
    display: block;
    padding: .5rem;
    transition: all .2s
}

#z-panel button:hover {
    background-color: var(--c-bg-a80,hsla(0,0%,100%,.8));
    color: var(--c-primary)
}

#z-panel button.active {
    background-color: var(--ld-bg-active);
    color: var(--c-primary)
}

#z-panel #toggle-sidebar {
    display: none
}

@media(max-width: 768px) {
    #z-panel #toggle-sidebar {
        display:block
    }
}

.pc-back-to-top {
    align-items: center;
    background-color: var(--ld-bg-card);
    border: 1px solid var(--c-border);
    border-radius: 50%;
    bottom: 2.5rem;
    box-shadow: 0 4px 12px #00000014;
    cursor: pointer;
    display: flex;
    height: 50px;
    justify-content: center;
    opacity: 0;
    overflow: hidden;
    position: fixed;
    right: 2.5rem;
    transform: translateY(20px);
    transition-duration: .3s;
    visibility: hidden;
    width: 50px;
    z-index: 99
}

@media(max-width: 768px) {
    .pc-back-to-top {
        display:none
    }
}

.pc-back-to-top .svgIcon {
    transition-duration: .3s;
    width: 12px
}

.pc-back-to-top .svgIcon path {
    fill: var(--c-text)
}

.pc-back-to-top:before {
    bottom: -20px;
    color: #fff;
    content: "返回顶部";
    font-size: 0;
    position: absolute;
    white-space: nowrap
}

.pc-back-to-top:hover {
    background-color: var(--c-primary);
    border-color: var(--c-primary);
    border-radius: 50px;
    box-shadow: 0 8px 20px rgba(var(--c-primary-rgb),.3);
    transform: translateY(-4px);
    transition-duration: .3s;
    width: 120px
}

.pc-back-to-top:hover .svgIcon {
    transform: translateY(-200%);
    transition-duration: .3s
}

.pc-back-to-top:hover .svgIcon path {
    fill: #fff
}

.pc-back-to-top:hover:before {
    bottom: unset;
    font-size: 13px;
    opacity: 1;
    transition-duration: .3s
}

.pc-back-to-top.show {
    opacity: 1;
    transform: translateY(0);
    visibility: visible
}

.pc-back-to-top.show:hover {
    transform: translateY(-4px)
}

.clarity-header {
    align-items: center;
    color: var(--c-text);
    display: flex;
    gap: .5em;
    line-height: 1.4;
    margin: clamp(1rem,2rem,5vh) 1rem min(1rem,5vh);
    position: relative;
    -webkit-user-select: none;
    user-select: none
}

.clarity-header.mobile-only {
    display: none
}

@media(max-width: 768px) {
    .clarity-header.mobile-only {
        display:flex;
        margin: 0 1rem .5rem;
        padding-bottom: .5rem;
        padding-top: max(.5rem,env(safe-area-inset-top,0))
    }
}

.clarity-header:hover .emoji-tail {
    opacity: .5
}

.clarity-header:hover .split-char {
    animation-play-state: running
}

.clarity-logo {
    height: 3em
}

.clarity-logo.circle {
    border-radius: 2em;
    box-shadow: 2px 4px 1rem var(--ld-shadow);
    width: 3em
}

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

.header-title {
    font-family: var(--font-logo);
    font-size: 1.5em;
    font-synthesis: none;
    font-weight: 600
}

.header-subtitle {
    font-family: var(--font-logo);
    font-size: .8em;
    opacity: .5
}

@keyframes vf-weight {
    0% {
        font-weight: 600
    }

    38.2% {
        font-weight: 300
    }

    to {
        font-weight: 900
    }
}

@keyframes vf-bevel {
    0% {
        font-variation-settings: "BEVL" 100
    }

    to {
        font-variation-settings: "BEVL" 1
    }
}

.emoji-tail {
    align-content: center;
    display: grid;
    filter: blur(2px);
    font-size: 4rem;
    grid-template-columns: repeat(auto-fit,minmax(0,1fr));
    inset: 0;
    justify-items: center;
    opacity: .2;
    pointer-events: none;
    position: absolute;
    transition: opacity 1s;
    z-index: -2
}

.emoji-tail>.split-char {
    animation: emoji-floating 5s infinite alternate;
    animation-delay: var(--delay);
    animation-play-state: paused
}

@keyframes emoji-floating {
    50% {
        filter: blur(4px);
        transform: translate(-12px,-4px) scale(1.2)
    }

    to {
        filter: blur(1px);
        transform: translate(-4px,-12px) scale(.9)
    }
}

.page-header {
    border-bottom: 1px solid var(--c-border);
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    margin: 1.5rem 1rem 1rem;
    padding-bottom: 1rem
}

.page-header,.page-title {
    align-items: center;
    display: flex
}

.page-title {
    gap: .6rem
}

.page-title>.iconify,.page-title>[class^=icon-] {
    animation: pulse-glow 2s ease-in-out infinite;
    color: var(--c-primary);
    font-size: 1.75em
}

.page-title>h1 {
    background: linear-gradient(135deg,var(--c-text) 0,var(--c-text-2) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
    -webkit-text-fill-color: transparent
}

.page-actions {
    align-items: center;
    display: flex;
    gap: .75rem
}

.page-count {
    color: var(--c-text-2);
    font-size: .9rem
}

.page-count strong {
    color: var(--c-primary)
}

.page-action-link {
    align-items: center;
    background-color: var(--c-bg-soft);
    border-radius: 2em;
    color: var(--c-text-2);
    display: inline-flex;
    font-size: .8rem;
    font-weight: 500;
    gap: .35rem;
    padding: .45em .9em;
    transition: all .2s
}

.page-action-link .iconify,.page-action-link [class^=icon-] {
    font-size: 1.1em
}

.page-action-link:hover {
    background: linear-gradient(135deg,var(--c-accent),var(--c-primary));
    box-shadow: 0 2px 8px color-mix(in srgb,var(--c-accent),transparent 60%);
    color: #fff;
    transform: translateY(-1px)
}

@keyframes pulse-glow {
    0%,to {
        filter: drop-shadow(0 0 0 transparent);
        opacity: 1
    }

    50% {
        filter: drop-shadow(0 0 6px var(--c-primary-soft));
        opacity: .85
    }
}

#z-sidebar-bgmask {
    background-color: #0003;
    inset: 0;
    position: fixed;
    transition: opacity .2s;
    z-index: 99
}

#z-sidebar-bgmask.hidden {
    display: none
}

@media(min-width: 768px) {
    #z-sidebar-bgmask {
        display:none
    }
}

#z-sidebar {
    color: var(--c-text-2);
    contain: layout;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    height: 100vh;
    height: 100dvh;
    position: sticky;
    top: 0;
    width: 280px
}

#z-sidebar:hover {
    color: currentcolor
}

@media(max-width: 768px) {
    #z-sidebar {
        -webkit-backdrop-filter:blur(.5rem);
        backdrop-filter: blur(.5rem);
        background-color: var(--ld-bg-blur);
        color: currentcolor;
        height: 100%;
        inset-inline-start: 0;
        max-width: 100%;
        position: fixed;
        transform: var(--transform-start-far);
        transition: transform .2s;
        width: 320px;
        z-index: 100
    }

    #z-sidebar.show {
        box-shadow: 0 0 1rem var(--ld-shadow);
        transform: none
    }
}

.sidebar-nav {
    flex-grow: 1;
    font-size: .9em;
    overflow-y: auto;
    padding: 0 5%;
    scrollbar-width: thin
}

.sidebar-nav h3 {
    color: var(--c-text-2);
    font: inherit;
    margin: 2em 0 1em 1em
}

.sidebar-nav li {
    margin: .5em 0
}

.sidebar-nav::-webkit-scrollbar {
    width: 4px
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 2px
}

.sidebar-nav:hover::-webkit-scrollbar-thumb {
    background-color: var(--c-border)
}

.sidebar-nav-item {
    align-items: center;
    border-radius: .5em;
    color: inherit;
    display: flex;
    flex-grow: 1;
    gap: .5em;
    padding: .5em 1em;
    position: relative;
    transition: all .2s
}

.sidebar-nav-item:hover {
    color: var(--c-text)
}

.sidebar-nav-item.active,.sidebar-nav-item:hover {
    background-color: var(--c-bg-soft)
}

.sidebar-nav-item.active:after {
    color: var(--c-text-3);
    content: "•";
    font-size: 1.2em
}

.sidebar-nav-item>.iconfont,.sidebar-nav-item>[class^=icon-] {
    font-size: 1.5em
}

.sidebar-nav-item>img {
    flex-shrink: 0;
    object-fit: contain
}

.dark #z-sidebar.menu-icon-invert .sidebar-nav-item>img {
    filter: invert(1) brightness(1.1)
}

.sidebar-nav-item>.nav-text {
    flex-grow: 1
}

.sidebar-nav-item>.external-tip {
    font-size: 1em;
    opacity: .5
}

.nav-item-wrapper {
    align-items: center;
    display: flex;
    gap: .25em
}

.nav-item-wrapper .sidebar-nav-item {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0
}

.nav-item-wrapper .dropdown-toggle {
    align-items: center;
    background: transparent;
    border: none;
    border-radius: 0 .5em .5em 0;
    color: var(--c-text-2);
    cursor: pointer;
    display: flex;
    justify-content: center;
    padding: .95em 1em;
    transition: all .2s
}

.nav-item-wrapper .dropdown-toggle:hover {
    background-color: var(--c-bg-soft);
    color: var(--c-text)
}

.nav-item-wrapper .dropdown-toggle .dropdown-arrow {
    font-size: .8em;
    transition: transform .2s
}

.has-dropdown {
    cursor: pointer
}

.has-dropdown .dropdown-arrow {
    font-size: .8em;
    margin: .25rem .25rem .25rem 4rem;
    transition: transform .2s
}

.has-submenu.expanded .dropdown-arrow {
    transform: rotate(180deg)
}

.has-submenu.expanded .dropdown-menu {
    margin-top: .5em;
    max-height: 500px;
    opacity: 1;
    transform: translateY(0);
    visibility: visible
}

.dropdown-menu {
    border-inline-start:1px solid var(--c-border);margin-inline-start: 1em;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all .3s ease-in-out
}

.dropdown-menu .dropdown-item {
    align-items: center;
    color: var(--c-text-2);
    display: flex;
    font-size: .9em;
    gap: .5em;
    padding: .4em 1em;
    transition: color .2s
}

.dropdown-menu .dropdown-item:hover {
    color: var(--c-primary)
}

.dropdown-menu .dropdown-item.active {
    color: var(--c-primary);
    font-weight: 500
}

.dropdown-menu .dropdown-item>img {
    flex-shrink: 0;
    object-fit: contain
}

.dark #z-sidebar.menu-icon-invert .dropdown-menu .dropdown-item>img {
    filter: invert(1) brightness(1.1)
}

.search-btn {
    cursor: pointer;
    margin: 1rem 0;
    opacity: .5;
    outline: 2px solid var(--c-border);
    outline-offset: -2px
}

.search-btn:hover {
    background-color: transparent;
    opacity: 1;
    outline-color: transparent
}

.search-btn .search-shortcut {
    background-color: var(--c-bg-2);
    border: 1px solid var(--c-border);
    border-radius: .25em;
    color: var(--c-text-3);
    font-family: var(--font-monospace);
    font-size: .75em;
    margin-inline-start:auto;padding: .15em .4em
}

.sidebar-footer {
    --gap: clamp(.5rem,3vh,1rem);
    color: var(--c-text-2);
    display: grid;
    font-size: .8em;
    gap: var(--gap);
    padding: var(--gap);
    text-align: center
}

.theme-toggle {
    background-color: var(--c-bg-2);
    border: 1px solid var(--c-border);
    gap: 3px;
    margin: 0 auto;
    padding: 2px;
    width: fit-content
}

.theme-toggle,.theme-toggle>button {
    border-radius: 1rem;
    display: flex;
    justify-content: center
}

.theme-toggle>button {
    align-items: center;
    padding: 6px 1rem;
    transition: all .1s
}

.theme-toggle>button:hover {
    background-color: var(--c-bg-soft);
    color: var(--c-text-1)
}

.theme-toggle>button.active {
    background-color: var(--ld-bg-card);
    box-shadow: .1em .2em .5rem var(--ld-shadow);
    color: var(--c-text-1);
    cursor: auto
}

.social-icons {
    gap: .8em
}

.social-icons,.social-icons a {
    display: flex;
    justify-content: center
}

.social-icons a {
    align-items: center;
    border-radius: .5em;
    height: 2em;
    transition: all .2s;
    width: 2em
}

.social-icons a:hover {
    background-color: var(--c-bg-soft);
    color: var(--c-primary)
}

.social-icons a img {
    object-fit: contain
}

.dark #z-sidebar.menu-icon-invert .social-icons a img {
    filter: invert(1) brightness(1.1)
}

.user-auth {
    margin-bottom: .5rem;
    position: relative
}

.user-entry {
    align-items: center;
    border-radius: .6rem;
    color: var(--c-text);
    cursor: pointer;
    display: flex;
    gap: .6rem;
    justify-content: center;
    padding: .5rem .6rem;
    transition: all .2s
}

.user-entry:hover {
    background-color: var(--c-bg-soft)
}

.user-entry .avatar-wrapper {
    align-items: center;
    background: var(--c-bg-soft);
    border-radius: 50%;
    display: flex;
    flex-shrink: 0;
    height: 2rem;
    justify-content: center;
    overflow: hidden;
    width: 2rem
}

.user-entry .avatar-wrapper .user-avatar {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%
}

.user-entry .avatar-wrapper .default-avatar-icon {
    color: var(--c-text-2);
    font-size: 1.2rem
}

.user-entry .user-info {
    display: flex;
    flex-direction: column;
    min-width: 0
}

.user-entry .user-info .user-name {
    color: var(--c-text);
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.3
}

.user-entry .user-info .user-desc {
    color: var(--c-text-3);
    font-size: .75rem;
    line-height: 1.3
}

.user-entry .user-name {
    color: var(--c-text);
    font-size: .9rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.user-entry .menu-arrow {
    color: var(--c-text-3);
    font-size: .8rem;
    transition: transform .2s
}

.user-entry .menu-arrow.rotate {
    transform: rotate(180deg)
}

.user-menu {
    background: var(--ld-bg-card);
    border: 1px solid var(--c-border);
    border-radius: .6rem;
    bottom: 100%;
    box-shadow: 0 4px 12px var(--ld-shadow);
    left: 0;
    margin-bottom: .5rem;
    padding: .4rem;
    position: absolute;
    right: 0;
    z-index: 10
}

.user-menu-item {
    align-items: center;
    border-radius: .4rem;
    color: var(--c-text);
    display: flex;
    font-size: .85rem;
    gap: .5rem;
    padding: .5rem .6rem;
    transition: all .15s
}

.user-menu-item:hover {
    background: var(--c-bg-soft);
    color: var(--c-primary)
}

.user-menu-item.logout {
    color: var(--c-text-2)
}

.user-menu-item.logout:hover {
    background: #ef44441a;
    color: #ef4444
}

.user-menu-item>[class^=icon-] {
    font-size: 1.1rem
}

.login-modal-overlay {
    align-items: center;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: #0000004d;
    display: flex;
    inset: 0;
    justify-content: center;
    position: fixed;
    transition: all .3s;
    z-index: 9999
}

.login-modal-overlay.v-enter-from,.login-modal-overlay.v-leave-to {
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
    opacity: 0
}

.login-modal {
    animation: modal-pop .3s cubic-bezier(.34,1.56,.64,1);
    background: var(--ld-bg-card);
    border: 1px solid var(--c-border);
    border-radius: 1.5rem;
    box-shadow: 0 20px 60px -10px #0000004d,0 0 0 1px #ffffff1a;
    max-width: 380px;
    overflow: hidden;
    width: 90%
}

@keyframes modal-pop {
    0% {
        opacity: 0;
        transform: scale(.95) translateY(10px)
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0)
    }
}

.login-modal .login-header {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    padding: 1.5rem 1.5rem .5rem
}

.login-modal .login-header .header-text h3 {
    color: var(--c-text);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: .2rem
}

.login-modal .login-header .header-text p {
    color: var(--c-text-3);
    font-size: .85rem
}

.login-modal .login-header .close-btn {
    background: var(--c-bg-soft);
    border-radius: 50%;
    color: var(--c-text-3);
    cursor: pointer;
    padding: .4rem;
    transition: all .2s
}

.login-modal .login-header .close-btn:hover {
    background: var(--c-bg-2);
    color: var(--c-text);
    transform: rotate(90deg)
}

.login-modal .login-form {
    padding: 1.5rem
}

.login-modal .login-form .form-group {
    margin-bottom: 1.25rem
}

.login-modal .login-form .form-group label {
    color: var(--c-text-2);
    display: block;
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: .5rem;
    margin-inline-start:.2rem}

.login-modal .login-form .form-group .input-wrapper {
    position: relative
}

.login-modal .login-form .form-group .input-wrapper .input-icon {
    color: var(--c-text-3);
    font-size: 1.1rem;
    left: .8rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: color .2s
}

.login-modal .login-form .form-group .input-wrapper input[type=password],.login-modal .login-form .form-group .input-wrapper input[type=text] {
    background: var(--c-bg-soft);
    border: 1px solid var(--c-border);
    border-radius: .8rem;
    color: var(--c-text);
    font-size: .95rem;
    padding: .75rem 1rem .75rem 2.4rem;
    transition: all .2s;
    width: 100%
}

.login-modal .login-form .form-group .input-wrapper input[type=password]:focus,.login-modal .login-form .form-group .input-wrapper input[type=text]:focus {
    background: var(--c-bg);
    border-color: var(--c-primary);
    box-shadow: 0 0 0 4px var(--c-primary-soft);
    outline: none
}

.login-modal .login-form .form-group .input-wrapper input[type=password]:focus~.input-icon,.login-modal .login-form .form-group .input-wrapper input[type=text]:focus~.input-icon {
    color: var(--c-primary)
}

.login-modal .login-form .form-group .input-wrapper input[type=password]::placeholder,.login-modal .login-form .form-group .input-wrapper input[type=text]::placeholder {
    color: var(--c-text-3);
    font-size: .9em
}

.login-modal .login-form .form-group.checkbox {
    margin-top: -.5rem
}

.login-modal .login-form .form-group.checkbox label {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-weight: 400;
    gap: .5rem
}

.login-modal .login-form .form-group.checkbox label input[type=checkbox] {
    accent-color: var(--c-primary);
    border-radius: 4px;
    height: 1.1rem;
    width: 1.1rem
}

.login-modal .login-form .form-group.checkbox label span {
    color: var(--c-text-2);
    font-size: .9rem
}

.login-modal .login-form .form-error {
    align-items: center;
    background: #ef44441a;
    border: 1px solid rgba(239,68,68,.2);
    border-radius: .5rem;
    color: #ef4444;
    display: flex;
    font-size: .85rem;
    gap: .5rem;
    margin-bottom: 1rem;
    padding: .6rem .8rem
}

.login-modal .login-form .form-error:before {
    align-items: center;
    background: #ef4444;
    border-radius: 50%;
    color: #fff;
    content: "!";
    display: inline-flex;
    font-size: .75em;
    font-weight: 700;
    height: 1.2em;
    justify-content: center;
    width: 1.2em
}

.login-modal .login-form .submit-btn {
    background: var(--c-primary);
    border-radius: .8rem;
    box-shadow: 0 4px 12px var(--c-primary-soft);
    color: #fff;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .02em;
    padding: .8rem 1rem;
    transition: all .2s;
    width: 100%
}

.login-modal .login-form .submit-btn:hover:not(:disabled) {
    box-shadow: 0 6px 16px var(--c-primary-soft);
    filter: brightness(1.1);
    transform: translateY(-1px)
}

.login-modal .login-form .submit-btn:active:not(:disabled) {
    transform: translateY(0)
}

.login-modal .login-form .submit-btn:disabled {
    cursor: wait;
    opacity: .7
}

.login-modal .login-form .submit-btn .loading-text {
    align-items: center;
    display: flex;
    gap: .5rem;
    justify-content: center
}

.login-modal .login-form .submit-btn .animate-spin {
    animation: spin 1s linear infinite
}

#z-aside {
    flex-shrink: 0;
    height: 100vh;
    height: 100dvh;
    overflow: auto;
    padding: .5rem;
    position: sticky;
    scrollbar-width: none;
    top: 0;
    width: 280px
}

#z-aside::-webkit-scrollbar {
    display: none
}

@media(max-width: 1080px) {
    #z-aside {
        background-color:var(--c-bg);
        box-shadow: -.5rem 0 2rem var(--ld-shadow);
        display: none!important;
        height: 100%;
        inset-inline-end: 0;
        max-width: 100%;
        position: fixed;
        top: 0;
        width: 320px;
        z-index: 100
    }

    #z-aside.show {
        display: block!important
    }

    #z-aside .widget-body.widget-card {
        -webkit-backdrop-filter: blur(.5rem);
        backdrop-filter: blur(.5rem);
        background-color: var(--ld-bg-blur);
        border-radius: 1rem;
        box-shadow: 0 0 1rem var(--ld-shadow);
        padding: .5rem
    }
}

#z-aside-bgmask {
    background-color: #0003;
    inset: 0;
    position: fixed;
    transition: opacity .2s;
    z-index: 99
}

#z-aside-bgmask.hidden {
    display: none
}

@media(min-width: 1080px) {
    #z-aside-bgmask {
        display:none
    }
}

.widget {
    font-size: .9em
}

.widget+.widget {
    margin-top: 1rem
}

.widget.dim {
    opacity: .3;
    transition: opacity .2s
}

#z-aside.show .widget.dim,#z-aside:hover .widget.dim {
    opacity: 1
}

.widget-title {
    color: var(--c-text-2);
    gap: .5rem;
    justify-content: space-between;
    margin: .5rem
}

.widget-title,.widget-title a {
    align-items: center;
    display: flex
}

.widget-title a {
    position: relative;
    transition: color .2s
}

.widget-title a[data-title]:after {
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: .25em;
    box-shadow: 0 2px 8px #0000001a;
    color: var(--c-text-2);
    content: attr(data-title);
    font-size: .7em;
    left: 50%;
    margin-top: .4em;
    opacity: 0;
    padding: .25em .5em;
    pointer-events: none;
    position: absolute;
    top: 100%;
    transform: translate(-50%);
    transition: opacity .1s;
    visibility: hidden;
    white-space: nowrap;
    z-index: 100
}

.widget-title a[data-title]:hover:after {
    opacity: 1;
    visibility: visible
}

.widget-title>[href]:hover,.widget-title>[onclick]:hover {
    color: var(--c-primary)
}

.widget-title .title-text {
    flex-grow: 1
}

.widget-body.with-bg {
    overflow: hidden;
    overflow: clip;
    position: relative;
    z-index: 0
}

.widget-body.with-bg>.bg-img {
    height: 100%;
    inset: 0;
    object-fit: cover;
    opacity: .2;
    pointer-events: none;
    position: absolute;
    width: 100%;
    z-index: -1
}

.widget-body.with-bg>.bg-img.bg-right {
    inset-inline-start: 50%;
    -webkit-mask-image: linear-gradient(to var(--end),transparent,#fff 50%);
    mask-image: linear-gradient(to var(--end),transparent,#fff 50%);
    width: 50%
}

.widget:hover .widget-body.with-bg>.bg-img {
    opacity: .5
}

.widget-body.widget-card {
    background-color: var(--c-bg-2);
    border-radius: .8rem;
    padding: .5rem .8rem
}

.dl-group>div,.widget-body.widget-card p {
    padding: .2em 0
}

.dl-group>div>dt {
    color: var(--c-text-2);
    font-size: .9em
}

.dl-group a {
    transition: color .2s
}

.dl-group a:hover {
    color: var(--c-primary)
}

.dl-group.small {
    display: flex;
    flex-wrap: wrap;
    gap: .5em 1em;
    text-align: center
}

.dl-group.small>div {
    flex: 1;
    white-space: nowrap
}

.dl-group.medium>div {
    display: grid;
    gap: 8%;
    grid-template-columns: 1fr 2fr;
    padding: .2em 0
}

.dl-group.medium>div>dt {
    font-size: inherit;
    text-align: end
}

.build-info {
    border-top: 1px dashed var(--c-border);
    margin-top: .5rem;
    padding-top: .5rem
}

.domain-text {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.platform-halo {
    align-items: center;
    display: flex;
    gap: .3em
}

.platform-halo img {
    border-radius: .2em;
    height: 1.2em;
    object-fit: cover;
    width: 1.2em
}

.z-expand {
    display: flex;
    flex-direction: column;
    margin-top: .2em
}

.toggle-btn {
    color: var(--c-text-2);
    cursor: pointer;
    display: block;
    font-size: .9em;
    margin: 0 auto;
    padding: .3em;
    transition: color .2s;
    width: fit-content
}

.toggle-btn:hover {
    color: var(--c-primary)
}

.toggle-btn.in-place {
    order: -1
}

.toggle-icon {
    display: inline-block;
    transition: transform .2s
}

.toggle-icon.expand {
    transform: scaleY(-1)
}

.comm-title {
    -webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(60deg,var(--c-accent) -30%,var(--c-primary),var(--c-text-1));
    background-position: 100% 0;
    background-size: 200%;
    color: transparent;
    font-size: 1.8em;
    font-weight: 800;
    letter-spacing: .05em;
    transition: background-position .2s
}

.widget:hover .comm-title {
    background-position: 0 0
}

.comm-tip {
    align-items: center;
    color: var(--c-text-2);
    display: flex;
    font-size: .9em;
    gap: .3em;
    line-height: 2
}

.toc-widget .like-count {
    font-family: var(--font-monospace);
    font-size: .75em;
    margin-left: .3em
}

.toc-widget a.liked {
    color: #ef4444!important
}

@keyframes heartBeat {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.2)
    }

    to {
        transform: scale(1)
    }
}

.toc-widget a.liked [class*=heart-fill] {
    animation: heartBeat .3s ease-in-out
}

.toc-widget .toc-body {
    background-color: transparent;
    border-radius: .5rem 1.5rem;
    box-shadow: none;
    padding: 1rem;
    position: relative
}

.toc-widget .toc-nav {
    max-height: calc(100dvh - 6rem);
    overflow: auto;
    padding-left: .2rem;
    padding-right: .25rem;
    scroll-behavior: smooth;
    scrollbar-color: color-mix(in srgb,var(--c-text-3),transparent 30%) transparent;
    scrollbar-width: thin
}

.toc-widget .toc-nav ol {
    list-style: none;
    margin: 0;
    padding: 0
}

.toc-widget .toc-nav li {
    color: var(--c-text-2);
    position: relative;
    transition: color .2s
}

.toc-widget .toc-nav li .toc-item-wrapper {
    align-items: center;
    display: flex;
    gap: .1rem
}

.toc-widget .toc-nav li .toc-toggle {
    align-items: center;
    border-radius: .25rem;
    color: var(--c-text-3);
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    height: 1.25rem;
    justify-content: center;
    margin-right: .1rem;
    transition: color .2s,transform .25s ease;
    width: 1.25rem
}

.toc-widget .toc-nav li .toc-toggle:hover {
    background-color: color-mix(in srgb,var(--c-primary),transparent 90%);
    color: var(--c-primary)
}

.toc-widget .toc-nav li .toc-toggle span {
    font-size: .75rem
}

.toc-widget .toc-nav li.toc-expanded>.toc-item-wrapper>.toc-toggle {
    transform: rotate(90deg)
}

.toc-widget .toc-nav li .toc-children {
    display: none;
    overflow: hidden
}

.toc-widget .toc-nav li.toc-expanded>.toc-children {
    display: block
}

.toc-widget .toc-nav li:hover>.toc-item-wrapper>a {
    color: var(--c-text)
}

.toc-widget .toc-nav li.has-active>.toc-item-wrapper>a {
    color: var(--c-text-1);
    font-weight: 500
}

.toc-widget .toc-nav li.active>.toc-item-wrapper>a {
    color: var(--c-primary);
    font-weight: 600
}

.toc-widget .toc-nav li a {
    border-radius: 0;
    display: block;
    flex: 1;
    line-height: 1.45;
    margin: .08rem 0;
    overflow: hidden;
    padding: .42em .55rem;
    position: relative;
    text-overflow: ellipsis;
    transition: color .2s;
    white-space: nowrap
}

.toc-widget .toc-nav li.active>.toc-item-wrapper>a:before {
    background-color: var(--c-primary);
    border-radius: 2px;
    content: "";
    height: 1.15em;
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2px
}

.toc-widget .toc-nav li>.toc-children {
    border-left: 1px solid color-mix(in srgb,var(--c-border),transparent 20%);
    margin-left: .65rem;
    padding-left: 1.15rem
}

.toc-widget .no-toc {
    color: var(--c-text-3);
    padding: 1em;
    text-align: center
}

a.sponsor-card.widget-card.with-bg {
    color: inherit;
    display: block;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    z-index: 0
}

a.sponsor-card.widget-card.with-bg>.bg-img {
    height: 100%;
    inset: 0;
    inset-inline-start: 50%;
    -webkit-mask-image: linear-gradient(to var(--end),transparent,#fff 50%);
    mask-image: linear-gradient(to var(--end),transparent,#fff 50%);
    object-fit: contain;
    object-position: center;
    opacity: .25;
    pointer-events: none;
    position: absolute;
    width: 50%;
    z-index: -1
}

a.sponsor-card.widget-card.with-bg:hover {
    color: inherit
}

a.sponsor-card.widget-card.with-bg:hover>.bg-img {
    opacity: .5
}

.sponsor-name {
    font-size: 1.1em;
    font-weight: 600
}

.sponsor-tip {
    align-items: center;
    color: var(--c-text-2);
    display: flex;
    font-size: .85em;
    gap: .3em;
    margin-top: .2em
}

.sponsor-tip [class^=icon-] {
    font-size: 1.2em
}

.moments-widget {
    display: flex;
    flex-direction: column;
    gap: .75rem
}

.moment-item {
    border-bottom: 1px dashed var(--c-border);
    padding-bottom: .75rem
}

.moment-item:last-child {
    border-bottom: none;
    padding-bottom: 0
}

.moment-content {
    color: var(--c-text);
    display: -webkit-box;
    font-size: .9em;
    -webkit-line-clamp: 3;
    line-height: 1.6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-decoration: none!important;
    transition: color .2s
}

.moment-content:hover {
    color: var(--c-primary)!important
}

.moment-content * {
    color: inherit!important;
    text-decoration: inherit!important
}

.moment-content p {
    margin: 0
}

.moment-content img {
    display: none
}

.moment-meta {
    align-items: center;
    display: flex;
    gap: .5em;
    justify-content: space-between;
    margin-top: .4em
}

.moment-meta .moment-time {
    align-items: center;
    color: var(--c-text-3);
    display: flex;
    font-size: .75em;
    gap: .3em;
    white-space: nowrap
}

.moment-meta .moment-time [class^=icon-] {
    font-size: 1.1em
}

.moment-meta .moment-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    justify-content: flex-end;
    margin-left: auto
}

.moment-meta .moment-tags .moment-tag {
    align-items: center;
    background-color: var(--c-primary-soft);
    border: 1px solid transparent;
    border-radius: 2em;
    color: var(--c-primary);
    display: inline-flex;
    font-size: .7rem;
    font-weight: 500;
    gap: .15rem;
    padding: .25em .6em;
    transition: all .2s
}

.moment-meta .moment-tags .moment-tag .tag-hash {
    font-weight: 700;
    opacity: .7
}

.moment-meta .moment-tags .moment-tag:hover {
    background-color: var(--c-primary);
    box-shadow: 0 2px 4px color-mix(in srgb,var(--c-primary),transparent 60%);
    color: #fff;
    transform: translateY(-1px)
}

.empty-tip {
    align-items: center;
    color: var(--c-text-3);
    display: flex;
    font-size: .85em;
    gap: .4em;
    justify-content: center;
    padding: 1rem
}

.empty-tip [class^=icon-] {
    font-size: 1.3em
}

.recent-comments-list,.recent-comments-widget {
    display: flex;
    flex-direction: column;
    gap: .75rem
}

.recent-comments-list {
    list-style: none;
    margin: 0;
    padding: 0
}

.recent-comment-item {
    border-bottom: 1px dashed var(--c-border);
    padding-bottom: .75rem
}

.recent-comment-item:last-child {
    border-bottom: none;
    padding-bottom: 0
}

.comment-link {
    color: inherit;
    display: block;
    text-decoration: none!important;
    transition: color .2s
}

.comment-link:hover .comment-content {
    color: var(--c-primary)!important
}

.comment-header {
    align-items: center;
    display: flex;
    gap: .5em;
    justify-content: space-between;
    margin-bottom: .4em
}

.comment-header .comment-avatar-img,.comment-header .comment-avatar-text {
    border-radius: 50%;
    flex-shrink: 0;
    height: 1.25rem;
    width: 1.25rem
}

.comment-header .comment-avatar-text {
    align-items: center;
    background: var(--c-primary);
    color: #fff;
    display: flex;
    font-size: .7em;
    font-weight: 600;
    justify-content: center
}

.comment-header .comment-author-info {
    align-items: center;
    display: flex;
    flex: 1;
    gap: .35em;
    min-width: 0
}

.comment-author {
    color: var(--c-text-2);
    font-size: .85em;
    font-weight: 600
}

.comment-time {
    color: var(--c-text-3);
    font-size: .75em;
    white-space: nowrap
}

.comment-content {
    color: var(--c-text);
    display: -webkit-box;
    font-size: .9em;
    -webkit-line-clamp: 2;
    line-height: 1.6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .2s;
    word-break: break-all
}

.comment-replies {
    border-left: 2px solid var(--c-border);
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-top: .5rem;
    padding-left: .75rem
}

.reply-item {
    align-items: center;
    display: flex;
    font-size: .8em;
    gap: .35rem;
    line-height: 1.5
}

.reply-item .reply-avatar-img,.reply-item .reply-avatar-text {
    border-radius: 50%;
    flex-shrink: 0;
    height: 1rem;
    width: 1rem
}

.reply-item .reply-avatar-text {
    align-items: center;
    background: var(--c-primary);
    color: #fff;
    display: flex;
    font-size: .65em;
    font-weight: 600;
    justify-content: center
}

.reply-author {
    color: var(--c-text-2);
    flex-shrink: 0;
    font-weight: 600;
    white-space: nowrap
}

.reply-author:after {
    content: ":"
}

.reply-content {
    color: var(--c-text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.twikoo-loading-tip {
    align-items: center;
    color: var(--c-text-3);
    display: flex;
    font-size: .875rem;
    gap: .5rem;
    justify-content: center;
    padding: 1rem
}

.twikoo-loading-tip .loading-spinner {
    animation: spin .8s linear infinite;
    border: 2px solid var(--c-border);
    border-radius: 50%;
    border-top-color: var(--c-primary);
    height: 1rem;
    width: 1rem
}

@keyframes spin {
    to {
        transform: rotate(1turn)
    }
}

.promotion-carousel {
    border-radius: .8rem;
    cursor: grab;
    height: var(--promotion-height,120px);
    overflow: hidden;
    padding: 0!important;
    position: relative;
    touch-action: pan-y pinch-zoom;
    -webkit-user-select: none;
    user-select: none
}

.promotion-carousel.dragging {
    cursor: grabbing
}

.promotion-carousel.single {
    cursor: default
}

.promotion-track {
    display: flex;
    height: var(--promotion-height,120px);
    width: 100%;
    will-change: transform
}

.promotion-slide {
    align-items: flex-end;
    color: inherit;
    display: flex;
    flex: 0 0 100%;
    position: relative;
    text-decoration: none
}

.promotion-slide img {
    height: 100%;
    inset: 0;
    object-fit: cover;
    pointer-events: none;
    position: absolute;
    width: 100%
}

.promotion-tip {
    background: linear-gradient(0deg,rgba(0,0,0,.6) 0,transparent);
    border-radius: 0 0 .8rem .8rem;
    color: #fff;
    display: block;
    font-size: .8em;
    line-height: 1.4;
    overflow: hidden;
    padding: 1.5em .6em .4em;
    padding-right: calc(var(--promotion-count, 1)*11px + 12px);
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    z-index: 2
}

.promotion-dots {
    bottom: .4em;
    display: flex;
    gap: .35em;
    position: absolute;
    right: .5em;
    z-index: 10
}

.promotion-dot {
    background-color: #fff9;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px #0000001a,0 1px 2px #00000026;
    cursor: pointer;
    height: 6px;
    transition: all .25s ease;
    width: 6px
}

.promotion-dot:hover {
    background-color: #ffffffe6
}

.promotion-dot.active {
    background-color: #fff;
    width: 16px
}

.activity-calendar {
    --calendar-accent: var(--c-primary);
    --calendar-muted: var(--c-text-3);
    padding: .2rem .15rem .05rem
}

.activity-calendar-header {
    align-items: center;
    display: grid;
    gap: .12rem;
    grid-template-columns: 1.5rem 1fr 1.5rem;
    margin-bottom: .45rem
}

.activity-calendar-header .calendar-label {
    color: var(--c-text);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .01em;
    text-align: center
}

.activity-calendar-header .calendar-nav {
    align-items: center;
    border-radius: 50%;
    color: var(--c-text-3);
    display: inline-flex;
    height: 1.5rem;
    justify-content: center;
    transition: all .18s;
    width: 1.5rem
}

.activity-calendar-header .calendar-nav:hover:not(:disabled) {
    background: color-mix(in srgb,var(--c-primary),transparent 88%);
    color: var(--c-primary)
}

.activity-calendar-header .calendar-nav:disabled {
    cursor: default;
    opacity: .28
}

.activity-calendar-weekdays {
    color: var(--calendar-muted);
    font-size: .78rem;
    font-weight: 600;
    margin-bottom: .24rem;
    text-align: center
}

.activity-calendar-grid,.activity-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7,minmax(0,1fr))
}

.activity-calendar-grid {
    gap: .16rem
}

.calendar-day {
    align-items: center;
    border-radius: .5rem;
    color: var(--c-text);
    display: flex;
    flex-direction: column;
    gap: .08rem;
    justify-content: center;
    min-height: 1.8rem;
    position: relative;
    transition: background-color .18s,color .18s
}

.calendar-day .day-number {
    font-size: .82rem;
    font-weight: 650;
    line-height: 1;
    position: relative;
    z-index: 1
}

.calendar-day .day-dot {
    background: transparent;
    border-radius: 50%;
    height: .22rem;
    transition: background-color .18s,transform .18s;
    width: .22rem
}

.calendar-day:not(.empty):hover {
    background: color-mix(in srgb,var(--c-primary),transparent 90%)
}

.calendar-day.empty {
    pointer-events: none
}

.calendar-day.empty .day-dot,.calendar-day.empty .day-number {
    display: none
}

.calendar-day.active .day-dot {
    transform: scale(1.15)
}

.calendar-day.active.level-1 .day-dot {
    background: color-mix(in srgb,var(--calendar-accent),transparent 74%)
}

.calendar-day.active.level-2 .day-dot {
    background: color-mix(in srgb,var(--calendar-accent),transparent 52%)
}

.calendar-day.active.level-3 .day-dot {
    background: color-mix(in srgb,var(--calendar-accent),transparent 32%)
}

.calendar-day.active.level-4 .day-dot {
    background: var(--calendar-accent)
}

.calendar-day.is-today .day-number {
    align-items: center;
    background: var(--calendar-accent);
    border-radius: 50%;
    box-shadow: 0 .18rem .55rem color-mix(in srgb,var(--calendar-accent),transparent 75%);
    color: #fff;
    display: inline-flex;
    height: 1.34rem;
    justify-content: center;
    width: 1.34rem
}

.activity-calendar-summary {
    color: var(--c-text-2);
    font-size: .8rem;
    line-height: 1.35;
    margin-top: .48rem;
    text-align: center
}

.activity-calendar-hover {
    color: var(--c-text-3);
    font-size: .74rem;
    line-height: 1.35;
    margin-top: .2rem;
    min-height: 1.2em;
    text-align: center
}

.z-footer {
    color: var(--c-text-2);
    font-size: .9em;
    margin: 3rem 1rem
}

.z-footer .footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 5vw clamp(2rem,5%,5vw);
    padding-block:3rem}

.z-footer .footer-nav h3 {
    font: inherit;
    margin: .5em
}

.z-footer .footer-nav a {
    align-items: center;
    border-radius: .5em;
    display: flex;
    font-size: .9em;
    gap: .3em;
    padding: .3em .5em;
    transition: background-color .2s,color .1s;
    width: fit-content
}

.z-footer .footer-nav a:hover {
    background-color: var(--c-bg-soft);
    color: var(--c-text)
}

.z-footer p {
    margin: .5em
}

.z-footer .beian-icon,.z-footer .link-icon {
    height: 1.2em;
    object-fit: contain;
    vertical-align: middle;
    width: 1.2em
}

.z-footer .footer-inject {
    padding: 1rem 0;
    text-align: center
}

.z-footer .footer-inject:empty {
    display: none
}

.post-list {
    margin: 1rem
}

.toolbar {
    justify-content: space-between
}

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

.article-card {
    animation: float-in .2s var(--delay) backwards;
    border-radius: .8rem;
    color: var(--c-text);
    container-type: inline-size;
    margin: 1rem 0;
    position: relative
}

.article-card .article-body {
    display: grid;
    gap: .5rem;
    padding: 1rem
}

.article-info {
    align-items: center;
    color: var(--c-text-2);
    display: flex;
    flex-wrap: wrap;
    font-size: .8em;
    gap: .5em clamp(1em,5%,1.5em)
}

.article-info:empty {
    display: none
}

.article-info .use-updated {
    order: -1
}

.article-info>a,.article-info>span,.article-info>time {
    align-items: center;
    display: inline-flex;
    gap: .25em
}

.article-title {
    font-size: 1.2em
}

.article-title .pinned-post {
    display: inline-block
}

.article-title .pinned-post .icon {
    fill: var(--c-danger);
    height: 16px;
    margin-left: 4px;
    transition: all .3s ease;
    width: 16px
}

.article-title .pinned-post:hover .icon {
    fill: var(--c-danger-dark);
    transform: scale(1.1)
}

.article-description {
    color: var(--c-text-2);
    display: -webkit-box;
    font-size: .9em;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis
}

.article-category {
    color: var(--category-color,var(--cg-color))
}

.article-category img {
    border-radius: .2em;
    height: 1em;
    object-fit: cover;
    width: 1em
}

span:not([class]):empty {
    display: none
}

.article-cover {
    height: 100%;
    inset-inline-end: 0;
    margin: 0;
    -webkit-mask-image: linear-gradient(to var(--end),transparent,#fff 50%);
    mask-image: linear-gradient(to var(--end),transparent,#fff 50%);
    object-fit: cover;
    opacity: .8;
    position: absolute;
    top: 0;
    transition: opacity .3s ease;
    width: min(320px,50%)
}

:hover>.article-cover {
    opacity: 1
}

.article-cover.default-cover {
    background-color: var(--c-border);
    display: grid;
    place-content: center
}

.article-cover.default-cover .default-cover-title {
    color: var(--c-text-3);
    font: 700 1.5rem/1.2 var(--font-serif);
    padding: .5em;
    text-align: center;
    word-break: normal
}

.article-card:has(.article-cover)>.article-body,.article-card:has(.article-cover)>article {
    background: linear-gradient(to var(--end),var(--ld-bg-card) 90%,transparent);
    position: relative;
    width: calc(100% - min(260px,40%))
}

@media(max-width: 528px) {
    .article-card:has(.article-cover)>.article-body,.article-card:has(.article-cover)>article {
        background:none;
        width: auto
    }
}

@container (max-width: 528px) {
    .article-card:has(.article-cover)>.article-body,.article-card:has(.article-cover)>article {
        background: none;
        width: auto
    }
}

@media(max-width: 528px) {
    .article-cover {
        aspect-ratio:2.4;
        height: auto;
        margin-bottom: -10%;
        -webkit-mask-image: linear-gradient(#fff 50%,transparent);
        mask-image: linear-gradient(#fff 50%,transparent);
        max-height: 200px;
        max-width: none;
        position: revert;
        width: 100%
    }
}

@container (max-width: 528px) {
    .article-cover {
        aspect-ratio: 2.4;
        height: auto;
        margin-bottom: -10%;
        -webkit-mask-image: linear-gradient(#fff 50%,transparent);
        mask-image: linear-gradient(#fff 50%,transparent);
        max-height: 200px;
        max-width: none;
        position: revert;
        width: 100%
    }
}

.z-slide {
    margin: 1rem 1rem .5rem
}

.z-slide:hover .at-slide-hover {
    opacity: 1
}

.custom-widget {
    margin: 1rem 1rem .5rem
}

.at-slide-hover {
    opacity: 0;
    transition: opacity .2s
}

.z-slide-header {
    align-items: center;
    color: var(--c-text-3);
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    height: 3rem;
    justify-content: space-between;
    margin-bottom: -.2rem;
    -webkit-mask-image: linear-gradient(#fff,transparent);
    mask-image: linear-gradient(#fff,transparent);
    overflow: hidden
}

.z-slide-header>.title {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1
}

.z-slide-body {
    --fadeout-width: 1.5rem;
    cursor: grab;
    -webkit-mask-image: linear-gradient(to right,transparent,#fff var(--fadeout-width),#fff calc(100% - var(--fadeout-width)),transparent);
    mask-image: linear-gradient(to right,transparent,#fff var(--fadeout-width),#fff calc(100% - var(--fadeout-width)),transparent);
    overflow: hidden;
    position: relative;
    -webkit-user-select: none;
    user-select: none
}

.carousel-action {
    align-items: center;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    background: #fff3;
    border: none;
    border-radius: 50%;
    color: var(--c-text);
    cursor: pointer;
    display: flex;
    font-size: 1.5em;
    justify-content: center;
    padding: .5em;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: all .2s;
    z-index: 10
}

.carousel-action:hover {
    background: #ffffff80
}

.carousel-action.prev {
    inset-inline-start: .5rem
}

.carousel-action.next {
    inset-inline-end: .5rem
}

.slide-list {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.slide-list::-webkit-scrollbar {
    display: none
}

.slide-list>.slide-item {
    aspect-ratio: 1.77;
    border-radius: .5rem;
    flex-shrink: 0;
    margin: 0 min(.5em,1%);
    max-width: 80%;
    overflow: hidden;
    position: relative;
    scroll-snap-align: center;
    scroll-snap-stop:always;width: max(12rem,28%)
}

.slide-list>.slide-item>.cover {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%
}

.slide-list>.slide-item>.info {
    align-items: center;
    -webkit-backdrop-filter: brightness(.8) saturate(10) contrast(.8) blur(2em);
    backdrop-filter: brightness(.8) saturate(10) contrast(.8) blur(2em);
    color: #fff;
    display: flex;
    flex-direction: column;
    inset: 0;
    justify-content: space-evenly;
    opacity: 0;
    padding: 1em;
    position: absolute;
    text-align: center;
    transition: opacity .2s
}

.slide-list>.slide-item>.info>.title {
    text-wrap: balance
}

.slide-list>.slide-item>.info>.desc {
    font-size: .8em;
    opacity: .5
}

.slide-list>.slide-item:hover>.info {
    opacity: 1
}

img:not(.fancybox__image,.tk-owo-emotion,.OwO-items-image img) {
    animation: skeleton-loading 1.5s infinite;
    background: linear-gradient(90deg,var(--ld-bg-card) 25%,color-mix(in srgb,var(--c-text-3) 40%,var(--ld-bg-card)) 50%,var(--ld-bg-card) 75%);
    background-size: 200% 100%;
    height: auto;
    max-width: 100%;
    transition: opacity .3s ease
}

img:not(.fancybox__image,.tk-owo-emotion,.OwO-items-image img).loaded {
    animation: none;
    background: none
}

img:not(.fancybox__image,.tk-owo-emotion,.OwO-items-image img)[width][height] {
    height: auto
}

img:not(.fancybox__image,.tk-owo-emotion,.OwO-items-image img)[class*=avatar],img:not(.fancybox__image,.tk-owo-emotion,.OwO-items-image img)[class*=cover] {
    object-fit: cover
}

img:not(.fancybox__image,.tk-owo-emotion,.OwO-items-image img)[class*=icon],img:not(.fancybox__image,.tk-owo-emotion,.OwO-items-image img)[src$=".svg"],img:not(.fancybox__image,.tk-owo-emotion,.OwO-items-image img)[src^="data:"] {
    animation: none;
    background: none
}

@media(prefers-reduced-motion:reduce) {
    img:not(.fancybox__image,.tk-owo-emotion,.OwO-items-image img) {
        animation: none
    }
}

.author-avatar,.user-avatar {
    border-radius: 50%
}

.post-header {
    background-color: var(--c-bg-2);
    border-radius: 1rem;
    color: var(--c-text);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: .5rem;
    position: relative
}

@media(max-width: 768px) {
    .post-header {
        border-radius:0;
        margin: 0
    }
}

.post-header:hover .operations {
    opacity: 1
}

.post-header.has-cover {
    color: #fff;
    max-height: 320px;
    min-height: 256px;
    overflow: hidden;
    overflow: clip;
    position: relative;
    transition: font-size .2s
}

.post-header.has-cover:hover {
    font-size: .8em
}

.post-header.has-cover:before {
    background: linear-gradient(180deg,rgba(0,0,0,.6),transparent);
    height: 80px;
    top: 0
}

.post-header.has-cover:after,.post-header.has-cover:before {
    content: "";
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    z-index: 1
}

.post-header.has-cover:after {
    background: linear-gradient(0deg,rgba(0,0,0,.8),transparent);
    bottom: 0;
    height: 120px
}

.post-header.has-cover .post-title {
    background-image: none;
    margin: 0 1rem 1rem;
    text-shadow: none
}

.operations {
    color: var(--c-text-1);
    inset-inline-end: 1em;
    opacity: 0;
    position: absolute;
    top: .8em;
    transition: opacity .2s;
    z-index: 2
}

.has-cover .operations {
    color: #fff
}

.z-btn {
    align-items: center;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    background-color: var(--c-bg-soft);
    border-radius: .5em;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    font-size: .85em;
    gap: .3em;
    padding: .4em .8em;
    transition: all .2s
}

.has-cover .z-btn {
    background-color: #fff3
}

.z-btn:hover {
    background-color: var(--c-primary-soft);
    color: var(--c-primary)
}

.has-cover .z-btn:hover {
    background-color: #ffffff4d;
    color: #fff
}

.post-cover {
    border-radius: 1rem;
    height: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    width: 100%
}

.post-title {
    color: var(--c-text);
    font-size: 1em;
    line-height: 1.2;
    margin: 0 1rem 1rem;
    width: fit-content;
    z-index: 2
}

.has-cover .post-title {
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,.3)
}

.center-title.has-cover .post-title {
    left: 50%;
    margin: 0;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translate(-50%,-50%);
    width: calc(100% - 2rem)
}

.post-nav {
    padding: .8em 1rem;
    position: relative;
    z-index: 2
}

.post-info {
    color: var(--c-text-2);
    display: flex;
    flex-wrap: wrap;
    font-size: .85rem;
    gap: .5em 1.2em
}

.has-cover .post-info {
    color: #ffffffe6;
    text-shadow: 0 1px 2px rgba(0,0,0,.3)
}

.post-info {
    padding: .4em .8em;
    width: fit-content
}

.post-info span {
    align-items: center;
    display: inline-flex;
    gap: .3em
}

.post-info img {
    border-radius: .2em;
    height: 1em;
    object-fit: cover;
    width: 1em
}

.post-info a {
    color: inherit
}

.post-info a:hover {
    color: var(--c-primary)
}

.has-cover .post-info a:hover {
    color: #fff;
    text-decoration: underline
}

.md-excerpt {
    color: var(--c-text-2);
    font-size: .9em;
    margin: 1rem;
    padding: .5rem
}

.md-excerpt>[class^=icon-] {
    margin-inline-end:.3em}

.md-excerpt:hover {
    color: currentcolor
}

.excerpt-caret {
    animation: blink 1s step-end infinite;
    color: var(--c-primary);
    font-weight: 700
}

@keyframes blink {
    0%,to {
        opacity: 1
    }

    50% {
        opacity: 0
    }
}

.outdated-notice {
    --notice-color: #e8a545;
    align-items: center;
    animation: float-in .4s ease-out;
    background: linear-gradient(135deg,color-mix(in srgb,var(--notice-color),var(--c-bg) 92%) 0,color-mix(in srgb,var(--notice-color),var(--c-bg) 96%));
    border-radius: .75em;
    box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--notice-color),transparent 70%),0 2px 8px color-mix(in srgb,var(--notice-color),transparent 90%);
    color: var(--c-text-2);
    display: flex;
    font-size: .9em;
    gap: .8em;
    margin: 1rem;
    padding: 1em 1.2em;
    position: relative
}

.outdated-notice>[class^=icon-] {
    color: var(--notice-color);
    filter: drop-shadow(0 1px 2px color-mix(in srgb,var(--notice-color),transparent 60%));
    flex-shrink: 0;
    font-size: 1.4em
}

.outdated-notice .notice-text {
    color: var(--c-text-1);
    line-height: 1.6
}

.dark .outdated-notice {
    --notice-color: #f59e0b;
    background: linear-gradient(135deg,color-mix(in srgb,var(--notice-color),var(--c-bg) 88%) 0,color-mix(in srgb,var(--notice-color),var(--c-bg) 94%))
}

.ai-notice {
    --notice-color: var(--c-primary);
    align-items: center;
    animation: float-in .4s ease-out;
    background: linear-gradient(135deg,color-mix(in srgb,var(--notice-color),var(--c-bg) 92%) 0,color-mix(in srgb,var(--notice-color),var(--c-bg) 96%));
    border-radius: .75em;
    box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--notice-color),transparent 70%),0 2px 8px color-mix(in srgb,var(--notice-color),transparent 90%);
    color: var(--c-text-2);
    display: flex;
    font-size: .9em;
    gap: .8em;
    margin: 1rem;
    padding: 1em 1.2em;
    position: relative
}

.ai-notice>[class^=icon-] {
    animation: sparkle 2s ease-in-out infinite;
    color: var(--notice-color);
    filter: drop-shadow(0 1px 2px color-mix(in srgb,var(--notice-color),transparent 60%));
    flex-shrink: 0;
    font-size: 1.4em
}

.ai-notice .notice-text {
    color: var(--c-text-1);
    line-height: 1.6
}

.dark .ai-notice {
    background: linear-gradient(135deg,color-mix(in srgb,var(--notice-color),var(--c-bg) 88%) 0,color-mix(in srgb,var(--notice-color),var(--c-bg) 94%))
}

@keyframes sparkle {
    0%,to {
        opacity: 1;
        transform: scale(1)
    }

    50% {
        opacity: .7;
        transform: scale(1.1)
    }
}

.article {
    line-height: 1.8;
    margin: 1rem
}

.article p {
    margin: .5em 0
}

.article>*,.article>p {
    margin: 1rem 0
}

.article .toc-highlight {
    animation: toc-highlight-fade 2s ease-out forwards;
    background-color: var(--c-primary-soft);
    border-radius: .25rem
}

@keyframes toc-highlight-fade {
    0% {
        background-color: var(--c-primary-soft)
    }

    to {
        background-color: transparent
    }
}

.article :where(h1,h2,h3,h4,h5,h6) {
    align-items: center;
    color: var(--c-text);
    display: flex;
    font-family: var(--font-creative);
    font-weight: 550;
    margin: 1.6em 0 .8em;
    position: relative
}

.article :where(h1,h2,h3,h4,h5,h6)>a {
    color: inherit;
    text-decoration: none
}

.article :where(h1,h2,h3,h4,h5,h6)>a:hover {
    color: var(--c-primary)
}

.article h1 {
    font-size: 2em
}

.article h2 {
    font-size: 1.5em
}

.article h3 {
    font-size: 1.25em
}

.article h4 {
    font-size: 1.1em
}

.article h5 {
    font-size: 1em
}

.article h6 {
    color: var(--c-text-2);
    font-size: .9em
}

.article.md-tech h2>a:before {
    color: #fff;
    content: "#"
}

.article.md-tech :where(h2,h3,h4,h5,h6)>a:before {
    background-color: var(--c-primary);
    border-radius: .2rem;
    content: "";
    margin-inline-end:.5em;padding: 0 2px
}

.article.md-tech :where(h2,h3,h4,h5,h6):not(:has(>a)):before {
    background-color: var(--c-primary);
    border-radius: 2px;
    content: "";
    display: inline-block;
    height: 1em;
    margin-inline-end:.5em;vertical-align: middle;
    width: 4px
}

.article.md-story .title-like,.article.md-story h1,.article.md-story h2,.article.md-story h3,.article.md-story h4,.article.md-story h5,.article.md-story h6 {
    font-family: var(--font-serif);
    font-weight: bolder;
    position: relative;
    text-align: center;
    text-wrap: balance
}

.article.md-story h2:before {
    background-image: linear-gradient(var(--c-primary-soft),transparent);
    border-radius: 2.5em;
    content: "";
    height: 2.5em;
    margin: -.4em 0 0 -.7em;
    position: absolute;
    width: 2.5em;
    z-index: -1
}

.article.md-story h3:after {
    background-color: var(--c-primary-soft);
    bottom: 0;
    content: "";
    height: .7em;
    position: absolute;
    width: .4em
}

.article.md-story :not([class])>p,.article.md-story p {
    text-indent: 2em
}

.article.md-story :not([class])>p>[class],.article.md-story p>[class] {
    text-indent: 0
}

.article:not(.md-tech):not(.md-story) :where(h1,h2,h3,h4,h5,h6):before {
    background-color: var(--c-primary);
    border-radius: 2px;
    content: "";
    flex-shrink: 0;
    height: 1em;
    margin-inline-end:.5em;width: 4px
}

.article:not(.md-tech):not(.md-story) :where(h1,h2,h3,h4,h5,h6):has(>a):before {
    display: none
}

.article:not(.md-tech):not(.md-story) :where(h1,h2,h3,h4,h5,h6)>a:before {
    background-color: var(--c-primary);
    border-radius: 2px;
    content: "";
    flex-shrink: 0;
    height: 1em;
    margin-inline-end:.5em;width: 4px
}

.article .img-caption {
    display: block!important;
    margin: 1em auto;
    text-align: center!important
}

.article .img-caption img {
    cursor: zoom-in;
    height: auto;
    max-width: 100%
}

.article .img-caption figcaption {
    color: var(--c-text-2);
    font-size: .8em;
    margin-top: .5em;
    text-align: center
}

.article [data-type=gallery] {
    margin: 2rem 0
}

.article [data-type=gallery] [data-type=gallery-group],.article [data-type=gallery]>div {
    gap: 16px!important
}

.article [data-type=gallery] [data-aspect-ratio] {
    backface-visibility: hidden;
    background: var(--c-bg-2);
    border-radius: 16px;
    box-shadow: 0 1px 2px #0000000d,0 4px 12px #0000000d;
    overflow: hidden;
    position: relative;
    transition: transform .4s cubic-bezier(.25,.8,.25,1),box-shadow .4s ease;
    z-index: 1
}

.article [data-type=gallery] [data-aspect-ratio]:after {
    background: linear-gradient(90deg,transparent 0,hsla(0,0%,100%,.3) 50%,transparent);
    content: "";
    height: 100%;
    left: -100%;
    pointer-events: none;
    position: absolute;
    top: 0;
    transform: skew(-25deg);
    transition: none;
    width: 50%;
    z-index: 2
}

.article [data-type=gallery] [data-type=gallery-image] {
    border-radius: inherit;
    display: block;
    height: 100%;
    transition: transform .5s ease;
    width: 100%
}

.article [data-type=gallery] [data-aspect-ratio]:hover {
    box-shadow: 0 14px 30px #00000026,inset 0 0 0 1px #ffffff80;
    transform: translateY(-6px);
    z-index: 10
}

.article [data-type=gallery] [data-aspect-ratio]:hover [data-type=gallery-image] {
    transform: scale(1.05)
}

.article [data-type=gallery] [data-aspect-ratio]:hover:after {
    left: 150%;
    transition: left .7s ease-in-out
}

@media(max-width: 640px) {
    .article [data-type=gallery] [data-type=gallery-group],.article [data-type=gallery]>div {
        gap:12px!important
    }

    .article [data-type=gallery] [data-type=gallery-group] {
        flex-direction: column!important
    }

    .article [data-type=gallery] [data-aspect-ratio] {
        border-radius: 12px;
        box-shadow: 0 2px 8px #0000000f
    }

    .article [data-type=gallery] [data-aspect-ratio]:active {
        transform: scale(.98)
    }

    .article [data-type=gallery] [data-aspect-ratio]:hover {
        box-shadow: 0 4px 12px #0000001a;
        transform: none
    }

    .article [data-type=gallery] [data-aspect-ratio]:after {
        display: none
    }
}

.article :where(menu,ol,ul):not([class]) {
    font-size: .95rem;
    margin: .5em 0;
    padding-inline-start:1.5em}

.article :where(menu,ol,ul):not([class]),.article :where(menu,ol,ul):not([class]) ol ol ol {
    list-style: revert
}

.article :where(menu,ol,ul):not([class]) ol,.article :where(menu,ol,ul):not([class]) ol ol ol ol {
    list-style-type: lower-alpha
}

.article :where(menu,ol,ul):not([class]) ol ol,.article :where(menu,ol,ul):not([class]) ol ol ol ol ol {
    list-style-type: lower-roman
}

.article :where(menu,ol,ul):not([class]) ol,.article :where(menu,ol,ul):not([class]) ul {
    margin-top: 0
}

.article :where(menu,ol,ul):not([class])>li {
    margin: .3em 0
}

.article :where(menu,ol,ul):not([class])>li::marker {
    color: var(--c-primary)
}

.article ul[data-type=taskList] {
    list-style: none;
    margin: .5em 0;
    padding-inline-start:0}

.article ul[data-type=taskList]>li[data-type=taskItem] {
    align-items: flex-start;
    display: flex;
    gap: .5em;
    margin: .3em 0
}

.article ul[data-type=taskList]>li[data-type=taskItem]>label {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    margin-top: .2em
}

.article ul[data-type=taskList]>li[data-type=taskItem]>label input[type=checkbox] {
    accent-color: var(--c-primary);
    cursor: pointer;
    height: 1.1em;
    width: 1.1em
}

.article ul[data-type=taskList]>li[data-type=taskItem]>label>span {
    display: none
}

.article ul[data-type=taskList]>li[data-type=taskItem]>div {
    flex: 1
}

.article ul[data-type=taskList]>li[data-type=taskItem]>div>p {
    margin: 0
}

.article ul[data-type=taskList]>li[data-type=taskItem][data-checked=true]>div {
    opacity: .6;
    text-decoration: line-through;
    text-decoration-color: var(--c-text-3)
}

.article blockquote {
    background-color: var(--c-bg-2);
    border-inline-start:3px solid var(--c-primary);border-radius: 0 .5rem .5rem 0;
    color: var(--c-text-2);
    margin: 1.5em 0;
    padding: .75rem 1rem .75rem 1.25rem;
    position: relative
}

.article blockquote p:first-child {
    margin-top: 0
}

.article blockquote p:last-child {
    margin-bottom: 0
}

.article img {
    max-width: 100%
}

.article img.icon {
    height: 1.4em;
    transform: translateY(-.1em);
    vertical-align: middle
}

.article img.image,.article img:not([class]) {
    border-radius: .5rem;
    box-shadow: 0 4px 12px #0000001a;
    display: block;
    margin: 1.5rem auto;
    transition: transform .2s,box-shadow .2s
}

.article img.image:hover,.article img:not([class]):hover {
    box-shadow: 0 8px 24px #00000026;
    transform: scale(1.02)
}

.article img.no-lightbox {
    cursor: default
}

.article img.no-lightbox:hover {
    transform: none
}

.article figcaption {
    color: var(--c-text-3);
    font-size: .85em;
    margin-top: -.5rem;
    text-align: center
}

.article hr {
    border: none;
    border-top: 3px dashed var(--c-border);
    margin: 3em 0
}

.article b,.article strong {
    background: linear-gradient(var(--c-primary-soft),var(--c-primary-soft)) no-repeat bottom/100% 30%;
    font-weight: 600
}

.article em,.article i {
    color: var(--c-text-2);
    font-style: italic
}

.article del,.article s {
    opacity: .5;
    text-decoration: line-through;
    text-decoration-color: var(--c-text-3)
}

.article ins,.article u {
    text-decoration: underline;
    text-decoration-color: var(--c-primary);
    text-underline-offset: .2em
}

.article mark {
    background-color: var(--c-primary-soft);
    border-radius: .2em;
    color: inherit;
    padding: .1em .2em
}

.article sub,.article sup {
    color: var(--c-text-2);
    font-size: .75em
}

.article abbr[title] {
    cursor: help;
    text-decoration: underline dotted;
    text-underline-offset: .2em
}

.article kbd {
    border: 1px solid var(--c-border);
    border-radius: .25em;
    box-shadow: 0 2px 0 var(--c-border);
    display: inline-block
}

.article :not(pre)>code,.article kbd {
    background-color: var(--c-bg-2);
    font-family: var(--font-monospace);
    font-size: .85em;
    padding: .1em .4em
}

.article :not(pre)>code {
    border: 1px solid var(--c-border);
    border-radius: 4px;
    margin: 0 .1em;
    white-space: break-spaces
}

@supports (color: color-mix(in srgb,transparent,transparent)) {
    .article :not(pre)>code {
        background-color:color-mix(in srgb,currentcolor 5%,transparent);
        border-color: color-mix(in srgb,currentcolor 15%,transparent)
    }
}

.article pre {
    background-color: var(--c-bg-2);
    border-radius: .5em;
    color: var(--c-text);
    font-family: var(--font-monospace);
    font-size: .8125rem;
    line-height: 1.5;
    margin: 1em 0;
    overflow: auto;
    padding: 1em;
    position: relative;
    tab-size: 4
}

.article pre code {
    background: none;
    border: none;
    color: inherit;
    font-size: inherit;
    padding: 0
}

.article pre[data-language]:before {
    background-color: var(--c-bg-3);
    border-radius: 0 .5em;
    color: var(--c-text-3);
    content: attr(data-language);
    font-size: .75em;
    padding: .2em .6em;
    position: absolute;
    right: 0;
    text-transform: uppercase;
    top: 0
}

.article .hljs {
    background: transparent;
    color: var(--c-text)
}

.article table {
    border-collapse: collapse;
    border-radius: .5em;
    font-size: .9em;
    margin: 1em 0;
    overflow: hidden;
    width: 100%
}

.article table td,.article table th {
    border: 1px solid var(--c-border);
    padding: .6em 1em;
    text-align: start
}

.article table th {
    background-color: var(--c-bg-2);
    color: var(--c-text);
    font-weight: 600
}

.article table tr:nth-child(2n) td {
    background-color: var(--c-bg-soft)
}

.article table tr:hover td {
    background-color: var(--c-primary-soft)
}

.article a:not([class]) {
    background: linear-gradient(var(--c-primary-soft),var(--c-primary-soft)) no-repeat bottom/100% .1em;
    color: var(--c-primary);
    margin: -.1em -.2em;
    padding: .1em .2em;
    text-decoration: none;
    transition: all .2s
}

.article a:not([class]):hover {
    background-size: 100% 100%;
    border-radius: .3em
}

.article dl {
    margin: 1em 0
}

.article dl dt {
    color: var(--c-text);
    font-weight: 600;
    margin-top: .5em
}

.article dl dd {
    color: var(--c-text-2);
    margin-inline-start:1.5em}

.article details {
    background-color: var(--c-bg-soft);
    border: 1px solid var(--c-border);
    border-radius: .5em;
    margin: 1em 0;
    padding: .5em 1em
}

.article details summary {
    color: var(--c-text);
    cursor: pointer;
    font-weight: 500
}

.article details summary:hover {
    color: var(--c-primary)
}

.article details summary::marker {
    color: var(--c-primary)
}

.article details[open] {
    padding-bottom: 1em
}

.post-footer {
    background-color: var(--c-bg-2);
    border: 1px solid var(--c-border);
    border-radius: 1rem;
    margin: 2rem .5rem
}

.post-footer section {
    padding: 1rem
}

.post-footer section+section {
    border-top: 1px solid var(--c-border)
}

.post-footer .title {
    color: var(--c-text);
    font-weight: 700
}

.post-footer .content {
    font-size: .9rem;
    margin-top: .5em
}

.post-footer .content a {
    background: linear-gradient(var(--c-primary-soft),var(--c-primary-soft)) no-repeat bottom/100% .1em;
    border-radius: .25em;
    color: var(--c-primary);
    margin: -.1em -.2em;
    padding: .1em .2em;
    text-decoration: none;
    transition: all .2s ease
}

.post-footer .content a svg {
    transition: transform .2s ease
}

.post-footer .content a:hover {
    background-size: 100% 100%
}

.post-footer .content a:hover svg {
    transform: scale(1.1) rotate(-5deg)
}

.post-footer .content p {
    margin: 0
}

.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5em
}

.tags-list .tag-item {
    background-color: var(--c-bg-soft);
    border-radius: .3em;
    color: var(--c-text-2);
    font-size: .85em;
    padding: .2em .6em;
    text-decoration: none!important;
    transition: all .2s
}

.tags-list .tag-item:hover {
    background-color: var(--c-primary-soft);
    color: var(--c-primary)
}

.surround-post {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin: 3rem 1rem;
    flex-direction: column;
}

@media(max-width: 640px) {
    .surround-post {
        flex-direction:column;
        gap: .75rem;
        margin: 2rem .5rem
    }
}

.surround-link {
    align-items: center;
    display: flex;
    gap: .5em;
    transition: color .2s;
    -webkit-tap-highlight-color: transparent
}

.surround-link.no-link {
    opacity: .4;
    -webkit-user-select: none;
    user-select: none
}

.surround-link.align-end {
    flex-direction: row-reverse;
    text-align: end
}

.surround-link>.surround-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    transition: transform .2s
}

.surround-link>.surround-text>.title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.surround-link>.surround-text>.date {
    display: block;
    font-size: .8rem;
    opacity: .6
}

.surround-link>[class^=icon-] {
    font-size: 2rem;
    opacity: .5;
    transition: all .2s
}

.surround-link:not(.no-link):hover {
    color: var(--c-primary)
}

.surround-link:not(.no-link):hover>.surround-text {
    transform: translate(-1em)
}

.surround-link:not(.no-link):hover.align-end>.surround-text {
    transform: translate(1em)
}

.surround-link:not(.no-link):hover>[class^=icon-] {
    opacity: .2;
    transform: scale(2)
}

.z-comment {
    margin: 3rem 1rem
}

.z-comment>h3 {
    font-size: 1.25rem;
    margin-top: 3rem
}

.poster-modal {
    align-items: center;
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 1rem;
    position: fixed;
    z-index: 1000
}

.poster-modal-overlay {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    background-color: #0009;
    inset: 0;
    position: absolute
}

.poster-modal-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 90vh;
    max-width: 400px;
    overflow: auto;
    position: relative;
    z-index: 1
}

.poster-close {
    align-items: center;
    background: #fff3;
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: flex;
    font-size: 1.2em;
    height: 2rem;
    justify-content: center;
    position: absolute;
    right: 0;
    top: -2.5rem;
    transition: background .2s;
    width: 2rem
}

.poster-close:hover {
    background: #ffffff4d
}

.poster-card {
    border-radius: 1rem;
    box-shadow: 0 20px 60px #0000004d;
    font-family: system-ui,sans-serif;
    width: 360px
}

.poster-card,.poster-header {
    background: linear-gradient(135deg,#667eea,#764ba2);
    overflow: hidden
}

.poster-header {
    aspect-ratio: 2/1;
    height: auto;
    line-height: 0;
    position: relative
}

.poster-cover {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%
}

.poster-gradient {
    background: linear-gradient(180deg,transparent 0,rgba(0,0,0,.08) 42%,rgba(0,0,0,.24) 70%,rgba(0,0,0,.5));
    inset: 0;
    pointer-events: none;
    position: absolute
}

.poster-body {
    background: #fff;
    padding: 1.5rem
}

.poster-title {
    color: #1a1a2e;
    font-size: 1.25rem;
    font-weight: 700;
    -webkit-line-clamp: 2;
    line-height: 1.4;
    margin: 0 0 .75rem
}

.poster-excerpt,.poster-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.poster-excerpt {
    color: #666;
    font-size: .875rem;
    -webkit-line-clamp: 3;
    line-height: 1.6;
    margin: 0 0 1rem
}

.poster-meta {
    color: #999;
    display: flex;
    font-size: .75rem;
    gap: 1rem
}

.poster-footer {
    align-items: center;
    background: #f8f9fa;
    border-top: 1px solid #eee;
    display: flex;
    gap: 1rem;
    padding: 1rem 1.5rem
}

.poster-qrcode {
    background: #fff;
    border-radius: 8px;
    flex-shrink: 0;
    height: 80px;
    padding: 4px;
    width: 80px
}

.poster-qrcode canvas,.poster-qrcode img {
    height: 100%!important;
    width: 100%!important
}

.poster-site {
    flex: 1
}

.poster-site-name {
    color: #333;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: .25rem
}

.poster-site-tip {
    color: #999;
    font-size: .75rem
}

.poster-actions {
    display: flex;
    justify-content: center;
    padding-top: .5rem
}

.poster-actions .z-btn.primary {
    align-items: center;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: .5rem;
    color: #333;
    cursor: pointer;
    display: inline-flex;
    font-size: .9rem;
    gap: .5rem;
    padding: .6rem 1.25rem;
    transition: all .2s
}

.poster-actions .z-btn.primary:hover {
    background: #f5f5f5;
    border-color: #ccc
}

.poster-actions .z-btn.primary:disabled {
    cursor: not-allowed;
    opacity: .6
}

.edit-post-btn {
    align-items: center;
    background-color: var(--ld-bg-card);
    border: 1px solid var(--c-border);
    border-radius: 50%;
    bottom: calc(2.5rem + 60px);
    box-shadow: 0 4px 12px #00000014;
    color: var(--c-text);
    cursor: pointer;
    display: flex;
    font-size: 1rem;
    height: 50px;
    justify-content: center;
    overflow: hidden;
    position: fixed;
    right: 2.5rem;
    transition-duration: .3s;
    width: 50px;
    z-index: 99
}

@media(max-width: 768px) {
    .edit-post-btn {
        display:none
    }
}

.edit-post-btn:before {
    bottom: -20px;
    color: #fff;
    content: "编辑文章";
    font-size: 0;
    position: absolute;
    white-space: nowrap
}

.edit-post-btn:hover {
    background-color: var(--c-primary);
    border-color: var(--c-primary);
    border-radius: 50px;
    box-shadow: 0 8px 20px #00000026;
    color: #fff;
    transform: translateY(-4px);
    transition-duration: .3s;
    width: 120px
}

.edit-post-btn:hover>span {
    transform: translateY(-200%);
    transition-duration: .3s
}

.edit-post-btn:hover:before {
    bottom: unset;
    font-size: 13px;
    opacity: 1;
    transition-duration: .3s
}

.edit-page-btn,.edit-post-btn>span {
    transition-duration: .3s
}

.edit-page-btn {
    align-items: center;
    background-color: var(--ld-bg-card);
    border: 1px solid var(--c-border);
    border-radius: 50%;
    bottom: calc(2.5rem + 60px);
    box-shadow: 0 4px 12px #00000014;
    color: var(--c-text);
    cursor: pointer;
    display: flex;
    font-size: 1rem;
    height: 50px;
    justify-content: center;
    overflow: hidden;
    position: fixed;
    right: 2.5rem;
    width: 50px;
    z-index: 99
}

@media(max-width: 768px) {
    .edit-page-btn {
        display:none
    }
}

.edit-page-btn:before {
    bottom: -20px;
    color: #fff;
    content: "编辑页面";
    font-size: 0;
    position: absolute;
    white-space: nowrap
}

.edit-page-btn:hover {
    background-color: var(--c-primary);
    border-color: var(--c-primary);
    border-radius: 50px;
    box-shadow: 0 8px 20px #00000026;
    color: #fff;
    transform: translateY(-4px);
    transition-duration: .3s;
    width: 120px
}

.edit-page-btn:hover>span {
    transform: translateY(-200%);
    transition-duration: .3s
}

.edit-page-btn:hover:before {
    bottom: unset;
    font-size: 13px;
    opacity: 1;
    transition-duration: .3s
}

.edit-page-btn>span {
    transition-duration: .3s
}

.comment-title {
    align-items: center;
    color: var(--c-text);
    display: flex;
    font-family: var(--font-creative);
    font-size: 1.25rem;
    font-weight: 700;
    gap: .5rem;
    margin: 3rem 1rem 1rem
}

.comment-title span {
    color: var(--c-primary);
    font-size: 1.5rem
}

.z-comment {
    margin: 0 1rem 2rem;
    padding: 1.5rem 0;
    --halo-cw-primary-1-color: var(--c-primary);
    --halo-cw-primary-2-color: color-mix(in srgb,var(--c-primary) 20%,transparent);
    --halo-cw-primary-3-color: color-mix(in srgb,var(--c-primary) 10%,transparent);
    --halo-cw-text-1-color: var(--c-text);
    --halo-cw-text-2-color: var(--c-text-2);
    --halo-cw-text-3-color: var(--c-text-3);
    --halo-cw-muted-1-color: var(--c-border);
    --halo-cw-muted-2-color: var(--c-bg-soft);
    --halo-cw-muted-3-color: var(--c-bg);
    --halo-cw-base-rounded: .75rem;
    --halo-cw-avatar-rounded: 50%;
    --halo-cw-avatar-size: 2.5rem;
    --halo-cw-base-font-size: .95rem;
    --halo-cw-base-font-family: var(--font-sans)
}

.z-comment .comment-widget .editor-wrapper,.z-comment .comment-widget [class*=editor] {
    background: var(--c-bg);
    border-color: var(--c-border);
    border-radius: .75rem
}

.z-comment .comment-widget .editor-wrapper:focus-within,.z-comment .comment-widget [class*=editor]:focus-within {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb,var(--c-primary) 15%,transparent)
}

.z-comment .comment-widget .toolbar button,.z-comment .comment-widget [class*=toolbar] button {
    border-radius: .375rem
}

.z-comment .comment-widget .toolbar button:hover,.z-comment .comment-widget [class*=toolbar] button:hover {
    background: var(--c-bg-soft);
    color: var(--c-primary)
}

.z-comment .comment-widget [class*=submit],.z-comment .comment-widget button[type=submit] {
    border-radius: .5rem;
    font-weight: 500;
    transition: all .2s
}

.z-comment .comment-widget [class*=submit]:hover,.z-comment .comment-widget button[type=submit]:hover {
    filter: brightness(1.05);
    transform: translateY(-1px)
}

.z-comment .comment-widget [class*=logout],.z-comment .comment-widget a[href*=logout] {
    background: var(--c-bg-soft);
    border-radius: 1em;
    color: var(--c-text-2);
    font-size: .8rem;
    padding: .25em .6em
}

.z-comment .comment-widget [class*=logout]:hover,.z-comment .comment-widget a[href*=logout]:hover {
    background: var(--c-bg);
    color: var(--c-text)
}

.z-comment .comment-list .comment-item,.z-comment .comment-list [class*=comment-item],.z-comment [class*=comment-list] .comment-item,.z-comment [class*=comment-list] [class*=comment-item] {
    border-bottom: 1px solid var(--c-border-soft);
    padding: 1rem 0
}

.z-comment .comment-list .comment-item:last-child,.z-comment .comment-list [class*=comment-item]:last-child,.z-comment [class*=comment-list] .comment-item:last-child,.z-comment [class*=comment-list] [class*=comment-item]:last-child {
    border-bottom: none
}

.z-comment .comment-list .avatar,.z-comment .comment-list [class*=avatar],.z-comment [class*=comment-list] .avatar,.z-comment [class*=comment-list] [class*=avatar] {
    border-radius: 50%;
    box-shadow: 0 2px 8px #00000014
}

.z-comment .comment-list .username,.z-comment .comment-list [class*=author],.z-comment .comment-list [class*=name],.z-comment [class*=comment-list] .username,.z-comment [class*=comment-list] [class*=author],.z-comment [class*=comment-list] [class*=name] {
    color: var(--c-text);
    font-weight: 600
}

.z-comment .comment-list .time,.z-comment .comment-list [class*=date],.z-comment .comment-list [class*=time],.z-comment .comment-list time,.z-comment [class*=comment-list] .time,.z-comment [class*=comment-list] [class*=date],.z-comment [class*=comment-list] [class*=time],.z-comment [class*=comment-list] time {
    color: var(--c-text-3);
    font-size: .8rem
}

.z-comment .comment-list .content,.z-comment .comment-list [class*=content],.z-comment [class*=comment-list] .content,.z-comment [class*=comment-list] [class*=content] {
    color: var(--c-text-1);
    line-height: 1.7
}

.z-comment .comment-list .actions a,.z-comment .comment-list .actions button,.z-comment .comment-list [class*=actions] a,.z-comment .comment-list [class*=actions] button,.z-comment [class*=comment-list] .actions a,.z-comment [class*=comment-list] .actions button,.z-comment [class*=comment-list] [class*=actions] a,.z-comment [class*=comment-list] [class*=actions] button {
    color: var(--c-text-3);
    font-size: .85rem
}

.z-comment .comment-list .actions a:hover,.z-comment .comment-list .actions button:hover,.z-comment .comment-list [class*=actions] a:hover,.z-comment .comment-list [class*=actions] button:hover,.z-comment [class*=comment-list] .actions a:hover,.z-comment [class*=comment-list] .actions button:hover,.z-comment [class*=comment-list] [class*=actions] a:hover,.z-comment [class*=comment-list] [class*=actions] button:hover {
    color: var(--c-primary)
}

.z-comment .comment-count,.z-comment [class*=comment-count],.z-comment [class*=total] {
    color: var(--c-text);
    font-weight: 600;
    margin-bottom: 1rem
}

.z-comment .twikoo :where(.tk-content,.tk-preview) {
    --twikoo-code-bg: var(--c-bg-2);
    --twikoo-code-border: var(--c-border);
    --twikoo-code-text: var(--c-text-1);
    --twikoo-code-muted: var(--c-text-3);
    --twikoo-code-keyword: #7c3aed;
    --twikoo-code-string: #15803d;
    --twikoo-code-function: #2563eb;
    --twikoo-code-number: #c2410c;
    --twikoo-code-operator: #be123c
}

.dark .z-comment .twikoo :where(.tk-content,.tk-preview) {
    --twikoo-code-keyword: #c084fc;
    --twikoo-code-string: #86efac;
    --twikoo-code-function: #7dd3fc;
    --twikoo-code-number: #fdba74;
    --twikoo-code-operator: #fda4af
}

.z-comment .twikoo :where(.tk-content,.tk-preview) p {
    margin: .5rem 0
}

.z-comment .twikoo :where(.tk-content,.tk-preview) :where(strong,b) {
    color: var(--c-text);
    font-weight: 700
}

.z-comment .twikoo :where(.tk-content,.tk-preview) :where(em,i) {
    color: var(--c-text-2);
    font-style: italic
}

.z-comment .twikoo :where(.tk-content,.tk-preview) :where(del,s) {
    opacity: .65;
    text-decoration: line-through;
    text-decoration-color: var(--c-text-3)
}

.z-comment .twikoo :where(.tk-content,.tk-preview) :where(ol,ul) {
    list-style: revert;
    margin: .5rem 0;
    padding-inline-start:1.5rem}

.z-comment .twikoo :where(.tk-content,.tk-preview) a {
    color: var(--c-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .15em
}

.z-comment .twikoo :where(.tk-content,.tk-preview) blockquote {
    background: color-mix(in srgb,var(--c-primary) 8%,transparent);
    border-left: 3px solid var(--c-primary);
    border-radius: .25rem;
    color: var(--c-text-2);
    margin: .75rem 0;
    padding: .25rem 0 .25rem .75rem
}

.z-comment .twikoo :where(.tk-content,.tk-preview) pre {
    background: var(--twikoo-code-bg);
    border: 1px solid var(--twikoo-code-border);
    border-radius: .65rem;
    color: var(--twikoo-code-text);
    font-family: var(--font-monospace);
    font-size: .875rem;
    line-height: 1.7;
    margin: .75rem 0;
    overflow-x: auto;
    padding: .9rem;
    tab-size: 2;
    text-shadow: none
}

.z-comment .twikoo :where(.tk-content,.tk-preview) pre code {
    background: transparent;
    border: 0;
    color: inherit;
    display: block;
    font: inherit;
    margin: 0;
    overflow-wrap: normal;
    padding: 0;
    white-space: pre;
    word-break: normal
}

.z-comment .twikoo :where(.tk-content,.tk-preview) :not(pre)>code {
    background: var(--c-bg-soft);
    border: 1px solid var(--c-border);
    border-radius: 4px;
    font-family: var(--font-monospace);
    font-size: .9em;
    margin: 0 .1em;
    padding: .1em .35em
}

.z-comment .twikoo :where(.tk-content,.tk-preview) div.code-toolbar {
    background: var(--twikoo-code-bg);
    border: 1px solid var(--twikoo-code-border);
    border-radius: .65rem;
    margin: .75rem 0;
    overflow: hidden;
    position: relative
}

.z-comment .twikoo :where(.tk-content,.tk-preview) div.code-toolbar>pre {
    background: transparent;
    border: 0;
    border-radius: 0;
    margin: 0;
    padding-top: 2.35rem
}

.z-comment .twikoo :where(.tk-content,.tk-preview) div.code-toolbar>.toolbar {
    opacity: 1;
    right: .55rem;
    top: .45rem
}

.z-comment .twikoo :where(.tk-content,.tk-preview) div.code-toolbar>.toolbar .toolbar-item {
    align-items: center;
    display: inline-flex
}

.z-comment .twikoo :where(.tk-content,.tk-preview) div.code-toolbar>.toolbar .toolbar-item>button,.z-comment .twikoo :where(.tk-content,.tk-preview) div.code-toolbar>.toolbar .toolbar-item>span {
    background: var(--c-bg);
    border: 1px solid var(--twikoo-code-border);
    border-radius: .35rem;
    box-shadow: none;
    color: var(--twikoo-code-muted);
    font: .75rem/1.4 var(--font-sans);
    padding: .15rem .45rem
}

.z-comment .twikoo :where(.tk-content,.tk-preview) div.code-toolbar>.toolbar .toolbar-item>button:hover {
    border-color: var(--c-primary);
    color: var(--c-primary)
}

.z-comment .twikoo :where(.tk-content,.tk-preview) :where(pre[class*=language-],code[class*=language-]) {
    background: transparent;
    color: var(--twikoo-code-text);
    text-shadow: none
}

.z-comment .twikoo :where(.tk-content,.tk-preview) :where(.token.comment,.token.prolog,.token.doctype,.token.cdata) {
    color: var(--twikoo-code-muted);
    font-style: italic
}

.z-comment .twikoo :where(.tk-content,.tk-preview) :where(.token.punctuation) {
    color: var(--c-text-2)
}

.z-comment .twikoo :where(.tk-content,.tk-preview) :where(.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol,.token.deleted) {
    color: var(--twikoo-code-number)
}

.z-comment .twikoo :where(.tk-content,.tk-preview) :where(.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted) {
    color: var(--twikoo-code-string)
}

.z-comment .twikoo :where(.tk-content,.tk-preview) :where(.token.operator,.token.entity,.token.url,.token.variable) {
    color: var(--twikoo-code-operator)
}

.z-comment .twikoo :where(.tk-content,.tk-preview) :where(.token.atrule,.token.attr-value,.token.keyword) {
    color: var(--twikoo-code-keyword)
}

.z-comment .twikoo :where(.tk-content,.tk-preview) :where(.token.function,.token.class-name) {
    color: var(--twikoo-code-function)
}

.z-comment .twikoo :where(.tk-content,.tk-preview) :where(.token.regex,.token.important) {
    color: var(--c-primary)
}

.z-comment .twikoo :where(.tk-content,.tk-preview) hr {
    border-top: 1px solid var(--c-border);
    margin: .75rem 0
}

.z-comment .twikoo :where(.tk-content,.tk-preview) :where(h1,h2,h3,h4,h5,h6) {
    color: var(--c-text);
    font-weight: 600;
    line-height: 1.4;
    margin: 1.2em 0 .6em
}

.z-comment .twikoo :where(.tk-content,.tk-preview) h1 {
    font-size: 1.5em
}

.z-comment .twikoo :where(.tk-content,.tk-preview) h2 {
    font-size: 1.3em
}

.z-comment .twikoo :where(.tk-content,.tk-preview) h3 {
    font-size: 1.15em
}

.z-comment .twikoo :where(.tk-content,.tk-preview) h4 {
    font-size: 1.05em
}

.z-comment .twikoo :where(.tk-content,.tk-preview) h5 {
    font-size: 1em
}

.z-comment .twikoo :where(.tk-content,.tk-preview) h6 {
    color: var(--c-text-2);
    font-size: .95em
}

.twikoo-config-tip {
    background: var(--c-bg-soft);
    border: 1px solid var(--c-border);
    border-radius: .6rem;
    color: var(--c-text-2);
    font-size: .875rem;
    line-height: 1.6;
    margin-top: .75rem;
    padding: .65rem .8rem
}

.archive {
    margin: 1rem
}

.archive-group {
    margin: 1rem 0 3rem
}

@keyframes float-in {
    0% {
        opacity: 0;
        transform: translateY(10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.archive-title {
    color: transparent;
    display: flex;
    font-size: min(1.5em,5vw);
    gap: 1em;
    justify-content: space-between;
    opacity: .5;
    position: sticky;
    top: 0;
    transition: color .2s
}

.archive-title::selection,:hover>.archive-title {
    color: var(--c-text-3)
}

:hover>.archive-title .archive-age {
    opacity: 0
}

.archive-title .archive-age,.archive-title>.archive-year {
    font-family: var(--font-stroke-free,var(--font-sans));
    font-size: 3em;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    line-height: 1;
    margin-bottom: -.3em;
    -webkit-mask-image: linear-gradient(#fff 50%,transparent);
    mask-image: linear-gradient(#fff 50%,transparent);
    z-index: -1;
    -webkit-text-stroke: 1px var(--c-text-3)
}

.archive-title>.archive-age {
    inset-inline-end: 0;
    position: absolute;
    transition: opacity .2s
}

.archive-title>.archive-age>.age-label {
    font-size: .5em;
    vertical-align: super
}

.archive-title>.archive-info {
    column-gap: .5em;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end
}

.archive-list,.tag-list {
    list-style: none;
    margin: 0;
    padding: 0
}

.archive-list .pinned-post,.tag-list .pinned-post {
    display: inline-block
}

.archive-list .pinned-post .icon,.tag-list .pinned-post .icon {
    fill: var(--c-danger);
    height: 16px;
    margin-left: 4px;
    transition: all .3s ease;
    width: 16px
}

.archive-list .pinned-post:hover .icon,.tag-list .pinned-post:hover .icon {
    fill: var(--c-danger-dark);
    transform: scale(1.1)
}

.article-item {
    align-items: center;
    animation: float-in .2s var(--delay,0s) backwards;
    display: flex;
    gap: .5em;
    margin: .2em 0;
    transition: all .2s
}

@media(max-width: 768px) {
    .article-item {
        font-size:.9em
    }
}

.article-item>time {
    display: inline-block;
    font-family: var(--font-monospace);
    opacity: .4;
    transition: opacity .2s
}

.article-item:hover>time {
    opacity: 1
}

.article-title {
    color: var(--c-text)
}

.article-link {
    border-radius: .3em;
    flex-grow: 1;
    overflow: hidden;
    padding: .3em .6em;
    position: relative;
    transition: all .2s
}

.article-link:hover {
    background-color: var(--c-bg-soft)
}

.article-link .article-cover {
    height: 100%;
    inset-inline-end: 0;
    margin: 0;
    mask-image: linear-gradient(to var(--end,right),transparent 28%,#000 100%);
    -webkit-mask-image: linear-gradient(to var(--end,right),transparent 28%,#000 100%);
    object-fit: cover;
    opacity: .65;
    position: absolute;
    top: 0;
    transition: all .2s;
    width: min(50%,180px);
    z-index: -1
}

.article-link:hover .article-cover {
    object-position: center 43.5%;
    opacity: 1;
    width: 50%
}

.archive-simple-header {
    align-items: flex-start;
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: space-between;
    margin-bottom: 1.5rem
}

.archive-back {
    align-items: center;
    background-color: var(--c-bg-soft);
    border-radius: .5em;
    color: var(--c-text-3);
    display: inline-flex;
    font-size: .85rem;
    gap: .3em;
    padding: .4em .8em;
    text-decoration: none;
    transition: all .2s
}

.archive-back:hover {
    background-color: var(--c-bg-2);
    color: var(--c-text)
}

.archive-simple-info .archive-name {
    align-items: center;
    color: var(--c-text);
    display: flex;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 .25rem
}

.archive-simple-info .archive-name .archive-hash {
    color: var(--c-primary);
    margin-right: .1em
}

.archive-simple-info .archive-meta {
    color: var(--c-text-3);
    font-size: .9rem;
    margin: 0
}

.archive-simple-info .archive-meta strong {
    color: var(--c-text);
    font-weight: 600
}

.archive-page {
    margin: 1rem
}

.archive-page-header {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 1rem;
    min-height: 180px;
    overflow: hidden;
    padding: 3rem 1.5rem;
    position: relative;
    text-align: center
}

.archive-page-header:has(.archive-cover) {
    min-height: 220px
}

.archive-page-header:has(.archive-cover):before {
    background: linear-gradient(180deg,#0000004d,#00000080);
    content: "";
    inset: 0;
    position: absolute;
    z-index: 1
}

.archive-page-header:has(.archive-cover) .archive-page-info {
    color: #fff
}

.archive-page-header:has(.archive-cover) .archive-page-title {
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,.3)
}

.archive-page-header:has(.archive-cover) .archive-page-title [class^=icon-] {
    color: #fff
}

.archive-page-header:has(.archive-cover) .archive-description {
    color: #ffffffe6
}

.archive-page-header:has(.archive-cover) .archive-meta {
    color: #fffc
}

.archive-page-header:has(.archive-cover) .archive-meta .meta-item {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    background: #ffffff26;
    border-color: #fff3;
    color: #fff
}

.archive-page-info {
    position: relative;
    z-index: 2
}

.archive-page-title {
    align-items: center;
    color: var(--c-text);
    display: flex;
    font-size: 1.6em;
    gap: .5em;
    justify-content: center;
    margin: 0 0 .5rem
}

.archive-page-title [class^=icon-] {
    color: var(--c-primary)
}

.archive-description {
    color: var(--c-text-2);
    font-size: .9em;
    line-height: 1.6;
    margin: 0 0 1rem;
    max-width: 400px
}

.archive-meta {
    color: var(--c-text-3);
    display: flex;
    flex-wrap: wrap;
    font-size: .85em;
    gap: .5rem;
    justify-content: center
}

.archive-meta .meta-item {
    align-items: center;
    background: var(--c-bg-soft);
    border: 1px solid var(--c-border);
    border-radius: 1em;
    display: inline-flex;
    gap: .3em;
    padding: .25em .75em
}

.archive-cover {
    height: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    width: 100%;
    z-index: 0
}

.archive .pagination-wrapper .page-info,.archive+.pagination-wrapper .page-info {
    color: var(--c-text-2);
    font-size: .9rem;
    padding: 0 1rem
}

.tags-archive {
    padding: 1rem
}

.tags-header {
    align-items: baseline;
    border-bottom: 1px solid var(--c-border);
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem
}

.tags-title {
    align-items: center;
    color: var(--c-text);
    display: flex;
    font-size: 1.5rem;
    font-weight: 600;
    gap: .5em;
    margin: 0
}

.tags-title>span:first-child {
    color: var(--c-primary)
}

.tags-count {
    color: var(--c-text-3);
    font-size: .9rem;
    margin: 0
}

.tags-count strong {
    color: var(--c-primary);
    font-weight: 600
}

.tags-cloud {
    align-items: center;
    animation: float-in .4s ease-out;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem
}

.tag-item {
    align-items: center;
    animation: float-in .3s ease-out backwards;
    animation-delay: var(--delay,0s);
    background-color: var(--c-bg-soft);
    border-radius: .5em;
    color: var(--c-text-2);
    display: inline-flex;
    font-size: .9rem;
    gap: .4em;
    padding: .5em 1em;
    text-decoration: none;
    transition: all .25s cubic-bezier(.4,0,.2,1)
}

.tag-item:hover {
    background-color: var(--c-primary);
    box-shadow: 0 4px 12px var(--c-primary-soft);
    color: #fff;
    transform: translateY(-2px)
}

.tag-item:hover .tag-count {
    background-color: #fff3;
    color: inherit
}

.tags-cloud .tag-name {
    font-weight: 500
}

.tags-cloud .tag-count {
    background-color: var(--c-bg-2);
    border-radius: .25em;
    display: inline-flex;
    font-size: .75em;
    font-weight: 600;
    height: 1.5em;
    min-width: 1.5em;
    padding: 0 .4em;
    transition: all .2s
}

.tags-cloud .tag-count,.tags-empty {
    align-items: center;
    color: var(--c-text-3);
    justify-content: center
}

.tags-empty {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 4rem 2rem
}

.tags-empty>span:first-child {
    font-size: 4rem;
    opacity: .5
}

.tags-empty p {
    font-size: 1rem;
    margin: 0
}

.categories-page {
    margin: 1rem
}

.categories-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill,minmax(200px,1fr))
}

.category-card {
    animation: float-in .3s var(--delay,0s) backwards;
    display: flex;
    flex-direction: column;
    min-height: 120px;
    overflow: hidden;
    padding: 1.25rem;
    position: relative;
    transition: all .3s cubic-bezier(.4,0,.2,1)
}

.category-card:before {
    background: var(--category-color,var(--c-primary));
    border-radius: 50%;
    content: "";
    height: 100%;
    opacity: 0;
    position: absolute;
    right: -50%;
    top: -50%;
    transform: scale(0);
    transition: all .4s ease;
    width: 100%
}

.category-card:hover {
    border-color: var(--category-color,var(--c-primary));
    transform: translateY(-4px)
}

.category-card:hover:before {
    opacity: .05;
    transform: scale(3)
}

.category-card:hover .category-card-icon {
    transform: scale(1.1)
}

.category-card:hover .category-card-icon,.category-card:hover .category-card-title {
    color: var(--category-color,var(--c-primary))
}

.category-card-icon {
    color: var(--category-color,var(--c-text-3));
    font-size: 1.5em;
    margin-bottom: .75rem;
    transition: all .3s
}

.category-card-icon-image {
    border-radius: .3em;
    height: 1.5em;
    object-fit: cover;
    width: 1.5em
}

.category-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    position: relative
}

.category-card-title {
    color: var(--c-text);
    font-size: 1.1em;
    font-weight: 600;
    margin: 0 0 .25rem;
    transition: color .2s
}

.category-card-desc {
    color: var(--c-text-2);
    display: -webkit-box;
    flex: 1;
    font-size: .8em;
    -webkit-line-clamp: 2;
    margin: 0;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.category-card-footer {
    align-items: center;
    border-top: 1px dashed var(--c-border);
    display: flex;
    justify-content: space-between;
    margin-top: .75rem;
    padding-top: .75rem
}

.category-card-count {
    color: var(--category-color,var(--c-primary));
    font-size: .8em;
    font-weight: 500
}

.category-card-arrow {
    color: var(--c-text-3);
    font-size: 1em;
    transition: transform .2s
}

.category-card:hover .category-card-arrow {
    color: var(--category-color,var(--c-primary));
    transform: translate(4px)
}

.error-page {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    justify-content: center;
    margin: 1rem;
    padding: 2rem
}

.error-icon {
    color: var(--c-text-3);
    font-size: 5rem
}

.error-title {
    color: var(--c-text-2);
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    word-break: break-all
}

.error-hint {
    color: var(--c-text-3);
    font-size: 1rem;
    line-height: 1.6;
    text-align: center
}

.error-codeblock {
    background-color: var(--c-bg-2);
    border-radius: .5rem;
    max-width: 100%;
    max-width: 600px;
    overflow: hidden;
    width: 100%
}

.error-codeblock .codeblock-header {
    align-items: center;
    background-color: var(--c-bg-soft);
    border-bottom: 1px solid var(--c-border);
    display: flex;
    padding: .5rem 1rem
}

.error-codeblock .codeblock-filename {
    color: var(--c-text-3);
    font-family: var(--font-monospace);
    font-size: .8rem
}

.error-codeblock .codeblock-content {
    color: var(--c-text-2);
    font-family: var(--font-monospace);
    font-size: .85rem;
    line-height: 1.6;
    margin: 0;
    overflow-x: auto;
    padding: 1rem;
    text-align: start;
    white-space: pre-wrap;
    word-break: break-all
}

.error-codeblock .codeblock-content code {
    display: block
}

.error-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center
}

.error-btn {
    align-items: center;
    background-color: var(--c-primary);
    border: none;
    border-radius: .5em;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-size: .95rem;
    font-weight: 500;
    gap: .5em;
    padding: .75em 1.5em;
    text-decoration: none;
    transition: all .2s
}

.error-btn:hover {
    opacity: .9;
    transform: translateY(-1px)
}

.error-btn.error-btn-secondary {
    background-color: var(--c-bg-soft);
    color: var(--c-text-2)
}

.error-btn.error-btn-secondary:hover {
    background-color: var(--c-bg-2);
    color: var(--c-text);
    opacity: 1
}

.author-capsule {
    align-items: center;
    color: var(--c-text-2);
    display: inline-flex;
    font-size: .875rem;
    gap: .5rem;
    text-decoration: none;
    transition: all .2s
}

.author-capsule:hover {
    color: var(--c-primary)
}

.author-capsule img {
    border-radius: 50%;
    height: 1.25rem;
    object-fit: cover;
    width: 1.25rem
}

.author-profile {
    align-items: center;
    background: linear-gradient(135deg,var(--c-bg-2),var(--c-bg-3));
    border-radius: 1rem;
    box-shadow: 0 .2rem .5rem var(--ld-shadow);
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 1.5rem
}

@media(max-width: 640px) {
    .author-profile {
        flex-direction:column;
        padding: 1.25rem;
        text-align: center
    }
}

.author-avatar-wrapper {
    flex-shrink: 0
}

.author-avatar {
    border: 3px solid var(--c-bg);
    border-radius: 50%;
    box-shadow: 0 .2rem .5rem var(--ld-shadow);
    height: 80px;
    object-fit: cover;
    transition: transform .3s;
    width: 80px
}

.author-avatar:hover {
    transform: scale(1.05)
}

.author-avatar-placeholder {
    align-items: center;
    background-color: var(--c-bg-soft);
    border: 3px solid var(--c-bg);
    border-radius: 50%;
    display: flex;
    height: 80px;
    justify-content: center;
    width: 80px
}

.author-avatar-placeholder>span {
    color: var(--c-text-3);
    font-size: 3rem
}

.author-info {
    flex: 1;
    min-width: 180px
}

.author-name {
    color: var(--c-text);
    font-size: 1.5rem;
    margin: 0 0 .25rem
}

.author-bio {
    color: var(--c-text-2);
    font-size: .9rem;
    line-height: 1.5;
    margin: 0 0 .75rem
}

.author-meta {
    color: var(--c-text-3);
    display: flex;
    flex-wrap: wrap;
    font-size: .8rem;
    gap: .5rem 1.25rem
}

@media(max-width: 640px) {
    .author-meta {
        justify-content:center
    }
}

.meta-item {
    align-items: center;
    display: inline-flex;
    gap: .25rem
}

.meta-link {
    color: var(--c-text-3);
    transition: color .2s
}

.meta-link:hover {
    color: var(--c-primary)
}

.empty-state {
    align-items: center;
    color: var(--c-text-3);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center
}

.empty-state>span:first-child {
    font-size: 4rem;
    opacity: .5
}

.empty-state>p {
    font-size: 1rem;
    margin: 0
}

.shuttle {
    align-items: center;
    animation: shuttle-in .3s cubic-bezier(.34,1.56,.64,1);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: var(--c-bg-a80);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 20px;
    position: fixed;
    z-index: 9999
}

@keyframes shuttle-in {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.shuttle__card {
    animation: shuttle-card-in .35s cubic-bezier(.34,1.56,.64,1);
    background: var(--ld-bg-card);
    border: 1px solid var(--c-border);
    border-radius: 20px;
    box-shadow: 0 25px 50px -12px var(--ld-shadow);
    max-width: 380px;
    overflow: hidden;
    padding: 28px;
    position: relative;
    width: 100%
}

@keyframes shuttle-card-in {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(.9)
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

.shuttle__decor {
    border-radius: 50%;
    pointer-events: none;
    position: absolute
}

.shuttle__decor--1 {
    animation: shuttle-float 6s ease-in-out infinite;
    background: var(--c-primary);
    height: 150px;
    opacity: .08;
    right: -60px;
    top: -60px;
    width: 150px
}

.shuttle__decor--2 {
    animation: shuttle-float 8s ease-in-out infinite reverse;
    background: var(--c-primary);
    bottom: -40px;
    height: 100px;
    left: -40px;
    opacity: .05;
    width: 100px
}

@keyframes shuttle-float {
    0%,to {
        transform: translate(0)
    }

    50% {
        transform: translate(-10px,10px)
    }
}

.shuttle__close {
    align-items: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--c-text-3);
    cursor: pointer;
    display: flex;
    height: 32px;
    justify-content: center;
    position: absolute;
    right: 16px;
    top: 16px;
    transition: all .2s;
    width: 32px;
    z-index: 2
}

.shuttle__close:hover {
    background: var(--c-bg-soft);
    color: var(--c-text-1);
    transform: rotate(90deg)
}

.shuttle__close svg {
    height: 18px;
    width: 18px
}

.shuttle__header {
    margin-bottom: 20px
}

.shuttle__badge {
    align-items: center;
    background: var(--c-primary-soft);
    border-radius: 20px;
    color: var(--c-primary);
    display: inline-flex;
    font-size: 12px;
    font-weight: 600;
    gap: 6px;
    padding: 6px 12px
}

.shuttle__badge svg {
    height: 14px;
    width: 14px
}

.shuttle__site {
    align-items: center;
    background: var(--c-bg-soft);
    border-radius: 14px;
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    padding: 16px;
    transition: transform .2s
}

.shuttle__site:hover {
    transform: translate(4px)
}

.shuttle__icon {
    align-items: center;
    background: var(--c-bg-2);
    border: 1px solid var(--c-border);
    border-radius: 12px;
    box-shadow: 0 4px 12px -4px var(--ld-shadow);
    display: flex;
    flex-shrink: 0;
    height: 52px;
    justify-content: center;
    overflow: hidden;
    width: 52px
}

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

.shuttle__icon span {
    font-size: 22px
}

.shuttle__info {
    flex: 1;
    min-width: 0
}

.shuttle__name {
    color: var(--c-text);
    font-size: 17px;
    font-weight: 600;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.shuttle__desc {
    color: var(--c-text-3);
    display: -webkit-box;
    font-size: 13px;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    margin: 4px 0 0;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.shuttle__action {
    align-items: center;
    display: flex;
    gap: 16px
}

.shuttle__timer {
    flex-shrink: 0;
    height: 48px;
    position: relative;
    width: 48px
}

.shuttle__ring {
    height: 100%;
    transform: rotate(-90deg);
    width: 100%
}

.shuttle__ring circle:first-child {
    stroke: var(--c-border)
}

.shuttle__ring circle:last-child {
    stroke: var(--c-primary);
    transition: stroke-dashoffset 1s linear
}

.shuttle__count {
    color: var(--c-primary);
    font-size: 18px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    inset: 0;
    position: absolute
}

.shuttle__btn,.shuttle__count {
    align-items: center;
    display: flex;
    justify-content: center
}

.shuttle__btn {
    background: var(--c-primary);
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 14px -4px var(--c-primary);
    color: #fff;
    cursor: pointer;
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    gap: 8px;
    padding: 14px 24px;
    transition: all .2s
}

.shuttle__btn:hover:not(:disabled) {
    box-shadow: 0 8px 20px -4px var(--c-primary);
    transform: translateY(-2px)
}

.shuttle__btn:active:not(:disabled) {
    transform: translateY(0)
}

.shuttle__btn:disabled {
    cursor: not-allowed;
    opacity: .6;
    transform: none
}

.shuttle__btn svg {
    height: 18px;
    width: 18px
}

.music-capsule {
    backdrop-filter: saturate(1.08) blur(10px);
    -webkit-backdrop-filter: saturate(1.08) blur(10px);
    background: var(--ld-bg-card);
    background: color-mix(in srgb,var(--ld-bg-card),transparent 6%);
    background-clip: padding-box;
    border: 1px solid transparent;
    border-radius: 24px;
    bottom: 1.25rem;
    box-shadow: 0 10px 28px #0f172a1f,0 2px 8px #0f172a14;
    isolation: isolate;
    max-width: min(92vw,340px);
    opacity: 0;
    pointer-events: none;
    position: fixed;
    transform: translateZ(0);
    transition: transform .26s cubic-bezier(.22,1,.36,1),box-shadow .28s cubic-bezier(.22,1,.36,1),border-color .22s ease,background-color .22s ease,max-width .36s cubic-bezier(.22,1,.36,1),width .36s cubic-bezier(.22,1,.36,1),opacity .3s cubic-bezier(.22,1,.36,1);
    width: fit-content;
    will-change: transform,box-shadow,width,max-width;
    z-index: 980
}

.music-capsule.is-ready {
    opacity: 1;
    pointer-events: auto
}

.music-capsule .drag-handle {
    align-items: center;
    background: color-mix(in srgb,var(--ld-bg-card),transparent 10%);
    border: 1px solid color-mix(in srgb,var(--c-border),transparent 50%);
    border-radius: 4px 0 0 4px;
    border-right: none;
    cursor: grab;
    display: flex;
    height: 32px;
    justify-content: center;
    left: -14px;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity .2s ease,background-color .18s ease;
    width: 20px;
    z-index: 981
}

.music-capsule .drag-handle:hover {
    background: color-mix(in srgb,var(--c-bg-soft),transparent 5%)
}

.music-capsule .drag-handle:active {
    cursor: grabbing
}

.music-capsule .drag-handle span {
    color: var(--c-text-3);
    font-size: .85rem
}

.music-capsule.is-dragging .drag-handle,.music-capsule:hover .drag-handle {
    opacity: 1
}

@media(hover: none)and (pointer:coarse) {
    .music-capsule .drag-handle {
        opacity:1
    }
}

.music-capsule.is-dragging {
    box-shadow: 0 20px 48px #0f172a40,0 6px 16px #0f172a26;
    cursor: grabbing;
    touch-action: none;
    transition: none;
    -webkit-user-select: none;
    user-select: none
}

.music-capsule.is-dragging .drag-handle {
    cursor: grabbing;
    opacity: 1
}

.music-capsule:before {
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--c-border),transparent 25%);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute
}

.music-capsule.is-right {
    left: auto;
    right: 1.5rem
}

.music-capsule.is-left {
    left: 1.5rem;
    right: auto
}

.music-capsule.is-right-center {
    bottom: auto;
    left: auto;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%)
}

.music-capsule.is-left-center {
    bottom: auto;
    left: 1.5rem;
    right: auto;
    top: 50%;
    transform: translateY(-50%)
}

.music-capsule:hover {
    box-shadow: 0 14px 34px #0f172a29,0 4px 10px #0f172a1a;
    transform: translate3d(0,-2px,0)
}

.music-capsule.is-left-center:hover,.music-capsule.is-right-center:hover {
    transform: translateY(-50%) translate3d(0,-2px,0)
}

.music-capsule:not(.playing):not(.expanded):not(:hover) .capsule-body {
    gap: 0;
    max-width: 52px;
    padding-inline-end:5px}

.music-capsule:not(.playing):not(.expanded):not(:hover) .expand-arrow,.music-capsule:not(.playing):not(.expanded):not(:hover) .quick-play-btn,.music-capsule:not(.playing):not(.expanded):not(:hover) .song-info-mini {
    margin: 0;
    opacity: 0;
    pointer-events: none;
    transform: translate(4px) scale(.96);
    width: 0
}

.music-capsule.expanded {
    background: var(--ld-bg-card);
    background: color-mix(in srgb,var(--ld-bg-card),transparent 3%);
    border-radius: 1.25rem;
    box-shadow: 0 18px 42px #0f172a33,0 5px 14px #0f172a1a;
    max-height: 78vh;
    overflow: hidden;
    width: min(92vw,336px)
}

.music-capsule.expanded .capsule-body {
    background: transparent;
    justify-content: space-between;
    max-width: none;
    padding-inline-end:1rem;width: 100%
}

.music-capsule.expanded .capsule-body:hover {
    background: transparent
}

.music-capsule.expanded .quick-play-btn {
    display: none
}

.music-capsule.expanded .expand-arrow {
    transform: rotate(180deg)
}

.music-capsule .capsule-body {
    align-items: center;
    border-radius: inherit;
    cursor: pointer;
    display: flex;
    gap: .5rem;
    height: 48px;
    max-width: 224px;
    padding: 4px;
    padding-inline-end:.8rem;transition: max-width .36s cubic-bezier(.22,1,.36,1),padding-inline-end .32s cubic-bezier(.22,1,.36,1),gap .28s cubic-bezier(.22,1,.36,1),background-color .18s ease
}

.music-capsule .capsule-body:hover {
    background-color: color-mix(in srgb,var(--c-bg-soft),transparent 12%)
}

.music-capsule .cover-wrapper {
    background: var(--c-bg-3);
    border-radius: 50%;
    flex-shrink: 0;
    height: 40px;
    overflow: hidden;
    position: relative;
    width: 40px
}

.music-capsule .cover-wrapper:after {
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px color-mix(in srgb,#fff,transparent 75%);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute
}

.music-capsule .cover-wrapper .cover-img {
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
    width: 100%
}

.music-capsule .cover-wrapper .cover-img.spinning {
    animation: music-spin 9s linear infinite
}

.music-capsule .play-indicator {
    align-items: center;
    display: flex;
    gap: 2px;
    inset: 0;
    justify-content: center;
    position: absolute
}

.music-capsule .play-indicator span {
    animation: music-wave .9s ease-in-out infinite;
    background: #fff;
    border-radius: 2px;
    height: 12px;
    transform-origin: center bottom;
    width: 3px
}

.music-capsule .play-indicator span:first-child {
    animation-delay: 0s
}

.music-capsule .play-indicator span:nth-child(2) {
    animation-delay: .2s
}

.music-capsule .play-indicator span:nth-child(3) {
    animation-delay: .4s
}

.music-capsule .song-info-mini {
    flex: 1;
    -webkit-mask-image: linear-gradient(90deg,transparent,#000 10px,#000 calc(100% - 10px),transparent);
    mask-image: linear-gradient(90deg,transparent,#000 10px,#000 calc(100% - 10px),transparent);
    min-width: 0;
    opacity: 1;
    overflow: hidden;
    transform: translate(0);
    transition: opacity .22s ease,width .28s cubic-bezier(.22,1,.36,1),transform .28s cubic-bezier(.22,1,.36,1)
}

.music-capsule .song-info-mini .song-marquee {
    color: var(--c-text-2);
    font-size: .8rem;
    white-space: nowrap;
    width: max-content
}

.music-capsule .song-info-mini .song-marquee span {
    animation: music-marquee 14s linear infinite;
    animation-play-state: paused;
    display: inline-block;
    padding-inline-end:2em}

.music-capsule:is(.playing,.expanded,:hover) .song-marquee span {
    animation-play-state: running
}

.music-capsule .quick-play-btn {
    align-items: center;
    background: var(--c-primary);
    border-radius: 50%;
    color: #fff;
    display: flex;
    flex-shrink: 0;
    font-size: .9rem;
    height: 28px;
    justify-content: center;
    opacity: 1;
    overflow: hidden;
    transition: transform .18s ease,box-shadow .18s ease,opacity .18s ease;
    width: 28px
}

.music-capsule .quick-play-btn:hover {
    box-shadow: 0 2px 8px color-mix(in srgb,var(--c-primary),transparent 65%);
    transform: scale(1.08)
}

.music-capsule .quick-play-btn:active {
    transform: scale(.96)
}

.music-capsule .expand-arrow {
    transition: transform .26s cubic-bezier(.22,1,.36,1)
}

.music-capsule .expand-panel {
    background: linear-gradient(to bottom,transparent,color-mix(in srgb,var(--c-bg-soft),transparent 78%));
    border-top: 1px solid color-mix(in srgb,var(--c-border),transparent 25%);
    padding: 0 .8rem .8rem
}

.music-capsule .song-detail {
    padding: .55rem 0;
    text-align: center
}

.music-capsule .song-detail .song-title {
    color: var(--c-text);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: .2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.music-capsule .song-detail .song-artist {
    color: var(--c-text-3);
    font-size: .8rem
}

.music-capsule .progress-wrapper {
    align-items: center;
    display: flex;
    gap: .5rem;
    margin: .8rem 0
}

.music-capsule .progress-wrapper .time-current,.music-capsule .progress-wrapper .time-duration {
    color: var(--c-text-3);
    flex-shrink: 0;
    font-family: var(--font-monospace);
    font-size: .7rem;
    min-width: 2.5em
}

.music-capsule .progress-wrapper .time-current {
    text-align: right
}

.music-capsule .progress-bar {
    border-radius: 2px;
    cursor: pointer;
    flex: 1;
    height: 4px;
    position: relative
}

.music-capsule .progress-bar .progress-bg {
    background: color-mix(in srgb,var(--c-bg-soft),transparent 10%);
    border-radius: inherit;
    inset: 0;
    position: absolute
}

.music-capsule .progress-bar .progress-fill {
    background: var(--c-primary);
    border-radius: inherit;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: width .12s linear
}

.music-capsule .progress-bar .progress-thumb {
    background: var(--c-primary);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px #0000002e;
    height: 12px;
    margin-left: -6px;
    margin-top: -6px;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: scale(.84);
    transition: all .18s ease;
    width: 12px
}

.music-capsule .progress-bar:hover .progress-thumb {
    opacity: 1;
    transform: scale(1)
}

.music-capsule .lyrics-wrapper {
    height: 60px;
    margin: .45rem 0;
    -webkit-mask-image: linear-gradient(transparent,#000 20%,#000 80%,transparent);
    mask-image: linear-gradient(transparent,#000 20%,#000 80%,transparent);
    overflow: hidden;
    text-align: center
}

.music-capsule .lyrics-scroll {
    transition: transform .22s cubic-bezier(.22,1,.36,1);
    will-change: transform
}

.music-capsule .lyric-line {
    color: var(--c-text-3);
    font-size: .75rem;
    line-height: 1.4;
    padding: .3rem 0;
    transition: color .2s ease,transform .2s ease,opacity .2s ease
}

.music-capsule .lyric-line.active {
    color: var(--c-primary);
    font-weight: 500;
    transform: translateY(-1px)
}

.music-capsule .controls {
    gap: .3rem;
    margin: .5rem 0
}

.music-capsule .controls,.music-capsule .ctrl-btn {
    align-items: center;
    display: flex;
    justify-content: center
}

.music-capsule .ctrl-btn {
    border-radius: 50%;
    color: var(--c-text-2);
    font-size: 1.1rem;
    height: 36px;
    transition: all .18s ease;
    width: 36px
}

.music-capsule .ctrl-btn:hover {
    background: color-mix(in srgb,var(--c-bg-soft),transparent 5%);
    color: var(--c-text)
}

.music-capsule .ctrl-btn.main {
    background: var(--c-primary);
    color: #fff;
    font-size: 1.3rem;
    height: 44px;
    width: 44px
}

.music-capsule .ctrl-btn.main:hover {
    background: var(--c-primary);
    box-shadow: 0 4px 12px color-mix(in srgb,var(--c-primary),transparent 68%);
    transform: scale(1.04)
}

.music-capsule .volume-control {
    position: relative
}

.music-capsule .volume-control .volume-slider {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: color-mix(in srgb,var(--ld-bg-card),transparent 3%);
    border: 1px solid color-mix(in srgb,var(--c-border),transparent 25%);
    border-radius: .5rem;
    bottom: 100%;
    box-shadow: 0 4px 12px var(--ld-shadow);
    left: 50%;
    margin-bottom: .5rem;
    padding: .5rem;
    position: absolute;
    transform: translate(-50%) translateZ(0);
    will-change: transform,opacity
}

.music-capsule .volume-control .volume-slider input[type=range] {
    appearance: none;
    background: color-mix(in srgb,var(--c-bg-soft),transparent 8%);
    border-radius: 2px;
    height: 4px;
    outline: none;
    width: 80px
}

.music-capsule .volume-control .volume-slider input[type=range]::-webkit-slider-thumb {
    appearance: none;
    background: var(--c-primary);
    border-radius: 50%;
    cursor: pointer;
    height: 12px;
    width: 12px
}

.music-capsule .volume-control .volume-slider input[type=range]::-moz-range-thumb {
    background: var(--c-primary);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    height: 12px;
    width: 12px
}

.music-capsule .playlist-toggle {
    align-items: center;
    border-top: 1px solid color-mix(in srgb,var(--c-border),transparent 25%);
    display: flex;
    gap: .5rem;
    margin-top: .5rem;
    padding-top: .5rem
}

.music-capsule .playlist-btn {
    align-items: center;
    border-radius: .5rem;
    color: var(--c-text-3);
    display: flex;
    flex: 1;
    font-size: .75rem;
    gap: .3rem;
    justify-content: center;
    padding: .42rem;
    transition: all .18s ease
}

.music-capsule .playlist-btn:hover {
    background: color-mix(in srgb,var(--c-bg-soft),transparent 5%);
    color: var(--c-text-2)
}

.music-capsule .playlist-btn .rotate {
    transform: rotate(180deg)
}

.music-capsule .reset-position-btn {
    align-items: center;
    border-radius: .5rem;
    color: var(--c-text-3);
    display: flex;
    flex-shrink: 0;
    font-size: .85rem;
    height: 32px;
    justify-content: center;
    transition: all .18s ease;
    width: 32px
}

.music-capsule .reset-position-btn:hover {
    background: color-mix(in srgb,var(--c-bg-soft),transparent 5%);
    color: var(--c-primary)
}

.music-capsule .playlist-wrapper {
    margin-top: .5rem
}

.music-capsule .playlist-scroll {
    max-height: 200px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin
}

.music-capsule .playlist-scroll::-webkit-scrollbar {
    width: 4px
}

.music-capsule .playlist-scroll::-webkit-scrollbar-thumb {
    background: var(--c-border);
    border-radius: 2px
}

.music-capsule .playlist-item {
    align-items: center;
    border-radius: .5rem;
    cursor: pointer;
    display: flex;
    gap: .5rem;
    padding: .5rem;
    transition: background-color .18s ease
}

.music-capsule .playlist-item:hover {
    background: color-mix(in srgb,var(--c-bg-soft),transparent 5%)
}

.music-capsule .playlist-item.active {
    background: color-mix(in srgb,var(--c-primary-soft),transparent 10%)
}

.music-capsule .playlist-item.active .song-name {
    color: var(--c-primary)
}

.music-capsule .playlist-item .song-index {
    color: var(--c-text-3);
    flex-shrink: 0;
    font-size: .7rem;
    text-align: center;
    width: 1.5em
}

.music-capsule .playlist-item .song-meta {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0
}

.music-capsule .playlist-item .song-meta .song-name {
    color: var(--c-text);
    font-size: .8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.music-capsule .playlist-item .song-meta .song-artist {
    color: var(--c-text-3);
    font-size: .7rem
}

.music-capsule .playlist-item .now-playing {
    animation: music-pulse 1.2s ease-in-out infinite;
    color: var(--c-primary);
    flex-shrink: 0;
    font-size: .9rem
}

@keyframes music-spin {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(1turn)
    }
}

@keyframes music-wave {
    0%,to {
        transform: scaleY(.35)
    }

    50% {
        transform: scaleY(1)
    }
}

@keyframes music-marquee {
    0% {
        transform: translate(0)
    }

    to {
        transform: translate(-50%)
    }
}

@keyframes music-pulse {
    0%,to {
        opacity: 1
    }

    50% {
        opacity: .5
    }
}

@media(max-width: 768px) {
    .music-capsule {
        bottom:4.75rem;
        max-width: calc(100vw - 2rem)
    }

    .music-capsule.is-right {
        left: auto;
        right: 1rem
    }

    .music-capsule.is-left {
        left: 1rem;
        right: auto
    }

    .music-capsule.is-right-center {
        bottom: 1rem;
        left: auto;
        right: 1rem;
        top: auto;
        transform: none
    }

    .music-capsule.is-left-center {
        bottom: 1rem;
        left: 1rem;
        right: auto;
        top: auto;
        transform: none
    }

    .music-capsule.expanded {
        bottom: 4.75rem;
        width: min(100%,320px)
    }
}

@media(prefers-reduced-motion:reduce) {
    .music-capsule,.music-capsule * {
        animation: none!important;
        transition: none!important
    }
}

.article img:not(.no-lightbox),.comment-content img,.gallery-item img,.link-info img,.moment-media img,.moment-text img,[data-fancybox] {
    cursor: zoom-in
}

.fancybox__container {
    --fancybox-bg: rgba(0,0,0,.92);
    --fancybox-accent-color: var(--c-primary,#3b82f6);
    z-index: 1050!important
}

.fancybox__backdrop {
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    background: var(--fancybox-bg)!important
}

.fancybox__slide {
    padding: 48px!important
}

@media(max-width: 640px) {
    .fancybox__slide {
        padding:16px 8px 80px!important
    }
}

.fancybox__content {
    background: transparent!important
}

.fancybox__image {
    animation: none!important;
    background: none!important;
    border-radius: 8px;
    box-shadow: 0 25px 50px -12px #00000080;
    max-height: none!important;
    max-width: none!important
}

.fancybox__toolbar {
    background: transparent!important;
    gap: 8px;
    padding: 12px 16px!important
}

.fancybox__button {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: #ffffff1a!important;
    border: none!important;
    border-radius: 10px!important;
    color: #ffffffd9!important;
    height: 40px!important;
    transition: all .2s ease!important;
    width: 40px!important
}

.fancybox__button:hover {
    background: #fff3!important;
    color: #fff!important;
    transform: scale(1.05)
}

.fancybox__button:active {
    transform: scale(.95)
}

.fancybox__button svg {
    height: 20px!important;
    width: 20px!important
}

.fancybox__button--close:hover {
    background: #ef44444d!important
}

.fancybox__nav .fancybox__button {
    border-radius: 50%!important;
    height: 48px!important;
    width: 48px!important
}

.fancybox__infobar {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: #00000080!important;
    border-radius: 20px!important;
    color: #ffffffe6!important;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 16px!important
}

.fancybox__thumbs {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    background: #000c!important;
    gap: 8px!important;
    padding: 12px!important
}

.fancybox__thumbs .fancybox__thumb {
    border: 2px solid transparent!important;
    border-radius: 8px!important;
    opacity: .6;
    overflow: hidden;
    transition: all .2s ease!important
}

.fancybox__thumbs .fancybox__thumb:hover {
    opacity: .9
}

.fancybox__thumbs .fancybox__thumb.is-selected {
    border-color: var(--fancybox-accent-color)!important;
    opacity: 1
}

.fancybox__caption {
    background: linear-gradient(0deg,rgba(0,0,0,.7),transparent)!important;
    color: #ffffffe6!important;
    font-size: 14px;
    padding: 16px 24px!important;
    text-align: center
}

.fancybox__spinner {
    height: 44px!important;
    width: 44px!important
}

.fancybox__spinner circle {
    stroke: var(--fancybox-accent-color)!important
}

.toolbar {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    margin: 0 1rem .5rem
}

.order-toggle {
    display: flex;
    gap: 1rem
}

.dropdown-trigger {
    align-items: center;
    color: var(--c-text-2);
    cursor: pointer;
    display: inline-flex;
    gap: .25em;
    transition: color .2s
}

.dropdown-trigger:hover {
    color: var(--c-primary)
}

.dropdown-trigger img {
    border-radius: .2em;
    height: 1em;
    object-fit: cover;
    width: 1em
}

.dropdown-content.menu {
    background: var(--ld-bg-card,#fff);
    border: 1px solid var(--c-border,#eee);
    gap: 0;
    min-width: 0!important;
    padding: .25rem;
    width: max-content
}

.dropdown-content.menu li a {
    border-radius: .25rem;
    color: var(--c-text-1);
    font-size: .9em;
    padding: .4rem .75rem
}

.dropdown-content.menu li a:hover {
    background: var(--c-bg-soft)
}

.dropdown-content.menu li a.active {
    background: var(--c-primary-soft);
    color: var(--c-primary)
}

.dropdown-content.menu li a img {
    border-radius: .2em;
    height: 1em;
    object-fit: cover;
    width: 1em
}

.swup-loading #main-content {
    opacity: .5;
    pointer-events: none;
    transition: opacity .3s ease
}

.swup-loading:after {
    animation: swup-progress 1s ease-in-out infinite;
    background: linear-gradient(90deg,transparent,var(--c-primary,#3b82f6),transparent);
    content: "";
    height: 3px;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 9999
}

@keyframes swup-progress {
    0% {
        transform: translate(-100%)
    }

    50% {
        transform: translate(0)
    }

    to {
        transform: translate(100%)
    }
}

.swup-content {
    animation: swup-fade-in .3s ease-out
}

@keyframes swup-fade-in {
    0% {
        opacity: 0;
        transform: translateY(10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

[data-no-swup] {
    cursor: pointer
}

.c-alert {
    background-color: var(--ld-bg-card);
    background-image: radial-gradient(circle at 4em -25em,var(--c-primary),transparent 30em),linear-gradient(var(--c-primary) -2000%,transparent);
    border-radius: .5em;
    font-size: .9em;
    margin: 1em 0;
    padding: .2em .8em;
    transition: transform .2s,box-shadow .2s
}

.c-alert:hover {
    box-shadow: 0 4px 12px color-mix(in srgb,var(--c-primary) 20%,transparent);
    transform: translateY(-2px)
}

@supports (color: color-mix(in srgb,transparent,transparent)) {
    .c-alert {
        --c-primary-soft:color-mix(in srgb,var(--c-primary) 15%,transparent)
    }
}

.c-alert.no-gradient {
    background-image: none
}

.c-alert.card {
    border-radius: .75em;
    box-shadow: 0 2px 8px color-mix(in srgb,var(--c-primary) 15%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--c-primary) 20%,transparent);
    padding: .8em 1.2em
}

.c-alert.card:hover {
    box-shadow: 0 6px 16px color-mix(in srgb,var(--c-primary) 25%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--c-primary) 30%,transparent);
    transform: translateY(-3px)
}

.c-alert .c-alert-title {
    align-items: center;
    color: var(--c-primary);
    display: flex;
    font-weight: 700;
    gap: .5em;
    margin: .5em 0
}

.c-alert .c-alert-title p {
    margin: 0
}

.c-alert .c-alert-body p:last-child {
    margin-bottom: .5em
}

.center {
    margin-inline:auto;max-width: 100%
}

.c-tabs,.center {
    width: fit-content
}

.c-tabs {
    display: flex;
    flex-wrap: wrap;
    font-size: .9em;
    gap: .5em;
    justify-content: center;
    line-height: 1.4;
    margin: 0 auto;
    position: relative
}

.c-tabs button {
    background: none;
    border: none;
    border-radius: .4em;
    color: var(--c-text-2);
    cursor: pointer;
    margin-bottom: .5em;
    padding: .3em .5em;
    position: relative;
    transition: all .2s
}

.c-tabs button:hover {
    background-color: var(--c-bg-soft);
    color: var(--c-text)
}

.c-tabs button:after,.c-tabs button:before {
    border-radius: 1em;
    bottom: -.5em;
    display: block;
    height: 2px;
    inset-inline: .8em;
    pointer-events: none;
    position: absolute
}

.c-tabs button:after {
    background-color: var(--c-border);
    content: "";
    inset-inline: -.8em
}

.c-tabs button.active {
    background-color: var(--ld-bg-card);
    box-shadow: 0 1px .5em var(--ld-shadow);
    color: var(--c-text)
}

.c-tabs button.active:before {
    background-color: var(--c-primary);
    content: "";
    z-index: 1
}

.c-tab-content {
    padding: .5em 0
}

.c-tab-content .c-tab-panel {
    display: none;
    text-align: center
}

.c-tab-content .c-tab-panel.active {
    display: block
}

.c-tab-content .c-tab-panel:has(ul,ol,pre,table,blockquote) {
    text-align: left
}

.c-copy {
    background-color: var(--ld-bg-card);
    border: 1px solid var(--c-border);
    border-radius: 4px;
    display: flex;
    font-size: .8rem;
    line-height: 2.5;
    margin: .5rem 0;
    overflow: clip;
    transition: border-color .2s
}

.c-copy:focus-within {
    border-color: var(--c-primary);
    outline: .2em solid var(--c-primary-soft)
}

.c-copy:focus-within .c-copy-prompt {
    background-color: var(--c-primary-soft);
    border-inline-end-color:var(--c-primary);color: var(--c-primary)
}

.c-copy .c-copy-prompt {
    background-color: var(--c-bg-2);
    border-inline-end:1px solid var(--c-border);color: var(--c-text-2);
    flex-shrink: 0;
    padding: 0 1em;
    transition: all .2s
}

.c-copy .c-copy-code {
    flex-grow: 1;
    outline: none;
    overflow-x: auto;
    padding: 0 1em;
    position: relative;
    white-space: nowrap
}

.c-copy .c-copy-code::-webkit-scrollbar {
    background-color: transparent;
    height: 4px
}

.c-copy .c-copy-btn {
    background: none;
    border: none;
    color: var(--c-text-2);
    cursor: pointer;
    flex-shrink: 0;
    height: 2.5em;
    margin-inline-start:-.5em;padding: .5em;
    transition: color .2s
}

.c-copy .c-copy-btn:hover {
    color: var(--c-primary)
}

.c-folding {
    background-color: var(--c-bg-2);
    border: 1px solid var(--c-border);
    border-radius: .5em;
    font-size: .9em;
    margin: 1em 0;
    transition: height .2s
}

.c-folding[open] summary {
    color: currentcolor;
    font-weight: 700
}

.c-folding[open] summary:before {
    content: "收起"
}

.c-folding summary {
    color: var(--c-text-2);
    cursor: pointer;
    padding: .5em .8rem;
    transition: all .2s
}

.c-folding summary>p {
    display: inline
}

.c-folding summary:before {
    content: "展开";
    float: right;
    float: inline-end;
    font-weight: 400;
    margin-inline-start:.5em;opacity: .5;
    transition: color .2s
}

.c-folding summary:hover {
    color: var(--c-text)
}

.c-folding .c-folding-detail {
    padding: 0 .8rem .5rem;
    position: relative
}

.c-tip {
    cursor: pointer;
    position: relative;
    text-decoration: underline dashed var(--c-text-3);
    text-underline-offset: 4px
}

.c-tip[data-tip]:not([data-tip=""]):before {
    background-color: var(--c-text);
    border-radius: .4em;
    color: var(--c-bg);
    content: attr(data-tip);
    font-size: .85em;
    padding: .4em .8em;
    transform: translate(-50%) translateY(-8px);
    white-space: nowrap
}

.c-tip[data-tip]:not([data-tip=""]):after,.c-tip[data-tip]:not([data-tip=""]):before {
    bottom: 100%;
    left: 50%;
    opacity: 0;
    position: absolute;
    transition: all .2s;
    visibility: hidden;
    z-index: 100
}

.c-tip[data-tip]:not([data-tip=""]):after {
    border: 5px solid transparent;
    border-top: 5px solid var(--c-text);
    content: "";
    transform: translate(-50%)
}

.c-tip[data-tip]:not([data-tip=""]):hover:after,.c-tip[data-tip]:not([data-tip=""]):hover:before {
    opacity: 1;
    visibility: visible
}

.c-blur {
    filter: blur(4px);
    transition: filter .2s
}

.c-blur:hover {
    filter: blur(0)
}

.c-timeline {
    font-size: .9em;
    padding-inline-start:1.5em;position: relative
}

.c-timeline:before {
    background-color: var(--c-bg-soft);
    content: "";
    inset: .5em auto 0;
    inset-inline-start: .5em;
    position: absolute;
    width: .3em
}

.c-timeline dt {
    font-size: .9em;
    opacity: .8
}

.c-timeline dt:before {
    background-color: var(--c-text-2);
    border-radius: 1em;
    content: "";
    height: .8em;
    inset-inline-start: .3em;
    margin-top: .5em;
    position: absolute;
    width: .8em
}

.c-timeline dd {
    margin-bottom: 1em;
    overflow: hidden;
    padding: 0 1em;
    width: fit-content
}

.c-quote {
    color: var(--c-text-2);
    font-size: 1.2rem;
    line-height: 1.5
}

.c-quote p {
    margin: 0
}

.c-quote .c-quote-icon {
    font-size: 4rem;
    margin-bottom: -.5em;
    -webkit-mask-image: linear-gradient(#fff,transparent);
    mask-image: linear-gradient(#fff,transparent);
    min-height: .5em;
    opacity: .5;
    position: relative;
    transition: all .2s;
    z-index: -1
}

.c-quote:hover .c-quote-icon {
    opacity: 1;
    transform: translateY(-.5rem)
}

.c-chat {
    font-size: .9em;
    margin-inline:2vw}

.c-chat dt {
    font-size: .9em;
    opacity: .8
}

.c-chat dt.self {
    text-align: end
}

.c-chat dt.self+dd {
    background-color: var(--c-primary-soft);
    border-radius: 1em;
    border-start-end-radius: .2em;
    margin-inline-start:auto;width: fit-content
}

.c-chat dt.system {
    margin-bottom: 1em;
    text-align: center
}

.c-chat dd {
    background-color: var(--c-bg-2);
    border-radius: 1em;
    border-start-start-radius: .2em;
    margin-bottom: 1em;
    max-width: 90%;
    overflow: hidden;
    padding: 0 1em;
    width: fit-content
}

.c-key {
    background-color: var(--c-bg-soft);
    border-radius: .2em;
    box-shadow: inset 0 -.15em 0 var(--c-bg-soft);
    color: var(--c-text-2);
    display: inline-block;
    font-family: var(--font-monospace);
    font-size: .9em;
    letter-spacing: -.05em;
    line-height: 1.4;
    margin: .1em;
    padding: 0 .2em .1em;
    transition: all .1s;
    -webkit-user-select: none;
    user-select: none
}

.c-key:active {
    background-color: var(--c-primary-soft);
    box-shadow: inset 0 -.1em 0 var(--c-primary);
    color: var(--c-primary);
    transform: translateY(.05em)
}

.c-card-list :where(ol,ul):not([class]) {
    list-style: none;
    margin: 0;
    padding-inline-start:0}

.c-card-list :where(ol,ul):not([class])>li {
    margin: 0
}

.c-card-list>div>ol,.c-card-list>div>ul,.c-card-list>ol,.c-card-list>ul {
    display: grid;
    gap: .5em;
    grid-template-columns: repeat(auto-fill,minmax(240px,1fr))
}

.c-card-list>div>ol>li,.c-card-list>div>ul>li,.c-card-list>ol>li,.c-card-list>ul>li {
    background-color: var(--ld-bg-card);
    border-radius: .5em;
    box-shadow: 0 2px 4px var(--ld-shadow);
    padding: .5em .8em
}

.c-pic {
    text-align: center
}

.c-pic img {
    cursor: zoom-in;
    height: auto;
    max-width: 100%
}

.c-pic figcaption {
    color: var(--c-text-2);
    font-size: .8em;
    margin-top: -.5em;
    text-align: center
}

.c-progress {
    align-items: center;
    display: flex;
    font-size: .9em;
    gap: .8em;
    margin: 1em 0
}

.c-progress .c-progress-label {
    color: var(--c-text-2);
    flex-shrink: 0;
    min-width: 4em
}

.c-progress .c-progress-bar {
    --c-progress-color: var(--c-primary);
    background-color: var(--c-bg-soft);
    border-radius: 1em;
    flex-grow: 1;
    height: .6em;
    overflow: hidden
}

.c-progress .c-progress-fill {
    background: linear-gradient(90deg,var(--c-progress-color),color-mix(in srgb,var(--c-progress-color),#fff 20%));
    border-radius: 1em;
    height: 100%;
    transition: width .5s ease-out
}

.c-progress .c-progress-text {
    color: var(--c-text-2);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    min-width: 3em;
    text-align: right
}

.c-emoji-clock {
    font-size: 1.2em;
    vertical-align: middle
}

.c-split {
    display: grid;
    margin: 1em 0
}

.c-split>div {
    background-color: var(--c-bg-2);
    border-radius: .5em;
    padding: .8em 1em
}

.c-split>div>:first-child {
    margin-top: 0
}

.c-split>div>:last-child {
    margin-bottom: 0
}

.c-stepper {
    counter-reset: stepper;
    list-style: none;
    margin: 1.5em 0;
    padding: 0
}

.c-stepper .c-stepper-item {
    display: flex;
    gap: 1em;
    padding-bottom: 1.5em;
    position: relative
}

.c-stepper .c-stepper-item:not(:last-child):before {
    background-color: var(--c-border);
    bottom: 0;
    content: "";
    left: 1em;
    position: absolute;
    top: 2.2em;
    width: 2px
}

.c-stepper .c-stepper-item:last-child {
    padding-bottom: 0
}

.c-stepper .c-stepper-marker {
    align-items: center;
    background-color: var(--c-primary);
    border-radius: 50%;
    color: #fff;
    display: flex;
    flex-shrink: 0;
    font-size: .9em;
    font-weight: 700;
    height: 2em;
    justify-content: center;
    width: 2em
}

.c-stepper .c-stepper-content {
    flex-grow: 1;
    padding-top: .2em
}

.c-stepper .c-stepper-title {
    color: var(--c-text);
    font-weight: 600;
    margin-bottom: .3em
}

.c-stepper .c-stepper-body {
    color: var(--c-text-2);
    font-size: .9em
}

.c-stepper .c-stepper-body p {
    margin: .5em 0
}

.c-note {
    --note-bg: #fff9c4;
    --note-shadow: #e6d98c;
    background: linear-gradient(135deg,var(--note-bg) 0,color-mix(in srgb,var(--note-bg),#fff 20%) 100%);
    box-shadow: 2px 2px 8px var(--note-shadow),inset 0 -1px 0 var(--note-shadow);
    color: #5d4e37;
    font-size: .95em;
    line-height: 1.6;
    margin: 1.5em auto;
    max-width: 320px;
    padding: 1.2em 1.5em;
    position: relative;
    transform: rotate(-1deg);
    transition: transform .2s;
    width: fit-content
}

.c-note:hover {
    transform: rotate(0) scale(1.02)
}

.c-note.rotate {
    transform: rotate(2deg)
}

.c-note.rotate:hover {
    transform: rotate(0) scale(1.02)
}

.c-note:before {
    border-color: transparent var(--c-bg-1) transparent transparent;
    border-style: solid;
    border-width: 0 20px 20px 0;
    content: "";
    height: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 0
}

.c-note.c-note-green {
    --note-bg: #c8e6c9;
    --note-shadow: #a5c6a7
}

.c-note.c-note-blue {
    --note-bg: #bbdefb;
    --note-shadow: #90c7f5;
    color: #1a4a6e
}

.c-note.c-note-pink {
    --note-bg: #f8bbd9;
    --note-shadow: #e8a0c4;
    color: #6b2d4f
}

.c-note.c-note-purple {
    --note-bg: #e1bee7;
    --note-shadow: #c99fd1;
    color: #4a2462
}

.c-note p {
    margin: .3em 0
}

.dark .c-note {
    --note-shadow: rgba(0,0,0,.3);
    filter: brightness(.85) saturate(.9)
}

.text-center {
    text-align: center
}

.pagination-wrapper {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    padding: 2rem 1rem
}

.pagination-wrapper.sticky-pagination {
    all: unset;
    align-items: stretch;
    background-color: var(--ld-bg-card);
    border: 1px solid var(--c-border);
    border-radius: .5rem;
    bottom: min(2em,5%);
    box-shadow: 0 .1em .2em var(--ld-shadow);
    box-sizing: border-box;
    display: flex;
    font-variant-numeric: tabular-nums;
    justify-content: flex-start;
    margin: 1rem auto;
    max-width: 100vw;
    overflow: hidden;
    overflow: clip;
    padding: 0;
    position: sticky;
    transition: max-width .2s var(--max-bezier-to-full);
    z-index: 98
}

.pagination-wrapper.sticky-pagination *,.pagination-wrapper.sticky-pagination :after,.pagination-wrapper.sticky-pagination :before {
    box-sizing: border-box
}

.pagination-wrapper.sticky-pagination:not(.expand) {
    max-width: var(--collapsed-width,38em);
    transition-timing-function: var(--max-bezier-to-collapse)
}

.pagination-wrapper.sticky-pagination .button {
    background-color: var(--ld-bg-card);
    border: 1px solid var(--c-bg-soft);
    border-radius: .5em;
    box-shadow: 0 2px .5em var(--ld-shadow);
    cursor: pointer;
    display: inline-block;
    line-height: 1.2;
    padding: .4em .6em;
    transition: color .1s,background-color .2s;
    vertical-align: middle
}

.pagination-wrapper.sticky-pagination .button:hover:not(:disabled) {
    background-color: var(--c-bg-2);
    color: var(--c-text)
}

.pagination-wrapper.sticky-pagination .button:active:not(:disabled) {
    background-color: var(--ld-shadow)
}

.pagination-wrapper.sticky-pagination .button:disabled {
    background-color: var(--c-bg-1);
    color: var(--c-text-3);
    cursor: not-allowed
}

.pagination-wrapper.sticky-pagination>.pagination-button {
    align-items: center;
    border: none;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    justify-content: center
}

.pagination-wrapper.sticky-pagination>.pagination-button [class^=icon-] {
    font-size: 1.2em
}

.pagination-wrapper.sticky-pagination>.pagination-button:first-child {
    margin-inline-end:auto}

.pagination-wrapper.sticky-pagination>.pagination-button:last-child:not(:has(+.pagination-jump)),.pagination-wrapper.sticky-pagination>.pagination-button:nth-last-child(2):has(+.pagination-jump) {
    margin-inline-start:auto}

.pagination-wrapper.sticky-pagination>.pagination-num {
    align-items: center;
    background: transparent;
    border: none;
    color: currentcolor;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    text-decoration: none;
    transition: background-color .2s;
    width: 3em
}

.pagination-wrapper.sticky-pagination>.pagination-num:hover:not(:disabled):not(.active) {
    background-color: var(--c-border)
}

.pagination-wrapper.sticky-pagination>.pagination-num:disabled {
    pointer-events: none
}

.pagination-wrapper.sticky-pagination>.pagination-num.active {
    background-color: var(--c-primary-soft);
    color: var(--c-primary)
}

.pagination-wrapper.sticky-pagination>.pagination-num.pagination-ellipsis {
    color: var(--c-text-3)
}

.pagination-jump {
    align-items: center;
    border-left: 1px solid var(--c-border);
    display: flex;
    gap: .3em;
    padding-left: .5em;
    padding-right: .5em
}

.pagination-jump-text {
    color: var(--c-text-2);
    font-size: .85em;
    white-space: nowrap
}

.pagination-jump-input {
    -moz-appearance: textfield;
    background-color: var(--c-bg-soft);
    border: 1px solid var(--c-border);
    border-radius: .3em;
    color: var(--c-text);
    font-size: .85em;
    padding: .3em .4em;
    text-align: center;
    width: 3.5em
}

.pagination-jump-input::-webkit-inner-spin-button,.pagination-jump-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.pagination-jump-input:focus {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 2px var(--c-primary-soft);
    outline: none
}

.pagination-jump-btn {
    align-items: center;
    background-color: var(--c-primary);
    border: none;
    border-radius: .3em;
    color: #fff;
    cursor: pointer;
    display: flex;
    justify-content: center;
    padding: .3em .5em;
    transition: opacity .2s
}

.pagination-jump-btn:hover {
    opacity: .85
}

.pagination-jump-btn:active {
    opacity: .7
}

.pagination-jump-btn [class^=icon-] {
    font-size: 1em
}

.pagination-anchor {
    height: 1px;
    pointer-events: none
}

@media(max-width: 768px) {
    .pagination-wrapper.sticky-pagination {
        bottom:auto;
        max-width: 100%;
        position: static
    }

    .pagination-wrapper.sticky-pagination:not(.expand) {
        max-width: 100%
    }

    .pagination-jump {
        gap: .2em;
        padding-left: .3em
    }

    .pagination-jump-text {
        display: none
    }

    .pagination-jump-input {
        padding: .25em .3em;
        width: 3em
    }
}

.equipments-container {
    margin: 1rem
}

.equipments-container .photo-tabs {
    border-bottom: 1px solid var(--c-border);
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem
}

.equipments-container .photo-tab {
    align-items: center;
    background: var(--c-bg-soft);
    border: 1px solid transparent;
    border-radius: 2rem;
    color: var(--c-text-2);
    cursor: pointer;
    display: inline-flex;
    font-size: .875rem;
    gap: .375rem;
    padding: .5rem 1rem;
    transition: all .2s
}

.equipments-container .photo-tab:hover {
    background: var(--c-primary-soft);
    color: var(--c-primary)
}

.equipments-container .photo-tab.active {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff
}

.equipments-container .photo-tab .tab-count {
    background: #0000001a;
    border-radius: 1rem;
    font-size: .75rem;
    padding: .125rem .5rem
}

.equipments-container .photo-tab.active .tab-count {
    background: #fff3
}

.equipments-container .photo-masonry {
    column-count: 4;
    column-gap: .75rem
}

@media(max-width: 1200px) {
    .equipments-container .photo-masonry {
        column-count:3
    }
}

@media(max-width: 768px) {
    .equipments-container .photo-masonry {
        column-count:2
    }
}

@media(max-width: 480px) {
    .equipments-container .photo-masonry {
        column-count:2;
        column-gap: .5rem
    }
}

.equipments-container .photo-item {
    animation: photo-fade-in .5s ease backwards;
    background: var(--c-bg-soft);
    border-radius: .5rem;
    break-inside: avoid;
    cursor: url(/themes/theme-clarity/assets/images/zoom-in.cur),zoom-in;
    margin-bottom: .75rem;
    overflow: hidden;
    position: relative;
    transition: transform .3s ease,box-shadow .3s ease,opacity .4s ease
}

.equipments-container .photo-item:focus-visible,.equipments-container .photo-item:hover {
    box-shadow: 0 12px 32px var(--ld-shadow);
    transform: translateY(-4px) scale(1.02)
}

.equipments-container .photo-item:focus-visible .equipment-cover-placeholder,.equipments-container .photo-item:focus-visible img,.equipments-container .photo-item:hover .equipment-cover-placeholder,.equipments-container .photo-item:hover img {
    transform: scale(1.05)
}

.equipments-container .photo-item:focus-visible figcaption,.equipments-container .photo-item:hover figcaption {
    opacity: 1;
    transform: translateY(0)
}

.equipments-container .photo-item:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 3px
}

.equipments-container .photo-item:active {
    transform: translateY(-2px) scale(.98)
}

.equipments-container .photo-item img {
    cursor: url(/themes/theme-clarity/assets/images/zoom-in.cur),zoom-in;
    display: block;
    height: auto;
    transition: transform .3s;
    width: 100%
}

.equipments-container .photo-item img[loading=lazy] {
    animation: photo-skeleton 1.5s infinite;
    background: linear-gradient(90deg,var(--c-bg-soft) 25%,var(--c-bg-mute) 50%,var(--c-bg-soft) 75%);
    background-size: 200% 100%;
    min-height: 100px
}

.equipments-container .photo-item img:not([src]) {
    visibility: hidden
}

.equipments-container .photo-item figcaption {
    background: linear-gradient(0deg,rgba(0,0,0,.7),transparent);
    bottom: 0;
    color: #fff;
    cursor: url(/themes/theme-clarity/assets/images/zoom-in.cur),zoom-in;
    font-size: .875rem;
    left: 0;
    opacity: 0;
    padding: 2rem .75rem .75rem;
    position: absolute;
    right: 0;
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
    transform: translateY(100%);
    transition: opacity .3s,transform .3s
}

.equipments-container .photo-item figcaption p {
    display: -webkit-box;
    line-height: 1.5;
    margin: .25rem 0 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

@media(max-width: 480px) {
    .equipments-container .photo-item figcaption {
        font-size:.75rem;
        padding: 1.5rem .5rem .5rem
    }
}

.equipment-cover-placeholder {
    align-items: center;
    aspect-ratio: 4/3;
    background: radial-gradient(circle at 25% 20%,var(--c-primary-soft),transparent 35%),linear-gradient(135deg,var(--c-bg-soft),var(--c-bg-mute));
    color: var(--c-text-3);
    display: flex;
    font-size: 3rem;
    justify-content: center;
    min-height: 180px;
    transition: transform .3s;
    width: 100%
}

.equipment-page-header {
    margin: 2rem 1rem 1.5rem;
    text-align: center
}

.equipment-page-header .page-title {
    align-items: center;
    color: var(--c-text);
    display: flex;
    font-size: 1.75rem;
    font-weight: 700;
    gap: .5rem;
    justify-content: center;
    margin-bottom: .5rem
}

.equipment-page-header .page-desc {
    color: var(--c-text-2);
    font-size: .9rem
}

.equipment-dialog {
    background: transparent;
    border: 0;
    color: var(--c-text);
    left: 50%;
    margin: 0;
    max-height: min(620px,100dvh - 2rem);
    max-width: none;
    overflow: visible;
    padding: 0;
    position: fixed;
    top: 50%;
    transform: translate(-50%,-50%);
    width: min(860px,100vw - 2rem)
}

.equipment-dialog::backdrop {
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    backdrop-filter: blur(16px) saturate(120%);
    background: radial-gradient(circle at 50% 35%,hsla(0,0%,100%,.18),transparent 32%),#12121280
}

.equipment-dialog[open] .equipment-dialog-card {
    animation: equipment-dialog-in .24s cubic-bezier(.16,1,.3,1) both
}

.equipment-dialog-card {
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: 1.1rem;
    box-shadow: 0 24px 80px #00000047,inset 0 0 0 1px #fff3;
    display: grid;
    grid-template-columns: minmax(0,1.15fr) minmax(280px,.85fr);
    max-height: inherit;
    overflow: hidden;
    position: relative
}

.equipment-dialog-close {
    align-items: center;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    background: color-mix(in srgb,var(--c-bg) 88%,transparent);
    border: 1px solid var(--c-border);
    border-radius: 999px;
    color: var(--c-text-2);
    display: inline-flex;
    height: 2.25rem;
    justify-content: center;
    position: absolute;
    right: .75rem;
    top: .75rem;
    transition: all .2s;
    width: 2.25rem;
    z-index: 2
}

.equipment-dialog-close:hover {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff
}

.equipment-dialog-media {
    align-items: center;
    background: linear-gradient(180deg,rgba(0,0,0,.08),transparent 38%),radial-gradient(circle at 20% 16%,var(--c-primary-soft),transparent 34%),var(--c-bg-soft);
    display: flex;
    justify-content: center;
    min-height: 360px;
    position: relative
}

.equipment-dialog-media:after {
    background: linear-gradient(0deg,rgba(0,0,0,.18),transparent);
    content: "";
    height: 35%;
    inset: auto 0 0;
    pointer-events: none;
    position: absolute
}

.equipment-dialog-media img {
    display: block;
    height: 100%;
    max-height: min(620px,100dvh - 2rem);
    object-fit: cover;
    width: 100%
}

.equipment-dialog-placeholder {
    color: var(--c-text-3);
    font-size: 5rem
}

.equipment-dialog-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 3rem 2rem 2rem
}

.equipment-dialog-content h2 {
    color: var(--c-text);
    font-size: clamp(1.65rem,2.8vw,2.25rem);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.12;
    margin: 0 0 1rem
}

.equipment-dialog-label {
    align-items: center;
    align-self: flex-start;
    background: var(--c-primary-soft);
    border-radius: 999px;
    color: var(--c-primary);
    display: inline-flex;
    font-size: .75rem;
    font-weight: 700;
    margin-bottom: .9rem;
    padding: .28rem .65rem
}

.equipment-dialog-spec {
    background: var(--c-bg-soft);
    border: 1px solid var(--c-border);
    border-radius: 999px;
    color: var(--c-text-2);
    font-size: .9rem;
    font-weight: 600;
    margin: 0 0 1rem;
    max-width: 100%;
    overflow: hidden;
    padding: .35rem .7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: fit-content
}

.equipment-dialog-desc {
    color: var(--c-text-2);
    font-size: .92rem;
    line-height: 1.75;
    margin: 0
}

.equipment-dialog-link {
    align-items: center;
    align-self: flex-start;
    background: var(--c-primary);
    border-radius: .75rem;
    box-shadow: 0 10px 24px color-mix(in srgb,var(--c-primary) 24%,transparent);
    color: #fff;
    display: inline-flex;
    font-size: .9rem;
    font-weight: 700;
    gap: .35rem;
    margin-top: 1.35rem;
    padding: .65rem .95rem;
    transition: transform .2s,box-shadow .2s
}

.equipment-dialog-link:hover {
    box-shadow: 0 14px 30px color-mix(in srgb,var(--c-primary) 32%,transparent);
    transform: translateY(-2px)
}

@media(max-width: 720px) {
    .equipment-dialog {
        max-height:calc(100dvh - 1rem);
        width: min(420px,100vw - 1rem)
    }

    .equipment-dialog-card {
        grid-template-columns: 1fr
    }

    .equipment-dialog-media {
        max-height: 42dvh;
        min-height: 230px
    }

    .equipment-dialog-content {
        padding: 1.25rem
    }

    .equipment-dialog-content h2 {
        font-size: 1.55rem
    }
}

@keyframes photo-skeleton {
    0% {
        background-position: 200% 0
    }

    to {
        background-position: -200% 0
    }
}

@keyframes photo-fade-in {
    0% {
        opacity: 0;
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes equipment-dialog-in {
    0% {
        opacity: 0;
        transform: translateY(18px) scale(.97)
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

.weather-card {
    min-height: 60px;
    padding: .75rem 1rem
}

.weather-error,.weather-loading {
    align-items: center;
    animation: weatherPulse 1.5s ease-in-out infinite;
    color: var(--c-text-3);
    display: flex;
    font-size: .9em;
    gap: .5em;
    justify-content: center;
    padding: .5rem
}

.weather-error [class^=icon-],.weather-loading [class^=icon-] {
    font-size: 1.2em
}

@keyframes weatherPulse {
    0%,to {
        opacity: .6
    }

    50% {
        opacity: 1
    }
}

.weather-error {
    animation: none;
    border-radius: .5rem;
    cursor: pointer;
    margin: -.25rem;
    padding: .75rem;
    transition: all .25s ease
}

.weather-error:hover {
    background-color: var(--c-bg-soft);
    color: var(--c-primary);
    transform: scale(1.02)
}

.weather-error:active {
    transform: scale(.98)
}

.weather-content {
    align-items: center;
    animation: weatherSlideIn .5s cubic-bezier(.16,1,.3,1);
    display: flex;
    gap: .75rem
}

@keyframes weatherSlideIn {
    0% {
        opacity: 0;
        transform: translateY(10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.weather-left {
    flex-shrink: 0
}

.weather-icon {
    animation: weatherIconBounce 2s ease-in-out infinite;
    height: 48px;
    object-fit: contain;
    transition: transform .3s ease;
    width: 48px
}

.weather-icon:hover {
    animation-play-state: paused;
    transform: scale(1.1) rotate(5deg)
}

@keyframes weatherIconBounce {
    0%,to {
        transform: translateY(0) scale(1)
    }

    50% {
        transform: translateY(-4px) scale(1.02)
    }
}

.weather-right {
    flex: 1;
    min-width: 0
}

.weather-main {
    align-items: baseline;
    display: flex;
    gap: .15em;
    margin-bottom: .25em
}

.temp-value {
    color: var(--c-text);
    font-family: var(--font-creative);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    transition: color .3s
}

.temp-unit {
    color: var(--c-text-2);
    font-size: .9rem;
    font-weight: 500;
    margin-right: .5em
}

.weather-text {
    color: var(--c-text);
    font-size: 1rem;
    font-weight: 600;
    transition: color .3s
}

.weather-meta {
    align-items: center;
    animation: weatherFadeIn .6s ease-out .2s both;
    color: var(--c-text-3);
    display: flex;
    font-size: .75em;
    gap: .75em
}

@keyframes weatherFadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.weather-city,.weather-update {
    align-items: center;
    display: flex;
    gap: .2em;
    transition: color .2s
}

.weather-city [class^=icon-],.weather-update [class^=icon-] {
    font-size: 1em;
    opacity: .7
}

.weather-city:hover,.weather-update:hover {
    color: var(--c-text-2)
}