function Mesh({opacity=1,style}){
  return <span aria-hidden="true" style={{position:'absolute',inset:'-30%',background:'var(--gradient-mesh)',filter:'blur(56px)',opacity,pointerEvents:'none',animation:'suko-drift var(--dur-drift) var(--ease-in-out) infinite alternate',...style}} />;
}
function ScreenHeader({eyebrow,title,right}){
  return (<div style={{display:'flex',alignItems:'flex-end',justifyContent:'space-between',gap:12,padding:'8px 20px 14px'}}>
    <div style={{display:'flex',flexDirection:'column',gap:3}}>
      {eyebrow ? <span style={{fontSize:11,fontWeight:700,letterSpacing:'.1em',textTransform:'uppercase',color:'var(--jade-700)'}}>{eyebrow}</span> : null}
      <h2 style={{fontFamily:'var(--font-display)',fontSize:28,fontWeight:800,letterSpacing:'-.02em',color:'var(--text-strong)',margin:0}}>{title}</h2>
    </div>
    {right}
  </div>);
}
Object.assign(window,{Mesh,ScreenHeader});