liquidify-react
Version:
🚀 Production-ready React component library inspired by Apple's new design language post-WWDC 2025. Built with Panda CSS and React, using Bun as runtime (npm compatible). Helps developers maintain design consistency for Apple platform apps. 47+ components
1 lines • 441 kB
CSS
@layer reset,base,tokens,recipes,utilities;@layer recipes{.glass-surface{position:relative;overflow:hidden;background:var(--colors-glass-bg);backdrop-filter:blur(var(--blurs-glass-md));border:1px solid var(--colors-glass-border);box-shadow:var(--shadows-glass-base);transition:all var(--durations-glass-flow) var(--easings-glass-flow);transform-origin:center center}.glass-surface:before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--colors-glass-gradients-before);pointer-events:none;z-index:1}.glass-surface:after{content:"";position:absolute;inset:2px;border-radius:inherit;background:var(--colors-glass-gradients-after);pointer-events:none;z-index:0}}:root[data-theme=dark]{--colors-text-glass-primary: rgba(255, 255, 255, 1);--colors-text-glass-secondary: rgba(255, 255, 255, .9);--colors-text-glass-muted: rgba(255, 255, 255, .7);--colors-text-glass-disabled: rgba(255, 255, 255, .5);--colors-glass-bg: rgba(22, 22, 24, .6);--colors-glass-border: rgba(255, 255, 255, .08);--shadows-glass-base: 0 20px 50px rgba(0, 0, 0, .5), 0 2px 10px rgba(0, 0, 0, .35)}:root[data-theme=light]{--colors-text-glass-primary: rgba(17, 17, 17, 1);--colors-text-glass-secondary: rgba(17, 17, 17, .85);--colors-text-glass-muted: rgba(17, 17, 17, .65);--colors-text-glass-disabled: rgba(17, 17, 17, .45);--colors-glass-bg: rgba(255, 255, 255, .66);--colors-glass-border: rgba(17, 17, 17, .08);--shadows-glass-base: 0 10px 30px rgba(0, 0, 0, .06), 0 2px 6px rgba(0, 0, 0, .08)}@layer reset{html,:host{--font-fallback: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";line-height:1.5;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:var(--global-font-body, var(--font-fallback));-webkit-tap-highlight-color:transparent}*,:before,:after,::backdrop,::file-selector-button{margin:0;padding:0;border-width:0px;border-style:solid;border-color:var(--global-color-border, currentcolor);box-sizing:border-box}hr{color:inherit;height:0px;border-top-width:1px}body{line-height:inherit;height:100%}img{border-style:none}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{text-wrap:balance;font-size:inherit;font-weight:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}ol,ul,menu{list-style:none}button,input:where([type=button],[type=reset],[type=submit]),::file-selector-button{-moz-appearance:button;appearance:button;-webkit-appearance:button}button,input,optgroup,select,textarea,::file-selector-button{font:inherit;background:transparent;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit}::-moz-placeholder{--placeholder-fallback: rgba(0, 0, 0, .5);opacity:1;color:var(--global-color-placeholder, var(--placeholder-fallback))}::placeholder{--placeholder-fallback: rgba(0, 0, 0, .5);opacity:1;color:var(--global-color-placeholder, var(--placeholder-fallback))}@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px){::-moz-placeholder{--placeholder-fallback: color-mix(in oklab, currentcolor 50%, transparent)}::placeholder{--placeholder-fallback: color-mix(in oklab, currentcolor 50%, transparent)}}::-moz-selection{background-color:var(--global-color-selection, rgba(0, 115, 255, .3))}::selection{background-color:var(--global-color-selection, rgba(0, 115, 255, .3))}textarea{resize:vertical}table{border-color:inherit;text-indent:0px;border-collapse:collapse}summary{display:list-item}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}dialog{padding:0}a{text-decoration:inherit;color:inherit}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp,pre{--font-mono-fallback: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New";font-family:var(--global-font-mono, var(--font-mono-fallback));font-size:1em;font-feature-settings:normal;font-variation-settings:normal}progress{vertical-align:baseline}::-webkit-search-decoration,::-webkit-search-cancel-button{-webkit-appearance:none}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}:-moz-ui-invalid{box-shadow:none}:-moz-focusring{outline:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer base{:root{--made-with-panda: "🐼"}*{box-sizing:border-box;touch-action:manipulation}body{margin:0;padding:0;font-family:SF Pro Display,sans-serif}@supports (color: color(display-p3 1 1 1)){:root{--colors-glass-gradients-before: var(--colors-glass-gradients-before-_p3);--colors-glass-gradients-after: var(--colors-glass-gradients-after-_p3);--colors-glass-gradients-depth: var(--colors-glass-gradients-depth-_p3);--colors-glass-gradients-vibrancy: var(--colors-glass-gradients-vibrancy-_p3);--colors-glass-liquid-base: var(--colors-glass-liquid-base-_p3);--colors-glass-liquid-layers-before: var(--colors-glass-liquid-layers-before-_p3);--colors-glass-liquid-layers-after: var(--colors-glass-liquid-layers-after-_p3);--colors-glass-liquid-layers-glow: var(--colors-glass-liquid-layers-glow-_p3);--colors-glass-liquid-layers-shimmer: var(--colors-glass-liquid-layers-shimmer-_p3);--colors-glass-liquid-layers-depth: var(--colors-glass-liquid-layers-depth-_p3);--colors-materials-ultraThin: var(--colors-materials-ultraThin-_p3);--colors-materials-thin: var(--colors-materials-thin-_p3);--colors-materials-regular: var(--colors-materials-regular-_p3);--colors-materials-thick: var(--colors-materials-thick-_p3);--colors-materials-overlayLight: var(--colors-materials-overlayLight-_p3);--colors-materials-overlayDark: var(--colors-materials-overlayDark-_p3);--colors-accent-primary: var(--colors-accent-primary-_p3);--colors-accent-secondary: var(--colors-accent-secondary-_p3);--colors-accent-success: var(--colors-accent-success-_p3);--colors-accent-warning: var(--colors-accent-warning-_p3);--colors-accent-danger: var(--colors-accent-danger-_p3)}}.liquid-wobble-active{animation:liquidJiggle var(--durations-glass-bounce) var(--easings-glass-bounce)}.liquid-pressed{transition:all var(--durations-glass-instant) var(--easings-glass-flow);transform:translateY(1px) scale(.96)}.liquid-flow{animation:liquidFlow var(--durations-glass-flow) var(--easings-glass-flow)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}*,:before,:after,::backdrop{--blur: ;--brightness: ;--contrast: ;--grayscale: ;--hue-rotate: ;--invert: ;--saturate: ;--sepia: ;--drop-shadow: ;--backdrop-blur: ;--backdrop-brightness: ;--backdrop-contrast: ;--backdrop-grayscale: ;--backdrop-hue-rotate: ;--backdrop-invert: ;--backdrop-opacity: ;--backdrop-saturate: ;--backdrop-sepia: ;--gradient-from-position: ;--gradient-to-position: ;--gradient-via-position: ;--scroll-snap-strictness: proximity;--border-spacing-x: 0;--border-spacing-y: 0;--translate-x: 0;--translate-y: 0;--rotate: 0;--rotate-x: 0;--rotate-y: 0;--skew-x: 0;--skew-y: 0;--scale-x: 1;--scale-y: 1}@media (color-gamut: p3){:root[data-color-gamut=p3]{--glass-saturation-boost: 1.8;--glass-vibrancy-multiplier: 1.25}}}@layer tokens{:where(:root,:host){--colors-glass-bg: rgba(255, 255, 255, .1);--colors-glass-border: rgba(255, 255, 255, .2);--colors-glass-ripple: rgba(255, 255, 255, .3);--colors-glass-subtle-bg: rgba(255, 255, 255, .06);--colors-glass-subtle-border: rgba(255, 255, 255, .12);--colors-glass-medium-bg: rgba(255, 255, 255, .12);--colors-glass-medium-border: rgba(255, 255, 255, .22);--colors-glass-strong-bg: rgba(255, 255, 255, .22);--colors-glass-strong-border: rgba(255, 255, 255, .34);--colors-glass-accent-bg: var(--colors-accent-dynamic);--colors-glass-accent-border: var(--colors-accent-dynamic);--colors-glass-gradients-before-_p3: linear-gradient(145deg, color(display-p3 1 1 1 / .25) 0%, color(display-p3 1 1 1 / .08) 50%, color(display-p3 1 1 1 / 0) 100%);--colors-glass-gradients-before: linear-gradient(145deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, 0) 100%);--colors-glass-gradients-after-_p3: linear-gradient(145deg, color(display-p3 1 1 1 / .15) 0%, color(display-p3 1 1 1 / .04) 50%, color(display-p3 0 0 0 / .08) 100%);--colors-glass-gradients-after: linear-gradient(145deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .02) 50%, rgba(0, 0, 0, .05) 100%);--colors-glass-gradients-depth-_p3: linear-gradient(135deg, color(display-p3 1 1 1 / .2) 0%, color(display-p3 1 1 1 / .12) 25%, color(display-p3 1 1 1 / .05) 50%, color(display-p3 0 0 0 / .05) 75%, color(display-p3 0 0 0 / .12) 100%);--colors-glass-gradients-depth: linear-gradient(135deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,.08) 25%, rgba(255,255,255,.03) 50%, rgba(0,0,0,.03) 75%, rgba(0,0,0,.08) 100%);--colors-glass-gradients-vibrancy-_p3: radial-gradient(ellipse at top left, color(display-p3 1 1 1 / .18) 0%, color(display-p3 1 1 1 / .09) 40%, transparent 70%);--colors-glass-gradients-vibrancy: radial-gradient(ellipse at top left, rgba(255,255,255,.12) 0%, rgba(255,255,255,.06) 40%, transparent 70%);--colors-glass-liquid-base-_p3: color(display-p3 1 1 1 / .12);--colors-glass-liquid-base: rgba(255,255,255,.08);--colors-glass-liquid-opacity: .08;--colors-glass-liquid-blur: backdrop-filter: blur(12px) saturate(1.8);--colors-glass-liquid-layers-before-_p3: linear-gradient(135deg, color(display-p3 1 1 1 / .25) 0%, transparent 100%);--colors-glass-liquid-layers-before: linear-gradient(135deg, rgba(255,255,255,.2) 0%, transparent 100%);--colors-glass-liquid-layers-after-_p3: radial-gradient(circle, color(display-p3 1 1 1 / .15) 0%, transparent 70%);--colors-glass-liquid-layers-after: radial-gradient(circle, rgba(255,255,255,.1) 0%, transparent 70%);--colors-glass-liquid-layers-glow-_p3: box-shadow: inset 0 1px 0 color(display-p3 1 1 1 / .25), 0 0 20px color(display-p3 1 1 1 / .1);--colors-glass-liquid-layers-glow: box-shadow: inset 0 1px 0 rgba(255,255,255,.2);--colors-glass-liquid-layers-shimmer-_p3: linear-gradient(90deg, transparent 0%, color(display-p3 1 1 1 / .5) 50%, transparent 100%);--colors-glass-liquid-layers-shimmer: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.4) 50%, transparent 100%);--colors-glass-liquid-layers-depth-_p3: box-shadow: inset 0 2px 4px color(display-p3 0 0 0 / .15), inset 0 -1px 0 color(display-p3 1 1 1 / .4);--colors-glass-liquid-layers-depth: box-shadow: inset 0 2px 4px rgba(0,0,0,.1), inset 0 -1px 0 rgba(255,255,255,.3);--colors-button-primary-bg: linear-gradient(135deg, color-mix(in oklch, var(--colors-accent-dynamic) 30%, transparent) 0%, color-mix(in oklch, var(--colors-accent-dynamic) 30%, transparent) 100%);--colors-button-primary-border: color-mix(in oklch, var(--colors-accent-dynamic) 50%, transparent);--colors-button-secondary-bg: var(--colors-glass-medium-bg);--colors-button-secondary-border: var(--colors-glass-medium-border);--colors-button-ghost-bg: transparent;--colors-button-ghost-border: var(--colors-glass-subtle-border);--colors-button-danger-bg: linear-gradient(135deg, rgba(255, 59, 48, .3) 0%, rgba(255, 59, 48, .3) 100%);--colors-button-danger-border: rgba(255, 59, 48, .5);--colors-button-success-bg: linear-gradient(135deg, rgba(76, 217, 100, .3) 0%, rgba(76, 217, 100, .3) 100%);--colors-button-success-border: rgba(76, 217, 100, .5);--colors-button-warning-bg: linear-gradient(135deg, rgba(255, 149, 0, .3) 0%, rgba(255, 149, 0, .3) 100%);--colors-button-warning-border: rgba(255, 149, 0, .5);--colors-button-hig-filled-accent-default-bg: color-mix(in oklch, var(--colors-accent-dynamic) 28%, transparent);--colors-button-hig-filled-accent-default-text: var(--colors-text-glass-primary);--colors-button-hig-filled-accent-default-border: color-mix(in oklch, var(--colors-accent-dynamic) 55%, transparent);--colors-button-hig-filled-accent-hover-bg: color-mix(in oklch, var(--colors-accent-dynamic) 36%, transparent);--colors-button-hig-filled-accent-hover-text: var(--colors-text-glass-primary);--colors-button-hig-filled-accent-hover-border: color-mix(in oklch, var(--colors-accent-dynamic) 60%, transparent);--colors-button-hig-filled-accent-active-bg: color-mix(in oklch, var(--colors-accent-dynamic) 42%, transparent);--colors-button-hig-filled-accent-active-text: var(--colors-text-glass-primary);--colors-button-hig-filled-accent-active-border: color-mix(in oklch, var(--colors-accent-dynamic) 65%, transparent);--colors-button-hig-filled-accent-disabled-bg: color-mix(in oklch, var(--colors-accent-dynamic) 18%, transparent);--colors-button-hig-filled-accent-disabled-text: var(--colors-text-glass-disabled);--colors-button-hig-filled-accent-disabled-border: color-mix(in oklch, var(--colors-accent-dynamic) 35%, transparent);--colors-button-hig-filled-accent-focus-bg: color-mix(in oklch, var(--colors-accent-dynamic) 32%, transparent);--colors-button-hig-filled-accent-focus-text: var(--colors-text-glass-primary);--colors-button-hig-filled-accent-focus-border: var(--colors-accent-dynamic);--colors-button-hig-filled-accent-loading-bg: color-mix(in oklch, var(--colors-accent-dynamic) 28%, transparent);--colors-button-hig-filled-accent-loading-text: var(--colors-text-glass-primary);--colors-button-hig-filled-accent-loading-border: color-mix(in oklch, var(--colors-accent-dynamic) 55%, transparent);--colors-button-hig-filled-neutral-default-bg: var(--colors-glass-medium-bg);--colors-button-hig-filled-neutral-default-text: var(--colors-text-glass-primary);--colors-button-hig-filled-neutral-default-border: var(--colors-glass-medium-border);--colors-button-hig-filled-neutral-hover-bg: var(--colors-glass-strong-bg);--colors-button-hig-filled-neutral-hover-text: var(--colors-text-glass-primary);--colors-button-hig-filled-neutral-hover-border: var(--colors-glass-strong-border);--colors-button-hig-filled-neutral-active-bg: color-mix(in oklch, #000 5%, var(--colors-glass-strong-bg));--colors-button-hig-filled-neutral-active-text: var(--colors-text-glass-primary);--colors-button-hig-filled-neutral-active-border: var(--colors-glass-strong-border);--colors-button-hig-filled-neutral-disabled-bg: var(--colors-glass-subtle-bg);--colors-button-hig-filled-neutral-disabled-text: var(--colors-text-glass-disabled);--colors-button-hig-filled-neutral-disabled-border: var(--colors-glass-subtle-border);--colors-button-hig-filled-neutral-focus-bg: var(--colors-glass-medium-bg);--colors-button-hig-filled-neutral-focus-text: var(--colors-text-glass-primary);--colors-button-hig-filled-neutral-focus-border: var(--colors-accent-dynamic);--colors-button-hig-filled-neutral-loading-bg: var(--colors-glass-medium-bg);--colors-button-hig-filled-neutral-loading-text: var(--colors-text-glass-primary);--colors-button-hig-filled-neutral-loading-border: var(--colors-glass-medium-border);--colors-button-hig-filled-destructive-default-bg: color-mix(in oklch, var(--colors-accent-danger) 30%, transparent);--colors-button-hig-filled-destructive-default-text: var(--colors-text-glass-primary);--colors-button-hig-filled-destructive-default-border: color-mix(in oklch, var(--colors-accent-danger) 55%, transparent);--colors-button-hig-filled-destructive-hover-bg: color-mix(in oklch, var(--colors-accent-danger) 36%, transparent);--colors-button-hig-filled-destructive-hover-text: var(--colors-text-glass-primary);--colors-button-hig-filled-destructive-hover-border: color-mix(in oklch, var(--colors-accent-danger) 60%, transparent);--colors-button-hig-filled-destructive-active-bg: color-mix(in oklch, var(--colors-accent-danger) 42%, transparent);--colors-button-hig-filled-destructive-active-text: var(--colors-text-glass-primary);--colors-button-hig-filled-destructive-active-border: color-mix(in oklch, var(--colors-accent-danger) 65%, transparent);--colors-button-hig-filled-destructive-disabled-bg: color-mix(in oklch, var(--colors-accent-danger) 18%, transparent);--colors-button-hig-filled-destructive-disabled-text: var(--colors-text-glass-disabled);--colors-button-hig-filled-destructive-disabled-border: color-mix(in oklch, var(--colors-accent-danger) 35%, transparent);--colors-button-hig-filled-destructive-focus-bg: color-mix(in oklch, var(--colors-accent-danger) 32%, transparent);--colors-button-hig-filled-destructive-focus-text: var(--colors-text-glass-primary);--colors-button-hig-filled-destructive-focus-border: var(--colors-accent-danger);--colors-button-hig-filled-destructive-loading-bg: color-mix(in oklch, var(--colors-accent-danger) 30%, transparent);--colors-button-hig-filled-destructive-loading-text: var(--colors-text-glass-primary);--colors-button-hig-filled-destructive-loading-border: color-mix(in oklch, var(--colors-accent-danger) 55%, transparent);--colors-button-hig-tinted-accent-default-bg: color-mix(in oklch, var(--colors-accent-dynamic) 18%, transparent);--colors-button-hig-tinted-accent-default-text: var(--colors-text-glass-primary);--colors-button-hig-tinted-accent-default-border: color-mix(in oklch, var(--colors-accent-dynamic) 35%, transparent);--colors-button-hig-tinted-accent-hover-bg: color-mix(in oklch, var(--colors-accent-dynamic) 24%, transparent);--colors-button-hig-tinted-accent-hover-text: var(--colors-text-glass-primary);--colors-button-hig-tinted-accent-hover-border: color-mix(in oklch, var(--colors-accent-dynamic) 45%, transparent);--colors-button-hig-tinted-accent-active-bg: color-mix(in oklch, var(--colors-accent-dynamic) 28%, transparent);--colors-button-hig-tinted-accent-active-text: var(--colors-text-glass-primary);--colors-button-hig-tinted-accent-active-border: color-mix(in oklch, var(--colors-accent-dynamic) 50%, transparent);--colors-button-hig-tinted-accent-disabled-bg: color-mix(in oklch, var(--colors-accent-dynamic) 12%, transparent);--colors-button-hig-tinted-accent-disabled-text: var(--colors-text-glass-disabled);--colors-button-hig-tinted-accent-disabled-border: color-mix(in oklch, var(--colors-accent-dynamic) 25%, transparent);--colors-button-hig-tinted-accent-focus-bg: color-mix(in oklch, var(--colors-accent-dynamic) 20%, transparent);--colors-button-hig-tinted-accent-focus-text: var(--colors-text-glass-primary);--colors-button-hig-tinted-accent-focus-border: var(--colors-accent-dynamic);--colors-button-hig-tinted-accent-loading-bg: color-mix(in oklch, var(--colors-accent-dynamic) 18%, transparent);--colors-button-hig-tinted-accent-loading-text: var(--colors-text-glass-primary);--colors-button-hig-tinted-accent-loading-border: color-mix(in oklch, var(--colors-accent-dynamic) 35%, transparent);--colors-button-hig-tinted-neutral-default-bg: var(--colors-glass-subtle-bg);--colors-button-hig-tinted-neutral-default-text: var(--colors-text-glass-primary);--colors-button-hig-tinted-neutral-default-border: var(--colors-glass-subtle-border);--colors-button-hig-tinted-neutral-hover-bg: var(--colors-glass-medium-bg);--colors-button-hig-tinted-neutral-hover-text: var(--colors-text-glass-primary);--colors-button-hig-tinted-neutral-hover-border: var(--colors-glass-medium-border);--colors-button-hig-tinted-neutral-active-bg: var(--colors-glass-strong-bg);--colors-button-hig-tinted-neutral-active-text: var(--colors-text-glass-primary);--colors-button-hig-tinted-neutral-active-border: var(--colors-glass-strong-border);--colors-button-hig-tinted-neutral-disabled-bg: var(--colors-glass-subtle-bg);--colors-button-hig-tinted-neutral-disabled-text: var(--colors-text-glass-disabled);--colors-button-hig-tinted-neutral-disabled-border: var(--colors-glass-subtle-border);--colors-button-hig-tinted-neutral-focus-bg: var(--colors-glass-medium-bg);--colors-button-hig-tinted-neutral-focus-text: var(--colors-text-glass-primary);--colors-button-hig-tinted-neutral-focus-border: var(--colors-accent-dynamic);--colors-button-hig-tinted-neutral-loading-bg: var(--colors-glass-subtle-bg);--colors-button-hig-tinted-neutral-loading-text: var(--colors-text-glass-primary);--colors-button-hig-tinted-neutral-loading-border: var(--colors-glass-subtle-border);--colors-button-hig-tinted-destructive-default-bg: color-mix(in oklch, var(--colors-accent-danger) 18%, transparent);--colors-button-hig-tinted-destructive-default-text: var(--colors-text-glass-primary);--colors-button-hig-tinted-destructive-default-border: color-mix(in oklch, var(--colors-accent-danger) 35%, transparent);--colors-button-hig-tinted-destructive-hover-bg: color-mix(in oklch, var(--colors-accent-danger) 24%, transparent);--colors-button-hig-tinted-destructive-hover-text: var(--colors-text-glass-primary);--colors-button-hig-tinted-destructive-hover-border: color-mix(in oklch, var(--colors-accent-danger) 45%, transparent);--colors-button-hig-tinted-destructive-active-bg: color-mix(in oklch, var(--colors-accent-danger) 28%, transparent);--colors-button-hig-tinted-destructive-active-text: var(--colors-text-glass-primary);--colors-button-hig-tinted-destructive-active-border: color-mix(in oklch, var(--colors-accent-danger) 50%, transparent);--colors-button-hig-tinted-destructive-disabled-bg: color-mix(in oklch, var(--colors-accent-danger) 12%, transparent);--colors-button-hig-tinted-destructive-disabled-text: var(--colors-text-glass-disabled);--colors-button-hig-tinted-destructive-disabled-border: color-mix(in oklch, var(--colors-accent-danger) 25%, transparent);--colors-button-hig-tinted-destructive-focus-bg: color-mix(in oklch, var(--colors-accent-danger) 20%, transparent);--colors-button-hig-tinted-destructive-focus-text: var(--colors-text-glass-primary);--colors-button-hig-tinted-destructive-focus-border: var(--colors-accent-danger);--colors-button-hig-tinted-destructive-loading-bg: color-mix(in oklch, var(--colors-accent-danger) 18%, transparent);--colors-button-hig-tinted-destructive-loading-text: var(--colors-text-glass-primary);--colors-button-hig-tinted-destructive-loading-border: color-mix(in oklch, var(--colors-accent-danger) 35%, transparent);--colors-button-hig-plain-accent-default-bg: transparent;--colors-button-hig-plain-accent-default-text: var(--colors-text-glass-primary);--colors-button-hig-plain-accent-default-border: var(--colors-glass-subtle-border);--colors-button-hig-plain-accent-hover-bg: var(--colors-glass-subtle-bg);--colors-button-hig-plain-accent-hover-text: var(--colors-text-glass-primary);--colors-button-hig-plain-accent-hover-border: var(--colors-glass-subtle-border);--colors-button-hig-plain-accent-active-bg: var(--colors-glass-medium-bg);--colors-button-hig-plain-accent-active-text: var(--colors-text-glass-primary);--colors-button-hig-plain-accent-active-border: var(--colors-glass-medium-border);--colors-button-hig-plain-accent-disabled-bg: transparent;--colors-button-hig-plain-accent-disabled-text: var(--colors-text-glass-disabled);--colors-button-hig-plain-accent-disabled-border: var(--colors-glass-subtle-border);--colors-button-hig-plain-accent-focus-bg: transparent;--colors-button-hig-plain-accent-focus-text: var(--colors-text-glass-primary);--colors-button-hig-plain-accent-focus-border: var(--colors-accent-dynamic);--colors-button-hig-plain-accent-loading-bg: transparent;--colors-button-hig-plain-accent-loading-text: var(--colors-text-glass-primary);--colors-button-hig-plain-accent-loading-border: var(--colors-glass-subtle-border);--colors-button-hig-plain-neutral-default-bg: transparent;--colors-button-hig-plain-neutral-default-text: var(--colors-text-glass-primary);--colors-button-hig-plain-neutral-default-border: var(--colors-glass-subtle-border);--colors-button-hig-plain-neutral-hover-bg: var(--colors-glass-subtle-bg);--colors-button-hig-plain-neutral-hover-text: var(--colors-text-glass-primary);--colors-button-hig-plain-neutral-hover-border: var(--colors-glass-subtle-border);--colors-button-hig-plain-neutral-active-bg: var(--colors-glass-medium-bg);--colors-button-hig-plain-neutral-active-text: var(--colors-text-glass-primary);--colors-button-hig-plain-neutral-active-border: var(--colors-glass-medium-border);--colors-button-hig-plain-neutral-disabled-bg: transparent;--colors-button-hig-plain-neutral-disabled-text: var(--colors-text-glass-disabled);--colors-button-hig-plain-neutral-disabled-border: var(--colors-glass-subtle-border);--colors-button-hig-plain-neutral-focus-bg: transparent;--colors-button-hig-plain-neutral-focus-text: var(--colors-text-glass-primary);--colors-button-hig-plain-neutral-focus-border: var(--colors-accent-dynamic);--colors-button-hig-plain-neutral-loading-bg: transparent;--colors-button-hig-plain-neutral-loading-text: var(--colors-text-glass-primary);--colors-button-hig-plain-neutral-loading-border: var(--colors-glass-subtle-border);--colors-button-hig-plain-destructive-default-bg: transparent;--colors-button-hig-plain-destructive-default-text: var(--colors-text-glass-primary);--colors-button-hig-plain-destructive-default-border: var(--colors-glass-subtle-border);--colors-button-hig-plain-destructive-hover-bg: var(--colors-glass-subtle-bg);--colors-button-hig-plain-destructive-hover-text: var(--colors-text-glass-primary);--colors-button-hig-plain-destructive-hover-border: var(--colors-glass-subtle-border);--colors-button-hig-plain-destructive-active-bg: var(--colors-glass-medium-bg);--colors-button-hig-plain-destructive-active-text: var(--colors-text-glass-primary);--colors-button-hig-plain-destructive-active-border: var(--colors-glass-medium-border);--colors-button-hig-plain-destructive-disabled-bg: transparent;--colors-button-hig-plain-destructive-disabled-text: var(--colors-text-glass-disabled);--colors-button-hig-plain-destructive-disabled-border: var(--colors-glass-subtle-border);--colors-button-hig-plain-destructive-focus-bg: transparent;--colors-button-hig-plain-destructive-focus-text: var(--colors-text-glass-primary);--colors-button-hig-plain-destructive-focus-border: var(--colors-accent-danger);--colors-button-hig-plain-destructive-loading-bg: transparent;--colors-button-hig-plain-destructive-loading-text: var(--colors-text-glass-primary);--colors-button-hig-plain-destructive-loading-border: var(--colors-glass-subtle-border);--colors-button-filled-accent-default-bg: var(--colors-button-hig-filled-accent-default-bg);--colors-button-filled-accent-default-text: var(--colors-button-hig-filled-accent-default-text);--colors-button-filled-accent-default-border: var(--colors-button-hig-filled-accent-default-border);--colors-button-filled-accent-hover-bg: var(--colors-button-hig-filled-accent-hover-bg);--colors-button-filled-accent-hover-text: var(--colors-button-hig-filled-accent-hover-text);--colors-button-filled-accent-hover-border: var(--colors-button-hig-filled-accent-hover-border);--colors-button-filled-accent-active-bg: var(--colors-button-hig-filled-accent-active-bg);--colors-button-filled-accent-active-text: var(--colors-button-hig-filled-accent-active-text);--colors-button-filled-accent-active-border: var(--colors-button-hig-filled-accent-active-border);--colors-button-filled-accent-disabled-bg: var(--colors-button-hig-filled-accent-disabled-bg);--colors-button-filled-accent-disabled-text: var(--colors-button-hig-filled-accent-disabled-text);--colors-button-filled-accent-disabled-border: var(--colors-button-hig-filled-accent-disabled-border);--colors-button-filled-accent-focus-bg: var(--colors-button-hig-filled-accent-focus-bg);--colors-button-filled-accent-focus-text: var(--colors-button-hig-filled-accent-focus-text);--colors-button-filled-accent-focus-border: var(--colors-button-hig-filled-accent-focus-border);--colors-button-filled-accent-loading-bg: var(--colors-button-hig-filled-accent-loading-bg);--colors-button-filled-accent-loading-text: var(--colors-button-hig-filled-accent-loading-text);--colors-button-filled-accent-loading-border: var(--colors-button-hig-filled-accent-loading-border);--colors-button-filled-neutral-default-bg: var(--colors-button-hig-filled-neutral-default-bg);--colors-button-filled-neutral-default-text: var(--colors-button-hig-filled-neutral-default-text);--colors-button-filled-neutral-default-border: var(--colors-button-hig-filled-neutral-default-border);--colors-button-filled-neutral-hover-bg: var(--colors-button-hig-filled-neutral-hover-bg);--colors-button-filled-neutral-hover-text: var(--colors-button-hig-filled-neutral-hover-text);--colors-button-filled-neutral-hover-border: var(--colors-button-hig-filled-neutral-hover-border);--colors-button-filled-neutral-active-bg: var(--colors-button-hig-filled-neutral-active-bg);--colors-button-filled-neutral-active-text: var(--colors-button-hig-filled-neutral-active-text);--colors-button-filled-neutral-active-border: var(--colors-button-hig-filled-neutral-active-border);--colors-button-filled-neutral-disabled-bg: var(--colors-button-hig-filled-neutral-disabled-bg);--colors-button-filled-neutral-disabled-text: var(--colors-button-hig-filled-neutral-disabled-text);--colors-button-filled-neutral-disabled-border: var(--colors-button-hig-filled-neutral-disabled-border);--colors-button-filled-neutral-focus-bg: var(--colors-button-hig-filled-neutral-focus-bg);--colors-button-filled-neutral-focus-text: var(--colors-button-hig-filled-neutral-focus-text);--colors-button-filled-neutral-focus-border: var(--colors-button-hig-filled-neutral-focus-border);--colors-button-filled-neutral-loading-bg: var(--colors-button-hig-filled-neutral-loading-bg);--colors-button-filled-neutral-loading-text: var(--colors-button-hig-filled-neutral-loading-text);--colors-button-filled-neutral-loading-border: var(--colors-button-hig-filled-neutral-loading-border);--colors-button-filled-destructive-default-bg: var(--colors-button-hig-filled-destructive-default-bg);--colors-button-filled-destructive-default-text: var(--colors-button-hig-filled-destructive-default-text);--colors-button-filled-destructive-default-border: var(--colors-button-hig-filled-destructive-default-border);--colors-button-filled-destructive-hover-bg: var(--colors-button-hig-filled-destructive-hover-bg);--colors-button-filled-destructive-hover-text: var(--colors-button-hig-filled-destructive-hover-text);--colors-button-filled-destructive-hover-border: var(--colors-button-hig-filled-destructive-hover-border);--colors-button-filled-destructive-active-bg: var(--colors-button-hig-filled-destructive-active-bg);--colors-button-filled-destructive-active-text: var(--colors-button-hig-filled-destructive-active-text);--colors-button-filled-destructive-active-border: var(--colors-button-hig-filled-destructive-active-border);--colors-button-filled-destructive-disabled-bg: var(--colors-button-hig-filled-destructive-disabled-bg);--colors-button-filled-destructive-disabled-text: var(--colors-button-hig-filled-destructive-disabled-text);--colors-button-filled-destructive-disabled-border: var(--colors-button-hig-filled-destructive-disabled-border);--colors-button-filled-destructive-focus-bg: var(--colors-button-hig-filled-destructive-focus-bg);--colors-button-filled-destructive-focus-text: var(--colors-button-hig-filled-destructive-focus-text);--colors-button-filled-destructive-focus-border: var(--colors-button-hig-filled-destructive-focus-border);--colors-button-filled-destructive-loading-bg: var(--colors-button-hig-filled-destructive-loading-bg);--colors-button-filled-destructive-loading-text: var(--colors-button-hig-filled-destructive-loading-text);--colors-button-filled-destructive-loading-border: var(--colors-button-hig-filled-destructive-loading-border);--colors-button-tinted-accent-default-bg: var(--colors-button-hig-tinted-accent-default-bg);--colors-button-tinted-accent-default-text: var(--colors-button-hig-tinted-accent-default-text);--colors-button-tinted-accent-default-border: var(--colors-button-hig-tinted-accent-default-border);--colors-button-tinted-accent-hover-bg: var(--colors-button-hig-tinted-accent-hover-bg);--colors-button-tinted-accent-hover-text: var(--colors-button-hig-tinted-accent-hover-text);--colors-button-tinted-accent-hover-border: var(--colors-button-hig-tinted-accent-hover-border);--colors-button-tinted-accent-active-bg: var(--colors-button-hig-tinted-accent-active-bg);--colors-button-tinted-accent-active-text: var(--colors-button-hig-tinted-accent-active-text);--colors-button-tinted-accent-active-border: var(--colors-button-hig-tinted-accent-active-border);--colors-button-tinted-accent-disabled-bg: var(--colors-button-hig-tinted-accent-disabled-bg);--colors-button-tinted-accent-disabled-text: var(--colors-button-hig-tinted-accent-disabled-text);--colors-button-tinted-accent-disabled-border: var(--colors-button-hig-tinted-accent-disabled-border);--colors-button-tinted-accent-focus-bg: var(--colors-button-hig-tinted-accent-focus-bg);--colors-button-tinted-accent-focus-text: var(--colors-button-hig-tinted-accent-focus-text);--colors-button-tinted-accent-focus-border: var(--colors-button-hig-tinted-accent-focus-border);--colors-button-tinted-accent-loading-bg: var(--colors-button-hig-tinted-accent-loading-bg);--colors-button-tinted-accent-loading-text: var(--colors-button-hig-tinted-accent-loading-text);--colors-button-tinted-accent-loading-border: var(--colors-button-hig-tinted-accent-loading-border);--colors-button-tinted-neutral-default-bg: var(--colors-button-hig-tinted-neutral-default-bg);--colors-button-tinted-neutral-default-text: var(--colors-button-hig-tinted-neutral-default-text);--colors-button-tinted-neutral-default-border: var(--colors-button-hig-tinted-neutral-default-border);--colors-button-tinted-neutral-hover-bg: var(--colors-button-hig-tinted-neutral-hover-bg);--colors-button-tinted-neutral-hover-text: var(--colors-button-hig-tinted-neutral-hover-text);--colors-button-tinted-neutral-hover-border: var(--colors-button-hig-tinted-neutral-hover-border);--colors-button-tinted-neutral-active-bg: var(--colors-button-hig-tinted-neutral-active-bg);--colors-button-tinted-neutral-active-text: var(--colors-button-hig-tinted-neutral-active-text);--colors-button-tinted-neutral-active-border: var(--colors-button-hig-tinted-neutral-active-border);--colors-button-tinted-neutral-disabled-bg: var(--colors-button-hig-tinted-neutral-disabled-bg);--colors-button-tinted-neutral-disabled-text: var(--colors-button-hig-tinted-neutral-disabled-text);--colors-button-tinted-neutral-disabled-border: var(--colors-button-hig-tinted-neutral-disabled-border);--colors-button-tinted-neutral-focus-bg: var(--colors-button-hig-tinted-neutral-focus-bg);--colors-button-tinted-neutral-focus-text: var(--colors-button-hig-tinted-neutral-focus-text);--colors-button-tinted-neutral-focus-border: var(--colors-button-hig-tinted-neutral-focus-border);--colors-button-tinted-neutral-loading-bg: var(--colors-button-hig-tinted-neutral-loading-bg);--colors-button-tinted-neutral-loading-text: var(--colors-button-hig-tinted-neutral-loading-text);--colors-button-tinted-neutral-loading-border: var(--colors-button-hig-tinted-neutral-loading-border);--colors-button-tinted-destructive-default-bg: var(--colors-button-hig-tinted-destructive-default-bg);--colors-button-tinted-destructive-default-text: var(--colors-button-hig-tinted-destructive-default-text);--colors-button-tinted-destructive-default-border: var(--colors-button-hig-tinted-destructive-default-border);--colors-button-tinted-destructive-hover-bg: var(--colors-button-hig-tinted-destructive-hover-bg);--colors-button-tinted-destructive-hover-text: var(--colors-button-hig-tinted-destructive-hover-text);--colors-button-tinted-destructive-hover-border: var(--colors-button-hig-tinted-destructive-hover-border);--colors-button-tinted-destructive-active-bg: var(--colors-button-hig-tinted-destructive-active-bg);--colors-button-tinted-destructive-active-text: var(--colors-button-hig-tinted-destructive-active-text);--colors-button-tinted-destructive-active-border: var(--colors-button-hig-tinted-destructive-active-border);--colors-button-tinted-destructive-disabled-bg: var(--colors-button-hig-tinted-destructive-disabled-bg);--colors-button-tinted-destructive-disabled-text: var(--colors-button-hig-tinted-destructive-disabled-text);--colors-button-tinted-destructive-disabled-border: var(--colors-button-hig-tinted-destructive-disabled-border);--colors-button-tinted-destructive-focus-bg: var(--colors-button-hig-tinted-destructive-focus-bg);--colors-button-tinted-destructive-focus-text: var(--colors-button-hig-tinted-destructive-focus-text);--colors-button-tinted-destructive-focus-border: var(--colors-button-hig-tinted-destructive-focus-border);--colors-button-tinted-destructive-loading-bg: var(--colors-button-hig-tinted-destructive-loading-bg);--colors-button-tinted-destructive-loading-text: var(--colors-button-hig-tinted-destructive-loading-text);--colors-button-tinted-destructive-loading-border: var(--colors-button-hig-tinted-destructive-loading-border);--colors-button-plain-accent-default-bg: var(--colors-button-hig-plain-accent-default-bg);--colors-button-plain-accent-default-text: var(--colors-button-hig-plain-accent-default-text);--colors-button-plain-accent-default-border: var(--colors-button-hig-plain-accent-default-border);--colors-button-plain-accent-hover-bg: var(--colors-button-hig-plain-accent-hover-bg);--colors-button-plain-accent-hover-text: var(--colors-button-hig-plain-accent-hover-text);--colors-button-plain-accent-hover-border: var(--colors-button-hig-plain-accent-hover-border);--colors-button-plain-accent-active-bg: var(--colors-button-hig-plain-accent-active-bg);--colors-button-plain-accent-active-text: var(--colors-button-hig-plain-accent-active-text);--colors-button-plain-accent-active-border: var(--colors-button-hig-plain-accent-active-border);--colors-button-plain-accent-disabled-bg: var(--colors-button-hig-plain-accent-disabled-bg);--colors-button-plain-accent-disabled-text: var(--colors-button-hig-plain-accent-disabled-text);--colors-button-plain-accent-disabled-border: var(--colors-button-hig-plain-accent-disabled-border);--colors-button-plain-accent-focus-bg: var(--colors-button-hig-plain-accent-focus-bg);--colors-button-plain-accent-focus-text: var(--colors-button-hig-plain-accent-focus-text);--colors-button-plain-accent-focus-border: var(--colors-button-hig-plain-accent-focus-border);--colors-button-plain-accent-loading-bg: var(--colors-button-hig-plain-accent-loading-bg);--colors-button-plain-accent-loading-text: var(--colors-button-hig-plain-accent-loading-text);--colors-button-plain-accent-loading-border: var(--colors-button-hig-plain-accent-loading-border);--colors-button-plain-neutral-default-bg: var(--colors-button-hig-plain-neutral-default-bg);--colors-button-plain-neutral-default-text: var(--colors-button-hig-plain-neutral-default-text);--colors-button-plain-neutral-default-border: var(--colors-button-hig-plain-neutral-default-border);--colors-button-plain-neutral-hover-bg: var(--colors-button-hig-plain-neutral-hover-bg);--colors-button-plain-neutral-hover-text: var(--colors-button-hig-plain-neutral-hover-text);--colors-button-plain-neutral-hover-border: var(--colors-button-hig-plain-neutral-hover-border);--colors-button-plain-neutral-active-bg: var(--colors-button-hig-plain-neutral-active-bg);--colors-button-plain-neutral-active-text: var(--colors-button-hig-plain-neutral-active-text);--colors-button-plain-neutral-active-border: var(--colors-button-hig-plain-neutral-active-border);--colors-button-plain-neutral-disabled-bg: var(--colors-button-hig-plain-neutral-disabled-bg);--colors-button-plain-neutral-disabled-text: var(--colors-button-hig-plain-neutral-disabled-text);--colors-button-plain-neutral-disabled-border: var(--colors-button-hig-plain-neutral-disabled-border);--colors-button-plain-neutral-focus-bg: var(--colors-button-hig-plain-neutral-focus-bg);--colors-button-plain-neutral-focus-text: var(--colors-button-hig-plain-neutral-focus-text);--colors-button-plain-neutral-focus-border: var(--colors-button-hig-plain-neutral-focus-border);--colors-button-plain-neutral-loading-bg: var(--colors-button-hig-plain-neutral-loading-bg);--colors-button-plain-neutral-loading-text: var(--colors-button-hig-plain-neutral-loading-text);--colors-button-plain-neutral-loading-border: var(--colors-button-hig-plain-neutral-loading-border);--colors-button-plain-destructive-default-bg: var(--colors-button-hig-plain-destructive-default-bg);--colors-button-plain-destructive-default-text: var(--colors-button-hig-plain-destructive-default-text);--colors-button-plain-destructive-default-border: var(--colors-button-hig-plain-destructive-default-border);--colors-button-plain-destructive-hover-bg: var(--colors-button-hig-plain-destructive-hover-bg);--colors-button-plain-destructive-hover-text: var(--colors-button-hig-plain-destructive-hover-text);--colors-button-plain-destructive-hover-border: var(--colors-button-hig-plain-destructive-hover-border);--colors-button-plain-destructive-active-bg: var(--colors-button-hig-plain-destructive-active-bg);--colors-button-plain-destructive-active-text: var(--colors-button-hig-plain-destructive-active-text);--colors-button-plain-destructive-active-border: var(--colors-button-hig-plain-destructive-active-border);--colors-button-plain-destructive-disabled-bg: var(--colors-button-hig-plain-destructive-disabled-bg);--colors-button-plain-destructive-disabled-text: var(--colors-button-hig-plain-destructive-disabled-text);--colors-button-plain-destructive-disabled-border: var(--colors-button-hig-plain-destructive-disabled-border);--colors-button-plain-destructive-focus-bg: var(--colors-button-hig-plain-destructive-focus-bg);--colors-button-plain-destructive-focus-text: var(--colors-button-hig-plain-destructive-focus-text);--colors-button-plain-destructive-focus-border: var(--colors-button-hig-plain-destructive-focus-border);--colors-button-plain-destructive-loading-bg: var(--colors-button-hig-plain-destructive-loading-bg);--colors-button-plain-destructive-loading-text: var(--colors-button-hig-plain-destructive-loading-text);--colors-button-plain-destructive-loading-border: var(--colors-button-hig-plain-destructive-loading-border);--colors-accent-dynamic: var(--ui-accent, color(display-p3 0 .478 1));--colors-accent-primary-_p3: color(display-p3 0 .478 1);--colors-accent-primary: #007AFF;--colors-accent-secondary-_p3: color(display-p3 .345 .337 .839);--colors-accent-secondary: #5856D6;--colors-accent-success-_p3: color(display-p3 .204 .78 .349);--colors-accent-success: #34C759;--colors-accent-warning-_p3: color(display-p3 1 .584 0);--colors-accent-warning: #FF9500;--colors-accent-danger-_p3: color(display-p3 1 .231 .188);--colors-accent-danger: #FF3B30;--colors-accent-indigo-_p3: color(display-p3 .345 .337 .839);--colors-accent-indigo: #5856D6;--colors-accent-teal-_p3: color(display-p3 .353 .784 .98);--colors-accent-teal: #5AC8FA;--colors-accent-cyan-_p3: color(display-p3 .196 .843 .294);--colors-accent-cyan: #32D74B;--colors-accent-mint-_p3: color(display-p3 0 .78 .745);--colors-accent-mint: #00C7BE;--colors-accent-pink-_p3: color(display-p3 1 .176 .573);--colors-accent-pink: #FF2D92;--colors-accent-yellow-_p3: color(display-p3 1 .8 0);--colors-accent-yellow: #FFCC00;--colors-accent-neon-blue-_p3: color(display-p3 0 .6 1);--colors-accent-neon-blue: #007AFF;--colors-accent-vibrant-purple-_p3: color(display-p3 .4 .3 .9);--colors-accent-vibrant-purple: #5856D6;--colors-accent-liquid-teal-_p3: color(display-p3 .3 .85 1);--colors-accent-liquid-teal: #5AC8FA;--colors-text-glass-primary: rgba(255, 255, 255, 1);--colors-text-glass-secondary: rgba(255, 255, 255, .9);--colors-text-glass-muted: rgba(255, 255, 255, .7);--colors-text-glass-disabled: rgba(255, 255, 255, .5);--colors-gray-50: #FAFAFA;--colors-gray-100: #F5F5F7;--colors-gray-200: #E5E5EA;--colors-gray-300: #D1D1D6;--colors-gray-400: #C7C7CC;--colors-gray-500: #AEAEB2;--colors-gray-600: #8E8E93;--colors-gray-700: #636366;--colors-gray-800: #48484A;--colors-gray-900: #1C1C1E;--colors-blue-100: #D1E9FF;--colors-blue-500: #007AFF;--colors-blue-600: #0056CC;--colors-indigo-100: #D1D1FF;--colors-indigo-500: #5856D6;--colors-indigo-600: #3634A3;--colors-teal-100: #B8F2FF;--colors-teal-500: #5AC8FA;--colors-teal-600: #0A84FF;--colors-green-100: #D8F5A2;--colors-green-500: #34C759;--colors-green-600: #248A3D;--colors-orange-100: #FFE5B4;--colors-orange-500: #FF9500;--colors-orange-600: #C93400;--colors-pink-100: #FFD1DC;--colors-pink-500: #FF2D92;--colors-pink-600: #D70015;--colors-bg-canvas: var(--colors-gray-50);--colors-bg-surface: var(--colors-gray-100);--colors-bg-subtle: #F2F3F5;--colors-border-default: var(--colors-gray-200);--colors-border-hairline: color-mix(in oklch, #000 10%, transparent);--colors-semantic-label: rgba(0, 0, 0, .92);--colors-semantic-secondary-label: rgba(0, 0, 0, .6);--colors-semantic-tertiary-label: rgba(0, 0, 0, .3);--colors-semantic-quaternary-label: rgba(0, 0, 0, .18);--colors-semantic-system-background: var(--colors-bg-canvas);--colors-semantic-secondary-system-background: var(--colors-bg-surface);--colors-semantic-tertiary-system-background: var(--colors-bg-subtle);--colors-semantic-separator: color-mix(in oklch, #000 10%, transparent);--colors-semantic-fill: color-mix(in oklch, #000 5%, transparent);--colors-semantic-fill-secondary: color-mix(in oklch, #000 10%, transparent);--colors-materials-ultra-thin-_p3: color(display-p3 1 1 1 / .08);--colors-materials-ultra-thin: rgba(255, 255, 255, .06);--colors-materials-thin-_p3: color(display-p3 1 1 1 / .15);--colors-materials-thin: rgba(255, 255, 255, .12);--colors-materials-regular-_p3: color(display-p3 1 1 1 / .25);--colors-materials-regular: rgba(255, 255, 255, .2);--colors-materials-thick-_p3: color(display-p3 1 1 1 / .35);--colors-materials-thick: rgba(255, 255, 255, .28);--colors-materials-overlay-light-_p3: linear-gradient(145deg, color(display-p3 1 1 1 / .22) 0%, color(display-p3 1 1 1 / .06) 50%, transparent 100%);--colors-materials-overlay-light: linear-gradient(145deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.04) 50%, transparent 100%);--colors-materials-overlay-dark-_p3: linear-gradient(145deg, color(display-p3 0 0 0 / .25) 0%, color(display-p3 0 0 0 / .08) 50%, transparent 100%);--colors-materials-overlay-dark: linear-gradient(145deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.06) 50%, transparent 100%);--colors-materials-vibrancy-ultra-light-_p3: color(display-p3 1 1 1 / .05);--colors-materials-vibrancy-ultra-light: rgba(255, 255, 255, .03);--colors-materials-vibrancy-light-_p3: color(display-p3 1 1 1 / .12);--colors-materials-vibrancy-light: rgba(255, 255, 255, .08);--colors-materials-vibrancy-medium-_p3: color(display-p3 1 1 1 / .2);--colors-materials-vibrancy-medium: rgba(255, 255, 255, .15);--colors-materials-vibrancy-strong-_p3: color(display-p3 1 1 1 / .32);--colors-materials-vibrancy-strong: rgba(255, 255, 255, .25);--colors-materials-depth-gradient-_p3: linear-gradient(135deg, color(display-p3 1 1 1 / .2) 0%, color(display-p3 1 1 1 / .12) 30%, color(display-p3 1 1 1 / .05) 60%, color(display-p3 0 0 0 / .04) 80%, color(display-p3 0 0 0 / .08) 100%);--colors-materials-depth-gradient: linear-gradient(135deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,.08) 30%, rgba(255,255,255,.03) 60%, rgba(0,0,0,.02) 80%, rgba(0,0,0,.06) 100%);--colors-materials-shimmer-overlay-_p3: radial-gradient(circle at 30% 30%, color(display-p3 1 1 1 / .18) 0%, color(display-p3 1 1 1 / .09) 40%, transparent 70%);--colors-materials-shimmer-overlay: radial-gradient(circle at 30% 30%, rgba(255,255,255,.12) 0%, rgba(255,255,255,.06) 40%, transparent 70%);--colors-selection-bg: color-mix(in oklch, var(--colors-accent-dynamic) 40%, transparent);--colors-selection-fg: var(--colors-text-glass-primary);--radii-none: 0px;--radii-xs: 4px;--radii-sm: 6px;--radii-md: 8px;--radii-lg: 12px;--radii-xl: 16px;--radii-2xl: 20px;--radii-3xl: 24px;--radii-full: 9999px;--radii-roles-button: var(--radii-full);--radii-roles-button-compact: 14px;--radii-roles-button-large: var(--radii-full);--radii-roles-control: 14px;--radii-roles-field: 14px;--radii-roles-field-large: 16px;--radii-roles-card: 26px;--radii-roles-card-large: 26px;--radii-roles-sheet: 26px;--radii-roles-modal: 26px;--radii-roles-pill: var(--radii-full);--radii-roles-badge: var(--radii-full);--radii-button-default: 0 6px 16px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .25);--radii-button-hover: 0 10px 28px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .3);--radii-button-active: 0 3px 8px rgba(0, 0, 0, .15), inset 0 2px 4px rgba(0, 0, 0, .15);--radii-glass-xs: var(--radii-xs);--radii-glass-sm: var(--radii-sm);--radii-glass-md: var(--radii-md);--radii-glass-lg: var(--radii-lg);--radii-glass-xl: var(--radii-xl);--radii-glass-2xl: var(--radii-2xl);--radii-glass-3xl: var(--radii-3xl);--radii-glass-full: var(--radii-full);--blurs-glass-sm: 5px;--blurs-glass-md: 10px;--blurs-glass-lg: 20px;--blurs-glass-xl: 30px;--shadows-button-default: var(--shadows-glass-base);--shadows-button-hover: var(--shadows-glass-hover);--shadows-button-active: var(--shadows-glass-sm);--shadows-button-focus: var(--shadows-glass-md);--shadows-glass-base: 0 12px 40px rgba(0, 0, 0, .15), inset 0 2px 4px rgba(0, 0, 0, .1), inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -1px 0 rgba(0, 0, 0, .15), 0 0 20px rgba(255, 255, 255, .1);--shadows-glass-sm: 0 4px 6px rgba(0, 0, 0, .1), inset 0 1px 0 rgba(255, 255, 255, .2);--shadows-glass-md: 0 12px 40px rgba(0, 0, 0, .15), inset 0 2px 4px rgba(0, 0, 0, .1), inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -1px 0 rgba(0, 0, 0, .15), 0 0 20px rgba(255, 255, 255, .1);--shadows-glass-lg: 0 16px 50px rgba(0, 0, 0, .2), inset 0 2px 4px rgba(0, 0, 0, .1), inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(0, 0, 0, .15), 0 0 30px rgba(255, 255, 255, .15);--shadows-glass-hover: 0 16px 50px rgba(0, 0, 0, .2), inset 0 2px 4px rgba(0, 0, 0, .1), inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(0, 0, 0, .15), 0 0 30px rgba(255, 255, 255, .15);--durations-button-hover: var(--durations-glass-flow);--durations-button-press: var(--duration