npm - proto-daisy-ui - Versions diffs - 0.1.19 → 0.1.21 - Mend

proto-daisy-ui 0.1.19 → 0.1.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/dist/cjs/proto-daisy-ui.cjs.entry.js +1 -1
package/dist/collection/props.css +10 -0
package/dist/collection/styles/shadow.css +184 -19
package/dist/collection/tokens.css +26 -1
package/dist/collection/utils/tw-version.js +1 -1
package/dist/components/proto-daisy-ui.js +1 -1
package/dist/esm/proto-daisy-ui.entry.js +1 -1
package/dist/proto-daisy-ui/p-09b7298b.entry.js +2 -0
package/dist/proto-daisy-ui/props.css +10 -0
package/dist/proto-daisy-ui/proto-daisy-ui.esm.js +1 -1
package/dist/proto-daisy-ui/tokens.css +26 -1
package/dist/types/utils/tw-version.d.ts +1 -1
package/package.json +5 -5
package/dist/proto-daisy-ui/p-b82342f6.entry.js +0 -2
/package/dist/proto-daisy-ui/{p-b82342f6.entry.js.map → p-09b7298b.entry.js.map} +0 -0

package/dist/cjs/proto-daisy-ui.cjs.entry.js CHANGED Viewed

@@ -3,7 +3,7 @@
 var index = require('./index-BSfp7tYE.js');
 var store = require('./store-4vMY2GSq.js');
