frutjam 2.1.0-beta.0 → 2.1.1

package/packages/js/combobox.js

@@ -0,0 +1,101 @@
+let _comboboxIdCounter = 0
+
+export function createCombobox(el) {
+  const input = el.querySelector('input')
+  let activeIndex = -1
+
+  const uid = ++_comboboxIdCounter
+  const listbox = el.querySelector('[role="listbox"]') ?? el.querySelector('.combobox-dropdown') ?? (() => {
+    const found = el.querySelector('.combobox-option, [role="option"]')
+    return found ? found.parentElement : null
+  })()
+
+  if (listbox && !listbox.id) listbox.id = `fj-combobox-listbox-${uid}`
+  if (listbox && !listbox.getAttribute('role')) listbox.setAttribute('role', 'listbox')
+  if (input && listbox) {
+    input.setAttribute('aria-controls', listbox.id)
+    if (!input.getAttribute('role')) input.setAttribute('role', 'combobox')
+    if (!input.getAttribute('aria-autocomplete')) input.setAttribute('aria-autocomplete', 'list')
+  }
+
+  const allOptions = () => Array.from(el.querySelectorAll('[role="option"], .combobox-option'))
+  const visibleOptions = () => allOptions().filter((o) => !o.hidden)
+
+  function open() {
+    el.classList.add('combobox-open')
+    input?.setAttribute('aria-expanded', 'true')
+  }
+
+  function close() {
+    el.classList.remove('combobox-open')
+    input?.setAttribute('aria-expanded', 'false')
+    highlight(-1)
+  }
+
+  function toggle() {
+    el.classList.contains('combobox-open') ? close() : open()
+  }
+
+  function filter(query) {
+    allOptions().forEach((opt) => {
+      opt.hidden = !opt.textContent.toLowerCase().includes(query.toLowerCase())
+    })
+    highlight(-1)
+  }
+
+  function highlight(index) {
+    const opts = visibleOptions()
+    opts.forEach((o, i) => {
+      o.classList.remove('combobox-option-active')
+      if (!o.id) o.id = `fj-combobox-option-${uid}-${i}`
+    })
+    if (index >= 0 && opts[index]) {
+      opts[index].classList.add('combobox-option-active')
+      opts[index].scrollIntoView({ block: 'nearest' })
+      input?.setAttribute('aria-activedescendant', opts[index].id)
+    } else {
+      input?.removeAttribute('aria-activedescendant')
+    }
+    activeIndex = index
+  }
+
+  function select(opt) {
+    if (input) input.value = opt.textContent.trim()
+    el.dispatchEvent(new CustomEvent('fj:select', { detail: { value: opt.dataset.value ?? opt.textContent.trim() } }))
+    close()
+  }
+
+  input?.addEventListener('input', (e) => {
+    open()
+    filter(e.target.value)
+  })
+
+  input?.addEventListener('keydown', (e) => {
+    const opts = visibleOptions()
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      if (!el.classList.contains('combobox-open')) { open(); return }
+      highlight(Math.min(activeIndex + 1, opts.length - 1))
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      highlight(Math.max(activeIndex - 1, 0))
+    } else if (e.key === 'Enter' && activeIndex >= 0) {
+      e.preventDefault()
+      select(opts[activeIndex])
+    } else if (e.key === 'Escape') {
+      close()
+    }
+  })
+
+  el.addEventListener('click', (e) => {
+    const opt = e.target.closest('[role="option"], .combobox-option')
+    if (opt) { select(opt); return }
+    if (e.target === input) open()
+  })
+
+  document.addEventListener('click', (e) => {
+    if (!el.contains(e.target)) close()
+  }, { capture: true })
+
+  return { open, close, toggle, filter }
+}

package/packages/js/drawer.js

@@ -0,0 +1 @@
+export { createModal as createDrawer } from './modal.js'

package/packages/js/index.js

@@ -0,0 +1,8 @@
+export { createModal } from './modal.js'
+export { createDrawer } from './drawer.js'
+export { createCollapsible } from './collapsible.js'
+export { createTooltip } from './tooltip.js'
+export { createTabs } from './tabs.js'
+export { createToastManager } from './toast.js'
+export { createCarousel } from './carousel.js'
+export { createCombobox } from './combobox.js'

package/packages/js/modal.js

@@ -0,0 +1,8 @@
+export function createModal(el) {
+  return {
+    open: () => el.showModal(),
+    close: () => el.close(),
+    toggle: () => (el.open ? el.close() : el.showModal()),
+    isOpen: () => el.open,
+  }
+}

package/packages/js/tabs.js

@@ -0,0 +1,89 @@
+let _tabsIdCounter = 0
+
+export function createTabs(tabsEl, panelsEl) {
+  const uid = ++_tabsIdCounter
+  const getTabs = () => Array.from(tabsEl.querySelectorAll('.tab'))
+  const getPanels = () => (panelsEl ? Array.from(panelsEl.children) : [])
+
+  if (!tabsEl.getAttribute('role')) tabsEl.setAttribute('role', 'tablist')
+
+  function initAria() {
+    getTabs().forEach((tab, i) => {
+      if (!tab.id) tab.id = `fj-tab-${uid}-${i}`
+      if (!tab.getAttribute('role')) tab.setAttribute('role', 'tab')
+    })
+    getPanels().forEach((panel, i) => {
+      if (!panel.id) panel.id = `fj-panel-${uid}-${i}`
+      if (!panel.getAttribute('role')) panel.setAttribute('role', 'tabpanel')
+      const tab = getTabs()[i]
+      if (tab && !panel.getAttribute('aria-labelledby')) {
+        panel.setAttribute('aria-labelledby', tab.id)
+      }
+      if (!panel.hasAttribute('tabindex')) panel.setAttribute('tabindex', '0')
+    })
+    getTabs().forEach((tab, i) => {
+      const panel = getPanels()[i]
+      if (panel && !tab.getAttribute('aria-controls')) {
+        tab.setAttribute('aria-controls', panel.id)
+      }
+    })
+  }
+
+  function activate(index) {
+    getTabs().forEach((tab, i) => {
+      const active = i === index
+      tab.classList.toggle('tab-active', active)
+      tab.setAttribute('aria-selected', String(active))
+      tab.setAttribute('tabindex', active ? '0' : '-1')
+    })
+    getPanels().forEach((panel, i) => {
+      panel.hidden = i !== index
+    })
+  }
+
+  initAria()
+
+  tabsEl.addEventListener('click', (e) => {
+    const tab = e.target.closest('.tab')
+    if (tab) activate(getTabs().indexOf(tab))
+  })
+
+  tabsEl.addEventListener('keydown', (e) => {
+    const tabs = getTabs()
+    const current = tabs.findIndex((t) => t === document.activeElement)
+    if (current === -1) return
+    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+      e.preventDefault()
+      const next = (current + 1) % tabs.length
+      activate(next)
+      tabs[next].focus()
+    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+      e.preventDefault()
+      const prev = (current - 1 + tabs.length) % tabs.length
+      activate(prev)
+      tabs[prev].focus()
+    } else if (e.key === 'Home') {
+      e.preventDefault()
+      activate(0)
+      tabs[0].focus()
+    } else if (e.key === 'End') {
+      e.preventDefault()
+      activate(tabs.length - 1)
+      tabs[tabs.length - 1].focus()
+    }
+  })
+
+  return {
+    activate,
+    next() {
+      const all = getTabs()
+      const current = all.findIndex((t) => t.classList.contains('tab-active'))
+      activate((current + 1) % all.length)
+    },
+    prev() {
+      const all = getTabs()
+      const current = all.findIndex((t) => t.classList.contains('tab-active'))
+      activate((current - 1 + all.length) % all.length)
+    },
+  }
+}

package/packages/js/toast.js

@@ -0,0 +1,27 @@
+export function createToastManager(containerEl) {
+  containerEl.setAttribute('aria-live', 'polite')
+  containerEl.setAttribute('aria-atomic', 'false')
+
+  function show(message, { duration = 3000, type = '' } = {}) {
+    const el = document.createElement('div')
+    el.className = ['alert', type && `alert-${type}`].filter(Boolean).join(' ')
+    el.textContent = message
+    if (type === 'error' || type === 'warning') {
+      el.setAttribute('role', 'alert')
+    } else {
+      el.setAttribute('role', 'status')
+    }
+    containerEl.appendChild(el)
+    if (duration > 0) setTimeout(() => el.remove(), duration)
+    return el
+  }
+
+  return {
+    show,
+    success: (msg, opts) => show(msg, { ...opts, type: 'success' }),
+    error: (msg, opts) => show(msg, { ...opts, type: 'error' }),
+    warning: (msg, opts) => show(msg, { ...opts, type: 'warning' }),
+    info: (msg, opts) => show(msg, { ...opts, type: 'info' }),
+    dismiss: (el) => el?.remove(),
+  }
+}

package/packages/js/tooltip.js

@@ -0,0 +1,8 @@
+export function createTooltip(el) {
+  return {
+    show: () => el.classList.add('tooltip-open'),
+    hide: () => el.classList.remove('tooltip-open'),
+    toggle: () => el.classList.toggle('tooltip-open'),
+    isOpen: () => el.classList.contains('tooltip-open'),
+  }
+}

package/packages/react/index.js

@@ -0,0 +1,8 @@
+export { useModal } from './useModal.js'
+export { useDrawer } from './useDrawer.js'
+export { useCollapsible } from './useCollapsible.js'
+export { useTooltip } from './useTooltip.js'
+export { useTabs } from './useTabs.js'
+export { useToast } from './useToast.js'
+export { useCarousel } from './useCarousel.js'
+export { useCombobox } from './useCombobox.js'

package/packages/react/useCarousel.js

@@ -0,0 +1,23 @@
+import { useRef, useCallback, useState } from 'react'
+
+export function useCarousel() {
+  const ref = useRef(null)
+  const [current, setCurrent] = useState(0)
+
+  const goTo = useCallback((index) => {
+    if (!ref.current) return
+    const items = Array.from(ref.current.querySelectorAll('.carousel-item'))
+    if (!items.length) return
+    const next = Math.max(0, Math.min(index, items.length - 1))
+    setCurrent(next)
+    items[next].scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' })
+  }, [])
+
+  return {
+    ref,
+    current,
+    goTo,
+    next: useCallback(() => goTo(current + 1), [current, goTo]),
+    prev: useCallback(() => goTo(current - 1), [current, goTo]),
+  }
+}

package/packages/react/useCollapsible.js

@@ -0,0 +1,20 @@
+import { useRef, useCallback } from 'react'
+
+export function useCollapsible() {
+  const ref = useRef(null)
+
+  function syncAria() {
+    if (!ref.current) return
+    const isOpen = ref.current.classList.contains('collapsible-open')
+    const trigger = ref.current.querySelector('[aria-expanded]')
+    if (trigger) trigger.setAttribute('aria-expanded', String(isOpen))
+  }
+
+  return {
+    ref,
+    open: useCallback(() => { ref.current?.classList.add('collapsible-open'); syncAria() }, []),
+    close: useCallback(() => { ref.current?.classList.remove('collapsible-open'); syncAria() }, []),
+    toggle: useCallback(() => { ref.current?.classList.toggle('collapsible-open'); syncAria() }, []),
+    isOpen: () => ref.current?.classList.contains('collapsible-open') ?? false,
+  }
+}

