diff --git a/.changeset/breezy-planes-talk.md b/.changeset/breezy-planes-talk.md
new file mode 100644
index 000000000..e513d71e9
--- /dev/null
+++ b/.changeset/breezy-planes-talk.md
@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Fix cleanup of style in the new style injector.
diff --git a/.changeset/chatty-radios-agree.md b/.changeset/chatty-radios-agree.md
new file mode 100644
index 000000000..fd96d6257
--- /dev/null
+++ b/.changeset/chatty-radios-agree.md
@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": minor
+---
+
+Improved debug tools with better DX and simpler API.
diff --git a/.changeset/curly-vans-crash.md b/.changeset/curly-vans-crash.md
new file mode 100644
index 000000000..1a77cd65a
--- /dev/null
+++ b/.changeset/curly-vans-crash.md
@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Optimize rule generation by sorting in cache keys.
diff --git a/.changeset/perfect-jars-jump.md b/.changeset/perfect-jars-jump.md
new file mode 100644
index 000000000..e9147a6f7
--- /dev/null
+++ b/.changeset/perfect-jars-jump.md
@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Improve cache cleanup logic and cache checks.
diff --git a/.size-limit.cjs b/.size-limit.cjs
index 81f558f79..9c85f889d 100644
--- a/.size-limit.cjs
+++ b/.size-limit.cjs
@@ -20,20 +20,20 @@ module.exports = [
         }),
       );
     },
-    limit: '305kB',
+    limit: '310kB',
   },
   {
     name: 'Tree shaking (just a Button)',
     path: './dist/es/index.js',
     webpack: true,
     import: '{ Button }',
-    limit: '32 kB',
+    limit: '33 kB',
   },
   {
     name: 'Tree shaking (just an Icon)',
     path: './dist/es/index.js',
     webpack: true,
     import: '{ AiIcon }',
-    limit: '19 kB',
+    limit: '20 kB',
   },
 ];
diff --git a/.storybook/preview.jsx b/.storybook/preview.jsx
index b434d5683..83047906f 100644
--- a/.storybook/preview.jsx
+++ b/.storybook/preview.jsx
@@ -8,9 +8,9 @@ configure({ testIdAttribute: 'data-qa', asyncUtilTimeout: 10000 });
 
 // Load tasty debug utilities in local Storybook only (exclude Chromatic)
 if (!isChromatic() && import.meta.env.DEV) {
-  import('../src/tasty/debug').then(({ installGlobalDebug }) => {
+  import('../src/tasty/debug').then(({ tastyDebug }) => {
     try {
-      installGlobalDebug({ force: true });
+      tastyDebug.install();
     } catch (e) {
       console.warn('tastyDebug installation failed:', e);
     }
diff --git a/src/components/fields/ComboBox/ComboBox.tsx b/src/components/fields/ComboBox/ComboBox.tsx
index 433933770..d5fc970f1 100644
--- a/src/components/fields/ComboBox/ComboBox.tsx
+++ b/src/components/fields/ComboBox/ComboBox.tsx
@@ -3,7 +3,6 @@ import {
   ForwardedRef,
   forwardRef,
   ReactElement,
-  ReactNode,
   RefObject,
   useEffect,
   useMemo,
@@ -71,18 +70,14 @@ const TriggerElement = tasty({
     placeContent: 'center',
     placeSelf: 'stretch',
     radius: '(1r - 1bw) right',
-    width: {
-      '': '4x',
-      '[data-size="small"]': '3x',
-      '[data-size="medium"]': '4x',
-    },
+    width: '3x',
     color: {
       '': '#dark-02',
       hovered: '#dark-02',
       pressed: '#purple',
       '[disabled]': '#dark.30',
     },
-    border: 0,
+    border: 'left',
     reset: 'button',
     margin: 0,
     fill: {
diff --git a/src/components/fields/FilterPicker/FilterPicker.tsx b/src/components/fields/FilterPicker/FilterPicker.tsx
index 94b0b745a..cf2475886 100644
--- a/src/components/fields/FilterPicker/FilterPicker.tsx
+++ b/src/components/fields/FilterPicker/FilterPicker.tsx
@@ -220,6 +220,21 @@ export const FilterPicker = forwardRef(function FilterPicker<T extends object>(
     allValueProps,
     customValueProps,
     newCustomValueProps,
+    searchPlaceholder,
+    autoFocus,
+    filter,
+    emptyLabel,
+    searchInputStyles,
+    searchInputRef,
+    listStyles,
+    optionStyles,
+    sectionStyles,
+    headingStyles,
+    listRef,
+    disallowEmptySelection,
+    shouldUseVirtualFocus,
+    onEscape,
+    onOptionClick,
     ...otherProps
   } = props;
 
@@ -1005,6 +1020,17 @@ export const FilterPicker = forwardRef(function FilterPicker<T extends object>(
                 selectedKeys={
                   selectionMode === 'multiple' ? mappedSelectedKeys : undefined
                 }
+                searchPlaceholder={searchPlaceholder}
+                filter={filter}
+                listStyles={listStyles}
+                optionStyles={optionStyles}
+                sectionStyles={sectionStyles}
+                headingStyles={headingStyles}
+                listRef={listRef}
+                disallowEmptySelection={disallowEmptySelection}
+                emptyLabel={emptyLabel}
+                searchInputStyles={searchInputStyles}
+                searchInputRef={searchInputRef}
                 disabledKeys={disabledKeys}
                 focusOnHover={focusOnHover}
                 shouldFocusWrap={shouldFocusWrap}
diff --git a/src/stories/StyleInjector.docs.mdx b/src/stories/StyleInjector.docs.mdx
new file mode 100644
index 000000000..dbb4c9595
--- /dev/null
+++ b/src/stories/StyleInjector.docs.mdx
@@ -0,0 +1,474 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="tasty/Style Injector" />
+
+# Tasty Style Injector
+
+A high-performance CSS-in-JS solution that powers the Tasty design system with efficient style injection, automatic cleanup, and first-class SSR support.
+
+---
+
+## 🚀 Overview
+
+The Style Injector is the core engine behind Tasty's styling system, providing:
+
+- **🔄 Hash-based deduplication** - Identical CSS gets the same className
+- **📊 Reference counting** - Automatic cleanup when components unmount (refCount = 0)
+- **🎯 CSS nesting flattening** - Handles `&`, `.Class`, `SubElement` patterns
+- **🎬 Keyframes injection** - First-class `@keyframes` support with immediate disposal
+- **🧹 Smart cleanup** - CSS rules batched cleanup, keyframes disposed immediately
+- **🖥️ SSR support** - Deterministic class names and CSS extraction
+- **🌙 Multiple roots** - Works with Document and ShadowRoot
+- **⚡ Non-stacking cleanups** - Prevents timeout accumulation for better performance
+
+> **💡 Note:** This is internal infrastructure that powers Tasty components. Most developers will interact with the higher-level `tasty()` API instead.
+
+---
+
+## 🏗️ Architecture
+
+```
+┌─────────────────┐    ┌──────────────────┐    ┌─────────────────┐
+│   tasty()       │────│  Style Injector  │────│  Sheet Manager  │
+│   components    │    │                  │    │                 │
+└─────────────────┘    └──────────────────┘    └─────────────────┘
+         │                        │                       │
+         │                        │                       │
+         ▼                        ▼                       ▼
+┌─────────────────┐    ┌──────────────────┐    ┌─────────────────┐
+│  Style Results  │    │ Keyframes Manager│    │  Root Registry  │
+│  (CSS rules)    │    │                  │    │                 │
+└─────────────────┘    └──────────────────┘    └─────────────────┘
+         │                                            │
+         │                                            │
+         ▼                                            ▼
+┌─────────────────┐                             ┌─────────────────┐
+│   Hash Cache    │                             │ <style> elements│
+│   Deduplication │                             │ CSSStyleSheet   │
+└─────────────────┘                             └─────────────────┘
+```
+
+---
+
+## 📖 Core API
+
+### `inject(rules, options?): InjectResult`
+
+Injects CSS rules and returns a className with dispose function.
+
+```typescript
+import { inject } from '@cube-dev/ui-kit/tasty/injector';
+
+// Component styling - generates tasty class names
+const result = inject([{
+  selector: '.t-abc123',
+  declarations: 'color: red; padding: 10px;',
+}]);
+
+console.log(result.className); // 't-abc123'
+
+// Cleanup when component unmounts (refCount decremented)
+result.dispose();
+```
+
+### `injectGlobal(rules, options?): { dispose: () => void }`
+
+Injects global styles that don't reserve tasty class names.
+
+```typescript
+// Global styles - for body, resets, etc.
+const globalResult = injectGlobal([
+  {
+    selector: 'body',
+    declarations: 'margin: 0; font-family: Arial;',
+  },
+  {
+    selector: '.header',
+    declarations: 'background: blue; color: white;',
+    atRules: ['@media (min-width: 768px)'],
+  }
+]);
+
+// Only returns dispose function - no className needed for global styles
+globalResult.dispose();
+```
+
+### `createGlobalStyle<Props>(strings, ...interpolations): ComponentType`
+
+Creates a React component that injects global styles when mounted (similar to styled-components).
+
+```typescript
+import { createGlobalStyle } from '@cube-dev/ui-kit/tasty/injector';
+
+const GlobalReset = createGlobalStyle<{ theme: 'dark' | 'light' }>`
+  body {
+    margin: 0;
+    background: ${props => props.theme === 'dark' ? '#000' : '#fff'};
+    color: ${props => props.theme === 'dark' ? '#fff' : '#000'};
+  }
+  
+  * {
+    box-sizing: border-box;
+  }
+`;
+
+// Usage in React
+<GlobalReset theme="dark" />
+```
+
+### `createInjector(config?): StyleInjector`
+
+Creates an isolated injector instance with custom configuration.
+
+```typescript
+import { createInjector } from '@cube-dev/ui-kit/tasty/injector';
+
+// Create isolated instance for testing
+const testInjector = createInjector({
+  devMode: true,
+  forceTextInjection: true,
+});
+
+const result = testInjector.inject(rules);
+```
+
+### `keyframes(steps, nameOrOptions?): KeyframesResult`
+
+Injects CSS keyframes with automatic deduplication.
+
+```typescript
+// Generated name (k0, k1, k2...)
+const fadeIn = keyframes({
+  from: { opacity: 0 },
+  to: { opacity: 1 },
+});
+
+// Custom name
+const slideIn = keyframes({
+  '0%': 'transform: translateX(-100%)',
+  '100%': 'transform: translateX(0)',
+}, 'slideInAnimation');
+
+// Use in styles
+const animatedComponent = inject([{
+  selector: '.t-animated',
+  declarations: `animation: ${fadeIn} 300ms ease-in;`
+}]);
+
+// Cleanup (keyframes disposed immediately, CSS rules marked for batch cleanup)
+fadeIn.dispose();           // Immediate keyframes deletion from DOM
+animatedComponent.dispose(); // CSS rules marked unused (refCount = 0)
+```
+
+### `configure(config): void`
+
+Configures the global injector instance.
+
+```typescript
+configure({
+  devMode: true,                     // Enable development features (auto-detected)
+  maxRulesPerSheet: 8192,            // Cap rules per stylesheet (default: 8192)
+  unusedStylesThreshold: 500,        // Trigger cleanup threshold (CSS rules only)
+  bulkCleanupDelay: 5000,            // Cleanup delay (ms) - ignored if idleCleanup is true
+  idleCleanup: true,                 // Use requestIdleCallback for cleanup
+  bulkCleanupBatchRatio: 0.5,        // Clean up oldest 50% per batch
+  unusedStylesMinAgeMs: 10000,       // Minimum age before cleanup (ms)
+  forceTextInjection: false,         // Force textContent insertion (auto-detected for tests)
+  nonce: 'csp-nonce',                // CSP nonce for security
+});
+```
+
+**Auto-Detection Features:**
+- `devMode`: Automatically enabled in development environments (detected via `isDevEnv()`)
+- `forceTextInjection`: Automatically enabled in test environments (Jest, Vitest, Mocha, jsdom)
+
+**Configuration Notes:**
+- Most options have sensible defaults and auto-detection
+- `configure()` is optional - the injector works with defaults
+- `unusedStylesMinAgeMs`: Minimum time (ms) a style must remain unused before being eligible for cleanup. Helps prevent removal of styles that might be quickly reactivated.
+
+---
+
+## 🔧 Advanced Features
+
+### Style Result Format
+
+The injector works with `StyleResult` objects from the tasty parser:
+
+```typescript
+interface StyleResult {
+  selector: string;              // CSS selector
+  declarations: string;          // CSS declarations
+  atRules?: string[];           // @media, @supports, etc.
+  nestingLevel?: number;        // Nesting depth for specificity
+}
+
+// Example StyleResult
+const styleRule: StyleResult = {
+  selector: '.t-button',
+  declarations: 'padding: 8px 16px; background: blue; color: white;',
+  atRules: ['@media (min-width: 768px)'],
+  nestingLevel: 0,
+};
+```
+
+### Deduplication & Performance
+
+```typescript
+// Identical CSS rules get the same className
+const button1 = inject([{
+  selector: '.t-btn1',
+  declarations: 'padding: 8px; color: red;'
+}]);
+
+const button2 = inject([{
+  selector: '.t-btn2', 
+  declarations: 'padding: 8px; color: red;' // Same declarations
+}]);
+
+// Both get the same className due to deduplication
+console.log(button1.className === button2.className); // true
+```
+
+### Reference Counting
+
+```typescript
+// Multiple components using the same styles
+const comp1 = inject([commonStyle]);
+const comp2 = inject([commonStyle]);
+const comp3 = inject([commonStyle]);
+
+// Style is kept alive while any component uses it
+comp1.dispose(); // refCount: 3 → 2
+comp2.dispose(); // refCount: 2 → 1
+comp3.dispose(); // refCount: 1 → 0, eligible for bulk cleanup
+
+// Rule exists but refCount = 0 means unused
+// Next inject() with same styles will increment refCount and reuse immediately
+```
+
+### Smart Cleanup System
+
+```typescript
+// CSS rules: Not immediately deleted, marked for bulk cleanup (refCount = 0)
+// Keyframes: Disposed immediately when refCount = 0 (safer for global scope)
+
+configure({
+  unusedStylesThreshold: 100,    // Cleanup when 100+ unused CSS rules
+  bulkCleanupBatchRatio: 0.3,    // Remove oldest 30% each time
+});
+
+// Benefits:
+// - CSS rules: Batch cleanup prevents DOM manipulation overhead  
+// - Keyframes: Immediate cleanup prevents global namespace pollution
+// - Unused styles can be instantly reactivated (just increment refCount)
+```
+
+### Shadow DOM Support
+
+```typescript
+// Works with Shadow DOM
+const shadowRoot = document.createElement('div').attachShadow({ mode: 'open' });
+
+const shadowStyles = inject([{
+  selector: '.shadow-component',
+  declarations: 'color: purple;'
+}], { root: shadowRoot });
+
+// Keyframes in Shadow DOM
+const shadowAnimation = keyframes({
+  from: { opacity: 0 },
+  to: { opacity: 1 }
+}, { root: shadowRoot, name: 'shadowFade' });
+```
+
+---
+
+## 🎭 SSR & Testing
+
+### Server-Side Rendering
+
+```typescript
+import { getCssText, getCssTextForNode } from '@cube-dev/ui-kit/tasty/injector';
+
+// Extract all CSS for SSR
+const cssText = getCssText();
+
+// Extract CSS for specific DOM subtree (like jest-styled-components)
+const container = render(<MyComponent />);
+const componentCSS = getCssTextForNode(container);
+```
+
+### Test Environment Detection
+
+```typescript
+// Automatically detected test environments:
+// - NODE_ENV === 'test'
+// - Jest globals (jest, describe, it, expect)
+// - jsdom user agent
+// - Vitest globals (vitest)
+// - Mocha globals (mocha)
+
+import { getIsTestEnvironment } from '@cube-dev/ui-kit/tasty/injector';
+const isTest = getIsTestEnvironment();
+
+// Test-specific optimizations:
+configure({
+  forceTextInjection: isTest,  // More reliable in test environments
+  devMode: true,               // Always enable dev features in tests
+});
+```
+
+### Memory Management in Tests
+
+```typescript
+// Clean up between tests
+afterEach(() => {
+  cleanup(); // Force cleanup of unused styles
+});
+
+// Full cleanup after test suite
+afterAll(() => {
+  destroy(); // Destroy all stylesheets and reset state
+});
+```
+
+---
+
+## 📊 Development Features
+
+### Performance Metrics
+
+When `devMode` is enabled, the injector tracks comprehensive metrics:
+
+```typescript
+configure({ devMode: true });
+
+// Access metrics through the global injector
+const metrics = injector.instance.getMetrics();
+
+console.log({
+  cacheHits: metrics.hits,           // Successful cache hits  
+  cacheMisses: metrics.misses,       // New styles injected
+  unusedHits: metrics.unusedHits,    // Current unused styles (calculated on demand)
+  bulkCleanups: metrics.bulkCleanups, // Number of bulk cleanup operations
+  stylesCleanedUp: metrics.stylesCleanedUp, // Total styles removed in bulk cleanups
+  totalInsertions: metrics.totalInsertions, // Lifetime insertions
+  totalUnused: metrics.totalUnused,  // Total styles marked as unused (refCount = 0)
+  startTime: metrics.startTime,      // Metrics collection start timestamp
+  cleanupHistory: metrics.cleanupHistory, // Detailed cleanup operation history
+});
+```
+
+### Debug Information
+
+```typescript
+// Get detailed information about injected styles
+const debugInfo = injector.instance.getDebugInfo();
+
+console.log({
+  activeStyles: debugInfo.activeStyles,     // Currently active styles
+  unusedStyles: debugInfo.unusedStyles,     // Styles marked for cleanup
+  totalSheets: debugInfo.totalSheets,       // Number of stylesheets
+  totalRules: debugInfo.totalRules,         // Total CSS rules
+});
+```
+
+### Cleanup History
+
+```typescript
+// Track cleanup operations over time
+const metrics = injector.instance.getMetrics();
+
+metrics.cleanupHistory.forEach(cleanup => {
+  console.log({
+    timestamp: new Date(cleanup.timestamp),
+    classesDeleted: cleanup.classesDeleted,
+    rulesDeleted: cleanup.rulesDeleted,
+    cssSize: cleanup.cssSize,              // Total CSS size removed (bytes)
+  });
+});
+```
+
+---
+
+## ⚡ Performance Optimizations
+
+### Best Practices
+
+```typescript
+// ✅ Reuse styles - identical CSS gets deduplicated
+const buttonBase = { padding: '8px 16px', borderRadius: '4px' };
+
+// ✅ Avoid frequent disposal and re-injection
+// Let the reference counting system handle cleanup
+
+// ✅ Use bulk operations for global styles
+injectGlobal([
+  { selector: 'body', declarations: 'margin: 0;' },
+  { selector: '*', declarations: 'box-sizing: border-box;' },
+  { selector: '.container', declarations: 'max-width: 1200px;' }
+]);
+
+// ✅ Configure appropriate thresholds for your app
+configure({
+  unusedStylesThreshold: 500,      // Default threshold (adjust based on app size)
+  bulkCleanupBatchRatio: 0.5,      // Default: clean oldest 50% per batch
+  unusedStylesMinAgeMs: 10000,     // Wait 10s before cleanup eligibility
+});
+```
+
+### Memory Management
+
+```typescript
+// The injector automatically manages memory through:
+
+// 1. Hash-based deduplication - same CSS = same className
+// 2. Reference counting - styles stay alive while in use (refCount > 0)
+// 3. Immediate keyframes cleanup - disposed instantly when refCount = 0
+// 4. Batch CSS cleanup - unused CSS rules (refCount = 0) cleaned in batches
+// 5. Non-stacking cleanups - prevents timeout accumulation
+
+// Manual cleanup is rarely needed but available:
+cleanup(); // Force immediate cleanup of all unused CSS rules (refCount = 0)
+destroy(); // Nuclear option: remove all stylesheets and reset
+```
+
+---
+
+## 🔗 Integration with Tasty
+
+The Style Injector is seamlessly integrated with the higher-level Tasty API:
+
+```jsx
+// High-level tasty() API
+const StyledButton = tasty({
+  styles: {
+    padding: '2x 4x',
+    fill: '#purple',
+    color: '#white',
+  }
+});
+
+// Internally uses the injector:
+// 1. Styles are parsed into StyleResult objects
+// 2. inject() is called with the parsed results
+// 3. Component gets the returned className
+// 4. dispose() is called when component unmounts
+```
+
+For most development, you'll use the [Tasty style system](/docs/tasty-documentation--docs) rather than the injector directly. The injector provides the high-performance foundation that makes Tasty's declarative styling possible.
+
+---
+
+## 🎯 When to Use Direct Injection
+
+Direct injector usage is recommended for:
+
+- **Custom CSS-in-JS libraries** built on top of Tasty
+- **Global styles** that don't fit the component model
+- **Third-party integration** where you need low-level CSS control
+- **Performance-critical scenarios** where you need direct control
+- **Testing utilities** that need to inject or extract CSS
+
+For regular component styling, prefer the [`tasty()` API](/docs/tasty-documentation--docs) which provides a more developer-friendly interface.
diff --git a/src/tasty/DEBUG.md b/src/tasty/DEBUG.md
deleted file mode 100644
index 55a4ec659..000000000
--- a/src/tasty/DEBUG.md
+++ /dev/null
@@ -1,148 +0,0 @@
-# Tasty CSS Runtime Debug Utilities
-
-The tasty system provides powerful debug utilities to inspect generated CSS at runtime. These are especially useful for debugging complex responsive layouts and state-based styling.
-
-## Basic Usage
-
-```typescript
-import { tastyDebug } from '@cube-dev/ui-kit';
-
-// 🎯 Inspect an element by selector
-const css = tastyDebug.inspectElement('[data-qa="my-header"]');
-
-// 🎯 Get CSS for a specific tasty class
-const classCSS = tastyDebug.getCSSForClass('t24');
-
-// 🎯 Inspect a DOM element directly
-const element = document.querySelector('.my-component');
-tastyDebug.inspectDOMElement(element);
-
-// 🎯 Get all generated CSS
-const allCSS = tastyDebug.getAllCSS();
-
-// 🎯 Get a summary of all tasty usage
-tastyDebug.getSummary();
-```
-
-## Browser Console Usage
-
-In development mode, `tastyDebug` is automatically available on `window`:
-
-```javascript
-// Check what's available
-tastyDebug.getSummary()
-
-// Inspect your components
-tastyDebug.inspectElement('[data-qa="header"]')
-tastyDebug.inspectElement('.some-component')
-
-// Check specific classes
-tastyDebug.getCSSForClass('t24')
-
-// Find all tasty classes in use
-tastyDebug.findAllTastyClasses()
-```
-
-## Advanced Inspection
-
-```typescript
-// Detailed inspection with breakdown
-const inspection = tastyDebug.inspect('[data-qa="complex-grid"]');
-console.log('Element:', inspection.element);
-console.log('Tasty classes:', inspection.tastyClasses);
-console.log('Full CSS:', inspection.css);
-console.log('Per-class breakdown:', inspection.breakdown);
-
-// Pretty-print CSS
-tastyDebug.logCSS(someCSS, 'My Component CSS');
-```
-
-## Example Output
-
-When you run `tastyDebug.inspectElement('[data-qa="header"]')`, you'll see:
-
-```css
-.t24:not([data-is-sticky]) {
-  position: static; 
-  background-color: transparent; 
-  z-index: auto; 
-  box-shadow: none var(--shadow-color);
-}
-
-.t24[data-is-sticky] {
-  position: sticky; 
-  top: 0; 
-  background-color: var(--white-color); 
-  z-index: 10; 
-  box-shadow: 0 calc(0.5 * var(--gap)) calc(0.5 * var(--gap)) var(--white-color);
-}
-
-.t24 {
-  display: grid; 
-  padding: var(--gap) calc(2 * var(--gap)); 
-  height: auto; 
-  min-height: calc(6 * var(--gap)); 
-  place-items: center stretch; 
-  place-content: stretch;
-}
-
-@media (min-width: 1200px) {
-  .t24:not([data-is-back-button-top]) {
-    grid-template-areas: 
-      "breadcrumbs breadcrumbs breadcrumbs breadcrumbs breadcrumbs breadcrumbs"
-      "back        title       .           subtitle    spacer      extra"
-      "back        title       .           subtitle    spacer      extra"
-      "content     content     content     content     content     content"
-      "footer      footer      footer      footer      footer      footer";
-  }
-}
-
-/* ...more responsive and state-based CSS... */
-```
-
-## Use Cases
-
-- **🐛 Debugging**: Why isn't my grid layout working?
-- **🔍 Understanding**: What CSS is actually being generated?
-- **⚡ Performance**: How much CSS is being generated?
-- **📱 Responsive**: Are my breakpoints working correctly?
-- **🎛️ State Logic**: Are my modifiers applying the right styles?
-
-## Environment Behavior
-
-### Development Mode
-The global `window.tastyDebug` is automatically available when `NODE_ENV` is 'development' or not 'production':
-
-```javascript
-// Available automatically in browser console
-tastyDebug.getSummary()
-```
-
-### Production Mode
-In production, the global `window.tastyDebug` is not installed automatically. You can either:
-
-1. **Import directly** (recommended):
-```typescript
-import { tastyDebug } from '@cube-dev/ui-kit';
-tastyDebug.inspectElement('[data-qa="my-component"]');
-```
-
-2. **Manually install globally**:
-```typescript
-import { installGlobalDebug } from '@cube-dev/ui-kit';
-installGlobalDebug(); // Makes window.tastyDebug available
-```
-
-### Manual Installation
-
-You can manually install the global debug utilities at any time:
-
-```typescript
-import { installGlobalDebug, tastyDebug } from '@cube-dev/ui-kit';
-
-// Install globally for easy console access
-installGlobalDebug();
-
-// Or use directly
-tastyDebug.inspectElement('[data-qa="header"]');
-```
diff --git a/src/tasty/__snapshots__/tasty.test.tsx.snap b/src/tasty/__snapshots__/tasty.test.tsx.snap
index 8f84d671f..a12c7e871 100644
--- a/src/tasty/__snapshots__/tasty.test.tsx.snap
+++ b/src/tasty/__snapshots__/tasty.test.tsx.snap
@@ -1,427 +1,427 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`tasty() API should allow multiple wrapping 1`] = `".t15.t15 {position: static; padding-top: calc(2 * var(--gap)); border: var(--border-width) solid var(--black-color); color: var(--white-color); --current-color: var(--white-color, white); --current-color-rgb: var(--white-color-rgb); display: flex;}"`;
+exports[`tasty() API should allow multiple wrapping 1`] = `".t14.t14 {position: static; padding-top: calc(2 * var(--gap)); border: var(--border-width) solid var(--black-color); color: var(--white-color); --current-color: var(--white-color, white); --current-color-rgb: var(--white-color-rgb); display: flex;}"`;
 
 exports[`tasty() API should allow nested modifiers 1`] = `
-".t16.t16 {display: block;}
-.t16.t16:first-child {color: var(--clear-color); --current-color: var(--clear-color, clear); --current-color-rgb: var(--clear-color-rgb);}
-.t16.t16:not(:first-child) {color: var(--black-color); --current-color: var(--black-color, black); --current-color-rgb: var(--black-color-rgb);}"
+".t15.t15 {display: block;}
+.t15.t15:first-child {color: var(--clear-color); --current-color: var(--clear-color, clear); --current-color-rgb: var(--clear-color-rgb);}
+.t15.t15:not(:first-child) {color: var(--black-color); --current-color: var(--black-color, black); --current-color-rgb: var(--black-color-rgb);}"
 `;
 
 exports[`tasty() API should be able to override styles 1`] = `".t7.t7 {display: block; color: rgb(var(--black-color-rgb) / .1); --current-color: var(--black-color, black); --current-color-rgb: var(--black-color-rgb);}"`;
 
 exports[`tasty() API should create element styles 1`] = `
-".t12.t12:not([data-is-modified]) [data-element="Element"] {color: var(--dark-color); --current-color: var(--dark-color, dark); --current-color-rgb: var(--dark-color-rgb);}
-.t12.t12[data-is-modified] [data-element="Element"] {color: var(--purple-color); --current-color: var(--purple-color, purple); --current-color-rgb: var(--purple-color-rgb);}"
+".t11.t11:not([data-is-modified]) [data-element="Element"] {color: var(--dark-color); --current-color: var(--dark-color, dark); --current-color-rgb: var(--dark-color-rgb);}
+.t11.t11[data-is-modified] [data-element="Element"] {color: var(--purple-color); --current-color: var(--purple-color, purple); --current-color-rgb: var(--purple-color-rgb);}"
 `;
 
 exports[`tasty() API should create responsive styles 1`] = `
-"@media (min-width: 980px) {.t11.t11 {display: grid;}}
-@media (max-width: 979px) {.t11.t11 {display: flex;}}"
+"@media (min-width: 980px) {.t10.t10 {display: grid;}}
+@media (max-width: 979px) {.t10.t10 {display: flex;}}"
 `;
 
-exports[`tasty() API should define style props 1`] = `".t14.t14 {border: var(--border-width) solid var(--border-color);}"`;
+exports[`tasty() API should define style props 1`] = `".t13.t13 {border: var(--border-width) solid var(--border-color);}"`;
 
 exports[`tasty() API should fallback to default variant 1`] = `".t9.t9 {color: var(--white-color); --current-color: var(--white-color, white); --current-color-rgb: var(--white-color-rgb);}"`;
 
 exports[`tasty() API should handle arrays containing state maps 1`] = `
-".t20.t20 {display: block;}
-@media (min-width: 1200px) {.t20.t20 {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap)); margin-top: var(--gap); margin-right: var(--gap); margin-bottom: var(--gap); margin-left: var(--gap);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t20.t20:not([data-is-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap); background-color: rgb(var(--gray-color-rgb) / .05);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t20.t20[data-is-hovered] {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap)); background-color: rgb(var(--blue-color-rgb) / .10);}}
-@media (max-width: 767px) {.t20.t20:not([data-is-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap); background-color: rgb(var(--gray-color-rgb) / .05);}}
-@media (max-width: 767px) {.t20.t20[data-is-hovered] {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap)); background-color: rgb(var(--blue-color-rgb) / .10);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t20.t20:not([data-is-disabled]):not([data-is-pressed]) {margin-top: calc(2 * var(--gap)); margin-right: calc(2 * var(--gap)); margin-bottom: calc(2 * var(--gap)); margin-left: calc(2 * var(--gap));}}
-@media (min-width: 768px) and (max-width: 1199px) {.t20.t20[data-is-disabled]:not([data-is-pressed]) {margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t20.t20[data-is-pressed]:not([data-is-disabled]) {margin-top: var(--gap); margin-right: var(--gap); margin-bottom: var(--gap); margin-left: var(--gap);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t20.t20[data-is-disabled][data-is-pressed] {margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0;}}
-@media (max-width: 767px) {.t20.t20:not([data-is-focused]) {margin-top: calc(0.5 * var(--gap)); margin-right: calc(0.5 * var(--gap)); margin-bottom: calc(0.5 * var(--gap)); margin-left: calc(0.5 * var(--gap));}}
-@media (max-width: 767px) {.t20.t20[data-is-focused] {margin-top: var(--gap); margin-right: var(--gap); margin-bottom: var(--gap); margin-left: var(--gap);}}
-@media (min-width: 1200px) {.t20.t20:not([data-is-hovered]) {background-color: var(--white-color);}}
-@media (min-width: 1200px) {.t20.t20:not([data-is-hovered])>* {--context-fill-color: var(--white-color); --context-fill-color-rgb: var(--white-color-rgb);}}
-@media (min-width: 1200px) {.t20.t20[data-is-hovered] {background-color: rgb(var(--blue-color-rgb) / .05);}}
-@media (min-width: 1200px) {.t20.t20[data-is-hovered]>* {--context-fill-color: rgb(var(--blue-color-rgb) / .05); --context-fill-color-rgb: var(--blue-color-rgb);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t20.t20:not([data-is-hovered])>* {--context-fill-color: rgb(var(--gray-color-rgb) / .05); --context-fill-color-rgb: var(--gray-color-rgb);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t20.t20[data-is-hovered]>* {--context-fill-color: rgb(var(--blue-color-rgb) / .10); --context-fill-color-rgb: var(--blue-color-rgb);}}
-@media (max-width: 767px) {.t20.t20:not([data-is-hovered])>* {--context-fill-color: rgb(var(--gray-color-rgb) / .05); --context-fill-color-rgb: var(--gray-color-rgb);}}
-@media (max-width: 767px) {.t20.t20[data-is-hovered]>* {--context-fill-color: rgb(var(--blue-color-rgb) / .10); --context-fill-color-rgb: var(--blue-color-rgb);}}"
+".t19.t19 {display: block;}
+@media (min-width: 1200px) {.t19.t19 {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap)); margin-top: var(--gap); margin-right: var(--gap); margin-bottom: var(--gap); margin-left: var(--gap);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t19.t19:not([data-is-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap); background-color: rgb(var(--gray-color-rgb) / .05);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t19.t19[data-is-hovered] {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap)); background-color: rgb(var(--blue-color-rgb) / .10);}}
+@media (max-width: 767px) {.t19.t19:not([data-is-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap); background-color: rgb(var(--gray-color-rgb) / .05);}}
+@media (max-width: 767px) {.t19.t19[data-is-hovered] {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap)); background-color: rgb(var(--blue-color-rgb) / .10);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t19.t19:not([data-is-disabled]):not([data-is-pressed]) {margin-top: calc(2 * var(--gap)); margin-right: calc(2 * var(--gap)); margin-bottom: calc(2 * var(--gap)); margin-left: calc(2 * var(--gap));}}
+@media (min-width: 768px) and (max-width: 1199px) {.t19.t19[data-is-disabled]:not([data-is-pressed]) {margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t19.t19[data-is-pressed]:not([data-is-disabled]) {margin-top: var(--gap); margin-right: var(--gap); margin-bottom: var(--gap); margin-left: var(--gap);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t19.t19[data-is-disabled][data-is-pressed] {margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0;}}
+@media (max-width: 767px) {.t19.t19:not([data-is-focused]) {margin-top: calc(0.5 * var(--gap)); margin-right: calc(0.5 * var(--gap)); margin-bottom: calc(0.5 * var(--gap)); margin-left: calc(0.5 * var(--gap));}}
+@media (max-width: 767px) {.t19.t19[data-is-focused] {margin-top: var(--gap); margin-right: var(--gap); margin-bottom: var(--gap); margin-left: var(--gap);}}
+@media (min-width: 1200px) {.t19.t19:not([data-is-hovered]) {background-color: var(--white-color);}}
+@media (min-width: 1200px) {.t19.t19:not([data-is-hovered])>* {--context-fill-color: var(--white-color); --context-fill-color-rgb: var(--white-color-rgb);}}
+@media (min-width: 1200px) {.t19.t19[data-is-hovered] {background-color: rgb(var(--blue-color-rgb) / .05);}}
+@media (min-width: 1200px) {.t19.t19[data-is-hovered]>* {--context-fill-color: rgb(var(--blue-color-rgb) / .05); --context-fill-color-rgb: var(--blue-color-rgb);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t19.t19:not([data-is-hovered])>* {--context-fill-color: rgb(var(--gray-color-rgb) / .05); --context-fill-color-rgb: var(--gray-color-rgb);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t19.t19[data-is-hovered]>* {--context-fill-color: rgb(var(--blue-color-rgb) / .10); --context-fill-color-rgb: var(--blue-color-rgb);}}
+@media (max-width: 767px) {.t19.t19:not([data-is-hovered])>* {--context-fill-color: rgb(var(--gray-color-rgb) / .05); --context-fill-color-rgb: var(--gray-color-rgb);}}
+@media (max-width: 767px) {.t19.t19[data-is-hovered]>* {--context-fill-color: rgb(var(--blue-color-rgb) / .10); --context-fill-color-rgb: var(--blue-color-rgb);}}"
 `;
 
 exports[`tasty() API should handle complex gridAreas with responsive arrays and state modifiers 1`] = `
-".t24.t24:not([data-is-sticky]) {position: static; background-color: transparent; z-index: auto; box-shadow: none var(--shadow-color);}
-.t24.t24[data-is-sticky] {position: sticky; top: 0; background-color: var(--white-color); z-index: 10; box-shadow: 0 calc(0.5 * var(--gap)) calc(0.5 * var(--gap)) var(--white-color);}
-.t24.t24[data-is-sticky]>* {--context-fill-color: var(--white-color); --context-fill-color-rgb: var(--white-color-rgb);}
-.t24.t24 {display: grid; padding-top: var(--gap); padding-right: calc(2 * var(--gap)); padding-bottom: var(--gap); padding-left: calc(2 * var(--gap)); height: auto; min-height: calc(6 * var(--gap)); max-height: initial; place-items: center stretch; place-content: stretch;}
-@media (min-width: 1200px) {.t24.t24:not([data-is-back-button-top]) {grid-template-areas: "breadcrumbs breadcrumbs breadcrumbs breadcrumbs breadcrumbs breadcrumbs" "back        title       .           subtitle    spacer      extra" "back        title       .           subtitle    spacer      extra" "content     content     content     content     content     content" "footer      footer      footer      footer      footer      footer";}}
-@media (min-width: 1200px) {.t24.t24[data-is-back-button-top] {grid-template-areas: "back        back        back        back        back        back" "breadcrumbs breadcrumbs breadcrumbs breadcrumbs breadcrumbs breadcrumbs" ".           title       .           subtitle    spacer      extra" ".           title       .           subtitle    spacer      extra" "content     content     content     content     content     content" "footer      footer      footer      footer      footer      footer";}}
-@media (max-width: 1199px) {.t24.t24:not([data-is-back-button-top]) {grid-template-areas: "breadcrumbs breadcrumbs breadcrumbs breadcrumbs" "back        title       spacer      extra" "back        subtitle    subtitle    extra" "back        .           .           extra" "content     content     content     content" "footer      footer      footer      footer";}}
-@media (max-width: 1199px) {.t24.t24[data-is-back-button-top] {grid-template-areas: "back        back        back        back" "breadcrumbs breadcrumbs breadcrumbs breadcrumbs" ".           title       spacer      extra" ".           subtitle    subtitle    extra" ".           .           .           extra" "content     content     content     content" "footer      footer      footer      footer";}}
-@media (min-width: 1200px) {.t24.t24 {grid-template-columns: max-content minmax(calc(2 * var(--gap)), auto) calc(2 * var(--gap)) minmax(0, auto) minmax(calc(2 * var(--gap)), 1fr) minmax(min-content, max-content);}}
-@media (max-width: 1199px) {.t24.t24 {grid-template-columns: max-content minmax(calc(2 * var(--gap)), auto) minmax(calc(2 * var(--gap)), 1fr) minmax(min-content, max-content);}}"
+".t23.t23:not([data-is-sticky]) {position: static; background-color: transparent; z-index: auto; box-shadow: none var(--shadow-color);}
+.t23.t23[data-is-sticky] {position: sticky; top: 0; background-color: var(--white-color); z-index: 10; box-shadow: 0 calc(0.5 * var(--gap)) calc(0.5 * var(--gap)) var(--white-color);}
+.t23.t23[data-is-sticky]>* {--context-fill-color: var(--white-color); --context-fill-color-rgb: var(--white-color-rgb);}
+.t23.t23 {display: grid; padding-top: var(--gap); padding-right: calc(2 * var(--gap)); padding-bottom: var(--gap); padding-left: calc(2 * var(--gap)); height: auto; min-height: calc(6 * var(--gap)); max-height: initial; place-items: center stretch; place-content: stretch;}
+@media (min-width: 1200px) {.t23.t23:not([data-is-back-button-top]) {grid-template-areas: "breadcrumbs breadcrumbs breadcrumbs breadcrumbs breadcrumbs breadcrumbs" "back        title       .           subtitle    spacer      extra" "back        title       .           subtitle    spacer      extra" "content     content     content     content     content     content" "footer      footer      footer      footer      footer      footer";}}
+@media (min-width: 1200px) {.t23.t23[data-is-back-button-top] {grid-template-areas: "back        back        back        back        back        back" "breadcrumbs breadcrumbs breadcrumbs breadcrumbs breadcrumbs breadcrumbs" ".           title       .           subtitle    spacer      extra" ".           title       .           subtitle    spacer      extra" "content     content     content     content     content     content" "footer      footer      footer      footer      footer      footer";}}
+@media (max-width: 1199px) {.t23.t23:not([data-is-back-button-top]) {grid-template-areas: "breadcrumbs breadcrumbs breadcrumbs breadcrumbs" "back        title       spacer      extra" "back        subtitle    subtitle    extra" "back        .           .           extra" "content     content     content     content" "footer      footer      footer      footer";}}
+@media (max-width: 1199px) {.t23.t23[data-is-back-button-top] {grid-template-areas: "back        back        back        back" "breadcrumbs breadcrumbs breadcrumbs breadcrumbs" ".           title       spacer      extra" ".           subtitle    subtitle    extra" ".           .           .           extra" "content     content     content     content" "footer      footer      footer      footer";}}
+@media (min-width: 1200px) {.t23.t23 {grid-template-columns: max-content minmax(calc(2 * var(--gap)), auto) calc(2 * var(--gap)) minmax(0, auto) minmax(calc(2 * var(--gap)), 1fr) minmax(min-content, max-content);}}
+@media (max-width: 1199px) {.t23.t23 {grid-template-columns: max-content minmax(calc(2 * var(--gap)), auto) minmax(calc(2 * var(--gap)), 1fr) minmax(min-content, max-content);}}"
 `;
 
 exports[`tasty() API should handle complex responsive styles with state binding 1`] = `
-"@media (min-width: 1200px) {.t23.t23 [data-element="Header"] {--font-size: var(--h2-font-size, var(--default-font-size, inherit)); font-size: var(--h2-font-size, var(--default-font-size, inherit)); --line-height: var(--h2-line-height, var(--default-line-height, inherit)); line-height: var(--h2-line-height, var(--default-line-height, inherit)); --letter-spacing: var(--h2-letter-spacing, var(--default-letter-spacing, inherit)); letter-spacing: var(--h2-letter-spacing, var(--default-letter-spacing, inherit)); --font-weight: var(--h2-font-weight, var(--default-font-weight, inherit)); font-weight: var(--h2-font-weight, var(--default-font-weight, inherit)); --font-style: var(--h2-font-style, var(--default-font-style, inherit)); font-style: var(--h2-font-style, var(--default-font-style, inherit)); --text-transform: var(--h2-text-transform, var(--default-text-transform, inherit)); text-transform: var(--h2-text-transform, var(--default-text-transform, inherit)); --font-family: var(--h2-font-family, var(--default-font-family, var(--font, NonexistentFontName))), var(--font, sans-serif); font-family: var(--h2-font-family, var(--default-font-family, var(--font, NonexistentFontName))), var(--font, sans-serif); --bold-font-weight: var(--h2-bold-font-weight, var(--default-bold-font-weight, inherit)); --icon-size: var(--h2-icon-size, var(--default-icon-size, inherit)); margin-top: 0; margin-right: 0; margin-bottom: calc(2 * var(--gap)); margin-left: 0;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23 [data-element="Header"] {--font-size: var(--h3-font-size, var(--default-font-size, inherit)); font-size: var(--h3-font-size, var(--default-font-size, inherit)); --line-height: var(--h3-line-height, var(--default-line-height, inherit)); line-height: var(--h3-line-height, var(--default-line-height, inherit)); --letter-spacing: var(--h3-letter-spacing, var(--default-letter-spacing, inherit)); letter-spacing: var(--h3-letter-spacing, var(--default-letter-spacing, inherit)); --font-weight: var(--h3-font-weight, var(--default-font-weight, inherit)); font-weight: var(--h3-font-weight, var(--default-font-weight, inherit)); --font-style: var(--h3-font-style, var(--default-font-style, inherit)); font-style: var(--h3-font-style, var(--default-font-style, inherit)); --text-transform: var(--h3-text-transform, var(--default-text-transform, inherit)); text-transform: var(--h3-text-transform, var(--default-text-transform, inherit)); --font-family: var(--h3-font-family, var(--default-font-family, var(--font, NonexistentFontName))), var(--font, sans-serif); font-family: var(--h3-font-family, var(--default-font-family, var(--font, NonexistentFontName))), var(--font, sans-serif); --bold-font-weight: var(--h3-bold-font-weight, var(--default-bold-font-weight, inherit)); --icon-size: var(--h3-icon-size, var(--default-icon-size, inherit)); margin-top: 0; margin-right: 0; margin-bottom: var(--gap); margin-left: 0;}}
-@media (max-width: 767px) {.t23.t23 [data-element="Header"] {--font-size: var(--h4-font-size, var(--default-font-size, inherit)); font-size: var(--h4-font-size, var(--default-font-size, inherit)); --line-height: var(--h4-line-height, var(--default-line-height, inherit)); line-height: var(--h4-line-height, var(--default-line-height, inherit)); --letter-spacing: var(--h4-letter-spacing, var(--default-letter-spacing, inherit)); letter-spacing: var(--h4-letter-spacing, var(--default-letter-spacing, inherit)); --font-weight: var(--h4-font-weight, var(--default-font-weight, inherit)); font-weight: var(--h4-font-weight, var(--default-font-weight, inherit)); --font-style: var(--h4-font-style, var(--default-font-style, inherit)); font-style: var(--h4-font-style, var(--default-font-style, inherit)); --text-transform: var(--h4-text-transform, var(--default-text-transform, inherit)); text-transform: var(--h4-text-transform, var(--default-text-transform, inherit)); --font-family: var(--h4-font-family, var(--default-font-family, var(--font, NonexistentFontName))), var(--font, sans-serif); font-family: var(--h4-font-family, var(--default-font-family, var(--font, NonexistentFontName))), var(--font, sans-serif); --bold-font-weight: var(--h4-bold-font-weight, var(--default-bold-font-weight, inherit)); --icon-size: var(--h4-icon-size, var(--default-icon-size, inherit)); margin-top: 0; margin-right: 0; margin-bottom: calc(0.5 * var(--gap)); margin-left: 0;}}
-.t23.t23:not([data-is-hovered]):not([data-variant="danger"]) [data-element="Header"] {color: var(--text-primary-color); --current-color: var(--text-primary-color, text-primary); --current-color-rgb: var(--text-primary-color-rgb);}
-.t23.t23[data-is-hovered]:not([data-variant="danger"]) [data-element="Header"] {color: var(--text-primary-hover-color); --current-color: var(--text-primary-hover-color, text-primary-hover); --current-color-rgb: var(--text-primary-hover-color-rgb);}
-.t23.t23[data-variant="danger"]:not([data-is-hovered]) [data-element="Header"] {color: var(--danger-color); --current-color: var(--danger-color, danger); --current-color-rgb: var(--danger-color-rgb);}
-.t23.t23[data-is-hovered][data-variant="danger"] [data-element="Header"] {color: var(--text-primary-hover-color); --current-color: var(--text-primary-hover-color, text-primary-hover); --current-color-rgb: var(--text-primary-hover-color-rgb);}
-@media (min-width: 1200px) {.t23.t23 [data-element="Content"] {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23 [data-element="Content"] {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
-@media (max-width: 767px) {.t23.t23 [data-element="Content"] {padding-top: calc(0.5 * var(--gap)); padding-right: calc(0.5 * var(--gap)); padding-bottom: calc(0.5 * var(--gap)); padding-left: calc(0.5 * var(--gap));}}
-.t23.t23:not([data-is-highlighted]):not([data-is-disabled]):not([disabled]) [data-element="Content"] {color: var(--text-color); --current-color: var(--text-color, text); --current-color-rgb: var(--text-color-rgb);}
-.t23.t23[data-is-highlighted]:not([data-is-disabled]):not([disabled]) [data-element="Content"] {color: var(--text-highlighted-color); --current-color: var(--text-highlighted-color, text-highlighted); --current-color-rgb: var(--text-highlighted-color-rgb);}
-.t23.t23[data-is-disabled]:not([data-is-highlighted]):not([disabled]) [data-element="Content"] {color: var(--text-color); --current-color: var(--text-color, text); --current-color-rgb: var(--text-color-rgb);}
-.t23.t23[data-is-highlighted][data-is-disabled]:not([disabled]) [data-element="Content"] {color: var(--text-color); --current-color: var(--text-color, text); --current-color-rgb: var(--text-color-rgb);}
-.t23.t23[disabled]:not([data-is-highlighted]):not([data-is-disabled]) [data-element="Content"] {color: var(--text-disabled-color); --current-color: var(--text-disabled-color, text-disabled); --current-color-rgb: var(--text-disabled-color-rgb);}
-.t23.t23[data-is-highlighted][disabled]:not([data-is-disabled]) [data-element="Content"] {color: var(--text-highlighted-color); --current-color: var(--text-highlighted-color, text-highlighted); --current-color-rgb: var(--text-highlighted-color-rgb);}
-.t23.t23[data-is-disabled][disabled]:not([data-is-highlighted]) [data-element="Content"] {color: var(--text-disabled-color); --current-color: var(--text-disabled-color, text-disabled); --current-color-rgb: var(--text-disabled-color-rgb);}
-.t23.t23[data-is-highlighted][data-is-disabled][disabled] [data-element="Content"] {color: var(--text-disabled-color); --current-color: var(--text-disabled-color, text-disabled); --current-color-rgb: var(--text-disabled-color-rgb);}
-@media (min-width: 1200px) {.t23.t23:not([data-is-expanded]) [data-element="Footer"] {display: flex; gap: calc(2 * var(--gap));}}
-@media (min-width: 1200px) {.t23.t23[data-is-expanded] [data-element="Footer"] {display: flex; gap: calc(2 * var(--gap));}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23:not([data-is-expanded]) [data-element="Footer"] {display: flex; gap: var(--gap);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-is-expanded] [data-element="Footer"] {display: flex; gap: var(--gap);}}
-@media (max-width: 767px) {.t23.t23:not([data-is-expanded]) [data-element="Footer"] {display: none;}}
-@media (max-width: 767px) {.t23.t23[data-is-expanded] [data-element="Footer"] {display: flex; gap: calc(0.5 * var(--gap));}}
-@media (max-width: 767px) {.t23.t23:not([data-is-expanded]) [data-element="Footer"] > *:not(:last-child) {margin-bottom: calc(0.5 * var(--gap));}}
-@media (min-width: 1200px) {.t23.t23:not([data-is-compact]) [data-element="Footer"] {padding-top: calc(2 * var(--gap));}}
-@media (min-width: 1200px) {.t23.t23[data-is-compact] [data-element="Footer"] {padding-top: var(--gap);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23:not([data-is-compact]) [data-element="Footer"] {padding-top: var(--gap);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-is-compact] [data-element="Footer"] {padding-top: calc(0.5 * var(--gap));}}
-@media (max-width: 767px) {.t23.t23:not([data-is-compact]) [data-element="Footer"] {padding-top: calc(0.5 * var(--gap));}}
-@media (max-width: 767px) {.t23.t23[data-is-compact] [data-element="Footer"] {padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;}}
-@media (min-width: 1200px) {.t23.t23 {display: grid; gap: calc(3 * var(--gap)); --local-radius: calc(2 * var(--radius)); border-radius: var(--local-radius);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23 {display: flex; gap: calc(2 * var(--gap)); --local-radius: var(--radius); border-radius: var(--local-radius);}}
-@media (max-width: 767px) {.t23.t23 {display: block; --local-radius: calc(0.5 * var(--radius)); border-radius: var(--local-radius);}}
-@media (max-width: 767px) {.t23.t23 > *:not(:last-child) {margin-bottom: var(--gap);}}
-@media (min-width: 1200px) {.t23.t23:not([data-variant="compact"]):not([data-is-pressed]):not([data-is-disabled]):not([data-is-hovered]) {padding-top: calc(4 * var(--gap)); padding-right: calc(4 * var(--gap)); padding-bottom: calc(4 * var(--gap)); padding-left: calc(4 * var(--gap));}}
-@media (min-width: 1200px) {.t23.t23[data-variant="compact"]:not([data-is-pressed]):not([data-is-disabled]):not([data-is-hovered]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
-@media (min-width: 1200px) {.t23.t23[data-is-pressed]:not([data-variant="compact"]):not([data-is-disabled]):not([data-is-hovered]) {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap));}}
-@media (min-width: 1200px) {.t23.t23[data-variant="compact"][data-is-pressed]:not([data-is-disabled]):not([data-is-hovered]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
-@media (min-width: 1200px) {.t23.t23[data-is-disabled]:not([data-variant="compact"]):not([data-is-pressed]):not([data-is-hovered]) {padding-top: calc(4 * var(--gap)); padding-right: calc(4 * var(--gap)); padding-bottom: calc(4 * var(--gap)); padding-left: calc(4 * var(--gap));}}
-@media (min-width: 1200px) {.t23.t23[data-variant="compact"][data-is-disabled]:not([data-is-pressed]):not([data-is-hovered]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
-@media (min-width: 1200px) {.t23.t23[data-is-pressed][data-is-disabled]:not([data-variant="compact"]):not([data-is-hovered]) {padding-top: calc(4 * var(--gap)); padding-right: calc(4 * var(--gap)); padding-bottom: calc(4 * var(--gap)); padding-left: calc(4 * var(--gap));}}
-@media (min-width: 1200px) {.t23.t23[data-variant="compact"][data-is-pressed][data-is-disabled]:not([data-is-hovered]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
-@media (min-width: 1200px) {.t23.t23[data-is-hovered]:not([data-variant="compact"]):not([data-is-pressed]):not([data-is-disabled]) {padding-top: calc(5 * var(--gap)); padding-right: calc(5 * var(--gap)); padding-bottom: calc(5 * var(--gap)); padding-left: calc(5 * var(--gap));}}
-@media (min-width: 1200px) {.t23.t23[data-variant="compact"][data-is-hovered]:not([data-is-pressed]):not([data-is-disabled]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
-@media (min-width: 1200px) {.t23.t23[data-is-pressed][data-is-hovered]:not([data-variant="compact"]):not([data-is-disabled]) {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap));}}
-@media (min-width: 1200px) {.t23.t23[data-variant="compact"][data-is-pressed][data-is-hovered]:not([data-is-disabled]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
-@media (min-width: 1200px) {.t23.t23[data-is-disabled][data-is-hovered]:not([data-variant="compact"]):not([data-is-pressed]) {padding-top: calc(5 * var(--gap)); padding-right: calc(5 * var(--gap)); padding-bottom: calc(5 * var(--gap)); padding-left: calc(5 * var(--gap));}}
-@media (min-width: 1200px) {.t23.t23[data-variant="compact"][data-is-disabled][data-is-hovered]:not([data-is-pressed]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
-@media (min-width: 1200px) {.t23.t23[data-is-pressed][data-is-disabled][data-is-hovered]:not([data-variant="compact"]) {padding-top: calc(5 * var(--gap)); padding-right: calc(5 * var(--gap)); padding-bottom: calc(5 * var(--gap)); padding-left: calc(5 * var(--gap));}}
-@media (min-width: 1200px) {.t23.t23[data-variant="compact"][data-is-pressed][data-is-disabled][data-is-hovered] {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23:not([data-variant="compact"]):not([data-is-pressed]):not([data-is-disabled]):not([data-is-hovered]) {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap));}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-variant="compact"]:not([data-is-pressed]):not([data-is-disabled]):not([data-is-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-is-pressed]:not([data-variant="compact"]):not([data-is-disabled]):not([data-is-hovered]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-variant="compact"][data-is-pressed]:not([data-is-disabled]):not([data-is-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-is-disabled]:not([data-variant="compact"]):not([data-is-pressed]):not([data-is-hovered]) {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap));}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-variant="compact"][data-is-disabled]:not([data-is-pressed]):not([data-is-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-is-pressed][data-is-disabled]:not([data-variant="compact"]):not([data-is-hovered]) {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap));}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-variant="compact"][data-is-pressed][data-is-disabled]:not([data-is-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-is-hovered]:not([data-variant="compact"]):not([data-is-pressed]):not([data-is-disabled]) {padding-top: calc(4 * var(--gap)); padding-right: calc(4 * var(--gap)); padding-bottom: calc(4 * var(--gap)); padding-left: calc(4 * var(--gap));}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-variant="compact"][data-is-hovered]:not([data-is-pressed]):not([data-is-disabled]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-is-pressed][data-is-hovered]:not([data-variant="compact"]):not([data-is-disabled]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-variant="compact"][data-is-pressed][data-is-hovered]:not([data-is-disabled]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-is-disabled][data-is-hovered]:not([data-variant="compact"]):not([data-is-pressed]) {padding-top: calc(4 * var(--gap)); padding-right: calc(4 * var(--gap)); padding-bottom: calc(4 * var(--gap)); padding-left: calc(4 * var(--gap));}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-variant="compact"][data-is-disabled][data-is-hovered]:not([data-is-pressed]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-is-pressed][data-is-disabled][data-is-hovered]:not([data-variant="compact"]) {padding-top: calc(4 * var(--gap)); padding-right: calc(4 * var(--gap)); padding-bottom: calc(4 * var(--gap)); padding-left: calc(4 * var(--gap));}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-variant="compact"][data-is-pressed][data-is-disabled][data-is-hovered] {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
-@media (max-width: 767px) {.t23.t23:not([data-variant="compact"]):not([data-is-pressed]):not([data-is-disabled]):not([data-is-hovered]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
-@media (max-width: 767px) {.t23.t23[data-variant="compact"]:not([data-is-pressed]):not([data-is-disabled]):not([data-is-hovered]) {padding-top: calc(0.5 * var(--gap)); padding-right: calc(0.5 * var(--gap)); padding-bottom: calc(0.5 * var(--gap)); padding-left: calc(0.5 * var(--gap));}}
-@media (max-width: 767px) {.t23.t23[data-is-pressed]:not([data-variant="compact"]):not([data-is-disabled]):not([data-is-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
-@media (max-width: 767px) {.t23.t23[data-variant="compact"][data-is-pressed]:not([data-is-disabled]):not([data-is-hovered]) {padding-top: calc(0.5 * var(--gap)); padding-right: calc(0.5 * var(--gap)); padding-bottom: calc(0.5 * var(--gap)); padding-left: calc(0.5 * var(--gap));}}
-@media (max-width: 767px) {.t23.t23[data-is-disabled]:not([data-variant="compact"]):not([data-is-pressed]):not([data-is-hovered]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
-@media (max-width: 767px) {.t23.t23[data-variant="compact"][data-is-disabled]:not([data-is-pressed]):not([data-is-hovered]) {padding-top: calc(0.5 * var(--gap)); padding-right: calc(0.5 * var(--gap)); padding-bottom: calc(0.5 * var(--gap)); padding-left: calc(0.5 * var(--gap));}}
-@media (max-width: 767px) {.t23.t23[data-is-pressed][data-is-disabled]:not([data-variant="compact"]):not([data-is-hovered]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
-@media (max-width: 767px) {.t23.t23[data-variant="compact"][data-is-pressed][data-is-disabled]:not([data-is-hovered]) {padding-top: calc(0.5 * var(--gap)); padding-right: calc(0.5 * var(--gap)); padding-bottom: calc(0.5 * var(--gap)); padding-left: calc(0.5 * var(--gap));}}
-@media (max-width: 767px) {.t23.t23[data-is-hovered]:not([data-variant="compact"]):not([data-is-pressed]):not([data-is-disabled]) {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap));}}
-@media (max-width: 767px) {.t23.t23[data-variant="compact"][data-is-hovered]:not([data-is-pressed]):not([data-is-disabled]) {padding-top: calc(0.5 * var(--gap)); padding-right: calc(0.5 * var(--gap)); padding-bottom: calc(0.5 * var(--gap)); padding-left: calc(0.5 * var(--gap));}}
-@media (max-width: 767px) {.t23.t23[data-is-pressed][data-is-hovered]:not([data-variant="compact"]):not([data-is-disabled]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
-@media (max-width: 767px) {.t23.t23[data-variant="compact"][data-is-pressed][data-is-hovered]:not([data-is-disabled]) {padding-top: calc(0.5 * var(--gap)); padding-right: calc(0.5 * var(--gap)); padding-bottom: calc(0.5 * var(--gap)); padding-left: calc(0.5 * var(--gap));}}
-@media (max-width: 767px) {.t23.t23[data-is-disabled][data-is-hovered]:not([data-variant="compact"]):not([data-is-pressed]) {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap));}}
-@media (max-width: 767px) {.t23.t23[data-variant="compact"][data-is-disabled][data-is-hovered]:not([data-is-pressed]) {padding-top: calc(0.5 * var(--gap)); padding-right: calc(0.5 * var(--gap)); padding-bottom: calc(0.5 * var(--gap)); padding-left: calc(0.5 * var(--gap));}}
-@media (max-width: 767px) {.t23.t23[data-is-pressed][data-is-disabled][data-is-hovered]:not([data-variant="compact"]) {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap));}}
-@media (max-width: 767px) {.t23.t23[data-variant="compact"][data-is-pressed][data-is-disabled][data-is-hovered] {padding-top: calc(0.5 * var(--gap)); padding-right: calc(0.5 * var(--gap)); padding-bottom: calc(0.5 * var(--gap)); padding-left: calc(0.5 * var(--gap));}}
-@media (min-width: 1200px) {.t23.t23:not([data-is-hovered]):not([data-is-focused]):not([data-is-disabled]):not([data-is-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1200px;}}
-@media (min-width: 1200px) {.t23.t23[data-is-hovered]:not([data-is-focused]):not([data-is-disabled]):not([data-is-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1300px;}}
-@media (min-width: 1200px) {.t23.t23[data-is-focused]:not([data-is-hovered]):not([data-is-disabled]):not([data-is-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1300px;}}
-@media (min-width: 1200px) {.t23.t23[data-is-hovered][data-is-focused]:not([data-is-disabled]):not([data-is-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1300px;}}
-@media (min-width: 1200px) {.t23.t23[data-is-disabled]:not([data-is-hovered]):not([data-is-focused]):not([data-is-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1200px;}}
-@media (min-width: 1200px) {.t23.t23[data-is-hovered][data-is-disabled]:not([data-is-focused]):not([data-is-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1200px;}}
-@media (min-width: 1200px) {.t23.t23[data-is-focused][data-is-disabled]:not([data-is-hovered]):not([data-is-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1200px;}}
-@media (min-width: 1200px) {.t23.t23[data-is-hovered][data-is-focused][data-is-disabled]:not([data-is-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1200px;}}
-@media (min-width: 1200px) {.t23.t23[data-is-expanded]:not([data-is-hovered]):not([data-is-focused]):not([data-is-disabled]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1400px;}}
-@media (min-width: 1200px) {.t23.t23[data-is-hovered][data-is-expanded]:not([data-is-focused]):not([data-is-disabled]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1300px;}}
-@media (min-width: 1200px) {.t23.t23[data-is-focused][data-is-expanded]:not([data-is-hovered]):not([data-is-disabled]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1300px;}}
-@media (min-width: 1200px) {.t23.t23[data-is-hovered][data-is-focused][data-is-expanded]:not([data-is-disabled]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1300px;}}
-@media (min-width: 1200px) {.t23.t23[data-is-disabled][data-is-expanded]:not([data-is-hovered]):not([data-is-focused]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1400px;}}
-@media (min-width: 1200px) {.t23.t23[data-is-hovered][data-is-disabled][data-is-expanded]:not([data-is-focused]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1400px;}}
-@media (min-width: 1200px) {.t23.t23[data-is-focused][data-is-disabled][data-is-expanded]:not([data-is-hovered]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1400px;}}
-@media (min-width: 1200px) {.t23.t23[data-is-hovered][data-is-focused][data-is-disabled][data-is-expanded]:not([data-size="large"]) {width: auto; min-width: initial; max-width: 1400px;}}
-@media (min-width: 1200px) {.t23.t23[data-size="large"]:not([data-is-hovered]):not([data-is-focused]):not([data-is-disabled]):not([data-is-expanded]) {width: auto; min-width: initial; max-width: 1400px;}}
-@media (min-width: 1200px) {.t23.t23[data-is-hovered][data-size="large"]:not([data-is-focused]):not([data-is-disabled]):not([data-is-expanded]) {width: auto; min-width: initial; max-width: 1300px;}}
-@media (min-width: 1200px) {.t23.t23[data-is-focused][data-size="large"]:not([data-is-hovered]):not([data-is-disabled]):not([data-is-expanded]) {width: auto; min-width: initial; max-width: 1300px;}}
-@media (min-width: 1200px) {.t23.t23[data-is-hovered][data-is-focused][data-size="large"]:not([data-is-disabled]):not([data-is-expanded]) {width: auto; min-width: initial; max-width: 1300px;}}
-@media (min-width: 1200px) {.t23.t23[data-is-disabled][data-size="large"]:not([data-is-hovered]):not([data-is-focused]):not([data-is-expanded]) {width: auto; min-width: initial; max-width: 1400px;}}
-@media (min-width: 1200px) {.t23.t23[data-is-hovered][data-is-disabled][data-size="large"]:not([data-is-focused]):not([data-is-expanded]) {width: auto; min-width: initial; max-width: 1400px;}}
-@media (min-width: 1200px) {.t23.t23[data-is-focused][data-is-disabled][data-size="large"]:not([data-is-hovered]):not([data-is-expanded]) {width: auto; min-width: initial; max-width: 1400px;}}
-@media (min-width: 1200px) {.t23.t23[data-is-hovered][data-is-focused][data-is-disabled][data-size="large"]:not([data-is-expanded]) {width: auto; min-width: initial; max-width: 1400px;}}
-@media (min-width: 1200px) {.t23.t23[data-is-expanded][data-size="large"]:not([data-is-hovered]):not([data-is-focused]):not([data-is-disabled]) {width: auto; min-width: initial; max-width: 1400px;}}
-@media (min-width: 1200px) {.t23.t23[data-is-hovered][data-is-expanded][data-size="large"]:not([data-is-focused]):not([data-is-disabled]) {width: auto; min-width: initial; max-width: 1300px;}}
-@media (min-width: 1200px) {.t23.t23[data-is-focused][data-is-expanded][data-size="large"]:not([data-is-hovered]):not([data-is-disabled]) {width: auto; min-width: initial; max-width: 1300px;}}
-@media (min-width: 1200px) {.t23.t23[data-is-hovered][data-is-focused][data-is-expanded][data-size="large"]:not([data-is-disabled]) {width: auto; min-width: initial; max-width: 1300px;}}
-@media (min-width: 1200px) {.t23.t23[data-is-disabled][data-is-expanded][data-size="large"]:not([data-is-hovered]):not([data-is-focused]) {width: auto; min-width: initial; max-width: 1400px;}}
-@media (min-width: 1200px) {.t23.t23[data-is-hovered][data-is-disabled][data-is-expanded][data-size="large"]:not([data-is-focused]) {width: auto; min-width: initial; max-width: 1400px;}}
-@media (min-width: 1200px) {.t23.t23[data-is-focused][data-is-disabled][data-is-expanded][data-size="large"]:not([data-is-hovered]) {width: auto; min-width: initial; max-width: 1400px;}}
-@media (min-width: 1200px) {.t23.t23[data-is-hovered][data-is-focused][data-is-disabled][data-is-expanded][data-size="large"] {width: auto; min-width: initial; max-width: 1400px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23:not([data-is-hovered]):not([data-is-focused]):not([data-is-disabled]):not([data-is-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 800px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-is-hovered]:not([data-is-focused]):not([data-is-disabled]):not([data-is-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 900px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-is-focused]:not([data-is-hovered]):not([data-is-disabled]):not([data-is-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 900px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-is-hovered][data-is-focused]:not([data-is-disabled]):not([data-is-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 900px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-is-disabled]:not([data-is-hovered]):not([data-is-focused]):not([data-is-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 800px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-is-hovered][data-is-disabled]:not([data-is-focused]):not([data-is-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 800px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-is-focused][data-is-disabled]:not([data-is-hovered]):not([data-is-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 800px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-is-hovered][data-is-focused][data-is-disabled]:not([data-is-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 800px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-is-expanded]:not([data-is-hovered]):not([data-is-focused]):not([data-is-disabled]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1000px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-is-hovered][data-is-expanded]:not([data-is-focused]):not([data-is-disabled]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 900px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-is-focused][data-is-expanded]:not([data-is-hovered]):not([data-is-disabled]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 900px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-is-hovered][data-is-focused][data-is-expanded]:not([data-is-disabled]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 900px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-is-disabled][data-is-expanded]:not([data-is-hovered]):not([data-is-focused]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1000px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-is-hovered][data-is-disabled][data-is-expanded]:not([data-is-focused]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1000px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-is-focused][data-is-disabled][data-is-expanded]:not([data-is-hovered]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1000px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-is-hovered][data-is-focused][data-is-disabled][data-is-expanded]:not([data-size="large"]) {width: auto; min-width: initial; max-width: 1000px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-size="large"]:not([data-is-hovered]):not([data-is-focused]):not([data-is-disabled]):not([data-is-expanded]) {width: auto; min-width: initial; max-width: 1000px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-is-hovered][data-size="large"]:not([data-is-focused]):not([data-is-disabled]):not([data-is-expanded]) {width: auto; min-width: initial; max-width: 900px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-is-focused][data-size="large"]:not([data-is-hovered]):not([data-is-disabled]):not([data-is-expanded]) {width: auto; min-width: initial; max-width: 900px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-is-hovered][data-is-focused][data-size="large"]:not([data-is-disabled]):not([data-is-expanded]) {width: auto; min-width: initial; max-width: 900px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-is-disabled][data-size="large"]:not([data-is-hovered]):not([data-is-focused]):not([data-is-expanded]) {width: auto; min-width: initial; max-width: 1000px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-is-hovered][data-is-disabled][data-size="large"]:not([data-is-focused]):not([data-is-expanded]) {width: auto; min-width: initial; max-width: 1000px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-is-focused][data-is-disabled][data-size="large"]:not([data-is-hovered]):not([data-is-expanded]) {width: auto; min-width: initial; max-width: 1000px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-is-hovered][data-is-focused][data-is-disabled][data-size="large"]:not([data-is-expanded]) {width: auto; min-width: initial; max-width: 1000px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-is-expanded][data-size="large"]:not([data-is-hovered]):not([data-is-focused]):not([data-is-disabled]) {width: auto; min-width: initial; max-width: 1000px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-is-hovered][data-is-expanded][data-size="large"]:not([data-is-focused]):not([data-is-disabled]) {width: auto; min-width: initial; max-width: 900px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-is-focused][data-is-expanded][data-size="large"]:not([data-is-hovered]):not([data-is-disabled]) {width: auto; min-width: initial; max-width: 900px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-is-hovered][data-is-focused][data-is-expanded][data-size="large"]:not([data-is-disabled]) {width: auto; min-width: initial; max-width: 900px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-is-disabled][data-is-expanded][data-size="large"]:not([data-is-hovered]):not([data-is-focused]) {width: auto; min-width: initial; max-width: 1000px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-is-hovered][data-is-disabled][data-is-expanded][data-size="large"]:not([data-is-focused]) {width: auto; min-width: initial; max-width: 1000px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-is-focused][data-is-disabled][data-is-expanded][data-size="large"]:not([data-is-hovered]) {width: auto; min-width: initial; max-width: 1000px;}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-is-hovered][data-is-focused][data-is-disabled][data-is-expanded][data-size="large"] {width: auto; min-width: initial; max-width: 1000px;}}
-@media (max-width: 767px) {.t23.t23:not([data-is-hovered]):not([data-is-focused]):not([data-is-disabled]):not([data-is-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t23.t23[data-is-hovered]:not([data-is-focused]):not([data-is-disabled]):not([data-is-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t23.t23[data-is-focused]:not([data-is-hovered]):not([data-is-disabled]):not([data-is-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t23.t23[data-is-hovered][data-is-focused]:not([data-is-disabled]):not([data-is-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t23.t23[data-is-disabled]:not([data-is-hovered]):not([data-is-focused]):not([data-is-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t23.t23[data-is-hovered][data-is-disabled]:not([data-is-focused]):not([data-is-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t23.t23[data-is-focused][data-is-disabled]:not([data-is-hovered]):not([data-is-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t23.t23[data-is-hovered][data-is-focused][data-is-disabled]:not([data-is-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t23.t23[data-is-expanded]:not([data-is-hovered]):not([data-is-focused]):not([data-is-disabled]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t23.t23[data-is-hovered][data-is-expanded]:not([data-is-focused]):not([data-is-disabled]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t23.t23[data-is-focused][data-is-expanded]:not([data-is-hovered]):not([data-is-disabled]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t23.t23[data-is-hovered][data-is-focused][data-is-expanded]:not([data-is-disabled]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t23.t23[data-is-disabled][data-is-expanded]:not([data-is-hovered]):not([data-is-focused]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t23.t23[data-is-hovered][data-is-disabled][data-is-expanded]:not([data-is-focused]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t23.t23[data-is-focused][data-is-disabled][data-is-expanded]:not([data-is-hovered]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t23.t23[data-is-hovered][data-is-focused][data-is-disabled][data-is-expanded]:not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t23.t23[data-size="large"]:not([data-is-hovered]):not([data-is-focused]):not([data-is-disabled]):not([data-is-expanded]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t23.t23[data-is-hovered][data-size="large"]:not([data-is-focused]):not([data-is-disabled]):not([data-is-expanded]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t23.t23[data-is-focused][data-size="large"]:not([data-is-hovered]):not([data-is-disabled]):not([data-is-expanded]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t23.t23[data-is-hovered][data-is-focused][data-size="large"]:not([data-is-disabled]):not([data-is-expanded]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t23.t23[data-is-disabled][data-size="large"]:not([data-is-hovered]):not([data-is-focused]):not([data-is-expanded]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t23.t23[data-is-hovered][data-is-disabled][data-size="large"]:not([data-is-focused]):not([data-is-expanded]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t23.t23[data-is-focused][data-is-disabled][data-size="large"]:not([data-is-hovered]):not([data-is-expanded]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t23.t23[data-is-hovered][data-is-focused][data-is-disabled][data-size="large"]:not([data-is-expanded]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t23.t23[data-is-expanded][data-size="large"]:not([data-is-hovered]):not([data-is-focused]):not([data-is-disabled]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t23.t23[data-is-hovered][data-is-expanded][data-size="large"]:not([data-is-focused]):not([data-is-disabled]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t23.t23[data-is-focused][data-is-expanded][data-size="large"]:not([data-is-hovered]):not([data-is-disabled]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t23.t23[data-is-hovered][data-is-focused][data-is-expanded][data-size="large"]:not([data-is-disabled]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t23.t23[data-is-disabled][data-is-expanded][data-size="large"]:not([data-is-hovered]):not([data-is-focused]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t23.t23[data-is-hovered][data-is-disabled][data-is-expanded][data-size="large"]:not([data-is-focused]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t23.t23[data-is-focused][data-is-disabled][data-is-expanded][data-size="large"]:not([data-is-hovered]) {width: auto; min-width: initial; max-width: 100%;}}
-@media (max-width: 767px) {.t23.t23[data-is-hovered][data-is-focused][data-is-disabled][data-is-expanded][data-size="large"] {width: auto; min-width: initial; max-width: 100%;}}
-.t23.t23:not([data-variant="success"]):not([data-is-disabled]):not([data-variant="danger"]):not([data-is-hovered]):not([disabled]):not([data-is-pressed]) {background-color: var(--surface-color);}
-.t23.t23:not([data-variant="success"]):not([data-is-disabled]):not([data-variant="danger"]):not([data-is-hovered]):not([disabled]):not([data-is-pressed])>* {--context-fill-color: var(--surface-color); --context-fill-color-rgb: var(--surface-color-rgb);}
-.t23.t23[data-variant="success"]:not([data-is-disabled]):not([data-is-hovered]):not([disabled]):not([data-is-pressed]) {background-color: var(--success-color);}
-.t23.t23[data-variant="success"]:not([data-is-disabled]):not([data-is-hovered]):not([disabled]):not([data-is-pressed])>* {--context-fill-color: var(--success-color); --context-fill-color-rgb: var(--success-color-rgb);}
-.t23.t23[data-is-disabled]:not([data-variant="success"]):not([data-variant="danger"]):not([data-is-hovered]):not([disabled]):not([data-is-pressed]) {background-color: var(--surface-color);}
-.t23.t23[data-is-disabled]:not([data-variant="success"]):not([data-variant="danger"]):not([data-is-hovered]):not([disabled]):not([data-is-pressed])>* {--context-fill-color: var(--surface-color); --context-fill-color-rgb: var(--surface-color-rgb);}
-.t23.t23[data-variant="success"][data-is-disabled]:not([data-is-hovered]):not([disabled]):not([data-is-pressed]) {background-color: var(--surface-color);}
-.t23.t23[data-variant="success"][data-is-disabled]:not([data-is-hovered]):not([disabled]):not([data-is-pressed])>* {--context-fill-color: var(--surface-color); --context-fill-color-rgb: var(--surface-color-rgb);}
-.t23.t23[data-variant="danger"]:not([data-is-disabled]):not([data-is-hovered]):not([disabled]):not([data-is-pressed]) {background-color: var(--surface-color);}
-.t23.t23[data-variant="danger"]:not([data-is-disabled]):not([data-is-hovered]):not([disabled]):not([data-is-pressed])>* {--context-fill-color: var(--surface-color); --context-fill-color-rgb: var(--surface-color-rgb);}
-.t23.t23[data-is-disabled][data-variant="danger"]:not([data-is-hovered]):not([disabled]):not([data-is-pressed]) {background-color: var(--surface-color);}
-.t23.t23[data-is-disabled][data-variant="danger"]:not([data-is-hovered]):not([disabled]):not([data-is-pressed])>* {--context-fill-color: var(--surface-color); --context-fill-color-rgb: var(--surface-color-rgb);}
-.t23.t23[data-is-hovered]:not([data-variant="success"]):not([data-is-disabled]):not([data-variant="danger"]):not([disabled]):not([data-is-pressed]) {background-color: var(--surface-hover-color);}
-.t23.t23[data-is-hovered]:not([data-variant="success"]):not([data-is-disabled]):not([data-variant="danger"]):not([disabled]):not([data-is-pressed])>* {--context-fill-color: var(--surface-hover-color); --context-fill-color-rgb: var(--surface-hover-color-rgb);}
-.t23.t23[data-variant="success"][data-is-hovered]:not([data-is-disabled]):not([disabled]):not([data-is-pressed]) {background-color: var(--success-color);}
-.t23.t23[data-variant="success"][data-is-hovered]:not([data-is-disabled]):not([disabled]):not([data-is-pressed])>* {--context-fill-color: var(--success-color); --context-fill-color-rgb: var(--success-color-rgb);}
-.t23.t23[data-is-disabled][data-is-hovered]:not([data-variant="success"]):not([data-variant="danger"]):not([disabled]):not([data-is-pressed]) {background-color: var(--surface-hover-color);}
-.t23.t23[data-is-disabled][data-is-hovered]:not([data-variant="success"]):not([data-variant="danger"]):not([disabled]):not([data-is-pressed])>* {--context-fill-color: var(--surface-hover-color); --context-fill-color-rgb: var(--surface-hover-color-rgb);}
-.t23.t23[data-variant="success"][data-is-disabled][data-is-hovered]:not([disabled]):not([data-is-pressed]) {background-color: var(--surface-hover-color);}
-.t23.t23[data-variant="success"][data-is-disabled][data-is-hovered]:not([disabled]):not([data-is-pressed])>* {--context-fill-color: var(--surface-hover-color); --context-fill-color-rgb: var(--surface-hover-color-rgb);}
-.t23.t23[data-variant="danger"][data-is-hovered]:not([data-is-disabled]):not([disabled]):not([data-is-pressed]) {background-color: var(--danger-hover-color);}
-.t23.t23[data-variant="danger"][data-is-hovered]:not([data-is-disabled]):not([disabled]):not([data-is-pressed])>* {--context-fill-color: var(--danger-hover-color); --context-fill-color-rgb: var(--danger-hover-color-rgb);}
-.t23.t23[data-is-disabled][data-variant="danger"][data-is-hovered]:not([disabled]):not([data-is-pressed]) {background-color: var(--danger-hover-color);}
-.t23.t23[data-is-disabled][data-variant="danger"][data-is-hovered]:not([disabled]):not([data-is-pressed])>* {--context-fill-color: var(--danger-hover-color); --context-fill-color-rgb: var(--danger-hover-color-rgb);}
-.t23.t23[disabled]:not([data-variant="success"]):not([data-is-disabled]):not([data-variant="danger"]):not([data-is-hovered]):not([data-is-pressed]) {background-color: var(--surface-disabled-color);}
-.t23.t23[disabled]:not([data-variant="success"]):not([data-is-disabled]):not([data-variant="danger"]):not([data-is-hovered]):not([data-is-pressed])>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
-.t23.t23[data-variant="success"][disabled]:not([data-is-disabled]):not([data-is-hovered]):not([data-is-pressed]) {background-color: var(--success-color);}
-.t23.t23[data-variant="success"][disabled]:not([data-is-disabled]):not([data-is-hovered]):not([data-is-pressed])>* {--context-fill-color: var(--success-color); --context-fill-color-rgb: var(--success-color-rgb);}
-.t23.t23[data-is-disabled][disabled]:not([data-variant="success"]):not([data-variant="danger"]):not([data-is-hovered]):not([data-is-pressed]) {background-color: var(--surface-disabled-color);}
-.t23.t23[data-is-disabled][disabled]:not([data-variant="success"]):not([data-variant="danger"]):not([data-is-hovered]):not([data-is-pressed])>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
-.t23.t23[data-variant="success"][data-is-disabled][disabled]:not([data-is-hovered]):not([data-is-pressed]) {background-color: var(--surface-disabled-color);}
-.t23.t23[data-variant="success"][data-is-disabled][disabled]:not([data-is-hovered]):not([data-is-pressed])>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
-.t23.t23[data-variant="danger"][disabled]:not([data-is-disabled]):not([data-is-hovered]):not([data-is-pressed]) {background-color: var(--surface-disabled-color);}
-.t23.t23[data-variant="danger"][disabled]:not([data-is-disabled]):not([data-is-hovered]):not([data-is-pressed])>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
-.t23.t23[data-is-disabled][data-variant="danger"][disabled]:not([data-is-hovered]):not([data-is-pressed]) {background-color: var(--surface-disabled-color);}
-.t23.t23[data-is-disabled][data-variant="danger"][disabled]:not([data-is-hovered]):not([data-is-pressed])>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
-.t23.t23[data-is-hovered][disabled]:not([data-variant="success"]):not([data-is-disabled]):not([data-variant="danger"]):not([data-is-pressed]) {background-color: var(--surface-disabled-color);}
-.t23.t23[data-is-hovered][disabled]:not([data-variant="success"]):not([data-is-disabled]):not([data-variant="danger"]):not([data-is-pressed])>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
-.t23.t23[data-variant="success"][data-is-hovered][disabled]:not([data-is-disabled]):not([data-is-pressed]) {background-color: var(--success-color);}
-.t23.t23[data-variant="success"][data-is-hovered][disabled]:not([data-is-disabled]):not([data-is-pressed])>* {--context-fill-color: var(--success-color); --context-fill-color-rgb: var(--success-color-rgb);}
-.t23.t23[data-is-disabled][data-is-hovered][disabled]:not([data-variant="success"]):not([data-variant="danger"]):not([data-is-pressed]) {background-color: var(--surface-disabled-color);}
-.t23.t23[data-is-disabled][data-is-hovered][disabled]:not([data-variant="success"]):not([data-variant="danger"]):not([data-is-pressed])>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
-.t23.t23[data-variant="success"][data-is-disabled][data-is-hovered][disabled]:not([data-is-pressed]) {background-color: var(--surface-disabled-color);}
-.t23.t23[data-variant="success"][data-is-disabled][data-is-hovered][disabled]:not([data-is-pressed])>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
-.t23.t23[data-variant="danger"][data-is-hovered][disabled]:not([data-is-disabled]):not([data-is-pressed]) {background-color: var(--danger-hover-color);}
-.t23.t23[data-variant="danger"][data-is-hovered][disabled]:not([data-is-disabled]):not([data-is-pressed])>* {--context-fill-color: var(--danger-hover-color); --context-fill-color-rgb: var(--danger-hover-color-rgb);}
-.t23.t23[data-is-disabled][data-variant="danger"][data-is-hovered][disabled]:not([data-is-pressed]) {background-color: var(--danger-hover-color);}
-.t23.t23[data-is-disabled][data-variant="danger"][data-is-hovered][disabled]:not([data-is-pressed])>* {--context-fill-color: var(--danger-hover-color); --context-fill-color-rgb: var(--danger-hover-color-rgb);}
-.t23.t23[data-is-pressed]:not([data-variant="success"]):not([data-is-disabled]):not([data-variant="danger"]):not([data-is-hovered]):not([disabled]) {background-color: var(--surface-pressed-color);}
-.t23.t23[data-is-pressed]:not([data-variant="success"]):not([data-is-disabled]):not([data-variant="danger"]):not([data-is-hovered]):not([disabled])>* {--context-fill-color: var(--surface-pressed-color); --context-fill-color-rgb: var(--surface-pressed-color-rgb);}
-.t23.t23[data-variant="success"][data-is-pressed]:not([data-is-disabled]):not([data-is-hovered]):not([disabled]) {background-color: var(--success-color);}
-.t23.t23[data-variant="success"][data-is-pressed]:not([data-is-disabled]):not([data-is-hovered]):not([disabled])>* {--context-fill-color: var(--success-color); --context-fill-color-rgb: var(--success-color-rgb);}
-.t23.t23[data-is-disabled][data-is-pressed]:not([data-variant="success"]):not([data-variant="danger"]):not([data-is-hovered]):not([disabled]) {background-color: var(--surface-pressed-color);}
-.t23.t23[data-is-disabled][data-is-pressed]:not([data-variant="success"]):not([data-variant="danger"]):not([data-is-hovered]):not([disabled])>* {--context-fill-color: var(--surface-pressed-color); --context-fill-color-rgb: var(--surface-pressed-color-rgb);}
-.t23.t23[data-variant="success"][data-is-disabled][data-is-pressed]:not([data-is-hovered]):not([disabled]) {background-color: var(--surface-pressed-color);}
-.t23.t23[data-variant="success"][data-is-disabled][data-is-pressed]:not([data-is-hovered]):not([disabled])>* {--context-fill-color: var(--surface-pressed-color); --context-fill-color-rgb: var(--surface-pressed-color-rgb);}
-.t23.t23[data-variant="danger"][data-is-pressed]:not([data-is-disabled]):not([data-is-hovered]):not([disabled]) {background-color: var(--surface-pressed-color);}
-.t23.t23[data-variant="danger"][data-is-pressed]:not([data-is-disabled]):not([data-is-hovered]):not([disabled])>* {--context-fill-color: var(--surface-pressed-color); --context-fill-color-rgb: var(--surface-pressed-color-rgb);}
-.t23.t23[data-is-disabled][data-variant="danger"][data-is-pressed]:not([data-is-hovered]):not([disabled]) {background-color: var(--surface-pressed-color);}
-.t23.t23[data-is-disabled][data-variant="danger"][data-is-pressed]:not([data-is-hovered]):not([disabled])>* {--context-fill-color: var(--surface-pressed-color); --context-fill-color-rgb: var(--surface-pressed-color-rgb);}
-.t23.t23[data-is-hovered][data-is-pressed]:not([data-variant="success"]):not([data-is-disabled]):not([data-variant="danger"]):not([disabled]) {background-color: var(--surface-pressed-color);}
-.t23.t23[data-is-hovered][data-is-pressed]:not([data-variant="success"]):not([data-is-disabled]):not([data-variant="danger"]):not([disabled])>* {--context-fill-color: var(--surface-pressed-color); --context-fill-color-rgb: var(--surface-pressed-color-rgb);}
-.t23.t23[data-variant="success"][data-is-hovered][data-is-pressed]:not([data-is-disabled]):not([disabled]) {background-color: var(--success-color);}
-.t23.t23[data-variant="success"][data-is-hovered][data-is-pressed]:not([data-is-disabled]):not([disabled])>* {--context-fill-color: var(--success-color); --context-fill-color-rgb: var(--success-color-rgb);}
-.t23.t23[data-is-disabled][data-is-hovered][data-is-pressed]:not([data-variant="success"]):not([data-variant="danger"]):not([disabled]) {background-color: var(--surface-pressed-color);}
-.t23.t23[data-is-disabled][data-is-hovered][data-is-pressed]:not([data-variant="success"]):not([data-variant="danger"]):not([disabled])>* {--context-fill-color: var(--surface-pressed-color); --context-fill-color-rgb: var(--surface-pressed-color-rgb);}
-.t23.t23[data-variant="success"][data-is-disabled][data-is-hovered][data-is-pressed]:not([disabled]) {background-color: var(--surface-pressed-color);}
-.t23.t23[data-variant="success"][data-is-disabled][data-is-hovered][data-is-pressed]:not([disabled])>* {--context-fill-color: var(--surface-pressed-color); --context-fill-color-rgb: var(--surface-pressed-color-rgb);}
-.t23.t23[data-variant="danger"][data-is-hovered][data-is-pressed]:not([data-is-disabled]):not([disabled]) {background-color: var(--danger-hover-color);}
-.t23.t23[data-variant="danger"][data-is-hovered][data-is-pressed]:not([data-is-disabled]):not([disabled])>* {--context-fill-color: var(--danger-hover-color); --context-fill-color-rgb: var(--danger-hover-color-rgb);}
-.t23.t23[data-is-disabled][data-variant="danger"][data-is-hovered][data-is-pressed]:not([disabled]) {background-color: var(--danger-hover-color);}
-.t23.t23[data-is-disabled][data-variant="danger"][data-is-hovered][data-is-pressed]:not([disabled])>* {--context-fill-color: var(--danger-hover-color); --context-fill-color-rgb: var(--danger-hover-color-rgb);}
-.t23.t23[disabled][data-is-pressed]:not([data-variant="success"]):not([data-is-disabled]):not([data-variant="danger"]):not([data-is-hovered]) {background-color: var(--surface-disabled-color);}
-.t23.t23[disabled][data-is-pressed]:not([data-variant="success"]):not([data-is-disabled]):not([data-variant="danger"]):not([data-is-hovered])>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
-.t23.t23[data-variant="success"][disabled][data-is-pressed]:not([data-is-disabled]):not([data-is-hovered]) {background-color: var(--success-color);}
-.t23.t23[data-variant="success"][disabled][data-is-pressed]:not([data-is-disabled]):not([data-is-hovered])>* {--context-fill-color: var(--success-color); --context-fill-color-rgb: var(--success-color-rgb);}
-.t23.t23[data-is-disabled][disabled][data-is-pressed]:not([data-variant="success"]):not([data-variant="danger"]):not([data-is-hovered]) {background-color: var(--surface-disabled-color);}
-.t23.t23[data-is-disabled][disabled][data-is-pressed]:not([data-variant="success"]):not([data-variant="danger"]):not([data-is-hovered])>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
-.t23.t23[data-variant="success"][data-is-disabled][disabled][data-is-pressed]:not([data-is-hovered]) {background-color: var(--surface-disabled-color);}
-.t23.t23[data-variant="success"][data-is-disabled][disabled][data-is-pressed]:not([data-is-hovered])>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
-.t23.t23[data-variant="danger"][disabled][data-is-pressed]:not([data-is-disabled]):not([data-is-hovered]) {background-color: var(--surface-disabled-color);}
-.t23.t23[data-variant="danger"][disabled][data-is-pressed]:not([data-is-disabled]):not([data-is-hovered])>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
-.t23.t23[data-is-disabled][data-variant="danger"][disabled][data-is-pressed]:not([data-is-hovered]) {background-color: var(--surface-disabled-color);}
-.t23.t23[data-is-disabled][data-variant="danger"][disabled][data-is-pressed]:not([data-is-hovered])>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
-.t23.t23[data-is-hovered][disabled][data-is-pressed]:not([data-variant="success"]):not([data-is-disabled]):not([data-variant="danger"]) {background-color: var(--surface-disabled-color);}
-.t23.t23[data-is-hovered][disabled][data-is-pressed]:not([data-variant="success"]):not([data-is-disabled]):not([data-variant="danger"])>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
-.t23.t23[data-variant="success"][data-is-hovered][disabled][data-is-pressed]:not([data-is-disabled]) {background-color: var(--success-color);}
-.t23.t23[data-variant="success"][data-is-hovered][disabled][data-is-pressed]:not([data-is-disabled])>* {--context-fill-color: var(--success-color); --context-fill-color-rgb: var(--success-color-rgb);}
-.t23.t23[data-is-disabled][data-is-hovered][disabled][data-is-pressed]:not([data-variant="success"]):not([data-variant="danger"]) {background-color: var(--surface-disabled-color);}
-.t23.t23[data-is-disabled][data-is-hovered][disabled][data-is-pressed]:not([data-variant="success"]):not([data-variant="danger"])>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
-.t23.t23[data-variant="success"][data-is-disabled][data-is-hovered][disabled][data-is-pressed] {background-color: var(--surface-disabled-color);}
-.t23.t23[data-variant="success"][data-is-disabled][data-is-hovered][disabled][data-is-pressed]>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
-.t23.t23[data-variant="danger"][data-is-hovered][disabled][data-is-pressed]:not([data-is-disabled]) {background-color: var(--danger-hover-color);}
-.t23.t23[data-variant="danger"][data-is-hovered][disabled][data-is-pressed]:not([data-is-disabled])>* {--context-fill-color: var(--danger-hover-color); --context-fill-color-rgb: var(--danger-hover-color-rgb);}
-.t23.t23[data-is-disabled][data-variant="danger"][data-is-hovered][disabled][data-is-pressed] {background-color: var(--danger-hover-color);}
-.t23.t23[data-is-disabled][data-variant="danger"][data-is-hovered][disabled][data-is-pressed]>* {--context-fill-color: var(--danger-hover-color); --context-fill-color-rgb: var(--danger-hover-color-rgb);}
-@media (min-width: 1200px) {.t23.t23:not([data-variant="borderless"]):not([data-is-hovered]):not([data-is-error]):not([data-is-focused]) {border: calc(2 * var(--border-width)) solid var(--border-color);}}
-@media (min-width: 1200px) {.t23.t23[data-variant="borderless"]:not([data-is-hovered]):not([data-is-error]):not([data-is-focused]) {border: calc(2 * var(--border-width)) solid var(--border-color);}}
-@media (min-width: 1200px) {.t23.t23[data-is-hovered]:not([data-variant="borderless"]):not([data-is-error]):not([data-is-focused]) {border: calc(2 * var(--border-width)) solid var(--border-hover-color);}}
-@media (min-width: 1200px) {.t23.t23[data-variant="borderless"][data-is-hovered]:not([data-is-error]):not([data-is-focused]) {border: calc(2 * var(--border-width)) solid var(--border-color);}}
-@media (min-width: 1200px) {.t23.t23[data-is-error]:not([data-variant="borderless"]):not([data-is-hovered]):not([data-is-focused]) {border: calc(2 * var(--border-width)) solid var(--border-color);}}
-@media (min-width: 1200px) {.t23.t23[data-variant="borderless"][data-is-error]:not([data-is-hovered]):not([data-is-focused]) {border: calc(2 * var(--border-width)) solid var(--border-color);}}
-@media (min-width: 1200px) {.t23.t23[data-is-hovered][data-is-error]:not([data-variant="borderless"]):not([data-is-focused]) {border: calc(2 * var(--border-width)) solid var(--border-hover-color);}}
-@media (min-width: 1200px) {.t23.t23[data-variant="borderless"][data-is-hovered][data-is-error]:not([data-is-focused]) {border: calc(2 * var(--border-width)) solid var(--border-color);}}
-@media (min-width: 1200px) {.t23.t23[data-is-focused]:not([data-variant="borderless"]):not([data-is-hovered]):not([data-is-error]) {border: calc(3 * var(--border-width)) solid var(--primary-color);}}
-@media (min-width: 1200px) {.t23.t23[data-variant="borderless"][data-is-focused]:not([data-is-hovered]):not([data-is-error]) {border: calc(3 * var(--border-width)) solid var(--primary-color);}}
-@media (min-width: 1200px) {.t23.t23[data-is-hovered][data-is-focused]:not([data-variant="borderless"]):not([data-is-error]) {border: calc(2 * var(--border-width)) solid var(--border-hover-color);}}
-@media (min-width: 1200px) {.t23.t23[data-variant="borderless"][data-is-hovered][data-is-focused]:not([data-is-error]) {border: calc(3 * var(--border-width)) solid var(--primary-color);}}
-@media (min-width: 1200px) {.t23.t23[data-is-error][data-is-focused]:not([data-variant="borderless"]):not([data-is-hovered]) {border: calc(3 * var(--border-width)) solid var(--danger-color);}}
-@media (min-width: 1200px) {.t23.t23[data-variant="borderless"][data-is-error][data-is-focused]:not([data-is-hovered]) {border: calc(3 * var(--border-width)) solid var(--danger-color);}}
-@media (min-width: 1200px) {.t23.t23[data-is-hovered][data-is-error][data-is-focused]:not([data-variant="borderless"]) {border: calc(2 * var(--border-width)) solid var(--border-hover-color);}}
-@media (min-width: 1200px) {.t23.t23[data-variant="borderless"][data-is-hovered][data-is-error][data-is-focused] {border: calc(3 * var(--border-width)) solid var(--danger-color);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23:not([data-variant="borderless"]):not([data-is-hovered]):not([data-is-error]):not([data-is-focused]) {border: var(--border-width) solid var(--border-color);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-variant="borderless"]:not([data-is-hovered]):not([data-is-error]):not([data-is-focused]) {border: var(--border-width) solid var(--border-color);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-is-hovered]:not([data-variant="borderless"]):not([data-is-error]):not([data-is-focused]) {border: var(--border-width) solid var(--border-hover-color);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-variant="borderless"][data-is-hovered]:not([data-is-error]):not([data-is-focused]) {border: var(--border-width) solid var(--border-color);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-is-error]:not([data-variant="borderless"]):not([data-is-hovered]):not([data-is-focused]) {border: var(--border-width) solid var(--border-color);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-variant="borderless"][data-is-error]:not([data-is-hovered]):not([data-is-focused]) {border: var(--border-width) solid var(--border-color);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-is-hovered][data-is-error]:not([data-variant="borderless"]):not([data-is-focused]) {border: var(--border-width) solid var(--border-hover-color);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-variant="borderless"][data-is-hovered][data-is-error]:not([data-is-focused]) {border: var(--border-width) solid var(--border-color);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-is-focused]:not([data-variant="borderless"]):not([data-is-hovered]):not([data-is-error]) {border: calc(2 * var(--border-width)) solid var(--primary-color);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-variant="borderless"][data-is-focused]:not([data-is-hovered]):not([data-is-error]) {border: calc(2 * var(--border-width)) solid var(--primary-color);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-is-hovered][data-is-focused]:not([data-variant="borderless"]):not([data-is-error]) {border: var(--border-width) solid var(--border-hover-color);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-variant="borderless"][data-is-hovered][data-is-focused]:not([data-is-error]) {border: calc(2 * var(--border-width)) solid var(--primary-color);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-is-error][data-is-focused]:not([data-variant="borderless"]):not([data-is-hovered]) {border: calc(2 * var(--border-width)) solid var(--danger-color);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-variant="borderless"][data-is-error][data-is-focused]:not([data-is-hovered]) {border: calc(2 * var(--border-width)) solid var(--danger-color);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-is-hovered][data-is-error][data-is-focused]:not([data-variant="borderless"]) {border: var(--border-width) solid var(--border-hover-color);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23[data-variant="borderless"][data-is-hovered][data-is-error][data-is-focused] {border: calc(2 * var(--border-width)) solid var(--danger-color);}}
-@media (max-width: 767px) {.t23.t23:not([data-variant="borderless"]):not([data-is-hovered]):not([data-is-error]):not([data-is-focused]) {border: var(--border-width) none var(--border-color);}}
-@media (max-width: 767px) {.t23.t23[data-variant="borderless"]:not([data-is-hovered]):not([data-is-error]):not([data-is-focused]) {border: var(--border-width) none var(--border-color);}}
-@media (max-width: 767px) {.t23.t23[data-is-hovered]:not([data-variant="borderless"]):not([data-is-error]):not([data-is-focused]) {border: var(--border-width) solid var(--border-hover-color);}}
-@media (max-width: 767px) {.t23.t23[data-variant="borderless"][data-is-hovered]:not([data-is-error]):not([data-is-focused]) {border: var(--border-width) none var(--border-color);}}
-@media (max-width: 767px) {.t23.t23[data-is-error]:not([data-variant="borderless"]):not([data-is-hovered]):not([data-is-focused]) {border: var(--border-width) none var(--border-color);}}
-@media (max-width: 767px) {.t23.t23[data-variant="borderless"][data-is-error]:not([data-is-hovered]):not([data-is-focused]) {border: var(--border-width) none var(--border-color);}}
-@media (max-width: 767px) {.t23.t23[data-is-hovered][data-is-error]:not([data-variant="borderless"]):not([data-is-focused]) {border: var(--border-width) solid var(--border-hover-color);}}
-@media (max-width: 767px) {.t23.t23[data-variant="borderless"][data-is-hovered][data-is-error]:not([data-is-focused]) {border: var(--border-width) none var(--border-color);}}
-@media (max-width: 767px) {.t23.t23[data-is-focused]:not([data-variant="borderless"]):not([data-is-hovered]):not([data-is-error]) {border: var(--border-width) solid var(--primary-color);}}
-@media (max-width: 767px) {.t23.t23[data-variant="borderless"][data-is-focused]:not([data-is-hovered]):not([data-is-error]) {border: var(--border-width) solid var(--primary-color);}}
-@media (max-width: 767px) {.t23.t23[data-is-hovered][data-is-focused]:not([data-variant="borderless"]):not([data-is-error]) {border: var(--border-width) solid var(--border-hover-color);}}
-@media (max-width: 767px) {.t23.t23[data-variant="borderless"][data-is-hovered][data-is-focused]:not([data-is-error]) {border: var(--border-width) solid var(--primary-color);}}
-@media (max-width: 767px) {.t23.t23[data-is-error][data-is-focused]:not([data-variant="borderless"]):not([data-is-hovered]) {border: var(--border-width) solid var(--danger-color);}}
-@media (max-width: 767px) {.t23.t23[data-variant="borderless"][data-is-error][data-is-focused]:not([data-is-hovered]) {border: var(--border-width) solid var(--danger-color);}}
-@media (max-width: 767px) {.t23.t23[data-is-hovered][data-is-error][data-is-focused]:not([data-variant="borderless"]) {border: var(--border-width) solid var(--border-hover-color);}}
-@media (max-width: 767px) {.t23.t23[data-variant="borderless"][data-is-hovered][data-is-error][data-is-focused] {border: var(--border-width) solid var(--danger-color);}}
-@media (min-width: 1200px) {.t23.t23>* {--context-radius: calc(2 * var(--radius));}}
-@media (min-width: 768px) and (max-width: 1199px) {.t23.t23>* {--context-radius: var(--radius);}}
-@media (max-width: 767px) {.t23.t23>* {--context-radius: calc(0.5 * var(--radius));}}"
+"@media (min-width: 1200px) {.t22.t22 [data-element="Header"] {--font-size: var(--h2-font-size, var(--default-font-size, inherit)); font-size: var(--h2-font-size, var(--default-font-size, inherit)); --line-height: var(--h2-line-height, var(--default-line-height, inherit)); line-height: var(--h2-line-height, var(--default-line-height, inherit)); --letter-spacing: var(--h2-letter-spacing, var(--default-letter-spacing, inherit)); letter-spacing: var(--h2-letter-spacing, var(--default-letter-spacing, inherit)); --font-weight: var(--h2-font-weight, var(--default-font-weight, inherit)); font-weight: var(--h2-font-weight, var(--default-font-weight, inherit)); --font-style: var(--h2-font-style, var(--default-font-style, inherit)); font-style: var(--h2-font-style, var(--default-font-style, inherit)); --text-transform: var(--h2-text-transform, var(--default-text-transform, inherit)); text-transform: var(--h2-text-transform, var(--default-text-transform, inherit)); --font-family: var(--h2-font-family, var(--default-font-family, var(--font, NonexistentFontName))), var(--font, sans-serif); font-family: var(--h2-font-family, var(--default-font-family, var(--font, NonexistentFontName))), var(--font, sans-serif); --bold-font-weight: var(--h2-bold-font-weight, var(--default-bold-font-weight, inherit)); --icon-size: var(--h2-icon-size, var(--default-icon-size, inherit)); margin-top: 0; margin-right: 0; margin-bottom: calc(2 * var(--gap)); margin-left: 0;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22 [data-element="Header"] {--font-size: var(--h3-font-size, var(--default-font-size, inherit)); font-size: var(--h3-font-size, var(--default-font-size, inherit)); --line-height: var(--h3-line-height, var(--default-line-height, inherit)); line-height: var(--h3-line-height, var(--default-line-height, inherit)); --letter-spacing: var(--h3-letter-spacing, var(--default-letter-spacing, inherit)); letter-spacing: var(--h3-letter-spacing, var(--default-letter-spacing, inherit)); --font-weight: var(--h3-font-weight, var(--default-font-weight, inherit)); font-weight: var(--h3-font-weight, var(--default-font-weight, inherit)); --font-style: var(--h3-font-style, var(--default-font-style, inherit)); font-style: var(--h3-font-style, var(--default-font-style, inherit)); --text-transform: var(--h3-text-transform, var(--default-text-transform, inherit)); text-transform: var(--h3-text-transform, var(--default-text-transform, inherit)); --font-family: var(--h3-font-family, var(--default-font-family, var(--font, NonexistentFontName))), var(--font, sans-serif); font-family: var(--h3-font-family, var(--default-font-family, var(--font, NonexistentFontName))), var(--font, sans-serif); --bold-font-weight: var(--h3-bold-font-weight, var(--default-bold-font-weight, inherit)); --icon-size: var(--h3-icon-size, var(--default-icon-size, inherit)); margin-top: 0; margin-right: 0; margin-bottom: var(--gap); margin-left: 0;}}
+@media (max-width: 767px) {.t22.t22 [data-element="Header"] {--font-size: var(--h4-font-size, var(--default-font-size, inherit)); font-size: var(--h4-font-size, var(--default-font-size, inherit)); --line-height: var(--h4-line-height, var(--default-line-height, inherit)); line-height: var(--h4-line-height, var(--default-line-height, inherit)); --letter-spacing: var(--h4-letter-spacing, var(--default-letter-spacing, inherit)); letter-spacing: var(--h4-letter-spacing, var(--default-letter-spacing, inherit)); --font-weight: var(--h4-font-weight, var(--default-font-weight, inherit)); font-weight: var(--h4-font-weight, var(--default-font-weight, inherit)); --font-style: var(--h4-font-style, var(--default-font-style, inherit)); font-style: var(--h4-font-style, var(--default-font-style, inherit)); --text-transform: var(--h4-text-transform, var(--default-text-transform, inherit)); text-transform: var(--h4-text-transform, var(--default-text-transform, inherit)); --font-family: var(--h4-font-family, var(--default-font-family, var(--font, NonexistentFontName))), var(--font, sans-serif); font-family: var(--h4-font-family, var(--default-font-family, var(--font, NonexistentFontName))), var(--font, sans-serif); --bold-font-weight: var(--h4-bold-font-weight, var(--default-bold-font-weight, inherit)); --icon-size: var(--h4-icon-size, var(--default-icon-size, inherit)); margin-top: 0; margin-right: 0; margin-bottom: calc(0.5 * var(--gap)); margin-left: 0;}}
+.t22.t22:not([data-is-hovered]):not([data-variant="danger"]) [data-element="Header"] {color: var(--text-primary-color); --current-color: var(--text-primary-color, text-primary); --current-color-rgb: var(--text-primary-color-rgb);}
+.t22.t22[data-is-hovered]:not([data-variant="danger"]) [data-element="Header"] {color: var(--text-primary-hover-color); --current-color: var(--text-primary-hover-color, text-primary-hover); --current-color-rgb: var(--text-primary-hover-color-rgb);}
+.t22.t22[data-variant="danger"]:not([data-is-hovered]) [data-element="Header"] {color: var(--danger-color); --current-color: var(--danger-color, danger); --current-color-rgb: var(--danger-color-rgb);}
+.t22.t22[data-is-hovered][data-variant="danger"] [data-element="Header"] {color: var(--text-primary-hover-color); --current-color: var(--text-primary-hover-color, text-primary-hover); --current-color-rgb: var(--text-primary-hover-color-rgb);}
+@media (min-width: 1200px) {.t22.t22 [data-element="Content"] {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22 [data-element="Content"] {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
+@media (max-width: 767px) {.t22.t22 [data-element="Content"] {padding-top: calc(0.5 * var(--gap)); padding-right: calc(0.5 * var(--gap)); padding-bottom: calc(0.5 * var(--gap)); padding-left: calc(0.5 * var(--gap));}}
+.t22.t22:not([data-is-highlighted]):not([data-is-disabled]):not([disabled]) [data-element="Content"] {color: var(--text-color); --current-color: var(--text-color, text); --current-color-rgb: var(--text-color-rgb);}
+.t22.t22[data-is-highlighted]:not([data-is-disabled]):not([disabled]) [data-element="Content"] {color: var(--text-highlighted-color); --current-color: var(--text-highlighted-color, text-highlighted); --current-color-rgb: var(--text-highlighted-color-rgb);}
+.t22.t22[data-is-disabled]:not([data-is-highlighted]):not([disabled]) [data-element="Content"] {color: var(--text-color); --current-color: var(--text-color, text); --current-color-rgb: var(--text-color-rgb);}
+.t22.t22[data-is-highlighted][data-is-disabled]:not([disabled]) [data-element="Content"] {color: var(--text-color); --current-color: var(--text-color, text); --current-color-rgb: var(--text-color-rgb);}
+.t22.t22[disabled]:not([data-is-highlighted]):not([data-is-disabled]) [data-element="Content"] {color: var(--text-disabled-color); --current-color: var(--text-disabled-color, text-disabled); --current-color-rgb: var(--text-disabled-color-rgb);}
+.t22.t22[data-is-highlighted][disabled]:not([data-is-disabled]) [data-element="Content"] {color: var(--text-highlighted-color); --current-color: var(--text-highlighted-color, text-highlighted); --current-color-rgb: var(--text-highlighted-color-rgb);}
+.t22.t22[data-is-disabled][disabled]:not([data-is-highlighted]) [data-element="Content"] {color: var(--text-disabled-color); --current-color: var(--text-disabled-color, text-disabled); --current-color-rgb: var(--text-disabled-color-rgb);}
+.t22.t22[data-is-highlighted][data-is-disabled][disabled] [data-element="Content"] {color: var(--text-disabled-color); --current-color: var(--text-disabled-color, text-disabled); --current-color-rgb: var(--text-disabled-color-rgb);}
+@media (min-width: 1200px) {.t22.t22:not([data-is-expanded]) [data-element="Footer"] {display: flex; gap: calc(2 * var(--gap));}}
+@media (min-width: 1200px) {.t22.t22[data-is-expanded] [data-element="Footer"] {display: flex; gap: calc(2 * var(--gap));}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22:not([data-is-expanded]) [data-element="Footer"] {display: flex; gap: var(--gap);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-is-expanded] [data-element="Footer"] {display: flex; gap: var(--gap);}}
+@media (max-width: 767px) {.t22.t22:not([data-is-expanded]) [data-element="Footer"] {display: none;}}
+@media (max-width: 767px) {.t22.t22[data-is-expanded] [data-element="Footer"] {display: flex; gap: calc(0.5 * var(--gap));}}
+@media (max-width: 767px) {.t22.t22:not([data-is-expanded]) [data-element="Footer"] > *:not(:last-child) {margin-bottom: calc(0.5 * var(--gap));}}
+@media (min-width: 1200px) {.t22.t22:not([data-is-compact]) [data-element="Footer"] {padding-top: calc(2 * var(--gap));}}
+@media (min-width: 1200px) {.t22.t22[data-is-compact] [data-element="Footer"] {padding-top: var(--gap);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22:not([data-is-compact]) [data-element="Footer"] {padding-top: var(--gap);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-is-compact] [data-element="Footer"] {padding-top: calc(0.5 * var(--gap));}}
+@media (max-width: 767px) {.t22.t22:not([data-is-compact]) [data-element="Footer"] {padding-top: calc(0.5 * var(--gap));}}
+@media (max-width: 767px) {.t22.t22[data-is-compact] [data-element="Footer"] {padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;}}
+@media (min-width: 1200px) {.t22.t22 {display: grid; gap: calc(3 * var(--gap)); --local-radius: calc(2 * var(--radius)); border-radius: var(--local-radius);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22 {display: flex; gap: calc(2 * var(--gap)); --local-radius: var(--radius); border-radius: var(--local-radius);}}
+@media (max-width: 767px) {.t22.t22 {display: block; --local-radius: calc(0.5 * var(--radius)); border-radius: var(--local-radius);}}
+@media (max-width: 767px) {.t22.t22 > *:not(:last-child) {margin-bottom: var(--gap);}}
+@media (min-width: 1200px) {.t22.t22:not([data-variant="compact"]):not([data-is-pressed]):not([data-is-disabled]):not([data-is-hovered]) {padding-top: calc(4 * var(--gap)); padding-right: calc(4 * var(--gap)); padding-bottom: calc(4 * var(--gap)); padding-left: calc(4 * var(--gap));}}
+@media (min-width: 1200px) {.t22.t22[data-variant="compact"]:not([data-is-pressed]):not([data-is-disabled]):not([data-is-hovered]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
+@media (min-width: 1200px) {.t22.t22[data-is-pressed]:not([data-variant="compact"]):not([data-is-disabled]):not([data-is-hovered]) {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap));}}
+@media (min-width: 1200px) {.t22.t22[data-variant="compact"][data-is-pressed]:not([data-is-disabled]):not([data-is-hovered]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
+@media (min-width: 1200px) {.t22.t22[data-is-disabled]:not([data-variant="compact"]):not([data-is-pressed]):not([data-is-hovered]) {padding-top: calc(4 * var(--gap)); padding-right: calc(4 * var(--gap)); padding-bottom: calc(4 * var(--gap)); padding-left: calc(4 * var(--gap));}}
+@media (min-width: 1200px) {.t22.t22[data-variant="compact"][data-is-disabled]:not([data-is-pressed]):not([data-is-hovered]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
+@media (min-width: 1200px) {.t22.t22[data-is-pressed][data-is-disabled]:not([data-variant="compact"]):not([data-is-hovered]) {padding-top: calc(4 * var(--gap)); padding-right: calc(4 * var(--gap)); padding-bottom: calc(4 * var(--gap)); padding-left: calc(4 * var(--gap));}}
+@media (min-width: 1200px) {.t22.t22[data-variant="compact"][data-is-pressed][data-is-disabled]:not([data-is-hovered]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
+@media (min-width: 1200px) {.t22.t22[data-is-hovered]:not([data-variant="compact"]):not([data-is-pressed]):not([data-is-disabled]) {padding-top: calc(5 * var(--gap)); padding-right: calc(5 * var(--gap)); padding-bottom: calc(5 * var(--gap)); padding-left: calc(5 * var(--gap));}}
+@media (min-width: 1200px) {.t22.t22[data-variant="compact"][data-is-hovered]:not([data-is-pressed]):not([data-is-disabled]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
+@media (min-width: 1200px) {.t22.t22[data-is-pressed][data-is-hovered]:not([data-variant="compact"]):not([data-is-disabled]) {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap));}}
+@media (min-width: 1200px) {.t22.t22[data-variant="compact"][data-is-pressed][data-is-hovered]:not([data-is-disabled]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
+@media (min-width: 1200px) {.t22.t22[data-is-disabled][data-is-hovered]:not([data-variant="compact"]):not([data-is-pressed]) {padding-top: calc(5 * var(--gap)); padding-right: calc(5 * var(--gap)); padding-bottom: calc(5 * var(--gap)); padding-left: calc(5 * var(--gap));}}
+@media (min-width: 1200px) {.t22.t22[data-variant="compact"][data-is-disabled][data-is-hovered]:not([data-is-pressed]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
+@media (min-width: 1200px) {.t22.t22[data-is-pressed][data-is-disabled][data-is-hovered]:not([data-variant="compact"]) {padding-top: calc(5 * var(--gap)); padding-right: calc(5 * var(--gap)); padding-bottom: calc(5 * var(--gap)); padding-left: calc(5 * var(--gap));}}
+@media (min-width: 1200px) {.t22.t22[data-variant="compact"][data-is-pressed][data-is-disabled][data-is-hovered] {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22:not([data-variant="compact"]):not([data-is-pressed]):not([data-is-disabled]):not([data-is-hovered]) {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap));}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-variant="compact"]:not([data-is-pressed]):not([data-is-disabled]):not([data-is-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-is-pressed]:not([data-variant="compact"]):not([data-is-disabled]):not([data-is-hovered]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-variant="compact"][data-is-pressed]:not([data-is-disabled]):not([data-is-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-is-disabled]:not([data-variant="compact"]):not([data-is-pressed]):not([data-is-hovered]) {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap));}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-variant="compact"][data-is-disabled]:not([data-is-pressed]):not([data-is-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-is-pressed][data-is-disabled]:not([data-variant="compact"]):not([data-is-hovered]) {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap));}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-variant="compact"][data-is-pressed][data-is-disabled]:not([data-is-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-is-hovered]:not([data-variant="compact"]):not([data-is-pressed]):not([data-is-disabled]) {padding-top: calc(4 * var(--gap)); padding-right: calc(4 * var(--gap)); padding-bottom: calc(4 * var(--gap)); padding-left: calc(4 * var(--gap));}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-variant="compact"][data-is-hovered]:not([data-is-pressed]):not([data-is-disabled]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-is-pressed][data-is-hovered]:not([data-variant="compact"]):not([data-is-disabled]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-variant="compact"][data-is-pressed][data-is-hovered]:not([data-is-disabled]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-is-disabled][data-is-hovered]:not([data-variant="compact"]):not([data-is-pressed]) {padding-top: calc(4 * var(--gap)); padding-right: calc(4 * var(--gap)); padding-bottom: calc(4 * var(--gap)); padding-left: calc(4 * var(--gap));}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-variant="compact"][data-is-disabled][data-is-hovered]:not([data-is-pressed]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-is-pressed][data-is-disabled][data-is-hovered]:not([data-variant="compact"]) {padding-top: calc(4 * var(--gap)); padding-right: calc(4 * var(--gap)); padding-bottom: calc(4 * var(--gap)); padding-left: calc(4 * var(--gap));}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-variant="compact"][data-is-pressed][data-is-disabled][data-is-hovered] {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
+@media (max-width: 767px) {.t22.t22:not([data-variant="compact"]):not([data-is-pressed]):not([data-is-disabled]):not([data-is-hovered]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
+@media (max-width: 767px) {.t22.t22[data-variant="compact"]:not([data-is-pressed]):not([data-is-disabled]):not([data-is-hovered]) {padding-top: calc(0.5 * var(--gap)); padding-right: calc(0.5 * var(--gap)); padding-bottom: calc(0.5 * var(--gap)); padding-left: calc(0.5 * var(--gap));}}
+@media (max-width: 767px) {.t22.t22[data-is-pressed]:not([data-variant="compact"]):not([data-is-disabled]):not([data-is-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
+@media (max-width: 767px) {.t22.t22[data-variant="compact"][data-is-pressed]:not([data-is-disabled]):not([data-is-hovered]) {padding-top: calc(0.5 * var(--gap)); padding-right: calc(0.5 * var(--gap)); padding-bottom: calc(0.5 * var(--gap)); padding-left: calc(0.5 * var(--gap));}}
+@media (max-width: 767px) {.t22.t22[data-is-disabled]:not([data-variant="compact"]):not([data-is-pressed]):not([data-is-hovered]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
+@media (max-width: 767px) {.t22.t22[data-variant="compact"][data-is-disabled]:not([data-is-pressed]):not([data-is-hovered]) {padding-top: calc(0.5 * var(--gap)); padding-right: calc(0.5 * var(--gap)); padding-bottom: calc(0.5 * var(--gap)); padding-left: calc(0.5 * var(--gap));}}
+@media (max-width: 767px) {.t22.t22[data-is-pressed][data-is-disabled]:not([data-variant="compact"]):not([data-is-hovered]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
+@media (max-width: 767px) {.t22.t22[data-variant="compact"][data-is-pressed][data-is-disabled]:not([data-is-hovered]) {padding-top: calc(0.5 * var(--gap)); padding-right: calc(0.5 * var(--gap)); padding-bottom: calc(0.5 * var(--gap)); padding-left: calc(0.5 * var(--gap));}}
+@media (max-width: 767px) {.t22.t22[data-is-hovered]:not([data-variant="compact"]):not([data-is-pressed]):not([data-is-disabled]) {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap));}}
+@media (max-width: 767px) {.t22.t22[data-variant="compact"][data-is-hovered]:not([data-is-pressed]):not([data-is-disabled]) {padding-top: calc(0.5 * var(--gap)); padding-right: calc(0.5 * var(--gap)); padding-bottom: calc(0.5 * var(--gap)); padding-left: calc(0.5 * var(--gap));}}
+@media (max-width: 767px) {.t22.t22[data-is-pressed][data-is-hovered]:not([data-variant="compact"]):not([data-is-disabled]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
+@media (max-width: 767px) {.t22.t22[data-variant="compact"][data-is-pressed][data-is-hovered]:not([data-is-disabled]) {padding-top: calc(0.5 * var(--gap)); padding-right: calc(0.5 * var(--gap)); padding-bottom: calc(0.5 * var(--gap)); padding-left: calc(0.5 * var(--gap));}}
+@media (max-width: 767px) {.t22.t22[data-is-disabled][data-is-hovered]:not([data-variant="compact"]):not([data-is-pressed]) {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap));}}
+@media (max-width: 767px) {.t22.t22[data-variant="compact"][data-is-disabled][data-is-hovered]:not([data-is-pressed]) {padding-top: calc(0.5 * var(--gap)); padding-right: calc(0.5 * var(--gap)); padding-bottom: calc(0.5 * var(--gap)); padding-left: calc(0.5 * var(--gap));}}
+@media (max-width: 767px) {.t22.t22[data-is-pressed][data-is-disabled][data-is-hovered]:not([data-variant="compact"]) {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap));}}
+@media (max-width: 767px) {.t22.t22[data-variant="compact"][data-is-pressed][data-is-disabled][data-is-hovered] {padding-top: calc(0.5 * var(--gap)); padding-right: calc(0.5 * var(--gap)); padding-bottom: calc(0.5 * var(--gap)); padding-left: calc(0.5 * var(--gap));}}
+@media (min-width: 1200px) {.t22.t22:not([data-is-hovered]):not([data-is-focused]):not([data-is-disabled]):not([data-is-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1200px;}}
+@media (min-width: 1200px) {.t22.t22[data-is-hovered]:not([data-is-focused]):not([data-is-disabled]):not([data-is-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1300px;}}
+@media (min-width: 1200px) {.t22.t22[data-is-focused]:not([data-is-hovered]):not([data-is-disabled]):not([data-is-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1300px;}}
+@media (min-width: 1200px) {.t22.t22[data-is-hovered][data-is-focused]:not([data-is-disabled]):not([data-is-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1300px;}}
+@media (min-width: 1200px) {.t22.t22[data-is-disabled]:not([data-is-hovered]):not([data-is-focused]):not([data-is-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1200px;}}
+@media (min-width: 1200px) {.t22.t22[data-is-hovered][data-is-disabled]:not([data-is-focused]):not([data-is-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1200px;}}
+@media (min-width: 1200px) {.t22.t22[data-is-focused][data-is-disabled]:not([data-is-hovered]):not([data-is-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1200px;}}
+@media (min-width: 1200px) {.t22.t22[data-is-hovered][data-is-focused][data-is-disabled]:not([data-is-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1200px;}}
+@media (min-width: 1200px) {.t22.t22[data-is-expanded]:not([data-is-hovered]):not([data-is-focused]):not([data-is-disabled]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1400px;}}
+@media (min-width: 1200px) {.t22.t22[data-is-hovered][data-is-expanded]:not([data-is-focused]):not([data-is-disabled]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1300px;}}
+@media (min-width: 1200px) {.t22.t22[data-is-focused][data-is-expanded]:not([data-is-hovered]):not([data-is-disabled]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1300px;}}
+@media (min-width: 1200px) {.t22.t22[data-is-hovered][data-is-focused][data-is-expanded]:not([data-is-disabled]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1300px;}}
+@media (min-width: 1200px) {.t22.t22[data-is-disabled][data-is-expanded]:not([data-is-hovered]):not([data-is-focused]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1400px;}}
+@media (min-width: 1200px) {.t22.t22[data-is-hovered][data-is-disabled][data-is-expanded]:not([data-is-focused]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1400px;}}
+@media (min-width: 1200px) {.t22.t22[data-is-focused][data-is-disabled][data-is-expanded]:not([data-is-hovered]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1400px;}}
+@media (min-width: 1200px) {.t22.t22[data-is-hovered][data-is-focused][data-is-disabled][data-is-expanded]:not([data-size="large"]) {width: auto; min-width: initial; max-width: 1400px;}}
+@media (min-width: 1200px) {.t22.t22[data-size="large"]:not([data-is-hovered]):not([data-is-focused]):not([data-is-disabled]):not([data-is-expanded]) {width: auto; min-width: initial; max-width: 1400px;}}
+@media (min-width: 1200px) {.t22.t22[data-is-hovered][data-size="large"]:not([data-is-focused]):not([data-is-disabled]):not([data-is-expanded]) {width: auto; min-width: initial; max-width: 1300px;}}
+@media (min-width: 1200px) {.t22.t22[data-is-focused][data-size="large"]:not([data-is-hovered]):not([data-is-disabled]):not([data-is-expanded]) {width: auto; min-width: initial; max-width: 1300px;}}
+@media (min-width: 1200px) {.t22.t22[data-is-hovered][data-is-focused][data-size="large"]:not([data-is-disabled]):not([data-is-expanded]) {width: auto; min-width: initial; max-width: 1300px;}}
+@media (min-width: 1200px) {.t22.t22[data-is-disabled][data-size="large"]:not([data-is-hovered]):not([data-is-focused]):not([data-is-expanded]) {width: auto; min-width: initial; max-width: 1400px;}}
+@media (min-width: 1200px) {.t22.t22[data-is-hovered][data-is-disabled][data-size="large"]:not([data-is-focused]):not([data-is-expanded]) {width: auto; min-width: initial; max-width: 1400px;}}
+@media (min-width: 1200px) {.t22.t22[data-is-focused][data-is-disabled][data-size="large"]:not([data-is-hovered]):not([data-is-expanded]) {width: auto; min-width: initial; max-width: 1400px;}}
+@media (min-width: 1200px) {.t22.t22[data-is-hovered][data-is-focused][data-is-disabled][data-size="large"]:not([data-is-expanded]) {width: auto; min-width: initial; max-width: 1400px;}}
+@media (min-width: 1200px) {.t22.t22[data-is-expanded][data-size="large"]:not([data-is-hovered]):not([data-is-focused]):not([data-is-disabled]) {width: auto; min-width: initial; max-width: 1400px;}}
+@media (min-width: 1200px) {.t22.t22[data-is-hovered][data-is-expanded][data-size="large"]:not([data-is-focused]):not([data-is-disabled]) {width: auto; min-width: initial; max-width: 1300px;}}
+@media (min-width: 1200px) {.t22.t22[data-is-focused][data-is-expanded][data-size="large"]:not([data-is-hovered]):not([data-is-disabled]) {width: auto; min-width: initial; max-width: 1300px;}}
+@media (min-width: 1200px) {.t22.t22[data-is-hovered][data-is-focused][data-is-expanded][data-size="large"]:not([data-is-disabled]) {width: auto; min-width: initial; max-width: 1300px;}}
+@media (min-width: 1200px) {.t22.t22[data-is-disabled][data-is-expanded][data-size="large"]:not([data-is-hovered]):not([data-is-focused]) {width: auto; min-width: initial; max-width: 1400px;}}
+@media (min-width: 1200px) {.t22.t22[data-is-hovered][data-is-disabled][data-is-expanded][data-size="large"]:not([data-is-focused]) {width: auto; min-width: initial; max-width: 1400px;}}
+@media (min-width: 1200px) {.t22.t22[data-is-focused][data-is-disabled][data-is-expanded][data-size="large"]:not([data-is-hovered]) {width: auto; min-width: initial; max-width: 1400px;}}
+@media (min-width: 1200px) {.t22.t22[data-is-hovered][data-is-focused][data-is-disabled][data-is-expanded][data-size="large"] {width: auto; min-width: initial; max-width: 1400px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22:not([data-is-hovered]):not([data-is-focused]):not([data-is-disabled]):not([data-is-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 800px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-is-hovered]:not([data-is-focused]):not([data-is-disabled]):not([data-is-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 900px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-is-focused]:not([data-is-hovered]):not([data-is-disabled]):not([data-is-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 900px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-is-hovered][data-is-focused]:not([data-is-disabled]):not([data-is-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 900px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-is-disabled]:not([data-is-hovered]):not([data-is-focused]):not([data-is-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 800px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-is-hovered][data-is-disabled]:not([data-is-focused]):not([data-is-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 800px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-is-focused][data-is-disabled]:not([data-is-hovered]):not([data-is-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 800px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-is-hovered][data-is-focused][data-is-disabled]:not([data-is-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 800px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-is-expanded]:not([data-is-hovered]):not([data-is-focused]):not([data-is-disabled]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1000px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-is-hovered][data-is-expanded]:not([data-is-focused]):not([data-is-disabled]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 900px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-is-focused][data-is-expanded]:not([data-is-hovered]):not([data-is-disabled]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 900px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-is-hovered][data-is-focused][data-is-expanded]:not([data-is-disabled]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 900px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-is-disabled][data-is-expanded]:not([data-is-hovered]):not([data-is-focused]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1000px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-is-hovered][data-is-disabled][data-is-expanded]:not([data-is-focused]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1000px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-is-focused][data-is-disabled][data-is-expanded]:not([data-is-hovered]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 1000px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-is-hovered][data-is-focused][data-is-disabled][data-is-expanded]:not([data-size="large"]) {width: auto; min-width: initial; max-width: 1000px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-size="large"]:not([data-is-hovered]):not([data-is-focused]):not([data-is-disabled]):not([data-is-expanded]) {width: auto; min-width: initial; max-width: 1000px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-is-hovered][data-size="large"]:not([data-is-focused]):not([data-is-disabled]):not([data-is-expanded]) {width: auto; min-width: initial; max-width: 900px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-is-focused][data-size="large"]:not([data-is-hovered]):not([data-is-disabled]):not([data-is-expanded]) {width: auto; min-width: initial; max-width: 900px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-is-hovered][data-is-focused][data-size="large"]:not([data-is-disabled]):not([data-is-expanded]) {width: auto; min-width: initial; max-width: 900px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-is-disabled][data-size="large"]:not([data-is-hovered]):not([data-is-focused]):not([data-is-expanded]) {width: auto; min-width: initial; max-width: 1000px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-is-hovered][data-is-disabled][data-size="large"]:not([data-is-focused]):not([data-is-expanded]) {width: auto; min-width: initial; max-width: 1000px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-is-focused][data-is-disabled][data-size="large"]:not([data-is-hovered]):not([data-is-expanded]) {width: auto; min-width: initial; max-width: 1000px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-is-hovered][data-is-focused][data-is-disabled][data-size="large"]:not([data-is-expanded]) {width: auto; min-width: initial; max-width: 1000px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-is-expanded][data-size="large"]:not([data-is-hovered]):not([data-is-focused]):not([data-is-disabled]) {width: auto; min-width: initial; max-width: 1000px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-is-hovered][data-is-expanded][data-size="large"]:not([data-is-focused]):not([data-is-disabled]) {width: auto; min-width: initial; max-width: 900px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-is-focused][data-is-expanded][data-size="large"]:not([data-is-hovered]):not([data-is-disabled]) {width: auto; min-width: initial; max-width: 900px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-is-hovered][data-is-focused][data-is-expanded][data-size="large"]:not([data-is-disabled]) {width: auto; min-width: initial; max-width: 900px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-is-disabled][data-is-expanded][data-size="large"]:not([data-is-hovered]):not([data-is-focused]) {width: auto; min-width: initial; max-width: 1000px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-is-hovered][data-is-disabled][data-is-expanded][data-size="large"]:not([data-is-focused]) {width: auto; min-width: initial; max-width: 1000px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-is-focused][data-is-disabled][data-is-expanded][data-size="large"]:not([data-is-hovered]) {width: auto; min-width: initial; max-width: 1000px;}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-is-hovered][data-is-focused][data-is-disabled][data-is-expanded][data-size="large"] {width: auto; min-width: initial; max-width: 1000px;}}
+@media (max-width: 767px) {.t22.t22:not([data-is-hovered]):not([data-is-focused]):not([data-is-disabled]):not([data-is-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t22.t22[data-is-hovered]:not([data-is-focused]):not([data-is-disabled]):not([data-is-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t22.t22[data-is-focused]:not([data-is-hovered]):not([data-is-disabled]):not([data-is-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t22.t22[data-is-hovered][data-is-focused]:not([data-is-disabled]):not([data-is-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t22.t22[data-is-disabled]:not([data-is-hovered]):not([data-is-focused]):not([data-is-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t22.t22[data-is-hovered][data-is-disabled]:not([data-is-focused]):not([data-is-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t22.t22[data-is-focused][data-is-disabled]:not([data-is-hovered]):not([data-is-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t22.t22[data-is-hovered][data-is-focused][data-is-disabled]:not([data-is-expanded]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t22.t22[data-is-expanded]:not([data-is-hovered]):not([data-is-focused]):not([data-is-disabled]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t22.t22[data-is-hovered][data-is-expanded]:not([data-is-focused]):not([data-is-disabled]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t22.t22[data-is-focused][data-is-expanded]:not([data-is-hovered]):not([data-is-disabled]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t22.t22[data-is-hovered][data-is-focused][data-is-expanded]:not([data-is-disabled]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t22.t22[data-is-disabled][data-is-expanded]:not([data-is-hovered]):not([data-is-focused]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t22.t22[data-is-hovered][data-is-disabled][data-is-expanded]:not([data-is-focused]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t22.t22[data-is-focused][data-is-disabled][data-is-expanded]:not([data-is-hovered]):not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t22.t22[data-is-hovered][data-is-focused][data-is-disabled][data-is-expanded]:not([data-size="large"]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t22.t22[data-size="large"]:not([data-is-hovered]):not([data-is-focused]):not([data-is-disabled]):not([data-is-expanded]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t22.t22[data-is-hovered][data-size="large"]:not([data-is-focused]):not([data-is-disabled]):not([data-is-expanded]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t22.t22[data-is-focused][data-size="large"]:not([data-is-hovered]):not([data-is-disabled]):not([data-is-expanded]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t22.t22[data-is-hovered][data-is-focused][data-size="large"]:not([data-is-disabled]):not([data-is-expanded]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t22.t22[data-is-disabled][data-size="large"]:not([data-is-hovered]):not([data-is-focused]):not([data-is-expanded]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t22.t22[data-is-hovered][data-is-disabled][data-size="large"]:not([data-is-focused]):not([data-is-expanded]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t22.t22[data-is-focused][data-is-disabled][data-size="large"]:not([data-is-hovered]):not([data-is-expanded]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t22.t22[data-is-hovered][data-is-focused][data-is-disabled][data-size="large"]:not([data-is-expanded]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t22.t22[data-is-expanded][data-size="large"]:not([data-is-hovered]):not([data-is-focused]):not([data-is-disabled]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t22.t22[data-is-hovered][data-is-expanded][data-size="large"]:not([data-is-focused]):not([data-is-disabled]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t22.t22[data-is-focused][data-is-expanded][data-size="large"]:not([data-is-hovered]):not([data-is-disabled]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t22.t22[data-is-hovered][data-is-focused][data-is-expanded][data-size="large"]:not([data-is-disabled]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t22.t22[data-is-disabled][data-is-expanded][data-size="large"]:not([data-is-hovered]):not([data-is-focused]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t22.t22[data-is-hovered][data-is-disabled][data-is-expanded][data-size="large"]:not([data-is-focused]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t22.t22[data-is-focused][data-is-disabled][data-is-expanded][data-size="large"]:not([data-is-hovered]) {width: auto; min-width: initial; max-width: 100%;}}
+@media (max-width: 767px) {.t22.t22[data-is-hovered][data-is-focused][data-is-disabled][data-is-expanded][data-size="large"] {width: auto; min-width: initial; max-width: 100%;}}
+.t22.t22:not([data-variant="success"]):not([data-is-disabled]):not([data-variant="danger"]):not([data-is-hovered]):not([disabled]):not([data-is-pressed]) {background-color: var(--surface-color);}
+.t22.t22:not([data-variant="success"]):not([data-is-disabled]):not([data-variant="danger"]):not([data-is-hovered]):not([disabled]):not([data-is-pressed])>* {--context-fill-color: var(--surface-color); --context-fill-color-rgb: var(--surface-color-rgb);}
+.t22.t22[data-variant="success"]:not([data-is-disabled]):not([data-is-hovered]):not([disabled]):not([data-is-pressed]) {background-color: var(--success-color);}
+.t22.t22[data-variant="success"]:not([data-is-disabled]):not([data-is-hovered]):not([disabled]):not([data-is-pressed])>* {--context-fill-color: var(--success-color); --context-fill-color-rgb: var(--success-color-rgb);}
+.t22.t22[data-is-disabled]:not([data-variant="success"]):not([data-variant="danger"]):not([data-is-hovered]):not([disabled]):not([data-is-pressed]) {background-color: var(--surface-color);}
+.t22.t22[data-is-disabled]:not([data-variant="success"]):not([data-variant="danger"]):not([data-is-hovered]):not([disabled]):not([data-is-pressed])>* {--context-fill-color: var(--surface-color); --context-fill-color-rgb: var(--surface-color-rgb);}
+.t22.t22[data-variant="success"][data-is-disabled]:not([data-is-hovered]):not([disabled]):not([data-is-pressed]) {background-color: var(--surface-color);}
+.t22.t22[data-variant="success"][data-is-disabled]:not([data-is-hovered]):not([disabled]):not([data-is-pressed])>* {--context-fill-color: var(--surface-color); --context-fill-color-rgb: var(--surface-color-rgb);}
+.t22.t22[data-variant="danger"]:not([data-is-disabled]):not([data-is-hovered]):not([disabled]):not([data-is-pressed]) {background-color: var(--surface-color);}
+.t22.t22[data-variant="danger"]:not([data-is-disabled]):not([data-is-hovered]):not([disabled]):not([data-is-pressed])>* {--context-fill-color: var(--surface-color); --context-fill-color-rgb: var(--surface-color-rgb);}
+.t22.t22[data-is-disabled][data-variant="danger"]:not([data-is-hovered]):not([disabled]):not([data-is-pressed]) {background-color: var(--surface-color);}
+.t22.t22[data-is-disabled][data-variant="danger"]:not([data-is-hovered]):not([disabled]):not([data-is-pressed])>* {--context-fill-color: var(--surface-color); --context-fill-color-rgb: var(--surface-color-rgb);}
+.t22.t22[data-is-hovered]:not([data-variant="success"]):not([data-is-disabled]):not([data-variant="danger"]):not([disabled]):not([data-is-pressed]) {background-color: var(--surface-hover-color);}
+.t22.t22[data-is-hovered]:not([data-variant="success"]):not([data-is-disabled]):not([data-variant="danger"]):not([disabled]):not([data-is-pressed])>* {--context-fill-color: var(--surface-hover-color); --context-fill-color-rgb: var(--surface-hover-color-rgb);}
+.t22.t22[data-variant="success"][data-is-hovered]:not([data-is-disabled]):not([disabled]):not([data-is-pressed]) {background-color: var(--success-color);}
+.t22.t22[data-variant="success"][data-is-hovered]:not([data-is-disabled]):not([disabled]):not([data-is-pressed])>* {--context-fill-color: var(--success-color); --context-fill-color-rgb: var(--success-color-rgb);}
+.t22.t22[data-is-disabled][data-is-hovered]:not([data-variant="success"]):not([data-variant="danger"]):not([disabled]):not([data-is-pressed]) {background-color: var(--surface-hover-color);}
+.t22.t22[data-is-disabled][data-is-hovered]:not([data-variant="success"]):not([data-variant="danger"]):not([disabled]):not([data-is-pressed])>* {--context-fill-color: var(--surface-hover-color); --context-fill-color-rgb: var(--surface-hover-color-rgb);}
+.t22.t22[data-variant="success"][data-is-disabled][data-is-hovered]:not([disabled]):not([data-is-pressed]) {background-color: var(--surface-hover-color);}
+.t22.t22[data-variant="success"][data-is-disabled][data-is-hovered]:not([disabled]):not([data-is-pressed])>* {--context-fill-color: var(--surface-hover-color); --context-fill-color-rgb: var(--surface-hover-color-rgb);}
+.t22.t22[data-variant="danger"][data-is-hovered]:not([data-is-disabled]):not([disabled]):not([data-is-pressed]) {background-color: var(--danger-hover-color);}
+.t22.t22[data-variant="danger"][data-is-hovered]:not([data-is-disabled]):not([disabled]):not([data-is-pressed])>* {--context-fill-color: var(--danger-hover-color); --context-fill-color-rgb: var(--danger-hover-color-rgb);}
+.t22.t22[data-is-disabled][data-variant="danger"][data-is-hovered]:not([disabled]):not([data-is-pressed]) {background-color: var(--danger-hover-color);}
+.t22.t22[data-is-disabled][data-variant="danger"][data-is-hovered]:not([disabled]):not([data-is-pressed])>* {--context-fill-color: var(--danger-hover-color); --context-fill-color-rgb: var(--danger-hover-color-rgb);}
+.t22.t22[disabled]:not([data-variant="success"]):not([data-is-disabled]):not([data-variant="danger"]):not([data-is-hovered]):not([data-is-pressed]) {background-color: var(--surface-disabled-color);}
+.t22.t22[disabled]:not([data-variant="success"]):not([data-is-disabled]):not([data-variant="danger"]):not([data-is-hovered]):not([data-is-pressed])>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
+.t22.t22[data-variant="success"][disabled]:not([data-is-disabled]):not([data-is-hovered]):not([data-is-pressed]) {background-color: var(--success-color);}
+.t22.t22[data-variant="success"][disabled]:not([data-is-disabled]):not([data-is-hovered]):not([data-is-pressed])>* {--context-fill-color: var(--success-color); --context-fill-color-rgb: var(--success-color-rgb);}
+.t22.t22[data-is-disabled][disabled]:not([data-variant="success"]):not([data-variant="danger"]):not([data-is-hovered]):not([data-is-pressed]) {background-color: var(--surface-disabled-color);}
+.t22.t22[data-is-disabled][disabled]:not([data-variant="success"]):not([data-variant="danger"]):not([data-is-hovered]):not([data-is-pressed])>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
+.t22.t22[data-variant="success"][data-is-disabled][disabled]:not([data-is-hovered]):not([data-is-pressed]) {background-color: var(--surface-disabled-color);}
+.t22.t22[data-variant="success"][data-is-disabled][disabled]:not([data-is-hovered]):not([data-is-pressed])>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
+.t22.t22[data-variant="danger"][disabled]:not([data-is-disabled]):not([data-is-hovered]):not([data-is-pressed]) {background-color: var(--surface-disabled-color);}
+.t22.t22[data-variant="danger"][disabled]:not([data-is-disabled]):not([data-is-hovered]):not([data-is-pressed])>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
+.t22.t22[data-is-disabled][data-variant="danger"][disabled]:not([data-is-hovered]):not([data-is-pressed]) {background-color: var(--surface-disabled-color);}
+.t22.t22[data-is-disabled][data-variant="danger"][disabled]:not([data-is-hovered]):not([data-is-pressed])>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
+.t22.t22[data-is-hovered][disabled]:not([data-variant="success"]):not([data-is-disabled]):not([data-variant="danger"]):not([data-is-pressed]) {background-color: var(--surface-disabled-color);}
+.t22.t22[data-is-hovered][disabled]:not([data-variant="success"]):not([data-is-disabled]):not([data-variant="danger"]):not([data-is-pressed])>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
+.t22.t22[data-variant="success"][data-is-hovered][disabled]:not([data-is-disabled]):not([data-is-pressed]) {background-color: var(--success-color);}
+.t22.t22[data-variant="success"][data-is-hovered][disabled]:not([data-is-disabled]):not([data-is-pressed])>* {--context-fill-color: var(--success-color); --context-fill-color-rgb: var(--success-color-rgb);}
+.t22.t22[data-is-disabled][data-is-hovered][disabled]:not([data-variant="success"]):not([data-variant="danger"]):not([data-is-pressed]) {background-color: var(--surface-disabled-color);}
+.t22.t22[data-is-disabled][data-is-hovered][disabled]:not([data-variant="success"]):not([data-variant="danger"]):not([data-is-pressed])>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
+.t22.t22[data-variant="success"][data-is-disabled][data-is-hovered][disabled]:not([data-is-pressed]) {background-color: var(--surface-disabled-color);}
+.t22.t22[data-variant="success"][data-is-disabled][data-is-hovered][disabled]:not([data-is-pressed])>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
+.t22.t22[data-variant="danger"][data-is-hovered][disabled]:not([data-is-disabled]):not([data-is-pressed]) {background-color: var(--danger-hover-color);}
+.t22.t22[data-variant="danger"][data-is-hovered][disabled]:not([data-is-disabled]):not([data-is-pressed])>* {--context-fill-color: var(--danger-hover-color); --context-fill-color-rgb: var(--danger-hover-color-rgb);}
+.t22.t22[data-is-disabled][data-variant="danger"][data-is-hovered][disabled]:not([data-is-pressed]) {background-color: var(--danger-hover-color);}
+.t22.t22[data-is-disabled][data-variant="danger"][data-is-hovered][disabled]:not([data-is-pressed])>* {--context-fill-color: var(--danger-hover-color); --context-fill-color-rgb: var(--danger-hover-color-rgb);}
+.t22.t22[data-is-pressed]:not([data-variant="success"]):not([data-is-disabled]):not([data-variant="danger"]):not([data-is-hovered]):not([disabled]) {background-color: var(--surface-pressed-color);}
+.t22.t22[data-is-pressed]:not([data-variant="success"]):not([data-is-disabled]):not([data-variant="danger"]):not([data-is-hovered]):not([disabled])>* {--context-fill-color: var(--surface-pressed-color); --context-fill-color-rgb: var(--surface-pressed-color-rgb);}
+.t22.t22[data-variant="success"][data-is-pressed]:not([data-is-disabled]):not([data-is-hovered]):not([disabled]) {background-color: var(--success-color);}
+.t22.t22[data-variant="success"][data-is-pressed]:not([data-is-disabled]):not([data-is-hovered]):not([disabled])>* {--context-fill-color: var(--success-color); --context-fill-color-rgb: var(--success-color-rgb);}
+.t22.t22[data-is-disabled][data-is-pressed]:not([data-variant="success"]):not([data-variant="danger"]):not([data-is-hovered]):not([disabled]) {background-color: var(--surface-pressed-color);}
+.t22.t22[data-is-disabled][data-is-pressed]:not([data-variant="success"]):not([data-variant="danger"]):not([data-is-hovered]):not([disabled])>* {--context-fill-color: var(--surface-pressed-color); --context-fill-color-rgb: var(--surface-pressed-color-rgb);}
+.t22.t22[data-variant="success"][data-is-disabled][data-is-pressed]:not([data-is-hovered]):not([disabled]) {background-color: var(--surface-pressed-color);}
+.t22.t22[data-variant="success"][data-is-disabled][data-is-pressed]:not([data-is-hovered]):not([disabled])>* {--context-fill-color: var(--surface-pressed-color); --context-fill-color-rgb: var(--surface-pressed-color-rgb);}
+.t22.t22[data-variant="danger"][data-is-pressed]:not([data-is-disabled]):not([data-is-hovered]):not([disabled]) {background-color: var(--surface-pressed-color);}
+.t22.t22[data-variant="danger"][data-is-pressed]:not([data-is-disabled]):not([data-is-hovered]):not([disabled])>* {--context-fill-color: var(--surface-pressed-color); --context-fill-color-rgb: var(--surface-pressed-color-rgb);}
+.t22.t22[data-is-disabled][data-variant="danger"][data-is-pressed]:not([data-is-hovered]):not([disabled]) {background-color: var(--surface-pressed-color);}
+.t22.t22[data-is-disabled][data-variant="danger"][data-is-pressed]:not([data-is-hovered]):not([disabled])>* {--context-fill-color: var(--surface-pressed-color); --context-fill-color-rgb: var(--surface-pressed-color-rgb);}
+.t22.t22[data-is-hovered][data-is-pressed]:not([data-variant="success"]):not([data-is-disabled]):not([data-variant="danger"]):not([disabled]) {background-color: var(--surface-pressed-color);}
+.t22.t22[data-is-hovered][data-is-pressed]:not([data-variant="success"]):not([data-is-disabled]):not([data-variant="danger"]):not([disabled])>* {--context-fill-color: var(--surface-pressed-color); --context-fill-color-rgb: var(--surface-pressed-color-rgb);}
+.t22.t22[data-variant="success"][data-is-hovered][data-is-pressed]:not([data-is-disabled]):not([disabled]) {background-color: var(--success-color);}
+.t22.t22[data-variant="success"][data-is-hovered][data-is-pressed]:not([data-is-disabled]):not([disabled])>* {--context-fill-color: var(--success-color); --context-fill-color-rgb: var(--success-color-rgb);}
+.t22.t22[data-is-disabled][data-is-hovered][data-is-pressed]:not([data-variant="success"]):not([data-variant="danger"]):not([disabled]) {background-color: var(--surface-pressed-color);}
+.t22.t22[data-is-disabled][data-is-hovered][data-is-pressed]:not([data-variant="success"]):not([data-variant="danger"]):not([disabled])>* {--context-fill-color: var(--surface-pressed-color); --context-fill-color-rgb: var(--surface-pressed-color-rgb);}
+.t22.t22[data-variant="success"][data-is-disabled][data-is-hovered][data-is-pressed]:not([disabled]) {background-color: var(--surface-pressed-color);}
+.t22.t22[data-variant="success"][data-is-disabled][data-is-hovered][data-is-pressed]:not([disabled])>* {--context-fill-color: var(--surface-pressed-color); --context-fill-color-rgb: var(--surface-pressed-color-rgb);}
+.t22.t22[data-variant="danger"][data-is-hovered][data-is-pressed]:not([data-is-disabled]):not([disabled]) {background-color: var(--danger-hover-color);}
+.t22.t22[data-variant="danger"][data-is-hovered][data-is-pressed]:not([data-is-disabled]):not([disabled])>* {--context-fill-color: var(--danger-hover-color); --context-fill-color-rgb: var(--danger-hover-color-rgb);}
+.t22.t22[data-is-disabled][data-variant="danger"][data-is-hovered][data-is-pressed]:not([disabled]) {background-color: var(--danger-hover-color);}
+.t22.t22[data-is-disabled][data-variant="danger"][data-is-hovered][data-is-pressed]:not([disabled])>* {--context-fill-color: var(--danger-hover-color); --context-fill-color-rgb: var(--danger-hover-color-rgb);}
+.t22.t22[disabled][data-is-pressed]:not([data-variant="success"]):not([data-is-disabled]):not([data-variant="danger"]):not([data-is-hovered]) {background-color: var(--surface-disabled-color);}
+.t22.t22[disabled][data-is-pressed]:not([data-variant="success"]):not([data-is-disabled]):not([data-variant="danger"]):not([data-is-hovered])>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
+.t22.t22[data-variant="success"][disabled][data-is-pressed]:not([data-is-disabled]):not([data-is-hovered]) {background-color: var(--success-color);}
+.t22.t22[data-variant="success"][disabled][data-is-pressed]:not([data-is-disabled]):not([data-is-hovered])>* {--context-fill-color: var(--success-color); --context-fill-color-rgb: var(--success-color-rgb);}
+.t22.t22[data-is-disabled][disabled][data-is-pressed]:not([data-variant="success"]):not([data-variant="danger"]):not([data-is-hovered]) {background-color: var(--surface-disabled-color);}
+.t22.t22[data-is-disabled][disabled][data-is-pressed]:not([data-variant="success"]):not([data-variant="danger"]):not([data-is-hovered])>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
+.t22.t22[data-variant="success"][data-is-disabled][disabled][data-is-pressed]:not([data-is-hovered]) {background-color: var(--surface-disabled-color);}
+.t22.t22[data-variant="success"][data-is-disabled][disabled][data-is-pressed]:not([data-is-hovered])>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
+.t22.t22[data-variant="danger"][disabled][data-is-pressed]:not([data-is-disabled]):not([data-is-hovered]) {background-color: var(--surface-disabled-color);}
+.t22.t22[data-variant="danger"][disabled][data-is-pressed]:not([data-is-disabled]):not([data-is-hovered])>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
+.t22.t22[data-is-disabled][data-variant="danger"][disabled][data-is-pressed]:not([data-is-hovered]) {background-color: var(--surface-disabled-color);}
+.t22.t22[data-is-disabled][data-variant="danger"][disabled][data-is-pressed]:not([data-is-hovered])>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
+.t22.t22[data-is-hovered][disabled][data-is-pressed]:not([data-variant="success"]):not([data-is-disabled]):not([data-variant="danger"]) {background-color: var(--surface-disabled-color);}
+.t22.t22[data-is-hovered][disabled][data-is-pressed]:not([data-variant="success"]):not([data-is-disabled]):not([data-variant="danger"])>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
+.t22.t22[data-variant="success"][data-is-hovered][disabled][data-is-pressed]:not([data-is-disabled]) {background-color: var(--success-color);}
+.t22.t22[data-variant="success"][data-is-hovered][disabled][data-is-pressed]:not([data-is-disabled])>* {--context-fill-color: var(--success-color); --context-fill-color-rgb: var(--success-color-rgb);}
+.t22.t22[data-is-disabled][data-is-hovered][disabled][data-is-pressed]:not([data-variant="success"]):not([data-variant="danger"]) {background-color: var(--surface-disabled-color);}
+.t22.t22[data-is-disabled][data-is-hovered][disabled][data-is-pressed]:not([data-variant="success"]):not([data-variant="danger"])>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
+.t22.t22[data-variant="success"][data-is-disabled][data-is-hovered][disabled][data-is-pressed] {background-color: var(--surface-disabled-color);}
+.t22.t22[data-variant="success"][data-is-disabled][data-is-hovered][disabled][data-is-pressed]>* {--context-fill-color: var(--surface-disabled-color); --context-fill-color-rgb: var(--surface-disabled-color-rgb);}
+.t22.t22[data-variant="danger"][data-is-hovered][disabled][data-is-pressed]:not([data-is-disabled]) {background-color: var(--danger-hover-color);}
+.t22.t22[data-variant="danger"][data-is-hovered][disabled][data-is-pressed]:not([data-is-disabled])>* {--context-fill-color: var(--danger-hover-color); --context-fill-color-rgb: var(--danger-hover-color-rgb);}
+.t22.t22[data-is-disabled][data-variant="danger"][data-is-hovered][disabled][data-is-pressed] {background-color: var(--danger-hover-color);}
+.t22.t22[data-is-disabled][data-variant="danger"][data-is-hovered][disabled][data-is-pressed]>* {--context-fill-color: var(--danger-hover-color); --context-fill-color-rgb: var(--danger-hover-color-rgb);}
+@media (min-width: 1200px) {.t22.t22:not([data-variant="borderless"]):not([data-is-hovered]):not([data-is-error]):not([data-is-focused]) {border: calc(2 * var(--border-width)) solid var(--border-color);}}
+@media (min-width: 1200px) {.t22.t22[data-variant="borderless"]:not([data-is-hovered]):not([data-is-error]):not([data-is-focused]) {border: calc(2 * var(--border-width)) solid var(--border-color);}}
+@media (min-width: 1200px) {.t22.t22[data-is-hovered]:not([data-variant="borderless"]):not([data-is-error]):not([data-is-focused]) {border: calc(2 * var(--border-width)) solid var(--border-hover-color);}}
+@media (min-width: 1200px) {.t22.t22[data-variant="borderless"][data-is-hovered]:not([data-is-error]):not([data-is-focused]) {border: calc(2 * var(--border-width)) solid var(--border-color);}}
+@media (min-width: 1200px) {.t22.t22[data-is-error]:not([data-variant="borderless"]):not([data-is-hovered]):not([data-is-focused]) {border: calc(2 * var(--border-width)) solid var(--border-color);}}
+@media (min-width: 1200px) {.t22.t22[data-variant="borderless"][data-is-error]:not([data-is-hovered]):not([data-is-focused]) {border: calc(2 * var(--border-width)) solid var(--border-color);}}
+@media (min-width: 1200px) {.t22.t22[data-is-hovered][data-is-error]:not([data-variant="borderless"]):not([data-is-focused]) {border: calc(2 * var(--border-width)) solid var(--border-hover-color);}}
+@media (min-width: 1200px) {.t22.t22[data-variant="borderless"][data-is-hovered][data-is-error]:not([data-is-focused]) {border: calc(2 * var(--border-width)) solid var(--border-color);}}
+@media (min-width: 1200px) {.t22.t22[data-is-focused]:not([data-variant="borderless"]):not([data-is-hovered]):not([data-is-error]) {border: calc(3 * var(--border-width)) solid var(--primary-color);}}
+@media (min-width: 1200px) {.t22.t22[data-variant="borderless"][data-is-focused]:not([data-is-hovered]):not([data-is-error]) {border: calc(3 * var(--border-width)) solid var(--primary-color);}}
+@media (min-width: 1200px) {.t22.t22[data-is-hovered][data-is-focused]:not([data-variant="borderless"]):not([data-is-error]) {border: calc(2 * var(--border-width)) solid var(--border-hover-color);}}
+@media (min-width: 1200px) {.t22.t22[data-variant="borderless"][data-is-hovered][data-is-focused]:not([data-is-error]) {border: calc(3 * var(--border-width)) solid var(--primary-color);}}
+@media (min-width: 1200px) {.t22.t22[data-is-error][data-is-focused]:not([data-variant="borderless"]):not([data-is-hovered]) {border: calc(3 * var(--border-width)) solid var(--danger-color);}}
+@media (min-width: 1200px) {.t22.t22[data-variant="borderless"][data-is-error][data-is-focused]:not([data-is-hovered]) {border: calc(3 * var(--border-width)) solid var(--danger-color);}}
+@media (min-width: 1200px) {.t22.t22[data-is-hovered][data-is-error][data-is-focused]:not([data-variant="borderless"]) {border: calc(2 * var(--border-width)) solid var(--border-hover-color);}}
+@media (min-width: 1200px) {.t22.t22[data-variant="borderless"][data-is-hovered][data-is-error][data-is-focused] {border: calc(3 * var(--border-width)) solid var(--danger-color);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22:not([data-variant="borderless"]):not([data-is-hovered]):not([data-is-error]):not([data-is-focused]) {border: var(--border-width) solid var(--border-color);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-variant="borderless"]:not([data-is-hovered]):not([data-is-error]):not([data-is-focused]) {border: var(--border-width) solid var(--border-color);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-is-hovered]:not([data-variant="borderless"]):not([data-is-error]):not([data-is-focused]) {border: var(--border-width) solid var(--border-hover-color);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-variant="borderless"][data-is-hovered]:not([data-is-error]):not([data-is-focused]) {border: var(--border-width) solid var(--border-color);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-is-error]:not([data-variant="borderless"]):not([data-is-hovered]):not([data-is-focused]) {border: var(--border-width) solid var(--border-color);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-variant="borderless"][data-is-error]:not([data-is-hovered]):not([data-is-focused]) {border: var(--border-width) solid var(--border-color);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-is-hovered][data-is-error]:not([data-variant="borderless"]):not([data-is-focused]) {border: var(--border-width) solid var(--border-hover-color);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-variant="borderless"][data-is-hovered][data-is-error]:not([data-is-focused]) {border: var(--border-width) solid var(--border-color);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-is-focused]:not([data-variant="borderless"]):not([data-is-hovered]):not([data-is-error]) {border: calc(2 * var(--border-width)) solid var(--primary-color);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-variant="borderless"][data-is-focused]:not([data-is-hovered]):not([data-is-error]) {border: calc(2 * var(--border-width)) solid var(--primary-color);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-is-hovered][data-is-focused]:not([data-variant="borderless"]):not([data-is-error]) {border: var(--border-width) solid var(--border-hover-color);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-variant="borderless"][data-is-hovered][data-is-focused]:not([data-is-error]) {border: calc(2 * var(--border-width)) solid var(--primary-color);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-is-error][data-is-focused]:not([data-variant="borderless"]):not([data-is-hovered]) {border: calc(2 * var(--border-width)) solid var(--danger-color);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-variant="borderless"][data-is-error][data-is-focused]:not([data-is-hovered]) {border: calc(2 * var(--border-width)) solid var(--danger-color);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-is-hovered][data-is-error][data-is-focused]:not([data-variant="borderless"]) {border: var(--border-width) solid var(--border-hover-color);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22[data-variant="borderless"][data-is-hovered][data-is-error][data-is-focused] {border: calc(2 * var(--border-width)) solid var(--danger-color);}}
+@media (max-width: 767px) {.t22.t22:not([data-variant="borderless"]):not([data-is-hovered]):not([data-is-error]):not([data-is-focused]) {border: var(--border-width) none var(--border-color);}}
+@media (max-width: 767px) {.t22.t22[data-variant="borderless"]:not([data-is-hovered]):not([data-is-error]):not([data-is-focused]) {border: var(--border-width) none var(--border-color);}}
+@media (max-width: 767px) {.t22.t22[data-is-hovered]:not([data-variant="borderless"]):not([data-is-error]):not([data-is-focused]) {border: var(--border-width) solid var(--border-hover-color);}}
+@media (max-width: 767px) {.t22.t22[data-variant="borderless"][data-is-hovered]:not([data-is-error]):not([data-is-focused]) {border: var(--border-width) none var(--border-color);}}
+@media (max-width: 767px) {.t22.t22[data-is-error]:not([data-variant="borderless"]):not([data-is-hovered]):not([data-is-focused]) {border: var(--border-width) none var(--border-color);}}
+@media (max-width: 767px) {.t22.t22[data-variant="borderless"][data-is-error]:not([data-is-hovered]):not([data-is-focused]) {border: var(--border-width) none var(--border-color);}}
+@media (max-width: 767px) {.t22.t22[data-is-hovered][data-is-error]:not([data-variant="borderless"]):not([data-is-focused]) {border: var(--border-width) solid var(--border-hover-color);}}
+@media (max-width: 767px) {.t22.t22[data-variant="borderless"][data-is-hovered][data-is-error]:not([data-is-focused]) {border: var(--border-width) none var(--border-color);}}
+@media (max-width: 767px) {.t22.t22[data-is-focused]:not([data-variant="borderless"]):not([data-is-hovered]):not([data-is-error]) {border: var(--border-width) solid var(--primary-color);}}
+@media (max-width: 767px) {.t22.t22[data-variant="borderless"][data-is-focused]:not([data-is-hovered]):not([data-is-error]) {border: var(--border-width) solid var(--primary-color);}}
+@media (max-width: 767px) {.t22.t22[data-is-hovered][data-is-focused]:not([data-variant="borderless"]):not([data-is-error]) {border: var(--border-width) solid var(--border-hover-color);}}
+@media (max-width: 767px) {.t22.t22[data-variant="borderless"][data-is-hovered][data-is-focused]:not([data-is-error]) {border: var(--border-width) solid var(--primary-color);}}
+@media (max-width: 767px) {.t22.t22[data-is-error][data-is-focused]:not([data-variant="borderless"]):not([data-is-hovered]) {border: var(--border-width) solid var(--danger-color);}}
+@media (max-width: 767px) {.t22.t22[data-variant="borderless"][data-is-error][data-is-focused]:not([data-is-hovered]) {border: var(--border-width) solid var(--danger-color);}}
+@media (max-width: 767px) {.t22.t22[data-is-hovered][data-is-error][data-is-focused]:not([data-variant="borderless"]) {border: var(--border-width) solid var(--border-hover-color);}}
+@media (max-width: 767px) {.t22.t22[data-variant="borderless"][data-is-hovered][data-is-error][data-is-focused] {border: var(--border-width) solid var(--danger-color);}}
+@media (min-width: 1200px) {.t22.t22>* {--context-radius: calc(2 * var(--radius));}}
+@media (min-width: 768px) and (max-width: 1199px) {.t22.t22>* {--context-radius: var(--radius);}}
+@media (max-width: 767px) {.t22.t22>* {--context-radius: calc(0.5 * var(--radius));}}"
 `;
 
 exports[`tasty() API should handle state-map-of-arrays pattern 1`] = `
-".t21.t21 {display: block;}
-@media (min-width: 1200px) {.t21.t21:not([data-variant="compact"]):not([data-is-hovered]) {padding-top: calc(4 * var(--gap)); padding-right: calc(4 * var(--gap)); padding-bottom: calc(4 * var(--gap)); padding-left: calc(4 * var(--gap));}}
-@media (min-width: 1200px) {.t21.t21[data-variant="compact"]:not([data-is-hovered]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
-@media (min-width: 1200px) {.t21.t21[data-is-hovered]:not([data-variant="compact"]) {padding-top: calc(6 * var(--gap)); padding-right: calc(6 * var(--gap)); padding-bottom: calc(6 * var(--gap)); padding-left: calc(6 * var(--gap));}}
-@media (min-width: 1200px) {.t21.t21[data-variant="compact"][data-is-hovered] {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
-@media (min-width: 768px) and (max-width: 1199px) {.t21.t21:not([data-variant="compact"]):not([data-is-hovered]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
-@media (min-width: 768px) and (max-width: 1199px) {.t21.t21[data-variant="compact"]:not([data-is-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t21.t21[data-is-hovered]:not([data-variant="compact"]) {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap));}}
-@media (min-width: 768px) and (max-width: 1199px) {.t21.t21[data-variant="compact"][data-is-hovered] {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
-@media (max-width: 767px) {.t21.t21:not([data-variant="compact"]):not([data-is-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
-@media (max-width: 767px) {.t21.t21[data-variant="compact"]:not([data-is-hovered]) {padding-top: calc(0.5 * var(--gap)); padding-right: calc(0.5 * var(--gap)); padding-bottom: calc(0.5 * var(--gap)); padding-left: calc(0.5 * var(--gap));}}
-@media (max-width: 767px) {.t21.t21[data-is-hovered]:not([data-variant="compact"]) {padding-top: calc(1.5 * var(--gap)); padding-right: calc(1.5 * var(--gap)); padding-bottom: calc(1.5 * var(--gap)); padding-left: calc(1.5 * var(--gap));}}
-@media (max-width: 767px) {.t21.t21[data-variant="compact"][data-is-hovered] {padding-top: calc(0.5 * var(--gap)); padding-right: calc(0.5 * var(--gap)); padding-bottom: calc(0.5 * var(--gap)); padding-left: calc(0.5 * var(--gap));}}
-@media (min-width: 1200px) {.t21.t21:not([data-is-error]):not([data-is-focused]) {border: calc(2 * var(--border-width)) solid var(--border-color);}}
-@media (min-width: 1200px) {.t21.t21[data-is-error]:not([data-is-focused]) {border: calc(2 * var(--border-width)) solid var(--border-color);}}
-@media (min-width: 1200px) {.t21.t21[data-is-focused]:not([data-is-error]) {border: calc(3 * var(--border-width)) solid var(--primary-color);}}
-@media (min-width: 1200px) {.t21.t21[data-is-error][data-is-focused] {border: calc(3 * var(--border-width)) solid var(--danger-color);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t21.t21:not([data-is-error]):not([data-is-focused]) {border: var(--border-width) solid var(--border-color);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t21.t21[data-is-error]:not([data-is-focused]) {border: var(--border-width) solid var(--border-color);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t21.t21[data-is-focused]:not([data-is-error]) {border: calc(2 * var(--border-width)) solid var(--primary-color);}}
-@media (min-width: 768px) and (max-width: 1199px) {.t21.t21[data-is-error][data-is-focused] {border: calc(2 * var(--border-width)) solid var(--danger-color);}}
-@media (max-width: 767px) {.t21.t21:not([data-is-error]):not([data-is-focused]) {border: var(--border-width) none var(--border-color);}}
-@media (max-width: 767px) {.t21.t21[data-is-error]:not([data-is-focused]) {border: var(--border-width) none var(--border-color);}}
-@media (max-width: 767px) {.t21.t21[data-is-focused]:not([data-is-error]) {border: var(--border-width) solid var(--primary-color);}}
-@media (max-width: 767px) {.t21.t21[data-is-error][data-is-focused] {border: var(--border-width) solid var(--danger-color);}}"
+".t20.t20 {display: block;}
+@media (min-width: 1200px) {.t20.t20:not([data-variant="compact"]):not([data-is-hovered]) {padding-top: calc(4 * var(--gap)); padding-right: calc(4 * var(--gap)); padding-bottom: calc(4 * var(--gap)); padding-left: calc(4 * var(--gap));}}
+@media (min-width: 1200px) {.t20.t20[data-variant="compact"]:not([data-is-hovered]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
+@media (min-width: 1200px) {.t20.t20[data-is-hovered]:not([data-variant="compact"]) {padding-top: calc(6 * var(--gap)); padding-right: calc(6 * var(--gap)); padding-bottom: calc(6 * var(--gap)); padding-left: calc(6 * var(--gap));}}
+@media (min-width: 1200px) {.t20.t20[data-variant="compact"][data-is-hovered] {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
+@media (min-width: 768px) and (max-width: 1199px) {.t20.t20:not([data-variant="compact"]):not([data-is-hovered]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
+@media (min-width: 768px) and (max-width: 1199px) {.t20.t20[data-variant="compact"]:not([data-is-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t20.t20[data-is-hovered]:not([data-variant="compact"]) {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap));}}
+@media (min-width: 768px) and (max-width: 1199px) {.t20.t20[data-variant="compact"][data-is-hovered] {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
+@media (max-width: 767px) {.t20.t20:not([data-variant="compact"]):not([data-is-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
+@media (max-width: 767px) {.t20.t20[data-variant="compact"]:not([data-is-hovered]) {padding-top: calc(0.5 * var(--gap)); padding-right: calc(0.5 * var(--gap)); padding-bottom: calc(0.5 * var(--gap)); padding-left: calc(0.5 * var(--gap));}}
+@media (max-width: 767px) {.t20.t20[data-is-hovered]:not([data-variant="compact"]) {padding-top: calc(1.5 * var(--gap)); padding-right: calc(1.5 * var(--gap)); padding-bottom: calc(1.5 * var(--gap)); padding-left: calc(1.5 * var(--gap));}}
+@media (max-width: 767px) {.t20.t20[data-variant="compact"][data-is-hovered] {padding-top: calc(0.5 * var(--gap)); padding-right: calc(0.5 * var(--gap)); padding-bottom: calc(0.5 * var(--gap)); padding-left: calc(0.5 * var(--gap));}}
+@media (min-width: 1200px) {.t20.t20:not([data-is-error]):not([data-is-focused]) {border: calc(2 * var(--border-width)) solid var(--border-color);}}
+@media (min-width: 1200px) {.t20.t20[data-is-error]:not([data-is-focused]) {border: calc(2 * var(--border-width)) solid var(--border-color);}}
+@media (min-width: 1200px) {.t20.t20[data-is-focused]:not([data-is-error]) {border: calc(3 * var(--border-width)) solid var(--primary-color);}}
+@media (min-width: 1200px) {.t20.t20[data-is-error][data-is-focused] {border: calc(3 * var(--border-width)) solid var(--danger-color);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t20.t20:not([data-is-error]):not([data-is-focused]) {border: var(--border-width) solid var(--border-color);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t20.t20[data-is-error]:not([data-is-focused]) {border: var(--border-width) solid var(--border-color);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t20.t20[data-is-focused]:not([data-is-error]) {border: calc(2 * var(--border-width)) solid var(--primary-color);}}
+@media (min-width: 768px) and (max-width: 1199px) {.t20.t20[data-is-error][data-is-focused] {border: calc(2 * var(--border-width)) solid var(--danger-color);}}
+@media (max-width: 767px) {.t20.t20:not([data-is-error]):not([data-is-focused]) {border: var(--border-width) none var(--border-color);}}
+@media (max-width: 767px) {.t20.t20[data-is-error]:not([data-is-focused]) {border: var(--border-width) none var(--border-color);}}
+@media (max-width: 767px) {.t20.t20[data-is-focused]:not([data-is-error]) {border: var(--border-width) solid var(--primary-color);}}
+@media (max-width: 767px) {.t20.t20[data-is-error][data-is-focused] {border: var(--border-width) solid var(--danger-color);}}"
 `;
 
 exports[`tasty() API should merge element styles 1`] = `
-".t13.t13:not([data-is-modified]) [data-element="Element"] {color: var(--dark-color); --current-color: var(--dark-color, dark); --current-color-rgb: var(--dark-color-rgb);}
-.t13.t13[data-is-modified] [data-element="Element"] {color: var(--purple-color); --current-color: var(--purple-color, purple); --current-color-rgb: var(--purple-color-rgb);}
-.t13.t13 [data-element="Element"] {background-color: var(--black-color);}
-.t13.t13 [data-element="Element"]>* {--context-fill-color: var(--black-color); --context-fill-color-rgb: var(--black-color-rgb);}"
+".t12.t12:not([data-is-modified]) [data-element="Element"] {color: var(--dark-color); --current-color: var(--dark-color, dark); --current-color-rgb: var(--dark-color-rgb);}
+.t12.t12[data-is-modified] [data-element="Element"] {color: var(--purple-color); --current-color: var(--purple-color, purple); --current-color-rgb: var(--purple-color-rgb);}
+.t12.t12 [data-element="Element"] {background-color: var(--black-color);}
+.t12.t12 [data-element="Element"]>* {--context-fill-color: var(--black-color); --context-fill-color-rgb: var(--black-color-rgb);}"
 `;
 
 exports[`tasty() API should merge styles 1`] = `
@@ -439,70 +439,70 @@ exports[`tasty() API should merge styles in custom prop 1`] = `
 `;
 
 exports[`tasty() API should optimize attribute selectors 1`] = `
-".t17.t17 {display: block;}
-.t17.t17:not([data-size="large"]):not([data-size="medium"]) {padding-top: var(--gap);}
-.t17.t17[data-size="large"] {padding-top: calc(3 * var(--gap));}
-.t17.t17[data-size="medium"] {padding-top: calc(2 * var(--gap));}"
+".t16.t16 {display: block;}
+.t16.t16:not([data-size="large"]):not([data-size="medium"]) {padding-top: var(--gap);}
+.t16.t16[data-size="large"] {padding-top: calc(3 * var(--gap));}
+.t16.t16[data-size="medium"] {padding-top: calc(2 * var(--gap));}"
 `;
 
 exports[`tasty() API should optimize attribute selectors 2`] = `
-".t18.t18 {display: block;}
-.t18.t18:not([data-size="large"]):not([data-size="medium"]):not([data-is-selected]) {padding-top: var(--gap);}
-.t18.t18[data-size="large"]:not([data-is-selected]) {padding-top: calc(3 * var(--gap));}
-.t18.t18[data-size="medium"]:not([data-is-selected]) {padding-top: var(--gap);}
-.t18.t18[data-is-selected]:not([data-size="large"]):not([data-size="medium"]) {padding-top: var(--gap);}
-.t18.t18[data-size="large"][data-is-selected] {padding-top: calc(3 * var(--gap));}
-.t18.t18[data-size="medium"][data-is-selected] {padding-top: calc(2 * var(--gap));}"
+".t17.t17 {display: block;}
+.t17.t17:not([data-size="large"]):not([data-size="medium"]):not([data-is-selected]) {padding-top: var(--gap);}
+.t17.t17[data-size="large"]:not([data-is-selected]) {padding-top: calc(3 * var(--gap));}
+.t17.t17[data-size="medium"]:not([data-is-selected]) {padding-top: var(--gap);}
+.t17.t17[data-is-selected]:not([data-size="large"]):not([data-size="medium"]) {padding-top: var(--gap);}
+.t17.t17[data-size="large"][data-is-selected] {padding-top: calc(3 * var(--gap));}
+.t17.t17[data-size="medium"][data-is-selected] {padding-top: calc(2 * var(--gap));}"
 `;
 
 exports[`tasty() API should optimize attribute selectors 3`] = `
-".t19.t19 {display: block;}
-.t19.t19:not([data-size="large"]):not([data-is-selected]):not([data-size="medium"]) {padding-top: var(--gap);}
-.t19.t19[data-size="large"]:not([data-is-selected]) {padding-top: var(--gap);}
-.t19.t19[data-is-selected]:not([data-size="large"]):not([data-size="medium"]) {padding-top: calc(2 * var(--gap));}
-.t19.t19[data-size="large"][data-is-selected] {padding-top: calc(3 * var(--gap));}
-.t19.t19[data-size="medium"]:not([data-is-selected]) {padding-top: calc(2 * var(--gap));}
-.t19.t19[data-is-selected][data-size="medium"] {padding-top: calc(2 * var(--gap));}"
+".t18.t18 {display: block;}
+.t18.t18:not([data-size="large"]):not([data-is-selected]):not([data-size="medium"]) {padding-top: var(--gap);}
+.t18.t18[data-size="large"]:not([data-is-selected]) {padding-top: var(--gap);}
+.t18.t18[data-is-selected]:not([data-size="large"]):not([data-size="medium"]) {padding-top: calc(2 * var(--gap));}
+.t18.t18[data-size="large"][data-is-selected] {padding-top: calc(3 * var(--gap));}
+.t18.t18[data-size="medium"]:not([data-is-selected]) {padding-top: calc(2 * var(--gap));}
+.t18.t18[data-is-selected][data-size="medium"] {padding-top: calc(2 * var(--gap));}"
 `;
 
 exports[`tasty() API should pass styles from tasty 1`] = `".t2.t2 {display: block; color: rgb(var(--clear-color-rgb) / .1); --current-color: var(--clear-color, clear); --current-color-rgb: var(--clear-color-rgb);}"`;
 
 exports[`tasty() API should preserve null values in state-map-of-arrays conversion 1`] = `
-".t22.t22 {display: block;}
-@media (min-width: 768px) {.t22.t22:not([data-is-disabled]):not([data-is-hovered]) {padding-top: calc(4 * var(--gap)); padding-right: calc(4 * var(--gap)); padding-bottom: calc(4 * var(--gap)); padding-left: calc(4 * var(--gap));}}
-@media (min-width: 768px) {.t22.t22[data-is-disabled]:not([data-is-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
-@media (min-width: 768px) {.t22.t22[data-is-disabled][data-is-hovered] {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
-@media (max-width: 767px) {.t22.t22:not([data-is-disabled]):not([data-is-hovered]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
-@media (max-width: 767px) {.t22.t22[data-is-disabled]:not([data-is-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
-@media (max-width: 767px) {.t22.t22[data-is-hovered]:not([data-is-disabled]) {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap));}}
-@media (max-width: 767px) {.t22.t22[data-is-disabled][data-is-hovered] {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
-.t22.t22:not([data-is-disabled]):not([data-is-hovered]) {background-color: var(--white-color);}
-.t22.t22:not([data-is-disabled]):not([data-is-hovered])>* {--context-fill-color: var(--white-color); --context-fill-color-rgb: var(--white-color-rgb);}
-.t22.t22[data-is-disabled]:not([data-is-hovered]) {background-color: var(--gray-color);}
-.t22.t22[data-is-disabled]:not([data-is-hovered])>* {--context-fill-color: var(--gray-color); --context-fill-color-rgb: var(--gray-color-rgb);}
-.t22.t22[data-is-hovered]:not([data-is-disabled]) {background-color: var(--blue-color);}
-.t22.t22[data-is-hovered]:not([data-is-disabled])>* {--context-fill-color: var(--blue-color); --context-fill-color-rgb: var(--blue-color-rgb);}
-.t22.t22[data-is-disabled][data-is-hovered] {background-color: var(--gray-color);}
-.t22.t22[data-is-disabled][data-is-hovered]>* {--context-fill-color: var(--gray-color); --context-fill-color-rgb: var(--gray-color-rgb);}"
+".t21.t21 {display: block;}
+@media (min-width: 768px) {.t21.t21:not([data-is-disabled]):not([data-is-hovered]) {padding-top: calc(4 * var(--gap)); padding-right: calc(4 * var(--gap)); padding-bottom: calc(4 * var(--gap)); padding-left: calc(4 * var(--gap));}}
+@media (min-width: 768px) {.t21.t21[data-is-disabled]:not([data-is-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
+@media (min-width: 768px) {.t21.t21[data-is-disabled][data-is-hovered] {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
+@media (max-width: 767px) {.t21.t21:not([data-is-disabled]):not([data-is-hovered]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
+@media (max-width: 767px) {.t21.t21[data-is-disabled]:not([data-is-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
+@media (max-width: 767px) {.t21.t21[data-is-hovered]:not([data-is-disabled]) {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap));}}
+@media (max-width: 767px) {.t21.t21[data-is-disabled][data-is-hovered] {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
+.t21.t21:not([data-is-disabled]):not([data-is-hovered]) {background-color: var(--white-color);}
+.t21.t21:not([data-is-disabled]):not([data-is-hovered])>* {--context-fill-color: var(--white-color); --context-fill-color-rgb: var(--white-color-rgb);}
+.t21.t21[data-is-disabled]:not([data-is-hovered]) {background-color: var(--gray-color);}
+.t21.t21[data-is-disabled]:not([data-is-hovered])>* {--context-fill-color: var(--gray-color); --context-fill-color-rgb: var(--gray-color-rgb);}
+.t21.t21[data-is-hovered]:not([data-is-disabled]) {background-color: var(--blue-color);}
+.t21.t21[data-is-hovered]:not([data-is-disabled])>* {--context-fill-color: var(--blue-color); --context-fill-color-rgb: var(--blue-color-rgb);}
+.t21.t21[data-is-disabled][data-is-hovered] {background-color: var(--gray-color);}
+.t21.t21[data-is-disabled][data-is-hovered]>* {--context-fill-color: var(--gray-color); --context-fill-color-rgb: var(--gray-color-rgb);}"
 `;
 
 exports[`tasty() API should preserve null values in state-map-of-arrays conversion 2`] = `
-".t22.t22 {display: block;}
-@media (min-width: 768px) {.t22.t22:not([data-is-disabled]):not([data-is-hovered]) {padding-top: calc(4 * var(--gap)); padding-right: calc(4 * var(--gap)); padding-bottom: calc(4 * var(--gap)); padding-left: calc(4 * var(--gap));}}
-@media (min-width: 768px) {.t22.t22[data-is-disabled]:not([data-is-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
-@media (min-width: 768px) {.t22.t22[data-is-disabled][data-is-hovered] {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
-@media (max-width: 767px) {.t22.t22:not([data-is-disabled]):not([data-is-hovered]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
-@media (max-width: 767px) {.t22.t22[data-is-disabled]:not([data-is-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
-@media (max-width: 767px) {.t22.t22[data-is-hovered]:not([data-is-disabled]) {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap));}}
-@media (max-width: 767px) {.t22.t22[data-is-disabled][data-is-hovered] {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
-.t22.t22:not([data-is-disabled]):not([data-is-hovered]) {background-color: var(--white-color);}
-.t22.t22:not([data-is-disabled]):not([data-is-hovered])>* {--context-fill-color: var(--white-color); --context-fill-color-rgb: var(--white-color-rgb);}
-.t22.t22[data-is-disabled]:not([data-is-hovered]) {background-color: var(--gray-color);}
-.t22.t22[data-is-disabled]:not([data-is-hovered])>* {--context-fill-color: var(--gray-color); --context-fill-color-rgb: var(--gray-color-rgb);}
-.t22.t22[data-is-hovered]:not([data-is-disabled]) {background-color: var(--blue-color);}
-.t22.t22[data-is-hovered]:not([data-is-disabled])>* {--context-fill-color: var(--blue-color); --context-fill-color-rgb: var(--blue-color-rgb);}
-.t22.t22[data-is-disabled][data-is-hovered] {background-color: var(--gray-color);}
-.t22.t22[data-is-disabled][data-is-hovered]>* {--context-fill-color: var(--gray-color); --context-fill-color-rgb: var(--gray-color-rgb);}"
+".t21.t21 {display: block;}
+@media (min-width: 768px) {.t21.t21:not([data-is-disabled]):not([data-is-hovered]) {padding-top: calc(4 * var(--gap)); padding-right: calc(4 * var(--gap)); padding-bottom: calc(4 * var(--gap)); padding-left: calc(4 * var(--gap));}}
+@media (min-width: 768px) {.t21.t21[data-is-disabled]:not([data-is-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
+@media (min-width: 768px) {.t21.t21[data-is-disabled][data-is-hovered] {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
+@media (max-width: 767px) {.t21.t21:not([data-is-disabled]):not([data-is-hovered]) {padding-top: calc(2 * var(--gap)); padding-right: calc(2 * var(--gap)); padding-bottom: calc(2 * var(--gap)); padding-left: calc(2 * var(--gap));}}
+@media (max-width: 767px) {.t21.t21[data-is-disabled]:not([data-is-hovered]) {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
+@media (max-width: 767px) {.t21.t21[data-is-hovered]:not([data-is-disabled]) {padding-top: calc(3 * var(--gap)); padding-right: calc(3 * var(--gap)); padding-bottom: calc(3 * var(--gap)); padding-left: calc(3 * var(--gap));}}
+@media (max-width: 767px) {.t21.t21[data-is-disabled][data-is-hovered] {padding-top: var(--gap); padding-right: var(--gap); padding-bottom: var(--gap); padding-left: var(--gap);}}
+.t21.t21:not([data-is-disabled]):not([data-is-hovered]) {background-color: var(--white-color);}
+.t21.t21:not([data-is-disabled]):not([data-is-hovered])>* {--context-fill-color: var(--white-color); --context-fill-color-rgb: var(--white-color-rgb);}
+.t21.t21[data-is-disabled]:not([data-is-hovered]) {background-color: var(--gray-color);}
+.t21.t21[data-is-disabled]:not([data-is-hovered])>* {--context-fill-color: var(--gray-color); --context-fill-color-rgb: var(--gray-color-rgb);}
+.t21.t21[data-is-hovered]:not([data-is-disabled]) {background-color: var(--blue-color);}
+.t21.t21[data-is-hovered]:not([data-is-disabled])>* {--context-fill-color: var(--blue-color); --context-fill-color-rgb: var(--blue-color-rgb);}
+.t21.t21[data-is-disabled][data-is-hovered] {background-color: var(--gray-color);}
+.t21.t21[data-is-disabled][data-is-hovered]>* {--context-fill-color: var(--gray-color); --context-fill-color-rgb: var(--gray-color-rgb);}"
 `;
 
 exports[`tasty() API should support camelCase modifiers 1`] = `
diff --git a/src/tasty/debug.ts b/src/tasty/debug.ts
index 9fd3210b8..cfa99190b 100644
--- a/src/tasty/debug.ts
+++ b/src/tasty/debug.ts
@@ -2,7 +2,147 @@
  * Debug utilities for inspecting tasty-generated CSS at runtime
  */
 
-import { getCssText, getCssTextForNode, injector } from './injector';
+import { getCssTextForNode, injector } from './injector';
+import { isDevEnv } from './utils/isDevEnv';
+
+// Type definitions for the new API
+type CSSTarget =
+  | 'all' // tasty CSS + tasty global CSS (createGlobalStyle)
+  | 'global' // only tasty global CSS
+  | 'active' // tasty CSS for classes currently in DOM
+  | 'unused' // tasty CSS with refCount = 0 (still in cache but not actively used)
+  | 'page' // ALL CSS on the page across stylesheets (not only tasty)
+  | string // 't123' tasty class or a CSS selector
+  | string[] // array of tasty classes like ['t1', 't2']
+  | Element; // a DOM element
+
+interface CssOptions {
+  root?: Document | ShadowRoot;
+  prettify?: boolean; // default: true
+  log?: boolean; // default: false
+}
+
+interface InspectResult {
+  element?: Element | null;
+  classes: string[]; // tasty classes found on the element
+  css: string; // full, prettified CSS affecting the element
+  size: number; // characters in css
+  rules: number; // number of rule blocks
+}
+
+interface CacheMetrics {
+  hits: number;
+  misses: number;
+  bulkCleanups: number;
+  totalInsertions: number;
+  totalUnused: number;
+  stylesCleanedUp: number;
+  cleanupHistory: Array<{
+    timestamp: number;
+    classesDeleted: number;
+    cssSize: number;
+    rulesDeleted: number;
+  }>;
+  startTime: number;
+
+  // Calculated metrics
+  unusedHits?: number; // calculated as current unused count
+}
+
+interface CacheStatus {
+  classes: {
+    active: string[]; // classes with refCount > 0 and present in DOM
+    unused: string[]; // classes with refCount = 0 but still in cache
+    all: string[]; // union of both
+  };
+  metrics: CacheMetrics | null;
+}
+
+interface GlobalBreakdown {
+  css: string; // prettified tasty global CSS
+  totalRules: number;
+  totalCSSSize: number;
+  selectors: {
+    elements: string[];
+    classes: string[];
+    ids: string[];
+    pseudoClasses: string[];
+    mediaQueries: string[];
+    keyframes: string[];
+    other: string[];
+  };
+}
+
+interface Definitions {
+  properties: string[]; // defined via @property
+  keyframes: Array<{ name: string; refCount: number }>;
+}
+
+interface SummaryOptions {
+  root?: Document | ShadowRoot;
+  log?: boolean;
+  includePageCSS?:
+    | false // do not include page-level CSS stats (default)
+    | true // include sizes/counts only
+    | 'all'; // include stats and return full page CSS string
+}
+
+interface Summary {
+  // Classes
+  activeClasses: string[];
+  unusedClasses: string[];
+  totalStyledClasses: string[];
+
+  // Tasty CSS sizes
+  activeCSSSize: number;
+  unusedCSSSize: number;
+  totalCSSSize: number; // tasty-only: active + unused + tasty global
+
+  // Tasty CSS payloads
+  activeCSS: string;
+  unusedCSS: string;
+  allCSS: string; // tasty-only CSS (active + unused + tasty global)
+
+  // Tasty global (createGlobalStyle)
+  globalCSS: string;
+  globalCSSSize: number;
+  globalRuleCount: number;
+
+  // Page-level CSS (across all stylesheets, not only tasty) — shown when includePageCSS != false
+  page?: {
+    css?: string; // present only when includePageCSS === 'all'
+    cssSize: number; // total characters
+    ruleCount: number; // approximate rule count
+    stylesheetCount: number; // stylesheets scanned (CORS-safe)
+    skippedStylesheets: number; // stylesheets skipped due to cross-origin/CORS
+  };
+
+  // Metrics & definitions
+  metrics: CacheMetrics | null;
+  definedProperties: string[];
+  definedKeyframes: Array<{ name: string; refCount: number }>;
+  propertyCount: number;
+  keyframeCount: number;
+
+  // Cleanup summary
+  cleanupSummary: {
+    enabled: boolean;
+    totalCleanups: number;
+    totalClassesDeleted: number;
+    totalCssDeleted: number;
+    totalRulesDeleted: number;
+    averageClassesPerCleanup: number;
+    averageCssPerCleanup: number;
+    averageRulesPerCleanup: number;
+    lastCleanup?: {
+      timestamp: number;
+      date: string;
+      classesDeleted: number;
+      cssSize: number;
+      rulesDeleted: number;
+    };
+  };
+}
 
 /**
  * Pretty-print CSS with proper indentation and formatting
@@ -74,847 +214,384 @@ function prettifyCSS(css: string): string {
   return result;
 }
 
-/**
- * Debug utilities for inspecting tasty styles in runtime applications
- */
-export const tastyDebug = {
-  /**
-   * Get CSS for a specific tasty class (e.g., 't24')
-   */
-  getCSSForClass(className: string): string {
-    if (!className.match(/^t\d+$/)) {
-      console.warn(
-        `"${className}" doesn't look like a tasty class. Expected format: t{number}`,
-      );
+// Helper functions
+function findAllTastyClasses(root: Document | ShadowRoot = document): string[] {
+  const classes = new Set<string>();
+  const elements = (root as Document).querySelectorAll?.('[class]') || [];
+
+  elements.forEach((element) => {
+    const classList = element.getAttribute('class');
+    if (classList) {
+      const tastyClasses = classList
+        .split(/\s+/)
+        .filter((cls) => /^t\d+$/.test(cls));
+      tastyClasses.forEach((cls) => classes.add(cls));
     }
-    const css = injector.instance.getCssTextForClasses([className]);
-    return prettifyCSS(css);
-  },
+  });
 
-  /**
-   * Get CSS for multiple tasty classes
-   */
-  getCSSForClasses(classNames: string[]): string {
-    const css = injector.instance.getCssTextForClasses(classNames);
-    return prettifyCSS(css);
-  },
+  return Array.from(classes).sort((a, b) => {
+    const aNum = parseInt(a.slice(1));
+    const bNum = parseInt(b.slice(1));
+    return aNum - bNum;
+  });
+}
 
-  /**
-   * Log CSS for a specific tasty class (e.g., 't24') to console
-   */
-  logCSSForClass(className: string): void {
-    if (!className.match(/^t\d+$/)) {
-      console.warn(
-        `"${className}" doesn't look like a tasty class. Expected format: t{number}`,
-      );
-    }
-    const css = this.getCSSForClass(className);
-    this.logCSS(css, `CSS for class "${className}"`);
-  },
+function findAllStyledClasses(
+  root: Document | ShadowRoot = document,
+): string[] {
+  // Extract tasty classes from all CSS text by parsing selectors
+  const allCSS = injector.instance.getCssText({ root });
+  const classes = new Set<string>();
+
+  // Simple regex to find .t{number} class selectors
+  const classRegex = /\.t(\d+)/g;
+  let match;
+  while ((match = classRegex.exec(allCSS)) !== null) {
+    classes.add(`t${match[1]}`);
+  }
 
-  /**
-   * Log CSS for multiple tasty classes to console
-   */
-  logCSSForClasses(classNames: string[]): void {
-    const css = this.getCSSForClasses(classNames);
-    const title = `CSS for classes [${classNames.join(', ')}]`;
-    this.logCSS(css, title);
-  },
+  return Array.from(classes).sort((a, b) => {
+    const aNum = parseInt(a.slice(1));
+    const bNum = parseInt(b.slice(1));
+    return aNum - bNum;
+  });
+}
 
-  /**
-   * Inspect an element by CSS selector and get its tasty CSS
-   */
-  inspectElement(selector: string): string {
-    const element = document.querySelector(selector);
-    if (!element) {
-      return `Element not found: ${selector}`;
-    }
+function extractCSSRules(
+  css: string,
+): Array<{ selector: string; declarations: string }> {
+  const rules: Array<{ selector: string; declarations: string }> = [];
 
-    console.group(`🎨 Tasty CSS for "${selector}"`);
-    console.log('Element:', element);
+  // Remove comments
+  let cleanCSS = css.replace(/\/\*[\s\S]*?\*\//g, '');
 
-    const css = getCssTextForNode(element);
-    if (css) {
-      const prettified = prettifyCSS(css);
-      console.log('Generated CSS:\n' + prettified);
-      console.groupEnd();
-      return prettified;
-    } else {
-      console.log('No tasty CSS found for this element');
-      console.groupEnd();
-      return 'No tasty CSS found';
+  let i = 0;
+  while (i < cleanCSS.length) {
+    // Skip whitespace
+    while (i < cleanCSS.length && /\s/.test(cleanCSS[i])) {
+      i++;
     }
-  },
-
-  /**
-   * Inspect a DOM element directly and get its tasty CSS
-   */
-  inspectDOMElement(element: Element): string {
-    if (!element) {
-      return 'Element is null or undefined';
+    if (i >= cleanCSS.length) break;
+
+    // Find selector start
+    const selectorStart = i;
+    let braceDepth = 0;
+    let inString = false;
+    let stringChar = '';
+
+    // Find opening brace
+    while (i < cleanCSS.length) {
+      const char = cleanCSS[i];
+      if (inString) {
+        if (char === stringChar && cleanCSS[i - 1] !== '\\') {
+          inString = false;
+        }
+      } else {
+        if (char === '"' || char === "'") {
+          inString = true;
+          stringChar = char;
+        } else if (char === '{') {
+          braceDepth++;
+          if (braceDepth === 1) break;
+        }
+      }
+      i++;
     }
 
-    console.group('🎨 Tasty CSS for element');
-    console.log('Element:', element);
+    if (i >= cleanCSS.length) break;
+    const selector = cleanCSS.substring(selectorStart, i).trim();
+    i++; // Skip opening brace
 
-    const css = getCssTextForNode(element);
-    if (css) {
-      const prettified = prettifyCSS(css);
-      console.log('Generated CSS:\n' + prettified);
-      console.groupEnd();
-      return prettified;
-    } else {
-      console.log('No tasty CSS found for this element');
-      console.groupEnd();
-      return 'No tasty CSS found';
+    // Find matching closing brace
+    const contentStart = i;
+    braceDepth = 1;
+    inString = false;
+
+    while (i < cleanCSS.length && braceDepth > 0) {
+      const char = cleanCSS[i];
+      if (inString) {
+        if (char === stringChar && cleanCSS[i - 1] !== '\\') {
+          inString = false;
+        }
+      } else {
+        if (char === '"' || char === "'") {
+          inString = true;
+          stringChar = char;
+        } else if (char === '{') {
+          braceDepth++;
+        } else if (char === '}') {
+          braceDepth--;
+        }
+      }
+      i++;
     }
-  },
 
-  /**
-   * Get all tasty CSS currently injected into the page
-   */
-  getAllCSS(): string {
-    return getCssText();
-  },
+    const content = cleanCSS.substring(contentStart, i - 1).trim();
+    if (content && selector) {
+      rules.push({ selector, declarations: content });
+    }
+  }
 
-  /**
-   * Find all tasty classes used in the page (in DOM)
-   */
-  findAllTastyClasses(): string[] {
-    const classes = new Set<string>();
-
-    // Find all elements with class attributes
-    const elements = document.querySelectorAll('[class]');
-    elements.forEach((element) => {
-      const classList = element.getAttribute('class');
-      if (classList) {
-        // Extract tasty classes (t + digits)
-        const tastyClasses = classList
-          .split(/\s+/)
-          .filter((cls) => /^t\d+$/.test(cls));
-        tastyClasses.forEach((cls) => classes.add(cls));
-      }
-    });
+  return rules;
+}
+
+function getGlobalCSS(root: Document | ShadowRoot = document): string {
+  const allCSS = injector.instance.getCssText({ root });
+  const rules = extractCSSRules(allCSS);
 
-    return Array.from(classes).sort((a, b) => {
-      // Sort numerically by the number part
-      const aNum = parseInt(a.slice(1));
-      const bNum = parseInt(b.slice(1));
-      return aNum - bNum;
+  const globalRules = rules.filter((rule) => {
+    const selectors = rule.selector.split(',').map((s) => s.trim());
+    return !selectors.every((selector) => {
+      const cleanSelector = selector.replace(/[.#:\s>+~[\]()]/g, ' ');
+      const parts = cleanSelector.split(/\s+/).filter(Boolean);
+      return parts.length > 0 && parts.every((part) => /^t\d+$/.test(part));
     });
-  },
+  });
 
-  /**
-   * Find all tasty classes that have styles in the stylesheet (used + unused)
-   */
-  findAllStyledClasses(): string[] {
-    const registry = (injector.instance as any)['sheetManager'].getRegistry(
-      document,
-    );
-    const classes = new Set<string>();
+  const globalCSS = globalRules
+    .map((rule) => `${rule.selector} { ${rule.declarations} }`)
+    .join('\n');
+  return prettifyCSS(globalCSS);
+}
+
+function getPageCSS(options?: {
+  root?: Document | ShadowRoot;
+  includeCrossOrigin?: boolean;
+}): string {
+  const root = options?.root || document;
+  const includeCrossOrigin = options?.includeCrossOrigin ?? false;
+
+  const cssChunks: string[] = [];
 
-    // Add all classes from rules map (active + unused)
-    if (registry?.rules) {
-      for (const className of registry.rules.keys()) {
-        if (/^t\d+$/.test(className)) {
-          classes.add(className);
+  try {
+    if ('styleSheets' in root) {
+      const styleSheets = Array.from((root as Document).styleSheets);
+
+      for (const sheet of styleSheets) {
+        try {
+          if (sheet.cssRules) {
+            const rules = Array.from(sheet.cssRules);
+            cssChunks.push(rules.map((rule) => rule.cssText).join('\n'));
+          }
+        } catch (e) {
+          // Cross-origin sheet or other access error
+          if (includeCrossOrigin) {
+            cssChunks.push(
+              `/* Cross-origin stylesheet: ${sheet.href || 'inline'} */`,
+            );
+          }
         }
       }
     }
+  } catch (e) {
+    // Fallback error handling
+  }
 
-    return Array.from(classes).sort((a, b) => {
-      // Sort numerically by the number part
-      const aNum = parseInt(a.slice(1));
-      const bNum = parseInt(b.slice(1));
-      return aNum - bNum;
-    });
-  },
-
-  /**
-   * Get active vs cached class breakdown
-   */
-  getClassUsage(): {
-    activeClasses: string[];
-    cachedClasses: string[];
-    totalStyledClasses: string[];
-  } {
-    const domClasses = this.findAllTastyClasses();
-    const styledClasses = this.findAllStyledClasses();
-    const registry = (injector.instance as any)['sheetManager'].getRegistry(
-      document,
-    );
-
-    const activeClasses = domClasses;
-    const cachedClasses = styledClasses.filter(
-      (cls) => !domClasses.includes(cls),
-    );
+  return cssChunks.join('\n');
+}
 
-    // Also check unusedRules registry for classes that are marked as cached (unused but kept for performance)
-    if (registry?.unusedRules) {
-      for (const className of registry.unusedRules.keys()) {
-        if (/^t\d+$/.test(className) && !cachedClasses.includes(className)) {
-          cachedClasses.push(className);
+function getPageStats(options?: {
+  root?: Document | ShadowRoot;
+  includeCrossOrigin?: boolean;
+}): {
+  cssSize: number;
+  ruleCount: number;
+  stylesheetCount: number;
+  skippedStylesheets: number;
+} {
+  const root = options?.root || document;
+  const includeCrossOrigin = options?.includeCrossOrigin ?? false;
+
+  let cssSize = 0;
+  let ruleCount = 0;
+  let stylesheetCount = 0;
+  let skippedStylesheets = 0;
+
+  try {
+    if ('styleSheets' in root) {
+      const styleSheets = Array.from((root as Document).styleSheets);
+      stylesheetCount = styleSheets.length;
+
+      for (const sheet of styleSheets) {
+        try {
+          if (sheet.cssRules) {
+            const rules = Array.from(sheet.cssRules);
+            ruleCount += rules.length;
+            cssSize += rules.reduce(
+              (sum, rule) => sum + rule.cssText.length,
+              0,
+            );
+          }
+        } catch (e) {
+          skippedStylesheets++;
         }
       }
     }
+  } catch (e) {
+    // Fallback error handling
+  }
 
-    return {
-      activeClasses: activeClasses.sort((a, b) => {
-        const aNum = parseInt(a.slice(1));
-        const bNum = parseInt(b.slice(1));
-        return aNum - bNum;
-      }),
-      cachedClasses: cachedClasses.sort((a, b) => {
-        const aNum = parseInt(a.slice(1));
-        const bNum = parseInt(b.slice(1));
-        return aNum - bNum;
-      }),
-      totalStyledClasses: styledClasses,
-    };
-  },
-
-  /**
-   * Get a comprehensive summary of all tasty styles
-   */
-  getSummary(): {
-    activeClasses: string[];
-    cachedClasses: string[];
-    totalStyledClasses: string[];
-    activeCSSSize: number;
-    cachedCSSSize: number;
-    totalCSSSize: number;
-    activeCSS: string;
-    cachedCSS: string;
-    allCSS: string;
-    globalCSS: string;
-    globalCSSSize: number;
-    globalRuleCount: number;
-    metrics: any;
-    definedProperties: string[];
-    definedKeyframes: { name: string; refCount: number; cssText?: string }[];
-    propertyCount: number;
-    keyframeCount: number;
-    cleanupSummary: {
-      enabled: boolean;
-      totalCleanups: number;
-      totalClassesDeleted: number;
-      totalCssDeleted: number;
-      totalRulesDeleted: number;
-      averageClassesPerCleanup: number;
-      averageCssPerCleanup: number;
-      averageRulesPerCleanup: number;
-      lastCleanup?: {
-        timestamp: number;
-        date: string;
-        classesDeleted: number;
-        cssSize: number;
-        rulesDeleted: number;
-      };
-    };
-  } {
-    const usage = this.getClassUsage();
-    const allCSS = this.getAllCSS();
-    const activeCSS = this.getCSSForClasses(usage.activeClasses);
-    const cachedCSS = this.getCSSForClasses(usage.cachedClasses);
-    const globalCSS = this.getGlobalCSS();
-    const globalBreakdown = this.getGlobalCSSBreakdown();
-    const metrics = injector.instance.getMetrics();
-    const definedProperties = this.getDefinedProperties();
-    const definedKeyframes = this.getDefinedKeyframes();
-    const cleanupSummary = this.getCleanupSummary();
-
-    const summary = {
-      activeClasses: usage.activeClasses,
-      cachedClasses: usage.cachedClasses,
-      totalStyledClasses: usage.totalStyledClasses,
-      activeCSSSize: activeCSS.length,
-      cachedCSSSize: cachedCSS.length,
-      totalCSSSize: allCSS.length,
-      activeCSS,
-      cachedCSS,
-      allCSS,
-      globalCSS,
-      globalCSSSize: globalCSS.length,
-      globalRuleCount: globalBreakdown.totalRules,
-      metrics,
-      definedProperties,
-      definedKeyframes,
-      propertyCount: definedProperties.length,
-      keyframeCount: definedKeyframes.length,
-      cleanupSummary,
-    };
+  return { cssSize, ruleCount, stylesheetCount, skippedStylesheets };
+}
 
-    console.group('🎨 Comprehensive Tasty Debug Summary');
-    console.log(`📊 Style Cache Status:`);
-    console.log(`  • Active classes (in DOM): ${summary.activeClasses.length}`);
-    console.log(
-      `  • Cached classes (performance cache): ${summary.cachedClasses.length}`,
-    );
-    console.log(
-      `  • Total styled classes: ${summary.totalStyledClasses.length}`,
-    );
-    console.log(`💾 CSS Size:`);
-    console.log(`  • Active CSS: ${summary.activeCSSSize} characters`);
-    console.log(`  • Cached CSS: ${summary.cachedCSSSize} characters`);
-    console.log(
-      `  • Global CSS: ${summary.globalCSSSize} characters (${summary.globalRuleCount} rules)`,
-    );
-    console.log(`  • Total CSS: ${summary.totalCSSSize} characters`);
-    console.log('🏷️ Properties & Keyframes:');
-    console.log(`  • Defined @property: ${definedProperties.length}`);
-    console.log(`  • Defined keyframes: ${definedKeyframes.length}`);
-    if (definedProperties.length > 0) {
-      console.log('  • Properties:', definedProperties);
-    }
-    if (definedKeyframes.length > 0) {
-      console.log(
-        '  • Keyframes:',
-        definedKeyframes.map((k) => `${k.name} (refs: ${k.refCount})`),
-      );
-    }
-    console.log('🧹 Cleanup Statistics:');
-    if (cleanupSummary.enabled) {
-      console.log(
-        `  • Total cleanups performed: ${cleanupSummary.totalCleanups}`,
-      );
-      console.log(
-        `  • Total classes deleted: ${cleanupSummary.totalClassesDeleted}`,
-      );
-      console.log(
-        `  • Total CSS deleted: ${cleanupSummary.totalCssDeleted} chars`,
-      );
-      console.log(
-        `  • Total rules deleted: ${cleanupSummary.totalRulesDeleted}`,
-      );
-      if (cleanupSummary.totalCleanups > 0) {
-        console.log(
-          `  • Avg classes per cleanup: ${cleanupSummary.averageClassesPerCleanup.toFixed(1)}`,
-        );
-        console.log(
-          `  • Avg CSS per cleanup: ${cleanupSummary.averageCssPerCleanup.toFixed(0)} chars`,
-        );
-        console.log(
-          `  • Avg rules per cleanup: ${cleanupSummary.averageRulesPerCleanup.toFixed(1)}`,
-        );
-      }
-      if (cleanupSummary.lastCleanup) {
-        console.log(`  • Last cleanup: ${cleanupSummary.lastCleanup.date}`);
+/**
+ * Concise tastyDebug API for inspecting styles at runtime
+ */
+export const tastyDebug = {
+  // 1) One function to get CSS from anywhere
+  css(target: CSSTarget, opts?: CssOptions): string {
+    const { root = document, prettify = true, log = false } = opts || {};
+    let css = '';
+
+    if (typeof target === 'string') {
+      if (target === 'all') {
+        css = injector.instance.getCssText({ root });
+      } else if (target === 'global') {
+        css = getGlobalCSS(root);
+      } else if (target === 'active') {
+        const activeClasses = findAllTastyClasses(root);
+        css = injector.instance.getCssTextForClasses(activeClasses, { root });
+      } else if (target === 'unused') {
+        // Get unused classes (refCount = 0) from the registry
+        const registry = (injector.instance as any)[
+          'sheetManager'
+        ]?.getRegistry(root);
+        const unusedClasses: string[] = registry
+          ? Array.from(
+              registry.refCounts.entries() as IterableIterator<
+                [string, number]
+              >,
+            )
+              .filter(([, refCount]: [string, number]) => refCount === 0)
+              .map(([className]: [string, number]) => className)
+          : [];
+        css = injector.instance.getCssTextForClasses(unusedClasses, { root });
+      } else if (target === 'page') {
+        css = getPageCSS({ root, includeCrossOrigin: true });
+      } else if (/^t\d+$/.test(target)) {
+        // Single tasty class
+        css = injector.instance.getCssTextForClasses([target], { root });
+      } else {
+        // CSS selector - find element and get its CSS
+        const element = (root as Document).querySelector?.(target);
+        if (element) {
+          css = getCssTextForNode(element, { root });
+        }
       }
-    } else {
-      console.log(
-        '  • Metrics collection disabled (enable with collectMetrics: true)',
-      );
-    }
-    console.log(`⚡ Performance Metrics:`);
-    if (metrics) {
-      console.log(`  • Cache hits: ${metrics.hits}`);
-      console.log(`  • Cache misses: ${metrics.misses}`);
-      console.log(`  • Cached style reuses: ${metrics.unusedHits}`);
-      console.log(`  • Total insertions: ${metrics.totalInsertions}`);
-      console.log(`  • Styles cleaned up: ${metrics.stylesCleanedUp}`);
-
-      const hitRate =
-        metrics.hits + metrics.misses > 0
-          ? (
-              ((metrics.hits + metrics.unusedHits) /
-                (metrics.hits + metrics.misses)) *
-              100
-            ).toFixed(1)
-          : 0;
-      console.log(`  • Overall cache hit rate: ${hitRate}%`);
-    } else {
-      console.log(
-        `  • Metrics not available (enable with collectMetrics: true)`,
-      );
+    } else if (Array.isArray(target)) {
+      // Array of tasty classes
+      css = injector.instance.getCssTextForClasses(target, { root });
+    } else if (target instanceof Element) {
+      // DOM element
+      css = getCssTextForNode(target, { root });
     }
-    console.log('🔍 Details:');
-    console.log('  • Active classes:', summary.activeClasses);
-    console.log('  • Cached classes:', summary.cachedClasses);
-    console.log(
-      'ℹ️  Note: Cached styles are kept for performance - avoiding expensive DOM operations',
-    );
-    console.groupEnd();
 
-    return summary;
-  },
+    const result = prettify ? prettifyCSS(css) : css;
 
-  /**
-   * Helper to log CSS in a readable format
-   */
-  logCSS(css: string, title = 'CSS'): void {
-    if (!css || css.trim() === '') {
-      console.log(`${title}: (empty)`);
-      return;
+    if (log) {
+      console.group(
+        `🎨 CSS for ${Array.isArray(target) ? `[${target.join(', ')}]` : target}`,
+      );
+      console.log(result || '(empty)');
+      console.groupEnd();
     }
 
-    console.group(`🎨 ${title}`);
-    const prettified = prettifyCSS(css);
-    console.log(prettified);
-    console.groupEnd();
+    return result;
   },
 
-  /**
-   * Advanced inspection with detailed breakdown and statistics
-   */
-  inspect(target: string | Element): {
-    element: Element | null;
-    tastyClasses: string[];
-    css: string;
-    cssSize: number;
-    ruleCount: number;
-    breakdown: {
-      [className: string]: {
-        css: string;
-        cssSize: number;
-        ruleCount: number;
-      };
-    };
-    stats: {
-      totalClasses: number;
-      totalRules: number;
-      totalCSSSize: number;
-      averageRulesPerClass: number;
-      averageCSSPerClass: number;
-    };
-  } {
+  // 2) Element-level inspection
+  inspect(
+    target: string | Element,
+    opts?: { root?: Document | ShadowRoot },
+  ): InspectResult {
+    const { root = document } = opts || {};
     const element =
-      typeof target === 'string' ? document.querySelector(target) : target;
+      typeof target === 'string'
+        ? (root as Document).querySelector?.(target)
+        : target;
 
     if (!element) {
-      console.error(`Element not found: ${target}`);
       return {
         element: null,
-        tastyClasses: [],
+        classes: [],
         css: '',
-        cssSize: 0,
-        ruleCount: 0,
-        breakdown: {},
-        stats: {
-          totalClasses: 0,
-          totalRules: 0,
-          totalCSSSize: 0,
-          averageRulesPerClass: 0,
-          averageCSSPerClass: 0,
-        },
+        size: 0,
+        rules: 0,
       };
     }
 
-    // Find tasty classes on this element
     const classList = element.getAttribute('class') || '';
     const tastyClasses = classList
       .split(/\s+/)
       .filter((cls) => /^t\d+$/.test(cls));
 
-    // Get CSS for the entire subtree
-    const fullCSS = getCssTextForNode(element);
-    const prettifiedCSS = prettifyCSS(fullCSS);
-
-    // Count CSS rules in the full CSS
-    const ruleCount = (fullCSS.match(/\{[^}]*\}/g) || []).length;
-
-    // Get CSS breakdown per class with detailed stats
-    const breakdown: {
-      [className: string]: {
-        css: string;
-        cssSize: number;
-        ruleCount: number;
-      };
-    } = {};
-
-    let totalClassRules = 0;
-    let totalClassCSSSize = 0;
-
-    tastyClasses.forEach((className) => {
-      const classCSS = this.getCSSForClass(className);
-      const classRuleCount = (classCSS.match(/\{[^}]*\}/g) || []).length;
-      breakdown[className] = {
-        css: classCSS,
-        cssSize: classCSS.length,
-        ruleCount: classRuleCount,
-      };
-      totalClassRules += classRuleCount;
-      totalClassCSSSize += classCSS.length;
-    });
-
-    // Calculate statistics
-    const stats = {
-      totalClasses: tastyClasses.length,
-      totalRules: totalClassRules,
-      totalCSSSize: totalClassCSSSize,
-      averageRulesPerClass:
-        tastyClasses.length > 0 ? totalClassRules / tastyClasses.length : 0,
-      averageCSSPerClass:
-        tastyClasses.length > 0 ? totalClassCSSSize / tastyClasses.length : 0,
-    };
+    const css = getCssTextForNode(element, { root });
+    const prettifiedCSS = prettifyCSS(css);
+    const ruleCount = (css.match(/\{[^}]*\}/g) || []).length;
 
-    const result = {
+    return {
       element,
-      tastyClasses,
+      classes: tastyClasses,
       css: prettifiedCSS,
-      cssSize: fullCSS.length,
-      ruleCount,
-      breakdown,
-      stats,
+      size: css.length,
+      rules: ruleCount,
     };
-
-    console.group(`🔍 Detailed Tasty Inspection`);
-    console.log('Element:', element);
-    console.log('📊 Overview:');
-    console.log(`  • Tasty classes: ${stats.totalClasses}`);
-    console.log(`  • Total rules applied: ${ruleCount}`);
-    console.log(`  • Total CSS size: ${fullCSS.length} characters`);
-    console.log('🏷️ Classes:', tastyClasses);
-    console.log('📈 Statistics:');
-    console.log(
-      `  • Rules per class (avg): ${stats.averageRulesPerClass.toFixed(1)}`,
-    );
-    console.log(
-      `  • CSS per class (avg): ${stats.averageCSSPerClass.toFixed(0)} chars`,
-    );
-    console.log('🎨 Element CSS:\n' + prettifiedCSS);
-    console.log('🔨 CSS breakdown by class:');
-    Object.entries(breakdown).forEach(([className, data]) => {
-      console.log(
-        `  ${className}: ${data.ruleCount} rules, ${data.cssSize} chars`,
-      );
-    });
-    console.groupEnd();
-
-    return result;
-  },
-
-  /**
-   * Get CSS for active classes only
-   */
-  getActiveCSS(): string {
-    const usage = this.getClassUsage();
-    return this.getCSSForClasses(usage.activeClasses);
-  },
-
-  /**
-   * Get CSS for cached classes only
-   */
-  getCachedCSS(): string {
-    const usage = this.getClassUsage();
-    return this.getCSSForClasses(usage.cachedClasses);
-  },
-
-  /**
-   * Get all defined @property custom properties
-   */
-  getDefinedProperties(): string[] {
-    const registry = (injector.instance as any)['sheetManager'].getRegistry(
-      document,
-    );
-    if (!registry?.injectedProperties) {
-      return [];
-    }
-    return Array.from(registry.injectedProperties as Set<string>).sort();
   },
 
-  /**
-   * Get all defined keyframes
-   */
-  getDefinedKeyframes(): {
-    name: string;
-    refCount: number;
-    cssText?: string;
-  }[] {
-    const registry = (injector.instance as any)['sheetManager'].getRegistry(
-      document,
-    );
-    if (!registry?.keyframesCache) {
-      return [];
-    }
-
-    const keyframes: {
-      name: string;
-      refCount: number;
-      cssText?: string;
-    }[] = [];
-
-    for (const [cacheKey, entry] of registry.keyframesCache.entries()) {
-      keyframes.push({
-        name: entry.name,
-        refCount: entry.refCount,
-        cssText: entry.info?.cssText,
-      });
-    }
-
-    return keyframes.sort((a, b) => a.name.localeCompare(b.name));
-  },
-
-  /**
-   * Check if a specific @property is defined
-   */
-  isPropertyDefined(propertyName: string): boolean {
-    return injector.instance.isPropertyDefined(propertyName);
-  },
-
-  /**
-   * Check if a specific keyframe is defined
-   */
-  isKeyframeDefined(keyframeName: string): boolean {
-    const registry = (injector.instance as any)['sheetManager'].getRegistry(
-      document,
-    );
-    if (!registry?.keyframesCache) {
-      return false;
-    }
-
-    for (const entry of registry.keyframesCache.values()) {
-      if (entry.name === keyframeName) {
-        return true;
-      }
-    }
-    return false;
-  },
-
-  /**
-   * Get detailed cleanup statistics history
-   */
-  getCleanupHistory(): {
-    totalCleanups: number;
-    totalClassesDeleted: number;
-    totalCssDeleted: number;
-    totalRulesDeleted: number;
-    cleanupHistory: Array<{
-      timestamp: number;
-      date: string;
-      classesDeleted: number;
-      cssSize: number;
-      rulesDeleted: number;
-    }>;
-  } {
-    const registry = (injector.instance as any)['sheetManager'].getRegistry(
-      document,
-    );
-
-    if (!registry?.metrics?.cleanupHistory) {
-      return {
-        totalCleanups: 0,
-        totalClassesDeleted: 0,
-        totalCssDeleted: 0,
-        totalRulesDeleted: 0,
-        cleanupHistory: [],
-      };
-    }
-
-    const history = registry.metrics.cleanupHistory;
-    const totalClassesDeleted = history.reduce(
-      (sum, cleanup) => sum + cleanup.classesDeleted,
-      0,
-    );
-    const totalCssDeleted = history.reduce(
-      (sum, cleanup) => sum + cleanup.cssSize,
-      0,
-    );
-    const totalRulesDeleted = history.reduce(
-      (sum, cleanup) => sum + cleanup.rulesDeleted,
-      0,
+  // 3) Cache + metrics at a glance
+  cache(opts?: {
+    root?: Document | ShadowRoot;
+    includeHistory?: boolean;
+  }): CacheStatus {
+    const { root = document } = opts || {};
+    const activeClasses = findAllTastyClasses(root);
+    const allClasses = findAllStyledClasses(root);
+    // Get unused classes (refCount = 0) from the registry
+    const registry = (injector.instance as any)['sheetManager']?.getRegistry(
+      root,
     );
+    const unusedClasses: string[] = registry
+      ? Array.from(
+          registry.refCounts.entries() as IterableIterator<[string, number]>,
+        )
+          .filter(([, refCount]: [string, number]) => refCount === 0)
+          .map(([className]: [string, number]) => className)
+      : [];
 
     return {
-      totalCleanups: history.length,
-      totalClassesDeleted,
-      totalCssDeleted,
-      totalRulesDeleted,
-      cleanupHistory: history.map((cleanup) => ({
-        ...cleanup,
-        date: new Date(cleanup.timestamp).toISOString(),
-      })),
+      classes: {
+        active: activeClasses,
+        unused: unusedClasses,
+        all: [...activeClasses, ...unusedClasses],
+      },
+      metrics: injector.instance.getMetrics({ root }),
     };
   },
 
-  /**
-   * Get cleanup statistics summary
-   */
-  getCleanupSummary(): {
-    enabled: boolean;
-    totalCleanups: number;
-    totalClassesDeleted: number;
-    totalCssDeleted: number;
-    totalRulesDeleted: number;
-    averageClassesPerCleanup: number;
-    averageCssPerCleanup: number;
-    averageRulesPerCleanup: number;
-    lastCleanup?: {
-      timestamp: number;
-      date: string;
-      classesDeleted: number;
-      cssSize: number;
-      rulesDeleted: number;
-    };
-  } {
-    const registry = (injector.instance as any)['sheetManager'].getRegistry(
-      document,
-    );
-
-    if (!registry?.metrics) {
-      return {
-        enabled: false,
-        totalCleanups: 0,
-        totalClassesDeleted: 0,
-        totalCssDeleted: 0,
-        totalRulesDeleted: 0,
-        averageClassesPerCleanup: 0,
-        averageCssPerCleanup: 0,
-        averageRulesPerCleanup: 0,
-      };
-    }
-
-    const history = registry.metrics.cleanupHistory || [];
-    const totalClassesDeleted = history.reduce(
-      (sum, cleanup) => sum + cleanup.classesDeleted,
-      0,
-    );
-    const totalCssDeleted = history.reduce(
-      (sum, cleanup) => sum + cleanup.cssSize,
-      0,
-    );
-    const totalRulesDeleted = history.reduce(
-      (sum, cleanup) => sum + cleanup.rulesDeleted,
-      0,
-    );
-    const totalCleanups = history.length;
-
-    const lastCleanup =
-      history.length > 0 ? history[history.length - 1] : undefined;
-
-    return {
-      enabled: true,
-      totalCleanups,
-      totalClassesDeleted,
-      totalCssDeleted,
-      totalRulesDeleted,
-      averageClassesPerCleanup:
-        totalCleanups > 0 ? totalClassesDeleted / totalCleanups : 0,
-      averageCssPerCleanup:
-        totalCleanups > 0 ? totalCssDeleted / totalCleanups : 0,
-      averageRulesPerCleanup:
-        totalCleanups > 0 ? totalRulesDeleted / totalCleanups : 0,
-      lastCleanup: lastCleanup
-        ? {
-            ...lastCleanup,
-            date: new Date(lastCleanup.timestamp).toISOString(),
-          }
-        : undefined,
-    };
-  },
-
-  /**
-   * Log cleanup history to console in a readable format
-   */
-  logCleanupHistory(): void {
-    const cleanupData = this.getCleanupHistory();
-
-    if (cleanupData.totalCleanups === 0) {
-      console.log('🧹 No cleanup history available');
-      return;
-    }
-
-    console.group(`🧹 Cleanup History (${cleanupData.totalCleanups} cleanups)`);
-    console.log('📊 Total Statistics:');
-    console.log(
-      `  • Total classes deleted: ${cleanupData.totalClassesDeleted}`,
-    );
-    console.log(
-      `  • Total CSS deleted: ${cleanupData.totalCssDeleted} characters`,
-    );
-    console.log(`  • Total rules deleted: ${cleanupData.totalRulesDeleted}`);
-
-    console.log('\n📅 Cleanup Sessions:');
-    cleanupData.cleanupHistory.forEach((cleanup, index) => {
-      console.log(`  ${index + 1}. ${cleanup.date}`);
-      console.log(`     • Classes: ${cleanup.classesDeleted}`);
-      console.log(`     • CSS: ${cleanup.cssSize} chars`);
-      console.log(`     • Rules: ${cleanup.rulesDeleted}`);
-    });
-
-    console.groupEnd();
+  // 4) Cleanup + metrics utilities
+  cleanup(opts?: { root?: Document | ShadowRoot }): void {
+    const { root } = opts || {};
+    injector.instance.cleanup(root);
   },
 
-  /**
-   * Get all global CSS rules (non-tasty class selectors)
-   */
-  getGlobalCSS(): string {
-    const allCSS = this.getAllCSS();
-
-    // Split CSS into rules and filter out tasty class rules
-    const rules = this.extractCSSRules(allCSS);
-    const globalRules = rules.filter((rule) => {
-      // Filter out rules that only contain tasty classes (t + digits)
-      const selectors = rule.selector.split(',').map((s) => s.trim());
-      return !selectors.every((selector) => {
-        // Check if selector is purely a tasty class or contains only tasty classes
-        const cleanSelector = selector.replace(/[.#:\s>+~[\]()]/g, ' ');
-        const parts = cleanSelector.split(/\s+/).filter(Boolean);
-        return parts.length > 0 && parts.every((part) => /^t\d+$/.test(part));
-      });
-    });
-
-    const globalCSS = globalRules
-      .map((rule) => `${rule.selector} { ${rule.declarations} }`)
-      .join('\n');
-    return prettifyCSS(globalCSS);
+  metrics(opts?: { root?: Document | ShadowRoot }): CacheMetrics | null {
+    const { root } = opts || {};
+    return injector.instance.getMetrics({ root });
   },
 
-  /**
-   * Log global CSS to console
-   */
-  logGlobalCSS(): void {
-    const globalCSS = this.getGlobalCSS();
-    if (!globalCSS.trim()) {
-      console.log('🌍 No global CSS found');
-      return;
-    }
-    this.logCSS(globalCSS, 'Global CSS (createGlobalStyle)');
+  resetMetrics(opts?: { root?: Document | ShadowRoot }): void {
+    const { root } = opts || {};
+    injector.instance.resetMetrics({ root });
   },
 
-  /**
-   * Get global CSS rules breakdown with detailed analysis
-   */
-  getGlobalCSSBreakdown(): {
-    globalRules: Array<{
-      selector: string;
-      declarations: string;
-      ruleCount: number;
-    }>;
-    totalRules: number;
-    totalCSSSize: number;
-    css: string;
-    selectors: {
-      elements: string[];
-      classes: string[];
-      ids: string[];
-      pseudoClasses: string[];
-      mediaQueries: string[];
-      keyframes: string[];
-      other: string[];
-    };
-  } {
-    const allCSS = this.getAllCSS();
-    const rules = this.extractCSSRules(allCSS);
-
-    const globalRules = rules.filter((rule) => {
-      const selectors = rule.selector.split(',').map((s) => s.trim());
-      return !selectors.every((selector) => {
-        const cleanSelector = selector.replace(/[.#:\s>+~[\]()]/g, ' ');
-        const parts = cleanSelector.split(/\s+/).filter(Boolean);
-        return parts.length > 0 && parts.every((part) => /^t\d+$/.test(part));
-      });
-    });
-
-    const breakdown = globalRules.map((rule) => ({
-      selector: rule.selector,
-      declarations: rule.declarations,
-      ruleCount: 1,
-    }));
-
-    const css = globalRules
-      .map((rule) => `${rule.selector} { ${rule.declarations} }`)
-      .join('\n');
-    const prettifiedCSS = prettifyCSS(css);
+  // 5) Tasty global CSS and selector analysis
+  global(opts?: {
+    root?: Document | ShadowRoot;
+    log?: boolean;
+  }): GlobalBreakdown {
+    const { root = document, log = false } = opts || {};
+    const css = getGlobalCSS(root);
+    const rules = extractCSSRules(css);
 
     // Analyze selectors
     const selectors = {
@@ -927,10 +604,8 @@ export const tastyDebug = {
       other: [] as string[],
     };
 
-    globalRules.forEach((rule) => {
+    rules.forEach((rule) => {
       const selector = rule.selector;
-
-      // Categorize selectors
       if (selector.startsWith('@media')) {
         selectors.mediaQueries.push(selector);
       } else if (selector.startsWith('@keyframes')) {
@@ -956,293 +631,395 @@ export const tastyDebug = {
       }
     });
 
-    return {
-      globalRules: breakdown,
-      totalRules: breakdown.length,
+    const result = {
+      css,
+      totalRules: rules.length,
       totalCSSSize: css.length,
-      css: prettifiedCSS,
       selectors,
     };
-  },
 
-  /**
-   * Log detailed global CSS breakdown
-   */
-  logGlobalCSSBreakdown(): void {
-    const breakdown = this.getGlobalCSSBreakdown();
-
-    if (breakdown.totalRules === 0) {
-      console.log('🌍 No global CSS rules found');
-      return;
+    if (log) {
+      console.group(`🌍 Global CSS (${result.totalRules} rules)`);
+      console.log(`📊 Size: ${result.totalCSSSize} characters`);
+      console.log('🎯 Selector breakdown:', result.selectors);
+      console.log('🎨 CSS:\n' + result.css);
+      console.groupEnd();
     }
 
-    console.group(`🌍 Global CSS Breakdown (${breakdown.totalRules} rules)`);
-    console.log(`📊 Statistics:`);
-    console.log(`  • Total global rules: ${breakdown.totalRules}`);
-    console.log(`  • Total CSS size: ${breakdown.totalCSSSize} characters`);
+    return result;
+  },
 
-    console.log(`🎯 Selector Analysis:`);
-    if (breakdown.selectors.elements.length > 0) {
-      console.log(
-        `  • Element selectors: ${breakdown.selectors.elements.length}`,
-        breakdown.selectors.elements.slice(0, 5),
+  // 6) Defined @property and keyframes
+  defs(opts?: { root?: Document | ShadowRoot }): Definitions {
+    const { root = document } = opts || {};
+
+    // Get properties from injector if available, otherwise scan CSS
+    let properties: string[] = [];
+    try {
+      const registry = (injector.instance as any)['sheetManager']?.getRegistry(
+        root,
       );
+      if (registry?.injectedProperties) {
+        properties = Array.from(
+          registry.injectedProperties as Set<string>,
+        ).sort();
+      }
+    } catch {
+      // Fallback: scan CSS for @property rules
+      const allCSS = injector.instance.getCssText({ root });
+      const propRegex = /@property\s+(--[a-z0-9-]+)/gi;
+      const propSet = new Set<string>();
+      let match;
+      while ((match = propRegex.exec(allCSS)) !== null) {
+        propSet.add(match[1]);
+      }
+      properties = Array.from(propSet).sort();
     }
-    if (breakdown.selectors.classes.length > 0) {
-      console.log(
-        `  • Class selectors: ${breakdown.selectors.classes.length}`,
-        breakdown.selectors.classes.slice(0, 5),
+
+    // Get keyframes
+    let keyframes: Array<{ name: string; refCount: number }> = [];
+    try {
+      const registry = (injector.instance as any)['sheetManager']?.getRegistry(
+        root,
       );
+      if (registry) {
+        for (const entry of registry.keyframesCache.values()) {
+          keyframes.push({
+            name: entry.name,
+            refCount: entry.refCount,
+          });
+        }
+        keyframes.sort((a, b) => a.name.localeCompare(b.name));
+      }
+    } catch {
+      // Fallback: scan CSS for @keyframes rules
+      const allCSS = injector.instance.getCssText({ root });
+      const keyframesRegex = /@keyframes\s+([a-zA-Z0-9_-]+)/gi;
+      const keyframesSet = new Set<string>();
+      let match;
+      while ((match = keyframesRegex.exec(allCSS)) !== null) {
+        keyframesSet.add(match[1]);
+      }
+      keyframes = Array.from(keyframesSet)
+        .sort()
+        .map((name) => ({ name, refCount: 1 }));
     }
-    if (breakdown.selectors.ids.length > 0) {
-      console.log(
-        `  • ID selectors: ${breakdown.selectors.ids.length}`,
-        breakdown.selectors.ids.slice(0, 5),
-      );
+
+    return { properties, keyframes };
+  },
+
+  // 7) One-shot overview
+  summary(opts?: SummaryOptions): Summary {
+    const { root = document, log = false, includePageCSS = false } = opts || {};
+    const cacheStatus = this.cache({ root });
+    const globalBreakdown = this.global({ root });
+    const definitions = this.defs({ root });
+    const metrics = this.metrics({ root });
+
+    const activeCSS = this.css('active', { root, prettify: false });
+    const unusedCSS = this.css('unused', { root, prettify: false });
+    const allCSS = this.css('all', { root, prettify: false });
+
+    // Build cleanup summary from metrics
+    const cleanupSummary = {
+      enabled: !!metrics,
+      totalCleanups: metrics?.cleanupHistory?.length || 0,
+      totalClassesDeleted:
+        metrics?.cleanupHistory?.reduce(
+          (sum, c) => sum + c.classesDeleted,
+          0,
+        ) || 0,
+      totalCssDeleted:
+        metrics?.cleanupHistory?.reduce((sum, c) => sum + c.cssSize, 0) || 0,
+      totalRulesDeleted:
+        metrics?.cleanupHistory?.reduce((sum, c) => sum + c.rulesDeleted, 0) ||
+        0,
+      averageClassesPerCleanup: 0,
+      averageCssPerCleanup: 0,
+      averageRulesPerCleanup: 0,
+      lastCleanup: undefined as any,
+    };
+
+    if (cleanupSummary.totalCleanups > 0) {
+      cleanupSummary.averageClassesPerCleanup =
+        cleanupSummary.totalClassesDeleted / cleanupSummary.totalCleanups;
+      cleanupSummary.averageCssPerCleanup =
+        cleanupSummary.totalCssDeleted / cleanupSummary.totalCleanups;
+      cleanupSummary.averageRulesPerCleanup =
+        cleanupSummary.totalRulesDeleted / cleanupSummary.totalCleanups;
+
+      const lastCleanup =
+        metrics?.cleanupHistory?.[metrics.cleanupHistory.length - 1];
+      if (lastCleanup) {
+        cleanupSummary.lastCleanup = {
+          ...lastCleanup,
+          date: new Date(lastCleanup.timestamp).toISOString(),
+        };
+      }
     }
-    if (breakdown.selectors.pseudoClasses.length > 0) {
+
+    let page: Summary['page'] | undefined;
+    if (includePageCSS) {
+      const pageStats = getPageStats({ root, includeCrossOrigin: true });
+      page = {
+        ...pageStats,
+        css:
+          includePageCSS === 'all'
+            ? getPageCSS({ root, includeCrossOrigin: true })
+            : undefined,
+      };
+    }
+
+    const summary: Summary = {
+      activeClasses: cacheStatus.classes.active,
+      unusedClasses: cacheStatus.classes.unused,
+      totalStyledClasses: cacheStatus.classes.all,
+      activeCSSSize: activeCSS.length,
+      unusedCSSSize: unusedCSS.length,
+      totalCSSSize: allCSS.length,
+      activeCSS: prettifyCSS(activeCSS),
+      unusedCSS: prettifyCSS(unusedCSS),
+      allCSS: prettifyCSS(allCSS),
+      globalCSS: globalBreakdown.css,
+      globalCSSSize: globalBreakdown.totalCSSSize,
+      globalRuleCount: globalBreakdown.totalRules,
+      page,
+      metrics,
+      definedProperties: definitions.properties,
+      definedKeyframes: definitions.keyframes,
+      propertyCount: definitions.properties.length,
+      keyframeCount: definitions.keyframes.length,
+      cleanupSummary,
+    };
+
+    if (log) {
+      console.group('🎨 Comprehensive Tasty Debug Summary');
+      console.log(`📊 Style Cache Status:`);
       console.log(
-        `  • Pseudo-class selectors: ${breakdown.selectors.pseudoClasses.length}`,
-        breakdown.selectors.pseudoClasses.slice(0, 5),
+        `  • Active classes (in DOM): ${summary.activeClasses.length}`,
       );
-    }
-    if (breakdown.selectors.mediaQueries.length > 0) {
       console.log(
-        `  • Media queries: ${breakdown.selectors.mediaQueries.length}`,
-        breakdown.selectors.mediaQueries.slice(0, 3),
+        `  • Unused classes (refCount = 0): ${summary.unusedClasses.length}`,
       );
-    }
-    if (breakdown.selectors.keyframes.length > 0) {
       console.log(
-        `  • Keyframe rules: ${breakdown.selectors.keyframes.length}`,
-        breakdown.selectors.keyframes.slice(0, 3),
+        `  • Total styled classes: ${summary.totalStyledClasses.length}`,
       );
-    }
-    if (breakdown.selectors.other.length > 0) {
+      console.log(`💾 CSS Size:`);
+      console.log(`  • Active CSS: ${summary.activeCSSSize} characters`);
+      console.log(`  • Unused CSS: ${summary.unusedCSSSize} characters`);
       console.log(
-        `  • Other selectors: ${breakdown.selectors.other.length}`,
-        breakdown.selectors.other.slice(0, 5),
+        `  • Global CSS: ${summary.globalCSSSize} characters (${summary.globalRuleCount} rules)`,
       );
-    }
-
-    console.log(`🎨 CSS Output:`);
-    console.log(breakdown.css);
-    console.groupEnd();
-  },
+      console.log(`  • Total CSS: ${summary.totalCSSSize} characters`);
 
-  /**
-   * Helper to extract CSS rules from raw CSS text
-   */
-  extractCSSRules(
-    css: string,
-  ): Array<{ selector: string; declarations: string }> {
-    const rules: Array<{ selector: string; declarations: string }> = [];
-
-    // Remove comments
-    let cleanCSS = css.replace(/\/\*[\s\S]*?\*\//g, '');
-
-    // Enhanced parser that handles nested CSS properly
-    this.parseCSSSafe(cleanCSS, rules);
-
-    return rules;
-  },
-
-  /**
-   * Safe CSS parser that handles nested rules properly
-   */
-  parseCSSSafe(
-    css: string,
-    rules: Array<{ selector: string; declarations: string }>,
-  ): void {
-    let i = 0;
-
-    while (i < css.length) {
-      // Skip whitespace
-      while (i < css.length && /\s/.test(css[i])) {
-        i++;
+      if (page) {
+        console.log(`📄 Page CSS:`);
+        console.log(`  • Total page CSS: ${page.cssSize} characters`);
+        console.log(`  • Total page rules: ${page.ruleCount}`);
+        console.log(
+          `  • Stylesheets: ${page.stylesheetCount} (${page.skippedStylesheets} skipped)`,
+        );
       }
 
-      if (i >= css.length) break;
-
-      // Find selector start
-      const selectorStart = i;
-      let braceDepth = 0;
-      let inString = false;
-      let stringChar = '';
-
-      // Find opening brace for this rule
-      while (i < css.length) {
-        const char = css[i];
-
-        if (inString) {
-          if (char === stringChar && css[i - 1] !== '\\') {
-            inString = false;
-          }
-        } else {
-          if (char === '"' || char === "'") {
-            inString = true;
-            stringChar = char;
-          } else if (char === '{') {
-            braceDepth++;
-            if (braceDepth === 1) {
-              break; // Found opening brace
-            }
-          }
-        }
-        i++;
+      console.log('🏷️ Properties & Keyframes:');
+      console.log(`  • Defined @property: ${summary.propertyCount}`);
+      console.log(`  • Defined @keyframes: ${summary.keyframeCount}`);
+
+      if (metrics) {
+        console.log(`⚡ Performance Metrics:`);
+        console.log(`  • Cache hits: ${metrics.hits}`);
+        console.log(`  • Cache misses: ${metrics.misses}`);
+        console.log(`  • Cached style reuses: ${metrics.unusedHits}`);
+        const hitRate =
+          metrics.hits + metrics.misses > 0
+            ? (
+                ((metrics.hits + (metrics.unusedHits || 0)) /
+                  (metrics.hits + metrics.misses)) *
+                100
+              ).toFixed(1)
+            : '0';
+        console.log(`  • Overall cache hit rate: ${hitRate}%`);
       }
 
-      if (i >= css.length) break;
-
-      const selector = css.substring(selectorStart, i).trim();
-      i++; // Skip opening brace
+      console.log('🔍 Details:');
+      console.log('  • Active classes:', summary.activeClasses);
+      console.log('  • Unused classes:', summary.unusedClasses);
+      console.groupEnd();
+    }
 
-      // Find matching closing brace and extract content
-      const contentStart = i;
-      braceDepth = 1;
-      inString = false;
+    return summary;
+  },
 
-      while (i < css.length && braceDepth > 0) {
-        const char = css[i];
+  // 8) Page-level CSS helpers
+  pageCSS(opts?: {
+    root?: Document | ShadowRoot;
+    prettify?: boolean;
+    log?: boolean;
+    includeCrossOrigin?: boolean;
+  }): string {
+    const {
+      root = document,
+      prettify = true,
+      log = false,
+      includeCrossOrigin = true,
+    } = opts || {};
+    const css = getPageCSS({ root, includeCrossOrigin });
+    const result = prettify ? prettifyCSS(css) : css;
+
+    if (log) {
+      console.group('📄 Page CSS (All Stylesheets)');
+      console.log(result || '(empty)');
+      console.groupEnd();
+    }
 
-        if (inString) {
-          if (char === stringChar && css[i - 1] !== '\\') {
-            inString = false;
-          }
-        } else {
-          if (char === '"' || char === "'") {
-            inString = true;
-            stringChar = char;
-          } else if (char === '{') {
-            braceDepth++;
-          } else if (char === '}') {
-            braceDepth--;
-          }
-        }
-        i++;
-      }
+    return result;
+  },
 
-      const content = css.substring(contentStart, i - 1).trim();
+  pageStats(opts?: {
+    root?: Document | ShadowRoot;
+    includeCrossOrigin?: boolean;
+  }): {
+    cssSize: number;
+    ruleCount: number;
+    stylesheetCount: number;
+    skippedStylesheets: number;
+  } {
+    const { root = document, includeCrossOrigin = true } = opts || {};
+    return getPageStats({ root, includeCrossOrigin });
+  },
 
-      // Check if content has nested rules
-      if (content.includes('{') && content.includes('}')) {
-        // Extract declarations (before any nested rules)
-        const declarationMatch = content.match(/^([^{]*)/);
-        const declarations = declarationMatch ? declarationMatch[1].trim() : '';
+  // 9) Install globally
+  install(): void {
+    if (
+      typeof window !== 'undefined' &&
+      (window as any).tastyDebug !== tastyDebug
+    ) {
+      (window as any).tastyDebug = tastyDebug;
+      console.log(
+        '🎨 tastyDebug installed on window. Run tastyDebug.help() for quick start guide.',
+      );
+    }
+  },
 
-        if (declarations) {
-          rules.push({ selector, declarations });
-        }
+  // 10) Beautiful console logging with collapsible CSS
+  log(target: CSSTarget, opts?: CssOptions & { title?: string }): void {
+    const { title, ...cssOpts } = opts || {};
+    const css = tastyDebug.css(target, cssOpts);
 
-        // Extract and parse nested rules recursively
-        const nestedStart = content.indexOf('{');
-        if (nestedStart !== -1) {
-          const nestedCSS = content.substring(nestedStart);
-          this.parseCSSSafe(nestedCSS, rules);
-        }
-      } else if (content.trim()) {
-        // Simple rule with just declarations
-        rules.push({ selector, declarations: content });
-      }
+    if (!css.trim()) {
+      console.warn(`🎨 No CSS found for target: ${String(target)}`);
+      return;
     }
-  },
 
-  /**
-   * Debug method to see raw CSS content and rule parsing
-   */
-  debugRawCSS(): void {
-    const allCSS = this.getAllCSS();
-    console.group('🔍 Raw CSS Debug');
-    console.log('📝 Raw CSS length:', allCSS.length);
-    console.log('📝 Raw CSS preview (first 2000 chars):');
-    console.log(allCSS.substring(0, 2000));
-
-    const rules = this.extractCSSRules(allCSS);
-    console.log('📊 Total extracted rules:', rules.length);
-    console.log('📋 First 10 rules:');
-    rules.slice(0, 10).forEach((rule, i) => {
-      console.log(`  ${i + 1}. ${rule.selector}`);
-    });
+    const targetStr = Array.isArray(target)
+      ? target.join(', ')
+      : String(target);
+    const displayTitle = title || `CSS for "${targetStr}"`;
 
-    // Show some examples of what gets filtered as tasty vs global
-    const tastyRules = rules.filter((rule) => {
-      const selectors = rule.selector.split(',').map((s) => s.trim());
-      return selectors.every((selector) => {
-        const cleanSelector = selector.replace(/[.#:\s>+~[\]()]/g, ' ');
-        const parts = cleanSelector.split(/\s+/).filter(Boolean);
-        return parts.length > 0 && parts.every((part) => /^t\d+$/.test(part));
-      });
-    });
+    // Get some stats about the CSS
+    const lines = css.split('\n').length;
+    const size = new Blob([css]).size;
+    const sizeStr = size > 1024 ? `${(size / 1024).toFixed(1)}KB` : `${size}B`;
 
-    const globalRules = rules.filter((rule) => {
-      const selectors = rule.selector.split(',').map((s) => s.trim());
-      return !selectors.every((selector) => {
-        const cleanSelector = selector.replace(/[.#:\s>+~[\]()]/g, ' ');
-        const parts = cleanSelector.split(/\s+/).filter(Boolean);
-        return parts.length > 0 && parts.every((part) => /^t\d+$/.test(part));
-      });
-    });
+    // Count CSS rules (blocks with opening braces)
+    const ruleCount = (css.match(/\{/g) || []).length;
 
-    console.log('🏷️ Tasty class rules found:', tastyRules.length);
-    console.log('🌍 Global rules found:', globalRules.length);
+    console.group(
+      `🎨 ${displayTitle} (${ruleCount} rules, ${lines} lines, ${sizeStr})`,
+    );
 
-    if (globalRules.length > 0) {
-      console.log('📋 First 5 global rules:');
-      globalRules.slice(0, 5).forEach((rule, i) => {
-        console.log(`  ${i + 1}. ${rule.selector}`);
+    // Detect sub-elements in CSS
+    const subElementMatches = css.match(/\[data-element="([^"]+)"\]/g) || [];
+    const subElements = [
+      ...new Set(
+        subElementMatches
+          .map((match) => match.match(/\[data-element="([^"]+)"\]/)?.[1])
+          .filter(Boolean),
+      ),
+    ];
+
+    if (subElements.length > 0) {
+      console.log(`🧩 Sub-elements found: ${subElements.join(', ')}`);
+
+      // Show stats and CSS for each sub-element
+      subElements.forEach((element) => {
+        const elementSelector = `[data-element="${element}"]`;
+        const elementRegex = new RegExp(
+          `[^}]*\\[data-element="${element.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}"\\][^{]*\\{[^}]*\\}`,
+          'gm',
+        );
+        const elementCSS = (css.match(elementRegex) || []).join('\n');
+
+        if (elementCSS) {
+          const elementRules = (elementCSS.match(/\{/g) || []).length;
+          const elementLines = elementCSS.split('\n').length;
+          const elementSize = new Blob([elementCSS]).size;
+          const elementSizeStr =
+            elementSize > 1024
+              ? `${(elementSize / 1024).toFixed(1)}KB`
+              : `${elementSize}B`;
+
+          console.groupCollapsed(
+            `🧩 ${element} (${elementRules} rules, ${elementLines} lines, ${elementSizeStr})`,
+          );
+          console.log(
+            `%c${elementCSS}`,
+            'color: #666; font-family: monospace; font-size: 12px; white-space: pre;',
+          );
+          console.groupEnd();
+        }
       });
     }
 
+    // Full CSS in collapsible group (hidden by default)
+    console.groupCollapsed('📄 Full CSS (click to expand)');
+    console.log(
+      `%c${css}`,
+      'color: #666; font-family: monospace; font-size: 12px; white-space: pre;',
+    );
     console.groupEnd();
-  },
-};
-
-/**
- * Check if we're in a development environment at runtime
- * Uses bracket notation to avoid bundler compilation
- */
-function isDevelopmentEnvironment(): boolean {
-  if (typeof process === 'undefined') return false;
 
-  // Use bracket notation to avoid bundler replacement
-  const nodeEnv = process.env?.['NODE_ENV'];
-  return nodeEnv === 'development' || nodeEnv !== 'production';
-}
+    console.groupEnd();
+  },
 
-/**
- * Install tastyDebug on window object for easy access in browser console
- * Only in non-production environments
- */
-export function installGlobalDebug(options?: { force?: boolean }): void {
-  const shouldInstall = options?.force || isDevelopmentEnvironment();
-
-  if (
-    typeof window !== 'undefined' &&
-    shouldInstall &&
-    (window as any).tastyDebug !== tastyDebug
-  ) {
-    (window as any).tastyDebug = tastyDebug;
+  // 11) Show help and usage examples
+  help(): void {
+    console.group('🎨 tastyDebug - Quick Start Guide');
+    console.log('💡 Essential commands:');
     console.log(
-      '🎨 tastyDebug installed on window.\n' +
-        '💡 Quick start:\n' +
-        '  • tastyDebug.getSummary() - comprehensive overview with properties, keyframes & global CSS\n' +
-        '  • tastyDebug.inspect(".my-element") - detailed element inspection\n' +
-        '  • tastyDebug.getGlobalCSS() - get all global CSS from createGlobalStyle()\n' +
-        '  • tastyDebug.logGlobalCSS() - log global CSS to console\n' +
-        '  • tastyDebug.logGlobalCSSBreakdown() - detailed global CSS analysis\n' +
-        '  • tastyDebug.debugRawCSS() - debug raw CSS parsing and filtering\n' +
-        '  • tastyDebug.getDefinedProperties() - list all @property definitions\n' +
-        '  • tastyDebug.getDefinedKeyframes() - list all keyframe definitions\n' +
-        '  • tastyDebug.getActiveCSS() / getCachedCSS() - get specific CSS\n' +
-        '  • tastyDebug.getCleanupSummary() - cleanup statistics overview\n' +
-        '  • tastyDebug.logCleanupHistory() - detailed cleanup history',
+      '  • tastyDebug.summary({ log: true }) - comprehensive overview',
     );
-  }
-}
+    console.log('  • tastyDebug.log("active") - beautiful CSS display');
+    console.log('  • tastyDebug.css("active") - get active CSS');
+    console.log(
+      '  • tastyDebug.inspect(".my-element") - detailed element inspection',
+    );
+    console.log('  • tastyDebug.global({ log: true }) - global CSS analysis');
+    console.log('  • tastyDebug.cache() - cache status');
+    console.log('  • tastyDebug.defs() - defined properties & keyframes');
+    console.log('  • tastyDebug.pageCSS({ log: true }) - all page CSS');
+    console.log('');
+    console.log('📖 Common targets for css()/log():');
+    console.log('  • "all" - all tasty CSS + global CSS');
+    console.log('  • "active" - CSS for classes in DOM');
+    console.log('  • "unused" - CSS for classes with refCount = 0');
+    console.log('  • "global" - only global CSS (createGlobalStyle)');
+    console.log('  • "page" - ALL page CSS (including non-tasty)');
+    console.log('  • "t123" - specific tasty class');
+    console.log('  • [".my-selector"] - CSS selector');
+    console.log('');
+    console.log('🔧 Available options:');
+    console.log('  • { log: true } - auto-log results to console');
+    console.log('  • { title: "Custom" } - custom title for log()');
+    console.log('  • { root: shadowRoot } - target Shadow DOM');
+    console.log('  • { prettify: false } - skip CSS formatting');
+    console.groupEnd();
+  },
+};
 
 /**
  * Auto-install in development
  */
-if (typeof window !== 'undefined' && isDevelopmentEnvironment()) {
-  installGlobalDebug();
+if (typeof window !== 'undefined' && isDevEnv()) {
+  tastyDebug.install();
 }
diff --git a/src/tasty/injector/README.md b/src/tasty/injector/README.md
deleted file mode 100644
index 74b7d43a1..000000000
--- a/src/tasty/injector/README.md
+++ /dev/null
@@ -1,228 +0,0 @@
-# Tasty Style Injector
-
-A high-performance CSS-in-JS solution designed to replace styled-components in the Tasty design system.
-
-## Overview
-
-The Style Injector provides:
-- **Hash-based deduplication** - identical CSS gets the same className
-- **Reference counting** - automatic cleanup when components unmount
-- **CSS nesting flattening** - handles `&`, `.Class`, `SubElement` patterns
-- **Keyframes injection** - first-class `@keyframes` support with deduplication
-- **Efficient bulk cleanup** - unused styles are marked and cleaned up in batches
-- **SSR support** - deterministic class names and CSS extraction
-- **Multiple roots** - works with Document and ShadowRoot
-- **Style elements** - reliable DOM insertion with fallbacks
-
-## Quick Start
-
-```typescript
-import { inject, keyframes, configure } from './tasty/injector';
-
-// Configure once (optional)
-configure({
-  cacheSize: 1000,
-  collectMetrics: true,
-});
-
-// Inject component styles
-const { className, dispose } = inject([{
-  selector: '.t-123',
-  declarations: 'color: red; padding: 10px;'
-}]);
-
-// Inject keyframes
-const fadeIn = keyframes({
-  from: { opacity: 0 },
-  to: { opacity: 1 },
-});
-
-// Use keyframes in styles
-const animatedComponent = inject([{
-  selector: '.t-456',
-  declarations: `animation: ${fadeIn} 300ms ease-in;`
-}]);
-
-// Inject global styles
-const globalDispose = inject([
-  { selector: 'body', declarations: 'margin: 0; font-family: Arial;' },
-  { selector: '.header', declarations: 'background: blue; height: 60px;' }
-]);
-
-// Cleanup when component unmounts
-useEffect(() => {
-  return () => {
-    dispose();
-    fadeIn.dispose();
-    animatedComponent.dispose();
-    globalDispose();
-  };
-}, []);
-```
-
-## API Reference
-
-### `inject(rules: StyleResult[], options?): InjectResult`
-
-Injects CSS rules and returns a className with dispose function. Supports both component injection (with generated class names) and global injection (with custom selectors).
-
-```typescript
-// Component injection - for tasty components
-const componentResult = inject([{
-  selector: '.t-abc123',
-  declarations: 'color: red; padding: 10px;',
-}]);
-// Returns: { className: 't-abc123', dispose: () => void }
-
-// Global injection - for global styles  
-const globalResult = inject([
-  {
-    selector: 'body',
-    declarations: 'margin: 0; font-family: Arial;',
-  },
-  {
-    selector: '.header',
-    declarations: 'background: blue; color: white;',
-    atRules: ['@media (min-width: 768px)'],
-  }
-]);
-// Returns: { className: 't-def456', dispose: () => void }
-```
-
-### `configure(config: Partial<StyleInjectorConfig>): void`
-
-Configures the global injector instance.
-
-```typescript
-configure({
-  maxRulesPerSheet: 8000,           // Cap rules per sheet (infinite by default)
-  unusedStylesThreshold: 500,       // Threshold for bulk cleanup of unused styles
-  bulkCleanupDelay: 5000,           // Delay before bulk cleanup (ms, ignored if idleCleanup is true)
-  idleCleanup: true,                // Use requestIdleCallback for cleanup when available
-  collectMetrics: false,            // Collect performance metrics
-  forceTextInjection: false,        // Force textContent insertion (auto-detected for tests)
-  nonce: 'csp-nonce',               // CSP nonce for style elements
-});
-```
-
-### `keyframes(steps, nameOrOptions?): KeyframesResult`
-
-Injects CSS keyframes and returns an object with `toString()` and `dispose()` methods.
-
-```typescript
-// Generated name (k0, k1, ...)
-const fadeIn = keyframes({
-  from: { opacity: 0 },
-  to: { opacity: 1 },
-});
-
-// Custom name via string parameter
-const slideIn = keyframes({
-  '0%': 'transform: translateX(-100%)',
-  '100%': 'transform: translateX(0)',
-}, 'slideInAnimation');
-
-// Custom name via options
-const pulse = keyframes({
-  '0%': { opacity: 0.5 },
-  '50%': { opacity: 1 },
-  '100%': { opacity: 0.5 },
-}, { name: 'pulseAnimation' });
-
-// With custom root (ShadowDOM)
-const spinInShadow = keyframes({
-  from: 'transform: rotate(0deg)',
-  to: 'transform: rotate(360deg)',
-}, { name: 'spin', root: shadowRoot });
-
-// Use in CSS
-const css = `animation: ${fadeIn} 300ms ease-in;`;
-console.log(fadeIn.toString()); // "k0" or custom name
-
-// Cleanup
-fadeIn.dispose();
-```
-
-### `getCssText(options?): string`
-
-Extracts CSS text for SSR.
-
-```typescript
-const cssForSSR = getCssText();
-```
-
-## Architecture
-
-```
-┌─────────────────┐    ┌──────────────────┐    ┌─────────────────┐
-│   tastyElement  │────│  StyleInjector   │────│  SheetManager   │
-│   tastyGlobal   │    │                  │    │                 │
-└─────────────────┘    └──────────────────┘    └─────────────────┘
-         │                        │                       │
-         │                        │                       │
-         ▼                        ▼                       ▼
-┌─────────────────┐    ┌──────────────────┐    ┌─────────────────┐
-│  renderStyles   │    │ KeyframesManager │    │  RootRegistry   │
-│                 │    │                  │    │                 │
-└─────────────────┘    └──────────────────┘    └─────────────────┘
-         │                                            │
-         │                                            │
-         ▼                                            ▼
-┌─────────────────┐                             ┌─────────────────┐
-│   StyleResult   │                             │ CSSStyleSheet   │
-│     Array       │                             │ <style> element │
-└─────────────────┘                             └─────────────────┘
-```
-
-## Implementation Status
-
-### ✅ Complete
-- Core types and interfaces
-- Hash utility (collision-resistant, base52 encoding)
-- Direct StyleResult injection (bypasses CSS parsing)
-- Keyframes injection with deduplication and reference counting
-- SheetManager (DOM manipulation, cleanup)
-- StyleInjector core (injection, deduplication, GC)
-- Global configuration API
-- Comprehensive test suite
-
-### 🔧 In Progress
-- Integration with tasty components
-
-### 🚀 Ready For
-- Integration with `tastyElement` and `tastyGlobal`
-- Replacement of styled-components
-- Production deployment
-
-## Test Coverage
-
-- **Comprehensive test coverage** covering all critical functionality
-- All major code paths tested: hashing, direct injection, sheet management, reference counting, bulk cleanup
-
-## Files
-
-- `types.ts` - TypeScript interfaces and types
-- `hash.ts` - Hash utility for class name generation
-- `sheet-manager.ts` - DOM stylesheet management
-- `injector.ts` - Core StyleInjector class
-- `index.ts` - Global API and configuration
-- `*.test.ts` - Comprehensive test suites
-
-## Performance Features
-
-- **Deduplication** - Identical CSS reuses the same className
-- **Keyframes deduplication** - Identical keyframes reuse the same name via JSON.stringify caching
-- **Reference counting** - Automatic cleanup prevents memory leaks
-- **Bulk cleanup** - Unused styles are marked and cleaned up efficiently in batches
-- **Style elements** - Reliable DOM insertion with textContent fallbacks
-- **Unused style reuse** - Previously used styles can be instantly reactivated
-- **Minimal CSSOM manipulation** - Bulk operations reduce DOM write overhead
-
-## Browser Support
-
-- **All browsers** - Uses reliable `<style>` element insertion
-- **CSS injection** - Uses CSSStyleSheet.insertRule with textContent fallback
-- **Shadow DOM** - Full support for multiple roots
-- **SSR** - Deterministic class names and CSS extraction
-
-The injector is ready for production use and provides a complete replacement for styled-components with better performance and deterministic behavior.
diff --git a/src/tasty/injector/index.ts b/src/tasty/injector/index.ts
index c951e6af3..9dddd69e8 100644
--- a/src/tasty/injector/index.ts
+++ b/src/tasty/injector/index.ts
@@ -1,7 +1,13 @@
+import { isDevEnv } from '../utils/isDevEnv';
 import { StyleResult } from '../utils/renderStyles';
 
 import { StyleInjector } from './injector';
-import { DisposeFunction, InjectResult, StyleInjectorConfig } from './types';
+import {
+  DisposeFunction,
+  GlobalInjectResult,
+  InjectResult,
+  StyleInjectorConfig,
+} from './types';
 
 // Use a more robust global singleton that survives React Strict Mode
 const GLOBAL_INJECTOR_KEY = '__TASTY_GLOBAL_INJECTOR__';
@@ -49,17 +55,27 @@ function isTestEnvironment(): boolean {
 }
 
 /**
- * Configure the global style injector
+ * Create default configuration with optional test environment detection
  */
-export function configure(config: Partial<StyleInjectorConfig> = {}): void {
-  const fullConfig: StyleInjectorConfig = {
+function createDefaultConfig(isTest?: boolean): StyleInjectorConfig {
+  return {
     maxRulesPerSheet: 8192, // safer default cap per sheet
-    unusedStylesThreshold: 200, // default threshold for bulk cleanup of unused styles
+    unusedStylesThreshold: 500, // default threshold for bulk cleanup of unused styles
     bulkCleanupDelay: 5000, // default delay before bulk cleanup (ignored if idleCleanup is true)
     idleCleanup: true, // default to using requestIdleCallback instead of setTimeout
-    collectMetrics: false, // default to no performance tracking
-    forceTextInjection: false, // auto-enable for test environments
-    debugMode: false, // reduce memory usage by avoiding full cssText storage
+    forceTextInjection: isTest ?? false, // auto-enable for test environments
+    devMode: isDevEnv(), // enable dev features: performance tracking and debug info
+    bulkCleanupBatchRatio: 0.5,
+    unusedStylesMinAgeMs: 10000,
+  };
+}
+
+/**
+ * Configure the global style injector
+ */
+export function configure(config: Partial<StyleInjectorConfig> = {}): void {
+  const fullConfig: StyleInjectorConfig = {
+    ...createDefaultConfig(),
     ...config,
   };
 
@@ -84,16 +100,36 @@ function getGlobalInjector(): StyleInjector {
   return storage[GLOBAL_INJECTOR_KEY]!;
 }
 
+/**
+ * Allocate a className for a cacheKey without injecting styles yet
+ */
+export function allocateClassName(
+  cacheKey: string,
+  options?: { root?: Document | ShadowRoot },
+): { className: string; isNewAllocation: boolean } {
+  return getGlobalInjector().allocateClassName(cacheKey, options);
+}
+
 /**
  * Inject styles and return className with dispose function
  */
 export function inject(
   rules: StyleResult[],
-  options?: { root?: Document | ShadowRoot },
+  options?: { root?: Document | ShadowRoot; cacheKey?: string },
 ): InjectResult {
   return getGlobalInjector().inject(rules, options);
 }
 
+/**
+ * Inject global rules that should not reserve tasty class names
+ */
+export function injectGlobal(
+  rules: StyleResult[],
+  options?: { root?: Document | ShadowRoot },
+): GlobalInjectResult {
+  return getGlobalInjector().injectGlobal(rules, options);
+}
+
 /**
  * Inject keyframes and return object with toString() and dispose()
  */
@@ -182,13 +218,7 @@ export function createInjector(
   const isTest = isTestEnvironment();
 
   const fullConfig: StyleInjectorConfig = {
-    maxRulesPerSheet: 8192, // safer default cap per sheet
-    unusedStylesThreshold: 500, // default threshold for bulk cleanup of unused styles
-    bulkCleanupDelay: 5000, // default delay before bulk cleanup (ignored if idleCleanup is true)
-    idleCleanup: true, // default to using requestIdleCallback instead of setTimeout
-    collectMetrics: false, // default to no performance tracking
-    forceTextInjection: isTest, // auto-enable for test environments
-    debugMode: false, // reduce memory usage by avoiding full cssText storage
+    ...createDefaultConfig(isTest),
     ...config,
   };
 
@@ -221,7 +251,6 @@ export type {
   KeyframesResult,
   KeyframesSteps,
   KeyframesCacheEntry,
-  UnusedRuleInfo,
   CacheMetrics,
 } from './types';
 
diff --git a/src/tasty/injector/injector.test.ts b/src/tasty/injector/injector.test.ts
index d48b41409..afd197e1d 100644
--- a/src/tasty/injector/injector.test.ts
+++ b/src/tasty/injector/injector.test.ts
@@ -418,7 +418,7 @@ describe('StyleInjector', () => {
       expect(document.head.querySelectorAll('[data-tasty]').length).toBe(1);
     });
 
-    it('should restore unused styles when reused', () => {
+    it('should generate new class names for the same styles', () => {
       const css = '&{ color: red; }';
 
       const result1 = injector.inject(cssToStyleResults(css, 't123'));
@@ -427,14 +427,16 @@ describe('StyleInjector', () => {
       // Dispose the style
       result1.dispose();
 
-      // Inject the same style again (should restore from unused)
+      // Inject the same style again (should get a new class name)
       const result2 = injector.inject(cssToStyleResults(css, 't123'));
 
-      // Should get the same className back
-      expect(result2.className).toBe(className1);
+      // Should get a different className (no reuse)
+      expect(result2.className).not.toBe(className1);
 
-      // Style should still exist in DOM (no re-insertion)
-      expect(document.head.querySelectorAll('[data-tasty]').length).toBe(1);
+      // Style sheet count depends on cleanup - first style is marked as unused
+      // but not immediately removed from DOM
+      const styleSheets = document.head.querySelectorAll('[data-tasty]').length;
+      expect(styleSheets).toBeGreaterThanOrEqual(1);
     });
 
     it('should handle multiple disposals correctly', () => {
@@ -454,13 +456,13 @@ describe('StyleInjector', () => {
       expect(results.length).toBe(10);
     });
 
-    it('should force bulk cleanup when forceBulkCleanup() is called', () => {
+    it('should force bulk cleanup when cleanup() is called', () => {
       const css = '&{ color: red; }';
       const result = injector.inject(cssToStyleResults(css));
       result.dispose();
 
       // Force bulk cleanup
-      injector.forceBulkCleanup();
+      injector.cleanup();
 
       // Cleanup should have been processed immediately
     });
@@ -777,7 +779,7 @@ describe('StyleInjector', () => {
     });
 
     test('demonstrates limited content-based deduplication behavior', () => {
-      const injector = new StyleInjector({ collectMetrics: true });
+      const injector = new StyleInjector({ devMode: true });
 
       // Create two identical global style components
       const GlobalStyle1 = injector.createGlobalStyle`
@@ -816,8 +818,8 @@ describe('StyleInjector', () => {
       expect(metrics.misses).toBe(2);
       expect(metrics.hits).toBe(0);
 
-      // However, if we inject the exact same StyleResult objects again
-      // with the same className in the selector, it should deduplicate
+      // Class name reuse is now disabled, so injecting with a specific
+      // className in the selector will still generate a new className
       const result3 = injector.inject([
         {
           selector: `.${result1.className}`,
@@ -825,8 +827,9 @@ describe('StyleInjector', () => {
         },
       ]);
 
-      // This should reuse the existing className (if it has the right format)
-      expect(result3.className).toBe(result1.className);
+      // Should generate a new className (no reuse based on selector)
+      expect(result3.className).not.toBe(result1.className);
+      expect(result3.className).toMatch(/^t\d+$/);
 
       // Cleanup
       result1.dispose();
diff --git a/src/tasty/injector/injector.ts b/src/tasty/injector/injector.ts
index 0ed2e163e..fe8b9a852 100644
--- a/src/tasty/injector/injector.ts
+++ b/src/tasty/injector/injector.ts
@@ -11,6 +11,7 @@ import { parseStyle } from '../utils/styles';
 // Simple CSS text to StyleResult converter for injectGlobal backward compatibility
 import { SheetManager } from './sheet-manager';
 import {
+  GlobalInjectResult,
   InjectResult,
   KeyframesResult,
   KeyframesSteps,
@@ -31,18 +32,59 @@ export class StyleInjector {
   private sheetManager: SheetManager;
   private config: StyleInjectorConfig;
   private cleanupScheduled = false;
+  private globalRuleCounter = 0;
 
   constructor(config: StyleInjectorConfig = {}) {
     this.config = config;
     this.sheetManager = new SheetManager(config);
   }
 
+  /**
+   * Allocate a className for a cacheKey without injecting styles yet.
+   * This allows separating className allocation (render phase) from style injection (insertion phase).
+   */
+  allocateClassName(
+    cacheKey: string,
+    options?: { root?: Document | ShadowRoot },
+  ): { className: string; isNewAllocation: boolean } {
+    const root = options?.root || document;
+    const registry = this.sheetManager.getRegistry(root);
+
+    // Check if we can reuse existing className for this cache key
+    if (registry.cacheKeyToClassName.has(cacheKey)) {
+      const className = registry.cacheKeyToClassName.get(cacheKey)!;
+      return {
+        className,
+        isNewAllocation: false,
+      };
+    }
+
+    // Generate new className and reserve it
+    const className = generateClassName(registry.classCounter++);
+
+    // Create placeholder RuleInfo to reserve the className
+    const placeholderRuleInfo = {
+      className,
+      ruleIndex: -1, // Placeholder - will be set during actual injection
+      sheetIndex: -1, // Placeholder - will be set during actual injection
+    };
+
+    // Store RuleInfo only once by className, and map cacheKey separately
+    registry.rules.set(className, placeholderRuleInfo);
+    registry.cacheKeyToClassName.set(cacheKey, className);
+
+    return {
+      className,
+      isNewAllocation: true,
+    };
+  }
+
   /**
    * Inject styles from StyleResult objects
    */
   inject(
     rules: StyleResult[],
-    options?: { root?: Document | ShadowRoot },
+    options?: { root?: Document | ShadowRoot; cacheKey?: string },
   ): InjectResult {
     const root = options?.root || document;
     const registry = this.sheetManager.getRegistry(root);
@@ -56,102 +98,56 @@ export class StyleInjector {
 
     // Rules are now in StyleRule format directly
 
-    // Try to dedupe by className first — if the same class was already inserted, reuse it
-    // Only extract className if it looks like a generated tasty className (t + digits)
-    const preExtractedClass = this.extractClassName(rules);
-    const generatedClass =
-      preExtractedClass && /^t\d+$/.test(preExtractedClass)
-        ? preExtractedClass
-        : null;
-
-    if (generatedClass && registry.rules.has(generatedClass)) {
-      const currentRefCount = registry.refCounts.get(generatedClass) || 0;
-      registry.refCounts.set(generatedClass, currentRefCount + 1);
-      // If this class was previously marked as unused, clear that state now
-      if (registry.unusedRules.has(generatedClass)) {
-        registry.unusedRules.delete(generatedClass);
-        if (registry.metrics) {
-          // Consider this a reuse rather than a cold miss
-          registry.metrics.unusedHits++;
-        }
-      }
+    // Check if we can reuse based on cache key
+    const cacheKey = options?.cacheKey;
+    let className: string;
+    let isPreAllocated = false;
 
-      // Update metrics
-      if (registry.metrics) {
-        registry.metrics.hits++;
-      }
+    if (cacheKey && registry.cacheKeyToClassName.has(cacheKey)) {
+      // Reuse existing class for this cache key
+      className = registry.cacheKeyToClassName.get(cacheKey)!;
+      const existingRuleInfo = registry.rules.get(className)!;
 
-      return {
-        className: generatedClass,
-        dispose: () => this.dispose(generatedClass, registry),
-      };
-    }
+      // Check if this is a placeholder (pre-allocated but not yet injected)
+      isPreAllocated =
+        existingRuleInfo.ruleIndex === -1 && existingRuleInfo.sheetIndex === -1;
+
+      if (!isPreAllocated) {
+        // Already injected - just increment refCount
+        const currentRefCount = registry.refCounts.get(className) || 0;
+        registry.refCounts.set(className, currentRefCount + 1);
 
-    // Try to restore from unused styles if className exists but is not active
-    if (
-      generatedClass &&
-      registry.rules.has(generatedClass) &&
-      !registry.refCounts.has(generatedClass)
-    ) {
-      const restored = this.sheetManager.restoreFromUnused(
-        registry,
-        generatedClass,
-      );
-      if (restored) {
         // Update metrics
         if (registry.metrics) {
           registry.metrics.hits++;
         }
 
         return {
-          className: generatedClass,
-          dispose: () => this.dispose(generatedClass, registry),
+          className,
+          dispose: () => this.dispose(className, registry),
         };
       }
+    } else {
+      // Generate new className
+      className = generateClassName(registry.classCounter++);
     }
 
-    // No active cache dedupe — rely on provided className or disposed cache only
-
-    // Generate final className - only use extracted className if it's a generated tasty className
-    const className = generatedClass
-      ? generatedClass
-      : generateClassName(registry.classCounter++);
-
-    // If a different pre-extracted class was used in rules, rewrite selectors to the final class
-    // Also increase specificity for class-based selectors by duplicating the class
-    const rulesToInsert =
-      generatedClass && generatedClass !== className
-        ? rules.map((r) => {
-            if (r.selector.startsWith('.' + generatedClass)) {
-              const newSelector =
-                '.' + className + r.selector.slice(generatedClass.length + 1);
-              // Increase specificity by duplicating the class for class-based selectors
-              const specificSelector =
-                newSelector.startsWith('.' + className) &&
-                /^\.t\d+/.test(newSelector)
-                  ? '.' + className + newSelector
-                  : newSelector;
-              return {
-                ...r,
-                selector: specificSelector,
-              } as StyleRule;
-            }
-            return r;
-          })
-        : rules.map((r) => {
-            // Increase specificity for class-based selectors by duplicating the class
-            if (r.selector.startsWith('.') && /^\.t\d+/.test(r.selector)) {
-              const classMatch = r.selector.match(/^\.t\d+/);
-              if (classMatch) {
-                const baseClass = classMatch[0];
-                return {
-                  ...r,
-                  selector: baseClass + r.selector,
-                } as StyleRule;
-              }
-            }
-            return r;
-          });
+    // Process rules: handle needsClassName flag and apply specificity
+    const rulesToInsert = rules.map((rule) => {
+      let newSelector = rule.selector;
+
+      // If rule needs className prepended
+      if (rule.needsClassName) {
+        // Simple concatenation: .className (double specificity) + selectorSuffix
+        newSelector = `.${className}.${className}${newSelector}`;
+      }
+
+      return {
+        ...rule,
+        selector: newSelector,
+        needsClassName: undefined, // Remove the flag after processing
+      };
+    });
 
     // Before inserting, auto-register @property for any color custom properties being defined.
     // Fast parse: split declarations by ';' and match "--*-color:"
@@ -200,7 +196,18 @@ export class StyleInjector {
 
     // Store in registry
     registry.refCounts.set(className, 1);
-    registry.rules.set(className, ruleInfo);
+
+    if (isPreAllocated) {
+      // Update the existing placeholder entry with real rule info
+      registry.rules.set(className, ruleInfo);
+      // cacheKey mapping already exists from allocation
+    } else {
+      // Store new entries
+      registry.rules.set(className, ruleInfo);
+      if (cacheKey) {
+        registry.cacheKeyToClassName.set(cacheKey, className);
+      }
+    }
 
     // Update metrics
     if (registry.metrics) {
@@ -215,84 +222,73 @@ export class StyleInjector {
   }
 
   /**
-   * Extract className from rules (assumes first rule contains the base className)
+   * Inject global styles (rules without a generated tasty class selector)
+   * This ensures we don't reserve a tasty class name (t{number}) for global rules,
+   * which could otherwise collide with element-level styles and break lookups.
    */
-  private extractClassName(rules: StyleResult[]): string | null {
-    for (const rule of rules) {
-      const match = rule.selector.match(/^\.([a-zA-Z0-9_-]+)/);
-      if (match) {
-        return match[1];
-      }
+  injectGlobal(
+    rules: StyleResult[],
+    options?: { root?: Document | ShadowRoot },
+  ): GlobalInjectResult {
+    const root = options?.root || document;
+    const registry = this.sheetManager.getRegistry(root);
+
+    if (!rules || rules.length === 0) {
+      return { dispose: () => {} };
     }
-    return null;
-  }
 
-  /**
-   * Generate cache key from style rules with optimized deduplication
-   */
-  private generateCacheKey(rules: StyleRule[]): string {
-    const normalizeSelector = (selector: string): string => {
-      const match = selector.match(/^\.[a-zA-Z0-9_-]+(.*)$/);
-      return match ? match[1] : selector;
-    };
+    // Use a non-tasty identifier to avoid any collisions with .t{number} classes
+    const key = `global:${this.globalRuleCounter++}`;
 
-    // Sort rules to ensure consistent cache keys for equivalent rule sets
-    const sortedRules = [...rules].sort((a, b) => {
-      const aKey = `${normalizeSelector(a.selector)}${
-        a.atRules ? a.atRules.join('|') : ''
-      }`;
-      const bKey = `${normalizeSelector(b.selector)}${
-        b.atRules ? b.atRules.join('|') : ''
-      }`;
-      return aKey.localeCompare(bKey);
-    });
+    const info = this.sheetManager.insertGlobalRule(
+      registry,
+      rules as unknown as StyleRule[],
+      key,
+      root,
+    );
+
+    if (registry.metrics) {
+      registry.metrics.totalInsertions++;
+    }
 
-    return sortedRules
-      .map((rule) => {
-        const at =
-          rule.atRules && rule.atRules.length
-            ? `@${rule.atRules.join('|')}`
-            : '';
-        const sel = normalizeSelector(rule.selector);
-        // Normalize declarations by sorting properties for consistent caching
-        const normalizedDeclarations = rule.declarations
-          .split(';')
-          .filter(Boolean)
-          .map((decl) => decl.trim())
-          .sort()
-          .join(';');
-        return `${sel}{${normalizedDeclarations}}${at}`;
-      })
-      .join('');
+    return {
+      dispose: () => {
+        if (info) this.sheetManager.deleteGlobalRule(registry, key);
+      },
+    };
   }
 
   /**
    * Dispose of a className
    */
   private dispose(className: string, registry: any): void {
-    const currentRefCount = registry.refCounts.get(className) || 0;
-    if (currentRefCount <= 1) {
-      // Mark as unused immediately
-      this.sheetManager.markAsUnused(registry, className);
-    } else {
-      registry.refCounts.set(className, currentRefCount - 1);
+    const currentRefCount = registry.refCounts.get(className);
+    // Guard against stale double-dispose or mismatched lifecycle
+    if (currentRefCount == null || currentRefCount <= 0) {
+      return;
     }
-  }
 
-  /**
-   * Cleanup unused rules
-   */
-  cleanup(root?: Document | ShadowRoot): void {
-    const registry = this.sheetManager.getRegistry(root || document);
-    this.sheetManager.processCleanupQueue(registry);
+    const newRefCount = currentRefCount - 1;
+    registry.refCounts.set(className, newRefCount);
+
+    if (newRefCount === 0) {
+      // Update metrics
+      if (registry.metrics) {
+        registry.metrics.totalUnused++;
+      }
+
+      // Check if cleanup should be scheduled
+      this.sheetManager.checkCleanupNeeded(registry);
+    }
   }
 
   /**
    * Force bulk cleanup of unused styles
    */
-  forceBulkCleanup(root?: Document | ShadowRoot): void {
+  cleanup(root?: Document | ShadowRoot): void {
     const registry = this.sheetManager.getRegistry(root || document);
-    this.sheetManager['performBulkCleanup'](registry);
+    // Clean up ALL unused rules regardless of batch ratio
+    this.sheetManager.forceCleanup(registry);
   }
 
   /**
@@ -318,23 +314,29 @@ export class StyleInjector {
     for (const cls of classNames) {
       const info = registry.rules.get(cls);
       if (info) {
-        if (info.cssText && info.cssText.length) {
-          cssChunks.push(...info.cssText);
-        } else {
-          // Fallback: try to read from live sheet by index range
-          const sheet = registry.sheets[info.sheetIndex];
-          const styleSheet = sheet?.sheet?.sheet;
-          if (styleSheet) {
-            const start = Math.max(0, info.ruleIndex);
-            const end = Math.min(
-              styleSheet.cssRules.length - 1,
-              (info.endRuleIndex as number) ?? info.ruleIndex,
-            );
+        // Always prefer reading from the live stylesheet, since indices can change
+        const sheet = registry.sheets[info.sheetIndex];
+        const styleSheet = sheet?.sheet?.sheet;
+        if (styleSheet) {
+          const start = Math.max(0, info.ruleIndex);
+          const end = Math.min(
+            styleSheet.cssRules.length - 1,
+            (info.endRuleIndex as number) ?? info.ruleIndex,
+          );
+          // Additional validation: ensure indices are valid and in correct order
+          if (
+            start >= 0 &&
+            end >= start &&
+            start < styleSheet.cssRules.length
+          ) {
             for (let i = start; i <= end; i++) {
               const rule = styleSheet.cssRules[i] as CSSRule | undefined;
               if (rule) cssChunks.push(rule.cssText);
             }
           }
+        } else if (info.cssText && info.cssText.length) {
+          // Fallback in environments without CSSOM access
+          cssChunks.push(...info.cssText);
         }
       }
     }
@@ -359,15 +361,6 @@ export class StyleInjector {
     this.sheetManager.resetMetrics(registry);
   }
 
-  /**
-   * Force cleanup of unused styles (useful for memory pressure)
-   */
-  forceCleanupUnused(options?: { root?: Document | ShadowRoot }): void {
-    const root = options?.root || document;
-    const registry = this.sheetManager.getRegistry(root);
-    this.sheetManager['performBulkCleanup'](registry);
-  }
-
   /**
    * Define a CSS @property custom property
    * Example:
@@ -520,9 +513,15 @@ export class StyleInjector {
 
     entry.refCount--;
     if (entry.refCount <= 0) {
-      // Mark as unused
+      // Dispose immediately - keyframes are global and safe to clean up right away
+      this.sheetManager.deleteKeyframes(registry, entry.info);
       registry.keyframesCache.delete(cacheKey);
-      this.sheetManager.markKeyframesAsUnused(registry, entry.name);
+
+      // Update metrics
+      if (registry.metrics) {
+        registry.metrics.totalUnused++;
+        registry.metrics.stylesCleanedUp++;
+      }
     }
   }
 
@@ -568,8 +567,8 @@ export class StyleInjector {
         const css = this.interpolateTemplate();
         if (css.trim()) {
           const styleResults = this.parseCSSToStyleResults(css);
-          // Bind the inject method to the outer injector instance
-          const result = injector.inject(styleResults, {
+          // Bind the global inject method to the outer injector instance
+          const result = injector.injectGlobal(styleResults as any, {
             root: this.props.root,
           });
           this.disposeFunction = result.dispose;
diff --git a/src/tasty/injector/sheet-manager.test.ts b/src/tasty/injector/sheet-manager.test.ts
index 66efc01cf..366c55a1f 100644
--- a/src/tasty/injector/sheet-manager.test.ts
+++ b/src/tasty/injector/sheet-manager.test.ts
@@ -58,7 +58,7 @@ describe('SheetManager', () => {
       expect(registry.sheets).toEqual([]);
       expect(registry.refCounts).toBeInstanceOf(Map);
       expect(registry.rules).toBeInstanceOf(Map);
-      expect(registry.unusedRules).toBeInstanceOf(Map);
+      expect(registry.refCounts).toBeInstanceOf(Map);
     });
 
     it('should return same registry for same root', () => {
@@ -290,8 +290,8 @@ describe('SheetManager', () => {
     });
   });
 
-  describe('markAsUnused and bulk cleanup', () => {
-    it('should mark rule as unused without immediate DOM cleanup', () => {
+  describe('unused tracking and bulk cleanup', () => {
+    it('should track unused rules via refCount = 0', () => {
       const registry = sheetManager.getRegistry(document);
 
       const rules = [createStyleRule('.test', 'color: red;')];
@@ -306,15 +306,16 @@ describe('SheetManager', () => {
       registry.rules.set(className, ruleInfo!);
       registry.refCounts.set(className, 1);
 
-      sheetManager.markAsUnused(registry, className);
+      // Mark as unused by setting refCount to 0
+      registry.refCounts.set(className, 0);
 
       // Rule should be marked as unused but still in registry.rules
       expect(registry.rules.has(className)).toBe(true);
-      expect(registry.unusedRules.has(className)).toBe(true);
-      expect(registry.refCounts.has(className)).toBe(false);
+      // Rule should be unused (refCount = 0)
+      expect(registry.refCounts.get(className)).toBe(0);
     });
 
-    it('should restore from unused rules', () => {
+    it('should reuse unused rules by setting refCount > 0', () => {
       const registry = sheetManager.getRegistry(document);
 
       const rules = [createStyleRule('.test', 'color: red;')];
@@ -330,18 +331,17 @@ describe('SheetManager', () => {
       registry.refCounts.set(className, 1);
 
       // Mark as unused
-      sheetManager.markAsUnused(registry, className);
+      registry.refCounts.set(className, 0);
 
-      // Restore from unused
-      const restored = sheetManager.restoreFromUnused(registry, className);
+      // Restore by setting refCount to 1
+      registry.refCounts.set(className, 1);
 
-      expect(restored).toBeTruthy();
-      expect(registry.unusedRules.has(className)).toBe(false);
+      // Rule should be active (refCount > 0)
       expect(registry.refCounts.get(className)).toBe(1);
       expect(registry.rules.has(className)).toBe(true);
     });
 
-    it('should schedule bulk cleanup when threshold is exceeded', () => {
+    it('should schedule bulk cleanup when threshold is exceeded', (done) => {
       const manager = new SheetManager({ unusedStylesThreshold: 2 });
       const registry = manager.getRegistry(document);
 
@@ -357,12 +357,22 @@ describe('SheetManager', () => {
         const className = `test-class-${i}`;
 
         registry.rules.set(className, ruleInfo!);
-        registry.refCounts.set(className, 1);
-        manager.markAsUnused(registry, className);
+        registry.refCounts.set(className, 0); // Mark as unused
       }
 
-      // Should have scheduled bulk cleanup
-      expect(registry.bulkCleanupTimeout).toBeTruthy();
+      // Check if cleanup should be scheduled
+      manager.checkCleanupNeeded(registry);
+
+      // Should have scheduled cleanup check timeout immediately
+      expect(registry.cleanupCheckTimeout).toBeTruthy();
+
+      // Wait for async cleanup check to complete
+      setTimeout(() => {
+        // Should have scheduled bulk cleanup after the check
+        expect(registry.bulkCleanupTimeout).toBeTruthy();
+        expect(registry.cleanupCheckTimeout).toBe(null);
+        done();
+      }, 10);
     });
   });
 
@@ -439,7 +449,7 @@ describe('SheetManager', () => {
   });
 
   describe('bulk cleanup scheduling', () => {
-    it('should use requestIdleCallback when idleCleanup is enabled', () => {
+    it('should use requestIdleCallback when idleCleanup is enabled', (done) => {
       // Mock requestIdleCallback
       const mockRequestIdleCallback = jest.fn((callback) => {
         return 123; // mock handle - don't execute callback immediately
@@ -465,18 +475,27 @@ describe('SheetManager', () => {
       registry.rules.set('test-class', ruleInfo!);
       registry.refCounts.set('test-class', 1);
 
-      // This should trigger bulk cleanup scheduling
-      manager.markAsUnused(registry, 'test-class');
+      // Mark as unused and trigger bulk cleanup scheduling
+      registry.refCounts.set('test-class', 0);
+      manager.checkCleanupNeeded(registry);
 
-      expect(mockRequestIdleCallback).toHaveBeenCalled();
-      expect(registry.bulkCleanupTimeout).toBe(123);
+      // Should have scheduled cleanup check timeout immediately
+      expect(registry.cleanupCheckTimeout).toBeTruthy();
 
-      // Cleanup mocks
-      delete (global as any).requestIdleCallback;
-      delete (global as any).cancelIdleCallback;
+      // Wait for async cleanup check to complete
+      setTimeout(() => {
+        expect(mockRequestIdleCallback).toHaveBeenCalled();
+        expect(registry.bulkCleanupTimeout).toBe(123);
+        expect(registry.cleanupCheckTimeout).toBe(null);
+
+        // Cleanup mocks
+        delete (global as any).requestIdleCallback;
+        delete (global as any).cancelIdleCallback;
+        done();
+      }, 10);
     });
 
-    it('should fallback to setTimeout when requestIdleCallback is not available', () => {
+    it('should fallback to setTimeout when requestIdleCallback is not available', (done) => {
       // Ensure requestIdleCallback is not available
       delete (global as any).requestIdleCallback;
 
@@ -500,11 +519,23 @@ describe('SheetManager', () => {
       registry.rules.set('test-class', ruleInfo!);
       registry.refCounts.set('test-class', 1);
 
-      manager.markAsUnused(registry, 'test-class');
+      registry.refCounts.set('test-class', 0);
+      manager.checkCleanupNeeded(registry);
+
+      // Should have called setTimeout for cleanup check (0ms) immediately
+      expect(mockSetTimeout).toHaveBeenCalledWith(expect.any(Function), 0);
+      expect(registry.cleanupCheckTimeout).toBeTruthy();
 
-      expect(mockSetTimeout).toHaveBeenCalledWith(expect.any(Function), 100);
+      // Wait for async cleanup check to complete
+      setTimeout(() => {
+        // Should have called setTimeout again for bulk cleanup (100ms)
+        expect(mockSetTimeout).toHaveBeenCalledWith(expect.any(Function), 100);
+        expect(registry.bulkCleanupTimeout).toBeTruthy();
+        expect(registry.cleanupCheckTimeout).toBe(null);
 
-      mockSetTimeout.mockRestore();
+        mockSetTimeout.mockRestore();
+        done();
+      }, 10);
     });
   });
 });
diff --git a/src/tasty/injector/sheet-manager.ts b/src/tasty/injector/sheet-manager.ts
index 7910b1006..c745c7125 100644
--- a/src/tasty/injector/sheet-manager.ts
+++ b/src/tasty/injector/sheet-manager.ts
@@ -11,7 +11,6 @@ import {
   SheetInfo,
   StyleInjectorConfig,
   StyleRule,
-  UnusedRuleInfo,
 } from './types';
 
 import type { StyleHandler } from '../utils/styles';
@@ -31,11 +30,10 @@ export class SheetManager {
     let registry = this.rootRegistries.get(root);
 
     if (!registry) {
-      const metrics: CacheMetrics | undefined = this.config.collectMetrics
+      const metrics: CacheMetrics | undefined = this.config.devMode
         ? {
             hits: 0,
             misses: 0,
-            unusedHits: 0,
             bulkCleanups: 0,
             totalInsertions: 0,
             totalUnused: 0,
@@ -49,15 +47,16 @@ export class SheetManager {
         sheets: [],
         refCounts: new Map(),
         rules: new Map(),
-        unusedRules: new Map(),
+        cacheKeyToClassName: new Map(),
         ruleTextSet: new Set<string>(),
         bulkCleanupTimeout: null,
+        cleanupCheckTimeout: null,
         metrics,
         classCounter: 0,
         keyframesCache: new Map(),
-        unusedKeyframes: new Map(),
         keyframesCounter: 0,
         injectedProperties: new Set<string>(),
+        globalRules: new Map(),
       } as unknown as RootRegistry;
 
       this.rootRegistries.set(root, registry);
@@ -132,7 +131,6 @@ export class SheetManager {
       targetSheet = this.createSheet(registry, root);
     }
 
-    const ruleIndex = this.findAvailableRuleIndex(targetSheet);
     const sheetIndex = registry.sheets.indexOf(targetSheet);
 
     try {
@@ -180,7 +178,9 @@ export class SheetManager {
 
       // Insert grouped rules
       const insertedRuleTexts: string[] = [];
-      let currentRuleIndex = ruleIndex;
+      const insertedIndices: number[] = []; // Track exact indices
+      // Calculate rule index atomically right before insertion to prevent race conditions
+      let currentRuleIndex = this.findAvailableRuleIndex(targetSheet);
       let firstInsertedIndex: number | null = null;
       let lastInsertedIndex: number | null = null;
 
@@ -202,8 +202,10 @@ export class SheetManager {
         const styleSheet = styleElement.sheet;
 
         if (styleSheet && !this.config.forceTextInjection) {
+          // Calculate index atomically for each rule to prevent concurrent insertion races
           const maxIndex = styleSheet.cssRules.length;
-          const safeIndex = Math.min(Math.max(0, currentRuleIndex), maxIndex);
+          const atomicRuleIndex = this.findAvailableRuleIndex(targetSheet);
+          const safeIndex = Math.min(Math.max(0, atomicRuleIndex), maxIndex);
 
           // Helper: split comma-separated selectors safely (ignores commas inside [] () " ')
           const splitSelectorsSafely = (selectorList: string): string[] => {
@@ -246,6 +248,9 @@ export class SheetManager {
 
           try {
             styleSheet.insertRule(fullRule, safeIndex);
+            // Update sheet ruleCount immediately to prevent concurrent race conditions
+            targetSheet.ruleCount++;
+            insertedIndices.push(safeIndex); // Track this index
             if (firstInsertedIndex == null) firstInsertedIndex = safeIndex;
             lastInsertedIndex = safeIndex;
             currentRuleIndex = safeIndex + 1;
@@ -266,9 +271,14 @@ export class SheetManager {
                 }
 
                 try {
+                  // Calculate index atomically for each individual selector insertion
                   const maxIdx = styleSheet.cssRules.length;
-                  const idx = Math.min(Math.max(0, currentRuleIndex), maxIdx);
+                  const atomicIdx = this.findAvailableRuleIndex(targetSheet);
+                  const idx = Math.min(Math.max(0, atomicIdx), maxIdx);
                   styleSheet.insertRule(singleRule, idx);
+                  // Update sheet ruleCount immediately
+                  targetSheet.ruleCount++;
+                  insertedIndices.push(idx); // Track this index
                   if (firstInsertedIndex == null) firstInsertedIndex = idx;
                   lastInsertedIndex = idx;
                   currentRuleIndex = idx + 1;
@@ -287,11 +297,16 @@ export class SheetManager {
           }
         } else {
           // Use textContent (either as fallback or when forceTextInjection is enabled)
+          // Calculate index atomically for textContent insertion too
+          const atomicRuleIndex = this.findAvailableRuleIndex(targetSheet);
           styleElement.textContent =
             (styleElement.textContent || '') + '\n' + fullRule;
-          if (firstInsertedIndex == null) firstInsertedIndex = currentRuleIndex;
-          lastInsertedIndex = currentRuleIndex;
-          currentRuleIndex++;
+          // Update sheet ruleCount immediately
+          targetSheet.ruleCount++;
+          insertedIndices.push(atomicRuleIndex); // Track this index
+          if (firstInsertedIndex == null) firstInsertedIndex = atomicRuleIndex;
+          lastInsertedIndex = atomicRuleIndex;
+          currentRuleIndex = atomicRuleIndex + 1;
         }
 
         // CRITICAL DEBUG: Verify the style element is in DOM only if there are issues and we're not using forceTextInjection
@@ -305,8 +320,8 @@ export class SheetManager {
           );
         }
 
-        // Conditionally store cssText and track for debug
-        if (this.config.debugMode) {
+        // Dev-only: store cssText for debugging tools
+        if (this.config.devMode) {
           insertedRuleTexts.push(fullRule);
           try {
             registry.ruleTextSet.add(fullRule);
@@ -317,18 +332,16 @@ export class SheetManager {
         // currentRuleIndex already adjusted above
       }
 
-      // Update sheet info based on the number of rules inserted
-      const finalRuleIndex = currentRuleIndex - 1;
-      if (finalRuleIndex >= targetSheet.ruleCount) {
-        targetSheet.ruleCount = finalRuleIndex + 1;
-      }
+      // Sheet ruleCount is now updated immediately after each insertion
+      // No need for deferred update logic
 
       return {
         className,
-        ruleIndex: firstInsertedIndex ?? ruleIndex,
+        ruleIndex: firstInsertedIndex ?? 0,
         sheetIndex,
-        cssText: this.config.debugMode ? insertedRuleTexts : [],
-        endRuleIndex: lastInsertedIndex ?? finalRuleIndex,
+        cssText: this.config.devMode ? insertedRuleTexts : undefined,
+        endRuleIndex: lastInsertedIndex ?? firstInsertedIndex ?? 0,
+        indices: insertedIndices.length > 0 ? insertedIndices : undefined,
       };
     } catch (error) {
       console.warn('Failed to insert CSS rules:', error, {
@@ -345,11 +358,122 @@ export class SheetManager {
   insertGlobalRule(
     registry: RootRegistry,
     flattenedRules: StyleRule[],
-    className: string,
+    globalKey: string,
     root: Document | ShadowRoot,
   ): RuleInfo | null {
-    // For now, global rules are handled the same way as regular rules
-    return this.insertRule(registry, flattenedRules, className, root);
+    // Insert the rule using the same mechanism as regular rules
+    const ruleInfo = this.insertRule(registry, flattenedRules, globalKey, root);
+
+    // Track global rules for index adjustment
+    if (ruleInfo) {
+      registry.globalRules.set(globalKey, ruleInfo);
+    }
+
+    return ruleInfo;
+  }
+
+  /**
+   * Delete a global CSS rule by key
+   */
+  public deleteGlobalRule(registry: RootRegistry, globalKey: string): void {
+    const ruleInfo = registry.globalRules.get(globalKey);
+    if (!ruleInfo) {
+      return;
+    }
+
+    // Delete the rule using the standard deletion mechanism
+    this.deleteRule(registry, ruleInfo);
+
+    // Remove from global rules tracking
+    registry.globalRules.delete(globalKey);
+  }
+
+  /**
+   * Adjust rule indices after deletion to account for shifting
+   */
+  private adjustIndicesAfterDeletion(
+    registry: RootRegistry,
+    sheetIndex: number,
+    startIdx: number,
+    endIdx: number,
+    deleteCount: number,
+    deletedRuleInfo: RuleInfo,
+    deletedIndices?: number[],
+  ): void {
+    try {
+      // Helper function to adjust a single RuleInfo
+      const adjustRuleInfo = (info: RuleInfo): void => {
+        if (info === deletedRuleInfo) return; // Skip the deleted rule
+        if (info.sheetIndex !== sheetIndex) return; // Different sheet
+
+        // If info has exact indices, adjust them
+        if (info.indices && info.indices.length > 0 && deletedIndices) {
+          // Sort deleted indices for efficient binary search
+          const sortedDeleted = [...deletedIndices].sort((a, b) => a - b);
+
+          // Adjust each index based on how many deleted indices are before it
+          info.indices = info.indices.map((idx) => {
+            // Count how many deleted indices are less than this index
+            let shift = 0;
+            for (const delIdx of sortedDeleted) {
+              if (delIdx < idx) shift++;
+              else break;
+            }
+            return idx - shift;
+          });
+
+          // Update ruleIndex and endRuleIndex to match adjusted indices
+          if (info.indices.length > 0) {
+            info.ruleIndex = Math.min(...info.indices);
+            info.endRuleIndex = Math.max(...info.indices);
+          }
+        } else {
+          // Fallback: adjust using range logic
+          const infoEnd = (info.endRuleIndex as number) ?? info.ruleIndex;
+
+          if (info.ruleIndex > endIdx) {
+            // Rule is after deleted range - shift left
+            info.ruleIndex = Math.max(0, info.ruleIndex - deleteCount);
+            if (info.endRuleIndex != null) {
+              info.endRuleIndex = Math.max(
+                info.ruleIndex,
+                infoEnd - deleteCount,
+              );
+            }
+          } else if (info.ruleIndex <= endIdx && infoEnd >= startIdx) {
+            // Rule overlaps with deleted range (should not normally happen)
+            // Clamp endRuleIndex to avoid pointing into deleted region
+            if (info.endRuleIndex != null) {
+              const newEnd = Math.max(info.ruleIndex, startIdx - 1);
+              info.endRuleIndex = Math.max(info.ruleIndex, newEnd);
+            }
+          }
+        }
+      };
+
+      // Adjust active rules
+      for (const info of registry.rules.values()) {
+        adjustRuleInfo(info);
+      }
+
+      // Adjust global rules
+      for (const info of registry.globalRules.values()) {
+        adjustRuleInfo(info);
+      }
+
+      // No need to separately adjust unused rules since they're part of the rules Map
+
+      // Adjust keyframes indices stored in cache
+      for (const entry of registry.keyframesCache.values()) {
+        const ki = entry.info as KeyframesInfo;
+        if (ki.sheetIndex !== sheetIndex) continue;
+        if (ki.ruleIndex > endIdx) {
+          ki.ruleIndex = Math.max(0, ki.ruleIndex - deleteCount);
+        }
+      }
+    } catch (_) {
+      // Defensive: do not let index adjustments crash cleanup
+    }
   }
 
   /**
@@ -363,9 +487,10 @@ export class SheetManager {
     }
 
     try {
-      const texts = Array.isArray(ruleInfo.cssText)
-        ? ruleInfo.cssText.slice()
-        : [];
+      const texts: string[] =
+        this.config.devMode && Array.isArray(ruleInfo.cssText)
+          ? ruleInfo.cssText.slice()
+          : [];
 
       const styleElement = sheet.sheet;
       const styleSheet = styleElement.sheet;
@@ -373,44 +498,74 @@ export class SheetManager {
       if (styleSheet) {
         const rules = styleSheet.cssRules;
 
-        // Prefer index-based deletion when possible
-        const startIdx = Math.max(0, ruleInfo.ruleIndex);
-        const endIdx = Math.min(
-          rules.length - 1,
-          Number.isFinite(ruleInfo.endRuleIndex as number)
-            ? (ruleInfo.endRuleIndex as number)
-            : startIdx - 1,
-        );
-
-        if (Number.isFinite(startIdx) && endIdx >= startIdx) {
-          for (let idx = endIdx; idx >= startIdx; idx--) {
-            if (idx < 0 || idx >= styleSheet.cssRules.length) continue;
-            styleSheet.deleteRule(idx);
+        // Use exact indices if available, otherwise fall back to range
+        if (ruleInfo.indices && ruleInfo.indices.length > 0) {
+          // NEW: Delete using exact tracked indices
+          const sortedIndices = [...ruleInfo.indices].sort((a, b) => b - a); // Sort descending
+          const deletedIndices: number[] = [];
+
+          for (const idx of sortedIndices) {
+            if (idx >= 0 && idx < styleSheet.cssRules.length) {
+              try {
+                styleSheet.deleteRule(idx);
+                deletedIndices.push(idx);
+              } catch (e) {
+                console.warn(`Failed to delete rule at index ${idx}:`, e);
+              }
+            }
           }
+
           sheet.ruleCount = Math.max(
             0,
-            sheet.ruleCount - (endIdx - startIdx + 1),
+            sheet.ruleCount - deletedIndices.length,
           );
-        } else if (this.config.debugMode && texts.length) {
-          // Fallback: locate each rule by exact cssText and delete (debug mode only)
-          for (const text of texts) {
-            let idx = -1;
-            for (let i = styleSheet.cssRules.length - 1; i >= 0; i--) {
-              if ((styleSheet.cssRules[i] as CSSRule).cssText === text) {
-                idx = i;
-                break;
-              }
-            }
-            if (idx >= 0) {
+
+          // Adjust indices for all other rules
+          if (deletedIndices.length > 0) {
+            this.adjustIndicesAfterDeletion(
+              registry,
+              ruleInfo.sheetIndex,
+              Math.min(...deletedIndices),
+              Math.max(...deletedIndices),
+              deletedIndices.length,
+              ruleInfo,
+              deletedIndices,
+            );
+          }
+        } else {
+          // FALLBACK: Use old range-based deletion for backwards compatibility
+          const startIdx = Math.max(0, ruleInfo.ruleIndex);
+          const endIdx = Math.min(
+            rules.length - 1,
+            Number.isFinite(ruleInfo.endRuleIndex as number)
+              ? (ruleInfo.endRuleIndex as number)
+              : startIdx,
+          );
+
+          if (Number.isFinite(startIdx) && endIdx >= startIdx) {
+            const deleteCount = endIdx - startIdx + 1;
+            for (let idx = endIdx; idx >= startIdx; idx--) {
+              if (idx < 0 || idx >= styleSheet.cssRules.length) continue;
               styleSheet.deleteRule(idx);
             }
+            sheet.ruleCount = Math.max(0, sheet.ruleCount - deleteCount);
+
+            // After deletion, all subsequent rule indices shift left by deleteCount.
+            // We must adjust stored indices for all other RuleInfo within the same sheet.
+            this.adjustIndicesAfterDeletion(
+              registry,
+              ruleInfo.sheetIndex,
+              startIdx,
+              endIdx,
+              deleteCount,
+              ruleInfo,
+            );
           }
-          sheet.ruleCount = Math.max(0, sheet.ruleCount - texts.length);
         }
       }
 
-      // Remove texts from validation set
-      if (this.config.debugMode) {
+      // Dev-only: remove cssText entries from validation set
+      if (this.config.devMode && texts.length) {
         try {
           for (const text of texts) {
             registry.ruleTextSet.delete(text);
@@ -458,61 +613,21 @@ export class SheetManager {
   }
 
   /**
-   * Mark a ruleset as unused but keep it in the stylesheet
-   */
-  markAsUnused(registry: RootRegistry, className: string): void {
-    const ruleInfo = registry.rules.get(className);
-    if (!ruleInfo) return;
-
-    // Mark as unused (but keep in registry.rules)
-    const unusedInfo: UnusedRuleInfo = {
-      ruleInfo,
-      markedUnusedAt: Date.now(),
-    };
-
-    registry.unusedRules.set(className, unusedInfo);
-    registry.refCounts.delete(className);
-
-    // Update metrics
-    if (registry.metrics) {
-      registry.metrics.totalUnused++;
-    }
-
-    // Schedule bulk cleanup if threshold exceeded
-    const threshold = this.config.unusedStylesThreshold || 500;
-    if (registry.unusedRules.size >= threshold) {
-      this.scheduleBulkCleanup(registry);
-    }
-  }
-
-  /**
-   * Restore a ruleset from unused styles
-   */
-  restoreFromUnused(
-    registry: RootRegistry,
-    className: string,
-  ): RuleInfo | null {
-    const unusedInfo = registry.unusedRules.get(className);
-    if (!unusedInfo) return null;
-
-    // Remove from unused rules (rules stays in registry.rules)
-    registry.unusedRules.delete(className);
-    registry.refCounts.set(className, 1);
-
-    // Update metrics
-    if (registry.metrics) {
-      registry.metrics.unusedHits++;
-    }
-
-    return unusedInfo.ruleInfo;
-  }
-
-  /**
-   * Schedule bulk cleanup of all unused styles
+   * Schedule bulk cleanup of all unused styles (non-stacking)
    */
   private scheduleBulkCleanup(registry: RootRegistry): void {
-    // Don't schedule if already scheduled
-    if (registry.bulkCleanupTimeout) return;
+    // Clear any existing timeout to prevent stacking
+    if (registry.bulkCleanupTimeout) {
+      if (
+        this.config.idleCleanup &&
+        typeof cancelIdleCallback !== 'undefined'
+      ) {
+        cancelIdleCallback(registry.bulkCleanupTimeout as unknown as number);
+      } else {
+        clearTimeout(registry.bulkCleanupTimeout);
+      }
+      registry.bulkCleanupTimeout = null;
+    }
 
     const performCleanup = () => {
       this.performBulkCleanup(registry);
@@ -528,13 +643,47 @@ export class SheetManager {
   }
 
   /**
-   * Perform bulk cleanup of all unused styles
+   * Force cleanup of unused styles
    */
-  private performBulkCleanup(registry: RootRegistry): void {
-    if (registry.unusedRules.size === 0) return;
+  public forceCleanup(registry: RootRegistry): void {
+    this.performBulkCleanup(registry, true);
+  }
 
+  /**
+   * Perform bulk cleanup of all unused styles
+   */
+  private performBulkCleanup(registry: RootRegistry, cleanupAll = false): void {
     const cleanupStartTime = Date.now();
-    const classNamesToCleanup = Array.from(registry.unusedRules.keys());
+
+    // Calculate unused rules dynamically: rules that have refCount = 0
+    const unusedClassNames = Array.from(registry.refCounts.entries())
+      .filter(([, refCount]) => refCount === 0)
+      .map(([className]) => className);
+
+    if (unusedClassNames.length === 0) return;
+
+    // Build candidates list - no age filtering needed
+    const candidates = unusedClassNames.map((className) => {
+      const ruleInfo = registry.rules.get(className)!; // We know it exists
+      return {
+        className,
+        ruleInfo,
+      };
+    });
+
+    if (candidates.length === 0) return;
+
+    // Limit deletion scope per run (batch ratio) unless cleanupAll is true
+    let selected = candidates;
+    if (!cleanupAll) {
+      const ratio = this.config.bulkCleanupBatchRatio ?? 0.5;
+      const limit = Math.max(
+        1,
+        Math.floor(candidates.length * Math.min(1, Math.max(0, ratio))),
+      );
+      selected = candidates.slice(0, limit);
+    }
+
     let cleanedUpCount = 0;
     let totalCssSize = 0;
     let totalRulesDeleted = 0;
@@ -546,22 +695,18 @@ export class SheetManager {
     >();
 
     // Calculate CSS size before deletion and group rules
-    for (const className of classNamesToCleanup) {
-      const unusedInfo = registry.unusedRules.get(className);
-      if (!unusedInfo) continue;
-
-      const ruleInfo = unusedInfo.ruleInfo;
+    for (const { className, ruleInfo } of selected) {
       const sheetIndex = ruleInfo.sheetIndex;
 
-      // Calculate CSS size for this rule
-      const cssSize = ruleInfo.cssText.reduce(
-        (total, css) => total + css.length,
-        0,
-      );
-      totalCssSize += cssSize;
-
-      // Count number of rules (based on cssText array length)
-      totalRulesDeleted += ruleInfo.cssText.length;
+      // Dev-only metrics: estimate CSS size and rule count if available
+      if (this.config.devMode && Array.isArray(ruleInfo.cssText)) {
+        const cssSize = ruleInfo.cssText.reduce(
+          (total, css) => total + css.length,
+          0,
+        );
+        totalCssSize += cssSize;
+        totalRulesDeleted += ruleInfo.cssText.length;
+      }
 
       if (!rulesBySheet.has(sheetIndex)) {
         rulesBySheet.set(sheetIndex, []);
@@ -575,28 +720,63 @@ export class SheetManager {
       rulesInSheet.sort((a, b) => b.ruleInfo.ruleIndex - a.ruleInfo.ruleIndex);
 
       for (const { className, ruleInfo } of rulesInSheet) {
-        // SAFETY: Re-check that the rule is still unused at deletion time.
-        // Between scheduling and execution a class may have been restored
-        // (refCounts set and removed from unusedRules). Skip such entries.
-        if (!registry.unusedRules.has(className)) {
-          continue;
-        }
-        if (registry.refCounts.has(className)) {
+        // SAFETY 1: Double-check refCount is still 0
+        const currentRefCount = registry.refCounts.get(className) || 0;
+        if (currentRefCount > 0) {
           // Class became active again; do not delete
           continue;
         }
 
-        // Ensure we delete the same RuleInfo we marked earlier to avoid
-        // accidentally deleting updated rules for the same class.
+        // SAFETY 2: Ensure rule wasn't replaced
+        // Between scheduling and execution a class may have been replaced with a new RuleInfo
         const currentInfo = registry.rules.get(className);
-        if (currentInfo && currentInfo !== ruleInfo) {
+        if (currentInfo !== ruleInfo) {
           // Rule was replaced; skip deletion of the old reference
           continue;
         }
 
+        // SAFETY 3: Verify the sheet element is still valid and accessible
+        const sheetInfo = registry.sheets[ruleInfo.sheetIndex];
+        if (!sheetInfo || !sheetInfo.sheet) {
+          // Sheet was removed or corrupted; skip this rule
+          continue;
+        }
+
+        // SAFETY 4: Verify the stylesheet itself is accessible
+        const styleSheet = sheetInfo.sheet.sheet;
+        if (!styleSheet) {
+          // Stylesheet not available; skip this rule
+          continue;
+        }
+
+        // SAFETY 5: Verify rule index is still within valid range
+        const maxRuleIndex = styleSheet.cssRules.length - 1;
+        const startIdx = ruleInfo.ruleIndex;
+        const endIdx = ruleInfo.endRuleIndex ?? ruleInfo.ruleIndex;
+
+        if (startIdx < 0 || endIdx > maxRuleIndex || startIdx > endIdx) {
+          // Rule indices are out of bounds; skip this rule
+          continue;
+        }
+
+        // All safety checks passed - proceed with deletion
         this.deleteRule(registry, ruleInfo);
         registry.rules.delete(className);
-        registry.unusedRules.delete(className);
+        registry.refCounts.delete(className);
+
+        // Clean up cache key mappings that point to this className
+        const keysToDelete: string[] = [];
+        for (const [
+          key,
+          mappedClassName,
+        ] of registry.cacheKeyToClassName.entries()) {
+          if (mappedClassName === className) {
+            keysToDelete.push(key);
+          }
+        }
+        for (const key of keysToDelete) {
+          registry.cacheKeyToClassName.delete(key);
+        }
         cleanedUpCount++;
       }
     }
@@ -616,14 +796,6 @@ export class SheetManager {
     }
   }
 
-  /**
-   * Process the deletion queue for cleanup
-   */
-  processCleanupQueue(registry: RootRegistry): void {
-    // This method is kept for compatibility but the logic has changed
-    // We no longer use a deletion queue, instead marking styles as unused immediately
-  }
-
   /**
    * Get total number of rules across all sheets
    */
@@ -661,7 +833,17 @@ export class SheetManager {
    * Get cache performance metrics
    */
   getMetrics(registry: RootRegistry): CacheMetrics | null {
-    return registry.metrics || null;
+    if (!registry.metrics) return null;
+
+    // Calculate unusedHits on demand - only count CSS rules since keyframes are disposed immediately
+    const unusedRulesCount = Array.from(registry.refCounts.values()).filter(
+      (count) => count === 0,
+    ).length;
+
+    return {
+      ...registry.metrics,
+      unusedHits: unusedRulesCount,
+    };
   }
 
   /**
@@ -672,7 +854,6 @@ export class SheetManager {
       registry.metrics = {
         hits: 0,
         misses: 0,
-        unusedHits: 0,
         bulkCleanups: 0,
         totalInsertions: 0,
         totalUnused: 0,
@@ -811,7 +992,7 @@ export class SheetManager {
         name,
         ruleIndex,
         sheetIndex,
-        cssText: fullRule,
+        cssText: this.config.devMode ? fullRule : undefined,
       };
     } catch (error) {
       console.warn('Failed to insert keyframes:', error);
@@ -845,12 +1026,33 @@ export class SheetManager {
   }
 
   /**
-   * Mark keyframes as unused
+   * Schedule async cleanup check (non-stacking)
    */
-  markKeyframesAsUnused(registry: RootRegistry, name: string): void {
-    // Implementation similar to markAsUnused but for keyframes
+  public checkCleanupNeeded(registry: RootRegistry): void {
+    // Clear any existing check timeout to prevent stacking
+    if (registry.cleanupCheckTimeout) {
+      clearTimeout(registry.cleanupCheckTimeout);
+      registry.cleanupCheckTimeout = null;
+    }
+
+    // Schedule the actual check with setTimeout(..., 0)
+    registry.cleanupCheckTimeout = setTimeout(() => {
+      this.performCleanupCheck(registry);
+      registry.cleanupCheckTimeout = null;
+    }, 0);
+  }
+
+  /**
+   * Perform the actual cleanup check (called asynchronously)
+   */
+  private performCleanupCheck(registry: RootRegistry): void {
+    // Count unused rules (refCount = 0) - keyframes are disposed immediately
+    const unusedRulesCount = Array.from(registry.refCounts.values()).filter(
+      (count) => count === 0,
+    ).length;
     const threshold = this.config.unusedStylesThreshold || 500;
-    if (registry.unusedKeyframes.size >= threshold) {
+
+    if (unusedRulesCount >= threshold) {
       this.scheduleBulkCleanup(registry);
     }
   }
@@ -878,6 +1080,12 @@ export class SheetManager {
       registry.bulkCleanupTimeout = null;
     }
 
+    // Cancel any scheduled cleanup check
+    if (registry.cleanupCheckTimeout) {
+      clearTimeout(registry.cleanupCheckTimeout);
+      registry.cleanupCheckTimeout = null;
+    }
+
     // Remove all sheets
     for (const sheet of registry.sheets) {
       try {
diff --git a/src/tasty/injector/types.ts b/src/tasty/injector/types.ts
index 4bfcc7801..471103636 100644
--- a/src/tasty/injector/types.ts
+++ b/src/tasty/injector/types.ts
@@ -3,6 +3,10 @@ export interface InjectResult {
   dispose: () => void;
 }
 
+export interface GlobalInjectResult {
+  dispose: () => void;
+}
+
 export type DisposeFunction = () => void;
 
 export interface StyleInjectorConfig {
@@ -11,19 +15,32 @@ export interface StyleInjectorConfig {
   unusedStylesThreshold?: number; // default: 500 (threshold for bulk cleanup of unused styles)
   bulkCleanupDelay?: number; // default: 5000ms (delay before bulk cleanup, ignored if idleCleanup is true)
   idleCleanup?: boolean; // default: true (use requestIdleCallback for cleanup when available)
-  collectMetrics?: boolean; // default: false (performance tracking)
   forceTextInjection?: boolean; // default: auto-detected (true in test environments, false otherwise)
-  /** When false, avoid storing full cssText for each rule block to reduce memory. */
-  debugMode?: boolean; // default: false (store less data)
+  /** Enable development mode features: performance metrics and debug information storage */
+  devMode?: boolean; // default: auto-detected (true in development, false in production)
+  /**
+   * Ratio of unused styles to delete per bulk cleanup run (0..1).
+   * Defaults to 0.5 (oldest half) to reduce risk of removing styles
+   * that may be restored shortly after being marked unused.
+   */
+  bulkCleanupBatchRatio?: number;
+  /**
+   * Minimum age (in ms) a style must remain unused before eligible for deletion.
+   * Helps avoid races during rapid mount/unmount cycles. Default: 10000ms.
+   */
+  unusedStylesMinAgeMs?: number;
 }
 
 export interface RuleInfo {
   className: string;
   ruleIndex: number;
   sheetIndex: number;
-  cssText: string[];
+  /** Dev-only: full CSS texts inserted for this class; omitted in production */
+  cssText?: string[];
   /** Inclusive end index of the contiguous block of inserted rules for this className */
   endRuleIndex?: number;
+  /** NEW: exact indices of all inserted rules for this className */
+  indices?: number[];
 }
 
 export interface SheetInfo {
@@ -32,11 +49,6 @@ export interface SheetInfo {
   holes: number[]; // Available rule indices from deletions
 }
 
-export interface UnusedRuleInfo {
-  ruleInfo: RuleInfo;
-  markedUnusedAt: number; // timestamp when marked as unused
-}
-
 export interface CleanupStats {
   timestamp: number;
   classesDeleted: number;
@@ -47,20 +59,23 @@ export interface CleanupStats {
 export interface CacheMetrics {
   hits: number;
   misses: number;
-  unusedHits: number; // hits from unused styles
   bulkCleanups: number; // number of bulk cleanup operations
   totalInsertions: number;
   totalUnused: number; // total styles marked as unused
   stylesCleanedUp: number; // total number of styles cleaned up in bulk operations
   cleanupHistory: CleanupStats[]; // detailed history of each cleanup operation
   startTime: number;
+
+  // Calculated getters
+  unusedHits?: number; // calculated as current unused styles count (refCount = 0)
 }
 
 export interface RootRegistry {
   sheets: SheetInfo[];
-  refCounts: Map<string, number>; // className -> refCount
+  refCounts: Map<string, number>; // className -> refCount (0 means unused)
   rules: Map<string, RuleInfo>; // className -> rule info (includes both active and unused)
-  unusedRules: Map<string, UnusedRuleInfo>; // className -> unused rule info
+  /** Cache key to className mapping to avoid dual storage of RuleInfo objects */
+  cacheKeyToClassName: Map<string, string>; // cacheKey -> className
   /** Deduplication set of fully materialized CSS rules inserted into sheets */
   ruleTextSet: Set<string>;
   /** Scheduled bulk cleanup timeout */
@@ -68,18 +83,20 @@ export interface RootRegistry {
     | ReturnType<typeof requestIdleCallback>
     | ReturnType<typeof setTimeout>
     | null;
+  /** Scheduled cleanup check timeout */
+  cleanupCheckTimeout: ReturnType<typeof setTimeout> | null;
   /** Performance metrics (optional) */
   metrics?: CacheMetrics;
   /** Counter for generating sequential class names like t0, t1, t2... */
   classCounter: number;
   /** Keyframes cache by JSON.stringify(steps) -> entry */
   keyframesCache: Map<string, KeyframesCacheEntry>;
-  /** Unused keyframes for cleanup */
-  unusedKeyframes: Map<string, UnusedRuleInfo>;
   /** Counter for generating keyframes names like k0, k1, k2... */
   keyframesCounter: number;
   /** Set of injected @property names for tracking */
   injectedProperties: Set<string>;
+  /** Global rules tracking for index adjustment */
+  globalRules: Map<string, RuleInfo>; // globalKey -> rule info
 }
 
 // StyleRule is now just an alias for StyleResult from renderStyles
@@ -89,7 +106,8 @@ export interface KeyframesInfo {
   name: string;
   sheetIndex: number;
   ruleIndex: number;
-  cssText: string;
+  /** Dev-only: full CSS text of the @keyframes rule; omitted in production */
+  cssText?: string;
 }
 
 export type KeyframeStep = string | Record<string, string | number>;
diff --git a/src/tasty/tasty.test.tsx b/src/tasty/tasty.test.tsx
index 47f450beb..748f1ce1d 100644
--- a/src/tasty/tasty.test.tsx
+++ b/src/tasty/tasty.test.tsx
@@ -1,7 +1,9 @@
-import { getByTestId, render } from '@testing-library/react';
+import { cleanup, getByTestId, render } from '@testing-library/react';
+import { act } from 'react';
 
 import { Button } from '../components/actions';
 import { Block } from '../components/Block';
+import { Space } from '../components/layout/Space';
 
 import { tastyDebug } from './debug';
 import { BreakpointsProvider } from './providers/BreakpointsProvider';
@@ -572,7 +574,7 @@ describe('tasty() API', () => {
     ) as Element;
 
     // Example: Get CSS for specific element
-    const cssForElement = tastyDebug.inspectDOMElement(headerElement);
+    const cssForElement = tastyDebug.css(headerElement);
     expect(cssForElement).toContain('grid-template-areas');
 
     // Example: Get CSS for specific class
@@ -580,10 +582,849 @@ describe('tasty() API', () => {
       .split(' ')
       .find((cls) => /^t\d+$/.test(cls));
     if (className) {
-      const cssForClass = tastyDebug.getCSSForClass(className);
+      const cssForClass = tastyDebug.css(className);
       expect(cssForClass).toContain('display: grid');
     }
 
     expect(defaultContainer).toMatchTastySnapshot();
   });
 });
+
+describe('style order consistency', () => {
+  // Helper function to extract class names from rendered components
+  function getClassName(container: HTMLElement): string {
+    const element = container.firstElementChild as HTMLElement;
+    return (
+      element?.className?.split(' ').find((cls) => /^t\d+$/.test(cls)) || ''
+    );
+  }
+
+  it('should generate same class for two components made with tasty having same styles but different order', () => {
+    const Component1 = tasty({
+      styles: {
+        padding: '2x',
+        margin: '1x',
+        fill: '#blue',
+        color: '#white',
+        radius: '1r',
+      },
+    });
+
+    const Component2 = tasty({
+      styles: {
+        color: '#white',
+        radius: '1r',
+        fill: '#blue',
+        margin: '1x',
+        padding: '2x',
+      },
+    });
+
+    const { container: container1 } = render(<Component1 />);
+    const { container: container2 } = render(<Component2 />);
+
+    const className1 = getClassName(container1);
+    const className2 = getClassName(container2);
+
+    expect(className1).toBe(className2);
+    expect(className1).toBeTruthy(); // Ensure we actually got a class name
+  });
+
+  it('should generate same class for two components extending Space with tasty having same styles but different order', () => {
+    const ExtendedSpace1 = tasty(Space, {
+      styles: {
+        padding: '3x',
+        fill: '#purple',
+        border: '1bw solid #dark',
+        gap: '2x',
+        radius: '2r',
+      },
+    });
+
+    const ExtendedSpace2 = tasty(Space, {
+      styles: {
+        border: '1bw solid #dark',
+        radius: '2r',
+        gap: '2x',
+        fill: '#purple',
+        padding: '3x',
+      },
+    });
+
+    const { container: container1 } = render(<ExtendedSpace1 />);
+    const { container: container2 } = render(<ExtendedSpace2 />);
+
+    const className1 = getClassName(container1);
+    const className2 = getClassName(container2);
+
+    expect(className1).toBe(className2);
+    expect(className1).toBeTruthy();
+  });
+
+  it('should generate same class for two Space components with styles prop in different order', () => {
+    const styles1 = {
+      padding: '4x',
+      margin: '2x',
+      fill: '#green',
+      border: '2bw solid #black',
+      width: '200px',
+    };
+
+    const styles2 = {
+      width: '200px',
+      border: '2bw solid #black',
+      fill: '#green',
+      margin: '2x',
+      padding: '4x',
+    };
+
+    const { container: container1 } = render(<Space styles={styles1} />);
+    const { container: container2 } = render(<Space styles={styles2} />);
+
+    const className1 = getClassName(container1);
+    const className2 = getClassName(container2);
+
+    expect(className1).toBe(className2);
+    expect(className1).toBeTruthy();
+  });
+
+  it('should generate same class for two Space components with styles prop for sub-element Test in different order', () => {
+    const styles1 = {
+      display: 'block',
+      Test: {
+        color: '#red',
+        padding: '1x',
+        fill: '#yellow',
+        margin: '0.5x',
+        border: '1bw solid #gray',
+      },
+    };
+
+    const styles2 = {
+      display: 'block',
+      Test: {
+        border: '1bw solid #gray',
+        margin: '0.5x',
+        fill: '#yellow',
+        padding: '1x',
+        color: '#red',
+      },
+    };
+
+    const { container: container1 } = render(<Space styles={styles1} />);
+    const { container: container2 } = render(<Space styles={styles2} />);
+
+    const className1 = getClassName(container1);
+    const className2 = getClassName(container2);
+
+    expect(className1).toBe(className2);
+    expect(className1).toBeTruthy();
+  });
+
+  it('should generate same class for two Space components with different order of style props radius and padding', () => {
+    const StyledSpace1 = tasty({
+      as: 'div',
+      styleProps: ['radius', 'padding', 'fill', 'margin'] as const,
+    });
+
+    const StyledSpace2 = tasty({
+      as: 'div',
+      styleProps: ['margin', 'fill', 'padding', 'radius'] as const,
+    });
+
+    const commonProps = {
+      radius: '2r',
+      padding: '3x',
+      fill: '#orange',
+      margin: '1x',
+    };
+
+    const { container: container1 } = render(<StyledSpace1 {...commonProps} />);
+    const { container: container2 } = render(<StyledSpace2 {...commonProps} />);
+
+    const className1 = getClassName(container1);
+    const className2 = getClassName(container2);
+
+    expect(className1).toBe(className2);
+    expect(className1).toBeTruthy();
+  });
+
+  it('should generate same class for mixed components with same styles but different ordering', () => {
+    const spaceStyles = {
+      display: 'flex',
+      gap: true,
+      flow: {
+        '': 'row',
+        vertical: 'column',
+      },
+      placeItems: {
+        '': 'center stretch',
+        vertical: 'stretch',
+      },
+    };
+
+    // Common styles in different orders
+    const commonStyles1 = {
+      padding: '2x',
+      fill: '#cyan',
+      border: '1bw solid #navy',
+      radius: '1r',
+      margin: '1x',
+      color: '#dark',
+    };
+
+    const commonStyles2 = {
+      color: '#dark',
+      margin: '1x',
+      radius: '1r',
+      border: '1bw solid #navy',
+      fill: '#cyan',
+      padding: '2x',
+    };
+
+    // Sub-element styles in different orders
+    const subElementStyles1 = {
+      Content: {
+        preset: 'h3',
+        color: '#white',
+        padding: '1x',
+        fill: '#black',
+      },
+    };
+
+    const subElementStyles2 = {
+      Content: {
+        fill: '#black',
+        padding: '1x',
+        color: '#white',
+        preset: 'h3',
+      },
+    };
+
+    // Test 1: tasty() with different style order
+    const TastyComponent1 = tasty({
+      styles: { ...spaceStyles, ...commonStyles1, ...subElementStyles1 },
+    });
+
+    const TastyComponent2 = tasty({
+      styles: { ...spaceStyles, ...commonStyles2, ...subElementStyles2 },
+    });
+
+    const { container: tastyContainer1 } = render(<TastyComponent1 />);
+    const { container: tastyContainer2 } = render(<TastyComponent2 />);
+
+    expect(getClassName(tastyContainer1)).toBe(getClassName(tastyContainer2));
+
+    // Test 2: Extended Space with different style order
+    const ExtendedSpace1 = tasty(Space, {
+      styles: { ...commonStyles1, ...subElementStyles1 },
+    });
+
+    const ExtendedSpace2 = tasty(Space, {
+      styles: { ...commonStyles2, ...subElementStyles2 },
+    });
+
+    const { container: extendedContainer1 } = render(<ExtendedSpace1 />);
+    const { container: extendedContainer2 } = render(<ExtendedSpace2 />);
+
+    expect(getClassName(extendedContainer1)).toBe(
+      getClassName(extendedContainer2),
+    );
+
+    // Test 3: Space with styles prop in different order
+    const { container: spaceContainer1 } = render(
+      <Space styles={{ ...commonStyles1, ...subElementStyles1 }} />,
+    );
+    const { container: spaceContainer2 } = render(
+      <Space styles={{ ...commonStyles2, ...subElementStyles2 }} />,
+    );
+
+    expect(getClassName(spaceContainer1)).toBe(getClassName(spaceContainer2));
+
+    // Test 4: All should have the same class (same styles, different ordering methods)
+    const tastyClass = getClassName(tastyContainer1);
+    const extendedClass = getClassName(extendedContainer1);
+    const spaceClass = getClassName(spaceContainer1);
+
+    expect(tastyClass).toBe(extendedClass);
+    expect(extendedClass).toBe(spaceClass);
+    expect(tastyClass).toBeTruthy();
+  });
+});
+
+describe('tastyGlobal() API', () => {
+  beforeEach(() => {
+    // Configure injector for test environment with text injection
+    configure({
+      forceTextInjection: true,
+    });
+  });
+
+  afterEach(() => {
+    cleanup();
+    // Clean up any injected styles
+    document.head.querySelectorAll('[data-tasty]').forEach((el) => el.remove());
+  });
+
+  it('should create global style component for CSS selector', () => {
+    const GlobalHeading = tasty('.test-heading', {
+      preset: 'h2',
+      color: '#purple',
+      padding: '2x',
+    });
+
+    const { container } = render(
+      <div>
+        <GlobalHeading />
+        <h1 className="test-heading">Test Heading</h1>
+      </div>,
+    );
+
+    // Check that styles are injected into the document head
+    const styleElements = document.head.querySelectorAll('[data-tasty]');
+    expect(styleElements.length).toBeGreaterThan(0);
+
+    // Check that the style content includes our selector
+    const styleContent = Array.from(styleElements)
+      .map((el) => el.textContent)
+      .join('');
+    expect(styleContent).toContain('.test-heading');
+    expect(styleContent).toContain('color: var(--purple-color)');
+
+    // Check that the heading element exists
+    const headingElement = container.querySelector(
+      '.test-heading',
+    ) as HTMLElement;
+    expect(headingElement).toBeTruthy();
+  });
+
+  it('should support complex selectors', () => {
+    const GlobalButton = tasty('button[data-variant="primary"]', {
+      fill: '#blue',
+      color: '#white',
+      border: 'none',
+      radius: '1r',
+      padding: '2x 4x',
+    });
+
+    const { container } = render(
+      <div>
+        <GlobalButton />
+        <button data-variant="primary">Primary Button</button>
+        <button data-variant="secondary">Secondary Button</button>
+      </div>,
+    );
+
+    // Verify global styles are injected
+    const styleElements = document.head.querySelectorAll('[data-tasty]');
+    const styleContent = Array.from(styleElements)
+      .map((el) => el.textContent)
+      .join('');
+
+    expect(styleContent).toContain('button[data-variant="primary"]');
+    expect(styleContent).toContain('background-color: var(--blue-color)');
+    expect(styleContent).toContain('color: var(--white-color)');
+  });
+
+  it('should support responsive global styles', () => {
+    const GlobalCard = tasty('.responsive-card', {
+      padding: ['4x', '2x', '1x'],
+      width: ['max 800px', 'max 600px', 'max 100%'],
+      margin: ['2x auto', '1x auto', '0 auto'],
+    });
+
+    const { container } = render(
+      <BreakpointsProvider value={[1200, 768]}>
+        <div>
+          <GlobalCard />
+          <div className="responsive-card">Responsive Card Content</div>
+        </div>
+      </BreakpointsProvider>,
+    );
+
+    // Verify responsive global styles are injected
+    const styleElements = document.head.querySelectorAll('[data-tasty]');
+    const styleContent = Array.from(styleElements)
+      .map((el) => el.textContent)
+      .join('');
+
+    expect(styleContent).toContain('.responsive-card');
+    expect(styleContent).toContain('@media');
+    expect(styleContent).toContain('max-width: 800px');
+  });
+
+  it('should support state-based global styles', () => {
+    const GlobalInteractive = tasty('.interactive-element', {
+      fill: {
+        '': '#white',
+        ':hover': '#gray.05',
+        ':focus': '#blue.05',
+        '[disabled]': '#gray.20',
+      },
+      color: {
+        '': '#text',
+        ':hover': '#text-hover',
+        '[disabled]': '#text-disabled',
+      },
+      transition: 'fill 0.2s, color 0.2s',
+    });
+
+    const { container } = render(
+      <div>
+        <GlobalInteractive />
+        <div className="interactive-element">Interactive Element</div>
+        <div data-disabled className="interactive-element">
+          Disabled Element
+        </div>
+      </div>,
+    );
+
+    // Verify state-based global styles are injected
+    const styleElements = document.head.querySelectorAll('[data-tasty]');
+    const styleContent = Array.from(styleElements)
+      .map((el) => el.textContent)
+      .join('');
+
+    expect(styleContent).toContain('.interactive-element');
+    expect(styleContent).toContain(':hover');
+    expect(styleContent).toContain('[disabled]');
+    expect(styleContent).toContain('background-color: var(--white-color)');
+  });
+
+  it('should handle custom breakpoints prop', () => {
+    const GlobalResponsive = tasty('.custom-breakpoints', {
+      padding: ['3x', '2x', '1x'],
+      display: ['grid', 'flex', 'block'],
+    });
+
+    const { container } = render(
+      <div>
+        <GlobalResponsive breakpoints={[1440, 900]} />
+        <div className="custom-breakpoints">Custom Breakpoint Element</div>
+      </div>,
+    );
+
+    // Verify custom breakpoints are used in global styles
+    const styleElements = document.head.querySelectorAll('[data-tasty]');
+    const styleContent = Array.from(styleElements)
+      .map((el) => el.textContent)
+      .join('');
+
+    expect(styleContent).toContain('.custom-breakpoints');
+    expect(styleContent).toContain('@media (min-width: 1440px)');
+    expect(styleContent).toContain('@media (min-width: 900px)');
+  });
+
+  it('should cleanup styles when component unmounts', () => {
+    const GlobalTemporary = tasty('.temporary-element', {
+      fill: '#red',
+      color: '#white',
+      padding: '2x',
+    });
+
+    const TestComponent = ({ showGlobal }: { showGlobal: boolean }) => (
+      <div>
+        {showGlobal && <GlobalTemporary />}
+        <div className="temporary-element">Temporary Element</div>
+      </div>
+    );
+
+    const { container, rerender } = render(<TestComponent showGlobal={true} />);
+
+    // Verify styles are injected when component is mounted
+    let styleElements = document.head.querySelectorAll('[data-tasty]');
+    let styleContent = Array.from(styleElements)
+      .map((el) => el.textContent)
+      .join('');
+    expect(styleContent).toContain('.temporary-element');
+
+    const initialStyleCount = styleElements.length;
+
+    // Remove the global style component
+    rerender(<TestComponent showGlobal={false} />);
+
+    // Verify styles are cleaned up
+    styleElements = document.head.querySelectorAll('[data-tasty]');
+    styleContent = Array.from(styleElements)
+      .map((el) => el.textContent)
+      .join('');
+
+    // Either the style element is removed or the content no longer contains our selector
+    const finalStyleCount = styleElements.length;
+    expect(finalStyleCount).toBeLessThanOrEqual(initialStyleCount);
+
+    // The element should still exist but without the global styles
+    expect(container.querySelector('.temporary-element')).toBeTruthy();
+  });
+
+  it('should handle empty styles', () => {
+    const EmptyGlobal = tasty('.empty-styles');
+
+    const { container } = render(
+      <div>
+        <EmptyGlobal />
+        <div className="empty-styles">Element with no styles</div>
+      </div>,
+    );
+
+    // Empty styles should not inject anything
+    const styleElements = document.head.querySelectorAll('[data-tasty]');
+    const styleContent = Array.from(styleElements)
+      .map((el) => el.textContent)
+      .join('');
+
+    // Should not contain our selector since there are no styles
+    expect(styleContent).not.toContain('.empty-styles');
+
+    // Element should still exist
+    expect(container.querySelector('.empty-styles')).toBeTruthy();
+  });
+
+  it('should support sub-element styling in global styles', () => {
+    const GlobalCard = tasty('.global-card', {
+      padding: '4x',
+      fill: '#surface',
+      border: '1bw solid #border',
+      radius: '1r',
+
+      // Sub-element styles
+      Title: {
+        preset: 'h3',
+        color: '#primary',
+        margin: '0 0 2x 0',
+      },
+      Content: {
+        color: '#text',
+        padding: '2x 0',
+      },
+      Footer: {
+        display: 'flex',
+        justify: 'space-between',
+        padding: '2x 0 0 0',
+        border: '1bw solid #border top',
+      },
+    });
+
+    const { container } = render(
+      <div>
+        <GlobalCard />
+        <div className="global-card">
+          <div data-element="Title">Card Title</div>
+          <div data-element="Content">Card content here</div>
+          <div data-element="Footer">
+            <span>Footer left</span>
+            <span>Footer right</span>
+          </div>
+        </div>
+      </div>,
+    );
+
+    // Verify sub-element global styles are injected
+    const styleElements = document.head.querySelectorAll('[data-tasty]');
+    const styleContent = Array.from(styleElements)
+      .map((el) => el.textContent)
+      .join('');
+
+    expect(styleContent).toContain('.global-card');
+    expect(styleContent).toContain('[data-element="Title"]');
+    expect(styleContent).toContain('[data-element="Content"]');
+    expect(styleContent).toContain('[data-element="Footer"]');
+    expect(styleContent).toContain('background-color: var(--surface-color)');
+  });
+
+  it('should support multiple global style components with different selectors', () => {
+    const GlobalHeading = tasty('h1.special', {
+      preset: 'h1',
+      color: '#primary',
+      margin: '0 0 2x 0',
+    });
+
+    const GlobalParagraph = tasty('p.special', {
+      preset: 'p1',
+      color: '#text',
+      margin: '1x 0',
+    });
+
+    const GlobalLink = tasty('a.special', {
+      color: '#link',
+      textDecoration: 'underline',
+      transition: 'color 0.2s',
+      ':hover': {
+        color: '#link-hover',
+      },
+    });
+
+    const { container } = render(
+      <div>
+        <GlobalHeading />
+        <GlobalParagraph />
+        <GlobalLink />
+        <h1 className="special">Special Heading</h1>
+        <p className="special">Special paragraph text.</p>
+        <a href="#" className="special">
+          Special Link
+        </a>
+      </div>,
+    );
+
+    // Verify multiple global styles are injected
+    const styleElements = document.head.querySelectorAll('[data-tasty]');
+    const styleContent = Array.from(styleElements)
+      .map((el) => el.textContent)
+      .join('');
+
+    expect(styleContent).toContain('h1.special');
+    expect(styleContent).toContain('p.special');
+    expect(styleContent).toContain('a.special');
+    expect(styleContent).toContain('color: var(--primary-color)');
+    expect(styleContent).toContain('color: var(--text-color)');
+    expect(styleContent).toContain('color: var(--link-color)');
+  });
+
+  it('should handle breakpoints context changes', () => {
+    const GlobalResponsive = tasty('.context-responsive', {
+      padding: ['4x', '2x', '1x'],
+      width: ['max 1000px', 'max 600px', 'max 100%'],
+    });
+
+    // Test with breakpoint context
+    render(
+      <BreakpointsProvider value={[1200, 768]}>
+        <div>
+          <GlobalResponsive />
+          <div className="context-responsive">
+            Context with custom breakpoints
+          </div>
+        </div>
+      </BreakpointsProvider>,
+    );
+
+    // Verify styles with breakpoint context are injected
+    const styleElements = document.head.querySelectorAll('[data-tasty]');
+    const styleContent = Array.from(styleElements)
+      .map((el) => el.textContent)
+      .join('');
+    expect(styleContent).toContain('.context-responsive');
+    expect(styleContent).toContain('@media (min-width: 1200px)');
+    expect(styleContent).toContain('@media (min-width: 768px)');
+  });
+
+  it('should have correct displayName', () => {
+    const GlobalTest = tasty('.test-selector', {
+      color: '#red',
+    });
+
+    expect(GlobalTest.displayName).toBe(
+      'TastyStyleDeclaration(.test-selector)',
+    );
+
+    // Also verify it injects styles when rendered
+    render(<GlobalTest />);
+
+    const styleElements = document.head.querySelectorAll('[data-tasty]');
+    const styleContent = Array.from(styleElements)
+      .map((el) => el.textContent)
+      .join('');
+    expect(styleContent).toContain('.test-selector');
+  });
+
+  it('should support pseudo-classes and pseudo-elements', () => {
+    const GlobalWithPseudo = tasty('.pseudo-test', {
+      color: '#dark',
+      ':hover': {
+        color: '#purple',
+      },
+      ':focus': {
+        color: '#blue',
+        outline: '2px solid #blue',
+      },
+      '::before': {
+        content: '"→ "',
+        color: '#gray',
+      },
+    });
+
+    const { container } = render(
+      <div>
+        <GlobalWithPseudo />
+        <div className="pseudo-test" tabIndex={0}>
+          Element with pseudo styles
+        </div>
+      </div>,
+    );
+
+    // Verify pseudo-class and pseudo-element styles are injected
+    const styleElements = document.head.querySelectorAll('[data-tasty]');
+    const styleContent = Array.from(styleElements)
+      .map((el) => el.textContent)
+      .join('');
+
+    expect(styleContent).toContain('.pseudo-test');
+    expect(styleContent).toContain(':hover');
+    expect(styleContent).toContain(':focus');
+    expect(styleContent).toContain('::before');
+    expect(styleContent).toContain('color: var(--dark-color)');
+  });
+
+  it('should support attribute selectors', () => {
+    const GlobalAttributeSelector = tasty('[data-testid="global-attr"]', {
+      fill: '#yellow',
+      color: '#dark',
+      padding: '2x',
+      border: '1bw solid #orange',
+    });
+
+    const { container } = render(
+      <div>
+        <GlobalAttributeSelector />
+        <div data-testid="global-attr">Element with attribute selector</div>
+        <div data-testid="other-attr">Other element</div>
+      </div>,
+    );
+
+    // Verify attribute selector styles are injected
+    const styleElements = document.head.querySelectorAll('[data-tasty]');
+    const styleContent = Array.from(styleElements)
+      .map((el) => el.textContent)
+      .join('');
+
+    expect(styleContent).toContain('[data-testid="global-attr"]');
+    expect(styleContent).toContain('background-color: var(--yellow-color)');
+    expect(styleContent).toContain('color: var(--dark-color)');
+  });
+
+  it('should support complex selectors with combinators', () => {
+    const GlobalComplex = tasty('.parent > .child', {
+      fill: '#green',
+      padding: '1x',
+      margin: '0.5x',
+    });
+
+    const GlobalDescendant = tasty('.container .nested', {
+      color: '#blue',
+      fontWeight: 'bold',
+    });
+
+    const { container } = render(
+      <div>
+        <GlobalComplex />
+        <GlobalDescendant />
+        <div className="parent">
+          <div className="child">Direct child</div>
+          <div>
+            <div className="child">Nested child (not direct)</div>
+          </div>
+        </div>
+        <div className="container">
+          <div className="nested">Descendant element</div>
+          <div>
+            <div className="nested">Deeply nested element</div>
+          </div>
+        </div>
+      </div>,
+    );
+
+    // Verify complex selector styles are injected
+    const styleElements = document.head.querySelectorAll('[data-tasty]');
+    const styleContent = Array.from(styleElements)
+      .map((el) => el.textContent)
+      .join('');
+
+    expect(styleContent).toContain('.parent > .child');
+    expect(styleContent).toContain('.container .nested');
+    expect(styleContent).toContain('background-color: var(--green-color)');
+    expect(styleContent).toContain('color: var(--blue-color)');
+  });
+
+  it('should handle style updates when breakpoints change', () => {
+    const GlobalDynamic = tasty('.dynamic-styles', {
+      padding: ['3x', '2x', '1x'],
+      display: ['grid', 'flex', 'block'],
+    });
+
+    const TestWrapper = ({ breakpoints }: { breakpoints: number[] }) => (
+      <BreakpointsProvider value={breakpoints}>
+        <div>
+          <GlobalDynamic />
+          <div className="dynamic-styles">Dynamic element</div>
+        </div>
+      </BreakpointsProvider>
+    );
+
+    const { container, rerender } = render(
+      <TestWrapper breakpoints={[1200, 768]} />,
+    );
+
+    // Verify initial breakpoint styles
+    let styleElements = document.head.querySelectorAll('[data-tasty]');
+    let styleContent = Array.from(styleElements)
+      .map((el) => el.textContent)
+      .join('');
+    expect(styleContent).toContain('.dynamic-styles');
+    expect(styleContent).toContain('@media (min-width: 1200px)');
+    expect(styleContent).toContain('@media (min-width: 768px)');
+
+    // Change breakpoints - should trigger style re-calculation
+    act(() => {
+      rerender(<TestWrapper breakpoints={[1440, 900]} />);
+    });
+
+    // Verify updated breakpoint styles
+    styleElements = document.head.querySelectorAll('[data-tasty]');
+    styleContent = Array.from(styleElements)
+      .map((el) => el.textContent)
+      .join('');
+    expect(styleContent).toContain('@media (min-width: 1440px)');
+    expect(styleContent).toContain('@media (min-width: 900px)');
+  });
+
+  it('should handle style updates when styles change', () => {
+    const DynamicGlobal1 = tasty('.dynamic-selector', {
+      fill: '#blue',
+      color: '#white',
+      padding: '2x',
+    });
+
+    const DynamicGlobal2 = tasty('.dynamic-selector', {
+      fill: '#red',
+      color: '#white',
+      padding: '4x',
+      border: '1bw solid #dark',
+    });
+
+    const { container, rerender } = render(
+      <div>
+        <DynamicGlobal1 />
+        <div className="dynamic-selector">Dynamic content</div>
+      </div>,
+    );
+
+    // Verify initial styles
+    let styleElements = document.head.querySelectorAll('[data-tasty]');
+    let styleContent = Array.from(styleElements)
+      .map((el) => el.textContent)
+      .join('');
+    expect(styleContent).toContain('.dynamic-selector');
+    expect(styleContent).toContain('background-color: var(--blue-color)');
+
+    // Update to different global component with different styles
+    act(() => {
+      rerender(
+        <div>
+          <DynamicGlobal2 />
+          <div className="dynamic-selector">Dynamic content</div>
+        </div>,
+      );
+    });
+
+    // Verify updated styles
+    styleElements = document.head.querySelectorAll('[data-tasty]');
+    styleContent = Array.from(styleElements)
+      .map((el) => el.textContent)
+      .join('');
+    expect(styleContent).toContain('background-color: var(--red-color)');
+    expect(styleContent).toContain(
+      'border: var(--border-width) solid var(--dark-color)',
+    );
+  });
+});
diff --git a/src/tasty/tasty.tsx b/src/tasty/tasty.tsx
index 79789352a..28170f2ca 100644
--- a/src/tasty/tasty.tsx
+++ b/src/tasty/tasty.tsx
@@ -13,7 +13,7 @@ import {
 } from 'react';
 import { isValidElementType } from 'react-is';
 
-import { inject } from './injector';
+import { allocateClassName, inject, injectGlobal } from './injector';
 import { BreakpointsContext } from './providers/BreakpointsProvider';
 import { BASE_STYLES } from './styles/list';
 import { Styles, StylesInterface } from './styles/types';
@@ -23,20 +23,15 @@ import { getDisplayName } from './utils/getDisplayName';
 import { mergeStyles } from './utils/mergeStyles';
 import { modAttrs } from './utils/modAttrs';
 import { RenderResult, renderStyles } from './utils/renderStyles';
-import { ResponsiveStyleValue } from './utils/styles';
+import { ResponsiveStyleValue, stringifyStyles } from './utils/styles';
 
 /**
  * Simple hash function for internal cache keys
  */
-// Per-style-key sequential class allocator
-const styleKeyToClass = new Map<string, string>();
-let nextClassId = 0;
-function allocateClassName(styleKey: string): string {
-  const existing = styleKeyToClass.get(styleKey);
-  if (existing) return existing;
-  const cls = `t${nextClassId++}`;
-  styleKeyToClass.set(styleKey, cls);
-  return cls;
+// Generate unique cache key for style deduplication
+function generateStyleCacheKey(styleKey: string, contextKey?: string): string {
+  // Use null character as separator for better performance and no collision risk
+  return contextKey ? `${styleKey}\0${contextKey}` : styleKey;
 }
 
 // Basic props accepted by our base element
@@ -130,19 +125,18 @@ function tastyGlobal(selector: string, styles?: Styles) {
     let contextBreakpoints = useContext(BreakpointsContext);
 
     const breakpointsList = (breakpoints ?? contextBreakpoints) || [980];
-    const breakpointsHash = breakpointsList.join(',');
     const disposeRef = useRef<(() => void) | null>(null);
 
     const styleResults = useMemo(() => {
       if (!styles) return [];
-      return renderStyles(styles, breakpointsList, selector, true);
-    }, [selector, breakpointsHash]);
+      return renderStyles(styles, breakpointsList, selector);
+    }, [selector, styles, breakpointsList]);
 
     // Inject styles at insertion phase; cleanup on change/unmount
     useInsertionEffect(() => {
       disposeRef.current?.();
-      if (styleResults.length === 0) return;
-      const { dispose } = inject(styleResults);
+      if ((styleResults as any[]).length === 0) return;
+      const { dispose } = injectGlobal(styleResults as any);
       disposeRef.current = dispose;
       return () => {
         disposeRef.current?.();
@@ -289,11 +283,8 @@ function tastyElement<K extends StyleList, V extends VariantMap>(
      * of the same element if no custom styles are provided via `styles` prop or direct style props.
      */
     const renderDefaultStyles = cacheWrapper((breakpoints: number[]) => {
-      // Allocate a stable class for default styles
-      const defaultClassName = allocateClassName(
-        JSON.stringify(defaultStyles || {}),
-      );
-      return renderStyles(defaultStyles || {}, breakpoints, defaultClassName);
+      // Return rules without className - injector will add it
+      return renderStyles(defaultStyles || {}, breakpoints);
     });
 
     let {
@@ -321,21 +312,19 @@ function tastyElement<K extends StyleList, V extends VariantMap>(
       } = allProps as Record<string, unknown> as AllBasePropsWithMods<K> &
         WithVariant<V> & { className?: string };
 
-      let propStyles: Styles | null = (
-        (styleProps
-          ? (styleProps as StyleList).concat(BASE_STYLES)
-          : BASE_STYLES) as StyleList
-      ).reduce((map, prop) => {
+      // Optimize propStyles extraction - avoid creating empty objects
+      let propStyles: Styles | null = null;
+      const propsToCheck = styleProps
+        ? (styleProps as StyleList).concat(BASE_STYLES)
+        : BASE_STYLES;
+
+      for (const prop of propsToCheck) {
         const key = prop as unknown as string;
         if (Object.prototype.hasOwnProperty.call(otherProps as object, key)) {
-          (map as any)[key] = (otherProps as any)[key];
+          if (!propStyles) propStyles = {};
+          (propStyles as any)[key] = (otherProps as any)[key];
           delete (otherProps as any)[key];
         }
-        return map;
-      }, {} as Styles);
-
-      if (Object.keys(propStyles).length === 0) {
-        propStyles = null;
       }
 
       if (
@@ -345,68 +334,80 @@ function tastyElement<K extends StyleList, V extends VariantMap>(
         styles = undefined as unknown as Styles;
       }
 
-      const propStylesCacheKey = JSON.stringify(propStyles);
-      const stylesCacheKey = useMemo(() => JSON.stringify(styles), [styles]);
-
-      const useDefaultStyles = !propStyles && !styles;
-
-      const styleCacheKey = useMemo(
-        () =>
-          `${styles ? JSON.stringify(styles) : ''}.${propStyles ? JSON.stringify(propStyles) : ''}`,
-        [propStylesCacheKey, stylesCacheKey],
-      );
-
-      let allStyles: Styles | undefined = useMemo(
-        () =>
-          useDefaultStyles
-            ? defaultStyles
-            : mergeStyles(
-                defaultStyles,
-                styles as Styles,
-                propStyles as Styles,
-              ),
-        [styleCacheKey],
-      );
-
       let contextBreakpoints = useContext(BreakpointsContext);
-
       breakpoints = (breakpoints as number[] | undefined) ?? contextBreakpoints;
 
-      // Allocate a stable sequential class per style-key
-      const className = useMemo(() => {
-        const stylesKey = JSON.stringify(allStyles || {});
-        return allocateClassName(stylesKey);
-      }, [allStyles]);
+      // Memoize breakpoints key once
+      const breakpointsKey = useMemo(
+        () => (breakpoints as number[] | undefined)?.join(',') || '',
+        [breakpoints?.join(',')],
+      );
+
+      // Optimize style computation and cache key generation
+      const { allStyles, cacheKey, useDefaultStyles } = useMemo(() => {
+        const hasStyles =
+          styles && Object.keys(styles as Record<string, unknown>).length > 0;
+        const hasPropStyles = propStyles && Object.keys(propStyles).length > 0;
+        const useDefault = !hasStyles && !hasPropStyles;
+
+        const merged = useDefault
+          ? defaultStyles
+          : mergeStyles(defaultStyles, styles as Styles, propStyles as Styles);
+
+        // Generate cache key for style deduplication
+        const styleKey = stringifyStyles(merged || {});
+        const key = generateStyleCacheKey(
+          styleKey,
+          breakpointsKey ? `bp:${breakpointsKey}` : undefined,
+        );
+
+        return {
+          allStyles: merged,
+          cacheKey: key,
+          useDefaultStyles: useDefault,
+        };
+      }, [styles, propStyles, breakpointsKey]);
 
       // Compute rules synchronously; inject via insertion effect
       const directResult: RenderResult = useMemo(() => {
         if (useDefaultStyles) {
           return renderDefaultStyles(breakpoints as number[]);
         } else if (allStyles && Object.keys(allStyles).length > 0) {
-          return renderStyles(allStyles, breakpoints as number[], className);
+          // Return rules without className - injector will add it
+          return renderStyles(allStyles, breakpoints as number[]);
         } else {
           return { rules: [], className: '' };
         }
-      }, [useDefaultStyles, allStyles, breakpoints?.join(','), className]);
-
-      // Inject styles and get the actual CSS class name
-      const injectedResult = useMemo(() => {
-        if (!directResult.rules.length) {
-          return { className: '', dispose: () => {} };
-        }
-        return inject(directResult.rules);
-      }, [directResult.rules]);
+      }, [useDefaultStyles, allStyles, breakpointsKey, cacheKey]);
 
       const disposeRef = useRef<(() => void) | null>(null);
 
+      // Allocate className in render phase (safe for React Strict Mode)
+      const allocatedClassName = useMemo(() => {
+        if (!directResult.rules.length || !cacheKey) return '';
+        const { className } = allocateClassName(cacheKey);
+        return className;
+      }, [directResult.rules.length, cacheKey]);
+
+      // Inject styles in insertion effect (avoids render phase side effects)
       useInsertionEffect(() => {
+        // Cleanup previous disposal reference
         disposeRef.current?.();
-        disposeRef.current = injectedResult.dispose;
+
+        if (directResult.rules.length > 0) {
+          const injectionResult = inject(directResult.rules, { cacheKey });
+          disposeRef.current = injectionResult.dispose;
+        } else {
+          disposeRef.current = null;
+        }
+
         return () => {
           disposeRef.current?.();
           disposeRef.current = null;
         };
-      }, [injectedResult.dispose]);
+      }, [directResult.rules, cacheKey]);
+
+      const injectedClassName = allocatedClassName;
 
       let modProps: Record<string, unknown> | undefined;
       if (mods) {
@@ -417,7 +418,7 @@ function tastyElement<K extends StyleList, V extends VariantMap>(
       // Merge user className with injected className
       const finalClassName = [
         (userClassName as string) || '',
-        injectedResult.className || directResult.className || className,
+        injectedClassName,
       ]
         .filter(Boolean)
         .join(' ');
diff --git a/src/tasty/utils/isDevEnv.ts b/src/tasty/utils/isDevEnv.ts
new file mode 100644
index 000000000..2cb16715f
--- /dev/null
+++ b/src/tasty/utils/isDevEnv.ts
@@ -0,0 +1,29 @@
+/**
+ * Check if we're in a development environment at runtime
+ * Uses bracket notation to avoid bundler compilation
+ * Also checks for TASTY_DEBUG localStorage setting
+ */
+export function isDevEnv(): boolean {
+  // Check localStorage for DEBUG_TASTY setting (browser environment)
+  if (typeof window !== 'undefined' && window.localStorage) {
+    try {
+      const forceTastyDebug = window.localStorage.getItem('TASTY_DEBUG');
+      if (
+        forceTastyDebug !== null &&
+        forceTastyDebug.toLowerCase() === 'true'
+      ) {
+        return true;
+      }
+    } catch {
+      // localStorage might not be available (private browsing, etc.)
+      // Continue with other checks
+    }
+  }
+
+  // Check NODE_ENV for Node.js environments
+  if (typeof process === 'undefined') return false;
+
+  // Use bracket notation to avoid bundler replacement
+  const nodeEnv = process.env?.['NODE_ENV'];
+  return nodeEnv !== 'test' && nodeEnv !== 'production';
+}
diff --git a/src/tasty/utils/renderStyles.ts b/src/tasty/utils/renderStyles.ts
index 0e5a0d0c4..438ae46af 100644
--- a/src/tasty/utils/renderStyles.ts
+++ b/src/tasty/utils/renderStyles.ts
@@ -31,6 +31,7 @@ export interface StyleResult {
   selector: string;
   declarations: string;
   atRules?: string[];
+  needsClassName?: boolean; // Flag to indicate selector needs className prepended
 }
 
 export interface RenderResult {
@@ -440,7 +441,13 @@ function materializeRules(
   zones: ResponsiveZone[],
 ): StyleResult[] {
   return logicalRules.map((rule) => {
-    const selector = `.${className}${rule.selectorSuffix}`;
+    // Generate base selector
+    let selector = `.${className}${rule.selectorSuffix}`;
+
+    // Increase specificity for tasty class selectors by duplicating the class
+    if (/^t\d+$/.test(className)) {
+      selector = `.${className}${selector}`;
+    }
 
     const declarations = Object.entries(rule.declarations)
       .map(([prop, value]) => `${prop}: ${value};`)
@@ -947,6 +954,14 @@ export function renderStyles(
   className?: string,
 ): RenderResult;
 
+/**
+ * Render styles without className for element styles (injector will add it)
+ */
+export function renderStyles(
+  styles: Styles | undefined,
+  responsive?: number[],
+): RenderResult;
+
 /**
  * Render styles for direct injection with a specific selector
  * Bypasses CSS text generation and flattening by directly creating StyleResult[]
@@ -955,15 +970,15 @@ export function renderStyles(
   styles: Styles | undefined,
   responsive: number[],
   selector: string,
-  directSelector: true,
 ): StyleResult[];
 
 export function renderStyles(
   styles?: Styles,
   responsive: number[] = [],
-  classNameOrSelector: string = 'unknown',
-  directSelector: boolean = false,
+  classNameOrSelector?: string,
 ): RenderResult | StyleResult[] {
+  const directSelector = !!classNameOrSelector;
+
   if (!styles) {
     return directSelector ? [] : { rules: [] };
   }
@@ -974,12 +989,25 @@ export function renderStyles(
 
   if (directSelector) {
     // Direct selector mode: convert logical rules directly to StyleResult format
+    if (!classNameOrSelector) {
+      throw new Error('directSelector mode requires classNameOrSelector');
+    }
+
     return allLogicalRules.map((rule) => {
       // Replace & with the actual selector or append suffix to selector
-      const finalSelector = rule.selectorSuffix
+      let finalSelector = rule.selectorSuffix
         ? `${classNameOrSelector}${rule.selectorSuffix}`
         : classNameOrSelector;
 
+      // Increase specificity for tasty class selectors by duplicating the class
+      if (finalSelector.startsWith('.') && /^\.t\d+/.test(finalSelector)) {
+        const classMatch = finalSelector.match(/^\.t\d+/);
+        if (classMatch) {
+          const baseClass = classMatch[0];
+          finalSelector = baseClass + finalSelector;
+        }
+      }
+
       const declarations = Object.entries(rule.declarations)
         .map(([prop, value]) => `${prop}: ${value};`)
         .join(' ');
@@ -1022,6 +1050,36 @@ export function renderStyles(
     }
   }
 
+  // If no className provided, return rules with needsClassName flag
+  if (!classNameOrSelector) {
+    const materializedRules = Array.from(accumulatedRules.values()).map(
+      (rule) => {
+        const declarations = Object.entries(rule.declarations)
+          .map(([prop, value]) => `${prop}: ${value};`)
+          .join(' ');
+
+        const q =
+          rule.breakpointIdx > 0
+            ? zones[rule.breakpointIdx]?.mediaQuery
+            : rule.responsiveSource
+              ? zones[0]?.mediaQuery
+              : undefined;
+        const atRules = q ? [`@media ${q}`] : undefined;
+
+        return {
+          selector: rule.selectorSuffix || '',
+          declarations,
+          atRules,
+          needsClassName: true, // Flag for injector to prepend className
+        };
+      },
+    );
+
+    return {
+      rules: materializedRules,
+    };
+  }
+
   // Materialize the accumulated logical rules into final format
   const finalRulesRaw = materializeRules(
     Array.from(accumulatedRules.values()),
diff --git a/src/tasty/utils/styles.ts b/src/tasty/utils/styles.ts
index c079b4e72..1c69f43b6 100644
--- a/src/tasty/utils/styles.ts
+++ b/src/tasty/utils/styles.ts
@@ -577,3 +577,45 @@ export function computeState(
 
   return !!func(a, b);
 }
+
+const _innerCache = new WeakMap();
+
+export function stringifyStyles(styles: any): string {
+  if (styles == null || typeof styles !== 'object') return '';
+  const keys = Object.keys(styles).sort();
+  const parts: string[] = [];
+  for (let i = 0; i < keys.length; i++) {
+    const k = keys[i],
+      v = styles[k];
+    if (v === undefined || typeof v === 'function' || typeof v === 'symbol')
+      continue;
+
+    const c0 = k.charCodeAt(0);
+    const needsInnerSort =
+      ((c0 >= 65 && c0 <= 90) || c0 === 38) &&
+      v &&
+      typeof v === 'object' &&
+      !Array.isArray(v);
+
+    let sv: string;
+    if (needsInnerSort) {
+      sv = _innerCache.get(v);
+      if (sv === undefined) {
+        const innerKeys = Object.keys(v).sort();
+        const innerParts: string[] = [];
+        for (let j = 0; j < innerKeys.length; j++) {
+          const ik = innerKeys[j];
+          const ivs = JSON.stringify(v[ik]);
+          if (ivs !== undefined)
+            innerParts.push(JSON.stringify(ik) + ':' + ivs);
+        }
+        sv = '{' + innerParts.join(',') + '}';
+        _innerCache.set(v, sv);
+      }
+    } else {
+      sv = JSON.stringify(v);
+    }
+    parts.push(JSON.stringify(k) + ':' + sv);
+  }
+  return '{' + parts.join(',') + '}';
+}