.nacre-logo { position:relative; display:inline-block; isolation:isolate; }
.nacre-logo>img { display:block;width:100%;height:100%;object-fit:contain; }
.nacre-logo::after {
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--logo-mask) center/contain no-repeat;
  filter:sepia(.65) saturate(3) hue-rotate(120deg) brightness(1.65);
  mix-blend-mode:screen;animation:nacreReflection 4s ease-in-out infinite;
}
/* Use the logo's own alpha instead of CSS masks: file:// WebViews can reject mask URLs. */
@keyframes nacreReflection {
  0%{clip-path:polygon(-70% 0,-40% 0,-70% 100%,-100% 100%);opacity:0}
  12%{opacity:.95}
  55%{clip-path:polygon(140% 0,170% 0,140% 100%,110% 100%);opacity:.95;filter:sepia(.65) saturate(3) hue-rotate(260deg) brightness(1.65)}
  65%,100%{clip-path:polygon(140% 0,170% 0,140% 100%,110% 100%);opacity:0}
}
@media(prefers-reduced-motion:reduce){.nacre-logo::after{animation:none;opacity:.18;clip-path:none}}
#startupScreen {position:fixed;inset:0;z-index:10000;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#090c0b;color:#eee8db;text-align:center;}
#startupScreen .nacre-logo {width:min(62vw,240px);height:260px;}
#startupScreen p {font:17px/1.6 sans-serif;padding:0 20px;}