package/packages/react/useCombobox.js

@@ -0,0 +1,81 @@
+import { useState, useCallback, useId } from 'react'
+
+export function useCombobox({ items = [], filterFn } = {}) {
+  const uid = useId()
+  const listboxId = `${uid}-listbox`
+
+  const [open, setOpen] = useState(false)
+  const [query, setQuery] = useState('')
+  const [activeIndex, setActiveIndex] = useState(-1)
+  const [value, setValue] = useState('')
+
+  const filtered = filterFn
+    ? filterFn(items, query)
+    : items.filter((item) =>
+        String(item.label ?? item).toLowerCase().includes(query.toLowerCase())
+      )
+
+  const activeDescendant = activeIndex >= 0 ? `${uid}-option-${activeIndex}` : undefined
+
+  const select = useCallback((item) => {
+    const label = item.label ?? String(item)
+    setValue(label)
+    setQuery(label)
+    setOpen(false)
+    setActiveIndex(-1)
+  }, [])
+
+  const handleKeyDown = useCallback((e) => {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      if (!open) { setOpen(true); return }
+      setActiveIndex((i) => Math.min(i + 1, filtered.length - 1))
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      setActiveIndex((i) => Math.max(i - 1, 0))
+    } else if (e.key === 'Enter' && activeIndex >= 0) {
+      e.preventDefault()
+      select(filtered[activeIndex])
+    } else if (e.key === 'Escape') {
+      setOpen(false)
+      setActiveIndex(-1)
+    }
+  }, [open, filtered, activeIndex, select])
+
+  return {
+    open,
+    value,
+    query,
+    filtered,
+    activeIndex,
+    select,
+    containerProps: {
+      className: open ? 'combobox combobox-open' : 'combobox',
+    },
+    inputProps: {
+      value: query,
+      onChange: (e) => { setQuery(e.target.value); setOpen(true); setActiveIndex(-1) },
+      onKeyDown: handleKeyDown,
+      onFocus: () => setOpen(true),
+      onBlur: () => setTimeout(() => setOpen(false), 150),
+      role: 'combobox',
+      'aria-expanded': open,
+      'aria-autocomplete': 'list',
+      'aria-controls': listboxId,
+      'aria-activedescendant': activeDescendant,
+    },
+    listboxProps: {
+      id: listboxId,
+      role: 'listbox',
+    },
+    optionProps: (item, index) => ({
+      id: `${uid}-option-${index}`,
+      className: activeIndex === index ? 'combobox-option combobox-option-active' : 'combobox-option',
+      role: 'option',
+      'aria-selected': activeIndex === index,
+      onMouseDown: (e) => e.preventDefault(),
+      onClick: () => select(item),
+      onMouseEnter: () => setActiveIndex(index),
+    }),
+  }
+}

package/packages/react/useDrawer.js

@@ -0,0 +1 @@
+export { useModal as useDrawer } from './useModal.js'

package/packages/react/useModal.js

@@ -0,0 +1,12 @@
+import { useRef, useCallback } from 'react'
+
+export function useModal() {
+  const ref = useRef(null)
+  return {
+    ref,
+    open: useCallback(() => ref.current?.showModal(), []),
+    close: useCallback(() => ref.current?.close(), []),
+    toggle: useCallback(() => (ref.current?.open ? ref.current.close() : ref.current?.showModal()), []),
+    isOpen: () => ref.current?.open ?? false,
+  }
+}

package/packages/react/useTabs.js

@@ -0,0 +1,53 @@
+import { useState, useCallback, useId } from 'react'
+
+export function useTabs(initialIndex = 0) {
+  const uid = useId()
+  const [active, setActive] = useState(initialIndex)
+
+  const activate = useCallback((index) => setActive(index), [])
+
+  const tabId = (index) => `${uid}-tab-${index}`
+  const panelId = (index) => `${uid}-panel-${index}`
+
+  const handleKeyDown = useCallback((index, count) => (e) => {
+    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+      e.preventDefault()
+      activate((index + 1) % count)
+    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+      e.preventDefault()
+      activate((index - 1 + count) % count)
+    } else if (e.key === 'Home') {
+      e.preventDefault()
+      activate(0)
+    } else if (e.key === 'End') {
+      e.preventDefault()
+      activate(count - 1)
+    }
+  }, [activate])
+
+  return {
+    active,
+    activate,
+    isActive: (index) => active === index,
+    tablistProps: {
+      role: 'tablist',
+    },
+    tabProps: (index, count = 0) => ({
+      id: tabId(index),
+      className: active === index ? 'tab tab-active' : 'tab',
+      onClick: () => activate(index),
+      onKeyDown: handleKeyDown(index, count),
+      role: 'tab',
+      'aria-selected': active === index,
+      'aria-controls': panelId(index),
+      tabIndex: active === index ? 0 : -1,
+    }),
+    panelProps: (index) => ({
+      id: panelId(index),
+      hidden: active !== index,
+      role: 'tabpanel',
+      'aria-labelledby': tabId(index),
+      tabIndex: 0,
+    }),
+  }
+}

package/packages/react/useToast.js

@@ -0,0 +1,27 @@
+import { useState, useCallback, useRef } from 'react'
+
+export function useToast() {
+  const [toasts, setToasts] = useState([])
+  const idRef = useRef(0)
+
+  const dismiss = useCallback((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id))
+  }, [])
+
+  const show = useCallback((message, { duration = 3000, type = '' } = {}) => {
+    const id = ++idRef.current
+    setToasts((prev) => [...prev, { id, message, type }])
+    if (duration > 0) setTimeout(() => dismiss(id), duration)
+    return id
+  }, [dismiss])
+
+  return {
+    toasts,
+    show,
+    dismiss,
+    success: (msg, opts) => show(msg, { ...opts, type: 'success' }),
+    error: (msg, opts) => show(msg, { ...opts, type: 'error' }),
+    warning: (msg, opts) => show(msg, { ...opts, type: 'warning' }),
+    info: (msg, opts) => show(msg, { ...opts, type: 'info' }),
+  }
+}

package/packages/react/useTooltip.js

@@ -0,0 +1,12 @@
+import { useRef, useCallback } from 'react'
+
+export function useTooltip() {
+  const ref = useRef(null)
+  return {
+    ref,
+    show: useCallback(() => ref.current?.classList.add('tooltip-open'), []),
+    hide: useCallback(() => ref.current?.classList.remove('tooltip-open'), []),
+    toggle: useCallback(() => ref.current?.classList.toggle('tooltip-open'), []),
+    isOpen: () => ref.current?.classList.contains('tooltip-open') ?? false,
+  }
+}

package/dist/frutjam.dev.css

