/* FlowingMenu (React Bits, MIT) — plain CSS port for the /library category
   menu. Without JS it is a normal list of links; flowing-menu.js adds the
   marquee for hover-capable fine pointers. */
.flowing-menu{
  --fm-bg:#0a0a0b;--fm-text:#F4EBD0;--fm-border:rgba(232,206,122,.25);
  --fm-marquee-bg:#E8CE7A;--fm-marquee-text:#0a0a0b;--fm-row:80px;
  margin:0 0 40px;background:var(--fm-bg);border:1px solid var(--fm-border);border-radius:var(--frame-radius,20px);
  overflow:hidden;
}
.flowing-menu__list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.flowing-menu__item{position:relative;flex:1;overflow:hidden;text-align:center;border-top:1px solid var(--fm-border);min-height:var(--fm-row)}
.flowing-menu__item:first-child{border-top:none}
.flowing-menu__link{
  position:relative;display:flex;align-items:center;justify-content:center;height:100%;min-height:var(--fm-row);
  padding:0 16px;color:var(--fm-text);text-decoration:none;text-transform:uppercase;white-space:nowrap;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:600;font-size:clamp(1.15rem,2.6vw,1.9rem);letter-spacing:.01em;
}
.flowing-menu__link:hover{color:var(--fm-text);text-decoration:none}
.flowing-menu__link:focus-visible{outline:2px solid var(--fm-marquee-bg);outline-offset:-6px;border-radius:12px}

/* Marquee (built by JS, aria-hidden). */
.flowing-menu .marquee{
  position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;pointer-events:none;
  background:var(--fm-marquee-bg);transform:translate3d(0,101%,0);
}
.flowing-menu .marquee__inner-wrap{width:100%;height:100%;overflow:hidden}
.flowing-menu .marquee__inner{position:relative;display:flex;align-items:center;width:fit-content;height:100%;will-change:transform}
.flowing-menu .marquee__part{display:flex;flex-shrink:0;align-items:center;color:var(--fm-marquee-text)}
.flowing-menu .marquee span{
  padding:0 1.2vw;white-space:nowrap;text-transform:uppercase;line-height:1;
  font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:clamp(1.1rem,2.4vw,1.7rem);
}
.flowing-menu .marquee__img{
  flex-shrink:0;width:160px;height:calc(var(--fm-row) - 26px);margin:0 1.2vw;border-radius:50px;
  background-size:cover;background-position:50% 50%;
}

@media (max-width:640px){
  .flowing-menu{--fm-row:58px;margin-bottom:28px}
}
/* Keyboard focus stays visible when the marquee covers the link. */
.flowing-menu__item:has(.flowing-menu__link:focus-visible) .marquee{box-shadow:inset 0 0 0 3px #0a0a0b,inset 0 0 0 5px var(--fm-marquee-bg)}