{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "dependencies": [ "@liquefy-ui/core@^0.1.3", "@base-ui/react@1.6.0" ], "description": "Design tokens, the glass stylesheet and the Tailwind v4 bridge. Every other item depends on this. Import the installed stylesheet before Tailwind so utilities win over component styles.", "docs": "Two steps after installing: import the copied stylesheet once at your app entry — it lands at `styles/liquefy-ui.css` — or `@import` it from your global CSS *before* `tailwindcss`, so Tailwind utilities keep winning over component styles. Then wrap the tree in ``, which is where every component reads its tokens from. Every copied file already carries its own 'use client' directive. Full documentation: https://liquefy-ui.com/#/docs/installation", "files": [ { "content": "/*\n * Tailwind CSS v4 interop for liquefy-ui.\n *\n * Import this instead of `styles.css` when the project also uses Tailwind:\n *\n * @import '@liquefy-ui/react/tailwind.css';\n * @import 'tailwindcss';\n *\n * Import order matters. The `@layer` statement below is what puts `liquefy-ui`\n * before Tailwind's own layers, so a utility class always beats a component\n * style and `class=\"p-0\"` on a LiquidButton does what you expect. Import\n * Tailwind first and the cascade flips.\n */\n\n@layer liquefy-ui, theme, base, components, utilities;\n\n@layer liquefy-ui {\n :root {\n --lq-accent: #8eb9ff;\n --lq-space: 4px;\n --lq-radius-default: 18px;\n --lq-duration: 420ms;\n --lq-easing: cubic-bezier(0.22, 1, 0.36, 1);\n --lq-text: #f8faff;\n --lq-muted: rgba(242, 246, 255, 0.66);\n }\n\n .lq-provider {\n --lq-clear-fill: transparent;\n --lq-clear-line: rgba(255, 255, 255, 0.15);\n --lq-control-fill: transparent;\n --lq-control-line: rgba(255, 255, 255, 0.16);\n --lq-control-hover-line: color-mix(in srgb, var(--lq-button-tint, var(--lq-accent)) 28%, rgba(255, 255, 255, 0.18));\n --lq-dock-active: #fff;\n --lq-dock-hover-fill: rgba(255, 255, 255, 0.012);\n --lq-dock-indicator-fill: transparent;\n --lq-field-fill: transparent;\n --lq-field-focus-fill: color-mix(in srgb, var(--lq-accent) 2%, transparent);\n --lq-field-line: rgba(255, 255, 255, 0.13);\n --lq-foreground: #f8faff;\n --lq-glass-bright: rgba(255, 255, 255, 0.32);\n --lq-glass-shade: rgba(73, 111, 209, 0.07);\n --lq-glass-soft: rgba(255, 255, 255, 0.06);\n --lq-muted: rgba(242, 246, 255, 0.66);\n --lq-placeholder: rgba(235, 241, 255, 0.42);\n --lq-quiet-fill: transparent;\n --lq-quiet-line: rgba(255, 255, 255, 0.13);\n --lq-regular-fill: rgba(255, 255, 255, 0.012);\n --lq-regular-line: rgba(255, 255, 255, 0.18);\n --lq-shadow-color: rgba(4, 9, 24, 0.14);\n --lq-solid-fill: rgb(30, 38, 60);\n --lq-switch-fill: transparent;\n --lq-switch-line: rgba(255, 255, 255, 0.14);\n color: var(--lq-text);\n color-scheme: dark light;\n min-width: 0;\n }\n\n .lq-provider[data-liquid-theme='dark'] {\n color: var(--lq-foreground);\n color-scheme: dark;\n }\n\n .lq-provider[data-liquid-theme='light'] {\n --lq-clear-fill: transparent;\n --lq-clear-line: rgba(66, 85, 128, 0.22);\n --lq-control-fill: transparent;\n --lq-control-line: rgba(66, 85, 128, 0.24);\n --lq-control-hover-line: color-mix(in srgb, var(--lq-button-tint, var(--lq-accent)) 28%, rgba(255, 255, 255, 0.18));\n --lq-dock-active: #17203a;\n --lq-dock-hover-fill: rgba(255, 255, 255, 0.015);\n --lq-dock-indicator-fill: transparent;\n --lq-field-fill: transparent;\n --lq-field-focus-fill: color-mix(in srgb, var(--lq-accent) 1.5%, transparent);\n --lq-field-line: rgba(66, 85, 128, 0.24);\n --lq-foreground: #12182a;\n --lq-glass-bright: rgba(255, 255, 255, 0.56);\n --lq-glass-shade: rgba(62, 91, 164, 0.07);\n --lq-glass-soft: rgba(255, 255, 255, 0.16);\n --lq-muted: rgba(26, 35, 58, 0.62);\n --lq-placeholder: rgba(28, 40, 68, 0.42);\n --lq-quiet-fill: transparent;\n --lq-quiet-line: rgba(66, 85, 128, 0.16);\n --lq-regular-fill: rgba(255, 255, 255, 0.015);\n --lq-regular-line: rgba(66, 85, 128, 0.26);\n --lq-shadow-color: rgba(42, 55, 91, 0.1);\n --lq-solid-fill: rgb(239, 244, 255);\n --lq-switch-fill: transparent;\n --lq-switch-line: rgba(66, 85, 128, 0.24);\n color: var(--lq-foreground);\n color-scheme: light;\n }\n\n .lq-surface,\n .lq-button,\n .lq-switch,\n .lq-checkbox__box,\n .lq-radio__control,\n .lq-select__trigger,\n .lq-chip,\n .lq-pagination__item,\n .lq-text-field__control {\n --lq-pointer-x: 50%;\n --lq-pointer-y: 50%;\n --lq-rotate-x: 0deg;\n --lq-rotate-y: 0deg;\n --lq-skew-x: 0deg;\n --lq-squish: 0;\n --lq-lift: 0px;\n --lq-magnet-x: 0px;\n --lq-magnet-y: 0px;\n --lq-scale-x: 1;\n --lq-scale-y: 1;\n --lq-shine-opacity: 0;\n -webkit-tap-highlight-color: transparent;\n isolation: isolate;\n position: relative;\n transform: perspective(900px)\n translate3d(var(--lq-magnet-x), calc(var(--lq-lift) + var(--lq-magnet-y)), 0)\n rotateX(var(--lq-rotate-x))\n rotateY(var(--lq-rotate-y))\n skewX(var(--lq-skew-x))\n scaleX(var(--lq-scale-x))\n scaleY(var(--lq-scale-y));\n transform-style: preserve-3d;\n transition:\n box-shadow var(--lq-duration) var(--lq-easing),\n border-color var(--lq-duration) var(--lq-easing),\n background var(--lq-duration) var(--lq-easing);\n will-change: transform;\n }\n\n /* `-webkit-backdrop-filter` is written before the standard property, here and\n everywhere else in this file, and the order is load-bearing. Lightning CSS —\n what Vite hands a stylesheet to — reads the two as one property declared\n twice and keeps only the last, so the other order leaves a build with\n nothing but the prefixed form in it, which Chrome has dropped. This way the\n standard property survives the pass, and Safari versions old enough to want\n the prefix still find it. */\n .lq-surface {\n --lq-blur: 1.5px;\n --lq-saturate: 1.4;\n --lq-brighten: 1.05;\n --lq-glow: 0.4;\n --lq-fill: var(--lq-clear-fill);\n --lq-line: var(--lq-clear-line);\n --lq-shadow: 0 16px 40px var(--lq-shadow-color), 0 2px 8px color-mix(in srgb, var(--lq-shadow-color) 52%, transparent);\n -webkit-backdrop-filter: blur(var(--lq-blur)) saturate(var(--lq-saturate)) brightness(var(--lq-brighten));\n backdrop-filter: blur(var(--lq-blur)) saturate(var(--lq-saturate)) brightness(var(--lq-brighten));\n background: var(--lq-fill);\n border: 1px solid var(--lq-line);\n border-radius: calc(var(--lq-radius) + var(--lq-squish) * 6px);\n box-shadow:\n var(--lq-shadow),\n inset 0 1px 0 var(--lq-glass-bright),\n inset 0 -1.25px 0 var(--lq-glass-shade),\n inset 0 0 22px -14px rgba(255, 255, 255, var(--lq-glow));\n overflow: hidden;\n }\n\n .lq-surface[data-liquid-variant='clear'] {\n --lq-blur: 0px;\n --lq-saturate: 1.08;\n --lq-brighten: 1;\n --lq-glow: 0.1;\n }\n\n .lq-surface[data-liquid-variant='clear'] > .lq-surface__edge {\n opacity: 0.42;\n }\n\n .lq-surface[data-liquid-variant='tinted'] {\n --lq-blur: 2px;\n --lq-fill: color-mix(in srgb, var(--lq-tint) 14%, transparent);\n --lq-line: color-mix(in srgb, var(--lq-tint) 48%, rgba(255, 255, 255, 0.12));\n }\n\n .lq-surface[data-liquid-active='true'] {\n border-color: color-mix(in srgb, var(--lq-tint) 32%, rgba(255, 255, 255, 0.14));\n box-shadow:\n 0 20px 52px color-mix(in srgb, var(--lq-shadow-color) 86%, transparent),\n 0 3px 12px color-mix(in srgb, var(--lq-shadow-color) 54%, transparent),\n inset 0 0.75px 0 var(--lq-glass-bright),\n inset 0 -1px 0 var(--lq-glass-shade);\n }\n\n .lq-surface__edge {\n background:\n radial-gradient(\n circle 124px at var(--lq-pointer-x) var(--lq-pointer-y),\n rgba(255, 255, 255, calc(0.22 + var(--lq-shine-opacity) * 0.42)),\n rgba(255, 255, 255, 0.08) 36%,\n transparent 72%\n ),\n linear-gradient(\n 135deg,\n var(--lq-glass-bright) 0%,\n var(--lq-glass-soft) 25%,\n transparent 47%,\n var(--lq-glass-shade) 74%,\n rgba(255, 255, 255, 0.18) 100%\n );\n border-radius: inherit;\n inset: 0;\n mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);\n mask-composite: exclude;\n filter: drop-shadow(0 0 2px color-mix(in srgb, var(--lq-tint, var(--lq-button-tint)) 8%, transparent));\n opacity: 0.72;\n padding: 0.9px;\n pointer-events: none;\n position: absolute;\n transition: opacity 260ms ease;\n -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);\n -webkit-mask-composite: xor;\n z-index: 2;\n }\n\n .lq-surface[data-liquid-interactive='false'] > .lq-surface__edge {\n background: linear-gradient(\n 135deg,\n var(--lq-glass-bright) 0%,\n var(--lq-glass-soft) 25%,\n transparent 47%,\n var(--lq-glass-shade) 74%,\n rgba(255, 255, 255, 0.18) 100%\n );\n }\n\n .lq-surface::after,\n .lq-button::after {\n border-radius: inherit;\n box-shadow:\n inset 0 0.75px 0 rgba(255, 255, 255, 0.1),\n inset 0 -0.75px 0 color-mix(in srgb, var(--lq-tint, var(--lq-button-tint)) 8%, transparent);\n content: '';\n inset: 1px;\n pointer-events: none;\n position: absolute;\n z-index: 2;\n }\n\n .lq-surface__shader {\n border-radius: inherit;\n height: 100%;\n inset: 0;\n mix-blend-mode: screen;\n pointer-events: none;\n position: absolute;\n width: 100%;\n z-index: 1;\n }\n\n .lq-surface__shader[data-fallback='true'] {\n display: none;\n }\n\n .lq-surface__content {\n display: contents;\n }\n\n .lq-surface__content > * {\n position: relative;\n z-index: 3;\n }\n\n .lq-button {\n --lq-button-tint: var(--lq-accent);\n --lq-button-radius: 14px;\n align-items: center;\n appearance: none;\n -webkit-backdrop-filter: saturate(1.08);\n backdrop-filter: saturate(1.08);\n background: transparent;\n border: 1px solid color-mix(in srgb, var(--lq-button-tint) 16%, rgba(255, 255, 255, 0.08));\n border-radius: calc(var(--lq-button-radius) + var(--lq-squish) * 5px);\n box-shadow:\n 0 8px 20px color-mix(in srgb, var(--lq-shadow-color) 40%, transparent),\n inset 0 0.75px 0 var(--lq-glass-soft),\n inset 0 -1px 0 var(--lq-glass-shade);\n color: inherit;\n cursor: pointer;\n display: inline-flex;\n font: inherit;\n font-weight: 650;\n justify-content: center;\n letter-spacing: -0.01em;\n overflow: hidden;\n user-select: none;\n }\n\n .lq-button[data-liquid-size='sm'] {\n --lq-button-radius: 11px;\n font-size: 0.82rem;\n min-height: 36px;\n padding: 0 14px;\n }\n\n .lq-button[data-liquid-size='md'] {\n font-size: 0.9rem;\n min-height: 46px;\n padding: 0 21px;\n }\n\n .lq-button[data-liquid-size='lg'] {\n --lq-button-radius: 13px;\n font-size: 1rem;\n min-height: 56px;\n padding: 0 27px;\n }\n\n .lq-button:hover:not(:disabled) {\n background: color-mix(in srgb, var(--lq-button-tint) 8%, transparent);\n border-color: var(--lq-control-hover-line);\n box-shadow:\n 0 12px 28px color-mix(in srgb, var(--lq-shadow-color) 56%, transparent),\n inset 0 0.75px 0 var(--lq-glass-bright),\n inset 0 -1px 0 var(--lq-glass-shade);\n }\n\n .lq-button:focus-visible,\n .lq-switch:focus-visible,\n .lq-dock__item:focus-visible,\n .lq-text-field__control:focus-within {\n outline: 2px solid color-mix(in srgb, var(--lq-accent) 72%, white);\n outline-offset: 3px;\n }\n\n .lq-button:disabled,\n .lq-switch:disabled {\n cursor: not-allowed;\n opacity: 0.45;\n }\n\n .lq-button__content {\n align-items: center;\n display: inline-flex;\n gap: 9px;\n position: relative;\n z-index: 3;\n transition: transform 500ms var(--lq-easing);\n }\n\n .lq-button:hover:not(:disabled) .lq-button__content {\n transform: translate3d(calc(var(--lq-magnet-x) * 0.45), calc(var(--lq-magnet-y) * 0.45), 0);\n }\n\n .lq-button__icon {\n display: inline-flex;\n }\n\n .lq-button__icon[data-position='before'] {\n background: transparent;\n border: 0;\n box-shadow: none;\n }\n\n .lq-button[data-loading='true'],\n .lq-button[data-loading='true']:disabled {\n cursor: progress;\n opacity: 1;\n }\n\n .lq-button[data-loading='true'] .lq-button__content {\n opacity: 0;\n }\n\n .lq-button__spinner {\n align-items: center;\n display: inline-flex;\n inset: 0;\n justify-content: center;\n pointer-events: none;\n position: absolute;\n z-index: 3;\n }\n\n .lq-card {\n padding: 26px;\n }\n\n .lq-card__header,\n .lq-card__body,\n .lq-card__footer {\n position: relative;\n z-index: 3;\n }\n\n .lq-card__header {\n margin-bottom: 20px;\n }\n\n .lq-card__eyebrow {\n color: color-mix(in srgb, var(--lq-accent) 72%, white);\n display: block;\n font-size: 0.7rem;\n font-weight: 750;\n letter-spacing: 0.12em;\n margin-bottom: 8px;\n text-transform: uppercase;\n }\n\n .lq-card__title {\n font-size: 1.25rem;\n letter-spacing: -0.035em;\n margin: 0;\n }\n\n .lq-card__description {\n color: var(--lq-muted);\n font-size: 0.9rem;\n line-height: 1.55;\n margin: 8px 0 0;\n }\n\n /* Trailing action row — no hairline; actions simply sit at the trailing edge. */\n .lq-card__footer {\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n justify-content: flex-end;\n margin-top: 22px;\n }\n\n .lq-switch {\n appearance: none;\n -webkit-backdrop-filter: saturate(1.08);\n backdrop-filter: saturate(1.08);\n background: var(--lq-switch-fill);\n border: 1px solid var(--lq-switch-line);\n border-radius: 10px;\n box-shadow:\n inset 0 0.75px 0 var(--lq-glass-bright),\n inset 0 -1px 0 var(--lq-glass-shade),\n 0 5px 12px rgba(4, 9, 24, 0.08);\n cursor: pointer;\n height: 32px;\n overflow: hidden;\n padding: 3px;\n width: 54px;\n }\n\n .lq-switch::before {\n background: color-mix(in srgb, var(--lq-accent) 12%, transparent);\n border-radius: 7px;\n content: '';\n height: 24px;\n left: 3px;\n opacity: 0;\n position: absolute;\n scale: 0.45;\n top: 3px;\n transition:\n opacity 360ms ease,\n scale 620ms cubic-bezier(0.18, 1.4, 0.3, 1),\n translate 620ms cubic-bezier(0.18, 1.4, 0.3, 1);\n width: 24px;\n }\n\n .lq-switch[data-checked='true'] {\n background: color-mix(in srgb, var(--lq-accent) 3%, transparent);\n border-color: color-mix(in srgb, var(--lq-accent) 30%, rgba(255, 255, 255, 0.12));\n box-shadow: 0 6px 16px color-mix(in srgb, var(--lq-accent) 8%, transparent), inset 0 0.75px 0 rgba(255, 255, 255, 0.14);\n }\n\n .lq-switch[data-checked='true']::before {\n opacity: 0.48;\n scale: 1.2;\n translate: 22px 0;\n }\n\n .lq-switch__thumb {\n background: color-mix(in srgb, var(--lq-accent) 16%, rgba(255, 255, 255, 0.78));\n border: 1px solid rgba(255, 255, 255, 0.42);\n border-radius: 7px;\n box-shadow: 0 2px 6px rgba(3, 8, 22, 0.18);\n display: block;\n height: 24px;\n position: relative;\n transform-origin: center;\n transition:\n box-shadow 420ms var(--lq-easing),\n translate 680ms cubic-bezier(0.16, 1.52, 0.28, 1);\n translate: 0 0;\n width: 24px;\n z-index: 3;\n }\n\n .lq-switch[data-checked='true'] .lq-switch__thumb {\n box-shadow: 0 2px 8px color-mix(in srgb, var(--lq-accent) 14%, rgba(3, 8, 22, 0.2));\n translate: 22px 0;\n }\n\n .lq-switch[data-interacted='true'][data-checked='true'] .lq-switch__thumb {\n animation: lq-switch-thumb-on 680ms cubic-bezier(0.2, 0.9, 0.25, 1);\n }\n\n .lq-switch[data-interacted='true'][data-checked='false'] .lq-switch__thumb {\n animation: lq-switch-thumb-off 680ms cubic-bezier(0.2, 0.9, 0.25, 1);\n }\n\n .lq-control-label {\n color: color-mix(in srgb, var(--lq-foreground) 82%, transparent);\n font-size: 0.78rem;\n font-weight: 650;\n }\n\n .lq-control-hint {\n color: var(--lq-muted);\n font-size: 0.72rem;\n line-height: 1.4;\n }\n\n .lq-slider,\n .lq-text-field {\n display: grid;\n gap: 8px;\n }\n\n .lq-slider__row {\n align-items: center;\n display: flex;\n gap: 12px;\n }\n\n .lq-slider__adornment,\n .lq-text-field__adornment {\n color: var(--lq-muted);\n display: inline-flex;\n flex: 0 0 auto;\n }\n\n .lq-slider input[type='range'] {\n appearance: none;\n background: transparent;\n cursor: pointer;\n flex: 1;\n height: 28px;\n min-width: 80px;\n }\n\n .lq-slider input[type='range']::-webkit-slider-runnable-track {\n background: linear-gradient(90deg, color-mix(in srgb, var(--lq-accent) 72%, white 4%), rgba(255, 255, 255, 0.13));\n border: 1px solid rgba(255, 255, 255, 0.18);\n border-radius: 999px;\n height: 7px;\n }\n\n .lq-slider input[type='range']::-webkit-slider-thumb {\n appearance: none;\n background: linear-gradient(145deg, white, #dbe5f7);\n border: 1px solid rgba(255, 255, 255, 0.8);\n border-radius: 50%;\n box-shadow: 0 4px 12px rgba(3, 8, 22, 0.4);\n height: 21px;\n margin-top: -8px;\n transform: scale(var(--lq-thumb-sx, 1), var(--lq-thumb-sy, 1));\n width: 21px;\n will-change: transform;\n }\n\n .lq-slider input[type='range']::-moz-range-track {\n background: rgba(255, 255, 255, 0.15);\n border-radius: 999px;\n height: 7px;\n }\n\n .lq-slider input[type='range']::-moz-range-thumb {\n background: white;\n border: 0;\n border-radius: 50%;\n box-shadow: 0 4px 12px rgba(3, 8, 22, 0.4);\n height: 21px;\n transform: scale(var(--lq-thumb-sx, 1), var(--lq-thumb-sy, 1));\n width: 21px;\n will-change: transform;\n }\n\n .lq-text-field__control {\n align-items: center;\n -webkit-backdrop-filter: saturate(1.08);\n backdrop-filter: saturate(1.08);\n background: var(--lq-field-fill);\n border: 1px solid var(--lq-field-line);\n border-radius: 12px;\n box-shadow:\n inset 0 0.75px 0 var(--lq-glass-bright),\n inset 0 -1px 0 var(--lq-glass-shade),\n 0 8px 20px color-mix(in srgb, var(--lq-shadow-color) 52%, transparent);\n display: flex;\n gap: 10px;\n min-height: 48px;\n padding: 0 15px;\n transition: background 240ms ease, border-color 240ms ease, box-shadow 240ms ease;\n }\n\n .lq-text-field__control:focus-within {\n background: var(--lq-field-focus-fill);\n border-color: color-mix(in srgb, var(--lq-accent) 32%, rgba(255, 255, 255, 0.14));\n box-shadow: 0 7px 18px color-mix(in srgb, var(--lq-accent) 7%, transparent), inset 0 0.75px 0 rgba(255, 255, 255, 0.1);\n }\n\n .lq-text-field input {\n background: transparent;\n border: 0;\n color: inherit;\n font: inherit;\n min-width: 0;\n outline: 0;\n width: 100%;\n }\n\n .lq-text-field input::placeholder {\n color: var(--lq-placeholder);\n }\n\n .lq-dock-shell {\n width: max-content;\n }\n\n .lq-dock-shell[data-position='floating'] {\n bottom: 24px;\n left: 50%;\n position: fixed;\n transform: translateX(-50%);\n z-index: 50;\n }\n\n .lq-dock {\n align-items: center;\n display: flex;\n gap: 5px;\n padding: 6px;\n position: relative;\n }\n\n .lq-dock__indicator {\n background:\n radial-gradient(circle at 30% 16%, rgba(255, 255, 255, 0.05), transparent 46%),\n color-mix(in srgb, var(--lq-accent) 2%, var(--lq-dock-indicator-fill));\n border: 1px solid var(--lq-control-line);\n border-radius: 11px;\n box-shadow:\n inset 0 0.75px 0 var(--lq-glass-bright),\n inset 0 -1px 0 var(--lq-glass-shade),\n 0 6px 16px color-mix(in srgb, var(--lq-shadow-color) 56%, transparent);\n height: 42px;\n left: 6px;\n opacity: 0;\n pointer-events: none;\n position: absolute !important;\n top: 6px;\n transform: translate3d(calc(var(--lq-dock-active-index) * 47px), 0, 0);\n transition:\n transform 680ms cubic-bezier(0.18, 1.45, 0.3, 1),\n width 480ms var(--lq-easing),\n opacity 220ms ease;\n width: 42px;\n z-index: 2 !important;\n }\n\n .lq-dock__indicator[data-visible='true'] {\n opacity: 1;\n }\n\n .lq-dock__item {\n align-items: center;\n appearance: none;\n background: transparent;\n border: 0;\n border-radius: 10px;\n color: var(--lq-muted);\n cursor: pointer;\n display: inline-flex;\n height: 42px;\n justify-content: center;\n padding: 0;\n transition: color 240ms ease, background 240ms ease, transform 300ms var(--lq-easing);\n width: 42px;\n }\n\n .lq-dock__item:hover {\n background: var(--lq-dock-hover-fill);\n color: var(--lq-dock-active);\n transform: translateY(-2px);\n }\n\n .lq-dock__item[data-active='true'] {\n color: var(--lq-dock-active);\n }\n\n /* Base UI renders the panel and the scrim as two sibling divs in a portal, so\n this is a plain fixed box rather than a with a ::backdrop. */\n .lq-dialog {\n color: inherit;\n left: 50%;\n max-width: min(520px, calc(100vw - 32px));\n position: fixed;\n top: 50%;\n /* Centring uses `translate` so the keyframes below keep `transform` to\n themselves — the two properties compose instead of overwriting. */\n translate: -50% -50%;\n width: 100%;\n z-index: 80;\n }\n\n .lq-dialog__backdrop {\n -webkit-backdrop-filter: blur(7px) saturate(0.86);\n backdrop-filter: blur(7px) saturate(0.86);\n background: rgba(2, 5, 16, 0.42);\n inset: 0;\n position: fixed;\n transition: opacity 320ms ease;\n z-index: 79;\n }\n\n .lq-dialog__backdrop[data-starting-style],\n .lq-dialog__backdrop[data-ending-style] {\n opacity: 0;\n }\n\n .lq-dialog[data-open] {\n animation: lq-dialog-in 620ms cubic-bezier(0.16, 1.35, 0.3, 1) both;\n }\n\n /* Base UI keeps the popup mounted until this finishes, then unmounts it. */\n .lq-dialog[data-closed] {\n animation: lq-dialog-out 300ms cubic-bezier(0.5, 0, 0.4, 1) both;\n }\n\n @keyframes lq-dialog-out {\n from {\n opacity: 1;\n transform: scale(1);\n }\n\n to {\n opacity: 0;\n transform: translateY(14px) scale(0.94);\n }\n }\n\n .lq-dialog__surface {\n padding: 26px;\n }\n\n .lq-dialog__header {\n align-items: flex-start;\n display: flex;\n gap: 20px;\n justify-content: space-between;\n position: relative;\n z-index: 3;\n }\n\n .lq-dialog__header h2 {\n font-size: 1.35rem;\n letter-spacing: -0.035em;\n margin: 0;\n }\n\n .lq-dialog__header p {\n color: var(--lq-muted);\n line-height: 1.55;\n margin: 8px 0 0;\n }\n\n .lq-dialog__body {\n margin-top: 24px;\n position: relative;\n z-index: 3;\n }\n\n /* Action row — Delete/Cancel and friends sit at the trailing edge. */\n .lq-dialog__footer {\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n justify-content: flex-end;\n margin-top: 22px;\n }\n\n @keyframes lq-dialog-in {\n from {\n opacity: 0;\n transform: translateY(30px) scaleX(0.9) scaleY(0.82);\n }\n\n 42% {\n opacity: 1;\n transform: translateY(-5px) scaleX(1.035) scaleY(1.06);\n }\n\n 64% {\n transform: translateY(2px) scaleX(0.985) scaleY(0.965);\n }\n\n 82% {\n transform: translateY(-1px) scaleX(1.008) scaleY(1.014);\n }\n\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n }\n\n @keyframes lq-switch-thumb-on {\n 0% {\n scale: 1;\n }\n\n 26% {\n scale: 1.38 0.68;\n }\n\n 52% {\n scale: 0.82 1.22;\n }\n\n 74% {\n scale: 1.1 0.92;\n }\n\n 88% {\n scale: 0.96 1.05;\n }\n\n 100% {\n scale: 1;\n }\n }\n\n @keyframes lq-switch-thumb-off {\n 0% {\n scale: 1;\n }\n\n 26% {\n scale: 1.38 0.68;\n }\n\n 52% {\n scale: 0.82 1.22;\n }\n\n 74% {\n scale: 1.1 0.92;\n }\n\n 88% {\n scale: 0.96 1.05;\n }\n\n 100% {\n scale: 1;\n }\n }\n\n /* Shared squash-and-stretch \"purun\" — two identical names so toggling a\n control's state swaps the animation-name and replays it every time. */\n @keyframes lq-jelly-pop {\n 0% {\n scale: 1;\n }\n\n 28% {\n scale: 1.24 0.78;\n }\n\n 54% {\n scale: 0.86 1.16;\n }\n\n 76% {\n scale: 1.07 0.95;\n }\n\n 90% {\n scale: 0.98 1.02;\n }\n\n 100% {\n scale: 1;\n }\n }\n\n @keyframes lq-jelly-pop-off {\n 0% {\n scale: 1;\n }\n\n 28% {\n scale: 1.24 0.78;\n }\n\n 54% {\n scale: 0.86 1.16;\n }\n\n 76% {\n scale: 1.07 0.95;\n }\n\n 90% {\n scale: 0.98 1.02;\n }\n\n 100% {\n scale: 1;\n }\n }\n\n @media (prefers-color-scheme: light) {\n .lq-provider[data-liquid-theme='system'] {\n --lq-clear-fill: transparent;\n --lq-clear-line: rgba(66, 85, 128, 0.22);\n --lq-control-fill: transparent;\n --lq-control-line: rgba(66, 85, 128, 0.24);\n --lq-control-hover-line: color-mix(in srgb, var(--lq-button-tint, var(--lq-accent)) 28%, rgba(255, 255, 255, 0.18));\n --lq-dock-active: #17203a;\n --lq-dock-hover-fill: rgba(255, 255, 255, 0.015);\n --lq-dock-indicator-fill: transparent;\n --lq-field-fill: transparent;\n --lq-field-focus-fill: color-mix(in srgb, var(--lq-accent) 1.5%, transparent);\n --lq-field-line: rgba(66, 85, 128, 0.24);\n --lq-foreground: #12182a;\n --lq-glass-bright: rgba(255, 255, 255, 0.56);\n --lq-glass-shade: rgba(62, 91, 164, 0.07);\n --lq-glass-soft: rgba(255, 255, 255, 0.16);\n --lq-muted: rgba(26, 35, 58, 0.62);\n --lq-placeholder: rgba(28, 40, 68, 0.42);\n --lq-quiet-fill: transparent;\n --lq-quiet-line: rgba(66, 85, 128, 0.16);\n --lq-regular-fill: rgba(255, 255, 255, 0.015);\n --lq-regular-line: rgba(66, 85, 128, 0.26);\n --lq-shadow-color: rgba(42, 55, 91, 0.1);\n --lq-solid-fill: rgb(239, 244, 255);\n --lq-switch-fill: transparent;\n --lq-switch-line: rgba(66, 85, 128, 0.24);\n color: var(--lq-foreground);\n color-scheme: light;\n }\n }\n\n .lq-provider[data-liquid-motion='off'] .lq-surface,\n .lq-provider[data-liquid-motion='off'] .lq-button,\n .lq-provider[data-liquid-motion='off'] .lq-switch,\n .lq-provider[data-liquid-motion='off'] .lq-switch::before,\n .lq-provider[data-liquid-motion='off'] .lq-switch__thumb,\n .lq-provider[data-liquid-motion='off'] .lq-checkbox__box,\n .lq-provider[data-liquid-motion='off'] .lq-radio__control,\n .lq-provider[data-liquid-motion='off'] .lq-segmented__indicator,\n .lq-provider[data-liquid-motion='off'] .lq-tab-panel,\n .lq-provider[data-liquid-motion='off'] .lq-pagination__item,\n .lq-provider[data-liquid-motion='off'] .lq-accordion__content-inner,\n .lq-provider[data-liquid-motion='off'] .lq-dock__item,\n .lq-provider[data-liquid-motion='off'] .lq-dialog[data-open] {\n animation: none;\n transition-duration: 0.01ms;\n }\n\n .lq-provider[data-liquid-transparency='off'] .lq-surface,\n .lq-provider[data-liquid-transparency='off'] .lq-button,\n .lq-provider[data-liquid-transparency='off'] .lq-switch,\n .lq-provider[data-liquid-transparency='off'] .lq-text-field__control {\n -webkit-backdrop-filter: none;\n backdrop-filter: none;\n background: var(--lq-solid-fill);\n }\n\n .lq-provider[data-liquid-transparency='off'] .lq-surface__shader,\n .lq-provider[data-liquid-transparency='off'] .lq-surface__edge {\n display: none;\n }\n}\n\n@layer liquefy-ui {\n /* ---------- Popover base (Select, Menu) ---------- */\n /* var() fallbacks keep the popover legible even in the rare frame where it\n portals outside a provider (before the container ref resolves). */\n /* The stacking order every overlay in the library shares. Each layer portals\n into the provider's node as a sibling of the others, so nesting in the JSX\n buys nothing — this ladder is the only thing deciding what covers what, and\n a popover opened from inside a dialog has to outrank the dialog itself:\n\n 50 floating dock\n 79 dialog and drawer backdrop\n 80 dialog and drawer panel\n 85 popover layer — select and menu\n 88 tooltip\n 90 toast viewport */\n .lq-popover {\n -webkit-backdrop-filter: blur(14px) saturate(1.5) brightness(1.04);\n backdrop-filter: blur(14px) saturate(1.5) brightness(1.04);\n background: color-mix(in srgb, var(--lq-solid-fill, rgb(30, 38, 60)) 72%, transparent);\n border: 1px solid var(--lq-regular-line, rgba(255, 255, 255, 0.18));\n border-radius: 14px;\n box-shadow:\n 0 18px 44px var(--lq-shadow-color, rgba(4, 9, 24, 0.28)),\n inset 0 1px 0 var(--lq-glass-bright, rgba(255, 255, 255, 0.32)),\n inset 0 -1px 0 var(--lq-glass-shade, rgba(73, 111, 209, 0.07));\n padding: 5px;\n z-index: 85;\n animation: lq-popover-in 420ms cubic-bezier(0.16, 1.35, 0.3, 1) both;\n }\n\n /* Base UI holds the popup in the DOM for as long as this runs, so the popover\n gets a real exit instead of vanishing on the frame the state flips. */\n .lq-popover[data-closed] {\n animation: lq-popover-out 190ms cubic-bezier(0.5, 0, 0.4, 1) both;\n }\n\n @keyframes lq-popover-out {\n from {\n opacity: 1;\n transform: scale(1);\n }\n\n to {\n opacity: 0;\n transform: translateY(-4px) scale(0.97);\n }\n }\n\n @keyframes lq-popover-in {\n from {\n opacity: 0;\n transform: translateY(-6px) scale(0.96);\n }\n\n 60% {\n opacity: 1;\n transform: translateY(2px) scale(1.008);\n }\n\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n }\n\n /* A panel that covers the page has to carry the legibility the page was\n giving it. Both surfaces are `clear`, which leaves whatever is behind them\n in full view — passable for a dialog floating over a dimmed desktop page,\n unreadable on a phone, where a drawer is most of the screen and the backdrop\n it dims is a sliver.\n\n Thick glass rather than a sheet of paper: the blur is what makes the panel\n readable, and the fill stays light enough that what is behind still moves\n and colours through it. The lens matches this blur in the browsers that have\n one — see `lensBlur` on both components. Set `transparency={false}` on the\n provider for a panel with no glass at all. */\n .lq-surface.lq-dialog__surface,\n .lq-surface.lq-drawer__surface {\n --lq-blur: 20px;\n --lq-saturate: 1.7;\n --lq-brighten: 1.06;\n --lq-glow: 0.5;\n --lq-fill: color-mix(in srgb, var(--lq-solid-fill) 58%, transparent);\n }\n\n /* ---------- Checkbox ---------- */\n .lq-checkbox {\n align-items: flex-start;\n cursor: pointer;\n display: inline-flex;\n gap: 11px;\n }\n\n .lq-checkbox[data-disabled='true'] {\n cursor: not-allowed;\n opacity: 0.45;\n }\n\n .lq-checkbox__box {\n appearance: none;\n align-items: center;\n -webkit-backdrop-filter: saturate(1.08);\n backdrop-filter: saturate(1.08);\n background: var(--lq-control-fill);\n border: 1px solid var(--lq-control-line);\n border-radius: 7px;\n box-shadow:\n inset 0 0.75px 0 var(--lq-glass-bright),\n inset 0 -1px 0 var(--lq-glass-shade);\n color: #fff;\n cursor: inherit;\n display: inline-flex;\n flex: 0 0 auto;\n height: 22px;\n justify-content: center;\n overflow: hidden;\n padding: 0;\n transition: background 260ms ease, border-color 260ms ease, box-shadow 260ms ease;\n width: 22px;\n }\n\n .lq-checkbox__box[data-interacted='true'][data-checked='true'],\n .lq-checkbox__box[data-interacted='true'][data-checked='mixed'] {\n animation: lq-jelly-pop 620ms cubic-bezier(0.2, 0.9, 0.25, 1);\n }\n\n .lq-checkbox__box[data-interacted='true'][data-checked='false'] {\n animation: lq-jelly-pop-off 620ms cubic-bezier(0.2, 0.9, 0.25, 1);\n }\n\n .lq-checkbox__box:focus-visible {\n outline: 2px solid color-mix(in srgb, var(--lq-accent) 72%, white);\n outline-offset: 3px;\n }\n\n .lq-checkbox__box[data-checked='true'],\n .lq-checkbox__box[data-checked='mixed'] {\n background: color-mix(in srgb, var(--lq-accent) 26%, transparent);\n border-color: color-mix(in srgb, var(--lq-accent) 58%, rgba(255, 255, 255, 0.2));\n box-shadow:\n 0 4px 12px color-mix(in srgb, var(--lq-accent) 16%, transparent),\n inset 0 0.75px 0 rgba(255, 255, 255, 0.28);\n }\n\n .lq-checkbox__mark {\n display: inline-flex;\n opacity: 0;\n position: relative;\n scale: 0.4;\n transition: opacity 200ms ease, scale 480ms cubic-bezier(0.18, 1.5, 0.3, 1);\n z-index: 3;\n }\n\n .lq-checkbox__box[data-checked='true'] .lq-checkbox__mark,\n .lq-checkbox__box[data-checked='mixed'] .lq-checkbox__mark {\n opacity: 1;\n scale: 1;\n }\n\n .lq-checkbox__copy,\n .lq-radio__copy {\n display: grid;\n gap: 3px;\n padding-top: 1px;\n }\n\n /* ---------- Radio ---------- */\n .lq-radio-group {\n display: flex;\n flex-direction: column;\n gap: 12px;\n }\n\n .lq-radio-group[data-orientation='horizontal'] {\n flex-direction: row;\n flex-wrap: wrap;\n gap: 18px;\n }\n\n .lq-radio {\n align-items: flex-start;\n cursor: pointer;\n display: inline-flex;\n gap: 11px;\n }\n\n .lq-radio[data-disabled='true'] {\n cursor: not-allowed;\n opacity: 0.45;\n }\n\n .lq-radio__control {\n appearance: none;\n align-items: center;\n -webkit-backdrop-filter: saturate(1.08);\n backdrop-filter: saturate(1.08);\n background: var(--lq-control-fill);\n border: 1px solid var(--lq-control-line);\n border-radius: 50%;\n box-shadow:\n inset 0 0.75px 0 var(--lq-glass-bright),\n inset 0 -1px 0 var(--lq-glass-shade);\n cursor: inherit;\n display: inline-flex;\n flex: 0 0 auto;\n height: 22px;\n justify-content: center;\n overflow: hidden;\n padding: 0;\n transition: border-color 260ms ease, box-shadow 260ms ease;\n width: 22px;\n }\n\n .lq-radio__control[data-interacted='true'][data-checked='true'] {\n animation: lq-jelly-pop 620ms cubic-bezier(0.2, 0.9, 0.25, 1);\n }\n\n .lq-radio__control:focus-visible {\n outline: 2px solid color-mix(in srgb, var(--lq-accent) 72%, white);\n outline-offset: 3px;\n }\n\n .lq-radio__control[data-checked='true'] {\n border-color: color-mix(in srgb, var(--lq-accent) 58%, rgba(255, 255, 255, 0.2));\n box-shadow:\n 0 4px 12px color-mix(in srgb, var(--lq-accent) 14%, transparent),\n inset 0 0.75px 0 rgba(255, 255, 255, 0.24);\n }\n\n .lq-radio__dot {\n background: color-mix(in srgb, var(--lq-accent) 78%, white);\n border-radius: 50%;\n box-shadow: 0 1px 4px color-mix(in srgb, var(--lq-accent) 32%, transparent);\n height: 10px;\n opacity: 0;\n position: relative;\n scale: 0.3;\n transition: opacity 200ms ease, scale 480ms cubic-bezier(0.18, 1.5, 0.3, 1);\n width: 10px;\n z-index: 3;\n }\n\n .lq-radio__control[data-checked='true'] .lq-radio__dot {\n opacity: 1;\n scale: 1;\n }\n\n /* ---------- Select ---------- */\n .lq-select {\n display: grid;\n gap: 8px;\n position: relative;\n }\n\n .lq-select__trigger {\n align-items: center;\n appearance: none;\n -webkit-backdrop-filter: saturate(1.08);\n backdrop-filter: saturate(1.08);\n background: var(--lq-field-fill);\n border: 1px solid var(--lq-field-line);\n border-radius: 12px;\n box-shadow:\n inset 0 0.75px 0 var(--lq-glass-bright),\n inset 0 -1px 0 var(--lq-glass-shade),\n 0 8px 20px color-mix(in srgb, var(--lq-shadow-color) 52%, transparent);\n color: inherit;\n cursor: pointer;\n display: flex;\n font: inherit;\n gap: 10px;\n justify-content: space-between;\n min-height: 48px;\n /* A flat 200px cannot be honoured by a trigger in a narrower column — three\n filters side by side on a phone — and the overflow reads as neighbouring\n selects overlapping rather than as a width problem. Capping the floor at\n the container keeps the 200px comfortable default wherever there is room\n for it. A parent sized by its own content (`fit-content`, a table cell)\n gives the percentage nothing definite to resolve against, so the trigger\n measures its content there rather than the 200px. */\n min-width: min(200px, 100%);\n overflow: hidden;\n padding: 0 15px;\n text-align: left;\n transition: background 240ms ease, border-color 240ms ease, box-shadow 240ms ease;\n }\n\n .lq-select__value {\n overflow: hidden;\n position: relative;\n text-overflow: ellipsis;\n white-space: nowrap;\n z-index: 3;\n }\n\n .lq-select__trigger:focus-visible {\n outline: 2px solid color-mix(in srgb, var(--lq-accent) 72%, white);\n outline-offset: 3px;\n }\n\n .lq-select__trigger[data-popup-open] {\n background: var(--lq-field-focus-fill);\n border-color: color-mix(in srgb, var(--lq-accent) 32%, rgba(255, 255, 255, 0.14));\n }\n\n .lq-select__trigger[data-placeholder] .lq-select__value {\n color: var(--lq-placeholder);\n }\n\n .lq-select__trigger[data-disabled] {\n cursor: not-allowed;\n opacity: 0.45;\n }\n\n .lq-select__chevron {\n color: var(--lq-muted);\n display: inline-flex;\n flex: 0 0 auto;\n position: relative;\n transition: rotate 380ms cubic-bezier(0.18, 1.4, 0.3, 1);\n z-index: 3;\n }\n\n .lq-select__trigger[data-popup-open] .lq-select__chevron {\n rotate: 180deg;\n }\n\n .lq-select__positioner {\n z-index: 85;\n }\n\n .lq-select__listbox {\n max-height: min(320px, var(--available-height));\n /* Matches the trigger without measuring it in JS. */\n min-width: var(--anchor-width);\n overflow: auto;\n transform-origin: var(--transform-origin);\n }\n\n .lq-select__option {\n align-items: center;\n border-radius: 9px;\n cursor: pointer;\n display: flex;\n font-size: 0.88rem;\n gap: 10px;\n justify-content: space-between;\n min-height: 38px;\n padding: 0 11px;\n transition: background 160ms ease;\n }\n\n .lq-select__option[data-highlighted] {\n background: color-mix(in srgb, var(--lq-accent) 14%, transparent);\n }\n\n .lq-select__option[data-selected] {\n color: color-mix(in srgb, var(--lq-accent) 60%, var(--lq-foreground));\n font-weight: 650;\n }\n\n .lq-select__option[data-disabled] {\n cursor: not-allowed;\n opacity: 0.4;\n }\n\n /* ---------- TextArea ---------- */\n .lq-textarea__control {\n padding: 12px 15px;\n }\n\n .lq-textarea textarea {\n background: transparent;\n border: 0;\n color: inherit;\n font: inherit;\n line-height: 1.55;\n min-width: 0;\n outline: 0;\n resize: vertical;\n width: 100%;\n }\n\n .lq-textarea textarea::placeholder {\n color: var(--lq-placeholder);\n }\n\n /* ---------- Icon button ---------- */\n .lq-icon-button {\n padding: 0 !important;\n }\n\n .lq-icon-button[data-liquid-size='sm'] {\n height: 36px;\n min-height: 36px;\n width: 36px;\n }\n\n .lq-icon-button[data-liquid-size='md'] {\n height: 46px;\n min-height: 46px;\n width: 46px;\n }\n\n .lq-icon-button[data-liquid-size='lg'] {\n height: 56px;\n min-height: 56px;\n width: 56px;\n }\n\n .lq-icon-button[data-liquid-shape='circle'] {\n --lq-button-radius: 999px;\n }\n\n /* ---------- Segmented ---------- */\n .lq-segmented {\n -webkit-backdrop-filter: saturate(1.08);\n backdrop-filter: saturate(1.08);\n background: var(--lq-control-fill);\n border: 1px solid var(--lq-control-line);\n border-radius: 13px;\n box-shadow:\n inset 0 0.75px 0 var(--lq-glass-bright),\n inset 0 -1px 0 var(--lq-glass-shade);\n display: inline-grid;\n grid-auto-columns: 1fr;\n grid-auto-flow: column;\n padding: 4px;\n position: relative;\n }\n\n .lq-segmented__indicator {\n background: color-mix(in srgb, var(--lq-accent) 14%, rgba(255, 255, 255, 0.05));\n border: 1px solid color-mix(in srgb, var(--lq-accent) 36%, rgba(255, 255, 255, 0.14));\n border-radius: 9px;\n box-shadow:\n 0 5px 14px color-mix(in srgb, var(--lq-shadow-color) 56%, transparent),\n inset 0 0.75px 0 var(--lq-glass-bright);\n height: calc(100% - 8px);\n left: 4px;\n pointer-events: none;\n position: absolute;\n top: 4px;\n transform: translateX(calc(var(--lq-segment-index) * 100%));\n transition: transform 560ms cubic-bezier(0.18, 1.35, 0.3, 1);\n width: calc((100% - 8px) / var(--lq-segment-count));\n }\n\n .lq-segmented__item {\n align-items: center;\n appearance: none;\n background: transparent;\n border: 0;\n border-radius: 9px;\n color: var(--lq-muted);\n cursor: pointer;\n display: inline-flex;\n font: inherit;\n font-size: 0.85rem;\n font-weight: 650;\n gap: 7px;\n justify-content: center;\n min-height: 36px;\n padding: 0 16px;\n position: relative;\n transition: color 240ms ease;\n white-space: nowrap;\n z-index: 1;\n }\n\n .lq-segmented[data-liquid-size='sm'] .lq-segmented__item {\n font-size: 0.78rem;\n min-height: 29px;\n padding: 0 12px;\n }\n\n .lq-segmented__item[data-active='true'] {\n color: var(--lq-foreground);\n }\n\n .lq-segmented__item:disabled {\n cursor: not-allowed;\n opacity: 0.4;\n }\n\n .lq-segmented__item:focus-visible {\n outline: 2px solid color-mix(in srgb, var(--lq-accent) 72%, white);\n outline-offset: 2px;\n }\n\n .lq-segmented__icon {\n display: inline-flex;\n }\n\n /* ---------- Rating ---------- */\n .lq-rating {\n display: inline-flex;\n gap: 3px;\n }\n\n .lq-rating__star {\n appearance: none;\n background: transparent;\n border: 0;\n border-radius: 6px;\n color: color-mix(in srgb, var(--lq-foreground) 24%, transparent);\n cursor: pointer;\n display: inline-flex;\n padding: 2px;\n transition: color 200ms ease, scale 320ms cubic-bezier(0.18, 1.5, 0.3, 1);\n }\n\n .lq-rating[data-read-only='true'] .lq-rating__star {\n cursor: default;\n }\n\n .lq-rating__star[data-active='true'] {\n color: #f6c344;\n filter: drop-shadow(0 2px 6px rgba(246, 195, 68, 0.35));\n }\n\n .lq-rating:not([data-read-only='true']) .lq-rating__star:hover {\n scale: 1.18;\n }\n\n .lq-rating__star:focus-visible {\n outline: 2px solid color-mix(in srgb, var(--lq-accent) 72%, white);\n outline-offset: 2px;\n }\n\n /* ---------- Badge ---------- */\n .lq-badge {\n display: inline-flex;\n position: relative;\n }\n\n .lq-badge__indicator {\n align-items: center;\n background: color-mix(in srgb, var(--lq-badge-tint, #ff5d73) 88%, white);\n border: 1.5px solid color-mix(in srgb, var(--lq-solid-fill) 80%, transparent);\n border-radius: 999px;\n box-shadow: 0 3px 8px color-mix(in srgb, var(--lq-badge-tint, #ff5d73) 30%, transparent);\n color: #fff;\n display: inline-flex;\n font-size: 0.62rem;\n font-weight: 750;\n justify-content: center;\n letter-spacing: 0.01em;\n line-height: 1;\n min-width: 18px;\n padding: 3px 5px;\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(40%, -40%);\n z-index: 4;\n }\n\n .lq-badge__indicator[data-dot='true'] {\n height: 10px;\n min-width: 10px;\n padding: 0;\n width: 10px;\n }\n\n /* ---------- Chip ---------- */\n .lq-chip {\n align-items: center;\n appearance: none;\n -webkit-backdrop-filter: saturate(1.08);\n backdrop-filter: saturate(1.08);\n background: color-mix(in srgb, var(--lq-chip-tint, var(--lq-accent)) 1.4%, transparent);\n border: 1px solid color-mix(in srgb, var(--lq-chip-tint, var(--lq-accent)) 22%, rgba(255, 255, 255, 0.1));\n border-radius: 999px;\n box-shadow:\n inset 0 0.75px 0 var(--lq-glass-bright),\n inset 0 -1px 0 var(--lq-glass-shade);\n color: inherit;\n display: inline-flex;\n font: inherit;\n font-size: 0.82rem;\n font-weight: 600;\n gap: 7px;\n min-height: 32px;\n padding: 0 13px;\n transition: background 220ms ease, border-color 220ms ease;\n }\n\n .lq-chip[data-liquid-size='sm'] {\n font-size: 0.74rem;\n gap: 5px;\n min-height: 26px;\n padding: 0 10px;\n }\n\n .lq-chip[data-liquid-variant='tinted'] {\n background: color-mix(in srgb, var(--lq-chip-tint, var(--lq-accent)) 14%, transparent);\n border-color: color-mix(in srgb, var(--lq-chip-tint, var(--lq-accent)) 38%, rgba(255, 255, 255, 0.12));\n }\n\n .lq-chip[data-interactive='true'] {\n cursor: pointer;\n }\n\n .lq-chip[data-interactive='true']:hover {\n background: color-mix(in srgb, var(--lq-chip-tint, var(--lq-accent)) 10%, transparent);\n }\n\n .lq-chip[data-selected='true'] {\n background: color-mix(in srgb, var(--lq-chip-tint, var(--lq-accent)) 20%, transparent);\n border-color: color-mix(in srgb, var(--lq-chip-tint, var(--lq-accent)) 52%, rgba(255, 255, 255, 0.16));\n }\n\n .lq-chip:focus-visible {\n outline: 2px solid color-mix(in srgb, var(--lq-accent) 72%, white);\n outline-offset: 2px;\n }\n\n .lq-chip__icon {\n display: inline-flex;\n }\n\n .lq-chip__delete {\n align-items: center;\n appearance: none;\n background: color-mix(in srgb, var(--lq-foreground) 10%, transparent);\n border: 0;\n border-radius: 50%;\n color: inherit;\n cursor: pointer;\n display: inline-flex;\n height: 17px;\n justify-content: center;\n margin-right: -5px;\n padding: 0;\n transition: background 180ms ease;\n width: 17px;\n }\n\n .lq-chip__delete:hover {\n background: color-mix(in srgb, #ff5d73 42%, transparent);\n color: #fff;\n }\n\n /* ---------- Avatar ---------- */\n .lq-avatar {\n align-items: center;\n background: color-mix(in srgb, var(--lq-avatar-tint, var(--lq-accent)) 22%, transparent);\n border: 1px solid color-mix(in srgb, var(--lq-avatar-tint, var(--lq-accent)) 36%, rgba(255, 255, 255, 0.14));\n border-radius: 50%;\n box-shadow:\n inset 0 0.75px 0 var(--lq-glass-bright),\n 0 4px 12px color-mix(in srgb, var(--lq-shadow-color) 50%, transparent);\n display: inline-flex;\n flex: 0 0 auto;\n justify-content: center;\n overflow: hidden;\n }\n\n .lq-avatar[data-liquid-size='sm'] {\n font-size: 0.62rem;\n height: 28px;\n width: 28px;\n }\n\n .lq-avatar[data-liquid-size='md'] {\n font-size: 0.76rem;\n height: 38px;\n width: 38px;\n }\n\n .lq-avatar[data-liquid-size='lg'] {\n font-size: 0.92rem;\n height: 50px;\n width: 50px;\n }\n\n .lq-avatar[data-liquid-size='xl'] {\n font-size: 1.15rem;\n height: 66px;\n width: 66px;\n }\n\n .lq-avatar img {\n height: 100%;\n object-fit: cover;\n width: 100%;\n }\n\n .lq-avatar__fallback {\n font-weight: 750;\n letter-spacing: 0.02em;\n }\n\n .lq-avatar-group {\n display: inline-flex;\n }\n\n .lq-avatar-group .lq-avatar {\n border: 2px solid color-mix(in srgb, var(--lq-solid-fill) 88%, transparent);\n margin-left: -9px;\n transition: translate 280ms var(--lq-easing);\n }\n\n .lq-avatar-group .lq-avatar:first-child {\n margin-left: 0;\n }\n\n .lq-avatar-group:hover .lq-avatar {\n translate: 0 -2px;\n }\n\n .lq-avatar--overflow {\n background: color-mix(in srgb, var(--lq-foreground) 14%, transparent);\n }\n\n /* ---------- Tooltip ---------- */\n .lq-tooltip {\n display: inline-flex;\n }\n\n .lq-tooltip__positioner {\n z-index: 88;\n }\n\n .lq-tooltip__bubble {\n -webkit-backdrop-filter: blur(10px) saturate(1.4);\n backdrop-filter: blur(10px) saturate(1.4);\n background: color-mix(in srgb, var(--lq-solid-fill) 62%, transparent);\n border: 1px solid var(--lq-regular-line);\n border-radius: 10px;\n box-shadow:\n 0 10px 26px var(--lq-shadow-color),\n inset 0 0.75px 0 var(--lq-glass-bright);\n font-size: 0.76rem;\n font-weight: 600;\n letter-spacing: 0;\n line-height: 1.4;\n max-width: 240px;\n padding: 7px 11px;\n pointer-events: none;\n /* The positioner places the bubble and flips it when it would run off the\n edge, so all that is left here is the grow-from-the-anchor animation. Base\n UI publishes the matching origin as --transform-origin. */\n transform-origin: var(--transform-origin);\n transition: opacity 220ms ease, scale 380ms cubic-bezier(0.18, 1.4, 0.3, 1);\n white-space: nowrap;\n }\n\n .lq-tooltip__bubble[data-starting-style],\n .lq-tooltip__bubble[data-ending-style] {\n opacity: 0;\n scale: 0.92;\n }\n\n /* ---------- Table ---------- */\n .lq-table-container {\n --lq-saturate: 1;\n --lq-brighten: 1;\n --lq-glow: 0;\n background: transparent;\n padding: 6px;\n }\n\n /* Drop the glossy diagonal rim and inset highlight so the table reads as a\n plain transparent pane instead of a reflective mirror. */\n .lq-table-container > .lq-surface__edge {\n opacity: 0.12;\n }\n\n .lq-table-container::after {\n display: none;\n }\n\n .lq-table-scroll {\n overflow-x: auto;\n }\n\n .lq-table {\n border-collapse: collapse;\n font-size: 0.87rem;\n min-width: 100%;\n }\n\n .lq-table__header-cell {\n border-bottom: 1px solid var(--lq-regular-line);\n color: var(--lq-muted);\n font-size: 0.72rem;\n font-weight: 750;\n letter-spacing: 0.08em;\n padding: 13px 16px;\n text-align: left;\n text-transform: uppercase;\n white-space: nowrap;\n }\n\n .lq-table__cell {\n border-bottom: 1px solid color-mix(in srgb, var(--lq-regular-line) 46%, transparent);\n padding: 13px 16px;\n }\n\n .lq-table[data-liquid-size='sm'] .lq-table__cell,\n .lq-table[data-liquid-size='sm'] .lq-table__header-cell {\n padding: 9px 12px;\n }\n\n .lq-table__row:last-child .lq-table__cell {\n border-bottom: 0;\n }\n\n .lq-table__cell[data-align='right'],\n .lq-table__header-cell[data-align='right'] {\n text-align: right;\n }\n\n .lq-table__cell[data-align='center'],\n .lq-table__header-cell[data-align='center'] {\n text-align: center;\n }\n\n .lq-table[data-hover='true'] .lq-table__body .lq-table__row {\n transition: background 180ms ease;\n }\n\n .lq-table[data-hover='true'] .lq-table__body .lq-table__row:hover {\n background: color-mix(in srgb, var(--lq-accent) 5%, transparent);\n }\n\n .lq-table__row[data-selected='true'] {\n background: color-mix(in srgb, var(--lq-accent) 10%, transparent);\n }\n\n /* ---------- List ---------- */\n .lq-list {\n padding: 7px;\n }\n\n .lq-list__items {\n display: grid;\n list-style: none;\n margin: 0;\n padding: 0;\n position: relative;\n z-index: 3;\n }\n\n .lq-list__item + .lq-list__item {\n border-top: 1px solid color-mix(in srgb, var(--lq-regular-line) 40%, transparent);\n }\n\n .lq-list[data-inset='true'] .lq-list__item + .lq-list__item {\n border-top: 0;\n }\n\n .lq-list__item-button,\n .lq-list__item-static {\n align-items: center;\n appearance: none;\n background: transparent;\n border: 0;\n border-radius: 11px;\n color: inherit;\n display: flex;\n font: inherit;\n gap: 13px;\n padding: 12px 13px;\n text-align: left;\n width: 100%;\n }\n\n .lq-list__item-button {\n cursor: pointer;\n transition: background 180ms ease;\n }\n\n .lq-list__item-button:hover {\n background: color-mix(in srgb, var(--lq-accent) 6%, transparent);\n }\n\n .lq-list__item-button:focus-visible {\n outline: 2px solid color-mix(in srgb, var(--lq-accent) 72%, white);\n outline-offset: -2px;\n }\n\n .lq-list__icon {\n align-items: center;\n background: color-mix(in srgb, var(--lq-accent) 12%, transparent);\n border: 1px solid color-mix(in srgb, var(--lq-accent) 22%, rgba(255, 255, 255, 0.08));\n border-radius: 9px;\n color: color-mix(in srgb, var(--lq-accent) 72%, white);\n display: inline-flex;\n flex: 0 0 auto;\n height: 34px;\n justify-content: center;\n width: 34px;\n }\n\n .lq-list__copy {\n display: grid;\n flex: 1;\n gap: 2px;\n min-width: 0;\n }\n\n .lq-list__title {\n font-size: 0.9rem;\n font-weight: 650;\n }\n\n .lq-list__description {\n color: var(--lq-muted);\n font-size: 0.78rem;\n line-height: 1.4;\n }\n\n .lq-list__end {\n color: var(--lq-muted);\n flex: 0 0 auto;\n font-size: 0.8rem;\n }\n\n .lq-list__chevron {\n color: var(--lq-muted);\n display: inline-flex;\n flex: 0 0 auto;\n }\n\n .lq-list__subheader {\n color: var(--lq-muted);\n font-size: 0.68rem;\n font-weight: 750;\n letter-spacing: 0.12em;\n padding: 12px 13px 6px;\n text-transform: uppercase;\n }\n\n /* ---------- Divider ---------- */\n .lq-divider {\n align-items: center;\n border: 0;\n display: flex;\n gap: 14px;\n margin: 4px 0;\n }\n\n .lq-divider[data-orientation='horizontal']::before,\n .lq-divider[data-orientation='horizontal']::after {\n background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--lq-foreground) 18%, transparent), transparent);\n content: '';\n flex: 1;\n height: 1px;\n }\n\n .lq-divider[data-orientation='horizontal'][data-with-label='false']::after {\n display: none;\n }\n\n .lq-divider[data-orientation='vertical'] {\n align-self: stretch;\n margin: 0 4px;\n width: 1px;\n }\n\n .lq-divider[data-orientation='vertical']::before {\n background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--lq-foreground) 18%, transparent), transparent);\n content: '';\n flex: 1;\n width: 1px;\n }\n\n .lq-divider__label {\n color: var(--lq-muted);\n font-size: 0.72rem;\n font-weight: 700;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n white-space: nowrap;\n }\n\n /* ---------- Progress ---------- */\n .lq-progress {\n display: grid;\n gap: 8px;\n min-width: 160px;\n }\n\n .lq-progress__meta {\n align-items: baseline;\n display: flex;\n justify-content: space-between;\n }\n\n .lq-progress__value {\n color: var(--lq-muted);\n font-size: 0.75rem;\n font-variant-numeric: tabular-nums;\n font-weight: 700;\n }\n\n .lq-progress__track {\n -webkit-backdrop-filter: saturate(1.08);\n backdrop-filter: saturate(1.08);\n background: color-mix(in srgb, var(--lq-foreground) 7%, transparent);\n border: 1px solid var(--lq-control-line);\n border-radius: 999px;\n box-shadow: inset 0 1px 2px rgba(3, 8, 22, 0.14);\n display: block;\n height: 9px;\n overflow: hidden;\n position: relative;\n }\n\n .lq-progress__fill {\n animation:\n lq-progress-glow 2s ease-in-out infinite,\n lq-progress-liquid 2.6s linear infinite;\n /* A wide tri-stop gradient scrolled left forever, so the fill looks like a\n living body of tinted liquid rather than a flat bar. */\n background: linear-gradient(\n 90deg,\n color-mix(in srgb, var(--lq-progress-tint, var(--lq-accent)) 90%, white 4%),\n color-mix(in srgb, var(--lq-progress-tint, var(--lq-accent)) 52%, white 36%),\n color-mix(in srgb, var(--lq-progress-tint, var(--lq-accent)) 90%, white 4%)\n );\n background-size: 220% 100%;\n border-radius: inherit;\n bottom: 0;\n display: block;\n left: 0;\n overflow: hidden;\n position: absolute;\n top: 0;\n /* Overshoot easing makes the bar bounce as it lands on a new value. */\n transition: width 720ms cubic-bezier(0.34, 1.7, 0.5, 1);\n width: calc(var(--lq-progress) * 100%);\n }\n\n /* A bright liquid glint forever flowing left-to-right along the fill. */\n .lq-progress__fill::after {\n animation: lq-progress-flow 1.9s linear infinite;\n background: linear-gradient(\n 100deg,\n transparent 12%,\n rgba(255, 255, 255, 0.62) 48%,\n rgba(255, 255, 255, 0.28) 60%,\n transparent 86%\n );\n content: '';\n inset: 0;\n position: absolute;\n }\n\n /* A rounded meniscus that bobs at the leading edge of the liquid. */\n .lq-progress__fill::before {\n animation: lq-progress-bob 1.6s ease-in-out infinite;\n background: radial-gradient(\n 120% 150% at 100% 50%,\n color-mix(in srgb, var(--lq-progress-tint, var(--lq-accent)) 30%, white 60%),\n transparent 60%\n );\n border-radius: inherit;\n content: '';\n inset: 0;\n position: absolute;\n z-index: 1;\n }\n\n .lq-progress__track[data-indeterminate='true'] .lq-progress__fill {\n animation:\n lq-progress-slide 1.5s cubic-bezier(0.65, 0, 0.35, 1) infinite,\n lq-progress-squish 1.5s ease-in-out infinite;\n transform-origin: center;\n width: 38%;\n }\n\n @keyframes lq-progress-slide {\n from {\n left: -45%;\n }\n\n to {\n left: 108%;\n }\n }\n\n @keyframes lq-progress-squish {\n 0%,\n 100% {\n scale: 1 1;\n }\n\n 30% {\n scale: 1.35 0.72;\n }\n\n 60% {\n scale: 0.82 1.2;\n }\n\n 80% {\n scale: 1.08 0.94;\n }\n }\n\n @keyframes lq-progress-glow {\n 0%,\n 100% {\n box-shadow: 0 0 9px color-mix(in srgb, var(--lq-progress-tint, var(--lq-accent)) 34%, transparent);\n }\n\n 50% {\n box-shadow: 0 0 18px color-mix(in srgb, var(--lq-progress-tint, var(--lq-accent)) 60%, transparent);\n }\n }\n\n @keyframes lq-progress-flow {\n from {\n transform: translateX(-100%);\n }\n\n to {\n transform: translateX(100%);\n }\n }\n\n @keyframes lq-progress-liquid {\n from {\n background-position: 0% 50%;\n }\n\n to {\n background-position: -220% 50%;\n }\n }\n\n @keyframes lq-progress-bob {\n 0%,\n 100% {\n opacity: 0.55;\n transform: scaleX(1);\n }\n\n 50% {\n opacity: 0.9;\n transform: scaleX(1.06);\n }\n }\n\n /* ---------- Spinner ---------- */\n .lq-spinner {\n display: inline-flex;\n }\n\n .lq-spinner__track {\n stroke: color-mix(in srgb, var(--lq-foreground) 12%, transparent);\n }\n\n .lq-spinner__arc {\n stroke: color-mix(in srgb, var(--lq-spinner-tint, var(--lq-accent)) 82%, white);\n transition: stroke-dasharray 480ms var(--lq-easing);\n }\n\n /* Purun jelly spinner: the wrapper pops with a UNIFORM scale so the ring\n always stays perfectly round (no ellipse), the svg spins on its own, and\n the arc length breathes — the liquid life comes from the morphing arc, not\n from squashing the circle. */\n .lq-spinner[data-indeterminate='true'] {\n animation: lq-spinner-pop 1.4s ease-in-out infinite;\n transform-origin: center;\n }\n\n .lq-spinner[data-indeterminate='true'] svg {\n animation: lq-spinner-rotate 1.4s cubic-bezier(0.62, 0.14, 0.4, 0.86) infinite;\n transform-origin: center;\n }\n\n .lq-spinner[data-indeterminate='true'] .lq-spinner__arc {\n animation: lq-spinner-dash 1.4s ease-in-out infinite;\n transition: none;\n }\n\n @keyframes lq-spinner-rotate {\n to {\n rotate: 360deg;\n }\n }\n\n @keyframes lq-spinner-pop {\n 0%,\n 100% {\n scale: 1;\n }\n\n 30% {\n scale: 1.12;\n }\n\n 55% {\n scale: 0.92;\n }\n\n 78% {\n scale: 1.05;\n }\n }\n\n /* The arc grows and shrinks like a drawn-out liquid drip as it sweeps. */\n @keyframes lq-spinner-dash {\n 0% {\n stroke-dasharray: 12 100;\n stroke-dashoffset: 0;\n }\n\n 50% {\n stroke-dasharray: 64 100;\n stroke-dashoffset: -16;\n }\n\n 100% {\n stroke-dasharray: 12 100;\n stroke-dashoffset: -100;\n }\n }\n\n /* ---------- Skeleton ---------- */\n .lq-skeleton {\n animation:\n lq-skeleton-shimmer 1.8s ease-in-out infinite,\n lq-skeleton-breathe 2.8s ease-in-out infinite;\n background: linear-gradient(\n 100deg,\n color-mix(in srgb, var(--lq-foreground) 7%, transparent) 38%,\n color-mix(in srgb, var(--lq-accent) 14%, color-mix(in srgb, var(--lq-foreground) 16%, transparent)) 50%,\n color-mix(in srgb, var(--lq-foreground) 7%, transparent) 62%\n );\n background-size: 260% 100%;\n border-radius: 7px;\n display: block;\n overflow: hidden;\n position: relative;\n transform-origin: center;\n }\n\n /* A brighter tinted glint slides across on a different cadence, so the two\n sweeps interfere into a flowing-liquid surface. */\n .lq-skeleton::after {\n animation: lq-skeleton-flow 2.4s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n background: linear-gradient(\n 100deg,\n transparent 30%,\n color-mix(in srgb, var(--lq-accent) 24%, rgba(255, 255, 255, 0.5)) 50%,\n transparent 70%\n );\n border-radius: inherit;\n content: '';\n inset: 0;\n position: absolute;\n transform: translateX(-100%);\n }\n\n .lq-skeleton[data-liquid-variant='text'] {\n height: 0.95em;\n width: 100%;\n }\n\n .lq-skeleton[data-liquid-variant='circular'] {\n border-radius: 50%;\n height: 40px;\n width: 40px;\n }\n\n .lq-skeleton[data-liquid-variant='rectangular'] {\n border-radius: 12px;\n height: 90px;\n width: 100%;\n }\n\n @keyframes lq-skeleton-shimmer {\n from {\n background-position: 130% 0;\n }\n\n to {\n background-position: -110% 0;\n }\n }\n\n /* Gentle gel breathing so the placeholder feels like a soft body of liquid. */\n @keyframes lq-skeleton-breathe {\n 0%,\n 100% {\n opacity: 1;\n scale: 1 1;\n }\n\n 50% {\n opacity: 0.7;\n scale: 1.008 0.92;\n }\n }\n\n @keyframes lq-skeleton-flow {\n to {\n transform: translateX(120%);\n }\n }\n\n /* ---------- Alert ---------- */\n .lq-alert {\n --lq-alert-tint: #7fb2ff;\n align-items: flex-start;\n -webkit-backdrop-filter: blur(6px) saturate(1.4);\n backdrop-filter: blur(6px) saturate(1.4);\n background: color-mix(in srgb, var(--lq-alert-tint) 6%, transparent);\n border: 1px solid color-mix(in srgb, var(--lq-alert-tint) 32%, rgba(255, 255, 255, 0.1));\n border-radius: 15px;\n box-shadow:\n 0 10px 26px color-mix(in srgb, var(--lq-shadow-color) 56%, transparent),\n inset 0 0.75px 0 var(--lq-glass-bright);\n display: flex;\n gap: 12px;\n padding: 14px 16px;\n }\n\n /* Info stays neutral and see-through — no blue wash, just a faint glass edge. */\n .lq-alert[data-severity='info'] {\n background: transparent;\n border-color: var(--lq-regular-line);\n }\n\n .lq-alert[data-severity='info'] .lq-alert__icon {\n color: var(--lq-muted);\n }\n\n .lq-alert[data-severity='success'] {\n --lq-alert-tint: #4fd8a4;\n }\n\n .lq-alert[data-severity='warning'] {\n --lq-alert-tint: #f4b64f;\n }\n\n .lq-alert[data-severity='danger'] {\n --lq-alert-tint: #ff5d73;\n }\n\n .lq-alert__icon {\n color: color-mix(in srgb, var(--lq-alert-tint) 82%, white);\n display: inline-flex;\n flex: 0 0 auto;\n padding-top: 1px;\n }\n\n .lq-alert__copy {\n display: grid;\n flex: 1;\n gap: 3px;\n }\n\n .lq-alert__title {\n font-size: 0.9rem;\n letter-spacing: -0.01em;\n }\n\n .lq-alert__message {\n color: color-mix(in srgb, var(--lq-foreground) 76%, transparent);\n font-size: 0.85rem;\n line-height: 1.5;\n }\n\n .lq-alert__action {\n flex: 0 0 auto;\n }\n\n .lq-alert__close {\n appearance: none;\n background: transparent;\n border: 0;\n border-radius: 7px;\n color: var(--lq-muted);\n cursor: pointer;\n display: inline-flex;\n flex: 0 0 auto;\n padding: 4px;\n transition: background 180ms ease, color 180ms ease;\n }\n\n .lq-alert__close:hover {\n background: color-mix(in srgb, var(--lq-foreground) 10%, transparent);\n color: var(--lq-foreground);\n }\n\n /* ---------- Toast ---------- */\n .lq-toast-viewport {\n display: flex;\n flex-direction: column;\n gap: 10px;\n max-width: min(380px, calc(100vw - 32px));\n position: fixed;\n z-index: 90;\n }\n\n .lq-toast-viewport[data-placement='bottom-right'] {\n bottom: 22px;\n right: 22px;\n }\n\n .lq-toast-viewport[data-placement='bottom-center'] {\n bottom: 22px;\n left: 50%;\n transform: translateX(-50%);\n }\n\n .lq-toast-viewport[data-placement='top-right'] {\n right: 22px;\n top: 22px;\n }\n\n .lq-toast-viewport[data-placement='top-center'] {\n left: 50%;\n top: 22px;\n transform: translateX(-50%);\n }\n\n .lq-toast {\n --lq-toast-tint: #7fb2ff;\n align-items: flex-start;\n animation: lq-toast-in 560ms cubic-bezier(0.16, 1.35, 0.3, 1) both;\n -webkit-backdrop-filter: blur(16px) saturate(1.5) brightness(1.04);\n backdrop-filter: blur(16px) saturate(1.5) brightness(1.04);\n background: color-mix(in srgb, var(--lq-solid-fill) 52%, transparent);\n border: 1px solid color-mix(in srgb, var(--lq-toast-tint) 30%, rgba(255, 255, 255, 0.12));\n border-radius: 15px;\n box-shadow:\n 0 16px 40px var(--lq-shadow-color),\n inset 0 0.75px 0 var(--lq-glass-bright);\n display: flex;\n gap: 11px;\n min-width: 260px;\n padding: 13px 15px;\n }\n\n .lq-toast[data-severity='success'] {\n --lq-toast-tint: #4fd8a4;\n }\n\n .lq-toast[data-severity='warning'] {\n --lq-toast-tint: #f4b64f;\n }\n\n .lq-toast[data-severity='danger'] {\n --lq-toast-tint: #ff5d73;\n }\n\n .lq-toast[data-leaving='true'] {\n animation: lq-toast-out 340ms ease both;\n }\n\n .lq-toast__icon {\n color: color-mix(in srgb, var(--lq-toast-tint) 82%, white);\n display: inline-flex;\n flex: 0 0 auto;\n padding-top: 1px;\n }\n\n .lq-toast__copy {\n display: grid;\n flex: 1;\n gap: 2px;\n }\n\n .lq-toast__copy strong {\n font-size: 0.87rem;\n letter-spacing: -0.01em;\n }\n\n .lq-toast__copy span {\n color: color-mix(in srgb, var(--lq-foreground) 72%, transparent);\n font-size: 0.79rem;\n line-height: 1.45;\n }\n\n .lq-toast__close {\n appearance: none;\n background: transparent;\n border: 0;\n border-radius: 6px;\n color: var(--lq-muted);\n cursor: pointer;\n display: inline-flex;\n padding: 3px;\n }\n\n .lq-toast__close:hover {\n color: var(--lq-foreground);\n }\n\n @keyframes lq-toast-in {\n from {\n opacity: 0;\n transform: translateY(16px) scale(0.94);\n }\n\n 60% {\n opacity: 1;\n transform: translateY(-3px) scale(1.01);\n }\n\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n }\n\n @keyframes lq-toast-out {\n to {\n opacity: 0;\n transform: translateY(8px) scale(0.95);\n }\n }\n\n /* ---------- Tabs ---------- */\n .lq-tab-list {\n border-bottom: 1px solid color-mix(in srgb, var(--lq-regular-line) 70%, transparent);\n display: flex;\n gap: 4px;\n }\n\n .lq-tab {\n align-items: center;\n appearance: none;\n background: transparent;\n border: 0;\n border-radius: 9px 9px 0 0;\n color: var(--lq-muted);\n cursor: pointer;\n display: inline-flex;\n font: inherit;\n font-size: 0.88rem;\n font-weight: 650;\n gap: 8px;\n padding: 11px 15px;\n position: relative;\n transition: color 220ms ease;\n }\n\n .lq-tab:hover {\n color: var(--lq-foreground);\n }\n\n .lq-tab[data-active] {\n color: var(--lq-foreground);\n }\n\n .lq-tab:focus-visible {\n outline: 2px solid color-mix(in srgb, var(--lq-accent) 72%, white);\n outline-offset: -2px;\n }\n\n .lq-tab__icon {\n display: inline-flex;\n }\n\n .lq-tab__underline {\n background: linear-gradient(90deg, color-mix(in srgb, var(--lq-accent) 88%, white), color-mix(in srgb, var(--lq-accent) 52%, white 30%));\n border-radius: 3px 3px 0 0;\n bottom: -1px;\n box-shadow: 0 0 10px color-mix(in srgb, var(--lq-accent) 44%, transparent);\n height: 2.5px;\n left: 10px;\n /* Flipped by the selector below rather than by an inline style, so the tab\n itself stays stateless and Base UI's data-active drives the animation. */\n --lq-tab-active: 0;\n opacity: var(--lq-tab-active);\n position: absolute;\n right: 10px;\n scale: var(--lq-tab-active) 1;\n transform-origin: center bottom;\n transition: opacity 240ms ease, scale 440ms cubic-bezier(0.18, 1.4, 0.3, 1);\n }\n\n /* The indicator springs out with a wide jelly stretch when a tab activates. */\n .lq-tab[data-active] .lq-tab__underline {\n --lq-tab-active: 1;\n animation: lq-tab-underline 560ms cubic-bezier(0.2, 0.9, 0.25, 1);\n }\n\n @keyframes lq-tab-underline {\n 0% {\n scale: 0.15 0.5;\n }\n\n 45% {\n scale: 1.28 1.35;\n }\n\n 70% {\n scale: 0.9 0.9;\n }\n\n 100% {\n scale: 1 1;\n }\n }\n\n .lq-tab-panel {\n animation: lq-tab-panel-in 520ms cubic-bezier(0.18, 1.3, 0.3, 1) both;\n padding: 18px 4px;\n }\n\n /* Panels don't just fade — they surface out of a soft blur with a jelly\n overshoot, so switching tabs feels like content rising through liquid. */\n @keyframes lq-tab-panel-in {\n 0% {\n opacity: 0;\n filter: blur(7px);\n transform: translateY(10px) scale(0.965);\n }\n\n 55% {\n opacity: 1;\n filter: blur(0);\n transform: translateY(-3px) scale(1.012);\n }\n\n 76% {\n transform: translateY(1px) scale(0.997);\n }\n\n 100% {\n opacity: 1;\n filter: blur(0);\n transform: translateY(0) scale(1);\n }\n }\n\n /* ---------- Breadcrumbs ---------- */\n .lq-breadcrumbs ol {\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n gap: 7px;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n .lq-breadcrumbs__item {\n align-items: center;\n appearance: none;\n background: transparent;\n border: 0;\n border-radius: 7px;\n color: var(--lq-muted);\n cursor: pointer;\n display: inline-flex;\n font: inherit;\n font-size: 0.84rem;\n font-weight: 600;\n gap: 6px;\n padding: 4px 6px;\n transition: color 180ms ease, background 180ms ease;\n }\n\n a.lq-breadcrumbs__item:hover,\n button.lq-breadcrumbs__item:hover {\n background: color-mix(in srgb, var(--lq-accent) 8%, transparent);\n color: var(--lq-foreground);\n }\n\n .lq-breadcrumbs li[data-current='true'] .lq-breadcrumbs__item {\n color: var(--lq-foreground);\n cursor: default;\n font-weight: 700;\n }\n\n .lq-breadcrumbs__separator {\n color: color-mix(in srgb, var(--lq-muted) 60%, transparent);\n display: inline-flex;\n }\n\n .lq-breadcrumbs__icon {\n display: inline-flex;\n }\n\n /* ---------- Pagination ---------- */\n .lq-pagination {\n align-items: center;\n display: inline-flex;\n gap: 5px;\n }\n\n /* Each control is a small glass button carrying the shared jelly springs\n (tilt + squish + release purun) driven from JS, exactly like LiquidButton —\n so transform is left to the spring and never transitioned here. */\n .lq-pagination__item {\n align-items: center;\n appearance: none;\n -webkit-backdrop-filter: saturate(1.08);\n backdrop-filter: saturate(1.08);\n background: var(--lq-control-fill);\n border: 1px solid color-mix(in srgb, var(--lq-accent) 10%, var(--lq-control-line));\n border-radius: calc(10px + var(--lq-squish) * 4px);\n box-shadow:\n inset 0 0.75px 0 var(--lq-glass-soft),\n inset 0 -1px 0 var(--lq-glass-shade);\n color: var(--lq-muted);\n cursor: pointer;\n display: inline-flex;\n font: inherit;\n font-size: 0.85rem;\n font-variant-numeric: tabular-nums;\n font-weight: 650;\n height: 36px;\n justify-content: center;\n min-width: 36px;\n overflow: hidden;\n padding: 0 6px;\n transition:\n color 200ms ease,\n background 220ms var(--lq-easing),\n border-color 220ms var(--lq-easing),\n box-shadow 220ms var(--lq-easing);\n }\n\n .lq-pagination__item:hover:not(:disabled) {\n background: color-mix(in srgb, var(--lq-accent) 9%, transparent);\n border-color: var(--lq-control-hover-line);\n box-shadow:\n inset 0 0.75px 0 var(--lq-glass-bright),\n inset 0 -1px 0 var(--lq-glass-shade);\n color: var(--lq-foreground);\n }\n\n .lq-pagination__item[data-active='true'] {\n background: color-mix(in srgb, var(--lq-accent) 16%, transparent);\n border-color: color-mix(in srgb, var(--lq-accent) 42%, rgba(255, 255, 255, 0.14));\n box-shadow:\n 0 5px 14px color-mix(in srgb, var(--lq-accent) 14%, transparent),\n inset 0 0.75px 0 var(--lq-glass-bright);\n color: var(--lq-foreground);\n }\n\n .lq-pagination__item:disabled {\n cursor: not-allowed;\n opacity: 0.35;\n }\n\n .lq-pagination__item:focus-visible {\n outline: 2px solid color-mix(in srgb, var(--lq-accent) 72%, white);\n outline-offset: 2px;\n }\n\n .lq-pagination__ellipsis {\n color: var(--lq-muted);\n padding: 0 4px;\n }\n\n /* ---------- Menu ---------- */\n .lq-menu {\n display: inline-flex;\n }\n\n .lq-menu__positioner {\n z-index: 85;\n }\n\n /* The positioner publishes how much room is left on the chosen side, so the\n popup caps itself instead of the component measuring the viewport in JS. */\n .lq-menu__popup {\n max-height: min(360px, var(--available-height));\n min-width: 210px;\n overflow-y: auto;\n transform-origin: var(--transform-origin);\n }\n\n .lq-menu__item {\n align-items: center;\n appearance: none;\n background: transparent;\n border: 0;\n border-radius: 9px;\n color: inherit;\n cursor: pointer;\n display: flex;\n font: inherit;\n font-size: 0.86rem;\n font-weight: 550;\n gap: 10px;\n min-height: 37px;\n padding: 0 11px;\n text-align: left;\n transition: background 160ms ease;\n width: 100%;\n }\n\n .lq-menu__item[data-highlighted] {\n background: color-mix(in srgb, var(--lq-accent) 14%, transparent);\n }\n\n .lq-menu__item[data-disabled] {\n cursor: not-allowed;\n opacity: 0.4;\n }\n\n .lq-menu__item:focus-visible {\n outline: 2px solid color-mix(in srgb, var(--lq-accent) 72%, white);\n outline-offset: -2px;\n }\n\n .lq-menu__item[data-danger='true'] {\n color: #ff8296;\n }\n\n .lq-menu__item[data-danger='true'][data-highlighted] {\n background: color-mix(in srgb, #ff5d73 16%, transparent);\n }\n\n .lq-menu__icon {\n display: inline-flex;\n flex: 0 0 auto;\n }\n\n .lq-menu__label {\n flex: 1;\n }\n\n .lq-menu__shortcut {\n background: color-mix(in srgb, var(--lq-foreground) 8%, transparent);\n border: 1px solid color-mix(in srgb, var(--lq-foreground) 12%, transparent);\n border-radius: 5px;\n color: var(--lq-muted);\n font-family: ui-monospace, monospace;\n font-size: 0.66rem;\n padding: 2px 5px;\n }\n\n .lq-menu__separator {\n background: color-mix(in srgb, var(--lq-regular-line) 60%, transparent);\n height: 1px;\n margin: 5px 7px;\n }\n\n /* ---------- Drawer ---------- */\n .lq-drawer {\n color: inherit;\n height: 100dvh;\n max-height: 100dvh;\n max-width: 100vw;\n position: fixed;\n z-index: 80;\n }\n\n .lq-drawer__backdrop {\n -webkit-backdrop-filter: blur(6px) saturate(0.88);\n backdrop-filter: blur(6px) saturate(0.88);\n background: rgba(2, 5, 16, 0.4);\n inset: 0;\n position: fixed;\n transition: opacity 320ms ease;\n z-index: 79;\n }\n\n .lq-drawer__backdrop[data-starting-style],\n .lq-drawer__backdrop[data-ending-style] {\n opacity: 0;\n }\n\n .lq-drawer[data-side='right'] {\n inset: 0 0 0 auto;\n width: min(400px, 92vw);\n }\n\n .lq-drawer[data-side='left'] {\n inset: 0 auto 0 0;\n width: min(400px, 92vw);\n }\n\n .lq-drawer[data-side='bottom'] {\n display: flex;\n height: auto;\n inset: auto 0 0 0;\n max-height: 82dvh;\n width: 100vw;\n }\n\n .lq-drawer[data-open][data-side='right'] {\n animation: lq-drawer-right 560ms cubic-bezier(0.16, 1.2, 0.3, 1) both;\n }\n\n .lq-drawer[data-open][data-side='left'] {\n animation: lq-drawer-left 560ms cubic-bezier(0.16, 1.2, 0.3, 1) both;\n }\n\n .lq-drawer[data-open][data-side='bottom'] {\n animation: lq-drawer-bottom 560ms cubic-bezier(0.16, 1.2, 0.3, 1) both;\n }\n\n /* Jelly exit. data-closed and data-open never coexist, and Base UI holds the\n popup in the DOM until the animation ends, so no timer is involved. */\n .lq-drawer[data-closed][data-side='right'] {\n animation: lq-drawer-out-right 540ms cubic-bezier(0.5, 0, 0.4, 1) both;\n }\n\n .lq-drawer[data-closed][data-side='left'] {\n animation: lq-drawer-out-left 540ms cubic-bezier(0.5, 0, 0.4, 1) both;\n }\n\n .lq-drawer[data-closed][data-side='bottom'] {\n animation: lq-drawer-out-bottom 540ms cubic-bezier(0.5, 0, 0.4, 1) both;\n }\n\n .lq-drawer__surface {\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow: auto;\n overscroll-behavior: contain;\n padding: 24px;\n }\n\n /* The bottom panel is sized by `max-height` rather than `height`, so the\n percentage above resolves against an `auto` parent and collapses back to\n `auto` — the surface then grows to its content and nothing scrolls, which\n puts the end of a tall panel past the bottom of the screen. Stretching it\n as a flex item gives it the clamped height, and `min-height: 0` lets it\n become shorter than its content so `overflow` has something to do. */\n .lq-drawer[data-side='bottom'] .lq-drawer__surface {\n flex: 1;\n height: auto;\n min-height: 0;\n }\n\n .lq-drawer__header {\n align-items: center;\n display: flex;\n gap: 16px;\n justify-content: space-between;\n margin-bottom: 18px;\n position: relative;\n z-index: 3;\n }\n\n .lq-drawer__header h2 {\n font-size: 1.2rem;\n letter-spacing: -0.03em;\n margin: 0;\n }\n\n .lq-drawer__close {\n appearance: none;\n background: color-mix(in srgb, var(--lq-foreground) 7%, transparent);\n border: 1px solid var(--lq-control-line);\n border-radius: 9px;\n color: inherit;\n cursor: pointer;\n display: inline-flex;\n padding: 7px;\n transition: background 180ms ease;\n }\n\n .lq-drawer__close:hover {\n background: color-mix(in srgb, var(--lq-foreground) 13%, transparent);\n }\n\n .lq-drawer__body {\n flex: 1;\n position: relative;\n z-index: 3;\n }\n\n @keyframes lq-drawer-right {\n from {\n opacity: 0.6;\n transform: translateX(60%);\n }\n\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n\n @keyframes lq-drawer-left {\n from {\n opacity: 0.6;\n transform: translateX(-60%);\n }\n\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n\n @keyframes lq-drawer-bottom {\n from {\n opacity: 0.6;\n transform: translateY(55%);\n }\n\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes lq-drawer-out-right {\n 0% {\n opacity: 1;\n transform: translateX(0) scale(1, 1);\n }\n\n 18% {\n transform: translateX(-4%) scale(0.94, 1.05);\n }\n\n 42% {\n transform: translateX(7%) scale(1.06, 0.94);\n }\n\n 64% {\n transform: translateX(1%) scale(0.98, 1.02);\n }\n\n 100% {\n opacity: 0;\n transform: translateX(108%) scale(0.88, 1);\n }\n }\n\n @keyframes lq-drawer-out-left {\n 0% {\n opacity: 1;\n transform: translateX(0) scale(1, 1);\n }\n\n 18% {\n transform: translateX(4%) scale(0.94, 1.05);\n }\n\n 42% {\n transform: translateX(-7%) scale(1.06, 0.94);\n }\n\n 64% {\n transform: translateX(-1%) scale(0.98, 1.02);\n }\n\n 100% {\n opacity: 0;\n transform: translateX(-108%) scale(0.88, 1);\n }\n }\n\n @keyframes lq-drawer-out-bottom {\n 0% {\n opacity: 1;\n transform: translateY(0) scale(1, 1);\n }\n\n 18% {\n transform: translateY(-4%) scale(1.04, 0.94);\n }\n\n 42% {\n transform: translateY(7%) scale(0.95, 1.06);\n }\n\n 64% {\n transform: translateY(1%) scale(1.02, 0.98);\n }\n\n 100% {\n opacity: 0;\n transform: translateY(108%) scale(1, 0.88);\n }\n }\n\n /* ---------- Accordion ---------- */\n .lq-accordion {\n padding: 7px;\n }\n\n .lq-accordion__item {\n border-radius: 12px;\n position: relative;\n transition: background 260ms ease;\n z-index: 3;\n }\n\n .lq-accordion__item[data-open] {\n background: color-mix(in srgb, var(--lq-accent) 4%, transparent);\n }\n\n .lq-accordion__header {\n font: inherit;\n margin: 0;\n }\n\n .lq-accordion__item + .lq-accordion__item {\n border-top: 1px solid color-mix(in srgb, var(--lq-regular-line) 40%, transparent);\n }\n\n .lq-accordion__trigger {\n align-items: center;\n appearance: none;\n background: transparent;\n border: 0;\n border-radius: 12px;\n color: inherit;\n cursor: pointer;\n display: flex;\n font: inherit;\n gap: 14px;\n justify-content: space-between;\n padding: 15px 14px;\n text-align: left;\n width: 100%;\n }\n\n .lq-accordion__trigger:focus-visible {\n outline: 2px solid color-mix(in srgb, var(--lq-accent) 72%, white);\n outline-offset: -2px;\n }\n\n .lq-accordion__heading {\n display: grid;\n gap: 2px;\n }\n\n .lq-accordion__title {\n font-size: 0.93rem;\n font-weight: 700;\n letter-spacing: -0.015em;\n }\n\n .lq-accordion__subtitle {\n color: var(--lq-muted);\n font-size: 0.78rem;\n }\n\n .lq-accordion__chevron {\n color: var(--lq-muted);\n display: inline-flex;\n flex: 0 0 auto;\n transition: rotate 420ms cubic-bezier(0.18, 1.4, 0.3, 1);\n }\n\n .lq-accordion__item[data-open] .lq-accordion__chevron {\n rotate: 180deg;\n }\n\n /* Base UI measures the panel and publishes --accordion-panel-height, then flags\n the first and last frame of the transition. That beats the 0fr/1fr grid trick\n because it also animates on close, when the panel is on its way out. */\n .lq-accordion__content {\n height: var(--accordion-panel-height);\n overflow: hidden;\n transition: height 480ms cubic-bezier(0.22, 1, 0.36, 1);\n }\n\n .lq-accordion__content[data-starting-style],\n .lq-accordion__content[data-ending-style] {\n height: 0;\n }\n\n .lq-accordion__content-inner {\n color: color-mix(in srgb, var(--lq-foreground) 76%, transparent);\n font-size: 0.87rem;\n line-height: 1.6;\n opacity: 0;\n overflow: hidden;\n padding: 0 14px;\n transform: translateY(-8px);\n transform-origin: top center;\n transition:\n opacity 300ms ease,\n transform 520ms cubic-bezier(0.18, 1.4, 0.3, 1);\n }\n\n /* On open the panel doesn't just slide — it drops and squash-stretches out of\n the header with a purun jelly bounce. */\n .lq-accordion__item[data-open] .lq-accordion__content-inner {\n animation: lq-accordion-open 580ms cubic-bezier(0.2, 0.9, 0.25, 1);\n opacity: 1;\n padding-bottom: 16px;\n transform: translateY(0);\n }\n\n @keyframes lq-accordion-open {\n 0% {\n opacity: 0;\n transform: translateY(-10px) scaleY(0.82);\n }\n\n 55% {\n opacity: 1;\n transform: translateY(3px) scaleY(1.05);\n }\n\n 78% {\n transform: translateY(-1px) scaleY(0.99);\n }\n\n 100% {\n opacity: 1;\n transform: translateY(0) scaleY(1);\n }\n }\n}\n\n@layer liquefy-ui {\n /* ---------- Light-mode glass for data surfaces ----------\n On a light background a near-white rim just vanishes, so simply stripping\n the highlights left Table/Accordion/Card/List looking flat and washed-out\n (\"whitish\"), not glassy. Give them REAL frosted glass instead: a soft\n backdrop blur + heavy saturation pulls the tinted page through them so the\n body reads as cool glass rather than milk, and a crisp edge defines the\n pane. The lens stays off (that was the \"mirror\"), and dark mode is\n untouched. */\n .lq-provider[data-liquid-theme='light'] .lq-card,\n .lq-provider[data-liquid-theme='light'] .lq-accordion,\n .lq-provider[data-liquid-theme='light'] .lq-table-container,\n .lq-provider[data-liquid-theme='light'] .lq-list {\n --lq-blur: 7px;\n --lq-saturate: 1.7;\n --lq-brighten: 1;\n --lq-glow: 0.1;\n --lq-glass-bright: rgba(255, 255, 255, 0.5);\n --lq-glass-soft: rgba(255, 255, 255, 0.1);\n --lq-glass-shade: rgba(62, 91, 164, 0.14);\n /* On a pale background the pane is defined by its edge, not its body — a\n crisp cool hairline + specular rim is what reads as glass here. */\n --lq-line: color-mix(in srgb, var(--lq-accent) 24%, rgba(66, 85, 128, 0.42));\n }\n\n .lq-provider[data-liquid-theme='light'] .lq-card > .lq-surface__edge,\n .lq-provider[data-liquid-theme='light'] .lq-accordion > .lq-surface__edge,\n .lq-provider[data-liquid-theme='light'] .lq-table-container > .lq-surface__edge,\n .lq-provider[data-liquid-theme='light'] .lq-list > .lq-surface__edge {\n opacity: 0.4;\n }\n\n /* Alert follows the same light-mode recipe: dial back the milky white top\n highlight, add a touch more frost, and give the neutral (info) edge the\n same crisp cool hairline as the data surfaces. */\n .lq-provider[data-liquid-theme='light'] .lq-alert {\n --lq-glass-bright: rgba(255, 255, 255, 0.32);\n -webkit-backdrop-filter: blur(9px) saturate(1.7);\n backdrop-filter: blur(9px) saturate(1.7);\n }\n\n .lq-provider[data-liquid-theme='light'] .lq-alert[data-severity='info'] {\n border-color: color-mix(in srgb, var(--lq-accent) 20%, rgba(66, 85, 128, 0.4));\n }\n\n /* ---------- Light-mode panels ----------\n The scrim behind a panel is a dark dim, and a translucent panel sitting on\n top of it inherits the dimming as grey — 40% of near-black under 58% of\n white lands at about #d5d5d5, which is milk, not glass. Dark mode never\n showed it because the dim disappears into the page. So the light scrim only\n dims enough to say the page is out of reach, the fill gives up a few points\n to let more of the page through, and the inner white glow steps back the way\n it does on every other light surface, where it only ever reads as haze. */\n .lq-provider[data-liquid-theme='light'] .lq-dialog__backdrop,\n .lq-provider[data-liquid-theme='light'] .lq-drawer__backdrop {\n background: rgba(24, 33, 60, 0.18);\n }\n\n .lq-provider[data-liquid-theme='light'] .lq-dialog__surface,\n .lq-provider[data-liquid-theme='light'] .lq-drawer__surface {\n --lq-glow: 0.14;\n --lq-fill: color-mix(in srgb, var(--lq-solid-fill) 54%, transparent);\n }\n\n @media (prefers-color-scheme: light) {\n .lq-provider[data-liquid-theme='system'] .lq-dialog__backdrop,\n .lq-provider[data-liquid-theme='system'] .lq-drawer__backdrop {\n background: rgba(24, 33, 60, 0.18);\n }\n\n .lq-provider[data-liquid-theme='system'] .lq-dialog__surface,\n .lq-provider[data-liquid-theme='system'] .lq-drawer__surface {\n --lq-glow: 0.14;\n --lq-fill: color-mix(in srgb, var(--lq-solid-fill) 54%, transparent);\n }\n\n .lq-provider[data-liquid-theme='system'] .lq-card,\n .lq-provider[data-liquid-theme='system'] .lq-accordion,\n .lq-provider[data-liquid-theme='system'] .lq-table-container,\n .lq-provider[data-liquid-theme='system'] .lq-list {\n --lq-blur: 7px;\n --lq-saturate: 1.7;\n --lq-brighten: 1;\n --lq-glow: 0.1;\n --lq-glass-bright: rgba(255, 255, 255, 0.5);\n --lq-glass-soft: rgba(255, 255, 255, 0.1);\n --lq-glass-shade: rgba(62, 91, 164, 0.14);\n --lq-line: color-mix(in srgb, var(--lq-accent) 24%, rgba(66, 85, 128, 0.42));\n }\n\n .lq-provider[data-liquid-theme='system'] .lq-card > .lq-surface__edge,\n .lq-provider[data-liquid-theme='system'] .lq-accordion > .lq-surface__edge,\n .lq-provider[data-liquid-theme='system'] .lq-table-container > .lq-surface__edge,\n .lq-provider[data-liquid-theme='system'] .lq-list > .lq-surface__edge {\n opacity: 0.4;\n }\n\n .lq-provider[data-liquid-theme='system'] .lq-alert {\n --lq-glass-bright: rgba(255, 255, 255, 0.32);\n -webkit-backdrop-filter: blur(9px) saturate(1.7);\n backdrop-filter: blur(9px) saturate(1.7);\n }\n\n .lq-provider[data-liquid-theme='system'] .lq-alert[data-severity='info'] {\n border-color: color-mix(in srgb, var(--lq-accent) 20%, rgba(66, 85, 128, 0.4));\n }\n }\n}\n\n/*\n * `inline` is load-bearing. liquefy-ui retints every token when the theme flips\n * between light and dark, so the utilities have to resolve `var(--lq-*)` at use\n * time rather than baking in whatever the value happened to be at build time.\n */\n@theme inline {\n --color-liquid-accent: var(--lq-accent);\n --color-liquid-foreground: var(--lq-foreground);\n --color-liquid-muted: var(--lq-muted);\n --color-liquid-placeholder: var(--lq-placeholder);\n --color-liquid-line: var(--lq-regular-line);\n --color-liquid-fill: var(--lq-regular-fill);\n --color-liquid-glass-soft: var(--lq-glass-soft);\n --color-liquid-glass-bright: var(--lq-glass-bright);\n --color-liquid-glass-shade: var(--lq-glass-shade);\n --color-liquid-solid: var(--lq-solid-fill);\n\n --radius-liquid: var(--lq-radius-default);\n --spacing-liquid: var(--lq-space);\n --ease-liquid: var(--lq-easing);\n --shadow-liquid:\n 0 16px 40px var(--lq-shadow-color),\n 0 2px 8px color-mix(in srgb, var(--lq-shadow-color) 52%, transparent);\n}\n", "path": "registry/liquefy-ui.css", "target": "styles/liquefy-ui.css", "type": "registry:file" } ], "name": "liquefy-ui", "title": "liquefy-ui base", "type": "registry:style" }