How to properly customize CSS?

1) On the WP.org plugin page under FAQ there’s How to style the caption?

Which styles are available depends on which PhotoSwipe version you use and what kind of caption.
Please use the web developer tools of your browser to examine the caption elements and to learn which CSS classes are used.

That is a timeless answer, which will stay valid for a long time to come I guess.

2) A FAQ that I miss: How to properly customize CSS for the plugin?

a) The forum contains a pinned thread Custom background (2020-09-04) where the maintainer advises:

a1) Add custom CSS rules by using the proper CSS selectors and override the CSS values as you like plus an !important .
a2) In Classic themes use Theme Customizer → Add Custom CSS.
a3) In Block themes add custom CSS to style.css of the theme or a child-theme.

b) Meanwhile (2023-07-06) things have changed significantly
b1) both in the plugin (uses PhotoSwipe v4 → v5)
b2) and WordPress (advances in Block Theme architecture and best practises regarding customization).
Dear plugin author, could you updated recommendations how to customize CSS?

PhotoSwipe 5.x uses CSS variables for the various customizable attributes in the first class selector block for .pswp in /wp-content/plugins/lightbox-photoswipe/assets/ps5/styles/main.css?ver=5.0.40 which starts like this:

.pswp {
    --pswp-bg: #000;
    --pswp-placeholder-bg: #222;
    --pswp-root-z-index: 100000;
    --pswp-preloader-color: rgba(79, 79, 79, 0.4);
    --pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9);
    --pswp-icon-color: #fff;
    --pswp-icon-color-secondary: #4f4f4f;
    --pswp-icon-stroke-color: #4f4f4f;
    --pswp-icon-stroke-width: 2px;
    --pswp-error-text-color:var(--pswp-icon-color)
}

...

This should make it quite easy to tweak the style centrally.

c) Please address
c1) HOW to override CSS? Aggressive !important “shouting” or is there a more elegant alternative to put it into custom-alternative.css which if present gets loaded instead of main.css or custom-overrides.css which if present gets loaded after main.css and therefore takes precedence (if having the exact same specificity)?
c2) And WHERE to override (for Classic and for Block Themes). In the UI (and hence the Database) or in files?

Thank you!