/* Vibe Framework - Hydration Styles
 * Elements with [vibe] attribute are hidden until framework removes it after hydration.
 * This prevents flash of unprocessed content and disables transitions during init.
 */
[vibe-fouc],
.vibe-fouc {
  visibility: hidden;
}

[vibe-fouc] *,
.vibe-fouc * {
  transition: none !important;
}

/* Vibe Dehydrate - Skip Reactive Processing
 * Elements with [vibe-dehydrate] attribute or .vibe-dehydrate class are skipped during
 * Vibe's parsing and hydration. Useful for displaying literal @[variable] syntax in
 * documentation, examples, or code snippets without triggering reactivity.
 */
[vibe-dehydrate],
.vibe-dehydrate {
  /* No styles applied - marker only */
}

/* Component Wrappers - Layout Transparent
 * Component wrappers (<component> or <div class="component">) use display: contents
 * to make the wrapper invisible in the layout. Children render as if the wrapper doesn't exist.
 */
component,
div.component {
  display: contents;
}