/* Deliberately transparent: the original artwork's fade reveals the page beneath. */
#sunshine-takeover { position: fixed; inset: 0; margin: 0; padding: 0; border: 0; width: 100%; height: 100%; height: 100dvh; max-width: none; max-height: none; overflow: hidden; background: transparent; color: white; }
#sunshine-takeover::backdrop { background: transparent; }
#sunshine-takeover .sunshine-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; }
#sunshine-takeover .sunshine-status { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); margin: 0; padding: 16px; background: black; color: white; font: 16px/1.5 Arial, sans-serif; }
#sunshine-takeover .sunshine-status[hidden] { display: none; }
/* The wrapper adds no motion, including for prefers-reduced-motion visitors.
   The explicitly opened original artwork remains unchanged. */

/* Keep the project link in the existing typography, with a little breathing room. */
.sunshine-experience-line { display: inline-block; margin-top: .5em; }
#sunshine-experience:focus-visible { outline: 1px solid white; outline-offset: 2px; }
#sunshine-experience:focus:not(:focus-visible) { outline: none; }

#sunshine-takeover .sunshine-close { position: absolute; z-index: 2; top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); width: 44px; height: 44px; padding: 0; border: 0; border-radius: 0; background: transparent; color: white; text-shadow: 0 1px 2px black, 0 0 3px black; font: 20px/1 Arial, sans-serif; cursor: pointer; }
#sunshine-takeover .sunshine-close:focus-visible { outline: 2px solid white; outline-offset: -4px; }
#sunshine-takeover .sunshine-close:focus:not(:focus-visible) { outline: none; }