This is a comprehensive technical documentation of Zen Browser's CSS system, specifically designed for AI consumption and modification. The documentation provides detailed information about selectors, states, animations, and features.

Detailed documentation of CSS selectors and their relationships:

• Selector hierarchy
• Component structure
• DOM relationships
• Specificity patterns

Analysis of browser states and feature management:

• Core states
• State transitions
• Feature integration
• Error prevention

Complete guide to animation capabilities:

• Animation primitives
• Transition systems
• Performance optimization
• Hardware acceleration

Documentation of media playback features:

• Media control components
• Audio states
• Progress indicators
• Volume controls

Details of PiP implementation:

• PiP controls
• Window management
• Transition effects
• Platform specifics

Tab management system documentation:

• Tab groups
• Folder structure
• Visual indicators
• State transitions

Workspace system documentation:

• Workspace controls
• Indicator system
• Style variations
• State handling

zen-main-app-wrapper/
├── browser/
│   ├── browserStack/
│   └── tabbrowser-tabpanels/
├── urlbar/
│   ├── urlbar-background
│   └── urlbar-input-container/
└── zen-tabs-wrapper/
    └── tabbrowser-tab/

Root States
├── Theme States [data-theme]
├── Layout States [zen-*]
└── Feature States
    ├── Component States
    └── Interaction States

• Use appropriate attribute selectors
• Maintain state consistency
• Handle transitions properly
• Implement cleanup

• Use hardware-accelerated properties
• Optimize transitions
• Handle hover animations
• Consider reduced motion

• Follow established patterns
• Maintain compatibility
• Consider dependencies
• Test interactions

• Validate states
• Handle edge cases
• Provide fallbacks
• Clean up resources

--zen-primary-color        /* Primary theme color */
--zen-branding-bg-reverse  /* Reverse branding color */
--zen-colors-tertiary     /* Tertiary theme color */

--zen-element-separation  /* Element spacing */
--nebula-border-radius   /* UI corner radius */
--sidebar-width          /* Sidebar width */

--toolbarbutton-hover-background
--progress-height
--tab-min-width

/* Standard transition pattern */
transition: opacity 0.3s ease, transform 0.2s ease;

/* Performance optimization */
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
will-change: transform;

/* Theme-aware styling */
color: light-dark(black, white);
background: var(--zen-colors-tertiary);

/* Fallback pattern */
@supports not (backdrop-filter: blur(10px)) {
  /* Fallback styles */
}

1. Selector Usage

   • Use specific selectors
   • Maintain hierarchy
   • Follow naming conventions
   • Consider specificity

2. State Management

   • Handle all states
   • Manage transitions
   • Prevent conflicts
   • Clean up properly

3. Performance

   • Optimize animations
   • Efficient selectors
   • Manage resources
   • Monitor impact

4. Integration

   • Theme compatibility
   • State compatibility
   • Feature compatibility
   • Layout compatibility

• Theme compatibility
• Animation smoothness
• State transitions
• Layout integrity

• Animation performance
• Transition smoothness
• Resource usage
• Layout performance

• State transitions
• State combinations
• Error conditions
• Edge cases

• Feature interactions
• Theme switching
• Layout modes
• Platform compatibility

• Selectors
• States
• Animations
• Media
• PiP
• Tabs
• Workspaces

This documentation is designed to be machine-readable and provides precise technical details for AI models to effectively modify and extend Zen Browser's UI while maintaining consistency and performance.