@@ -1,7 +0,0 @@
-/*!
- * frutjam v2.1.0-beta.0
- * (c) 2025 Nezanuha
- * Released under the MIT License
- * https://frutjam.com
- */
-@layer theme{&:not([data-theme]),:is([data-theme="snowberry"],[data-theme="light"]){--scheme-color:light;--border-radius:0.25rem;--color-base:oklch(1 0 0);--color-on-base:oklch(0.22 0 0);--color-neutral:oklch(0.15 0 0);--color-on-neutral:oklch(1 0 0);--color-primary:oklch(51.1% 0.262 276.966);--color-on-primary:oklch(96.2% 0.018 272.314);--color-secondary:oklch(0.591 0.293 322.896);--color-on-secondary:oklch(1 0 0);--color-accent:oklch(0.541 0.281 293.009);--color-on-accent:oklch(1 0 0);--color-info:oklch(0.685 0.169 237.323);--color-on-info:oklch(0.15 0 0);--color-success:oklch(0.792 0.209 151.711);--color-on-success:oklch(0.15 0 0);--color-warning:oklch(0.852 0.199 91.936);--color-on-warning:oklch(0.15 0 0);--color-error:oklch(0.577 0.245 27.325);--color-on-error:oklch(1 0 0)}}@layer theme{:is([data-theme="darkberry"],[data-theme="dark"]){--scheme-color:dark;--border-radius:0.25rem;--color-base:oklch(0 0 0);--color-on-base:oklch(98% 0.01 270);--color-neutral:oklch(85% 0 0);--color-on-neutral:oklch(20% 0 0);--color-primary:oklch(66.385% 0.18368 285.592);--color-on-primary:oklch(10% 0.01 270);--color-secondary:oklch(65% 0.18 220);--color-on-secondary:oklch(10% 0.01 220);--color-accent:oklch(75% 0.18 50);--color-on-accent:oklch(10% 0.01 50);--color-info:oklch(70% 0.15 250);--color-on-info:oklch(10% 0.01 250);--color-success:oklch(65% 0.18 140);--color-on-success:oklch(10% 0.01 140);--color-warning:oklch(75% 0.20 85);--color-on-warning:oklch(10% 0.01 85);--color-error:oklch(60% 0.22 30);--color-on-error:oklch(10% 0.01 30)}}@custom-variant dark ( &:where( [data-theme=dark],[data-theme=dark] *,[data-theme=darkberry],[data-theme=darkberry] * ) );@layer base{:root,[data-theme]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color-scheme:var(--scheme-color,light);color:var(--color-on-base);background-color:var(--color-base)}}@layer base{:root,[data-theme]{--palette-shade-light-color:white;--palette-shade-dark-color:black;--heading--color:light-dark(var(--color-base-950),var(--color-base-50));--para--color:light-dark(var(--color-base-950),var(--color-base-200));--radius-btn:calc(var(--border-radius) * 2);--radius-input:calc(var(--border-radius) * 2);--radius-checkbox:calc(var(--border-radius) * 1.5);--radius-modal:calc(var(--border-radius) * 4);--radius-accordion:calc(var(--border-radius) * 2);--radius-dropdown:calc(var(--border-radius) * 2);--radius-card:calc(var(--border-radius) * 4);--radius-badge:calc(var(--border-radius) * 2);--color-base-soft:light-dark(color-mix(in oklch,black 5%,var(--color-base-600) 25%),color-mix(in oklch,black 10%,var(--color-base-400) 75%));--color-on-base-soft:var(--color-on-base);--color-base-active:light-dark(color-mix(in oklch,black 5%,var(--color-base-600) 45%),color-mix(in oklch,black 10%,var(--color-base-400) 85%));--color-base-50:color-mix(in oklch,var(--palette-shade-light-color) 72%,var(--color-base) 28%);--color-base-100:color-mix(in oklch,var(--palette-shade-light-color) 59%,var(--color-base) 41%);--color-base-200:color-mix(in oklch,var(--palette-shade-light-color) 48%,var(--color-base) 52%);--color-base-300:color-mix(in oklch,var(--palette-shade-light-color) 36%,var(--color-base) 64%);--color-base-400:color-mix(in oklch,var(--palette-shade-light-color) 20%,var(--color-base) 80%);--color-base-500:var(--color-base);--color-base-600:color-mix(in oklch,var(--palette-shade-dark-color) 20%,var(--color-base) 80%);--color-base-700:color-mix(in oklch,var(--palette-shade-dark-color) 36%,var(--color-base) 64%);--color-base-800:color-mix(in oklch,var(--palette-shade-dark-color) 48%,var(--color-base) 52%);--color-base-900:color-mix(in oklch,var(--palette-shade-dark-color) 59%,var(--color-base) 41%);--color-base-950:color-mix(in oklch,var(--palette-shade-dark-color) 72%,var(--color-base) 28%);--color-neutral-soft:color-mix(in oklab,var(--color-neutral-500) 10%,transparent);--color-on-neutral-soft:light-dark(var(--color-neutral-800),var(--color-neutral-500));--color-neutral-active:color-mix(in oklab,var(--color-neutral-500) 90%,transparent);--color-neutral-50:color-mix(in oklch,var(--palette-shade-light-color) 72%,var(--color-neutral) 28%);--color-neutral-100:color-mix(in oklch,var(--palette-shade-light-color) 59%,var(--color-neutral) 41%);--color-neutral-200:color-mix(in oklch,var(--palette-shade-light-color) 48%,var(--color-neutral) 52%);--color-neutral-300:color-mix(in oklch,var(--palette-shade-light-color) 36%,var(--color-neutral) 64%);--color-neutral-400:color-mix(in oklch,var(--palette-shade-light-color) 20%,var(--color-neutral) 80%);--color-neutral-500:var(--color-neutral);--color-neutral-600:color-mix(in oklch,var(--palette-shade-dark-color) 20%,var(--color-neutral) 80%);--color-neutral-700:color-mix(in oklch,var(--palette-shade-dark-color) 36%,var(--color-neutral) 64%);--color-neutral-800:color-mix(in oklch,var(--palette-shade-dark-color) 48%,var(--color-neutral) 52%);--color-neutral-900:color-mix(in oklch,var(--palette-shade-dark-color) 59%,var(--color-neutral) 41%);--color-neutral-950:color-mix(in oklch,var(--palette-shade-dark-color) 72%,var(--color-neutral) 28%);--color-primary-soft:color-mix(in oklab,var(--color-primary-500) 10%,transparent);--color-on-primary-soft:light-dark(var(--color-primary-800),var(--color-primary-500));--color-primary-active:color-mix(in oklab,var(--color-primary-500) 90%,transparent);--color-primary-50:color-mix(in oklch,var(--palette-shade-light-color) 72%,var(--color-primary) 28%);--color-primary-100:color-mix(in oklch,var(--palette-shade-light-color) 59%,var(--color-primary) 41%);--color-primary-200:color-mix(in oklch,var(--palette-shade-light-color) 48%,var(--color-primary) 52%);--color-primary-300:color-mix(in oklch,var(--palette-shade-light-color) 36%,var(--color-primary) 64%);--color-primary-400:color-mix(in oklch,var(--palette-shade-light-color) 20%,var(--color-primary) 80%);--color-primary-500:var(--color-primary);--color-primary-600:color-mix(in oklch,var(--palette-shade-dark-color) 20%,var(--color-primary) 80%);--color-primary-700:color-mix(in oklch,var(--palette-shade-dark-color) 36%,var(--color-primary) 64%);--color-primary-800:color-mix(in oklch,var(--palette-shade-dark-color) 48%,var(--color-primary) 52%);--color-primary-900:color-mix(in oklch,var(--palette-shade-dark-color) 59%,var(--color-primary) 41%);--color-primary-950:color-mix(in oklch,var(--palette-shade-dark-color) 72%,var(--color-primary) 28%);--color-secondary-soft:color-mix(in oklab,var(--color-secondary-500) 10%,transparent);--color-on-secondary-soft:light-dark(var(--color-secondary-800),var(--color-secondary-500));--color-secondary-active:color-mix(in oklab,var(--color-secondary-500) 90%,transparent);--color-secondary-50:color-mix(in oklch,var(--palette-shade-light-color) 72%,var(--color-secondary) 28%);--color-secondary-100:color-mix(in oklch,var(--palette-shade-light-color) 59%,var(--color-secondary) 41%);--color-secondary-200:color-mix(in oklch,var(--palette-shade-light-color) 48%,var(--color-secondary) 52%);--color-secondary-300:color-mix(in oklch,var(--palette-shade-light-color) 36%,var(--color-secondary) 64%);--color-secondary-400:color-mix(in oklch,var(--palette-shade-light-color) 20%,var(--color-secondary) 80%);--color-secondary-500:var(--color-secondary);--color-secondary-600:color-mix(in oklch,var(--palette-shade-dark-color) 20%,var(--color-secondary) 80%);--color-secondary-700:color-mix(in oklch,var(--palette-shade-dark-color) 36%,var(--color-secondary) 64%);--color-secondary-800:color-mix(in oklch,var(--palette-shade-dark-color) 48%,var(--color-secondary) 52%);--color-secondary-900:color-mix(in oklch,var(--palette-shade-dark-color) 59%,var(--color-secondary) 41%);--color-secondary-950:color-mix(in oklch,var(--palette-shade-dark-color) 72%,var(--color-secondary) 28%);--color-accent-soft:color-mix(in oklab,var(--color-accent-500) 10%,transparent);--color-on-accent-soft:light-dark(var(--color-accent-800),var(--color-accent-500));--color-accent-active:color-mix(in oklab,var(--color-accent-500) 90%,transparent);--color-accent-50:color-mix(in oklch,var(--palette-shade-light-color) 72%,var(--color-accent) 28%);--color-accent-100:color-mix(in oklch,var(--palette-shade-light-color) 59%,var(--color-accent) 41%);--color-accent-200:color-mix(in oklch,var(--palette-shade-light-color) 48%,var(--color-accent) 52%);--color-accent-300:color-mix(in oklch,var(--palette-shade-light-color) 36%,var(--color-accent) 64%);--color-accent-400:color-mix(in oklch,var(--palette-shade-light-color) 20%,var(--color-accent) 80%);--color-accent-500:var(--color-accent);--color-accent-600:color-mix(in oklch,var(--palette-shade-dark-color) 20%,var(--color-accent) 80%);--color-accent-700:color-mix(in oklch,var(--palette-shade-dark-color) 36%,var(--color-accent) 64%);--color-accent-800:color-mix(in oklch,var(--palette-shade-dark-color) 48%,var(--color-accent) 52%);--color-accent-900:color-mix(in oklch,var(--palette-shade-dark-color) 59%,var(--color-accent) 41%);--color-accent-950:color-mix(in oklch,var(--palette-shade-dark-color) 72%,var(--color-accent) 28%);--color-info-soft:color-mix(in oklab,var(--color-info-500) 10%,transparent);--color-on-info-soft:light-dark(var(--color-info-800),var(--color-info-500));--color-info-active:color-mix(in oklab,var(--color-info-500) 90%,transparent);--color-info-50:color-mix(in oklch,var(--palette-shade-light-color) 72%,var(--color-info) 28%);--color-info-100:color-mix(in oklch,var(--palette-shade-light-color) 59%,var(--color-info) 41%);--color-info-200:color-mix(in oklch,var(--palette-shade-light-color) 48%,var(--color-info) 52%);--color-info-300:color-mix(in oklch,var(--palette-shade-light-color) 36%,var(--color-info) 64%);--color-info-400:color-mix(in oklch,var(--palette-shade-light-color) 20%,var(--color-info) 80%);--color-info-500:var(--color-info);--color-info-600:color-mix(in oklch,var(--palette-shade-dark-color) 20%,var(--color-info) 80%);--color-info-700:color-mix(in oklch,var(--palette-shade-dark-color) 36%,var(--color-info) 64%);--color-info-800:color-mix(in oklch,var(--palette-shade-dark-color) 48%,var(--color-info) 52%);--color-info-900:color-mix(in oklch,var(--palette-shade-dark-color) 59%,var(--color-info) 41%);--color-info-950:color-mix(in oklch,var(--palette-shade-dark-color) 72%,var(--color-info) 28%);--color-success-soft:color-mix(in oklab,var(--color-success-500) 10%,transparent);--color-on-success-soft:light-dark(var(--color-success-800),var(--color-success-500));--color-success-active:color-mix(in oklab,var(--color-success-500) 90%,transparent);--color-success-50:color-mix(in oklch,var(--palette-shade-light-color) 72%,var(--color-success) 28%);--color-success-100:color-mix(in oklch,var(--palette-shade-light-color) 59%,var(--color-success) 41%);--color-success-200:color-mix(in oklch,var(--palette-shade-light-color) 48%,var(--color-success) 52%);--color-success-300:color-mix(in oklch,var(--palette-shade-light-color) 36%,var(--color-success) 64%);--color-success-400:color-mix(in oklch,var(--palette-shade-light-color) 20%,var(--color-success) 80%);--color-success-500:var(--color-success);--color-success-600:color-mix(in oklch,var(--palette-shade-dark-color) 20%,var(--color-success) 80%);--color-success-700:color-mix(in oklch,var(--palette-shade-dark-color) 36%,var(--color-success) 64%);--color-success-800:color-mix(in oklch,var(--palette-shade-dark-color) 48%,var(--color-success) 52%);--color-success-900:color-mix(in oklch,var(--palette-shade-dark-color) 59%,var(--color-success) 41%);--color-success-950:color-mix(in oklch,var(--palette-shade-dark-color) 72%,var(--color-success) 28%);--color-warning-soft:color-mix(in oklab,var(--color-warning-500) 10%,transparent);--color-on-warning-soft:light-dark(var(--color-warning-800),var(--color-warning-500));--color-warning-active:color-mix(in oklab,var(--color-warning-500) 90%,transparent);--color-warning-50:color-mix(in oklch,var(--palette-shade-light-color) 72%,var(--color-warning) 28%);--color-warning-100:color-mix(in oklch,var(--palette-shade-light-color) 59%,var(--color-warning) 41%);--color-warning-200:color-mix(in oklch,var(--palette-shade-light-color) 48%,var(--color-warning) 52%);--color-warning-300:color-mix(in oklch,var(--palette-shade-light-color) 36%,var(--color-warning) 64%);--color-warning-400:color-mix(in oklch,var(--palette-shade-light-color) 20%,var(--color-warning) 80%);--color-warning-500:var(--color-warning);--color-warning-600:color-mix(in oklch,var(--palette-shade-dark-color) 20%,var(--color-warning) 80%);--color-warning-700:color-mix(in oklch,var(--palette-shade-dark-color) 36%,var(--color-warning) 64%);--color-warning-800:color-mix(in oklch,var(--palette-shade-dark-color) 48%,var(--color-warning) 52%);--color-warning-900:color-mix(in oklch,var(--palette-shade-dark-color) 59%,var(--color-warning) 41%);--color-warning-950:color-mix(in oklch,var(--palette-shade-dark-color) 72%,var(--color-warning) 28%);--color-error-soft:color-mix(in oklab,var(--color-error-500) 10%,transparent);--color-on-error-soft:light-dark(var(--color-error-800),var(--color-error-500));--color-error-active:color-mix(in oklab,var(--color-error-500) 90%,transparent);--color-error-50:color-mix(in oklch,var(--palette-shade-light-color) 72%,var(--color-error) 28%);--color-error-100:color-mix(in oklch,var(--palette-shade-light-color) 59%,var(--color-error) 41%);--color-error-200:color-mix(in oklch,var(--palette-shade-light-color) 48%,var(--color-error) 52%);--color-error-300:color-mix(in oklch,var(--palette-shade-light-color) 36%,var(--color-error) 64%);--color-error-400:color-mix(in oklch,var(--palette-shade-light-color) 20%,var(--color-error) 80%);--color-error-500:var(--color-error);--color-error-600:color-mix(in oklch,var(--palette-shade-dark-color) 20%,var(--color-error) 80%);--color-error-700:color-mix(in oklch,var(--palette-shade-dark-color) 36%,var(--color-error) 64%);--color-error-800:color-mix(in oklch,var(--palette-shade-dark-color) 48%,var(--color-error) 52%);--color-error-900:color-mix(in oklch,var(--palette-shade-dark-color) 59%,var(--color-error) 41%);--color-error-950:color-mix(in oklch,var(--palette-shade-dark-color) 72%,var(--color-error) 28%)}}@theme inline{--color-base:var(--color-base-500);--color-base-50:var(--color-base-50);--color-base-100:var(--color-base-100);--color-base-200:var(--color-base-200);--color-base-300:var(--color-base-300);--color-base-400:var(--color-base-400);--color-base-500:var(--color-base-500);--color-base-600:var(--color-base-600);--color-base-700:var(--color-base-700);--color-base-800:var(--color-base-800);--color-base-900:var(--color-base-900);--color-base-950:var(--color-base-950);--color-neutral:var(--color-neutral-500);--color-neutral-50:var(--color-neutral-50);--color-neutral-100:var(--color-neutral-100);--color-neutral-200:var(--color-neutral-200);--color-neutral-300:var(--color-neutral-300);--color-neutral-400:var(--color-neutral-400);--color-neutral-500:var(--color-neutral-500);--color-neutral-600:var(--color-neutral-600);--color-neutral-700:var(--color-neutral-700);--color-neutral-800:var(--color-neutral-800);--color-neutral-900:var(--color-neutral-900);--color-neutral-950:var(--color-neutral-950);--color-primary:var(--color-primary-500);--color-primary-50:var(--color-primary-50);--color-primary-100:var(--color-primary-100);--color-primary-200:var(--color-primary-200);--color-primary-300:var(--color-primary-300);--color-primary-400:var(--color-primary-400);--color-primary-500:var(--color-primary-500);--color-primary-600:var(--color-primary-600);--color-primary-700:var(--color-primary-700);--color-primary-800:var(--color-primary-800);--color-primary-900:var(--color-primary-900);--color-primary-950:var(--color-primary-950);--color-secondary:var(--color-secondary-500);--color-secondary-50:var(--color-secondary-50);--color-secondary-100:var(--color-secondary-100);--color-secondary-200:var(--color-secondary-200);--color-secondary-300:var(--color-secondary-300);--color-secondary-400:var(--color-secondary-400);--color-secondary-500:var(--color-secondary-500);--color-secondary-600:var(--color-secondary-600);--color-secondary-700:var(--color-secondary-700);--color-secondary-800:var(--color-secondary-800);--color-secondary-900:var(--color-secondary-900);--color-secondary-950:var(--color-secondary-950);--color-accent:var(--color-accent-500);--color-accent-50:var(--color-accent-50);--color-accent-100:var(--color-accent-100);--color-accent-200:var(--color-accent-200);--color-accent-300:var(--color-accent-300);--color-accent-400:var(--color-accent-400);--color-accent-500:var(--color-accent-500);--color-accent-600:var(--color-accent-600);--color-accent-700:var(--color-accent-700);--color-accent-800:var(--color-accent-800);--color-accent-900:var(--color-accent-900);--color-accent-950:var(--color-accent-950);--color-info:var(--color-info-500);--color-info-50:var(--color-info-50);--color-info-100:var(--color-info-100);--color-info-200:var(--color-info-200);--color-info-300:var(--color-info-300);--color-info-400:var(--color-info-400);--color-info-500:var(--color-info-500);--color-info-600:var(--color-info-600);--color-info-700:var(--color-info-700);--color-info-800:var(--color-info-800);--color-info-900:var(--color-info-900);--color-info-950:var(--color-info-950);--color-success:var(--color-success-500);--color-success-50:var(--color-success-50);--color-success-100:var(--color-success-100);--color-success-200:var(--color-success-200);--color-success-300:var(--color-success-300);--color-success-400:var(--color-success-400);--color-success-500:var(--color-success-500);--color-success-600:var(--color-success-600);--color-success-700:var(--color-success-700);--color-success-800:var(--color-success-800);--color-success-900:var(--color-success-900);--color-success-950:var(--color-success-950);--color-warning:var(--color-warning-500);--color-warning-50:var(--color-warning-50);--color-warning-100:var(--color-warning-100);--color-warning-200:var(--color-warning-200);--color-warning-300:var(--color-warning-300);--color-warning-400:var(--color-warning-400);--color-warning-500:var(--color-warning-500);--color-warning-600:var(--color-warning-600);--color-warning-700:var(--color-warning-700);--color-warning-800:var(--color-warning-800);--color-warning-900:var(--color-warning-900);--color-warning-950:var(--color-warning-950);--color-error:var(--color-error-500);--color-error-50:var(--color-error-50);--color-error-100:var(--color-error-100);--color-error-200:var(--color-error-200);--color-error-300:var(--color-error-300);--color-error-400:var(--color-error-400);--color-error-500:var(--color-error-500);--color-error-600:var(--color-error-600);--color-error-700:var(--color-error-700);--color-error-800:var(--color-error-800);--color-error-900:var(--color-error-900);--color-error-950:var(--color-error-950)}@utility accordion{--color-accordion-soft:var(--color-base-soft);--color-accordion-active:var(--color-base-active);display:grid;background-color:var(--color-base);border-width:1px;border-style:solid;border-color:var(--color-accordion-active);border-radius:var(--radius-accordion);cursor:pointer;& > details{&:not(:last-child){border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:var(--color-accordion-active)}text-wrap:pretty;& > *:not(summary){padding-inline:1rem;padding-bottom:1rem;color:var(--para--color)}& > summary::marker{content:none}& > p{font-size:var(--text-base);background-color:--alpha(var(--color-base-soft) / 40%);padding-top:1rem}& > summary{display:flex;gap:1rem;align-items:center;justify-content:space-between;padding:1rem;font-weight:500;&::after{content:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyMCAyMCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0icmdiYSg1Myw1Myw1MywxKSIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij4KICA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Im0xOS41IDguMjUtNy41IDcuNS03LjUtNy41Ii8+Cjwvc3ZnPg==");display:inline-block;color:inherit}}}& > details[open]{& > summary{padding-bottom:1rem;&::after{transform:rotate(180deg);transform-origin:center;transition:transform 300ms}}}}@utility badge-primary{--color-badge:var(--color-primary);--color-badge-active:var(--color-primary-active);--color-on-badge:var(--color-on-primary);--color-badge-soft:var(--color-primary-soft);--color-on-badge-soft:light-dark(var(--color-primary-800),var(--color-primary));--badge-variant-text:light-dark(var(--color-primary-800),var(--color-primary-400))}@utility badge-secondary{--color-badge:var(--color-secondary);--color-badge-active:var(--color-secondary-active);--color-on-badge:var(--color-on-secondary);--color-badge-soft:var(--color-secondary-soft);--color-on-badge-soft:light-dark(var(--color-secondary-800),var(--color-secondary-400));--badge-variant-text:light-dark(var(--color-secondary-800),var(--color-secondary-400))}@utility badge-accent{--color-badge:var(--color-accent);--color-badge-active:var(--color-accent-active);--color-on-badge:var(--color-on-accent);--color-badge-soft:var(--color-accent-soft);--color-on-badge-soft:light-dark(var(--color-accent-800),var(--color-accent-400));--badge-variant-text:light-dark(var(--color-accent-800),var(--color-accent-400))}@utility badge-info{--color-badge:var(--color-info);--color-badge-active:var(--color-info-active);--color-on-badge:var(--color-on-info);--color-badge-soft:var(--color-info-soft);--color-on-badge-soft:light-dark(var(--color-info-800),var(--color-info-400));--badge-variant-text:light-dark(var(--color-info-800),var(--color-info-400))}@utility badge-neutral{--color-badge:var(--color-neutral);--color-badge-active:var(--color-neutral-active);--color-on-badge:var(--color-on-neutral);--color-badge-soft:var(--color-neutral-soft);--color-on-badge-soft:light-dark(var(--color-neutral-800),var(--color-neutral-400));--badge-variant-text:light-dark(var(--color-neutral-800),var(--color-neutral-400))}@utility badge-success{--color-badge:var(--color-success);--color-badge-active:var(--color-success-active);--color-on-badge:var(--color-on-success);--color-badge-soft:var(--color-success-soft);--color-on-badge-soft:light-dark(var(--color-success-800),var(--color-success-400));--badge-variant-text:light-dark(var(--color-success-800),var(--color-success-400))}@utility badge-warning{--color-badge:var(--color-warning);--color-badge-active:var(--color-warning-active);--color-on-badge:var(--color-on-warning);--color-badge-soft:var(--color-warning-soft);--color-on-badge-soft:light-dark(var(--color-warning-800),var(--color-warning-400));--badge-variant-text:light-dark(var(--color-warning-800),var(--color-warning-400))}@utility badge-error{--color-badge:var(--color-error);--color-badge-active:var(--color-error-active);--color-on-badge:var(--color-on-error);--color-badge-soft:var(--color-error-soft);--color-on-badge-soft:light-dark(var(--color-error-800),var(--color-error-400));--badge-variant-text:light-dark(var(--color-error-800),var(--color-error-400))}@utility badge-square{--badge--padding-inline:var(--badge-square--padding,0.625rem);--badge--padding-block:var(--badge-square--padding,0.625rem);--badge--width:var(--badge-square--padding);--badge--height:var(--badge-square--padding)}@utility badge-rounded{--badge--radius:calc(infinity * 1px)}@utility badge-circle{--badge--padding-inline:var(--badge--padding-inline,0.625rem);--badge--padding-block:var(--badge--padding-inline,0.625rem);--badge--width:var(--badge--padding-block);--badge--height:var(--badge--padding-block);--badge--radius:calc(infinity * 1px)}@utility badge-xs{--badge--padding-inline:0.5rem;--badge--padding-block:0.125rem;--badge--font-size:0.625rem;--badge--line-height:1.3;--badge-square--padding:0.125rem}@utility badge-sm{--badge--padding-inline:0.625rem;--badge--padding-block:0.25rem;--badge--font-size:0.75rem;--badge--line-height:1.3;--badge-square--padding:0.25rem}@utility badge-md{--badge--padding-inline:0.75rem;--badge--padding-block:0.375rem;--badge--font-size:0.875rem;--badge--line-height:1.3;--badge-square--padding:0.375rem}@utility badge-lg{--badge--padding-inline:0.875rem;--badge--padding-block:0.5rem;--badge--font-size:1rem;--badge--line-height:1.2;--badge-square--padding:0.5rem}@utility badge-xl{--badge--padding-inline:1rem;--badge--padding-block:0.625rem;--badge--font-size:1.125rem;--badge--line-height:1.2;--badge-square--padding:0.625rem}@utility badge-2xl{--badge--padding-inline:1.125rem;--badge--padding-block:0.75rem;--badge--font-size:1.25rem;--badge--line-height:1.2;--badge-square--padding:0.75rem}@utility badge-dashed{background-color:transparent;color:var(--badge-variant-text);outline-color:var(--color-badge);outline-style:dashed;outline-width:1px}@utility badge-outline{background-color:transparent;color:var(--badge-variant-text);outline-color:var(--color-badge);outline-style:solid;outline-width:1px}@utility badge-soft{background-color:var(--color-badge-soft);color:var(--color-on-badge-soft)}@utility badge-ghost{background-color:transparent;color:var(--badge-variant-text)}@utility badge{--color-badge:var(--color-base-soft);--color-on-badge:var(--color-on-base);--color-badge-active:var(--color-base-active);--color-badge-soft:var(--color-base-soft);--color-on-badge-soft:var(--color-on-base);--badge-variant-text:var(--color-on-base);background-color:var(--color-badge);color:var(--color-on-badge);padding-inline:var(--badge--padding-inline,0.75rem);padding-block:var(--badge--padding-block,0.375rem);font-size:var(--badge--font-size,0.875rem);line-height:calc(var(--badge--font-size,0.875rem) * var(--badge--line-height,1.5));outline-width:var(--badge--outline-width);outline-style:var(--badge--outline-style);outline-color:var(--badge--outline-color);display:inline-flex;gap:0.5rem;border-radius:var(--badge--radius,var(--radius-badge));align-items:center;justify-content:center;vertical-align:middle;text-align:center;width:var(--badge--width,fit-content);height:var(--badge--height)}@utility btn-primary{--color-btn:var(--color-primary);--color-btn-active:var(--color-primary-active);--color-on-btn:var(--color-on-primary);--color-btn-soft:var(--color-primary-soft);--color-on-btn-soft:var(--color-on-primary-soft);--btn-variant-text:light-dark(var(--color-primary-800),var(--color-primary-400))}@utility btn-secondary{--color-btn:var(--color-secondary);--color-btn-active:var(--color-secondary-active);--color-on-btn:var(--color-on-secondary);--color-btn-soft:var(--color-secondary-soft);--color-on-btn-soft:var(--color-on-secondary-soft);--btn-variant-text:light-dark(var(--color-secondary-800),var(--color-secondary-400))}@utility btn-accent{--color-btn:var(--color-accent);--color-btn-active:var(--color-accent-active);--color-on-btn:var(--color-on-accent);--color-btn-soft:var(--color-accent-soft);--color-on-btn-soft:var(--color-on-accent-soft);--btn-variant-text:light-dark(var(--color-accent-800),var(--color-accent-400))}@utility btn-info{--color-btn:var(--color-info);--color-btn-active:var(--color-info-active);--color-on-btn:var(--color-on-info);--color-btn-soft:var(--color-info-soft);--color-on-btn-soft:var(--color-on-info-soft);--btn-variant-text:light-dark(var(--color-info-800),var(--color-info-400))}@utility btn-neutral{--color-btn:var(--color-neutral);--color-btn-active:var(--color-neutral-active);--color-on-btn:var(--color-on-neutral);--color-btn-soft:var(--color-neutral-soft);--color-on-btn-soft:var(--color-on-neutral-soft);--btn-variant-text:light-dark(var(--color-neutral-800),var(--color-neutral-400))}@utility btn-success{--color-btn:var(--color-success);--color-btn-active:var(--color-success-active);--color-on-btn:var(--color-on-success);--color-btn-soft:var(--color-success-soft);--color-on-btn-soft:var(--color-on-success-soft);--btn-variant-text:light-dark(var(--color-success-800),var(--color-success-400))}@utility btn-warning{--color-btn:var(--color-warning);--color-btn-active:var(--color-warning-active);--color-on-btn:var(--color-on-warning);--color-btn-soft:var(--color-warning-soft);--color-on-btn-soft:var(--color-on-warning-soft);--btn-variant-text:light-dark(var(--color-warning-800),var(--color-warning-400))}@utility btn-error{--color-btn:var(--color-error);--color-btn-active:var(--color-error-active);--color-on-btn:var(--color-on-error);--color-btn-soft:var(--color-error-soft);--color-on-btn-soft:var(--color-on-error-soft);--btn-variant-text:light-dark(var(--color-error-800),var(--color-error-400))}@utility btn-square{--btn--padding-inline:var(--btn-square--padding-block,0.625rem);--btn--padding-block:var(--btn-square--padding-block,0.625rem)}@utility btn-rounded{--btn--radius:calc(infinity * 1px)}@utility btn-pill{--btn--radius:calc(infinity * 1px)}@utility btn-circle{--btn--padding-inline:var(--btn-circle--padding-block,0.625rem);--btn--padding-block:var(--btn-circle--padding-block,0.625rem);--btn--radius:calc(infinity * 1px)}@utility btn-xs{--btn--padding-inline:0.875rem;--btn--padding-block:0.375rem;--btn--font-size:0.75rem;--btn--line-height:1.3;--btn-square--padding-block:0.375rem;--btn-circle--padding-block:0.375rem}@utility btn-sm{--btn--padding-inline:1rem;--btn--padding-block:0.5rem;--btn--font-size:0.875rem;--btn--line-height:1.4;--btn-square--padding-block:0.5rem;--btn-circle--padding-block:0.5rem}@utility btn-md{--btn--padding-inline:1.125rem;--btn--padding-block:0.625rem;--btn--font-size:1rem;--btn--line-height:1.5;--btn-square--padding-block:0.625rem;--btn-circle--padding-block:0.625rem}@utility btn-lg{--btn--padding-inline:1.25rem;--btn--padding-block:0.75rem;--btn--font-size:1.125rem;--btn--line-height:1.5;--btn-square--padding-block:0.75rem;--btn-circle--padding-block:0.75rem}@utility btn-xl{--btn--padding-inline:1.375rem;--btn--padding-block:0.875rem;--btn--font-size:1.25rem;--btn--line-height:1.5;--btn-square--padding-block:0.875rem;--btn-circle--padding-block:0.875rem}@utility btn-2xl{--btn--padding-inline:1.5rem;--btn--padding-block:1rem;--btn--font-size:1.375rem;--btn--line-height:1.5;--btn-square--padding-block:1rem;--btn-circle--padding-block:1rem}@utility btn-wide{--btn--max-width:320px;--btn--width:100%}@utility btn-block{--btn--width:100%;--btn--display:block}@utility btn-active{background-color:var(--color-btn-active);color:var(--color-on-btn);outline-style:none;@variant hover{background-color:var(--color-btn-active)}}@utility btn-disabled{opacity:var(--btn--opacity);cursor:var(--btn--cursor);pointer-events:var(--btn--pointer-events)}@utility btn-soft{background-color:var(--color-btn-soft);color:var(--color-on-btn-soft);@variant hover{background-color:var(--color-btn-active);color:var(--color-on-btn)}}@utility btn-dashed{background-color:transparent;color:var(--btn-variant-text);outline-color:var(--color-btn-active);outline-style:dashed;outline-width:1px;@variant hover{outline-style:none}}@utility btn-outline{background-color:transparent;color:var(--btn-variant-text);outline-color:var(--color-btn-active);outline-style:solid;outline-width:1px;@variant hover{outline-style:none}}@utility btn-ghost{background-color:transparent;color:var(--btn-variant-text)}@utility btn-link{background-color:transparent;color:var(--btn-variant-text);@variant hover{background-color:transparent;text-decoration:underline;text-underline-offset:4px;color:var(--btn-variant-text)}}@custom-variant btn-disabled{&:is(:disabled,[disabled],.btn-disabled){@slot}}@utility btn{--color-btn:var(--color-base-soft);--color-on-btn:var(--color-on-base);--color-btn-active:var(--color-base-active);--color-btn-soft:var(--color-base-soft);--color-on-btn-soft:var(--color-on-base-soft);--btn-variant-text:var(--color-on-base);background-color:var(--color-btn);color:var(--color-on-btn);@variant hover{background-color:var(--color-btn-active);color:var(--color-on-btn)}border-radius:var(--btn--radius,var(--radius-btn));display:var(--btn--display,inline-flex);padding-inline:var(--btn--padding-inline,1.125rem);padding-block:var(--btn--padding-block,0.625rem);font-size:var(--btn--font-size,1rem);line-height:calc(var(--btn--font-size,1rem) * var(--btn--line-height,1.5));width:var(--btn--width);max-width:var(--btn--max-width);position:relative;gap:0.375rem;flex-shrink:0;align-items:center;justify-content:center;align-self:flex-start;flex-wrap:nowrap;vertical-align:middle;font-weight:500;text-align:center;overflow:hidden;cursor:pointer;box-sizing:border-box;transition:all 250ms ease-out;@variant btn-disabled{--btn--opacity:20%;--btn--cursor:not-allowed;--btn--pointer-events:none;opacity:var(--btn--opacity);cursor:var(--btn--cursor);pointer-events:var(--btn--pointer-events)}&:is(input[type="checkbox"],input[type="radio"]){appearance:none;@variant after{content:attr(aria-label)}@variant checked{isolation:isolate}}@variant focus-visible{outline-width:2px;outline-style:solid;outline-color:light-dark( var(--color-base-950,currentColor),var(--color-base-50,currentColor) );outline-offset:3px;isolation:isolate}}@utility breadcrumb-link{display:flex;align-items:center;gap:0.5rem;line-height:1.125rem;@variant hover{text-decoration-line:underline;text-underline-offset:4px;cursor:pointer}@variant focus{outline-style:none;@variant forced-colors{outline:2px solid transparent;outline-offset:2px}}@variant focus-visible{outline:2px solid currentColor;outline-offset:2px}}@utility breadcrumb-current{display:flex;align-items:center;gap:0.5rem;line-height:1.125rem}@utility breadcrumb-list{display:flex;min-height:min-content;align-items:center;white-space:nowrap}@utility breadcrumb-item{display:flex;align-items:center;@variant before{content:"";margin-right:0.75rem;margin-left:0.5rem;height:0.375rem;width:0.375rem;display:block;transform:rotate(45deg);transition:transform 300ms;border-top:1px solid;border-right:1px solid;background-color:oklch(0 0 0 / 0);color:light-dark(var(--color-base-800),var(--color-base-400))}@variant first{@variant before{content:none}}&:has(.breadcrumb-separator){@variant before{content:none}}@variant rtl{@variant before{transform:rotate(-135deg)}}&:has([aria-current="page"],.breadcrumb-current){color:light-dark(var(--color-base-950),var(--color-base-50))}}@utility breadcrumb-separator{display:flex;align-items:center;margin-inline:0.5rem;color:light-dark(var(--color-base-800),var(--color-base-400))}@utility breadcrumb{padding-block:0.5rem;max-width:100%;overflow-x:auto;font-size:0.875rem;color:light-dark(var(--color-base-900),var(--color-base-200))}@utility card-xs{:is(.card-body){--card-body-padding:0.5rem;--card-body-font-size:0.6875rem}:is(.card-title){--card-title-font-size:0.875rem}}@utility card-sm{:is(.card-body){--card-body-padding:1rem;--card-body-font-size:0.75rem}:is(.card-title){--card-title-font-size:1rem}}@utility card-md{:is(.card-body){--card-body-padding:1.5rem;--card-body-font-size:0.875rem}:is(.card-title){--card-title-font-size:1.125rem}}@utility card-lg{:is(.card-body){--card-body-padding:2rem;--card-body-font-size:1rem}:is(.card-title){--card-title-font-size:1.25rem}}@utility card-xl{:is(.card-body){--card-body-padding:2.5rem;--card-body-font-size:1.125rem}:is(.card-title){--card-title-font-size:1.375rem}}@utility card-body{display:flex;gap:0.5rem;flex:auto;flex-direction:column;padding:var(--card-body-padding,1.5rem);:where(p){flex-grow:1;font-size:var(--card-body-font-size,1rem)}}@utility card-title{display:flex;align-items:center;gap:0.5rem;font-weight:600;font-size:var(--card-title-font-size,1.125rem)}@utility card-outline{border-width:1px;border-style:solid;border-color:light-dark(--alpha(var(--color-base-950) / 10%),--alpha(var(--color-base-400) / 10%))}@utility card-dashed{border-width:1px;border-style:dashed;border-color:light-dark(--alpha(var(--color-base-950) / 10%),--alpha(var(--color-base-400) / 10%))}@utility card{position:relative;display:flex;flex-direction:column;border-radius:var(--radius-card);overflow:hidden;background-color:var(--color-base);:where(figure:first-child){overflow:hidden;border-start-start-radius:inherit;border-start-end-radius:inherit;border-end-start-radius:unset;border-end-end-radius:unset}:where(figure:last-child){overflow:hidden;border-start-start-radius:unset;border-start-end-radius:unset;border-end-start-radius:inherit;border-end-end-radius:inherit}}@utility checkbox-primary{--color-checkbox:light-dark(var(--color-primary-50),color-mix(in oklch,black 10%,var(--color-primary-400) 20%));--color-on-checkbox:var(--color-on-primary);--checkbox--box-shadow:0 0 0 0px var(--color-primary-50),0 0 0 calc(1px + 0px) var(--color-primary-600),0 0 var(--color-primary-50);@variant focus-visible{--checkbox--box-shadow:0 0 0 0px var(--color-primary-50),0 0 0 calc(1px + 0px) var(--color-primary-700),0 0 var(--color-primary-50)}@variant checked-or-aria-checked{--checkbox--bg-color:var(--color-primary);@variant forced-colors{@variant before{--checkbox--bg-color:light-dark(var(--color-primary-600),var(--color-primary-200))}}}}@utility checkbox-secondary{--color-checkbox:light-dark(var(--color-secondary-50),color-mix(in oklch,black 10%,var(--color-secondary-400) 20%));--color-on-checkbox:var(--color-on-secondary);--checkbox--box-shadow:0 0 0 0px var(--color-secondary-50),0 0 0 calc(1px + 0px) var(--color-secondary-600),0 0 var(--color-secondary-50);@variant focus-visible{--checkbox--box-shadow:0 0 0 0px var(--color-secondary-50),0 0 0 calc(1px + 0px) var(--color-secondary-700),0 0 var(--color-secondary-50)}@variant checked-or-aria-checked{--checkbox--bg-color:var(--color-secondary);@variant forced-colors{@variant before{--checkbox--bg-color:light-dark(var(--color-secondary-600),var(--color-secondary-200))}}}}@utility checkbox-accent{--color-checkbox:light-dark(var(--color-accent-50),color-mix(in oklch,black 10%,var(--color-accent-400) 20%));--color-on-checkbox:var(--color-on-accent);--checkbox--box-shadow:0 0 0 0px var(--color-accent-50),0 0 0 calc(1px + 0px) var(--color-accent-600),0 0 var(--color-accent-50);@variant focus-visible{--checkbox--box-shadow:0 0 0 0px var(--color-accent-50),0 0 0 calc(1px + 0px) var(--color-accent-700),0 0 var(--color-accent-50)}@variant checked-or-aria-checked{--checkbox--bg-color:var(--color-accent);@variant forced-colors{@variant before{--checkbox--bg-color:light-dark(var(--color-accent-600),var(--color-accent-200))}}}}@utility checkbox-info{--color-checkbox:light-dark(var(--color-info-50),color-mix(in oklch,black 10%,var(--color-info-400) 20%));--color-on-checkbox:var(--color-on-info);--checkbox--box-shadow:0 0 0 0px var(--color-info-50),0 0 0 calc(1px + 0px) var(--color-info-600),0 0 var(--color-info-50);@variant focus-visible{--checkbox--box-shadow:0 0 0 0px var(--color-info-50),0 0 0 calc(1px + 0px) var(--color-info-700),0 0 var(--color-info-50)}@variant checked-or-aria-checked{--checkbox--bg-color:var(--color-info);@variant forced-colors{@variant before{--checkbox--bg-color:light-dark(var(--color-info-600),var(--color-info-200))}}}}@utility checkbox-neutral{--color-checkbox:light-dark(var(--color-neutral-50),color-mix(in oklch,black 10%,var(--color-neutral-400) 20%));--color-on-checkbox:var(--color-on-neutral);--checkbox--box-shadow:0 0 0 0px var(--color-neutral-50),0 0 0 calc(1px + 0px) var(--color-neutral-600),0 0 var(--color-neutral-50);@variant focus-visible{--checkbox--box-shadow:0 0 0 0px var(--color-neutral-50),0 0 0 calc(1px + 0px) var(--color-neutral-700),0 0 var(--color-neutral-50)}@variant checked-or-aria-checked{--checkbox--bg-color:var(--color-neutral);@variant forced-colors{@variant before{--checkbox--bg-color:light-dark(var(--color-neutral-600),var(--color-neutral-200))}}}}@utility checkbox-success{--color-checkbox:light-dark(var(--color-success-50),color-mix(in oklch,black 10%,var(--color-success-400) 20%));--color-on-checkbox:var(--color-on-success);--checkbox--box-shadow:0 0 0 0px var(--color-success-50),0 0 0 calc(1px + 0px) var(--color-success-600),0 0 var(--color-success-50);@variant focus-visible{--checkbox--box-shadow:0 0 0 0px var(--color-success-50),0 0 0 calc(1px + 0px) var(--color-success-700),0 0 var(--color-success-50)}@variant checked-or-aria-checked{--checkbox--bg-color:var(--color-success);@variant forced-colors{@variant before{--checkbox--bg-color:light-dark(var(--color-success-600),var(--color-success-200))}}}}@utility checkbox-warning{--color-checkbox:light-dark(var(--color-warning-50),color-mix(in oklch,black 10%,var(--color-warning-400) 20%));--color-on-checkbox:var(--color-on-warning);--checkbox--box-shadow:0 0 0 0px var(--color-warning-50),0 0 0 calc(1px + 0px) var(--color-warning-600),0 0 var(--color-warning-50);@variant focus-visible{--checkbox--box-shadow:0 0 0 0px var(--color-warning-50),0 0 0 calc(1px + 0px) var(--color-warning-700),0 0 var(--color-warning-50)}@variant checked-or-aria-checked{--checkbox--bg-color:var(--color-warning);@variant forced-colors{@variant before{--checkbox--bg-color:light-dark(var(--color-warning-600),var(--color-warning-200))}}}}@utility checkbox-error{--color-checkbox:light-dark(var(--color-error-50),color-mix(in oklch,black 10%,var(--color-error-400) 20%));--color-on-checkbox:var(--color-on-error);--checkbox--box-shadow:0 0 0 0px var(--color-error-50),0 0 0 calc(1px + 0px) var(--color-error-600),0 0 var(--color-error-50);@variant focus-visible{--checkbox--box-shadow:0 0 0 0px var(--color-error-50),0 0 0 calc(1px + 0px) var(--color-error-700),0 0 var(--color-error-50)}@variant checked-or-aria-checked{--checkbox--bg-color:var(--color-error);@variant forced-colors{@variant before{--checkbox--bg-color:light-dark(var(--color-error-600),var(--color-error-200))}}}}@utility checkbox-circle{--checkbox--border-radius:calc(infinity * 1px);--checkbox--aspect-ratio:1 / 1}@utility checkbox-rounded{--checkbox--border-radius:calc(infinity * 1px);--checkbox--aspect-ratio:1 / 1}@utility checkbox-square{--checkbox--border-radius:var(--radius-checkbox);--checkbox--aspect-ratio:1 / 1}@utility checkbox-xs{--checkbox--padding:0.1875rem;--checkbox--width:0.75rem;--checkbox--height:0.75rem}@utility checkbox-sm{--checkbox--padding:0.25rem;--checkbox--width:1rem;--checkbox--height:1rem}@utility checkbox-md{--checkbox--padding:0.3125rem;--checkbox--width:1.25rem;--checkbox--height:1.25rem}@utility checkbox-lg{--checkbox--padding:0.375rem;--checkbox--width:1.5rem;--checkbox--height:1.5rem}@utility checkbox-xl{--checkbox--padding:0.4375rem;--checkbox--width:1.75rem;--checkbox--height:1.75rem}@utility checkbox-2xl{--checkbox--padding:0.5rem;--checkbox--width:2rem;--checkbox--height:2rem}@utility checkbox-disabled{cursor:var(--checkbox--cursor);opacity:var(--checkbox--opacity)}@custom-variant checked-or-aria-checked{&:checked,&[aria-checked="true"]{@slot}}@custom-variant checkbox-disabled{&:is(:disabled,[disabled],.checkbox-disabled){@slot}}@utility checkbox{--color-checkbox:--alpha(var(--color-base) / 50%);--color-on-checkbox:var(--color-on-base);--checkbox--box-shadow:0 0 0 0px var(--color-base-100),0 0 0 calc(1px + 0px) light-dark(var(--color-base-600),color-mix(in oklch,black 10%,var(--color-base-400) 40%)),0 0 var(--color-base-100);background-color:var(--color-checkbox);color:var(--color-on-checkbox);box-shadow:var(--checkbox--box-shadow);aspect-ratio:var(--checkbox--aspect-ratio);border-radius:var(--checkbox--radius,var(--radius-checkbox));padding:var(--checkbox--padding,0.3125rem);width:var(--checkbox--width,1.25rem);height:var(--checkbox--height,1.25rem);position:relative;transition-duration:350ms;flex-shrink:0;cursor:pointer;appearance:none;vertical-align:middle;@variant before{content:none;opacity:0%;background-color:currentcolor;transform:rotate(45deg);transition:transform 300ms,background-color 100ms;display:block;width:100%;height:100%;clip-path:polygon(20% 100%,20% 80%,50% 80%,50% 0,70% 0,70% 100%);font-size:1rem;line-height:0.75}@variant focus-visible{outline-width:2px;outline-style:solid;outline-color:light-dark( var(--color-base-950,currentColor),var(--color-base-50,currentColor) );outline-offset:3px}@variant checked-or-aria-checked{--checkbox--bg-color:light-dark(--alpha(var(--color-base-600) / 20%),--alpha(var(--color-base-400) / 20%));background-color:var(--checkbox--bg-color);transition:all 100ms;@variant before{content:"✔︎";opacity:100%}@variant forced-colors{@variant before{--checkbox--bg-color:light-dark(var(--color-base-600),var(--color-base-200));content:"✔︎";transform:rotate(0deg);background-color:var(--checkbox--bg-color);clip-path:none}}}@variant indeterminate{@variant before{opacity:100%;transform:rotate(0deg) translate(0,-35%);clip-path:polygon( 20% 100%,20% 80%,50% 80%,50% 80%,80% 80%,80% 100% )}}@variant checkbox-disabled{--checkbox--cursor:not-allowed;--checkbox--opacity:20%;cursor:var(--checkbox--cursor);opacity:var(--checkbox--opacity)}}@utility container-xs{--container--max-width:320px}@utility container-sm{--container--max-width:640px}@utility container-md{--container--max-width:768px}@utility container-lg{--container--max-width:1024px}@utility container-xl{--container--max-width:1280px}@utility container-2xl{--container--max-width:1536px}@utility container-full{--container--width:100%;--container--max-width:100%;--container--box-sizing:border-box}@utility container{width:var(--container--width);max-width:var(--container--max-width);box-sizing:var(--container--box-sizing);margin-inline:auto;padding-inline:1rem;@variant sm{padding-inline:2rem}@variant lg{padding-inline:4rem}}@utility divider-primary{--color-divider:var(--color-primary)}@utility divider-secondary{--color-divider:var(--color-secondary)}@utility divider-accent{--color-divider:var(--color-accent)}@utility divider-neutral{--color-divider:var(--color-neutral)}@utility divider-success{--color-divider:var(--color-success)}@utility divider-warning{--color-divider:var(--color-warning)}@utility divider-error{--color-divider:var(--color-error)}@utility divider-x{--divider-direction:right;--divider--width:100%;--divider--height:1px;--divider--flex-direction:row;--divider--margin:1rem 0}@utility divider-y{--divider-direction:bottom;--divider--width:1px;--divider--height:100%;--divider--flex-direction:column;--divider--margin:0 1rem}@utility divider-start{@variant before{display:none}}@utility divider-end{@variant after{display:none}}@utility divider-solid{--divider-dash-length:10px;--divider-gap-length:0px}@utility divider-dashed{--divider-dash-length:5px;--divider-gap-length:5px}@custom-variant before-after{&::before,&::after{@slot}}@utility divider{--divider--margin:1rem 0;--color-divider:var(--color-base);--color-divider-soft:var(--color-base-soft);--divider-direction:right;--divider--width:100%;--divider--height:1px;--divider-dash-length:10px;--divider-gap-length:0px;display:flex;align-items:center;justify-content:center;flex-direction:var(--divider--flex-direction);@variant not-empty{column-gap:0.5rem}@variant before-after{content:"";margin:var(--divider--margin);width:var(--divider--width);height:var(--divider--height);background:repeating-linear-gradient(to var(--divider-direction),var(--color-divider-soft) 0px,var(--color-divider-soft) var(--divider-dash-length),transparent var(--divider-dash-length),transparent calc(var(--divider-dash-length) + var(--divider-gap-length)))}}@utility drawer-top{place-items:start;:where(.drawer-body){height:auto;width:100%;max-width:none;border-radius:0;max-height:calc(100vh - 5em);translate:0 -100%;scale:1}}@utility drawer-bottom{place-items:end;:where(.drawer-body){height:auto;width:100%;max-width:none;border-radius:0;max-height:calc(100vh - 5em);translate:0 100%;scale:1}}@utility drawer-start{place-items:start;:where(.drawer-body){height:100vh;width:auto;max-height:none;max-width:none;border-radius:0;translate:-100% 0;scale:1}}@utility drawer-end{place-items:end;:where(.drawer-body){height:100vh;max-height:none;max-width:none;width:auto;border-radius:0;translate:100% 0;scale:1}}@utility drawer-backdrop{display:grid;grid-column-start:1;grid-row-start:1;align-self:stretch;justify-self:stretch;color:transparent;z-index:-1;button{cursor:pointer}}@utility drawer-body{border-radius:0;translate:-100% 0;scale:1;grid-column-start:1;grid-row-start:1;height:100vh;max-height:none;width:calc(11 / 12 * 100%);max-width:none;padding:0.25rem;overflow-y:auto;overscroll-behavior:contain;@variant forced-colors{outline-style:solid;outline-width:1px}background-color:var(--color-base);transition:translate 0.3s ease-out,visibility 0.3s allow-discrete,background-color 0.3s ease-out,opacity 0.1s ease-out}@utility drawer{pointer-events:none;visibility:hidden;position:fixed;inset:0rem;margin:0rem;padding:0rem;display:grid;width:100%;height:100%;max-width:none;max-height:none;place-items:start;color:inherit;z-index:999;overflow:hidden;overscroll-behavior:contain;&:not(drawer:not([open]):not(.drawer-open)),&::backdrop{@starting-style{visibility:hidden}background-color:light-dark(color-mix(in oklch,black 10%,var(--color-base-600) 40%),color-mix(in oklch,black 10%,var(--color-base-400) 40%))}&[open],&.drawer-open{@starting-style{visibility:hidden}pointer-events:auto;visibility:visible;.drawer-body{translate:0 0;scale:1;opacity:1}}}@utility header-sticky{position:sticky}@utility header-body{margin-inline:auto;padding-inline:1rem;@variant sm{padding-inline:2rem}@variant lg{padding-inline:4rem}display:flex;gap:0.75rem;padding-block:0.5rem;justify-content:space-between;align-items:center;margin-left:auto;margin-right:auto}@utility header{background-color:var(--color-base);color:var(--heading--color);border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:var(--color-base-soft);top:0;z-index:999}@utility input-primary{--color-input:var(--color-primary);--color-on-input:var(--color-on-primary);--color-input-soft:var(--color-primary-soft);--color-on-input-soft:var(--color-on-primary-soft);--color-input-active:var(--color-primary-active);--color-on-input-active:var(--color-on-primary);@variant focus-or-within{outline-color:var(--color-primary-400)}}@utility input-secondary{--color-input:var(--color-secondary);--color-on-input:var(--color-on-secondary);--color-input-soft:var(--color-secondary-soft);--color-on-input-soft:var(--color-on-secondary-soft);--color-input-active:var(--color-secondary-active);--color-on-input-active:var(--color-on-secondary);@variant focus-or-within{outline-color:var(--color-secondary-400)}}@utility input-neutral{--color-input:var(--color-neutral);--color-on-input:var(--color-on-neutral);--color-input-soft:var(--color-neutral-soft);--color-on-input-soft:var(--color-on-neutral-soft);--color-input-active:var(--color-neutral-active);--color-on-input-active:var(--color-on-neutral);@variant focus-or-within{outline-color:var(--color-neutral-400)}}@utility input-accent{--color-input:var(--color-accent);--color-on-input:var(--color-on-accent);--color-input-soft:var(--color-accent-soft);--color-on-input-soft:var(--color-on-accent-soft);--color-input-active:var(--color-accent-active);--color-on-input-active:var(--color-on-accent);@variant focus-or-within{outline-color:var(--color-accent-400)}}@utility input-info{--color-input:var(--color-info);--color-on-input:var(--color-on-info);--color-input-soft:var(--color-info-soft);--color-on-input-soft:var(--color-on-info-soft);--color-input-active:var(--color-info-active);--color-on-input-active:var(--color-on-info);@variant focus-or-within{outline-color:var(--color-info-400)}}@utility input-success{--color-input:var(--color-success);--color-on-input:var(--color-on-success);--color-input-soft:var(--color-success-soft);--color-on-input-soft:var(--color-on-success-soft);--color-input-active:var(--color-success-active);--color-on-input-active:var(--color-on-success);@variant focus-or-within{outline-color:var(--color-success-400)}}@utility input-warning{--color-input:var(--color-warning);--color-on-input:var(--color-on-warning);--color-input-soft:var(--color-warning-soft);--color-on-input-soft:var(--color-on-warning-soft);--color-input-active:var(--color-warning-active);--color-on-input-active:var(--color-on-warning);@variant focus-or-within{outline-color:var(--color-warning-400)}}@utility input-error{--color-input:var(--color-error);--color-on-input:var(--color-on-error);--color-input-soft:var(--color-error-soft);--color-on-input-soft:var(--color-on-error-soft);--color-input-active:var(--color-error-active);--color-on-input-active:var(--color-on-error);@variant focus-or-within{outline-color:var(--color-error-400)}}@utility input-xs{--input--inline:0.475rem;--input--block:0.375rem;--input--font-size:0.75rem}@utility input-sm{--input--inline:0.6rem;--input--block:0.5rem;--input--font-size:0.875rem}@utility input-md{--input--inline:0.75rem;--input--block:0.625rem;--input--font-size:1rem}@utility input-lg{--input--inline:0.9rem;--input--block:0.75rem;--input--font-size:1rem}@utility input-xl{--input--inline:1rem;--input--block:0.875rem;--input--font-size:1rem}@utility input-2xl{--input--inline:1.25rem;--input--block:1rem;--input--font-size:1.025rem}@utility input-disabled{cursor:var(--input-disabled--cursor);opacity:var(--input-disabled--opacity);pointer-events:var(--input-disabled--pointer-events);background-color:var(--input-disabled--bg-color);color:var(--input-disabled--color);user-select:var(--input-disabled--user-select);outline-color:var(--input-disabled--outline-color) @variant placeholder{color:var(--input-disabled--color)}}@utility input-dashed{outline-style:dashed}@utility input-outline{outline-style:solid}@utility input-soft{background-color:var(--color-input-soft);outline-color:transparent;@variant placeholder{color:--alpha(var(--color-on-input-soft) / 20%)}}@utility input-ghost{outline-color:transparent}@custom-variant focus-or-within{&:focus,&:focus-within{@slot}}@custom-variant input-disabled{&:is(:disabled,[disabled],.input-disabled){@slot}}@utility input{--color-input:var(--color-base-soft);--color-on-input:var(--color-on-base-soft);--color-input-active:var(--color-base-active);--color-on-input-active:var(--color-on-base);--input--inline:0.75rem;--input--block:0.625rem;--input--font-size:1rem;outline-width:1px;outline-style:solid;outline-color:var(--color-input-active);background-color:transparent;&:not([type="file"]){padding-inline:var(--input--inline);padding-block:var(--input--block)}font-size:var(--input--font-size);color:var(--color-on-base);display:inline-flex;align-self:flex-start;flex-shrink:0;align-items:center;appearance:none;border-radius:var(--radius-input);gap:0.5rem;vertical-align:middle;white-space:nowrap;position:relative;font-weight:500;transition:outline-color 250ms;transition-timing-function:ease-in-out;@variant placeholder{font-size:var(--input--font-size);color:--alpha(var(--color-on-base) / 30%);font-weight:400}@variant file{font-size:var(--input--font-size);margin-right:1rem;display:inline-flex;padding-inline:var(--input--inline);padding-block:var(--input--block);transition:border-color 300ms,background-color 300ms,display 300ms;transition-timing-function:ease-in-out;align-items:center;border-top-left-radius:calc(var(--radius-input) / 2);border-bottom-left-radius:calc(var(--radius-input) / 2);background-color:var(--color-input);border-right-width:1px;border-style:solid;border-color:var(--color-input-active);font-weight:semibold;color:var(--color-on-input);@variant hover{background-color:var(--color-input-active);color:var(--color-on-input-active)}}@variant input-disabled{--input-disabled--cursor:not-allowed;--input-disabled--opacity:0.6;--input-disabled--pointer-events:none;--input-disabled--user-select:none;--input-disabled--bg-color:var(--color-base-soft);--input-disabled--color:light-dark(var(--color-base-700),var(--color-base-400));--input-disabled--outline-color:--alpha(var(--input) / 20%);cursor:var(--input-disabled--cursor);opacity:var(--input-disabled--opacity);pointer-events:var(--input-disabled--pointer-events);background-color:var(--input-disabled--bg-color);color:var(--input-disabled--color);user-select:var(--input-disabled--user-select);outline-color:var(--input-disabled--outline-color);@variant placeholder{color:var(--input-disabled--color)}}@variant focus-or-within{outline-color:light-dark(var(--color-base-800),--alpha(var(--color-base-300) / 80%))}}@utility link-primary{--link--color:light-dark(var(--color-primary-800),var(--color-primary-400));@variant hover{--link--color:light-dark(var(--color-primary-700),var(--color-primary-300))}}@utility link-secondary{--link--color:light-dark(var(--color-secondary-800),var(--color-secondary-400));@variant hover{--link--color:light-dark(var(--color-secondary-700),var(--color-secondary-300))}}@utility link-accent{--link--color:light-dark(var(--color-accent-800),var(--color-accent-400));@variant hover{--link--color:light-dark(var(--color-accent-700),var(--color-accent-300))}}@utility link-info{--link--color:light-dark(var(--color-info-800),var(--color-info-400));@variant hover{--link--color:light-dark(var(--color-info-700),var(--color-info-300))}}@utility link-neutral{--link--color:light-dark(var(--color-nuetral-800),var(--color-nuetral-400));@variant hover{--link--color:light-dark(var(--color-nuetral-700),var(--color-nuetral-300))}}@utility link-success{--link--color:light-dark(var(--color-success-800),var(--color-success-400));@variant hover{--link--color:light-dark(var(--color-success-700),var(--color-success-300))}}@utility link-warning{--link--color:light-dark(var(--color-warning-800),var(--color-warning-400));@variant hover{--link--color:light-dark(var(--color-warning-700),var(--color-warning-300))}}@utility link-error{--link--color:light-dark(var(--color-error-800),var(--color-error-400));@variant hover{--link--color:light-dark(var(--color-error-700),var(--color-error-300))}}@utility link-xs{--link-text-size:0.75rem}@utility link-sm{--link-text-size:0.875rem}@utility link-md{--link-text-size:1rem}@utility link-lg{--link-text-size:1.125rem}@utility link-xl{--link-text-size:1.25rem}@utility link-2xl{--link-text-size:1.375rem}@utility link-hover{text-decoration-line:none;@variant hover{text-decoration-line:underline}}@utility link{--link--color:var(--color-on-base);cursor:pointer;text-decoration:underline;text-underline-offset:4px;color:var(--link--color);font-size:var(--link-text-size,1rem);transition:all 200ms ease-out;@variant hover{--link--color:light-dark(var(--color-base-950),var(--color-base-100));color:var(--link--color)}@variant focus{outline-style:none;@variant forced-colors{outline:2px solid transparent;outline-offset:2px}}@variant focus-visible{outline:2px solid currentColor;outline-offset:2px}}@theme{--x-start:start;--x-center:center;--x-end:end;--y-start:start;--y-center:center;--y-end:end}@utility modal-x-start{justify-items:var(--x-start)}@utility modal-x-center{justify-items:var(--x-center)}@utility modal-x-end{justify-items:var(--x-end)}@utility modal-y-start{align-items:var(--y-start)}@utility modal-y-center{align-items:var(--y-center)}@utility modal-y-end{align-items:var(--y-end)}@utility modal-backdrop{display:grid;grid-column-start:1;grid-row-start:1;align-self:stretch;justify-self:stretch;color:transparent;background-color:transparent;z-index:-1;button{cursor:pointer}}@utility modal-body{box-shadow:light-dark(var(--color-base-600),var(--color-base-900)) 0px 1px 1px;@variant forced-colors{outline-style:solid;outline-width:1px}grid-column-start:1;grid-row-start:1;max-height:100vh;width:calc(11 / 12 * 100%);max-width:32rem;padding:1.5rem;transform:scale(95%,95%);opacity:0%;overflow-y:auto;overscroll-behavior:contain;border-radius:var(--radius-modal);background-color:var(--color-base);color:var(--para--color);border-width:1px;border-style:solid;border-color:var(--color-base-soft);transition:translate 0.3s ease-out,visibility 0.3s allow-discrete,background-color 0.3s ease-out,opacity 0.1s ease-out}@theme{--slide-up:0 100%;--slide-down:0 -100%;--slide-start:-100% 0;--slide-end:100% 0}@utility modal-slide-up{:where(.modal-body){translate:var(--slide-up);scale:1}}@utility modal-slide-down{:where(.modal-body){translate:var(--slide-down);scale:1}}@utility modal-slide-start{:where(.modal-body){translate:var(--slide-start);scale:1}}@utility modal-slide-end{:where(.modal-body){translate:var(--slide-end);scale:1}}@utility modal{display:grid;width:100%;height:100%;max-width:none;max-height:none;align-items:center;z-index:999;overscroll-behavior:contain;overflow:hidden;justify-items:center;color:inherit;padding:0.75rem;background-color:var(--color-base);inset:0rem;margin:0rem;pointer-events:none;visibility:hidden;position:fixed;&:not(modal:not([open]):not(.modal-open)),&::backdrop{@starting-style{visibility:hidden;opacity:0%}opacity:100%;background-color:light-dark(color-mix(in oklch,black 10%,var(--color-base-600) 40%),color-mix(in oklch,black 10%,var(--color-base-400) 40%))}&[open],&.modal-open{pointer-events:auto;visibility:visible;opacity:100%;@starting-style{visibility:hidden;opacity:0%}.modal-body{translate:0 0;scale:1;opacity:1}}}@utility navbar-x-start{justify-self:var(--x-start);flex-direction:row;& >:where(.navbar-list){flex-direction:row;justify-content:var(--x-start);align-items:center;column-gap:0.5rem}& >:where(.navbar-list > li){width:auto}}@utility navbar-x-center{justify-self:var(--x-center);flex-direction:row;& >:where(.navbar-list){flex-direction:row;justify-content:var(--x-center);align-items:center;column-gap:0.5rem}& >:where(.navbar-list > li){width:auto}}@utility navbar-x-end{justify-self:var(--x-end);flex-direction:row;& >:where(.navbar-list){flex-direction:row;justify-content:var(--x-end);align-items:center;column-gap:0.5rem}& >:where(.navbar-list > li){width:auto}}@utility navbar-y-start{justify-content:var(--y-start);flex-direction:column;row-gap:0.75rem;& >:where(.navbar-list){flex-direction:column;align-items:start;row-gap:0.25rem}}@utility navbar-y-center{justify-content:var(--y-center);flex-direction:column;row-gap:0.75rem;& >:where(.navbar-list){flex-direction:column;align-items:start;row-gap:0.25rem}}@utility navbar-y-end{justify-content:var(--y-end);flex-direction:column;row-gap:0.75rem;& >:where(.navbar-list){flex-direction:column;align-items:start;row-gap:0.25rem}}@utility navbar{display:flex;width:100%;& >:where(.navbar-list){display:flex;width:100%}& >:where(.navbar-list > li){width:100%}}@utility sidebar{display:flex;flex-direction:column;gap:1.25rem;overflow-y:auto;overflow-x:hidden;position:sticky;max-height:100dvh;padding:1.5rem;border-inline-style:solid;border-inline-width:1px;border-color:var(--color-base-soft);background-color:var(--color-base)}@utility heading-*{font-weight:bold;text-wrap-style:balance;color:var(--heading--color);font-size:--value(--text-*,integer,[integer])}@utility heading-md{font-weight:bold;text-wrap-style:balance;color:var(--heading--color);font-size:var(--text-base)}@utility heading{font-weight:bold;text-wrap-style:balance;color:var(--heading--color);font-size:var(--text-base)}@utility para-*{text-wrap-style:pretty;color:var(--para--color);font-size:--value(--text-*,integer,[integer])}@utility para-md{text-wrap-style:pretty;color:var(--para--color);font-size:var(--text-base)}@utility para{text-wrap-style:pretty;color:var(--para--color);font-size:var(--text-base)}

package/dist/frutjam.min.js

@@ -1,2 +0,0 @@
-/*! For license information please see frutjam.min.js.LICENSE.txt */
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.frutjam=t():e.frutjam=t()}("undefined"!=typeof self?self:this,()=>(()=>{"use strict";var e={};return e=e.default})());