-const shadowCss = "/*! tailwindcss v4.0.17 | MIT License | https://tailwindcss.com */\n@layer theme, base, components, utilities;\n@layer theme {\n  :root,\n  :host {\n    --font-sans:\n      ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',\n      'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';\n    --spacing: 0.25rem;\n    --container-md: 28rem;\n    --text-xl: 1.25rem;\n    --text-xl--line-height: calc(1.75 / 1.25);\n    --text-5xl: 3rem;\n    --text-5xl--line-height: 1;\n    --font-weight-bold: 700;\n    --radius-md: 0.375rem;\n  }\n}\n@layer utilities {\n  .tooltip {\n    position: relative;\n    display: inline-block;\n    --tt-bg: var(--color-neutral);\n    --tt-off: calc(100% + 0.5rem);\n    --tt-tail: calc(100% + 1px + 0.25rem);\n    > :where(.tooltip-content),\n    &[data-tip]:before {\n      position: absolute;\n      max-width: 20rem;\n      border-radius: var(--radius-field);\n      padding-inline: calc(0.25rem * 2);\n      padding-block: calc(0.25rem * 1);\n      text-align: center;\n      white-space: normal;\n      color: var(--color-neutral-content);\n      opacity: 0%;\n      font-size: 0.875rem;\n      line-height: 1.25em;\n      transition:\n        opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms,\n        transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms;\n      background-color: var(--tt-bg);\n      width: max-content;\n      pointer-events: none;\n      z-index: 1;\n      --tw-content: attr(data-tip);\n      content: var(--tw-content);\n    }\n    &:after {\n      position: absolute;\n      position: absolute;\n      opacity: 0%;\n      background-color: var(--tt-bg);\n      transition:\n        opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms,\n        transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms;\n      content: '';\n      pointer-events: none;\n      width: 0.625rem;\n      height: 0.25rem;\n      display: block;\n      mask-repeat: no-repeat;\n      mask-position: -1px 0;\n      --mask-tooltip: url(\"data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A\");\n      mask-image: var(--mask-tooltip);\n    }\n    &.tooltip-open,\n    &[data-tip]:hover,\n    &:hover,\n    &:has(:focus-visible) {\n      > .tooltip-content,\n      &[data-tip]:before,\n      &:after {\n        opacity: 100%;\n        --tt-pos: 0rem;\n        transition:\n          opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s,\n          transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n      }\n    }\n    > .tooltip-content,\n    &[data-tip]:before {\n      transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));\n      inset: auto auto var(--tt-off) 50%;\n    }\n    &:after {\n      transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));\n      inset: auto auto var(--tt-tail) 50%;\n    }\n  }\n  .menu {\n    display: flex;\n    width: fit-content;\n    flex-direction: column;\n    flex-wrap: wrap;\n    padding: calc(0.25rem * 2);\n    --menu-active-fg: var(--color-neutral-content);\n    --menu-active-bg: var(--color-neutral);\n    font-size: 0.875rem;\n    :where(li ul) {\n      position: relative;\n      margin-inline-start: calc(0.25rem * 4);\n      padding-inline-start: calc(0.25rem * 2);\n      white-space: nowrap;\n      &:before {\n        position: absolute;\n        inset-inline-start: calc(0.25rem * 0);\n        top: calc(0.25rem * 3);\n        bottom: calc(0.25rem * 3);\n        background-color: var(--color-base-content);\n        opacity: 10%;\n        width: var(--border);\n        content: '';\n      }\n    }\n    :where(li > .menu-dropdown:not(.menu-dropdown-show)) {\n      display: none;\n    }\n    :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)),\n    :where(li:not(.menu-title) > details > summary:not(.menu-title)) {\n      display: grid;\n      grid-auto-flow: column;\n      align-content: flex-start;\n      align-items: center;\n      gap: calc(0.25rem * 2);\n      border-radius: var(--radius-field);\n      padding-inline: calc(0.25rem * 3);\n      padding-block: calc(0.25rem * 1.5);\n      text-align: start;\n      transition-property: color, background-color, box-shadow;\n      transition-duration: 0.2s;\n      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n      grid-auto-columns: minmax(auto, max-content) auto max-content;\n      text-wrap: balance;\n      user-select: none;\n    }\n    :where(li > details > summary) {\n      --tw-outline-style: none;\n      outline-style: none;\n      @media (forced-colors: active) {\n        outline: 2px solid transparent;\n        outline-offset: 2px;\n      }\n      &::-webkit-details-marker {\n        display: none;\n      }\n    }\n    :where(li > details > summary),\n    :where(li > .menu-dropdown-toggle) {\n      &:after {\n        justify-self: flex-end;\n        display: block;\n        height: 0.375rem;\n        width: 0.375rem;\n        rotate: -135deg;\n        translate: 0 -1px;\n        transition-property: rotate, translate;\n        transition-duration: 0.2s;\n        content: '';\n        transform-origin: 50% 50%;\n        box-shadow: 2px 2px inset;\n        pointer-events: none;\n      }\n    }\n    :where(li > details[open] > summary):after,\n    :where(li > .menu-dropdown-toggle.menu-dropdown-show):after {\n      rotate: 45deg;\n      translate: 0 1px;\n    }\n    :where(\n        li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title),\n        li:not(.menu-title, .disabled) > details > summary:not(.menu-title)\n      ):not(.menu-active, :active, .btn) {\n      &.menu-focus,\n      &:focus-visible {\n        cursor: pointer;\n        background-color: color-mix(\n          in oklab,\n          var(--color-base-content) 10%,\n          transparent\n        );\n        color: var(--color-base-content);\n        --tw-outline-style: none;\n        outline-style: none;\n        @media (forced-colors: active) {\n          outline: 2px solid transparent;\n          outline-offset: 2px;\n        }\n      }\n    }\n    :where(\n      li:not(.menu-title, .disabled)\n        > *:not(ul, details, .menu-title):not(\n          .menu-active,\n          :active,\n          .btn\n        ):hover,\n      li:not(.menu-title, .disabled)\n        > details\n        > summary:not(.menu-title):not(.menu-active, :active, .btn):hover\n    ) {\n      cursor: pointer;\n      background-color: color-mix(\n        in oklab,\n        var(--color-base-content) 10%,\n        transparent\n      );\n      --tw-outline-style: none;\n      outline-style: none;\n      @media (forced-colors: active) {\n        outline: 2px solid transparent;\n        outline-offset: 2px;\n      }\n      box-shadow:\n        0 1px oklch(0% 0 0 / 0.01) inset,\n        0 -1px oklch(100% 0 0 / 0.01) inset;\n    }\n    :where(li:empty) {\n      background-color: var(--color-base-content);\n      opacity: 10%;\n      margin: 0.5rem 1rem;\n      height: 1px;\n    }\n    :where(li) {\n      position: relative;\n      display: flex;\n      flex-shrink: 0;\n      flex-direction: column;\n      flex-wrap: wrap;\n      align-items: stretch;\n      .badge {\n        justify-self: flex-end;\n      }\n      & > *:not(ul, .menu-title, details, .btn):active,\n      & > *:not(ul, .menu-title, details, .btn).menu-active,\n      & > details > summary:active {\n        --tw-outline-style: none;\n        outline-style: none;\n        @media (forced-colors: active) {\n          outline: 2px solid transparent;\n          outline-offset: 2px;\n        }\n        color: var(--menu-active-fg);\n        background-color: var(--menu-active-bg);\n        background-size: auto, calc(var(--noise) * 100%);\n        background-image: none, var(--fx-noise);\n        &:not(&:active) {\n          box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--menu-active-bg);\n        }\n      }\n      &.menu-disabled {\n        pointer-events: none;\n        color: color-mix(in oklab, var(--color-base-content) 20%, transparent);\n      }\n    }\n    .dropdown:focus-within {\n      .menu-dropdown-toggle:after {\n        rotate: 45deg;\n        translate: 0 1px;\n      }\n    }\n    .dropdown-content {\n      margin-top: calc(0.25rem * 2);\n      padding: calc(0.25rem * 2);\n      &:before {\n        display: none;\n      }\n    }\n  }\n  .dropdown {\n    position: relative;\n    display: inline-block;\n    position-area: var(--anchor-v, bottom) var(--anchor-h, span-right);\n    & > *:not(summary):focus {\n      --tw-outline-style: none;\n      outline-style: none;\n      @media (forced-colors: active) {\n        outline: 2px solid transparent;\n        outline-offset: 2px;\n      }\n    }\n    .dropdown-content {\n      position: absolute;\n    }\n    &:not(details, .dropdown-open, .dropdown-hover:hover, :focus-within) {\n      .dropdown-content {\n        display: none;\n        transform-origin: top;\n        opacity: 0%;\n        scale: 95%;\n      }\n    }\n    &[popover],\n    .dropdown-content {\n      z-index: 999;\n      animation: dropdown 0.2s;\n      transition-property: opacity, scale, display;\n      transition-behavior: allow-discrete;\n      transition-duration: 0.2s;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    }\n    @starting-style {\n      &[popover],\n      .dropdown-content {\n        scale: 95%;\n        opacity: 0;\n      }\n    }\n    &.dropdown-open,\n    &:not(.dropdown-hover):focus,\n    &:focus-within {\n      > [tabindex]:first-child {\n        pointer-events: none;\n      }\n      .dropdown-content {\n        opacity: 100%;\n      }\n    }\n    &.dropdown-hover:hover {\n      .dropdown-content {\n        opacity: 100%;\n        scale: 100%;\n      }\n    }\n    &:is(details) {\n      summary {\n        &::-webkit-details-marker {\n          display: none;\n        }\n      }\n    }\n    &.dropdown-open,\n    &:focus,\n    &:focus-within {\n      .dropdown-content {\n        scale: 100%;\n      }\n    }\n    &:where([popover]) {\n      background: #0000;\n    }\n    &[popover] {\n      position: fixed;\n      color: inherit;\n      @supports not (position-area: bottom) {\n        margin: auto;\n        &.dropdown-open:not(:popover-open) {\n          display: none;\n          transform-origin: top;\n          opacity: 0%;\n          scale: 95%;\n        }\n        &::backdrop {\n          background-color: color-mix(in oklab, #000 30%, #0000);\n        }\n      }\n      &:not(.dropdown-open, :popover-open) {\n        display: none;\n        transform-origin: top;\n        opacity: 0%;\n        scale: 95%;\n      }\n    }\n  }\n  .btn {\n    :where(&) {\n      width: unset;\n    }\n    display: inline-flex;\n    flex-shrink: 0;\n    cursor: pointer;\n    flex-wrap: nowrap;\n    align-items: center;\n    justify-content: center;\n    gap: calc(0.25rem * 1.5);\n    text-align: center;\n    vertical-align: middle;\n    outline-offset: 2px;\n    webkit-user-select: none;\n    user-select: none;\n    padding-inline: var(--btn-p);\n    color: var(--btn-fg);\n    --tw-prose-links: var(--btn-fg);\n    height: var(--size);\n    font-size: var(--fontsize, 0.875rem);\n    font-weight: 600;\n    outline-color: var(--btn-color, var(--color-base-content));\n    transition-property: color, background-color, border-color, box-shadow;\n    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n    transition-duration: 0.2s;\n    border-start-start-radius: var(--join-ss, var(--radius-field));\n    border-start-end-radius: var(--join-se, var(--radius-field));\n    border-end-start-radius: var(--join-es, var(--radius-field));\n    border-end-end-radius: var(--join-ee, var(--radius-field));\n    background-color: var(--btn-bg);\n    background-size: auto, calc(var(--noise) * 100%);\n    background-image: none, var(--btn-noise);\n    border-width: var(--border);\n    border-style: solid;\n    border-color: var(--btn-border);\n    text-shadow: 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 0.15));\n    box-shadow:\n      0 0.5px 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 6%)) inset,\n      var(--btn-shadow);\n    --size: calc(var(--size-field, 0.25rem) * 10);\n    --btn-bg: var(--btn-color, var(--color-base-200));\n    --btn-fg: var(--color-base-content);\n    --btn-p: 1rem;\n    --btn-border: color-mix(\n      in oklab,\n      var(--btn-bg),\n      #000 calc(var(--depth) * 5%)\n    );\n    --btn-shadow:\n      0 3px 2px -2px\n        color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000),\n      0 4px 3px -2px\n        color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000);\n    --btn-noise: var(--fx-noise);\n    .prose & {\n      text-decoration-line: none;\n    }\n    @media (hover: hover) {\n      &:hover {\n        --btn-bg: color-mix(\n          in oklab,\n          var(--btn-color, var(--color-base-200)),\n          #000 7%\n        );\n      }\n    }\n    &:focus-visible {\n      outline-width: 2px;\n      outline-style: solid;\n    }\n    &:active:not(.btn-active) {\n      translate: 0 0.5px;\n      --btn-bg: color-mix(\n        in oklab,\n        var(--btn-color, var(--color-base-200)),\n        #000 5%\n      );\n      --btn-border: color-mix(\n        in oklab,\n        var(--btn-color, var(--color-base-200)),\n        #000 7%\n      );\n      --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0);\n    }\n    &:is(:disabled, [disabled], .btn-disabled) {\n      &:not(.btn-link, .btn-ghost) {\n        background-color: color-mix(\n          in oklab,\n          var(--color-base-content) 10%,\n          transparent\n        );\n        box-shadow: none;\n      }\n      pointer-events: none;\n      --btn-border: #0000;\n      --btn-noise: none;\n      --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000);\n      @media (hover: hover) {\n        &:hover {\n          pointer-events: none;\n          background-color: color-mix(\n            in oklab,\n            var(--color-neutral) 20%,\n            transparent\n          );\n          --btn-border: #0000;\n          --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000);\n        }\n      }\n    }\n    &:is(input[type='checkbox'], input[type='radio']) {\n      appearance: none;\n      &::after {\n        content: attr(aria-label);\n      }\n    }\n    &:where(input:checked:not(.filter .btn)) {\n      --btn-color: var(--color-primary);\n      --btn-fg: var(--color-primary-content);\n      isolation: isolate;\n    }\n  }\n  .radial-progress {\n    position: relative;\n    display: inline-grid;\n    height: var(--size);\n    width: var(--size);\n    place-content: center;\n    border-radius: calc(infinity * 1px);\n    background-color: transparent;\n    vertical-align: middle;\n    box-sizing: content-box;\n    --value: 0;\n    --size: 5rem;\n    --thickness: calc(var(--size) / 10);\n    --radialprogress: calc(var(--value) * 1%);\n    transition: --radialprogress 0.3s linear;\n    &:before {\n      position: absolute;\n      inset: calc(0.25rem * 0);\n      border-radius: calc(infinity * 1px);\n      content: '';\n      background:\n        radial-gradient(farthest-side, currentColor 98%, #0000)\n          top/var(--thickness) var(--thickness) no-repeat,\n        conic-gradient(currentColor var(--radialprogress), #0000 0);\n      webkit-mask: radial-gradient(\n        farthest-side,\n        #0000 calc(100% - var(--thickness)),\n        #000 calc(100% + 0.5px - var(--thickness))\n      );\n      mask: radial-gradient(\n        farthest-side,\n        #0000 calc(100% - var(--thickness)),\n        #000 calc(100% + 0.5px - var(--thickness))\n      );\n    }\n    &:after {\n      position: absolute;\n      border-radius: calc(infinity * 1px);\n      background-color: currentColor;\n      transition: transform 0.3s linear;\n      content: '';\n      inset: calc(50% - var(--thickness) / 2);\n      transform: rotate(calc(var(--value) * 3.6deg - 90deg))\n        translate(calc(var(--size) / 2 - 50%));\n    }\n  }\n  .list {\n    display: flex;\n    flex-direction: column;\n    font-size: 0.875rem;\n    :where(.list-row) {\n      --list-grid-cols: minmax(0, auto) 1fr;\n      position: relative;\n      display: grid;\n      grid-auto-flow: column;\n      gap: calc(0.25rem * 4);\n      border-radius: var(--radius-box);\n      padding: calc(0.25rem * 4);\n      word-break: break-word;\n      grid-template-columns: var(--list-grid-cols);\n      &:has(.list-col-grow:nth-child(1)) {\n        --list-grid-cols: 1fr;\n      }\n      &:has(.list-col-grow:nth-child(2)) {\n        --list-grid-cols: minmax(0, auto) 1fr;\n      }\n      &:has(.list-col-grow:nth-child(3)) {\n        --list-grid-cols: minmax(0, auto) minmax(0, auto) 1fr;\n      }\n      &:has(.list-col-grow:nth-child(4)) {\n        --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr;\n      }\n      &:has(.list-col-grow:nth-child(5)) {\n        --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto)\n          minmax(0, auto) 1fr;\n      }\n      &:has(.list-col-grow:nth-child(6)) {\n        --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto)\n          minmax(0, auto) minmax(0, auto) 1fr;\n      }\n      :not(.list-col-wrap) {\n        grid-row-start: 1;\n      }\n    }\n    & > :not(:last-child) {\n      &.list-row,\n      .list-row {\n        &:after {\n          content: '';\n          border-bottom: var(--border) solid;\n          inset-inline: var(--radius-box);\n          position: absolute;\n          bottom: calc(0.25rem * 0);\n          border-color: color-mix(\n            in oklab,\n            var(--color-base-content) 5%,\n            transparent\n          );\n        }\n      }\n    }\n  }\n  .table {\n    font-size: 0.875rem;\n    position: relative;\n    width: 100%;\n    border-radius: var(--radius-box);\n    text-align: left;\n    &:where(:dir(rtl), [dir='rtl'], [dir='rtl'] *) {\n      text-align: right;\n    }\n    tr.row-hover {\n      &,\n      &:nth-child(even) {\n        &:hover {\n          @media (hover: hover) {\n            background-color: var(--color-base-200);\n          }\n        }\n      }\n    }\n    :where(th, td) {\n      padding-inline: calc(0.25rem * 4);\n      padding-block: calc(0.25rem * 3);\n      vertical-align: middle;\n    }\n    :where(thead, tfoot) {\n      white-space: nowrap;\n      color: color-mix(in oklab, var(--color-base-content) 60%, transparent);\n      font-size: 0.875rem;\n      font-weight: 600;\n    }\n    :where(tfoot) {\n      border-top: var(--border) solid\n        color-mix(in oklch, var(--color-base-content) 5%, #0000);\n    }\n    :where(.table-pin-rows thead tr) {\n      position: sticky;\n      top: calc(0.25rem * 0);\n      z-index: 1;\n      background-color: var(--color-base-100);\n    }\n    :where(.table-pin-rows tfoot tr) {\n      position: sticky;\n      bottom: calc(0.25rem * 0);\n      z-index: 1;\n      background-color: var(--color-base-100);\n    }\n    :where(.table-pin-cols tr th) {\n      position: sticky;\n      right: calc(0.25rem * 0);\n      left: calc(0.25rem * 0);\n      background-color: var(--color-base-100);\n    }\n    :where(thead tr, tbody tr:not(:last-child)) {\n      border-bottom: var(--border) solid\n        color-mix(in oklch, var(--color-base-content) 5%, #0000);\n    }\n  }\n  .stats {\n    position: relative;\n    display: inline-grid;\n    grid-auto-flow: column;\n    overflow-x: auto;\n    border-radius: var(--radius-box);\n  }\n  .progress {\n    position: relative;\n    height: calc(0.25rem * 2);\n    width: 100%;\n    appearance: none;\n    overflow: hidden;\n    border-radius: var(--radius-box);\n    background-color: color-mix(in oklab, currentColor 20%, transparent);\n    color: var(--color-base-content);\n    &:indeterminate {\n      background-image: repeating-linear-gradient(\n        90deg,\n        currentColor -1%,\n        currentColor 10%,\n        #0000 10%,\n        #0000 90%\n      );\n      background-size: 200%;\n      background-position-x: 15%;\n      animation: progress 5s ease-in-out infinite;\n      @supports (-moz-appearance: none) {\n        &::-moz-progress-bar {\n          background-color: transparent;\n          background-image: repeating-linear-gradient(\n            90deg,\n            currentColor -1%,\n            currentColor 10%,\n            #0000 10%,\n            #0000 90%\n          );\n          background-size: 200%;\n          background-position-x: 15%;\n          animation: progress 5s ease-in-out infinite;\n        }\n      }\n    }\n    @supports (-moz-appearance: none) {\n      &::-moz-progress-bar {\n        border-radius: var(--radius-box);\n        background-color: currentColor;\n      }\n    }\n    @supports (-webkit-appearance: none) {\n      &::-webkit-progress-bar {\n        border-radius: var(--radius-box);\n        background-color: transparent;\n      }\n      &::-webkit-progress-value {\n        border-radius: var(--radius-box);\n        background-color: currentColor;\n      }\n    }\n  }\n  .tooltip-left {\n    > .tooltip-content,\n    &[data-tip]:before {\n      transform: translateX(calc(var(--tt-pos, 0.25rem) - 0.25rem))\n        translateY(-50%);\n      inset: 50% var(--tt-off) auto auto;\n    }\n    &:after {\n      transform: translateX(var(--tt-pos, 0.25rem)) translateY(-50%)\n        rotate(-90deg);\n      inset: 50% calc(var(--tt-tail) + 1px) auto auto;\n    }\n  }\n  .tooltip-right {\n    > .tooltip-content,\n    &[data-tip]:before {\n      transform: translateX(calc(var(--tt-pos, -0.25rem) + 0.25rem))\n        translateY(-50%);\n      inset: 50% auto auto var(--tt-off);\n    }\n    &:after {\n      transform: translateX(var(--tt-pos, -0.25rem)) translateY(-50%)\n        rotate(90deg);\n      inset: 50% auto auto calc(var(--tt-tail) + 1px);\n    }\n  }\n  .dropdown-end {\n    --anchor-h: span-left;\n    :where(.dropdown-content) {\n      inset-inline-end: calc(0.25rem * 0);\n      translate: 0 0;\n    }\n    &.dropdown-left {\n      --anchor-h: left;\n      --anchor-v: span-top;\n      .dropdown-content {\n        top: auto;\n        bottom: calc(0.25rem * 0);\n      }\n    }\n    &.dropdown-right {\n      --anchor-h: right;\n      --anchor-v: span-top;\n      .dropdown-content {\n        top: auto;\n        bottom: calc(0.25rem * 0);\n      }\n    }\n  }\n  .hero-content {\n    isolation: isolate;\n    display: flex;\n    max-width: 80rem;\n    align-items: center;\n    justify-content: center;\n    gap: calc(0.25rem * 4);\n    padding: calc(0.25rem * 4);\n  }\n  .hero {\n    display: grid;\n    width: 100%;\n    place-items: center;\n    background-size: cover;\n    background-position: center;\n    & > * {\n      grid-column-start: 1;\n      grid-row-start: 1;\n    }\n  }\n  .stat-value {\n    grid-column-start: 1;\n    white-space: nowrap;\n    font-size: 2rem;\n    font-weight: 800;\n  }\n  .stat-desc {\n    grid-column-start: 1;\n    white-space: nowrap;\n    color: color-mix(in oklab, var(--color-base-content) 60%, transparent);\n    font-size: 0.75rem;\n  }\n  .stat-title {\n    grid-column-start: 1;\n    white-space: nowrap;\n    color: color-mix(in oklab, var(--color-base-content) 60%, transparent);\n    font-size: 0.75rem;\n  }\n  .divider {\n    display: flex;\n    height: calc(0.25rem * 4);\n    flex-direction: row;\n    align-items: center;\n    align-self: stretch;\n    white-space: nowrap;\n    margin: var(--divider-m, 1rem 0);\n    &:before,\n    &:after {\n      content: '';\n      height: calc(0.25rem * 0.5);\n      width: 100%;\n      flex-grow: 1;\n      background-color: color-mix(\n        in oklab,\n        var(--color-base-content) 10%,\n        transparent\n      );\n    }\n    @media print {\n      &:before,\n      &:after {\n        border: 0.5px solid;\n      }\n    }\n    &:not(:empty) {\n      gap: calc(0.25rem * 4);\n    }\n  }\n  .m-1 {\n    margin: calc(var(--spacing) * 1);\n  }\n  .label {\n    display: inline-flex;\n    align-items: center;\n    gap: calc(0.25rem * 1.5);\n    white-space: nowrap;\n    color: color-mix(in oklab, currentColor 60%, transparent);\n    &:has(input) {\n      cursor: pointer;\n    }\n    &:is(.input > *, .select > *) {\n      display: flex;\n      height: calc(100% - 0.5rem);\n      align-items: center;\n      padding-inline: calc(0.25rem * 3);\n      white-space: nowrap;\n      font-size: inherit;\n      &:first-child {\n        margin-inline-start: calc(0.25rem * -3);\n        margin-inline-end: calc(0.25rem * 3);\n        border-inline-end: var(--border) solid\n          color-mix(in oklab, currentColor 10%, #0000);\n      }\n      &:last-child {\n        margin-inline-start: calc(0.25rem * 3);\n        margin-inline-end: calc(0.25rem * -3);\n        border-inline-start: var(--border) solid\n          color-mix(in oklab, currentColor 10%, #0000);\n      }\n    }\n  }\n  .mt-0 {\n    margin-top: calc(var(--spacing) * 0);\n  }\n  .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n  .mt-4 {\n    margin-top: calc(var(--spacing) * 4);\n  }\n  .mr-8 {\n    margin-right: calc(var(--spacing) * 8);\n  }\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n  .ml-auto {\n    margin-left: auto;\n  }\n  .badge {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: calc(0.25rem * 2);\n    border-radius: var(--radius-selector);\n    vertical-align: middle;\n    color: var(--badge-fg);\n    border: var(--border) solid var(--badge-color, var(--color-base-200));\n    font-size: 0.875rem;\n    width: fit-content;\n    padding-inline: calc(0.25rem * 3 - var(--border));\n    background-size: auto, calc(var(--noise) * 100%);\n    background-image: none, var(--fx-noise);\n    background-color: var(--badge-bg);\n    --badge-bg: var(--badge-color, var(--color-base-100));\n    --badge-fg: var(--color-base-content);\n    --size: calc(var(--size-selector, 0.25rem) * 6);\n    height: var(--size);\n    &.badge-outline {\n      --badge-fg: var(--badge-color);\n      --badge-bg: #0000;\n      background-image: none;\n    }\n    &.badge-dash {\n      --badge-fg: var(--badge-color);\n      --badge-bg: #0000;\n      border-style: dashed;\n      background-image: none;\n    }\n    &.badge-soft {\n      color: var(--badge-color, var(--color-base-content));\n      background-color: color-mix(\n        in oklab,\n        var(--badge-color, var(--color-base-content)) 8%,\n        var(--color-base-100)\n      );\n      border-color: color-mix(\n        in oklab,\n        var(--badge-color, var(--color-base-content)) 10%,\n        var(--color-base-100)\n      );\n      background-image: none;\n    }\n  }\n  .navbar {\n    display: flex;\n    width: 100%;\n    align-items: center;\n    padding: 0.5rem;\n    min-height: 4rem;\n  }\n  .stat {\n    display: inline-grid;\n    width: 100%;\n    column-gap: calc(0.25rem * 4);\n    padding-inline: calc(0.25rem * 6);\n    padding-block: calc(0.25rem * 4);\n    grid-template-columns: repeat(1, 1fr);\n    &:not(:last-child) {\n      border-inline-end: var(--border) dashed\n        color-mix(in oklab, currentColor 10%, #0000);\n      border-block-end: none;\n    }\n  }\n  .alert {\n    display: grid;\n    align-items: center;\n    gap: calc(0.25rem * 4);\n    border-radius: var(--radius-box);\n    padding-inline: calc(0.25rem * 4);\n    padding-block: calc(0.25rem * 3);\n    color: var(--color-base-content);\n    background-color: var(--alert-color, var(--color-base-200));\n    justify-content: start;\n    justify-items: start;\n    grid-auto-flow: column;\n    grid-template-columns: auto;\n    text-align: start;\n    border: var(--border) solid var(--color-base-200);\n    font-size: 0.875rem;\n    line-height: 1.25rem;\n    background-size: auto, calc(var(--noise) * 100%);\n    background-image: none, var(--fx-noise);\n    box-shadow:\n      0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * 0.08)) inset,\n      0 1px\n        color-mix(\n          in oklab,\n          color-mix(\n              in oklab,\n              #000 20%,\n              var(--alert-color, var(--color-base-200))\n            )\n            calc(var(--depth) * 20%),\n          #0000\n        ),\n      0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * 0.08));\n    &:has(:nth-child(2)) {\n      grid-template-columns: auto minmax(auto, 1fr);\n    }\n    &.alert-outline {\n      background-color: transparent;\n      color: var(--alert-color);\n      box-shadow: none;\n      background-image: none;\n    }\n    &.alert-dash {\n      background-color: transparent;\n      color: var(--alert-color);\n      border-style: dashed;\n      box-shadow: none;\n      background-image: none;\n    }\n    &.alert-soft {\n      color: var(--alert-color, var(--color-base-content));\n      background: color-mix(\n        in oklab,\n        var(--alert-color, var(--color-base-content)) 8%,\n        var(--color-base-100)\n      );\n      border-color: color-mix(\n        in oklab,\n        var(--alert-color, var(--color-base-content)) 10%,\n        var(--color-base-100)\n      );\n      box-shadow: none;\n      background-image: none;\n    }\n  }\n  .flex {\n    display: flex;\n  }\n  .hidden {\n    display: none;\n  }\n  .inline-block {\n    display: inline-block;\n  }\n  .table {\n    display: table;\n  }\n  .divider-horizontal {\n    --divider-m: 0 1rem;\n    &.divider {\n      height: auto;\n      width: calc(0.25rem * 4);\n      flex-direction: column;\n      &:before {\n        height: 100%;\n        width: calc(0.25rem * 0.5);\n      }\n      &:after {\n        height: 100%;\n        width: calc(0.25rem * 0.5);\n      }\n    }\n  }\n  .btn-square {\n    padding-inline: calc(0.25rem * 0);\n    width: var(--size);\n    height: var(--size);\n  }\n  .h-5 {\n    height: calc(var(--spacing) * 5);\n  }\n  .h-6 {\n    height: calc(var(--spacing) * 6);\n  }\n  .h-8 {\n    height: calc(var(--spacing) * 8);\n  }\n  .min-h-screen {\n    min-height: 100vh;\n  }\n  .w-5 {\n    width: calc(var(--spacing) * 5);\n  }\n  .w-6 {\n    width: calc(var(--spacing) * 6);\n  }\n  .w-8 {\n    width: calc(var(--spacing) * 8);\n  }\n  .w-40 {\n    width: calc(var(--spacing) * 40);\n  }\n  .w-52 {\n    width: calc(var(--spacing) * 52);\n  }\n  .w-auto {\n    width: auto;\n  }\n  .w-full {\n    width: 100%;\n  }\n  .max-w-md {\n    max-width: var(--container-md);\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .flex-auto {\n    flex: auto;\n  }\n  .flex-none {\n    flex: none;\n  }\n  .flex-shrink-0 {\n    flex-shrink: 0;\n  }\n  .stats-vertical {\n    grid-auto-flow: row;\n    overflow-y: auto;\n    .stat:not(:last-child) {\n      border-inline-end: none;\n      border-block-end: var(--border) dashed\n        color-mix(in oklab, currentColor 10%, #0000);\n    }\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-row {\n    flex-direction: row;\n  }\n  .flex-nowrap {\n    flex-wrap: nowrap;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-4 {\n    gap: calc(var(--spacing) * 4);\n  }\n  .overflow-x-auto {\n    overflow-x: auto;\n  }\n  .rounded-md {\n    border-radius: var(--radius-md);\n  }\n  .alert-info {\n    border-color: var(--color-info);\n    color: var(--color-info-content);\n    --alert-color: var(--color-info);\n  }\n  .bg-accent {\n    background-color: var(--color-accent);\n  }\n  .bg-base-100 {\n    background-color: var(--color-base-100);\n  }\n  .bg-base-200 {\n    background-color: var(--color-base-200);\n  }\n  .bg-clrs-slate {\n    background-color: var(--clrs-slate, #708090);\n  }\n  .bg-neutral {\n    background-color: var(--color-neutral);\n  }\n  .bg-secondary {\n    background-color: var(--color-secondary);\n  }\n  .fill-current {\n    fill: currentColor;\n  }\n  .stroke-current {\n    stroke: currentColor;\n  }\n  .p-2 {\n    padding: calc(var(--spacing) * 2);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .py-6 {\n    padding-block: calc(var(--spacing) * 6);\n  }\n  .pt-0 {\n    padding-top: calc(var(--spacing) * 0);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .font-sans {\n    font-family: var(--font-sans);\n  }\n  .text-5xl {\n    font-size: var(--text-5xl);\n    line-height: var(--tw-leading, var(--text-5xl--line-height));\n  }\n  .text-xl {\n    font-size: var(--text-xl);\n    line-height: var(--tw-leading, var(--text-xl--line-height));\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .tooltip-warning {\n    --tt-bg: var(--color-warning);\n    > .tooltip-content,\n    &[data-tip]:before {\n      color: var(--color-warning-content);\n    }\n  }\n  .text-accent-content {\n    color: var(--color-accent-content);\n  }\n  .text-neutral-content {\n    color: var(--color-neutral-content);\n  }\n  .text-secondary {\n    color: var(--color-secondary);\n  }\n  .text-secondary-content {\n    color: var(--color-secondary-content);\n  }\n  .normal-case {\n    text-transform: none;\n  }\n  .shadow {\n    --tw-shadow:\n      0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)),\n      0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow:\n      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),\n      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .shadow-lg {\n    --tw-shadow:\n      0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)),\n      0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow:\n      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),\n      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .btn-ghost {\n    &:not(.btn-active, :hover, :active:focus, :focus-visible) {\n      --btn-shadow: '';\n      --btn-bg: #0000;\n      --btn-border: #0000;\n      --btn-noise: none;\n      &:not(:disabled, [disabled], .btn-disabled) {\n        outline-color: currentColor;\n        --btn-fg: currentColor;\n      }\n    }\n  }\n  .btn-primary {\n    --btn-color: var(--color-primary);\n    --btn-fg: var(--color-primary-content);\n  }\n  .lg\\:flex {\n    @media (width >= 64rem) {\n      display: flex;\n    }\n  }\n  .lg\\:inline-block {\n    @media (width >= 64rem) {\n      display: inline-block;\n    }\n  }\n  .lg\\:stats-horizontal {\n    @media (width >= 64rem) {\n      grid-auto-flow: column;\n      overflow-x: auto;\n      .stat:not(:last-child) {\n        border-inline-end: var(--border) dashed\n          color-mix(in oklab, currentColor 10%, #0000);\n        border-block-end: none;\n      }\n    }\n  }\n}\n@layer base {\n  :where(:root),\n  :root:has(input.theme-controller[value='light']:checked),\n  [data-theme='light'] {\n    color-scheme: light;\n    --color-base-100: oklch(100% 0 0);\n    --color-base-200: oklch(98% 0 0);\n    --color-base-300: oklch(95% 0 0);\n    --color-base-content: oklch(21% 0.006 285.885);\n    --color-primary: oklch(45% 0.24 277.023);\n    --color-primary-content: oklch(93% 0.034 272.788);\n    --color-secondary: oklch(65% 0.241 354.308);\n    --color-secondary-content: oklch(94% 0.028 342.258);\n    --color-accent: oklch(77% 0.152 181.912);\n    --color-accent-content: oklch(38% 0.063 188.416);\n    --color-neutral: oklch(14% 0.005 285.823);\n    --color-neutral-content: oklch(92% 0.004 286.32);\n    --color-info: oklch(74% 0.16 232.661);\n    --color-info-content: oklch(29% 0.066 243.157);\n    --color-success: oklch(76% 0.177 163.223);\n    --color-success-content: oklch(37% 0.077 168.94);\n    --color-warning: oklch(82% 0.189 84.429);\n    --color-warning-content: oklch(41% 0.112 45.904);\n    --color-error: oklch(71% 0.194 13.428);\n    --color-error-content: oklch(27% 0.105 12.094);\n    --radius-selector: 0.5rem;\n    --radius-field: 0.25rem;\n    --radius-box: 0.5rem;\n    --size-selector: 0.25rem;\n    --size-field: 0.25rem;\n    --border: 1px;\n    --depth: 1;\n    --noise: 0;\n  }\n}\n@layer base {\n  @media (prefers-color-scheme: dark) {\n    :root {\n      color-scheme: dark;\n      --color-base-100: oklch(25.33% 0.016 252.42);\n      --color-base-200: oklch(23.26% 0.014 253.1);\n      --color-base-300: oklch(21.15% 0.012 254.09);\n      --color-base-content: oklch(97.807% 0.029 256.847);\n      --color-primary: oklch(58% 0.233 277.117);\n      --color-primary-content: oklch(96% 0.018 272.314);\n      --color-secondary: oklch(65% 0.241 354.308);\n      --color-secondary-content: oklch(94% 0.028 342.258);\n      --color-accent: oklch(77% 0.152 181.912);\n      --color-accent-content: oklch(38% 0.063 188.416);\n      --color-neutral: oklch(14% 0.005 285.823);\n      --color-neutral-content: oklch(92% 0.004 286.32);\n      --color-info: oklch(74% 0.16 232.661);\n      --color-info-content: oklch(29% 0.066 243.157);\n      --color-success: oklch(76% 0.177 163.223);\n      --color-success-content: oklch(37% 0.077 168.94);\n      --color-warning: oklch(82% 0.189 84.429);\n      --color-warning-content: oklch(41% 0.112 45.904);\n      --color-error: oklch(71% 0.194 13.428);\n      --color-error-content: oklch(27% 0.105 12.094);\n      --radius-selector: 0.5rem;\n      --radius-field: 0.25rem;\n      --radius-box: 0.5rem;\n      --size-selector: 0.25rem;\n      --size-field: 0.25rem;\n      --border: 1px;\n      --depth: 1;\n      --noise: 0;\n    }\n  }\n}\n@layer base {\n  :root:has(input.theme-controller[value='light']:checked),\n  [data-theme='light'] {\n    color-scheme: light;\n    --color-base-100: oklch(100% 0 0);\n    --color-base-200: oklch(98% 0 0);\n    --color-base-300: oklch(95% 0 0);\n    --color-base-content: oklch(21% 0.006 285.885);\n    --color-primary: oklch(45% 0.24 277.023);\n    --color-primary-content: oklch(93% 0.034 272.788);\n    --color-secondary: oklch(65% 0.241 354.308);\n    --color-secondary-content: oklch(94% 0.028 342.258);\n    --color-accent: oklch(77% 0.152 181.912);\n    --color-accent-content: oklch(38% 0.063 188.416);\n    --color-neutral: oklch(14% 0.005 285.823);\n    --color-neutral-content: oklch(92% 0.004 286.32);\n    --color-info: oklch(74% 0.16 232.661);\n    --color-info-content: oklch(29% 0.066 243.157);\n    --color-success: oklch(76% 0.177 163.223);\n    --color-success-content: oklch(37% 0.077 168.94);\n    --color-warning: oklch(82% 0.189 84.429);\n    --color-warning-content: oklch(41% 0.112 45.904);\n    --color-error: oklch(71% 0.194 13.428);\n    --color-error-content: oklch(27% 0.105 12.094);\n    --radius-selector: 0.5rem;\n    --radius-field: 0.25rem;\n    --radius-box: 0.5rem;\n    --size-selector: 0.25rem;\n    --size-field: 0.25rem;\n    --border: 1px;\n    --depth: 1;\n    --noise: 0;\n  }\n}\n@layer base {\n  :root:has(input.theme-controller[value='dark']:checked),\n  [data-theme='dark'] {\n    color-scheme: dark;\n    --color-base-100: oklch(25.33% 0.016 252.42);\n    --color-base-200: oklch(23.26% 0.014 253.1);\n    --color-base-300: oklch(21.15% 0.012 254.09);\n    --color-base-content: oklch(97.807% 0.029 256.847);\n    --color-primary: oklch(58% 0.233 277.117);\n    --color-primary-content: oklch(96% 0.018 272.314);\n    --color-secondary: oklch(65% 0.241 354.308);\n    --color-secondary-content: oklch(94% 0.028 342.258);\n    --color-accent: oklch(77% 0.152 181.912);\n    --color-accent-content: oklch(38% 0.063 188.416);\n    --color-neutral: oklch(14% 0.005 285.823);\n    --color-neutral-content: oklch(92% 0.004 286.32);\n    --color-info: oklch(74% 0.16 232.661);\n    --color-info-content: oklch(29% 0.066 243.157);\n    --color-success: oklch(76% 0.177 163.223);\n    --color-success-content: oklch(37% 0.077 168.94);\n    --color-warning: oklch(82% 0.189 84.429);\n    --color-warning-content: oklch(41% 0.112 45.904);\n    --color-error: oklch(71% 0.194 13.428);\n    --color-error-content: oklch(27% 0.105 12.094);\n    --radius-selector: 0.5rem;\n    --radius-field: 0.25rem;\n    --radius-box: 0.5rem;\n    --size-selector: 0.25rem;\n    --size-field: 0.25rem;\n    --border: 1px;\n    --depth: 1;\n    --noise: 0;\n  }\n}\n@layer base {\n  :root:has(input.theme-controller[value='aqua']:checked),\n  [data-theme='aqua'] {\n    color-scheme: dark;\n    --color-base-100: oklch(37% 0.146 265.522);\n    --color-base-200: oklch(28% 0.091 267.935);\n    --color-base-300: oklch(22% 0.091 267.935);\n    --color-base-content: oklch(90% 0.058 230.902);\n    --color-primary: oklch(85.661% 0.144 198.645);\n    --color-primary-content: oklch(40.124% 0.068 197.603);\n    --color-secondary: oklch(60.682% 0.108 309.782);\n    --color-secondary-content: oklch(96% 0.016 293.756);\n    --color-accent: oklch(93.426% 0.102 94.555);\n    --color-accent-content: oklch(18.685% 0.02 94.555);\n    --color-neutral: oklch(27% 0.146 265.522);\n    --color-neutral-content: oklch(80% 0.146 265.522);\n    --color-info: oklch(54.615% 0.215 262.88);\n    --color-info-content: oklch(90.923% 0.043 262.88);\n    --color-success: oklch(62.705% 0.169 149.213);\n    --color-success-content: oklch(12.541% 0.033 149.213);\n    --color-warning: oklch(66.584% 0.157 58.318);\n    --color-warning-content: oklch(27% 0.077 45.635);\n    --color-error: oklch(73.95% 0.19 27.33);\n    --color-error-content: oklch(14.79% 0.038 27.33);\n    --radius-selector: 1rem;\n    --radius-field: 0.5rem;\n    --radius-box: 1rem;\n    --size-selector: 0.25rem;\n    --size-field: 0.25rem;\n    --border: 1px;\n    --depth: 1;\n    --noise: 0;\n  }\n}\n@layer base {\n  :root:has(input.theme-controller[value='business']:checked),\n  [data-theme='business'] {\n    color-scheme: dark;\n    --color-base-100: oklch(24.353% 0 0);\n    --color-base-200: oklch(22.648% 0 0);\n    --color-base-300: oklch(20.944% 0 0);\n    --color-base-content: oklch(84.87% 0 0);\n    --color-primary: oklch(41.703% 0.099 251.473);\n    --color-primary-content: oklch(88.34% 0.019 251.473);\n    --color-secondary: oklch(64.092% 0.027 229.389);\n    --color-secondary-content: oklch(12.818% 0.005 229.389);\n    --color-accent: oklch(67.271% 0.167 35.791);\n    --color-accent-content: oklch(13.454% 0.033 35.791);\n    --color-neutral: oklch(27.441% 0.013 253.041);\n    --color-neutral-content: oklch(85.488% 0.002 253.041);\n    --color-info: oklch(62.616% 0.143 240.033);\n    --color-info-content: oklch(12.523% 0.028 240.033);\n    --color-success: oklch(70.226% 0.094 156.596);\n    --color-success-content: oklch(14.045% 0.018 156.596);\n    --color-warning: oklch(77.482% 0.115 81.519);\n    --color-warning-content: oklch(15.496% 0.023 81.519);\n    --color-error: oklch(51.61% 0.146 29.674);\n    --color-error-content: oklch(90.322% 0.029 29.674);\n    --radius-selector: 0rem;\n    --radius-field: 0.25rem;\n    --radius-box: 0.25rem;\n    --size-selector: 0.25rem;\n    --size-field: 0.25rem;\n    --border: 1px;\n    --depth: 0;\n    --noise: 0;\n  }\n}\n@layer base {\n  :root:has(input.theme-controller[value='corporate']:checked),\n  [data-theme='corporate'] {\n    color-scheme: light;\n    --color-base-100: oklch(100% 0 0);\n    --color-base-200: oklch(93% 0 0);\n    --color-base-300: oklch(86% 0 0);\n    --color-base-content: oklch(22.389% 0.031 278.072);\n    --color-primary: oklch(58% 0.158 241.966);\n    --color-primary-content: oklch(100% 0 0);\n    --color-secondary: oklch(55% 0.046 257.417);\n    --color-secondary-content: oklch(100% 0 0);\n    --color-accent: oklch(60% 0.118 184.704);\n    --color-accent-content: oklch(100% 0 0);\n    --color-neutral: oklch(0% 0 0);\n    --color-neutral-content: oklch(100% 0 0);\n    --color-info: oklch(60% 0.126 221.723);\n    --color-info-content: oklch(100% 0 0);\n    --color-success: oklch(62% 0.194 149.214);\n    --color-success-content: oklch(100% 0 0);\n    --color-warning: oklch(85% 0.199 91.936);\n    --color-warning-content: oklch(0% 0 0);\n    --color-error: oklch(70% 0.191 22.216);\n    --color-error-content: oklch(0% 0 0);\n    --radius-selector: 0.25rem;\n    --radius-field: 0.25rem;\n    --radius-box: 0.25rem;\n    --size-selector: 0.25rem;\n    --size-field: 0.25rem;\n    --border: 1px;\n    --depth: 0;\n    --noise: 0;\n  }\n}\n@layer base {\n  :root:has(input.theme-controller[value='fantasy']:checked),\n  [data-theme='fantasy'] {\n    color-scheme: light;\n    --color-base-100: oklch(100% 0 0);\n    --color-base-200: oklch(93% 0 0);\n    --color-base-300: oklch(86% 0 0);\n    --color-base-content: oklch(27.807% 0.029 256.847);\n    --color-primary: oklch(37.45% 0.189 325.02);\n    --color-primary-content: oklch(87.49% 0.037 325.02);\n    --color-secondary: oklch(53.92% 0.162 241.36);\n    --color-secondary-content: oklch(90.784% 0.032 241.36);\n    --color-accent: oklch(75.98% 0.204 56.72);\n    --color-accent-content: oklch(15.196% 0.04 56.72);\n    --color-neutral: oklch(27.807% 0.029 256.847);\n    --color-neutral-content: oklch(85.561% 0.005 256.847);\n    --color-info: oklch(72.06% 0.191 231.6);\n    --color-info-content: oklch(0% 0 0);\n    --color-success: oklch(64.8% 0.15 160);\n    --color-success-content: oklch(0% 0 0);\n    --color-warning: oklch(84.71% 0.199 83.87);\n    --color-warning-content: oklch(0% 0 0);\n    --color-error: oklch(71.76% 0.221 22.18);\n    --color-error-content: oklch(0% 0 0);\n    --radius-selector: 1rem;\n    --radius-field: 0.5rem;\n    --radius-box: 1rem;\n    --size-selector: 0.25rem;\n    --size-field: 0.25rem;\n    --border: 1px;\n    --depth: 1;\n    --noise: 0;\n  }\n}\n@layer base {\n  :root:has(input.theme-controller[value='night']:checked),\n  [data-theme='night'] {\n    color-scheme: dark;\n    --color-base-100: oklch(20.768% 0.039 265.754);\n    --color-base-200: oklch(19.314% 0.037 265.754);\n    --color-base-300: oklch(17.86% 0.034 265.754);\n    --color-base-content: oklch(84.153% 0.007 265.754);\n    --color-primary: oklch(75.351% 0.138 232.661);\n    --color-primary-content: oklch(15.07% 0.027 232.661);\n    --color-secondary: oklch(68.011% 0.158 276.934);\n    --color-secondary-content: oklch(13.602% 0.031 276.934);\n    --color-accent: oklch(72.36% 0.176 350.048);\n    --color-accent-content: oklch(14.472% 0.035 350.048);\n    --color-neutral: oklch(27.949% 0.036 260.03);\n    --color-neutral-content: oklch(85.589% 0.007 260.03);\n    --color-info: oklch(68.455% 0.148 237.251);\n    --color-info-content: oklch(0% 0 0);\n    --color-success: oklch(78.452% 0.132 181.911);\n    --color-success-content: oklch(15.69% 0.026 181.911);\n    --color-warning: oklch(83.242% 0.139 82.95);\n    --color-warning-content: oklch(16.648% 0.027 82.95);\n    --color-error: oklch(71.785% 0.17 13.118);\n    --color-error-content: oklch(14.357% 0.034 13.118);\n    --radius-selector: 1rem;\n    --radius-field: 0.5rem;\n    --radius-box: 1rem;\n    --size-selector: 0.25rem;\n    --size-field: 0.25rem;\n    --border: 1px;\n    --depth: 0;\n    --noise: 0;\n  }\n}\n@layer base {\n  :root:has(input.theme-controller[value='winter']:checked),\n  [data-theme='winter'] {\n    color-scheme: light;\n    --color-base-100: oklch(100% 0 0);\n    --color-base-200: oklch(97.466% 0.011 259.822);\n    --color-base-300: oklch(93.268% 0.016 262.751);\n    --color-base-content: oklch(41.886% 0.053 255.824);\n    --color-primary: oklch(56.86% 0.255 257.57);\n    --color-primary-content: oklch(91.372% 0.051 257.57);\n    --color-secondary: oklch(42.551% 0.161 282.339);\n    --color-secondary-content: oklch(88.51% 0.032 282.339);\n    --color-accent: oklch(59.939% 0.191 335.171);\n    --color-accent-content: oklch(11.988% 0.038 335.171);\n    --color-neutral: oklch(19.616% 0.063 257.651);\n    --color-neutral-content: oklch(83.923% 0.012 257.651);\n    --color-info: oklch(88.127% 0.085 214.515);\n    --color-info-content: oklch(17.625% 0.017 214.515);\n    --color-success: oklch(80.494% 0.077 197.823);\n    --color-success-content: oklch(16.098% 0.015 197.823);\n    --color-warning: oklch(89.172% 0.045 71.47);\n    --color-warning-content: oklch(17.834% 0.009 71.47);\n    --color-error: oklch(73.092% 0.11 20.076);\n    --color-error-content: oklch(14.618% 0.022 20.076);\n    --radius-selector: 1rem;\n    --radius-field: 0.5rem;\n    --radius-box: 1rem;\n    --size-selector: 0.25rem;\n    --size-field: 0.25rem;\n    --border: 1px;\n    --depth: 0;\n    --noise: 0;\n  }\n}\n@layer base {\n  :root:has(input.theme-controller[value='wireframe']:checked),\n  [data-theme='wireframe'] {\n    color-scheme: light;\n    --color-base-100: oklch(100% 0 0);\n    --color-base-200: oklch(97% 0 0);\n    --color-base-300: oklch(94% 0 0);\n    --color-base-content: oklch(20% 0 0);\n    --color-primary: oklch(87% 0 0);\n    --color-primary-content: oklch(26% 0 0);\n    --color-secondary: oklch(87% 0 0);\n    --color-secondary-content: oklch(26% 0 0);\n    --color-accent: oklch(87% 0 0);\n    --color-accent-content: oklch(26% 0 0);\n    --color-neutral: oklch(87% 0 0);\n    --color-neutral-content: oklch(26% 0 0);\n    --color-info: oklch(44% 0.11 240.79);\n    --color-info-content: oklch(90% 0.058 230.902);\n    --color-success: oklch(43% 0.095 166.913);\n    --color-success-content: oklch(90% 0.093 164.15);\n    --color-warning: oklch(47% 0.137 46.201);\n    --color-warning-content: oklch(92% 0.12 95.746);\n    --color-error: oklch(44% 0.177 26.899);\n    --color-error-content: oklch(88% 0.062 18.334);\n    --radius-selector: 0rem;\n    --radius-field: 0.25rem;\n    --radius-box: 0.25rem;\n    --size-selector: 0.25rem;\n    --size-field: 0.25rem;\n    --border: 1px;\n    --depth: 0;\n    --noise: 0;\n  }\n}\n@layer base {\n  @property --radialprogress {\n    syntax: '<percentage>';\n    inherits: true;\n    initial-value: 0%;\n  }\n}\n@layer base {\n  :root {\n    scrollbar-color: color-mix(in oklch, currentColor 35%, #0000) #0000;\n  }\n}\n@layer base {\n  :root:has(\n      .modal-open,\n      .modal[open],\n      .modal:target,\n      .modal-toggle:checked,\n      .drawer:not([class*='drawer-open']) > .drawer-toggle:checked\n    ) {\n    overflow: hidden;\n  }\n}\n@layer base {\n  :root,\n  [data-theme] {\n    background-color: var(--root-bg, var(--color-base-100));\n    color: var(--color-base-content);\n  }\n}\n@layer base {\n  :root {\n    --fx-noise: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E\");\n  }\n  .chat {\n    --mask-chat: url(\"data:image/svg+xml,%3csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 11.5004C0 13.0004 2 13.0004 2 13.0004H12H13V0.00036329L12.5 0C12.5 0 11.977 2.09572 11.8581 2.50033C11.6075 3.35237 10.9149 4.22374 9 5.50036C6 7.50036 0 10.0004 0 11.5004Z'/%3e%3c/svg%3e\");\n  }\n}\n@layer base {\n  :where(\n    :root:has(\n        .modal-open,\n        .modal[open],\n        .modal:target,\n        .modal-toggle:checked,\n        .drawer:not(.drawer-open) > .drawer-toggle:checked\n      )\n  ) {\n    scrollbar-gutter: stable;\n    background-image: linear-gradient(\n      var(--color-base-100),\n      var(--color-base-100)\n    );\n    --root-bg: color-mix(in srgb, var(--color-base-100), oklch(0% 0 0) 40%);\n  }\n}\n@keyframes skeleton {\n  0% {\n    background-position: 150%;\n  }\n  100% {\n    background-position: -50%;\n  }\n}\n@keyframes progress {\n  50% {\n    background-position-x: -115%;\n  }\n}\n@keyframes radio {\n  0% {\n    padding: 5px;\n  }\n  50% {\n    padding: 3px;\n  }\n}\n@keyframes dropdown {\n  0% {\n    opacity: 0;\n  }\n}\n@keyframes rating {\n  0%,\n  40% {\n    scale: 1.1;\n    filter: brightness(1.05) contrast(1.05);\n  }\n}\n@keyframes toast {\n  0% {\n    scale: 0.9;\n    opacity: 0;\n  }\n  100% {\n    scale: 1;\n    opacity: 1;\n  }\n}\n";
+const shadowCss = "/*! tailwindcss v4.1.1 | MIT License | https://tailwindcss.com */\n@layer theme, base, components, utilities;\n@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or\n  ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {\n  @layer base {\n    *,\n    ::before,\n    ::after,\n    ::backdrop {\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n    }\n  }\n}\n@layer theme {\n  :root,\n  :host {\n    --font-sans:\n      ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',\n      'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';\n    --spacing: 0.25rem;\n    --container-md: 28rem;\n    --text-xl: 1.25rem;\n    --text-xl--line-height: calc(1.75 / 1.25);\n    --text-5xl: 3rem;\n    --text-5xl--line-height: 1;\n    --font-weight-bold: 700;\n    --radius-md: 0.375rem;\n  }\n}\n@layer utilities {\n  .tooltip {\n    position: relative;\n    display: inline-block;\n    --tt-bg: var(--color-neutral);\n    --tt-off: calc(100% + 0.5rem);\n    --tt-tail: calc(100% + 1px + 0.25rem);\n    > :where(.tooltip-content),\n    &[data-tip]:before {\n      position: absolute;\n      max-width: 20rem;\n      border-radius: var(--radius-field);\n      padding-inline: calc(0.25rem * 2);\n      padding-block: calc(0.25rem * 1);\n      text-align: center;\n      white-space: normal;\n      color: var(--color-neutral-content);\n      opacity: 0%;\n      font-size: 0.875rem;\n      line-height: 1.25em;\n      transition:\n        opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms,\n        transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms;\n      background-color: var(--tt-bg);\n      width: max-content;\n      pointer-events: none;\n      z-index: 1;\n      --tw-content: attr(data-tip);\n      content: var(--tw-content);\n    }\n    &:after {\n      position: absolute;\n      position: absolute;\n      opacity: 0%;\n      background-color: var(--tt-bg);\n      transition:\n        opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms,\n        transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms;\n      content: '';\n      pointer-events: none;\n      width: 0.625rem;\n      height: 0.25rem;\n      display: block;\n      mask-repeat: no-repeat;\n      mask-position: -1px 0;\n      --mask-tooltip: url(\"data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A\");\n      mask-image: var(--mask-tooltip);\n    }\n    &.tooltip-open,\n    &[data-tip]:hover,\n    &:hover,\n    &:has(:focus-visible) {\n      > .tooltip-content,\n      &[data-tip]:before,\n      &:after {\n        opacity: 100%;\n        --tt-pos: 0rem;\n        transition:\n          opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s,\n          transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n      }\n    }\n    > .tooltip-content,\n    &[data-tip]:before {\n      transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));\n      inset: auto auto var(--tt-off) 50%;\n    }\n    &:after {\n      transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));\n      inset: auto auto var(--tt-tail) 50%;\n    }\n  }\n  .menu {\n    display: flex;\n    width: fit-content;\n    flex-direction: column;\n    flex-wrap: wrap;\n    padding: calc(0.25rem * 2);\n    --menu-active-fg: var(--color-neutral-content);\n    --menu-active-bg: var(--color-neutral);\n    font-size: 0.875rem;\n    :where(li ul) {\n      position: relative;\n      margin-inline-start: calc(0.25rem * 4);\n      padding-inline-start: calc(0.25rem * 2);\n      white-space: nowrap;\n      &:before {\n        position: absolute;\n        inset-inline-start: calc(0.25rem * 0);\n        top: calc(0.25rem * 3);\n        bottom: calc(0.25rem * 3);\n        background-color: var(--color-base-content);\n        opacity: 10%;\n        width: var(--border);\n        content: '';\n      }\n    }\n    :where(li > .menu-dropdown:not(.menu-dropdown-show)) {\n      display: none;\n    }\n    :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)),\n    :where(li:not(.menu-title) > details > summary:not(.menu-title)) {\n      display: grid;\n      grid-auto-flow: column;\n      align-content: flex-start;\n      align-items: center;\n      gap: calc(0.25rem * 2);\n      border-radius: var(--radius-field);\n      padding-inline: calc(0.25rem * 3);\n      padding-block: calc(0.25rem * 1.5);\n      text-align: start;\n      transition-property: color, background-color, box-shadow;\n      transition-duration: 0.2s;\n      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n      grid-auto-columns: minmax(auto, max-content) auto max-content;\n      text-wrap: balance;\n      user-select: none;\n    }\n    :where(li > details > summary) {\n      --tw-outline-style: none;\n      outline-style: none;\n      @media (forced-colors: active) {\n        outline: 2px solid transparent;\n        outline-offset: 2px;\n      }\n      &::-webkit-details-marker {\n        display: none;\n      }\n    }\n    :where(li > details > summary),\n    :where(li > .menu-dropdown-toggle) {\n      &:after {\n        justify-self: flex-end;\n        display: block;\n        height: 0.375rem;\n        width: 0.375rem;\n        rotate: -135deg;\n        translate: 0 -1px;\n        transition-property: rotate, translate;\n        transition-duration: 0.2s;\n        content: '';\n        transform-origin: 50% 50%;\n        box-shadow: 2px 2px inset;\n        pointer-events: none;\n      }\n    }\n    :where(li > details[open] > summary):after,\n    :where(li > .menu-dropdown-toggle.menu-dropdown-show):after {\n      rotate: 45deg;\n      translate: 0 1px;\n    }\n    :where(\n        li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title),\n        li:not(.menu-title, .disabled) > details > summary:not(.menu-title)\n      ):not(.menu-active, :active, .btn) {\n      &.menu-focus,\n      &:focus-visible {\n        cursor: pointer;\n        background-color: color-mix(\n          in srgb,\n          var(--color-base-content) 10%,\n          transparent\n        );\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(\n            in oklab,\n            var(--color-base-content) 10%,\n            transparent\n          );\n        }\n        color: var(--color-base-content);\n        --tw-outline-style: none;\n        outline-style: none;\n        @media (forced-colors: active) {\n          outline: 2px solid transparent;\n          outline-offset: 2px;\n        }\n      }\n    }\n    :where(\n      li:not(.menu-title, .disabled)\n        > *:not(ul, details, .menu-title):not(\n          .menu-active,\n          :active,\n          .btn\n        ):hover,\n      li:not(.menu-title, .disabled)\n        > details\n        > summary:not(.menu-title):not(.menu-active, :active, .btn):hover\n    ) {\n      cursor: pointer;\n      background-color: color-mix(\n        in srgb,\n        var(--color-base-content) 10%,\n        transparent\n      );\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(\n          in oklab,\n          var(--color-base-content) 10%,\n          transparent\n        );\n      }\n      --tw-outline-style: none;\n      outline-style: none;\n      @media (forced-colors: active) {\n        outline: 2px solid transparent;\n        outline-offset: 2px;\n      }\n      box-shadow:\n        0 1px oklch(0% 0 0 / 0.01) inset,\n        0 -1px oklch(100% 0 0 / 0.01) inset;\n    }\n    :where(li:empty) {\n      background-color: var(--color-base-content);\n      opacity: 10%;\n      margin: 0.5rem 1rem;\n      height: 1px;\n    }\n    :where(li) {\n      position: relative;\n      display: flex;\n      flex-shrink: 0;\n      flex-direction: column;\n      flex-wrap: wrap;\n      align-items: stretch;\n      .badge {\n        justify-self: flex-end;\n      }\n      & > *:not(ul, .menu-title, details, .btn):active,\n      & > *:not(ul, .menu-title, details, .btn).menu-active,\n      & > details > summary:active {\n        --tw-outline-style: none;\n        outline-style: none;\n        @media (forced-colors: active) {\n          outline: 2px solid transparent;\n          outline-offset: 2px;\n        }\n        color: var(--menu-active-fg);\n        background-color: var(--menu-active-bg);\n        background-size: auto, calc(var(--noise) * 100%);\n        background-image: none, var(--fx-noise);\n        &:not(&:active) {\n          box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--menu-active-bg);\n        }\n      }\n      &.menu-disabled {\n        pointer-events: none;\n        color: color-mix(in srgb, var(--color-base-content) 20%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          color: color-mix(\n            in oklab,\n            var(--color-base-content) 20%,\n            transparent\n          );\n        }\n      }\n    }\n    .dropdown:focus-within {\n      .menu-dropdown-toggle:after {\n        rotate: 45deg;\n        translate: 0 1px;\n      }\n    }\n    .dropdown-content {\n      margin-top: calc(0.25rem * 2);\n      padding: calc(0.25rem * 2);\n      &:before {\n        display: none;\n      }\n    }\n  }\n  .dropdown {\n    position: relative;\n    display: inline-block;\n    position-area: var(--anchor-v, bottom) var(--anchor-h, span-right);\n    & > *:not(summary):focus {\n      --tw-outline-style: none;\n      outline-style: none;\n      @media (forced-colors: active) {\n        outline: 2px solid transparent;\n        outline-offset: 2px;\n      }\n    }\n    .dropdown-content {\n      position: absolute;\n    }\n    &:not(details, .dropdown-open, .dropdown-hover:hover, :focus-within) {\n      .dropdown-content {\n        display: none;\n        transform-origin: top;\n        opacity: 0%;\n        scale: 95%;\n      }\n    }\n    &[popover],\n    .dropdown-content {\n      z-index: 999;\n      animation: dropdown 0.2s;\n      transition-property: opacity, scale, display;\n      transition-behavior: allow-discrete;\n      transition-duration: 0.2s;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    }\n    @starting-style {\n      &[popover],\n      .dropdown-content {\n        scale: 95%;\n        opacity: 0;\n      }\n    }\n    &.dropdown-open,\n    &:not(.dropdown-hover):focus,\n    &:focus-within {\n      > [tabindex]:first-child {\n        pointer-events: none;\n      }\n      .dropdown-content {\n        opacity: 100%;\n      }\n    }\n    &.dropdown-hover:hover {\n      .dropdown-content {\n        opacity: 100%;\n        scale: 100%;\n      }\n    }\n    &:is(details) {\n      summary {\n        &::-webkit-details-marker {\n          display: none;\n        }\n      }\n    }\n    &.dropdown-open,\n    &:focus,\n    &:focus-within {\n      .dropdown-content {\n        scale: 100%;\n      }\n    }\n    &:where([popover]) {\n      background: #0000;\n    }\n    &[popover] {\n      position: fixed;\n      color: inherit;\n      @supports not (position-area: bottom) {\n        margin: auto;\n        &.dropdown-open:not(:popover-open) {\n          display: none;\n          transform-origin: top;\n          opacity: 0%;\n          scale: 95%;\n        }\n        &::backdrop {\n          background-color: color-mix(in oklab, #000 30%, #0000);\n        }\n      }\n      &:not(.dropdown-open, :popover-open) {\n        display: none;\n        transform-origin: top;\n        opacity: 0%;\n        scale: 95%;\n      }\n    }\n  }\n  .btn {\n    :where(&) {\n      width: unset;\n    }\n    display: inline-flex;\n    flex-shrink: 0;\n    cursor: pointer;\n    flex-wrap: nowrap;\n    align-items: center;\n    justify-content: center;\n    gap: calc(0.25rem * 1.5);\n    text-align: center;\n    vertical-align: middle;\n    outline-offset: 2px;\n    webkit-user-select: none;\n    user-select: none;\n    padding-inline: var(--btn-p);\n    color: var(--btn-fg);\n    --tw-prose-links: var(--btn-fg);\n    height: var(--size);\n    font-size: var(--fontsize, 0.875rem);\n    font-weight: 600;\n    outline-color: var(--btn-color, var(--color-base-content));\n    transition-property: color, background-color, border-color, box-shadow;\n    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n    transition-duration: 0.2s;\n    border-start-start-radius: var(--join-ss, var(--radius-field));\n    border-start-end-radius: var(--join-se, var(--radius-field));\n    border-end-start-radius: var(--join-es, var(--radius-field));\n    border-end-end-radius: var(--join-ee, var(--radius-field));\n    background-color: var(--btn-bg);\n    background-size: auto, calc(var(--noise) * 100%);\n    background-image: none, var(--btn-noise);\n    border-width: var(--border);\n    border-style: solid;\n    border-color: var(--btn-border);\n    text-shadow: 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 0.15));\n    box-shadow:\n      0 0.5px 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 6%)) inset,\n      var(--btn-shadow);\n    --size: calc(var(--size-field, 0.25rem) * 10);\n    --btn-bg: var(--btn-color, var(--color-base-200));\n    --btn-fg: var(--color-base-content);\n    --btn-p: 1rem;\n    --btn-border: color-mix(\n      in oklab,\n      var(--btn-bg),\n      #000 calc(var(--depth) * 5%)\n    );\n    --btn-shadow:\n      0 3px 2px -2px\n        color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000),\n      0 4px 3px -2px\n        color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000);\n    --btn-noise: var(--fx-noise);\n    .prose & {\n      text-decoration-line: none;\n    }\n    @media (hover: hover) {\n      &:hover {\n        --btn-bg: color-mix(\n          in srgb,\n          var(--btn-color, var(--color-base-200)),\n          #000 7%\n        );\n        @supports (color: color-mix(in lab, red, red)) {\n          --btn-bg: color-mix(\n            in oklab,\n            var(--btn-color, var(--color-base-200)),\n            #000 7%\n          );\n        }\n      }\n    }\n    &:focus-visible {\n      outline-width: 2px;\n      outline-style: solid;\n    }\n    &:active:not(.btn-active) {\n      translate: 0 0.5px;\n      --btn-bg: color-mix(\n        in srgb,\n        var(--btn-color, var(--color-base-200)),\n        #000 5%\n      );\n      @supports (color: color-mix(in lab, red, red)) {\n        --btn-bg: color-mix(\n          in oklab,\n          var(--btn-color, var(--color-base-200)),\n          #000 5%\n        );\n      }\n      --btn-border: color-mix(\n        in srgb,\n        var(--btn-color, var(--color-base-200)),\n        #000 7%\n      );\n      @supports (color: color-mix(in lab, red, red)) {\n        --btn-border: color-mix(\n          in oklab,\n          var(--btn-color, var(--color-base-200)),\n          #000 7%\n        );\n      }\n      --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0);\n    }\n    &:is(:disabled, [disabled], .btn-disabled) {\n      &:not(.btn-link, .btn-ghost) {\n        background-color: color-mix(\n          in srgb,\n          var(--color-base-content) 10%,\n          transparent\n        );\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(\n            in oklab,\n            var(--color-base-content) 10%,\n            transparent\n          );\n        }\n        box-shadow: none;\n      }\n      pointer-events: none;\n      --btn-border: #0000;\n      --btn-noise: none;\n      --btn-fg: color-mix(in srgb, var(--color-base-content) 20%, #0000);\n      @supports (color: color-mix(in lab, red, red)) {\n        --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000);\n      }\n      @media (hover: hover) {\n        &:hover {\n          pointer-events: none;\n          background-color: color-mix(\n            in srgb,\n            var(--color-neutral) 20%,\n            transparent\n          );\n          @supports (color: color-mix(in lab, red, red)) {\n            background-color: color-mix(\n              in oklab,\n              var(--color-neutral) 20%,\n              transparent\n            );\n          }\n          --btn-border: #0000;\n          --btn-fg: color-mix(in srgb, var(--color-base-content) 20%, #0000);\n          @supports (color: color-mix(in lab, red, red)) {\n            --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000);\n          }\n        }\n      }\n    }\n    &:is(input[type='checkbox'], input[type='radio']) {\n      appearance: none;\n      &::after {\n        content: attr(aria-label);\n      }\n    }\n    &:where(input:checked:not(.filter .btn)) {\n      --btn-color: var(--color-primary);\n      --btn-fg: var(--color-primary-content);\n      isolation: isolate;\n    }\n  }\n  .radial-progress {\n    position: relative;\n    display: inline-grid;\n    height: var(--size);\n    width: var(--size);\n    place-content: center;\n    border-radius: calc(infinity * 1px);\n    background-color: transparent;\n    vertical-align: middle;\n    box-sizing: content-box;\n    --value: 0;\n    --size: 5rem;\n    --thickness: calc(var(--size) / 10);\n    --radialprogress: calc(var(--value) * 1%);\n    transition: --radialprogress 0.3s linear;\n    &:before {\n      position: absolute;\n      inset: calc(0.25rem * 0);\n      border-radius: calc(infinity * 1px);\n      content: '';\n      background:\n        radial-gradient(farthest-side, currentColor 98%, #0000)\n          top/var(--thickness) var(--thickness) no-repeat,\n        conic-gradient(currentColor var(--radialprogress), #0000 0);\n      webkit-mask: radial-gradient(\n        farthest-side,\n        #0000 calc(100% - var(--thickness)),\n        #000 calc(100% + 0.5px - var(--thickness))\n      );\n      mask: radial-gradient(\n        farthest-side,\n        #0000 calc(100% - var(--thickness)),\n        #000 calc(100% + 0.5px - var(--thickness))\n      );\n    }\n    &:after {\n      position: absolute;\n      border-radius: calc(infinity * 1px);\n      background-color: currentColor;\n      transition: transform 0.3s linear;\n      content: '';\n      inset: calc(50% - var(--thickness) / 2);\n      transform: rotate(calc(var(--value) * 3.6deg - 90deg))\n        translate(calc(var(--size) / 2 - 50%));\n    }\n  }\n  .list {\n    display: flex;\n    flex-direction: column;\n    font-size: 0.875rem;\n    :where(.list-row) {\n      --list-grid-cols: minmax(0, auto) 1fr;\n      position: relative;\n      display: grid;\n      grid-auto-flow: column;\n      gap: calc(0.25rem * 4);\n      border-radius: var(--radius-box);\n      padding: calc(0.25rem * 4);\n      word-break: break-word;\n      grid-template-columns: var(--list-grid-cols);\n      &:has(.list-col-grow:nth-child(1)) {\n        --list-grid-cols: 1fr;\n      }\n      &:has(.list-col-grow:nth-child(2)) {\n        --list-grid-cols: minmax(0, auto) 1fr;\n      }\n      &:has(.list-col-grow:nth-child(3)) {\n        --list-grid-cols: minmax(0, auto) minmax(0, auto) 1fr;\n      }\n      &:has(.list-col-grow:nth-child(4)) {\n        --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr;\n      }\n      &:has(.list-col-grow:nth-child(5)) {\n        --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto)\n          minmax(0, auto) 1fr;\n      }\n      &:has(.list-col-grow:nth-child(6)) {\n        --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto)\n          minmax(0, auto) minmax(0, auto) 1fr;\n      }\n      :not(.list-col-wrap) {\n        grid-row-start: 1;\n      }\n    }\n    & > :not(:last-child) {\n      &.list-row,\n      .list-row {\n        &:after {\n          content: '';\n          border-bottom: var(--border) solid;\n          inset-inline: var(--radius-box);\n          position: absolute;\n          bottom: calc(0.25rem * 0);\n          border-color: color-mix(\n            in srgb,\n            var(--color-base-content) 5%,\n            transparent\n          );\n          @supports (color: color-mix(in lab, red, red)) {\n            border-color: color-mix(\n              in oklab,\n              var(--color-base-content) 5%,\n              transparent\n            );\n          }\n        }\n      }\n    }\n  }\n  .table {\n    font-size: 0.875rem;\n    position: relative;\n    width: 100%;\n    border-radius: var(--radius-box);\n    text-align: left;\n    &:where(:dir(rtl), [dir='rtl'], [dir='rtl'] *) {\n      text-align: right;\n    }\n    tr.row-hover {\n      &,\n      &:nth-child(even) {\n        &:hover {\n          @media (hover: hover) {\n            background-color: var(--color-base-200);\n          }\n        }\n      }\n    }\n    :where(th, td) {\n      padding-inline: calc(0.25rem * 4);\n      padding-block: calc(0.25rem * 3);\n      vertical-align: middle;\n    }\n    :where(thead, tfoot) {\n      white-space: nowrap;\n      color: color-mix(in srgb, var(--color-base-content) 60%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, var(--color-base-content) 60%, transparent);\n      }\n      font-size: 0.875rem;\n      font-weight: 600;\n    }\n    :where(tfoot) {\n      border-top: var(--border) solid\n        color-mix(in srgb, var(--color-base-content) 5%, #0000);\n      @supports (color: color-mix(in lab, red, red)) {\n        border-top: var(--border) solid\n          color-mix(in oklch, var(--color-base-content) 5%, #0000);\n      }\n    }\n    :where(.table-pin-rows thead tr) {\n      position: sticky;\n      top: calc(0.25rem * 0);\n      z-index: 1;\n      background-color: var(--color-base-100);\n    }\n    :where(.table-pin-rows tfoot tr) {\n      position: sticky;\n      bottom: calc(0.25rem * 0);\n      z-index: 1;\n      background-color: var(--color-base-100);\n    }\n    :where(.table-pin-cols tr th) {\n      position: sticky;\n      right: calc(0.25rem * 0);\n      left: calc(0.25rem * 0);\n      background-color: var(--color-base-100);\n    }\n    :where(thead tr, tbody tr:not(:last-child)) {\n      border-bottom: var(--border) solid\n        color-mix(in srgb, var(--color-base-content) 5%, #0000);\n      @supports (color: color-mix(in lab, red, red)) {\n        border-bottom: var(--border) solid\n          color-mix(in oklch, var(--color-base-content) 5%, #0000);\n      }\n    }\n  }\n  .stats {\n    position: relative;\n    display: inline-grid;\n    grid-auto-flow: column;\n    overflow-x: auto;\n    border-radius: var(--radius-box);\n  }\n  .progress {\n    position: relative;\n    height: calc(0.25rem * 2);\n    width: 100%;\n    appearance: none;\n    overflow: hidden;\n    border-radius: var(--radius-box);\n    background-color: color-mix(in oklab, currentColor 20%, transparent);\n    color: var(--color-base-content);\n    &:indeterminate {\n      background-image: repeating-linear-gradient(\n        90deg,\n        currentColor -1%,\n        currentColor 10%,\n        #0000 10%,\n        #0000 90%\n      );\n      background-size: 200%;\n      background-position-x: 15%;\n      animation: progress 5s ease-in-out infinite;\n      @supports (-moz-appearance: none) {\n        &::-moz-progress-bar {\n          background-color: transparent;\n          background-image: repeating-linear-gradient(\n            90deg,\n            currentColor -1%,\n            currentColor 10%,\n            #0000 10%,\n            #0000 90%\n          );\n          background-size: 200%;\n          background-position-x: 15%;\n          animation: progress 5s ease-in-out infinite;\n        }\n      }\n    }\n    @supports (-moz-appearance: none) {\n      &::-moz-progress-bar {\n        border-radius: var(--radius-box);\n        background-color: currentColor;\n      }\n    }\n    @supports (-webkit-appearance: none) {\n      &::-webkit-progress-bar {\n        border-radius: var(--radius-box);\n        background-color: transparent;\n      }\n      &::-webkit-progress-value {\n        border-radius: var(--radius-box);\n        background-color: currentColor;\n      }\n    }\n  }\n  .tooltip-left {\n    > .tooltip-content,\n    &[data-tip]:before {\n      transform: translateX(calc(var(--tt-pos, 0.25rem) - 0.25rem))\n        translateY(-50%);\n      inset: 50% var(--tt-off) auto auto;\n    }\n    &:after {\n      transform: translateX(var(--tt-pos, 0.25rem)) translateY(-50%)\n        rotate(-90deg);\n      inset: 50% calc(var(--tt-tail) + 1px) auto auto;\n    }\n  }\n  .tooltip-right {\n    > .tooltip-content,\n    &[data-tip]:before {\n      transform: translateX(calc(var(--tt-pos, -0.25rem) + 0.25rem))\n        translateY(-50%);\n      inset: 50% auto auto var(--tt-off);\n    }\n    &:after {\n      transform: translateX(var(--tt-pos, -0.25rem)) translateY(-50%)\n        rotate(90deg);\n      inset: 50% auto auto calc(var(--tt-tail) + 1px);\n    }\n  }\n  .dropdown-end {\n    --anchor-h: span-left;\n    :where(.dropdown-content) {\n      inset-inline-end: calc(0.25rem * 0);\n      translate: 0 0;\n    }\n    &.dropdown-left {\n      --anchor-h: left;\n      --anchor-v: span-top;\n      .dropdown-content {\n        top: auto;\n        bottom: calc(0.25rem * 0);\n      }\n    }\n    &.dropdown-right {\n      --anchor-h: right;\n      --anchor-v: span-top;\n      .dropdown-content {\n        top: auto;\n        bottom: calc(0.25rem * 0);\n      }\n    }\n  }\n  .hero-content {\n    isolation: isolate;\n    display: flex;\n    max-width: 80rem;\n    align-items: center;\n    justify-content: center;\n    gap: calc(0.25rem * 4);\n    padding: calc(0.25rem * 4);\n  }\n  .hero {\n    display: grid;\n    width: 100%;\n    place-items: center;\n    background-size: cover;\n    background-position: center;\n    & > * {\n      grid-column-start: 1;\n      grid-row-start: 1;\n    }\n  }\n  .stat-value {\n    grid-column-start: 1;\n    white-space: nowrap;\n    font-size: 2rem;\n    font-weight: 800;\n  }\n  .stat-desc {\n    grid-column-start: 1;\n    white-space: nowrap;\n    color: color-mix(in srgb, var(--color-base-content) 60%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      color: color-mix(in oklab, var(--color-base-content) 60%, transparent);\n    }\n    font-size: 0.75rem;\n  }\n  .stat-title {\n    grid-column-start: 1;\n    white-space: nowrap;\n    color: color-mix(in srgb, var(--color-base-content) 60%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      color: color-mix(in oklab, var(--color-base-content) 60%, transparent);\n    }\n    font-size: 0.75rem;\n  }\n  .divider {\n    display: flex;\n    height: calc(0.25rem * 4);\n    flex-direction: row;\n    align-items: center;\n    align-self: stretch;\n    white-space: nowrap;\n    margin: var(--divider-m, 1rem 0);\n    &:before,\n    &:after {\n      content: '';\n      height: calc(0.25rem * 0.5);\n      width: 100%;\n      flex-grow: 1;\n      background-color: color-mix(\n        in srgb,\n        var(--color-base-content) 10%,\n        transparent\n      );\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(\n          in oklab,\n          var(--color-base-content) 10%,\n          transparent\n        );\n      }\n    }\n    @media print {\n      &:before,\n      &:after {\n        border: 0.5px solid;\n      }\n    }\n    &:not(:empty) {\n      gap: calc(0.25rem * 4);\n    }\n  }\n  .m-1 {\n    margin: calc(var(--spacing) * 1);\n  }\n  .label {\n    display: inline-flex;\n    align-items: center;\n    gap: calc(0.25rem * 1.5);\n    white-space: nowrap;\n    color: color-mix(in oklab, currentColor 60%, transparent);\n    &:has(input) {\n      cursor: pointer;\n    }\n    &:is(.input > *, .select > *) {\n      display: flex;\n      height: calc(100% - 0.5rem);\n      align-items: center;\n      padding-inline: calc(0.25rem * 3);\n      white-space: nowrap;\n      font-size: inherit;\n      &:first-child {\n        margin-inline-start: calc(0.25rem * -3);\n        margin-inline-end: calc(0.25rem * 3);\n        border-inline-end: var(--border) solid\n          color-mix(in oklab, currentColor 10%, #0000);\n      }\n      &:last-child {\n        margin-inline-start: calc(0.25rem * 3);\n        margin-inline-end: calc(0.25rem * -3);\n        border-inline-start: var(--border) solid\n          color-mix(in oklab, currentColor 10%, #0000);\n      }\n    }\n  }\n  .mt-0 {\n    margin-top: calc(var(--spacing) * 0);\n  }\n  .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n  .mt-4 {\n    margin-top: calc(var(--spacing) * 4);\n  }\n  .mr-8 {\n    margin-right: calc(var(--spacing) * 8);\n  }\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n  .ml-auto {\n    margin-left: auto;\n  }\n  .badge {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: calc(0.25rem * 2);\n    border-radius: var(--radius-selector);\n    vertical-align: middle;\n    color: var(--badge-fg);\n    border: var(--border) solid var(--badge-color, var(--color-base-200));\n    font-size: 0.875rem;\n    width: fit-content;\n    padding-inline: calc(0.25rem * 3 - var(--border));\n    background-size: auto, calc(var(--noise) * 100%);\n    background-image: none, var(--fx-noise);\n    background-color: var(--badge-bg);\n    --badge-bg: var(--badge-color, var(--color-base-100));\n    --badge-fg: var(--color-base-content);\n    --size: calc(var(--size-selector, 0.25rem) * 6);\n    height: var(--size);\n    &.badge-outline {\n      --badge-fg: var(--badge-color);\n      --badge-bg: #0000;\n      background-image: none;\n    }\n    &.badge-dash {\n      --badge-fg: var(--badge-color);\n      --badge-bg: #0000;\n      border-style: dashed;\n      background-image: none;\n    }\n    &.badge-soft {\n      color: var(--badge-color, var(--color-base-content));\n      background-color: color-mix(\n        in oklab,\n        var(--badge-color, var(--color-base-content)) 8%,\n        var(--color-base-100)\n      );\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(\n          in oklab,\n          var(--badge-color, var(--color-base-content)) 8%,\n          var(--color-base-100)\n        );\n      }\n      border-color: color-mix(\n        in oklab,\n        var(--badge-color, var(--color-base-content)) 10%,\n        var(--color-base-100)\n      );\n      @supports (color: color-mix(in lab, red, red)) {\n        border-color: color-mix(\n          in oklab,\n          var(--badge-color, var(--color-base-content)) 10%,\n          var(--color-base-100)\n        );\n      }\n      background-image: none;\n    }\n  }\n  .navbar {\n    display: flex;\n    width: 100%;\n    align-items: center;\n    padding: 0.5rem;\n    min-height: 4rem;\n  }\n  .stat {\n    display: inline-grid;\n    width: 100%;\n    column-gap: calc(0.25rem * 4);\n    padding-inline: calc(0.25rem * 6);\n    padding-block: calc(0.25rem * 4);\n    grid-template-columns: repeat(1, 1fr);\n    &:not(:last-child) {\n      border-inline-end: var(--border) dashed\n        color-mix(in oklab, currentColor 10%, #0000);\n      border-block-end: none;\n    }\n  }\n  .alert {\n    display: grid;\n    align-items: center;\n    gap: calc(0.25rem * 4);\n    border-radius: var(--radius-box);\n    padding-inline: calc(0.25rem * 4);\n    padding-block: calc(0.25rem * 3);\n    color: var(--color-base-content);\n    background-color: var(--alert-color, var(--color-base-200));\n    justify-content: start;\n    justify-items: start;\n    grid-auto-flow: column;\n    grid-template-columns: auto;\n    text-align: start;\n    border: var(--border) solid var(--color-base-200);\n    font-size: 0.875rem;\n    line-height: 1.25rem;\n    background-size: auto, calc(var(--noise) * 100%);\n    background-image: none, var(--fx-noise);\n    box-shadow:\n      0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * 0.08)) inset,\n      0 1px\n        color-mix(\n          in oklab,\n          color-mix(\n              in srgb,\n              #000 20%,\n              var(--alert-color, var(--color-base-200))\n            )\n            calc(var(--depth) * 20%),\n          #0000\n        ),\n      0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * 0.08));\n    @supports (color: color-mix(in lab, red, red)) {\n      box-shadow:\n        0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * 0.08)) inset,\n        0 1px\n          color-mix(\n            in oklab,\n            color-mix(\n                in oklab,\n                #000 20%,\n                var(--alert-color, var(--color-base-200))\n              )\n              calc(var(--depth) * 20%),\n            #0000\n          ),\n        0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * 0.08));\n    }\n    &:has(:nth-child(2)) {\n      grid-template-columns: auto minmax(auto, 1fr);\n    }\n    &.alert-outline {\n      background-color: transparent;\n      color: var(--alert-color);\n      box-shadow: none;\n      background-image: none;\n    }\n    &.alert-dash {\n      background-color: transparent;\n      color: var(--alert-color);\n      border-style: dashed;\n      box-shadow: none;\n      background-image: none;\n    }\n    &.alert-soft {\n      color: var(--alert-color, var(--color-base-content));\n      background: color-mix(\n        in oklab,\n        var(--alert-color, var(--color-base-content)) 8%,\n        var(--color-base-100)\n      );\n      @supports (color: color-mix(in lab, red, red)) {\n        background: color-mix(\n          in oklab,\n          var(--alert-color, var(--color-base-content)) 8%,\n          var(--color-base-100)\n        );\n      }\n      border-color: color-mix(\n        in oklab,\n        var(--alert-color, var(--color-base-content)) 10%,\n        var(--color-base-100)\n      );\n      @supports (color: color-mix(in lab, red, red)) {\n        border-color: color-mix(\n          in oklab,\n          var(--alert-color, var(--color-base-content)) 10%,\n          var(--color-base-100)\n        );\n      }\n      box-shadow: none;\n      background-image: none;\n    }\n  }\n  .flex {\n    display: flex;\n  }\n  .hidden {\n    display: none;\n  }\n  .inline-block {\n    display: inline-block;\n  }\n  .table {\n    display: table;\n  }\n  .divider-horizontal {\n    --divider-m: 0 1rem;\n    &.divider {\n      height: auto;\n      width: calc(0.25rem * 4);\n      flex-direction: column;\n      &:before {\n        height: 100%;\n        width: calc(0.25rem * 0.5);\n      }\n      &:after {\n        height: 100%;\n        width: calc(0.25rem * 0.5);\n      }\n    }\n  }\n  .btn-square {\n    padding-inline: calc(0.25rem * 0);\n    width: var(--size);\n    height: var(--size);\n  }\n  .h-5 {\n    height: calc(var(--spacing) * 5);\n  }\n  .h-6 {\n    height: calc(var(--spacing) * 6);\n  }\n  .h-8 {\n    height: calc(var(--spacing) * 8);\n  }\n  .min-h-screen {\n    min-height: 100vh;\n  }\n  .w-5 {\n    width: calc(var(--spacing) * 5);\n  }\n  .w-6 {\n    width: calc(var(--spacing) * 6);\n  }\n  .w-8 {\n    width: calc(var(--spacing) * 8);\n  }\n  .w-40 {\n    width: calc(var(--spacing) * 40);\n  }\n  .w-52 {\n    width: calc(var(--spacing) * 52);\n  }\n  .w-auto {\n    width: auto;\n  }\n  .w-full {\n    width: 100%;\n  }\n  .max-w-md {\n    max-width: var(--container-md);\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .flex-auto {\n    flex: auto;\n  }\n  .flex-none {\n    flex: none;\n  }\n  .flex-shrink-0 {\n    flex-shrink: 0;\n  }\n  .stats-vertical {\n    grid-auto-flow: row;\n    overflow-y: auto;\n    .stat:not(:last-child) {\n      border-inline-end: none;\n      border-block-end: var(--border) dashed\n        color-mix(in oklab, currentColor 10%, #0000);\n    }\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-row {\n    flex-direction: row;\n  }\n  .flex-nowrap {\n    flex-wrap: nowrap;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-4 {\n    gap: calc(var(--spacing) * 4);\n  }\n  .overflow-x-auto {\n    overflow-x: auto;\n  }\n  .rounded-md {\n    border-radius: var(--radius-md);\n  }\n  .alert-info {\n    border-color: var(--color-info);\n    color: var(--color-info-content);\n    --alert-color: var(--color-info);\n  }\n  .bg-accent {\n    background-color: var(--color-accent);\n  }\n  .bg-base-100 {\n    background-color: var(--color-base-100);\n  }\n  .bg-base-200 {\n    background-color: var(--color-base-200);\n  }\n  .bg-clrs-slate {\n    background-color: var(--clrs-slate, #708090);\n  }\n  .bg-neutral {\n    background-color: var(--color-neutral);\n  }\n  .bg-secondary {\n    background-color: var(--color-secondary);\n  }\n  .fill-current {\n    fill: currentColor;\n  }\n  .stroke-current {\n    stroke: currentColor;\n  }\n  .p-2 {\n    padding: calc(var(--spacing) * 2);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .py-6 {\n    padding-block: calc(var(--spacing) * 6);\n  }\n  .pt-0 {\n    padding-top: calc(var(--spacing) * 0);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .font-sans {\n    font-family: var(--font-sans);\n  }\n  .text-5xl {\n    font-size: var(--text-5xl);\n    line-height: var(--tw-leading, var(--text-5xl--line-height));\n  }\n  .text-xl {\n    font-size: var(--text-xl);\n    line-height: var(--tw-leading, var(--text-xl--line-height));\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .tooltip-warning {\n    --tt-bg: var(--color-warning);\n    > .tooltip-content,\n    &[data-tip]:before {\n      color: var(--color-warning-content);\n    }\n  }\n  .text-accent-content {\n    color: var(--color-accent-content);\n  }\n  .text-neutral-content {\n    color: var(--color-neutral-content);\n  }\n  .text-secondary {\n    color: var(--color-secondary);\n  }\n  .text-secondary-content {\n    color: var(--color-secondary-content);\n  }\n  .normal-case {\n    text-transform: none;\n  }\n  .shadow {\n    --tw-shadow:\n      0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)),\n      0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow:\n      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),\n      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .shadow-lg {\n    --tw-shadow:\n      0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)),\n      0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow:\n      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),\n      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .btn-ghost {\n    &:not(.btn-active, :hover, :active:focus, :focus-visible) {\n      --btn-shadow: '';\n      --btn-bg: #0000;\n      --btn-border: #0000;\n      --btn-noise: none;\n      &:not(:disabled, [disabled], .btn-disabled) {\n        outline-color: currentColor;\n        --btn-fg: currentColor;\n      }\n    }\n  }\n  .btn-primary {\n    --btn-color: var(--color-primary);\n    --btn-fg: var(--color-primary-content);\n  }\n  .lg\\:flex {\n    @media (width >= 64rem) {\n      display: flex;\n    }\n  }\n  .lg\\:inline-block {\n    @media (width >= 64rem) {\n      display: inline-block;\n    }\n  }\n  .lg\\:stats-horizontal {\n    @media (width >= 64rem) {\n      grid-auto-flow: column;\n      overflow-x: auto;\n      .stat:not(:last-child) {\n        border-inline-end: var(--border) dashed\n          color-mix(in oklab, currentColor 10%, #0000);\n        border-block-end: none;\n      }\n    }\n  }\n}\n@layer base {\n  :where(:root),\n  :root:has(input.theme-controller[value='light']:checked),\n  [data-theme='light'] {\n    color-scheme: light;\n    --color-base-100: oklch(100% 0 0);\n    --color-base-200: oklch(98% 0 0);\n    --color-base-300: oklch(95% 0 0);\n    --color-base-content: oklch(21% 0.006 285.885);\n    --color-primary: oklch(45% 0.24 277.023);\n    --color-primary-content: oklch(93% 0.034 272.788);\n    --color-secondary: oklch(65% 0.241 354.308);\n    --color-secondary-content: oklch(94% 0.028 342.258);\n    --color-accent: oklch(77% 0.152 181.912);\n    --color-accent-content: oklch(38% 0.063 188.416);\n    --color-neutral: oklch(14% 0.005 285.823);\n    --color-neutral-content: oklch(92% 0.004 286.32);\n    --color-info: oklch(74% 0.16 232.661);\n    --color-info-content: oklch(29% 0.066 243.157);\n    --color-success: oklch(76% 0.177 163.223);\n    --color-success-content: oklch(37% 0.077 168.94);\n    --color-warning: oklch(82% 0.189 84.429);\n    --color-warning-content: oklch(41% 0.112 45.904);\n    --color-error: oklch(71% 0.194 13.428);\n    --color-error-content: oklch(27% 0.105 12.094);\n    --radius-selector: 0.5rem;\n    --radius-field: 0.25rem;\n    --radius-box: 0.5rem;\n    --size-selector: 0.25rem;\n    --size-field: 0.25rem;\n    --border: 1px;\n    --depth: 1;\n    --noise: 0;\n  }\n}\n@layer base {\n  @media (prefers-color-scheme: dark) {\n    :root {\n      color-scheme: dark;\n      --color-base-100: oklch(25.33% 0.016 252.42);\n      --color-base-200: oklch(23.26% 0.014 253.1);\n      --color-base-300: oklch(21.15% 0.012 254.09);\n      --color-base-content: oklch(97.807% 0.029 256.847);\n      --color-primary: oklch(58% 0.233 277.117);\n      --color-primary-content: oklch(96% 0.018 272.314);\n      --color-secondary: oklch(65% 0.241 354.308);\n      --color-secondary-content: oklch(94% 0.028 342.258);\n      --color-accent: oklch(77% 0.152 181.912);\n      --color-accent-content: oklch(38% 0.063 188.416);\n      --color-neutral: oklch(14% 0.005 285.823);\n      --color-neutral-content: oklch(92% 0.004 286.32);\n      --color-info: oklch(74% 0.16 232.661);\n      --color-info-content: oklch(29% 0.066 243.157);\n      --color-success: oklch(76% 0.177 163.223);\n      --color-success-content: oklch(37% 0.077 168.94);\n      --color-warning: oklch(82% 0.189 84.429);\n      --color-warning-content: oklch(41% 0.112 45.904);\n      --color-error: oklch(71% 0.194 13.428);\n      --color-error-content: oklch(27% 0.105 12.094);\n      --radius-selector: 0.5rem;\n      --radius-field: 0.25rem;\n      --radius-box: 0.5rem;\n      --size-selector: 0.25rem;\n      --size-field: 0.25rem;\n      --border: 1px;\n      --depth: 1;\n      --noise: 0;\n    }\n  }\n}\n@layer base {\n  :root:has(input.theme-controller[value='light']:checked),\n  [data-theme='light'] {\n    color-scheme: light;\n    --color-base-100: oklch(100% 0 0);\n    --color-base-200: oklch(98% 0 0);\n    --color-base-300: oklch(95% 0 0);\n    --color-base-content: oklch(21% 0.006 285.885);\n    --color-primary: oklch(45% 0.24 277.023);\n    --color-primary-content: oklch(93% 0.034 272.788);\n    --color-secondary: oklch(65% 0.241 354.308);\n    --color-secondary-content: oklch(94% 0.028 342.258);\n    --color-accent: oklch(77% 0.152 181.912);\n    --color-accent-content: oklch(38% 0.063 188.416);\n    --color-neutral: oklch(14% 0.005 285.823);\n    --color-neutral-content: oklch(92% 0.004 286.32);\n    --color-info: oklch(74% 0.16 232.661);\n    --color-info-content: oklch(29% 0.066 243.157);\n    --color-success: oklch(76% 0.177 163.223);\n    --color-success-content: oklch(37% 0.077 168.94);\n    --color-warning: oklch(82% 0.189 84.429);\n    --color-warning-content: oklch(41% 0.112 45.904);\n    --color-error: oklch(71% 0.194 13.428);\n    --color-error-content: oklch(27% 0.105 12.094);\n    --radius-selector: 0.5rem;\n    --radius-field: 0.25rem;\n    --radius-box: 0.5rem;\n    --size-selector: 0.25rem;\n    --size-field: 0.25rem;\n    --border: 1px;\n    --depth: 1;\n    --noise: 0;\n  }\n}\n@layer base {\n  :root:has(input.theme-controller[value='dark']:checked),\n  [data-theme='dark'] {\n    color-scheme: dark;\n    --color-base-100: oklch(25.33% 0.016 252.42);\n    --color-base-200: oklch(23.26% 0.014 253.1);\n    --color-base-300: oklch(21.15% 0.012 254.09);\n    --color-base-content: oklch(97.807% 0.029 256.847);\n    --color-primary: oklch(58% 0.233 277.117);\n    --color-primary-content: oklch(96% 0.018 272.314);\n    --color-secondary: oklch(65% 0.241 354.308);\n    --color-secondary-content: oklch(94% 0.028 342.258);\n    --color-accent: oklch(77% 0.152 181.912);\n    --color-accent-content: oklch(38% 0.063 188.416);\n    --color-neutral: oklch(14% 0.005 285.823);\n    --color-neutral-content: oklch(92% 0.004 286.32);\n    --color-info: oklch(74% 0.16 232.661);\n    --color-info-content: oklch(29% 0.066 243.157);\n    --color-success: oklch(76% 0.177 163.223);\n    --color-success-content: oklch(37% 0.077 168.94);\n    --color-warning: oklch(82% 0.189 84.429);\n    --color-warning-content: oklch(41% 0.112 45.904);\n    --color-error: oklch(71% 0.194 13.428);\n    --color-error-content: oklch(27% 0.105 12.094);\n    --radius-selector: 0.5rem;\n    --radius-field: 0.25rem;\n    --radius-box: 0.5rem;\n    --size-selector: 0.25rem;\n    --size-field: 0.25rem;\n    --border: 1px;\n    --depth: 1;\n    --noise: 0;\n  }\n}\n@layer base {\n  :root:has(input.theme-controller[value='aqua']:checked),\n  [data-theme='aqua'] {\n    color-scheme: dark;\n    --color-base-100: oklch(37% 0.146 265.522);\n    --color-base-200: oklch(28% 0.091 267.935);\n    --color-base-300: oklch(22% 0.091 267.935);\n    --color-base-content: oklch(90% 0.058 230.902);\n    --color-primary: oklch(85.661% 0.144 198.645);\n    --color-primary-content: oklch(40.124% 0.068 197.603);\n    --color-secondary: oklch(60.682% 0.108 309.782);\n    --color-secondary-content: oklch(96% 0.016 293.756);\n    --color-accent: oklch(93.426% 0.102 94.555);\n    --color-accent-content: oklch(18.685% 0.02 94.555);\n    --color-neutral: oklch(27% 0.146 265.522);\n    --color-neutral-content: oklch(80% 0.146 265.522);\n    --color-info: oklch(54.615% 0.215 262.88);\n    --color-info-content: oklch(90.923% 0.043 262.88);\n    --color-success: oklch(62.705% 0.169 149.213);\n    --color-success-content: oklch(12.541% 0.033 149.213);\n    --color-warning: oklch(66.584% 0.157 58.318);\n    --color-warning-content: oklch(27% 0.077 45.635);\n    --color-error: oklch(73.95% 0.19 27.33);\n    --color-error-content: oklch(14.79% 0.038 27.33);\n    --radius-selector: 1rem;\n    --radius-field: 0.5rem;\n    --radius-box: 1rem;\n    --size-selector: 0.25rem;\n    --size-field: 0.25rem;\n    --border: 1px;\n    --depth: 1;\n    --noise: 0;\n  }\n}\n@layer base {\n  :root:has(input.theme-controller[value='business']:checked),\n  [data-theme='business'] {\n    color-scheme: dark;\n    --color-base-100: oklch(24.353% 0 0);\n    --color-base-200: oklch(22.648% 0 0);\n    --color-base-300: oklch(20.944% 0 0);\n    --color-base-content: oklch(84.87% 0 0);\n    --color-primary: oklch(41.703% 0.099 251.473);\n    --color-primary-content: oklch(88.34% 0.019 251.473);\n    --color-secondary: oklch(64.092% 0.027 229.389);\n    --color-secondary-content: oklch(12.818% 0.005 229.389);\n    --color-accent: oklch(67.271% 0.167 35.791);\n    --color-accent-content: oklch(13.454% 0.033 35.791);\n    --color-neutral: oklch(27.441% 0.013 253.041);\n    --color-neutral-content: oklch(85.488% 0.002 253.041);\n    --color-info: oklch(62.616% 0.143 240.033);\n    --color-info-content: oklch(12.523% 0.028 240.033);\n    --color-success: oklch(70.226% 0.094 156.596);\n    --color-success-content: oklch(14.045% 0.018 156.596);\n    --color-warning: oklch(77.482% 0.115 81.519);\n    --color-warning-content: oklch(15.496% 0.023 81.519);\n    --color-error: oklch(51.61% 0.146 29.674);\n    --color-error-content: oklch(90.322% 0.029 29.674);\n    --radius-selector: 0rem;\n    --radius-field: 0.25rem;\n    --radius-box: 0.25rem;\n    --size-selector: 0.25rem;\n    --size-field: 0.25rem;\n    --border: 1px;\n    --depth: 0;\n    --noise: 0;\n  }\n}\n@layer base {\n  :root:has(input.theme-controller[value='corporate']:checked),\n  [data-theme='corporate'] {\n    color-scheme: light;\n    --color-base-100: oklch(100% 0 0);\n    --color-base-200: oklch(93% 0 0);\n    --color-base-300: oklch(86% 0 0);\n    --color-base-content: oklch(22.389% 0.031 278.072);\n    --color-primary: oklch(58% 0.158 241.966);\n    --color-primary-content: oklch(100% 0 0);\n    --color-secondary: oklch(55% 0.046 257.417);\n    --color-secondary-content: oklch(100% 0 0);\n    --color-accent: oklch(60% 0.118 184.704);\n    --color-accent-content: oklch(100% 0 0);\n    --color-neutral: oklch(0% 0 0);\n    --color-neutral-content: oklch(100% 0 0);\n    --color-info: oklch(60% 0.126 221.723);\n    --color-info-content: oklch(100% 0 0);\n    --color-success: oklch(62% 0.194 149.214);\n    --color-success-content: oklch(100% 0 0);\n    --color-warning: oklch(85% 0.199 91.936);\n    --color-warning-content: oklch(0% 0 0);\n    --color-error: oklch(70% 0.191 22.216);\n    --color-error-content: oklch(0% 0 0);\n    --radius-selector: 0.25rem;\n    --radius-field: 0.25rem;\n    --radius-box: 0.25rem;\n    --size-selector: 0.25rem;\n    --size-field: 0.25rem;\n    --border: 1px;\n    --depth: 0;\n    --noise: 0;\n  }\n}\n@layer base {\n  :root:has(input.theme-controller[value='fantasy']:checked),\n  [data-theme='fantasy'] {\n    color-scheme: light;\n    --color-base-100: oklch(100% 0 0);\n    --color-base-200: oklch(93% 0 0);\n    --color-base-300: oklch(86% 0 0);\n    --color-base-content: oklch(27.807% 0.029 256.847);\n    --color-primary: oklch(37.45% 0.189 325.02);\n    --color-primary-content: oklch(87.49% 0.037 325.02);\n    --color-secondary: oklch(53.92% 0.162 241.36);\n    --color-secondary-content: oklch(90.784% 0.032 241.36);\n    --color-accent: oklch(75.98% 0.204 56.72);\n    --color-accent-content: oklch(15.196% 0.04 56.72);\n    --color-neutral: oklch(27.807% 0.029 256.847);\n    --color-neutral-content: oklch(85.561% 0.005 256.847);\n    --color-info: oklch(72.06% 0.191 231.6);\n    --color-info-content: oklch(0% 0 0);\n    --color-success: oklch(64.8% 0.15 160);\n    --color-success-content: oklch(0% 0 0);\n    --color-warning: oklch(84.71% 0.199 83.87);\n    --color-warning-content: oklch(0% 0 0);\n    --color-error: oklch(71.76% 0.221 22.18);\n    --color-error-content: oklch(0% 0 0);\n    --radius-selector: 1rem;\n    --radius-field: 0.5rem;\n    --radius-box: 1rem;\n    --size-selector: 0.25rem;\n    --size-field: 0.25rem;\n    --border: 1px;\n    --depth: 1;\n    --noise: 0;\n  }\n}\n@layer base {\n  :root:has(input.theme-controller[value='night']:checked),\n  [data-theme='night'] {\n    color-scheme: dark;\n    --color-base-100: oklch(20.768% 0.039 265.754);\n    --color-base-200: oklch(19.314% 0.037 265.754);\n    --color-base-300: oklch(17.86% 0.034 265.754);\n    --color-base-content: oklch(84.153% 0.007 265.754);\n    --color-primary: oklch(75.351% 0.138 232.661);\n    --color-primary-content: oklch(15.07% 0.027 232.661);\n    --color-secondary: oklch(68.011% 0.158 276.934);\n    --color-secondary-content: oklch(13.602% 0.031 276.934);\n    --color-accent: oklch(72.36% 0.176 350.048);\n    --color-accent-content: oklch(14.472% 0.035 350.048);\n    --color-neutral: oklch(27.949% 0.036 260.03);\n    --color-neutral-content: oklch(85.589% 0.007 260.03);\n    --color-info: oklch(68.455% 0.148 237.251);\n    --color-info-content: oklch(0% 0 0);\n    --color-success: oklch(78.452% 0.132 181.911);\n    --color-success-content: oklch(15.69% 0.026 181.911);\n    --color-warning: oklch(83.242% 0.139 82.95);\n    --color-warning-content: oklch(16.648% 0.027 82.95);\n    --color-error: oklch(71.785% 0.17 13.118);\n    --color-error-content: oklch(14.357% 0.034 13.118);\n    --radius-selector: 1rem;\n    --radius-field: 0.5rem;\n    --radius-box: 1rem;\n    --size-selector: 0.25rem;\n    --size-field: 0.25rem;\n    --border: 1px;\n    --depth: 0;\n    --noise: 0;\n  }\n}\n@layer base {\n  :root:has(input.theme-controller[value='winter']:checked),\n  [data-theme='winter'] {\n    color-scheme: light;\n    --color-base-100: oklch(100% 0 0);\n    --color-base-200: oklch(97.466% 0.011 259.822);\n    --color-base-300: oklch(93.268% 0.016 262.751);\n    --color-base-content: oklch(41.886% 0.053 255.824);\n    --color-primary: oklch(56.86% 0.255 257.57);\n    --color-primary-content: oklch(91.372% 0.051 257.57);\n    --color-secondary: oklch(42.551% 0.161 282.339);\n    --color-secondary-content: oklch(88.51% 0.032 282.339);\n    --color-accent: oklch(59.939% 0.191 335.171);\n    --color-accent-content: oklch(11.988% 0.038 335.171);\n    --color-neutral: oklch(19.616% 0.063 257.651);\n    --color-neutral-content: oklch(83.923% 0.012 257.651);\n    --color-info: oklch(88.127% 0.085 214.515);\n    --color-info-content: oklch(17.625% 0.017 214.515);\n    --color-success: oklch(80.494% 0.077 197.823);\n    --color-success-content: oklch(16.098% 0.015 197.823);\n    --color-warning: oklch(89.172% 0.045 71.47);\n    --color-warning-content: oklch(17.834% 0.009 71.47);\n    --color-error: oklch(73.092% 0.11 20.076);\n    --color-error-content: oklch(14.618% 0.022 20.076);\n    --radius-selector: 1rem;\n    --radius-field: 0.5rem;\n    --radius-box: 1rem;\n    --size-selector: 0.25rem;\n    --size-field: 0.25rem;\n    --border: 1px;\n    --depth: 0;\n    --noise: 0;\n  }\n}\n@layer base {\n  :root:has(input.theme-controller[value='wireframe']:checked),\n  [data-theme='wireframe'] {\n    color-scheme: light;\n    --color-base-100: oklch(100% 0 0);\n    --color-base-200: oklch(97% 0 0);\n    --color-base-300: oklch(94% 0 0);\n    --color-base-content: oklch(20% 0 0);\n    --color-primary: oklch(87% 0 0);\n    --color-primary-content: oklch(26% 0 0);\n    --color-secondary: oklch(87% 0 0);\n    --color-secondary-content: oklch(26% 0 0);\n    --color-accent: oklch(87% 0 0);\n    --color-accent-content: oklch(26% 0 0);\n    --color-neutral: oklch(87% 0 0);\n    --color-neutral-content: oklch(26% 0 0);\n    --color-info: oklch(44% 0.11 240.79);\n    --color-info-content: oklch(90% 0.058 230.902);\n    --color-success: oklch(43% 0.095 166.913);\n    --color-success-content: oklch(90% 0.093 164.15);\n    --color-warning: oklch(47% 0.137 46.201);\n    --color-warning-content: oklch(92% 0.12 95.746);\n    --color-error: oklch(44% 0.177 26.899);\n    --color-error-content: oklch(88% 0.062 18.334);\n    --radius-selector: 0rem;\n    --radius-field: 0.25rem;\n    --radius-box: 0.25rem;\n    --size-selector: 0.25rem;\n    --size-field: 0.25rem;\n    --border: 1px;\n    --depth: 0;\n    --noise: 0;\n  }\n}\n@layer base {\n  @property --radialprogress {\n    syntax: '<percentage>';\n    inherits: true;\n    initial-value: 0%;\n  }\n}\n@layer base {\n  :root {\n    scrollbar-color: color-mix(in oklch, currentColor 35%, #0000) #0000;\n  }\n}\n@layer base {\n  :root:has(\n      .modal-open,\n      .modal[open],\n      .modal:target,\n      .modal-toggle:checked,\n      .drawer:not([class*='drawer-open']) > .drawer-toggle:checked\n    ) {\n    overflow: hidden;\n  }\n}\n@layer base {\n  :root,\n  [data-theme] {\n    background-color: var(--root-bg, var(--color-base-100));\n    color: var(--color-base-content);\n  }\n}\n@layer base {\n  :root {\n    --fx-noise: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E\");\n  }\n  .chat {\n    --mask-chat: url(\"data:image/svg+xml,%3csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 11.5004C0 13.0004 2 13.0004 2 13.0004H12H13V0.00036329L12.5 0C12.5 0 11.977 2.09572 11.8581 2.50033C11.6075 3.35237 10.9149 4.22374 9 5.50036C6 7.50036 0 10.0004 0 11.5004Z'/%3e%3c/svg%3e\");\n  }\n}\n@layer base {\n  :where(\n    :root:has(\n        .modal-open,\n        .modal[open],\n        .modal:target,\n        .modal-toggle:checked,\n        .drawer:not(.drawer-open) > .drawer-toggle:checked\n      )\n  ) {\n    scrollbar-gutter: stable;\n    background-image: linear-gradient(\n      var(--color-base-100),\n      var(--color-base-100)\n    );\n    --root-bg: color-mix(in srgb, var(--color-base-100), oklch(0% 0 0) 40%);\n    @supports (color: color-mix(in lab, red, red)) {\n      --root-bg: color-mix(in srgb, var(--color-base-100), oklch(0% 0 0) 40%);\n    }\n  }\n}\n@keyframes skeleton {\n  0% {\n    background-position: 150%;\n  }\n  100% {\n    background-position: -50%;\n  }\n}\n@keyframes progress {\n  50% {\n    background-position-x: -115%;\n  }\n}\n@keyframes radio {\n  0% {\n    padding: 5px;\n  }\n  50% {\n    padding: 3px;\n  }\n}\n@keyframes dropdown {\n  0% {\n    opacity: 0;\n  }\n}\n@keyframes rating {\n  0%,\n  40% {\n    scale: 1.1;\n    filter: brightness(1.05) contrast(1.05);\n  }\n}\n@keyframes toast {\n  0% {\n    scale: 0.9;\n    opacity: 0;\n  }\n  100% {\n    scale: 1;\n    opacity: 1;\n  }\n}\n";
 const ProtoDaisyUi = class {
     constructor(hostRef) {

package/dist/collection/props.css CHANGED Viewed

@@ -11,6 +11,11 @@
   syntax: '*';
   inherits: false;
 }
+@property --tw-shadow-alpha {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 100%;
+}
 @property --tw-inset-shadow {
   syntax: '*';
   inherits: false;
@@ -20,6 +25,11 @@
   syntax: '*';
   inherits: false;
 }
+@property --tw-inset-shadow-alpha {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 100%;
+}
 @property --tw-ring-color {
   syntax: '*';
   inherits: false;

package/dist/collection/styles/shadow.css CHANGED Viewed

@@ -1,5 +1,30 @@
-/*! tailwindcss v4.0.17 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.1 | MIT License | https://tailwindcss.com */
 @layer theme, base, components, utilities;
+@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or
+  ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+  @layer base {
+    *,
+    ::before,
+    ::after,
+    ::backdrop {
+      --tw-font-weight: initial;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+    }
+  }
+}
 @layer theme {
   :root,
   :host {
@@ -175,10 +200,17 @@
       &:focus-visible {
         cursor: pointer;
         background-color: color-mix(
-          in oklab,
+          in srgb,
           var(--color-base-content) 10%,
           transparent
         );
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(
+            in oklab,
+            var(--color-base-content) 10%,
+            transparent
+          );
+        }
         color: var(--color-base-content);
         --tw-outline-style: none;
         outline-style: none;
@@ -201,10 +233,17 @@
     ) {
       cursor: pointer;
       background-color: color-mix(
-        in oklab,
+        in srgb,
         var(--color-base-content) 10%,
         transparent
       );
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(
+          in oklab,
+          var(--color-base-content) 10%,
+          transparent
+        );
+      }
       --tw-outline-style: none;
       outline-style: none;
       @media (forced-colors: active) {
@@ -250,7 +289,14 @@
       }
       &.menu-disabled {
         pointer-events: none;
-        color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
+        color: color-mix(in srgb, var(--color-base-content) 20%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          color: color-mix(
+            in oklab,
+            var(--color-base-content) 20%,
+            transparent
+          );
+        }
       }
     }
     .dropdown:focus-within {
@@ -423,10 +469,17 @@
     @media (hover: hover) {
       &:hover {
         --btn-bg: color-mix(
-          in oklab,
+          in srgb,
           var(--btn-color, var(--color-base-200)),
           #000 7%
         );
+        @supports (color: color-mix(in lab, red, red)) {
+          --btn-bg: color-mix(
+            in oklab,
+            var(--btn-color, var(--color-base-200)),
+            #000 7%
+          );
+        }
       }
     }
     &:focus-visible {
@@ -436,40 +489,74 @@
     &:active:not(.btn-active) {
       translate: 0 0.5px;
       --btn-bg: color-mix(
-        in oklab,
+        in srgb,
         var(--btn-color, var(--color-base-200)),
         #000 5%
       );
+      @supports (color: color-mix(in lab, red, red)) {
+        --btn-bg: color-mix(
+          in oklab,
+          var(--btn-color, var(--color-base-200)),
+          #000 5%
+        );
+      }
       --btn-border: color-mix(
-        in oklab,
+        in srgb,
         var(--btn-color, var(--color-base-200)),
         #000 7%
       );
+      @supports (color: color-mix(in lab, red, red)) {
+        --btn-border: color-mix(
+          in oklab,
+          var(--btn-color, var(--color-base-200)),
+          #000 7%
+        );
+      }
       --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0);
     }
     &:is(:disabled, [disabled], .btn-disabled) {
       &:not(.btn-link, .btn-ghost) {
         background-color: color-mix(
-          in oklab,
+          in srgb,
           var(--color-base-content) 10%,
           transparent
         );
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(
+            in oklab,
+            var(--color-base-content) 10%,
+            transparent
+          );
+        }
         box-shadow: none;
       }
       pointer-events: none;
       --btn-border: #0000;
       --btn-noise: none;
-      --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000);
+      --btn-fg: color-mix(in srgb, var(--color-base-content) 20%, #0000);
+      @supports (color: color-mix(in lab, red, red)) {
+        --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000);
+      }
       @media (hover: hover) {
         &:hover {
           pointer-events: none;
           background-color: color-mix(
-            in oklab,
+            in srgb,
             var(--color-neutral) 20%,
             transparent
           );
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(
+              in oklab,
+              var(--color-neutral) 20%,
+              transparent
+            );
+          }
           --btn-border: #0000;
-          --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000);
+          --btn-fg: color-mix(in srgb, var(--color-base-content) 20%, #0000);
+          @supports (color: color-mix(in lab, red, red)) {
+            --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000);
+          }
         }
       }
     }
