/* The small VLMRB mark for page corners: the logo's own letters, all filled (assets/mark.svg, made by
   tools/make-mark.mjs), with red/cyan misconvergence, scanlines and a slice tear now and then.
   <a class="mark" href="./" aria-label="VLMRB home"><i></i></a>                                         */
.mark{display:inline-block;line-height:0;color:#e9efed;text-decoration:none;outline:none;-webkit-tap-highlight-color:transparent;
  filter:drop-shadow(-1.5px 0 rgba(255,74,22,.75)) drop-shadow(1.5px 0 rgba(92,207,209,.6))}
.mark i{display:block;height:var(--mark-h,15px);aspect-ratio:6.2435;background:currentColor;
  -webkit-mask-image:url(mark.svg),repeating-linear-gradient(to bottom,#000 0 2px,rgba(0,0,0,.45) 2px 3px);
  mask-image:url(mark.svg),repeating-linear-gradient(to bottom,#000 0 2px,rgba(0,0,0,.45) 2px 3px);
  -webkit-mask-size:contain,auto;mask-size:contain,auto;-webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat,repeat;mask-repeat:no-repeat,repeat;
  -webkit-mask-composite:source-in;mask-composite:intersect;
  animation:mark-jit 6.5s steps(1,end) infinite}
.mark:hover,.mark:focus-visible{color:#ff4a16}
.mark:hover i,.mark:focus-visible i{animation:mark-tear .24s steps(3) 1,mark-jit 1.6s steps(1,end) .24s infinite}
@keyframes mark-jit{0%,100%{clip-path:none;transform:none}61%{clip-path:inset(35% 0 45% 0);transform:translateX(2px)}62%{clip-path:none;transform:none}
  88%{clip-path:inset(62% 0 18% 0);transform:translateX(-2px)}89.5%{clip-path:none;transform:none}}
@keyframes mark-tear{0%,100%{clip-path:none;transform:none}33%{clip-path:inset(20% 0 55% 0);transform:translateX(-3px)}66%{clip-path:inset(55% 0 20% 0);transform:translateX(3px)}}
@media (max-width:640px){.mark i{height:var(--mark-h-m,13px)}}
/* fixed in the top-left corner, shown once the big logo has scrolled out of view (pages with the live logo) */
.mark.corner{position:fixed;left:var(--gut,16px);top:calc(18px + env(safe-area-inset-top,0px));z-index:6;visibility:hidden;pointer-events:none}
.mark.corner.on{visibility:visible;pointer-events:auto;animation:mark-in .32s steps(1,end)}
@keyframes mark-in{0%{opacity:0}20%{opacity:1;transform:translateX(-4px)}35%{opacity:0}55%{opacity:1;transform:translateX(2px)}70%{opacity:.4}85%,100%{opacity:1;transform:none}}