/* FoxUI 0.99.3 — landing-fx uçun yiğilgan: 43 komponent (accordion, assistant, avatar, badge, board, button, calendar, card, chart, check, chip, command, compare, context, copy, countdown, daystrip, effects, flow, input, kbd, legend, listbox, marquee, mask, menu, message, motion, nav, orb, print, prio, progress, segment, select, skeleton, slider, stat, status, table, timeslots, toolcall, yozuv), faqat işlatilgan tokenlar. Qölda tahrirlamang — npx foxui build qayta yiğadi. */ /* FoxUI tokenlari — avtomatik yaratilgan (scripts/build.mjs). Qölda tahrirlamang. */ @layer fx.reset, fx.tokens, fx.base, fx.components, fx.utilities; @property --fx-knob-pill { syntax: ""; inherits: true; initial-value: 0; } @property --fx-knob-density { syntax: ""; inherits: true; initial-value: 1; } @property --fx-knob-depth { syntax: ""; inherits: true; initial-value: 1; } @property --fx-knob-motion { syntax: ""; inherits: true; initial-value: 1; } @property --fx-knob-blur { syntax: ""; inherits: true; initial-value: 1; } @property --fx-knob-outline { syntax: ""; inherits: true; initial-value: 1; } @property --fx-knob-field-fill { syntax: ""; inherits: true; initial-value: 0; } @property --fx-knob-motion-press { syntax: ""; inherits: true; initial-value: 1; } @property --fx-knob-motion-lift { syntax: ""; inherits: true; initial-value: 0; } @property --fx-knob-motion-stagger { syntax: ""; inherits: true; initial-value: 0; } @property --fx-knob-motion-loop { syntax: ""; inherits: true; initial-value: 1; } @property --fx-knob-page-tint { syntax: ""; inherits: true; initial-value: 0; } @layer fx.tokens { :root { --fx-color-gray-25: #FCFCFD; --fx-color-gray-50: #F9FAFB; --fx-color-gray-100: #F2F4F7; --fx-color-gray-200: #E4E7EC; --fx-color-gray-300: #D0D5DD; --fx-color-gray-400: #98A2B3; --fx-color-gray-500: #667085; --fx-color-gray-600: #475467; --fx-color-gray-700: #344054; --fx-color-gray-800: #1D2939; --fx-color-gray-900: #101828; --fx-color-gray-950: #0C111D; --fx-color-neutral-25: var(--fx-color-gray-25); --fx-color-neutral-50: var(--fx-color-gray-50); --fx-color-neutral-100: var(--fx-color-gray-100); --fx-color-neutral-200: var(--fx-color-gray-200); --fx-color-neutral-300: var(--fx-color-gray-300); --fx-color-neutral-400: var(--fx-color-gray-400); --fx-color-neutral-500: var(--fx-color-gray-500); --fx-color-neutral-600: var(--fx-color-gray-600); --fx-color-neutral-700: var(--fx-color-gray-700); --fx-color-neutral-800: var(--fx-color-gray-800); --fx-color-neutral-900: var(--fx-color-gray-900); --fx-color-neutral-950: var(--fx-color-gray-950); --fx-color-pastel-yellow: #F5D77E; --fx-color-pastel-pink: #F3BBD4; --fx-color-pastel-blue: #AECBF2; --fx-color-pastel-coral: #F4A688; --fx-color-pastel-green: #BEDDB2; --fx-color-pastel-purple: #CFC0F3; --fx-color-red-50: #FEF3F2; --fx-color-red-300: #FDA29B; --fx-color-red-600: #D92D20; --fx-color-red-700: #B42318; --fx-color-red-900: #7A271A; --fx-color-green-50: #ECFDF3; --fx-color-green-300: #75E0A7; --fx-color-green-700: #067647; --fx-color-amber-50: #FFFAEB; --fx-color-amber-300: #FEC84B; --fx-color-amber-600: #DC6803; --fx-color-amber-700: #B54708; --fx-color-white: #FFFFFF; --fx-color-black: #000000; --fx-color-brand-50: var(--fx-color-neutral-50); --fx-color-brand-200: var(--fx-color-neutral-200); --fx-color-brand-300: var(--fx-color-neutral-300); --fx-color-brand-400: var(--fx-color-neutral-400); --fx-color-brand-500: var(--fx-color-neutral-500); --fx-color-brand-600: var(--fx-color-neutral-600); --fx-color-brand-700: var(--fx-color-neutral-700); --fx-color-brand-800: var(--fx-color-neutral-800); --fx-color-blue-50: #EFF8FF; --fx-color-blue-300: #84CAFF; --fx-color-blue-700: #175CD3; --fx-color-priority-1: #D1453B; --fx-color-priority-2: #EB8909; --fx-color-priority-3: #246FE0; --fx-color-priority-1-dark: #FF7066; --fx-color-priority-2-dark: #FF9A14; --fx-color-priority-3-dark: #5297FF; --fx-space-1: 4px; --fx-space-2: 8px; --fx-space-3: 12px; --fx-space-4: 16px; --fx-space-5: 20px; --fx-space-6: 24px; --fx-space-8: 32px; --fx-space-10: 40px; --fx-space-12: 48px; --fx-font-family-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fx-font-family-display: var(--fx-font-family-sans); --fx-font-family-mono: ui-monospace, "SFMono-Regular", Consolas, monospace; --fx-font-family-numeric: var(--fx-font-family-display); --fx-font-size-xs: 12px; --fx-font-size-sm: 14px; --fx-font-size-md: 16px; --fx-font-size-lg: 18px; --fx-font-size-xl: 20px; --fx-font-size-display-sm: 30px; --fx-font-size-display-md: 36px; --fx-font-size-2xl: 24px; --fx-font-size-display-lg: 48px; --fx-font-weight-regular: 400; --fx-font-weight-medium: 500; --fx-font-weight-semibold: 600; --fx-font-weight-bold: 700; --fx-font-adjust-sans: ex-height 0.52; --fx-font-adjust-display: var(--fx-font-adjust-sans); --fx-font-adjust-mono: ex-height 0.52; --fx-font-adjust-numeric: var(--fx-font-adjust-display); --fx-duration-fast: 120ms; --fx-duration-base: 200ms; --fx-duration-slow: 360ms; --fx-duration-pulse: 1600ms; --fx-duration-spin: 800ms; --fx-duration-instant: 60ms; --fx-duration-slower: 500ms; --fx-duration-stagger: 30ms; --fx-duration-shimmer: 1400ms; --fx-duration-indeterminate: 1600ms; --fx-duration-delay-skeleton: 300ms; --fx-ease-standard: cubic-bezier(0.2, 0, 0, 1); --fx-ease-emphasized: cubic-bezier(0.2, 0.7, 0.2, 1); --fx-ease-exit: cubic-bezier(0.4, 0, 1, 1); --fx-ease-enter: cubic-bezier(0, 0, 0.2, 1); --fx-ease-sheet: cubic-bezier(0.32, 0.72, 0, 1); --fx-ease-spring: linear(0, 0.044, 0.149, 0.283, 0.424, 0.558, 0.677, 0.776, 0.856, 0.917, 0.961, 0.992, 1.011, 1.022, 1.027, 1.028, 1.027, 1.023, 1.019, 1.015, 1.012, 1.008, 1.006, 1.004, 1); --fx-ease-bounce: linear(0, 0.064, 0.22, 0.42, 0.626, 0.812, 0.961, 1.067, 1.132, 1.16, 1.16, 1.141, 1.111, 1.077, 1.045, 1.017, 0.997, 0.983, 0.975, 0.973, 0.975, 0.979, 0.985, 0.99, 0.995, 0.999, 1.002, 1.004, 1.004, 1.004, 1.004, 1.003, 1); --fx-line-height-tight: 1.1; --fx-z-raised: 1; --fx-z-sticky: 100; --fx-text-primary: var(--fx-color-neutral-900); --fx-text-secondary: var(--fx-color-neutral-600); --fx-text-tertiary: var(--fx-color-neutral-500); --fx-text-disabled: var(--fx-color-neutral-400); --fx-text-on-brand: var(--fx-color-white); --fx-text-error: var(--fx-color-red-600); --fx-text-on-category: var(--fx-color-neutral-900); --fx-text-brand: var(--fx-color-neutral-900); --fx-text-on-error: var(--fx-color-white); --fx-text-on-static-light: var(--fx-color-neutral-900); --fx-bg-page: color-mix(in oklab, var(--fx-color-neutral-100) calc(var(--fx-knob-page-tint) * 100%), var(--fx-color-neutral-25)); --fx-bg-surface: var(--fx-color-white); --fx-bg-subtle: var(--fx-color-neutral-50); --fx-bg-muted: var(--fx-color-neutral-100); --fx-bg-muted-hover: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 5%); --fx-bg-pressed: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 10%); --fx-bg-brand-solid: var(--fx-color-neutral-900); --fx-bg-brand-solid-hover: var(--fx-color-neutral-700); --fx-bg-brand-solid-active: var(--fx-color-neutral-600); --fx-bg-error-subtle: var(--fx-color-red-50); --fx-bg-error-subtle-active: color-mix(in oklab, var(--fx-bg-error-subtle) 80%, var(--fx-fg-error)); --fx-bg-success-subtle: var(--fx-color-green-50); --fx-bg-warning-subtle: var(--fx-color-amber-50); --fx-bg-overlay: var(--fx-color-neutral-950); --fx-bg-category-yellow: var(--fx-color-pastel-yellow); --fx-bg-category-yellow-subtle: color-mix(in oklab, var(--fx-color-pastel-yellow) 20%, var(--fx-bg-page)); --fx-bg-category-pink: var(--fx-color-pastel-pink); --fx-bg-category-pink-subtle: color-mix(in oklab, var(--fx-color-pastel-pink) 20%, var(--fx-bg-page)); --fx-bg-category-blue: var(--fx-color-pastel-blue); --fx-bg-category-blue-subtle: color-mix(in oklab, var(--fx-color-pastel-blue) 20%, var(--fx-bg-page)); --fx-bg-category-coral: var(--fx-color-pastel-coral); --fx-bg-category-coral-subtle: color-mix(in oklab, var(--fx-color-pastel-coral) 20%, var(--fx-bg-page)); --fx-bg-category-green: var(--fx-color-pastel-green); --fx-bg-category-green-subtle: color-mix(in oklab, var(--fx-color-pastel-green) 20%, var(--fx-bg-page)); --fx-bg-category-purple: var(--fx-color-pastel-purple); --fx-bg-category-purple-subtle: color-mix(in oklab, var(--fx-color-pastel-purple) 20%, var(--fx-bg-page)); --fx-bg-brand-subtle: var(--fx-color-neutral-100); --fx-bg-brand-subtle-hover: color-mix(in oklab, var(--fx-bg-brand-subtle) 85%, var(--fx-text-brand)); --fx-bg-brand-subtle-active: color-mix(in oklab, var(--fx-bg-brand-subtle) 72%, var(--fx-text-brand)); --fx-bg-error-solid: var(--fx-color-red-600); --fx-bg-error-solid-hover: var(--fx-color-red-700); --fx-bg-error-solid-active: color-mix(in oklab, var(--fx-color-red-700) 70%, var(--fx-color-red-900)); --fx-bg-info-subtle: var(--fx-color-blue-50); --fx-bg-static-light: var(--fx-color-neutral-25); --fx-selection-bg: color-mix(in oklab, var(--fx-bg-brand-solid) 24%, var(--fx-bg-surface)); --fx-selection-text: var(--fx-text-primary); --fx-scrollbar-thumb: color-mix(in oklab, var(--fx-text-primary) 28%, transparent); --fx-scrollbar-track: transparent; --fx-fg-success: var(--fx-color-green-700); --fx-fg-warning: var(--fx-color-amber-700); --fx-fg-error: var(--fx-color-red-700); --fx-fg-info: var(--fx-color-blue-700); --fx-border-color-default: var(--fx-color-neutral-200); --fx-border-color-strong: var(--fx-color-neutral-300); --fx-border-color-focus: var(--fx-color-neutral-900); --fx-border-color-error: var(--fx-color-red-600); --fx-border-width-default: 1px; --fx-border-width-focus: 2px; --fx-shadow-color: var(--fx-color-neutral-900); --fx-knob-pill: 0; --fx-knob-density: 1; --fx-knob-depth: 1; --fx-knob-motion: 1; --fx-knob-blur: 1; --fx-knob-outline: 1; --fx-knob-field-fill: 0; --fx-knob-motion-press: 1; --fx-knob-motion-lift: 0; --fx-knob-motion-stagger: 0; --fx-knob-motion-loop: 1; --fx-knob-page-tint: 0; --fx-radius-control: 8px; --fx-radius-nav: 6px; --fx-radius-field-multiline: 8px; --fx-radius-surface: 12px; --fx-radius-overlay: 16px; --fx-radius-badge: 6px; --fx-radius-tag: var(--fx-radius-badge); --fx-radius-circle: 9999px; --fx-radius-checkbox-ratio: 0.25; --fx-radius-avatar-ratio: 0.28; --fx-radius-pill: 999px; --fx-size-control-sm: 36px; --fx-size-control-md: 44px; --fx-size-control-lg: 52px; --fx-size-checkbox: 20px; --fx-size-switch-track: 40px; --fx-size-min-target: 24px; --fx-size-touch-target: 44px; --fx-size-avatar-sm: 22px; --fx-size-avatar-md: 36px; --fx-size-avatar-lg: 56px; --fx-size-status-dot: 10px; --fx-size-status-dot-sm: 8px; --fx-size-icon-sm: 16px; --fx-size-icon-md: 20px; --fx-size-icon-lg: 24px; --fx-size-topbar: 60px; --fx-nav-width: 256px; --fx-nav-width-collapsed: 60px; --fx-nav-item-height: 40px; --fx-nav-subitem-height: 34px; --fx-dialog-width: 480px; --fx-popover-width: 320px; --fx-viz-ink: color-mix(in oklab, var(--fx-text-primary) 80%, var(--fx-bg-surface)); --fx-viz-brand: var(--fx-color-neutral-500); --fx-viz-accent: var(--fx-color-pastel-yellow); --fx-viz-risk: var(--fx-bg-error-solid); --fx-viz-context: var(--fx-color-neutral-300); --fx-viz-grid: var(--fx-border-color-default); --fx-viz-track: color-mix(in oklab, var(--fx-text-primary) 10%, transparent); --fx-motion-shift-sm: var(--fx-space-1); --fx-motion-shift-md: var(--fx-space-2); --fx-motion-shift-lg: var(--fx-space-6); --fx-motion-scale-enter: 0.96; --fx-motion-scale-press: 0.97; --fx-motion-lift: -2px; --fx-priority-1: var(--fx-color-priority-1); --fx-priority-2: var(--fx-color-priority-2); --fx-priority-3: var(--fx-color-priority-3); --fx-priority-4: var(--fx-border-color-strong); } [data-fx-scheme="light"] { --fx-text-primary: var(--fx-color-neutral-900); --fx-text-secondary: var(--fx-color-neutral-600); --fx-text-tertiary: var(--fx-color-neutral-500); --fx-text-disabled: var(--fx-color-neutral-400); --fx-text-on-brand: var(--fx-color-white); --fx-text-error: var(--fx-color-red-600); --fx-text-on-category: var(--fx-color-neutral-900); --fx-text-brand: var(--fx-color-neutral-900); --fx-text-on-error: var(--fx-color-white); --fx-bg-page: color-mix(in oklab, var(--fx-color-neutral-100) calc(var(--fx-knob-page-tint) * 100%), var(--fx-color-neutral-25)); --fx-bg-surface: var(--fx-color-white); --fx-bg-subtle: var(--fx-color-neutral-50); --fx-bg-muted: var(--fx-color-neutral-100); --fx-bg-brand-solid: var(--fx-color-neutral-900); --fx-bg-brand-solid-hover: var(--fx-color-neutral-700); --fx-bg-brand-solid-active: var(--fx-color-neutral-600); --fx-bg-error-subtle: var(--fx-color-red-50); --fx-bg-success-subtle: var(--fx-color-green-50); --fx-bg-warning-subtle: var(--fx-color-amber-50); --fx-bg-overlay: var(--fx-color-neutral-950); --fx-bg-category-yellow: var(--fx-color-pastel-yellow); --fx-bg-category-yellow-subtle: color-mix(in oklab, var(--fx-color-pastel-yellow) 20%, var(--fx-bg-page)); --fx-bg-category-pink: var(--fx-color-pastel-pink); --fx-bg-category-pink-subtle: color-mix(in oklab, var(--fx-color-pastel-pink) 20%, var(--fx-bg-page)); --fx-bg-category-blue: var(--fx-color-pastel-blue); --fx-bg-category-blue-subtle: color-mix(in oklab, var(--fx-color-pastel-blue) 20%, var(--fx-bg-page)); --fx-bg-category-coral: var(--fx-color-pastel-coral); --fx-bg-category-coral-subtle: color-mix(in oklab, var(--fx-color-pastel-coral) 20%, var(--fx-bg-page)); --fx-bg-category-green: var(--fx-color-pastel-green); --fx-bg-category-green-subtle: color-mix(in oklab, var(--fx-color-pastel-green) 20%, var(--fx-bg-page)); --fx-bg-category-purple: var(--fx-color-pastel-purple); --fx-bg-category-purple-subtle: color-mix(in oklab, var(--fx-color-pastel-purple) 20%, var(--fx-bg-page)); --fx-bg-brand-subtle: var(--fx-color-neutral-100); --fx-bg-error-solid: var(--fx-color-red-600); --fx-bg-info-subtle: var(--fx-color-blue-50); --fx-fg-success: var(--fx-color-green-700); --fx-fg-warning: var(--fx-color-amber-700); --fx-fg-error: var(--fx-color-red-700); --fx-fg-info: var(--fx-color-blue-700); --fx-border-color-default: var(--fx-color-neutral-200); --fx-border-color-strong: var(--fx-color-neutral-300); --fx-border-color-focus: var(--fx-color-neutral-900); --fx-border-color-error: var(--fx-color-red-600); --fx-shadow-color: var(--fx-color-neutral-900); --fx-viz-brand: var(--fx-color-neutral-500); --fx-viz-context: var(--fx-color-neutral-300); --fx-viz-accent: var(--fx-color-pastel-yellow); --fx-priority-1: var(--fx-color-priority-1); --fx-priority-2: var(--fx-color-priority-2); --fx-priority-3: var(--fx-color-priority-3); --fx-bg-muted-hover: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 5%); --fx-bg-pressed: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 10%); --fx-bg-error-subtle-active: color-mix(in oklab, var(--fx-bg-error-subtle) 80%, var(--fx-fg-error)); --fx-bg-brand-subtle-hover: color-mix(in oklab, var(--fx-bg-brand-subtle) 85%, var(--fx-text-brand)); --fx-bg-brand-subtle-active: color-mix(in oklab, var(--fx-bg-brand-subtle) 72%, var(--fx-text-brand)); --fx-selection-bg: color-mix(in oklab, var(--fx-bg-brand-solid) 24%, var(--fx-bg-surface)); --fx-selection-text: var(--fx-text-primary); --fx-scrollbar-thumb: color-mix(in oklab, var(--fx-text-primary) 28%, transparent); --fx-viz-ink: color-mix(in oklab, var(--fx-text-primary) 80%, var(--fx-bg-surface)); --fx-viz-risk: var(--fx-bg-error-solid); --fx-viz-grid: var(--fx-border-color-default); --fx-viz-track: color-mix(in oklab, var(--fx-text-primary) 10%, transparent); --fx-priority-4: var(--fx-border-color-strong); } @media (prefers-color-scheme: dark) { :root:not([data-fx-scheme="light"]) { --fx-text-primary: var(--fx-color-neutral-50); --fx-text-secondary: var(--fx-color-neutral-300); --fx-text-tertiary: var(--fx-color-neutral-400); --fx-text-disabled: var(--fx-color-neutral-600); --fx-text-on-brand: var(--fx-color-neutral-900); --fx-text-error: var(--fx-color-red-300); --fx-text-on-category: var(--fx-color-neutral-50); --fx-text-brand: var(--fx-color-neutral-50); --fx-text-on-error: var(--fx-color-white); --fx-bg-page: var(--fx-color-neutral-950); --fx-bg-surface: var(--fx-color-neutral-900); --fx-bg-subtle: var(--fx-color-neutral-900); --fx-bg-muted: var(--fx-color-neutral-800); --fx-bg-brand-solid: var(--fx-color-neutral-50); --fx-bg-brand-solid-hover: var(--fx-color-neutral-200); --fx-bg-brand-solid-active: var(--fx-color-neutral-300); --fx-bg-error-subtle: color-mix(in oklab, var(--fx-color-red-300) 16%, var(--fx-bg-surface)); --fx-bg-success-subtle: color-mix(in oklab, var(--fx-color-green-300) 16%, var(--fx-bg-surface)); --fx-bg-warning-subtle: color-mix(in oklab, var(--fx-color-amber-300) 16%, var(--fx-bg-surface)); --fx-bg-overlay: var(--fx-color-black); --fx-bg-category-yellow: color-mix(in oklab, var(--fx-color-pastel-yellow) 45%, var(--fx-color-neutral-950)); --fx-bg-category-yellow-subtle: color-mix(in oklab, var(--fx-color-pastel-yellow) 10%, var(--fx-bg-page)); --fx-bg-category-pink: color-mix(in oklab, var(--fx-color-pastel-pink) 45%, var(--fx-color-neutral-950)); --fx-bg-category-pink-subtle: color-mix(in oklab, var(--fx-color-pastel-pink) 10%, var(--fx-bg-page)); --fx-bg-category-blue: color-mix(in oklab, var(--fx-color-pastel-blue) 45%, var(--fx-color-neutral-950)); --fx-bg-category-blue-subtle: color-mix(in oklab, var(--fx-color-pastel-blue) 10%, var(--fx-bg-page)); --fx-bg-category-coral: color-mix(in oklab, var(--fx-color-pastel-coral) 45%, var(--fx-color-neutral-950)); --fx-bg-category-coral-subtle: color-mix(in oklab, var(--fx-color-pastel-coral) 10%, var(--fx-bg-page)); --fx-bg-category-green: color-mix(in oklab, var(--fx-color-pastel-green) 45%, var(--fx-color-neutral-950)); --fx-bg-category-green-subtle: color-mix(in oklab, var(--fx-color-pastel-green) 10%, var(--fx-bg-page)); --fx-bg-category-purple: color-mix(in oklab, var(--fx-color-pastel-purple) 45%, var(--fx-color-neutral-950)); --fx-bg-category-purple-subtle: color-mix(in oklab, var(--fx-color-pastel-purple) 10%, var(--fx-bg-page)); --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface)); --fx-bg-error-solid: var(--fx-color-red-600); --fx-bg-info-subtle: color-mix(in oklab, var(--fx-color-blue-300) 16%, var(--fx-bg-surface)); --fx-fg-success: var(--fx-color-green-300); --fx-fg-warning: var(--fx-color-amber-300); --fx-fg-error: var(--fx-color-red-300); --fx-fg-info: var(--fx-color-blue-300); --fx-border-color-default: var(--fx-color-neutral-800); --fx-border-color-strong: var(--fx-color-neutral-700); --fx-border-color-focus: var(--fx-color-neutral-50); --fx-border-color-error: var(--fx-color-red-300); --fx-shadow-color: var(--fx-color-black); --fx-viz-brand: var(--fx-color-neutral-400); --fx-viz-context: var(--fx-color-neutral-600); --fx-viz-accent: var(--fx-color-pastel-yellow); --fx-priority-1: var(--fx-color-priority-1-dark); --fx-priority-2: var(--fx-color-priority-2-dark); --fx-priority-3: var(--fx-color-priority-3-dark); --fx-bg-muted-hover: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 5%); --fx-bg-pressed: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 10%); --fx-bg-error-subtle-active: color-mix(in oklab, var(--fx-bg-error-subtle) 80%, var(--fx-fg-error)); --fx-bg-brand-subtle-hover: color-mix(in oklab, var(--fx-bg-brand-subtle) 85%, var(--fx-text-brand)); --fx-bg-brand-subtle-active: color-mix(in oklab, var(--fx-bg-brand-subtle) 72%, var(--fx-text-brand)); --fx-selection-bg: color-mix(in oklab, var(--fx-bg-brand-solid) 24%, var(--fx-bg-surface)); --fx-selection-text: var(--fx-text-primary); --fx-scrollbar-thumb: color-mix(in oklab, var(--fx-text-primary) 28%, transparent); --fx-viz-ink: color-mix(in oklab, var(--fx-text-primary) 80%, var(--fx-bg-surface)); --fx-viz-risk: var(--fx-bg-error-solid); --fx-viz-grid: var(--fx-border-color-default); --fx-viz-track: color-mix(in oklab, var(--fx-text-primary) 10%, transparent); --fx-priority-4: var(--fx-border-color-strong); } } [data-fx-scheme="dark"] { --fx-text-primary: var(--fx-color-neutral-50); --fx-text-secondary: var(--fx-color-neutral-300); --fx-text-tertiary: var(--fx-color-neutral-400); --fx-text-disabled: var(--fx-color-neutral-600); --fx-text-on-brand: var(--fx-color-neutral-900); --fx-text-error: var(--fx-color-red-300); --fx-text-on-category: var(--fx-color-neutral-50); --fx-text-brand: var(--fx-color-neutral-50); --fx-text-on-error: var(--fx-color-white); --fx-bg-page: var(--fx-color-neutral-950); --fx-bg-surface: var(--fx-color-neutral-900); --fx-bg-subtle: var(--fx-color-neutral-900); --fx-bg-muted: var(--fx-color-neutral-800); --fx-bg-brand-solid: var(--fx-color-neutral-50); --fx-bg-brand-solid-hover: var(--fx-color-neutral-200); --fx-bg-brand-solid-active: var(--fx-color-neutral-300); --fx-bg-error-subtle: color-mix(in oklab, var(--fx-color-red-300) 16%, var(--fx-bg-surface)); --fx-bg-success-subtle: color-mix(in oklab, var(--fx-color-green-300) 16%, var(--fx-bg-surface)); --fx-bg-warning-subtle: color-mix(in oklab, var(--fx-color-amber-300) 16%, var(--fx-bg-surface)); --fx-bg-overlay: var(--fx-color-black); --fx-bg-category-yellow: color-mix(in oklab, var(--fx-color-pastel-yellow) 45%, var(--fx-color-neutral-950)); --fx-bg-category-yellow-subtle: color-mix(in oklab, var(--fx-color-pastel-yellow) 10%, var(--fx-bg-page)); --fx-bg-category-pink: color-mix(in oklab, var(--fx-color-pastel-pink) 45%, var(--fx-color-neutral-950)); --fx-bg-category-pink-subtle: color-mix(in oklab, var(--fx-color-pastel-pink) 10%, var(--fx-bg-page)); --fx-bg-category-blue: color-mix(in oklab, var(--fx-color-pastel-blue) 45%, var(--fx-color-neutral-950)); --fx-bg-category-blue-subtle: color-mix(in oklab, var(--fx-color-pastel-blue) 10%, var(--fx-bg-page)); --fx-bg-category-coral: color-mix(in oklab, var(--fx-color-pastel-coral) 45%, var(--fx-color-neutral-950)); --fx-bg-category-coral-subtle: color-mix(in oklab, var(--fx-color-pastel-coral) 10%, var(--fx-bg-page)); --fx-bg-category-green: color-mix(in oklab, var(--fx-color-pastel-green) 45%, var(--fx-color-neutral-950)); --fx-bg-category-green-subtle: color-mix(in oklab, var(--fx-color-pastel-green) 10%, var(--fx-bg-page)); --fx-bg-category-purple: color-mix(in oklab, var(--fx-color-pastel-purple) 45%, var(--fx-color-neutral-950)); --fx-bg-category-purple-subtle: color-mix(in oklab, var(--fx-color-pastel-purple) 10%, var(--fx-bg-page)); --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface)); --fx-bg-error-solid: var(--fx-color-red-600); --fx-bg-info-subtle: color-mix(in oklab, var(--fx-color-blue-300) 16%, var(--fx-bg-surface)); --fx-fg-success: var(--fx-color-green-300); --fx-fg-warning: var(--fx-color-amber-300); --fx-fg-error: var(--fx-color-red-300); --fx-fg-info: var(--fx-color-blue-300); --fx-border-color-default: var(--fx-color-neutral-800); --fx-border-color-strong: var(--fx-color-neutral-700); --fx-border-color-focus: var(--fx-color-neutral-50); --fx-border-color-error: var(--fx-color-red-300); --fx-shadow-color: var(--fx-color-black); --fx-viz-brand: var(--fx-color-neutral-400); --fx-viz-context: var(--fx-color-neutral-600); --fx-viz-accent: var(--fx-color-pastel-yellow); --fx-priority-1: var(--fx-color-priority-1-dark); --fx-priority-2: var(--fx-color-priority-2-dark); --fx-priority-3: var(--fx-color-priority-3-dark); --fx-bg-muted-hover: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 5%); --fx-bg-pressed: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 10%); --fx-bg-error-subtle-active: color-mix(in oklab, var(--fx-bg-error-subtle) 80%, var(--fx-fg-error)); --fx-bg-brand-subtle-hover: color-mix(in oklab, var(--fx-bg-brand-subtle) 85%, var(--fx-text-brand)); --fx-bg-brand-subtle-active: color-mix(in oklab, var(--fx-bg-brand-subtle) 72%, var(--fx-text-brand)); --fx-selection-bg: color-mix(in oklab, var(--fx-bg-brand-solid) 24%, var(--fx-bg-surface)); --fx-selection-text: var(--fx-text-primary); --fx-scrollbar-thumb: color-mix(in oklab, var(--fx-text-primary) 28%, transparent); --fx-viz-ink: color-mix(in oklab, var(--fx-text-primary) 80%, var(--fx-bg-surface)); --fx-viz-risk: var(--fx-bg-error-solid); --fx-viz-grid: var(--fx-border-color-default); --fx-viz-track: color-mix(in oklab, var(--fx-text-primary) 10%, transparent); --fx-priority-4: var(--fx-border-color-strong); } [data-fx-theme="graphite"] { --fx-color-neutral-25: var(--fx-color-gray-25); --fx-color-neutral-50: var(--fx-color-gray-50); --fx-color-neutral-100: var(--fx-color-gray-100); --fx-color-neutral-200: var(--fx-color-gray-200); --fx-color-neutral-300: var(--fx-color-gray-300); --fx-color-neutral-400: var(--fx-color-gray-400); --fx-color-neutral-500: var(--fx-color-gray-500); --fx-color-neutral-600: var(--fx-color-gray-600); --fx-color-neutral-700: var(--fx-color-gray-700); --fx-color-neutral-800: var(--fx-color-gray-800); --fx-color-neutral-900: var(--fx-color-gray-900); --fx-color-neutral-950: var(--fx-color-gray-950); --fx-color-brand-50: var(--fx-color-neutral-50); --fx-color-brand-200: var(--fx-color-neutral-200); --fx-color-brand-300: var(--fx-color-neutral-300); --fx-color-brand-400: var(--fx-color-neutral-400); --fx-color-brand-500: var(--fx-color-neutral-500); --fx-color-brand-600: var(--fx-color-neutral-600); --fx-color-brand-700: var(--fx-color-neutral-700); --fx-color-brand-800: var(--fx-color-neutral-800); --fx-color-pastel-yellow: #F5D77E; --fx-color-pastel-pink: #F3BBD4; --fx-color-pastel-blue: #AECBF2; --fx-color-pastel-coral: #F4A688; --fx-color-pastel-green: #BEDDB2; --fx-color-pastel-purple: #CFC0F3; --fx-text-on-brand: var(--fx-color-white); --fx-text-brand: var(--fx-color-neutral-900); --fx-bg-brand-solid: var(--fx-color-neutral-900); --fx-bg-brand-solid-hover: var(--fx-color-neutral-700); --fx-bg-brand-solid-active: var(--fx-color-neutral-600); --fx-bg-brand-subtle: var(--fx-color-neutral-100); --fx-border-color-focus: var(--fx-color-neutral-900); --fx-viz-brand: var(--fx-color-neutral-500); --fx-text-primary: var(--fx-color-neutral-900); --fx-text-secondary: var(--fx-color-neutral-600); --fx-text-tertiary: var(--fx-color-neutral-500); --fx-text-error: var(--fx-color-red-600); --fx-bg-page: color-mix(in oklab, var(--fx-color-neutral-100) calc(var(--fx-knob-page-tint) * 100%), var(--fx-color-neutral-25)); --fx-bg-surface: var(--fx-color-white); --fx-bg-subtle: var(--fx-color-neutral-50); --fx-bg-muted: var(--fx-color-neutral-100); --fx-text-disabled: var(--fx-color-neutral-400); --fx-text-on-category: var(--fx-color-neutral-900); --fx-text-on-static-light: var(--fx-color-neutral-900); --fx-bg-muted-hover: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 5%); --fx-bg-pressed: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 10%); --fx-bg-error-subtle: var(--fx-color-red-50); --fx-bg-error-subtle-active: color-mix(in oklab, var(--fx-bg-error-subtle) 80%, var(--fx-fg-error)); --fx-bg-success-subtle: var(--fx-color-green-50); --fx-bg-warning-subtle: var(--fx-color-amber-50); --fx-bg-overlay: var(--fx-color-neutral-950); --fx-bg-category-yellow: var(--fx-color-pastel-yellow); --fx-bg-category-yellow-subtle: color-mix(in oklab, var(--fx-color-pastel-yellow) 20%, var(--fx-bg-page)); --fx-bg-category-pink: var(--fx-color-pastel-pink); --fx-bg-category-pink-subtle: color-mix(in oklab, var(--fx-color-pastel-pink) 20%, var(--fx-bg-page)); --fx-bg-category-blue: var(--fx-color-pastel-blue); --fx-bg-category-blue-subtle: color-mix(in oklab, var(--fx-color-pastel-blue) 20%, var(--fx-bg-page)); --fx-bg-category-coral: var(--fx-color-pastel-coral); --fx-bg-category-coral-subtle: color-mix(in oklab, var(--fx-color-pastel-coral) 20%, var(--fx-bg-page)); --fx-bg-category-green: var(--fx-color-pastel-green); --fx-bg-category-green-subtle: color-mix(in oklab, var(--fx-color-pastel-green) 20%, var(--fx-bg-page)); --fx-bg-category-purple: var(--fx-color-pastel-purple); --fx-bg-category-purple-subtle: color-mix(in oklab, var(--fx-color-pastel-purple) 20%, var(--fx-bg-page)); --fx-bg-brand-subtle-hover: color-mix(in oklab, var(--fx-bg-brand-subtle) 85%, var(--fx-text-brand)); --fx-bg-brand-subtle-active: color-mix(in oklab, var(--fx-bg-brand-subtle) 72%, var(--fx-text-brand)); --fx-bg-info-subtle: var(--fx-color-blue-50); --fx-bg-static-light: var(--fx-color-neutral-25); --fx-selection-bg: color-mix(in oklab, var(--fx-bg-brand-solid) 24%, var(--fx-bg-surface)); --fx-selection-text: var(--fx-text-primary); --fx-scrollbar-thumb: color-mix(in oklab, var(--fx-text-primary) 28%, transparent); --fx-border-color-default: var(--fx-color-neutral-200); --fx-border-color-strong: var(--fx-color-neutral-300); --fx-shadow-color: var(--fx-color-neutral-900); --fx-viz-ink: color-mix(in oklab, var(--fx-text-primary) 80%, var(--fx-bg-surface)); --fx-viz-accent: var(--fx-color-pastel-yellow); --fx-viz-context: var(--fx-color-neutral-300); --fx-viz-grid: var(--fx-border-color-default); --fx-viz-track: color-mix(in oklab, var(--fx-text-primary) 10%, transparent); --fx-priority-4: var(--fx-border-color-strong); } @media (prefers-color-scheme: dark) { [data-fx-theme="graphite"]:not([data-fx-scheme="light"], [data-fx-scheme="light"] *) { --fx-text-on-brand: var(--fx-color-neutral-900); --fx-text-brand: var(--fx-color-neutral-50); --fx-bg-brand-solid: var(--fx-color-neutral-50); --fx-bg-brand-solid-hover: var(--fx-color-neutral-200); --fx-bg-brand-solid-active: var(--fx-color-neutral-300); --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface)); --fx-border-color-focus: var(--fx-color-neutral-50); --fx-viz-brand: var(--fx-color-neutral-400); --fx-text-primary: var(--fx-color-neutral-50); --fx-text-secondary: var(--fx-color-neutral-300); --fx-text-tertiary: var(--fx-color-neutral-400); --fx-text-error: var(--fx-color-red-300); --fx-bg-page: var(--fx-color-neutral-950); --fx-bg-surface: var(--fx-color-neutral-900); --fx-bg-subtle: var(--fx-color-neutral-900); --fx-bg-muted: var(--fx-color-neutral-800); --fx-text-disabled: var(--fx-color-neutral-600); --fx-text-on-category: var(--fx-color-neutral-50); --fx-bg-muted-hover: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 5%); --fx-bg-pressed: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 10%); --fx-bg-error-subtle: color-mix(in oklab, var(--fx-color-red-300) 16%, var(--fx-bg-surface)); --fx-bg-error-subtle-active: color-mix(in oklab, var(--fx-bg-error-subtle) 80%, var(--fx-fg-error)); --fx-bg-success-subtle: color-mix(in oklab, var(--fx-color-green-300) 16%, var(--fx-bg-surface)); --fx-bg-warning-subtle: color-mix(in oklab, var(--fx-color-amber-300) 16%, var(--fx-bg-surface)); --fx-bg-overlay: var(--fx-color-black); --fx-bg-category-yellow: color-mix(in oklab, var(--fx-color-pastel-yellow) 45%, var(--fx-color-neutral-950)); --fx-bg-category-yellow-subtle: color-mix(in oklab, var(--fx-color-pastel-yellow) 10%, var(--fx-bg-page)); --fx-bg-category-pink: color-mix(in oklab, var(--fx-color-pastel-pink) 45%, var(--fx-color-neutral-950)); --fx-bg-category-pink-subtle: color-mix(in oklab, var(--fx-color-pastel-pink) 10%, var(--fx-bg-page)); --fx-bg-category-blue: color-mix(in oklab, var(--fx-color-pastel-blue) 45%, var(--fx-color-neutral-950)); --fx-bg-category-blue-subtle: color-mix(in oklab, var(--fx-color-pastel-blue) 10%, var(--fx-bg-page)); --fx-bg-category-coral: color-mix(in oklab, var(--fx-color-pastel-coral) 45%, var(--fx-color-neutral-950)); --fx-bg-category-coral-subtle: color-mix(in oklab, var(--fx-color-pastel-coral) 10%, var(--fx-bg-page)); --fx-bg-category-green: color-mix(in oklab, var(--fx-color-pastel-green) 45%, var(--fx-color-neutral-950)); --fx-bg-category-green-subtle: color-mix(in oklab, var(--fx-color-pastel-green) 10%, var(--fx-bg-page)); --fx-bg-category-purple: color-mix(in oklab, var(--fx-color-pastel-purple) 45%, var(--fx-color-neutral-950)); --fx-bg-category-purple-subtle: color-mix(in oklab, var(--fx-color-pastel-purple) 10%, var(--fx-bg-page)); --fx-bg-brand-subtle-hover: color-mix(in oklab, var(--fx-bg-brand-subtle) 85%, var(--fx-text-brand)); --fx-bg-brand-subtle-active: color-mix(in oklab, var(--fx-bg-brand-subtle) 72%, var(--fx-text-brand)); --fx-bg-info-subtle: color-mix(in oklab, var(--fx-color-blue-300) 16%, var(--fx-bg-surface)); --fx-selection-bg: color-mix(in oklab, var(--fx-bg-brand-solid) 24%, var(--fx-bg-surface)); --fx-selection-text: var(--fx-text-primary); --fx-scrollbar-thumb: color-mix(in oklab, var(--fx-text-primary) 28%, transparent); --fx-border-color-default: var(--fx-color-neutral-800); --fx-border-color-strong: var(--fx-color-neutral-700); --fx-shadow-color: var(--fx-color-black); --fx-viz-ink: color-mix(in oklab, var(--fx-text-primary) 80%, var(--fx-bg-surface)); --fx-viz-accent: var(--fx-color-pastel-yellow); --fx-viz-context: var(--fx-color-neutral-600); --fx-viz-grid: var(--fx-border-color-default); --fx-viz-track: color-mix(in oklab, var(--fx-text-primary) 10%, transparent); --fx-priority-4: var(--fx-border-color-strong); } } [data-fx-theme="graphite"][data-fx-scheme="dark"], [data-fx-theme="graphite"] [data-fx-scheme="dark"]:not([data-fx-theme]), [data-fx-scheme="dark"] [data-fx-theme="graphite"]:not([data-fx-scheme="light"]) { --fx-text-on-brand: var(--fx-color-neutral-900); --fx-text-brand: var(--fx-color-neutral-50); --fx-bg-brand-solid: var(--fx-color-neutral-50); --fx-bg-brand-solid-hover: var(--fx-color-neutral-200); --fx-bg-brand-solid-active: var(--fx-color-neutral-300); --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface)); --fx-border-color-focus: var(--fx-color-neutral-50); --fx-viz-brand: var(--fx-color-neutral-400); --fx-text-primary: var(--fx-color-neutral-50); --fx-text-secondary: var(--fx-color-neutral-300); --fx-text-tertiary: var(--fx-color-neutral-400); --fx-text-error: var(--fx-color-red-300); --fx-bg-page: var(--fx-color-neutral-950); --fx-bg-surface: var(--fx-color-neutral-900); --fx-bg-subtle: var(--fx-color-neutral-900); --fx-bg-muted: var(--fx-color-neutral-800); --fx-text-disabled: var(--fx-color-neutral-600); --fx-text-on-category: var(--fx-color-neutral-50); --fx-bg-muted-hover: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 5%); --fx-bg-pressed: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 10%); --fx-bg-error-subtle: color-mix(in oklab, var(--fx-color-red-300) 16%, var(--fx-bg-surface)); --fx-bg-error-subtle-active: color-mix(in oklab, var(--fx-bg-error-subtle) 80%, var(--fx-fg-error)); --fx-bg-success-subtle: color-mix(in oklab, var(--fx-color-green-300) 16%, var(--fx-bg-surface)); --fx-bg-warning-subtle: color-mix(in oklab, var(--fx-color-amber-300) 16%, var(--fx-bg-surface)); --fx-bg-overlay: var(--fx-color-black); --fx-bg-category-yellow: color-mix(in oklab, var(--fx-color-pastel-yellow) 45%, var(--fx-color-neutral-950)); --fx-bg-category-yellow-subtle: color-mix(in oklab, var(--fx-color-pastel-yellow) 10%, var(--fx-bg-page)); --fx-bg-category-pink: color-mix(in oklab, var(--fx-color-pastel-pink) 45%, var(--fx-color-neutral-950)); --fx-bg-category-pink-subtle: color-mix(in oklab, var(--fx-color-pastel-pink) 10%, var(--fx-bg-page)); --fx-bg-category-blue: color-mix(in oklab, var(--fx-color-pastel-blue) 45%, var(--fx-color-neutral-950)); --fx-bg-category-blue-subtle: color-mix(in oklab, var(--fx-color-pastel-blue) 10%, var(--fx-bg-page)); --fx-bg-category-coral: color-mix(in oklab, var(--fx-color-pastel-coral) 45%, var(--fx-color-neutral-950)); --fx-bg-category-coral-subtle: color-mix(in oklab, var(--fx-color-pastel-coral) 10%, var(--fx-bg-page)); --fx-bg-category-green: color-mix(in oklab, var(--fx-color-pastel-green) 45%, var(--fx-color-neutral-950)); --fx-bg-category-green-subtle: color-mix(in oklab, var(--fx-color-pastel-green) 10%, var(--fx-bg-page)); --fx-bg-category-purple: color-mix(in oklab, var(--fx-color-pastel-purple) 45%, var(--fx-color-neutral-950)); --fx-bg-category-purple-subtle: color-mix(in oklab, var(--fx-color-pastel-purple) 10%, var(--fx-bg-page)); --fx-bg-brand-subtle-hover: color-mix(in oklab, var(--fx-bg-brand-subtle) 85%, var(--fx-text-brand)); --fx-bg-brand-subtle-active: color-mix(in oklab, var(--fx-bg-brand-subtle) 72%, var(--fx-text-brand)); --fx-bg-info-subtle: color-mix(in oklab, var(--fx-color-blue-300) 16%, var(--fx-bg-surface)); --fx-selection-bg: color-mix(in oklab, var(--fx-bg-brand-solid) 24%, var(--fx-bg-surface)); --fx-selection-text: var(--fx-text-primary); --fx-scrollbar-thumb: color-mix(in oklab, var(--fx-text-primary) 28%, transparent); --fx-border-color-default: var(--fx-color-neutral-800); --fx-border-color-strong: var(--fx-color-neutral-700); --fx-shadow-color: var(--fx-color-black); --fx-viz-ink: color-mix(in oklab, var(--fx-text-primary) 80%, var(--fx-bg-surface)); --fx-viz-accent: var(--fx-color-pastel-yellow); --fx-viz-context: var(--fx-color-neutral-600); --fx-viz-grid: var(--fx-border-color-default); --fx-viz-track: color-mix(in oklab, var(--fx-text-primary) 10%, transparent); --fx-priority-4: var(--fx-border-color-strong); } [data-fx-theme="amber"], [data-fx-theme="amber"][data-fx-scheme="light"], [data-fx-theme="amber"] [data-fx-scheme="light"]:not([data-fx-theme]) { --fx-color-neutral-25: #FDFBF8; --fx-color-neutral-50: #F9F6F3; --fx-color-neutral-100: #F2F0ED; --fx-color-neutral-200: #E7E4E1; --fx-color-neutral-300: #D9D3CD; --fx-color-neutral-400: #A8A29C; --fx-color-neutral-500: #706B65; --fx-color-neutral-600: #58534D; --fx-color-neutral-700: #45403B; --fx-color-neutral-800: #2B2722; --fx-color-neutral-900: #1D1914; --fx-color-neutral-950: #15110C; --fx-color-brand-50: #FFF3E6; --fx-color-brand-200: #F8CD9D; --fx-color-brand-300: #E8B273; --fx-color-brand-400: #D6933C; --fx-color-brand-500: #F59E0B; --fx-color-brand-600: #A06604; --fx-color-brand-700: #865400; --fx-color-brand-800: #6C4301; --fx-color-pastel-yellow: #FED2A0; --fx-color-pastel-pink: #FFBBD1; --fx-color-pastel-blue: #B3D4FE; --fx-color-pastel-coral: #FFC0A9; --fx-color-pastel-green: #BBDEA4; --fx-color-pastel-purple: #D9C6FF; --fx-text-on-brand: var(--fx-color-neutral-950); --fx-text-brand: var(--fx-color-brand-700); --fx-bg-brand-solid: var(--fx-color-brand-500); --fx-bg-brand-solid-hover: var(--fx-color-brand-400); --fx-bg-brand-solid-active: var(--fx-color-brand-300); --fx-bg-brand-subtle: var(--fx-color-brand-50); --fx-border-color-focus: var(--fx-color-brand-600); --fx-viz-brand: var(--fx-color-brand-700); --fx-text-primary: var(--fx-color-neutral-900); --fx-text-secondary: var(--fx-color-neutral-600); --fx-text-tertiary: var(--fx-color-neutral-500); --fx-text-disabled: var(--fx-color-neutral-400); --fx-text-on-category: var(--fx-color-neutral-900); --fx-text-on-static-light: var(--fx-color-neutral-900); --fx-bg-page: color-mix(in oklab, var(--fx-color-neutral-100) calc(var(--fx-knob-page-tint) * 100%), var(--fx-color-neutral-25)); --fx-bg-surface: var(--fx-color-white); --fx-bg-subtle: var(--fx-color-neutral-50); --fx-bg-muted: var(--fx-color-neutral-100); --fx-bg-muted-hover: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 5%); --fx-bg-pressed: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 10%); --fx-bg-error-subtle: var(--fx-color-red-50); --fx-bg-error-subtle-active: color-mix(in oklab, var(--fx-bg-error-subtle) 80%, var(--fx-fg-error)); --fx-bg-success-subtle: var(--fx-color-green-50); --fx-bg-warning-subtle: var(--fx-color-amber-50); --fx-bg-overlay: var(--fx-color-neutral-950); --fx-bg-category-yellow: var(--fx-color-pastel-yellow); --fx-bg-category-yellow-subtle: color-mix(in oklab, var(--fx-color-pastel-yellow) 20%, var(--fx-bg-page)); --fx-bg-category-pink: var(--fx-color-pastel-pink); --fx-bg-category-pink-subtle: color-mix(in oklab, var(--fx-color-pastel-pink) 20%, var(--fx-bg-page)); --fx-bg-category-blue: var(--fx-color-pastel-blue); --fx-bg-category-blue-subtle: color-mix(in oklab, var(--fx-color-pastel-blue) 20%, var(--fx-bg-page)); --fx-bg-category-coral: var(--fx-color-pastel-coral); --fx-bg-category-coral-subtle: color-mix(in oklab, var(--fx-color-pastel-coral) 20%, var(--fx-bg-page)); --fx-bg-category-green: var(--fx-color-pastel-green); --fx-bg-category-green-subtle: color-mix(in oklab, var(--fx-color-pastel-green) 20%, var(--fx-bg-page)); --fx-bg-category-purple: var(--fx-color-pastel-purple); --fx-bg-category-purple-subtle: color-mix(in oklab, var(--fx-color-pastel-purple) 20%, var(--fx-bg-page)); --fx-bg-brand-subtle-hover: color-mix(in oklab, var(--fx-bg-brand-subtle) 85%, var(--fx-text-brand)); --fx-bg-brand-subtle-active: color-mix(in oklab, var(--fx-bg-brand-subtle) 72%, var(--fx-text-brand)); --fx-bg-info-subtle: var(--fx-color-blue-50); --fx-bg-static-light: var(--fx-color-neutral-25); --fx-selection-bg: color-mix(in oklab, var(--fx-bg-brand-solid) 24%, var(--fx-bg-surface)); --fx-selection-text: var(--fx-text-primary); --fx-scrollbar-thumb: color-mix(in oklab, var(--fx-text-primary) 28%, transparent); --fx-border-color-default: var(--fx-color-neutral-200); --fx-border-color-strong: var(--fx-color-neutral-300); --fx-shadow-color: var(--fx-color-neutral-900); --fx-viz-ink: color-mix(in oklab, var(--fx-text-primary) 80%, var(--fx-bg-surface)); --fx-viz-accent: var(--fx-color-pastel-yellow); --fx-viz-context: var(--fx-color-neutral-300); --fx-viz-grid: var(--fx-border-color-default); --fx-viz-track: color-mix(in oklab, var(--fx-text-primary) 10%, transparent); --fx-priority-4: var(--fx-border-color-strong); } @media (prefers-color-scheme: dark) { [data-fx-theme="amber"]:not([data-fx-scheme="light"], [data-fx-scheme="light"] *) { --fx-text-on-brand: var(--fx-color-neutral-950); --fx-text-brand: var(--fx-color-brand-300); --fx-bg-brand-solid: var(--fx-color-brand-400); --fx-bg-brand-solid-hover: var(--fx-color-brand-300); --fx-bg-brand-solid-active: var(--fx-color-brand-200); --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface)); --fx-border-color-focus: var(--fx-color-brand-400); --fx-viz-brand: var(--fx-color-brand-400); --fx-text-primary: var(--fx-color-neutral-50); --fx-text-secondary: var(--fx-color-neutral-300); --fx-text-tertiary: var(--fx-color-neutral-400); --fx-text-disabled: var(--fx-color-neutral-600); --fx-text-on-category: var(--fx-color-neutral-50); --fx-bg-page: var(--fx-color-neutral-950); --fx-bg-surface: var(--fx-color-neutral-900); --fx-bg-subtle: var(--fx-color-neutral-900); --fx-bg-muted: var(--fx-color-neutral-800); --fx-bg-muted-hover: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 5%); --fx-bg-pressed: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 10%); --fx-bg-error-subtle: color-mix(in oklab, var(--fx-color-red-300) 16%, var(--fx-bg-surface)); --fx-bg-error-subtle-active: color-mix(in oklab, var(--fx-bg-error-subtle) 80%, var(--fx-fg-error)); --fx-bg-success-subtle: color-mix(in oklab, var(--fx-color-green-300) 16%, var(--fx-bg-surface)); --fx-bg-warning-subtle: color-mix(in oklab, var(--fx-color-amber-300) 16%, var(--fx-bg-surface)); --fx-bg-overlay: var(--fx-color-black); --fx-bg-category-yellow: color-mix(in oklab, var(--fx-color-pastel-yellow) 45%, var(--fx-color-neutral-950)); --fx-bg-category-yellow-subtle: color-mix(in oklab, var(--fx-color-pastel-yellow) 10%, var(--fx-bg-page)); --fx-bg-category-pink: color-mix(in oklab, var(--fx-color-pastel-pink) 45%, var(--fx-color-neutral-950)); --fx-bg-category-pink-subtle: color-mix(in oklab, var(--fx-color-pastel-pink) 10%, var(--fx-bg-page)); --fx-bg-category-blue: color-mix(in oklab, var(--fx-color-pastel-blue) 45%, var(--fx-color-neutral-950)); --fx-bg-category-blue-subtle: color-mix(in oklab, var(--fx-color-pastel-blue) 10%, var(--fx-bg-page)); --fx-bg-category-coral: color-mix(in oklab, var(--fx-color-pastel-coral) 45%, var(--fx-color-neutral-950)); --fx-bg-category-coral-subtle: color-mix(in oklab, var(--fx-color-pastel-coral) 10%, var(--fx-bg-page)); --fx-bg-category-green: color-mix(in oklab, var(--fx-color-pastel-green) 45%, var(--fx-color-neutral-950)); --fx-bg-category-green-subtle: color-mix(in oklab, var(--fx-color-pastel-green) 10%, var(--fx-bg-page)); --fx-bg-category-purple: color-mix(in oklab, var(--fx-color-pastel-purple) 45%, var(--fx-color-neutral-950)); --fx-bg-category-purple-subtle: color-mix(in oklab, var(--fx-color-pastel-purple) 10%, var(--fx-bg-page)); --fx-bg-brand-subtle-hover: color-mix(in oklab, var(--fx-bg-brand-subtle) 85%, var(--fx-text-brand)); --fx-bg-brand-subtle-active: color-mix(in oklab, var(--fx-bg-brand-subtle) 72%, var(--fx-text-brand)); --fx-bg-info-subtle: color-mix(in oklab, var(--fx-color-blue-300) 16%, var(--fx-bg-surface)); --fx-selection-bg: color-mix(in oklab, var(--fx-bg-brand-solid) 24%, var(--fx-bg-surface)); --fx-selection-text: var(--fx-text-primary); --fx-scrollbar-thumb: color-mix(in oklab, var(--fx-text-primary) 28%, transparent); --fx-border-color-default: var(--fx-color-neutral-800); --fx-border-color-strong: var(--fx-color-neutral-700); --fx-shadow-color: var(--fx-color-black); --fx-viz-ink: color-mix(in oklab, var(--fx-text-primary) 80%, var(--fx-bg-surface)); --fx-viz-accent: var(--fx-color-pastel-yellow); --fx-viz-context: var(--fx-color-neutral-600); --fx-viz-grid: var(--fx-border-color-default); --fx-viz-track: color-mix(in oklab, var(--fx-text-primary) 10%, transparent); --fx-priority-4: var(--fx-border-color-strong); } } [data-fx-theme="amber"][data-fx-scheme="dark"], [data-fx-theme="amber"] [data-fx-scheme="dark"]:not([data-fx-theme]), [data-fx-scheme="dark"] [data-fx-theme="amber"]:not([data-fx-scheme="light"]) { --fx-text-on-brand: var(--fx-color-neutral-950); --fx-text-brand: var(--fx-color-brand-300); --fx-bg-brand-solid: var(--fx-color-brand-400); --fx-bg-brand-solid-hover: var(--fx-color-brand-300); --fx-bg-brand-solid-active: var(--fx-color-brand-200); --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface)); --fx-border-color-focus: var(--fx-color-brand-400); --fx-viz-brand: var(--fx-color-brand-400); --fx-text-primary: var(--fx-color-neutral-50); --fx-text-secondary: var(--fx-color-neutral-300); --fx-text-tertiary: var(--fx-color-neutral-400); --fx-text-disabled: var(--fx-color-neutral-600); --fx-text-on-category: var(--fx-color-neutral-50); --fx-bg-page: var(--fx-color-neutral-950); --fx-bg-surface: var(--fx-color-neutral-900); --fx-bg-subtle: var(--fx-color-neutral-900); --fx-bg-muted: var(--fx-color-neutral-800); --fx-bg-muted-hover: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 5%); --fx-bg-pressed: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 10%); --fx-bg-error-subtle: color-mix(in oklab, var(--fx-color-red-300) 16%, var(--fx-bg-surface)); --fx-bg-error-subtle-active: color-mix(in oklab, var(--fx-bg-error-subtle) 80%, var(--fx-fg-error)); --fx-bg-success-subtle: color-mix(in oklab, var(--fx-color-green-300) 16%, var(--fx-bg-surface)); --fx-bg-warning-subtle: color-mix(in oklab, var(--fx-color-amber-300) 16%, var(--fx-bg-surface)); --fx-bg-overlay: var(--fx-color-black); --fx-bg-category-yellow: color-mix(in oklab, var(--fx-color-pastel-yellow) 45%, var(--fx-color-neutral-950)); --fx-bg-category-yellow-subtle: color-mix(in oklab, var(--fx-color-pastel-yellow) 10%, var(--fx-bg-page)); --fx-bg-category-pink: color-mix(in oklab, var(--fx-color-pastel-pink) 45%, var(--fx-color-neutral-950)); --fx-bg-category-pink-subtle: color-mix(in oklab, var(--fx-color-pastel-pink) 10%, var(--fx-bg-page)); --fx-bg-category-blue: color-mix(in oklab, var(--fx-color-pastel-blue) 45%, var(--fx-color-neutral-950)); --fx-bg-category-blue-subtle: color-mix(in oklab, var(--fx-color-pastel-blue) 10%, var(--fx-bg-page)); --fx-bg-category-coral: color-mix(in oklab, var(--fx-color-pastel-coral) 45%, var(--fx-color-neutral-950)); --fx-bg-category-coral-subtle: color-mix(in oklab, var(--fx-color-pastel-coral) 10%, var(--fx-bg-page)); --fx-bg-category-green: color-mix(in oklab, var(--fx-color-pastel-green) 45%, var(--fx-color-neutral-950)); --fx-bg-category-green-subtle: color-mix(in oklab, var(--fx-color-pastel-green) 10%, var(--fx-bg-page)); --fx-bg-category-purple: color-mix(in oklab, var(--fx-color-pastel-purple) 45%, var(--fx-color-neutral-950)); --fx-bg-category-purple-subtle: color-mix(in oklab, var(--fx-color-pastel-purple) 10%, var(--fx-bg-page)); --fx-bg-brand-subtle-hover: color-mix(in oklab, var(--fx-bg-brand-subtle) 85%, var(--fx-text-brand)); --fx-bg-brand-subtle-active: color-mix(in oklab, var(--fx-bg-brand-subtle) 72%, var(--fx-text-brand)); --fx-bg-info-subtle: color-mix(in oklab, var(--fx-color-blue-300) 16%, var(--fx-bg-surface)); --fx-selection-bg: color-mix(in oklab, var(--fx-bg-brand-solid) 24%, var(--fx-bg-surface)); --fx-selection-text: var(--fx-text-primary); --fx-scrollbar-thumb: color-mix(in oklab, var(--fx-text-primary) 28%, transparent); --fx-border-color-default: var(--fx-color-neutral-800); --fx-border-color-strong: var(--fx-color-neutral-700); --fx-shadow-color: var(--fx-color-black); --fx-viz-ink: color-mix(in oklab, var(--fx-text-primary) 80%, var(--fx-bg-surface)); --fx-viz-accent: var(--fx-color-pastel-yellow); --fx-viz-context: var(--fx-color-neutral-600); --fx-viz-grid: var(--fx-border-color-default); --fx-viz-track: color-mix(in oklab, var(--fx-text-primary) 10%, transparent); --fx-priority-4: var(--fx-border-color-strong); } [data-fx-theme="amethyst"], [data-fx-theme="amethyst"][data-fx-scheme="light"], [data-fx-theme="amethyst"] [data-fx-scheme="light"]:not([data-fx-theme]) { --fx-color-neutral-25: #FBFAFE; --fx-color-neutral-50: #F7F6FA; --fx-color-neutral-100: #F0EFF3; --fx-color-neutral-200: #E4E4E8; --fx-color-neutral-300: #D4D3DB; --fx-color-neutral-400: #A3A2A9; --fx-color-neutral-500: #6C6B72; --fx-color-neutral-600: #54535A; --fx-color-neutral-700: #414047; --fx-color-neutral-800: #28272D; --fx-color-neutral-900: #19191E; --fx-color-neutral-950: #121116; --fx-color-brand-50: #F5F3FF; --fx-color-brand-200: #D7CEFE; --fx-color-brand-300: #C0B0FF; --fx-color-brand-400: #A88DFE; --fx-color-brand-500: #9466FF; --fx-color-brand-600: #7C3AED; --fx-color-brand-700: #693DC2; --fx-color-brand-800: #54329B; --fx-color-pastel-yellow: #F5D983; --fx-color-pastel-pink: #FABBDE; --fx-color-pastel-blue: #B6D3FF; --fx-color-pastel-coral: #FEC0AD; --fx-color-pastel-green: #B4DFAA; --fx-color-pastel-purple: #D2C8FF; --fx-text-on-brand: var(--fx-color-white); --fx-text-brand: var(--fx-color-brand-700); --fx-bg-brand-solid: var(--fx-color-brand-600); --fx-bg-brand-solid-hover: var(--fx-color-brand-700); --fx-bg-brand-solid-active: var(--fx-color-brand-800); --fx-bg-brand-subtle: var(--fx-color-brand-50); --fx-border-color-focus: var(--fx-color-brand-600); --fx-viz-brand: var(--fx-color-brand-700); --fx-text-primary: var(--fx-color-neutral-900); --fx-text-secondary: var(--fx-color-neutral-600); --fx-text-tertiary: var(--fx-color-neutral-500); --fx-text-disabled: var(--fx-color-neutral-400); --fx-text-on-category: var(--fx-color-neutral-900); --fx-text-on-static-light: var(--fx-color-neutral-900); --fx-bg-page: color-mix(in oklab, var(--fx-color-neutral-100) calc(var(--fx-knob-page-tint) * 100%), var(--fx-color-neutral-25)); --fx-bg-surface: var(--fx-color-white); --fx-bg-subtle: var(--fx-color-neutral-50); --fx-bg-muted: var(--fx-color-neutral-100); --fx-bg-muted-hover: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 5%); --fx-bg-pressed: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 10%); --fx-bg-error-subtle: var(--fx-color-red-50); --fx-bg-error-subtle-active: color-mix(in oklab, var(--fx-bg-error-subtle) 80%, var(--fx-fg-error)); --fx-bg-success-subtle: var(--fx-color-green-50); --fx-bg-warning-subtle: var(--fx-color-amber-50); --fx-bg-overlay: var(--fx-color-neutral-950); --fx-bg-category-yellow: var(--fx-color-pastel-yellow); --fx-bg-category-yellow-subtle: color-mix(in oklab, var(--fx-color-pastel-yellow) 20%, var(--fx-bg-page)); --fx-bg-category-pink: var(--fx-color-pastel-pink); --fx-bg-category-pink-subtle: color-mix(in oklab, var(--fx-color-pastel-pink) 20%, var(--fx-bg-page)); --fx-bg-category-blue: var(--fx-color-pastel-blue); --fx-bg-category-blue-subtle: color-mix(in oklab, var(--fx-color-pastel-blue) 20%, var(--fx-bg-page)); --fx-bg-category-coral: var(--fx-color-pastel-coral); --fx-bg-category-coral-subtle: color-mix(in oklab, var(--fx-color-pastel-coral) 20%, var(--fx-bg-page)); --fx-bg-category-green: var(--fx-color-pastel-green); --fx-bg-category-green-subtle: color-mix(in oklab, var(--fx-color-pastel-green) 20%, var(--fx-bg-page)); --fx-bg-category-purple: var(--fx-color-pastel-purple); --fx-bg-category-purple-subtle: color-mix(in oklab, var(--fx-color-pastel-purple) 20%, var(--fx-bg-page)); --fx-bg-brand-subtle-hover: color-mix(in oklab, var(--fx-bg-brand-subtle) 85%, var(--fx-text-brand)); --fx-bg-brand-subtle-active: color-mix(in oklab, var(--fx-bg-brand-subtle) 72%, var(--fx-text-brand)); --fx-bg-info-subtle: var(--fx-color-blue-50); --fx-bg-static-light: var(--fx-color-neutral-25); --fx-selection-bg: color-mix(in oklab, var(--fx-bg-brand-solid) 24%, var(--fx-bg-surface)); --fx-selection-text: var(--fx-text-primary); --fx-scrollbar-thumb: color-mix(in oklab, var(--fx-text-primary) 28%, transparent); --fx-border-color-default: var(--fx-color-neutral-200); --fx-border-color-strong: var(--fx-color-neutral-300); --fx-shadow-color: var(--fx-color-neutral-900); --fx-viz-ink: color-mix(in oklab, var(--fx-text-primary) 80%, var(--fx-bg-surface)); --fx-viz-accent: var(--fx-color-pastel-yellow); --fx-viz-context: var(--fx-color-neutral-300); --fx-viz-grid: var(--fx-border-color-default); --fx-viz-track: color-mix(in oklab, var(--fx-text-primary) 10%, transparent); --fx-priority-4: var(--fx-border-color-strong); } @media (prefers-color-scheme: dark) { [data-fx-theme="amethyst"]:not([data-fx-scheme="light"], [data-fx-scheme="light"] *) { --fx-text-on-brand: var(--fx-color-neutral-950); --fx-text-brand: var(--fx-color-brand-300); --fx-bg-brand-solid: var(--fx-color-brand-400); --fx-bg-brand-solid-hover: var(--fx-color-brand-300); --fx-bg-brand-solid-active: var(--fx-color-brand-200); --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface)); --fx-border-color-focus: var(--fx-color-brand-400); --fx-viz-brand: var(--fx-color-brand-400); --fx-text-primary: var(--fx-color-neutral-50); --fx-text-secondary: var(--fx-color-neutral-300); --fx-text-tertiary: var(--fx-color-neutral-400); --fx-text-disabled: var(--fx-color-neutral-600); --fx-text-on-category: var(--fx-color-neutral-50); --fx-bg-page: var(--fx-color-neutral-950); --fx-bg-surface: var(--fx-color-neutral-900); --fx-bg-subtle: var(--fx-color-neutral-900); --fx-bg-muted: var(--fx-color-neutral-800); --fx-bg-muted-hover: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 5%); --fx-bg-pressed: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 10%); --fx-bg-error-subtle: color-mix(in oklab, var(--fx-color-red-300) 16%, var(--fx-bg-surface)); --fx-bg-error-subtle-active: color-mix(in oklab, var(--fx-bg-error-subtle) 80%, var(--fx-fg-error)); --fx-bg-success-subtle: color-mix(in oklab, var(--fx-color-green-300) 16%, var(--fx-bg-surface)); --fx-bg-warning-subtle: color-mix(in oklab, var(--fx-color-amber-300) 16%, var(--fx-bg-surface)); --fx-bg-overlay: var(--fx-color-black); --fx-bg-category-yellow: color-mix(in oklab, var(--fx-color-pastel-yellow) 45%, var(--fx-color-neutral-950)); --fx-bg-category-yellow-subtle: color-mix(in oklab, var(--fx-color-pastel-yellow) 10%, var(--fx-bg-page)); --fx-bg-category-pink: color-mix(in oklab, var(--fx-color-pastel-pink) 45%, var(--fx-color-neutral-950)); --fx-bg-category-pink-subtle: color-mix(in oklab, var(--fx-color-pastel-pink) 10%, var(--fx-bg-page)); --fx-bg-category-blue: color-mix(in oklab, var(--fx-color-pastel-blue) 45%, var(--fx-color-neutral-950)); --fx-bg-category-blue-subtle: color-mix(in oklab, var(--fx-color-pastel-blue) 10%, var(--fx-bg-page)); --fx-bg-category-coral: color-mix(in oklab, var(--fx-color-pastel-coral) 45%, var(--fx-color-neutral-950)); --fx-bg-category-coral-subtle: color-mix(in oklab, var(--fx-color-pastel-coral) 10%, var(--fx-bg-page)); --fx-bg-category-green: color-mix(in oklab, var(--fx-color-pastel-green) 45%, var(--fx-color-neutral-950)); --fx-bg-category-green-subtle: color-mix(in oklab, var(--fx-color-pastel-green) 10%, var(--fx-bg-page)); --fx-bg-category-purple: color-mix(in oklab, var(--fx-color-pastel-purple) 45%, var(--fx-color-neutral-950)); --fx-bg-category-purple-subtle: color-mix(in oklab, var(--fx-color-pastel-purple) 10%, var(--fx-bg-page)); --fx-bg-brand-subtle-hover: color-mix(in oklab, var(--fx-bg-brand-subtle) 85%, var(--fx-text-brand)); --fx-bg-brand-subtle-active: color-mix(in oklab, var(--fx-bg-brand-subtle) 72%, var(--fx-text-brand)); --fx-bg-info-subtle: color-mix(in oklab, var(--fx-color-blue-300) 16%, var(--fx-bg-surface)); --fx-selection-bg: color-mix(in oklab, var(--fx-bg-brand-solid) 24%, var(--fx-bg-surface)); --fx-selection-text: var(--fx-text-primary); --fx-scrollbar-thumb: color-mix(in oklab, var(--fx-text-primary) 28%, transparent); --fx-border-color-default: var(--fx-color-neutral-800); --fx-border-color-strong: var(--fx-color-neutral-700); --fx-shadow-color: var(--fx-color-black); --fx-viz-ink: color-mix(in oklab, var(--fx-text-primary) 80%, var(--fx-bg-surface)); --fx-viz-accent: var(--fx-color-pastel-yellow); --fx-viz-context: var(--fx-color-neutral-600); --fx-viz-grid: var(--fx-border-color-default); --fx-viz-track: color-mix(in oklab, var(--fx-text-primary) 10%, transparent); --fx-priority-4: var(--fx-border-color-strong); } } [data-fx-theme="amethyst"][data-fx-scheme="dark"], [data-fx-theme="amethyst"] [data-fx-scheme="dark"]:not([data-fx-theme]), [data-fx-scheme="dark"] [data-fx-theme="amethyst"]:not([data-fx-scheme="light"]) { --fx-text-on-brand: var(--fx-color-neutral-950); --fx-text-brand: var(--fx-color-brand-300); --fx-bg-brand-solid: var(--fx-color-brand-400); --fx-bg-brand-solid-hover: var(--fx-color-brand-300); --fx-bg-brand-solid-active: var(--fx-color-brand-200); --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface)); --fx-border-color-focus: var(--fx-color-brand-400); --fx-viz-brand: var(--fx-color-brand-400); --fx-text-primary: var(--fx-color-neutral-50); --fx-text-secondary: var(--fx-color-neutral-300); --fx-text-tertiary: var(--fx-color-neutral-400); --fx-text-disabled: var(--fx-color-neutral-600); --fx-text-on-category: var(--fx-color-neutral-50); --fx-bg-page: var(--fx-color-neutral-950); --fx-bg-surface: var(--fx-color-neutral-900); --fx-bg-subtle: var(--fx-color-neutral-900); --fx-bg-muted: var(--fx-color-neutral-800); --fx-bg-muted-hover: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 5%); --fx-bg-pressed: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 10%); --fx-bg-error-subtle: color-mix(in oklab, var(--fx-color-red-300) 16%, var(--fx-bg-surface)); --fx-bg-error-subtle-active: color-mix(in oklab, var(--fx-bg-error-subtle) 80%, var(--fx-fg-error)); --fx-bg-success-subtle: color-mix(in oklab, var(--fx-color-green-300) 16%, var(--fx-bg-surface)); --fx-bg-warning-subtle: color-mix(in oklab, var(--fx-color-amber-300) 16%, var(--fx-bg-surface)); --fx-bg-overlay: var(--fx-color-black); --fx-bg-category-yellow: color-mix(in oklab, var(--fx-color-pastel-yellow) 45%, var(--fx-color-neutral-950)); --fx-bg-category-yellow-subtle: color-mix(in oklab, var(--fx-color-pastel-yellow) 10%, var(--fx-bg-page)); --fx-bg-category-pink: color-mix(in oklab, var(--fx-color-pastel-pink) 45%, var(--fx-color-neutral-950)); --fx-bg-category-pink-subtle: color-mix(in oklab, var(--fx-color-pastel-pink) 10%, var(--fx-bg-page)); --fx-bg-category-blue: color-mix(in oklab, var(--fx-color-pastel-blue) 45%, var(--fx-color-neutral-950)); --fx-bg-category-blue-subtle: color-mix(in oklab, var(--fx-color-pastel-blue) 10%, var(--fx-bg-page)); --fx-bg-category-coral: color-mix(in oklab, var(--fx-color-pastel-coral) 45%, var(--fx-color-neutral-950)); --fx-bg-category-coral-subtle: color-mix(in oklab, var(--fx-color-pastel-coral) 10%, var(--fx-bg-page)); --fx-bg-category-green: color-mix(in oklab, var(--fx-color-pastel-green) 45%, var(--fx-color-neutral-950)); --fx-bg-category-green-subtle: color-mix(in oklab, var(--fx-color-pastel-green) 10%, var(--fx-bg-page)); --fx-bg-category-purple: color-mix(in oklab, var(--fx-color-pastel-purple) 45%, var(--fx-color-neutral-950)); --fx-bg-category-purple-subtle: color-mix(in oklab, var(--fx-color-pastel-purple) 10%, var(--fx-bg-page)); --fx-bg-brand-subtle-hover: color-mix(in oklab, var(--fx-bg-brand-subtle) 85%, var(--fx-text-brand)); --fx-bg-brand-subtle-active: color-mix(in oklab, var(--fx-bg-brand-subtle) 72%, var(--fx-text-brand)); --fx-bg-info-subtle: color-mix(in oklab, var(--fx-color-blue-300) 16%, var(--fx-bg-surface)); --fx-selection-bg: color-mix(in oklab, var(--fx-bg-brand-solid) 24%, var(--fx-bg-surface)); --fx-selection-text: var(--fx-text-primary); --fx-scrollbar-thumb: color-mix(in oklab, var(--fx-text-primary) 28%, transparent); --fx-border-color-default: var(--fx-color-neutral-800); --fx-border-color-strong: var(--fx-color-neutral-700); --fx-shadow-color: var(--fx-color-black); --fx-viz-ink: color-mix(in oklab, var(--fx-text-primary) 80%, var(--fx-bg-surface)); --fx-viz-accent: var(--fx-color-pastel-yellow); --fx-viz-context: var(--fx-color-neutral-600); --fx-viz-grid: var(--fx-border-color-default); --fx-viz-track: color-mix(in oklab, var(--fx-text-primary) 10%, transparent); --fx-priority-4: var(--fx-border-color-strong); } [data-fx-theme="emerald"], [data-fx-theme="emerald"][data-fx-scheme="light"], [data-fx-theme="emerald"] [data-fx-scheme="light"]:not([data-fx-theme]) { --fx-color-neutral-25: #F8FCFA; --fx-color-neutral-50: #F4F8F6; --fx-color-neutral-100: #EDF1EF; --fx-color-neutral-200: #E2E6E3; --fx-color-neutral-300: #CED7D2; --fx-color-neutral-400: #9DA5A1; --fx-color-neutral-500: #666E6A; --fx-color-neutral-600: #4F5652; --fx-color-neutral-700: #3C433F; --fx-color-neutral-800: #232926; --fx-color-neutral-900: #151B18; --fx-color-neutral-950: #0D1310; --fx-color-brand-50: #DFFEEE; --fx-color-brand-200: #B2E3CB; --fx-color-brand-300: #8ECEAF; --fx-color-brand-400: #63B791; --fx-color-brand-500: #32A176; --fx-color-brand-600: #059669; --fx-color-brand-700: #107250; --fx-color-brand-800: #105B40; --fx-color-pastel-yellow: #EDDC85; --fx-color-pastel-pink: #FDBBD9; --fx-color-pastel-blue: #B3D4FE; --fx-color-pastel-coral: #FEC0AD; --fx-color-pastel-green: #9DE3C1; --fx-color-pastel-purple: #D9C6FF; --fx-text-on-brand: var(--fx-color-neutral-950); --fx-text-brand: var(--fx-color-brand-700); --fx-bg-brand-solid: var(--fx-color-brand-600); --fx-bg-brand-solid-hover: var(--fx-color-brand-500); --fx-bg-brand-solid-active: var(--fx-color-brand-400); --fx-bg-brand-subtle: var(--fx-color-brand-50); --fx-border-color-focus: var(--fx-color-brand-600); --fx-viz-brand: var(--fx-color-brand-700); --fx-text-primary: var(--fx-color-neutral-900); --fx-text-secondary: var(--fx-color-neutral-600); --fx-text-tertiary: var(--fx-color-neutral-500); --fx-text-disabled: var(--fx-color-neutral-400); --fx-text-on-category: var(--fx-color-neutral-900); --fx-text-on-static-light: var(--fx-color-neutral-900); --fx-bg-page: color-mix(in oklab, var(--fx-color-neutral-100) calc(var(--fx-knob-page-tint) * 100%), var(--fx-color-neutral-25)); --fx-bg-surface: var(--fx-color-white); --fx-bg-subtle: var(--fx-color-neutral-50); --fx-bg-muted: var(--fx-color-neutral-100); --fx-bg-muted-hover: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 5%); --fx-bg-pressed: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 10%); --fx-bg-error-subtle: var(--fx-color-red-50); --fx-bg-error-subtle-active: color-mix(in oklab, var(--fx-bg-error-subtle) 80%, var(--fx-fg-error)); --fx-bg-success-subtle: var(--fx-color-green-50); --fx-bg-warning-subtle: var(--fx-color-amber-50); --fx-bg-overlay: var(--fx-color-neutral-950); --fx-bg-category-yellow: var(--fx-color-pastel-yellow); --fx-bg-category-yellow-subtle: color-mix(in oklab, var(--fx-color-pastel-yellow) 20%, var(--fx-bg-page)); --fx-bg-category-pink: var(--fx-color-pastel-pink); --fx-bg-category-pink-subtle: color-mix(in oklab, var(--fx-color-pastel-pink) 20%, var(--fx-bg-page)); --fx-bg-category-blue: var(--fx-color-pastel-blue); --fx-bg-category-blue-subtle: color-mix(in oklab, var(--fx-color-pastel-blue) 20%, var(--fx-bg-page)); --fx-bg-category-coral: var(--fx-color-pastel-coral); --fx-bg-category-coral-subtle: color-mix(in oklab, var(--fx-color-pastel-coral) 20%, var(--fx-bg-page)); --fx-bg-category-green: var(--fx-color-pastel-green); --fx-bg-category-green-subtle: color-mix(in oklab, var(--fx-color-pastel-green) 20%, var(--fx-bg-page)); --fx-bg-category-purple: var(--fx-color-pastel-purple); --fx-bg-category-purple-subtle: color-mix(in oklab, var(--fx-color-pastel-purple) 20%, var(--fx-bg-page)); --fx-bg-brand-subtle-hover: color-mix(in oklab, var(--fx-bg-brand-subtle) 85%, var(--fx-text-brand)); --fx-bg-brand-subtle-active: color-mix(in oklab, var(--fx-bg-brand-subtle) 72%, var(--fx-text-brand)); --fx-bg-info-subtle: var(--fx-color-blue-50); --fx-bg-static-light: var(--fx-color-neutral-25); --fx-selection-bg: color-mix(in oklab, var(--fx-bg-brand-solid) 24%, var(--fx-bg-surface)); --fx-selection-text: var(--fx-text-primary); --fx-scrollbar-thumb: color-mix(in oklab, var(--fx-text-primary) 28%, transparent); --fx-border-color-default: var(--fx-color-neutral-200); --fx-border-color-strong: var(--fx-color-neutral-300); --fx-shadow-color: var(--fx-color-neutral-900); --fx-viz-ink: color-mix(in oklab, var(--fx-text-primary) 80%, var(--fx-bg-surface)); --fx-viz-accent: var(--fx-color-pastel-yellow); --fx-viz-context: var(--fx-color-neutral-300); --fx-viz-grid: var(--fx-border-color-default); --fx-viz-track: color-mix(in oklab, var(--fx-text-primary) 10%, transparent); --fx-priority-4: var(--fx-border-color-strong); } @media (prefers-color-scheme: dark) { [data-fx-theme="emerald"]:not([data-fx-scheme="light"], [data-fx-scheme="light"] *) { --fx-text-on-brand: var(--fx-color-neutral-950); --fx-text-brand: var(--fx-color-brand-300); --fx-bg-brand-solid: var(--fx-color-brand-400); --fx-bg-brand-solid-hover: var(--fx-color-brand-300); --fx-bg-brand-solid-active: var(--fx-color-brand-200); --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface)); --fx-border-color-focus: var(--fx-color-brand-400); --fx-viz-brand: var(--fx-color-brand-400); --fx-text-primary: var(--fx-color-neutral-50); --fx-text-secondary: var(--fx-color-neutral-300); --fx-text-tertiary: var(--fx-color-neutral-400); --fx-text-disabled: var(--fx-color-neutral-600); --fx-text-on-category: var(--fx-color-neutral-50); --fx-bg-page: var(--fx-color-neutral-950); --fx-bg-surface: var(--fx-color-neutral-900); --fx-bg-subtle: var(--fx-color-neutral-900); --fx-bg-muted: var(--fx-color-neutral-800); --fx-bg-muted-hover: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 5%); --fx-bg-pressed: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 10%); --fx-bg-error-subtle: color-mix(in oklab, var(--fx-color-red-300) 16%, var(--fx-bg-surface)); --fx-bg-error-subtle-active: color-mix(in oklab, var(--fx-bg-error-subtle) 80%, var(--fx-fg-error)); --fx-bg-success-subtle: color-mix(in oklab, var(--fx-color-green-300) 16%, var(--fx-bg-surface)); --fx-bg-warning-subtle: color-mix(in oklab, var(--fx-color-amber-300) 16%, var(--fx-bg-surface)); --fx-bg-overlay: var(--fx-color-black); --fx-bg-category-yellow: color-mix(in oklab, var(--fx-color-pastel-yellow) 45%, var(--fx-color-neutral-950)); --fx-bg-category-yellow-subtle: color-mix(in oklab, var(--fx-color-pastel-yellow) 10%, var(--fx-bg-page)); --fx-bg-category-pink: color-mix(in oklab, var(--fx-color-pastel-pink) 45%, var(--fx-color-neutral-950)); --fx-bg-category-pink-subtle: color-mix(in oklab, var(--fx-color-pastel-pink) 10%, var(--fx-bg-page)); --fx-bg-category-blue: color-mix(in oklab, var(--fx-color-pastel-blue) 45%, var(--fx-color-neutral-950)); --fx-bg-category-blue-subtle: color-mix(in oklab, var(--fx-color-pastel-blue) 10%, var(--fx-bg-page)); --fx-bg-category-coral: color-mix(in oklab, var(--fx-color-pastel-coral) 45%, var(--fx-color-neutral-950)); --fx-bg-category-coral-subtle: color-mix(in oklab, var(--fx-color-pastel-coral) 10%, var(--fx-bg-page)); --fx-bg-category-green: color-mix(in oklab, var(--fx-color-pastel-green) 45%, var(--fx-color-neutral-950)); --fx-bg-category-green-subtle: color-mix(in oklab, var(--fx-color-pastel-green) 10%, var(--fx-bg-page)); --fx-bg-category-purple: color-mix(in oklab, var(--fx-color-pastel-purple) 45%, var(--fx-color-neutral-950)); --fx-bg-category-purple-subtle: color-mix(in oklab, var(--fx-color-pastel-purple) 10%, var(--fx-bg-page)); --fx-bg-brand-subtle-hover: color-mix(in oklab, var(--fx-bg-brand-subtle) 85%, var(--fx-text-brand)); --fx-bg-brand-subtle-active: color-mix(in oklab, var(--fx-bg-brand-subtle) 72%, var(--fx-text-brand)); --fx-bg-info-subtle: color-mix(in oklab, var(--fx-color-blue-300) 16%, var(--fx-bg-surface)); --fx-selection-bg: color-mix(in oklab, var(--fx-bg-brand-solid) 24%, var(--fx-bg-surface)); --fx-selection-text: var(--fx-text-primary); --fx-scrollbar-thumb: color-mix(in oklab, var(--fx-text-primary) 28%, transparent); --fx-border-color-default: var(--fx-color-neutral-800); --fx-border-color-strong: var(--fx-color-neutral-700); --fx-shadow-color: var(--fx-color-black); --fx-viz-ink: color-mix(in oklab, var(--fx-text-primary) 80%, var(--fx-bg-surface)); --fx-viz-accent: var(--fx-color-pastel-yellow); --fx-viz-context: var(--fx-color-neutral-600); --fx-viz-grid: var(--fx-border-color-default); --fx-viz-track: color-mix(in oklab, var(--fx-text-primary) 10%, transparent); --fx-priority-4: var(--fx-border-color-strong); } } [data-fx-theme="emerald"][data-fx-scheme="dark"], [data-fx-theme="emerald"] [data-fx-scheme="dark"]:not([data-fx-theme]), [data-fx-scheme="dark"] [data-fx-theme="emerald"]:not([data-fx-scheme="light"]) { --fx-text-on-brand: var(--fx-color-neutral-950); --fx-text-brand: var(--fx-color-brand-300); --fx-bg-brand-solid: var(--fx-color-brand-400); --fx-bg-brand-solid-hover: var(--fx-color-brand-300); --fx-bg-brand-solid-active: var(--fx-color-brand-200); --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface)); --fx-border-color-focus: var(--fx-color-brand-400); --fx-viz-brand: var(--fx-color-brand-400); --fx-text-primary: var(--fx-color-neutral-50); --fx-text-secondary: var(--fx-color-neutral-300); --fx-text-tertiary: var(--fx-color-neutral-400); --fx-text-disabled: var(--fx-color-neutral-600); --fx-text-on-category: var(--fx-color-neutral-50); --fx-bg-page: var(--fx-color-neutral-950); --fx-bg-surface: var(--fx-color-neutral-900); --fx-bg-subtle: var(--fx-color-neutral-900); --fx-bg-muted: var(--fx-color-neutral-800); --fx-bg-muted-hover: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 5%); --fx-bg-pressed: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 10%); --fx-bg-error-subtle: color-mix(in oklab, var(--fx-color-red-300) 16%, var(--fx-bg-surface)); --fx-bg-error-subtle-active: color-mix(in oklab, var(--fx-bg-error-subtle) 80%, var(--fx-fg-error)); --fx-bg-success-subtle: color-mix(in oklab, var(--fx-color-green-300) 16%, var(--fx-bg-surface)); --fx-bg-warning-subtle: color-mix(in oklab, var(--fx-color-amber-300) 16%, var(--fx-bg-surface)); --fx-bg-overlay: var(--fx-color-black); --fx-bg-category-yellow: color-mix(in oklab, var(--fx-color-pastel-yellow) 45%, var(--fx-color-neutral-950)); --fx-bg-category-yellow-subtle: color-mix(in oklab, var(--fx-color-pastel-yellow) 10%, var(--fx-bg-page)); --fx-bg-category-pink: color-mix(in oklab, var(--fx-color-pastel-pink) 45%, var(--fx-color-neutral-950)); --fx-bg-category-pink-subtle: color-mix(in oklab, var(--fx-color-pastel-pink) 10%, var(--fx-bg-page)); --fx-bg-category-blue: color-mix(in oklab, var(--fx-color-pastel-blue) 45%, var(--fx-color-neutral-950)); --fx-bg-category-blue-subtle: color-mix(in oklab, var(--fx-color-pastel-blue) 10%, var(--fx-bg-page)); --fx-bg-category-coral: color-mix(in oklab, var(--fx-color-pastel-coral) 45%, var(--fx-color-neutral-950)); --fx-bg-category-coral-subtle: color-mix(in oklab, var(--fx-color-pastel-coral) 10%, var(--fx-bg-page)); --fx-bg-category-green: color-mix(in oklab, var(--fx-color-pastel-green) 45%, var(--fx-color-neutral-950)); --fx-bg-category-green-subtle: color-mix(in oklab, var(--fx-color-pastel-green) 10%, var(--fx-bg-page)); --fx-bg-category-purple: color-mix(in oklab, var(--fx-color-pastel-purple) 45%, var(--fx-color-neutral-950)); --fx-bg-category-purple-subtle: color-mix(in oklab, var(--fx-color-pastel-purple) 10%, var(--fx-bg-page)); --fx-bg-brand-subtle-hover: color-mix(in oklab, var(--fx-bg-brand-subtle) 85%, var(--fx-text-brand)); --fx-bg-brand-subtle-active: color-mix(in oklab, var(--fx-bg-brand-subtle) 72%, var(--fx-text-brand)); --fx-bg-info-subtle: color-mix(in oklab, var(--fx-color-blue-300) 16%, var(--fx-bg-surface)); --fx-selection-bg: color-mix(in oklab, var(--fx-bg-brand-solid) 24%, var(--fx-bg-surface)); --fx-selection-text: var(--fx-text-primary); --fx-scrollbar-thumb: color-mix(in oklab, var(--fx-text-primary) 28%, transparent); --fx-border-color-default: var(--fx-color-neutral-800); --fx-border-color-strong: var(--fx-color-neutral-700); --fx-shadow-color: var(--fx-color-black); --fx-viz-ink: color-mix(in oklab, var(--fx-text-primary) 80%, var(--fx-bg-surface)); --fx-viz-accent: var(--fx-color-pastel-yellow); --fx-viz-context: var(--fx-color-neutral-600); --fx-viz-grid: var(--fx-border-color-default); --fx-viz-track: color-mix(in oklab, var(--fx-text-primary) 10%, transparent); --fx-priority-4: var(--fx-border-color-strong); } [data-fx-theme="hilos"], [data-fx-theme="hilos"][data-fx-scheme="light"], [data-fx-theme="hilos"] [data-fx-scheme="light"]:not([data-fx-theme]) { --fx-color-neutral-25: #FAF8F4; --fx-color-neutral-50: #F4F1EC; --fx-color-neutral-100: #EFEAE3; --fx-color-neutral-200: #E9E4DC; --fx-color-neutral-300: #D9D4CC; --fx-color-neutral-400: #A6A099; --fx-color-neutral-500: #706B64; --fx-color-neutral-600: #57524C; --fx-color-neutral-700: #433F39; --fx-color-neutral-800: #2B2721; --fx-color-neutral-900: #1F1C18; --fx-color-neutral-950: #15130F; --fx-color-brand-50: var(--fx-color-neutral-50); --fx-color-brand-200: var(--fx-color-neutral-200); --fx-color-brand-300: var(--fx-color-neutral-300); --fx-color-brand-400: var(--fx-color-neutral-400); --fx-color-brand-500: var(--fx-color-neutral-500); --fx-color-brand-600: var(--fx-color-neutral-600); --fx-color-brand-700: var(--fx-color-neutral-700); --fx-color-brand-800: var(--fx-color-neutral-800); --fx-text-on-brand: var(--fx-color-white); --fx-text-brand: var(--fx-color-neutral-900); --fx-bg-brand-solid: var(--fx-color-neutral-900); --fx-bg-brand-solid-hover: var(--fx-color-neutral-700); --fx-bg-brand-solid-active: var(--fx-color-neutral-600); --fx-bg-brand-subtle: var(--fx-color-neutral-100); --fx-border-color-focus: var(--fx-color-neutral-900); --fx-text-primary: var(--fx-color-neutral-900); --fx-text-secondary: var(--fx-color-neutral-600); --fx-text-tertiary: var(--fx-color-neutral-500); --fx-text-disabled: var(--fx-color-neutral-400); --fx-text-on-category: var(--fx-color-neutral-900); --fx-text-on-static-light: var(--fx-color-neutral-900); --fx-bg-page: color-mix(in oklab, var(--fx-color-neutral-100) calc(var(--fx-knob-page-tint) * 100%), var(--fx-color-neutral-25)); --fx-bg-surface: var(--fx-color-white); --fx-bg-subtle: var(--fx-color-neutral-50); --fx-bg-muted: var(--fx-color-neutral-100); --fx-bg-muted-hover: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 5%); --fx-bg-pressed: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 10%); --fx-bg-error-subtle: var(--fx-color-red-50); --fx-bg-error-subtle-active: color-mix(in oklab, var(--fx-bg-error-subtle) 80%, var(--fx-fg-error)); --fx-bg-success-subtle: var(--fx-color-green-50); --fx-bg-warning-subtle: var(--fx-color-amber-50); --fx-bg-overlay: var(--fx-color-neutral-950); --fx-bg-category-yellow: var(--fx-color-pastel-yellow); --fx-bg-category-yellow-subtle: color-mix(in oklab, var(--fx-color-pastel-yellow) 20%, var(--fx-bg-page)); --fx-bg-category-pink: var(--fx-color-pastel-pink); --fx-bg-category-pink-subtle: color-mix(in oklab, var(--fx-color-pastel-pink) 20%, var(--fx-bg-page)); --fx-bg-category-blue: var(--fx-color-pastel-blue); --fx-bg-category-blue-subtle: color-mix(in oklab, var(--fx-color-pastel-blue) 20%, var(--fx-bg-page)); --fx-bg-category-coral: var(--fx-color-pastel-coral); --fx-bg-category-coral-subtle: color-mix(in oklab, var(--fx-color-pastel-coral) 20%, var(--fx-bg-page)); --fx-bg-category-green: var(--fx-color-pastel-green); --fx-bg-category-green-subtle: color-mix(in oklab, var(--fx-color-pastel-green) 20%, var(--fx-bg-page)); --fx-bg-category-purple: var(--fx-color-pastel-purple); --fx-bg-category-purple-subtle: color-mix(in oklab, var(--fx-color-pastel-purple) 20%, var(--fx-bg-page)); --fx-bg-brand-subtle-hover: color-mix(in oklab, var(--fx-bg-brand-subtle) 85%, var(--fx-text-brand)); --fx-bg-brand-subtle-active: color-mix(in oklab, var(--fx-bg-brand-subtle) 72%, var(--fx-text-brand)); --fx-bg-info-subtle: var(--fx-color-blue-50); --fx-bg-static-light: var(--fx-color-neutral-25); --fx-selection-bg: color-mix(in oklab, var(--fx-bg-brand-solid) 24%, var(--fx-bg-surface)); --fx-selection-text: var(--fx-text-primary); --fx-scrollbar-thumb: color-mix(in oklab, var(--fx-text-primary) 28%, transparent); --fx-border-color-default: var(--fx-color-neutral-200); --fx-border-color-strong: var(--fx-color-neutral-300); --fx-shadow-color: var(--fx-color-neutral-900); --fx-viz-ink: color-mix(in oklab, var(--fx-text-primary) 80%, var(--fx-bg-surface)); --fx-viz-brand: var(--fx-color-neutral-500); --fx-viz-context: var(--fx-color-neutral-300); --fx-viz-grid: var(--fx-border-color-default); --fx-viz-track: color-mix(in oklab, var(--fx-text-primary) 10%, transparent); --fx-priority-4: var(--fx-border-color-strong); } @media (prefers-color-scheme: dark) { [data-fx-theme="hilos"]:not([data-fx-scheme="light"], [data-fx-scheme="light"] *) { --fx-text-on-brand: var(--fx-color-neutral-900); --fx-text-brand: var(--fx-color-neutral-50); --fx-bg-brand-solid: var(--fx-color-neutral-50); --fx-bg-brand-solid-hover: var(--fx-color-neutral-200); --fx-bg-brand-solid-active: var(--fx-color-neutral-300); --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface)); --fx-border-color-focus: var(--fx-color-neutral-50); --fx-text-primary: var(--fx-color-neutral-50); --fx-text-secondary: var(--fx-color-neutral-300); --fx-text-tertiary: var(--fx-color-neutral-400); --fx-text-disabled: var(--fx-color-neutral-600); --fx-text-on-category: var(--fx-color-neutral-50); --fx-bg-page: var(--fx-color-neutral-950); --fx-bg-surface: var(--fx-color-neutral-900); --fx-bg-subtle: var(--fx-color-neutral-900); --fx-bg-muted: var(--fx-color-neutral-800); --fx-bg-muted-hover: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 5%); --fx-bg-pressed: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 10%); --fx-bg-error-subtle: color-mix(in oklab, var(--fx-color-red-300) 16%, var(--fx-bg-surface)); --fx-bg-error-subtle-active: color-mix(in oklab, var(--fx-bg-error-subtle) 80%, var(--fx-fg-error)); --fx-bg-success-subtle: color-mix(in oklab, var(--fx-color-green-300) 16%, var(--fx-bg-surface)); --fx-bg-warning-subtle: color-mix(in oklab, var(--fx-color-amber-300) 16%, var(--fx-bg-surface)); --fx-bg-overlay: var(--fx-color-black); --fx-bg-category-yellow: color-mix(in oklab, var(--fx-color-pastel-yellow) 45%, var(--fx-color-neutral-950)); --fx-bg-category-yellow-subtle: color-mix(in oklab, var(--fx-color-pastel-yellow) 10%, var(--fx-bg-page)); --fx-bg-category-pink: color-mix(in oklab, var(--fx-color-pastel-pink) 45%, var(--fx-color-neutral-950)); --fx-bg-category-pink-subtle: color-mix(in oklab, var(--fx-color-pastel-pink) 10%, var(--fx-bg-page)); --fx-bg-category-blue: color-mix(in oklab, var(--fx-color-pastel-blue) 45%, var(--fx-color-neutral-950)); --fx-bg-category-blue-subtle: color-mix(in oklab, var(--fx-color-pastel-blue) 10%, var(--fx-bg-page)); --fx-bg-category-coral: color-mix(in oklab, var(--fx-color-pastel-coral) 45%, var(--fx-color-neutral-950)); --fx-bg-category-coral-subtle: color-mix(in oklab, var(--fx-color-pastel-coral) 10%, var(--fx-bg-page)); --fx-bg-category-green: color-mix(in oklab, var(--fx-color-pastel-green) 45%, var(--fx-color-neutral-950)); --fx-bg-category-green-subtle: color-mix(in oklab, var(--fx-color-pastel-green) 10%, var(--fx-bg-page)); --fx-bg-category-purple: color-mix(in oklab, var(--fx-color-pastel-purple) 45%, var(--fx-color-neutral-950)); --fx-bg-category-purple-subtle: color-mix(in oklab, var(--fx-color-pastel-purple) 10%, var(--fx-bg-page)); --fx-bg-brand-subtle-hover: color-mix(in oklab, var(--fx-bg-brand-subtle) 85%, var(--fx-text-brand)); --fx-bg-brand-subtle-active: color-mix(in oklab, var(--fx-bg-brand-subtle) 72%, var(--fx-text-brand)); --fx-bg-info-subtle: color-mix(in oklab, var(--fx-color-blue-300) 16%, var(--fx-bg-surface)); --fx-selection-bg: color-mix(in oklab, var(--fx-bg-brand-solid) 24%, var(--fx-bg-surface)); --fx-selection-text: var(--fx-text-primary); --fx-scrollbar-thumb: color-mix(in oklab, var(--fx-text-primary) 28%, transparent); --fx-border-color-default: var(--fx-color-neutral-800); --fx-border-color-strong: var(--fx-color-neutral-700); --fx-shadow-color: var(--fx-color-black); --fx-viz-ink: color-mix(in oklab, var(--fx-text-primary) 80%, var(--fx-bg-surface)); --fx-viz-brand: var(--fx-color-neutral-400); --fx-viz-context: var(--fx-color-neutral-600); --fx-viz-grid: var(--fx-border-color-default); --fx-viz-track: color-mix(in oklab, var(--fx-text-primary) 10%, transparent); --fx-priority-4: var(--fx-border-color-strong); } } [data-fx-theme="hilos"][data-fx-scheme="dark"], [data-fx-theme="hilos"] [data-fx-scheme="dark"]:not([data-fx-theme]), [data-fx-scheme="dark"] [data-fx-theme="hilos"]:not([data-fx-scheme="light"]) { --fx-text-on-brand: var(--fx-color-neutral-900); --fx-text-brand: var(--fx-color-neutral-50); --fx-bg-brand-solid: var(--fx-color-neutral-50); --fx-bg-brand-solid-hover: var(--fx-color-neutral-200); --fx-bg-brand-solid-active: var(--fx-color-neutral-300); --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface)); --fx-border-color-focus: var(--fx-color-neutral-50); --fx-text-primary: var(--fx-color-neutral-50); --fx-text-secondary: var(--fx-color-neutral-300); --fx-text-tertiary: var(--fx-color-neutral-400); --fx-text-disabled: var(--fx-color-neutral-600); --fx-text-on-category: var(--fx-color-neutral-50); --fx-bg-page: var(--fx-color-neutral-950); --fx-bg-surface: var(--fx-color-neutral-900); --fx-bg-subtle: var(--fx-color-neutral-900); --fx-bg-muted: var(--fx-color-neutral-800); --fx-bg-muted-hover: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 5%); --fx-bg-pressed: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 10%); --fx-bg-error-subtle: color-mix(in oklab, var(--fx-color-red-300) 16%, var(--fx-bg-surface)); --fx-bg-error-subtle-active: color-mix(in oklab, var(--fx-bg-error-subtle) 80%, var(--fx-fg-error)); --fx-bg-success-subtle: color-mix(in oklab, var(--fx-color-green-300) 16%, var(--fx-bg-surface)); --fx-bg-warning-subtle: color-mix(in oklab, var(--fx-color-amber-300) 16%, var(--fx-bg-surface)); --fx-bg-overlay: var(--fx-color-black); --fx-bg-category-yellow: color-mix(in oklab, var(--fx-color-pastel-yellow) 45%, var(--fx-color-neutral-950)); --fx-bg-category-yellow-subtle: color-mix(in oklab, var(--fx-color-pastel-yellow) 10%, var(--fx-bg-page)); --fx-bg-category-pink: color-mix(in oklab, var(--fx-color-pastel-pink) 45%, var(--fx-color-neutral-950)); --fx-bg-category-pink-subtle: color-mix(in oklab, var(--fx-color-pastel-pink) 10%, var(--fx-bg-page)); --fx-bg-category-blue: color-mix(in oklab, var(--fx-color-pastel-blue) 45%, var(--fx-color-neutral-950)); --fx-bg-category-blue-subtle: color-mix(in oklab, var(--fx-color-pastel-blue) 10%, var(--fx-bg-page)); --fx-bg-category-coral: color-mix(in oklab, var(--fx-color-pastel-coral) 45%, var(--fx-color-neutral-950)); --fx-bg-category-coral-subtle: color-mix(in oklab, var(--fx-color-pastel-coral) 10%, var(--fx-bg-page)); --fx-bg-category-green: color-mix(in oklab, var(--fx-color-pastel-green) 45%, var(--fx-color-neutral-950)); --fx-bg-category-green-subtle: color-mix(in oklab, var(--fx-color-pastel-green) 10%, var(--fx-bg-page)); --fx-bg-category-purple: color-mix(in oklab, var(--fx-color-pastel-purple) 45%, var(--fx-color-neutral-950)); --fx-bg-category-purple-subtle: color-mix(in oklab, var(--fx-color-pastel-purple) 10%, var(--fx-bg-page)); --fx-bg-brand-subtle-hover: color-mix(in oklab, var(--fx-bg-brand-subtle) 85%, var(--fx-text-brand)); --fx-bg-brand-subtle-active: color-mix(in oklab, var(--fx-bg-brand-subtle) 72%, var(--fx-text-brand)); --fx-bg-info-subtle: color-mix(in oklab, var(--fx-color-blue-300) 16%, var(--fx-bg-surface)); --fx-selection-bg: color-mix(in oklab, var(--fx-bg-brand-solid) 24%, var(--fx-bg-surface)); --fx-selection-text: var(--fx-text-primary); --fx-scrollbar-thumb: color-mix(in oklab, var(--fx-text-primary) 28%, transparent); --fx-border-color-default: var(--fx-color-neutral-800); --fx-border-color-strong: var(--fx-color-neutral-700); --fx-shadow-color: var(--fx-color-black); --fx-viz-ink: color-mix(in oklab, var(--fx-text-primary) 80%, var(--fx-bg-surface)); --fx-viz-brand: var(--fx-color-neutral-400); --fx-viz-context: var(--fx-color-neutral-600); --fx-viz-grid: var(--fx-border-color-default); --fx-viz-track: color-mix(in oklab, var(--fx-text-primary) 10%, transparent); --fx-priority-4: var(--fx-border-color-strong); } [data-fx-theme="ocean"], [data-fx-theme="ocean"][data-fx-scheme="light"], [data-fx-theme="ocean"] [data-fx-scheme="light"]:not([data-fx-theme]) { --fx-color-neutral-25: #F9FBFF; --fx-color-neutral-50: #F5F7FA; --fx-color-neutral-100: #EEF0F4; --fx-color-neutral-200: #E3E5E8; --fx-color-neutral-300: #D0D4DC; --fx-color-neutral-400: #9FA3AA; --fx-color-neutral-500: #686C72; --fx-color-neutral-600: #51545A; --fx-color-neutral-700: #3E4147; --fx-color-neutral-800: #25282D; --fx-color-neutral-900: #171A1F; --fx-color-neutral-950: #0F1217; --fx-color-brand-50: #F0F5FF; --fx-color-brand-200: #C1D7FF; --fx-color-brand-300: #9CBEFE; --fx-color-brand-400: #71A1FE; --fx-color-brand-500: #4783FF; --fx-color-brand-600: #2563EB; --fx-color-brand-700: #2858BF; --fx-color-brand-800: #204799; --fx-color-pastel-yellow: #F5D983; --fx-color-pastel-pink: #F8BBE1; --fx-color-pastel-blue: #BAD2FE; --fx-color-pastel-coral: #FEC0AD; --fx-color-pastel-green: #B4DFAA; --fx-color-pastel-purple: #D5C7FE; --fx-text-on-brand: var(--fx-color-white); --fx-text-brand: var(--fx-color-brand-700); --fx-bg-brand-solid: var(--fx-color-brand-600); --fx-bg-brand-solid-hover: var(--fx-color-brand-700); --fx-bg-brand-solid-active: var(--fx-color-brand-800); --fx-bg-brand-subtle: var(--fx-color-brand-50); --fx-border-color-focus: var(--fx-color-brand-600); --fx-viz-brand: var(--fx-color-brand-700); --fx-text-primary: var(--fx-color-neutral-900); --fx-text-secondary: var(--fx-color-neutral-600); --fx-text-tertiary: var(--fx-color-neutral-500); --fx-text-disabled: var(--fx-color-neutral-400); --fx-text-on-category: var(--fx-color-neutral-900); --fx-text-on-static-light: var(--fx-color-neutral-900); --fx-bg-page: color-mix(in oklab, var(--fx-color-neutral-100) calc(var(--fx-knob-page-tint) * 100%), var(--fx-color-neutral-25)); --fx-bg-surface: var(--fx-color-white); --fx-bg-subtle: var(--fx-color-neutral-50); --fx-bg-muted: var(--fx-color-neutral-100); --fx-bg-muted-hover: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 5%); --fx-bg-pressed: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 10%); --fx-bg-error-subtle: var(--fx-color-red-50); --fx-bg-error-subtle-active: color-mix(in oklab, var(--fx-bg-error-subtle) 80%, var(--fx-fg-error)); --fx-bg-success-subtle: var(--fx-color-green-50); --fx-bg-warning-subtle: var(--fx-color-amber-50); --fx-bg-overlay: var(--fx-color-neutral-950); --fx-bg-category-yellow: var(--fx-color-pastel-yellow); --fx-bg-category-yellow-subtle: color-mix(in oklab, var(--fx-color-pastel-yellow) 20%, var(--fx-bg-page)); --fx-bg-category-pink: var(--fx-color-pastel-pink); --fx-bg-category-pink-subtle: color-mix(in oklab, var(--fx-color-pastel-pink) 20%, var(--fx-bg-page)); --fx-bg-category-blue: var(--fx-color-pastel-blue); --fx-bg-category-blue-subtle: color-mix(in oklab, var(--fx-color-pastel-blue) 20%, var(--fx-bg-page)); --fx-bg-category-coral: var(--fx-color-pastel-coral); --fx-bg-category-coral-subtle: color-mix(in oklab, var(--fx-color-pastel-coral) 20%, var(--fx-bg-page)); --fx-bg-category-green: var(--fx-color-pastel-green); --fx-bg-category-green-subtle: color-mix(in oklab, var(--fx-color-pastel-green) 20%, var(--fx-bg-page)); --fx-bg-category-purple: var(--fx-color-pastel-purple); --fx-bg-category-purple-subtle: color-mix(in oklab, var(--fx-color-pastel-purple) 20%, var(--fx-bg-page)); --fx-bg-brand-subtle-hover: color-mix(in oklab, var(--fx-bg-brand-subtle) 85%, var(--fx-text-brand)); --fx-bg-brand-subtle-active: color-mix(in oklab, var(--fx-bg-brand-subtle) 72%, var(--fx-text-brand)); --fx-bg-info-subtle: var(--fx-color-blue-50); --fx-bg-static-light: var(--fx-color-neutral-25); --fx-selection-bg: color-mix(in oklab, var(--fx-bg-brand-solid) 24%, var(--fx-bg-surface)); --fx-selection-text: var(--fx-text-primary); --fx-scrollbar-thumb: color-mix(in oklab, var(--fx-text-primary) 28%, transparent); --fx-border-color-default: var(--fx-color-neutral-200); --fx-border-color-strong: var(--fx-color-neutral-300); --fx-shadow-color: var(--fx-color-neutral-900); --fx-viz-ink: color-mix(in oklab, var(--fx-text-primary) 80%, var(--fx-bg-surface)); --fx-viz-accent: var(--fx-color-pastel-yellow); --fx-viz-context: var(--fx-color-neutral-300); --fx-viz-grid: var(--fx-border-color-default); --fx-viz-track: color-mix(in oklab, var(--fx-text-primary) 10%, transparent); --fx-priority-4: var(--fx-border-color-strong); } @media (prefers-color-scheme: dark) { [data-fx-theme="ocean"]:not([data-fx-scheme="light"], [data-fx-scheme="light"] *) { --fx-text-on-brand: var(--fx-color-neutral-950); --fx-text-brand: var(--fx-color-brand-300); --fx-bg-brand-solid: var(--fx-color-brand-400); --fx-bg-brand-solid-hover: var(--fx-color-brand-300); --fx-bg-brand-solid-active: var(--fx-color-brand-200); --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface)); --fx-border-color-focus: var(--fx-color-brand-400); --fx-viz-brand: var(--fx-color-brand-400); --fx-text-primary: var(--fx-color-neutral-50); --fx-text-secondary: var(--fx-color-neutral-300); --fx-text-tertiary: var(--fx-color-neutral-400); --fx-text-disabled: var(--fx-color-neutral-600); --fx-text-on-category: var(--fx-color-neutral-50); --fx-bg-page: var(--fx-color-neutral-950); --fx-bg-surface: var(--fx-color-neutral-900); --fx-bg-subtle: var(--fx-color-neutral-900); --fx-bg-muted: var(--fx-color-neutral-800); --fx-bg-muted-hover: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 5%); --fx-bg-pressed: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 10%); --fx-bg-error-subtle: color-mix(in oklab, var(--fx-color-red-300) 16%, var(--fx-bg-surface)); --fx-bg-error-subtle-active: color-mix(in oklab, var(--fx-bg-error-subtle) 80%, var(--fx-fg-error)); --fx-bg-success-subtle: color-mix(in oklab, var(--fx-color-green-300) 16%, var(--fx-bg-surface)); --fx-bg-warning-subtle: color-mix(in oklab, var(--fx-color-amber-300) 16%, var(--fx-bg-surface)); --fx-bg-overlay: var(--fx-color-black); --fx-bg-category-yellow: color-mix(in oklab, var(--fx-color-pastel-yellow) 45%, var(--fx-color-neutral-950)); --fx-bg-category-yellow-subtle: color-mix(in oklab, var(--fx-color-pastel-yellow) 10%, var(--fx-bg-page)); --fx-bg-category-pink: color-mix(in oklab, var(--fx-color-pastel-pink) 45%, var(--fx-color-neutral-950)); --fx-bg-category-pink-subtle: color-mix(in oklab, var(--fx-color-pastel-pink) 10%, var(--fx-bg-page)); --fx-bg-category-blue: color-mix(in oklab, var(--fx-color-pastel-blue) 45%, var(--fx-color-neutral-950)); --fx-bg-category-blue-subtle: color-mix(in oklab, var(--fx-color-pastel-blue) 10%, var(--fx-bg-page)); --fx-bg-category-coral: color-mix(in oklab, var(--fx-color-pastel-coral) 45%, var(--fx-color-neutral-950)); --fx-bg-category-coral-subtle: color-mix(in oklab, var(--fx-color-pastel-coral) 10%, var(--fx-bg-page)); --fx-bg-category-green: color-mix(in oklab, var(--fx-color-pastel-green) 45%, var(--fx-color-neutral-950)); --fx-bg-category-green-subtle: color-mix(in oklab, var(--fx-color-pastel-green) 10%, var(--fx-bg-page)); --fx-bg-category-purple: color-mix(in oklab, var(--fx-color-pastel-purple) 45%, var(--fx-color-neutral-950)); --fx-bg-category-purple-subtle: color-mix(in oklab, var(--fx-color-pastel-purple) 10%, var(--fx-bg-page)); --fx-bg-brand-subtle-hover: color-mix(in oklab, var(--fx-bg-brand-subtle) 85%, var(--fx-text-brand)); --fx-bg-brand-subtle-active: color-mix(in oklab, var(--fx-bg-brand-subtle) 72%, var(--fx-text-brand)); --fx-bg-info-subtle: color-mix(in oklab, var(--fx-color-blue-300) 16%, var(--fx-bg-surface)); --fx-selection-bg: color-mix(in oklab, var(--fx-bg-brand-solid) 24%, var(--fx-bg-surface)); --fx-selection-text: var(--fx-text-primary); --fx-scrollbar-thumb: color-mix(in oklab, var(--fx-text-primary) 28%, transparent); --fx-border-color-default: var(--fx-color-neutral-800); --fx-border-color-strong: var(--fx-color-neutral-700); --fx-shadow-color: var(--fx-color-black); --fx-viz-ink: color-mix(in oklab, var(--fx-text-primary) 80%, var(--fx-bg-surface)); --fx-viz-accent: var(--fx-color-pastel-yellow); --fx-viz-context: var(--fx-color-neutral-600); --fx-viz-grid: var(--fx-border-color-default); --fx-viz-track: color-mix(in oklab, var(--fx-text-primary) 10%, transparent); --fx-priority-4: var(--fx-border-color-strong); } } [data-fx-theme="ocean"][data-fx-scheme="dark"], [data-fx-theme="ocean"] [data-fx-scheme="dark"]:not([data-fx-theme]), [data-fx-scheme="dark"] [data-fx-theme="ocean"]:not([data-fx-scheme="light"]) { --fx-text-on-brand: var(--fx-color-neutral-950); --fx-text-brand: var(--fx-color-brand-300); --fx-bg-brand-solid: var(--fx-color-brand-400); --fx-bg-brand-solid-hover: var(--fx-color-brand-300); --fx-bg-brand-solid-active: var(--fx-color-brand-200); --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface)); --fx-border-color-focus: var(--fx-color-brand-400); --fx-viz-brand: var(--fx-color-brand-400); --fx-text-primary: var(--fx-color-neutral-50); --fx-text-secondary: var(--fx-color-neutral-300); --fx-text-tertiary: var(--fx-color-neutral-400); --fx-text-disabled: var(--fx-color-neutral-600); --fx-text-on-category: var(--fx-color-neutral-50); --fx-bg-page: var(--fx-color-neutral-950); --fx-bg-surface: var(--fx-color-neutral-900); --fx-bg-subtle: var(--fx-color-neutral-900); --fx-bg-muted: var(--fx-color-neutral-800); --fx-bg-muted-hover: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 5%); --fx-bg-pressed: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 10%); --fx-bg-error-subtle: color-mix(in oklab, var(--fx-color-red-300) 16%, var(--fx-bg-surface)); --fx-bg-error-subtle-active: color-mix(in oklab, var(--fx-bg-error-subtle) 80%, var(--fx-fg-error)); --fx-bg-success-subtle: color-mix(in oklab, var(--fx-color-green-300) 16%, var(--fx-bg-surface)); --fx-bg-warning-subtle: color-mix(in oklab, var(--fx-color-amber-300) 16%, var(--fx-bg-surface)); --fx-bg-overlay: var(--fx-color-black); --fx-bg-category-yellow: color-mix(in oklab, var(--fx-color-pastel-yellow) 45%, var(--fx-color-neutral-950)); --fx-bg-category-yellow-subtle: color-mix(in oklab, var(--fx-color-pastel-yellow) 10%, var(--fx-bg-page)); --fx-bg-category-pink: color-mix(in oklab, var(--fx-color-pastel-pink) 45%, var(--fx-color-neutral-950)); --fx-bg-category-pink-subtle: color-mix(in oklab, var(--fx-color-pastel-pink) 10%, var(--fx-bg-page)); --fx-bg-category-blue: color-mix(in oklab, var(--fx-color-pastel-blue) 45%, var(--fx-color-neutral-950)); --fx-bg-category-blue-subtle: color-mix(in oklab, var(--fx-color-pastel-blue) 10%, var(--fx-bg-page)); --fx-bg-category-coral: color-mix(in oklab, var(--fx-color-pastel-coral) 45%, var(--fx-color-neutral-950)); --fx-bg-category-coral-subtle: color-mix(in oklab, var(--fx-color-pastel-coral) 10%, var(--fx-bg-page)); --fx-bg-category-green: color-mix(in oklab, var(--fx-color-pastel-green) 45%, var(--fx-color-neutral-950)); --fx-bg-category-green-subtle: color-mix(in oklab, var(--fx-color-pastel-green) 10%, var(--fx-bg-page)); --fx-bg-category-purple: color-mix(in oklab, var(--fx-color-pastel-purple) 45%, var(--fx-color-neutral-950)); --fx-bg-category-purple-subtle: color-mix(in oklab, var(--fx-color-pastel-purple) 10%, var(--fx-bg-page)); --fx-bg-brand-subtle-hover: color-mix(in oklab, var(--fx-bg-brand-subtle) 85%, var(--fx-text-brand)); --fx-bg-brand-subtle-active: color-mix(in oklab, var(--fx-bg-brand-subtle) 72%, var(--fx-text-brand)); --fx-bg-info-subtle: color-mix(in oklab, var(--fx-color-blue-300) 16%, var(--fx-bg-surface)); --fx-selection-bg: color-mix(in oklab, var(--fx-bg-brand-solid) 24%, var(--fx-bg-surface)); --fx-selection-text: var(--fx-text-primary); --fx-scrollbar-thumb: color-mix(in oklab, var(--fx-text-primary) 28%, transparent); --fx-border-color-default: var(--fx-color-neutral-800); --fx-border-color-strong: var(--fx-color-neutral-700); --fx-shadow-color: var(--fx-color-black); --fx-viz-ink: color-mix(in oklab, var(--fx-text-primary) 80%, var(--fx-bg-surface)); --fx-viz-accent: var(--fx-color-pastel-yellow); --fx-viz-context: var(--fx-color-neutral-600); --fx-viz-grid: var(--fx-border-color-default); --fx-viz-track: color-mix(in oklab, var(--fx-text-primary) 10%, transparent); --fx-priority-4: var(--fx-border-color-strong); } [data-fx-theme="pdp"], [data-fx-theme="pdp"][data-fx-scheme="light"], [data-fx-theme="pdp"] [data-fx-scheme="light"]:not([data-fx-theme]) { --fx-color-neutral-25: #FBFBFB; --fx-color-neutral-50: #F7F7F7; --fx-color-neutral-100: #F0F0F0; --fx-color-neutral-200: #E1E1E1; --fx-color-neutral-300: #C7C7C7; --fx-color-neutral-400: #9E9E9E; --fx-color-neutral-500: #767676; --fx-color-neutral-600: #5B5B5B; --fx-color-neutral-700: #424242; --fx-color-neutral-800: #2E2E2E; --fx-color-neutral-900: #222222; --fx-color-neutral-950: #141414; --fx-color-brand-50: #E7FFE4; --fx-color-brand-200: #7EFA77; --fx-color-brand-300: #63E95D; --fx-color-brand-400: #40D63C; --fx-color-brand-500: #00B533; --fx-color-brand-600: #02A307; --fx-color-brand-700: #028405; --fx-color-brand-800: #026503; --fx-text-primary: #141414; --fx-text-secondary: var(--fx-color-neutral-700); --fx-text-tertiary: var(--fx-color-neutral-600); --fx-text-on-brand: #FFFFFF; --fx-text-brand: #00A603; --fx-text-error: #CC3339; --fx-bg-page: #F5F5F5; --fx-bg-surface: #FFFFFF; --fx-bg-subtle: var(--fx-color-neutral-50); --fx-bg-muted: var(--fx-color-neutral-100); --fx-bg-brand-solid: #00B533; --fx-bg-brand-solid-hover: #02A307; --fx-bg-brand-solid-active: #049100; --fx-bg-brand-subtle: #E9FED8; --fx-border-color-focus: #00A603; --fx-viz-brand: #00B533; --fx-text-disabled: var(--fx-color-neutral-400); --fx-text-on-category: var(--fx-color-neutral-900); --fx-text-on-static-light: var(--fx-color-neutral-900); --fx-bg-muted-hover: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 5%); --fx-bg-pressed: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 10%); --fx-bg-error-subtle: var(--fx-color-red-50); --fx-bg-error-subtle-active: color-mix(in oklab, var(--fx-bg-error-subtle) 80%, var(--fx-fg-error)); --fx-bg-success-subtle: var(--fx-color-green-50); --fx-bg-warning-subtle: var(--fx-color-amber-50); --fx-bg-overlay: var(--fx-color-neutral-950); --fx-bg-category-yellow: var(--fx-color-pastel-yellow); --fx-bg-category-yellow-subtle: color-mix(in oklab, var(--fx-color-pastel-yellow) 20%, var(--fx-bg-page)); --fx-bg-category-pink: var(--fx-color-pastel-pink); --fx-bg-category-pink-subtle: color-mix(in oklab, var(--fx-color-pastel-pink) 20%, var(--fx-bg-page)); --fx-bg-category-blue: var(--fx-color-pastel-blue); --fx-bg-category-blue-subtle: color-mix(in oklab, var(--fx-color-pastel-blue) 20%, var(--fx-bg-page)); --fx-bg-category-coral: var(--fx-color-pastel-coral); --fx-bg-category-coral-subtle: color-mix(in oklab, var(--fx-color-pastel-coral) 20%, var(--fx-bg-page)); --fx-bg-category-green: var(--fx-color-pastel-green); --fx-bg-category-green-subtle: color-mix(in oklab, var(--fx-color-pastel-green) 20%, var(--fx-bg-page)); --fx-bg-category-purple: var(--fx-color-pastel-purple); --fx-bg-category-purple-subtle: color-mix(in oklab, var(--fx-color-pastel-purple) 20%, var(--fx-bg-page)); --fx-bg-brand-subtle-hover: color-mix(in oklab, var(--fx-bg-brand-subtle) 85%, var(--fx-text-brand)); --fx-bg-brand-subtle-active: color-mix(in oklab, var(--fx-bg-brand-subtle) 72%, var(--fx-text-brand)); --fx-bg-info-subtle: var(--fx-color-blue-50); --fx-bg-static-light: var(--fx-color-neutral-25); --fx-selection-bg: color-mix(in oklab, var(--fx-bg-brand-solid) 24%, var(--fx-bg-surface)); --fx-selection-text: var(--fx-text-primary); --fx-scrollbar-thumb: color-mix(in oklab, var(--fx-text-primary) 28%, transparent); --fx-border-color-default: var(--fx-color-neutral-200); --fx-border-color-strong: var(--fx-color-neutral-300); --fx-shadow-color: var(--fx-color-neutral-900); --fx-viz-ink: color-mix(in oklab, var(--fx-text-primary) 80%, var(--fx-bg-surface)); --fx-viz-context: var(--fx-color-neutral-300); --fx-viz-grid: var(--fx-border-color-default); --fx-viz-track: color-mix(in oklab, var(--fx-text-primary) 10%, transparent); --fx-priority-4: var(--fx-border-color-strong); } @media (prefers-color-scheme: dark) { [data-fx-theme="pdp"]:not([data-fx-scheme="light"], [data-fx-scheme="light"] *) { --fx-text-primary: var(--fx-color-neutral-50); --fx-text-secondary: var(--fx-color-neutral-200); --fx-text-tertiary: var(--fx-color-neutral-400); --fx-text-on-brand: #141414; --fx-text-brand: #BDFF00; --fx-text-error: #FE726E; --fx-bg-page: #141414; --fx-bg-surface: var(--fx-color-neutral-900); --fx-bg-subtle: var(--fx-color-neutral-900); --fx-bg-muted: var(--fx-color-neutral-800); --fx-bg-brand-solid: #BDFF00; --fx-bg-brand-solid-hover: #CFFF80; --fx-bg-brand-solid-active: #E1FEBB; --fx-bg-brand-subtle: color-mix(in oklab, #BDFF00 12%, var(--fx-bg-surface)); --fx-border-color-focus: #BDFF00; --fx-viz-brand: #BDFF00; --fx-text-disabled: var(--fx-color-neutral-600); --fx-text-on-category: var(--fx-color-neutral-50); --fx-bg-muted-hover: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 5%); --fx-bg-pressed: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 10%); --fx-bg-error-subtle: color-mix(in oklab, var(--fx-color-red-300) 16%, var(--fx-bg-surface)); --fx-bg-error-subtle-active: color-mix(in oklab, var(--fx-bg-error-subtle) 80%, var(--fx-fg-error)); --fx-bg-success-subtle: color-mix(in oklab, var(--fx-color-green-300) 16%, var(--fx-bg-surface)); --fx-bg-warning-subtle: color-mix(in oklab, var(--fx-color-amber-300) 16%, var(--fx-bg-surface)); --fx-bg-overlay: var(--fx-color-black); --fx-bg-category-yellow: color-mix(in oklab, var(--fx-color-pastel-yellow) 45%, var(--fx-color-neutral-950)); --fx-bg-category-yellow-subtle: color-mix(in oklab, var(--fx-color-pastel-yellow) 10%, var(--fx-bg-page)); --fx-bg-category-pink: color-mix(in oklab, var(--fx-color-pastel-pink) 45%, var(--fx-color-neutral-950)); --fx-bg-category-pink-subtle: color-mix(in oklab, var(--fx-color-pastel-pink) 10%, var(--fx-bg-page)); --fx-bg-category-blue: color-mix(in oklab, var(--fx-color-pastel-blue) 45%, var(--fx-color-neutral-950)); --fx-bg-category-blue-subtle: color-mix(in oklab, var(--fx-color-pastel-blue) 10%, var(--fx-bg-page)); --fx-bg-category-coral: color-mix(in oklab, var(--fx-color-pastel-coral) 45%, var(--fx-color-neutral-950)); --fx-bg-category-coral-subtle: color-mix(in oklab, var(--fx-color-pastel-coral) 10%, var(--fx-bg-page)); --fx-bg-category-green: color-mix(in oklab, var(--fx-color-pastel-green) 45%, var(--fx-color-neutral-950)); --fx-bg-category-green-subtle: color-mix(in oklab, var(--fx-color-pastel-green) 10%, var(--fx-bg-page)); --fx-bg-category-purple: color-mix(in oklab, var(--fx-color-pastel-purple) 45%, var(--fx-color-neutral-950)); --fx-bg-category-purple-subtle: color-mix(in oklab, var(--fx-color-pastel-purple) 10%, var(--fx-bg-page)); --fx-bg-brand-subtle-hover: color-mix(in oklab, var(--fx-bg-brand-subtle) 85%, var(--fx-text-brand)); --fx-bg-brand-subtle-active: color-mix(in oklab, var(--fx-bg-brand-subtle) 72%, var(--fx-text-brand)); --fx-bg-info-subtle: color-mix(in oklab, var(--fx-color-blue-300) 16%, var(--fx-bg-surface)); --fx-selection-bg: color-mix(in oklab, var(--fx-bg-brand-solid) 24%, var(--fx-bg-surface)); --fx-selection-text: var(--fx-text-primary); --fx-scrollbar-thumb: color-mix(in oklab, var(--fx-text-primary) 28%, transparent); --fx-border-color-default: var(--fx-color-neutral-800); --fx-border-color-strong: var(--fx-color-neutral-700); --fx-shadow-color: var(--fx-color-black); --fx-viz-ink: color-mix(in oklab, var(--fx-text-primary) 80%, var(--fx-bg-surface)); --fx-viz-context: var(--fx-color-neutral-600); --fx-viz-grid: var(--fx-border-color-default); --fx-viz-track: color-mix(in oklab, var(--fx-text-primary) 10%, transparent); --fx-priority-4: var(--fx-border-color-strong); } } [data-fx-theme="pdp"][data-fx-scheme="dark"], [data-fx-theme="pdp"] [data-fx-scheme="dark"]:not([data-fx-theme]), [data-fx-scheme="dark"] [data-fx-theme="pdp"]:not([data-fx-scheme="light"]) { --fx-text-primary: var(--fx-color-neutral-50); --fx-text-secondary: var(--fx-color-neutral-200); --fx-text-tertiary: var(--fx-color-neutral-400); --fx-text-on-brand: #141414; --fx-text-brand: #BDFF00; --fx-text-error: #FE726E; --fx-bg-page: #141414; --fx-bg-surface: var(--fx-color-neutral-900); --fx-bg-subtle: var(--fx-color-neutral-900); --fx-bg-muted: var(--fx-color-neutral-800); --fx-bg-brand-solid: #BDFF00; --fx-bg-brand-solid-hover: #CFFF80; --fx-bg-brand-solid-active: #E1FEBB; --fx-bg-brand-subtle: color-mix(in oklab, #BDFF00 12%, var(--fx-bg-surface)); --fx-border-color-focus: #BDFF00; --fx-viz-brand: #BDFF00; --fx-text-disabled: var(--fx-color-neutral-600); --fx-text-on-category: var(--fx-color-neutral-50); --fx-bg-muted-hover: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 5%); --fx-bg-pressed: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 10%); --fx-bg-error-subtle: color-mix(in oklab, var(--fx-color-red-300) 16%, var(--fx-bg-surface)); --fx-bg-error-subtle-active: color-mix(in oklab, var(--fx-bg-error-subtle) 80%, var(--fx-fg-error)); --fx-bg-success-subtle: color-mix(in oklab, var(--fx-color-green-300) 16%, var(--fx-bg-surface)); --fx-bg-warning-subtle: color-mix(in oklab, var(--fx-color-amber-300) 16%, var(--fx-bg-surface)); --fx-bg-overlay: var(--fx-color-black); --fx-bg-category-yellow: color-mix(in oklab, var(--fx-color-pastel-yellow) 45%, var(--fx-color-neutral-950)); --fx-bg-category-yellow-subtle: color-mix(in oklab, var(--fx-color-pastel-yellow) 10%, var(--fx-bg-page)); --fx-bg-category-pink: color-mix(in oklab, var(--fx-color-pastel-pink) 45%, var(--fx-color-neutral-950)); --fx-bg-category-pink-subtle: color-mix(in oklab, var(--fx-color-pastel-pink) 10%, var(--fx-bg-page)); --fx-bg-category-blue: color-mix(in oklab, var(--fx-color-pastel-blue) 45%, var(--fx-color-neutral-950)); --fx-bg-category-blue-subtle: color-mix(in oklab, var(--fx-color-pastel-blue) 10%, var(--fx-bg-page)); --fx-bg-category-coral: color-mix(in oklab, var(--fx-color-pastel-coral) 45%, var(--fx-color-neutral-950)); --fx-bg-category-coral-subtle: color-mix(in oklab, var(--fx-color-pastel-coral) 10%, var(--fx-bg-page)); --fx-bg-category-green: color-mix(in oklab, var(--fx-color-pastel-green) 45%, var(--fx-color-neutral-950)); --fx-bg-category-green-subtle: color-mix(in oklab, var(--fx-color-pastel-green) 10%, var(--fx-bg-page)); --fx-bg-category-purple: color-mix(in oklab, var(--fx-color-pastel-purple) 45%, var(--fx-color-neutral-950)); --fx-bg-category-purple-subtle: color-mix(in oklab, var(--fx-color-pastel-purple) 10%, var(--fx-bg-page)); --fx-bg-brand-subtle-hover: color-mix(in oklab, var(--fx-bg-brand-subtle) 85%, var(--fx-text-brand)); --fx-bg-brand-subtle-active: color-mix(in oklab, var(--fx-bg-brand-subtle) 72%, var(--fx-text-brand)); --fx-bg-info-subtle: color-mix(in oklab, var(--fx-color-blue-300) 16%, var(--fx-bg-surface)); --fx-selection-bg: color-mix(in oklab, var(--fx-bg-brand-solid) 24%, var(--fx-bg-surface)); --fx-selection-text: var(--fx-text-primary); --fx-scrollbar-thumb: color-mix(in oklab, var(--fx-text-primary) 28%, transparent); --fx-border-color-default: var(--fx-color-neutral-800); --fx-border-color-strong: var(--fx-color-neutral-700); --fx-shadow-color: var(--fx-color-black); --fx-viz-ink: color-mix(in oklab, var(--fx-text-primary) 80%, var(--fx-bg-surface)); --fx-viz-context: var(--fx-color-neutral-600); --fx-viz-grid: var(--fx-border-color-default); --fx-viz-track: color-mix(in oklab, var(--fx-text-primary) 10%, transparent); --fx-priority-4: var(--fx-border-color-strong); } [data-fx-theme="rose"], [data-fx-theme="rose"][data-fx-scheme="light"], [data-fx-theme="rose"] [data-fx-scheme="light"]:not([data-fx-theme]) { --fx-color-neutral-25: #FEFAFA; --fx-color-neutral-50: #FAF5F5; --fx-color-neutral-100: #F3EFEF; --fx-color-neutral-200: #E8E3E3; --fx-color-neutral-300: #DBD1D1; --fx-color-neutral-400: #AAA0A0; --fx-color-neutral-500: #726969; --fx-color-neutral-600: #5A5252; --fx-color-neutral-700: #473F3F; --fx-color-neutral-800: #2D2626; --fx-color-neutral-900: #1E1718; --fx-color-neutral-950: #161010; --fx-color-brand-50: #FEF2F2; --fx-color-brand-200: #FFC5C6; --fx-color-brand-300: #FE9FA3; --fx-color-brand-400: #FC6E7A; --fx-color-brand-500: #ED415A; --fx-color-brand-600: #E11D48; --fx-color-brand-700: #AE1F39; --fx-color-brand-800: #8B1B2E; --fx-color-pastel-yellow: #FDD583; --fx-color-pastel-pink: #FEBAD6; --fx-color-pastel-blue: #B3D4FE; --fx-color-pastel-coral: #FFBEBF; --fx-color-pastel-green: #B4DFAA; --fx-color-pastel-purple: #E0C3FD; --fx-text-on-brand: var(--fx-color-white); --fx-text-brand: var(--fx-color-brand-700); --fx-bg-brand-solid: var(--fx-color-brand-600); --fx-bg-brand-solid-hover: var(--fx-color-brand-700); --fx-bg-brand-solid-active: var(--fx-color-brand-800); --fx-bg-brand-subtle: var(--fx-color-brand-50); --fx-border-color-focus: var(--fx-color-brand-600); --fx-viz-brand: var(--fx-color-brand-700); --fx-text-primary: var(--fx-color-neutral-900); --fx-text-secondary: var(--fx-color-neutral-600); --fx-text-tertiary: var(--fx-color-neutral-500); --fx-text-disabled: var(--fx-color-neutral-400); --fx-text-on-category: var(--fx-color-neutral-900); --fx-text-on-static-light: var(--fx-color-neutral-900); --fx-bg-page: color-mix(in oklab, var(--fx-color-neutral-100) calc(var(--fx-knob-page-tint) * 100%), var(--fx-color-neutral-25)); --fx-bg-surface: var(--fx-color-white); --fx-bg-subtle: var(--fx-color-neutral-50); --fx-bg-muted: var(--fx-color-neutral-100); --fx-bg-muted-hover: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 5%); --fx-bg-pressed: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 10%); --fx-bg-error-subtle: var(--fx-color-red-50); --fx-bg-error-subtle-active: color-mix(in oklab, var(--fx-bg-error-subtle) 80%, var(--fx-fg-error)); --fx-bg-success-subtle: var(--fx-color-green-50); --fx-bg-warning-subtle: var(--fx-color-amber-50); --fx-bg-overlay: var(--fx-color-neutral-950); --fx-bg-category-yellow: var(--fx-color-pastel-yellow); --fx-bg-category-yellow-subtle: color-mix(in oklab, var(--fx-color-pastel-yellow) 20%, var(--fx-bg-page)); --fx-bg-category-pink: var(--fx-color-pastel-pink); --fx-bg-category-pink-subtle: color-mix(in oklab, var(--fx-color-pastel-pink) 20%, var(--fx-bg-page)); --fx-bg-category-blue: var(--fx-color-pastel-blue); --fx-bg-category-blue-subtle: color-mix(in oklab, var(--fx-color-pastel-blue) 20%, var(--fx-bg-page)); --fx-bg-category-coral: var(--fx-color-pastel-coral); --fx-bg-category-coral-subtle: color-mix(in oklab, var(--fx-color-pastel-coral) 20%, var(--fx-bg-page)); --fx-bg-category-green: var(--fx-color-pastel-green); --fx-bg-category-green-subtle: color-mix(in oklab, var(--fx-color-pastel-green) 20%, var(--fx-bg-page)); --fx-bg-category-purple: var(--fx-color-pastel-purple); --fx-bg-category-purple-subtle: color-mix(in oklab, var(--fx-color-pastel-purple) 20%, var(--fx-bg-page)); --fx-bg-brand-subtle-hover: color-mix(in oklab, var(--fx-bg-brand-subtle) 85%, var(--fx-text-brand)); --fx-bg-brand-subtle-active: color-mix(in oklab, var(--fx-bg-brand-subtle) 72%, var(--fx-text-brand)); --fx-bg-info-subtle: var(--fx-color-blue-50); --fx-bg-static-light: var(--fx-color-neutral-25); --fx-selection-bg: color-mix(in oklab, var(--fx-bg-brand-solid) 24%, var(--fx-bg-surface)); --fx-selection-text: var(--fx-text-primary); --fx-scrollbar-thumb: color-mix(in oklab, var(--fx-text-primary) 28%, transparent); --fx-border-color-default: var(--fx-color-neutral-200); --fx-border-color-strong: var(--fx-color-neutral-300); --fx-shadow-color: var(--fx-color-neutral-900); --fx-viz-ink: color-mix(in oklab, var(--fx-text-primary) 80%, var(--fx-bg-surface)); --fx-viz-accent: var(--fx-color-pastel-yellow); --fx-viz-context: var(--fx-color-neutral-300); --fx-viz-grid: var(--fx-border-color-default); --fx-viz-track: color-mix(in oklab, var(--fx-text-primary) 10%, transparent); --fx-priority-4: var(--fx-border-color-strong); } @media (prefers-color-scheme: dark) { [data-fx-theme="rose"]:not([data-fx-scheme="light"], [data-fx-scheme="light"] *) { --fx-text-on-brand: var(--fx-color-neutral-950); --fx-text-brand: var(--fx-color-brand-300); --fx-bg-brand-solid: var(--fx-color-brand-400); --fx-bg-brand-solid-hover: var(--fx-color-brand-300); --fx-bg-brand-solid-active: var(--fx-color-brand-200); --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface)); --fx-border-color-focus: var(--fx-color-brand-400); --fx-viz-brand: var(--fx-color-brand-400); --fx-text-primary: var(--fx-color-neutral-50); --fx-text-secondary: var(--fx-color-neutral-300); --fx-text-tertiary: var(--fx-color-neutral-400); --fx-text-disabled: var(--fx-color-neutral-600); --fx-text-on-category: var(--fx-color-neutral-50); --fx-bg-page: var(--fx-color-neutral-950); --fx-bg-surface: var(--fx-color-neutral-900); --fx-bg-subtle: var(--fx-color-neutral-900); --fx-bg-muted: var(--fx-color-neutral-800); --fx-bg-muted-hover: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 5%); --fx-bg-pressed: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 10%); --fx-bg-error-subtle: color-mix(in oklab, var(--fx-color-red-300) 16%, var(--fx-bg-surface)); --fx-bg-error-subtle-active: color-mix(in oklab, var(--fx-bg-error-subtle) 80%, var(--fx-fg-error)); --fx-bg-success-subtle: color-mix(in oklab, var(--fx-color-green-300) 16%, var(--fx-bg-surface)); --fx-bg-warning-subtle: color-mix(in oklab, var(--fx-color-amber-300) 16%, var(--fx-bg-surface)); --fx-bg-overlay: var(--fx-color-black); --fx-bg-category-yellow: color-mix(in oklab, var(--fx-color-pastel-yellow) 45%, var(--fx-color-neutral-950)); --fx-bg-category-yellow-subtle: color-mix(in oklab, var(--fx-color-pastel-yellow) 10%, var(--fx-bg-page)); --fx-bg-category-pink: color-mix(in oklab, var(--fx-color-pastel-pink) 45%, var(--fx-color-neutral-950)); --fx-bg-category-pink-subtle: color-mix(in oklab, var(--fx-color-pastel-pink) 10%, var(--fx-bg-page)); --fx-bg-category-blue: color-mix(in oklab, var(--fx-color-pastel-blue) 45%, var(--fx-color-neutral-950)); --fx-bg-category-blue-subtle: color-mix(in oklab, var(--fx-color-pastel-blue) 10%, var(--fx-bg-page)); --fx-bg-category-coral: color-mix(in oklab, var(--fx-color-pastel-coral) 45%, var(--fx-color-neutral-950)); --fx-bg-category-coral-subtle: color-mix(in oklab, var(--fx-color-pastel-coral) 10%, var(--fx-bg-page)); --fx-bg-category-green: color-mix(in oklab, var(--fx-color-pastel-green) 45%, var(--fx-color-neutral-950)); --fx-bg-category-green-subtle: color-mix(in oklab, var(--fx-color-pastel-green) 10%, var(--fx-bg-page)); --fx-bg-category-purple: color-mix(in oklab, var(--fx-color-pastel-purple) 45%, var(--fx-color-neutral-950)); --fx-bg-category-purple-subtle: color-mix(in oklab, var(--fx-color-pastel-purple) 10%, var(--fx-bg-page)); --fx-bg-brand-subtle-hover: color-mix(in oklab, var(--fx-bg-brand-subtle) 85%, var(--fx-text-brand)); --fx-bg-brand-subtle-active: color-mix(in oklab, var(--fx-bg-brand-subtle) 72%, var(--fx-text-brand)); --fx-bg-info-subtle: color-mix(in oklab, var(--fx-color-blue-300) 16%, var(--fx-bg-surface)); --fx-selection-bg: color-mix(in oklab, var(--fx-bg-brand-solid) 24%, var(--fx-bg-surface)); --fx-selection-text: var(--fx-text-primary); --fx-scrollbar-thumb: color-mix(in oklab, var(--fx-text-primary) 28%, transparent); --fx-border-color-default: var(--fx-color-neutral-800); --fx-border-color-strong: var(--fx-color-neutral-700); --fx-shadow-color: var(--fx-color-black); --fx-viz-ink: color-mix(in oklab, var(--fx-text-primary) 80%, var(--fx-bg-surface)); --fx-viz-accent: var(--fx-color-pastel-yellow); --fx-viz-context: var(--fx-color-neutral-600); --fx-viz-grid: var(--fx-border-color-default); --fx-viz-track: color-mix(in oklab, var(--fx-text-primary) 10%, transparent); --fx-priority-4: var(--fx-border-color-strong); } } [data-fx-theme="rose"][data-fx-scheme="dark"], [data-fx-theme="rose"] [data-fx-scheme="dark"]:not([data-fx-theme]), [data-fx-scheme="dark"] [data-fx-theme="rose"]:not([data-fx-scheme="light"]) { --fx-text-on-brand: var(--fx-color-neutral-950); --fx-text-brand: var(--fx-color-brand-300); --fx-bg-brand-solid: var(--fx-color-brand-400); --fx-bg-brand-solid-hover: var(--fx-color-brand-300); --fx-bg-brand-solid-active: var(--fx-color-brand-200); --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface)); --fx-border-color-focus: var(--fx-color-brand-400); --fx-viz-brand: var(--fx-color-brand-400); --fx-text-primary: var(--fx-color-neutral-50); --fx-text-secondary: var(--fx-color-neutral-300); --fx-text-tertiary: var(--fx-color-neutral-400); --fx-text-disabled: var(--fx-color-neutral-600); --fx-text-on-category: var(--fx-color-neutral-50); --fx-bg-page: var(--fx-color-neutral-950); --fx-bg-surface: var(--fx-color-neutral-900); --fx-bg-subtle: var(--fx-color-neutral-900); --fx-bg-muted: var(--fx-color-neutral-800); --fx-bg-muted-hover: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 5%); --fx-bg-pressed: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 10%); --fx-bg-error-subtle: color-mix(in oklab, var(--fx-color-red-300) 16%, var(--fx-bg-surface)); --fx-bg-error-subtle-active: color-mix(in oklab, var(--fx-bg-error-subtle) 80%, var(--fx-fg-error)); --fx-bg-success-subtle: color-mix(in oklab, var(--fx-color-green-300) 16%, var(--fx-bg-surface)); --fx-bg-warning-subtle: color-mix(in oklab, var(--fx-color-amber-300) 16%, var(--fx-bg-surface)); --fx-bg-overlay: var(--fx-color-black); --fx-bg-category-yellow: color-mix(in oklab, var(--fx-color-pastel-yellow) 45%, var(--fx-color-neutral-950)); --fx-bg-category-yellow-subtle: color-mix(in oklab, var(--fx-color-pastel-yellow) 10%, var(--fx-bg-page)); --fx-bg-category-pink: color-mix(in oklab, var(--fx-color-pastel-pink) 45%, var(--fx-color-neutral-950)); --fx-bg-category-pink-subtle: color-mix(in oklab, var(--fx-color-pastel-pink) 10%, var(--fx-bg-page)); --fx-bg-category-blue: color-mix(in oklab, var(--fx-color-pastel-blue) 45%, var(--fx-color-neutral-950)); --fx-bg-category-blue-subtle: color-mix(in oklab, var(--fx-color-pastel-blue) 10%, var(--fx-bg-page)); --fx-bg-category-coral: color-mix(in oklab, var(--fx-color-pastel-coral) 45%, var(--fx-color-neutral-950)); --fx-bg-category-coral-subtle: color-mix(in oklab, var(--fx-color-pastel-coral) 10%, var(--fx-bg-page)); --fx-bg-category-green: color-mix(in oklab, var(--fx-color-pastel-green) 45%, var(--fx-color-neutral-950)); --fx-bg-category-green-subtle: color-mix(in oklab, var(--fx-color-pastel-green) 10%, var(--fx-bg-page)); --fx-bg-category-purple: color-mix(in oklab, var(--fx-color-pastel-purple) 45%, var(--fx-color-neutral-950)); --fx-bg-category-purple-subtle: color-mix(in oklab, var(--fx-color-pastel-purple) 10%, var(--fx-bg-page)); --fx-bg-brand-subtle-hover: color-mix(in oklab, var(--fx-bg-brand-subtle) 85%, var(--fx-text-brand)); --fx-bg-brand-subtle-active: color-mix(in oklab, var(--fx-bg-brand-subtle) 72%, var(--fx-text-brand)); --fx-bg-info-subtle: color-mix(in oklab, var(--fx-color-blue-300) 16%, var(--fx-bg-surface)); --fx-selection-bg: color-mix(in oklab, var(--fx-bg-brand-solid) 24%, var(--fx-bg-surface)); --fx-selection-text: var(--fx-text-primary); --fx-scrollbar-thumb: color-mix(in oklab, var(--fx-text-primary) 28%, transparent); --fx-border-color-default: var(--fx-color-neutral-800); --fx-border-color-strong: var(--fx-color-neutral-700); --fx-shadow-color: var(--fx-color-black); --fx-viz-ink: color-mix(in oklab, var(--fx-text-primary) 80%, var(--fx-bg-surface)); --fx-viz-accent: var(--fx-color-pastel-yellow); --fx-viz-context: var(--fx-color-neutral-600); --fx-viz-grid: var(--fx-border-color-default); --fx-viz-track: color-mix(in oklab, var(--fx-text-primary) 10%, transparent); --fx-priority-4: var(--fx-border-color-strong); } [data-fx-theme="siyoh"], [data-fx-theme="siyoh"][data-fx-scheme="light"], [data-fx-theme="siyoh"] [data-fx-scheme="light"]:not([data-fx-theme]) { --fx-color-neutral-25: #FCFBFA; --fx-color-neutral-50: #F9F8F7; --fx-color-neutral-100: #F0EFED; --fx-color-neutral-200: #E6E5E3; --fx-color-neutral-300: #D4D3CF; --fx-color-neutral-400: #ADA9A3; --fx-color-neutral-500: #6F6C67; --fx-color-neutral-600: #5F5E59; --fx-color-neutral-700: #4A4945; --fx-color-neutral-800: #383836; --fx-color-neutral-900: #202020; --fx-color-neutral-950: #191919; --fx-color-brand-50: #F5F0FE; --fx-color-brand-200: #D5CFFE; --fx-color-brand-300: #C4ADFA; --fx-color-brand-400: #AC8CF8; --fx-color-brand-500: #8A5CF5; --fx-color-brand-600: #7C49F4; --fx-color-brand-700: #6E36F3; --fx-color-brand-800: #50359A; --fx-color-pastel-yellow: #F5D983; --fx-color-pastel-pink: #FABBDF; --fx-color-pastel-blue: #B6D3FF; --fx-color-pastel-coral: #FEC0AD; --fx-color-pastel-green: #B4DFAA; --fx-color-pastel-purple: #D0C9FE; --fx-text-on-brand: var(--fx-color-white); --fx-text-brand: var(--fx-color-brand-600); --fx-bg-brand-solid: var(--fx-color-brand-600); --fx-bg-brand-solid-hover: var(--fx-color-brand-700); --fx-bg-brand-solid-active: var(--fx-color-brand-800); --fx-bg-brand-subtle: var(--fx-color-brand-50); --fx-border-color-focus: var(--fx-color-brand-500); --fx-viz-brand: var(--fx-color-brand-500); --fx-text-primary: var(--fx-color-neutral-900); --fx-text-secondary: var(--fx-color-neutral-600); --fx-text-tertiary: var(--fx-color-neutral-500); --fx-text-disabled: var(--fx-color-neutral-400); --fx-text-on-category: var(--fx-color-neutral-900); --fx-text-on-static-light: var(--fx-color-neutral-900); --fx-bg-page: color-mix(in oklab, var(--fx-color-neutral-100) calc(var(--fx-knob-page-tint) * 100%), var(--fx-color-neutral-25)); --fx-bg-surface: var(--fx-color-white); --fx-bg-subtle: var(--fx-color-neutral-50); --fx-bg-muted: var(--fx-color-neutral-100); --fx-bg-muted-hover: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 5%); --fx-bg-pressed: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 10%); --fx-bg-error-subtle: var(--fx-color-red-50); --fx-bg-error-subtle-active: color-mix(in oklab, var(--fx-bg-error-subtle) 80%, var(--fx-fg-error)); --fx-bg-success-subtle: var(--fx-color-green-50); --fx-bg-warning-subtle: var(--fx-color-amber-50); --fx-bg-overlay: var(--fx-color-neutral-950); --fx-bg-category-yellow: var(--fx-color-pastel-yellow); --fx-bg-category-yellow-subtle: color-mix(in oklab, var(--fx-color-pastel-yellow) 20%, var(--fx-bg-page)); --fx-bg-category-pink: var(--fx-color-pastel-pink); --fx-bg-category-pink-subtle: color-mix(in oklab, var(--fx-color-pastel-pink) 20%, var(--fx-bg-page)); --fx-bg-category-blue: var(--fx-color-pastel-blue); --fx-bg-category-blue-subtle: color-mix(in oklab, var(--fx-color-pastel-blue) 20%, var(--fx-bg-page)); --fx-bg-category-coral: var(--fx-color-pastel-coral); --fx-bg-category-coral-subtle: color-mix(in oklab, var(--fx-color-pastel-coral) 20%, var(--fx-bg-page)); --fx-bg-category-green: var(--fx-color-pastel-green); --fx-bg-category-green-subtle: color-mix(in oklab, var(--fx-color-pastel-green) 20%, var(--fx-bg-page)); --fx-bg-category-purple: var(--fx-color-pastel-purple); --fx-bg-category-purple-subtle: color-mix(in oklab, var(--fx-color-pastel-purple) 20%, var(--fx-bg-page)); --fx-bg-brand-subtle-hover: color-mix(in oklab, var(--fx-bg-brand-subtle) 85%, var(--fx-text-brand)); --fx-bg-brand-subtle-active: color-mix(in oklab, var(--fx-bg-brand-subtle) 72%, var(--fx-text-brand)); --fx-bg-info-subtle: var(--fx-color-blue-50); --fx-bg-static-light: var(--fx-color-neutral-25); --fx-selection-bg: color-mix(in oklab, var(--fx-bg-brand-solid) 24%, var(--fx-bg-surface)); --fx-selection-text: var(--fx-text-primary); --fx-scrollbar-thumb: color-mix(in oklab, var(--fx-text-primary) 28%, transparent); --fx-border-color-default: var(--fx-color-neutral-200); --fx-border-color-strong: var(--fx-color-neutral-300); --fx-shadow-color: var(--fx-color-neutral-900); --fx-viz-ink: color-mix(in oklab, var(--fx-text-primary) 80%, var(--fx-bg-surface)); --fx-viz-accent: var(--fx-color-pastel-yellow); --fx-viz-context: var(--fx-color-neutral-300); --fx-viz-grid: var(--fx-border-color-default); --fx-viz-track: color-mix(in oklab, var(--fx-text-primary) 10%, transparent); --fx-priority-4: var(--fx-border-color-strong); } @media (prefers-color-scheme: dark) { [data-fx-theme="siyoh"]:not([data-fx-scheme="light"], [data-fx-scheme="light"] *) { --fx-text-on-brand: var(--fx-color-white); --fx-text-brand: var(--fx-color-brand-400); --fx-bg-brand-solid: var(--fx-color-brand-600); --fx-bg-brand-solid-hover: var(--fx-color-brand-700); --fx-bg-brand-solid-active: var(--fx-color-brand-800); --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 30%, var(--fx-bg-surface)); --fx-border-color-focus: var(--fx-color-brand-500); --fx-viz-brand: var(--fx-color-brand-400); --fx-text-primary: var(--fx-color-neutral-50); --fx-text-secondary: var(--fx-color-neutral-300); --fx-text-tertiary: var(--fx-color-neutral-400); --fx-text-disabled: var(--fx-color-neutral-600); --fx-text-on-category: var(--fx-color-neutral-50); --fx-bg-page: var(--fx-color-neutral-950); --fx-bg-surface: var(--fx-color-neutral-900); --fx-bg-subtle: var(--fx-color-neutral-900); --fx-bg-muted: var(--fx-color-neutral-800); --fx-bg-muted-hover: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 5%); --fx-bg-pressed: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 10%); --fx-bg-error-subtle: color-mix(in oklab, var(--fx-color-red-300) 16%, var(--fx-bg-surface)); --fx-bg-error-subtle-active: color-mix(in oklab, var(--fx-bg-error-subtle) 80%, var(--fx-fg-error)); --fx-bg-success-subtle: color-mix(in oklab, var(--fx-color-green-300) 16%, var(--fx-bg-surface)); --fx-bg-warning-subtle: color-mix(in oklab, var(--fx-color-amber-300) 16%, var(--fx-bg-surface)); --fx-bg-overlay: var(--fx-color-black); --fx-bg-category-yellow: color-mix(in oklab, var(--fx-color-pastel-yellow) 45%, var(--fx-color-neutral-950)); --fx-bg-category-yellow-subtle: color-mix(in oklab, var(--fx-color-pastel-yellow) 10%, var(--fx-bg-page)); --fx-bg-category-pink: color-mix(in oklab, var(--fx-color-pastel-pink) 45%, var(--fx-color-neutral-950)); --fx-bg-category-pink-subtle: color-mix(in oklab, var(--fx-color-pastel-pink) 10%, var(--fx-bg-page)); --fx-bg-category-blue: color-mix(in oklab, var(--fx-color-pastel-blue) 45%, var(--fx-color-neutral-950)); --fx-bg-category-blue-subtle: color-mix(in oklab, var(--fx-color-pastel-blue) 10%, var(--fx-bg-page)); --fx-bg-category-coral: color-mix(in oklab, var(--fx-color-pastel-coral) 45%, var(--fx-color-neutral-950)); --fx-bg-category-coral-subtle: color-mix(in oklab, var(--fx-color-pastel-coral) 10%, var(--fx-bg-page)); --fx-bg-category-green: color-mix(in oklab, var(--fx-color-pastel-green) 45%, var(--fx-color-neutral-950)); --fx-bg-category-green-subtle: color-mix(in oklab, var(--fx-color-pastel-green) 10%, var(--fx-bg-page)); --fx-bg-category-purple: color-mix(in oklab, var(--fx-color-pastel-purple) 45%, var(--fx-color-neutral-950)); --fx-bg-category-purple-subtle: color-mix(in oklab, var(--fx-color-pastel-purple) 10%, var(--fx-bg-page)); --fx-bg-brand-subtle-hover: color-mix(in oklab, var(--fx-bg-brand-subtle) 85%, var(--fx-text-brand)); --fx-bg-brand-subtle-active: color-mix(in oklab, var(--fx-bg-brand-subtle) 72%, var(--fx-text-brand)); --fx-bg-info-subtle: color-mix(in oklab, var(--fx-color-blue-300) 16%, var(--fx-bg-surface)); --fx-selection-bg: color-mix(in oklab, var(--fx-bg-brand-solid) 24%, var(--fx-bg-surface)); --fx-selection-text: var(--fx-text-primary); --fx-scrollbar-thumb: color-mix(in oklab, var(--fx-text-primary) 28%, transparent); --fx-border-color-default: var(--fx-color-neutral-800); --fx-border-color-strong: var(--fx-color-neutral-700); --fx-shadow-color: var(--fx-color-black); --fx-viz-ink: color-mix(in oklab, var(--fx-text-primary) 80%, var(--fx-bg-surface)); --fx-viz-accent: var(--fx-color-pastel-yellow); --fx-viz-context: var(--fx-color-neutral-600); --fx-viz-grid: var(--fx-border-color-default); --fx-viz-track: color-mix(in oklab, var(--fx-text-primary) 10%, transparent); --fx-priority-4: var(--fx-border-color-strong); } } [data-fx-theme="siyoh"][data-fx-scheme="dark"], [data-fx-theme="siyoh"] [data-fx-scheme="dark"]:not([data-fx-theme]), [data-fx-scheme="dark"] [data-fx-theme="siyoh"]:not([data-fx-scheme="light"]) { --fx-text-on-brand: var(--fx-color-white); --fx-text-brand: var(--fx-color-brand-400); --fx-bg-brand-solid: var(--fx-color-brand-600); --fx-bg-brand-solid-hover: var(--fx-color-brand-700); --fx-bg-brand-solid-active: var(--fx-color-brand-800); --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 30%, var(--fx-bg-surface)); --fx-border-color-focus: var(--fx-color-brand-500); --fx-viz-brand: var(--fx-color-brand-400); --fx-text-primary: var(--fx-color-neutral-50); --fx-text-secondary: var(--fx-color-neutral-300); --fx-text-tertiary: var(--fx-color-neutral-400); --fx-text-disabled: var(--fx-color-neutral-600); --fx-text-on-category: var(--fx-color-neutral-50); --fx-bg-page: var(--fx-color-neutral-950); --fx-bg-surface: var(--fx-color-neutral-900); --fx-bg-subtle: var(--fx-color-neutral-900); --fx-bg-muted: var(--fx-color-neutral-800); --fx-bg-muted-hover: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 5%); --fx-bg-pressed: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 10%); --fx-bg-error-subtle: color-mix(in oklab, var(--fx-color-red-300) 16%, var(--fx-bg-surface)); --fx-bg-error-subtle-active: color-mix(in oklab, var(--fx-bg-error-subtle) 80%, var(--fx-fg-error)); --fx-bg-success-subtle: color-mix(in oklab, var(--fx-color-green-300) 16%, var(--fx-bg-surface)); --fx-bg-warning-subtle: color-mix(in oklab, var(--fx-color-amber-300) 16%, var(--fx-bg-surface)); --fx-bg-overlay: var(--fx-color-black); --fx-bg-category-yellow: color-mix(in oklab, var(--fx-color-pastel-yellow) 45%, var(--fx-color-neutral-950)); --fx-bg-category-yellow-subtle: color-mix(in oklab, var(--fx-color-pastel-yellow) 10%, var(--fx-bg-page)); --fx-bg-category-pink: color-mix(in oklab, var(--fx-color-pastel-pink) 45%, var(--fx-color-neutral-950)); --fx-bg-category-pink-subtle: color-mix(in oklab, var(--fx-color-pastel-pink) 10%, var(--fx-bg-page)); --fx-bg-category-blue: color-mix(in oklab, var(--fx-color-pastel-blue) 45%, var(--fx-color-neutral-950)); --fx-bg-category-blue-subtle: color-mix(in oklab, var(--fx-color-pastel-blue) 10%, var(--fx-bg-page)); --fx-bg-category-coral: color-mix(in oklab, var(--fx-color-pastel-coral) 45%, var(--fx-color-neutral-950)); --fx-bg-category-coral-subtle: color-mix(in oklab, var(--fx-color-pastel-coral) 10%, var(--fx-bg-page)); --fx-bg-category-green: color-mix(in oklab, var(--fx-color-pastel-green) 45%, var(--fx-color-neutral-950)); --fx-bg-category-green-subtle: color-mix(in oklab, var(--fx-color-pastel-green) 10%, var(--fx-bg-page)); --fx-bg-category-purple: color-mix(in oklab, var(--fx-color-pastel-purple) 45%, var(--fx-color-neutral-950)); --fx-bg-category-purple-subtle: color-mix(in oklab, var(--fx-color-pastel-purple) 10%, var(--fx-bg-page)); --fx-bg-brand-subtle-hover: color-mix(in oklab, var(--fx-bg-brand-subtle) 85%, var(--fx-text-brand)); --fx-bg-brand-subtle-active: color-mix(in oklab, var(--fx-bg-brand-subtle) 72%, var(--fx-text-brand)); --fx-bg-info-subtle: color-mix(in oklab, var(--fx-color-blue-300) 16%, var(--fx-bg-surface)); --fx-selection-bg: color-mix(in oklab, var(--fx-bg-brand-solid) 24%, var(--fx-bg-surface)); --fx-selection-text: var(--fx-text-primary); --fx-scrollbar-thumb: color-mix(in oklab, var(--fx-text-primary) 28%, transparent); --fx-border-color-default: var(--fx-color-neutral-800); --fx-border-color-strong: var(--fx-color-neutral-700); --fx-shadow-color: var(--fx-color-black); --fx-viz-ink: color-mix(in oklab, var(--fx-text-primary) 80%, var(--fx-bg-surface)); --fx-viz-accent: var(--fx-color-pastel-yellow); --fx-viz-context: var(--fx-color-neutral-600); --fx-viz-grid: var(--fx-border-color-default); --fx-viz-track: color-mix(in oklab, var(--fx-text-primary) 10%, transparent); --fx-priority-4: var(--fx-border-color-strong); } [data-fx-theme="sunset"], [data-fx-theme="sunset"][data-fx-scheme="light"], [data-fx-theme="sunset"] [data-fx-scheme="light"]:not([data-fx-theme]) { --fx-color-neutral-25: #FEFAF8; --fx-color-neutral-50: #FAF6F4; --fx-color-neutral-100: #F3EFED; --fx-color-neutral-200: #E8E3E2; --fx-color-neutral-300: #DBD2CF; --fx-color-neutral-400: #A9A19E; --fx-color-neutral-500: #726A67; --fx-color-neutral-600: #5A524F; --fx-color-neutral-700: #463F3D; --fx-color-neutral-800: #2D2624; --fx-color-neutral-900: #1E1816; --fx-color-neutral-950: #16100E; --fx-color-brand-50: #FEF2EE; --fx-color-brand-200: #FEC8B3; --fx-color-brand-300: #FFA381; --fx-color-brand-400: #F07F53; --fx-color-brand-500: #EA580C; --fx-color-brand-600: #C34601; --fx-color-brand-700: #A23901; --fx-color-brand-800: #832D01; --fx-color-pastel-yellow: #FAD683; --fx-color-pastel-pink: #FFBAD4; --fx-color-pastel-blue: #B3D4FE; --fx-color-pastel-coral: #FFC0A9; --fx-color-pastel-green: #B4DFAA; --fx-color-pastel-purple: #D9C6FF; --fx-text-on-brand: var(--fx-color-neutral-950); --fx-text-brand: var(--fx-color-brand-700); --fx-bg-brand-solid: var(--fx-color-brand-500); --fx-bg-brand-solid-hover: var(--fx-color-brand-400); --fx-bg-brand-solid-active: var(--fx-color-brand-300); --fx-bg-brand-subtle: var(--fx-color-brand-50); --fx-border-color-focus: var(--fx-color-brand-500); --fx-viz-brand: var(--fx-color-brand-700); --fx-text-primary: var(--fx-color-neutral-900); --fx-text-secondary: var(--fx-color-neutral-600); --fx-text-tertiary: var(--fx-color-neutral-500); --fx-text-disabled: var(--fx-color-neutral-400); --fx-text-on-category: var(--fx-color-neutral-900); --fx-text-on-static-light: var(--fx-color-neutral-900); --fx-bg-page: color-mix(in oklab, var(--fx-color-neutral-100) calc(var(--fx-knob-page-tint) * 100%), var(--fx-color-neutral-25)); --fx-bg-surface: var(--fx-color-white); --fx-bg-subtle: var(--fx-color-neutral-50); --fx-bg-muted: var(--fx-color-neutral-100); --fx-bg-muted-hover: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 5%); --fx-bg-pressed: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 10%); --fx-bg-error-subtle: var(--fx-color-red-50); --fx-bg-error-subtle-active: color-mix(in oklab, var(--fx-bg-error-subtle) 80%, var(--fx-fg-error)); --fx-bg-success-subtle: var(--fx-color-green-50); --fx-bg-warning-subtle: var(--fx-color-amber-50); --fx-bg-overlay: var(--fx-color-neutral-950); --fx-bg-category-yellow: var(--fx-color-pastel-yellow); --fx-bg-category-yellow-subtle: color-mix(in oklab, var(--fx-color-pastel-yellow) 20%, var(--fx-bg-page)); --fx-bg-category-pink: var(--fx-color-pastel-pink); --fx-bg-category-pink-subtle: color-mix(in oklab, var(--fx-color-pastel-pink) 20%, var(--fx-bg-page)); --fx-bg-category-blue: var(--fx-color-pastel-blue); --fx-bg-category-blue-subtle: color-mix(in oklab, var(--fx-color-pastel-blue) 20%, var(--fx-bg-page)); --fx-bg-category-coral: var(--fx-color-pastel-coral); --fx-bg-category-coral-subtle: color-mix(in oklab, var(--fx-color-pastel-coral) 20%, var(--fx-bg-page)); --fx-bg-category-green: var(--fx-color-pastel-green); --fx-bg-category-green-subtle: color-mix(in oklab, var(--fx-color-pastel-green) 20%, var(--fx-bg-page)); --fx-bg-category-purple: var(--fx-color-pastel-purple); --fx-bg-category-purple-subtle: color-mix(in oklab, var(--fx-color-pastel-purple) 20%, var(--fx-bg-page)); --fx-bg-brand-subtle-hover: color-mix(in oklab, var(--fx-bg-brand-subtle) 85%, var(--fx-text-brand)); --fx-bg-brand-subtle-active: color-mix(in oklab, var(--fx-bg-brand-subtle) 72%, var(--fx-text-brand)); --fx-bg-info-subtle: var(--fx-color-blue-50); --fx-bg-static-light: var(--fx-color-neutral-25); --fx-selection-bg: color-mix(in oklab, var(--fx-bg-brand-solid) 24%, var(--fx-bg-surface)); --fx-selection-text: var(--fx-text-primary); --fx-scrollbar-thumb: color-mix(in oklab, var(--fx-text-primary) 28%, transparent); --fx-border-color-default: var(--fx-color-neutral-200); --fx-border-color-strong: var(--fx-color-neutral-300); --fx-shadow-color: var(--fx-color-neutral-900); --fx-viz-ink: color-mix(in oklab, var(--fx-text-primary) 80%, var(--fx-bg-surface)); --fx-viz-accent: var(--fx-color-pastel-yellow); --fx-viz-context: var(--fx-color-neutral-300); --fx-viz-grid: var(--fx-border-color-default); --fx-viz-track: color-mix(in oklab, var(--fx-text-primary) 10%, transparent); --fx-priority-4: var(--fx-border-color-strong); } @media (prefers-color-scheme: dark) { [data-fx-theme="sunset"]:not([data-fx-scheme="light"], [data-fx-scheme="light"] *) { --fx-text-on-brand: var(--fx-color-neutral-950); --fx-text-brand: var(--fx-color-brand-300); --fx-bg-brand-solid: var(--fx-color-brand-400); --fx-bg-brand-solid-hover: var(--fx-color-brand-300); --fx-bg-brand-solid-active: var(--fx-color-brand-200); --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface)); --fx-border-color-focus: var(--fx-color-brand-400); --fx-viz-brand: var(--fx-color-brand-400); --fx-text-primary: var(--fx-color-neutral-50); --fx-text-secondary: var(--fx-color-neutral-300); --fx-text-tertiary: var(--fx-color-neutral-400); --fx-text-disabled: var(--fx-color-neutral-600); --fx-text-on-category: var(--fx-color-neutral-50); --fx-bg-page: var(--fx-color-neutral-950); --fx-bg-surface: var(--fx-color-neutral-900); --fx-bg-subtle: var(--fx-color-neutral-900); --fx-bg-muted: var(--fx-color-neutral-800); --fx-bg-muted-hover: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 5%); --fx-bg-pressed: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 10%); --fx-bg-error-subtle: color-mix(in oklab, var(--fx-color-red-300) 16%, var(--fx-bg-surface)); --fx-bg-error-subtle-active: color-mix(in oklab, var(--fx-bg-error-subtle) 80%, var(--fx-fg-error)); --fx-bg-success-subtle: color-mix(in oklab, var(--fx-color-green-300) 16%, var(--fx-bg-surface)); --fx-bg-warning-subtle: color-mix(in oklab, var(--fx-color-amber-300) 16%, var(--fx-bg-surface)); --fx-bg-overlay: var(--fx-color-black); --fx-bg-category-yellow: color-mix(in oklab, var(--fx-color-pastel-yellow) 45%, var(--fx-color-neutral-950)); --fx-bg-category-yellow-subtle: color-mix(in oklab, var(--fx-color-pastel-yellow) 10%, var(--fx-bg-page)); --fx-bg-category-pink: color-mix(in oklab, var(--fx-color-pastel-pink) 45%, var(--fx-color-neutral-950)); --fx-bg-category-pink-subtle: color-mix(in oklab, var(--fx-color-pastel-pink) 10%, var(--fx-bg-page)); --fx-bg-category-blue: color-mix(in oklab, var(--fx-color-pastel-blue) 45%, var(--fx-color-neutral-950)); --fx-bg-category-blue-subtle: color-mix(in oklab, var(--fx-color-pastel-blue) 10%, var(--fx-bg-page)); --fx-bg-category-coral: color-mix(in oklab, var(--fx-color-pastel-coral) 45%, var(--fx-color-neutral-950)); --fx-bg-category-coral-subtle: color-mix(in oklab, var(--fx-color-pastel-coral) 10%, var(--fx-bg-page)); --fx-bg-category-green: color-mix(in oklab, var(--fx-color-pastel-green) 45%, var(--fx-color-neutral-950)); --fx-bg-category-green-subtle: color-mix(in oklab, var(--fx-color-pastel-green) 10%, var(--fx-bg-page)); --fx-bg-category-purple: color-mix(in oklab, var(--fx-color-pastel-purple) 45%, var(--fx-color-neutral-950)); --fx-bg-category-purple-subtle: color-mix(in oklab, var(--fx-color-pastel-purple) 10%, var(--fx-bg-page)); --fx-bg-brand-subtle-hover: color-mix(in oklab, var(--fx-bg-brand-subtle) 85%, var(--fx-text-brand)); --fx-bg-brand-subtle-active: color-mix(in oklab, var(--fx-bg-brand-subtle) 72%, var(--fx-text-brand)); --fx-bg-info-subtle: color-mix(in oklab, var(--fx-color-blue-300) 16%, var(--fx-bg-surface)); --fx-selection-bg: color-mix(in oklab, var(--fx-bg-brand-solid) 24%, var(--fx-bg-surface)); --fx-selection-text: var(--fx-text-primary); --fx-scrollbar-thumb: color-mix(in oklab, var(--fx-text-primary) 28%, transparent); --fx-border-color-default: var(--fx-color-neutral-800); --fx-border-color-strong: var(--fx-color-neutral-700); --fx-shadow-color: var(--fx-color-black); --fx-viz-ink: color-mix(in oklab, var(--fx-text-primary) 80%, var(--fx-bg-surface)); --fx-viz-accent: var(--fx-color-pastel-yellow); --fx-viz-context: var(--fx-color-neutral-600); --fx-viz-grid: var(--fx-border-color-default); --fx-viz-track: color-mix(in oklab, var(--fx-text-primary) 10%, transparent); --fx-priority-4: var(--fx-border-color-strong); } } [data-fx-theme="sunset"][data-fx-scheme="dark"], [data-fx-theme="sunset"] [data-fx-scheme="dark"]:not([data-fx-theme]), [data-fx-scheme="dark"] [data-fx-theme="sunset"]:not([data-fx-scheme="light"]) { --fx-text-on-brand: var(--fx-color-neutral-950); --fx-text-brand: var(--fx-color-brand-300); --fx-bg-brand-solid: var(--fx-color-brand-400); --fx-bg-brand-solid-hover: var(--fx-color-brand-300); --fx-bg-brand-solid-active: var(--fx-color-brand-200); --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface)); --fx-border-color-focus: var(--fx-color-brand-400); --fx-viz-brand: var(--fx-color-brand-400); --fx-text-primary: var(--fx-color-neutral-50); --fx-text-secondary: var(--fx-color-neutral-300); --fx-text-tertiary: var(--fx-color-neutral-400); --fx-text-disabled: var(--fx-color-neutral-600); --fx-text-on-category: var(--fx-color-neutral-50); --fx-bg-page: var(--fx-color-neutral-950); --fx-bg-surface: var(--fx-color-neutral-900); --fx-bg-subtle: var(--fx-color-neutral-900); --fx-bg-muted: var(--fx-color-neutral-800); --fx-bg-muted-hover: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 5%); --fx-bg-pressed: color-mix(in oklab, var(--fx-bg-muted), var(--fx-text-primary) 10%); --fx-bg-error-subtle: color-mix(in oklab, var(--fx-color-red-300) 16%, var(--fx-bg-surface)); --fx-bg-error-subtle-active: color-mix(in oklab, var(--fx-bg-error-subtle) 80%, var(--fx-fg-error)); --fx-bg-success-subtle: color-mix(in oklab, var(--fx-color-green-300) 16%, var(--fx-bg-surface)); --fx-bg-warning-subtle: color-mix(in oklab, var(--fx-color-amber-300) 16%, var(--fx-bg-surface)); --fx-bg-overlay: var(--fx-color-black); --fx-bg-category-yellow: color-mix(in oklab, var(--fx-color-pastel-yellow) 45%, var(--fx-color-neutral-950)); --fx-bg-category-yellow-subtle: color-mix(in oklab, var(--fx-color-pastel-yellow) 10%, var(--fx-bg-page)); --fx-bg-category-pink: color-mix(in oklab, var(--fx-color-pastel-pink) 45%, var(--fx-color-neutral-950)); --fx-bg-category-pink-subtle: color-mix(in oklab, var(--fx-color-pastel-pink) 10%, var(--fx-bg-page)); --fx-bg-category-blue: color-mix(in oklab, var(--fx-color-pastel-blue) 45%, var(--fx-color-neutral-950)); --fx-bg-category-blue-subtle: color-mix(in oklab, var(--fx-color-pastel-blue) 10%, var(--fx-bg-page)); --fx-bg-category-coral: color-mix(in oklab, var(--fx-color-pastel-coral) 45%, var(--fx-color-neutral-950)); --fx-bg-category-coral-subtle: color-mix(in oklab, var(--fx-color-pastel-coral) 10%, var(--fx-bg-page)); --fx-bg-category-green: color-mix(in oklab, var(--fx-color-pastel-green) 45%, var(--fx-color-neutral-950)); --fx-bg-category-green-subtle: color-mix(in oklab, var(--fx-color-pastel-green) 10%, var(--fx-bg-page)); --fx-bg-category-purple: color-mix(in oklab, var(--fx-color-pastel-purple) 45%, var(--fx-color-neutral-950)); --fx-bg-category-purple-subtle: color-mix(in oklab, var(--fx-color-pastel-purple) 10%, var(--fx-bg-page)); --fx-bg-brand-subtle-hover: color-mix(in oklab, var(--fx-bg-brand-subtle) 85%, var(--fx-text-brand)); --fx-bg-brand-subtle-active: color-mix(in oklab, var(--fx-bg-brand-subtle) 72%, var(--fx-text-brand)); --fx-bg-info-subtle: color-mix(in oklab, var(--fx-color-blue-300) 16%, var(--fx-bg-surface)); --fx-selection-bg: color-mix(in oklab, var(--fx-bg-brand-solid) 24%, var(--fx-bg-surface)); --fx-selection-text: var(--fx-text-primary); --fx-scrollbar-thumb: color-mix(in oklab, var(--fx-text-primary) 28%, transparent); --fx-border-color-default: var(--fx-color-neutral-800); --fx-border-color-strong: var(--fx-color-neutral-700); --fx-shadow-color: var(--fx-color-black); --fx-viz-ink: color-mix(in oklab, var(--fx-text-primary) 80%, var(--fx-bg-surface)); --fx-viz-accent: var(--fx-color-pastel-yellow); --fx-viz-context: var(--fx-color-neutral-600); --fx-viz-grid: var(--fx-border-color-default); --fx-viz-track: color-mix(in oklab, var(--fx-text-primary) 10%, transparent); --fx-priority-4: var(--fx-border-color-strong); } [data-fx-body="system"] { --fx-font-family-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fx-font-adjust-sans: ex-height 0.52; } [data-fx-body="google-sans"] { --fx-font-family-sans: "Google Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fx-font-adjust-sans: ex-height 0.520; } [data-fx-body="inter"] { --fx-font-family-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fx-font-adjust-sans: ex-height 0.520; } [data-fx-body="jakarta"] { --fx-font-family-sans: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fx-font-adjust-sans: ex-height 0.520; } [data-fx-body="onest"] { --fx-font-family-sans: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fx-font-adjust-sans: ex-height 0.514; } [data-fx-body="public"] { --fx-font-family-sans: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fx-font-adjust-sans: ex-height 0.512; } [data-fx-body="source"] { --fx-font-family-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fx-font-adjust-sans: ex-height 0.520; } [data-fx-font="system"] { --fx-font-family-display: var(--fx-font-family-sans); --fx-font-family-mono: ui-monospace, "SFMono-Regular", Consolas, monospace; --fx-font-family-numeric: var(--fx-font-family-display); --fx-font-adjust-display: var(--fx-font-adjust-sans); --fx-font-adjust-mono: ex-height 0.52; --fx-font-adjust-numeric: var(--fx-font-adjust-display); } [data-fx-font="condensed"] { --fx-font-family-display: "Oswald", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fx-font-family-mono: "IBM Plex Mono", ui-monospace, monospace; --fx-font-family-numeric: var(--fx-font-family-display); --fx-font-adjust-display: ex-height 0.520; --fx-font-adjust-mono: ex-height 0.520; --fx-font-adjust-numeric: var(--fx-font-adjust-display); } [data-fx-font="editorial"] { --fx-font-family-display: "Lora", Georgia, "Times New Roman", serif; --fx-font-family-mono: "IBM Plex Mono", ui-monospace, monospace; --fx-font-family-numeric: var(--fx-font-family-mono); --fx-font-adjust-display: ex-height 0.506; --fx-font-adjust-mono: ex-height 0.520; --fx-font-adjust-numeric: var(--fx-font-adjust-mono); } [data-fx-font="friendly"] { --fx-font-family-display: "Quicksand", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fx-font-family-mono: "IBM Plex Mono", ui-monospace, monospace; --fx-font-family-numeric: var(--fx-font-family-display); --fx-font-adjust-display: ex-height 0.520; --fx-font-adjust-mono: ex-height 0.520; --fx-font-adjust-numeric: var(--fx-font-adjust-display); } [data-fx-font="grotesk"] { --fx-font-family-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fx-font-family-mono: "IBM Plex Mono", ui-monospace, monospace; --fx-font-family-numeric: var(--fx-font-family-display); --fx-font-adjust-display: ex-height 0.471; --fx-font-adjust-mono: ex-height 0.520; --fx-font-adjust-numeric: var(--fx-font-adjust-display); } [data-fx-font="onest"] { --fx-font-family-display: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fx-font-family-numeric: var(--fx-font-family-display); --fx-font-adjust-display: ex-height 0.514; --fx-font-adjust-numeric: var(--fx-font-adjust-display); } [data-fx-font="wide"] { --fx-font-family-display: "Unbounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fx-font-family-mono: "IBM Plex Mono", ui-monospace, monospace; --fx-font-family-numeric: var(--fx-font-family-display); --fx-font-adjust-display: ex-height 0.448; --fx-font-adjust-mono: ex-height 0.520; --fx-font-adjust-numeric: var(--fx-font-adjust-display); } [data-fx-personality="hard"] { --fx-knob-pill: 0; --fx-knob-depth: 1.2; --fx-knob-blur: 0.5; --fx-knob-motion: 0.85; --fx-knob-outline: 1; --fx-knob-field-fill: 0; --fx-radius-control: 4px; --fx-radius-nav: 4px; --fx-radius-field-multiline: 4px; --fx-radius-surface: 4px; --fx-radius-overlay: 8px; --fx-radius-badge: 4px; --fx-radius-checkbox-ratio: 0.15; } [data-fx-personality="medium"] { --fx-knob-pill: 0; --fx-knob-depth: 1; --fx-knob-blur: 1; --fx-knob-motion: 1; --fx-knob-outline: 1; --fx-knob-field-fill: 0; --fx-radius-control: 8px; --fx-radius-nav: 6px; --fx-radius-field-multiline: 8px; --fx-radius-surface: 12px; --fx-radius-overlay: 16px; --fx-radius-badge: 6px; --fx-radius-checkbox-ratio: 0.25; --fx-radius-tag: var(--fx-radius-badge); } [data-fx-personality="soft"] { --fx-knob-pill: 0; --fx-knob-depth: 0.9; --fx-knob-blur: 2; --fx-knob-motion: 1.15; --fx-knob-outline: 0; --fx-knob-field-fill: 1; --fx-radius-control: 12px; --fx-radius-nav: 8px; --fx-radius-field-multiline: 12px; --fx-radius-surface: 14px; --fx-radius-overlay: 14px; --fx-radius-badge: 8px; --fx-radius-tag: 999px; --fx-radius-checkbox-ratio: 0.34; } [data-fx-personality="round"] { --fx-knob-pill: 1; --fx-knob-depth: 0.9; --fx-knob-blur: 2; --fx-knob-motion: 1.15; --fx-knob-outline: 0; --fx-knob-field-fill: 1; --fx-radius-control: 12px; --fx-radius-nav: 8px; --fx-radius-field-multiline: 16px; --fx-radius-surface: 14px; --fx-radius-overlay: 14px; --fx-radius-badge: 8px; --fx-radius-tag: 999px; --fx-radius-checkbox-ratio: 0.34; } [data-fx-edge="line"], [data-fx-edge="line"] [data-fx-personality] { --fx-knob-outline: 1; --fx-knob-depth: 0; --fx-knob-field-fill: 0; } [data-fx-edge="shadow"], [data-fx-edge="shadow"] [data-fx-personality] { --fx-knob-outline: 0; --fx-knob-depth: 1; --fx-knob-field-fill: 1; } [data-fx-edge="hybrid"], [data-fx-edge="hybrid"] [data-fx-personality] { --fx-knob-outline: 0; --fx-knob-depth: 0; --fx-knob-field-fill: 1; --fx-knob-page-tint: 0.65; } [data-fx-density="compact"] { --fx-knob-density: 0.82; } [data-fx-density="default"] { --fx-knob-density: 1; } [data-fx-density="comfortable"] { --fx-knob-density: 1.18; } [data-fx-motion="none"], [data-fx-motion="none"] [data-fx-personality] { --fx-knob-motion: 0; --fx-knob-motion-press: 0; --fx-knob-motion-loop: 0; --fx-motion-shift-sm: 0px; --fx-motion-shift-md: 0px; --fx-motion-shift-lg: 0px; --fx-motion-scale-enter: 1; --fx-motion-scale-press: 1; } [data-fx-motion="calm"] { --fx-knob-motion-press: 0; --fx-ease-spring: cubic-bezier(0.2, 0, 0, 1); } [data-fx-motion="expressive"] { --fx-knob-motion-lift: 1; --fx-knob-motion-stagger: 1; } :root, [data-fx-scheme], [data-fx-theme], [data-fx-body], [data-fx-font], [data-fx-personality], [data-fx-edge], [data-fx-density], [data-fx-motion] { --fx-control-h-sm: max(var(--fx-size-min-target), calc(var(--fx-size-control-sm) * var(--fx-knob-density))); --fx-control-h-md: max(var(--fx-size-min-target), calc(var(--fx-size-control-md) * var(--fx-knob-density))); --fx-control-h-lg: max(var(--fx-size-min-target), calc(var(--fx-size-control-lg) * var(--fx-knob-density))); --fx-shadow-sm: 0 1px calc(2px * var(--fx-knob-blur)) 0 color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 10%), transparent); --fx-shadow-md: 0 4px calc(8px * var(--fx-knob-blur)) -2px color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 10%), transparent), 0 2px calc(4px * var(--fx-knob-blur)) -2px color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 6%), transparent); --fx-shadow-lg: 0 12px calc(16px * var(--fx-knob-blur)) -4px color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 8%), transparent), 0 4px calc(6px * var(--fx-knob-blur)) -2px color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 3%), transparent), 0 24px calc(48px * var(--fx-knob-blur)) -12px color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 12%), transparent); --fx-border-color-surface: color-mix(in oklab, var(--fx-border-color-default) calc(var(--fx-knob-outline) * 100%), transparent); --fx-bg-field: color-mix(in oklab, var(--fx-bg-muted) calc(var(--fx-knob-field-fill) * 100%), var(--fx-bg-surface)); --fx-border-color-field: color-mix(in oklab, var(--fx-border-color-default) calc((1 - var(--fx-knob-field-fill)) * 100%), transparent); --fx-motion-fast: calc(var(--fx-duration-fast) * var(--fx-knob-motion)); --fx-motion-base: calc(var(--fx-duration-base) * var(--fx-knob-motion)); --fx-motion-slow: calc(var(--fx-duration-slow) * var(--fx-knob-motion)); --fx-motion-instant: calc(var(--fx-duration-instant) * var(--fx-knob-motion)); --fx-motion-slower: calc(var(--fx-duration-slower) * var(--fx-knob-motion)); --fx-motion-exit-fast: calc(var(--fx-duration-fast) * var(--fx-knob-motion) * 0.7); --fx-motion-press: calc(1 - (1 - var(--fx-motion-scale-press)) * var(--fx-knob-motion-press)); } @media (pointer: coarse) { :root, [data-fx-scheme], [data-fx-theme], [data-fx-body], [data-fx-font], [data-fx-personality], [data-fx-edge], [data-fx-density], [data-fx-motion] { --fx-control-h-sm: max(var(--fx-size-touch-target), calc(var(--fx-size-control-sm) * var(--fx-knob-density))); --fx-control-h-md: max(var(--fx-size-touch-target), calc(var(--fx-size-control-md) * var(--fx-knob-density))); } } } @layer fx.reset, fx.tokens, fx.base, fx.components, fx.utilities; /* Asos: sahifa foni, matn, harakatni kamaytirish. Komponent emas — fx.base qatlami. */ @layer fx.base { :root { color-scheme: light; font-family: var(--fx-font-family-sans); font-size-adjust: var(--fx-font-adjust-sans); /* shrift almashganda oʻlcham saqlanadi (scripts/fonts.mjs) */ color: var(--fx-text-primary); background: var(--fx-bg-page); } [data-fx-scheme="dark"] { color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-fx-scheme="light"]) { color-scheme: dark; } } [data-fx-scheme] { color: var(--fx-text-primary); background: var(--fx-bg-page); } /* hidden doim yashiradi: komponentning oʻz display qiymati (flex, grid, inline-flex) uni bosib ketmasin. !important pastki qatlamda — har qanday komponent display'idan ustun (RedFox admin topdi, 17.10) */ [hidden]:not([hidden="until-found"]) { display: none !important; } /* Matn belgilash va skroll rangi mavzudan (5-toʻlqin 4.22) */ ::selection { background: var(--fx-selection-bg); color: var(--fx-selection-text); } :root { scrollbar-color: var(--fx-scrollbar-thumb) var(--fx-scrollbar-track); } /* Ochiladigan boʻlim (details/summary): brauzerning ▶ uchburchagi hech qayerda yoʻq (Ustoz 20.10 — global vos kechilgan; WDS «Roʻyxat strelkasi»). Ota chevron (accordion bilan bir xil: yopiqda −90°, ochiqda 0°) — faqat soʻralganda: details[data-fx-chevron] va .fx-prose ichidagi yalangʻoch summary. 25.10 gacha klassi yoʻq har summary'ga tushardi — bola saytlarning oʻz FAQ'i (grid + «+») buzildi (NomLab, Nozim); komponent summary'lari oʻz belgisini chizadi. */ summary { list-style: none; } summary::-webkit-details-marker { display: none; } :where(details[data-fx-chevron] > summary:not([class]), .fx-prose details > summary:not([class]))::before { content: ""; display: inline-block; inline-size: 1em; block-size: 1em; margin-inline-end: var(--fx-space-2); vertical-align: -0.125em; background: currentColor; opacity: 0.55; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; rotate: -90deg; transition: rotate var(--fx-motion-fast) var(--fx-ease-standard); } :where(details[data-fx-chevron][open] > summary:not([class]), .fx-prose details[open] > summary:not([class]))::before { rotate: 0deg; } :where(details[data-fx-chevron] > summary:not([class]), .fx-prose details > summary:not([class])) { cursor: pointer; } /* Yonga suriladigan qator chetlari (21.10, Fox OS/RedFox: «surish mumkinligi sezilmaydi»): skroll holatiga bogʻlangan maska — boshida faqat oʻng chet soʻnadi, oxirida faqat chap; surilmasa — hech narsa. Qoʻllamaydigan brauzerda — maskasiz. tabs, segment, table-scroll ishlatadi */ @property --_edge-s { syntax: ''; inherits: false; initial-value: 0px; } @property --_edge-e { syntax: ''; inherits: false; initial-value: 0px; } @keyframes fx-edge-x { 0% { --_edge-s: 0px; --_edge-e: var(--fx-space-8); } 8%, 92% { --_edge-s: var(--fx-space-8); --_edge-e: var(--fx-space-8); } 100% { --_edge-s: var(--fx-space-8); --_edge-e: 0px; } } /* Umumiy harakatlar — bir nechta komponent ishlatadi (avatar holati, tugma yuklanishi, spinner) */ @keyframes fx-pulse { 50% { opacity: 0.35; } } @keyframes fx-spin { to { rotate: 1turn; } } @keyframes fx-fade-in { from { opacity: 0; } } /* WDS Harakat: prefers-reduced-motion doim hurmat qilinadi */ @media (prefers-reduced-motion: reduce) { /* harakat yoʻq, ma'no bor: siljish 0, shkala 1, cheksiz animatsiya toʻxtaydi; rang va holat qoladi (WDS «Harakat») */ :root, [data-fx-personality], [data-fx-motion] { --fx-knob-motion: 0; --fx-knob-motion-press: 0; --fx-knob-motion-lift: 0; --fx-knob-motion-stagger: 0; --fx-knob-motion-loop: 0; --fx-motion-shift-sm: 0px; --fx-motion-shift-md: 0px; --fx-motion-shift-lg: 0px; --fx-motion-scale-enter: 1; } } } /* Yordamchilar: ekranda koʻrinmaydi, ekran oʻquvchi oʻqiydi; «Asosiy qismga oʻtish» havolasi fokusda chiqadi */ @layer fx.utilities { /* inset 0 — boshlangʻich nuqta konteyner burchagida: aylanuvchi oʻram (overflow: auto) ichida boʻlsa ham sahifani yonga kengaytirmaydi (Fox OS 21.10: CRM matritsasida 390 px sahifa 1086 px boʻlardi) */ .fx-sr-only:not(:focus-within, :focus) { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .fx-skip-link:not(:focus) { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .fx-skip-link:focus { position: fixed; inset-block-start: var(--fx-space-2); inset-inline-start: var(--fx-space-2); z-index: 10; padding: var(--fx-space-2) var(--fx-space-4); border-radius: var(--fx-radius-control); background: var(--fx-bg-brand-solid); color: var(--fx-text-on-brand); } } /* Harakat yordamchilari (fx.utilities): AI matn yaltirashi, qadamli kirish (expressive), yorqin chegara */ @layer fx.utilities { /* «Oʻylayapti…» — matn ustidan yorugʻlik oʻtadi */ .fx-shimmer-text { background: linear-gradient(90deg, var(--fx-text-tertiary) 35%, var(--fx-text-primary) 50%, var(--fx-text-tertiary) 65%) 0 0 / 300% 100% text; color: transparent; animation: fx-shimmer-text var(--fx-duration-shimmer) linear infinite; } @keyframes fx-shimmer-text { from { background-position: 100% 0; } to { background-position: 0 0; } } @media (prefers-reduced-motion: reduce) { .fx-shimmer-text { animation: none; color: var(--fx-text-tertiary); background: none; } } /* Roʻyxat elementlari ketma-ket kiradi — faqat expressive (knob), 8 tagacha */ [data-fx-stagger] > * { animation: fx-stagger-in calc(var(--fx-motion-base) * var(--fx-knob-motion-stagger)) var(--fx-ease-enter) both; } [data-fx-stagger] > :nth-child(2) { animation-delay: calc(var(--fx-duration-stagger) * 1 * var(--fx-knob-motion-stagger)); } [data-fx-stagger] > :nth-child(3) { animation-delay: calc(var(--fx-duration-stagger) * 2 * var(--fx-knob-motion-stagger)); } [data-fx-stagger] > :nth-child(4) { animation-delay: calc(var(--fx-duration-stagger) * 3 * var(--fx-knob-motion-stagger)); } [data-fx-stagger] > :nth-child(5) { animation-delay: calc(var(--fx-duration-stagger) * 4 * var(--fx-knob-motion-stagger)); } [data-fx-stagger] > :nth-child(6) { animation-delay: calc(var(--fx-duration-stagger) * 5 * var(--fx-knob-motion-stagger)); } [data-fx-stagger] > :nth-child(7) { animation-delay: calc(var(--fx-duration-stagger) * 6 * var(--fx-knob-motion-stagger)); } [data-fx-stagger] > :nth-child(n + 8) { animation-delay: calc(var(--fx-duration-stagger) * 7 * var(--fx-knob-motion-stagger)); } @keyframes fx-stagger-in { from { opacity: 0; translate: 0 var(--fx-motion-shift-md); } } /* Yorqin chegara (landing kartasi, AI javobi): aylanuvchi gradient — faqat expressive'da aylanadi */ @property --fx-glow-angle { syntax: ""; inherits: false; initial-value: 0deg; } .fx-glow { border: var(--fx-border-width-default) solid transparent; background: linear-gradient(var(--fx-bg-surface), var(--fx-bg-surface)) padding-box, conic-gradient(from var(--fx-glow-angle), var(--fx-viz-brand), var(--fx-viz-accent), var(--fx-color-pastel-pink), var(--fx-viz-brand)) border-box; } [data-fx-motion="expressive"] .fx-glow { animation: fx-glow-spin calc(var(--fx-duration-shimmer) * 3) linear infinite; } @keyframes fx-glow-spin { to { --fx-glow-angle: 360deg; } } @media (prefers-reduced-motion: reduce) { .fx-glow { animation: none; } } /* Harakat oʻchirilgan (data-fx-motion="none"): cheksiz animatsiyalar toʻxtaydi */ [data-fx-motion="none"] :is(*, *::before, *::after) { animation-iteration-count: 1 !important; } /* Gibrid chegara (data-fx-edge="hybrid", Ustoz 19.10): sahifadagi yuza foni bilan ajraladi — chiziqsiz; yuza ICHIDAGI bir xil fonli blok (karta ichidagi karta, jadval, roʻyxat, maydon guruhi) — chiziq bilan. Yuza ichida chiziq tokeni qaytadan koʻrinadigan qilinadi. */ [data-fx-edge="hybrid"] :is(.fx-card, .fx-chartcard, .fx-plan, .fx-stat, .fx-dialog, .fx-sheet, .fx-popover, .fx-menu, .fx-hovercard, .fx-command, .fx-drawer, .fx-accordion, .fx-datagrid, .fx-kanban__col, .fx-shell__side, .fx-settings) * { --fx-border-color-surface: var(--fx-border-color-default); --fx-knob-outline: 1; } } @layer fx.components { /* Akkordeon: native
(name — bittasi ochiq), strelka — chevron, yopiqda −90°, ochiqda 0°. Ochilish balandlik animatsiyasi ::details-content + interpolate-size qoʻllaydigan brauzerda. */ .fx-accordion { display: grid; border-block: var(--fx-border-width-default) solid var(--fx-border-color-default); } .fx-accordion__item + .fx-accordion__item { border-block-start: var(--fx-border-width-default) solid var(--fx-border-color-default); } .fx-accordion__summary { display: flex; align-items: center; gap: var(--fx-space-3); min-block-size: var(--fx-control-h-md); padding-block: var(--fx-space-3); cursor: pointer; list-style: none; font-weight: var(--fx-font-weight-medium); color: var(--fx-text-primary); } .fx-accordion__summary::-webkit-details-marker { display: none; } .fx-accordion__summary::after { content: ""; flex: none; margin-inline-start: auto; inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); background: currentColor; opacity: 0.55; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; rotate: -90deg; transition: rotate var(--fx-motion-fast) var(--fx-ease-standard), opacity var(--fx-motion-fast) var(--fx-ease-standard); } .fx-accordion__summary:hover::after { opacity: 0.9; } .fx-accordion__item[open] > .fx-accordion__summary::after { rotate: 0deg; } .fx-accordion__summary:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: var(--fx-border-width-focus); border-radius: var(--fx-radius-badge); } .fx-accordion__body { padding-block-end: var(--fx-space-4); color: var(--fx-text-secondary); font-size: var(--fx-font-size-sm); line-height: 1.6; } @supports (interpolate-size: allow-keywords) { .fx-accordion { interpolate-size: allow-keywords; } .fx-accordion__item::details-content { block-size: 0; overflow: clip; transition: block-size var(--fx-motion-base) var(--fx-ease-standard), content-visibility var(--fx-motion-base) allow-discrete; } .fx-accordion__item[open]::details-content { block-size: auto; } } /* ---- Kengaytma (2.143, 2.153, 2.154): sarlavha slotlari, chevron chapda, bordered/separated/flush, ichma-ich, print ---- */ .fx-accordion__icon { flex: none; inline-size: var(--fx-size-icon-md); block-size: var(--fx-size-icon-md); color: var(--fx-text-tertiary); } .fx-accordion__meta { margin-inline-start: auto; color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); font-weight: var(--fx-font-weight-regular); } .fx-accordion__summary:has(> .fx-accordion__meta)::after { margin-inline-start: var(--fx-space-2); } .fx-accordion[data-chevron="start"] .fx-accordion__summary::after { order: -1; margin-inline-start: 0; } .fx-accordion[data-chevron="start"] .fx-accordion__meta { margin-inline-start: auto; } .fx-accordion[data-chevron="start"] .fx-accordion__body { padding-inline-start: calc(var(--fx-size-icon-sm) + var(--fx-space-3)); } .fx-accordion[data-variant="flush"] { border-block: 0; } .fx-accordion[data-variant="flush"] .fx-accordion__item + .fx-accordion__item { border-block-start: 0; } .fx-accordion[data-variant="bordered"] { border: var(--fx-border-width-default) solid var(--fx-border-color-default); border-radius: var(--fx-radius-surface); overflow: clip; } .fx-accordion[data-variant="separated"] { gap: var(--fx-space-2); border-block: 0; } .fx-accordion[data-variant="separated"] > .fx-accordion__item { border: var(--fx-border-width-default) solid var(--fx-border-color-default); border-radius: var(--fx-radius-surface); overflow: clip; } .fx-accordion:is([data-variant="bordered"], [data-variant="separated"]) :is(.fx-accordion__summary, .fx-accordion__body) { padding-inline: var(--fx-space-4); } .fx-accordion[data-focus="inset"] .fx-accordion__summary:focus-visible { outline-offset: calc(var(--fx-border-width-focus) * -1); } .fx-accordion__body > .fx-accordion { margin-block-start: var(--fx-space-2); border-block-end: 0; padding-inline-start: var(--fx-space-4); } /* Bosma: hammasi ochiq chiqadi */ @media print { .fx-accordion__item::details-content { block-size: auto; content-visibility: visible; } .fx-accordion__summary::after { display: none; } } @media (forced-colors: active) { .fx-accordion__summary::after { background: ButtonText; opacity: 1; } } } @layer fx.components { /* AI yordamchi widget'i («Guli saytda»): oʻng pastda dumaloq tugma (personaj sloti) → suhbat oynasi. Har sayt — sozlama (nom, rang, endpoint, til). Holatlar: idle · open · sending · error · handoff (menejerga — Telegram/telefon). Telefonda (< 640 px) — toʻliq ekran. Personaj: tinch holatda yengil «nafas», sahifada bir marta qoʻl silkitadi (data-mascot="wave"); harakat kamaytirilsa — yoʻq. */ .fx-assistant { --_c: var(--fx-bg-brand-solid); --_edge: var(--fx-space-5); /* pufak yoyi chegaralangan: «Aylana» uslubida ham pufak shakli buzilmaydi */ --_r: min(var(--fx-radius-overlay), var(--fx-space-5)); --_rt: min(var(--fx-radius-badge), var(--fx-space-1)); position: fixed; inset: auto max(var(--_edge), env(safe-area-inset-right, 0px)) max(var(--_edge), env(safe-area-inset-bottom, 0px)) auto; z-index: 50; display: grid; justify-items: end; gap: var(--fx-space-3); font-size: var(--fx-font-size-sm); color: var(--fx-text-primary); } /* och doira (data-color="light") — qora konturli personaj ikkala rejimda ham aniq koʻrinsin */ .fx-assistant[data-color="light"] { --_c: var(--fx-bg-static-light); } .fx-assistant[data-color="light"] :is(.fx-assistant__launcher, .fx-assistant__avatar) { color: var(--fx-text-on-static-light); } /* panel ranglari saytning oʻz tokenidan: --assistant-surface / --assistant-text yoki saytdagi --surface (--bg) / --text; boʻlmasa — FoxUI. Shunda qorongʻi saytda panel sayt fonida turadi (NomLab: iliq qora), FoxUI'ning koʻkimtir qorasi emas */ .fx-assistant { --_surface: var(--assistant-surface, var(--surface, var(--bg, var(--fx-bg-surface)))); --_fg: var(--assistant-text, var(--text, var(--fx-text-primary))); --_muted: color-mix(in oklab, var(--_fg) 7%, var(--_surface)); --_line: color-mix(in oklab, var(--_fg) 12%, var(--_surface)); --_dim: color-mix(in oklab, var(--_fg) 58%, var(--_surface)); } .fx-assistant > .fx-assistant__mascot { display: none; } /* manba — JS nusxa oladi */ .fx-assistant__launcher { position: relative; display: grid; place-items: center; inline-size: calc(var(--fx-space-12) + var(--fx-space-2)); block-size: calc(var(--fx-space-12) + var(--fx-space-2)); padding: 0; border: 0; border-radius: var(--fx-radius-circle); background: var(--_c); color: var(--_ink, var(--fx-text-on-category)); box-shadow: var(--fx-shadow-lg); cursor: pointer; transition: scale var(--fx-motion-instant) var(--fx-ease-standard), translate var(--fx-motion-base) var(--fx-ease-spring); } .fx-assistant__launcher:hover { translate: 0 calc(var(--fx-space-1) * -0.5); } .fx-assistant__launcher:active { scale: var(--fx-motion-press); } .fx-assistant__launcher:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: var(--fx-border-width-focus); } .fx-assistant__launcher > .fx-assistant__face { position: absolute; inset: var(--fx-space-1); inline-size: calc(100% - var(--fx-space-1) * 2); block-size: calc(100% - var(--fx-space-1) * 2); border-radius: var(--fx-radius-circle); object-fit: cover; } .fx-assistant__launcher > .fx-assistant__face:not(img, svg, canvas) { display: grid; place-items: center; font-size: var(--fx-font-size-lg); font-weight: var(--fx-font-weight-semibold); } .fx-assistant__icon { display: none; } .fx-assistant__launcher[aria-expanded="true"] > .fx-assistant__face { opacity: 0; } .fx-assistant__launcher[aria-expanded="true"] .fx-assistant__icon { display: grid; } .fx-assistant__icon > svg { inline-size: var(--fx-size-icon-lg); block-size: var(--fx-size-icon-lg); } .fx-assistant__glyph > svg { inline-size: var(--fx-size-icon-lg); block-size: var(--fx-size-icon-lg); } .fx-assistant__badge { position: absolute; inset-block-start: 0; inset-inline-end: 0; min-inline-size: var(--fx-size-icon-md); block-size: var(--fx-size-icon-md); border-radius: var(--fx-radius-circle); background: var(--fx-bg-error-solid); color: var(--fx-text-on-error); font-size: var(--fx-font-size-xs); font-weight: var(--fx-font-weight-semibold); line-height: var(--fx-size-icon-md); outline: var(--fx-border-width-focus) solid var(--fx-bg-page); } /* personaj harakati: tinch «nafas» (loop knob), bir martalik qoʻl silkitish; tab yashirinsa — pauza */ .fx-assistant[data-mascot="idle"] .fx-assistant__launcher > .fx-assistant__face:not(svg, .fx-orb) { animation: fx-assistant-breath calc(var(--fx-duration-pulse) * 2.5) var(--fx-ease-standard) infinite; } .fx-assistant[data-mascot="wave"] .fx-assistant__launcher > .fx-assistant__face:not(svg, .fx-orb) { transform-origin: 70% 90%; animation: fx-assistant-wave calc(var(--fx-motion-slow) * 4) var(--fx-ease-standard) 1; } .fx-assistant[data-paused] .fx-assistant__launcher > .fx-assistant__face { animation-play-state: paused; } /* ichki SVG animatsiyalari ham: tab yashirin yoki oyna ochiq (tugmadagi personaj koʻrinmaydi) — pauza, CPU tejaladi */ .fx-assistant[data-paused] .fx-assistant__launcher > .fx-assistant__face :is(*, *::before, *::after), .fx-assistant__launcher[aria-expanded="true"] > .fx-assistant__face :is(*, *::before, *::after) { animation-play-state: paused !important; } .fx-assistant[data-paused] .fx-assistant__avatar :is(*, *::before, *::after) { animation-play-state: paused !important; } .fx-assistant[data-mascot="thinking"] .fx-assistant__launcher > .fx-assistant__face:not(svg, .fx-orb) { animation: fx-pulse var(--fx-duration-pulse) var(--fx-ease-standard) infinite; } .fx-assistant[data-mascot="talking"] .fx-assistant__launcher > .fx-assistant__face:not(svg, .fx-orb) { animation: fx-assistant-breath var(--fx-motion-slow) var(--fx-ease-spring) 2; } /* jonli personaj (inline SVG) oʻzi harakatlanadi — tashqi tebranish ikkilanmasin; holatni .salom/.oylayapti/.gapiryapti/.uzatyapti sinflari beradi */ .fx-assistant:is([data-mascot="idle"], [data-mascot="wave"], [data-mascot="thinking"], [data-mascot="talking"], [data-mascot="handoff"]) .fx-assistant__launcher > svg.fx-assistant__face { animation: none; } /* abstrakt shar (data-face="orb") — tugmani toʻliq egallaydi, rangi saytning brend rangi; harakatni sharning oʻzi beradi */ .fx-assistant .fx-orb { --_o: var(--_c); } .fx-assistant__launcher > .fx-orb.fx-assistant__face { inset: 0; inline-size: 100%; block-size: 100%; } .fx-assistant__avatar > .fx-orb { inline-size: 100%; } @keyframes fx-assistant-breath { 50% { scale: 1.04; } } @keyframes fx-assistant-wave { 15%, 45% { rotate: -12deg; } 30%, 60% { rotate: 10deg; } 75% { rotate: 0deg; } } @media (prefers-reduced-motion: reduce) { .fx-assistant__launcher > .fx-assistant__face { animation: none !important; } } /* salom pufakchasi */ /* salom pufakchasi: panel bilan bir oila — yumshoq soya, chiziq, matn toza */ .fx-assistant__greet { color: var(--_fg); display: flex; align-items: center; gap: var(--fx-space-2); max-inline-size: calc(var(--fx-space-12) * 6); padding: var(--fx-space-3) var(--fx-space-2) var(--fx-space-3) var(--fx-space-4); border: var(--fx-border-width-default) solid var(--_line); border-radius: var(--_r); border-end-end-radius: var(--_rt); background: var(--_surface); box-shadow: var(--fx-shadow-lg); line-height: 1.45; cursor: pointer; animation: fx-stagger-in var(--fx-motion-base) var(--fx-ease-enter); } .fx-assistant__x { display: grid; place-items: center; flex: none; inline-size: var(--fx-space-8); block-size: var(--fx-space-8); padding: 0; border: 0; border-radius: var(--fx-radius-circle); background: none; color: var(--_dim); cursor: pointer; transition: background-color var(--fx-motion-fast) var(--fx-ease-standard), color var(--fx-motion-fast) var(--fx-ease-standard); } .fx-assistant__x[hidden], .fx-assistant__reset[hidden] { display: none; } .fx-assistant__x:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: calc(var(--fx-border-width-focus) * -1); } .fx-assistant__x:hover { background: var(--_muted); color: var(--_fg); } .fx-assistant__x > svg { inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); } /* telefonda: salom pufakchasi 2 qatordan oshmaydi; panel ochiq boʻlsa (har qanday holatda — xato, menejer ham) shar tugmasi yashiriladi, «Yuborish»ni yopmaydi */ @media (max-width: 599.98px) { .fx-assistant__greet { max-inline-size: min(calc(100vw - var(--_edge) * 3 - var(--fx-control-h-lg)), calc(var(--fx-space-12) * 5)); padding-block: var(--fx-space-2); font-size: var(--fx-font-size-sm); } .fx-assistant__greet > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .fx-assistant:has(> .fx-assistant__panel:not([hidden])) .fx-assistant__launcher { display: none; } } } /* ---- widget:panel — mustaqil widget'da panel uslubi birinchi ochilganda yuklanadi (Mister Fox 19.10: tezlik); FoxUI'da bitta faylda ---- */ @layer fx.components { /* Panel (Ustoz 19.10 redizayni: «super-aql va komil kompaniya bilan gaplashish hissi»). Tamoyillar — Claude, Gemini, Copilot, Notion AI: 1) yozish maydoni va yuborish — BITTA karta (tugma maydon ichida, alohida tushib turmaydi); 2) javob — pufak emas, toza oʻqiladigan matn; savol — oʻngda yumshoq kulrang pufak; brend rangi faqat yuborish tugmasida; 3) savol namunalari — hammasi bir xil qator (bitta roʻyxat), keyingi takliflar — bir xil chiplar; 4) kutish — «Oʻylayapman» ustida yorugʻlik. */ .fx-assistant__panel { --_pr: min(var(--fx-radius-overlay), calc(var(--fx-space-5) + var(--fx-space-1))); --_ir: min(var(--fx-radius-surface), var(--fx-space-4)); --_ctl: max(var(--fx-radius-control), calc(var(--fx-knob-pill) * 50%)); color: var(--_fg); display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto auto; inline-size: min(calc(100vw - var(--_edge) * 2), calc(var(--fx-space-12) * 8.5)); block-size: min(calc(100dvh - var(--fx-space-12) * 3), calc(var(--fx-space-12) * 13)); border: var(--fx-border-width-default) solid var(--_line); border-radius: var(--_pr); background: var(--_surface); box-shadow: var(--fx-shadow-lg); overflow: hidden; transform-origin: bottom right; animation: fx-assistant-in var(--fx-motion-slow) var(--fx-ease-enter); } @keyframes fx-assistant-in { from { opacity: 0; scale: 0.96; translate: 0 var(--fx-space-3); } } .fx-assistant__panel:focus:not(:focus-visible) { outline: none; } /* sarlavha: tinch, chiziqsiz — nom va kimligi, oʻngda «yangi suhbat» va yopish */ .fx-assistant__head { display: flex; align-items: center; gap: var(--fx-space-3); padding: var(--fx-space-4) var(--fx-space-3) var(--fx-space-2) var(--fx-space-4); } .fx-assistant__avatar { display: grid; place-items: center; flex: none; inline-size: var(--fx-space-8); block-size: var(--fx-space-8); border-radius: var(--fx-radius-circle); background: var(--_c); color: var(--_ink, var(--fx-text-on-category)); overflow: hidden; font-weight: var(--fx-font-weight-semibold); } .fx-assistant__avatar > :is(img, svg, canvas) { inline-size: 100%; block-size: 100%; object-fit: cover; } .fx-assistant__who { display: grid; flex: 1; min-inline-size: 0; line-height: 1.25; } .fx-assistant__who b { font-size: var(--fx-font-size-md); font-weight: var(--fx-font-weight-semibold); letter-spacing: -0.01em; } .fx-assistant__who small { overflow: hidden; color: var(--_dim); font-size: var(--fx-font-size-xs); text-overflow: ellipsis; white-space: nowrap; } .fx-assistant[data-state="error"] .fx-assistant__who small { color: var(--fx-fg-error); } .fx-assistant[data-state="handoff"] .fx-assistant__who small { color: color-mix(in oklab, var(--fx-fg-warning) 75%, var(--_fg)); } .fx-assistant[data-state="sending"] .fx-assistant__chips { opacity: 0.5; pointer-events: none; } /* suhbat oqimi */ .fx-assistant__log { display: flex; flex-direction: column; gap: var(--fx-space-3); padding: var(--fx-space-3) var(--fx-space-5) var(--fx-space-4); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--_line) transparent; } .fx-assistant__msg { max-inline-size: 100%; line-height: 1.6; overflow-wrap: anywhere; animation: fx-assistant-rise var(--fx-motion-base) var(--fx-ease-enter); } @keyframes fx-assistant-rise { from { opacity: 0; translate: 0 var(--fx-space-2); } } .fx-assistant__msg[data-who="user"] { align-self: end; max-inline-size: 82%; margin-block-start: var(--fx-space-2); padding: var(--fx-space-2) var(--fx-space-4); border-radius: calc(var(--_ir) + var(--fx-space-1)); background: var(--_muted); white-space: pre-wrap; } .fx-assistant__msg[data-who="bot"] { align-self: stretch; font-size: var(--fx-font-size-md); } .fx-assistant__msg[data-who="bot"] > :is(p, ul) { margin: 0; } .fx-assistant__msg[data-who="bot"] > :is(p, ul) + :is(p, ul) { margin-block-start: var(--fx-space-3); } .fx-assistant__msg[data-who="bot"] ul { display: grid; gap: var(--fx-space-1); padding-inline-start: var(--fx-space-5); } .fx-assistant__msg[data-who="bot"] li::marker { color: var(--_dim); } .fx-assistant__msg[data-who="bot"] strong { font-weight: var(--fx-font-weight-semibold); } .fx-assistant__msg a { color: var(--_c); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--_c) 40%, transparent); text-underline-offset: 0.2em; } /* javob ostida: nusxa — sezilar-sezilmas, ustiga kelganda aniq */ .fx-assistant__acts { display: flex; gap: var(--fx-space-1); margin-block-start: calc(var(--fx-space-2) * -1); } .fx-assistant__act { display: grid; place-items: center; inline-size: var(--fx-space-8); block-size: var(--fx-space-8); margin-inline-start: calc(var(--fx-space-2) * -1); padding: 0; border: 0; border-radius: var(--_ctl); background: none; color: var(--_dim); cursor: pointer; opacity: 0.7; transition: opacity var(--fx-motion-fast) var(--fx-ease-standard), background-color var(--fx-motion-fast) var(--fx-ease-standard); } .fx-assistant__act:hover, .fx-assistant__act:focus-visible { opacity: 1; background: var(--_muted); color: var(--_fg); } .fx-assistant__act > svg { inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); } /* tanishuv: shar, salom sarlavhasi, kichik matn, savol namunalari — bitta roʻyxat (bir xil qatorlar) */ .fx-assistant__intro { display: grid; justify-items: start; gap: var(--fx-space-2); margin-block: auto 0; padding-block: var(--fx-space-4) var(--fx-space-1); animation: fx-assistant-rise var(--fx-motion-slow) var(--fx-ease-enter); } .fx-assistant__hero { display: grid; place-items: center; inline-size: calc(var(--fx-space-12) * 1.15); block-size: calc(var(--fx-space-12) * 1.15); margin-block-end: var(--fx-space-2); border-radius: var(--fx-radius-circle); background: var(--_c); color: var(--_ink, var(--fx-text-on-category)); overflow: hidden; font-size: var(--fx-font-size-xl); font-weight: var(--fx-font-weight-semibold); } .fx-assistant__hero > :is(img, svg, canvas, .fx-orb) { inline-size: 100%; block-size: 100%; object-fit: cover; } .fx-assistant__intro h2 { margin: 0; font-family: var(--fx-font-family-display, inherit); font-size-adjust: var(--fx-font-adjust-display, none); font-size: var(--fx-font-size-2xl); font-weight: var(--fx-font-weight-semibold); line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; } .fx-assistant__intro > p { margin: 0; max-inline-size: 36ch; color: var(--_dim); font-size: var(--fx-font-size-md); line-height: 1.5; text-wrap: pretty; } .fx-assistant__starters { display: grid; justify-self: stretch; margin-block-start: var(--fx-space-4); border: var(--fx-border-width-default) solid var(--_line); border-radius: var(--_ir); overflow: hidden; } .fx-assistant__starter { display: flex; align-items: center; justify-content: space-between; gap: var(--fx-space-3); min-block-size: var(--fx-control-h-md); padding: var(--fx-space-2) var(--fx-space-4); border: 0; background: none; color: inherit; font: inherit; font-size: var(--fx-font-size-sm); text-align: start; cursor: pointer; transition: background-color var(--fx-motion-fast) var(--fx-ease-standard); } .fx-assistant__starter + .fx-assistant__starter { border-block-start: var(--fx-border-width-default) solid var(--_line); } .fx-assistant__starter > svg { flex: none; inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); color: var(--_dim); transition: translate var(--fx-motion-fast) var(--fx-ease-standard), color var(--fx-motion-fast) var(--fx-ease-standard); } .fx-assistant__starter:hover { background: var(--_muted); } .fx-assistant__starter:hover > svg { translate: var(--fx-space-1) 0; color: var(--_fg); } .fx-assistant__starter:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: calc(var(--fx-border-width-focus) * -1); } /* kutish: «Oʻylayapman» ustidan yorugʻlik yuguradi */ .fx-assistant__thinking { align-self: start; color: var(--_dim); font-size: var(--fx-font-size-sm); font-weight: var(--fx-font-weight-medium); } .fx-assistant__thinking > span { background: linear-gradient(90deg, var(--_dim) 0 35%, var(--_fg) 50%, var(--_dim) 65% 100%) 0 0 / 300% 100%; background-clip: text; color: transparent; animation: fx-assistant-shimmer calc(var(--fx-duration-pulse) * 1.2) linear infinite; } .fx-assistant__thinking > span::after { content: "…"; } @keyframes fx-assistant-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } } /* uzun javob: ~9 qator, pastki qismi soʻnadi; «Davomi» ochadi */ .fx-assistant__msg[data-long]:not([data-open]) { max-block-size: calc(1.6em * 9); overflow: hidden; mask-image: linear-gradient(var(--fx-color-black) 55%, transparent); } .fx-assistant__more, .fx-assistant__link { align-self: start; margin-block-start: calc(var(--fx-space-2) * -1); padding: 0; border: 0; background: none; color: var(--_c); font: inherit; font-size: var(--fx-font-size-sm); font-weight: var(--fx-font-weight-medium); cursor: pointer; } .fx-assistant__more:hover, .fx-assistant__link:hover { text-decoration: underline; text-underline-offset: 0.2em; } :is(.fx-assistant__more, .fx-assistant__link):focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: var(--fx-space-1); border-radius: var(--fx-radius-badge); } /* menejer va xato — bir xil karta; tugmalar karta ichida bir qatorda */ .fx-assistant__handoff, .fx-assistant__error { display: grid; gap: var(--fx-space-3); padding: var(--fx-space-4); border: var(--fx-border-width-default) solid var(--_line); border-radius: var(--_ir); background: color-mix(in oklab, var(--_muted) 50%, var(--_surface)); animation: fx-assistant-rise var(--fx-motion-base) var(--fx-ease-enter); } .fx-assistant__handoff > p { margin: 0; line-height: 1.5; } .fx-assistant__handoff { grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--fx-space-12) * 3)), 1fr)); } .fx-assistant__handoff > p { grid-column: 1 / -1; } /* kontakt formasi (FoxOS 21.10): Guli pufagi ostida — ism, +998 telefon, «Yuborish»; yuborilgach «✓ Yuborildi» */ .fx-assistant__contact { display: grid; gap: var(--fx-space-3); padding: var(--fx-space-4); border: var(--fx-border-width-default) solid var(--_line); border-radius: var(--_ir); background: var(--_surface); animation: fx-assistant-rise var(--fx-motion-base) var(--fx-ease-enter); } .fx-assistant__cf { display: grid; gap: var(--fx-space-1); font-size: var(--fx-font-size-xs); color: var(--_dim); } /* yoy — balandlikdan (kenglikdan emas: 50 % kenglik ellips beradi — qovun) */ .fx-assistant__cf input, .fx-assistant__tel { box-sizing: border-box; inline-size: 100%; min-block-size: var(--fx-control-h-md); border: var(--fx-border-width-default) solid var(--_line); border-radius: calc(var(--fx-knob-pill) * var(--fx-control-h-md) / 2 + (1 - var(--fx-knob-pill)) * var(--fx-radius-control)); background: var(--_muted); color: var(--_fg); font: inherit; font-size: var(--fx-font-size-md); } .fx-assistant__cf > input { padding: 0 var(--fx-space-3); } .fx-assistant__tel { display: flex; align-items: center; gap: var(--fx-space-2); padding-inline-start: var(--fx-space-3); } .fx-assistant__tel > b { color: var(--_dim); font-weight: var(--fx-font-weight-medium); } .fx-assistant__tel > input { flex: 1; min-inline-size: 0; min-block-size: 0; padding: 0 var(--fx-space-3) 0 0; border: 0; background: none; font-variant-numeric: tabular-nums; } .fx-assistant__cf input:focus, .fx-assistant__tel:focus-within { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: calc(var(--fx-border-width-default) * -1); } .fx-assistant__tel > input:focus { outline: none; } .fx-assistant__cerr { margin: 0; color: var(--fx-text-error); font-size: var(--fx-font-size-xs); } /* tugma — vidjetning oʻz rangida (yuborish tugmasi bilan bir xil), sahifa brendidan emas */ .fx-assistant__csend { inline-size: 100%; min-block-size: var(--fx-control-h-md); border: 0; border-radius: calc(var(--fx-knob-pill) * var(--fx-control-h-md) / 2 + (1 - var(--fx-knob-pill)) * var(--fx-radius-control)); background: var(--_c); color: var(--_ink, var(--fx-text-on-brand)); font-weight: var(--fx-font-weight-semibold); cursor: pointer; } .fx-assistant__csend:disabled { background: var(--_muted); color: var(--_dim); cursor: default; } .fx-assistant__csend:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: var(--fx-border-width-default); } .fx-assistant__csent { display: flex; align-items: center; gap: var(--fx-space-2); margin: 0; color: var(--fx-fg-success); font-weight: var(--fx-font-weight-semibold); } .fx-assistant__csent > svg { inline-size: var(--fx-size-icon-md); block-size: var(--fx-size-icon-md); } .fx-assistant__error { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--fx-space-1) var(--fx-space-3); color: var(--_fg); } .fx-assistant__error > span::before { content: ""; display: inline-block; inline-size: var(--fx-size-status-dot-sm); block-size: var(--fx-size-status-dot-sm); margin-inline-end: var(--fx-space-2); border-radius: var(--fx-radius-circle); background: var(--fx-fg-error); vertical-align: 0.1em; } .fx-assistant__error .fx-assistant__link { margin: 0; } .fx-assistant__panel .fx-btn { --_h: var(--fx-control-h-sm); justify-content: center; border-radius: var(--_ctl); } .fx-assistant__panel .fx-btn:not([data-variant="primary"]) { border-color: var(--_line); background: var(--_surface); color: var(--_fg); } .fx-assistant__panel .fx-btn[data-variant="primary"] { border-color: transparent; background: var(--_c); color: var(--_ink, var(--fx-text-on-brand)); } /* keyingi takliflar — bir xil chiplar, bir qatorda (sigʻmasa yon tomonga suriladi, chetida soʻnadi) */ .fx-assistant__chips { display: flex; gap: var(--fx-space-2); padding: 0 var(--fx-space-4); overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg, var(--fx-color-black) calc(100% - var(--fx-space-6)), transparent); } .fx-assistant__chips::-webkit-scrollbar { display: none; } .fx-assistant__chips:not(:empty) { padding-block-end: var(--fx-space-2); } .fx-assistant__chip { flex: none; block-size: var(--fx-control-h-sm); padding: 0 var(--fx-space-3); border: var(--fx-border-width-default) solid var(--_line); border-radius: var(--_ctl); background: var(--_surface); color: var(--_fg); font: inherit; font-size: var(--fx-font-size-sm); white-space: nowrap; cursor: pointer; transition: background-color var(--fx-motion-fast) var(--fx-ease-standard), border-color var(--fx-motion-fast) var(--fx-ease-standard); } .fx-assistant__chip:hover { border-color: color-mix(in oklab, var(--_fg) 24%, var(--_surface)); background: var(--_muted); } .fx-assistant__chip:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: var(--fx-border-width-default); } /* yozish: maydon va yuborish — bitta karta; fokusda karta chegarasi yorishadi; yuborish — maydon ichida, oʻng pastda */ .fx-assistant__form { margin: 0; padding: var(--fx-space-1) var(--fx-space-3) var(--fx-space-2); } .fx-assistant__box { display: flex; align-items: end; gap: var(--fx-space-2); padding: var(--fx-space-2) var(--fx-space-2) var(--fx-space-2) var(--fx-space-4); border: var(--fx-border-width-default) solid var(--_line); border-radius: calc(var(--_ir) + var(--fx-space-1)); background: var(--_surface); box-shadow: var(--fx-shadow-sm); transition: border-color var(--fx-motion-fast) var(--fx-ease-standard), box-shadow var(--fx-motion-fast) var(--fx-ease-standard); } .fx-assistant__box:focus-within { border-color: color-mix(in oklab, var(--_fg) 30%, var(--_surface)); box-shadow: var(--fx-shadow-md); } .fx-assistant__box textarea { flex: 1; min-inline-size: 0; min-block-size: calc(var(--fx-control-h-sm)); max-block-size: calc(var(--fx-control-h-md) * 3); margin: 0; padding: var(--fx-space-2) 0; box-sizing: border-box; border: 0; background: none; color: inherit; font: inherit; font-size: var(--fx-font-size-md); line-height: 1.4; resize: none; outline: none; } /* mezbon saytning umumiy input:focus uslubi (qatlamsiz) karta ichida ikkinchi ramka chizmasin (Fox NB, 19.10) — fokusni karta koʻrsatadi */ .fx-assistant__box textarea:is(:focus, :focus-visible, :hover) { border: 0 !important; outline: none !important; box-shadow: none !important; background: none !important; } .fx-assistant__box textarea::placeholder { color: var(--_dim); } .fx-assistant__send { display: grid; place-items: center; flex: none; inline-size: var(--fx-control-h-sm); block-size: var(--fx-control-h-sm); padding: 0; border: 0; border-radius: var(--_ctl); background: var(--_c); color: var(--_ink, var(--fx-text-on-brand)); cursor: pointer; transition: opacity var(--fx-motion-fast) var(--fx-ease-standard), scale var(--fx-motion-instant) var(--fx-ease-standard), background-color var(--fx-motion-fast) var(--fx-ease-standard); } .fx-assistant__send:not(:disabled):active { scale: var(--fx-motion-press); } .fx-assistant__send:disabled { background: var(--_muted); color: var(--_dim); cursor: default; } .fx-assistant__send:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: var(--fx-border-width-default); } .fx-assistant__send > svg { inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); } .fx-assistant__note { margin: 0; padding: 0 var(--fx-space-4) var(--fx-space-3); color: var(--_dim); font-size: calc(var(--fx-font-size-xs) * 0.92); text-align: center; } @media (prefers-reduced-motion: reduce) { .fx-assistant__panel, .fx-assistant__msg, .fx-assistant__intro, .fx-assistant__thinking > span { animation: none; } } /* telefonda (Ustoz 19.10: «juda koʻp matn bilan ekranni egallab turgandi»): pastdan chiqadigan varaq — sahifa tepada koʻrinib turadi; yozishda (klaviatura) baland boʻladi; matn bir pogʻona kichik */ @media (max-width: 599.98px) { .fx-assistant__panel { position: fixed; inset: auto 0 0 0; inline-size: auto; block-size: 78dvh; border: 0; border-radius: var(--_pr) var(--_pr) 0 0; padding-block-end: env(safe-area-inset-bottom, 0px); transition: block-size var(--fx-motion-base) var(--fx-ease-standard); animation-name: fx-assistant-sheet; } @keyframes fx-assistant-sheet { from { translate: 0 100%; } } .fx-assistant__panel:has(textarea:focus) { block-size: 92dvh; } .fx-assistant__head { position: relative; padding-block-start: var(--fx-space-5); } .fx-assistant__head::before { content: ""; position: absolute; inset-block-start: var(--fx-space-2); inset-inline-start: 50%; translate: -50% 0; inline-size: var(--fx-space-8); block-size: var(--fx-space-1); border-radius: var(--fx-radius-pill); background: color-mix(in oklab, var(--_fg) 22%, var(--_surface)); } .fx-assistant__log { padding-inline: var(--fx-space-4); } .fx-assistant__msg[data-who="bot"], .fx-assistant__intro > p { font-size: var(--fx-font-size-sm); } .fx-assistant__intro h2 { font-size: var(--fx-font-size-xl); } .fx-assistant__act { opacity: 1; } } } @layer fx.components { /* Kvadrat avatar + holat nuqtasi (FoxOS (avval Fox Workspace) hilos namunasidan, Ustoz tasdigʻi 16.10; WDS «Komponentlar» 08.10 doira qoidasi bekor). */ .fx-avatar { --_s: var(--fx-size-avatar-md); --fx-avatar-ring: var(--fx-bg-surface); /* holat nuqtasi halqasi — avatar turgan yuza rangi (hook) */ position: relative; flex: none; display: inline-grid; place-items: center; inline-size: var(--_s); block-size: var(--_s); border-radius: calc(var(--_s) * var(--fx-radius-avatar-ratio)); background: var(--fx-bg-category-blue); color: var(--fx-text-on-category); font-size: var(--fx-font-size-xs); font-weight: var(--fx-font-weight-semibold); line-height: 1; user-select: none; } .fx-avatar[data-size="sm"] { --_s: var(--fx-size-avatar-sm); font-size: calc(var(--fx-font-size-xs) * 0.75); } .fx-avatar[data-size="lg"] { --_s: var(--fx-size-avatar-lg); font-size: var(--fx-font-size-lg); } /* Kapsula ichidagi avatar — doira (Ustoz 20.10, combobox): tugma, chip, roʻyxat bandi, nav bandi pill boʻlsa (Aylana), ichidagi avatar shu shaklga hamohang — toʻliq doira; boshqa uslublarda kvadrat avatar qoladi (16.10 qarori). knob-pill: 0 — kvadrat yoy, 1 — doira */ :is(.fx-chip, .fx-option, .fx-btn, .fx-nav__item, .fx-combobox) .fx-avatar { border-radius: calc(var(--_s) * max(var(--fx-radius-avatar-ratio), var(--fx-knob-pill) * 0.5)); } .fx-avatar > img { inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: inherit; } .fx-avatar[data-color="yellow"] { background: var(--fx-bg-category-yellow); } .fx-avatar[data-color="pink"] { background: var(--fx-bg-category-pink); } .fx-avatar[data-color="blue"] { background: var(--fx-bg-category-blue); } .fx-avatar[data-color="coral"] { background: var(--fx-bg-category-coral); } .fx-avatar[data-color="green"] { background: var(--fx-bg-category-green); } .fx-avatar[data-color="purple"] { background: var(--fx-bg-category-purple); } /* Holat: active — puls, waiting — sariq, stopped — qizil, idle — xira */ .fx-avatar[data-status]::after { content: ""; position: absolute; inset-inline-end: calc(var(--fx-border-width-focus) * -1); inset-block-end: calc(var(--fx-border-width-focus) * -1); inline-size: var(--fx-size-status-dot); block-size: var(--fx-size-status-dot); box-sizing: border-box; border-radius: var(--fx-radius-circle); border: var(--fx-border-width-focus) solid var(--fx-avatar-ring); background: var(--fx-border-color-strong); } .fx-avatar[data-size="sm"][data-status]::after { inline-size: var(--fx-size-status-dot-sm); block-size: var(--fx-size-status-dot-sm); } .fx-avatar[data-status="active"]::after { background: var(--fx-fg-success); animation: fx-pulse var(--fx-duration-pulse) var(--fx-ease-standard) infinite; } .fx-avatar[data-status="waiting"]::after { background: var(--fx-fg-warning); } .fx-avatar[data-status="stopped"]::after { background: var(--fx-fg-error); } @media (prefers-reduced-motion: reduce) { .fx-avatar[data-status]::after { animation: none; } } /* Guruh: bir-birining ustiga, kesim — avatar turgan yuza rangida; oxirida «+N» */ .fx-avatar-group { display: inline-flex; align-items: center; } .fx-avatar-group > .fx-avatar { outline: var(--fx-border-width-focus) solid var(--fx-avatar-ring); } .fx-avatar-group > .fx-avatar + .fx-avatar { margin-inline-start: calc(var(--fx-space-2) * -1); } .fx-avatar[data-more] { background: var(--fx-bg-muted); color: var(--fx-text-secondary); } /* ---- Kengaytma (2.45–2.53): xs/xl/2xl, guruh yoyilishi/toʻr/chegara, tugma-“+N”, surat zanjiri, belgi, tahrirlash ---- */ .fx-avatar[data-size="xs"] { --_s: var(--fx-size-icon-sm); font-size: calc(var(--fx-font-size-xs) * 0.5); } .fx-avatar[data-size="xs"][data-status]::after { inline-size: calc(var(--fx-size-status-dot-sm) * 0.6); block-size: calc(var(--fx-size-status-dot-sm) * 0.6); border-width: calc(var(--fx-border-width-focus) / 2); } .fx-avatar[data-size="xl"] { --_s: calc(var(--fx-size-avatar-lg) * 1.5); font-size: var(--fx-font-size-xl); } .fx-avatar[data-size="2xl"] { --_s: calc(var(--fx-size-avatar-lg) * 2); font-size: var(--fx-font-size-display-sm); } :is(.fx-avatar[data-size="xl"], .fx-avatar[data-size="2xl"])[data-status]::after { inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); } /* Guruh: transition + hover'da yoyilish (data-spread), toʻr (data-layout="grid"), eng koʻp koʻrinadigan soni (data-max) */ .fx-avatar-group > .fx-avatar + .fx-avatar { transition: margin var(--fx-motion-base) var(--fx-ease-standard); } .fx-avatar-group[data-spread]:is(:hover, :focus-within) > .fx-avatar + .fx-avatar { margin-inline-start: var(--fx-space-1); } .fx-avatar-group[data-layout="grid"] { flex-wrap: wrap; gap: var(--fx-space-2); } .fx-avatar-group[data-layout="grid"] > .fx-avatar + .fx-avatar { margin-inline-start: 0; } .fx-avatar-group[data-layout="grid"] > .fx-avatar { outline: 0; } .fx-avatar-group[data-max="3"] > .fx-avatar:nth-child(n + 4):not([data-more]), .fx-avatar-group[data-max="4"] > .fx-avatar:nth-child(n + 5):not([data-more]), .fx-avatar-group[data-max="5"] > .fx-avatar:nth-child(n + 6):not([data-more]), .fx-avatar-group[data-max="6"] > .fx-avatar:nth-child(n + 7):not([data-more]) { display: none; } /* “+N” bosiladigan boʻlsa (popover ochadi): haqiqiy . */ @supports (appearance: base-select) { .fx-select, .fx-select::picker(select), .fx-search__scope, .fx-search__scope::picker(select) { appearance: base-select; } .fx-select { display: flex; align-items: center; } .fx-select-wrap:has(> .fx-select)::after { display: none; } /* strelka endi ::picker-icon'da */ .fx-select::picker-icon { content: ""; position: absolute; inset-inline-end: var(--fx-space-4); inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); background: var(--fx-text-tertiary); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: rotate var(--fx-motion-fast) var(--fx-ease-standard); } .fx-select { position: relative; } .fx-select:open::picker-icon { rotate: 180deg; } /* qamrov tanlovi (fx-search__scope, «Hammasi») — brauzer uchburchagi ▼ emas, oʻsha chevron, matndan keyin oqimda (Ustoz 21.10: «strelkadan voz kechgandik»; test-ota ARROW-01) */ .fx-search__scope::picker-icon { content: ""; flex: none; inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); margin-inline-start: var(--fx-space-1); background: currentColor; opacity: 0.7; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: rotate var(--fx-motion-fast) var(--fx-ease-standard); } .fx-search__scope:open::picker-icon { rotate: 180deg; } .fx-search__scope { display: inline-flex; align-items: center; } :is(.fx-select, .fx-search__scope)::picker(select) { margin-block: var(--fx-space-1); padding: var(--fx-space-1); border: var(--fx-border-width-default) solid var(--fx-border-color-surface); border-radius: min(var(--fx-radius-overlay), var(--fx-space-4)); background: var(--fx-bg-surface); box-shadow: var(--fx-shadow-lg); color: var(--fx-text-primary); max-block-size: min(60dvh, calc(var(--fx-space-12) * 8)); overflow-y: auto; opacity: 1; transition: opacity var(--fx-motion-fast) var(--fx-ease-standard), translate var(--fx-motion-fast) var(--fx-ease-standard), display var(--fx-motion-fast) allow-discrete, overlay var(--fx-motion-fast) allow-discrete; } @starting-style { :is(.fx-select, .fx-search__scope):open::picker(select) { opacity: 0; translate: 0 calc(var(--fx-space-1) * -1); } } :is(.fx-select, .fx-search__scope) option { display: flex; align-items: center; gap: var(--fx-space-3); min-block-size: var(--fx-control-h-sm); padding: var(--fx-space-1) var(--fx-space-3); border-radius: min(var(--fx-radius-nav), var(--fx-space-3)); color: var(--fx-text-primary); font-size: var(--fx-font-size-sm); cursor: pointer; } :is(.fx-select, .fx-search__scope) option:is(:hover, :focus-visible) { background: var(--fx-bg-muted); outline: none; } :is(.fx-select, .fx-search__scope) option:checked { background: var(--fx-bg-brand-subtle); color: var(--fx-text-brand); font-weight: var(--fx-font-weight-medium); } :is(.fx-select, .fx-search__scope) option::checkmark { order: 1; margin-inline-start: auto; color: var(--fx-text-brand); } :is(.fx-select, .fx-search__scope) option:disabled { color: var(--fx-text-disabled); cursor: not-allowed; } .fx-select optgroup { padding-block-start: var(--fx-space-2); } .fx-select legend { padding: var(--fx-space-1) var(--fx-space-3); color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); font-weight: var(--fx-font-weight-semibold); } /* boy roʻyxat: ichki tugma, ikon/avatar va tavsif */ .fx-select[data-rich] { padding-inline: var(--fx-space-2); } .fx-select[data-rich] > button { display: flex; align-items: center; inline-size: 100%; padding-inline: var(--fx-space-2); border: 0; background: none; color: inherit; font: inherit; cursor: pointer; } .fx-select[data-rich] option small { display: block; color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); } .fx-select[data-rich] :is(.fx-avatar, svg) { flex: none; } } /* Matn ichidagi tanlov (20.10, heroui.pro Inline Select'dan): «… boʻyicha saralash» — qutisiz, matn bilan bir chiziqda, brend rangida va nuqtali tagchiziq bilan (havola emasligi koʻrinsin), yonida kichik strelka. Roʻyxat — oʻsha tizim ::picker'i (FX-SELECT-01). */ .fx-select-wrap:has(> .fx-select[data-variant="inline"]) { display: inline-block; vertical-align: baseline; } .fx-select-wrap:has(> .fx-select[data-variant="inline"])::after { inset-inline-end: 0; inline-size: 0.9em; block-size: 0.9em; background: currentColor; color: var(--fx-text-brand); } .fx-select[data-variant="inline"] { --_h: auto; display: inline-flex; inline-size: auto; block-size: auto; min-block-size: 0; padding: 0 calc(var(--fx-space-4) + var(--fx-space-1)) 0 0; border: 0; border-radius: var(--fx-radius-badge); background: transparent; color: var(--fx-text-brand); font: inherit; font-weight: var(--fx-font-weight-medium); text-decoration: underline dotted; text-decoration-thickness: calc(var(--fx-border-width-default) * 1.5); text-underline-offset: 0.2em; } .fx-select[data-variant="inline"]:hover { background: var(--fx-bg-brand-subtle); } .fx-select[data-variant="inline"]:focus-visible { outline-offset: var(--fx-border-width-default); } @supports (appearance: base-select) { .fx-select[data-variant="inline"]::picker-icon { inset-inline-end: 0; inline-size: 0.9em; block-size: 0.9em; background: currentColor; } } @media (forced-colors: active) { .fx-select { border-color: ButtonText; } } } @layer fx.components { /* Moslashuvchi overlay (4.26): data-fx-adaptive + data-rich — telefonda (< 640 px) boy roʻyxat (::picker) pastki varaqqa aylanadi. Oddiy