@@ -579,10 +666,17 @@
           position: absolute;
           bottom: calc(0.25rem * 0);
           border-color: color-mix(
-            in oklab,
+            in srgb,
             var(--color-base-content) 5%,
             transparent
           );
+          @supports (color: color-mix(in lab, red, red)) {
+            border-color: color-mix(
+              in oklab,
+              var(--color-base-content) 5%,
+              transparent
+            );
+          }
         }
       }
     }
@@ -613,13 +707,20 @@
     }
     :where(thead, tfoot) {
       white-space: nowrap;
-      color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
+      color: color-mix(in srgb, var(--color-base-content) 60%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
+      }
       font-size: 0.875rem;
       font-weight: 600;
     }
     :where(tfoot) {
       border-top: var(--border) solid
-        color-mix(in oklch, var(--color-base-content) 5%, #0000);
+        color-mix(in srgb, var(--color-base-content) 5%, #0000);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-top: var(--border) solid
+          color-mix(in oklch, var(--color-base-content) 5%, #0000);
+      }
     }
     :where(.table-pin-rows thead tr) {
       position: sticky;
@@ -641,7 +742,11 @@
     }
     :where(thead tr, tbody tr:not(:last-child)) {
       border-bottom: var(--border) solid
-        color-mix(in oklch, var(--color-base-content) 5%, #0000);
+        color-mix(in srgb, var(--color-base-content) 5%, #0000);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-bottom: var(--border) solid
+          color-mix(in oklch, var(--color-base-content) 5%, #0000);
+      }
     }
   }
   .stats {
@@ -782,13 +887,19 @@
   .stat-desc {
     grid-column-start: 1;
     white-space: nowrap;
-    color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
+    color: color-mix(in srgb, var(--color-base-content) 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
+    }
     font-size: 0.75rem;
   }
   .stat-title {
     grid-column-start: 1;
     white-space: nowrap;
-    color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
+    color: color-mix(in srgb, var(--color-base-content) 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
+    }
     font-size: 0.75rem;
   }
   .divider {
@@ -806,10 +917,17 @@
       width: 100%;
       flex-grow: 1;
       background-color: color-mix(
-        in oklab,
+        in srgb,
         var(--color-base-content) 10%,
         transparent
       );
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(
+          in oklab,
+          var(--color-base-content) 10%,
+          transparent
+        );
+      }
     }
     @media print {
       &:before,
@@ -909,11 +1027,25 @@
         var(--badge-color, var(--color-base-content)) 8%,
         var(--color-base-100)
       );
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(
+          in oklab,
+          var(--badge-color, var(--color-base-content)) 8%,
+          var(--color-base-100)
+        );
+      }
       border-color: color-mix(
         in oklab,
         var(--badge-color, var(--color-base-content)) 10%,
         var(--color-base-100)
       );
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(
+          in oklab,
+          var(--badge-color, var(--color-base-content)) 10%,
+          var(--color-base-100)
+        );
+      }
       background-image: none;
     }
   }
