/* Shared pixel burst, with colors chosen to match each page. */
:root { --star-core: #fff; --star-tip-a: #7cfff2; --star-tip-b: #ff58d7; }
:root[data-click-stars="pink"] { --star-core: #ffe5f2; --star-tip-a: #ff65b7; --star-tip-b: #d6b4c6; }
:root[data-click-stars="cyan"] { --star-core: #dff8ff; --star-tip-a: #13a8d1; --star-tip-b: #79c7df; }
:root[data-click-stars="cats"] { --star-core: #fff56a; --star-tip-a: #00f0ff; --star-tip-b: #ff4bc1; }
:root[data-click-stars="terminal"] { --star-core: #d5ffc9; --star-tip-a: #8dff72; --star-tip-b: #4fae42; }
:root[data-click-stars="parchment"] { --star-core: #806421; --star-tip-a: #e6ddaf; --star-tip-b: #7e241a; }
:root[data-click-stars="silver"] { --star-core: #eee; --star-tip-a: #aaa; --star-tip-b: #777; }
:root[data-click-stars="ghost"] { --star-core: #fff; --star-tip-a: #9fc7ff; --star-tip-b: #b3bbc6; }
:root[data-click-stars="red"] { --star-core: #fff0df; --star-tip-a: #d33727; --star-tip-b: #ddd36a; }
:root[data-click-stars="amber"] { --star-core: #e2ddd0; --star-tip-a: #d6b767; --star-tip-b: #999489; }
:root[data-click-stars="youtube"] { --star-core: #d71920; --star-tip-a: #0033cc; --star-tip-b: #777; }
:root[data-click-stars="steel"] { --star-core: #e6e3d8; --star-tip-a: #678bb8; --star-tip-b: #bb4747; }
:root[data-click-stars="photo"] { --star-core: #eeeadd; --star-tip-a: #c5b78b; --star-tip-b: #9cae8e; }
:root[data-click-stars="windows"] { --star-core: #ffff66; --star-tip-a: #3366cc; --star-tip-b: #9999cc; }
:root[data-click-stars="violet"] { --star-core: #eee1ff; --star-tip-a: #b37ed1; --star-tip-b: #70c2d4; }
:root[data-click-stars="blue"] { --star-core: #dceaff; --star-tip-a: #4da6ff; --star-tip-b: #8d9bbb; }
:root[data-click-stars="draw"] { --star-core: #ddd; --star-tip-a: #b797ff; --star-tip-b: #888; }

#star-layer { position: fixed; inset: 0; z-index: 2147483647; pointer-events: none; overflow: hidden; }
#star-layer > .click-star {
  position: absolute;
  display: block;
  width: 6px;
  height: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
  background: var(--star-core);
  box-shadow: 0 -6px var(--star-core), 0 6px var(--star-core), -6px 0 var(--star-core), 6px 0 var(--star-core), 0 -12px var(--star-tip-a), 0 12px var(--star-tip-b);
  animation: clickStarBurst .62s steps(6, end) forwards;
}
@keyframes clickStarBurst {
  from { opacity: 1; transform: translate(0, 0) scale(1); }
  to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0); }
}
@media (prefers-reduced-motion: reduce) { #star-layer { display: none; } }