@@ -962,7 +1094,7 @@
         color-mix(
           in oklab,
           color-mix(
-              in oklab,
+              in srgb,
               #000 20%,
               var(--alert-color, var(--color-base-200))
             )
@@ -970,6 +1102,22 @@
           #0000
         ),
       0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * 0.08));
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow:
+        0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * 0.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) * 0.08));
+    }
     &:has(:nth-child(2)) {
       grid-template-columns: auto minmax(auto, 1fr);
     }
@@ -993,11 +1141,25 @@
         var(--alert-color, var(--color-base-content)) 8%,
         var(--color-base-100)
       );
+      @supports (color: color-mix(in lab, red, red)) {
+        background: color-mix(
+          in oklab,
+          var(--alert-color, var(--color-base-content)) 8%,
+          var(--color-base-100)
+        );
+      }
       border-color: color-mix(
         in oklab,
         var(--alert-color, var(--color-base-content)) 10%,
         var(--color-base-100)
       );
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(
+          in oklab,
+          var(--alert-color, var(--color-base-content)) 10%,
+          var(--color-base-100)
+        );
+      }
       box-shadow: none;
       background-image: none;
     }
@@ -1690,6 +1852,9 @@
       var(--color-base-100)
     );
     --root-bg: color-mix(in srgb, var(--color-base-100), oklch(0% 0 0) 40%);
+    @supports (color: color-mix(in lab, red, red)) {
+      --root-bg: color-mix(in srgb, var(--color-base-100), oklch(0% 0 0) 40%);
+    }
   }
 }
 @keyframes skeleton {